/* ========================================================================== Salesbuildr — Framer clone Fonts: Inter (body/UI), DM Sans 800 (display headings), Fragment Mono (eyebrow labels) ========================================================================== */ :root { /* -------------------------------------------------------------------- DESIGN TOKENS — single source of truth for every color in the site. No rule below this block should contain a raw color literal: every color, gradient, shadow and scrim is a var() defined here. Two blocks own the values: :root -> dark values (site default) html[data-theme="light"] -> light values (the migration target) A page opts into light by setting data-theme="light" on (index.html already does); everything else stays dark until it does. Adding a token: define the dark value here, then add the matching light value in the html[data-theme="light"] block below. Name by role (--surface-2, --link, --tint-amber), never by color. "same in both themes" tokens (--on-accent*, --scrim*, --bowtie-*, --logo-gradient, --media-bg) are deliberate: they sit on accents, gradients, photos or video, so they must not flip with the theme. -------------------------------------------------------------------- */ --bg: #0a0a0a; --bg-elevated: #131313; --card: #131313; --card-alt: #17171a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #f2f2f2; --text-muted: #a3a3a3; --text-dim: #868686; /* 2026-08-21: lightened from #707070 (~4.0:1) to clear WCAG AA 4.5:1 on --bg/--card/--card-alt (~5:1) — Lighthouse contrast fix */ --accent-blue: #0099ff; --accent-blue-strong: #2563eb; --accent-green: #16a34a; --accent-purple: #4f46e5; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 100px; --maxw: 1120px; --shadow-card: 0 1px 2px 0 rgba(0,0,0,0.4), 0 6px 16px -4px rgba(0,0,0,0.35); --accent-blue-soft: #0099ff; --accent-teal: #12b76a; --brand-gradient: linear-gradient(135deg, #0b3fb0, #0099ff 55%, #12b76a); /* == Added 2026-09-17: tokens extracted from hardcoded literals ======== */ /* Text */ --text-faint: #737373; /* meta/timestamps inside mocks */ --text-bright: #e8e8e8; /* brightest body text (mock timeline) */ /* Links, focus, in-mock accents */ --link: #5383ff; --link-soft: #c8d4ff; /* active nav branch label */ --link-on-tint: #7eb6ff; /* link text on a blue tint */ --focus-ring: #5383ff; --app-accent: #1f4bff; /* primary button inside the product mock */ --tint-app-accent: rgba(31,75,255,0.14); /* Fixed in both themes: sits on accents, gradients, photos or video */ --on-accent: #fff; --on-accent-92: rgba(255, 255, 255, 0.92); --on-accent-85: rgba(255, 255, 255, 0.85); --on-accent-78: rgba(255, 255, 255, 0.78); --on-accent-32: rgba(255, 255, 255, 0.32); --on-accent-28: rgba(255, 255, 255, 0.28); --on-accent-24: rgba(255, 255, 255, 0.24); --on-accent-14: rgba(255, 255, 255, 0.14); --on-media: #f5f5f5; /* label text over a media scrim */ --on-media-dim: rgba(255,255,255,.35); /* inactive carousel dot */ --media-bg: #000; /* letterbox behind video */ --logo-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8); /* Surfaces */ --surface-wash: rgba(255, 255, 255, 0.02); /* faintest raised wash (eyebrow, chips, th) */ --surface-wash-2: rgba(255,255,255,0.03); --surface-hover: rgba(255,255,255,0.05); --surface-raised: rgba(255,255,255,0.06); --surface-2: #1d1d20; /* inset panels, icon tiles, fields */ --surface-3: #0d0d0d; /* media frame / letterbox surface */ --surface-panel: #161618; /* slide-over drawer */ --surface-chip: #1a1a1d; /* pipeline stage chip */ --card-hover: #141414; --mock-bg: #0d0d0f; /* product mock shell */ --mock-nav-bg: #0a0a0c; /* product mock sidebar */ --surface-invert-hover: #cfcfcf; /* hover of the inverted (white) primary button */ --surface-alt-hover: #202024; /* hover of the secondary/dark button */ --header-bg: rgba(10, 10, 10, 0.8); --nav-panel-bg: rgba(10, 10, 10, 0.98); /* open mobile nav panel */ /* Borders */ --border-subtle: rgba(255,255,255,.06); --border-soft: rgba(255, 255, 255, 0.1); --border-mid: rgba(255, 255, 255, 0.12); --border-hover: rgba(255,255,255,0.24); --border-blue-soft: rgba(0,153,255,.35); --border-blue: rgba(0,153,255,.4); --border-blue-strong: rgba(0,153,255,.45); --ring-blue: rgba(0,153,255,.2); --ring-amber: rgba(245,169,31,.45); /* Status */ --status-green: #00ac4e; --status-red: #e12527; --status-red-soft: #e5484d; --status-amber: #f5a91f; --tint-green: rgba(0,172,78,0.14); --tint-amber: rgba(245,169,31,0.14); --tint-red: rgba(225,37,39,0.14); --tint-link: rgba(83,131,255,0.14); --tint-neutral: rgba(255,255,255,0.08); --tint-blue-14: rgba(0,153,255,.14); --tint-blue-16: rgba(0,153,255,.16); --tint-blue-18: rgba(0,153,255,.18); /* Accent tints: marketing pills, comparison tables, hero glows */ --tint-green-soft: rgba(22,163,74,0.08); --tint-purple-soft: rgba(79,70,229,0.08); --tint-brand-soft: rgba(37,99,235,0.1); --tint-brand-06: rgba(37,99,235,0.06); --tint-brand-08: rgba(37,99,235,0.08); --tint-brand-09: rgba(37,99,235,0.09); --tint-brand-16: rgba(37,99,235,0.16); --hero-glow: rgba(37,99,235,0.16); --page-hero-glow: rgba(37,99,235,0.14); --bg-fade: rgba(10,10,10,0); /* --bg at zero alpha, for gradient stops */ --card-fade: rgba(19,19,19,0); /* --card at zero alpha */ /* Bowtie diagram — always painted on saturated gradients, so these are the same in both themes. */ --bowtie-win-end: #16205c; --bowtie-grow-end: #0c3820; --bowtie-num-bg: rgba(0,153,255,0.12); --bowtie-pill-hover-bg: rgba(0, 153, 255, 0.28); --knot-line: #cfe6ff; --knot-kpi: #8ec9f7; --knot-border: rgba(37, 99, 235, 0.32); /* Hub tier chips */ --tier-premium: #7dd3a7; --tier-premium-bg: rgba(125, 211, 167, 0.12); --tier-premium-border: rgba(125, 211, 167, 0.35); --tier-advanced: #a5b4fc; --tier-advanced-bg: rgba(165, 180, 252, 0.12); --tier-advanced-border: rgba(165, 180, 252, 0.35); /* Scrims (over media/photos — same in both themes) */ --scrim: rgba(0,0,0,.45); --scrim-40: rgba(0, 0, 0, 0.4); --scrim-60: rgba(10,10,10,0.6); --scrim-72: rgba(0,0,0,.72); --scrim-fade: rgba(0,0,0,0); /* Shadows */ --shadow-header: none; --shadow-menu: 0 18px 48px rgba(0, 0, 0, 0.45); --shadow-mock: 0 40px 120px -20px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.03); --shadow-frame: 0 24px 60px rgba(0,0,0,.35); --shadow-drawer: -12px 0 32px rgba(0,0,0,.35); --shadow-win: 0 24px 48px -24px rgba(37, 99, 235, 0.45); --shadow-grow: 0 24px 48px -24px rgba(22, 163, 74, 0.4); --shadow-knot: 0 0 0 1px rgba(37, 99, 235, 0.15), 0 20px 40px -20px rgba(37, 99, 235, 0.5); /* Logo/icon/image filters — dark vs light rendering */ --logo-filter: brightness(0) invert(1) opacity(.72); /* for partner/PSA logo PNGs that are colored originals; pages use filter: var(--logo-filter) */ --logo-filter-muted: brightness(0) invert(1) opacity(.55); --icon-invert: 1; /* usage: filter: invert(var(--icon-invert)) */ --img-dim: .85; /* == Added 2026-09-17: app-mock redesign (light UI) tokens == */ --font-mono: "IBM Plex Mono", monospace; --mock-content-bg: #0d0d0f; /* content area gutter behind the cards */ --mock-sidebar-bg: #0a0a0c; /* left nav rail */ --mock-topbar-bg: #101014; /* 60px page-title bar */ --mock-card-bg: #131316; /* every card / table / board card */ --mock-chrome-bg: #16161a; /* browser chrome strip */ --mock-chrome-dot: rgba(255, 255, 255, 0.18); --mock-border: rgba(255, 255, 255, 0.10); --mock-border-soft: rgba(255, 255, 255, 0.06); /* table row hairlines */ --mock-text: #e8e8e8; --mock-text-muted: #a3a3a3; --mock-text-faint: #7d8797; /* captions, "Past 12 months" */ --mock-accent: #1f4bff; /* primary button fill — same in both themes */ --mock-accent-text: #8fa8ff; /* accent used as TEXT (links, active nav) */ --mock-accent-tint: rgba(31, 75, 255, 0.16); --mock-active-bg: rgba(31, 75, 255, 0.16); /* active nav wash */ --mock-hover: rgba(255, 255, 255, 0.05); --mock-tint-neutral: rgba(255, 255, 255, 0.05); /* kanban column trough */ --mock-status-draft: #8b95a5; --mock-status-sent: #5383ff; --mock-status-waiting: #f5a91f; --mock-status-approved: #00ac4e; --mock-status-expired: #e5484d; --mock-radius: 6px; --mock-radius-window: 10px; /* outer browser window */ --mock-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 64px -24px rgba(0, 0, 0, 0.7); --mock-nav-w: 245px; /* Fonts: reuse the site stack, never load a new webface. */ --mock-font: var(--font-sans, inherit); --mock-font-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); /* == Added 2026-09-17: central pass -- pills/tiles, status borders, roadmap tier, mock shadows, dot grid == */ --tint-blue-10: rgba(0,153,255,.10); /* pills, icon tiles, highlighted table columns at .08-.12 alpha */ --tint-purple-18: rgba(79,70,229,.18); --border-green: rgba(0,172,78,.20); --border-red-soft: rgba(225,37,39,.18); --border-amber: rgba(245,169,31,.18); --border-link-soft: rgba(88,140,255,.35); --tier-roadmap: #f0c674; --tier-roadmap-bg: rgba(240,198,116,.14); --tier-roadmap-border: rgba(240,198,116,.35); --shadow-mock-sm: 0 8px 24px rgba(0,0,0,.50); --shadow-mock-md: 0 16px 40px rgba(0,0,0,.58); --shadow-mock-lg: 0 28px 70px rgba(0,0,0,.65); --dot-grid: rgba(255,255,255,.09); } html[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-elevated: #f7f9fc; --card: #ffffff; --card-alt: #f0f3ff; --text: #0a0e17; --text-muted: #64748b; --text-dim: #8a94a6; --border: #e2e8f0; --border-strong: #cbd5e1; --accent-blue: #164df1; --accent-blue-strong: #0f3cc9; --accent-blue-soft: #0091ff; --accent-green: #16a34a; --accent-purple: #4f46e5; --accent-teal: #1debbb; --shadow-card: 0 1px 3px rgba(10, 14, 23, 0.06), 0 8px 24px rgba(10, 14, 23, 0.06); --brand-gradient: linear-gradient(135deg, #164df1 0%, #0091ff 55%, #1debbb 100%); /* == Added 2026-09-17: light values for the extracted tokens ========== PINNED: a few tokens keep their dark value because the component is already rendered on the live light homepage and this commit is a pure refactor (no visual change). Each is marked "pinned" — flipping it to the suggested value is a one-line change. */ /* Text */ --text-faint: #94a3b8; --text-bright: #0f172a; /* Links, focus, in-mock accents */ --link: #164df1; --link-soft: #2b46c9; --link-on-tint: #0f3cc9; --focus-ring: #164df1; --app-accent: #164df1; --tint-app-accent: rgba(22,77,241,0.10); /* Fixed in both themes (accents, gradients, photos, video) — do not theme */ --on-accent: #fff; --on-accent-92: rgba(255, 255, 255, 0.92); --on-accent-85: rgba(255, 255, 255, 0.85); --on-accent-78: rgba(255, 255, 255, 0.78); --on-accent-32: rgba(255, 255, 255, 0.32); --on-accent-28: rgba(255, 255, 255, 0.28); --on-accent-24: rgba(255, 255, 255, 0.24); --on-accent-14: rgba(255, 255, 255, 0.14); --on-media: #f5f5f5; --on-media-dim: rgba(255,255,255,.35); --media-bg: #000; --logo-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8); /* Surfaces */ --surface-wash: rgba(255, 255, 255, 0.02); /* pinned (eyebrow/chips on the light homepage); light value would be rgba(10,14,23,.02) */ --surface-wash-2: rgba(10,14,23,0.03); --surface-hover: rgba(10,14,23,0.04); --surface-raised: rgba(10,14,23,0.05); --surface-2: #f7f9fc; --surface-3: #eef2f7; --surface-panel: #ffffff; --surface-chip: #f0f3ff; --card-hover: #f7f9fc; --mock-bg: #ffffff; --mock-nav-bg: #f7f9fc; --surface-invert-hover: #cbd5e1; --surface-alt-hover: #e9eef8; --header-bg: rgba(255, 255, 255, 0.85); --nav-panel-bg: rgba(255, 255, 255, 0.98); /* Borders */ --border-subtle: #eef2f7; --border-soft: #e2e8f0; --border-mid: #cbd5e1; --border-hover: #cbd5e1; --border-blue-soft: rgba(22,77,241,.30); --border-blue: rgba(22,77,241,.35); --border-blue-strong: rgba(22,77,241,.40); --ring-blue: rgba(22,77,241,.18); --ring-amber: rgba(180,83,9,.45); /* Status */ --status-green: #15803d; --status-red: #b91c1c; --status-red-soft: #dc2626; --status-amber: #b45309; --tint-green: rgba(21,128,61,0.10); --tint-amber: rgba(180,83,9,0.10); --tint-red: rgba(185,28,28,0.10); --tint-link: rgba(22,77,241,0.10); --tint-neutral: rgba(10,14,23,0.06); --tint-blue-14: rgba(22,77,241,.10); --tint-blue-16: rgba(22,77,241,.12); --tint-blue-18: rgba(22,77,241,.14); /* Accent tints */ --tint-green-soft: rgba(22,163,74,0.08); --tint-purple-soft: rgba(79,70,229,0.08); --tint-brand-soft: rgba(22,77,241,0.08); --tint-brand-06: rgba(22,77,241,0.05); --tint-brand-08: rgba(22,77,241,0.06); --tint-brand-09: rgba(22,77,241,0.07); --tint-brand-16: rgba(22,77,241,0.12); --hero-glow: rgba(37,99,235,0.16); /* pinned: the live light hero glow */ --page-hero-glow: rgba(22,77,241,0.10); --bg-fade: rgba(255,255,255,0); --card-fade: rgba(255,255,255,0); /* Bowtie diagram — same in both themes (painted on gradients) */ --bowtie-win-end: #16205c; --bowtie-grow-end: #0c3820; --bowtie-num-bg: rgba(0,153,255,0.12); --bowtie-pill-hover-bg: rgba(0, 153, 255, 0.28); --knot-line: #1d4ed8; --knot-kpi: #2563eb; --knot-border: rgba(22, 77, 241, 0.32); /* Hub tier chips — themed for light contrast */ --tier-premium: #0e7c55; --tier-premium-bg: rgba(14, 124, 85, 0.10); --tier-premium-border: rgba(14, 124, 85, 0.35); --tier-advanced: #4338ca; --tier-advanced-bg: rgba(67, 56, 202, 0.10); --tier-advanced-border: rgba(67, 56, 202, 0.35); /* Scrims — same in both themes */ --scrim: rgba(0,0,0,.45); --scrim-40: rgba(0, 0, 0, 0.4); --scrim-60: rgba(10,10,10,0.6); --scrim-72: rgba(0,0,0,.72); --scrim-fade: rgba(0,0,0,0); /* Shadows */ --shadow-header: 0 1px 3px rgba(10, 14, 23, 0.08); --shadow-menu: 0 18px 48px rgba(10, 14, 23, 0.12); --shadow-mock: 0 1px 3px rgba(10,14,23,0.08), 0 20px 46px -18px rgba(10,14,23,0.18), inset 0 0 0 1px rgba(10,14,23,0.03); --shadow-frame: 0 24px 60px rgba(10,14,23,.12); --shadow-drawer: -12px 0 32px rgba(10,14,23,.12); --shadow-win: 0 24px 48px -24px rgba(37, 99, 235, 0.45); --shadow-grow: 0 24px 48px -24px rgba(22, 163, 74, 0.4); --shadow-knot: 0 0 0 1px rgba(37, 99, 235, 0.15), 0 20px 40px -20px rgba(37, 99, 235, 0.5); /* Logo/icon/image filters — dark vs light rendering */ --logo-filter: none; --logo-filter-muted: grayscale(1) opacity(.7); --icon-invert: 0; --img-dim: 1; /* == Added 2026-09-17: app-mock redesign (light UI) tokens == */ --mock-content-bg: #f6f8fb; --mock-sidebar-bg: #ffffff; --mock-topbar-bg: #ffffff; --mock-card-bg: #ffffff; --mock-chrome-bg: #f1f5f9; --mock-chrome-dot: #cbd5e1; --mock-border: #e6eaf0; --mock-border-soft: #eef1f6; --mock-text: #0f172a; --mock-text-muted: #616f85; --mock-text-faint: #8b96a8; --mock-accent: #1f4bff; --mock-accent-text: #1f4bff; --mock-accent-tint: #eef1ff; --mock-active-bg: #eef1ff; --mock-hover: #f6f8fb; --mock-tint-neutral: #f1f4f9; --mock-status-draft: #8b95a5; --mock-status-sent: #1f4bff; --mock-status-waiting: #b45309; --mock-status-approved: #0e9f57; --mock-status-expired: #dc2626; --mock-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 44px -22px rgba(15, 23, 42, 0.18); /* == Added 2026-09-17: central pass -- pills/tiles, status borders, roadmap tier, mock shadows, dot grid == */ --tint-blue-10: rgba(22,77,241,.08); --tint-purple-18: rgba(79,70,229,.12); --border-green: rgba(21,128,61,.28); --border-red-soft: rgba(185,28,28,.22); --border-amber: rgba(180,83,9,.28); --border-link-soft: rgba(22,77,241,.30); --tier-roadmap: #8a6d1f; --tier-roadmap-bg: rgba(240,198,116,.22); --tier-roadmap-border: rgba(138,109,31,.35); --shadow-mock-sm: 0 6px 18px rgba(10,14,23,.10); --shadow-mock-md: 0 12px 32px rgba(10,14,23,.14); --shadow-mock-lg: 0 24px 60px rgba(10,14,23,.18); --dot-grid: rgba(10,14,23,.07); } * { box-sizing: border-box; } /* overflow-x is intentionally NOT set here on html: when both html and body set a non-visible overflow-x, overflow-y computes to `auto` on both (CSS Overflow §3), producing two overlapping scroll containers and breaking position:sticky site-wide (.site-header stopped sticking on every page — 2026-08-25 fix). body's overflow-x: hidden below is kept (needed for the sub-400px header overflow mask, see @media (max-width: 400px) comment) and the legacy html/body propagation quirk keeps the horizontal clipping working with only body set. */ html { scroll-behavior: smooth; scroll-padding-top: 92px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: "Fragment Mono", "Inter", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 6px 14px; background: var(--surface-wash); margin-bottom: 14px; /* 2026-09-17: gap to a directly-following heading; .hero/.section-head/.page-hero/.hub-card/.hub-card-tags/.legal-wrap .eyebrow already set their own and override this */ } h1, h2, h3, h4 { font-family: "DM Sans", "Inter", sans-serif; font-weight: 800; line-height: 1.1; margin: 0; color: var(--text); } p { margin: 0; } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease; white-space: nowrap; } .btn svg { width: 16px; height: 16px; flex: none; } .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .btn-primary { background: var(--text); color: var(--bg); } .btn-primary:hover { background: var(--surface-invert-hover); transform: translateY(-1px); } .btn-dark { background: var(--card-alt); color: var(--text); border-color: var(--border-strong); } .btn-dark:hover { background: var(--surface-alt-hover); border-color: var(--border-hover); } .btn-ghost { background: transparent; color: var(--text); padding: 8px 4px; } .btn-ghost:hover { color: var(--text-muted); } .btn-small { padding: 9px 16px; font-size: 13px; } /* Header ------------------------------------------------------------------ */ header.site-header { position: sticky; top: 0; z-index: 1000; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header .wrap { max-width: 1200px; display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { display: flex; align-items: center; gap: 8px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 18px; color: var(--text); } .logo .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--logo-gradient); display: inline-flex; align-items: center; justify-content: center; } .logo .mark svg { width: 15px; height: 15px; } nav.main-nav { display: flex; align-items: center; gap: 24px; } nav.main-nav a { font-size: 14px; font-weight: 500; color: var(--text-muted); transition: color 0.15s ease; white-space: nowrap; } nav.main-nav a:hover { color: var(--text); } /* IA Option A — top-nav dropdowns (Marketing ship 2026-09-07; fix 2026-09-07) */ header.site-header, .site-header .wrap { overflow: visible; } nav.main-nav .nav-dd { position: relative; display: flex; align-items: center; } /* Invisible hover bridge so the pointer can travel trigger → menu without closing */ nav.main-nav .nav-dd::after { content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 14px; display: none; } nav.main-nav .nav-dd.is-open::after { display: block; } nav.main-nav .nav-dd-trigger { font: inherit; font-size: 14px; font-weight: 500; color: var(--text-muted); transition: color 0.15s ease; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit; white-space: nowrap; } nav.main-nav .nav-dd-trigger::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.7; margin-top: 2px; } nav.main-nav .nav-dd-trigger:hover, nav.main-nav .nav-dd.is-open .nav-dd-trigger { color: var(--text); } nav.main-nav .nav-dd-menu { display: none !important; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 240px; /* Desktop: no max-height/scroll — full menu visible (Victor 2026-09-07) */ max-height: none; overflow: visible; background: var(--card); border: 1px solid var(--border-mid); border-radius: 12px; padding: 6px 8px; box-shadow: var(--shadow-menu); z-index: 1200; } /* Long Platform (labeled) menus: 2 columns on laptop+ so nothing clips */ @media (min-width: 1024px) { nav.main-nav .nav-dd.is-open .nav-dd-menu:has(.nav-dd-label) { column-count: 2; column-gap: 12px; min-width: 460px; max-width: min(560px, 92vw); } nav.main-nav .nav-dd-menu:has(.nav-dd-label) .nav-dd-label, nav.main-nav .nav-dd-menu:has(.nav-dd-label) a { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } nav.main-nav .nav-dd-menu a { padding: 6px 10px; } nav.main-nav .nav-dd-label { padding: 8px 10px 2px; margin-top: 2px; } } /* Click-only open (is-open). Hover/focus-within alone must NOT open — Escape-safe. */ nav.main-nav .nav-dd.is-open .nav-dd-menu { display: block !important; } /* Escape / outside-click: force closed until pointer leaves (beats :hover and :focus-within) */ nav.main-nav .nav-dd.suppress-hover:hover .nav-dd-menu, nav.main-nav .nav-dd.suppress-hover:focus-within .nav-dd-menu, nav.main-nav .nav-dd.force-closed .nav-dd-menu, nav.main-nav .nav-dd.force-closed:hover .nav-dd-menu, nav.main-nav .nav-dd.force-closed:focus-within .nav-dd-menu, nav.main-nav .nav-dd.force-closed.is-open .nav-dd-menu { display: none !important; } nav.main-nav .nav-dd-menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; } nav.main-nav .nav-dd-menu a:hover, nav.main-nav .nav-dd-menu a:focus { background: var(--surface-2); color: var(--text); outline: none; } nav.main-nav .nav-dd-label { display: block; padding: 10px 10px 4px; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); pointer-events: none; user-select: none; } /* Base menu-toggle state: hidden by default (desktop, >=1024px). Defined here, before the mobile media queries below, so the max-width:1023px rules that reveal/style it (added 2026-09-17) win on source order instead of being shadowed by this unconditional rule. */ .menu-toggle { display: none; background: none; border: 1px solid var(--border-strong); border-radius: 8px; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text); } @media (max-width: 1023px) { header.site-header.nav-open nav.main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 76px; background: var(--nav-panel-bg); border-bottom: 1px solid var(--border-soft); padding: 8px 16px 16px; z-index: 1100; max-height: calc(100vh - 76px); overflow-y: auto; } header.site-header.nav-open .header-actions { display: none; } nav.main-nav .nav-dd { flex-direction: column; align-items: stretch; } nav.main-nav .nav-dd::after { display: none !important; } nav.main-nav .nav-dd-trigger { width: 100%; justify-content: space-between; padding: 12px 4px; font-size: 15px; } nav.main-nav .nav-dd-menu { position: static; transform: none; left: auto; top: auto; display: none !important; max-height: none; margin: 0 0 8px; box-shadow: none; } nav.main-nav .nav-dd:hover .nav-dd-menu { display: none; /* mobile: click only, not hover */ } nav.main-nav .nav-dd.is-open .nav-dd-menu { display: block !important; } nav.main-nav .nav-dd.force-closed .nav-dd-menu, nav.main-nav .nav-dd.force-closed.is-open .nav-dd-menu, nav.main-nav .nav-dd.force-closed:focus-within .nav-dd-menu { display: none !important; } nav.main-nav > a { padding: 12px 4px; display: block; } } /* Below 1024px the top nav collapses into the hamburger + drawer above (raised from 768px on 2026-09-17 to make room for the wider real Salesbuildr logo — see the 1024-1199px "compact header" block below). */ @media (max-width: 1023px) { nav.main-nav { display: none; } .menu-toggle { display: inline-flex; margin-left: 12px; } /* With nav.main-nav hidden, .wrap's justify-content:space-between would otherwise float .header-actions in the middle of the bar (logo | CTA | toggle). Pin it to the right, flush against the toggle, instead. */ .header-actions { margin-left: auto; } } /* Compact header (1024-1199px): the real logo (203x30 at >=1200px) is wider than the old mark+text lockup, so laptop widths need a smaller logo and tighter nav spacing to keep everything on one line without wrapping or overlap. Header height (76px) is unchanged. */ @media (min-width: 1024px) and (max-width: 1199px) { .site-header .logo img { height: 26px; width: auto; } nav.main-nav { gap: 14px; } nav.main-nav a, nav.main-nav .nav-dd-trigger { font-size: 14px; } .header-actions { gap: 12px; } .header-actions .btn { padding: 8px 14px; } } .header-actions { display: flex; align-items: center; gap: 20px; } .header-actions .login { font-size: 14px; font-weight: 500; color: var(--text-muted); } .header-actions .login:hover { color: var(--text); } /* Hero --------------------------------------------------------------------*/ .hero { position: relative; padding: 96px 0 40px; text-align: center; overflow: hidden; background: radial-gradient(60% 50% at 50% 0%, var(--hero-glow), var(--bg-fade) 70%), var(--bg); } .hero .eyebrow { margin-bottom: 24px; } .hero h1 { font-size: 64px; letter-spacing: -0.02em; max-width: 780px; margin: 0 auto; } .hero p.lead { max-width: 620px; margin: 24px auto 0; color: var(--text-muted); font-size: 18px; line-height: 1.6; } .hero-actions { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .hero-meta { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); } .hero-meta span { display: inline-flex; align-items: center; gap: 6px; } .hero-meta svg { width: 14px; height: 14px; color: var(--accent-green); } /* Product mockup (real app UI) --------------------------------------------*/ /* --- 2. Window shell --------------------------------------------------- */ .app-mock { margin: 64px auto 0; max-width: 980px; border-radius: var(--mock-radius-window); border: 1px solid var(--mock-border); background: var(--mock-card-bg); box-shadow: var(--mock-shadow); overflow: hidden; text-align: left; font-family: var(--mock-font); color: var(--mock-text); } .app-mock-head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--mock-chrome-bg); border-bottom: 1px solid var(--mock-border); } .app-mock-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--mock-chrome-dot); display: inline-block; flex: none; } .app-mock-head .app-mock-title { margin-left: 12px; padding: 3px 11px; border-radius: 100px; background: var(--mock-card-bg); border: 1px solid var(--mock-border); font-size: 10.5px; line-height: 1.4; color: var(--mock-text-muted); font-family: var(--mock-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-mock-body { display: grid; grid-template-columns: var(--mock-nav-w) 1fr; height: 468px; } /* --- 3. Sidebar -------------------------------------------------------- */ .app-nav { background: var(--mock-sidebar-bg); border-right: 1px solid var(--mock-border); padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; } .app-nav nav { display: flex; flex-direction: column; gap: 1px; flex: none; } .app-nav .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: var(--mock-radius); font-size: 13px; line-height: 1.35; font-weight: 500; font-family: inherit; color: var(--mock-text-muted); background: none; border: none; text-align: left; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .app-nav .nav-item svg { width: 16px; height: 16px; flex: none; color: currentColor; opacity: 0.85; } .app-nav .nav-item:hover:not(.active) { background: var(--mock-hover); color: var(--mock-text); } .app-nav .nav-item:focus-visible { outline: 2px solid var(--mock-accent); outline-offset: -2px; } .app-nav .nav-item.active { background: var(--mock-active-bg); color: var(--mock-accent-text); font-weight: 600; } .app-nav .nav-item.active svg { opacity: 1; } /* NEW: WORKSPACE / PORTAL group labels */ .app-nav-group { display: block; padding: 14px 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mock-text-faint); } .app-nav-group.is-collapsed { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; border-top: 1px solid var(--mock-border); padding-top: 16px; } .app-nav-group svg { width: 12px; height: 12px; opacity: 0.7; } /* NEW: account chip pinned to the bottom of the rail */ .app-nav-account { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px 8px 4px; border-top: 1px solid var(--mock-border); } .app-nav-account .avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--mock-accent-tint); color: var(--mock-accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; overflow: hidden; } .app-nav-account .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .app-nav-account .who b { font-size: 12px; font-weight: 600; color: var(--mock-text); } .app-nav-account .who span { font-size: 11px; color: var(--mock-text-faint); } /* --- 4. Content area + top bar ----------------------------------------- */ .app-main { padding: 22px 24px 26px; min-width: 0; height: 100%; overflow-y: auto; background: var(--mock-content-bg); } /* NEW: 60px page-title bar. Sits as the FIRST child of .app-main and bleeds back out over .app-main's padding, so no existing markup has to change. */ .app-topbar { display: flex; align-items: center; gap: 12px; height: 60px; margin: -22px -24px 20px; padding: 0 20px; background: var(--mock-topbar-bg); border-bottom: 1px solid var(--mock-border); } .app-topbar h1, .app-topbar h4, .app-topbar .app-topbar-title { margin: 0; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--mock-text); } .app-topbar .app-search { margin-left: auto; } .app-topbar .app-search ~ .app-topbar-bell { margin-left: 0; } .app-topbar-bell { margin-left: auto; width: 30px; height: 30px; flex: none; border: 1px solid var(--mock-border); border-radius: var(--mock-radius); background: var(--mock-card-bg); color: var(--mock-text-muted); display: inline-flex; align-items: center; justify-content: center; } .app-topbar-bell svg { width: 15px; height: 15px; } /* NEW: the quick-search box (top bar and toolbars) */ .app-search { display: inline-flex; align-items: center; gap: 8px; min-width: 190px; padding: 6px 10px; border: 1px solid var(--mock-border); border-radius: var(--mock-radius); background: var(--mock-card-bg); font-size: 12.5px; color: var(--mock-text-faint); } .app-search svg { width: 14px; height: 14px; flex: none; } .app-search kbd { margin-left: auto; font-family: var(--mock-font-mono); font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--mock-tint-neutral); color: var(--mock-text-faint); } /* Switchable views inside the mock */ .app-view { display: none; } .app-view.active { display: block; animation: app-view-in 0.22s ease; } @keyframes app-view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .app-mock-caption { margin: 18px auto 0; text-align: center; font-size: 12.5px; color: var(--text-dim, var(--mock-text-faint)); display: flex; align-items: center; justify-content: center; gap: 6px; } .app-mock-caption svg { width: 13px; height: 13px; color: var(--mock-accent); } /* --- 5. Buttons, chips, labels, tabs ----------------------------------- */ .app-toolbar { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 14px; } .app-toolbar h4 { margin: 0; font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--mock-text); } .app-toolbar .app-btn-primary, .app-toolbar .app-btn-ghost, .app-toolbar .app-search { flex: none; } .app-btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--mock-accent); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; padding: 8px 13px; border: 1px solid transparent; border-radius: var(--mock-radius); white-space: nowrap; } .app-btn-primary svg { width: 13px; height: 13px; } .app-btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: var(--mock-card-bg); border: 1px solid var(--mock-border); color: var(--mock-text); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; padding: 8px 13px; border-radius: var(--mock-radius); white-space: nowrap; } .app-btn-ghost svg { width: 13px; height: 13px; opacity: 0.7; } /* The app's one genuinely filled badge ("AI generated (Beta)", "1/2") */ .app-trial-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; color: var(--mock-accent-text); background: var(--mock-accent-tint); padding: 4px 9px; border-radius: 100px; white-space: nowrap; } /* Section heading ("Quick actions", "My summary") */ .app-section-label { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--mock-text); margin: 0 0 10px; } .app-section-label:not(:first-child) { margin-top: 20px; } /* Underlined sub-nav tabs (List view / Board view / Forecast) */ .app-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--mock-border); } .app-tabs .tab { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--mock-text-muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; margin-bottom: -1px; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .app-tabs .tab svg { width: 14px; height: 14px; opacity: 0.8; } .app-tabs .tab b { font-weight: 700; } .app-tabs .tab:hover:not(.active) { color: var(--mock-text); } .app-tabs .tab.active { background: none; color: var(--mock-text); border-bottom-color: var(--mock-accent); } /* --- 6. KPI cards ------------------------------------------------------ */ .app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .app-kpis.app-kpis-4 { grid-template-columns: repeat(4, 1fr); } .app-kpi { background: var(--mock-card-bg); border: 1px solid var(--mock-border); border-radius: var(--mock-radius); padding: 13px 15px 14px; } .app-kpi .l { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: var(--mock-text-muted); margin-bottom: 8px; } .app-kpi .v { display: block; font-family: var(--mock-font-mono); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; color: var(--mock-text); } .app-kpi .v i { font-style: normal; font-family: var(--mock-font-mono); font-size: 12px; font-weight: 500; color: var(--mock-text-faint); margin-left: 4px; } .app-kpi .kpi-sub { display: block; font-family: inherit; font-size: 11.5px; color: var(--mock-text-faint); margin-top: 8px; } .app-kpi .trend { font-size: 11.5px; font-weight: 600; margin-left: 6px; } .app-kpi .trend.up { color: var(--mock-status-approved); } .app-kpi .trend.down { color: var(--mock-status-expired); } .app-kpi.has-icon { display: flex; flex-direction: column; gap: 0; } .kpi-icon-row { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; min-height: 22px; } .kpi-icon-row .l { margin: 0; font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: 0.045em; text-transform: uppercase; color: var(--mock-text-muted); } /* NEW name .app-kpi-icon; .kpi-icon kept as the legacy alias */ .app-kpi-icon, .kpi-icon { width: 22px; height: 22px; border-radius: var(--mock-radius); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--mock-accent-tint); color: var(--mock-accent-text); } .app-kpi-icon svg, .kpi-icon svg { width: 13px; height: 13px; } .app-kpi-icon.neutral, .kpi-icon.neutral { background: var(--mock-tint-neutral); color: var(--mock-text-muted); } .app-kpi-icon.success, .kpi-icon.success { background: rgba(14, 159, 87, 0.12); color: var(--mock-status-approved); } .app-kpi-icon.warning, .kpi-icon.warning { background: rgba(245, 169, 31, 0.16); color: var(--mock-status-waiting); } .app-kpi-icon.destructive, .kpi-icon.destructive { background: rgba(220, 38, 38, 0.12); color: var(--mock-status-expired); } /* --- 7. Tables -------------------------------------------------------- */ .app-table { width: 100%; border-collapse: collapse; background: var(--mock-card-bg); border: 1px solid var(--mock-border); border-radius: var(--mock-radius); overflow: hidden; font-family: inherit; } .app-table th { text-align: left; background: var(--mock-content-bg); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mock-text-muted); padding: 9px 14px; border-bottom: 1px solid var(--mock-border); white-space: nowrap; } .app-table td { font-size: 12.5px; color: var(--mock-text-muted); padding: 11px 14px; border-bottom: 1px solid var(--mock-border-soft); vertical-align: middle; } .app-table tr:last-child td { border-bottom: none; } .app-table tbody tr:hover td { background: var(--mock-hover); } .app-table td:first-child { color: var(--mock-text); font-weight: 500; } .app-table td.mono { font-family: var(--mock-font-mono); color: var(--mock-text); font-variant-numeric: tabular-nums; } .app-table td.icp-cell { display: flex; align-items: center; } .app-table td .app-link, .app-table a { color: var(--mock-accent-text); text-decoration: none; font-weight: 500; } .app-table td small { display: block; font-size: 11px; color: var(--mock-text-faint); margin-top: 2px; } /* --- 8. Status: quiet grey text + a colored dot ------------------------ */ .status-pill { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; border-radius: 0; font-family: inherit; font-size: 12.5px; font-weight: 500; text-transform: none; color: var(--mock-text-muted); white-space: nowrap; } .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--mock-status-draft); } /* Modifier-level resets too: they must out-specify any leftover `.status-pill.draft { background: ... }` rule while both stylesheets are loaded side by side (and they are harmless once this block replaces it). */ .status-pill.draft, .status-pill.sent, .status-pill.internal, .status-pill.waiting, .status-pill.approved, .status-pill.won, .status-pill.rejected, .status-pill.expired { background: none; border: none; padding: 0; border-radius: 0; color: var(--mock-text-muted); } .status-pill.draft::before { background: var(--mock-status-draft); } .status-pill.sent::before { background: var(--mock-status-sent); } .status-pill.internal::before { background: var(--mock-status-sent); } .status-pill.waiting::before { background: var(--mock-status-waiting); } .status-pill.approved::before, .status-pill.won::before { background: var(--mock-status-approved); } .status-pill.rejected::before, .status-pill.expired::before { background: var(--mock-status-expired); } /* --- 9. Kanban board (NEW) -------------------------------------------- */ .app-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; overflow-x: auto; } .app-board-col { background: var(--mock-tint-neutral); border-radius: var(--mock-radius); padding: 9px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .app-board-col > header, .app-board-head { display: flex; align-items: center; gap: 7px; padding: 1px 3px 3px; } .app-board-head b { font-size: 12px; font-weight: 600; color: var(--mock-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-board-head .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--mock-status-draft); } .app-board-head .dot.sent { background: var(--mock-status-sent); } .app-board-head .dot.approved { background: var(--mock-status-approved); } .app-board-head .dot.won { background: var(--mock-status-approved); } .app-board-head .count { margin-left: auto; font-family: var(--mock-font-mono); font-size: 11px; color: var(--mock-text-faint); } .app-board-card { background: var(--mock-card-bg); border: 1px solid var(--mock-border); border-radius: var(--mock-radius); padding: 10px 11px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .app-board-card .co { font-size: 12.5px; font-weight: 600; color: var(--mock-accent-text); line-height: 1.3; } .app-board-card .sub { font-size: 11.5px; color: var(--mock-text-muted); line-height: 1.3; } .app-board-card .money { font-family: var(--mock-font-mono); font-size: 12.5px; font-weight: 600; color: var(--mock-text); font-variant-numeric: tabular-nums; } .app-board-card .status-pill { font-size: 11.5px; } /* --- 10. Variants ----------------------------------------------------- */ /* NEW: taller shell, for dashboard / board mocks that need the room */ .app-mock--tall .app-mock-body { height: 588px; } /* NEW: compact in-page variant (~120px rail, auto height) */ .app-mock--compact { margin: 0 auto; max-width: 780px; border-radius: 8px; } .app-mock--compact .app-mock-head { padding: 7px 12px; } .app-mock--compact .app-mock-body { grid-template-columns: 120px 1fr; height: auto; } .app-mock--compact .app-nav { padding: 8px 6px; } .app-mock--compact .app-nav nav { gap: 0; } .app-mock--compact .app-nav .nav-item { font-size: 11.5px; padding: 6px 7px; gap: 7px; } .app-mock--compact .app-nav .nav-item svg { width: 14px; height: 14px; } .app-mock--compact .app-nav-group { padding: 8px 7px 4px; font-size: 9px; } .app-mock--compact .app-main { padding: 16px 16px 18px; height: auto; overflow: visible; } .app-mock--compact .app-topbar { height: 46px; margin: -16px -16px 14px; padding: 0 14px; } .app-mock--compact .app-topbar h4, .app-mock--compact .app-topbar .app-topbar-title { font-size: 13.5px; } .app-mock--compact .app-kpis { gap: 10px; margin-bottom: 0; } .app-mock--compact .app-kpi { padding: 10px 12px 11px; } .app-mock--compact .app-kpi .v { font-size: 17px; } .app-mock--compact .app-kpi .l, .app-mock--compact .kpi-icon-row .l { font-size: 9.5px; } .app-mock--compact .app-kpi .kpi-sub { font-size: 10.5px; margin-top: 6px; } .app-mock--compact .app-kpi-icon, .app-mock--compact .kpi-icon { width: 19px; height: 19px; } .app-mock--compact .app-kpi-icon svg, .app-mock--compact .kpi-icon svg { width: 11px; height: 11px; } /* NEW: hero variant — icon-only 56px rail so the mock stays legible in a ~560px hero column. font-size:0 hides the bare text node next to the icon without any markup change. */ .app-mock--hero { margin: 0; max-width: 100%; border-radius: 8px; } .app-mock--hero .app-mock-body { grid-template-columns: 56px 1fr; height: auto; min-height: 340px; } .app-mock--hero .app-nav { padding: 10px 0; } .app-mock--hero .app-nav nav { gap: 2px; align-items: center; } .app-mock.app-mock--hero .app-nav .nav-item { font-size: 0; gap: 0; width: 34px; margin: 0 auto; padding: 8px 0; justify-content: center; } .app-mock.app-mock--hero .app-nav .nav-item svg { width: 17px; height: 17px; } .app-mock--hero .app-nav-group { display: none; } .app-mock--hero .app-nav-account { justify-content: center; padding: 10px 0 2px; } .app-mock--hero .app-nav-account .who { display: none; } .app-mock--hero .app-main { padding: 16px 16px 18px; height: auto; overflow: visible; } .app-mock--hero .app-topbar { height: 48px; margin: -16px -16px 14px; padding: 0 14px; } .app-mock--hero .app-topbar h4, .app-mock--hero .app-topbar .app-topbar-title { font-size: 14px; } .app-mock--hero .app-topbar .app-search { min-width: 0; flex: 1; max-width: 150px; } .app-mock--hero .app-kpis { gap: 8px; margin-bottom: 14px; } .app-mock--hero .app-kpi { padding: 10px 11px 11px; } .app-mock--hero .app-kpi .v { font-size: 17px; } .app-mock--hero .app-kpi .l, .app-mock--hero .kpi-icon-row .l { font-size: 9px; letter-spacing: 0.05em; } .app-mock--hero .app-table th { padding: 8px 11px; } .app-mock--hero .app-table td { padding: 9px 11px; font-size: 12px; } /* Overflow guard, 2026-09-17: grid items default to min-width:auto, which lets long content force the hero rail's 1fr column, and any nested .app-lines grid, wider than the hero column, clipping content at .app-mock's own overflow:hidden edge. min-width:0 lets them shrink to fit. */ .app-mock--hero .app-nav, .app-mock--hero .app-main { min-width: 0; } .app-mock--hero .app-lines > div { min-width: 0; } .app-mock--hero .app-lines { grid-template-columns: 1fr 225px; gap: 10px; } .app-mock--hero .app-lines .app-table th { font-size: 9px; letter-spacing: 0.03em; padding-left: 8px; padding-right: 4px; } .app-mock--hero .app-lines .app-table td { padding-left: 8px; padding-right: 4px; } /* --- 11. Quote-editor bits (NEW, used by pricing-books etc.) ---------- */ .app-lines { display: grid; grid-template-columns: 1fr 260px; gap: 12px; align-items: start; } .app-totals { background: var(--mock-card-bg); border: 1px solid var(--mock-border); border-radius: var(--mock-radius); padding: 14px 15px; } .app-totals .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--mock-text-muted); padding: 5px 0; } .app-totals .row b { font-family: var(--mock-font-mono); font-weight: 600; color: var(--mock-text); font-variant-numeric: tabular-nums; } .app-totals .row.grand { margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--mock-border); font-size: 13px; color: var(--mock-text); font-weight: 600; } .app-totals .row.grand b { font-size: 16px; } .app-price-was { font-family: var(--mock-font-mono); text-decoration: line-through; color: var(--mock-text-faint); margin-right: 7px; font-variant-numeric: tabular-nums; } .app-price-now { font-family: var(--mock-font-mono); font-weight: 600; color: var(--mock-accent-text); background: var(--mock-accent-tint); border-radius: 4px; padding: 1px 6px; font-variant-numeric: tabular-nums; } .app-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: var(--mock-radius); background: var(--mock-accent-tint); font-size: 12px; color: var(--mock-accent-text); } .app-note svg { width: 14px; height: 14px; flex: none; } .app-note > span { min-width: 0; } /* --- 12. Responsive: stack, sidebar out -------------------------------- */ @media (max-width: 640px) { .app-mock { margin-top: 32px; border-radius: 8px; } .app-mock-body, .app-mock--tall .app-mock-body, .app-mock--compact .app-mock-body, .app-mock--hero .app-mock-body { grid-template-columns: 1fr; height: auto; } .app-nav { display: none; } .app-main, .app-mock--compact .app-main, .app-mock--hero .app-main { padding: 14px 14px 18px; height: auto; max-height: 460px; overflow-y: auto; } .app-topbar, .app-mock--compact .app-topbar, .app-mock--hero .app-topbar { height: 46px; margin: -14px -14px 14px; padding: 0 12px; } .app-topbar .app-search { display: none; } .app-toolbar { flex-wrap: wrap; } .app-toolbar .app-search { order: 3; flex: 1 1 100%; min-width: 0; } .app-kpis, .app-kpis.app-kpis-4 { grid-template-columns: 1fr 1fr; } .app-board { grid-auto-flow: row; grid-auto-columns: auto; } .app-lines { grid-template-columns: 1fr; } .app-table { display: block; overflow-x: auto; white-space: nowrap; } .app-mock-head .app-mock-title { max-width: 150px; } } /* Badges strip -------------------------------------------------------------*/ .badges-strip { text-align: center; padding: 40px 0 96px; color: var(--text-dim); font-family: "Fragment Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } /* MSP video ------------------------------------------------------------------*/ .video-section { padding-top: 0; } .video-card { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--card); padding: 12px; box-shadow: var(--shadow-card); } .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--media-bg); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* YouTube lazy-load facade (perf + third-party-cookie avoidance, 2026-09-14): poster image + play button standing in for the real iframe until clicked. Reuses .video-embed / .story-cover's own aspect-ratio + overflow:hidden -- only the facade-specific bits (play button, cursor, focus ring) live here. See /assets/yt-facade.js for the click/keydown swap-in behavior. */ .yt-facade { cursor: pointer; } .yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; } .video-embed.yt-facade img { position: absolute; inset: 0; } .yt-facade-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .yt-facade-play svg { width: 68px; height: 68px; filter: drop-shadow(0 4px 14px var(--scrim)); } .yt-facade:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: var(--media-bg); } /* Section shared -----------------------------------------------------------*/ section { padding: 96px 0; } /* Anchor offset is handled by `html { scroll-padding-top: 92px; }` above (line 29) alone. A `scroll-margin-top: 92px` here used to duplicate that offset — browsers apply both the scroller's scroll-padding-top AND the target's own scroll-margin-top when landing on a fragment, so anchor nav (cold-load hash and same-page nav clicks alike) overshot by an extra 92px (184px total instead of 92px), landing the eyebrow pill well below the sticky header instead of just under it. Do not re-add scroll-margin-top to section[id] without removing/adjusting scroll-padding-top accordingly — see index.html's sb-anchorfix script for the additional safety net. */ .section-head { text-align: center; max-width: 620px; margin: 0 auto 64px; } .section-head .eyebrow { margin-bottom: 20px; } .section-head h2 { font-size: 40px; letter-spacing: -0.01em; } .section-head p { margin-top: 16px; color: var(--text-muted); font-size: 17px; line-height: 1.6; } .section-head .cta { margin-top: 28px; } /* Platform section ---------------------------------------------------------*/ .platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; position: relative; } .feature-card .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 40px; } .feature-card .icon svg { width: 20px; height: 20px; color: var(--text); } .feature-card h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 8px; } .feature-card p { color: var(--text-muted); font-size: 15px; line-height: 1.55; } .pill { position: absolute; top: 24px; right: 24px; font-family: "Fragment Mono", monospace; font-size: 11px; letter-spacing: 0.05em; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid currentColor; } .pill-new { color: var(--accent-green); background: var(--tint-green-soft); } .pill-beta { color: var(--accent-purple); background: var(--tint-purple-soft); } .pill-popular { color: var(--accent-blue-strong); background: var(--tint-brand-soft); } .compliance { margin-top: 40px; text-align: center; } .compliance p { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; } .compliance-list { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; color: var(--text-dim); font-size: 13px; } .compliance-list span { display: inline-flex; align-items: center; gap: 8px; } .compliance-list .sep { color: var(--border-strong); } /* Capabilities grid ---------------------------------------------------------*/ .capabilities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .cap-item { padding: 40px 24px; } /* The Prospecting tile is an (links to /prospecting) instead of the plain
the other 9 tiles use, so it inherits every rule above identically -- the only gap is that defaults to display:inline, which would collapse the block padding/centering. Restore block. */ a.cap-item { display: block; } .cap-item .icon { width: 44px; height: 44px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; } .cap-item .icon svg { width: 26px; height: 26px; color: var(--accent-blue); } .cap-item h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px; margin-bottom: 10px; } .cap-item p { color: var(--text-muted); font-size: 14px; line-height: 1.6; max-width: 260px; margin: 0 auto; } /* Testimonial ---------------------------------------------------------------*/ .testimonial-card { max-width: 760px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px; } .testimonial-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .testimonial-person { display: flex; align-items: center; gap: 12px; } .testimonial-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .avatar-fallback { width: 44px; height: 44px; border-radius: 50%; background: var(--logo-gradient); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; flex: none; } .testimonial-person .name { font-weight: 600; font-size: 15px; } .testimonial-person .role { font-size: 13px; color: var(--text-dim); } .testimonial-logo { color: var(--text-dim); font-size: 13px; display: flex; align-items: center; gap: 6px; } .testimonial-logo svg { width: 16px; height: 16px; } .testimonial-card blockquote { margin: 0 0 32px; font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 24px; line-height: 1.4; letter-spacing: -0.01em; } .testimonial-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tstat { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; } .tstat .num { font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 22px; } .tstat .num.green { color: var(--accent-green); } .tstat .desc { font-size: 12px; color: var(--text-dim); margin-top: 4px; } /* The bow tie ---------------------------------------------------------------*/ .bowtie-viz { position: relative; margin: 12px 0 8px; /* Reserves room below the row (which is a fixed 250px tall — see .bt-half's min-height) for the .bt-loop arc + its label to dip under the whole diagram without overlapping any card. */ padding-bottom: 88px; } .bt-row { display: flex; align-items: stretch; gap: 0; } .bt-half { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; /* flex-start (not center): each .bt-zone now carries a fixed-height pill row + top-aligned subtext row (see .bt-zone below), so top-aligning the zones here is what keeps all 6 stage pills/subtexts on shared baselines across the row regardless of how many lines a one-liner wraps to. */ align-items: flex-start; justify-content: space-evenly; min-height: 250px; /* Outer (far-from-knot) padding: vw coefficient chosen so the clamp ceiling is reached by ~1075px, i.e. this is a CONSTANT 26px at every viewport >=1160px (1200/1440/1920 all share the fixed 1080px .viz width, so a vw-driven value would otherwise silently drift between them -- pinning the ceiling below 1160 removes that drift). */ padding: 44px clamp(16px, 2.2vw, 22px) 26px; /* Even, deliberate spacing between the three zones in each half. */ gap: clamp(10px, 1.6vw, 18px); } .bt-half.bt-win { background: linear-gradient(160deg, var(--accent-blue-strong) 0%, var(--bowtie-win-end) 100%); /* Gentler taper than the original 13%/87% inset: still reads as a converging bowtie edge, but the diagonal now only dips ~6% of the row height over the full half width, so it stays well clear of the zone content without needing large compensating padding. */ clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%); /* Inner (knot-side) padding: only needs to clear the now-gentle 6% taper, so it can shrink a lot from the old 54px ceiling -- freeing real width for the three zones. Ceiling pinned below 1160px so 1200/1440/1920 render identically. */ padding-right: clamp(18px, 2.2vw, 22px); box-shadow: var(--shadow-win); } .bt-half.bt-earn { background: linear-gradient(160deg, var(--accent-green) 0%, var(--bowtie-grow-end) 100%); clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%); padding-left: clamp(18px, 2.2vw, 22px); box-shadow: var(--shadow-grow); } .bt-side { position: absolute; top: 20px; font-family: "DM Sans", "Inter", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.22em; color: var(--on-accent-92); } .bt-half.bt-win .bt-side { left: clamp(16px, 2.6vw, 34px); } .bt-half.bt-earn .bt-side { right: clamp(16px, 2.6vw, 34px); } .bt-zone { position: relative; flex: 1 1 0; min-width: 0; /* Two explicit rows instead of a centered flex column: row 1 (.bt-pill) is a fixed-height band shared by all 6 zones, row 2 (.bt-line) has a floor height but top-aligns its text via align-items: start, so a one-liner that wraps to 2-3 lines grows downward only — it never shifts where the pill or the subtext STARTS. Combined with .bt-half's align-items: flex-start above, this keeps all 6 pills on one shared baseline and all 6 subtexts starting on the baseline directly beneath, regardless of wrap length. */ display: grid; grid-template-rows: auto minmax(36px, auto); align-items: start; justify-items: center; row-gap: 10px; /* Fixed (not vw-scaled): this is just breathing room between the pill and the dashed divider, not something that needs to track viewport width, and a fixed value removes another source of drift. */ padding: 0 6px; text-align: center; } .bt-zone + .bt-zone::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 68%; border-left: 1px dashed var(--on-accent-28); } .bt-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--bowtie-num-bg); color: var(--accent-blue); font-family: "Fragment Mono", monospace; font-size: 11px; margin-bottom: 14px; } /* .bt-pill-h is the (non-visual) heading wrapper -- keeps the "01 Prospecting" etc. label as a real h3 for document outline / a11y, while the actual clickable, styled pill lives on the it wraps (see index.html). Fixed width here mirrors .bt-pill's own width so the grid item sizes identically to the pre-link markup regardless of how a browser resolves an unstretched grid item's intrinsic size. */ .bt-pill-h { margin: 0; width: 108px; } .bt-pill { margin: 0; /* Fixed width (not text-driven): every pill is the same size regardless of label length, sized to comfortably fit the longest label ("Prospecting") with padding to spare. This is what keeps all six zones equal-width without any of them overflowing into their neighbour -- the old auto-width nowrap pill let "Prospecting" blow past its zone's box and collide with the divider/Pipeline. */ width: 108px; box-sizing: border-box; border-radius: var(--radius-pill); color: var(--on-accent); border: 1px solid var(--on-accent-32); background: var(--on-accent-14); font-family: "DM Sans", "Inter", sans-serif; font-weight: 800; font-size: 13px; line-height: 1.25; padding: 10px 8px; text-align: center; white-space: nowrap; /* Pill is now a real link (was a plain h3) -- these three make it read and behave like the rest of the site's chip/pill links rather than a default inline anchor. */ display: inline-block; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .bt-pill:hover, .bt-pill:focus-visible { background: var(--bowtie-pill-hover-bg); border-color: var(--accent-blue); text-decoration: underline; text-decoration-color: var(--on-accent-85); text-underline-offset: 3px; } .bt-pill:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } .bt-pill .num { display: block; font-family: "Fragment Mono", monospace; font-weight: 400; font-size: 10px; letter-spacing: 0.14em; opacity: 0.75; margin-bottom: 2px; /* Hovering/focusing the pill underlines the label text (above) -- the stage number keeps its own line undecorated so only "Prospecting" etc. reads as the link text. */ text-decoration: none; } .bt-line { color: var(--on-accent-92); font-size: 12.5px; line-height: 1.4; text-shadow: 0 1px 3px var(--scrim); margin: 0; max-width: 22ch; } .bt-kpi { display: block; font-family: "Fragment Mono", monospace; font-size: 10px; letter-spacing: 0.01em; color: var(--on-accent-78); border-top: 1px dashed var(--on-accent-32); padding-top: 8px; margin-top: 2px; line-height: 1.4; text-shadow: 0 1px 3px var(--scrim-40); } .bt-knot { flex: 0 0 auto; /* Ceiling pinned below 1160px so 1200/1440/1920 all render at a constant 164px -- freeing width back to the zones versus the old 196px ceiling, with no drift between those three widths. */ width: clamp(150px, 15vw, 164px); position: relative; z-index: 2; background: linear-gradient(180deg, var(--card-alt) 0%, var(--card) 100%); border: 1px solid var(--accent-blue-strong); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 22px 14px; transform: translateY(-6px); box-shadow: var(--shadow-knot); } .bt-knot-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); margin-bottom: 4px; } .bt-knot-icon svg { width: 22px; height: 22px; } .bt-knot-title { margin: 0; font-family: "Fragment Mono", monospace; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; color: var(--text); } .bt-knot-sub { font-family: "Inter", sans-serif; font-size: 10.5px; color: var(--text-muted); } .bt-knot .bt-line { color: var(--knot-line); font-size: 11.5px; text-shadow: none; margin-top: 4px; max-width: none; } .bt-knot .bt-kpi { color: var(--knot-kpi); border-top-color: var(--knot-border); text-shadow: none; } /* Loop-back arc: 06 Growth -> 02 Pipeline ("expansion feeds new pipeline"). viewBox is 1080x338 to match .bowtie-viz's real rendered box (1080px wide content area from .wrap's 1120px max-width, 250px row height + 88px reserved dip space) at every viewport >= ~1160px — i.e. exactly the 1200/1440/1920 widths this must hold up at — so the path's user- space coordinates line up with real pixels 1:1 there with no distortion. preserveAspectRatio="none" keeps it filling the box (rather than letterboxing) on narrower desktop widths where the ratio drifts slightly before the 900px breakpoint hides it entirely. */ .bt-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .bt-loop-path { fill: none; stroke: url(#bt-loop-gradient); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 6; animation: bt-loop-flow 6s linear infinite; } @keyframes bt-loop-flow { /* -240 = 20 full "6 6" dash+gap cycles, so the loop restarts seamlessly. Negative direction moves dashes forward along the path (which is drawn Growth -> Pipeline), i.e. visually right-to-left, 06 back to 02. */ to { stroke-dashoffset: -240; } } .bt-loop-stop-start { stop-color: var(--accent-green); } .bt-loop-stop-end { stop-color: var(--accent-blue); } .bt-loop-arrowhead { fill: var(--accent-blue); } .bt-loop-label { font-family: "Fragment Mono", "Inter", monospace; font-size: 10.5px; letter-spacing: 0.08em; fill: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .bt-loop-path { animation: none; } } @media (max-width: 900px) { .bt-loop { display: none; } } .bowtie-caption { max-width: 620px; margin: 36px auto 0; text-align: center; } .bowtie-caption .cap-main { font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 20px; color: var(--text); margin-bottom: 10px; } .bowtie-caption .cap-sub { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; } /* Bowtie stage map ----------------------------------------------------------*/ /* Chip links mirroring the bowtie's own column geometry above: same padding/gap/knot-width clamp()s as .bt-half/.bt-knot, so each .mb-col lands directly under its .bt-zone at every viewport >=901px (formulas match, not just three checkpoint widths). Markup sits as a sibling AFTER .bowtie-viz closes (not inside it) so it never interacts with .bowtie-viz's reserved padding-bottom / the absolutely-positioned .bt-loop arc that dips into that space -- see the HTML comment above .mapping-band in index.html. Do not fold this into .bt-* rules. */ .mapping-band { margin: 28px 0 0; } .mapping-band-label { display: block; text-align: center; font-family: "Fragment Mono", "Inter", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; } .mb-row { display: flex; align-items: flex-start; gap: 0; } .mb-half { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; gap: clamp(10px, 1.6vw, 18px); padding: 0 clamp(16px, 2.2vw, 22px); } .mb-half.mb-win { padding-right: clamp(18px, 2.2vw, 22px); } .mb-half.mb-earn { padding-left: clamp(18px, 2.2vw, 22px); } .mb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .mb-knot { flex: 0 0 auto; width: clamp(150px, 15vw, 164px); display: flex; flex-direction: column; align-items: center; gap: 8px; } .mb-chip { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; font-family: "Fragment Mono", "Inter", monospace; font-size: 10.5px; letter-spacing: 0.03em; line-height: 1.3; text-align: center; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-wash); padding: 6px 10px; transition: color 0.15s ease, border-color 0.15s ease; } .mb-chip:hover, .mb-chip:focus-visible { color: var(--accent-blue); border-color: var(--accent-blue); } .mb-chip:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } /* PSA Sync used to be absolutely positioned to span the 04/05 boundary under .mb-earn (see git history) -- the owner reclassified it as a Commit-stage capability (the signed quote handing to the PSA IS the Commit moment), so it's now a normal third chip inside .mb-knot, stacked under Sales Workflows / Native Integrations via that container's existing flex-column layout. No positioning hack needed. */ .mb-group-label { display: none; } .steps-cta { text-align: center; margin: 32px 0 40px; } .hub-intro { text-align: center; color: var(--text-muted); font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 18px; margin-bottom: 24px; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } /* Foundation hub grid — 9 cards (Fri 11 Sep 2026) */ .hub-grid-foundation { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Platform capability cards under bowtie (Sun 13 Sep 2026) */ .platform-cap-band { margin: 32px 0 8px; } .platform-cap-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .platform-cap-intro { color: var(--text-muted); font-size: 14px; line-height: 1.55; max-width: 52rem; margin: 0 0 18px; } .hub-grid-platform { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .hub-grid-platform { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .hub-grid-platform { grid-template-columns: 1fr; } } @media (max-width: 900px) { .hub-grid-foundation { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .hub-grid-foundation { grid-template-columns: 1fr; } } .hub-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; } .hub-card .eyebrow { font-size: 10px; padding: 4px 10px; margin-bottom: 14px; } /* Foundation hub tier chips (Sun 13 Sep 2026) */ .hub-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; } .hub-card-tags .eyebrow { margin-bottom: 0; } .hub-tier { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; line-height: 1.2; } .hub-tier-premium { color: var(--tier-premium); background: var(--tier-premium-bg); border: 1px solid var(--tier-premium-border); } .hub-tier-advanced { color: var(--tier-advanced); background: var(--tier-advanced-bg); border: 1px solid var(--tier-advanced-border); } .hub-card h4 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 8px; } .hub-card p { color: var(--text-muted); font-size: 13px; line-height: 1.55; } /* Pricing ---------------------------------------------------------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .price-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; position: relative; } .price-card.featured { border-color: var(--accent-blue-strong); background: linear-gradient(180deg, var(--tint-brand-08), var(--card-fade) 40%), var(--card); transform: translateY(-8px); } .price-card .plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .price-card .plan-name { font-weight: 600; font-size: 16px; } .price-card .amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .price-card .amount .num { font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 38px; } .price-card .amount .period { color: var(--text-dim); font-size: 14px; } .price-card .currency { font-size: 12px; color: var(--text-dim); margin-bottom: 20px; } .price-card .desc { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin-bottom: 24px; min-height: 66px; } .price-card ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } .price-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); } .price-card li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-blue); } .price-card .btn { width: 100%; justify-content: center; } .pricing-footnote { text-align: center; margin-top: 32px; color: var(--text-dim); font-size: 13px; } /* Customer stories --------------------------------------------------------*/ .stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .story-card { border-radius: var(--radius-md); overflow: hidden; background: var(--card); border: 1px solid var(--border); } .story-cover { aspect-ratio: 16/9; overflow: hidden; position: relative; } .story-cover img { width: 100%; height: 100%; object-fit: cover; } .story-cover .logo-badge { position: absolute; left: 16px; top: 16px; background: var(--scrim-60); backdrop-filter: blur(4px); border-radius: 8px; padding: 8px 10px; } .story-cover .logo-badge img { height: 18px; width: auto; } .story-body { padding: 24px; } .story-tag { font-family: "Fragment Mono", monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; display: inline-block; } .story-body h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px; margin-bottom: 8px; line-height: 1.4; } .story-body p { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin-bottom: 20px; } .story-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); transition: gap 0.15s ease; } .story-link svg { width: 14px; height: 14px; } .story-card:hover .story-link { gap: 10px; color: var(--accent-blue); } .stories-head-cta { text-align: center; margin-bottom: 24px; } /* About / Team ---------------------------------------------------------------*/ .about-fit { display: inline-block; max-width: 100%; margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 10px 20px; background: var(--surface-wash); } .about-fit strong { color: var(--text); font-weight: 600; } .team-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .team-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; } .team-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; } .team-name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: var(--text); } .team-role { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; } /* CTA / footer --------------------------------------------------------------*/ .cta-band { text-align: center; padding: 96px 0; } .cta-band h2 { font-size: 36px; margin-bottom: 32px; } footer.site-footer { border-top: 1px solid var(--border); padding: 64px 0 32px; } .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 48px; } .footer-brand { max-width: 280px; } .footer-brand .logo { margin-bottom: 12px; } .footer-brand p { color: var(--text-dim); font-size: 14px; line-height: 1.6; } .footer-social { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-dim); transition: color 0.15s ease, border-color 0.15s ease; } .footer-social a svg { width: 15px; height: 15px; } .footer-social a:hover { color: var(--text); border-color: var(--border-strong); } .footer-links { display: flex; gap: 40px; flex-wrap: wrap; } .footer-col { min-width: 140px; } .footer-col h5 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; font-weight: 500; } .footer-col a { display: block; font-size: 14px; color: var(--text-muted); padding: 6px 0; } .footer-col a:hover { color: var(--text); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-dim); } .footer-bottom .legal { display: flex; gap: 24px; } .footer-bottom .legal a:hover { color: var(--text); } /* Responsive ----------------------------------------------------------------*/ @media (max-width: 900px) { .platform-grid { grid-template-columns: 1fr; } .capabilities-grid { grid-template-columns: repeat(2, 1fr); } .bt-row { flex-direction: column; gap: 14px; } .bt-half { flex: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 44px clamp(18px, 5vw, 28px) 20px; border-radius: var(--radius-md); box-shadow: none; gap: 16px; } .bt-half.bt-win, .bt-half.bt-earn { clip-path: none; padding-left: clamp(18px, 5vw, 28px); padding-right: clamp(18px, 5vw, 28px); } .bt-side { position: static; left: auto; right: auto; margin-bottom: -8px; } .bt-zone { padding: 14px 4px 0; } .bt-zone + .bt-zone::before { display: none; } .bt-zone + .bt-zone { border-top: 1px dashed var(--on-accent-24); } .bt-line { max-width: none; } .bt-knot { width: 100%; transform: none; margin: 2px 0; } /* Stage map: abandon positional column alignment below the bowtie's own stacking breakpoint. .mb-col has no visual box of its own (just centers a chip or two), so display:contents un-wraps it, promoting its chip(s) to be direct children of .mb-half/.mb-knot -- which flattens the former 3-column grid into one simple wrapped chip list per group, with no leftover empty column boxes. */ .mapping-band { margin-top: 24px; } .mb-row { flex-direction: column; gap: 20px; } .mb-half, .mb-knot { width: 100%; padding: 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; } .mb-col { display: contents; } .mb-group-label { display: block; flex: 1 0 100%; font-family: "Fragment Mono", "Inter", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; } .hub-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .price-card.featured { transform: none; } .stories-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { flex-direction: column; } } @media (max-width: 768px) { .hero { padding: 64px 0 24px; } .hero h1 { font-size: 40px; } section { padding: 64px 0; } .section-head h2 { font-size: 30px; } .capabilities-grid { grid-template-columns: 1fr; } .compliance-list { gap: 12px; } .cta-band h2 { font-size: 28px; } .footer-links { gap: 32px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .testimonial-card { padding: 28px; } .testimonial-stats { grid-template-columns: 1fr; } .app-main { padding: 16px; } } @media (max-width: 480px) { .hero h1 { font-size: 32px; } .hero p.lead { font-size: 16px; } .hero-actions { flex-direction: column; gap: 12px; } .team-grid { grid-template-columns: 1fr; } } @media (max-width: 400px) { /* Logo + "Log in" + "Book a demo" + hamburger no longer fit in one row on very narrow phones (~320-375px) and were overflowing past the edge, hidden only by the html/body overflow-x mask. Drop the secondary "Log in" link here to give the primary CTA and menu button room. */ .header-actions .login { display: none; } } /* Legal pages (privacy.html, terms.html) ------------------------------------*/ .legal-main { padding: 64px 0 96px; } .legal-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; } .legal-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin-bottom: 32px; } .legal-back svg { width: 14px; height: 14px; } .legal-back:hover { color: var(--text); } .legal-wrap .eyebrow { display: block; margin-bottom: 12px; } .legal-wrap h1 { font-size: 40px; line-height: 1.15; margin-bottom: 12px; } .legal-updated { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; } .legal-intro { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--border); } .legal-body h2 { font-size: 22px; margin: 40px 0 14px; } .legal-body h2:first-child { margin-top: 0; } .legal-body h3 { font-size: 16px; margin: 22px 0 8px; color: var(--text); } .legal-body p { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin-bottom: 14px; } .legal-body ul, .legal-body ol { margin: 0 0 14px 20px; color: var(--text-muted); font-size: 15px; line-height: 1.7; } .legal-body li { margin-bottom: 6px; } .legal-body strong { color: var(--text); font-weight: 600; } .legal-body a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; } .legal-note { margin-top: 48px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--text-dim); } .legal-cross-link { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); } .legal-cross-link a { color: var(--accent-blue); } @media (max-width: 768px) { .legal-wrap h1 { font-size: 30px; } .legal-main { padding: 48px 0 64px; } } /* ========================================================================== Pricing page (pricing.html) — page-specific additions ========================================================================== */ .page-hero { padding: 80px 0 24px; text-align: center; background: radial-gradient(60% 50% at 50% 0%, var(--page-hero-glow), var(--bg-fade) 70%), var(--bg); } .page-hero .eyebrow { margin-bottom: 20px; } .page-hero h1 { font-size: 52px; letter-spacing: -0.02em; max-width: 680px; margin: 0 auto; } .page-hero p.lead { max-width: 600px; margin: 20px auto 0; color: var(--text-muted); font-size: 17px; line-height: 1.6; } /* Pricing cards — stat chips, grouped features, quote, links --------------*/ .pricing-grid-detailed .price-card { padding: 32px 32px 36px; } /* Reserve a fixed-height badge row so tier name + price line up across all three cards, whether or not a card carries the "MOST POPULAR" pill. */ .pricing-grid-detailed .price-card .plan-head { min-height: 30px; } /* CTA alignment: let the footer (button + testimonial + links) stick to the card bottom instead of feature-groups absorbing the slack unevenly, and pin the quote block to a consistent height so the button's own position doesn't shift with testimonial length. */ .pricing-grid-detailed .price-card .feature-groups { flex: 0 1 auto; } .pricing-grid-detailed .price-card .btn { margin-top: auto; } .pricing-grid-detailed .price-card .price-quote { min-height: 142px; } .pricing-grid-detailed .price-card .price-quote blockquote { min-height: 63px; } .price-card .price-stats { display: flex; gap: 10px; margin: 0 0 22px; } .stat-chip { flex: 1; min-width: 0; background: var(--surface-wash-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; } .stat-chip .stat-label { display: block; font-family: "Fragment Mono", monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } .stat-chip .stat-value { display: block; font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 14px; line-height: 1.3; color: var(--text); } .price-card .plan-includes { font-size: 13px; font-style: italic; color: var(--text-dim); margin: -6px 0 16px; } .price-card .feature-groups { flex: 1; display: flex; flex-direction: column; margin-bottom: 24px; } .feature-group-title { font-family: "Fragment Mono", monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); margin: 18px 0 10px; } .feature-group:first-child .feature-group-title { margin-top: 0; } .price-card .feature-groups ul { margin: 0; gap: 10px; } .price-card .price-quote { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; } .price-card .price-quote blockquote { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; font-style: italic; color: var(--text-muted); } .price-card .price-quote cite { display: block; font-style: normal; font-size: 12.5px; color: var(--text-dim); } .price-card .price-quote cite strong { color: var(--text); font-weight: 600; } .price-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; } .price-links a { font-size: 12.5px; color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; } .price-links a:hover { color: var(--text); } .pricing-footnote a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; } /* Currency switcher (pricing.html) ------------------------------------------ Geo-detected default, user choice persisted via localStorage. See the inline script near the end of pricing.html/index.html. */ .currency-switcher { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 32px 0 48px; } .currency-switcher-label { font-family: "Fragment Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .currency-switcher-group { display: inline-flex; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; flex-wrap: wrap; justify-content: center; } .currency-pill { font-family: "Fragment Mono", monospace; font-size: 12px; letter-spacing: 0.03em; color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .currency-pill:hover { color: var(--text); } .currency-pill.is-active { background: var(--accent-blue-strong); color: var(--on-accent); } /* Small centered caption line under .pricing-footnote. Originally the homepage's no-selector currency caption; now reused on index.html (which has its own full currency switcher, matching pricing.html) as the "see full comparison + FAQ" link to pricing.html. */ .pricing-currency-caption { text-align: center; margin-top: 10px; color: var(--text-dim); font-size: 12.5px; } .pricing-currency-caption a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 480px) { .currency-switcher { gap: 8px; } .currency-pill { padding: 6px 11px; font-size: 11.5px; } } /* Comparison table ----------------------------------------------------------*/ .compare-section { padding-top: 48px; } .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); width: 100%; max-width: 100%; } .compare-table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: visible; } .compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: normal; vertical-align: top; max-width: 220px; } .compare-table thead th { white-space: nowrap; } .compare-table thead th { font-family: "Fragment Mono", monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--text-dim); background: var(--surface-wash); } .compare-table tbody th { font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px; color: var(--text-muted); } .compare-table tbody td { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; color: var(--text); } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table td.dash { color: var(--text-dim); } .compare-table th:nth-child(3), .compare-table td:nth-child(3) { background: var(--tint-brand-06); } /* pricing.html: strengthen the Advanced-column highlight — it's the plan tier being upsold, so it should read clearly against the dark theme. */ .pricing-compare th:nth-child(3), .pricing-compare td:nth-child(3) { background: var(--tint-brand-09); } .pricing-compare thead th:nth-child(3) { background: var(--tint-brand-16); border-top: 2px solid var(--accent-blue-strong); } /* FAQ -----------------------------------------------------------------------*/ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; } .faq-item:first-child { border-top: 1px solid var(--border); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--text-dim); } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { margin-top: 12px; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; max-width: 640px; } .faq-outro { text-align: center; margin-top: 32px; color: var(--text-muted); font-size: 14px; } .faq-outro a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; } .cta-band-sub { color: var(--text-muted); font-size: 16px; margin: -16px auto 32px; max-width: 480px; } /* Responsive ------------------------------------------------------------- */ @media (max-width: 900px) { .price-card .price-stats { flex-direction: column; } } @media (max-width: 768px) { .page-hero { padding: 56px 0 16px; } .page-hero h1 { font-size: 36px; } .page-hero p.lead { font-size: 16px; } .faq-item summary { font-size: 15px; } .compare-section { padding-top: 24px; } } /* Cookie consent banner (sb-tracking) ------------------------------------ Paired with the inline "sb-tracking" script that sits before on every page. Do not rename these classes without updating that script. Compact bottom-left toast (2026-09-14, was bottom-centered/full-width): the old 560px-wide, auto-centered strip overlapped the hero dashboard's KPI numbers at 1440x900 on first load. Docked left/narrow instead — position/size only, all Decline/Accept markup, classes and JS handlers above are unchanged. Below-480px slim single-row layout is untouched. Width note: verified in a real 1440x900 render — the hero dashboard card is centered (max-width:960px), leaving only a ~240px flank to the left of it. A ~360-400px-wide toast still reaches ~150px into that card and covers the first KPI's number, so width is capped at 240px here (left:16 + 240 = right edge 256px, comfortably clear of the KPI column which starts ~276px) to fully clear the KPI numbers rather than just approximate the size. */ .sb-consent-banner { position: fixed; left: 16px; right: auto; bottom: 16px; z-index: 9999; width: calc(100% - 32px); max-width: 240px; margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 16px 18px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } .sb-consent-banner p { flex: 1 1 100%; margin: 0; color: var(--text); font-size: 13px; line-height: 1.45; } .sb-consent-banner p a { color: var(--accent-blue); text-decoration: underline; } .sb-consent-actions { display: flex; flex: 1 1 100%; gap: 10px; justify-content: flex-end; } .sb-consent-banner button { font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; } .sb-consent-banner button:hover { opacity: 0.85; } .sb-consent-decline { background: transparent; border-color: var(--border-strong); color: var(--text-muted); } .sb-consent-accept { background: var(--accent-blue); color: var(--on-accent); } .sb-consent-accept:hover { transform: translateY(-1px); } @media (max-width: 480px) { /* Keep this a slim, single-row strip on mobile rather than stacking text above buttons — stacking pushed the card's height past ~140px, which was enough to bury CTAs sitting near the bottom of short pages (e.g. TV episode pages) underneath the banner on first load. */ .sb-consent-banner { left: 10px; right: 10px; /* 2026-09-14: raised from 10px — the Featurebase chat launcher bubble is fixed bottom-right at a constant 50x50 box (bottom:20px/right:20px, i.e. its top edge sits 70px above the viewport bottom on every phone width). This banner is full-width here (left/right:10px), so at 10px bottom it slid directly under the bubble and covered the Accept button (confirmed via CDP rect measurement at 375x812 and 414x896). 90px clears the bubble's 70px top edge with a ~20px margin regardless of viewport width. Vertical offset only — horizontal layout/width unchanged. */ bottom: 90px; /* The 240px max-width above is a desktop-only fix for the 1440x900 hero overlap (see comment above) — it would otherwise crush this row-layout strip into a near-unreadable single narrow column. Not relevant on phones, where the hero stacks vertically above this banner, so restore the original left/right-driven width here. */ max-width: none; width: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; } .sb-consent-banner p { flex: 1 1 auto; font-size: 12.5px; line-height: 1.35; } .sb-consent-actions { flex: 0 0 auto; justify-content: flex-end; gap: 6px; } .sb-consent-banner button { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; } } /* === IA A-E 2026-09-07 === */ .hub-foundation-label { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; } a.hub-card { color: inherit; text-decoration: none; display: block; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } a.hub-card:hover { border-color: var(--border-hover); background: var(--card-hover); } a.hub-card h4 { color: var(--text); } @media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } } /* === is-agentic heading 2026-09-07 === */ .app-toolbar .app-mock-title { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 8px; color: var(--text); } .hub-card h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 8px; color: var(--text); } /* Hero Whitespace gap drawer (visual-only UI mimic) — 2026-09-07 */ .app-view[data-view="whitespace"] { position: relative; } button.status-pill.mkt-ws-gap { font: inherit; cursor: pointer; border: none; display: inline-flex; align-items: center; transition: filter .15s ease, transform .1s ease; } button.status-pill.mkt-ws-gap:hover { filter: brightness(1.15); outline: 1px solid var(--ring-amber); } button.status-pill.mkt-ws-gap:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mkt-ws-backdrop { position: absolute; inset: 0; background: var(--scrim); z-index: 20; border-radius: 0 0 8px 0; } .mkt-ws-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(280px, 88%); background: var(--surface-panel); border-left: 1px solid var(--border-soft); z-index: 21; display: flex; flex-direction: column; padding: 14px 14px 16px; box-shadow: var(--shadow-drawer); transform: translateX(8px); opacity: 0; transition: transform .18s ease, opacity .18s ease; } .mkt-ws-drawer.is-open { transform: translateX(0); opacity: 1; } .mkt-ws-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .mkt-ws-drawer-kicker { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .mkt-ws-drawer-title { font-size: 14px; font-weight: 600; color: var(--text); } .mkt-ws-drawer-sub { font-size: 12px; color: var(--status-amber); margin-top: 2px; } .mkt-ws-drawer-close { background: transparent; border: 1px solid var(--border-mid); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; font-size: 18px; line-height: 1; cursor: pointer; flex: none; } .mkt-ws-drawer-close:hover { color: var(--text); border-color: var(--border-hover); } .mkt-ws-drawer-actions { display: flex; flex-direction: column; gap: 8px; } .mkt-ws-action { text-align: left; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 500; cursor: pointer; } .mkt-ws-action:hover { background: var(--tint-blue-14); border-color: var(--border-blue-soft); } .mkt-ws-drawer-note { margin-top: auto; padding-top: 14px; font-size: 11px; color: var(--text-faint); } /* Hero list→detail + procurement tabs — 2026-09-07 */ .app-tabs .tab { cursor: pointer; font: inherit; border: none; } .app-tabs button.tab { appearance: none; } .mkt-click-table tr.mkt-row { cursor: pointer; } .mkt-click-table tr.mkt-row:hover td { background: var(--surface-wash-2); } .mkt-click-table tr.mkt-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .mkt-detail-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .mkt-detail-back { background: var(--surface-2); border: 1px solid var(--border-mid); color: var(--text); border-radius: 6px; padding: 5px 10px; font-size: 11px; cursor: pointer; } .mkt-detail-back:hover { border-color: var(--border-blue); color: var(--text); } .mkt-detail-crumb { font-size: 11px; color: var(--text-muted); } .mkt-detail-hero { margin-bottom: 14px; } .mkt-detail-title { font-size: 15px; font-weight: 600; color: var(--text); } .mkt-detail-sub { font-size: 12px; color: var(--link); margin-top: 4px; } .mkt-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mkt-detail-field { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .mkt-detail-field .l { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; } .mkt-detail-field .v { font-size: 13px; color: var(--text); font-weight: 500; } .mkt-detail-note { margin-top: 14px; font-size: 11px; color: var(--text-faint); } /* Opp / Prospect detail enrich — 2026-09-07 */ .mkt-detail-section { margin-top: 14px; } .mkt-detail-sec-h { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .mkt-detail-link { display: block; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--link); border-radius: 8px; padding: 9px 12px; font-size: 12px; cursor: default; } .mkt-detail-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .mkt-detail-timeline li { display: flex; gap: 10px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 10px; } .mkt-detail-timeline .when { color: var(--text-faint); flex: none; min-width: 48px; } .mkt-detail-timeline .what { color: var(--text-bright); } .mkt-detail-muted { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.45; } .mkt-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .mkt-detail-cta { background: var(--tint-blue-18); border: 1px solid var(--border-blue); color: var(--text); border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 500; cursor: default; } .mkt-detail-cta.ghost { background: var(--surface-2); border-color: var(--border-mid); color: var(--text-muted); } /* Hero mock denser nav — 2026-09-07 */ .app-mock .app-nav nav { overflow-y: auto; max-height: 100%; scrollbar-width: thin; } .app-mock .app-nav .nav-item { font-size: 11px; padding: 7px 10px; } /* Hero nav nest — Quotes/Products children — 2026-09-07 */ .app-mock .nav-group { display: flex; flex-direction: column; gap: 2px; } .app-mock .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 0 0 2px 10px; padding: 2px 0 2px 8px; border-left: 1px solid var(--border-mid); } .app-mock .nav-item.nav-subitem { font-size: 10.5px; padding: 6px 8px; color: var(--text-muted); } .app-mock .nav-item.nav-subitem svg { width: 13px; height: 13px; } .app-mock .nav-item.nav-subitem.active { color: var(--text); } .app-mock .nav-group.is-branch-active > .nav-item:not(.nav-subitem) { color: var(--link-soft); } /* Opportunity pipeline stages — 2026-09-07 */ .mkt-pipeline { display: flex; gap: 4px; margin: 0 0 14px; overflow-x: auto; padding-bottom: 2px; } .mkt-pipeline-stage { flex: 1 1 0; min-width: 72px; background: var(--surface-chip); border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px; text-align: center; opacity: 0.45; } .mkt-pipeline-stage.is-current { opacity: 1; background: var(--tint-blue-16); border-color: var(--border-blue-strong); box-shadow: 0 0 0 1px var(--ring-blue); } .mkt-pipeline-num { display: block; font-size: 9px; font-weight: 600; color: var(--text-faint); margin-bottom: 3px; letter-spacing: .04em; } .mkt-pipeline-stage.is-current .mkt-pipeline-num { color: var(--link-on-tint); } .mkt-pipeline-label { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); line-height: 1.25; } .mkt-pipeline-stage.is-current .mkt-pipeline-label { color: var(--text); font-weight: 600; } /* Conversion R1–R5 (Sun 13 Sep 2026) */ .scale-tax { padding: 72px 0 48px; background: var(--bg); } .scale-tax-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; } .scale-tax-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; } .scale-tax-card h3 { font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 650; margin: 0 0 8px; } .scale-tax-card p { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 0; } .live-proof { padding: 48px 0 72px; } .live-proof-frame { margin: 0 auto; max-width: 960px; border-radius: var(--radius-lg, 16px); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-frame); background: var(--surface-3); } .live-proof-frame img { display: block; width: 100%; height: auto; } .live-proof-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.25rem; } @media (max-width: 900px) { .scale-tax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .scale-tax-grid { grid-template-columns: 1fr; } } /* Hero Ken-Burns carousel (AU stills) ------------------------------------*/ .hero-carousel { margin: 36px auto 0; max-width: 960px; text-align: left; } .hero-carousel-frame { position: relative; border-radius: 0; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-frame); background: var(--surface-3); } .hero-carousel-viewport { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3); } .hero-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; z-index: 0; } .hero-carousel-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; } .hero-carousel-slide img, .hero-carousel-slide video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; border-radius: 0; } .hero-carousel-slide video { background: var(--surface-3); } .hero-carousel-chrome { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 16px; background: linear-gradient(180deg, var(--scrim-fade) 0%, var(--scrim-72) 100%); pointer-events: none; } .hero-carousel-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--on-media); text-shadow: 0 1px 2px var(--scrim); } .hero-carousel-dots { display: flex; align-items: center; gap: 8px; pointer-events: auto; } .hero-carousel-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--on-media-dim); cursor: pointer; transition: background .2s ease, transform .2s ease; } .hero-carousel-dot.is-active { background: var(--on-accent); transform: scale(1.15); } .hero-carousel-dot:focus-visible { outline: 2px solid var(--accent-blue-strong); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .hero-carousel-slide { transition: none; } .hero-carousel-slide { transition: none !important; } } @media (max-width: 640px) { .hero-carousel { margin-top: 28px; } .hero-carousel-chrome { padding: 12px 12px 14px; } } /* ========================================================================== Light theme — shared component overrides (html[data-theme="light"]) Homepage light variant (2026-09-17). These override hardcoded dark literals in shared header/nav/button/footer/cookie-banner rules above so the same markup reads correctly on the light token set. Dark defaults above are untouched. ========================================================================== */ html[data-theme="light"] header.site-header { background: var(--header-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-header); } html[data-theme="light"] .logo { color: var(--text); } html[data-theme="light"] nav.main-nav a, html[data-theme="light"] nav.main-nav .nav-dd-trigger { color: var(--text-muted); } html[data-theme="light"] nav.main-nav a:hover, html[data-theme="light"] nav.main-nav .nav-dd-trigger:hover, html[data-theme="light"] nav.main-nav .nav-dd.is-open .nav-dd-trigger { color: var(--text); } html[data-theme="light"] nav.main-nav .nav-dd-menu { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); } html[data-theme="light"] nav.main-nav .nav-dd-menu a:hover, html[data-theme="light"] nav.main-nav .nav-dd-menu a:focus { background: var(--tint-link); color: var(--link); } html[data-theme="light"] .header-actions .login { color: var(--text-muted); } html[data-theme="light"] .header-actions .login:hover { color: var(--text); } /* Primary button: dark theme uses a white pill on dark bg (background: var(--text)). On light, --text is near-black, so this must become the solid brand blue button. */ html[data-theme="light"] .btn-primary { background: var(--accent-blue); color: var(--on-accent); } html[data-theme="light"] .btn-primary:hover { background: var(--accent-blue-strong); color: var(--on-accent); } /* Secondary/dark button: dark theme hardcodes a near-black fill (var(--card-alt)). On light this becomes a white button with a visible outline instead. */ html[data-theme="light"] .btn-dark { background: var(--card); border-color: var(--border-strong); color: var(--text); } html[data-theme="light"] .btn-dark:hover { background: var(--card-alt); border-color: var(--border-strong); } html[data-theme="light"] footer.site-footer { background: var(--bg-elevated); border-top: 1px solid var(--border); color: var(--text-muted); } html[data-theme="light"] .footer-bottom { border-top: 1px solid var(--border); } html[data-theme="light"] .footer-social a:hover { color: var(--link); border-color: var(--border-strong); } html[data-theme="light"] .footer-col a:hover { color: var(--link); } html[data-theme="light"] .footer-bottom .legal a:hover { color: var(--link); } /* Platform/Foundation hub cards: hover should read as a highlight (blue border + tint + lift), not the dark themes subtle gray-shift. Light-only override. */ html[data-theme="light"] a.hub-card:hover { border-color: var(--accent-blue); background: var(--tint-blue-14); box-shadow: var(--shadow-card); transform: translateY(-2px); } html[data-theme="light"] .sb-consent-banner { background: var(--card); border: 1px solid var(--border); color: var(--text); }