/* ============================================================ COMPREHENSION MATTERS — Design Tokens colors_and_type.css ------------------------------------------------------------ Drop this into the of any artifact: Then use the CSS variables directly, or the semantic element styles at the bottom (h1..h6, p, code, small...). ============================================================ */ /* ---------- TYPOGRAPHY (Google Fonts substitute) ---------- */ /* Original stack: "Avenir Next" — proprietary. Closest free match on Google Fonts: Nunito Sans (geometric humanist sans with similar x-height and letter shapes). Swap to a hosted Avenir Next file if licensed. */ @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ============================================================ COLOR — PRIMARY BRAND ============================================================ */ --orange: #C0362C; /* International orange — brand primary */ --orange-deep: #92281F; /* Hover / pressed (almost red) */ --orange-soft: #F5E1CE; /* Tint / pill bg — warm peach, not pink */ --ember: #E36352; /* Accent / secondary CTA */ --heart-red: #C0362C; /* Heart-for-period — alias of --orange */ /* MARINE — hero background, anchored to the book photo */ --marine: #1F4A7B; /* Cobalt — master site hero */ --marine-deep: #14233F; /* Sidebar / footer */ --marine-soft: #DDE5EE; /* Marine tint */ /* ============================================================ BRAND TRIO — sage · gold · brick Originated as report status (stable/strengthening/wobbly) and now lifted to whole-site brand colors that pair with marine. Use freely as section backgrounds, callouts, etc. ============================================================ */ --sage: #5C7A5F; /* Green — calm, stable */ --sage-soft: #DCE4DA; --gold: #D89232; /* Amber — warmth, momentum */ --gold-soft: #F2DFC1; --brick: #92281F; /* Deep orange-red — attention (was #B14A4A) */ --brick-soft: #E8C9C0; /* ============================================================ COLOR — INK & PAPER (neutrals) ============================================================ */ --ink: #1B2C4A; /* Primary text */ --ink-soft: #4F5B6E; /* Secondary text */ --ink-muted: #918D86; /* Tertiary / meta · warm taupe gray */ --ink-faint: #C8CFDD; /* On-dark muted */ --paper: #FAF8F3; /* Card surface — warm white */ --bg: #EBE7DE; /* Page surface — warm beige */ --bg-deep: #DDD7CB; /* Outer canvas */ --line: #DAD3C5; /* Card / divider */ --line-soft: #E6E0D4; /* Hairline */ /* ============================================================ COLOR — FORMATIVE STATUS (report labels) Stable / Strengthening / Wobbly — extend the bridge metaphor. ============================================================ */ --stable: #5C7A5F; /* Sage — at ceiling */ --stable-soft: #DCE4DA; --streng: #D89232; /* Amber — mid-acquisition */ --streng-soft: #F2DFC1; --wobbly: #92281F; /* Deep orange-red — teach next */ --wobbly-soft: #E8C9C0; /* Legacy aliases for prototype compatibility */ --good: var(--stable); --good-soft: var(--stable-soft); --warn: var(--streng); --warn-soft: var(--streng-soft); --weak: var(--wobbly); --weak-soft: var(--wobbly-soft); /* ============================================================ COLOR — TEN BRIDGES (sentence-complexity scale) · ROYGBIV Full spectrum, anchored on the three brand colors: gold (Y), sage (G), marine (B). The off-brand steps are transition tones used in data viz, not surface chrome. ============================================================ */ --b1: #C73B33; /* R · Simple sentences */ --b2: #DA6238; /* RO · And / but joins */ --b3: #E48A36; /* O · Subject relatives */ --b4: #D89232; /* Y · Object relatives (= --gold) */ --b5: #9FA33B; /* YG · Sentential complements */ --b6: #5C7A5F; /* G · Passives (= --sage) */ --b7: #3E7E89; /* T · Temporal clauses */ --b8: #1F4A7B; /* B · Causal clauses (= --marine) */ --b9: #2D2F6C; /* I · Embedded wh-questions */ --b10: #2D1B4A; /* V · Compound morphosyntax */ /* ============================================================ COLOR — EIGHT STONES (Better Books phonics scale) · ROYGBIV Decodable difficulty ladder, sampled across the same spectrum as the bridges so the two systems read together. ============================================================ */ --s1: #C73B33; /* R · short vowels */ --s2: #DE7E32; /* O · consonant blends */ --s3: #D89232; /* Y · digraphs (= --gold) */ --s4: #5C7A5F; /* G · long vowels (= --sage) */ --s5: #3E7E89; /* T · r-controlled */ --s6: #1F4A7B; /* B · vowel teams (= --marine) */ --s7: #2D2F6C; /* I · diphthongs */ --s8: #5C3B7A; /* V · multisyllabic */ /* ============================================================ TYPOGRAPHY — FONT STACKS ============================================================ */ --font-sans: "Nunito Sans", "Avenir Next", "Avenir", "Century Gothic", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Display font — Nunito Sans 800 confirmed for "Comprehension matters" and section headers. No serif/italic accent font in this system. */ --font-display: 800 var(--font-sans); --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* SEMANTIC TYPE TOKENS (use these in components) */ --type-display: 800 82px/0.95 var(--font-sans); /* hero */ --type-h1: 800 56px/1.05 var(--font-sans); --type-h2: 800 32px/1.15 var(--font-sans); --type-h3: 800 22px/1.3 var(--font-sans); --type-h4: 800 18px/1.4 var(--font-sans); --type-h5: 600 14px/1.4 var(--font-sans); --type-lede: 400 17.5px/1.6 var(--font-sans); --type-body: 400 15.5px/1.6 var(--font-sans); --type-body-sm: 400 13.5px/1.55 var(--font-sans); --type-caption: 500 12px/1.4 var(--font-sans); --type-meta: 700 10px/1.2 var(--font-sans); /* eyebrow / pill */ --type-mono: 400 13px/1.5 var(--font-mono); /* Tracking (letter-spacing) */ --track-tight: -0.005em; --track-normal: 0.01em; --track-loose: 0.2px; --track-eyebrow: 2.5px; --track-pill: 1.5px; /* ============================================================ SPACING — 4px base scale ============================================================ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 28px; --sp-7: 36px; --sp-8: 44px; --sp-9: 56px; --sp-10: 72px; /* ============================================================ RADII ============================================================ */ --radius-pill: 999px; --radius-chip: 10px; --radius-card: 14px; --radius-photo: 16px; --radius-hero: 24px; --radius-phone: 36px; /* ============================================================ SHADOWS — three tiers + phone-specific ============================================================ */ --shadow-sm: 0 1px 2px rgba(20,30,50,0.06), 0 1px 1px rgba(20,30,50,0.04); --shadow-md: 0 6px 16px rgba(20,30,50,0.08), 0 1px 3px rgba(20,30,50,0.05); --shadow-lg: 0 16px 36px rgba(20,30,50,0.10), 0 4px 10px rgba(20,30,50,0.06); --shadow-phone: 0 30px 60px rgba(20,30,50,0.28), 0 12px 24px rgba(20,30,50,0.15); --shadow-press: inset 0 2px 4px rgba(20,30,50,0.10); /* Button "stand" — a 3-4px hard drop the brand uses on warm CTAs to give buttons physical weight. */ --stand-orange: 0 3px 0 var(--orange-deep); --stand-marine: 0 3px 0 var(--marine-deep); /* ============================================================ MOTION ============================================================ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ } /* ============================================================ SEMANTIC ELEMENT STYLES Opt-in by importing this file; opt out by overriding. ============================================================ */ html, body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); letter-spacing: var(--track-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { color: var(--ink); letter-spacing: var(--track-tight); margin: 0 0 12px; text-wrap: balance; } h1 { font: var(--type-h1); } h2 { font: var(--type-h2); } h3 { font: var(--type-h3); } h4 { font: var(--type-h4); } h5 { font: var(--type-h5); } .display { font: var(--type-display); letter-spacing: -1.8px; } .lede { font: var(--type-lede); color: var(--ink-soft); max-width: 60ch; } p { font: var(--type-body); color: var(--ink); margin: 0 0 1em; text-wrap: pretty; } small { font: var(--type-body-sm); color: var(--ink-soft); } .eyebrow { font: var(--type-meta); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--orange); } .eyebrow.marine { color: var(--ink-faint); } code, .mono { font: var(--type-mono); } a { color: var(--orange); text-decoration: none; } a:hover { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ FOCUS — always visible, brand-tinted ============================================================ */ :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; } /* ---- Consistent CTA hover: gentle lift on every real button (movement only, no color swap). Added on top of page rules so no button is left dead. Excludes .pill tags and .dl calendar cells. ---- */ .btn-primary,.bk-btn,.hpb-btn,.dl-btn,.cta-big,.btn-register,.leadmag-btn,.kids-cta,.mm-btn,.w-cta,.web-btn,.web-pill,.lemonsqueezy-button{transition:transform .15s ease, box-shadow .15s ease;} .btn-primary:hover,.bk-btn:hover,.hpb-btn:hover,.dl-btn:hover,.cta-big:hover,.btn-register:hover,.leadmag-btn:hover,.kids-cta:hover,.mm-btn:hover,.w-cta:hover,.web-btn:hover,.web-pill:hover,.lemonsqueezy-button:hover{transform:translateY(-2px);} /* Button links must ignore the global orange/underline link-hover. Kill underline on all; keep intended color. */ .btn-primary:hover,.bk-btn:hover,.hpb-btn:hover,.dl-btn:hover,.cta-big:hover,.btn-register:hover,.leadmag-btn:hover,.kids-cta:hover,.mm-btn:hover,.w-cta:hover,.web-btn:hover,.web-pill:hover,.lemonsqueezy-button:hover{text-decoration:none;} .dl-btn.neon,.dl-btn.neon:hover{color:#fff;text-decoration:none;} .mm-btn:hover{color:var(--ink);} .mm-btn.primary:hover{color:#fff;} /* Inline-styled pill buttons (no class) must lift on hover too — movement only, catches every rounded anchor button. */ a[style*="border-radius:999px"]{transition:transform .15s ease, box-shadow .15s ease;} a[style*="border-radius:999px"]:hover{transform:translateY(-2px);} a[style*="border-radius: 999px"]{transition:transform .15s ease, box-shadow .15s ease;} a[style*="border-radius: 999px"]:hover{transform:translateY(-2px);} /* leadmag-btn is a colored button but never declared its text color -> was inheriting the orange link color. Force white. */ .leadmag-btn,.leadmag-btn:link,.leadmag-btn:visited,.leadmag-btn:hover,.leadmag-btn:active{color:#fff;text-decoration:none;} /* Footer middle column: center every link row (top rows were missing justify-content). */ footer.foot .foot-mid .foot-nav > span{ justify-content:center !important; text-align:center; width:100%; } /* Colored buttons keep white text on hover (were inheriting the orange link-hover color). */ .btn-primary:hover,.bk-btn:hover,.hpb-btn:hover,.cta-big:hover,.btn-register:hover,.kids-cta:hover,.w-cta:hover,.web-btn:hover,.lemonsqueezy-button:hover{color:#fff !important;}