/* TESSA Training — shared brand CSS * Faithful subset of the live tessa-tools.co.uk design language. * Use on every demo page so visitors feel they are inside the real product. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Cinzel:wght@400;500;600&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ice: #B8E3E9; --grey-blue: #93B1B5; --slate: #4F7C82; --deep-teal: #0B2E33; --cyan: #24ACC3; --navy: #001321; --mint: #D9EFE8; --gold: #C4A565; --white: #FFFFFF; --rose: #B02F1F; --merciaRed: #800000; --bg: #001321; --card-bg: rgba(11, 46, 51, 0.5); --card-border: rgba(79, 124, 130, 0.25); --text: #B8E3E9; --text-muted: #93B1B5; } /* Light mode — Tessa Pocket AI palette. Triggered by data-a11y="accessible" on or . Cream-and-orange palette that removes blue/teal/green entirely, so blue-blind and green-sensitive users get the same hierarchy without colour confusion, and anyone who prefers a light theme can opt in. Uses the brand-colours documented at Tessa Pocket/brand-colours.md. */ [data-a11y="accessible"] { /* Map the dark-mode variables onto warm light equivalents */ --ice: #1D0501; /* was light cyan, now dark chocolate (used for body text) */ --grey-blue: #3B2B16; /* secondary muted text — olive brown */ --slate: #884E25; /* burnt sienna for icon strokes / dotted lines */ --deep-teal: #FFFFFF; /* "card surface" — white on cream */ --cyan: #C1631B; /* primary accent — ochre / rust */ --navy: #dadfd9; /* LOCKED: light-mode page background, pale cool grey-green. See CLAUDE.md > Brand Colours. */ --mint: #FFF4D8; /* very light cream wash */ --gold: #021724; /* light mode: orange would not contrast on dark/grey card backgrounds, so --gold maps to near-black for headings and eyebrow text. Direct hex #F69D2C is still used for buttons and brand accent surfaces. */ --white: #1D0501; /* highest emphasis is now dark chocolate */ /* --rose stays #B02F1F (brick red works in both modes for alerts) */ --bg: #F0E5C0; --card-bg: rgba(255, 255, 255, 0.85); --card-border: rgba(29, 5, 1, 0.18); --text: #1D0501; --text-muted: #3B2B16; } /* Hardcoded dark surfaces that bypass the variables — override in light mode */ [data-a11y="accessible"] body { background-color: #F0E5C0; } [data-a11y="accessible"] .nav { background: rgba(240, 229, 192, 0.92); border-bottom-color: rgba(29, 5, 1, 0.15); } [data-a11y="accessible"] .footer { background: rgba(255, 255, 255, 0.6); color: #3B2B16; border-top-color: rgba(29, 5, 1, 0.15); } [data-a11y="accessible"] h1, [data-a11y="accessible"] h2, [data-a11y="accessible"] h3, [data-a11y="accessible"] h4 { color: #1D0501; } /* Cards / panels / callouts — the inline styles use rgba(0, 19, 33, X) for "dark navy card on dark navy page". In light mode, all of those become "white card on cream page". A single broad override covers the common patterns; specific call-outs (alert / reg / verbatim) keep their warm-orange tints via overrides further down. */ [data-a11y="accessible"] :where( .section-card, .interactive, .smoothed-paragraph, .case-card, .pattern-card, .threshold .col, .modes .col, .can-cannot .col, .appeal-vs .col, .use-case, .ba .panel, .worked .panel, .inflate .panel, .iter, .iter-prompt, .iter-response, .lesson-figure, .reveal-card, .friction-list li, .require-list li, .key-list li, .mindset-list li, .child-voice, .prompt-card, .prompt-quote, .positive-callout, .reg-callout, .verbatim-callout, .alert-callout, .caveat, .line-callout, .big-line, .reflection, .module-head .progress-card, .section-nav, .flip-card .face, .qc-option, .qa-option, .result-card, .review-item, .owns ) { /* !important on background only — per-page inline