/* ============================================================================ POST — Post Exit Founders · Landing page The cinematic, scroll-driven experience. Built on brand/tokens.css. Aesthetic north star: sequel.co (cinematic restraint) — translated from cold glass-on-black into Post's warm paper-and-ink editorial world. ============================================================================ */ /* --------------------------------------------------------------------------- 0. Reset & base --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } :root { color-scheme: light; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* NOTE: do NOT enable "tnum" globally — this Schibsted Grotesk build's tnum feature inserts space before punctuation (network. → network . ). Numbers here are standalone display numerals, so proportional figures read fine. */ scroll-behavior: auto; /* Lenis owns scrolling */ } body { background: var(--post-bg); color: var(--post-fg); font-family: var(--post-sans); font-size: var(--post-step-0); line-height: var(--post-leading-body); /* clip (not hidden) so the body does NOT become a scroll container — hidden would force overflow-y:auto and nest scrolling inside , which fights Lenis (window scroller) and breaks scroll-position sync. */ overflow-x: clip; } /* When Lenis is active, body is the scroll container via window */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: color-mix(in srgb, var(--post-oxblood) 24%, transparent); color: var(--post-ink); } /* --------------------------------------------------------------------------- 1. Type system (Fraunces carries emotion & size; Schibsted stays quiet) --------------------------------------------------------------------------- */ .display { font-family: var(--post-serif); font-variation-settings: "opsz" 144, "wght" 420, "SOFT" 0, "WONK" 0; font-weight: 420; letter-spacing: var(--post-tracking-tight); line-height: 1.02; color: var(--post-fg); text-wrap: balance; } .display em { font-style: italic; font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0, "WONK" 1; } /* Fluid display steps */ .t-hero { font-size: clamp(3.2rem, 8.4vw, 7.6rem); line-height: 0.98; } .t-xl { font-size: clamp(2.3rem, 4.8vw, 4.4rem); } .t-lg { font-size: clamp(1.95rem, 3.8vw, 3.3rem); } .t-md { font-size: clamp(1.55rem, 2.8vw, 2.5rem); line-height: 1.08; } .eyebrow { font-family: var(--post-sans); font-size: clamp(0.7rem, 0.86vw, 0.8rem); letter-spacing: var(--post-tracking-label); text-transform: uppercase; font-weight: 600; color: var(--post-fg-faint); } .lead { font-family: var(--post-sans); font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--post-fg-muted); max-width: 38ch; font-weight: 400; } .body { color: var(--post-fg-muted); max-width: var(--post-measure); } /* The signature device — the oxblood full-stop. Always oxblood, every ground. */ .stop { color: var(--post-stop); } /* Editorial staccato lines (the "truth" / belief copy) */ .verse { font-family: var(--post-serif); font-variation-settings: "opsz" 72, "wght" 380, "SOFT" 0, "WONK" 0; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.28; letter-spacing: -0.01em; color: var(--post-fg); } .verse .muted { color: var(--post-fg-faint); } .verse em { font-style: italic; font-variation-settings: "opsz" 72, "wght" 360, "SOFT" 0, "WONK" 1; } /* --------------------------------------------------------------------------- 2. Layout primitives --------------------------------------------------------------------------- */ .section { position: relative; padding-block: clamp(7rem, 16vh, 14rem); background: var(--post-bg); color: var(--post-fg); } .section--ink { background: var(--post-ink); } .section--tight { padding-block: clamp(5rem, 10vh, 8rem); } [data-theme="ink"] { background: var(--post-ink); } .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--post-gutter); } .container--narrow { max-width: 920px; } .measure { max-width: 60ch; } /* hairline rule — a quiet editorial divider */ .rule { height: 1px; background: var(--post-hairline); border: 0; width: 100%; } .eyebrow-row { display: flex; align-items: center; gap: 0.85rem; margin-bottom: clamp(1.4rem, 2.4vw, 2.2rem); } .eyebrow-row::before { content: ""; width: 1.6rem; height: 1px; background: var(--post-accent); opacity: 0.8; flex: none; } [data-theme="ink"] .eyebrow-row::before, .section--ink .eyebrow-row::before { background: var(--post-bronze); } /* --------------------------------------------------------------------------- 3. Buttons (pill is Sequel's; Post keeps corners near-square + warm) --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--post-sans); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; padding: 0.95em 1.6em; border-radius: 2px; border: 1px solid transparent; transition: background .4s var(--post-ease), color .4s var(--post-ease), border-color .4s var(--post-ease), transform .4s var(--post-ease), opacity .4s var(--post-ease); will-change: transform; } .btn:active { transform: translateY(1px); } .btn .btn__arrow { transition: transform .4s var(--post-ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn__label { display: inline-flex; align-items: baseline; } .btn__stop { color: var(--post-stop); display: inline-block; transform-origin: 50% 72%; } /* Primary — ink fill on bone */ .btn--primary { background: var(--post-ink); color: var(--post-bone); border-color: var(--post-ink); } .btn--primary:hover { background: var(--post-ink-soft); } /* Primary on ink grounds — bone fill */ .section--ink .btn--primary, [data-theme="ink"] .btn--primary { background: var(--post-bone); color: var(--post-ink); border-color: var(--post-bone); } .section--ink .btn--primary:hover, [data-theme="ink"] .btn--primary:hover { background: #fff; } /* Ghost — hairline outline, inherits ground */ .btn--ghost { border-color: var(--post-hairline); color: var(--post-fg); background: transparent; } .btn--ghost:hover { border-color: var(--post-fg); background: color-mix(in srgb, var(--post-fg) 6%, transparent); } /* Accent text-link (oxblood on bone, bronze on ink) */ .link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--post-link); font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid color-mix(in srgb, var(--post-link) 40%, transparent); padding-bottom: 1px; transition: border-color .35s var(--post-ease), gap .35s var(--post-ease); } .link:hover { border-color: var(--post-link); gap: 0.65em; } /* --------------------------------------------------------------------------- 4. Material (Post's "chrome" = warm translucent paper, not cold glass) --------------------------------------------------------------------------- */ .material { background: color-mix(in srgb, var(--post-bone) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(112%); backdrop-filter: blur(14px) saturate(112%); border: 1px solid var(--post-hairline); border-radius: 2px; } .section--ink .material, [data-theme="ink"] .material { background: color-mix(in srgb, var(--post-ink) 56%, transparent); border-color: color-mix(in srgb, var(--post-bone) 16%, transparent); } .badge { display: inline-flex; align-items: center; font-family: var(--post-sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--post-fg-faint); padding: 0.45em 0.85em; border: 1px solid var(--post-hairline); border-radius: 2px; } /* --------------------------------------------------------------------------- 5. Header / nav --------------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 80; /* above the menu overlay (70) so the toggle stays tappable */ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1rem, 2.2vw, 1.6rem) var(--post-gutter); transition: transform .5s var(--post-ease), background .5s var(--post-ease), border-color .5s var(--post-ease), padding .5s var(--post-ease); border-bottom: 1px solid transparent; color: var(--post-bone); /* over the ink hero */ pointer-events: none; } .nav > * { pointer-events: auto; } .nav.is-hidden { transform: translateY(-104%); } .nav.is-solid { background: color-mix(in srgb, var(--post-bone) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); border-bottom-color: var(--post-hairline); color: var(--post-ink); padding-block: clamp(0.7rem, 1.4vw, 1rem); } .nav__brand { display: flex; align-items: center; gap: 0.6rem; flex: none; } .nav__brand svg, .nav__brand img { height: 22px; width: auto; color: currentColor; } .nav__wordmark { height: 22px; width: auto; } /* swap wordmark colour-variant with the nav ground: bone letters over hero, ink letters when solid */ .nav__wordmark--bone { display: none; } .nav.is-solid .nav__wordmark--ink { display: none; } .nav.is-solid .nav__wordmark--bone { display: inline-block; } .nav__tabs { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); } .nav__tab { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.01em; color: currentColor; opacity: 0.82; position: relative; transition: opacity .3s var(--post-ease); } .nav__tab::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0; background: currentColor; transition: width .35s var(--post-ease); } .nav__tab:hover { opacity: 1; } .nav__tab:hover::after { width: 100%; } .nav__right { display: flex; align-items: center; gap: 1rem; flex: none; } .nav .btn--nav { padding: 0.6em 1.15em; font-size: 0.84rem; border: 1px solid currentColor; color: currentColor; border-radius: 2px; background: transparent; } .nav.is-solid .btn--nav { background: var(--post-ink); color: var(--post-bone); border-color: var(--post-ink); } .nav .btn--nav:hover { background: currentColor; color: var(--post-bg); } .nav.is-solid .btn--nav:hover { background: var(--post-ink-soft); color: var(--post-bone); } .nav__menu-btn { display: none; } /* --------------------------------------------------------------------------- 6. Hero --------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--post-ink); color: var(--post-bone); isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero__media img, .hero__clip { position: absolute; inset: 0; width: 100%; height: 112%; object-fit: cover; object-position: center 42%; opacity: 0; will-change: transform; } .hero__media img { transition: opacity 1.2s var(--post-ease); } .hero__clip { transition: opacity 1.2s var(--post-ease); will-change: opacity, transform; } .hero__media img.is-poster { opacity: 1; } .hero__clip.is-front { opacity: 1; } .hero__media img.is-hidden { opacity: 0; } /* warm cinematic grade + legibility scrims */ .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(20,17,13,0.92) 0%, rgba(20,17,13,0.42) 34%, rgba(20,17,13,0.18) 60%, rgba(20,17,13,0.40) 100%), radial-gradient(120% 90% at 70% 35%, transparent 40%, rgba(20,17,13,0.5) 100%); } /* width/height:100% is required: an absolutely-positioned