'); opacity: 0.1; } .hero-content { position: relative; z-index: 1; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; animation: fadeInUp 1s ease; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; animation: fadeInUp 1s ease 0.2s both; } /* ===== CARDS ===== */ .card { background: var(--light-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* ===== MUSIC PLAYER ===== */ .music-player { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top: 1px solid var(--border-color); padding: 1rem; z-index: 999; transform: translateY(100%); transition: transform 0.3s ease; } .music-player.active { transform: translateY(0); } .player-content { display: flex; align-items: center; gap: 1rem; max-width: 1200px; margin: 0 auto; } .player-info { display: flex; align-items: center; gap: 1rem; flex: 1; } .player-cover { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; } .player-details h4 { margin: 0; font-size: 0.9rem; } .player-details p { margin: 0; font-size: 0.8rem; color: var(--text-secondary); } .player-controls { display: flex; align-items: center; gap: 1rem; } .player-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: all 0.3s ease; } .player-btn:hover { background: var(--border-color); } .play-btn { background: var(--gradient-primary); color: white; font-size: 1.5rem; } .play-btn:hover { background: var(--gradient-primary); transform: scale(1.1); } /* ===== YOUTUBE EMBED ===== */ .youtube-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */ margin: 1rem 0; } .youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; } /* ===== ALBUM GRID ===== */ .album-card { text-align: center; transition: all 0.3s ease; } .album-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 1rem; transition: all 0.3s ease; } .album-card:hover .album-cover { transform: scale(1.05); box-shadow: var(--shadow-lg); } .album-title { font-weight: 600; margin-bottom: 0.5rem; } .album-artist { color: var(--text-secondary); font-size: 0.9rem; } /* ===== SECTIONS ===== */ .section { padding: 4rem 0; } .section-header { text-align: center; margin-bottom: 3rem; } .section-title { font-size: 2.5rem; margin-bottom: 1rem; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-subtitle { color: var(--text-secondary); font-size: 1.1rem; } /* ===== SIDEBAR ===== */ .sidebar { background: var(--light-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 2rem; height: fit-content; position: sticky; top: 100px; } .widget { margin-bottom: 2rem; } .widget:last-child { margin-bottom: 0; } .widget-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-color); } /* ===== FOOTER ===== */ .footer { background: var(--dark-bg); color: var(--text-light); padding: 3rem 0 1rem; margin-top: 4rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3 { margin-bottom: 1rem; color: var(--accent-color); } .footer-section a { color: var(--text-light); text-decoration: none; transition: color 0.3s ease; } .footer-section a:hover { color: var(--accent-color); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #374151; color: var(--text-secondary); } /* ===== ANIMATIONS ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .animate-pulse { animation: pulse 2s infinite; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--light-bg); border-top: 1px solid var(--border-color); flex-direction: column; padding: 1rem; gap: 1rem; } .nav-menu.active { display: flex; } .mobile-menu-toggle { display: block; } .search-input { width: 150px; } .hero h1 { font-size: 2rem; } .section-title { font-size: 2rem; } .player-content { flex-direction: column; gap: 0.5rem; } .player-info { justify-content: center; } .music-player { padding: 0.5rem; } } @media (max-width: 480px) { .container { padding: 0 0.5rem; } .hero { padding: 2rem 0; } .section { padding: 2rem 0; } .card { padding: 1rem; } } /* ===== UTILITIES ===== */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 8px; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background: var(--gradient-primary); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background: var(--light-card); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: var(--border-color); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .hidden { display: none; } .visible { display: block; } /* ===== BLOG SPECIFIC ===== */ .post-title { font-size: 2rem; margin-bottom: 1rem; line-height: 1.3; } .post-meta { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 2rem; display: flex; gap: 1rem; align-items: center; } .post-content { line-height: 1.8; font-size: 1.1rem; } .post-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; } .post-tags { display: flex; gap: 0.5rem; margin-top: 2rem; flex-wrap: wrap; } .tag { background: var(--gradient-primary); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; text-decoration: none; transition: all 0.3s ease; } .tag:hover { transform: translateY(-2px); box-shadow: var(--shadow); } ]]>