/* Aria Web design tokens (U1.2) — a direct port of the approved "Premium & Trustworthy" art direction (ARIA-DOC-019, mockups/purple/). Dark is the default :root; light overrides via [data-theme="light"]; "System" maps prefers-color-scheme (set on by the theme provider). Do not add a raw hex/px outside this file — reference the variables. */ :root { /* ---- Campfire: warm fire, violet night ------------------------------- The rejected campfire glowed VIOLET. Nothing in nature glows in a single hue, so a monochrome radial read as a decorative blob rather than a light source. Inverting the roles fixes it without giving up the brand: the FIRE is warm (gold family), and the NIGHT is violet. Violet still owns most of the frame — it is just the darkness the fire is pushing back, which is what a campfire actually is. */ --ember-core: #ffd08a; /* the hot pocket — deliberately a small fraction */ --ember-mid: #f0980c; /* the working body of the coals */ --ember-deep: #b0330d; /* a cooling coal */ --ember-char: #4a1a0c; /* char between the coals */ --ember-spill: 245, 158, 11; /* rgb triplet for per-seat wash math */ --ember-rim: rgba(255, 190, 110, 0.85); /* rim light on a near face */ --night-ambient: rgba(124, 92, 252, 0.07); /* brand violet as AMBIENT, not fire */ /* base + layered surfaces */ --bg: #0a0a0f; --surface-1: #0d0d13; --surface-2: #111118; --surface-3: #16161f; --surface-4: #1b1b26; --elevated: #1c1c27; /* hairlines */ --line: rgba(255, 255, 255, 0.06); --line-2: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.13); /* text */ --text-1: #ececef; --text-2: #a4a4ae; --text-3: #8b8b94; /* AA (>=4.5:1) on all dark surfaces — used for small labels */ --text-4: #4a4a52; /* decorative only — not for text (fails AA) */ /* accent — one confident violet, used sparingly */ --violet: #7c5cfc; --violet-bright: #9b83ff; --violet-ink: #9b83ff; /* violet text/foreground (AA on dark) */ --violet-dim: rgba(124, 92, 252, 0.14); --violet-line: rgba(124, 92, 252, 0.32); --violet-glow: rgba(124, 92, 252, 0.7); --on-violet: #fff; /* live + status */ --live: #ff4d6a; --live-dim: rgba(255, 77, 106, 0.12); --live-ink: #ff8095; --gold: #f59e0b; --gold-ink: #f5b73c; /* gold text — AA on the gold-tinted badge */ --warn-ink: #ffb454; --success: #10b981; /* material */ --vignette: rgba(0, 0, 0, 0.28); --hover-wash: rgba(255, 255, 255, 0.035); --meter-track: rgba(255, 255, 255, 0.07); --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.7); --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -16px rgba(0, 0, 0, 0.8); /* spacing — 4pt grid */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px; /* radii */ --radius-xs: 7px; --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 9999px; /* type */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fs-display: 28px; --fs-title: 20px; --fs-headline: 17px; --fs-body: 14px; --fs-caption: 13px; --fs-micro: 11px; --tracking-tight: -0.03em; --tracking-label: 0.12em; /* motion */ --dur-fast: 0.18s; --dur: 0.3s; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* layout */ --sidebar-w: 248px; color-scheme: dark; } /* Light — a true premium light system (AA-tuned), not an inversion. */ :root[data-theme='light'] { --bg: #f4f4f7; --surface-1: #fafafc; --surface-2: #ffffff; --surface-3: #f6f6f9; --surface-4: #efeff3; --elevated: #ffffff; --line: rgba(15, 15, 25, 0.06); --line-2: rgba(15, 15, 25, 0.1); --line-strong: rgba(15, 15, 25, 0.16); --text-1: #16161c; --text-2: #56565f; --text-3: #5f5f68; /* AA on light surfaces */ --text-4: #9a9aa6; /* decorative only */ --violet: #6e4bf0; --violet-bright: #6e4bf0; --violet-ink: #5b3fe0; /* AA on light for violet text */ --violet-dim: rgba(110, 75, 240, 0.1); --violet-line: rgba(110, 75, 240, 0.3); --violet-glow: rgba(110, 75, 240, 0.28); --live: #c81b40; --live-dim: rgba(200, 27, 64, 0.06); --live-ink: #c81b40; --gold: #b45309; --gold-ink: #8a3f06; /* darker gold text for AA on the pale gold badge */ --warn-ink: #b45309; --vignette: rgba(15, 15, 25, 0.04); --hover-wash: rgba(15, 15, 25, 0.035); --meter-track: rgba(15, 15, 25, 0.08); --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(15, 15, 25, 0.04), 0 12px 28px -18px rgba(15, 15, 25, 0.18); --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 2px 6px rgba(15, 15, 25, 0.05), 0 22px 48px -22px rgba(15, 15, 25, 0.28); color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } *, *::before, *::after { box-sizing: border-box; } html, body, #root { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text-1); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--violet-ink); text-decoration: none; } :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } /* ---- The campfire is always night ------------------------------------------ A campfire is LIGHT, and light can only read against dark. On a near-white page any fire we draw is a brown stain — which is exactly how the first attempt looked. So the campfire commits to night on its own terms, like a room with the lamps off, regardless of the app's light/dark setting. Every other surface still follows the user's choice. These are the 30 tokens the light theme overrides, restored to their :root (dark) values, generated from this file rather than hand-copied so the two cannot drift. */ [data-surface='night'] { color-scheme: dark; --bg: #0a0a0f; --surface-1: #0d0d13; --surface-2: #111118; --surface-3: #16161f; --surface-4: #1b1b26; --elevated: #1c1c27; --line: rgba(255, 255, 255, 0.06); --line-2: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.13); --text-1: #ececef; --text-2: #a4a4ae; --text-3: #8b8b94; --text-4: #4a4a52; --violet: #7c5cfc; --violet-bright: #9b83ff; --violet-ink: #9b83ff; --violet-dim: rgba(124, 92, 252, 0.14); --violet-line: rgba(124, 92, 252, 0.32); --violet-glow: rgba(124, 92, 252, 0.7); --live: #ff4d6a; --live-dim: rgba(255, 77, 106, 0.12); --live-ink: #ff8095; --gold: #f59e0b; --gold-ink: #f5b73c; --warn-ink: #ffb454; --vignette: rgba(0, 0, 0, 0.28); --hover-wash: rgba(255, 255, 255, 0.035); --meter-track: rgba(255, 255, 255, 0.07); --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.7); --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -16px rgba(0, 0, 0, 0.8); } /* aria-live.app · shared stylesheet: every rule both the home and the creators mockups carry, in the home mockup's order. Page-only rules live in home.css and creators.css, loaded after this file. */ :root { --bg: #0A0A0F; --surface-1: #0D0D13; --surface-2: #111118; --surface-3: #16161F; --surface-4: #1B1B26; --elevated: #1C1C27; --line: rgba(255,255,255,0.06); --line-2: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.13); --text-1: #ECECEF; --text-2: #A4A4AE; --text-3: #6E6E78; --text-4: #4A4A52; --text-label: #85858F; --violet: #7C5CFC; --violet-bright: #9B83FF; --violet-dim: rgba(124,92,252,0.14); --violet-line: rgba(124,92,252,0.32); --live: #FF4D6A; --live-dim: rgba(255,77,106,0.12); --seat: #2A2A35; --seat-host: #35353F; --radius-xs: 7px; --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 24px; --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -12px rgba(0,0,0,0.7); --shadow-pop: 0 1px 0 rgba(255,255,255,0.04) inset, 0 16px 40px -16px rgba(0,0,0,0.8); --wrap: 1200px; --gutter: 32px; font-feature-settings: "cv05" 1, "ss01" 1, "calt" 1; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background: radial-gradient(900px 520px at 80% -8%, rgba(124,92,252,0.07), transparent 60%), radial-gradient(700px 600px at -5% 12%, rgba(124,92,252,0.035), transparent 55%), var(--bg); color: var(--text-1); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: -0.011em; min-height: 100vh; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(130% 100% at 50% 0%, transparent 62%, rgba(0,0,0,0.28) 100%); } ::selection { background: rgba(124,92,252,0.32); color: #fff; } a { color: inherit; text-decoration: none; } svg { display: block; } .icon { width: 20px; height: 20px; stroke-width: 1.6; } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--radius-xs); } .skip:focus { left: 16px; } .page { position: relative; z-index: 2; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-label); display: inline-flex; align-items: center; gap: 9px; } .kicker .tt { text-transform: none; letter-spacing: 0.08em; } .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-dim); } h1 { font-size: clamp(40px, 5vw, 68px); font-weight: 600; line-height: 1.02; letter-spacing: -0.038em; color: var(--text-1); text-wrap: balance; } h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -0.032em; color: var(--text-1); text-wrap: balance; } h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.022em; color: var(--text-1); } .lead { font-size: 18px; line-height: 1.55; color: var(--text-2); letter-spacing: -0.014em; text-wrap: pretty; } .body { font-size: 15.5px; line-height: 1.6; color: var(--text-2); letter-spacing: -0.011em; text-wrap: pretty; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; } .btn-primary { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 50%), linear-gradient(180deg, var(--violet), #6248E8); box-shadow: 0 0 0 1px rgba(124,92,252,0.5), 0 8px 18px -10px rgba(124,92,252,0.6); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(124,92,252,0.65), 0 12px 24px -10px rgba(124,92,252,0.7); } .btn-ghost { color: var(--text-1); border: 1px solid var(--line-2); background: rgba(255,255,255,0.02); } .btn-ghost:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.04); } .btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--text-2); letter-spacing: -0.012em; transition: color .16s ease; } .link-arrow:hover { color: var(--text-1); } .link-arrow svg { width: 15px; height: 15px; stroke-width: 1.7; transition: transform .16s ease; } .link-arrow:hover svg { transform: translateX(2px); } .nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(10,10,15,0.72); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } .nav-in { height: 64px; display: flex; align-items: center; gap: 32px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; } .wordmark .glyph { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .wordmark .glyph svg { width: 100%; height: 100%; display: block; } .wordmark .name { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; } .links { display: flex; gap: 4px; margin-left: 8px; } .links a { padding: 8px 12px; border-radius: var(--radius-xs); font-size: 13.5px; font-weight: 500; color: var(--text-2); letter-spacing: -0.012em; transition: color .16s ease, background .16s ease; } .links a:hover { color: var(--text-1); background: rgba(255,255,255,0.035); } .nav .cta { margin-left: auto; } .hero { padding: 72px 0 96px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 72px; align-items: center; } .hero-copy { max-width: 520px; } .hero-copy .kicker { margin-bottom: 26px; } .hero-copy h1 { margin-bottom: 24px; } .hero-copy .lead { max-width: 460px; margin-bottom: 36px; } .hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .stage-wrap { position: relative; } .session { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--surface-2); box-shadow: var(--shadow-pop); padding: 22px 24px 24px; overflow: hidden; } .session::before { /* faint top light, like a screen */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); } .s-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .live-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 8px; border-radius: 999px; border: 1px solid rgba(255,77,106,0.25); background: var(--live-dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #FF8095; } .live-tag .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px 0 rgba(255,77,106,0.7); } .s-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .s-kind svg { width: 13px; height: 13px; stroke-width: 1.7; color: var(--text-4); } .s-count { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--text-3); letter-spacing: -0.01em; } .s-count b { color: var(--text-1); font-weight: 600; } .s-title { font-size: 21px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.25; margin-bottom: 8px; } .topics { display: flex; gap: 7px; margin-bottom: 22px; } .topic { font-size: 11px; font-weight: 500; color: var(--text-2); padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,0.018); } .avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex-shrink: 0; letter-spacing: -0.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 -8px 16px -8px rgba(0,0,0,0.5); } .s-stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .speaker { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; } .speaker .ring { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; } .speaker .ring .avatar { width: 56px; height: 56px; font-size: 16px; } .speaker.host .ring { width: 64px; height: 64px; } .speaker.host .ring .avatar { width: 64px; height: 64px; font-size: 18px; } .speaker.host .ring::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--violet), var(--violet-bright), #C9B8FF, var(--violet)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .speaker.host .ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 14px -2px rgba(124,92,252,0.5); } .speaker .nm { font-size: 12.5px; font-weight: 500; color: var(--text-1); letter-spacing: -0.012em; line-height: 1.2; } .speaker .st { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: -3px; } .speaker.host .st { color: var(--violet-bright); } .speaker .pip { position: absolute; top: 40px; right: calc(50% - 32px); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-4); border: 2px solid var(--surface-2); color: var(--text-2); } .speaker .pip svg { width: 12px; height: 12px; stroke-width: 1.9; } .speaker.muted .pip { color: var(--text-3); } .speaker.hand .pip { color: var(--text-1); background: var(--surface-4); } .s-listeners { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); } .s-listeners .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .stack { display: flex; } .stack .avatar { width: 26px; height: 26px; font-size: 9.5px; margin-left: -7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 2px var(--surface-2); } .stack .avatar:first-child { margin-left: 0; } .s-listeners .more { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: -0.01em; } .s-caption { padding: 16px 0 6px; } .cap-label { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .cap-label svg { width: 13px; height: 13px; stroke-width: 1.7; color: var(--text-4); } .s-caption p { font-size: 15px; line-height: 1.5; letter-spacing: -0.012em; color: var(--text-1); text-wrap: pretty; } .s-caption p .fade { color: var(--text-3); } .s-caption p .caret { display: inline-block; width: 2px; height: 0.95em; background: var(--text-2); vertical-align: -0.12em; margin-left: 3px; border-radius: 1px; } .s-controls { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 16px; padding-right: 24px; border-top: 1px solid var(--line); } .ctl { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: rgba(255,255,255,0.02); font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: -0.01em; } .ctl svg { width: 15px; height: 15px; stroke-width: 1.6; } .ctl.leave { margin-left: auto; color: #FF8095; border-color: rgba(255,77,106,0.22); background: rgba(255,77,106,0.06); } .summary { position: relative; z-index: 2; width: 340px; margin: -20px -20px 0 auto; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%), var(--elevated); box-shadow: var(--shadow-pop); padding: 16px 18px 14px; } .sum-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sum-top .kicker { font-size: 10.5px; color: var(--text-3); gap: 7px; } .sum-top .kicker svg { width: 13px; height: 13px; stroke-width: 1.7; color: var(--text-4); } .sum-top .state { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; } .sum-top .state i { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); display: inline-block; } .summary h4 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--text-1); } .chapters { list-style: none; display: flex; flex-direction: column; } .chapters li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); letter-spacing: -0.01em; } .chapters li .t { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-4); font-weight: 500; } .chapters .skel { display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.07); } .section { padding: 112px 0; } .section + .section { padding-top: 0; } .sec-head { max-width: 640px; margin-bottom: 56px; } .sec-head .kicker { margin-bottom: 18px; } .sec-head h2 { margin-bottom: 18px; } .rule { height: 1px; background: var(--line); } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 1px solid var(--line-2); padding-top: 40px; } .pillar .num { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 20px; font-variant-numeric: tabular-nums; } .pillar h3 { font-size: 24px; letter-spacing: -0.028em; margin-bottom: 12px; } .pillar .body { max-width: 300px; } .rows { border-top: 1px solid var(--line-2); } .row { display: grid; grid-template-columns: 56px 300px 1fr; gap: 24px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--line); } .row .ic { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); box-shadow: var(--shadow-1); } .row .ic svg { width: 19px; height: 19px; stroke-width: 1.6; } .row h3 { padding-top: 7px; } .row .body { padding-top: 8px; max-width: 560px; } .note { margin-top: 48px; display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; padding: 28px 32px 30px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent 40%), var(--surface-1); } .note .ic { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); box-shadow: var(--shadow-1); } .note .ic svg { width: 18px; height: 18px; stroke-width: 1.6; } .note .kicker { margin-bottom: 10px; } .note h3 { font-size: 22px; letter-spacing: -0.026em; margin-bottom: 8px; } .note .body { max-width: 640px; } .band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 50%), var(--surface-1); padding: 96px 0; text-align: center; } .band .ic { width: 44px; height: 44px; margin: 0 auto 24px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); box-shadow: var(--shadow-1); } .band .ic svg { width: 20px; height: 20px; stroke-width: 1.6; } .band h2 { margin-bottom: 16px; } .band .lead { max-width: 600px; margin: 0 auto; } .band + .section { padding-top: 112px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .step { border-top: 1px solid var(--line-2); padding-top: 28px; } .step .num { font-size: 40px; font-weight: 500; letter-spacing: -0.04em; color: var(--text-3); line-height: 1; margin-bottom: 28px; font-variant-numeric: tabular-nums; } .step h3 { margin-bottom: 10px; } .step .body { max-width: 300px; } .beta { border-radius: var(--radius-xl); border: 1px solid var(--line-2); background: radial-gradient(600px 240px at 50% 0%, rgba(124,92,252,0.10), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--surface-2); box-shadow: var(--shadow-2); padding: 80px 32px; text-align: center; } .beta .kicker { margin-bottom: 20px; } .beta h2 { margin-bottom: 16px; } .beta .lead { max-width: 520px; margin: 0 auto 32px; } .beta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .footer { border-top: 1px solid var(--line); padding: 64px 0 40px; } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 56px; } .foot-brand .wordmark { margin-bottom: 14px; } .foot-brand p { font-size: 13.5px; color: var(--text-3); letter-spacing: -0.01em; } .foot-col .kicker { margin-bottom: 16px; font-size: 10.5px; } .foot-col a { display: block; font-size: 14px; color: var(--text-2); padding: 5px 0; letter-spacing: -0.012em; transition: color .16s ease; } .foot-col a:hover { color: var(--text-1); } .foot-bottom { border-top: 1px solid var(--line); padding-top: 24px; font-size: 12.5px; color: var(--text-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .s-caption p .fade { display: block; } .s-caption p .typed { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; max-width: 100%; } .s-caption p .caret { display: none; } .chapters .ch3 .slot { position: relative; display: block; min-height: 1.3em; } .chapters .ch3 .skel { display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 62%; } .chapters .ch3 .txt { display: block; } .trust-rows { border-top: 1px solid var(--line-2); } .trust-row { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line); } .trust-row h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; } .trust-row p { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 58ch; align-self: center; text-wrap: pretty; } body { background: var(--bg); } body::before { display: none; } .sky, .light, .horizon, .floor, .grain { position: absolute; pointer-events: none; } .sky { inset: 0; background: linear-gradient(180deg, #181444 0%, #110F2B 34%, #0B0B14 68%, var(--bg) 100%); } .light { inset: 0; background: radial-gradient(46% 52% at 71% 4%, rgba(178,160,255,0.26), rgba(124,92,252,0.07) 48%, transparent 72%), radial-gradient(30% 30% at 71% 6%, rgba(236,230,255,0.10), transparent 70%); } .horizon { left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent 0%, rgba(201,184,255,0.05) 22%, rgba(214,202,255,0.9) 68%, rgba(201,184,255,0.06) 90%, transparent 100%); } .horizon::after { content: ""; position: absolute; left: 30%; right: 0; top: 1px; height: 14px; background: linear-gradient(90deg, transparent, rgba(201,184,255,0.10) 55%, rgba(201,184,255,0.02) 90%, transparent); } .floor { left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(124,92,252,0.055), rgba(124,92,252,0.015) 45%, transparent 100%); } .grain { inset: 0; opacity: .04; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero { position: relative; overflow: hidden; min-height: calc(100vh - 64px); display: flex; align-items: center; padding: 48px 0 96px; } .hero .horizon { top: 84%; } .hero .floor { top: 84%; } .voice { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .voice canvas { width: 100%; height: 100%; display: block; } .hero .wrap { position: relative; z-index: 2; width: 100%; } .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 56px; align-items: center; } .hero-copy { max-width: 560px; } .hero-copy .kicker { margin-bottom: 28px; color: #A6A3BB; } .hero-copy .kicker .dot { box-shadow: 0 0 0 3px rgba(255,77,106,0.18); } /* one accented phrase per hero headline, the v2 lavender; never on act headings or body */ .hero h1 .accent { color: #C9B8FF; } .hero h1 { font-size: clamp(48px, 6.3vw, 90px); line-height: 0.98; letter-spacing: -0.045em; margin-bottom: 26px; max-width: 11ch; } .hero .lead { font-size: 19px; line-height: 1.5; max-width: 470px; color: #B4B1C6; margin-bottom: 40px; } .stage-wrap { position: relative; perspective: 1600px; perspective-origin: 72% 28%; } .stage-wrap::before { content: ""; position: absolute; left: 6%; right: 0; bottom: -34px; height: 70px; border-radius: 50%; z-index: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.78), transparent 72%); filter: blur(14px); } .stage-wrap .session, .stage-wrap .summary { transform-style: preserve-3d; } .stage-wrap .session { transform: rotateY(-5deg) rotateX(3deg); z-index: 1; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -28px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.4); } .stage-wrap .summary { transform: rotateY(-5deg) rotateX(3deg) translateZ(40px); } .session::before { height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.26) 76%, transparent 100%); } .summary::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.22) 80%, transparent); } .act { position: relative; overflow: hidden; padding: 136px 0; } .act-2 { padding-top: 104px; } .act .wrap { position: relative; z-index: 2; } .act-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 72px; align-items: center; } .act .kicker { margin-bottom: 22px; } .act .kicker .n { color: var(--text-3); margin-right: 6px; } .act h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 22px; } .act .lead { max-width: 480px; } .act .sub { font-size: 22px; font-weight: 500; letter-spacing: -0.028em; color: var(--text-1); margin-bottom: 14px; } .act-head { max-width: 720px; } .act-head .lead { max-width: 640px; } .act-head .body { max-width: 640px; margin-top: 18px; } .pair { margin-top: 36px; border-top: 1px solid var(--line-2); } .pair > div { padding: 22px 0; border-bottom: 1px solid var(--line); } .pair h3 { margin-bottom: 8px; } .pair .body { max-width: 440px; } .lang { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-2); } .lang h3 { margin-bottom: 8px; } .lang .body { max-width: 460px; } .act-stage .sky { background: linear-gradient(180deg, var(--bg) 0%, #100E27 40%, #0C0B18 100%); } .act-stage .light { background: radial-gradient(40% 46% at 68% 30%, rgba(178,160,255,0.20), rgba(124,92,252,0.05) 50%, transparent 72%); } .act-fire .sky { background: linear-gradient(180deg, var(--bg) 0%, #14100F 42%, #0B0A0F 100%); } .act-fire .light { background: radial-gradient(34% 42% at 66% 46%, rgba(245,158,11,0.16), rgba(245,158,11,0.04) 50%, transparent 72%); } .act-fire .kicker { color: #C9A36A; } .act-fire .kicker .n { color: #8A7452; } .act-soft .light { background: radial-gradient(38% 44% at 72% 40%, rgba(178,160,255,0.13), rgba(124,92,252,0.03) 52%, transparent 72%); } .shelf { position: relative; margin-top: 56px; padding-bottom: 36px; } .shelf .spaces { margin-top: 0; } .shelf::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(214,202,255,0.10) 20%, rgba(214,202,255,0.72) 60%, rgba(214,202,255,0.08) 90%, transparent); } .act-2 .floor { top: auto; height: 220px; } .shelf .space { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 40px -24px rgba(0,0,0,0.85); } .panel { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--surface-2); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -28px rgba(0,0,0,0.9); padding: 30px 32px 28px; overflow: hidden; } .panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.24) 76%, transparent); } .moment + .moment { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); } .moment .cap-label { margin-bottom: 12px; } .moment .cap { font-size: 17.5px; line-height: 1.5; letter-spacing: -0.012em; color: var(--text-1); text-wrap: pretty; } .moment .cap .fade { color: var(--text-3); } /* portraits inside avatar circles: the Session panel, the moderation moment, the phone */ .avatar.face { overflow: hidden; background: #2A2A35; } .avatar.face img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 28%; transform: scale(1.55) translateY(8%); } .mod-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .mod-line .stack .avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 2px var(--surface-2); } .mod-line .ok { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: -0.01em; } .mod-line .ok svg { width: 14px; height: 14px; stroke-width: 1.8; color: #7FE0B6; } .mod-ctl { margin-left: auto; display: inline-flex; gap: 6px; } .obj-wrap { position: relative; perspective: 1400px; perspective-origin: 60% 40%; display: flex; justify-content: flex-end; } .obj-wrap::before { content: ""; position: absolute; left: 20%; right: 0; bottom: -30px; height: 60px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.7), transparent 72%); filter: blur(12px); } .summary.big { width: 100%; max-width: 460px; margin: 0; padding: 22px 24px 18px; transform: rotateY(-4deg) rotateX(2deg); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -28px rgba(0,0,0,0.9); } .summary.big h4 { font-size: 19px; letter-spacing: -0.026em; margin-bottom: 14px; } .summary.big .chapters li { font-size: 14.5px; padding: 11px 0; grid-template-columns: 52px 1fr; } .summary.big .chapters li .t { font-size: 12px; } .summary.big .sum-top { margin-bottom: 14px; } .summary.big .sum-top .state i { background: #7FE0B6; } /* ---------- objects on the stage ---------- .session and .summary are home's; any other object standing on a stage takes .obj: the same tilt, the same arrive-once entrance, no tilt on narrow screens. */ .stage-wrap .obj { transform-style: preserve-3d; transform: rotateY(-5deg) rotateX(3deg); z-index: 1; position: relative; } .hero-quiet.has-stage .hero-copy { max-width: 560px; } .hero-quiet.has-stage .hero-copy .lead { max-width: 470px; } .hero-quiet.has-stage .light { background: radial-gradient(40% 46% at 68% 30%, rgba(178,160,255,0.20), rgba(124,92,252,0.05) 50%, transparent 72%); } .hero-quiet.has-stage .stage-wrap:has(.stage-fig)::before { display: none; } .hero-quiet.has-stage .stage-wrap-fig .stage-fig { margin: -40px auto 0; max-width: 520px; } /* the microphone under its spotlight (home act 5, the About hero) */ .stage-fig { max-width: 420px; margin: -12px auto 0; position: relative; aspect-ratio: 1 / 1; } .stage-fig .beam { position: absolute; left: 12%; right: 12%; top: -4%; height: 86%; background: linear-gradient(to bottom, rgba(214,220,255,0) 0%, rgba(214,220,255,0.26) 10%, rgba(214,220,255,0.10) 55%, rgba(214,220,255,0) 100%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); -webkit-mask-image: radial-gradient(ellipse 55% 110% at 50% 0%, #000 20%, rgba(0,0,0,0.5) 50%, transparent 78%); mask-image: radial-gradient(ellipse 55% 110% at 50% 0%, #000 20%, rgba(0,0,0,0.5) 50%, transparent 78%); } .stage-fig .mic { position: absolute; left: 50%; top: 24%; width: 62%; transform: translateX(-50%); filter: drop-shadow(0 18px 22px rgba(0,0,0,0.55)); } .stage-fig::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 8%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200,206,255,0.22), rgba(200,206,255,0)); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .stage-fig .beam, .stage-fig::after { opacity: 0; animation: beam-in 1.4s ease-out .3s forwards; } @supports (animation-timeline: view()) { .stage-fig .beam, .stage-fig::after { animation-timeline: view(); animation-range: entry 10% entry 60%; animation-delay: 0s; } } } @keyframes beam-in { to { opacity: 1; } } .fig { width: 100%; position: relative; } .fig .layer { width: 100%; height: auto; display: block; overflow: visible; } .fig .layer.front { position: absolute; inset: 0; pointer-events: none; } .fig text { font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0; fill: #D8D8DE; } .fig .tagtext { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; } .fig .pool { fill: url(#poolg); } .fig .pool.ai { fill: url(#poolai); } .fig .warm { mix-blend-mode: screen; } .fig .p1 { filter: hue-rotate(250deg) saturate(1.1) brightness(0.95); } .fire-tag { fill: var(--violet); } .clip-wrap { position: relative; } .clip-wrap .clip, .clip-wrap .clip-still { width: 100%; height: auto; display: block; } .clip-wrap .clip-still { display: none; } @media (prefers-reduced-motion: reduce) { .clip-wrap .clip { display: none; } .clip-wrap .clip-still { display: block; } } .clip-sm { width: 88px; margin: 0 0 14px; } .step .clip-wrap { width: 128px; margin: -8px 0 6px -10px; } .mask-top { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); } .fire-video { position: absolute; left: 39%; top: 21.5%; width: 22%; height: auto; pointer-events: none; } .fire-still { position: absolute; left: 36%; top: 23%; width: 28%; height: auto; display: none; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .fire-video { display: none; } .fire-still { display: block; } } .footnote { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-4, #6F6F80); max-width: 46ch; } .fn { color: inherit; font-size: .8em; } @media (prefers-reduced-motion: no-preference) { .rise { opacity: 0; transform: translateY(14px); animation: rise .5s cubic-bezier(.2,.7,.2,1) forwards; } .rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .14s; } .rise.d3 { animation-delay: .22s; } .rise.d4 { animation-delay: .3s; } .rise.d6 { animation-delay: .7s; } @keyframes rise { to { opacity: 1; transform: none; } } .s-caption p .typed { width: 0; max-width: max-content; animation: type 2.4s steps(60, end) 1.1s forwards; } @keyframes type { to { width: 60ch; } } .s-caption p .caret { display: inline-block; animation: blink .6s linear 1.1s 4, caret-off .01s linear 3.5s forwards; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes caret-off { to { opacity: 0; } } .chapters .ch3 .skel { display: block; animation: fade-out .3s ease 3.8s forwards; } .chapters .ch3 .txt { opacity: 0; animation: fade-in .4s ease 3.9s forwards; } @keyframes fade-out { to { opacity: 0; } } @keyframes fade-in { to { opacity: 1; } } @supports (animation-timeline: view()) { .space { animation: rise-view linear both; animation-timeline: view(); } .spaces .sp1 { animation-range: entry 0% entry 38%; } .spaces .sp2 { animation-range: entry 6% entry 44%; } .spaces .sp3 { animation-range: entry 12% entry 50%; } .spaces .sp4 { animation-range: entry 18% entry 56%; } @keyframes rise-view { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } } } @media (prefers-reduced-motion: no-preference) { .stage-wrap .session.arrive { opacity: 0; transform: rotateY(-12deg) rotateX(7deg) translateZ(-140px) translateY(20px); animation: arrive 1s cubic-bezier(.2,.7,.2,1) .28s forwards; } .stage-wrap .summary.arrive { opacity: 0; transform: rotateY(-12deg) rotateX(7deg) translateZ(-100px) translateY(20px); animation: arrive-s 1s cubic-bezier(.2,.7,.2,1) .62s forwards; } .stage-wrap .obj.arrive { opacity: 0; transform: rotateY(-12deg) rotateX(7deg) translateZ(-140px) translateY(20px); animation: arrive 1s cubic-bezier(.2,.7,.2,1) .28s forwards; } @keyframes arrive { to { opacity: 1; transform: rotateY(-5deg) rotateX(3deg); } } @keyframes arrive-s { to { opacity: 1; transform: rotateY(-5deg) rotateX(3deg) translateZ(40px); } } @supports (animation-timeline: view()) { .act .fig, .act .panel, .act .obj-wrap, .act .step { animation: rise-view linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } .act .step:nth-child(2) { animation-range: entry 8% entry 48%; } .act .step:nth-child(3) { animation-range: entry 16% entry 56%; } } } @media (max-width: 1100px) { .hero-grid { gap: 48px; } } @media (max-width: 960px) { .links { display: none; } .hero { padding: 72px 0 88px; } .hero-grid { grid-template-columns: 1fr; gap: 56px; } .hero-copy { max-width: 600px; } .stage-wrap { max-width: 640px; } .pillars, .steps { grid-template-columns: 1fr; gap: 32px; } .pillar .body, .step .body { max-width: 560px; } .row { grid-template-columns: 56px 1fr; } .row .body { grid-column: 2; padding-top: 0; } .row-spaces .body { grid-column: auto; padding-top: 8px; } .trust-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; } .trust-row p { align-self: start; } .section { padding: 88px 0; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 600px) { :root { --gutter: 20px; } .nav-in { height: 60px; } .hero { padding: 56px 0 72px; } h1 { font-size: clamp(36px, 10.5vw, 44px); letter-spacing: -0.035em; } .hero-copy .lead { font-size: 17px; } .session { padding: 18px 16px 16px; border-radius: var(--radius-lg); } .s-count { display: none; } .s-stage { grid-template-columns: repeat(4, 1fr); gap: 4px; } .speaker .ring, .speaker .ring .avatar { width: 48px; height: 48px; font-size: 14px; } .speaker.host .ring, .speaker.host .ring .avatar { width: 54px; height: 54px; font-size: 15px; } .speaker .pip { top: 34px; right: calc(50% - 28px); } .speaker .st { display: none; } .speaker.host .st { display: block; } .s-listeners .lbl { display: none; } .ctl span { display: none; } .ctl { padding: 0 10px; } .ctl.leave span { display: inline; } .summary { width: auto; margin: -12px 12px 0; } .section { padding: 72px 0; } .sec-head { margin-bottom: 40px; } .row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; } .row h3 { padding-top: 0; } .row-spaces .row-main { padding-top: 0; } .space { padding: 12px 12px 10px; border-radius: var(--radius); } .space-top .kicker { font-size: 9.5px; letter-spacing: 0.08em; } .space-top .live-tag .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .space-top .live-tag { padding: 4px; gap: 0; } .space-foot { font-size: 11.5px; } .space-foot .extra { display: none; } .s-caption p { font-size: 14px; } .s-caption p .typed { display: inline; white-space: normal; overflow: visible; width: auto; animation: none; } .s-caption p .caret { display: none; animation: none; } .note { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; } .band { padding: 72px 0; } .band + .section { padding-top: 72px; } .beta { padding: 56px 20px; border-radius: var(--radius-lg); } .beta-actions .btn { width: 100%; } .foot-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 1100px) { .hero h1 { font-size: clamp(44px, 6vw, 72px); } } @media (max-width: 960px) { .hero { min-height: 0; padding: 56px 0 96px; } .hero-grid { grid-template-columns: 1fr; gap: 56px; } .hero h1 { max-width: none; } .stage-wrap { perspective: none; } .stage-wrap .session, .stage-wrap .summary, .stage-wrap .obj, .summary.big { transform: none !important; } .act { padding: 96px 0; } .act-grid { grid-template-columns: 1fr; gap: 44px; } .obj-wrap { justify-content: flex-start; } .summary.big { max-width: 560px; } } @media (max-width: 600px) { .hero h1 { font-size: clamp(40px, 11.5vw, 52px); letter-spacing: -0.04em; } .hero .lead { font-size: 17px; } .act h2 { font-size: 34px; } .act .sub { font-size: 19px; } .panel { padding: 18px 16px; border-radius: var(--radius-lg); } .mod-ctl { margin-left: 0; } .space-foot .extra { display: none; } } /* ---------- quiet hero: the product pages open with copy alone, under the same sky ---------- About, Beta and Pricing share it. No stage, no panel; the light sits nearer the copy. */ .hero-quiet { min-height: 0; padding: 96px 0 104px; display: block; } .hero-quiet .light { background: radial-gradient(46% 60% at 24% 18%, rgba(178,160,255,0.16), rgba(124,92,252,0.05) 55%, transparent 75%); } .hero-quiet .hero-copy { max-width: 760px; } .hero-quiet h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 22px; max-width: 16ch; } .hero-quiet .lead { max-width: 620px; margin-bottom: 0; } .hero-quiet .hero-actions { margin-top: 36px; } .hero-quiet .footnote { margin-top: 22px; } .act-quiet { padding: 112px 0; } .act-quiet + .act-quiet { padding-top: 0; } .act-quiet .act-head .body + .body { margin-top: 14px; } @media (max-width: 960px) { .hero-quiet { padding: 64px 0 80px; } .act-quiet { padding: 88px 0; } } @media (max-width: 600px) { .hero-quiet { padding: 48px 0 64px; } .hero-quiet h1 { font-size: clamp(36px, 10.5vw, 48px); } .act-quiet { padding: 72px 0; } } /* ---------- the Earnings card (Creators hero, Pricing hero) ---------- */ .earn { position: relative; z-index: 2; width: 320px; margin: -26px -20px 0 auto; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%), var(--elevated); box-shadow: var(--shadow-pop); padding: 16px 18px 14px; } .earn-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .earn-top .kicker { font-size: 10.5px; color: var(--text-3); gap: 7px; } .earn-top .kicker svg { width: 13px; height: 13px; stroke-width: 1.7; color: var(--text-4); } .earn-top .state { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; } .earn-top .state i { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); display: inline-block; } .earn h4 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--text-1); } .earn ul { list-style: none; display: flex; flex-direction: column; } .earn li { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); letter-spacing: -0.01em; } .earn .skel { display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.07); justify-self: end; } .earn .foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); letter-spacing: -0.01em; } .stage-wrap .earn { transform-style: preserve-3d; transform: rotateY(-5deg) rotateX(3deg) translateZ(40px); } .earn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.22) 80%, transparent); } @media (prefers-reduced-motion: no-preference) { .stage-wrap .earn.arrive { opacity: 0; transform: rotateY(-12deg) rotateX(7deg) translateZ(-100px) translateY(20px); animation: arrive-s 1s cubic-bezier(.2,.7,.2,1) .62s forwards; } } @media (max-width: 960px) { .stage-wrap .earn { transform: none !important; } } @media (max-width: 600px) { .earn { width: auto; margin: -12px 12px 0; } } /* ---------- FAQ groups: native details/summary (Creators, FAQ, the document pages) ---------- */ .faq { border-top: 1px solid var(--line-2); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 24px; padding: 22px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.018em; color: var(--text-1); transition: color .16s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--text-1); } .faq summary .chev { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,0.02); display: grid; place-items: center; color: var(--text-3); transition: transform .2s ease, color .16s ease, border-color .16s ease; } .faq summary .chev svg { width: 12px; height: 12px; stroke-width: 1.9; } .faq details[open] summary .chev { transform: rotate(180deg); color: var(--text-1); border-color: var(--line-strong); } .faq details .body { padding: 0 48px 24px 0; max-width: 640px; margin-top: -6px; } @media (prefers-reduced-motion: reduce) { .faq summary .chev { transition: none; } } @media (max-width: 600px) { .faq summary { font-size: 16px; padding: 18px 0; } .faq details .body { padding-right: 0; } }