/* The Visual Identity's three faces, self-hosted (the CSP serves fonts from 'self'): Familjen Grotesk for display lines, Public Sans for text and UI, IBM Plex Mono for numbers and labels. All are Fontsource's latin subsets, SIL OFL 1.1 (the licenses sit beside the files in /fonts). Plex Mono has no variable cut, so its three weights are three files. A glyph outside the range falls through to the system stack in each --font-*. */ @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/public-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Public Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/public-sans-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: dark; /* The brand: NoTip Visual Identity & Design System v1.0 (August 2026), by its printed hex numbers. Three colors carry the identity: Ledger Teal (buttons, links, price confirmations), Ink (text and dark surfaces) and Flare Coral (Noah and delight moments only; never prices, never text on its own: white on it is 2.8:1, so it carries Ink at 5.9:1). The rest are the guide's extended neutrals. Nothing else on the site is a brand color. */ --brand-teal: #0e6f66; --brand-ink: #14201e; --brand-coral: #ff6b4a; --brand-paper: #faf9f5; --brand-mist: #e4e1da; --brand-slate: #6b726f; --brand-teal-tint: #e4f0ee; --brand-coral-tint: #ffe9e1; --brand-white: #ffffff; --font-text: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Familjen Grotesk", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* The night canvas is Ink; cards, wells and hairlines are the same green- black lifted in steps, so nothing reads as a neutral grey laid on it. Ratios are against --ink and --card. */ --ink: var(--brand-ink); --paper: var(--brand-white); --muted: #b3bdb9; /* 8.7:1 on ink, 7.7:1 on card */ --faint: #93a09b; /* 6.2:1 on ink, 5.5:1 on card — .cta-label's size needs 4.5 */ --line: #3a4945; --line-soft: #24332f; --card: #1c2a27; --well: var(--brand-ink); /* Teal is the accent for CTAs, progress and success. Its fills carry white text (--on-accent, 6.0:1); Ink on teal is 2.8:1, so nothing dark ever sits on it. As text on the night canvas teal is 2.8:1 too, so text takes --accent-text, a lighter teal the guide doesn't print (7.1:1 on ink, 6.3:1 on card). Sky blue is informational only — it is the smile on Noah's screen, not a brand color. */ --accent: var(--brand-teal); --accent-soft: #0b5c55; /* hover and pressed fills; white text 7.9:1 */ --on-accent: var(--brand-white); --accent-glow: #3dbbaa; --accent-text: var(--accent-glow); --info: #4da3ff; --error: #ff8a80; --r-control: 10px; --r-card: 16px; /* The site header's bar (base.css): the same 56px as /order's top bar (--order-top-h in app-tokens.css), so the two read as one product. */ --site-header-h: 3.5rem; /* Expansion map basemap only — Ink land a step off the card and teal-dark water, so the map reads as an inset rather than a flat continuation. */ --map-land: #172422; --map-water: #173532; /* Paper surfaces — light cards on the night canvas, in white. Cards and input fields are the same white; fields stand out by their outlines (--ink-faint). */ --paper-bright: var(--brand-white); /* input fields; badge/chip hover lift */ --paper-well: #f1efea; /* recessed fills on paper (quote, tiles, idle chips) */ --paper-line: #878d89; /* 3.4:1 — control outlines on paper (ghost, pills, step dots) */ --paper-line-soft: var(--brand-mist); /* hairline dividers on paper; popover edge */ /* Ink text tiers on paper ("text on paper is ink") */ --ink-muted: #555e5b; /* 6.7:1 on paper — ledes, descriptions, counts */ --ink-faint: #5f6764; /* 5.8:1 on paper, 5.1:1 on the well — eyebrows, micro, honor; input borders */ /* Accents as text on paper. Teal reads on white as it is; blue and error red are brewed darker (2.4 and 2.1:1 as fills). */ --accent-ink: var(--brand-teal); /* 6.0:1 on paper, 5.2:1 on the well and the wash — teal as text */ --info-ink: #1a66c9; /* 5.0:1 — blue as text on paper */ --error-ink: #c62828; /* 5.1:1 — error text + invalid borders on paper */ --error-ink-hover: #a81f1f; /* pressed/hover shade for destructive buttons */ --accent-wash: var(--brand-teal-tint); /* the teal tint: banners, pressed chips */ --focus-ring: var(--paper); /* paper scope reassigns this to var(--ink) */ --shadow-pop: 0 12px 32px -8px rgba(20, 32, 30, 0.45); /* floating layers only */ /* Numbers and labels in IBM Plex Mono (the guide's data face; PRD-39 §2.11's tally, the map's readout, the section eyebrows), with the system monospace stack behind it. */ --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* ── The campaign scope (PRD-39 §2.11) ─────────────────────────────────── Worn by `/`, `/vote` and `/support` (a `.campaign` class on ``). It once shifted the palette half-way to PRD-39's artifact; on the Visual Identity it keeps the site's Ink and teal and adds only its own roles: the glow, the grid and the page ground and text that `.theme-auto` reassigns below. */ .campaign { /* Campaign sections only: the glow on the hero's and the card's primary buttons, and the grid behind the hero and the video frame. */ --glow: 0 0 0 1px rgba(61, 187, 170, 0.45), 0 0 24px rgba(61, 187, 170, 0.18); --grid: repeating-linear-gradient(0deg, rgba(61, 187, 170, 0.07) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(61, 187, 170, 0.07) 0 1px, transparent 1px 48px); /* ── Page roles (PRD-59 §2.13, Rolling R2) ────────────────────────── --ink and --paper can't simply swap: --ink is the page background in dark mode and --paper is both the body text and the vote card's background. So the page ground and the page text get their own roles, as does the accent as text. Dark values first; the light block below reassigns them by role, only where the page opts in with `.theme-auto`. Fills keep Ledger Teal in both modes. */ --page: var(--brand-ink); /* the page ground in dark mode */ --page-ink: #ffffff; /* the page text in dark mode */ --bg-alt: #1a2825; /* the alt band in dark mode */ } /* ── The campaign in light mode (Rolling R2, PRD-59 §2.13) ─────────────── Opt-in per page: only a `.campaign` body that also wears `.theme-auto` follows the device. The homepage opts in; /support opts in with PR B and /vote with PR C when each is ready — until then both render exactly as on main in either mode. The light values reuse /order's (app-tokens.css): Paper ground, Ink text, muted #555e5b, Mist hairlines, wells #f1efea. :root stays dark, so every page without both classes is unchanged. Three pieces stay dark on purpose (PRD-59 decision 8) and never read these roles: the order bar, the hero's route map and the technology band, on their own --screen-* tokens in home.css. So does /vote's map (its night style). */ @media (prefers-color-scheme: light) { .campaign.theme-auto { color-scheme: light; --page: var(--brand-paper); --page-ink: var(--brand-ink); --bg-alt: #f1efea; --accent-text: var(--accent-ink); /* 5.7:1 on Paper */ --muted: #555e5b; /* 6.3:1 on Paper */ --faint: #555e5b; /* 6.3:1 on Paper */ --line: var(--brand-mist); --line-soft: #eeece7; --card: #ffffff; /* cards read by their border + shadow on Paper */ --well: #f1efea; /* The teal glow drops on Paper, and the hero grid takes an Ink tint. */ --glow: none; --grid: repeating-linear-gradient(0deg, rgba(20, 32, 30, 0.045) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(20, 32, 30, 0.045) 0 1px, transparent 1px 48px); --focus-ring: var(--ink); } }