@charset "UTF-8"; /* ===================================================================== GRIPT — MOBILE LAYER --------------------------------------------------------------------- Everything here lives inside @media (max-width: 768px) and overrides main.css and the per-page stylesheets. It is enqueued LAST (functions.php, priority 100), and every selector is prefixed with `#g ` (the id on , header.php:84), so every rule in this file has at least one ID of specificity. That beats any class-only selector in the page sheets, which is what a mobile layer needs: loading last is not enough when the competing rule is more specific. :root becomes `#g` (the custom properties still cascade to every descendant of body). `body` becomes `#g`. `body:has(...)` becomes `#g:has(...)`. Anything else gets `#g ` prepended. The prefix is applied by scratchpad/prefix_mobile.py; specificity is verified by scratchpad/check_specificity.py, which must report zero losses after any edit here. !important is needed in exactly one place, on `#g #fullcmp`, and only because full-comparison.js writes an inline `min-width` (a specificity boost cannot beat inline). That is commented where it happens. Why a CSS layer and not separate mobile templates: production runs Breeze + Varnish. Server-side splitting on wp_is_mobile() would let one device's HTML get cached and served to the other. One HTML per URL, one cache entry, no device detection. Design source: prototypes/mobile-2026/ (approved 2026-08-30). ===================================================================== */ @media (max-width: 768px) { #g { /* Horizontal spacing is exactly three numbers. Nothing is allowed to invent a fourth. --m-gut the page gutter. Header, bar, footer, every section. --m-pad-card the inside of a card or panel. --m-pad-row the inside of a dense list row or small cell. */ --m-gut: 20px; --m-pad-card: 16px; --m-pad-row: 13px; /* Content column cap. The @media (max-width: 768px) block also fires on 700-760px viewports (unfolded foldables, small tablets in portrait), where a stretched mobile layout reads as broken — long lines of text, a bar whose two buttons sprawl. Cap the content and centre it: the fixed nav/bar/intro-bar stay full-bleed so the page still looks phone-shaped, but the reading column stays sane. */ --m-content-max: 480px; /* Header height and action-bar height. Content never hides under either; the body padding at the bottom is derived from --m-bar. */ --m-hdr: 52px; --m-bar: 72px; /* Every hero has to clear the fixed nav (52px). Desktop uses --hero-pad-top: clamp(80px, 10vw, 140px) which is enough at any viewport, but on a phone that eats a third of the first screen on whitespace, so the mobile figure is nav + 28px. The intro CTA bar adds its measured height when visible. */ --m-hero-pad-top: calc(var(--m-hdr) + 28px); } #g:has(.intro-cta-bar.is-visible) { --m-hero-pad-top: calc(var(--m-hdr) + var(--intro-bar-h, 46px) + 28px); } /* ── HEADER ────────────────────────────────────────────────────────── Logo left, hamburger right, nothing else. main.css centres the "Start free trial" pill in the header, but that identical button is already in the fixed bar at the bottom of the screen, a thumb-length closer to the thumb. Two of the same CTA on one screen is one wasted slot, so the header gives its middle back to the page. */ /* #nav, not `nav`. .breadcrumb is also a