/* ========================================================= YAW WAVES: "Neon Lagos" design system Dark, nightlife-driven, gradient-accented, built for music. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap'); :root { --bg: #0A0A12; --bg-alt: #101018; --surface: #15151f; --surface-2: #1b1b28; --border: #26263a; --text: #F5F5F7; --text-muted: #9797a8; --pink: #FF2E63; --violet: #6C1CD1; --cyan: #00F5D4; --gradient: linear-gradient(120deg, var(--pink) 0%, var(--violet) 100%); --gradient-soft: linear-gradient(120deg, rgba(255,46,99,0.15) 0%, rgba(108,28,209,0.15) 100%); --radius: 16px; --radius-sm: 10px; --shadow-glow: 0 0 60px rgba(255,46,99,0.18); --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } /* ---------------- Accessibility ---------------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--cyan); color: #0A0A12; padding: 12px 20px; z-index: 1000; font-weight: 700; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .card:hover, .btn:hover { transform: none; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Kept here rather than on body: overflow-x:hidden directly on is a known iOS/mobile Safari trigger that breaks position:fixed elements (like the mobile .nav-links slide-out menu), making them fail to appear at all on real phones even though everything looks fine on desktop. Putting it on avoids that bug while still preventing horizontal scroll. */ overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; } /* Ambient background glow - gives the dark theme depth instead of flat black */ body::before { content: ""; position: fixed; top: -20%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(255,46,99,0.16) 0%, transparent 65%); pointer-events: none; z-index: 0; } body::after { content: ""; position: fixed; bottom: -25%; right: -15%; width: 65vw; height: 65vw; background: radial-gradient(circle, rgba(108,28,209,0.18) 0%, transparent 65%); pointer-events: none; z-index: 0; } h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5em; } p { color: var(--text-muted); } a { color: var(--cyan); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--pink); } img { max-width: 100%; display: block; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } .gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .section { padding: 96px 0; position: relative; z-index: 1; } .section-tight { padding: 56px 0; } .eyebrow { display: inline-block; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; } .section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; } .section-lead { max-width: 620px; color: var(--text-muted); font-size: 1.05rem; } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 8px 30px rgba(255,46,99,0.3); } .btn-primary:hover { color: #fff; box-shadow: 0 12px 36px rgba(255,46,99,0.45); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--cyan); color: var(--cyan); } .btn-ghost { background: transparent; color: var(--text-muted); padding: 13px 20px; } .btn-ghost:hover { color: var(--cyan); } .btn-sm { padding: 8px 18px; font-size: 0.82rem; } .btn-block { width: 100%; justify-content: center; } /* ---------------- Navbar ---------------- */ /* backdrop-filter/blur is applied via ::before rather than directly on .navbar. A filter or backdrop-filter on an element forces any position:fixed descendant (like the open mobile .nav-links overlay) to size and position itself relative to THAT element instead of the real viewport -- which silently shrank the mobile menu down to a sliver and let page content show through it. Keeping the blur on a separate pseudo-element avoids that trap while looking identical. */ .navbar { position: sticky; top: 0; z-index: 50; isolation: isolate; border-bottom: 1px solid var(--border); } .navbar::before { content: ""; position: absolute; inset: 0; background: rgba(10,10,18,0.72); backdrop-filter: blur(14px); z-index: -1; } .navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1180px; margin: 0 auto; } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--text); } .brand span { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-links { display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; position: relative; } .nav-links a:hover { color: var(--text); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--gradient); transition: width .2s ease; } .nav-links a:hover::after { width: 100%; } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: 0; padding: 0; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform .25s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { .nav-links { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 60; background-color: #0A0A12; flex-direction: column; align-items: stretch; padding: 10px 0 30px; gap: 0; border-top: 1px solid var(--border); transform: translateY(-110%); visibility: hidden; opacity: 0; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; } .nav-links li { border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; } .nav-links li:last-child { border-bottom: none; padding: 22px 24px 0; } .nav-links a:not(.btn) { display: block; padding: 16px 24px; font-size: 1rem; border-left: 3px solid transparent; } .nav-links a:not(.btn):hover { background: rgba(255,255,255,0.03); } .nav-links a[aria-current="page"] { color: var(--text) !important; background: rgba(255,255,255,0.04); border-left-color: var(--cyan); } .nav-links a::after { display: none; } .nav-links.open { transform: translateY(0); visibility: visible; opacity: 1; transition: transform .25s ease, opacity .25s ease, visibility 0s linear 0s; } .nav-links.open li { opacity: 1; transform: translateY(0); } .nav-links.open li:nth-child(1) { transition-delay: .04s; } .nav-links.open li:nth-child(2) { transition-delay: .08s; } .nav-links.open li:nth-child(3) { transition-delay: .12s; } .nav-links.open li:nth-child(4) { transition-delay: .16s; } .nav-links.open li:nth-child(5) { transition-delay: .20s; } .nav-links.open li:nth-child(6) { transition-delay: .24s; } .nav-links.open li:nth-child(7) { transition-delay: .28s; } .nav-links.open li:nth-child(8) { transition-delay: .32s; } .nav-links.open li:nth-child(9) { transition-delay: .36s; } .nav-toggle { display: flex; } } /* ---------------- Hero ---------------- */ .hero { padding: 100px 0 80px; text-align: center; position: relative; overflow: hidden; } .hero-carousel { position: absolute; inset: -20px; z-index: 0; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; transition: transform 0.7s ease; } .hero-bg::after { content: ""; position: absolute; inset: 0; /* Darker and more even than before -- the carousel now rotates through photos of very different brightness (dark studio shot, bright event banner, sunlit foliage, blue backdrop), and the old overlay was tuned only for the darkest one, so text washed out on the brighter photos. */ background: linear-gradient(180deg, rgba(10,10,18,0.5) 0%, rgba(10,10,18,0.58) 45%, rgba(10,10,18,0.75) 75%, var(--bg) 100%); } .hero .container { position: relative; z-index: 1; } .hero .eyebrow, .hero h1, .hero-sub { text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9); } .hero h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 1; margin-bottom: 18px; } .hero-sub { max-width: 560px; margin: 0 auto 34px; color: var(--text-muted); font-size: 1.1rem; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px; } .hero-social { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .hero-social a { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: transform .2s ease, filter .2s ease; } .hero-social a:hover { transform: translateY(-3px); filter: brightness(1.15); } /* ---------------- Cards ---------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; position: relative; } .card:hover { transform: translateY(-6px); border-color: rgba(255,46,99,0.4); box-shadow: var(--shadow-glow); } .card-media { aspect-ratio: 1/1; background: var(--surface-2); overflow: hidden; position: relative; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .card:hover .card-media img { transform: scale(1.06); } .card-body { padding: 20px; } .card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; } .card-meta { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; } .badge { display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--gradient-soft); color: var(--cyan); border: 1px solid rgba(0,245,212,0.3); } .grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Two-column "media + details" card (featured release, single song page). Fixed side-by-side on tablet/desktop, stacks on phones so the cover art and text never get squeezed into an unreadable sliver. */ .media-split { display: grid; grid-template-columns: 220px 1fr; overflow: hidden; } .media-split.media-split-lg { grid-template-columns: 320px 1fr; } @media (max-width: 680px) { .media-split, .media-split.media-split-lg { grid-template-columns: 1fr; } } /* ---------------- Video card ---------------- */ .video-card .card-media { aspect-ratio: 16/9; cursor: pointer; } .video-card .play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,10,18,0.35); } .play-icon span { width: 56px; height: 56px; border-radius: 50%; background: var(--gradient); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; } /* ---------------- Music player bar ---------------- */ .streaming-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .streaming-links a { font-size: 0.78rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); } .streaming-links a:hover { border-color: var(--cyan); color: var(--cyan); } /* ---------------- Forms ---------------- */ .form-group { margin-bottom: 20px; } label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 7px; } input, select, textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; transition: border-color .2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); } textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.92rem; } .alert-success { background: rgba(0,245,212,0.1); border: 1px solid rgba(0,245,212,0.35); color: var(--cyan); } .alert-error { background: rgba(255,46,99,0.1); border: 1px solid rgba(255,46,99,0.35); color: #ff86a3; } /* ---------------- Footer ---------------- */ .site-footer { border-top: 1px solid var(--border); padding: 48px 0 28px; margin-top: 60px; position: relative; z-index: 1; } .footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; } .footer-social { display: flex; gap: 16px; } .footer-bottom { text-align: center; color: var(--text-muted); font-size: 0.82rem; border-top: 1px solid var(--border); padding-top: 22px; } /* ---------------- Lightbox ---------------- */ .lightbox { position: fixed; inset: 0; background: rgba(5,5,10,0.92); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .lightbox.open { display: flex; } .lightbox-content { max-width: 900px; width: 100%; } .lightbox-content iframe, .lightbox-content img { width: 100%; border-radius: var(--radius); } .lightbox-close { position: absolute; top: 24px; right: 28px; color: #fff; font-size: 1.8rem; background: none; border: 0; cursor: pointer; } /* ---------------- Mini player ---------------- */ .mini-player { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 420px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.5); padding: 12px; display: none; z-index: 150; align-items: center; gap: 12px; flex-wrap: wrap; } .mini-player.active { display: flex; } .mp-cover { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .mp-info { flex: 1; min-width: 0; } .mp-title { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-sub { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-controls { display: flex; gap: 6px; flex-shrink: 0; } .mp-controls .btn { padding: 8px 12px; } .mp-embed-wrap { flex-basis: 100%; margin-top: 10px; } .mp-embed-wrap iframe { width: 100%; aspect-ratio: 16/9; border-radius: 10px; border: 0; } @media (max-width: 500px) { .mini-player { left: 10px; right: 10px; bottom: 10px; max-width: none; } } /* ---------------- Utility ---------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .divider { height: 1px; background: var(--border); margin: 60px 0; } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }