/* ===================================================================== TOGETHER TRACKING — landing (Executive Command) Warm paper canvas, one dark navy gravity band (the showcase), one blue CTA band. Section flow, seams, texture, and grain match Catalyst. ===================================================================== */ .shell, .section__inner { max-width: var(--w-page); margin-inline: auto; } .section { padding: clamp(54px, 8vw, 118px) var(--gutter); } .section--tint { background: var(--paper-2); } .section__inner { padding-inline: 0; } .shell { padding-inline: clamp(18px, 5vw, 28px); } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 400; padding: 10px 16px; border-radius: var(--r-2); background: var(--blue); color: var(--whiteish); font-weight: 800; text-decoration: none; transition: top var(--d-fast) var(--ease); } .skip-link:focus-visible { top: 12px; } .sec-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 52px); } .sec-head h2, .section-title { font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 0.95; } .section-title { max-width: 20ch; } .section-lead { margin-top: 18px; } /* ---- reveal engine (Catalyst) ---- */ .split-w .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; } .split-w .w > span { display: inline-block; transform: translateY(108%); transition: transform 0.9s var(--ease); } .split-w.in .w > span { transform: none; } [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); } [data-reveal-group].in > * { opacity: 1; transform: none; } [data-reveal-group].in > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-group].in > *:nth-child(2) { transition-delay: 80ms; } [data-reveal-group].in > *:nth-child(3) { transition-delay: 160ms; } [data-reveal-group].in > *:nth-child(4) { transition-delay: 240ms; } [data-reveal-group].in > *:nth-child(5) { transition-delay: 320ms; } [data-reveal-group].in > *:nth-child(6) { transition-delay: 400ms; } .no-js [data-reveal], .no-js [data-reveal-group] > * { opacity: 1; transform: none; } /* ===================================================================== Topbar states ===================================================================== */ .topbar .wordmark, .topbar .brand { color: var(--ink); } .topbar .btn-quiet, .topbar .button--ghost { color: var(--ink); border-color: var(--line-2); } /* ===================================================================== HERO — paper, 2-col: copy + live board, with corner brand wash ===================================================================== */ .hero { position: relative; isolation: isolate; max-width: var(--w-hero); margin: 0 auto; padding: clamp(120px, 12vw, 178px) clamp(18px, 5vw, 76px) clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(42px, 6vw, 88px); align-items: center; } .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -8% -10% auto auto; width: 64%; height: 112%; background-image: var(--grain), url("../img/tex/tex-dawn.webp?1"); background-size: 200px 200px, cover; background-repeat: repeat, no-repeat; background-position: center, center; background-blend-mode: overlay, normal; opacity: 0.62; -webkit-mask-image: radial-gradient(120% 120% at 82% 12%, #000 30%, transparent 72%); mask-image: radial-gradient(120% 120% at 82% 12%, #000 30%, transparent 72%); } @media (prefers-reduced-motion: no-preference) { .hero::before { animation: texDrift 22s var(--ease) infinite alternate; } } @keyframes texDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.06); } } .hero-copy { position: relative; } .hero-title { font-size: clamp(3.4rem, 7vw, 8.4rem); line-height: 0.85; letter-spacing: -0.035em; } .hero-sub { margin: 28px 0 34px; max-width: 44ch; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } /* the live board — a light exec panel (assembles in) */ .hero-stage { position: relative; } .hero-board { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-3); background: linear-gradient(90deg, oklch(30% 0.05 257 / 0.06) 1px, transparent 1px), linear-gradient(180deg, oklch(30% 0.05 257 / 0.06) 1px, transparent 1px), var(--card); background-size: 56px 56px, 56px 56px, auto; box-shadow: var(--shadow-soft); overflow: clip; } .hero-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 72% 24%, oklch(58% 0.22 257 / 0.07), transparent 70%); } .board-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: 16px 20px; box-shadow: inset 0 -1px 0 var(--c-line); } .board-ident { display: flex; align-items: center; gap: 12px; min-width: 0; } .board-name { font-size: 0.92rem; font-weight: 800; color: var(--c-text); line-height: 1.25; } .board-url { font-size: 0.72rem; color: var(--c-text-3); letter-spacing: 0.02em; } .board-tools { display: flex; align-items: center; gap: var(--sp-3); } .hero-boardnote { margin-top: 14px; text-align: right; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--quiet); } /* ===================================================================== PROOF — restrained trust strip (sample tenants) ===================================================================== */ .proof { max-width: var(--w-page); margin: 0 auto; padding: 4px clamp(18px, 5vw, 28px) clamp(48px, 7vw, 78px); } .proof__label { margin: 0 0 22px; font-weight: 900; font-size: 0.92rem; color: var(--blue-dark); } .proof-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; } /* ===================================================================== PROMISE — paper, 01/02/03 rows ===================================================================== */ .promise-title { font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 0.95; max-width: 22ch; } .promise-rows { margin-top: clamp(34px, 5vw, 60px); display: grid; } .promise-row { display: grid; grid-template-columns: 4rem minmax(8rem, 13rem) 1fr; gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); } .promise-index { color: var(--blue-ink); font-weight: 900; font-size: 0.92rem; } .promise-row h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; } .promise-row p { color: var(--ink-soft); max-width: 52ch; line-height: 1.6; } /* ===================================================================== SHOWCASE — the ONE dark navy gravity band (night + tex + grain + seams) Floating tenant dashboards (light panels) on the dark control-room wall. ===================================================================== */ .showcase { position: relative; padding: clamp(80px, 10vw, 140px) clamp(18px, 5vw, 76px); background-color: var(--night); background-image: linear-gradient(180deg, oklch(16% 0.026 258 / 0.62), oklch(10% 0.024 262 / 0.82)), url("../img/tex/tex-night.webp?1"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); margin-block: calc(var(--slant) * -1); } .showcase::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); background-size: 150px 150px; mix-blend-mode: overlay; opacity: 0.6; } .showcase__inner { position: relative; z-index: 1; max-width: var(--w-page); margin: 0 auto; padding-top: var(--slant); } .showcase__head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 60px); } .showcase__head h2 { font-size: clamp(2.4rem, 5vw, 5rem); line-height: 0.95; color: var(--whiteish); } .showcase__head .lead { color: oklch(82% 0.016 86); } .showcase-stack { display: grid; gap: clamp(38px, 6vw, 72px); } .show-frame { margin: 0; width: min(100%, 58rem); will-change: transform; } .show-frame:nth-child(2) { justify-self: end; } .show-frame:nth-child(3) { justify-self: center; } .show-chrome { display: flex; align-items: center; gap: var(--sp-4); padding: 10px 16px; border-radius: var(--r-3) var(--r-3) 0 0; background: oklch(28% 0.02 258); box-shadow: inset 0 -1px 0 oklch(0% 0 0 / 0.2); } .show-dots { display: inline-flex; gap: 5px; } .show-dots i { width: 9px; height: 9px; border-radius: 50%; background: oklch(45% 0.02 258); } .show-url { font-size: 0.72rem; color: oklch(72% 0.02 240); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .show-body { border-radius: 0 0 var(--r-3) var(--r-3); background: var(--card); box-shadow: var(--shadow-soft); } .show-body .board-head { padding: 14px 18px; } .show-caption { margin-top: 18px; font-size: 0.95rem; color: oklch(82% 0.016 86); max-width: 52ch; } .show-caption strong { color: var(--whiteish); font-weight: 800; } .show-body .funnel-bar { background: var(--brand); } /* ===================================================================== CAPABILITIES — paper, editorial split rows ===================================================================== */ .caps .kicker { color: var(--blue-ink); } .cap-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(34px, 5vw, 64px) 0; } .cap-row + .cap-row { border-top: 1px solid var(--line); } .cap-row.is-flipped .cap-copy { order: 2; } .cap-row.is-flipped .cap-media { order: 1; } .cap-index { color: var(--blue-ink); font-weight: 900; font-size: 0.92rem; display: block; margin-bottom: 0.6rem; } .cap-copy h3 { font-size: clamp(1.9rem, 2.8vw, 3rem); line-height: 0.98; } .cap-copy p { margin-top: 1rem; color: var(--ink-soft); max-width: 48ch; line-height: 1.6; } /* 01 ledger */ .ledger { display: grid; padding: clamp(8px, 1.5vw, 14px) clamp(20px, 3vw, 28px); } .ledger-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; } .ledger-row + .ledger-row { border-top: 1px solid var(--line); } .ledger-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-deep); position: relative; } .ledger-check::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--whiteish); border-width: 0 2px 2px 0; transform: rotate(45deg); } .ledger-row.is-held .ledger-check { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); } .ledger-row.is-held .ledger-check::after { border: none; width: 8px; height: 2px; background: var(--quiet); left: 7px; top: 10px; transform: none; } .ledger-name { font-size: 0.95rem; font-weight: 800; } .ledger-row.is-held .ledger-name { color: var(--quiet); } .ledger-src { font-size: 0.72rem; color: var(--quiet); letter-spacing: 0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; } /* 02 health demo */ .health-demo { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; } .health-factors { display: grid; gap: 10px; } @media (max-width: 560px) { .health-demo { grid-template-columns: 1fr; } } /* 03 theme demo */ .theme-picker { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: 10px; } .theme-chip { cursor: pointer; } .theme-chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .theme-demo { display: grid; gap: var(--sp-5); } .theme-demo .board-head { padding: 0; box-shadow: none; } .theme-demo .tenant-mark, .theme-demo .button--blue, .theme-demo .pipeline-fill { transition: background-color var(--d-med) var(--ease), color var(--d-med) var(--ease); } .theme-demo .theme-demo-fill { background: var(--brand); } /* 04 drill demo */ .drill-demo { width: 100%; text-align: left; display: grid; cursor: pointer; } .drill-summary { display: flex; align-items: center; gap: var(--sp-4); } .drill-value { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.03em; } .drill-hint { margin-left: auto; font-size: 0.82rem; font-weight: 800; color: var(--blue-ink); } .drill-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-med) var(--ease), margin-top var(--d-med) var(--ease); } .drill-demo[aria-expanded="true"] .drill-detail { grid-template-rows: 1fr; margin-top: var(--sp-4); } .drill-inner { display: block; min-height: 0; overflow: hidden; } .drill-line { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-soft); } .drill-line.is-more { color: var(--quiet); font-size: 0.82rem; } .drill-line .readout-num { color: var(--quiet); } /* ===================================================================== CREDIBILITY — tint band ===================================================================== */ .cred-band { border-block: 1px solid var(--line-2); padding: clamp(34px, 5vw, 60px) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .cred-title { font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.02; font-weight: 900; max-width: 26ch; } .cred-points { display: grid; gap: var(--sp-4); } .cred-points p { color: var(--ink-soft); font-size: 0.98rem; display: flex; gap: 14px; align-items: baseline; } .cred-num { color: var(--blue-ink); font-weight: 900; font-size: 0.82rem; font-variant-numeric: tabular-nums; } /* ===================================================================== CTA band — blue, angled top, overlapping (Catalyst) ===================================================================== */ .cta-band { position: relative; overflow: hidden; color: var(--whiteish); background-color: var(--blue); padding: clamp(54px, 8vw, 118px) var(--gutter); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--slant) * -1); padding-top: calc(clamp(54px, 8vw, 118px) + var(--slant)); } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 82% 0%, oklch(72% 0.16 240 / 0.5), transparent 60%); pointer-events: none; } .cta-band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); background-size: 150px 150px; mix-blend-mode: overlay; opacity: 0.5; } .cta-band .section__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .cta-band h2 { color: var(--whiteish); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 0.96; max-width: 20ch; } .cta-band p { color: oklch(94% 0.03 90); margin-top: 12px; max-width: 46ch; } /* ===================================================================== LOGIN — clean, minimal (paper) ===================================================================== */ .login-shell { display: grid; justify-items: center; } .login-card { width: min(27rem, 100%); padding: clamp(28px, 4vw, 40px); border-radius: var(--r-4); box-shadow: var(--shadow-tight); } .login-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0.4rem 0 1.4rem; } .login-card form { display: grid; gap: var(--sp-4); } .login-submit { width: 100%; margin-top: var(--sp-2); } .login-hint { text-align: center; } /* Sign-in asks for the email first, then swaps the card to a password or a set-a-password step. Everything below serves that second step. */ /* Who we're signing in, plus the way back to the email field. */ .login-identity { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .login-identity__email { font-weight: 800; color: var(--ink); overflow-wrap: anywhere; } .login-link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--blue-ink); cursor: pointer; text-underline-offset: 3px; } .login-link:hover { text-decoration: underline; } .login-banner { font-weight: 700; margin: 0 0 14px; } .login-banner--error { color: var(--alert-deep); } .login-banner--notice { color: var(--blue-ink); } /* The email above is display text. This mirror is what actually posts, and it gives password managers a username field to bind the saved password to. Off-screen rather than type=hidden or display:none — managers skip both. */ .login-username { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* No JavaScript means no status check, so the stepped views can't work. Hide them and let the