/* culmen-motion.css - 2026-08-19 Loaded last, on purpose. ⚠️ HISTORY (theme-21): the original theme-18 version of this file set body > * { position:relative; z-index:1 } to lift content above the canvas. That flattened every top-level block - INCLUDING Shopify's section wrappers - into one stacking layer, so
(later in DOM order) painted ABOVE the whole header: hero text showed through nav dropdowns AND stole their hover, making panels unreachable. Never layer the canvas that way again. The correct scheme, used below: #netbg at z-index:-1, page background moved to so a negative-z fixed element still shows, body background transparent. No stacking contexts are created; the theme's native z-indexes work untouched. Jobs: 1. Metric strip as a contained rounded band. 2. Animated network background behind all content. 3. Scroll progress pinned; overflow-x clipped at the root (spec-panel glow extends 50px past the viewport on phones); hero's full-bleed border-bottom removed. 4. Nav dropdown hover bridge over the 6px trigger-to-panel gap. */ .strip{border-top:0!important;border-bottom:0!important;background:transparent!important} .strip .strip__in{ border:1px solid rgba(148,163,184,.18); border-radius:16px; background:rgba(255,255,255,.02); overflow:hidden; } /* canvas behind everything, the safe way */ html{ background:#07070B; background-image: radial-gradient(70% 40% at 82% -5%, rgba(103,232,249,.13), transparent 62%), radial-gradient(50% 30% at 8% 4%, rgba(56,189,248,.06), transparent 62%); background-repeat:no-repeat; } body{background:transparent!important;background-image:none!important} #netbg{ position:fixed;inset:0;width:100%;height:100%; z-index:-1;pointer-events:none;opacity:.55; } /* edge fixes */ html,body{overflow-x:clip} .progress{z-index:9999!important} .hero{border-bottom:0!important} /* nav dropdown bridge */ .nav__panel::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}