Spaces:
Running
Running
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| /* Smooth Scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .fade-in-up { | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| .scale-in { | |
| animation: scaleIn 0.3s ease-out; | |
| } | |
| /* Video Thumbnail Hover Effects */ | |
| .video-thumbnail { | |
| transition: all 0.3s ease; | |
| transform-origin: center; | |
| } | |
| .video-thumbnail:hover { | |
| transform: scale(1.05); | |
| z-index: 10; | |
| } | |
| /* Category Row Scroll */ | |
| .category-row { | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| .category-row::-webkit-scrollbar { | |
| display: none; | |
| } | |
| /* Gradient Text */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #ef4444 0%, #0ea5e9 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Loading Animation */ | |
| .loading-spinner { | |
| border: 2px solid #4b5563; | |
| border-top: 2px solid #ef4444; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } |