/* ============================================================================ SAAScade design system — canonical stylesheet. Single source of truth for the File Manager site's look, mirroring www.saascade.com so every SAAScade product reads as one family: Inter, a blue accent with amber/teal secondaries, generous radii and the gradient pill button — now in TWO palettes designed to the same care: a warm-neutral paper for light and the original near-black canvas for dark (#6888, findings 07). Consumed by the landing site (marketing/landingpage/*.html link their own copy at assets/saascade.css), documented live in ./index.html (the styleguide) and in ../../landingpage-redesign/components.html (the component reference, with the HTML pattern for every class below). Change tokens HERE, then copy this file to marketing/landingpage/assets/saascade.css — the two are byte-identical by rule (see ../landingpage/README.md). -- How theming works ------------------------------------------------------ 1. The two palettes are declared ONCE each as --light-* / --dark-* raw values. 2. Semantic tokens (--bg, --text, --accent, ...) MAP onto one of them: :root -> light (the default) @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) -> dark (follow the system) [data-theme="dark"] -> dark (explicit, wins) [data-theme="light"] -> light (explicit, wins) So the site follows the visitor's system theme, and an explicit data-theme="light|dark" on (or on any element, for an island) overrides it in both directions. 3. Every colour used below comes from a semantic token. Nothing outside the token blocks is a literal colour — that is what makes both themes work. -- Reading order ---------------------------------------------------------- tokens · base · type · layout · buttons · nav · cards · pills & labels segmented · rungs · bundle cards · proof cards · theme swatches · FAQ streams · footer · marks & badges · hero re-tint hooks · utilities ========================================================================== */ /* ========================================================================== 1 · TOKENS ========================================================================== */ :root{ /* ---- the light palette (raw) ------------------------------------------ Warm-neutral paper, never pure white, so a dark screenshot sits on it without a halo. Greys carry a slight hue bias toward the accent. The blue is deepened two steps: #4f8ef7 only reaches 2.3:1 on paper, #1d4ed8 reaches 6.1:1 as text and 6.7:1 under white. */ --light-bg: #f7f4ef; --light-bg-alt: #efebe3; --light-surface: rgba(255,255,255,0.72); --light-surface-strong:rgba(255,255,255,0.94); --light-surface-raised:#fdfcfa; --light-surface-inset: rgba(24,24,27,0.05); --light-border: rgba(24,24,27,0.10); --light-border-strong: rgba(24,24,27,0.18); --light-text: #2a2a33; /* 12.9:1 on paper */ --light-text-strong: #14141b; /* 16.7:1 */ --light-muted: #5b5b68; /* 6.1:1 — still AA as running text */ --light-muted-strong: #6e6d7a; /* 4.6:1 — dim marks, disabled rows */ --light-accent: #1d4ed8; --light-accent-strong: #1740a6; --light-accent-soft: rgba(29,78,216,0.10); --light-accent-warm: #9a5b00; --light-accent-secondary:#0f766e; --light-accent-magenta:#b30559; --light-accent-glow: rgba(29,78,216,0.14); --light-text-on-accent: #ffffff; --light-ok: #0f7a35; --light-warn: #9a5b00; --light-no: #6e6d7a; --light-ok-soft: rgba(15,122,53,0.10); --light-warn-soft: rgba(154,91,0,0.10); --light-shadow: 0 18px 44px rgba(24,24,27,0.10); --light-shadow-strong: 0 30px 72px rgba(24,24,27,0.16); --light-nav-background: rgba(247,244,239,0.78); --light-ambient-glow-top: rgba(29,78,216,0.09); --light-ambient-glow-left: rgba(15,118,110,0.07); --light-ambient-glow-bottom: rgba(179,5,89,0.04); --light-gradient-text-from: #14141b; --light-gradient-text-to: #5b5b68; /* ---- the dark palette (raw) — the original company values, unchanged --- */ --dark-bg: #09090b; --dark-bg-alt: #111114; --dark-surface: rgba(255,255,255,0.03); --dark-surface-strong:rgba(255,255,255,0.06); --dark-surface-raised:#15151a; --dark-surface-inset: rgba(255,255,255,0.04); --dark-border: rgba(255,255,255,0.08); --dark-border-strong: rgba(255,255,255,0.12); --dark-text: #a1a1aa; --dark-text-strong: #f4f4f5; --dark-muted: #71717a; --dark-muted-strong: #52525b; --dark-accent: #4f8ef7; --dark-accent-strong: #3b82f6; --dark-accent-soft: rgba(79,142,247,0.14); --dark-accent-warm: #f59e0b; --dark-accent-secondary:#14B8A6; --dark-accent-magenta:#e50770; --dark-accent-glow: rgba(79,142,247,0.15); --dark-text-on-accent: #ffffff; --dark-ok: #26b050; --dark-warn: #f59e0b; --dark-no: #71717a; --dark-ok-soft: rgba(38,176,80,0.14); --dark-warn-soft: rgba(245,158,11,0.12); --dark-shadow: 0 24px 60px rgba(0,0,0,0.5); --dark-shadow-strong: 0 36px 96px rgba(0,0,0,0.7); --dark-nav-background: rgba(9,9,11,0.72); --dark-ambient-glow-top: rgba(79,142,247,0.16); --dark-ambient-glow-left: rgba(20,184,166,0.10); --dark-ambient-glow-bottom: rgba(229,7,112,0.07); --dark-gradient-text-from: #ffffff; --dark-gradient-text-to: #a1a1aa; /* ---- screenshot canvas ------------------------------------------------- A capture of the app is dark in most themes; frames that hold one keep a dark ground in BOTH site themes (see .on-dark). */ --screenshot-canvas: #111114; --screenshot-canvas-deep: #0b0b10; /* ---- type ------------------------------------------------------------- One 1.25 modular scale, fluid where it matters. Body is --step-0. */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --step--2: 0.75rem; --step--1: 0.875rem; --step-0: 1rem; --step-1: clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem); --step-2: clamp(1.30rem, 1.17rem + 0.60vw, 1.5625rem); --step-3: clamp(1.55rem, 1.30rem + 1.10vw, 1.9531rem); --step-4: clamp(1.85rem, 1.42rem + 1.90vw, 2.4414rem); --step-5: clamp(2.40rem, 1.60rem + 3.60vw, 3.8147rem); --font-size-mono: 0.875rem; /* mono has ONE size, everywhere */ --weight-body: 400; --weight-label: 500; --weight-heading: 600; --weight-strong: 700; --weight-hero: 800; /* the single hero line, and nothing else */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --tracking-tight: -0.02em; --tracking-label: 0.08em; --measure: 65ch; /* running text never runs wider */ --measure-narrow: 46ch; /* ---- space ------------------------------------------------------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* ---- shape ------------------------------------------------------------ */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --pill: 999px; /* ---- layout ----------------------------------------------------------- */ --content: 76rem; --content-narrow: 44rem; /* ---- motion ----------------------------------------------------------- */ --duration-fast: 120ms; --duration-medium: 240ms; --duration-slow: 400ms; --duration-tint: 700ms; /* the hero re-tint (findings 07, B) */ --easing: cubic-bezier(.4,0,.2,1); /* ---- focus ------------------------------------------------------------ */ --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ---- the default mapping: LIGHT --------------------------------------- */ color-scheme: light; --bg: var(--light-bg); --bg-alt: var(--light-bg-alt); --surface: var(--light-surface); --surface-strong:var(--light-surface-strong); --surface-raised:var(--light-surface-raised); --surface-inset: var(--light-surface-inset); --border: var(--light-border); --border-strong: var(--light-border-strong); --text: var(--light-text); --text-strong: var(--light-text-strong); --muted: var(--light-muted); --muted-strong: var(--light-muted-strong); --accent: var(--light-accent); --accent-strong: var(--light-accent-strong); --accent-soft: var(--light-accent-soft); --accent-warm: var(--light-accent-warm); --accent-secondary:var(--light-accent-secondary); --accent-magenta:var(--light-accent-magenta); --accent-glow: var(--light-accent-glow); --text-on-accent: var(--light-text-on-accent); --ok: var(--light-ok); --warn: var(--light-warn); --no: var(--light-no); --ok-soft: var(--light-ok-soft); --warn-soft: var(--light-warn-soft); --shadow: var(--light-shadow); --shadow-strong: var(--light-shadow-strong); --nav-background: var(--light-nav-background); --ambient-glow-top: var(--light-ambient-glow-top); --ambient-glow-left: var(--light-ambient-glow-left); --ambient-glow-bottom: var(--light-ambient-glow-bottom); --gradient-text-from: var(--light-gradient-text-from); --gradient-text-to: var(--light-gradient-text-to); --focus-ring: var(--light-accent); } /* Follow the system into dark, unless the page explicitly asked for light. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --bg: var(--dark-bg); --bg-alt: var(--dark-bg-alt); --surface: var(--dark-surface); --surface-strong:var(--dark-surface-strong); --surface-raised:var(--dark-surface-raised); --surface-inset: var(--dark-surface-inset); --border: var(--dark-border); --border-strong: var(--dark-border-strong); --text: var(--dark-text); --text-strong: var(--dark-text-strong); --muted: var(--dark-muted); --muted-strong: var(--dark-muted-strong); --accent: var(--dark-accent); --accent-strong: var(--dark-accent-strong); --accent-soft: var(--dark-accent-soft); --accent-warm: var(--dark-accent-warm); --accent-secondary:var(--dark-accent-secondary); --accent-magenta:var(--dark-accent-magenta); --accent-glow: var(--dark-accent-glow); --text-on-accent: var(--dark-text-on-accent); --ok: var(--dark-ok); --warn: var(--dark-warn); --no: var(--dark-no); --ok-soft: var(--dark-ok-soft); --warn-soft: var(--dark-warn-soft); --shadow: var(--dark-shadow); --shadow-strong: var(--dark-shadow-strong); --nav-background: var(--dark-nav-background); --ambient-glow-top: var(--dark-ambient-glow-top); --ambient-glow-left: var(--dark-ambient-glow-left); --ambient-glow-bottom: var(--dark-ambient-glow-bottom); --gradient-text-from: var(--dark-gradient-text-from); --gradient-text-to: var(--dark-gradient-text-to); --focus-ring: var(--dark-accent); } } /* An explicit choice wins both ways. The bare attribute selector is deliberate: it lets any element be a themed ISLAND (used by components.html to show both palettes at once, and by .on-dark for screenshot frames — including the three legacy panels on the existing pages, whose page-local rules paint a near-black gradient or fill and so must keep dark text tokens whatever the site theme is: .hero-shot (index), .mock (packs/*), .media (gallery), and comparison.html's .toolbar and sticky table head. Those five are named here rather than fixed in the pages because this ticket does not touch page markup; a page rewritten by the redesign should use .on-dark and drop out of this list.) */ :root[data-theme="dark"], [data-theme="dark"], .on-dark, .hero-shot, .mock, .media, .toolbar, .table-scroll thead th{ color-scheme: dark; --bg: var(--dark-bg); --bg-alt: var(--dark-bg-alt); --surface: var(--dark-surface); --surface-strong:var(--dark-surface-strong); --surface-raised:var(--dark-surface-raised); --surface-inset: var(--dark-surface-inset); --border: var(--dark-border); --border-strong: var(--dark-border-strong); --text: var(--dark-text); --text-strong: var(--dark-text-strong); --muted: var(--dark-muted); --muted-strong: var(--dark-muted-strong); --accent: var(--dark-accent); --accent-strong: var(--dark-accent-strong); --accent-soft: var(--dark-accent-soft); --accent-warm: var(--dark-accent-warm); --accent-secondary:var(--dark-accent-secondary); --accent-magenta:var(--dark-accent-magenta); --accent-glow: var(--dark-accent-glow); --text-on-accent: var(--dark-text-on-accent); --ok: var(--dark-ok); --warn: var(--dark-warn); --no: var(--dark-no); --ok-soft: var(--dark-ok-soft); --warn-soft: var(--dark-warn-soft); --shadow: var(--dark-shadow); --shadow-strong: var(--dark-shadow-strong); --nav-background: var(--dark-nav-background); --ambient-glow-top: var(--dark-ambient-glow-top); --ambient-glow-left: var(--dark-ambient-glow-left); --ambient-glow-bottom: var(--dark-ambient-glow-bottom); --gradient-text-from: var(--dark-gradient-text-from); --gradient-text-to: var(--dark-gradient-text-to); --focus-ring: var(--dark-accent); } :root[data-theme="light"], [data-theme="light"]{ color-scheme: light; --bg: var(--light-bg); --bg-alt: var(--light-bg-alt); --surface: var(--light-surface); --surface-strong:var(--light-surface-strong); --surface-raised:var(--light-surface-raised); --surface-inset: var(--light-surface-inset); --border: var(--light-border); --border-strong: var(--light-border-strong); --text: var(--light-text); --text-strong: var(--light-text-strong); --muted: var(--light-muted); --muted-strong: var(--light-muted-strong); --accent: var(--light-accent); --accent-strong: var(--light-accent-strong); --accent-soft: var(--light-accent-soft); --accent-warm: var(--light-accent-warm); --accent-secondary:var(--light-accent-secondary); --accent-magenta:var(--light-accent-magenta); --accent-glow: var(--light-accent-glow); --text-on-accent: var(--light-text-on-accent); --ok: var(--light-ok); --warn: var(--light-warn); --no: var(--light-no); --ok-soft: var(--light-ok-soft); --warn-soft: var(--light-warn-soft); --shadow: var(--light-shadow); --shadow-strong: var(--light-shadow-strong); --nav-background: var(--light-nav-background); --ambient-glow-top: var(--light-ambient-glow-top); --ambient-glow-left: var(--light-ambient-glow-left); --ambient-glow-bottom: var(--light-ambient-glow-bottom); --gradient-text-from: var(--light-gradient-text-from); --gradient-text-to: var(--light-gradient-text-to); --focus-ring: var(--light-accent); } /* ========================================================================== 2 · BASE ========================================================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:5rem} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}} body{ margin:0;background:var(--bg);color:var(--text);font-family:var(--font); font-size:var(--step-0);font-weight:var(--weight-body);line-height:var(--leading-normal); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* Ambient brand glow behind the page, like the SAAScade hero — much quieter on paper. */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(60rem 40rem at 78% -8%, var(--ambient-glow-top), transparent 60%), radial-gradient(50rem 34rem at 8% 4%, var(--ambient-glow-left), transparent 55%), radial-gradient(46rem 30rem at 50% 108%, var(--ambient-glow-bottom), transparent 60%); } a{color:var(--accent);text-decoration:none} a:hover{color:var(--text-strong)} img{max-width:100%} hr{border:0;border-top:1px solid var(--border);margin:var(--space-lg) 0} ::selection{background:var(--accent-soft);color:var(--text-strong)} /* Focus is visible on everything a keyboard can reach. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, details:focus-visible, [tabindex]:focus-visible{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:var(--focus-ring-offset); } /* ========================================================================== 3 · TYPE ========================================================================== */ h1,h2,h3,h4{color:var(--text-strong);line-height:var(--leading-tight);margin:0 0 var(--space-2xs); font-weight:var(--weight-heading);letter-spacing:var(--tracking-tight);text-wrap:balance} h1{font-size:var(--step-5);font-weight:var(--weight-hero)} h2{font-size:var(--step-4)} h3{font-size:var(--step-1);letter-spacing:-0.01em} h4{font-size:var(--step-0)} p{margin:0 0 var(--space-sm)} p, li{text-wrap:pretty} strong,b{color:var(--text-strong);font-weight:var(--weight-strong)} small{font-size:var(--step--1)} code,kbd,samp,pre{font-family:var(--mono);font-size:var(--font-size-mono)} code{color:var(--text-strong)} /* .display — the one 800-weight line on a page (the hero claim). */ .display{font-size:var(--step-5);font-weight:var(--weight-hero);line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);color:var(--text-strong);text-wrap:balance;margin:0} .lede{font-size:var(--step-1);color:var(--muted);max-width:var(--measure);text-wrap:pretty} .measure{max-width:var(--measure)} .measure-narrow{max-width:var(--measure-narrow)} .muted{color:var(--muted)} .label{display:inline-block;font-size:var(--step--2);font-weight:var(--weight-strong); letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)} .mono{font-family:var(--mono);font-size:var(--font-size-mono)} .tabular-numbers{font-variant-numeric:tabular-nums} .grad{background:linear-gradient(135deg,var(--gradient-text-from) 0%,var(--gradient-text-to) 100%); -webkit-background-clip:text;background-clip:text;color:transparent} .grad-accent{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-secondary) 100%); -webkit-background-clip:text;background-clip:text;color:transparent} .eyebrow{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--step--2); font-weight:var(--weight-heading);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--accent);background:var(--surface);border:1px solid var(--border); padding:.35rem .8rem;border-radius:var(--pill)} .eyebrow .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} /* ========================================================================== 4 · LAYOUT ========================================================================== */ .wrap{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--space-md)} .section{padding:var(--space-3xl) 0} .section-head{max-width:var(--content-narrow);margin:0 auto var(--space-lg);text-align:center} .section-head p{color:var(--muted);font-size:var(--step-1)} /* ========================================================================== 5 · BUTTONS .btn base — always paired with one variant .btn-primary accent fill, the one action per screen .btn-secondary neutral fill, the alternative action .btn-ghost quiet wash + hairline, tertiary .btn-download layout variant: OS icon slot + two-line label .btn-sm / .btn-lg size variants ========================================================================== */ .btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:var(--weight-heading); font-size:var(--step-0);font-family:inherit;line-height:1.2; padding:.8rem 1.5rem;border-radius:var(--pill);border:1px solid transparent;cursor:pointer; transition:transform var(--duration-fast) var(--easing),box-shadow var(--duration-medium) var(--easing), background var(--duration-medium) var(--easing),border-color var(--duration-medium) var(--easing);white-space:nowrap} .btn:hover{transform:translateY(-2px)} .btn[disabled],.btn.is-disabled{opacity:.55;pointer-events:none} .btn-primary{color:var(--text-on-accent);background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%); box-shadow:0 12px 30px -10px var(--accent-glow),0 0 22px var(--accent-glow)} .btn-primary:hover{color:var(--text-on-accent);box-shadow:0 16px 40px -10px var(--accent-glow),0 0 30px var(--accent-glow)} .btn-secondary{color:var(--text-strong);background:var(--surface-strong);border-color:var(--border-strong)} .btn-secondary:hover{color:var(--text-strong);border-color:var(--accent)} .btn-ghost{color:var(--text-strong);background:transparent;border-color:var(--border)} .btn-ghost:hover{color:var(--text-strong);background:var(--surface);border-color:var(--accent)} .btn .sub{font-weight:var(--weight-body);opacity:.85;font-size:var(--step--2)} .btn-sm{padding:.45rem 1rem;font-size:var(--step--1)} .btn-lg{padding:1rem 1.9rem;font-size:var(--step-1)} /* download button: an OS icon slot, a headline and a sub-line that stacks */ .btn-download{align-items:center;text-align:left;padding:.7rem 1.4rem} .btn-download .os-icon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1} .btn-download .os-icon svg{width:100%;height:100%;fill:currentColor} .btn-download .btn-label{display:flex;flex-direction:column;gap:.1rem} .btn-download .sub{display:block;opacity:.8;font-variant-numeric:tabular-nums} /* ========================================================================== 6 · TOP NAVIGATION ========================================================================== */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px); background:var(--nav-background);border-bottom:1px solid var(--border)} .nav-inner{display:flex;align-items:center;gap:1.25rem;height:4rem} /* The brand header: the company MARK, the product name, the maker line. The mark is a committed image (assets/brand/SAAScade-Logo-256x.png, never the saascade.com URL) and is never recoloured or tiled — .logo.is-mark drops the gradient tile the glyph fallback uses. */ .brand{display:flex;align-items:center;gap:.6rem;font-weight:var(--weight-hero);color:var(--text-strong); letter-spacing:var(--tracking-tight)} .brand .logo{width:1.85rem;height:1.85rem;border-radius:.5rem;display:grid;place-items:center; color:var(--text-on-accent);font-size:1rem; background:linear-gradient(135deg,var(--accent),var(--accent-secondary));box-shadow:0 0 18px var(--accent-glow)} .brand .logo.is-mark{background:none;box-shadow:none;border-radius:0;width:2rem;height:2rem} .brand .logo img{display:block;width:100%;height:100%;object-fit:contain} .brand small{display:block;font-size:.62rem;font-weight:var(--weight-heading);letter-spacing:.12em; color:var(--muted);text-transform:uppercase;margin-top:-2px} /* .brand-lg — the same lockup at page size (a footer, a splash, a title block). */ .brand-lg{gap:.8rem;font-size:var(--step-1)} .brand-lg .logo{width:2.6rem;height:2.6rem} .brand-lg .logo.is-mark{width:2.8rem;height:2.8rem} .brand-lg small{font-size:var(--step--2);letter-spacing:.1em;margin-top:0} .nav-links{display:flex;align-items:center;gap:.35rem;margin-left:auto} .nav-links a{color:var(--text);font-size:var(--step--1);font-weight:var(--weight-label); padding:.5rem .8rem;border-radius:var(--radius-md)} .nav-links a:hover{color:var(--text-strong);background:var(--surface)} .nav-links a.active{color:var(--text-strong)} .nav-cta{margin-left:.4rem} .nav-burger{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--border); color:var(--text-strong);border-radius:var(--radius-md);padding:.5rem .7rem;cursor:pointer} @media (max-width:760px){ .nav-links{position:fixed;inset:4rem 0 auto 0;flex-direction:column;align-items:stretch;gap:0;margin:0; background:var(--bg-alt);border-bottom:1px solid var(--border);padding:.5rem 1rem 1rem;display:none} .nav-links.open{display:flex} .nav-links a{padding:.8rem .6rem;border-radius:0;border-bottom:1px solid var(--border)} .nav-cta{margin:.6rem 0 0} .nav-burger{display:block} } /* ========================================================================== 7 · GENERIC CARD / GRID ========================================================================== */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem} .card:hover{border-color:var(--border-strong);background:var(--surface-strong)} .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem} .feature .ico{width:2.8rem;height:2.8rem;border-radius:var(--radius-md);display:grid;place-items:center; font-size:1.4rem;margin-bottom:.9rem; background:linear-gradient(135deg,var(--accent-soft),var(--surface-strong));border:1px solid var(--border)} .feature h3{margin-bottom:.35rem} .feature p{color:var(--muted);font-size:var(--step--1);margin:0} /* ========================================================================== 8 · PILLS, TAGS AND LABELS .pill base .pill-soon "coming soon" — amber, the only future-tense mark .pill-free / .pill-new / .pill-accent .tag the legacy inline tag (kept: used across the site) ========================================================================== */ .pill{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--step--2); font-weight:var(--weight-strong);letter-spacing:.04em;text-transform:uppercase; color:var(--muted);background:var(--surface);border:1px solid var(--border); padding:.15rem .6rem;border-radius:var(--pill);white-space:nowrap} .pill-soon{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-soft)} .pill-free{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-soft)} .pill-new,.pill-accent{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-soft)} .tag{display:inline-block;font-size:var(--step--2);font-weight:var(--weight-strong);letter-spacing:.04em; text-transform:uppercase;color:var(--accent);background:var(--surface);border:1px solid var(--border); padding:.15rem .5rem;border-radius:var(--pill);margin-top:.8rem} /* ========================================================================== 9 · SEGMENTED TOGGLE (monthly/yearly, individual/company) Radio inputs + labels: the checked state is in the MARKUP, so the default reads correctly with no JavaScript at all. ========================================================================== */ .segmented{display:inline-flex;align-items:stretch;padding:.25rem;gap:.25rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--pill)} .segmented-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .segmented-option{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer; padding:.45rem 1rem;border-radius:var(--pill);font-size:var(--step--1);font-weight:var(--weight-label); color:var(--muted);transition:background var(--duration-fast) var(--easing),color var(--duration-fast) var(--easing)} .segmented-option:hover{color:var(--text-strong)} .segmented-input:checked + .segmented-option{ color:var(--text-on-accent);background:var(--accent);font-weight:var(--weight-heading)} .segmented-input:focus-visible + .segmented-option{ outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)} .segmented-note{font-size:var(--step--2);font-weight:var(--weight-body);opacity:.85} /* ========================================================================== 10 · RUNG GROUP HEADER (the bundle rungs) ========================================================================== */ .rung{margin:0 0 var(--space-2xl)} .rung-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-sm); padding-bottom:var(--space-2xs);margin-bottom:var(--space-md);border-bottom:1px solid var(--border)} .rung-index{font-family:var(--mono);font-size:var(--font-size-mono);color:var(--accent); font-variant-numeric:tabular-nums} .rung-title{font-size:var(--step-2);font-weight:var(--weight-heading);color:var(--text-strong); letter-spacing:var(--tracking-tight);margin:0} .rung-note{color:var(--muted);font-size:var(--step--1);margin-left:auto;text-align:right} .rung-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.1rem;align-items:stretch} /* ========================================================================== 11 · BUNDLE CARD .bundle-card the card .bundle-card.is-lifted the one recommended card, raised and accented .bundle-badge the ribbon on the lifted card .bundle-name / .bundle-persona / .bundle-price / .bundle-includes .bundle-pairs the "pairs well with ..." line ========================================================================== */ .bundle-card{position:relative;display:flex;flex-direction:column;gap:var(--space-2xs); background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:1.5rem;transition:border-color var(--duration-medium) var(--easing), transform var(--duration-medium) var(--easing),box-shadow var(--duration-medium) var(--easing)} .bundle-card:hover{border-color:var(--border-strong);background:var(--surface-strong)} .bundle-card.is-lifted{border-color:var(--accent);background:var(--surface-raised); box-shadow:var(--shadow);transform:translateY(-.4rem)} .bundle-badge{position:absolute;top:-.7rem;left:1.4rem;font-size:var(--step--2); font-weight:var(--weight-strong);letter-spacing:.06em;text-transform:uppercase; color:var(--text-on-accent);background:var(--accent);padding:.2rem .7rem;border-radius:var(--pill)} .bundle-name{font-size:var(--step-1);font-weight:var(--weight-heading);color:var(--text-strong);margin:0} .bundle-persona{color:var(--muted);font-size:var(--step--1);margin:0} .bundle-price{display:flex;align-items:baseline;gap:.4rem;margin:var(--space-2xs) 0 0; font-variant-numeric:tabular-nums} .bundle-price-amount{font-size:var(--step-3);font-weight:var(--weight-hero);color:var(--text-strong); letter-spacing:var(--tracking-tight)} .bundle-price-unit{font-size:var(--step--1);color:var(--muted)} .bundle-includes{list-style:none;margin:var(--space-2xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem} .bundle-includes li{font-size:var(--step--1);color:var(--text); background:var(--surface-inset);border-radius:var(--radius-sm);padding:.1rem .45rem} .bundle-pairs{margin:var(--space-2xs) 0 0;font-size:var(--step--1);color:var(--muted)} .bundle-pairs a{font-weight:var(--weight-label)} .bundle-cta{margin-top:auto;padding-top:var(--space-sm)} .bundle-cta .btn{width:100%;justify-content:center} /* ========================================================================== 12 · PROOF CARD (one screenshot, one headline, one sentence) ========================================================================== */ .proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.4rem} .proof-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--duration-medium) var(--easing)} .proof-card:hover{border-color:var(--border-strong)} .proof-media{display:block;aspect-ratio:16/10;width:100%;object-fit:cover; background:linear-gradient(160deg,var(--screenshot-canvas),var(--screenshot-canvas-deep));border-bottom:1px solid var(--border)} .proof-body{padding:1.2rem 1.3rem} .proof-title{font-size:var(--step-1);font-weight:var(--weight-heading);color:var(--text-strong);margin:0 0 .3rem} .proof-text{color:var(--muted);font-size:var(--step--1);margin:0;max-width:var(--measure)} /* ========================================================================== 13 · THEME SWATCH STRIP Each swatch shows the theme's light half and dark half, split diagonally, with the theme accent as a dot. The generator sets three custom properties per swatch: --swatch-light, --swatch-dark, --swatch-accent. ========================================================================== */ .theme-strip{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0;list-style:none} .theme-swatch{--swatch-light:var(--light-bg);--swatch-dark:var(--dark-bg);--swatch-accent:var(--accent); display:inline-flex;flex-direction:column;gap:.4rem;align-items:center;cursor:pointer; padding:.4rem;border:1px solid var(--border);border-radius:var(--radius-md); background:var(--surface);font-family:inherit; transition:border-color var(--duration-fast) var(--easing),transform var(--duration-fast) var(--easing)} .theme-swatch:hover{border-color:var(--border-strong);transform:translateY(-2px)} .theme-swatch.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .theme-swatch-chip{position:relative;width:3.4rem;height:2.1rem;border-radius:var(--radius-sm); border:1px solid var(--border); background:linear-gradient(105deg,var(--swatch-light) 0 50%,var(--swatch-dark) 50% 100%)} .theme-swatch-chip::after{content:"";position:absolute;right:.3rem;bottom:.3rem;width:.5rem;height:.5rem; border-radius:50%;background:var(--swatch-accent)} .theme-swatch-name{font-size:var(--step--2);font-weight:var(--weight-label);color:var(--muted); max-width:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .theme-swatch.is-active .theme-swatch-name{color:var(--text-strong)} /* ========================================================================== 14 · FAQ DISCLOSURE (details/summary — open/close with no JavaScript) ========================================================================== */ .faq{max-width:var(--content-narrow);margin:0 auto;border-top:1px solid var(--border)} .faq-item{border-bottom:1px solid var(--border)} .faq-q{display:flex;align-items:center;gap:var(--space-2xs);cursor:pointer;list-style:none; padding:1rem .2rem;font-size:var(--step-0);font-weight:var(--weight-heading);color:var(--text-strong)} .faq-q::-webkit-details-marker{display:none} .faq-q::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:var(--step-1);color:var(--muted)} .faq-item[open] .faq-q::after{content:"\2212"} .faq-q:hover{color:var(--accent)} .faq-a{margin:0;padding:0 .2rem 1.1rem;color:var(--muted);max-width:var(--measure)} /* ========================================================================== 15 · STREAM PICKER (Stable / Insiders / Dev) ========================================================================== */ .stream-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem} .stream-card{display:flex;flex-direction:column;gap:.4rem;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.3rem} .stream-card:hover{border-color:var(--border-strong)} .stream-card.is-default{border-color:var(--accent);background:var(--surface-raised);box-shadow:var(--shadow)} .stream-name{display:flex;align-items:center;gap:.5rem;font-size:var(--step-1); font-weight:var(--weight-heading);color:var(--text-strong);margin:0} .stream-cadence{font-family:var(--mono);font-size:var(--font-size-mono);color:var(--accent)} .stream-body{color:var(--muted);font-size:var(--step--1);margin:0;max-width:var(--measure)} .stream-meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin-top:auto;padding-top:var(--space-sm); font-family:var(--mono);font-size:var(--font-size-mono);color:var(--muted); font-variant-numeric:tabular-nums} /* ========================================================================== 16 · FOOTER ========================================================================== */ .footer{border-top:1px solid var(--border);margin-top:var(--space-2xl);padding:var(--space-xl) 0 2.5rem; background:var(--bg-alt)} .footer-inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between} .footer .brand{margin-bottom:.8rem} .footer p{color:var(--muted);font-size:var(--step--1);max-width:24rem} .footer nav{display:flex;flex-wrap:wrap;gap:2.5rem} .footer nav div b{display:block;color:var(--text-strong);font-size:var(--step--2);text-transform:uppercase; letter-spacing:.06em;margin-bottom:.7rem} .footer nav a{display:block;color:var(--muted);font-size:var(--step--1);padding:.2rem 0} .footer nav a:hover{color:var(--text-strong)} .footer .legal{width:100%;border-top:1px solid var(--border);margin-top:2rem;padding-top:1.4rem; display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;color:var(--muted);font-size:var(--step--1)} /* ========================================================================== 17 · STATUS MARKS AND PRODUCT BADGES (the comparison page) ========================================================================== */ .mark-full{color:var(--ok)} .mark-partial{color:var(--warn)} .mark-none{color:var(--muted-strong)} .badge-win{--b:var(--accent)} .badge-mac{--b:var(--accent-warm)} .badge-ours{--b:var(--accent-secondary)} .prodbadge{display:inline-block;font-size:.66rem;font-weight:var(--weight-hero);letter-spacing:.04em; text-transform:uppercase;color:var(--text-on-accent);background:var(--b,var(--accent)); padding:.1rem .45rem;border-radius:var(--radius-sm)} /* ========================================================================== 18 · HERO RE-TINT HOOKS (findings 07, direction B "Dressed") --------------------------------------------------------------------------- The hero — and ONLY the hero — can wear one of the product's own themes. It reads its colour from hero-scoped custom properties that default to the company tokens, so the hero is exactly on-brand until something sets them. THE CONTRACT with the generated themes.css (#6886): stamp the hero element with data-theme-preview="" and data-scheme="light|dark", and emit a rule per theme and scheme setting FOUR properties: [data-theme-preview="dracula"][data-scheme="dark"]{ --hero-canvas:#282a36; the theme's app background --hero-surface:#343746; its panel / sidebar surface --hero-accent:#bd93f9; its accent --hero-text:#f8f8f2; its primary text } Those four are all a theme must emit. Everything else is derived below and may be overridden if the theme knows better: --hero-surface-strong --hero-border --hero-text-muted --hero-accent-strong --hero-text-on-accent --hero-shadow ONE of those is worth emitting anyway: --hero-text-on-accent defaults to the theme's canvas colour, which reads well over most accents but cannot be proved to reach WCAG AA over an ARBITRARY one. A theme has its own on-accent token — emit it, and the button label is right by construction rather than by luck. Nothing outside .hero-tinted changes: the rest of the page stays on the company tokens, by design. Reduced motion: the re-tint transition is switched off here as well as by the global rule, and the cycling page script must hold on its first theme (VS Code) rather than advance. ========================================================================== */ .hero-tinted{ --hero-canvas: var(--bg); --hero-surface: var(--surface-raised); --hero-accent: var(--accent); --hero-text: var(--text-strong); /* derived — a theme may override any of these, none of them is required */ --hero-surface-strong: color-mix(in oklab, var(--hero-surface) 90%, var(--hero-text)); --hero-border: color-mix(in oklab, var(--hero-text) 14%, var(--hero-canvas)); --hero-text-muted: color-mix(in oklab, var(--hero-text) 66%, var(--hero-canvas)); --hero-accent-strong: color-mix(in oklab, var(--hero-accent) 82%, var(--hero-text)); --hero-text-on-accent: var(--hero-canvas); --hero-shadow: var(--shadow-strong); background:var(--hero-canvas); color:var(--hero-text-muted); transition:background-color var(--duration-tint) var(--easing),color var(--duration-tint) var(--easing); } .hero-tinted h1,.hero-tinted h2,.hero-tinted h3,.hero-tinted .display,.hero-tinted strong{ color:var(--hero-text);transition:color var(--duration-tint) var(--easing)} .hero-tinted .lede,.hero-tinted .muted{color:var(--hero-text-muted)} .hero-tinted a{color:var(--hero-accent)} .hero-tinted a:hover{color:var(--hero-text)} .hero-tinted .eyebrow{color:var(--hero-accent);background:var(--hero-surface);border-color:var(--hero-border); transition:background-color var(--duration-tint) var(--easing),border-color var(--duration-tint) var(--easing), color var(--duration-tint) var(--easing)} .hero-tinted .eyebrow .dot{background:var(--hero-accent);box-shadow:0 0 10px var(--hero-accent)} .hero-tinted .btn-primary{ color:var(--hero-text-on-accent); background:linear-gradient(135deg,var(--hero-accent) 0%,var(--hero-accent-strong) 100%); box-shadow:0 12px 30px -12px var(--hero-accent); transition:background var(--duration-tint) var(--easing),color var(--duration-tint) var(--easing), box-shadow var(--duration-tint) var(--easing),transform var(--duration-fast) var(--easing)} .hero-tinted .btn-secondary,.hero-tinted .btn-ghost{ color:var(--hero-text);background:var(--hero-surface);border-color:var(--hero-border); transition:background-color var(--duration-tint) var(--easing),border-color var(--duration-tint) var(--easing), color var(--duration-tint) var(--easing)} .hero-tinted .btn-secondary:hover,.hero-tinted .btn-ghost:hover{border-color:var(--hero-accent)} /* the framed capture that sits in the hero and wears the same theme */ .hero-frame{border:1px solid var(--hero-border);border-radius:var(--radius-xl);overflow:hidden; background:var(--hero-surface);box-shadow:var(--hero-shadow); transition:background-color var(--duration-tint) var(--easing),border-color var(--duration-tint) var(--easing)} .hero-frame-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem; border-bottom:1px solid var(--hero-border);background:var(--hero-surface-strong)} .hero-frame-bar i{width:.7rem;height:.7rem;border-radius:50%;background:var(--hero-border)} .hero-frame-body{padding:1rem 1.1rem;font-family:var(--mono);font-size:var(--font-size-mono); line-height:1.9;color:var(--hero-text-muted)} .hero-frame-body .row{display:flex;gap:.6rem;align-items:center;white-space:nowrap} .hero-frame-body .row.is-selected{background:var(--hero-accent);color:var(--hero-text-on-accent); border-radius:var(--radius-sm);margin:0 -.4rem;padding:0 .4rem} .hero-frame-body .acc{color:var(--hero-accent)} .hero-frame-caption{margin:.7rem 0 0;font-size:var(--step--2);color:var(--hero-text-muted);text-align:center} @media (prefers-reduced-motion: reduce){ .hero-tinted,.hero-tinted *{transition:none!important} } /* ========================================================================== 19 · UTILITIES ========================================================================== */ .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .center{text-align:center} .stack > * + *{margin-top:var(--space-sm)} .cluster{display:flex;flex-wrap:wrap;gap:var(--space-2xs);align-items:center} /* .on-dark — a dark island on a light page: a screenshot frame, a terminal fragment, anything that keeps the app's own dark ground in both themes. The token mapping lives with the theme blocks in section 1. */ .on-dark{background:linear-gradient(160deg,var(--screenshot-canvas),var(--screenshot-canvas-deep));color:var(--text)} .terminal{background:var(--surface-inset);border:1px solid var(--border);border-radius:var(--radius-md); padding:.7rem .9rem;font-family:var(--mono);font-size:var(--font-size-mono);color:var(--text);overflow-x:auto} .terminal .prompt{color:var(--accent-secondary)} .terminal .added{color:var(--ok)} .terminal .modified{color:var(--warn)}