/* demo.css — the /demo STAGE, not the components. Every product surface inside the stage is styled by demo-surfaces.css, which is generated from the app's own CSS; nothing here restyles a component. ⚠ The only rules below that touch app markup are LAYOUT for the fixed viewport the app is shown in (the app assumes a 100vh window; the stage gives it a 1280×800 one). Colour, type and spacing stay the app's. */ :root { --dm-field: #100d0a; --dm-field-2: #1a1410; --dm-cream: #f6f0e6; --dm-cream-2: #cfc6b9; --dm-cream-3: #9a9082; --dm-terra: #e07a54; --dm-terra-d: #c65a36; --dm-line: rgba(239, 233, 223, 0.10); --dm-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --dm-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --dm-sans: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --dm-ease: cubic-bezier(.2, .7, .1, 1); } html, body { margin: 0; background: var(--dm-field); color: var(--dm-cream); } body { font-family: var(--dm-sans); -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } /* ── the page around the stage ───────────────────────────────────────────────────────────────────── */ .dm-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 18px 20px 22px; gap: 14px; } .dm-top { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; width: 100%; margin: 0 auto; } .dm-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--dm-cream); text-decoration: none; font-family: var(--dm-serif); font-size: 17px; } .dm-brand svg { width: 20px; height: 20px; } .dm-top-cta { font-family: var(--dm-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-cream-2); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; } .dm-top-cta:hover { color: var(--dm-terra); border-bottom-color: var(--dm-terra); } .dm-box { position: relative; flex: 1 1 auto; width: 100%; max-width: 1400px; margin: 0 auto; min-height: 240px; aspect-ratio: 16 / 9; max-height: calc(100dvh - 140px); } .dm-box.is-45 { aspect-ratio: 4 / 5; max-width: 720px; } /* controls: play/pause · scrub · replay */ .dm-controls { display: flex; align-items: center; gap: 14px; max-width: 1400px; width: 100%; margin: 0 auto; } .dm-btn { appearance: none; background: none; border: 1px solid rgba(239, 233, 223, 0.22); color: var(--dm-cream); border-radius: 999px; height: 34px; min-width: 34px; padding: 0 12px; font: 500 12px/1 var(--dm-mono); letter-spacing: .06em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } .dm-btn:hover { border-color: var(--dm-terra); color: var(--dm-terra); } .dm-btn:focus-visible { outline: 2px solid var(--dm-terra); outline-offset: 2px; } .dm-btn svg { width: 12px; height: 12px; fill: currentColor; } .dm-scrub { position: relative; flex: 1 1 auto; height: 34px; display: flex; align-items: center; } .dm-scrub input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; } .dm-track { position: relative; height: 3px; width: 100%; background: rgba(239, 233, 223, 0.14); border-radius: 3px; } .dm-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dm-terra); border-radius: 3px; } .dm-tick { position: absolute; top: -3px; width: 1px; height: 9px; background: rgba(239, 233, 223, 0.28); } .dm-knob { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--dm-cream); } .dm-scrub input:focus-visible + .dm-track { outline: 2px solid var(--dm-terra); outline-offset: 6px; } .dm-time { font: 500 12px/1 var(--dm-mono); color: var(--dm-cream-3); min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; } /* capture + loop: the stage is the whole page */ .dm-cap .dm-top, .dm-cap .dm-controls, .dm-loop .dm-top, .dm-loop .dm-controls { display: none; } .dm-cap .dm-page, .dm-loop .dm-page { padding: 0; min-height: 0; height: 100vh; } .dm-cap .dm-box, .dm-loop .dm-box { max-width: none; max-height: none; height: 100vh; aspect-ratio: auto; } /* ── the stage: a fixed logical frame, scaled to fit (demo-engine.js fitStage) ────────────────────── */ .dm-stage { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; overflow: hidden; background: radial-gradient(120% 90% at 78% 12%, #221a14 0%, var(--dm-field) 55%, #0b0907 100%); } .dm-stage.dm-jump, .dm-stage.dm-jump * { transition: none !important; } /* headlines — two elements, cross-faded (ruled 2026-09-14, cut 4: "Three chapter turns"). .dm-copy is the full-screen headline, shown only in a chapter turn's intro; .dm-caption is the large line top-left above the frame, where every other headline dissolves in place. Nothing changes size or position between them. */ .dm-copy { position: absolute; transition: opacity .6s var(--dm-ease); } .dm-stage:not(.is-intro) .dm-copy { opacity: 0; } .dm-kicker { position: relative; height: 16px; font: 500 15px/1 var(--dm-mono); letter-spacing: .16em; color: var(--dm-terra); } .dm-kicker span, .dm-head { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--dm-ease), transform .7s var(--dm-ease); } .dm-kicker span.is-on, .dm-head.is-on { opacity: 1; transform: none; } .dm-heads { position: relative; margin-top: 26px; } .dm-head, .dm-capline { margin: 0; font-family: var(--dm-serif); font-weight: 500; letter-spacing: -0.012em; color: var(--dm-cream); font-variation-settings: 'opsz' 144; text-wrap: balance; } .dm-caption { position: absolute; transition: opacity .6s var(--dm-ease); } .dm-stage.is-intro .dm-caption { opacity: 0; } .dm-capline { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .6s var(--dm-ease); } .dm-capline.is-nowrap { white-space: nowrap; } .dm-capline.is-on { opacity: 1; } /* the screen: a quiet window around the real app (logical size = its play size; the intro is a transform) */ .dm-screen { position: absolute; border-radius: 14px; overflow: hidden; background: #0d0b09; transform-origin: 0 0; transition: transform .95s var(--dm-ease); box-shadow: 0 0 0 1px rgba(239, 233, 223, 0.10), 0 40px 120px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.35); } .dm-chrome { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #1b1612; border-bottom: 1px solid rgba(239, 233, 223, 0.08); } .dm-dots { display: flex; gap: 7px; } .dm-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(239, 233, 223, 0.16); } .dm-url { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0 auto; height: 26px; border-radius: 7px; background: rgba(239, 233, 223, 0.06); font: 400 13px/26px var(--dm-sans); color: var(--dm-cream-3); text-align: center; } .dm-url span { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--dm-ease); } .dm-url span.is-on { opacity: 1; } .dm-url b { color: var(--dm-cream-2); font-weight: 400; } /* ⭐ WHOSE SCREEN THIS IS (2026-09-15: "make that more of an obvious transition so viewer knows what they are seeing"). A demo label, not app chrome: it names the viewer in the window bar and changes, with a chapter turn, when the fund's side begins. The fund's label is the one filled terracotta, so the switch reads at a glance. */ .dm-who { position: absolute; right: 16px; top: 9px; height: 26px; } .dm-who span { position: absolute; right: 0; top: 0; height: 26px; display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap; border-radius: 13px; font: 600 12px/1 var(--dm-sans); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: opacity .45s var(--dm-ease), transform .45s var(--dm-ease); } .dm-who span.is-on { opacity: 1; transform: none; } .dm-who .dm-who-f { color: var(--dm-cream-2); background: rgba(239, 233, 223, 0.08); box-shadow: inset 0 0 0 1px rgba(239, 233, 223, 0.18); } .dm-who .dm-who-v { color: #fff; background: var(--dm-terra-d); } /* 4:5 is 1080 wide: the URL narrows so the label keeps its room beside it */ .dm-stage.is-45 .dm-url { max-width: 380px; margin-left: 40px; } .dm-screen.is-fund .dm-chrome { background: #2a1a12; } .dm-stage.is-intro .dm-screen { transform: var(--screen-intro); } /* ⛔ FULLY HIDDEN, NEVER DIMMED (Bret, 2026-09-15). `visibility: hidden` rather than a low opacity: a faint shell is the bug, not a softer version of it, and opacity would still composite the rounded corner and the chrome bar against the card. ⚠ `visibility` also leaves layout untouched, so the shell is exactly where the push-in expects it the instant this comes off. */ .dm-stage.is-prereveal .dm-screen { visibility: hidden; } .dm-stage.is-45 .dm-screen { border-radius: 0; } .dm-viewport { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; overflow: hidden; background: #f5f2ed; } .dm-viewport:has(.dm-scene[data-scene="cascade"].is-on), .dm-viewport:has(.dm-scene[data-scene="p"].is-on) { background: #15110d; } /* scenes inside the viewport: 1280×800 app pixels, moved by the camera */ .dm-scene { position: absolute; left: 0; top: 0; width: var(--app-w); height: var(--app-h); transform-origin: 0 0; opacity: 0; transition: opacity .45s var(--dm-ease); pointer-events: none; } .dm-scene.is-on { opacity: 1; } .dm-app, .dm-p { width: var(--app-w); height: var(--app-h); overflow: hidden; position: relative; } /* ⚠ LAYOUT ONLY: the app is a 100vh shell; the stage gives it a fixed window. */ .dm-app .app { height: var(--app-h); } .dm-app .toast { position: absolute; } .dm-app .gl-moment { position: absolute; } .dm-app .fit-overlay { position: absolute; overflow: visible; } .dm-p { overflow: hidden; height: calc(var(--app-h) + 100px); background: #15110d; } .dm-app.dm-tall, .dm-app.dm-tall .app { height: var(--app-tall); } .dm-cascade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .dm-app.dm-pg { background: #100d0a; } .dm-pg-tri { position: absolute; inset: 0; } /* ⚠ THE ONE TIMING DEPARTURE FROM THE APP'S PLAYGROUND: the triangle entry runs at 70% of its 3 s so the grounded Venn lands inside the ~2–3 s the bridge was ruled to give it. The keyframes and easing are the app's. */ @media (prefers-reduced-motion: no-preference) { .dm-pg .pg-tri.anim .tri-a, .dm-pg .pg-tri.anim .tri-b { animation-duration: 2.1s; } .dm-pg .pg-tri.anim .lens { animation-duration: .6s; animation-delay: 1.8s; } .dm-pg .pg-tri.anim .labels { animation-duration: .5s; animation-delay: 2.05s; } } .dm-p-scroll { will-change: transform; } /* ⭐ THE FUND'S SHOW-INTEREST BLOCK ON THE PERCH PAGE (2026-09-15). Hand-written HERE and never in demo-surfaces.css, which is GENERATED from the app's own stylesheets and carries a `--check` that fails on drift — a rule added there would be wiped by the next regeneration, or turn the check red. ⛔ It has no app counterpart to be derived FROM: production `/p/` has no such control (see sceneP's note), so this is demo-only styling by necessity, not by shortcut. It borrows the page's own tokens so it still reads as part of the perch rather than as something pasted onto it. */ .dm-p .p-act { margin: 40px 0 8px; padding: 26px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); } .dm-p .p-act-btn { font: 600 16px/1 var(--sans, inherit); color: #fff; background: var(--accent); border: 0; border-radius: 8px; padding: 14px 22px; cursor: pointer; } .dm-p .p-act-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); } .dm-p .p-act-head { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink); } .dm-p .p-act-sub { margin: 0; font-size: 15px; color: var(--ink-2); } /* ⛔ THE BUTTON WRAPPER IS DELIBERATELY *NOT* `.dm-alt`. That class is `display:none !important` until `.dm-show` is added, so a wrapper carrying it would start INVISIBLE and the fund would click nothing — caught before the first render, and worth stating because every other two-state pair in this file DOES use `.dm-alt`. ⭐ The pair is asymmetric on purpose: the button starts visible and is removed by `.dm-gone`; the confirmation starts hidden as `.dm-alt` and is revealed by `.dm-show`. Both flip on the same cue, so there is no frame where the block is empty and the page jumps. */ /* beat 4: the drafted fields land one at a time (a cue adds .is-in) */ .dm-land { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; } .dm-land.is-in { opacity: 1; transform: none; } /* beat 4's transformation (2026-09-15): the Details view recedes, the deck's title slide grows into the backdrop band, and the founder perch broadsheet assembles one accepted field at a time. The broadsheet's own look is the app's (demo-surfaces.css, rules rooted at .perch); only the entrance is set here. */ .dm-details { transition: opacity .6s var(--dm-ease), transform .8s var(--dm-ease); transform-origin: 50% 20%; } .dm-details.dm-recede { opacity: 0; transform: scale(.965); } .dm-perchview { position: absolute; left: 0; top: 0; width: var(--app-w); min-height: var(--app-tall); z-index: 30; opacity: 0; background: #15110d; transition: opacity .6s var(--dm-ease); } .dm-perchview.is-on { opacity: 1; } .dm-perchview .perch { min-height: var(--app-tall); } .dm-pv { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--dm-ease), transform .7s var(--dm-ease); } .dm-pv.is-in { opacity: 1; transform: none; } .dm-pv-bd { transform: none; transition: opacity .9s var(--dm-ease); } .dm-morph { position: absolute; left: 0; top: 0; width: 320px; height: 180px; z-index: 35; transform-origin: 0 0; opacity: 0; transform: var(--m-from); border-radius: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); pointer-events: none; transition: transform .9s var(--dm-ease), opacity .45s var(--dm-ease), border-radius .9s var(--dm-ease); } .dm-morph.is-up { opacity: 1; } .dm-morph.is-go { transform: var(--m-to); border-radius: 0; } .dm-morph.is-done { opacity: 0; } /* a class a cue turns on to reveal one of several alternates (state text that changes over time). ⚠ It only ever HIDES. Shown, an element keeps whatever display the app's own CSS gives it — forcing one here overrode `.gl-moment`'s flex centring on the first render. */ .dm-alt:not(.dm-show) { display: none !important; } .dm-gone { display: none !important; } /* the dragged file, as the OS draws it */ .dm-ghost { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: rgba(255, 255, 255, 0.96); border-radius: 8px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.08); font: 500 13px/1.2 var(--dm-sans); color: #2d2520; opacity: 0; transition: opacity .2s ease; z-index: 30; } .dm-ghost.is-on { opacity: 1; } .dm-ghost .dm-doc { width: 30px; height: 38px; border-radius: 3px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; } .dm-ghost .dm-doc img { width: 100%; display: block; } .dm-ghost .dm-doc em { position: absolute; left: 0; right: 0; bottom: 0; font: 700 7px/11px var(--dm-sans); font-style: normal; text-align: center; color: #fff; background: #c9372c; } /* the pointer */ .dm-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); } .dm-cursor.is-on { opacity: 1; } .dm-cursor svg { width: 100%; height: 100%; transition: transform .12s ease; transform-origin: 4px 3px; } .dm-cursor.is-press svg { transform: scale(.86); } .dm-caret { display: inline-block; width: 1.5px; height: 17px; background: #2d2520; vertical-align: text-bottom; animation: dm-blink 1.06s steps(1) infinite; } @keyframes dm-blink { 50% { opacity: 0; } } /* ── the close card: the door ─────────────────────────────────────────────────────────────────────── */ .dm-close { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .7s var(--dm-ease); pointer-events: none; background: radial-gradient(90% 80% at 50% 40%, #221a14 0%, var(--dm-field) 60%, #0b0907 100%); } .dm-close.is-on { opacity: 1; pointer-events: auto; } .dm-close-in { width: 1024px; max-width: calc(100% - 64px); text-align: left; transform: translateY(18px); transition: transform .9s var(--dm-ease); } .dm-close.is-on .dm-close-in { transform: none; } .dm-close-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; font-family: var(--dm-serif); font-size: 26px; color: var(--dm-cream); } .dm-close-mark svg { width: 34px; height: 34px; } .dm-close-h { margin: 0 0 34px; font-family: var(--dm-serif); font-weight: 500; font-size: 104px; line-height: .98; letter-spacing: -0.03em; color: var(--dm-cream); font-variation-settings: 'opsz' 144; } .dm-close-h em { font-style: normal; color: var(--dm-terra); } .dm-close .dm-start { background: transparent; } /* ⭐ THE DOOR MATCHES THE HEADLINE'S WEIGHT (Bret, 2026-09-14): the email field and Start free ~56px tall, the block ~1.6× /start's width, a larger label; same vertical order, same centring. Sizes only — the form is /start's own markup. ⏳ The same change is owed on /start itself once the loop embed lands there. */ .dm-close .dm-start .s-form { width: 1024px; max-width: 100%; } .dm-close .dm-start .s-label { color: var(--dm-cream-3); font-size: 18px; letter-spacing: .08em; margin-bottom: 12px; } .dm-close .dm-start .s-email { background: #fffdfa; height: 56px; font-size: 22px; padding: 0 20px; border-radius: 11px; margin-bottom: 14px; } .dm-close .dm-start .s-cta { background: var(--dm-terra-d); height: 56px; font-size: 22px; padding: 0 20px; border-radius: 11px; } .dm-close .dm-start .s-err { font-size: 17px; } .dm-stage.is-45 .dm-close-in { max-width: calc(100% - 160px); } @media (prefers-reduced-motion: reduce) { .dm-head, .dm-kicker span, .dm-scene, .dm-close, .dm-close-in { transition-duration: .01s !important; } .dm-caret { animation: none; } } @media (max-width: 720px) { .dm-page { padding: 12px 16px 16px; } .dm-time { display: none; } } /* ── SOUND (2026-09-15) ─────────────────────────────────────────────────────────────────────────────── The unmute control sits with the other transport buttons and reads its own state. ⚠ It shows the CURRENT state as a word ("Sound off" / "Sound on"), not the action — a button labelled "Unmute" beside a muted video is ambiguous about which one it is describing. */ .dm-sound .dm-sound-on { display: none; } .dm-sound[aria-pressed="true"] .dm-sound-on { display: inline; } .dm-sound[aria-pressed="true"] .dm-sound-off { display: none; } .dm-sound[aria-pressed="true"] { color: var(--dm-terra); border-color: var(--dm-terra); } /* ── THE POSTER (2026-09-16) ────────────────────────────────────────────────────────────────────────── Covers the stage until the first press. ⚠ It is a real