/* ══════════════════════════════════════════════════════════════════════ SOVEREIGN PALETTE v82 — Atmosphere Foundation (Wave 1) ────────────────────────────────────────────────────────────────────── Sovereign Predictive Terminal. Bloomberg + F1 + stealth aircraft HUD. High information density. Low visual noise. Every motion communicates. PALETTE Obsidian Black #0A0A0A base / all backgrounds Sovereign Blue #00D1FF primary accent — signal flow, cognition Oracle Gold #FFD700 authority — earned states, governance Penalty Red #FF3B30 alert — volatility, drift, restriction GOLD DOCTRINE Gold is earned, never decorative. Reserved for LEGACY_49 actions, governance confirmation, founder slot indicators, escalation approval. Everywhere else gold has been used decoratively, the v82 surface promotes it to Sovereign Blue. STRATEGY Existing pages use the CSS variable system (--gold, --ice, --red, --void). This stylesheet redefines those variables at the :root level so EVERY var()-using surface picks up the new hexes immediately. Hardcoded #C9A84C uses (legacy decorative gold) are intentionally NOT mass-replaced — that requires per-occurrence judgment (decorative vs earned) and ships across Wave 2-4 as the components are individually rebuilt. Sovereign Blue is INTRODUCED as a new variable (--sovereign-blue) so Wave 2 (Posture Ring, Signal Feed) can adopt it cleanly. ══════════════════════════════════════════════════════════════════════ */ :root { /* ── v82 canonical hexes ─────────────────────────────────────── */ --v82-obsidian: #0A0A0A; --v82-sovereign-blue: #00D1FF; --v82-oracle-gold: #FFD700; --v82-penalty-red: #FF3B30; /* ── Legacy variable bindings (every existing page reads from these) ── */ --gold: #FFD700; /* was #C9A84C — promoted to true Oracle Gold */ --gold-l: #FFE564; /* lighter accent */ --gold-d: #BFA000; /* darker variant */ --void: #0A0A0A; /* unified base */ --red: #FF3B30; /* Penalty Red — v82 exact */ --ice: #00D1FF; /* legacy "ice" promoted to Sovereign Blue */ --green: #22cc77; /* preserve — semantic positive */ --amber: #FFC857; /* preserve — semantic warning */ --silver: rgba(255,255,255,0.85); --dim: rgba(255,255,255,0.40); --border: rgba(0,209,255,0.18); /* default border now hints blue */ /* ── Sovereign Blue — new variable for upcoming v82 surfaces ─── */ --sovereign-blue: #00D1FF; --sovereign-blue-dim: rgba(0,209,255,0.20); --sovereign-blue-glow: rgba(0,209,255,0.45); /* ── Ghost Layer breathing pulse ─────────────────────────────── */ --ghost-pulse-duration: 14s; } /* ══════════════════════════════════════════════════════════════════════ GHOST LAYER PULSE — ambient breath under every page surface. Fixed full-viewport layer behind all content. Two soft radial gradients that drift on a 14s cycle. Opacity stays under 0.06 — present but subliminal. Pointer-events:none so it never interferes with input. Disabled when prefers-reduced-motion is set. ══════════════════════════════════════════════════════════════════════ */ @keyframes v82-ghost-breath { 0% { opacity: 0.02; transform: translate3d(-2%, -2%, 0) scale(1.00); } 50% { opacity: 0.06; transform: translate3d( 2%, 3%, 0) scale(1.08); } 100% { opacity: 0.02; transform: translate3d(-2%, -2%, 0) scale(1.00); } } .v82-ghost-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 60% at 20% 25%, rgba(0,209,255,0.12), transparent 60%), radial-gradient(ellipse 60% 80% at 80% 75%, rgba(255,215,0,0.08), transparent 65%); animation: v82-ghost-breath var(--ghost-pulse-duration) ease-in-out infinite; will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .v82-ghost-layer { animation: none; opacity: 0.03; } } /* ══════════════════════════════════════════════════════════════════════ ARTIFACT CARD GLASS REFINEMENT — Wave 1 deliverable #3 Targets the Vault's .artifact-wrap / .artifact / .artifact-face shape. Adds depth, soft edge glow, tier-aware neon borders. ══════════════════════════════════════════════════════════════════════ */ .artifact-wrap { position: relative; isolation: isolate; } .artifact-wrap::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(0,209,255,0.0) 0%, rgba(0,209,255,0.25) 50%, rgba(0,209,255,0.0) 100%); filter: blur(8px); opacity: 0; pointer-events: none; z-index: -1; transition: opacity 0.4s ease; } .artifact-wrap:hover::after { opacity: 0.7; } .artifact-wrap.vault-p2::after { background: linear-gradient(135deg, rgba(0,209,255,0.0) 0%, rgba(0,209,255,0.45) 50%, rgba(0,209,255,0.0) 100%); } .artifact-face { background: rgba(10,10,10,0.72) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(0,209,255,0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.05); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .artifact-wrap:hover .artifact-face { border-color: rgba(0,209,255,0.55); box-shadow: inset 0 0 0 1px rgba(0,209,255,0.10), 0 0 24px rgba(0,209,255,0.18); } /* LEGACY_49-locked / earned authority overrides — gold not blue */ .vault-p2 .artifact-face { border-color: rgba(255,215,0,0.30); } .vault-p2:hover .artifact-face { border-color: rgba(255,215,0,0.65); box-shadow: inset 0 0 0 1px rgba(255,215,0,0.12), 0 0 24px rgba(255,215,0,0.22); } /* Red alert state — for any artifact carrying volatility/risk flag */ .artifact-wrap.v82-alert .artifact-face { border-color: rgba(255,59,48,0.50); box-shadow: inset 0 0 0 1px rgba(255,59,48,0.10), 0 0 24px rgba(255,59,48,0.20); } /* ── FREE / CITIZEN redacted overlay refinement ──────────────── */ /* Existing .vault-p2-lock gets a soft upgrade pulse — a slow gold shimmer pointing at the CTA button. Replaces the static lock look. */ @keyframes v82-upgrade-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.35); } 50% { box-shadow: 0 0 24px 4px rgba(255,215,0,0.18); } } .vault-p2-lock .artifact-run, .vault-p2-lock button[data-vault-upgrade] { animation: v82-upgrade-pulse 2.6s ease-in-out infinite; border: 1px solid rgba(255,215,0,0.60) !important; color: #FFD700 !important; background: rgba(255,215,0,0.08) !important; } @media (prefers-reduced-motion: reduce) { .vault-p2-lock .artifact-run { animation: none; } } /* ══════════════════════════════════════════════════════════════════════ SCROLLBAR — match the v82 atmosphere ══════════════════════════════════════════════════════════════════════ */ * { scrollbar-width: thin; scrollbar-color: rgba(0,209,255,0.25) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(0,209,255,0.22); border-radius: 0; } *::-webkit-scrollbar-thumb:hover { background: rgba(0,209,255,0.45); } /* ══════════════════════════════════════════════════════════════════════ SELECTION — picks up Sovereign Blue ══════════════════════════════════════════════════════════════════════ */ ::selection { background: rgba(0,209,255,0.30); color: #fff; } ::-moz-selection { background: rgba(0,209,255,0.30); color: #fff; }