Spaces:
Runtime error
Runtime error
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f8fafc; | |
| color: #0f172a; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* Custom scrollbar - light theme */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| /* Selection color */ | |
| ::selection { | |
| background-color: rgba(118, 185, 0, 0.2); | |
| color: #0f172a; | |
| } | |
| /* Focus rings */ | |
| :focus-visible { | |
| outline: 2px solid #76b900; | |
| outline-offset: 2px; | |
| } | |
| /* Animations */ | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -200% 0; | |
| } | |
| 100% { | |
| background-position: 200% 0; | |
| } | |
| } | |
| .animate-shimmer { | |
| animation: shimmer 2s infinite; | |
| background: linear-gradient(90deg, | |
| #f1f5f9 0%, | |
| #e2e8f0 50%, | |
| #f1f5f9 100%); | |
| background-size: 200% 100%; | |
| } | |
| /* Smooth transitions globally */ | |
| button, | |
| a, | |
| input, | |
| [role="button"] { | |
| transition: all 0.15s ease; | |
| } | |
| /* Enhanced glassmorphism panels */ | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| /* Subtle gradient mesh background */ | |
| .gradient-mesh { | |
| background: | |
| radial-gradient(at 40% 20%, rgba(118, 185, 0, 0.03) 0px, transparent 50%), | |
| radial-gradient(at 80% 0%, rgba(14, 165, 233, 0.03) 0px, transparent 50%), | |
| radial-gradient(at 0% 50%, rgba(118, 185, 0, 0.02) 0px, transparent 50%), | |
| #f8fafc; | |
| } | |
| /* Premium shimmer loading effect */ | |
| .shimmer-premium { | |
| background: linear-gradient(90deg, | |
| #f1f5f9 0%, | |
| #f8fafc 25%, | |
| #e2e8f0 50%, | |
| #f8fafc 75%, | |
| #f1f5f9 100%); | |
| background-size: 400% 100%; | |
| animation: shimmer 2s ease-in-out infinite; | |
| } | |
| /* Card interactive hover effect */ | |
| .card-interactive { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .card-interactive:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05); | |
| } | |
| /* Subtle glow effect */ | |
| .glow-nvidia { | |
| box-shadow: 0 0 20px rgba(118, 185, 0, 0.15); | |
| } | |
| /* Smooth image transition */ | |
| .image-preview { | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .image-preview:hover { | |
| transform: scale(1.02); | |
| } | |
| /* Result bar fill animation */ | |
| @keyframes fillBar { | |
| from { | |
| width: 0%; | |
| } | |
| } | |
| .result-bar-animated { | |
| animation: fillBar 0.6s ease-out forwards; | |
| } | |
| /* Pulse ring for connection indicator */ | |
| @keyframes pulseRing { | |
| 0% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(2); | |
| opacity: 0; | |
| } | |
| } | |
| .pulse-ring::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: 50%; | |
| border: 2px solid currentColor; | |
| animation: pulseRing 1.5s ease-out infinite; | |
| } |