/* ===================================================================== HSR-Tokens — global brand token layer (Brand Kit V3.0) ===================================================================== Site-wide COLOUR · TYPE · SHAPE · BUTTONS. Nothing else. ARCHITECTURE — why this is a TOKEN layer and not a pile of overrides --------------------------------------------------------------------- Elementor's Default Kit (post 9) holds 48,336 characters of global settings. Every widget on this site that is bound to a "global" colour or a "global" typography style paints itself from an `--e-global-*` CSS variable that the Kit defines. When Elementor leaves, those variables stop existing and every one of those components loses its colour and its font at the same moment. The fix is not to out-specify several hundred components. It is to redefine the VARIABLES. That turns "restyle 800 components" into "redefine 40 variables", and it is the single highest-leverage thing in this migration. LAYERS IN THIS FILE — all INERT. Custom properties and `.hsr-*` class rules only, so enqueuing it changes nothing that is on the site today. 1 Brand tokens the V3.0 palette, type scale, shape, elevation 2 Legacy remap old vocabulary -> new values (empty until WS11) 5 Buttons .hsr-btn* 6 Cards + surfaces .hsr-card, .hsr-section* 7 Student accents .hsr-child-* 8 Screen-reader utils 🔴 LAYERS 3 AND 4 LIVE IN assets/css/hsr-globals.css AND ARE OFF BY DEFAULT. They were split out on 2026-07-31 because they are NOT inert: Layer 3 --e-global-* overrides — beats Elementor's kit by cascade order and repaints every globally-bound widget on the site. Layer 4 bare-element typography (body, p, li, input, h1-h6, a) — repaints everything else. Enable at WS3: add_filter( 'hsr_enqueue_globals', '__return_true' ); ⚠️ The brand-kit page renders its own CSS examples with en-dashes (–) instead of double hyphens (--). That is the page's typography, not the intent. Real double hyphens are used throughout here. Source: docs/audits/BRAND-TOKENS_v3.0_2026-07-31.md ===================================================================== */ /* ===================================================================== LAYER 1 — BRAND TOKENS ===================================================================== Audience note, because it decides the judgement calls below: homeschool mothers, 20-40, busy, mostly on phones. "Warm, calm, reassuring — not corporate or clinical." Softer shapes, warmer neutrals, generous whitespace, one obvious next step per screen. ===================================================================== */ :root { /* ---- Brand blue scale. Identity preserved from V1. ---------------- */ --hsr-blue-900: #0A2A4E; /* deepest navy — footers, high-contrast text */ --hsr-blue-800: #0C3A6B; /* headings on light */ --hsr-blue-700: #0757A0; /* 🔵 PRIMARY — the anchor, kept exactly from V1 */ --hsr-blue-600: #1268B8; /* hover-lighten, links on dark */ --hsr-blue-500: #2E7FC9; /* interactive / focus */ --hsr-blue-200: #B9D6EE; /* borders, dividers on blue */ --hsr-blue-100: #E4EFF8; /* tint background */ --hsr-blue-50: #F2F8FC; /* faint section wash */ --hsr-navy: #16305C; /* headings, depth, certificate borders */ /* ---- Warm accents ------------------------------------------------- */ --hsr-coral-500: #F26D5B; /* signature accent — ONE emotional CTA per page */ --hsr-coral-600: #D9553E; /* coral hover / active */ --hsr-amber-500: #F5A623; /* star ratings, badges, small pops */ /* ---- Warm neutrals ------------------------------------------------ */ --hsr-ink: #26303B; /* headings + body — warmer than black */ --hsr-slate: #54606E; /* secondary text */ --hsr-muted: #8A94A0; /* meta, captions, placeholders */ --hsr-cream-50: #FBF8F4; /* warm page background */ --hsr-cream-100: #F5EFE7; /* warm section background */ --hsr-cool-100: #EEF4FA; /* cool blue-tinted section */ --hsr-line: #E7E3DD; /* borders */ --hsr-white: #FFFFFF; /* ---- Semantic ----------------------------------------------------- */ --hsr-success: #2E9E6B; --hsr-warning: #F5A623; --hsr-error: #D64545; --hsr-info: #0757A0; /* ---- Type --------------------------------------------------------- */ /* Poppins first, Inter as the immediate fallback — see hsr-fonts.css: Poppins is not in the 0.1.0 build, so headings resolve to Inter until it lands. Lato is the documented legacy fallback. */ --hsr-font-head: 'Poppins', 'Inter', 'Lato', system-ui, -apple-system, sans-serif; --hsr-font-body: 'Inter', 'Lato', system-ui, -apple-system, sans-serif; --hsr-fs-display: clamp(40px, 6vw, 56px); /* Measured from Elementor kit 9 on 2026-08-01 (WS3 / SOW 18.2). Desktop maxima ARE the live values - 44/34/26/22/18/16 - so at the 1160px container every clamp resolves byte-identical to today. The floors come from the site's OWN mobile scale, not from taste: matched widget pairs scale 22px -> 18px (ratio .82) at max-width 767px, and the hero headings sit at 37px against a 44px kit h1 (ratio .84). Kit 9 itself ships NO responsive typography, so after WS12 a bare h1 would land on a phone at 44px with nothing to override it. h4's floor is 19px, not the measured 18px, so that h4 stays larger than h5. */ --hsr-fs-h1: clamp(36px, 5.2vw, 44px); --hsr-fs-h2: clamp(28px, 4.0vw, 34px); --hsr-fs-h3: clamp(21px, 3.0vw, 26px); --hsr-fs-h4: clamp(19px, 2.6vw, 22px); --hsr-fs-h5: 18px; --hsr-fs-h6: 16px; --hsr-fs-body: 17px; --hsr-fs-small: 14px; --hsr-lh-body: 1.6; /* ---- Shape. 4pt spacing scale. ------------------------------------ */ --hsr-width: 1440px; /* content width */ --hsr-r-sm: 8px; --hsr-r-md: 12px; /* buttons */ --hsr-r-lg: 16px; /* cards */ --hsr-r-xl: 24px; --hsr-r-pill: 999px; --hsr-s-1: 4px; --hsr-s-2: 8px; --hsr-s-3: 12px; --hsr-s-4: 16px; --hsr-s-5: 20px; --hsr-s-6: 24px; --hsr-s-8: 32px; --hsr-s-10: 40px; --hsr-s-12: 48px; --hsr-s-16: 64px; --hsr-s-20: 80px; /* ---- Elevation. Soft, never hard borders. ------------------------- */ --hsr-sh-sm: 0 1px 2px rgba(38, 48, 59, .06), 0 1px 3px rgba(38, 48, 59, .08); --hsr-sh-md: 0 4px 12px rgba(38, 48, 59, .07), 0 2px 4px rgba(38, 48, 59, .05); --hsr-sh-lg: 0 12px 32px rgba(38, 48, 59, .10), 0 4px 8px rgba(38, 48, 59, .05); --hsr-sh-blue: 0 8px 24px rgba(7, 87, 160, .22); /* ---- Interaction -------------------------------------------------- */ --hsr-ease: cubic-bezier(.4, 0, .2, 1); --hsr-dur: .22s; --hsr-tap: 44px; /* minimum touch target — non-negotiable */ } /* ===================================================================== LAYER 2 — LEGACY VARIABLE REMAP ** the main event ** --------------------------------------------------------------------- Repoint whatever variable vocabulary the existing custom components already use at the new V3.0 values, so they repaint for free instead of being rewritten. ⚠️ WHY THE :not(#no-such-id) SELECTOR A CSS variable set on a DESCENDANT always beats one set on :root, no matter the specificity of the :root rule. So if any section on this site carries a scoped override like .some-section { --primary: #something !important } then a plain `:root { --primary: ... }` cannot reach inside it. Appending `:not(#no-such-id)` adds an ID's worth of specificity (1,0,1) without matching anything at all, which outranks a (0,1,0) class-scoped rule. Scoped to [class*="hsr-"] and the known app containers so we only pay for this on our own components, never across the whole DOM. 🔴 THIS LIST IS INTENTIONALLY EMPTY IN 0.1.0. HFT's equivalent block was built from a recon pass that grepped the live CSS for scoped `--var: value !important` overrides and enumerated all seven of them. That recon has NOT been done on homeschoolreports.com yet — the Attendance Redesign v3 (37.8 KB), Date Picker Consistency (21.7 KB) and Student Profile mobile (8.5 KB) snippets are the likely places. Guessing here would be worse than leaving it empty: a wrong remap silently repaints a component nobody is looking at. Fill this in during WS11, when those snippets are being read to be baked anyway. ===================================================================== */ /* :root:not(#no-such-id), [class*="hsr-"]:not(#no-such-id) { --primary: var(--hsr-blue-700); } */ /* ===================================================================== LAYER 5 — BUTTONS --------------------------------------------------------------------- V3.0 replaced V1's white-outline primary with a SOLID BLUE FILL — higher contrast, better conversion. Coral is the accent and it is ONE PER PAGE, reserved for the single most important action on the screen. Contrast, measured: white on blue-700 5.9:1 AA white on coral-500 3.6:1 AA for LARGE TEXT AND UI ONLY ink on white 13.2:1 AAA 🔴 Coral is never small body copy. Buttons, icons and large text only. Every button carries all five states: default, hover, active, focus, disabled. Minimum target 44x44. ===================================================================== */ .hsr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--hsr-s-2); min-height: var(--hsr-tap); padding: 13px 26px; border: 2px solid transparent; border-radius: var(--hsr-r-md); font-family: var(--hsr-font-head); font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--hsr-dur) var(--hsr-ease), border-color var(--hsr-dur) var(--hsr-ease), color var(--hsr-dur) var(--hsr-ease), box-shadow var(--hsr-dur) var(--hsr-ease), transform var(--hsr-dur) var(--hsr-ease); } .hsr-btn--primary { background: var(--hsr-blue-700); color: var(--hsr-white); box-shadow: var(--hsr-sh-blue); } .hsr-btn--primary:hover { background: var(--hsr-blue-800); color: var(--hsr-white); transform: translateY(-1px); } .hsr-btn--primary:active { background: var(--hsr-blue-900); transform: translateY(0); box-shadow: var(--hsr-sh-sm); } /* ONE per page. The single most important action. */ .hsr-btn--accent { background: var(--hsr-coral-500); color: var(--hsr-white); box-shadow: 0 8px 24px rgba(242, 109, 91, .26); } .hsr-btn--accent:hover { background: var(--hsr-coral-600); color: var(--hsr-white); transform: translateY(-1px); } .hsr-btn--accent:active { background: var(--hsr-coral-600); transform: translateY(0); } .hsr-btn--secondary { background: transparent; color: var(--hsr-blue-700); border-color: var(--hsr-blue-700); } .hsr-btn--secondary:hover { background: var(--hsr-blue-100); color: var(--hsr-blue-800); border-color: var(--hsr-blue-800); } .hsr-btn--ghost { background: transparent; color: var(--hsr-blue-700); padding-inline: var(--hsr-s-3); } .hsr-btn--ghost:hover { background: var(--hsr-blue-50); } /* Destructive. Used by the confirm-delete modals. */ .hsr-btn--danger { background: var(--hsr-error); color: var(--hsr-white); } .hsr-btn--danger:hover { background: #B93A3A; color: var(--hsr-white); } /* ===================================================================== 🔴 ELEMENTOR KIT SPECIFICITY GUARD - DO NOT REMOVE BEFORE WS12 --------------------------------------------------------------------- Elementor kit 9 emits `.elementor-kit-9 a { color:#0757A0 }`, specificity (0,1,1). Every .hsr-btn--* colour above is a SINGLE class, (0,1,0), so on any button that is an THE KIT WINS and the label is painted brand blue. On .hsr-btn--primary that is #0757A0 text on a #0757A0 background: the button renders as a solid blue rectangle with no visible label. Found live 2026-08-01 within minutes of the WS3 header flip - the header's "My students" / "Start free" button. It is the same failure the blog module hit (CLAUDE.md: `.hsr-blog a` beating `.hsr-btn-primary`), so it is a class of bug on this site, not one mistake. Doubling the class takes these to (0,2,0), which beats the kit while Elementor is here and is harmless once it is gone. Buttons are not links for colour purposes - that is the whole point of the guard. ===================================================================== */ .hsr-btn.hsr-btn--primary, .hsr-btn.hsr-btn--primary:link, .hsr-btn.hsr-btn--primary:visited, .hsr-btn.hsr-btn--primary:hover, .hsr-btn.hsr-btn--primary:focus, .hsr-btn.hsr-btn--accent, .hsr-btn.hsr-btn--accent:link, .hsr-btn.hsr-btn--accent:visited, .hsr-btn.hsr-btn--accent:hover, .hsr-btn.hsr-btn--accent:focus, .hsr-btn.hsr-btn--danger, .hsr-btn.hsr-btn--danger:link, .hsr-btn.hsr-btn--danger:visited, .hsr-btn.hsr-btn--danger:hover, .hsr-btn.hsr-btn--danger:focus { color: var(--hsr-white); } .hsr-btn.hsr-btn--secondary, .hsr-btn.hsr-btn--secondary:link, .hsr-btn.hsr-btn--secondary:visited, .hsr-btn.hsr-btn--ghost, .hsr-btn.hsr-btn--ghost:link, .hsr-btn.hsr-btn--ghost:visited { color: var(--hsr-blue-700); } .hsr-btn.hsr-btn--secondary:hover { color: var(--hsr-blue-800); } .hsr-btn--sm { min-height: 36px; padding: 8px 16px; font-size: 14px; } .hsr-btn--lg { min-height: 52px; padding: 16px 32px; font-size: 18px; } .hsr-btn--pill { border-radius: var(--hsr-r-pill); } .hsr-btn--block { display: flex; width: 100%; } .hsr-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hsr-white), 0 0 0 6px var(--hsr-blue-500); } .hsr-btn[disabled], .hsr-btn.is-disabled, .hsr-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } /* ===================================================================== LAYER 6 — CARDS + SURFACES --------------------------------------------------------------------- Brand Kit component principle 2: soft elevation, not hard borders. ===================================================================== */ .hsr-card { background: var(--hsr-white); border-radius: var(--hsr-r-lg); box-shadow: var(--hsr-sh-sm); padding: var(--hsr-s-6); } .hsr-card--raised { box-shadow: var(--hsr-sh-md); } .hsr-section { padding-block: var(--hsr-s-16); } .hsr-section--cream { background: var(--hsr-cream-100); } .hsr-section--cool { background: var(--hsr-cool-100); } .hsr-section--blue { background: var(--hsr-blue-50); } /* ===================================================================== LAYER 7 — STUDENT ACCENT COLOURS --------------------------------------------------------------------- UI categories, child 1 through 6. Used to colour-code student cards on the dashboard so a mother with four children can tell them apart at a glance. ⚠️ Never rely on colour alone (Brand Kit accessibility rule). Each student card must also carry the child's name and, where a status is shown, an icon or a text label. Colour is the shortcut, never the information. The sixth green is deliberately DEEPER than --hsr-success, so a student's accent colour is never mistaken for a success state. ===================================================================== */ :root { --hsr-child-1: #0757A0; /* blue */ --hsr-child-2: #D9553E; /* coral */ --hsr-child-3: #1E7E86; /* teal */ --hsr-child-4: #6B4E9E; /* violet */ --hsr-child-5: #B84A7A; /* rose */ --hsr-child-6: #3E8E5A; /* green — deeper than --hsr-success on purpose */ } .hsr-child-1 { --hsr-child: var(--hsr-child-1); } .hsr-child-2 { --hsr-child: var(--hsr-child-2); } .hsr-child-3 { --hsr-child: var(--hsr-child-3); } .hsr-child-4 { --hsr-child: var(--hsr-child-4); } .hsr-child-5 { --hsr-child: var(--hsr-child-5); } .hsr-child-6 { --hsr-child: var(--hsr-child-6); } /* ===================================================================== LAYER 8 — SCREEN-READER UTILITY ===================================================================== */ .hsr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hsr-skip-link:focus { position: fixed; top: var(--hsr-s-3); left: var(--hsr-s-3); z-index: 10000; width: auto; height: auto; clip: auto; padding: var(--hsr-s-3) var(--hsr-s-5); background: var(--hsr-blue-700); color: var(--hsr-white); border-radius: var(--hsr-r-md); } /* ════════════════════════════════════════════════════════════════════════════ * KIT OVERRIDE — BUTTON BACKGROUNDS. Found 2026-08-02 from Mark's screenshot of * the confirm-delete modal: "Keep it" rendered as a solid blue block with no * label at all. * * MEASURED, not guessed. `.hsr-btn.hsr-btn--secondary` (0,2,0) above already * sets color: blue-700 — half of this fix was made once before. But the * BACKGROUND is only ever set by `.hsr-btn--secondary` (0,1,0), which loses to * `.elementor-kit-9 button` (0,1,1). The result is blue-700 text on a blue-700 * background: the identical invisible-label failure this project already * recorded once for .hsr-btn--primary. * * ⚠️ WHY IT HID FOR SO LONG. The kit rule lists `button` and `input[type=…]` * but NOT `a`. So `` was always correct and only * `