/* ───────────────────────────────────────────────────────────────────────── CapTracker shared theme tokens + light/dark toggle. Single source of truth for the palette across every page (index, letter, representatives, privacy, cta_confirm). Each page links this file and the companion theme.js, then references the tokens below instead of carrying its own hardcoded colors. Two themes: - DARK (default) — softened warm charcoal, cream "newsprint" text. - LIGHT — newsprint cream background, ink-dark text. The active theme is selected by `data-theme="light"|"dark"` on , applied synchronously in (see the inline no-flash script each page carries) so the first paint is already correct. The standalone share card (card.html) deliberately does NOT use these tokens — it is pinned to a single fixed palette so the rendered PNG stays deterministic regardless of any visitor's toggle preference. ──────────────────────────────────────────────────────────────────────── */ :root{ /* Brand accents — shared by both themes. Red softened a touch from the old #d32f1c so it reads less aggressive on the warmer charcoal. */ --red:#d4392a; --amber:#e8a72e; --green:#2da44e; /* ---- 16-bit retro skin tokens (owner-approved 2026-07-06) ---- SNES-palette accents + chunky-border chrome, themed per light/dark below so both themes keep working. Decorative only: --gold/--px-* never carry meaning on their own (red still means "late", stated in copy). The pixel display font is for TITLES/ACCENTS ONLY — body and data stay IBM Plex Mono (Press Start 2P is unreadable at body sizes). */ --pixel-font:"Press Start 2P","IBM Plex Mono",monospace; /* ---- DARK THEME (default) ---- */ /* 16bit-v1: tighter 3px CRT scanlines (kept faint — legibility first). */ --page-bg: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px), radial-gradient(120% 140% at 85% -10%, #232227 0%, #181719 60%); --gold:#f8b800; /* SNES gold — decorative accent */ --px-edge:#3a3944; /* chunky pixel-frame edge */ --px-dark:#0f0e11; /* pixel-frame outline */ --px-shadow:rgba(0,0,0,.45); /* hard stepped drop shadow */ --bg:#181719; /* solid page base (gradient endpoint) */ --bg-elev:#1e1d21; /* solid raised surface (modals, filter shell) */ --fg:#ece7db; /* primary text (cream) */ --fg-dim:#c9c2b2; /* secondary text */ --fg-muted:#a09a8d; /* muted labels / meta */ --fg-faint:#8a8478; /* faint footnotes / units */ --line:rgba(236,231,219,.14); --line-strong:#3a3a40; /* solid hairline on buttons / inputs */ --surface:rgba(236,231,219,.03); --surface-2:rgba(236,231,219,.05); --surface-3:rgba(236,231,219,.02); --input-bg:#141417; --on-red:#16140f; /* text on a red fill (kept dark in both themes) */ --scrim:rgba(12,12,14,.82); /* Status text — must invert for legibility on each theme's surface. */ --violation-text:#f2b3aa; --compliant-text:#a8d8a8; /* The "physical letter" sheet is always a cream page with dark ink, in either theme — it represents real paper, so it does not invert. */ --letter-paper:#f1ece1; --letter-ink:#1a1a1d; /* ---- Legacy aliases ---- Existing templates reference these names heavily; map them onto the semantic roles above so both themes flow through without touching every rule. NB: `--ink` here means "the page's deep base color"; the letter sheet uses --letter-ink instead, and privacy uses --fg for body text. */ --paper:var(--fg); --paper-dim:var(--fg-dim); --ink:var(--bg); --shade:var(--surface-2); } :root[data-theme="light"]{ --page-bg: repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.018) 3px 4px), radial-gradient(120% 140% at 85% -10%, #f5f0e4 0%, #e9e3d4 60%); --gold:#a87e00; /* SNES gold, darkened for light-surface contrast */ --px-edge:#a99f88; --px-dark:#57523f; --px-shadow:rgba(27,26,23,.22); --bg:#ece6da; --bg-elev:#fffdf6; --fg:#1b1a17; --fg-dim:#45433c; --fg-muted:#6b6558; --fg-faint:#837d70; --line:rgba(27,26,23,.16); --line-strong:#cec7b6; --surface:rgba(27,26,23,.03); --surface-2:rgba(27,26,23,.055); --surface-3:rgba(27,26,23,.02); --input-bg:#fffdf6; --on-red:#fff; --scrim:rgba(27,26,23,.55); --violation-text:#a32417; --compliant-text:#2f6b34; } /* Base page surface — pages keep their own font-family / padding, this just supplies the themed background + text color in one shared place. */ html,body{background:var(--page-bg);color:var(--fg);} /* ---- Theme toggle control ---- */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;flex-shrink:0; border-radius:999px;cursor:pointer; background:var(--surface-2);border:1px solid var(--line); color:var(--fg-dim);font-size:15px;line-height:1;padding:0; font-family:inherit; transition:border-color .15s ease,color .15s ease,background .15s ease; } .theme-toggle:hover{border-color:var(--red);color:var(--red);} .theme-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px;} .theme-toggle .tt-icon{display:block;} .theme-toggle .tt-sun{display:none;} .theme-toggle .tt-moon{display:block;} :root[data-theme="light"] .theme-toggle .tt-sun{display:block;} :root[data-theme="light"] .theme-toggle .tt-moon{display:none;} /* ---- Member-specific sticky action bar (UI variant B) ---- One bar per page, #savt-stickybar. Markup contract:
…fact-only copy… Send the letter · $2
Behavior lives in theme.js (scroll-triggered reveal, ✕ remembered in localStorage under "savt-stickybar-dismissed"). Copy rules: facts from the member's leaderboard row only — see EDITORIAL_POLICY.md. Used ONLY on the /cards/{id} page; deliberately NOT on the homepage (no single member context there) and NOT on the letter page (its send panel is already the one persistent action — two persistent CTAs would compete). */ .savt-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:150; background:var(--bg-elev);border-top:2px solid var(--red); box-shadow:0 -12px 32px -14px rgba(0,0,0,.5); transform:translateY(110%);transition:transform .25s ease; font-family:"IBM Plex Mono",monospace;} .savt-stickybar.show{transform:translateY(0);} @media (prefers-reduced-motion: reduce){.savt-stickybar{transition:none;}} .savt-stickybar .sb-inner{max-width:1280px;margin:0 auto; display:flex;align-items:center;gap:16px;padding:12px 20px;} .savt-stickybar .sb-facts{flex:1;min-width:0; font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--fg);font-weight:600;line-height:1.5;} .savt-stickybar .sb-facts b{color:var(--red);font-weight:700;} .savt-stickybar .sb-action{flex-shrink:0;display:inline-block; background:var(--red);color:var(--on-red);border:1px solid var(--red); font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;text-decoration:none; padding:12px 22px;border-radius:4px;cursor:pointer;text-align:center; transition:background .12s ease,color .12s ease;} .savt-stickybar .sb-action:hover{background:var(--bg);color:var(--red);} .savt-stickybar .sb-action:focus-visible{outline:2px solid var(--fg);outline-offset:2px;} .savt-stickybar .sb-dismiss{flex-shrink:0;background:none; border:1px solid var(--line);border-radius:3px;color:var(--fg-muted); width:32px;height:32px;font-size:14px;line-height:1;cursor:pointer; font-family:inherit;padding:0;} .savt-stickybar .sb-dismiss:hover{color:var(--red);border-color:var(--red);} /* Reserve room so the bar never covers the page's own footer content. */ body.savt-stickybar-open{padding-bottom:96px !important;} @media (max-width:640px){ .savt-stickybar .sb-inner{flex-wrap:wrap;row-gap:10px;padding:10px 14px;} .savt-stickybar .sb-facts{flex:1 1 calc(100% - 48px);font-size:11px;} .savt-stickybar .sb-dismiss{order:2;} .savt-stickybar .sb-action{order:3;flex:1 1 100%;padding:14px 16px;} body.savt-stickybar-open{padding-bottom:150px !important;} }