| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
| :root { |
| --primary-500: #8b5cf6; |
| --primary-600: #7c3aed; |
| --secondary-500: #ec4899; |
| --dark-900: #0f172a; |
| --dark-800: #1e293b; |
| --dark-700: #334155; |
| --light-100: #f8fafc; |
| } |
|
|
| body { |
| font-family: 'Inter', sans-serif; |
| background: var(--dark-900); |
| color: var(--light-100); |
| margin: 0; |
| padding: 0; |
| min-height: 100vh; |
| } |
|
|
| .glass-effect { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .gradient-text { |
| background: linear-gradient(90deg, var(--primary-500), var(--secondary-500)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
|
|
| |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
|
|
| .animate-bounce { |
| animation: bounce 1s infinite; |
| } |
|
|
| @keyframes bounce { |
| 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } |
| 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); } |
| } |
