/* ===================================================================== The People's Poll — palette A "Election Night" + People's Poll GOLD (approved by Catherine, Oct 3 2026: palette A at 5:09 PM, gold at 5:12 PM) Source: brand/nyt-redesign/palettes.py key 'a' and CONTRACT.md "Brand". - Canvas pure white. Ink #121212 for buttons, the brand and the wordmark. - The polls = gray #8C8C8C (text #666666). - People's Poll = GOLD #D4A017 with a thin ink outline on bars, chips and dots (gold alone is 2.4:1 on white; the outline carries the contrast). Gold TEXT = #866208 (5.6:1). Gold is used ONLY for the People's Poll. - Red/blue appear ONLY on party and candidate data. Red TEXT uses #D73D31. Font: Figtree (SIL OFL 1.1), self-hosted (CSP allows fonts from 'self' only). Type scale: NYT dashboard scale (CONTRACT.md "Brand"). Nothing under 11px. ===================================================================== */ @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { color-scheme: light; /* Canvas + chrome */ --pp-bg: #FFFFFF; --pp-surface: #FFFFFF; --pp-ink: #121212; --pp-ink-2: #5E5E5E; --pp-line: #DCDCDC; /* rules */ --pp-grid: #ECECEC; /* chart gridlines, empty bar tracks */ --pp-accent: #121212; /* buttons are ink */ --pp-accent-ink: #FFFFFF; /* text on ink buttons */ --pp-link: #121212; --pp-mast: #121212; /* masthead rule */ --pp-hover: #333333; /* ink button hover */ --pp-sunk: #F4F4F4; /* hover wash, code blocks */ --pp-tip-bg: rgba(18, 18, 18, .96); --pp-tip-ink: #FFFFFF; --pp-tip-dim: #C9C9C9; --pp-scrim: rgba(18, 18, 18, .5); --pp-swatch-edge: rgba(0, 0, 0, .12); /* The two results */ --pp-pollsters: #8C8C8C; /* The polls: bars, lines */ --pp-pollsters-text: #666666; /* The polls as text */ --pp-people: #D4A017; /* People's Poll gold: bars, chips, dots (always with --pp-people-outline) */ --pp-people-text: #866208; /* People's Poll as text */ --pp-people-outline: #121212; /* thin ink outline on every gold mark */ --pp-you: #121212; /* retired: no You/Me result anywhere; kept so older references resolve to ink */ /* Party and candidate data ONLY */ --pp-d: #1F6BBF; --pp-d-light: #A2C2E7; --pp-d-text: #1F6BBF; --pp-r: #E0453A; --pp-r-light: #F3A69C; --pp-r-text: #D73D31; --pp-i: #F2CE1B; /* independent candidates: lemon yellow, kept clear of People's Poll gold #D4A017 */ --pp-i-light: #F8E88F; --pp-i-text: #7A6300; --pp-close: #9A9A9A; /* within 2 points */ --pp-none: #EEEEEE; /* no race / no published polls */ /* Semantic (ink only: no red/green outside party data) */ --pp-good: #121212; --pp-warn: #121212; /* Shape */ --pp-radius: 4px; --pp-radius-pill: 4px; --pp-shadow: none; --pp-outline: 1px solid var(--pp-line); /* Type */ --pp-font-display: 'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif; --pp-font-body: 'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif; --pp-font-mono: 'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif; /* codes use tabular Figtree */ /* NYT dashboard scale (size / line-height, px). Desktop values; phone overrides below. */ --t-page: 28px; --lh-page: 34px; /* page headline, bold */ --t-module: 20px; --lh-module: 25px; /* module or chart headline, bold */ --t-dek: 15px; --lh-dek: 20px; /* dek, regular, ink-2 */ --t-kicker: 12px; --lh-kicker: 16px; /* kicker, semibold caps +0.04em */ --t-body: 15px; --lh-body: 20px; /* body and tables */ --t-small: 13px; --lh-small: 18px; /* secondary */ --t-source: 12px; --lh-source: 16px; /* source line, gray */ --t-answer: 17px; --lh-answer: 22px; /* answer buttons, semibold, min height 48 */ --t-big: 20px; --lh-big: 25px; /* big result numbers, tabular */ --t-floor: 11px; /* nothing smaller */ --measure: 640px; } @media (max-width: 599px) { :root { --t-page: 22px; --lh-page: 28px; --t-module: 17px; --lh-module: 22px; } } /* ===================================================================== Dark mode (Catherine, Oct 4 2026): neutral near-black, follows the device setting by default; the header switch stores an explicit choice in localStorage (data-theme="dark" | "light" on , set by /theme.js). Contrast-checked: ink 16.7:1, ink-2 8.2:1, gold 7.9:1, D text 8.1:1, R text 7.1:1. Link previews and share cards stay light (they are seen inside other apps). ===================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --pp-bg: #121212; --pp-surface: #1C1C1C; --pp-ink: #F2F2F2; --pp-ink-2: #ABABAB; --pp-line: #333333; --pp-grid: #262626; --pp-accent: #F2F2F2; /* buttons are light on dark */ --pp-accent-ink: #121212; --pp-link: #F2F2F2; --pp-mast: #F2F2F2; --pp-hover: #D0D0D0; --pp-sunk: #242424; --pp-tip-bg: rgba(242, 242, 242, .97); --pp-tip-ink: #121212; --pp-tip-dim: #4A4A4A; --pp-scrim: rgba(0, 0, 0, .65); --pp-swatch-edge: rgba(255, 255, 255, .18); --pp-dot-op: .42; /* single-poll dots need more weight on black */ --pp-pollsters: #9A9A9A; --pp-pollsters-text: #B3B3B3; --pp-people: #D4A017; /* same gold; 7.9:1 on the dark canvas */ --pp-people-text: #E3B53C; --pp-people-outline: #121212; /* outline stays dark: the gold itself carries the contrast */ --pp-you: #F2F2F2; --pp-d: #4A8FE0; --pp-d-light: #2C4D72; --pp-d-text: #79ADEE; --pp-r: #E8564B; --pp-r-light: #7A3730; --pp-r-text: #F27D73; --pp-i: #F2D33A; --pp-i-light: #6E5F14; --pp-i-text: #F5DC5C; --pp-close: #6B6B6B; --pp-none: #2A2A2A; --pp-good: #F2F2F2; --pp-warn: #F2F2F2; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --pp-bg: #121212; --pp-surface: #1C1C1C; --pp-ink: #F2F2F2; --pp-ink-2: #ABABAB; --pp-line: #333333; --pp-grid: #262626; --pp-accent: #F2F2F2; /* buttons are light on dark */ --pp-accent-ink: #121212; --pp-link: #F2F2F2; --pp-mast: #F2F2F2; --pp-hover: #D0D0D0; --pp-sunk: #242424; --pp-tip-bg: rgba(242, 242, 242, .97); --pp-tip-ink: #121212; --pp-tip-dim: #4A4A4A; --pp-scrim: rgba(0, 0, 0, .65); --pp-swatch-edge: rgba(255, 255, 255, .18); --pp-dot-op: .42; /* single-poll dots need more weight on black */ --pp-pollsters: #9A9A9A; --pp-pollsters-text: #B3B3B3; --pp-people: #D4A017; /* same gold; 7.9:1 on the dark canvas */ --pp-people-text: #E3B53C; --pp-people-outline: #121212; /* outline stays dark: the gold itself carries the contrast */ --pp-you: #F2F2F2; --pp-d: #4A8FE0; --pp-d-light: #2C4D72; --pp-d-text: #79ADEE; --pp-r: #E8564B; --pp-r-light: #7A3730; --pp-r-text: #F27D73; --pp-i: #F2D33A; --pp-i-light: #6E5F14; --pp-i-text: #F5DC5C; --pp-close: #6B6B6B; --pp-none: #2A2A2A; --pp-good: #F2F2F2; --pp-warn: #F2F2F2; } }