/* ============================================================================= QUEERING ANCs — THEME LAYER (tokens) Capital Stonewall Democrats · civic program brand ----------------------------------------------------------------------------- This is the ONLY file you edit to rebrand. The engine (app.js) and structure (styles.css) never reference a brand directly — they read these tokens. Everything is ADDITIVE: the original token names (--paper, --ink, --accent, --cobalt, --pink, --yellow, --trans-blue, --trans-pink, --line, --shadow-pop, --r, --font-display, --font-ui, …) are preserved with their original values. New roles, scales and primitives are layered on top. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap'); :root{ color-scheme: light; /* --------------------------------------------------------------------------- 1 · TYPEFACES Bricolage Grotesque for display + numerals, Inter for UI/body. No serifs. --------------------------------------------------------------------------- */ --font-display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-num:"Inter",ui-monospace,monospace; /* Weights — referenced by name so the whole system shifts coherently */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:600; /* default display weight */ --fw-display-heavy:700; /* --------------------------------------------------------------------------- 2 · RAW PALETTE (named ink pigments — never used directly for meaning, wired to roles below so any surface can be re-themed in one place) --------------------------------------------------------------------------- */ --paper:#F4F6F8; /* Q752 — cool crisp near-white ground (was warm-cream #F7F5EF, the AI-parchment tell); cobalt-aligned */ --surface:#FFFFFF; /* clean card / panel */ --ink:#121016; /* near-black, faint violet cast */ --ink-2:#2A2730; /* secondary text */ --muted:#56535F; /* tertiary / captions — AA on paper & surface */ --line:#E3E7ED; /* hairline (Broad-daylight reskin — card hairlines + dividers recede; type does the talking) */ --line-strong:#D8DCE2; /* control + secondary-pill borders (Broad-daylight reskin — hover darkens to --muted) */ --cobalt:#2238FF; /* primary brand */ --pink:#FF2E7E; /* secondary brand — queer energy */ --yellow:#FFD23D; /* highlight / spotlight */ --trans-blue:#5BCEFA; /* pride accent */ --trans-pink:#F5A9B8; /* pride accent */ --ok:#1E6B45; /* success ink */ --bad:#A12B22; /* error ink */ --warn:#8A5A07; /* caution ink (AA on paper) */ /* --------------------------------------------------------------------------- 3 · COLOR ROLES (use these in components, not the raw pigments) --------------------------------------------------------------------------- */ /* Surfaces */ --bg:var(--paper); --surface-2:#F8FAFC; /* section wells (Q752 — cool crisp panel, was warm #FFFDF7) */ --surface-sunken:#E9ECF0; /* recessed track / input ghosts (Q752 — cooled) */ --surface-ink:#141019; /* inverted panel for high-contrast moments */ --surface-ink-2:#211C2B; /* raised element on the dark panel */ /* Text */ --text:var(--ink); --text-2:var(--ink-2); --text-muted:var(--muted); --on-accent:#FFFFFF; /* text on cobalt */ --on-accent-lede:#DCE1FF; /* Broad-daylight reskin — lede/eyebrow text on the cobalt deadline band (5.3:1 on --accent) */ --on-secondary:#FFFFFF; /* text on pink — large/bold sizes only */ --on-highlight:var(--ink); /* text on yellow — ink only */ --on-dark:#F4F1EA; /* text on the inverted panel */ --on-dark-muted:#A9A4B4; /* muted text on the inverted panel */ /* Lines & borders */ --hairline:var(--line); --border:var(--line-strong); --border-ink:var(--ink); /* the structural 2px keyline (the "stamp") */ --bw-hair:1px; --bw:1.5px; --bw-ink:2px; --bw-thin:var(--bw-hair); /* Steven 2026-08-04 design-system audit — clarity aliases */ --bw-strong:var(--bw-ink); /* Brand action roles */ --accent:#2238FF; /* = cobalt — primary action / identity */ --accent-soft:#E7EAFF; /* cobalt tint background */ --accent-wash:#F5F7FF; /* Broad-daylight reskin — selected form controls + table answer column; lighter than --accent-soft */ --accent-strong:#1A2BD6; /* pressed / hover-dark cobalt */ --secondary:var(--pink); --secondary-soft:#FFE4EE; --secondary-strong:#C4145A; /* v1.1: was #E01865 (~4.0:1, failed); #C4145A is 5.8:1 on white (Audit #2 M-2) */ /* Steven 2026-08-04 — legacy synonyms consolidated to canonical (they were used with matching hex fallbacks, so zero visual change) */ --brand:var(--accent); --soft-pink:var(--secondary-soft); --highlight:var(--yellow); --highlight-soft:#FFF3C9; --yellow-soft:var(--highlight-soft); /* Q587 — v1.3 `yellowSoft`: the pinned-porch-note fill; semantically distinct from --highlight-soft (streak chips), same tint */ /* Semantic roles (ink + soft background pairs, all AA) */ --ok-soft:#E2F0E8; --ok-strong:#155435; --bad-soft:#F7E5E3; --warn-soft:#FBEFD2; --info:var(--accent); --info-soft:var(--accent-soft); /* Pride spectrum — discrete, designed bands (never a smooth rainbow). The spectrum-rule device and seal ring read these in order. */ --spectrum-1:var(--cobalt); --spectrum-2:var(--trans-blue); --spectrum-3:var(--yellow); --spectrum-4:var(--pink); --spectrum-5:var(--trans-pink); /* --------------------------------------------------------------------------- 4 · TYPE SCALE (clamp() display sizes flow mobile→desktop) Q195 · A11Y FLOOR: no user-facing text renders below --fs-min (12px). The smallest scale step is --fs-eyebrow (12px, uppercase micro-labels). Below that is reserved for fixed-geometry downloadable artifacts (badge/seal/certificate coins) + third-party map chrome only — enforced by scripts/test-type-scale.js. --------------------------------------------------------------------------- */ --fs-min:12px; /* the accessibility floor — smallest legible screen size */ --fs-eyebrow:12px; --lh-eyebrow:1.2; --ls-eyebrow:.16em; --fs-caption:13px; --fs-small:14.5px; --fs-body:16px; --lh-body:1.6; --fs-body-lg:19px; --lh-body-lg:1.5; --fs-lead:18px; --lh-lead:1.55; --fs-15:15px; --lh-15:1.5; /* Steven 2026-08-04 — fills the --fs-small(14.5)→--fs-lead(18) gap (widely used raw) */ --fs-form:16px; /* iOS-zoom-safe input size, one home for form controls */ /* line-height family (was 9+ raw line-heights in portal.css alone) */ --lh-compact:1.2; --lh-tight:1.3; --lh-normal:1.4; --lh-relaxed:1.5; --lh-loose:1.6; --fs-d1:clamp(34px,6.4vw,52px); --lh-d1:1.02; --ls-d1:-.025em; --fs-d2:clamp(27px,4.6vw,38px); --lh-d2:1.05; --ls-d2:-.02em; --fs-d3:clamp(22px,3.4vw,27px); --lh-d3:1.12; --ls-d3:-.015em; --fs-d4:clamp(19px,2.4vw,22px); --lh-d4:1.18; --ls-d4:-.01em; --fs-mega:clamp(56px,11vw,104px); --lh-mega:1.02; --ls-mega:-.025em; /* hero / score (Broad-daylight reskin — big enough when the page is quiet) */ /* --------------------------------------------------------------------------- 5 · SPACING (4px base — use the scale, not magic numbers) --------------------------------------------------------------------------- */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; /* Q220 — the LARGE rhythm steps are fluid: they tighten on a phone but reach (and cap at) their fixed desktop value well before 1024px, so desktop section rhythm is byte-for-byte unchanged. Only the big steps clamp — the small 0–8 steps stay fixed so component-internal spacing is stable. */ --space-9:clamp(28px,6vw,48px); /* caps at 48px ≥ 800px */ --space-10:clamp(36px,7.5vw,64px); /* caps at 64px ≥ 854px */ --space-11:clamp(44px,9vw,88px); /* caps at 88px ≥ 978px */ --space-12:clamp(64px,13vw,128px); /* caps at 128px ≥ 985px */ /* --------------------------------------------------------------------------- 6 · RADII --------------------------------------------------------------------------- */ --r-xs:4px; --r-sm:7px; --r:12px; /* Broad-daylight reskin — inputs, day/time tiles, quiz options */ --r-lg:16px; --r-xl:22px; --r-pill:999px; --r-md:10px; /* Steven 2026-08-04 — fills the --r-sm(7)→--r(12) gap; was already used as a var(--r-md,10px) fallback */ --r-track:6px; /* progress / metric bars */ --r-mark:3px; /* checkbox marks, legend squares */ /* --------------------------------------------------------------------------- 7 · SHADOWS (hard "print stamp" offsets are the brand signature; soft elevation only for floating portal cards) --------------------------------------------------------------------------- */ /* --shadow-pop* — the print-stamp offsets. KEPT for the signed-in app; FORBIDDEN on marketing surfaces (Broad-daylight reskin: marketing elevation is quiet blur only). */ --shadow-pop:4px 6px 0 var(--ink); /* original — keep (app only) */ --shadow-pop-sm:2px 3px 0 var(--ink); --shadow-pop-lg:7px 10px 0 var(--ink); --shadow-pop-accent:4px 6px 0 var(--accent); --shadow-pop-pink:4px 6px 0 var(--secondary); --shadow-soft:0 2px 8px rgba(18,16,22,.06); /* Broad-daylight reskin — resting card elevation, near-invisible */ --shadow-soft-lg:0 12px 32px rgba(18,16,22,.10); /* Broad-daylight reskin — hero search bar, product cards, photo cards */ --shadow-stamp:8px 8px 0 var(--ink); /* Steven 2026-08-04 — award / certificate stamp offset */ --shadow-stamp-sm:5px 5px 0 var(--ink); /* --------------------------------------------------------------------------- 8 · MOTION (paired with prefers-reduced-motion in styles.css) --------------------------------------------------------------------------- */ --dur-fast:.14s; --dur:.35s; --dur-slow:.9s; --dur-skeleton:1.4s; /* SECTION4 §4.6 — the ONE sanctioned new motion token: skeleton shimmer sweep */ --dur-micro:.1s; /* Steven 2026-08-04 — hover micro-feedback */ --dur-quick:.2s; /* toggle / checkbox */ --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); /* --------------------------------------------------------------------------- 9 · FOCUS (visible, consistent keyboard ring across every control) --------------------------------------------------------------------------- */ --focus-color:var(--accent); --focus-ring:3px solid var(--focus-color); --focus-offset:2px; /* --------------------------------------------------------------------------- 9b · CANDIDATE DASHBOARD (theme-able progress portal roles) --------------------------------------------------------------------------- */ --tracker-fill:var(--accent); /* progress fill while gathering */ --tracker-goal:var(--ok); /* fill once challenge-proof (50+) */ --milestone:var(--ink-2); /* milestone stems / ticks */ --levelup:var(--yellow); /* the celebratory level-up pop */ /* --------------------------------------------------------------------------- 10 · LAYOUT (reading column + wider shells for portal/landing) --------------------------------------------------------------------------- */ --maxw:720px; /* original reading column */ --maxw-wide:1040px; /* landing / portal grids */ --maxw-app:1280px; /* Q736 — the TOOL/app frame: wider than the 1040 marketing frame so app pages (voter-tool · canvass · budget · postcards) use the screen instead of inheriting the narrow webpage column */ --maxw-prose:62ch; --gutter:clamp(16px, 5vw, 24px); /* Q108 — ONE responsive page gutter, routed through every shell; shrinks gracefully on a phone */ /* Z-INDEX scale (Steven 2026-08-04 design-system audit — one source of truth; was 60 raw z-index across CSS) */ --z-base:1; --z-dropdown:10; --z-sticky:20; --z-fixed:50; --z-rail:60; --z-offcanvas:70; --z-modal:90; --z-popover:200; --z-tooltip:1000; --z-debug:9000; /* Modal / bottom-sheet tokens (referenced by the shared sheet/modal patterns) */ --modal-width:520px; --modal-rich-width:560px; --modal-scrim:rgba(18,16,22,.40); /* matches the canonical .sheet-scrim */ /* Breakpoints — for reference (CSS can't read vars in @media; mirrored in the media queries throughout styles.css): --bp-sm: 560px (single-column collapse) --bp-md: 760px (portal grid → 1 col, nav stacks) --bp-lg: 1040px (max content width) */ } /* Brand hook kept intact — the engine swaps data-brand, never raw values. */ [data-brand="csd"]{ --accent:#2238FF; --accent-soft:#E7EAFF; --paper:#F4F6F8; /* Q752 — the operative brand ground: cool crisp near-white (was warm-cream #F7F5EF, the AI tell) */ } /* No dark-mode override by design: one light ground on every device. */ /* ============================================================================= 11 · DESIGN SYSTEM v1.1 — pride spectrum + seat-map status tokens The six pride-flag spokes (shared by .spark--pride, the .headshot ring, accents) and the empty-seat map status palette. Civic colors stay config-driven elsewhere. ========================================================================== */ :root{ --pride-1:#E40303; /* red */ --pride-2:#FF8C00; /* orange */ --pride-3:#FFED00; /* yellow */ --pride-4:#008026; /* green */ --pride-5:#004DFF; /* blue */ --pride-6:#750787; /* purple */ /* Status colors from the brand palette only (SEAT_MAP_SPEC refinements) — no green, no gray-purple. Color always pairs with a pattern + a word label + the synced list; color is never the sole signal. */ --seat-empty:#ECEAE3; /* no data — paper tint */ --seat-nocand:#FF2E7E; /* no one ran in 2024 — the opportunity (pink, draws the eye) */ --seat-unopposed:#2238FF; /* one candidate ran (cobalt) */ --seat-contested:#BEB8AE; /* contested — recedes (muted paper-ink) */ --seat-line:#D9D5CC; /* boundaries */ --seat-nocand-soft:#FFE6F0; /* light pink pair for no-candidate pills/legend (QA2) */ /* QA2 (AUDIT §B) — status/border tint tokens (were bespoke hexes drifting across CSS) */ --ok-border:#BFE0CC; --info-border:#C9D0FF; --warn-border:#EBD79A; --bad-border:#E6C4C0; --secondary-border:#FBC4D8; --secondary-hover:#FFD6E6; --accent-tint:#EAF0FF; --neutral-rule:#777; } /* ============================================================================= 12 · DESIGN SYSTEM v1.3 — WAYFINDING + PRODUCT-SUITE ADDITIONS (2026-07-11) Q570 — merged additively from docs/design/incoming/2026-07-11-wayfinding/handoff/theme.css §12. ADDITIVE ONLY — never rename/revalue an original token. Source of record: the Claude Design v1.3 handback. ============================================================================ */ :root{ /* Journey (the guided path — home, spine strip, rails) */ --journey-done:var(--ok); /* completed nodes + walked connectors — SUPERSEDES ink checks */ --journey-current:var(--accent); /* the "you are here" node */ --journey-future-bd:var(--line-strong);/* future node outline on paper */ --journey-lock:#6E6A7C; /* lock notes / future-stage captions — darkened from #8B879B (3.2:1, failed AA at normal text like .jnode.is-future name + .mcard--soon title) to 4.8:1 on paper / 5.2:1 on surface; still recedes for the large locked numerals */ /* Candidate rail (desktop) — campaign pink, bold */ --rail-w:264px; /* Q615 — the app-shell rail column width (portal + admin) */ --rail-bg:var(--pink); /* candidate-facing chrome is PINK */ --rail-bg-deep:#C4145A; /* optional deep variant; white text passes AA at any size */ --rail-text:#FFFFFF; /* on --rail-bg: minimum 14px/700 (WCAG AA large) */ --rail-text-dim:rgba(255,255,255,.72); --rail-label:rgba(255,255,255,.85); /* section eyebrows on the rail */ --rail-plate:#FFFFFF; /* icon plates, brand plate, active row pill (ink text on it) */ /* Team rail (internal) — ink means internal */ --rail-ink:#141019; --rail-ink-text:#F4F1EA; --rail-ink-text-dim:rgba(244,241,234,.55); --rail-ink-hover:rgba(244,241,234,.10);/* subtle hover plate on the ink rail (Q578) */ /* Data-viz — ONE chart language app-wide (budget · admin · canvass CRM) */ --chart-a:var(--accent); /* primary series (in / knocked / starts) */ --chart-b:var(--line-strong); /* comparison series (out / talked / conversions) */ --chart-track:var(--surface-sunken); /* empty bar track */ /* Stat tiles */ --tile-bd:var(--line); --tile-pop-bg:var(--ink); /* one "pop" tile per row, max */ --tile-pop-fg:var(--on-dark); /* Field / map */ --pin-todo:#FFFFFF; /* to knock — white pin, muted ring */ --pin-todo-bd:var(--muted); --pin-done:var(--ok); /* logged — green, SUPERSEDES ink pins */ --pin-next:var(--pink); /* your next door — pulses (reduced-motion: static) */ --turf-a:var(--accent); --turf-b:#C4145A; --turf-c:#8A5A07; /* packet outlines */ /* Postcard */ --postcard-bg:var(--surface-2); --stamp-bd:var(--line-strong); /* dashed, pre-stamp */ --stamp-on:var(--pink); /* stamped fill, white spark on it */ /* Unlock ladder (locked ≠ hidden) */ --locked-bd:var(--line-strong); /* 1.5px dashed card border */ --locked-fg:#6E6A7C; /* darkened from #8B879B (3.5:1) → 4.8:1 on paper / 5.2:1 on surface; the "when it opens" unlock message + locked module title are meaningful text (rule 2 locked≠hidden), must meet AA */ }