Spaces:
Running
Running
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;600;800&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Inter', sans-serif; | |
| background-color: #080c18; | |
| color: #e2e8f0; | |
| } | |
| /* Custom Premium Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(15, 22, 41, 0.5); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #2d4a7a; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #3b82f6; | |
| } | |
| /* Glassmorphism Panel Class */ | |
| .premium-panel { | |
| background: rgba(15, 22, 41, 0.6); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(45, 74, 122, 0.5); | |
| border-radius: 12px; | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; | |
| } | |
| .premium-panel:hover { | |
| border-color: rgba(96, 165, 250, 0.4); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 0 0 15px rgba(59, 130, 246, 0.1) inset; | |
| } | |
| /* Pulse Animation for Live Status */ | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } | |
| 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } | |
| } | |
| .live-indicator { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| /* Shimmer effect for titles */ | |
| @keyframes shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .shimmer-text { | |
| background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #60a5fa 100%); | |
| background-size: 200% auto; | |
| color: transparent; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| animation: shimmer 4s linear infinite; | |
| } | |
| /* Button Hover Effects */ | |
| button { | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| button:active { | |
| transform: scale(0.97); | |
| } | |
| /* Add subtle micro-animations to metrics */ | |
| .metric-value { | |
| transition: color 0.3s ease; | |
| } | |