/* ============================================================================ Remote job board — design system Dark-first, compact, zero framework. ~9 KB. ========================================================================== */ :root { --bg: #0b0d12; --surface: #12151c; --surface-2: #171b24; --surface-hover: #1b2029; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); --text: #e8eaed; --text-muted: #8b92a4; --text-dim: #656c7d; --accent: #c8f751; --accent-ink: #0b0d12; --accent-glow: rgba(200, 247, 81, 0.16); --warn: #ffb86b; --radius: 8px; --radius-lg: 12px; --max: 1140px; --row-h: 68px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } /* ---------- Theme resolution --------------------------------------------- Three states, resolved with the cascade rather than JavaScript: auto (default) no data-theme attribute -> follows prefers-color-scheme light data-theme="light" -> always light dark data-theme="dark" -> always dark Doing "auto" in CSS instead of JS means the correct theme paints on the very first frame with no flash, and it keeps working with JavaScript disabled. The tiny inline script in only runs when the visitor has made an EXPLICIT choice, which is the only case CSS cannot express. ------------------------------------------------------------------------ */ /* auto -> light, when the visitor's OS asks for light and they have not chosen */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #fbfbfd; --surface: #ffffff; --surface-2: #f4f5f8; --surface-hover: #f0f2f6; --border: rgba(10, 12, 20, 0.09); --border-strong: rgba(10, 12, 20, 0.16); --text: #14171f; --text-muted: #5b6373; --text-dim: #7b8494; --accent: #2f6f2f; --accent-ink: #ffffff; --accent-glow: rgba(47, 111, 47, 0.1); } } /* explicit light, chosen via the toggle */ [data-theme='light'] { --bg: #fbfbfd; --surface: #ffffff; --surface-2: #f4f5f8; --surface-hover: #f0f2f6; --border: rgba(10, 12, 20, 0.09); --border-strong: rgba(10, 12, 20, 0.16); --text: #14171f; --text-muted: #5b6373; --text-dim: #7b8494; --accent: #2f6f2f; --accent-ink: #ffffff; --accent-glow: rgba(47, 111, 47, 0.1); } /* explicit dark wins over a light system preference */ [data-theme='dark'] { --bg: #0b0d12; --surface: #12151c; --surface-2: #171b24; --surface-hover: #1b2029; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); --text: #e8eaed; --text-muted: #8b92a4; --text-dim: #656c7d; --accent: #c8f751; --accent-ink: #0b0d12; --accent-glow: rgba(200, 247, 81, 0.16); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 0; } /* An author `display` rule beats the user agent's `[hidden] { display: none }`, because the UA sheet is the weakest origin in the cascade. Any element that sets its own display AND gets hidden from script therefore stays on screen. That was not a hypothetical: `.job-row` is `display: grid`, so every filter on the browse page — search, category, region, type, salary — computed the right answer, updated the count to "4 of 18", and then hid nothing at all. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; transition: top .16s ease; } .skip-link:focus { top: 12px; } /* ---------- Header ------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; height: 56px; display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } .site-header.is-stuck { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--border); } .site-header .wrap { display: flex; align-items: center; gap: 16px; width: 100%; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; letter-spacing: -0.02em; flex-shrink: 0; } .brand-mark { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #6ee7ff)); display: grid; place-items: center; color: var(--accent-ink); font-size: 13px; font-weight: 800; } .header-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .header-nav a.nav-link { padding: 7px 11px; border-radius: var(--radius); color: var(--text-muted); font-size: 13.5px; font-weight: 500; transition: color .15s ease, background .15s ease; } .header-nav a.nav-link:hover { color: var(--text); background: var(--surface-2); } /* The header is one row and cannot wrap — it is sticky and a fixed height — so an overflowing header widens the whole document and every page below it scrolls sideways, which is what makes a site feel broken on a phone. Until 1.4 the answer was to drop links: secondary ones below 700px, all of them below 460px. That kept the bar intact and made the menu disappear. The links now move into a panel instead — see "Mobile navigation" further down. */ @media (max-width: 460px) { .header-nav { gap: 6px; } .brand { font-size: 15px; } .header-nav .btn-primary { padding: 8px 12px; } } @media (max-width: 340px) { /* Wordmark goes, logo stays, so the CTA is never squeezed off the screen. */ .brand > span:not(.brand-mark) { display: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease; } .btn:hover { background: var(--surface-hover); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); } .btn-lg { padding: 12px 22px; font-size: 15px; } .btn-block { width: 100%; } .btn-icon { padding: 8px; width: 34px; height: 34px; } /* ---------- Hero --------------------------------------------------------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); } /* padding-block, not the shorthand: `.hero-inner` sits on the same element as `.wrap`, and a `padding` shorthand there wipes out the 20px inline padding every other section on the page uses — which is why the headline sat 20px left of the job list below it. */ /* No max-height. `.hero` is overflow: hidden (it clips the aurora), so a height cap on the inner column does not shrink the content — it cuts the bottom off it. On a 700px-tall window, 38vh hid the tag chips and the stats line entirely, and the shorter the window the more of the hero disappeared. */ .hero-inner { position: relative; z-index: 2; padding-block: 36px 24px; } @media (max-width: 760px) { .hero-inner { padding-block: 30px 22px; } } /* Aurora background. transform/opacity only, so it stays off the main thread. Never the LCP element — the headline paints first and does not wait on this. */ .aurora { position: absolute; inset: -40% -10% auto -10%; height: 320px; z-index: 1; filter: blur(72px); opacity: .5; pointer-events: none; } .aurora span { position: absolute; display: block; border-radius: 50%; will-change: transform; } .aurora span:nth-child(1) { width: 460px; height: 300px; left: 4%; background: radial-gradient(circle, var(--accent) 0%, transparent 68%); animation: drift1 calc(19s * var(--fx-speed, 1)) ease-in-out infinite; } .aurora span:nth-child(2) { width: 380px; height: 280px; left: 38%; background: radial-gradient(circle, #6ee7ff 0%, transparent 68%); animation: drift2 calc(23s * var(--fx-speed, 1)) ease-in-out infinite; } .aurora span:nth-child(3) { width: 420px; height: 260px; right: 6%; background: radial-gradient(circle, #b98cff 0%, transparent 68%); animation: drift3 calc(27s * var(--fx-speed, 1)) ease-in-out infinite; } @keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(60px,26px,0) scale(1.13); } } @keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-50px,34px,0) scale(.92); } } @keyframes drift3 { 0%,100% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(-38px,-22px,0) scale(1.1); } } @media (prefers-color-scheme: light) { :root:not([data-theme]) .aurora { opacity: .3; } } [data-theme='light'] .aurora { opacity: .3; } h1.hero-title { margin: 0 0 9px; font-size: clamp(27px, 4vw, 38px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; max-width: 15ch; } .hero-title .accent { color: var(--accent); } .hero-sub { margin: 0 0 16px; color: var(--text-muted); font-size: 16px; max-width: 56ch; } .hero-search { display: flex; gap: 8px; max-width: 540px; margin-bottom: 12px; } .hero-search input { flex: 1; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 15px; font-family: inherit; } .hero-search input::placeholder { color: var(--text-dim); } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: transform .13s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } .chip[aria-pressed='true'], .chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 650; transform: scale(1.04); } .hero-stats { color: var(--text-dim); font-size: 13px; } .hero-stats strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; } /* ---------- Filter bar --------------------------------------------------- */ .filter-bar { position: sticky; top: 56px; z-index: 40; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 10px 0; } .filter-bar .wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .select { appearance: none; padding: 7px 30px 7px 11px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-family: inherit; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b92a4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .select:hover { border-color: var(--border-strong); color: var(--text); } .result-count { margin-left: auto; color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; } /* ---------- Job rows ----------------------------------------------------- */ .job-list { margin: 0; padding: 0; list-style: none; } /* Seven children: logo, main, tags, salary, region, age, apply. The column count must match exactly or items wrap onto a second implicit row. */ .job-row { position: relative; display: grid; align-items: center; gap: 14px; grid-template-columns: 40px minmax(0, 1fr) auto auto auto 38px 78px; min-height: var(--row-h); padding: 12px 14px; border-bottom: 1px solid var(--border); transition: background .14s ease, transform .14s ease; } /* The apply cell keeps its width whether or not the button is visible, so rows do not reflow on hover. */ .job-row > .job-apply { justify-self: end; } .job-row:hover, .job-row:focus-within { background: var(--surface); transform: translateY(-1px); } .job-row.is-featured { background: var(--feat, var(--surface-2)); border-left: 2px solid var(--feat-border, var(--accent)); padding-left: 12px; } .job-row.is-expired { opacity: .55; } .job-logo { width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--logo-bg, var(--surface-2)); color: #fff; letter-spacing: -0.02em; } .job-main { min-width: 0; } .job-title { display: block; font-size: 15px; font-weight: 620; letter-spacing: -0.012em; color: var(--text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-row:hover .job-title { color: var(--accent); } .job-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); min-width: 0; } .job-company { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-company:hover { color: var(--text); text-decoration: underline; } .tag-list { display: flex; gap: 5px; flex-wrap: nowrap; } .tag { padding: 3px 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; } .tag:hover { color: var(--text); border-color: var(--border-strong); } .job-salary { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; } .job-salary.is-undisclosed { color: var(--text-dim); font-weight: 500; } .job-region { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .job-age { font-size: 12px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } /* Apply reveals on hover AND focus-within. Hover does not exist on touch and is invisible to keyboard users, so the whole row is always a link underneath. */ .job-apply { opacity: 0; transform: translateX(6px); transition: opacity .16s ease, transform .16s ease; padding: 6px 13px; font-size: 12.5px; white-space: nowrap; } .job-row:hover .job-apply, .job-row:focus-within .job-apply { opacity: 1; transform: translateX(0); } @media (hover: none) { .job-apply { display: none; } } .badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .badge-new { background: var(--accent-glow); color: var(--accent); } .badge-featured { background: var(--accent); color: var(--accent-ink); } .badge-expired { background: rgba(255, 184, 107, .14); color: var(--warn); } /* Narrow screens get an explicit two-row layout rather than a narrower version of the same seven-column grid. * * This has to be spelled out. Hiding .tag-list and .job-region removes them * from the grid entirely, so the remaining children reflow into whatever * columns are left and land in the wrong places — the classic symptom being an * age stamp that drops onto its own line under the logo. Every remaining child * is therefore placed by hand. */ @media (max-width: 860px) { .job-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; column-gap: 11px; row-gap: 3px; padding: 11px 12px; } .tag-list, .job-region, .job-apply { display: none; } .job-row > .job-logo { grid-column: 1; grid-row: 1 / span 2; align-self: start; } .job-row > .job-main { grid-column: 2; grid-row: 1; } .job-row > .job-salary { grid-column: 2; grid-row: 2; font-size: 12.5px; } .job-row > .job-age { grid-column: 3; grid-row: 1; } .job-logo { width: 36px; height: 36px; font-size: 13px; } .job-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .job-meta { flex-wrap: wrap; row-gap: 2px; } } /* ---------- Sections ----------------------------------------------------- */ .section { padding: 34px 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; } h2.section-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .section-link { color: var(--text-muted); font-size: 13px; font-weight: 500; } .section-link:hover { color: var(--accent); } .empty-state { padding: 48px 20px; text-align: center; color: var(--text-muted); } .empty-state p { margin: 0 0 14px; } .link-cloud { display: flex; flex-wrap: wrap; gap: 7px; } .link-cloud a { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; } .link-cloud a:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } /* ---------- Job detail --------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); padding: 18px 0 0; } .breadcrumb a:hover { color: var(--text); } .breadcrumb .sep { opacity: .5; } .job-header { padding: 18px 0 24px; border-bottom: 1px solid var(--border); } .job-header-top { display: flex; gap: 16px; align-items: flex-start; } .job-header .job-logo { width: 60px; height: 60px; font-size: 20px; border-radius: var(--radius-lg); } h1.job-h1 { margin: 0 0 5px; font-size: clamp(23px, 3.4vw, 31px); line-height: 1.16; letter-spacing: -0.03em; font-weight: 750; } .job-header-company { color: var(--text-muted); font-size: 14.5px; } .job-header-company a { color: var(--text); font-weight: 600; } .job-header-company a:hover { color: var(--accent); } .meta-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 18px; } .meta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-muted); } .meta-chip strong { color: var(--text); font-weight: 600; } .notice { padding: 14px 16px; border-radius: var(--radius-lg); margin: 18px 0; border: 1px solid; font-size: 14px; line-height: 1.5; } .notice-warn { background: rgba(255, 184, 107, .08); border-color: rgba(255, 184, 107, .28); color: var(--warn); } .notice-warn strong { color: var(--text); } /* Validation summary at the top of a returned form. Sits above the fields it describes and takes focus, so a screen reader announces the problem rather than dropping the user back at the top of a form that looks unchanged. */ .form-errors { padding: 14px 16px; border-radius: var(--radius-lg); margin: 0 0 22px; background: rgba(255, 107, 107, .09); border: 1px solid rgba(255, 107, 107, .32); color: var(--text); font-size: 14px; line-height: 1.5; } .form-errors:focus { outline: 2px solid var(--accent); outline-offset: 3px; } .form-errors ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-muted); } .form-errors li { margin-bottom: 3px; } .job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding: 28px 0 48px; align-items: start; } @media (max-width: 900px) { .job-layout { grid-template-columns: 1fr; gap: 28px; } } .prose { font-size: 15.5px; line-height: 1.68; color: #cfd4de; max-width: 68ch; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .prose { color: #303747; } } [data-theme='light'] .prose { color: #303747; } .prose h2 { margin: 30px 0 10px; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.015em; } .prose h3 { margin: 22px 0 8px; font-size: 15.5px; font-weight: 650; color: var(--text); } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { margin: 0 0 14px; } .prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; } .prose li { margin-bottom: 6px; } .prose li::marker { color: var(--text-dim); } .prose strong { color: var(--text); font-weight: 640; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .prose code { font-family: var(--mono); font-size: .89em; background: var(--surface-2); padding: 2px 5px; border-radius: 4px; } .prose blockquote { margin: 0 0 16px; padding-left: 14px; border-left: 2px solid var(--border-strong); color: var(--text-muted); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; } .benefit-grid { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; } .benefit { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; } .card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; } .card p { margin: 0 0 12px; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; } .sidebar { position: sticky; top: 78px; } @media (max-width: 900px) { .sidebar { position: static; } } .apply-card { border-color: var(--border-strong); } .apply-note { font-size: 12px; color: var(--text-dim); margin: 10px 0 0; text-align: center; } .share-row { display: flex; gap: 7px; flex-wrap: wrap; } /* Sticky mobile apply bar */ .sticky-apply { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); display: none; gap: 12px; align-items: center; transform: translateY(100%); transition: transform .22s ease; } .sticky-apply.is-visible { transform: translateY(0); } .sticky-apply .sa-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .sticky-apply { display: flex; } body.has-sticky-apply { padding-bottom: 66px; } } /* ---------- Company page ------------------------------------------------- */ .company-header { display: flex; gap: 18px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--border); } .company-header .job-logo { width: 64px; height: 64px; font-size: 22px; border-radius: var(--radius-lg); } h1.company-h1 { margin: 0 0 4px; font-size: 27px; letter-spacing: -0.03em; font-weight: 750; } .company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .company-card { display: block; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: transform .14s ease, border-color .15s ease; } .company-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } .company-card .cc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; } .company-card .job-logo { width: 34px; height: 34px; font-size: 12px; } .company-card h3 { margin: 0; font-size: 14.5px; font-weight: 650; } .company-card p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } .company-card .cc-count { margin-top: 9px; font-size: 12px; color: var(--accent); font-weight: 600; } /* ---------- Pagination --------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 28px 0; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .pagination a:hover { color: var(--text); border-color: var(--border-strong); } .pagination .is-current { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; } .pagination .is-gap { border: 0; background: none; } /* ---------- Alerts / forms ----------------------------------------------- */ .alert-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; text-align: center; } .alert-box h2 { margin: 0 0 7px; font-size: 19px; letter-spacing: -0.02em; } .alert-box p { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; } .alert-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; } .alert-form input { flex: 1; padding: 10px 13px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font-size: 14.5px; font-family: inherit; } @media (max-width: 520px) { .alert-form { flex-direction: column; } } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; } .field .hint { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 7px; font-weight: 400; } .field input, .field textarea, .field select { width: 100%; padding: 10px 13px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 14.5px; font-family: inherit; } .field textarea { min-height: 150px; resize: vertical; line-height: 1.55; } /* ---------- FAQ ---------------------------------------------------------- */ .faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; } .faq summary { padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--text-dim); font-size: 17px; line-height: 1; } .faq details[open] summary::after { content: '−'; } .faq .faq-body { padding: 0 16px 14px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; } .faq .faq-body p { margin: 0 0 10px; } .faq .faq-body p:last-child { margin: 0; } /* ---------- Footer ------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: 34px 0 44px; margin-top: 20px; color: var(--text-muted); font-size: 13px; } .footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; margin-bottom: 26px; } @media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 22px; } } .footer-cols h4 { margin: 0 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); font-weight: 650; } .footer-cols ul { margin: 0; padding: 0; list-style: none; } .footer-cols li { margin-bottom: 6px; } .footer-cols a:hover { color: var(--text); } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); } /* ---------- Motion preferences ------------------------------------------- */ /* Mandatory: this is an accessibility requirement, not a nicety. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .aurora span { animation: none !important; } .job-apply { opacity: 1; transform: none; } } /* ---------- Theme toggle (single button) --------------------------------- */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--text-muted); } .theme-toggle:hover { color: var(--text); } .theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #theme-auto { margin-right: 10px; } #theme-auto:hover { color: var(--text); } /* The toggle stays visible at every width. Phones are where a light/dark switch matters most, so hiding it on small screens would remove the feature exactly where it is used. */ /* ============================================================================ Utility classes. These exist so no template ever needs an inline style="" attribute. A strict `style-src 'self'` blocks inline style attributes, not just