/* Ten — prototype → production landing page * * Design DNA is inherited wholesale from ten-studios v2.css so this reads as * the same company: white ground, warm #F0EDE7 panels, near-black pill CTAs, * system-font display + Charter serif body, and colour ONLY inside contained * rounded surfaces (the indigo→violet gradient is the single saturated note). * * New here: the mock-UI kit (.win + friends) used by the four-step product * demo. Those are deliberately generic primitives — every panel in the demo is * built from the same window chrome so the whole sequence feels like one * product rather than four screenshots. */ :root { --bg: #F6F4F0; /* warm paper ground — white surfaces float on it */ --panel: #F0EDE7; /* the contained warm surface */ --panel-deep: #E8E4DB; --card: #FFFFFF; --ink: #111213; --ink-soft: #2A2B2E; --mute: #6E727A; --mute-soft: #93979F; --rule: #E5E1D8; --rule-cool: #E9E9EF; --dark: #131416; --dark-rule: #2C2D31; --dark-fg: #F2F1ED; --dark-mute: #9A9DA3; /* accents — used sparingly, inside surfaces only */ --indigo: #4452CE; --violet: #8A66D6; --indigo-soft: #EEEDFB; --indigo-line: #D6D3F3; --up: #1E9E63; --up-soft: #E9F7F0; /* the ops dashboard's money-green, matched exactly to source_code/shared/ops/dashboard so the two read as one product */ --money: #2E7D5B; --money-wash: #E9F1EC; --warn: #B5820E; --warn-soft: #FBF3E0; --down: #C4444F; --font-display: 'Helvetica Neue', system-ui, -apple-system, sans-serif; --font-body: Charter, Georgia, serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; --wide: 1280px; --pad-x: 48px; --r-card: 20px; --r-panel: 28px; --nav-h: calc(72px + env(safe-area-inset-top, 0px)); --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* quint — panel swaps, staggers */ } * { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -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; } img { max-width: 100%; } .wide { width: 100%; max-width: var(--wide); margin: 0 auto; } .band { position: relative; width: 100%; padding: 104px var(--pad-x); } @media (max-width: 1000px) { :root { --pad-x: 32px; } } @media (max-width: 860px) { .band { padding: 64px var(--pad-x); } } @media (max-width: 480px) { :root { --pad-x: 20px; } } /* ---------- type ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.028em; line-height: 1.05; margin: 0; color: var(--ink); } h1 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 18px; } h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.012em; } h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } p, li { font-family: var(--font-body); font-size: 1.14rem; line-height: 1.6; margin: 0 0 1rem; } @media (max-width: 720px) { p, li { font-size: 1.06rem; } } .lede { font-size: clamp(1.14rem, 1.9vw, 1.36rem); line-height: 1.52; color: var(--mute); } .lede strong { color: var(--ink); font-weight: 500; } .eyebrow { font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute); margin: 0 0 18px; } .section-head { max-width: 720px; margin: 0 0 48px; } .section-head p { margin-bottom: 0; } /* statement left, product sentence right — the shape of the slide this copy came from. Collapses to stacked below 900px, where two columns would leave both halves too narrow to read. */ .section-head--split { max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px 72px; align-items: start; } /* sized so the statement lands on two lines, as it does on the slide — a size up and "responsibility for your idea." breaks and it reads as four */ .section-head--split h2 { margin-bottom: 0; font-size: clamp(1.85rem, 3.1vw, 2.45rem); } .section-head--split .lede { max-width: 34ch; padding-top: 0.35em; } @media (max-width: 900px) { .section-head--split { grid-template-columns: 1fr; gap: 18px; max-width: 720px; } .section-head--split h2, .section-head--split .lede { max-width: none; } } /* the one accent in body copy — same indigo the product surfaces use */ .hl { color: var(--indigo); } .center { text-align: center; margin-left: auto; margin-right: auto; } /* ---------- buttons ---------- */ .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-flex; align-items: center; gap: 9px; transition: background 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease); } .btn:hover, .btn:focus-visible { background: var(--ink-soft); transform: translateY(-1px); } /* the Cursor secondary: a filled warm-grey pill, no border */ .btn--ghost { color: var(--ink); background: #E8E5DE; } .btn--ghost:hover, .btn--ghost:focus-visible { background: #DEDAD1; } .btn--light { color: var(--ink); background: #FFFFFF; } .btn--light:hover, .btn--light:focus-visible { background: #E9E7E2; color: var(--ink); } .btn--full { width: 100%; justify-content: center; padding: 16px 28px; } .btn--sm { padding: 11px 20px; font-size: 0.9rem; } .btn svg { width: 15px; height: 15px; } /* the one saturated element */ .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); } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad-x) 14px; background: rgba(246, 244, 240, 0.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease), background 200ms var(--ease); } .nav.is-stuck { border-bottom-color: var(--rule); } .mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); } .mark-logo { width: 24px; height: 24px; border-radius: 6px; display: block; } /* letterspaced uppercase wordmark, Cursor-style */ .mark-word { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.1em; text-transform: uppercase; } /* the links sit dead-centre in the viewport, independent of how wide the two flanking groups are — that's what reads as "Cursor" and not "a flex row" */ .nav-mid { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; } .nav-link { font-family: var(--font-display); font-size: 0.95rem; font-weight: 450; color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; transition: background 140ms var(--ease), color 140ms var(--ease); } .nav-link:hover { background: rgba(17, 18, 19, 0.055); } .nav-link.is-current { color: var(--mute); } .nav-right { display: flex; align-items: center; gap: 10px; } .nav-signin { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; } .nav-signin:hover { background: rgba(17, 18, 19, 0.055); } .nav-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); } .nav-toggle span::before { top: -5px; } .nav-toggle span::after { top: 5px; } @media (max-width: 900px) { .nav-mid, .nav-signin { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 480px) { .nav-right .btn { display: none; } } .mobile-menu { position: fixed; inset: var(--nav-h) 0 0; z-index: 55; background: var(--bg); padding: 24px var(--pad-x) 40px; display: none; flex-direction: column; gap: 4px; } .mobile-menu.is-open { display: flex; } .mm-link { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--rule); } .mobile-menu .btn { margin-top: 26px; } /* ---------- hero ---------- Cursor anatomy: left-aligned, sits low on the fold, headline straight into two pill CTAs, nothing else. The showcase below is meant to be cut by the fold, so the top padding here is doing real work — don't shrink it without re-checking against a 900px-tall viewport. */ .hero { padding-top: calc(var(--nav-h) + 76px); padding-bottom: 0; } @media (max-width: 860px) { .hero { padding-top: calc(var(--nav-h) + 48px); } } /* two lines at every width above 860 — three lines pushes the showcase off the fold, which defeats the whole layout */ .hero h1 { max-width: 30ch; font-size: clamp(2.3rem, 4.2vw, 3.5rem); line-height: 1.06; letter-spacing: -0.034em; } .hero-sub { max-width: 46ch; margin: 20px 0 0; font-size: clamp(1.02rem, 1.35vw, 1.14rem); color: var(--mute); line-height: 1.5; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .hero-note { margin-top: 18px; font-family: var(--font-display); font-size: 0.84rem; color: var(--mute-soft); } /* ---------- credentials strip ---------- Sits directly under the showcase: the product, then who's behind it. Ruled top and bottom so it reads as a band rather than more page content. Items are text until demo.js finds a real logo file for them. */ .creds { margin-top: 40px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0; display: flex; align-items: center; justify-content: center; gap: 14px 48px; flex-wrap: wrap; } .creds-label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); margin: 0; flex: 0 0 auto; } .creds-list { display: flex; align-items: center; justify-content: center; gap: 16px 44px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .cred { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.012em; color: #8B8880; margin: 0; line-height: 1; display: flex; align-items: center; } /* the upgraded state — a real logo file, capped so tall and wide marks sit on the same optical baseline */ .cred img { height: 25px; width: auto; max-width: 148px; display: block; opacity: 0.92; } /* same swap mechanism, panel scale — used by .bl-from in the build canvas and .st-works on /start/ */ .cred--xs { font-size: 0.8rem; font-weight: 500; color: #A9A59D; } .cred--xs img { height: 15px; max-width: 66px; opacity: 0.85; } @media (max-width: 640px) { .creds { gap: 12px 28px; padding: 18px 0; margin-top: 30px; } .creds-list { gap: 14px 26px; } .cred { font-size: 0.98rem; } .cred img { height: 20px; max-width: 112px; } } /* (the old .from-strip below the showcase was retired 2026-08-13 — those builder names now live in the build canvas's footer strip, see .bl-from) */ /* ===================================================================== THE DEMO — four steps, auto-advancing, click to jump. Left rail carries the copy + a progress bar; right stage swaps panels. ===================================================================== */ .demo { padding-top: 52px; padding-bottom: 26px; } /* the credentials strip is the demo section's own closing rule, so the section that follows it opens tight — a full 104px band gap reads as a dead screen */ .band--tight { padding-top: 62px; } @media (max-width: 860px) { .band--tight { padding-top: 44px; } } .demo .wide { position: relative; } /* ---------- the showcase ---------- Cursor puts its product window on a painting inside a rounded frame, and lets the fold cut the bottom off. Ours is the same move with a painted dusk instead of an oil landscape: this frame is where ALL the saturated colour on the page lives, which is why the chrome everywhere else can stay neutral. */ .showcase { position: relative; border-radius: 26px; padding: 44px; overflow: hidden; isolation: isolate; box-shadow: 0 1px 2px rgba(17, 18, 19, 0.05), 0 40px 90px -60px rgba(30, 24, 70, 0.55); } @media (max-width: 860px) { .showcase { padding: 18px; border-radius: 20px; } } .showcase-art { position: absolute; inset: 0; z-index: -1; background: radial-gradient(96% 74% at 14% 2%, rgba(255, 198, 126, 0.95) 0%, rgba(255, 198, 126, 0) 50%), radial-gradient(78% 66% at 88% 2%, rgba(228, 124, 160, 0.88) 0%, rgba(228, 124, 160, 0) 54%), radial-gradient(140% 118% at 64% 110%, rgba(20, 16, 58, 0.98) 0%, rgba(20, 16, 58, 0) 56%), radial-gradient(118% 100% at -4% 104%, rgba(56, 36, 122, 0.94) 0%, rgba(56, 36, 122, 0) 54%), linear-gradient(158deg, #5A4FC4 0%, #8A5FB0 26%, #C97C74 50%, #6A4A9E 74%, #221C58 100%); } /* the painterly part: grain + a vignette, so it reads as a surface and not as a CSS gradient. Inline SVG — no external requests anywhere on this page. */ .showcase-art::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.20; mix-blend-mode: overlay; } .showcase-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 42%, transparent 42%, rgba(26, 22, 58, 0.34) 100%); } /* one window, not four: the traffic lights and the app title live on the shell, the way Cursor's do — each panel below is a view inside this one app */ .demo-shell { position: relative; background: rgba(255, 255, 255, 0.97); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(24, 20, 56, 0.14), 0 28px 70px -28px rgba(24, 20, 56, 0.55); } .shell-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #EFEDE8; background: #FAF9F6; } .shell-title { flex: 1 1 auto; text-align: center; font-family: var(--font-display); font-size: 0.83rem; color: var(--mute); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* keeps .shell-title optically centred against the three dots on the left */ .shell-bar::after { content: ''; width: 42px; flex: 0 0 auto; } @media (max-width: 640px) { .shell-title { font-size: 0.76rem; } } .shell-body { padding: 10px; display: grid; grid-template-columns: 296px 1fr; gap: 10px; align-items: stretch; } @media (max-width: 1000px) { .shell-body { grid-template-columns: 1fr; } } /* the shell is white now, so the rail needs its own ground for the active step to read against — same trick Cursor's left-hand task list uses */ .demo-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: #F4F2ED; border-radius: 12px; } .dstep { position: relative; display: block; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 18px 18px 19px; border-radius: 14px; font-family: var(--font-display); color: var(--ink); transition: background 220ms var(--ease-out); } .dstep:hover { background: rgba(255, 255, 255, 0.55); } .dstep:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; } .dstep.is-on { background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 18, 19, 0.04), 0 12px 32px -24px rgba(17, 18, 19, 0.35); } .dstep-n { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--mute-soft); display: block; margin-bottom: 6px; } .dstep.is-on .dstep-n { color: var(--indigo); } /* Nikhil, 2026-08-14: the per-step blurb is gone. One big line per step reads in a glance from across the room, which is what a rail beside a moving demo is for — nobody was reading two sentences while the panel animated. */ .dstep-t { display: block; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.028em; line-height: 1.18; text-wrap: balance; color: var(--mute); transition: color 260ms var(--ease); } .dstep.is-on .dstep-t { color: var(--ink); } .dstep-bar { display: block; height: 2px; margin-top: 14px; border-radius: 2px; background: rgba(17, 18, 19, 0.09); overflow: hidden; opacity: 0; transition: opacity 200ms var(--ease); } .dstep.is-on .dstep-bar { opacity: 1; } .dstep-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--indigo), var(--violet)); border-radius: 2px; } .dstep.is-on .dstep-bar i { animation: dfill var(--dur, 7000ms) linear forwards; } @keyframes dfill { from { width: 0; } to { width: 100%; } } @media (max-width: 1000px) { .demo-rail { flex-direction: row; overflow-x: auto; gap: 8px; padding: 6px; scrollbar-width: none; } .demo-rail::-webkit-scrollbar { display: none; } .dstep { min-width: 246px; flex: 0 0 auto; } .dstep-t { font-size: 1.08rem; } } /* sized by the tallest panel — step 2's call tiles + checklist + sign-off */ .demo-stage { position: relative; min-height: 578px; } /* narrow screens wrap the audit labels onto two lines, so the tallest panel needs more room than it does on desktop — not less */ @media (max-width: 640px) { .demo-stage { min-height: 640px; } } @media (max-width: 420px) { .demo-stage { min-height: 670px; } } .dpanel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.992); will-change: opacity, transform; transition: opacity 480ms var(--ease-out), transform 560ms var(--ease-out), visibility 0s linear 480ms; } .dpanel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 480ms var(--ease-out), transform 560ms var(--ease-out), visibility 0s; } /* ---------- mock window chrome (shared by all four panels) ---------- */ .win { height: 100%; background: var(--card); border-radius: 12px; box-shadow: inset 0 0 0 1px #EFEDE8; display: flex; flex-direction: column; overflow: hidden; } .win-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid #F0F0F4; background: #FCFCFD; flex: 0 0 auto; } .wd { width: 9px; height: 9px; border-radius: 50%; background: #E2DFD8; display: block; flex: 0 0 auto; } /* per-panel bar: the traffic lights moved up to .shell-bar, so this is now just a view header — no left indent to reserve for them */ .win-title { font-family: var(--font-display); font-size: 0.82rem; color: var(--mute); letter-spacing: -0.005em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .win-chip { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo); } .win-body { flex: 1 1 auto; padding: 28px; overflow: hidden; min-height: 0; } @media (max-width: 640px) { .win-body { padding: 16px; } } /* ============ PANEL 1 · build ============ Nikhil, 2026-08-14. Was an import form; it is now a builder canvas, because "upload your code" made the product sound like it only wanted people who already had one. The import survives as the quiet strip at the bottom. The canvas is a design-tool surface: a warm grey ground, one selected artboard, a floating prompt, two cursors and a collaborator stack. All the saturated colour is INSIDE the phone, which is a contained surface — same rule the rest of the page follows. */ .bl-body { padding: 0; position: relative; } .bl { position: relative; height: 100%; min-height: 470px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #F7F5F1 0%, #EDEAE3 60%, #E7E3DA 100%); /* the faint grid a canvas has, so the artboard reads as sitting ON something */ background-image: linear-gradient(rgba(17,18,19,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,19,0.028) 1px, transparent 1px); background-size: 28px 28px, 28px 28px; background-color: #EFECE6; } /* ---- collaborators ---- */ .bl-faces { position: absolute; top: 16px; right: 18px; z-index: 5; display: flex; align-items: center; } .bl-face { width: 30px; height: 30px; border-radius: 50%; margin-left: -8px; display: grid; place-items: center; font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; color: #FFF; border: 2px solid #FFF; box-shadow: 0 1px 3px rgba(17,18,19,0.16); opacity: 0; transform: scale(0.7); transition: opacity 300ms var(--ease-out), transform 380ms var(--ease-out); } .bl-faces.is-in .bl-face { opacity: 1; transform: none; } .bl-faces.is-in .bl-face--2 { transition-delay: 90ms; } .bl-faces.is-in .bl-face--ai { transition-delay: 180ms; } .bl-face--1 { background: #C4643F; } .bl-face--2 { background: #4A4640; } .bl-face--ai { background: linear-gradient(135deg, var(--indigo), var(--violet)); } .bl-face--ai svg { width: 15px; height: 15px; } /* ---- the artboard ---- */ .bl-frame { position: absolute; left: 40px; top: 40px; bottom: 62px; width: 236px; z-index: 2; border-radius: 26px; box-shadow: 0 0 0 2px var(--indigo); transition: box-shadow 300ms var(--ease); } .bl-frame-l { position: absolute; top: -22px; left: 2px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; color: var(--indigo); letter-spacing: -0.005em; } /* selection handles — four, the way every design tool draws them */ .bl-h { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #FFF; box-shadow: 0 0 0 1.5px var(--indigo); z-index: 3; } .bl-h--tl { left: -4px; top: -4px; } .bl-h--tr { right: -4px; top: -4px; } .bl-h--bl { left: -4px; bottom: -4px; } .bl-h--br { right: -4px; bottom: -4px; } .bl-phone { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: linear-gradient(168deg, #3D43D6 0%, #2E32AE 52%, #232778 100%); box-shadow: 0 20px 50px -26px rgba(24, 20, 56, 0.7); } .bl-scr { padding: 18px 15px 52px; display: grid; gap: 11px; align-content: start; height: 100%; } .bl-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; padding: 9px 0 13px; background: rgba(20, 24, 96, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.1); } .bl-tabs span { display: grid; justify-items: center; gap: 3px; font-family: var(--font-display); font-size: 0.57rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); } .bl-tabs span.on { color: #FFF; } .bl-tabs i { width: 13px; height: 13px; border-radius: 4px; background: rgba(255,255,255,0.35); display: block; } .bl-tabs span.on i { background: #C9F24B; } .bl-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; letter-spacing: -0.02em; color: #FFF; } .bl-avatar { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.22); display: block; } .bl-hero { background: #DDE4FF; border-radius: 16px; padding: 13px 14px; display: grid; gap: 2px; } .bl-k { font-family: var(--font-display); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #5560C8; } .bl-v { font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: -0.045em; color: #1F2478; line-height: 1.05; } .bl-v em { font-style: normal; font-size: 0.9rem; font-weight: 600; margin-left: 5px; letter-spacing: -0.01em; } .bl-pills { display: flex; gap: 7px; margin-top: 9px; } .bl-pills span { flex: 1 1 0; text-align: center; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; color: #2E34B4; padding: 7px 0; border-radius: 999px; border: 1px solid #B9C4F5; } .bl-sec { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; color: #FFF; letter-spacing: -0.01em; padding: 0 2px; } .bl-sec b { font-weight: 500; font-size: 0.68rem; color: rgba(255,255,255,0.6); } .bl-card { background: rgba(255,255,255,0.1); border-radius: 14px; padding: 11px 12px; } .bl-bars { display: flex; align-items: flex-end; gap: 5px; height: 62px; } .bl-bars i { flex: 1 1 0; border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,0.3); transform-origin: bottom; } .bl-bars i.on { background: #C9F24B; } /* the card the prompt asks for — hidden until the build "runs" */ .bl-new { background: #FFFFFF; display: grid; gap: 3px; opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); } .bl-new.is-in { opacity: 1; transform: none; } .bl-new-k { font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #7C81A8; } .bl-new-v { font-family: var(--font-display); font-size: 0.94rem; font-weight: 600; letter-spacing: -0.02em; color: #1F2478; } .bl-new-track { display: block; height: 5px; border-radius: 999px; background: #E4E7F5; margin-top: 5px; overflow: hidden; } .bl-new-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--indigo), var(--violet)); } .bl-new.is-in .bl-new-track i { animation: blfill 760ms 220ms var(--ease-out) forwards; } @keyframes blfill { to { width: 71%; } } /* ---- the prompt, floating on the canvas ---- */ .bl-prompt { position: absolute; left: 312px; top: 96px; z-index: 4; width: min(266px, calc(100% - 336px)); background: #FFFFFF; border-radius: 18px; padding: 15px 16px 12px; box-shadow: 0 1px 2px rgba(17,18,19,0.06), 0 22px 50px -28px rgba(17,18,19,0.6); opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out), box-shadow 200ms var(--ease); } .bl-prompt.is-in { opacity: 1; transform: none; } .bl-prompt.is-hot { box-shadow: 0 0 0 2px var(--indigo-line), 0 22px 50px -28px rgba(17,18,19,0.6); } .bl-prompt-t { margin: 0; min-height: 2.9em; font-family: var(--font-display); font-size: 0.95rem; line-height: 1.45; letter-spacing: -0.012em; color: var(--ink); } .bl-caret { display: none; width: 1.5px; height: 15px; background: var(--indigo); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; } .bl-caret.is-on { display: inline-block; } .bl-prompt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .bl-plus, .bl-go { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; } .bl-plus { color: var(--mute); background: var(--panel); } .bl-plus svg { width: 13px; height: 13px; } .bl-go { background: var(--ink); color: #FFF; opacity: 0.25; transform: scale(0.9); transition: opacity 220ms var(--ease), transform 260ms var(--ease-out); } .bl-go svg { width: 13px; height: 13px; } .bl-go.is-live { opacity: 1; transform: none; } .bl-go.is-hit { animation: blpop 380ms var(--ease-out); } @keyframes blpop { 40% { transform: scale(0.84); } 100% { transform: scale(1); } } /* ---- cursors ---- Driven by --x/--y from demo.js with a transition on transform, so a glide is one property write rather than a rAF loop. */ .bl-cur { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: flex-start; gap: 3px; transform: translate3d(var(--x, 0px), var(--y, 0px), 0); transition: transform var(--t, 900ms) cubic-bezier(0.33, 0.02, 0.2, 1); opacity: 0; pointer-events: none; } .bl-cur.is-in { opacity: 1; } .bl-cur svg { width: 19px; height: 19px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(17,18,19,0.3)); } .bl-cur--a svg { fill: #FFFFFF; stroke: #16181C; stroke-width: 1.1px; } .bl-cur--b svg { fill: #C4643F; stroke: #FFFFFF; stroke-width: 1.1px; } .bl-cur b { font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; color: #FFF; padding: 2px 7px; border-radius: 999px; margin-top: 11px; white-space: nowrap; } .bl-cur--a b { background: #16181C; } .bl-cur--b b { background: #C4643F; } /* ---- the quiet import ---- */ .bl-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 11px 18px; border-top: 1px solid rgba(17,18,19,0.07); background: rgba(250, 249, 246, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .bl-import { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; background: #FFF; border: 1px solid var(--rule); white-space: nowrap; } .bl-import svg { width: 13px; height: 13px; color: var(--mute); } .bl-from { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } @media (max-width: 900px) { .bl-prompt { left: auto; right: 18px; top: 30px; width: min(240px, 46%); } } @media (max-width: 640px) { .bl { min-height: 430px; } /* HEIGHT, not top+bottom. Stretched to the canvas the phone ends up far taller than its content and the bottom third is empty blue. */ /* Centred, not pinned to the top. The stage's min-height is sized for step 2 (the tallest panel), so pinning leaves a slab of empty canvas underneath. */ .bl-frame { left: 14px; top: 50%; bottom: auto; transform: translateY(calc(-50% - 16px)); height: min(430px, calc(100% - 108px)); width: min(174px, 45%); } .bl-scr { padding: 15px 12px 46px; gap: 9px; } .bl-v { font-size: 1.6rem; } /* pushed below the collaborator stack — at top:24 the two overlapped */ .bl-prompt { right: 12px; top: 86px; width: min(200px, 46%); padding: 12px 13px 10px; } .bl-prompt-t { font-size: 0.85rem; min-height: 0; } /* the wordmark row is the first thing to go: the import itself is the point */ .bl-from { display: none; } .bl-foot { justify-content: flex-start; padding: 9px 14px; } .bl-faces { top: 12px; right: 14px; } .bl-face { width: 24px; height: 24px; font-size: 0.64rem; border-width: 1.5px; } .bl-tabs { padding: 7px 0 10px; } .bl-tabs span { font-size: 0.53rem; } .bl-tabs i { width: 11px; height: 11px; } } @media (max-width: 430px) { .bl-frame { width: min(150px, 45%); height: min(400px, calc(100% - 92px)); } .bl-pills span { font-size: 0.62rem; padding: 6px 0; } .bl-prompt { width: 46%; } .bl-hero { padding: 11px 11px; } } /* ============ PANEL 2 · audit ============ */ .au-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--rule-cool); } .au-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .au-head-l { font-family: var(--font-display); font-size: 0.88rem; color: var(--mute); } .au-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--indigo); } .au-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); animation: pulse 1.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* ---- the call: two participants, then the call controls ---- .face carries initials as a fallback plus a data-photo path; demo.js swaps in a real only when one loads, and it covers the whole tile. Photos must be ours or licensed — see faces/README.md. */ /* the call fills the panel; the audit floats over its lower-left corner, which is the Kajabi composition in our palette — warm paper drifting to soft indigo rather than their sage, and every overlay translucent over it */ .call { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; background: radial-gradient(80% 70% at 82% 6%, rgba(228, 224, 244, 0.85), transparent 62%), linear-gradient(158deg, #EFECE5 0%, #E9E5DE 48%, #E3E0EE 100%); } .call-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1 1 auto; min-height: 0; } .call-tile { position: relative; border-radius: 11px; overflow: hidden; min-height: 0; background: linear-gradient(155deg, #E4E1DA, #D8D4CC); display: flex; align-items: center; justify-content: center; } .face { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, #E7E4F8, #DCD7F2); color: #5B54A8; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; overflow: hidden; } .face::before { content: attr(data-initials); } .face img { width: 100%; height: 100%; object-fit: cover; display: block; } .face.has-photo::before { content: none; } /* In a tile the face fills the frame, so a real headshot reads as video. With no photo it renders the monogram in a circle — the camera-off state every video app shows — so an empty slot looks deliberate rather than broken. */ .face--tile { width: 100%; height: 100%; border-radius: 0; background: transparent; color: #6E6A62; font-size: 1.15rem; letter-spacing: 0.04em; font-weight: 600; } .face--tile::before { display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(17, 18, 19, 0.05); } .face--tile.has-photo::before { display: none; } @media (max-width: 860px) { .face--tile::before { width: 56px; height: 56px; } } /* dark pills so they stay legible once a real photo fills the tile */ .call-tag, .call-live { position: absolute; font-family: var(--font-display); color: #FFFFFF; background: rgba(17, 18, 19, 0.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 999px; white-space: nowrap; } /* tags sit top-left: the floating audit card owns the bottom-left corner */ .call-tag { left: 8px; top: 8px; font-size: 0.7rem; font-weight: 500; padding: 4px 9px; } .call-live { right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; } .call-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--up); animation: pulse 1.4s var(--ease) infinite; } /* translucent over the gradient, like the reference's controls */ /* right-aligned so the controls clear the floating card on the left */ .call-bar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 13px; flex: 0 0 auto; } .call-btn { width: 32px; height: 32px; border-radius: 50%; color: var(--ink-soft); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; } .call-btn svg { width: 15px; height: 15px; } .call-btn--end { background: rgba(196, 68, 79, 0.9); color: #FFFFFF; } @media (max-width: 640px) { .call { padding: 10px; } /* the card goes full-width at the bottom here, so the (decorative) call controls would sit underneath it — drop them rather than stack */ .call-bar { display: none; } .face--tile { font-size: 0.9rem; } .call-tag { font-size: 0.62rem; padding: 3px 7px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; } .call-live { font-size: 0.54rem; padding: 3px 6px; } } /* ---- the checklist, one item at a time ---- All seven rows stay in the DOM and are stacked; only .is-cur is visible, so the panel height never jumps as items swap. */ .au-stage { position: relative; height: 78px; margin-top: 2px; } .au-stage .au-row { position: absolute; left: 0; right: 0; top: 0; margin: 0; border-bottom: 0; border: 1px solid var(--rule-cool); border-radius: 12px; background: #FFFFFF; padding: 15px 18px; /* label and its detail stack beside the icon, badge holds the right edge */ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic label badge" "ic detail badge"; column-gap: 13px; row-gap: 3px; align-items: center; opacity: 0; transform: translateY(10px) scale(0.994); transition: opacity 460ms var(--ease-out), transform 620ms var(--ease-out); pointer-events: none; } .au-stage .au-row.is-cur { opacity: 1; transform: none; } .au-stage .au-ic { grid-area: ic; } .au-stage .au-label { grid-area: label; font-size: 0.96rem; font-weight: 600; letter-spacing: -0.012em; } /* the base .au-detail is right-aligned and pushed over for the old list layout; on the stage it belongs directly under its label */ .au-stage .au-detail { grid-area: detail; margin-left: 0; text-align: left; } .au-stage .au-badge { grid-area: badge; } @media (max-width: 640px) { .au-stage { height: 92px; } .au-stage .au-row { padding: 13px 14px; } } #panel-2 .win-body { display: flex; flex-direction: column; } /* the floating audit card: small, bottom-left, translucent over the call */ .au-mid { position: absolute; left: 16px; bottom: 16px; width: 278px; max-width: calc(100% - 32px); padding: 12px 14px 13px; border-radius: 13px; background: rgba(255, 255, 255, 0.78); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); box-shadow: 0 1px 2px rgba(17, 18, 19, 0.06), 0 18px 40px -22px rgba(17, 18, 19, 0.45); } #panel-2 .au-head { margin: 0 0 9px; } #panel-2 .au-num { font-size: 1.26rem; } #panel-2 .au-head-l { font-size: 0.78rem; } /* the card is narrow, so the check drops its badge and stacks tighter */ #panel-2 .au-stage { height: 48px; margin: 0; } #panel-2 .au-stage .au-row { padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.72); column-gap: 9px; row-gap: 1px; } #panel-2 .au-stage .au-ic { width: 17px; height: 17px; } #panel-2 .au-stage .au-ic svg { width: 9px; height: 9px; } /* both lines stay single-line — the card is narrow and a wrap would push it past its fixed height */ #panel-2 .au-stage .au-label { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #panel-2 .au-stage .au-detail { font-size: 0.64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #panel-2 .au-stage .au-badge { display: none; } /* one slot, two states: dots while the audit runs, the sign-off line once it's done. No row is reserved for text that hasn't appeared yet. */ #panel-2 .au-tail { position: relative; height: 17px; margin-top: 10px; } #panel-2 .au-dots { position: absolute; inset: 0; margin: 0; align-items: center; transition: opacity 420ms var(--ease-out); } #panel-2 .au-foot { position: absolute; inset: 0; margin: 0; padding: 0; background: none; border: 0; display: flex; align-items: center; opacity: 0; transform: translateY(4px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); } #panel-2 .au-foot.is-in { opacity: 1; transform: none; } #panel-2 .au-foot.is-in ~ .au-dots { opacity: 0; } #panel-2 .au-foot p { font-size: 0.72rem; line-height: 1.3; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel-2 .au-foot strong { color: var(--ink); } @media (max-width: 640px) { .au-mid { left: 10px; bottom: 10px; width: auto; right: 10px; max-width: none; padding: 11px 12px 12px; } #panel-2 .au-num { font-size: 1.15rem; } } /* progress through the seven checks */ .au-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; } .au-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(17, 18, 19, 0.14); transition: background 460ms var(--ease-out), transform 460ms var(--ease-out); } .au-dots i.is-done { background: var(--up); } .au-dots i.is-cur { background: var(--indigo); transform: scale(1.5); } .au-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #F5F5F7; } .au-row:last-child { border-bottom: 0; } .au-ic { width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: #F1F1F4; color: transparent; transition: background 300ms var(--ease-out), color 300ms var(--ease-out); } .au-ic svg { width: 11px; height: 11px; stroke-width: 2.6; } .au-row[data-state="scan"] .au-ic { background: transparent; border: 1.6px solid var(--indigo-line); border-top-color: var(--indigo); animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .au-row[data-state="fixed"] .au-ic { background: var(--up-soft); color: var(--up); } .au-row[data-state="pass"] .au-ic { background: var(--up-soft); color: var(--up); } .au-label { font-family: var(--font-display); font-size: 0.91rem; color: var(--ink); } .au-row[data-state="idle"] .au-label { color: #B6B6BE; } .au-detail { margin-left: auto; font-family: var(--font-mono); font-size: 0.76rem; color: var(--mute); text-align: right; opacity: 0; transition: opacity 380ms var(--ease-out); } .au-row[data-state="fixed"] .au-detail, .au-row[data-state="pass"] .au-detail { opacity: 1; } .au-badge { font-family: var(--font-mono); font-size: 0.68rem; padding: 3px 8px; border-radius: 999px; background: var(--up-soft); color: var(--up); flex: 0 0 auto; opacity: 0; transition: opacity 380ms var(--ease-out); } .au-row[data-state="fixed"] .au-badge { opacity: 1; } @media (max-width: 640px) { .au-detail { display: none; } .au-label { font-size: 0.86rem; } } .au-foot { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--indigo-soft); display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(6px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); } .au-foot.is-in { opacity: 1; transform: none; } .au-foot p { margin: 0; font-family: var(--font-display); font-size: 0.9rem; color: #3B3A6B; } .au-foot .btn { margin-left: auto; flex: 0 0 auto; } /* ============ PANEL 3 · ops dashboard ============ */ .ops-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--rule-cool); margin: -6px 0 20px; } .ops-tab { font-family: var(--font-display); font-size: 0.88rem; color: var(--mute); padding: 0 0 11px; border-bottom: 2px solid transparent; } .ops-tab.is-on { color: var(--ink); border-bottom-color: var(--ink); } @media (max-width: 640px) { .ops-tab:nth-child(n+4) { display: none; } } .ops-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 640px) { .ops-tiles { grid-template-columns: repeat(2, 1fr); } } .ops-tile { border: 1px solid var(--rule-cool); border-radius: 12px; padding: 13px 15px; } .ops-tile .k { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute-soft); display: block; margin-bottom: 8px; } .ops-tile .v { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.025em; display: block; line-height: 1; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .ops-tile .v { font-size: 1.15rem; } } .ops-tile .d { font-family: var(--font-mono); font-size: 0.7rem; color: var(--up); display: block; margin-top: 7px; } .ops-tile .d.flat { color: var(--mute-soft); } /* the dashboard fills the window: the chart card absorbs whatever height is left over so panel 3 never bottoms out in dead white space */ #panel-3 .win-body { display: flex; flex-direction: column; } .ops-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 10px; flex: 1 1 auto; min-height: 0; } @media (max-width: 760px) { .ops-grid { grid-template-columns: 1fr; flex: 0 0 auto; } } .ops-card { border: 1px solid var(--rule-cool); border-radius: 13px; padding: 15px; display: flex; flex-direction: column; min-height: 0; } .ops-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; } .ops-card-h .sub { margin-left: auto; font-weight: 400; font-size: 0.76rem; color: var(--mute-soft); font-family: var(--font-mono); } .ops-chart { display: flex; align-items: flex-end; gap: 5px; flex: 1 1 auto; min-height: 116px; } .ops-chart i { flex: 1; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, #7B65FF 0%, #4452CE 100%); height: 0; transition: height 780ms var(--ease-out); opacity: 0.9; } .ops-chart i:last-child { background: linear-gradient(180deg, #8A66D6 0%, #6A53CE 100%); } .ops-xaxis { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--mute-soft); } .ops-feed { list-style: none; padding: 0; margin: 0; } .ops-feed li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 13px; font-family: var(--font-display); font-size: 0.83rem; line-height: 1.35; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); } .ops-feed li.is-in { opacity: 1; transform: none; } .ops-feed li:last-child { margin-bottom: 0; } .ops-feed .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); margin-top: 5px; flex: 0 0 auto; } .ops-feed .dot.info { background: var(--indigo); } .ops-feed .dot.warn { background: var(--warn); } .ops-feed .t { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--mute-soft); margin-top: 3px; } /* ============ PANEL 4 · safe changes (Cursor-style review surface) ============ NOTE FOR THE SWAP: this panel is the placeholder for Sameer's prototype. When that ships, replace the .sc-* markup inside [data-panel="4"] with the real thing — the window chrome and the step copy stay as they are. ============================================================================ */ /* panel 4 runs edge-to-edge inside the window, so it drops the body padding */ #panel-4 .win-body { padding: 0; } .sc { display: grid; grid-template-columns: 218px 1fr 260px; height: 100%; } @media (max-width: 900px) { .sc { grid-template-columns: 1fr 260px; } .sc-list { display: none; } } @media (max-width: 640px) { .sc { grid-template-columns: 1fr; } .sc-preview { display: none; } } .sc-col { padding: 16px 15px; overflow: hidden; } .sc-list { border-right: 1px solid var(--rule-cool); background: #FCFCFD; } .sc-thread { border-right: 1px solid var(--rule-cool); } .sc-h { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute-soft); margin: 0 0 12px; display: flex; align-items: center; gap: 7px; } .sc-h .n { margin-left: auto; } .sc-item { display: flex; gap: 9px; padding: 9px 8px; border-radius: 9px; margin-bottom: 2px; opacity: 0; transform: translateY(5px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), background 160ms var(--ease); } .sc-item.is-in { opacity: 1; transform: none; } .sc-item.is-sel { background: #F1F0FA; } .sc-check { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center; background: var(--up-soft); color: var(--up); } .sc-check svg { width: 9px; height: 9px; stroke-width: 3; } .sc-item .b { min-width: 0; flex: 1 1 auto; } .sc-item .t { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 0.83rem; font-weight: 500; } /* the title truncates; the timestamp never does */ .sc-item .t .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-item .t .ago { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-family: var(--font-mono); font-size: 0.64rem; color: var(--mute-soft); font-weight: 400; } .sc-item .s { display: block; font-family: var(--font-display); font-size: 0.74rem; color: var(--mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-item .s .add { color: var(--up); font-family: var(--font-mono); } .sc-item .s .del { color: var(--down); font-family: var(--font-mono); } .sc-prompt { border: 1px solid var(--rule-cool); border-radius: 11px; padding: 11px 13px; font-family: var(--font-display); font-size: 0.86rem; line-height: 1.4; color: var(--ink); margin-bottom: 14px; } .sc-step { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-family: var(--font-display); font-size: 0.82rem; color: var(--mute); opacity: 0; transform: translateY(5px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); } .sc-step.is-in { opacity: 1; transform: none; } .sc-step .g { font-family: var(--font-mono); font-size: 0.72rem; color: var(--mute-soft); } .sc-file { display: flex; align-items: center; gap: 9px; border: 1px solid var(--rule-cool); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; font-family: var(--font-mono); font-size: 0.77rem; color: var(--ink); opacity: 0; transform: translateY(5px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); } .sc-file.is-in { opacity: 1; transform: none; } .sc-file .add { color: var(--up); margin-left: auto; } .sc-file .del { color: var(--down); } .sc-gate { margin-top: 14px; border-radius: 11px; padding: 12px 13px; background: var(--indigo-soft); opacity: 0; transform: translateY(5px); transition: opacity 440ms var(--ease-out), transform 440ms var(--ease-out); } .sc-gate.is-in { opacity: 1; transform: none; } .sc-gate .g-h { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: #3B3A6B; } .sc-gate .g-h .gt { min-width: 0; } .sc-gate .g-h .who { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-weight: 400; font-family: var(--font-mono); font-size: 0.68rem; color: #6A68A0; } .sc-gate p { margin: 7px 0 0; font-family: var(--font-display); font-size: 0.78rem; line-height: 1.4; color: #55538C; } .sc-preview { background: #FCFCFD; } .sc-phone { margin: 6px auto 0; width: 196px; border-radius: 22px; padding: 8px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17,18,19,0.08), 0 18px 40px -26px rgba(17,18,19,0.5); } .sc-phone-screen { border-radius: 16px; background: #F7F6FE; padding: 14px 12px; height: 268px; overflow: hidden; } .sc-pv-t { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; } .sc-pv-s { font-family: var(--font-display); font-size: 0.64rem; color: var(--mute); margin-top: 2px; display: block; } .sc-pv-card { background: #FFFFFF; border-radius: 10px; padding: 9px 10px; margin-top: 10px; box-shadow: 0 1px 2px rgba(17,18,19,0.05); } .sc-pv-card.is-new { box-shadow: 0 0 0 1.5px var(--indigo-line), 0 1px 2px rgba(17,18,19,0.05); } .sc-pv-row { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.68rem; white-space: nowrap; } .sc-pv-row .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sc-pv-row .amt { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.64rem; color: var(--mute); } .sc-pv-bar { height: 4px; border-radius: 3px; background: #EAE7FA; margin-top: 8px; overflow: hidden; } .sc-pv-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--indigo), var(--violet)); } .sc-pv-note { text-align: center; margin-top: 12px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute-soft); } /* ---------- value props ---------- */ .props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 860px) { .props { grid-template-columns: 1fr; } } .prop { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 26px 24px 28px; background: var(--card); } .prop-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); margin-bottom: 16px; } .prop-ic svg { width: 17px; height: 17px; } .prop h3 { margin-bottom: 9px; } .prop p { font-size: 1.02rem; color: var(--mute); margin: 0; } /* ===================================================================== FEATURE DEEP DIVES — Cursor's alternating blocks Copy on the inner side, product window bleeding off the outer edge. ===================================================================== */ .feats { overflow-x: clip; padding-top: 40px; } /* The art column is pinned to the window's own width (720) plus the frame's inset, and the copy column takes whatever is left. Sizing it in `fr` meant the dashboard's intrinsic width overflowed its column at some viewports and the chart got clipped — this can't. */ .feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(760px, 0.98fr); gap: 56px; align-items: center; padding: 52px 0; } .feat--flip { grid-template-columns: minmax(760px, 0.98fr) minmax(0, 1fr); } .feat--flip .feat-copy { order: 2; } .feat--flip .feat-art { order: 1; } /* heading and sub are the same size — dark then muted, reading as one block, which is what makes Cursor's feature copy feel like a caption not a header */ .feat-copy h2 { font-family: var(--font-display); font-size: clamp(1.32rem, 1.9vw, 1.66rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.022em; margin: 0; } .feat-copy p { font-family: var(--font-display); font-size: clamp(1.32rem, 1.9vw, 1.66rem); font-weight: 400; line-height: 1.28; letter-spacing: -0.022em; color: var(--mute); margin: 4px 0 0; } .feat-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; color: var(--indigo); text-decoration: none; } .feat-link svg { width: 16px; height: 16px; transition: transform 180ms var(--ease); } .feat-link:hover svg { transform: translateX(3px); } /* the backing panel carries the same painted dusk as the hero showcase, so the colour on the page comes from one source rather than two — muted here so it supports the product shot instead of competing with the hero */ .feat-frame { position: relative; isolation: isolate; border-radius: 18px; padding: 44px 0 0 44px; margin-right: calc(50% - 50vw); background: radial-gradient(78% 62% at 12% 6%, rgba(255, 208, 150, 0.62) 0%, rgba(255, 208, 150, 0) 55%), radial-gradient(66% 56% at 88% 4%, rgba(230, 150, 178, 0.48) 0%, rgba(230, 150, 178, 0) 58%), radial-gradient(120% 104% at 72% 108%, rgba(38, 32, 86, 0.55) 0%, rgba(38, 32, 86, 0) 60%), radial-gradient(104% 88% at -2% 102%, rgba(84, 62, 150, 0.46) 0%, rgba(84, 62, 150, 0) 58%), linear-gradient(158deg, #EFEAE1 0%, #E5DFE8 46%, #DED6E4 72%, #D6CFE0 100%); } /* same inline-SVG grain as the hero, so both surfaces read as one material */ .feat-frame::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.16; mix-blend-mode: overlay; } .feat--flip .feat-frame { padding: 44px 44px 0 0; margin-right: 0; margin-left: calc(50% - 50vw); } /* The backing panel bleeds to the viewport edge, but the WINDOW stays whole and capped — a cut-off window hides the chart, which is the thing the section is there to show. Block 1 pins it left, the flipped block pins it right. */ .feat-frame .win { height: auto; width: min(100%, 720px); border-radius: 12px 12px 0 0; /* the warm paper ground, not white — the white here is the cards, pills and buttons inside, which is what makes them read as objects on a surface */ background: var(--bg); box-shadow: 0 2px 6px rgba(24, 20, 56, 0.10), 0 30px 60px -34px rgba(24, 20, 56, 0.5); } .feat-frame .win-bar { background: rgba(255, 255, 255, 0.5); border-bottom-color: var(--rule); } .feat-frame .dd-hero { background: rgba(255, 255, 255, 0.62); border-color: var(--rule); } .feat-frame .dd-fbar { background: rgba(17, 18, 19, 0.07); } .feat-frame .dd-crow, .feat-frame .dd-inc li { border-bottom-color: var(--rule); } .feat-frame .dd-tabs { border-bottom-color: var(--rule); } .feat--flip .feat-frame .win { margin-left: auto; } /* ---- the ops dashboard, cut to match the real one ---- Lifted from source_code/shared/ops/dashboard: rule-separated metric columns rather than boxed tiles, a headline figure beside its own line chart, value over mono uppercase label, and the money-green accent (#2E7D5B) instead of our indigo. Static — no JS ever runs on this window. */ .dd .win-body { padding: 22px; } /* tabs — the four views are real, clickable, and swap in place */ .dd-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--rule-cool); margin-bottom: 18px; } .dd-tab { background: none; border: 0; padding: 0 0 10px; cursor: pointer; font-family: var(--font-display); font-size: 0.86rem; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 140ms var(--ease), border-color 140ms var(--ease); } .dd-tab:hover { color: var(--ink); } .dd-tab.is-on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); } .dd-tab:focus-visible { outline: 2px solid var(--money); outline-offset: 3px; border-radius: 3px; } @media (max-width: 520px) { .dd-tabs { gap: 14px; } .dd-tab { font-size: 0.78rem; } } /* All four views occupy the same grid cell, so the container is always exactly as tall as the tallest one — switching can never resize the window. A fixed min-height couldn't do this: the views reflow to different heights at different widths, so any single number jumped somewhere. */ .dd-views { display: grid; } .dd-view { grid-area: 1 / 1; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 300ms var(--ease-out), transform 340ms var(--ease-out), visibility 0s linear 300ms; } .dd-view.is-on { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition: opacity 300ms var(--ease-out), transform 340ms var(--ease-out), visibility 0s; } @media (prefers-reduced-motion: reduce) { .dd-view { transition: none; } } .dd-vh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-family: var(--font-display); font-size: 0.84rem; font-weight: 600; letter-spacing: -0.01em; } .dd-vh span { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; color: var(--mute-soft); font-weight: 400; } .dd-pulse { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 32px; align-items: center; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); } .dd-fig { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .dd-figlabel { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute); margin: 11px 0 0; } .dd-figsub { font-family: var(--font-display); font-size: 0.84rem; color: var(--mute); margin: 9px 0 0; } .dd-figsub b { color: var(--money); font-weight: 600; } .dd-sep { color: #C7C2B6; margin: 0 2px; } .dd-chart svg { width: 100%; height: auto; display: block; } .dd-grid line { stroke: var(--rule); stroke-width: 1; } .dd-line { fill: none; stroke: var(--money); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .dd-dot { fill: var(--money); stroke: #FFFFFF; stroke-width: 2.5; } .dd-xaxis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 0.62rem; color: var(--mute-soft); } .dd-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 0; border-bottom: 1px solid var(--rule); } .dd-mstat { padding: 0 20px; border-left: 1px solid var(--rule); } .dd-mstat:first-child { padding-left: 0; border-left: none; } .dd-mstat .v { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .dd-mstat .l { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin: 8px 0 5px; } .dd-mstat .d { display: block; font-family: var(--font-display); font-size: 0.74rem; color: var(--mute-soft); } .dd-mstat .d.up { color: var(--money); } /* ---- users · CRM, columns matched to the real members table ---- */ .dd-crmhead { display: flex; align-items: baseline; gap: 7px; margin-bottom: 14px; font-family: var(--font-display); font-size: 0.82rem; color: var(--mute); } .dd-crmhead b { color: var(--ink); font-weight: 600; } .dd-crm { border-top: 1px solid var(--rule); } /* The action column is a FIXED width, never `auto`. Each row is its own grid, so an auto track sized to content collapsed to 0 in the header row and ~85px in the body ones — which knocked every column after the first out of alignment. */ .dd-crow { display: grid; /* minmax(0,…) not bare fr: an fr track keeps a min-content floor, so the row with the longest email widened its own first column and shifted that row. */ grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr) minmax(0, 0.7fr) minmax(0, 0.55fr) 104px; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--rule-cool); font-family: var(--font-display); font-size: 0.83rem; } /* money right-aligns, the action pins to the right edge */ .dd-crow > :nth-child(4) { text-align: right; } .dd-crow > :nth-child(5) { justify-self: end; } .dd-crow--h { border-bottom-color: var(--rule); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute-soft); padding: 0 2px 9px; } .dd-cust { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dd-cust b { font-weight: 600; } .dd-cust i { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; color: var(--mute-soft); overflow: hidden; text-overflow: ellipsis; } .dd-crow > span:nth-child(3), .dd-crow > span:nth-child(4) { color: var(--mute); font-variant-numeric: tabular-nums; } .dd-pill { display: inline-block; font-style: normal; border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .dd-pill.s-active { background: #E9F1EC; color: #2E7D5B; border-color: #C6E0D1; } .dd-pill.s-trial { background: #EDF0FA; color: #4459A8; border-color: #CBD4EE; } .dd-pill.s-due { background: #FBEFE7; color: #A85A28; border-color: #EFD3BC; } .dd-pill.s-ok { background: #E9F1EC; color: #2E7D5B; border-color: #C6E0D1; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; } .dd-reach { border: 1px solid var(--rule); background: #FFFFFF; border-radius: 999px; padding: 5px 13px; cursor: pointer; white-space: nowrap; font-family: var(--font-display); font-size: 0.76rem; font-weight: 500; color: var(--ink); transition: border-color 140ms var(--ease), background 140ms var(--ease); } .dd-reach:hover { border-color: var(--money); color: var(--money); background: var(--money-wash); } /* ---- health ---- */ .dd-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; border: 1px solid var(--rule-cool); border-radius: 12px; padding: 15px 18px; background: #FCFCFD; } .dd-light { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; background: var(--money); box-shadow: 0 0 0 5px var(--money-wash); } .dd-herob { display: flex; flex-direction: column; gap: 4px; } .dd-herob b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; } .dd-herob i { font-style: normal; font-family: var(--font-mono); font-size: 0.68rem; color: var(--mute); } .dd-inc { list-style: none; padding: 0; margin: 16px 0 0; } .dd-inc li { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-bottom: 1px solid var(--rule-cool); font-family: var(--font-display); font-size: 0.82rem; } .dd-inc li:last-child { border-bottom: 0; } .dd-inc li i { font-style: normal; margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--mute-soft); white-space: nowrap; } /* ---- analytics · funnel + usage ---- */ .dd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .dd-fun { display: flex; flex-direction: column; gap: 17px; } .dd-fnote { margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--rule-cool); font-family: var(--font-display); font-size: 0.78rem; color: var(--mute); } .dd-fnote b { color: var(--ink); font-weight: 600; } .dd-frow { display: grid; grid-template-columns: 92px 1fr auto; gap: 11px; align-items: center; } .dd-fl { font-family: var(--font-display); font-size: 0.79rem; color: var(--mute); } .dd-fbar { height: 9px; border-radius: 5px; background: #F0EEE9; overflow: hidden; } .dd-fbar i { display: block; height: 100%; border-radius: 5px; background: var(--money); opacity: 0.85; } .dd-fv { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); font-variant-numeric: tabular-nums; } @media (max-width: 620px) { .dd-two { grid-template-columns: 1fr; gap: 22px; } .dd-frow { grid-template-columns: 76px 1fr auto; } /* phone: customer + plan + action only, and a FIXED action track for the same reason as desktop — an auto track sizes differently in the header row */ .dd-crow { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) 96px; gap: 10px; } .dd-crow > :nth-child(3), .dd-crow > :nth-child(4) { display: none; } .dd-reach { padding: 5px 10px; font-size: 0.72rem; } } .dd-table { margin-top: 10px; border: 1px solid var(--rule-cool); border-radius: 12px; overflow: hidden; } .dd-row { display: grid; grid-template-columns: 2fr 1fr 1fr 0.7fr; gap: 12px; align-items: center; padding: 10px 14px; font-family: var(--font-display); font-size: 0.82rem; color: var(--ink); border-bottom: 1px solid var(--rule-cool); } .dd-row:last-child { border-bottom: 0; } .dd-row--h { background: #FBFBFC; color: var(--mute-soft); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; } .dd-row span:nth-child(2), .dd-row span:nth-child(3) { color: var(--mute); } .dd-tag { justify-self: start; font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 8px; border-radius: 5px; background: var(--money-wash); color: var(--money); } .dd-row--h .dd-tag { background: none; color: inherit; padding: 0; } /* the reserved frame for Sameer's change-review product */ .dd-empty { min-height: 320px; } /* Stacks at 1300. Below that a 720px window plus readable copy doesn't fit two columns — the window overflowed its column and clipped the chart. Stacked, the window gets the full width, which is better anyway. */ @media (max-width: 1300px) { .feat, .feat--flip { grid-template-columns: 1fr; gap: 30px; padding: 34px 0; } .feat--flip .feat-copy, .feat--flip .feat-art { order: 0; } .feat-frame, .feat--flip .feat-frame { margin: 0; padding: 20px 0 0 20px; border-radius: 16px; } .feat-frame .win, .feat--flip .feat-frame .win { border-radius: 10px 0 0 0; } .dd .win-body { padding: 15px; } .dd-pulse { grid-template-columns: 1fr; gap: 18px; padding: 16px 0 18px; } .dd-strip { grid-template-columns: 1fr 1fr; gap: 16px 0; } .dd-mstat:nth-child(odd) { padding-left: 0; border-left: none; } .dd-row { grid-template-columns: 1.6fr 1fr 0.7fr; font-size: 0.76rem; } .dd-row span:nth-child(3) { display: none; } .dd-empty { min-height: 220px; } } /* ---------- the honest band (dark) ---------- */ .dark-band { background: var(--dark); color: var(--dark-fg); border-radius: var(--r-panel); padding: 62px 56px; } @media (max-width: 720px) { .dark-band { padding: 40px 26px; border-radius: 22px; } } .dark-band h2, .dark-band h3 { color: var(--dark-fg); } .dark-band p { color: var(--dark-mute); } .dark-band .eyebrow { color: var(--dark-mute); } .gap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 34px; } @media (max-width: 820px) { .gap-grid { grid-template-columns: 1fr; gap: 26px; } } .gap-list { list-style: none; padding: 0; margin: 0; } .gap-list li { display: flex; gap: 12px; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.45; padding: 13px 0; border-bottom: 1px solid var(--dark-rule); color: var(--dark-mute); } .gap-list li:last-child { border-bottom: 0; } .gap-list .m { flex: 0 0 auto; width: 16px; color: #6B6E76; font-family: var(--font-mono); font-size: 0.86rem; } .gap-list--ours li { color: var(--dark-fg); } .gap-list--ours .m { color: #7B8FE8; } /* ---------- pricing ---------- */ /* stretch (not start) so all three cards match height and the CTAs bottom-align via .tier-cta-slot's margin-top:auto, even with uneven feature lists */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; } @media (max-width: 940px) { .tiers { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } .tier { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 28px 26px 30px; background: var(--card); position: relative; display: flex; flex-direction: column; } .tier--pop { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--indigo-line), 0 20px 50px -30px rgba(96, 82, 210, 0.5); } .tier-flag { position: absolute; top: -11px; left: 26px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #FFF; background: linear-gradient(120deg, #4452CE 0%, #6A53CE 55%, #8A66D6 100%); padding: 5px 12px; border-radius: 999px; } .tier-name { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.015em; } .tier-for { font-family: var(--font-display); font-size: 0.9rem; color: var(--mute); margin: 6px 0 20px; display: block; line-height: 1.4; } .tier-price { display: flex; align-items: baseline; gap: 4px; } .tier-price .amt { font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; letter-spacing: -0.035em; } .tier-price .per { font-family: var(--font-display); font-size: 0.92rem; color: var(--mute); } .tier-sub { font-family: var(--font-display); font-size: 0.8rem; color: var(--mute-soft); margin: 8px 0 22px; } .tier .btn { width: 100%; justify-content: center; } .tier-feats { list-style: none; padding: 22px 0 0; margin: 22px 0 0; border-top: 1px solid var(--rule); } .tier-feats li { display: flex; gap: 10px; font-family: var(--font-display); font-size: 0.94rem; line-height: 1.4; color: var(--ink); margin: 0 0 12px; } .tier-feats li:last-child { margin-bottom: 0; } .tier-feats .ck { flex: 0 0 auto; width: 15px; height: 15px; color: var(--indigo); margin-top: 2px; } .tier-feats .ck svg { width: 15px; height: 15px; } .tier-feats .inherit { color: var(--mute); font-style: italic; } .tier-cta-slot { margin-top: auto; } /* ---------- FAQ ---------- */ .faq { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--rule); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-size: 1.06rem; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); padding: 22px 40px 22px 0; position: relative; } .faq-q::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: translateY(-70%) rotate(45deg); transition: transform 220ms var(--ease); } .faq-item.is-open .faq-q::after { transform: translateY(-20%) rotate(-135deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); } .faq-item.is-open .faq-a { max-height: 340px; } .faq-a p { color: var(--mute); font-size: 1.06rem; padding-bottom: 22px; margin: 0; } /* ---------- final CTA ---------- */ .final { text-align: center; } .final h2 { max-width: 18ch; margin: 0 auto 18px; } .final .lede { max-width: 52ch; margin: 0 auto; } .final .hero-cta { margin-top: 30px; justify-content: center; } /* ---------- footer ---------- */ .foot { border-top: 1px solid var(--rule); padding: 44px var(--pad-x) 56px; } .foot-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .foot-links { display: flex; gap: 22px; flex-wrap: wrap; } .foot-links a { font-family: var(--font-display); font-size: 0.9rem; color: var(--mute); text-decoration: none; } .foot-links a:hover { color: var(--ink); } .foot-copy { font-family: var(--font-display); font-size: 0.84rem; color: var(--mute-soft); } /* ---------- resources page ---------- */ .res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .res-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .res-grid { grid-template-columns: 1fr; } } .res-card { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 24px 22px 26px; background: var(--card); text-decoration: none; color: var(--ink); display: block; transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease); } .res-card:hover { border-color: #C9C4B8; transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(17,18,19,0.5); } .res-kind { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--indigo); display: block; margin-bottom: 12px; } .res-card h3 { margin-bottom: 8px; } .res-card p { font-size: 0.98rem; color: var(--mute); margin: 0; } .res-soon { opacity: 0.62; pointer-events: none; } .res-soon .res-kind { color: var(--mute-soft); } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } .dstep.is-on .dstep-bar i { width: 100%; } } /* ============================================================================ * LONG-FORM ARTICLES — /resources// * Added 2026-08-13 for the post-AI-builder SEO set. The reading column is * deliberately narrower than --wide: these run 2,500-3,500 words and a 1280px * measure is unreadable at that length. * * Type follows THIS site's convention, not ten-studios': headings in * --font-display, prose in --font-body (Charter). ten-studios inverts that, * so its article CSS was re-mapped rather than copied. * ========================================================================== */ .doc { max-width: 720px; margin: 0 auto; padding: calc(var(--nav-h) + 56px) 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: 0; } .belief-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.1rem); letter-spacing: -0.025em; line-height: 1.12; color: var(--ink); margin: 0 0 16px; } .article-lede { font-family: var(--font-body); font-style: italic; font-size: clamp(1.12rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--mute); margin: 24px 0 0; max-width: 52ch; } .article-meta { font-family: var(--font-display); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--mute-soft); margin: 0; } .doc-head .article-meta { margin: 22px 0 0; } .article-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 2.5vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 2.4em 0 0.5em; } .article-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; 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.72; color: var(--ink-soft); 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 strong { font-weight: 600; 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; } /* code references inside prose — these articles name real files and keys */ .article-body code { font-family: var(--font-mono); font-size: 0.88em; background: var(--panel); border: 1px solid var(--rule); border-radius: 5px; padding: 0.1em 0.36em; color: var(--ink); } /* numbered framework block: