can't be focused itself, so
* forwarding the ring here is what preserves a visible keyboard-focus indicator
* (WCAG 2.4.7) — and it matches the persist-until-blur behaviour of a standalone
* button. Falls back to the default ring for any wrapped button without --btn-ring. */
a.main-cta:focus,
a.main-cta:active {
box-shadow: none;
outline: none;
}
a.main-cta:focus .btn {
outline: 2px solid var(--btn-ring-color, var(--accent-primary));
outline-offset: 3px;
}
/* Measured: pressing the CTA normally DOES put the inner .btn in :active too — the
* pointer is over the button, so it is the activated element and the
is merely an
* ancestor — and its own press colours fire. This rule covers the case the button's
* own can't: a press that lands on the wrapper OUTSIDE the button box. Reading
* --btn-ring-press off the element (the variant declares it at rest, not inside
* :active) is what lets the ring still match the pressed fill there. */
a.main-cta:active .btn {
outline: 2px solid var(--btn-ring-press, var(--btn-ring-color, var(--accent-primary)));
outline-offset: 3px;
}
/* ============================================================================
* CARD — .card (+ modifiers)
*
* The generic surface tile for marketing content — testimonial quotes,
* success-story items, the closing-CTA panel, and so on. An elevated white
* surface sitting on the light/beige field, separated from it by a hairline
* border AND a soft shadow: white-on-beige is only ~1.05:1, so a card ALWAYS
* needs both to read as a distinct surface (see --border-hairline / the elevated
* shadows in the tokens). Radius comes from --radius-card, so every card in the
* system rounds the same amount.
*
* SHELL ONLY. A card owns its own surface, border, radius, shadow and inset
* (padding) — and NOTHING about how its contents are arranged. The consumer lays
* out the inside (flex/grid, gaps, alignment) via its own section-scoped rule,
* which sits at higher specificity and rides on top of this shell.
*
* TUNABLE: --card-padding exposes the inset so a consumer can retune it WITHOUT
* re-declaring the shell — set it on the element (e.g. the roomier CTA panel).
*
* .card the shell
* .card--interactive adds a hover lift (rise + deeper shadow) for a card that
* is, or wraps, a tappable target. Reduced-motion users keep
* the shadow cue but lose the transform.
* ========================================================================== */
.card {
--card-padding: var(--space-lg);
background-color: var(--surface-elevated);
border: 1px solid var(--border-warm);
border-radius: var(--radius-card);
box-shadow: var(--shadow-elevated);
padding: var(--card-padding);
}
/* Hover lift — only for cards that invite interaction. */
.card--interactive {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card--interactive:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-elevated-hover);
}
@media (prefers-reduced-motion: reduce) {
.card--interactive:hover { transform: none; }
}
/* ============================================================================
* LOGO — .logo (+ --on-dark)
*
* The Heliomath wordmark — on nearly every screen. Two artwork files
* (logo-midday.png / logo-midday-on-dark.png, both 500x84) swapped by CSS: the
* default is the light-surface logo; add --on-dark on a DARK background. As a
* background image, only the artwork for the MATCHED class is fetched — no double
* download.
*
* Sized by HEIGHT via --logo-height; the width follows from the 500x84 ratio via
* calc() (floor-safe — sidesteps aspect-ratio, which is above our browser floor).
* PNG source is 500px wide, so keep the displayed width <=~250px to stay crisp on
* 2x screens (the 2.5rem default is ~238px — fine).
*
* Give it an accessible name in markup (it's a background image, so no alt):
* as a link:
* standalone:
* on dark: add --on-dark, e.g. class="logo logo--on-dark"
* ========================================================================== */
.logo {
--logo-height: 2.25rem; /* 36px — override to resize; width follows */
display: inline-block;
height: var(--logo-height);
width: calc(var(--logo-height) * 500 / 84); /* preserve the 500x84 aspect ratio */
background: url("../img/logo-midday.e76aee391730.png") center / contain no-repeat;
}
.logo--on-dark {
background-image: url("../img/logo-midday-on-dark.6a2294ec5cef.png");
/* Full opacity — no dimming. (Was 0.9, which made the LD hero wordmark read
* darker/more muted than the same artwork on the account-access pages, where
* it's a plain
![]()
at full strength.) */
}
/* Logo LINKS — every anchor that wraps the wordmark: the LD-hero wordmark (.logo as an
),
* the top-nav wordmark (.navbar-brand, the around the .navbar-logo img), and the bare hero
* logo anchors on the plans + about pages (.logo-link, an wrapping the wordmark ![]()
).
* A logo isn't a text link — it carries no focus pill, so suppress the ring.
*
* This rule used to ZERO horizontal padding/margin too, to cancel the ±0.4em pill geometry
* from heliomath_base's `a:focus`. That cure was worse than the disease: .navbar-brand has
* a real 8px left margin of its own (grokkoli_base / heliomath_header), and zeroing it on
* focus yanked the wordmark 8px LEFT the moment it was clicked. The pill geometry now lives
* on heliomath_base's `:not(.logo):not(.navbar-brand):not(.logo-link)…` selector — the same
* exclusion list that already skipped the fill — so it never reaches these anchors and there
* is nothing here to cancel. Set no geometry: whatever layout each logo has at rest, it
* keeps while focused. */
.logo:focus,
.logo:active,
.navbar-brand:focus,
.navbar-brand:active,
.logo-link:focus,
.logo-link:active {
outline: none;
box-shadow: none;
}
/* Chrome links are NOT body links — no underline. heliomath_base's `a` rule underlines
* every anchor (the design-system treatment for body copy), which is right for prose and
* wrong for the top nav, the dropdown menu and the wordmark. Same element list
* heliomath_base already excludes from the a:focus link-fill, kept in step with it.
* Two classes vs the bare `a`, so it wins comfortably; hover/active set no decoration of
* their own, so it stays off in every state. */
.navbar-nav .nav-link,
.navbar-nav .dropdown-item,
.navbar-brand,
.logo,
.logo-link {
text-decoration: none;
}
/* SOLID nav bars (the white bar on the app/blog/report pages) — one link blue.
* Left alone, these inherit three different colours depending on which legacy sheet a
* page happens to load: grokkoli_base's #0020b0 (product updates, work-with-us),
* Bootstrap's rgba(0,0,0,.5) (blog, pilot reports), or nothing at all. (0,3,0) so it
* beats Bootstrap's own `.navbar-light .navbar-nav .nav-link`, and this file loads
* after it.
*
* ONLY the solid bar: `:not(.transparent)` leaves both overlay navs to their own
* treatment — cream on the dark heroes (heliomath_nav.css) and --link on the light
* ones (heliomath_marketing.css). True-blue over a dark hero would be 2.27:1. */
.header:not(.transparent) .navbar-nav .nav-link {
color: var(--link);
}
.header:not(.transparent) .navbar-nav .nav-link:hover {
color: var(--link-hover);
}
/* Bootstrap hardcodes `.dropdown-item { font-weight: 400 }`; re-point the account menu
* onto the ladder. Scoped to .navbar-nav so it can't reach a non-nav dropdown later. */
.navbar-nav .dropdown-item {
font-weight: var(--font-weight-regular);
}
/* …and the same one link blue as the nav bar above. The account menu's rows were
* grokkoli_base's legacy #0020b0 (`.navbar .dropdown-menu a`, 0-2-1), which reaches every
* Heliomath page that still loads that sheet — so the fix has to live HERE, in the file
* every Heliomath page loads, not in heliomath_header.css (which the app + product-update
* pages never load). Both selectors are listed because the menu's rows are elements
* that may or may not carry .dropdown-item. */
.navbar .dropdown-menu a,
.navbar-nav .dropdown-item {
color: var(--link);
}
.navbar .dropdown-menu a:hover,
.navbar-nav .dropdown-item:hover {
color: var(--link-hover);
}
/* ============================================================================
* HEADER / NAV LAYOUT
*
* Small overrides for the shared Bootstrap header on Heliomath pages — scoped by
* controlled loading (this file loads only on Heliomath pages, never Grokkoli).
* Sit the logo (in .navbar-brand) and the nav items (login, etc.) on one vertical
* centre line. .navbar-brand is made a centred flex box so the inline-block logo
* doesn't ride the text baseline.
* ========================================================================== */
.navbar .navbar-collapse {
align-items: center;
}
.navbar .navbar-brand {
display: inline-flex;
align-items: center;
margin-top: 0;
margin-bottom: 0;
}
/* The transparent-header chrome for the dark-header pages (logo insets + size,
* vertical centring, pill gap) lives in heliomath_nav.css now — one definition
* shared by the learning-differences page AND the account-access flow, so they
* line up pixel-for-pixel. The generic brand-centring above still applies to every
* Heliomath page (incl. home). */
/* ============================================================================
* LAYOUT COMPAT — the Bootstrap-4 STRUCTURAL rules the shared nav markup relies
* on, ported verbatim from base.css so Heliomath pages need not load it. The nav
* markup (external/legacy/home_base) is shared with Grokkoli, so its Bootstrap
* classes must stay in the HTML; here we supply only their box/flex STRUCTURE —
* the skin is in the sections below + heliomath_nav / heliomath_marketing.
* base.css's grid (.container/.row/.col-*), heading-size classes and :root
* Bootstrap vars are UNUSED on Heliomath and were dropped, not ported. Retire this
* whole block once the nav markup stops using the Bootstrap navbar classes.
* ========================================================================== */
/* Flex nav bar + fixed positioning (base.css .navbar + .fixed-top). The transparent
* hero nav is re-pointed to position:absolute by heliomath_marketing.css; the solid
* nav keeps fixed. Per-page padding/skin overrides this in the sections below. */
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
}
/* --- Wrap behaviour: nav items stay on top, logo drops below ------------ *
* On the solid content-page nav (terms / success-stories / legal) and the
* auth-page nav (login / signup / reset), when the bar runs out of room the nav
* items should hold the top line and the LOGO should be what's forced to the
* second line — the same rhythm the hero pages have. `wrap-reverse` places the
* wrapped line ABOVE the first, so it flips the stack order WITHOUT disturbing
* the single-line desktop layout (logo left, buttons right) and needs no width
* breakpoint — it triggers exactly at the natural wrap point. The transparent
* HERO navs (about / plans / LD) are excluded: they hide their nav logo, so
* there's nothing to reflow there.
*
* Two DOM shapes are covered: legacy/alpha bases make the logo + nav separate
* children of .navbar (so .navbar is what wraps); external_base nests both inside
* .navbar-collapse (so the collapse wraps). Setting wrap-reverse on both is safe
* — whichever container isn't the wrapping one holds a single child, so it's a
* no-op there. */
.header:not(.transparent).navbar,
.auth-page .header.navbar,
.header:not(.transparent) .navbar-collapse,
.auth-page .header .navbar-collapse {
flex-wrap: wrap-reverse;
/* Breathing room BETWEEN the wrapped rows only. row-gap applies to the space
* between flex lines, so on the single-line desktop bar (one row) it has no
* effect — the desktop spacing is unchanged. Only appears once the bar wraps. */
row-gap: 22px; /* space between the wrapped rows; literal (no token lands at 22px) */
}
/* Guarantee a gap between the logo and the leftmost nav item so they can't touch
* when the single-line bar gets tight (e.g. ~344px, before it wraps): space-between
* has run out of slack and the auth pages zero the brand's margins. This margin sits
* to the LEFT of the first pill; on desktop the ml-auto push swallows it (plenty of
* slack there), so the wide-bar spacing is unchanged. Solid + auth navs only — the
* hero navs hide their logo, so there's nothing for the pill to touch. */
.header:not(.transparent) .navbar-nav .nav-item:first-child,
.auth-page .header .navbar-nav .nav-item:first-child {
margin-left: var(--space-sm);
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-nav {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: 0.5rem 1rem;
}
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
}
/* .navbar-expand (unconditional, present in the markup alongside -lg) keeps the bar
* horizontal at every width and hides the toggler — the Heliomath nav never collapses
* to a hamburger, so base.css's .collapse / .navbar-expand-lg / hamburger-icon rules
* never take effect and were not ported. */
.navbar-expand { flex-flow: row nowrap; justify-content: flex-start; }
.navbar-expand .navbar-nav { flex-direction: row; }
.navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }
.navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; }
.navbar-expand .navbar-toggler { display: none; }
/* ...BUT the header nav must still be allowed to WRAP. .navbar-expand forces row
* NOWRAP (flex-flow), which on narrow phones makes the hero navs overflow the
* viewport — worst on the LD page, which adds a "Learning Plans" pill beside Login:
* the links can't wrap, so they clip and push Login off-screen, forcing ~100px of
* horizontal scroll. Re-enable wrap so the links drop below the logo instead.
* (These out-specify .navbar-expand; desktop is unaffected — wrap only triggers when
* the row doesn't fit.)
*
* BOTH selectors are needed because the two base templates nest the logo
* differently: legacy_base puts .navbar-brand as a DIRECT child of .navbar (wrapped
* by the first selector), while external_base nests brand + links INSIDE
* .navbar-collapse (wrapped by the second). Without the collapse rule the LD/hero
* nav on external_base can't wrap — .navbar has a single child — and overflows. */
.header.navbar,
.header .navbar-collapse { flex-wrap: wrap; }
/* Utilities still used by the shared markup (nav logo + #main). */
.align-top { vertical-align: top !important; }
.d-inline-block { display: inline-block !important; }
.ml-auto { margin-left: auto !important; }
.clearfix::after { display: block; clear: both; content: ""; }
/* ============================================================================
* STANDARD (solid) NAV — REPLACED by heliomath_header.css.
*
* This file used to paint the solid alpha_base header on the Sunset tokens (Poppins,
* a 36px height-sized wordmark, navy menu rows). That made the ported pages diverge
* from the QUESTION pages, whose header comes from grokkoli_base and is the tuned
* reference. heliomath_header.css now re-states the grokkoli_base nav for the pages
* that dropped it, and _solid_nav_head.html links it right after this file.
*
* Nothing solid-nav belongs here any more. The transparent hero navs are unaffected —
* they were never painted by this block (every rule was :not(.transparent)).
* ========================================================================== */
/* ============================================================================
* FOOTER — #footer (the shared public footer)
*
* Codifies templates/external_footer.html onto the tokens: a full-width band on
* the sunken surface with columns of nav links + a copyright line, content
* centred to the page width. Targets the existing #footer / .footer-content /
* .links / .link-group markup and overrides the legacy grokkoli_base footer.
* (The broccoli mascot is Grokkoli-only and hidden for other brands.)
* ========================================================================== */
#footer {
background-color: var(--surface-sunken);
border-top: 1px solid var(--border-on-sunken);
padding: var(--space-lg) var(--space-gutter);
font-weight: var(--font-weight-light); /* 300 */
}
/* Content centred to the page width (= the standard --mp-content-max; keep in sync). */
#footer .footer-content {
width: 100%;
max-width: 68rem;
margin-left: auto;
margin-right: auto;
}
/* Link columns — flex-wrap so they stack as the viewport narrows. */
#footer .links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-md) var(--space-md); /* row-gap column-gap */
margin-bottom: var(--space-lg);
}
#footer .link-group {
display: flex;
flex-direction: column;
/* Size each link to its own text, not the column's widest item. A flex column
* defaults to align-items:stretch, which stretched every to the widest link's
* width — so a short link's box (and its pressed pill fill) spanned the whole
* column. flex-start lets each link be content-width and left-aligned. */
align-items: flex-start;
gap: var(--space-xs);
margin: 0;
}
/* Footer links: understated dark ink, underline on hover. */
#footer a {
color: var(--text-lively);
font-size: var(--type-caption-size); /* 14–16px — footer links needn't be large */
line-height: 1.4;
text-decoration: none;
/* Pill breathing room around the text — present in ALL states, with an equal negative
* margin cancelling it so the box the flex column lays out (the MARGIN box) is
* unchanged: text stays put, links keep their spacing, columns keep their width. And
* because these hold at rest, they hold on press too — `#footer a` (an id) out-
* specifies base.css's `a:focus`, so its focus padding/negative-margin can't touch
* these and can't shift the link. Result: a proper padded pill, zero movement.
* (base.css's own cancel works for inline links but misbehaves on these flex items.) */
padding: 3px 10px;
margin: -3px -10px; /* cancels the padding for layout; also clears legacy link margins */
max-width: none; /* clear the legacy link max-width */
min-width: 0; /* clear the legacy link min-width */
}
#footer a:hover { color: var(--link-hover); text-decoration: underline; }
#footer a:active { color: var(--link-active); }
/* On PRESS the pill fill is the affordance, so drop the underline while focused. Needed
* because a pointer press is ALSO a hover, and #footer a:hover's underline (1,1,1)
* out-specifies base.css's a:focus text-decoration:none (0,1,1) — this restates it at
* matching specificity, later in source order, so it wins during a press but leaves the
* plain hover underline intact. */
#footer a:focus { text-decoration: none; }
/* Focus ring is NOT defined here — base.css owns link focus site-wide. */
/* Copyright line. */
#footer p {
color: var(--text-lively);
font-size: var(--type-caption-size);
margin: 0;
}
/* ============================================================================
* LEGACY SECTION SYSTEM — the full-bleed band + centred module pair, ported from
* grokkoli_public.css (which Heliomath never loads: the brand gate in alpha_base.html
* and external_base.html skips it, and no heliomath_public.css was ever written).
*
* Unscoped on purpose — these classes are shared markup across many pages, so scoping
* them per page would mean re-solving them each time. Page files load AFTER this one,
* so any page that re-themes its own band still wins.
* ========================================================================== */
.standard-brochure-module-container {
padding: calc(3rem + 2vw) calc(7vw + 10px);
}
.standard-brochure-module {
max-width: 930px;
margin-left: auto;
margin-right: auto;
}
/* .dark-blue-background already appears in the dark-context block near the top of this
* file, which re-points the weight ladder ON THE ASSUMPTION the band is dark. Without
* grokkoli_public.css nothing was painting it, so that assumption was false and the
* band rendered as thinned dark text on beige. This is the paint that makes it true. */
.dark-blue-background {
background-color: var(--surface-dark);
color: var(--text-on-dark);
}
.dark-blue-background h2,
.dark-blue-background h3,
.dark-blue-background p,
.dark-blue-background li,
.dark-blue-background th,
.dark-blue-background td p {
color: var(--text-on-dark);
}
.dark-blue-background a { color: var(--link-on-dark); }
.dark-blue-background a:hover { color: var(--link-on-dark-hover); }
/* Section titles marked with the legacy .accent-color-light-winter-green class. The class
* is in SHARED markup (beta_limitations.html, the two comparison partials) so it can't be
* removed, and grokkoli_base.css:365 sets it `!important` — hence the !important here,
* which is the only way to out-rank it. Mint #5ddaa5 has no place in Sunset; this is the
* same paint heliomath_home.css:455 already gives the home comparison title, via the
* --link-on-dark alias. Scoped to h2 inside a dark band: the class also marks ✓ marks and
* table cells, which are a separate decision. */
.dark-blue-background h2.accent-color-light-winter-green {
color: var(--accent-primary-on-dark) !important;
}