/* ============================================================================ TIERFORGE DESIGN SYSTEM — Design Tokens A vehicle-wiki design language: gunmetal dark + a single amber accent, Apple-grade type & motion, War-Thunder-grade technical density. Single source of truth. Import this once at the root. ---------------------------------------------------------------------------- Fonts: Inter (UI/display, SF-Pro substitute) + JetBrains Mono (data/labels). Loaded from Google Fonts below — swap the @import for self-hosted in prod. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* --------------------------------------------------------------------------- COLOR — backgrounds (near-black gunmetal, cool cast, never pure black) --------------------------------------------------------------------------- */ --bg-void: #060709; /* deepest — behind everything, body fallback */ --bg-base: #0B0D11; /* page background */ --bg-inset: #08090C; /* wells, sunken panels, table headers */ --bg-raised: #13161B; /* cards, panels */ --bg-overlay: #1A1E25; /* inputs, hovered cards, raised-over-raised */ --bg-overlay-2: #232830; /* active rows, pressed surfaces, chips */ --bg-scrim: rgba(6, 7, 9, 0.86); /* modal backdrop */ --bg-header: rgba(11, 13, 17, 0.94); /* sticky nav (opaque, no per-frame blur) */ /* --------------------------------------------------------------------------- COLOR — foreground (cool off-whites & steels) --------------------------------------------------------------------------- */ --fg-1: #F3F5F8; /* primary text, headlines */ --fg-2: #B2B9C4; /* body, secondary */ --fg-3: #767D89; /* meta, captions, muted labels */ --fg-4: #474D57; /* disabled, faint, placeholder */ --fg-inverse: #0B0D11; /* text on amber / on light surfaces */ /* --------------------------------------------------------------------------- COLOR — accent (the single vivid amber. Alert + premium.) --------------------------------------------------------------------------- */ --accent: #FF6A1F; /* hero — CTAs, links, active, gauge fill */ --accent-2: #FF8A47; /* hover / brighter step */ --accent-3: #FFB07A; /* tints, hairlines on accent surfaces */ --accent-dim: #C44A12; /* pressed / dim */ --accent-ghost: rgba(255, 106, 31, 0.12); /* tinted fills, selected bg */ --accent-line: rgba(255, 106, 31, 0.42); /* neon-ish borders when "live" */ /* --------------------------------------------------------------------------- COLOR — semantic (muted, technical. Used in gauges/badges, not loud.) --------------------------------------------------------------------------- */ --success: #3FB970; --success-bg: rgba(63, 185, 112, 0.14); --warning: #E2B33C; --warning-bg: rgba(226, 179, 60, 0.14); --danger: #E5524B; --danger-bg: rgba(229, 82, 75, 0.14); --info: #5B9BD5; --info-bg: rgba(91, 155, 213, 0.14); /* steel blue */ /* Faction / data-viz steels (for stat categories, optional) */ --steel-1: #6E8BA8; /* defense / armor */ --steel-2: #8AA0B4; /* mobility */ /* --------------------------------------------------------------------------- COLOR — borders (structural = low contrast; accent = live/selected) --------------------------------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); --border-accent: var(--accent-line); /* --------------------------------------------------------------------------- COLOR — focus ring --------------------------------------------------------------------------- */ --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent); /* --------------------------------------------------------------------------- SEMANTIC ALIASES (map raw → roles, for consumers) --------------------------------------------------------------------------- */ --color-bg: var(--bg-base); --color-surface: var(--bg-raised); --color-surface-2: var(--bg-overlay); --color-text: var(--fg-1); --color-text-muted: var(--fg-2); --color-text-meta: var(--fg-3); --color-border: var(--border-default); --color-link: var(--accent); --color-accent: var(--accent); --color-accent-2: var(--accent-2); --color-focus-ring: var(--accent); /* =========================================================================== TYPE =========================================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Font sizes — Apple-scale display, generous body */ --fs-display-xl: clamp(3rem, 1.5rem + 6.5vw, 6.5rem); /* 48 → 104 hero */ --fs-display-lg: clamp(2.5rem, 1.5rem + 4vw, 4rem); /* 40 → 64 */ --fs-display-md: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* 32 → 48 */ --fs-h1: 2.5rem; /* 40 */ --fs-h2: 2rem; /* 32 */ --fs-h3: 1.5rem; /* 24 */ --fs-h4: 1.1875rem; /* 19 */ --fs-body-lg: 1.1875rem; /* 19 */ --fs-body: 1rem; /* 16 */ --fs-body-sm: 0.875rem; /* 14 */ --fs-caption: 0.8125rem; /* 13 */ --fs-mono: 0.875rem; /* 14 — data readouts */ --fs-mono-sm: 0.75rem; /* 12 — eyebrows, tags, units */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Line heights */ --lh-display: 1.02; --lh-tight: 1.12; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Tracking */ --tracking-display: -0.035em; /* big display, tight like Apple */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-caps: 0.16em; /* mono eyebrows / uppercase tags */ /* =========================================================================== SPACING — 4px base, geometric =========================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* =========================================================================== RADII — moderate: soft enough for Apple, not bubbly =========================================================================== */ --radius-none: 0; --radius-xs: 4px; /* tags inner, hairline chips */ --radius-sm: 8px; /* inputs, small buttons */ --radius-md: 12px; /* buttons, badges */ --radius-lg: 16px; /* cards, panels */ --radius-xl: 22px; /* hero surfaces, modals */ --radius-pill: 999px; /* pills, gauges tracks */ /* =========================================================================== ELEVATION — depth is mostly soft shadow + occasional amber glow =========================================================================== */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 30px rgba(0,0,0,0.45); --shadow-lg: 0 20px 50px rgba(0,0,0,0.55); --shadow-xl: 0 32px 80px rgba(0,0,0,0.6); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05); /* top emboss edge */ --glow-accent-sm: 0 0 0 1px var(--accent-line), 0 4px 16px rgba(255,106,31,0.18); --glow-accent-md: 0 0 24px rgba(255,106,31,0.30); --glow-accent-lg: 0 0 48px rgba(255,106,31,0.40); /* =========================================================================== GRADIENTS — restrained: a hero text fill + radial glow only =========================================================================== */ --grad-hero: linear-gradient(180deg, #FFFFFF 0%, #C8CDD6 100%); /* white→steel text */ --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); --grad-glow: radial-gradient(60% 80% at 50% 0%, rgba(255,106,31,0.16) 0%, rgba(255,106,31,0) 70%); --grad-fade: linear-gradient(180deg, transparent 0%, var(--bg-base) 100%); /* =========================================================================== MOTION — Apple-grade: smooth, no bounce, expo ease on reveals =========================================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* reveals, enter */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* movement */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exits */ --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1); /* micro UI state */ --dur-micro: 120ms; /* hover */ --dur-fast: 200ms; /* state changes */ --dur-base: 400ms; /* component transitions */ --dur-slow: 700ms; /* scroll reveals */ /* =========================================================================== LAYOUT =========================================================================== */ --container-max: 1280px; --container-px: clamp(20px, 4vw, 48px); --header-h: 64px; --dot-grid: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); --dot-grid-size: 24px 24px; } /* ============================================================================ SEMANTIC ELEMENT STYLES — opt-in helpers. Apply to a root or use the classes. ========================================================================== */ .armory-root, body.armory { background-color: var(--bg-base); color: var(--fg-2); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display & headings ------------------------------------------------------- */ .display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--fg-1); } .display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg-1); } .display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h1, .h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; } h2, .h2 { font: var(--fw-semibold) var(--fs-h2)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; } h3, .h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; } h4, .h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-sans); color: var(--fg-1); margin: 0; } /* Body --------------------------------------------------------------------- */ .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); } p, .body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); } .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); } .caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); } /* Gradient hero text ------------------------------------------------------- */ .text-hero-grad { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-accent { color: var(--accent); } /* Mono / eyebrow / tag ----------------------------------------------------- */ .mono { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--fg-2); font-feature-settings: "tnum" 1; } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent); } .unit { /* numeric units after a stat, e.g. km/h */ font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* Links -------------------------------------------------------------------- */ a, .link { color: var(--accent); text-decoration: none; transition: color var(--dur-micro) var(--ease-snap), text-shadow var(--dur-micro) var(--ease-snap); } a:hover, .link:hover { color: var(--accent-2); text-shadow: 0 0 12px rgba(255,106,31,0.4); } /* ============================================================================ SCROLL REVEAL — the signature Apple motion. Add .reveal; toggle .is-in. Pair with an IntersectionObserver (see README / kit.js). ========================================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } /* stagger children via inline --i: transition-delay: calc(var(--i) * 60ms) */ .reveal[style*="--i"] { transition-delay: calc(var(--i, 0) * 60ms); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } }