kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: Add premium login design system inspired by telecom aesthetics

Browse Source 
- Create comprehensive theme system with professional color palette
- Implement flat design login mockups for both dark and light themes
- Add telecom-inspired glassmorphism effects and micro-interactions
- Include Quantic Telecom reference design for professional styling
- Generate responsive login interfaces with premium animations
- Support both flat and gradient design variations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kbe
2025-09-05 00:21:38 +02:00
parent a0e53325f7
commit d18c1a7b3e
6 changed files with 2249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
.superdesign/design_iterations/aperonight_premium_theme.css Normal file
View File

@@ -0,0 +1,125 @@
:root {
/* AperoNight Premium Theme - Telecom Inspired */
/* Base Colors - Sophisticated Navy & Electric Accents */
--background: oklch(0.1200 0.0300 240);
--foreground: oklch(0.9500 0.0100 240);
--surface: oklch(0.1600 0.0400 240);
--surface-elevated: oklch(0.2000 0.0500 240);
/* Card & Dialog surfaces */
--card: oklch(0.9800 0.0100 240);
--card-foreground: oklch(0.1500 0.0200 240);
--popover: oklch(0.9800 0.0100 240);
--popover-foreground: oklch(0.1500 0.0200 240);
/* Primary - Premium Electric Blue */
--primary: oklch(0.5500 0.2400 220);
--primary-foreground: oklch(0.9800 0.0100 220);
--primary-hover: oklch(0.4800 0.2600 220);
--primary-light: oklch(0.8500 0.1200 220);
--primary-dark: oklch(0.3500 0.2800 220);
/* Secondary - Sophisticated Slate */
--secondary: oklch(0.8800 0.0200 240);
--secondary-foreground: oklch(0.2500 0.0300 240);
--secondary-hover: oklch(0.8200 0.0300 240);
/* Accent - Vibrant Cyan (Events Energy) */
--accent: oklch(0.6800 0.2600 200);
--accent-foreground: oklch(0.9800 0.0100 200);
--accent-light: oklch(0.8800 0.1400 200);
--accent-dark: oklch(0.4500 0.3000 200);
/* Success - Event Success Green */
--success: oklch(0.6200 0.2200 140);
--success-foreground: oklch(0.9600 0.0200 140);
--success-light: oklch(0.9200 0.1000 140);
/* Warning - Premium Gold */
--warning: oklch(0.7500 0.2000 60);
--warning-foreground: oklch(0.2000 0.0300 60);
--warning-light: oklch(0.9400 0.1000 60);
/* Error - Professional Red */
--destructive: oklch(0.5800 0.2400 20);
--destructive-foreground: oklch(0.9700 0.0200 20);
--destructive-light: oklch(0.9300 0.1200 20);
/* Muted tones */
--muted: oklch(0.8800 0.0200 240);
--muted-foreground: oklch(0.4800 0.0400 240);
--muted-dark: oklch(0.7500 0.0300 240);
/* Borders and inputs */
--border: oklch(0.8400 0.0300 240);
--input: oklch(0.9600 0.0200 240);
--input-border: oklch(0.8200 0.0400 240);
--ring: oklch(0.5500 0.2400 220);
/* Typography - Premium Event Platform */
--font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
--font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and layout */
--radius: 0.75rem;
--spacing: 1rem;
/* Premium shadow system */
--shadow-xs: 0 1px 3px 0 hsl(240 30% 8% / 0.08), 0 1px 2px -1px hsl(240 30% 8% / 0.06);
--shadow-sm: 0 2px 6px -1px hsl(240 30% 8% / 0.10), 0 2px 4px -2px hsl(240 30% 8% / 0.08);
--shadow: 0 4px 8px -2px hsl(240 30% 8% / 0.12), 0 2px 4px -2px hsl(240 30% 8% / 0.08);
--shadow-md: 0 8px 16px -4px hsl(240 30% 8% / 0.14), 0 4px 6px -2px hsl(240 30% 8% / 0.10);
--shadow-lg: 0 16px 24px -4px hsl(240 30% 8% / 0.16), 0 8px 8px -4px hsl(240 30% 8% / 0.08);
--shadow-xl: 0 20px 32px -8px hsl(240 30% 8% / 0.20), 0 8px 16px -8px hsl(240 30% 8% / 0.12);
--shadow-2xl: 0 32px 64px -12px hsl(240 30% 8% / 0.25);
/* Electric/Glow shadows for premium effects */
--shadow-electric: 0 4px 16px -2px hsl(220 100% 70% / 0.20), 0 2px 8px -2px hsl(220 100% 70% / 0.15);
--shadow-accent: 0 4px 16px -2px hsl(200 100% 70% / 0.25), 0 2px 8px -2px hsl(200 100% 70% / 0.20);
/* Premium gradients */
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
--gradient-background: linear-gradient(135deg,
oklch(0.1200 0.0300 240) 0%,
oklch(0.1000 0.0400 235) 25%,
oklch(0.0800 0.0500 230) 50%,
oklch(0.1000 0.0400 225) 75%,
oklch(0.1200 0.0300 220) 100%);
--gradient-card: linear-gradient(135deg,
oklch(0.9900 0.0100 240) 0%,
oklch(0.9700 0.0200 235) 100%);
/* Tech pattern overlays */
--grid-color: oklch(0.3000 0.0500 240);
--dot-color: oklch(0.2500 0.0600 220);
--connection-color: oklch(0.4000 0.1200 210);
/* Glass morphism for premium feel */
--glass-bg: oklch(0.9800 0.0100 240 / 0.80);
--glass-border: oklch(0.8500 0.0300 240 / 0.30);
--glass-backdrop: blur(16px) saturate(200%);
/* Professional states */
--hover-lift: translateY(-2px);
--hover-scale: scale(1.02);
--focus-ring: 0 0 0 3px var(--ring);
/* Event-specific colors */
--event-vip: oklch(0.6500 0.2500 45);
--event-premium: oklch(0.5500 0.2200 280);
--event-standard: oklch(0.6000 0.1800 160);
--event-available: oklch(0.6200 0.2000 140);
--event-limited: oklch(0.7200 0.2000 50);
--event-sold-out: oklch(0.5500 0.2200 15);
/* Radius variations */
--radius-xs: calc(var(--radius) - 4px);
--radius-sm: calc(var(--radius) - 2px);
--radius-md: var(--radius);
--radius-lg: calc(var(--radius) + 4px);
--radius-xl: calc(var(--radius) + 8px);
--radius-2xl: calc(var(--radius) + 12px);
--radius-full: 9999px;
}