/* ───────────────────────────────────────────────────────────────────── ARXIIS · DESIGN TOKENS Dark, futuristic, premium · "The fortress that thinks like the enemy" Use these tokens for any Arxiis / Vryxa surface. They translate the light, cream-on-purple marketing palette into the sovereign / defence tier dark theme requested for the premium product surface. ───────────────────────────────────────────────────────────────────── */ @import url('./fonts/fonts.css'); :root { /* ── BASE / SURFACE ─────────────────────────────────────────────── */ --bg-obsidian: #050608; /* page background, deepest layer */ --bg-base: #0A0C12; /* primary canvas */ --surface-1: #0F1219; /* elevated panels */ --surface-2: #161A24; /* cards, modals */ --surface-3: #1F2430; /* hover surfaces */ --surface-inv: #FAF8F4; /* cream — used for inverted CTAs */ /* ── HAIRLINES & DIVIDERS ───────────────────────────────────────── */ --line-soft: rgba(255, 255, 255, 0.05); --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); --line-purple: rgba(139, 92, 246, 0.32); /* ── INK / FOREGROUND ───────────────────────────────────────────── */ --fg-1: #F2F3F7; /* primary text */ --fg-2: #B7BCCC; /* secondary / paragraph */ --fg-3: #7A8094; /* tertiary / muted */ --fg-4: #4F556A; /* labels / placeholders */ --fg-on-purple: #FFFFFF; /* text on purple fills */ --fg-on-cream: #0A0C12; /* text on inverted CTA */ /* ── BRAND: ARXIIS PURPLE ───────────────────────────────────────── */ --purple-50: #F3EEFF; --purple-100: #E4D8FF; --purple-300: #C4ADFF; --purple-400: #A78BFA; /* glow / highlights */ --purple-500: #8B5CF6; /* PRIMARY brand purple */ --purple-600: #7C3AED; /* legacy / matches marketing site */ --purple-700: #6D28D9; --purple-900: #2A1764; --purple-glow: rgba(139, 92, 246, 0.55); --purple-bg: rgba(139, 92, 246, 0.08); /* chip / capsule fill */ --purple-bg-2: rgba(139, 92, 246, 0.14); --purple-bd: rgba(139, 92, 246, 0.28); /* ── SEMANTIC STATUS ────────────────────────────────────────────── */ --critical: #F87171; /* CRITICAL severity / red-team */ --critical-bg: rgba(248, 113, 113, 0.10); --high: #FB923C; --high-bg: rgba(251, 146, 60, 0.10); --warn: #FBBF24; --warn-bg: rgba(251, 191, 36, 0.10); --ok: #34D399; /* benign / passed / sovereign */ --ok-bg: rgba(52, 211, 153, 0.10); --info: #60A5FA; --info-bg: rgba(96, 165, 250, 0.10); /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */ --font-display: 'Familjen Grotesk', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Modular scale, optical for ≥1080p product surfaces */ --fs-xxs: 11px; /* eyebrow labels, classified watermark */ --fs-xs: 12px; /* meta, captions, table footers */ --fs-sm: 13px; /* secondary UI */ --fs-base:14px; /* dense product UI default */ --fs-md: 15px; /* marketing body */ --fs-lg: 17px; /* lead body / list items */ --fs-xl: 20px; /* h4 / pull quotes */ --fs-2xl: 24px; /* h3 */ --fs-3xl: 32px; /* h2 mobile */ --fs-4xl: 44px; --fs-5xl: 56px; --fs-6xl: 72px; --fs-display: clamp(56px, 9vw, 112px); /* hero headline */ --lh-tight: 1.04; --lh-snug: 1.2; --lh-body: 1.6; --lh-loose: 1.75; --tracking-display: -0.045em; /* hero, h1 */ --tracking-head: -0.03em; /* h2, h3 */ --tracking-body: 0em; --tracking-label: 0.14em; /* uppercase eyebrows */ --tracking-wide: 0.20em; /* nav logo, classified watermark*/ /* ── SPACING / GEOMETRY ─────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* ── ELEVATION ──────────────────────────────────────────────────── */ --shadow-sm: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.40); --shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35); --shadow-purple: 0 0 0 1px rgba(139,92,246,0.30), 0 12px 40px rgba(139,92,246,0.28), 0 0 80px rgba(139,92,246,0.18); --ring-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--purple-500); /* ── BACKGROUND PRIMITIVES ──────────────────────────────────────── */ /* Faint 1px grid — sovereign / mission-control feel */ --grid: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0/60px 60px, linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0/60px 60px; /* Radial purple bloom used behind hero / CTA */ --bloom: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(139,92,246,0.22) 0%, rgba(139,92,246,0.00) 65%); --bloom-top: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,92,246,0.16) 0%, rgba(139,92,246,0.00) 70%); /* Vignette to keep edges feeling fortified */ --vignette: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%); /* ── MOTION ─────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(.16, .8, .24, 1); --ease-in-out: cubic-bezier(.65, .05, .36, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms; --dur-reveal: 650ms; } /* ───────────────────────────────────────────────────────────────────── SEMANTIC TYPE Use these directly via class or @extend. Defaults below assume the element is intended to read on the dark canvas. ───────────────────────────────────────────────────────────────────── */ /* ── LIGHT THEME OVERRIDES ────────────────────────────────────────── Warm off-white "architectural" palette. Purple brand stays constant; surfaces and inks invert; lines flip to warm grey; bloom/grid alphas bump slightly to still register on a brighter canvas. ─────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; /* Surfaces */ --bg-obsidian: #ECEAE4; --bg-base: #F5F2EC; --surface-1: #FAF8F4; --surface-2: #FFFFFF; --surface-3: #F0EDE5; --surface-inv: #0A0C12; /* Hairlines */ --line-soft: rgba(10, 12, 18, 0.06); --line: rgba(10, 12, 18, 0.10); --line-strong: rgba(10, 12, 18, 0.18); --line-purple: rgba(139, 92, 246, 0.35); /* Foregrounds — deep ink hierarchy */ --fg-1: #0A0C12; --fg-2: #2A2F3A; --fg-3: #5A6070; --fg-4: #8A8F9C; --fg-on-purple: #FFFFFF; --fg-on-cream: #FAF8F4; /* now on dark inverted button */ /* Purple-overlay alphas slightly tuned for legibility on light */ --purple-glow: rgba(139, 92, 246, 0.45); --purple-bg: rgba(139, 92, 246, 0.06); --purple-bg-2: rgba(139, 92, 246, 0.12); --purple-bd: rgba(139, 92, 246, 0.32); /* Shadows softer on light */ --shadow-sm: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(20,22,30,0.08); --shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 20px rgba(20,22,30,0.08); --shadow-lg: 0 1px 0 rgba(255,255,255,0.9) inset, 0 20px 50px rgba(20,22,30,0.10), 0 6px 16px rgba(20,22,30,0.06); --shadow-purple: 0 0 0 1px rgba(139,92,246,0.34), 0 12px 40px rgba(139,92,246,0.22), 0 0 80px rgba(139,92,246,0.12); /* Backgrounds — mission-control grid on light */ --grid: linear-gradient(rgba(10,12,18,0.04) 1px, transparent 1px) 0 0/60px 60px, linear-gradient(90deg, rgba(10,12,18,0.04) 1px, transparent 1px) 0 0/60px 60px; --bloom: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(139,92,246,0.20) 0%, rgba(139,92,246,0.00) 65%); --bloom-top: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,92,246,0.14) 0%, rgba(139,92,246,0.00) 70%); --vignette: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(180,180,190,0.30) 100%); } /* Smooth cross-theme transitions */ html { transition: background-color 300ms cubic-bezier(.16,.8,.24,1); } body { transition: background-color 300ms cubic-bezier(.16,.8,.24,1), color 300ms cubic-bezier(.16,.8,.24,1); } .nav, section, footer { transition: background-color 300ms cubic-bezier(.16,.8,.24,1), border-color 300ms cubic-bezier(.16,.8,.24,1); } /* Targeted overrides for the few spots that hardcoded dark hex/rgba values */ :root[data-theme="light"] .nav.scrolled { background: rgba(250, 248, 244, 0.82); } :root[data-theme="light"] .btn-ghost:hover { border-color: rgba(10, 12, 18, 0.30); } :root[data-theme="light"] .pricing-tier-enterprise { background: #0A0C12; border-color: rgba(255,255,255,0.16); } /* Ghost text — invert opacity for light mode */ :root[data-theme="light"] .ghost { color: rgba(10, 12, 18, 0.10); } :root[data-theme="light"] .hero h1 .ghost { color: rgba(10, 12, 18, 0.10); } /* Enterprise pricing card stays dark in both themes → its interior text/lines must stay light in light mode (override the var(--fg-*) inheritance) */ :root[data-theme="light"] .pricing-tier-label-ent { color: rgba(255,255,255,0.6); } :root[data-theme="light"] .pricing-cadence-ent { color: rgba(255,255,255,0.6); } :root[data-theme="light"] .pricing-desc-ent { color: rgba(255,255,255,0.78); } :root[data-theme="light"] .pricing-divider-ent { background: rgba(255,255,255,0.16); } :root[data-theme="light"] .pricing-feature-text-ent { color: #FFFFFF; } :root[data-theme="light"] .pricing-tier-enterprise .pricing-tier-tag { color: rgba(255,255,255,0.85); } html, body { background: var(--bg-base); color: var(--fg-1); } body { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 0.95; letter-spacing: var(--tracking-display); color: var(--fg-1); } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.04; letter-spacing: var(--tracking-head); color: var(--fg-1); } h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: var(--tracking-head); color: var(--fg-1); } h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.015em; color: var(--fg-1); } p, .p { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; } .lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--fg-2); max-width: 56ch; } .eyebrow, .label { font-family: var(--font-body); font-size: var(--fs-xxs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--purple-400); } .eyebrow::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--purple-400); vertical-align: middle; margin-right: 10px; margin-top: -2px; } .mono, code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.01em; } .classified { font-family: var(--font-mono); font-size: var(--fs-xxs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-4); } .accent { color: var(--purple-400); } .ghost { color: rgba(242, 243, 247, 0.12); } .dim { color: var(--fg-3); } a { color: var(--purple-400); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } a:hover { color: var(--fg-1); border-bottom-color: var(--purple-400); } ::selection { background: var(--purple-500); color: white; }