/** * Full-screen video splash overlay. Sits above every other frontend * layer (sticky header, WooCommerce notices, mobile menu, sliders) via a * deliberately extreme z-index, since Blocksy/WooCommerce layered UI * elsewhere in this theme climbs into the low thousands. */ .hs-splash { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 2147483647; background-color: var(--hs-splash-bg, #0d0d0d); display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 1; transform: scale(1); transition: opacity var(--hs-splash-fade-duration, 400ms) ease, transform var(--hs-splash-fade-duration, 400ms) ease; } .hs-splash__video { width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: var(--hs-splash-fit, cover); object-position: center; background-color: var(--hs-splash-bg, #0d0d0d); pointer-events: none; } /* Below tablet width, full video visibility takes priority over the * Customizer's configured fit: "cover" crops whenever the viewport's * aspect ratio doesn't match the source video, which is the norm on * phones/tablets. Forcing "contain" here (letterboxed on the splash's * own background color) guarantees nothing is ever cropped, in both * portrait and landscape, without needing the Customizer touched. */ @media (max-width: 64rem) { .hs-splash__video { object-fit: contain; } } /* Exit state - toggled by splash-screen.js right before it removes the * overlay from the DOM, never left in place afterwards. */ .hs-splash.hs-splash--exiting { opacity: 0; transform: scale(1.01); pointer-events: none; } /* Scroll lock while the splash is active. Set on only for the * duration of the splash and always cleared by JS on dismissal, so a * failed dismissal path can never leave the site permanently * unscrollable. */ body.asg-splash-active { overflow: hidden; height: 100%; } @media (prefers-reduced-motion: reduce) { .hs-splash { transition-duration: 0.01ms !important; } }