/* ========================================================================== SIGMA SCANNER — style.css Foundation only: reset · tokens · base · layout · utilities. No section styles live here. Sections get their own rules in Phase 2. Cascade is controlled with @layer so later files can never accidentally out-specify the foundation. Declaration order below is the priority order. ========================================================================== */ @layer reset, tokens, base, layout, components, utilities; /* ========================================================================== TYPE FACES — self-hosted, no third-party request Satoshi, self-hosted from /fonts/ — the README's own "Self-hosting the fonts" section specified exactly this (Fontshare + Google Fonts were always meant to be temporary), now done: three static weights (400/500/ 700 — Fontshare does not cut a static 600 for this face; a requested font-weight:600 resolves to the nearest available weight per the CSS Fonts matching algorithm, which is 700, not a broken/missing glyph). One family for display, body, UI and figures — Inter and Plex Mono are retired. Figures lose nothing by this: Satoshi's own GSUB table ships a `tnum` (tabular figures) feature, confirmed by inspecting the font, so every `font-variant-numeric: tabular-nums` rule already in this codebase keeps working exactly as before. font-display: swap + the metric-adjusted `Satoshi-fallback` below (real numbers computed from Satoshi-Regular's own OS/2 table via fontTools, not guessed) are what the README asked for to take headline CLS to zero: the fallback occupies the same vertical space Satoshi will, so nothing reflows when the real file finishes loading. */ @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi-fallback'; src: local('Arial'); size-adjust: 93.34%; ascent-override: 108.21%; descent-override: 25.71%; line-gap-override: 0%; } /* ========================================================================== @layer reset ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; /* The page runs inside a cross-origin iframe. Without `contain`, reaching the end of this document chains the scroll to the parent Angular page and produces a sudden jump. Highest-value single line in this file. */ overscroll-behavior: contain; /* `clip` not `hidden` — `hidden` silently breaks position:sticky. */ overflow-x: clip; } body { min-height: 100%; overflow-x: clip; line-height: 1.5; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; } a { color: inherit; text-decoration: none; } button { background: none; border: 0; cursor: pointer; } table { border-collapse: collapse; border-spacing: 0; } /* Remove the default focus ring only where a replacement is guaranteed. :focus-visible below supplies it. */ :focus:not(:focus-visible) { outline: none; } [hidden] { display: none !important; } } /* ========================================================================== @layer tokens Single source of truth. Spec: 06-DESIGN-SYSTEM.md Nothing in this layer contains a selector other than :root / [data-*]. ========================================================================== */ @layer tokens { :root { /* ---------- COLOUR · INK ------------------------------------------ Near-black forest, not neutral grey. Grey against green-tinted surfaces renders dirty. Ratios are computed against --paper. */ --ink-900: #071A12; /* 18.9:1 headlines, wordmark */ --ink-800: #0E241A; /* 16.2:1 dark chrome, panel headers */ --ink-700: #14382A; /* 11.8:1 subheads */ --ink-600: #2A4A3C; /* 8.4:1 emphasis body, active nav */ --ink-500: #4A6357; /* 6.3:1 body copy */ --ink-400: #5F7369; /* 5.0:1 captions, labels, meta */ --ink-300: #B4C4BB; /* 1.9:1 NON-TEXT ONLY */ --ink-200: #DCE5E0; /* hairline — default separator */ --ink-150: #E6ECE9; /* table stripe, inset fill */ --ink-100: #EDF2EF; /* subtle surface fill */ --ink-050: #F6F9F7; /* page tint, alternating band */ --paper: #FFFFFF; /* ---------- COLOUR · SIGNAL --------------------------------------- Green means gain. Nothing else. Budget: ~10% of any viewport. WARNING: --signal-500 CANNOT hold white text (~3.1:1). Every filled control uses --signal-600. */ --signal-700: #075E31; /* 7.2:1 green text on paper, link hover */ --signal-600: #0B7A3E; /* PRIMARY FILL — white on it: 5.4:1 ✓ */ --signal-500: #10A050; /* icon accents, indicators — NON-TEXT */ --signal-400: #22C55E; /* accent on dark — 7.1:1 on --deep-900 */ --signal-300: #4ADE80; /* equity curve on dark — NON-TEXT */ --signal-200: #BBF7D0; --signal-100: #DCFCE7; --signal-050: #F0FDF4; /* ---------- COLOUR · DEEP (scoped to [data-theme="dark"]) -------- */ --deep-900: #04120B; --deep-800: #071C12; --deep-700: #0B2A1B; --deep-600: #123424; --deep-fg: #E8F0EB; /* 14.9:1 */ --deep-fg-muted: #9DB3A7; /* 6.1:1 */ /* ---------- COLOUR · DATA ----------------------------------------- Two variants each, and the distinction is not cosmetic: --data-gain GRAPHICS ONLY — chart strokes, swatches, fills. #16A34A is 3.3:1 on paper, which satisfies the 3:1 minimum for non-text graphics and FAILS the 4.5:1 minimum for body text. --data-gain-text TEXT. 5.0:1 on paper. A +0.84% label set at 10px in --data-gain is a real contrast failure, and it is the easy mistake to make because the two colours look almost identical side by side. Use the -text variant for anything with a glyph in it. */ --data-gain: #16A34A; /* 3.30:1 — graphics */ --data-gain-text: #15803D; /* 5.01:1 — text */ --data-loss: #DC2626; /* 4.83:1 — both */ --data-loss-text: #DC2626; --data-benchmark: #E8942E; --data-drawdown: #2563EB; --data-neutral: #94A3B8; --heat-loss-3: #B91C1C; --heat-gain-1: #BBF7D0; --heat-loss-2: #EF4444; --heat-gain-2: #4ADE80; --heat-loss-1: #FCA5A5; --heat-gain-3: #16A34A; --heat-flat: #EDF2EF; --heat-gain-4: #075E31; /* ---------- COLOUR · FUNCTIONAL ----------------------------------- */ --focus-ring: #0B7A3E; --focus-halo: #FFFFFF; --error: #DC2626; --error-bg: #FEF2F2; --warning: #D97706; --warning-bg: #FFFBEB; --success: #16A34A; --success-bg: #F0FDF4; --overlay: rgb(7 26 18 / .48); --selection-bg: #DCFCE7; --selection-fg: #071A12; /* ---------- GRADIENTS · exactly three ----------------------------- */ --grad-area: linear-gradient(180deg, rgb(22 163 74 / .16) 0%, rgb(22 163 74 / 0) 100%); --grad-deep: radial-gradient(120% 90% at 50% 0%, #0B2A1B 0%, #04120B 62%); --grad-fade-r: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, #FFFFFF 100%); /* ---------- TYPE · FACES ------------------------------------------ One face, everywhere — Satoshi (self-hosted, @font-face above) carries display, body, UI and figures alike. --font-mono keeps its name (19 files reference it by that token) but no longer points at a monospace face; see the @font-face block above for why numeric alignment still holds. 'Satoshi-fallback' is the metric-matched stand-in that renders for the ~100ms before the real file arrives — deliberately NOT a named system/OS font, so nothing here ever silently reads as Inter, Segoe UI, Roboto or -apple-system even mid-load; a bare `sans-serif` is the true last resort. */ --font-display: 'Satoshi', 'Satoshi-fallback', sans-serif; --font-body: 'Satoshi', 'Satoshi-fallback', sans-serif; --font-mono: 'Satoshi', 'Satoshi-fallback', sans-serif; /* ---------- TYPE · SCALE (fluid 360 → 1440) ----------------------- */ --fs-display: clamp(2.75rem, 1.55rem + 5.3vw, 6rem); --fs-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4rem); --fs-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3rem); --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); --fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.75rem; --fs-metric-xl: clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem); --fs-metric: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem); --fs-metric-sm: 0.9375rem; --lh-display: .94; --lh-h1: 1.02; --lh-h2: 1.08; --lh-h3: 1.2; --lh-h4: 1.35; --lh-lead: 1.55; --lh-body: 1.65; --lh-tight: 1.2; --ls-display: -.035em; --ls-h1: -.03em; --ls-h2: -.025em; --ls-h3: -.015em; --ls-h4: -.01em; --ls-eyebrow: .14em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- SPACE · 4px grid -------------------------------------- */ --sp-0: 0; --sp-6: 24px; --sp-11: 80px; --sp-1: 4px; --sp-7: 32px; --sp-12: 96px; --sp-2: 8px; --sp-8: 40px; --sp-13: 120px; --sp-3: 12px; --sp-9: 48px; --sp-14: 160px; --sp-4: 16px; --sp-10: 64px; --sp-15: 200px; --sp-5: 20px; --section-y-airy: clamp(80px, 6vw + 44px, 160px); --section-y-default: clamp(64px, 5vw + 36px, 128px); --section-y-dense: clamp(48px, 3vw + 32px, 88px); /* ---------- LAYOUT ------------------------------------------------ */ --container-wide: 1440px; --container: 1240px; --container-narrow: 920px; --container-text: 680px; --gutter: 20px; /* stepped up in responsive.css */ --gap: clamp(16px, 2vw, 32px); --measure: 68ch; /* ---------- RADIUS ------------------------------------------------ Nesting rule: inner = outer − padding, minimum --r-xs. */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px; /* ---------- SHADOW ------------------------------------------------ Ink-tinted, never black. Multi-layer: contact + ambient. */ --shadow-xs: 0 1px 2px rgb(7 26 18 / .04); --shadow-sm: 0 1px 2px rgb(7 26 18 / .04), 0 2px 8px -2px rgb(7 26 18 / .06); --shadow-md: 0 2px 4px rgb(7 26 18 / .04), 0 12px 24px -8px rgb(7 26 18 / .10); --shadow-lg: 0 2px 4px rgb(7 26 18 / .03), 0 24px 48px -16px rgb(7 26 18 / .14); --shadow-hero: 0 4px 8px rgb(7 26 18 / .03), 0 48px 96px -32px rgb(7 26 18 / .20); --shadow-dark: 0 2px 4px rgb(0 0 0 / .30), 0 20px 48px -16px rgb(0 0 0 / .50); --shadow-focus: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); --inset-top: inset 0 1px 0 rgb(255 255 255 / .55); /* ---------- GLASS ------------------------------------------------- */ --glass-bg: rgb(255 255 255 / .72); --glass-blur: blur(20px) saturate(180%); --glass-bg-dark: rgb(7 28 18 / .72); --glass-blur-dark: blur(24px) saturate(140%); /* ---------- ICON --------------------------------------------------- */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-stroke: 1.5; /* ---------- Z-INDEX · one scale, no ad-hoc values ------------------ */ --z-base: 0; --z-line: 1; --z-raised: 10; --z-sprite: 20; --z-dropdown: 40; --z-sticky: 60; --z-cursor: 70; --z-float: 80; --z-cta: 90; --z-nav: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; /* ---------- COMPONENT CONSTANTS ------------------------------------ */ --nav-h: 56px; /* raised to 64/88 in responsive */ --nav-h-scrolled: 56px; --touch-min: 44px; } /* ---------- DARK SURFACE SCOPE --------------------------------------- Applied to §7 Proof and §14 Footer. These are the ONLY two dark surfaces on the page — the symmetry closes the composition. */ [data-theme="dark"] { --paper: var(--deep-800); --ink-900: var(--deep-fg); --ink-800: var(--deep-fg); --ink-700: var(--deep-fg); --ink-600: var(--deep-fg); --ink-500: var(--deep-fg-muted); --ink-400: var(--deep-fg-muted); --ink-300: #4A6357; --ink-200: var(--deep-700); --ink-150: var(--deep-700); --ink-100: var(--deep-700); --ink-050: var(--deep-800); --signal-700: var(--signal-400); --signal-600: var(--signal-500); --focus-halo: var(--deep-900); --shadow-sm: var(--shadow-dark); --shadow-md: var(--shadow-dark); --shadow-lg: var(--shadow-dark); background-color: var(--deep-900); color: var(--deep-fg); /* Light text on dark renders too heavy without this. Deliberately NOT applied globally — it makes dark-on-light text too thin. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- COLOUR-VISION-SAFE DATA PALETTE --------------------------- Red/green is the worst pairing for deuteranomaly (~1 in 12 men, and this audience skews heavily male). Teal/amber separates cleanly under all three common CVD types. Toggled in the footer, persisted by app.js. */ [data-cvd="on"] { /* The alternate palette needs the same graphics/text split — amber #D97706 is only ~3.1:1 on paper, so swapping it in for text would trade one contrast failure for another. */ --data-gain: #0D9488; --data-gain-text: #0F766E; --data-loss: #D97706; --data-loss-text: #B45309; --heat-loss-3: #92400E; --heat-gain-1: #99F6E4; --heat-loss-2: #D97706; --heat-gain-2: #2DD4BF; --heat-loss-1: #FCD34D; --heat-gain-3: #0D9488; --heat-gain-4: #115E59; } } /* ========================================================================== @layer base ========================================================================== */ @layer base { html { font-family: var(--font-body); font-size: 100%; color: var(--ink-500); background-color: var(--paper); } body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); font-synthesis-weight: none; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* ---------- HEADINGS ----------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); color: var(--ink-900); font-weight: var(--fw-bold); hyphens: none; } h4, h5, h6 { font-family: var(--font-body); color: var(--ink-900); font-weight: var(--fw-semibold); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } @supports (text-wrap: balance) { h1, h2, h3, h4 { text-wrap: balance; } } @supports (text-wrap: pretty) { p, li { text-wrap: pretty; } } /* ---------- BODY ---------------------------------------------------- */ p { max-width: var(--measure); } strong, b { font-weight: var(--fw-semibold); color: var(--ink-700); } /* Italics are not used — neither the typeface nor the brand voice needs them. Emphasis is carried by weight and colour. */ em, i { font-style: normal; font-weight: var(--fw-medium); color: var(--ink-700); } small { font-size: var(--fs-sm); } /* ---------- LINKS ---------------------------------------------------- */ a:not([class]) { color: var(--signal-700); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color 180ms var(--ease-out-quad, ease); } a:not([class]):hover { color: var(--signal-700); } /* ---------- FIGURES · TABLES ------------------------------------------ */ figure { margin: 0; } figcaption { font-size: var(--fs-xs); color: var(--ink-400); } /* Every number that can change must be tabular, or counters jitter and tables shimmer. Applied broadly on purpose. */ th, td, time, output, [data-metric], .ss-num { font-variant-numeric: tabular-nums; } /* ---------- FOCUS ------------------------------------------------------ */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); } /* ---------- SVG ICONS -------------------------------------------------- */ svg[class*="icon"], .ss-icon { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; /* Optical, not geometric, centring against adjacent text. */ transform: translateY(-0.5px); } .ss-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ss-sprite symbol { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; } /* ---------- SCROLLBAR --------------------------------------------------- Styled, not hidden. On a page this long, hiding the scrollbar removes the user's only sense of document length. */ * { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ink-200); border: 2px solid transparent; background-clip: content-box; border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: content-box; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--deep-700); background-clip: content-box; } /* ---------- ANCHOR OFFSET ------------------------------------------------ Prevents a jump landing under the sticky nav. */ [id] { scroll-margin-top: calc(var(--nav-h-scrolled) + var(--sp-6)); } } /* ========================================================================== @layer layout Structural primitives only. Named patterns from 06-DESIGN-SYSTEM.md §7.5. ========================================================================== */ @layer layout { .ss-root { position: relative; z-index: var(--z-base); isolation: isolate; } .ss-main { display: block; } .ss-main:focus { outline: none; } /* ---------- CONTAINERS ----------------------------------------------- */ .ss-container, .ss-container--narrow, .ss-container--text, .ss-container--wide { width: 100%; margin-inline: auto; padding-inline: var(--gutter); } .ss-container { max-width: calc(var(--container) + var(--gutter) * 2); } .ss-container--narrow{ max-width: calc(var(--container-narrow) + var(--gutter) * 2); } .ss-container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); } .ss-container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } /* ---------- SECTIONS -------------------------------------------------- Sections NEVER collapse padding into each other. Each owns its full block padding; separation comes from background and hairline, not from margin arithmetic. This is what stops 14 sections reading as one scroll. */ .ss-section { position: relative; padding-block: var(--section-y-default); } .ss-section--airy { padding-block: var(--section-y-airy); } .ss-section--dense { padding-block: var(--section-y-dense); } .ss-section--flush { padding-block: 0; } .ss-section--tint { background: var(--ink-050); } .ss-section--rule { border-block-start: 1px solid var(--ink-200); } /* Full-bleed. `calc(50% - 50vw)` not `100vw` — 100vw includes the scrollbar and causes horizontal overflow on Windows. */ .ss-bleed { width: 100%; margin-inline: calc(50% - 50vw); padding-inline: var(--gutter); } .ss-section--bleed { padding-inline: 0; } /* ---------- GRID ------------------------------------------------------ */ .ss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 12 from --bp-lg */ gap: var(--gap); } .ss-grid--auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--gap); } /* ---------- STACK · CLUSTER · SWITCH ---------------------------------- */ .ss-stack { display: flex; flex-direction: column; gap: var(--sp-4); } .ss-stack--sm { gap: var(--sp-2); } .ss-stack--lg { gap: var(--sp-6); } .ss-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); } /* Two-up that collapses to one column below its own content threshold, independent of viewport — used by card pairs. */ .ss-switch { display: flex; flex-wrap: wrap; gap: var(--gap); } .ss-switch > * { flex: 1 1 min(100%, 22rem); } /* ---------- STICKY ---------------------------------------------------- position:sticky is preferred over JS pinning everywhere it will do the job: no JavaScript, never desynchronises, degrades perfectly. */ .ss-sticky { position: sticky; top: calc(var(--nav-h-scrolled) + var(--sp-8)); z-index: var(--z-raised); } /* ---------- HORIZONTAL RAIL ------------------------------------------ Any element wider than the viewport scrolls inside its own container. The page body must never scroll horizontally at any width from 320px. */ .ss-rail { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ss-rail::-webkit-scrollbar { display: none; } .ss-rail > * { scroll-snap-align: start; flex: none; } /* ---------- OVERLAY MOUNTS ------------------------------------------- */ /* .ss-line's own initLine() call is commented out in animation.js while the scroll-progress-sync bug is debugged — see that file. It ships as an empty host either way (JS injects the SVG rail into it), so this display:none is redundant defence, not the actual fix: nothing to see even without it, but explicit beats implicit for a "why is this here and empty" question later. */ .ss-line { display: none; position: fixed; inset: 0; z-index: var(--z-line); pointer-events: none; } .ss-float { position: fixed; inset-block-end: 88px; inset-inline-end: var(--sp-4); z-index: var(--z-float); } .ss-cta-bar{ position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-cta); padding-block-end: env(safe-area-inset-bottom); } .ss-nav { position: sticky; inset-block-start: 0; z-index: var(--z-nav); } } /* ========================================================================== @layer components Foundation-level components only — the ones that are structural rather than sectional. Buttons, cards, forms etc. are specified in 06-DESIGN-SYSTEM.md §8–§10 and implemented in Phase 2. ========================================================================== */ @layer components { /* ---------- SKIP LINK ------------------------------------------------- */ .ss-skip { position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); z-index: var(--z-toast); padding: var(--sp-3) var(--sp-5); background: var(--ink-900); color: var(--paper); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); transform: translateY(-200%); transition: transform 180ms ease; } .ss-skip:focus { transform: translateY(0); } /* ---------- GLASS ----------------------------------------------------- Only ever applied where something genuinely scrolls beneath. Max three glass surfaces per viewport. Never nested. Never over an image. */ .ss-glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--inset-top), var(--shadow-sm); border-block-end: 1px solid var(--ink-200); } [data-theme="dark"] .ss-glass, .ss-glass--dark { background: var(--glass-bg-dark); -webkit-backdrop-filter: var(--glass-blur-dark); backdrop-filter: var(--glass-blur-dark); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), var(--shadow-dark); border-block-end: 1px solid rgb(255 255 255 / .08); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ss-glass { background: rgb(255 255 255 / .96); } .ss-glass--dark, [data-theme="dark"] .ss-glass { background: var(--deep-800); } } @media (prefers-reduced-transparency: reduce) { .ss-glass { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } .ss-glass--dark, [data-theme="dark"] .ss-glass { background: var(--deep-800); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ---------- EDGE FADE ------------------------------------------------- Masks the ends of horizontal rails and wide tables. */ .ss-fade-end { position: relative; } .ss-fade-end::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 48px; background: var(--grad-fade-r); pointer-events: none; } /* ---------- EYEBROW --------------------------------------------------- */ .ss-eyebrow { font-size: var(--fs-eyebrow); line-height: var(--lh-tight); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-semibold); text-transform: uppercase; color: var(--ink-400); } /* ---------- BUTTON ---------------------------------------------------- Spec: 06-DESIGN-SYSTEM.md §8. Sizes sm 36 / md 44 / lg 52. Below 480 every md and lg is full-width and 48px minimum — two side-by-side buttons on a 375px screen is a design error, not a responsive strategy. */ .ss-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); block-size: 44px; padding-inline: var(--sp-5); border-radius: var(--r-md); font-family: var(--font-body); font-size: var(--fs-sm); /* 600 looks shouty at button scale, 400 looks unclickable. */ font-weight: var(--fw-medium); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; cursor: pointer; /* Never `transition: all` — it animates layout-triggering properties you did not intend. Declared explicitly in animations.css. */ } .ss-btn--sm { block-size: 36px; padding-inline: var(--sp-4); font-size: var(--fs-xs); border-radius: var(--r-sm); } .ss-btn--lg { block-size: 52px; padding-inline: var(--sp-7); font-size: var(--fs-body); } .ss-btn .ss-icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); } .ss-btn--lg .ss-icon { inline-size: var(--icon-md); block-size: var(--icon-md); } /* --- primary --- */ .ss-btn--primary { background: var(--signal-600); /* NOT --signal-500: white on it is 3.1:1 */ color: #FFFFFF; box-shadow: var(--shadow-sm); } .ss-btn--primary:hover { background: var(--signal-700); box-shadow: var(--shadow-md); } .ss-btn--primary:active { transform: scale(.985); box-shadow: var(--shadow-xs); } /* --- ghost --- */ .ss-btn--ghost { background: transparent; color: var(--ink-800); border: 1px solid var(--ink-200); } .ss-btn--ghost:hover { background: var(--ink-050); border-color: var(--ink-300); } .ss-btn--ghost:active { background: var(--ink-100); } /* --- text --- */ .ss-btn--text { block-size: auto; padding: var(--sp-1) var(--sp-1); color: var(--signal-700); background: none; } .ss-btn--text:hover { color: var(--ink-900); } /* Disabled uses dedicated tokens, never opacity — a half-transparent green button over a tinted section renders as mud. */ .ss-btn:disabled, .ss-btn[aria-disabled="true"] { background: var(--ink-200); color: var(--ink-400); border-color: transparent; box-shadow: none; cursor: not-allowed; pointer-events: none; } .ss-btn__label { display: inline-flex; align-items: center; gap: var(--sp-2); } /* Trailing arrow travels on hover. */ .ss-btn__arrow { transition: transform var(--dur-fast) var(--ease-out-quad); } @media (hover: hover) and (pointer: fine) { .ss-btn:hover .ss-btn__arrow { transform: translateX(3px); } } @media (max-width: 479px) { .ss-btn--md, .ss-btn--lg { inline-size: 100%; block-size: 48px; } } /* ---------- METRIC ------------------------------------------------------ */ .ss-metric { display: flex; flex-direction: column; gap: var(--sp-1); } .ss-metric__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: var(--fs-metric); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink-900); } .ss-metric__label { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--ink-400); } .ss-metric[data-tone="gain"] .ss-metric__value { color: var(--data-gain); } .ss-metric[data-tone="loss"] .ss-metric__value { color: var(--data-loss); } } /* ========================================================================== @layer utilities Deliberately small. This is not a utility framework — utilities exist for things that genuinely have no semantic home. ========================================================================== */ @layer utilities { .ss-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Visually hidden until focused — for skip targets and inline controls. */ .ss-sr-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ss-measure { max-width: var(--measure); } .ss-measure-off { max-width: none; } .ss-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ss-flow > * + * { margin-block-start: var(--sp-4); } .ss-flow > :last-child { margin-block-end: 0; } .ss-center { margin-inline: auto; text-align: center; } /* Paint containment for sections almost nobody reaches. Real saving, no visual cost. Intrinsic size prevents scroll-height thrash. */ .ss-defer-paint { content-visibility: auto; contain-intrinsic-size: auto 1200px; } .ss-no-select { user-select: none; -webkit-user-select: none; } } /* ======================================== PHONE IMAGE ======================================== */ .hero-phone { display: flex; align-items: center; justify-content: center; height: 100%; } .hero-phone img { display: block; width: 100%; width: 350px; height: auto; object-fit: contain; }