/* ═══════════════════════════════════════════════════════════════════════════ KORVA THEME — the palette token layer. Session 6, Agent H1. LOAD ORDER MATTERS. base.html links this IMMEDIATELY AFTER style.css, and before any page-level sheet (surfaces.css / challenge.css / mock.css) that arrives through {% block head_extra %}. That ordering is the whole design: style.css defines the legacy tokens and ~2000 lines of components theme.css RE-POINTS those legacy tokens at the new blue palette surfaces.css reads --ink / --line / --surface and gets the new values free WHY RE-POINT RATHER THAN RENAME. Roughly thirty templates and three other stylesheets are written against --accent, --blue-600, --ink, --line and friends. Deleting those names would leave every one of those surfaces unstyled. So every legacy name below survives and simply resolves to a new value — the component layer re-skins from this block alone. ⚑ CONTRAST IS MEASURED, NOT ASSUMED. scratch_agent_h1/contrast.py computes the WCAG 2.1 ratio for all 27 foreground/background pairs this system ships and exits non-zero on any failure. The numbers in the comments below come from that script. If you change a colour here, RE-RUN IT. ⚑ THE ONE THAT BITES: --k-blue (#4f91ee) is 3.17:1 on white. It is a SURFACE colour. It must never carry text, and white text must never sit on top of it at normal size. A primary button filled #4f91ee with a 16px white label FAILS AA. This system therefore fills primary CTAs with --k-blue-text (#2f5fa8, 6.32:1 against white), which still reads unmistakably as "the blue". Both escape hatches were available; this file picks one and uses it everywhere so the rule never has to be re-litigated per button. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── The contract. Agent H2 consumes these exact names — do not rename. ── */ --k-blue: #4f91ee; /* 3.17 on white — SURFACE/CTA FILL ONLY, never text */ --k-blue-hover: #3f7cd4; /* derived: same hue, darker for hover states */ --k-blue-text: #2f5fa8; /* 6.32 on white — text OK, and our CTA fill */ --k-blue-deep: #1e4478; /* 9.75 on white — headings, dark bands */ --k-purple: #7e3df4; /* 5.44 on white — text OK, secondary CTA */ --k-purple-bright: #d93df4; /* 3.54 on white — LARGE TEXT ONLY (>=24px) */ --k-magenta: #ee4f91; /* 3.41 on white — LARGE TEXT ONLY */ --k-coral: #E63946; /* 4.17 on white — LARGE TEXT ONLY. The brief that introduced this colour claimed 4.8:1 and "WCAG-safe"; measured, it is 4.17 and is not safe for body copy. Treated as large-only. */ --k-bg: #FCFBFA; --k-card: #FFFFFF; --k-tint: #F8F7FC; --k-ink: #1A1128; /* 18.19 on white */ --k-muted: #6B6580; /* 5.53 on white */ /* ── Derived support ramp (not part of the H2 contract, safe to extend) ── */ --k-blue-50: #EEF4FD; --k-blue-100: #D9E7FB; --k-blue-200: #B7D0F6; --k-purple-50: #F3ECFE; --k-purple-100:#E4D5FC; --k-magenta-50:#FDEAF2; --k-coral-50: #FCE9EA; --k-line: #E7E3EF; --k-line-soft: #F0EDF6; --k-ink-faint: #9A94AB; /* ═══ LEGACY TOKENS, RE-POINTED ═══ Same names style.css and ~30 templates already use; new values. Nothing goes unstyled, and every legacy component inherits the blue palette. */ /* Surfaces — off-white, no longer cream */ --bg: #FCFBFA; --bg-soft: #F8F7FC; --surface: #FFFFFF; --surface-elev: #FFFFFF; /* Brand ramp. The blue-* names were warm-orange aliases; they are blue again and the names finally mean what they say. */ --blue-900: #12294a; --blue-700: #1e4478; --blue-600: #2f5fa8; /* PRIMARY — text-safe, and the CTA fill */ --blue-500: #4f91ee; /* surface blue */ --blue-100: #D9E7FB; --blue-50: #EEF4FD; /* Semantic accents */ --accent: #2f5fa8; /* was #E85D2F. Text-safe blue. */ --accent-hover: #1e4478; --accent-soft: #EEF4FD; --accent-border: #B7D0F6; --terracotta: #7e3df4; /* legacy name, now the purple secondary */ --terracotta-soft:#F3ECFE; /* Supporting */ --mint: #1f7a5c; --mint-50: #E6F4EF; --gold: #8a6a12; --gold-50: #FAF3E0; --coral: #E63946; --coral-50: #FCE9EA; --lilac: #7e3df4; --lilac-50: #F3ECFE; /* Text */ --ink: #1A1128; --ink-soft: #45405A; --ink-mute: #6B6580; --ink-faint:#9A94AB; /* Lines */ --line: #E7E3EF; --line-soft:#F0EDF6; /* Shadows — cool-tinted now that the ground is off-white, not cream */ --shadow-xs: 0 1px 2px rgba(30, 20, 60, 0.04); --shadow-sm: 0 1px 3px rgba(30, 20, 60, 0.05), 0 4px 12px rgba(30, 20, 60, 0.04); --shadow-md: 0 2px 6px rgba(30, 20, 60, 0.05), 0 12px 28px rgba(30, 20, 60, 0.07); --shadow-lg: 0 6px 14px rgba(30, 20, 60, 0.07), 0 24px 56px rgba(30, 20, 60, 0.10); --shadow-glow: 0 6px 24px rgba(79, 145, 238, 0.22); --shadow-success: 0 6px 24px rgba(31, 122, 92, 0.18); } /* ═══════════════════════════════════════════════════════════════════════════ THE OTHER TOKEN BLOCKS — style.css has FOUR, not one, and re-pointing only :root leaves three quarters of the app on the old palette. ⚑ `body.theme-kid` (style.css ~1595) re-declares --bg, --ink, --line, --primary and the shadows ON THE BODY ELEMENT. Custom properties inherit, and a declaration on beats one on :root for everything inside — so every logged-in kid surface would have kept the cream/orange palette no matter what :root above says. This is the block that would have made Agent H2's surfaces look broken while consuming the correct token names. Same specificity as style.css's rule, but this file loads later, so it wins. ═══════════════════════════════════════════════════════════════════════════ */ body.theme-kid { --bg: #FCFBFA; --bg-soft: #F5F3FA; /* a fractionally warmer/softer tint than the parent surface, preserving the original intent that a kid page reads as the same product, one shade apart */ --surface: #FFFFFF; --line: #E7E3EF; --line-soft: #F0EDF6; --ink: #1A1128; --ink-soft: #45405A; --ink-mute: #6B6580; --ink-faint: #9A94AB; /* SINGLE primary, text-safe. --primary is used as a text and fill colour in 46 places, so it cannot be #4f91ee (3.17:1). */ --primary: #2f5fa8; --primary-dark: #1e4478; --primary-light:#4f91ee; --primary-50: #EEF4FD; --primary-100: #D9E7FB; --mint: #1f7a5c; --mint-50: #E6F4EF; --error: #C1273A; --error-50: #FBE9EB; --shadow-xs: 0 1px 2px rgba(30, 20, 60, 0.04); --shadow-sm: 0 1px 3px rgba(30, 20, 60, 0.05), 0 4px 12px rgba(30, 20, 60, 0.04); --shadow-md: 0 2px 6px rgba(30, 20, 60, 0.05), 0 12px 28px rgba(30, 20, 60, 0.07); --shadow-lg: 0 6px 14px rgba(30, 20, 60, 0.07), 0 24px 56px rgba(30, 20, 60, 0.10); } /* The parent nav also hardcoded the cream instead of reading --bg. */ body.theme-parent .nav { background: rgba(252, 251, 250, 0.88); } /* ── Section accents. Four hues that must stay DISTINGUISHABLE from each other (they are an orientation cue telling a child which section they are in) while living in the new palette. All four are used as TEXT, so all four clear 4.5:1 on white — the old set was chosen against cream and two of them (ochre #B8860B, terracotta #C4653A) do not. Measured in scratch_agent_h1/contrast.py. ── */ :root { --sec-reading: #2f5fa8; /* blue 6.32 */ --sec-quant: #1f7a5c; /* teal 4.95 */ --sec-abstract: #7e3df4; /* purple 5.44 */ --sec-writing: #b3327c; /* magenta 5.24 */ --sec-reading-soft: #EEF4FD; --sec-quant-soft: #E6F4EF; --sec-abstract-soft: #F3ECFE; --sec-writing-soft: #FCEAF4; --diff-hard-bg: #F3ECFE; --diff-hard-fg: #6428c9; --diff-challenge-bg: #FCE9EA; --diff-challenge-fg: #A3232F; --figure-bg: #FDFCFF; } /* Browser UI chrome follows the new ground colour. */ meta[name="theme-color"] { color: #FCFBFA; } /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHY Fraunces (editorial display) + Manrope (body). base.html requests both from Google Fonts, but the CDN is a single point of failure the app must survive: every stack below ends in real system faces, so an unreachable CDN degrades to a correct-looking page rather than to Times New Roman. ═══════════════════════════════════════════════════════════════════════════ */ :root { --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-ui: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body { background: var(--k-bg); color: var(--k-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Warmth comes from weight, line-height and letter-spacing rather than from a warm hue — the ground is cool off-white now. */ h1, h2, h3, .k-display, .k-serif, .ks-title, .ks-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.021em; line-height: 1.13; color: var(--k-ink); } h4, h5, h6 { font-family: var(--font-body); font-weight: 700; color: var(--k-ink); } p, li { line-height: 1.62; } /* ═══════════════════════════════════════════════════════════════════════════ THE BRAND MARK Was an orange rounded square with a white "K"; now blue. The mark is a SURFACE, so --k-blue is legitimate here — but the "K" sitting on it is text, so the tile is filled with --k-blue-text (6.32:1) rather than --k-blue. ═══════════════════════════════════════════════════════════════════════════ */ .brand-mark, .nav-brand .brand-mark, .knav-brand .brand-mark { background: var(--k-blue-text); background-image: none; color: #fff; border: 0; box-shadow: 0 2px 8px rgba(47, 95, 168, 0.28); } .nav-brand, .knav-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--k-ink); } /* ═══════════════════════════════════════════════════════════════════════════ BUTTONS — the contrast decision, applied once. Primary = filled --k-blue-text, white label → 6.32:1 at any size. Secondary= white surface, --k-blue-text label, blue border. Purple = filled --k-purple, white label → 5.44:1 at any size. ═══════════════════════════════════════════════════════════════════════════ */ .k-btn--primary, .ks-btn--primary, .btn-primary { background: var(--k-blue-text); border-color: var(--k-blue-text); color: #fff; } .k-btn--primary:hover, .ks-btn--primary:hover, .btn-primary:hover { background: var(--k-blue-deep); border-color: var(--k-blue-deep); color: #fff; } .k-btn--secondary, .ks-btn--secondary { background: var(--k-card); border: 1.5px solid var(--k-blue-200); color: var(--k-blue-text); } .k-btn--secondary:hover, .ks-btn--secondary:hover { background: var(--k-blue-50); border-color: var(--k-blue); color: var(--k-blue-deep); } /* Focus ring — one visible, high-contrast ring for keyboard users everywhere. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--k-purple); outline-offset: 2px; border-radius: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ SURFACES.CSS BRIDGE surfaces.css owns the --ks-* namespace and deliberately redefines no style.css token. That guarantee is preserved: this block re-points the --ks-* values themselves so the two sheets agree on one palette instead of two. Names unchanged, so surfaces.css keeps working untouched. ═══════════════════════════════════════════════════════════════════════════ */ :root { --ks-blue: #4f91ee; --ks-blue-deep: #2f5fa8; --ks-blue-ink: #1e4478; --ks-blue-50: #EEF4FD; --ks-blue-100: #D9E7FB; --ks-purple: #7e3df4; --ks-purple-deep: #5f27c9; --ks-purple-50: #F3ECFE; } /* ═══════════════════════════════════════════════════════════════════════════ BUGS INHERITED FROM SESSION 5, FIXED HERE Both were found by rendering /pricing and /how-it-works in a real browser at five widths — the first time anyone had looked at those two pages. ═══════════════════════════════════════════════════════════════════════════ */ /* BUG 1 — the "what's included" list drew a HOLLOW RING as its marker, which reads as an UNCHECKED checkbox. On a list headed "What the subscription includes", every item looked switched off. It is now a tick. ⚑ SELECTOR SPECIFICITY IS LOAD-BEARING HERE. surfaces.css arrives through {% block head_extra %}, i.e. AFTER this file, so its `.ks-list li::before` (0,1,2) would beat an identical selector stated here no matter what this file says. Qualifying with the element name lifts these to (0,1,3) so they win on specificity instead of on order — which also means surfaces.css stays untouched and keeps its "redefines nothing" guarantee. */ ul.ks-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--k-blue-text); border: 0; } /* The tick itself: two borders on a rotated box, so it stays a pure-CSS mark with no font or image dependency. */ ul.ks-list li::after { content: ""; position: absolute; left: 5px; top: 9px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 1.9px 1.9px 0; transform: rotate(43deg); } /* BUG 2 — the hero band and the page body disagreed on their left gutter by exactly 18px, so every heading sat 18px right of the hero above it. Cause: box-sizing is border-box, so .ks-page's 18px padding is INSIDE its 960px max-width (content starts at (vw-960)/2 + 18), while .ks-hero-band is full-bleed with 18px padding and a 960px centred inner (content starts at (vw-960)/2). Giving the band's inner the same padding aligns the two. */ .ks-hero-band__inner { padding: 0 18px; } @media (max-width: 620px) { /* .ks-page drops to 15px at this width; the band must follow or the two re-diverge exactly where the misalignment is most visible. */ .ks-hero-band__inner { padding: 0 15px; } } /* BUG 3 — at narrow widths the footer stacks to a column and the "·" separator between the brand and the meta line was left stranded on a line of its own. It is decorative, so it is simply removed once the row has stacked. */ @media (max-width: 720px) { .korva-footer-sep { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ MARKETING LAYER (`mk-`) — landing, pricing and how-it-works only. Namespaced so it cannot reach the logged-in surfaces Agent H2 owns. ═══════════════════════════════════════════════════════════════════════════ */ .mk-band { padding: 84px 22px; } .mk-band--tint { background: var(--k-tint); } .mk-band--card { background: var(--k-card); } .mk-band--deep { background: var(--k-blue-deep); color: #fff; } .mk-band--deep h2, .mk-band--deep h3 { color: #fff; } .mk-band--deep p { color: #cfe0f8; } /* 7.28:1 on the deep band */ .mk-inner { max-width: 1120px; margin: 0 auto; } .mk-inner--narrow { max-width: 820px; } .mk-eyebrow { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--k-purple); } .mk-band--deep .mk-eyebrow { color: #b7d0f6; } .mk-display { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.15rem, 5.4vw, 4rem); line-height: 1.06; letter-spacing: -0.032em; color: var(--k-ink); } .mk-band--deep .mk-display { color: #fff; } .mk-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3.1vw, 2.4rem); line-height: 1.14; letter-spacing: -0.024em; } .mk-lead { font-size: clamp(1.03rem, 1.5vw, 1.2rem); line-height: 1.62; color: var(--k-muted); } .mk-band--deep .mk-lead { color: #cfe0f8; } .mk-measure { max-width: 62ch; } /* The one place --k-magenta earns its keep: a display-size accent word. It is 3.30:1, which clears the 3:1 large-text bar only because .mk-display is never smaller than 2.15rem (34px). Do not reuse this class at body size. */ .mk-accent-word { color: var(--k-magenta); font-style: italic; } .mk-section-head { max-width: 68ch; margin: 0 auto 46px; text-align: center; } .mk-section-head .mk-lead { margin-top: 14px; } .mk-grid { display: grid; gap: 22px; } .mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mk-card { background: var(--k-card); border: 1px solid var(--k-line); border-radius: 22px; padding: 28px 26px; box-shadow: var(--shadow-sm); } .mk-card h3 { font-family: var(--font-display); font-size: 1.22rem; margin-bottom: 10px; } .mk-card p { color: var(--k-muted); font-size: 15px; } .mk-feature__art { width: 78px; height: 78px; display: block; margin-bottom: 16px; } .mk-hero__art { width: 100%; height: auto; max-width: 520px; display: block; } .mk-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; } .mk-hero__copy { min-width: 0; } .mk-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .mk-tag { display: inline-block; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px; background: var(--k-blue-50); color: var(--k-blue-text); border: 1px solid var(--k-blue-100); } .mk-tag--purple { background: var(--k-purple-50); color: var(--k-purple); border-color: var(--k-purple-100); } /* ── Question preview: a real banked item, shown as the child meets it ── */ .mk-q { background: var(--k-card); border: 1px solid var(--k-line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md); } .mk-q__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 13px 18px; background: var(--k-tint); border-bottom: 1px solid var(--k-line); font-family: var(--font-ui); font-size: 12px; color: var(--k-muted); } .mk-q__body { padding: 22px 20px 24px; } .mk-q__stem { font-size: 15.6px; line-height: 1.55; color: var(--k-ink); margin-bottom: 16px; } .mk-q__opts { display: flex; flex-direction: column; gap: 9px; } .mk-q__opt { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid var(--k-line); border-radius: 13px; padding: 11px 13px; font-size: 14.6px; line-height: 1.48; color: var(--k-ink); background: var(--k-card); } .mk-q__opt.is-correct { border-color: var(--k-blue); background: var(--k-blue-50); } .mk-q__key { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); font-size: 12px; font-weight: 700; background: var(--k-card); border: 1.5px solid var(--k-line); color: var(--k-muted); } .mk-q__opt.is-correct .mk-q__key { background: var(--k-blue-text); border-color: var(--k-blue-text); color: #fff; } .mk-q__why { margin-top: 16px; padding: 14px 16px; background: var(--k-purple-50); border-left: 3px solid var(--k-purple); border-radius: 0 12px 12px 0; font-size: 14.2px; line-height: 1.58; color: var(--k-ink); } .mk-q__why strong { color: var(--k-purple); } /* ── Passage sample ── */ .mk-passage { font-family: var(--font-display); font-size: 15.6px; line-height: 1.72; color: var(--k-ink); } .mk-passage p + p { margin-top: 13px; } /* ── Dashboard preview ── */ .mk-dash { background: var(--k-card); border: 1px solid var(--k-line); border-radius: 22px; padding: 26px 24px; box-shadow: var(--shadow-md); } .mk-dash__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .mk-dash__label { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); } .mk-dash__value { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; color: var(--k-blue-deep); line-height: 1; } .mk-skill + .mk-skill { margin-top: 15px; } .mk-skill__top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; color: var(--k-ink); } .mk-skill__top span:last-child { color: var(--k-muted); font-variant-numeric: tabular-nums; } .mk-meter { height: 9px; border-radius: 999px; background: var(--k-line-soft); overflow: hidden; } .mk-meter__fill { height: 100%; border-radius: 999px; background: var(--k-blue); } .mk-meter__fill--strong { background: var(--k-blue-text); } .mk-meter__fill--soft { background: var(--k-purple); } /* ── Trust markers ── */ .mk-trust { display: flex; gap: 14px; align-items: flex-start; } .mk-trust__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: var(--k-blue-50); display: grid; place-items: center; } .mk-trust__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--k-blue-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mk-trust h3 { font-size: 1.02rem; margin-bottom: 5px; font-family: var(--font-body); font-weight: 700; } .mk-trust p { font-size: 14.2px; color: var(--k-muted); line-height: 1.55; } /* ── Independence notice ── */ .mk-note { border-left: 3px solid var(--k-purple); background: var(--k-purple-50); border-radius: 0 12px 12px 0; padding: 15px 18px; font-size: 14.2px; line-height: 1.6; color: var(--k-ink); } .mk-note strong { color: var(--k-purple); } /* ── Hero fact strip ── */ .mk-facts { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--k-line); } .mk-fact { display: flex; flex-direction: column; gap: 3px; } .mk-fact__n { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--k-blue-deep); letter-spacing: -0.03em; } .mk-fact__l { font-size: 13px; color: var(--k-muted); max-width: 17ch; line-height: 1.42; } /* ── Sample block: passage beside its question ── */ .mk-sample { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .mk-cite { font-size: 13px; color: var(--k-muted); line-height: 1.55; margin-top: 12px; } .mk-stimulus { background: var(--k-tint); border: 1px solid var(--k-line); border-radius: 12px; padding: 13px 15px; font-size: 15px; line-height: 1.55; color: var(--k-ink); margin-bottom: 15px; } /* Interactive option buttons in the landing preview. They are