| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;450;550;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); |
| @import "tailwindcss"; |
|
|
| @theme { |
| --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; |
| --font-display: "Space Grotesk", sans-serif; |
| --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; |
|
|
| --color-brand-orange: #ff5500; |
| --color-brand-dark: #121214; |
| --color-brand-card: #1c1c24; |
| } |
|
|
| |
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: var(--font-sans); |
| } |
|
|
| .text-glow { |
| text-shadow: 0 0 10px rgba(255, 85, 0, 0.4); |
| } |
|
|
| .box-glow { |
| box-shadow: 0 0 20px rgba(255, 85, 0, 0.15); |
| } |
|
|
| .glassmorphism { |
| background: rgba(28, 28, 36, 0.7); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| } |
|
|
| .glassmorphism-light { |
| background: rgba(255, 255, 255, 0.75); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid rgba(0, 0, 0, 0.05); |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #121214; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #2a2a35; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #ff5500; |
| } |
|
|
| @keyframes marquee { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-50%); } |
| } |
|
|
| .animate-marquee-scroll { |
| display: flex; |
| width: max-content; |
| animation: marquee 40s linear infinite; |
| } |
|
|
| .animate-spin-slow { |
| animation: spin 20s linear infinite; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| @keyframes wiggle { |
| 0%, 100% { transform: rotate(0deg); } |
| 25% { transform: rotate(-8deg); } |
| 75% { transform: rotate(8deg); } |
| } |
|
|
| .animate-wiggle { |
| animation: wiggle 1s ease-in-out infinite; |
| } |
|
|
| .animate-pulse-slow { |
| animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
|
|