/** * 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); } [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); }