/* ============================================================ 05 · TOUCH & SMALL SCREENS Loads LAST so it can correct earlier rules without raising specificity anywhere else. ---- THE RULE THIS FILE FOLLOWS ---- The phone must show the SAME site as the desktop: same sections, same copy, same 3D, same order. Nothing here hides a section or swaps in a "mobile version". Every block is gated behind one of (pointer:coarse) finger, not mouse (hover:none) no hover state exists (max-height:...) landscape phones / short windows so a desktop browser never matches any of it, and its rendering is exactly what it was before this file existed. The layout itself was already fluid — measured at 375px there was zero horizontal overflow on every page type. What was missing was touch ergonomics, iOS safe areas, and landscape headroom. ============================================================ */ /* ------------------------------------------------------------ 1 · SAFE AREAS (iPhone notch / home indicator) Every page ships viewport-fit=cover, which lets the background paint into the notch and home-indicator strips. That is what we want for the dark 3D backdrop, but text and tap targets have to stay out of them — held sideways, the notch covers ~44px of one edge. max() keeps the existing padding wherever it is already the larger of the two, so nothing shrinks. ------------------------------------------------------------ */ @supports (padding:max(0px)){ .wrap{ padding-left:max(clamp(24px,6vw,72px), env(safe-area-inset-left)); padding-right:max(clamp(24px,6vw,72px), env(safe-area-inset-right)); } #nav .in{ padding-left:max(clamp(20px,9vw,144px), env(safe-area-inset-left)); padding-right:max(clamp(20px,9vw,144px), env(safe-area-inset-right)); } .scene{ padding-left:max(clamp(24px,9vw,144px), env(safe-area-inset-left)); padding-right:max(clamp(24px,9vw,144px), env(safe-area-inset-right)); } #mobmenu{ padding-left:max(clamp(24px,8vw,60px), env(safe-area-inset-left)); padding-right:max(clamp(24px,8vw,60px), env(safe-area-inset-right)); padding-bottom:env(safe-area-inset-bottom); } .foot{padding-bottom:max(40px, env(safe-area-inset-bottom))} } /* ------------------------------------------------------------ 2 · VIEWPORT-UNIT FALLBACK 100svh — the viewport measured with the browser chrome showing — is the right unit for the sticky stages: it can never be taller than what the visitor can actually see, so a scene never hides its own bottom edge behind the URL bar. It needs iOS 15.4 / Chrome 108 though, and a browser that does not know `svh` drops the whole declaration and falls back to height:auto, which collapses the sticky stack into a normal scroll. The vh lines below are only ever read by those older browsers. ------------------------------------------------------------ */ .scene{height:100vh;height:100svh} .sp-hero{min-height:100vh;min-height:100svh} /* ------------------------------------------------------------ 3 · TAP TARGETS (pointer:coarse only) Measured on a 375px viewport: footer column links were 21px tall, the legal bar 16px, breadcrumbs 14px, the "remember me" checkbox 13px. WCAG 2.2 asks for 24px minimum; 44px is the size a thumb actually hits first time. These are fixed with an invisible ::after overlay rather than with padding, so NOTHING MOVES. The text keeps its exact position and the footer keeps its exact height — only the region that responds to a finger grows. The overlays of two stacked links do overlap: the footer list has a 33px pitch and each overlay is 43px tall. That is fine and in fact wanted — the later sibling paints on top, so the shared strip belongs to the lower link and the column is partitioned with no dead gaps between rows. Measured result: every footer link answers to a band ~54px tall (was 21px), and the legal bar ~67px (was 16px). ------------------------------------------------------------ */ @media (pointer:coarse){ /* footer link columns — 21px tall, 12px apart */ .foot-cols a{position:relative} .foot-cols a::after{content:'';position:absolute;inset:-11px -10px} /* footer legal bar — 16px tall */ .foot-legal a{position:relative;display:inline-block} .foot-legal a::after{content:'';position:absolute;inset:-14px -10px} /* breadcrumbs, on every sub-page — 14px tall */ .crumb a{position:relative;display:inline-block} .crumb a::after{content:'';position:absolute;inset:-15px -8px} /* social + contact links (footer and contact page) */ .sociallink{position:relative} .sociallink::after{content:'';position:absolute;inset:-12px -8px} /* "Forgot password?" / "Sign up" / "Sign in" inline links */ /* the legal line under the sign-up form — "Terms", "Privacy" at 15px */ /* Contact details written as inline links inside a paragraph — the phone, e-mail and WhatsApp rows on the contact page, ~19px tall. Matched by protocol rather than by class because they are plain tags with an inline colour and nothing else. Anything already wearing .btn is 43px and is left alone. */ a[href^="mailto:"]:not(.btn):not(.sociallink), a[href^="tel:"]:not(.btn):not(.sociallink), a[href^="https://wa.me"]:not(.btn):not(.sociallink), a[href*="instagram.com"]:not(.btn):not(.sociallink){ position:relative;display:inline-block; } a[href^="mailto:"]:not(.btn):not(.sociallink)::after, a[href^="tel:"]:not(.btn):not(.sociallink)::after, a[href^="https://wa.me"]:not(.btn):not(.sociallink)::after, a[href*="instagram.com"]:not(.btn):not(.sociallink)::after{ content:'';position:absolute;inset:-13px -8px; } /* the header wordmark, which is also the link home — 29px tall */ #nav .brand{position:relative} #nav .brand::after{content:'';position:absolute;inset:-9px -8px} /* the checkbox itself, which an overlay cannot fix. The