/* Theme tokens — overridable via Tweaks (the root gets inline --primary and --glow) */ :root { --primary: #4E36A3; --primary-light: #6B52C8; --primary-dark: #3A2880; --accent-yellow: #E7E247; --accent-coral: #EE6C4D; --accent-teal: #4798B5; --bg-base: #0a0812; --bg-surface: #120f1e; --bg-elevated: #1a1530; --fg-1: #ffffff; --fg-2: rgba(255,255,255,0.75); --fg-3: rgba(255,255,255,0.50); --fg-4: rgba(255,255,255,0.30); --glow-intensity: 1; /* multiplier for radial glow opacity */ --glow-primary: rgba(78,54,163,0.45); --glow-accent: rgba(231,226,71,0.25); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; --shadow-glow: 0 0 32px rgba(78,54,163,0.6); --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Poppins', sans-serif; background: var(--bg-base); color: var(--fg-1); -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: rgba(78,54,163,0.4); color: #fff; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #0a0812; } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-light); } button { font-family: inherit; } /* ── Utility: glass ─────────────────────────────────────────── */ .glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); } /* ── Mountain motif watermark (pure CSS triangles) ─────────── */ .mountains-bg { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--glow-intensity) * 0.04); background-image: radial-gradient(circle at 20% 80%, var(--primary) 0%, transparent 50%), radial-gradient(circle at 80% 70%, var(--accent-teal) 0%, transparent 55%); } /* ── Grain ──────────────────────────────────────────────────── */ .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; } /* ── Animations ─────────────────────────────────────────────── */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } @keyframes float-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .float-in { animation: float-up 700ms var(--ease) both; }