/* ══════════════════════════════════════════════════════════════════ Sticky header utilities body.scrolled is toggled by scroll-state.js when the user scrolls past the initial header height. Opt any element into sticky behavior by adding one of these CSS classes via Elementor → Advanced → CSS Classes (or Astra header row custom class). ══════════════════════════════════════════════════════════════════ */ /* Element becomes fixed-to-top when the page is scrolled. */ body.scrolled .collect-sticky-on-scroll { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); animation: collect-sticky-fade-in 0.3s ease; } /* Element is hidden on scroll (e.g. utility/announcement bar above the main nav). */ body.scrolled .collect-hide-on-scroll { display: none !important; } /* Prevent content jump when the header becomes fixed. Apply to whichever container was providing the header's vertical space (often itself via a padding-top). scroll-state.js measures and exposes --collect-sticky-offset. */ body.scrolled .collect-sticky-offset { padding-top: var(--collect-sticky-offset, 90px); } @keyframes collect-sticky-fade-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } /* On narrow screens, disable sticky behavior (mobile headers are usually compact enough that a static header reads better and leaves more room). */ @media (max-width: 768px) { body.scrolled .collect-sticky-on-scroll { position: static; box-shadow: none; animation: none; } body.scrolled .collect-sticky-offset { padding-top: 0; } body.scrolled .collect-hide-on-scroll { display: revert !important; } }