/* ==========================================================================
VYBE STUDIO - DESIGN SYSTEM & STYLESHEET
========================================================================== */
/* Fonts ab HTML se aate hain @import se browser ko
pehle style.css poori padhni padti thi, phir fonts maangne
jaata tha. Ab dono saath shuru hote hain. */
:root {
--bg-dark: #070709;
--bg-card: #111217;
--bg-card-hover: #181920;
--surface-border: rgba(255, 255, 255, 0.08);
--surface-border-bright: rgba(255, 255, 255, 0.18);
/* Single warm accent. The site used to run a cyan + coral pair; every
cyan surface has now been folded into the coral ramp, so this is the
one source of truth. The old --accent-cyan / -lime / -purple names are
kept as aliases purely so nothing downstream breaks prefer
--accent-coral in new rules. */
--accent-coral: #ff6b35;
--accent-coral-bright: #ff9c6b;
--accent-coral-deep: #e8451c;
--accent-coral-glow: rgba(255, 107, 53, 0.35);
/* Gold picked off the logo's wordmark. Used for the stream counts on
the Hall of Fame cards, where it reads as an award/achievement colour. */
--accent-gold: #ffc83d;
/* Legacy aliases all resolve to the coral ramp above. */
--accent-cyan: var(--accent-coral);
--accent-cyan-bright: var(--accent-coral-bright);
--accent-cyan-glow: var(--accent-coral-glow);
--accent-lime: var(--accent-coral);
--accent-lime-bright: var(--accent-coral-bright);
--accent-lime-glow: var(--accent-coral-glow);
--accent-purple: var(--accent-coral);
--accent-purple-deep: var(--accent-coral-deep);
--accent-purple-glow: var(--accent-coral-glow);
--text-main: #ffffff;
--text-muted: #9aa0a6;
--text-dim: #656b73;
--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
--transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
/* Single source of truth for header height drawer, mega panels and
scroll-margin all derive from this, so mobile can shrink it safely. */
--nav-h: 80px;
--gutter: 24px;
}
/* Base resets */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: var(--font-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
font-family: inherit;
border: none;
background: none;
color: inherit;
}
img, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
/* ==========================================================================
TOUCH / ANDROID BASELINE
========================================================================== */
/* Kill the grey flash Android Chrome paints over every tap */
a, button, input, select, textarea, label, [role="button"] {
-webkit-tap-highlight-color: transparent;
}
/* Android & iOS zoom the page when a focused field is under 16px */
input, select, textarea, button {
font-family: inherit;
font-size: 16px;
}
/* Visible focus for keyboard users without a ring on every tap */
:focus-visible {
outline: 2px solid var(--accent-lime);
outline-offset: 3px;
border-radius: 4px;
}
/* Long unbroken strings (emails, URLs) must not force a horizontal scroll */
h1, h2, h3, h4, p, li, a {
overflow-wrap: break-word;
}
/* ---- Scroll smoothness -------------------------------------
Neeche wale bhaari sections tab tak render nahi hote jab tak
screen ke paas na aayein. Homepage lamba hai, isliye purane
Android phones par pehla paint bahut jaldi ho jaata hai.
contain-intrinsic-size zaroori hai iske bina scrollbar
kudta hai. */
section.app-download,
section.whats {
content-visibility: auto;
contain-intrinsic-size: auto 720px;
}
/* Momentum scroll + chhote screens par overscroll chain rokna */
body {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: none;
}
/* Touch devices par hover animations chalte hi nahi, par unka
GPU cost lagta hai isliye unhe pointer wale devices tak
seemit rakhte hain. */
@media (hover: none) {
.logo-card:hover .brand-tile { transform: none; }
}
/* Respect the OS "reduce motion" setting marquees and float loops
are the worst offenders on low-power Android devices. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* Hover effects only where a real pointer exists on touch these
otherwise "stick" after a tap until the user taps elsewhere. */
@media (hover: none) {
.tool:hover,
.hof-card:hover,
.app-card:hover,
.pricing-card:hover,
.btn-start-releasing:hover,
.btn-see-stores:hover,
.master-button:hover,
.cta-strip a:hover {
transform: none;
}
.hof-marquee:hover {
animation-play-state: running;
}
}
/* Respect Android gesture-nav / notch insets */
footer {
padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
/* Minimum 44px touch targets on finger-driven devices */
@media (pointer: coarse) {
.vybe-nav-toggle {
width: 44px;
height: 44px;
padding: 7px;
}
.footer-col a,
.footer-bottom-links a,
.vybe-nav-locale-list a,
.vybe-mega-links a {
display: flex;
align-items: center;
min-height: 44px;
}
.footer-col ul {
gap: 0;
}
.consent-row input[type="checkbox"] {
width: 22px;
height: 22px;
}
.tool .arrow,
.whats-card a {
min-height: 44px;
}
}
/* Range slider: the default Android thumb is too small to drag reliably */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 28px;
background: transparent;
touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
margin-top: -10px;
border-radius: 50%;
background: var(--accent-lime);
border: 3px solid #0d0e12;
box-shadow: 0 0 12px var(--accent-lime-glow);
}
input[type="range"]::-moz-range-track {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-lime);
border: 3px solid #0d0e12;
}
/* Horizontal marquee must not hijack vertical page scrolling */
.hof-marquee-wrapper {
touch-action: pan-y;
}
.wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--gutter);
}
/* Fix section scroll-margin so fixed header never covers content */
section, .act {
scroll-margin-top: calc(var(--nav-h) + 16px);
}
/* ==========================================================================
NAVIGATION BAR & BRAND LOGO (VYBE STUDIO)
========================================================================== */
.vybe-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(7, 7, 9, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--surface-border);
transition: background var(--transition-fast);
}
.vybe-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-h);
max-width: 1320px;
margin: 0 auto;
padding: 0 var(--gutter);
gap: 16px;
}
/* Vybe Studio logo link */
.vybe-nav-logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
/* Logo image. Height-driven so it always sits inside the nav bar; width
follows the mark's 1.598:1 ratio automatically. The intrinsic width/height
attributes on the ![]()
reserve space so the header doesn't shift while
the file loads. */
.logo-img {
height: 56px;
width: auto;
display: block;
}
.logo-img--footer {
height: 72px;
}
.vybe-nav-list {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
}
.vybe-nav-list button,
.vybe-nav-list a {
font-size: 15px;
font-weight: 600;
color: #d1d5db;
display: flex;
align-items: center;
gap: 6px;
transition: color var(--transition-fast);
padding: 12px 0;
}
.vybe-nav-list button:hover,
.vybe-nav-list a:hover {
color: #ffffff;
}
.vybe-nav-list button .caret svg {
width: 10px;
height: 10px;
fill: none;
stroke: currentColor;
stroke-width: 2;
transition: transform var(--transition-fast);
}
.vybe-nav-list li.active button .caret svg {
transform: rotate(180deg);
}
.vybe-nav-cta {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.vybe-nav-login {
font-size: 15px;
font-weight: 600;
color: #ffffff;
padding: 10px 16px;
transition: opacity var(--transition-fast);
}
.vybe-nav-login:hover {
opacity: 0.8;
}
.vybe-nav-signup {
display: flex;
align-items: center;
gap: 8px;
background: var(--accent-lime);
color: #000;
font-weight: 700;
font-size: 14px;
padding: 12px 22px;
border-radius: 100px;
transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.vybe-nav-signup:hover {
background: var(--accent-lime-bright);
transform: translateY(-1px);
box-shadow: 0 0 20px var(--accent-lime-glow);
}
.vybe-nav-signup .arrow svg {
width: 12px;
height: 12px;
stroke: #000;
stroke-width: 2;
fill: none;
transition: transform var(--transition-fast);
}
.vybe-nav-signup:hover .arrow svg {
transform: translateX(3px);
}
/* Locale selector */
.vybe-nav-locale {
position: relative;
}
.vybe-nav-locale-toggle {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: var(--text-muted);
padding: 6px 10px;
border: 1px solid var(--surface-border);
border-radius: 20px;
}
.vybe-nav-locale-list {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: #14151a;
border: 1px solid var(--surface-border-bright);
border-radius: 12px;
list-style: none;
padding: 8px;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
z-index: 1010;
min-width: 80px;
}
.vybe-nav-locale.active .vybe-nav-locale-list {
display: block;
}
.vybe-nav-locale-list a {
display: block;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
border-radius: 6px;
}
.vybe-nav-locale-list a:hover,
.vybe-nav-locale-list a.is-current {
color: #fff;
background: rgba(255,255,255,0.08);
}
/* Mobile Toggle */
.vybe-nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 30px;
height: 30px;
justify-content: center;
flex-shrink: 0;
}
.vybe-nav-toggle span {
display: block;
height: 2px;
width: 100%;
background: #fff;
border-radius: 2px;
transition: transform var(--transition-fast);
}
/* MEGA MENU PANELS */
.vybe-mega-panel {
display: none;
position: absolute;
top: var(--nav-h);
left: 0;
width: 100%;
background: #0e0f14;
border-bottom: 1px solid var(--surface-border-bright);
padding: 40px 0 50px 0;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.85);
z-index: 999;
}
.vybe-mega-panel.is-open {
display: block !important;
animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Side "More … tools" column hata diya ab cards poori width lete hain.
Width nav-inner (1320px) ke barabar rakhi hai taaki logo/menu se align rahe. */
.vybe-mega-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
max-width: 1320px;
margin: 0 auto;
padding: 0 var(--gutter);
}
.vybe-mega-eyebrow {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent-coral);
margin-bottom: 12px;
}
.vybe-mega-title {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 24px;
}
.vybe-mega-title .lime { color: var(--accent-coral); }
.vybe-mega-title .purple { color: var(--accent-purple); }
.vybe-mega-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.vybe-mega-card {
background: var(--bg-card);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.vybe-mega-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.25);
background: var(--bg-card-hover);
}
.vybe-mega-card .ic {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.vybe-mega-card h4 {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
}
.vybe-mega-card p {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.vybe-mega-side-label {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 16px;
}
.vybe-mega-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.vybe-mega-links a {
font-size: 14px;
font-weight: 600;
color: #e2e8f0;
display: flex;
align-items: center;
gap: 8px;
transition: color var(--transition-fast), transform var(--transition-fast);
}
.vybe-mega-links a:hover {
color: var(--accent-coral);
transform: translateX(4px);
}
/* Mobile Nav Drawer */
/* Mobile drawer uses dvh so Android Chrome's collapsing URL bar
never clips the bottom of the menu. */
.vybe-mobile-nav {
display: none;
position: fixed;
top: var(--nav-h);
left: 0;
width: 100%;
height: calc(100vh - var(--nav-h));
height: calc(100dvh - var(--nav-h));
background: #0a0a0c;
padding: 24px 20px calc(32px + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
z-index: 998;
}
.vybe-mobile-nav.is-open {
display: block;
animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-list {
list-style: none;
display: flex;
flex-direction: column;
}
.mobile-nav-list a {
display: flex;
align-items: center;
min-height: 56px;
font-size: 20px;
font-weight: 700;
border-bottom: 1px solid var(--surface-border);
}
/* Drawer ke andar mega menu — Distribute / Monetise / Grow tap karne
par apne options khol dete hain (markup script.js banata hai). */
.mobile-nav-acc {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 0;
background: none;
border: none;
border-bottom: 1px solid var(--surface-border);
color: #fff;
font-family: inherit;
font-size: 20px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.mobile-nav-acc .caret {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--text-muted);
transition: transform var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-acc .caret svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.mobile-nav-acc[aria-expanded="true"] .caret {
transform: rotate(180deg);
color: var(--accent-coral);
}
.mobile-nav-sub {
display: flex;
flex-direction: column;
padding: 4px 0 12px;
border-bottom: 1px solid var(--surface-border);
}
/* .mobile-nav-sub par display:flex hai, jo browser ke default [hidden]
rule ko haraa deta hai — isliye ise alag se band karna padta hai. */
.mobile-nav-sub[hidden] { display: none; }
.mobile-nav-list .mobile-nav-subitem {
display: flex;
align-items: center;
gap: 13px;
border-bottom: none;
min-height: 52px;
padding: 8px 4px;
color: #d7dbe3;
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
}
.mobile-nav-list .mobile-nav-subitem .ic {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
overflow: hidden;
}
.mobile-nav-list .mobile-nav-subitem-t {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
/* Jo page abhi bana nahi hai wo halka dikhta hai aur kahin le nahi jaata */
.mobile-nav-list .mobile-nav-subitem.is-soon {
opacity: 0.62;
cursor: default;
}
.mobile-nav-cta {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 28px;
}
.mobile-nav-signup {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
background: var(--accent-lime);
color: #000;
font-weight: 800;
font-size: 16px;
border-radius: 100px;
}
.mobile-nav-login {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
border: 1px solid var(--surface-border-bright);
color: #fff;
font-weight: 700;
font-size: 16px;
border-radius: 100px;
}
/* Hamburger → X */
.vybe-nav-toggle span {
transform-origin: center;
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.vybe-nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.vybe-nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.vybe-nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Lock the page behind the open drawer */
body.nav-open {
overflow: hidden;
}
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero-new {
position: relative;
padding-top: 150px;
padding-bottom: 64px;
overflow: hidden;
background: radial-gradient(circle at 50% 20%, rgba(255, 61, 154, 0.16) 0%, rgba(10, 10, 12, 0) 70%);
}
/* Living background glow. Two stacked motions so it never looks like a
simple loop: the base layer breathes slowly (drift + scale), and a
second layer flickers on an irregular rhythm like a stage light.
Only transform and opacity are animated, so it stays on the compositor
and costs nothing on mid-range phones. */
.hero-bg-glow {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: min(800px, 140vw);
height: min(500px, 70vw);
background: radial-gradient(ellipse at center, rgba(255, 107, 53, 0.24) 0%, rgba(255, 61, 154, 0.3) 40%, rgba(10, 10, 12, 0) 70%);
filter: blur(60px);
pointer-events: none;
will-change: transform, opacity;
animation: heroGlowBreathe 11s ease-in-out infinite alternate;
}
.hero-bg-glow::after {
content: "";
position: absolute;
inset: -12%;
background: radial-gradient(ellipse at 58% 42%, rgba(255, 61, 154, 0.42) 0%, rgba(255, 107, 53, 0.22) 45%, rgba(10, 10, 12, 0) 72%);
filter: blur(48px);
will-change: opacity;
animation: heroGlowFlicker 24s ease-in-out infinite;
}
@keyframes heroGlowBreathe {
0% { transform: translateX(-50%) scale(1) translateY(0); opacity: 0.7; }
100% { transform: translateX(-53%) scale(1.18) translateY(20px); opacity: 1; }
}
/* Slow, shallow swell rather than a flicker. The old version ran 16 opacity
steps across 6.5s (~2.5 changes/sec) with a 0.3–1.0 swing, which read as a
strobe on a bright phone screen. Now it's a 24s drift over a 0.55–0.85
range still alive, but nothing the eye catches as blinking. */
@keyframes heroGlowFlicker {
0%,
100% { opacity: 0.6; }
25% { opacity: 0.78; }
50% { opacity: 0.58; }
75% { opacity: 0.85; }
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 60px;
align-items: center;
}
.hero-copy {
display: flex;
flex-direction: column;
gap: 28px;
}
/* Hero ab single column hai (signup form hata diya) sab kuch
beech mein, Sign Up / Login buttons ke saath. */
.hero-grid--solo {
grid-template-columns: 1fr;
max-width: 880px;
text-align: center;
}
.hero-grid--solo .hero-copy { align-items: center; }
.hero-grid--solo .hero-sub { margin: 0 auto; }
.hero-grid--solo .hero-bullets {
grid-template-columns: repeat(2, auto);
justify-content: center;
gap: 14px 34px;
}
.hero-grid--solo .hero-proof { justify-content: center; }
/* Sign Up / Login button pair */
.hero-auth-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 158px;
padding: 15px 34px;
border-radius: 100px;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 800;
letter-spacing: 0.01em;
transition: transform var(--transition-fast), background var(--transition-fast),
box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.hero-cta--signup {
background: var(--accent-coral);
color: #10100f;
box-shadow: 0 8px 30px var(--accent-coral-glow);
}
.hero-cta--signup:hover {
background: var(--accent-coral-bright);
transform: translateY(-2px);
box-shadow: 0 12px 34px var(--accent-coral-glow);
}
.hero-cta--login {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.hero-cta--login:hover {
border-color: var(--accent-coral);
color: var(--accent-coral);
transform: translateY(-2px);
}
.hero-h1 {
font-family: var(--font-heading);
font-size: clamp(30px, 6.4vw, 58px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -1.5px;
}
.text-accent--lime {
color: var(--accent-coral);
text-shadow: 0 0 30px var(--accent-coral-glow);
}
.hero-sub {
font-size: clamp(15px, 3.6vw, 20px);
color: #cbd5e1;
line-height: 1.5;
max-width: 580px;
}
.hero-bullets {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.hero-bullets li {
font-size: 15px;
font-weight: 600;
color: #e2e8f0;
display: flex;
align-items: center;
gap: 10px;
}
.hero-bullets li::before {
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: rgba(255, 107, 53, 0.15);
color: var(--accent-coral);
font-weight: 800;
border-radius: 50%;
font-size: 12px;
}
.hero-proof {
display: flex;
align-items: center;
gap: 20px;
padding-top: 12px;
border-top: 1px solid var(--surface-border);
}
.hero-proof-pics {
display: flex;
align-items: center;
}
.hero-proof-pics img {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2.5px solid var(--bg-dark);
margin-left: -12px;
object-fit: cover;
background: #222;
}
.hero-proof-pics img:first-child {
margin-left: 0;
}
.hero-proof-text {
display: flex;
flex-direction: column;
font-size: 14px;
}
.hero-proof-text strong {
color: #fff;
font-weight: 700;
}
.hero-proof-text span {
color: var(--text-muted);
}
/* SIGNUP CARD FORM */
.signup-card {
background: rgba(18, 19, 24, 0.85);
border: 1px solid var(--surface-border-bright);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
padding: 36px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 20px;
}
.signup-card h2 {
font-family: var(--font-heading);
font-size: clamp(22px, 5vw, 28px);
font-weight: 800;
letter-spacing: -0.5px;
}
.signup-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group {
position: relative;
}
.form-group input {
width: 100%;
height: 56px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: 20px 16px 8px 16px;
color: #fff;
font-size: 16px;
outline: none;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-group input:focus {
border-color: var(--accent-lime);
background: rgba(255, 255, 255, 0.07);
}
.floating-label {
position: absolute;
left: 16px;
top: 18px;
color: var(--text-muted);
font-size: 14px;
pointer-events: none;
transition: all var(--transition-fast);
}
.form-group input:focus ~ .floating-label,
.form-group input:not(:placeholder-shown) ~ .floating-label {
top: 8px;
font-size: 11px;
font-weight: 700;
color: var(--accent-coral);
}
.consent-row {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
color: var(--text-muted);
cursor: pointer;
line-height: 1.4;
}
.consent-row input[type="checkbox"] {
accent-color: var(--accent-lime);
width: 18px;
height: 18px;
margin-top: 2px;
}
.consent-row a {
color: #fff;
text-decoration: underline;
}
.master-button {
width: 100%;
height: 54px;
background: var(--accent-lime);
color: #000;
font-weight: 800;
font-size: 16px;
border-radius: 100px;
transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.master-button:hover {
background: var(--accent-lime-bright);
transform: translateY(-2px);
box-shadow: 0 10px 25px var(--accent-lime-glow);
}
.master-button:disabled,
.social-btn:disabled {
opacity: 0.6;
cursor: progress;
transform: none;
box-shadow: none;
}
/* Hero signup ka error message (Firebase auth errors) */
.signup-error {
display: none;
margin-top: 14px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.45;
color: #ffb59a;
background: rgba(255, 107, 53, 0.12);
border: 1px solid rgba(255, 107, 53, 0.4);
border-radius: 12px;
}
.signup-error.is-visible { display: block; }
.social-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
}
.social-divider::before,
.social-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--surface-border);
}
.social-divider span {
padding: 0 12px;
}
.social-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 48px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--surface-border);
border-radius: 100px;
font-size: 14px;
font-weight: 600;
color: #fff;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.social-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.social-btn svg {
width: 18px;
height: 18px;
}
/* ==========================================================================
ACT SECTIONS COMMON (01, 02, 03)
========================================================================== */
.act {
padding: 120px 0;
position: relative;
}
.act.dark {
background: var(--bg-dark);
}
.act.light {
background: #111217;
border-top: 1px solid var(--surface-border);
border-bottom: 1px solid var(--surface-border);
}
.kicker {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-coral);
margin-bottom: 20px;
}
.kicker .dot {
width: 8px;
height: 8px;
background: var(--accent-lime);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent-lime);
}
.h-mega {
font-family: var(--font-heading);
font-size: clamp(30px, 6.2vw, 56px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -1.5px;
margin-bottom: 20px;
}
.h-mega .purple { color: var(--accent-coral); }
.h-mega .purple-deep { color: var(--accent-purple); }
.h-mega .lime { color: var(--accent-coral); }
.lede {
font-size: clamp(15px, 3.4vw, 20px);
color: var(--text-muted);
line-height: 1.5;
max-width: 680px;
margin-bottom: 36px;
}
/* High impact CTA buttons in Section 01 matching screenshot */
.act-ctas {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 40px;
margin-top: 20px;
flex-wrap: wrap;
}
.btn-start-releasing {
background: var(--accent-lime);
color: #000000;
font-family: var(--font-heading);
font-weight: 900;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 18px 36px;
border-radius: 100px;
box-shadow: 0 0 25px var(--accent-lime-glow);
transition: transform var(--transition-fast), background var(--transition-fast);
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-start-releasing:hover {
background: var(--accent-lime-bright);
transform: translateY(-2px);
}
.btn-see-stores {
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
font-family: var(--font-heading);
font-weight: 900;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 18px 36px;
border-radius: 100px;
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-see-stores:hover {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
/* Section 02/03 CTAs these had no styles at all and rendered as
bare text links. Same pill language as the section 01 buttons. */
.act-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--font-heading);
font-weight: 900;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 18px 32px;
border-radius: 100px;
transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.act-cta--primary {
background: var(--accent-lime);
color: #000;
box-shadow: 0 0 25px var(--accent-lime-glow);
}
.act-cta--primary:hover {
background: var(--accent-lime-bright);
transform: translateY(-2px);
}
.act-cta--secondary {
border: 1.5px solid rgba(255, 255, 255, 0.35);
color: #fff;
}
.act-cta--secondary:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
/* ==========================================================================
SECTION 01: DISTRIBUTE & FLOATING STORE APP ICONS CLUSTER
========================================================================== */
/* First section after a full-height hero the hero already ends on a
generous run of dark, so the usual 120px on top just reads as dead space. */
.distro-act {
position: relative;
overflow: hidden;
padding-top: 56px;
}
/* Background Glowing Wave Lines in Section 01 */
.distro-bg-waves {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
opacity: 0.4;
}
.distro-intro {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 2;
}
/* The cluster is a fixed-ratio canvas that acts as a size container, so every
card scales with the available width instead of colliding on narrow screens. */
.distro-icon-cluster {
position: relative;
width: 100%;
max-width: 620px;
margin-inline: auto;
aspect-ratio: 5 / 4;
height: auto;
container-type: inline-size;
}
/* App Cards --x/--y are the card CENTRE, --size is a % of cluster width */
.app-card {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
animation: floatBounce var(--dur) ease-in-out infinite alternate;
animation-delay: var(--delay);
left: var(--x);
top: var(--y);
/* px fallback (~620px container) first, container units override it */
width: calc(var(--size) * 6.2px);
height: calc(var(--size) * 6.2px);
margin-left: calc(var(--size) * -3.1px);
margin-top: calc(var(--size) * -3.1px);
border-radius: calc(var(--size) * 1.1px);
width: calc(var(--size) * 1cqw);
height: calc(var(--size) * 1cqw);
margin-left: calc(var(--size) * -0.5cqw);
margin-top: calc(var(--size) * -0.5cqw);
border-radius: calc(var(--size) * 0.18cqw);
transition: transform 0.3s ease;
}
.app-card .ic {
width: 52%;
height: 52%;
}
.app-card:hover {
transform: scale(1.1) translateY(-8px) !important;
z-index: 20;
}
@keyframes floatBounce {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-8%) rotate(2.5deg); }
}
/* Specific App Icon Styles */
/* Brand tints refreshed to each service's current palette:
Spotify #1ED760 (was #1DB954), Facebook #0866FF (2023 rebrand,
was #1877F2), Instagram #FF0069, Beatport #01FF95, Deezer #A238FF. */
.app-card--spotify {
background: #0f1015;
border: 1px solid rgba(30, 215, 96, 0.32);
box-shadow: 0 10px 30px rgba(30, 215, 96, 0.22);
}
.app-card--instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
box-shadow: 0 10px 30px rgba(255, 0, 105, 0.3);
}
.app-card--facebook {
background: #0866ff;
box-shadow: 0 10px 30px rgba(8, 102, 255, 0.32);
}
.app-card--apple {
background: #fa243c;
box-shadow: 0 10px 30px rgba(250, 36, 60, 0.3);
}
.app-card--tiktok {
background: #000000;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 30px rgba(0, 242, 254, 0.25);
}
/* Dark card with the teal note, matching the current app icon a white
glyph on their teal only reaches 1.9:1. */
.app-card--amazon {
background: #0d1b26;
border: 1px solid rgba(37, 209, 218, 0.35);
box-shadow: 0 10px 30px rgba(37, 209, 218, 0.25);
}
.app-card--youtube {
background: #ffffff;
box-shadow: 0 10px 30px rgba(255, 0, 0, 0.25);
}
.app-card--beatport {
background: #0b0c10;
border: 1px solid rgba(1, 255, 149, 0.4);
box-shadow: 0 10px 30px rgba(1, 255, 149, 0.22);
}
.app-card--tidal {
background: #000000;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
}
.app-card--deezer {
background: #12071f;
border: 1px solid rgba(162, 56, 255, 0.45);
box-shadow: 0 10px 30px rgba(162, 56, 255, 0.3);
}
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}
.stat {
background: var(--bg-card);
border: 1px solid var(--surface-border);
border-radius: var(--radius-lg);
padding: 32px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color var(--transition-fast);
}
.stat:hover {
border-color: rgba(255, 255, 255, 0.2);
}
.stat .num {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 800;
line-height: 1;
color: var(--accent-coral);
}
.stat .lbl {
font-size: 18px;
font-weight: 700;
color: #fff;
}
.stat .sub {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
}
.logo-wall {
margin-top: 80px;
}
.logo-wall .lbl {
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-dim);
margin-bottom: 24px;
}
/* Grid of store cards exactly matching real website screenshot */
.logo-wall .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--surface-border);
border: 1px solid var(--surface-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.logo-card {
height: 140px;
background: #090a0d;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
transition: background var(--transition-fast);
}
.logo-card:hover {
background: #111319;
}
.logo-card-brand {
font-family: var(--font-heading);
font-size: clamp(15px, 3.4vw, 21px);
font-weight: 800;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
letter-spacing: -0.3px;
white-space: nowrap;
min-width: 0;
}
/* Har brand ka apna rounded tile sab logos ka visual weight barabar
rehta hai, chahe glyph patla ho (TIDAL) ya bhara hua (Deezer). */
.logo-card-brand .brand-tile {
width: clamp(38px, 7.4vw, 48px);
height: clamp(38px, 7.4vw, 48px);
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 13px;
background: var(--tile, #1a1d24);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
transition: transform var(--transition-fast);
}
.logo-card:hover .brand-tile { transform: translateY(-2px); }
.logo-card-brand .brand-tile svg,
.logo-card-brand .brand-tile img {
width: 58%;
height: 58%;
object-fit: contain;
}
.logo-card-brand .brand-tile svg { fill: #ffffff; }
/* Amazon Music ka mark wordmark hai, square glyph nahi usse tile
mein thodi zyada jagah chahiye warna padha hi nahi jaata. */
.logo-card-brand .brand-tile.is-wordmark svg { width: 80%; height: 80%; }
/* Jin brands ka official vector nahi hai (Gaana, JioSaavn) unke liye
brand-colour ka monogram tile hai — galat logo banane se behtar.
Asli SVG mil jaaye to sirf tile ke andar wala .ltr hata kar