/* ============================================================================ * Heliomath APP — the authenticated (logged-in) brand layer. * * Carved VERBATIM from the retired brand override (brands/heliomath.css): these * were the only rules it still uniquely provided, all on logged-in surfaces — * - .learner-profile-area — account / settings / subscription pages * - .interstitial — answer-history-consent + account-dissolution * - .onboarding-survey-area — post-signup "how did you hear about us" * - .start-free-trial-area / .payment-details-area — the post-signup funnel * - .ghelp_grokkoli_icon* / .icon_grokkoli_logo — the question-page icons * * Loaded on alpha_base for Heliomath at the OLD brand-override slot: after * figureone.css (so the !important icon rules win) and before the account-access * flow (so the funnel rules that account_access.css also sets resolve to * account_access, exactly as they did against the override). Gated OFF the public * solid-nav content pages, which carry none of these classes. * * SELF-CONTAINED PALETTE: these rules consume the legacy --helio-* tokens, and the * alpha_base app pages do NOT load the marketing layer (heliomath_marketing.css), so * the raw palette is declared here (verbatim from the old override :root). This is the * exploration palette, kept AS-IS so the logged-in pages render pixel-identically; * migrating these onto the Sunset tokens is a later step (with the app foundation). * ========================================================================== */ :root { /* Solar — CTAs, highlights, progress, achievement, logo */ --helio-sunlight: #FFC44D; --helio-solar-gold: #F6B21A; --helio-amber: #E89611; /* Navy — headings, icons, nav, graphs */ --helio-midnight: #0D1B2A; --helio-slate: #31475E; --helio-steel: #5F7388; /* Backgrounds — keep slightly sunlit (no pure gray) */ --helio-cream: #FCF6E9; --helio-cloud: #F7F5F0; --helio-white: #FFFFFF; /* Blue accent — links, secondary buttons, active states, math viz */ --helio-sky: #4A90E2; --helio-soft-sky: #87BFFF; /* Text */ --helio-muted: #7A8A99; /* Semantic */ --helio-success: #2EAD72; --helio-warning: #F59E0B; --helio-error: #E05252; --helio-info: #4A90E2; } /* --- Account section (.learner-profile-area): the logged-in account pages — * learners (learner_profiles.html), account settings (account_settings.html) * and subscription (subscription.html). All three extend alpha_base. The * shared chrome is Grokkoli blue/green (blue primary buttons, green setting * labels + "on" toggles, green free-trial card); re-theme to the Heliomath * ramp. Scoped to .learner-profile-area so nothing leaks. --- */ .learner-profile-area h1 { color: var(--helio-midnight); } .learner-profile-area .settings-box h3 { color: var(--helio-midnight); } /* Setting labels are Grokkoli green — recolor to navy. */ .learner-profile-area .setting-set h5, .learner-profile-area .setting-set.global h5 { color: var(--helio-slate); } /* Primary buttons are Grokkoli blue with white text → brand gold gradient + navy * text (matches the auth/scholarship primaries). Two classes out-specify base. */ .learner-profile-area .btn-grokkoli-primary { background-color: var(--helio-solar-gold); background-image: linear-gradient(180deg, var(--helio-sunlight), var(--helio-solar-gold)); color: var(--helio-midnight); border: none; } .learner-profile-area .btn-grokkoli-primary:hover, .learner-profile-area .btn-grokkoli-primary:focus, .learner-profile-area .btn-grokkoli-primary:active { background-color: var(--helio-amber); background-image: linear-gradient(180deg, var(--helio-solar-gold), var(--helio-amber)); color: var(--helio-midnight); } /* Non-colour focus/press affordance (WCAG 1.4.1 "use of colour" + 2.4.7 focus visible): * the gradient shift above is colour-only, so add a SHAPE signal — a detached ring on focus * plus a press nudge. Ring is SKY-BLUE (--helio-sky), not the button's gold: gold on this * layer's light page (--helio-cloud) is only ~1.7:1 — too faint to be a reliable indicator — * whereas sky clears ~3:1 AND matches the focus hue this layer already uses on its form * inputs (.form-control:focus below), so buttons and fields indicate focus the same way. * (Only fires on focusable elements: the