html { scroll-behavior: smooth; } body { font-family: var(--font-b); background: var(--void); color: #d4d4f4; overflow-x: hidden; line-height: 1.7; } .container { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* ================================================ NAVBAR ================================================ */ .navbar { position: fixed; top:0; left:0; right:0; z-index:1000; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; background: rgba(4,4,14,0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: background 0.3s; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-d); font-size: 19px; font-weight: 800; } .nav-logo img { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--b2); background: rgba(124,58,237,0.1); padding: 2px; } .nav-logo span { background: var(--text); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-back { display: flex; align-items: center; gap: 7px; padding: 9px 22px; border-radius: 50px; border: 1px solid var(--b2); color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.3s ease; } .nav-back:hover { background: rgba(124,58,237,0.1); color: #fff; border-color: rgba(124,58,237,0.6); box-shadow: 0 0 20px rgba(124,58,237,0.25); } /* ================================================ HERO ================================================ */ .hero { padding: 140px 28px 80px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); } .hero-orb-1 { width: 500px; height: 500px; top: -80px; left: 50%; transform: translateX(-60%); background: radial-gradient(circle, rgba(124,58,237,0.18), transparent 70%); animation: orbf 12s ease-in-out infinite; } .hero-orb-2 { width: 300px; height: 300px; bottom: 0; right: 10%; background: radial-gradient(circle, rgba(6,182,212,0.12), transparent 70%); animation: orbf 9s ease-in-out infinite reverse; } @keyframes orbf { 0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)} } .hero-inner { position: relative; z-index: 2; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; margin-bottom: 22px; border: 1px solid rgba(124,58,237,0.25); border-radius: 50px; background: rgba(124,58,237,0.07); font-family: var(--font-m); font-size: 11px; letter-spacing: 2px; color: #a78bfa; text-transform: uppercase; } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #67e8f9; box-shadow: 0 0 8px #67e8f9; animation: edot 2s ease-in-out infinite; } @keyframes edot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)} } .hero-title { font-family: var(--font-d); font-size: 68px; font-weight: 800; line-height: 1.0; letter-spacing: -2px; margin-bottom: 22px; } .hero-title span { display: block; background: var(--text); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 6s linear infinite; } .hero-title .sub-line { font-size: 0.55em; letter-spacing: 2px; font-weight: 600; color: rgba(255,255,255,0.18); -webkit-text-fill-color: rgba(255,255,255,0.18); background: none; -webkit-background-clip: unset; text-transform: uppercase; display: block; margin-top: 8px; } @keyframes shimmer { 0%{background-position:0% center}100%{background-position:200% center} } .hero-desc { font-size: 17px; color: rgba(212,212,244,0.5); max-width: 560px; margin: 0 auto 40px; line-height: 1.85; } /* Count badges */ .hero-counts { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .count-item { text-align: center; } .count-num { font-family: var(--font-d); font-size: 28px; font-weight: 800; background: var(--grad); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .count-label { font-size: 12px; color: rgba(212,212,244,0.4); letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-m); margin-top: 2px; } .count-divider { width: 1px; height: 36px; background: var(--border); } /* ================================================ SECTION LABEL ================================================ */ .section-wrap { padding: 80px 0; } .section-label { display: inline-block; font-family: var(--font-m); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #67e8f9; padding: 5px 14px; border: 1px solid rgba(6,182,212,0.2); border-radius: 50px; background: rgba(6,182,212,0.05); margin-bottom: 14px; } .section-heading { font-family: var(--font-d); font-size: 40px; font-weight: 800; letter-spacing: -1px; background: var(--text); background-size:200% auto; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation: shimmer 6s linear infinite; margin-bottom: 56px; } /* ================================================ FEATURE BLOCKS — ALTERNATING LAYOUT ================================================ */ .feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 2px; position: relative; border: 1px solid var(--border); border-radius: 28px; overflow: hidden; background: var(--card); margin-bottom: 20px; transition: border-color 0.4s ease; } .feature-block:hover { border-color: var(--b2); } /* Flip layout for odd */ .feature-block.flip { direction: rtl; } .feature-block.flip > * { direction: ltr; } /* Accent top stripe per feature */ .feature-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity 0.4s ease; } .feature-block:hover::before { opacity: 1; } .fb-lan::before { background: linear-gradient(90deg, transparent, var(--c-lan), transparent); } .fb-trend::before { background: linear-gradient(90deg, transparent, var(--c-trend), transparent); } .fb-reels::before { background: linear-gradient(90deg, transparent, var(--c-reels), transparent); } .fb-social::before { background: linear-gradient(90deg, transparent, var(--c-social), transparent); } .fb-liked::before { background: linear-gradient(90deg, transparent, var(--c-liked), transparent); } .fb-lyrics::before { background: linear-gradient(90deg, transparent, var(--c-lyrics), transparent); } .fb-video::before { background: linear-gradient(90deg, transparent, var(--c-video), transparent); } .fb-bgplay::before { background: linear-gradient(90deg, transparent, var(--c-bg), transparent); } /* Feature text panel */ .fb-text { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; } .fb-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .fb-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .fb-lan .fb-icon { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25); } .fb-trend .fb-icon { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); } .fb-reels .fb-icon { background: rgba(232,121,249,0.1); border: 1px solid rgba(232,121,249,0.25); } .fb-social .fb-icon { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); } .fb-liked .fb-icon { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); } .fb-lyrics .fb-icon { background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.25); } .fb-video .fb-icon { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); } .fb-bgplay .fb-icon { background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.25); } .fb-special { font-family: var(--font-m); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; font-weight: 500; } .special-unique { background: rgba(232,121,249,0.12); color: #e879f9; border: 1px solid rgba(232,121,249,0.25); } .special-clean { background: rgba(16,185,129,0.1); color: #34d399; border: 1px solid rgba(16,185,129,0.25); } .special-ai { background: rgba(6,182,212,0.1); color: #67e8f9; border: 1px solid rgba(6,182,212,0.25); } .fb-title { font-family: var(--font-d); font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; color: #fff; margin-bottom: 16px; } .fb-desc { font-size: 15px; color: rgba(212,212,244,0.52); line-height: 1.85; margin-bottom: 28px; } .fb-list { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; } .fb-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(212,212,244,0.65); line-height: 1.6; } .fb-check { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 10px; font-weight: 700; } .fb-lan .fb-check { background: rgba(124,58,237,0.15); color: #a78bfa; } .fb-trend .fb-check { background: rgba(245,158,11,0.12); color: #fbbf24; } .fb-reels .fb-check { background: rgba(232,121,249,0.12); color: #e879f9; } .fb-social .fb-check { background: rgba(16,185,129,0.12); color: #34d399; } .fb-liked .fb-check { background: rgba(239,68,68,0.12); color: #f87171; } .fb-lyrics .fb-check { background: rgba(6,182,212,0.12); color: #67e8f9; } .fb-video .fb-check { background: rgba(59,130,246,0.12); color: #93c5fd; } .fb-bgplay .fb-check { background: rgba(139,92,246,0.12); color: #c4b5fd; } .fb-tags { display: flex; flex-wrap: wrap; gap: 8px; } .fb-tag { padding: 5px 14px; border-radius: 50px; font-family: var(--font-m); font-size: 11px; background: rgba(124,58,237,0.07); border: 1px solid rgba(124,58,237,0.18); color: rgba(212,212,244,0.55); transition: all 0.25s ease; } .fb-tag:hover { background: rgba(124,58,237,0.14); border-color: rgba(124,58,237,0.35); color: #a78bfa; } /* Feature visual panel */ .fb-visual { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--deep); border-left: 1px solid var(--border); min-height: 420px; } .feature-block.flip .fb-visual { border-left: none; border-right: 1px solid var(--border); } /* Ambient glow inside visual */ .fb-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.35; transition: opacity 0.4s ease; } .feature-block:hover .fb-glow { opacity: 0.6; } .fb-lan .fb-glow { width:300px;height:300px;background:var(--c-lan); } .fb-trend .fb-glow { width:280px;height:280px;background:var(--c-trend); } .fb-reels .fb-glow { width:280px;height:280px;background:var(--c-reels); } .fb-social .fb-glow { width:270px;height:270px;background:var(--c-social); } .fb-liked .fb-glow { width:270px;height:270px;background:var(--c-liked); } .fb-lyrics .fb-glow { width:280px;height:280px;background:var(--c-lyrics); } .fb-video .fb-glow { width:280px;height:280px;background:var(--c-video); } .fb-bgplay .fb-glow { width:280px;height:280px;background:var(--c-bg); } /* Terminal card inside visual */ .fb-terminal { position: relative; z-index: 2; width: 100%; max-width: 320px; background: rgba(4,4,14,0.85); border-radius: 18px; overflow: hidden; border: 1px solid var(--b2); box-shadow: 0 20px 50px rgba(0,0,0,0.5); transition: transform 0.4s ease, box-shadow 0.4s ease; } .feature-block:hover .fb-terminal { transform: translateY(-8px); box-shadow: 0 32px 70px rgba(0,0,0,0.7); } .fb-terminal-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); } .tb-dot { width: 10px; height: 10px; border-radius: 50%; } .tb-r { background: #ff5f57; } .tb-y { background: #febc2e; } .tb-g { background: #28c840; } .tb-title { font-family: var(--font-m); font-size: 11px; color: rgba(212,212,244,0.3); margin-left: 5px; letter-spacing: 0.5px; } .fb-terminal-body { padding: 20px; } .t-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.04); font-size: 13px; line-height: 1.5; transition: background 0.25s ease; } .t-row:last-child { margin-bottom: 0; } .feature-block:hover .t-row:nth-child(1) { animation: rowGlow 0.5s ease 0.05s forwards; } .feature-block:hover .t-row:nth-child(2) { animation: rowGlow 0.5s ease 0.15s forwards; } .feature-block:hover .t-row:nth-child(3) { animation: rowGlow 0.5s ease 0.25s forwards; } .feature-block:hover .t-row:nth-child(4) { animation: rowGlow 0.5s ease 0.35s forwards; } .feature-block:hover .t-row:nth-child(5) { animation: rowGlow 0.5s ease 0.45s forwards; } @keyframes rowGlow { to { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.15); } } .t-icon { font-size: 15px; flex-shrink: 0; } .t-content { flex: 1; } .t-key { font-family: var(--font-m); font-size: 11px; color: rgba(212,212,244,0.4); margin-bottom: 2px; } .t-val { font-size: 13px; color: rgba(212,212,244,0.8); font-weight: 500; } .t-val.green { color: #34d399; } .t-val.cyan { color: #67e8f9; } .t-val.purple { color: #a78bfa; } .t-val.amber { color: #fbbf24; } .t-val.pink { color: #e879f9; } .t-val.red { color: #f87171; } .t-val.blue { color: #93c5fd; } /* ================================================ REVEAL ANIMATION ================================================ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.75s ease, transform 0.75s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } /* ================================================ FOOTER ================================================ */ .footer { background: var(--void); border-top: 1px solid var(--border); padding: 44px 28px; text-align: center; } .footer-logo-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; } .footer-logo-row img { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--b2); padding: 2px; background: rgba(124,58,237,0.1); } .footer-logo-row span { font-family: var(--font-d); font-size: 18px; font-weight: 800; background: var(--text); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .footer p { font-size: 13px; color: rgba(212,212,244,0.25); margin-top: 6px; } /* ================================================ RESPONSIVE ================================================ */ @media (max-width: 900px) { .hero-title { font-size: 46px; } .feature-block, .feature-block.flip { grid-template-columns: 1fr; direction: ltr; } .fb-visual { border-left: none !important; border-right: none !important; border-top: 1px solid var(--border); min-height: 300px; } .fb-text { padding: 36px 28px; } .fb-title { font-size: 24px; } .section-heading { font-size: 30px; } } @media (max-width: 560px) { .hero-title { font-size: 34px; letter-spacing: -1px; } .hero-desc { font-size: 15px; } .hero-counts { gap: 18px; } .count-num { font-size: 22px; } .fb-text { padding: 28px 22px; } .navbar { padding: 14px 18px; } .container { padding: 0 18px; } }
Eight features. One developer. Zero compromises. Every single thing Beats does was designed, debugged, and shipped by one person.
Host or join a perfectly synchronized music session over your local WiFi. Every connected device plays the exact same song at the exact same millisecond — no streaming service, no delay, no compromise.
Stay locked on what's hot. Smart click-pattern tracking brings you the most trending songs right now. With offline caching built in, you browse even when the signal drops.
Discover music by swiping. Each clip is 45 seconds, starting at a random position so every swipe feels fresh. Hit "Extend Vibe" to jump straight into the full player from that exact moment.
Your favorites, exactly as you left them. Beautiful grid layout, one-tap to like. Hit Play All and only your songs play — zero auto-recommendations, zero filler. Your music. Your control.
Lyrics that move with the music. Real-time highlighting, auto-detect on song change, and a per-song offset memory that saves your manual adjustments permanently. Built from scratch.
Full YouTube music videos in stunning quality. Smart extraction with automatic fallback. Switch between audio and video modes in one tap — whenever you want the full visual experience.
Music never stops. Minimize the app, switch between other apps, lock your screen — Beats keeps playing. Full controls on the lock screen and notification tray, always available.