/* ────────────────────────────────────────────────────────────────────────── Baton brand layer (v3) The design language introduced with the v3 landing page: paper/ink palette, amber accent, Chakra Petch display type over Inter body type. WHAT LOADS THIS TODAY: only `templates/landing.html`. The app (base.html) still runs on theme.css + components.css and is untouched by this file, by design. Nothing here overrides a `--baton-*` token or a `b-*` class unless the bridge at the bottom is switched on. HOW TO ADOPT IT IN THE APP LATER: see `docs/design-system.md`. Short version: link this file in base.html and add `class="bn-theme"` to . The bridge block re-points the legacy `--baton-*` tokens at this palette, so every existing `b-*` component picks up the new colors without being rewritten. That is the whole migration switch: flip it, look, flip it back if wrong. NAMING: everything here is `--bn-*` / `.bn-*`. The prefix is deliberate: it keeps this layer greppable and collision-free against `--baton-*` / `b-*` while both exist side by side. FONTS: Inter (body) + Chakra Petch (display) come from Google Fonts, linked in the page . This file assumes they are loaded and falls back to the system stack if they are not. Do not @import them here, because an @import blocks the stylesheet's own render. ────────────────────────────────────────────────────────────────────────── */ :root { /* No dark theme exists. Declaring the scheme keeps the browser from rendering native controls (select popups, scrollbars, autofill) with dark-mode conventions on an OS set to dark. Same reasoning as theme.css. */ color-scheme: light; /* ── Palette ── */ --bn-ink: #111a26; /* headings, primary buttons, hard rules */ --bn-ink-2: #1d2c3f; /* primary button hover */ --bn-body: #4f6076; /* body copy */ --bn-muted: #8394a8; /* secondary / disabled copy */ --bn-line: #e2e7ee; /* hairlines, borders */ --bn-paper: #fbfaf7; /* page background (warm off-white) */ --bn-paper-2: #f4f2ed; /* recessed surfaces, table heads, chips */ --bn-white: #ffffff; /* raised surfaces, cards */ --bn-navy: #132132; /* inverted sections, footer, marquee */ --bn-navy-body: #c3d2e3; /* body copy ON navy */ --bn-navy-muted: #8ba0ba; /* muted copy ON navy */ --bn-amber: #e8892b; /* the accent. One accent, used sparingly */ --bn-amber-dark: #d47a22; /* amber button hover */ --bn-amber-tint: #fdf3e7; /* amber wash background */ --bn-amber-line: #f5d9b8; /* border on an amber wash */ --bn-amber-text: #a55d13; /* amber-family text that has to pass contrast */ --bn-good: #0f7a58; /* yes / included / success */ --bn-bad: #c25b4e; /* no / missing */ /* ── Type ── */ --bn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bn-font-display: 'Chakra Petch', 'Inter', -apple-system, sans-serif; /* ── Metrics ── */ --bn-max: 1140px; /* content column */ --bn-gutter: 24px; --bn-radius: 6px; /* controls */ --bn-radius-lg: 10px; /* cards, panels */ --bn-shadow: 0 20px 50px rgba(19, 33, 50, .09); } /* ── Type primitives ─────────────────────────────────────────────────────── */ .bn-display { font-family: var(--bn-font-display); font-weight: 700; color: var(--bn-ink); line-height: 1.06; letter-spacing: -.035em; } .bn-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bn-amber); } .bn-num { font-family: var(--bn-font-display); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .bn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; border-radius: var(--bn-radius); padding: 11px 20px; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .bn-btn-primary { background: var(--bn-ink); color: #fff; } .bn-btn-primary:hover { background: var(--bn-ink-2); color: #fff; } .bn-btn-accent { background: var(--bn-amber); color: #fff; } .bn-btn-accent:hover { background: var(--bn-amber-dark); color: #fff; } .bn-btn-ghost { background: transparent; color: var(--bn-ink); border-color: var(--bn-ink); } .bn-btn-ghost:hover { background: var(--bn-ink); color: #fff; } .bn-btn-lg { padding: 15px 28px; font-size: 16px; } .bn-btn-block { width: 100%; } /* ── Surfaces ────────────────────────────────────────────────────────────── */ .bn-card { background: var(--bn-white); border: 1px solid var(--bn-line); border-radius: var(--bn-radius-lg); overflow: hidden; } .bn-card-raised { box-shadow: var(--bn-shadow); } .bn-rule { height: 1px; background: var(--bn-line); } /* ── Chips / badges ──────────────────────────────────────────────────────── */ .bn-tag { display: inline-block; font-size: 11.5px; font-weight: 600; background: var(--bn-paper-2); border: 1px solid var(--bn-line); color: var(--bn-body); padding: 3px 9px; border-radius: 5px; } .bn-tag-accent { background: var(--bn-amber-tint); border-color: var(--bn-amber-line); color: var(--bn-amber-text); } /* ── Form controls ───────────────────────────────────────────────────────── */ .bn-label { display: block; font-size: 13px; font-weight: 700; color: var(--bn-ink); margin-bottom: 6px; } .bn-input, .bn-select, .bn-textarea { width: 100%; border: 1.5px solid var(--bn-line); border-radius: var(--bn-radius); padding: 11px 13px; font-size: 15px; font-family: inherit; color: var(--bn-ink); background: #fff; } .bn-input:focus, .bn-select:focus, .bn-textarea:focus { outline: none; border-color: var(--bn-amber); } .bn-textarea { min-height: 92px; resize: vertical; } /* ── Layout helper ───────────────────────────────────────────────────────── */ .bn-wrap { max-width: var(--bn-max); margin: 0 auto; padding: 0 var(--bn-gutter); } /* ────────────────────────────────────────────────────────────────────────── THE BRIDGE. Off by default. Adding `bn-theme` to re-points the app's legacy `--baton-*` tokens at the palette above, so `b-*` components in components.css adopt the new look with no markup change. Nothing outside this block touches a `--baton-*` name, which is what keeps this file safe to load anywhere. Known gaps to settle before flipping it on for the app (docs/design-system.md tracks these): components.css hardcodes a handful of blues and grays that no token reaches, and the app's display font is Inter throughout. Chakra Petch is NOT applied here, because turning it on app-wide is a separate call from turning on the palette. ────────────────────────────────────────────────────────────────────────── */ :root.bn-theme { --baton-blue: var(--bn-navy); --baton-blue-light: var(--bn-ink-2); --baton-blue-dark: var(--bn-ink); --baton-blue-accent: var(--bn-amber); --baton-bg: var(--bn-paper); --baton-card: var(--bn-white); --baton-text: var(--bn-ink); --baton-text-muted: var(--bn-muted); --baton-border: var(--bn-line); }