Spaces:
Sleeping
Sleeping
| @import "tailwindcss"; | |
| :root { | |
| --background: #0a0a0f; | |
| --foreground: #e8e8ed; | |
| --card: #12121a; | |
| --card-hover: #1a1a25; | |
| --border: #1e1e2e; | |
| --border-light: #2a2a3e; | |
| --primary: #6c5ce7; | |
| --primary-light: #a29bfe; | |
| --primary-dark: #4834d4; | |
| --secondary: #00cec9; | |
| --secondary-light: #55efc4; | |
| --accent: #fd79a8; | |
| --accent-light: #ff9ff3; | |
| --success: #00b894; | |
| --warning: #fdcb6e; | |
| --danger: #ff6b6b; | |
| --muted: #636e82; | |
| --muted-light: #8395a7; | |
| --gradient-primary: linear-gradient(135deg, #6c5ce7, #a29bfe); | |
| --gradient-secondary: linear-gradient(135deg, #00cec9, #55efc4); | |
| --gradient-accent: linear-gradient(135deg, #fd79a8, #e17055); | |
| --gradient-dark: linear-gradient(180deg, #0a0a0f 0%, #12121a 100%); | |
| --gradient-glow: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(0, 206, 201, 0.15)); | |
| --shadow-glow: 0 0 30px rgba(108, 92, 231, 0.15); | |
| --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.3); | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| --radius-lg: 24px; | |
| --radius-full: 9999px; | |
| } | |
| @theme inline { | |
| --color-background: var(--background); | |
| --color-foreground: var(--foreground); | |
| --color-card: var(--card); | |
| --color-card-hover: var(--card-hover); | |
| --color-border: var(--border); | |
| --color-border-light: var(--border-light); | |
| --color-primary: var(--primary); | |
| --color-primary-light: var(--primary-light); | |
| --color-primary-dark: var(--primary-dark); | |
| --color-secondary: var(--secondary); | |
| --color-secondary-light: var(--secondary-light); | |
| --color-accent: var(--accent); | |
| --color-accent-light: var(--accent-light); | |
| --color-success: var(--success); | |
| --color-warning: var(--warning); | |
| --color-danger: var(--danger); | |
| --color-muted: var(--muted); | |
| --color-muted-light: var(--muted-light); | |
| --font-sans: var(--font-geist-sans); | |
| --font-mono: var(--font-geist-mono); | |
| } | |
| /* ===== Base Styles ===== */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| background: var(--background); | |
| color: var(--foreground); | |
| font-family: var(--font-sans, 'Inter', system-ui, sans-serif); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ===== Scrollbar ===== */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-light); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--muted); | |
| } | |
| /* ===== Glassmorphism ===== */ | |
| .glass { | |
| background: rgba(18, 18, 26, 0.6); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .glass-light { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| /* ===== Animated Background ===== */ | |
| .bg-mesh { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .bg-mesh::before, | |
| .bg-mesh::after { | |
| content: ''; | |
| position: absolute; | |
| width: 600px; | |
| height: 600px; | |
| border-radius: 50%; | |
| filter: blur(120px); | |
| opacity: 0.3; | |
| animation: float 20s ease-in-out infinite; | |
| } | |
| .bg-mesh::before { | |
| background: var(--primary); | |
| top: -200px; | |
| right: -200px; | |
| animation-delay: 0s; | |
| } | |
| .bg-mesh::after { | |
| background: var(--secondary); | |
| bottom: -200px; | |
| left: -200px; | |
| animation-delay: -10s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 25% { transform: translate(50px, 50px) scale(1.05); } | |
| 50% { transform: translate(-30px, 80px) scale(0.95); } | |
| 75% { transform: translate(-60px, -40px) scale(1.02); } | |
| } | |
| /* ===== Glow Effects ===== */ | |
| .glow-primary { | |
| box-shadow: 0 0 20px rgba(108, 92, 231, 0.3), 0 0 60px rgba(108, 92, 231, 0.1); | |
| } | |
| .glow-secondary { | |
| box-shadow: 0 0 20px rgba(0, 206, 201, 0.3), 0 0 60px rgba(0, 206, 201, 0.1); | |
| } | |
| .glow-accent { | |
| box-shadow: 0 0 20px rgba(253, 121, 168, 0.3), 0 0 60px rgba(253, 121, 168, 0.1); | |
| } | |
| /* ===== Button Styles ===== */ | |
| .btn-primary { | |
| background: var(--gradient-primary); | |
| color: white; | |
| padding: 12px 28px; | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(108, 92, 231, 0.4); | |
| } | |
| .btn-primary:hover::before { | |
| opacity: 1; | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--foreground); | |
| padding: 12px 28px; | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| border: 1px solid var(--border-light); | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--primary); | |
| color: var(--primary-light); | |
| background: rgba(108, 92, 231, 0.05); | |
| transform: translateY(-2px); | |
| } | |
| /* ===== Card Styles ===== */ | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card:hover { | |
| border-color: var(--border-light); | |
| background: var(--card-hover); | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-card); | |
| } | |
| /* ===== Text Gradient ===== */ | |
| .text-gradient { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .text-gradient-secondary { | |
| background: var(--gradient-secondary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* ===== Pulse Ring ===== */ | |
| .pulse-ring { | |
| position: relative; | |
| } | |
| .pulse-ring::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: inherit; | |
| border: 2px solid var(--primary); | |
| opacity: 0; | |
| animation: pulse-ring 2s ease-out infinite; | |
| } | |
| @keyframes pulse-ring { | |
| 0% { opacity: 0.6; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(1.15); } | |
| } | |
| /* ===== Typing animation ===== */ | |
| .typing-dots span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--primary-light); | |
| margin: 0 2px; | |
| animation: typing-bounce 1.4s ease-in-out infinite; | |
| } | |
| .typing-dots span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dots span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typing-bounce { | |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 30% { transform: translateY(-8px); opacity: 1; } | |
| } | |
| /* ===== Score Ring ===== */ | |
| .score-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .score-ring circle { | |
| transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* ===== Shimmer Loading ===== */ | |
| .shimmer { | |
| background: linear-gradient( | |
| 90deg, | |
| var(--card) 0%, | |
| var(--card-hover) 50%, | |
| var(--card) 100% | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s ease-in-out infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* ===== Fade In Up ===== */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; | |
| } | |
| /* ===== Progress Bar ===== */ | |
| .progress-bar { | |
| background: var(--border); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| height: 6px; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| border-radius: var(--radius-full); | |
| background: var(--gradient-primary); | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |