/* HighDrive HLS background — child theme overrides * * Layout is keyed off the .hdbg-hero class placed directly on the * .custom-header element (our own class, always present when the HLS * hero is active). This is immune to Twenty Seventeen's Customizer JS, * which rewrites className when toggling the light/dark scheme * and would otherwise strip a body-level hook and collapse the hero. * * The dark color scheme (colors-dark.css) paints an opaque #222 * background on / .site-content-contain / .navigation-top / * .main-navigation ul. That opaque background can paint over the * absolutely-positioned hero video, so we neutralise it inside the hero. */ /* Kill any theme background that could cover the hero */ .custom-header.hdbg-hero, .site-header.hdbg-hero, .custom-header-media.hdbg-hero { background: transparent !important; } /* Twenty Seventeen's dark scheme paints the header itself opaque (#262626). * The video is inside that header, so clear both background properties on the * actual masthead rather than only on the .custom-header child. */ .site-header:has(.custom-header.hdbg-hero), #masthead:has(.custom-header.hdbg-hero) { background: transparent !important; background-color: transparent !important; } /* Neutralise the dark scheme's opaque #222 backgrounds over the hero */ body:has(.hdbg-hero).colors-dark, body.colors-dark:has(.hdbg-hero), .colors-dark .site-header.hdbg-hero, .colors-dark .custom-header.hdbg-hero, .colors-dark .site-header:has(.hdbg-hero) { background: transparent !important; background-color: transparent !important; } /* Hero box that holds our layers — keyed on the element class */ .custom-header.hdbg-hero { position: relative !important; height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; } /* Self-contained video layer — no parent rule targets .hdbg-bg */ .hdbg-bg { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 1 !important; } .hdbg-bg .hdbg-video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; background: #000; z-index: 1 !important; pointer-events: none; } /* Centered overlay heading */ .hdbg-overlay { position: absolute !important; inset: 0; z-index: 4 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none; } .hdbg-overlay h1 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(2rem, 5vw, 5rem); color: var(--hdbg-overlay-color, #fff); text-align: center; padding: 2rem; text-shadow: 0 2px 20px var(--hdbg-overlay-shadow, #000); } /* Keep site title readable over the video */ .custom-header.hdbg-hero .site-branding { position: relative; z-index: 4 !important; } /* Fallback for very old engines without :has() — rely on the body hook. (Twenty Seventeen's Customizer may strip this when toggling the scheme, so the element-class rules above are the real fix.) */ .hdbg-active .custom-header { position: relative !important; height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; } .hdbg-active .hdbg-bg { position: absolute !important; inset: 0 !important; z-index: 1 !important; } .hdbg-active .hdbg-bg .hdbg-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; background: #000; z-index: 1 !important; pointer-events: none; } .hdbg-active .hdbg-overlay { position: absolute !important; inset: 0; z-index: 4 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none; } .hdbg-active .site-branding { position: relative; z-index: 4 !important; }