/* ============================================================================
TaxBet — brand tokens
Scheme: Deep Petrol. Dark marketing surfaces, light document surfaces,
plus two accent surfaces (mint, black) for social and short marketing bands.
Tagline: A number you can defend.
v2 (Sep 2026): display face is Source Serif 4 (was Playfair Display);
surface-mint and surface-black added.
Load this BEFORE any page stylesheet. Nothing in here is page-specific.
Fonts (Google Fonts, one in ):
https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,700;0,8..60,800;1,8..60,700;1,8..60,800&display=swap
Every colour used anywhere in the product should resolve to a token below —
if you need a hex that isn't here, add it here first.
========================================================================== */
:root {
/* ── core ────────────────────────────────────────────────────────────────
Petrol is the brand. Mint is the accent, and it is also the marked
figure in the logo. Ink is a petrol-black, not a neutral black, so it
reads as a darker relative of the brand rather than an unrelated grey. */
--petrol-900: #082226; /* deepest — nav on scroll, footers */
--petrol-800: #0C2E33; /* primary dark ground */
--petrol-700: #123C43; /* raised dark panel, hover on dark */
--petrol-600: #164A52; /* dark gradient partner, borders on dark */
--petrol-500: #0E5A62; /* petrol proper — light-surface accent */
--petrol-400: #2C7C82; /* light-surface hover */
--mint-400: #6FD3BE; /* accent on dark: CTAs, links, the logo dot */
--mint-500: #4FBFA6; /* mint hover / pressed */
--mint-200: #A8E6D6; /* mint at low emphasis on dark */
--ink: #10262A; /* petrol-black, all headings on light */
--ink-2: #3D5257; /* body copy on light */
--ink-3: #5F7276; /* muted / captions on light */
--ink-4: #87979A; /* disabled, build stamps */
/* ── surfaces: dark (marketing, onboarding, dashboard chrome) ──────────
The ladder is deliberately wide: shadows are invisible on dark grounds,
so value separation is the only elevation cue available. */
--d-trough: #061A1E; /* footer, recessed band */
--d-bg: #0A272B; /* dark band ground */
--d-bg-grad: linear-gradient(158deg, #0A272B 0%, #123C43 62%, #0C2E33 100%);
--d-panel: #123C43; /* card on dark */
--d-panel-2: #1A4E56; /* hovered / active card on dark */
--d-line: rgba(234, 242, 240, 0.20);
--d-line-2: rgba(234, 242, 240, 0.30);
--d-edge: rgba(255, 255, 255, 0.06); /* top-edge highlight */
--d-text: #EAF2F0;
--d-text-2: #B8CFCC;
--d-text-3: #8FA9A9;
--d-text-4: #6B8586;
/* ── surfaces: light (workpaper, report, notice package, print) ──────── */
--l-bg: #F0F4EF; /* safety-paper tint */
--l-card: #FFFFFF;
--l-panel: #F7FAF6;
--l-line: #DCE5DA;
--l-line-2: #C9D6C6;
/* ── semantic ───────────────────────────────────────────────────────────
Kept clear of petrol and mint on light surfaces. On dark, success uses
mint-adjacent green but NEVER mint itself — see caution at the bottom. */
--good: #1F7A55; /* on light */
--good-bg: #E7F3EC;
--good-line: #C3E3D0;
--good-dark: #7FE0B6; /* on dark — distinct from --mint-400 */
--bad: #B3261E; /* discrepancy, the struck figure */
--bad-bg: #FDF0EE;
--bad-line: #F0CFCA;
--bad-dark: #F8A9A0;
--warn: #8A5A00;
--warn-bg: #FFF8E8;
--warn-line: #EFD9A8;
--warn-dark: #F5C563;
/* ── data / charts ──────────────────────────────────────────────────────
Ordered for the session ledger: wins above the line, losses below,
a marker where a W-2G fired. Series 4–6 are for platform breakdowns. */
--chart-win: #1F7A55;
--chart-loss: #B3261E;
--chart-w2g: #B08800;
--chart-1: #0E5A62;
--chart-2: #6FD3BE;
--chart-3: #4A7C8C;
--chart-4: #8A5A00;
--chart-grid: #DCE5DA;
--chart-axis: #87979A;
/* dark-surface equivalents */
--chart-win-d: #7FE0B6;
--chart-loss-d: #F8A9A0;
--chart-w2g-d: #F5C563;
--chart-grid-d: rgba(234, 242, 240, 0.14);
--chart-axis-d: #8FA9A9;
/* ── elevation ──────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(8, 34, 38, .07);
--shadow-md: 0 6px 18px rgba(8, 34, 38, .10);
--shadow-lg: 0 22px 54px rgba(8, 34, 38, .30);
/* ── radius / motion ────────────────────────────────────────────────── */
--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
--ease: cubic-bezier(.2, .8, .25, 1);
--t-fast: .14s; --t-med: .28s;
/* ── focus ──────────────────────────────────────────────────────────────
Must be visible on both grounds, so it is mint on dark and petrol on
light. Set --focus per surface; never remove the outline. */
--focus-dark: var(--mint-400);
--focus-light: var(--petrol-500);
/* ── typography ─────────────────────────────────────────────────────────
Geist works; Source Serif speaks. Source Serif 4 (700/800 + italic) is
display headlines only — its italic is a true, legible italic, which is
why it replaced Playfair Display (Sep 2026). Mono carries eyebrows and
every figure, always tabular-nums; Geist Mono first so figures render
the same on every platform. */
--font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;
/* ── surfaces: mint (social hooks, CTA slabs, short bands) ──────────────
Mint as a GROUND, not an accent. Ink is petrol-900; emphasis is
petrol-500; buttons invert (petrol-900 fill, mint text). Rationed:
one band per page, roughly one slide in four on social. Never for
anything a preparer reads. */
--m-bg: #6FD3BE;
--m-band: #4FBFA6; /* recessed band inside a mint surface */
--m-ink: #062226;
--m-ink-2: #0C2E33;
--m-ink-3: #164A52;
--m-ink-4: #2C7C82;
--m-panel: rgba(6, 34, 38, 0.09);
--m-card: rgba(255, 255, 255, 0.30);
--m-line: rgba(6, 34, 38, 0.22);
/* ── surfaces: black (poster moments — the biggest number on the page) ── */
--k-bg: #04090B;
--k-panel: #0C1A1D;
--k-band: #0B1E21;
--k-line: rgba(234, 242, 240, 0.16);
--k-text: #F2F7F5;
}
/* ============================================================================
SURFACE CLASSES
Put .surface-dark on marketing / onboarding / dashboard-chrome wrappers and
.surface-light on anything a preparer reads. Components below read the
--s-* aliases, so the same component works on either surface unchanged.
========================================================================== */
.surface-dark {
--s-bg: var(--d-bg);
--s-panel: var(--d-panel);
--s-line: var(--d-line);
--s-text: var(--d-text);
--s-text-2: var(--d-text-2);
--s-text-3: var(--d-text-3);
--s-accent: var(--mint-400);
--s-accent-h:var(--mint-500);
--s-on-accent:#062226;
--s-good: var(--good-dark);
--s-bad: var(--bad-dark);
--s-warn: var(--warn-dark);
--focus: var(--focus-dark);
background: var(--s-bg);
color: var(--s-text);
}
.surface-light {
--s-bg: var(--l-bg);
--s-panel: var(--l-card);
--s-line: var(--l-line);
--s-text: var(--ink);
--s-text-2: var(--ink-2);
--s-text-3: var(--ink-3);
--s-accent: var(--petrol-500);
--s-accent-h:var(--petrol-400);
--s-on-accent:#FFFFFF;
--s-good: var(--good);
--s-bad: var(--bad);
--s-warn: var(--warn);
--focus: var(--focus-light);
background: var(--s-bg);
color: var(--s-text);
}
/* Mint ground. Same --s-* contract: components don't know they're on mint. */
.surface-mint {
--s-bg: var(--m-bg);
--s-panel: var(--m-panel);
--s-line: var(--m-line);
--s-text: var(--m-ink);
--s-text-2: var(--m-ink-2);
--s-text-3: var(--m-ink-3);
--s-accent: var(--m-ink); /* figures, eyebrows, buttons */
--s-accent-h:var(--petrol-800);
--s-on-accent:var(--mint-400); /* button text on a petrol button */
--s-emph: var(--petrol-500); /* the emphasized clause in a headline */
--s-good: var(--good);
--s-bad: var(--bad);
--s-warn: var(--warn);
--focus: var(--petrol-900);
background: var(--s-bg);
color: var(--s-text);
}
/* Flat near-black. Dark's poster cousin: no gradient, mint accent. */
.surface-black {
--s-bg: var(--k-bg);
--s-panel: var(--k-panel);
--s-line: var(--k-line);
--s-text: var(--k-text);
--s-text-2: var(--d-text-2);
--s-text-3: var(--d-text-3);
--s-accent: var(--mint-400);
--s-accent-h:var(--mint-500);
--s-on-accent:#062226;
--s-emph: var(--mint-400);
--s-good: var(--good-dark);
--s-bad: var(--bad-dark);
--s-warn: var(--warn-dark);
--focus: var(--focus-dark);
background: var(--s-bg);
color: var(--s-text);
}
/* Emphasis token for dark and light, so headlines read --s-emph everywhere. */
.surface-dark { --s-emph: var(--mint-400); }
.surface-light { --s-emph: var(--petrol-500); }
/* ============================================================================
PRIMITIVES
========================================================================== */
.btn {
display: inline-block;
font: 500 15.5px/1.2 var(--font-body, inherit);
padding: 13px 23px;
border-radius: var(--r-md);
border: 1px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.btn-primary { background: var(--s-accent); color: var(--s-on-accent); }
.btn-primary:hover { background: var(--s-accent-h); }
.surface-mint .btn-primary { background: var(--m-ink); color: var(--mint-400); }
.btn-secondary { background: transparent; color: var(--s-text); border-color: var(--s-line); }
.btn-secondary:hover { border-color: var(--s-text-3); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.card {
background: var(--s-panel);
border: 1px solid var(--s-line);
border-radius: var(--r-lg);
}
/* On dark grounds shadows don't register — a light top edge is the
elevation cue dark surfaces actually respond to. */
.surface-dark .card{
background: var(--d-panel);
border: 1px solid var(--d-line);
border-top-color: var(--d-edge);
}
.surface-dark .card:hover{ background: var(--d-panel-2); }
.eyebrow {
font: 500 11px/1.4 var(--font-mono, monospace);
letter-spacing: .15em;
text-transform: uppercase;
color: var(--s-text-3);
}
.figure { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-weight: 600; }
/* Display headline: Source Serif 4, 800. The emphasized clause is an
in --s-emph — italic is allowed (Source Serif's italic is legible) but
colour alone is enough; never underline, never a second colour. */
.display { font-family: var(--font-serif); font-weight: 800; letter-spacing: -.5px; line-height: 1.06; text-wrap: pretty; }
.display em { font-style: italic; color: var(--s-emph); }
/* the struck reported figure — used in every reconciliation view */
.figure-struck {
text-decoration: line-through;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--s-bad);
color: var(--s-bad);
}
.pill {
display: inline-block;
font: 400 11.5px/1.4 var(--font-mono, monospace);
border-radius: var(--r-pill);
padding: 5px 12px;
}
.surface-dark .pill-good { background: rgba(127, 224, 182, .13); color: var(--good-dark); }
.surface-light .pill-good { background: var(--good-bg); color: var(--good); }
*:focus-visible {
outline: 2px solid var(--focus, var(--petrol-500));
outline-offset: 3px;
border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* Print: the workpaper must always print light, whatever surface it sat on. */
@media print {
.surface-dark, .surface-light { background: #fff !important; color: #000 !important; }
.btn, nav, .no-print { display: none !important; }
}
/* ============================================================================
CAUTIONS — read before adding colour
1. Mint (--mint-400) and success green (--good-dark) are close. Mint means
"brand / action"; green means "good outcome". Never place a mint button
adjacent to a green success state — pick one per region.
2. Never use --petrol-500 on the dark ground or --mint-400 on the light
ground. Both fail contrast. Use the --s-accent alias and let the surface
class decide. Mint as a full GROUND (.surface-mint) is different: it
carries petrol-900 ink and passes contrast; it is the one place mint
and dark petrol trade roles.
5. .surface-mint is rationed: one band per marketing page, about one
slide in four on social, never adjacent to another mint band, never
for a report, workpaper, notice package or the CPA portal. On mint the
mint-400 accent does not exist — accent is petrol-900, emphasis is
petrol-500, and success green is --good (light-surface value).
6. .surface-black is for the single biggest figure on a page or in a
carousel. Flat, no gradient, no more than one black band per page.
3. The light tint (--l-bg #F0F4EF) is a 2% green cast and can wash out to
white on uncalibrated displays. Never rely on it alone to separate two
regions — always pair with --l-line.
4. --bad is the only red in the system and it means exactly one thing:
a reported figure that does not survive reconciliation.
========================================================================== */
/* ── tagline (Task 4): declared once, rendered via .tagline ─────────────── */
:root{ --tagline: "A number you can defend."; }
.tagline::after{ content: var(--tagline); }
/* ── Illustration slots (designer integration points — art pending) ─────────
Slots render nothing until an SVG lands per the asset contract in
assets/illustrations/README.md. Art inherits the palette via the two ink
custom properties below; never hardcode brand hexes inside delivered SVGs. */
.illustration-slot{display:none}
.illustration{--ill-ink:var(--petrol-800);--ill-accent:var(--mint-400);display:block;width:100%;height:auto}
.illustration-slot.has-art{display:block;aspect-ratio:var(--ill-ratio,16/5);background:transparent}
/* ── site additions (2026-09-05, not part of the brand v2 drop) ──────────────
The nav glass bar: one charcoal glass everywhere, never flips light. ── */
:root{ --glass-bar: rgba(15, 20, 22, .90); --glass-line: rgba(255, 255, 255, .08); }