/* ============================================================ Privacy Scanner Website — Design Tokens Source: DESIGN_SPEC.md §6 + §6A Browser floor: Safari 16.4+, Chrome 111+, Firefox 113+ (all March-May 2023). color-mix(), :has(), container queries, oklch() used without fallbacks. Do not add legacy fallbacks — see DESIGN_SPEC.md §6B. ============================================================ */ /* ============================================================ §6A — @font-face declarations (self-hosted Geist + JetBrains Mono) Files live under /fonts/ (added in a later phase). Latin + latin-ext subsets only — no CJK web fonts (system fonts handle ja / zh-Hans / ko, see §6A CJK strategy). "Geist Fallback" is a size-adjusted local("Arial") to absorb FOUT layout shift while the Geist variable WOFF2 loads. ============================================================ */ @font-face { font-family: "Geist"; src: url("/fonts/geist-variable-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist"; src: url("/fonts/geist-variable-latin-ext.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-variable-latin.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-007F, U+00A0-00FF, U+0131, U+0152-0153, U+2000-206F; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-variable-latin-ext.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB; } @font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 105%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ============================================================ §6.1 — §6.9 — Design tokens on :root ============================================================ */ :root { /* ============================================================ §6.1 — Color tokens Navy stack + single mintteal accent. Risk colors app-locked. ============================================================ */ /* ---------- Surface (navy stack, dark → light) ---------- */ --bg-base: #07101F; /* page background, deepest */ --bg-1: #0B1628; /* primary surface (sections) */ --bg-2: #111E33; /* elevated card */ --bg-3: #17263E; /* hover card, popovers */ --bg-4: #1F3050; /* selected / pressed surface */ --bg-inset: #050B17; /* recessed wells (status box, code) */ /* ---------- Borders & dividers ---------- */ --border-soft: rgba(255, 255, 255, 0.06); /* hairline divider */ --border: rgba(255, 255, 255, 0.10); /* default border */ --border-strong: rgba(255, 255, 255, 0.16); /* card outline on hover */ --border-teal: rgba(10, 186, 181, 0.32); /* accented border */ /* ---------- Text ---------- */ --text: #E8EEF7; /* primary body / headings */ --text-soft: #B6C2D6; /* secondary copy */ --text-dim: #7A879F; /* tertiary, captions, labels */ --text-faint: #4E5C75; /* placeholder, disabled */ --text-on-teal: #07101F; /* text on filled teal CTAs */ /* ---------- Brand · Teal ---------- */ --teal: #0ABAB5; /* primary brand */ --teal-hover: #15D4CF; /* CTA hover */ --teal-active: #089A95; /* CTA pressed */ --teal-dim: #0A7C79; /* teal text on dark, calmed */ --teal-glow: rgba(10, 186, 181, 0.45); /* shadow + radar sweep */ --teal-wash: rgba(10, 186, 181, 0.08); /* faint fill behind chips */ /* ---------- Risk (app-locked — do not modify) ---------- */ --risk-critical: #FF3B5C; --risk-high: #FF8C42; --risk-medium: #FFB84D; --risk-low: #5AC8FA; --risk-safe: #30D158; --risk-sensitive: #BF5AF2; /* Tinted washes (12% alpha) for risk badges / soft fills */ --risk-critical-wash: rgba(255, 59, 92, 0.12); --risk-high-wash: rgba(255, 140, 66, 0.12); --risk-medium-wash: rgba(255, 184, 77, 0.12); --risk-low-wash: rgba(90, 200, 250, 0.12); --risk-safe-wash: rgba(48, 209, 88, 0.12); --risk-sensitive-wash: rgba(191, 90, 242, 0.12); /* ---------- Live status indicator ---------- */ --live-dot: #30D158; /* the eyebrow pulse dot */ --live-dot-glow: rgba(48, 209, 88, 0.55); /* ============================================================ §6.2 — Typography tokens Geist Sans for legible copy, JetBrains Mono for status data. CJK falls through to system fonts (see §6A). ============================================================ */ /* ---------- Font stacks ---------- */ --font-sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", /* ja */ "PingFang SC", "Microsoft YaHei", /* zh-Hans */ "Apple SD Gothic Neo", "Malgun Gothic", /* ko */ "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---------- Type scale (rem, base 16px) ---------- */ --fs-display: clamp(3.5rem, 6vw + 1rem, 6rem); /* H1 hero, 56–96 */ --fs-h1: clamp(2.5rem, 3.6vw + 1rem, 4rem); /* page H1, 40–64 */ --fs-h2: clamp(2rem, 2.2vw + 1rem, 3rem); /* section H2, 32–48 */ --fs-h3: 1.5rem; /* sub H3, 24 */ --fs-h4: 1.125rem; /* card H4, 18 */ --fs-body-lg: 1.125rem; /* lede, 18 */ --fs-body: 1rem; /* default, 16 */ --fs-body-sm: 0.9375rem; /* secondary, 15 */ --fs-caption: 0.8125rem; /* caption, 13 */ --fs-eyebrow: 0.75rem; /* eyebrow, 12 */ --fs-mono-lg: 0.9375rem; /* status values */ --fs-mono: 0.8125rem; /* status labels */ --fs-mono-sm: 0.6875rem; /* meta chips, 11 */ /* ---------- Weights ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Avoid 800/900 — CJK fallbacks rarely ship those weights. */ /* ---------- Line heights ---------- */ --lh-display: 0.95; /* H1 hero, tight */ --lh-heading: 1.1; /* H2–H4 */ --lh-body: 1.55; /* default body */ --lh-body-cjk: 1.75; /* override on :lang(ja), :lang(zh-Hans), :lang(ko) */ --lh-mono: 1.45; /* status data */ --lh-eyebrow: 1.2; /* ---------- Letter spacing ---------- */ --ls-display: -0.03em; /* tight headings */ --ls-heading: -0.02em; --ls-body: 0; --ls-mono: -0.005em; --ls-eyebrow: 0.16em; /* uppercase labels */ --ls-caps: 0.08em; /* small caps text */ /* CJK override: all letter-spacing → 0 on :lang(ja|zh-Hans|ko) — applied globally below. */ /* ============================================================ §6.3 — Spacing scale (8-pt grid + two sub-steps) ============================================================ */ --sp-0: 0; --sp-1: 4px; /* hairline gap, chip inner */ --sp-2: 8px; /* tight stack */ --sp-3: 12px; /* button inner-y, icon-to-label */ --sp-4: 16px; /* default gap */ --sp-5: 24px; /* card padding */ --sp-6: 32px; /* between elements */ --sp-7: 48px; /* between subsections */ --sp-8: 64px; /* between sections (mobile) */ --sp-9: 96px; /* between sections (desktop) */ --sp-10: 128px; /* hero / final vertical rhythm */ --sp-11: 160px; /* extra-large hero space */ /* Horizontal page gutters */ --gutter-mobile: 20px; --gutter-tablet: 32px; --gutter-desktop: 48px; /* Content width caps */ --maxw-prose: 62ch; /* long-form copy */ --maxw-content: 1200px; /* default container */ --maxw-wide: 1360px; /* hero, full sections */ /* ============================================================ §6.4 — Radius ============================================================ */ --r-xs: 4px; /* chips, tags */ --r-sm: 8px; /* small buttons, inputs */ --r-md: 12px; /* default card */ --r-lg: 16px; /* elevated card */ --r-xl: 24px; /* hero panels */ --r-pill: 9999px; /* pill buttons, language menu trigger */ /* ============================================================ §6.5 — Shadow & glow Dark-theme: inner highlights + tinted glows, not black drops. ============================================================ */ /* Elevation — outer shadow + 1px top inner highlight */ --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 50px rgba(0, 0, 0, 0.45); --shadow-xl: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 32px 80px rgba(0, 0, 0, 0.55); /* Inset wells (status box, code blocks) */ --shadow-inset: 0 1px 0 rgba(0, 0, 0, 0.50) inset, 0 0 0 1px var(--border-soft) inset; /* Teal glow — primary CTA, radar centre, active states */ --glow-teal-sm: 0 0 16px var(--teal-glow); --glow-teal: 0 0 32px var(--teal-glow); --glow-teal-lg: 0 0 64px var(--teal-glow); /* Focus ring — keyboard nav. 2px solid teal at 80% + 4px halo. */ --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--teal); /* ============================================================ §6.6 — Motion tokens Reduced-motion overrides applied via @media block below. ============================================================ */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 400ms; --dur-slower: 600ms; /* Radar — single source of truth */ --radar-rotation: 8s; /* one full sweep revolution */ --radar-pulse: 2.4s; /* centre pulse cycle */ --radar-hit-stagger: 0.6s; /* delay between hit appearances */ /* Easing */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default UI */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* enter/exit */ --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /* CTA press, badge pop */ --ease-linear: linear; /* radar rotation */ /* ============================================================ §6.7 — Breakpoints DOCUMENTATION ONLY. CSS does not allow custom properties inside @media queries — every @media rule must hardcode the px value. These names exist so refactors can grep/replace consistently. See DESIGN_SPEC.md §6 Implementation Notes #3. ============================================================ */ --bp-sm: 600px; /* phone landscape / small tablet */ --bp-md: 1024px; /* tablet → desktop */ --bp-lg: 1280px; /* wide desktop */ --bp-xl: 1600px; /* ultra-wide caps */ /* ============================================================ §6.8 — Z-index scale ============================================================ */ --z-base: 1; --z-card: 10; --z-sticky: 100; /* sticky nav */ --z-overlay: 500; /* modal/lang-menu backdrop */ --z-modal: 600; /* modal/lang-menu content */ --z-toast: 800; --z-skip: 1000; /* skip-to-content link */ /* ============================================================ §6.9 — Component-level tokens Reference primitives above. Re-skin a single component without grepping the whole codebase. ============================================================ */ /* Buttons */ --btn-h-sm: 36px; --btn-h-md: 44px; /* WCAG 44px hit target — also CTA default */ --btn-h-lg: 56px; /* hero CTA */ --btn-px: var(--sp-5); --btn-radius: var(--r-pill); /* Cards */ --card-bg: var(--bg-2); --card-bg-hover: var(--bg-3); --card-border: 1px solid var(--border); --card-padding: var(--sp-6); /* Nav */ --nav-h: 72px; --nav-h-mobile: 60px; --nav-bg: color-mix(in oklab, var(--bg-base) 80%, transparent); --nav-blur: saturate(180%) blur(20px); /* Status box */ --status-bg: var(--bg-inset); --status-border: 1px solid var(--border-teal); --status-radius: var(--r-md); --status-padding: var(--sp-5); --status-leader: var(--text-faint); /* the dot leaders */ /* Radar — geometry primitives (sweep arc revised in §6 Addendum) */ --radar-size-mobile: 280px; --radar-size-tablet: 400px; --radar-size-desktop: 520px; --radar-ring-stroke: 1px; --radar-ring-color: rgba(10, 186, 181, 0.18); --radar-grid-color: rgba(10, 186, 181, 0.10); --radar-sweep-start: rgba(10, 186, 181, 0.55); --radar-sweep-end: rgba(10, 186, 181, 0); --radar-sweep-arc: 60deg; /* revised from 90deg in §6 Addendum */ --radar-sweep-fade-arc: 30deg; /* trailing fade beyond the lit wedge */ } /* ============================================================ §6.6 — Reduced-motion overrides Zeros transition durations and the radar's animation tokens. The radar component must additionally hide its sweep entirely (see §6 Implementation Notes #8 and §8). ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; --radar-rotation: 0s; /* radar held static — see §8 */ --radar-pulse: 0s; } } /* ============================================================ Naming convention reminder (§6 Implementation Notes #9) All tokens use kebab-case and follow: ---- New tokens added later must follow the same pattern. Do not introduce --colorPrimary or --primary_color variants. Intentionally absent: gradient tokens (scoped to radar + one CTA glow, kept inline), font-loading tokens (handled in ), icon-size scale (icons inherit from text via 1em). ============================================================ */