/* ════════════════════════════════════════════════════════════════ MOIRA · LANDING — MOBILE REFINEMENT LAYER Loads AFTER moira-landing-v5.css + v6.css. Mobile-only overrides; desktop layout is untouched. No new colors, fonts, or content. A · Product mockups size to content (never clip) ≤880 B · Anchor offset under the fixed nav ≤820 C · One regular vertical rhythm (the big fix) ≤600 D · Hero headline + CTA at phone scale ≤600 E · Density & tap-target polish ≤600 / ≤380 ════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── A · "What we're building" — let every card visual grow to fit. On desktop the screens are position:absolute inside height-locked boxes (tuned for landscape cards). At phone width the column is narrow, text wraps taller, and the Plan/Chat screens overflow and clip. Below 880 the stack is already static — here we also let the visuals flow so the product is shown whole. ────────────────────────────────────────────────────────────── */ @media (max-width:880px){ .wstack .work-card .wc-vis, .wstack .work-card:first-child .wc-vis{height:auto;min-height:0} /* device + voice screens: flow instead of absolute-fill */ .wstack .wc-vis.dk .dev{position:relative;inset:auto;padding-bottom:14px} .wstack .wc-vis.dk .voice{position:relative;inset:auto;height:auto;gap:18px;padding:18px} .wstack .wc-vis.dk .chat{flex:initial;min-height:0} .wstack .wc-vis.dk .ob-flow{flex:initial} /* the console screenshot: show the whole frame, not a cropped corner */ .wstack .work-card .wc-vis.shot{height:auto} .wstack .work-card .wc-vis.shot img{height:auto;object-fit:contain} /* ── The stack effect, kept on mobile (tuned for phones) ── The desktop pile is frosted glass lit by a glow behind it — with blur off on mobile that reads murky. So instead: solid opaque cards that pile under the nav, each revealing a stacked top edge. Explicit nth-child selectors override v5's static fallback. */ .wstack::before{display:none} .wstack .work-card, .wstack .work-card:nth-child(2), .wstack .work-card:nth-child(3), .wstack .work-card:nth-child(4), .wstack .work-card:nth-child(5){ position:sticky; background:#1C1C20; -webkit-backdrop-filter:none;backdrop-filter:none; border-color:rgba(247,246,242,.14); box-shadow:inset 0 1px 0 rgba(247,246,242,.07), 0 -14px 30px -20px rgba(0,0,0,.9), 0 26px 56px -30px rgba(0,0,0,.7)} .wstack .work-card{top:72px;z-index:1} .wstack .work-card:nth-child(2){top:82px;z-index:2} .wstack .work-card:nth-child(3){top:92px;z-index:3} .wstack .work-card:nth-child(4){top:102px;z-index:4} .wstack .work-card:nth-child(5){top:112px;z-index:5} } /* ────────────────────────────────────────────────────────────── B · Anchor offset — menu links land below the fixed nav, not under it ────────────────────────────────────────────────────────────── */ @media (max-width:820px){ html{scroll-padding-top:74px} } /* ────────────────────────────────────────────────────────────── C · ONE REGULAR VERTICAL RHYTHM — generous, but a deliberate scale The fix was never "less space" — it was making the space *consistent*. A single 3-tier scale, applied to every section the same way: BREAK (between sections) → ~56px · the big breath BLOCK (head→body, intros) → ~30px · the medium step UNIT (within a block) → ~18px · the small step ────────────────────────────────────────────────────────────── */ @media (max-width:600px){ body{--sec-pad:clamp(50px,12.5vw,62px)} /* BREAK */ /* the spec-sheet section header */ .sec-head{margin-bottom:30px;padding-top:14px;gap:14px} /* BLOCK */ /* belief */ .belief-grid,.whynow-grid{margin-top:28px} /* BLOCK */ .belief .b-body{margin-top:18px} /* UNIT */ .belief .b-kicker{margin-top:20px} /* UNIT */ /* founders */ .founders .fo-intro{margin-bottom:30px} /* BLOCK */ .fo-grid{padding-top:28px} /* BLOCK */ .fo-close{margin-top:34px;padding-top:26px} /* what changes */ .changes .ch-intro{margin-bottom:30px} /* BLOCK */ /* commitments */ .commit-lead h2{margin-top:0} .ledger{margin-top:28px} /* BLOCK */ /* what we're building */ .ws-head{margin-bottom:26px} /* BLOCK */ .wstack{gap:22px} /* invitation + film interiors */ .invite .inv-grid{gap:34px} .filmsec .fs-grid{gap:30px} } /* ────────────────────────────────────────────────────────────── D · Hero — fluid headline (no hard floor), tidy CTA ────────────────────────────────────────────────────────────── */ @media (max-width:600px){ /* airy hero restored — fills the screen, content centered */ .hwedge{font-size:clamp(40px,11.2vw,58px);line-height:1.04} .hwedge .hw-grey{font-size:.46em;margin-bottom:.40em} /* CTA: centered primary button + quiet film link beneath it */ .hero--vision .hero-cta{flex-direction:column;align-items:center;gap:14px} .hero--vision .hero-cta .btn{width:100%;max-width:340px;justify-content:center} .filmlink{padding:4px 10px} .hero--vision .hero-sub{font-size:16.5px;max-width:40ch; margin-top:clamp(22px,5vw,30px);margin-bottom:clamp(28px,6vw,36px)} } /* ────────────────────────────────────────────────────────────── E · Density & tap-target polish — calm the wall of big statements ────────────────────────────────────────────────────────────── */ @media (max-width:600px){ /* lead statement headlines share one calmer size so the page stops shouting every section (they floored at 28–30 and stacked) */ .belief .b-lead, .whynow .wn-stmt, .founders .fo-intro, .changes .ch-intro, .filmsec .fs-h{font-size:clamp(24px,6.4vw,29px);line-height:1.16} .commit-lead h2{font-size:clamp(26px,7vw,32px);line-height:1.12} /* film: a touch more compact so play + timecode sit comfortably */ .film .play{width:64px;height:64px} .film .ftime{top:calc(47% + 50px)} /* why-now globe: cap size so it doesn't dominate the fold */ .reach-globe{max-width:300px} /* founders portrait at a calmer scale */ .fc-portrait{width:clamp(68px,18vw,82px)} /* commitments: comfortable thumb-scanning rows */ .lrow{padding-top:15px;padding-bottom:15px} /* invitation form sits flush, comfortable padding */ .form-card{padding:22px} } /* ── very small (≤380) ── */ @media (max-width:380px){ .hwedge{font-size:clamp(34px,11.2vw,52px)} .hero--vision .hero-sub{font-size:16px} .reach-globe{max-width:270px} }