/* ========================================================================== AnaVitalis design tokens Palette taken from the logo. Do not add colours outside this file. ========================================================================== */ @font-face{ font-family:Marcellus; src:url(/fonts/marcellus-latin-400-normal.woff2) format('woff2'); font-weight:400; font-style:normal; /* optional, not swap: with swap the h1 rendered in the fallback serif and then reflowed when Marcellus arrived, and that single reflow was the whole of the home page's 0.197 CLS. optional gives the font a short block period and never swaps afterwards, so the headline can never move. The file is preloaded in base.html, so in practice it wins that race and is used. Metric-override fallbacks were the alternative, but the correct size-adjust differs per platform and cannot be measured from here. */ font-display:optional; } @font-face{ font-family:Mulish; src:url(/fonts/mulish-latin-400-normal.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:Mulish; src:url(/fonts/mulish-latin-600-normal.woff2) format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:Mulish; src:url(/fonts/mulish-latin-700-normal.woff2) format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:Mulish; src:url(/fonts/mulish-latin-800-normal.woff2) format('woff2'); font-weight:800; font-style:normal; font-display:swap; } :root{ /* --- Brand palette (§5) ------------------------------------------------ */ --cream: #F8F6F1; /* page background (default) */ --paper: #FFFFFF; /* cards, raised surfaces */ --sage: #F2F7F4; /* alternate section background */ --sage-soft: #E4F0EA; /* tints, chips, chart bands */ /* Muted text on the two dark grounds. Both clear WCAG AA 4.5:1 with a little headroom — the previous values were 3.95-4.45 and failed. --on-navy-soft 8.89:1 on --navy --on-green-soft 4.77:1 on --green-deep (10.67:1 on --navy) */ --on-navy-soft: #C8D6E2; --on-green-soft: #D4EDE3; /* dimmer still, for the footer's de-emphasised line: 4.94:1 on --navy */ --on-navy-dim: #94A0AC; --green: #4F9A84; /* logo leaf green, primary accent */ --green-deep: #2F6F62; /* buttons, links, emphasis */ --teal: #1D6B78; /* logo "A" teal, secondary accent */ --navy: #12324F; /* wordmark navy, headings, text */ --body: #3A4754; /* body text */ --muted: #636E7A; /* darkened from #6B7884: that failed AA on cream (4.19) */ --line: #DCE6E0; /* hairlines */ --gold: #B8966A; /* logo dot, thin rules and small details only */ --amber: #D9A14A; /* evidence tier C */ --rose: #C8745F; /* evidence tier D */ /* Derived, for depth without introducing new hues */ --sage-deep: #D6E9DF; --navy-soft: #0E2740; /* deeper navy for the 'what we don't do' band */ --ink-05: rgba(18,50,79,.05); --ink-08: rgba(18,50,79,.08); --ink-12: rgba(18,50,79,.12); /* --- Evidence tiers ---------------------------------------------------- */ /* Backgrounds are the §5 brand colours and must not change. White text fails AA on three of them, so those chips take dark ink instead — the same solution the C chip already used on amber. */ --tier-a: var(--green-deep); --tier-a-ink: #FFFFFF; /* 5.88 */ --tier-b: var(--green); --tier-b-ink: #08201A; /* 5.10 */ --tier-c: var(--amber); --tier-c-ink: #4A3308; /* 5.17 */ --tier-d: var(--rose); --tier-d-ink: #2E0D06; /* 5.20 */ --tier-x: #8A96A0; --tier-x-ink: #101419; /* 6.12 */ /* --- AnaMo Elements (v0.2) --------------------------------------------- */ /* Fixed by ANAMO_ELEMENTS_UPDATE.md §1.6 and shared with the Shiny app. ACCENTS ONLY — never text, never a text background. As text on white / cream, and white text on them: --el-fire #C8793A 3.36:1 on paper, 3.11 on cream fails AA text --el-stone #5B6675 5.83:1 on paper, 5.40 on cream passes, but kept as accent for parity --el-earth #7A8A4E 3.77:1 on paper, 3.49 on cream fails AA text --el-water #3D8A8F 4.01:1 on paper, 3.72 on cream fails AA text All four clear 3:1 against --paper, so they are fine as the card's top rule and heading underline (and those are decorative: the element name is always in text). */ --el-fire: #C8793A; --el-stone: #5B6675; --el-earth: #7A8A4E; --el-water: #3D8A8F; /* --- AnaMo gems --------------------------------------------------------- */ /* From the shared manifest (../AnaMo/anamo_characters.json → gems); build.py warns if they drift. ACCENTS ONLY (a short rule under the gem name and the Brilliant/Flawless glow) — never text, never a text background. The gem's name and area are always printed in --navy / --body. */ --gem-ruby: #B3263A; --gem-tigers-eye: #9A6B2F; --gem-emerald: #2E8B57; --gem-sapphire: #2F4FA8; --gem-amethyst: #8350B0; --gem-citrine: #C8901A; --gem-pearl: #A8948A; --gem-diamond: #7D8E9C; /* --- Typography -------------------------------------------------------- */ --font-display: Marcellus, 'Times New Roman', serif; --font-body: Mulish, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --step--1: clamp(.82rem, .8rem + .1vw, .88rem); --step-0: clamp(1rem, .97rem + .15vw, 1.075rem); --step-1: clamp(1.15rem, 1.09rem + .3vw, 1.35rem); --step-2: clamp(1.4rem, 1.28rem + .6vw, 1.85rem); --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem); --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); --step-5: clamp(2.5rem, 1.6rem + 4.2vw, 5rem); /* hero: 64–80px desktop */ /* --- Spacing & rhythm -------------------------------------------------- */ --gutter: clamp(1.15rem, .8rem + 2vw, 3.5rem); --measure: 66ch; --wrap: 1240px; --wrap-wide: 1440px; --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem); --radius-s: 8px; --radius: 14px; --radius-l: 22px; --radius-xl: 32px; --shadow-s: 0 1px 2px var(--ink-05); --shadow: 0 2px 10px -2px var(--ink-08), 0 1px 2px var(--ink-05); --shadow-l: 0 22px 40px -18px rgba(18,50,79,.45), 0 2px 6px var(--ink-12); --ease: cubic-bezier(.22,.61,.36,1); }