/* ──────────────────────────────────────────────────────────────────── * * talks/theme/styles/viewer-mobile.css * * Activates ONLY when . The mode-detect * inline script in `layouts/slide.njk` sets the attribute before * first paint based on viewport size or the `?view=` query param. * * Goal: the slide content flows naturally inside `100vw × 100svh`, * with web-scale typography, recipes preserved, and images capped. * This is intentionally a single-pass override that adapts ~80% of * layouts without per-template tweaks. Slides with absolute * positioning or dense grids may still need bespoke fixes (catalog * the breakages as a follow-up — out of scope for this change). * * Presentation mode (`data-view="presentation"`) is unaffected: this * file uses an attribute selector so its rules never apply outside * mobile view. * ──────────────────────────────────────────────────────────────────── */ /* Disable the page-as-canvas wrapping so the slide flows in normal document order. The inline transform-scale script also bails when data-view=mobile, so `transform: none` here is belt-and-suspenders. */ [data-view="mobile"] body.slide-page { width: 100%; height: auto; min-height: 100svh; overflow: auto; background: var(--charcoal); } [data-view="mobile"] body.slide-page section.slide { position: relative; top: auto; left: auto; width: 100vw; height: auto; min-height: 100svh; /* Override the inline scale transform from the head script, in case the script bail-out fails or the selector specificity changes. */ transform: none !important; transform-origin: 0 0; /* The base slide had 96px / 140px padding tuned for 1920×1080. Drop to a fluid clamp so the slide breathes on phones. */ padding: clamp(20px, 6vw, 56px) clamp(16px, 5vw, 48px); /* Fixed-canvas slides set `overflow: hidden` on .slide; allow it here so long content doesn't get clipped. */ overflow: visible; /* Web-scale slide spacing variable used by overrides below. */ --viewer-stack: clamp(12px, 2.5vw, 24px); } /* ───────── Typography reset ───────── * * Slides use raw px values tuned for 1920×1080 (e.g. 640/240/120/56 * px). Those don't translate to a 360–414px phone viewport. Override * the most common selectors with `clamp()` so they scale fluidly * between 320px and 768px while preserving the original typeface * family/weight/style. The selectors are intentionally broad so the * reset catches `font-size` declarations regardless of which slide * template authored them. !important is required because most slide * CSS files declare `font-size` directly on the element. */ [data-view="mobile"] body.slide-page section.slide h1, [data-view="mobile"] body.slide-page section.slide [class*="display"], [data-view="mobile"] body.slide-page section.slide [class*="data"], [data-view="mobile"] body.slide-page section.slide .big, [data-view="mobile"] body.slide-page section.slide .n { font-size: clamp(32px, 9vw, 72px) !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; /* Some templates use a top-align nudge with `position: relative; top: 100px` for inline percent badges — flatten that here. */ top: auto !important; margin-top: 0 !important; } [data-view="mobile"] body.slide-page section.slide h2, [data-view="mobile"] body.slide-page section.slide .pct, [data-view="mobile"] body.slide-page section.slide .c .t { font-size: clamp(22px, 6vw, 36px) !important; line-height: 1.15 !important; } [data-view="mobile"] body.slide-page section.slide h3, [data-view="mobile"] body.slide-page section.slide .t, [data-view="mobile"] body.slide-page section.slide [class*="title"] { font-size: clamp(18px, 5vw, 28px) !important; line-height: 1.2 !important; } [data-view="mobile"] body.slide-page section.slide p, [data-view="mobile"] body.slide-page section.slide li, [data-view="mobile"] body.slide-page section.slide [class*="body"], [data-view="mobile"] body.slide-page section.slide .ex, [data-view="mobile"] body.slide-page section.slide .d { font-size: clamp(15px, 4vw, 18px) !important; line-height: 1.55 !important; } [data-view="mobile"] body.slide-page section.slide .eb, [data-view="mobile"] body.slide-page section.slide .src, [data-view="mobile"] body.slide-page section.slide [class*="eyebrow"], [data-view="mobile"] body.slide-page section.slide .foot, [data-view="mobile"] body.slide-page section.slide .kicker, [data-view="mobile"] body.slide-page section.slide .index { font-size: clamp(11px, 3vw, 14px) !important; letter-spacing: 0.1em !important; margin-top: 0 !important; margin-left: 0 !important; } /* ───────── Layout reset ───────── * * Several layouts pin children with `position: absolute` to compose * the slide canvas. On mobile we collapse them to natural flow so * every element appears in source order. */ [data-view="mobile"] body.slide-page section.slide > * { position: static !important; inset: auto !important; max-width: 100%; } [data-view="mobile"] body.slide-page section.slide .top, [data-view="mobile"] body.slide-page section.slide .foot, [data-view="mobile"] body.slide-page section.slide .wrap { display: flex; flex-direction: column; gap: var(--viewer-stack); width: 100%; margin: 0 0 var(--viewer-stack); } [data-view="mobile"] body.slide-page section.slide .multiplier .wrap { grid-template-columns: 1fr !important; } /* Two-up / three-up grids fall back to single column. */ [data-view="mobile"] body.slide-page section.slide .grid, [data-view="mobile"] body.slide-page section.slide [class*="cols"], [data-view="mobile"] body.slide-page section.slide [style*="grid-template-columns"] { grid-template-columns: 1fr !important; display: grid !important; gap: var(--viewer-stack) !important; } /* ───────── Media reset ───────── */ [data-view="mobile"] body.slide-page section.slide img, [data-view="mobile"] body.slide-page section.slide svg, [data-view="mobile"] body.slide-page section.slide video, [data-view="mobile"] body.slide-page section.slide iframe { max-width: 100%; height: auto; } /* ───────── Animations ───────── * * The streaming-text effect on headings interferes with scroll-snap * containers (the visibility:hidden flash interrupts the scroll * position). Keep the un-type animation but skip the initial hidden * state on mobile so the slide always paints text immediately. */ [data-view="mobile"] body.slide-page section.slide h1:not([data-streamed]), [data-view="mobile"] body.slide-page section.slide h2:not([data-streamed]), [data-view="mobile"] body.slide-page section.slide h3:not([data-streamed]) { visibility: visible; } /* ───────── Variant HUD ───────── * * The variant HUD lives at `position: fixed; bottom: 24px; right: * 24px` which would obstruct content on a phone. Hide in mobile. */ [data-view="mobile"] .variant-hud { display: none !important; }