/* * Meridian — Navigation & Header/Footer CSS * * Covers: sticky header, transparent header variant, minimal header, * mega menu, search overlay, mobile drawer, footer newsletter form, * social links, and utility icon buttons. */ /* ========================================================================= * CSS Custom Properties — header-specific tokens * ====================================================================== */ :root { --meridian-header-height: 72px; --meridian-header-bg: var(--wp--preset--color--surface); --meridian-header-bg-transparent: transparent; --meridian-header-border: 1px solid var(--wp--preset--color--neutral-100); --meridian-header-shadow: 0 1px 24px rgba(15, 15, 15, 0.08); --meridian-header-z: 900; --meridian-overlay-z: 890; } /* ========================================================================= * Site Header — outer sticky wrapper * ====================================================================== */ header.site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: var(--meridian-header-z); background-color: var(--meridian-header-bg); border-bottom: var(--meridian-header-border); transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Scrolled state — JS adds .is-scrolled */ header.site-header.is-scrolled { box-shadow: var(--meridian-header-shadow); border-bottom-color: transparent; } /* Admin bar offset */ .admin-bar header.site-header { top: 32px; } @media (max-width: 782px) { .admin-bar header.site-header { top: 46px; } } /* ========================================================================= * Transparent header variant (for hero/lookbook pages) * * Fixed-position so it overlays the full-viewport hero image from y=0. * A dark gradient provides enough contrast for white nav links over any * background image. On scroll the gradient is swapped for a solid fill. * ====================================================================== */ header.site-header--transparent { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(15,15,15,0.60) 0%, rgba(15,15,15,0) 100%); border-bottom-color: transparent; box-shadow: none; /* Promote the header to its own GPU compositing layer so mobile * Safari doesn't lag repainting it while the address bar * collapses/expands during scroll (it would otherwise visually * "ghost" mid-viewport). IMPORTANT: do this with `will-change` * only — do NOT put an actual `transform` value (e.g. * translateZ(0)/translate3d(0,0,0)) on this element. iOS Safari has * a long-standing bug where a `transform` on a `position:fixed` * element makes it position relative to the *layout* viewport * instead of the *visual* viewport, so once the address bar * collapses the header renders a gap above it (looks "dropped" * down the page instead of pinned to the very top). `will-change: * transform` alone still forces layer promotion without that side * effect. */ will-change: transform, background; } /* Mobile nav open — clear will-change:transform from the transparent header. * * will-change:transform (required above to prevent iOS Safari GPU-compositing * lag during scroll) is a double-edged sword: it creates a NEW CONTAINING * BLOCK for every position:fixed descendant. The mobile nav drawer uses * position:fixed to cover the viewport, but being inside this element it * is instead positioned relative to the header's own bounds — appearing as * a ~72px strip rather than a full-screen overlay. * * Clearing will-change while the overlay is open restores normal fixed * positioning semantics. The `:has()` selector handles this in pure CSS * (Chrome 105+, Safari 15.4+, Firefox 121+); the `.is-nav-open` class is * toggled by a MutationObserver in functions.php for older browsers. */ @media (max-width: 781px) { header.site-header--transparent:has( .wp-block-navigation__responsive-dialog[open], .wp-block-navigation__responsive-dialog.is-menu-open, .wp-block-navigation__responsive-container.is-menu-open ), header.site-header--transparent.is-nav-open { will-change: auto; } } /* Admin bar offset — fixed, so must be explicit */ .admin-bar header.site-header--transparent { top: 32px; } @media (max-width: 782px) { .admin-bar header.site-header--transparent { top: 46px; } } /* Nav links + icons — white over the dark gradient */ header.site-header--transparent:not(.is-scrolled) .wp-block-navigation a, header.site-header--transparent:not(.is-scrolled) .wp-block-navigation-item__label { color: var(--wp--preset--color--surface); } /* Restore dark colour on nav items when the mobile drawer is open. * * The rule above cascades into the open drawer: every and label inside * .wp-block-navigation (the