/* ============================================================ NUDERR — DESIGN TOKENS Cyberpunk-premium · magenta/violet glow on warm-black ============================================================ */ /* Unbounded + Manrope: load via Google Fonts in index.html (see build-landing.sh for optional self-host). */ :root { /* ---- Base palette ---------------------------------------- */ --ink-1000: #050208; /* deepest void, behind everything */ --ink-900: #0a0410; /* primary background */ --ink-800: #120822; /* raised section */ --ink-700: #1c0e30; /* card / surface */ --ink-600: #2a1645; /* hover surface */ --ink-500: #3d2160; /* line / divider strong */ --ink-400: #5a3a85; /* muted accent */ --line-soft: rgba(255,255,255,0.06); --line-medium: rgba(255,255,255,0.10); --line-strong: rgba(255,255,255,0.18); --line-glow: rgba(255, 46, 154, 0.35); /* ---- Text ----------------------------------------------- */ --fg-1: #ffffff; /* primary text */ --fg-2: rgba(255,255,255,0.78); /* body */ --fg-3: rgba(255,255,255,0.56); /* secondary */ --fg-4: rgba(255,255,255,0.38); /* tertiary / placeholder */ --fg-5: rgba(255,255,255,0.22); /* disabled */ --fg-inv: #0a0410; /* text on bright accent */ /* ---- Accent — magenta/violet ---------------------------- */ --magenta-50: #ffe5f2; --magenta-100: #ffb8db; --magenta-200: #ff7cc0; --magenta-300: #ff4fae; --magenta-400: #ff2e9a; /* PRIMARY ACCENT */ --magenta-500: #e8127f; --magenta-600: #b80a64; --violet-50: #f2e5ff; --violet-100: #d9b8ff; --violet-200: #b97cff; --violet-300: #a020f0; /* SECONDARY ACCENT */ --violet-400: #8512cf; --violet-500: #6a0aa8; --violet-600: #4a0680; --accent: var(--magenta-400); --accent-strong: var(--magenta-500); --accent-2: var(--violet-300); /* Signature gradient (Hero, CTAs, brand surfaces) */ --grad-brand: linear-gradient(135deg, #ff2e9a 0%, #a020f0 100%); --grad-brand-soft: linear-gradient(135deg, rgba(255,46,154,0.18) 0%, rgba(160,32,240,0.18) 100%); --grad-text: linear-gradient(92deg, #ffffff 0%, #ffb8db 40%, #d9b8ff 100%); --grad-fade-b: linear-gradient(180deg, transparent 0%, var(--ink-900) 100%); --grad-fade-t: linear-gradient(0deg, transparent 0%, var(--ink-900) 100%); --grad-spot: radial-gradient(60% 60% at 50% 0%, rgba(255,46,154,0.28) 0%, rgba(160,32,240,0.12) 40%, transparent 70%); --grad-mesh: radial-gradient(40% 60% at 15% 10%, rgba(255,46,154,0.22), transparent 60%), radial-gradient(50% 70% at 85% 20%, rgba(160,32,240,0.22), transparent 60%), radial-gradient(60% 80% at 50% 100%, rgba(255,46,154,0.12), transparent 70%); /* ---- Semantic ------------------------------------------- */ --success: #2ee5a2; --warning: #ffb648; --danger: #ff4565; --info: #4fb3ff; /* ---- Glow / shadow -------------------------------------- */ --glow-sm: 0 0 12px rgba(255,46,154,0.45); --glow-md: 0 0 28px rgba(255,46,154,0.55), 0 0 60px rgba(160,32,240,0.25); --glow-lg: 0 0 60px rgba(255,46,154,0.55), 0 0 140px rgba(160,32,240,0.35); --glow-violet: 0 0 32px rgba(160,32,240,0.55); --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -20px rgba(0,0,0,0.6); --shadow-lift: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -20px rgba(255,46,154,0.35), 0 16px 40px -16px rgba(0,0,0,0.6); --shadow-press: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 20px -12px rgba(0,0,0,0.6); /* ---- Radius --------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* ---- Spacing scale (4pt grid) --------------------------- */ --s-0: 0px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---- Typography families -------------------------------- */ --font-display: "Unbounded", system-ui, sans-serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; /* ---- Type scale ---------------------------------------- */ --t-display-xl: 88px; --t-display-l: 64px; --t-display-m: 48px; --t-h1: 40px; --t-h2: 32px; --t-h3: 24px; --t-h4: 20px; --t-body-l: 18px; --t-body: 16px; --t-body-s: 14px; --t-caption: 12px; --t-micro: 11px; /* ---- Motion -------------------------------------------- */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-in: cubic-bezier(.55,0,.68,.2); --ease-inout: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; /* ---- Surfaces & glass ---------------------------------- */ --glass-bg: rgba(255,255,255,0.04); --glass-bg-strong: rgba(255,255,255,0.07); --glass-blur: blur(20px) saturate(140%); --glass-border: 1px solid rgba(255,255,255,0.10); } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--ink-900); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg-1); } .display-xl { font-size: var(--t-display-xl); font-weight: 700; letter-spacing: -0.04em; line-height: 0.96; } .display-l { font-size: var(--t-display-l); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; } .display-m { font-size: var(--t-display-m); font-weight: 600; letter-spacing: -0.025em; } h1, .h1 { font-size: var(--t-h1); } h2, .h2 { font-size: var(--t-h2); } h3, .h3 { font-size: var(--t-h3); } h4, .h4 { font-size: var(--t-h4); } p { color: var(--fg-2); margin: 0; } .body-l { font-size: var(--t-body-l); } .body { font-size: var(--t-body); } .body-s { font-size: var(--t-body-s); } .caption { font-size: var(--t-caption); color: var(--fg-3); } .micro { font-size: var(--t-micro); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg-3); font-weight: 500; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } a { color: var(--magenta-300); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--magenta-100); } ::selection { background: var(--magenta-400); color: var(--ink-900); } /* gradient text utility */ .text-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .text-grad-brand { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }