/* === REDESIGN · SAAS KIT (sandbox) ================================= Anchored to the real brand book (design/index.html · "one brand, three surfaces"). Reconverts the dashboard/shadcn product components to production CSS: KPI strip, tiles, dimension bars, dense table, underline tabs, chips. Brand law: SHARP corners, Satoshi + mono numbers, green = action. Isolated under .sa. =================================================================== */ /* Real bold for figures. Production only ships JetBrainsMono-Regular with a 400-700 range claim in global.css; this exact-weight face (loaded after) wins the match for 700. NOTE: upload JetBrainsMono-Bold.woff2 to production /files/websiteassets/fonts/ at integration time. */ @font-face { font-family: 'JetBrains Mono'; src: url('/files/websiteassets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } .sa { /* Surfaces + borders consume the production tokens (single source of truth: design-tokens.css). Never hardcode these hex values again. */ --sa-bg: var(--color-bg, #000000); --sa-raised: var(--color-bg-raised, #0a0a0a); --sa-elevated: var(--color-bg-elevated, #141414); --sa-hair: var(--color-border, #262626); --sa-hair-2: var(--color-border-strong, #3a3a3a); --sa-ink: var(--color-text, #ffffff); /* Text grays: intentional overrides of --color-text-muted/subtle for contrast on pure black (tokens pending reconciliation at integration). */ --sa-muted: #999999; --sa-subtle: #7a7a7a; --sa-faint: #808080; --sa-green: var(--color-accent, #76FB56); --sa-green-hover: var(--color-accent-hover, #8AFF70); --sa-green-dim: var(--color-accent-dim, rgba(118, 251, 86, 0.3)); --sa-green-wash: var(--color-accent-bg, rgba(118, 251, 86, 0.08)); --sa-green-15: rgba(118, 251, 86, 0.15); --sa-green-glow: rgba(118, 251, 86, 0.15); --sa-success: var(--color-success, #34D399); --sa-warning: var(--color-warning, #FFB347); --sa-danger: var(--color-error, #FF6B6B); --sa-info: var(--color-info, #7FB3FF); background: var(--sa-bg); color: var(--sa-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* JetBrains Mono ships Regular-only here; never let the browser fake a heavier weight (faux-bold looks broken on figures). */ font-synthesis: none; } /* every product/marketing primitive is square (brand law) */ .sa .sa-btn, .sa .chip, .sa .kpis, .sa .kpi, .sa .tile, .sa .tbl-wrap, .sa table, .sa th, .sa td, .sa .track, .sa .fill, .sa .sa-panel, .sa .feature, .sa .stat-spot, .sa .sa-tag { border-radius: 0; } .sa .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .sa .container { position: relative; z-index: 1; } /* micro label */ .sa-micro { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); } /* ---- chips (brand-book formula: bg/15 + text + border/30) --------- */ .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 4px 9px; border: 1px solid transparent; white-space: nowrap; } .chip .dot { width: 6px; height: 6px; flex: none; } .chip-green { background: var(--sa-green-15); color: var(--sa-green); border-color: var(--sa-green-dim); } .chip-green .dot { background: var(--sa-green); } .chip-success { background: rgba(52,211,153,.15); color: #6ee7b7; border-color: rgba(52,211,153,.3); } .chip-success .dot { background: var(--sa-success); } .chip-zinc { background: rgba(153,153,153,.14); color: var(--sa-muted); border-color: rgba(153,153,153,.28); } .chip-zinc .dot { background: var(--sa-muted); } .chip-info { background: rgba(127,179,255,.15); color: #bcd6ff; border-color: rgba(127,179,255,.3); } .chip-info .dot { background: var(--sa-info); } /* ---- buttons ------------------------------------------------------ */ .sa-btns { display: flex; flex-wrap: wrap; gap: 14px; } .sa-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; padding: 14px 24px; border: 1px solid transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .sa-btn--primary { background: var(--sa-green); color: #050505; } .sa-btn--primary:hover { background: #8AFF70; transform: translateY(-1px); } .sa-btn--secondary { border-color: var(--sa-hair-2); color: var(--sa-ink); } .sa-btn--secondary:hover { border-color: var(--sa-green-dim); } /* =================================================================== */ /* NAV */ /* =================================================================== */ .sa-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(20px,4vw,44px); background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--sa-hair); } .sa-nav__links { display: flex; align-items: center; gap: clamp(16px,2.2vw,30px); } .sa-nav__link { color: var(--sa-muted); font-size: 13px; transition: color .2s ease; } .sa-nav__link:hover { color: var(--sa-ink); } .sa-nav__cta { padding: 9px 16px; background: var(--sa-green); color: #050505; font-size: 13px; font-weight: 700; } .sa-nav__logo img { height: 26px; width: auto; display: block; } @media (max-width: 900px) { .sa-nav__links { display: none; } } /* =================================================================== */ /* HERO (centered) */ /* =================================================================== */ .sa-hero { position: relative; text-align: center; padding: clamp(76px,11vw,136px) 0 clamp(60px,8vw,96px); overflow: hidden; } .sa-hero::before { content: ""; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 640px; height: 420px; background: radial-gradient(circle, var(--sa-green-glow), transparent 70%); pointer-events: none; } .sa-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sa-green); } .sa-hero__eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--sa-green); } .sa-h1 { font-size: clamp(38px, 6vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; margin: 30px auto 0; max-width: 16ch; text-wrap: balance; } .sa-h1 .g { color: var(--sa-green); } .sa-lead { margin: 32px auto 0; font-size: clamp(16px,1.9vw,20px); color: var(--sa-muted); max-width: 54ch; line-height: 1.55; } .sa-hero .sa-btns { justify-content: center; margin-top: 46px; } .sa-hero__note { margin: 22px auto 0; max-width: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--sa-faint); } /* =================================================================== */ /* PRODUCT PANEL (dashboard reconverted) */ /* =================================================================== */ .sa-panel { border: 1px solid var(--sa-hair); background: var(--sa-bg); margin-top: clamp(60px,7vw,96px); box-shadow: 0 50px 120px -60px rgba(0,0,0,.9); } .sa-panel__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-raised); } .sa-panel__title { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sa-ink); font-weight: 500; } .sa-panel__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-green); } .sa-panel__live i { width: 7px; height: 7px; background: var(--sa-green); box-shadow: 0 0 10px var(--sa-green); } /* underline tabs */ .ptabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--sa-hair); } .ptab { padding: 12px 16px 13px; font-size: 13px; color: var(--sa-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .2s ease, border-color .2s ease; font-weight: 500; font-family: inherit; } .ptab:hover { color: var(--sa-ink); } .ptab.active { color: var(--sa-green); border-bottom-color: var(--sa-green); font-weight: 700; } .ptab .count { font-family: var(--font-mono); font-size: 10px; color: var(--sa-faint); margin-left: 7px; } .ptab.active .count { color: var(--sa-green-dim); } .sa-panel__body { padding: 28px 22px; } .sa-panel__pane { display: none; } .sa-panel__pane.active { display: block; animation: sa-fade .35s ease; } @keyframes sa-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* kpi strip */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sa-hair-2); border: 1px solid var(--sa-hair-2); } .kpi { background: var(--sa-raised); padding: 18px 20px 16px; min-height: 108px; display: flex; flex-direction: column; position: relative; transition: background .15s ease; } .kpi:hover { background: var(--sa-elevated); } .kpi .sa-micro { margin-bottom: 9px; } .kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--sa-ink); } .kpi-sub { margin-top: 8px; font-size: 11px; color: var(--sa-muted); display: flex; align-items: center; gap: 6px; } .kpi-sub .up { color: var(--sa-success); font-family: var(--font-mono); font-weight: 600; } .kpi-spark { position: absolute; right: 13px; bottom: 11px; } .kpi-spark polyline { fill: none; stroke: var(--sa-green); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* dimension bars (mini chart) */ .sa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); border-top: none; } .sa-split > div { background: var(--sa-bg); padding: 20px 18px; } .dims { display: flex; flex-direction: column; gap: 13px; } .dim { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 12px; } .dim-label { font-size: 12px; color: var(--sa-muted); } .track { height: 6px; background: #1c1c1e; position: relative; overflow: hidden; } .fill { position: absolute; inset: 0 auto 0 0; background: var(--sa-green); transition: width 1s cubic-bezier(.16,1,.3,1); } .fill.info { background: var(--sa-info); } .fill.success { background: var(--sa-success); } .dim-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; color: var(--sa-muted); } /* dense table */ .tbl-wrap { border: 1px solid var(--sa-hair); background: var(--sa-raised); } .sa table { width: 100%; border-collapse: collapse; } .sa thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-elevated); white-space: nowrap; } .sa thead th.num, .sa td.num { text-align: right; } .sa tbody td { padding: 10px 16px; border-bottom: 1px solid var(--sa-hair); font-size: 12.5px; vertical-align: middle; white-space: nowrap; height: 40px; } .sa tbody tr:last-child td { border-bottom: none; } .sa tbody tr { transition: background .15s ease; } .sa tbody tr:hover td { background: var(--sa-elevated); } .sa tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--sa-green); } .cell-name { font-weight: 500; color: var(--sa-ink); } .sa td .mono { font-size: 12px; color: var(--sa-muted); } .sa-panel__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--sa-hair); font-family: var(--font-mono); font-size: 10px; color: var(--sa-faint); letter-spacing: 0.06em; } /* =================================================================== */ /* SECTIONS (replicable scaffold) */ /* =================================================================== */ .sa-sec { padding: clamp(88px,12vw,168px) 0; } .sa-sec__head { text-align: center; max-width: 60ch; margin: 0 auto; } .sa-sec__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sa-green); } .sa-h2 { font-size: clamp(28px,4vw,46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 20px 0 0; text-wrap: balance; } .sa-h2 .g { color: var(--sa-green); } .sa-sec__sub { margin: 22px auto 0; color: var(--sa-muted); font-size: var(--text-lg); line-height: 1.55; } /* feature grid (3, hairline-joined like the product) */ .sa-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(52px,6vw,80px); } .feature { background: var(--sa-bg); padding: clamp(34px,3.4vw,52px); } .feature .ico { width: 40px; height: 40px; border: 1px solid var(--sa-green-dim); background: var(--sa-green-wash); display: flex; align-items: center; justify-content: center; color: var(--sa-green); margin-bottom: 20px; font-family: var(--font-mono); font-weight: 700; } .feature h3 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; } .feature p { font-size: 14px; color: var(--sa-muted); line-height: 1.55; } /* stat spotlight band */ .sa-statband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); } .stat-spot { background: var(--sa-bg); padding: clamp(42px,5vw,68px); text-align: center; } .stat-spot .num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(40px,6vw,72px); font-weight: 700; color: var(--sa-green); letter-spacing: -0.04em; line-height: 0.9; } .stat-spot .lab { display: block; margin-top: 16px; font-family: var(--font-sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--sa-muted); line-height: 1.4; } /* ---- exclusivity arc (deal-by-deal -> exclusive) ------------------ */ .sa-arc { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(48px,6vw,76px); } .sa-arc__col { background: var(--sa-bg); padding: clamp(36px,3.6vw,56px); } .sa-arc__col.is-dest { background: var(--sa-raised); position: relative; } .sa-arc__col.is-dest::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--sa-green); } .sa-arc__k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); } .sa-arc__col.is-dest .sa-arc__k { color: var(--sa-green); } .sa-arc__t { font-size: clamp(19px,2vw,24px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 4px; } .sa-arc__role { color: var(--sa-muted); font-size: 14px; line-height: 1.5; } .sa-adds { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; } .sa-adds li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--sa-hair); } .sa-adds li:first-child { border-top: none; } .sa-adds .n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--sa-green); } .sa-adds .t { font-weight: 600; font-size: 14.5px; } .sa-adds .b { color: var(--sa-muted); font-size: 13.5px; line-height: 1.5; margin-top: 3px; } .sa-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .sa-ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sa-muted); border: 1px solid var(--sa-hair); padding: 7px 12px; } .sa-ticks li::before { content: ""; width: 7px; height: 7px; background: var(--sa-green); flex: none; } .sa-arc__close { text-align: center; max-width: 60ch; margin: clamp(28px,4vw,40px) auto 0; font-size: clamp(18px,2vw,22px); line-height: 1.4; letter-spacing: -0.01em; } .sa-arc__close .g { color: var(--sa-green); } /* ---- decision scorecard (Intelligence) --------------------------- */ .sa-score__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--sa-hair); margin-bottom: 20px; } .sa-score__who .n { font-weight: 600; font-size: 15px; } .sa-score__who .m { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--sa-muted); letter-spacing: 0.04em; } .sa-verdict { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid transparent; white-space: nowrap; } .sa-verdict::before { content: ""; width: 8px; height: 8px; } .sa-verdict.skip { color: var(--sa-danger); border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.1); } .sa-verdict.skip::before { background: var(--sa-danger); } .sa-verdict.present { color: var(--sa-green); border-color: var(--sa-green-dim); background: var(--sa-green-15); } .sa-verdict.present::before { background: var(--sa-green); } .sa-score__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sa-hair); color: var(--sa-muted); font-size: 13px; } .sa-score__note .g { color: var(--sa-green); } .dim.wide { grid-template-columns: 150px 1fr 52px; } .fill.danger { background: var(--sa-danger); } .fill.warning { background: var(--sa-warning); } .dim-val.bad { color: var(--sa-danger); } .dim-val.good { color: var(--sa-green); } /* ---- split intro (headline left + body right) -------------------- */ .sa-splitintro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,64px); align-items: start; } .sa-splitintro__h { font-size: clamp(28px,4vw,44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; } .sa-splitintro__h .g { color: var(--sa-green); } .sa-splitintro__body p { color: var(--sa-muted); font-size: var(--text-lg); line-height: 1.55; margin: 0; } .sa-splitintro__body p + p { margin-top: 14px; } .sa-splitintro__body strong { color: var(--sa-ink); font-weight: 600; } /* ---- section eyebrow rule (left-aligned marker) ------------------ */ .sa-rule { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px,3.5vw,44px); } .sa-rule__t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-green); white-space: nowrap; } .sa-rule::after { content: ""; flex: 1; height: 1px; background: var(--sa-hair); } /* ---- numbered editorial list ------------------------------------- */ .sa-numlist { margin-top: clamp(36px,4vw,52px); border-top: 1px solid var(--sa-hair); } .sa-num { display: grid; grid-template-columns: 68px 1fr; gap: clamp(16px,3vw,40px); padding: clamp(28px,3vw,40px) 0; border-bottom: 1px solid var(--sa-hair); align-items: start; } .sa-num__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(20px,2.4vw,28px); font-weight: 700; color: var(--sa-green); letter-spacing: -0.02em; } .sa-num__t { font-size: clamp(18px,2vw,23px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; margin: 0; } .sa-num__b { color: var(--sa-muted); line-height: 1.6; margin: 12px 0 0; max-width: 72ch; } .sa-num__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--sa-green); } .sa-num__link:hover { text-decoration: underline; } /* ---- track record cases ------------------------------------------ */ .sa-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(40px,5vw,56px); } .sa-case { background: var(--sa-bg); padding: clamp(28px,3vw,40px); } .sa-case__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-muted); } .sa-case__t { font-size: clamp(18px,1.9vw,23px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 12px; line-height: 1.22; } .sa-case__b { color: var(--sa-muted); line-height: 1.6; font-size: 14px; } .sa-case__b .g { color: var(--sa-green); } /* ---- fit lists --------------------------------------------------- */ .sa-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); margin-top: clamp(40px,5vw,56px); } .sa-fit__col { background: var(--sa-bg); padding: clamp(28px,3vw,40px); } .sa-fit__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-green); } .sa-fit__col.no .sa-fit__k { color: var(--sa-subtle); } .sa-fit__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; } .sa-fit__list li { position: relative; padding-left: 24px; color: var(--sa-ink); font-size: 15px; line-height: 1.45; } .sa-fit__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--sa-green); } .sa-fit__col.no .sa-fit__list li { color: var(--sa-muted); } .sa-fit__col.no .sa-fit__list li::before { background: var(--sa-subtle); } /* ---- statement pull-quote ---------------------------------------- */ .sa-statement { border-left: 2px solid var(--sa-green); padding: 6px 0 6px 24px; margin: clamp(36px,4vw,52px) 0 0; max-width: 68ch; } .sa-statement p { font-size: clamp(18px,2.2vw,26px); line-height: 1.35; letter-spacing: -0.015em; color: var(--sa-ink); font-weight: 500; margin: 0; text-wrap: balance; } @media (max-width: 820px) { .sa-splitintro { grid-template-columns: 1fr; } .sa-cases { grid-template-columns: 1fr; } .sa-fit { grid-template-columns: 1fr; } } @media (max-width: 700px) { .sa-num { grid-template-columns: 1fr; gap: 8px; } } /* ---- case file (Brands only) ------------------------------------- */ .sa-casefile { border: 1px solid var(--sa-hair); background: var(--sa-raised); margin-top: clamp(44px,5vw,64px); } .sa-casefile__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-elevated); } .sa-casefile__ref { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-muted); } .sa-casefile__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sa-hair); } .sa-casefile__cell { background: var(--sa-raised); padding: clamp(26px,3vw,40px); text-align: center; } .sa-casefile__num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(34px,4.4vw,52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .sa-casefile__num.bad { color: var(--sa-danger); } .sa-casefile__k { display: block; margin-top: 12px; color: var(--sa-muted); font-size: 14px; } .sa-casefile__foot { padding: 18px 22px; border-top: 1px solid var(--sa-hair); color: var(--sa-muted); font-size: 14px; line-height: 1.55; text-align: left; max-width: none; } .sa-casefile__foot .g { color: var(--sa-green); } /* ---- comparison table (Brands only) ------------------------------ */ .sa-compare { margin-top: clamp(44px,5vw,64px); border: 1px solid var(--sa-hair); } .sa-compare table { width: 100%; border-collapse: collapse; } .sa-compare th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 20px; border-bottom: 1px solid var(--sa-hair); background: var(--sa-elevated); text-align: left; color: var(--sa-muted); } .sa-compare th.na { color: var(--sa-green); } .sa-compare td { padding: 15px 20px; border-bottom: 1px solid var(--sa-hair); font-size: 14px; vertical-align: middle; } .sa-compare tr:last-child td { border-bottom: none; } .sa-compare td:first-child { color: var(--sa-muted); } .sa-compare td.legacy { color: var(--sa-subtle); } .sa-compare td.na { color: var(--sa-ink); background: var(--sa-green-wash); font-weight: 500; } .sa-compare col.na-col { } /* ---- what we won't do (Brands only) ------------------------------ */ .sa-wont { list-style: none; margin: clamp(40px,5vw,56px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sa-hair); border: 1px solid var(--sa-hair); } .sa-wont li { background: var(--sa-bg); padding: clamp(22px,2.6vw,30px); display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; } .sa-wont .x { color: var(--sa-danger); font-family: var(--font-mono); font-weight: 700; font-size: 18px; line-height: 1.2; } .sa-wont .t { font-size: 15px; line-height: 1.5; color: var(--sa-ink); } /* ---- client logos ----------------------------------------------- Mixed-ratio SVGs normalized by optical box, not raw height: wide wordmarks cap on width, compact marks cap on height, so every logo reads at similar visual weight. Uniform white silhouette on dark. */ .sa-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(32px,5vw,60px); margin-top: clamp(36px,4vw,52px); } .sa-logos img { max-height: 40px; max-width: 128px; width: auto; height: auto; object-fit: contain; opacity: 0.5; filter: brightness(0) invert(1); transition: opacity .2s ease; } .sa-logos img:hover { opacity: 0.9; } @media (max-width: 700px) { .sa-casefile__body { grid-template-columns: 1fr; } .sa-wont { grid-template-columns: 1fr; } } /* ---- FAQ accordion (native
, no JS, accessible) --------- */ .sa-faq { margin-top: clamp(36px,4vw,52px); border-top: 1px solid var(--sa-hair); } .sa-faq__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-green); margin: clamp(36px,4vw,52px) 0 4px; } .sa-faq__cat:first-of-type { margin-top: clamp(28px,3vw,40px); } .sa-faq details { border-bottom: 1px solid var(--sa-hair); } .sa-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(16px,1.7vw,19px); font-weight: 600; letter-spacing: -0.01em; color: var(--sa-ink); transition: color .2s ease; } .sa-faq summary::-webkit-details-marker { display: none; } .sa-faq summary:hover { color: var(--sa-green); } .sa-faq summary .ico { flex: none; width: 16px; height: 16px; position: relative; } .sa-faq summary .ico::before, .sa-faq summary .ico::after { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 2px; background: var(--sa-green); transition: transform .25s ease; } .sa-faq summary .ico::after { transform: rotate(90deg); } .sa-faq details[open] summary .ico::after { transform: rotate(0); } .sa-faq__a { padding: 0 40px 26px 0; color: var(--sa-muted); font-size: 15.5px; line-height: 1.6; max-width: 74ch; } .sa-faq__a a { color: var(--sa-green); border-bottom: 1px solid var(--sa-green-dim); } .sa-faq__a a:hover { border-color: var(--sa-green); } /* ---- quote / social proof ---------------------------------------- */ .sa-quote { max-width: 60ch; margin: 0 auto; text-align: center; padding: clamp(16px,3vw,32px) 0; } .sa-quote blockquote { font-size: clamp(22px,3vw,34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin: 0; text-wrap: balance; } .sa-quote figcaption { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-muted); } .sa-quote figcaption .g { color: var(--sa-green); } /* ---- portal panel: growth bars reuse .dims ----------------------- */ .sa-portal-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--sa-faint); margin-top: 12px; } @media (max-width: 820px) { .sa-arc { grid-template-columns: 1fr; } } /* closing */ .sa-closing { text-align: center; max-width: 52ch; margin: 0 auto; } .sa-closing .sa-btns { justify-content: center; margin-top: 32px; } /* footer */ .sa-foot { border-top: 1px solid var(--sa-hair); margin-top: clamp(40px,6vw,72px); } .sa-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px,4vw,56px); padding: clamp(44px,5vw,64px) 0 clamp(32px,4vw,44px); } .sa-foot__brand-logo { display: inline-block; } .sa-foot__brand-logo img { height: 30px; width: auto; display: block; } .sa-foot__tag { color: var(--sa-muted); max-width: 40ch; margin: 18px 0 22px; font-size: 13.5px; line-height: 1.55; } .sa-foot__coltitle { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sa-subtle); margin-bottom: 16px; } .sa-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .sa-foot__links a { color: var(--sa-muted); font-size: 14px; transition: color .18s ease; } .sa-foot__links a:hover { color: var(--sa-green); } .sa-foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 0 clamp(28px,4vw,40px); border-top: 1px solid var(--sa-hair); } .sa-foot__copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--sa-faint); } .sa-foot__legal { display: flex; gap: 22px; } .sa-foot__legal a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--sa-subtle); transition: color .18s ease; } .sa-foot__legal a:hover { color: var(--sa-ink); } @media (max-width: 820px) { .sa-foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .sa-foot__grid { grid-template-columns: 1fr; } } /* =================================================================== */ /* MOTION (progressive enhancement) */ /* =================================================================== */ @media (prefers-reduced-motion: no-preference) { .js-anim .sa-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .js-anim .sa-reveal.is-in { opacity: 1; transform: none; } } /* =================================================================== */ /* RESPONSIVE */ /* =================================================================== */ @media (max-width: 820px) { .kpis { grid-template-columns: repeat(2, 1fr); } .sa-split { grid-template-columns: 1fr; } .sa-features, .sa-statband { grid-template-columns: 1fr; } .ptabs { overflow-x: auto; } } /* =================================================================== */ /* ACCESSIBILITY — focus ring (canonical for the marketing system) */ /* =================================================================== */ .sa a:focus-visible, .sa button:focus-visible, .sa input:focus-visible, .sa select:focus-visible, .sa textarea:focus-visible { outline: 2px solid var(--sa-green); outline-offset: 2px; } /* =================================================================== */ /* NAV — current page + mobile menu */ /* =================================================================== */ .sa-nav__link[aria-current="page"] { color: var(--sa-ink); box-shadow: inset 0 -2px 0 var(--sa-green); padding-bottom: 3px; } .sa-nav__burger { display: none; width: 40px; height: 40px; background: none; border: 1px solid var(--sa-hair-2); cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .sa-nav__burger span { display: block; width: 16px; height: 2px; background: var(--sa-ink); transition: transform .25s ease, opacity .25s ease; } .sa-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sa-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .sa-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .sa-mobilemenu { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 96px clamp(24px,6vw,40px) 40px; flex-direction: column; gap: 8px; } .sa-mobilemenu.is-open { display: flex; } .sa-mobilemenu a { font-size: clamp(24px,6vw,32px); font-weight: 700; letter-spacing: -0.02em; color: var(--sa-ink); padding: 12px 0; border-bottom: 1px solid var(--sa-hair); } .sa-mobilemenu a[aria-current="page"] { color: var(--sa-green); } .sa-mobilemenu .sa-btn { margin-top: 24px; justify-content: center; } @media (max-width: 900px) { .sa-nav__burger { display: flex; } .sa-nav__cta { display: none; } } body.sa-menu-open { overflow: hidden; } /* =================================================================== */ /* TABLES — never clip on small screens */ /* =================================================================== */ .tbl-wrap, .sa-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl-wrap table, .sa-compare table { min-width: 560px; } /* =================================================================== */ /* RHYTHM UTILITIES — replaces per-page inline styles */ /* =================================================================== */ /* half-rhythm: follows a module-ended section without the full double gap, but never lets content sit tight against the previous module's border */ .sa-sec--flush { padding-top: clamp(44px, 6vw, 84px); } .sa-lead--left { margin-inline: 0; } .sa-h2--cap { max-width: 20ch; } .sa-closing .sa-lead { margin-inline: auto; } .sa-panel__pane .tbl-wrap { margin-top: 16px; } /* =================================================================== */ /* TEXTURE — fixed grain overlay (breaks digital flatness) */ /* =================================================================== */ .sa-grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* =================================================================== */ /* SPOTLIGHT — panel border glow under cursor (fine pointers only) */ /* =================================================================== */ @media (hover: hover) and (pointer: fine) { .sa-panel { position: relative; } .sa-panel::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(118,251,86,.12), transparent 65%); } .sa-panel:hover::after { opacity: 1; } } /* =================================================================== */ /* FORMS */ /* =================================================================== */ .sa-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; margin-top: clamp(36px,4vw,52px); } .sa-field { display: flex; flex-direction: column; gap: 8px; } .sa-field--full { grid-column: 1 / -1; } .sa-field label { font-size: 13px; font-weight: 500; color: var(--sa-ink); } .sa-field label .req { color: var(--sa-green); } .sa-field .hint { font-size: 12px; color: var(--sa-subtle); } .sa-input { font-family: var(--font-sans); font-size: 15px; color: var(--sa-ink); background: var(--sa-raised); border: 1px solid var(--sa-hair-2); padding: 13px 14px; width: 100%; transition: border-color .2s ease; } .sa-input::placeholder { color: var(--sa-subtle); } .sa-input:hover { border-color: var(--sa-green-dim); } .sa-input:focus { border-color: var(--sa-green); outline: none; box-shadow: 0 0 0 1px var(--sa-green-dim); } textarea.sa-input { min-height: 120px; resize: vertical; } select.sa-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } /* option group — replaces