/* ============================================================================ EASTON CHILD — global header + mega menu (consumes tokens.css) Desktop: sticky bar + Programs/Locations mega panels. Mobile : hamburger → full-screen menu with Programs/Locations accordions and a pinned "Try a Free Class" CTA. Red is an ACCENT only. ============================================================================ */ /* --- Scoped reset --------------------------------------------------------- */ /* The header chrome renders on two surfaces that do NOT share a baseline: GeneratePress supplies `*{box-sizing:border-box}` on every normal page, and page-bversion.php dequeues GP, leaving that declaration only inside the `.eb` artboard — which the header sits outside of. This file never declared its own, so the front page has been laying the header out in content-box while every other page used border-box, and it shows: `.e-header__inner` is max-width 1200px + 40px of padding a side, which measured 1280px wide on `/` against 1200px everywhere else, putting the logo 40px too far left and the CTA 40px too far right ON THE FRONT PAGE. The Programs panel came out 402px tall instead of 366px for the same reason (`.e-tile` is min-height 300 + 18px padding). Declaring it here is what makes the chrome identical on `/` and /longmont/ rather than merely similar — the same fix footer.css carries. */ .e-announce, .e-announce *, .e-announce *::before, .e-announce *::after, .e-header, .e-header *, .e-header *::before, .e-header *::after, .e-mobile, .e-mobile *, .e-mobile *::before, .e-mobile *::after { box-sizing: border-box; } /* Shared header button (compact variant of the page .easton-btn). */ .e-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-label); font-weight: var(--fw-label); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; padding: 13px 22px; border: none; border-radius: var(--radius-control); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-standard); } .e-btn--primary { background: var(--red); color: var(--text-on-red); box-shadow: var(--shadow-cta-red); } .e-btn--primary:hover, .e-btn--primary:focus-visible { background: var(--red-shadow); color: var(--text-on-red); } .e-btn--block { width: 100%; } .e-btn--lg { font-size: var(--fs-body); padding: 16px; } /* --- Announcement bar ----------------------------------------------------- */ .e-announce { background: var(--surface-dark); color: var(--text-on-dark); } .e-announce__inner { max-width: var(--container-max); margin-inline: auto; padding: 9px 40px; text-align: center; font-family: var(--font-label); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; } .e-announce__arrow { color: var(--red); } /* --- Sticky header bar ----------------------------------------------------- */ .e-header { position: sticky; top: 0; z-index: 100; } .e-header__bar { position: relative; background: var(--canvas); border-bottom: 1px solid var(--line); transition: box-shadow var(--dur-toggle) var(--ease-standard); } .e-header.is-compact .e-header__bar { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(13,13,12,0.5); } .e-header.is-panel-open .e-header__bar { border-bottom-color: transparent; } /* Fixed reserved height (scroll-shake fix): the sticky bar sits IN FLOW, so its box height is part of document.scrollHeight. The old compact state shrank this box (inner padding 19→12 + logo 44→36 ≈ 18px), which changed scrollHeight and, near a short page's bottom, clamped the scroll — the /about/ shake. Keep the box height constant across the toggle: inner padding stays 19px and the logo's reserved height stays 44px; the compact cue is delivered by TRANSFORMING the logo (scale, no layout change) + the shadow, not by resizing the box. */ .e-header__inner { max-width: var(--container-max); margin-inline: auto; padding: 19px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } /* --- Logo ----------------------------------------------------------------- */ .e-logo { display: inline-flex; align-items: center; text-decoration: none; } /* Full Easton lockup (badge + wordmark baked into one image). Fixed box (width/height in markup too) so it never shifts layout; sized by height with width:auto to hold the source ratio. Transition only the height when the sticky bar compacts. */ .e-logo__mark { height: 44px; width: auto; flex: 0 0 auto; display: block; transform-origin: left center; transition: transform var(--dur-toggle) var(--ease-standard); } /* Compact: scale the logo (36/44 ≈ .818) rather than shrink its box, so the reserved 44px — and therefore the header height and scrollHeight — is fixed. */ .e-header.is-compact .e-logo__mark { transform: scale(0.818); } /* --- Desktop nav ---------------------------------------------------------- */ .e-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .e-nav__item { position: relative; } /* Scoped to the .e-header root (0,2,0) so the trigger