/* ========================================================================== theme.css — single source of truth for the whole site's look. Change a value here and it propagates everywhere. Components must never hardcode a color, font, or size; they read these tokens only. ART DIRECTION: "Operating System for Retail" — a technical schematic / drafting surface. The visual grammar is coordinate lines, ledger rules, measured ticks and monospace index labels. Authority is communicated through the precision of the system, not through luxury-serif decoration. Two themes share the SAME token names: :root -> light "drafting paper" (default) [data-theme="dark"] -> "inverted blueprint" (set on by main.js) ========================================================================== */ :root { /* ---- Accent ---------------------------------------------------------- A teal. --signal is the visible marker color; --signal-ink is a deeper shade for small text / hover on light paper where the bright teal would be too light to read. Used sparingly — a marker, not a fill. */ --signal: #2ec4b6; --signal-ink: #1a8a80; /* deeper for hover/active + readable text on light paper */ --signal-wash: #e6f7f5; /* faint tint for rare wash backgrounds */ --on-signal: #16140f; /* text/icons that sit ON the accent fill — must contrast with --signal. Change this if --signal ever becomes dark enough to need light text. */ /* ---- Fixed (theme-independent) --------------------------------------- Values that must NOT flip between light/dark. Kept as tokens so they're still edited only from theme.css. */ --logo-chip: #ffffff; /* white tile behind client logos, both themes */ --vignette: rgba(22,20,15,0.02); /* corner darkening behind content (light) */ /* ---- Ink & paper ----------------------------------------------------- */ --ink: #16140f; /* near-black, warm — drafting ink */ --ink-2: #514c43; /* secondary */ --ink-3: #8a847a; /* muted / schematic labels in mono */ --paper: #f4f1ea; /* warm drafting-paper base */ --paper-2: #ece8df; /* slightly deeper panel */ --surface: #faf8f3; /* raised card surface */ --line: #d8d2c5; /* schematic hairline */ --line-strong: #b9b1a0; /* heavier rule */ --grid-line: rgba(22,20,15,0.04); /* the faint coordinate grid */ /* ---- Typography ------------------------------------------------------- Three layers, each with a job: display -> oversized condensed grotesque. The voice. Big & tight. body -> humanist sans, neutral and legible. mono -> the schematic layer: index numbers, coordinates, ticks, measurements. This is the signature of the whole system. */ --font-display: "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Archivo", "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "Space Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Fluid type scale. The hero is intentionally enormous. */ --fs-mega: clamp(3.2rem, 1.2rem + 9vw, 11rem); /* hero statement */ --fs-h1: clamp(2.4rem, 1.4rem + 4vw, 5rem); --fs-h2: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); --fs-h3: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); --fs-lede: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); --fs-sm: 0.875rem; --fs-mono: 0.72rem; /* the small uppercase mono labels */ --lh-tight: 0.92; /* display lines nearly touch — dense */ --lh-snug: 1.15; --lh-body: 1.6; --tracking-mono: 0.16em; --tracking-display: -0.02em; /* ---- Spacing — wide range so we can alternate dense / spacious -------- */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 5rem; --space-8: 4.5rem; /* desktop regular section padding */ --space-9: 5rem; /* the "release" — big breathing sections */ --maxw: 1320px; /* wide drafting surface */ --maxw-prose: 660px; --radius: 0px; /* hard corners — this is a schematic, not a SaaS card */ --radius-soft: 3px; /* ---- End block (CTA + footer) ---------------------------------------- This band is ALWAYS a dark ink ground with light text, in both light and dark themes. It must NOT use --ink/--paper, because those flip in dark mode and turn the band light + the light footer text invisible. These fixed tokens keep the contact/footer readable in every theme. */ --end-bg: #16140f; --end-fg: #f4f1ea; /* primary text on the band */ --end-fg-2: rgba(244,241,234,0.78); /* body / links */ --end-fg-3: rgba(244,241,234,0.52); /* labels / muted */ --end-line: rgba(244,241,234,0.14); --end-grid: rgba(244,241,234,0.03); /* match dark-mode --grid-line so the footer grid doesn't read heavier */ --end-mark: rgba(244,241,234,0.20); /* the bleeding wordmark stroke */ --shadow-md: 0 24px 60px -28px rgba(22,20,15,0.30); --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.5s; } [data-theme="dark"] { /* Inverted blueprint: deep ink ground, paper becomes the light. */ --signal: #4fd1c5; --signal-ink: #6fdbd0; --signal-wash: #103330; --ink: #f1ede4; --ink-2: #b0a99c; --ink-3: #7d766a; --paper: #14130f; --paper-2: #1b1a15; --surface: #1c1b16; --line: #2e2c25; --line-strong: #45413a; --grid-line: rgba(241,237,228,0.03); --vignette: rgba(0,0,0,0.025); /* deeper corner vignette on dark ground */ --shadow-md: 0 24px 60px -28px rgba(0,0,0,0.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --signal: #4fd1c5; --signal-ink: #6fdbd0; --signal-wash: #103330; --ink: #f1ede4; --ink-2: #b0a99c; --ink-3: #7d766a; --paper: #14130f; --paper-2: #1b1a15; --surface: #1c1b16; --line: #2e2c25; --line-strong: #45413a; --grid-line: rgba(241,237,228,0.03); --vignette: rgba(0,0,0,0.025); --shadow-md: 0 24px 60px -28px rgba(0,0,0,0.7); } }