/* ============================================================
JammBeat — Global App Styles
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-dark: #0a0805;
--bg-surface: #120d08;
--bg-card: rgba(244,236,223,0.035);
--bg-hover: rgba(244,236,223,0.07);
--border: rgba(244,236,223,0.1);
--accent: #d4a24c;
--accent2: #f3c97b;
--accent-hover: #f3c97b;
--text: #f4ecdf;
--text-muted: rgba(244,236,223,0.62);
--text-faint: rgba(244,236,223,0.34);
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--font: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
--rust: #c44d2e;
--terracotta: #e85d3a;
--kente: #2d8a5f;
--line: rgba(244,236,223,0.1);
--line-strong: rgba(244,236,223,0.16);
--grad-sun: linear-gradient(135deg, #f3c97b 0%, #e85d3a 48%, #6b1f12 100%);
--grad-gold: linear-gradient(180deg, #f3c97b 0%, #d4a24c 100%);
--radius: 10px;
--radius-sm: 6px;
--transition: 0.18s ease;
--nav-height: 64px;
}
html { scroll-behavior: smooth; min-height:100%; }
body {
background:
linear-gradient(180deg, rgba(196,77,46,.08) 0%, rgba(10,8,5,0) 34%),
var(--bg-dark);
color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height:100vh; display:flex; flex-direction:column; padding-bottom:86px;
}
#main-content { flex:1 0 auto; width:100%; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
/* ── Navbar ── */
.navbar {
position: sticky; top: 0; z-index: 1000;
background: linear-gradient(180deg, rgba(10,8,5,.95), rgba(10,8,5,.82));
backdrop-filter: blur(20px) saturate(150%);
border-bottom: 1px solid var(--line);
height: var(--nav-height);
display: flex; align-items: center;
padding: 0 22px; gap: 18px;
}
.navbar-brand { display: flex; align-items: center; gap: 10px; font-family:var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space:nowrap; }
.navbar-brand::before {
content:''; width:30px; height:30px; border-radius:50%; flex:0 0 30px;
background:var(--grad-sun); box-shadow:0 0 24px rgba(232,93,58,.32), inset 0 0 10px rgba(0,0,0,.28);
}
.navbar-brand .brand-africa { color: var(--accent2); }
.navbar-menu { display: flex; align-items: center; gap: 12px; }
.navbar-item { position:relative; height:var(--nav-height); display:flex; align-items:center; padding:0 4px; }
.navbar-item::after {
content:'';
position:absolute;
left:-18px;
right:-18px;
top:100%;
height:14px;
z-index:1;
}
.navbar-link {
position:relative; padding: 22px 0 20px; color: rgba(255,255,255,.6);
font-size: 13px; font-weight: 700; transition: color var(--transition); white-space:nowrap;
}
.navbar-trigger { padding-right:12px; }
.navbar-trigger::before {
content:''; position:absolute; right:0; top:50%; width:5px; height:5px;
border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
transform:translateY(-60%) rotate(45deg); opacity:.62;
}
.navbar-link:hover, .navbar-link.active { color: var(--text); }
.navbar-link.active::after {
content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
background:var(--accent); border-radius:2px;
}
.navbar-dropdown {
position:absolute; top:calc(100% - 4px); left:-18px; min-width:220px; padding:10px 8px 8px;
background:#120d08; border:1px solid var(--line-strong); border-radius:8px;
box-shadow:0 18px 40px rgba(0,0,0,.42); opacity:0; visibility:hidden; transform:translateY(4px);
pointer-events:none;
transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s; z-index:1200;
}
.navbar-dropdown::before {
content:'';
position:absolute;
left:0;
right:0;
top:-12px;
height:12px;
}
.navbar-item:hover .navbar-dropdown, .navbar-item:focus-within .navbar-dropdown, .navbar-item.is-open .navbar-dropdown {
opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition-delay:0s;
}
.navbar-item.is-open .navbar-link {
color:var(--text);
}
.navbar-dropdown a {
display:block; padding:9px 10px; border-radius:6px; color:var(--text-muted);
font-size:13px; font-weight:700; white-space:nowrap; transition:background var(--transition), color var(--transition);
}
.navbar-dropdown a:hover { background:rgba(244,236,223,.07); color:var(--accent2); }
.navbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.navbar-search { display: flex; align-items: center; background: rgba(244,236,223,.045); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; gap: 8px; flex:1; max-width:390px; margin-left:auto; }
.navbar-search:focus-within { border-color:rgba(243,201,123,.44); background:rgba(244,236,223,.07); }
.navbar-search input { background: none; border: none; outline: none; color: var(--text); font-size: 13px; width: 100%; min-width:190px; }
.navbar-search input::placeholder { color: var(--text-faint); }
.navbar-auth-link { color:rgba(255,255,255,.72); font-size:13px; font-weight:700; padding:8px 6px; white-space:nowrap; }
.navbar-auth-link:hover { color:#fff; }
.navbar-sell-btn, .navbar-signup-btn, .navbar-publish-btn {
display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 14px;
border-radius:7px; font-size:13px; font-weight:800; white-space:nowrap; transition:all var(--transition);
}
.navbar-sell-btn { color:var(--text); background:rgba(244,236,223,.06); border:1px solid var(--line-strong); }
.navbar-sell-btn:hover { background:rgba(244,236,223,.1); border-color:var(--accent); }
.navbar-publish-btn { color:#1a0e05; background:var(--grad-gold); border:1px solid rgba(243,201,123,.8); }
.navbar-publish-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); transform:translateY(-1px); }
.navbar-signup-btn { color:#1a0e05; background:var(--grad-gold); border:1px solid rgba(243,201,123,.8); }
.navbar-signup-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.navbar-icon-link {
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px;
min-height:34px; padding:0 10px; border-radius:7px; border:1px solid var(--line-strong);
background:rgba(244,236,223,.045); color:rgba(255,255,255,.72); font-size:12px; font-weight:800;
transition:all var(--transition); white-space:nowrap;
}
.navbar-icon-link:hover { color:var(--text); background:rgba(244,236,223,.08); border-color:rgba(243,201,123,.36); }
.navbar-icon-link svg { width:15px; height:15px; flex:0 0 15px; }
.navbar-icon-link b {
min-width:16px; height:16px; padding:0 5px; border-radius:999px; background:var(--accent2); color:#1a0e05;
font-size:10px; line-height:16px; text-align:center;
}
.navbar-mobile-toggle {
display:none; width:36px; height:36px; border-radius:7px; border:1px solid var(--line-strong);
background:rgba(244,236,223,.045); align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.navbar-mobile-toggle span { width:16px; height:2px; border-radius:2px; background:var(--text); transition:transform var(--transition), opacity var(--transition); }
.navbar-mobile-toggle.is-open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.navbar-mobile-toggle.is-open span:nth-child(2) { opacity:0; }
.navbar-mobile-toggle.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.mobile-nav-panel {
display:none; position:sticky; top:var(--nav-height); z-index:1800; padding:10px 16px 14px;
background:rgba(10,8,5,.97); border-bottom:1px solid var(--line); backdrop-filter:blur(18px);
}
.mobile-nav-panel a {
display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:7px;
color:var(--text-muted); font-size:14px; font-weight:800; border:1px solid transparent;
}
.mobile-nav-panel a:hover { color:var(--text); background:rgba(244,236,223,.06); border-color:var(--line); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: none; transition: all var(--transition); cursor: pointer; }
.btn-primary { background: var(--grad-gold); color: #1a0e05; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(244,193,123,.28); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg-hover); border-color: rgba(255,255,255,.2); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
/* Cart badge */
.cart-badge { background: var(--accent); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; margin-top: -10px; }
/* ── Hero Section ── */
.hero { padding: 80px 20px; text-align: center; background: linear-gradient(180deg, rgba(232,93,58,.08), transparent 60%); }
.hero-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(212,162,76,.12); border: 1px solid rgba(212,162,76,.25); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--accent2); margin-bottom: 24px; letter-spacing: .04em; }
.hero h1 { font-size: clamp(32px, 6vw, 64px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px; }
.hero h1 span { background: var(--grad-sun); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 17px; color: var(--text-muted); max-width: 540px; margin: 0 auto 36px; }
.hero-search { display: flex; max-width: 500px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hero-search input { flex: 1; background: none; border: none; outline: none; padding: 14px 18px; font-size: 14px; color: var(--text); }
.hero-search button { background: var(--accent); border: none; padding: 14px 22px; color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; }
.hero-search button:hover { background: var(--accent-hover); }
.hero-stats { display: flex; justify-content: center; gap: 40px; margin-top: 40px; }
.hero-stat-num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.hero-stat-label { font-size: 12px; color: var(--text-muted); }
/* ── Section ── */
.section { padding: 60px 20px; max-width: 1280px; margin: 0 auto; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.section-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.section-link { font-size: 13px; color: var(--accent2); font-weight: 600; }
/* ── Beat Cards Grid ── */
.beats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
/* ── Tracklist (style Sonaar) ── */
.beats-tracklist-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; overflow-y: visible; }
.beats-tracklist-head { display:grid; grid-template-columns:36px 56px minmax(300px,1.5fr) minmax(240px,1fr) 120px 136px; gap:14px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); }
.beat-track-row { display:grid; grid-template-columns:36px 56px minmax(300px,1.5fr) minmax(240px,1fr) 120px 136px; gap:14px; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; transition:background var(--transition); position:relative; }
.beat-track-row:hover { background: rgba(255,255,255,.025); }
.beat-track-row.is-playing { background: rgba(212,162,76,.07); }
.beat-track-row.is-playing::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
.beat-num { font-size:12px; color:var(--text-faint); text-align:center; }
.beat-track-row:hover .beat-num-label { display:none; }
.beat-play-icon { display:none; color:var(--text); }
.beat-track-row:hover .beat-play-icon { display:flex; justify-content:center; }
.beat-cover-mini { width:44px; height:44px; border-radius:5px; object-fit:cover; background:#222; }
.beat-info-cell { min-width:0; }
.beat-title-cell { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.beat-artist-cell { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.beat-artist-cell > span { color:var(--text-muted); }
.beat-tags-cell { display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; }
.beat-tags-cell .beat-genre-pill { flex:0 0 auto; padding:7px 11px; border-radius:999px; background:#202024; color:#a7a7ad; }
.beat-genre-pill { display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:3px; background:rgba(212,162,76,.12); color:var(--accent2); white-space:nowrap; }
.beat-bpm-cell, .beat-dur-cell { font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.beat-actions-cell { display:grid; grid-template-columns:28px 44px 52px; align-items:center; justify-content:end; gap:6px; min-width:0; }
.beat-icon-btn { background:none; border:none; color:var(--text-muted); padding:5px; border-radius:4px; transition:all var(--transition); display:flex; }
.beat-icon-btn:hover { color:var(--text); background:rgba(255,255,255,.07); }
.beat-icon-btn.is-fav { color:var(--danger); }
.beat-icon-btn[aria-pressed="true"],
.beat-card-action[aria-pressed="true"] { color:#ff4d7a; }
.beat-icon-btn:disabled,
.beat-card-action:disabled { opacity:.55; cursor:wait; }
.beat-icon-btn svg { width:14px; height:14px; }
.beat-buy-btn { font-size:11px; font-weight:600; padding:5px 10px; border-radius:5px; background:var(--accent); color:#fff; border:none; transition:all var(--transition); white-space:nowrap; }
.beat-buy-btn:hover { background:var(--accent-hover); }
.beat-price-cell { font-size:13px; font-weight:700; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
@media(min-width:1201px) {
.beats-tracklist-head,
.beat-track-row { min-width:1120px; }
}
/* ── Filters sidebar ── */
.explore-page-wrap { width:100%; padding:0 clamp(20px,4.5vw,76px) 70px; }
.explore-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
body.app-shell .explore-toolbar { padding-top:22px; }
.explore-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; max-width:none; margin:0; padding:0 0 30px; }
.explore-layout > * { min-width:0; }
.filters-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; height:fit-content; }
.filter-group { margin-bottom:20px; }
.filter-label { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
.filter-input { width:100%; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:6px; padding:8px 12px; color:var(--text); font-size:13px; outline:none; transition:border-color var(--transition); }
.filter-input:focus { border-color:var(--accent); }
.filter-chips { display:flex; flex-wrap:wrap; gap:6px; }
.filter-chip { padding:4px 10px; border-radius:20px; font-size:11px; font-weight:500; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text-muted); cursor:pointer; transition:all var(--transition); }
.filter-chip:hover, .filter-chip.active { background:rgba(212,162,76,.15); border-color:rgba(212,162,76,.4); color:var(--accent2); }
.filters-horizontal form {
display:grid;
grid-template-columns:minmax(240px,1.7fr) minmax(150px,1fr) minmax(150px,1fr) minmax(190px,1.15fr) minmax(170px,1fr) auto;
gap:14px;
align-items:end;
}
.filters-horizontal .filter-group { min-width:0; margin:0; }
.filters-horizontal .filter-input { min-height:42px; border-radius:999px; padding-inline:16px; }
.filters-horizontal .filter-bpm > div { min-height:42px; gap:6px!important; }
.filters-horizontal .filter-bpm .filter-input { width:84px!important; min-width:0; }
.filters-horizontal .filter-keys,
.filters-horizontal .filter-tags { grid-column:1 / -1; }
.filters-horizontal .filter-chips {
flex-wrap:nowrap;
gap:8px;
overflow-x:auto;
padding:1px 2px 7px;
scrollbar-width:thin;
}
.filters-horizontal .filter-chip {
flex:0 0 auto;
min-height:34px;
display:inline-flex;
align-items:center;
padding:0 13px;
border-radius:6px;
font-size:12px;
}
.filters-horizontal .filter-actions { display:flex; align-items:center; gap:10px; min-height:42px; }
.filters-horizontal .filter-actions .btn { min-height:42px; padding-inline:20px; justify-content:center; }
.filters-horizontal .filter-actions a { color:var(--text-muted); font-size:12px; white-space:nowrap; }
.filters-horizontal .filter-actions a:hover { color:#fff; }
.filters-horizontal {
padding:0;
border:0;
border-block:1px solid rgba(255,255,255,.10);
border-radius:0;
background:transparent;
overflow-x:auto;
}
.filters-horizontal form {
min-width:850px;
grid-template-columns:repeat(7,minmax(110px,1fr));
gap:8px;
padding:14px 0;
align-items:center;
}
.filters-horizontal .filter-keys,
.filters-horizontal .filter-tags { grid-column:auto; }
.filters-horizontal .filter-group { position:relative; }
.filters-horizontal .filter-label {
position:absolute;
z-index:1;
left:15px;
top:7px;
margin:0;
color:#777;
font-size:8px;
pointer-events:none;
}
.filters-horizontal .filter-input {
min-height:52px;
padding:19px 34px 6px 15px;
border-color:transparent;
border-radius:7px;
background:#141414;
color:#f4f4f4;
font-size:13px;
font-weight:700;
}
.filters-horizontal .filter-input:hover,
.filters-horizontal .filter-input:focus { border-color:rgba(255,255,255,.18); background:#1a1a1a; }
.filters-horizontal .filter-bpm > .filter-label { top:-1px; }
.filters-horizontal .filter-bpm > div { padding-top:10px; }
.filters-horizontal .filter-bpm .filter-input { min-height:42px; padding:8px 10px; text-align:center; }
.filters-horizontal .filter-actions { min-width:125px; justify-content:flex-end; }
.filters-horizontal .filter-actions .btn { min-height:42px; border-radius:999px; }
#sort-form { display:none; }
@media(max-width:1100px) {
.filters-horizontal form { grid-template-columns:repeat(7,minmax(110px,1fr)); }
}
@media(max-width:620px) {
.filters-horizontal .filter-actions { justify-content:flex-end; }
}
/* ── Genre cards ── */
.genres-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.genres-grid-page { grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:28px 34px; align-items:start; }
.genre-card {
display:block;
min-width:0;
color:var(--text);
text-align:left;
background:transparent;
border:0;
cursor:pointer;
transition:transform var(--transition);
}
.genres-grid-page .genre-card { min-height:0; padding:0; }
.genre-image-frame {
position:relative;
width:100%;
aspect-ratio:1/1;
overflow:hidden;
border-radius:8px;
background:#090a0f;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 12px 26px rgba(0,0,0,.30);
}
.genre-card-image {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center 22%;
filter:saturate(1.02) brightness(.74);
transform:scale(1.01);
transition:transform .28s ease, filter .28s ease;
}
.genre-image-frame::after {
content:''; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.36) 50%,rgba(0,0,0,.20));
z-index:1;
}
.genre-image-title {
position:absolute;
inset:0;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
text-align:center;
color:#fff;
font-family:var(--font-display);
font-size:clamp(17px,1.35vw,24px);
font-weight:900;
line-height:1;
letter-spacing:0;
text-shadow:0 2px 18px rgba(0,0,0,.72);
}
.genre-card:hover { transform:translateY(-3px); }
.genre-card:hover .genre-card-image { transform:scale(1.07); filter:saturate(1.12) brightness(.9); }
.genre-card-caption {
padding-top:12px;
}
.genre-name {
color:#fff;
font-size:15px;
font-weight:850;
letter-spacing:0;
line-height:1.2;
}
.genres-grid-page .genre-name { font-size:15px; }
.genre-count { font-size:11px; color:rgba(255,255,255,.58); margin-top:3px; }
.genres-grid-page .genre-count { font-size:12px; margin-top:6px; color:rgba(255,255,255,.62); }
.genre-card-caption .genre-meta-row {
margin-top:7px;
gap:6px;
}
.genre-card-caption .genre-meta-row span {
padding:0;
border:0;
background:transparent;
color:rgba(255,255,255,.48);
font-size:11px;
font-weight:700;
}
.genre-hero-art {
position:relative;
min-height:220px;
border-radius:10px;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
background:#151515;
display:flex;
align-items:flex-end;
justify-content:flex-start;
padding:clamp(22px,4vw,46px);
margin-bottom:26px;
}
.genre-hero-image {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center 18%;
filter:saturate(1.05) brightness(.72);
transform:scale(1.02);
}
.genre-hero-art::after {
content:'';
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(6,8,13,.90) 0%,rgba(6,8,13,.64) 38%,rgba(6,8,13,.16) 78%),
linear-gradient(0deg,rgba(6,8,13,.86) 0%,rgba(6,8,13,.18) 56%,rgba(6,8,13,.20) 100%);
}
.genre-hero-art > :not(.genre-hero-image) { position:relative; z-index:1; }
.genre-hero-copy {
width:min(560px,100%);
display:flex;
flex-direction:column;
align-items:flex-start;
}
.genre-hero-copy .display-type {
max-width:11ch;
margin-top:10px;
font-size:clamp(44px,6vw,78px);
line-height:.92;
}
.genre-artist-hero {
width:max-content;
max-width:100%;
margin-top:10px;
padding:7px 10px;
border-radius:999px;
color:#fff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
font-size:12px;
font-weight:900;
}
/* ── Beatmaker card ── */
.beatmaker-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all var(--transition); }
.beatmaker-card:hover { border-color:rgba(212,162,76,.3); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.beatmaker-cover { height:80px; background:linear-gradient(135deg,#1a1a2e,#16213e); position:relative; }
.beatmaker-avatar { width:60px; height:60px; border-radius:50%; border:3px solid var(--bg-dark); position:absolute; bottom:-30px; left:16px; background:var(--bg-surface); overflow:hidden; }
.beatmaker-body { padding:38px 16px 16px; }
.beatmaker-name { font-size:14px; font-weight:700; }
.beatmaker-verified { color:var(--accent); margin-left:4px; font-size:12px; }
.beatmaker-stats { display:flex; gap:14px; margin-top:10px; }
.beatmaker-stat { font-size:11px; color:var(--text-muted); }
.beatmaker-stat strong { display:block; font-size:14px; font-weight:700; color:var(--text); }
.beatmakers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
/* ── Pagination ── */
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; padding:30px 0; }
.pagination .page-link { padding:7px 13px; border-radius:6px; font-size:13px; font-weight:500; background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted); transition:all var(--transition); }
.pagination .page-link:hover, .pagination .active .page-link { background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination .disabled .page-link { opacity:.3; pointer-events:none; }
/* ── Footer ── */
.footer { background:#0b0b0b; border-top:1px solid rgba(255,255,255,.08); padding:46px 24px 28px; margin-top:60px; }
.footer-grid { display:grid; grid-template-columns:minmax(240px,1.6fr) repeat(4,minmax(130px,1fr)); gap:34px; max-width:1280px; margin:0 auto 36px; align-items:start; }
.footer-main { max-width:380px; }
.footer-brand { font-size:22px; font-weight:900; letter-spacing:0; margin-bottom:12px; }
.footer-logo {
display:block;
width:164px;
max-width:100%;
height:auto;
filter:drop-shadow(0 0 16px rgba(255,255,255,.12));
}
.footer-desc { font-size:13px; color:var(--text-muted); line-height:1.6; }
.footer-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.footer-actions a { display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.1); border-radius:7px; padding:8px 12px; color:rgba(255,255,255,.78); font-size:12px; font-weight:700; transition:all var(--transition); }
.footer-actions a:first-child { background:var(--accent); border-color:var(--accent); color:#fff; }
.footer-actions a:hover { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07); }
.footer-actions a:first-child:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.footer-col-title { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; }
.footer-col a { display:block; font-size:13px; color:var(--text-muted); margin-bottom:8px; transition:color var(--transition); }
.footer-col a:hover { color:var(--text); }
.footer-bottom { max-width:1280px; margin:0 auto; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; color:var(--text-faint); }
/* ── Sahara-inspired public theme ── */
.site-grain {
position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
.navbar, #main-content, .footer, #beatlink-player, #player-tracklist { position:relative; }
.navbar { z-index:2000; }
#main-content, .footer { z-index:1; }
.display-type { font-family:var(--font-display); letter-spacing:-.03em; }
.word-grad { background:var(--grad-sun); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; font-weight:400; }
.word-outline { -webkit-text-stroke:1.2px var(--text); color:transparent; font-style:italic; font-weight:400; }
.kicker { display:block; font-size:12px; color:var(--accent2); letter-spacing:.18em; text-transform:uppercase; font-weight:800; margin-bottom:14px; }
.section-copy { color:var(--text-muted); font-size:15px; line-height:1.7; max-width:620px; }
.market-shell { max-width:1440px; margin:0 auto; padding:0 40px; }
.market-hero {
position:relative; min-height:calc(100vh - var(--nav-height)); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
align-items:center; gap:48px; padding-top:70px; padding-bottom:58px;
}
.market-hero::before {
content:''; position:absolute; inset:0 0 auto; height:62%; pointer-events:none;
background:linear-gradient(135deg, rgba(232,93,58,.12), rgba(45,138,95,.055) 42%, transparent 74%);
mask-image:linear-gradient(to bottom, #000, transparent);
}
.market-hero-content { position:relative; z-index:1; }
.hero-badge {
display:inline-flex; align-items:center; gap:10px; max-width:100%;
padding:8px 15px; border-radius:999px; background:rgba(244,236,223,.045); border:1px solid var(--line-strong);
color:var(--text-muted); font-size:12px; letter-spacing:.045em; margin-bottom:30px;
}
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--kente); box-shadow:0 0 0 0 rgba(45,138,95,.55); animation:pulse 2s infinite; flex:0 0 auto; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(45,138,95,.55)} 70%{box-shadow:0 0 0 12px rgba(45,138,95,0)} 100%{box-shadow:0 0 0 0 rgba(45,138,95,0)} }
.market-hero h1 {
font-family:var(--font-display); font-weight:800; font-size:clamp(52px,8.4vw,126px);
line-height:.92; letter-spacing:-.045em; margin-bottom:30px;
}
.market-hero .hero-sub { max-width:610px; color:var(--text-muted); font-size:18px; line-height:1.65; margin:0 0 26px; }
.hero-beat-search {
display:flex; align-items:center; gap:8px; max-width:620px; margin:0 0 22px; padding:8px;
border:1px solid var(--line-strong); border-radius:999px; background:rgba(244,236,223,.055);
box-shadow:0 18px 54px rgba(0,0,0,.2);
}
.hero-beat-search input {
flex:1; min-width:0; height:42px; border:none; outline:none; background:transparent; color:var(--text);
padding:0 12px; font-size:14px;
}
.hero-beat-search input::placeholder { color:var(--text-faint); }
.hero-beat-search button {
min-height:42px; padding:0 18px; border:none; border-radius:999px; background:var(--grad-gold);
color:#1a0e05; font-weight:900; font-size:13px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.btn-lg { min-height:54px; padding:0 24px; border-radius:999px; font-size:15px; font-weight:800; }
.btn-ghost {
display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:40px; padding:0 17px;
border-radius:999px; border:1px solid var(--line-strong); color:var(--text); background:rgba(244,236,223,.045);
font-size:13px; font-weight:800; transition:all var(--transition);
}
.btn-ghost:hover { border-color:var(--accent); background:rgba(244,236,223,.08); color:var(--text); }
.hero-metrics, .metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.metric-tile {
border:1px solid var(--line); background:rgba(244,236,223,.035); border-radius:8px; padding:14px;
}
.metric-tile strong { display:block; font-family:var(--font-display); font-size:28px; line-height:1; color:var(--accent2); letter-spacing:-.02em; }
.metric-tile span { display:block; margin-top:6px; color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.market-hero-art {
position:relative; z-index:1; min-height:560px; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden;
background:#1a0e05; box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.market-hero-art::before {
content:''; position:absolute; inset:0; background-image:url('../images/genres/artist-sprite.png');
background-size:200% 250%; background-position:14% 0%; filter:saturate(1.03) brightness(.78);
}
.market-hero-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,5,.05),rgba(10,8,5,.78)); }
.hero-art-panel {
position:absolute; z-index:1; left:18px; right:18px; bottom:18px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:end;
padding:18px; border-radius:8px; background:rgba(18,13,8,.78); border:1px solid var(--line-strong); backdrop-filter:blur(16px);
}
.hero-art-panel h2 { font-family:var(--font-display); font-size:26px; line-height:1; letter-spacing:-.02em; }
.hero-art-panel p { color:var(--text-muted); font-size:12px; margin-top:6px; }
.hero-art-panel .live-chip { display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px; color:#1a0e05; background:var(--grad-gold); font-size:12px; font-weight:900; white-space:nowrap; }
.hero-player-card {
position:absolute; left:18px; right:18px; top:18px; z-index:2; display:grid; grid-template-columns:64px minmax(0,1fr) 46px; align-items:center; gap:12px;
padding:12px; background:rgba(10,8,5,.76); border:1px solid var(--line-strong); border-radius:8px; backdrop-filter:blur(18px);
}
.hero-player-card img { width:64px; height:64px; border-radius:6px; object-fit:cover; background:#111; }
.hero-player-card span { display:block; color:var(--accent2); font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.hero-player-card strong { display:block; margin-top:3px; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-player-card small { display:block; margin-top:2px; color:var(--text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-play-button {
width:46px; height:46px; border-radius:50%; border:1px solid rgba(243,201,123,.6); background:var(--grad-gold);
color:#1a0e05; display:flex; align-items:center; justify-content:center;
}
.hero-play-button svg { width:22px; height:22px; }
.marquee {
position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:22px 0; background:rgba(10,8,5,.5);
}
.marquee-track { display:flex; gap:28px; white-space:nowrap; animation:scroll-x 42s linear infinite; font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-.02em; }
.marquee-track span:nth-child(odd) { color:var(--text); }
.marquee-track span:nth-child(even) { color:var(--accent2); font-style:italic; font-weight:400; }
@keyframes scroll-x { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.market-section { max-width:1440px; margin:0 auto; padding:100px 40px; position:relative; z-index:1; }
.section-dark {
max-width:none; background:linear-gradient(180deg, transparent, rgba(18,13,8,.72) 22%, rgba(18,13,8,.72) 78%, transparent);
}
.section-dark > .market-section { padding-top:100px; padding-bottom:100px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:34px; margin-bottom:42px; flex-wrap:wrap; }
.section-head.center { flex-direction:column; align-items:center; text-align:center; }
.section-head h2 { font-family:var(--font-display); font-size:clamp(34px,5vw,72px); line-height:.96; letter-spacing:-.035em; margin:0; }
.filter-pills { display:flex; gap:8px; flex-wrap:wrap; }
.pill {
display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line-strong);
color:var(--text-muted); background:transparent; font-size:13px; font-weight:800; transition:all var(--transition);
}
.pill:hover, .pill-active { color:#1a0e05; background:var(--text); border-color:var(--text); }
.beat-card {
position:relative; overflow:hidden; border-radius:8px; background:rgba(244,236,223,.035); border:1px solid var(--line);
cursor:pointer; transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s;
}
.beat-card:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.beat-card-cover { position:relative; aspect-ratio:1; overflow:hidden; background:linear-gradient(135deg,rgba(232,93,58,.32),rgba(26,10,5,.8)); }
.beat-card-cover img { width:100%; height:100%; object-fit:cover; }
.beat-card-cover::after { content:''; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(180deg,transparent,rgba(10,8,5,.86)); pointer-events:none; }
.beat-card-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,8,5,.18); opacity:0; transition:opacity .2s; }
.beat-card:hover .beat-card-overlay,
.beat-card:focus-within .beat-card-overlay,
.beat-card.is-current .beat-card-overlay { opacity:1; }
.beat-card-play-btn {
width:62px; height:62px; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#1a0e05; background:linear-gradient(180deg,#fff,#F0B94B); box-shadow:0 16px 38px rgba(0,0,0,.44), 0 0 0 9px rgba(240,185,75,.12);
transform:scale(.94);
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.beat-card:hover .beat-card-play-btn,
.beat-card:focus-within .beat-card-play-btn,
.beat-card.is-current .beat-card-play-btn { transform:scale(1); }
.beat-card-play-btn svg { width:23px; height:23px; }
.beat-card-play-btn .icon-play { margin-left:3px; }
.beat-card-play-btn .icon-pause,
.beat-card.is-playing .beat-card-play-btn .icon-play { display:none; }
.beat-card.is-playing .beat-card-play-btn .icon-pause { display:block; }
.beat-card.is-playing .beat-card-play-btn {
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
box-shadow:0 18px 42px rgba(168,85,247,.32), 0 0 0 9px rgba(168,85,247,.14);
}
.beat-card.is-current {
border-color:rgba(240,185,75,.46);
}
.beat-card.is-playing .beat-card-cover img {
filter:saturate(1.15) brightness(.78);
}
.beat-card-body { padding:17px; }
.beat-card-title { font-family:var(--font-display); font-size:19px; font-weight:800; line-height:1.1; letter-spacing:-.015em; }
.beat-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--text-muted); font-size:12px; margin-top:6px; }
.beat-card-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--text-faint); }
.beat-card-stats { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; color:var(--text-faint); font-size:11px; }
.beat-card-stats span { display:inline-flex; align-items:center; gap:5px; }
.beat-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.beat-card-price { color:var(--accent2); font-family:var(--font-display); font-size:20px; font-weight:800; white-space:nowrap; }
.beat-card-actions { display:flex; gap:6px; }
.beat-card-action {
width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center;
color:var(--text-muted); border:1px solid var(--line); background:rgba(244,236,223,.04); transition:all var(--transition);
}
.beat-card-action:hover, .beat-card-action.is-fav { color:var(--accent2); border-color:var(--accent); background:rgba(212,162,76,.1); }
.beat-card-action svg { width:15px; height:15px; }
.beat-microstats { display:flex; gap:9px; flex-wrap:wrap; color:var(--text-faint); font-size:11px; margin-top:4px; }
.beats-tracklist-wrap { background:rgba(244,236,223,.035); border-color:var(--line); border-radius:8px; }
.beats-tracklist-head { color:var(--text-faint); border-bottom-color:var(--line); }
.beat-track-row { border-bottom-color:rgba(244,236,223,.05); }
.beat-track-row:hover { background:rgba(244,236,223,.045); }
.beat-track-row.is-playing { background:rgba(212,162,76,.08); }
.beat-track-row.is-playing::before { background:var(--accent); }
.beat-genre-pill { background:rgba(212,162,76,.12); color:var(--accent2); }
.beat-buy-btn { background:var(--grad-gold); color:#1a0e05; font-weight:900; }
.beat-buy-btn:hover { background:var(--accent-hover); }
.beat-icon-btn:hover { color:var(--accent2); background:rgba(212,162,76,.1); }
.beat-icon-btn.is-fav { color:var(--terracotta); }
.page-hero {
max-width:1440px; margin:0 auto; padding:58px 40px 34px; position:relative; z-index:1;
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end;
}
.page-hero h1 { font-family:var(--font-display); font-size:clamp(38px,5.4vw,74px); line-height:.96; letter-spacing:-.035em; margin:0; }
.page-hero p { color:var(--text-muted); font-size:15px; line-height:1.7; max-width:640px; margin-top:14px; }
.page-tools {
display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
}
.theme-input, .theme-select, .filter-input {
background:rgba(244,236,223,.045) !important; border:1px solid var(--line-strong) !important; border-radius:7px !important;
color:var(--text) !important; outline:none; transition:border-color var(--transition), background var(--transition);
}
.theme-input:focus, .theme-select:focus, .filter-input:focus { border-color:var(--accent) !important; background:rgba(244,236,223,.07) !important; }
.filters-panel { background:rgba(244,236,223,.035); border-color:var(--line); border-radius:8px; }
.filter-label, .footer-col-title { color:var(--text-faint); }
.filter-chip { border-color:var(--line); background:rgba(244,236,223,.04); color:var(--text-muted); }
.filter-chip:hover, .filter-chip.active { background:rgba(212,162,76,.12); border-color:rgba(212,162,76,.45); color:var(--accent2); }
.genre-card { border-radius:8px; border-color:var(--line); }
.genre-card:hover { border-color:var(--accent); }
.genre-meta-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; color:rgba(244,236,223,.72); font-size:12px; font-weight:700; }
.genre-meta-row span { padding:4px 8px; border-radius:999px; background:rgba(10,8,5,.42); border:1px solid rgba(244,236,223,.12); }
.genre-hero-art { border-radius:8px; border-color:var(--line); }
.beatmaker-card {
border-radius:8px; background:rgba(244,236,223,.035); border-color:var(--line);
}
.beatmaker-card:hover { border-color:var(--accent); box-shadow:0 18px 40px rgba(0,0,0,.28); transform:translateY(-4px); }
.beatmaker-cover { height:112px; background:var(--grad-sun); }
.beatmaker-avatar { border-color:var(--bg-dark); }
.beatmaker-verified { color:var(--accent2); }
.producer-card {
position:relative; display:block; min-height:320px; border-radius:8px; overflow:hidden;
background:var(--prod-bg, linear-gradient(135deg,#3a1a0e,#1a0a05)); border:1px solid var(--line);
transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
.producer-card:hover { transform:translateY(-5px); border-color:var(--accent); }
.producer-card::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,5,.04) 20%, rgba(10,8,5,.92)); }
.producer-pattern {
position:absolute; inset:0; opacity:.23;
background-image:linear-gradient(45deg, rgba(243,201,123,.18) 25%, transparent 25%), linear-gradient(-45deg, rgba(243,201,123,.13) 25%, transparent 25%);
background-size:28px 28px;
}
.producer-rank { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(10,8,5,.62); border:1px solid var(--line-strong); color:var(--accent2); font-family:var(--font-display); font-weight:800; }
.producer-info { position:absolute; left:20px; right:20px; bottom:20px; z-index:1; }
.producer-name { font-family:var(--font-display); font-size:24px; line-height:1; font-weight:800; letter-spacing:-.02em; }
.producer-loc { color:var(--accent2); font-size:11px; text-transform:uppercase; letter-spacing:.09em; margin-top:7px; }
.producer-stats { display:flex; gap:18px; margin-top:15px; color:var(--text-muted); font-size:12px; }
.producer-stats strong { display:block; color:var(--text); font-family:var(--font-display); font-size:18px; }
.home-genre-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.home-genre-card {
position:relative; min-height:210px; overflow:hidden; border-radius:8px; padding:20px; display:flex; flex-direction:column; justify-content:flex-end;
background:var(--genre-bg); border:1px solid var(--line); isolation:isolate;
}
.home-genre-card::before {
content:''; position:absolute; inset:0; z-index:-1;
background:linear-gradient(180deg, rgba(10,8,5,.06), rgba(10,8,5,.76)), radial-gradient(circle at 18% 18%, rgba(243,201,123,.22), transparent 34%);
}
.home-genre-card strong { font-family:var(--font-display); font-size:30px; line-height:1; letter-spacing:-.03em; }
.home-genre-card span { color:var(--accent2); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; margin-top:8px; }
.how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.how-grid > div {
border:1px solid var(--line); border-radius:8px; background:rgba(244,236,223,.035); padding:26px;
}
.how-grid strong { display:flex; width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center; background:var(--grad-gold); color:#1a0e05; font-weight:900; }
.how-grid h3 { margin-top:18px; font-family:var(--font-display); font-size:24px; letter-spacing:-.02em; }
.how-grid p { margin-top:8px; color:var(--text-muted); line-height:1.7; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.price-card { position:relative; padding:30px; border-radius:8px; background:rgba(244,236,223,.035); border:1px solid var(--line); overflow:hidden; }
.price-card.featured { background:linear-gradient(180deg,rgba(212,162,76,.14),rgba(232,93,58,.06)); border-color:rgba(243,201,123,.42); }
.price-tag { color:var(--accent2); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:900; }
.price-value { font-family:var(--font-display); font-size:52px; line-height:1; margin:18px 0 24px; color:var(--text); letter-spacing:-.04em; }
.price-list { list-style:none; padding:0; margin:0; }
.price-list li { padding:11px 0; border-top:1px solid var(--line); color:var(--text-muted); font-size:13px; }
.price-list li::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:9px; vertical-align:middle; }
.service-card { display:flex; flex-direction:column; min-height:390px; }
.service-card-more { align-self:flex-start; margin-top:auto; transform:translateY(8px); }
.cta-band {
margin:0 auto 70px; max-width:1320px; padding:64px 40px; border-radius:8px; border:1px solid var(--line-strong);
background:linear-gradient(135deg, rgba(232,93,58,.14), rgba(18,13,8,.88) 46%, rgba(45,138,95,.08));
}
.cta-band h2 { font-family:var(--font-display); font-size:clamp(36px,5.4vw,72px); line-height:.96; letter-spacing:-.035em; }
.cta-band p { color:var(--text-muted); font-size:16px; line-height:1.7; max-width:700px; margin:18px 0 0; }
.simple-page { max-width:980px; margin:0 auto; padding:58px 24px 90px; }
.simple-page-card { border:1px solid var(--line); background:rgba(244,236,223,.035); border-radius:8px; padding:36px; }
.simple-page h1 { font-family:var(--font-display); font-size:clamp(36px,5vw,64px); line-height:.96; letter-spacing:-.035em; margin-bottom:18px; }
.simple-page h2 { font-family:var(--font-display); font-size:24px; margin:30px 0 12px; }
.simple-page p, .simple-page li { color:var(--text-muted); font-size:14px; line-height:1.8; }
.simple-page ul { padding-left:18px; }
.simple-page a { color:var(--accent2); }
.contact-page {
width:min(1180px,92vw);
margin:0 auto;
padding:clamp(34px,5vw,70px) 0 110px;
}
.contact-hero {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.56fr);
gap:24px;
align-items:end;
margin-bottom:24px;
}
.contact-hero-copy {
min-height:280px;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:clamp(28px,4.5vw,58px);
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:
linear-gradient(135deg,rgba(168,85,247,.20),rgba(217,70,239,.08) 42%,rgba(15,17,23,.62)),
linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.020));
overflow:hidden;
}
.contact-hero-copy h1 {
max-width:780px;
margin-top:12px;
font-family:var(--font-display);
font-size:clamp(48px,7vw,92px);
line-height:.90;
letter-spacing:-.045em;
}
.contact-hero-copy p {
max-width:640px;
margin-top:20px;
color:rgba(248,250,252,.70);
font-size:clamp(15px,1.6vw,18px);
line-height:1.7;
}
.contact-signal-grid {
display:grid;
gap:12px;
}
.contact-signal-grid div,
.contact-route-card {
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.026));
}
.contact-signal-grid div {
min-height:84px;
padding:18px;
display:flex;
flex-direction:column;
justify-content:center;
}
.contact-signal-grid span,
.contact-route-card span,
.contact-field > span,
.contact-form-head .kicker {
color:var(--jb-gold);
font-size:11px;
font-weight:950;
letter-spacing:.13em;
text-transform:uppercase;
}
.contact-signal-grid strong {
margin-top:8px;
color:#fff;
font-size:18px;
line-height:1.25;
}
.contact-layout {
display:grid;
grid-template-columns:minmax(260px,.34fr) minmax(0,1fr);
gap:24px;
align-items:start;
}
.contact-side {
display:grid;
gap:14px;
position:sticky;
top:92px;
}
.contact-route-card {
padding:20px;
}
.contact-route-card strong {
display:block;
margin-top:10px;
color:#fff;
font-family:var(--font-display);
font-size:24px;
line-height:1.05;
}
.contact-route-card p {
margin-top:12px;
color:rgba(248,250,252,.62);
font-size:13px;
line-height:1.65;
}
.contact-form-panel {
padding:clamp(22px,3vw,36px);
border:1px solid rgba(255,255,255,.11);
border-radius:8px;
background:
linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028)),
rgba(12,14,20,.82);
box-shadow:0 28px 90px rgba(0,0,0,.30);
}
.contact-form-head {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin-bottom:22px;
padding-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.contact-form-head h2 {
color:#fff;
font-family:var(--font-display);
font-size:clamp(30px,3vw,44px);
line-height:.98;
letter-spacing:-.035em;
}
.contact-field-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.contact-field {
display:flex;
flex-direction:column;
gap:8px;
}
.contact-field-wide {
grid-column:1 / -1;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width:100%;
min-height:48px;
padding:13px 14px;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
outline:none;
background:rgba(255,255,255,.052);
color:#fff;
font-size:14px;
transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.contact-field textarea {
min-height:170px;
resize:vertical;
line-height:1.65;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
color:rgba(248,250,252,.32);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
border-color:rgba(217,70,239,.60);
background:rgba(255,255,255,.07);
box-shadow:0 0 0 4px rgba(168,85,247,.11);
}
.contact-field select option {
background:#11131a;
color:#fff;
}
.contact-consent {
display:flex;
align-items:flex-start;
gap:10px;
margin-top:18px;
color:rgba(248,250,252,.66);
font-size:13px;
line-height:1.5;
}
.contact-consent input {
margin-top:2px;
accent-color:var(--jb-primary);
}
.contact-submit-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-top:24px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.08);
}
.contact-submit-row a {
color:rgba(248,250,252,.62);
font-size:13px;
font-weight:800;
}
.contact-hp {
position:absolute;
left:-9999px;
width:1px;
height:1px;
opacity:0;
}
.license-matrix { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:rgba(244,236,223,.03); }
.license-matrix-head, .license-matrix-row { display:grid; grid-template-columns:1.1fr 1fr .8fr 1.2fr; gap:12px; align-items:center; padding:14px 18px; }
.license-matrix-head { color:var(--text-faint); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line); }
.license-matrix-row { border-bottom:1px solid rgba(244,236,223,.06); color:var(--text-muted); }
.license-matrix-row:last-child { border-bottom:none; }
.license-matrix-row strong { color:var(--text); }
.pricing-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.detail-tile { border:1px solid var(--line); background:rgba(244,236,223,.04); border-radius:8px; padding:16px; color:var(--text-muted); line-height:1.6; }
.payment-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.payment-strip span { border:1px solid rgba(243,201,123,.26); background:rgba(212,162,76,.08); color:var(--accent2); border-radius:999px; padding:7px 11px; font-size:12px; font-weight:900; }
.beat-license-table { width:100%; }
.beat-license-head, .beat-license-row {
display:grid; grid-template-columns:1.35fr .9fr .7fr .9fr; gap:10px; align-items:center;
}
.beat-license-head {
padding:11px 18px; color:var(--text-faint); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.09em; border-bottom:1px solid rgba(255,255,255,.05);
}
.beat-license-row {
width:100%; padding:14px 18px; border:none; border-bottom:1px solid rgba(255,255,255,.045);
background:transparent; color:var(--text-muted); text-align:left; transition:background var(--transition), color var(--transition);
}
.beat-license-row:hover, .beat-license-row.is-selected { background:rgba(212,162,76,.09); color:var(--text); }
.beat-license-name { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.beat-license-name strong { color:var(--text); font-size:13px; }
.beat-license-name em {
font-style:normal; color:#1a0e05; background:var(--grad-gold); border-radius:999px; padding:2px 7px;
font-size:9px; font-weight:900; white-space:nowrap;
}
.license-radio {
width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.22); flex:0 0 15px;
}
.beat-license-row.is-selected .license-radio { background:var(--accent2); border-color:var(--accent2); box-shadow:inset 0 0 0 3px #161616; }
.beat-license-price { color:var(--accent2); font-weight:900; white-space:nowrap; }
.contract-note {
margin:12px 18px 0; padding:12px; border-radius:8px; background:rgba(45,138,95,.08); border:1px solid rgba(45,138,95,.2);
}
.contract-note strong { display:block; color:#63d6a3; font-size:12px; }
.contract-note span { display:block; color:var(--text-muted); margin-top:3px; font-size:11px; line-height:1.55; }
.footer { background:rgba(10,8,5,.78); border-top-color:var(--line); }
.footer-actions a:first-child { background:var(--grad-gold); border-color:rgba(243,201,123,.8); color:#1a0e05; }
.footer-actions a:first-child:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#1a0e05; }
/* ── Responsive ── */
@media(max-width:1120px) {
.navbar { gap:12px; }
.navbar-menu { gap:8px; }
.navbar-link { font-size:12px; }
.navbar-search { max-width:300px; }
.navbar-icon-link span { display:none; }
.market-shell { padding:0 24px; }
.market-hero { grid-template-columns:1fr; min-height:auto; padding-top:54px; }
.market-hero-art { min-height:420px; }
.hero-metrics, .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pricing-grid { grid-template-columns:1fr; }
.home-genre-grid, .how-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:1024px) { .explore-layout { grid-template-columns:1fr; } .filters-panel { position:static; } .genres-grid-page { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:24px; } .beats-tracklist-head, .beat-track-row { grid-template-columns:36px 50px 1fr 80px 100px; } .beat-bpm-cell, .beat-dur-cell { display:none; } }
@media(max-width:1024px) { .beat-detail-layout { grid-template-columns:1fr !important; } .beat-detail-layout > div:last-child { position:static !important; } }
@media(max-width:768px) {
.navbar { padding:0 16px; gap:12px; }
.navbar-menu { display:none; }
.navbar-search { max-width:none; }
.navbar-publish-btn { display:none; }
.navbar-icon-link { display:none; }
.navbar-mobile-toggle { display:inline-flex; }
.mobile-nav-panel.is-open { display:block; }
.market-shell, .market-section, .page-hero { padding-left:20px; padding-right:20px; }
.market-section { padding-top:72px; padding-bottom:72px; }
.section-dark > .market-section { padding-top:72px; padding-bottom:72px; }
.market-hero h1 { font-size:clamp(46px,15vw,74px); }
.market-hero .hero-sub { font-size:16px; }
.hero-beat-search { border-radius:16px; align-items:stretch; flex-direction:column; padding:10px; }
.hero-beat-search input { width:100%; }
.hero-beat-search button { width:100%; }
.market-hero-art { min-height:340px; }
.hero-art-panel { grid-template-columns:1fr; }
.marquee-track { font-size:24px; }
.page-hero { grid-template-columns:1fr; padding-top:40px; }
.page-tools { justify-content:flex-start; }
.hero h1 { font-size:32px; } .hero-stats { gap:24px; }
.beats-grid { grid-template-columns:repeat(2,1fr); }
.footer-grid { grid-template-columns:1fr 1fr; }
.footer-bottom { flex-direction:column; align-items:flex-start; }
.beats-tracklist-head, .beat-track-row { grid-template-columns:36px 46px 1fr 90px; }
.license-matrix-head { display:none; }
.license-matrix-row { grid-template-columns:1fr; gap:6px; }
.beat-license-head { display:none; }
.beat-license-row { grid-template-columns:1fr; gap:7px; }
}
@media(max-width:560px) {
.hero-metrics, .metric-grid { grid-template-columns:1fr 1fr; }
.home-genre-grid, .how-grid, .pricing-detail-grid { grid-template-columns:1fr; }
.genres-grid-page { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
.genres-grid-page .genre-card { min-height:0; }
.genre-image-title { font-size:15px; }
.beat-card-body { padding:14px; }
.simple-page-card { padding:26px; }
}
/* Browser-based topline workstation */
.studio-product-page {
min-height:calc(100vh - 64px);
padding:42px clamp(20px,4vw,64px) 72px;
background:#080b0f;
}
.studio-product-hero {
width:min(1540px,100%);
min-height:720px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(360px,.72fr) minmax(620px,1.28fr);
gap:54px;
align-items:center;
}
.studio-product-copy h1 {
max-width:680px;
margin-top:28px;
font-size:clamp(48px,5.3vw,82px);
line-height:.98;
letter-spacing:0;
}
.studio-product-copy h1 span { color:#4390ff; }
.studio-product-label {
padding-left:18px;
border-left:4px solid var(--brand-blue);
color:#73a9ff;
font-size:12px;
font-weight:850;
letter-spacing:.22em;
text-transform:uppercase;
}
.studio-product-copy > p {
max-width:610px;
margin-top:24px;
color:#9ba5b3;
font-size:17px;
line-height:1.75;
}
.studio-product-features {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px 26px;
margin-top:34px;
}
.studio-product-features > div { display:flex; align-items:center; gap:13px; min-width:0; }
.studio-product-features > div > i {
width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(67,144,255,.4); border-radius:8px;
background:linear-gradient(135deg,rgba(0,106,255,.18),rgba(0,211,98,.04));
}
.studio-product-features > div > i svg { width:23px; height:23px; color:#5da0ff; }
.studio-product-features strong,.studio-product-features small { display:block; }
.studio-product-features strong { font-size:13px; }
.studio-product-features small { margin-top:5px; color:#7d8794; font-size:11px; line-height:1.4; }
.studio-product-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:38px; }
.daw-preview {
min-width:0;
overflow:hidden;
border:1px solid #263140;
border-radius:8px;
color:#eaf0f8;
background:#0b1118;
box-shadow:0 30px 80px rgba(0,0,0,.42);
}
.daw-preview-head {
min-height:76px; display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid #1d2835;
}
.daw-preview-head img { width:48px; height:48px; border-radius:7px; object-fit:cover; }
.daw-preview-head span { min-width:110px; margin-right:auto; }
.daw-preview-head strong,.daw-preview-head small { display:block; }
.daw-preview-head strong { font-size:14px; }
.daw-preview-head small { margin-top:3px; color:#7e8997; font-size:11px; }
.daw-preview-head b { padding:9px 11px; border-radius:7px; color:#c9d4e2; background:#121c27; font-size:11px; }
.daw-preview-record { min-height:38px; padding:0 14px; border:1px solid #334155; border-radius:7px; color:#fff; background:#121923; font-weight:750; display:inline-flex;align-items:center; }
.daw-preview-record i,.record-dot { display:inline-block; width:10px; height:10px; margin-right:7px; border-radius:50%; background:#ff4057; }
.daw-preview-workspace { display:grid; grid-template-columns:170px minmax(0,1fr); min-height:390px; }
.daw-track-list { padding-top:34px; border-right:1px solid #1d2835; background:#0a0f15; }
.daw-track-meta { height:86px; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:9px; padding:0 12px; border-bottom:1px solid #18222d; }
.daw-track-meta > span { width:36px; height:36px; display:grid; place-items:center; border-radius:7px; font-weight:850; }
.daw-track-meta strong { font-size:12px; }
.daw-track-meta small { color:#8390a0; font-size:9px; }
.daw-track-meta i { grid-column:2/-1; height:4px; margin-top:-19px; border-radius:4px; background:linear-gradient(90deg,#3f82ff 62%,#1d2936 62%); }
.daw-timeline { position:relative; overflow:hidden; padding-top:34px; background-color:#091019; background-image:linear-gradient(rgba(91,111,135,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(91,111,135,.18) 1px,transparent 1px); background-size:100% 86px,42px 100%; }
.daw-ruler { position:absolute; inset:0 0 auto; height:34px; display:flex; justify-content:space-between; padding:9px 12px; color:#687688; background:#0a1017; font-size:9px; }
.daw-playhead { position:absolute; z-index:4; top:22px; bottom:0; left:54%; width:1px; background:#fff; }
.daw-playhead::before { content:''; position:absolute; top:0; left:-4px; width:9px; height:9px; border-radius:2px 2px 50% 50%; background:var(--brand-blue); }
.daw-clip { position:relative; width:var(--width); height:66px; margin-top:10px; margin-left:var(--start); overflow:hidden; border:1px solid currentColor; border-radius:5px; }
.daw-clip span { position:relative; z-index:2; display:block; padding:7px 8px; font-size:9px; }
.daw-clip i { position:absolute; inset:27px 6px 7px; opacity:.9; background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px); clip-path:polygon(0 45%,3% 15%,6% 67%,9% 20%,12% 78%,15% 35%,18% 63%,21% 5%,24% 72%,27% 32%,30% 80%,33% 18%,36% 58%,39% 25%,42% 88%,45% 36%,48% 62%,51% 15%,54% 75%,57% 22%,60% 64%,63% 32%,66% 82%,69% 13%,72% 58%,75% 34%,78% 74%,81% 20%,84% 64%,87% 38%,90% 76%,93% 18%,96% 58%,100% 45%,100% 60%,0 60%); }
.daw-clip.blue,.daw-track-meta .blue { color:#3f82ff; background:rgba(0,106,255,.24); }
.daw-clip.red,.daw-track-meta .red { color:#ff4057; background:rgba(255,64,87,.20); }
.daw-clip.violet,.daw-track-meta .violet { color:#8b5cf6; background:rgba(139,92,246,.20); }
.daw-clip.green,.daw-track-meta .green { color:#00d362; background:rgba(0,211,98,.18); }
.daw-transport { min-height:58px; display:flex; align-items:center; justify-content:center; gap:16px; padding:8px 16px; border-top:1px solid #1d2835; border-bottom:1px solid #1d2835; }
.daw-transport > span:first-child { margin-right:auto; color:#9aa6b6; font-size:11px; }
.daw-transport > span { color:#d8e1ec; }
.daw-transport .record-dot { width:34px; height:34px; margin:0; border:8px solid #d82f42; background:#fff; }
.daw-transport i { width:90px; height:4px; margin-left:auto; border-radius:4px; background:linear-gradient(90deg,var(--brand-blue) 62%,#1d2936 62%); }
.daw-transport > span:last-child { color:#718093; font-size:10px; }
.daw-effects { display:grid; grid-template-columns:repeat(5,minmax(72px,1fr)) 1.15fr; gap:8px; padding:10px; }
.daw-effects > div,.daw-effects label { min-height:100px; padding:11px; border:1px solid #1c2835; border-radius:7px; background:#111a24; }
.daw-effects strong,.daw-effects small,.daw-effects label { display:block; font-size:10px; }
.daw-effects > div i { width:42px; height:42px; display:block; margin:9px auto 4px; border:6px solid #253347; border-top-color:#4390ff; border-radius:50%; }
.daw-effects small { color:#94a1b1; text-align:center; }
.daw-effects select { width:100%; margin-top:14px; padding:8px; border:1px solid #273648; border-radius:5px; color:#fff; background:#0c141d; }
.topline-showcase > .daw-preview { align-self:center; }
.topline-showcase > .topline-card-preview { display:none; }
.topline-showcase .daw-preview-workspace { min-height:300px; }
.topline-showcase .daw-track-meta { height:64px; }
.topline-showcase .daw-clip { height:48px; margin-top:8px; }
.topline-showcase .daw-effects > div,.topline-showcase .daw-effects label { min-height:82px; }
@media(max-width:1120px) {
.studio-product-hero { grid-template-columns:1fr; }
}
@media(max-width:760px) {
.studio-product-page { padding:28px 12px 60px; }
.studio-product-features { grid-template-columns:1fr; }
.daw-preview-workspace { grid-template-columns:112px minmax(430px,1fr); overflow:auto; }
.daw-preview { overflow:auto; }
.daw-preview-head b { display:none; }
.daw-effects { grid-template-columns:repeat(3,minmax(90px,1fr)); min-width:580px; }
}
@media(max-width:480px) {
.beats-grid { grid-template-columns:1fr; }
.footer-grid { grid-template-columns:1fr; }
.navbar-signup-btn { display:none; }
.navbar-search { display:none; }
.hero-metrics { grid-template-columns:1fr; }
.metric-grid { grid-template-columns:1fr 1fr; }
}
/* ============================================================
JammBeat next-gen shell
============================================================ */
body.app-shell {
--bg-dark:#0F1117;
--bg-surface:#131720;
--bg-card:rgba(255,255,255,.055);
--bg-hover:rgba(255,255,255,.085);
--border:rgba(255,255,255,.10);
--line:rgba(255,255,255,.10);
--line-strong:rgba(255,255,255,.16);
--accent:#A855F7;
--accent2:#D946EF;
--accent-hover:#c026d3;
--gold:#F0B94B;
--text:#F8FAFC;
--text-muted:rgba(248,250,252,.68);
--text-faint:rgba(248,250,252,.42);
--font-display:'Space Grotesk','Bricolage Grotesque','Inter',system-ui,sans-serif;
--grad-gold:linear-gradient(135deg,#A855F7 0%,#D946EF 100%);
--grad-sun:linear-gradient(135deg,#A855F7 0%,#D946EF 54%,#F0B94B 100%);
background:
radial-gradient(circle at 72% 0%, rgba(168,85,247,.18), transparent 34%),
radial-gradient(circle at 8% 16%, rgba(217,70,239,.12), transparent 30%),
linear-gradient(180deg,#0F1117 0%,#10131b 48%,#0b0d12 100%);
color:var(--text);
}
body.app-shell::before {
content:'';
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
opacity:.32;
background:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
background-size:52px 52px;
mask-image:linear-gradient(180deg, #000, transparent 74%);
}
body.app-shell #main-content {
position:relative;
z-index:1;
width:auto;
margin-left:240px;
padding-top:68px;
}
body.app-shell .footer {
position:relative;
z-index:1;
width:auto;
margin-left:240px;
margin-top:0;
background:rgba(8,10,15,.82);
border-top-color:rgba(255,255,255,.08);
}
body.app-shell .btn,
body.app-shell .btn-ghost,
body.app-shell .topbar-pill,
body.app-shell .topbar-primary {
border-radius:8px;
}
body.app-shell .btn-primary {
background:linear-gradient(135deg,#7c3aed,#D946EF);
color:#fff;
box-shadow:0 14px 34px rgba(168,85,247,.25);
}
body.app-shell .btn-primary:hover {
background:linear-gradient(135deg,#8b5cf6,#e879f9);
box-shadow:0 18px 42px rgba(217,70,239,.30);
}
body.app-shell .btn-ghost {
color:var(--text);
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.12);
}
body.app-shell .btn-ghost:hover {
color:#fff;
background:rgba(255,255,255,.08);
border-color:rgba(217,70,239,.42);
}
body.app-shell .word-grad {
font-style:normal;
font-weight:800;
background:linear-gradient(135deg,#A855F7,#D946EF 58%,#F0B94B);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.app-sidebar {
position:fixed;
inset:0 auto 0 0;
z-index:2200;
width:240px;
display:flex;
flex-direction:column;
padding:22px 16px;
background:linear-gradient(180deg, rgba(9,11,16,.96), rgba(9,11,16,.90));
border-right:1px solid rgba(255,255,255,.08);
box-shadow:16px 0 70px rgba(0,0,0,.30);
backdrop-filter:blur(24px) saturate(135%);
}
.app-brand {
display:flex;
align-items:center;
gap:12px;
min-height:40px;
margin-bottom:24px;
color:#fff;
font-family:var(--font-display);
font-size:20px;
font-weight:800;
}
.brand-mark {
width:28px;
height:28px;
display:grid;
grid-template-columns:repeat(3,1fr);
align-items:center;
gap:3px;
color:var(--accent2);
}
.brand-mark i {
display:block;
width:5px;
border-radius:999px;
background:linear-gradient(180deg,#D946EF,#A855F7);
box-shadow:0 0 18px rgba(217,70,239,.50);
}
.brand-mark i:nth-child(1) { height:14px; }
.brand-mark i:nth-child(2) { height:24px; }
.brand-mark i:nth-child(3) { height:18px; }
.sidebar-nav {
flex:1;
overflow:auto;
padding-right:2px;
}
.sidebar-section { margin-bottom:24px; }
.sidebar-label,
.mobile-nav-label {
margin:0 0 8px 8px;
color:rgba(248,250,252,.46);
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.sidebar-link {
position:relative;
display:flex;
align-items:center;
min-height:38px;
padding:0 12px;
margin-bottom:3px;
border-radius:8px;
color:rgba(248,250,252,.74);
font-size:14px;
font-weight:650;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.sidebar-link::before {
content:'';
width:5px;
height:5px;
margin-right:10px;
border-radius:50%;
background:rgba(248,250,252,.32);
transition:background .18s ease, box-shadow .18s ease;
}
.sidebar-link:hover,
.sidebar-link.active {
color:#fff;
background:linear-gradient(135deg, rgba(168,85,247,.28), rgba(217,70,239,.14));
}
.sidebar-link:hover::before,
.sidebar-link.active::before {
background:#D946EF;
box-shadow:0 0 16px rgba(217,70,239,.65);
}
.sidebar-auth {
padding-top:14px;
border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-login,
.sidebar-signup,
.sidebar-logout {
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
font-size:14px;
font-weight:800;
border:1px solid rgba(255,255,255,.10);
}
.sidebar-login,
.sidebar-logout {
color:#fff;
background:rgba(255,255,255,.035);
}
.sidebar-signup {
margin-top:10px;
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
border-color:rgba(217,70,239,.52);
}
.app-topbar {
position:fixed;
top:0;
right:0;
left:240px;
z-index:2100;
height:68px;
display:flex;
align-items:center;
gap:14px;
padding:12px 22px;
background:linear-gradient(180deg, rgba(15,17,23,.88), rgba(15,17,23,.66));
border-bottom:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(24px) saturate(145%);
}
.topbar-search {
position:relative;
flex:1;
max-width:720px;
min-width:180px;
height:44px;
display:flex;
align-items:center;
gap:10px;
padding:0 14px;
border:1px solid rgba(255,255,255,.11);
border-radius:9px;
color:rgba(248,250,252,.48);
background:rgba(255,255,255,.055);
box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.topbar-search:focus-within {
color:#fff;
border-color:rgba(168,85,247,.52);
background:rgba(255,255,255,.075);
}
.topbar-search input {
width:100%;
min-width:0;
border:0;
outline:0;
color:#fff;
background:transparent;
font-size:13px;
}
.topbar-search input::placeholder { color:rgba(248,250,252,.38); }
.topbar-search-results {
display:none;
position:absolute;
top:calc(100% + 8px);
left:0;
right:0;
overflow:hidden;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(15,17,23,.96);
box-shadow:0 22px 70px rgba(0,0,0,.42);
backdrop-filter:blur(22px);
}
.topbar-search-results > div {
display:grid;
grid-template-columns:42px minmax(0,1fr) auto;
gap:10px;
align-items:center;
padding:10px 12px;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar-search-results > div:hover { background:rgba(255,255,255,.06); }
.topbar-search-results img {
width:42px;
height:42px;
border-radius:7px;
object-fit:cover;
}
.topbar-search-results strong,
.topbar-search-results small {
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.topbar-search-results strong { font-size:13px; color:#fff; }
.topbar-search-results small { color:var(--text-muted); font-size:11px; }
.topbar-search-results em {
color:var(--gold);
font-size:11px;
font-style:normal;
font-weight:900;
}
.topbar-actions {
margin-left:auto;
display:flex;
align-items:center;
gap:9px;
}
.topbar-pill,
.topbar-primary,
.topbar-icon {
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.045);
color:#fff;
font-size:12px;
font-weight:850;
white-space:nowrap;
transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.topbar-pill,
.topbar-primary { padding:0 14px; }
.topbar-primary {
background:linear-gradient(135deg,#7c3aed,#D946EF);
border-color:rgba(217,70,239,.55);
box-shadow:0 12px 26px rgba(168,85,247,.22);
}
.topbar-icon {
position:relative;
width:38px;
border-radius:8px;
}
.topbar-icon svg { width:17px; height:17px; }
.topbar-icon b {
position:absolute;
right:-4px;
top:-5px;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
background:var(--gold);
color:#111318;
font-size:10px;
line-height:18px;
}
.topbar-pill:hover,
.topbar-primary:hover,
.topbar-icon:hover {
transform:translateY(-1px);
border-color:rgba(217,70,239,.42);
background:rgba(255,255,255,.08);
}
.topbar-primary:hover { background:linear-gradient(135deg,#8b5cf6,#e879f9); }
.app-topbar .navbar-mobile-toggle {
display:none;
flex:0 0 40px;
width:40px;
height:40px;
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.055);
}
.mobile-nav-panel {
display:none;
z-index:2050;
background:rgba(11,13,18,.97);
border-bottom:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
}
.mobile-nav-panel a {
color:rgba(248,250,252,.76);
border-radius:8px;
}
.mobile-nav-panel a:hover {
color:#fff;
background:rgba(168,85,247,.15);
}
.creative-home {
width:100%;
display:block;
max-width:1480px;
margin:0 auto;
padding:18px 24px 34px;
}
.creative-main {
display:flex;
flex-direction:column;
gap:18px;
min-width:0;
width:100%;
}
.creative-rail {
position:sticky;
top:86px;
align-self:start;
display:flex;
flex-direction:column;
gap:14px;
min-width:0;
}
.creative-hero {
position:relative;
min-height:520px;
display:flex;
align-items:center;
overflow:hidden;
border-radius:0 0 12px 12px;
background:
linear-gradient(115deg, rgba(15,17,23,.98) 0%, rgba(19,23,32,.94) 48%, rgba(55,25,74,.60) 100%),
radial-gradient(circle at 84% 22%, rgba(217,70,239,.24), transparent 34%),
radial-gradient(circle at 70% 92%, rgba(240,185,75,.12), transparent 32%),
linear-gradient(135deg,#111827,#0F1117);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.hero-glow {
position:absolute;
inset:auto -14% -28% 18%;
height:56%;
pointer-events:none;
background:radial-gradient(circle, rgba(168,85,247,.30), transparent 56%);
filter:blur(6px);
}
.creative-hero-copy {
position:relative;
z-index:2;
width:100%;
max-width:1040px;
padding:54px 40px;
}
.live-status {
display:inline-flex;
align-items:center;
gap:9px;
min-height:30px;
padding:0 11px;
margin-bottom:24px;
border:1px solid rgba(255,255,255,.11);
border-radius:999px;
color:rgba(248,250,252,.72);
background:rgba(255,255,255,.045);
font-size:12px;
font-weight:750;
}
.live-status i {
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 0 rgba(34,197,94,.48);
animation:pulse 2.4s infinite;
}
.creative-hero h1 {
font-family:var(--font-display);
font-size:clamp(54px,6.8vw,98px);
line-height:.93;
letter-spacing:-.045em;
margin:0;
}
.creative-hero h1 span {
background:linear-gradient(135deg,#A855F7,#D946EF 62%,#F0B94B);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.creative-hero p {
max-width:560px;
margin-top:18px;
color:rgba(248,250,252,.72);
font-size:17px;
line-height:1.6;
}
.creative-actions {
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}
.creative-stats {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
max-width:880px;
margin-top:42px;
}
.creative-stats div {
min-height:76px;
padding:15px;
border-radius:10px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
}
.creative-stats strong {
display:block;
font-family:var(--font-display);
font-size:26px;
line-height:1;
}
.creative-stats span {
display:block;
margin-top:8px;
color:rgba(248,250,252,.58);
font-size:12px;
}
.home-panel,
.topline-banner,
.studio-widget,
.pricing-widget,
.dashboard-widget,
.trust-strip > div,
.studio-feature-grid article,
.studio-mini-console {
border:1px solid rgba(255,255,255,.09);
background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
box-shadow:0 22px 60px rgba(0,0,0,.22);
backdrop-filter:blur(18px);
}
.home-panel {
padding:24px;
border-radius:12px;
}
.compact-panel { padding-bottom:20px; }
.panel-head,
.widget-title {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}
.panel-head h2,
.widget-title h2 {
font-family:var(--font-display);
font-size:20px;
letter-spacing:-.02em;
}
.panel-head a,
.widget-title a {
color:rgba(248,250,252,.78);
font-size:12px;
font-weight:850;
}
.panel-head a:hover,
.widget-title a:hover { color:var(--gold); }
.next-beat-grid {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:14px;
}
.next-beat-card {
min-width:0;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
background:rgba(12,14,20,.72);
cursor:pointer;
transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .18s ease, box-shadow .18s ease;
}
.next-beat-card:hover {
transform:translateY(-5px);
border-color:rgba(217,70,239,.48);
box-shadow:0 18px 42px rgba(168,85,247,.16);
}
.next-cover {
position:relative;
aspect-ratio:1.3/1;
overflow:hidden;
background:linear-gradient(135deg,rgba(168,85,247,.36),rgba(217,70,239,.22),rgba(240,185,75,.24));
}
.next-cover img {
width:100%;
height:100%;
object-fit:cover;
filter:saturate(1.05) brightness(.92);
}
.next-cover::after {
content:'';
position:absolute;
inset:auto 0 0;
height:54%;
background:linear-gradient(180deg,transparent,rgba(12,14,20,.88));
pointer-events:none;
}
.next-cover button {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) scale(.92);
z-index:1;
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:50%;
opacity:0;
color:#06060a;
background:linear-gradient(180deg,#fff,#F0B94B);
box-shadow:0 18px 44px rgba(0,0,0,.42), 0 0 0 9px rgba(240,185,75,.12);
backdrop-filter:blur(12px);
transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.next-beat-card:hover .next-cover button,
.next-beat-card:focus-within .next-cover button,
.next-beat-card.is-current .next-cover button {
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.next-beat-card.is-playing .next-cover button {
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
box-shadow:0 20px 48px rgba(168,85,247,.30), 0 0 0 9px rgba(168,85,247,.13);
}
.next-cover button svg { width:22px; height:22px; }
.next-cover button .icon-play { margin-left:3px; }
.next-cover button .icon-pause,
.next-beat-card.is-playing .next-cover button .icon-play {
display:none;
}
.next-beat-card.is-playing .next-cover button .icon-pause {
display:block;
}
.next-beat-card.is-current {
border-color:rgba(240,185,75,.42);
box-shadow:0 18px 44px rgba(240,185,75,.10);
}
.next-beat-card.is-playing .next-cover img {
filter:saturate(1.18) brightness(.76);
}
.next-beat-card h3,
.next-beat-card p,
.next-beat-card div:not(.next-cover),
.next-beat-card strong {
margin-left:14px;
margin-right:14px;
}
.next-beat-card h3 {
margin-top:13px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:14px;
font-weight:850;
}
.next-beat-card p {
margin-top:3px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:rgba(248,250,252,.56);
font-size:12px;
}
.next-beat-card div:not(.next-cover) {
display:flex;
justify-content:space-between;
gap:8px;
margin-top:14px;
color:rgba(248,250,252,.48);
font-size:11px;
}
.next-beat-card strong {
display:block;
margin-top:10px;
margin-bottom:14px;
color:#fff;
font-size:13px;
}
.demo-card .next-cover span {
position:absolute;
inset:0;
background:
radial-gradient(circle at 28% 24%, rgba(240,185,75,.35), transparent 25%),
radial-gradient(circle at 75% 34%, rgba(217,70,239,.38), transparent 25%),
linear-gradient(135deg,#1f2937,#111827);
}
.creator-strip {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
}
.mini-creator {
min-width:0;
display:grid;
grid-template-columns:42px minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:10px;
align-items:center;
padding:10px;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
background:rgba(255,255,255,.04);
}
.mini-creator:hover {
border-color:rgba(217,70,239,.42);
background:rgba(255,255,255,.065);
}
.mini-creator img,
.mini-creator > span {
grid-row:1 / 3;
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:linear-gradient(135deg,#A855F7,#D946EF);
font-weight:900;
}
.mini-creator strong,
.mini-creator small {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.mini-creator strong { font-size:12px; }
.mini-creator small { color:rgba(248,250,252,.55); font-size:11px; }
.topline-banner {
position:relative;
display:grid;
grid-template-columns:minmax(0,.86fr) minmax(420px,1fr);
gap:30px;
align-items:center;
overflow:hidden;
padding:clamp(30px,4vw,46px);
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
background:
radial-gradient(circle at 8% 8%, rgba(168,85,247,.38), transparent 34%),
radial-gradient(circle at 92% 82%, rgba(240,185,75,.16), transparent 30%),
linear-gradient(135deg, rgba(31,21,48,.96), rgba(18,21,31,.94) 52%, rgba(12,14,20,.98));
box-shadow:0 24px 80px rgba(0,0,0,.32);
}
.topline-banner::before {
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 76% 44%, rgba(168,85,247,.26), transparent 38%),
radial-gradient(circle at 88% 72%, rgba(240,185,75,.13), transparent 32%),
linear-gradient(90deg, rgba(255,255,255,.08), transparent 32%),
linear-gradient(180deg, transparent, rgba(0,0,0,.22));
opacity:.62;
}
.topline-banner::after {
content:'';
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:.10;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:screen;
}
.topline-banner > * {
position:relative;
z-index:1;
}
.topline-copy {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.section-kicker {
display:inline-flex;
align-items:center;
min-height:26px;
padding:0 10px;
border-radius:999px;
color:#F0B94B;
background:rgba(240,185,75,.10);
border:1px solid rgba(240,185,75,.18);
box-shadow:0 0 28px rgba(240,185,75,.12);
font-size:11px;
font-weight:950;
letter-spacing:.16em;
text-transform:uppercase;
}
.topline-banner h2 {
font-family:var(--font-display);
max-width:620px;
margin-top:16px;
font-size:clamp(34px,4.2vw,62px);
line-height:.98;
letter-spacing:-.03em;
}
.topline-banner h2 span {
background:linear-gradient(135deg,#A855F7,#D946EF 72%,#F0B94B);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.topline-banner p {
max-width:560px;
margin-top:18px;
color:rgba(248,250,252,.80);
font-size:16px;
line-height:1.62;
}
.topline-feature-list {
display:grid;
gap:10px;
margin-top:20px;
}
.topline-feature-list span {
display:flex;
align-items:center;
gap:10px;
color:rgba(248,250,252,.90);
font-size:13px;
font-weight:850;
}
.topline-feature-list svg {
width:18px;
height:18px;
color:#F0B94B;
flex:0 0 18px;
}
.topline-pills {
display:flex;
flex-wrap:wrap;
gap:8px;
margin:20px 0 24px;
}
.topline-pills span {
min-height:32px;
display:inline-flex;
align-items:center;
padding:0 12px;
border-radius:999px;
color:rgba(248,250,252,.78);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
font-size:12px;
font-weight:850;
}
.topline-trust-badges {
display:flex;
flex-wrap:wrap;
gap:10px 16px;
margin:20px 0 26px;
color:rgba(248,250,252,.78);
font-size:12px;
font-weight:900;
}
.topline-main-actions {
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:18px;
}
.topline-main-actions .btn,
.topline-main-actions .btn-ghost {
min-height:46px;
padding:0 18px;
}
.topline-proof-row {
display:flex;
flex-wrap:wrap;
gap:10px 18px;
margin-top:18px;
color:rgba(248,250,252,.64);
font-size:12px;
font-weight:850;
}
.topline-proof-row span {
display:inline-flex;
align-items:center;
gap:7px;
}
.topline-proof-row span::before {
content:'';
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 14px rgba(34,197,94,.52);
}
.topline-card-preview {
position:relative;
display:grid;
grid-template-columns:minmax(150px,.56fr) minmax(0,1fr);
gap:14px;
min-height:248px;
padding:14px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:
linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
rgba(9,11,18,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.30);
}
.topline-card-preview.is-playing,
.topline-card-preview:hover {
border-color:rgba(240,185,75,.26);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 30px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(168,85,247,.10);
}
.topline-card-cover {
position:relative;
overflow:hidden;
min-height:220px;
border-radius:10px;
background:#161922;
}
.topline-card-cover::after {
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg, transparent 34%, rgba(0,0,0,.74));
}
.topline-card-cover img {
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.topline-card-cover button,
.topline-icon-action {
display:flex;
align-items:center;
justify-content:center;
}
.topline-card-cover button {
position:absolute;
left:14px;
bottom:14px;
z-index:1;
width:46px;
min-height:46px;
border:0;
border-radius:999px;
color:#fff;
background:linear-gradient(135deg,#8b5cf6,#D946EF);
box-shadow:0 12px 30px rgba(168,85,247,.38);
}
.topline-card-cover button svg { width:20px; height:20px; margin-left:2px; }
.topline-card-cover button .icon-pause,
.topline-card-preview.is-playing .topline-card-cover button .icon-play {
display:none;
}
.topline-card-preview.is-playing .topline-card-cover button .icon-pause {
display:block;
margin-left:0;
}
.topline-card-preview.is-playing .topline-card-cover button {
background:linear-gradient(135deg,#F0B94B,#fff1b8);
color:#120b1f;
box-shadow:0 14px 36px rgba(240,185,75,.32);
}
.topline-card-cover,
.topline-card-body {
position:relative;
z-index:1;
}
.topline-card-body {
min-width:0;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:14px;
padding:8px 6px 8px 0;
}
.topline-card-heading {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}
.topline-card-heading span,
.topline-card-heading strong,
.topline-card-heading small {
display:block;
min-width:0;
}
.topline-card-heading strong {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-family:var(--font-display);
font-size:24px;
line-height:1.05;
}
.topline-card-heading small {
margin-top:6px;
color:rgba(248,250,252,.56);
font-size:13px;
}
.topline-card-heading em {
flex:0 0 auto;
padding:7px 9px;
border-radius:999px;
color:#F0B94B;
background:rgba(240,185,75,.09);
border:1px solid rgba(240,185,75,.16);
font-style:normal;
font-size:11px;
font-weight:900;
}
.topline-spectrum-shell {
display:block;
padding:0;
border-radius:0;
background:transparent;
border:0;
box-shadow:none;
}
.topline-preview-wave {
position:relative;
width:100%;
height:58px;
display:block;
padding:0;
margin:1px 0 0;
border-radius:8px;
overflow:hidden;
isolation:isolate;
background:transparent;
}
.topline-preview-canvas {
position:relative;
z-index:1;
display:block;
width:100%;
height:58px;
opacity:.92;
}
.topline-preview-wave.is-live .topline-preview-canvas {
opacity:1;
}
.topline-mini-tags {
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:-4px;
}
.topline-mini-tags span {
min-height:25px;
display:inline-flex;
align-items:center;
padding:0 9px;
border-radius:999px;
color:rgba(248,250,252,.70);
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
font-size:10.5px;
font-weight:850;
}
.topline-session-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:11px 12px;
border-radius:10px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
}
.topline-session-row span,
.topline-session-row small {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.topline-session-row span {
display:flex;
align-items:center;
gap:8px;
color:rgba(248,250,252,.86);
font-size:13px;
font-weight:850;
}
.topline-session-row b {
width:8px;
height:8px;
flex:0 0 auto;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 18px rgba(34,197,94,.72);
}
.topline-session-row small {
color:rgba(248,250,252,.48);
font-size:12px;
}
.topline-card-actions {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.topline-icon-action {
position:relative;
min-height:44px;
gap:8px;
border-radius:10px;
color:#fff;
background:rgba(168,85,247,.16);
border:1px solid rgba(168,85,247,.32);
}
.topline-icon-action span {
font-size:12px;
font-weight:900;
line-height:1;
}
.topline-icon-action.is-buy {
background:linear-gradient(135deg, rgba(168,85,247,.88), rgba(217,70,239,.88));
border-color:rgba(217,70,239,.42);
box-shadow:0 14px 34px rgba(168,85,247,.24);
}
.topline-preload-audio {
display:none;
}
.topline-icon-action svg { width:18px; height:18px; }
.topline-icon-action:hover {
transform:translateY(-1px);
border-color:rgba(240,185,75,.42);
}
.topline-icon-action[data-tooltip]::after {
content:attr(data-tooltip);
position:absolute;
left:50%;
bottom:calc(100% + 10px);
z-index:5;
transform:translate(-50%, 4px);
opacity:0;
pointer-events:none;
white-space:nowrap;
padding:8px 10px;
border-radius:8px;
color:#fff;
background:rgba(7,9,14,.94);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 14px 34px rgba(0,0,0,.34);
font-size:12px;
font-weight:850;
transition:.18s ease;
}
.topline-icon-action[data-tooltip]:hover::after,
.topline-icon-action[data-tooltip]:focus-visible::after {
transform:translate(-50%,0);
opacity:1;
}
.mini-wave,
.studio-wave {
display:flex;
align-items:center;
gap:4px;
}
.mini-wave i,
.studio-wave i {
display:block;
width:4px;
border-radius:999px;
background:linear-gradient(180deg,#D946EF,#7c3aed);
opacity:.72;
}
.mini-wave i:nth-child(1), .studio-wave i:nth-child(1) { height:18px; }
.mini-wave i:nth-child(2), .studio-wave i:nth-child(2) { height:34px; }
.mini-wave i:nth-child(3), .studio-wave i:nth-child(3) { height:22px; }
.mini-wave i:nth-child(4), .studio-wave i:nth-child(4) { height:46px; }
.mini-wave i:nth-child(5), .studio-wave i:nth-child(5) { height:26px; }
.mini-wave i:nth-child(6), .studio-wave i:nth-child(6) { height:38px; }
.mini-wave i:nth-child(7), .studio-wave i:nth-child(7) { height:20px; }
.studio-widget,
.pricing-widget,
.dashboard-widget {
padding:16px;
border-radius:12px;
}
.studio-track {
display:grid;
grid-template-columns:58px minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:10px;
border-radius:10px;
background:rgba(0,0,0,.16);
border:1px solid rgba(255,255,255,.07);
}
.studio-track img {
width:58px;
height:58px;
border-radius:8px;
object-fit:cover;
}
.studio-track strong,
.studio-track span {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.studio-track strong { font-size:13px; }
.studio-track span { color:rgba(248,250,252,.55); font-size:11px; }
.studio-track a {
min-height:34px;
display:flex;
align-items:center;
padding:0 10px;
border-radius:7px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.09);
font-size:11px;
font-weight:850;
}
.studio-widget .studio-wave {
height:54px;
justify-content:space-between;
margin:13px 0;
padding:0 4px;
}
.studio-widget .studio-wave i { width:5px; flex:1 1 auto; max-width:9px; }
.recording-chip {
display:flex;
align-items:center;
gap:8px;
min-height:42px;
padding:0 12px;
border-radius:9px;
color:#fecaca;
background:rgba(239,68,68,.10);
border:1px solid rgba(239,68,68,.20);
font-size:12px;
font-weight:850;
}
.recording-chip span {
width:10px;
height:10px;
border-radius:50%;
background:#ef4444;
box-shadow:0 0 16px rgba(239,68,68,.7);
}
.studio-controls {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:8px;
margin-top:12px;
}
.studio-controls button {
min-height:54px;
border:1px solid rgba(255,255,255,.08);
border-radius:9px;
color:rgba(248,250,252,.76);
background:rgba(255,255,255,.045);
font-size:11px;
font-weight:850;
}
.studio-controls button:hover {
color:#fff;
border-color:rgba(217,70,239,.42);
}
.studio-controls .record-btn {
position:relative;
min-height:58px;
border-radius:999px;
background:#fff;
}
.studio-controls .record-btn::before {
content:'';
position:absolute;
inset:18px;
border-radius:8px;
background:#ef4444;
}
.topline-quota {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:3px 10px;
align-items:center;
margin-top:12px;
padding:12px;
border-radius:10px;
background:linear-gradient(135deg,rgba(168,85,247,.32),rgba(217,70,239,.14));
border:1px solid rgba(217,70,239,.20);
}
.topline-quota strong,
.topline-quota span { min-width:0; }
.topline-quota strong { font-size:12px; }
.topline-quota span { color:rgba(248,250,252,.64); font-size:11px; }
.topline-quota a {
grid-column:2;
grid-row:1 / 3;
min-height:32px;
display:flex;
align-items:center;
padding:0 10px;
border-radius:7px;
color:#fff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
font-size:11px;
font-weight:850;
}
.plan-switch {
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
padding:4px;
border-radius:9px;
background:rgba(255,255,255,.06);
}
.plan-switch span {
min-height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:7px;
color:rgba(248,250,252,.72);
font-size:11px;
font-weight:850;
}
.plan-switch span:first-child {
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
}
.mini-plans {
display:grid;
grid-template-columns:1fr;
gap:9px;
margin-top:12px;
}
.mini-plans article {
padding:13px;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
background:rgba(255,255,255,.04);
}
.mini-plans article.hot { border-color:rgba(217,70,239,.35); }
.mini-plans article.gold { border-color:rgba(240,185,75,.42); }
.mini-plans strong,
.mini-plans span,
.mini-plans small { display:block; }
.mini-plans strong { font-size:14px; }
.mini-plans span { margin-top:4px; color:rgba(248,250,252,.72); }
.mini-plans small { margin-top:8px; color:rgba(248,250,252,.50); font-size:11px; }
.dash-metrics {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.dash-metrics div {
min-width:0;
padding:12px;
border-radius:9px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.075);
}
.dash-metrics span,
.dash-metrics strong,
.dash-metrics small { display:block; }
.dash-metrics span { color:rgba(248,250,252,.54); font-size:11px; }
.dash-metrics strong {
margin-top:7px;
font-family:var(--font-display);
font-size:22px;
line-height:1;
}
.dash-metrics small { margin-top:8px; color:#4ade80; font-size:10px; }
.chart-glow {
height:122px;
margin-top:12px;
border-radius:10px;
background:
linear-gradient(180deg,rgba(15,17,23,.06),rgba(15,17,23,.84)),
radial-gradient(circle at 70% 28%,rgba(217,70,239,.40),transparent 28%),
linear-gradient(135deg,transparent 5%, rgba(168,85,247,.55) 6%, transparent 7%, transparent 24%, rgba(217,70,239,.50) 25%, transparent 26%, transparent 46%, rgba(240,185,75,.42) 47%, transparent 48%);
border:1px solid rgba(255,255,255,.07);
}
.trust-strip {
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
padding:0 18px 32px;
}
.trust-strip > div {
min-height:92px;
padding:18px;
border-radius:12px;
}
.trust-strip strong,
.trust-strip span {
display:block;
}
.trust-strip strong {
font-size:14px;
color:#fff;
}
.trust-strip span {
margin-top:7px;
color:rgba(248,250,252,.58);
font-size:12px;
line-height:1.45;
}
.studio-page {
max-width:1320px;
margin:0 auto;
padding:42px 24px 90px;
}
.studio-page-hero,
.next-page-hero {
position:relative;
overflow:hidden;
border-radius:12px;
padding:54px;
border:1px solid rgba(255,255,255,.09);
background:
radial-gradient(circle at 76% 26%, rgba(217,70,239,.26), transparent 30%),
linear-gradient(135deg, rgba(168,85,247,.16), rgba(19,23,32,.88) 44%, rgba(15,17,23,.96));
}
.studio-page-hero h1,
.next-page-hero h1 {
font-family:var(--font-display);
font-size:clamp(46px,7vw,88px);
line-height:.95;
letter-spacing:-.045em;
}
.studio-page-hero p,
.next-page-hero p {
max-width:680px;
margin-top:18px;
color:rgba(248,250,252,.68);
font-size:16px;
line-height:1.7;
}
.studio-feature-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-top:18px;
}
.studio-feature-grid article {
padding:24px;
border-radius:12px;
}
.studio-feature-grid strong {
display:inline-flex;
min-width:44px;
height:38px;
align-items:center;
justify-content:center;
padding:0 12px;
border-radius:999px;
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
font-weight:900;
}
.studio-feature-grid h2 {
margin-top:18px;
font-family:var(--font-display);
font-size:24px;
}
.studio-feature-grid p {
margin-top:8px;
color:rgba(248,250,252,.62);
line-height:1.7;
}
.studio-mini-console {
margin-top:24px;
padding:18px;
border-radius:12px;
}
.studio-mini-console .studio-wave {
height:64px;
justify-content:center;
}
.studio-mini-console .studio-wave i { width:8%; max-width:14px; }
body.app-shell .simple-page-card,
body.app-shell .price-card,
body.app-shell .detail-tile,
body.app-shell .license-matrix,
body.app-shell .filters-panel,
body.app-shell .beats-tracklist-wrap,
body.app-shell .beat-card,
body.app-shell .beatmaker-card {
background:linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.035));
border-color:rgba(255,255,255,.09);
}
body.app-shell .price-card.featured {
background:linear-gradient(180deg, rgba(168,85,247,.20), rgba(217,70,239,.07));
border-color:rgba(217,70,239,.34);
}
body.app-shell .price-card.gold-card {
background:linear-gradient(180deg, rgba(240,185,75,.16), rgba(255,255,255,.035));
border-color:rgba(240,185,75,.34);
}
body.app-shell .price-tag,
body.app-shell .price-value,
body.app-shell .section-link,
body.app-shell .beat-card-price,
body.app-shell .beat-license-price,
body.app-shell .payment-strip span {
color:var(--gold);
}
body.app-shell .beat-buy-btn,
body.app-shell .footer-actions a:first-child {
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
border-color:rgba(217,70,239,.52);
}
body.app-shell .kicker {
color:var(--gold);
}
@media(max-width:1280px) {
.creative-rail {
position:static;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:stretch;
}
.next-beat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:1120px) {
.creator-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
.creative-rail { grid-template-columns:1fr; }
.trust-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
.producer-showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.music-styles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.seller-growth-section { grid-template-columns:1fr; }
.seller-growth-media { min-height:300px; }
.seller-growth-media img { min-height:300px; }
.subscribe-section { grid-template-columns:1fr; }
}
@media(max-width:980px) {
body.app-shell #main-content,
body.app-shell .footer,
.trust-strip {
width:auto;
margin-left:0;
}
.app-sidebar { display:none; }
.app-topbar {
left:0;
height:66px;
padding:10px 12px;
}
.app-topbar .navbar-mobile-toggle { display:flex; }
.topbar-actions .topbar-pill,
.topbar-actions .topbar-primary { display:none; }
.mobile-nav-panel.is-open {
display:block;
position:fixed;
top:66px;
left:0;
right:0;
max-height:calc(100vh - 66px);
overflow:auto;
padding:14px;
}
.creative-home { padding:12px 12px 28px; }
.creative-hero {
min-height:620px;
}
.creative-hero-copy { padding:40px 24px; }
.creative-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.next-beat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.topline-banner { grid-template-columns:1fr; }
.studio-feature-grid,
.pricing-grid { grid-template-columns:1fr; }
.studio-page-hero,
.next-page-hero { padding:34px 24px; }
body.app-shell #beatlink-player { left:0; }
}
@media(min-width:981px) {
body.app-shell #beatlink-player { left:240px; }
}
@media(max-width:720px) {
.creative-hero h1 { font-size:clamp(46px,14vw,72px); }
.creative-hero p { font-size:15px; }
.next-beat-grid,
.creator-strip,
.trust-strip,
.producer-showcase-grid,
.music-styles-grid,
.faq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.creative-actions .btn-lg,
.creative-actions .btn-ghost {
width:100%;
justify-content:center;
}
.topline-card-preview { grid-template-columns:1fr; }
.topline-card-body { padding:4px 2px 2px; }
.seller-benefits-grid { grid-template-columns:1fr; }
.seller-growth-section { padding:42px 20px; }
.topline-main-actions .btn,
.topline-main-actions .btn-ghost {
flex:1 1 180px;
justify-content:center;
}
.studio-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
.studio-controls .record-btn { grid-column:1 / -1; width:64px; justify-self:center; }
}
@media(max-width:540px) {
body.app-shell #main-content { padding-top:66px; }
.topbar-search { height:42px; padding:0 10px; }
.topbar-actions { gap:6px; }
.topbar-icon { width:34px; min-height:34px; }
.creative-home { padding-left:10px; padding-right:10px; }
.creative-hero { min-height:590px; }
.creative-hero-copy { padding:30px 18px; }
.live-status { max-width:100%; }
.creative-stats,
.next-beat-grid,
.creator-strip,
.trust-strip,
.dash-metrics,
.producer-showcase-grid,
.music-styles-grid,
.faq-grid { grid-template-columns:1fr; }
.home-panel,
.topline-banner,
.studio-widget,
.pricing-widget,
.dashboard-widget { padding:16px; }
.topline-banner h2 { font-size:36px; }
.topline-banner p { font-size:14px; }
.topline-feature-list span,
.topline-proof-row {
font-size:12px;
}
.topline-trust-badges {
margin-bottom:18px;
}
.seller-growth-copy h2 { font-size:38px; }
.seller-growth-copy p { font-size:15px; }
.seller-growth-media,
.seller-growth-media img { min-height:240px; }
.topline-card-heading { flex-direction:column; }
.topline-card-cover { min-height:210px; }
.topline-session-row { align-items:flex-start; flex-direction:column; }
.airbit-producer-card { min-height:250px; }
.subscribe-section { padding:22px; }
.subscribe-section form { flex-direction:column; }
.studio-track { grid-template-columns:48px minmax(0,1fr); }
.studio-track a { grid-column:1 / -1; justify-content:center; }
.studio-page { padding:22px 12px 80px; }
}
/* ============================================================
BeatStars-style header pass
============================================================ */
body.app-shell #main-content {
margin-left:0;
padding-top:74px;
}
body.app-shell .footer {
margin-left:0;
}
body.app-shell #beatlink-player {
left:0 !important;
}
.beatstars-header {
position:fixed;
top:0;
left:0;
right:0;
z-index:2300;
height:74px;
display:flex;
align-items:center;
gap:20px;
padding:0 24px;
background:rgba(9,11,16,.92);
border-bottom:1px solid rgba(255,255,255,.09);
box-shadow:0 16px 60px rgba(0,0,0,.34);
backdrop-filter:blur(24px) saturate(150%);
}
.beatstars-brand {
display:flex;
align-items:center;
flex:0 0 auto;
color:#fff;
font-family:var(--font-display);
font-size:21px;
font-weight:850;
letter-spacing:-.02em;
}
.brand-logo {
display:block;
width:145px;
height:auto;
max-height:44px;
object-fit:contain;
filter:drop-shadow(0 0 12px rgba(255,255,255,.16));
}
.beatstars-nav {
display:flex;
align-items:center;
gap:2px;
height:100%;
flex:0 0 auto;
}
.beatstars-nav-item {
position:relative;
height:100%;
display:flex;
align-items:center;
}
.beatstars-nav-item::after {
content:'';
position:absolute;
left:-10px;
right:-10px;
top:100%;
height:14px;
}
.beatstars-nav-trigger {
height:42px;
display:flex;
align-items:center;
gap:5px;
padding:0 10px;
border:0;
border-radius:8px;
color:rgba(248,250,252,.72);
background:transparent;
font-size:13px;
font-weight:800;
white-space:nowrap;
transition:color .18s ease, background .18s ease;
}
.beatstars-nav-trigger svg {
width:14px;
height:14px;
opacity:.64;
}
.beatstars-nav-item:hover .beatstars-nav-trigger,
.beatstars-nav-item.active .beatstars-nav-trigger {
color:#fff;
background:rgba(255,255,255,.06);
}
.beatstars-dropdown {
position:absolute;
top:calc(100% - 8px);
left:0;
min-width:224px;
padding:8px;
opacity:0;
visibility:hidden;
transform:translateY(6px);
pointer-events:none;
border:1px solid rgba(255,255,255,.10);
border-radius:10px;
background:rgba(15,17,23,.96);
box-shadow:0 22px 70px rgba(0,0,0,.46);
backdrop-filter:blur(22px);
transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.beatstars-dropdown::before {
content:'';
position:absolute;
left:0;
right:0;
top:-12px;
height:12px;
}
.beatstars-nav-item:hover .beatstars-dropdown,
.beatstars-nav-item:focus-within .beatstars-dropdown,
.beatstars-nav-item.is-open .beatstars-dropdown {
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
transition-delay:0s;
}
.beatstars-nav-item.is-open .beatstars-nav-trigger {
color:#fff;
background:rgba(255,255,255,.06);
}
.beatstars-dropdown a {
display:flex;
align-items:center;
min-height:38px;
padding:0 11px;
border-radius:7px;
color:rgba(248,250,252,.72);
font-size:13px;
font-weight:760;
white-space:nowrap;
}
.beatstars-dropdown a:hover,
.beatstars-dropdown a.active {
color:#fff;
background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(217,70,239,.12));
}
.beatstars-search {
position:relative;
flex:1;
max-width:520px;
min-width:220px;
height:42px;
display:flex;
align-items:center;
gap:10px;
padding:0 14px;
margin-left:auto;
color:rgba(248,250,252,.46);
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
background:rgba(255,255,255,.055);
}
.beatstars-search:focus-within {
color:#fff;
border-color:rgba(168,85,247,.55);
background:rgba(255,255,255,.075);
}
.beatstars-search svg {
width:17px;
height:17px;
flex:0 0 auto;
}
.beatstars-search input {
width:100%;
min-width:0;
border:0;
outline:0;
color:#fff;
background:transparent;
font-size:13px;
}
.beatstars-search input::placeholder {
color:rgba(248,250,252,.38);
}
.beatstars-actions {
display:flex;
align-items:center;
gap:8px;
flex:0 0 auto;
}
.account-menu {
position:relative;
}
.account-trigger {
min-height:38px;
display:flex;
align-items:center;
gap:7px;
padding:0 11px;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
color:rgba(248,250,252,.82);
background:rgba(255,255,255,.055);
font-size:13px;
font-weight:850;
}
.account-trigger svg {
width:14px;
height:14px;
opacity:.66;
}
.account-menu:hover .account-trigger,
.account-menu:focus-within .account-trigger {
color:#fff;
border-color:rgba(217,70,239,.44);
background:rgba(255,255,255,.08);
}
.account-dropdown {
position:absolute;
top:calc(100% + 8px);
right:0;
min-width:210px;
padding:8px;
opacity:0;
visibility:hidden;
transform:translateY(6px);
pointer-events:none;
border:1px solid rgba(255,255,255,.10);
border-radius:10px;
background:rgba(15,17,23,.97);
box-shadow:0 22px 70px rgba(0,0,0,.46);
backdrop-filter:blur(22px);
transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
max-height:min(560px,calc(100vh - 86px));
overflow-y:auto;
}
.account-dropdown::before {
content:"";
position:absolute;
left:0;
right:0;
top:-10px;
height:10px;
}
.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown,
.account-menu.is-open .account-dropdown {
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
transition-delay:0s;
}
.account-dropdown a,
.account-dropdown button {
width:100%;
min-height:38px;
display:flex;
align-items:center;
padding:0 11px;
border:0;
border-radius:7px;
color:rgba(248,250,252,.76);
background:transparent;
font-size:13px;
font-weight:780;
text-align:left;
}
.account-dropdown a.active {
color:#7eafff;
background:rgba(0,106,255,.12);
}
.account-dropdown-identity {
display:grid;
gap:3px;
margin:0 4px 7px;
padding:7px 8px 11px;
border-bottom:1px solid rgba(255,255,255,.09);
}
.account-dropdown-identity strong {
overflow:hidden;
color:#fff;
font-size:13px;
text-overflow:ellipsis;
white-space:nowrap;
}
.account-dropdown-identity span {
color:rgba(248,250,252,.42);
font-size:10px;
font-weight:750;
text-transform:uppercase;
}
.account-dropdown-separator {
height:1px;
margin:7px 5px;
background:rgba(255,255,255,.09);
}
.account-dropdown form { margin:0; }
.account-dropdown .account-logout { color:#ff8b8b; gap:9px; }
.account-dropdown .account-logout svg { width:16px; height:16px; }
.account-dropdown a:hover,
.account-dropdown button:hover {
color:#fff;
background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(217,70,239,.12));
}
.account-dropdown button {
cursor:pointer;
}
.header-link {
color:rgba(248,250,252,.76);
font-size:13px;
font-weight:820;
white-space:nowrap;
}
.header-link:hover { color:#fff; }
.header-sell,
.header-icon {
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
color:#fff;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.055);
transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.header-sell {
padding:0 14px;
background:linear-gradient(135deg,#7c3aed,#D946EF);
border-color:rgba(217,70,239,.55);
font-size:13px;
font-weight:880;
}
.header-icon {
position:relative;
width:38px;
}
.header-icon svg {
width:17px;
height:17px;
}
.header-icon b {
position:absolute;
top:-5px;
right:-5px;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
color:#111318;
background:#F0B94B;
font-size:10px;
line-height:18px;
text-align:center;
}
.header-sell:hover,
.header-icon:hover {
transform:translateY(-1px);
border-color:rgba(217,70,239,.46);
background:rgba(255,255,255,.085);
}
.header-sell:hover {
background:linear-gradient(135deg,#8b5cf6,#e879f9);
}
.beatstars-header .navbar-mobile-toggle {
display:none;
flex:0 0 38px;
width:38px;
height:38px;
}
.beat-card-cta-row,
.next-card-actions {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:14px;
}
.beat-action-btn {
position:relative;
min-height:36px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:0 12px;
border-radius:8px;
border:1px solid rgba(255,255,255,.11);
color:#fff;
background:rgba(255,255,255,.055);
font-size:12px;
font-weight:900;
white-space:nowrap;
transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.beat-action-btn svg {
width:17px;
height:17px;
flex:0 0 17px;
}
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.beat-action-btn[data-tooltip]::after {
content:attr(data-tooltip);
position:absolute;
left:50%;
bottom:calc(100% + 9px);
z-index:20;
max-width:220px;
padding:7px 9px;
border-radius:7px;
color:#fff;
background:rgba(9,11,16,.96);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 12px 30px rgba(0,0,0,.35);
font-size:11px;
font-weight:800;
line-height:1.25;
opacity:0;
pointer-events:none;
white-space:nowrap;
transform:translate(-50%,4px);
transition:opacity .16s ease, transform .16s ease;
}
.beat-action-btn[data-tooltip]::before {
content:'';
position:absolute;
left:50%;
bottom:calc(100% + 4px);
z-index:21;
width:9px;
height:9px;
opacity:0;
pointer-events:none;
background:rgba(9,11,16,.96);
border-right:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
transform:translate(-50%,4px) rotate(45deg);
transition:opacity .16s ease, transform .16s ease;
}
.beat-action-btn[data-tooltip]:hover::after,
.beat-action-btn[data-tooltip]:focus-visible::after,
.beat-action-btn[data-tooltip]:hover::before,
.beat-action-btn[data-tooltip]:focus-visible::before {
opacity:1;
transform:translate(-50%,0);
}
.beat-action-btn[data-tooltip]:hover::before,
.beat-action-btn[data-tooltip]:focus-visible::before {
transform:translate(-50%,0) rotate(45deg);
}
.next-beat-card,
.beat-card,
.beats-tracklist-wrap {
overflow:visible;
}
.beat-track-row,
.beat-card-cta-row,
.next-card-actions,
.beat-actions-cell {
position:relative;
}
.beat-track-row:hover,
.beat-card:hover,
.next-beat-card:hover {
z-index:4;
}
.beat-action-btn:hover {
transform:translateY(-1px);
color:#fff;
border-color:rgba(217,70,239,.45);
background:rgba(168,85,247,.16);
}
.beat-action-btn.buy {
background:linear-gradient(135deg,#7c3aed,#D946EF);
border-color:rgba(217,70,239,.55);
}
.beat-action-btn.topline {
border-color:rgba(240,185,75,.30);
background:rgba(240,185,75,.08);
}
.beat-action-btn.topline:hover {
background:rgba(240,185,75,.14);
border-color:rgba(240,185,75,.52);
}
.beat-actions-cell .beat-action-btn {
min-height:30px;
padding:0 10px;
}
.next-beat-card .next-card-actions {
margin-left:14px;
margin-right:14px;
margin-bottom:14px;
}
.next-beat-card .next-card-actions a {
margin:0;
}
.empty-market-state {
grid-column:1 / -1;
min-height:170px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:9px;
padding:28px;
border:1px dashed rgba(255,255,255,.16);
border-radius:12px;
color:rgba(248,250,252,.68);
text-align:center;
background:rgba(255,255,255,.035);
}
.empty-market-state strong {
color:#fff;
font-family:var(--font-display);
font-size:22px;
letter-spacing:-.02em;
}
.empty-market-state span {
max-width:520px;
line-height:1.6;
}
.empty-market-state a {
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:4px;
padding:0 14px;
border-radius:8px;
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
font-size:13px;
font-weight:900;
}
.producer-showcase-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.airbit-producer-card {
position:relative;
min-height:280px;
display:flex;
flex-direction:column;
justify-content:flex-end;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:
radial-gradient(circle at 26% 22%,rgba(168,85,247,.32),transparent 30%),
radial-gradient(circle at 76% 16%,rgba(240,185,75,.18),transparent 28%),
linear-gradient(135deg,#171b25,#0F1117);
box-shadow:0 22px 60px rgba(0,0,0,.24);
transition:transform .24s ease,border-color .18s ease,box-shadow .18s ease;
}
.airbit-producer-card:hover {
transform:translateY(-5px);
border-color:rgba(217,70,239,.42);
box-shadow:0 26px 70px rgba(168,85,247,.18);
}
.producer-cover {
position:absolute;
inset:0;
opacity:.52;
}
.producer-cover img {
width:100%;
height:100%;
object-fit:cover;
filter:saturate(1.05) brightness(.72);
}
.airbit-producer-card::after {
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(15,17,23,.10),rgba(15,17,23,.34) 42%,rgba(15,17,23,.94));
}
.producer-avatar {
position:absolute;
top:18px;
left:18px;
z-index:2;
width:70px;
height:70px;
border-radius:50%;
border:3px solid rgba(15,17,23,.86);
background:linear-gradient(135deg,#7c3aed,#D946EF);
box-shadow:0 14px 34px rgba(0,0,0,.36);
}
.producer-avatar img,
.producer-avatar > span {
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
object-fit:cover;
color:#fff;
font-size:26px;
font-weight:950;
}
.producer-avatar em {
position:absolute;
right:-4px;
bottom:2px;
width:24px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#0F1117;
background:#F0B94B;
border:3px solid #111318;
font-style:normal;
}
.producer-avatar em svg {
width:15px;
height:15px;
}
.producer-card-body {
position:relative;
z-index:2;
padding:96px 18px 18px;
}
.producer-card-body strong,
.producer-card-body span {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.producer-card-body strong {
font-family:var(--font-display);
font-size:24px;
line-height:1;
letter-spacing:-.03em;
}
.producer-card-body span {
margin-top:7px;
color:rgba(248,250,252,.64);
font-size:13px;
}
.producer-card-body div {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-top:16px;
}
.producer-card-body small {
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
color:rgba(248,250,252,.70);
background:rgba(255,255,255,.055);
font-size:11px;
font-weight:800;
text-align:center;
}
.music-styles-section .panel-head {
align-items:flex-start;
}
.music-styles-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.music-style-card {
position:relative;
min-height:180px;
display:flex;
flex-direction:column;
justify-content:flex-end;
overflow:hidden;
padding:18px;
border:1px solid rgba(255,255,255,.09);
border-radius:12px;
background:
radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--style-tone), transparent 58%), transparent 34%),
linear-gradient(160deg,rgba(255,255,255,.060),rgba(255,255,255,.030));
transition:transform .22s ease,border-color .18s ease;
}
.music-style-card::before {
content:'';
position:absolute;
inset:auto -30% -40% 20%;
height:70%;
background:radial-gradient(circle, color-mix(in srgb, var(--style-tone), transparent 52%), transparent 60%);
filter:blur(10px);
}
.music-style-card:hover {
transform:translateY(-4px);
border-color:color-mix(in srgb, var(--style-tone), white 18%);
}
.music-style-card span,
.music-style-card strong,
.music-style-card p {
position:relative;
z-index:1;
}
.music-style-card span {
color:var(--style-tone);
font-size:11px;
font-weight:950;
letter-spacing:.10em;
text-transform:uppercase;
}
.music-style-card strong {
margin-top:8px;
color:#fff;
font-family:var(--font-display);
font-size:26px;
line-height:1;
letter-spacing:-.03em;
}
.music-style-card p {
margin-top:9px;
color:rgba(248,250,252,.62);
font-size:12px;
line-height:1.5;
}
.seller-growth-section {
display:grid;
grid-template-columns:minmax(320px,.9fr) minmax(0,1fr);
gap:clamp(32px,4.5vw,60px);
align-items:center;
padding:clamp(58px,6vw,86px) clamp(24px,7vw,112px);
color:#fff;
background:#030303;
}
.seller-growth-media {
position:relative;
overflow:hidden;
min-height:360px;
border-radius:2px;
background:#160426;
}
.seller-growth-media::after {
content:'';
position:absolute;
inset:0;
background:
linear-gradient(135deg, rgba(168,85,247,.78), rgba(124,58,237,.44) 48%, rgba(217,70,239,.28)),
linear-gradient(180deg, transparent, rgba(3,3,3,.16));
mix-blend-mode:multiply;
pointer-events:none;
}
.seller-growth-media img {
width:100%;
height:100%;
min-height:360px;
object-fit:cover;
filter:saturate(.95) contrast(1.08) brightness(.92);
}
.seller-growth-copy {
max-width:720px;
}
.seller-growth-copy h2 {
margin:0;
font-family:var(--font-display);
font-size:clamp(42px,5.3vw,78px);
line-height:1.02;
letter-spacing:-.045em;
}
.seller-growth-copy p {
max-width:760px;
margin:18px 0 0;
color:rgba(248,250,252,.86);
font-size:18px;
line-height:1.55;
font-weight:650;
}
.seller-benefits-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 28px;
margin-top:24px;
}
.seller-benefits-grid span {
display:flex;
align-items:flex-start;
gap:10px;
color:rgba(255,255,255,.92);
font-size:14px;
font-weight:850;
line-height:1.35;
}
.seller-benefits-grid i {
position:relative;
top:2px;
width:14px;
height:14px;
flex:0 0 14px;
border-radius:4px;
background:#4ff0cf;
}
.seller-benefits-grid i::after {
content:'';
position:absolute;
left:4px;
top:3px;
width:5px;
height:7px;
border-right:2px solid #02110d;
border-bottom:2px solid #02110d;
transform:rotate(45deg);
}
.seller-growth-actions {
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}
.seller-growth-actions .btn,
.seller-growth-actions .btn-ghost {
min-height:46px;
padding:0 22px;
}
.seller-growth-actions .btn-ghost {
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.18);
color:#fff;
}
.subscribe-section {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.62fr);
gap:22px;
align-items:center;
padding:34px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:
radial-gradient(circle at 82% 18%,rgba(217,70,239,.28),transparent 32%),
linear-gradient(135deg,rgba(168,85,247,.18),rgba(15,17,23,.92));
box-shadow:0 24px 70px rgba(0,0,0,.26);
}
.subscribe-section h2 {
max-width:720px;
font-family:var(--font-display);
font-size:clamp(30px,4vw,54px);
line-height:1;
letter-spacing:-.04em;
}
.subscribe-section p {
max-width:640px;
margin-top:12px;
color:rgba(248,250,252,.66);
line-height:1.7;
}
.subscribe-section form {
display:flex;
gap:8px;
padding:7px;
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
background:rgba(255,255,255,.055);
}
.subscribe-section input {
flex:1;
min-width:0;
border:0;
outline:0;
color:#fff;
background:transparent;
padding:0 10px;
}
.subscribe-section input::placeholder {
color:rgba(248,250,252,.42);
}
.subscribe-section button {
min-height:42px;
padding:0 16px;
border:0;
border-radius:8px;
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
font-weight:900;
white-space:nowrap;
}
.home-faq {
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
padding:72px max(24px, calc((100vw - 1280px) / 2)) 86px;
background:#160426;
}
.home-faq h2 {
margin:0 0 48px;
text-align:center;
color:#fff;
font-family:var(--font-display);
font-size:clamp(40px,5vw,68px);
line-height:.96;
letter-spacing:-.045em;
}
.faq-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.faq-grid details {
overflow:hidden;
border:0;
border-radius:4px;
background:#020202;
}
.faq-grid summary {
position:relative;
min-height:80px;
display:flex;
align-items:center;
padding:0 74px 0 28px;
color:#fff;
font-size:19px;
font-weight:500;
line-height:1.35;
cursor:pointer;
list-style:none;
}
.faq-grid summary::-webkit-details-marker {
display:none;
}
.faq-grid summary::after {
content:'';
position:absolute;
right:28px;
top:50%;
width:32px;
height:32px;
border-radius:50%;
background:rgba(255,255,255,.07);
transform:translateY(-50%);
}
.faq-grid summary::before {
content:'';
position:absolute;
right:39px;
top:50%;
z-index:1;
width:10px;
height:10px;
border-right:2px solid #D946EF;
border-bottom:2px solid #D946EF;
transform:translateY(-64%) rotate(45deg);
transition:transform .18s ease;
}
.faq-grid details[open] summary::before {
transform:translateY(-34%) rotate(225deg);
}
.faq-grid p {
padding:0 28px 24px;
color:rgba(255,255,255,.68);
font-size:14px;
line-height:1.7;
}
.faq-ask-btn {
width:max-content;
min-height:54px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:48px auto 0;
padding:0 24px;
border-radius:5px;
color:#fff;
background:linear-gradient(135deg,#7c3aed,#a100ff);
font-size:15px;
font-weight:900;
box-shadow:0 18px 42px rgba(124,58,237,.28);
}
.faq-ask-btn svg {
width:18px;
height:18px;
}
.faq-ask-btn:hover {
color:#fff;
background:linear-gradient(135deg,#8b5cf6,#D946EF);
}
.studio-entry-panel {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
gap:18px;
align-items:stretch;
margin-top:18px;
}
.studio-beat-demo,
.studio-note-card {
border:1px solid rgba(255,255,255,.09);
border-radius:12px;
background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
box-shadow:0 22px 60px rgba(0,0,0,.22);
overflow:hidden;
}
.studio-beat-demo {
display:grid;
grid-template-columns:180px minmax(0,1fr);
}
.studio-beat-art {
min-height:180px;
background:
radial-gradient(circle at 30% 28%,rgba(240,185,75,.35),transparent 28%),
radial-gradient(circle at 72% 38%,rgba(217,70,239,.38),transparent 30%),
linear-gradient(135deg,#111827,#0F1117);
}
.studio-beat-info {
padding:22px;
display:flex;
flex-direction:column;
justify-content:center;
}
.studio-beat-info h2 {
font-family:var(--font-display);
font-size:28px;
line-height:1;
letter-spacing:-.03em;
}
.studio-beat-info p {
margin-top:8px;
color:rgba(248,250,252,.62);
}
.studio-note-card {
padding:24px;
}
.studio-note-card strong {
display:block;
color:#F0B94B;
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
}
.studio-note-card p {
margin-top:12px;
color:rgba(248,250,252,.66);
line-height:1.7;
}
@media(max-width:1180px) {
.beatstars-header { gap:12px; padding:0 16px; }
.beatstars-nav-trigger { padding:0 8px; font-size:12px; }
.beatstars-search { max-width:300px; min-width:180px; }
.header-link { display:none; }
}
@media(max-width:1120px) {
body.app-shell #main-content { padding-top:66px; }
.beatstars-header {
height:66px;
padding:0 12px;
}
.beatstars-nav { display:none; }
.beatstars-search {
max-width:none;
min-width:0;
margin-left:0;
}
.beatstars-header .navbar-mobile-toggle { display:flex; }
.mobile-nav-panel.is-open {
display:block;
position:fixed;
top:66px;
left:0;
right:0;
max-height:calc(100vh - 66px);
overflow:auto;
padding:14px;
}
}
@media(max-width:1040px) {
.header-sell { display:none; }
.beatstars-search { max-width:250px; }
}
@media(max-width:860px) {
.studio-entry-panel { grid-template-columns:1fr; }
}
@media(max-width:640px) {
.brand-logo { width:118px; max-height:38px; }
.beatstars-header { gap:8px; }
.header-icon { width:34px; min-height:34px; }
.beat-card-cta-row,
.next-card-actions { grid-template-columns:1fr; }
.studio-beat-demo { grid-template-columns:1fr; }
}
/* Full-width Airbit-style layout */
html,
body {
overflow-x:hidden;
}
body.app-shell #main-content {
width:100%;
overflow-x:hidden;
}
body.app-shell .creative-home {
width:100%;
max-width:none;
margin:0;
padding:0 0 34px;
}
body.app-shell .creative-main {
gap:0;
}
body.app-shell .creative-hero {
min-height:min(720px, calc(100vh - 74px));
margin:0;
border-left:0;
border-right:0;
border-radius:0;
}
body.app-shell .creative-hero-copy {
max-width:1040px;
padding:clamp(56px,7vw,92px) clamp(24px,5vw,76px);
}
body.app-shell .creative-hero h1 {
font-size:clamp(58px,8vw,118px);
}
body.app-shell .creative-hero p {
max-width:680px;
font-size:18px;
}
body.app-shell .home-panel,
body.app-shell .topline-banner,
body.app-shell .subscribe-section {
margin:0;
border-left:0;
border-right:0;
border-radius:0;
padding:clamp(34px,4vw,62px) clamp(20px,4.5vw,76px);
box-shadow:none;
}
body.app-shell .home-panel {
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
}
body.app-shell .seller-growth-section {
margin:0;
border:0;
border-radius:0;
}
body.app-shell .panel-head {
max-width:none;
}
body.app-shell .next-beat-grid {
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:18px;
}
body.app-shell .producer-showcase-grid {
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;
}
body.app-shell .music-styles-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
body.app-shell .topline-banner,
body.app-shell .subscribe-section {
grid-template-columns:minmax(0,1fr) minmax(360px,.55fr);
}
body.app-shell .topline-showcase {
grid-template-columns:minmax(0,.86fr) minmax(420px,1fr);
}
body.app-shell .home-faq {
width:100%;
margin-left:0;
margin-right:0;
padding:clamp(64px,6vw,92px) clamp(20px,7vw,112px) clamp(76px,7vw,104px);
}
body.app-shell .faq-grid {
max-width:none;
}
body.app-shell .trust-strip {
padding:0 clamp(20px,4.5vw,76px) 34px;
}
body.app-shell .market-shell,
body.app-shell .market-section,
body.app-shell .page-hero {
max-width:none;
padding-left:clamp(20px,4.5vw,76px);
padding-right:clamp(20px,4.5vw,76px);
}
body.app-shell .footer-grid,
body.app-shell .footer-bottom {
max-width:none;
}
/* Actualites and music opportunity feed */
.news-hero {
width:100%;
min-height:440px;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,420px);
gap:28px;
align-items:end;
padding:clamp(56px,7vw,102px) clamp(20px,5vw,86px) clamp(38px,5vw,72px);
border-bottom:1px solid rgba(255,255,255,.08);
background:
radial-gradient(circle at 82% 14%,rgba(217,70,239,.18),transparent 32%),
linear-gradient(135deg,rgba(15,17,23,.98),rgba(20,23,32,.92) 58%,rgba(48,18,60,.64));
}
.news-hero-copy h1 {
max-width:900px;
margin:10px 0 0;
color:#fff;
font-family:var(--font-display);
font-size:clamp(48px,7vw,98px);
line-height:.94;
letter-spacing:-.05em;
}
.news-hero-copy p {
max-width:720px;
margin-top:18px;
color:rgba(248,250,252,.68);
font-size:17px;
line-height:1.7;
}
.news-filter-row {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:28px;
}
.news-filter-row a,
.news-country-panel a {
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 13px;
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
color:rgba(248,250,252,.72);
background:rgba(255,255,255,.045);
font-size:12px;
font-weight:850;
}
.news-filter-row a:hover,
.news-filter-row a.active,
.news-country-panel a:hover,
.news-country-panel a.active {
color:#fff;
border-color:rgba(217,70,239,.52);
background:linear-gradient(135deg,rgba(168,85,247,.28),rgba(217,70,239,.18));
}
.news-agent-card,
.news-country-panel,
.news-opportunity-panel,
.news-local-column,
.news-card,
.news-detail-body {
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.news-agent-card {
padding:24px;
}
.news-agent-card span,
.news-card-top span,
.news-country-panel h2,
.news-opportunity-panel h2 {
color:#F0B94B;
font-size:11px;
font-weight:950;
letter-spacing:.12em;
text-transform:uppercase;
}
.news-agent-card strong {
display:block;
margin-top:10px;
color:#fff;
font-family:var(--font-display);
font-size:28px;
line-height:1;
letter-spacing:-.03em;
}
.news-agent-card p {
margin-top:12px;
color:rgba(248,250,252,.62);
line-height:1.65;
}
.news-agent-status {
display:inline-flex;
align-items:center;
gap:8px;
margin-top:16px;
color:rgba(248,250,252,.78);
font-size:12px;
font-weight:800;
}
.news-agent-status i {
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 12px rgba(34,197,94,.55);
}
.news-local-section,
.news-page-shell,
.news-related {
width:100%;
padding:clamp(34px,4vw,58px) clamp(20px,5vw,86px) 0;
}
.news-local-section .panel-head h2,
.news-main-feed .panel-head h2,
.country-pulse-panel .panel-head h2,
.news-related .panel-head h2 {
margin-top:6px;
color:#fff;
font-family:var(--font-display);
font-size:clamp(26px,3vw,42px);
line-height:1;
letter-spacing:-.035em;
}
.news-local-grid,
.country-pulse-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.news-local-column {
padding:20px;
}
.news-local-column h3,
.country-pulse-grid h3 {
margin-bottom:14px;
color:#fff;
font-family:var(--font-display);
font-size:20px;
letter-spacing:-.02em;
}
.news-mini-row,
.local-beat-row,
.news-opportunity-panel a {
display:block;
padding:14px 0;
border-top:1px solid rgba(255,255,255,.075);
}
.news-mini-row:first-of-type,
.local-beat-row:first-of-type,
.news-opportunity-panel a:first-of-type {
border-top:0;
}
.news-mini-row span,
.news-opportunity-panel span {
display:block;
color:#D946EF;
font-size:10px;
font-weight:950;
letter-spacing:.10em;
text-transform:uppercase;
}
.news-mini-row strong,
.news-opportunity-panel strong {
display:block;
margin-top:5px;
color:#fff;
line-height:1.35;
}
.news-mini-row small,
.local-beat-row small {
display:block;
margin-top:5px;
color:rgba(248,250,252,.52);
}
.news-mini-row em {
display:inline-flex;
width:max-content;
margin-top:8px;
padding:5px 8px;
border:1px solid rgba(217,70,239,.35);
border-radius:999px;
color:#fff;
background:rgba(217,70,239,.12);
font-size:10px;
font-style:normal;
font-weight:900;
}
.local-beat-row {
display:grid;
grid-template-columns:54px minmax(0,1fr);
gap:12px;
align-items:center;
}
.local-beat-row img {
width:54px;
height:54px;
border-radius:8px;
object-fit:cover;
background:#151821;
}
.local-beat-row strong {
display:block;
min-width:0;
overflow:hidden;
color:#fff;
text-overflow:ellipsis;
white-space:nowrap;
}
.news-empty-box,
.country-pulse-empty {
color:rgba(248,250,252,.58);
line-height:1.65;
}
.news-empty-box {
padding:16px;
border:1px dashed rgba(255,255,255,.14);
border-radius:10px;
}
.news-page-shell {
display:grid;
grid-template-columns:240px minmax(0,1fr);
gap:22px;
align-items:start;
padding-bottom:80px;
}
.news-country-panel {
position:sticky;
top:92px;
padding:18px;
}
.news-country-panel h2 {
margin-bottom:14px;
}
.news-country-panel {
display:flex;
flex-direction:column;
gap:8px;
}
.news-country-panel a {
width:100%;
justify-content:flex-start;
border-radius:8px;
}
.news-card-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.news-card {
min-height:260px;
display:flex;
flex-direction:column;
padding:22px;
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.news-card:hover {
transform:translateY(-3px);
border-color:rgba(217,70,239,.42);
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
}
.news-card.is-opportunity {
border-color:rgba(240,185,75,.34);
}
.news-card-top {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.news-card-top em {
color:rgba(248,250,252,.58);
font-size:11px;
font-style:normal;
font-weight:850;
}
.youtube-verified-badge {
width:max-content;
display:inline-flex;
align-items:center;
gap:7px;
margin-top:12px;
padding:7px 10px;
border:1px solid rgba(217,70,239,.36);
border-radius:999px;
color:#fff;
background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(217,70,239,.14));
box-shadow:0 12px 28px rgba(168,85,247,.13);
font-size:11px;
font-weight:950;
letter-spacing:.01em;
}
.youtube-verified-badge::before {
content:"";
width:7px;
height:7px;
border-radius:999px;
background:#D946EF;
box-shadow:0 0 12px rgba(217,70,239,.8);
}
.youtube-verified-badge:hover {
border-color:rgba(217,70,239,.62);
transform:translateY(-1px);
}
.youtube-verified-badge.is-detail {
margin-top:18px;
}
.news-card h3 {
margin-top:14px;
color:#fff;
font-family:var(--font-display);
font-size:24px;
line-height:1.05;
letter-spacing:-.03em;
}
.news-card p {
margin-top:12px;
color:rgba(248,250,252,.62);
line-height:1.65;
}
.news-card-meta {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:auto;
padding-top:18px;
color:rgba(248,250,252,.48);
font-size:12px;
}
.country-pulse-panel {
background:
radial-gradient(circle at 84% 8%,rgba(240,185,75,.16),transparent 30%),
linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
}
.country-pulse-grid > div {
min-width:0;
}
.news-detail-page {
width:100%;
padding-bottom:90px;
}
.news-detail-hero {
padding:clamp(58px,7vw,104px) clamp(20px,5vw,86px) 34px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.news-back-link {
color:rgba(248,250,252,.62);
font-weight:850;
}
.news-back-link:hover {
color:#fff;
}
.news-detail-hero .news-card-top {
justify-content:flex-start;
margin-top:24px;
}
.news-detail-hero h1 {
max-width:1040px;
margin-top:14px;
color:#fff;
font-family:var(--font-display);
font-size:clamp(42px,6vw,82px);
line-height:.98;
letter-spacing:-.05em;
}
.news-detail-hero p {
max-width:780px;
margin-top:18px;
color:rgba(248,250,252,.68);
font-size:17px;
line-height:1.75;
}
.news-detail-hero .btn {
margin-top:26px;
}
.news-detail-body {
max-width:880px;
margin:34px clamp(20px,5vw,86px) 0;
padding:28px;
color:rgba(248,250,252,.72);
font-size:16px;
line-height:1.85;
}
.news-source-content {
color:rgba(248,250,252,.76);
}
.news-source-link {
width:max-content;
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:22px;
padding:10px 14px;
border:1px solid rgba(240,185,75,.34);
border-radius:999px;
color:#F0B94B;
background:rgba(240,185,75,.07);
font-size:12px;
font-weight:900;
}
.news-source-link:hover {
border-color:rgba(240,185,75,.62);
color:#fff;
background:rgba(240,185,75,.12);
}
.news-related {
padding-top:48px;
}
.news-opportunities-section {
width:100%;
padding:0 clamp(20px,5vw,86px) 86px;
}
.news-opportunities-section .panel-head h2 {
margin-top:6px;
color:#fff;
font-family:var(--font-display);
font-size:clamp(26px,3vw,42px);
line-height:1;
letter-spacing:-.035em;
}
.news-opportunity-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
}
.news-opportunity-card {
min-height:260px;
display:flex;
flex-direction:column;
padding:22px;
border:1px solid rgba(240,185,75,.28);
border-radius:12px;
background:
radial-gradient(circle at 90% 0%,rgba(240,185,75,.13),transparent 34%),
linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.news-opportunity-card h3 {
margin-top:14px;
color:#fff;
font-family:var(--font-display);
font-size:22px;
line-height:1.08;
letter-spacing:-.03em;
}
.news-opportunity-card p {
margin-top:12px;
color:rgba(248,250,252,.62);
line-height:1.65;
}
.news-read-link {
margin-top:auto;
color:#F0B94B;
font-size:12px;
font-weight:900;
}
@media(max-width:980px) {
body.app-shell .creative-hero {
min-height:620px;
}
body.app-shell .topline-banner,
body.app-shell .subscribe-section {
grid-template-columns:1fr;
}
.news-hero,
.news-page-shell,
.news-local-grid,
.country-pulse-grid {
grid-template-columns:1fr;
}
.news-country-panel {
position:static;
}
.news-country-panel {
flex-direction:row;
overflow-x:auto;
padding-bottom:14px;
}
.news-country-panel h2 {
display:none;
}
.news-country-panel a {
width:auto;
white-space:nowrap;
}
.news-opportunity-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:540px) {
body.app-shell .creative-home {
padding-bottom:28px;
}
body.app-shell .home-panel,
body.app-shell .topline-banner,
body.app-shell .subscribe-section {
padding-left:14px;
padding-right:14px;
}
.news-hero,
.news-local-section,
.news-page-shell,
.news-detail-hero,
.news-related {
padding-left:14px;
padding-right:14px;
}
.news-card-grid,
.news-opportunity-grid {
grid-template-columns:1fr;
}
.news-detail-body {
margin-left:14px;
margin-right:14px;
padding:22px;
}
}
/* Professional pricing page */
.pricing-pro-page {
width:100%;
padding:0 0 86px;
background:
radial-gradient(circle at 85% 0%, rgba(217,70,239,.14), transparent 30%),
radial-gradient(circle at 18% 18%, rgba(240,185,75,.08), transparent 26%);
}
.pricing-pro-hero {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.42fr);
gap:28px;
align-items:end;
min-height:520px;
padding:clamp(64px,7vw,104px) clamp(20px,5vw,86px);
border-bottom:1px solid rgba(255,255,255,.08);
background:
linear-gradient(115deg, rgba(15,17,23,.98), rgba(19,23,32,.92) 54%, rgba(72,26,82,.62)),
radial-gradient(circle at 78% 26%, rgba(168,85,247,.30), transparent 32%);
}
.pricing-hero-copy {
max-width:980px;
}
.pricing-pro-hero h1 {
max-width:1040px;
margin:12px 0 0;
font-family:var(--font-display);
font-size:clamp(48px,7.4vw,104px);
line-height:.94;
letter-spacing:-.05em;
}
.pricing-pro-hero p,
.pricing-block-head p,
.pro-price-card p,
.pricing-steps p {
color:rgba(248,250,252,.68);
line-height:1.7;
}
.pricing-pro-hero p {
max-width:760px;
margin-top:20px;
font-size:18px;
}
.pricing-hero-actions {
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px;
}
.pricing-hero-card {
padding:24px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
box-shadow:0 28px 80px rgba(0,0,0,.28);
backdrop-filter:blur(18px);
}
.pricing-hero-card strong {
display:block;
margin-bottom:12px;
color:#fff;
font-family:var(--font-display);
font-size:24px;
letter-spacing:-.03em;
}
.pricing-hero-card div {
display:grid;
grid-template-columns:100px minmax(0,1fr);
gap:14px;
padding:14px 0;
border-top:1px solid rgba(255,255,255,.08);
}
.pricing-hero-card span {
color:#F0B94B;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.pricing-hero-card em {
color:rgba(248,250,252,.76);
font-style:normal;
line-height:1.45;
}
.pricing-proof-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.08);
}
.pricing-proof-grid div {
min-height:138px;
padding:28px clamp(18px,3vw,44px);
background:rgba(15,17,23,.94);
}
.pricing-proof-grid strong {
display:block;
color:#fff;
font-family:var(--font-display);
font-size:42px;
line-height:1;
}
.pricing-proof-grid span {
display:block;
max-width:240px;
margin-top:10px;
color:rgba(248,250,252,.58);
line-height:1.55;
}
.pricing-block,
.pricing-compare-panel,
.pricing-steps {
padding:clamp(54px,6vw,88px) clamp(20px,5vw,86px) 0;
}
.pricing-block-head {
max-width:840px;
margin-bottom:24px;
}
.pricing-block-head h2 {
margin-top:10px;
color:#fff;
font-family:var(--font-display);
font-size:clamp(34px,4.6vw,64px);
line-height:.98;
letter-spacing:-.045em;
}
.pricing-block-head p {
max-width:720px;
margin-top:14px;
}
.pricing-plan-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
width:100%;
}
.pro-price-card {
position:relative;
display:flex;
flex-direction:column;
min-height:430px;
padding:26px;
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
background:
linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
rgba(15,17,23,.82);
box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.pro-price-card::before {
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(circle at 82% 0%, rgba(168,85,247,.18), transparent 34%);
}
.pro-price-card.is-featured {
border-color:rgba(217,70,239,.55);
background:
linear-gradient(180deg, rgba(168,85,247,.18), rgba(217,70,239,.07)),
rgba(15,17,23,.86);
transform:translateY(-8px);
}
.pro-price-card.is-gold {
border-color:rgba(240,185,75,.48);
}
.plan-badge {
align-self:flex-start;
min-height:28px;
display:inline-flex;
align-items:center;
padding:0 10px;
margin-bottom:16px;
border-radius:999px;
color:#fff;
background:linear-gradient(135deg,#7c3aed,#D946EF);
font-size:11px;
font-weight:900;
}
.pro-price-card.is-gold .plan-badge {
color:#211307;
background:#F0B94B;
}
.plan-name {
position:relative;
color:#F0B94B;
font-size:12px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
}
.plan-price {
position:relative;
margin:18px 0 8px;
color:#fff;
font-family:var(--font-display);
font-size:clamp(40px,4vw,58px);
line-height:.95;
letter-spacing:-.05em;
}
.plan-price small {
display:block;
margin-top:8px;
color:rgba(248,250,252,.58);
font-family:var(--font-body);
font-size:13px;
font-weight:800;
letter-spacing:0;
}
.pro-price-card p,
.pro-price-card ul,
.pro-price-card a {
position:relative;
}
.pro-price-card ul {
list-style:none;
padding:0;
margin:22px 0 26px;
}
.pro-price-card li {
display:flex;
gap:10px;
padding:11px 0;
border-top:1px solid rgba(255,255,255,.075);
color:rgba(248,250,252,.72);
font-size:14px;
}
.pro-price-card li::before {
content:'';
flex:0 0 7px;
width:7px;
height:7px;
margin-top:8px;
border-radius:50%;
background:#D946EF;
box-shadow:0 0 18px rgba(217,70,239,.55);
}
.pro-price-card.is-gold li::before {
background:#F0B94B;
box-shadow:0 0 18px rgba(240,185,75,.45);
}
.pro-price-card .btn,
.pro-price-card .btn-ghost {
margin-top:auto;
}
.pricing-compare-panel {
margin-top:18px;
}
.pricing-compare-table {
overflow:hidden;
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
background:rgba(255,255,255,.035);
}
.compare-row {
display:grid;
grid-template-columns:1.3fr repeat(3,1fr);
min-width:760px;
}
.compare-row > * {
padding:18px 20px;
border-left:1px solid rgba(255,255,255,.07);
border-top:1px solid rgba(255,255,255,.07);
color:rgba(248,250,252,.70);
}
.compare-row > *:first-child {
border-left:0;
}
.compare-row:first-child > * {
border-top:0;
}
.compare-head > * {
color:#fff;
background:rgba(255,255,255,.065);
font-size:11px;
font-weight:950;
letter-spacing:.10em;
text-transform:uppercase;
}
.compare-row strong {
color:#fff;
}
.pricing-steps {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
width:100%;
}
.pricing-steps div {
padding:24px;
border:1px solid rgba(255,255,255,.09);
border-radius:14px;
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.pricing-steps strong {
display:inline-flex;
min-width:42px;
height:42px;
align-items:center;
justify-content:center;
border-radius:50%;
color:#111318;
background:#F0B94B;
font-weight:950;
}
.pricing-steps h3 {
margin-top:18px;
color:#fff;
font-family:var(--font-display);
font-size:24px;
letter-spacing:-.03em;
}
.pricing-steps p {
margin-top:8px;
}
.pricing-detail-page {
padding-bottom:86px;
}
.pricing-detail-hero {
grid-template-columns:1fr;
align-items:center;
min-height:440px;
}
.pricing-detail-hero .pricing-hero-copy {
max-width:1120px;
}
.pricing-detail-page > .pricing-plan-grid {
margin-top:clamp(42px,5vw,72px);
padding-left:clamp(20px,5vw,86px);
padding-right:clamp(20px,5vw,86px);
}
@media(max-width:1080px) {
.pricing-pro-hero {
grid-template-columns:1fr;
min-height:auto;
}
.pricing-plan-grid,
.pricing-steps {
grid-template-columns:1fr;
}
.pro-price-card.is-featured {
transform:none;
}
.pricing-proof-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.pricing-compare-table {
overflow-x:auto;
}
}
@media(max-width:620px) {
.pricing-pro-hero,
.pricing-block,
.pricing-compare-panel,
.pricing-steps,
.pricing-detail-page > .pricing-plan-grid {
padding-left:14px;
padding-right:14px;
}
.pricing-proof-grid {
grid-template-columns:1fr;
}
.pricing-hero-card div {
grid-template-columns:1fr;
gap:6px;
}
.pro-price-card {
min-height:auto;
padding:22px;
}
}
/* ============================================================
JammBeat marketplace identity: Beatmarket-inspired skin
============================================================ */
:root {
--brand-blue:#006aff;
--brand-blue-hover:#3388ff;
--brand-green:#00d362;
--brand-pink:#ff317d;
--bg-dark:#0a0a09;
--bg-surface:#141414;
--bg-card:#141414;
--bg-hover:#1a1a1a;
--border:rgba(255,255,255,.10);
--line:rgba(255,255,255,.09);
--line-strong:rgba(255,255,255,.16);
--accent:var(--brand-blue);
--accent2:var(--brand-green);
--accent-hover:var(--brand-blue-hover);
--text:#fff;
--text-muted:#9f9f9f;
--text-faint:#707070;
--radius:8px;
--radius-sm:6px;
}
body.app-shell {
background:#0a0a09 !important;
color:#fff;
}
body.app-shell .site-grain,
body.app-shell .hero-glow { display:none; }
body.app-shell #main-content { padding-top:64px; }
.beatstars-header {
min-height:64px;
padding:0 clamp(16px,2.2vw,32px);
gap:22px;
background:rgba(10,10,9,.94);
border-bottom:1px solid rgba(255,255,255,.08);
box-shadow:none;
backdrop-filter:blur(18px);
}
.beatstars-brand { flex:0 0 auto; }
.brand-logo { width:146px; max-height:38px; object-fit:contain; }
.beatstars-nav { gap:18px; }
.beatstars-nav-trigger,
.header-link,
.account-trigger { color:#b8b8b8; font-weight:650; }
.beatstars-nav-trigger:hover,
.beatstars-nav-item.active .beatstars-nav-trigger,
.header-link:hover,
.account-trigger:hover { color:#fff; }
.beatstars-nav-item.active::after { background:linear-gradient(var(--brand-blue),var(--brand-blue)) top/100% 2px no-repeat; }
.beatstars-dropdown,
.account-dropdown,
.topbar-search-results {
background:#141414;
border-color:rgba(255,255,255,.12);
border-radius:8px;
box-shadow:0 18px 42px rgba(0,0,0,.46);
}
.beatstars-dropdown a:hover,
.account-dropdown a:hover,
.account-dropdown button:hover { color:#fff; background:#1f1f1f; }
.beatstars-search {
max-width:430px;
min-height:40px;
background:#1a1a1a;
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
}
.beatstars-search:focus-within { border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(0,106,255,.13); }
.beatstars-search input { color:#fff; }
.beatstars-search input::placeholder { color:#707070; }
.header-sell,
.navbar-publish-btn,
.navbar-signup-btn,
body.app-shell .btn-primary {
color:#fff !important;
background:var(--brand-blue) !important;
border-color:var(--brand-blue) !important;
border-radius:999px;
box-shadow:none !important;
}
.header-sell:hover,
.navbar-publish-btn:hover,
.navbar-signup-btn:hover,
body.app-shell .btn-primary:hover { background:var(--brand-blue-hover) !important; border-color:var(--brand-blue-hover) !important; }
.header-icon { border-radius:50%; border-color:transparent; background:transparent; }
.header-icon:hover { background:rgba(255,255,255,.08); border-color:transparent; }
.header-icon b { color:#07160d; background:var(--brand-green); }
body.app-shell .creative-hero {
min-height:clamp(560px,calc(100svh - 118px),650px);
display:flex;
align-items:center;
background:#0a0a09;
border-bottom:1px solid rgba(255,255,255,.08);
}
body.app-shell .creative-hero::before {
content:'';
position:absolute;
z-index:1;
inset:0;
width:auto;
background:linear-gradient(90deg,rgba(5,7,10,.97) 0%,rgba(5,7,10,.88) 40%,rgba(5,7,10,.38) 72%,rgba(5,7,10,.22) 100%);
}
.creative-hero-media { position:absolute;z-index:0;inset:0;overflow:hidden; }
.creative-hero-media img { width:100%;height:100%;object-fit:cover;object-position:58% 50%;filter:saturate(.86) contrast(1.06); }
body.app-shell .creative-hero-copy { z-index:2;max-width:1400px;width:100%;margin:0 auto;padding:64px clamp(24px,5vw,76px); }
body.app-shell .creative-hero h1 {
max-width:840px;
font-size:clamp(58px,7vw,104px);
line-height:.92;
letter-spacing:0;
}
body.app-shell .creative-hero h1 span { color:#fff; background:none; -webkit-text-fill-color:currentColor; }
body.app-shell .creative-hero p { max-width:640px; color:#b8b8b8; font-size:17px; }
.live-status { color:#66a3ff; background:transparent; border:0; padding:0; letter-spacing:.12em; }
.live-status i { background:var(--brand-green); box-shadow:0 0 0 4px rgba(0,211,98,.12); }
.hero-market-search {
display:flex;
align-items:center;
gap:12px;
width:min(720px,100%);
margin-top:30px;
padding:7px 7px 7px 18px;
background:#1a1a1a;
border:1px solid rgba(255,255,255,.11);
border-radius:999px;
}
.hero-market-search:focus-within { border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(0,106,255,.12); }
.hero-market-search svg { width:20px; height:20px; flex:0 0 20px; color:#9f9f9f; }
.hero-market-search input { min-width:0; flex:1; height:46px; color:#fff; background:transparent; border:0; outline:0; font-size:15px; }
.hero-market-search input::placeholder { color:#707070; }
.hero-market-search button {
min-height:46px;
padding:0 24px;
color:#fff;
background:var(--brand-blue);
border:0;
border-radius:999px;
font-size:13px;
font-weight:800;
}
.hero-market-search button:hover { background:var(--brand-blue-hover); }
.creative-actions .btn-ghost { border-color:rgba(255,255,255,.16); border-radius:999px; background:transparent; }
.creative-actions .btn-ghost:hover { color:#fff; background:#1a1a1a; border-color:rgba(255,255,255,.28); }
.creative-stats { border-top-color:rgba(255,255,255,.08); }
.creative-stats strong { color:#fff; }
.creative-stats span { color:#707070; }
body.app-shell .home-panel { background:#0a0a09; border-bottom:1px solid rgba(255,255,255,.07); }
.panel-head h2,
.page-hero h1 { letter-spacing:0; }
.panel-head a,
.battle-link,
.battle-count { color:#66a3ff; }
.next-beat-grid { gap:20px; }
.next-beat-card,
.beat-card {
border:0;
border-radius:8px;
background:transparent;
box-shadow:none;
}
.next-beat-card:hover,
.beat-card:hover,
.next-beat-card.is-playing,
.beat-card.is-playing,
.next-beat-card.is-current,
.beat-card.is-current { border-color:transparent; box-shadow:none; transform:none; }
.next-cover,
.beat-card-cover { aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#1a1a1a; }
.next-cover img,
.beat-card-cover img { filter:none; }
.next-beat-card:hover .next-cover img,
.beat-card:hover .beat-card-cover img { transform:scale(1.025); filter:brightness(.68); }
.next-cover button,
.beat-card-play-btn {
width:54px;
height:54px;
color:#080808;
background:#fff;
border:0;
box-shadow:0 10px 30px rgba(0,0,0,.38);
}
.next-cover button:hover,
.beat-card-play-btn:hover,
.next-beat-card.is-current .next-cover button,
.beat-card.is-current .beat-card-play-btn,
.next-beat-card.is-playing .next-cover button,
.beat-card.is-playing .beat-card-play-btn { color:#fff; background:var(--brand-blue); box-shadow:0 10px 30px rgba(0,106,255,.28); }
.next-cover-tag { color:#fff; background:rgba(10,10,9,.82); border-color:rgba(255,255,255,.15); border-radius:4px; }
.next-beat-card h3 { color:#fff; margin-top:12px; }
.next-beat-card p,
.next-card-stats { color:#9f9f9f; }
.next-card-footer strong { color:#fff; }
.beat-card-action.is-fav { color:var(--brand-pink); }
.next-card-cta-row { margin-left:0; margin-right:0; margin-bottom:0; }
.next-card-cta-row .beat-action-btn { border-radius:999px; }
.next-card-cta-row .beat-action-btn.topline { color:#fff; border-color:rgba(255,255,255,.15); background:#1a1a1a; }
.next-card-cta-row .beat-action-btn.buy { color:#07160d; border-color:var(--brand-green); background:var(--brand-green); box-shadow:none; }
.airbit-producer-card,
.music-style-card,
.metric-tile,
.filters-panel,
.beat-list-wrap,
.license-card,
.battle-card,
.beatmaker-battle-card,
.battle-entry-card,
.battle-brief-card {
border-color:rgba(255,255,255,.09);
border-radius:8px;
background:#141414;
box-shadow:none;
}
.airbit-producer-card:hover,
.music-style-card:hover { border-color:rgba(255,255,255,.22); box-shadow:none; }
.producer-avatar em { color:#fff; background:var(--brand-blue); }
.music-style-card::before { background:var(--brand-blue); }
body.app-shell .page-hero {
min-height:300px;
align-items:end;
border-bottom:1px solid rgba(255,255,255,.08);
background:#0a0a09;
}
body.app-shell .page-hero .word-grad { color:#fff; background:none; -webkit-text-fill-color:currentColor; }
.kicker { color:#66a3ff; }
.filter-input,
.theme-select { color:#fff; background:#1a1a1a; border-color:rgba(255,255,255,.12); border-radius:6px; }
.filter-input:focus,
.theme-select:focus { border-color:var(--brand-blue); }
.filter-chip:hover,
.filter-chip.active { color:#fff; background:rgba(0,106,255,.18); border-color:rgba(0,106,255,.55); }
.beat-buy-btn { color:#07160d; background:var(--brand-green); border-radius:999px; }
.beat-buy-btn:hover { background:#26df7c; }
.footer { margin-top:0; background:#0a0a09; border-top:1px solid rgba(255,255,255,.08); }
.footer-actions a { border-radius:999px; }
.footer-actions a:first-child { color:#fff; background:var(--brand-blue); border-color:var(--brand-blue); }
@media(max-width:980px) {
body.app-shell #main-content { padding-top:60px; }
.beatstars-header { min-height:60px; }
}
@media(max-width:640px) {
body.app-shell .creative-hero { min-height:auto; }
body.app-shell .creative-hero-copy { padding:58px 18px 48px; }
body.app-shell .creative-hero h1 { font-size:clamp(46px,15vw,68px); }
.hero-market-search { display:grid; grid-template-columns:auto minmax(0,1fr); border-radius:8px; padding:8px 10px; }
.hero-market-search input { height:42px; }
.hero-market-search button { grid-column:1/-1; width:100%; border-radius:6px; }
.next-beat-grid,
.beats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.next-beat-card h3 { font-size:14px; }
}
@media(max-width:420px) {
.next-beat-grid,
.beats-grid { grid-template-columns:1fr; }
}
@media(max-width:980px) {
.contact-hero,
.contact-layout {
grid-template-columns:1fr;
}
.contact-side {
position:static;
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:720px) {
.contact-page {
width:auto;
padding:26px 14px 96px;
}
.contact-hero-copy {
min-height:auto;
padding:28px 20px;
}
.contact-signal-grid,
.contact-side,
.contact-field-grid {
grid-template-columns:1fr;
}
.contact-field-wide {
grid-column:auto;
}
.contact-form-head,
.contact-submit-row {
align-items:flex-start;
flex-direction:column;
}
.contact-submit-row .btn {
width:100%;
justify-content:center;
}
}
/* Responsive header and hero refinement */
@media(max-width:980px) {
body.app-shell .creative-hero {
min-height:auto;
align-items:flex-start;
}
body.app-shell .creative-hero-copy {
padding:clamp(42px,8vw,64px) clamp(18px,5vw,42px) clamp(54px,7vw,72px);
}
body.app-shell .creative-hero h1 {
max-width:860px;
font-size:clamp(44px,8vw,72px);
line-height:.98;
letter-spacing:-.04em;
}
body.app-shell .creative-hero p {
max-width:640px;
margin-top:16px;
font-size:16px;
}
.creative-actions {
margin-top:22px;
}
.creative-stats {
margin-top:28px;
}
}
@media(max-width:900px) {
body.app-shell #main-content {
padding-top:112px;
}
.beatstars-header {
height:112px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
grid-template-areas:
"brand spacer actions"
"search search search";
align-content:center;
align-items:center;
gap:10px 12px;
padding:10px 14px 12px;
}
.beatstars-brand {
grid-area:brand;
min-width:0;
}
.beatstars-actions {
grid-area:actions;
justify-self:end;
gap:7px;
}
.beatstars-search {
grid-area:search;
width:100%;
max-width:none !important;
height:42px;
margin-left:0;
}
.mobile-nav-panel.is-open {
top:112px;
max-height:calc(100vh - 112px);
}
}
@media(max-width:560px) {
body.app-shell #main-content {
padding-top:118px;
}
.beatstars-header {
height:118px;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"brand actions"
"search search";
gap:9px;
padding:10px 10px 12px;
}
.brand-logo {
width:124px;
max-height:36px;
}
.beatstars-actions {
gap:6px;
}
.header-icon,
.beatstars-header .navbar-mobile-toggle {
width:36px;
min-height:36px;
flex-basis:36px;
}
.beatstars-search {
height:40px;
padding:0 12px;
}
.beatstars-search input {
font-size:12px;
}
.mobile-nav-panel.is-open {
top:118px;
max-height:calc(100vh - 118px);
}
body.app-shell .creative-hero-copy {
padding:30px 18px 44px;
}
body.app-shell .creative-hero h1 {
font-size:clamp(42px,13vw,58px);
line-height:1;
}
body.app-shell .creative-hero p {
margin-top:14px;
font-size:15px;
}
.creative-actions {
display:grid;
grid-template-columns:1fr;
width:100%;
margin-top:20px;
}
.creative-actions .btn-lg,
.creative-actions .btn-ghost {
width:100%;
justify-content:center;
}
}
/* Public beatmaker profile */
.beatmaker-directory {
width:min(100%,1240px);
margin:0 auto;
padding:58px clamp(16px,3vw,32px) 96px;
}
.beatmaker-directory-hero {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:48px;
align-items:end;
padding:34px 0 38px;
border-bottom:1px solid rgba(255,255,255,.09);
}
.beatmaker-directory-hero h1 {
max-width:760px;
margin:10px 0 0;
font-family:var(--font-display);
font-size:clamp(42px,6vw,76px);
line-height:.98;
letter-spacing:0;
}
.beatmaker-directory-hero p { max-width:680px;margin:18px 0 0;color:#999;font-size:16px;line-height:1.7; }
.beatmaker-directory-count { min-width:190px;padding:18px 0 4px;border-top:2px solid var(--brand-blue); }
.beatmaker-directory-count strong,.beatmaker-directory-count span { display:block; }
.beatmaker-directory-count strong { font-size:36px;line-height:1;color:#fff; }
.beatmaker-directory-count span { margin-top:7px;color:#818181;font-size:12px;text-transform:uppercase; }
.beatmaker-directory-filters {
display:grid;
grid-template-columns:minmax(260px,1fr) 190px 180px auto auto;
gap:10px;
align-items:end;
margin:26px 0 44px;
padding:14px;
border:1px solid rgba(255,255,255,.09);
border-radius:8px;
background:#111;
}
.beatmaker-directory-filters label > span { display:block;margin:0 0 7px;color:#777;font-size:9px;font-weight:800;text-transform:uppercase; }
.beatmaker-directory-filters input[type="text"],.beatmaker-directory-filters select {
width:100%;height:44px;padding:0 13px;border:1px solid rgba(255,255,255,.11);border-radius:6px;color:#eee;background:#181818;font:inherit;font-size:13px;outline:none;
}
.beatmaker-directory-filters input:focus,.beatmaker-directory-filters select:focus { border-color:#3f82ff;box-shadow:0 0 0 3px rgba(0,106,255,.12); }
.beatmaker-directory-filters .beatmaker-select-filter { align-self:end;min-width:0; }
.beatmaker-directory-filters .beatmaker-select-filter .jb-select-trigger { height:44px;border-radius:999px;background:#181818;font-size:12px;font-weight:750;letter-spacing:0; }
.beatmaker-directory-filters .beatmaker-select-filter .jb-select-trigger:hover,
.beatmaker-directory-filters .beatmaker-select-filter .jb-select-trigger.is-open { background:#1d1d1d; }
.beatmaker-search-field { position:relative; }
.beatmaker-search-field svg { position:absolute;z-index:1;left:13px;bottom:13px;width:18px;height:18px;color:#777; }
.beatmaker-search-field input[type="text"] { padding-left:42px; }
.beatmaker-directory-filters .verified-filter { height:44px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:6px;color:#aaa;background:#181818; }
.beatmaker-directory-filters .verified-filter span { margin:0;color:inherit;font-size:11px;text-transform:none;white-space:nowrap; }
.verified-filter input { accent-color:var(--brand-blue); }
.beatmaker-filter-submit { height:44px;padding:0 20px;border:0;border-radius:6px;color:#fff;background:var(--brand-blue);font-size:12px;font-weight:800;cursor:pointer; }
.beatmaker-filter-submit:hover { background:var(--brand-blue-hover); }
.beatmaker-results-head { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px; }
.beatmaker-results-head h2 { margin:7px 0 0;font-size:30px;letter-spacing:0; }
.beatmaker-results-head > span { color:#777;font-size:12px; }
.beatmaker-directory-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.beatmaker-directory-card { overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#131313;transition:border-color .2s ease,transform .2s ease; }
.beatmaker-directory-card:hover { border-color:rgba(63,130,255,.55);transform:translateY(-3px); }
.beatmaker-directory-cover { position:relative;display:grid;place-items:center;height:152px;overflow:hidden;color:#7eb0ff;background:linear-gradient(135deg,#101b2b,#111 55%,#10231b);font-size:56px;font-weight:900; }
.beatmaker-directory-cover::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,8,.72)); }
.beatmaker-directory-cover img { width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s ease; }
.beatmaker-directory-card:hover .beatmaker-directory-cover img { transform:scale(1.025); }
/* Saved Topline recordings */
.topline-audio-player { width:min(280px,100%);min-width:220px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#0e1218;flex-shrink:0; }
.topline-audio-play { width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid rgba(63,130,255,.4);border-radius:50%;color:#fff;background:#1769e8;cursor:pointer;transition:background .16s ease,transform .16s ease; }
.topline-audio-play:hover { background:#287cff;transform:scale(1.04); }
.topline-audio-play svg { width:17px;height:17px; }
.topline-audio-play .topline-pause-icon,.topline-audio-player.is-playing .topline-play-icon { display:none; }
.topline-audio-player.is-playing .topline-pause-icon { display:block; }
.topline-audio-main { min-width:0; }
.topline-audio-main input[type="range"] { --audio-progress:0%;width:100%;height:4px;display:block;margin:0;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:linear-gradient(to right,#3f82ff 0 var(--audio-progress),#313845 var(--audio-progress) 100%);cursor:pointer; }
.topline-audio-main input[type="range"]::-webkit-slider-thumb { width:12px;height:12px;border:2px solid #0e1218;border-radius:50%;background:#fff;appearance:none;-webkit-appearance:none; }
.topline-audio-main input[type="range"]::-moz-range-thumb { width:10px;height:10px;border:2px solid #0e1218;border-radius:50%;background:#fff; }
.topline-audio-time { display:flex;justify-content:space-between;margin-top:7px;color:#737e8d;font-size:10px;font-variant-numeric:tabular-nums; }
.topline-audio-time span:first-child { color:#d6deea; }
.topline-delete-button { min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid rgba(239,68,68,.28);border-radius:7px;color:#ff6b6b;background:rgba(239,68,68,.08);font:inherit;font-size:11px;font-weight:750;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease; }
.topline-delete-button svg { width:15px;height:15px;flex:0 0 auto; }
.topline-delete-button:hover { border-color:rgba(239,68,68,.55);color:#fff;background:#c83232; }
@media(max-width:720px) { .topline-audio-player { width:100%;order:4; } }
.beatmaker-directory-cover b { position:absolute;z-index:1;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#ddd;background:rgba(8,8,8,.72);font-size:10px; }
.beatmaker-directory-body { padding:0 18px 18px; }
.beatmaker-directory-identity { display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:end;margin-top:-24px;position:relative;z-index:2; }
.beatmaker-directory-avatar { width:58px;height:58px;display:grid;place-items:center;overflow:hidden;border:3px solid #131313;border-radius:8px;color:#07160d;background:var(--brand-green);font-size:20px;font-weight:900; }
.beatmaker-directory-avatar img { width:100%;height:100%;object-fit:cover; }
.beatmaker-directory-identity h3 { margin:0 0 3px;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.beatmaker-directory-identity h3 a { color:#fff; }
.beatmaker-directory-identity p { margin:0;color:#777;font-size:11px; }
.beatmaker-directory-badges { min-height:25px;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px; }
.beatmaker-directory-badges span { padding:4px 7px;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#aaa;background:#191919;font-size:8px;font-weight:800;text-transform:uppercase; }
.beatmaker-directory-badges .is-verified { color:#74a9ff;border-color:rgba(63,130,255,.3);background:rgba(0,106,255,.09); }
.beatmaker-directory-badges .is-founding { color:#f1cc70;border-color:rgba(241,204,112,.25);background:rgba(241,204,112,.07); }
.beatmaker-directory-badges .is-active { color:#62df9b;border-color:rgba(0,211,98,.22);background:rgba(0,211,98,.07); }
.beatmaker-directory-stats { display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08); }
.beatmaker-directory-stats div { padding:13px 8px 12px; }
.beatmaker-directory-stats div + div { border-left:1px solid rgba(255,255,255,.08); }
.beatmaker-directory-stats strong,.beatmaker-directory-stats span { display:block; }
.beatmaker-directory-stats strong { color:#fff;font-size:16px; }
.beatmaker-directory-stats span { margin-top:3px;color:#666;font-size:9px;text-transform:uppercase; }
.beatmaker-directory-link { min-height:38px;display:flex;align-items:center;justify-content:space-between;color:#d9e6f8;font-size:12px;font-weight:750; }
.beatmaker-directory-link span { color:#66a3ff;font-size:18px;transition:transform .18s ease; }
.beatmaker-directory-link:hover span { transform:translateX(3px); }
@media(max-width:980px) {
.beatmaker-directory-filters { grid-template-columns:minmax(240px,1fr) repeat(2,minmax(150px,.5fr)); }
.beatmaker-directory-filters .verified-filter,.beatmaker-filter-submit { align-self:stretch; }
.beatmaker-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
.beatmaker-directory { padding-top:28px; }
.beatmaker-directory-hero { grid-template-columns:1fr;gap:24px; }
.beatmaker-directory-hero h1 { font-size:clamp(38px,12vw,56px); }
.beatmaker-directory-count { min-width:0;width:160px; }
.beatmaker-directory-filters { grid-template-columns:1fr; }
.beatmaker-directory-grid { grid-template-columns:1fr; }
.beatmaker-results-head { align-items:start; }
}
.public-beatmaker-page {
width:min(100%,1220px);
margin:0 auto;
padding:0 clamp(14px,2.4vw,28px) 96px;
}
.beatmaker-profile-hero {
position:relative;
margin-bottom:34px;
}
.beatmaker-profile-cover {
position:relative;
overflow:hidden;
height:300px;
border:1px solid rgba(255,255,255,.10);
border-top:0;
border-radius:0 0 22px 22px;
background:
radial-gradient(circle at 18% 16%, rgba(168,85,247,.36), transparent 34%),
radial-gradient(circle at 82% 42%, rgba(240,185,75,.18), transparent 28%),
linear-gradient(135deg,#111827,#0F1117 58%,#251634);
box-shadow:0 26px 90px rgba(0,0,0,.34);
}
.beatmaker-profile-cover::after {
content:'';
position:absolute;
inset:0;
background:
linear-gradient(180deg, rgba(9,11,16,.10), rgba(9,11,16,.38) 54%, rgba(9,11,16,.82)),
linear-gradient(90deg, rgba(15,17,23,.32), transparent 48%, rgba(15,17,23,.34));
}
.beatmaker-profile-cover img {
width:100%;
height:100%;
display:block;
object-fit:cover;
opacity:.72;
}
.beatmaker-profile-card {
position:relative;
z-index:2;
width:calc(100% - clamp(20px,4vw,64px));
margin:-70px auto 0;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:20px;
align-items:center;
padding:18px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:linear-gradient(145deg,rgba(22,25,36,.92),rgba(12,14,21,.86));
box-shadow:0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(22px) saturate(140%);
}
.beatmaker-profile-avatar {
width:116px;
height:116px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
border:4px solid rgba(15,17,23,.96);
border-radius:26px;
color:#111318;
background:linear-gradient(135deg,#F0B94B,#D946EF);
box-shadow:0 18px 44px rgba(0,0,0,.36);
font-family:var(--font-display);
font-size:40px;
font-weight:950;
}
.beatmaker-profile-avatar img {
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.beatmaker-profile-info {
min-width:0;
}
.beatmaker-profile-title-row {
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:10px;
}
.beatmaker-profile-title-row h1 {
min-width:0;
font-size:clamp(36px,5vw,64px);
line-height:.95;
letter-spacing:-.045em;
}
.verified-badge {
min-height:25px;
display:inline-flex;
align-items:center;
padding:0 10px;
border-radius:999px;
color:#111318;
background:linear-gradient(135deg,#F0B94B,#f7d37e);
font-size:10px;
font-weight:950;
letter-spacing:.10em;
text-transform:uppercase;
}
.beatmaker-profile-meta {
display:flex;
flex-wrap:wrap;
gap:8px 18px;
margin-top:10px;
color:rgba(248,250,252,.62);
font-size:13px;
font-weight:650;
}
.beatmaker-profile-meta span {
position:relative;
}
.beatmaker-profile-meta span + span::before {
content:'';
position:absolute;
left:-10px;
top:50%;
width:4px;
height:4px;
border-radius:50%;
background:rgba(240,185,75,.78);
transform:translateY(-50%);
}
.beatmaker-profile-actions {
display:flex;
align-items:center;
gap:10px;
}
.beatmaker-follow-btn {
min-height:42px;
padding:0 18px;
border:1px solid transparent;
border-radius:10px;
color:#111318;
background:linear-gradient(135deg,#F0B94B,#f7d37e);
font-size:13px;
font-weight:950;
cursor:pointer;
}
.beatmaker-follow-btn.is-following {
color:#F0B94B;
background:rgba(240,185,75,.10);
border-color:rgba(240,185,75,.32);
}
.beatmaker-socials {
display:flex;
gap:8px;
}
.beatmaker-socials a {
width:42px;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.10);
border-radius:10px;
color:rgba(248,250,252,.62);
background:rgba(255,255,255,.045);
transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.beatmaker-socials a:hover {
color:#fff;
border-color:rgba(217,70,239,.42);
background:rgba(255,255,255,.08);
transform:translateY(-1px);
}
.beatmaker-profile-content {
padding:0 clamp(4px,1.8vw,24px);
}
@media(max-width:760px) {
.public-beatmaker-page {
padding-left:0;
padding-right:0;
}
.beatmaker-profile-cover {
height:230px;
border-radius:0 0 18px 18px;
}
.beatmaker-profile-card {
width:calc(100% - 28px);
grid-template-columns:1fr;
justify-items:center;
gap:14px;
margin-top:-54px;
text-align:center;
padding:18px 16px;
}
.beatmaker-profile-avatar {
width:104px;
height:104px;
border-radius:24px;
}
.beatmaker-profile-title-row {
justify-content:center;
}
.beatmaker-profile-meta {
justify-content:center;
}
.beatmaker-profile-actions {
justify-content:center;
flex-wrap:wrap;
}
.beatmaker-profile-content {
padding:0 14px;
}
}
@media(max-width:520px) {
.beatmaker-profile-cover {
height:200px;
}
.beatmaker-profile-title-row h1 {
font-size:clamp(34px,12vw,48px);
}
.beatmaker-profile-meta {
flex-direction:column;
gap:5px;
}
.beatmaker-profile-meta span + span::before {
display:none;
}
}
/* Premium beat cards refinement */
.next-beat-card {
border-radius:12px;
background:linear-gradient(180deg, rgba(24,26,36,.78), rgba(13,14,22,.96));
border-color:rgba(255,255,255,.09);
box-shadow:0 14px 40px rgba(0,0,0,.22);
}
.next-beat-card:hover {
border-color:rgba(168,85,247,.42);
box-shadow:0 20px 54px rgba(0,0,0,.36), 0 0 0 1px rgba(217,70,239,.08);
}
.next-cover {
aspect-ratio:1/1;
background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(217,70,239,.14),rgba(15,17,23,.92));
}
.next-cover img {
filter:saturate(1.04) brightness(.9);
transition:transform .26s ease, filter .22s ease;
}
.next-beat-card:hover .next-cover img {
transform:scale(1.035);
filter:saturate(1.08) brightness(.76);
}
.next-cover::after {
height:68%;
background:linear-gradient(180deg, transparent 15%, rgba(8,9,14,.82));
}
.next-cover button,
.beat-card-play-btn {
width:52px;
height:52px;
color:#fff;
border:1px solid rgba(255,255,255,.18);
background:
radial-gradient(circle at 34% 22%, rgba(255,255,255,.22), transparent 34%),
rgba(11,12,18,.78);
box-shadow:0 18px 42px rgba(0,0,0,.48), 0 0 0 7px rgba(168,85,247,.08);
backdrop-filter:blur(16px);
}
.next-cover button:hover,
.beat-card-play-btn:hover,
.next-beat-card.is-current .next-cover button,
.beat-card.is-current .beat-card-play-btn {
background:
radial-gradient(circle at 34% 22%, rgba(255,255,255,.26), transparent 34%),
linear-gradient(135deg,#8b5cf6,#D946EF);
border-color:rgba(255,255,255,.24);
box-shadow:0 20px 48px rgba(168,85,247,.34), 0 0 0 7px rgba(168,85,247,.11);
}
.next-beat-card.is-playing .next-cover button,
.beat-card.is-playing .beat-card-play-btn {
color:#fff;
background:
radial-gradient(circle at 34% 22%, rgba(255,255,255,.28), transparent 34%),
linear-gradient(135deg,#A855F7,#D946EF);
box-shadow:0 22px 52px rgba(217,70,239,.34), 0 0 0 7px rgba(217,70,239,.12);
}
.next-beat-card.is-current,
.beat-card.is-current {
border-color:rgba(168,85,247,.42);
box-shadow:0 20px 54px rgba(0,0,0,.38), 0 0 0 1px rgba(217,70,239,.10);
}
.next-beat-card h3 {
margin-top:15px;
font-size:15px;
letter-spacing:0;
}
.next-beat-card p {
color:rgba(248,250,252,.56);
}
.next-beat-card strong {
color:#fff;
font-size:14px;
}
.next-beat-card .next-card-actions {
display:flex !important;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
}
.next-beat-card .next-card-actions .beat-action-btn {
width:44px;
height:36px;
min-height:36px;
padding:0;
border-radius:10px;
}
.next-beat-card .next-card-actions .beat-action-btn.topline {
color:rgba(255,255,255,.9);
border-color:rgba(240,185,75,.28);
background:rgba(240,185,75,.07);
}
.next-beat-card .next-card-actions .beat-action-btn.buy {
border-color:rgba(217,70,239,.44);
background:linear-gradient(135deg,#7c3aed,#D946EF);
box-shadow:0 14px 30px rgba(168,85,247,.20);
}
.beat-card-play-btn {
width:56px;
height:56px;
}
.beat-card:hover .beat-card-cover img {
filter:saturate(1.08) brightness(.78);
}
.beat-card-overlay {
background:linear-gradient(180deg, rgba(8,9,14,.10), rgba(8,9,14,.42));
}
/* Beat grid cards: image-first, hover player */
.next-beat-grid {
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
.beats-grid {
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:20px;
}
.next-beat-card,
.beat-card {
border-radius:20px;
overflow:hidden;
background:#11111d;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.next-beat-card:hover,
.beat-card:hover,
.next-beat-card.is-playing,
.beat-card.is-playing {
border-color:rgba(168,85,247,.64);
box-shadow:0 22px 58px rgba(0,0,0,.38), 0 0 0 1px rgba(168,85,247,.22);
}
.next-cover,
.beat-card-cover {
aspect-ratio:1.14/1;
border-radius:0;
}
.next-cover img,
.beat-card-cover img {
filter:saturate(1.06) brightness(.92);
}
.next-cover::after,
.beat-card-cover::after {
content:'';
position:absolute;
inset:0;
z-index:1;
height:auto;
background:
linear-gradient(180deg, rgba(5,7,12,.06) 35%, rgba(9,10,18,.68) 100%),
linear-gradient(90deg, rgba(8,9,15,.12), transparent 45%);
pointer-events:none;
}
.next-cover-tag,
.beat-cover-tag {
position:absolute;
left:14px;
top:14px;
z-index:3;
max-width:calc(100% - 84px);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
padding:6px 11px;
border-radius:999px;
color:#fff;
background:rgba(8,10,17,.70);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 12px 28px rgba(0,0,0,.24);
backdrop-filter:blur(14px);
font-size:10px;
font-weight:900;
line-height:1;
letter-spacing:.12em;
text-transform:uppercase;
}
.next-cover button {
left:auto;
right:14px;
top:14px;
z-index:4;
width:52px;
height:52px;
opacity:0;
transform:translateY(-6px) scale(.94);
}
.next-beat-card:hover .next-cover button,
.next-beat-card:focus-within .next-cover button,
.next-beat-card.is-playing .next-cover button {
opacity:1;
transform:translateY(0) scale(1);
}
.next-beat-card.is-current:not(:hover):not(:focus-within):not(.is-playing) .next-cover button {
opacity:0;
transform:translateY(-6px) scale(.94);
}
.beat-card-overlay {
z-index:4;
justify-content:flex-start;
align-items:flex-start;
padding:14px;
background:transparent;
pointer-events:none;
opacity:0;
}
.beat-card:hover .beat-card-overlay,
.beat-card:focus-within .beat-card-overlay,
.beat-card.is-playing .beat-card-overlay {
opacity:1;
}
.beat-card.is-current:not(:hover):not(:focus-within):not(.is-playing) .beat-card-overlay {
opacity:0;
}
.beat-card-play-btn {
position:absolute;
top:14px;
right:14px;
z-index:5;
width:52px;
height:52px;
pointer-events:auto;
transform:translateY(-6px) scale(.94);
}
.beat-card:hover .beat-card-play-btn,
.beat-card:focus-within .beat-card-play-btn,
.beat-card.is-playing .beat-card-play-btn {
transform:translateY(0) scale(1);
}
.next-beat-card h3,
.next-beat-card p,
.next-beat-card div:not(.next-cover):not(.next-card-actions):not(.next-card-footer),
.next-beat-card strong {
margin-left:18px;
margin-right:18px;
}
.next-beat-card h3,
.beat-card-title {
font-family:var(--font, 'Inter', system-ui, -apple-system, sans-serif);
font-size:16px;
font-weight:900;
letter-spacing:0;
}
.next-beat-card p {
font-size:12.5px;
}
.next-card-footer {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin:18px 18px 0;
}
.next-card-footer strong {
margin:0;
white-space:nowrap;
}
.next-beat-card .next-card-actions {
margin:0;
gap:8px;
}
.next-beat-card .next-card-actions .beat-card-action {
width:34px;
height:34px;
border-radius:9px;
}
.next-card-stats {
display:flex !important;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
color:rgba(248,250,252,.36);
font-size:11px;
line-height:1.35;
}
.next-card-cta-row {
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;
margin:14px 18px 18px;
}
.next-card-cta-row .beat-action-btn {
width:100%;
min-height:38px;
justify-content:center;
border-radius:10px;
padding:0;
}
@media(max-width:1180px) {
.next-beat-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:820px) {
.next-beat-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:560px) {
.next-beat-grid,
.beats-grid {
grid-template-columns:1fr;
}
.next-cover,
.beat-card-cover {
aspect-ratio:1.22/1;
}
}
/* ============================================================
JammBeat Battles
============================================================ */
.battle-hero,
.battle-detail-hero,
.battle-dashboard-hero {
width:min(1180px, calc(100% - 32px));
margin:32px auto 24px;
border:1px solid var(--line);
border-radius:28px;
overflow:hidden;
position:relative;
background:
radial-gradient(circle at 15% 10%, rgba(168,85,247,.22), transparent 34%),
linear-gradient(135deg, rgba(244,236,223,.075), rgba(244,236,223,.025));
}
.battle-hero {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);
gap:26px;
padding:54px;
}
.battle-hero h1,
.battle-detail-hero h1,
.battle-dashboard-hero h1 {
font-family:var(--font-display);
font-size:clamp(42px,6vw,78px);
line-height:.94;
letter-spacing:-.045em;
margin:10px 0 16px;
}
.battle-hero p,
.battle-detail-hero p,
.battle-dashboard-hero p {
color:var(--text-muted);
font-size:16px;
line-height:1.7;
max-width:720px;
}
.battle-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.battle-hero-panel {
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
background:rgba(10,8,5,.34);
padding:28px;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:260px;
}
.battle-panel-label {
color:var(--accent2);
font-size:11px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
}
.battle-steps { display:grid; gap:10px; }
.battle-steps span {
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.045);
border-radius:999px;
padding:13px 16px;
color:var(--text);
font-size:13px;
font-weight:700;
}
.battle-featured,
.battle-section,
.battle-detail-layout,
.beatmaker-battle-page {
width:min(1180px, calc(100% - 32px));
margin:0 auto;
}
.battle-featured { margin-bottom:26px; }
.battle-featured-card {
display:grid;
grid-template-columns:minmax(280px,.44fr) minmax(0,1fr);
border:1px solid var(--line);
border-radius:24px;
overflow:hidden;
background:rgba(244,236,223,.035);
}
.battle-featured-media {
min-height:310px;
background-size:cover;
background-position:center;
}
.battle-featured-body { padding:34px; align-self:center; }
.battle-featured-body h2,
.battle-section-head h2,
.battle-brief-card h2 {
font-family:var(--font-display);
font-size:clamp(28px,3vw,44px);
letter-spacing:-.03em;
line-height:1;
margin:8px 0 12px;
}
.battle-featured-body p,
.battle-card p,
.beatmaker-battle-card p {
color:var(--text-muted);
font-size:14px;
line-height:1.65;
}
.battle-stats-row,
.battle-card-meta {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:18px;
}
.battle-stats-row span,
.battle-card-meta span {
display:inline-flex;
gap:6px;
align-items:center;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
background:rgba(255,255,255,.045);
padding:8px 11px;
color:var(--text-muted);
font-size:12px;
}
.battle-stats-row strong { color:var(--text); }
.battle-status {
display:inline-flex;
align-items:center;
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
padding:6px 10px;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--text);
background:rgba(255,255,255,.06);
}
.battle-status.open { color:#10b981; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.22); }
.battle-status.voting { color:var(--accent2); background:rgba(212,162,76,.14); border-color:rgba(212,162,76,.25); }
.battle-status.finished { color:#93c5fd; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.22); }
.battle-section { padding:40px 0; }
.battle-section-head {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin-bottom:22px;
}
.battle-section-head.compact { align-items:center; }
.battle-link,
.battle-count {
color:var(--accent2);
font-size:13px;
font-weight:800;
}
.battle-grid,
.beatmaker-battle-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.battle-card,
.beatmaker-battle-card,
.battle-entry-card,
.battle-brief-card {
border:1px solid var(--line);
border-radius:22px;
background:rgba(244,236,223,.035);
overflow:hidden;
transition:transform .2s, border-color .2s, box-shadow .2s;
}
.battle-card:hover,
.beatmaker-battle-card:hover,
.battle-entry-card:hover {
transform:translateY(-4px);
border-color:rgba(212,162,76,.34);
box-shadow:0 18px 42px rgba(0,0,0,.26);
}
.battle-card-cover,
.beatmaker-battle-cover {
min-height:190px;
background-size:cover;
background-position:center;
padding:14px;
display:flex;
align-items:flex-start;
}
.battle-card-body,
.beatmaker-battle-body,
.battle-entry-body { padding:20px; }
.battle-card h3,
.beatmaker-battle-card h3,
.battle-entry-card h3,
.battle-brief-card h3 {
font-family:var(--font-display);
font-size:22px;
line-height:1.05;
letter-spacing:-.02em;
margin:0 0 10px;
}
.battle-empty {
grid-column:1/-1;
border:1px dashed rgba(255,255,255,.15);
border-radius:20px;
padding:34px;
color:var(--text-muted);
background:rgba(255,255,255,.025);
}
.battle-empty h3 { color:var(--text); margin-bottom:6px; }
.battle-leaderboard { display:grid; gap:10px; }
.battle-leader-row {
display:grid;
grid-template-columns:auto 54px minmax(0,1fr) auto;
gap:14px;
align-items:center;
border:1px solid var(--line);
border-radius:18px;
background:rgba(244,236,223,.035);
padding:12px;
}
.battle-leader-row img {
width:54px;
height:54px;
border-radius:12px;
object-fit:cover;
}
.battle-rank {
display:inline-flex;
min-width:38px;
height:38px;
align-items:center;
justify-content:center;
border-radius:999px;
background:rgba(212,162,76,.14);
color:var(--accent2);
font-size:12px;
font-weight:900;
}
.battle-leader-row strong { display:block; font-size:14px; color:var(--text); }
.battle-leader-row span { display:block; color:var(--text-muted); font-size:12px; margin-top:3px; }
.battle-leader-row em { color:var(--accent2); font-style:normal; font-weight:800; font-size:13px; }
.battle-detail-hero {
min-height:420px;
display:flex;
align-items:flex-end;
}
.battle-detail-bg {
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:.38;
filter:saturate(1.1);
}
.battle-detail-hero::after {
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(10,8,5,.94),rgba(10,8,5,.64),rgba(10,8,5,.28));
}
.battle-detail-content {
position:relative;
z-index:1;
padding:56px;
max-width:820px;
}
.battle-detail-metrics {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:22px;
}
.battle-detail-metrics span {
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.07);
border-radius:999px;
padding:10px 14px;
color:var(--text-muted);
font-size:12px;
}
.battle-detail-metrics strong { color:var(--text); }
.battle-detail-layout {
display:grid;
grid-template-columns:300px minmax(0,1fr);
gap:22px;
padding:28px 0 72px;
}
.battle-brief-card {
padding:24px;
height:max-content;
position:sticky;
top:90px;
}
.battle-brief-card p {
color:var(--text-muted);
font-size:14px;
line-height:1.7;
white-space:pre-line;
}
.battle-prize {
border:1px solid rgba(212,162,76,.22);
background:rgba(212,162,76,.08);
border-radius:18px;
padding:16px;
margin:18px 0;
}
.battle-prize span { color:var(--accent2); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.battle-prize strong { display:block; margin-top:5px; }
.battle-entry-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.battle-entry-card.is-voted {
border-color:rgba(16,185,129,.38);
box-shadow:0 0 0 1px rgba(16,185,129,.12);
}
.battle-entry-cover {
position:relative;
aspect-ratio:16/9;
background:#141414;
overflow:hidden;
}
.battle-entry-cover img { width:100%; height:100%; object-fit:cover; }
.battle-entry-cover .battle-rank {
position:absolute;
left:14px;
top:14px;
}
.battle-entry-meta {
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:10px;
}
.battle-entry-meta a,
.battle-entry-meta span {
color:var(--accent2);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
}
.battle-maker-link {
display:inline-block;
color:var(--text-muted);
font-size:13px;
margin-bottom:10px;
}
.battle-entry-body p {
color:var(--text-muted);
font-size:13px;
line-height:1.6;
margin:10px 0;
}
.battle-entry-body audio {
width:100%;
height:38px;
margin-top:10px;
}
.battle-entry-footer {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
}
.battle-entry-footer span {
color:var(--text-muted);
font-size:13px;
}
.battle-entry-footer strong { color:var(--text); font-size:18px; }
.btn-small { min-height:36px; padding:0 14px; font-size:12px; }
.btn:disabled {
opacity:.58;
cursor:not-allowed;
transform:none !important;
}
.battle-dashboard-hero {
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
padding:42px;
}
.battle-dashboard-stat {
min-width:170px;
border:1px solid rgba(255,255,255,.1);
border-radius:22px;
padding:22px;
text-align:center;
background:rgba(255,255,255,.04);
}
.battle-dashboard-stat strong {
display:block;
color:var(--accent2);
font-family:var(--font-display);
font-size:42px;
line-height:1;
}
.battle-dashboard-stat span {
display:block;
color:var(--text-muted);
margin-top:8px;
font-size:12px;
text-transform:uppercase;
letter-spacing:.09em;
}
.battle-info-note {
border:1px solid rgba(16,185,129,.2);
background:rgba(16,185,129,.08);
color:#10b981;
border-radius:14px;
padding:12px;
font-size:13px;
font-weight:700;
margin-top:14px;
}
.battle-info-note.muted {
border-color:rgba(255,255,255,.1);
background:rgba(255,255,255,.04);
color:var(--text-muted);
}
.battle-join-form {
display:grid;
gap:12px;
margin-top:16px;
}
.battle-join-form label {
display:grid;
gap:6px;
color:var(--text-muted);
font-size:12px;
font-weight:700;
}
.battle-join-form select,
.battle-join-form textarea {
width:100%;
background:rgba(255,255,255,.05);
border:1px solid var(--line);
color:var(--text);
border-radius:12px;
padding:11px 12px;
outline:none;
}
.battle-join-form textarea { resize:vertical; min-height:84px; }
.battle-join-form select:focus,
.battle-join-form textarea:focus { border-color:var(--accent); }
@media(max-width:980px) {
.battle-hero,
.battle-featured-card,
.battle-detail-layout,
.battle-dashboard-hero { grid-template-columns:1fr; }
.battle-hero { padding:34px; }
.battle-detail-content { padding:34px; }
.battle-grid,
.beatmaker-battle-grid,
.battle-entry-grid { grid-template-columns:1fr; }
.battle-brief-card { position:static; }
.battle-section-head { align-items:flex-start; flex-direction:column; }
}
@media(max-width:620px) {
.battle-hero,
.battle-detail-hero,
.battle-dashboard-hero,
.battle-featured,
.battle-section,
.battle-detail-layout,
.beatmaker-battle-page {
width:min(100% - 24px, 1180px);
}
.battle-hero h1,
.battle-detail-hero h1,
.battle-dashboard-hero h1 { font-size:clamp(34px,12vw,48px); }
.battle-leader-row { grid-template-columns:auto 46px minmax(0,1fr); }
.battle-leader-row em { grid-column:3; }
.battle-dashboard-hero { flex-direction:column; align-items:flex-start; padding:28px; }
}
/* Final marketplace card normalization (kept last to win legacy skins). v2 */
body.app-shell .next-beat-card,
body.app-shell .beat-card {
border:0;
border-radius:8px;
background:transparent;
box-shadow:none;
}
body.app-shell .next-beat-card:hover,
body.app-shell .beat-card:hover,
body.app-shell .next-beat-card.is-playing,
body.app-shell .beat-card.is-playing,
body.app-shell .next-beat-card.is-current,
body.app-shell .beat-card.is-current {
border-color:transparent;
box-shadow:none;
transform:none;
}
body.app-shell .next-cover,
body.app-shell .beat-card-cover { aspect-ratio:1/1; border-radius:8px; }
body.app-shell .next-cover img,
body.app-shell .beat-card-cover img { filter:none; }
body.app-shell .next-cover button,
body.app-shell .beat-card-play-btn {
color:#080808;
background:#fff;
border:0;
box-shadow:0 10px 30px rgba(0,0,0,.38);
}
body.app-shell .next-cover button:hover,
body.app-shell .beat-card-play-btn:hover,
body.app-shell .next-beat-card.is-current .next-cover button,
body.app-shell .beat-card.is-current .beat-card-play-btn,
body.app-shell .next-beat-card.is-playing .next-cover button,
body.app-shell .beat-card.is-playing .beat-card-play-btn {
color:#fff;
background:var(--brand-blue);
box-shadow:0 10px 30px rgba(0,106,255,.28);
}
body.app-shell .next-card-cta-row .beat-action-btn.topline {
color:#fff;
border-color:rgba(255,255,255,.15);
background:#1a1a1a;
}
body.app-shell .next-card-cta-row .beat-action-btn.buy {
color:#07160d;
border-color:var(--brand-green);
background:var(--brand-green);
box-shadow:none;
}
body.app-shell .metric-tile strong { color:#66a3ff; letter-spacing:0; }
body.app-shell .beat-action-btn:hover {
color:#fff;
border-color:rgba(255,255,255,.24);
background:#242424;
}
body.app-shell .beat-action-btn.topline,
body.app-shell .beat-action-btn.topline:hover {
color:#fff;
border-color:rgba(255,255,255,.15);
background:#1a1a1a;
}
body.app-shell .beat-action-btn.buy,
body.app-shell .beat-action-btn.buy:hover {
color:#07160d;
border-color:var(--brand-green);
background:var(--brand-green);
}
body.app-shell .beat-track-row.is-playing { background:rgba(0,106,255,.08); }
body.app-shell .filters-panel.filters-horizontal { background:transparent; border-inline:0; border-radius:0; }
/* Authenticated workspace navigation. Keep this block versioned for MAMP asset refreshes. */
.workspace-nav {
position:fixed;
z-index:2200;
top:74px;
left:0;
right:0;
height:60px;
border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(12,14,19,.96);
backdrop-filter:blur(20px);
}
.workspace-nav-scroll { width:100%; height:100%; display:flex; align-items:center; gap:8px; padding:0 clamp(18px,3vw,48px); overflow-x:auto; scrollbar-width:none; }
.workspace-nav-scroll::-webkit-scrollbar { display:none; }
.workspace-nav a,.workspace-nav button { min-width:0; min-height:42px; display:flex; flex:1 1 0; align-items:center; justify-content:center; padding:0 18px; border:0; border-radius:7px; color:rgba(248,250,252,.68); background:transparent; font-size:14px; font-weight:750; white-space:nowrap; cursor:pointer; }
.workspace-nav a:hover,.workspace-nav a.active,.workspace-nav button:hover { color:#fff; background:rgba(255,255,255,.07); }
.workspace-nav a.active { color:#68a4ff; }
body.has-workspace-nav #main-content { padding-top:134px; }
.battle-coming-soon { max-width:1180px; margin:0 auto 34px; padding:28px clamp(22px,4vw,44px); border:1px solid rgba(0,106,255,.28); border-radius:8px; background:#11151d; }
.battle-coming-soon h2 { margin:8px 0 7px; font-size:clamp(24px,3vw,38px); }
.battle-coming-soon p { max-width:720px; color:rgba(248,250,252,.58); line-height:1.7; }
/* Favorites uses seven real columns: number, cover, title, genre, tempo, duration, actions. */
.favorites-tracklist .beats-tracklist-head,
.favorites-tracklist .beat-track-row { grid-template-columns:36px 56px minmax(210px,1fr) 130px 145px 72px minmax(210px,auto); min-width:980px; }
.favorites-tracklist .beat-actions-cell { grid-template-columns:auto 34px auto; gap:10px; min-width:210px; }
.profile-tracklist .beats-tracklist-head,
.profile-tracklist .beat-track-row {
grid-template-columns:36px 56px minmax(220px,1.35fr) minmax(110px,.65fr) minmax(130px,.7fr) 64px minmax(180px,auto);
min-width:980px;
}
.genre-tracklist .beats-tracklist-head,
.genre-tracklist .beat-track-row {
grid-template-columns:36px 56px minmax(220px,1.35fr) minmax(150px,.75fr) 100px minmax(135px,.7fr) minmax(180px,auto);
min-width:1020px;
}
.profile-tracklist .beat-actions-cell,
.genre-tracklist .beat-actions-cell {
grid-template-columns:minmax(94px,auto) auto;
gap:12px;
min-width:180px;
}
.profile-tracklist .beat-buy-btn,
.genre-tracklist .beat-buy-btn {
justify-self:end;
}
.favorites-tracklist .beat-icon-btn { justify-content:center; }
.favorites-tracklist .beat-track-row { transition:opacity .2s ease,transform .2s ease,background var(--transition); }
@media(max-width:900px) {
.workspace-nav { top:112px; }
.workspace-nav-scroll { padding-inline:14px; }
.workspace-nav a,.workspace-nav button { flex:0 0 auto; min-width:128px; }
body.has-workspace-nav #main-content { padding-top:172px; }
}
@media(max-width:560px) {
.workspace-nav { top:118px; }
.workspace-nav-scroll { padding:0 10px; }
.workspace-nav a,.workspace-nav button { min-width:122px; padding-inline:14px; font-size:13px; }
body.has-workspace-nav #main-content { padding-top:178px; }
}
/* Custom dark selects: native popup colors differ between browsers and macOS themes. */
.jb-select { position:relative;min-width:0; }
.jb-select-native { position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important; }
.jb-select-trigger { width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:#f4f4f4;background:#141414;font:inherit;font-size:12px;text-align:left;cursor:pointer; }
.jb-select-trigger span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.jb-select-trigger i { width:8px;height:8px;flex:0 0 auto;border-right:2px solid #9ca3af;border-bottom:2px solid #9ca3af;transform:rotate(45deg) translateY(-2px);transition:transform .16s ease; }
.jb-select-trigger:hover,.jb-select-trigger.is-open { border-color:rgba(63,130,255,.65);background:#191919; }
.jb-select-trigger.is-open i { transform:rotate(225deg) translate(-1px,-1px); }
.jb-select-menu { position:fixed;z-index:10000;display:none;max-height:min(360px,60vh);overflow:auto;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#141414;box-shadow:0 20px 60px rgba(0,0,0,.55);scrollbar-color:#3b3b3b transparent; }
.jb-select-menu.is-open { display:grid;gap:3px; }
.jb-select-option { width:100%;min-height:38px;padding:9px 12px;border:0;border-radius:6px;color:#b8b8b8;background:transparent;font:inherit;font-size:13px;text-align:left;cursor:pointer; }
.jb-select-option:hover,.jb-select-option[aria-selected="true"] { color:#fff;background:#222; }
.jb-select-option[aria-selected="true"]::after { content:'✓';float:right;color:#66a3ff;font-weight:800; }
.filters-horizontal .jb-select { min-width:100%; }
#sort-form .jb-select { min-width:150px; }
.range-filter-trigger { width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:#f4f4f4;background:#141414;font:inherit;font-size:12px;cursor:pointer; }
.range-filter-trigger i { width:8px;height:8px;border-right:2px solid #9ca3af;border-bottom:2px solid #9ca3af;transform:rotate(45deg) translateY(-2px); }
.range-filter-trigger:hover,.range-filter-trigger.is-open { border-color:rgba(63,130,255,.65);background:#191919; }
.range-filter-trigger.is-open i { transform:rotate(225deg); }
.range-filter-menu { position:fixed;z-index:10001;display:none;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#141414;box-shadow:0 20px 60px rgba(0,0,0,.55); }
.range-filter-menu.is-open { display:block; }
.range-filter-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.range-filter-head strong { color:#fff;font-size:17px; }
.range-filter-head button { width:30px;height:30px;border:0;border-radius:50%;color:#b7b7b7;background:#242424;font-size:20px;cursor:pointer; }
.range-number-row { display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:end;gap:10px; }
.range-number-row label span { display:block;margin-bottom:6px;color:#777;font-size:10px;text-transform:uppercase; }
.range-number-row input { width:100%;height:46px;padding:0 12px;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#fff;background:#171717;font:inherit;font-size:13px;outline:none; }
.range-number-row input:focus { border-color:#3f82ff; }
.range-number-row em { padding-bottom:14px;color:#666;font-size:11px;font-style:normal;text-align:center; }
.range-filter-apply { width:100%;min-height:40px;margin-top:14px;border:0;border-radius:7px;color:#fff;background:#006aff;font-size:12px;font-weight:750;cursor:pointer; }
.dual-range { position:relative;height:32px;margin:2px 0 16px;background:linear-gradient(to right,#2b2b2b 0 var(--range-start),#006aff var(--range-start) var(--range-end),#2b2b2b var(--range-end) 100%) center/100% 4px no-repeat; }
.dual-range input { position:absolute;inset:0;width:100%;height:32px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none; }
.dual-range input::-webkit-slider-runnable-track { height:4px;background:transparent; }
.dual-range input::-webkit-slider-thumb { width:18px;height:18px;margin-top:-7px;border:0;border-radius:50%;background:#006aff;appearance:none;-webkit-appearance:none;pointer-events:auto;cursor:grab;box-shadow:0 0 0 3px #141414; }
.dual-range input::-moz-range-track { height:4px;background:transparent; }
.dual-range input::-moz-range-thumb { width:18px;height:18px;border:0;border-radius:50%;background:#006aff;pointer-events:auto;cursor:grab;box-shadow:0 0 0 3px #141414; }
@media(max-width:1200px) {
body.app-shell .explore-layout { grid-template-columns:1fr; }
body.app-shell .filters-panel { position:static; }
body.app-shell .beats-tracklist-head,
body.app-shell .beat-track-row { grid-template-columns:36px 50px minmax(260px,1fr) minmax(190px,.8fr) 110px 136px; min-width:850px; }
body.app-shell .profile-tracklist .beats-tracklist-head,
body.app-shell .profile-tracklist .beat-track-row {
grid-template-columns:36px 50px minmax(220px,1.25fr) minmax(110px,.65fr) minmax(130px,.7fr) 64px minmax(180px,auto);
min-width:960px;
}
body.app-shell .genre-tracklist .beats-tracklist-head,
body.app-shell .genre-tracklist .beat-track-row {
grid-template-columns:36px 50px minmax(220px,1.25fr) minmax(150px,.75fr) 100px minmax(135px,.7fr) minmax(180px,auto);
min-width:1000px;
}
}
/* Image-led music style cards */
body.app-shell .music-style-card {
min-height:0;
padding:0;
border-radius:8px;
border:1px solid rgba(255,255,255,.10);
background:#111;
isolation:isolate;
}
body.app-shell .music-style-card::before {
display:none;
}
body.app-shell .music-style-image {
position:relative;
display:block;
width:100%;
height:auto;
aspect-ratio:1.3 / 1;
object-fit:cover;
filter:saturate(1.05) brightness(.92);
transition:transform .28s ease, filter .28s ease;
}
body.app-shell .music-style-card:hover .music-style-image {
transform:scale(1.02);
filter:saturate(1.08) brightness(.96);
}
body.app-shell .music-style-copy {
position:relative;
padding:14px;
background:#111;
}
body.app-shell .music-style-copy strong { display:block; font-size:15px; letter-spacing:0; }
body.app-shell .music-style-copy p {
min-height:38px;
margin-top:5px;
color:rgba(255,255,255,.58);
font-size:12px;
line-height:1.55;
}
@media(max-width:720px) {
body.app-shell .music-styles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.app-shell .music-style-copy { padding:12px; }
body.app-shell .music-style-copy strong { font-size:14px; }
body.app-shell .music-style-copy p { font-size:11px; }
}
@media(max-width:440px) {
body.app-shell .music-styles-grid { grid-template-columns:1fr; }
}
/* Homepage visual alignment: JammBeat blue, green and neutral surfaces */
body.app-shell .music-styles-grid {
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-flow:dense;
gap:12px;
}
body.app-shell .music-style-card {
position:relative;
min-height:280px;
overflow:hidden;
border-color:rgba(255,255,255,.09);
background:#141414;
}
body.app-shell .music-style-card:nth-child(1),
body.app-shell .music-style-card:nth-child(7) {
grid-column:span 2;
}
body.app-shell .music-style-image {
position:absolute;
inset:0;
width:100%;
height:100%;
aspect-ratio:auto;
filter:saturate(.92) brightness(.78);
transition:transform .35s ease, filter .35s ease;
}
body.app-shell .music-style-card::after {
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.9) 100%);
pointer-events:none;
}
body.app-shell .music-style-card:hover {
border-color:rgba(0,106,255,.65);
transform:translateY(-2px);
}
body.app-shell .music-style-card:hover .music-style-image {
transform:scale(1.045);
filter:saturate(1.04) brightness(.88);
}
body.app-shell .music-style-copy {
position:absolute;
z-index:2;
inset:auto 0 0;
padding:20px 54px 20px 20px;
background:transparent;
}
body.app-shell .music-style-copy::after {
content:'\2197';
position:absolute;
right:18px;
bottom:20px;
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:50%;
color:#fff;
background:var(--brand-blue);
font-size:14px;
}
body.app-shell .music-style-copy strong {
font-size:clamp(19px,2vw,27px);
line-height:1.05;
}
body.app-shell .music-style-copy p {
min-height:0;
max-width:38ch;
margin-top:7px;
color:rgba(255,255,255,.72);
font-size:12px;
}
body.app-shell .topline-banner {
border-color:rgba(255,255,255,.08);
background:#0a0a09;
}
body.app-shell .topline-banner::before {
background:linear-gradient(90deg,rgba(0,106,255,.10),transparent 42%);
opacity:1;
}
body.app-shell .topline-banner::after { display:none; }
body.app-shell .section-kicker {
color:#66a3ff;
background:rgba(0,106,255,.10);
border-color:rgba(0,106,255,.28);
box-shadow:none;
}
body.app-shell .topline-banner h2 { letter-spacing:0; }
body.app-shell .topline-banner h2 span {
color:#fff;
background:none;
-webkit-text-fill-color:currentColor;
}
body.app-shell .topline-feature-list svg { color:var(--brand-green); }
body.app-shell .topline-card-preview {
border-color:rgba(255,255,255,.11);
background:#141414;
box-shadow:none;
}
body.app-shell .topline-card-preview:hover,
body.app-shell .topline-card-preview.is-playing {
border-color:rgba(0,106,255,.55);
box-shadow:none;
}
body.app-shell .topline-card-cover button {
background:var(--brand-blue);
box-shadow:0 12px 30px rgba(0,106,255,.28);
}
body.app-shell .topline-card-preview.is-playing .topline-card-cover button {
color:#07160d;
background:var(--brand-green);
box-shadow:0 12px 30px rgba(0,211,98,.2);
}
body.app-shell .topline-card-heading em {
color:#66a3ff;
background:rgba(0,106,255,.10);
border-color:rgba(0,106,255,.25);
}
body.app-shell .topline-icon-action {
background:rgba(0,106,255,.12);
border-color:rgba(0,106,255,.38);
}
body.app-shell .topline-icon-action.is-buy {
color:#07160d;
background:var(--brand-green);
border-color:var(--brand-green);
box-shadow:none;
}
body.app-shell .topline-icon-action:hover { border-color:var(--brand-blue-hover); }
body.app-shell .home-faq {
background:#0a0a09;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
}
body.app-shell .home-faq h2 { letter-spacing:0; }
body.app-shell .faq-grid details {
border:1px solid rgba(255,255,255,.09);
border-radius:8px;
background:#141414;
}
body.app-shell .faq-grid details[open] { border-color:rgba(0,106,255,.42); }
body.app-shell .faq-grid summary::before { border-color:#66a3ff; }
body.app-shell .faq-ask-btn,
body.app-shell .faq-ask-btn:hover {
background:var(--brand-blue);
box-shadow:none;
}
body.app-shell .subscribe-section {
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
background:#111;
}
body.app-shell .subscribe-section h2 { letter-spacing:0; }
body.app-shell .subscribe-section form {
border-color:rgba(255,255,255,.12);
background:#1a1a1a;
}
body.app-shell .subscribe-section button,
body.app-shell .subscribe-section button:hover { background:var(--brand-blue); }
@media(max-width:980px) {
body.app-shell .music-styles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px) {
body.app-shell .music-styles-grid { grid-template-columns:1fr; }
body.app-shell .music-style-card,
body.app-shell .music-style-card:nth-child(1),
body.app-shell .music-style-card:nth-child(7) { grid-column:auto; min-height:250px; }
}
/* Home hero media */
body.app-shell .creative-hero { width:100%;isolation:isolate;justify-content:flex-start; }
.creative-hero-media { width:100%;height:100%; }
body.app-shell .creative-hero-copy {
max-width:790px;
margin:0;
padding:54px clamp(24px,5vw,76px);
}
body.app-shell .creative-hero h1 {
max-width:720px;
font-size:clamp(54px,6vw,86px);
}
@media(max-width:980px) {
body.app-shell .creative-hero::before {
background:linear-gradient(90deg,rgba(5,7,10,.96) 0%,rgba(5,7,10,.84) 58%,rgba(5,7,10,.45) 100%);
}
body.app-shell .creative-hero h1 { letter-spacing:0; }
body.app-shell .creative-hero-copy { max-width:720px;margin:0; }
}
@media(max-width:640px) {
body.app-shell .creative-hero::before {
background:linear-gradient(180deg,rgba(5,7,10,.48) 0%,rgba(5,7,10,.82) 34%,rgba(5,7,10,.98) 100%);
}
.creative-hero-media img { object-position:68% 50%; }
}