/* ══════════════════════════════════════════════════════════════════════════ NOTB DESIGN TOKENS — the single source of truth for colour, type, space, motion and elevation. Every other stylesheet reads from here and defines no raw values of its own. Rule: if you are about to type a hex code, a pixel size or a duration anywhere else, you are adding a token. Put it here instead. See design/STYLE-GUIDE.md for the reasoning behind each scale. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── INK ──────────────────────────────────────────────────────────────── One ramp, five steps. `--ink` is also the redaction colour — a redaction is text at maximum density, not a separate "black". */ --ink: #0f1721; --ink-2: #3d4956; --muted: #5c6774; --muted-2: #6b747e; --faint: #6d737c; --placeholder:#6e737b; /* ── PAPER ────────────────────────────────────────────────────────────── Warmer than white on purpose. A near-white page gives a black bar no ground to sit on, and the whole visual system is ink on paper. */ --paper: #faf9f7; --paper-2: #f2f0eb; /* recessed: table heads, chips, wells */ --surface: #ffffff; /* raised: cards, panels */ --line: rgba(15, 23, 33, .10); --line-soft: rgba(15, 23, 33, .06); --line-strong:rgba(15, 23, 33, .16); /* On the dark bands. Kept as tokens so a forensic component can be dropped onto either canvas without inventing its own greys. */ --on-dark: #e6eaef; --on-dark-2: #c8d0da; --on-dark-muted:#8fa39c; --line-dark: rgba(255, 255, 255, .12); --line-dark-soft:rgba(255, 255, 255, .07); /* ── ACCENT ───────────────────────────────────────────────────────────── Green is "protected". It is the colour of the strike through the logo, of a verified removal, and of the primary action. It should appear MORE often as the visitor descends the page — that progression is the story. */ --accent: #0f7a68; --accent-ink: #0a5a4d; --accent-lift: #12907a; /* hover */ --accent-soft: #5cc0a8; /* on dark */ --accent-wash: rgba(15, 122, 104, .08); --accent-ring: rgba(15, 122, 104, .14); /* ── VERDICT PALETTE ──────────────────────────────────────────────────── LOAD-BEARING. These four states are a product invariant (CLAUDE.md #1), not a visual preference. `blocked` must never be able to read as `clear`. found a listing exposing this person was confirmed clear we searched successfully and there was nothing blocked the site refused our scanner — NOT evidence of absence nopath no public search exists / no response — nothing was checked Colour is never the only channel: every verdict also carries a distinct glyph (see .verdict in components.css) so the meaning survives colour blindness, greyscale printing and low-quality screens. */ --v-found: #b4443c; --v-found-bright: #e8756b; /* on dark */ --v-found-wash: #fdf2ee; --v-clear: var(--accent); --v-clear-bright: var(--accent-soft); --v-clear-wash: var(--accent-wash); --v-blocked: #9f6630; --v-blocked-bright: #ffb547; --v-blocked-wash: #fdf6ea; --v-nopath: var(--placeholder); --v-nopath-bright: #7d8794; --v-nopath-wash: rgba(15, 23, 33, .04); --danger: var(--v-found); --danger-bright: var(--v-found-bright); /* ── TYPE ─────────────────────────────────────────────────────────────── Serif for editorial voice (headlines, evidence, the brand). Sans for UI. Mono for anything forensic — a broker id, a status, a timestamp, an eyebrow. If a number could appear in an audit trail, it is mono. Files self-hosted, subset, woff2. No CDN and no Google Fonts call: the network tab is part of a privacy product's argument. See fonts/README.md — until those files exist the stack falls through to system faces. */ --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* Fluid scale. Every step clamps so nothing needs a per-breakpoint override. Ratio ≈ 1.22 at the body end, opening to ≈ 1.5 at display sizes. */ --fs-display: clamp(34px, 5vw, 64px); --fs-h1: clamp(30px, 4.2vw, 52px); --fs-h2: clamp(26px, 3.4vw, 42px); --fs-h3: clamp(19px, 1.6vw, 23px); --fs-lead: clamp(16.5px, 1.3vw, 18.5px); --fs-body: 16.5px; /* 40+ readers, read carefully — do not shrink */ --fs-sm: 14px; --fs-xs: 12.5px; --fs-micro: 11px; /* mono eyebrows and labels only */ --lh-tight: 1.06; --lh-snug: 1.18; --lh-normal: 1.45; --lh-loose: 1.7; --ls-display: -.038em; --ls-tight: -.022em; --ls-normal: 0; --ls-mono: .1em; /* mono eyebrows are always tracked out */ /* ── SPACE ────────────────────────────────────────────────────────────── 4px base. Named by step, not by use, so a component can't quietly claim ownership of a value. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --gutter: 40px; --gutter-sm: 16px; --measure: 1160px; /* page max width */ --measure-read:44ch; /* body copy max — never wider */ /* ── RADIUS ─────────────────────────────────────────────────────────────── */ --r-xs: 5px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 26px; --r-pill: 999px; /* ── ELEVATION ────────────────────────────────────────────────────────── Three levels only. Long, soft, low-opacity — a privacy product should feel calm, and a tight dark shadow reads as a dialog demanding action. */ --sh-1: 0 18px 40px -28px rgba(15, 23, 33, .45); --sh-2: 0 34px 70px -46px rgba(15, 23, 33, .45); --sh-3: 0 1px 0 rgba(255,255,255,1) inset, 0 0 0 1px rgba(15, 23, 33, .045), 0 60px 120px -50px rgba(15, 23, 33, .42); /* ── MOTION ───────────────────────────────────────────────────────────── One idea, repeated: things get covered. Every duration below belongs to that idea or to a state change; nothing here exists for decoration. */ --dur-fast: 150ms; --dur: 220ms; --dur-slow: 420ms; --ease: cubic-bezier(.2, .7, .2, 1); /* ── LAYERS ─────────────────────────────────────────────────────────────── */ --z-sheet: 1; --z-glass: 2; --z-sticky: 30; --z-nav: 60; --z-overlay: 90; } /* The glass hero is the one place the design leans on a GPU effect. Where backdrop-filter is unsupported the panel must still be opaque enough to read against a dense record — so the fallback is a solid surface, not transparency. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-bg: var(--surface); --glass-blur: none; } } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { /* 13px is a tuned threshold, not a round number: the record underneath must be visibly PRESENT and completely UNREADABLE. At 28px the panel reads as a plain white card and the entire metaphor disappears. */ --glass-bg: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.46)); --glass-blur: blur(13px) saturate(1.5); } }