@font-face { font-family: "Inter"; src: url("/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: light; --bg: #fafafa; --bg-soft: #ebfafe; --card: #ffffff; --text: #073742; --heading: #08272e; --text-muted: #44656f; --border: #dbe7ea; --border-strong: #c3d6dc; --accent: #0b3440; --accent-dark: #14424e; --accent-soft: #d7f1fa; --pink: #ffdef7; --chart-pink: #f472b6; --success: #0e7c3e; --success-soft: #e7f6ec; --warning: #b45309; --error: #c8163f; --error-soft: #fdeaef; } /* Employer subdomain (hire.rekruit.in) -- class set on by nav.js's isEmployerHost check. A slightly darker accent-soft than the job-seeker site's, so secondary buttons/chips/badges (Contribute-style CTAs, the sign-in button, pricing "Your plan" badges) read with a touch more visual weight there. Everything else inherits the same palette. */ .employer-host { --accent-soft: #b8e2f2; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 680px; margin: 0 auto; padding: 0 16px; line-height: 1.5; background: var(--bg); color: var(--text); overflow-x: hidden; } body.home { max-width: none; padding: 0; } /* Wider content column for pages whose layout genuinely needs the room (e.g. employer-search.html's multi-column results grid). Wider than the 1120px grid nav.js/the footer use for their own full-bleed chrome -- this page's candidate cards benefit from more horizontal room than the marketing pages do, and the header/footer's own max-width is separately capped by their own full-bleed rules regardless of body's. */ body.wide { max-width: 1360px; padding: 0 24px; } h1, h2, h3, h4 { color: var(--heading); letter-spacing: -0.02em; } h1 { font-size: 1.75rem; font-weight: 650; margin-bottom: 4px; } h2 { font-size: 1.3rem; font-weight: 650; margin-bottom: 4px; } p.subtitle { color: var(--text-muted); margin-top: 0; font-size: 0.95rem; } .link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } label { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 14px; margin-bottom: 4px; } select, input, textarea { width: 100%; padding: 10px 12px; font-size: 1rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--card); color: var(--text); font-family: inherit; } textarea { resize: vertical; } select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } button { margin-top: 20px; padding: 10px 26px; font-size: 0.9rem; font-weight: 550; cursor: pointer; border: none; border-radius: 4px; background: var(--accent); color: #fff; font-family: inherit; transition: background 0.15s ease; } button:hover { background: var(--accent-dark); } a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } #result { margin-top: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; display: none; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05); } #result.error { border-color: var(--error); background: var(--error-soft); color: var(--error); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } .stat { text-align: center; } .stat .value { font-size: 1.1rem; font-weight: 650; color: var(--heading); } .stat .label { font-size: 0.75rem; color: var(--text-muted); } .median .value { font-size: 1.5rem; color: var(--success); } .sample-size { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; } /* One stat-grid block per experience year (designation_company.html) -- stacked cards instead of a dense multi-column table, so a company+job- title pair with many surviving experience years reads as a scannable list rather than a wide table. */ .experience-block { padding: 18px 0; border-bottom: 1px solid var(--border); } .experience-block:last-child { border-bottom: none; } .experience-block h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 4px; } /* Confidence indicator -- deliberately replaces a raw people-count everywhere sample size used to be shown (salary results, company/ designation breakdown tables). A coarse Low/Medium/High tier reads more honestly than an exact-looking number, and avoids implying more precision than "at least N people, suppressed below that" actually carries. Bar fill is proportional to the tier, not the real count -- there is no continuous scale here, only three tiers. */ .confidence-wrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .confidence-bar { display: inline-block; width: 36px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; flex-shrink: 0; } .confidence-bar .fill { display: block; height: 100%; border-radius: 3px; } .confidence-bar.low .fill { background: var(--error); } .confidence-bar.medium .fill { background: var(--warning); } .confidence-bar.high .fill { background: var(--success); } .confidence-label { font-size: 0.8rem; color: var(--text-muted); } /* Search comboboxes: icon-prefixed input, clear button, floating results */ .combobox { position: relative; } .combobox input { padding-left: 40px; padding-right: 36px; } .combobox-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .combobox-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: none; background: none; padding: 0; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 50%; align-items: center; justify-content: center; margin-top: 0; } .combobox-clear:not([hidden]) { display: flex; } .combobox-clear:hover { background: var(--bg-soft); color: var(--heading); } .example-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .example-chips-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .example-chip { font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--heading); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; } .example-chip:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .combobox .search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 20; } .search-results { border: 1px solid var(--border); border-radius: 10px; max-height: 220px; overflow-y: auto; display: none; margin-top: 4px; background: var(--card); box-shadow: 0 8px 24px -10px rgba(8, 39, 46, 0.22); } .result-row { padding: 9px 14px; cursor: pointer; } .result-row:hover, .result-row.highlighted { background: var(--accent-soft); } .result-primary { font-size: 0.92rem; font-weight: 600; color: var(--heading); } .result-secondary { font-size: 0.78rem; color: var(--text-muted); margin-top: 1px; } hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; } .gate { margin-top: 12px; padding: 14px; background: var(--accent-soft); border-radius: 8px; font-size: 0.85rem; } .gate button { margin-top: 8px; padding: 8px 16px; font-size: 0.85rem; } /* "Get in touch" niche-report callout */ .niche-callout { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-soft); } .niche-icon { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; margin-top: 2px; } .niche-callout-body { flex: 1 1 240px; } .niche-callout-body h3 { margin: 0 0 4px; font-size: 1rem; } .niche-callout-body p { margin: 0; color: var(--text-muted); font-size: 0.88rem; } .niche-callout .cta-button { margin-top: 0; align-self: center; } #c-result { margin-top: 12px; font-size: 0.9rem; display: none; font-weight: 600; } #c-result.ok { color: var(--success); } #c-result.error { color: var(--error); } /* Job board: jobs.html, job_detail.html, employer-jobs.html */ /* job_detail.html sits on a wide (1360px) body like jobs.html/company.html, but its own content -- one job's badges/skills/description/apply form -- reads better in a constrained, centered column than stretched full-width; this caps just that inner content, not the whole page. */ .job-detail-card { max-width: 760px; margin: 0 auto; } .job-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .job-badge { padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--accent-soft); color: var(--heading); } .job-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .job-skill-tag { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; border: 1px solid var(--border); color: var(--text-muted); } .job-description { white-space: pre-wrap; margin-top: 8px; line-height: 1.6; } /* Third-party (crawled) postings only -- see backend/job_crawler.py. A small transparency note, not a badge/warning, since aggregating a company's own public posting is entirely ordinary. */ .job-source-note { font-size: 0.85rem; color: var(--text-muted); margin: 4px 0 0; } .job-card-source { font-size: 0.8rem; color: var(--text-muted); } /* position:relative so the full-card overlay link (.job-card-link below) can stretch to fill it -- clicking anywhere on the card navigates to the job, not just the title text, while the Apply button stays independently clickable via a higher z-index. */ .job-card { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 14px; background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .job-card-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; } .job-card-body { position: relative; z-index: 1; min-width: 0; } .job-card h3 { margin: 0 0 2px; font-size: 1.1rem; } .job-card h3 a { text-decoration: none; position: relative; z-index: 1; } .job-card-meta { color: var(--text-muted); font-size: 0.88rem; } .job-card-apply { position: relative; z-index: 2; flex-shrink: 0; white-space: nowrap; } .job-filter-sidebar { display: flex; flex-direction: column; gap: 4px; } .job-board-layout { display: flex; gap: 32px; align-items: flex-start; margin-top: 20px; } .job-board-layout .job-filter-sidebar { flex: 0 0 260px; } .job-board-layout .job-results { flex: 1 1 0; min-width: 0; } /* Full-width single-column rows -- each posting gets the full width of the (now-wide) job board rather than being squeezed into a 1/3-width grid cell, matching how job-board listings are conventionally scanned. */ .job-results-grid { display: flex; flex-direction: column; gap: 14px; } .job-results-grid .job-card { margin-bottom: 0; } .employer-job-item { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px; background: var(--card); } .employer-job-item-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; } .employer-job-item-head h3 { margin: 0; font-size: 1.05rem; } .employer-job-item-meta { color: var(--text-muted); font-size: 0.85rem; margin: 4px 0 8px; } .job-status-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; } .job-status-badge.active { background: var(--success); color: #fff; } .job-status-badge.closed { background: var(--text-muted); color: #fff; } .applicant-card { border-top: 1px solid var(--border); padding: 10px 0; } .applicant-card:first-child { border-top: none; } .applicant-card-name { font-weight: 600; } .applicant-card-meta { color: var(--text-muted); font-size: 0.85rem; } .applicant-card-note { margin-top: 4px; font-size: 0.88rem; font-style: italic; } /* profile.html */ .profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; } .profile-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .form-status { margin-top: 12px; font-size: 0.9rem; display: none; font-weight: 600; } .form-status.ok { color: var(--success); display: block; } .form-status.error { color: var(--error); display: block; } /* company.html */ .back-link { font-size: 0.85rem; display: inline-block; margin-bottom: 8px; font-weight: 600; text-decoration: none; } .company-meta { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; } .company-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; font-size: 0.85rem; } .company-facts .fact-label { color: var(--text-muted); } table.breakdown { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.85rem; } table.breakdown th, table.breakdown td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); } table.breakdown th { color: var(--text-muted); font-weight: 600; } table.breakdown td.num, table.breakdown th.num { text-align: right; } /* Card-grid alternative to table.breakdown -- used on company.html's role/ job-title breakdowns instead of a plain table, using the same accent-soft tint as .gate/.job-badge elsewhere in this theme. One card per role/designation (not one per experience-band row -- see _group_breakdown_by_name() in backend/app.py), each listing its own bands as a small stacked list in chronological experience order. */ .breakdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-top: 12px; } .breakdown-card { background: var(--accent-soft); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; } .breakdown-card-title { font-weight: 650; color: var(--heading); font-size: 0.95rem; margin-bottom: 6px; } .breakdown-card-title a { text-decoration: none; } /* One row per experience band -- label on the left, salary + confidence pushed to the right (bottom-right of the card for the last row), rather than a left-aligned vertical stack. */ .breakdown-card-band-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.5); } .breakdown-card-band-row:first-child { border-top: none; } .breakdown-card-band { padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--card); color: var(--text-muted); flex-shrink: 0; } .breakdown-card-band-value { font-size: 0.95rem; font-weight: 700; color: var(--heading); } .breakdown-card-band-confidence { flex-shrink: 0; } /* Site header: full-bleed band via breakout margins; inner content on the 1120px grid on every page (the 680px pages included). */ .site-header { margin: 0 calc(50% - 50vw) 28px; } body.home .site-header { background: var(--bg-soft); margin-bottom: 0; } .header-inner { max-width: 1120px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .site-logo { font-size: 1.35rem; font-weight: 800; text-decoration: none; color: var(--heading); letter-spacing: -0.03em; } /* Employer subdomain (hire.rekruit.in) gets a small "hire" sub-label under the wordmark -- set via nav.js's isEmployerHost check, not a separate brand, just a visual cue for which audience this chrome belongs to. */ .site-logo-hire { display: inline-flex; flex-direction: column; line-height: 1.05; } .site-logo-sub { font-size: 0.6rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; } .site-nav { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; } .site-nav a { text-decoration: none; font-size: 0.9rem; font-weight: 550; color: var(--text); } .site-nav a.active, .site-nav a:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 6px; } .header-actions { display: flex; gap: 10px; align-items: center; } .header-actions .cta-button { padding: 8px 18px; font-size: 0.85rem; } .auth-chip { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--heading); } .auth-chip-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } /* Deliberately its own class, not .cta-button.secondary -- that class is hidden below 480px to save space (see the mobile media query), which would otherwise take the sign-in link with it and leave mobile visitors with no way to sign in at all. Same visual style, always visible. */ .auth-signin-button { display: inline-block; padding: 8px 18px; font-size: 0.85rem; font-weight: 550; text-decoration: none; border-radius: 4px; background: var(--accent-soft); color: var(--heading); transition: background 0.15s ease; } .auth-signin-button:hover { background: #c6e9f5; } /* Nav "Sign in" chip: a button that opens a small dropdown with both provider choices (Google/LinkedIn), rather than jumping straight into one provider's consent screen. */ .auth-signin-wrap { position: relative; display: inline-flex; } .auth-signin-wrap .auth-signin-button { border: none; cursor: pointer; font-family: inherit; line-height: inherit; appearance: none; -webkit-appearance: none; margin: 0; box-shadow: none; } .auth-signin-wrap .auth-signin-button::-moz-focus-inner { border: 0; padding: 0; } .auth-signin-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(8, 39, 46, 0.12); padding: 6px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; } /* [hidden] and .auth-signin-dropdown are equal-specificity author rules -- without this, the plain class rule's `display: flex` above silently wins over the browser's built-in `[hidden] { display: none }` UA rule (author styles always beat UA styles regardless of specificity), so toggling the `hidden` attribute in JS had zero visible effect: the dropdown rendered permanently open no matter what state it was actually in. */ .auth-signin-dropdown[hidden] { display: none; } .auth-signin-dropdown a { display: block; padding: 8px 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 550; color: var(--heading); text-decoration: none; } .auth-signin-dropdown a:hover { background: var(--accent-soft); } /* Buttons (anchor-styled) */ .cta-button { display: inline-block; padding: 10px 26px; font-size: 0.9rem; font-weight: 550; text-decoration: none; border-radius: 4px; background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(8, 39, 46, 0.06); transition: background 0.15s ease; } /* An author-stylesheet display rule on a [hidden] element normally beats the UA stylesheet's display:none default -- this rule keeps `hidden` working on any element that also has .cta-button (e.g. employer-search .html's #account-chip, hidden until its signed-in/paid state resolves). */ .cta-button[hidden] { display: none; } .cta-button:hover { background: var(--accent-dark); } .cta-button.secondary { background: var(--accent-soft); color: var(--heading); box-shadow: none; } .cta-button.secondary:hover { background: #c6e9f5; } /* Sign-in prompts with two provider buttons (Google + LinkedIn) -- a plain flex row, not a new modal/popover component. */ .oauth-button-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Full-bleed sections (Home) */ .section { padding: 56px 0; } .section-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .band-tint { background: var(--bg-soft); } .band-dark { background: var(--accent); } .section-heading { font-size: 2.1rem; font-weight: 650; text-align: center; margin-bottom: 8px; letter-spacing: -0.027em; line-height: 1.1; } .section-subheading { color: var(--text-muted); text-align: center; max-width: 620px; margin: 0 auto 32px; } /* Hero */ .hero { text-align: center; padding: 40px 0 48px; } .hero .section-inner { max-width: 820px; } .hero-illustration { max-height: 280px; width: auto; max-width: 100%; margin-bottom: 8px; } .hero .eyebrow { display: inline-flex; justify-content: center; align-items: center; background: var(--pink); color: var(--heading); border-radius: 999px; padding: 6px 18px; font-size: 0.95rem; font-weight: 650; min-width: 12ch; margin-bottom: 18px; } .hero .eyebrow .cursor { display: inline-block; margin-left: 2px; animation: blink 0.9s step-end infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hero h1 { font-size: clamp(2.5rem, 6vw, 3.6rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.027em; margin: 0 0 14px; } .hero p.subtitle { font-size: 1.05rem; max-width: 560px; margin: 0 auto 24px; } .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-trust { margin-top: 18px; font-size: 0.78rem; color: var(--text-muted); } /* Trust strip */ .trust-strip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .trust-strip-caption { color: var(--text-muted); font-size: 0.85rem; margin: 0; } .trust-strip-stat { font-weight: 800; color: var(--heading); font-size: 1.05rem; } .trust-strip-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; } .trust-strip-item { font-size: 1.05rem; font-weight: 650; color: var(--text-muted); letter-spacing: -0.01em; } /* Pillar cards */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; } .feature-card { border: 1px solid var(--border); border-radius: 16px; padding: 22px; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(8, 39, 46, 0.28); } .feature-card h3 { margin: 10px 0 6px; font-size: 1.05rem; font-weight: 650; } .feature-card p { color: var(--text-muted); font-size: 0.88rem; } .feature-card a { font-size: 0.85rem; font-weight: 650; text-decoration: none; } .pillar-icon { display: block; width: 60px; height: 60px; object-fit: contain; } .pillar-badge { display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; margin-bottom: 14px; background: var(--pink); color: var(--heading); } .pillar-badge.live { background: var(--accent); color: #fff; } /* Feature deep-dives: accordion + screenshot */ .feature-section { display: flex; align-items: center; gap: 48px; padding: 28px 0; } .feature-section.reverse { flex-direction: row-reverse; } .feature-copy, .feature-visual { flex: 1 1 0; min-width: 0; } .feature-copy h3 { font-size: 1.5rem; font-weight: 650; margin-bottom: 6px; letter-spacing: -0.02em; } .feature-copy > p { color: var(--text-muted); margin-bottom: 18px; } .acc { border-bottom: 1px solid var(--border); } .acc summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 650; font-size: 0.95rem; color: var(--heading); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: "+"; font-weight: 400; font-size: 1.2rem; color: var(--text-muted); } .acc[open] summary::after { content: "\2212"; } .acc-body { padding: 0 0 14px; color: var(--text-muted); font-size: 0.9rem; } .feature-copy .cta-button { margin-top: 20px; } .mockup-frame { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.06), 0 24px 48px -24px rgba(8, 39, 46, 0.25); } .mockup-frame img { display: block; width: 100%; height: auto; } .mockup-caption { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 8px; } /* Live data widgets */ .widget-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; } .live-widget-card { border: 1px solid var(--border); border-radius: 16px; padding: 24px; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.04); } .live-widget-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .live-widget-header strong { color: var(--heading); } .live-tag { background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; } .widget-bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--bg-soft); margin: 20px 0 12px; } .widget-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--chart-pink); opacity: 0.45; } .widget-bar-median { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); } .widget-legend { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); } .widget-legend .value { color: var(--heading); font-weight: 650; } .widget-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 0.85rem; } .role-row { margin-top: 14px; } .role-row .role-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; } .role-row .role-name { font-weight: 600; color: var(--heading); } .role-row .role-median { color: var(--text-muted); } .role-row .role-track { height: 8px; border-radius: 999px; background: var(--bg-soft); } .role-row .role-fill { height: 100%; border-radius: 999px; background: var(--chart-pink); opacity: 0.55; } /* Stat callouts */ .stat-callout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-callout { text-align: center; } .stat-callout .number { font-size: 2.3rem; font-weight: 800; color: var(--heading); letter-spacing: -0.03em; } .stat-callout .label { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; } /* Mission band */ .mission-band { max-width: 720px; margin: 0 auto; text-align: center; } .mission-band p { margin-bottom: 14px; } .scribble { display: block; width: 140px; height: auto; margin: 4px auto 18px; } /* Salary lookup layout (salary.html) -- two-column: lookup form + a "Popular companies" quick-link panel, so the page's content actually fills body.wide's width instead of floating a single narrow column in a sea of empty margin (real user feedback: "too much empty space"). */ .lookup-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; } .lookup-card, .popular-card { padding: 28px; } .popular-card h3 { margin: 0 0 4px; font-size: 1rem; } .chip-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chip-link { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--bg-soft); color: var(--accent); font-size: 0.85rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; } .chip-link:hover { border-color: var(--border-strong); } .section-inner.narrow { max-width: 640px; } @media (max-width: 860px) { .lookup-layout { grid-template-columns: 1fr; } } /* Closing CTA: white card floating on the dark band */ .cta-card { background: var(--card); border-radius: 20px; max-width: 680px; margin: 0 auto; padding: 48px 32px; text-align: center; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35); } .cta-card h2 { font-size: 1.7rem; font-weight: 650; margin-bottom: 8px; letter-spacing: -0.025em; } .cta-card p { color: var(--text-muted); margin-top: 0; } .cta-band-note { font-size: 0.85rem; margin-top: 14px; } /* Footer: dark navy, full-bleed, on all pages */ .site-footer { background: var(--accent); color: #d7eef5; margin: 64px calc(50% - 50vw) 0; } /* Home ends with the dark CTA band -- let the two navy regions merge */ body.home .site-footer { margin-top: 0; } .footer-inner { max-width: 1120px; margin: 0 auto; padding: 52px 24px 28px; } .footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .footer-wordmark { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; text-decoration: none; } .footer-cols { display: flex; gap: 64px; flex-wrap: wrap; } .footer-col h4 { color: #a5c8d1; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; } .footer-col a { display: block; color: #d7eef5; text-decoration: none; font-size: 0.9rem; margin-bottom: 9px; } .footer-col a:hover, .footer-col a.active { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-bottom { border-top: 1px solid rgba(215, 238, 245, 0.18); margin-top: 40px; padding-top: 18px; font-size: 0.75rem; color: #a5c8d1; } /* About / For Employers / Contact prose pages */ .content-page p { margin-bottom: 14px; } .content-page ul { padding-left: 20px; } .content-page li { margin-bottom: 6px; } .page-illustration { display: block; width: 100%; max-width: 560px; height: auto; margin: 8px auto 20px; } @media (max-width: 900px) { .feature-section, .feature-section.reverse { flex-direction: column; } .feature-visual { order: -1; width: 100%; } .stat-callout-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .widget-row { grid-template-columns: 1fr; } } @media (max-width: 640px) { .site-nav { order: 3; flex-basis: 100%; } .header-inner { gap: 12px; } .header-actions { margin-left: auto; } } @media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .company-facts { grid-template-columns: 1fr; } .section { padding: 40px 0; } .stat-callout .number { font-size: 1.8rem; } .hero-illustration { max-height: 200px; } .footer-cols { gap: 36px; } .header-actions .cta-button.secondary { display: none; } } @media (prefers-reduced-motion: reduce) { .hero .eyebrow .cursor { animation: none; } } /* Employer candidate search (backend/static/employer-search.html) */ .access-gate { border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05); } .access-gate p { margin-top: 0; } .filter-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } .filter-row > div { flex: 1 1 180px; } .filter-row label { display: block; margin-bottom: 4px; } /* Candidate card: a fixed-size 3D flip card (front = summary, back = full profile) rather than a detail panel appended below the summary -- an appended panel grows the card's own height on reveal, which (a) misaligns every other card's grid row and (b) was the direct cause of "Contact" and the skills row landing at different Y positions card-to-card, since height was purely driven by however much summary content that particular candidate happened to have. Fixing the card at one height and pinning .candidate-card-actions to the bottom via margin-top:auto (both faces are flex columns) makes every card's layout identical regardless of content length; the flip (not an expand) is what keeps the card's footprint the same size when contact info is revealed. */ .candidate-card { position: relative; height: 340px; perspective: 1200px; margin-bottom: 12px; } .candidate-card-flipper { position: relative; width: 100%; height: 100%; transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1); transform-style: preserve-3d; } .candidate-card.flipped .candidate-card-flipper { transform: rotateY(180deg); } .candidate-card-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05); display: flex; flex-direction: column; } .candidate-card-back { transform: rotateY(180deg); } .candidate-card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; } .candidate-card-role { color: var(--text-muted); font-size: 0.9rem; } .candidate-card-meta { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; } /* Capped, not auto -- a candidate with many skills would otherwise push .candidate-card-actions further down than a candidate with few, which is the other half of the "different positions on different cards" bug. */ /* max-height caps at exactly 2 full chip rows (~27px + 4px margin each) -- anything shorter clips a chip mid-row, which looks like a rendering bug. */ .candidate-card-skills { font-size: 0.85rem; margin-top: 6px; max-height: 62px; overflow: hidden; } .candidate-card-back-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-shrink: 0; } .candidate-back-btn { background: none; border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--heading); font-size: 1rem; cursor: pointer; flex-shrink: 0; } .candidate-back-btn:hover { background: var(--bg-soft); } .candidate-back-scroll { flex: 1 1 auto; overflow-y: auto; font-size: 0.85rem; } .candidate-back-scroll p { margin: 0 0 8px; } .candidate-back-scroll h4 { margin: 10px 0 4px; font-size: 0.8rem; } .candidate-back-scroll ul { margin: 0; padding-left: 18px; } /* Shown only when renderCandidateCard() detects the loaded profile actually overflows the fixed-height back face -- an explicit "there's more" cue rather than relying on a visitor to notice a scrollbar. */ .candidate-show-more { margin-top: 6px; align-self: center; background: none; border: 1px solid var(--border); border-radius: 50%; width: 26px; height: 26px; padding: 0; cursor: pointer; color: var(--heading); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .candidate-show-more:hover { background: var(--bg-soft); } .candidate-show-more[hidden] { display: none; } /* Employer search: search box + a dropdown filters panel + full-width results */ .employer-search-box { flex: 1 1 320px; margin-bottom: 0; } .employer-search-toolbar-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .employer-search-toolbar-row .cta-button { margin: 0; white-space: nowrap; } .filters-toggle-btn { display: inline-flex; align-items: center; gap: 6px; } .filters-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--pink); color: var(--heading); font-size: 0.72rem; font-weight: 700; padding: 0 5px; } .filters-count-badge[hidden] { display: none; } .filters-dropdown-panel { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--card); box-shadow: 0 4px 16px rgba(8, 39, 46, 0.08); } .filters-dropdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 24px; } .filter-group label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--heading); } /* Dual-handle range slider: two overlapping with the native track/thumb replaced -- only the thumb (not the whole track) has pointer-events, so either handle stays independently draggable no matter which input currently sits on top. Styled to match the pink P10-P90 range bar used elsewhere (Home page's live widget, company/ designation pages' salary-range display -- see .widget-bar-track/ .widget-bar-fill/.widget-bar-median) so a filter control and a result display read as the same visual language, just with two draggable markers here instead of one static one. */ .dual-range { position: relative; height: 20px; display: flex; align-items: center; margin-top: 10px; } .dual-range-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 10px; border-radius: 999px; background: var(--bg-soft); } .dual-range-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 10px; border-radius: 999px; background: var(--chart-pink); opacity: 0.45; } .dual-range input[type="range"] { position: absolute; left: 0; right: 0; width: 100%; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .dual-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; } .dual-range input[type="range"]::-moz-range-track { background: transparent; border: none; } .dual-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 8px; height: 20px; border-radius: 4px; margin-top: 0; cursor: pointer; background: var(--accent); border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(8, 39, 46, 0.35); } .dual-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 8px; height: 20px; border-radius: 4px; cursor: pointer; background: var(--accent); border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(8, 39, 46, 0.35); } .dual-range-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; } #apply-filters-btn { margin-top: 4px; } .tag-chip-list { display: flex; flex-wrap: wrap; gap: 6px; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; background: var(--accent-soft); color: var(--heading); border-radius: 999px; padding: 4px 6px 4px 12px; } .tag-chip button { margin: 0; padding: 0; width: 18px; height: 18px; border-radius: 50%; background: none; color: var(--heading); font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .tag-chip button:hover { background: #c6e9f5; } .profile-completion { margin-top: 16px; } .profile-completion-head { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--heading); margin-bottom: 4px; } .profile-completion-bar { width: 100%; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; } .profile-completion-bar .fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.2s ease; } .search-results-main { flex: 1 1 auto; min-width: 0; } .search-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .search-toolbar select { width: auto; margin: 0; font-size: 0.85rem; padding: 6px 10px; } .sort-by { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); } .candidate-card-badges { display: flex; align-items: center; gap: 8px; } .badge-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 3px 10px; } .candidate-card-salary { font-weight: 700; color: var(--heading); font-size: 0.9rem; } .candidate-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; } .candidate-contact-btn { margin: 0; padding: 6px 16px; font-size: 0.85rem; } .candidate-bookmark-btn { background: none; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .candidate-bookmark-btn:hover { background: var(--bg-soft); } .candidate-bookmark-btn.bookmarked { color: var(--pink); background: var(--bg-soft); } /* Shortlist (employer-profile.html): plain auto-height cards in a single narrow column, not the search page's fixed-height flip-card grid -- there are no neighboring cards to stay aligned with here, so a simple expand-below reveal (like the site used before the flip-card redesign) is all this needs. */ .shortlist-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05); margin-bottom: 12px; } .shortlist-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.85rem; } .shortlist-detail h4 { margin: 10px 0 4px; font-size: 0.8rem; } .shortlist-detail ul { margin: 0; padding-left: 18px; } .shortlist-detail p { margin: 0 0 8px; } .shortlist-remove-btn { background: none; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; } .shortlist-remove-btn:hover { background: var(--error-soft); color: var(--error); } .pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; } .pagination button { margin: 0; background: var(--card); color: var(--heading); border: 1px solid var(--border); padding: 6px 14px; font-size: 0.85rem; } .pagination button:hover:not(:disabled) { background: var(--bg-soft); } .pagination button.active { background: var(--accent); color: #fff; border-color: var(--accent); } .pagination button:disabled { opacity: 0.4; cursor: default; } @media (max-width: 860px) { .employer-search-toolbar-row { flex-direction: column; align-items: stretch; } /* flex-basis applies to the cross axis once the row above stacks to column -- without resetting it, the search box's 320px *width* basis becomes a 320px *height*, leaving a tall empty box. */ .employer-search-box { flex-basis: auto; } .employer-search-toolbar-row .cta-button { width: 100%; } } /* Candidate result cards: a responsive multi-column grid rather than one full-width column -- with the filters sidebar gone (see above), a single column left most of a wide viewport empty. */ .candidate-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } .candidate-results-grid .candidate-card { margin-bottom: 0; } /* Employer billing (backend/static/employer-billing.html): 4-card pricing grid */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; } .pricing-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05); } .pricing-card h3 { margin: 0 0 4px; font-size: 1.1rem; } .pricing-card .price { font-size: 1.8rem; font-weight: 800; color: var(--heading); margin: 6px 0 0; letter-spacing: -0.02em; } .pricing-card .price-period { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; margin-bottom: 12px; } .pricing-card .pricing-credits { font-size: 0.85rem; font-weight: 650; color: var(--heading); margin-bottom: 16px; } .pricing-card ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1 1 auto; } .pricing-card li { font-size: 0.85rem; padding: 4px 0 4px 20px; position: relative; } .pricing-card li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; } .pricing-card .cta-button { margin-top: auto; text-align: center; } .pricing-current-badge { display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 700; color: var(--heading); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; } .pricing-current-badge[hidden] { display: none; } .cta-button:disabled { opacity: 0.55; cursor: default; } .cta-button:disabled:hover { background: var(--accent); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }