* { margin: 0; padding: 0; box-sizing: border-box; } /* Professional waveform audio player container */ .audio-player-container { background: rgba(31, 31, 31, 0.95); border-radius: 12px; padding: 20px; margin: 24px 0; border: 1px solid rgba(255, 121, 0, 0.2); backdrop-filter: blur(10px); } /* Waveform container styling */ .waveform-container { height: 120px; width: 100%; margin: 16px 0; background: rgba(31, 31, 31, 0.8); border-radius: 8px; border: 1px solid rgba(255, 121, 0, 0.3); position: relative; } /* Loading state styling */ .waveform-container.loading { display: flex; align-items: center; justify-content: center; background: rgba(31, 31, 31, 0.8); } /* When WaveSurfer is active, remove flex centering */ .waveform-container wave { width: 100% !important; } .waveform-loading { color: #FF7900; font-size: 14px; display: flex; align-items: center; gap: 8px; } .waveform-loading::before { content: "♪"; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Custom audio controls - positioned below waveform */ .audio-controls { display: flex; align-items: center; gap: 16px; margin-top: 12px; } .play-button { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #FF7900 0%, #CC5500 100%); border: none; color: white; font-size: 18px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(255, 121, 0, 0.3); } .play-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 121, 0, 0.4); background: linear-gradient(135deg, #CC5500 0%, #FF7900 100%); } .play-button.playing { background: linear-gradient(135deg, #CC5500 0%, #FF7900 100%); box-shadow: 0 4px 12px rgba(255, 121, 0, 0.4); } .play-button.playing:hover { box-shadow: 0 6px 16px rgba(255, 121, 0, 0.5); } .time-display { color: #FF7900; font-family: 'Prologue', 'Courier New', monospace; font-size: 14px; min-width: 80px; } /* Mobile optimizations */ @media (max-width: 768px) { .audio-player-container { padding: 16px; margin: 16px 0; } .waveform-container { height: 100px; margin: 12px 0; } .play-button { width: 44px; height: 44px; font-size: 16px; } .audio-controls { gap: 12px; margin-top: 8px; } } /* Clean layout: controls below waveform on all viewports */ .audio-player-container .waveform-container { position: relative; min-height: 120px; margin-bottom: 16px; } .audio-player-container .audio-controls { position: relative; z-index: 10; } .audio-player-container .time-display { font-size: 13px; } /* Dark mode heading override H1 & H2 switch from #FF7900 (light) to #843F00 (dark) Body text stays #F8F8FF via dark:text-[#F8F8FF] on */ html.dark .text-music-gold { color: #843F00 !important; } html.dark h1, html.dark h2 { color: #843F00 !important; } /* Smooth scroll behavior */ html { scroll-behavior: smooth; } /* Custom scrollbar for webkit browsers */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(248, 248, 255, 0.3); } ::-webkit-scrollbar-thumb { background: rgba(255, 121, 0, 0.6); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 121, 0, 0.8); } /* Navigation improvements */ .nav-link:hover { color: #FF7900; transition: color 0.3s ease; } /* Button hover effects */ .btn-primary { background: linear-gradient(135deg, #FF7900 0%, #CC5500 100%); transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 121, 0, 0.3); } /* Form styling */ .form-input { background: rgba(248, 248, 255, 0.8); border: 2px solid rgba(255, 121, 0, 0.3); transition: border-color 0.3s ease; } .form-input:focus { border-color: rgba(255, 121, 0, 0.8); outline: none; } /* Card hover effects */ .project-card:hover { transform: translateY(-4px); transition: transform 0.3s ease; } /* Loading animations */ .fade-in { animation: fadeIn 0.8s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }