Spaces:
Sleeping
Sleeping
| @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@400;500;600;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); | |
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| background: #01050F; | |
| color: #F4F6FB; | |
| font-family: 'Open Sans', system-ui, -apple-system, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* Musora brand: Bebas Neue Bold in all caps for display text */ | |
| .h-display { | |
| font-family: 'Bebas Neue', Impact, sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| /* Primary CTA — Bebas uppercase on Musora Gold */ | |
| .btn-primary { | |
| font-family: 'Bebas Neue', Impact, sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| font-weight: 700; | |
| background: #FDB719; | |
| color: #01050F; | |
| transition: filter 0.15s ease, transform 0.05s ease; | |
| } | |
| .btn-primary:hover { filter: brightness(1.08); } | |
| .btn-primary:active { transform: translateY(1px); } | |
| .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } | |
| .card { | |
| background: #0A1020; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(253, 183, 25, 0.35); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(253, 183, 25, 0.6); | |
| } | |
| /* Slider styling */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: transparent; | |
| height: 14px; | |
| } | |
| input[type="range"]::-webkit-slider-runnable-track { | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.22); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 999px; | |
| } | |
| input[type="range"]::-moz-range-track { | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.22); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 999px; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 14px; | |
| height: 14px; | |
| background: #FDB719; | |
| border: 2px solid #01050F; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| margin-top: -6px; | |
| transition: transform 0.15s ease; | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 14px; | |
| height: 14px; | |
| background: #FDB719; | |
| border: 2px solid #01050F; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: transform 0.15s ease; | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover, | |
| input[type="range"]::-moz-range-thumb:hover { | |
| transform: scale(1.15); | |
| } | |
| /* Animation keyframes */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.25s ease-out; | |
| } | |
| @keyframes spin-slow { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .animate-spin-slow { | |
| animation: spin-slow 3s linear infinite; | |
| } | |
| @keyframes pulse-border { | |
| 0%, 100% { border-color: rgba(253, 183, 25, 0.3); } | |
| 50% { border-color: rgba(253, 183, 25, 0.8); } | |
| } | |
| .animate-pulse-border { | |
| animation: pulse-border 2s ease-in-out infinite; | |
| } | |