/* Ported from the Anders Group design repo: css/tokens.css Scoped to .anders-design and re-indented on the way in; the rules themselves are verbatim. Do not hand-edit — a re-port overwrites this file. Change the design repo and re-run: node tools/port-design.js See JOB-TEMPLATES-PLAN.md. */ /* ========================================================================= ANDERS GROUP — DESIGN TOKENS Single source of truth for colors, spacing, radius, shadow, and type. Custom properties only — no selectors beyond :root. Link this file first, then components.css. BRAND: verified against the official Anders Group Style Guide (05/2025, references/brand-styleguide-0525.pdf). The guide's five core colors are white #FFFFFF, blue #044F81, green #7FFF00, slate #33475B, and mist #F7FDF3 — this supersedes the earlier andersgroup.org-inferred navy (#0F2A43) approximation. Blue is the wayfinding voice; neon is reserved for the single high-intent action (Quick Apply); mist is the one soft brand surface (--canvas). Every color has one job — see docs/DESIGN.md for the locked semantics. Structural tokens (spacing, radius, shadow, font axis, breakpoints) are brand-agnostic and stable. Neutrals are tinted toward the brand blue (never pure #000 / #fff) so the whole surface reads as one temperature. ========================================================================= */ :root { /* ---- Ink & text (blue-tinted neutrals) ---- */ --ink: #011624; /* primary text + headings + pay figures (derived, ~18:1 on white) */ --navy: #033D63; /* brand navy: nav, crown headers, dark surfaces (matches origin/main) */ --navy-2: #044F81; /* navy, lifted — crown gradient stop = official brand blue */ --slate: #33475B; /* secondary text — official guide slate, exact */ --muted: #526374; /* hints, labels — WCAG AA floor on white AND panel; go no lighter */ /* ======================================================================= BRAND PALETTE — single-purpose. One color, one job. Keep these semantic names stable so components never churn if a hue is retuned. ======================================================================= */ /* --accent — BLUE (official #044F81). Wayfinding, links, focus ring, brand chrome. */ --accent: #044F81; --accent-d: #033E65; /* hover / pressed */ --accent-soft: #F0F4F7; /* tint: chips, hovers, soft fills */ --accent-line: #CDDCE6; /* hairline on tinted surfaces */ --cta: linear-gradient(110deg,#033D63,#044F81); /* navy header / banner */ /* --action — NEON (Anders chartreuse #7FFF00, official guide value — exact match, no retuning needed). The ONE high-intent CTA (Quick Apply). Ink text on it — never white (white on neon fails AA). Isolation-dependent default: neon wins only while it stays the most visually isolated element on the page. See docs/DESIGN.md "CTA color". */ --action: #7FFF00; --action-ink: #011624; /* text that sits on neon (AA, ~14:1) */ --action-d: #72E600; /* hover — a touch deeper */ --action-soft: #F7FDF3; /* mist — soft badge fills near neon/status, not a neon tint */ --action-cta: #7FFF00; /* fill for the primary CTA */ --action-shadow: 0 6px 20px rgba(101,204,0,.32); --action-line: #CFE6D2; /* neon-tinted hairline (canvas borders) */ /* --canvas — MIST (official #F7FDF3). The one soft brand surface: hero backgrounds, badge fills, light brand moments. Not a general-purpose neutral — --bg/--panel stay blue-tinted neutrals for UI chrome. */ --canvas: #F7FDF3; /* --emph — EMPHASIS FIGURE (money / headline stat). Dedicated AA green (matches origin/main) so pay stands out from navy wayfinding/neon action, not just an ink echo — ~5.1:1 on white/canvas, passes AA at normal text size. Reserved for the single most-scannable number on a view (weekly pay); always paired with large size + weight + tabular numerals. */ --emph: #1E7A34; --emph-d: #155A28; /* ---- Status — each visibly distinct from the neon action ---- */ --green: #0B7A43; --green-soft: #E1F3E9; /* open / live / above-market / success (deep emerald) */ --amber: #8A5A00; --amber-soft: #FBF1DA; --amber-line: #EAD9B0; /* nudge / fills-fast (text-safe on soft; line bounds the soft fill) */ --coral: #A84400; --coral-soft: #FBEADD; /* saved / favorites */ --star: #F2A900; /* review-rating stars — decorative, not status */ /* ---- Surfaces & lines ---- */ --bg: #FBFCFD; /* page background (cool near-white) */ --card: #FFFFFF; --panel: #F4F7F9; /* recessed panels, filter bars */ --line: #E7EEF3; --line-2: #F1F5F8; --band-soft: linear-gradient(135deg,#F2FAEE 0%,#E4EEF0 100%); /* canvas-tinted to panel-tinted; supporting stat bands (market snapshot) */ --banner-dark: linear-gradient(110deg,#011624,#033D63); --hero-dark: linear-gradient(135deg,#011624 0%,#033D63 55%,#044F81 100%); /* text on navy surfaces (footer, crown, dark banners) — all pass AA on navy */ --on-navy-hi: #F7F9F9; /* max-contrast (crown headings, link hover) — blue-tinted, never pure #fff */ --on-navy: #E6EAEC; /* primary text / links on navy */ --on-navy-dim: #95A5AF; /* muted text on navy */ /* on-dark-* / line-on-dark / scrim: same "text on navy" job as the --on-navy-* trio above under origin/main's naming — kept as-is (not merged into one family) since templates/job-page.html references these names directly; a follow-up should consolidate to a single set. */ --on-dark: #ffffff; /* headings / strong text on navy */ --on-dark-2: #D6E4EE; /* body text and links on navy */ --on-dark-3: #8FB0C6; /* labels / legal on navy (AA at 4.7:1 on --navy) */ --line-on-dark: rgba(255,255,255,.16); /* hairlines on navy surfaces */ --scrim: rgba(3,29,47,.55); /* modal / sheet backdrop */ /* ---- Elevation (blue-tinted) ---- */ --shadow: 0 1px 2px rgba(1,22,36,.05),0 6px 18px rgba(1,22,36,.06); /* resting */ --shadow-md: 0 6px 22px rgba(1,22,36,.10); /* raised */ --shadow-lg: 0 18px 48px rgba(1,22,36,.16); /* overlay */ /* ---- Sticky chrome ---- Full height of the sticky site header (.nav): the 62px row plus its 1px bottom border. Anything that sticks *under* the header — a jump nav, a filter bar — must offset by this, and section anchors must clear it. Never retype the number: page-local copies silently drift the moment the header changes, and the symptom is a gap or an overlap nobody attributes to the header. */ --h-header: 63px; /* ---- Z-index scale — semantic, never arbitrary ---- Every layer the chrome can stack has a name here. A raw 999 in a page style is a bug report: it wins today and loses the day a real overlay lands above it. Order is the contract, the numbers are just spacing. */ --z-sticky: 40; /* sticky site header, sticky rails */ --z-dropdown: 45; /* menus/panels anchored to sticky chrome */ --z-scrim: 60; /* modal + off-canvas backdrop */ --z-sheet: 61; /* the sheet itself: drawer, modal surface */ --z-toast: 70; /* transient messages, above everything but tooltips */ /* ---- Radius ---- */ --r-sm: 9px; /* compact inputs */ --r-btn: 11px; /* full-width form CTAs */ --r-field: 12px; /* filter anchors, inputs */ --r: 14px; /* cards, banners */ --r-lg: 18px; /* modals, sheets */ --r-pill: 999px; /* pills, chips, card buttons */ /* ---- Spacing scale (4px base) ---- */ --s-1: 4px; /* base unit, icon gaps */ --s-2: 8px; /* gaps between related items */ --s-3: 12px; /* padding / margins */ --s-4: 16px; /* card padding */ --s-card: 18px; /* card body padding */ --s-6: 24px; /* content-card padding */ --s-8: 32px; /* block rhythm, column gaps */ --s-section: 48px; /* section padding */ --s-hero: 60px; /* hero padding */ /* ---- The one font axis: system-ui everywhere, 700 max weight ---- */ --sans: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif; --tnum: "tnum" 1, "lnum" 1; /* tabular + lining numerals for figures */ /* ---- Long-form reading scale ------------------------------------------- A SECOND scale, for article bodies only. The UI scale (15.5px body) is tuned for scanning and comparing; sustained reading wants a larger step, so blog and editorial surfaces use these instead. Do not mix the two inside one block — pick the scale that matches the job. Size and leading are declared as PAIRS. They are not independent: leading is a ratio of the size it was tuned for, and large display text needs proportionally less of it than wrapping body copy. Splitting them is how a 26px heading inherits a body ratio and opens to 46px leading. */ --t-body: 18px; --lh-body: 1.78; /* running article text */ --t-summary: 17px; --lh-summary: 1.75; /* key-takeaways / standfirst */ --t-h3: 20px; --lh-h3: 1.35; /* subhead; must clear --t-body */ --t-h2: 26px; --lh-h2: 1.25; /* section head, 768px and up */ --t-h2-sm: 23px; /* below 768px, where h1 steps too */ --t-quote: 23px; --lh-quote: 1.4; /* pull-quote */ /* Reading measure. Cap the COLUMN, never the individual blocks: capping paragraphs but not lists leaves each element on a different right edge. 730px is ~75ch at --t-body in Segoe UI. */ --measure-article: 730px; } /* ========================================================================= BREAKPOINTS — documented convention, not tokens. CSS custom properties cannot be used inside @media (...) conditions, so these live here as the canonical reference. Mobile-first: base styles target the 375px design baseline; widen with min-width queries. 640px large phone / small tablet 768px tablet 1024px desktop No horizontal scroll at any width >= 320px. ========================================================================= */