| /* Base styles */ | |
| body { | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .dark ::-webkit-scrollbar-track { | |
| background: #2d3748; | |
| } | |
| .dark ::-webkit-scrollbar-thumb { | |
| background: #4a5568; | |
| } | |
| .dark ::-webkit-scrollbar-thumb:hover { | |
| background: #718096; | |
| } | |
| /* Rally car animations */ | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .rally-btn { | |
| transition: all 0.2s ease; | |
| font-weight: 800; | |
| text-align: center; | |
| min-width: 100px; | |
| z-index: 10; | |
| } | |
| .rally-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.3); | |
| } | |
| #canvas-container { | |
| touch-action: none; | |
| } | |
| @media (max-width: 640px) { | |
| .rally-btn { | |
| padding: 0.5rem; | |
| min-width: 80px; | |
| font-size: 0.8rem; | |
| } | |
| } | |