/* ----------------------------------------- Global Styles ----------------------------------------- */ * { max-width: 100vw; } :root { --mfb-brand: #1a3a2a; --mfb-brand-hover: #234d35; } html, body { width: 100%; min-height: 100%; margin: 0px; padding: 0px; } /* Only html clips horizontal overflow. Per the CSS overflow spec, pairing a non-visible overflow-x with the default visible overflow-y forces that axis to compute as auto — if BOTH html and body specified overflow-x: hidden here (as this rule used to), both independently became scroll containers, nesting two separate scrollports. That breaks position: sticky for every descendant (the coin-track sections rely on it) since the browser no longer treats the viewport as the single scrolling ancestor. Body is left with its default (visible) overflow so it never becomes a scroll container of its own. */ html { overflow-x: hidden; } /* Blocks scrolling for the brief window while the hero heading is still playing its intro reveal (see the inline script in that adds this, and index.js which removes it once the animation ends). Only overflow-y — html already clips overflow-x above, and adding a second non-visible axis on top of that here (rather than also touching body) keeps this a single-element change, avoiding the dual-scroll-container issue documented above. overflow-y:hidden alone stops mouse-wheel/keyboard scrolling but mobile browsers don't reliably treat it as blocking a touch-swipe drag — the page could still be dragged down by finger even with this rule active, defeating the lock specifically on mobile (desktop worked fine off overflow-y alone). touch-action:none tells the browser not to hand swipe gestures on html to its default scroll behavior at all; the touchmove listener in index.html is the belt-and-suspenders backup for the mobile browsers that only partially honor touch-action. */ html.scroll-locked { overflow-y: hidden; touch-action: none; } /* ----------------------------------------- Navbar component ----------------------------------------- */ .navbar { width: 100%; position: relative; z-index: 20; } .navbar header { position: relative; z-index: 21; display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: 0 auto; padding: 1rem 5vw; width: 100%; height: auto; min-height: 50px; box-sizing: border-box; } .navbar__logos { display: flex; align-items: center; gap: 0.65rem; height: 48px; flex-shrink: 0; } .navbar__logo { display: grid; place-items: center; flex-shrink: 0; width: auto; height: 42px; line-height: 0; transition: opacity 0.2s ease; } .navbar__logo:hover { opacity: 0.9; } #mfb-logo { height: 42px; width: auto; max-height: 42px; object-fit: contain; object-position: center; display: block; } .navbar__consulting-logo { display: block; height: 48px; width: auto; max-width: 9rem; object-fit: contain; object-position: center center; } .navbar__desktop { display: flex; align-items: center; margin-left: auto; } .navbar__desktop ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; } .navbar__desktop ul a { color: white; font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 500; text-decoration: none; padding: 0.5rem 0.65rem; border-radius: 6px; transition: color 0.2s ease, background-color 0.2s ease; } .navbar__desktop ul a:hover, .navbar__desktop ul a.is-active { color: #b8d4c4; } .navbar__desktop ul li { margin: 0; padding: 0; } .navbar__mobile { display: none; position: relative; align-items: center; flex-shrink: 0; } #hamburger-icon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; margin: 0; padding: 0; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.1); cursor: pointer; -webkit-tap-highlight-color: transparent; } #hamburger-icon:active { background: rgba(255, 255, 255, 0.1); } #hamburger-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #hamburger-icon .bar1, #hamburger-icon .bar2, #hamburger-icon .bar3, #hamburger-icon span { display: block; width: 22px; height: 2px; background-color: white; border-radius: 2px; margin: 0; transition: transform 0.3s ease, opacity 0.3s ease; } #hamburger-icon.open .bar1 { transform: translateY(8px) rotate(-45deg); } #hamburger-icon.open .bar2 { opacity: 0; } #hamburger-icon.open .bar3 { transform: translateY(-8px) rotate(45deg); } .mobile-nav-backdrop { display: none; position: fixed; inset: 0; z-index: 99990; background: transparent; cursor: pointer; pointer-events: none; } body.nav-open .mobile-nav-backdrop { display: block; pointer-events: auto; } .mobile-nav-panel { display: none; position: fixed; top: 4.25rem; right: max(1.25rem, 5vw); z-index: 99999; width: min(20rem, calc(100vw - 2.5rem)); padding: 1.35rem 1.25rem 1.25rem; box-sizing: border-box; flex-direction: column; gap: 0; background: #fff; border-radius: 1.25rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; pointer-events: auto; transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; } body.nav-open .mobile-nav-panel { display: flex; opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .mobile-nav-panel__links { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; } .mobile-nav-link { display: block; padding: 0.65rem 0.5rem; color: #1f2937; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 500; text-decoration: none; border-radius: 0.5rem; transition: color 0.2s ease, background-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .mobile-nav-link.is-active { color: var(--mfb-brand, #1a3a2a); background-color: rgba(26, 58, 42, 0.06); } @media (hover: hover) { .mobile-nav-link:hover, .mobile-nav-link:focus-visible { color: var(--mfb-brand, #1a3a2a); background-color: rgba(26, 58, 42, 0.06); } } .mobile-nav-panel__actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; } .mobile-nav-panel__actions:empty { display: none; margin: 0; padding: 0; border: none; } .mobile-nav-btn { display: block; width: 100%; padding: 0.8rem 1.25rem; font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: 999px; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; } .mobile-nav-btn:active { transform: scale(0.98); } .mobile-nav-btn--outline { color: var(--mfb-brand, #1a3a2a); background: transparent; border: 2px solid var(--mfb-brand, #1a3a2a); } .mobile-nav-btn--primary { color: #fff; background: var(--mfb-brand, #1a3a2a); border: 2px solid transparent; box-shadow: 0 4px 14px rgba(26, 58, 42, 0.25); } @media (hover: hover) { #hamburger-icon:hover { background: rgba(255, 255, 255, 0.18); } .mobile-nav-btn--outline:hover, .mobile-nav-btn--outline:focus-visible { background: rgba(26, 58, 42, 0.06); } .mobile-nav-btn--primary:hover, .mobile-nav-btn--primary:focus-visible { background: var(--mfb-brand-hover, #234d35); } } @media only screen and (min-width: 769px) { .navbar__logos { height: 52px; } .navbar__consulting-logo { height: 52px; max-width: 10rem; } } @media only screen and (max-width: 768px) { .navbar__desktop { display: none; } .navbar__mobile { display: flex; } } @media (prefers-reduced-motion: reduce) { .mobile-nav-panel { transition: opacity 0.15s ease, visibility 0.15s ease; transform: none; } body.nav-open .mobile-nav-panel { transform: none; } } .text-green { color: #136F64 } /* Footer */ .site-footer { width: 100%; background-color: #1a3a2a; padding: 2rem 0 1.5rem; } .site-footer__inner { max-width: 72rem; margin: 0 auto; padding: 0 5vw; display: flex; flex-direction: column; gap: 1.25rem; } .site-footer__main { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; } .site-footer__brand { display: flex; align-items: center; gap: 1rem; } /* Footer logo intro (home page only) — lives between the coin track and