116 lines
5.0 KiB
CSS
116 lines
5.0 KiB
CSS
:root {
|
|
/* ------------------------------------------------------------------ */
|
|
/* Color palette */
|
|
/* Refined from the original neon set: slightly desaturated cyan / */
|
|
/* indigo / violet so the surface reads "premium dark" rather than */
|
|
/* "neon". Each accent has a 3-step scale for hover / active states. */
|
|
/* ------------------------------------------------------------------ */
|
|
--primary-color: #4fc3f7;
|
|
--primary-color-light: #81d4fa;
|
|
--primary-400: #6fd0fb;
|
|
--primary-500: #4fc3f7;
|
|
--primary-600: #2aa7e6;
|
|
|
|
--secondary-color: #667eea;
|
|
--secondary-400: #889aef;
|
|
--secondary-500: #667eea;
|
|
--secondary-600: #4f63d8;
|
|
|
|
--tertiary-color: #764ba2;
|
|
--tertiary-400: #8e63bd;
|
|
--tertiary-500: #764ba2;
|
|
--tertiary-600: #5d3784;
|
|
|
|
/* Unified accent gradient + glow reused everywhere */
|
|
--accent-gradient: linear-gradient(120deg, var(--primary-500) 0%, var(--secondary-500) 50%, var(--tertiary-500) 100%);
|
|
--accent-gradient-text: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 60%, var(--tertiary-400) 100%);
|
|
--accent-glow: rgba(79, 195, 247, 0.35);
|
|
--accent-glow-soft: rgba(118, 75, 162, 0.22);
|
|
--accent-glow-ring: 0 0 0 1px rgba(79, 195, 247, 0.45), 0 0 18px -2px rgba(79, 195, 247, 0.45);
|
|
|
|
/* Surfaces / glass */
|
|
--background-color: #000000;
|
|
--glass-background: rgba(6, 4, 14, 0.34);
|
|
--glass-border: rgba(255, 255, 255, 0.14);
|
|
--glass-border-strong: rgba(255, 255, 255, 0.20);
|
|
--glass-shadow: rgba(31, 38, 135, 0.36);
|
|
|
|
--surface-raised: rgba(255, 255, 255, 0.045);
|
|
--surface-raised-hover: rgba(255, 255, 255, 0.075);
|
|
--surface-divider: rgba(255, 255, 255, 0.08);
|
|
|
|
/* Text */
|
|
--text-color: #ffffff;
|
|
--text-color-light: rgba(255, 255, 255, 0.82);
|
|
--text-color-mid: rgba(255, 255, 255, 0.62);
|
|
--text-color-dark: rgba(255, 255, 255, 0.52);
|
|
|
|
/* Buttons */
|
|
--button-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.45), rgba(10, 12, 36, 0.36));
|
|
--button-hover-gradient: linear-gradient(120deg, rgba(40, 16, 66, 0.7), rgba(12, 14, 44, 0.5));
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Typography */
|
|
/* ------------------------------------------------------------------ */
|
|
--font-family: "Lexend", sans-serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", ui-monospace, monospace;
|
|
|
|
--text-xs: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
|
|
--text-sm: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
|
|
--text-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
|
|
--text-md: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
|
|
--text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
|
|
--text-xl: clamp(1.6rem, 1.3rem + 1.5vw, 2rem);
|
|
--text-2xl: clamp(2rem, 1.6rem + 2.2vw, 2.8rem);
|
|
--text-3xl: clamp(2.4rem, 1.9rem + 2.8vw, 3.2rem);
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Spacing scale */
|
|
/* ------------------------------------------------------------------ */
|
|
--space-2xs: 0.25rem;
|
|
--space-xs: 0.5rem;
|
|
--space-sm: 0.75rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2rem;
|
|
--space-2xl: 2.75rem;
|
|
--space-3xl: 3.5rem;
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Radii */
|
|
/* ------------------------------------------------------------------ */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 24px;
|
|
--radius-pill: 999px;
|
|
|
|
--border-radius: var(--radius-lg);
|
|
--border-radius-large: var(--radius-xl);
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Shadow tiers */
|
|
/* ------------------------------------------------------------------ */
|
|
--shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 8px 24px -6px var(--glass-shadow);
|
|
--shadow-lg: 0 18px 48px -12px rgba(0, 0, 0, 0.55), 0 4px 16px -4px rgba(0, 0, 0, 0.35);
|
|
--inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
--shadow-glow-accent: 0 8px 24px -6px var(--accent-glow), 0 0 0 1px rgba(79, 195, 247, 0.18);
|
|
|
|
/* Semi-transparent helpers for animated shadows */
|
|
--primary-color-16: rgba(79, 195, 247, 0.16);
|
|
--tertiary-color-20: rgba(118, 75, 162, 0.2);
|
|
--dark-shadow-15: rgba(0, 0, 0, 0.15);
|
|
--dark-shadow-18: rgba(0, 0, 0, 0.18);
|
|
--dark-shadow-20: rgba(0, 0, 0, 0.20);
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Motion */
|
|
/* ------------------------------------------------------------------ */
|
|
--dur-fast: 0.18s;
|
|
--dur-med: 0.3s;
|
|
--dur-slow: 0.55s;
|
|
--ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|