becomes a horizontal scroll-snap track. * Native gesture; no JS swipe handler is loaded. * 100dvh keeps us inside the iOS URL-bar safe area. */ body.slideshow-mobile { overflow: hidden; overscroll-behavior-y: none; } body.slideshow-mobile main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; height: 100dvh; width: 100vw; margin: 0; padding: 0; touch-action: pan-x; scrollbar-width: none; -ms-overflow-style: none; } body.slideshow-mobile main::-webkit-scrollbar { display: none; } /* Each section becomes a fullscreen slide. The reserved bottom * padding (6rem) keeps the per-slide footer copy clear of the * sticky bottom pager. * * v1.2 hid `.hero` and the `.header` on mobile; in slideshow * mode the .hero stays hidden — `#mobile-essential` plays the * role of slide 1 since it already carries the install + iPhone * Companion + Beta CTAs. The other top-level sections * (#shikki-flow / #features / #download / #waitlist) become * slides 2-5. See spec §3 SLIDES table. */ body.slideshow-mobile main > section { flex: 0 0 100vw; width: 100vw; max-width: 100vw; scroll-snap-align: start; scroll-snap-stop: always; height: 100dvh; overflow-y: auto; overflow-x: hidden; padding-bottom: 6rem; margin: 0; box-sizing: border-box; } /* Slideshow mode keeps `.hero` hidden (v1.2 already does); the * `#mobile-essential` block is slide 1. The desktop hero still * renders for SEO bots since it lives in the same DOM. */ body.slideshow-mobile main > section.hero { display: none !important; } /* `#mobile-essential` is slide 1 — undo v1.2's `display: block; * padding 1.75rem` so it sits cleanly inside the slide track. */ body.slideshow-mobile #mobile-essential { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 2rem 1rem 6rem; } /* ── Features sub-stack (vertical pagination) ──────────── * BR-MOB-04: inside the Features slide, sub-cards become a * vertical scroll-snap track. The .feature-substack wrapper is * JS-injected by MobileRouter (W3); the static HTML is * unchanged. The selector matches both wrapper-present and * wrapper-absent states so the wave 1 ship still renders the * Features slide cleanly without W3. */ body.slideshow-mobile #features { padding-bottom: 6rem; } body.slideshow-mobile #features .features-grid { display: block; } body.slideshow-mobile #features .feature-substack { display: flex; flex-direction: column; height: calc(100dvh - 8rem); overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; } body.slideshow-mobile #features .feature-substack::-webkit-scrollbar { display: none; } body.slideshow-mobile #features .feature-substack .feature-card { flex: 0 0 auto; scroll-snap-align: start; scroll-snap-stop: always; min-height: calc(100dvh - 8rem); margin: 0 0 0.5rem; } /* W3 sub-indicator strip (thin, sits inside Features slide). */ body.slideshow-mobile #features .feature-subindicator { display: flex; justify-content: center; gap: 0.4rem; padding: 0.4rem 0; position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, var(--bg) 70%, transparent); } body.slideshow-mobile #features .feature-subindicator-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); opacity: 0.5; } body.slideshow-mobile #features .feature-subindicator-dot[aria-current="true"] { background: var(--accent-primary, var(--purple)); opacity: 1; } /* ── Bottom pager ──────────────────────────────────────── * Sticky pager rendered by JS at body-end. 44x44 hit target per * Apple HIG; the 8px visible dot sits on top of the padding. */ body.slideshow-mobile .mobile-pager { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0)); background: rgba(40, 42, 54, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(189, 147, 249, 0.12); z-index: 100; box-sizing: border-box; } body.slideshow-mobile .mobile-pager-tab { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 44px; min-height: 44px; padding: 6px 8px; background: transparent; border: 0; color: var(--dim); font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.slideshow-mobile .mobile-pager-tab[aria-selected="true"] { color: var(--accent-primary, var(--purple)); } body.slideshow-mobile .mobile-pager-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } body.slideshow-mobile .mobile-pager-tab[aria-selected="true"] .mobile-pager-dot { box-shadow: 0 0 8px currentColor; } /* ── Skip-to-content link (a11y, BR-MOB-A11Y) ──────────── * Hidden off-screen until focused; W6 polishes content + voice. */ body.slideshow-mobile .skip-to-content { position: fixed; top: -100px; left: 0; background: var(--bg); color: var(--fg); padding: 0.5rem 1rem; z-index: 200; text-decoration: none; font-family: var(--mono); font-size: 0.75rem; border: 1px solid var(--purple); border-top: 0; } body.slideshow-mobile .skip-to-content:focus { top: 0; } /* ── Off-pager fullscreen overlays (waitlist, contact) ─── * BR-MOB-05: hash-route triggered. W4 implements * renderInline() entry points; W2 wires the .is-fullscreen * class so the overlay layers above the active slide. */ body.slideshow-mobile .is-fullscreen { position: fixed; inset: 0; z-index: 90; background: var(--bg); overflow-y: auto; overflow-x: hidden; padding: 1.5rem 1rem 6rem; } /* Hide cosmetic surfaces that don't fit in slideshow framing. */ body.slideshow-mobile .header { display: none; } body.slideshow-mobile .scroll-cue { display: none; } body.slideshow-mobile .mobile-more-link { display: none; } body.slideshow-mobile .footer { display: none; } /* R8 mitigation: discoverability chevron on Hero slide. The * affordance fades after 2s OR first interaction (W2 wires the * timer + interaction listener; CSS just paints it). */ body.slideshow-mobile .mobile-pager-cue { position: fixed; right: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--accent-primary, var(--purple)); font-size: 1.5rem; pointer-events: none; opacity: 0; z-index: 50; animation: mobile-pager-cue-pulse 1.5s ease-in-out 1.6s 2; } @keyframes mobile-pager-cue-pulse { 0%, 100% { opacity: 0; transform: translate(0, -50%); } 50% { opacity: 0.7; transform: translate(-6px, -50%); } } } /* Reduced-motion override (BR-MOB-07). * Native scroll-snap continues to work; only the easing + pulses go. */ @media (max-width: 480px) and (prefers-reduced-motion: reduce) { body.slideshow-mobile main { scroll-behavior: auto; } body.slideshow-mobile .mobile-pager-tab[aria-selected="true"] .mobile-pager-dot { box-shadow: none; } body.slideshow-mobile .mobile-pager-cue { animation: none; opacity: 0; } }