/* Page Transition Effect */ body { background-color: #030303; /* Deep neutral black */ } /* ─── The Black Curtain Overlay ───────────────────────────────────────────── */ /* This is the primary premium cinematic element. It fades out on enter */ /* and fades in on leave, masking the hard URL-load moment between pages. */ #page-transition-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh; /* covers mobile browser chrome resize states */ background-color: #030303; z-index: 999990; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); opacity: 1; /* Starts opaque — curtain is drawn on fresh load */ } body.page-loaded #page-transition-overlay { opacity: 0; } body.page-leaving #page-transition-overlay { opacity: 1; } /* ─── Z-Index: Chrome always above the curtain ─────────────────────────────── */ /* The bottom-nav, header, and drawer are direct children, so they */ /* naturally escape any stacking context. We just pin their z-index above */ /* the overlay to ensure they're always the topmost painted layer. */ .site-header { z-index: 999999 !important; } .bottom-nav { z-index: 999999 !important; } .bottom-frame-top, .bottom-frame-bottom { z-index: 999998 !important; } .nav-drawer { z-index: 9999999 !important; } .nav-drawer-backdrop { z-index: 9999998 !important; } /* ─── Header Title Animation (page-specific chrome) ───────────────────────── */ /* The header title DOES animate per-page since it shows the page name. */ /* The nav icons do NOT animate — they're persistent UI chrome like a */ /* native app tab bar. The curtain provides all the transition coverage. */ .header-title { transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Hidden on fresh load, before page-loaded is applied */ body:not(.page-loaded) .header-title, body.page-leaving .header-title { opacity: 0 !important; transform: translateY(-8px) scale(0.95) !important; filter: blur(4px) !important; } /* ─── Bottom Nav: Fully Persistent, Zero Animation ─────────────────────────── */ /* The bottom-nav renders in its final correct state on every page load. */ /* The black curtain overlay lifts to reveal it — no JS-class animation */ /* necessary. This is the native-app model: the tab bar simply IS there. */ /* CRITICAL: While the curtain is still drawn (body:not(.page-loaded)), suppress ALL transitions on nav items. The nav sits above the curtain (z-index 999999 > 999990), so any CSS transition during the hash-based active-swap is fully visible. We kill transitions here so the nav snaps to its correct final state before the curtain lifts, then transitions resume normally for scroll-based active state changes once page-loaded fires. */ body:not(.page-loaded) .bottom-nav-item { transition: none !important; } /* ─── Fast Transition: brand detail ↔ collection only ─────────────────────── Halves the curtain speed to 0.175 s exclusively when the JS detects a hop between collection.html and a /brands/* page. index.html ↔ collection.html and all other routes are completely unaffected (no class → 0.35 s). */ body.fast-transition #page-transition-overlay { transition-duration: 0.175s !important; } body.fast-transition .header-title { transition-duration: 0.175s !important; }