/* ten — creator landing V2 DRAFT * Reference DNA: OpenAI news grid + ElevenLabs home. * System: warm near-white ground · near-black text · black pill CTAs · * color ONLY via soft organic gradients contained in rounded surfaces * (the glow belongs to the app on screen, never to the studio chrome). * Type: Space Grotesk 500 display · Newsreader body · IBM Plex Mono labels. */ :root { --bg: #FFFFFF; /* pure white ground (Sameer, 2026-06-11) */ --panel: #F0EDE7; /* contained surface (the ElevenLabs band gray) */ --card: #FFFFFF; --ink: #111213; /* text + pill buttons */ --ink-soft: #2A2B2E; /* pill hover */ --mute: #6E727A; --rule: #E5E1D8; /* hairlines on light */ --dark: #131416; /* the one dark surface: the contact card */ --dark-rule: #2C2D31; --dark-fg: #F2F1ED; --dark-mute: #9A9DA3; --font-display: 'Space Grotesk', 'Inter Tight', 'Helvetica Neue', system-ui, sans-serif; --font-body: 'Newsreader', Charter, Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; --wide: 1140px; --pad-x: 32px; --r-card: 20px; --r-panel: 28px; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); } * { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .wide { width: 100%; max-width: var(--wide); margin: 0 auto; } /* desktop: each section is its own full screen, content vertically centered. * mobile: collapse back to natural height + tighter padding (override below). */ .band { position: relative; width: 100%; padding: 76px var(--pad-x); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .band > .wide { position: relative; z-index: 1; } @media (max-width: 720px) { .band { min-height: 0; display: block; padding: 56px var(--pad-x); } } /* ---- type ---- */ .eyebrow { font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 20px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0; color: var(--ink); } h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 20px; } h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; } p, li { font-family: var(--font-body); font-size: 1.16rem; line-height: 1.6; margin: 0 0 1rem; } @media (max-width: 720px) { p, li { font-size: 1.08rem; } } .lede { font-size: clamp(1.18rem, 2vw, 1.42rem); line-height: 1.5; color: var(--mute); } .lede strong { color: var(--ink); font-weight: 500; } em { font-style: italic; } /* ---- buttons: black pills (the reference CTA language) ---- */ .btn { font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; letter-spacing: -0.005em; color: #FFFFFF; background: var(--ink); border: none; border-radius: 999px; padding: 15px 28px; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; transition: background 140ms var(--ease), transform 140ms var(--ease); } .btn:hover, .btn:focus-visible { background: var(--ink-soft); transform: translateY(-1px); } .btn--ghost { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); } .btn--ghost:hover, .btn--ghost:focus-visible { background: #FFFFFF; box-shadow: inset 0 0 0 1px #C9C4B8; } .btn--light { color: var(--ink); background: #FFFFFF; } .btn--light:hover, .btn--light:focus-visible { background: #E9E7E2; color: var(--ink); } .btn--full { width: 100%; padding: 17px 28px; } /* Gradient CTA: a deeper cut of the hero glow (indigo → violet), dark enough * for white text to pass WCAG AA. The one saturated element on the page. */ .btn--grad { color: #FFFFFF; background: linear-gradient(120deg, #4452CE 0%, #6A53CE 55%, #8A66D6 100%); box-shadow: 0 10px 26px -12px rgba(96, 82, 210, 0.55); } .btn--grad:hover, .btn--grad:focus-visible { background: linear-gradient(120deg, #3B49C4 0%, #5F49C6 55%, #7E5ACE 100%); box-shadow: 0 14px 30px -12px rgba(96, 82, 210, 0.65); color: #FFFFFF; } /* ---- nav ---- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: 22px max(var(--pad-x), env(safe-area-inset-left, 0px)) 22px max(var(--pad-x), env(safe-area-inset-right, 0px)); display: flex; justify-content: space-between; align-items: center; } .nav .mark { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); text-decoration: none; } .mark-logo { height: 48px; width: auto; display: block; } .mark-word { font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; text-transform: none; white-space: nowrap; overflow: hidden; max-width: 200px; opacity: 1; transition: max-width 360ms var(--ease), opacity 240ms var(--ease), margin-left 360ms var(--ease); } /* collapse the wordmark away on scroll, leaving just the logo mark */ .nav.is-scrolled .mark-word { max-width: 0; opacity: 0; margin-left: -2px; } /* on narrow screens, show just the logo mark */ @media (max-width: 480px) { .mark-word { display: none; } } .nav-right { display: flex; align-items: center; gap: 10px; } .nav-link { font-family: var(--font-display); font-weight: 500; font-size: 0.88rem; color: var(--mute); text-decoration: none; padding: 9px 14px; border-radius: 999px; transition: color 140ms var(--ease), background 140ms var(--ease); } .nav-link:hover, .nav-link:focus-visible { color: var(--ink); background: rgba(17,18,19,0.05); } .nav-cta { font-family: var(--font-display); font-weight: 500; font-size: 0.88rem; color: #FFFFFF; background: var(--ink); text-decoration: none; padding: 10px 18px; border-radius: 999px; white-space: nowrap; transition: background 140ms var(--ease), transform 140ms var(--ease); } .nav-cta:hover, .nav-cta:focus-visible { background: var(--ink-soft); transform: translateY(-1px); } /* ---- hero: V1 — giant centered serif on white, glow rising under the CTA ---- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 128px; padding-bottom: 96px; /* overflow stays visible: the dusk glow bleeds through the fold into #belief * (V4, Sameer 2026-06-12). Tight gradient stops self-fade before the glow's * own edge, so nothing ever clips. */ } .hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .hero h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3rem, 6.6vw, 5.6rem); letter-spacing: -0.02em; line-height: 1.06; max-width: 18ch; } .hero h1 .it { font-style: italic; } .hero-sub { font-family: var(--font-serif); font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.55; color: var(--ink); max-width: 58ch; margin: 26px auto 0; } .hero .cta-row { margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } /* The hero's one inline link: hairline underline, darkens on hover. Points at * #belief so the claim scrolls to the argument. */ .sub-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid #C9C4B8; transition: border-bottom-color 140ms var(--ease); } .sub-link:hover, .sub-link:focus-visible { border-bottom-color: var(--ink); } .chip { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); background: var(--panel); border: 1px solid var(--rule); padding: 8px 16px; border-radius: 999px; margin: 0 0 30px; } .micro { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin: 18px 0 0; } /* the dusk glow straddling the fold (V4 bleed-through): 30vh above the fold, * ~32vh behind the top of #belief; tight stops so it fades on its own */ .glow-under { position: absolute; left: 50%; bottom: -32vh; transform: translateX(-50%); width: min(1100px, 96vw); height: 62vh; border-radius: 50%; filter: blur(48px) saturate(1.15); opacity: 0.75; pointer-events: none; z-index: 1; } .g-static { background: radial-gradient(50% 60% at 30% 40%, #B9A8F0 0%, transparent 62%), radial-gradient(55% 65% at 72% 36%, #7E96E8 0%, transparent 65%), radial-gradient(70% 70% at 50% 80%, #F3CDB4 0%, transparent 62%); } /* ---- the stage: gradient surface holding the phones ---- * The ONLY color on the page lives here, and it belongs to the app on screen. * Two stacked glow layers crossfade between app palettes on the shared clock. */ .hero-visual { display: flex; flex-direction: column; gap: 16px; } .stage { position: relative; border-radius: var(--r-panel); background: var(--panel); overflow: hidden; /* stage height comes from the trio itself + reserved room for the chip below, so the chip can never overlap the phone at any width */ padding: clamp(36px, 4.5vw, 56px) 0 84px; display: flex; flex-direction: column; align-items: center; } .glow { position: absolute; inset: -16%; opacity: 0; transition: opacity 1400ms var(--ease); filter: blur(34px) saturate(1.25); pointer-events: none; } .glow.is-on { opacity: 1; } .phone-trio { position: relative; width: clamp(190px, 17vw, 240px); aspect-ratio: 780 / 1688; margin: 0 clamp(70px, 8vw, 120px); z-index: 1; } @media (max-width: 920px) { .phone-trio { width: clamp(190px, 44vw, 240px); margin: 0 clamp(64px, 16vw, 110px); } } .phone { position: absolute; inset: 0; aspect-ratio: 780 / 1688; background: #0B0C0E; border-radius: 38px; padding: 10px; box-shadow: 0 2px 2px rgba(17,18,19,0.05), 0 30px 60px -30px rgba(17,18,19,0.45), inset 0 0 0 2px rgba(255,255,255,0.06); } .phone--side { z-index: 0; filter: saturate(0.92) brightness(0.97); } .phone--side::after { content: ""; position: absolute; inset: 0; border-radius: 38px; background: rgba(250,248,245,0.16); pointer-events: none; } .phone--left { transform-origin: bottom right; transform: translate(calc(-1 * clamp(54px, 6.5vw, 96px)), -18px) rotate(-8deg) scale(0.86); } .phone--right { transform-origin: bottom left; transform: translate(clamp(54px, 6.5vw, 96px), -18px) rotate(8deg) scale(0.86); } .phone--front { z-index: 1; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 29px; overflow: hidden; background: #0B0C0E; } .phone-screen .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; opacity: 0; transition: opacity 900ms var(--ease); will-change: opacity; } .phone-screen .layer.is-on { opacity: 1; } /* Niche chip: names the lane on screen. White pill floating over the glow. */ .stage-chip { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--font-display); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.92); padding: 9px 16px; border-radius: 999px; margin: 0; box-shadow: 0 1px 2px rgba(17,18,19,0.08); white-space: nowrap; transition: opacity 300ms var(--ease); } .stage-chip.is-fading { opacity: 0; } .hero-visual-caption { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0; text-align: center; } /* ---- the belief: editorial argument (claim → lede → paragraphs → kicker) * + proof explorer (featured story + anonymized serif list, click to open). * No mono in the list per Sameer 2026-06-12; serif titles, grotesk niche. ---- */ .manifesto { padding-top: 110px; position: relative; z-index: 2; } .manifesto .wide { position: relative; z-index: 1; } /* ambient dusk blooms inside the section (same family as the hero bleed) */ .mglow { position: absolute; border-radius: 50%; filter: blur(48px) saturate(1.15); pointer-events: none; z-index: 0; background: radial-gradient(50% 60% at 30% 40%, #B9A8F0 0%, transparent 62%), radial-gradient(55% 65% at 72% 36%, #7E96E8 0%, transparent 65%), radial-gradient(70% 70% at 50% 80%, #F3CDB4 0%, transparent 62%); } /* one glow per section, same dusk family, alternating sides so colour is spread * evenly down the whole page instead of stacking at the top. */ .mglow-b { left: -240px; top: 42%; width: 820px; height: 560px; opacity: 0.42; } /* belief — left, lower */ .mglow-c { right: -220px; top: 16%; width: 820px; height: 560px; opacity: 0.42; } /* ecosystem — right */ .mglow-d { left: -240px; bottom: 0%; width: 780px; height: 520px; opacity: 0.36; } /* proof — left, below the pills */ .mglow-e { right: -240px; top: 30%; width: 840px; height: 580px; opacity: 0.42; } /* builders — right */ .mglow-f { left: -220px; bottom: 4%; width: 800px; height: 540px; opacity: 0.38; } /* faq — left */ .belief-h { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.12; max-width: 24ch; margin: 0 0 16px; } .belief-h .it { font-style: italic; } .belief-lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--mute); margin: 0 0 40px; } .belief-par p { font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.65; color: #3B3D42; max-width: 62ch; margin: 0 0 1.1em; } .belief-par p:last-child { margin-bottom: 0; } .belief-par .it { font-style: italic; } #belief .belief-par p { font-size: 1.08rem; } #builders .belief-par { margin-top: 56px; } .belief-kick { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.9vw, 2.25rem); letter-spacing: -0.016em; line-height: 1.24; max-width: 38ch; margin: 72px 0 48px; } .belief-kick .it { font-style: italic; } /* courses vs ecosystem — two quiet columns, tonal contrast, no chrome. * sits on the section's own ambient glow; no separate background. */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin: 48px 0 8px; } @media (max-width: 720px) { .compare { grid-template-columns: 1fr; gap: 40px; } } .compare-head { font-family: var(--font-body); font-size: 1.1rem; letter-spacing: -0.005em; padding-bottom: 22px; margin: 0 0 8px; border-bottom: 1px solid var(--rule); } .compare-col.is-faint .compare-head { color: var(--mute); } .compare-col.is-ink .compare-head { color: var(--ink); } .compare-line { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.5; margin: 0; padding: 16px 0; } .compare-col.is-faint .compare-line { color: #B4B0A6; } .compare-col.is-ink .compare-line { color: var(--ink); } .compare .it { font-style: italic; } .compare-close { font-family: var(--font-body); color: var(--ink); font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.34; letter-spacing: -0.012em; margin: 40px 0 0; white-space: nowrap; } .compare-close .it { font-style: italic; } @media (max-width: 640px) { .compare-close { white-space: normal; } } /* the asset crescendo — capstone of the proof beat */ .belief-asset { font-family: var(--font-body); color: var(--ink); font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.34; letter-spacing: -0.014em; max-width: 46ch; margin: 56px 0 0; } .belief-asset .it { font-style: italic; } /* ---- belief proof: app-name pills that expand a detail panel ---- */ .proof { margin-top: 30px; } .proof-pills { display: flex; flex-wrap: wrap; gap: 10px; } .proof-pill { display: inline-flex; align-items: center; font-family: var(--font-serif); font-weight: 400; font-size: 1.06rem; letter-spacing: -0.005em; color: var(--ink); padding: 8px 20px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; cursor: pointer; transition: background 170ms var(--ease), border-color 170ms var(--ease), box-shadow 170ms var(--ease); } .proof-pill:hover { background: rgba(17,18,19,0.035); } .proof-pill.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } /* the expanding detail panel (grid-rows 0fr→1fr for smooth auto-height) */ .proof-detail { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 380ms var(--ease), margin-top 380ms var(--ease); } .proof-detail.is-open { grid-template-rows: 1fr; margin-top: 18px; } .proof-detail-clip { overflow: hidden; min-height: 0; } .proof-detail-inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 44px); align-items: center; padding: 28px 0 8px; transition: opacity 200ms var(--ease); } .proof-detail-inner.is-fading { opacity: 0; } @media (max-width: 760px) { .proof-detail-inner { grid-template-columns: 1fr; gap: 22px; } } .pd-visual { position: relative; } .pd-glow { display: none; } .pd-num { margin: 0; padding: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.02em; color: var(--ink); } .pd-cite { font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; } .pd-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.55rem); letter-spacing: -0.015em; line-height: 1.28; margin: 0 0 20px; } .pm-beats { display: flex; flex-direction: column; gap: 14px; } .pm-beat { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--rule); } .pm-beat-label { font-family: var(--font-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); margin: 2px 0 0; } .pm-beat-text { font-family: var(--font-serif); font-size: 0.98rem; line-height: 1.5; color: #3B3D42; margin: 0; } @media (max-width: 540px) { .pm-beat { grid-template-columns: 1fr; gap: 4px; } } @media (prefers-reduced-motion: reduce) { .proof-detail, .proof-detail-inner { transition: none; } } .belief-note { font-family: var(--font-serif); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--mute); max-width: 80ch; margin: 30px 0 0; } /* ---- section head: headline left, supporting prose right (the reference split) ---- */ .section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: 44px; } .section-head h2 { margin-bottom: 0; max-width: 18ch; } .section-side { color: var(--mute); font-size: 1.16rem; max-width: 46ch; margin: 0; align-self: end; } .section-side p { color: var(--mute); } .section-side p:last-child { margin-bottom: 0; } @media (max-width: 920px) { .section-head { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-bottom: 36px; } } /* ---- how it works: three quiet white cards ---- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 920px) { .steps { grid-template-columns: 1fr; } } .step { padding: 0; } .step .step-n { font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0; color: var(--mute); margin: 0 0 14px; } .step h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.012em; line-height: 1.25; margin: 0 0 12px; } .step p { font-size: 1.02rem; line-height: 1.55; color: var(--mute); margin: 0; } .steps { gap: clamp(24px, 4vw, 44px); } #builders .steps { margin-top: 44px; } .about-link-row { margin: 26px 0 0; } .about-link { font-family: var(--font-body); font-size: 1.08rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color 160ms var(--ease); } .about-link:hover, .about-link:focus-visible { border-bottom-color: var(--ink); } .cost-strip { padding: 0; margin: 80px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.9vw, 2.25rem); line-height: 1.28; letter-spacing: -0.015em; color: var(--ink); max-width: 28ch; } .cost-strip strong { font-weight: 600; } /* ---- calculator: monochrome card (restyle only; keep/replace parked) ---- */ .calc { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; } @media (max-width: 820px) { .calc { grid-template-columns: 1fr; } } .calc-result { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--rule); } @media (max-width: 820px) { .calc-result { border-right: none; border-bottom: 1px solid var(--rule); padding: 36px 28px; } } .calc-result-label { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; } .calc-hero { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.035em; font-size: clamp(3rem, 6.5vw, 4.4rem); line-height: 1; margin: 0 0 12px; color: var(--ink); font-variant-numeric: tabular-nums; } .calc-result-sub { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; margin: 0; color: var(--mute); } .calc-mini { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); } .calc-mini-label { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px; } .calc-mini-val { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; } .calc-mini-val span { font-family: var(--font-display); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.04em; color: var(--mute); margin-left: 3px; } .calc-controls { padding: 48px 44px; display: flex; flex-direction: column; gap: 26px; } @media (max-width: 820px) { .calc-controls { padding: 32px 28px; } } .calc-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; } .calc-field output { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; } .calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: var(--rule); outline: none; cursor: pointer; } .calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 3px solid #FFFFFF; box-shadow: 0 2px 8px -2px rgba(17,18,19,0.4); cursor: pointer; transition: transform 120ms var(--ease); } .calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); } .calc input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 3px solid #FFFFFF; box-shadow: 0 2px 8px -2px rgba(17,18,19,0.4); cursor: pointer; } .calc-keep { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.5; color: var(--mute); margin: 0; } .calc-fine { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--mute); text-align: center; margin: 16px 0 0; } /* ---- zero risk: the term sheet (one card, 2×2 hairline grid) ---- */ .terms { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; } @media (max-width: 720px) { .terms { grid-template-columns: 1fr; } } .term { padding: 38px 40px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .term:nth-child(2n) { border-right: none; } .term:nth-child(n+3) { border-bottom: none; } @media (max-width: 720px) { .term { border-right: none; border-bottom: 1px solid var(--rule); padding: 28px 26px; } .term:last-child { border-bottom: none; } .term:nth-child(3) { border-bottom: 1px solid var(--rule); } } .term-num { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2.1rem, 3.6vw, 2.8rem); line-height: 1; color: var(--ink); margin: 0 0 18px; font-variant-numeric: tabular-nums; } .term h3 { margin: 0 0 10px; } .term p { font-size: 1.02rem; line-height: 1.55; color: var(--mute); margin: 0; } /* ---- founders ---- */ .founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); margin-top: 36px; } @media (max-width: 720px) { .founders { grid-template-columns: 1fr; } } .founder { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; } @media (max-width: 480px) { .founder { grid-template-columns: 1fr; gap: 16px; } } .founder-head { position: relative; width: 96px; height: 96px; } .founder-avatar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 24px; background: var(--panel); color: var(--mute); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; } .founder-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 24px; object-fit: cover; border: 1px solid var(--rule); } .founder-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 12px; } .founder-role { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; } .founder-bio { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0; } .founder-link { display: inline-block; margin-top: 12px; font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--rule); padding: 8px 0; min-height: 44px; line-height: 1.6; transition: color 140ms var(--ease), border-bottom-color 140ms var(--ease); } .founder-link:hover, .founder-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); } /* ---- contact: the one dark surface on the page ---- */ #contact { padding-top: 124px; } .contact-card { background: var(--dark); border-radius: var(--r-panel); padding: clamp(40px, 5vw, 72px); color: var(--dark-fg); } /* the whole CTA card renders in Inter */ #contact .contact-card, #contact .contact-card * { font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; } .contact-card .eyebrow { color: var(--dark-mute); } .contact-card h2 { color: var(--dark-fg); max-width: 15ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.025em; line-height: 1.08; } .apply-sub { font-family: var(--font-display); color: var(--dark-mute); max-width: 40ch; font-size: 1.02rem; line-height: 1.62; } .apply-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: start; } @media (max-width: 920px) { .apply-grid { grid-template-columns: 1fr; gap: 36px; } } .form { margin: 0; max-width: 100%; } .field { margin: 0 0 18px; } .field label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.01em; color: var(--dark-mute); margin: 0 0 10px; } .field-hint { font-family: var(--font-display); font-weight: 400; font-size: 0.74rem; letter-spacing: 0; color: var(--dark-mute); text-transform: none; margin-left: 8px; } .field input { width: 100%; background: #1B1C1F; color: var(--dark-fg); border: 1px solid var(--dark-rule); border-radius: 10px; font-family: var(--font-display); font-size: max(16px, 1.05rem); padding: 14px 16px; transition: border-color 160ms var(--ease), background 160ms var(--ease); } .field input::placeholder { color: #6A6D74; } .field input:hover { border-color: #3A3B40; } .field input:focus { outline: none; border-color: #7E8188; background: #161719; } .form-note { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0; color: var(--dark-mute); margin: 16px 0 0; line-height: 1.6; text-align: center; } .form-success { display: none; } .form-success.show { display: block; } .form-success .big { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--dark-fg); margin: 0 0 12px; } .form-success p { color: var(--dark-mute); } .form.hide { display: none; } /* ---- FAQ accordion ---- */ #faq .belief-h { margin-bottom: 40px; } .faq { border-top: 1px solid var(--rule); } .faq-item { border-bottom: 1px solid var(--rule); } .faq-q { width: 100%; cursor: pointer; background: none; border: none; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 28px; padding: 24px 4px; font-family: var(--font-body); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); } .faq-q::after { content: "+"; flex: none; line-height: 1; align-self: center; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--mute); transition: transform 320ms var(--ease), color 160ms var(--ease); } .faq-item.is-open .faq-q::after { transform: rotate(45deg); color: var(--ink); } .faq-q:hover, .faq-q:hover::after { color: var(--ink); } /* animated expand/collapse */ .faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms var(--ease); } .faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; } .faq-a { overflow: hidden; min-height: 0; padding: 0 4px; max-width: 70ch; } .faq-a p { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.62; color: var(--mute); margin: 0; padding-bottom: 26px; } @media (prefers-reduced-motion: reduce) { .faq-a-wrap, .faq-q::after { transition: none; } } /* ---- article list (Articles page) ---- */ #articles-hero .belief-h { margin-bottom: 0; } #articles-hero .belief-par { margin-top: 24px; } .article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .article-item { border-bottom: 1px solid var(--rule); } .article-item a { display: block; padding: 28px 4px; text-decoration: none; transition: background 160ms var(--ease); } .article-item a:hover { background: rgba(17,18,19,0.025); } .article-meta { font-family: var(--font-display); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--mute); margin: 0 0 10px; } .article-title { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.015em; line-height: 1.28; color: var(--ink); margin: 0 0 10px; max-width: 32ch; } .article-sum { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: var(--mute); margin: 0; max-width: 64ch; } /* ---- migrated long-form article pages (reading column) ---- */ .doc { max-width: 720px; margin: 0 auto; padding: 132px var(--pad-x) 0; } .article-back { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: 0.82rem; color: var(--mute); text-decoration: none; margin-bottom: 26px; transition: color 140ms var(--ease); } .article-back:hover { color: var(--ink); } .doc-head { margin-bottom: 50px; } .doc-head .belief-h { max-width: 22ch; margin-bottom: 0; } .article-lede { font-family: var(--font-body); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--mute); margin: 24px 0 0; max-width: 52ch; } .doc-head .article-meta { margin: 22px 0 0; } .article-body h2 { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); margin: 2.4em 0 0.5em; } .article-body h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.28rem; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); margin: 1.8em 0 0.3em; } .article-body p, .article-body li { font-family: var(--font-body); font-size: 1.12rem; line-height: 1.7; color: #3B3D42; margin: 0 0 1.1em; } .article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: text-decoration-color 140ms var(--ease); } .article-body a:hover { text-decoration-color: var(--ink); } .article-body em { font-style: italic; } .article-body ul, .article-body ol { margin: 0 0 1.1em; padding-left: 1.25em; } .article-body li { margin: 0 0 0.5em; } .article-cta { margin: 66px 0 0; padding: 42px 0 0; border-top: 1px solid var(--rule); } .article-cta h2 { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); margin: 0 0 14px; max-width: 24ch; } .article-cta p { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.6; color: var(--mute); margin: 0 0 22px; max-width: 54ch; } .doc .foot { margin-top: 84px; } /* article "boundaries" blocks (carried from the migrated articles) */ .boundaries { margin: 2.6em 0; padding-top: 2rem; border-top: 1px solid var(--rule); } .boundaries-label { font-family: var(--font-display); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; } .boundaries-foot { font-family: var(--font-body); font-style: italic; font-size: 1rem; line-height: 1.55; color: var(--mute); margin: 22px 0 0; max-width: 54ch; } .boundaries ul { list-style: none; margin: 0; padding: 0; } .boundaries li { font-family: var(--font-body); font-size: 1.06rem; line-height: 1.55; color: #3B3D42; margin: 0 0 0.7em; } .boundaries li:last-child { margin-bottom: 0; } /* numbered-ladder variant: