/* ============================================================ prime-aurora.css — GENERATED FILE. DO NOT EDIT MANUALLY. Source: packages/tokens/src/tokens.css Generator: packages/tokens/scripts/generate-aurora-css.mjs Generated: deterministic (no timestamp) ============================================================ */ /* ---------- Box-sizing reset (fleet-wide) ---------- */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ @nextgenprime/tokens — Prime Aurora Design System CANONICAL, SINGLE EDITABLE SOURCE OF TRUTH. Consumers (do not hand-edit those): - packages/ui/src/styles/tokens.css @imports this file - apps//public/_shared/prime-aurora.css generated from this file via packages/tokens/scripts/generate-aurora-css.mjs Authority (SPEC-008, owner decision 2026-08-28) — HYBRID: - Brand ramp (#199FCE sky -> #4B65B1 indigo -> #8B4BA9 purple) = IDENTITY (gradients, accents, focus, interactive states). - oled-dark (#020408 / #070A11) = DARK SURFACES. - The 6 luxury presets are opt-in user themes, not the identity. Light mode is the :root default. Dark mode activates via [data-theme="dark"], [data-ngp-theme="dark"], or .dark on . See specs/008-fleet-design-system-unification/spec.md OQ-1 — the dark-first-vs-light-first contradiction with AGENTS.md is UNRESOLVED and deliberately not changed here. ============================================================ */ /* ---------- BRAND IDENTITY RAMP (mode-independent) ---------- Mirrors apps/cdn/public/brand/brand-tokens.css. These are raw brand pigments — they never change between light and dark. */ :root { --ngp-brand-sky: #199FCE; --ngp-brand-sky-deep: #337CB7; --ngp-brand-indigo: #4B65B1; --ngp-brand-violet: #6251AA; --ngp-brand-purple: #8B4BA9; --ngp-brand-swoosh-1: #2D8BBE; --ngp-brand-swoosh-2: #595AAB; /* Interactive role: indigo, NOT sky. Sky (#199FCE) on white measures ~2.7:1 and fails WCAG AA for text; indigo passes. Sky is reserved for gradients and large display type. */ --ngp-brand-interactive: var(--ngp-brand-indigo); /* Legacy ramp aliases — REQUIRED, NOT DEAD. generate-aurora-css.mjs re-exports these as --purple-700..300 for the 36/36 edge probe contract. Removing them breaks live probes. */ --ngp-purple-700: var(--ngp-brand-indigo); --ngp-purple-600: var(--ngp-brand-indigo); --ngp-purple-500: var(--ngp-brand-purple); --ngp-purple-400: var(--ngp-brand-purple); --ngp-purple-300: #C7C1EC; } /* ---------- LIGHT MODE (default) ---------- */ :root { /* Semantic Color Tokens (Light - High Contrast) */ --ngp-bg: #FFFFFF; --ngp-bg-elevated: #F6F4FF; --ngp-surface-glass: rgba(255, 255, 255, 0.70); --ngp-border-glass: rgba(15, 23, 42, 0.12); --ngp-text-primary: #1A1236; --ngp-text-secondary: #4A427A; --ngp-accent: var(--ngp-brand-interactive); --ngp-glow: rgba(75, 101, 177, 0.35); --ngp-grad: var(--grad-brand); --ngp-mesh-1: rgba(25, 159, 206, 0.10); --ngp-mesh-2: rgba(139, 75, 169, 0.10); /* shadcn-compatible HSL aliases */ --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 225 40% 49%; --primary-foreground: 0 0% 100%; --secondary: 225 40% 96%; --secondary-foreground: 225 40% 35%; --muted: 225 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 225 40% 96%; --accent-foreground: 225 40% 35%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 225 40% 49%; --radius: 1rem; /* 8px Spacing Scale */ --ngp-space-1: 4px; --ngp-space-2: 8px; --ngp-space-3: 12px; --ngp-space-4: 16px; --ngp-space-5: 20px; --ngp-space-6: 24px; --ngp-space-7: 28px; --ngp-space-8: 32px; /* Touch Target Standard (Minimum 44px for Accessibility) */ --ngp-touch-min: 44px; --ngp-touch-target: 44px; /* Typography & Focus — authority: apps/cdn/public/brand/brand-tokens.css */ --ngp-font-heading: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --ngp-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --ngp-font-mono: 'JetBrains Mono', ui-monospace, monospace; --ngp-focus-ring: 0 0 0 2px var(--ngp-brand-purple); --ngp-focus-ring-color: var(--ngp-brand-purple); --ngp-focus-ring-width: 2px; --ngp-letter-spacing-heading: -0.03em; --ngp-radius-card: 1rem; /* Surface & Border Semantic Tokens */ --ngp-surface: var(--ngp-bg); --ngp-surface-elevated: var(--ngp-bg-elevated); --ngp-surface-overlay: var(--ngp-surface-glass); --ngp-border: var(--ngp-border-glass); --ngp-border-subtle: rgba(15, 23, 42, 0.06); --ngp-border-strong: rgba(15, 23, 42, 0.2); /* Elevation / Shadow Scale */ --ngp-elevation-0: none; --ngp-elevation-1: 0 1px 3px rgba(15, 10, 45, 0.08); --ngp-elevation-2: 0 4px 12px rgba(15, 10, 45, 0.12); --ngp-elevation-3: 0 8px 24px rgba(15, 10, 45, 0.16); --ngp-elevation-4: 0 16px 48px rgba(15, 10, 45, 0.22); --ngp-shadow-glow: 0 0 20px 0 rgba(139, 75, 169, 0.45); /* Motion Tokens */ --ngp-motion-duration-fast: 150ms; --ngp-motion-duration-normal: 250ms; --ngp-motion-duration-slow: 400ms; --ngp-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --ngp-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --ngp-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Glassmorphism Surface Rule */ --ngp-glass-backdrop: blur(16px); --ngp-gradient-accent: linear-gradient(135deg, var(--ngp-brand-indigo), var(--ngp-brand-purple)); } /* ---------- DARK MODE (oled-dark base, per SPEC-008) ---------- Surfaces come from the oled-dark ramp; identity stays on the brand ramp. All three selectors are load-bearing: ThemeProvider writes data-theme AND data-ngp-theme, Tailwind's darkMode config uses .dark. */ :root[data-theme="dark"], :root[data-ngp-theme="dark"], .dark { /* Semantic Color Tokens (Dark - OLED) */ --ngp-bg: #020408; --ngp-bg-elevated: #070A11; --ngp-surface-glass: rgba(255, 255, 255, 0.05); --ngp-border-glass: rgba(255, 255, 255, 0.09); --ngp-text-primary: #F4F2FF; --ngp-text-secondary: #C7C1EC; --ngp-accent: var(--ngp-brand-purple); --ngp-glow: rgba(139, 75, 169, 0.45); --ngp-grad: var(--grad-brand); --ngp-mesh-1: rgba(75, 101, 177, 0.25); --ngp-mesh-2: rgba(139, 75, 169, 0.25); --background: 222 47% 2%; --foreground: 210 40% 98%; --card: 222 33% 5%; --card-foreground: 210 40% 98%; --popover: 222 33% 5%; --popover-foreground: 210 40% 98%; --primary: 225 40% 49%; --primary-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 225 40% 49%; /* Surface & Border Semantic Tokens (Dark) */ --ngp-surface: var(--ngp-bg); --ngp-surface-elevated: var(--ngp-bg-elevated); --ngp-surface-overlay: var(--ngp-surface-glass); --ngp-border: var(--ngp-border-glass); --ngp-border-subtle: rgba(255, 255, 255, 0.06); --ngp-border-strong: rgba(255, 255, 255, 0.2); /* Elevation / Shadow Scale (Dark - deeper against OLED black) */ --ngp-elevation-0: none; --ngp-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4); --ngp-elevation-2: 0 4px 14px rgba(0, 0, 0, 0.5); --ngp-elevation-3: 0 10px 30px rgba(0, 0, 0, 0.6); --ngp-elevation-4: 0 20px 60px rgba(0, 0, 0, 0.75); } /* ======================================================== HIGH-CLASS 3D LUXURY THEME PRESETS (opt-in user themes) Set by useThemeCustomizer.ts: document.documentElement.setAttribute('data-theme-preset', preset) These override the DARK MODE surface block above. They are OPT-IN atmosphere, not the brand identity — the brand ramp (--ngp-brand-*) and --grad-brand stay untouched by preset choice, so logo, gradient CTAs and brand marks remain consistent in every preset. Defined HERE (canonical) rather than only in packages/ui, so the generated apps//public/_shared/prime-aurora.css copies carry them too. Before SPEC-008 they existed only in packages/ui, which made data-theme-preset inert for the whole generated fleet. ======================================================== */ /* 1. OLED Vantablack & Titanium (default luxury dark) */ :root[data-theme-preset="oled-dark"] { --ngp-bg: #020408; --ngp-bg-elevated: #070A11; --ngp-surface-glass: rgba(255, 255, 255, 0.04); --ngp-border-glass: rgba(255, 255, 255, 0.09); --ngp-text-primary: #FFFFFF; --ngp-text-secondary: #94A3B8; --ngp-accent: #6366F1; --ngp-glow: rgba(99, 102, 241, 0.5); --ngp-grad: linear-gradient(135deg, #6366F1 0%, #A855F7 100%); --ngp-mesh-1: rgba(99, 102, 241, 0.22); --ngp-mesh-2: rgba(168, 85, 247, 0.22); --primary: 239 84% 67%; } /* 2. Cyber Aurora (Matrix Emerald & Neon Mint/Cyan) */ :root[data-theme-preset="cyber-aurora"] { --ngp-bg: #020B08; --ngp-bg-elevated: #051811; --ngp-surface-glass: rgba(16, 185, 129, 0.06); --ngp-border-glass: rgba(52, 211, 153, 0.16); --ngp-text-primary: #ECFDF5; --ngp-text-secondary: #6EE7B7; --ngp-accent: #10B981; --ngp-glow: rgba(16, 185, 129, 0.55); --ngp-grad: linear-gradient(135deg, #059669 0%, #06B6D4 100%); --ngp-mesh-1: rgba(16, 185, 129, 0.24); --ngp-mesh-2: rgba(6, 182, 212, 0.24); --primary: 160 84% 39%; } /* 3. Quantum Iris (Cosmic Ultraviolet & Magenta Prism) */ :root[data-theme-preset="quantum-iris"] { --ngp-bg: #06020E; --ngp-bg-elevated: #110526; --ngp-surface-glass: rgba(192, 132, 252, 0.06); --ngp-border-glass: rgba(216, 180, 254, 0.16); --ngp-text-primary: #FAF5FF; --ngp-text-secondary: #D8B4FE; --ngp-accent: #C084FC; --ngp-glow: rgba(192, 132, 252, 0.55); --ngp-grad: linear-gradient(135deg, #9333EA 0%, #EC4899 100%); --ngp-mesh-1: rgba(147, 51, 234, 0.25); --ngp-mesh-2: rgba(236, 72, 153, 0.25); --primary: 271 91% 65%; } /* 4. Sovereign Gold & Obsidian (Royal Champagne & Bronze Amber) */ :root[data-theme-preset="sovereign-gold"] { --ngp-bg: #090704; --ngp-bg-elevated: #1A1309; --ngp-surface-glass: rgba(245, 158, 11, 0.05); --ngp-border-glass: rgba(251, 191, 36, 0.2); --ngp-text-primary: #FFFBEB; --ngp-text-secondary: #FDE68A; --ngp-accent: #F59E0B; --ngp-glow: rgba(245, 158, 11, 0.5); --ngp-grad: linear-gradient(135deg, #D97706 0%, #FBBF24 50%, #B45309 100%); --ngp-mesh-1: rgba(217, 119, 6, 0.22); --ngp-mesh-2: rgba(245, 158, 11, 0.2); --primary: 38 92% 50%; } /* 5. Tokyo Neon Synthwave (Hot Magenta & Electric Cyan) */ :root[data-theme-preset="tokyo-neon"] { --ngp-bg: #090212; --ngp-bg-elevated: #16062B; --ngp-surface-glass: rgba(244, 63, 94, 0.07); --ngp-border-glass: rgba(244, 63, 94, 0.22); --ngp-text-primary: #FFF1F2; --ngp-text-secondary: #FDA4AF; --ngp-accent: #F43F5E; --ngp-glow: rgba(244, 63, 94, 0.6); --ngp-grad: linear-gradient(135deg, #F43F5E 0%, #06B6D4 100%); --ngp-mesh-1: rgba(244, 63, 94, 0.26); --ngp-mesh-2: rgba(6, 182, 212, 0.26); --primary: 350 89% 60%; } /* 6. Swiss Clean Luxe (High-Contrast Ivory & Obsidian Minimal) */ :root[data-theme-preset="swiss-clean"], :root[data-theme="light"][data-theme-preset="swiss-clean"] { --ngp-bg: #F8F9FC; --ngp-bg-elevated: #FFFFFF; --ngp-surface-glass: rgba(255, 255, 255, 0.85); --ngp-border-glass: rgba(15, 23, 42, 0.1); --ngp-text-primary: #0F172A; --ngp-text-secondary: #475569; --ngp-accent: #0F172A; --ngp-glow: rgba(15, 23, 42, 0.15); --ngp-grad: linear-gradient(135deg, #0F172A 0%, #334155 100%); --ngp-mesh-1: rgba(99, 102, 241, 0.08); --ngp-mesh-2: rgba(14, 165, 233, 0.08); --primary: 222 47% 11%; --background: 210 20% 98%; --foreground: 222 47% 11%; --card: 0 0% 100%; --card-foreground: 222 47% 11%; } /* RTL / Logical Properties Support (Urdu & Arabic Compatibility) */ html[dir="rtl"] { text-align: start; } .margin-start { margin-inline-start: var(--ngp-space-4); } .padding-start { padding-inline-start: var(--ngp-space-4); } /* Reduced Motion Overrides */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- COMPONENT PRIMITIVES (shared layer) ---------- Phase 1 hardening: -0.03em heading tracking + 1.15 heading line-height, keyboard-only focus rings, variant hover states, status pulse dots. */ h1, h2, h3, h4 { letter-spacing: -0.03em; line-height: 1.15; } .ngp-btn:focus-visible, .ngp-card-interactive:focus-visible, .ngp-link:focus-visible { outline: 2px solid var(--ngp-focus-ring-color, #8B4BA9); outline-offset: 2px; } .ngp-btn[data-variant="primary"]:hover:not(:disabled), .ngp-btn[data-variant="danger"]:hover:not(:disabled) { filter: brightness(1.07); } .ngp-btn[data-variant="secondary"]:hover:not(:disabled) { border-color: var(--ngp-border-strong, rgba(255,255,255,0.2)); } .ngp-btn[data-variant="ghost"]:hover:not(:disabled) { background: var(--ngp-surface-overlay, rgba(255,255,255,0.06)); } .ngp-pulse-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; position: relative; flex: 0 0 auto; } .ngp-pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: currentColor; opacity: 0.6; animation: ngp-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes ngp-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } /* ---------- LUXURY GLASSMORPHISM & AWWWARDS MOTION ENGINE ---------- */ .ngp-glass { background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15); } .ngp-card-luxury { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease; position: relative; overflow: hidden; } .ngp-card-luxury:hover { transform: translateY(-4px); border-color: rgba(6, 182, 212, 0.45); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px -5px rgba(6, 182, 212, 0.25); } .ngp-card-luxury::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); transition: left 0.75s ease; } .ngp-card-luxury:hover::before { left: 100%; } .ngp-text-luxury { background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 50%, #94A3B8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ngp-text-cyan-glow { background: linear-gradient(135deg, #22D3EE 0%, #06B6D4 50%, #0284C7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.35)); } .ngp-text-iris-glow { background: linear-gradient(135deg, #A78BFA 0%, #818CF8 50%, #6366F1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.35)); } .ngp-glow-cyan { box-shadow: 0 0 30px -5px rgba(6, 182, 212, 0.4); } .ngp-glow-iris { box-shadow: 0 0 30px -5px rgba(99, 102, 241, 0.4); } .ngp-bento-grid { display: grid; grid-auto-flow: dense; gap: 1.25rem; } /* ============================================================ NextGen Prime Official Brand Pack Tokens (v1.0 Integration) From: nextgen-prime-brand-pack/brand-pack ============================================================ */ :root { --ngp-brand-blue: #199FCE; --ngp-brand-indigo: #4B65B1; --ngp-brand-purple: #8B4BA9; --ngp-brand-ink: #0B0B14; --ngp-brand-ink2: #14122A; --ngp-brand-ink3: #241D3F; --ngp-brand-slate: #6B6480; --ngp-brand-mist: #E7E3F3; --ngp-brand-paper: #FBFAFF; --grad-brand: linear-gradient(120deg, #199FCE 0%, #4B65B1 52%, #8B4BA9 100%); --grad-hero: linear-gradient(135deg, #199FCE 0%, #4B65B1 50%, #8B4BA9 100%); --grad-swoosh: linear-gradient(90deg, #2D8BBE 0%, #595AAB 100%); --grad-ink: linear-gradient(160deg, #14122A 0%, #0B0B14 100%); } .ngp-brand-gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .ngp-brand-hero-gradient-text { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .ngp-brand-surface-dark { background: var(--grad-ink); color: #F4F2FB; } .ngp-brand-btn-primary { background: var(--grad-brand); color: #FFFFFF; border: 0; font-weight: 700; border-radius: 14px; padding: 12px 24px; box-shadow: 0 0 30px -5px rgba(25, 159, 206, 0.45); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .ngp-brand-btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 40px rgba(139, 75, 169, 0.5); } /* ---------- ARCHETYPE AMBIENT UTILITY CLASSES ---------- Apply one class to an application root for instant archetype styling: ngp-ambient-luxury, ngp-ambient-terminal, or ngp-ambient-retail. */ .ngp-ambient-luxury { position: relative; } .ngp-ambient-luxury::before, .ngp-ambient-luxury::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .ngp-ambient-luxury::before { top: -10%; left: 15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(25, 159, 206, 0.15) 0%, transparent 70%); filter: blur(90px); animation: ngp-drift-1 30s ease-in-out infinite; } .ngp-ambient-luxury::after { top: 10%; right: 15%; width: 550px; height: 550px; background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%); filter: blur(100px); animation: ngp-drift-2 35s ease-in-out infinite; } .ngp-ambient-terminal { position: relative; } .ngp-ambient-terminal::before { content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0.025; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(6, 182, 212, 0.12) 2px, rgba(6, 182, 212, 0.12) 3px); } .ngp-ambient-retail { position: relative; } .ngp-ambient-retail::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; pointer-events: none; background: var(--grad-brand, linear-gradient(90deg, #199FCE, #4B65B1, #8B4BA9)); } /* ---------- LEGACY COMPATIBILITY ALIASES ---------- These aliases preserve the 36/36 edge probe contract and existing app CSS that references older names. */ :root { --bg-primary: var(--ngp-bg); --bg-secondary: var(--ngp-bg-elevated); --text-primary: var(--ngp-text-primary); --text-secondary: var(--ngp-text-secondary); --purple-700: var(--ngp-purple-700); --purple-600: var(--ngp-purple-600); --purple-500: var(--ngp-purple-500); --purple-400: var(--ngp-purple-400); --purple-300: var(--ngp-purple-300); --glass-surface: var(--ngp-surface-glass); --glass-border: var(--ngp-border-glass); --accent: var(--ngp-accent); --gradient-accent: var(--ngp-gradient-accent); --shadow-glow: var(--ngp-shadow-glow); --focus-ring: var(--ngp-focus-ring); --font-heading: var(--ngp-font-heading); --font-body: var(--ngp-font-body); --font-mono: var(--ngp-font-mono); --space-1: var(--ngp-space-1); --space-2: var(--ngp-space-2); --space-3: var(--ngp-space-3); --space-4: var(--ngp-space-4); --space-5: var(--ngp-space-5); --space-6: var(--ngp-space-6); --space-7: var(--ngp-space-7); --space-8: var(--ngp-space-8); --touch-min: var(--ngp-touch-min); } /* Glassmorphism utility (legacy) */ .prime-glass { background: var(--ngp-surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ngp-border-glass); box-shadow: var(--ngp-shadow-glow); } /* SwiftNine micro-animation compatibility */ .swift-hidden { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .swift-visible { opacity: 1; transform: translateY(0); } /* ---------- SHARED MOTION KEYFRAMES ---------- */ @keyframes ngp-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes ngp-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes ngp-spin { to { transform: rotate(360deg); } } @keyframes ngp-pop { 0% { opacity: 0; transform: scale(0.96); } 60% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } .ngp-anim-fade-up { animation: ngp-fade-up 0.35s ease-out both; } .ngp-anim-pop { animation: ngp-pop 0.25s ease-out both; } .ngp-skeleton { position: relative; overflow: hidden; background: linear-gradient( 90deg, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 0%, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 40%, rgba(139, 75, 169, 0.14) 50%, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 60%, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 100% ); background-size: 800px 100%; animation: ngp-shimmer 1.6s linear infinite; } .ngp-card-interactive:hover { transform: translateY(-4px); border-color: rgba(139, 75, 169, 0.45); box-shadow: 0 12px 32px rgba(15, 10, 45, 0.45), 0 0 0 1px rgba(139, 75, 169, 0.15); } /* ---------- AppShell topbar: hide secondary nav on mobile ---------- */ @media (max-width: 760px) { .topbar nav { display: none; } }