/* ========================================================================== ballot — marketing site Design tokens and values come from design_handoff_ballot_site/README.md. Desktop composition holds down to 760px; below that the mobile stack (390px comp) takes over. There is exactly one breakpoint. ========================================================================== */ :root { /* Color — see the token table in the handoff README */ --navy-900: #0d1b27; --navy-800: #1a2d3d; --navy-600: #2d4a5a; /* Contrast-corrected from the comps. Each keeps its hue and saturation and moves lightness only, so the palette still reads the same: blue-600 #2878b5 -> #2671ab (4.25:1 -> 4.68:1 as text on gray-100; also lifts white-on-accent 4.72 -> 5.21) slate-400 #8099a8 -> #576f7f (2.68:1 -> 4.68:1 on gray-100, 5.21 on white) slate-600 #6d8291 -> #91a0ac (3.53:1 -> 5.09:1 on navy-800) */ --blue-600: #2671ab; --blue-300: #7fb0d8; --blue-200: #9ec3e0; --blue-50: #e6f0f8; --slate-600: #91a0ac; --slate-500: #4a6070; --slate-400: #576f7f; --slate-300: #a9bccb; --gray-100: #f1f3f5; --gray-50: #f6f8fa; --border-light: #eef1f4; --border-mid: #d3dae0; --white: #ffffff; /* Role tokens. Light values alias the hue tokens above, so nothing changes on pages that don't opt in. Only these are swapped for dark mode, which is why the swap is a value change and not a second stylesheet. */ --bg: #ffffff; /* white */ --text: #0d1b27; /* navy-900 */ --text-body: #4a6070; /* slate-500 */ --text-muted: #576f7f; /* slate-400 */ --link: #2671ab; /* blue-600 */ --rule: #eef1f4; /* border-light*/ --rule-strong: #d3dae0; /* border-mid */ --surface-subtle: #f1f3f5; /* gray-100 */ --font: -apple-system, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif; /* Content column. The comps are fixed 1180px; production centers at 1180 and lets the column shrink between 1180 and 760. */ --max-w: 1180px; } /* Dark mode — opt-in per page via `.theme-auto` on . Support only, deliberately. The landing page is a composition of alternating light and navy bands; on a dark canvas navy stops reading as emphasis and the rhythm flattens, so inverting it needs a comp, not a token swap. Support has no such alternation, so it inverts cleanly. Values are the ones already proven on the legal pages, which take them from the iOS app's own dark palette (Theme.swift) rather than inventing a second dark identity for the same brand. */ @media (prefers-color-scheme: dark) { .theme-auto { --bg: #0a131c; /* Theme.Colors.background */ --text: #f0f4f7; --text-body: #b8c7d2; --text-muted: #8099a8; --link: #57adef; /* blue-600 brightened for a dark canvas */ --rule: #253545; --rule-strong: #31404b; --surface-subtle: #111d28; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; } /* The logo mark ships in two inks and