/* ============================================================================ * Heliomath HEADER — the app's top nav, ported to the pages that left grokkoli_base. * * The header on the QUESTION pages is the reference: that's where learners spend their * time and it's the one that's tuned. It comes from grokkoli_base.css, which the ported * pages (blog, about signed-in, terms, privacy, scholarship, success-stories) no longer * load — so they grew a second, different header off heliomath_components: Poppins * instead of Quicksand, a 36px height-sized wordmark instead of the 165x28 box, navy * menu rows instead of blue. This file re-states the grokkoli_base nav declarations so * those pages render the SAME header, without pulling the rest of grokkoli_base back in. * * SCOPED `.header:not(.transparent)` throughout: the public hero navs (about/plans * signed-out, learning-differences, account-access) keep their transparent pill nav from * heliomath_nav.css / heliomath_marketing.css and are deliberately untouched. * * NOT loaded on the question pages themselves — they get all of this from grokkoli_base * already. Linked from _solid_nav_head.html, i.e. exactly the ported solid-header pages. * * Values are the grokkoli_base originals; its --main-* custom properties live in that * file, so the few the nav needs are inlined here as literals (noted per rule) rather * than re-declaring a palette these pages otherwise have no use for. * ========================================================================== */ /* Quicksand ships in grokkoli_base's @font-face; restated because these pages don't load * it. Same files, same weight — the browser dedupes when both are present. */ @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; src: local(''), url("../webfonts/quicksand/Quicksand-Regular.a541d4e66100.woff2") format('woff2'), url("../webfonts/quicksand/Quicksand-Regular.7194c41ffab5.ttf") format('truetype'); } /* The bar itself. grokkoli_base gets the white ground + hairline from `.navbar-light` and * zeroes the block padding on `.navbar`; the type comes from , which on these pages * is Poppins — so it's pinned here instead. */ .header:not(.transparent) { min-height: calc(4vh + 2.5rem); /* grokkoli_base `.header` — ~64px; same formula #main's clearance uses, so the ported pages' padding still lines up */ padding-top: 0; padding-bottom: 0; background-color: #fff; /* grokkoli_base --white */ border-bottom: 1px solid #e1e2e3; /* grokkoli_base --main-light-grey */ font-family: 'Quicksand', 'Helvetica Neue', arial, sans-serif; letter-spacing: 1px; } /* Plain `wrap`, not the wrap-reverse + 22px row-gap heliomath_components gives the solid bar: * the question pages have neither, and reversing puts the wordmark BELOW the nav items once * the bar gets tight. Selector shape matches components' (both 0,4,0) and loads later. */ .header:not(.transparent).navbar, .header:not(.transparent) .navbar-collapse { flex-wrap: wrap; row-gap: 0; } @media screen and (max-width: 475px) { .header:not(.transparent) { padding-left: 5px; } } .header:not(.transparent) .navbar-nav { align-items: center; flex-wrap: wrap; } /* Wordmark. The 165x28 box is the tuned one; it steps down with the viewport below 750px. * Overrides heliomath_components' height-based sizing (36px, width:auto) on these pages. */ .header:not(.transparent) .navbar-brand { display: inline-block; align-items: normal; margin-top: 0.4rem; margin-right: 0.4rem; margin-bottom: 0; margin-left: 0.5rem; padding-bottom: 0.4rem; } .header:not(.transparent) .navbar-logo { width: 165px; height: 28px; } @media screen and (max-width: 750px) { .header:not(.transparent) .navbar-logo { width: calc(83px + 10.9vw); height: calc(14px + 1.9vw); } } /* Nav items. Colour is Bootstrap's `.navbar-light` default on the question pages (nothing * in grokkoli_base out-specifies it), so it is NOT restated — dropping heliomath_components' * `color: var(--text-primary)` is what lets it through. text-decoration IS restated: these * pages load heliomath_base, whose `a { text-decoration: underline }` the question pages * never see. The fluid sizing is grokkoli_base's three-step ramp on `.nav-item`. */ .header:not(.transparent) .navbar-nav .nav-link { text-decoration: none; text-align: end; } .header:not(.transparent) .navbar-nav .nav-link:hover { text-decoration: none; } .header:not(.transparent) li { margin-bottom: 0; } .header:not(.transparent) .nav-item { margin-left: 1rem; margin-right: 0.2rem; } /* Selector shape matches heliomath_components' own first-child rule (both 0,4,0) so this, * loading later, wins — otherwise its var(--space-sm) left the first item 12px in, where * the question pages have 3.2px. */ .header:not(.transparent) .navbar-nav .nav-item:first-child { margin-left: 0.2rem; } @media screen and (max-width: 320px) { .header:not(.transparent) .nav-item { font-size: calc(0.8rem); } } @media screen and (min-width: 320px) { .header:not(.transparent) .nav-item { font-size: calc(0.8rem + 2.5 * ((100vw - 320px) / 700)); } } @media screen and (min-width: 1200px) { .header:not(.transparent) .nav-item { font-size: 1rem; } } /* Account dropdown. */ .header:not(.transparent) .dropdown-menu { right: 0; left: unset; padding-top: 15px; padding-bottom: 15px; min-width: 14rem; } .header:not(.transparent) .dropdown-menu .divider { border-bottom: 1px solid #e1e2e3; /* grokkoli_base --main-light-grey */ padding-top: 10px; margin-bottom: 10px; } .header:not(.transparent) .dropdown-menu a { color: var(--link); /* was #0020b0, grokkoli_base --main-blue */ text-decoration: none; /* heliomath_base underlines every ; the question pages have no such rule */ } .header:not(.transparent) .dropdown-menu a:hover { text-decoration: none; } /* Suppress heliomath_base's a:focus pill — the ring, --radius-pill, and its ±0.4em * horizontal padding, which shifted the label sideways on click. The question pages have * no focus pill at all, so the menu rows must not grow one. (The translucent --link-fill is * excluded in heliomath_base itself: that rule's six :not()s out-specify anything here.) */ .header:not(.transparent) .dropdown-menu a:focus { outline: none; box-shadow: none; border-radius: 0; padding-left: 1.5rem; /* bootstrap's .dropdown-item padding, restored */ padding-right: 1.5rem; } /* The "…is now learning" caption. Green on the question pages — grokkoli_base's * `.navbar p` colours it, and the

keeps `.dropdown-note`'s box. */ .header:not(.transparent) .dropdown-note { display: block; width: 100%; margin-bottom: 5px; padding: 0.25rem 1.5rem; font-size: 0.95rem; color: #00b030; /* grokkoli_base --main-green, via .navbar p */ text-align: inherit; white-space: normal; background-color: transparent; border: 0; }