/* ============================================================ JINSEN VISION DECK — RESPONSIVE LAYER Per "RESPONSIVE — Plan (review before build).md" (approved). STRUCTURE — three scopes, nothing leaks to desktop: 1. TOUCH @media (hover: none) and (pointer: coarse) — chrome only: hide hover-dependent UI, surface hover-gated content (direction images, red line). 2. STACKED @media (max-width:1024px) and (orientation:portrait), (max-width: 640px) — iPad portrait + phone: grids collapse to 1 column. 3. PHONE @media (max-width: 640px) — the one structural change (.page scrolls), type floors, pagination moved bottom-centre. Desktop (>1024px, or any landscape >640px) matches NONE of these. iPad landscape = desktop, untouched. ============================================================ */ /* ============================================================ 1 — TOUCH CHROME (any touch device, incl. iPad landscape) Nav is swipe-only; pagination stays the visible affordance. ============================================================ */ @media (hover: none) and (pointer: coarse) { /* swipe-only navigation — no edge arrows, no keyboard hint */ .edge { display: none; } .hint { display: none; } /* laser pointer is a desktop cursor feature */ .laser-canvas { display: none !important; } /* pagination must be CLEAR (per director): bigger, brighter ticks */ .folio__ticks { gap: 9px; } .folio__tick { width: 5px; height: 5px; opacity: 0.6; } /* PAGE 6 — direction images are hover-gated on desktop; touch has no hover (and a tap navigates the deck), so show the image. A/B/C remain as the "Direction A/B/C" mono labels below. */ .direction__img { opacity: 1; transform: none; } .direction__letter { opacity: 0; } /* PAGE 3 — the hover-revealed red line: permanently revealed on touch, sitting between the two paragraphs. Hint dots removed. */ .tension-dots { display: none; } .tension-revealer { grid-template-rows: 1fr; margin: var(--space-24) auto; } .tension-revealer > .moment-line { opacity: 1; transform: none; } } /* ============================================================ 2 — STACKED LAYOUT (iPad portrait + phone) Grids → 1 column. No markup changes — CSS re-flow only. ============================================================ */ @media (max-width: 1024px) and (orientation: portrait), (max-width: 640px) { :root { --rail-pad: 28px; } /* utility spans + moment body go full-width */ .col-1-6, .col-1-7, .col-2-7, .col-3-10, .col-7-12, .col-8-12 { grid-column: 1 / -1; } .moment .moment-body { grid-column: 1 / -1; } /* authored
breaks still hold; lines may also wrap if tight */ .page-head { white-space: normal; } /* ---- PAGE 1 — COVER: title top, logo below ---- */ .cover .cover-title { grid-column: 1 / -1; align-self: end; } .cover-title h1 { font-size: clamp(3rem, 8vw, 5rem); } .cover-logo { grid-column: 1 / -1; align-self: start; justify-self: start; max-width: 220px; margin-top: var(--space-40); } /* ---- PAGES 2 / 4 / 7 — RIBBONS stack. DOM order + existing `order` rules give the plan's sequence: p2 carousel→text, p4 text→diagram, p7 text→carousel. ---- */ .ribbon { grid-template-columns: 1fr; row-gap: var(--space-32); min-height: 0; } .ribbon--media-left .ribbon__content { padding-left: 0; } .ribbon--media-right .ribbon__content { padding-right: 0; } .ribbon__media .img-col { height: auto; } .ribbon__media .img-col .imgph { min-height: 0; } .ribbon__media .carousel { height: clamp(220px, 38vh, 420px); flex: 0 0 auto; } /* ---- PAGE 3 — TENSION: headline → image → text → image ---- */ .tension-grid { grid-template-columns: 1fr; row-gap: var(--space-32); } .tension-head .page-head { white-space: normal; font-size: clamp(1.4rem, 4.5vw, 2.2rem); } .tension-media { padding: 0; } .tension-media .imgph { max-width: 300px; } .pill-group { margin-top: var(--space-24); } /* ---- PAGE 5 — SECOND LIFE: text column goes full-width, so the left-fading scrim becomes a top-down scrim for legibility. (Closing slide keeps its own .end-scrim — excluded.) ---- */ .slide-bg__scrim:not(.end-scrim) { background: linear-gradient(180deg, rgba(8,8,12,0.92) 0%, rgba(8,8,12,0.78) 50%, rgba(8,8,12,0.50) 100%); } /* ---- PAGE 6 — THREE DIRECTIONS: 1 column ---- */ .directions { grid-template-columns: 1fr; gap: var(--space-40); } .direction__frame { aspect-ratio: 16 / 10; } .direction__title { min-height: 0; } /* ---- PAGE 8 — REFERENCE: note under header, strip stacks ---- */ .ref-headwrap { flex-direction: column; align-items: flex-start; gap: var(--space-16); } .ref-headwrap__note { flex: 0 1 auto; } .ref-strip--3 { grid-template-columns: 1fr; gap: var(--space-32); height: auto; max-height: none; } .ref-cell .imgph { aspect-ratio: 16 / 10; flex: 0 0 auto; } /* ---- PAGE 9 — TIERS: 1 column (staged reveal unchanged) ---- */ .tiers { grid-template-columns: 1fr; gap: var(--space-24); } .tier { padding: var(--space-48) var(--space-16) var(--space-24); } /* dense slides (3, 6, 8, 9) can exceed one portrait screen even on iPad — let just these pages scroll, top-aligned, so nothing is clipped. (Full scroll model for ALL pages is phone-only, below.) */ .tension .page, .directions-slide .page, .tier-slide .page { align-content: start; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ============================================================ 3 — PHONE (≤ 640px) The ONE approved structural change + type floors + chrome. ============================================================ */ @media (max-width: 640px) { :root { --rail-pad: 20px; } /* ---- THE STRUCTURAL CHANGE (approved): .page leaves the absolute/centered model and becomes a relative, vertically scrollable surface. Horizontal swipe between slides is untouched (JS measures dx only; vertical pan lives inside .page). `safe center` keeps short slides composed, tall slides scroll. ---- */ .slide .page, .tension .page, .moment .page, .tier-slide .page, .directions-slide .page { position: relative; inset: auto; height: 100%; min-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; align-content: start; /* fallback */ align-content: safe center; /* centre when short, scroll when tall */ row-gap: var(--space-24); padding: calc(var(--m-chrome) + 44px) var(--rail-pad) calc(var(--m-chrome) + 56px); /* clears header + bottom dots */ } /* ---- TYPE FLOORS (desktop clamps untouched — these override only inside this query) ---- */ .cover-title h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); } .cover-title .sub { font-size: 1.05rem; margin-top: var(--space-24); } .page-head { font-size: clamp(1.5rem, 6.5vw, 2rem); margin-bottom: var(--space-32); } .tension-head .page-head { font-size: clamp(1.25rem, 5.5vw, 1.6rem); } .rec-head { font-size: clamp(1.7rem, 7.5vw, 2.3rem); } .rec-pick__name { font-size: clamp(1.2rem, 5.5vw, 1.6rem); } .t-body { font-size: 1.05rem; } .tier__list li { font-size: 1.05rem; } .tier__sub { font-size: clamp(1.35rem, 6vw, 1.7rem); } .tier__price { font-size: clamp(1.5rem, 6.5vw, 1.9rem); } .moment-line { font-size: clamp(1.05rem, 4.8vw, 1.3rem); } .pullquote { font-size: 1.1rem; } .pill { font-size: 0.7rem; } .pill .ic { font-size: 16px; } .end-logo { width: 128px; } /* media sizing for a 390px column */ .ribbon__media .carousel { height: clamp(200px, 34dvh, 320px); } .tension-media .imgph { max-width: 260px; } .cover-logo { max-width: 170px; margin-top: var(--space-32); } /* page 5 caption joins the flow instead of pinning bottom-right */ .bg-caption { position: static; grid-column: 1 / -1; margin-top: var(--space-16); } /* ---- CHROME: smaller, tighter to the edge ---- */ .chrome-header--fixed { font-size: 0.5rem; line-height: 1.5; max-width: 56vw; } .folio { font-size: 0.6rem; } .cover-footer { font-size: 0.5rem; max-width: 70vw; } .cover-mark { width: 32px; } /* ---- PAGINATION, made CLEAR (per director): progress dots move to bottom-centre — always visible while scrolling/swiping. "NN / 10" folio stays top-right. ---- */ .folio-dots { top: auto; bottom: calc(var(--m-chrome) + 2px); left: 50%; right: auto; transform: translateX(-50%); margin-right: 0; height: auto; } .folio__ticks { gap: 10px; } .folio__tick { width: 6px; height: 6px; opacity: 0.55; } }