/** * v3 careerweb — design tokens. * * All other v3 stylesheets consume these vars and never declare their * own. Brand-tinted vars (--brand, --brand-on, --brand-tint*) are * overridden at runtime by js/v3/brand.js once we have the tenant's * hex from the bootstrap; the values here are the safe default. * * Dark-theme rules live in the [data-theme="dark"] block. Toggle by * setting `data-theme="dark"` on ; js/v3/theme.js handles * persistence. */ :root { /* Neutral palette */ --bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F2EFEA; --surface-3: #E8E4DC; --ink: #0E0E0E; --ink-2: #5A554D; --ink-3: #8A847B; --border: rgba(14, 14, 14, 0.08); --border-2: rgba(14, 14, 14, 0.16); /* Brand (runtime-overridden) */ --brand: #C4571B; --brand-on: #FFFFFF; --brand-tint: rgba(196, 87, 27, 0.08); --brand-tint-strong: rgba(196, 87, 27, 0.16); --brand-ring: rgba(196, 87, 27, 0.25); /* States */ --success: #0F6E56; --success-tint: #E1F5EE; /* Elevation */ --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04); --shadow-md: 0 4px 16px rgba(20, 20, 20, 0.06); --shadow-lg: 0 12px 40px rgba(20, 20, 20, 0.10); /* Radius scale */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; /* Glass card (detail hero overlay when banner present) — alpha tuned low so the banner imagery clearly reads through; the backdrop-filter blur on the .detail-hero-content rule carries legibility. */ --glass-bg: rgba(255, 255, 255, 0.52); --glass-border: rgba(255, 255, 255, 0.45); --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); /* Type scale — job-board calibrated. Job boards run denser than editorial sites because lists need scannability (many cards compared at a glance), but detail panels should still read at a comfortable size. The eight rungs below cover every surface the v3 app renders today; per-component CSS should reach for a token first and only declare a literal pixel size when the use case sits outside the scale. */ --fs-display: 28px; /* hero pay amount */ --fs-h1: 22px; /* detail title */ --fs-h2: 18px; /* card title, section heading */ --fs-h3: 16px; /* sub-heading, CTA label */ --fs-body: 15px; /* page body baseline + detail prose */ --fs-meta: 13.5px; /* card meta, sort label, secondary copy */ --fs-eyebrow: 11px; /* uppercase section eyebrows */ --fs-micro: 10px; /* badges, tags, fine print */ --lh-tight: 1.15; /* display / hero amounts */ --lh-snug: 1.3; /* card titles */ --lh-body: 1.55; /* default body prose */ --lh-loose: 1.7; /* detail richtext slab */ /* CLAUDE.md house rule: two weights only. Tokens here keep call sites declarative without re-introducing 500/600/800 drift. */ --fw-regular: 400; --fw-bold: 700; /* Nav-height token. The nav is position: sticky at top: 0; the results-meta below it sticks at top: var(--nav-h) so the two bars stack rather than overlap when the page scrolls. Mobile nav wraps to two rows so responsive.css overrides this. */ --nav-h: 73px; } [data-theme="dark"] { --bg: #0B0B0A; --surface: #171614; --surface-2: #221F1B; --surface-3: #2D2924; --ink: #F5F1EA; --ink-2: #A8A299; --ink-3: #6B665E; --border: rgba(255, 255, 255, 0.07); --border-2: rgba(255, 255, 255, 0.18); --success: #5DCAA5; --success-tint: #0F2620; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --glass-bg: rgba(15, 14, 12, 0.42); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } /* Typography helper classes — applied per element when a different family from the body font is wanted. Body itself stays Geist via base.css; .display = Archivo, .mono = JetBrains Mono. */ .display { font-family: 'Archivo', sans-serif; letter-spacing: -0.02em; } .mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; } /* ─── Low-contrast brand fallback ──────────────────────────────────── When the tenant's brand colour has high luminance (yellow / lime / pale pastels), text and icons coloured with `var(--brand)` become unreadable against the white surface. js/v3/brand.js tags the document with `body.brand-light` in that case; we then swap the text/icon colour to ink so labels stay legible. Brand stays the accent — borders, backgrounds, dots, brand strips still use it. The dark text picks up a faint brand-tinted text-shadow so the brand cue isn't lost entirely. */ body.brand-light .jobcard.active .jobcard-distance, body.brand-light .nav-phone-number, body.brand-light .nav-phone i, body.brand-light .nav-location-label, body.brand-light .filter-chip-active, body.brand-light .apply-by-chat-cta i, body.brand-light .cwv3-cta-chat i, body.brand-light .sort-popover-item.selected .sort-popover-check, body.brand-light .filters-modal .filters-clear, body.brand-light .pac-matched, body.brand-light .empty-detail .brand-accent { color: var(--ink); -webkit-text-stroke: 0; text-shadow: 0 0 0 var(--ink); } /* Sharpen Tabler-font icons on light brands — they're font glyphs, so a 1px text-stroke gives them a crisp dark outline that survives any downstream colour rule. */ body.brand-light .jobcard.active .jobcard-distance i, body.brand-light .nav-phone i { -webkit-text-stroke: 0.6px var(--ink); } /* Keep the active card's brand-tint hero glow on top, but bump the pill's border and add a faint ink ring so it still reads as an active chip against the pale tinted background. */ body.brand-light .jobcard.active .jobcard-distance { background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 1px rgba(14, 14, 14, 0.08); } /* ─── Dark-brand-on-dark-theme companion ──────────────────────────── Symmetric to body.brand-light above. brand.js applies this class only when the tenant brand has low luminance (< 0.20 — navy, oxblood, deep forest) AND the user is in dark theme. In that combination the brand hue dissolves into the near-black surface, so we swap brand-coloured text / icons / thin strokes / bullets over to var(--ink) (which is paper-coloured in dark theme) so they stay visible. Solid brand-backplate surfaces (`background: var(--brand)` with `color: var(--brand-on)`) are NOT patched — they remain the brand cue, and getContrastText() already keeps the foreground readable on them. We also re-paint the tint / ring vars themselves with paper-based alphas — every consumer of `--brand-tint`, `--brand-tint-strong`, and `--brand-ring` (active cards, hover backplates, focus rings) automatically picks up the visible-on-dark fallback without each call site needing its own override. */ body.brand-dark { --brand-tint: rgba(255, 255, 255, 0.06); --brand-tint-strong: rgba(255, 255, 255, 0.12); --brand-ring: rgba(255, 255, 255, 0.40); } /* Tier A — brand-as-text foregrounds. */ body.brand-dark .jobcard.active .jobcard-distance, body.brand-dark .nav-phone-number, body.brand-dark .nav-phone i, body.brand-dark .nav-location-label, body.brand-dark .filter-chip-active, body.brand-dark .apply-by-chat-cta i, body.brand-dark .cwv3-cta-chat i, body.brand-dark .sort-popover-item.selected .sort-popover-check, body.brand-dark .sort-popover-item.selected .sort-popover-label, body.brand-dark .filters-modal .filters-clear, body.brand-dark .pac-matched, body.brand-dark .empty-detail .brand-accent, body.brand-dark .apply-required, body.brand-dark .apply-disclaimer a, body.brand-dark .empty-state-icon--alert i, body.brand-dark .section-richtext a, body.brand-dark .section-richtext ol li::before { color: var(--ink); -webkit-text-stroke: 0; text-shadow: 0 0 0 var(--ink); } /* Icon glyph crispness on the same surfaces (mirror of brand-light). */ body.brand-dark .jobcard.active .jobcard-distance i, body.brand-dark .nav-phone i { -webkit-text-stroke: 0.6px var(--ink); } /* Active-card distance pill — mirror of the brand-light treatment below. The tint hero glow stays (now paper-based via the vars above), but bump the pill chrome so it reads as a deliberate active chip rather than vanishing into the tint. */ body.brand-dark .jobcard.active .jobcard-distance { background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10); } /* Tier B — thin brand-coloured strokes / bars / dots / bullets. Most of these are 1-7px elements where any dark-on-dark hue disappears regardless of luminance. Switch the paint to ink. */ body.brand-dark .detail-hero::before, body.brand-dark .section-title::before, body.brand-dark .section-prose::before, body.brand-dark .section-richtext ul li::before, body.brand-dark .key-detail-list li::before, body.brand-dark .jobcard.active::before { background: var(--ink); } body.brand-dark .section-richtext { box-shadow: inset 3px 0 0 0 var(--ink), var(--shadow-sm); } body.brand-dark .section-richtext p > strong:only-child { border-bottom-color: var(--ink); } body.brand-dark .section-richtext h1::before, body.brand-dark .section-richtext h2::before, body.brand-dark .section-richtext h3::before, body.brand-dark .section-richtext h4::before { background: var(--ink); } /* Search-bar spinner uses brand for the spinning arc — swap to ink so the rotation stays visible during a fetch on dark themes. */ body.brand-dark .nav-search::before { border-top-color: var(--ink); } /* Tier C — selected-state borders. The active card border and the load-more hover border carry the only "this is selected" cue when the brand-tint background drops to paper; without an ink border swap the active card would lose its outline entirely. */ body.brand-dark .jobcard.active { border-color: var(--ink); } body.brand-dark .load-more:hover { border-color: var(--ink); } body.brand-dark .chat-fab { border-color: var(--ink); } body.brand-dark .chat-fab-avatar { box-shadow: 0 0 0 2px var(--ink); } /* Focus borders — keep them visible by swapping the border colour to ink (the ring var is already paper via the block above). :focus-visible only, so mouse interactions stay quiet. */ body.brand-dark .filter-input:focus, body.brand-dark .filter-select:focus, body.brand-dark .apply-input:focus, body.brand-dark .loc-popover-input:focus, body.brand-dark .loc-popover-select:focus, body.brand-dark .combobox-input:focus, body.brand-dark .nav-location:focus-visible, body.brand-dark .nav-phone:focus-visible, body.brand-dark .filters-btn:focus-visible, body.brand-dark .nav-search-filter:focus-visible, body.brand-dark .jobcard:focus-visible, body.brand-dark .loc-popover-close:focus-visible { border-color: var(--ink); outline-color: var(--ink); }