/* Thout mobile hardening Loaded LAST in on every page, so it can override compiled Tailwind utilities. Why this file exists: 21 pages ship the pre-compiled dist/styles.css and the repo has no Tailwind build config, so new arbitrary utilities (e.g. lg:min-w-[340px]) cannot be generated. Plain CSS here works on both the compiled pages and the two Tailwind-CDN pages. Fixes the "site sometimes looks zoomed on mobile" report. Root cause was horizontal overflow on narrow phones (<=360px): the document could be panned sideways, which reads as a zoomed/shifted page. Measured before this file: index 9px @320, thout-platform 25px @360 and 65px @320, banking 20px @320. */ /* --------------------------------------------------------------------------- 1. Never allow sideways panning of the document. body already carries overflow-x-hidden on most pages, but the element never clipped, so the document itself still scrolled horizontally. 'clip' is preferred over 'hidden': it does not create a scroll container, so the sticky nav keeps working. 'hidden' is the fallback for older Safari. --------------------------------------------------------------------------- */ html { overflow-x: clip; max-width: 100%; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } /* privacy.html has no overflow-x-hidden on ; cover every page uniformly. */ body { overflow-x: clip; max-width: 100%; } @supports not (overflow-x: clip) { body { overflow-x: hidden; } } /* --------------------------------------------------------------------------- 2. Stop accidental double-tap zoom on things people tap. A quick second tap on a card/link makes mobile browsers zoom in, which is the other way users end up "suddenly zoomed". touch-action: manipulation removes the double-tap-to-zoom gesture on these elements only. Pinch-to-zoom is deliberately left untouched (accessibility). --------------------------------------------------------------------------- */ a, button, summary, [role="button"], [onclick] { touch-action: manipulation; } /* --------------------------------------------------------------------------- 3. Content that could not shrink below the viewport. --------------------------------------------------------------------------- */ /* thout-platform.html: the "Ask your CoS" mock panel has min-w-[340px], a hard floor wider than the content box on a 360px phone (360 - 48px page padding = 312). The floor is only needed once the grid goes two-column at lg. */ @media (max-width: 1023px) { .min-w-\[340px\] { min-width: 0; } } /* Long-press/callout tidiness: keep iOS from inflating text on rotate. (Tailwind preflight already sets 100%; restated here for the CDN pages.) */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* --------------------------------------------------------------------------- 4. Tap target sizes (WCAG 2.2 SC 2.5.8; Apple/Material ~44px guidance). Scoped to coarse pointers so desktop rendering is untouched. Deliberately NOT enlarged: links that sit inline inside a sentence (e.g. "email support@thout.ai", "see the Trust Center"). WCAG exempts inline targets, and forcing a height on them breaks the text line box. Isolated standalone text links are left as-is too: nothing sits within 24px of them, so they already pass via the spacing exception. --------------------------------------------------------------------------- */ @media (pointer: coarse) { /* Hamburger: was 28x24. */ button[aria-label="Menu"] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Mobile menu rows: were ~26px (py-1.5). display:flex keeps them full-width block-level, unlike inline-flex. */ #mobile-menu a { display: flex; align-items: center; min-height: 44px; } /* the Beauty/Banking/Healthcare switcher is a centred 3-up grid */ #mobile-menu .vsw-m a { justify-content: center; } /* Nav + footer link rows: were ~20-22px tall. :not(.block) keeps the full-width mobile-menu rows above out of this. */ nav a:not(.block), footer a { display: inline-flex; align-items: center; min-height: 44px; } /* Buttons everywhere (some sit at 40px). */ .btn { min-height: 44px; } /* Standalone CTA links ("Read our Trust & Security page", "See how each role uses Thout"). Anchors carrying inline-flex are laid-out link-buttons, never plain links inside a sentence, so raising them cannot disturb prose. */ a.inline-flex { min-height: 44px; } /* Hero carousel dots: the worst case at 8x8 (24x8 when active). Keep the dots visually 8px but give each an invisible 24x36 hit box. The 3px side margins widen the pitch to 24px so neighbouring hit boxes tile instead of overlapping (an overlap would send taps to the wrong dot). */ .hero-dot { position: relative; margin-left: 3px; margin-right: 3px; } .hero-dot::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 36px; } }