/* Zip Zap Chargers — mobile & tablet layer * =========================================================================== * DESKTOP IS LOCKED. Every rule in this file lives inside a max-width media * query, so nothing here can reach the approved desktop rendering (>1024px). * * The pages are authored with inline styles, which outrank stylesheets — so * these rules use attribute selectors (matching the inline style text) plus * !important. That is what makes a generic mobile layer possible without * rewriting 17 pages of markup. No markup was changed to support this file. * * Breakpoints are 767.98 / 767.99 rather than 767 / 768 on purpose. A browser * can report a fractional viewport width (page zoom, scaled displays, some * tablet split views): at 767.5px neither "max-width: 767" nor "min-width: 768" * matched, so the page briefly fell back to the desktop layout inside a 768px * viewport and the header overflowed by ~113px. The fractional bounds close * that gap without moving either breakpoint. * =========================================================================== */ /* ======================= MOBILE ( <= 767px ) ============================ */ /* ============= CONTAINMENT ( <= 1024px, one query, no gaps ) ============= * Overflow containment is deliberately NOT left to the phone/tablet queries * alone: a fractional viewport (767.98…px) can fall between them, and for that * hairline the page would be uncontained. One query covering everything below * the desktop breakpoint means the intentional overhangs — the press logo * marquee, the scroll-reveal transforms, the decorative radial glows — are * always clipped. `clip`, never `hidden`: hidden would make these scroll * containers and kill the sticky header. * ========================================================================== */ @media (max-width: 1024px) { html, body { overflow-x: clip !important; max-width: 100% !important; } /* The glows are `position: absolute; inset: -4%`, so they hang ~11px past a 768px viewport from INSIDE the app root, where a clip on alone never reaches them. */ #dc-root { overflow-x: clip !important; max-width: 100% !important; } [style*="mask-image: linear-gradient"] { overflow: hidden !important; max-width: 100% !important; } img, video, svg, iframe, canvas { max-width: 100% !important; } } @media (max-width: 767.98px) { /* --- 1. Overflow containment ------------------------------------------ */ html { -webkit-text-size-adjust: 100%; } /* `clip` rather than `hidden`: hidden would turn these into scroll containers and kill the sticky header. clip contains the two intentional overhangs — the scroll-reveal transforms on Our Story and the logo marquee on Custom Branding — without disabling either animation. */ html, body { overflow-x: clip !important; max-width: 100% !important; } img, video, svg, iframe, canvas { max-width: 100% !important; height: auto; } video { height: auto !important; } /* Anything explicitly wider than the viewport gets reined in */ [style*="width: 340px"], [style*="width: 440px"], [style*="width: 250px"] { max-width: 100% !important; } /* --- 2. Header --------------------------------------------------------- */ /* Scoped :not([aria-label="Menu"]) throughout: the menu drawer is also a