/* sp-mobile-fixes — Sapient Perception mobile optimisations Single source of truth, shared across all pages. Linked LAST in so it wins the cascade over each page's inline styles without editing them. Marker string (do not remove): sp-mobile-fixes */ /* --- Brand webfonts (self-hosted) ---------------------------------------- * Client-supplied WOFF2, latin + latin-ext subsets, in /assets/fonts/: Poppins 300, 300 italic, 400, 500, 500 italic (body) Tomorrow 400 Regular (display / headlines) Exo 2 400, 500, 600 (logo / brand) Only these weights exist as files, so nothing requests a weight we do not have — see the "display weight normalisation" block further down. ~160 KB total, cached for a year via _headers. * ------------------------------------------------------------------------- */ @font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap} /* Tomorrow ships as Regular only (per the brand guide). The 100-500 range maps those requested weights to this one file, so nothing mismatches or gets faux-bolded. */ @font-face{font-family:"Tomorrow";src:url("/assets/fonts/tomorrow-400.woff2") format("woff2");font-weight:100 500;font-style:normal;font-display:swap} @font-face{font-family:"Exo 2";src:url("/assets/fonts/exo2-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Exo 2";src:url("/assets/fonts/exo2-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Exo 2";src:url("/assets/fonts/exo2-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} /* Never fake a weight or a slant we do not ship. */ html{font-synthesis-weight:none;-webkit-font-synthesis:style} /* --- base (all viewports) --- */ h1,h2,h3{overflow-wrap:break-word;word-break:normal} /* never clip long words */ .sub-toggle{display:none} /* caret toggle: mobile-only, injected by JS */ /* floating simulator tabs: hide the pull-tab while its drawer is open; keep drawer above tab */ .rf-tab[aria-expanded="true"],.beam-tab[aria-expanded="true"], .cfg-tab[aria-expanded="true"],.rec-tab[aria-expanded="true"]{opacity:0;visibility:hidden;pointer-events:none;transition:none} .rf-drawer,.beam-drawer,.cfg-drawer,.rec-drawer{z-index:95} /* small phones: tighter gutters + slightly smaller display type */ @media (max-width:480px){ .wrap{padding-left:18px;padding-right:18px} h1{font-size:clamp(1.9rem,7.6vw,2.45rem)} .tech-hero h1{font-size:clamp(1.9rem,7.2vw,2.45rem)} .hero p.lede{font-size:1rem} .spec-cta{flex-direction:column;align-items:stretch} .spec-cta a{white-space:normal} } /* phones/small tablets: dock the pull-tab to bottom-right as a compact pill so it never sits over body copy. transform:none (not a slide) so always-on tabs (cfg/rec) stay visible while Explore's rf/beam tabs remain gated by their own visibility toggle. */ @media (max-width:768px){ .rf-tab,.beam-tab,.cfg-tab,.rec-tab{ top:auto;bottom:14px;right:12px;left:auto;transform:none; writing-mode:horizontal-tb;text-orientation:mixed; border:1px solid var(--cta);border-right:1px solid var(--cta);border-radius:8px; padding:.62rem 1rem;font-size:.68rem;letter-spacing:.13em; gap:.5rem;box-shadow:0 8px 22px rgba(0,0,0,.45); max-width:calc(100vw - 24px);white-space:nowrap; } .rf-tab.on-screen,.beam-tab.on-screen,.cfg-tab.on-screen,.rec-tab.on-screen{transform:none} .rf-drawer,.beam-drawer,.cfg-drawer,.rec-drawer{width:100vw} } /* mobile nav: scrollable panel + collapsible submenus */ @media (max-width:900px){ #site-nav.open{max-height:calc(100vh - 68px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:1rem} .has-sub{display:flex;flex-wrap:wrap;align-items:stretch} .has-sub>a{flex:1 1 auto} .has-sub>.sub{flex:0 0 100%;width:100%} .sub{display:none} .has-sub:hover>.sub,.has-sub:focus-within>.sub{display:none} .has-sub.sub-open>.sub{display:block} .sub-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:58px;min-height:50px;background:none;border:none;border-left:1px solid var(--line);color:var(--text);cursor:pointer} .sub-toggle span{display:block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s} .has-sub.sub-open>.sub-toggle{color:var(--accent)} .has-sub.sub-open>.sub-toggle span{transform:rotate(-135deg);margin-top:3px} } /* === Brand + accessibility layer (audit review, Aug 2026) ================== * Loaded last, so these win over each page's inline