/** * Shared luxury_base — mobile header scroll behaviour (Options / It's Luxury / Aigner). * * At rest the full header is pinned: promo strip + brand toggle + search row. * Scrolling DOWN slides the tall part off the top and leaves the search row * (which also carries wishlist / bag / menu) pinned as a slim bar. Scrolling * UP — or returning to the top of the page — brings the full header back. * * Why the sticky lives on .page-header and not on #header: * #header's parent is
, whose own box is only as * tall as the header itself, so `position: sticky` on #header would have no * room to travel and would silently do nothing. .page-header's parent is * .page-wrapper, which spans the whole document. Same reasoning as the * existing /categories/ rule in the leaf tailwind-source.css files. * * Why transform and not top/height: * Only transform and opacity are composited. Animating `top`, `height` or * toggling to `position: fixed` forces layout on every frame and makes the * content below jump by the header height at the moment it detaches — that * is the "glitchy" sticky header everyone recognises. The header box never * changes size here; it is translated, so nothing below it ever reflows. * * The two custom properties are written to by the header's Alpine * component (html/header.phtml), measured from the live DOM rather than * hard-coded — the promo strip is dismissible, so the collapse distance is * not a constant. * * Mobile only: the desktop header keeps its static flow + mega-menu flyouts. */ @media (max-width: 1023.98px) { .lux-header-shell { position: sticky; top: 0; z-index: 30; transform: translateY(0); transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1); } /* Collapsed: slide the strip + brand toggle out past the viewport top, leaving the search row sitting at y = 0. */ .lux-header-shell[data-lux-collapsed="true"] { transform: translateY(calc(-1 * var(--lux-header-collapse, 0px))); } /* Escape hatch — the component sets this when there is no slim row to leave behind (the account screens render search-icons as `hidden lg:flex`), so those pages keep the plain, unpinned header they have today rather than pinning a lone brand toggle. */ .lux-header-shell[data-lux-sticky="off"] { position: static; transform: none; transition: none; } /* In-page anchors must clear the pinned slim bar, or a jump lands with its target hidden underneath it. */ html { scroll-padding-top: var(--lux-header-slim, 56px); } } /* Reduced motion: keep the behaviour, drop the slide — the state still flips, it just snaps instead of animating. */ @media (prefers-reduced-motion: reduce) { .lux-header-shell { transition: none; } }