Spaces:
Running
Running
Configure all setting to ensure it is running smoothly enhance all digital icons to be futuristic
0fe39f2 verified | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| user-select: none; | |
| touch-action: manipulation; | |
| } | |
| #map { | |
| filter: brightness(0.9) contrast(1.1); | |
| } | |
| .nav-icon { | |
| @apply p-2 rounded-full text-gray-400 transition-all duration-300 ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .nav-icon::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .nav-icon:hover::before { | |
| opacity: 1; | |
| } | |
| .nav-icon.active { | |
| @apply text-white; | |
| background: linear-gradient(135deg, #EF4444 0%, #F59E0B 100%); | |
| box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); | |
| } | |
| .nav-icon.active i { | |
| filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); | |
| } | |
| .nav-icon:hover { | |
| @apply text-white bg-gray-700; | |
| } | |
| /* Tesla-like smooth transitions */ | |
| * { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Futuristic glow effects */ | |
| .glow { | |
| filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.7)); | |
| } | |
| .glow-red { | |
| filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.7)); | |
| } | |
| .glow-green { | |
| filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.7)); | |
| } | |
| /* Voice control animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .voice-feedback { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| /* Miata-specific weather warning */ | |
| .weather-warning { | |
| display: none; | |
| } | |
| .weather-warning.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| /* High contrast for better visibility */ | |
| button, .card { | |
| @apply focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50; | |
| } | |
| /* Large touch targets for in-car use */ | |
| button { | |
| min-width: 44px; | |
| min-height: 44px; | |
| } | |
| /* Miata silhouette styling */ | |
| .miata-icon { | |
| filter: drop-shadow(0 0 4px rgba(0,0,0,0.3)); | |
| } | |
| /* Tesla-style subtle glowing effect for active items */ | |
| .glow-effect { | |
| box-shadow: 0 0 10px rgba(239,68,68,0.3); | |
| } |