/* Default: follow OS preference. JS sets data-color-scheme="light"|"dark" to override. */ :root { color-scheme: light dark; } /* `only` opts out of Chrome's Auto Dark Theme — a Chrome 141+ regression partially inverts colours and repaints on hover, creating a seam between inverted and preserved tiles. Fixed in Chromium 150.0.7846.4 but workaround stays in place for older versions. */ :root[data-color-scheme="light"] { color-scheme: only light; } :root[data-color-scheme="dark"] { color-scheme: only dark; } /* Paper-colour override — see --paper definitions below and ADR 0006. */ :root[data-paper="white"] { --paper: #fff; --paper-deep: #f7f7f5; } :root { /* Surface & ink */ --paper: light-dark(oklch(94% 0.022 82), oklch(14% 0.018 82)); --paper-deep: light-dark(oklch(91% 0.022 82), oklch(11% 0.018 82)); --card: light-dark(oklch(97% 0.015 82), oklch(18% 0.018 82)); /* Floating surfaces (toasts, dropdowns, popovers) — distinct from the page */ --surface-float: light-dark(oklch(88% 0.022 82), oklch(8% 0.018 82)); /* Paper-colour override for PDF export (see ADR 0006). When the WebView is loaded with ?paper=white, App.tsx sets data-paper="white" on and the rule below replaces the cream surface family with pure white. Both --paper and --paper-deep flip together so selected/active row backgrounds stay coherent against the new surface. */ --ink: light-dark(oklch(18% 0.033 234), oklch(92% 0.015 82)); --ink-soft: light-dark(oklch(33% 0.038 234), oklch(78% 0.018 82)); --ink-muted: light-dark(oklch(46% 0.035 230), oklch(62% 0.018 82)); /* Accent */ /* All accents meet ≥4.5:1 contrast vs --paper in both modes */ --rust: light-dark(oklch(45% 0.13 35), oklch(65% 0.14 35)); --rust-hover: light-dark(oklch(55% 0.13 35), oklch(72% 0.14 35)); --pine: light-dark(oklch(36% 0.075 158), oklch(58% 0.09 158)); --gold: light-dark(oklch(62% 0.11 75), oklch(72% 0.11 75)); --sky: light-dark(oklch(40% 0.08 240), oklch(58% 0.09 240)); /* Lines */ --line: light-dark(oklch(83% 0.022 82), oklch(26% 0.018 82)); --line-soft: light-dark(oklch(88% 0.022 82), oklch(20% 0.018 82)); /* Badge colours (bg + fg, 6-hue palette) bg L≈93% light / L≈22% dark; fg L≈29% light / L≈88% dark Fixed lightness guarantees ≥4.5:1 contrast without per-colour auditing. */ --badge-rust-bg: light-dark(oklch(93% 0.04 35), oklch(22% 0.09 35)); --badge-rust-fg: light-dark(oklch(29% 0.14 35), oklch(88% 0.05 35)); --badge-pine-bg: light-dark(oklch(93% 0.03 158), oklch(20% 0.07 158)); --badge-pine-fg: light-dark(oklch(28% 0.1 158), oklch(88% 0.04 158)); --badge-gold-bg: light-dark(oklch(94% 0.04 75), oklch(22% 0.08 75)); --badge-gold-fg: light-dark(oklch(32% 0.12 75), oklch(90% 0.04 75)); --badge-sky-bg: light-dark(oklch(93% 0.04 240), oklch(20% 0.08 240)); --badge-sky-fg: light-dark(oklch(28% 0.12 240), oklch(88% 0.05 240)); --badge-violet-bg: light-dark(oklch(93% 0.04 295), oklch(20% 0.1 295)); --badge-violet-fg: light-dark(oklch(28% 0.15 295), oklch(88% 0.04 295)); --badge-slate-bg: light-dark(oklch(93% 0.018 230), oklch(20% 0.05 230)); --badge-slate-fg: light-dark(oklch(28% 0.07 230), oklch(88% 0.03 230)); /* Grey, for a badge that marks a thing rather than a person or a state. */ --badge-stone-bg: light-dark(oklch(93% 0.004 82), oklch(24% 0.004 82)); --badge-stone-fg: light-dark(oklch(38% 0.006 82), oklch(84% 0.006 82)); /* Type families */ --font-mono: "IBM Plex Mono", monospace; --font-serif: "Fraunces", serif; --font-sans: "IBM Plex Sans", system-ui, sans-serif; /* Type scale Sizes 11–24px are tokenized (the working range for body, labels, captions). Display sizes (28px+, used in Masthead h1 / day numbers) stay as raw values — those are editorial one-offs, not part of the system. */ --text-xs: 11px; /* eyebrow / micro label */ --text-sm: 12px; /* caption */ --text-md: 13px; /* small body, dense tables */ --text-base: 14px; /* body */ --text-lg: 16px; /* h3, prominent body */ --text-xl: 20px; /* small heading */ --text-2xl: 24px; /* heading */ /* Weight */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Tracking */ --tracking-tight: 0.1em; --tracking-wide: 0.12em; --tracking-wider: 0.14em; /* eyebrow tracking */ --tracking-widest: 0.18em; /* Spacing — 4px base Off-scale values (6, 10, 14, 18, 22, 26) round up to the nearest scale step. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radius */ --radius-sm: 2px; --radius-md: 4px; --radius-circle: 50%; --radius-pill: 999px; /* Animation durations fast → micro-interactions: hover, focus, button presses base → component transitions: dialog enter, toast enter slow → layout shifts, larger surfaces */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; /* Media treatment Photographic/raster assets (airline logos, car photos) keep their colour in light mode but are dimmed and slightly desaturated in dark mode so they don't punch against the deep background. */ --media-filter: none; } @media (prefers-color-scheme: dark) { :root { --media-filter: brightness(0.82) saturate(0.9); } } :root[data-color-scheme="light"] { --media-filter: none; } :root[data-color-scheme="dark"] { --media-filter: brightness(0.82) saturate(0.9); } /* * Marketing-surface styling. Deliberately NOT importing packages/ui's base.css: that carries * app-shell concerns (form controls, print rules, utility classes for components this site * doesn't have). Only the tokens are shared -- which is what actually keeps the two in step, * since the palette and type scale are the visible part. * * Editorial rather than app-like: a single measure-limited column, serif headings, generous * vertical rhythm. This is something you read, not something you operate. */ * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.65; -webkit-font-smoothing: antialiased; } main, .masthead, footer { /* 68ch is the editorial measure; raw px only for that, per the CSS conventions note. */ max-width: 68ch; margin: 0 auto; padding-inline: var(--space-5); } /* Base element styles live above every qualified selector: a generic rule appearing after a more specific one reads as an override it can never actually perform. */ a { color: var(--rust); } a:hover { color: var(--rust-hover); } p { margin: 0 0 var(--space-4); } /* masthead */ .masthead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6) var(--space-5); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .wordmark { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--ink); text-decoration: none; } .masthead nav { display: flex; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .masthead nav a { color: var(--ink-muted); text-decoration: none; padding-bottom: var(--space-1); border-bottom: 1.5px solid transparent; } .masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--rust); } /* content */ main { padding-block: var(--space-8) var(--space-10); } h1 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.15; margin: 0 0 var(--space-3); } /* The lede is the first paragraph after the page heading. Structural rather than a class, because the page is markdown and markdown has no classes. */ .prose > h1 + p { color: var(--ink-soft); font-size: var(--text-lg); margin: 0 0 var(--space-8); } h2 { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); } /* changelog entries */ .entry { padding-block: var(--space-6); border-top: 1px solid var(--line-soft); } .entry:first-of-type { border-top: 0; padding-top: 0; } .entry-meta { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); } .entry-version { color: var(--pine); } .entry-body > :first-child { margin-top: 0; } .entry-body > :last-child { margin-bottom: 0; } .entry-body ul { padding-left: var(--space-5); margin: var(--space-3) 0; } .entry-body li { margin-bottom: var(--space-2); } /* markdown prose pages (features, acknowledgements) */ /* Each `## Heading` opens an item, so the rule between items hangs off the heading rather than off a wrapper element there is no way to emit from markdown. */ .prose h2 { padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--line-soft); } .prose > h1 + p + h2 { border-top: 0; padding-top: 0; } .prose h2 + p { margin: 0 0 var(--space-2); color: var(--ink-soft); } .prose a { color: inherit; } /* footer */ footer { padding-block: var(--space-6) var(--space-10); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-muted); }