/* ============================================================================ 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; } 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 the one row that cannot wrap — it is sticky and a fixed 56px — so on narrow screens links are dropped rather than allowed to overflow. 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. Nothing is lost: the footer carries the full navigation at every width. */ @media (max-width: 700px) { .header-nav .nav-secondary { display: none; } } @media (max-width: 460px) { /* Only the two things a visitor actually taps here survive: the theme toggle and the one call to action. */ .header-nav .nav-link { display: none; } .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); } .hero-inner { position: relative; z-index: 2; padding: 36px 0 24px; max-height: 38vh; } @media (max-width: 760px) { .hero-inner { padding: 30px 0 22px; max-height: none; } } /* 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 19s 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 23s 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 27s 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