/* ============================================================================ 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); } /* ---------- The hero wash ------------------------------------------------ Two companion colours for the glow behind the headline. They used to be a fixed cyan and a fixed violet, which was invisible on the shipped lime accent and obvious on anything else: a board themed rosewood still had a blue-and-purple haze over its own headline. So where the browser can compute a colour from another colour, these are the accent rotated either side of its own hue — an analogous set that follows whatever the owner picked. Where it cannot, they are exactly the two colours from before, so nothing about the default board changes. ------------------------------------------------------------------------ */ :root { --wash-a: #6ee7ff; --wash-b: #b98cff; --wash-a-soft: rgba(110, 231, 255, .12); } @supports (color: rgb(from red r g b)) { :root { --wash-a: oklch(from var(--accent) l c calc(h + 58)); --wash-b: oklch(from var(--accent) l c calc(h - 58)); --wash-a-soft: oklch(from var(--accent) l c calc(h + 58) / .12); } } /* ---------- Native controls ---------------------------------------------- Checkboxes, radios, select popups, scrollbars, date pickers and focus rings are drawn by the browser, and the browser has no idea what the variables above say. Without this it uses the VISITOR's system preference: a visitor on a light machine reading this site in dark got white checkboxes and a white select popup on a black page, and vice versa. Same three states, same order — the :not() carries higher specificity than :root, so the auto case wins wherever it applies, and an explicit choice overrides both. ------------------------------------------------------------------------ */ :root { color-scheme: dark; } [data-theme='light'] { color-scheme: light; } [data-theme='dark'] { color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } } *, *::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%, var(--wash-a))); 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 optional employer sign-in link. It lives in the bar rather than in the collapsing panel, so on a narrow screen it competes for space with the theme toggle, the primary call to action and the menu button — and of those four it is the one that can go. The footer carries it, and the panel does not need a fifth item crowding the row. */ .header-nav a.nav-signin { color: var(--text-dim); } .header-nav a.nav-signin:hover { color: var(--text); } @media (max-width: 560px) { .header-nav a.nav-signin { display: none; } } /* 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, var(--wash-a) 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, var(--wash-b) 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 11px; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; max-width: 17ch; /* Even out the lines instead of filling each one before wrapping. A headline is the one place on the page where the browser's greedy line breaking is plainly wrong: it produced "Remote jobs that / actually pay well." with the highlighted word alone at the start of line two, which is what the whole hero is judged on. Ignored by anything that does not support it, which leaves the greedy break — no worse than before. */ text-wrap: balance; } .hero-title .accent { color: var(--accent); } .hero-sub { margin: 0 0 16px; color: var(--text-muted); font-size: 16px; max-width: 56ch; text-wrap: pretty; /* no single-word last line */ } .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: var(--header-h, 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. */ /* * The title column has a FLOOR, and the chip column can shrink. * * It used to be `minmax(0, 1fr)` for the title beside an `auto` chip column, * which reads as "give the chips whatever they need and the title whatever is * left". With three short tags that is fine. With a board whose chips say * "Level I trauma with replantation" and "Microvascular & replantation", in a * container narrower than the full page — the "similar jobs" list on a listing * page — the chips took 617 of 1078 pixels and the title was left with 38. * Titles were rendering as "Hand & E…" and, in one case, as a single letter. * * So the title gets a minimum it cannot be squeezed below, and the chip column * is allowed to shrink and clip instead. A clipped chip row still communicates * — the first two chips are the ones that matter — whereas a clipped title * communicates nothing at all. */ .job-row { position: relative; display: grid; align-items: center; gap: 14px; grid-template-columns: 40px minmax(210px, 1fr) minmax(0, 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; min-width: 0; overflow: hidden; } .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); } /* Not a warning and not a promotion — a fact about who is hiring. Neutral weight on purpose: an individual posting a real job is not a lesser listing, the applicant just needs to know which kind of employer they are writing to. */ .badge-curated { /* Outlined rather than filled: it marks provenance, not promotion. A filled accent badge would read as a paid upgrade, which is the exact confusion this badge exists to prevent. */ background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); } /* .curated-note is gone with the full-width notice it styled — the disclosure now lives in a sidebar card. See .side-note below. */ .badge-individual { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } /* 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; } /* ---------- Job reference — v2.15 ---------------------------------------- */ /* Deliberately quieter than the chips above it. Tabular numerals and a wider letter-spacing because this is a number people read aloud and retype, and proportional digits in a body face make 6 and 8 easy to confuse at 13px. */ .job-ref { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; } .jr-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); } .jr-value { font-variant-numeric: tabular-nums; letter-spacing: .08em; font-size: 14px; font-weight: 650; color: var(--text); user-select: all; /* one click selects the whole number, not one digit */ } .jr-copy { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--radius); padding: 2px 8px; font-size: 11.5px; cursor: pointer; font-family: inherit; line-height: 1.6; } .jr-copy:hover { color: var(--text); border-color: var(--border-strong); } .jr-copy.is-done { color: var(--accent); border-color: var(--accent); } @media print { .jr-copy { display: none; } } .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; } /* ---------- Salary page — v2.14 ------------------------------------------ */ /* Three figures, the median deliberately larger than the two that bracket it. Equal weight would make a reader compare them, and they are not comparable: the median is the answer to the question and the other two are its context. auto-fit rather than a fixed three columns, so a board reporting only a median (no spread worth showing) does not leave two empty cells. */ .salary-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .salary-figure { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; gap: 6px; } .salary-figure.is-lead { border-color: var(--border-strong); } .sf-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); } .sf-value { font-size: 30px; font-weight: 780; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } .salary-figure.is-lead .sf-value { font-size: 40px; color: var(--accent); } .sf-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; } /* Rates do not stretch. A board usually carries one, and one card allowed to fill a 1100px row is a card that looks like a failed layout. */ .salary-figures.is-rates { grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); } .salary-figures.is-rates .sf-value { font-size: 26px; } /* ---------- 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; } /* * Text controls only. * * `.field input` used to mean every input, and a checkbox is an input. Inside * a .field the tick boxes on the alerts page were therefore stretched to the * full width of their chip with 10px of padding and a 1px border, which pushed * the label text onto a second line and turned a row of pills into a grid of * tall boxes with a stripe floating above each caption. The `label` rule above * did the other half of it: `.field label` (0,1,1) outranks `.chip` (0,1,0), * so every chip lost its `display: inline-flex` as well. * * :not() rather than listing the text types: a type this selector has not * heard of — a future one, or one a browser does not support and renders as * text — should get the text treatment, which is what it will look like. */ .field input:not([type='checkbox']):not([type='radio']):not([type='range']), .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; } /* Put the chip back together, whatever it is nested inside. Specificity high enough to beat `.field label`, stated once here rather than as a scattering of overrides at each call site. */ .field label.chip, label.chip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 0; font-size: 12.5px; font-weight: 500; } .field label.chip input[type='checkbox'] { margin: 0; flex: 0 0 auto; } .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