: the visible pill. display:inline-block comes from
* Bootstrap's .btn, but as a flex item of .main-cta its USED display is `block`. */
.light-hero .btn {
display: inline-block;
box-sizing: border-box;
padding: 14px 34px;
margin-bottom: 20px;
border: 1px solid transparent;
font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
font-size: calc(1.05rem + 0.4vw);
line-height: 1.2;
color: var(--midnight);
-webkit-user-select: none;
user-select: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* Home hero CTA → navy fill + white label. Two things the naive rule misses: (1) the orange
* fill is the .btn--flare ember→marigold GRADIENT (a background-IMAGE from the base .btn rule),
* so `background` shorthand — not background-color — is needed to clear it; (2) the base
* `.btn:not(.btn-grokkoli-primary):not(.filter)` is (0,3,0), so the #home prefix is needed to
* out-specify it. (The button is `
` — the .btn IS the anchor.) */
#home .light-hero .btn {
background: var(--azure-deeper); /* navy — shorthand also clears the ember gradient */
--btn-ring-color: var(--azure-deeper); /* press/focus ring = the exact navy fill (not the base's cornflower-soft) */
color: var(--text-on-dark-fill); /* white label */
font-size: var(--type-h3-size);
opacity: 1;
}
/* Narrow the headline/paragraph as the viewport shrinks so they don't run under
* the right-justified hero image. The 1100px block is declared after the 1250px
* block so it wins below 1100px (both match; later declaration breaks the tie). */
@media (max-width: 1250px) {
.light-hero .content-container h2,
.light-hero .content-container p {
max-width: 500px;
}
}
@media (max-width: 1100px) {
.light-hero .content-container h2,
.light-hero .content-container p {
max-width: 70vw;
}
}
/* Below 1000px the hero drops the manipulatives image entirely and shows just
* the centered copy on the cream field — simplest and guaranteed overlap-free on
* small screens (the image only reads well at desktop widths). */
@media (max-width: 999px) {
.above-the-fold-splash.light-hero {
min-height: 0;
padding-top: calc(4rem + 1vw); /* clear the fixed-top nav */
padding-bottom: calc(2rem + 2vw);
}
.light-hero .background-img-div {
display: none; /* no hero image on mobile */
}
}
/* --- Subtle hero entrance (skipped for reduced-motion users) --- */
@media (prefers-reduced-motion: no-preference) {
.light-hero .content-container h1,
.light-hero .content-container h2,
.light-hero .content-container p,
.light-hero .content-container .main-cta {
animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.light-hero .content-container h2 { animation-delay: 0.08s; }
.light-hero .content-container p { animation-delay: 0.16s; }
.light-hero .content-container .main-cta { animation-delay: 0.24s; }
}
@keyframes rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================================
* EDUCATORS PAGE (/educators)
*
* Fixes for educators-only sections still on the legacy grokkoli_educators.css /
* grokkoli_public.css layout. This file now loads on the educators page too
* (home_educators.html), after the legacy CSS, so these win.
* ========================================================================== */
/* "Performs on par with high-dosage tutoring": the framed learner photo is forced
into a fixed 30vw×20vw box by grokkoli_educators.css, which stretched it off its
real aspect ratio. Fill the frame proportionally (crop, don't distort). */
#hit-alternative .visual {
margin-left: 3rem;
}
#hit-alternative .visual img {
object-fit: cover;
}
/* Copy | image ROW. This was grokkoli_educators.css's #hit-alternative
* .standard-brochure-module rule (display:flex; space-between); that legacy class is
* dropped from the Heliomath markup — it also blocked mp-section__inner's width cap —
* so the row is reproduced here on the .mp-section__inner container (now width-capped
* to the design-system measure). Stacks below 800px. The .copy / .visual sizing still
* comes from grokkoli_educators.css for now. */
#hit-alternative .mp-section__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 800px) {
#hit-alternative .mp-section__inner {
flex-direction: column;
align-items: center;
}
/* Stacked: the image is now BELOW the copy, not beside it — so the 3rem LEFT margin (which
spaced it off the text on the right) only shoves it off-centre. Drop it and use a TOP
margin instead, so the wrapped image sits aligned with a clear gap above it. */
#hit-alternative .visual {
margin-left: 0;
margin-top: var(--space-lg);
}
}
/* Classroom deployment — checklist with ✓ markers (was grokkoli_educators.css's
* #classroom-deployment ul + the retired brand override's ✓ colour). The section is an
* mp-section--sunken band; heading/body colours come from heliomath_base. */
#classroom-deployment ul {
list-style: none;
padding-left: 0;
margin-bottom: var(--space-lg);
}
#classroom-deployment ul li {
position: relative;
padding-left: 1.9em;
margin-top: var(--space-sm);
}
#classroom-deployment ul li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--accent-primary);
font-weight: var(--font-weight-bold);
}
/* Centre the "Contact Us" CTA under the checklist (the .main-cta is otherwise
* inline / left-aligned). */
#classroom-deployment .main-cta {
display: flex;
justify-content: center;
}
/* ESSA certification — the Credly badge sits beside the copy (was
* grokkoli_educators.css's #evidence .standard-brochure-module flex row). Stacks
* and centres below 640px. */
#evidence .mp-section__inner {
display: flex;
align-items: center;
gap: var(--space-lg);
}
#evidence .badge {
flex-shrink: 0; /* keep the fixed-width badge from being squeezed by the copy */
}
@media screen and (max-width: 640px) {
#evidence .mp-section__inner {
flex-direction: column;
text-align: center;
}
}
/* Comparison table (families home + educators now share this table). It sits on
the dark-navy band (.dark-blue-background = --midnight). Cell text lost its
colour when grokkoli_base.css was snipped (the legacy --main-* vars are gone)
→ dark-on-dark; on dark the standard text is cream. The ✗ marks stay coral/gold. */
#traditional-tutoring-comparison td,
#traditional-tutoring-comparison th,
#traditional-tutoring-comparison p {
color: var(--text-on-dark);
}
/* Row/column dividers = the section's own midnight background (a touch thicker),
so the cells read as separated tiles rather than a light grid. Id-scoped
(#home #…), so these are the definitive divider rules now the override is gone. */
#home #traditional-tutoring-comparison tr:not(:last-child) td,
#home #traditional-tutoring-comparison tr:not(:last-child) th,
#home #traditional-tutoring-comparison th {
border-bottom: 3px solid var(--midnight);
}
#home #traditional-tutoring-comparison td:not(:last-child),
#home #traditional-tutoring-comparison th:not(:last-child) {
border-right: 3px solid var(--midnight);
}
/* The "Heliomath" column header → cornflower-soft (--link-on-dark), matching the ✓ marks.
A lighter cornflower than --accent-primary so it clears more contrast on the midnight band
(~5.3:1 vs ~4:1). Id-scoped, and grokkoli_base (which !important-colours these legacy
.accent-color-* classes) isn't loaded on the public #home pages, so no !important. */
#home #traditional-tutoring-comparison th.accent-color-light-winter-green {
color: var(--link-on-dark);
}
/* Heliomath column background tint → cornflower instead of the old gold, one flat
very-light wash across the whole column (header + cells the same). Raw rgba
because it's a low-alpha derived shade; rgb(80,129,243) = --cornflower. */
#home #traditional-tutoring-comparison th:last-child,
#home #traditional-tutoring-comparison td:last-child {
background-color: rgba(80, 129, 243, 0.05);
}
/* ============================================================================
* COMPARISON TABLE — layout ported from grokkoli_public.css
*
* The comparison band's markup still uses the legacy wrappers
* .standard-brochure-module-container (its band padding) and
* .centered-standard-brochure-module (the centred, width-capped inner that holds
* the heading + table). Both lived in grokkoli_public.css, so without it the whole
* block lost its padding (text ran to the window edge) and its centring. Rather
* than recreate those global legacy classes, reproduce just this section's layout,
* scoped to its id. Colours/borders for the cells are in the block above; the dark
* band is #home .dark-blue-background in heliomath_marketing.css. Rethemed onto the
* spacing tokens so it shares the page gutter with the .mp-section folds; the cell
* padding keeps its fluid calc (no token for cell padding).
* ========================================================================== */
#traditional-tutoring-comparison {
text-align: center;
padding: var(--space-2xl) var(--space-gutter);
}
#traditional-tutoring-comparison .centered-standard-brochure-module {
display: flex;
flex-direction: column;
align-items: center;
max-width: var(--mp-content-max);
margin-left: auto;
margin-right: auto;
}
#traditional-tutoring-comparison table {
margin: var(--space-lg) 0 var(--space-2xs);
font-size: 105%;
}
#traditional-tutoring-comparison th, #traditional-tutoring-comparison td {
border-radius: 5px;
background: rgba(255, 255, 255, 0.08);
}
#traditional-tutoring-comparison th {
padding: var(--space-md) calc(10px + 2vw); /* vertical bumped one spacer step (--space-md) for breathing room */
font-size: var(--type-h4-size);
}
#traditional-tutoring-comparison th:first-child {
background: none;
}
/* Body cells read as left-aligned copy; only the column headers ( in the
* header row) keep the section's centred alignment. */
#traditional-tutoring-comparison td {
padding: var(--space-md) calc(10px + 2vw); /* vertical bumped one spacer step (--space-md) for breathing room */
text-align: left;
}
/* Comparison — accent COLOURS. The section TITLE now uses the .text-flare utility
* (peach on the dark band, via the --flare-* context tokens in components). The
* ✓/✗ marks and the Heliomath column header still carry the legacy accent-color-*
* classes, so they keep their id-scoped colours here until that markup migrates. */
#home #traditional-tutoring-comparison td .accent-color-light-winter-green {
color: var(--link-on-dark); /* ✓ marks — cornflower-soft, matches the Heliomath column header (lighter for contrast on the dark band) */
}
#home #traditional-tutoring-comparison .accent-color-gold {
color: var(--marigold); /* ✗ marks — warm */
}
/* Both comparison titles → --link-on-dark (cornflower-soft), so they read with the same
contrast on the midnight band as the ✓ marks + Heliomath column header. The families (home)
comparison titles its with the .text-accent utility (which otherwise resolves to the
darker --accent-primary); the EDUCATOR comparison (comparison_to_mass_tutoring.html) uses the
legacy .accent-color-light-winter-green class instead (which otherwise falls back to dark-on-
dark, invisible). Cover both here. */
#home #traditional-tutoring-comparison h2.text-accent,
#home #traditional-tutoring-comparison h2.accent-color-light-winter-green {
color: var(--link-on-dark);
}
/* Below ~440px the 3-column table's min-content (header words + cell padding) starts to
* outgrow the space left after the section gutter, so the grid clips at both edges. Two
* space-eaters dominate at this width: the section gutter (--space-gutter ≈ 40px/side at
* 410px) and the cell padding (~18px/side) — so pull both in. And switch the cell
* font-size to a vw-LED value so it keeps shrinking as the viewport narrows (the same
* idea as the pricing plan headers), which trims the text column too. Scoped to this
* section; only bites below the breakpoint, so wider screens are untouched. */
@media screen and (max-width: 440px) {
#traditional-tutoring-comparison {
padding-left: calc(8px + 1vw);
padding-right: calc(8px + 1vw);
}
#traditional-tutoring-comparison th,
#traditional-tutoring-comparison td {
padding: var(--space-sm) calc(4px + 1vw);
}
/* Font sizes anchored to what fits at 320px (body ~15px, header ~16px). A gentler vw
slope than before with a bigger fixed floor, so the text drops less steeply as the
viewport narrows. Each climbs back to ~its normal size by the 440px breakpoint
(≈18px / ≈19px there), so the step at the breakpoint stays small. */
#traditional-tutoring-comparison td {
font-size: calc(6px + 2.8vw); /* ≈15px @320 → ≈18.3px @440 */
}
#traditional-tutoring-comparison th {
font-size: calc(8px + 2.5vw); /* ≈16px @320 → ≈19px @440 (a step larger) */
}
}
/* ============================================================================
* DEMOS — ported from the retired brand override
*
* Own white band with a centred section header (eyebrow + title + sub) and a
* one-video-at-a-time carousel (JS-driven arrows/dots over a scroll-snap track).
* Rethemed onto Sunset tokens. Carousel structure kept verbatim (floor-safe: no
* aspect-ratio / :has(); JS does the smooth scroll).
* ========================================================================== */
#home #demos {
background-color: var(--surface-elevated);
padding-top: var(--space-2xl);
padding-bottom: var(--space-2xl);
}
#home .demos-head {
padding-left: var(--space-gutter);
padding-right: var(--space-gutter);
}
#home .section-sub {
margin: 14px auto 0;
line-height: 1.6;
}
/* The "Works for every learner" section's lead sub-line read too small at body size —
* bump it to H4 size. Scoped to this section (home only) so other section subs are
* unaffected. */
#home #success-story-sample .section-sub {
font-size: var(--type-h4-size);
}
/* Carousel — scroll-snap track, one slide per view at every width. */
#home .demo-carousel {
position: relative;
max-width: 592px; /* wider than the 456px video box so the enlarged arrows sit in the gutters, not over the video */
margin: 0 auto;
padding: 0 68px; /* side gutters that hold the (60px) arrows beside the video */
}
#home .demo-carousel-stage { position: relative; }
#home .demo-carousel-viewport {
overflow: hidden;
border-radius: var(--radius-card);
}
#home .demo-carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
#home .demo-carousel-track::-webkit-scrollbar { display: none; } /* WebKit */
#home .demo-slide {
flex: 0 0 100%;
scroll-snap-align: center;
}
#home .demo-video {
position: relative;
width: 100%;
padding-bottom: 62.5%; /* fixed 16:10 box (no aspect-ratio: above floor) */
background-color: var(--surface-dark);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-elevated);
}
#home .demo-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Prev / next arrows — centred on the video, sat in the side gutters. */
#home .demo-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.95);
color: var(--text-primary);
box-shadow: 0 2px 10px rgba(13, 27, 42, 0.18);
font-size: 33px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background-color 0.2s ease, opacity 0.2s ease;
}
#home .demo-carousel-btn:hover { background-color: var(--surface-elevated); }
#home .demo-carousel-btn:disabled { opacity: 0.3; cursor: default; }
#home .demo-carousel-prev { left: -68px; }
#home .demo-carousel-next { right: -68px; }
/* On phones the 88px gutters would collapse the video, so drop the gutter and
* overlay the (still-doubled) arrows on the video's left/right edges instead. */
@media (max-width: 560px) {
#home .demo-carousel { padding: 0; }
#home .demo-carousel-prev { left: 6px; }
#home .demo-carousel-next { right: 6px; }
}
/* Dots. */
#home .demo-carousel-dots {
display: flex;
justify-content: center;
gap: 18px;
margin-top: 20px;
}
#home .demo-dot {
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(13, 27, 42, 0.2);
cursor: pointer;
transition: background-color 0.2s ease;
}
#home .demo-dot.is-active { background-color: var(--flare); }
/* ============================================================================
* CLOSING CTA ("Give your child the Heliomath advantage" → See Learning Plans)
* — ported from the retired brand override.
* ========================================================================== */
/* A pure-white band IS the accent here (no card) — it pops between the dark navy
* comparison band above and the sand FAQ band below. The bottom hairline
* (--border-on-sunken = the white/sand seam) closes it off from the FAQ. */
#home #see-pricing-section {
background-color: var(--surface-elevated);
border-bottom: 1px solid var(--border-on-sunken);
}
/* The closing headline + sub + CTA sit directly on the white band (card removed).
* The panel only centres the copy and caps its measure; spacing to the band edge
* comes from the .mp-section padding. */
#home .cta-panel {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
#home #see-pricing-section h2 {
color: var(--text-primary);
margin: 0;
font-size: calc(1.9rem + 0.9vw); /* the climax line — larger than section titles */
line-height: 1.15;
}
#home .cta-sub {
color: var(--gray-500);
margin: 12px 0 22px;
font-size: calc(1rem + 0.1vw);
}
#home #see-pricing-section .main-cta { margin-top: 0; }
/* The CTA button itself is , styled by the .btn
* component in heliomath_components.css — self-sufficient, no brand rule needed. */
|