/** * @file navbar.miller.css * * Mobile / tablet navigation (≤1024px) — Pattern A: stack-based * drill-down overlay. Replaces the previous Miller-column treatment. * * Design notes: * - Full-viewport (100dvh) overlay with frosted-glass backdrop. * - Each "layer" is a full-overlay panel; drilling in pushes a new * layer on top with a horizontal slide + parallax of the outgoing * layer (translateX -30%, scale 0.96, opacity 0.6) for iOS-grade * depth perception. * - Custom Apple easing curve: cubic-bezier(0.32, 0.72, 0, 1). * - Sticky header (back + title) + sticky footer (navbarMessage + CTA) * per layer; the body scrolls independently. * - Body scroll on the underlying page is locked via .sn-menu-open * on . * - prefers-reduced-motion → crossfade replaces slide+parallax. * - Hamburger morphs into × via three spans (rule lives in * sticky-navbar.css since the hamburger element is part of the * base markup). * * Class hooks (built by navbar.miller.js): * .sn-mobile-scrim ← full-screen dim layer behind the overlay * .sn-mobile-overlay ← fixed positioned overlay container * .sn-mobile-overlay__stack ← flex column holding all layers * .sn-mobile-layer ← one drilled level (root or a section) * .sn-mobile-layer--root ← the root (top-level items) layer * .sn-mobile-layer--exiting ← previously-active layer, parallaxed back * .sn-mobile-layer--active ← currently visible layer (frontmost) * .sn-mobile-layer__header ← sticky back + section title * .sn-mobile-layer__body ← scrollable body * .sn-mobile-layer__footer ← sticky cta + secondary message */ /* ────────────────────────────────────────────────────────────────── * Apple-grade easing token — used everywhere a slide or fade animates. * Quick start, slow settle. Pair with 360-400ms for "deliberate, not * snappy" reads as premium. * ────────────────────────────────────────────────────────────────── */ :root { --sn-ease-apple: cubic-bezier(0.32, 0.72, 0, 1); --sn-layer-duration: 380ms; --sn-fade-duration: 200ms; } @media (max-width: 1024px) { /* Show the hamburger toggle on mobile. The base sticky-navbar.css defines its column flex layout + the three .toggle-bar spans; it only sets display: none. We restore display: flex (column direction inherited from the base rule) and pin a 44×44 target for WCAG touch sizing. The hamburger ↔ × morph animation is already defined in sticky-navbar.css (triggered by aria-expanded="true" which our JS toggles on open/close). */ .sticky-navbar__toggle { display: flex; width: 44px; height: 44px; align-items: center; z-index: 1000; /* keep visible above the overlay scrim */ position: relative; } /* When the menu is open, the toggle sits above the overlay so the user can still tap it to close. */ body.sn-menu-open .sticky-navbar__toggle { z-index: 1001; } /* ── Hide desktop megamenus on mobile. The overlay system below is a parallel DOM tree built from the same data; the original megamenus stay in the DOM (so desktop still works on resize) but are display:none on small screens. */ .sticky-navbar__megamenu { display: none !important; } /* On mobile we hide the navbar's inline nav list, CTA, and message — the overlay below presents them, with the CTA + message replicated into the sticky footer. */ .sticky-navbar__list, .sticky-navbar__cta, .sticky-navbar__message { display: none; } /* ────────────────────────────────────────────────────────────── * Scrim — sits behind the overlay, dims the page so the user * understands the overlay is modal. Tapping it closes the menu. * ────────────────────────────────────────────────────────────── */ .sn-mobile-scrim { /* Same positioning as the overlay — below the sticky navbar wrapper. Tapping the visible page area dims navigates "out of the menu" without obscuring the hamburger/ticker. */ position: fixed; top: var(--sn-overlay-top, 64px); right: 0; bottom: 0; left: 0; background: rgba(15, 22, 27, 0.45); opacity: 0; pointer-events: none; z-index: 998; transition: opacity var(--sn-fade-duration) var(--sn-ease-apple); } .sn-mobile-scrim.is-open { opacity: 1; pointer-events: auto; } /* ────────────────────────────────────────────────────────────── * Overlay — full-viewport (100dvh) frosted-glass panel. * Uses dvh so mobile browser chrome (URL bar, gesture bar) hiding * doesn't leave a dead band at the bottom. * ────────────────────────────────────────────────────────────── */ .sn-mobile-overlay { /* IMPORTANT: the sticky navbar wrapper is z-index: 1000 and has position: sticky at the top of the page. We position the overlay BELOW the wrapper rather than covering it — that way (a) the hamburger (which morphs to ×) stays visible so users can tap it to close, (b) the ticker stays visible, (c) the brand link stays accessible. The CSS variable --sn-overlay-top is set in JS to the live wrapper height (accounts for the ticker hiding/showing, viewport rotation, etc.). */ position: fixed; top: var(--sn-overlay-top, 64px); right: 0; bottom: 0; left: 0; z-index: 999; background: #ffffff; /* opaque — was rgba+backdrop-filter, but the navbar wrapper covers the blur target anyway */ transform: translateY(-100%); opacity: 0; /* pointer-events: none when closed — on iOS Safari a fixed element translated off-screen can still intercept touches under some conditions; this guarantees taps pass through to the toggle button below until the menu is actually open. */ pointer-events: none; transition: transform var(--sn-layer-duration) var(--sn-ease-apple), opacity var(--sn-fade-duration) var(--sn-ease-apple); overflow: hidden; /* layers manage their own scroll */ display: flex; flex-direction: column; } .sn-mobile-overlay.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Stack container — holds all layers absolutely positioned on top of each other. flex: 1 fills the overlay below the topbar gap. */ .sn-mobile-overlay__stack { position: relative; flex: 1; overflow: hidden; } /* ────────────────────────────────────────────────────────────── * Layer — one drilled level. Absolutely positioned, full size of * the stack container, animated with transform + opacity. * ────────────────────────────────────────────────────────────── */ .sn-mobile-layer { position: absolute; inset: 0; display: flex; flex-direction: column; /* Opaque background so a parallaxed layer behind doesn't show through the active one. The overlay's frosted-glass effect is still preserved at the chrome edges (header + footer have their own translucent + backdrop-filter rules below). */ background: #ffffff; /* Default state: off-screen right, transparent. */ transform: translateX(100%); opacity: 0; transition: transform var(--sn-layer-duration) var(--sn-ease-apple), opacity var(--sn-layer-duration) var(--sn-ease-apple); pointer-events: none; will-change: transform, opacity; } /* Active state — frontmost layer. */ .sn-mobile-layer.sn-mobile-layer--active { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Exiting state — pushed back into the stack. iOS parallax: slides left at ~70% of full distance, scales down to 0.96, dims to 0.6 opacity. */ .sn-mobile-layer.sn-mobile-layer--exiting { transform: translateX(-30%) scale(0.96); opacity: 0.6; pointer-events: none; } /* Root layer initial state — it's where the user lands when the menu opens, so it starts at translateX(0) with no animation applied until a drill happens. JS sets the active class on the root immediately when the overlay opens. */ .sn-mobile-layer--root { /* No special rule needed; the .is-active class above handles it. */ } /* ────────────────────────────────────────────────────────────── * Layer header — sticky top with back button + section title. * Always visible while the body scrolls. * ────────────────────────────────────────────────────────────── */ .sn-mobile-layer__header { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 16px 18px; border-bottom: 1px solid rgba(25, 44, 41, 0.08); background: #ffffff; min-height: 56px; } .sn-mobile-layer__back { appearance: none; background: transparent; border: 0; padding: 6px 10px 6px 4px; margin: 0; font-size: 15px; font-weight: 500; color: var(--cf-dark, #192c29); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; transition: background var(--sn-fade-duration) var(--sn-ease-apple); } .sn-mobile-layer__back:hover, .sn-mobile-layer__back:focus-visible { background: rgba(25, 44, 41, 0.06); outline: none; } .sn-mobile-layer__back-icon { font-size: 22px; line-height: 1; /* "‹" is the back chevron — visually centered with the label. */ } .sn-mobile-layer__title { flex: 1; margin: 0; font-size: 16px; font-weight: 600; color: var(--cf-dark, #192c29); letter-spacing: -0.01em; text-align: left; } /* When this is the root layer the title aligns where the back would be (no back present); push it slightly so it doesn't look orphaned. */ .sn-mobile-layer--root .sn-mobile-layer__title { padding-left: 6px; } /* Close (×) button — top right corner of every layer for unambiguous "get me out of this menu". */ .sn-mobile-layer__close { appearance: none; background: transparent; border: 0; width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--cf-dark, #192c29); border-radius: 50%; transition: background var(--sn-fade-duration) var(--sn-ease-apple); } .sn-mobile-layer__close:hover, .sn-mobile-layer__close:focus-visible { background: rgba(25, 44, 41, 0.06); outline: none; } .sn-mobile-layer__close-icon { width: 18px; height: 18px; pointer-events: none; } /* ────────────────────────────────────────────────────────────── * Layer body — scrollable list of items. * ────────────────────────────────────────────────────────────── */ .sn-mobile-layer__body { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; /* don't chain to underlying page */ -webkit-overflow-scrolling: touch; padding: 8px 0; } /* Edge swipe-back hit zone — invisible 20px strip on the left edge of any drilled layer (NOT the root). pointer-events on this strip are captured by JS, which interprets a right-swipe as "back". */ .sn-mobile-layer__edge-swipe { position: absolute; top: 0; left: 0; width: 20px; height: 100%; z-index: 2; pointer-events: auto; touch-action: pan-y; /* allow vertical scroll, capture horizontal */ } .sn-mobile-layer--root .sn-mobile-layer__edge-swipe { display: none; /* no back action at root */ } /* ────────────────────────────────────────────────────────────── * List items inside a layer body. * ────────────────────────────────────────────────────────────── */ .sn-mobile-item { position: relative; display: block; text-decoration: none; color: var(--cf-dark, #192c29); padding: 14px 48px 14px 22px; /* right padding leaves room for chevron */ font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; border-bottom: 1px solid rgba(25, 44, 41, 0.06); transition: background var(--sn-fade-duration) var(--sn-ease-apple); } .sn-mobile-item:hover, .sn-mobile-item:focus-visible { background: rgba(25, 44, 41, 0.04); outline: none; } .sn-mobile-item:focus-visible { box-shadow: inset 3px 0 0 var(--cf-leaf, #4a6b68); } /* Active-page indicator: left accent bar + soft tint. */ .sn-mobile-item.is-current { background: rgba(74, 107, 104, 0.06); box-shadow: inset 3px 0 0 var(--cf-leaf, #4a6b68); font-weight: 600; } /* Drill chevron — only for items with a child layer. */ .sn-mobile-item--drill::after { content: "›"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 200; color: rgba(25, 44, 41, 0.35); line-height: 1; pointer-events: none; } /* Sub-item description (from megamenu link.description). */ .sn-mobile-item__desc { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.4; color: rgba(25, 44, 41, 0.65); } /* Group heading inside a drilled layer (from megamenu column.heading). */ .sn-mobile-group { padding: 18px 22px 6px; } .sn-mobile-group__heading { margin: 0; font-size: 11px; font-weight: 600; color: rgba(25, 44, 41, 0.55); text-transform: uppercase; letter-spacing: 0.08em; } /* First group inside a layer doesn't need the extra top padding — the layer body's own 8px already provides air below the header. */ .sn-mobile-layer__body > .sn-mobile-group:first-child { padding-top: 10px; } /* Description-type column (no links, just prose). */ .sn-mobile-group__desc { margin: 4px 22px 8px; padding: 14px 16px; background: rgba(74, 107, 104, 0.06); border-radius: 8px; font-size: 14px; line-height: 1.5; color: var(--cf-dark, #192c29); } /* ────────────────────────────────────────────────────────────── * Featured card — rendered at the TOP of a drilled layer when * the item has megamenu.featured. Hero block with image + label * + title. Apple-style: surfaces the most important thing first. * ────────────────────────────────────────────────────────────── */ .sn-mobile-featured { margin: 14px 18px 8px; display: block; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, rgba(74, 107, 104, 0.10) 0%, rgba(74, 107, 104, 0.04) 100%); text-decoration: none; color: var(--cf-dark, #192c29); transition: transform var(--sn-fade-duration) var(--sn-ease-apple); } .sn-mobile-featured:active { transform: scale(0.985); } .sn-mobile-featured__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: rgba(74, 107, 104, 0.10); } .sn-mobile-featured__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .sn-mobile-featured__label { font-size: 11px; font-weight: 600; color: var(--cf-leaf, #4a6b68); text-transform: uppercase; letter-spacing: 0.1em; } .sn-mobile-featured__title { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } /* ────────────────────────────────────────────────────────────── * Sticky footer — secondary message (small link) above the * primary CTA button. Persists across all layers. * ────────────────────────────────────────────────────────────── */ .sn-mobile-overlay__footer { flex: 0 0 auto; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: #ffffff; border-top: 1px solid rgba(25, 44, 41, 0.08); display: flex; flex-direction: column; gap: 10px; } .sn-mobile-overlay__footer:empty { display: none; /* no cta + no message → collapse footer */ } .sn-mobile-overlay__message { font-size: 13px; text-align: center; color: var(--cf-dark, #192c29); } .sn-mobile-overlay__message a { color: var(--cf-leaf, #4a6b68); text-decoration: none; font-weight: 500; } .sn-mobile-overlay__message a:hover { text-decoration: underline; } .sn-mobile-overlay__cta { display: block; text-align: center; padding: 14px 20px; background: var(--cf-leaf, #4a6b68); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border-radius: 999px; transition: transform var(--sn-fade-duration) var(--sn-ease-apple), background var(--sn-fade-duration) var(--sn-ease-apple); } .sn-mobile-overlay__cta:active { transform: scale(0.98); } .sn-mobile-overlay__cta--link { background: transparent; color: var(--cf-leaf, #4a6b68); border: 1px solid rgba(74, 107, 104, 0.3); } /* Ticker stays visible while the menu is open — it sits above the overlay (the navbar wrapper has z-index 1000, our overlay 999), so users can still see and tap announcements. The previous visibility:hidden rule was removed by request. */ /* Body scroll lock applied on when the menu is open. */ body.sn-menu-open { overflow: hidden; /* JS preserves scroll position via top: -Npx so the body doesn't jump when the menu closes. */ } } /* ────────────────────────────────────────────────────────────── * Reduced-motion fallback — replace the slide+parallax with a * crossfade. The fact that we honor this is itself a premium * polish signal. * ────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .sn-mobile-overlay, .sn-mobile-scrim, .sn-mobile-layer { transition-duration: 150ms !important; transition-timing-function: linear !important; } .sn-mobile-layer.sn-mobile-layer--exiting { transform: none !important; opacity: 0 !important; } .sn-mobile-overlay, .sn-mobile-overlay.is-open { transform: none !important; } } /* ────────────────────────────────────────────────────────────── * Above the breakpoint: nothing the mobile JS built should be * visible. JS already removes the overlay DOM on resize-up, but * belt-and-suspenders: if anything lingers, hide it. * ────────────────────────────────────────────────────────────── */ @media (min-width: 1025px) { .sn-mobile-scrim, .sn-mobile-overlay { display: none !important; } }