/* Design tokens. Palette, type and rhythm are read from the Dot Pad awwwards site (Wayback snapshot 20231031225159 of pad.dotincorp.com), which is pure monochrome: body{background-color:#000;color:#fff}, a 6px white dot motif, -0.025em display tracking, +0.125em eyebrow tracking, accent #cc480f. The v1.5 overhaul turns that dot from an ornament into the page's ground and measuring system — see docs/DESIGN-DECISION-LOG.md, D-004. Depth is carried by hairlines, never by drop shadows (D-005). */ :root { /* --- brand constant ---------------------------------------------------- */ /* Mint green, not the exemplar's #cc480f orange — a deliberate aesthetic borrow from a notification-platform reference (Dribbble shot 25945136), kept to colour and shape only. See D-018 in DESIGN-DECISION-LOG.md. */ --accent-brand: #34e08a; /* --- type -------------------------------------------------------------- */ --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --serif: 'Sorts Mill Goudy', Georgia, 'Times New Roman', serif; --track-display: -0.025em; --track-tight: -0.0125em; --track-eyebrow: 0.125em; --fs-eyebrow: 0.6875rem; --fs-small: 0.8125rem; --fs-body: 1rem; --fs-lead: clamp(1.0625rem, 0.9rem + 0.7vw, 1.375rem); --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --fs-h2: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem); /* 6rem set a 214px two-line slab at 1440 and left the URL bar looking like a footnote under it. Every page surveyed that leads with an input keeps the headline well under the control's importance — v0 runs 32px, Bolt and Same ~56px. 4.5rem keeps the serif second line monumental and gives the hero's height back to the thing you are meant to touch. See D-006. */ --fs-h1: clamp(2.5rem, 1.1rem + 4.4vw, 4.5rem); /* --- rhythm ------------------------------------------------------------ */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px; --gutter: clamp(20px, 4vw, 64px); --measure: 68ch; --shell: 1440px; --topbar-h: 64px; --radius: 4px; /* the exemplar's .dot border-radius — chips, badges */ --radius-card: 6px; /* panels and framed surfaces */ --radius-pill: 999px; /* the URL bar, and every .btn (D-018) */ --dot-pitch: 6px; /* the exemplar's .dot width/height */ /* The ground field. The wordmark is four dots on a 9px pitch; the page is the same dot on the same pitch, held near the floor of visibility. One background-image on — no extra element, no image request. */ --ground-pitch: 9px; --ground-dot-r: 1px; /* The blueprint frame: the shell's own gutters, drawn. Firecrawl runs these hairlines the full height of the page and straight through the sticky header; ours are fixed, so they read as the instrument's bezel rather than as page furniture that scrolls away. */ --frame-w: 1px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 620ms; } /* --- dark: the exemplar's native mode, and this site's default ----------- */ :root, :root[data-theme='dark'] { color-scheme: dark; --ground: #000000; --raised: #0c0c0c; --sunk: #060606; --ink: #ffffff; --ink-2: #a4a4a4; --ink-3: #6d6d6d; --rule: #232323; --rule-strong: #3a3a3a; --accent: var(--accent-brand); --accent-text: #5eeba8; --on-accent: #062617; --dot: #ffffff; --focus: #ffffff; --ground-dot: #101010; /* the dot field on black: just above the noise floor */ --frame-rule: #161616; /* the blueprint hairline, quieter than --rule */ /* The input surface. Deliberately lighter than --raised: an omnibox has to read as a well you can type into, and on a #000 ground --raised (#0c0c0c) disappears. These replace the four hex values that used to be hard-coded in components.css. */ --field: #1c1c1f; --field-rule: #37373d; } :root[data-theme='light'] { color-scheme: light; --ground: #ffffff; --raised: #f6f6f6; --sunk: #ececec; --ink: #000000; --ink-2: #5b5b5b; --ink-3: #767676; --rule: #e2e2e2; --rule-strong: #c8c8c8; --accent: var(--accent-brand); --accent-text: #0f8a4c; --on-accent: #062617; --dot: #000000; --focus: #000000; --ground-dot: #ededed; --frame-rule: #ededed; --field: #eeeef1; --field-rule: #d7d7de; } /* Follow the OS only when the visitor has not chosen. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --ground: #ffffff; --raised: #f6f6f6; --sunk: #ececec; --ink: #000000; --ink-2: #5b5b5b; --ink-3: #767676; --rule: #e2e2e2; --rule-strong: #c8c8c8; --accent-text: #0f8a4c; --dot: #000000; --focus: #000000; --ground-dot: #ededed; --frame-rule: #ededed; --field: #eeeef1; --field-rule: #d7d7de; } }