/* 31.05.26 02:25 AM / 02:25 — edited by Claude — create central design-token file; single source of truth for the whole coxcli.cc site */ /* 27.06.26 04:00 AM / 04:00 — edited by Claude — i3: added the FONT ROLE CONTRACT (--cox-font-display/-heading/-body/-mono/-ui) consumed by the global Fonts switcher js/fonts.js. The legacy --font-display/-sans/-mono are now alias-with-fallback bridges onto the role vars (see the Typography block) so the whole site follows the switcher with zero visual change until a font is picked. */ /* ============================================================================ tokens.css — THE one place to restyle the entire site. Every color, space, font, radius, shadow, and motion value lives here as a named CSS custom property. Nothing else in the codebase hardcodes these. Re-skin test: you should be able to change the whole look by editing only this block. If you can't, the value is in the wrong place. Theme: dark RETRO-TERMINAL (a tasteful CRT joke) — pixel display type, soft phosphor glow, faint scanlines, chunky blocky corners. Three brand accents drive the identity — Claude (warm coral) and Codex (cool teal) are the two agents that collide in the hero; Cox (violet) is what they fuse into. ============================================================================ */ /* 06.06.26 06:07 PM / 18:07 — edited by Claude — RETRO-TERMINAL identity: killed the rejected Space Grotesk (display) + Geist + Geist Mono (body/mono) faces and the system-ui/Helvetica fallback stacks. New self-hosted trio: VT323 (pixel/CRT display for headings/hero/brand) + Atkinson Hyperlegible (humanist, max-legibility body — NOT Inter/system-ui/Helvetica) + IBM Plex Mono (clean code/terminal mono). All woff2, latin subset, font-display:swap so text paints immediately. Token NAMES unchanged so peer pages keep resolving. */ /* 10.06.26 02:59 AM / 02:59 — edited by Claude — user rejected VT323 as "horrible" (crude/illegible at section sizes). DELETED the VT323 + IBM Plex Mono @font-face blocks that lived here and unified display+mono on SPACE MONO — a genuinely playful terminal mono (quirky terminals, slashed zero, real 400+700 cuts) that stays legible at hero sizes. Atkinson Hyperlegible stays as the readable body counterweight. Token NAMES still unchanged. vt323-400.woff2 / ibm-plex-mono-*.woff2 remain on disk but are no longer referenced. */ /* Display + Mono — Space Mono: terminal-native but characterful. One family for headings, brand, badges, and code keeps the whole site speaking "terminal" with a single voice. Real 400 + 700 cuts — no faux-bold. */ @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/space-mono-400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/space-mono-700.woff2") format("woff2"); } /* Body — Atkinson Hyperlegible: humanist sans engineered by the Braille Institute for maximum legibility (distinctive letterforms that don't blur together). The readable counterweight to the pixel display. Ships 400 + 700 only; CSS weights 500/600/650 resolve to the nearest cut, no faux-bold. */ @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/atkinson-hyperlegible-400.woff2") format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/atkinson-hyperlegible-700.woff2") format("woff2"); } /* 10.06.26 03:14 AM / 03:14 — edited by Claude — DELETED the IBM Plex Mono 400/700 @font-face pair (and its "Mono — IBM Plex Mono…" comment) that stood here: mono unified on Space Mono above, so the declarations were dead. The woff2 files stay on disk, unreferenced. */ :root { /* ---- Color: surfaces --------------------------------------------------- Near-black, not pure #000, so glowing accents and shadows read cleanly. Three depths: page background, slightly-raised elevated, and card surface. */ /* 31.05.26 05:04 AM / 05:04 — edited by Claude — premium palette refresh: deeper near-black with a faint cool/violet undertone for richness, more vivid brand accents, stronger gradient system. Names unchanged. */ --color-bg: #08090d; /* deep near-black, faint cool undertone */ --color-bg-elevated: #0d0e14; --color-surface: #14151d; /* ---- Color: text ------------------------------------------------------- Near-white, not pure #fff, slightly cool to sit on the violet-tinted dark. */ --color-text: #f4f5f8; --color-text-muted: #9b9cae; /* ---- Color: lines ------------------------------------------------------ */ --color-border: #232533; /* ---- Color: brand accents ---------------------------------------------- --color-claude + --color-codex are the two colliding entities in the hero. --color-cox is the fused result. --color-accent is the primary interactive color (CTAs, links, focus) and is intentionally the Cox fusion tone so every action on the site is on-brand. Punchier than before. */ --color-claude: #ff8a5c; /* vivid warm coral — Claude */ --color-codex: #2ad7c0; /* vivid teal — Codex */ --color-cox: #8d7bff; /* vivid violet — the fusion */ --color-accent: #8d7bff; /* primary interactive = Cox fusion */ --color-accent-hover:#a99bff; /* lighter accent for hover/active states */ --color-danger: #ff5d6c; /* errors, destructive, "the robots were wrong" */ /* Soft translucent washes derived from the accents — used for glows, tinted backgrounds, and selection without re-typing rgba everywhere. */ --color-accent-soft: rgba(141, 123, 255, 0.16); --color-claude-soft: rgba(255, 138, 92, 0.16); --color-codex-soft: rgba(42, 215, 192, 0.16); /* ---- Gradients --------------------------------------------------------- The signature brand gradient — Claude → Cox → Codex — used for the hero wordmark and accent flourishes. Tokenized so it's defined once. */ --gradient-brand: linear-gradient(105deg, var(--color-claude) 0%, var(--color-cox) 52%, var(--color-codex) 100%); --glow-accent: radial-gradient(60% 60% at 50% 40%, var(--color-accent-soft), transparent 70%); /* ---- Spacing scale (4px base) ----------------------------------------- Fixed steps only. No off-scale magic numbers anywhere in the site. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4.5rem; /* 72px */ /* ---- Typography -------------------------------------------------------- Three families, retro-terminal: a pixel/CRT DISPLAY for headings/hero/brand, a humanist SANS for readable prose, a clean MONO for code + the CLI flavor. Self-hosted woff2 (latin subset), font-display:swap. */ /* 06.06.26 06:07 PM / 18:07 — edited by Claude — retro-terminal font values (names unchanged so hero.css/pages.css keep resolving). Fallbacks are bare generic keywords only — the rejected system-ui/-apple-system/Segoe/Helvetica/Arial stacks are gone. Display + mono fall back to monospace (metric-closer to a pixel/mono face than a sans). */ /* 10.06.26 02:59 AM / 02:59 — edited by Claude — VT323/IBM Plex Mono values replaced: display + mono now both resolve to the self-hosted Space Mono (names unchanged; peer pages.css and hero.js keep resolving by name) */ /* 27.06.26 04:00 AM / 04:00 — edited by Claude — i3: FONT ROLE CONTRACT for the global Fonts switcher (js/fonts.js). Five role custom properties own the site's typography BY ROLE: --cox-font-display big hero / poster type (default: Space Mono) --cox-font-heading section headings h1–h6 (default: Space Mono) --cox-font-body paragraphs / prose (default: Atkinson Hyperlegible) --cox-font-mono code / terminal (default: Space Mono) --cox-font-ui buttons / form controls (default: Atkinson Hyperlegible) They are intentionally NOT assigned here — js/fonts.js sets them inline on when the user picks a font (inline beats every stylesheet, including the [data-theme]/[data-look] pins) and clears them to revert. Every consumer reads `var(--cox-font-ROLE, )`, so the fallback IS the default and NOTHING changes until a font is chosen. This mirrors the pattern i1/i2 already use in pricing.html / look-w.css (`var(--cox-font-*, )`), so ASSIGNING the vars here would have OVERRIDDEN their per-variant fonts — hence the alias-with-fallback below instead. The three legacy names stay as the site-wide bridge: every existing consumer of --font-display/-sans/-mono now follows the switcher with zero file edits, while any look that re-points them in its own scope (look-w) still wins. */ --font-display: var(--cox-font-display, "Space Mono", "Courier New", ui-monospace, monospace); --font-sans: var(--cox-font-body, "Atkinson Hyperlegible", ui-sans-serif, sans-serif); --font-mono: var(--cox-font-mono, "Space Mono", ui-monospace, monospace); /* Type scale (rem). Body is --text-base. Headings step up from there. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.5rem; /* 40px */ --text-5xl: clamp(2.75rem, 6vw, 4rem); /* fluid hero/display size */ --leading-tight: 1.15; --leading-normal: 1.6; /* ---- Shape: radius ----------------------------------------------------- 31.05.26 02:25 — original soft radii (6/10/18). Now blockier for the terminal/CRT feel — corners read as chunky pixels, not soft cards. 06.06.26 06:07 PM / 18:07 — edited by Claude — chunkier/blockier radii (6/10/18 → 3/5/8) for the retro-terminal look; names unchanged. */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-full: 999px; /* Chunky terminal-window border weight for cards/code panels. New token — existing 1px hairlines stay 1px unless a component opts into this. */ --border-thick: 2px; /* ---- Shape: shadow ----------------------------------------------------- Dark-theme shadows lean on deeper blacks plus a faint top highlight so raised surfaces read without looking muddy. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); /* ---- Retro-terminal personality ---------------------------------------- 06.06.26 06:07 PM / 18:07 — edited by Claude — CRT identity tokens. Defined once here; applied tastefully (headings, brand, CTA, code) — never noisy. --glow-text: phosphor glow for big pixel headings + the brand wordmark. --glow-accent-box: soft accent halo for the primary CTA / focus. --scanline: faint horizontal CRT raster, layered under content as a bg. */ /* 10.06.26 02:59 AM / 02:59 — edited by Claude — glow retuned for the crisp Space Mono face (the heavy 14px halo suited a pixel font; on a sharp mono it reads as blur). Added the playful-terminal tokens: --shadow-pop (hard offset "sticker" shadow for buttons/cards — the playful press feel), --blink (terminal cursor blink cadence), --color-ok (truthy green for prompt glyphs / "it worked" accents). */ --glow-text: 0 0 12px rgba(141, 123, 255, 0.35); --glow-accent-box: 0 0 0 1px var(--color-accent-soft), 0 6px 22px rgba(141, 123, 255, 0.35); --scanline: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px); --color-ok: #3ddc84; /* terminal green — prompt glyphs, success bits */ --shadow-pop: 4px 4px 0 rgba(141, 123, 255, 0.28); --shadow-pop-hover: 6px 6px 0 rgba(141, 123, 255, 0.38); --blink: 1.1s; /* block-cursor blink cadence (steps(2) in the keyframes) */ /* ---- Motion ------------------------------------------------------------ */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Layout ------------------------------------------------------------ */ --container-max: 1120px; --z-header: 100; } /* ============================================================================ 10.06.26 03:57 AM / 03:57 — edited by Claude — THEME SYSTEM (user: "3-5 color schemes, whole themes… so i can easily rummage around"). The :root block above IS theme "terminal" (the dark-terminal default — js/themes.js sets data-theme="terminal" explicitly but no override block is needed). Each block below re-VALUES tokens only — never renames — so every component and the peer's pages.css restyle automatically. --gradient-brand and --glow-accent are defined on var() references, so they follow each theme for free. js/themes.js owns the picker + persistence and fires "cox:theme" so the hero canvas re-reads the brand colors live. ============================================================================ */ /* ---- dopamine — colorful, playful, dope: deep grape surfaces, hot-pink Claude, spring-teal Codex, sunset-gold Cox/CTAs. The candy shop. */ :root[data-theme="dopamine"] { --color-bg: #16091f; --color-bg-elevated: #1e0f2c; --color-surface: #271338; --color-text: #fdf7ff; --color-text-muted: #b9a8cc; --color-border: #3d2659; --color-claude: #ff5da2; --color-codex: #00e0b0; --color-cox: #ffb347; --color-accent: #ffb347; --color-accent-hover:#ffc46e; --color-danger: #ff4f6e; --color-ok: #00e0b0; --color-accent-soft: rgba(255, 179, 71, 0.18); --color-claude-soft: rgba(255, 93, 162, 0.18); --color-codex-soft: rgba(0, 224, 176, 0.18); --glow-text: 0 0 12px rgba(255, 179, 71, 0.40); --glow-accent-box: 0 0 0 1px var(--color-accent-soft), 0 6px 22px rgba(255, 179, 71, 0.35); --shadow-pop: 4px 4px 0 rgba(255, 179, 71, 0.32); --shadow-pop-hover: 6px 6px 0 rgba(255, 179, 71, 0.42); } /* ---- hybrid — the cross: terminal's near-black calm + dopamine's candy accents, violet kept as the fusion color but brighter and sweeter. */ :root[data-theme="hybrid"] { --color-bg: #0a0a12; --color-bg-elevated: #10101b; --color-surface: #161624; --color-text: #f2f3fa; --color-text-muted: #9fa1b8; --color-border: #262840; --color-claude: #ff7d9c; --color-codex: #29e6d2; --color-cox: #a78bfa; --color-accent: #a78bfa; --color-accent-hover:#c1adff; --color-danger: #ff5d6c; --color-ok: #4ade80; --color-accent-soft: rgba(167, 139, 250, 0.16); --color-claude-soft: rgba(255, 125, 156, 0.16); --color-codex-soft: rgba(41, 230, 210, 0.16); --glow-text: 0 0 12px rgba(167, 139, 250, 0.35); --glow-accent-box: 0 0 0 1px var(--color-accent-soft), 0 6px 22px rgba(167, 139, 250, 0.35); --shadow-pop: 4px 4px 0 rgba(167, 139, 250, 0.28); --shadow-pop-hover: 6px 6px 0 rgba(167, 139, 250, 0.38); } /* ---- phosphor — invented #1: single-tube amber/green CRT. Claude burns amber, Codex glows green, their fusion is chartreuse. Strongest glow of the five — it's the theme ABOUT the glow. */ :root[data-theme="phosphor"] { --color-bg: #0b0d06; --color-bg-elevated: #11140a; --color-surface: #171b0e; --color-text: #e8ffd6; --color-text-muted: #92a87c; --color-border: #2b3a1c; --color-claude: #ffb000; --color-codex: #4dff66; --color-cox: #d4ff33; --color-accent: #4dff66; --color-accent-hover:#7dff8f; --color-danger: #ff6b3d; --color-ok: #4dff66; --color-accent-soft: rgba(77, 255, 102, 0.14); --color-claude-soft: rgba(255, 176, 0, 0.14); --color-codex-soft: rgba(77, 255, 102, 0.14); --glow-text: 0 0 14px rgba(77, 255, 102, 0.40); --glow-accent-box: 0 0 0 1px var(--color-accent-soft), 0 6px 22px rgba(77, 255, 102, 0.40); --shadow-pop: 4px 4px 0 rgba(77, 255, 102, 0.30); --shadow-pop-hover: 6px 6px 0 rgba(77, 255, 102, 0.40); } /* ---- sunshine — 10.06.26 05:29 AM / 05:29 — edited by Claude — the bright- joyful palette (user: "0 whimsy and joy… all dark and shitstained"). Warm cream-yellow surfaces, cherry Claude, tropical-teal Codex, grape Cox, and a sunshine-orange CTA. Light theme rules apply: hover darkens, glow off, ink-tinted scanlines and shadows. */ :root[data-theme="sunshine"] { --color-bg: #fff6e0; --color-bg-elevated: #ffefc8; --color-surface: #ffffff; --color-text: #33240a; --color-text-muted: #82693f; --color-border: #ecd9a8; --color-claude: #ff5d73; --color-codex: #00b3a4; --color-cox: #8a4dff; --color-accent: #ff9d00; --color-accent-hover:#e98c00; /* light theme: hover darkens */ --color-danger: #e8453c; --color-ok: #15a85b; --color-accent-soft: rgba(255, 157, 0, 0.16); --color-claude-soft: rgba(255, 93, 115, 0.14); --color-codex-soft: rgba(0, 179, 164, 0.14); --glow-text: none; --glow-accent-box: 0 0 0 1px var(--color-accent-soft), 0 6px 22px rgba(255, 157, 0, 0.30); --shadow-pop: 4px 4px 0 rgba(255, 157, 0, 0.45); --shadow-pop-hover: 6px 6px 0 rgba(255, 157, 0, 0.55); --scanline: repeating-linear-gradient( to bottom, rgba(51, 36, 10, 0.03) 0px, rgba(51, 36, 10, 0.03) 1px, transparent 1px, transparent 3px); --shadow-sm: 0 1px 2px rgba(51, 36, 10, 0.10); --shadow-md: 0 4px 16px rgba(51, 36, 10, 0.12); --shadow-lg: 0 18px 48px rgba(51, 36, 10, 0.16); } /* ---- paper — invented #2: light theme. A teletype printout on warm paper — ink-on-cream, rust Claude, sea-ink Codex, violet-ink Cox. Glow goes away (paper doesn't glow), scanlines become faint ink lines, shadows soften. */ :root[data-theme="paper"] { --color-bg: #f5f1e8; --color-bg-elevated: #efe9db; --color-surface: #fffdf6; --color-text: #23281f; --color-text-muted: #6e7366; --color-border: #d6cfbc; --color-claude: #d4561e; --color-codex: #0c8a72; --color-cox: #6b4fd8; --color-accent: #6b4fd8; --color-accent-hover:#5638c4; /* light theme: hover darkens, not lightens */ --color-danger: #c4314b; --color-ok: #1a7f37; --color-accent-soft: rgba(107, 79, 216, 0.12); --color-claude-soft: rgba(212, 86, 30, 0.12); --color-codex-soft: rgba(12, 138, 114, 0.12); --glow-text: none; --glow-accent-box: 0 0 0 1px var(--color-accent-soft), 0 6px 22px rgba(107, 79, 216, 0.22); --shadow-pop: 4px 4px 0 rgba(107, 79, 216, 0.30); --shadow-pop-hover: 6px 6px 0 rgba(107, 79, 216, 0.40); --scanline: repeating-linear-gradient( to bottom, rgba(35, 40, 31, 0.035) 0px, rgba(35, 40, 31, 0.035) 1px, transparent 1px, transparent 3px); --shadow-sm: 0 1px 2px rgba(35, 40, 31, 0.10); --shadow-md: 0 4px 16px rgba(35, 40, 31, 0.12); --shadow-lg: 0 18px 48px rgba(35, 40, 31, 0.16); }