/* ========================================================================== 360photographers — V3 design system (reskin-in-place port). Loaded by app/views/inc/header.php. Nav + footer are namespaced (.v3nav / footer.ft) so this coexists with the legacy style.min.css while page bodies are ported one by one. ========================================================================== */ :root{--bg:#000;--ink:#f5f4f2;--mut:#8b8f98;--acc:#ff7f1a;--card:#17191f; --line:rgba(255,255,255,.08); --d:'Plus Jakarta Sans','Commissioner','Roboto',sans-serif;--w:'Unbounded','Commissioner',sans-serif} /* consistent 16px root for the V3 chrome — legacy style.min.css shrinks html to 50% on small screens, which made the nav/logo tiny on pages (e.g. Terms) that lack the main pages' override */ html{font-size:100%} /* 🚨 MOBILE BLACK BARS (audit teo, Motorola G34). The legacy style.min.css has `@media (max-width:1050px){ main{max-width:100%;padding:0 1.5rem} }` — 24px of side padding on
, which wraps the whole V3 body. Below 1050px that inset every full-bleed V3 element (hero, scrub video, section backgrounds) by 24px a side, so the page sat in a 312px column on a 360px phone with black gutters. It also made `.sec3>.wrap` (92vw = 331px) WIDER than main's 312px content box, which is why the text was clipped on the right. Both symptoms, one cause. Desktop never showed it because the legacy rule is scoped under 1050px. V3 elements manage their own gutters (.wrap = min(1180px,92vw)), so main needs none. */ body main{padding-left:0;padding-right:0;max-width:100%} /* ===== LOW-END DEVICE PATH — html.lowfx, set by the inline script in inc/header.php ===== audit george (Motorola G34): "we need to serve to old mobiles as well, animations stuck etc, make something simple (by device)". Triggered by coarse pointer + <=4GB RAM, or by prefers-reduced-motion. Three things go: stuck reveals, the scroll-scrubbed video heroes, and compositing-heavy blur. Everything stays legible — nothing is hidden, only simplified. 🚨 EVERY hero rule below is scoped to `.vhero[data-vsrc]` ON PURPOSE. It must match EXACTLY the set that v3.js skips (`querySelectorAll('.vhero[data-vsrc]')`) — the inner-page heroes. The HOME hero sections (#vhero, #earth) also carry class="vhero" but have NO data-vsrc: they are initialised explicitly in JS and are deliberately still scrubbed. Scoping these rules to plain `.vhero` collapsed the home hero's 360vh AND forced all 5 of its scroll-revealed .vcue layers visible at once, while its scrub kept running — every headline stacked on top of the next. That is the iPhone bug george reported. Do not loosen these selectors. */ /* 1. reveals can never sit stuck at opacity 0 if the observer misfires on a slow device */ .lowfx .v3 .rev,.lowfx .v3 [data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important} /* 2. the 260vh scrub hero collapses to a plain poster banner. The