Spaces:
Sleeping
Sleeping
| @import "tailwindcss"; | |
| @config "../tailwind.config.js"; | |
| @layer base { | |
| body { | |
| background-color: #0B0E14; | |
| background-image: radial-gradient(circle at top right, #131722 0%, #0B0E14 50%), | |
| radial-gradient(circle at bottom left, #131722 0%, #0B0E14 50%); | |
| background-attachment: fixed; | |
| color: #e1e2eb; | |
| min-height: 100vh; | |
| } | |
| /* Subtle global background glow */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: radial-gradient(circle at 15% 50%, rgba(2, 150, 118, 0.05), transparent 50%), | |
| radial-gradient(circle at 85% 30%, rgba(9, 137, 177, 0.05), transparent 50%); | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| } | |
| @layer components { | |
| .glass-panel { | |
| background-color: rgba(19, 23, 34, 0.6); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .glass-input { | |
| background-color: rgba(19, 23, 34, 0.4); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .glass-input:focus { | |
| border-color: #029676; | |
| outline: none; | |
| box-shadow: 0 0 10px rgba(2, 150, 118, 0.2); | |
| } | |
| .btn-primary { | |
| background-color: #029676; | |
| color: white; | |
| transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn-primary:hover { | |
| box-shadow: 0 0 15px rgba(2, 150, 118, 0.4); | |
| transform: scale(1.02); | |
| } | |
| .route-gradient { | |
| background: linear-gradient(to bottom, #029676, #0989B1); | |
| width: 4px; | |
| border-radius: 2px; | |
| } | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| } | |
| .material-symbols-outlined[data-weight="fill"] { | |
| font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| } | |
| } | |
| @layer utilities { | |
| /* Hide scrollbar for clean UI but allow scroll */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| } | |