/* ========================================================================== Unfolded — Landing page stylesheet -------------------------------------------------------------------------- Scope: ONLY the marketing homepage (templates/index.html). Loaded after the shared brand stylesheet without affecting other pages. Every rule is scoped under `.landing-page` (the class on index.html) so nothing leaks into the shared internal-page system. Brand palette (only these values + alpha variations are used here): paper #F8F2E6 warm neutral #EEE2D6 terracotta #A15F4C deep rust #7C4A38 dark brown #2C2622 ========================================================================== */ /* ========================================================================== HERO DESIGN TOKENS -------------------------------------------------------------------------- Scoped to .landing-page (not :root) so they never leak into other pages — this file is only loaded on the homepage. RGB triplets exist alongside the hex values so alpha-blended hero text/surfaces can read `rgb(var(--paper-rgb) / 0.68)` instead of hardcoding rgba(...) per rule. ========================================================================== */ /* Tokens — page chrome reset (UA body margin → cream gutters) lives in site.css (`html:has(.landing-page)` + `.landing-page` margin/background). This file owns hero / header / memory only. */ .landing-page { --font-display: "Newsreader", serif; --font-body: "Instrument Sans", sans-serif; --paper: #f8f2e6; --paper-rgb: 248, 242, 230; --warm-neutral: #eee2d6; --terracotta: #a15f4c; --deep-rust: #7c4a38; --ink: #2c2622; --ink-rgb: 44, 38, 34; --header-light: #f8f2e6; --header-dark: #2c2622; --header-fg: var(--header-dark); /* Homepage scale follows the shared site grid from site.css. */ --section-space-large: var(--section-space); --section-space-medium: var(--section-space-compact); --display-large: clamp(4.5rem, 6.4vw, 7.2rem); --display-medium: clamp(3.8rem, 5vw, 6rem); --display-small: clamp(3rem, 4vw, 4.8rem); } /* Homepage sections 3–6 only: tighter vertical rhythm. Later sections (privacy, demo, founder, waitlist) keep site.css defaults. */ .landing-page .tx.u-section, .landing-page .u-section:has(.archive-title), .landing-page .u-section#features, .landing-page .u-section:has(.audiences-title) { padding-block: var(--section-space-medium); } /* ========================================================================== HERO — full-viewport cinematic band -------------------------------------------------------------------------- Header + headline + CTAs sit over the supplied layered memory artwork. These rules neutralise the shared `.hero` styling from index.css (dark fill, flex layout, the stacked box-shadow) so nothing from the old hero shows through. Type: Newsreader (display) + Instrument Sans (supporting copy) ========================================================================== */ .landing-page .landing-hero { position: relative; z-index: 5; isolation: isolate; /* True full-bleed first viewport — no outer margin/radius/frame. (Body margin was the cream gutter; keep these zeroes defensive.) */ width: 100%; max-width: none; margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; /* index.css .hero is a centred flexbox; in grid context its justify-content/align-items would shrink the column track to max-content, so both are reset here. */ justify-content: stretch; align-items: normal; overflow: hidden; padding: 0; text-align: center; /* Fallback only — the photograph lives on ::after so it can be graded without filtering the headline/CTAs. */ background-color: #5c4034; background-image: none; border: 0; outline: 0; border-radius: 0; box-shadow: none !important; /* clears the stacked legacy .hero shadow */ } /* Minimal local grade: enough contrast for copy while keeping the light in the supplied plate present. The visual scene itself is DOM imagery below. */ .landing-page .landing-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(57, 37, 29, 0.18) 0%, rgba(57, 37, 29, 0.05) 43%, rgba(57, 37, 29, 0.1) 100% ); pointer-events: none; } /* Colour grade: deepen brown/rust shadows, cool the pale highlights a touch, keep terracotta identity without a pumpkin wash. */ .landing-page .landing-hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient( ellipse 52% 43% at 50% 48%, rgba(71, 44, 34, 0.02) 30%, rgba(57, 37, 29, 0.14) 100% ); } /* 2.5D memory-space ------------------------------------------------------ */ .landing-page .memory-scene { --memory-px: 0px; --memory-py: 0px; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #b9875d; } .landing-page .memory-scene__layer { position: absolute; inset: -2.5%; overflow: hidden; transform: translate3d( calc(var(--memory-px) * var(--memory-depth)), calc(var(--memory-py) * var(--memory-depth)), 0 ); will-change: transform; } .landing-page .memory-scene__layer img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } .landing-page .memory-scene__layer--room { /* The complete room remains one continuous plate. Its restrained drift gives the doorway, steps and sphere physical presence without ever separating them into a second cutout. */ --memory-depth: 0.3; } .landing-page .memory-scene__layer--room img { animation: memory-room-breathe 31s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate; } .landing-page .memory-scene__arch-depth { position: absolute; inset: -2.5%; z-index: 1; display: block; /* Keep the transparent extraction proportional to its native frame. Cover sizing follows the base plate at every viewport, while the overscan keeps its transparent crop edge outside the hero. */ width: 105%; height: 105%; max-width: none; object-fit: cover; object-position: center; pointer-events: none; animation: memory-arch-depth-breathe 31s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate; } @keyframes memory-room-breathe { 0% { transform: translate3d(-0.4px, 0.2px, 0) scale(1.002); } 51% { transform: translate3d(0.6px, -0.35px, 0) scale(1.004); } 100% { transform: translate3d(0.15px, 0.25px, 0) scale(1.0025); } } @keyframes memory-arch-depth-breathe { 0% { transform: translate3d( calc(var(--memory-px) * 0.3 - 0.4px), calc(var(--memory-py) * 0.3 + 0.2px), 0 ) scale(1.002); } 51% { transform: translate3d( calc(var(--memory-px) * 0.3 + 0.6px), calc(var(--memory-py) * 0.3 - 0.35px), 0 ) scale(1.004); } 100% { transform: translate3d( calc(var(--memory-px) * 0.3 + 0.15px), calc(var(--memory-py) * 0.3 + 0.25px), 0 ) scale(1.0025); } } /* Transparent hoopoe sprite — wide wingspan + crest; no plate mask. */ .landing-page .memory-scene__bird { position: absolute; z-index: 3; top: 29%; left: 14%; width: clamp(72px, 6vw, 96px); aspect-ratio: 786 / 495; overflow: visible; opacity: 0; mix-blend-mode: multiply; filter: sepia(0.08) saturate(0.9) contrast(0.94); transform-origin: 48% 55%; animation: memory-bird-flight 19.4s cubic-bezier(0.43, 0, 0.57, 1) var(--bird-delay, 1.1s) infinite; will-change: transform, opacity; } .landing-page .memory-scene__bird img { width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; /* Dreamlike soft plate — figure stays pointer-events none via parent. */ opacity: 0.8; } .landing-page .memory-scene__bird--echo { z-index: 2; opacity: 0; filter: blur(2px) sepia(0.1) saturate(0.7); animation-delay: calc(var(--bird-delay, 1.1s) + 0.45s); } .landing-page .memory-scene__shadow { position: absolute; z-index: 2; top: 69%; left: 13%; width: clamp(40px, 4.2vw, 72px); height: clamp(6px, 0.65vw, 11px); border-radius: 50%; background: rgba(69, 43, 29, 0.26); filter: blur(8px); mix-blend-mode: multiply; opacity: 0; animation: memory-bird-shadow 19.4s cubic-bezier(0.43, 0, 0.57, 1) calc(var(--bird-delay, 1.1s) + 0.7s) infinite; will-change: transform, opacity; } /* Asset faces left; path is predominantly L→R so keep scaleX(-1). No mid-path flip. Parent opacity gates the pass; img opacity (0.8) keeps crest soft (~0.72–0.8 effective). */ @keyframes memory-bird-flight { 0%, 7% { transform: translate3d(-7vw, 5px, 0) rotate(-6deg) scale(0.84) scaleX(-1); opacity: 0; } 12% { opacity: 0.9; } 28% { transform: translate3d(22vw, -10px, 0) rotate(-2deg) scale(0.91) scaleX(-1); opacity: 1; } 43% { transform: translate3d(40vw, -21px, 0) rotate(4deg) scale(0.94) scaleX(-1); opacity: 0.96; } 55% { transform: translate3d(35vw, -16px, 0) rotate(-5deg) scale(0.92) scaleX(-1); opacity: 0.9; } 76% { transform: translate3d(69vw, 2px, 0) rotate(6deg) scale(0.87) scaleX(-1); opacity: 0.7; } 89%, 100% { transform: translate3d(88vw, 14px, 0) rotate(5deg) scale(0.81) scaleX(-1); opacity: 0; } } @keyframes memory-bird-shadow { 0%, 13% { transform: translate3d(-5vw, 0, 0) scaleX(0.78); opacity: 0; } 30% { transform: translate3d(18vw, 1px, 0) scaleX(1.02); opacity: 0.12; } 49% { transform: translate3d(34vw, 4px, 0) scaleX(1.22); opacity: 0.08; } 61% { transform: translate3d(30vw, 2px, 0) scaleX(1.04); opacity: 0.1; } 79% { transform: translate3d(63vw, 0, 0) scaleX(0.86); opacity: 0.04; } 100% { transform: translate3d(82vw, 0, 0) scaleX(0.74); opacity: 0; } } /* Content column ---------------------------------------------------------- */ .landing-page .landing-hero .landing-hero__content { grid-row: 1; place-self: center; position: relative; z-index: 4; /* Top padding clears the fixed header; extra bottom weight keeps the block slightly below true vertical centre. */ width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max-width)); margin-inline: auto; padding: 88px 0 56px; } .landing-page .landing-hero .landing-hero__content::before { content: ""; position: absolute; z-index: -1; inset: -18% -9%; pointer-events: none; background: radial-gradient( ellipse at center, rgba(59, 37, 28, 0.34) 0%, rgba(59, 37, 28, 0.14) 43%, transparent 72% ); } .landing-page .landing-hero .landing-hero__title { font-family: var(--font-display); font-weight: 500; font-style: normal; font-size: clamp(3.9rem, 5.6vw, 6.2rem); line-height: 0.95; letter-spacing: -0.045em; color: #f8f2e6; text-shadow: 0 2px 24px rgba(46, 29, 22, 0.32); max-width: 980px; margin: 0 auto 34px; text-align: center; text-wrap: balance; } .landing-page .landing-hero .landing-hero__copy { font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.4; color: rgba(248, 242, 230, 0.86); text-shadow: 0 1px 14px rgba(46, 29, 22, 0.4); max-width: 580px; margin: 0 auto 58px; } /* CTA row ----------------------------------------------------------------- */ .landing-page .landing-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(42px, 5vw, 72px); margin-top: 0; } .landing-page .hero-cta__label { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .landing-page .hero-cta__arrow { display: inline-flex; align-items: center; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .landing-page .hero-cta__arrow svg { display: block; width: 22px; height: 10px; } /* Primary — solid terracotta on the cinematic hero (Quiet Archive CTAs; glass / backdrop-filter / translucent fills are forbidden here). */ /* Liquid Glass pill — cream translucent fill + backdrop blur so the button reads clearly over the hero photograph. Matches iOS 26 pill from Figma. */ .landing-page .hero-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 22px; isolation: isolate; color: var(--paper, #f8f2e6); text-decoration: none; background: rgba(180, 130, 70, 0.35); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1.5px solid rgba(255, 255, 255, 0.65); outline: none; border-radius: 100px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 2px rgba(255, 255, 255, 0.10), 0 8px 22px -6px rgba(0, 0, 0, 0.30), 0 2px 6px -1px rgba(0, 0, 0, 0.18); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .landing-page .hero-primary:hover { transform: translateY(-1px); background: rgba(180, 130, 70, 0.50); border-color: rgba(255, 255, 255, 0.90); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(255, 255, 255, 0.18), 0 12px 28px -6px rgba(0, 0, 0, 0.40), 0 4px 10px -2px rgba(0, 0, 0, 0.22); } .landing-page .hero-primary:hover .hero-cta__arrow { transform: translateX(4px); } .landing-page .hero-primary:focus-visible { outline: 2px solid rgb(var(--paper-rgb) / 0.72); outline-offset: 4px; } /* Secondary — text only, clearly subordinate to the primary action. The underline lives under the label only (arrow excluded) so the arrow can still shift right on hover without dragging a line through it. */ /* Same Liquid Glass pill as .hero-primary so all hero CTAs share the same weight (matches START WITH A MEMORY on how-it-works too). */ .landing-page .hero-secondary { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 22px; color: var(--paper); text-decoration: none; background: rgba(180, 130, 70, 0.35); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1.5px solid rgba(255, 255, 255, 0.65); border-radius: 100px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 2px rgba(255, 255, 255, 0.10), 0 8px 22px -6px rgba(0, 0, 0, 0.30), 0 2px 6px -1px rgba(0, 0, 0, 0.18); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .landing-page .hero-secondary::after { display: none; } .landing-page .hero-secondary:hover { transform: translateY(-1px); background: rgba(180, 130, 70, 0.50); border-color: rgba(255, 255, 255, 0.90); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(255, 255, 255, 0.18), 0 12px 28px -6px rgba(0, 0, 0, 0.40), 0 4px 10px -2px rgba(0, 0, 0, 0.22); } .landing-page .hero-secondary:hover::after { display: none; } .landing-page .hero-secondary:hover .hero-cta__arrow { transform: translateX(4px); } .landing-page .hero-secondary:focus-visible { outline: 2px solid rgb(var(--paper-rgb) / 0.72); outline-offset: 4px; border-radius: 3px; } .landing-page .hero-brand:focus-visible, .landing-page .hero-burger:focus-visible { outline: 2px solid color-mix(in srgb, var(--header-fg) 90%, transparent); outline-offset: 4px; border-radius: 8px; } /* Entrance — a single restrained focus reveal, then supporting content. */ @keyframes hero-title-reveal { to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes hero-content-reveal { to { opacity: 1; transform: translateY(0); } } @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } } .landing-page .landing-hero .landing-hero__title { opacity: 0; transform: translateY(16px); filter: blur(6px); animation: hero-title-reveal 650ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards; } .landing-page .landing-hero .landing-hero__copy { opacity: 0; transform: translateY(12px); animation: hero-content-reveal 700ms ease forwards; animation-delay: 420ms; } .landing-page .landing-hero .landing-hero__actions { opacity: 0; transform: translateY(10px); animation: hero-content-reveal 700ms ease forwards; animation-delay: 540ms; } .landing-page .hero-header { animation: hero-fade 520ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* Tablet ------------------------------------------------------------------ */ @media (max-width: 1024px) { .landing-page .memory-scene__bird { width: clamp(58px, 6.8vw, 76px); } .landing-page .landing-hero .landing-hero__title { font-size: clamp(3.5rem, 6.5vw, 5.1rem); max-width: 820px; } .landing-page .landing-hero__actions { gap: 42px; } } /* Mobile ------------------------------------------------------------------ */ @media (max-width: 700px) { .landing-page .memory-scene__layer--room img { object-position: 34% center; } .landing-page .memory-scene__bird { top: 26%; width: clamp(46px, 12.5vw, 58px); opacity: 0; } .landing-page .memory-scene__shadow { display: none; } .landing-page .landing-hero .landing-hero__content { width: min(calc(100% - 2 * var(--page-gutter)), 620px); padding: 16px 0 36px; } .landing-page .landing-hero .landing-hero__content::before { inset: -14% -6%; background: radial-gradient( ellipse at center, rgba(46, 29, 22, 0.55) 0%, rgba(46, 29, 22, 0.28) 46%, transparent 74% ); } .landing-page .landing-hero .landing-hero__title { font-size: clamp(2.75rem, 9.5vw, 4rem); line-height: 1.08; letter-spacing: -0.028em; margin-bottom: clamp(20px, 4vw, 28px); max-width: 100%; overflow-wrap: break-word; text-wrap: pretty; } .landing-page .landing-hero .landing-hero__copy { font-size: 1rem; line-height: 1.45; color: rgba(248, 242, 230, 0.94); text-shadow: 0 1px 16px rgba(46, 29, 22, 0.55), 0 0 2px rgba(46, 29, 22, 0.35); max-width: 34ch; margin-bottom: 36px; } .landing-page .landing-hero__actions { flex-direction: column; gap: 12px; width: 100%; max-width: 320px; margin-inline: auto; } .landing-page .hero-primary { min-width: 0; width: 100%; } .landing-page .hero-secondary { justify-content: center; min-height: 44px; opacity: 1; text-shadow: 0 1px 14px rgba(46, 29, 22, 0.55); } } /* Reduced motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .landing-page .memory-scene__layer, .landing-page .memory-scene__layer img, .landing-page .memory-scene__arch-depth, .landing-page .memory-scene__bird, .landing-page .memory-scene__shadow { animation: none !important; transition: none !important; } /* One quiet static hoopoe — no flight, no echo, no shadow chase. */ .landing-page .memory-scene__bird { opacity: 0.85; transform: translate3d(18vw, -8px, 0) rotate(-4deg) scale(0.92) scaleX(-1); } .landing-page .memory-scene__bird img { opacity: 0.72; } .landing-page .memory-scene__bird--echo, .landing-page .memory-scene__shadow { display: none; } .landing-page .landing-hero .landing-hero__title, .landing-page .landing-hero .landing-hero__copy, .landing-page .landing-hero .landing-hero__actions { animation: none !important; opacity: 1; transform: none; filter: none; } .landing-page .hero-header { animation: none !important; opacity: 1; transform: none; } .landing-page .hero-cta__arrow, .landing-page .hero-primary, .landing-page .hero-secondary, .landing-page .hero-secondary::after { transition: none !important; } } /* ========================================================================== HOMEPAGE REFINEMENTS — product, audience, privacy, founders, waitlist Scoped here so the shared brand-page system stays unchanged. ========================================================================== */ /* Compact navigation becomes a quiet bird mark + existing menu control. */ .landing-page .hero-header[data-state="compact-light"] .hero-brand__wordmark, .landing-page .hero-header[data-state="compact-dark"] .hero-brand__wordmark { width: 0; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; } .landing-page .hero-header[data-state="compact-light"] .hero-brand, .landing-page .hero-header[data-state="compact-dark"] .hero-brand { gap: 0; } .landing-page .hero-header[data-state="compact-light"] .hero-brand__mark, .landing-page .hero-header[data-state="compact-dark"] .hero-brand__mark { width: 30px; } /* Equal product phones — one calm aligned row rather than a hierarchy. */ .landing-page .how-product-preview.product-phone-stage, .landing-page .archive-product-preview.product-phone-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; justify-content: center; gap: clamp(42px, 5.5vw, 96px); min-height: 0; margin-top: clamp(54px, 5.2vw, 78px); } .landing-page .how-product-preview .product-phone, .landing-page .archive-product-preview .product-phone { display: block; width: 100%; aspect-ratio: 473 / 1024; border-radius: 16px; opacity: 1; box-shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.07), 0 10px 24px rgb(var(--ink-rgb) / 0.06); } .landing-page .how-product-preview .product-phone--primary, .landing-page .how-product-preview .product-phone--support, .landing-page .archive-product-preview .product-phone--primary, .landing-page .archive-product-preview .product-phone--support { width: 100%; grid-area: auto; align-self: stretch; justify-self: auto; } .landing-page .how-product-preview .product-phone--primary, .landing-page .archive-product-preview .product-phone--primary { transform: none; z-index: 2; } .landing-page .how-product-preview .product-phone--left, .landing-page .how-product-preview .product-phone--right, .landing-page .archive-product-preview .product-phone--left, .landing-page .archive-product-preview .product-phone--right { transform: none; } /* Editorial split header and level, three-up archive sequence. */ .landing-page .how-intro-title span { display: block; margin-top: 0.16em; color: var(--terracotta); font-size: 0.43em; line-height: 1.1; letter-spacing: -0.025em; } .landing-page .ar__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; max-width: none; } .landing-page .ar__head .u-h2 { grid-column: 1 / span 6; } .landing-page .ar__head .u-lede { grid-column: 8 / -1; } .landing-page .ar__head .u-label { display: none; } .landing-page .ar__head .u-h2 { margin: 0; } .landing-page .ar__head .u-lede { margin: clamp(10px, 1.2vw, 18px) 0 0; max-width: 32ch; font-size: clamp(1.12rem, 1.45vw, 1.42rem); line-height: 1.4; } /* Shared 12-column mapping for homepage chapter introductions. */ .landing-page .tx__head { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; } .landing-page .tx__head > :first-child { grid-column: 1 / span 6; } .landing-page .tx__copy { grid-column: 8 / -1; } .landing-page .how-intro-copy { max-width: var(--content-measure); } .landing-page .archive-product-preview.product-phone-stage { max-width: none; margin-top: clamp(40px, 4.6vw, 70px); } .landing-page .archive-closing-statement { margin-top: clamp(42px, 5vw, 74px); font-size: clamp(2rem, 3.2vw, 3.35rem); } /* Audience cards: large personal lead left, two compact extension cards stacked right. Tall enough for title + body + CTA without overlap; still intended to read as one desktop composition. */ .landing-page .u-section:has(.audiences-title) { padding-block: clamp(32px, 4.8vh, 64px); } .landing-page .aud__head { max-width: none; width: 100%; margin: 0; margin-bottom: 0; } .landing-page .aud__head .u-label { margin-bottom: 8px; } .landing-page .audiences-title { max-width: 14ch; font-size: clamp(2.2rem, 3.1vw, 3.55rem); line-height: 0.96; } .landing-page .aud__grid--personal-first { width: 100%; max-width: none; margin: clamp(20px, 2.6vh, 32px) 0 0; display: grid; /* Lead wider; right stack narrower so extension cards read smaller. */ grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); grid-template-rows: repeat(2, minmax(0, 1fr)); /* Wider gutters while cards stay compact enough for one screen. */ gap: clamp(18px, 1.6vw, 26px); align-items: stretch; /* Room for 3-line extension copy + CTA; avoid max-height squeeze. */ min-height: clamp(360px, 52vh, 460px); max-height: min(500px, 58vh); } .landing-page .aud__panel { border: 1px solid rgb(var(--ink-rgb) / 0.055); border-radius: 14px; background: var(--warm-neutral); box-shadow: inset 0 1px 0 rgb(var(--paper-rgb) / 0.62), 0 1px 2px rgb(var(--ink-rgb) / 0.025); transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); overflow: hidden; min-height: 0; } .landing-page .aud__panel--lead { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; padding: 0; margin: 0; aspect-ratio: auto; border-bottom: 0; background: var(--warm-neutral); height: 100%; /* Override site.css `align-items: center` so the media column stretches full card height — photo top meets the “For you” title band. */ align-items: stretch; align-content: stretch; } .landing-page .aud__panel--lead .aud__media { grid-row: 1 / -1; align-self: stretch; justify-self: stretch; height: 100%; min-height: 100%; max-height: none; aspect-ratio: unset; margin: 0; border-radius: 0; } .landing-page .aud__panel--lead .aud__body { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; /* Match extension body top pad so “For you” isn’t stuck to the card edge. */ padding: clamp(12px, 1.2vw, 18px) clamp(18px, 1.8vw, 28px) clamp(16px, 1.6vw, 24px); min-width: 0; min-height: 0; align-self: stretch; height: 100%; box-sizing: border-box; } .landing-page .aud__panel--lead .aud__body .audience-panel-title, .landing-page .aud__panel--lead .aud__body h3 { margin: 0; padding: 0; line-height: 1; flex-shrink: 0; } .landing-page .aud__panel--extension { grid-column: 2; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); column-gap: 0; align-items: stretch; max-width: none; padding: 0; min-height: 0; height: 100%; } .landing-page .aud__panel--extension .aud__media { align-self: stretch; height: 100%; min-height: 0; max-height: none; aspect-ratio: unset; margin: 0; border-radius: 0; } .landing-page .aud__panel--extension .aud__body { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: clamp(12px, 1.2vw, 18px); min-width: 0; min-height: 0; height: 100%; box-sizing: border-box; } .landing-page .aud__panel--extension .aud__body .audience-panel-title, .landing-page .aud__panel--extension .aud__body h3 { margin: 0; padding: 0; flex-shrink: 0; } .landing-page .aud__panel .aud__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .landing-page .aud__panel--lead .aud__media img { /* Tall crop; keep the frame flush with the card/heading band. */ object-position: center 35%; } /* Unified card titles — same size across lead + extension panels. */ .landing-page .aud__panel--lead h3, .landing-page .aud__panel--lead .audience-panel-title, .landing-page .aud__panel--extension h3, .landing-page .aud__panel--extension .audience-panel-title { font-size: clamp(1.05rem, 1.2vw, 1.3rem); } .landing-page .aud__panel--lead .audience-panel-copy, .landing-page .aud__panel--lead p { font-size: clamp(0.88rem, 0.95vw, 1.02rem); line-height: 1.42; flex: 0 1 auto; margin: 0; } .landing-page .aud__panel--extension .audience-panel-copy, .landing-page .aud__panel--extension p { font-size: clamp(0.78rem, 0.85vw, 0.9rem); line-height: 1.38; min-height: 0; flex: 0 1 auto; margin: 0; } .landing-page .aud__examples, .landing-page .aud__extensions-label { display: none; } .landing-page .aud__cta { margin-top: auto; padding-top: 10px; flex-shrink: 0; color: var(--terracotta); } .landing-page .aud__panel--extension .aud__cta { padding-top: 8px; font-size: 0.78rem; /* Override site.css ink mute — keep terracotta like the lead CTA. */ color: var(--terracotta); } @media (hover: hover) { .landing-page .aud__panel:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(var(--paper-rgb) / 0.76), 0 4px 8px rgb(var(--ink-rgb) / 0.04), 0 18px 34px rgb(var(--ink-rgb) / 0.075); } } /* Dark privacy chapter, compacted and given a quiet icon-text rhythm. */ .landing-page .u-section:has(.priv__inner) { padding-block: var(--section-space-compact); } .landing-page .priv__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); } .landing-page .priv__inner > :first-child { grid-column: 1 / span 6; } .landing-page .priv__inner > :last-child { grid-column: 8 / -1; } .landing-page .priv__mark { width: 38px; height: 38px; margin-bottom: 22px; } .landing-page .priv__support { margin-top: 22px; } .landing-page .priv__item { padding: clamp(18px, 2vw, 25px) 0; } .landing-page .priv__item-head { display: flex; align-items: center; gap: 13px; } .landing-page .priv__item-icon { width: 20px; height: 20px; flex: 0 0 auto; color: rgb(var(--paper-rgb) / 0.68); } .landing-page .priv__item h3 { margin: 0; } .landing-page .priv__item p { margin: 9px 0 0 33px; } /* Equal founder profiles, under the statement rather than competing with it. */ .landing-page .fnote__people { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 38px); margin-top: clamp(26px, 3vw, 36px); } .landing-page .fnote__people .fnote__sign { margin: 0; min-width: 205px; } .landing-page .fnote__people .fnote__avatar { width: 56px; height: 56px; } /* Left column: heading + About CTA stacked. */ .landing-page .fnote__intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.6vw, 32px); } .landing-page .fnote__intro .u-h2 { margin: 0; } .landing-page .fnote__cta { margin-top: 0; } .landing-page .fnote__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); } .landing-page .fnote__inner > :first-child { grid-column: 1 / span 5; } .landing-page .fnote__inner > :last-child { grid-column: 8 / -1; } /* Capabilities uses the same guide system, with its editorial image and six principles occupying deliberate twelve-column spans. */ .landing-page .u-wrap.cap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 40px; } .landing-page .cap__intro { grid-column: 1 / span 6; padding-right: 0; } .landing-page .cap__visual { grid-column: 8 / -1; max-width: none; } .landing-page .cap__item { grid-column: span 4; } /* Waitlist — cream paper close; hoopoe portrait rises from the section floor. */ /* Beat site.css `.landing-page .u-section#waitlist` padding so the figure can sit flush on the bottom edge (padding-bottom: 0) instead of floating. */ .landing-page .u-section.wl#waitlist { --waitlist-space: clamp(72px, 7.5vw, 120px); padding-top: var(--waitlist-space); padding-bottom: 0; background: var(--paper); color: var(--ink); /* ponytail: visible so crest/jacket aren't clipped by section bounds */ overflow: visible; } .landing-page .u-section.wl { background: var(--paper); color: var(--ink); } .landing-page .wl::after, .landing-page .wl__bg { display: none; } .landing-page .wl__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); max-width: none; margin: 0 auto; /* Stretch so the figure column can grow to the title band height. */ align-items: stretch; min-height: clamp(480px, 52vw, 640px); } .landing-page .wl__layout > :first-child { grid-column: 1 / span 6; } /* Start figure column one track later for cream air beside the form. */ .landing-page .wl__layout > :last-child { grid-column: 9 / -1; } .landing-page .wl__inner { max-width: 34rem; /* Title defines the top edge the figure should reach. */ align-self: start; padding-bottom: var(--waitlist-space); } .landing-page .wl__title { color: var(--ink); max-width: 14ch; margin: 0; } .landing-page .wl__copy { color: rgb(var(--ink-rgb) / 0.72); } .landing-page .wl__label { color: rgb(var(--ink-rgb) / 0.64); } .landing-page .wl__form { gap: 12px; margin-top: clamp(28px, 3vw, 40px); } .landing-page .wl__input { border-color: var(--terracotta); background: transparent; color: var(--ink); } .landing-page .wl__input::placeholder { color: rgb(var(--ink-rgb) / 0.46); } .landing-page .wl__input:focus { outline-color: var(--deep-rust); border-color: var(--deep-rust); } .landing-page .wl__fine { color: rgb(var(--ink-rgb) / 0.56); } .landing-page .wl__image-slot { display: flex; align-items: flex-end; justify-content: flex-end; align-self: stretch; min-height: 0; height: 100%; margin: 0; /* Full portrait — no clip; container sizes to the contained image. */ overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .landing-page .wl__image-slot img { display: block; /* Full crest→jacket: contain (never cover). Bound to column, no crop. */ width: auto; height: auto; max-width: 100%; max-height: 100%; margin-left: auto; object-fit: contain; object-position: bottom right; transform: none; } .landing-page .how-product-preview.product-phone-stage { max-width: none; } @media (max-width: 760px) { /* These are all `u-wrap` elements. Their section-specific mobile rules reset them to 100% width, cancelling the safe homepage gutter. Restore the standard container edge without changing section presentation. */ .landing-page .u-wrap.fnote__inner, .landing-page .u-wrap.priv__inner, .landing-page .u-wrap.cap { width: min( calc(100% - 2 * var(--page-gutter)), var(--page-max-width) ); max-width: none; margin-inline: auto; } .landing-page .landing-hero, .landing-page .memory-scene, .landing-page .memory-scene__layer, .landing-page .memory-scene__layer img, .landing-page .memory-scene__arch-depth { width: 100%; max-width: 100%; } .landing-page .landing-hero { min-height: 100svh; overflow: clip; } .landing-page .landing-hero__content { width: 100%; max-width: none; padding-inline: var(--page-gutter); } .landing-page .landing-hero__actions { max-width: 100%; } /* Contain hero/arch overscan + any leftover desktop width leaks */ .landing-page { overflow-x: clip; } .landing-page .memory-scene__layer, .landing-page .memory-scene__arch-depth { inset: 0; width: 100%; height: 100%; max-width: 100%; } .landing-page .how-product-preview.product-phone-stage, .landing-page .archive-product-preview.product-phone-stage { grid-template-columns: minmax(0, 1fr); justify-content: center; justify-items: center; gap: 16px; overflow-x: hidden; margin-inline: 0; padding: 0; min-height: 0; } .landing-page .how-product-preview .product-phone--support, .landing-page .archive-product-preview .product-phone--support { display: none; } .landing-page .how-product-preview .product-phone--primary, .landing-page .archive-product-preview .product-phone--primary { width: min(72vw, 280px); max-width: 280px; transform: none; } .landing-page .tx__head, .landing-page .ar__head { display: grid; grid-template-columns: 1fr; width: 100%; max-width: none; gap: clamp(20px, 4vw, 28px); margin-bottom: clamp(28px, 5vw, 36px); } .landing-page .tx__head > :first-child, .landing-page .tx__copy, .landing-page .ar__head .u-h2, .landing-page .ar__head .u-lede { grid-column: auto; grid-row: auto; max-width: none; width: 100%; } .landing-page .u-section:has(.audiences-title) { padding-block: clamp(56px, 10vw, 80px); } .landing-page .aud__grid--personal-first { width: 100%; grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; min-height: 0; max-height: none; margin-top: 28px; } .landing-page .aud__panel--lead, .landing-page .aud__panel--extension { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; height: auto; min-height: 0; align-items: stretch; } .landing-page .aud__panel--lead .aud__media, .landing-page .aud__panel--extension .aud__media { aspect-ratio: 16 / 10; height: auto; min-height: 140px; } .landing-page .aud__panel--lead .aud__body, .landing-page .aud__panel--extension .aud__body { padding: clamp(18px, 4.5vw, 24px); height: auto; } .landing-page .priv__inner { grid-template-columns: 1fr; } .landing-page .priv__inner > :first-child, .landing-page .priv__inner > :last-child { grid-column: auto; grid-row: auto; position: relative; inset: auto; transform: none; max-width: none; width: 100%; } .landing-page .priv__item p { margin-left: 0; } /* Founder note — single vertical flow; quote before CTA via contents/order */ .landing-page .fnote__inner { display: flex; flex-direction: column; grid-template-columns: 1fr; gap: clamp(28px, 6vw, 36px); min-width: 0; box-sizing: border-box; } .landing-page .fnote__inner > :first-child, .landing-page .fnote__inner > :last-child { grid-column: auto; grid-row: auto; position: relative; inset: auto; transform: none; width: 100%; max-width: none; } .landing-page .fnote__intro, .landing-page .fnote__inner > div { display: contents; } .landing-page .fnote__intro .u-h2 { order: 1; width: 100%; max-width: 100%; min-width: 0; } .landing-page .fnote__quote { order: 2; width: 100%; max-width: 100%; min-width: 0; margin: 0; font-size: clamp(1.6875rem, 7vw, 2.125rem); line-height: 1.35; overflow-wrap: anywhere; } .landing-page .fnote__cta { order: 3; width: fit-content; max-width: 100%; } .landing-page .fnote__cta .u-btn { width: fit-content; max-width: 100%; padding-inline: 28px; white-space: normal; text-align: center; } .landing-page .fnote__people { order: 4; display: grid; gap: 28px; margin-top: 0; width: 100%; max-width: 100%; min-width: 0; } .landing-page .fnote__people .fnote__sign { min-width: 0; width: 100%; max-width: 100%; margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; } .landing-page .fnote__people .fnote__avatar { width: 72px; height: 72px; } .landing-page .fnote__name { font-size: clamp(1rem, 3.8vw, 1.1rem); } .landing-page .fnote__role { font-size: clamp(0.75rem, 2.8vw, 0.85rem); } .landing-page .fnote__sign > div:last-child, .landing-page .fnote__sign p { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } /* Capabilities — full-width stack; kill desktop column spans */ .landing-page .u-wrap.cap { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; align-items: stretch; } .landing-page .cap__intro, .landing-page .cap__visual, .landing-page .cap__item, .landing-page .capabilities-image { grid-column: 1; position: relative; inset: auto; transform: none; width: 100%; max-width: none; justify-self: stretch; } .landing-page .cap__intro { grid-row: 1; padding-right: 0; } .landing-page .cap__item { margin-top: 0; padding-block: 28px; } .landing-page .cap__item:nth-of-type(1) { grid-row: 2; margin-top: 40px; } .landing-page .cap__item:nth-of-type(2) { grid-row: 3; } .landing-page .cap__item:nth-of-type(3) { grid-row: 4; } .landing-page .cap__visual, .landing-page .capabilities-image { grid-row: 5; aspect-ratio: 16 / 10; margin: 12px 0 20px; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; } .landing-page .cap__visual img, .landing-page .capabilities-image img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; } .landing-page .cap__item:nth-of-type(4) { grid-row: 6; } .landing-page .cap__item:nth-of-type(5) { grid-row: 7; } .landing-page .cap__item:nth-of-type(6) { grid-row: 8; } .landing-page .capability-copy, .landing-page .cap__item p { max-width: none; } /* Capability steps are content blocks, not a desktop grid in miniature. */ .landing-page .u-section:has(.cap) { padding-block: 72px; } .landing-page .cap__item { padding-block: 22px; } .landing-page .cap__item:nth-of-type(1) { margin-top: 28px; } /* The landscape is a desktop-only editorial bridge. On phones, steps 03 and 04 read as one compact sequence with no empty visual slot. */ .landing-page .cap__visual, .landing-page .capabilities-image { display: none; } .landing-page .cap__item:nth-of-type(4) { grid-row: 5; } .landing-page .cap__item:nth-of-type(5) { grid-row: 6; } .landing-page .cap__item:nth-of-type(6) { grid-row: 7; } .landing-page .wl__layout { grid-template-columns: 1fr; gap: 20px; min-height: 0; align-items: stretch; } .landing-page .wl__layout > :first-child, .landing-page .wl__layout > :last-child { grid-column: auto; } .landing-page .wl__inner { align-self: start; padding-bottom: 8px; max-width: none; } .landing-page .wl__image-slot { order: 2; justify-content: center; align-self: end; height: auto; min-height: 0; } .landing-page .wl__image-slot img { height: auto; width: min(100%, 440px); max-height: none; object-fit: contain; object-position: bottom center; transform: none; } } @media (prefers-reduced-motion: reduce) { .landing-page .aud__panel { transition: none !important; } } .landing-page .memory-scene.is-motion-paused .memory-scene__layer img, .landing-page .memory-scene.is-motion-paused .memory-scene__arch-depth, .landing-page .memory-scene.is-motion-paused .memory-scene__bird, .landing-page .memory-scene.is-motion-paused .memory-scene__shadow { animation-play-state: paused; } /* ========================================================================== MEMORY SECTION — "We remember less than we think." -------------------------------------------------------------------------- Sits directly below the hero: cream ground, editorial copy on the left, five-image collage floor-anchored bottom-right (not vertically centred). Two structural notes: 1. The collage is a single grid with a fixed aspect ratio, so its rows are driven by the block as a whole rather than by each photograph. That is what keeps the silhouette compact and hole-free — the one deliberate notch is the small right-aligned fragment in row 2. 2. `.memory-section-copy` is a real column on desktop but becomes display:contents on mobile, which lets the collage slot between the opening statement and the rest of the copy without duplicating markup. ========================================================================== */ .landing-page .memory-section { position: relative; z-index: 4; background: var(--paper); color: var(--ink); padding: clamp(80px, 8vw, 128px) 0; } .landing-page .memory-section-inner { width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max-width)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); /* Copy stays top-left; collage sits on the section floor, right-aligned. */ align-items: start; } .landing-page .memory-section-copy { grid-column: 1 / span 6; } .landing-page .memory-collage { grid-column: 8 / -1; align-self: end; justify-self: end; /* Slightly under the copy column height so the floor sit is visible. */ width: min(100%, 480px); } /* Copy column ------------------------------------------------------------- */ .landing-page .memory-section-copy { font-family: var(--font-body); /* Large enough that the copy reaches most of its column — a smaller size here is what opened a dead band between the text and the images. */ font-size: clamp(1.05rem, 1.42vw, 1.36rem); line-height: 1.45; color: var(--ink); } .landing-page .memory-title { font-family: var(--font-display); font-weight: 500; /* ~10% smaller than the prior pass; still two lines on desktop */ font-size: clamp(3.2rem, 4.8vw, 4.85rem); line-height: 0.94; letter-spacing: -0.04em; color: var(--ink); max-width: 100%; margin: 0 0 38px; text-wrap: balance; } .landing-page .memory-title em { font-style: italic; font-weight: 500; } .landing-page .memory-section-copy p { max-width: 800px; margin: 0 0 30px; } .landing-page .memory-section-copy em { font-style: italic; } .landing-page .memory-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 30px; font-family: var(--font-body); font-weight: 400; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--terracotta); } .landing-page .memory-link__arrow { display: inline-flex; align-items: center; transition: transform 0.18s ease; } .landing-page .memory-link__arrow svg { display: block; width: 42px; height: 12px; } .landing-page .memory-link:hover .memory-link__arrow { transform: translateX(5px); } .landing-page .memory-link:focus-visible { outline: 2px solid rgb(var(--ink-rgb) / 0.5); outline-offset: 6px; border-radius: 4px; } /* Collage ----------------------------------------------------------------- */ .landing-page .memory-collage { display: grid; grid-template-columns: 0.95fr 1.05fr; grid-template-rows: 2fr 1fr 2.12fr; gap: 14px; /* Fixed ratio keeps the silhouette compact; width is capped on the parent rule so the collage can sit on the section floor with air above. */ aspect-ratio: 49 / 54; } .landing-page .memory-image { margin: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 12px 28px rgb(var(--ink-rgb) / 0.04); } .landing-page .memory-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } @media (hover: hover) and (min-width: 761px) { .landing-page .memory-image:hover img { transform: scale(1.015); } } .landing-page .memory-image-a { grid-column: 1; grid-row: 1; } .landing-page .memory-image-b { grid-column: 2; grid-row: 1; } .landing-page .memory-image-c { grid-column: 1; grid-row: 2; width: 72%; justify-self: end; } /* Dominant anchor: spans rows 2-3 */ .landing-page .memory-image-d { grid-column: 2; grid-row: 2 / span 2; } .landing-page .memory-image-e { grid-column: 1; grid-row: 3; } /* Scroll reveal — three units only: heading + opening, collage, rest of the copy. Same "armed" pattern as the footer wordmark, so without JS (or with reduced motion) everything stays in its final visible state. */ .landing-page .memory-section.reveal-armed [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .landing-page .memory-section.reveal-armed [data-reveal].is-revealed { opacity: 1; transform: none; } /* Tablet only — never re-apply multi-col spans under 761 (was leaking onto phones). */ @media (max-width: 1050px) and (min-width: 761px) { .landing-page .tx__head { grid-template-columns: repeat(8, minmax(0, 1fr)); } .landing-page .tx__head > :first-child { grid-column: 1 / span 4; } .landing-page .tx__copy { grid-column: 6 / -1; } .landing-page .ar__head { grid-template-columns: repeat(8, minmax(0, 1fr)); } .landing-page .ar__head .u-h2 { grid-column: 1 / span 4; } .landing-page .ar__head .u-lede { grid-column: 6 / -1; } .landing-page .priv__inner, .landing-page .fnote__inner, .landing-page .u-wrap.cap { grid-template-columns: repeat(8, minmax(0, 1fr)); } .landing-page .priv__inner > :first-child, .landing-page .fnote__inner > :first-child { grid-column: 1 / span 4; } .landing-page .priv__inner > :last-child, .landing-page .fnote__inner > :last-child { grid-column: 6 / -1; } .landing-page .cap__intro { grid-column: 1 / span 4; } .landing-page .cap__visual { grid-column: 6 / -1; } .landing-page .cap__item { grid-column: span 4; } .landing-page .memory-section-inner { grid-template-columns: minmax(0, 1fr) clamp(300px, 36vw, 410px); column-gap: 36px; align-items: start; } /* Below ~1050px the narrower column takes the heading to three lines ("We remember / less than / we think."), so it is scaled for that setting rather than for two. */ .landing-page .memory-title { font-size: clamp(3.1rem, 7.2vw, 4.4rem); margin-bottom: 36px; } /* Floor-anchored collage: fill the right track, sit on the section baseline. */ .landing-page .memory-collage { width: 100%; aspect-ratio: 49 / 62; align-self: end; justify-self: end; } .landing-page .aud__grid--personal-first { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr); gap: clamp(16px, 1.8vw, 22px); min-height: clamp(260px, 38vh, 340px); max-height: min(360px, 44vh); margin-top: clamp(16px, 2.4vh, 26px); } .landing-page .aud__panel--lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } .landing-page .aud__panel--extension { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .landing-page .wl__layout { grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: stretch; min-height: clamp(420px, 56vw, 560px); } .landing-page .wl__layout > :first-child { grid-column: 1 / span 4; } .landing-page .wl__layout > :last-child { grid-column: 7 / -1; } .landing-page .wl__image-slot img { max-width: 100%; } } /* Mobile ------------------------------------------------------------------ */ @media (max-width: 760px) { .landing-page .memory-section { padding: var(--section-space) var(--page-gutter); } .landing-page .memory-section-inner { display: flex; flex-direction: column; width: 100%; } /* Promote the copy blocks to flex items so the collage can sit between them: statement -> visual memory -> explanation -> CTA. */ .landing-page .memory-section-copy { display: contents; } .landing-page .memory-intro { order: 1; } .landing-page .memory-collage { order: 2; } .landing-page .memory-rest { order: 3; } /* The floor is set so "We remember" still fits one line at 320px — anything larger breaks it into a stray single word. */ .landing-page .memory-title { font-size: clamp(2.9rem, 14vw, 4.6rem); line-height: 0.94; margin-bottom: 30px; } .landing-page .memory-section-copy p { font-size: 1.05rem; line-height: 1.5; max-width: none; } /* The collage's own top margin provides the separation here. */ .landing-page .memory-intro .memory-opening { margin-bottom: 0; } /* Three-image mobile composition: one wide anchor, two squares beneath. */ .landing-page .memory-collage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; width: 100%; aspect-ratio: auto; margin: 34px 0 38px; } .landing-page .memory-image-c, .landing-page .memory-image-e { display: none; } .landing-page .memory-image-a { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 1.55 / 1; } .landing-page .memory-image-b { grid-column: 1; grid-row: 2; aspect-ratio: 1 / 1; } .landing-page .memory-image-d { grid-column: 2; grid-row: 2; aspect-ratio: 1 / 1; } /* Audience: vertical stack For you → founders → organisations */ .landing-page .u-section:has(.audiences-title) { padding-block: clamp(56px, 10vw, 80px); } .landing-page .aud__grid--personal-first { width: 100%; grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; min-height: 0; max-height: none; margin-top: 28px; } .landing-page .aud__panel--lead, .landing-page .aud__panel--extension { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; height: auto; min-height: 0; align-items: stretch; } .landing-page .aud__panel--lead .aud__media, .landing-page .aud__panel--extension .aud__media { aspect-ratio: 16 / 10; height: auto; min-height: 140px; } .landing-page .aud__panel--lead .aud__body, .landing-page .aud__panel--extension .aud__body { padding: clamp(18px, 4.5vw, 24px); height: auto; } } @media (prefers-reduced-motion: reduce) { .landing-page .memory-section.reveal-armed [data-reveal] { opacity: 1; transform: none; transition: none !important; } .landing-page .memory-image img, .landing-page .memory-link__arrow { transition: none !important; } } /* ========================================================================== Sections 3-11 of the landing page (product transformation, archive, capabilities, audiences, privacy, demo, founder note, waitlist, sticky header and footer) are styled in /static/site.css, which is shared with the brand pages. The legacy "moments" / dark demo / community / founder card / landing-footer blocks that used to live here were removed with their markup. ========================================================================== */ /* ========================================================================== HERO HEADER — three scroll states (hero / compact-light / compact-dark) -------------------------------------------------------------------------- Fixed over the page. data-state is set by landing-nav.js. Hero: transparent, full desktop nav, cream. Compact: logo + burger only; fg follows section theme. Brand-page sticky cream bar (.site-nav) is not used on the landing page. ========================================================================== */ /* Landing now includes navbar_site — no forced hide. */ .landing-page .hero-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.1vw, 32px) clamp(24px, 3.8vw, 64px); color: var(--header-fg); background: transparent; border: 0; box-shadow: none; transition: color 0.22s ease, opacity 0.22s ease; } @media (max-width: 700px) { .landing-page .hero-header { padding: 20px var(--page-gutter); } } /* Hero + dark panels: cream chrome over imagery. Compact on paper/sand: ink. */ .landing-page .hero-header[data-state="hero"], .landing-page .hero-header[data-state="compact-light"] { --header-fg: var(--header-light); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .landing-page .hero-header[data-state="compact-dark"] { --header-fg: var(--header-dark); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Brand lockup ------------------------------------------------------------ */ .landing-page .hero-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--header-fg); text-decoration: none; position: relative; z-index: 1; } /* Stack cream + ink marks in one slot; visibility follows data-state. Sized ~10% smaller so the lockup stays a signature, not a rival to the H1. */ .landing-page .hero-brand__mark { display: block; width: 36px; height: auto; margin: 0; transition: opacity 0.22s ease; } .landing-page .hero-brand__mark--cream { position: relative; } .landing-page .hero-brand__mark--ink { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; pointer-events: none; } /* Cream mark on hero + dark panels; ink mark only on light paper sections */ .landing-page .hero-header[data-state="hero"] .hero-brand__mark--cream, .landing-page .hero-header[data-state="compact-light"] .hero-brand__mark--cream { opacity: 1; } .landing-page .hero-header[data-state="hero"] .hero-brand__mark--ink, .landing-page .hero-header[data-state="compact-light"] .hero-brand__mark--ink { opacity: 0; } .landing-page .hero-header[data-state="compact-dark"] .hero-brand__mark--cream { opacity: 0; } .landing-page .hero-header[data-state="compact-dark"] .hero-brand__mark--ink { opacity: 1; } .landing-page .hero-brand__wordmark { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1; letter-spacing: -0.005em; color: var(--header-fg); transition: color 0.22s ease, opacity 0.22s ease; /* Nudge down to align optically with mark + nav links (serif baseline sits high) */ transform: translateY(3px); } /* Navigation — Instrument Sans, restrained; cream underline draws on hover. */ .landing-page .hero-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 42px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; } .landing-page .hero-nav a { position: relative; font-family: var(--font-body); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--header-fg) 86%, transparent); text-decoration: none; transition: color 0.18s ease, opacity 0.18s ease; } .landing-page .hero-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.32em; height: 1px; background: var(--header-fg); transform: scaleX(0); transform-origin: left center; transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .landing-page .hero-nav a:hover, .landing-page .hero-nav a:focus-visible { color: var(--header-fg); } .landing-page .hero-nav a:hover::after, .landing-page .hero-nav a:focus-visible::after { transform: scaleX(1); } /* Waitlist CTA — text weight only; no outlined “white box” on the hero. */ /* Option B — ghost pill with cream border. Sets Join waitlist apart from plain text links. */ .landing-page .hero-nav__cta { color: var(--header-fg); padding: 8px 18px; border: 1.5px solid rgba(245, 241, 232, 0.75); border-radius: 100px; letter-spacing: 0.08em; font-weight: 500; background: transparent; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Kill the shared underline pseudo-element (other links use it, the button shouldn't) */ .landing-page .hero-nav__cta::after { display: none; } .landing-page .hero-nav__cta:hover, .landing-page .hero-nav__cta:focus-visible { color: var(--header-fg); background: rgba(245, 241, 232, 0.12); border-color: var(--header-fg); } /* Compact states: nav + wordmark + CTA stay fully visible on desktop. Only the tint of the capsule changes (dark glass over hero → cream glass over paper sections) for a smooth read. Mobile ≤900px still collapses to burger via the media query below. */ /* Burger ------------------------------------------------------------------ */ .landing-page .hero-burger { position: relative; display: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; transition: opacity 0.22s ease, visibility 0.22s ease; } .landing-page .hero-burger span { position: absolute; left: 8px; width: 26px; height: 2px; border-radius: 1px; /* Follow header-fg: cream on hero/dark panels, ink on paper — never terracotta */ background: var(--header-fg); transition: background 0.18s ease; } .landing-page .hero-burger span:first-child { top: 15px; } .landing-page .hero-burger span:last-child { top: 25px; } @keyframes header-control-in { from { opacity: 0; } to { opacity: 1; } } /* Burger stays hidden on desktop in every scroll state. Only mobile ≤900px shows it via the media query below. */ /* Mobile ≤900px: always logo + burger; never full horizontal nav. */ @media (max-width: 900px) { .landing-page .hero-nav { display: none !important; } .landing-page .hero-burger { display: flex; } } /* Full-screen menu panel: shared with brand pages in site.css (.hero-menu / .site-menu — dark brown + cream, homepage truth). */ body.landing-page.hero-menu-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .landing-page .hero-header, .landing-page .hero-nav, .landing-page .hero-nav a, .landing-page .hero-nav a::after, .landing-page .hero-brand__mark, .landing-page .hero-brand__wordmark, .landing-page .hero-burger, .landing-page .hero-burger span { transition: none !important; } } /* ═════════════════════════════════════════════════════════════════════ LIQUID GLASS hero-header (landing) — Option B (floating capsule, chunkier) — ACTIVE Adapts tint per data-state (dark hero vs light panels). Option A (edge-to-edge) archived below. ═════════════════════════════════════════════════════════════════════ */ .landing-page .hero-header { top: 16px; left: 50%; right: auto; transform: translateX(-50%); width: min(1200px, calc(100% - 40px)); padding: 16px 30px; border-radius: 100px; gap: 28px; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 44px -8px rgba(0, 0, 0, 0.48), 0 4px 14px -2px rgba(0, 0, 0, 0.28); transition: color 0.22s ease, opacity 0.22s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Over the dark hero image or dark panels → darkish glass */ .landing-page .hero-header[data-state="hero"], .landing-page .hero-header[data-state="compact-light"] { background: rgba(15, 14, 20, 0.4); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); } /* Over a paper/cream section → warm cream glass, lighter shadow */ .landing-page .hero-header[data-state="compact-dark"] { background: rgba(245, 241, 232, 0.55); border-color: rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 44px -8px rgba(60, 50, 80, 0.20), 0 4px 14px -2px rgba(60, 50, 80, 0.12); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .landing-page .hero-header[data-state="hero"], .landing-page .hero-header[data-state="compact-light"] { background: rgba(15, 14, 20, 0.9); } .landing-page .hero-header[data-state="compact-dark"] { background: rgba(245, 241, 232, 0.94); } } @media (max-width: 700px) { .landing-page .hero-header { top: 10px; width: min(1200px, calc(100% - 16px)); padding: 12px 20px; gap: 16px; } } /* ═════════════════════════════════════════════════════════════════════ Option A (edge-to-edge bar) — ARCHIVED ═════════════════════════════════════════════════════════════════════ */ /* .landing-page .hero-header { top: 0; left: 0; right: 0; transform: none; width: auto; padding: 14px 24px; border-radius: 0; gap: 20px; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: none; } .landing-page .hero-header[data-state="hero"], .landing-page .hero-header[data-state="compact-light"] { background: rgba(15, 14, 20, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.35); } .landing-page .hero-header[data-state="compact-dark"] { background: rgba(245, 241, 232, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 20px -8px rgba(60, 50, 80, 0.10); } */