/* ============================================================================= * Deal & Drive showroom — design tokens * Contract: docs/showroom/DESIGN.md (« La Vitrine, after hours »). * * INTEGRAL MONOCHROME. The ink IS the accent. There is no accent hue anywhere, * and gold/champagne is FORBIDDEN (taken by a competitor). Hierarchy is carried * by value, weight and width — never by a hue. The car photography is the only * colour on the page. * * Theme resolution (must win in BOTH directions): * 1. :root → light values * 2. @media (prefers-color-scheme: dark) → dark, UNLESS data-theme="light" * 3. :root[data-theme="dark"] → dark, whatever the OS says * 4. html[data-page-theme="dark"] → dark, whatever ANYONE says (the home's convention) * ========================================================================== */ @font-face { font-family: "Archivo Variable"; font-style: normal; font-display: swap; /* Full-axis variable font: weight 100–900 × width 62–125. */ font-weight: 100 900; font-stretch: 62% 125%; src: url("/static/fonts/archivo-latin-variable.woff2") format("woff2-variations"); 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- Palette (fixed values, theme-independent) ---------------------- */ --dd-white: #ffffff; --dd-ink: #211f1c; --dd-ink-lift: #423d38; /* filled-CTA hover, light */ --dd-lacquer: #131110; --dd-ivory: #f2efea; --dd-ivory-lift: #dcd6cd; /* filled-CTA hover, dark */ --dd-smoke: #6e6a63; /* secondary text, both themes */ /* ---- Semantic tokens — LIGHT ---------------------------------------- */ --page: var(--dd-white); --ink: var(--dd-ink); --ink-lift: var(--dd-ink-lift); --muted: var(--dd-smoke); --hairline: rgb(33 31 28 / 14%); --hairline-strong: rgb(33 31 28 / 28%); --surface: #fafaf9; /* barely-there panel, still monochrome */ --overlay: rgb(255 255 255 / 72%); /* scrolled header backdrop */ --focus-ring: var(--dd-ink); /* ---- The concierge's marker ------------------------------------------ The ONE pigment on this site, and NOT an accent: the architecture stays integrally monochrome. This is a mark LAID ON the page — the stroke the concierge draws over the fact it is answering with — in the same way the photography is the only other colour here: an object on a neutral ground, never part of the chrome. It appears in no border, no state, no icon, no hover; only where the concierge points, and it leaves with the reset. It is a physical object, so it is calibrated per theme like one: full strength on white paper, tempered (and faintly blooming) in the dark room, where an untempered fluorescent would be a flashbulb. Its own ink stays the dark ink in BOTH themes — a highlighter is translucent, the text underneath shows through. Contrast holds the house discipline: 14.5:1 light, 10.3:1 dark. */ --mark: #f3fa3a; --mark: oklch(0.95 0.196 112); /* acid yellow-green — deliberately foreign to the palette */ --mark-ink: var(--dd-ink); --mark-ink-soft: rgb(33 31 28 / 72%); /* labels under the stroke — still ≥ 4.5:1 */ --mark-bloom: rgb(0 0 0 / 0%); /* paper does not glow */ /* ---- Recording (Lot 5) ------------------------------------------------ The concierge's dictation state — the SAME functional red the wizard uses for its gate errors (DESIGN.md, PO-sanctioned pair): one hue for "live / needs you", not a new pigment. Deep on paper, tempered in the dark room. */ --concierge-recording: #8e1f22; /* ---- Type ------------------------------------------------------------ */ --font-sans: "Archivo Variable", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tracking-label: 0.18em; --tracking-display: -0.02em; /* ---- Space & measure -------------------------------------------------- */ --container: 1280px; --gutter: 24px; --header-h: 72px; --radius: 2px; /* the gallery is square-edged, not rounded */ /* ---- Motion (DESIGN.md §7: hovers ≤ 600 ms, ease-out) ---------------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 600ms; --hero-settle: 2400ms; color-scheme: light; } /* A phone spends the header allowance on content: the fixed bar compacts (every chapter compensation and anchor margin reads the token). */ @media (max-width: 760px) { :root { --header-h: 58px; } } /* Dark by system preference — skipped when the visitor forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: var(--dd-lacquer); --ink: var(--dd-ivory); --ink-lift: var(--dd-ivory-lift); --muted: var(--dd-smoke); --hairline: rgb(242 239 234 / 16%); --hairline-strong: rgb(242 239 234 / 32%); --surface: #191614; --overlay: rgb(19 17 16 / 72%); --focus-ring: var(--dd-ivory); /* The marker, tempered for the dark room — and lit from within (see :root). Its ink goes to ABSOLUTE black here: on a lit pigment surrounded by lacquer, the warm ink reads as a smudge, where pure black reads as print. 13.2:1 under the stroke. */ --mark: #ced52c; --mark: oklch(0.84 0.175 112); --mark-ink: #000000; --mark-ink-soft: rgb(0 0 0 / 70%); --mark-bloom: oklch(0.84 0.175 112 / 30%); --concierge-recording: #d98a80; color-scheme: dark; } } /* Explicit choice — wins over the media query in both directions. The second selector is the PAGE-level force (`html:root` out-specifies the [data-theme="light"] block below): the HOME is dark by convention, whatever the visitor picked — the header toggle keeps working everywhere else. */ :root[data-theme="dark"], html:root[data-page-theme="dark"] { --page: var(--dd-lacquer); --ink: var(--dd-ivory); --ink-lift: var(--dd-ivory-lift); --muted: var(--dd-smoke); --hairline: rgb(242 239 234 / 16%); --hairline-strong: rgb(242 239 234 / 32%); --surface: #191614; --overlay: rgb(19 17 16 / 72%); --focus-ring: var(--dd-ivory); /* The marker, tempered for the dark room — and lit from within (see :root). Its ink goes to ABSOLUTE black here: on a lit pigment surrounded by lacquer, the warm ink reads as a smudge, where pure black reads as print. 13.2:1 under the stroke. */ --mark: #ced52c; --mark: oklch(0.84 0.175 112); --mark-ink: #000000; --mark-ink-soft: rgb(0 0 0 / 70%); --mark-bloom: oklch(0.84 0.175 112 / 30%); --concierge-recording: #d98a80; color-scheme: dark; } :root[data-theme="light"] { --page: var(--dd-white); --ink: var(--dd-ink); --ink-lift: var(--dd-ink-lift); --muted: var(--dd-smoke); --hairline: rgb(33 31 28 / 14%); --hairline-strong: rgb(33 31 28 / 28%); --surface: #fafaf9; --overlay: rgb(255 255 255 / 72%); --focus-ring: var(--dd-ink); /* Back to full strength on paper, warm ink again — the explicit choice must win both ways. */ --mark: #f3fa3a; --mark: oklch(0.95 0.196 112); --mark-ink: var(--dd-ink); --mark-ink-soft: rgb(33 31 28 / 72%); --mark-bloom: rgb(0 0 0 / 0%); --concierge-recording: #8e1f22; color-scheme: light; } /* Regions painted ON photography always read as "dark", whatever the theme: the hero scrim is lacquer, so their content uses the inverted (ivory) ink. The transparent header sits on the same scrim — until the scroll island flips it to the theme background, at which point it drops back to the theme tokens. `color` MUST be re-declared here: redefining --ink only affects declarations that READ it, while descendants keep the `color` they inherited from (the light-theme ink) — the bug that made the hero title unreadable. */ .on-photo, .header--hero:not([data-scrolled="true"]) { --page: var(--dd-lacquer); --ink: var(--dd-ivory); --ink-lift: var(--dd-ivory-lift); --muted: #a7a29a; /* smoke is too dark to sit on a photograph */ --hairline: rgb(242 239 234 / 24%); --hairline-strong: rgb(242 239 234 / 44%); --overlay: rgb(19 17 16 / 0%); --focus-ring: var(--dd-ivory); color: var(--ink); }