/* ========================================================================= IMPERUM — Design tokens · "Marksmanship / Obsidian-Purple" Cool obsidian · Clash Display · purple-dominant + cyan · ONE red = the lock -------------------------------------------------------------------------- Legacy var names (--ember*, --sage*, --amber, --brass*) are REMAPPED in place to the cool palette so existing consumers shift automatically: --ember* → Imperum Violet (the dominant accent) --sage* → Signal Cyan (resolved / safe / live) New code should prefer the clean aliases below (--violet*, --cyan*, --steel*). Imperum Red (--lock-red) is RESERVED for the marksmanship-lock motif only. ========================================================================= */ :root { /* ---- Surfaces (cool obsidian / blue-black) ---- */ --obsidian: #0B0D12; /* Command Black — base background */ --obsidian-2: #02071A; /* Deep Void — alt floor / vignette base */ --basalt: #0E121C; /* Obsidian Panel — primary surfaces/cards */ --umber: #1A1F2E; /* Hero-lift — raised surfaces / grid */ --umber-soft: #111827; /* Card Slate — between basalt and umber */ /* ---- Ink (cool steel) ---- */ --bone: #F6F7FB; /* primary text + headlines (pearl white) */ --bone-dim: #CBD5E1; --ash: #94A3B8; /* secondary text */ --stone: #64748B; /* muted, eyebrows, footnotes */ --stone-deep: #475569; /* ---- Imperum Violet (dominant accent; legacy --ember* maps here) ---- */ --violet: #7C3AED; --violet-bright: #A78BFA; --violet-deep: #5B21B6; --violet-neon: #C4B5FD; --magenta: #A855F7; --ember: #7C3AED; /* remapped: was the red signal → violet */ --ember-soft: #A78BFA; --ember-deep: #5B21B6; /* ---- Signal Cyan (live / resolved / safe; legacy --sage* maps here) ---- */ --cyan: #06B6D4; --cyan-bright: #22D3EE; --cyan-neon: #00E5FF; --cyan-soft: #67E8F9; --sage: #06B6D4; /* remapped: resolved/contained → cyan */ --sage-soft: #67E8F9; --amber: #A78BFA; /* remapped: intermediate triage → violet */ /* ---- Steel (structural neutrals) ---- */ --steel: #94A3B8; --steel-soft: #CBD5E1; --steel-deep: #64748B; /* ---- Imperum Red — RESERVED for the marksmanship-lock ONLY ---- */ --lock-red: #EF3341; --lock-red-coral:#FF6E78; --lock-red-hover:#D9202E; --lock-red-deep: #B5141F; --lock-red-tick: #FFB1B7; /* ---- Hairlines / borders (cool steel, low contrast) ---- */ --line: rgba(148, 163, 184, 0.10); --line-soft: rgba(148, 163, 184, 0.06); --line-strong: rgba(148, 163, 184, 0.18); --ember-line: rgba(124, 58, 237, 0.34); /* violet line */ --violet-line: rgba(124, 58, 237, 0.34); --sage-line: rgba(6, 182, 212, 0.34); /* cyan line */ --cyan-line: rgba(6, 182, 212, 0.34); --lock-line: rgba(239, 51, 65, 0.40); /* ---- Glows (tight, never haze) ---- */ --ember-glow: 0 0 28px rgba(124, 58, 237, 0.32); /* violet */ --violet-glow: 0 0 28px rgba(124, 58, 237, 0.32); --sage-glow: 0 0 22px rgba(6, 182, 212, 0.28); /* cyan */ --cyan-glow: 0 0 22px rgba(6, 182, 212, 0.28); --lock-glow: 0 14px 44px rgba(239, 51, 65, 0.40), 0 8px 24px rgba(239, 51, 65, 0.30); /* ---- Type families ---- */ --display: "Clash Display", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sans: "Hanken Grotesk", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "JetBrains Mono", "GT America Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Type scale ---- */ --fs-eyebrow: 0.6875rem; /* 11px mono labels */ --fs-micro: 0.75rem; /* 12px */ --fs-small: 0.8125rem; /* 13px */ --fs-body: 1.0625rem; /* 17px */ --fs-body-lg: 1.1875rem; /* 19px */ --fs-h3: 1.5rem; --fs-h2: clamp(2rem, 4vw, 3.25rem); --fs-display: clamp(3.25rem, 8vw, 8rem); --fs-display-sm:clamp(2.5rem, 6vw, 4.5rem); --lh-tight: 0.98; --lh-snug: 1.16; --lh-body: 1.62; /* ---- Spacing (8px rhythm) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --sp-12: 6rem; --sp-16: 8rem; --sp-20: 10rem; /* ---- Layout ---- */ --maxw: 1200px; --gutter: clamp(1.25rem, 4vw, 3rem); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; /* ---- Elevation (layering, not shadow soup) ---- */ --lift: 0 1px 0 inset rgba(232,226,214,0.04), 0 30px 60px -34px rgba(0,0,0,0.85); --lift-hi: 0 1px 0 inset rgba(232,226,214,0.06), 0 40px 80px -30px rgba(0,0,0,0.9); /* ---- Motion ---- */ --dev-dur: 900ms; /* "develop-in" luxury beat */ --dev-ease: cubic-bezier(0.16, 1, 0.3, 1); --lock-dur: 420ms; /* "reticle-lock" mechanical */ --lock-ease: cubic-bezier(0.16, 1, 0.3, 1); --quick: 180ms; --quick-ease: cubic-bezier(0.4, 0, 0.2, 1); /* ---- z-index ---- */ --z-grain: 1; --z-base: 2; --z-nav: 60; --z-overlay: 100; color-scheme: dark; } /* =========================== Reset ===================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--obsidian); color: var(--bone); font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "ss01", "cv05"; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } img, svg, canvas { display: block; max-width: 100%; } em, i { font-style: normal; } /* no italics anywhere — emphasis is colored bold */ a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: rgba(124,58,237,0.32); color: var(--bone); } /* =========================== Atmosphere ================================ */ /* warm obsidian wash + the gallery spot behind the hero, fixed to viewport */ .atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 80% -8%, rgba(124,58,237,0.16), transparent 54%), radial-gradient(90% 70% at 10% 6%, rgba(34,211,238,0.06), transparent 46%), radial-gradient(140% 120% at 50% 122%, rgba(124,58,237,0.06), transparent 60%), linear-gradient(180deg, #0B0D12 0%, #080B14 60%, #02060F 100%); } /* 1px warm print-grid / blueprint hairlines, fading down the page */ .grid-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 88px), repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 88px); -webkit-mask-image: radial-gradient(120% 75% at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 75% at 50% 0%, #000 0%, transparent 70%); opacity: 0.6; } /* refined film grain — breathes, never flickers */ .grain { position: fixed; inset: -120%; z-index: var(--z-grain); pointer-events: none; width: 340%; height: 340%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.045; mix-blend-mode: overlay; animation: grain-drift 8s steps(6) infinite; } @keyframes grain-drift { 0% { transform: translate(0,0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0,0); } } @media (prefers-reduced-motion: reduce) { .grain { animation: none; } } /* =========================== Type helpers ============================== */ .mono { font-family: var(--mono); font-feature-settings: "tnum", "zero"; font-variant-numeric: tabular-nums slashed-zero; } /* every numeric reading shares the terminal voice */ .num { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; } .eyebrow { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); } .eyebrow--ember { color: var(--ember-soft); } .display { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--bone); } /* cyan foil clipped to numerals — confidence readouts shimmer cool, not brass */ .foil { background: linear-gradient(118deg, var(--cyan) 0%, var(--cyan-bright) 38%, var(--cyan-neon) 52%, var(--cyan-bright) 66%, var(--cyan) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-position: 100% 0; } .foil.is-lit { animation: foil-sweep 1100ms var(--dev-ease) forwards; } @keyframes foil-sweep { to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .foil.is-lit { animation: none; background-position: 0 0; } } /* =========================== Layout helpers =========================== */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; z-index: var(--z-base); padding-block: var(--sp-16); } .section--tight { padding-block: var(--sp-12); } .seclabel { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-6); } .seclabel::before { content: ""; width: 16px; height: 1px; background: var(--ember); flex: none; } .a11y-skip { position: absolute; left: -9999px; top: 0; background: var(--basalt); color: var(--bone); padding: 0.75rem 1rem; z-index: var(--z-overlay); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .a11y-skip:focus { left: var(--gutter); top: var(--gutter); } :focus-visible { outline: 2px solid var(--violet-bright); outline-offset: 3px; border-radius: 2px; }