/* Anywr Toolkit — Sticky Header Two axes: behavior (always | hide) + appearance (solid | glass). Sticky sits on the OUTER template-part header; glass makes the inner header transparent so the blur shows content scrolling underneath. */ /* --- Sticky (both behaviors) --------------------------------------------- */ .anywr-hd-always .wp-site-blocks > header.wp-block-template-part, .anywr-hd-hide .wp-site-blocks > header.wp-block-template-part, .anywr-hd-always > header.wp-block-template-part, .anywr-hd-hide > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } /* --- Glass appearance ----------------------------------------------------- */ .anywr-hd-glass .wp-site-blocks > header.wp-block-template-part, .anywr-hd-glass > header.wp-block-template-part { background: rgba( 255, 255, 255, var( --anywr-hd-opacity, .65 ) ) !important; -webkit-backdrop-filter: blur( var( --anywr-hd-blur, 14px ) ); backdrop-filter: blur( var( --anywr-hd-blur, 14px ) ); border-bottom: var( --anywr-hd-border, 1px solid rgba( 20, 18, 26, .08 ) ); box-shadow: 0 4px 30px -12px rgba( 20, 18, 26, .12 ); } /* inner header transparent so the blur is visible */ .anywr-hd-glass header.anywr-header.has-background, .anywr-hd-glass header.wp-block-template-part > header.anywr-header { background: transparent !important; } /* --- Hide-on-scroll behavior (JS toggles the classes) -------------------- */ .anywr-hd-hide .wp-site-blocks > header.wp-block-template-part, .anywr-hd-hide > header.wp-block-template-part { transition: transform .3s ease, box-shadow .3s ease; will-change: transform; } .anywr-sticky--pinned { transform: translateY( 0 ); } .anywr-sticky--unpinned { transform: translateY( -100% ); } .anywr-sticky--top { box-shadow: none; } @media ( prefers-reduced-motion: reduce ) { .anywr-hd-hide header.wp-block-template-part { transition: none; } .anywr-sticky--unpinned { transform: none; } } /* --- Nav overlay (portaled to by overlay-portal.js) --------------- */ /* Once relocated to body the overlay has no transformed ancestor, so its own core `position: fixed` resolves against the viewport correctly. This just guarantees it layers above the sticky header. */ body > .wp-block-navigation__responsive-container.is-menu-open { z-index: 100000; } /* --- Disable sticky on mobile ------------------------------------------- */ @media ( max-width: 781px ) { .anywr-hd-no-mobile .wp-site-blocks > header.wp-block-template-part, .anywr-hd-no-mobile > header.wp-block-template-part { position: static; transform: none !important; z-index: auto; } }