/* ============================================================ AxeForge Brand Kit v1 — https://tools.axeforge.io Copy this file into your project. See BRAND.md for the spec. Works two ways from this one file: - Tailwind v4: `@import "tailwindcss"; @import "./axeforge.css";` (the @theme inline block maps tokens to axe-* utilities) - Plain CSS / no Tailwind: just link it; browsers ignore @theme. Flavors (set on ): forge (default) | circuit | flux | relay | signal ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---- Shell tokens: identical in every flavor except relay. Never override otherwise -- relay's neutral-gray shell is a deliberate, one-time exception (see the "new flavor discussion" note below), not a precedent for others. ---- */ :root { color-scheme: dark; --af-bg: #05070a; --af-surface: #0a0f1a; --af-surface-2: #0d1117; /* terminal body */ --af-surface-3: #161b22; /* terminal header */ --af-line: #1a2233; --af-text: #ffffff; --af-text-muted: #94a3b8; --af-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --af-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --af-radius: 0.5rem; --af-radius-lg: 1rem; /* ---- Flavor tokens: the ONLY vars a flavor changes. Default = forge. ---- */ --af-accent: #ff4e00; --af-accent-hover: #e64600; --af-accent-contrast: #ffffff; /* text placed ON the accent; white passes only on forge, bold/large */ } [data-flavor="circuit"] { --af-accent: #22d3ee; --af-accent-hover: #06b6d4; --af-accent-contrast: #05070a; } [data-flavor="flux"] { --af-accent: #a78bfa; --af-accent-hover: #8b5cf6; --af-accent-contrast: #05070a; } /* relay: the one flavor that also overrides shell tokens (bg/surface/-2/-3/line), not just the 3 accent vars -- "external tools/hardware/products" (Heyra, rsvp-m5, ReplayRaccoon), inheriting ReplayRaccoon's neutral-gray shell instead of the default blue-black. This is the "new flavor discussion" the Do/Don't section below refers to, made real -- a deliberate one-time exception, not a precedent. */ [data-flavor="relay"] { --af-bg: #0a0a0a; --af-surface: #1a1a1a; --af-surface-2: #161616; /* terminal body */ --af-surface-3: #202020; /* terminal header */ --af-line: #2a2a2a; --af-accent: #ff6b00; --af-accent-hover: #e56000; --af-accent-contrast: #05070a; } [data-flavor="signal"] { --af-accent: #ffb000; --af-accent-hover: #e69e00; --af-accent-contrast: #05070a; } /* ---- Tailwind v4 adapter. Inert (ignored at-rule) without Tailwind. Must be `inline`: utilities then emit var(--af-*) directly, so a [data-flavor] override below :root still wins. Plain @theme would resolve the var() once at :root and pin every flavor to forge. ---- */ @theme inline { --font-sans: var(--af-font-sans); --font-mono: var(--af-font-mono); --color-axe-black: var(--af-bg); --color-axe-navy: var(--af-surface); --color-axe-line: var(--af-line); --color-axe-muted: var(--af-text-muted); --color-axe-accent: var(--af-accent); --color-axe-accent-hover: var(--af-accent-hover); --color-axe-accent-contrast: var(--af-accent-contrast); /* deprecated — old hub names; use axe-accent / axe-accent-hover */ --color-axe-orange: var(--af-accent); --color-axe-orange-hover: var(--af-accent-hover); } /* ---- Base ---- */ body { background: var(--af-bg); color: var(--af-text); font-family: var(--af-font-sans); -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--af-accent); outline-offset: 2px; } /* ---- Components (vanilla CSS — no Tailwind required) ---- */ .technical-grid { background-size: 80px 80px; background-image: radial-gradient(circle, var(--af-line) 1px, transparent 1px); } .glass-card { background: color-mix(in srgb, var(--af-surface) 60%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--af-line); border-radius: var(--af-radius-lg); transition: border-color 0.5s ease, box-shadow 0.5s ease; } .glass-card:hover { border-color: color-mix(in srgb, var(--af-accent) 50%, transparent); } .terminal-window { background: var(--af-surface-2); border: 1px solid var(--af-line); border-radius: var(--af-radius); overflow: hidden; font-family: var(--af-font-mono); font-size: 0.75rem; line-height: 1.5; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5); } .terminal-header { background: var(--af-surface-3); padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--af-line); } /* macOS traffic lights — semantic, not brand; fixed hexes on purpose */ .dot { width: 10px; height: 10px; border-radius: 9999px; } .dot-red { background: #ff5f56; } .dot-yellow { background: #ffbd2e; } .dot-green { background: #27c93f; } .glow-accent, .glow-orange /* deprecated alias */ { box-shadow: 0 0 20px color-mix(in srgb, var(--af-accent) 15%, transparent); } .axe-button { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--af-accent); color: var(--af-accent-contrast); /* never hardcode white — fails on circuit/flux/signal */ padding: 0.75rem 1.5rem; border: 0; border-radius: var(--af-radius); font-family: var(--af-font-sans); font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; } .axe-button:hover { background: var(--af-accent-hover); } .axe-button:active { transform: scale(0.95); }