:root{--r:#73070B;--bg:#ececeb;--dark:#0b0c10;--panel:#121318;--line:#d3d3d3;--muted:#777}
*{box-sizing:border-box;border-radius:0!important}html,body{margin:0;background:var(--bg);color:#111;font-family:Arial,sans-serif}a{text-decoration:none;color:inherit}button{font:inherit}
.site-header{min-height:68px;background:#050608;border-bottom:3px solid var(--r);display:flex;align-items:center;gap:32px;padding:0 28px;color:#fff}.brand{display:flex;align-items:center;gap:10px;font-size:25px}.brand span{background:var(--r);padding:14px 12px;font-weight:900}.site-header nav{display:flex;gap:20px;font-size:12px;flex-wrap:wrap}.site-header nav a:hover{color:var(--r)}
.storefront{padding-bottom:95px}.artist-hero{position:relative;min-height:430px;background:#090a0e;color:#fff;overflow:hidden;border-bottom:3px solid var(--r)}.artist-banner{position:absolute;inset:0;background:#15171c center/cover no-repeat}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#050608ed 0%,#050608b8 46%,#05060844 100%)}.artist-identity{position:relative;z-index:2;min-height:430px;max-width:1380px;margin:auto;padding:60px 34px 36px;display:grid;grid-template-columns:190px minmax(0,1fr) auto;align-items:end;gap:24px}.artist-avatar{width:190px;height:190px;background:#222 center/cover no-repeat;border:5px solid #fff;box-shadow:0 8px 30px #0009}.artist-copy{max-width:700px}.artist-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.artist-name-row h1{font-size:42px;margin:0}.verified-badge{background:var(--r);padding:7px 9px;font-size:9px;font-weight:900}.artist-location{margin:8px 0;color:#d3d6dc}.artist-bio{line-height:1.55;color:#b9bdc6;max-width:680px}.social-links{display:flex;gap:8px;flex-wrap:wrap}.social-links a{border:1px solid #555b67;background:#1117;padding:7px 10px;font-size:9px}.artist-actions{display:flex;gap:8px;align-self:end;flex-wrap:wrap}.follow-button,.owner-button{border:0;background:var(--r);color:#fff;padding:12px 18px;font-weight:900;cursor:pointer}.owner-button.ghost{background:#13151a;border:1px solid #656b76}
.artist-stats{max-width:1380px;margin:18px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.artist-stats article{background:#fff;border:1px solid #cfcfcf;border-top:3px solid var(--r);padding:16px}.artist-stats span{display:block;color:#777;font-size:10px}.artist-stats strong{display:block;font-size:26px;margin-top:5px}
.store-tabs{max-width:1380px;margin:16px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr)}.store-tab{background:#111217;color:#fff;border:1px solid #2f333b;padding:13px;font-weight:800;cursor:pointer}.store-tab.active{background:var(--r);border-color:var(--r)}
.store-panel{display:none;max-width:1380px;margin:auto;padding:22px 24px 40px}.store-panel.active{display:block}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:15px}.section-heading span{color:var(--r);font-size:9px;font-weight:900;letter-spacing:1px}.section-heading h2{font-size:23px;margin:4px 0 0}.section-heading p{margin:0;color:#6f737b;font-size:11px}
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.track-card{background:#fff;border:1px solid #d0d0d0;box-shadow:0 2px 8px #0000000f}.cover{position:relative;aspect-ratio:1/1;background:#181a20 center/cover no-repeat}.cover button{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border:1px solid #fff;background:#101116;color:#fff;cursor:pointer}.track-body{padding:12px}.track-body h3{margin:0;font-size:15px}.track-meta{color:#71757d;font-size:10px;margin-top:5px}.track-stats{display:flex;gap:13px;font-size:9px;margin:8px 0;color:#555}.licenses{display:grid;gap:6px;margin-top:10px}.license{display:flex;justify-content:space-between;align-items:center;border:1px solid #ddd;background:#f7f7f6;padding:8px;font-size:9px}.license strong{color:var(--r)}.license a{background:#111217;color:#fff;padding:6px 8px;font-weight:800}
.bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bundle-card{background:#111217;color:#fff;border:1px solid #30343c;border-top:3px solid var(--r);padding:16px}.bundle-card h3{margin:0 0 6px}.bundle-card p{color:#aab0ba;font-size:10px;line-height:1.5}.bundle-card .bundle-meta{display:flex;justify-content:space-between;margin-top:14px}.bundle-price{color:#52e57a;font-size:20px;font-weight:900}.bundle-card a{display:block;background:var(--r);text-align:center;padding:10px;margin-top:10px;font-weight:900}
.about-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.about-grid article{background:#fff;border:1px solid #d0d0d0;padding:17px}.about-grid span{display:block;color:var(--r);font-size:9px;font-weight:900}.about-grid p{line-height:1.6;color:#555}.about-grid strong{display:block;margin-top:7px}.empty{padding:30px;text-align:center;color:#777}
.mini-player{position:fixed;left:0;right:0;bottom:0;z-index:50;min-height:82px;background:#07080b;border-top:2px solid var(--r);display:grid;grid-template-columns:58px 190px 45px minmax(0,1fr) 50px;align-items:center;gap:11px;padding:10px 24px;color:#fff}.mini-player[hidden]{display:none}.mini-cover{width:58px;height:58px;background:#20232a center/cover no-repeat}.mini-copy strong,.mini-copy span{display:block}.mini-copy span{color:#8e949e;font-size:9px;margin-top:4px}.mini-play{width:38px;height:38px;background:var(--r);border:1px solid #fff;color:#fff;cursor:pointer}.mini-wave{position:relative;height:35px;border:0;background:transparent;overflow:hidden;cursor:pointer}.mini-wave-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}.mini-wave-bars i{flex:1;height:55%;background:#626874}.mini-wave-bars i:nth-child(3n){height:90%}.mini-wave-bars i:nth-child(4n){height:35%}.mini-progress{position:absolute;inset:0 auto 0 0;width:0%;overflow:hidden}.mini-progress .mini-wave-bars{width:100%}.mini-progress i{background:var(--r)}.mini-time{font-size:9px;color:#9ba0aa}
@media(max-width:1000px){.artist-identity{grid-template-columns:150px 1fr}.artist-avatar{width:150px;height:150px}.artist-actions{grid-column:1/-1}.track-grid{grid-template-columns:repeat(2,1fr)}.bundle-grid{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr 1fr}.mini-player{grid-template-columns:48px 140px 42px 1fr}.mini-time{display:none}}
@media(max-width:650px){.site-header{padding:10px 14px;flex-wrap:wrap}.site-header nav{width:100%;overflow:auto}.artist-identity{grid-template-columns:1fr;padding:40px 20px 25px}.artist-avatar{width:130px;height:130px}.artist-stats{grid-template-columns:1fr 1fr}.track-grid,.bundle-grid,.about-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.mini-player{grid-template-columns:42px 1fr 42px;padding:8px 10px}.mini-wave,.mini-time{display:none}.artist-name-row h1{font-size:32px}}
/* =========================================================
STAGE 10.2 — STOREFRONT POLISH
========================================================= */
.storefront{
min-height:100vh !important;
padding-bottom:105px !important;
}
.artist-hero{
min-height:380px !important;
}
.artist-identity{
min-height:380px !important;
padding-top:48px !important;
padding-bottom:28px !important;
grid-template-columns:165px minmax(0,1fr) auto !important;
}
.artist-avatar{
width:165px !important;
height:165px !important;
object-fit:cover !important;
}
.artist-name-row h1{
font-size:38px !important;
}
.artist-bio{
margin-bottom:12px !important;
}
.artist-actions{
min-width:160px !important;
justify-content:flex-end !important;
}
.follow-button,
.owner-button{
min-width:130px !important;
text-align:center !important;
}
.follow-button.following{
background:#14161b !important;
border:1px solid #73070B !important;
color:#73070B !important;
}
.artist-stats{
margin-top:14px !important;
}
.artist-stats article{
min-height:88px !important;
}
.store-panel{
padding-top:18px !important;
}
.track-grid{
grid-template-columns:repeat(auto-fill,minmax(230px,270px)) !important;
justify-content:start !important;
align-items:start !important;
gap:14px !important;
}
.track-card{
width:100% !important;
max-width:270px !important;
min-height:0 !important;
overflow:hidden !important;
}
.cover{
aspect-ratio:1 / 1 !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-color:#0f1115 !important;
}
.cover button{
right:9px !important;
bottom:9px !important;
width:36px !important;
height:36px !important;
display:grid !important;
place-items:center !important;
font-size:14px !important;
}
.track-body{
padding:11px !important;
}
.track-body h3{
font-size:14px !important;
line-height:1.25 !important;
margin-bottom:2px !important;
}
.track-meta{
min-height:25px !important;
}
.track-stats{
border-top:1px solid #ececec !important;
border-bottom:1px solid #ececec !important;
padding:7px 0 !important;
margin:7px 0 9px !important;
}
.licenses{
gap:5px !important;
}
.license{
min-height:38px !important;
padding:7px 8px !important;
background:#fafafa !important;
}
.license span{
font-weight:700 !important;
}
.license strong{
margin-left:auto !important;
margin-right:8px !important;
}
.license a{
min-width:42px !important;
text-align:center !important;
}
.free-license-note{
color:#777 !important;
font-size:8px !important;
margin-top:5px !important;
}
.no-license{
border:1px dashed #d5d5d5 !important;
background:#fafafa !important;
color:#777 !important;
padding:10px !important;
font-size:9px !important;
text-align:center !important;
}
.bundle-grid{
grid-template-columns:repeat(auto-fill,minmax(250px,320px)) !important;
justify-content:start !important;
}
.social-links a{
transition:.15s ease !important;
}
.social-links a:hover{
border-color:#73070B !important;
color:#fff !important;
}
.store-tab{
transition:.15s ease !important;
}
.store-tab:hover{
background:#1b1d23 !important;
}
.store-tab.active:hover{
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
}
.about-grid article{
min-height:120px !important;
}
.mini-player{
grid-template-columns:54px 190px 42px minmax(220px,1fr) 54px !important;
min-height:86px !important;
}
.mini-cover{
width:54px !important;
height:54px !important;
background-size:contain !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-color:#101216 !important;
}
.mini-wave-bars{
gap:2px !important;
}
.mini-wave-bars i{
min-width:2px !important;
background:#555c67 !important;
}
.mini-progress .mini-wave-bars i{
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
}
.section-heading{
border-bottom:1px solid #d5d5d5 !important;
padding-bottom:10px !important;
}
@media(max-width:1000px){
.artist-identity{
grid-template-columns:135px 1fr !important;
}
.artist-avatar{
width:135px !important;
height:135px !important;
}
.track-grid{
grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important;
}
.track-card{
max-width:none !important;
}
}
@media(max-width:650px){
.artist-identity{
grid-template-columns:1fr !important;
}
.artist-actions{
justify-content:flex-start !important;
}
.track-grid{
grid-template-columns:1fr !important;
}
.track-card{
max-width:100% !important;
}
}
/* =========================================================
STAGE 10.4 — TRUE OSBEATS STOREFRONT REDESIGN
========================================================= */
:root{
--os-red:#73070B;
--os-red-dark:#73070B;
--os-black:#07080b;
--os-panel:#111318;
--os-panel-2:#16191f;
--os-line:#2a2e36;
--os-muted:#969ca7;
--os-white:#f5f5f5;
}
html,
body{
background:#0a0b0e !important;
color:#fff !important;
}
body{
min-height:100vh !important;
}
.site-header{
position:sticky !important;
top:0 !important;
z-index:80 !important;
min-height:64px !important;
background:#050608 !important;
border-bottom:2px solid var(--os-red) !important;
box-shadow:0 8px 20px #0007 !important;
}
.site-header nav a{
color:#fff !important;
}
.site-header nav a:hover{
color:var(--os-red) !important;
}
.storefront{
background:
radial-gradient(circle at 10% 10%, rgba(89,5,9,.06), transparent 35%),
#0a0b0e !important;
min-height:100vh !important;
padding-bottom:110px !important;
}
/* HERO */
.artist-hero{
min-height:390px !important;
border-bottom:2px solid var(--os-red) !important;
background:#050608 !important;
}
.artist-banner{
background-size:cover !important;
background-position:center center !important;
filter:saturate(.9) contrast(1.05) !important;
}
.hero-overlay{
background:
linear-gradient(90deg,#050608f7 0%,#050608d8 32%,#050608a5 58%,#0506087a 100%),
linear-gradient(0deg,#050608d8 0%,transparent 45%) !important;
}
.artist-identity{
min-height:390px !important;
max-width:1450px !important;
grid-template-columns:175px minmax(0,1fr) 180px !important;
gap:28px !important;
padding:62px 34px 32px !important;
align-items:end !important;
}
.artist-avatar{
width:175px !important;
height:175px !important;
background-size:cover !important;
background-position:center !important;
border:3px solid #fff !important;
outline:5px solid rgba(89,5,9,.15) !important;
box-shadow:0 16px 40px #000a !important;
}
.artist-copy{
max-width:760px !important;
}
.artist-name-row h1{
font-size:44px !important;
letter-spacing:-1px !important;
margin:0 !important;
}
.verified-badge{
background:transparent !important;
border:1px solid var(--os-red) !important;
color:var(--os-red) !important;
padding:6px 9px !important;
}
.artist-location{
color:#d6d9df !important;
margin:8px 0 10px !important;
font-size:13px !important;
}
.artist-bio{
color:#adb3bd !important;
line-height:1.55 !important;
font-size:13px !important;
margin-bottom:13px !important;
}
.social-links{
gap:7px !important;
}
.social-links a{
border:1px solid #4c515c !important;
background:#0c0e12cc !important;
color:#fff !important;
padding:8px 10px !important;
font-size:9px !important;
font-weight:700 !important;
}
.social-links a:hover{
border-color:var(--os-red) !important;
color:var(--os-red) !important;
}
.artist-actions{
display:grid !important;
gap:8px !important;
align-self:end !important;
}
.follow-button,
.owner-button{
width:100% !important;
min-width:150px !important;
padding:12px 16px !important;
text-align:center !important;
font-size:11px !important;
}
.follow-button{
background:var(--os-red) !important;
border:1px solid var(--os-red) !important;
}
.follow-button:hover{
background:var(--os-red-dark) !important;
}
.follow-button.following{
background:#111318 !important;
color:var(--os-red) !important;
border:1px solid var(--os-red) !important;
}
.owner-button{
background:var(--os-red) !important;
border:1px solid var(--os-red) !important;
}
.owner-button.ghost{
background:#111318 !important;
border-color:#4b505b !important;
}
/* STATS STRIP */
.artist-stats-wrap{
background:#0d0f13 !important;
border-bottom:1px solid var(--os-line) !important;
}
.artist-stats{
max-width:1450px !important;
margin:0 auto !important;
padding:14px 24px !important;
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:10px !important;
}
.artist-stats article{
min-height:82px !important;
background:linear-gradient(145deg,#15181e,#101217) !important;
border:1px solid var(--os-line) !important;
border-top:3px solid var(--os-red) !important;
padding:15px 17px !important;
}
.artist-stats span{
color:var(--os-muted) !important;
text-transform:uppercase !important;
letter-spacing:.5px !important;
font-size:9px !important;
}
.artist-stats strong{
color:#fff !important;
font-size:25px !important;
}
/* TABS */
.store-tabs{
max-width:1450px !important;
margin:14px auto 0 !important;
padding:0 24px !important;
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
}
.store-tab{
background:#111318 !important;
color:#fff !important;
border:1px solid #2e323a !important;
padding:14px !important;
font-size:12px !important;
}
.store-tab:hover{
background:#191c23 !important;
}
.store-tab.active{
background:var(--os-red) !important;
border-color:var(--os-red) !important;
}
/* PANELS */
.store-panel{
max-width:1450px !important;
padding:20px 24px 45px !important;
}
.section-heading{
border-bottom:1px solid var(--os-line) !important;
padding-bottom:12px !important;
margin-bottom:14px !important;
}
.section-heading span{
color:var(--os-red) !important;
}
.section-heading h2{
color:#fff !important;
font-size:24px !important;
}
.section-heading p{
color:var(--os-muted) !important;
}
/* MUSIC GRID */
.track-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(265px,320px)) !important;
gap:14px !important;
align-items:start !important;
justify-content:start !important;
}
.track-card{
width:100% !important;
max-width:320px !important;
background:linear-gradient(145deg,#15181e,#101217) !important;
border:1px solid var(--os-line) !important;
box-shadow:0 8px 22px #0004 !important;
overflow:hidden !important;
transition:transform .15s ease,border-color .15s ease !important;
}
.track-card:hover{
transform:translateY(-2px) !important;
border-color:#454a55 !important;
}
.cover{
position:relative !important;
aspect-ratio:1/1 !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-color:#090b0e !important;
border-bottom:1px solid var(--os-line) !important;
}
.cover::after{
content:"" !important;
position:absolute !important;
inset:auto 0 0 0 !important;
height:28% !important;
background:linear-gradient(0deg,#050608b8,transparent) !important;
pointer-events:none !important;
}
.cover button{
z-index:2 !important;
right:10px !important;
bottom:10px !important;
width:38px !important;
height:38px !important;
background:#0a0c10 !important;
color:#fff !important;
border:1px solid #fff !important;
display:grid !important;
place-items:center !important;
}
.cover button:hover{
background:var(--os-red) !important;
border-color:var(--os-red) !important;
}
.track-body{
padding:13px !important;
}
.track-body h3{
color:#fff !important;
font-size:15px !important;
margin:0 !important;
}
.track-meta{
color:var(--os-muted) !important;
margin-top:5px !important;
}
.track-stats{
color:#b8bdc6 !important;
border-top:1px solid #262a31 !important;
border-bottom:1px solid #262a31 !important;
padding:8px 0 !important;
margin:9px 0 !important;
}
.licenses{
gap:6px !important;
}
.license{
background:#0c0e12 !important;
border:1px solid #2e323a !important;
color:#fff !important;
padding:8px 9px !important;
}
.license span{
color:#d8dbe1 !important;
}
.license strong{
color:var(--os-red) !important;
}
.license a{
background:#20232a !important;
border:1px solid #454a55 !important;
color:#fff !important;
padding:7px 9px !important;
}
.license a:hover{
background:var(--os-red) !important;
border-color:var(--os-red) !important;
}
.no-license{
background:#0d0f13 !important;
border:1px dashed #363a43 !important;
color:#878d98 !important;
padding:10px !important;
}
/* BUNDLES */
.bundle-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(270px,340px)) !important;
gap:14px !important;
justify-content:start !important;
}
.bundle-card{
background:linear-gradient(145deg,#15181e,#101217) !important;
border:1px solid var(--os-line) !important;
border-top:3px solid var(--os-red) !important;
box-shadow:0 8px 22px #0004 !important;
}
.bundle-card p{
color:#aeb4be !important;
}
.bundle-card a{
background:var(--os-red) !important;
}
/* ABOUT */
.about-grid{
grid-template-columns:2fr 1fr 1fr !important;
gap:12px !important;
}
.about-grid article{
background:linear-gradient(145deg,#15181e,#101217) !important;
border:1px solid var(--os-line) !important;
color:#fff !important;
}
.about-grid span{
color:var(--os-red) !important;
}
.about-grid p{
color:#aeb4be !important;
}
/* EMPTY STATES */
.empty{
color:#8e949f !important;
}
/* MINI PLAYER — THIN WAVEFORM LINES */
.mini-player{
min-height:88px !important;
background:#050608 !important;
border-top:2px solid var(--os-red) !important;
box-shadow:0 -10px 24px #0009 !important;
grid-template-columns:56px 210px 44px minmax(0,1fr) 56px !important;
gap:12px !important;
padding:10px 22px !important;
}
.mini-cover{
width:56px !important;
height:56px !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-color:#0d0f13 !important;
border:1px solid #343842 !important;
}
.mini-copy strong{
font-size:12px !important;
}
.mini-copy span{
color:#8d939e !important;
}
.mini-play{
width:40px !important;
height:40px !important;
background:var(--os-red) !important;
border:1px solid #fff !important;
}
.mini-wave{
height:38px !important;
overflow:hidden !important;
background:transparent !important;
}
.mini-wave-bars{
position:absolute !important;
inset:0 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:1px !important;
}
.mini-wave-bars i{
flex:0 0 2px !important;
width:2px !important;
min-width:2px !important;
max-width:2px !important;
height:var(--h,45%) !important;
background:#5a606b !important;
display:block !important;
}
.mini-wave-bars i:nth-child(7n+1){--h:28%}
.mini-wave-bars i:nth-child(7n+2){--h:52%}
.mini-wave-bars i:nth-child(7n+3){--h:82%}
.mini-wave-bars i:nth-child(7n+4){--h:96%}
.mini-wave-bars i:nth-child(7n+5){--h:64%}
.mini-wave-bars i:nth-child(7n+6){--h:38%}
.mini-wave-bars i:nth-child(7n){--h:74%}
.mini-progress{
position:absolute !important;
inset:0 auto 0 0 !important;
width:0% !important;
overflow:hidden !important;
}
.mini-progress .mini-wave-bars{
width:100% !important;
min-width:100% !important;
}
.mini-progress .mini-wave-bars i{
background:var(--os-red) !important;
}
.mini-time{
color:#b4b9c2 !important;
font-size:10px !important;
}
/* RESPONSIVE */
@media(max-width:1000px){
.artist-identity{
grid-template-columns:145px 1fr !important;
}
.artist-avatar{
width:145px !important;
height:145px !important;
}
.artist-actions{
grid-column:1/-1 !important;
grid-template-columns:repeat(2,minmax(130px,180px)) !important;
justify-content:start !important;
}
.track-grid{
grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
}
.track-card{
max-width:none !important;
}
.about-grid{
grid-template-columns:1fr 1fr !important;
}
}
@media(max-width:700px){
.artist-identity{
grid-template-columns:1fr !important;
padding:38px 20px 24px !important;
}
.artist-avatar{
width:130px !important;
height:130px !important;
}
.artist-name-row h1{
font-size:34px !important;
}
.artist-actions{
grid-template-columns:1fr !important;
}
.artist-stats{
grid-template-columns:1fr 1fr !important;
}
.track-grid,
.bundle-grid,
.about-grid{
grid-template-columns:1fr !important;
}
.store-tabs{
grid-template-columns:1fr !important;
}
.mini-player{
grid-template-columns:44px 1fr 40px !important;
min-height:74px !important;
}
.mini-cover{
width:44px !important;
height:44px !important;
}
.mini-wave,
.mini-time{
display:none !important;
}
}
/* =========================================================
STAGE 10.5 — STOREFRONT WAVEFORM MATCH
Uses the same visual behavior as the Artist Dashboard player.
========================================================= */
.mini-wave.waveform-match{
position:relative !important;
display:block !important;
width:100% !important;
height:38px !important;
min-width:0 !important;
overflow:hidden !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
cursor:pointer !important;
}
.mini-wave-base,
.mini-progress{
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
}
.mini-wave-base{
right:0 !important;
width:100% !important;
overflow:hidden !important;
}
.mini-progress{
width:0% !important;
overflow:hidden !important;
pointer-events:none !important;
z-index:2 !important;
}
/*
IMPORTANT:
This inner progress track remains the FULL width of the waveform.
Only .mini-progress changes width. That creates a real left-to-right
red reveal instead of compressing the red bars into the progress width.
*/
.mini-wave-progress-track{
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
width:var(--wave-full-width, 1000px) !important;
min-width:var(--wave-full-width, 1000px) !important;
}
.mini-wave-base > .mini-wave-bars{
position:absolute !important;
inset:0 !important;
width:100% !important;
}
.mini-wave-progress-track > .mini-wave-bars{
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
width:100% !important;
min-width:100% !important;
}
.mini-wave-bars{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:2px !important;
}
.mini-wave-bars i{
flex:1 1 2px !important;
max-width:3px !important;
min-width:1px !important;
height:var(--h,50%) !important;
display:block !important;
background:#626874 !important;
}
.mini-wave-bars i:nth-child(8n+1){--h:30%}
.mini-wave-bars i:nth-child(8n+2){--h:52%}
.mini-wave-bars i:nth-child(8n+3){--h:78%}
.mini-wave-bars i:nth-child(8n+4){--h:95%}
.mini-wave-bars i:nth-child(8n+5){--h:66%}
.mini-wave-bars i:nth-child(8n+6){--h:42%}
.mini-wave-bars i:nth-child(8n+7){--h:84%}
.mini-wave-bars i:nth-child(8n){--h:58%}
.mini-wave-progress-track .mini-wave-bars i{
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
}
@media(max-width:700px){
.mini-wave.waveform-match{
display:none !important;
}
}
/* =========================================================
STAGE 10.6 — RESTORED OSBEATS WAVEFORM SHAPE
Continuous waveform silhouette, NOT vertical bars.
Gray waveform underneath + identical red waveform clipped by progress.
========================================================= */
.waveform-shape,
.mini-wave.waveform-shape{
position:relative !important;
display:block !important;
width:100% !important;
height:38px !important;
overflow:hidden !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
cursor:pointer !important;
}
.wave-svg{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:block !important;
overflow:visible !important;
}
.wave-svg path{
stroke:none !important;
vector-effect:non-scaling-stroke !important;
}
.wave-base path{
fill:#626874 !important;
}
.wave-progress-shape{
position:absolute !important;
left:0 !important;
top:0 !important;
bottom:0 !important;
width:0% !important;
overflow:hidden !important;
pointer-events:none !important;
z-index:2 !important;
}
.wave-progress-shape .wave-svg{
position:absolute !important;
left:0 !important;
top:0 !important;
width:var(--wave-full-width, 1000px) !important;
min-width:var(--wave-full-width, 1000px) !important;
height:100% !important;
}
.wave-played path{
fill:#73070B !important;
}
/* =========================================================
STAGE 10.7 — MOCKUP-ACCURATE OSBEATS WAVEFORM
Dense irregular audio waveform, like the approved mockup.
========================================================= */
.mockup-waveform{
position:relative !important;
display:block !important;
width:100% !important;
height:42px !important;
overflow:hidden !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
cursor:pointer !important;
}
.mockup-wave-base,
.mockup-wave-progress{
position:absolute !important;
left:0 !important;
top:0 !important;
bottom:0 !important;
}
.mockup-wave-base{
right:0 !important;
width:100% !important;
overflow:hidden !important;
}
.mockup-wave-progress{
width:0% !important;
overflow:hidden !important;
pointer-events:none !important;
z-index:2 !important;
}
.mockup-wave-progress-track{
position:absolute !important;
left:0 !important;
top:0 !important;
bottom:0 !important;
width:var(--wave-full-width,1000px) !important;
min-width:var(--wave-full-width,1000px) !important;
}
.mockup-wave-bars{
position:absolute !important;
inset:0 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:1px !important;
}
.mockup-wave-bars i{
display:block !important;
flex:1 1 1px !important;
min-width:1px !important;
max-width:2px !important;
height:var(--h,45%) !important;
background:#535862 !important;
opacity:.88 !important;
}
.mockup-wave-progress-track .mockup-wave-bars i{
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
opacity:1 !important;
}
/* Slight center emphasis like the mockup waveform */
.mockup-wave-bars::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:50% !important;
height:1px !important;
transform:translateY(-.5px) !important;
background:rgba(255,255,255,.05) !important;
pointer-events:none !important;
}
/* Player sizing closer to mockup */
.os-player .wave-row{
grid-template-columns:42px minmax(0,1fr) 42px !important;
gap:10px !important;
}
.os-player .mockup-waveform{
height:38px !important;
}
.mini-player .mockup-waveform{
height:38px !important;
}
@media(max-width:700px){
.mini-player .mockup-waveform{
display:none !important;
}
}
/* =========================================================
STAGE 10.8 — CONTINUOUS MOCKUP-STYLE OSBEATS WAVEFORM
One connected waveform silhouette — no separated bars.
========================================================= */
.osbeats-waveform{
position:relative !important;
display:block !important;
width:100% !important;
height:42px !important;
min-width:0 !important;
overflow:hidden !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
cursor:pointer !important;
}
.osbeats-wave-svg{
position:absolute !important;
left:0 !important;
top:0 !important;
width:100% !important;
height:100% !important;
display:block !important;
}
.osbeats-wave-svg path{
stroke:none !important;
}
.osbeats-wave-gray path{
fill:#50555f !important;
}
.osbeats-wave-progress{
position:absolute !important;
left:0 !important;
top:0 !important;
bottom:0 !important;
width:0% !important;
overflow:hidden !important;
z-index:2 !important;
pointer-events:none !important;
}
/*
The red SVG stays the FULL pixel width of the waveform.
The wrapper clips it. This preserves an identical shape
and creates the mockup-style red playback fill.
*/
.osbeats-wave-progress .osbeats-wave-svg{
width:var(--wave-full-width,1000px) !important;
min-width:var(--wave-full-width,1000px) !important;
max-width:none !important;
}
.osbeats-wave-red path{
fill:#73070B !important;
}
/* subtle center seam, like a dense real waveform */
.osbeats-waveform::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:50% !important;
height:1px !important;
transform:translateY(-.5px) !important;
background:rgba(255,255,255,.045) !important;
pointer-events:none !important;
z-index:3 !important;
}
.os-player .osbeats-waveform{
height:40px !important;
}
.mini-player .osbeats-waveform{
height:40px !important;
}
@media(max-width:700px){
.mini-player .osbeats-waveform{
display:none !important;
}
}
/* =========================================================
STAGE 10.10 — TRUE MOCKUP AUDIO WAVEFORM
Dense jagged continuous waveform. No sticks. No smooth ribbon.
========================================================= */
.osbeats-real-waveform{
position:relative !important;
display:block !important;
width:100% !important;
height:44px !important;
min-width:0 !important;
overflow:hidden !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
cursor:pointer !important;
}
.osbeats-real-wave-svg{
position:absolute !important;
left:0 !important;
top:0 !important;
width:100% !important;
height:100% !important;
display:block !important;
shape-rendering:geometricPrecision !important;
}
.osbeats-real-wave-svg path{
stroke:none !important;
}
.osbeats-real-wave-gray path{
fill:#555b65 !important;
}
.osbeats-real-wave-progress{
position:absolute !important;
left:0 !important;
top:0 !important;
bottom:0 !important;
width:0% !important;
overflow:hidden !important;
pointer-events:none !important;
z-index:2 !important;
}
.osbeats-real-wave-progress .osbeats-real-wave-svg{
position:absolute !important;
left:0 !important;
top:0 !important;
width:var(--wave-full-width,1000px) !important;
min-width:var(--wave-full-width,1000px) !important;
max-width:none !important;
height:100% !important;
}
.osbeats-real-wave-red path{
fill:#73070B !important;
}
/* subtle center axis like the mockup without turning it into a line graph */
.osbeats-real-waveform::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:50% !important;
height:1px !important;
transform:translateY(-.5px) !important;
background:rgba(255,255,255,.035) !important;
pointer-events:none !important;
z-index:3 !important;
}
.os-player .osbeats-real-waveform,
.mini-player .osbeats-real-waveform{
height:42px !important;
}
@media(max-width:700px){
.mini-player .osbeats-real-waveform{
display:none !important;
}
}
/* =========================================================
STAGE 10.11 — RED WAVEFORM PLAYBACK PROGRESS FIX
Full red waveform is clipped by playback percentage.
========================================================= */
.osbeats-real-wave-progress{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
overflow:visible !important;
pointer-events:none !important;
z-index:2 !important;
clip-path:inset(0 100% 0 0) !important;
-webkit-clip-path:inset(0 100% 0 0) !important;
}
.osbeats-real-wave-progress .osbeats-real-wave-svg{
position:absolute !important;
inset:0 !important;
width:100% !important;
min-width:100% !important;
max-width:none !important;
height:100% !important;
}
/* STAGE 12 — PUBLIC BUNDLE CARDS */
.bundle-grid{
grid-template-columns:repeat(auto-fit,minmax(280px,340px)) !important;
gap:14px !important;
align-items:start !important;
}
.bundle-card{
position:relative !important;
min-height:190px !important;
padding:18px !important;
background:linear-gradient(145deg,#15181e,#0f1116) !important;
border:1px solid #2d3139 !important;
border-top:3px solid #73070B !important;
box-shadow:0 8px 22px #0005 !important;
}
.bundle-card::before{
content:"BUNDLE" !important;
display:inline-block !important;
color:#73070B !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:1px !important;
margin-bottom:8px !important;
}
.bundle-card h3{
font-size:18px !important;
margin:0 0 7px !important;
}
.bundle-card .bundle-meta{
border-top:1px solid #292d35 !important;
padding-top:12px !important;
align-items:center !important;
}
.bundle-card a{
margin-top:12px !important;
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
color:#fff !important;
padding:10px !important;
font-size:10px !important;
}
/* =========================================================
STAGE 13 — PUBLIC ARTIST ABOUT TAB
========================================================= */
.about-profile-grid{
display:grid !important;
grid-template-columns:2fr 1fr 1fr !important;
gap:14px !important;
align-items:start !important;
}
.about-main-card,
.about-info-card,
.about-social-card{
background:linear-gradient(145deg,#15181e,#101217) !important;
border:1px solid #2d3139 !important;
border-top:3px solid #73070B !important;
padding:18px !important;
min-height:210px !important;
}
.about-label{
color:#73070B !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:1px !important;
margin-bottom:11px !important;
}
.about-main-card p{
color:#b7bdc6 !important;
line-height:1.7 !important;
font-size:12px !important;
margin:0 !important;
white-space:pre-line !important;
}
.artist-details-list{
margin:0 !important;
display:grid !important;
gap:10px !important;
}
.artist-details-list > div{
display:grid !important;
grid-template-columns:1fr auto !important;
gap:12px !important;
border-bottom:1px solid #292d35 !important;
padding-bottom:8px !important;
}
.artist-details-list > div:last-child{
border-bottom:0 !important;
}
.artist-details-list dt{
color:#9299a4 !important;
font-size:9px !important;
}
.artist-details-list dd{
color:#fff !important;
font-size:10px !important;
font-weight:800 !important;
margin:0 !important;
text-align:right !important;
}
.about-social-card p{
color:#9ea5b0 !important;
font-size:10px !important;
margin:0 0 13px !important;
}
.about-social-links{
display:grid !important;
gap:7px !important;
}
.about-social-links a{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
background:#0b0d11 !important;
border:1px solid #343943 !important;
color:#fff !important;
padding:10px !important;
font-size:9px !important;
font-weight:800 !important;
}
.about-social-links a::after{
content:"↗" !important;
color:#73070B !important;
}
.about-social-links a:hover{
border-color:#73070B !important;
}
.about-social-empty{
color:#777e89 !important;
border:1px dashed #343943 !important;
padding:12px !important;
font-size:9px !important;
text-align:center !important;
}
@media(max-width:950px){
.about-profile-grid{
grid-template-columns:1fr 1fr !important;
}
.about-main-card{
grid-column:1/-1 !important;
}
}
@media(max-width:650px){
.about-profile-grid{
grid-template-columns:1fr !important;
}
.about-main-card{
grid-column:auto !important;
}
}
/* =========================================================
STAGE 14 — FOLLOW / UNFOLLOW + VISITOR BEHAVIOR
========================================================= */
.clickable-stat{
cursor:pointer !important;
transition:border-color .15s ease,transform .15s ease !important;
}
.clickable-stat:hover{
border-color:#73070B !important;
transform:translateY(-1px) !important;
}
.clickable-stat small{
display:block !important;
margin-top:5px !important;
color:#747b86 !important;
font-size:8px !important;
}
.follow-button[disabled]{
opacity:.6 !important;
cursor:wait !important;
}
.followers-modal{
position:fixed !important;
inset:0 !important;
z-index:120 !important;
background:#000b !important;
display:grid !important;
place-items:center !important;
padding:20px !important;
}
.followers-modal[hidden]{
display:none !important;
}
.followers-dialog{
width:min(520px,100%) !important;
max-height:min(720px,85vh) !important;
background:#101217 !important;
border:1px solid #343943 !important;
border-top:3px solid #73070B !important;
box-shadow:0 25px 70px #000c !important;
overflow:hidden !important;
}
.followers-head{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:18px !important;
padding:16px !important;
border-bottom:1px solid #292d35 !important;
}
.followers-head span{
display:block !important;
color:#73070B !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:1px !important;
}
.followers-head h2{
margin:4px 0 0 !important;
font-size:20px !important;
}
.followers-head button{
border:0 !important;
background:transparent !important;
color:#fff !important;
font-size:26px !important;
cursor:pointer !important;
}
.followers-list{
max-height:600px !important;
overflow:auto !important;
}
.follower-row{
display:grid !important;
grid-template-columns:46px minmax(0,1fr) auto !important;
gap:11px !important;
align-items:center !important;
padding:12px 15px !important;
border-top:1px solid #272b32 !important;
}
.follower-row:first-child{
border-top:0 !important;
}
.follower-avatar{
width:44px !important;
height:44px !important;
border-radius:50% !important;
background-color:#1a1d23 !important;
background-position:center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
display:grid !important;
place-items:center !important;
color:#fff !important;
font-size:10px !important;
font-weight:900 !important;
}
.follower-copy strong{
display:block !important;
font-size:11px !important;
}
.follower-copy span{
display:block !important;
margin-top:3px !important;
color:#888f9a !important;
font-size:8px !important;
text-transform:capitalize !important;
}
.follower-row a{
border:1px solid #40454f !important;
background:#171a20 !important;
color:#fff !important;
padding:7px 9px !important;
font-size:8px !important;
}
.follower-row a:hover{
border-color:#73070B !important;
}
.visitor-note{
margin-top:8px !important;
color:#7f8691 !important;
font-size:8px !important;
}
@media(max-width:650px){
.followers-modal{
padding:8px !important;
}
}
/* STAGE 15 — REAL LICENSE CHECKOUT BUTTONS */
.license .license-buy{
min-width:46px !important;
border:1px solid #454a55 !important;
background:#20232a !important;
color:#fff !important;
padding:7px 9px !important;
font-size:9px !important;
font-weight:800 !important;
cursor:pointer !important;
}
.license .license-buy:hover{
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
border-color:#73070B !important;
}
.license .license-buy[disabled]{
opacity:.65 !important;
cursor:wait !important;
}
/* =========================================================
STAGE 20 — PUBLIC PROFILE MESSAGE ACTION
========================================================= */
.public-profile-actions{
display:flex !important;
align-items:center !important;
gap:8px !important;
}
.message-artist-button{
min-width:118px !important;
border:1px solid #4a4f59 !important;
background:#111318 !important;
color:#fff !important;
padding:11px 18px !important;
font-weight:900 !important;
cursor:pointer !important;
}
.message-artist-button:hover{
border-color:#73070B !important;
color:#73070B !important;
}
.message-artist-button[disabled]{
opacity:.65 !important;
cursor:wait !important;
}
/* =========================================================
STOREFRONT CART — STAGE 1
========================================================= */
.site-header{
position:relative;
}
.store-cart-button{
margin-left:auto;
min-width:82px;
height:40px;
padding:0 12px;
background:#111318;
border:1px solid #3d424b;
color:#fff;
font-weight:900;
cursor:pointer;
}
.store-cart-button:hover{
border-color:#73070B;
}
.store-cart-button span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:20px;
height:20px;
margin-left:5px;
padding:0 5px;
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%);
color:#fff;
font-size:10px;
}
.store-cart-overlay{
position:fixed;
inset:0;
z-index:9980;
background:rgba(0,0,0,.72);
}
.store-cart-drawer{
position:fixed;
top:0;
right:0;
bottom:0;
z-index:9990;
width:min(420px,94vw);
display:flex;
flex-direction:column;
background:#090a0d;
border-left:1px solid #353943;
box-shadow:-18px 0 42px rgba(0,0,0,.45);
transform:translateX(105%);
transition:transform .22s ease;
}
.store-cart-drawer.open{
transform:translateX(0);
}
body.cart-open{
overflow:hidden;
}
.store-cart-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
background:#111318;
border-bottom:2px solid #73070B;
}
.store-cart-head span{
display:block;
color:#73070B;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
}
.store-cart-head h2{
margin:4px 0 0;
color:#fff;
font-size:23px;
}
.store-cart-head button{
width:38px;
height:38px;
background:transparent;
border:1px solid #454a54;
color:#fff;
font-size:24px;
cursor:pointer;
}
.store-cart-summary{
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:#30343c;
border-bottom:1px solid #30343c;
}
.store-cart-summary>div{
padding:13px 18px;
background:#0f1116;
}
.store-cart-summary span{
display:block;
color:#8e949f;
font-size:9px;
font-weight:800;
}
.store-cart-summary strong{
display:block;
margin-top:4px;
color:#fff;
font-size:18px;
}
.store-cart-seller-notice{
margin:12px 14px 0;
padding:10px 11px;
border-left:3px solid #ffbd22;
background:#17150c;
color:#e8cc72;
font-size:9px;
line-height:1.45;
}
.store-cart-items{
flex:1 1 auto;
overflow:auto;
padding:14px;
}
.store-cart-empty{
padding:38px 16px;
border:1px dashed #353943;
color:#9ba1ab;
text-align:center;
font-size:13px;
}
.store-cart-empty small{
display:block;
margin-top:6px;
color:#707680;
font-size:9px;
}
.store-cart-item{
position:relative;
display:grid;
grid-template-columns:76px 1fr 28px;
gap:12px;
padding:11px;
margin-bottom:10px;
background:#15171c;
border:1px solid #333740;
}
.store-cart-art{
width:76px;
height:76px;
background:#0b0d11 center/cover no-repeat;
border:1px solid #3a3f48;
}
.store-cart-copy{
min-width:0;
}
.store-cart-copy strong,
.store-cart-copy span,
.store-cart-copy small,
.store-cart-copy b{
display:block;
}
.store-cart-copy strong{
color:#fff;
font-size:13px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.store-cart-copy span{
margin-top:3px;
color:#a7adb7;
font-size:10px;
}
.store-cart-copy small{
margin-top:7px;
color:#7f8590;
font-size:9px;
}
.store-cart-copy b{
margin-top:5px;
color:#24e47b;
font-size:13px;
}
.store-cart-remove{
align-self:start;
width:28px;
height:28px;
background:transparent;
border:0;
color:#858b95;
font-size:20px;
cursor:pointer;
}
.store-cart-remove:hover{
color:#73070B;
}
.store-cart-checkout{
padding:14px;
background:#111318;
border-top:1px solid #343840;
}
.store-cart-checkout>button{
width:100%;
min-height:46px;
margin-bottom:8px;
border:1px solid #73070B;
background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%);
color:#fff;
font-size:13px;
font-weight:900;
cursor:pointer;
}
.store-cart-checkout>button:disabled{
opacity:.45;
cursor:not-allowed;
}
.store-cart-checkout>button.ghost{
background:#0d0f13;
border-color:#3f444d;
}
.store-cart-checkout small{
display:block;
margin-top:6px;
color:#717883;
font-size:8px;
line-height:1.45;
text-align:center;
}
.license-buy{
min-width:50px;
}
@media(max-width:980px){
.site-header{
flex-wrap:wrap;
}
.store-cart-button{
margin-left:0;
}
}
/* =========================================================
OSBEATS ARTIST PROFILE CANVAS
Exact Beats page background: #ececea
IMPORTANT: cart drawer keeps its own dark background.
========================================================= */
html,
body,
.storefront{
background:#ececea !important;
}
/* Main storefront content uses the shared light site canvas. */
.artist-stats,
.store-tabs,
.store-panel,
#music,
#bundles,
#about{
background:transparent !important;
}
/* Text outside intentional dark components. */
.store-panel .section-heading h2{
color:#111318 !important;
}
.store-panel .section-heading p,
.store-panel .empty{
color:#6f737b !important;
}
/* Explicitly preserve the dark shopping cart and overlays. */
.store-cart-overlay,
.store-cart-drawer,
.store-cart-panel,
.cart-drawer,
.cart-panel{
background:#090b0f !important;
color:#fff !important;
}
.store-cart-drawer *,
.store-cart-panel *,
.cart-drawer *,
.cart-panel *{
box-sizing:border-box;
}
/* Preserve intentional dark marketplace areas. */
.artist-hero,
.artist-banner,
.hero-overlay,
.store-tab,
.bundle-card,
.mini-player{
color:#fff;
}
/* =========================================================
VERIFIED ARTIST BADGE POLISH
Compact OSBeats verification mark beside the artist name.
========================================================= */
.verified-badge{
display:inline-grid !important;
place-items:center !important;
width:24px !important;
height:24px !important;
margin-left:8px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
vertical-align:middle !important;
line-height:1 !important;
transform:translateY(-1px);
}
.verified-badge svg{
display:block !important;
width:22px !important;
height:22px !important;
overflow:visible !important;
}
.verified-badge svg > path:first-child{
fill:#73070B !important;
stroke:none !important;
}
.verified-badge .verified-check{
fill:none !important;
stroke:#fff !important;
stroke-width:2.25 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
.artist-name-row,
.profile-name-row,
.artist-identity h1{
align-items:center !important;
}
/* =========================================================
ARTIST STOREFRONT COMPACT TRACK CARDS
Visual-only marketplace card refinement.
========================================================= */
.track-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,260px)) !important;
gap:16px !important;
justify-content:start !important;
}
.track-card{
max-width:260px !important;
box-shadow:0 6px 16px rgba(0,0,0,.20) !important;
}
.cover{
aspect-ratio:1/1 !important;
}
.cover button{
right:8px !important;
bottom:8px !important;
width:34px !important;
height:34px !important;
}
.track-body{
padding:10px !important;
}
.track-body h3{
font-size:14px !important;
line-height:1.2 !important;
}
.track-meta{
margin-top:3px !important;
font-size:9px !important;
}
.track-stats{
gap:10px !important;
padding:6px 0 !important;
margin:7px 0 !important;
font-size:8px !important;
}
.licenses{
gap:5px !important;
margin-top:7px !important;
}
.license{
min-height:34px !important;
padding:5px 7px !important;
font-size:8px !important;
}
.license span{
line-height:1.15 !important;
}
.license strong{
font-size:8px !important;
}
.license a,
.license .license-buy{
min-width:40px !important;
min-height:26px !important;
padding:5px 7px !important;
font-size:8px !important;
display:inline-grid !important;
place-items:center !important;
}
.no-license{
padding:7px !important;
font-size:8px !important;
}
@media(min-width:1100px){
.track-grid{
grid-template-columns:repeat(4,260px) !important;
}
}
@media(max-width:1000px){
.track-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,260px)) !important;
}
.track-card{
max-width:260px !important;
}
}
@media(max-width:700px){
.track-grid{
grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
}
.track-card{
max-width:none !important;
}
}
/* =========================================================
APPROVED ARTIST PROFILE TOP REDESIGN — OPTION 1
Scope: banner + profile identity + stats only.
Catalog/tabs/track cards/cart/player are intentionally untouched.
========================================================= */
.artist-hero{
min-height:0 !important;
overflow:visible !important;
background:#0a0c10 !important;
border-bottom:0 !important;
}
.artist-banner{
position:relative !important;
inset:auto !important;
width:100% !important;
height:282px !important;
background-color:#07080b !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
filter:none !important;
}
.hero-overlay{
position:absolute !important;
z-index:1 !important;
top:0 !important;
left:0 !important;
right:0 !important;
bottom:auto !important;
height:282px !important;
background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.04) 70%,rgba(6,8,12,.20) 100%) !important;
pointer-events:none !important;
}
.artist-identity{
position:relative !important;
z-index:2 !important;
min-height:0 !important;
max-width:1280px !important;
margin:0 auto !important;
padding:20px 28px 22px !important;
display:grid !important;
grid-template-columns:168px minmax(0,1fr) 170px !important;
gap:24px !important;
align-items:center !important;
background:#0d1015 !important;
}
.artist-avatar{
width:168px !important;
height:168px !important;
margin:0 !important;
background-color:#15181e !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
border:3px solid #f2f2f2 !important;
outline:4px solid rgba(89,5,9,.20) !important;
box-shadow:0 10px 28px rgba(0,0,0,.42) !important;
}
.artist-copy{
max-width:720px !important;
align-self:center !important;
}
.artist-name-row{
display:flex !important;
align-items:center !important;
gap:7px !important;
margin-bottom:6px !important;
}
.artist-name-row h1{
margin:0 !important;
color:#fff !important;
font-size:38px !important;
line-height:1.05 !important;
letter-spacing:-.6px !important;
}
.artist-location{
display:flex !important;
align-items:center !important;
gap:5px !important;
margin:0 0 7px !important;
color:#e6e8ec !important;
font-size:12px !important;
}
.artist-location::before{
content:"" !important;
width:13px !important;
height:13px !important;
flex:0 0 13px !important;
background:center/13px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important;
}
.artist-bio{
margin:0 0 10px !important;
color:#d0d4da !important;
font-size:12px !important;
line-height:1.45 !important;
}
.social-links{
display:flex !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.social-links a{
min-height:32px !important;
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:7px 10px !important;
color:#fff !important;
background:#101318 !important;
border:1px solid #414751 !important;
font-size:10px !important;
font-weight:800 !important;
}
.social-links a:hover{
border-color:#73070B !important;
color:#fff !important;
}
.profile-link-icon{
width:14px !important;
height:14px !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.8 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
.profile-link-icon .icon-dot{
fill:currentColor !important;
stroke:none !important;
}
.artist-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
width:170px !important;
min-width:170px !important;
align-self:center !important;
justify-self:end !important;
}
.follow-button,
.owner-button{
width:170px !important;
min-width:170px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:10px 12px !important;
font-size:11px !important;
font-weight:900 !important;
}
.owner-button.ghost::before{
content:"" !important;
width:14px !important;
height:14px !important;
margin-right:7px !important;
background:center/14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.1a1.7 1.7 0 0 0-1.1-1.56 1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.1A1.7 1.7 0 0 0 4.66 8.5a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.1A1.7 1.7 0 0 0 15.5 4.66a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.13.39.35.74.64 1 .3.28.69.43 1.1.43H21v4h-.1A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E") !important;
}
.artist-stats-wrap{
background:#0d1015 !important;
border-top:1px solid #242932 !important;
border-bottom:1px solid #2a2f38 !important;
}
.artist-stats{
max-width:1280px !important;
margin:0 auto !important;
padding:0 28px 14px !important;
grid-template-columns:repeat(4,1fr) !important;
gap:12px !important;
}
.artist-stats article{
min-height:86px !important;
padding:14px 17px !important;
background:linear-gradient(145deg,#151920,#101318) !important;
border:1px solid #303640 !important;
border-top:2px solid #73070B !important;
}
.artist-stats span{
color:#9aa1ac !important;
font-size:9px !important;
}
.artist-stats strong{
color:#fff !important;
font-size:24px !important;
margin-top:5px !important;
}
.artist-stats small{
color:#707884 !important;
font-size:8px !important;
}
@media(max-width:900px){
.artist-banner,
.hero-overlay{
height:230px !important;
}
.artist-identity{
grid-template-columns:132px minmax(0,1fr) !important;
padding:18px 20px !important;
}
.artist-avatar{
width:132px !important;
height:132px !important;
}
.artist-actions{
grid-column:1/-1 !important;
width:100% !important;
min-width:0 !important;
grid-template-columns:repeat(2,minmax(0,170px)) !important;
justify-self:start !important;
}
.follow-button,
.owner-button{
width:100% !important;
min-width:0 !important;
}
.artist-stats{
padding-left:20px !important;
padding-right:20px !important;
}
}
@media(max-width:620px){
.artist-banner,
.hero-overlay{
height:180px !important;
}
.artist-identity{
grid-template-columns:1fr !important;
gap:14px !important;
}
.artist-avatar{
width:118px !important;
height:118px !important;
}
.artist-name-row h1{
font-size:31px !important;
}
.artist-actions{
grid-column:auto !important;
grid-template-columns:1fr !important;
}
.artist-stats{
grid-template-columns:repeat(2,1fr) !important;
}
}
/* =========================================================
APPROVED MOCKUP — EXACT ARTIST PROFILE REPAIR
This final override matches the approved profile mockup.
========================================================= */
/* Header / cart */
.site-header{
min-height:62px !important;
padding:0 18px !important;
border-bottom:1px solid #73070B !important;
}
.store-cart-button{
min-height:40px !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding:0 12px !important;
background:#101318 !important;
border:1px solid #414751 !important;
color:#fff !important;
}
.store-cart-icon{
width:17px !important;
height:17px !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.8 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
/* Banner */
.artist-hero{
min-height:0 !important;
overflow:visible !important;
background:#0d1015 !important;
}
.artist-banner{
position:relative !important;
inset:auto !important;
display:block !important;
width:100% !important;
height:282px !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
border:0 !important;
}
.hero-overlay{
position:absolute !important;
top:0 !important;
left:0 !important;
right:0 !important;
bottom:auto !important;
height:282px !important;
background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(8,10,14,.10) 100%) !important;
pointer-events:none !important;
}
/* Profile block entirely below the banner */
.artist-identity{
position:relative !important;
z-index:2 !important;
width:100% !important;
max-width:1280px !important;
min-height:190px !important;
margin:0 auto !important;
padding:20px 26px !important;
display:grid !important;
grid-template-columns:168px minmax(0,1fr) 170px !important;
gap:24px !important;
align-items:center !important;
background:#0d1015 !important;
}
.artist-avatar{
position:relative !important;
top:auto !important;
left:auto !important;
width:168px !important;
height:168px !important;
margin:0 !important;
border:3px solid #f0f0f0 !important;
outline:4px solid rgba(89,5,9,.22) !important;
background-position:center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
box-shadow:0 10px 28px rgba(0,0,0,.42) !important;
}
.artist-copy{
min-width:0 !important;
max-width:700px !important;
}
.artist-name-row{
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
gap:8px !important;
margin:0 0 7px !important;
}
.artist-name-row h1{
margin:0 !important;
color:#fff !important;
font-size:38px !important;
line-height:1.05 !important;
letter-spacing:-.6px !important;
white-space:nowrap !important;
}
.verified-badge{
flex:0 0 24px !important;
margin:0 !important;
transform:none !important;
}
.artist-location{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin:0 0 7px !important;
color:#f0f2f4 !important;
font-size:12px !important;
}
.artist-location::before{
content:"" !important;
display:block !important;
width:13px !important;
height:13px !important;
flex:0 0 13px !important;
background:center/13px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important;
}
.artist-bio{
margin:0 0 10px !important;
color:#d7dae0 !important;
font-size:12px !important;
line-height:1.4 !important;
}
.social-links{
display:flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.social-links a{
min-height:32px !important;
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:7px 11px !important;
color:#fff !important;
background:#101318 !important;
border:1px solid #414751 !important;
font-size:10px !important;
font-weight:800 !important;
}
.artist-actions{
width:170px !important;
min-width:170px !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
justify-self:end !important;
align-self:center !important;
}
.follow-button,
.owner-button{
width:170px !important;
min-width:170px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:10px 12px !important;
font-size:11px !important;
font-weight:900 !important;
}
/* Stats exactly below identity */
.artist-stats-wrap{
background:#0d1015 !important;
border-top:0 !important;
border-bottom:1px solid #303640 !important;
}
.artist-stats{
width:100% !important;
max-width:1280px !important;
margin:0 auto !important;
padding:0 26px 14px !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
.artist-stats article{
min-height:86px !important;
padding:14px 17px !important;
background:linear-gradient(145deg,#151920,#101318) !important;
border:1px solid #303640 !important;
border-top:2px solid #73070B !important;
}
/* Tabs / content widths matching mockup */
.store-tabs,
.store-panel{
width:calc(100% - 56px) !important;
max-width:1280px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.store-tabs{
margin-top:10px !important;
}
.store-panel{
padding-left:0 !important;
padding-right:0 !important;
}
/* Horizontal compact track cards exactly like approved mockup */
.track-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,430px)) !important;
gap:18px !important;
justify-content:start !important;
align-items:start !important;
}
.track-card{
width:100% !important;
max-width:430px !important;
min-height:236px !important;
display:grid !important;
grid-template-columns:190px minmax(0,1fr) !important;
background:#101318 !important;
border:1px solid #252a32 !important;
box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
overflow:hidden !important;
}
.track-card .cover{
width:190px !important;
height:100% !important;
min-height:236px !important;
aspect-ratio:auto !important;
background-color:#0b0d11 !important;
background-position:center !important;
background-size:contain !important;
background-repeat:no-repeat !important;
}
.track-card .cover button{
right:10px !important;
bottom:10px !important;
width:38px !important;
height:38px !important;
border:1px solid #fff !important;
background:#101318 !important;
}
.track-card .track-body{
min-width:0 !important;
padding:12px !important;
display:flex !important;
flex-direction:column !important;
}
.track-card .track-body h3{
margin:0 !important;
color:#fff !important;
font-size:14px !important;
}
.track-card .track-meta{
margin-top:3px !important;
color:#a8aeb8 !important;
font-size:9px !important;
}
.track-card .track-stats{
display:flex !important;
gap:10px !important;
margin:9px 0 8px !important;
padding:0 0 8px !important;
border-bottom:1px solid #292e36 !important;
color:#b3b8c0 !important;
font-size:8px !important;
}
.track-card .licenses{
margin-top:auto !important;
display:grid !important;
gap:5px !important;
}
.track-card .license{
min-height:32px !important;
padding:5px 7px !important;
background:#0e1116 !important;
border:1px solid #363b44 !important;
font-size:8px !important;
}
.track-card .license strong{
font-size:8px !important;
color:#73070B !important;
}
.track-card .license a,
.track-card .license .license-buy{
min-width:40px !important;
min-height:25px !important;
padding:4px 7px !important;
background:#171b22 !important;
border:1px solid #505762 !important;
color:#fff !important;
font-size:8px !important;
}
.track-card .no-license{
font-size:8px !important;
}
/* Responsive */
@media(max-width:980px){
.artist-banner,
.hero-overlay{
height:230px !important;
}
.artist-identity{
grid-template-columns:140px minmax(0,1fr) !important;
padding:18px 20px !important;
}
.artist-avatar{
width:140px !important;
height:140px !important;
}
.artist-actions{
grid-column:1/-1 !important;
width:100% !important;
min-width:0 !important;
grid-template-columns:repeat(2,minmax(0,170px)) !important;
justify-self:start !important;
}
.track-grid{
grid-template-columns:minmax(0,430px) !important;
}
}
@media(max-width:620px){
.artist-banner,
.hero-overlay{
height:180px !important;
}
.artist-identity{
grid-template-columns:1fr !important;
gap:14px !important;
}
.artist-avatar{
width:120px !important;
height:120px !important;
}
.artist-name-row h1{
font-size:31px !important;
}
.artist-actions{
grid-template-columns:1fr !important;
}
.artist-stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.track-card{
grid-template-columns:1fr !important;
max-width:320px !important;
}
.track-card .cover{
width:100% !important;
height:220px !important;
min-height:220px !important;
}
}
/* =========================================================
APPROVED PROFILE MOCKUP — STRUCTURAL REPAIR
Fixes banner zoom/cropping, off-screen identity, and hidden controls.
========================================================= */
/* Respect HTML hidden state even when button/link display is otherwise forced. */
[hidden]{
display:none !important;
}
/* Banner is its own row and always shows the FULL approved artwork. */
.approved-profile-banner{
position:relative !important;
width:100% !important;
min-height:0 !important;
height:auto !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
background:#07080b !important;
border-bottom:0 !important;
}
.approved-profile-banner .artist-banner{
position:relative !important;
inset:auto !important;
display:block !important;
width:100% !important;
height:auto !important;
aspect-ratio:1536 / 282 !important;
min-height:0 !important;
background-color:#07080b !important;
background-position:center center !important;
background-size:100% 100% !important;
background-repeat:no-repeat !important;
}
.approved-profile-banner .hero-overlay{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
background:linear-gradient(180deg,rgba(0,0,0,0) 72%,rgba(8,10,14,.08) 100%) !important;
pointer-events:none !important;
}
/* Profile information is a completely separate row BELOW the banner. */
.approved-profile-info{
width:100% !important;
background:#0d1015 !important;
color:#fff !important;
}
.approved-profile-info .artist-identity{
position:relative !important;
inset:auto !important;
transform:none !important;
width:min(1280px,calc(100% - 56px)) !important;
max-width:1280px !important;
min-height:190px !important;
margin:0 auto !important;
padding:20px 0 !important;
display:grid !important;
grid-template-columns:168px minmax(0,1fr) 170px !important;
gap:24px !important;
align-items:center !important;
overflow:visible !important;
background:transparent !important;
}
.approved-profile-info .artist-avatar{
position:relative !important;
inset:auto !important;
transform:none !important;
width:168px !important;
height:168px !important;
margin:0 !important;
flex:none !important;
background-position:center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
border:3px solid #f1f1f1 !important;
outline:4px solid rgba(89,5,9,.20) !important;
box-shadow:0 10px 28px rgba(0,0,0,.42) !important;
}
.approved-profile-info .artist-copy{
position:relative !important;
inset:auto !important;
transform:none !important;
width:auto !important;
min-width:0 !important;
max-width:700px !important;
margin:0 !important;
padding:0 !important;
}
.approved-profile-info .artist-name-row{
display:flex !important;
align-items:center !important;
gap:8px !important;
margin:0 0 8px !important;
padding:0 !important;
flex-wrap:wrap !important;
}
.approved-profile-info .artist-name-row h1{
margin:0 !important;
color:#fff !important;
font-size:38px !important;
line-height:1.05 !important;
letter-spacing:-.5px !important;
}
.approved-profile-info .verified-badge{
display:inline-grid !important;
place-items:center !important;
flex:0 0 24px !important;
width:24px !important;
height:24px !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
background:transparent !important;
border:0 !important;
}
.approved-profile-info .artist-location{
margin:0 0 7px !important;
color:#f0f2f4 !important;
}
.approved-profile-info .artist-bio{
margin:0 0 10px !important;
color:#d7dae0 !important;
}
.approved-profile-info .artist-actions{
position:relative !important;
inset:auto !important;
transform:none !important;
width:170px !important;
min-width:170px !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
justify-self:end !important;
align-self:center !important;
}
.approved-profile-info .artist-actions > :not([hidden]){
width:170px !important;
min-width:170px !important;
min-height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
/* Keep stats lined up with the exact profile-content width. */
.artist-stats{
width:min(1280px,calc(100% - 56px)) !important;
max-width:1280px !important;
margin:0 auto !important;
padding:0 0 14px !important;
}
/* Tablet/mobile: nothing may slide off-screen. */
@media(max-width:980px){
.approved-profile-info .artist-identity{
width:calc(100% - 40px) !important;
grid-template-columns:140px minmax(0,1fr) !important;
gap:20px !important;
}
.approved-profile-info .artist-avatar{
width:140px !important;
height:140px !important;
}
.approved-profile-info .artist-actions{
grid-column:1 / -1 !important;
width:100% !important;
min-width:0 !important;
grid-template-columns:repeat(2,minmax(0,170px)) !important;
justify-self:start !important;
}
.approved-profile-info .artist-actions > :not([hidden]){
width:170px !important;
min-width:0 !important;
}
.artist-stats{
width:calc(100% - 40px) !important;
}
}
@media(max-width:620px){
.approved-profile-info .artist-identity{
width:calc(100% - 28px) !important;
grid-template-columns:1fr !important;
gap:14px !important;
padding:16px 0 18px !important;
}
.approved-profile-info .artist-avatar{
width:120px !important;
height:120px !important;
}
.approved-profile-info .artist-name-row h1{
font-size:31px !important;
}
.approved-profile-info .artist-actions{
grid-column:auto !important;
grid-template-columns:1fr !important;
}
.approved-profile-info .artist-actions > :not([hidden]){
width:100% !important;
}
.artist-stats{
width:calc(100% - 28px) !important;
}
}
/* =========================================================
APPROVED MOCKUP MATCH — BANNER + CATALOG CARD REPAIR
========================================================= */
.approved-profile-banner .artist-banner{
width:100% !important;
height:auto !important;
aspect-ratio:1536 / 276 !important;
min-height:0 !important;
background-position:center center !important;
background-size:100% 100% !important;
background-repeat:no-repeat !important;
}
.approved-profile-banner .hero-overlay{
inset:0 !important;
width:100% !important;
height:100% !important;
}
/* Equal-size horizontal catalog cards like the approved mockup. */
.track-grid{
display:grid !important;
grid-template-columns:repeat(2,430px) !important;
gap:18px !important;
justify-content:start !important;
align-items:stretch !important;
}
.track-card{
width:430px !important;
height:220px !important;
min-height:220px !important;
max-height:220px !important;
max-width:430px !important;
display:grid !important;
grid-template-columns:180px 250px !important;
align-items:stretch !important;
overflow:hidden !important;
background:#101318 !important;
border:1px solid #252a32 !important;
box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}
.track-card .cover{
position:relative !important;
width:180px !important;
height:220px !important;
min-height:220px !important;
max-height:220px !important;
aspect-ratio:auto !important;
background-color:#0b0d11 !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
}
.track-card .cover button{
left:10px !important;
right:auto !important;
bottom:10px !important;
width:38px !important;
height:38px !important;
display:grid !important;
place-items:center !important;
border:1px solid #fff !important;
background:#101318 !important;
color:#fff !important;
}
.track-card .track-body{
width:250px !important;
height:220px !important;
min-height:220px !important;
max-height:220px !important;
box-sizing:border-box !important;
padding:12px !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
}
.track-card .track-body h3{
margin:0 !important;
font-size:14px !important;
line-height:1.15 !important;
}
.track-card .track-meta{
margin-top:3px !important;
min-height:13px !important;
}
.track-card .track-stats{
margin:8px 0 7px !important;
padding:0 0 7px !important;
}
.track-card .licenses{
margin-top:auto !important;
display:grid !important;
grid-template-rows:repeat(4,30px) !important;
gap:4px !important;
}
.track-card .license{
height:30px !important;
min-height:30px !important;
max-height:30px !important;
box-sizing:border-box !important;
padding:4px 7px !important;
}
.track-card .license a,
.track-card .license .license-buy{
min-height:22px !important;
height:22px !important;
padding:3px 7px !important;
}
@media(max-width:920px){
.track-grid{
grid-template-columns:430px !important;
}
}
@media(max-width:500px){
.track-grid{
grid-template-columns:1fr !important;
}
.track-card{
width:100% !important;
max-width:100% !important;
height:auto !important;
max-height:none !important;
grid-template-columns:1fr !important;
}
.track-card .cover,
.track-card .track-body{
width:100% !important;
max-height:none !important;
}
.track-card .cover{
height:auto !important;
min-height:0 !important;
aspect-ratio:1 / 1 !important;
}
.track-card .track-body{
height:auto !important;
min-height:220px !important;
}
}
/* =========================================================
PUBLIC ARTIST PROFILE — REPORT BUTTON FIX
Replaces the default white browser-style Report control
with the approved OSBeats dark/red-black button treatment.
========================================================= */
.track-card .report-button,
.track-card button.report,
.track-card .track-report,
.track-card [data-action="report"],
.track-card button[onclick*="report"],
.track-card button[id*="report" i],
.track-card button[class*="report" i] {
width:auto !important;
min-width:72px !important;
height:30px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:5px 10px !important;
margin:0 !important;
background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
background-color:#73070B !important;
border:1px solid #73070B !important;
color:#fff !important;
font-family:inherit !important;
font-size:9px !important;
font-weight:800 !important;
line-height:1 !important;
text-align:center !important;
cursor:pointer !important;
box-sizing:border-box !important;
}
.track-card .report-button:hover,
.track-card button.report:hover,
.track-card .track-report:hover,
.track-card [data-action="report"]:hover,
.track-card button[onclick*="report"]:hover,
.track-card button[id*="report" i]:hover,
.track-card button[class*="report" i]:hover {
background:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%) !important;
border-color:#920A10 !important;
color:#fff !important;
}
/* Prevent generic/global button rules from stretching Report full-width. */
.track-card .track-body > button,
.track-card .track-body .report-button {
max-width:max-content !important;
}
/* =========================================================
PUBLIC ARTIST PROFILE — PRICE CONTRAST FIX
Starts from the last known-good storefront file and changes
ONLY the price text inside license / Buy Now rows to white.
========================================================= */
.track-card .license strong,
.track-card .license .price,
.track-card .license-price,
.track-card .track-price,
.track-card [data-price],
.track-card .buy-now-price {
color:#fff !important;
}
/* =========================================================
PUBLIC ARTIST PROFILE — SAFE LICENSE ROW TEXT SIZE FIX
Starts from the known-good price-white version.
Changes ONLY Buy Now label, price, and Add button text sizing.
========================================================= */
.track-card .license span{
font-size:11px !important;
line-height:1.2 !important;
}
.track-card .license strong{
font-size:11px !important;
line-height:1.2 !important;
color:#fff !important;
}
.track-card .license a,
.track-card .license button,
.track-card .license .license-buy{
font-size:10px !important;
line-height:1.2 !important;
padding:7px 11px !important;
min-width:46px !important;
min-height:28px !important;
}
/* =========================================================
STEP 2 — ARTIST STOREFRONT CART HEADER CONSISTENCY
Makes the Artist Profile Cart match the global menu standard.
========================================================= */
.store-cart-button{
height:38px !important;
min-height:38px !important;
max-height:38px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:0 11px !important;
margin:0 !important;
background:#101116 !important;
border:1px solid #343944 !important;
color:#fff !important;
border-radius:0 !important;
box-sizing:border-box !important;
white-space:nowrap !important;
font-family:inherit !important;
font-size:12px !important;
font-weight:800 !important;
line-height:1 !important;
}
.store-cart-button:hover{
background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
border-color:#73070B !important;
color:#fff !important;
}
.store-cart-button .store-cart-icon{
width:16px !important;
height:16px !important;
flex:0 0 16px !important;
color:#fff !important;
stroke:currentColor !important;
}
#storeCartCount{
min-width:19px !important;
height:19px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 5px !important;
margin-left:2px !important;
background:linear-gradient(105deg,#8b0710 0%,#73070B 45%,#3b0306 100%) !important;
border:0 !important;
color:#fff !important;
font-size:10px !important;
font-weight:900 !important;
line-height:1 !important;
box-sizing:border-box !important;
}
/* Cart drawer heading/close/checkout controls use the same site system. */
.store-cart-head{
border-bottom-color:#73070B !important;
}
#closeStoreCart,
#storeCartContinue{
color:#fff !important;
border-color:#343944 !important;
}
#storeCartCheckout{
background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
border-color:#73070B !important;
color:#fff !important;
}
#storeCartCheckout:disabled{
opacity:.5 !important;
cursor:not-allowed !important;
}
/* =========================================================
OVERNIGHT ARCHITECT — ARTIST PROFILE PLAYER REDESIGN
Approved concept implementation
========================================================= */
.track-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
max-width:none !important;
}
.profile-track-player{
display:grid;
grid-template-columns:132px minmax(0,1fr) 190px;
gap:16px;
align-items:stretch;
width:100%;
min-height:164px;
padding:12px;
background:#101217;
border:1px solid #2d3139;
border-left:3px solid #73070B;
color:#fff;
overflow:hidden;
}
.profile-track-player.is-playing{
border-left-color:#ed1639;
box-shadow:inset 3px 0 0 #ed1639;
}
.profile-track-art{
position:relative;
width:132px;
height:132px;
align-self:center;
background:#090a0d center/contain no-repeat;
overflow:hidden;
}
.profile-promoted-ribbon{
position:absolute;
left:-37px;
top:17px;
width:130px;
transform:rotate(-45deg);
background:linear-gradient(90deg,#8e0710,#120506);
color:#fff;
text-align:center;
font-size:8px;
font-weight:900;
letter-spacing:.08em;
padding:5px 0;
border-top:1px solid #d30e19;
border-bottom:1px solid #d30e19;
}
.profile-sale-badge{
position:absolute;
right:6px;
bottom:6px;
background:#ed1639;
color:#fff;
padding:4px 6px;
font-size:8px;
font-weight:900;
}
.profile-track-main{
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
}
.profile-track-head{
display:grid;
grid-template-columns:minmax(0,1fr) 46px;
gap:12px;
align-items:start;
}
.profile-track-head h3{
margin:0;
color:#fff;
font-size:18px;
line-height:1.15;
}
.profile-track-by{
color:#ed1639;
font-size:11px;
font-weight:800;
margin-top:4px;
}
.profile-track-meta{
color:#9da3ae;
font-size:10px;
margin-top:4px;
}
.profile-track-play{
width:44px;
height:44px;
display:grid;
place-items:center;
border:1px solid #ed1639;
background:linear-gradient(135deg,#a20a12,#330608);
color:#fff;
font-size:17px;
cursor:pointer;
}
.profile-track-wave{
position:relative;
display:block;
width:100%;
height:40px;
margin:9px 0 3px;
padding:0;
border:0;
background:transparent;
cursor:pointer;
overflow:hidden;
}
.profile-wave-base,
.profile-wave-progress{
position:absolute;
left:0;
top:3px;
bottom:3px;
width:100%;
pointer-events:none;
background:
repeating-linear-gradient(
90deg,
#555b65 0 2px,
transparent 2px 5px
);
-webkit-mask:
linear-gradient(to bottom,
transparent 0%,
#000 20%,
#000 80%,
transparent 100%);
mask:
linear-gradient(to bottom,
transparent 0%,
#000 20%,
#000 80%,
transparent 100%);
}
.profile-wave-base::after,
.profile-wave-progress::after{
content:"";
position:absolute;
inset:9px 0;
background:inherit;
transform:scaleY(1.7);
}
.profile-wave-progress{
width:0%;
background:
repeating-linear-gradient(
90deg,
#ed1639 0 2px,
transparent 2px 5px
);
overflow:hidden;
z-index:2;
}
.profile-track-time-row{
display:grid;
grid-template-columns:45px 1fr 45px;
align-items:center;
color:#7f8590;
font-size:9px;
}
.profile-track-time-row .profile-track-counts{
text-align:center;
}
.profile-track-duration{
text-align:right;
}
.profile-track-tools{
display:flex;
gap:6px;
align-items:center;
margin-top:7px;
flex-wrap:wrap;
}
.profile-track-tools>button,
.profile-track-more summary{
list-style:none;
border:1px solid #343943;
background:#0a0c10;
color:#d7dae0;
padding:6px 8px;
font-size:9px;
font-weight:800;
cursor:pointer;
}
.profile-track-tools>button:hover,
.profile-track-more summary:hover,
.profile-track-tools>button.saved{
border-color:#73070B;
color:#fff;
}
.profile-track-more{
position:relative;
}
.profile-track-more summary::-webkit-details-marker{
display:none;
}
.profile-track-more>div{
position:absolute;
right:0;
top:31px;
z-index:10;
min-width:110px;
border:1px solid #333842;
background:#090b0e;
box-shadow:0 8px 24px #0008;
}
.profile-track-more>div button{
display:block;
width:100%;
border:0;
border-bottom:1px solid #242831;
background:transparent;
color:#fff;
padding:9px 10px;
text-align:left;
font-size:9px;
cursor:pointer;
}
.profile-track-buy{
border-left:1px solid #2b2f37;
padding-left:14px;
display:flex;
flex-direction:column;
justify-content:center;
gap:8px;
}
.profile-track-buy label{
color:#9197a1;
font-size:9px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.profile-license-select{
width:100%;
background:#090b0f;
color:#fff;
border:1px solid #3c414b;
padding:9px 8px;
font-size:10px;
}
.profile-license-price{
display:block;
color:#fff;
font-size:22px;
line-height:1;
}
.profile-add-cart{
border:1px solid #ed1639;
background:linear-gradient(90deg,#a40911,#320608);
color:#fff;
padding:10px;
font-size:10px;
font-weight:900;
cursor:pointer;
}
.profile-no-license{
color:#878d97;
border:1px dashed #383d46;
padding:12px;
font-size:10px;
text-align:center;
}
@media(max-width:900px){
.profile-track-player{
grid-template-columns:110px minmax(0,1fr);
}
.profile-track-art{
width:110px;
height:110px;
}
.profile-track-buy{
grid-column:1/-1;
border-left:0;
border-top:1px solid #2b2f37;
padding:12px 0 0;
display:grid;
grid-template-columns:1fr 110px 135px;
align-items:end;
}
.profile-track-buy label{
grid-column:1;
}
.profile-license-select{
grid-column:1;
}
.profile-license-price{
grid-column:2;
grid-row:1/3;
align-self:end;
padding-bottom:8px;
}
.profile-add-cart{
grid-column:3;
grid-row:1/3;
align-self:end;
}
}
@media(max-width:620px){
.profile-track-player{
grid-template-columns:1fr;
padding:12px;
}
.profile-track-art{
width:100%;
height:auto;
aspect-ratio:1/1;
max-height:none;
}
.profile-track-head{
grid-template-columns:1fr 46px;
}
.profile-track-buy{
grid-column:auto;
grid-template-columns:1fr;
}
.profile-license-select,
.profile-license-price,
.profile-add-cart{
grid-column:1;
grid-row:auto;
}
.profile-license-price{
padding-bottom:0;
}
.profile-track-tools{
gap:5px;
}
}
.profile-spotlight-label{
position:absolute;
left:7px;
bottom:7px;
z-index:3;
padding:5px 7px;
background:#090b0e;
border:1px solid #ed1639;
color:#fff;
font-size:8px;
font-weight:900;
letter-spacing:.08em;
}
.profile-track-player:has(.profile-spotlight-label){
border-top:1px solid #73070B;
border-right:1px solid #73070B;
border-bottom:1px solid #73070B;
}
/* =========================================================
OSBEATS PROFILE CATALOG PLAYER — SQUARE / SCALABLE CONCEPT
One master player + scrollable track catalog.
========================================================= */
#trackGrid.track-grid{display:block !important;}
.profile-track-player{display:none !important;}
.catalog-master-player{
width:100%;
background:#0b0d11;
border:1px solid #73070B;
color:#fff;
box-shadow:0 10px 30px #0001;
}
.catalog-now-playing{
display:grid;
grid-template-columns:150px minmax(0,1fr) 470px;
gap:24px;
padding:16px;
border-bottom:1px solid #2b2f37;
background:linear-gradient(120deg,#121419,#090a0d 72%);
}
.catalog-player-art{
width:150px;height:150px;
background:#15181e center/contain no-repeat;
border:1px solid #343943;
}
.catalog-player-main{min-width:0;padding-top:3px;}
.catalog-now-label{display:block;color:#ed1639;font-size:10px;font-weight:900;letter-spacing:.08em;}
.catalog-player-title-row{display:flex;gap:8px;align-items:center;margin-top:4px;}
.catalog-player-title-row h3{margin:0;font-size:23px;color:#fff;}
.catalog-icon-button{border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer;padding:3px 6px;}
.catalog-player-artist{color:#9ea4af;font-size:11px;margin-top:4px;}
.catalog-transport{display:flex;align-items:center;gap:11px;margin-top:14px;}
.catalog-transport button{
border:1px solid #3a3f49;background:#111318;color:#fff;
min-width:34px;height:31px;cursor:pointer;font-weight:900;
}
.catalog-transport .catalog-main-play{background:#73070B;border-color:#d10d18;min-width:42px;}
.catalog-transport span{font-size:11px;color:#bbbfc8;}
.catalog-transport #catalogCurrentTime{color:#ed1639;font-weight:900;}
.catalog-time-divider{color:#666 !important;}
.catalog-wave{
position:relative;display:block;width:100%;height:46px;margin-top:10px;
padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden;
}
.catalog-wave-base,.catalog-wave-progress{
position:absolute;left:0;top:7px;bottom:7px;width:100%;
background:repeating-linear-gradient(90deg,#4f5560 0 2px,transparent 2px 5px);
-webkit-mask:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
mask:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.catalog-wave-progress{
width:0%;z-index:2;
background:repeating-linear-gradient(90deg,#ed1639 0 2px,transparent 2px 5px);
}
.catalog-current-options{
border-left:1px solid #2f333b;padding-left:18px;
display:flex;flex-direction:column;justify-content:center;
}
.catalog-current-license-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.catalog-current-license-grid>div{
border:1px solid #373c46;background:#0b0d11;padding:10px 7px;text-align:center;
}
.catalog-current-license-grid span{
display:block;color:#ed1639;font-size:9px;font-weight:900;text-transform:uppercase;
}
.catalog-current-license-grid strong{
display:block;margin-top:7px;font-size:15px;color:#767c87;
}
.catalog-current-license-grid strong.available{color:#fff;cursor:pointer;}
.catalog-current-license-grid strong.available:hover{color:#ed1639;}
.catalog-player-tools{display:flex;gap:7px;margin-top:10px;justify-content:flex-end;}
.catalog-player-tools button{
border:1px solid #393e48;background:#111318;color:#fff;padding:7px 10px;
font-size:9px;font-weight:800;cursor:pointer;
}
.catalog-table-head,.catalog-track-row{
display:grid;
grid-template-columns:46px minmax(220px,2.2fr) repeat(4,minmax(90px,.72fr)) 116px;
align-items:center;
}
.catalog-table-head{
min-height:39px;padding:0 10px;background:#0d0f13;border-bottom:1px solid #323640;
color:#a7adb7;font-size:9px;font-weight:900;text-transform:uppercase;
}
.catalog-table-head span:nth-child(n+3){text-align:center;}
.catalog-track-scroll{
max-height:430px;overflow-y:auto;overscroll-behavior:contain;
scrollbar-color:#73070B #15171c;scrollbar-width:thin;
}
.catalog-track-scroll::-webkit-scrollbar{width:10px;}
.catalog-track-scroll::-webkit-scrollbar-track{background:#15171c;}
.catalog-track-scroll::-webkit-scrollbar-thumb{background:#73070B;border:2px solid #15171c;}
.catalog-track-row{
min-height:58px;padding:0 10px;border-bottom:1px solid #252932;background:#111318;
}
.catalog-track-row:nth-child(even){background:#0d0f13;}
.catalog-track-row.active{box-shadow:inset 3px 0 0 #ed1639;background:#16181e;}
.catalog-track-row.spotlight-row .catalog-row-title small{color:#ed1639;}
.catalog-row-play{
width:32px;height:32px;border:1px solid #3b404a;background:#0b0d11;color:#fff;cursor:pointer;
}
.catalog-track-row.playing .catalog-row-play{background:#73070B;border-color:#ed1639;}
.catalog-row-number{font-size:10px;color:#999;text-align:center;}
.catalog-row-title{
border:0;background:transparent;color:#fff;text-align:left;cursor:pointer;
padding:7px 10px;min-width:0;
}
.catalog-row-title strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;}
.catalog-row-title small{display:block;color:#888f99;margin-top:3px;font-size:8px;}
.catalog-license-cell{text-align:center;border-left:1px solid #252932;height:100%;display:grid;place-items:center;}
.catalog-price-button{
border:0;background:transparent;color:#fff;font-weight:800;font-size:11px;cursor:pointer;padding:8px;
}
.catalog-price-button:hover{color:#ed1639;}
.catalog-price-unavailable{color:#555b65;}
.catalog-row-actions{display:flex;gap:6px;justify-content:flex-end;}
.catalog-row-actions button{
width:32px;height:30px;border:1px solid #393e48;background:#0b0d11;color:#fff;cursor:pointer;
}
.catalog-player-footer{
display:grid;grid-template-columns:minmax(260px,420px) 1fr 150px;gap:10px;align-items:center;
padding:12px;border-top:1px solid #343943;background:#090a0d;
}
.catalog-coupon{display:grid;grid-template-columns:1fr 80px;}
.catalog-coupon input{
min-width:0;border:1px solid #343943;background:#0d0f13;color:#fff;padding:10px;
}
.catalog-coupon button,.catalog-cart-button{
border:1px solid #ed1639;background:#73070B;color:#fff;font-weight:900;cursor:pointer;
}
.catalog-footer-note{text-align:center;color:#777e88;font-size:9px;}
.catalog-cart-button{padding:11px 13px;}
.mini-player{display:none !important;}
@media(max-width:1050px){
.catalog-now-playing{grid-template-columns:120px minmax(0,1fr);}
.catalog-player-art{width:120px;height:120px;}
.catalog-current-options{grid-column:1/-1;border-left:0;border-top:1px solid #2f333b;padding:12px 0 0;}
.catalog-table-head,.catalog-track-row{
grid-template-columns:42px minmax(180px,2fr) repeat(4,86px) 92px;
}
.catalog-master-player{overflow-x:auto;}
.catalog-table-head,.catalog-track-scroll,.catalog-player-footer{min-width:780px;}
}
@media(max-width:650px){
.catalog-now-playing{grid-template-columns:86px minmax(0,1fr);gap:12px;padding:11px;min-width:620px;}
.catalog-player-art{width:86px;height:86px;}
.catalog-player-title-row h3{font-size:17px;}
.catalog-current-license-grid{grid-template-columns:repeat(4,100px);}
.catalog-player-footer{grid-template-columns:1fr 130px;min-width:780px;}
.catalog-footer-note{display:none;}
}
/* =========================================================
PROFILE CATALOG PLAYER — FINAL ALIGNMENT / CLEANUP
========================================================= */
.catalog-master-player{
overflow:hidden !important;
}
.catalog-now-playing{
grid-template-columns:140px minmax(0,1fr) 440px !important;
align-items:stretch !important;
}
.catalog-player-art{
width:140px !important;
height:140px !important;
background-size:contain !important;
}
.catalog-player-title-row h3{
font-size:24px !important;
line-height:1.1 !important;
}
.catalog-current-license-grid{
grid-template-columns:repeat(4,minmax(86px,1fr)) !important;
}
.catalog-current-license-grid>div{
min-height:58px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
.catalog-current-license-grid strong{
font-size:17px !important;
}
.catalog-table-head,
.catalog-track-row{
grid-template-columns:92px minmax(260px,2.4fr) repeat(4,minmax(105px,.8fr)) 74px !important;
}
.catalog-table-head{
min-height:42px !important;
padding:0 12px !important;
}
.catalog-table-head span:nth-child(1),
.catalog-table-head span:nth-child(2){
text-align:left !important;
}
.catalog-table-head span:nth-child(n+3){
text-align:center !important;
}
.catalog-track-scroll{
max-height:360px !important;
}
.catalog-track-row{
min-height:60px !important;
padding:0 12px !important;
}
.catalog-row-index{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.catalog-row-play{
flex:0 0 34px !important;
width:34px !important;
height:34px !important;
}
.catalog-row-number{
min-width:18px !important;
text-align:center !important;
font-size:11px !important;
}
.catalog-row-title{
padding:8px 14px !important;
}
.catalog-row-title strong{
font-size:13px !important;
}
.catalog-row-title small{
font-size:9px !important;
}
.catalog-license-cell{
border-left:1px solid #252932 !important;
min-height:60px !important;
}
.catalog-price-button{
width:100% !important;
height:100% !important;
font-size:12px !important;
font-weight:900 !important;
}
.catalog-row-actions{
justify-content:center !important;
align-items:center !important;
}
.catalog-row-actions button{
width:34px !important;
height:34px !important;
}
.catalog-track-row.active{
background:#151821 !important;
box-shadow:inset 4px 0 0 #ed1639 !important;
}
.catalog-track-row.playing{
background:#171a21 !important;
}
.catalog-player-footer{
grid-template-columns:minmax(300px,420px) 1fr 150px !important;
}
.catalog-footer-note{
padding:0 14px !important;
}
.catalog-coupon button,
.catalog-cart-button{
min-height:40px !important;
}
.catalog-coupon input{
min-height:40px !important;
}
/* Keep every visible control square. */
.catalog-master-player button,
.catalog-master-player input,
.catalog-master-player select,
.catalog-master-player div,
.catalog-master-player section{
border-radius:0 !important;
}
/* Smaller screens keep the table aligned instead of collapsing columns. */
@media(max-width:1050px){
.catalog-now-playing{
grid-template-columns:120px minmax(0,1fr) !important;
}
.catalog-player-art{
width:120px !important;
height:120px !important;
}
.catalog-current-options{
grid-column:1/-1 !important;
}
.catalog-table-head,
.catalog-track-row{
grid-template-columns:88px minmax(240px,2.2fr) repeat(4,100px) 70px !important;
}
.catalog-table-head,
.catalog-track-scroll,
.catalog-player-footer{
min-width:900px !important;
}
}
/* =========================================================
SELECTED TRACK LICENSE OPTIONS
Safe isolated section directly below the master player.
========================================================= */
.catalog-selected-licenses{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border-top:1px solid #2c3038;
border-bottom:1px solid #2c3038;
background:#0a0c10;
}
.catalog-selected-licenses:empty{
display:none;
}
.selected-license-card{
min-height:88px;
padding:12px 14px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-rows:auto auto;
gap:7px 12px;
align-items:center;
border-right:1px solid #2c3038;
background:#111318;
}
.selected-license-card:last-child{
border-right:0;
}
.selected-license-copy span{
display:block;
color:#ed1639;
font-size:10px;
font-weight:900;
text-transform:uppercase;
}
.selected-license-copy small{
display:block;
margin-top:4px;
color:#949aa5;
font-size:9px;
}
.selected-license-card strong{
font-size:18px;
color:#fff;
text-align:right;
}
.selected-license-card button{
grid-column:1/-1;
min-height:34px;
border:1px solid #d10d18;
background:#73070B;
color:#fff;
font-size:10px;
font-weight:900;
cursor:pointer;
}
.selected-license-card button:hover{
background:#8e090f;
}
.selected-license-empty{
grid-column:1/-1;
padding:12px;
color:#8f959f;
font-size:10px;
}
.catalog-selected-licenses *,
.catalog-selected-licenses{
border-radius:0 !important;
}
@media(max-width:1050px){
.catalog-selected-licenses{
grid-template-columns:repeat(2,minmax(220px,1fr));
}
}
@media(max-width:650px){
.catalog-selected-licenses{
grid-template-columns:1fr;
min-width:620px;
}
}
/* =========================================================
LICENSE INFORMATION BOXES — BELOW THE MUSIC PLAYER
Preserves the current player and adds the original square-box concept.
========================================================= */
.profile-license-info-section{
margin-top:18px;
border:1px solid #2c3038;
border-top:3px solid #73070B;
background:#111318;
color:#fff;
}
.profile-license-info-heading{
padding:14px 16px;
border-bottom:1px solid #2c3038;
background:#0a0c10;
}
.profile-license-info-heading span{
display:block;
color:#ed1639;
font-size:15px;
font-weight:900;
letter-spacing:.04em;
}
.profile-license-info-heading small{
display:block;
margin-top:4px;
color:#9ba1ab;
font-size:10px;
}
.profile-license-info-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
padding:14px;
}
.profile-license-info-card{
min-height:205px;
display:flex;
flex-direction:column;
border:1px solid #343943;
background:linear-gradient(145deg,#171a20 0%,#0c0e12 100%);
padding:16px;
}
.profile-license-info-top{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
padding-bottom:10px;
border-bottom:1px solid #343943;
}
.profile-license-info-top span{
color:#ed1639;
font-size:16px;
font-weight:900;
}
.profile-license-info-top strong{
color:#fff;
font-size:18px;
white-space:nowrap;
}
.profile-license-info-card p{
flex:1;
margin:13px 0;
color:#c1c5cc;
font-size:11px;
line-height:1.55;
}
.profile-license-info-card button{
min-height:38px;
border:1px solid #d10d18;
background:#73070B;
color:#fff;
font-size:10px;
font-weight:900;
cursor:pointer;
}
.profile-license-info-card button:hover{
background:#8d090f;
}
.profile-license-info-empty{
grid-column:1/-1;
padding:18px;
color:#9298a2;
border:1px solid #343943;
background:#0d0f13;
font-size:10px;
}
.profile-license-info-section *,
.profile-license-info-section{
border-radius:0 !important;
}
@media(max-width:1050px){
.profile-license-info-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:650px){
.profile-license-info-grid{
grid-template-columns:1fr;
}
}
/* =========================================================
OSBEATS STANDARD RED/BLACK BUTTON MIX
Profile player purchase/action buttons.
Square edges preserved.
========================================================= */
.catalog-license-option button,
.profile-license-info-card button,
.catalog-coupon button,
.catalog-cart-button{
background:linear-gradient(90deg,#8b0007 0%,#73070B 48%,#240307 100%) !important;
border:1px solid #d10d18 !important;
color:#fff !important;
border-radius:0 !important;
box-shadow:none !important;
}
.catalog-license-option button:hover,
.profile-license-info-card button:hover,
.catalog-coupon button:hover,
.catalog-cart-button:hover{
background:linear-gradient(90deg,#a00009 0%,#7e080d 48%,#310408 100%) !important;
border-color:#ed1639 !important;
}
/* Remaining player purchase buttons — OSBeats red/black mix */
.catalog-selected-license button,
.catalog-license-actions button,
.catalog-license-strip button,
.catalog-purchase-options button,
.catalog-player-license button,
.catalog-player-licenses button,
.catalog-license-option button,
[data-license-tier] button,
button.catalog-add-cart,
.catalog-add-cart{
background:linear-gradient(90deg,#8b0007 0%,#73070B 48%,#240307 100%) !important;
border:1px solid #d10d18 !important;
color:#fff !important;
border-radius:0 !important;
box-shadow:none !important;
}
.catalog-selected-license button:hover,
.catalog-license-actions button:hover,
.catalog-license-strip button:hover,
.catalog-purchase-options button:hover,
.catalog-player-license button:hover,
.catalog-player-licenses button:hover,
.catalog-license-option button:hover,
[data-license-tier] button:hover,
button.catalog-add-cart:hover,
.catalog-add-cart:hover{
background:linear-gradient(90deg,#a00009 0%,#7e080d 48%,#310408 100%) !important;
border-color:#ed1639 !important;
}
/* Exact selectors for the selected-track license strip buttons */
.selected-license-card button,
.catalog-selected-licenses .selected-license-card button,
.profile-license-info-card button,
.catalog-coupon button,
.catalog-cart-button{
background:linear-gradient(90deg,#8b0007 0%,#73070B 48%,#240307 100%) !important;
border:1px solid #d10d18 !important;
color:#fff !important;
border-radius:0 !important;
box-shadow:none !important;
}
.selected-license-card button:hover,
.catalog-selected-licenses .selected-license-card button:hover,
.profile-license-info-card button:hover,
.catalog-coupon button:hover,
.catalog-cart-button:hover{
background:linear-gradient(90deg,#a00009 0%,#7e080d 48%,#310408 100%) !important;
border-color:#ed1639 !important;
}
/* =========================================================
CART DRAWER BACKDROP — LIGHT DIM, NOT FULL BLACKOUT
========================================================= */
.store-cart-overlay{
position:fixed !important;
inset:0 !important;
z-index:1190 !important;
background:rgba(0,0,0,.34) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.store-cart-drawer{
z-index:1200 !important;
}
body.cart-open{
overflow:hidden !important;
}
/* Keep the page visible behind the cart drawer. */
body.cart-open .storefront,
body.cart-open .site-header,
body.cart-open main,
body.cart-open header{
filter:none !important;
opacity:1 !important;
}
/* =========================================================
CART DRAWER — SUBTLE TRANSPARENCY
Keeps cart readable while allowing the storefront to show through.
========================================================= */
.store-cart-drawer,
.store-cart-panel,
.cart-drawer,
.cart-panel{
background:rgba(9,11,15,.91) !important;
backdrop-filter:blur(8px) !important;
-webkit-backdrop-filter:blur(8px) !important;
}
/* Creator coupon field */
.catalog-coupon-wrap{min-width:0;}
.catalog-coupon-status{
display:block;
min-height:13px;
margin-top:5px;
color:#e6e8ed;
font-size:9px;
line-height:1.3;
}
/* Cart coupon breakdown */
.store-cart-price-breakdown{
display:grid;
gap:4px;
margin-top:7px;
padding-top:7px;
border-top:1px solid #2f333b;
}
.store-cart-price-breakdown span{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
}
.store-cart-price-breakdown em{
color:#8e949f;
font-size:9px;
font-style:normal;
}
.store-cart-price-breakdown s{
color:#9aa0aa;
font-size:11px;
}
.store-cart-price-breakdown .coupon-line strong{
color:#ff2a3a;
font-size:11px;
}
.store-cart-price-breakdown .final-line b{
color:#25d366;
font-size:13px;
}
.store-cart-coupon-summary{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
padding:9px 18px;
border-bottom:1px solid #30343c;
background:linear-gradient(90deg,rgba(104,29,34,.42),rgba(9,10,13,.9));
}
.store-cart-coupon-summary span{
color:#fff;
font-size:10px;
font-weight:800;
}
.store-cart-coupon-summary strong{
color:#ff2a3a;
font-size:13px;
}
.store-cart-coupon-summary[hidden]{
display:none !important;
}
/* Expanded profile customization — Creator+ */
.artist-tagline{
margin:5px 0 0;
color:#e8e9ed;
font-size:12px;
font-weight:800;
letter-spacing:.015em;
}
.artist-announcement{
display:flex;
gap:14px;
align-items:center;
margin:0 22px 10px;
padding:12px 16px;
border:1px solid #343943;
border-left:4px solid #b0000b;
background:linear-gradient(100deg,#30070a 0%,#141116 58%,#0b0d11 100%);
color:#fff;
}
.artist-announcement[hidden]{display:none !important;}
.artist-announcement span{
color:#ed1639;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
white-space:nowrap;
}
.artist-announcement strong{
font-size:12px;
line-height:1.4;
}
/* Creator chooses how many compact rows display before the queue scrolls. */
.catalog-track-scroll{
max-height:calc(var(--profile-track-rows, 8) * 60px) !important;
}
/* OSBeats-compatible storefront theme presets. */
.storefront.profile-theme-classic .approved-profile-info{
background:#0d1015;
}
.storefront.profile-theme-classic .store-tab.active{
background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
}
.storefront.profile-theme-deep .approved-profile-info{
background:linear-gradient(110deg,#12090c,#090b0f 70%);
}
.storefront.profile-theme-deep .artist-stats article{
border-top-color:#520509 !important;
}
.storefront.profile-theme-deep .store-tab.active{
background:linear-gradient(105deg,#470307 0%,#5f0509 38%,#260205 74%,#0d0e11 100%) !important;
}
.storefront.profile-theme-deep .artist-announcement{
background:linear-gradient(100deg,#420307 0%,#240307 52%,#0b0d11 100%);
border-left-color:#8e090f;
}
.storefront.profile-theme-blackout .approved-profile-info{
background:#090a0d;
}
.storefront.profile-theme-blackout .artist-stats-wrap{
background:#090a0d;
}
.storefront.profile-theme-blackout .store-tab.active{
background:#090a0d !important;
box-shadow:inset 4px 0 0 #8b0710,inset 0 -2px 0 #8b0710;
}
.storefront.profile-theme-blackout .artist-announcement{
background:#090a0d;
border-color:#2e323a;
border-left-color:#8b0710;
}
@media(max-width:700px){
.artist-announcement{margin:0 10px 10px;display:block;}
.artist-announcement strong{display:block;margin-top:5px;}
}
/* Sandboxed custom storefront theme */
.custom-theme-stage{
margin:0 22px 12px;
border:1px solid #343943;
border-top:3px solid #8b0710;
background:#0a0c10;
}
.custom-theme-stage[hidden]{display:none !important;}
.custom-theme-stage-label{
padding:8px 12px;
border-bottom:1px solid #343943;
color:#ed1639;
background:#090a0d;
font-size:8px;
font-weight:900;
letter-spacing:.08em;
}
.custom-theme-stage iframe{
display:block;
width:100%;
height:420px;
border:0;
background:#0b0d11;
}
@media(max-width:700px){
.custom-theme-stage{margin:0 10px 10px;}
.custom-theme-stage iframe{height:360px;}
}
/* =========================================================
CUSTOM STOREFRONT THEME V2 — FULL SKIN
The OSBeats site header, player, cart, checkout, and catalog stay protected.
========================================================= */
.custom-theme-stage{
margin:0 !important;
width:100%;
border:0 !important;
border-top:2px solid #8b0710 !important;
background:#08090b;
}
.custom-theme-stage iframe{
display:block;
width:100%;
min-height:560px;
height:760px;
border:0;
background:#08090b;
}
/* Custom theme V3: only the old standalone banner is removed.
The real OSBeats profile, stats, music player, license boxes, bundles and about
stay visible and are visually integrated into the active storefront skin. */
body.custom-theme-live .artist-hero{
display:none !important;
}
body.custom-theme-live .custom-theme-stage{
display:block !important;
}
/* Keep protected OSBeats marketplace tools directly below the skin. */
body.custom-theme-live #osbeats-theme-nav{
margin-top:0 !important;
border-top:2px solid #8b0710;
}
body.custom-theme-live .store-panel{
position:relative;
}
/* Visual transition between custom theme and protected marketplace area. */
@media(max-width:700px){
.custom-theme-stage iframe{min-height:480px;height:650px;}
body.custom-theme-live #osbeats-theme-nav::before{left:10px;}
}
/* Custom Theme owner recovery controls */
.custom-theme-owner-bar{
position:relative;
z-index:100;
display:flex;
justify-content:space-between;
gap:18px;
align-items:center;
padding:10px 22px;
border-top:1px solid #7a0710;
border-bottom:1px solid #343943;
background:linear-gradient(90deg,#16070a 0%,#0b0d11 58%,#08090c 100%);
color:#fff;
}
.custom-theme-owner-bar[hidden]{display:none !important;}
.custom-theme-owner-bar span{
display:block;
color:#ed1639;
font-size:8px;
font-weight:900;
letter-spacing:.10em;
}
.custom-theme-owner-bar strong{
display:block;
margin-top:2px;
font-size:11px;
}
.custom-theme-owner-actions{
display:flex;
gap:8px;
}
.custom-theme-owner-actions a{
display:inline-block;
padding:9px 13px;
border:1px solid #b0000b;
border-radius:0;
background:linear-gradient(90deg,#8b0007 0%,#73070B 48%,#240307 100%);
color:#fff;
font-size:9px;
font-weight:900;
text-decoration:none;
}
.custom-theme-owner-actions a:last-child{
border-color:#343943;
background:#111318;
}
@media(max-width:700px){
.custom-theme-owner-bar{display:block;padding:10px;}
.custom-theme-owner-actions{margin-top:8px;flex-wrap:wrap;}
}
/* =========================================================
CUSTOM STOREFRONT THEME V3 — INTEGRATED FULL PROFILE SKIN
========================================================= */
body.custom-theme-live{
background:#03070c !important;
}
body.custom-theme-live .storefront{
position:relative;
max-width:none !important;
width:100% !important;
margin:0 !important;
padding:0 0 48px !important;
background:
radial-gradient(circle at 50% 10%,rgba(20,118,255,.14),transparent 28%),
linear-gradient(180deg,#03070c 0%,#05080d 52%,#030609 100%) !important;
}
/* Theme hero is now flush with the rest of the storefront. */
body.custom-theme-live .custom-theme-stage{
margin:0 !important;
border:0 !important;
border-bottom:1px solid rgba(89,184,255,.42) !important;
background:transparent !important;
}
body.custom-theme-live .custom-theme-stage iframe{
width:100% !important;
background:transparent !important;
}
/* Protected native profile sections become panels INSIDE the skin. */
body.custom-theme-live .approved-profile-info,
body.custom-theme-live .artist-stats-wrap,
body.custom-theme-live .artist-announcement,
body.custom-theme-live #osbeats-theme-nav,
body.custom-theme-live .store-panel{
width:min(1240px,calc(100% - 44px)) !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* Profile identity */
body.custom-theme-live .approved-profile-info{
margin-top:20px !important;
padding:18px !important;
border:1px solid rgba(93,183,255,.58) !important;
background:linear-gradient(145deg,rgba(4,12,21,.94),rgba(7,13,20,.88)) !important;
box-shadow:
inset 0 0 28px rgba(34,139,255,.05),
0 0 18px rgba(32,143,255,.06);
}
body.custom-theme-live .artist-avatar{
border-color:rgba(89,184,255,.78) !important;
background-color:#08111d !important;
}
body.custom-theme-live .artist-name-row h1,
body.custom-theme-live .artist-copy,
body.custom-theme-live .artist-copy p{
color:#fff !important;
}
body.custom-theme-live .artist-location,
body.custom-theme-live .artist-bio{
color:#9fb2c6 !important;
}
/* Stats */
body.custom-theme-live .artist-stats-wrap{
padding:0 !important;
background:transparent !important;
}
body.custom-theme-live .artist-stats{
gap:10px !important;
padding:10px 0 0 !important;
}
body.custom-theme-live .artist-stats article{
min-height:90px;
border:1px solid rgba(83,175,247,.42) !important;
border-top:2px solid #238fe1 !important;
background:linear-gradient(145deg,rgba(5,13,21,.94),rgba(9,14,20,.92)) !important;
}
body.custom-theme-live .artist-stats article span{
color:#77c8ff !important;
}
body.custom-theme-live .artist-stats article strong{
color:#fff !important;
}
/* Announcement */
body.custom-theme-live .artist-announcement{
margin-top:10px !important;
border:1px solid rgba(83,175,247,.42) !important;
border-left:4px solid #238fe1 !important;
background:linear-gradient(90deg,rgba(3,15,26,.96),rgba(4,8,13,.92)) !important;
}
/* Native Music/Bundles/About navigation integrated into skin */
body.custom-theme-live #osbeats-theme-nav{
position:relative;
margin-top:18px !important;
border:1px solid rgba(83,175,247,.42) !important;
background:#07101a !important;
}
body.custom-theme-live .store-tab{
color:#d9ecfb !important;
border-color:rgba(83,175,247,.28) !important;
background:linear-gradient(180deg,#0b1420,#07101a) !important;
}
body.custom-theme-live .store-tab.active{
background:linear-gradient(90deg,#06355c 0%,#0a67a7 45%,#061a2b 100%) !important;
box-shadow:inset 0 -2px 0 #45baff !important;
}
/* Main protected panels */
body.custom-theme-live .store-panel{
margin-top:10px !important;
padding:16px !important;
border:1px solid rgba(83,175,247,.38) !important;
background:linear-gradient(180deg,rgba(5,11,18,.96),rgba(4,8,13,.98)) !important;
}
body.custom-theme-live .section-heading{
border-bottom-color:rgba(83,175,247,.32) !important;
}
body.custom-theme-live .section-heading span{
color:#43b4ff !important;
}
body.custom-theme-live .section-heading h2{
color:#fff !important;
}
body.custom-theme-live .section-heading p{
color:#8da3b8 !important;
}
/* Player and catalog */
body.custom-theme-live .catalog-master-player,
body.custom-theme-live .catalog-player-shell,
body.custom-theme-live .track-grid{
border-color:rgba(83,175,247,.38) !important;
}
body.custom-theme-live .catalog-master-player{
background:linear-gradient(145deg,#07101a,#05090f) !important;
}
body.custom-theme-live .catalog-track-row,
body.custom-theme-live .track-row{
border-color:rgba(70,125,171,.28) !important;
background:#080d14 !important;
}
body.custom-theme-live .catalog-track-row.is-current,
body.custom-theme-live .track-row.is-current{
background:linear-gradient(90deg,rgba(5,45,76,.78),#090e15 42%) !important;
border-left-color:#32a9f5 !important;
}
/* Purchase / license blocks */
body.custom-theme-live .catalog-purchase-option,
body.custom-theme-live .license-info-card,
body.custom-theme-live .license-card{
border-color:rgba(83,175,247,.42) !important;
background:linear-gradient(145deg,#07101a,#05090e) !important;
}
body.custom-theme-live .catalog-purchase-option button,
body.custom-theme-live .license-info-card button,
body.custom-theme-live .license-card button{
border-color:#249fe9 !important;
background:linear-gradient(90deg,#064d7f 0%,#0a6ba8 48%,#05243b 100%) !important;
}
/* Buttons remain square and themed. */
body.custom-theme-live .owner-button,
body.custom-theme-live .follow-button,
body.custom-theme-live .store-cart-button{
border-radius:0 !important;
}
/* Producer Studio gets the strongest blue neon treatment. */
body.custom-theme-live[data-custom-skin="producer-studio"] .storefront{
background:
radial-gradient(circle at 50% 4%,rgba(18,114,255,.22),transparent 24%),
radial-gradient(circle at 15% 46%,rgba(8,80,160,.11),transparent 20%),
linear-gradient(180deg,#02070d,#03080e 55%,#02060a) !important;
}
body.custom-theme-live[data-custom-skin="producer-studio"] .approved-profile-info,
body.custom-theme-live[data-custom-skin="producer-studio"] .artist-stats article,
body.custom-theme-live[data-custom-skin="producer-studio"] .store-panel{
box-shadow:
inset 0 0 24px rgba(34,139,255,.045),
0 0 12px rgba(31,151,255,.045);
}
/* Other premade themes still cover the entire native profile,
but keep their own accent family. */
body.custom-theme-live[data-custom-skin="osbeats-signature"] .storefront,
body.custom-theme-live[data-custom-skin="artist-showcase"] .storefront{
background:
radial-gradient(circle at 75% 12%,rgba(150,0,10,.18),transparent 28%),
linear-gradient(180deg,#08090c,#130104 42%,#07080b) !important;
}
body.custom-theme-live[data-custom-skin="osbeats-signature"] .approved-profile-info,
body.custom-theme-live[data-custom-skin="osbeats-signature"] .artist-stats article,
body.custom-theme-live[data-custom-skin="osbeats-signature"] .store-panel,
body.custom-theme-live[data-custom-skin="artist-showcase"] .approved-profile-info,
body.custom-theme-live[data-custom-skin="artist-showcase"] .artist-stats article,
body.custom-theme-live[data-custom-skin="artist-showcase"] .store-panel{
border-color:rgba(179,15,26,.44) !important;
}
body.custom-theme-live[data-custom-skin="osbeats-signature"] .store-tab.active,
body.custom-theme-live[data-custom-skin="artist-showcase"] .store-tab.active{
background:linear-gradient(90deg,#7e0008,#4c0306,#160104) !important;
box-shadow:inset 0 -2px 0 #dc1825 !important;
}
body.custom-theme-live[data-custom-skin="dark-catalog"] .storefront{
background:linear-gradient(180deg,#06070a,#0a0c10 55%,#050609) !important;
}
body.custom-theme-live[data-custom-skin="dark-catalog"] .approved-profile-info,
body.custom-theme-live[data-custom-skin="dark-catalog"] .artist-stats article,
body.custom-theme-live[data-custom-skin="dark-catalog"] .store-panel{
border-color:#343a43 !important;
background:#0b0e13 !important;
}
@media(max-width:760px){
body.custom-theme-live .approved-profile-info,
body.custom-theme-live .artist-stats-wrap,
body.custom-theme-live .artist-announcement,
body.custom-theme-live #osbeats-theme-nav,
body.custom-theme-live .store-panel{
width:calc(100% - 20px) !important;
}
}
/* =========================================================
CUSTOM STOREFRONT THEME V4 — TRUE PROFILE REPLACEMENT
The selected skin IS the profile page. Only the protected
OSBeats music player/catalog remains below the skin.
========================================================= */
body.custom-theme-live .artist-hero,
body.custom-theme-live .approved-profile-info,
body.custom-theme-live .artist-stats-wrap,
body.custom-theme-live .artist-announcement,
body.custom-theme-live #osbeats-theme-nav,
body.custom-theme-live #bundles,
body.custom-theme-live #about{
display:none !important;
}
body.custom-theme-live .storefront{
max-width:none !important;
width:100% !important;
margin:0 !important;
padding:0 0 34px !important;
background:#03070c !important;
}
/* Skin is the profile presentation. */
body.custom-theme-live .custom-theme-stage{
display:block !important;
width:100% !important;
margin:0 !important;
border:0 !important;
background:#03070c !important;
}
body.custom-theme-live .custom-theme-stage iframe{
display:block;
width:100% !important;
min-height:760px;
border:0 !important;
background:#03070c !important;
}
/* The only standard storefront component shown is the music player/catalog. */
body.custom-theme-live #music{
display:block !important;
width:min(1240px,calc(100% - 44px)) !important;
margin:20px auto 0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
}
body.custom-theme-live #music .section-heading{
display:none !important;
}
body.custom-theme-live #trackGrid{
margin:0 !important;
}
/* Remove the standalone license-information section from the visible skin profile.
Leasing/Exclusive rights are accessed from the skin popups instead. */
body.custom-theme-live .license-information,
body.custom-theme-live .license-info-section,
body.custom-theme-live .catalog-license-information{
display:none !important;
}
/* Keep the player itself styled as one protected OSBeats component. */
body.custom-theme-live .catalog-master-player{
border:1px solid rgba(71,170,236,.52) !important;
background:linear-gradient(145deg,#07101a,#04080e) !important;
box-shadow:0 0 18px rgba(20,145,255,.07);
}
/* Owner recovery bar remains available only to the profile owner. */
body.custom-theme-live .custom-theme-owner-bar{
display:flex;
}
/* Protected popup features launched from skin boxes. */
.custom-theme-feature-modal{
position:fixed;
inset:0;
z-index:10050;
display:grid;
place-items:center;
padding:22px;
}
.custom-theme-feature-modal[hidden]{display:none !important;}
.custom-theme-feature-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.70);
backdrop-filter:blur(3px);
}
.custom-theme-feature-dialog{
position:relative;
z-index:2;
width:min(820px,100%);
max-height:82vh;
overflow:auto;
padding:24px;
border:1px solid #238fe1;
border-top:3px solid #39aef6;
border-radius:0;
background:linear-gradient(145deg,#07101a,#04080e 70%);
color:#fff;
box-shadow:0 0 38px rgba(27,143,241,.18);
}
.custom-theme-feature-close{
position:absolute;
right:14px;
top:12px;
width:38px;
height:38px;
border:1px solid #3b6b8d;
border-radius:0;
background:#09121c;
color:#fff;
font-size:22px;
cursor:pointer;
}
.custom-theme-feature-kicker{
color:#37aff8;
font-size:9px;
font-weight:900;
letter-spacing:.14em;
}
.custom-theme-feature-dialog h2{
margin:6px 0 18px;
font-size:27px;
}
.custom-theme-feature-body{
color:#d8e0e7;
}
.theme-modal-message{
padding:18px;
border:1px solid #284659;
background:#090e14;
}
.theme-modal-message span{
color:#31aef9;
font-size:9px;
font-weight:900;
letter-spacing:.10em;
}
.theme-modal-message p{
margin:10px 0 0;
color:#fff;
font-size:14px;
line-height:1.65;
}
.theme-license-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.theme-license-grid.single{grid-template-columns:1fr;}
.theme-license-grid article{
padding:18px;
border:1px solid #2c526b;
background:#090e14;
}
.theme-license-grid article>span{
color:#32aff9;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
}
.theme-license-grid article>strong{
display:block;
margin:7px 0 12px;
color:#fff;
font-size:24px;
}
.theme-license-grid article p{
min-height:72px;
color:#aeb9c2;
font-size:11px;
line-height:1.6;
}
.theme-license-grid article button{
width:100%;
min-height:42px;
border:1px solid #249fe9;
border-radius:0;
background:linear-gradient(90deg,#064d7f,#0a6ba8 48%,#05243b);
color:#fff;
font-weight:900;
cursor:pointer;
}
body.theme-feature-open{overflow:hidden;}
@media(max-width:760px){
body.custom-theme-live #music{
width:calc(100% - 20px) !important;
}
.theme-license-grid{grid-template-columns:1fr;}
}
.theme-modal-track-name{
display:block;
margin:-4px 0 12px;
color:#8fa5b8;
font-size:10px;
font-weight:700;
}
/* =========================================================
CUSTOM THEME — THEME-AWARE ACCENTS
Player outlines, popups, and cart accents inherit the active
premade skin instead of staying permanently blue.
========================================================= */
body.custom-theme-live{
--skin-accent:#24a8ff;
--skin-accent-strong:#39b5ff;
--skin-accent-deep:#064d7f;
--skin-accent-dark:#05243b;
--skin-accent-soft:rgba(36,168,255,.42);
--skin-accent-glow:rgba(36,168,255,.16);
}
/* Producer Studio */
body.custom-theme-live[data-custom-skin="producer-studio"]{
--skin-accent:#24a8ff;
--skin-accent-strong:#55c2ff;
--skin-accent-deep:#064d7f;
--skin-accent-dark:#031a2b;
--skin-accent-soft:rgba(36,168,255,.48);
--skin-accent-glow:rgba(36,168,255,.18);
}
/* OSBeats Signature */
body.custom-theme-live[data-custom-skin="osbeats-signature"]{
--skin-accent:#d20d18;
--skin-accent-strong:#f01c2a;
--skin-accent-deep:#8b0007;
--skin-accent-dark:#240307;
--skin-accent-soft:rgba(210,13,24,.48);
--skin-accent-glow:rgba(210,13,24,.17);
}
/* Artist Showcase */
body.custom-theme-live[data-custom-skin="artist-showcase"]{
--skin-accent:#c40c18;
--skin-accent-strong:#ff2636;
--skin-accent-deep:#7a060c;
--skin-accent-dark:#210205;
--skin-accent-soft:rgba(196,12,24,.46);
--skin-accent-glow:rgba(196,12,24,.17);
}
/* Dark Catalog */
body.custom-theme-live[data-custom-skin="dark-catalog"]{
--skin-accent:#a70a13;
--skin-accent-strong:#cf1822;
--skin-accent-deep:#5c050a;
--skin-accent-dark:#151010;
--skin-accent-soft:rgba(167,10,19,.42);
--skin-accent-glow:rgba(167,10,19,.14);
}
/* User-authored custom theme falls back to OSBeats red instead of blue. */
body.custom-theme-live[data-custom-skin="custom"]{
--skin-accent:#b0000b;
--skin-accent-strong:#ed1639;
--skin-accent-deep:#73070b;
--skin-accent-dark:#240307;
--skin-accent-soft:rgba(176,0,11,.44);
--skin-accent-glow:rgba(176,0,11,.15);
}
/* Music player / catalog shell */
body.custom-theme-live .catalog-master-player{
border-color:var(--skin-accent-soft) !important;
box-shadow:
0 0 18px var(--skin-accent-glow),
inset 0 0 0 1px color-mix(in srgb,var(--skin-accent) 15%,transparent) !important;
}
body.custom-theme-live .catalog-now-label,
body.custom-theme-live .catalog-current-license-grid span,
body.custom-theme-live .catalog-transport #catalogCurrentTime{
color:var(--skin-accent-strong) !important;
}
body.custom-theme-live .catalog-transport .catalog-main-play{
border-color:var(--skin-accent) !important;
background:linear-gradient(90deg,var(--skin-accent-deep),var(--skin-accent),var(--skin-accent-dark)) !important;
}
body.custom-theme-live .catalog-wave-progress{
background:repeating-linear-gradient(
90deg,
var(--skin-accent-strong) 0 2px,
transparent 2px 5px
) !important;
}
/* License / Artist News popups */
body.custom-theme-live .custom-theme-feature-dialog{
border-color:var(--skin-accent) !important;
border-top-color:var(--skin-accent-strong) !important;
box-shadow:0 0 38px var(--skin-accent-glow) !important;
}
body.custom-theme-live .custom-theme-feature-close{
border-color:var(--skin-accent-soft) !important;
}
body.custom-theme-live .custom-theme-feature-kicker,
body.custom-theme-live .theme-modal-message span,
body.custom-theme-live .theme-license-grid article>span{
color:var(--skin-accent-strong) !important;
}
body.custom-theme-live .theme-modal-message,
body.custom-theme-live .theme-license-grid article{
border-color:var(--skin-accent-soft) !important;
}
body.custom-theme-live .theme-license-grid article button{
border-color:var(--skin-accent) !important;
background:linear-gradient(
90deg,
var(--skin-accent-deep) 0%,
var(--skin-accent) 48%,
var(--skin-accent-dark) 100%
) !important;
}
/* Player purchase / action buttons while a custom skin is active */
body.custom-theme-live .catalog-license-option button,
body.custom-theme-live .selected-license-card button,
body.custom-theme-live .catalog-selected-licenses .selected-license-card button,
body.custom-theme-live .catalog-coupon button,
body.custom-theme-live .catalog-cart-button,
body.custom-theme-live .catalog-add-cart,
body.custom-theme-live [data-license-tier] button{
border-color:var(--skin-accent) !important;
background:linear-gradient(
90deg,
var(--skin-accent-deep) 0%,
var(--skin-accent) 48%,
var(--skin-accent-dark) 100%
) !important;
}
body.custom-theme-live .catalog-license-option button:hover,
body.custom-theme-live .selected-license-card button:hover,
body.custom-theme-live .catalog-selected-licenses .selected-license-card button:hover,
body.custom-theme-live .catalog-coupon button:hover,
body.custom-theme-live .catalog-cart-button:hover,
body.custom-theme-live .catalog-add-cart:hover,
body.custom-theme-live [data-license-tier] button:hover{
border-color:var(--skin-accent-strong) !important;
filter:brightness(1.10);
}
/* Shopping cart accents also follow the skin. */
body.custom-theme-live .store-cart-button:hover{
border-color:var(--skin-accent) !important;
}
body.custom-theme-live .store-cart-button span{
background:linear-gradient(
135deg,
var(--skin-accent) 0%,
var(--skin-accent-deep) 55%,
var(--skin-accent-dark) 100%
) !important;
}
body.custom-theme-live .store-cart-head{
border-bottom-color:var(--skin-accent) !important;
}
body.custom-theme-live .store-cart-head span{
color:var(--skin-accent-strong) !important;
}
body.custom-theme-live .store-cart-drawer{
border-left-color:var(--skin-accent-soft) !important;
}
/* Keep all theme-aware components square. */
body.custom-theme-live .catalog-master-player,
body.custom-theme-live .custom-theme-feature-dialog,
body.custom-theme-live .theme-modal-message,
body.custom-theme-live .theme-license-grid article,
body.custom-theme-live .store-cart-drawer{
border-radius:0 !important;
}
/* AURORA WAVE — REAL OSBEATS PLAYER/CATALOG INTEGRATION */
body.custom-theme-live[data-custom-skin="aurora-wave"]{
--skin-accent:#20d8ff;
--skin-accent-strong:#b52cff;
--skin-accent-deep:#176dff;
--skin-accent-dark:#07101e;
--skin-accent-soft:rgba(32,216,255,.55);
--skin-accent-glow:rgba(156,37,255,.22);
background:#030712 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .storefront{
background:radial-gradient(circle at 18% 10%,rgba(137,30,255,.12),transparent 26%),radial-gradient(circle at 78% 11%,rgba(24,178,255,.10),transparent 30%),linear-gradient(135deg,#030712,#061020 62%,#070318) !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-stage iframe{min-height:410px !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
width:min(1320px,calc(100% - 56px)) !important;
margin:-2px auto 0 !important;
position:relative;z-index:4;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-master-player{
border:1px solid #20d8ff !important;border-radius:10px !important;overflow:hidden;
background:rgba(2,8,18,.96) !important;
box-shadow:0 0 24px rgba(32,216,255,.16),0 0 45px rgba(156,37,255,.08) !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{
grid-template-columns:128px minmax(0,1fr) 360px !important;gap:18px !important;padding:15px !important;
background:radial-gradient(circle at 38% 70%,rgba(37,92,255,.08),transparent 34%),linear-gradient(145deg,#06101d,#050914) !important;
border-bottom:1px solid #214e72 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-art{
width:128px !important;height:128px !important;border:1px solid #20d8ff !important;border-radius:7px !important;
box-shadow:0 0 17px rgba(32,216,255,.16);
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-label{color:#20d8ff !important;letter-spacing:.12em}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-title-row h3{font-size:19px !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-transport{margin-top:9px !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-transport button{border-color:#285074 !important;background:#07101c !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-transport .catalog-main-play{
width:46px !important;height:38px !important;border-color:#20d8ff !important;border-radius:50% !important;
background:linear-gradient(135deg,#176dff,#9c25ff) !important;box-shadow:0 0 18px rgba(73,94,255,.32)
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-wave{height:54px !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-wave-base{background:repeating-linear-gradient(90deg,#455064 0 2px,transparent 2px 5px) !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-wave-progress{
background:repeating-linear-gradient(90deg,#20d8ff 0 2px,transparent 2px 4px,#9c25ff 4px 6px,transparent 6px 8px) !important
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options{
border-left:1px solid #214e72 !important;padding-left:15px !important
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options:before{
content:'QUICK CHECKOUT';display:block;margin-bottom:8px;color:#20d8ff;font-size:10px;font-weight:900;letter-spacing:.08em
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid{grid-template-columns:repeat(2,1fr) !important;gap:6px !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid>div{
border:1px solid #334b67 !important;border-radius:4px;background:#050a13 !important;padding:7px 5px !important
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid span{color:#20d8ff !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-tools button{border-color:#6a3da0 !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-table-head{background:#06101c !important;border-bottom-color:#214e72 !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-row{background:#07101a !important;border-bottom-color:#172e48 !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-row:nth-child(even){background:#050b14 !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-row.active{
background:linear-gradient(90deg,rgba(34,105,255,.30),rgba(115,37,255,.12),#07101a 68%) !important;
box-shadow:inset 3px 0 0 #20d8ff !important
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-row-play{border-color:#285074 !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-row.playing .catalog-row-play{
background:linear-gradient(135deg,#176dff,#9c25ff) !important;border-color:#20d8ff !important
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-price-button:hover{color:#20d8ff !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-scroll{scrollbar-color:#9c25ff #07101a !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-scroll::-webkit-scrollbar-thumb{background:linear-gradient(#20d8ff,#9c25ff) !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-footer{background:#050914 !important;border-top-color:#214e72 !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-coupon input{border-color:#30455f !important;background:#040813 !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-coupon button,
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-cart-button{
border-color:#20d8ff !important;background:linear-gradient(90deg,#176dff,#9c25ff) !important
}
.aurora-native-extras{width:min(1320px,calc(100% - 56px));margin:14px auto 0}
.aurora-native-license-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.aurora-native-license-grid button{
min-height:155px;padding:18px;border:1px solid #6b3fc1;border-top:2px solid #20d8ff;border-radius:10px;
background:linear-gradient(145deg,#081523,#09071a);color:#fff;text-align:left;cursor:pointer;
display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 0 22px rgba(32,216,255,.035)
}
.aurora-native-license-grid button:hover{border-color:#20d8ff;box-shadow:0 0 20px rgba(156,37,255,.17)}
.aurora-native-license-grid i{font-style:normal;color:#9c25ff;font-size:24px;font-weight:900}
.aurora-native-license-grid span{color:#20d8ff;font-size:10px;font-weight:900;letter-spacing:.07em}
.aurora-native-license-grid strong{font-size:17px}.aurora-native-license-grid small{margin-top:auto;color:#c7d3e4}
.aurora-native-connect{
margin-top:12px;min-height:68px;padding:14px 18px;border:1px solid #214f78;border-radius:8px;background:#06101c;
display:flex;justify-content:space-between;align-items:center;gap:16px
}
.aurora-native-connect b{display:block;color:#20d8ff;font-size:10px;letter-spacing:.08em}
.aurora-native-connect span{display:block;margin-top:5px;color:#aebbd0;font-size:10px}
.aurora-native-connect button{
min-width:130px;min-height:38px;border:1px solid #20d8ff;border-radius:0;
background:linear-gradient(90deg,#176dff,#9c25ff);color:#fff;font-weight:900
}
.aurora-native-stats{
margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);
border:1px solid #214f78;border-radius:8px;overflow:hidden;background:#06101c
}
.aurora-native-stats article{min-height:72px;padding:13px 17px;border-right:1px solid #193952;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto}
.aurora-native-stats article:last-child{border-right:0}
.aurora-native-stats i{grid-row:1/3;align-self:center;color:#20d8ff;font-size:23px;font-style:normal}
.aurora-native-stats span{color:#9fb0c4;font-size:8px;letter-spacing:.08em}.aurora-native-stats strong{font-size:18px}
@media(max-width:900px){
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{grid-template-columns:105px 1fr !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options{grid-column:1/3;border-left:0 !important;border-top:1px solid #214e72;padding:12px 0 0 !important}
.aurora-native-license-grid,.aurora-native-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
body.custom-theme-live[data-custom-skin="aurora-wave"] #music,.aurora-native-extras{width:calc(100% - 20px) !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{grid-template-columns:1fr !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-art{width:100% !important;height:160px !important}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options{grid-column:1}
.aurora-native-license-grid,.aurora-native-stats{grid-template-columns:1fr}
.aurora-native-connect{display:block}.aurora-native-connect button{margin-top:10px}
}
/* Aurora Wave mockup-correction pass */
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-stage iframe{
min-height:355px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
margin:-1px auto 0 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-master-player{
border-radius:8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{
grid-template-columns:110px minmax(0,1fr) 340px !important;
padding:12px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-art{
width:110px !important;height:110px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-title-row h3{
font-size:17px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options:before{
content:'QUICK CHECKOUT';
color:#20d8ff;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid{
grid-template-columns:1fr !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid>div{
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:center !important;
text-align:left !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid span{
margin:0 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid strong{
margin:0 !important;
}
/* =========================================================
AURORA WAVE — FINAL LAYOUT CORRECTION
========================================================= */
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-stage{
height:auto !important;
min-height:0 !important;
overflow:visible !important;
background:#020611 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host{
display:block !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-stage iframe{
display:none !important;
}
/* The real OSBeats player begins immediately after the Aurora hero. */
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
width:min(1280px,calc(100% - 44px)) !important;
margin:0 auto !important;
padding-top:0 !important;
}
/* Remove the duplicate large selected-license row.
Quick Checkout + the track grid already expose those choices. */
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-selected-licenses{
display:none !important;
}
/* Compact mockup proportions. */
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-master-player{
margin:0 !important;
border-radius:7px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{
grid-template-columns:105px minmax(0,1fr) 310px !important;
min-height:150px !important;
padding:12px 14px !important;
gap:14px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-art{
width:105px !important;
height:105px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-main{
min-width:0 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-wave{
margin-top:7px !important;
height:42px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options{
align-self:stretch !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options:before{
content:'QUICK CHECKOUT' !important;
margin:0 0 7px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid{
grid-template-columns:1fr !important;
gap:5px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid>div{
min-height:30px !important;
padding:6px 8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-tools{
margin-top:7px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-table-head,
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-row{
grid-template-columns:76px minmax(230px,1fr) 120px 120px 120px 120px 70px !important;
}
/* Keep the lower Aurora functional cards tight to the player. */
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-extras{
margin-top:12px !important;
}
@media(max-width:900px){
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{
grid-template-columns:95px minmax(0,1fr) !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options{
grid-column:1/3 !important;
}
}
@media(max-width:620px){
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
width:calc(100% - 18px) !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{
grid-template-columns:1fr !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options{
grid-column:1 !important;
}
}
/* =========================================================
AURORA WAVE — APPROVED MOCKUP PROPORTIONS
========================================================= */
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-stage{
margin:0 !important;
padding:0 !important;
min-height:0 !important;
height:auto !important;
border-bottom:0 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host{
line-height:normal !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
width:min(1180px,calc(100% - 44px)) !important;
margin:-1px auto 0 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-master-player{
border:1px solid #20d8ff !important;
border-radius:5px !important;
box-shadow:
0 0 18px rgba(32,216,255,.12),
0 0 34px rgba(156,37,255,.06) !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{
min-height:130px !important;
grid-template-columns:82px minmax(0,1fr) 270px !important;
gap:12px !important;
padding:10px 12px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-art{
width:82px !important;
height:82px !important;
border-radius:4px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-label{
font-size:8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-title-row h3{
font-size:15px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-artist{
font-size:9px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-transport{
margin-top:5px !important;
gap:6px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-transport button{
width:34px !important;
height:28px !important;
min-width:34px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-transport .catalog-main-play{
width:38px !important;
height:32px !important;
border-radius:50% !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-wave{
margin-top:4px !important;
height:30px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options{
padding-left:10px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-options:before{
font-size:8px !important;
margin-bottom:4px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid{
gap:3px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid>div{
min-height:24px !important;
padding:4px 6px !important;
font-size:8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid span{
font-size:7px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-current-license-grid strong{
font-size:11px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-tools{
margin-top:4px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-tools button{
min-height:25px !important;
padding:4px 8px !important;
font-size:7px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-table-head{
min-height:30px !important;
font-size:7px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-track-row{
min-height:43px !important;
font-size:9px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-row-play{
width:28px !important;
height:28px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-player-footer{
min-height:50px !important;
padding:8px 10px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-coupon input{
height:32px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-coupon button,
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-cart-button{
min-height:32px !important;
height:32px !important;
}
/* Lower feature boxes match the compact four-card mockup. */
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-extras{
width:min(1180px,calc(100% - 44px)) !important;
margin:10px auto 20px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-license-grid{
gap:8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-license-grid button{
min-height:112px !important;
padding:13px !important;
border-radius:5px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-license-grid i{
font-size:18px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-license-grid span{
font-size:8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-license-grid strong{
font-size:13px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-license-grid small{
font-size:8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-connect{
min-height:50px !important;
padding:9px 12px !important;
border-radius:4px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-connect button{
min-height:30px !important;
min-width:100px !important;
font-size:8px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-stats{
border-radius:4px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-stats article{
min-height:54px !important;
padding:9px 12px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-stats i{
font-size:17px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-stats strong{
font-size:14px !important;
}
/* Aurora Wave final mockup public-player alignment */
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
width:min(1400px,calc(100% - 44px)) !important;
margin:0 auto 14px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-master-player{
border-color:#20d8ff !important;
border-radius:10px !important;
background:#06101b !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-now-playing{
background:#06101b !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-transport .catalog-main-play{
border-radius:50% !important;
background:linear-gradient(135deg,#1d8cff,#9c25ff) !important;
border-color:#20d8ff !important;
box-shadow:0 0 20px rgba(117,48,255,.32) !important;
}
/* ================================================================
AURORA WAVE — TRUE MOCKUP REBUILD
This skin uses its OWN presentation while retaining real OSBeats
playback, track selection, licenses, cart and live stats.
================================================================ */
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
width:100% !important;
margin:0 !important;
padding:0 26px 22px !important;
background:
radial-gradient(circle at 16% 0%,rgba(115,29,255,.08),transparent 24%),
radial-gradient(circle at 80% 0%,rgba(21,159,255,.07),transparent 25%),
#020611 !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] #trackGrid{
width:min(1400px,100%) !important;
margin:0 auto !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .catalog-master-player{
display:none !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-shell{
width:100%;
color:#fff;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-player{
min-height:258px;
display:grid;
grid-template-columns:150px 300px minmax(320px,1fr) 350px;
gap:16px;
padding:17px;
border:1px solid #20d8ff;
border-radius:11px;
background:
radial-gradient(circle at 48% 55%,rgba(121,33,255,.08),transparent 30%),
linear-gradient(145deg,#06111d,#030812);
box-shadow:
0 0 22px rgba(32,216,255,.10),
inset 0 0 24px rgba(34,59,112,.08);
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cover-wrap{
display:grid;
place-items:center;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cover{
width:132px !important;
height:190px !important;
border:1px solid #20d8ff !important;
border-radius:6px !important;
background-position:center !important;
background-size:cover !important;
box-shadow:0 0 16px rgba(32,216,255,.12);
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-section-label{
margin-bottom:9px;
color:#20d8ff;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-track-scroll{
max-height:210px;
overflow:auto;
scrollbar-width:thin;
scrollbar-color:#8f31ff #06101c;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-track-row{
width:100%;
min-height:35px !important;
padding:7px 9px !important;
display:grid !important;
grid-template-columns:30px minmax(0,1fr) 72px 24px !important;
gap:6px !important;
align-items:center;
border:0 !important;
border-bottom:1px solid rgba(59,78,111,.24) !important;
border-radius:0 !important;
background:transparent !important;
color:#fff;
text-align:left;
cursor:pointer;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-track-row.active{
background:linear-gradient(90deg,#1b77ff 0%,#8f31ff 58%,#a928ff 100%) !important;
box-shadow:none !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-track-row span{
color:#b9c6d6;
font-size:11px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-track-row strong{
overflow:hidden;
color:#fff;
font-size:12px;
text-overflow:ellipsis;
white-space:nowrap;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-track-row em{
overflow:hidden;
color:#aebbc9;
font-size:8px;
font-style:normal;
text-overflow:ellipsis;
white-space:nowrap;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-track-row small{
color:#fff;
text-align:right;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-wave-player{
align-self:center;
min-width:0;
padding:3px 3px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-current{
margin-bottom:7px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-current>span{
display:block;
color:#20d8ff;
font-size:8px;
font-weight:900;
letter-spacing:.08em;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-current strong{
display:block;
margin-top:2px;
color:#fff;
font-size:14px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-current small{
color:#9fb2c7;
font-size:9px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-wave{
position:relative;
width:100%;
height:82px !important;
margin:7px 0 10px !important;
border:0 !important;
background:transparent !important;
overflow:hidden;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-wave .catalog-wave-base,
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-wave .catalog-wave-progress{
position:absolute;
inset:0;
display:block;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-wave .catalog-wave-base{
background:
repeating-linear-gradient(
90deg,
#20d8ff 0 2px,
transparent 2px 5px
) !important;
opacity:.50;
mask-image:linear-gradient(
to bottom,
transparent 0%,
#000 15%,
#000 85%,
transparent 100%
);
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-wave .catalog-wave-progress{
width:0%;
background:
repeating-linear-gradient(
90deg,
#20d8ff 0 2px,
transparent 2px 5px,
#694cff 5px 7px,
transparent 7px 10px,
#e02cff 10px 12px,
transparent 12px 15px
) !important;
filter:drop-shadow(0 0 4px rgba(186,43,255,.55));
mask-image:linear-gradient(
to bottom,
transparent 0%,
#000 10%,
#000 90%,
transparent 100%
);
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-controls{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-controls button{
width:40px;
height:40px;
border:1px solid #315076;
border-radius:4px;
background:#050a13;
color:#fff;
font-size:14px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-main-play{
width:64px !important;
height:64px !important;
border:1px solid #20d8ff !important;
border-radius:50% !important;
background:linear-gradient(135deg,#1d8cff 0%,#643cff 46%,#c725ff 100%) !important;
box-shadow:
0 0 18px rgba(32,216,255,.18),
0 0 28px rgba(157,39,255,.22) !important;
font-size:25px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-controls span{
color:#d0d8e4;
font-size:10px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-checkout{
padding-left:16px;
border-left:1px solid #194662;
align-self:stretch;
display:flex;
flex-direction:column;
justify-content:center;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-checkout select,
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-beat-name{
width:100%;
min-height:43px;
margin-bottom:10px;
padding:9px 11px;
border:1px solid #35455f;
border-radius:4px;
background:#020711;
color:#fff;
font-size:11px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-beat-name{
display:flex;
align-items:center;
color:#aeb8c8;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-buy-row{
display:grid;
grid-template-columns:1fr 64px;
gap:10px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-buy{
min-height:54px;
border:1px solid #20d8ff;
border-radius:4px;
background:linear-gradient(90deg,#1c90ff 0%,#5c4dff 46%,#a921ff 100%);
color:#fff;
font-size:18px;
font-weight:900;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cart{
border:1px solid #8a3db1;
border-radius:4px;
background:#050914;
color:#fff;
font-size:21px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards{
margin-top:14px;
display:grid;
grid-template-columns:repeat(4,1fr) 1.18fr;
gap:14px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards>button,
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-connected{
min-height:186px;
padding:17px;
border:1px solid #7b36a9;
border-radius:9px;
background:linear-gradient(145deg,#07111f,#070916);
color:#fff;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards>button{
display:grid;
grid-template-columns:55px 1fr;
grid-template-rows:auto auto auto 1fr;
column-gap:10px;
text-align:left;
cursor:pointer;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-card-icon{
grid-row:1/3;
width:52px;
height:52px;
display:grid;
place-items:center;
border:1px solid #315b82;
border-radius:8px;
color:#b53dff;
font-size:26px;
font-style:normal;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards>button>b{
color:#a526ff;
font-size:27px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards>button>span{
color:#20d8ff;
font-size:9px;
font-weight:900;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards>button>strong{
grid-column:1/3;
margin-top:13px;
color:#fff;
font-size:16px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards>button>small{
grid-column:1/3;
align-self:end;
color:#bec9d7;
font-size:10px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-connected>span{
color:#20d8ff;
font-size:12px;
font-weight:900;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-connected p{
color:#c1cbd8;
font-size:11px;
line-height:1.5;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-email{
display:grid;
grid-template-columns:1fr 68px;
margin-top:16px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-email span{
padding:10px;
border:1px solid #35455d;
border-radius:4px 0 0 4px;
color:#929eae;
font-size:10px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-email button{
border:0;
border-radius:0 4px 4px 0;
background:linear-gradient(90deg,#1c79ff,#9b25ff);
color:#fff;
font-weight:900;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-connected footer{
margin-top:18px;
color:#20d8ff;
text-align:center;
font-size:18px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-stats{
min-height:82px;
margin-top:14px;
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid #315d80;
border-radius:9px;
overflow:hidden;
background:#06101b;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-stats article{
padding:13px 22px;
display:grid;
grid-template-columns:54px 1fr;
grid-template-rows:auto auto;
border-right:1px solid #1d3c56;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-stats article:last-child{
border-right:0;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-stats i{
grid-row:1/3;
align-self:center;
color:#20d8ff;
font-size:29px;
font-style:normal;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-stats span{
color:#aeb9c8;
font-size:9px;
letter-spacing:.07em;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-stats strong{
color:#fff;
font-size:21px;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-hidden-player-hooks{
display:none !important;
}
/* Prevent the old normal music-player presentation from leaking into Aurora. */
body.custom-theme-live[data-custom-skin="aurora-wave"] .profile-license-info-section,
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-native-extras{
display:none !important;
}
/* Better neon ribbon waves in the Aurora hero.
This replaces the earlier three-line appearance. */
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host .aurora-final-wave i,
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host .aurora-wave-art i,
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host .aurora-flow span{
border-top-width:1px !important;
filter:
drop-shadow(0 0 2px rgba(80,80,255,.38))
drop-shadow(0 0 5px rgba(167,37,255,.18)) !important;
}
@media(max-width:1050px){
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-player{
grid-template-columns:120px 250px 1fr;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-checkout{
grid-column:1/4;
border-left:0;
border-top:1px solid #194662;
padding:15px 0 0;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards{
grid-template-columns:repeat(2,1fr);
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-connected{
grid-column:1/3;
}
}
@media(max-width:700px){
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
padding:0 10px 15px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-player{
grid-template-columns:1fr;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cover{
width:100% !important;
height:150px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-checkout{
grid-column:1;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-cards,
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-stats{
grid-template-columns:1fr;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-connected{
grid-column:auto;
}
}
/* =========================================================
AURORA V3 — gap removal + truthful live stats
========================================================= */
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-stage,
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host{
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] #music{
margin:0 !important;
padding:0 26px 20px !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] #trackGrid{
margin:0 auto !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-live-shell{
margin-top:0 !important;
}
/* Do not show any old Aurora supplemental block from previous versions. */
body.custom-theme-live[data-custom-skin="aurora-wave"] .aurora-native-extras{
display:none !important;
}
/* Aurora v4 alignment correction */
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host .aurora-v4-centered{
max-width:500px !important;
text-align:center !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host .aurora-v4-centered h2,
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host .aurora-v4-centered p{
text-align:center !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"] .custom-theme-shadow-host .aurora-v4-actions{
justify-content:center !important;
}
/* =========================================================
AURORA WAVE — CENTERING ONLY FIX
Centers EVERYTHING below YOUR NAME to YOUR NAME itself.
No wave changes in this update.
========================================================= */
body.custom-theme-live[data-custom-skin="aurora-wave"]
.custom-theme-shadow-host .aurora-v4-copy{
width:650px !important;
max-width:100% !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"]
.custom-theme-shadow-host .aurora-v4-centered{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
text-align:center !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"]
.custom-theme-shadow-host .aurora-v4-centered h2,
body.custom-theme-live[data-custom-skin="aurora-wave"]
.custom-theme-shadow-host .aurora-v4-centered p{
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
body.custom-theme-live[data-custom-skin="aurora-wave"]
.custom-theme-shadow-host .aurora-v4-actions{
width:100% !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* Apply the same correction inside Settings preview after reapplying the skin. */
.aurora-v4-copy{
width:650px !important;
max-width:100% !important;
}
.aurora-v4-centered{
width:100% !important;
max-width:none !important;
margin:0 !important;
text-align:center !important;
}
.aurora-v4-centered h2,
.aurora-v4-centered p{
width:100% !important;
text-align:center !important;
}
.aurora-v4-actions{
width:100% !important;
justify-content:center !important;
}
@media(max-width:760px){
body.custom-theme-live[data-custom-skin="aurora-wave"]
.custom-theme-shadow-host .aurora-v4-copy{
width:100% !important;
}
}
/* =========================================================
TRACK SHARE MODAL — POLISH V1
========================================================= */
.osb-share-modal{
position:fixed !important;
inset:0 !important;
z-index:9999 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:20px !important;
background:rgba(0,0,0,.72) !important;
backdrop-filter:blur(5px) !important;
}
.osb-share-modal.open{display:flex !important}
.osb-share-card{
position:relative !important;
width:min(460px,100%) !important;
padding:22px !important;
border:1px solid #343943 !important;
border-top:2px solid #a60713 !important;
background:#0c0f14 !important;
box-shadow:0 24px 60px rgba(0,0,0,.45) !important;
}
.osb-share-close{
position:absolute !important;
top:12px !important;
right:12px !important;
width:34px !important;
height:34px !important;
border:1px solid #3b414c !important;
border-radius:0 !important;
background:#11151b !important;
color:#fff !important;
font-size:20px !important;
}
.osb-share-kicker{
color:#d20c1d !important;
font-size:10px !important;
font-weight:900 !important;
letter-spacing:.09em !important;
}
.osb-share-track{
display:grid !important;
grid-template-columns:92px minmax(0,1fr) !important;
gap:14px !important;
align-items:center !important;
margin-top:14px !important;
}
.osb-share-art{
width:92px !important;
height:92px !important;
object-fit:cover !important;
object-position:center !important;
border:1px solid #343943 !important;
background:#111318 !important;
}
.osb-share-copy h3{
margin:0 0 5px !important;
color:#fff !important;
font-size:22px !important;
}
.osb-share-copy p{
margin:0 !important;
color:#9ca5b2 !important;
font-size:12px !important;
}
.osb-share-actions{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:8px !important;
margin-top:18px !important;
}
.osb-share-btn{
min-height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid #3b414c !important;
border-radius:0 !important;
background:#11151b !important;
color:#fff !important;
text-decoration:none !important;
font-weight:900 !important;
cursor:pointer !important;
}
.osb-share-btn:hover{
border-color:#b70a17 !important;
background:#24080b !important;
}
.osb-share-status{
min-height:18px !important;
margin-top:10px !important;
color:#8ea0b4 !important;
font-size:11px !important;
}
@media(max-width:520px){
.osb-share-actions{grid-template-columns:1fr !important}
}
/* =========================================================
TRACK MORE MENU + REPORT MODAL
========================================================= */
.osb-track-more-menu{
position:fixed;
z-index:10050;
width:190px;
padding:5px;
border:1px solid #353b45;
border-top:2px solid #8b0711;
background:#0b0e13;
box-shadow:0 16px 38px rgba(0,0,0,.45);
}
.osb-track-more-menu button{
width:100%;
min-height:39px;
display:block;
border:0;
border-bottom:1px solid #222832;
background:transparent;
color:#fff;
text-align:left;
padding:0 11px;
font-weight:800;
cursor:pointer;
}
.osb-track-more-menu button:last-child{border-bottom:0}
.osb-track-more-menu button:hover{background:#171c24}
.osb-track-more-menu .report-action{color:#ff4050}
.osb-track-more-menu .report-action:hover{background:#29080c}
.osb-track-toast{
position:fixed;
right:22px;
bottom:82px;
z-index:10100;
max-width:320px;
padding:11px 15px;
border-left:3px solid #98000b;
background:#11151b;
color:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.35);
font-size:12px;
font-weight:800;
opacity:0;
pointer-events:none;
transform:translateY(8px);
transition:opacity .18s ease,transform .18s ease;
}
.osb-track-toast.show{
opacity:1;
transform:translateY(0);
}
.osb-report-modal{
position:fixed;
inset:0;
z-index:10080;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.76);
backdrop-filter:blur(4px);
}
.osb-report-modal.open{display:flex}
.osb-report-card{
position:relative;
width:min(500px,100%);
padding:22px;
border:1px solid #343a45;
border-top:2px solid #9b0712;
background:#0c0f14;
color:#fff;
box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.osb-report-close{
position:absolute;
top:10px;
right:10px;
width:34px;
height:34px;
border:1px solid #3a414c;
background:#11151b;
color:#fff;
font-size:20px;
cursor:pointer;
}
.osb-report-kicker{
color:#e11629;
font-size:10px;
font-weight:900;
letter-spacing:.11em;
}
.osb-report-card h3{
margin:6px 42px 4px 0;
font-size:22px;
}
.osb-report-track-name{
margin:0 0 18px;
color:#a7afba;
font-size:12px;
}
.osb-report-card label{
display:block;
margin:12px 0 6px;
color:#fff;
font-size:11px;
font-weight:900;
}
.osb-report-card label span{
color:#77808c;
font-weight:400;
}
.osb-report-card select,
.osb-report-card textarea{
width:100%;
border:1px solid #333a45;
border-radius:0;
background:#090c11;
color:#fff;
padding:10px 11px;
}
.osb-report-card select{min-height:42px}
.osb-report-card textarea{
min-height:110px;
resize:vertical;
}
.osb-report-error{
min-height:18px;
margin-top:8px;
color:#ff5966;
font-size:11px;
}
.osb-report-actions{
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:10px;
}
.osb-report-actions button{
min-height:40px;
padding:0 15px;
border:1px solid #3a414c;
background:#11151b;
color:#fff;
font-weight:900;
cursor:pointer;
}
.osb-report-actions .primary{
border-color:#a10814;
background:#850009;
}
.osb-report-actions button:disabled{
opacity:.55;
cursor:not-allowed;
}
@media(max-width:520px){
.osb-report-actions{display:grid;grid-template-columns:1fr 1fr}
.osb-track-toast{left:14px;right:14px;bottom:72px;max-width:none}
}
/* Bundle action polish */
.bundle-card-actions{
display:grid !important;
grid-template-columns:1fr auto !important;
gap:8px !important;
align-items:stretch !important;
margin-top:12px !important;
}
.bundle-view-button{
min-height:38px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 14px !important;
border:1px solid #6f060b !important;
background:linear-gradient(90deg,#8a0008 0%,#2a0709 100%) !important;
color:#fff !important;
text-decoration:none !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.01em !important;
}
.bundle-report-button{
min-height:38px !important;
padding:0 14px !important;
border:1px solid #8b0711 !important;
border-radius:0 !important;
background:#11151b !important;
color:#ff4351 !important;
font-size:11px !important;
font-weight:900 !important;
cursor:pointer !important;
}
.bundle-report-button:hover{
background:#29080c !important;
color:#fff !important;
}
@media(max-width:480px){
.bundle-card-actions{
grid-template-columns:1fr !important;
}
}
/* =========================================================
ARTIST ABOUT TAB — REDESIGN
Balanced artist story + profile summary + social connections.
========================================================= */
.about-section-heading{
margin-bottom:14px !important;
}
.about-section-heading h2{
font-size:26px !important;
letter-spacing:-.02em !important;
}
.about-profile-grid{
display:grid !important;
grid-template-columns:minmax(0,1.7fr) minmax(330px,.9fr) !important;
gap:14px !important;
align-items:stretch !important;
}
.about-side-stack{
display:grid !important;
grid-template-rows:auto 1fr !important;
gap:14px !important;
min-width:0 !important;
}
.about-main-card,
.about-info-card,
.about-social-card{
position:relative !important;
overflow:hidden !important;
background:#101319 !important;
border:1px solid #2f343e !important;
border-top:3px solid #73070B !important;
padding:20px !important;
min-height:0 !important;
box-shadow:none !important;
}
.about-main-card{
min-height:365px !important;
display:flex !important;
flex-direction:column !important;
background:
radial-gradient(circle at 87% 14%,rgba(115,7,11,.20),transparent 28%),
linear-gradient(145deg,#15191f 0%,#101319 58%,#0b0d11 100%) !important;
}
.about-main-card::after{
content:"" !important;
position:absolute !important;
right:-70px !important;
bottom:-90px !important;
width:310px !important;
height:310px !important;
border:1px solid rgba(115,7,11,.22) !important;
transform:rotate(34deg) !important;
pointer-events:none !important;
}
.about-card-heading{
position:relative !important;
z-index:1 !important;
display:flex !important;
justify-content:space-between !important;
align-items:flex-start !important;
gap:20px !important;
padding-bottom:15px !important;
border-bottom:1px solid #2d323b !important;
}
.about-card-heading.compact{
padding-bottom:12px !important;
}
.about-label{
color:#c91420 !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:1.4px !important;
margin:0 0 6px !important;
}
.about-card-heading h3,
.about-connect-copy h3{
margin:0 !important;
color:#fff !important;
font-size:20px !important;
line-height:1.05 !important;
}
.about-story-mark{
width:58px !important;
height:58px !important;
flex:0 0 58px !important;
display:grid !important;
place-items:center !important;
border:1px solid #5d1016 !important;
background:linear-gradient(135deg,#2a080c,#100d11) !important;
color:#db1724 !important;
font-size:18px !important;
font-weight:900 !important;
letter-spacing:-1px !important;
}
.about-bio-wrap{
position:relative !important;
z-index:1 !important;
flex:1 !important;
display:flex !important;
align-items:flex-start !important;
padding:30px 22px 28px 50px !important;
}
.about-quote-mark{
position:absolute !important;
left:0 !important;
top:15px !important;
color:#73070B !important;
font-family:Georgia,serif !important;
font-size:62px !important;
line-height:1 !important;
opacity:.95 !important;
}
.about-main-card p{
color:#d1d5dc !important;
line-height:1.85 !important;
font-size:14px !important;
margin:0 !important;
white-space:pre-line !important;
max-width:760px !important;
}
.about-story-footer{
position:relative !important;
z-index:1 !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding-top:14px !important;
border-top:1px solid #2d323b !important;
color:#707883 !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:1.1px !important;
}
.about-story-footer i{
width:34px !important;
height:1px !important;
background:#73070B !important;
}
.about-info-card{
padding:18px !important;
}
.artist-details-list{
margin:14px 0 0 !important;
display:grid !important;
gap:0 !important;
}
.artist-details-list > div{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:center !important;
gap:12px !important;
min-height:38px !important;
padding:0 !important;
border-bottom:1px solid #2a2f37 !important;
}
.artist-details-list dt{
color:#89919c !important;
font-size:9px !important;
font-weight:700 !important;
}
.artist-details-list dd{
color:#fff !important;
font-size:10px !important;
font-weight:900 !important;
margin:0 !important;
text-align:right !important;
}
#aboutVerified{
color:#fff !important;
}
.about-stat-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
margin-top:14px !important;
}
.about-stat-grid article{
min-width:0 !important;
padding:12px 9px !important;
background:#0b0e13 !important;
border:1px solid #2e343d !important;
border-bottom:2px solid #73070B !important;
text-align:center !important;
}
.about-stat-grid span{
display:block !important;
color:#78808b !important;
font-size:7px !important;
font-weight:900 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
.about-stat-grid strong{
display:block !important;
margin-top:5px !important;
color:#fff !important;
font-size:18px !important;
line-height:1 !important;
}
.about-social-card{
display:flex !important;
flex-direction:column !important;
padding:18px !important;
background:
linear-gradient(135deg,#11151b 0%,#0e1116 70%,#18080b 100%) !important;
}
.about-connect-copy{
display:flex !important;
justify-content:space-between !important;
gap:14px !important;
align-items:flex-end !important;
padding-bottom:13px !important;
border-bottom:1px solid #2a2f37 !important;
}
.about-connect-copy p{
max-width:145px !important;
margin:0 !important;
color:#818996 !important;
font-size:9px !important;
line-height:1.45 !important;
text-align:right !important;
}
.about-social-links{
display:grid !important;
grid-template-columns:1fr !important;
gap:7px !important;
margin-top:12px !important;
}
.about-social-links a{
min-height:38px !important;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:10px !important;
padding:0 11px !important;
background:#0a0d11 !important;
border:1px solid #303640 !important;
border-left:2px solid #73070B !important;
color:#fff !important;
font-size:9px !important;
font-weight:900 !important;
transition:background .15s ease,border-color .15s ease,transform .15s ease !important;
}
.about-social-links a::after{
content:"↗" !important;
color:#d31521 !important;
font-size:11px !important;
}
.about-social-links a:hover{
background:#15191f !important;
border-color:#73070B !important;
transform:translateX(2px) !important;
}
.about-social-empty{
margin-top:12px !important;
min-height:62px !important;
display:grid !important;
place-items:center !important;
color:#777f8a !important;
border:1px dashed #343943 !important;
background:#0b0e13 !important;
padding:12px !important;
font-size:9px !important;
text-align:center !important;
}
@media(max-width:980px){
.about-profile-grid{
grid-template-columns:1fr !important;
}
.about-main-card{
min-height:310px !important;
}
.about-side-stack{
grid-template-columns:1fr 1fr !important;
grid-template-rows:auto !important;
}
}
@media(max-width:700px){
.about-side-stack{
grid-template-columns:1fr !important;
}
.about-main-card{
min-height:0 !important;
}
.about-bio-wrap{
padding:24px 6px 22px 38px !important;
}
.about-main-card p{
font-size:13px !important;
}
.about-stat-grid{
grid-template-columns:repeat(3,1fr) !important;
}
.about-connect-copy{
align-items:flex-start !important;
flex-direction:column !important;
}
.about-connect-copy p{
max-width:none !important;
text-align:left !important;
}
}
@media(max-width:480px){
.about-stat-grid{
grid-template-columns:1fr !important;
}
.about-story-mark{
width:48px !important;
height:48px !important;
flex-basis:48px !important;
}
}
/* =========================================================
STANDARD ARTIST PROFILE — FULL-BLEED BANNER STAGE
The banner now continues behind profile identity + stat cards.
Custom/premade themes keep their existing theme behavior.
========================================================= */
body:not(.custom-theme-live) .artist-profile-stage{
position:relative !important;
overflow:hidden !important;
min-height:690px !important;
color:#fff !important;
background:#090a0e !important;
border-bottom:3px solid var(--r) !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-banner{
position:absolute !important;
inset:0 !important;
z-index:0 !important;
display:block !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
filter:none !important;
transform:none !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .hero-overlay{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
pointer-events:none !important;
background:
linear-gradient(180deg,rgba(4,5,7,.04) 0%,rgba(4,5,7,.12) 42%,rgba(4,5,7,.56) 68%,rgba(4,5,7,.82) 100%),
linear-gradient(90deg,rgba(4,5,7,.28) 0%,rgba(4,5,7,.06) 48%,rgba(4,5,7,.22) 100%) !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-hero{
position:relative !important;
z-index:2 !important;
min-height:330px !important;
height:330px !important;
background:transparent !important;
border:0 !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .approved-profile-info{
position:relative !important;
z-index:3 !important;
background:transparent !important;
border:0 !important;
color:#fff !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
min-height:0 !important;
max-width:1380px !important;
margin:0 auto !important;
padding:0 34px 20px !important;
display:grid !important;
grid-template-columns:190px minmax(0,1fr) auto !important;
align-items:center !important;
gap:24px !important;
background:transparent !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-copy,
body:not(.custom-theme-live) .artist-profile-stage .artist-actions{
position:relative !important;
z-index:4 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row h1,
body:not(.custom-theme-live) .artist-profile-stage .artist-location,
body:not(.custom-theme-live) .artist-profile-stage .artist-bio,
body:not(.custom-theme-live) .artist-profile-stage .artist-tagline{
color:#fff !important;
text-shadow:0 2px 12px rgba(0,0,0,.72) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-bio{
color:#e0e3e8 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
border:3px solid rgba(255,255,255,.72) !important;
box-shadow:0 12px 30px rgba(0,0,0,.46) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .social-links a{
background:rgba(10,12,16,.66) !important;
border:1px solid rgba(148,156,168,.44) !important;
backdrop-filter:blur(6px) !important;
-webkit-backdrop-filter:blur(6px) !important;
color:#fff !important;
}
body:not(.custom-theme-live) .artist-profile-stage .owner-button,
body:not(.custom-theme-live) .artist-profile-stage .follow-button{
box-shadow:0 7px 18px rgba(0,0,0,.25) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .owner-button.ghost{
background:rgba(12,14,18,.66) !important;
border:1px solid rgba(142,149,160,.48) !important;
backdrop-filter:blur(7px) !important;
-webkit-backdrop-filter:blur(7px) !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
position:relative !important;
z-index:3 !important;
background:transparent !important;
border:0 !important;
padding:0 34px 30px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
max-width:1380px !important;
margin:0 auto !important;
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:13px !important;
background:transparent !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article{
position:relative !important;
min-height:88px !important;
padding:16px 17px !important;
background:rgba(12,14,19,.60) !important;
border:1px solid rgba(151,42,49,.72) !important;
border-top:2px solid var(--r) !important;
box-shadow:0 9px 24px rgba(0,0,0,.22) !important;
backdrop-filter:blur(9px) !important;
-webkit-backdrop-filter:blur(9px) !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article::after{
position:absolute !important;
right:14px !important;
top:50% !important;
transform:translateY(-50%) !important;
color:#e31a27 !important;
font-size:27px !important;
line-height:1 !important;
opacity:.95 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(1)::after{content:"♙" !important}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(2)::after{content:"♫" !important}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(3)::after{content:"◉" !important}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(4)::after{content:"⇩" !important}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats span,
body:not(.custom-theme-live) .artist-profile-stage .artist-stats strong,
body:not(.custom-theme-live) .artist-profile-stage .artist-stats small{
position:relative !important;
z-index:1 !important;
color:#fff !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats span{
color:#b5bcc7 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats strong{
display:block !important;
margin-top:6px !important;
font-size:24px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats small{
display:block !important;
margin-top:5px !important;
color:#9aa2ad !important;
}
@media(max-width:900px){
body:not(.custom-theme-live) .artist-profile-stage{
min-height:0 !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-hero{
min-height:250px !important;
height:250px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
grid-template-columns:150px minmax(0,1fr) !important;
padding:0 22px 20px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
width:150px !important;
height:150px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-actions{
grid-column:1 / -1 !important;
justify-self:start !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
padding:0 22px 24px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:560px){
body:not(.custom-theme-live) .artist-profile-stage > .artist-hero{
min-height:190px !important;
height:190px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
grid-template-columns:1fr !important;
padding:0 16px 18px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
width:128px !important;
height:128px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row h1{
font-size:32px !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
padding:0 16px 20px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
grid-template-columns:1fr 1fr !important;
gap:9px !important;
}
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article::after{
content:none !important;
display:none !important;
}
body:not(.custom-theme-live) .artist-profile-stage .profile-stat-icon{
position:absolute !important;
right:15px !important;
top:50% !important;
width:29px !important;
height:29px !important;
transform:translateY(-50%) !important;
display:grid !important;
place-items:center !important;
color:#e31a27 !important;
z-index:2 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .profile-stat-icon svg{
width:27px !important;
height:27px !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.8 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
/* =========================================================
STANDARD ARTIST PROFILE — FULL BANNER VISIBILITY CORRECTION
Keeps the banner visibly continuous behind identity + stats.
========================================================= */
body:not(.custom-theme-live) .artist-profile-stage{
background:#07090c !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-banner{
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:100% !important;
background-position:center center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
opacity:1 !important;
filter:none !important;
}
/* The previous lower gradient was intentionally removed because it hid
the banner and made the profile area look like a separate black block. */
body:not(.custom-theme-live) .artist-profile-stage > .hero-overlay{
background:
linear-gradient(180deg,
rgba(3,4,6,.02) 0%,
rgba(3,4,6,.04) 42%,
rgba(3,4,6,.12) 64%,
rgba(3,4,6,.26) 100%),
linear-gradient(90deg,
rgba(3,4,6,.14) 0%,
rgba(3,4,6,.02) 48%,
rgba(3,4,6,.10) 100%) !important;
}
/* Add small localized readability shadows rather than blacking out the
entire lower half of the banner. */
body:not(.custom-theme-live) .artist-profile-stage > .approved-profile-info{
background:linear-gradient(90deg,
rgba(5,7,10,.24) 0%,
rgba(5,7,10,.10) 54%,
rgba(5,7,10,.16) 100%) !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
background:transparent !important;
}
/* Glass stat cards — banner remains visible through them. */
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article{
background:rgba(8,10,14,.34) !important;
border:1px solid rgba(165,26,35,.78) !important;
border-top:2px solid #a40d17 !important;
box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
/* Stronger selector so the icon color wins over the generic stat span rule. */
body:not(.custom-theme-live) .artist-profile-stage .artist-stats .profile-stat-icon{
color:#e31a27 !important;
opacity:1 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats .profile-stat-icon svg{
stroke:#e31a27 !important;
color:#e31a27 !important;
}
/* Profile avatar/details float directly over the banner. */
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
background:transparent !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row h1,
body:not(.custom-theme-live) .artist-profile-stage .artist-location,
body:not(.custom-theme-live) .artist-profile-stage .artist-bio{
text-shadow:0 2px 9px rgba(0,0,0,.82) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .social-links a{
background:rgba(8,10,14,.42) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .owner-button.ghost{
background:rgba(8,10,14,.44) !important;
}
/* =========================================================
STANDARD ARTIST PROFILE — BANNER SCALE FIX
Fit the full banner to the full profile stage without
zooming/cropping the artwork.
========================================================= */
body:not(.custom-theme-live) .artist-profile-stage > .artist-banner{
background-size:100% 100% !important;
background-position:center center !important;
background-repeat:no-repeat !important;
transform:none !important;
}
/* =========================================================
STANDARD ARTIST PROFILE — FINAL FULL-BANNER LAYOUT
Preserve banner proportions, keep profile content readable,
and correctly position the red stat icons.
========================================================= */
body:not(.custom-theme-live) .artist-profile-stage{
position:relative !important;
display:flex !important;
flex-direction:column !important;
min-height:clamp(590px,42.85vw,690px) !important;
overflow:hidden !important;
background:#06080b !important;
border-bottom:3px solid var(--r) !important;
}
/* Preserve the banner's aspect ratio. Never stretch it vertically. */
body:not(.custom-theme-live) .artist-profile-stage > .artist-banner{
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
transform:none !important;
filter:none !important;
}
/* Light readability treatment only — the banner stays clearly visible. */
body:not(.custom-theme-live) .artist-profile-stage > .hero-overlay{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:
linear-gradient(180deg,
rgba(2,3,5,.02) 0%,
rgba(2,3,5,.03) 45%,
rgba(2,3,5,.10) 68%,
rgba(2,3,5,.22) 100%),
linear-gradient(90deg,
rgba(2,3,5,.10) 0%,
rgba(2,3,5,.02) 50%,
rgba(2,3,5,.08) 100%) !important;
}
/* Flexible top space keeps the logo/artwork visible and prevents the
profile information from sitting on top of the center wordmark. */
body:not(.custom-theme-live) .artist-profile-stage > .artist-hero{
position:relative !important;
z-index:2 !important;
flex:1 1 auto !important;
min-height:250px !important;
height:auto !important;
background:transparent !important;
border:0 !important;
}
/* Profile details sit directly on the banner, with no separate black block. */
body:not(.custom-theme-live) .artist-profile-stage > .approved-profile-info{
position:relative !important;
z-index:3 !important;
flex:0 0 auto !important;
background:linear-gradient(
90deg,
rgba(5,7,10,.22) 0%,
rgba(5,7,10,.08) 52%,
rgba(5,7,10,.16) 100%
) !important;
border:0 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
min-height:0 !important;
max-width:1380px !important;
margin:0 auto !important;
padding:0 34px 14px !important;
display:grid !important;
grid-template-columns:175px minmax(0,1fr) auto !important;
align-items:center !important;
gap:22px !important;
background:transparent !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
width:175px !important;
height:175px !important;
border:3px solid rgba(255,255,255,.78) !important;
box-shadow:0 10px 28px rgba(0,0,0,.42) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row h1{
color:#fff !important;
font-size:38px !important;
text-shadow:0 2px 10px rgba(0,0,0,.82) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-location,
body:not(.custom-theme-live) .artist-profile-stage .artist-bio{
color:#fff !important;
text-shadow:0 2px 8px rgba(0,0,0,.86) !important;
}
body:not(.custom-theme-live) .artist-profile-stage .social-links a,
body:not(.custom-theme-live) .artist-profile-stage .owner-button.ghost{
background:rgba(8,10,14,.48) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
}
/* Stats stay transparent so the banner remains visible. */
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
position:relative !important;
z-index:3 !important;
flex:0 0 auto !important;
padding:0 34px 24px !important;
background:transparent !important;
border:0 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
max-width:1380px !important;
margin:0 auto !important;
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:13px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article{
position:relative !important;
min-height:92px !important;
padding:15px 58px 15px 17px !important;
background:rgba(7,9,13,.42) !important;
border:1px solid rgba(181,16,27,.84) !important;
border-top:2px solid #a90d17 !important;
box-shadow:0 7px 18px rgba(0,0,0,.20) !important;
backdrop-filter:blur(5px) !important;
-webkit-backdrop-filter:blur(5px) !important;
overflow:hidden !important;
}
/* Permanently disable the old text-symbol icons. */
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article::after{
content:none !important;
display:none !important;
}
/* Labels/numbers */
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > span:not(.profile-stat-icon){
position:relative !important;
display:block !important;
color:#b2bac5 !important;
font-size:9px !important;
z-index:1 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > strong{
position:relative !important;
display:block !important;
margin-top:5px !important;
color:#fff !important;
font-size:23px !important;
z-index:1 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > small{
position:relative !important;
display:block !important;
margin-top:5px !important;
color:#9aa2ad !important;
font-size:8px !important;
z-index:1 !important;
}
/* Real SVG icons — right side, vertically centered, OSBeats red. */
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > span.profile-stat-icon{
position:absolute !important;
right:17px !important;
top:50% !important;
left:auto !important;
bottom:auto !important;
width:31px !important;
height:31px !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
place-items:center !important;
transform:translateY(-50%) !important;
color:#e31a27 !important;
opacity:1 !important;
z-index:4 !important;
pointer-events:none !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > span.profile-stat-icon svg{
width:29px !important;
height:29px !important;
display:block !important;
fill:none !important;
stroke:#e31a27 !important;
stroke-width:1.9 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
/* Responsive */
@media(max-width:900px){
body:not(.custom-theme-live) .artist-profile-stage{
min-height:620px !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-hero{
min-height:230px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
grid-template-columns:145px minmax(0,1fr) !important;
padding:0 22px 14px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
width:145px !important;
height:145px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-actions{
grid-column:1 / -1 !important;
justify-self:start !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
padding:0 22px 22px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:560px){
body:not(.custom-theme-live) .artist-profile-stage{
min-height:760px !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-hero{
min-height:190px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
grid-template-columns:1fr !important;
padding:0 16px 14px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
width:125px !important;
height:125px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row h1{
font-size:31px !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
padding:0 16px 20px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
grid-template-columns:1fr 1fr !important;
gap:9px !important;
}
}
/* =========================================================
FOLLOWERS MODAL — PROFILE IMAGE + VIEW FIX
Do not let the fallback background shorthand override
a real inline profile image.
========================================================= */
.follower-avatar{
background-color:#1a1d23 !important;
background-position:center !important;
background-size:cover !important;
background-repeat:no-repeat !important;
border:1px solid #303640 !important;
overflow:hidden !important;
}
.follower-row a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:48px !important;
min-height:30px !important;
}
/* =========================================================
FOLLOWERS MODAL — FINAL PROFILE PHOTO / VIEW FIX
Uses a real ![]()
so follower profile photos cannot be
overwritten by background CSS.
========================================================= */
.follower-avatar{
display:grid !important;
place-items:center !important;
overflow:hidden !important;
background-color:#1a1d23 !important;
border:1px solid #343943 !important;
}
.follower-avatar img{
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
object-position:center !important;
border-radius:50% !important;
}
.follower-avatar-fallback{
width:100% !important;
height:100% !important;
display:grid !important;
place-items:center !important;
color:#fff !important;
font-size:10px !important;
font-weight:900 !important;
}
.follower-view{
min-width:52px !important;
min-height:32px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid #454b56 !important;
background:#171a20 !important;
color:#fff !important;
font-size:8px !important;
font-weight:900 !important;
text-decoration:none !important;
cursor:pointer !important;
}
.follower-view:hover{
background:#73070B !important;
border-color:#9d1019 !important;
}
/* =========================================================
STANDARD OSBEATS STOREFRONT — LEASE POPUP COLOR FIX
Standard storefront popups use OSBeats red/black, not the
Producer Studio blue accent.
========================================================= */
body:not(.custom-theme-live) .custom-theme-feature-backdrop{
background:rgba(0,0,0,.72) !important;
backdrop-filter:blur(4px) !important;
}
body:not(.custom-theme-live) .custom-theme-feature-dialog{
border:1px solid #8f0b13 !important;
border-top:3px solid #d71925 !important;
background:linear-gradient(145deg,#111318 0%,#090b0f 72%,#170609 100%) !important;
color:#fff !important;
box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 28px rgba(115,7,11,.16) !important;
}
body:not(.custom-theme-live) .custom-theme-feature-close{
border:1px solid #4b515c !important;
background:#14171d !important;
color:#fff !important;
}
body:not(.custom-theme-live) .custom-theme-feature-close:hover{
border-color:#a70d17 !important;
background:#73070B !important;
}
body:not(.custom-theme-live) .custom-theme-feature-kicker,
body:not(.custom-theme-live) .theme-license-grid article>span,
body:not(.custom-theme-live) .theme-modal-message span{
color:#e31a27 !important;
}
body:not(.custom-theme-live) .theme-license-grid article,
body:not(.custom-theme-live) .theme-modal-message{
border:1px solid #353a43 !important;
border-left:3px solid #73070B !important;
background:#0c0f14 !important;
}
body:not(.custom-theme-live) .theme-license-grid article p{
color:#b9c0ca !important;
}
body:not(.custom-theme-live) .theme-license-grid article button{
border:1px solid #a70d17 !important;
background:linear-gradient(105deg,#960d17 0%,#73070B 52%,#360306 100%) !important;
color:#fff !important;
}
body:not(.custom-theme-live) .theme-license-grid article button:hover{
filter:brightness(1.13) !important;
}
/* =========================================================
STANDARD ARTIST MUSIC PLAYER — COMPACT REDESIGN
Matches the approved player direction: no redundant Catalog
heading or duplicate license row, aligned tabs/player, visible
social share and download controls.
========================================================= */
/* Music/Bundles/About tabs and player use the exact same width. */
body:not(.custom-theme-live) #osbeats-theme-nav,
body:not(.custom-theme-live) #music.store-panel{
width:min(1280px,calc(100% - 48px)) !important;
max-width:1280px !important;
margin-left:auto !important;
margin-right:auto !important;
}
body:not(.custom-theme-live) #osbeats-theme-nav{
margin-top:10px !important;
margin-bottom:0 !important;
}
body:not(.custom-theme-live) #music.store-panel{
padding:10px 0 0 !important;
}
body:not(.custom-theme-live) #music .track-grid{
width:100% !important;
max-width:none !important;
margin:0 !important;
}
/* The duplicate selected-license and lower license-info sections are no longer used. */
body:not(.custom-theme-live) .catalog-selected-licenses,
body:not(.custom-theme-live) .profile-license-info-section{
display:none !important;
}
/* Player */
body:not(.custom-theme-live) .catalog-master-player{
width:100% !important;
margin:0 !important;
border:1px solid #2f343d !important;
border-top:2px solid #73070B !important;
background:#0b0e13 !important;
}
body:not(.custom-theme-live) .catalog-now-playing{
grid-template-columns:140px minmax(0,1fr) 410px !important;
gap:18px !important;
padding:15px !important;
}
body:not(.custom-theme-live) .catalog-player-art{
width:140px !important;
height:140px !important;
}
body:not(.custom-theme-live) .catalog-current-options{
padding-left:16px !important;
}
/* Social/tool row */
body:not(.custom-theme-live) .catalog-player-tools{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:6px !important;
margin-top:10px !important;
}
body:not(.custom-theme-live) .catalog-share-label{
margin-left:3px !important;
margin-right:2px !important;
color:#929aa6 !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:.8px !important;
}
body:not(.custom-theme-live) .catalog-tool-text{
min-height:32px !important;
padding:0 10px !important;
border:1px solid #3b414a !important;
background:#111318 !important;
color:#fff !important;
font-size:9px !important;
font-weight:900 !important;
}
body:not(.custom-theme-live) .catalog-social-icon,
body:not(.custom-theme-live) .catalog-action-icon{
width:34px !important;
height:32px !important;
display:inline-grid !important;
place-items:center !important;
padding:0 !important;
border:1px solid #4a1217 !important;
background:linear-gradient(135deg,#111318 0%,#111318 42%,#73070B 100%) !important;
color:#fff !important;
cursor:pointer !important;
}
body:not(.custom-theme-live) .catalog-social-icon:hover,
body:not(.custom-theme-live) .catalog-action-icon:hover{
border-color:#d71925 !important;
background:linear-gradient(135deg,#73070B 0%,#9d0c16 55%,#111318 100%) !important;
}
body:not(.custom-theme-live) .catalog-social-icon svg,
body:not(.custom-theme-live) .catalog-action-icon svg{
width:17px !important;
height:17px !important;
fill:none !important;
stroke:#fff !important;
stroke-width:1.9 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
body:not(.custom-theme-live) .catalog-social-icon svg path:first-child{
fill:#fff !important;
stroke:#fff !important;
}
body:not(.custom-theme-live) .catalog-social-icon:nth-of-type(2) svg path,
body:not(.custom-theme-live) .catalog-social-icon:nth-of-type(3) svg path{
fill:none !important;
}
/* Download state */
body:not(.custom-theme-live) .catalog-action-icon.download-ready{
border-color:#b5101b !important;
background:linear-gradient(135deg,#820913,#111318 68%) !important;
}
body:not(.custom-theme-live) .catalog-action-icon.download-locked{
opacity:.48 !important;
}
/* Table: # / title / 4 purchase prices / download / share / more */
body:not(.custom-theme-live) .catalog-table-head,
body:not(.custom-theme-live) .catalog-track-row{
grid-template-columns:
82px
minmax(220px,2.25fr)
repeat(4,minmax(82px,.68fr))
72px
116px
58px !important;
}
body:not(.custom-theme-live) .catalog-table-head{
min-height:40px !important;
padding:0 10px !important;
}
body:not(.custom-theme-live) .catalog-table-head span:nth-child(n+3){
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-track-row{
min-height:60px !important;
padding:0 10px !important;
}
body:not(.custom-theme-live) .catalog-download-cell,
body:not(.custom-theme-live) .catalog-share-cell,
body:not(.custom-theme-live) .catalog-row-actions{
height:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:5px !important;
border-left:1px solid #252932 !important;
}
body:not(.custom-theme-live) .catalog-share-cell .catalog-social-icon{
width:29px !important;
height:29px !important;
}
body:not(.custom-theme-live) .catalog-share-cell .catalog-social-icon svg{
width:14px !important;
height:14px !important;
}
/* Compact footer: coupon + cart only. */
body:not(.custom-theme-live) .catalog-player-footer{
grid-template-columns:minmax(280px,420px) 150px !important;
justify-content:space-between !important;
gap:16px !important;
padding:11px 12px !important;
}
body:not(.custom-theme-live) .catalog-cart-button{
width:150px !important;
}
/* Keep the player close to the tabs. */
body:not(.custom-theme-live) .store-tabs + #music,
body:not(.custom-theme-live) #music{
margin-top:0 !important;
}
/* Responsive table remains scrollable without collapsing controls. */
@media(max-width:1100px){
body:not(.custom-theme-live) .catalog-now-playing{
grid-template-columns:120px minmax(0,1fr) !important;
}
body:not(.custom-theme-live) .catalog-current-options{
grid-column:1/-1 !important;
border-left:0 !important;
border-top:1px solid #2f333b !important;
padding:12px 0 0 !important;
}
body:not(.custom-theme-live) .catalog-table-head,
body:not(.custom-theme-live) .catalog-track-row{
min-width:1040px !important;
}
body:not(.custom-theme-live) .catalog-track-scroll{
overflow-x:auto !important;
}
}
@media(max-width:650px){
body:not(.custom-theme-live) #osbeats-theme-nav,
body:not(.custom-theme-live) #music.store-panel{
width:calc(100% - 22px) !important;
}
body:not(.custom-theme-live) .catalog-now-playing{
min-width:0 !important;
grid-template-columns:86px minmax(0,1fr) !important;
}
body:not(.custom-theme-live) .catalog-current-license-grid{
grid-template-columns:repeat(2,1fr) !important;
}
body:not(.custom-theme-live) .catalog-player-footer{
min-width:0 !important;
grid-template-columns:1fr !important;
}
body:not(.custom-theme-live) .catalog-cart-button{
width:100% !important;
}
}
/* =========================================================
ARTIST PROFILE PLAYER — CORRECTED APPROVED LAYOUT
Top license price boxes removed.
Bottom LICENSE INFORMATION restored.
========================================================= */
body:not(.custom-theme-live) .catalog-current-license-grid{
display:none !important;
}
body:not(.custom-theme-live) .catalog-selected-licenses{
display:none !important;
}
/* Restore the detailed license information that belongs BELOW the player. */
body:not(.custom-theme-live) .profile-license-info-section{
display:block !important;
width:min(1280px,calc(100% - 48px)) !important;
max-width:1280px !important;
margin:12px auto 0 !important;
}
/* Main player mirrors the approved reference: artwork + player + controls/share. */
body:not(.custom-theme-live) .catalog-now-playing{
grid-template-columns:140px minmax(0,1fr) 300px !important;
min-height:178px !important;
gap:18px !important;
padding:15px !important;
}
body:not(.custom-theme-live) .catalog-player-side{
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
gap:12px !important;
padding-left:18px !important;
border-left:1px solid #303640 !important;
}
body:not(.custom-theme-live) .catalog-volume-row{
display:grid !important;
grid-template-columns:26px minmax(0,1fr) !important;
align-items:center !important;
gap:9px !important;
}
body:not(.custom-theme-live) .catalog-volume-icon{
color:#fff !important;
font-size:16px !important;
}
body:not(.custom-theme-live) #catalogVolume{
width:100% !important;
accent-color:#b20e18 !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-share-label{
margin:0 !important;
color:#a2aab5 !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:1px !important;
}
body:not(.custom-theme-live) .catalog-player-share{
display:flex !important;
align-items:center !important;
gap:7px !important;
flex-wrap:wrap !important;
}
/* Red/black buttons with white social glyphs. */
body:not(.custom-theme-live) .catalog-player-share .catalog-social-icon,
body:not(.custom-theme-live) .catalog-player-share .catalog-action-icon{
width:38px !important;
height:36px !important;
}
/* Table now follows the approved screenshot more closely. */
body:not(.custom-theme-live) .catalog-table-head,
body:not(.custom-theme-live) .catalog-track-row{
grid-template-columns:
82px
minmax(220px,2.25fr)
repeat(4,minmax(82px,.68fr))
72px
116px
74px
58px !important;
}
body:not(.custom-theme-live) .catalog-table-group-head{
min-height:38px !important;
align-items:center !important;
}
body:not(.custom-theme-live) .catalog-table-group-head .catalog-license-group-title{
grid-column:3 / 7 !important;
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-table-group-head span:nth-child(4){
grid-column:7 !important;
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-table-group-head span:nth-child(5){
grid-column:8 !important;
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-table-group-head span:nth-child(6){
grid-column:9 !important;
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-table-group-head span:nth-child(7){
grid-column:10 !important;
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-license-subhead{
min-height:32px !important;
background:#101319 !important;
border-top:1px solid #242932 !important;
}
body:not(.custom-theme-live) .catalog-license-subhead span:nth-child(n+3):nth-child(-n+6){
color:#e31a27 !important;
font-size:8px !important;
font-weight:900 !important;
text-align:center !important;
text-transform:uppercase !important;
}
body:not(.custom-theme-live) .catalog-duration-cell{
height:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-left:1px solid #252932 !important;
color:#fff !important;
font-size:10px !important;
}
/* Footer mirrors the approved mockup: coupon / total / buy now. */
body:not(.custom-theme-live) .catalog-player-footer{
grid-template-columns:minmax(300px,420px) minmax(160px,200px) 190px !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
padding:12px !important;
}
body:not(.custom-theme-live) .catalog-footer-total{
min-height:44px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
border:1px solid #353a43 !important;
background:#101319 !important;
color:#fff !important;
}
body:not(.custom-theme-live) .catalog-footer-total span{
color:#abb2bc !important;
font-size:9px !important;
font-weight:900 !important;
text-transform:uppercase !important;
}
body:not(.custom-theme-live) .catalog-footer-total strong{
color:#fff !important;
font-size:14px !important;
}
body:not(.custom-theme-live) .catalog-buy-button{
min-height:46px !important;
border:1px solid #c3121e !important;
background:linear-gradient(105deg,#a00d17 0%,#73070B 55%,#350306 100%) !important;
color:#fff !important;
font-size:14px !important;
font-weight:900 !important;
cursor:pointer !important;
}
/* Detailed bottom license cards stay visible and readable. */
body:not(.custom-theme-live) .profile-license-info-section{
border-top:2px solid #73070B !important;
background:#0b0e13 !important;
}
body:not(.custom-theme-live) .profile-license-info-heading{
background:#101319 !important;
border-bottom:1px solid #303640 !important;
}
body:not(.custom-theme-live) .profile-license-info-heading span{
color:#e31a27 !important;
}
@media(max-width:1100px){
body:not(.custom-theme-live) .catalog-now-playing{
grid-template-columns:120px minmax(0,1fr) !important;
}
body:not(.custom-theme-live) .catalog-player-side{
grid-column:1 / -1 !important;
border-left:0 !important;
border-top:1px solid #303640 !important;
padding:12px 0 0 !important;
}
body:not(.custom-theme-live) .catalog-table-head,
body:not(.custom-theme-live) .catalog-track-row{
min-width:1160px !important;
}
}
@media(max-width:700px){
body:not(.custom-theme-live) .catalog-player-footer{
grid-template-columns:1fr !important;
}
body:not(.custom-theme-live) .catalog-buy-button{
width:100% !important;
}
body:not(.custom-theme-live) .profile-license-info-section{
width:calc(100% - 22px) !important;
}
}
/* =========================================================
ARTIST PROFILE PLAYER — FINAL ALIGNMENT / DURATION / ACTIONS
========================================================= */
/* Music / Bundles / About must span the EXACT same outside width as the player.
The old 24px tab padding was making the buttons 48px narrower. */
body:not(.custom-theme-live) #osbeats-theme-nav{
width:min(1280px,calc(100% - 48px)) !important;
max-width:1280px !important;
padding:0 !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
body:not(.custom-theme-live) #osbeats-theme-nav .store-tab{
width:100% !important;
}
/* Keep the player on the exact same 1280px content line. */
body:not(.custom-theme-live) #music.store-panel{
width:min(1280px,calc(100% - 48px)) !important;
max-width:1280px !important;
padding-left:0 !important;
padding-right:0 !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
body:not(.custom-theme-live) #music .catalog-master-player{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Duration is a live metadata value, not a placeholder. */
body:not(.custom-theme-live) .catalog-duration-cell{
min-width:74px !important;
font-variant-numeric:tabular-nums !important;
}
/* Make Actions visibly clickable. */
body:not(.custom-theme-live) .catalog-row-actions .catalog-action-icon{
opacity:1 !important;
cursor:pointer !important;
border-color:#6f151b !important;
}
body:not(.custom-theme-live) .catalog-row-actions .catalog-action-icon:hover{
border-color:#e31a27 !important;
background:linear-gradient(135deg,#8f0b14,#111318 72%) !important;
}
/* Coupon stays left. TOTAL + Buy Now are one right-aligned checkout group. */
body:not(.custom-theme-live) .catalog-player-footer{
display:grid !important;
grid-template-columns:minmax(300px,420px) minmax(0,1fr) !important;
align-items:center !important;
gap:18px !important;
}
body:not(.custom-theme-live) .catalog-checkout-summary{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
margin-left:auto !important;
width:auto !important;
}
body:not(.custom-theme-live) .catalog-footer-total{
width:200px !important;
min-height:46px !important;
flex:0 0 200px !important;
}
body:not(.custom-theme-live) .catalog-buy-button{
width:190px !important;
min-height:46px !important;
flex:0 0 190px !important;
}
/* Menu must remain on top of the player and table. */
.osb-track-more-menu{
z-index:20050 !important;
}
@media(max-width:760px){
body:not(.custom-theme-live) #osbeats-theme-nav,
body:not(.custom-theme-live) #music.store-panel{
width:calc(100% - 22px) !important;
}
body:not(.custom-theme-live) .catalog-player-footer{
grid-template-columns:1fr !important;
}
body:not(.custom-theme-live) .catalog-checkout-summary{
width:100% !important;
margin-left:0 !important;
justify-content:stretch !important;
}
body:not(.custom-theme-live) .catalog-footer-total,
body:not(.custom-theme-live) .catalog-buy-button{
width:auto !important;
flex:1 1 0 !important;
}
}
/* =========================================================
ARTIST PROFILE PLAYER — COMPACT LICENSE TABS + FULL WIDTH INFO
========================================================= */
/* Re-enable ONLY the compact selected-track license tabs in the media player. */
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:6px !important;
width:100% !important;
margin:0 0 5px !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact>div{
min-width:0 !important;
min-height:49px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:4px !important;
padding:7px 4px !important;
border:1px solid #3a3f48 !important;
border-top:2px solid #73070B !important;
background:rgba(11,14,19,.82) !important;
text-align:center !important;
cursor:default !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact span{
display:block !important;
color:#e31a27 !important;
font-size:7px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.35px !important;
text-transform:uppercase !important;
white-space:nowrap !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact strong{
display:block !important;
color:#fff !important;
font-size:12px !important;
font-weight:900 !important;
line-height:1 !important;
white-space:nowrap !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact strong.available{
cursor:pointer !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact strong.available:hover{
color:#ff3541 !important;
}
/* Slightly widen the media-player side so all 4 tabs fit cleanly. */
body:not(.custom-theme-live) .catalog-now-playing{
grid-template-columns:140px minmax(0,1fr) 340px !important;
}
body:not(.custom-theme-live) .catalog-player-side{
gap:9px !important;
}
/* License Information is inside the same Music panel as the player.
Make it inherit that exact width instead of calculating its own narrower width. */
body:not(.custom-theme-live) #music .profile-license-info-section{
display:block !important;
width:100% !important;
max-width:none !important;
margin:12px 0 0 !important;
box-sizing:border-box !important;
}
/* Make the four detailed cards use all available width evenly. */
body:not(.custom-theme-live) #music .profile-license-info-grid{
width:100% !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
}
@media(max-width:1100px){
body:not(.custom-theme-live) .catalog-now-playing{
grid-template-columns:120px minmax(0,1fr) !important;
}
body:not(.custom-theme-live) .catalog-player-side{
grid-column:1/-1 !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact{
grid-template-columns:repeat(4,minmax(110px,1fr)) !important;
}
}
@media(max-width:700px){
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body:not(.custom-theme-live) #music .profile-license-info-grid{
grid-template-columns:1fr !important;
}
}
/* =========================================================
STANDARD ARTIST MEDIA PLAYER — ARTIST-CONTROLLED BANNER SLIDER
========================================================= */
body:not(.custom-theme-live) .catalog-player-main{
min-width:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(270px,43%) !important;
grid-template-rows:minmax(104px,1fr) 44px !important;
column-gap:14px !important;
row-gap:8px !important;
align-items:stretch !important;
padding-top:0 !important;
}
body:not(.custom-theme-live) .catalog-player-copy{
grid-column:1 !important;
grid-row:1 !important;
align-self:center !important;
min-width:0 !important;
padding-top:3px !important;
}
body:not(.custom-theme-live) .catalog-media-slider{
position:relative !important;
grid-column:2 !important;
grid-row:1 !important;
min-width:0 !important;
min-height:104px !important;
overflow:hidden !important;
border:1px solid #303640 !important;
border-top:2px solid #73070B !important;
background:#07090d !important;
}
body:not(.custom-theme-live) .catalog-media-slider::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:2 !important;
pointer-events:none !important;
background:
linear-gradient(90deg,rgba(8,10,14,.34),transparent 34%),
linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.20)) !important;
}
body:not(.custom-theme-live) .catalog-media-slide{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
display:block !important;
object-fit:cover !important;
object-position:center center !important;
opacity:0 !important;
transform:scale(1.025) !important;
transition:opacity .55s ease,transform 5.5s ease !important;
}
body:not(.custom-theme-live) .catalog-media-slide.active{
opacity:1 !important;
transform:scale(1) !important;
}
body:not(.custom-theme-live) .catalog-media-dots{
position:absolute !important;
right:8px !important;
bottom:7px !important;
z-index:4 !important;
display:flex !important;
gap:4px !important;
}
body:not(.custom-theme-live) .catalog-media-dots span{
width:15px !important;
height:3px !important;
background:rgba(255,255,255,.40) !important;
}
body:not(.custom-theme-live) .catalog-media-dots span.active{
background:#e31a27 !important;
}
body:not(.custom-theme-live) .catalog-wave{
grid-column:1 / -1 !important;
grid-row:2 !important;
width:100% !important;
align-self:end !important;
}
@media(max-width:1100px){
body:not(.custom-theme-live) .catalog-player-main{
grid-template-columns:minmax(0,1fr) minmax(240px,40%) !important;
}
}
@media(max-width:760px){
body:not(.custom-theme-live) .catalog-player-main{
grid-template-columns:1fr !important;
grid-template-rows:auto 118px 44px !important;
}
body:not(.custom-theme-live) .catalog-player-copy{
grid-column:1 !important;
grid-row:1 !important;
}
body:not(.custom-theme-live) .catalog-media-slider{
grid-column:1 !important;
grid-row:2 !important;
min-height:118px !important;
}
body:not(.custom-theme-live) .catalog-wave{
grid-column:1 !important;
grid-row:3 !important;
}
}
/* =========================================================
MEDIA PLAYER SLIDER — POSITION + FOOTER CORRECTION
========================================================= */
/* Player main area is one full-width column. */
body:not(.custom-theme-live) .catalog-player-main{
display:block !important;
min-width:0 !important;
padding-top:0 !important;
}
/* Playback controls and banner share the SAME row.
The first column ends exactly after the duration (e.g. 4:16);
the banner immediately occupies everything after it. */
body:not(.custom-theme-live) .catalog-transport-media-row{
width:100% !important;
display:grid !important;
grid-template-columns:max-content minmax(0,1fr) !important;
align-items:stretch !important;
gap:10px !important;
margin-top:10px !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-transport{
width:max-content !important;
align-self:center !important;
margin-top:0 !important;
white-space:nowrap !important;
}
/* Banner starts directly after the time and still ends at the same
right edge of the main media-player section. */
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
position:relative !important;
grid-column:auto !important;
grid-row:auto !important;
width:100% !important;
min-width:0 !important;
min-height:108px !important;
height:108px !important;
margin:0 !important;
align-self:center !important;
overflow:hidden !important;
border:1px solid #303640 !important;
border-top:2px solid #73070B !important;
background:#07090d !important;
}
/* Waveform remains full-width below controls + banner. */
body:not(.custom-theme-live) .catalog-player-main > .catalog-wave{
display:block !important;
width:100% !important;
margin-top:8px !important;
grid-column:auto !important;
grid-row:auto !important;
}
/* Remove the old slider grid positioning from the previous build. */
body:not(.custom-theme-live) .catalog-player-copy{
display:block !important;
min-width:0 !important;
padding-top:3px !important;
}
/* =========================================================
ARTIST PROFILE FOOTER — NO WHITE SPACE BELOW FOOTER
========================================================= */
html{
min-height:100% !important;
background:#050608 !important;
}
body:not(.custom-theme-live){
min-height:100vh !important;
display:flex !important;
flex-direction:column !important;
margin-bottom:0 !important;
padding-bottom:0 !important;
}
/* Existing artist-profile content keeps its normal sizing;
footer consumes any remaining viewport space instead of exposing
the off-white page background underneath it. */
body:not(.custom-theme-live) .os-global-footer{
flex:0 0 auto !important;
margin-top:auto !important;
margin-bottom:0 !important;
padding-bottom:0 !important;
background:#050608 !important;
}
body:not(.custom-theme-live) .os-global-footer-inner{
margin-bottom:0 !important;
}
body:not(.custom-theme-live) .os-global-footer .osb-legal-links{
margin-bottom:0 !important;
}
/* The document canvas below the footer is black if browser rounding
leaves even a fractional pixel at the bottom. */
body:not(.custom-theme-live)::after{
content:"" !important;
display:block !important;
flex:0 0 0 !important;
background:#050608 !important;
}
@media(max-width:900px){
body:not(.custom-theme-live) .catalog-transport-media-row{
grid-template-columns:max-content minmax(180px,1fr) !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
min-height:96px !important;
height:96px !important;
}
}
@media(max-width:700px){
body:not(.custom-theme-live) .catalog-transport-media-row{
grid-template-columns:1fr !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
width:100% !important;
min-height:118px !important;
height:118px !important;
}
}
/* =========================================================
MEDIA PLAYER BANNER — VERTICAL ALIGNMENT CORRECTION
Banner stays at the top of the player and starts directly
after the duration text without increasing player height.
========================================================= */
body:not(.custom-theme-live) .catalog-player-main{
position:relative !important;
display:block !important;
min-width:0 !important;
min-height:140px !important;
height:140px !important;
padding:0 0 44px !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .catalog-player-copy{
position:relative !important;
z-index:3 !important;
width:100% !important;
height:96px !important;
min-width:0 !important;
padding-top:3px !important;
}
/* Transport keeps its original compact height. */
body:not(.custom-theme-live) .catalog-transport-media-row{
position:relative !important;
display:block !important;
width:100% !important;
height:31px !important;
min-height:31px !important;
margin-top:10px !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-transport{
position:relative !important;
z-index:5 !important;
width:max-content !important;
height:31px !important;
margin:0 !important;
white-space:nowrap !important;
}
/* The banner is removed from document flow:
top = top of player, left = measured immediately after duration,
right = same edge it already ended at. */
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
position:absolute !important;
z-index:2 !important;
top:-65px !important;
left:calc(var(--catalog-media-slider-left, 220px) - 0px) !important;
right:0 !important;
width:auto !important;
min-width:0 !important;
height:104px !important;
min-height:104px !important;
margin:0 !important;
overflow:hidden !important;
border:1px solid #303640 !important;
border-top:2px solid #73070B !important;
background:#07090d !important;
}
/* Waveform returns to the original bottom position instead of being
pushed down by the banner. */
body:not(.custom-theme-live) .catalog-player-main > .catalog-wave{
position:absolute !important;
z-index:4 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100% !important;
height:44px !important;
margin:0 !important;
}
/* Keep the whole Now Playing section at the compact height it had
before the slider was moved into the transport row. */
body:not(.custom-theme-live) .catalog-now-playing{
align-items:stretch !important;
}
@media(max-width:1100px){
body:not(.custom-theme-live) .catalog-player-main{
height:140px !important;
min-height:140px !important;
}
}
@media(max-width:700px){
body:not(.custom-theme-live) .catalog-player-main{
height:auto !important;
min-height:270px !important;
padding-bottom:44px !important;
}
body:not(.custom-theme-live) .catalog-player-copy{
height:auto !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row{
height:auto !important;
min-height:150px !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
width:100% !important;
height:118px !important;
min-height:118px !important;
margin-top:10px !important;
}
}
/* =========================================================
MEDIA PLAYER — BANNER / WAVEFORM SEPARATION FIX
Keep the banner at the top and the waveform fully below it.
========================================================= */
/* The banner is positioned against the whole player-main area,
not against the transport row. */
body:not(.custom-theme-live) .catalog-player-main{
position:relative !important;
height:150px !important;
min-height:150px !important;
padding:0 0 44px !important;
overflow:hidden !important;
}
/* Do not use the transport row as the absolute-positioning parent. */
body:not(.custom-theme-live) .catalog-transport-media-row{
position:static !important;
display:block !important;
width:100% !important;
height:31px !important;
min-height:31px !important;
margin-top:10px !important;
overflow:visible !important;
}
/* Banner stays at the TOP of the player and begins immediately
after the measured end of the duration text. */
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
position:absolute !important;
z-index:2 !important;
top:0 !important;
left:var(--catalog-media-slider-left,220px) !important;
right:0 !important;
width:auto !important;
height:104px !important;
min-height:104px !important;
margin:0 !important;
overflow:hidden !important;
}
/* Waveform gets its own dedicated strip BELOW the 104px banner.
104px banner + 2px breathing room = waveform begins at 106px. */
body:not(.custom-theme-live) .catalog-player-main > .catalog-wave{
position:absolute !important;
z-index:4 !important;
left:0 !important;
right:0 !important;
top:106px !important;
bottom:auto !important;
width:100% !important;
height:40px !important;
margin:0 !important;
}
/* Keep waveform artwork confined to its own strip. */
body:not(.custom-theme-live) .catalog-wave-base,
body:not(.custom-theme-live) .catalog-wave-progress{
top:0 !important;
bottom:0 !important;
height:100% !important;
overflow:hidden !important;
}
/* Player text / transport remain above everything on the left. */
body:not(.custom-theme-live) .catalog-player-copy,
body:not(.custom-theme-live) .catalog-transport{
position:relative !important;
z-index:5 !important;
}
@media(max-width:700px){
body:not(.custom-theme-live) .catalog-player-main{
height:auto !important;
min-height:280px !important;
padding-bottom:44px !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row{
position:relative !important;
height:auto !important;
min-height:150px !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
width:100% !important;
height:118px !important;
min-height:118px !important;
margin-top:10px !important;
}
body:not(.custom-theme-live) .catalog-player-main > .catalog-wave{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
width:100% !important;
height:40px !important;
margin-top:8px !important;
}
}
/* =========================================================
MEDIA PLAYER — LOWER WAVEFORM FINAL POSITION
Move waveform down slightly without moving the banner.
========================================================= */
body:not(.custom-theme-live) .catalog-player-main{
height:156px !important;
min-height:156px !important;
padding-bottom:40px !important;
}
/* Move waveform lower so there is more breathing room under the banner. */
body:not(.custom-theme-live) .catalog-player-main > .catalog-wave{
top:113px !important;
height:36px !important;
bottom:auto !important;
margin:0 !important;
}
@media(max-width:700px){
body:not(.custom-theme-live) .catalog-player-main{
height:auto !important;
min-height:286px !important;
}
body:not(.custom-theme-live) .catalog-player-main > .catalog-wave{
position:relative !important;
top:auto !important;
height:36px !important;
margin-top:12px !important;
}
}
/* =========================================================
STANDARD ARTIST PROFILE — PHONE RESPONSIVE REBUILD
Optimized for ~360–560px widths.
Desktop/tablet behavior is unchanged.
========================================================= */
@media(max-width:560px){
/* ---------- page / hero ---------- */
body:not(.custom-theme-live) .artist-profile-stage{
min-height:0 !important;
height:auto !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-banner{
background-size:cover !important;
background-position:center top !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .artist-hero{
min-height:150px !important;
height:150px !important;
flex:0 0 150px !important;
}
body:not(.custom-theme-live) .artist-profile-stage > .approved-profile-info{
flex:0 0 auto !important;
padding-top:0 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
width:100% !important;
display:grid !important;
grid-template-columns:104px minmax(0,1fr) !important;
grid-template-rows:auto auto !important;
gap:10px 13px !important;
align-items:center !important;
padding:12px 14px 10px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
grid-column:1 !important;
grid-row:1 !important;
width:104px !important;
height:104px !important;
align-self:start !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-copy{
grid-column:2 !important;
grid-row:1 !important;
min-width:0 !important;
align-self:center !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row{
min-width:0 !important;
align-items:center !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row h1{
max-width:100% !important;
margin:0 !important;
font-size:27px !important;
line-height:1.05 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-location,
body:not(.custom-theme-live) .artist-profile-stage .artist-bio{
font-size:10px !important;
line-height:1.35 !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-bio{
margin-top:4px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .social-links{
display:flex !important;
flex-wrap:wrap !important;
gap:5px !important;
margin-top:7px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .social-links a{
min-height:30px !important;
padding:0 9px !important;
font-size:8px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-actions{
grid-column:1 / -1 !important;
grid-row:2 !important;
width:100% !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:7px !important;
justify-self:stretch !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-actions > :not([hidden]){
width:100% !important;
min-height:38px !important;
margin:0 !important;
}
/* ---------- stats: compact 2 x 2 ---------- */
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
padding:0 14px 14px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
width:100% !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article{
min-height:76px !important;
padding:11px 42px 10px 12px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > strong{
margin-top:4px !important;
font-size:19px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > span.profile-stat-icon{
right:10px !important;
width:25px !important;
height:25px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > span.profile-stat-icon svg{
width:23px !important;
height:23px !important;
}
/* ---------- Music / Bundles / About stay in ONE row ---------- */
body:not(.custom-theme-live) #osbeats-theme-nav{
width:calc(100% - 18px) !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:0 !important;
margin:8px auto 0 !important;
padding:0 !important;
}
body:not(.custom-theme-live) #osbeats-theme-nav .store-tab{
width:100% !important;
min-width:0 !important;
min-height:42px !important;
padding:9px 5px !important;
font-size:10px !important;
white-space:nowrap !important;
}
/* ---------- main music panel ---------- */
body:not(.custom-theme-live) #music.store-panel{
width:calc(100% - 18px) !important;
margin:8px auto 0 !important;
padding:0 !important;
}
body:not(.custom-theme-live) .catalog-master-player{
width:100% !important;
overflow:hidden !important;
}
/* Player top: artwork + now-playing copy, then controls. */
body:not(.custom-theme-live) .catalog-now-playing{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:92px minmax(0,1fr) !important;
gap:10px !important;
padding:10px !important;
align-items:start !important;
}
body:not(.custom-theme-live) .catalog-player-art{
grid-column:1 !important;
grid-row:1 !important;
width:92px !important;
height:92px !important;
}
body:not(.custom-theme-live) .catalog-player-main{
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
min-width:0 !important;
min-height:214px !important;
height:214px !important;
padding:0 !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .catalog-player-copy{
width:100% !important;
height:auto !important;
min-height:92px !important;
padding:0 !important;
}
body:not(.custom-theme-live) .catalog-now-label{
font-size:8px !important;
}
body:not(.custom-theme-live) .catalog-player-title-row{
margin-top:4px !important;
gap:6px !important;
}
body:not(.custom-theme-live) .catalog-player-title-row h3{
max-width:calc(100% - 32px) !important;
margin:0 !important;
font-size:19px !important;
line-height:1.08 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
body:not(.custom-theme-live) .catalog-player-artist{
margin-top:5px !important;
font-size:9px !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row{
position:relative !important;
width:100% !important;
min-height:122px !important;
height:122px !important;
margin-top:8px !important;
}
body:not(.custom-theme-live) .catalog-transport{
position:relative !important;
z-index:5 !important;
display:flex !important;
align-items:center !important;
gap:5px !important;
width:100% !important;
height:32px !important;
margin:0 !important;
white-space:nowrap !important;
}
body:not(.custom-theme-live) .catalog-transport button{
width:34px !important;
min-width:34px !important;
height:32px !important;
padding:0 !important;
}
body:not(.custom-theme-live) #catalogCurrentTime,
body:not(.custom-theme-live) #catalogDuration,
body:not(.custom-theme-live) .catalog-time-divider{
font-size:9px !important;
}
/* Banner is full-width INSIDE player-main on phone, below transport. */
body:not(.custom-theme-live) .catalog-transport-media-row .catalog-media-slider{
position:absolute !important;
top:39px !important;
left:0 !important;
right:0 !important;
width:100% !important;
height:78px !important;
min-height:78px !important;
margin:0 !important;
}
body:not(.custom-theme-live) .catalog-media-slide{
object-fit:cover !important;
object-position:center center !important;
}
/* Waveform gets a clean strip BELOW banner. */
body:not(.custom-theme-live) .catalog-player-main > .catalog-wave{
position:absolute !important;
left:0 !important;
right:0 !important;
top:185px !important;
width:100% !important;
height:28px !important;
margin:0 !important;
}
/* License/share side moves below artwork/player and uses full width. */
body:not(.custom-theme-live) .catalog-player-side{
grid-column:1 / -1 !important;
grid-row:2 !important;
width:100% !important;
min-width:0 !important;
padding:10px 0 0 !important;
margin:0 !important;
border-left:0 !important;
border-top:1px solid #303640 !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact{
width:100% !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:5px !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact > div{
min-height:46px !important;
padding:6px 2px !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact span{
font-size:6px !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact strong{
font-size:10px !important;
}
body:not(.custom-theme-live) .catalog-volume-row{
margin-top:8px !important;
}
body:not(.custom-theme-live) .catalog-player-share{
gap:5px !important;
}
body:not(.custom-theme-live) .catalog-player-share .catalog-social-icon,
body:not(.custom-theme-live) .catalog-player-share .catalog-action-icon{
width:34px !important;
height:32px !important;
}
/* ---------- mobile track list becomes cards ---------- */
body:not(.custom-theme-live) .catalog-table-head{
display:none !important;
}
body:not(.custom-theme-live) .catalog-track-scroll{
width:100% !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .catalog-track-row{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:44px repeat(4,minmax(0,1fr)) !important;
grid-template-rows:auto auto auto !important;
gap:7px 4px !important;
padding:10px !important;
border-bottom:1px solid #303640 !important;
}
body:not(.custom-theme-live) .catalog-row-index{
grid-column:1 !important;
grid-row:1 !important;
align-self:center !important;
}
body:not(.custom-theme-live) .catalog-row-title{
grid-column:2 / 5 !important;
grid-row:1 !important;
min-width:0 !important;
padding:0 4px !important;
text-align:left !important;
}
body:not(.custom-theme-live) .catalog-row-title strong{
font-size:11px !important;
}
body:not(.custom-theme-live) .catalog-row-title small{
font-size:7px !important;
}
body:not(.custom-theme-live) .catalog-duration-cell{
grid-column:5 !important;
grid-row:1 !important;
min-width:0 !important;
border-left:0 !important;
font-size:9px !important;
}
body:not(.custom-theme-live) .catalog-license-cell{
position:relative !important;
grid-row:2 !important;
min-width:0 !important;
min-height:42px !important;
display:flex !important;
align-items:flex-end !important;
justify-content:center !important;
padding:17px 2px 5px !important;
border:1px solid #252a32 !important;
background:#0d1015 !important;
font-size:9px !important;
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(3){
grid-column:2 !important;
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(4){
grid-column:3 !important;
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(5){
grid-column:4 !important;
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(6){
grid-column:5 !important;
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(3)::before{
content:"LEASE";
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(4)::before{
content:"PREM";
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(5)::before{
content:"EXCL";
}
body:not(.custom-theme-live) .catalog-track-row > .catalog-license-cell:nth-child(6)::before{
content:"BUY";
}
body:not(.custom-theme-live) .catalog-license-cell::before{
position:absolute !important;
top:5px !important;
left:0 !important;
right:0 !important;
color:#e31a27 !important;
font-size:5px !important;
font-weight:900 !important;
letter-spacing:.35px !important;
}
body:not(.custom-theme-live) .catalog-download-cell{
grid-column:1 !important;
grid-row:3 !important;
border-left:0 !important;
justify-content:flex-start !important;
}
body:not(.custom-theme-live) .catalog-share-cell{
grid-column:2 / 5 !important;
grid-row:3 !important;
border-left:0 !important;
justify-content:flex-start !important;
}
body:not(.custom-theme-live) .catalog-row-actions{
grid-column:5 !important;
grid-row:3 !important;
border-left:0 !important;
justify-content:flex-end !important;
}
body:not(.custom-theme-live) .catalog-share-cell .catalog-social-icon{
width:31px !important;
height:29px !important;
}
body:not(.custom-theme-live) .catalog-action-icon{
width:31px !important;
height:29px !important;
}
/* ---------- coupon / checkout ---------- */
body:not(.custom-theme-live) .catalog-player-footer{
width:100% !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
padding:10px !important;
}
body:not(.custom-theme-live) .catalog-coupon{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
}
body:not(.custom-theme-live) .catalog-checkout-summary{
width:100% !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
body:not(.custom-theme-live) .catalog-footer-total,
body:not(.custom-theme-live) .catalog-buy-button{
width:100% !important;
min-width:0 !important;
flex:none !important;
}
/* ---------- license information ---------- */
body:not(.custom-theme-live) #music .profile-license-info-section{
width:100% !important;
margin:8px 0 0 !important;
}
body:not(.custom-theme-live) #music .profile-license-info-grid{
grid-template-columns:1fr !important;
gap:8px !important;
padding:10px !important;
}
body:not(.custom-theme-live) .profile-license-info-heading{
padding:11px 12px !important;
}
/* ---------- bundles / about ---------- */
body:not(.custom-theme-live) #bundles,
body:not(.custom-theme-live) #about{
width:calc(100% - 18px) !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:0 !important;
padding-right:0 !important;
}
body:not(.custom-theme-live) .bundle-grid,
body:not(.custom-theme-live) .about-profile-grid{
grid-template-columns:1fr !important;
}
/* ---------- footer ---------- */
body:not(.custom-theme-live) .os-global-footer{
width:100% !important;
overflow:hidden !important;
}
}
/* Very small phones */
@media(max-width:380px){
body:not(.custom-theme-live) .artist-profile-stage .artist-identity{
grid-template-columns:88px minmax(0,1fr) !important;
padding-left:10px !important;
padding-right:10px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-avatar{
width:88px !important;
height:88px !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-name-row h1{
font-size:23px !important;
}
body:not(.custom-theme-live) .catalog-now-playing{
grid-template-columns:76px minmax(0,1fr) !important;
padding:8px !important;
}
body:not(.custom-theme-live) .catalog-player-art{
width:76px !important;
height:76px !important;
}
body:not(.custom-theme-live) .catalog-player-side .catalog-current-license-grid-compact{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body:not(.custom-theme-live) .catalog-track-row{
padding:8px !important;
}
}
/* =========================================================
ARTIST PROFILE MOBILE — DESKTOP WIDTH CONFLICT FIX
The desktop player/table rules force 780–900px minimum widths.
Remove those minimums on phones so the entire profile fits 430px.
========================================================= */
@media(max-width:560px){
/* CRITICAL: desktop @media rules were still forcing this to 900px. */
body:not(.custom-theme-live) .catalog-track-scroll{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
overflow-x:hidden !important;
overflow-y:visible !important;
}
/* Every track row now measures against the actual phone width. */
body:not(.custom-theme-live) .catalog-track-row{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
body:not(.custom-theme-live) .catalog-track-row > *{
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
/* Ensure all four license prices fit inside the phone instead of
continuing into the invisible 900px desktop table. */
body:not(.custom-theme-live) .catalog-license-cell{
width:auto !important;
min-width:0 !important;
max-width:none !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .catalog-price-button{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
padding:17px 1px 5px !important;
font-size:9px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body:not(.custom-theme-live) .catalog-price-unavailable{
min-width:0 !important;
}
/* CRITICAL: the desktop footer also retained min-width:900px. */
body:not(.custom-theme-live) .catalog-player-footer{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .catalog-coupon-wrap,
body:not(.custom-theme-live) .catalog-coupon,
body:not(.custom-theme-live) .catalog-checkout-summary{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
body:not(.custom-theme-live) .catalog-coupon input{
width:100% !important;
min-width:0 !important;
}
/* Keep Total + Buy Now completely inside the phone viewport. */
body:not(.custom-theme-live) .catalog-checkout-summary{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:7px !important;
}
body:not(.custom-theme-live) .catalog-footer-total,
body:not(.custom-theme-live) .catalog-buy-button{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
flex:none !important;
}
/* Prevent any old table width from creating horizontal page overflow. */
body:not(.custom-theme-live) .catalog-master-player,
body:not(.custom-theme-live) #music,
body:not(.custom-theme-live) #trackGrid{
min-width:0 !important;
max-width:100% !important;
overflow-x:hidden !important;
}
/* Let the player expand naturally when all tracks are shown.
This prevents the checkout/footer from sitting on top of later rows. */
body:not(.custom-theme-live) .catalog-master-player{
height:auto !important;
}
/* License Information must also remain within the same mobile width. */
body:not(.custom-theme-live) #music .profile-license-info-section,
body:not(.custom-theme-live) #music .profile-license-info-grid,
body:not(.custom-theme-live) #music .profile-license-info-grid > *{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
}
@media(max-width:380px){
body:not(.custom-theme-live) .catalog-price-button{
font-size:8px !important;
}
}
/* =========================================================
ARTIST PROFILE MOBILE — FINAL ALIGNMENT / CATALOG POLISH
2x2 stats, separated track number, ~8 visible catalog rows,
dark rectangular red-outline play controls.
========================================================= */
@media(max-width:560px){
body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
margin-top:12px !important;
padding:10px 14px 16px !important;
clear:both !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-auto-rows:minmax(72px,auto) !important;
gap:8px !important;
align-items:stretch !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article{
width:100% !important;
min-width:0 !important;
min-height:72px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
padding:10px 12px !important;
text-align:left !important;
}
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > span,
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > strong,
body:not(.custom-theme-live) .artist-profile-stage .artist-stats article > small{
position:static !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Separate the play button / track number from the title column. */
body:not(.custom-theme-live) .catalog-row-index{
width:40px !important;
min-width:40px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:3px !important;
padding:0 !important;
}
body:not(.custom-theme-live) .catalog-row-number{
display:block !important;
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#a6adb8 !important;
font-size:9px !important;
line-height:1 !important;
text-align:center !important;
}
body:not(.custom-theme-live) .catalog-row-title{
padding-left:8px !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .catalog-row-title strong{
display:block !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* About eight tracks are visible; additional tracks scroll inside catalog. */
body:not(.custom-theme-live) .catalog-track-scroll{
width:100% !important;
max-height:1040px !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
scrollbar-width:thin !important;
scrollbar-color:#73070B #15171c !important;
}
/* Artist Profile play controls use the same mobile marketplace style. */
body:not(.custom-theme-live) .catalog-row-play,
body:not(.custom-theme-live) .catalog-main-play,
body:not(.custom-theme-live) .catalog-transport button,
#miniPlay{
border:1px solid #b30b15 !important;
border-radius:2px !important;
background:#0b0d11 !important;
background-image:none !important;
color:#fff !important;
box-shadow:none !important;
}
body:not(.custom-theme-live) .catalog-row-play{
width:36px !important;
min-width:36px !important;
height:30px !important;
min-height:30px !important;
}
body:not(.custom-theme-live) .catalog-track-row.playing .catalog-row-play{
background:#16090c !important;
border-color:#e01622 !important;
}
}
@media(max-width:380px){
body:not(.custom-theme-live) .catalog-track-scroll{
max-height:960px !important;
}
}
/* =========================================================
MOBILE PROFILE PLAYER — CONTENT-HEIGHT SAFETY FIX
Applies to standard and customized storefronts. Prevents a
one-track catalog from stretching into a full-screen blank area.
========================================================= */
@media(max-width:600px){
body .catalog-master-player{
display:flex !important;
flex-direction:column !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
}
body .catalog-now-playing,
body .catalog-track-scroll,
body .catalog-player-footer{
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
position:relative !important;
inset:auto !important;
}
body .catalog-track-scroll{
display:block !important;
max-height:960px !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
body .catalog-track-row{
height:auto !important;
}
body .catalog-player-footer{
margin-top:0 !important;
}
}
/* OSBEATS 20260908 PLAYER LABEL + WAVEFORM FIX */
/* Keep Full Song Purchase contained inside the compact price box. */
body:not(.custom-theme-live) #catalogBuyNowLabel{
display:block !important;
width:100% !important;
max-width:100% !important;
white-space:normal !important;
overflow:hidden !important;
text-align:center !important;
font-size:6px !important;
line-height:1.05 !important;
letter-spacing:.15px !important;
}
body:not(.custom-theme-live)
.catalog-player-side
.catalog-current-license-grid-compact > div{
overflow:hidden !important;
}
/* =========================================================
DESKTOP PLAYER LAYOUT CORRECTION
========================================================= */
/*
Reserve a real left-hand text/control area before the OSBeats
banner begins. The banner may never sit behind the song title.
*/
body:not(.custom-theme-live) .catalog-player-main{
position:relative !important;
height:168px !important;
min-height:168px !important;
padding:0 !important;
overflow:hidden !important;
--catalog-safe-banner-left:
max(
var(--catalog-media-slider-left,220px),
min(340px,45%)
);
}
body:not(.custom-theme-live) .catalog-player-copy{
position:relative !important;
z-index:5 !important;
width:100% !important;
height:128px !important;
min-width:0 !important;
padding-top:3px !important;
}
/* Title is restricted to the clear area LEFT of the banner. */
body:not(.custom-theme-live) .catalog-player-title-row{
width:calc(var(--catalog-safe-banner-left) - 14px) !important;
max-width:calc(var(--catalog-safe-banner-left) - 14px) !important;
min-width:0 !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .catalog-player-title-row{
align-items:flex-start !important;
min-height:38px !important;
height:38px !important;
}
body:not(.custom-theme-live) .catalog-player-title-row h3{
flex:1 1 auto !important;
min-width:0 !important;
max-width:100% !important;
height:38px !important;
max-height:38px !important;
margin:0 !important;
font-size:17px !important;
line-height:19px !important;
font-weight:800 !important;
white-space:normal !important;
overflow:hidden !important;
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:2 !important;
line-clamp:2 !important;
}
body:not(.custom-theme-live) #catalogSaveButton{
flex:0 0 66px !important;
width:66px !important;
min-width:66px !important;
max-width:66px !important;
height:30px !important;
min-height:30px !important;
margin:0 !important;
padding:0 4px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
overflow:hidden !important;
font-size:10px !important;
line-height:1 !important;
}
body:not(.custom-theme-live) #catalogSaveButton.saved{
color:#fff !important;
}
/* Artist name also stays out from underneath the banner. */
body:not(.custom-theme-live) .catalog-player-artist{
width:calc(var(--catalog-safe-banner-left) - 14px) !important;
max-width:calc(var(--catalog-safe-banner-left) - 14px) !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/*
Controls remain above the waveform.
*/
body:not(.custom-theme-live) .catalog-transport-media-row{
position:static !important;
display:block !important;
width:100% !important;
height:31px !important;
min-height:31px !important;
margin-top:10px !important;
overflow:visible !important;
}
body:not(.custom-theme-live)
.catalog-transport-media-row
.catalog-transport{
position:relative !important;
z-index:7 !important;
width:max-content !important;
height:31px !important;
margin:0 !important;
white-space:nowrap !important;
}
/*
OSBeats banner starts AFTER the protected title/control area.
It no longer covers the song name.
*/
body:not(.custom-theme-live)
.catalog-transport-media-row
.catalog-media-slider{
position:absolute !important;
z-index:2 !important;
top:0 !important;
left:var(--catalog-safe-banner-left) !important;
right:0 !important;
width:auto !important;
height:104px !important;
min-height:104px !important;
margin:0 !important;
overflow:hidden !important;
}
/*
Dedicated waveform strip.
Controls finish above this line; waveform begins beneath them.
*/
body:not(.custom-theme-live)
.catalog-player-main > .catalog-wave{
position:absolute !important;
z-index:4 !important;
left:0 !important;
right:0 !important;
top:132px !important;
bottom:auto !important;
width:100% !important;
height:32px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
body:not(.custom-theme-live) .catalog-wave-base,
body:not(.custom-theme-live) .catalog-wave-progress{
top:0 !important;
bottom:0 !important;
height:100% !important;
}
/* =========================================================
MOBILE — retain the existing stacked player arrangement
========================================================= */
@media(max-width:700px){
body:not(.custom-theme-live) .catalog-player-main{
height:auto !important;
min-height:286px !important;
padding-bottom:44px !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .catalog-player-copy{
height:auto !important;
}
body:not(.custom-theme-live) .catalog-player-title-row,
body:not(.custom-theme-live) .catalog-player-artist{
width:100% !important;
max-width:100% !important;
}
body:not(.custom-theme-live) .catalog-transport-media-row{
position:relative !important;
height:auto !important;
min-height:150px !important;
}
body:not(.custom-theme-live)
.catalog-transport-media-row
.catalog-media-slider{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
width:100% !important;
height:118px !important;
min-height:118px !important;
margin-top:10px !important;
}
body:not(.custom-theme-live)
.catalog-player-main > .catalog-wave{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100% !important;
height:36px !important;
margin-top:12px !important;
}
body:not(.custom-theme-live) #catalogBuyNowLabel{
font-size:7px !important;
}
}
/* END OSBEATS 20260908 PLAYER LABEL + WAVEFORM FIX */
/* OSBEATS 20260908 MOBILE PLAYER FINAL CORRECTIONS */
/* ---------------------------------------------------------
Better volume icon + always-full visual volume track
--------------------------------------------------------- */
body:not(.custom-theme-live) .catalog-volume-icon{
width:28px !important;
height:28px !important;
display:grid !important;
place-items:center !important;
flex:0 0 28px !important;
color:#d8dde5 !important;
}
body:not(.custom-theme-live) .catalog-volume-icon svg{
width:22px !important;
height:22px !important;
display:block !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.8 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
body:not(.custom-theme-live) #catalogVolume{
accent-color:#ed1639 !important;
}
body:not(.custom-theme-live)
#catalogVolume::-webkit-slider-runnable-track{
height:5px !important;
background:#ed1639 !important;
border:0 !important;
}
body:not(.custom-theme-live)
#catalogVolume::-moz-range-track{
height:5px !important;
background:#ed1639 !important;
border:0 !important;
}
body:not(.custom-theme-live)
#catalogVolume::-moz-range-progress{
height:5px !important;
background:#ed1639 !important;
}
/* ---------------------------------------------------------
PHONE PLAYER
Required order:
BANNER
TRACK NAME
PLAY CONTROLS
--------------------------------------------------------- */
@media(max-width:560px){
/*
Fix the large blank header area on mobile.
The later desktop full-bleed rule was overriding the
earlier 150px phone height with 330px.
*/
/*
MOBILE ARTIST HEADER
Banner is now its own visible strip ABOVE the profile
information instead of sitting behind the profile image,
artist name, location and buttons.
*/
body:not(.custom-theme-live)
.artist-profile-stage{
display:block !important;
height:auto !important;
min-height:0 !important;
overflow:visible !important;
}
body:not(.custom-theme-live)
.artist-profile-stage > .artist-banner{
position:relative !important;
inset:auto !important;
top:auto !important;
left:auto !important;
right:auto !important;
display:block !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:3 / 1 !important;
margin:0 !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
z-index:1 !important;
}
body:not(.custom-theme-live)
.artist-profile-stage > .artist-hero{
position:relative !important;
inset:auto !important;
top:auto !important;
left:auto !important;
transform:none !important;
width:100% !important;
min-height:0 !important;
height:auto !important;
flex:0 0 auto !important;
margin:0 !important;
background:#050608 !important;
z-index:2 !important;
}
/*
Give the player banner its own full-width row ABOVE
the artwork/title/control area.
*/
body:not(.custom-theme-live) .catalog-now-playing{
position:relative !important;
width:100% !important;
min-width:0 !important;
grid-template-columns:118px minmax(0,1fr) !important;
grid-template-rows:auto !important;
gap:12px !important;
padding:
154px
12px
12px
12px !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .catalog-player-art{
grid-column:1 !important;
grid-row:1 !important;
width:118px !important;
height:118px !important;
align-self:start !important;
}
/*
Make catalog-now-playing the positioning parent for
the banner instead of player-main.
*/
body:not(.custom-theme-live) .catalog-player-main{
position:static !important;
grid-column:2 !important;
grid-row:1 !important;
display:block !important;
width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
padding:0 !important;
overflow:visible !important;
}
body:not(.custom-theme-live) .catalog-player-copy{
position:static !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
padding:0 !important;
}
/*
Player banner = FIRST item visually.
*/
body:not(.custom-theme-live)
.catalog-transport-media-row
.catalog-media-slider{
position:absolute !important;
top:12px !important;
left:12px !important;
right:12px !important;
width:auto !important;
height:130px !important;
min-height:130px !important;
margin:0 !important;
z-index:3 !important;
overflow:hidden !important;
}
body:not(.custom-theme-live)
.catalog-media-slide{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
}
/*
Track name = SECOND.
Keep it stable instead of allowing title length to
move the heart and controls.
*/
body:not(.custom-theme-live)
.catalog-player-title-row{
width:100% !important;
max-width:100% !important;
height:40px !important;
min-height:40px !important;
margin-top:4px !important;
align-items:flex-start !important;
}
body:not(.custom-theme-live)
.catalog-player-title-row h3{
width:auto !important;
max-width:none !important;
height:38px !important;
max-height:38px !important;
font-size:16px !important;
line-height:19px !important;
-webkit-line-clamp:2 !important;
line-clamp:2 !important;
}
body:not(.custom-theme-live)
#catalogSaveButton{
flex:0 0 54px !important;
width:54px !important;
min-width:54px !important;
max-width:54px !important;
height:28px !important;
min-height:28px !important;
font-size:9px !important;
}
body:not(.custom-theme-live)
.catalog-player-artist{
width:100% !important;
max-width:100% !important;
margin-top:3px !important;
}
/*
Controls = THIRD.
*/
body:not(.custom-theme-live)
.catalog-transport-media-row{
position:static !important;
display:block !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
margin-top:8px !important;
}
body:not(.custom-theme-live)
.catalog-transport-media-row
.catalog-transport{
position:relative !important;
width:max-content !important;
height:36px !important;
margin:8px 0 0 !important;
display:flex !important;
align-items:center !important;
gap:6px !important;
z-index:5 !important;
}
body:not(.custom-theme-live)
.catalog-transport button{
width:36px !important;
min-width:36px !important;
height:36px !important;
}
body:not(.custom-theme-live)
.catalog-transport span{
font-size:9px !important;
white-space:nowrap !important;
}
/*
Waveform stays BELOW the controls and no longer
sits underneath/behind them.
*/
body:not(.custom-theme-live)
.catalog-player-main > .catalog-wave{
position:relative !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
width:100% !important;
height:38px !important;
margin:10px 0 0 !important;
z-index:2 !important;
}
body:not(.custom-theme-live)
.catalog-player-side{
grid-column:1 / -1 !important;
grid-row:auto !important;
width:100% !important;
}
}
/* ---------------------------------------------------------
MOBILE TRACK ROW
Fix play button / track-number overlap.
--------------------------------------------------------- */
@media(max-width:700px){
body:not(.custom-theme-live)
.catalog-track-row{
grid-template-columns:
70px
repeat(4,minmax(0,1fr)) !important;
gap:7px 4px !important;
}
body:not(.custom-theme-live)
.catalog-row-index{
width:66px !important;
min-width:66px !important;
display:grid !important;
grid-template-columns:
36px
20px !important;
gap:7px !important;
align-items:center !important;
justify-content:start !important;
overflow:visible !important;
}
body:not(.custom-theme-live)
.catalog-row-play{
position:static !important;
width:36px !important;
min-width:36px !important;
height:36px !important;
margin:0 !important;
}
body:not(.custom-theme-live)
.catalog-row-number{
position:static !important;
display:block !important;
width:20px !important;
min-width:20px !important;
margin:0 !important;
text-align:center !important;
transform:none !important;
}
/*
The selected-player download control has been removed
from JS. Per-track download remains here.
*/
body:not(.custom-theme-live)
.catalog-download-cell{
display:flex !important;
}
}
/* END OSBEATS 20260908 MOBILE PLAYER FINAL CORRECTIONS */
/* =========================================================
OSBEATS 20260908 VOLUME THUMB VERTICAL ALIGNMENT
Center the volume control knob directly on the level bar.
========================================================= */
body:not(.custom-theme-live) #catalogVolume{
-webkit-appearance:none !important;
appearance:none !important;
height:16px !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
cursor:pointer !important;
}
/* Chrome / Edge / Safari */
body:not(.custom-theme-live)
#catalogVolume::-webkit-slider-runnable-track{
height:5px !important;
background:#ed1639 !important;
border:0 !important;
border-radius:0 !important;
}
body:not(.custom-theme-live)
#catalogVolume::-webkit-slider-thumb{
-webkit-appearance:none !important;
appearance:none !important;
width:16px !important;
height:16px !important;
margin-top:-5.5px !important;
border:0 !important;
border-radius:50% !important;
background:#ed1639 !important;
box-shadow:none !important;
}
/* Firefox */
body:not(.custom-theme-live)
#catalogVolume::-moz-range-track{
height:5px !important;
background:#ed1639 !important;
border:0 !important;
}
body:not(.custom-theme-live)
#catalogVolume::-moz-range-progress{
height:5px !important;
background:#ed1639 !important;
}
body:not(.custom-theme-live)
#catalogVolume::-moz-range-thumb{
width:16px !important;
height:16px !important;
border:0 !important;
border-radius:50% !important;
background:#ed1639 !important;
box-shadow:none !important;
}
/* END OSBEATS 20260908 VOLUME THUMB VERTICAL ALIGNMENT */
/* =========================================================
OSBEATS 20260908 ARTIST PROFILE WHITE STAT ICONS
Followers / Tracks / Total Plays / Downloads
========================================================= */
body:not(.custom-theme-live)
.artist-profile-stage
.artist-stats article
> span.profile-stat-icon{
color:#fff !important;
}
body:not(.custom-theme-live)
.artist-profile-stage
.artist-stats article
> span.profile-stat-icon svg{
stroke:#fff !important;
}
body:not(.custom-theme-live)
.artist-profile-stage
.artist-stats article
> span.profile-stat-icon svg *{
stroke:#fff !important;
}
/* END OSBEATS 20260908 ARTIST PROFILE WHITE STAT ICONS */
/* =========================================================
OSBEATS 20260909 NEON PULSE — APPROVED STRUCTURE
Native layout based on the locked Neon Pulse mockup.
========================================================= */
body.storefront-theme-neon-pulse{
--np-purple:#9c27ff;
--np-magenta:#ec2fd5;
--np-blue:#307eff;
--np-navy:#07101f;
--np-panel:#09111e;
--np-panel-2:#0b1626;
--np-line:#26364d;
--np-text:#f8f8ff;
--np-muted:#8793a9;
margin:0 !important;
background:
radial-gradient(
circle at 16% 15%,
rgba(142,31,255,.10),
transparent 28%
),
#050912 !important;
color:var(--np-text) !important;
}
/* hide the original Artist Profile structure only in preview */
body.storefront-theme-neon-pulse
.site-header,
body.storefront-theme-neon-pulse
.artist-profile-stage,
body.storefront-theme-neon-pulse
.artist-announcement,
body.storefront-theme-neon-pulse
.store-tabs,
body.storefront-theme-neon-pulse
.store-panel,
body.storefront-theme-neon-pulse
.custom-theme-native-extras,
body.storefront-theme-neon-pulse
.mini-player{
display:none !important;
}
body.storefront-theme-neon-pulse
.storefront{
max-width:none !important;
width:100% !important;
padding:0 20px 40px !important;
background:transparent !important;
}
/* preview notice */
body.storefront-theme-neon-pulse
.storefront-theme-preview-bar{
max-width:1180px;
margin:14px auto 10px;
padding:10px 14px;
border:1px solid #7638dd;
border-left:4px solid var(--np-magenta);
background:#080e1a;
box-shadow:none;
color:#fff;
}
body.storefront-theme-neon-pulse
.storefront-theme-preview-bar span{
color:#dc4dff;
}
body.storefront-theme-neon-pulse
.storefront-theme-preview-bar a{
border:1px solid #55426d;
background:#101727;
}
/* theme frame */
.np-theme-stage{
max-width:1180px;
margin:0 auto 28px;
}
.np-shell{
overflow:hidden;
border:1px solid transparent;
border-radius:9px;
background:
linear-gradient(
#07101d,
#07101d
) padding-box,
linear-gradient(
110deg,
#a128ff,
#5d33ff 48%,
#247cff
) border-box;
box-shadow:
0 20px 50px rgba(0,0,0,.35);
}
/* top navigation */
.np-topbar{
min-height:54px;
display:grid;
grid-template-columns:auto minmax(220px,320px) 1fr auto;
align-items:center;
gap:20px;
padding:0 18px;
border-bottom:1px solid #28364d;
background:
linear-gradient(
90deg,
#080c17,
#0c1422
);
}
.np-brand{
display:flex;
align-items:center;
gap:0;
color:#fff;
text-decoration:none;
font-weight:1000;
font-size:19px;
letter-spacing:-.04em;
}
.np-brand strong{
color:#f39a2b;
}
.np-brand span{
color:#fff;
}
.np-global-search{
min-height:32px;
display:flex;
align-items:center;
gap:7px;
padding:0 10px;
border:1px solid #29384f;
border-radius:4px;
background:#172438;
color:#8896ab;
}
.np-global-search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:#fff;
font-size:11px;
}
.np-global-search input::placeholder{
color:#8190a8;
}
.np-global-nav{
display:flex;
justify-content:flex-end;
align-items:center;
gap:24px;
}
.np-global-nav a{
color:#fff;
text-decoration:none;
font-size:10px;
font-weight:700;
}
.np-global-nav a:hover{
color:#bf4fff;
}
.np-top-icons{
display:flex;
align-items:center;
gap:11px;
color:#bdc7d8;
}
.np-mini-avatar{
width:26px;
height:26px;
border:1px solid #8c44ff;
border-radius:50%;
background:#101827 center/cover no-repeat;
}
/* hero */
.np-hero{
position:relative;
height:300px;
background:
#060a13 center/cover no-repeat;
}
.np-hero-shade{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(7,8,18,.08) 0%,
rgba(7,9,20,.10) 45%,
rgba(5,8,17,.82) 100%
);
}
/* profile identity row */
.np-profile-strip{
position:relative;
min-height:164px;
display:grid;
grid-template-columns:140px minmax(0,1fr) 380px;
gap:20px;
padding:
20px 24px 20px 170px;
background:
linear-gradient(
90deg,
#080d19,
#07101f 55%,
#091326
);
border-bottom:
1px solid #26354c;
}
.np-avatar{
position:absolute;
left:28px;
top:-62px;
width:132px;
height:132px;
border:3px solid #b33cff;
border-radius:50%;
background:
#101522 center/cover no-repeat;
box-shadow:
0 0 0 4px rgba(87,39,255,.15),
0 14px 25px rgba(0,0,0,.40);
}
.np-identity{
align-self:start;
}
.np-identity h1{
display:flex;
align-items:center;
gap:7px;
margin:0 0 5px;
color:#fff;
font-size:25px;
line-height:1.05;
}
.np-verified{
width:19px;
height:19px;
display:inline-grid;
place-items:center;
border-radius:50%;
background:#2689ff;
color:#fff;
font-size:11px;
}
.np-identity-meta{
display:flex;
align-items:center;
gap:7px;
color:#a2adc0;
font-size:11px;
}
.np-identity-meta i{
color:#536179;
}
.np-identity p{
margin:8px 0 10px;
max-width:520px;
color:#c3c9d5;
font-size:11px;
line-height:1.45;
}
.np-social-row{
display:flex;
gap:12px;
}
.np-social{
color:#fff;
text-decoration:none;
font-size:16px;
}
.np-social:hover{
color:#d841ff;
}
.np-profile-actions{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:24px;
}
.np-action-buttons{
display:flex;
justify-content:flex-end;
gap:12px;
}
.np-follow,
.np-message{
min-width:124px;
min-height:38px;
border-radius:4px;
font-weight:800;
font-size:12px;
}
.np-follow{
border:1px solid #bb3cff;
background:
linear-gradient(
90deg,
#7922f0,
#c12cff
);
color:#fff;
box-shadow:
0 0 16px rgba(156,40,255,.18);
}
.np-message{
border:1px solid #ac47f7;
background:#09101d;
color:#fff;
}
.np-follow:disabled,
.np-message:disabled{
opacity:1;
}
.np-inline-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
text-align:center;
}
.np-inline-stats article{
min-width:62px;
}
.np-inline-stats strong{
display:block;
color:#fff;
font-size:18px;
line-height:1;
}
.np-inline-stats span{
display:block;
margin-top:5px;
color:#a4afc2;
font-size:10px;
}
/* theme tabs */
.np-tabs{
display:flex;
align-items:center;
gap:0;
min-height:52px;
padding:0 22px;
border-bottom:1px solid #23324a;
background:
linear-gradient(
90deg,
#08101d,
#0b1525
);
}
.np-tabs button{
position:relative;
min-height:52px;
padding:0 20px;
border:0;
background:transparent;
color:#c7cfdd;
font-size:11px;
font-weight:700;
cursor:pointer;
}
.np-tabs button.active{
color:#fff;
}
.np-tabs button.active::after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:0;
height:2px;
background:
linear-gradient(
90deg,
#e632d7,
#7c36ff
);
}
.np-tabs button:first-child{
color:#e15aff;
}
/* content */
.np-panel{
padding:22px;
background:
linear-gradient(
180deg,
#07111f,
#060d19
);
}
.np-track-tools{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:13px;
}
.np-track-tools h2,
.np-simple-panel h2,
.np-photo-panel h2{
margin:0;
color:#fff;
font-size:19px;
}
.np-track-filters{
display:flex;
align-items:center;
gap:10px;
}
.np-track-search{
width:320px;
height:36px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
border:1px solid #26384f;
border-radius:4px;
background:#102036;
color:#8796ae;
}
.np-track-search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:#fff;
font-size:11px;
}
.np-track-filters select{
min-width:130px;
height:36px;
padding:0 12px;
border:1px solid #26384f;
border-radius:4px;
background:#102036;
color:#fff;
font-size:11px;
}
/* track list */
.np-track-list{
overflow-y:auto;
max-height:
calc(
var(--np-visible-rows,6) *
72px
);
border-top:
1px solid #24334a;
}
.np-track-row{
min-height:72px;
display:grid;
grid-template-columns:
52px
38px
minmax(190px,1fr)
minmax(170px,240px)
44px
40px
92px
30px;
align-items:center;
gap:10px;
padding:7px 7px 7px 0;
border-bottom:
1px solid #233249;
background:
linear-gradient(
90deg,
rgba(10,18,31,.88),
rgba(6,14,26,.88)
);
}
.np-track-row:hover{
background:
linear-gradient(
90deg,
rgba(24,30,58,.96),
rgba(10,18,32,.96)
);
}
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(68,24,117,.72),
rgba(12,21,38,.98) 48%
);
}
.np-track-cover{
width:52px;
height:52px;
background:
#121927 center/cover no-repeat;
}
.np-track-play{
width:34px;
height:34px;
display:grid;
place-items:center;
border:1px solid #aeb7c6;
border-radius:50%;
background:#132238;
color:#fff;
cursor:pointer;
}
.np-track-row.playing
.np-track-play{
border-color:#d04bff;
background:
linear-gradient(
135deg,
#7428ed,
#c52eff
);
}
.np-track-copy{
min-width:0;
}
.np-track-copy strong{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#fff;
font-size:13px;
}
.np-track-copy small{
display:block;
margin-top:3px;
color:#8e9bb1;
font-size:10px;
}
.np-track-wave{
height:34px;
border:0;
background:transparent;
cursor:pointer;
}
.np-track-wave span{
display:block;
width:100%;
height:100%;
opacity:.72;
background:
repeating-linear-gradient(
90deg,
transparent 0 2px,
#60708a 2px 3px,
transparent 3px 5px
);
mask-image:
linear-gradient(
180deg,
transparent 0%,
#000 24%,
#000 76%,
transparent 100%
);
}
.np-track-duration{
color:#e8ecf4;
font-size:11px;
text-align:center;
}
.np-track-heart,
.np-track-more{
border:0;
background:transparent;
color:#fff;
font-size:22px;
cursor:pointer;
}
.np-track-more{
font-size:20px;
}
.np-track-price{
min-height:38px;
border:0;
border-radius:4px;
background:
linear-gradient(
90deg,
#7230ff,
#bd27ff
);
color:#fff;
font-size:12px;
font-weight:900;
cursor:pointer;
box-shadow:
0 0 14px rgba(136,43,255,.12);
}
.np-track-price.unavailable{
display:grid;
place-items:center;
background:#172030;
color:#718097;
}
.np-empty{
padding:34px;
text-align:center;
color:#8794a8;
}
/* alternate panels */
.np-simple-panel{
min-height:300px;
}
.np-simple-panel p{
max-width:760px;
color:#abb5c6;
line-height:1.7;
}
.np-photo-panel{
min-height:300px;
}
.np-photo-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:16px;
margin-top:18px;
}
.np-photo-grid div{
min-height:220px;
background:
#101827 center/cover no-repeat;
border:1px solid #28394f;
}
/* keep normal OSBeats footer beneath the theme */
body.storefront-theme-neon-pulse
.site-footer{
background:#050912 !important;
border-top:1px solid #28364c !important;
}
/* responsive */
@media(max-width:980px){
.np-topbar{
grid-template-columns:auto 1fr auto;
}
.np-global-nav{
display:none;
}
.np-profile-strip{
grid-template-columns:1fr;
padding-left:170px;
}
.np-profile-actions{
padding-right:0;
}
.np-inline-stats{
justify-content:start;
}
.np-track-row{
grid-template-columns:
46px
36px
minmax(150px,1fr)
44px
84px
28px;
}
.np-track-wave,
.np-track-heart{
display:none;
}
}
@media(max-width:720px){
body.storefront-theme-neon-pulse
.storefront{
padding:
0 8px 24px !important;
}
.np-topbar{
grid-template-columns:auto 1fr auto;
padding:0 10px;
gap:10px;
}
.np-global-search{
min-width:0;
}
.np-top-icons > span:not(.np-mini-avatar){
display:none;
}
.np-hero{
height:220px;
}
.np-profile-strip{
display:block;
padding:
82px 18px 18px;
text-align:center;
}
.np-avatar{
left:50%;
top:-62px;
transform:translateX(-50%);
}
.np-identity h1,
.np-identity-meta,
.np-social-row{
justify-content:center;
}
.np-action-buttons{
justify-content:center;
margin-top:16px;
}
.np-inline-stats{
margin-top:20px;
gap:8px;
}
.np-tabs{
overflow-x:auto;
padding:0 8px;
}
.np-tabs button{
flex:0 0 auto;
padding:0 14px;
}
.np-track-tools{
display:block;
}
.np-track-filters{
display:grid;
grid-template-columns:1fr 1fr;
margin-top:12px;
}
.np-track-search{
grid-column:1 / -1;
width:100%;
}
.np-track-filters select{
min-width:0;
width:100%;
}
.np-track-row{
grid-template-columns:
44px
34px
minmax(0,1fr)
72px
24px;
gap:7px;
}
.np-track-duration,
.np-track-wave,
.np-track-heart{
display:none;
}
.np-track-cover{
width:44px;
height:44px;
}
.np-track-price{
min-height:34px;
font-size:10px;
}
}
/* END NEON PULSE APPROVED STRUCTURE */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FIDELITY PASS #1
Tightens the native Neon Pulse preview against the
locked approved mockup.
========================================================= */
/* ---------------------------------------------------------
THEME FRAME
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-theme-stage{
max-width:1180px !important;
}
body.storefront-theme-neon-pulse
.np-shell{
border-radius:10px !important;
}
/* ---------------------------------------------------------
TOP NAV — CLOSER TO APPROVED MOCKUP
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-topbar{
min-height:46px !important;
grid-template-columns:
auto
minmax(210px,300px)
1fr
auto !important;
gap:16px !important;
padding:
0 16px !important;
}
body.storefront-theme-neon-pulse
.np-brand{
font-size:17px !important;
}
body.storefront-theme-neon-pulse
.np-global-search{
min-height:29px !important;
}
body.storefront-theme-neon-pulse
.np-global-nav{
gap:20px !important;
}
body.storefront-theme-neon-pulse
.np-global-nav a{
font-size:9px !important;
}
/* ---------------------------------------------------------
HERO — SHORTER / WIDER LIKE APPROVED MOCKUP
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-hero{
position:relative !important;
height:220px !important;
overflow:hidden !important;
background-position:
center 42% !important;
}
body.storefront-theme-neon-pulse
.np-hero-shade{
z-index:1 !important;
background:
radial-gradient(
circle at 83% 20%,
rgba(54,93,255,.20),
transparent 28%
),
radial-gradient(
circle at 73% 36%,
rgba(204,29,255,.18),
transparent 32%
),
linear-gradient(
180deg,
rgba(5,8,18,.08) 0%,
rgba(7,8,21,.16) 46%,
rgba(5,8,18,.82) 100%
) !important;
}
/* ---------------------------------------------------------
PROFILE STRIP
Fix incorrect empty avatar grid column.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:132px !important;
grid-template-columns:
minmax(0,1fr)
390px !important;
gap:28px !important;
padding:
16px 22px
16px 162px !important;
}
/* true circular avatar */
body.storefront-theme-neon-pulse
.np-avatar{
left:24px !important;
top:-52px !important;
width:124px !important;
height:124px !important;
border:
3px solid #a83bff !important;
border-radius:
999px !important;
overflow:hidden !important;
background-position:
center !important;
background-size:
cover !important;
box-shadow:
0 0 0 3px rgba(94,37,255,.18),
0 10px 26px rgba(0,0,0,.46) !important;
}
/* artist identity */
body.storefront-theme-neon-pulse
.np-identity{
align-self:center !important;
}
body.storefront-theme-neon-pulse
.np-identity h1{
margin:
0 0 3px !important;
font-size:
23px !important;
}
body.storefront-theme-neon-pulse
.np-identity-meta{
font-size:
10px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
margin:
6px 0 8px !important;
max-width:
500px !important;
font-size:
10px !important;
}
body.storefront-theme-neon-pulse
.np-social-row{
gap:
10px !important;
}
body.storefront-theme-neon-pulse
.np-social{
font-size:
14px !important;
}
/* ---------------------------------------------------------
FOLLOW / MESSAGE + STATS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-actions{
align-self:center !important;
justify-content:center !important;
gap:
18px !important;
}
body.storefront-theme-neon-pulse
.np-action-buttons{
justify-content:
flex-end !important;
gap:
10px !important;
}
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-width:
116px !important;
min-height:
34px !important;
font-size:
11px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,72px) !important;
justify-content:
end !important;
gap:
14px !important;
text-align:
center !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
16px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
margin-top:
3px !important;
font-size:
9px !important;
}
/* ---------------------------------------------------------
TABS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
min-height:
46px !important;
padding:
0 18px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
min-height:
46px !important;
padding:
0 16px !important;
font-size:
10px !important;
}
/* ---------------------------------------------------------
TRACK PANEL
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-panel{
padding:
18px 20px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools{
margin-bottom:
10px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:
17px !important;
}
body.storefront-theme-neon-pulse
.np-track-search{
width:
300px !important;
height:
32px !important;
}
body.storefront-theme-neon-pulse
.np-track-filters select{
min-width:
120px !important;
height:
32px !important;
}
/* ---------------------------------------------------------
TRACK ROWS — MUCH CLOSER TO APPROVED MOCKUP
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-list{
max-height:
calc(
var(--np-visible-rows,6) *
58px
) !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
58px !important;
grid-template-columns:
44px
34px
minmax(190px,1fr)
minmax(175px,230px)
38px
34px
82px
24px !important;
gap:
8px !important;
padding:
6px 5px 6px 0 !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:
44px !important;
height:
44px !important;
}
/* approved circular player control */
body.storefront-theme-neon-pulse
.np-track-play{
width:
30px !important;
height:
30px !important;
padding:
0 !important;
border:
1px solid #aab3c2 !important;
border-radius:
50% !important;
background:
#122033 !important;
color:
#fff !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-track-play{
border-color:
#ca43ff !important;
background:
linear-gradient(
135deg,
#7130ed,
#bd31ff
) !important;
}
/* tighter typography */
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:
12px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
margin-top:
2px !important;
font-size:
9px !important;
}
/* ---------------------------------------------------------
WAVEFORM — GRAY, NOT RED
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave{
height:
26px !important;
padding:
0 !important;
border:
0 !important;
outline:
0 !important;
background:
transparent !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-wave span{
display:block !important;
width:
100% !important;
height:
26px !important;
border:
0 !important;
background:
repeating-linear-gradient(
90deg,
transparent 0 2px,
#647187 2px 3px,
transparent 3px 5px
) !important;
opacity:
.62 !important;
box-shadow:
none !important;
}
/* duration */
body.storefront-theme-neon-pulse
.np-track-duration{
font-size:
10px !important;
}
/* heart */
body.storefront-theme-neon-pulse
.np-track-heart{
padding:
0 !important;
border:
0 !important;
background:
transparent !important;
color:
#fff !important;
font-size:
19px !important;
box-shadow:
none !important;
}
/* price */
body.storefront-theme-neon-pulse
.np-track-price{
min-height:
34px !important;
padding:
0 10px !important;
border:
0 !important;
border-radius:
4px !important;
background:
linear-gradient(
90deg,
#7333ff,
#bd2cff
) !important;
color:
#fff !important;
font-size:
11px !important;
font-weight:
900 !important;
}
/* menu */
body.storefront-theme-neon-pulse
.np-track-more{
padding:
0 !important;
border:
0 !important;
background:
transparent !important;
color:
#fff !important;
font-size:
18px !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
SCROLLBAR — LESS VISUALLY HEAVY
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-list{
scrollbar-width:
thin;
scrollbar-color:
#536176
#07111f;
}
body.storefront-theme-neon-pulse
.np-track-list::-webkit-scrollbar{
width:
6px;
}
body.storefront-theme-neon-pulse
.np-track-list::-webkit-scrollbar-track{
background:
#07111f;
}
body.storefront-theme-neon-pulse
.np-track-list::-webkit-scrollbar-thumb{
background:
#536176;
border-radius:
8px;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-hero{
height:
190px !important;
}
body.storefront-theme-neon-pulse
.np-profile-strip{
display:block !important;
min-height:0 !important;
padding:
78px 16px
18px !important;
}
body.storefront-theme-neon-pulse
.np-avatar{
left:
50% !important;
top:
-52px !important;
transform:
translateX(-50%) !important;
}
body.storefront-theme-neon-pulse
.np-profile-actions{
margin-top:
14px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,1fr) !important;
gap:
6px !important;
}
}
/* END NEON PULSE FIDELITY PASS #1 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FIDELITY PASS #2
========================================================= */
/* ---------------------------------------------------------
THEME-WIDE TYPOGRAPHY + FRAME
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-theme-stage{
font-family:
Arial,
Helvetica Neue,
Helvetica,
sans-serif !important;
}
body.storefront-theme-neon-pulse
.np-shell{
border:
1px solid transparent !important;
background:
linear-gradient(
#07101d,
#07101d
) padding-box,
linear-gradient(
120deg,
#d12cff,
#7b36ff 46%,
#247eff
) border-box !important;
box-shadow:
0 0 0 1px rgba(154,50,255,.10),
0 18px 48px rgba(0,0,0,.38) !important;
}
/* ---------------------------------------------------------
TOP BRAND
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-brand strong{
color:transparent !important;
background:
linear-gradient(
90deg,
#d634ff,
#9d38ff,
#6378ff
) !important;
-webkit-background-clip:
text !important;
background-clip:
text !important;
}
body.storefront-theme-neon-pulse
.np-brand span{
color:#ffffff !important;
}
body.storefront-theme-neon-pulse
.np-brand{
font-size:
19px !important;
}
/* ---------------------------------------------------------
HEADER SIZE + REAL SVG ICONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-topbar{
min-height:
50px !important;
padding:
0 17px !important;
}
body.storefront-theme-neon-pulse
.np-global-search{
min-height:
31px !important;
}
body.storefront-theme-neon-pulse
.np-global-search input{
font-size:
11px !important;
}
body.storefront-theme-neon-pulse
.np-global-nav a{
font-size:
10px !important;
}
body.storefront-theme-neon-pulse
.np-top-icons{
gap:
9px !important;
}
body.storefront-theme-neon-pulse
.np-top-icon{
width:
25px !important;
height:
25px !important;
display:grid !important;
place-items:
center !important;
padding:
0 !important;
border:
0 !important;
background:
transparent !important;
color:
#d9e0ee !important;
cursor:
pointer !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse
.np-top-icon svg{
width:
17px !important;
height:
17px !important;
fill:
none !important;
stroke:
currentColor !important;
stroke-width:
1.7 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
body.storefront-theme-neon-pulse
.np-top-icon:hover{
color:
#d448ff !important;
}
/* round mini profile */
body.storefront-theme-neon-pulse
.np-mini-avatar{
width:
30px !important;
height:
30px !important;
flex:
0 0 30px !important;
border:
2px solid #a23dff !important;
border-radius:
50% !important;
overflow:
hidden !important;
background-position:
center !important;
background-size:
cover !important;
box-shadow:
0 0 10px rgba(164,58,255,.18) !important;
}
/* ---------------------------------------------------------
BANNER — NEON PULSE COLOR TREATMENT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-hero{
position:
relative !important;
z-index:
1 !important;
height:
220px !important;
}
body.storefront-theme-neon-pulse
.np-hero::after{
content:"" !important;
position:
absolute !important;
inset:
0 !important;
z-index:
2 !important;
pointer-events:
none !important;
background:
radial-gradient(
circle at 74% 28%,
rgba(227,37,255,.24),
transparent 36%
),
radial-gradient(
circle at 89% 48%,
rgba(52,110,255,.22),
transparent 38%
),
linear-gradient(
90deg,
rgba(50,13,112,.30),
rgba(67,20,131,.18) 45%,
rgba(28,80,158,.20)
) !important;
}
body.storefront-theme-neon-pulse
.np-hero-shade{
z-index:
3 !important;
}
/* ---------------------------------------------------------
PROFILE STRIP + AVATAR STACKING
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
position:
relative !important;
z-index:
5 !important;
overflow:
visible !important;
min-height:
144px !important;
grid-template-columns:
minmax(0,1fr)
420px !important;
padding:
18px 22px
17px 184px !important;
}
/* larger profile photo, fully above banner */
body.storefront-theme-neon-pulse
.np-avatar{
left:
27px !important;
top:
-68px !important;
z-index:
20 !important;
width:
144px !important;
height:
144px !important;
border:
3px solid #a83cff !important;
border-radius:
50% !important;
overflow:
hidden !important;
background-position:
center !important;
background-size:
cover !important;
box-shadow:
0 0 0 4px rgba(119,40,255,.15),
0 0 22px rgba(187,50,255,.20),
0 16px 32px rgba(0,0,0,.48) !important;
}
/* ---------------------------------------------------------
ARTIST IDENTITY — SLIGHTLY LARGER
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-identity h1{
font-size:
26px !important;
line-height:
1.05 !important;
}
body.storefront-theme-neon-pulse
.np-verified{
width:
18px !important;
height:
18px !important;
font-size:
10px !important;
}
body.storefront-theme-neon-pulse
.np-identity-meta{
font-size:
11px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
margin:
7px 0 10px !important;
font-size:
11px !important;
line-height:
1.45 !important;
}
/* ---------------------------------------------------------
REAL SOCIAL ICONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-social-row{
gap:
12px !important;
}
body.storefront-theme-neon-pulse
.np-social{
width:
20px !important;
height:
20px !important;
display:
inline-grid !important;
place-items:
center !important;
color:
#ffffff !important;
text-decoration:
none !important;
}
body.storefront-theme-neon-pulse
.np-social svg{
width:
17px !important;
height:
17px !important;
fill:
none !important;
stroke:
currentColor !important;
stroke-width:
1.75 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
body.storefront-theme-neon-pulse
.np-social:hover{
color:
#d942ff !important;
}
body.storefront-theme-neon-pulse
.np-social[title="YouTube"] svg path:first-child{
fill:
none !important;
}
/* ---------------------------------------------------------
ACTIONS + STATS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-actions{
gap:
20px !important;
}
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-width:
124px !important;
min-height:
36px !important;
font-size:
12px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,78px) !important;
justify-content:
end !important;
gap:
15px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
19px !important;
font-weight:
800 !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:
10px !important;
}
/* ---------------------------------------------------------
TABS — MORE SPACE LIKE MOCKUP
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
min-height:
50px !important;
gap:
10px !important;
padding:
0 20px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
min-height:
50px !important;
padding:
0 19px !important;
font-size:
11px !important;
}
/* ---------------------------------------------------------
TRACK HEADING / FILTERS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:
19px !important;
}
body.storefront-theme-neon-pulse
.np-track-search{
height:
34px !important;
}
body.storefront-theme-neon-pulse
.np-track-filters select{
height:
34px !important;
}
/* ---------------------------------------------------------
TRACK ROWS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
60px !important;
grid-template-columns:
46px
34px
minmax(210px,1fr)
minmax(180px,235px)
40px
36px
88px
26px !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
position:
relative !important;
width:
46px !important;
height:
46px !important;
overflow:
hidden !important;
background-position:
center !important;
background-size:
cover !important;
}
/* fallback artwork instead of blank black block */
body.storefront-theme-neon-pulse
.np-track-cover.is-fallback{
display:
grid !important;
place-items:
center !important;
background:
radial-gradient(
circle at 70% 20%,
rgba(194,46,255,.42),
transparent 42%
),
linear-gradient(
145deg,
#11182a,
#080d18
) !important;
border:
1px solid #33405a !important;
}
body.storefront-theme-neon-pulse
.np-cover-fallback{
color:
#c740ff !important;
font-size:
13px !important;
font-weight:
1000 !important;
}
/* neutral player buttons */
body.storefront-theme-neon-pulse
.np-track-play{
width:
31px !important;
height:
31px !important;
border:
1px solid #8f9aab !important;
border-radius:
50% !important;
background:
#172437 !important;
color:
#ffffff !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-track-play{
border-color:
#c347ff !important;
background:
linear-gradient(
135deg,
#7735f4,
#c02cff
) !important;
}
/* active row should remain mostly dark */
body.storefront-theme-neon-pulse
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(95,36,150,.30),
rgba(12,22,39,.96) 32%,
rgba(7,16,29,.96)
) !important;
box-shadow:
inset 2px 0 0 #b83aff !important;
}
/* larger track text */
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:
13px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
font-size:
10px !important;
}
/* ---------------------------------------------------------
NATURAL GRAY WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave{
height:
30px !important;
display:
flex !important;
align-items:
center !important;
padding:
0 !important;
border:
0 !important;
background:
transparent !important;
}
body.storefront-theme-neon-pulse
.np-wave-bars{
width:
100% !important;
height:
30px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
2px !important;
overflow:
hidden !important;
}
body.storefront-theme-neon-pulse
.np-wave-bar{
display:
block !important;
flex:
1 1 2px !important;
min-width:
1px !important;
max-width:
2px !important;
border-radius:
2px !important;
background:
#68758a !important;
opacity:
.68 !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-wave-bar{
background:
#7f8da2 !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-wave-bar{
background:
#8b84aa !important;
opacity:
.78 !important;
}
/* ---------------------------------------------------------
PRICE BUTTON
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:
88px !important;
min-height:
37px !important;
border-radius:
4px !important;
background:
linear-gradient(
90deg,
#7234ff,
#ba2cff
) !important;
font-size:
12px !important;
box-shadow:
0 0 12px rgba(146,45,255,.12) !important;
}
/* ---------------------------------------------------------
PREVIEW BAR — OUTSIDE VISUAL COMPARISON
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.storefront-theme-preview-bar{
margin-bottom:
12px !important;
border-radius:
0 !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-profile-strip{
padding:
84px 16px
18px !important;
}
body.storefront-theme-neon-pulse
.np-avatar{
left:
50% !important;
top:
-68px !important;
transform:
translateX(-50%) !important;
width:
140px !important;
height:
140px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,1fr) !important;
}
}
/* END NEON PULSE FIDELITY PASS #2 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FIDELITY PASS #3
========================================================= */
/* ---------------------------------------------------------
OVERALL VISUAL SCALE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-shell{
box-shadow:
0 0 0 1px rgba(194,54,255,.13),
0 0 30px rgba(83,64,255,.07),
0 22px 54px rgba(0,0,0,.42) !important;
}
/* ---------------------------------------------------------
HEADER BRAND / NAV
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-brand{
font-size:20px !important;
font-weight:1000 !important;
letter-spacing:-.045em !important;
}
body.storefront-theme-neon-pulse
.np-brand strong{
color:#c73cff !important;
background:none !important;
-webkit-text-fill-color:initial !important;
}
body.storefront-theme-neon-pulse
.np-brand span{
color:#ffffff !important;
}
body.storefront-theme-neon-pulse
.np-global-nav{
gap:22px !important;
}
body.storefront-theme-neon-pulse
.np-global-nav a{
font-size:10.5px !important;
font-weight:700 !important;
}
/* top icons */
body.storefront-theme-neon-pulse
.np-top-icon{
width:29px !important;
height:29px !important;
}
body.storefront-theme-neon-pulse
.np-top-icon svg{
width:18px !important;
height:18px !important;
}
body.storefront-theme-neon-pulse
.np-mini-avatar{
width:32px !important;
height:32px !important;
flex-basis:32px !important;
border:
2px solid #c143ff !important;
border-radius:
50% !important;
}
/* ---------------------------------------------------------
HERO / PROFILE AREA
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-hero{
height:205px !important;
}
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:140px !important;
grid-template-columns:
minmax(0,1fr)
430px !important;
padding:
20px 24px
18px 190px !important;
}
body.storefront-theme-neon-pulse
.np-avatar{
left:28px !important;
top:-72px !important;
width:150px !important;
height:150px !important;
z-index:50 !important;
border:
3px solid #bd40ff !important;
box-shadow:
0 0 0 4px rgba(117,41,255,.17),
0 0 26px rgba(190,52,255,.20),
0 18px 34px rgba(0,0,0,.52) !important;
}
/* identity */
body.storefront-theme-neon-pulse
.np-identity h1{
font-size:27px !important;
}
body.storefront-theme-neon-pulse
.np-identity-meta{
font-size:11px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
font-size:11.5px !important;
}
body.storefront-theme-neon-pulse
.np-social{
width:22px !important;
height:22px !important;
}
body.storefront-theme-neon-pulse
.np-social svg{
width:18px !important;
height:18px !important;
}
/* ---------------------------------------------------------
ACTIONS / STATS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-width:128px !important;
min-height:37px !important;
font-size:12px !important;
border-radius:4px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,82px) !important;
gap:15px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:20px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:10px !important;
}
body.storefront-theme-neon-pulse
.np-rating-coming{
color:#8f9aae !important;
font-size:12px !important;
letter-spacing:.04em !important;
}
/* ---------------------------------------------------------
TAB SYSTEM
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
gap:13px !important;
padding:0 22px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
padding:
0 18px !important;
color:
#cad2df !important;
font-size:
11px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button svg{
width:15px !important;
height:15px !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.7 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
body.storefront-theme-neon-pulse
.np-tabs button.active{
color:#e34bff !important;
}
body.storefront-theme-neon-pulse
.np-tabs button.active span{
color:#ffffff !important;
}
body.storefront-theme-neon-pulse
.np-tabs button.active::after{
left:8px !important;
right:8px !important;
height:2px !important;
background:
linear-gradient(
90deg,
#df39dd,
#773aff
) !important;
}
/* ---------------------------------------------------------
TRACK SECTION TYPOGRAPHY
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:20px !important;
}
body.storefront-theme-neon-pulse
.np-track-search input,
body.storefront-theme-neon-pulse
.np-track-filters select{
font-size:11px !important;
}
/* ---------------------------------------------------------
TRACK ROW PROPORTIONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
min-height:59px !important;
grid-template-columns:
46px
34px
minmax(220px,1fr)
minmax(190px,250px)
40px
36px
92px
30px !important;
gap:9px !important;
}
/* ---------------------------------------------------------
COMPLETELY REMOVE RED PLAY CONTROL
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
button.np-track-play,
body.storefront-theme-neon-pulse
.np-track-row button.np-track-play,
body.storefront-theme-neon-pulse
.np-track-row:not(.playing) button.np-track-play{
width:31px !important;
height:31px !important;
min-width:31px !important;
min-height:31px !important;
padding:0 !important;
margin:0 !important;
display:grid !important;
place-items:center !important;
appearance:none !important;
-webkit-appearance:none !important;
border:
1px solid #8794a8 !important;
border-radius:
999px !important;
outline:
0 !important;
background:
#172538 !important;
background-image:
none !important;
color:
#ffffff !important;
box-shadow:
none !important;
filter:
none !important;
font-size:
11px !important;
line-height:
1 !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
button.np-track-play{
border-color:
#ad5aff !important;
background:
#1d2a40 !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
button.np-track-play{
border-color:
#d058ff !important;
background:
linear-gradient(
135deg,
#6e36e9,
#be31ff
) !important;
box-shadow:
0 0 12px rgba(170,48,255,.18) !important;
}
/* ---------------------------------------------------------
REAL CONTINUOUS WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave{
width:100% !important;
height:30px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:
transparent !important;
box-shadow:
none !important;
overflow:
hidden !important;
}
body.storefront-theme-neon-pulse
.np-wave-svg{
display:block !important;
width:100% !important;
height:30px !important;
overflow:visible !important;
}
body.storefront-theme-neon-pulse
.np-wave-shape{
fill:
rgba(108,121,143,.46) !important;
stroke:
#77859a !important;
stroke-width:
.55 !important;
vector-effect:
non-scaling-stroke !important;
}
body.storefront-theme-neon-pulse
.np-wave-center{
stroke:
rgba(110,123,144,.28) !important;
stroke-width:
.5 !important;
vector-effect:
non-scaling-stroke !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-wave-shape{
fill:
rgba(129,143,167,.52) !important;
stroke:
#8a98ad !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-wave-shape{
fill:
rgba(142,94,193,.40) !important;
stroke:
#9788b8 !important;
}
/* ---------------------------------------------------------
SUBTLE ACTIVE TRACK
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(77,36,122,.24),
rgba(10,19,34,.97) 28%,
rgba(7,15,28,.97)
) !important;
box-shadow:
inset 2px 0 0 #a33cff !important;
}
/* ---------------------------------------------------------
TRACK TEXT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:13.5px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
color:#8996aa !important;
font-size:10px !important;
}
/* ---------------------------------------------------------
HEART + MENU POLISH
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-heart,
body.storefront-theme-neon-pulse
.np-track-more{
width:29px !important;
height:29px !important;
display:grid !important;
place-items:center !important;
padding:0 !important;
border:0 !important;
border-radius:50% !important;
background:
transparent !important;
color:
#e7ebf3 !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-heart{
font-size:19px !important;
}
body.storefront-theme-neon-pulse
.np-track-more{
font-size:19px !important;
}
body.storefront-theme-neon-pulse
.np-track-heart:hover,
body.storefront-theme-neon-pulse
.np-track-more:hover{
background:
rgba(111,59,171,.18) !important;
color:
#d44dff !important;
}
/* ---------------------------------------------------------
PRICE CONTROL
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:92px !important;
min-width:92px !important;
min-height:38px !important;
border-radius:4px !important;
background:
linear-gradient(
100deg,
#693aff,
#a931ff 55%,
#c52bff
) !important;
color:#ffffff !important;
font-size:12px !important;
font-weight:900 !important;
box-shadow:
0 3px 12px rgba(111,44,239,.12) !important;
}
body.storefront-theme-neon-pulse
.np-track-price:hover{
filter:
brightness(1.08) !important;
}
/* ---------------------------------------------------------
TRACK SCROLL — HIDE HEAVY SCROLLBAR
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-list{
scrollbar-width:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-list::-webkit-scrollbar{
width:0 !important;
height:0 !important;
}
/* ---------------------------------------------------------
PANEL SPACING
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-panel{
padding:
19px 20px 20px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools{
margin-bottom:
11px !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-avatar{
width:146px !important;
height:146px !important;
}
body.storefront-theme-neon-pulse
.np-identity h1{
font-size:24px !important;
}
body.storefront-theme-neon-pulse
.np-tabs{
gap:0 !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
padding:
0 13px !important;
}
}
/* END NEON PULSE FIDELITY PASS #3 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — REAL OSBEATS WAVEFORM PASS
========================================================= */
/* ---------------------------------------------------------
USE THE EXISTING APPROVED OSBEATS WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave{
width:100% !important;
height:30px !important;
display:flex !important;
align-items:center !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:hidden !important;
}
body.storefront-theme-neon-pulse
.np-real-waveform-host{
display:block !important;
width:100% !important;
height:28px !important;
overflow:hidden !important;
pointer-events:none !important;
}
body.storefront-theme-neon-pulse
.np-osbeats-real-wave-svg{
display:block !important;
width:100% !important;
height:28px !important;
overflow:visible !important;
}
body.storefront-theme-neon-pulse
.np-osbeats-real-wave-gray,
body.storefront-theme-neon-pulse
.np-osbeats-real-wave-gray *{
fill:#657286 !important;
stroke:#78869a !important;
stroke-width:.35 !important;
opacity:.82 !important;
}
/* preserve the dense OSBeats waveform silhouette */
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-osbeats-real-wave-gray,
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-osbeats-real-wave-gray *{
fill:#738198 !important;
stroke:#8795aa !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-osbeats-real-wave-gray,
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-osbeats-real-wave-gray *{
fill:#81769d !important;
stroke:#9589ad !important;
}
/* disable all experimental Neon Pulse waveform versions */
body.storefront-theme-neon-pulse
.np-wave-svg,
body.storefront-theme-neon-pulse
.np-wave-shape,
body.storefront-theme-neon-pulse
.np-wave-bars,
body.storefront-theme-neon-pulse
.np-wave-bar,
body.storefront-theme-neon-pulse
.np-wave-fill,
body.storefront-theme-neon-pulse
.np-wave-line,
body.storefront-theme-neon-pulse
.np-wave-center{
display:none !important;
}
body.storefront-theme-neon-pulse
.np-waveform-unavailable{
display:block !important;
width:100% !important;
height:1px !important;
background:#566277 !important;
opacity:.45 !important;
}
/* ---------------------------------------------------------
PLAY BUTTON — NEON PULSE ONLY, NO LEGACY RED
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
button.np-track-play,
body.storefront-theme-neon-pulse
.np-track-row button.np-track-play{
width:32px !important;
height:32px !important;
min-width:32px !important;
min-height:32px !important;
padding:0 !important;
border:
1px solid #8190a6 !important;
border-radius:
50% !important;
background:
linear-gradient(
145deg,
#19293d,
#101b2b
) !important;
background-image:
linear-gradient(
145deg,
#19293d,
#101b2b
) !important;
color:#ffffff !important;
box-shadow:none !important;
filter:none !important;
appearance:none !important;
-webkit-appearance:none !important;
font-size:11px !important;
text-indent:1px !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
button.np-track-play{
border-color:#a957ff !important;
background:
#1c2d43 !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
button.np-track-play{
border-color:#d15cff !important;
background:
linear-gradient(
135deg,
#7038eb,
#b734ff
) !important;
box-shadow:
0 0 12px
rgba(173,54,255,.18) !important;
}
/* ---------------------------------------------------------
ACTIVE TRACK — SUBTLE, LIKE APPROVED MOCKUP
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(89,39,137,.14),
rgba(9,18,32,.98) 22%,
rgba(7,15,28,.98)
) !important;
box-shadow:
inset 2px 0 0
#9d3dff !important;
}
/* ---------------------------------------------------------
TRACK ROW PROPORTIONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
min-height:61px !important;
grid-template-columns:
46px
36px
minmax(240px,1fr)
minmax(210px,270px)
40px
38px
92px
30px !important;
gap:10px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:14px !important;
line-height:1.25 !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
margin-top:3px !important;
color:#8996ab !important;
font-size:10px !important;
}
/* ---------------------------------------------------------
PRICE BUTTON REFINEMENT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:92px !important;
min-width:92px !important;
min-height:38px !important;
border-radius:4px !important;
background:
linear-gradient(
100deg,
#673cff,
#9833ff 55%,
#bd2cff
) !important;
color:#fff !important;
font-size:12px !important;
font-weight:900 !important;
box-shadow:
0 3px 10px
rgba(101,49,215,.12) !important;
}
/* ---------------------------------------------------------
HEADER / NAV FINAL TUNING
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-topbar{
min-height:52px !important;
}
body.storefront-theme-neon-pulse
.np-brand{
font-size:20px !important;
}
body.storefront-theme-neon-pulse
.np-global-nav a{
font-size:11px !important;
}
body.storefront-theme-neon-pulse
.np-top-icon{
width:30px !important;
height:30px !important;
}
body.storefront-theme-neon-pulse
.np-top-icon svg{
width:19px !important;
height:19px !important;
}
body.storefront-theme-neon-pulse
.np-mini-avatar{
width:34px !important;
height:34px !important;
flex:
0 0 34px !important;
border-radius:50% !important;
}
/* ---------------------------------------------------------
PROFILE AREA FINAL TUNING
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:146px !important;
padding:
20px 24px
18px 194px !important;
}
body.storefront-theme-neon-pulse
.np-avatar{
left:28px !important;
top:-76px !important;
width:158px !important;
height:158px !important;
z-index:60 !important;
}
body.storefront-theme-neon-pulse
.np-identity h1{
font-size:28px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
font-size:12px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:21px !important;
}
/* ---------------------------------------------------------
TABS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
gap:16px !important;
padding:
0 22px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
font-size:
11.5px !important;
}
/* ---------------------------------------------------------
OUTER FRAME
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-shell{
box-shadow:
0 0 18px rgba(110,56,255,.055),
0 20px 48px rgba(0,0,0,.38) !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-avatar{
width:150px !important;
height:150px !important;
top:-72px !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
min-height:58px !important;
}
}
/* END NEON PULSE REAL OSBEATS WAVEFORM PASS */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FIDELITY PASS #5
Approved waveform + verified badge + final visual tuning
========================================================= */
/* ---------------------------------------------------------
APPROVED OSBEATS WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave{
width:100% !important;
height:34px !important;
display:flex !important;
align-items:center !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
background:
transparent !important;
box-shadow:
none !important;
overflow:
hidden !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-svg{
display:block !important;
width:100% !important;
height:34px !important;
overflow:
visible !important;
shape-rendering:
geometricPrecision !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-path{
fill:
#626f82 !important;
stroke:
none !important;
opacity:
.88 !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-approved-wave-path{
fill:
#748195 !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-approved-wave-path{
fill:
#85779f !important;
}
/* kill every previous Neon Pulse waveform experiment */
body.storefront-theme-neon-pulse
.np-real-waveform-host,
body.storefront-theme-neon-pulse
.np-osbeats-real-wave-svg,
body.storefront-theme-neon-pulse
.np-osbeats-real-wave-gray,
body.storefront-theme-neon-pulse
.np-wave-svg,
body.storefront-theme-neon-pulse
.np-wave-shape,
body.storefront-theme-neon-pulse
.np-wave-bars,
body.storefront-theme-neon-pulse
.np-wave-bar,
body.storefront-theme-neon-pulse
.np-wave-fill,
body.storefront-theme-neon-pulse
.np-wave-line,
body.storefront-theme-neon-pulse
.np-wave-center,
body.storefront-theme-neon-pulse
.np-waveform-unavailable{
display:none !important;
}
/* ---------------------------------------------------------
VERIFIED BADGE — ROUNDED SQUIRCLE, NOT PERFECT CIRCLE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-verified{
width:18px !important;
height:18px !important;
display:inline-grid !important;
place-items:center !important;
flex:
0 0 18px !important;
padding:0 !important;
border:
0 !important;
border-radius:
5px !important;
background:
linear-gradient(
145deg,
#2895ff,
#1878e8
) !important;
color:
#ffffff !important;
font-size:
11px !important;
font-weight:
1000 !important;
line-height:
1 !important;
box-shadow:
0 1px 4px
rgba(24,120,232,.28) !important;
transform:
translateY(-1px) !important;
}
/* ---------------------------------------------------------
ARTIST NAME ROW
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-identity h1{
display:flex !important;
align-items:center !important;
gap:
8px !important;
font-size:
28px !important;
letter-spacing:
-.4px !important;
}
/* ---------------------------------------------------------
PROFILE AVATAR RING / OVERLAP
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-avatar{
width:
158px !important;
height:
158px !important;
left:
28px !important;
top:
-76px !important;
border:
3px solid #b844ff !important;
outline:
4px solid rgba(115,49,255,.13) !important;
border-radius:
50% !important;
box-shadow:
0 0 18px rgba(179,58,255,.16),
0 16px 34px rgba(0,0,0,.46) !important;
}
/* ---------------------------------------------------------
SOCIAL ICON ROW
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-social-row{
gap:
11px !important;
margin-top:
3px !important;
}
body.storefront-theme-neon-pulse
.np-social{
width:
21px !important;
height:
21px !important;
color:
#f1f4fa !important;
}
body.storefront-theme-neon-pulse
.np-social svg{
width:
17px !important;
height:
17px !important;
stroke-width:
1.65 !important;
}
/* ---------------------------------------------------------
FOLLOW / MESSAGE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-action-buttons{
gap:
10px !important;
}
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-width:
128px !important;
min-height:
38px !important;
font-size:
12px !important;
font-weight:
800 !important;
}
/* ---------------------------------------------------------
STATS BALANCE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,78px) !important;
gap:
17px !important;
justify-content:
end !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
20px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:
10px !important;
}
/* Rating is not built yet — keep placeholder visually quiet */
body.storefront-theme-neon-pulse
.np-rating-stat
.np-rating-coming{
color:
#8b96aa !important;
font-size:
12px !important;
font-weight:
700 !important;
letter-spacing:
.02em !important;
}
/* ---------------------------------------------------------
HEADER / NAV REFINEMENT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-topbar{
min-height:
52px !important;
padding:
0 18px !important;
}
body.storefront-theme-neon-pulse
.np-brand{
font-size:
20px !important;
}
body.storefront-theme-neon-pulse
.np-global-nav{
gap:
22px !important;
}
body.storefront-theme-neon-pulse
.np-global-nav a{
font-size:
11px !important;
font-weight:
700 !important;
}
body.storefront-theme-neon-pulse
.np-top-icons{
gap:
8px !important;
}
body.storefront-theme-neon-pulse
.np-top-icon svg{
width:
19px !important;
height:
19px !important;
}
body.storefront-theme-neon-pulse
.np-mini-avatar{
width:
34px !important;
height:
34px !important;
flex:
0 0 34px !important;
border:
2px solid #b742ff !important;
border-radius:
50% !important;
box-shadow:
0 0 9px rgba(183,66,255,.15) !important;
}
/* ---------------------------------------------------------
TABS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
gap:
18px !important;
padding:
0 22px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
min-height:
51px !important;
padding:
0 18px !important;
font-size:
11.5px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button svg{
width:
16px !important;
height:
16px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button.active::after{
left:
7px !important;
right:
7px !important;
height:
2px !important;
}
/* ---------------------------------------------------------
TRACK LIST FINAL BALANCE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
62px !important;
grid-template-columns:
46px
36px
minmax(240px,1fr)
minmax(220px,285px)
40px
38px
92px
30px !important;
gap:
10px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:
14px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
margin-top:
3px !important;
font-size:
10px !important;
}
/* ---------------------------------------------------------
PLAY BUTTON
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
button.np-track-play{
width:
32px !important;
height:
32px !important;
min-width:
32px !important;
min-height:
32px !important;
border:
1px solid #8491a5 !important;
border-radius:
50% !important;
background:
linear-gradient(
145deg,
#19283b,
#111c2b
) !important;
background-image:
linear-gradient(
145deg,
#19283b,
#111c2b
) !important;
color:
#ffffff !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
button.np-track-play{
border-color:
#cc54ff !important;
background:
linear-gradient(
135deg,
#7139e9,
#b934ff
) !important;
box-shadow:
0 0 10px rgba(179,53,255,.14) !important;
}
/* ---------------------------------------------------------
PRICE CONTROL
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:
92px !important;
min-width:
92px !important;
min-height:
38px !important;
border-radius:
4px !important;
background:
linear-gradient(
100deg,
#673cff,
#9833ff 54%,
#bb2dff
) !important;
font-size:
12px !important;
}
/* ---------------------------------------------------------
TRACK HEADER / FILTERS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:
21px !important;
}
body.storefront-theme-neon-pulse
.np-track-search{
width:
310px !important;
height:
34px !important;
}
body.storefront-theme-neon-pulse
.np-track-filters select{
height:
34px !important;
}
/* ---------------------------------------------------------
FRAME / GLOW
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-shell{
box-shadow:
0 0 15px rgba(110,56,255,.05),
0 20px 48px rgba(0,0,0,.38) !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-avatar{
width:
150px !important;
height:
150px !important;
top:
-72px !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
58px !important;
}
}
/* END NEON PULSE FIDELITY PASS #5 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FIDELITY PASS #6
Profile alignment + waveform hover cleanup
========================================================= */
/* ---------------------------------------------------------
REMOVE ALL RED / BLACK WAVEFORM HOVER BACKGROUNDS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave,
body.storefront-theme-neon-pulse
.np-track-wave:hover,
body.storefront-theme-neon-pulse
.np-track-wave:focus,
body.storefront-theme-neon-pulse
.np-track-wave:focus-visible,
body.storefront-theme-neon-pulse
.np-track-wave:active,
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-track-wave,
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-track-wave{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
border:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* remove inherited pseudo-element hover effects */
body.storefront-theme-neon-pulse
.np-track-wave::before,
body.storefront-theme-neon-pulse
.np-track-wave::after,
body.storefront-theme-neon-pulse
.np-track-wave:hover::before,
body.storefront-theme-neon-pulse
.np-track-wave:hover::after{
content:
none !important;
display:
none !important;
background:
transparent !important;
box-shadow:
none !important;
}
/* approved waveform stays gray on every interaction state */
body.storefront-theme-neon-pulse
.np-approved-wave-path{
fill:
#657287 !important;
stroke:
none !important;
opacity:
.88 !important;
}
body.storefront-theme-neon-pulse
.np-track-wave:hover
.np-approved-wave-path,
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-approved-wave-path{
fill:
#748196 !important;
stroke:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-approved-wave-path{
fill:
#817792 !important;
stroke:
none !important;
}
/* center waveform better within row */
body.storefront-theme-neon-pulse
.np-track-wave{
height:
30px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-svg{
width:
100% !important;
height:
28px !important;
display:
block !important;
}
/* ---------------------------------------------------------
PROFILE PHOTO — SLIGHTLY HIGHER / LARGER
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-avatar{
left:
30px !important;
top:
-82px !important;
width:
164px !important;
height:
164px !important;
border:
3px solid #ba43ff !important;
outline:
4px solid rgba(118,47,255,.14) !important;
box-shadow:
0 0 18px rgba(184,58,255,.15),
0 18px 36px rgba(0,0,0,.48) !important;
}
/* ---------------------------------------------------------
MOVE ARTIST INFO BESIDE CENTER OF PROFILE PHOTO
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:
150px !important;
grid-template-columns:
minmax(0,1fr)
430px !important;
padding:
18px 24px
18px 208px !important;
}
body.storefront-theme-neon-pulse
.np-identity{
align-self:
center !important;
transform:
translateY(-34px) !important;
}
body.storefront-theme-neon-pulse
.np-identity h1{
margin:
0 0 4px !important;
font-size:
28px !important;
line-height:
1.05 !important;
}
body.storefront-theme-neon-pulse
.np-identity-meta{
font-size:
11px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
margin:
7px 0 9px !important;
font-size:
12px !important;
line-height:
1.4 !important;
}
body.storefront-theme-neon-pulse
.np-social-row{
margin-top:
2px !important;
gap:
11px !important;
}
/* ---------------------------------------------------------
FOLLOW / MESSAGE + STATS ALIGN WITH PROFILE BAND
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-actions{
align-self:
center !important;
transform:
translateY(-23px) !important;
gap:
17px !important;
}
body.storefront-theme-neon-pulse
.np-action-buttons{
justify-content:
flex-end !important;
gap:
10px !important;
}
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-width:
128px !important;
min-height:
38px !important;
}
/* ---------------------------------------------------------
STATS REFINEMENT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,78px) !important;
gap:
16px !important;
justify-content:
end !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
20px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
margin-top:
3px !important;
font-size:
10px !important;
}
/* rating remains honest but visually quiet */
body.storefront-theme-neon-pulse
.np-rating-coming{
display:
block !important;
color:
#8d98aa !important;
font-size:
9px !important;
font-weight:
700 !important;
line-height:
1.05 !important;
letter-spacing:
.02em !important;
white-space:
nowrap !important;
text-transform:
uppercase !important;
}
/* ---------------------------------------------------------
VERIFIED BADGE FINAL POLISH
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-verified{
width:
18px !important;
height:
18px !important;
flex:
0 0 18px !important;
border-radius:
5px !important;
background:
linear-gradient(
145deg,
#2a97ff,
#197ae8
) !important;
font-size:
11px !important;
box-shadow:
0 1px 4px rgba(25,122,232,.24) !important;
}
/* ---------------------------------------------------------
TAB POLISH
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
gap:
19px !important;
padding:
0 23px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
padding:
0 18px !important;
font-size:
11.5px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button.active::after{
left:
8px !important;
right:
8px !important;
height:
2px !important;
}
/* ---------------------------------------------------------
TRACK ROW TIGHTENING
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
60px !important;
grid-template-columns:
46px
35px
minmax(245px,1fr)
minmax(220px,285px)
38px
36px
92px
28px !important;
gap:
9px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:
14px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
font-size:
10px !important;
}
/* ---------------------------------------------------------
PRICE / HEART / MENU ALIGNMENT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:
92px !important;
min-width:
92px !important;
min-height:
38px !important;
}
body.storefront-theme-neon-pulse
.np-track-heart,
body.storefront-theme-neon-pulse
.np-track-more{
align-self:
center !important;
}
/* ---------------------------------------------------------
HEADER BRAND SLIGHTLY LIGHTER
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-brand{
font-size:
20px !important;
font-weight:
900 !important;
}
body.storefront-theme-neon-pulse
.np-brand strong{
color:
#c13dff !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-avatar{
width:
152px !important;
height:
152px !important;
top:
-74px !important;
}
body.storefront-theme-neon-pulse
.np-identity,
body.storefront-theme-neon-pulse
.np-profile-actions{
transform:
none !important;
}
body.storefront-theme-neon-pulse
.np-profile-strip{
padding:
84px 16px
18px !important;
}
}
/* END NEON PULSE FIDELITY PASS #6 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FIDELITY PASS #7
Final profile / track proportion polish
========================================================= */
/* ---------------------------------------------------------
PROFILE BAND
Preserve the approved horizontal alignment but remove
unnecessary empty vertical space below it.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:
126px !important;
padding:
13px 24px
8px 208px !important;
}
/*
Keep artist information aligned beside the vertical
center of the circular profile photo.
*/
body.storefront-theme-neon-pulse
.np-identity{
transform:
translateY(-30px) !important;
}
body.storefront-theme-neon-pulse
.np-profile-actions{
transform:
translateY(-19px) !important;
gap:
15px !important;
}
/* Keep avatar where it now visually matches the mockup */
body.storefront-theme-neon-pulse
.np-avatar{
left:
30px !important;
top:
-82px !important;
width:
164px !important;
height:
164px !important;
}
/* ---------------------------------------------------------
STATS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,76px) !important;
gap:
15px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
20px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:
9.5px !important;
}
/* Rating feature is deferred */
body.storefront-theme-neon-pulse
.np-rating-coming{
color:
#8c97a9 !important;
font-size:
10px !important;
font-weight:
700 !important;
text-transform:
none !important;
letter-spacing:
0 !important;
}
/* ---------------------------------------------------------
TAB BAND
Pull tabs closer to the profile information like mockup.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
min-height:
48px !important;
gap:
16px !important;
padding:
0 22px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
min-height:
48px !important;
padding:
0 17px !important;
font-size:
11px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button svg{
width:
15px !important;
height:
15px !important;
}
/* ---------------------------------------------------------
TRACK CONTENT AREA
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-panel{
padding:
17px 20px
18px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools{
margin-bottom:
9px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:
20px !important;
}
/* ---------------------------------------------------------
TRACK ROW PROPORTIONS
Reduce waveform width to match approved layout better.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
58px !important;
grid-template-columns:
44px
34px
minmax(260px,1fr)
minmax(175px,220px)
36px
34px
84px
26px !important;
gap:
9px !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:
44px !important;
height:
44px !important;
}
body.storefront-theme-neon-pulse
button.np-track-play{
width:
31px !important;
height:
31px !important;
min-width:
31px !important;
min-height:
31px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:
13.5px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
margin-top:
2px !important;
font-size:
9.5px !important;
}
/* ---------------------------------------------------------
APPROVED WAVEFORM FINAL SCALE / COLOR
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave,
body.storefront-theme-neon-pulse
.np-track-wave:hover,
body.storefront-theme-neon-pulse
.np-track-wave:focus,
body.storefront-theme-neon-pulse
.np-track-wave:active{
height:
28px !important;
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
border:
0 !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-svg{
width:
100% !important;
height:
27px !important;
transform-origin:
center center !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-path{
fill:
#758296 !important;
stroke:
none !important;
opacity:
.92 !important;
}
/*
The approved OSBeats path stays authoritative.
Small amplitude differences prevent every track from
looking like an identical copied waveform.
*/
body.storefront-theme-neon-pulse
.np-track-row:nth-child(2n)
.np-approved-wave-svg{
transform:
scaleY(.82) !important;
}
body.storefront-theme-neon-pulse
.np-track-row:nth-child(3n)
.np-approved-wave-svg{
transform:
scaleY(1.08) !important;
}
body.storefront-theme-neon-pulse
.np-track-row:nth-child(4n)
.np-approved-wave-svg{
transform:
scaleY(.92) !important;
}
body.storefront-theme-neon-pulse
.np-track-row:nth-child(5n)
.np-approved-wave-svg{
transform:
scaleY(1.14) !important;
}
/* no red background or progress color on hover */
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-track-wave,
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-track-wave{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-approved-wave-path{
fill:
#8290a3 !important;
}
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-approved-wave-path{
fill:
#897c9d !important;
}
/* ---------------------------------------------------------
ACTIVE TRACK
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(86,37,133,.12),
rgba(9,18,32,.98) 20%,
rgba(7,15,28,.98)
) !important;
box-shadow:
inset 2px 0 0
#9f3dff !important;
}
/* ---------------------------------------------------------
PRICE BUTTONS
Slightly smaller like the approved mockup.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:
84px !important;
min-width:
84px !important;
min-height:
36px !important;
padding:
0 8px !important;
font-size:
11.5px !important;
}
/* ---------------------------------------------------------
FAVORITE / MENU
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-heart,
body.storefront-theme-neon-pulse
.np-track-more{
width:
27px !important;
height:
27px !important;
}
/* ---------------------------------------------------------
FILTER BAR
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-search{
width:
300px !important;
height:
33px !important;
}
body.storefront-theme-neon-pulse
.np-track-filters select{
height:
33px !important;
}
/* ---------------------------------------------------------
MOBILE SAFETY
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:
0 !important;
padding:
84px 16px
18px !important;
}
body.storefront-theme-neon-pulse
.np-identity,
body.storefront-theme-neon-pulse
.np-profile-actions{
transform:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
56px !important;
}
}
/* END NEON PULSE FIDELITY PASS #7 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FINAL LOCK POLISH
========================================================= */
/* ---------------------------------------------------------
PROFILE BAND — REMOVE REMAINING EXCESS HEIGHT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:
116px !important;
padding:
10px 24px
6px 208px !important;
}
/*
Preserve the approved horizontal alignment.
Only slightly rebalance vertical position after
shortening the profile strip.
*/
body.storefront-theme-neon-pulse
.np-identity{
transform:
translateY(-25px) !important;
}
body.storefront-theme-neon-pulse
.np-profile-actions{
transform:
translateY(-14px) !important;
gap:
14px !important;
}
/* ---------------------------------------------------------
FOLLOW / MESSAGE — CLOSER TO MOCKUP PROPORTIONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-width:
120px !important;
min-height:
36px !important;
font-size:
11.5px !important;
}
/* ---------------------------------------------------------
STATS — SLIGHTLY TIGHTER
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-inline-stats{
grid-template-columns:
repeat(4,74px) !important;
gap:
14px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
19px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:
9px !important;
}
/* ---------------------------------------------------------
RATING PLACEHOLDER — KEEP SUBTLE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-rating-coming{
color:
#8894a8 !important;
font-size:
9px !important;
font-weight:
700 !important;
}
/* ---------------------------------------------------------
TAB BAND — FINAL TIGHTENING
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
min-height:
46px !important;
gap:
15px !important;
padding:
0 20px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
min-height:
46px !important;
padding:
0 16px !important;
font-size:
11px !important;
}
/* ---------------------------------------------------------
TRACK PANEL
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-panel{
padding:
15px 19px
17px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools{
margin-bottom:
8px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:
19px !important;
}
/* ---------------------------------------------------------
TRACK ROWS — FINAL PROPORTIONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
57px !important;
grid-template-columns:
44px
34px
minmax(260px,1fr)
minmax(180px,220px)
36px
34px
82px
26px !important;
gap:
8px !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:
44px !important;
height:
44px !important;
}
body.storefront-theme-neon-pulse
button.np-track-play{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:
13.3px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
font-size:
9.3px !important;
}
/* ---------------------------------------------------------
APPROVED WAVEFORM — MORE VISIBLE, STILL CLEAN
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave,
body.storefront-theme-neon-pulse
.np-track-wave:hover,
body.storefront-theme-neon-pulse
.np-track-wave:focus,
body.storefront-theme-neon-pulse
.np-track-wave:active{
height:
29px !important;
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
border:
0 !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-svg{
width:
100% !important;
height:
29px !important;
transform-origin:
center center !important;
}
/*
Slightly stronger than the previous pass,
matching the visibility of the approved mockup.
*/
body.storefront-theme-neon-pulse
.np-approved-wave-path{
fill:
#7a879b !important;
stroke:
none !important;
opacity:
.96 !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-approved-wave-path{
fill:
#8794a8 !important;
opacity:
1 !important;
}
/*
Absolutely no red/black hover background.
*/
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-track-wave,
body.storefront-theme-neon-pulse
.np-track-row.playing
.np-track-wave{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
PRICE BUTTON — FINAL MOCKUP SCALE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:
82px !important;
min-width:
82px !important;
min-height:
35px !important;
padding:
0 7px !important;
font-size:
11px !important;
border-radius:
4px !important;
}
/* ---------------------------------------------------------
HEART / MENU
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-heart,
body.storefront-theme-neon-pulse
.np-track-more{
width:
26px !important;
height:
26px !important;
}
/* ---------------------------------------------------------
SEARCH / FILTERS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-search{
width:
290px !important;
height:
32px !important;
}
body.storefront-theme-neon-pulse
.np-track-filters select{
height:
32px !important;
}
/* ---------------------------------------------------------
FINAL FRAME
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-shell{
box-shadow:
0 0 12px rgba(111,57,255,.045),
0 18px 44px rgba(0,0,0,.36) !important;
}
/* ---------------------------------------------------------
MOBILE SAFETY
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.np-profile-strip{
min-height:
0 !important;
padding:
84px 16px
18px !important;
}
body.storefront-theme-neon-pulse
.np-identity,
body.storefront-theme-neon-pulse
.np-profile-actions{
transform:
none !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
min-height:
55px !important;
}
}
/* END NEON PULSE FINAL LOCK POLISH */
/* =========================================================
OSBEATS 20260909 NEON PULSE — FOOTER / PAGE HEIGHT LOCK
========================================================= */
/* ---------------------------------------------------------
REMOVE LEGACY EXTRA SPACE BELOW THE THEME
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.storefront{
min-height:
0 !important;
padding-bottom:
0 !important;
margin-bottom:
0 !important;
}
body.storefront-theme-neon-pulse
.np-theme-stage{
margin-bottom:
0 !important;
padding-bottom:
0 !important;
}
/*
Prevent legacy layout wrappers from reserving unnecessary
vertical space after the Neon Pulse storefront.
*/
body.storefront-theme-neon-pulse
main,
body.storefront-theme-neon-pulse
main.storefront,
body.storefront-theme-neon-pulse
#storefront{
min-height:
0 !important;
margin-bottom:
0 !important;
}
/* ---------------------------------------------------------
GLOBAL FOOTER — SIT DIRECTLY BELOW NEON PULSE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.site-footer{
margin-top:
0 !important;
padding-top:
0 !important;
border-top:
1px solid #6f39d9 !important;
background:
#050912 !important;
box-shadow:
0 -1px 10px rgba(105,54,216,.06) !important;
}
/*
Some legacy footer shells use their own top margin.
*/
body.storefront-theme-neon-pulse
footer,
body.storefront-theme-neon-pulse
footer.site-footer{
margin-top:
0 !important;
}
/* ---------------------------------------------------------
REMOVE LEGACY RED FOOTER DIVIDER IN THIS THEME
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.site-footer::before,
body.storefront-theme-neon-pulse
.site-footer::after{
background:
transparent !important;
border-color:
transparent !important;
}
/* ---------------------------------------------------------
KEEP TRACK CATALOG CLEAN AT ITS BOTTOM EDGE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-list{
margin-bottom:
0 !important;
}
body.storefront-theme-neon-pulse
.np-panel{
margin-bottom:
0 !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-neon-pulse
.storefront,
body.storefront-theme-neon-pulse
.np-theme-stage{
margin-bottom:
0 !important;
padding-bottom:
0 !important;
}
}
/* END NEON PULSE FOOTER / PAGE HEIGHT LOCK */
/* =========================================================
OSBEATS 20260909 NEON PULSE — DESKTOP LOCK
Duration + footer edge
========================================================= */
/* ---------------------------------------------------------
TRACK DURATION
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-duration{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:38px !important;
color:#c4ccd8 !important;
font-size:9.5px !important;
font-weight:600 !important;
white-space:nowrap !important;
}
/*
Give duration enough room without changing the rest
of the now-approved desktop track layout.
*/
body.storefront-theme-neon-pulse
.np-track-row{
grid-template-columns:
44px
34px
minmax(260px,1fr)
minmax(180px,220px)
42px
34px
82px
26px !important;
}
/* ---------------------------------------------------------
FOOTER TOP EDGE
Remove remaining OSBeats red divider while inside
Neon Pulse preview/theme.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
footer,
body.storefront-theme-neon-pulse
.site-footer,
body.storefront-theme-neon-pulse
.global-footer,
body.storefront-theme-neon-pulse
#siteFooter{
border-top:
1px solid rgba(111,67,210,.72) !important;
border-top-color:
rgba(111,67,210,.72) !important;
}
body.storefront-theme-neon-pulse
footer::before,
body.storefront-theme-neon-pulse
footer::after,
body.storefront-theme-neon-pulse
.site-footer::before,
body.storefront-theme-neon-pulse
.site-footer::after{
background:
transparent !important;
background-image:
none !important;
border-top-color:
transparent !important;
box-shadow:
none !important;
}
/* END NEON PULSE DESKTOP LOCK */
/* =========================================================
OSBEATS 20260909 NEON PULSE — MOBILE FIDELITY PASS #1
430px responsive rebuild
========================================================= */
/* ---------------------------------------------------------
NEON PULSE DOES NOT USE THE OLD PROFILE TAB STRIP
Prevent duplicate Music / Bundles / About navigation.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse
.storefront > .store-tabs,
body.storefront-theme-neon-pulse
#osbeats-theme-nav{
display:none !important;
}
/* =========================================================
PHONE LAYOUT
========================================================= */
@media(max-width:560px){
/* -------------------------------------------------------
PAGE / THEME WIDTH SAFETY
------------------------------------------------------- */
body.storefront-theme-neon-pulse{
overflow-x:hidden !important;
}
body.storefront-theme-neon-pulse
.np-theme-stage,
body.storefront-theme-neon-pulse
.np-shell{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box !important;
}
body.storefront-theme-neon-pulse
.np-shell{
overflow:hidden !important;
}
/* -------------------------------------------------------
PREVIEW NOTICE
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.storefront-theme-preview-bar{
width:100% !important;
margin:
0 0 10px !important;
padding:
10px 12px !important;
box-sizing:
border-box !important;
font-size:
12px !important;
line-height:
1.25 !important;
}
/* -------------------------------------------------------
MOBILE HEADER
Brand + icons first row
Search full-width second row
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-topbar{
display:grid !important;
grid-template-columns:
auto minmax(0,1fr) auto !important;
grid-template-areas:
"brand spacer icons"
"search search search" !important;
align-items:center !important;
column-gap:
8px !important;
row-gap:
8px !important;
min-height:
0 !important;
padding:
9px 12px 10px !important;
box-sizing:
border-box !important;
}
body.storefront-theme-neon-pulse
.np-brand{
grid-area:
brand !important;
min-width:
0 !important;
font-size:
18px !important;
white-space:
nowrap !important;
}
body.storefront-theme-neon-pulse
.np-global-nav{
display:none !important;
}
body.storefront-theme-neon-pulse
.np-top-icons{
grid-area:
icons !important;
justify-self:
end !important;
display:flex !important;
align-items:center !important;
gap:
5px !important;
min-width:
max-content !important;
}
body.storefront-theme-neon-pulse
.np-top-icon{
width:
28px !important;
height:
28px !important;
flex:
0 0 28px !important;
}
body.storefront-theme-neon-pulse
.np-top-icon svg{
width:
17px !important;
height:
17px !important;
}
body.storefront-theme-neon-pulse
.np-mini-avatar{
width:
30px !important;
height:
30px !important;
flex:
0 0 30px !important;
}
body.storefront-theme-neon-pulse
.np-global-search{
grid-area:
search !important;
width:
100% !important;
max-width:
none !important;
min-width:
0 !important;
height:
34px !important;
margin:
0 !important;
}
body.storefront-theme-neon-pulse
.np-global-search input{
width:
100% !important;
min-width:
0 !important;
height:
34px !important;
box-sizing:
border-box !important;
font-size:
11px !important;
}
/* -------------------------------------------------------
MOBILE HERO
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-hero{
height:
158px !important;
min-height:
158px !important;
background-position:
center center !important;
}
/* -------------------------------------------------------
PROFILE STRIP
Explicit phone layout — do not inherit desktop offsets.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
position:relative !important;
display:block !important;
width:100% !important;
min-height:0 !important;
padding:
82px 16px 18px !important;
box-sizing:
border-box !important;
text-align:
center !important;
overflow:
visible !important;
}
/* Fully center avatar; no left-edge clipping */
body.storefront-theme-neon-pulse
.np-avatar{
position:absolute !important;
left:
50% !important;
right:
auto !important;
top:
-70px !important;
width:
140px !important;
height:
140px !important;
margin:
0 !important;
transform:
translateX(-50%) !important;
border:
3px solid #b944ff !important;
outline:
4px solid rgba(119,48,255,.13) !important;
border-radius:
50% !important;
z-index:
30 !important;
}
/* -------------------------------------------------------
ARTIST IDENTITY
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-identity{
width:
100% !important;
margin:
0 !important;
padding:
0 !important;
transform:
none !important;
text-align:
center !important;
}
body.storefront-theme-neon-pulse
.np-identity h1{
justify-content:
center !important;
margin:
0 0 5px !important;
font-size:
25px !important;
line-height:
1.1 !important;
}
body.storefront-theme-neon-pulse
.np-identity-meta{
justify-content:
center !important;
text-align:
center !important;
font-size:
10.5px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
margin:
7px 0 9px !important;
text-align:
center !important;
font-size:
11px !important;
}
body.storefront-theme-neon-pulse
.np-social-row{
justify-content:
center !important;
margin-top:
9px !important;
gap:
13px !important;
}
body.storefront-theme-neon-pulse
.np-social{
width:
22px !important;
height:
22px !important;
}
/* -------------------------------------------------------
FOLLOW / MESSAGE + STATS
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-actions{
width:
100% !important;
margin:
24px 0 0 !important;
padding:
0 !important;
transform:
none !important;
}
body.storefront-theme-neon-pulse
.np-action-buttons{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:
10px !important;
width:
100% !important;
}
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
width:
100% !important;
min-width:
0 !important;
min-height:
38px !important;
margin:
0 !important;
font-size:
11.5px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:
4px !important;
width:
100% !important;
margin:
20px 0 0 !important;
padding:
0 !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats article{
min-width:
0 !important;
text-align:
center !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
18px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:
8.5px !important;
}
body.storefront-theme-neon-pulse
.np-rating-coming{
font-size:
8.5px !important;
}
/* -------------------------------------------------------
FIVE NEON PULSE TABS MUST ALL FIT THE PHONE
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
display:grid !important;
grid-template-columns:
repeat(5,minmax(0,1fr)) !important;
gap:
0 !important;
width:
100% !important;
min-height:
48px !important;
padding:
0 4px !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
width:
100% !important;
min-width:
0 !important;
min-height:
48px !important;
padding:
0 2px !important;
gap:
4px !important;
font-size:
9.5px !important;
white-space:
nowrap !important;
}
body.storefront-theme-neon-pulse
.np-tabs button svg{
width:
13px !important;
height:
13px !important;
flex:
0 0 13px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button.active::after{
left:
7px !important;
right:
7px !important;
}
/* -------------------------------------------------------
TRACK PANEL
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-panel{
width:
100% !important;
padding:
14px 12px 16px !important;
box-sizing:
border-box !important;
}
body.storefront-theme-neon-pulse
.np-track-tools{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:
8px !important;
width:
100% !important;
margin-bottom:
10px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools h2{
grid-column:
1 / -1 !important;
margin:
0 !important;
font-size:
20px !important;
}
body.storefront-theme-neon-pulse
.np-track-search{
grid-column:
1 / -1 !important;
width:
100% !important;
max-width:
none !important;
height:
34px !important;
}
body.storefront-theme-neon-pulse
.np-track-filters{
display:contents !important;
}
body.storefront-theme-neon-pulse
.np-track-filters select{
width:
100% !important;
min-width:
0 !important;
height:
34px !important;
font-size:
10px !important;
}
/* -------------------------------------------------------
MOBILE TRACK ROW
Two-row responsive composition.
Row 1:
artwork | play | title | price | menu
Row 2:
waveform | duration | heart
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
display:grid !important;
grid-template-columns:
44px
32px
minmax(0,1fr)
68px
26px !important;
grid-template-rows:
28px 24px !important;
column-gap:
7px !important;
row-gap:
2px !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
min-height:
62px !important;
padding:
5px 0 !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
grid-column:
1 !important;
grid-row:
1 / 3 !important;
align-self:
center !important;
width:
44px !important;
height:
44px !important;
}
body.storefront-theme-neon-pulse
button.np-track-play{
grid-column:
2 !important;
grid-row:
1 / 3 !important;
align-self:
center !important;
justify-self:
center !important;
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
}
body.storefront-theme-neon-pulse
.np-track-copy{
grid-column:
3 !important;
grid-row:
1 !important;
align-self:
end !important;
min-width:
0 !important;
overflow:
hidden !important;
}
body.storefront-theme-neon-pulse
.np-track-copy strong{
display:block !important;
width:
100% !important;
max-width:
100% !important;
overflow:
hidden !important;
text-overflow:
ellipsis !important;
white-space:
nowrap !important;
font-size:
11.5px !important;
line-height:
1.15 !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
display:block !important;
margin-top:
1px !important;
overflow:
hidden !important;
text-overflow:
ellipsis !important;
white-space:
nowrap !important;
font-size:
8.5px !important;
}
/* waveform gets usable width on row 2 */
body.storefront-theme-neon-pulse
.np-track-wave{
grid-column:
3 !important;
grid-row:
2 !important;
align-self:
center !important;
width:
100% !important;
min-width:
0 !important;
height:
20px !important;
overflow:
hidden !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-svg{
width:
100% !important;
height:
20px !important;
}
/* price */
body.storefront-theme-neon-pulse
.np-track-price{
grid-column:
4 !important;
grid-row:
1 !important;
align-self:
center !important;
justify-self:
stretch !important;
width:
68px !important;
min-width:
68px !important;
min-height:
30px !important;
padding:
0 4px !important;
font-size:
9.5px !important;
}
/* duration beneath price */
body.storefront-theme-neon-pulse
.np-track-duration{
grid-column:
4 !important;
grid-row:
2 !important;
align-self:
center !important;
justify-self:
center !important;
min-width:
0 !important;
font-size:
8.5px !important;
}
/* menu on top right */
body.storefront-theme-neon-pulse
.np-track-more{
grid-column:
5 !important;
grid-row:
1 !important;
align-self:
center !important;
justify-self:
center !important;
width:
24px !important;
height:
24px !important;
font-size:
16px !important;
}
/* favorite beneath menu */
body.storefront-theme-neon-pulse
.np-track-heart{
grid-column:
5 !important;
grid-row:
2 !important;
align-self:
center !important;
justify-self:
center !important;
width:
24px !important;
height:
24px !important;
font-size:
16px !important;
}
/* -------------------------------------------------------
TRACK LIST WIDTH SAFETY
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-list{
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
overflow-x:
hidden !important;
}
/* -------------------------------------------------------
FOOTER
Keep existing mobile footer; only prevent overflow.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.os-global-footer,
body.storefront-theme-neon-pulse
.site-footer,
body.storefront-theme-neon-pulse
footer{
width:
100% !important;
max-width:
100% !important;
overflow-x:
hidden !important;
box-sizing:
border-box !important;
}
}
/* =========================================================
VERY SMALL PHONES
========================================================= */
@media(max-width:380px){
body.storefront-theme-neon-pulse
.np-brand{
font-size:
17px !important;
}
body.storefront-theme-neon-pulse
.np-avatar{
width:
132px !important;
height:
132px !important;
top:
-66px !important;
}
body.storefront-theme-neon-pulse
.np-profile-strip{
padding-top:
76px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
font-size:
8.5px !important;
gap:
2px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button svg{
width:
12px !important;
height:
12px !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
grid-template-columns:
40px
30px
minmax(0,1fr)
62px
24px !important;
column-gap:
5px !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:
40px !important;
height:
40px !important;
}
body.storefront-theme-neon-pulse
.np-track-price{
width:
62px !important;
min-width:
62px !important;
font-size:
9px !important;
}
}
/* END NEON PULSE MOBILE FIDELITY PASS #1 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — MOBILE FIDELITY PASS #2
Final 430px proportion / track polish
========================================================= */
@media(max-width:560px){
/* -------------------------------------------------------
PREVIEW NOTICE — SLIGHTLY MORE COMPACT
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.storefront-theme-preview-bar{
padding:
9px 11px !important;
margin-bottom:
9px !important;
font-size:
11.5px !important;
}
/* -------------------------------------------------------
HEADER
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-topbar{
padding:
8px 11px 9px !important;
row-gap:
7px !important;
}
body.storefront-theme-neon-pulse
.np-brand{
font-size:
18px !important;
}
body.storefront-theme-neon-pulse
.np-global-search,
body.storefront-theme-neon-pulse
.np-global-search input{
height:
33px !important;
}
/* -------------------------------------------------------
HERO / AVATAR
Keep current good overlap but slightly rebalance scale.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-hero{
height:
156px !important;
min-height:
156px !important;
background-position:
center center !important;
}
body.storefront-theme-neon-pulse
.np-avatar{
width:
138px !important;
height:
138px !important;
top:
-69px !important;
}
/* -------------------------------------------------------
PROFILE CONTENT
Remove unnecessary mobile vertical space.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
padding:
78px 15px
14px !important;
}
body.storefront-theme-neon-pulse
.np-identity h1{
margin-bottom:
4px !important;
font-size:
24px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
margin:
6px 0 7px !important;
}
body.storefront-theme-neon-pulse
.np-social-row{
margin-top:
7px !important;
gap:
12px !important;
}
/* -------------------------------------------------------
BUTTONS — PULL UP CLOSER TO ARTIST INFO
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-actions{
margin-top:
16px !important;
}
body.storefront-theme-neon-pulse
.np-action-buttons{
gap:
9px !important;
}
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-height:
37px !important;
}
/* -------------------------------------------------------
STATS — REDUCE EXCESS GAP
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-inline-stats{
margin-top:
14px !important;
gap:
2px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:
18px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:
8.3px !important;
}
body.storefront-theme-neon-pulse
.np-rating-coming{
font-size:
8px !important;
}
/* -------------------------------------------------------
FIVE-TAB MOBILE STRIP
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
min-height:
45px !important;
padding:
0 3px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
min-height:
45px !important;
padding:
0 1px !important;
gap:
3px !important;
font-size:
9.2px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button svg{
width:
12px !important;
height:
12px !important;
flex:
0 0 12px !important;
}
/* -------------------------------------------------------
TRACK PANEL
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-panel{
padding:
12px 11px
14px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools{
gap:
7px !important;
margin-bottom:
9px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:
19px !important;
}
body.storefront-theme-neon-pulse
.np-track-search{
height:
33px !important;
}
body.storefront-theme-neon-pulse
.np-track-filters select{
height:
33px !important;
}
/* -------------------------------------------------------
TRACK ROW
Give more width back to the title/waveform column.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
grid-template-columns:
43px
31px
minmax(0,1fr)
64px
23px !important;
grid-template-rows:
27px 23px !important;
column-gap:
6px !important;
row-gap:
1px !important;
min-height:
59px !important;
padding:
4px 0 !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:
43px !important;
height:
43px !important;
}
body.storefront-theme-neon-pulse
button.np-track-play{
width:
29px !important;
height:
29px !important;
min-width:
29px !important;
min-height:
29px !important;
}
/* -------------------------------------------------------
TRACK COPY
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:
11.5px !important;
line-height:
1.12 !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
font-size:
8.2px !important;
}
/* -------------------------------------------------------
MOBILE WAVEFORM
Slightly more visible without overpowering rows.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave{
height:
19px !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-svg{
height:
19px !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-path{
fill:
#7f8ca0 !important;
opacity:
.94 !important;
}
body.storefront-theme-neon-pulse
.np-track-row:hover
.np-approved-wave-path{
fill:
#8996aa !important;
}
/* -------------------------------------------------------
PRICE / DURATION
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:
64px !important;
min-width:
64px !important;
min-height:
29px !important;
padding:
0 3px !important;
font-size:
9.2px !important;
}
body.storefront-theme-neon-pulse
.np-track-duration{
font-size:
8px !important;
}
/* -------------------------------------------------------
HEART / MENU
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-more,
body.storefront-theme-neon-pulse
.np-track-heart{
width:
22px !important;
height:
22px !important;
}
/* -------------------------------------------------------
MAKE SURE NOTHING BLEEDS OUT OF THE PHONE
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-list,
body.storefront-theme-neon-pulse
.np-track-row,
body.storefront-theme-neon-pulse
.np-track-copy,
body.storefront-theme-neon-pulse
.np-track-wave{
min-width:
0 !important;
max-width:
100% !important;
box-sizing:
border-box !important;
}
}
/* =========================================================
VERY SMALL PHONE REFINEMENT
========================================================= */
@media(max-width:380px){
body.storefront-theme-neon-pulse
.np-avatar{
width:
128px !important;
height:
128px !important;
top:
-64px !important;
}
body.storefront-theme-neon-pulse
.np-profile-strip{
padding-top:
72px !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
grid-template-columns:
39px
29px
minmax(0,1fr)
59px
22px !important;
column-gap:
4px !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:
39px !important;
height:
39px !important;
}
body.storefront-theme-neon-pulse
.np-track-price{
width:
59px !important;
min-width:
59px !important;
font-size:
8.7px !important;
}
}
/* END NEON PULSE MOBILE FIDELITY PASS #2 */
/* =========================================================
OSBEATS 20260909 NEON PULSE — MOBILE FIDELITY PASS #3
Final 430px compression + track width polish
========================================================= */
@media(max-width:560px){
/* -------------------------------------------------------
HERO / PROFILE PHOTO
Keep approved centered composition.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-hero{
height:154px !important;
min-height:154px !important;
}
body.storefront-theme-neon-pulse
.np-avatar{
width:136px !important;
height:136px !important;
top:-68px !important;
}
/* -------------------------------------------------------
PROFILE BAND — REMOVE LAST EXCESS VERTICAL SPACE
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-strip{
padding:
75px 15px
10px !important;
}
body.storefront-theme-neon-pulse
.np-identity h1{
margin-bottom:3px !important;
font-size:24px !important;
}
body.storefront-theme-neon-pulse
.np-identity-meta{
font-size:10px !important;
}
body.storefront-theme-neon-pulse
.np-identity p{
margin:
5px 0 6px !important;
font-size:10.5px !important;
}
body.storefront-theme-neon-pulse
.np-social-row{
margin-top:5px !important;
gap:11px !important;
}
/* -------------------------------------------------------
FOLLOW / MESSAGE
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-profile-actions{
margin-top:11px !important;
}
body.storefront-theme-neon-pulse
.np-action-buttons{
gap:8px !important;
}
body.storefront-theme-neon-pulse
.np-follow,
body.storefront-theme-neon-pulse
.np-message{
min-height:36px !important;
font-size:11px !important;
}
/* -------------------------------------------------------
STATS
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-inline-stats{
margin-top:11px !important;
gap:1px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats strong{
font-size:18px !important;
}
body.storefront-theme-neon-pulse
.np-inline-stats span{
font-size:8.2px !important;
}
body.storefront-theme-neon-pulse
.np-rating-coming{
font-size:8px !important;
}
/* -------------------------------------------------------
FIVE-TAB STRIP
Gain readability without reintroducing overflow.
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-tabs{
min-height:44px !important;
padding:
0 2px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
min-height:44px !important;
padding:
0 !important;
gap:2px !important;
font-size:9.6px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button svg{
width:11px !important;
height:11px !important;
flex:
0 0 11px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button.active::after{
left:5px !important;
right:5px !important;
}
/* -------------------------------------------------------
TRACK AREA
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-panel{
padding:
11px 10px
13px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools{
gap:6px !important;
margin-bottom:8px !important;
}
body.storefront-theme-neon-pulse
.np-track-tools h2{
font-size:19px !important;
}
/* -------------------------------------------------------
TRACK ROW
Give title + waveform more horizontal room.
artwork | play | main content | price | action
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-row{
grid-template-columns:
42px
30px
minmax(0,1fr)
60px
20px !important;
grid-template-rows:
27px
22px !important;
column-gap:5px !important;
row-gap:1px !important;
min-height:58px !important;
padding:
4px 0 !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:42px !important;
height:42px !important;
}
body.storefront-theme-neon-pulse
button.np-track-play{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
}
/* -------------------------------------------------------
TRACK TITLE
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-copy strong{
font-size:11.4px !important;
line-height:1.1 !important;
}
body.storefront-theme-neon-pulse
.np-track-copy small{
font-size:8px !important;
}
/* -------------------------------------------------------
WAVEFORM — USE GAINED WIDTH
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-wave{
width:100% !important;
height:20px !important;
overflow:hidden !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-svg{
width:100% !important;
height:20px !important;
}
body.storefront-theme-neon-pulse
.np-approved-wave-path{
fill:#8390a4 !important;
opacity:.96 !important;
}
/* -------------------------------------------------------
PRICE
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-price{
width:60px !important;
min-width:60px !important;
min-height:28px !important;
padding:
0 2px !important;
font-size:9px !important;
}
/* -------------------------------------------------------
DURATION
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-duration{
font-size:7.8px !important;
}
/* -------------------------------------------------------
MENU / HEART
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-track-more,
body.storefront-theme-neon-pulse
.np-track-heart{
width:20px !important;
height:20px !important;
min-width:20px !important;
}
body.storefront-theme-neon-pulse
.np-track-more{
font-size:15px !important;
}
body.storefront-theme-neon-pulse
.np-track-heart{
font-size:14px !important;
}
/* -------------------------------------------------------
MOBILE WIDTH SAFETY
------------------------------------------------------- */
body.storefront-theme-neon-pulse
.np-shell,
body.storefront-theme-neon-pulse
.np-profile-strip,
body.storefront-theme-neon-pulse
.np-tabs,
body.storefront-theme-neon-pulse
.np-panel,
body.storefront-theme-neon-pulse
.np-track-list,
body.storefront-theme-neon-pulse
.np-track-row{
max-width:100% !important;
box-sizing:border-box !important;
}
}
/* =========================================================
375PX / SMALL PHONE SAFETY
========================================================= */
@media(max-width:380px){
body.storefront-theme-neon-pulse
.np-avatar{
width:126px !important;
height:126px !important;
top:-63px !important;
}
body.storefront-theme-neon-pulse
.np-profile-strip{
padding-top:70px !important;
}
body.storefront-theme-neon-pulse
.np-tabs button{
font-size:8.8px !important;
}
body.storefront-theme-neon-pulse
.np-track-row{
grid-template-columns:
38px
28px
minmax(0,1fr)
56px
19px !important;
column-gap:4px !important;
}
body.storefront-theme-neon-pulse
.np-track-cover{
width:38px !important;
height:38px !important;
}
body.storefront-theme-neon-pulse
.np-track-price{
width:56px !important;
min-width:56px !important;
font-size:8.5px !important;
}
}
/* END NEON PULSE MOBILE FIDELITY PASS #3 */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL
APPROVED NATIVE VISUAL SYSTEM
STRUCTURE:
Same approved STANDARD renderer architecture as Neon Pulse.
VISUAL IDENTITY:
Black / white / ivory / warm gold
Clean professional presentation
========================================================= */
/* ---------------------------------------------------------
THEME FOUNDATION
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal{
background:
#f1f1ee !important;
color:
#111111 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-shell{
border:
1px solid #c69a55 !important;
border-radius:
10px !important;
background:
#f7f7f4 !important;
color:
#111111 !important;
box-shadow:
0 18px 46px rgba(0,0,0,.18) !important;
}
/* ---------------------------------------------------------
PREVIEW NOTICE
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.storefront-theme-preview-bar{
border:
1px solid #c69a55 !important;
border-left:
4px solid #c69a55 !important;
background:
#111111 !important;
color:
#ffffff !important;
}
body.storefront-theme-midnight-minimal
.storefront-theme-preview-bar a{
color:
#e1b66f !important;
}
/* ---------------------------------------------------------
TOP NAV
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-topbar{
background:
#0c0d0e !important;
border-bottom:
1px solid #c69a55 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-brand{
color:
#ffffff !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-brand strong{
color:
#d7a454 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-global-nav a{
color:
#f5f5f3 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-global-nav a:hover{
color:
#d9a85b !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-global-search,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-global-search input{
border-color:
#3c3f42 !important;
background:
#202326 !important;
color:
#eeeeec !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-global-search input::placeholder{
color:
#96999c !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-top-icon{
color:
#eeeeec !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-mini-avatar{
border-color:
#cfa45f !important;
box-shadow:
0 0 0 2px rgba(207,164,95,.12) !important;
}
/* ---------------------------------------------------------
HERO
Approved Midnight Minimal uses a black/white presentation.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-hero{
filter:
grayscale(1)
contrast(1.08)
brightness(.82) !important;
background-color:
#171717 !important;
background-blend-mode:
luminosity !important;
}
/* ---------------------------------------------------------
PROFILE BAND
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-profile-strip{
background:
linear-gradient(
180deg,
#ffffff,
#f5f4f1
) !important;
color:
#111111 !important;
border-bottom:
1px solid #d7d4cd !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar{
border:
3px solid #c99d59 !important;
outline:
4px solid rgba(201,157,89,.12) !important;
background:
#141414 !important;
box-shadow:
0 14px 30px rgba(0,0,0,.20) !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity h1{
color:
#111111 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity-meta,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity p{
color:
#555555 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-social{
color:
#1d1d1d !important;
}
/* ---------------------------------------------------------
VERIFIED BADGE
Keep official blue verification treatment.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-verified{
background:
linear-gradient(
145deg,
#2895ff,
#1878e8
) !important;
color:
#ffffff !important;
}
/* ---------------------------------------------------------
FOLLOW / MESSAGE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-follow{
border:
1px solid #c8974d !important;
background:
linear-gradient(
135deg,
#e0ad5f,
#c89345
) !important;
color:
#111111 !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-message{
border:
1px solid #555555 !important;
background:
#ffffff !important;
color:
#111111 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-follow:hover{
background:
#e6b769 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-message:hover{
border-color:
#c89a54 !important;
}
/* ---------------------------------------------------------
STATS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-inline-stats strong{
color:
#111111 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-inline-stats span{
color:
#666666 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-rating-coming{
color:
#8b7a60 !important;
}
/* ---------------------------------------------------------
TABS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs{
background:
#f5f4f1 !important;
border-top:
1px solid #dedbd5 !important;
border-bottom:
1px solid #d8d5cf !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button{
color:
#222222 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button svg{
color:
#333333 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active{
color:
#9b6d27 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active svg{
color:
#b27d2d !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active::after{
background:
#c7974d !important;
}
/* ---------------------------------------------------------
MAIN TRACK PANEL
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-panel{
background:
#ffffff !important;
color:
#111111 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-tools h2{
color:
#111111 !important;
}
/* ---------------------------------------------------------
SEARCH / FILTERS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-search,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-search input,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-filters select{
border-color:
#d1d1ce !important;
background:
#f7f7f5 !important;
color:
#222222 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-search input::placeholder{
color:
#888888 !important;
}
/* ---------------------------------------------------------
TRACK ROWS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row{
background:
#ffffff !important;
border-bottom:
1px solid #ddddda !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover{
background:
#f8f6f1 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(208,165,92,.13),
#ffffff 18%
) !important;
box-shadow:
inset 2px 0 0 #c7974e !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-copy strong{
color:
#171717 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-copy small{
color:
#777777 !important;
}
/* ---------------------------------------------------------
WAVEFORM
Same approved OSBeats waveform architecture.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover
.np-track-wave{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-approved-wave-path{
fill:
#c8c8c5 !important;
opacity:
1 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover
.np-approved-wave-path{
fill:
#b3b3b0 !important;
}
/* ---------------------------------------------------------
DURATION
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-duration{
color:
#333333 !important;
}
/* ---------------------------------------------------------
HEART / MENU
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-heart,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-more{
color:
#222222 !important;
}
/* ---------------------------------------------------------
PRICE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-price{
border:
1px solid #c7954a !important;
background:
linear-gradient(
135deg,
#dfad60,
#c89549
) !important;
color:
#111111 !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
THEME FOOTER EDGE
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
footer,
body.storefront-theme-midnight-minimal
.site-footer,
body.storefront-theme-midnight-minimal
.global-footer,
body.storefront-theme-midnight-minimal
#siteFooter{
border-top-color:
#c6974e !important;
}
/* ---------------------------------------------------------
MOBILE MIDNIGHT MINIMAL
Structure remains inherited from locked standard mobile.
Only visual refinements differ.
--------------------------------------------------------- */
@media(max-width:560px){
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-profile-strip{
background:
#f7f6f3 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs{
background:
#f2f1ee !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-panel{
background:
#ffffff !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row{
background:
#ffffff !important;
}
}
/* END MIDNIGHT MINIMAL APPROVED VISUAL SYSTEM */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL — FIDELITY PASS #1
Avatar + contrast + control system
========================================================= */
/* ---------------------------------------------------------
CLEANER MAIN STOREFRONT FRAME
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-shell{
background:#ffffff !important;
border:
1px solid #c69a55 !important;
box-shadow:
0 12px 30px rgba(0,0,0,.12) !important;
}
/* ---------------------------------------------------------
HERO
Keep creator banner, but convert it into the approved
monochrome Midnight Minimal presentation.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-hero{
filter:
grayscale(1)
contrast(1.04)
brightness(.96) !important;
background-color:
#202020 !important;
background-blend-mode:
luminosity !important;
}
/* ---------------------------------------------------------
PROFILE AVATAR
Restore actual creator profile image.
Earlier Midnight background styling must never cover it.
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar{
overflow:hidden !important;
background-color:
#181818 !important;
border:
3px solid #c99b51 !important;
outline:
3px solid rgba(201,155,81,.11) !important;
box-shadow:
0 10px 24px rgba(0,0,0,.18) !important;
}
/* Support the renderer's image regardless of whether it is
direct-child or wrapped inside the avatar container. */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar img,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar picture,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar picture img{
object-fit:cover !important;
object-position:center !important;
opacity:1 !important;
visibility:visible !important;
filter:
grayscale(1)
contrast(1.03)
brightness(1.02) !important;
mix-blend-mode:
normal !important;
}
/* If structural styling applied opacity/filter to a nested
avatar element, neutralize it. */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar *{
opacity:1 !important;
}
/* ---------------------------------------------------------
PROFILE BAND
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-profile-strip{
background:
linear-gradient(
180deg,
#ffffff 0%,
#faf9f6 100%
) !important;
border-bottom:
1px solid #d8d5ce !important;
}
/* ---------------------------------------------------------
IDENTITY
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity h1{
color:
#111111 !important;
font-weight:
800 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity-meta{
color:
#555555 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity p{
color:
#333333 !important;
}
/* ---------------------------------------------------------
FOLLOW / MESSAGE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-follow{
border:
1px solid #c79445 !important;
background:
linear-gradient(
135deg,
#dfac5d,
#c99347
) !important;
color:
#111111 !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-message{
border:
1px solid #77736c !important;
background:
#ffffff !important;
color:
#111111 !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
TABS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs{
background:
#f5f4f1 !important;
border-top:
1px solid #ddd9d2 !important;
border-bottom:
1px solid #d3d0ca !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button{
color:
#242424 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button svg{
color:
#303030 !important;
stroke:
currentColor !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active{
color:
#9f6a1c !important;
font-weight:
700 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active svg{
color:
#b77a21 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active::after{
background:
#c89548 !important;
}
/* ---------------------------------------------------------
TRACK PANEL
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-panel{
background:
#ffffff !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-tools h2{
color:
#111111 !important;
font-weight:
800 !important;
}
/* ---------------------------------------------------------
SEARCH / FILTERS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-search,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-search input,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-filters select{
background:
#fafaf8 !important;
border:
1px solid #cfcec9 !important;
color:
#181818 !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
TRACK ROWS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row{
background:
#ffffff !important;
border-bottom:
1px solid #deddd9 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover{
background:
#faf8f3 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-copy strong{
color:
#151515 !important;
font-weight:
700 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-copy small{
color:
#747474 !important;
}
/* ---------------------------------------------------------
PLAY BUTTONS
Approved Midnight Minimal = neutral/light controls{
border:
1px solid #aaa9a5 !important;
background:
#ddddda !important;
background-color:
#ddddda !important;
background-image:
none !important;
color:
#161616 !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave:hover{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-approved-wave-path{
fill:
#b8b8b5 !important;
opacity:
.96 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover
.np-approved-wave-path{
fill:
#a8a8a5 !important;
opacity:
1 !important;
}
/* ---------------------------------------------------------
DURATION / ACTIONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-duration{
color:
#242424 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-heart,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-more{
color:
#202020 !important;
}
/* ---------------------------------------------------------
GOLD PRICE BUTTON
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-price{
border:
1px solid #c69346 !important;
background:
linear-gradient(
135deg,
#dfae61,
#cc994d
) !important;
color:
#111111 !important;
box-shadow:
none !important;
border-radius:
4px !important;
font-weight:
800 !important;
}
/* ---------------------------------------------------------
MOBILE SAFETY — COLORS ONLY
Locked standard responsive structure remains untouched.
--------------------------------------------------------- */
@media(max-width:560px){
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar img,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar picture img{
filter:
grayscale(1)
contrast(1.03)
brightness(1.02) !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row{
background:
#ffffff !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover{
background:
#faf8f3 !important;
}
}
/* END MIDNIGHT MINIMAL FIDELITY PASS #1 */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL — FIDELITY PASS #2
Approved mockup visual polish
========================================================= */
/* ---------------------------------------------------------
LARGE PROFILE PHOTO
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar{
overflow:hidden !important;
background:
#151515 !important;
border:
3px solid #c89b55 !important;
outline:
3px solid rgba(200,155,85,.10) !important;
box-shadow:
0 10px 24px rgba(0,0,0,.16) !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar
.midnight-minimal-main-avatar{
inset:0 !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:50% !important;
opacity:1 !important;
filter:
grayscale(1)
contrast(1.04)
brightness(1.03) !important;
mix-blend-mode:normal !important;
z-index:2 !important;
}
/* ---------------------------------------------------------
HERO — LIGHTER MONOCHROME PRESENTATION
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-hero{
filter:
grayscale(1)
contrast(1.02)
brightness(1.04) !important;
background-color:
#292929 !important;
}
/* ---------------------------------------------------------
PROFILE IDENTITY POSITION
Slightly farther right like approved Midnight mockup.
--------------------------------------------------------- */
@media(min-width:721px){
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-profile-strip{
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity{
transform:
translate(3px,-24px) !important;
}
}
/* ---------------------------------------------------------
PROFILE TEXT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity h1{
color:#111111 !important;
font-weight:800 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity-meta{
color:#55524d !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-identity p{
color:#353535 !important;
}
/* ---------------------------------------------------------
SOCIAL ICONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-social{
color:#242424 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-social svg,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-social svg *{
stroke:currentColor !important;
}
/* ---------------------------------------------------------
ACTIVE MUSIC TAB — STRONGER GOLD
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active{
color:
#95631d !important;
font-weight:
800 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active svg,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active svg *{
color:
#b17620 !important;
stroke:
#b17620 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-tabs button.active::after{
background:
#c69346 !important;
}
/* ---------------------------------------------------------
SEARCH FIELD — REMOVE DOUBLE / INSET APPEARANCE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-search{
background:
#fafaf8 !important;
border:
1px solid #cfcdc7 !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-search input{
border:0 !important;
outline:0 !important;
background:
transparent !important;
box-shadow:
none !important;
color:
#222222 !important;
}
/* ---------------------------------------------------------
TRACK ARTWORK — APPROVED MONOCHROME TREATMENT
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-cover img{
filter:
grayscale(1)
contrast(1.04) !important;
transition:
filter .18s ease !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover
.np-track-cover img{
filter:
grayscale(1)
contrast(1.08)
brightness(1.03) !important;
}
/* ---------------------------------------------------------
WAVEFORM — MORE VISIBLE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-approved-wave-path{
fill:
#aaa9a5 !important;
opacity:
.98 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover
.np-approved-wave-path{
fill:
#969590 !important;
opacity:
1 !important;
}
/* ---------------------------------------------------------
TRACK ROW RHYTHM
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row{
border-bottom:
1px solid #dedcd7 !important;
}
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-row:hover{
background:
#faf8f3 !important;
}
/* ---------------------------------------------------------
GOLD PRICE BUTTONS
--------------------------------------------------------- */
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-price{
background:
linear-gradient(
135deg,
#dfad5d,
#cc994b
) !important;
border:
1px solid #c49143 !important;
color:
#111111 !important;
border-radius:
4px !important;
box-shadow:
none !important;
font-weight:
800 !important;
}
/* ---------------------------------------------------------
MOBILE SAFETY
Do not alter the locked standard responsive structure.
--------------------------------------------------------- */
@media(max-width:560px){
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-avatar
.midnight-minimal-main-avatar{
filter:
grayscale(1)
contrast(1.04)
brightness(1.03) !important;
}
}
/* END MIDNIGHT MINIMAL FIDELITY PASS #2 */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL — FIDELITY PASS #3
Avatar / controls / artwork / footer lock
========================================================= */
/* ---------------------------------------------------------
LARGE CREATOR PHOTO
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-avatar{
overflow:hidden !important;
background-color:#171717 !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
body.storefront-theme-midnight-minimal
.np-avatar
.midnight-minimal-main-avatar{
inset:0 !important;
border:0 !important;
border-radius:50% !important;
object-fit:cover !important;
object-position:center !important;
opacity:1 !important;
visibility:visible !important;
filter:
grayscale(1)
contrast(1.04)
brightness(1.03) !important;
z-index:5 !important;
}
/* ---------------------------------------------------------
ARTIST IDENTITY
Bring the text cleanly into the white profile band.
--------------------------------------------------------- */
@media(min-width:721px){
body.storefront-theme-midnight-minimal
.np-identity{
transform:
translate(3px,-13px) !important;
}
}
/* ---------------------------------------------------------
ACTIVE MUSIC TAB
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-tabs button.active,
body.storefront-theme-midnight-minimal
.np-tabs button.active *{
color:#96631b !important;
opacity:1 !important;
}
body.storefront-theme-midnight-minimal
.np-tabs button.active svg,
body.storefront-theme-midnight-minimal
.np-tabs button.active svg *{
stroke:#aa711e !important;
}
body.storefront-theme-midnight-minimal
.np-tabs button.active::after{
background:#c69346 !important;
opacity:1 !important;
}
/* ---------------------------------------------------------
MONOCHROME TRACK ARTWORK
Apply grayscale to the artwork container itself because
some OSBeats covers are backgrounds rather than ![]()
.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-cover{
filter:
grayscale(1)
contrast(1.04) !important;
}
body.storefront-theme-midnight-minimal
.np-track-cover img{
filter:
grayscale(1)
contrast(1.04) !important;
}
/* ---------------------------------------------------------
WAVEFORM CONTRAST
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-approved-wave-path{
fill:
#94948f !important;
opacity:
1 !important;
}
body.storefront-theme-midnight-minimal
.np-track-row:hover
.np-approved-wave-path{
fill:
#858580 !important;
opacity:
1 !important;
}
/* ---------------------------------------------------------
SEARCH FIELD FINAL CLEANUP
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-search{
background:
#fafaf8 !important;
border:
1px solid #cbc9c3 !important;
box-shadow:
none !important;
}
body.storefront-theme-midnight-minimal
.np-track-search input{
border:
0 !important;
outline:
0 !important;
background:
transparent !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
REMOVE RED FOOTER EDGE FOR MIDNIGHT MINIMAL
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
footer::before,
body.storefront-theme-midnight-minimal
footer::after,
body.storefront-theme-midnight-minimal
.site-footer::before,
body.storefront-theme-midnight-minimal
.site-footer::after{
background:
transparent !important;
background-image:
none !important;
border-color:
transparent !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
MOBILE SAFETY
--------------------------------------------------------- */
@media(max-width:560px){
body.storefront-theme-midnight-minimal
.np-avatar{
background-size:
cover !important;
background-position:
center !important;
}
body.storefront-theme-midnight-minimal
.np-avatar
.midnight-minimal-main-avatar{
filter:
grayscale(1)
contrast(1.04)
brightness(1.03) !important;
}
}
/* ---------------------------------------------------------
ACTIVE / PAUSED ROWS
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(210,164,82,.13),
#ffffff 19%
) !important;
box-shadow:
inset 2px 0 0
#ce9948 !important;
}
/* ---------------------------------------------------------
WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-wave{
position:
relative !important;
overflow:
hidden !important;
background:
transparent !important;
background-image:
none !important;
}
body.storefront-theme-midnight-minimal
.np-approved-wave-svg{
position:
relative !important;
display:
block !important;
width:
100% !important;
height:
100% !important;
z-index:
1 !important;
}
/* Base waveform */
body.storefront-theme-midnight-minimal
.np-approved-wave-path{
fill:
#9d9d98 !important;
opacity:
.92 !important;
}
/* ---------------------------------------------------------
GOLD PLAYBACK PROGRESS WAVE
Exact same waveform shape, clipped left-to-right.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.mm-wave-progress-svg{
position:
absolute !important;
inset:
0 !important;
display:
block !important;
width:
100% !important;
height:
100% !important;
pointer-events:
none !important;
z-index:
3 !important;
overflow:
visible !important;
will-change:
clip-path !important;
}
body.storefront-theme-midnight-minimal
.mm-wave-progress-svg
.np-approved-wave-path{
fill:
#c9923f !important;
opacity:
1 !important;
}
/*
Never reintroduce Neon Pulse red/black waveform
hover backgrounds.
*/
body.storefront-theme-midnight-minimal
.np-track-wave:hover,
body.storefront-theme-midnight-minimal
.np-track-row:hover
.np-track-wave,
body.storefront-theme-midnight-minimal
.np-track-row.playing
.np-track-wave{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media(max-width:560px){
body.storefront-theme-midnight-minimal
.mm-wave-progress-svg{
height:
100% !important;
}
}
/* END MIDNIGHT MINIMAL PLAYBACK UI */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL — FIDELITY PASS #4
Play control + identity + gold accent lock
========================================================= */
/* ---------------------------------------------------------
ARTIST IDENTITY
Previous pass pulled it too close to the banner.
Drop it naturally into the white profile band.
--------------------------------------------------------- */
@media(min-width:721px){
body.storefront-theme-midnight-minimal
.np-identity{
transform:
translate(3px,0) !important;
}
}
/* ---------------------------------------------------------
ACTIVE MUSIC TAB
Force all visible text/icons to the Midnight gold.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-tabs button.active,
body.storefront-theme-midnight-minimal
.np-tabs button.active span,
body.storefront-theme-midnight-minimal
.np-tabs button.active strong,
body.storefront-theme-midnight-minimal
.np-tabs button.active small{
color:
#9f691b !important;
-webkit-text-fill-color:
#9f691b !important;
opacity:
1 !important;
}
body.storefront-theme-midnight-minimal
.np-tabs button.active svg,
body.storefront-theme-midnight-minimal
.np-tabs button.active svg *{
color:
#ad741f !important;
stroke:
#ad741f !important;
opacity:
1 !important;
}
body.storefront-theme-midnight-minimal
.np-tabs button.active::after{
background:
#c89548 !important;
opacity:
1 !important;
}
/* ---------------------------------------------------------
WAVEFORM
Darker base waveform for clearer Midnight presentation.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-wave
.np-approved-wave-path{
fill:
#8e8e89 !important;
opacity:
1 !important;
}
body.storefront-theme-midnight-minimal
.np-track-row:hover
.np-track-wave
.np-approved-wave-path{
fill:
#81817d !important;
opacity:
1 !important;
}
/* ---------------------------------------------------------
GOLD PLAYBACK PROGRESS
Must override the gray base waveform.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-wave
.mm-wave-progress-svg
.np-approved-wave-path{
fill:
#c88f35 !important;
opacity:
1 !important;
}
body.storefront-theme-midnight-minimal
.np-track-row:hover
.np-track-wave
.mm-wave-progress-svg
.np-approved-wave-path{
fill:
#c88f35 !important;
opacity:
1 !important;
}
/* ---------------------------------------------------------
ACTIVE ROW
Keep it subtle/minimal.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(203,151,72,.11),
#ffffff 18%
) !important;
box-shadow:
inset 2px 0 0
#c89548 !important;
}
/* ---------------------------------------------------------
MOBILE SAFETY
Same button system at mobile size.
--------------------------------------------------------- */
@media(max-width:560px){
}
/* END MIDNIGHT MINIMAL FIDELITY PASS #4 */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL
WAVEFORM PROGRESS COLOR LOCK
========================================================= */
/* ---------------------------------------------------------
WAVEFORM HOST
Never allow inherited Neon Pulse color/background.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-wave,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave{
position:relative !important;
overflow:hidden !important;
background:transparent !important;
background-color:transparent !important;
background-image:none !important;
box-shadow:none !important;
filter:none !important;
}
/* ---------------------------------------------------------
BASE WAVEFORM
Neutral medium gray.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-wave
svg.np-approved-wave-svg,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave
svg.np-approved-wave-svg{
color:#898a86 !important;
filter:none !important;
opacity:1 !important;
}
body.storefront-theme-midnight-minimal
.np-track-wave
svg.np-approved-wave-svg path,
body.storefront-theme-midnight-minimal
.np-track-wave
svg.np-approved-wave-svg
.np-approved-wave-path,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave
svg.np-approved-wave-svg path{
fill:#898a86 !important;
stroke:none !important;
color:#898a86 !important;
opacity:1 !important;
}
/* ---------------------------------------------------------
PLAYBACK PROGRESS WAVE
Same waveform directly over the base, clipped by JS.
Warm Midnight gold.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-wave
svg.mm-wave-progress-svg,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave
svg.mm-wave-progress-svg{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100% !important;
height:100% !important;
color:#c88e35 !important;
pointer-events:none !important;
filter:none !important;
opacity:1 !important;
z-index:5 !important;
will-change:clip-path !important;
}
body.storefront-theme-midnight-minimal
.np-track-wave
svg.mm-wave-progress-svg path,
body.storefront-theme-midnight-minimal
.np-track-wave
svg.mm-wave-progress-svg
.np-approved-wave-path,
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
.np-track-wave
svg.mm-wave-progress-svg path{
fill:#c88e35 !important;
stroke:none !important;
color:#c88e35 !important;
opacity:1 !important;
}
/* ---------------------------------------------------------
HOVER MUST NOT CHANGE WAVEFORM COLOR
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-row:hover
.np-track-wave
svg.np-approved-wave-svg path{
fill:#898a86 !important;
}
body.storefront-theme-midnight-minimal
.np-track-row:hover
.np-track-wave
svg.mm-wave-progress-svg path{
fill:#c88e35 !important;
}
/* ---------------------------------------------------------
ACTIVE TRACK
Slightly darker gray base; gold remains progress.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
.np-track-row.playing
.np-track-wave
svg.np-approved-wave-svg path{
fill:#7d7e7a !important;
}
body.storefront-theme-midnight-minimal
.np-track-row.playing
.np-track-wave
svg.mm-wave-progress-svg path{
fill:#cb9138 !important;
}
/* END MIDNIGHT MINIMAL WAVEFORM PROGRESS COLOR LOCK */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL
SURGICAL SCREENSHOT CORRECTION
Scoped ONLY to the Midnight Minimal renderer.
========================================================= */
/* =========================================================
1 — ARTIST NAME / VERIFIED BADGE / PROFILE DETAILS
Screenshot issue:
Artist name was touching/clipping into bottom of banner.
Keep avatar where it is.
Move only identity information farther into white strip.
========================================================= */
@media(min-width:721px){
#midnightMinimalThemeStage
.np-profile-strip{
overflow:visible !important;
}
#midnightMinimalThemeStage
.np-identity{
align-self:start !important;
position:relative !important;
transform:translateY(18px) !important;
z-index:10 !important;
}
#midnightMinimalThemeStage
.np-identity h1{
margin:0 0 5px !important;
color:#111111 !important;
line-height:1.08 !important;
}
#midnightMinimalThemeStage
.np-identity-meta{
color:#343434 !important;
}
#midnightMinimalThemeStage
.np-identity p{
color:#252525 !important;
}
}
/* =========================================================
2 — TAB BAR
Screenshot issue:
Playlists / Store received a black rectangular selection
box instead of the approved gold underline.
========================================================= */
#midnightMinimalThemeStage
.np-tabs button,
#midnightMinimalThemeStage
.np-tabs button:hover,
#midnightMinimalThemeStage
.np-tabs button:active,
#midnightMinimalThemeStage
.np-tabs button:focus,
#midnightMinimalThemeStage
.np-tabs button:focus-visible{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
border-radius:0 !important;
background:transparent !important;
background-color:transparent !important;
background-image:none !important;
}
/* inactive tabs */
#midnightMinimalThemeStage
.np-tabs button:not(.active),
#midnightMinimalThemeStage
.np-tabs button:not(.active) span{
color:#202020 !important;
-webkit-text-fill-color:#202020 !important;
}
#midnightMinimalThemeStage
.np-tabs button:not(.active) svg,
#midnightMinimalThemeStage
.np-tabs button:not(.active) svg *{
color:#303030 !important;
stroke:#303030 !important;
}
/* active tab */
#midnightMinimalThemeStage
.np-tabs button.active,
#midnightMinimalThemeStage
.np-tabs button.active span{
color:#9b661d !important;
-webkit-text-fill-color:#9b661d !important;
font-weight:700 !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
}
#midnightMinimalThemeStage
.np-tabs button.active svg,
#midnightMinimalThemeStage
.np-tabs button.active svg *{
color:#ad741f !important;
stroke:#ad741f !important;
}
/* gold underline only */
#midnightMinimalThemeStage
.np-tabs button.active::after{
content:"" !important;
background:#c89548 !important;
background-image:none !important;
border:0 !important;
box-shadow:none !important;
opacity:1 !important;
}
/* =========================================================
3 — ABOUT
Screenshot issue:
"Admin of OSBeats" was pale blue and sitting inside too
much empty space.
Do not create a new card.
Keep Midnight Minimal clean/minimal.
========================================================= */
#midnightMinimalThemeStage
[data-np-panel="about"]{
min-height:0 !important;
height:auto !important;
padding:22px 20px !important;
background:#ffffff !important;
background-image:none !important;
color:#313131 !important;
}
#midnightMinimalThemeStage
[data-np-panel="about"] h2{
margin-top:0 !important;
color:#111111 !important;
}
#midnightMinimalThemeStage
[data-np-panel="about"] p{
margin:0 !important;
color:#3d3d3d !important;
-webkit-text-fill-color:#3d3d3d !important;
opacity:1 !important;
background:transparent !important;
border:0 !important;
font-size:14px !important;
line-height:1.5 !important;
}
/* =========================================================
4 — PLAYLISTS
Screenshot issue:
Placeholder was pale blue with excessive empty height.
========================================================= */
#midnightMinimalThemeStage
[data-np-panel="playlists"]{
min-height:0 !important;
height:auto !important;
padding:22px 20px !important;
background:#ffffff !important;
background-image:none !important;
color:#3d3d3d !important;
}
#midnightMinimalThemeStage
[data-np-panel="playlists"] h2{
display:none !important;
}
#midnightMinimalThemeStage
[data-np-panel="playlists"] p{
margin:0 !important;
padding:0 !important;
color:#55524d !important;
-webkit-text-fill-color:#55524d !important;
opacity:1 !important;
background:transparent !important;
border:0 !important;
font-size:14px !important;
line-height:1.5 !important;
}
/* =========================================================
5 — STORE
Screenshot issue:
Purchase-options message was pale blue and panel had
unnecessary blank space.
========================================================= */
#midnightMinimalThemeStage
[data-np-panel="store"]{
min-height:0 !important;
height:auto !important;
padding:22px 20px !important;
background:#ffffff !important;
background-image:none !important;
color:#3d3d3d !important;
}
#midnightMinimalThemeStage
[data-np-panel="store"] h2{
display:none !important;
}
#midnightMinimalThemeStage
[data-np-panel="store"] p{
margin:0 !important;
padding:0 !important;
color:#55524d !important;
-webkit-text-fill-color:#55524d !important;
opacity:1 !important;
background:transparent !important;
border:0 !important;
font-size:14px !important;
line-height:1.5 !important;
}
/* =========================================================
6 — PHOTOS
NO gallery changes here.
Photo gallery remains deferred.
========================================================= */
/* =========================================================
7 — MOBILE SAFETY
Desktop identity correction must not push the mobile
identity block downward.
========================================================= */
@media(max-width:720px){
#midnightMinimalThemeStage
.np-identity{
transform:none !important;
}
}
/* END MIDNIGHT MINIMAL SURGICAL SCREENSHOT CORRECTION */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL
IDLE WAVEFORM CONTRAST CORRECTION
Scope:
Midnight Minimal track waveform only.
No layout/playback/controller changes.
========================================================= */
#midnightMinimalThemeStage
.np-track-wave
svg.np-approved-wave-svg:not(.mm-wave-progress-svg){
opacity:1 !important;
color:#686966 !important;
}
#midnightMinimalThemeStage
.np-track-wave
svg.np-approved-wave-svg:not(.mm-wave-progress-svg) path{
fill:#686966 !important;
color:#686966 !important;
opacity:1 !important;
}
/* Active playback progress stays Midnight gold. */
#midnightMinimalThemeStage
.np-track-wave
svg.mm-wave-progress-svg,
#midnightMinimalThemeStage
.np-track-wave
svg.mm-wave-progress-svg path{
color:#c89548 !important;
fill:#c89548 !important;
opacity:1 !important;
}
/* END MIDNIGHT MINIMAL IDLE WAVEFORM CONTRAST CORRECTION */
/* =========================================================
OSBEATS 20260909 MIDNIGHT MINIMAL
LAST-GOOD BANNER FRAMING — VISIBILITY ONLY
IMPORTANT:
Does NOT change background-size.
Does NOT change background-position.
Does NOT change hero dimensions.
========================================================= */
#midnightMinimalThemeStage
.np-hero{
filter:
grayscale(1)
brightness(1.10)
contrast(1.06) !important;
}
/*
Reduce the existing Midnight shade without replacing its
sizing/framing rules.
*/
#midnightMinimalThemeStage
.np-hero-shade{
opacity:
.38 !important;
}
/* END MIDNIGHT MINIMAL LAST-GOOD BANNER VISIBILITY ONLY */
/* =========================================================
OSBEATS 20260910 AURORA WAVE
EXACT APPROVED MOCKUP VISUAL SYSTEM
Reference:
Approved Aurora Wave storefront mockup.
No alternate Aurora design language.
========================================================= */
body.storefront-theme-aurora-wave{
background:#07131b !important;
}
/* =========================================================
SHELL
========================================================= */
#auroraWaveThemeStage{
--aw-cyan:#19e5ed;
--aw-cyan-2:#08b9c9;
--aw-dark:#04131b;
--aw-dark-2:#061a23;
--aw-row:#061820;
--aw-line:#183d47;
--aw-muted:#9eb5bc;
}
#auroraWaveThemeStage .np-shell{
border:1px solid #13dce5 !important;
border-radius:10px !important;
background:#04131b !important;
box-shadow:
0 18px 44px rgba(0,0,0,.38),
0 0 22px rgba(25,229,237,.09) !important;
}
/* =========================================================
HEADER
========================================================= */
#auroraWaveThemeStage .np-topbar{
background:#05131b !important;
border-bottom:
1px solid #12cbd6 !important;
}
#auroraWaveThemeStage .np-brand{
color:#fff !important;
}
/*
Approved mockup keeps normal OSBeats brand contrast.
*/
#auroraWaveThemeStage .np-brand strong{
color:#f39b18 !important;
}
#auroraWaveThemeStage .np-brand span{
color:#fff !important;
}
#auroraWaveThemeStage .np-global-search{
border:1px solid #294854 !important;
background:#0b202a !important;
}
#auroraWaveThemeStage .np-global-search,
#auroraWaveThemeStage .np-global-search input{
color:#dcebed !important;
}
#auroraWaveThemeStage .np-global-search input::placeholder{
color:#869fa7 !important;
}
#auroraWaveThemeStage .np-global-nav a{
color:#fff !important;
}
#auroraWaveThemeStage .np-global-nav a:hover{
color:#19e5ed !important;
}
#auroraWaveThemeStage .np-top-icon,
#auroraWaveThemeStage .np-top-icon svg{
color:#d8e8ea !important;
stroke:#d8e8ea !important;
}
#auroraWaveThemeStage .np-mini-avatar{
border:2px solid #19e5ed !important;
box-shadow:
0 0 10px rgba(25,229,237,.22) !important;
}
/* =========================================================
APPROVED HERO / BANNER
========================================================= */
#auroraWaveThemeStage .aw-hero{
background:#04131b !important;
border-bottom:
1px solid #16dce5 !important;
}
/*
Real creator banner becomes the cyan/teal photographic
presentation shown in the approved Aurora mockup.
*/
#auroraWaveThemeStage .aw-hero-image{
z-index:0 !important;
background-image:
var(--aw-banner-image) !important;
background-size:
cover !important;
background-position:
center 40% !important;
background-repeat:
no-repeat !important;
filter:
grayscale(1)
brightness(.67)
contrast(1.18) !important;
}
#auroraWaveThemeStage .aw-hero-shade{
z-index:1 !important;
background:
linear-gradient(
90deg,
#007e93 0%,
#00aebf 44%,
#00869f 70%,
#005c72 100%
) !important;
opacity:.78 !important;
mix-blend-mode:color !important;
pointer-events:none !important;
}
/*
Exact banner-wave treatment:
two clean horizontal waveform lines, not bars.
*/
#auroraWaveThemeStage .aw-banner-wave{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
z-index:3 !important;
width:100% !important;
height:64px !important;
overflow:visible !important;
pointer-events:none !important;
}
#auroraWaveThemeStage .aw-banner-wave path{
fill:none !important;
vector-effect:
non-scaling-stroke !important;
}
#auroraWaveThemeStage .aw-banner-wave-soft{
stroke:#087f99 !important;
stroke-width:1.1 !important;
opacity:.62 !important;
}
#auroraWaveThemeStage .aw-banner-wave-main{
stroke:#19e5ed !important;
stroke-width:2 !important;
opacity:.92 !important;
filter:
drop-shadow(
0 0 3px
rgba(25,229,237,.50)
) !important;
}
/* =========================================================
PROFILE STRIP
========================================================= */
#auroraWaveThemeStage .np-profile-strip{
background:
linear-gradient(
180deg,
#061a23,
#05151d
) !important;
border-bottom:
1px solid #173c47 !important;
color:#fff !important;
}
#auroraWaveThemeStage .np-avatar{
border:
3px solid #19e5ed !important;
background-color:
#061820 !important;
box-shadow:
0 0 0 4px #04131b,
0 0 18px rgba(25,229,237,.34) !important;
}
#auroraWaveThemeStage .np-identity{
}
#auroraWaveThemeStage .np-identity h1{
color:#fff !important;
}
#auroraWaveThemeStage .aw-verified{
background:#199ee2 !important;
color:#fff !important;
}
#auroraWaveThemeStage .np-identity-meta{
color:#d6e3e6 !important;
}
#auroraWaveThemeStage .np-identity-meta i{
color:#19e5ed !important;
}
#auroraWaveThemeStage .np-identity p{
color:#c2d2d6 !important;
}
#auroraWaveThemeStage .np-social{
color:#fff !important;
}
#auroraWaveThemeStage .np-social svg{
stroke:#fff !important;
}
#auroraWaveThemeStage .np-social:hover svg{
stroke:#19e5ed !important;
}
/* =========================================================
ACTIONS / STATS
========================================================= */
#auroraWaveThemeStage .np-follow{
border:1px solid #19e5ed !important;
background:
linear-gradient(
180deg,
#24ebef,
#16cbd6
) !important;
color:#031216 !important;
box-shadow:none !important;
}
#auroraWaveThemeStage .np-message{
border:1px solid #18c9d4 !important;
background:#06141c !important;
color:#fff !important;
}
#auroraWaveThemeStage .np-inline-stats strong{
color:#fff !important;
}
#auroraWaveThemeStage .np-inline-stats span{
color:#9eb5bc !important;
}
/* =========================================================
TABS
========================================================= */
#auroraWaveThemeStage .np-tabs{
background:#061820 !important;
border-top:
1px solid #183d47 !important;
border-bottom:
1px solid #173f49 !important;
}
#auroraWaveThemeStage .np-tabs button{
color:#e5f0f2 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#auroraWaveThemeStage .np-tabs button svg,
#auroraWaveThemeStage .np-tabs button svg *{
stroke:#c6d9dd !important;
}
#auroraWaveThemeStage .np-tabs button.active,
#auroraWaveThemeStage .np-tabs button.active span{
color:#19e5ed !important;
}
#auroraWaveThemeStage .np-tabs button.active svg,
#auroraWaveThemeStage .np-tabs button.active svg *{
stroke:#19e5ed !important;
}
#auroraWaveThemeStage .np-tabs button.active::after{
background:#19e5ed !important;
}
/* =========================================================
MUSIC PANEL
========================================================= */
#auroraWaveThemeStage .np-panel{
background:#04131b !important;
color:#fff !important;
}
#auroraWaveThemeStage .np-track-tools{
border-bottom:
1px solid #24434d !important;
}
#auroraWaveThemeStage .np-track-tools h2{
color:#fff !important;
}
#auroraWaveThemeStage .np-track-search,
#auroraWaveThemeStage .np-track-filters select{
border:1px solid #2a4a54 !important;
background:#0a1e27 !important;
color:#dce9eb !important;
}
#auroraWaveThemeStage .np-track-search input{
color:#dce9eb !important;
}
#auroraWaveThemeStage .np-track-search input::placeholder{
color:#899fa6 !important;
}
/* =========================================================
TRACK ROWS
========================================================= */
#auroraWaveThemeStage .np-track-row{
background:#061820 !important;
border-bottom:
1px solid #193b45 !important;
}
#auroraWaveThemeStage .np-track-row:nth-child(even){
background:#05161e !important;
}
#auroraWaveThemeStage .np-track-row:hover{
background:#08202a !important;
}
#auroraWaveThemeStage .np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(25,229,237,.12),
#061820 19%
) !important;
box-shadow:
inset 2px 0 0
#19e5ed !important;
}
#auroraWaveThemeStage .np-track-cover{
border:
1px solid #25505b !important;
border-radius:0 !important;
}
#auroraWaveThemeStage .np-cover-fallback{
color:#19e5ed !important;
}
#auroraWaveThemeStage .np-track-copy strong{
color:#fff !important;
}
#auroraWaveThemeStage .np-track-copy small{
color:#92aab1 !important;
}
/* =========================================================
PLAY BUTTON
========================================================= */
#auroraWaveThemeStage .aw-track-play{
border:
1px solid #19e5ed !important;
border-radius:
50% !important;
background:
#071b23 !important;
color:#fff !important;
box-shadow:none !important;
}
#auroraWaveThemeStage .aw-track-play:hover{
background:#0a2730 !important;
}
#auroraWaveThemeStage
.aw-track-play[data-aw-state="playing"]{
background:#19e5ed !important;
color:#031216 !important;
}
/* =========================================================
TRACK WAVEFORM
========================================================= */
#auroraWaveThemeStage .aw-track-wave{
position:relative !important;
overflow:hidden !important;
pointer-events:none !important;
}
#auroraWaveThemeStage
.aw-track-wave
svg.np-approved-wave-svg{
display:block !important;
width:100% !important;
height:100% !important;
}
#auroraWaveThemeStage
.aw-track-wave
svg.np-approved-wave-svg
.np-approved-wave-path{
fill:#087d95 !important;
opacity:.88 !important;
}
#auroraWaveThemeStage
.aw-track-wave
svg.aw-wave-progress-svg{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
}
#auroraWaveThemeStage
.aw-track-wave
svg.aw-wave-progress-svg
.np-approved-wave-path{
fill:#19e5ed !important;
opacity:1 !important;
}
#auroraWaveThemeStage .np-track-duration{
color:#e1ecee !important;
}
#auroraWaveThemeStage .np-track-heart,
#auroraWaveThemeStage .np-track-more{
color:#fff !important;
}
/* =========================================================
PRICE BUTTON
========================================================= */
#auroraWaveThemeStage .np-track-price{
border:
1px solid #18d6df !important;
border-radius:
4px !important;
background:
linear-gradient(
180deg,
#27e9ee,
#15cad4
) !important;
color:#031216 !important;
font-weight:800 !important;
box-shadow:none !important;
}
/* =========================================================
AUXILIARY TABS
========================================================= */
#auroraWaveThemeStage .np-simple-panel{
background:#061820 !important;
color:#d3e1e4 !important;
}
#auroraWaveThemeStage .np-simple-panel h2{
color:#fff !important;
}
#auroraWaveThemeStage .np-simple-panel p{
color:#a7bec4 !important;
}
/* =========================================================
DESKTOP MOCKUP GEOMETRY
========================================================= */
@media(min-width:721px){
#auroraWaveThemeStage .np-profile-strip{
}
#auroraWaveThemeStage .np-identity{
}
}
/* =========================================================
MOBILE
Preserve same approved visual system responsively.
========================================================= */
@media(max-width:720px){
#auroraWaveThemeStage .aw-hero{
}
#auroraWaveThemeStage .aw-banner-wave{
height:48px !important;
}
#auroraWaveThemeStage .np-identity{
}
#auroraWaveThemeStage .np-simple-panel{
}
}
/* END AURORA WAVE EXACT APPROVED MOCKUP VISUAL SYSTEM */
/* =========================================================
OSBEATS 20260910
STANDARD NATIVE STOREFRONT LICENSING MODALS
Neon Pulse
Midnight Minimal
Aurora Wave
========================================================= */
/* ---------------------------------------------------------
SHARED OPTIONS LAYOUT
--------------------------------------------------------- */
.custom-theme-feature-modal
.theme-license-track-heading{
display:flex;
flex-direction:column;
gap:5px;
margin:0 0 15px;
padding:0 2px 12px;
}
.custom-theme-feature-modal
.theme-license-track-heading strong{
font-size:15px;
line-height:1.3;
}
.custom-theme-feature-modal
.theme-license-track-heading span{
font-size:11px;
line-height:1.45;
}
.custom-theme-feature-modal
.theme-license-grid.options{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.custom-theme-feature-modal
.theme-license-option-title{
display:block;
margin:-6px 0 12px;
font-size:11px;
font-weight:700;
}
.custom-theme-feature-modal
.theme-license-option-card p{
min-height:92px;
}
@media(max-width:700px){
.custom-theme-feature-modal
.theme-license-grid.options{
grid-template-columns:1fr;
}
.custom-theme-feature-modal
.theme-license-option-card p{
min-height:0;
}
}
/* =========================================================
NEON PULSE
========================================================= */
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.custom-theme-feature-backdrop{
background:
rgba(3,5,17,.80) !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.custom-theme-feature-dialog{
border:
1px solid #9137ff !important;
border-top:
3px solid #bd28ff !important;
background:
linear-gradient(
145deg,
#081226,
#080716 72%
) !important;
color:#ffffff !important;
box-shadow:
0 0 40px
rgba(159,45,255,.22) !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.custom-theme-feature-close{
border-color:#7941aa !important;
background:#0b1224 !important;
color:#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.custom-theme-feature-kicker{
color:#c12cff !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-track-heading{
border-bottom:
1px solid #2c3151 !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-track-heading strong{
color:#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-track-heading span{
color:#aeb8c9 !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-grid article{
border:
1px solid #34385d !important;
background:#091224 !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-grid article>span{
color:#c12cff !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-grid article>strong,
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-option-title{
color:#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-grid article p{
color:#aeb8c9 !important;
}
#customThemeFeatureModal[
data-storefront-theme="neon-pulse"
]
.theme-license-grid article button{
border:
1px solid #a742ff !important;
background:
linear-gradient(
90deg,
#6c2cff,
#ba27ff
) !important;
color:#ffffff !important;
}
/* =========================================================
MIDNIGHT MINIMAL
========================================================= */
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.custom-theme-feature-backdrop{
background:
rgba(0,0,0,.62) !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.custom-theme-feature-dialog{
border:
1px solid #c89548 !important;
border-top:
3px solid #d6a452 !important;
background:
#f7f5ef !important;
color:#111111 !important;
box-shadow:
0 16px 42px
rgba(0,0,0,.24) !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.custom-theme-feature-close{
border-color:#b8aa90 !important;
background:#ffffff !important;
color:#111111 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.custom-theme-feature-kicker{
color:#9d681f !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.custom-theme-feature-dialog h2{
color:#111111 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.custom-theme-feature-body{
color:#333333 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-track-heading{
border-bottom:
1px solid #d9d4c9 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-track-heading strong{
color:#111111 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-track-heading span{
color:#5d5b57 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-grid article{
border:
1px solid #d6d0c3 !important;
background:#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-grid article>span{
color:#9b661d !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-grid article>strong{
color:#111111 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-option-title{
color:#4b4842 !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-grid article p{
color:#55524c !important;
}
#customThemeFeatureModal[
data-storefront-theme="midnight-minimal"
]
.theme-license-grid article button{
border:
1px solid #b77d29 !important;
background:
linear-gradient(
180deg,
#dfb05f,
#c9913a
) !important;
color:#111111 !important;
}
/* =========================================================
AURORA WAVE
========================================================= */
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.custom-theme-feature-backdrop{
background:
rgba(1,11,16,.80) !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.custom-theme-feature-dialog{
border:
1px solid #17dfe8 !important;
border-top:
3px solid #20e9ef !important;
background:
linear-gradient(
145deg,
#061922,
#041117 72%
) !important;
color:#ffffff !important;
box-shadow:
0 0 40px
rgba(23,230,238,.18) !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.custom-theme-feature-close{
border-color:#24717c !important;
background:#071820 !important;
color:#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.custom-theme-feature-kicker{
color:#19e5ed !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-track-heading{
border-bottom:
1px solid #1b414b !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-track-heading strong{
color:#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-track-heading span{
color:#a6bdc3 !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-grid article{
border:
1px solid #22505a !important;
background:#071922 !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-grid article>span{
color:#19e5ed !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-grid article>strong,
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-option-title{
color:#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-grid article p{
color:#9fb7bd !important;
}
#customThemeFeatureModal[
data-storefront-theme="aurora-wave"
]
.theme-license-grid article button{
border:
1px solid #18dce5 !important;
background:
linear-gradient(
180deg,
#25e9ed,
#14c9d3
) !important;
color:#031216 !important;
}
#signalGridThemeStage{
--std-page:#050d11;
--std-shell:#071218;
--std-top:#050b0f;
--std-profile:#08171d;
--std-tabs:#07141a;
--std-panel:#07141a;
--std-row:#08171d;
--std-row-alt:#061319;
--std-hover:#0a2027;
--std-text:#f3fbfc;
--std-top-text:#f3fbfc;
--std-muted:#93aeb5;
--std-border:#28464d;
--std-accent:#6eff8c;
--std-action:#6eff8c;
--std-action-text:#031008;
--std-input:#0b1c22;
--std-input-text:#e8f7f8;
--std-wave:#399eaa;
--std-wave-active:#6eff8c;
--std-play-bg:#081c22;
--std-play-text:#6eff8c;
--std-hero-filter:
grayscale(.36)
saturate(.75)
brightness(.59)
contrast(1.18);
--std-hero-shade:
linear-gradient(
90deg,
rgba(5,16,20,.34),
rgba(31,125,106,.12) 46%,
rgba(17,86,104,.20)
);
}
#crimsonLuxeThemeStage{
--std-page:#0b0808;
--std-shell:#100909;
--std-top:#090707;
--std-profile:#130c0c;
--std-tabs:#100909;
--std-panel:#100909;
--std-row:#150d0d;
--std-row-alt:#110a0a;
--std-hover:#1d1010;
--std-text:#fff7ef;
--std-top-text:#fff7ef;
--std-muted:#b9aaa4;
--std-border:#4c2929;
--std-accent:#e7444f;
--std-action:#d6aa55;
--std-action-text:#15100a;
--std-input:#1b1111;
--std-input-text:#f7eeee;
--std-wave:#9d3039;
--std-wave-active:#ef4b56;
--std-play-bg:#1b1010;
--std-play-text:#f5d8d8;
--std-hero-filter:
saturate(.82)
brightness(.62)
contrast(1.14);
--std-hero-shade:
linear-gradient(
90deg,
rgba(36,5,7,.30),
rgba(134,17,27,.16) 52%,
rgba(19,7,8,.34)
);
}
body.storefront-theme-signal-grid{
background:#050d11 !important;
}
body.storefront-theme-crimson-luxe{
background:#0b0808 !important;
}
/* =========================================================
CRIMSON LUXE DISTINCTIVE ACCENTS
========================================================= */
#crimsonLuxeThemeStage
.np-brand strong{
color:
#d6aa55 !important;
}
#crimsonLuxeThemeStage
.np-follow,
#crimsonLuxeThemeStage
.np-track-price{
background:
linear-gradient(
180deg,
#e4bc6a,
#c89542
) !important;
border-color:
#d4a552 !important;
}
#crimsonLuxeThemeStage
.np-avatar{
border-color:
#ef4651 !important;
}
/* END THREE STANDARD PALETTE THEMES */
/* =========================================================
THREE NEW STANDARD THEME LICENSING MODALS
========================================================= */
#customThemeFeatureModal[
data-storefront-theme="ivory-gold"
]{
--new-modal-bg:#f7f3e9;
--new-modal-card:#ffffff;
--new-modal-text:#111111;
--new-modal-muted:#59554d;
--new-modal-line:#d5c5a5;
--new-modal-accent:#c39443;
--new-modal-button:#d8a64d;
--new-modal-button-text:#111111;
}
#customThemeFeatureModal[
data-storefront-theme="signal-grid"
]{
--new-modal-bg:#061319;
--new-modal-card:#081a20;
--new-modal-text:#f3fbfc;
--new-modal-muted:#9bb4ba;
--new-modal-line:#31535a;
--new-modal-accent:#6eff8c;
--new-modal-button:#6eff8c;
--new-modal-button-text:#031008;
}
#customThemeFeatureModal[
data-storefront-theme="crimson-luxe"
]{
--new-modal-bg:#120b0b;
--new-modal-card:#180f0f;
--new-modal-text:#fff7ef;
--new-modal-muted:#b9aaa4;
--new-modal-line:#563131;
--new-modal-accent:#ef4651;
--new-modal-button:#d6aa55;
--new-modal-button-text:#15100a;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.custom-theme-feature-backdrop{
background:
rgba(0,0,0,.72) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.custom-theme-feature-dialog{
background:
var(--new-modal-bg) !important;
border:
1px solid
var(--new-modal-accent) !important;
border-top:
3px solid
var(--new-modal-accent) !important;
color:
var(--new-modal-text) !important;
box-shadow:
0 18px 44px
rgba(0,0,0,.30) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.custom-theme-feature-dialog h2,
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-track-heading strong{
color:
var(--new-modal-text) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.custom-theme-feature-kicker,
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-grid article>span{
color:
var(--new-modal-accent) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-track-heading{
border-bottom-color:
var(--new-modal-line) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-track-heading span,
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-grid article p{
color:
var(--new-modal-muted) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-grid article{
background:
var(--new-modal-card) !important;
border-color:
var(--new-modal-line) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-grid article>strong,
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-option-title{
color:
var(--new-modal-text) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.theme-license-grid article button{
background:
var(--new-modal-button) !important;
border-color:
var(--new-modal-button) !important;
color:
var(--new-modal-button-text) !important;
}
:is(
#customThemeFeatureModal[data-storefront-theme="ivory-gold"],
#customThemeFeatureModal[data-storefront-theme="signal-grid"],
#customThemeFeatureModal[data-storefront-theme="crimson-luxe"]
)
.custom-theme-feature-close{
background:
var(--new-modal-card) !important;
border-color:
var(--new-modal-line) !important;
color:
var(--new-modal-text) !important;
}
/* END THREE NEW STANDARD THEME LICENSING MODALS */
/* =========================================================
OSBEATS 20260910
IVORY GOLD / SIGNAL GRID / CRIMSON LUXE
FIDELITY CORRECTION #1
========================================================= */
/* ---------------------------------------------------------
IVORY GOLD
Lower creator identity into the profile band.
Avatar, banner, actions and stats remain unchanged.
--------------------------------------------------------- */
@media(min-width:721px){
}
/* ---------------------------------------------------------
SIGNAL GRID
Approved presentation stays clean/dark.
Remove the square-box texture that was introduced during
the initial palette build.
--------------------------------------------------------- */
#signalGridThemeStage
.np-profile-strip,
#signalGridThemeStage
.np-tabs,
#signalGridThemeStage
.np-panel{
background-image:
none !important;
}
body.storefront-theme-signal-grid
.storefront-theme-preview-bar{
border:
1px solid #3bcf76 !important;
border-left:
4px solid #6eff8c !important;
}
body.storefront-theme-signal-grid
.storefront-theme-preview-bar > div > span{
color:
#6eff8c !important;
}
body.storefront-theme-signal-grid
.storefront-theme-preview-bar a{
border-color:
#3bcf76 !important;
}
body.storefront-theme-crimson-luxe
.storefront-theme-preview-bar{
border:
1px solid #b52f3b !important;
border-left:
4px solid #ef4651 !important;
}
body.storefront-theme-crimson-luxe
.storefront-theme-preview-bar > div > span{
color:
#ef4651 !important;
}
body.storefront-theme-crimson-luxe
.storefront-theme-preview-bar a{
border-color:
#b52f3b !important;
}
/* SIGNAL GRID */
body.storefront-theme-signal-grid
.os-global-footer,
body.storefront-theme-signal-grid
footer.os-global-footer{
border-top:
1px solid #31535a !important;
box-shadow:
none !important;
}
/* CRIMSON LUXE */
body.storefront-theme-crimson-luxe
.os-global-footer,
body.storefront-theme-crimson-luxe
footer.os-global-footer{
border-top:
1px solid #9e2833 !important;
box-shadow:
none !important;
}body.storefront-theme-signal-grid
.os-global-footer::before,
body.storefront-theme-signal-grid
.os-global-footer::after,
body.storefront-theme-crimson-luxe
.os-global-footer::before,
body.storefront-theme-crimson-luxe
.os-global-footer::after{
background:
transparent !important;
background-image:
none !important;
border-color:
transparent !important;
box-shadow:
none !important;
}
/* END THREE THEME FIDELITY CORRECTION #1 */
/* =========================================================
OSBEATS 20260910 FINAL TWO ADVANCED THEME CSS
BENTO STUDIO + EDITORIAL WAVE
========================================================= */
body.storefront-theme-advanced-preview{
background:#06090b !important;
}
/* =========================================================
ADVANCED PREVIEW BAR
========================================================= */
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar{
background:#071019 !important;
border:1px solid #a42a30 !important;
border-left:4px solid #ef2f3a !important;
color:#fff !important;
}
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar span{
color:#ef2f3a !important;
}
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar a{
border-color:#a42a30 !important;
color:#fff !important;
}
/* =========================================================
SHARED
========================================================= */
.bs-stage *,
.ew-stage *{
box-sizing:border-box;
}
.bs-stage button,
.bs-stage input,
.ew-stage button,
.ew-stage input{
font:inherit;
}
.bs-stage button,
.ew-stage button{
cursor:pointer;
}
.adv-verified{
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
margin-left:5px;
border-radius:50%;
background:#ef303c;
color:#fff;
font-size:12px;
vertical-align:middle;
}
/* =========================================================
BENTO STUDIO
========================================================= */
.bs-stage{
width:min(1180px,calc(100% - 48px));
margin:14px auto 28px;
color:#f5f7f8;
}
.bs-shell{
overflow:hidden;
border:1px solid #374047;
border-radius:15px;
background:
linear-gradient(
145deg,
#080d10,
#0b1115 55%,
#070b0e
);
box-shadow:
0 22px 70px rgba(0,0,0,.46);
}
.bs-topbar{
min-height:60px;
display:grid;
grid-template-columns:auto minmax(220px,420px) 1fr;
align-items:center;
gap:24px;
padding:0 20px;
border-bottom:1px solid #252d32;
background:#090e12;
}
.bs-brand{
display:inline-flex;
align-items:center;
text-decoration:none;
font-size:22px;
font-weight:900;
letter-spacing:-1px;
}
.bs-brand strong{
color:#fff;
}
.bs-brand span{
color:#ef303c;
}
.bs-global-search{
min-height:36px;
display:flex;
align-items:center;
gap:8px;
padding:0 12px;
border:1px solid #293238;
border-radius:7px;
background:#10171c;
}
.bs-global-search span{
color:#aeb7bd;
}
.bs-global-search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:#fff;
font-size:12px;
}
.bs-topbar nav{
display:flex;
justify-content:flex-end;
gap:24px;
}
.bs-topbar nav a{
color:#e5e8ea;
text-decoration:none;
font-size:11px;
}
.bs-layout{
display:grid;
grid-template-columns:265px minmax(0,1fr);
min-height:720px;
}
.bs-left{
padding:18px 15px;
border-right:1px solid #252d32;
background:#080d10;
}
.bs-profile-card{
padding:18px 15px;
text-align:center;
border:1px solid #293238;
border-radius:10px;
background:
linear-gradient(
180deg,
#10171b,
#0a1013
);
}
.bs-avatar{
width:138px;
height:138px;
margin:0 auto 12px;
border:1px solid #8f989f;
border-radius:50%;
background-position:center;
background-size:cover;
box-shadow:
0 0 0 4px #171d21;
}
.bs-avatar.is-empty{
display:flex;
align-items:center;
justify-content:center;
background:#151b20;
color:#ef303c;
font-size:34px;
font-weight:900;
}
.bs-profile-card h1{
margin:0;
color:#fff;
font-size:26px;
line-height:1.05;
}
.bs-role{
margin:7px 0;
color:#d4d9dc;
font-size:12px;
}
.bs-bio{
margin:12px auto 14px;
max-width:220px;
color:#c2c9cd;
font-size:12px;
line-height:1.45;
}
.bs-profile-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.bs-profile-actions button,
.bs-profile-actions a{
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:5px;
text-decoration:none;
font-weight:800;
font-size:12px;
}
.bs-follow{
border:1px solid #ff4650;
background:
linear-gradient(
135deg,
#e62631,
#ff3945
);
color:#fff;
}
.bs-message{
border:1px solid #4b565d;
background:#11181d;
color:#fff;
}
.bs-socials{
margin-top:14px;
display:flex;
justify-content:center;
gap:13px;
}
.bs-socials a{
color:#fff !important;
}
.bs-side-nav{
margin-top:14px;
display:grid;
gap:3px;
}
.bs-side-nav a{
padding:10px 12px;
border-radius:5px;
color:#cdd3d6;
text-decoration:none;
font-size:12px;
}
.bs-side-nav a.active,
.bs-side-nav a:hover{
background:#151d22;
color:#fff;
box-shadow:
inset 3px 0 #ef303c;
}
.bs-side-quote{
margin-top:22px;
padding:16px;
border:1px solid #293238;
border-radius:8px;
background:#10171b;
}
.bs-side-quote strong{
color:#ef303c;
font-size:11px;
letter-spacing:1px;
}
.bs-side-quote p{
margin:8px 0 0;
color:#dce1e3;
font-size:12px;
line-height:1.5;
}
.bs-main{
padding:16px;
}
.bs-featured{
display:grid;
grid-template-columns:215px 1fr;
min-height:235px;
border:1px solid #2e373d;
border-radius:10px;
background:
linear-gradient(
135deg,
#10171b,
#0a1013
);
overflow:hidden;
}
.bs-featured-art{
position:relative;
margin:14px;
border-radius:7px;
background-position:center;
background-size:cover;
overflow:hidden;
}
.bs-featured-art.is-empty{
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
145deg,
#3a0c10,
#0b1014
);
}
.bs-featured-art.is-empty b{
color:#ef303c;
}
.bs-featured-label{
position:absolute;
top:10px;
left:10px;
padding:5px 8px;
border-radius:4px;
background:#14191d;
color:#fff;
font-size:9px;
font-weight:900;
letter-spacing:1.5px;
text-transform:uppercase;
}
.bs-featured-body{
padding:24px 20px 18px 4px;
}
.bs-featured-heading{
display:flex;
justify-content:space-between;
gap:18px;
}
.bs-featured-heading small{
color:#9ba5aa;
text-transform:uppercase;
letter-spacing:1.5px;
font-size:9px;
}
.bs-featured-heading h2{
margin:4px 0;
color:#fff;
font-size:24px;
}
.bs-featured-heading p{
margin:0;
color:#aab3b8;
font-size:11px;
}
.bs-feature-options{
width:34px;
height:34px;
border:1px solid #2d373d;
border-radius:6px;
background:#12191d;
color:#fff;
}
.bs-wave,
.ew-wave,
.ew-now-wave{
border:0;
background:transparent;
}
.bs-wave{
width:100%;
height:68px;
margin-top:10px;
padding:0;
display:flex;
align-items:center;
gap:2px;
}
.bs-wave i,
.ew-wave i,
.ew-now-wave i{
display:block;
width:2px;
min-height:3px;
background:#737d83;
border-radius:2px;
}
.bs-wave i:nth-child(-n+24),
.ew-now-wave i:nth-child(-n+20){
background:#ef303c;
}
.bs-featured-times{
display:flex;
justify-content:space-between;
margin-top:-6px;
color:#929ba0;
font-size:10px;
}
.bs-player-controls{
display:flex;
justify-content:center;
align-items:center;
gap:19px;
}
.bs-player-controls button{
border:0;
background:transparent;
color:#fff;
}
.bs-main-play{
width:48px;
height:48px;
border-radius:50% !important;
background:
linear-gradient(
135deg,
#e92631,
#ff3844
) !important;
font-size:18px;
}
.bs-stats{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:9px;
margin-top:10px;
}
.bs-stats article{
min-height:72px;
display:grid;
grid-template-columns:32px 1fr;
grid-template-rows:1fr 1fr;
align-items:center;
padding:10px;
border:1px solid #283238;
border-radius:7px;
background:#10171b;
}
.bs-stats article > span{
grid-row:1 / 3;
color:#ef303c;
font-size:21px;
}
.bs-stats strong{
color:#fff;
font-size:17px;
}
.bs-stats small{
color:#8f999e;
font-size:9px;
}
.bs-content-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:10px;
margin-top:10px;
}
.bs-library,
.bs-bundle-box,
.bs-license-box,
.bs-about{
border:1px solid #2b353a;
border-radius:9px;
background:#0c1216;
}
.bs-library{
padding:13px;
}
.bs-section-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}
.bs-section-heading > div{
display:flex;
align-items:center;
gap:9px;
}
.bs-section-heading > div > span{
width:20px;
height:3px;
display:block;
background:#ef303c;
}
.bs-section-heading strong{
color:#fff;
font-size:11px;
text-transform:uppercase;
letter-spacing:1.5px;
}
.bs-section-heading small{
color:#8d979c;
font-size:9px;
}
.bs-genre-row{
display:flex;
gap:7px;
margin-bottom:12px;
overflow:auto;
}
.bs-genre-row button{
min-width:52px;
padding:7px 11px;
border:1px solid #2a3439;
border-radius:6px;
background:#141b20;
color:#bec6ca;
font-size:10px;
}
.bs-genre-row button.active{
border-color:#ef303c;
background:#ef303c;
color:#fff;
}
.bs-track-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.bs-track-card{
overflow:hidden;
border:1px solid #2d363c;
border-radius:7px;
background:#10161a;
}
.bs-track-card.playing{
border-color:#ef303c;
}
.bs-track-art{
position:relative;
aspect-ratio:1;
background-position:center;
background-size:cover;
}
.bs-track-art.is-empty{
display:flex;
align-items:center;
justify-content:center;
background:#171d21;
}
.bs-track-art.is-empty span{
color:#ef303c;
font-weight:900;
}
.bs-card-play{
position:absolute;
left:50%;
bottom:10px;
width:34px;
height:34px;
transform:translateX(-50%);
border:1px solid #fff;
border-radius:50%;
background:rgba(5,8,10,.8);
color:#fff;
}
.bs-track-card-copy{
padding:9px;
}
.bs-track-card-copy > strong{
display:block;
overflow:hidden;
color:#fff;
font-size:11px;
white-space:nowrap;
text-overflow:ellipsis;
}
.bs-track-card-copy > small{
color:#818d92;
font-size:9px;
}
.bs-track-card-copy > div{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:8px;
}
.bs-track-card-copy b{
color:#fff;
font-size:11px;
}
.bs-track-card-copy button{
border:0;
background:transparent;
color:#fff;
}
.bs-right-stack{
display:grid;
gap:10px;
}
.bs-bundle-box,
.bs-license-box{
padding:13px;
}
.bs-bundle-box article{
padding:12px;
border:1px solid #293238;
border-radius:6px;
background:#11181c;
}
.bs-bundle-box article + article{
margin-top:8px;
}
.bs-bundle-box article strong,
.bs-bundle-box article b{
color:#fff;
}
.bs-bundle-box article p{
color:#9ca6ab;
font-size:10px;
}
.bs-license-box{
min-height:175px;
display:flex;
align-items:center;
background:
linear-gradient(
135deg,
#0d1418 45%,
#201013
);
}
.bs-license-box small{
color:#ef303c;
text-transform:uppercase;
letter-spacing:1px;
}
.bs-license-box h3{
margin:7px 0;
color:#fff;
}
.bs-license-box p{
color:#aeb7bb;
font-size:11px;
line-height:1.5;
}
.bs-license-box button{
padding:9px 12px;
border:1px solid #596369;
border-radius:5px;
background:#12191d;
color:#fff;
}
.bs-about{
display:grid;
grid-template-columns:1fr 190px;
margin-top:10px;
overflow:hidden;
}
.bs-about > div:first-child{
padding:18px;
}
.bs-about small{
color:#ef303c;
text-transform:uppercase;
letter-spacing:1.5px;
}
.bs-about h3{
margin:6px 0;
}
.bs-about p{
color:#bbc3c7;
font-size:12px;
line-height:1.55;
}
.bs-about-image{
min-height:150px;
background-position:center;
background-size:cover;
filter:
grayscale(.55)
brightness(.55);
}
.bs-bottom-banner{
min-height:85px;
margin-top:10px;
padding:18px;
display:flex;
align-items:center;
justify-content:space-between;
border:1px solid #2b3439;
border-radius:8px;
background-position:center;
background-size:cover;
position:relative;
overflow:hidden;
}
.bs-bottom-banner::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(5,8,10,.92),
rgba(100,8,15,.62),
rgba(5,8,10,.9)
);
}
.bs-bottom-banner > *{
position:relative;
z-index:1;
}
.bs-bottom-banner strong{
color:#fff;
font-size:16px;
letter-spacing:1px;
}
.bs-bottom-banner span{
color:#fff;
font-size:10px;
font-weight:900;
}
.bs-empty,
.bs-featured-empty,
.bs-empty-small{
color:#8f999e;
font-size:11px;
}
.bs-empty{
padding:25px;
grid-column:1 / -1;
}
/* =========================================================
EDITORIAL WAVE
========================================================= */
.ew-stage{
width:min(1450px,calc(100% - 34px));
margin:12px auto 30px;
color:#f4f1e9;
border:1px solid #292929;
background:#080909;
box-shadow:
0 25px 80px rgba(0,0,0,.55);
}
.ew-topbar{
min-height:58px;
display:grid;
grid-template-columns:auto auto minmax(240px,380px) 1fr;
align-items:center;
gap:30px;
padding:0 26px;
border-bottom:1px solid #292929;
background:#080909;
}
.ew-brand{
text-decoration:none;
font-size:24px;
font-weight:900;
letter-spacing:-2px;
}
.ew-brand strong{
color:#f7f5ef;
}
.ew-brand span{
color:#b52d30;
}
.ew-topbar nav{
display:flex;
gap:28px;
}
.ew-topbar nav a{
color:#e1dfd9;
text-decoration:none;
font-size:11px;
}
.ew-search{
height:34px;
display:flex;
align-items:center;
gap:8px;
padding:0 12px;
border:1px solid #3a3a3a;
border-radius:5px;
background:#111;
}
.ew-search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:#f5f3ec;
font-size:11px;
}
.ew-account{
display:flex;
justify-content:flex-end;
gap:9px;
}
.ew-account a{
padding:9px 13px;
border:1px solid #2a2a2a;
border-radius:4px;
background:#101010;
color:#fff;
text-decoration:none;
font-size:10px;
}
.ew-account a.primary{
background:#a92d30;
border-color:#b93639;
}
.ew-layout{
display:grid;
grid-template-columns:205px minmax(0,1fr);
}
.ew-creator-rail{
grid-row:1;
padding:22px 16px;
border-right:1px solid #292929;
background:#090a0a;
}
.ew-avatar{
width:118px;
height:118px;
margin:0 auto 12px;
border:1px solid #aaa49b;
border-radius:50%;
background-position:center;
background-size:cover;
}
.ew-avatar.is-empty{
display:flex;
align-items:center;
justify-content:center;
background:#151515;
color:#b52d30;
font-size:28px;
font-weight:900;
}
.ew-creator-rail h1{
margin:0;
text-align:center;
font-family:Georgia,serif;
font-size:24px;
letter-spacing:3px;
}
.ew-role{
margin:5px 0 14px;
text-align:center;
color:#c3beb5;
font-size:10px;
}
.ew-creator-rail blockquote{
margin:0 0 16px;
color:#d6d1c8;
font-family:Georgia,serif;
font-size:12px;
font-style:italic;
line-height:1.5;
text-align:center;
}
.ew-tag-list{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:5px;
}
.ew-tag-list span{
padding:5px 9px;
border:1px solid #373737;
border-radius:14px;
background:#161616;
color:#c8c4bc;
font-size:9px;
}
.ew-side-nav{
margin-top:20px;
display:grid;
gap:2px;
}
.ew-side-nav a{
padding:9px 11px;
color:#d8d5ce;
text-decoration:none;
font-size:11px;
}
.ew-side-nav a.active{
background:
linear-gradient(
90deg,
#491719,
rgba(73,23,25,.14)
);
box-shadow:
inset 3px 0 #bd3336;
}
.ew-socials{
display:flex;
justify-content:center;
gap:11px;
margin:18px 0;
}
.ew-socials a{
color:#f4f1e9 !important;
}
.ew-rail-art{
min-height:180px;
padding:15px;
display:flex;
align-items:flex-end;
background-position:center;
background-size:cover;
position:relative;
}
.ew-rail-art::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.62);
}
.ew-rail-art span{
position:relative;
z-index:1;
max-width:75px;
color:#fff;
font-family:Georgia,serif;
font-size:12px;
letter-spacing:3px;
line-height:1.7;
}
.ew-main{
display:grid;
grid-template-columns:minmax(0,1fr) 235px;
align-content:start;
}
.ew-hero{
min-height:340px;
padding:24px;
background-position:center;
background-size:cover;
position:relative;
border-right:1px solid #292929;
border-bottom:1px solid #292929;
}
.ew-hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(7,8,8,.9) 0%,
rgba(7,8,8,.62) 48%,
rgba(7,8,8,.18) 100%
);
filter:grayscale(.3);
}
.ew-hero-overlay{
width:min(480px,65%);
position:relative;
z-index:1;
}
.ew-hero-overlay > small{
color:#d8d3ca;
text-transform:uppercase;
letter-spacing:4px;
font-size:8px;
}
.ew-hero h2{
margin:8px 0;
color:#f6f2e8;
font-family:Georgia,serif;
font-size:57px;
line-height:.83;
letter-spacing:-3px;
}
.ew-hero h3{
padding-top:10px;
border-top:2px solid #a92d30;
color:#d9d4ca;
font-size:11px;
letter-spacing:4px;
}
.ew-hero p{
max-width:390px;
color:#c0bbb2;
font-size:12px;
line-height:1.5;
}
.ew-hero a{
display:inline-block;
margin-top:7px;
padding:10px 14px;
background:#a52b2e;
color:#fff;
text-decoration:none;
font-size:9px;
font-weight:900;
}
.ew-featured-release{
min-height:340px;
padding:18px;
border-right:1px solid #292929;
border-bottom:1px solid #292929;
background:#0a0b0b;
}
.ew-section-label{
color:#f3efe6;
font-size:10px;
font-weight:900;
letter-spacing:1.6px;
text-transform:uppercase;
}
.ew-featured-art{
width:100%;
aspect-ratio:1;
margin:11px 0;
background-position:center;
background-size:cover;
}
.ew-featured-art.is-empty{
display:flex;
align-items:center;
justify-content:center;
background:#151515;
}
.ew-featured-release h3{
margin:4px 0;
font-family:Georgia,serif;
font-size:17px;
}
.ew-featured-release p{
color:#bbb6ad;
font-size:10px;
}
.ew-featured-actions{
display:flex;
gap:8px;
}
.ew-featured-actions button{
flex:1;
min-height:33px;
border:1px solid #aa3033;
background:#a52b2e;
color:#fff;
font-size:9px;
font-weight:900;
}
.ew-featured-actions button.secondary{
border-color:#4b4b4b;
background:#0d0e0e;
}
.ew-right-rail{
grid-column:2;
grid-row:1 / span 4;
border-left:1px solid #292929;
}
.ew-right-rail > section{
padding:18px;
border-bottom:1px solid #292929;
}
.ew-right-rail > section > small{
display:block;
margin-top:5px;
color:#8f8d88;
font-size:8px;
text-transform:uppercase;
letter-spacing:1.5px;
}
.ew-stats-panel > div:last-child{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:15px;
}
.ew-stats-panel article strong{
display:block;
color:#f4efe5;
font-family:Georgia,serif;
font-size:21px;
}
.ew-stats-panel article span{
color:#85837f;
font-size:8px;
}
.ew-licensing-panel > button{
width:100%;
min-height:56px;
margin-top:9px;
padding:9px 10px;
display:grid;
grid-template-columns:1fr auto 14px;
align-items:center;
gap:9px;
border:1px solid #363636;
border-radius:5px;
background:#121313;
color:#fff;
text-align:left;
}
.ew-licensing-panel button span{
display:grid;
gap:3px;
font-size:10px;
font-weight:800;
}
.ew-licensing-panel button small{
color:#8e8c87;
font-size:8px;
font-weight:400;
}
.ew-licensing-panel button b{
color:#f3efe5;
font-family:Georgia,serif;
font-size:11px;
}
.ew-licensing-panel button i{
color:#b4b1aa;
font-style:normal;
}
.ew-bundles-panel article{
margin-top:10px;
padding:10px;
border:1px solid #343434;
background:#111212;
}
.ew-bundles-panel article strong{
color:#f3efe6;
font-size:10px;
}
.ew-bundles-panel article p{
color:#8e8c87;
font-size:9px;
}
.ew-bundles-panel article b{
color:#bf3437;
}
.ew-spotlight{
min-height:175px;
background-position:center;
background-size:cover;
position:relative;
}
.ew-spotlight::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(7,8,8,.9),
rgba(7,8,8,.42)
);
}
.ew-spotlight > div{
position:relative;
z-index:1;
}
.ew-spotlight strong{
display:block;
margin-top:12px;
font-family:Georgia,serif;
font-size:25px;
line-height:.9;
}
.ew-spotlight p{
max-width:130px;
color:#d0cbc2;
font-size:9px;
}
.ew-now-playing{
grid-column:1;
min-height:72px;
display:grid;
grid-template-columns:85px 45px 160px minmax(160px,1fr) 50px 105px;
align-items:center;
gap:10px;
padding:10px 14px;
border-right:1px solid #292929;
border-bottom:1px solid #292929;
background:#0a0b0b;
}
.ew-now-playing small{
color:#f4efe5;
text-transform:uppercase;
letter-spacing:1.6px;
font-size:9px;
}
.ew-now-art{
width:44px;
height:44px;
background-position:center;
background-size:cover;
}
.ew-now-playing > strong{
overflow:hidden;
color:#eee9df;
font-family:Georgia,serif;
font-size:13px;
white-space:nowrap;
text-overflow:ellipsis;
}
.ew-now-wave{
height:40px;
display:flex;
align-items:center;
gap:1px;
padding:0;
}
.ew-now-playing > span{
color:#9b9891;
font-size:9px;
}
.ew-now-playing > button:last-child{
min-height:34px;
border:1px solid #a93134;
background:#9f292c;
color:#fff;
font-size:9px;
font-weight:900;
}
.ew-track-section{
grid-column:1;
border-right:1px solid #292929;
background:#090a0a;
}
.ew-track-heading{
min-height:65px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:11px 14px;
border-bottom:1px solid #222;
}
.ew-track-heading > div:first-child{
display:grid;
gap:3px;
}
.ew-track-heading strong{
color:#f5f0e7;
font-size:13px;
text-transform:uppercase;
letter-spacing:1.5px;
}
.ew-track-heading small{
color:#83817c;
font-size:8px;
}
.ew-genres{
display:flex;
gap:6px;
}
.ew-genres button{
padding:7px 12px;
border:1px solid #333;
border-radius:12px;
background:#131414;
color:#c4c0b7;
font-size:8px;
}
.ew-genres button.active{
background:#eeeae1;
border-color:#eeeae1;
color:#111;
}
.ew-track-list{
display:grid;
}
.ew-track-row{
min-height:82px;
display:grid;
grid-template-columns:100px minmax(170px,1.2fr) minmax(180px,1fr) 45px 30px 38px 115px;
align-items:center;
gap:10px;
padding:8px 14px;
border-bottom:1px solid #292929;
}
.ew-track-row.playing{
background:#121010;
box-shadow:
inset 3px 0 #a92d30;
}
.ew-track-art{
height:65px;
background-position:center;
background-size:cover;
}
.ew-track-art.is-empty{
display:flex;
align-items:center;
justify-content:center;
background:#171717;
color:#b52d30;
font-weight:900;
}
.ew-track-copy strong{
display:block;
color:#f1ece2;
font-family:Georgia,serif;
font-size:14px;
}
.ew-track-copy small{
color:#a7a39b;
font-size:8px;
letter-spacing:1.2px;
text-transform:uppercase;
}
.ew-track-copy p{
margin:4px 0 0;
color:#85837e;
font-size:8px;
}
.ew-wave{
height:46px;
display:flex;
align-items:center;
gap:1px;
padding:0;
}
.ew-duration{
color:#a5a29b;
font-size:9px;
}
.ew-heart,
.ew-more{
width:30px;
height:30px;
border:0;
border-radius:4px;
background:#141515;
color:#ded9d0;
}
.ew-track-price{
display:grid;
justify-items:end;
gap:5px;
}
.ew-track-price strong{
color:#ece7dd;
font-size:10px;
}
.ew-track-price button{
width:100%;
min-height:29px;
border:0;
background:#a52b2e;
color:#fff;
font-size:8px;
font-weight:900;
}
.ew-empty,
.ew-empty-small{
color:#8e8b84;
font-size:10px;
}
/* =========================================================
MATCHING LICENSING MODALS
========================================================= */
body.storefront-theme-bento-studio
.theme-feature-modal .theme-feature-dialog{
background:#0d1418 !important;
border-color:#ef303c !important;
color:#fff !important;
}
body.storefront-theme-bento-studio
.theme-feature-modal .theme-feature-option{
background:#121a1e !important;
border-color:#313d43 !important;
}
body.storefront-theme-bento-studio
.theme-feature-modal button[data-theme-add]{
background:#ef303c !important;
border-color:#ef303c !important;
color:#fff !important;
}
body.storefront-theme-editorial-wave
.theme-feature-modal .theme-feature-dialog{
background:#0d0e0e !important;
border-color:#a92d30 !important;
color:#f2ede3 !important;
}
body.storefront-theme-editorial-wave
.theme-feature-modal .theme-feature-option{
background:#141515 !important;
border-color:#383838 !important;
}
body.storefront-theme-editorial-wave
.theme-feature-modal button[data-theme-add]{
background:#a92d30 !important;
border-color:#a92d30 !important;
color:#fff !important;
}
/* =========================================================
RESPONSIVE — BENTO STUDIO
========================================================= */
@media(max-width:1050px){
.bs-layout{
grid-template-columns:220px minmax(0,1fr);
}
.bs-content-grid{
grid-template-columns:1fr;
}
.bs-right-stack{
grid-template-columns:1fr 1fr;
}
.bs-track-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.bs-stats{
grid-template-columns:repeat(3,1fr);
}
}
@media(max-width:760px){
.bs-stage{
width:calc(100% - 20px);
}
.bs-topbar{
grid-template-columns:1fr;
gap:10px;
padding:13px;
}
.bs-topbar nav{
justify-content:flex-start;
}
.bs-layout{
display:block;
}
.bs-left{
border-right:0;
border-bottom:1px solid #283238;
}
.bs-side-nav{
grid-template-columns:repeat(2,1fr);
}
.bs-featured{
grid-template-columns:1fr;
}
.bs-featured-art{
min-height:260px;
}
.bs-featured-body{
padding:16px;
}
.bs-stats{
grid-template-columns:repeat(2,1fr);
}
.bs-track-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.bs-right-stack{
grid-template-columns:1fr;
}
.bs-about{
grid-template-columns:1fr;
}
.bs-about-image{
min-height:190px;
}
}
/* =========================================================
RESPONSIVE — EDITORIAL WAVE
========================================================= */
@media(max-width:1180px){
.ew-topbar{
grid-template-columns:auto 1fr minmax(220px,320px);
}
.ew-topbar nav{
display:none;
}
.ew-main{
grid-template-columns:minmax(0,1fr) 220px;
}
.ew-track-row{
grid-template-columns:80px minmax(150px,1fr) minmax(150px,1fr) 42px 30px 95px;
}
.ew-track-row .ew-more{
display:none;
}
}
@media(max-width:900px){
.ew-stage{
width:calc(100% - 20px);
}
.ew-layout{
display:block;
}
.ew-creator-rail{
border-right:0;
border-bottom:1px solid #292929;
}
.ew-rail-art{
display:none;
}
.ew-main{
display:block;
}
.ew-hero,
.ew-featured-release,
.ew-track-section{
border-right:0;
}
.ew-right-rail{
display:grid;
grid-template-columns:1fr 1fr;
border-left:0;
}
.ew-now-playing{
grid-template-columns:75px 44px minmax(120px,1fr) minmax(140px,1fr) 90px;
border-right:0;
}
.ew-now-playing > span{
display:none;
}
}
@media(max-width:650px){
.ew-topbar{
grid-template-columns:1fr;
gap:10px;
padding:12px;
}
.ew-account{
justify-content:flex-start;
}
.ew-hero{
min-height:380px;
}
.ew-hero-overlay{
width:100%;
}
.ew-hero h2{
font-size:43px;
}
.ew-right-rail{
display:block;
}
.ew-now-playing{
grid-template-columns:45px 1fr 90px;
}
.ew-now-playing > div:first-child,
.ew-now-wave{
display:none;
}
.ew-track-heading{
align-items:flex-start;
flex-direction:column;
}
.ew-genres{
width:100%;
overflow:auto;
}
.ew-track-row{
grid-template-columns:64px minmax(0,1fr) 60px 32px;
}
.ew-wave,
.ew-duration,
.ew-heart{
display:none;
}
.ew-track-price{
grid-column:2 / 5;
grid-template-columns:1fr 105px;
align-items:center;
justify-items:stretch;
}
}
/* END OSBEATS FINAL TWO ADVANCED THEME CSS */
/* =========================================================
OSBEATS 20260910
ADVANCED THEMES FIDELITY FULLSCREEN
APPROVED MOCKUPS:
- Bento Studio
- Editorial Wave
These themes own the full browser canvas while previewed.
========================================================= */
/* =========================================================
REMOVE NORMAL MARKETPLACE PAGE CHROME
ADVANCED PREVIEWS ONLY
========================================================= */
html.advanced-storefront-preview-html,
body.advanced-storefront-preview-body{
margin:0 !important;
padding:0 !important;
width:100% !important;
min-width:100% !important;
max-width:none !important;
min-height:100% !important;
background:#070a0c !important;
}
body.storefront-theme-advanced-preview{
margin:0 !important;
padding:0 !important;
width:100% !important;
max-width:none !important;
min-height:100vh !important;
overflow-x:hidden !important;
background:#070a0c !important;
}
body.storefront-theme-advanced-preview
.advanced-storefront-outer-hidden{
display:none !important;
}
body.storefront-theme-advanced-preview
#storefront{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
background:#070a0c !important;
}
body.storefront-theme-advanced-preview
#storefront > *{
max-width:none;
}
/*
Keep preview utility, but do not allow it to consume
storefront layout height.
*/
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar{
position:fixed !important;
top:8px !important;
right:10px !important;
left:auto !important;
bottom:auto !important;
z-index:999999 !important;
width:auto !important;
max-width:360px !important;
min-height:0 !important;
margin:0 !important;
padding:7px 10px !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
border:1px solid rgba(239,48,60,.75) !important;
border-left:3px solid #ef303c !important;
border-radius:5px !important;
background:rgba(6,10,13,.94) !important;
box-shadow:
0 8px 24px rgba(0,0,0,.35) !important;
backdrop-filter:
blur(8px);
font-size:10px !important;
line-height:1.2 !important;
}
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar > div{
display:flex !important;
align-items:center !important;
gap:5px !important;
}
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar small{
display:none !important;
}
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar span,
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar strong{
white-space:nowrap !important;
}
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar a{
min-height:0 !important;
margin:0 !important;
padding:4px 7px !important;
border:1px solid #4e565b !important;
border-radius:3px !important;
background:#10171b !important;
color:#fff !important;
font-size:9px !important;
white-space:nowrap !important;
text-decoration:none !important;
}
/* =========================================================
BENTO STUDIO — APPROVED FULL-PAGE GEOMETRY
========================================================= */
body.storefront-theme-bento-studio{
background:#070b0e !important;
}
body.storefront-theme-bento-studio
.bs-stage{
width:100% !important;
max-width:none !important;
min-height:100vh !important;
margin:0 !important;
padding:0 !important;
background:#070b0e !important;
color:#f5f7f8 !important;
}
body.storefront-theme-bento-studio
.bs-shell{
width:100% !important;
min-height:100vh !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:
linear-gradient(
145deg,
#070c0f 0%,
#0a1115 52%,
#070b0e 100%
) !important;
box-shadow:none !important;
}
/*
Approved Bento Studio header:
OSBeats brand left,
large search,
creator actions right.
*/
body.storefront-theme-bento-studio
.bs-topbar{
width:100% !important;
min-height:58px !important;
display:grid !important;
grid-template-columns:
150px
minmax(300px,440px)
1fr !important;
align-items:center !important;
gap:20px !important;
padding:
0 22px !important;
border-bottom:
1px solid #252e33 !important;
background:#080d10 !important;
}
body.storefront-theme-bento-studio
.bs-brand{
justify-self:start !important;
font-size:22px !important;
}
body.storefront-theme-bento-studio
.bs-global-search{
width:100% !important;
max-width:440px !important;
}
body.storefront-theme-bento-studio
.bs-topbar nav{
display:flex !important;
justify-content:flex-end !important;
gap:28px !important;
}
/*
Approved Bento structure:
150px navigation rail
280px creator/about column
remaining width = modular storefront content
*/
body.storefront-theme-bento-studio
.bs-layout{
width:100% !important;
display:grid !important;
grid-template-columns:
430px
minmax(0,1fr) !important;
min-height:
calc(100vh - 58px) !important;
align-items:stretch !important;
}
body.storefront-theme-bento-studio
.bs-left{
min-width:0 !important;
display:grid !important;
grid-template-columns:
138px
minmax(0,280px) !important;
grid-template-rows:
max-content
max-content
1fr !important;
align-content:start !important;
align-items:start !important;
column-gap:12px !important;
row-gap:10px !important;
padding:
14px 10px 16px 12px !important;
border-right:
1px solid #252e33 !important;
background:#070c0f !important;
}
/*
Dedicated vertical navigation rail.
*/
body.storefront-theme-bento-studio
.bs-side-nav{
grid-column:1 !important;
grid-row:1 / span 2 !important;
width:100% !important;
margin:0 !important;
padding:3px 0 !important;
display:grid !important;
align-content:start !important;
gap:4px !important;
background:#070c0f !important;
}
body.storefront-theme-bento-studio
.bs-side-nav a{
min-height:40px !important;
display:flex !important;
align-items:center !important;
padding:
8px 9px !important;
border-radius:5px !important;
font-size:10px !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
body.storefront-theme-bento-studio
.bs-side-nav a.active{
background:#151d22 !important;
box-shadow:
inset 3px 0 #ef303c !important;
}
/*
Creator card occupies independent second Bento column.
*/
body.storefront-theme-bento-studio
.bs-profile-card{
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
margin:0 !important;
padding:
17px 15px 16px !important;
border:
1px solid #2b353a !important;
border-radius:
8px !important;
background:
linear-gradient(
180deg,
#10171b,
#0a1013
) !important;
}
body.storefront-theme-bento-studio
.bs-avatar{
width:158px !important;
height:158px !important;
margin:
0 auto 12px !important;
border:
1px solid #8f989f !important;
box-shadow:
0 0 0 3px #171d21 !important;
}
body.storefront-theme-bento-studio
.bs-profile-card h1{
font-size:25px !important;
}
body.storefront-theme-bento-studio
.bs-bio{
max-width:230px !important;
margin:
11px auto 14px !important;
}
/*
Approved mockup places About directly beneath creator card.
JS moves this existing live-data panel into .bs-left.
*/
body.storefront-theme-bento-studio
.bs-about[data-bento-rehomed="true"]{
grid-column:2 !important;
grid-row:2 !important;
width:100% !important;
min-height:205px !important;
margin:0 !important;
display:block !important;
position:relative !important;
overflow:hidden !important;
border:
1px solid #2b353a !important;
border-radius:
8px !important;
background:#0c1216 !important;
}
body.storefront-theme-bento-studio
.bs-about[data-bento-rehomed="true"]
> div:first-child{
width:100% !important;
min-height:205px !important;
padding:
17px !important;
position:relative !important;
z-index:2 !important;
background:
linear-gradient(
90deg,
rgba(7,12,15,.97) 0%,
rgba(7,12,15,.87) 58%,
rgba(7,12,15,.25) 100%
) !important;
}
body.storefront-theme-bento-studio
.bs-about[data-bento-rehomed="true"]
.bs-about-image{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:100% !important;
background-position:center !important;
background-size:cover !important;
filter:
grayscale(.72)
brightness(.43) !important;
opacity:.72 !important;
}
/*
Inspirational block remains at base of navigation rail.
*/
body.storefront-theme-bento-studio
.bs-side-quote{
grid-column:1 !important;
grid-row:3 !important;
align-self:end !important;
width:100% !important;
margin:
18px 0 0 !important;
padding:
13px 10px !important;
}
/*
Main Bento content.
*/
body.storefront-theme-bento-studio
.bs-main{
min-width:0 !important;
width:100% !important;
padding:
14px 18px 18px !important;
background:#080d10 !important;
}
body.storefront-theme-bento-studio
.bs-featured{
width:100% !important;
grid-template-columns:
220px
minmax(0,1fr) !important;
min-height:232px !important;
border-radius:
8px !important;
}
body.storefront-theme-bento-studio
.bs-featured-art{
min-height:200px !important;
margin:
14px !important;
}
body.storefront-theme-bento-studio
.bs-featured-body{
min-width:0 !important;
padding:
22px 20px 15px 4px !important;
}
body.storefront-theme-bento-studio
.bs-featured-heading h2{
font-size:23px !important;
}
body.storefront-theme-bento-studio
.bs-wave{
height:64px !important;
}
body.storefront-theme-bento-studio
.bs-stats{
width:100% !important;
grid-template-columns:
repeat(5,minmax(0,1fr)) !important;
gap:9px !important;
margin-top:
10px !important;
}
body.storefront-theme-bento-studio
.bs-stats article{
min-height:72px !important;
border-radius:
7px !important;
}
/*
Approved Bento lower modular grid.
*/
body.storefront-theme-bento-studio
.bs-content-grid{
width:100% !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
300px !important;
gap:10px !important;
margin-top:
10px !important;
}
body.storefront-theme-bento-studio
.bs-library{
min-width:0 !important;
}
body.storefront-theme-bento-studio
.bs-track-grid{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:10px !important;
}
body.storefront-theme-bento-studio
.bs-track-card{
min-width:0 !important;
border-radius:
6px !important;
}
body.storefront-theme-bento-studio
.bs-track-art{
aspect-ratio:
1 / 1 !important;
}
body.storefront-theme-bento-studio
.bs-right-stack{
width:300px !important;
display:grid !important;
grid-template-columns:
1fr !important;
align-content:start !important;
gap:10px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-box,
body.storefront-theme-bento-studio
.bs-license-box{
width:100% !important;
}
body.storefront-theme-bento-studio
.bs-license-box{
min-height:185px !important;
}
/*
Main banner spans content area exactly as approved.
*/
body.storefront-theme-bento-studio
.bs-bottom-banner{
width:100% !important;
min-height:88px !important;
margin-top:
10px !important;
border-radius:
7px !important;
}
/* =========================================================
EDITORIAL WAVE — APPROVED FULL-PAGE GEOMETRY
========================================================= */
body.storefront-theme-editorial-wave{
background:#080909 !important;
}
body.storefront-theme-editorial-wave
.ew-stage{
width:100% !important;
max-width:none !important;
min-height:100vh !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:#080909 !important;
box-shadow:none !important;
}
/*
Editorial navigation is the page navigation.
*/
body.storefront-theme-editorial-wave
.ew-topbar{
width:100% !important;
min-height:58px !important;
display:grid !important;
grid-template-columns:
190px
auto
minmax(280px,380px)
1fr !important;
align-items:center !important;
gap:24px !important;
padding:
0 22px !important;
border-bottom:
1px solid #292929 !important;
background:#080909 !important;
}
body.storefront-theme-editorial-wave
.ew-brand{
font-size:23px !important;
}
body.storefront-theme-editorial-wave
.ew-topbar nav{
display:flex !important;
align-items:center !important;
gap:25px !important;
}
body.storefront-theme-editorial-wave
.ew-search{
width:100% !important;
max-width:380px !important;
}
/*
Left creator rail + complete editorial canvas.
*/
body.storefront-theme-editorial-wave
.ew-layout{
width:100% !important;
min-height:
calc(100vh - 58px) !important;
display:grid !important;
grid-template-columns:
210px
minmax(0,1fr) !important;
align-items:stretch !important;
}
body.storefront-theme-editorial-wave
.ew-creator-rail{
width:210px !important;
min-height:
calc(100vh - 58px) !important;
padding:
20px 15px !important;
border-right:
1px solid #292929 !important;
background:#090a0a !important;
}
body.storefront-theme-editorial-wave
.ew-avatar{
width:120px !important;
height:120px !important;
}
body.storefront-theme-editorial-wave
.ew-creator-rail h1{
font-size:23px !important;
}
/*
THIS IS THE MAIN EDITORIAL CORRECTION.
Approved mockup:
HERO | FEATURED RELEASE | RIGHT RAIL
Current first build incorrectly stacked Featured Release
below the hero.
*/
body.storefront-theme-editorial-wave
.ew-main{
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
245px
285px !important;
grid-template-rows:
auto
auto
1fr !important;
align-content:start !important;
background:#080909 !important;
}
/*
Large editorial hero — column 1.
*/
body.storefront-theme-editorial-wave
.ew-hero{
grid-column:1 !important;
grid-row:1 !important;
width:100% !important;
min-height:370px !important;
padding:
25px 28px !important;
border-right:
1px solid #292929 !important;
border-bottom:
1px solid #292929 !important;
background-position:
center !important;
background-size:
cover !important;
}
body.storefront-theme-editorial-wave
.ew-hero-overlay{
width:min(500px,70%) !important;
}
body.storefront-theme-editorial-wave
.ew-hero h2{
margin:
9px 0 !important;
font-size:
clamp(48px,4.6vw,69px) !important;
line-height:
.84 !important;
}
/*
Featured release is now a dedicated column beside hero.
*/
body.storefront-theme-editorial-wave
.ew-featured-release{
grid-column:2 !important;
grid-row:1 !important;
width:245px !important;
min-width:245px !important;
min-height:370px !important;
padding:
16px !important;
border-right:
1px solid #292929 !important;
border-bottom:
1px solid #292929 !important;
background:#0a0b0b !important;
}
body.storefront-theme-editorial-wave
.ew-featured-art{
width:100% !important;
max-width:213px !important;
max-height:213px !important;
aspect-ratio:
1 / 1 !important;
margin:
11px auto 10px !important;
background-position:
center !important;
background-size:
cover !important;
}
body.storefront-theme-editorial-wave
.ew-featured-release h3{
font-size:17px !important;
}
body.storefront-theme-editorial-wave
.ew-featured-actions{
width:100% !important;
}
/*
Right rail remains visible alongside hero and release.
*/
body.storefront-theme-editorial-wave
.ew-right-rail{
grid-column:3 !important;
grid-row:1 / span 3 !important;
width:285px !important;
min-width:285px !important;
border-left:0 !important;
background:#090a0a !important;
}
body.storefront-theme-editorial-wave
.ew-right-rail > section{
width:100% !important;
padding:
17px !important;
}
/*
Approved Artist Stats = horizontal row when room allows.
*/
body.storefront-theme-editorial-wave
.ew-stats-panel > div:last-child{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:
12px 10px !important;
}
/*
Now Playing spans hero + release columns.
*/
body.storefront-theme-editorial-wave
.ew-now-playing{
grid-column:
1 / 3 !important;
grid-row:2 !important;
width:100% !important;
min-height:70px !important;
grid-template-columns:
82px
44px
160px
minmax(170px,1fr)
52px
110px !important;
gap:
10px !important;
padding:
9px 14px !important;
border-right:
1px solid #292929 !important;
border-bottom:
1px solid #292929 !important;
}
/*
Editorial track catalog spans hero + featured column.
*/
body.storefront-theme-editorial-wave
.ew-track-section{
grid-column:
1 / 3 !important;
grid-row:3 !important;
width:100% !important;
min-width:0 !important;
border-right:
1px solid #292929 !important;
background:#090a0a !important;
}
body.storefront-theme-editorial-wave
.ew-track-heading{
width:100% !important;
min-height:
62px !important;
padding:
10px 14px !important;
}
body.storefront-theme-editorial-wave
.ew-track-row{
width:100% !important;
min-height:
82px !important;
grid-template-columns:
92px
minmax(175px,1.15fr)
minmax(170px,1fr)
46px
30px
36px
112px !important;
gap:
9px !important;
padding:
8px 12px !important;
}
body.storefront-theme-editorial-wave
.ew-track-art{
width:92px !important;
height:64px !important;
}
body.storefront-theme-editorial-wave
.ew-wave{
width:100% !important;
min-width:145px !important;
}
/*
Ensure editorial right-side content retains approved compact
premium proportions.
*/
body.storefront-theme-editorial-wave
.ew-licensing-panel > button{
min-height:
54px !important;
margin-top:
8px !important;
}
body.storefront-theme-editorial-wave
.ew-spotlight{
min-height:
170px !important;
background-position:
center !important;
background-size:
cover !important;
}
/* =========================================================
DESKTOP SCALING
Keep approved proportions on smaller laptop widths.
========================================================= */
@media(
min-width:901px
)
and
(
max-width:1250px
){
body.storefront-theme-bento-studio
.bs-layout{
grid-template-columns:
395px
minmax(0,1fr) !important;
}
body.storefront-theme-bento-studio
.bs-left{
grid-template-columns:
125px
minmax(0,258px) !important;
column-gap:
10px !important;
}
body.storefront-theme-bento-studio
.bs-content-grid{
grid-template-columns:
minmax(0,1fr)
265px !important;
}
body.storefront-theme-bento-studio
.bs-right-stack{
width:
265px !important;
}
body.storefront-theme-bento-studio
.bs-track-grid{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
}
body.storefront-theme-editorial-wave
.ew-layout{
grid-template-columns:
195px
minmax(0,1fr) !important;
}
body.storefront-theme-editorial-wave
.ew-creator-rail{
width:
195px !important;
}
body.storefront-theme-editorial-wave
.ew-main{
grid-template-columns:
minmax(0,1fr)
220px
250px !important;
}
body.storefront-theme-editorial-wave
.ew-featured-release{
width:
220px !important;
min-width:
220px !important;
}
body.storefront-theme-editorial-wave
.ew-featured-art{
max-width:
188px !important;
max-height:
188px !important;
}
body.storefront-theme-editorial-wave
.ew-right-rail{
width:
250px !important;
min-width:
250px !important;
}
body.storefront-theme-editorial-wave
.ew-track-row{
grid-template-columns:
78px
minmax(145px,1fr)
minmax(135px,.9fr)
40px
28px
96px !important;
}
body.storefront-theme-editorial-wave
.ew-track-row
.ew-more{
display:none !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar{
top:6px !important;
right:6px !important;
max-width:300px !important;
}
body.storefront-theme-bento-studio
.bs-layout{
display:block !important;
}
body.storefront-theme-bento-studio
.bs-left{
width:100% !important;
display:grid !important;
grid-template-columns:
145px
minmax(0,1fr) !important;
padding:
12px !important;
border-right:0 !important;
border-bottom:
1px solid #252e33 !important;
}
body.storefront-theme-bento-studio
.bs-profile-card{
max-width:
320px !important;
}
body.storefront-theme-bento-studio
.bs-about[data-bento-rehomed="true"]{
max-width:
320px !important;
}
body.storefront-theme-bento-studio
.bs-content-grid{
grid-template-columns:
1fr !important;
}
body.storefront-theme-bento-studio
.bs-right-stack{
width:100% !important;
grid-template-columns:
1fr 1fr !important;
}
body.storefront-theme-editorial-wave
.ew-layout{
display:block !important;
}
body.storefront-theme-editorial-wave
.ew-creator-rail{
width:100% !important;
min-height:auto !important;
border-right:0 !important;
border-bottom:
1px solid #292929 !important;
}
body.storefront-theme-editorial-wave
.ew-main{
display:grid !important;
grid-template-columns:
minmax(0,1fr)
220px !important;
}
body.storefront-theme-editorial-wave
.ew-hero{
grid-column:1 !important;
}
body.storefront-theme-editorial-wave
.ew-featured-release{
grid-column:2 !important;
width:220px !important;
min-width:220px !important;
}
body.storefront-theme-editorial-wave
.ew-right-rail{
grid-column:
1 / 3 !important;
grid-row:2 !important;
width:100% !important;
min-width:0 !important;
display:grid !important;
grid-template-columns:
repeat(2,1fr) !important;
}
body.storefront-theme-editorial-wave
.ew-now-playing{
grid-column:
1 / 3 !important;
grid-row:3 !important;
}
body.storefront-theme-editorial-wave
.ew-track-section{
grid-column:
1 / 3 !important;
grid-row:4 !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:650px){
body.storefront-theme-advanced-preview
.storefront-theme-preview-bar{
top:auto !important;
right:7px !important;
bottom:7px !important;
transform:
scale(.9) !important;
transform-origin:
bottom right !important;
}
body.storefront-theme-bento-studio
.bs-topbar,
body.storefront-theme-editorial-wave
.ew-topbar{
min-height:auto !important;
}
body.storefront-theme-bento-studio
.bs-left{
display:block !important;
}
body.storefront-theme-bento-studio
.bs-side-nav{
display:grid !important;
grid-template-columns:
repeat(2,1fr) !important;
margin-bottom:
10px !important;
}
body.storefront-theme-bento-studio
.bs-profile-card,
body.storefront-theme-bento-studio
.bs-about[data-bento-rehomed="true"]{
width:100% !important;
max-width:none !important;
margin-bottom:
10px !important;
}
body.storefront-theme-bento-studio
.bs-featured{
grid-template-columns:
1fr !important;
}
body.storefront-theme-bento-studio
.bs-stats{
grid-template-columns:
repeat(2,1fr) !important;
}
body.storefront-theme-bento-studio
.bs-track-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
body.storefront-theme-bento-studio
.bs-right-stack{
grid-template-columns:
1fr !important;
}
body.storefront-theme-editorial-wave
.ew-main{
display:block !important;
}
body.storefront-theme-editorial-wave
.ew-featured-release,
body.storefront-theme-editorial-wave
.ew-right-rail{
width:100% !important;
min-width:0 !important;
}
body.storefront-theme-editorial-wave
.ew-featured-art{
width:min(230px,100%) !important;
max-width:230px !important;
max-height:230px !important;
}
body.storefront-theme-editorial-wave
.ew-right-rail{
display:block !important;
}
body.storefront-theme-editorial-wave
.ew-now-playing{
width:100% !important;
grid-template-columns:
44px
minmax(0,1fr)
100px !important;
}
body.storefront-theme-editorial-wave
.ew-now-playing
> div:first-child,
body.storefront-theme-editorial-wave
.ew-now-wave,
body.storefront-theme-editorial-wave
.ew-now-playing
> span{
display:none !important;
}
body.storefront-theme-editorial-wave
.ew-track-row{
grid-template-columns:
64px
minmax(0,1fr)
92px !important;
min-height:
78px !important;
}
body.storefront-theme-editorial-wave
.ew-wave,
body.storefront-theme-editorial-wave
.ew-duration,
body.storefront-theme-editorial-wave
.ew-heart,
body.storefront-theme-editorial-wave
.ew-more{
display:none !important;
}
body.storefront-theme-editorial-wave
.ew-track-price{
grid-column:3 !important;
}
}
/* END ADVANCED THEMES FIDELITY FULLSCREEN */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — APPROVED MOCKUP BASE FIDELITY
BENTO ONLY.
EDITORIAL WAVE IS NOT MODIFIED.
LOCKED REQUIREMENTS:
- Approved three-column architecture
- One track-card row only
- See All in Track Library header
- Compact mockup proportions
========================================================= */
/* ---------------------------------------------------------
PAGE / CANVAS
--------------------------------------------------------- */
body.storefront-theme-bento-studio{
background:#070b0e !important;
}
body.storefront-theme-bento-studio
.bs-stage{
width:100% !important;
min-height:100vh !important;
margin:0 !important;
padding:14px 0 24px !important;
background:
radial-gradient(
circle at 60% 0%,
#10191e 0%,
#080d10 46%,
#05090b 100%
) !important;
}
body.storefront-theme-bento-studio
.bs-shell{
width:min(
calc(100% - 28px),
1240px
) !important;
margin:0 auto !important;
min-height:760px !important;
overflow:hidden !important;
border:1px solid #3a454c !important;
border-radius:12px !important;
background:#080e11 !important;
box-shadow:
0 22px 60px rgba(0,0,0,.45) !important;
}
/* ---------------------------------------------------------
PREVIEW BAR — KEEP OUT OF DESIGN
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.storefront-theme-preview-bar{
top:auto !important;
right:10px !important;
bottom:10px !important;
left:auto !important;
transform:none !important;
max-width:320px !important;
}
/* ---------------------------------------------------------
TOP BAR
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-topbar{
min-height:50px !important;
display:grid !important;
grid-template-columns:
135px
minmax(260px,420px)
1fr !important;
align-items:center !important;
gap:18px !important;
padding:
0 16px !important;
border-bottom:
1px solid #263138 !important;
background:#080d10 !important;
}
body.storefront-theme-bento-studio
.bs-brand{
font-size:19px !important;
}
body.storefront-theme-bento-studio
.bs-global-search{
min-height:32px !important;
max-width:420px !important;
border-radius:5px !important;
}
body.storefront-theme-bento-studio
.bs-topbar nav{
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
gap:20px !important;
}
body.storefront-theme-bento-studio
.bs-topbar nav a{
font-size:9px !important;
}
body.storefront-theme-bento-studio
.bs-top-icon{
width:28px !important;
height:28px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
color:#fff !important;
}
body.storefront-theme-bento-studio
.bs-top-avatar{
width:31px !important;
height:31px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
border:1px solid #69757b !important;
border-radius:50% !important;
background-position:center !important;
background-size:cover !important;
color:#ef303c !important;
font-size:8px !important;
font-weight:900 !important;
}
/* ---------------------------------------------------------
APPROVED STRUCTURAL PROPORTIONS
NAV RAIL ~ 140
PROFILE / ABOUT ~ 255
MAIN ~ 820
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-layout{
display:grid !important;
grid-template-columns:
405px
minmax(0,1fr) !important;
min-height:700px !important;
}
body.storefront-theme-bento-studio
.bs-left{
display:grid !important;
grid-template-columns:
140px
255px !important;
grid-template-rows:
auto
auto
1fr !important;
align-content:start !important;
gap:
9px 10px !important;
padding:
12px 10px !important;
border-right:
1px solid #263138 !important;
background:#070c0f !important;
}
/* ---------------------------------------------------------
NAV RAIL
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-side-nav{
grid-column:1 !important;
grid-row:
1 / span 2 !important;
width:100% !important;
margin:0 !important;
display:grid !important;
grid-template-columns:
1fr !important;
align-content:start !important;
gap:3px !important;
}
body.storefront-theme-bento-studio
.bs-side-nav a{
min-height:36px !important;
display:flex !important;
align-items:center !important;
padding:
7px 9px !important;
border-radius:5px !important;
color:#cbd1d4 !important;
font-size:9px !important;
white-space:nowrap !important;
}
body.storefront-theme-bento-studio
.bs-side-nav a.active{
color:#fff !important;
background:#172026 !important;
box-shadow:
inset 3px 0 #ef303c !important;
}
body.storefront-theme-bento-studio
.bs-side-quote{
grid-column:1 !important;
grid-row:3 !important;
align-self:end !important;
margin:
20px 0 0 !important;
padding:
12px !important;
border:
1px solid #29343a !important;
border-radius:
6px !important;
background:#10171b !important;
}
body.storefront-theme-bento-studio
.bs-side-quote p{
margin:
0 0 12px !important;
color:#fff !important;
font-size:10px !important;
line-height:1.45 !important;
}
body.storefront-theme-bento-studio
.bs-side-quote strong{
color:#ef303c !important;
font-size:8px !important;
}
/* ---------------------------------------------------------
CREATOR PROFILE CARD
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-profile-card{
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
margin:0 !important;
padding:
15px 13px 13px !important;
text-align:center !important;
border:
1px solid #2d383e !important;
border-radius:
8px !important;
background:
linear-gradient(
180deg,
#10171b,
#0a1013
) !important;
}
body.storefront-theme-bento-studio
.bs-avatar{
width:145px !important;
height:145px !important;
margin:
0 auto 10px !important;
overflow:hidden !important;
border:
1px solid #959da1 !important;
border-radius:
50% !important;
background-position:
center !important;
background-size:
cover !important;
box-shadow:
0 0 0 3px #171e22 !important;
}
body.storefront-theme-bento-studio
.bs-profile-card h1{
margin:
0 !important;
color:#fff !important;
font-size:
22px !important;
line-height:
1.1 !important;
}
body.storefront-theme-bento-studio
.bs-role{
margin:
5px 0 0 !important;
color:#d4d9dc !important;
font-size:
9px !important;
}
body.storefront-theme-bento-studio
.bs-profile-quote{
margin:
10px auto 12px !important;
max-width:
210px !important;
color:#d4dadd !important;
font-size:
10px !important;
line-height:
1.4 !important;
font-style:normal !important;
}
body.storefront-theme-bento-studio
.bs-profile-actions{
display:grid !important;
grid-template-columns:
1fr 1fr !important;
gap:8px !important;
}
body.storefront-theme-bento-studio
.bs-profile-actions button,
body.storefront-theme-bento-studio
.bs-profile-actions a{
min-height:
33px !important;
font-size:
9px !important;
}
body.storefront-theme-bento-studio
.bs-socials{
min-height:
24px !important;
margin-top:
10px !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:12px !important;
}
/* ---------------------------------------------------------
ABOUT — DIRECTLY BELOW PROFILE
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-about{
grid-column:2 !important;
grid-row:2 !important;
width:100% !important;
min-height:
205px !important;
margin:0 !important;
display:block !important;
position:relative !important;
overflow:hidden !important;
border:
1px solid #2d383e !important;
border-radius:
8px !important;
background:#0c1216 !important;
}
body.storefront-theme-bento-studio
.bs-about > div:first-child{
position:relative !important;
z-index:2 !important;
min-height:
205px !important;
padding:
13px !important;
background:
linear-gradient(
90deg,
rgba(8,13,16,.98) 0%,
rgba(8,13,16,.86) 64%,
rgba(8,13,16,.35) 100%
) !important;
}
body.storefront-theme-bento-studio
.bs-about p{
max-width:
185px !important;
margin:
10px 0 12px !important;
color:#d0d6d9 !important;
font-size:
10px !important;
line-height:
1.5 !important;
}
body.storefront-theme-bento-studio
.bs-signature{
color:#fff !important;
font-family:
Georgia,serif !important;
font-size:
21px !important;
font-style:
italic !important;
transform:
rotate(-8deg) !important;
transform-origin:
left center !important;
}
body.storefront-theme-bento-studio
.bs-about-tagline{
position:absolute !important;
right:12px !important;
bottom:10px !important;
max-width:
90px !important;
color:#7e898e !important;
font-size:
6px !important;
letter-spacing:
1.5px !important;
text-align:right !important;
}
body.storefront-theme-bento-studio
.bs-about-image{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
background-position:
right center !important;
background-size:
cover !important;
filter:
grayscale(.7)
brightness(.42) !important;
}
/* ---------------------------------------------------------
MAIN
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-main{
min-width:0 !important;
padding:
12px !important;
background:#080e11 !important;
}
/* ---------------------------------------------------------
FEATURED PLAYER
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-featured{
width:100% !important;
min-height:
218px !important;
display:grid !important;
grid-template-columns:
205px
minmax(0,1fr) !important;
overflow:hidden !important;
border:
1px solid #303b41 !important;
border-radius:
8px !important;
background:
linear-gradient(
135deg,
#10171b,
#0a1013
) !important;
}
body.storefront-theme-bento-studio
.bs-featured-art{
min-height:
188px !important;
margin:
13px !important;
border-radius:
5px !important;
background-position:
center !important;
background-size:
cover !important;
}
body.storefront-theme-bento-studio
.bs-featured-body{
min-width:0 !important;
padding:
17px 17px 11px 2px !important;
}
body.storefront-theme-bento-studio
.bs-featured-heading h2{
margin:
3px 0 2px !important;
color:#fff !important;
font-size:
20px !important;
}
body.storefront-theme-bento-studio
.bs-featured-kicker{
color:#9ba6ab !important;
font-size:
7px !important;
letter-spacing:
1.4px !important;
text-transform:
uppercase !important;
}
body.storefront-theme-bento-studio
.bs-featured-creator{
margin:
0 0 7px !important;
color:#a8b1b6 !important;
font-size:
9px !important;
}
body.storefront-theme-bento-studio
.bs-featured-tags{
display:flex !important;
flex-wrap:wrap !important;
gap:5px !important;
}
body.storefront-theme-bento-studio
.bs-featured-tags span{
padding:
4px 7px !important;
border:
1px solid #283238 !important;
border-radius:
10px !important;
background:#161e22 !important;
color:#aeb7bb !important;
font-size:
7px !important;
}
body.storefront-theme-bento-studio
.bs-featured-icons{
display:flex !important;
gap:5px !important;
}
body.storefront-theme-bento-studio
.bs-featured-icons button{
width:28px !important;
height:28px !important;
border:0 !important;
background:transparent !important;
color:#d8dddf !important;
}
body.storefront-theme-bento-studio
.bs-wave{
width:100% !important;
height:
54px !important;
margin-top:
5px !important;
}
body.storefront-theme-bento-studio
.bs-player-controls{
min-height:
45px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:14px !important;
}
body.storefront-theme-bento-studio
.bs-player-small{
width:26px !important;
height:26px !important;
border:0 !important;
background:transparent !important;
color:#d9dee0 !important;
}
body.storefront-theme-bento-studio
.bs-main-play{
width:
44px !important;
height:
44px !important;
border-radius:
50% !important;
background:
linear-gradient(
135deg,
#e92a34,
#ff3944
) !important;
}
body.storefront-theme-bento-studio
.bs-volume-control{
width:
90px !important;
display:flex !important;
align-items:center !important;
gap:6px !important;
color:#8f999e !important;
}
body.storefront-theme-bento-studio
.bs-volume-line{
flex:1 !important;
height:
3px !important;
background:#343e43 !important;
position:relative !important;
}
body.storefront-theme-bento-studio
.bs-volume-line i{
width:
62% !important;
height:
3px !important;
display:block !important;
background:#ef303c !important;
}
/* ---------------------------------------------------------
STAT ROW
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-stats{
display:grid !important;
grid-template-columns:
repeat(5,minmax(0,1fr)) !important;
gap:
7px !important;
margin-top:
8px !important;
}
body.storefront-theme-bento-studio
.bs-stats article{
min-height:
64px !important;
padding:
8px !important;
}
/* ---------------------------------------------------------
LOWER APPROVED GRID
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-lower-layout{
display:grid !important;
grid-template-columns:
minmax(0,1fr)
250px !important;
gap:
8px !important;
margin-top:
8px !important;
}
body.storefront-theme-bento-studio
.bs-lower-left{
min-width:0 !important;
}
body.storefront-theme-bento-studio
.bs-library{
width:100% !important;
padding:
11px !important;
}
body.storefront-theme-bento-studio
.bs-section-heading{
min-height:
20px !important;
margin-bottom:
8px !important;
}
body.storefront-theme-bento-studio
.bs-see-all,
body.storefront-theme-bento-studio
.bs-bundle-box
.bs-section-heading a{
color:#929da2 !important;
font-size:
8px !important;
text-decoration:none !important;
}
/* APPROVED FILTER SET */
body.storefront-theme-bento-studio
.bs-genre-row{
display:flex !important;
gap:
5px !important;
margin-bottom:
9px !important;
overflow:hidden !important;
}
body.storefront-theme-bento-studio
.bs-genre-row button{
min-width:
auto !important;
padding:
6px 10px !important;
font-size:
8px !important;
}
/* EXACTLY FOUR CARDS IN ONE ROW */
body.storefront-theme-bento-studio
.bs-track-grid{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-template-rows:
1fr !important;
gap:
7px !important;
overflow:hidden !important;
}
body.storefront-theme-bento-studio
.bs-track-card{
min-width:0 !important;
min-height:
190px !important;
overflow:hidden !important;
border-radius:
5px !important;
}
body.storefront-theme-bento-studio
.bs-track-art{
width:100% !important;
height:
125px !important;
aspect-ratio:
auto !important;
background-position:
center !important;
background-size:
cover !important;
}
body.storefront-theme-bento-studio
.bs-card-play{
width:
29px !important;
height:
29px !important;
bottom:
7px !important;
font-size:
9px !important;
}
body.storefront-theme-bento-studio
.bs-track-card-copy{
padding:
7px !important;
}
body.storefront-theme-bento-studio
.bs-track-card-copy > strong{
display:block !important;
color:#fff !important;
font-size:
9px !important;
}
body.storefront-theme-bento-studio
.bs-card-creator{
display:block !important;
margin-top:
2px !important;
color:#848f94 !important;
font-size:
7px !important;
}
body.storefront-theme-bento-studio
.bs-card-bottom{
margin-top:
7px !important;
}
body.storefront-theme-bento-studio
.bs-card-bottom b{
font-size:
9px !important;
}
body.storefront-theme-bento-studio
.bs-card-cart{
border:0 !important;
background:transparent !important;
color:#a9b2b6 !important;
font-size:
10px !important;
}
/* ---------------------------------------------------------
BUNDLES + OFFERS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-right-stack{
width:
250px !important;
display:grid !important;
grid-template-columns:
1fr !important;
align-content:start !important;
gap:
8px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-box{
min-height:
155px !important;
padding:
11px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-card{
min-height:
105px !important;
display:grid !important;
grid-template-columns:
88px
minmax(0,1fr) !important;
gap:
9px !important;
padding:
8px !important;
border:
1px solid #2d373c !important;
border-radius:
5px !important;
background:#11181c !important;
}
body.storefront-theme-bento-studio
.bs-bundle-art{
position:relative !important;
width:
88px !important;
min-height:
86px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-art i{
position:absolute !important;
top:
calc(var(--bundle-index) * 4px) !important;
left:
calc(var(--bundle-index) * 5px) !important;
width:
68px !important;
height:
68px !important;
display:block !important;
border:
1px solid #333e43 !important;
border-radius:
4px !important;
background-position:
center !important;
background-size:
cover !important;
}
body.storefront-theme-bento-studio
.bs-bundle-copy strong{
color:#fff !important;
font-size:
10px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-copy p{
margin:
4px 0 !important;
color:#929da2 !important;
font-size:
8px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-copy button{
width:100% !important;
min-height:
28px !important;
margin-top:
6px !important;
border:
1px solid #ef303c !important;
border-radius:
4px !important;
background:#ef303c !important;
color:#fff !important;
font-size:
8px !important;
font-weight:
800 !important;
}
/* ---------------------------------------------------------
LICENSING CARD
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-license-box{
min-height:
175px !important;
padding:
0 !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
72px !important;
overflow:hidden !important;
background:#0d1418 !important;
}
body.storefront-theme-bento-studio
.bs-license-copy{
display:grid !important;
grid-template-columns:
30px
minmax(0,1fr) !important;
gap:
8px !important;
padding:
12px !important;
align-content:center !important;
}
body.storefront-theme-bento-studio
.bs-license-icon{
color:#ef303c !important;
font-size:
27px !important;
}
body.storefront-theme-bento-studio
.bs-license-box h3{
margin:
4px 0 !important;
color:#fff !important;
font-size:
11px !important;
}
body.storefront-theme-bento-studio
.bs-license-box p{
margin:
5px 0 9px !important;
color:#9ca6aa !important;
font-size:
8px !important;
line-height:
1.4 !important;
}
body.storefront-theme-bento-studio
.bs-license-box button{
padding:
7px 9px !important;
font-size:
8px !important;
}
body.storefront-theme-bento-studio
.bs-license-art{
min-height:
175px !important;
background-position:
center !important;
background-size:
cover !important;
filter:
grayscale(.4)
brightness(.48) !important;
}
/* ---------------------------------------------------------
BOTTOM PROMOTIONAL BANNER
APPROVED: UNDER TRACK LIBRARY ONLY
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-bottom-banner{
width:100% !important;
min-height:
76px !important;
margin:
8px 0 0 !important;
padding:
11px 14px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
border-radius:
6px !important;
}
body.storefront-theme-bento-studio
.bs-banner-copy{
position:relative !important;
z-index:2 !important;
}
body.storefront-theme-bento-studio
.bs-banner-copy strong{
display:block !important;
color:#fff !important;
font-family:
Georgia,serif !important;
font-size:
13px !important;
font-style:
italic !important;
line-height:
1.1 !important;
}
body.storefront-theme-bento-studio
.bs-banner-copy small{
display:block !important;
margin-top:
3px !important;
color:#d7dcde !important;
font-size:
7px !important;
}
body.storefront-theme-bento-studio
.bs-bottom-banner > span{
position:relative !important;
z-index:2 !important;
color:#fff !important;
font-size:
7px !important;
text-align:right !important;
line-height:
1.3 !important;
}
body.storefront-theme-bento-studio
.bs-bottom-banner > span b{
font-size:
13px !important;
}
/* ---------------------------------------------------------
LAPTOP
KEEP SAME STRUCTURE — ONLY SCALE DOWN
--------------------------------------------------------- */
@media(max-width:1100px) and (min-width:761px){
body.storefront-theme-bento-studio
.bs-shell{
width:
calc(100% - 16px) !important;
}
body.storefront-theme-bento-studio
.bs-layout{
grid-template-columns:
360px
minmax(0,1fr) !important;
}
body.storefront-theme-bento-studio
.bs-left{
grid-template-columns:
120px
230px !important;
}
body.storefront-theme-bento-studio
.bs-lower-layout{
grid-template-columns:
minmax(0,1fr)
220px !important;
}
body.storefront-theme-bento-studio
.bs-right-stack{
width:
220px !important;
}
body.storefront-theme-bento-studio
.bs-track-art{
height:
105px !important;
}
}
/* END BENTO STUDIO APPROVED MOCKUP BASE FIDELITY */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — FIDELITY PASS #2
APPROVED MOCKUP COMPARISON:
- remove structural/background container lines
- retain borders only on actual cards/modules
- restore browser-control treatment at upper-left
- restore OSBeats identity to navigation rail
- tighten approved navigation spacing
- normalize content gutters
- compact Track Library cards
- improve About artwork balance
BENTO ONLY.
========================================================= */
/* ---------------------------------------------------------
OUTER FRAME
Approved mockup has ONE browser/window frame.
Keep that single frame but soften it.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-shell{
border:
1px solid #2a3439 !important;
box-shadow:
0 18px 48px rgba(0,0,0,.38) !important;
}
/* ---------------------------------------------------------
REMOVE EXTRA STRUCTURAL CONTAINER LINES
These large wrappers are layout containers, not cards.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-layout,
body.storefront-theme-bento-studio
.bs-left,
body.storefront-theme-bento-studio
.bs-main,
body.storefront-theme-bento-studio
.bs-lower-layout,
body.storefront-theme-bento-studio
.bs-lower-left,
body.storefront-theme-bento-studio
.bs-right-stack{
border:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
}
body.storefront-theme-bento-studio
.bs-left{
border-right:
0 !important;
background:
transparent !important;
}
body.storefront-theme-bento-studio
.bs-main{
background:
transparent !important;
}
body.storefront-theme-bento-studio
.bs-lower-left,
body.storefront-theme-bento-studio
.bs-right-stack{
background:
transparent !important;
}
/*
Suppress any inherited decorative pseudo-lines on the
structural wrappers.
*/
body.storefront-theme-bento-studio
.bs-layout::before,
body.storefront-theme-bento-studio
.bs-layout::after,
body.storefront-theme-bento-studio
.bs-left::before,
body.storefront-theme-bento-studio
.bs-left::after,
body.storefront-theme-bento-studio
.bs-main::before,
body.storefront-theme-bento-studio
.bs-main::after{
display:
none !important;
}
/* ---------------------------------------------------------
TOP BAR
Approved mockup:
three browser dots at far left,
search bar beside them,
creator controls at right.
The current .bs-brand element is reused as the browser-dot
holder so no JavaScript/DOM change is needed.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-topbar{
min-height:
52px !important;
grid-template-columns:
138px
minmax(300px,420px)
1fr !important;
gap:
18px !important;
padding:
0 16px !important;
border-bottom:
1px solid #20292e !important;
}
body.storefront-theme-bento-studio
.bs-brand{
width:
58px !important;
height:
16px !important;
display:block !important;
position:relative !important;
justify-self:start !important;
font-size:
0 !important;
overflow:
visible !important;
}
body.storefront-theme-bento-studio
.bs-brand strong,
body.storefront-theme-bento-studio
.bs-brand span{
display:
none !important;
}
body.storefront-theme-bento-studio
.bs-brand::before{
content:"" !important;
position:absolute !important;
top:4px !important;
left:2px !important;
width:8px !important;
height:8px !important;
border-radius:
50% !important;
background:
#ff5f57 !important;
box-shadow:
14px 0 #febc2e,
28px 0 #28c840 !important;
}
/* ---------------------------------------------------------
SEARCH / RIGHT TOP ACTIONS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-global-search{
min-height:
32px !important;
max-width:
420px !important;
}
body.storefront-theme-bento-studio
.bs-topbar nav{
gap:
18px !important;
}
body.storefront-theme-bento-studio
.bs-topbar nav a{
font-size:
8px !important;
}
/* ---------------------------------------------------------
LEFT AREA GUTTERS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-layout{
background:
transparent !important;
}
body.storefront-theme-bento-studio
.bs-left{
padding:
11px 10px 13px 11px !important;
column-gap:
10px !important;
row-gap:
9px !important;
}
body.storefront-theme-bento-studio
.bs-main{
padding:
11px 11px 12px 11px !important;
}
/* ---------------------------------------------------------
NAVIGATION RAIL BRAND
Approved mockup places OSBEATS above Discover inside the
left navigation rail.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-side-nav::before{
content:
"OSBEATS" !important;
display:block !important;
min-height:
34px !important;
margin:
0 0 7px !important;
padding:
7px 8px 5px !important;
background:
linear-gradient(
90deg,
#f4f5f6 0%,
#f4f5f6 31%,
#ef303c 31%,
#ef303c 100%
) !important;
-webkit-background-clip:
text !important;
background-clip:
text !important;
color:
transparent !important;
font-size:
16px !important;
font-weight:
900 !important;
letter-spacing:
-.7px !important;
line-height:
1 !important;
}
body.storefront-theme-bento-studio
.bs-side-nav{
gap:
2px !important;
}
body.storefront-theme-bento-studio
.bs-side-nav a{
min-height:
32px !important;
padding:
6px 8px !important;
border-radius:
4px !important;
font-size:
8px !important;
}
body.storefront-theme-bento-studio
.bs-side-nav a.active{
box-shadow:
inset 3px 0 #ef303c !important;
}
/* ---------------------------------------------------------
PROFILE CARD SPACING
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-profile-card{
padding:
14px 12px 12px !important;
}
body.storefront-theme-bento-studio
.bs-avatar{
margin:
0 auto 9px !important;
}
body.storefront-theme-bento-studio
.bs-profile-card h1{
font-size:
21px !important;
}
body.storefront-theme-bento-studio
.bs-profile-quote{
margin:
8px auto 10px !important;
}
/*
Preserve the approved social-icon row even when this test
account has no configured public social links.
*/
body.storefront-theme-bento-studio
.bs-socials:empty::before{
content:
"◎ 𝕏 ▶ ☁ ● ♪";
display:block;
color:#e4e7e8;
font-size:
11px;
letter-spacing:
1px;
white-space:
nowrap;
}
/* ---------------------------------------------------------
ABOUT CARD
Approved reference shows artwork clearly on the right.
Current version masks too much of it.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-about{
min-height:
198px !important;
}
body.storefront-theme-bento-studio
.bs-about > div:first-child{
min-height:
198px !important;
padding:
12px !important;
background:
linear-gradient(
90deg,
rgba(8,13,16,.98) 0%,
rgba(8,13,16,.92) 42%,
rgba(8,13,16,.60) 63%,
rgba(8,13,16,.15) 100%
) !important;
}
body.storefront-theme-bento-studio
.bs-about-image{
background-position:
right center !important;
opacity:
.86 !important;
filter:
grayscale(.62)
brightness(.58) !important;
}
body.storefront-theme-bento-studio
.bs-about p{
margin:
8px 0 10px !important;
}
/* ---------------------------------------------------------
FEATURED PLAYER SPACING
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-featured{
min-height:
216px !important;
}
body.storefront-theme-bento-studio
.bs-featured-art{
margin:
12px !important;
}
body.storefront-theme-bento-studio
.bs-featured-body{
padding:
15px 15px 10px 2px !important;
}
body.storefront-theme-bento-studio
.bs-featured-heading h2{
margin:
2px 0 !important;
}
body.storefront-theme-bento-studio
.bs-wave{
margin-top:
3px !important;
height:
52px !important;
}
body.storefront-theme-bento-studio
.bs-player-controls{
min-height:
42px !important;
gap:
13px !important;
}
/* ---------------------------------------------------------
STATS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-stats{
gap:
7px !important;
margin-top:
7px !important;
}
body.storefront-theme-bento-studio
.bs-stats article{
min-height:
61px !important;
}
/* ---------------------------------------------------------
LOWER GRID SPACING
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-lower-layout{
gap:
8px !important;
margin-top:
7px !important;
align-items:
start !important;
}
body.storefront-theme-bento-studio
.bs-library{
padding:
10px !important;
}
body.storefront-theme-bento-studio
.bs-section-heading{
margin-bottom:
7px !important;
}
body.storefront-theme-bento-studio
.bs-genre-row{
gap:
4px !important;
margin-bottom:
8px !important;
}
body.storefront-theme-bento-studio
.bs-genre-row button{
padding:
5px 9px !important;
}
/* ---------------------------------------------------------
TRACK CARDS
Still EXACTLY ONE ROW / FOUR CARDS.
Slightly shorter artwork and tighter copy to match mockup.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-track-grid{
gap:
7px !important;
align-items:
stretch !important;
}
body.storefront-theme-bento-studio
.bs-track-card{
min-height:
172px !important;
}
body.storefront-theme-bento-studio
.bs-track-art{
height:
108px !important;
}
body.storefront-theme-bento-studio
.bs-track-card-copy{
padding:
6px !important;
}
body.storefront-theme-bento-studio
.bs-card-bottom{
margin-top:
5px !important;
}
/* ---------------------------------------------------------
BUNDLES / LICENSING COLUMN
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-right-stack{
gap:
8px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-box{
min-height:
142px !important;
padding:
10px !important;
}
body.storefront-theme-bento-studio
.bs-bundle-card{
min-height:
96px !important;
}
body.storefront-theme-bento-studio
.bs-license-box{
min-height:
158px !important;
}
body.storefront-theme-bento-studio
.bs-license-copy{
padding:
10px !important;
}
body.storefront-theme-bento-studio
.bs-license-art{
min-height:
158px !important;
}
/* ---------------------------------------------------------
LOWER PROMOTIONAL BANNER
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-bottom-banner{
min-height:
70px !important;
margin-top:
7px !important;
padding:
9px 12px !important;
}
/* ---------------------------------------------------------
REMOVE LARGE BLANK BACKGROUND BOX APPEARANCE
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-left,
body.storefront-theme-bento-studio
.bs-main{
min-height:
0 !important;
}
/* END BENTO STUDIO FIDELITY PASS #2 */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — BOTTOM ALIGNMENT PASS
APPROVED MOCKUP:
[ GOOD MUSIC BOX ] [ HIGHER SOUND BANNER ------------ ]
^ begins directly under ABOUT
Banner right edge remains aligned with Track Library.
========================================================= */
/* ---------------------------------------------------------
REMOVE FORCED EMPTY HEIGHT BELOW CONTENT
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-shell{
min-height:0 !important;
}
body.storefront-theme-bento-studio
.bs-layout{
min-height:0 !important;
}
/*
Left column must size to its real content rather than
creating a flexible empty third row.
*/
body.storefront-theme-bento-studio
.bs-left{
grid-template-rows:
auto
auto
auto !important;
align-content:start !important;
}
/* ---------------------------------------------------------
GOOD MUSIC BOX
Approved mockup places this immediately to the LEFT
of the promotional banner on the same horizontal row.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-side-quote{
align-self:start !important;
margin:
12px 0 0 !important;
}
/* ---------------------------------------------------------
HIGHER SOUND FOR BIGGER DREAMS BANNER
Current Track Library begins after the creator/About
column. Approved mockup starts this banner beneath About.
Shift left by the creator-column width while expanding
by the same amount. Therefore the RIGHT EDGE DOES NOT MOVE.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-left:
-255px !important;
width:
calc(100% + 255px) !important;
max-width:
none !important;
}
/* ---------------------------------------------------------
KEEP BOTTOM ROW COMPACT
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-lower-left{
overflow:
visible !important;
}
body.storefront-theme-bento-studio
.bs-main{
min-height:
0 !important;
}
body.storefront-theme-bento-studio
.bs-stage{
padding-bottom:
12px !important;
}
/* END BENTO BOTTOM ALIGNMENT PASS */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — SPACING + RADIUS FIDELITY PASS
APPROVED MOCKUP RULES:
- all individual section/module containers rounded
- no section boxes touching one another
- consistent gutters throughout
- structural wrappers remain borderless
- Bento only
========================================================= */
/* ---------------------------------------------------------
BENTO DESIGN TOKENS
--------------------------------------------------------- */
body.storefront-theme-bento-studio{
--bs-module-gap:
10px;
--bs-module-radius:
8px;
--bs-small-radius:
6px;
--bs-module-border:
#2c373d;
}
/* ---------------------------------------------------------
OUTER WINDOW
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-shell{
border-radius:
12px !important;
overflow:
hidden !important;
}
/* ---------------------------------------------------------
STRUCTURAL WRAPPERS
These are layout wrappers only.
They must NOT appear as extra boxes.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-layout,
body.storefront-theme-bento-studio
.bs-left,
body.storefront-theme-bento-studio
.bs-main,
body.storefront-theme-bento-studio
.bs-lower-layout,
body.storefront-theme-bento-studio
.bs-lower-left,
body.storefront-theme-bento-studio
.bs-right-stack{
border:
0 !important;
border-radius:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
LEFT-SIDE GRID SPACING
NAV | PROFILE / ABOUT
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-left{
column-gap:
var(--bs-module-gap) !important;
row-gap:
var(--bs-module-gap) !important;
padding:
12px !important;
}
/* ---------------------------------------------------------
ALL PRIMARY MODULES
ONE CONSISTENT ROUNDED EDGE
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-profile-card,
body.storefront-theme-bento-studio
.bs-about,
body.storefront-theme-bento-studio
.bs-side-quote,
body.storefront-theme-bento-studio
.bs-featured,
body.storefront-theme-bento-studio
.bs-library,
body.storefront-theme-bento-studio
.bs-bundle-box,
body.storefront-theme-bento-studio
.bs-license-box,
body.storefront-theme-bento-studio
.bs-bottom-banner{
border:
1px solid var(--bs-module-border) !important;
border-radius:
var(--bs-module-radius) !important;
overflow:
hidden !important;
}
/* ---------------------------------------------------------
PROFILE CARD
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-profile-card{
margin:
0 !important;
}
/* ---------------------------------------------------------
ABOUT CARD
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-about{
margin:
0 !important;
}
/* ---------------------------------------------------------
GOOD MUSIC BOX
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-side-quote{
margin:
10px 0 0 !important;
border-radius:
var(--bs-module-radius) !important;
}
/* ---------------------------------------------------------
MAIN COLUMN SPACING
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-main{
padding:
12px 12px 12px 0 !important;
}
/* ---------------------------------------------------------
FEATURED PLAYER
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-featured{
margin:
0 !important;
border-radius:
var(--bs-module-radius) !important;
}
body.storefront-theme-bento-studio
.bs-featured-art{
border-radius:
var(--bs-small-radius) !important;
}
/* ---------------------------------------------------------
STAT CARDS
Equal gaps and rounded corners across all five.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-stats{
gap:
var(--bs-module-gap) !important;
margin-top:
var(--bs-module-gap) !important;
}
body.storefront-theme-bento-studio
.bs-stats article{
border:
1px solid var(--bs-module-border) !important;
border-radius:
var(--bs-module-radius) !important;
overflow:
hidden !important;
}
/* ---------------------------------------------------------
TRACK LIBRARY + RIGHT COLUMN
Equal gutter between Track Library and Bundles/Licensing.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-lower-layout{
gap:
var(--bs-module-gap) !important;
margin-top:
var(--bs-module-gap) !important;
align-items:
start !important;
}
/* ---------------------------------------------------------
TRACK LIBRARY
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-library{
margin:
0 !important;
border-radius:
var(--bs-module-radius) !important;
}
/* ---------------------------------------------------------
FILTER PILLS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-genre-row{
gap:
6px !important;
}
body.storefront-theme-bento-studio
.bs-genre-row button{
border-radius:
var(--bs-small-radius) !important;
}
/* ---------------------------------------------------------
FOUR TRACK CARDS
Same rounded corners and equal spacing.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-track-grid{
gap:
var(--bs-module-gap) !important;
}
body.storefront-theme-bento-studio
.bs-track-card{
border:
1px solid var(--bs-module-border) !important;
border-radius:
var(--bs-module-radius) !important;
overflow:
hidden !important;
}
body.storefront-theme-bento-studio
.bs-track-art{
border-radius:
0 !important;
}
body.storefront-theme-bento-studio
.bs-card-play{
border-radius:
50% !important;
}
/* ---------------------------------------------------------
BUNDLES + LICENSING COLUMN
Approved mockup clearly separates both boxes.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-right-stack{
gap:
var(--bs-module-gap) !important;
}
body.storefront-theme-bento-studio
.bs-bundle-box{
margin:
0 !important;
border-radius:
var(--bs-module-radius) !important;
}
body.storefront-theme-bento-studio
.bs-bundle-card{
border-radius:
var(--bs-small-radius) !important;
}
body.storefront-theme-bento-studio
.bs-bundle-art i{
border-radius:
var(--bs-small-radius) !important;
}
body.storefront-theme-bento-studio
.bs-bundle-copy button{
border-radius:
var(--bs-small-radius) !important;
}
/* ---------------------------------------------------------
LICENSING
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-license-box{
margin:
0 !important;
border-radius:
var(--bs-module-radius) !important;
}
body.storefront-theme-bento-studio
.bs-license-box button{
border-radius:
var(--bs-small-radius) !important;
}
/* ---------------------------------------------------------
BOTTOM BANNER
Maintain current correct position:
begins beneath About and ends with Track Library.
Only normalize gap and rounded corners.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-top:
var(--bs-module-gap) !important;
border-radius:
var(--bs-module-radius) !important;
}
/* ---------------------------------------------------------
TOP CONTROLS / SEARCH
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-global-search{
border-radius:
var(--bs-small-radius) !important;
}
body.storefront-theme-bento-studio
.bs-top-avatar{
border-radius:
50% !important;
}
/* ---------------------------------------------------------
ACTION BUTTON CORNERS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-profile-actions button,
body.storefront-theme-bento-studio
.bs-profile-actions a{
border-radius:
var(--bs-small-radius) !important;
}
/* ---------------------------------------------------------
NAV ACTIVE ITEM
Approved design also uses rounded nav selection.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-side-nav a{
border-radius:
var(--bs-small-radius) !important;
}
/* ---------------------------------------------------------
REMOVE ACCIDENTAL TOUCHING CAUSED BY NEGATIVE / ZERO GAPS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-featured
+ .bs-stats{
margin-top:
var(--bs-module-gap) !important;
}
body.storefront-theme-bento-studio
.bs-stats
+ .bs-lower-layout{
margin-top:
var(--bs-module-gap) !important;
}
body.storefront-theme-bento-studio
.bs-library
+ .bs-bottom-banner{
margin-top:
var(--bs-module-gap) !important;
}
/* ---------------------------------------------------------
BOTTOM ALIGNMENT
Keep Good Music box and promo banner visually separated
from boxes above by the same 10px module gutter.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-side-quote{
margin-top:
var(--bs-module-gap) !important;
}
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-top:
var(--bs-module-gap) !important;
}
/* END BENTO SPACING + RADIUS FIDELITY PASS */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — UNIFORM GEOMETRY PASS
TARGET:
- no overlapping containers
- 10px gutters everywhere
- aligned module edges
- equal bottom baselines
- approved Bento structure retained
========================================================= */
body.storefront-theme-bento-studio{
--bs-gap:
10px;
--bs-radius:
8px;
}
/* =========================================================
1. FIX THE PRIMARY COLUMN MATH
Previous:
left layout column = 405px
Actual content inside it:
nav 140
profile/about 255
inner gap 10
left padding 24
----
429px
That caused the profile/About column to physically
overflow into the Featured/Track Library area.
Give the complete left system 440px so there is also a
clean 10px visual gutter before the main Bento content.
========================================================= */
body.storefront-theme-bento-studio
.bs-layout{
grid-template-columns:
440px
minmax(0,1fr) !important;
column-gap:
0 !important;
min-height:
0 !important;
}
/* =========================================================
2. LEFT COLUMN INTERNAL GRID
========================================================= */
body.storefront-theme-bento-studio
.bs-left{
width:
440px !important;
min-width:
440px !important;
box-sizing:
border-box !important;
grid-template-columns:
140px
255px !important;
column-gap:
var(--bs-gap) !important;
row-gap:
var(--bs-gap) !important;
padding:
12px 10px 12px 12px !important;
overflow:
visible !important;
}
/*
140 + 255 + 10 + 12 + 10 = 427.
Remaining space stays inside the left system instead of
overflowing into the main Bento column.
*/
/* =========================================================
3. MAIN CONTENT START
Add the actual 10px separation between the left-side
modules and Featured/Track Library.
========================================================= */
body.storefront-theme-bento-studio
.bs-main{
min-width:
0 !important;
padding:
12px 12px 12px 10px !important;
box-sizing:
border-box !important;
}
/* =========================================================
4. TOP ROW ALIGNMENT
Profile and Featured Player must start on the same line.
========================================================= */
body.storefront-theme-bento-studio
.bs-profile-card,
body.storefront-theme-bento-studio
.bs-featured{
margin-top:
0 !important;
}
/* Profile keeps its current approved footprint. */
body.storefront-theme-bento-studio
.bs-profile-card{
width:
255px !important;
min-width:
255px !important;
max-width:
255px !important;
box-sizing:
border-box !important;
}
/* =========================================================
5. ABOUT / TRACK LIBRARY BOTTOM ALIGNMENT
Current About is shorter than Track Library.
Increase About's real height so its BOTTOM lines up with
Track Library's bottom. This creates the proper foundation
for the two bottom-row elements beneath them.
========================================================= */
body.storefront-theme-bento-studio
.bs-about{
width:
255px !important;
min-width:
255px !important;
max-width:
255px !important;
height:
220px !important;
min-height:
220px !important;
box-sizing:
border-box !important;
}
body.storefront-theme-bento-studio
.bs-about > div:first-child{
height:
100% !important;
min-height:
100% !important;
box-sizing:
border-box !important;
}
/* =========================================================
6. FEATURED → STATS → LOWER GRID
Every vertical separation is exactly 10px.
========================================================= */
body.storefront-theme-bento-studio
.bs-featured
+ .bs-stats{
margin-top:
var(--bs-gap) !important;
}
body.storefront-theme-bento-studio
.bs-stats{
gap:
var(--bs-gap) !important;
margin-bottom:
0 !important;
}
body.storefront-theme-bento-studio
.bs-stats
+ .bs-lower-layout{
margin-top:
var(--bs-gap) !important;
}
/* =========================================================
7. FIVE STAT CARDS
Force identical height.
========================================================= */
body.storefront-theme-bento-studio
.bs-stats article{
height:
62px !important;
min-height:
62px !important;
max-height:
62px !important;
box-sizing:
border-box !important;
}
/* =========================================================
8. LOWER LAYOUT
Track Library and Bundles start at exactly the same height.
========================================================= */
body.storefront-theme-bento-studio
.bs-lower-layout{
display:
grid !important;
grid-template-columns:
minmax(0,1fr)
250px !important;
gap:
var(--bs-gap) !important;
align-items:
start !important;
}
/* =========================================================
9. TRACK LIBRARY
Lock a consistent height for the one-row library.
========================================================= */
body.storefront-theme-bento-studio
.bs-library{
height:
250px !important;
min-height:
250px !important;
max-height:
250px !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
}
/* ---------------------------------------------------------
FOUR MUSIC CARDS — IDENTICAL SIZE
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-track-grid{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:
var(--bs-gap) !important;
align-items:
stretch !important;
}
body.storefront-theme-bento-studio
.bs-track-card{
height:
174px !important;
min-height:
174px !important;
max-height:
174px !important;
box-sizing:
border-box !important;
}
/* =========================================================
10. RIGHT COLUMN
Bundles and Licensing remain separate with the same 10px
gutter used everywhere else.
========================================================= */
body.storefront-theme-bento-studio
.bs-right-stack{
width:
250px !important;
min-width:
250px !important;
max-width:
250px !important;
display:
grid !important;
grid-template-columns:
1fr !important;
grid-template-rows:
152px
174px !important;
gap:
var(--bs-gap) !important;
box-sizing:
border-box !important;
}
body.storefront-theme-bento-studio
.bs-bundle-box{
width:
100% !important;
height:
152px !important;
min-height:
152px !important;
max-height:
152px !important;
margin:
0 !important;
box-sizing:
border-box !important;
}
body.storefront-theme-bento-studio
.bs-license-box{
width:
100% !important;
height:
174px !important;
min-height:
174px !important;
max-height:
174px !important;
margin:
0 !important;
box-sizing:
border-box !important;
}
body.storefront-theme-bento-studio
.bs-license-art{
height:
100% !important;
min-height:
0 !important;
}
/*
152 + 10 + 174 = 336px.
Track Library 250
+ 10px gap
+ bottom banner 76
= 336px.
Both sides therefore terminate on the exact same baseline.
*/
/* =========================================================
11. BOTTOM ROW
Good Music box and Higher Sound banner now share:
- same TOP
- same HEIGHT
- same BOTTOM
========================================================= */
body.storefront-theme-bento-studio
.bs-side-quote{
height:
76px !important;
min-height:
76px !important;
max-height:
76px !important;
margin-top:
var(--bs-gap) !important;
padding:
11px !important;
box-sizing:
border-box !important;
}
/* =========================================================
12. PROMOTIONAL BANNER POSITION
After fixing the primary Bento column, Track Library begins
farther right.
About starts at the creator-column position.
Shift banner left so it begins directly beneath About,
while keeping its right edge aligned with Track Library.
========================================================= */
body.storefront-theme-bento-studio
.bs-bottom-banner{
height:
76px !important;
min-height:
76px !important;
max-height:
76px !important;
margin-top:
var(--bs-gap) !important;
/*
Track Library begins 265px to the right of the About box:
creator width 255 + 10px gutter.
*/
margin-left:
-265px !important;
width:
calc(100% + 265px) !important;
max-width:
none !important;
box-sizing:
border-box !important;
}
/* =========================================================
13. ENSURE BANNER + GOOD MUSIC ROW START TOGETHER
========================================================= */
body.storefront-theme-bento-studio
.bs-left{
grid-template-rows:
auto
220px
76px !important;
}
/*
Profile occupies row 1.
About occupies row 2.
Good Music occupies row 3.
Track Library + Banner geometry is now calculated to end
at exactly the same overall baseline.
*/
/* =========================================================
14. MODULE EDGE CONSISTENCY
========================================================= */
body.storefront-theme-bento-studio
.bs-profile-card,
body.storefront-theme-bento-studio
.bs-about,
body.storefront-theme-bento-studio
.bs-featured,
body.storefront-theme-bento-studio
.bs-stats article,
body.storefront-theme-bento-studio
.bs-library,
body.storefront-theme-bento-studio
.bs-track-card,
body.storefront-theme-bento-studio
.bs-bundle-box,
body.storefront-theme-bento-studio
.bs-license-box,
body.storefront-theme-bento-studio
.bs-side-quote,
body.storefront-theme-bento-studio
.bs-bottom-banner{
border-radius:
var(--bs-radius) !important;
}
/* =========================================================
15. REMOVE FLEX / AUTO HEIGHT CONFLICTS
========================================================= */
body.storefront-theme-bento-studio
.bs-lower-left{
min-height:
0 !important;
height:
auto !important;
}
body.storefront-theme-bento-studio
.bs-main,
body.storefront-theme-bento-studio
.bs-layout,
body.storefront-theme-bento-studio
.bs-shell{
height:
auto !important;
min-height:
0 !important;
}
/* =========================================================
16. FINAL OUTER BOTTOM SPACING
========================================================= */
body.storefront-theme-bento-studio
.bs-stage{
padding-bottom:
14px !important;
}
/* END BENTO UNIFORM GEOMETRY PASS */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — BOTTOM ROW LINEUP FIX
Align:
GOOD MUSIC BOX | HIGHER SOUND PROMO BANNER
Both must share the exact same top and bottom baseline.
========================================================= */
body.storefront-theme-bento-studio
.bs-side-quote{
/*
.bs-left already supplies the 10px grid row-gap.
Remove the additional margin that was pushing this box
lower than the promotional banner.
*/
margin-top:
0 !important;
margin-bottom:
0 !important;
height:
76px !important;
min-height:
76px !important;
max-height:
76px !important;
align-self:
stretch !important;
box-sizing:
border-box !important;
}
body.storefront-theme-bento-studio
.bs-bottom-banner{
height:
76px !important;
min-height:
76px !important;
max-height:
76px !important;
box-sizing:
border-box !important;
}
/*
Keep the existing 10px separation beneath the modules above.
The left side receives it from grid row-gap.
The banner receives it from margin-top.
*/
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-top:
10px !important;
}
/* END BENTO BOTTOM ROW LINEUP FIX */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — BOTTOM ROW FINAL LINEUP
The left grid already provides the 10px vertical gutter.
Do NOT add another margin to .bs-side-quote.
Final target:
[ GOOD MUSIC ] [ HIGHER SOUND BANNER ---------------- ]
same top edge / same bottom edge / same height
========================================================= */
body.storefront-theme-bento-studio
.bs-side-quote{
margin-top:
0 !important;
margin-bottom:
0 !important;
height:
76px !important;
min-height:
76px !important;
max-height:
76px !important;
align-self:
stretch !important;
box-sizing:
border-box !important;
}
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-top:
10px !important;
margin-bottom:
0 !important;
height:
76px !important;
min-height:
76px !important;
max-height:
76px !important;
box-sizing:
border-box !important;
}
/*
Left side:
About -> 10px grid row-gap -> Good Music
Main side:
Track Library -> 10px margin -> Promo Banner
Both therefore start on the identical baseline.
*/
/* END BENTO BOTTOM ROW FINAL LINEUP */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — BOTTOM HORIZONTAL ALIGNMENT
Final geometry:
[ GOOD MUSIC ] [ HIGHER SOUND BANNER ---------------- ]
^
exact left edge of ABOUT above
Previous banner shift: 265px
Correct structural distance: 287px
========================================================= */
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-left:
-287px !important;
width:
calc(100% + 287px) !important;
max-width:
none !important;
}
/*
Preserve the already-correct bottom-row vertical geometry.
*/
body.storefront-theme-bento-studio
.bs-side-quote,
body.storefront-theme-bento-studio
.bs-bottom-banner{
height:
76px !important;
min-height:
76px !important;
max-height:
76px !important;
box-sizing:
border-box !important;
}
body.storefront-theme-bento-studio
.bs-side-quote{
margin-top:
0 !important;
}
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-top:
10px !important;
}
/* END BENTO BOTTOM HORIZONTAL ALIGNMENT */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — PROFILE / MAIN COLUMN GAP FIX
CURRENT:
profile/about -> ~33px -> featured/track library
APPROVED:
profile/about -> 10px -> featured/track library
The previous 440px left structural width contained 23px
of unused space. Remove that unused width.
========================================================= */
/* ---------------------------------------------------------
LEFT STRUCTURAL COLUMN
Exact required width:
left padding 12px
nav 140px
gap 10px
profile/about 255px
right padding 0px
-----
417px
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-layout{
grid-template-columns:
417px
minmax(0,1fr) !important;
}
/* ---------------------------------------------------------
REMOVE THE DEAD SPACE INSIDE THE LEFT COLUMN
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-left{
width:
417px !important;
min-width:
417px !important;
max-width:
417px !important;
grid-template-columns:
140px
255px !important;
column-gap:
10px !important;
padding:
12px 0 12px 12px !important;
box-sizing:
border-box !important;
}
/* ---------------------------------------------------------
MAIN COLUMN
Main content begins exactly 10px after About/Profile.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-main{
padding:
12px 12px 12px 10px !important;
box-sizing:
border-box !important;
}
/* ---------------------------------------------------------
BOTTOM BANNER
The Track Library moved 23px left with the main column.
Recalculate the banner offset so its left edge continues
to line up directly underneath the About module.
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-bottom-banner{
margin-left:
-265px !important;
width:
calc(100% + 265px) !important;
max-width:
none !important;
}
/* ---------------------------------------------------------
PRESERVE 10PX MODULE GAP
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-featured,
body.storefront-theme-bento-studio
.bs-stats,
body.storefront-theme-bento-studio
.bs-library{
margin-left:
0 !important;
}
/* END BENTO PROFILE / MAIN COLUMN GAP FIX */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — NAV CLEANUP
- Remove decorative red/yellow/green browser dots
- Increase left navigation label font size
- Bento only
========================================================= */
/* ---------------------------------------------------------
REMOVE RED / YELLOW / GREEN DOTS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-brand{
display:
none !important;
}
/*
Collapse the unused first top-bar column after removing
the decorative browser controls.
*/
body.storefront-theme-bento-studio
.bs-topbar{
grid-template-columns:
minmax(300px,420px)
1fr !important;
column-gap:
18px !important;
}
/* ---------------------------------------------------------
INCREASE LEFT NAVIGATION LABEL SIZE
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-side-nav a{
font-size:
10px !important;
line-height:
1.25 !important;
}
/*
Keep the OSBeats navigation-rail heading proportional
to the larger menu labels.
*/
body.storefront-theme-bento-studio
.bs-side-nav::before{
font-size:
17px !important;
}
/* END BENTO NAV CLEANUP */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — WAVEFORM + VOLUME PASS
- Remove red waveform container background
- Extend waveform bars across full available width
- Full-volume visual state
- Bento only
========================================================= */
/* ---------------------------------------------------------
WAVEFORM CONTAINER
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-wave{
width:
100% !important;
max-width:
none !important;
height:
58px !important;
margin:
6px 0 0 !important;
padding:
0 !important;
display:
flex !important;
align-items:
center !important;
justify-content:
stretch !important;
gap:
1px !important;
border:
0 !important;
border-radius:
0 !important;
outline:
0 !important;
background:
transparent !important;
background-color:
transparent !important;
box-shadow:
none !important;
overflow:
hidden !important;
}
/*
Stretch generated waveform bars instead of allowing
fixed-width bars to stop part-way across the player.
*/
body.storefront-theme-bento-studio
.bs-wave > span,
body.storefront-theme-bento-studio
.bs-wave > i{
flex:
1 1 0 !important;
width:
auto !important;
min-width:
1px !important;
max-width:
none !important;
}
/*
Remove inherited button treatment from waveform player.
*/
body.storefront-theme-bento-studio
button.bs-wave:hover,
body.storefront-theme-bento-studio
button.bs-wave:focus,
body.storefront-theme-bento-studio
button.bs-wave:active{
background:
transparent !important;
background-color:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
FULL VOLUME VISUAL STATE
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-volume-control{
opacity:
1 !important;
}
body.storefront-theme-bento-studio
.bs-volume-line{
background:
#343e43 !important;
}
body.storefront-theme-bento-studio
.bs-volume-line i{
width:
100% !important;
max-width:
100% !important;
background:
#ef303c !important;
}
/* END BENTO WAVEFORM + VOLUME PASS */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — APPROVED EMBED WAVEFORM + ICONS
Approved OSBeats waveform:
- continuous SVG silhouette
- gray base
- identical red progress layer
- no rectangular background
========================================================= */
/* ---------------------------------------------------------
APPROVED CONTINUOUS WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-wave{
width:
100% !important;
height:
62px !important;
min-height:
62px !important;
margin:
6px 0 0 !important;
padding:
0 !important;
display:
block !important;
position:
relative !important;
border:
0 !important;
border-radius:
0 !important;
background:
transparent !important;
box-shadow:
none !important;
overflow:
visible !important;
}
body.storefront-theme-bento-studio
.bs-approved-wave-svg{
display:
block !important;
width:
100% !important;
height:
62px !important;
overflow:
visible !important;
}
/*
Same base color used by the approved OSBeats player.
*/
body.storefront-theme-bento-studio
.bs-approved-wave-svg
.wave-base{
fill:
#626874 !important;
stroke:
none !important;
}
/*
Same waveform shape, clipped by actual playback progress.
*/
body.storefront-theme-bento-studio
.bs-approved-wave-svg
.wave-played{
fill:
#73070B !important;
stroke:
none !important;
}
body.storefront-theme-bento-studio
.bs-approved-wave-svg
.wave-progress-shape{
transition:
width .08s linear !important;
}
/*
No hover/focus button background behind the waveform.
*/
body.storefront-theme-bento-studio
.bs-wave:hover,
body.storefront-theme-bento-studio
.bs-wave:focus,
body.storefront-theme-bento-studio
.bs-wave:active{
background:
transparent !important;
border:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
}
/* ---------------------------------------------------------
REAL CONTROL ICONS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-control-svg,
body.storefront-theme-bento-studio
.bs-speaker-svg{
width:
18px !important;
height:
18px !important;
display:
block !important;
fill:
none !important;
stroke:
currentColor !important;
stroke-width:
1.9 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
/* ---------------------------------------------------------
SHUFFLE
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-shuffle-button{
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
color:
#dce1e3 !important;
}
/* ---------------------------------------------------------
SPEAKER
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-speaker-button{
width:
26px !important;
height:
26px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
flex:
0 0 26px !important;
border:
0 !important;
background:
transparent !important;
color:
#dce1e3 !important;
}
body.storefront-theme-bento-studio
.bs-speaker-button:hover,
body.storefront-theme-bento-studio
.bs-speaker-button:focus{
background:
transparent !important;
color:
#fff !important;
outline:
0 !important;
}
/* ---------------------------------------------------------
FULL VOLUME LEVEL
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-volume-control{
display:
flex !important;
align-items:
center !important;
gap:
7px !important;
width:
112px !important;
}
body.storefront-theme-bento-studio
.bs-volume-line{
flex:
1 1 auto !important;
height:
3px !important;
}
body.storefront-theme-bento-studio
.bs-volume-line i{
width:
100% !important;
height:
3px !important;
}
/* END BENTO APPROVED EMBED WAVEFORM + ICONS */
/* =========================================================
OSBEATS 20260910
BENTO — EXACT MINI WAVEFORM + APPROVED STAT ICONS
========================================================= */
/* ---------------------------------------------------------
EXACT OSBEATS REAL WAVEFORM
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-wave{
width:
100% !important;
height:
44px !important;
min-height:
44px !important;
margin:
7px 0 0 !important;
padding:
0 !important;
display:
block !important;
border:
0 !important;
background:
transparent !important;
box-shadow:
none !important;
overflow:
hidden !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-waveform{
position:
relative !important;
display:
block !important;
width:
100% !important;
height:
44px !important;
min-width:
0 !important;
overflow:
hidden !important;
border:
0 !important;
margin:
0 !important;
padding:
0 !important;
background:
transparent !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-svg{
position:
absolute !important;
inset:
0 !important;
display:
block !important;
width:
100% !important;
height:
100% !important;
shape-rendering:
geometricPrecision !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-svg path{
stroke:
none !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-gray path{
fill:
#555b65 !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-red path{
fill:
#ed1639 !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-progress{
position:
absolute !important;
inset:
0 !important;
width:
100% !important;
height:
100% !important;
overflow:
visible !important;
pointer-events:
none !important;
z-index:
2 !important;
clip-path:
inset(0 100% 0 0) !important;
-webkit-clip-path:
inset(0 100% 0 0) !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-progress
.osbeats-real-wave-svg{
position:
absolute !important;
inset:
0 !important;
width:
100% !important;
min-width:
100% !important;
max-width:
none !important;
height:
100% !important;
}
/* subtle center axis from approved OSBeats player */
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-waveform::after{
content:
"" !important;
position:
absolute !important;
left:
0 !important;
right:
0 !important;
top:
50% !important;
height:
1px !important;
transform:
translateY(-.5px) !important;
background:
rgba(255,255,255,.035) !important;
pointer-events:
none !important;
z-index:
3 !important;
}
/* ---------------------------------------------------------
APPROVED BENTO STAT ICONS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-stats article{
display:
grid !important;
grid-template-columns:
30px
minmax(0,1fr) !important;
grid-template-rows:
auto
auto !important;
align-items:
center !important;
column-gap:
8px !important;
}
body.storefront-theme-bento-studio
.bs-stats article
.bs-stat-icon{
grid-column:
1 !important;
grid-row:
1 / span 2 !important;
width:
24px !important;
height:
24px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
color:
#ef303c !important;
}
body.storefront-theme-bento-studio
.bs-stat-svg{
width:
22px !important;
height:
22px !important;
display:
block !important;
overflow:
visible !important;
fill:
none !important;
stroke:
currentColor !important;
stroke-width:
1.8 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
body.storefront-theme-bento-studio
.bs-stat-svg-play{
fill:
currentColor !important;
stroke:
currentColor !important;
}
body.storefront-theme-bento-studio
.bs-stats article > strong{
grid-column:
2 !important;
grid-row:
1 !important;
align-self:
end !important;
}
body.storefront-theme-bento-studio
.bs-stats article > small{
grid-column:
2 !important;
grid-row:
2 !important;
align-self:
start !important;
}
/* END BENTO EXACT MINI WAVEFORM + APPROVED STAT ICONS */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — APPROVED PLAY BUTTONS
Approved mockup:
- track cards = small circular artwork play buttons
- featured player = large circular red play button
- no red/black square buttons
========================================================= */
/* ---------------------------------------------------------
TRACK CARD PLAY BUTTONS
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-track-art{
position:
relative !important;
}
body.storefront-theme-bento-studio
.bs-card-play{
position:
absolute !important;
left:
50% !important;
right:
auto !important;
top:
auto !important;
bottom:
10px !important;
transform:
translateX(-50%) !important;
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
margin:
0 !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
1px solid rgba(255,255,255,.88) !important;
border-radius:
50% !important;
background:
rgba(8,12,15,.82) !important;
background-color:
rgba(8,12,15,.82) !important;
color:
transparent !important;
font-size:
0 !important;
line-height:
1 !important;
box-shadow:
0 2px 8px rgba(0,0,0,.34) !important;
z-index:
4 !important;
}
/* proper white play triangle */
body.storefront-theme-bento-studio
.bs-card-play::before{
content:
"" !important;
display:
block !important;
width:
0 !important;
height:
0 !important;
margin-left:
2px !important;
border-top:
5px solid transparent !important;
border-bottom:
5px solid transparent !important;
border-left:
8px solid #ffffff !important;
}
/* remove square hover treatment */
body.storefront-theme-bento-studio
.bs-card-play:hover,
body.storefront-theme-bento-studio
.bs-card-play:focus,
body.storefront-theme-bento-studio
.bs-card-play:active{
border-radius:
50% !important;
background:
rgba(12,17,20,.94) !important;
background-color:
rgba(12,17,20,.94) !important;
box-shadow:
0 2px 10px rgba(0,0,0,.40) !important;
outline:
none !important;
}
/* ---------------------------------------------------------
FEATURED MUSIC PLAYER MAIN PLAY BUTTON
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-main-play{
width:
46px !important;
height:
46px !important;
min-width:
46px !important;
min-height:
46px !important;
padding:
0 !important;
margin:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
flex:
0 0 46px !important;
border:
0 !important;
border-radius:
50% !important;
background:
#ef303c !important;
background-color:
#ef303c !important;
color:
transparent !important;
font-size:
0 !important;
line-height:
1 !important;
box-shadow:
0 3px 12px rgba(239,48,60,.28) !important;
}
/* proper featured-player play triangle */
body.storefront-theme-bento-studio
.bs-main-play::before{
content:
"" !important;
display:
block !important;
width:
0 !important;
height:
0 !important;
margin-left:
3px !important;
border-top:
7px solid transparent !important;
border-bottom:
7px solid transparent !important;
border-left:
11px solid #ffffff !important;
}
body.storefront-theme-bento-studio
.bs-main-play:hover,
body.storefront-theme-bento-studio
.bs-main-play:focus,
body.storefront-theme-bento-studio
.bs-main-play:active{
border:
0 !important;
border-radius:
50% !important;
background:
#ff3944 !important;
background-color:
#ff3944 !important;
outline:
none !important;
box-shadow:
0 4px 14px rgba(239,48,60,.34) !important;
}
/* ---------------------------------------------------------
KEEP TRACK ART CLEAN
--------------------------------------------------------- */
body.storefront-theme-bento-studio
.bs-track-card
.bs-track-art > button{
border-radius:
50% !important;
}
/* END BENTO APPROVED PLAY BUTTONS */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — APPROVED ORANGE CONTROLS
APPROVED MOCKUP CORRECTIONS:
- orange accent system
- large orange circular main Play button
- dark circular track Play buttons with orange outline
- orange waveform playback progress
- orange stat icons
- balanced transport controls
- circular orange verified badge on avatar
========================================================= */
body.storefront-theme-bento-studio{
--bs-approved-orange:
#ff5a1f;
--bs-approved-orange-bright:
#ff6a24;
--bs-approved-orange-dark:
#c83a0a;
}
/* =========================================================
FEATURED WAVEFORM
Exact existing OSBeats waveform remains.
Only approved Bento played color changes to orange.
========================================================= */
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-gray path{
fill:
#555b65 !important;
}
body.storefront-theme-bento-studio
.bs-wave
.osbeats-real-wave-red path{
fill:
var(--bs-approved-orange) !important;
}
/* =========================================================
FEATURED MAIN PLAY BUTTON
APPROVED:
large solid orange CIRCLE
========================================================= */
body.storefront-theme-bento-studio
.bs-main-play{
width:
50px !important;
height:
50px !important;
min-width:
50px !important;
min-height:
50px !important;
flex:
0 0 50px !important;
padding:
0 !important;
margin:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
0 !important;
border-radius:
50% !important;
background:
var(--bs-approved-orange) !important;
background-color:
var(--bs-approved-orange) !important;
background-image:
none !important;
color:
transparent !important;
font-size:
0 !important;
line-height:
1 !important;
box-shadow:
0 5px 15px rgba(255,90,31,.24) !important;
overflow:
hidden !important;
}
/* white Play triangle */
body.storefront-theme-bento-studio
.bs-main-play::before{
content:
"" !important;
display:
block !important;
width:
0 !important;
height:
0 !important;
margin-left:
3px !important;
border-top:
7px solid transparent !important;
border-bottom:
7px solid transparent !important;
border-left:
11px solid #fff !important;
}
body.storefront-theme-bento-studio
.bs-main-play:hover,
body.storefront-theme-bento-studio
.bs-main-play:focus,
body.storefront-theme-bento-studio
.bs-main-play:active{
border-radius:
50% !important;
background:
var(--bs-approved-orange-bright) !important;
background-color:
var(--bs-approved-orange-bright) !important;
outline:
none !important;
}
/* =========================================================
TRANSPORT CONTROL ROW
Approved spacing:
shuffle / previous / MAIN / next / repeat / speaker
========================================================= */
body.storefront-theme-bento-studio
.bs-player-controls{
min-height:
54px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
18px !important;
}
body.storefront-theme-bento-studio
.bs-player-small{
width:
28px !important;
height:
28px !important;
min-width:
28px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
0 !important;
background:
transparent !important;
background-color:
transparent !important;
color:
#d9dee1 !important;
box-shadow:
none !important;
}
body.storefront-theme-bento-studio
.bs-player-small:hover,
body.storefront-theme-bento-studio
.bs-player-small:focus{
color:
#fff !important;
background:
transparent !important;
outline:
none !important;
}
/* =========================================================
SPEAKER / VOLUME
========================================================= */
body.storefront-theme-bento-studio
.bs-volume-control{
width:
120px !important;
margin-left:
2px !important;
display:
flex !important;
align-items:
center !important;
gap:
8px !important;
}
body.storefront-theme-bento-studio
.bs-speaker-button{
color:
#d9dee1 !important;
}
body.storefront-theme-bento-studio
.bs-volume-line{
height:
3px !important;
border-radius:
3px !important;
background:
#343a40 !important;
overflow:
hidden !important;
}
body.storefront-theme-bento-studio
.bs-volume-line i{
display:
block !important;
width:
100% !important;
height:
100% !important;
border-radius:
3px !important;
background:
var(--bs-approved-orange) !important;
}
/* =========================================================
TRACK CARD PLAY BUTTONS
APPROVED:
small dark circle
orange border/accent
white Play triangle
========================================================= */
body.storefront-theme-bento-studio
.bs-card-play{
position:
absolute !important;
left:
50% !important;
right:
auto !important;
top:
auto !important;
bottom:
9px !important;
transform:
translateX(-50%) !important;
width:
29px !important;
height:
29px !important;
min-width:
29px !important;
min-height:
29px !important;
padding:
0 !important;
margin:
0 !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
1.5px solid
var(--bs-approved-orange) !important;
border-radius:
50% !important;
background:
rgba(7,10,12,.90) !important;
background-color:
rgba(7,10,12,.90) !important;
background-image:
none !important;
color:
transparent !important;
font-size:
0 !important;
box-shadow:
0 2px 7px rgba(0,0,0,.42) !important;
overflow:
hidden !important;
z-index:
5 !important;
}
body.storefront-theme-bento-studio
.bs-card-play::before{
content:
"" !important;
width:
0 !important;
height:
0 !important;
display:
block !important;
margin-left:
2px !important;
border-top:
4px solid transparent !important;
border-bottom:
4px solid transparent !important;
border-left:
7px solid #fff !important;
}
body.storefront-theme-bento-studio
.bs-card-play:hover,
body.storefront-theme-bento-studio
.bs-card-play:focus,
body.storefront-theme-bento-studio
.bs-card-play:active{
border:
1.5px solid
var(--bs-approved-orange-bright) !important;
border-radius:
50% !important;
background:
rgba(13,16,18,.96) !important;
outline:
none !important;
}
/* =========================================================
FIVE STAT ICONS
Approved accent is ORANGE.
========================================================= */
body.storefront-theme-bento-studio
.bs-stats article
.bs-stat-icon{
color:
var(--bs-approved-orange) !important;
}
body.storefront-theme-bento-studio
.bs-stat-svg{
color:
var(--bs-approved-orange) !important;
stroke:
currentColor !important;
}
body.storefront-theme-bento-studio
.bs-stat-svg-play{
color:
var(--bs-approved-orange) !important;
fill:
currentColor !important;
stroke:
currentColor !important;
}
/* =========================================================
VERIFIED BADGE
Approved:
small orange CIRCLE attached to lower-right of avatar.
========================================================= */
body.storefront-theme-bento-studio
.bs-avatar{
position:
relative !important;
overflow:
visible !important;
}
body.storefront-theme-bento-studio
.bs-avatar-verified{
position:
absolute !important;
right:
5px !important;
bottom:
7px !important;
width:
24px !important;
height:
24px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
2px solid #10171b !important;
border-radius:
50% !important;
background:
var(--bs-approved-orange) !important;
color:
#fff !important;
font-size:
13px !important;
font-weight:
900 !important;
line-height:
1 !important;
box-shadow:
0 2px 7px rgba(0,0,0,.32) !important;
z-index:
8 !important;
}
/* Remove any inherited badge presentation beside the name */
body.storefront-theme-bento-studio
.bs-profile-card h1
.badge,
body.storefront-theme-bento-studio
.bs-profile-card h1
.verified,
body.storefront-theme-bento-studio
.bs-profile-card h1
.verified-badge{
display:
none !important;
}
/* =========================================================
OTHER BENTO RED PLAYER ACCENTS
Keep player-specific accent language consistent with the
approved orange theme.
========================================================= */
body.storefront-theme-bento-studio
.bs-featured-label{
color:
#fff !important;
}
body.storefront-theme-bento-studio
.bs-featured-label::before{
background:
var(--bs-approved-orange) !important;
}
/* END BENTO APPROVED ORANGE CONTROLS */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — PLAY BUTTON ROOT OVERRIDE
ROOT CAUSE:
Global OSBeats play-button CSS forces:
- red/black gradient
- border-radius: 0
- square presentation
These Bento-specific selectors intentionally outrank
the global aria-label play-button rule.
APPROVED MOCKUP:
- Featured player: solid ORANGE circular control
- Track cards: dark circular control with light ring
- White play/pause glyphs
========================================================= */
/* =========================================================
FEATURED PLAYER MAIN BUTTON
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play{
-webkit-appearance:
none !important;
appearance:
none !important;
width:
50px !important;
height:
50px !important;
min-width:
50px !important;
min-height:
50px !important;
max-width:
50px !important;
max-height:
50px !important;
flex:
0 0 50px !important;
aspect-ratio:
1 / 1 !important;
padding:
0 !important;
margin:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
0 !important;
border-radius:
50% !important;
background:
#ff5a1f !important;
background-color:
#ff5a1f !important;
background-image:
none !important;
color:
#ffffff !important;
font-size:
16px !important;
font-weight:
700 !important;
line-height:
1 !important;
text-indent:
0 !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
mask:
none !important;
-webkit-mask:
none !important;
box-shadow:
0 4px 12px rgba(0,0,0,.28) !important;
overflow:
hidden !important;
}
/*
Stop the previous fake CSS triangle.
Use the button's real Play/Pause character so its
state can still change correctly during playback.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play::after{
content:
none !important;
display:
none !important;
}
/* Hover stays circular and orange */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play:hover,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play:focus,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play:active{
border:
0 !important;
border-radius:
50% !important;
background:
#ff681f !important;
background-color:
#ff681f !important;
background-image:
none !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
outline:
0 !important;
}
/* =========================================================
TRACK CARD PLAY BUTTONS
Approved mockup:
- dark circular control
- thin light border
- white play glyph
- no red fill
- no square background
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play{
-webkit-appearance:
none !important;
appearance:
none !important;
position:
absolute !important;
left:
50% !important;
right:
auto !important;
top:
auto !important;
bottom:
10px !important;
transform:
translateX(-50%) !important;
width:
29px !important;
height:
29px !important;
min-width:
29px !important;
min-height:
29px !important;
max-width:
29px !important;
max-height:
29px !important;
aspect-ratio:
1 / 1 !important;
padding:
0 !important;
margin:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
1px solid rgba(255,255,255,.88) !important;
border-radius:
50% !important;
background:
rgba(5,8,10,.90) !important;
background-color:
rgba(5,8,10,.90) !important;
background-image:
none !important;
color:
#ffffff !important;
font-size:
12px !important;
font-weight:
700 !important;
line-height:
1 !important;
text-indent:
1px !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
mask:
none !important;
-webkit-mask:
none !important;
box-shadow:
0 2px 8px rgba(0,0,0,.38) !important;
overflow:
hidden !important;
z-index:
6 !important;
}
/*
Remove previous CSS-created triangle.
Keep the real button Play glyph.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play::after{
content:
none !important;
display:
none !important;
}
/* Track button hover */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play:hover,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play:focus,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play:active{
border:
1px solid #ffffff !important;
border-radius:
50% !important;
background:
rgba(9,12,14,.98) !important;
background-color:
rgba(9,12,14,.98) !important;
background-image:
none !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
outline:
0 !important;
}
/* =========================================================
PRESERVE APPROVED CARD ART POSITION
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-art{
position:
relative !important;
overflow:
hidden !important;
}
/* =========================================================
FINAL GLOBAL-OVERRIDE PROTECTION
Explicitly beat OSBeats global aria-label rules.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play[aria-label],
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-card-play[aria-label]{
border-radius:
50% !important;
background-image:
none !important;
mask:
none !important;
-webkit-mask:
none !important;
}
/* END BENTO PLAY BUTTON ROOT OVERRIDE */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — APPROVED PLAY CONTROL GLYPH LOCK
APPROVED MOCKUP:
FEATURED:
orange circular control
centered white Play / Pause glyph
TRACK CARDS:
dark circular control
orange outline
centered white Play glyph
BENTO ONLY.
========================================================= */
/* =========================================================
FEATURED PLAYER — ORANGE CIRCLE
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play{
-webkit-appearance:
none !important;
appearance:
none !important;
position:
relative !important;
width:
50px !important;
height:
50px !important;
min-width:
50px !important;
min-height:
50px !important;
max-width:
50px !important;
max-height:
50px !important;
flex:
0 0 50px !important;
aspect-ratio:
1 / 1 !important;
padding:
0 !important;
margin:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
0 !important;
border-radius:
50% !important;
background:
#ff5a1f !important;
background-color:
#ff5a1f !important;
background-image:
none !important;
color:
transparent !important;
font-size:
0 !important;
line-height:
0 !important;
text-indent:
0 !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
box-shadow:
0 4px 12px rgba(0,0,0,.30) !important;
overflow:
hidden !important;
}
/*
Hide inherited/internal Play artwork.
The approved glyph is drawn consistently below.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play > *{
opacity:
0 !important;
visibility:
hidden !important;
}
/* ---------------------------------------------------------
WHITE FEATURED PLAY TRIANGLE
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play::before{
content:
"" !important;
display:
block !important;
position:
absolute !important;
left:
50% !important;
top:
50% !important;
width:
0 !important;
height:
0 !important;
margin:
0 !important;
border-top:
8px solid transparent !important;
border-bottom:
8px solid transparent !important;
border-left:
12px solid #ffffff !important;
border-right:
0 !important;
background:
transparent !important;
transform:
translate(-42%,-50%) !important;
opacity:
1 !important;
visibility:
visible !important;
z-index:
5 !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play::after{
content:
none !important;
display:
none !important;
}
/* ---------------------------------------------------------
PLAYING STATE — APPROVED WHITE PAUSE BARS
Supports existing/likely player-state classes without
changing the Bento playback controller.
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play.is-playing::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play.playing::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play[data-playing="true"]::before{
width:
5px !important;
height:
17px !important;
border:
0 !important;
background:
#ffffff !important;
box-shadow:
9px 0 0 #ffffff !important;
transform:
translate(-7px,-50%) !important;
}
/* Featured hover remains the same approved circle */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play:hover,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play:focus,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play:active{
border:
0 !important;
border-radius:
50% !important;
background:
#ff6427 !important;
background-color:
#ff6427 !important;
background-image:
none !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
outline:
0 !important;
}
/* =========================================================
TRACK CARD PLAY BUTTONS
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play{
-webkit-appearance:
none !important;
appearance:
none !important;
position:
absolute !important;
left:
50% !important;
right:
auto !important;
top:
auto !important;
bottom:
10px !important;
transform:
translateX(-50%) !important;
width:
29px !important;
height:
29px !important;
min-width:
29px !important;
min-height:
29px !important;
max-width:
29px !important;
max-height:
29px !important;
aspect-ratio:
1 / 1 !important;
padding:
0 !important;
margin:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
1.5px solid #ff5a1f !important;
border-radius:
50% !important;
background:
rgba(5,8,10,.92) !important;
background-color:
rgba(5,8,10,.92) !important;
background-image:
none !important;
color:
transparent !important;
font-size:
0 !important;
line-height:
0 !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
box-shadow:
0 2px 7px rgba(0,0,0,.42) !important;
overflow:
hidden !important;
z-index:
8 !important;
}
/* Hide inherited/internal card glyphs */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play > *{
opacity:
0 !important;
visibility:
hidden !important;
}
/* ---------------------------------------------------------
WHITE TRACK-CARD PLAY TRIANGLE
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play::before{
content:
"" !important;
display:
block !important;
position:
absolute !important;
left:
50% !important;
top:
50% !important;
width:
0 !important;
height:
0 !important;
margin:
0 !important;
border-top:
5px solid transparent !important;
border-bottom:
5px solid transparent !important;
border-left:
8px solid #ffffff !important;
border-right:
0 !important;
background:
transparent !important;
transform:
translate(-40%,-50%) !important;
opacity:
1 !important;
visibility:
visible !important;
z-index:
9 !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play::after{
content:
none !important;
display:
none !important;
}
/* ---------------------------------------------------------
TRACK CARD ACTIVE / PLAYING STATE
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play.is-playing::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play.playing::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play[data-playing="true"]::before{
width:
3px !important;
height:
11px !important;
border:
0 !important;
background:
#ffffff !important;
box-shadow:
6px 0 0 #ffffff !important;
transform:
translate(-5px,-50%) !important;
}
/* Track-card hover remains dark/orange */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play:hover,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play:focus,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play:active{
border:
1.5px solid #ff6b30 !important;
border-radius:
50% !important;
background:
rgba(8,11,13,.98) !important;
background-color:
rgba(8,11,13,.98) !important;
background-image:
none !important;
clip-path:
circle(50%) !important;
-webkit-clip-path:
circle(50%) !important;
outline:
0 !important;
}
/* =========================================================
FINAL PROTECTION AGAINST GLOBAL PLAY-BUTTON CSS
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
button.bs-main-play[aria-label],
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-track-card
button.bs-card-play[aria-label]{
border-radius:
50% !important;
background-image:
none !important;
mask:
none !important;
-webkit-mask:
none !important;
}
/* END BENTO APPROVED PLAY CONTROL GLYPH LOCK */
/* OSBEATS 20260910 BENTO LICENSING BUTTON READABILITY */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
a,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
button{
font-size:
13px !important;
font-weight:
700 !important;
line-height:
1.2 !important;
min-height:
34px !important;
padding:
8px 12px !important;
letter-spacing:
0 !important;
white-space:
nowrap !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
a:hover,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
button:hover{
text-decoration:
none !important;
}
/* END OSBEATS BENTO LICENSING BUTTON READABILITY */
/* =========================================================
OSBEATS 20260910
BENTO — FULL WIDTH LICENSING MODULE
========================================================= */
/* Remove artwork from the module itself */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box{
display:
block !important;
grid-template-columns:
1fr !important;
width:
100% !important;
max-width:
none !important;
padding:
18px !important;
background-image:
none !important;
background-position:
initial !important;
background-size:
initial !important;
}
/* Hide the artwork child detected by the controller */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
.bs-license-graphic-removed{
display:
none !important;
}
/* Give the information side the entire module */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> :not(.bs-license-graphic-removed){
width:
100% !important;
max-width:
none !important;
grid-column:
1 / -1 !important;
}
/* Prevent old two-column sizing from clipping text */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
div,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
section{
max-width:
none !important;
}
/* Licensing title */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box h2,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box h3{
max-width:
none !important;
}
/* Licensing description */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box p{
width:
100% !important;
max-width:
230px !important;
line-height:
1.35 !important;
}
/* Full readable action */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box a,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box button{
width:
auto !important;
max-width:
100% !important;
min-height:
36px !important;
padding:
9px 14px !important;
font-size:
13px !important;
font-weight:
700 !important;
line-height:
1.15 !important;
white-space:
nowrap !important;
overflow:
visible !important;
text-overflow:
clip !important;
}
/* =========================================================
BENTO PROTECTED LICENSING MODAL VISIBILITY
Keep shared OSBeats licensing modal above Bento takeover.
========================================================= */
body.storefront-theme-bento-studio
#customThemeFeatureModal:not([hidden]){
display:
flex !important;
position:
fixed !important;
inset:
0 !important;
align-items:
center !important;
justify-content:
center !important;
visibility:
visible !important;
opacity:
1 !important;
pointer-events:
auto !important;
z-index:
2147483000 !important;
}
/* END BENTO FULL WIDTH LICENSING MODULE */
/* =========================================================
OSBEATS 20260910
BENTO — DEDICATED LICENSING FINAL
========================================================= */
/* ---------------------------------------------------------
LICENSING MODULE
Keep all information inside the existing rounded box.
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
box-sizing:
border-box !important;
padding:
16px !important;
overflow:
hidden !important;
background-image:
none !important;
}
/* Information receives the complete available width */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> :not(.bs-license-graphic-removed){
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
box-sizing:
border-box !important;
}
/* Description stays comfortably inside module */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box p{
width:
100% !important;
max-width:
100% !important;
margin-right:
0 !important;
box-sizing:
border-box !important;
}
/* ---------------------------------------------------------
VIEW LICENSING OPTIONS BUTTON
The last version was wider than the module.
Force the entire button inside the module.
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
a,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
button{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
min-height:
32px !important;
margin:
10px 0 0 !important;
padding:
7px 8px !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
white-space:
nowrap !important;
text-overflow:
clip !important;
font-size:
10px !important;
font-weight:
800 !important;
line-height:
1 !important;
letter-spacing:
0 !important;
}
/* =========================================================
DEDICATED BENTO LICENSING POPUP
========================================================= */
body.storefront-theme-bento-studio
.bento-license-modal{
position:
fixed !important;
inset:
0 !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
padding:
22px !important;
z-index:
2147483640 !important;
}
body.storefront-theme-bento-studio
.bento-license-modal[hidden]{
display:
none !important;
}
body.storefront-theme-bento-studio
.bento-license-backdrop{
position:
absolute !important;
inset:
0 !important;
background:
rgba(0,0,0,.78) !important;
backdrop-filter:
blur(3px) !important;
}
body.storefront-theme-bento-studio
.bento-license-dialog{
position:
relative !important;
z-index:
2 !important;
width:
min(720px,100%) !important;
max-height:
82vh !important;
overflow:
auto !important;
padding:
24px !important;
box-sizing:
border-box !important;
border:
1px solid #354047 !important;
border-top:
3px solid #ff5a1f !important;
border-radius:
12px !important;
background:
#0b1115 !important;
color:
#ffffff !important;
box-shadow:
0 20px 60px rgba(0,0,0,.55) !important;
}
body.storefront-theme-bento-studio
.bento-license-close{
position:
absolute !important;
top:
12px !important;
right:
12px !important;
width:
34px !important;
height:
34px !important;
padding:
0 !important;
border:
1px solid #3b454b !important;
border-radius:
50% !important;
background:
#11191e !important;
color:
#ffffff !important;
font-size:
21px !important;
cursor:
pointer !important;
}
body.storefront-theme-bento-studio
.bento-license-kicker{
display:
block !important;
color:
#ff5a1f !important;
font-size:
10px !important;
font-weight:
900 !important;
letter-spacing:
.12em !important;
}
body.storefront-theme-bento-studio
.bento-license-dialog h2{
margin:
5px 45px 4px 0 !important;
color:
#ffffff !important;
font-size:
25px !important;
}
body.storefront-theme-bento-studio
.bento-license-track{
margin:
0 0 18px !important;
color:
#99a4aa !important;
font-size:
12px !important;
}
body.storefront-theme-bento-studio
.bento-license-options{
display:
grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:
12px !important;
}
body.storefront-theme-bento-studio
.bento-license-option{
padding:
16px !important;
border:
1px solid #303a40 !important;
border-radius:
9px !important;
background:
#10171b !important;
}
body.storefront-theme-bento-studio
.bento-license-option-head{
display:
flex !important;
align-items:
center !important;
justify-content:
space-between !important;
gap:
12px !important;
}
body.storefront-theme-bento-studio
.bento-license-option-head strong{
color:
#ffffff !important;
font-size:
13px !important;
}
body.storefront-theme-bento-studio
.bento-license-option-head b{
color:
#ff5a1f !important;
font-size:
15px !important;
}
body.storefront-theme-bento-studio
.bento-license-option p{
min-height:
48px !important;
margin:
10px 0 14px !important;
color:
#aeb8bd !important;
font-size:
10px !important;
line-height:
1.5 !important;
}
body.storefront-theme-bento-studio
.bento-license-option button{
width:
100% !important;
min-height:
36px !important;
padding:
8px 10px !important;
border:
0 !important;
border-radius:
7px !important;
background:
#ff5a1f !important;
color:
#ffffff !important;
font-size:
11px !important;
font-weight:
900 !important;
cursor:
pointer !important;
}
body.storefront-theme-bento-studio
.bento-license-option button:hover{
background:
#ff6829 !important;
}
body.storefront-theme-bento-studio
.bento-license-option.is-unavailable{
opacity:
.65 !important;
}
body.storefront-theme-bento-studio
.bento-license-unavailable,
body.storefront-theme-bento-studio
.bento-license-empty{
display:
block !important;
color:
#8e989d !important;
font-size:
11px !important;
}
@media(max-width:650px){
body.storefront-theme-bento-studio
.bento-license-options{
grid-template-columns:
1fr !important;
}
}
/* END BENTO DEDICATED LICENSING FINAL */
/* OSBEATS 20260910 BENTO LICENSING BLACK-SQUARE FIX
Remove the leftover art/visual container that is still occupying
space on the right side of the Bento licensing module.
Make the licensing copy area span the full module width.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box{
display: block !important;
overflow: hidden !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-panel,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-inner,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-copy{
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
box-sizing: border-box !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box{
grid-template-columns: 1fr !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-art,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-visual,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-image,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-media,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-thumb{
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
overflow: hidden !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box::after,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-panel::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-panel::after,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-inner::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-inner::after,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-copy::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-copy::after{
content: none !important;
display: none !important;
background: transparent !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box .bs-license-button,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box button,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box .bs-license-cta{
width: auto !important;
max-width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
font-size: 12px !important;
line-height: 1.2 !important;
padding: 10px 14px !important;
box-sizing: border-box !important;
}
/* END OSBEATS BENTO LICENSING BLACK-SQUARE FIX */
/* =========================================================
OSBEATS 20260910
BENTO — LICENSING CONTENT / CTA FIT
========================================================= */
/*
The artwork is already removed.
Keep all remaining Licensing information inside the
rounded module and allow its text column to use the
available width.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box.bs-license-content-fit{
box-sizing:
border-box !important;
min-width:
0 !important;
max-width:
100% !important;
padding:
14px !important;
overflow:
hidden !important;
}
/*
Prevent the remaining information wrappers from keeping
the old artwork-column width.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box.bs-license-content-fit
> div,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box.bs-license-content-fit
> section{
min-width:
0 !important;
max-width:
100% !important;
box-sizing:
border-box !important;
}
/* Title must never be clipped */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
h2,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
h3{
width:
auto !important;
max-width:
100% !important;
overflow:
visible !important;
white-space:
normal !important;
text-overflow:
clip !important;
}
/* Description must never be clipped */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
p{
width:
auto !important;
max-width:
100% !important;
overflow:
visible !important;
white-space:
normal !important;
overflow-wrap:
normal !important;
word-break:
normal !important;
}
/* =========================================================
VIEW LICENSING OPTIONS
Direct child of entire module now.
No narrow content-column restriction.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> .bs-license-module-cta{
position:
relative !important;
left:
auto !important;
right:
auto !important;
top:
auto !important;
bottom:
auto !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
min-height:
34px !important;
height:
34px !important;
margin:
11px 0 0 !important;
padding:
7px 8px !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
white-space:
nowrap !important;
text-overflow:
clip !important;
text-indent:
0 !important;
font-size:
11px !important;
font-weight:
800 !important;
line-height:
1 !important;
letter-spacing:
0 !important;
}
/*
Remove inherited pseudo content that could consume
horizontal space inside the CTA.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> .bs-license-module-cta::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> .bs-license-module-cta::after{
content:
none !important;
display:
none !important;
}
/* END BENTO LICENSING CONTENT / CTA FIT */
/* =========================================================
OSBEATS 20260910
BENTO — LICENSING COPY READABILITY
========================================================= */
/* Main licensing statement */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box h2,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box h3{
color:
#ffffff !important;
font-size:
13px !important;
font-weight:
800 !important;
line-height:
1.18 !important;
margin:
5px 0 6px !important;
max-width:
100% !important;
}
/* Supporting description */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box p{
color:
#c9d2d7 !important;
font-size:
11px !important;
font-weight:
500 !important;
line-height:
1.42 !important;
letter-spacing:
0 !important;
width:
100% !important;
max-width:
100% !important;
margin:
0 0 8px !important;
opacity:
1 !important;
overflow:
visible !important;
white-space:
normal !important;
}
/* Keep CTA exactly inside module */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> .bs-license-module-cta{
margin-top:
10px !important;
}
/* END BENTO LICENSING COPY READABILITY */
/* =========================================================
OSBEATS 20260910
BENTO — LICENSING MODULE FINAL CONTENT FIT
Fix:
- remove fixed height that clips CTA
- preserve readable copy
- preserve full-width CTA
- allow module to size naturally to its content
========================================================= */
/* Right-side stack must allow Licensing module to grow */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-right-stack{
grid-template-rows:
auto auto !important;
align-content:
start !important;
overflow:
visible !important;
}
/* Licensing module sizes from its actual content */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box{
height:
auto !important;
min-height:
190px !important;
max-height:
none !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
padding:
14px !important;
box-sizing:
border-box !important;
overflow:
visible !important;
}
/* Remove height limits from any inner Licensing wrapper */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> div,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> section{
height:
auto !important;
min-height:
0 !important;
max-height:
none !important;
overflow:
visible !important;
box-sizing:
border-box !important;
}
/* Licensing heading */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box h2,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box h3{
margin:
4px 0 5px !important;
color:
#ffffff !important;
font-size:
13px !important;
font-weight:
800 !important;
line-height:
1.18 !important;
overflow:
visible !important;
}
/* Licensing description */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box p{
margin:
0 !important;
padding:
0 !important;
color:
#d5dde1 !important;
font-size:
11px !important;
font-weight:
500 !important;
line-height:
1.4 !important;
opacity:
1 !important;
overflow:
visible !important;
white-space:
normal !important;
}
/* Working licensing CTA remains fully visible */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-license-box
> .bs-license-module-cta{
position:
static !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
height:
34px !important;
min-height:
34px !important;
max-height:
34px !important;
margin:
12px 0 0 !important;
padding:
7px 8px !important;
box-sizing:
border-box !important;
overflow:
visible !important;
white-space:
nowrap !important;
color:
#ffffff !important;
font-size:
11px !important;
font-weight:
800 !important;
line-height:
1 !important;
}
/* END BENTO LICENSING MODULE FINAL CONTENT FIT */
/* =========================================================
OSBEATS 20260910
BENTO — BOTTOM HEIGHT ALIGNMENT
Current:
- Licensing module bottom extends below promo row.
- Good Music box + OSBeats banner are approximately
25px too short.
Target:
- Preserve current top edges.
- Increase quote/banner height only.
- Quote and banner share identical top/bottom edges.
- Their bottom edge aligns with Licensing module.
========================================================= */
/* ---------------------------------------------------------
GOOD MUSIC BUILDS A BRIGHTER TOMORROW
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-side-quote{
height:
102px !important;
min-height:
102px !important;
max-height:
102px !important;
margin-top:
0 !important;
margin-bottom:
0 !important;
align-self:
stretch !important;
box-sizing:
border-box !important;
}
/* ---------------------------------------------------------
HIGHER SOUND / OSBEATS BANNER
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner{
height:
102px !important;
min-height:
102px !important;
max-height:
102px !important;
margin-top:
10px !important;
margin-bottom:
0 !important;
align-self:
stretch !important;
box-sizing:
border-box !important;
background-size:
cover !important;
background-position:
center center !important;
}
/* Keep banner contents vertically centered after height increase */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner > *{
align-self:
center !important;
}
/* ---------------------------------------------------------
PRESERVE EXISTING BOTTOM-ROW HORIZONTAL ALIGNMENT
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-side-quote,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner{
overflow:
hidden !important;
border-radius:
var(--bs-module-radius,8px) !important;
}
/* END BENTO BOTTOM HEIGHT ALIGNMENT */
/* OSBEATS 20260910 BENTO APPROVED BANNER ART */
/*
Use the approved Bento Studio promotional artwork
instead of the previous OSBeats red banner.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner{
height:
102px !important;
min-height:
102px !important;
max-height:
102px !important;
background:
#080d10
url('/bento-approved-banner.png')
center center / 100% 100%
no-repeat !important;
background-image:
url('/bento-approved-banner.png') !important;
background-size:
100% 100% !important;
background-position:
center center !important;
background-repeat:
no-repeat !important;
padding:
0 !important;
overflow:
hidden !important;
}
/*
The approved artwork already contains:
- Higher Sound for Bigger Dreams
- creator signature treatment
- Only on OSBeats branding
Hide the old DOM text so it is not duplicated.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner > *{
display:
none !important;
}
/*
Remove old overlays/pseudo artwork.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner::before,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner::after{
content:
none !important;
display:
none !important;
}
/* END OSBEATS BENTO APPROVED BANNER ART */
/* OSBEATS 20260910 BENTO BANNER FILL BOX
Make approved banner fully fill the entire bottom module.
Bento only.
========================================================= */
body.storefront-theme-bento-studio .bs-bottom-banner{
position: relative !important;
overflow: hidden !important;
padding: 0 !important;
min-height: 102px !important;
height: 102px !important;
display: block !important;
background: transparent !important;
}
body.storefront-theme-bento-studio .bs-bottom-banner::before{
content: "" !important;
position: absolute !important;
inset: 0 !important;
background-image: url("/bento-approved-banner.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
border-radius: inherit !important;
z-index: 1 !important;
}
body.storefront-theme-bento-studio .bs-bottom-banner > *{
position: relative !important;
z-index: 2 !important;
}
body.storefront-theme-bento-studio .bs-bottom-banner img,
body.storefront-theme-bento-studio .bs-bottom-banner picture,
body.storefront-theme-bento-studio .bs-bottom-banner svg,
body.storefront-theme-bento-studio .bs-bottom-banner .bs-bottom-banner-art,
body.storefront-theme-bento-studio .bs-bottom-banner .bs-banner-art,
body.storefront-theme-bento-studio .bs-bottom-banner .bs-banner-image,
body.storefront-theme-bento-studio .bs-bottom-banner .bs-promo-banner-art{
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: inherit !important;
}
body.storefront-theme-bento-studio .bs-bottom-banner .bs-bottom-banner-copy,
body.storefront-theme-bento-studio .bs-bottom-banner .bs-bottom-banner-text,
body.storefront-theme-bento-studio .bs-bottom-banner .bs-banner-copy,
body.storefront-theme-bento-studio .bs-bottom-banner .bs-banner-text{
display: none !important;
}
body.storefront-theme-bento-studio .bs-bottom-banner a{
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* END OSBEATS 20260910 BENTO BANNER FILL BOX */
/* =========================================================
OSBEATS 20260910
BENTO — BANNER EDGE-TO-EDGE FILL
Remove the remaining inset around the approved artwork.
Keep the existing 102px module height.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner{
position:
relative !important;
height:
102px !important;
min-height:
102px !important;
max-height:
102px !important;
padding:
0 !important;
overflow:
hidden !important;
background:
none !important;
}
/*
Extend the artwork slightly beyond the module edges.
The outer rounded container clips it cleanly.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner::before{
content:
"" !important;
display:
block !important;
position:
absolute !important;
top:
-8px !important;
right:
-12px !important;
bottom:
-8px !important;
left:
-12px !important;
width:
auto !important;
height:
auto !important;
background-image:
url('/bento-approved-banner.png') !important;
background-repeat:
no-repeat !important;
background-position:
center center !important;
background-size:
cover !important;
border:
0 !important;
border-radius:
0 !important;
margin:
0 !important;
padding:
0 !important;
transform:
none !important;
z-index:
1 !important;
}
/* Approved artwork already contains all banner copy */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner > *{
display:
none !important;
}
/* END BENTO BANNER EDGE-TO-EDGE FILL */
/* =========================================================
OSBEATS 20260910
BENTO — CRISP BANNER RIGHT BRANDING
Keep approved artwork.
Cover only blurry baked-in right branding.
Replace with crisp HTML text.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner
> .bs-banner-crisp-brand{
display:
flex !important;
position:
absolute !important;
right:
10px !important;
top:
50% !important;
transform:
translateY(-50%) !important;
z-index:
5 !important;
width:
118px !important;
min-width:
118px !important;
height:
68px !important;
padding:
8px 10px !important;
box-sizing:
border-box !important;
flex-direction:
column !important;
align-items:
center !important;
justify-content:
center !important;
gap:
2px !important;
border:
0 !important;
background:
linear-gradient(
90deg,
rgba(5,8,10,.12) 0%,
rgba(5,8,10,.88) 28%,
rgba(5,8,10,.98) 100%
) !important;
pointer-events:
none !important;
}
/* ONLY ON */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-only-on{
display:
block !important;
margin:
0 !important;
padding:
0 !important;
color:
#ffffff !important;
font-size:
9px !important;
font-weight:
800 !important;
line-height:
1 !important;
letter-spacing:
.22em !important;
white-space:
nowrap !important;
opacity:
.96 !important;
}
/* OSBEATS */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-osbeats{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
margin:
0 !important;
padding:
0 !important;
font-family:
Arial,
Helvetica,
sans-serif !important;
font-size:
19px !important;
font-weight:
900 !important;
line-height:
1 !important;
letter-spacing:
-.045em !important;
white-space:
nowrap !important;
text-shadow:
0 1px 2px rgba(0,0,0,.55) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-osbeats strong{
color:
#ffffff !important;
font-weight:
900 !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-osbeats b{
color:
#f22f3d !important;
font-weight:
900 !important;
}
/*
Previous Bento banner passes hide direct children.
Explicitly keep only this crisp branding overlay visible.
*/
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner
> .bs-banner-crisp-brand,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner
> .bs-banner-crisp-brand
*{
visibility:
visible !important;
}
/* END BENTO CRISP BANNER RIGHT BRANDING */
/* =========================================================
OSBEATS 20260910
BENTO — BANNER BRAND DEDUPE
Problem:
Old blurry branding is baked into banner PNG underneath
the new crisp HTML branding.
Fix:
Fully mask the old raster branding before rendering the
crisp ONLY ON / OSBEATS text.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner
> .bs-banner-crisp-brand{
right:
6px !important;
width:
136px !important;
min-width:
136px !important;
height:
88px !important;
min-height:
88px !important;
padding:
10px 12px !important;
overflow:
visible !important;
background:
linear-gradient(
90deg,
rgba(5,8,10,.92) 0%,
rgba(5,8,10,.99) 24%,
#05080a 48%,
#05080a 100%
) !important;
box-shadow:
-10px 0 14px rgba(5,8,10,.75) !important;
}
/* Keep crisp text above the opaque mask */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-crisp-brand
.bs-banner-only-on,
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-crisp-brand
.bs-banner-osbeats{
position:
relative !important;
z-index:
3 !important;
opacity:
1 !important;
}
/* END BENTO BANNER BRAND DEDUPE */
/* OSBEATS 20260910 BENTO BANNER ONLY OS ALIGN
Align "ONLY ON" with the left edge of "OSBEATS".
Bento only.
========================================================= */
body.storefront-theme-bento-studio .bs-banner-crisp-brand{
position: absolute !important;
right: 22px !important;
top: 20px !important;
width: 118px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
line-height: 1 !important;
z-index: 6 !important;
}
body.storefront-theme-bento-studio .bs-banner-crisp-brand > *{
width: 100% !important;
text-align: left !important;
margin: 0 !important;
}
body.storefront-theme-bento-studio .bs-banner-crisp-brand > *:first-child{
display: block !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .18em !important;
line-height: 1 !important;
margin: 0 0 5px 2px !important;
}
body.storefront-theme-bento-studio .bs-banner-crisp-brand > *:last-child{
display: block !important;
font-size: 18px !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
line-height: .95 !important;
margin: 0 !important;
}
body.storefront-theme-bento-studio .bs-banner-crisp-brand::before,
body.storefront-theme-bento-studio .bs-banner-crisp-brand::after{
display: none !important;
content: none !important;
}
/* END OSBEATS 20260910 BENTO BANNER ONLY OS ALIGN */
/* =========================================================
OSBEATS 20260910
BENTO — ONLY ON FINAL ALIGNMENT
Current:
ONLY ON begins left of OSBEATS.
Fix:
Keep OSBEATS exactly where it is.
Move ONLY ON right so its first O aligns with
the first O in OSBEATS.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-crisp-brand
.bs-banner-only-on{
width:
auto !important;
align-self:
flex-start !important;
margin:
0 0 5px 12px !important;
padding:
0 !important;
transform:
none !important;
text-align:
left !important;
}
/* Do not move OSBEATS */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-crisp-brand
.bs-banner-osbeats{
margin-left:
0 !important;
transform:
none !important;
text-align:
left !important;
}
/* END BENTO ONLY ON FINAL ALIGNMENT */
/* =========================================================
OSBEATS 20260910
BENTO — MATCHING WORDMARKS
Required:
OS = white
BEATS = red
Both top-left and bottom-right use the exact same
typeface / weight / spacing.
========================================================= */
/* ---------------------------------------------------------
REMOVE OLD GENERATED TOP-LEFT TEXT
This is the source of the incorrect white B.
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-side-nav::before{
content:
none !important;
display:
none !important;
}
/* ---------------------------------------------------------
SHARED OSBEATS WORDMARK TYPOGRAPHY
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-shared-wordmark{
font-family:
Arial Black,
Arial,
Helvetica,
sans-serif !important;
font-style:
normal !important;
font-weight:
900 !important;
line-height:
1 !important;
letter-spacing:
-.045em !important;
white-space:
nowrap !important;
text-transform:
uppercase !important;
}
/* OS = WHITE */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-shared-wordmark
.bs-wordmark-os{
color:
#ffffff !important;
font-family:
inherit !important;
font-size:
inherit !important;
font-style:
inherit !important;
font-weight:
inherit !important;
letter-spacing:
inherit !important;
}
/* BEATS INCLUDING THE B = RED */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-shared-wordmark
.bs-wordmark-beats{
color:
#ef3340 !important;
font-family:
inherit !important;
font-size:
inherit !important;
font-style:
inherit !important;
font-weight:
inherit !important;
letter-spacing:
inherit !important;
}
/* ---------------------------------------------------------
TOP-LEFT WORDMARK
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-nav-wordmark{
display:
block !important;
width:
auto !important;
margin:
8px 8px 20px !important;
padding:
0 !important;
font-size:
17px !important;
text-align:
left !important;
}
/* ---------------------------------------------------------
BOTTOM-RIGHT WORDMARK
Same typography as top-left.
Only size differs for approved banner hierarchy.
--------------------------------------------------------- */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-osbeats{
display:
inline-flex !important;
align-items:
center !important;
justify-content:
flex-start !important;
width:
auto !important;
margin:
0 !important;
padding:
0 !important;
font-family:
Arial Black,
Arial,
Helvetica,
sans-serif !important;
font-size:
18px !important;
font-style:
normal !important;
font-weight:
900 !important;
line-height:
1 !important;
letter-spacing:
-.045em !important;
white-space:
nowrap !important;
text-align:
left !important;
text-shadow:
none !important;
}
/* Override all previous strong/b banner color rules */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-osbeats
.bs-wordmark-os{
color:
#ffffff !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-banner-osbeats
.bs-wordmark-beats{
color:
#ef3340 !important;
}
/* END BENTO MATCHING WORDMARKS */
/* =========================================================
OSBEATS 20260910
BENTO — GOOD MUSIC WORDMARK COLOR
OS = WHITE
BEATS = RED
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-side-quote
.bs-quote-wordmark{
display:
inline-flex !important;
align-items:
center !important;
font-family:
Arial Black,
Arial,
Helvetica,
sans-serif !important;
font-size:
11px !important;
font-style:
normal !important;
font-weight:
900 !important;
line-height:
1 !important;
letter-spacing:
-.045em !important;
white-space:
nowrap !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-side-quote
.bs-quote-wordmark
.bs-wordmark-os{
color:
#ffffff !important;
font-family:
inherit !important;
font-size:
inherit !important;
font-weight:
inherit !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-side-quote
.bs-quote-wordmark
.bs-wordmark-beats{
color:
#ef3340 !important;
font-family:
inherit !important;
font-size:
inherit !important;
font-weight:
inherit !important;
}
/* END BENTO GOOD MUSIC WORDMARK COLOR */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — ELITE HERO SLIDER
Full-width visual feature directly beneath the Bento
top bar and above the existing modular storefront.
Existing Bento modules remain unchanged.
========================================================= */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-hero{
width:
100% !important;
min-width:
0 !important;
margin:
10px 0 !important;
padding:
0 10px !important;
box-sizing:
border-box !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-viewport{
position:
relative !important;
width:
100% !important;
height:
320px !important;
min-height:
320px !important;
overflow:
hidden !important;
border:
1px solid #303b41 !important;
border-radius:
10px !important;
background:
#080d10 !important;
box-shadow:
0 14px 34px rgba(0,0,0,.22) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slides{
position:
absolute !important;
inset:
0 !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide{
position:
absolute !important;
inset:
0 !important;
display:
block !important;
opacity:
0 !important;
visibility:
hidden !important;
transition:
opacity .55s ease,
visibility .55s ease !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide.is-active{
opacity:
1 !important;
visibility:
visible !important;
z-index:
2 !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-image{
position:
absolute !important;
inset:
0 !important;
width:
100% !important;
height:
100% !important;
object-fit:
cover !important;
object-position:
center center !important;
transform:
scale(1.015) !important;
}
/* Deep premium readability treatment */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-shade{
position:
absolute !important;
inset:
0 !important;
background:
linear-gradient(
90deg,
rgba(4,7,9,.96) 0%,
rgba(4,7,9,.85) 30%,
rgba(4,7,9,.42) 61%,
rgba(4,7,9,.17) 100%
) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-shade::after{
content:
"" !important;
position:
absolute !important;
inset:
0 !important;
background:
linear-gradient(
0deg,
rgba(0,0,0,.44) 0%,
transparent 48%
) !important;
}
/* Main hero content */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-content{
position:
absolute !important;
left:
54px !important;
top:
50% !important;
transform:
translateY(-50%) !important;
z-index:
5 !important;
width:
min(520px,48%) !important;
color:
#ffffff !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-kicker{
display:
inline-block !important;
margin:
0 0 10px !important;
color:
#ff5a1f !important;
font-size:
10px !important;
font-weight:
900 !important;
line-height:
1 !important;
letter-spacing:
.18em !important;
text-transform:
uppercase !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-content h2{
margin:
0 0 10px !important;
max-width:
100% !important;
color:
#ffffff !important;
font-size:
clamp(
30px,
3.3vw,
50px
) !important;
font-weight:
900 !important;
line-height:
.98 !important;
letter-spacing:
-.035em !important;
text-shadow:
0 4px 18px rgba(0,0,0,.45) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-content p{
margin:
0 0 20px !important;
max-width:
460px !important;
color:
#d6dde0 !important;
font-size:
13px !important;
font-weight:
500 !important;
line-height:
1.45 !important;
display:
-webkit-box !important;
-webkit-line-clamp:
3 !important;
-webkit-box-orient:
vertical !important;
overflow:
hidden !important;
}
/* Elite CTA */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-cta{
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
8px !important;
width:
auto !important;
min-width:
130px !important;
height:
40px !important;
margin:
0 !important;
padding:
0 18px !important;
border:
0 !important;
border-radius:
7px !important;
background:
#ff5a1f !important;
color:
#ffffff !important;
font-size:
11px !important;
font-weight:
900 !important;
line-height:
1 !important;
cursor:
pointer !important;
box-shadow:
0 7px 22px rgba(255,90,31,.23) !important;
transition:
transform .18s ease,
background .18s ease,
box-shadow .18s ease !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-cta:hover{
transform:
translateY(-1px) !important;
background:
#ff6b32 !important;
box-shadow:
0 10px 28px rgba(255,90,31,.30) !important;
}
/* Previous / next controls */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-arrow{
position:
absolute !important;
top:
50% !important;
z-index:
8 !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
width:
38px !important;
height:
38px !important;
padding:
0 !important;
transform:
translateY(-50%) !important;
border:
1px solid rgba(255,255,255,.34) !important;
border-radius:
50% !important;
background:
rgba(6,10,12,.66) !important;
color:
#ffffff !important;
font-size:
28px !important;
font-weight:
300 !important;
line-height:
1 !important;
cursor:
pointer !important;
backdrop-filter:
blur(7px) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-prev{
left:
15px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-next{
right:
15px !important;
}
/* Pagination */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-dots{
position:
absolute !important;
left:
50% !important;
bottom:
15px !important;
z-index:
8 !important;
display:
flex !important;
gap:
7px !important;
transform:
translateX(-50%) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-dot{
display:
block !important;
width:
7px !important;
height:
7px !important;
min-width:
7px !important;
min-height:
7px !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
border-radius:
50% !important;
background:
rgba(255,255,255,.42) !important;
cursor:
pointer !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-dot.is-active{
width:
22px !important;
border-radius:
999px !important;
background:
#ff5a1f !important;
}
/* Small Elite identity */
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-badge{
position:
absolute !important;
right:
18px !important;
top:
16px !important;
z-index:
8 !important;
padding:
6px 9px !important;
border:
1px solid rgba(255,255,255,.22) !important;
border-radius:
999px !important;
background:
rgba(5,8,10,.56) !important;
color:
#ffffff !important;
font-size:
8px !important;
font-weight:
800 !important;
line-height:
1 !important;
letter-spacing:
.13em !important;
backdrop-filter:
blur(6px) !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:900px){
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-viewport{
height:
275px !important;
min-height:
275px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-content{
left:
42px !important;
width:
min(540px,70%) !important;
}
}
@media(max-width:620px){
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-hero{
margin:
8px 0 !important;
padding:
0 8px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-viewport{
height:
245px !important;
min-height:
245px !important;
border-radius:
8px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-shade{
background:
linear-gradient(
90deg,
rgba(4,7,9,.96) 0%,
rgba(4,7,9,.78) 70%,
rgba(4,7,9,.46) 100%
) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-content{
left:
30px !important;
width:
calc(100% - 62px) !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-content h2{
font-size:
29px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-slide-content p{
max-width:
86% !important;
font-size:
11px !important;
-webkit-line-clamp:
2 !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-arrow{
width:
30px !important;
height:
30px !important;
font-size:
21px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-prev{
left:
7px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-next{
right:
7px !important;
}
html
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-elite-badge{
top:
10px !important;
right:
10px !important;
}
}
/* END BENTO ELITE HERO SLIDER */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — NATIVE FULL CATALOG
========================================================= */
body.bs-full-catalog-open{
overflow:
hidden !important;
}
.bs-full-catalog-overlay{
--bs-catalog-accent:
var(
--bs-accent,
#ff5a1f
);
position:
fixed;
inset:
0;
z-index:
12050;
display:
flex;
align-items:
center;
justify-content:
center;
padding:
20px;
}
.bs-full-catalog-overlay[hidden]{
display:
none !important;
}
.bs-full-catalog-backdrop{
position:
absolute;
inset:
0;
background:
rgba(0,0,0,.82);
backdrop-filter:
blur(8px);
-webkit-backdrop-filter:
blur(8px);
}
.bs-full-catalog-dialog{
position:
relative;
z-index:
2;
width:
min(
1180px,
calc(100vw - 40px)
);
height:
min(
820px,
calc(100vh - 40px)
);
display:
flex;
flex-direction:
column;
overflow:
hidden;
border:
1px solid #343f45;
border-top:
2px solid
var(--bs-catalog-accent);
border-radius:
12px;
background:
#090f12;
color:
#fff;
box-shadow:
0 30px 80px
rgba(0,0,0,.65);
}
.bs-full-catalog-head{
flex:
0 0 auto;
min-height:
76px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
18px;
padding:
14px 18px;
border-bottom:
1px solid #293238;
background:
#0b1216;
}
.bs-full-catalog-head > div:first-child > span{
display:
block;
margin-bottom:
3px;
color:
var(--bs-catalog-accent);
font-size:
9px;
font-weight:
900;
letter-spacing:
.16em;
}
.bs-full-catalog-head h2{
margin:
0;
color:
#fff;
font-size:
22px;
line-height:
1;
}
.bs-full-catalog-head-right{
display:
flex;
align-items:
center;
gap:
14px;
}
.bs-full-catalog-head-right > strong{
color:
#aeb8bd;
font-size:
10px;
letter-spacing:
.08em;
}
.bs-full-catalog-close{
width:
36px;
height:
36px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
border:
1px solid #3a454b;
border-radius:
50%;
background:
#11191d;
color:
#fff;
font-size:
22px;
cursor:
pointer;
}
.bs-full-catalog-close:hover{
border-color:
var(--bs-catalog-accent);
color:
var(--bs-catalog-accent);
}
/* ---------------------------------------------------------
PLAYER
--------------------------------------------------------- */
.bs-catalog-player{
flex:
0 0 auto;
display:
grid;
grid-template-columns:
132px
minmax(0,1fr)
300px;
gap:
16px;
padding:
16px 18px;
border-bottom:
1px solid #293238;
background:
linear-gradient(
145deg,
#0d1519,
#090f12
);
}
.bs-catalog-player-art{
width:
132px;
height:
132px;
border:
1px solid #384249;
border-radius:
9px;
background:
#11181c
center / cover
no-repeat;
}
.bs-catalog-player-center{
min-width:
0;
}
.bs-catalog-now-playing > span{
display:
block;
margin-bottom:
3px;
color:
var(--bs-catalog-accent);
font-size:
9px;
font-weight:
900;
letter-spacing:
.13em;
}
.bs-catalog-now-playing h3{
margin:
0;
overflow:
hidden;
color:
#fff;
font-size:
21px;
line-height:
1.15;
white-space:
nowrap;
text-overflow:
ellipsis;
}
.bs-catalog-now-playing small{
display:
block;
margin-top:
4px;
color:
#8f9aa0;
}
/* exact Bento waveform container */
.bs-catalog-wave{
position:
relative;
width:
100%;
height:
46px;
margin:
13px 0 9px;
padding:
0;
overflow:
hidden;
border:
0;
background:
transparent;
cursor:
pointer;
}
.bs-catalog-wave-base,
.bs-catalog-wave-progress{
position:
absolute;
inset:
0;
display:
block;
overflow:
hidden;
pointer-events:
none;
}
.bs-catalog-wave-progress{
width:
0%;
right:
auto;
}
.bs-catalog-wave svg{
width:
100% !important;
height:
100% !important;
display:
block;
}
.bs-catalog-wave-base svg path{
fill:
#5d666b !important;
stroke:
#5d666b !important;
}
.bs-catalog-wave-progress svg path{
fill:
var(--bs-catalog-accent) !important;
stroke:
var(--bs-catalog-accent) !important;
}
.bs-catalog-wave-bars{
width:
100%;
height:
100%;
display:
flex;
align-items:
center;
gap:
2px;
}
.bs-catalog-wave-bars i{
flex:
1;
display:
block;
min-width:
1px;
background:
currentColor;
}
.bs-catalog-wave-base
.bs-catalog-wave-bars{
color:
#5d666b;
}
.bs-catalog-wave-progress
.bs-catalog-wave-bars{
color:
var(--bs-catalog-accent);
}
.bs-catalog-controls{
display:
flex;
align-items:
center;
gap:
8px;
min-width:
0;
}
.bs-catalog-controls > button{
width:
32px;
height:
32px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
flex:
0 0 auto;
border:
1px solid #364147;
border-radius:
50%;
background:
#10171b;
color:
#fff;
font-size:
10px;
cursor:
pointer;
}
.bs-catalog-controls
.bs-catalog-main-play{
width:
44px;
height:
44px;
border:
0;
background:
var(--bs-catalog-accent);
font-size:
15px;
box-shadow:
0 5px 18px
rgba(255,90,31,.20);
}
.bs-catalog-controls > span{
color:
#9ea8ad;
font-size:
10px;
}
.bs-catalog-volume{
margin-left:
auto;
min-width:
120px;
display:
flex;
align-items:
center;
gap:
7px;
}
.bs-catalog-volume input{
width:
100%;
accent-color:
var(--bs-catalog-accent);
}
/* ---------------------------------------------------------
LICENSING
--------------------------------------------------------- */
.bs-catalog-license-panel{
min-width:
0;
padding-left:
15px;
border-left:
1px solid #2c353a;
}
.bs-catalog-license-label{
display:
block;
margin-bottom:
9px;
color:
var(--bs-catalog-accent);
font-size:
9px;
font-weight:
900;
letter-spacing:
.14em;
}
.bs-catalog-license-grid{
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
gap:
7px;
}
.bs-catalog-license-option{
min-height:
54px;
padding:
8px;
display:
flex;
flex-direction:
column;
align-items:
flex-start;
justify-content:
center;
border:
1px solid #364147;
border-radius:
7px;
background:
#11191d;
color:
#fff;
cursor:
pointer;
}
.bs-catalog-license-option:hover{
border-color:
var(--bs-catalog-accent);
}
.bs-catalog-license-option span{
color:
#9ba6ab;
font-size:
8px;
font-weight:
800;
text-transform:
uppercase;
}
.bs-catalog-license-option strong{
margin-top:
2px;
color:
#fff;
font-size:
13px;
}
.bs-catalog-license-option small{
margin-top:
2px;
color:
var(--bs-catalog-accent);
font-size:
7px;
font-weight:
800;
}
.bs-catalog-license-empty{
grid-column:
1 / -1;
padding:
14px;
border:
1px dashed #354047;
border-radius:
7px;
color:
#8d989e;
font-size:
10px;
}
/* ---------------------------------------------------------
CATALOG BROWSER
--------------------------------------------------------- */
.bs-catalog-browser{
min-height:
0;
flex:
1 1 auto;
display:
flex;
flex-direction:
column;
}
.bs-catalog-toolbar{
flex:
0 0 auto;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
16px;
padding:
12px 18px;
border-bottom:
1px solid #222b30;
}
.bs-catalog-toolbar > div > span{
display:
block;
color:
var(--bs-catalog-accent);
font-size:
8px;
font-weight:
900;
letter-spacing:
.13em;
}
.bs-catalog-toolbar > div > strong{
color:
#fff;
font-size:
13px;
}
.bs-catalog-search{
width:
min(
310px,
42%
);
min-height:
38px;
display:
flex;
align-items:
center;
gap:
8px;
padding:
0 10px;
border:
1px solid #354047;
border-radius:
7px;
background:
#11191d;
}
.bs-catalog-search > span{
color:
var(--bs-catalog-accent);
}
.bs-catalog-search input{
width:
100%;
min-width:
0;
border:
0;
outline:
0;
background:
transparent;
color:
#fff;
}
.bs-catalog-track-list{
min-height:
0;
flex:
1 1 auto;
overflow-y:
auto;
overscroll-behavior:
contain;
padding:
6px 18px 16px;
scrollbar-width:
thin;
scrollbar-color:
#49535a
#0a1013;
}
.bs-catalog-track-row{
min-height:
62px;
display:
grid;
grid-template-columns:
30px
36px
46px
minmax(0,1fr)
54px
85px
82px;
align-items:
center;
gap:
10px;
padding:
7px 9px;
border-bottom:
1px solid #20292e;
border-left:
2px solid
transparent;
background:
transparent;
}
.bs-catalog-track-row:hover{
background:
#0f171b;
}
.bs-catalog-track-row.is-selected{
border-left-color:
var(--bs-catalog-accent);
background:
#10191d;
}
.bs-catalog-track-number{
color:
#657178;
font-size:
9px;
font-weight:
800;
text-align:
center;
}
.bs-catalog-row-play{
width:
32px;
height:
32px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
border:
1px solid
var(--bs-catalog-accent);
border-radius:
50%;
background:
#0a1013;
color:
#fff;
font-size:
10px;
cursor:
pointer;
}
.bs-catalog-track-row.is-playing
.bs-catalog-row-play{
background:
var(--bs-catalog-accent);
}
.bs-catalog-row-art{
width:
44px;
height:
44px;
border:
1px solid #303a40;
border-radius:
5px;
background:
#11191d
center / cover
no-repeat;
}
.bs-catalog-row-copy{
min-width:
0;
display:
flex;
flex-direction:
column;
align-items:
flex-start;
gap:
2px;
padding:
0;
border:
0;
background:
transparent;
color:
#fff;
text-align:
left;
cursor:
pointer;
}
.bs-catalog-row-copy strong{
width:
100%;
overflow:
hidden;
color:
#fff;
font-size:
11px;
white-space:
nowrap;
text-overflow:
ellipsis;
}
.bs-catalog-row-copy span{
color:
#77838a;
font-size:
8px;
}
.bs-catalog-row-duration{
color:
#89949a;
font-size:
9px;
text-align:
center;
}
.bs-catalog-row-price{
color:
#fff;
font-size:
10px;
text-align:
right;
}
.bs-catalog-row-license{
min-height:
30px;
padding:
0 9px;
border:
1px solid #374248;
border-radius:
6px;
background:
#11191d;
color:
#fff;
font-size:
8px;
font-weight:
800;
cursor:
pointer;
}
.bs-catalog-row-license:hover{
border-color:
var(--bs-catalog-accent);
color:
var(--bs-catalog-accent);
}
.bs-catalog-no-results{
margin:
30px 0;
padding:
20px;
color:
#879299;
text-align:
center;
}
/* END BENTO NATIVE FULL CATALOG */
/* =========================================================
OSBEATS 20260910
BENTO FULL CATALOG — READABILITY + LICENSING
========================================================= */
/* Ensure Bento's dedicated licensing modal appears above
the Full Catalog overlay. */
#bentoLicenseModal,
.bento-license-modal{
z-index:
12350 !important;
}
/* ---------------------------------------------------------
HEADER
--------------------------------------------------------- */
.bs-full-catalog-head > div:first-child > span{
font-size:
11px !important;
}
.bs-full-catalog-head h2{
font-size:
25px !important;
}
.bs-full-catalog-head-right > strong{
font-size:
11px !important;
}
/* ---------------------------------------------------------
PLAYER
--------------------------------------------------------- */
.bs-catalog-now-playing > span{
font-size:
10px !important;
}
.bs-catalog-now-playing h3{
font-size:
24px !important;
}
.bs-catalog-now-playing small{
font-size:
12px !important;
}
.bs-catalog-controls > span{
font-size:
11px !important;
}
/* ---------------------------------------------------------
TOP LICENSING PANEL
--------------------------------------------------------- */
.bs-catalog-license-label{
font-size:
11px !important;
}
.bs-catalog-license-option span{
font-size:
9px !important;
}
.bs-catalog-license-option strong{
font-size:
15px !important;
}
.bs-catalog-license-option small{
font-size:
9px !important;
}
.bs-catalog-license-empty{
font-size:
11px !important;
}
/* Visible feedback fallback */
@keyframes bsCatalogLicenseFocus{
0%{
border-color:
#ff5a1f;
box-shadow:
0 0 0 0
rgba(255,90,31,.32);
}
45%{
border-color:
#ff5a1f;
box-shadow:
0 0 0 6px
rgba(255,90,31,.10);
}
100%{
box-shadow:
0 0 0 0
rgba(255,90,31,0);
}
}
.bs-catalog-license-panel.bs-catalog-license-focus{
animation:
bsCatalogLicenseFocus
1.25s
ease-out
1;
}
/* ---------------------------------------------------------
TOOLBAR / SEARCH
--------------------------------------------------------- */
.bs-catalog-toolbar > div > span{
font-size:
10px !important;
}
.bs-catalog-toolbar > div > strong{
font-size:
15px !important;
}
.bs-catalog-search{
min-height:
42px !important;
}
.bs-catalog-search input{
font-size:
12px !important;
}
/* ---------------------------------------------------------
TRACK ROWS
--------------------------------------------------------- */
.bs-catalog-track-row{
min-height:
70px !important;
padding-top:
9px !important;
padding-bottom:
9px !important;
}
.bs-catalog-track-number{
font-size:
10px !important;
}
.bs-catalog-row-play{
width:
35px !important;
height:
35px !important;
font-size:
11px !important;
}
.bs-catalog-row-art{
width:
48px !important;
height:
48px !important;
}
.bs-catalog-row-copy strong{
font-size:
13px !important;
line-height:
1.25 !important;
}
.bs-catalog-row-copy span{
margin-top:
2px !important;
font-size:
10px !important;
}
.bs-catalog-row-duration{
font-size:
10px !important;
}
.bs-catalog-row-price{
font-size:
11px !important;
white-space:
nowrap !important;
}
/* ---------------------------------------------------------
VIEW LICENSING BUTTON
--------------------------------------------------------- */
.bs-catalog-row-license{
min-width:
98px !important;
min-height:
36px !important;
padding:
0 11px !important;
border-color:
#465157 !important;
font-size:
10px !important;
font-weight:
900 !important;
line-height:
1.1 !important;
white-space:
nowrap !important;
}
.bs-catalog-row-license:hover{
border-color:
var(--bs-catalog-accent) !important;
background:
rgba(255,90,31,.08) !important;
color:
#fff !important;
}
/* ---------------------------------------------------------
MOBILE READABILITY
--------------------------------------------------------- */
@media(max-width:700px){
.bs-full-catalog-head
> div:first-child
> span{
font-size:
9px !important;
}
.bs-full-catalog-head h2{
font-size:
19px !important;
}
.bs-catalog-now-playing > span{
font-size:
9px !important;
}
.bs-catalog-now-playing h3{
font-size:
17px !important;
}
.bs-catalog-now-playing small{
font-size:
10px !important;
}
.bs-catalog-toolbar
> div
> strong{
font-size:
14px !important;
}
.bs-catalog-row-copy strong{
font-size:
12px !important;
}
.bs-catalog-row-copy span{
font-size:
9px !important;
}
.bs-catalog-row-price{
font-size:
10px !important;
}
.bs-catalog-row-license{
min-width:
88px !important;
min-height:
36px !important;
font-size:
9px !important;
padding:
0 8px !important;
}
}
/* END BENTO FULL CATALOG READABILITY + LICENSING */
/* =========================================================
OSBEATS 20260910
BENTO CATALOG — LICENSING BUTTON WIDTH FINAL
========================================================= */
/*
Desktop row redistribution.
The previous final grid column was too narrow for
"View Licensing" even though the title area had
significant unused horizontal room.
Give the button a proper dedicated column instead
of squeezing the label.
*/
@media(min-width:701px){
.bs-catalog-track-row{
grid-template-columns:
28px
38px
48px
minmax(220px,1fr)
50px
88px
122px !important;
gap:
8px !important;
}
.bs-catalog-row-duration{
width:
auto !important;
text-align:
center !important;
}
.bs-catalog-row-price{
width:
auto !important;
text-align:
right !important;
white-space:
nowrap !important;
}
.bs-catalog-row-license{
width:
122px !important;
min-width:
122px !important;
max-width:
122px !important;
min-height:
38px !important;
padding:
0 10px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
justify-self:
stretch !important;
box-sizing:
border-box !important;
text-align:
center !important;
white-space:
nowrap !important;
overflow:
visible !important;
font-size:
11px !important;
font-weight:
900 !important;
line-height:
1 !important;
}
}
/*
Tablet range:
keep the wording readable without allowing the
button to crush the title area.
*/
@media(min-width:701px) and (max-width:980px){
.bs-catalog-track-row{
grid-template-columns:
24px
36px
44px
minmax(160px,1fr)
46px
78px
112px !important;
gap:
7px !important;
}
.bs-catalog-row-license{
width:
112px !important;
min-width:
112px !important;
max-width:
112px !important;
font-size:
10px !important;
}
}
/*
Mobile keeps the compact layout but makes sure
the control remains centered and legible.
*/
@media(max-width:700px){
.bs-catalog-row-license{
min-width:
92px !important;
width:
92px !important;
min-height:
38px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
padding:
0 7px !important;
box-sizing:
border-box !important;
text-align:
center !important;
white-space:
nowrap !important;
font-size:
9px !important;
font-weight:
900 !important;
line-height:
1 !important;
}
}
/* END BENTO CATALOG LICENSING BUTTON WIDTH FINAL */
/* =========================================================
OSBEATS 20260910
STOREFRONT CART — TRUE VIEWPORT FIX
========================================================= */
/*
CART BACKDROP
Must cover the entire browser window and sit above
the Bento Full Catalog / licensing layers.
*/
#storeCartOverlay.store-cart-overlay,
.store-cart-overlay{
position:
fixed !important;
inset:
0 !important;
top:
0 !important;
right:
0 !important;
bottom:
0 !important;
left:
0 !important;
width:
auto !important;
max-width:
none !important;
height:
auto !important;
margin:
0 !important;
padding:
0 !important;
transform:
none !important;
z-index:
15040 !important;
box-sizing:
border-box !important;
}
/*
CART DRAWER — DESKTOP / TABLET
Explicit viewport positioning prevents custom storefront
theme geometry from pushing the drawer beyond the screen.
*/
#storeCartDrawer.store-cart-drawer,
.store-cart-drawer{
position:
fixed !important;
top:
0 !important;
right:
0 !important;
bottom:
0 !important;
left:
auto !important;
width:
min(
420px,
calc(100vw - 16px)
) !important;
min-width:
0 !important;
max-width:
100vw !important;
height:
auto !important;
max-height:
100vh !important;
margin:
0 !important;
padding:
0 !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
transform:
translate3d(
105%,
0,
0
) !important;
z-index:
15050 !important;
isolation:
isolate !important;
}
/*
OPEN STATE
Force exactly zero horizontal offset.
*/
#storeCartDrawer.store-cart-drawer.open,
.store-cart-drawer.open{
right:
0 !important;
transform:
translate3d(
0,
0,
0
) !important;
}
/*
Prevent anything inside the drawer from increasing
the drawer's calculated width.
*/
.store-cart-drawer *,
.store-cart-drawer *::before,
.store-cart-drawer *::after{
box-sizing:
border-box !important;
}
.store-cart-head,
.store-cart-summary,
.store-cart-seller-notice,
.store-cart-items,
.store-cart-checkout{
max-width:
100% !important;
min-width:
0 !important;
box-sizing:
border-box !important;
}
.store-cart-head{
width:
100% !important;
}
.store-cart-head > div{
min-width:
0 !important;
}
.store-cart-summary{
width:
100% !important;
}
.store-cart-items{
width:
100% !important;
overflow-x:
hidden !important;
overflow-y:
auto !important;
}
.store-cart-checkout{
width:
100% !important;
}
/*
Cart item rows cannot force horizontal overflow.
*/
.store-cart-item{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
grid-template-columns:
76px
minmax(0,1fr)
30px !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
}
.store-cart-copy{
min-width:
0 !important;
max-width:
100% !important;
overflow:
hidden !important;
}
.store-cart-copy strong{
max-width:
100% !important;
overflow:
hidden !important;
white-space:
nowrap !important;
text-overflow:
ellipsis !important;
}
/* =========================================================
PHONE — CART BECOMES FULL VIEWPORT
========================================================= */
@media(max-width:520px){
#storeCartDrawer.store-cart-drawer,
.store-cart-drawer{
top:
0 !important;
right:
0 !important;
bottom:
0 !important;
left:
0 !important;
width:
auto !important;
min-width:
0 !important;
max-width:
none !important;
height:
auto !important;
max-height:
none !important;
margin:
0 !important;
border-left:
0 !important;
box-shadow:
none !important;
}
#storeCartDrawer.store-cart-drawer.open,
.store-cart-drawer.open{
left:
0 !important;
right:
0 !important;
transform:
translate3d(
0,
0,
0
) !important;
}
.store-cart-head{
padding:
16px !important;
}
.store-cart-head h2{
font-size:
22px !important;
}
.store-cart-summary > div{
padding:
12px 15px !important;
}
.store-cart-items{
padding:
12px !important;
}
.store-cart-item{
grid-template-columns:
68px
minmax(0,1fr)
30px !important;
gap:
10px !important;
padding:
10px !important;
}
.store-cart-art{
width:
68px !important;
height:
68px !important;
}
.store-cart-checkout{
padding:
12px !important;
}
.store-cart-checkout > button{
width:
100% !important;
max-width:
100% !important;
}
}
/* END STOREFRONT CART TRUE VIEWPORT FIX */
/* =========================================================
OSBEATS 20260910
BENTO STUDIO — FINAL MOBILE REBUILD
========================================================= */
@media(max-width:700px){
html,
body{
overflow-x:
hidden !important;
}
body.bs-bento-mobile-active{
background:
#05090c !important;
}
#bentoStudioThemeStage{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
margin:
0 !important;
padding:
0 8px 82px !important;
overflow:
visible !important;
box-sizing:
border-box !important;
}
#bentoStudioThemeStage,
#bentoStudioThemeStage *{
box-sizing:
border-box;
}
/* =======================================================
TOP BAR
======================================================= */
#bentoStudioThemeStage
.bs-topbar{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
display:
flex !important;
flex-wrap:
wrap !important;
align-items:
center !important;
gap:
7px !important;
padding:
9px !important;
overflow:
visible !important;
}
#bentoStudioThemeStage
.bs-topbar-search,
#bentoStudioThemeStage
.bs-search,
#bentoStudioThemeStage
.bs-search-wrap{
flex:
1 1 100% !important;
width:
100% !important;
max-width:
100% !important;
}
#bentoStudioThemeStage
.bs-topbar
input[type="search"]{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
min-height:
38px !important;
font-size:
12px !important;
}
#bentoStudioThemeStage
.bs-topbar a,
#bentoStudioThemeStage
.bs-topbar button{
flex:
0 0 auto !important;
white-space:
nowrap !important;
}
/* =======================================================
HERO
======================================================= */
#bentoStudioThemeStage
.bs-elite-hero{
width:
100% !important;
margin:
8px 0 10px !important;
padding:
0 !important;
}
#bentoStudioThemeStage
.bs-elite-viewport{
width:
100% !important;
height:
250px !important;
min-height:
250px !important;
border-radius:
10px !important;
}
#bentoStudioThemeStage
.bs-elite-slide-image{
object-position:
68% center !important;
}
#bentoStudioThemeStage
.bs-elite-slide-shade{
background:
linear-gradient(
90deg,
rgba(0,0,0,.94) 0%,
rgba(0,0,0,.79) 46%,
rgba(0,0,0,.28) 100%
) !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content{
left:
24px !important;
right:
22px !important;
width:
auto !important;
max-width:
78% !important;
}
#bentoStudioThemeStage
.bs-elite-kicker{
font-size:
10px !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content h2{
margin:
7px 0 7px !important;
font-size:
clamp(
28px,
8vw,
35px
) !important;
line-height:
1.02 !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content p{
max-width:
290px !important;
margin-bottom:
14px !important;
font-size:
11px !important;
line-height:
1.4 !important;
}
#bentoStudioThemeStage
.bs-elite-cta{
min-height:
40px !important;
padding:
0 16px !important;
font-size:
11px !important;
}
/* =======================================================
TRUE MOBILE STACK
======================================================= */
#bentoStudioThemeStage
.bs-mobile-stack{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
display:
flex !important;
flex-direction:
column !important;
gap:
10px !important;
margin:
0 !important;
padding:
0 !important;
}
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module]{
position:
relative !important;
top:
auto !important;
right:
auto !important;
bottom:
auto !important;
left:
auto !important;
float:
none !important;
clear:
both !important;
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
height:
auto !important;
max-height:
none !important;
margin:
0 !important;
align-self:
stretch !important;
}
/*
Any abandoned desktop column wrappers are prevented
from reserving the huge blank spaces visible in the
previous mobile screenshots.
*/
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-layout{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
display:
block !important;
grid-template-columns:
1fr !important;
margin:
0 !important;
padding:
0 !important;
}
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-layout
> *:empty{
display:
none !important;
}
/* =======================================================
NAVIGATION
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="nav"]{
padding:
10px !important;
border:
1px solid #2d373d !important;
border-radius:
9px !important;
overflow:
hidden !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="nav"]
nav{
width:
100% !important;
display:
flex !important;
flex-direction:
row !important;
align-items:
center !important;
gap:
6px !important;
margin:
8px 0 0 !important;
padding:
0 0 2px !important;
overflow-x:
auto !important;
overflow-y:
hidden !important;
scrollbar-width:
none !important;
-webkit-overflow-scrolling:
touch !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="nav"]
nav::-webkit-scrollbar{
display:
none !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="nav"]
nav a,
#bentoStudioThemeStage
[data-bs-mobile-module="nav"]
nav button{
flex:
0 0 auto !important;
width:
auto !important;
min-width:
max-content !important;
min-height:
34px !important;
padding:
0 11px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border-radius:
6px !important;
white-space:
nowrap !important;
font-size:
10px !important;
}
/* =======================================================
PROFILE
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]{
padding:
18px 14px !important;
text-align:
center !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
img{
width:
132px !important;
max-width:
132px !important;
height:
132px !important;
max-height:
132px !important;
object-fit:
cover !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
h1,
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
h2,
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
h3{
font-size:
22px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
button,
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
a{
min-height:
38px;
}
/* =======================================================
ABOUT
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="about"]{
min-height:
150px !important;
padding:
16px !important;
overflow:
hidden !important;
background-size:
cover !important;
background-position:
center center !important;
}
/* =======================================================
FEATURED PLAYER
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="player"]{
padding:
14px !important;
overflow:
hidden !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
*{
min-width:
0;
}
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
img{
max-width:
100% !important;
object-fit:
cover !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
h1,
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
h2,
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
h3{
font-size:
20px !important;
line-height:
1.08 !important;
}
/* =======================================================
STATS
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="stats"]{
display:
grid !important;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
) !important;
gap:
8px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="stats"]
> *{
width:
100% !important;
min-width:
0 !important;
min-height:
68px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="stats"]
> *:last-child:nth-child(odd){
grid-column:
1 / -1 !important;
}
/* =======================================================
TRACK LIBRARY
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="library"]{
padding:
12px !important;
overflow:
hidden !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-track-grid,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-grid{
width:
100% !important;
display:
grid !important;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
) !important;
gap:
8px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-track-grid > *,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-grid > *{
width:
100% !important;
min-width:
0 !important;
max-width:
none !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-filters,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-filter-row,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-filters{
width:
100% !important;
display:
flex !important;
flex-wrap:
nowrap !important;
gap:
5px !important;
overflow-x:
auto !important;
scrollbar-width:
none !important;
}
/* =======================================================
BUNDLES
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="bundles"]{
padding:
14px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="bundles"]
img{
max-width:
100% !important;
object-fit:
cover !important;
}
/* =======================================================
LICENSING
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="license"]{
min-height:
0 !important;
padding:
16px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
button,
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
a{
width:
100% !important;
min-height:
40px !important;
}
/* =======================================================
QUOTE
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="quote"]{
min-height:
92px !important;
padding:
14px !important;
}
/* =======================================================
PROMO BANNER
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
width:
100% !important;
min-height:
118px !important;
height:
118px !important;
max-height:
none !important;
overflow:
hidden !important;
background-size:
cover !important;
background-position:
center center !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]::before,
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]::after{
max-width:
100% !important;
}
/* =======================================================
PREVIEW TOOLBAR
======================================================= */
.custom-theme-owner-bar{
left:
8px !important;
right:
8px !important;
bottom:
8px !important;
width:
auto !important;
max-width:
calc(
100vw - 16px
) !important;
min-height:
42px !important;
padding:
6px 8px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
flex-wrap:
wrap !important;
gap:
6px !important;
font-size:
9px !important;
box-sizing:
border-box !important;
}
.custom-theme-owner-bar
a,
.custom-theme-owner-bar
button{
min-height:
28px !important;
padding:
0 8px !important;
font-size:
9px !important;
}
}
/* =========================================================
VERY SMALL PHONE
========================================================= */
@media(max-width:380px){
#bentoStudioThemeStage{
padding-left:
6px !important;
padding-right:
6px !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content{
left:
18px !important;
right:
18px !important;
max-width:
82% !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content h2{
font-size:
27px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-track-grid,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-grid{
grid-template-columns:
1fr !important;
}
}
/* END BENTO STUDIO FINAL MOBILE REBUILD */
/* =========================================================
OSBEATS 20260910
BENTO MOBILE TAB BAR V4
SINGLETON / FINAL TOP NAVIGATION
========================================================= */
@media(max-width:700px){
/*
Hide the ACTUAL original Bento menu shell that
JavaScript identifies from the real navigation
controls.
This removes the bottom vertical list AND its
empty tall card from the mobile document flow.
*/
#bentoStudioThemeStage
[data-bs-bento-original-mobile-menu="1"]{
display:
none !important;
position:
absolute !important;
width:
0 !important;
min-width:
0 !important;
max-width:
0 !important;
height:
0 !important;
min-height:
0 !important;
max-height:
0 !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
overflow:
hidden !important;
visibility:
hidden !important;
pointer-events:
none !important;
}
/*
Defensive cleanup for any stale runtime copy from
the failed V2/V3 versions.
*/
#bentoStudioThemeStage
.bs-mobile-tabbar-v2,
#bentoStudioThemeStage
.bs-mobile-tabbar-v3{
display:
none !important;
}
/*
SINGLE MOBILE NAVIGATION
*/
#bentoMobilePrimaryNav.bs-mobile-tabbar-v4{
position:
relative !important;
top:
auto !important;
right:
auto !important;
bottom:
auto !important;
left:
auto !important;
z-index:
80 !important;
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
height:
auto !important;
min-height:
0 !important;
margin:
8px 0 10px !important;
padding:
7px !important;
display:
grid !important;
grid-template-columns:
repeat(
4,
minmax(0,1fr)
) !important;
grid-auto-flow:
row !important;
gap:
6px !important;
border:
1px solid #303b41 !important;
border-radius:
9px !important;
background:
#091014 !important;
box-shadow:
0 7px 18px
rgba(0,0,0,.20) !important;
overflow:
visible !important;
visibility:
visible !important;
pointer-events:
auto !important;
box-sizing:
border-box !important;
}
#bentoMobilePrimaryNav
.bs-mobile-tab-v4{
appearance:
none !important;
-webkit-appearance:
none !important;
position:
relative !important;
width:
100% !important;
max-width:
none !important;
min-width:
0 !important;
height:
40px !important;
min-height:
40px !important;
margin:
0 !important;
padding:
0 4px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
border:
1px solid #2e3940 !important;
border-radius:
6px !important;
background:
#111a1f !important;
color:
#e9edef !important;
font-family:
inherit !important;
font-size:
10px !important;
font-weight:
800 !important;
line-height:
1 !important;
text-align:
center !important;
white-space:
nowrap !important;
overflow:
hidden !important;
text-overflow:
ellipsis !important;
cursor:
pointer !important;
box-sizing:
border-box !important;
}
#bentoMobilePrimaryNav
.bs-mobile-tab-v4:hover,
#bentoMobilePrimaryNav
.bs-mobile-tab-v4:focus-visible{
border-color:
var(
--bs-accent,
#ff5a1f
) !important;
outline:
none !important;
}
#bentoMobilePrimaryNav
.bs-mobile-tab-v4.is-active{
border-color:
var(
--bs-accent,
#ff5a1f
) !important;
background:
rgba(
255,
90,
31,
.13
) !important;
color:
#fff !important;
box-shadow:
inset 0 -3px 0
var(
--bs-accent,
#ff5a1f
) !important;
}
/*
Hero follows navigation immediately.
*/
#bentoMobilePrimaryNav
+ .bs-elite-hero{
margin-top:
0 !important;
}
}
@media(min-width:321px) and (max-width:380px){
#bentoMobilePrimaryNav.bs-mobile-tabbar-v4{
grid-template-columns:
repeat(
3,
minmax(0,1fr)
) !important;
}
}
@media(max-width:320px){
#bentoMobilePrimaryNav.bs-mobile-tabbar-v4{
grid-template-columns:
repeat(
2,
minmax(0,1fr)
) !important;
}
}
/* END BENTO MOBILE TAB BAR V4 */
/* OSBEATS 20260910 BENTO MOBILE FINAL POLISH */
@media(max-width:700px){
/* =======================================================
GLOBAL MOBILE GEOMETRY
======================================================= */
#bentoStudioThemeStage{
padding-left:
8px !important;
padding-right:
8px !important;
padding-bottom:
64px !important;
}
#bentoStudioThemeStage
.bs-mobile-stack{
gap:
9px !important;
}
/*
Remove desktop column heights that no longer serve
any purpose once modules have moved into mobile stack.
*/
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-layout,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-left,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-left-column,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-center,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-center-column,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-main,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-main-column,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-right,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-right-column,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-side{
min-height:
0 !important;
max-height:
none !important;
height:
auto !important;
margin-top:
0 !important;
margin-bottom:
0 !important;
}
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-layout:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-left:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-left-column:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-center:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-center-column:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-main:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-main-column:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-right:empty,
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-right-column:empty{
display:
none !important;
}
/* =======================================================
TOP BAR
======================================================= */
#bentoStudioThemeStage
.bs-topbar{
padding:
9px 9px 8px !important;
}
#bentoStudioThemeStage
.bs-topbar
input[type="search"]{
height:
38px !important;
min-height:
38px !important;
}
/* =======================================================
MOBILE TAB BAR
======================================================= */
#bentoMobilePrimaryNav.bs-mobile-tabbar-v4{
margin:
7px 0 8px !important;
padding:
6px !important;
gap:
5px !important;
border-radius:
8px !important;
}
#bentoMobilePrimaryNav
.bs-mobile-tab-v4{
height:
38px !important;
min-height:
38px !important;
padding:
0 3px !important;
border-radius:
5px !important;
font-size:
9.5px !important;
letter-spacing:
0 !important;
}
/* =======================================================
HERO
======================================================= */
#bentoStudioThemeStage
.bs-elite-hero{
margin-bottom:
9px !important;
}
#bentoStudioThemeStage
.bs-elite-viewport{
height:
238px !important;
min-height:
238px !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content{
left:
26px !important;
right:
20px !important;
max-width:
82% !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content h2{
font-size:
clamp(
27px,
7.6vw,
34px
) !important;
}
#bentoStudioThemeStage
.bs-elite-slide-content p{
font-size:
10.5px !important;
}
/* =======================================================
PROFILE
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]{
min-height:
0 !important;
height:
auto !important;
padding:
17px 14px 15px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
img{
width:
120px !important;
height:
120px !important;
max-width:
120px !important;
max-height:
120px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
h1,
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
h2,
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
h3{
margin-top:
9px !important;
margin-bottom:
3px !important;
font-size:
21px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
button,
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
a{
min-height:
36px !important;
}
/* =======================================================
ABOUT
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="about"]{
min-height:
138px !important;
padding:
15px !important;
border-radius:
9px !important;
}
/* =======================================================
FEATURED PLAYER
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="player"]{
width:
100% !important;
min-height:
0 !important;
height:
auto !important;
padding:
14px 13px !important;
overflow:
hidden !important;
border-radius:
9px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
.bs-player-controls,
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
.bs-featured-controls,
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
.bs-controls{
width:
100% !important;
max-width:
100% !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
9px !important;
overflow:
visible !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
.bs-player-controls button,
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
.bs-featured-controls button,
#bentoStudioThemeStage
[data-bs-mobile-module="player"]
.bs-controls button{
flex:
0 0 auto !important;
}
/* =======================================================
STATS
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="stats"]{
gap:
7px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="stats"]
> *{
min-height:
64px !important;
padding:
10px 12px !important;
border-radius:
8px !important;
}
/* =======================================================
TRACK LIBRARY
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="library"]{
padding:
12px !important;
border-radius:
9px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-track-grid,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-grid{
gap:
8px !important;
}
/*
Allow track titles to use two lines rather than
making long titles unreadable.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-track-grid
strong,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-grid
strong{
display:
-webkit-box !important;
overflow:
hidden !important;
-webkit-box-orient:
vertical !important;
-webkit-line-clamp:
2 !important;
white-space:
normal !important;
line-height:
1.2 !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-track-grid
> *,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-grid
> *{
overflow:
hidden !important;
border-radius:
7px !important;
}
/* =======================================================
BUNDLES
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="bundles"]{
padding:
13px !important;
border-radius:
9px !important;
}
/* =======================================================
LICENSING
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="license"]{
padding:
15px !important;
border-radius:
9px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
button,
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
a{
min-height:
38px !important;
}
/* =======================================================
QUOTE
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="quote"]{
min-height:
84px !important;
padding:
13px !important;
border-radius:
9px !important;
}
/* =======================================================
BOTTOM BANNER
======================================================= */
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
min-height:
106px !important;
height:
106px !important;
margin-bottom:
0 !important;
border-radius:
9px !important;
background-position:
center center !important;
}
/* =======================================================
REMOVE BOTTOM EMPTY SPACE
======================================================= */
#bentoStudioThemeStage
.bs-mobile-stack
> :last-child{
margin-bottom:
0 !important;
}
#bentoStudioThemeStage
.bs-mobile-stack::after{
display:
none !important;
height:
0 !important;
content:
none !important;
}
#bentoStudioThemeStage.bs-mobile-rebuilt{
min-height:
0 !important;
height:
auto !important;
}
/* =======================================================
PREVIEW TOOLBAR
PREVIEW ONLY — NOT PUBLIC STOREFRONT
======================================================= */
.custom-theme-owner-bar{
left:
50% !important;
right:
auto !important;
bottom:
7px !important;
width:
auto !important;
min-width:
0 !important;
max-width:
calc(100vw - 20px) !important;
min-height:
36px !important;
padding:
5px 7px !important;
flex-wrap:
nowrap !important;
gap:
5px !important;
transform:
translateX(-50%) !important;
white-space:
nowrap !important;
font-size:
8px !important;
}
.custom-theme-owner-bar
a,
.custom-theme-owner-bar
button{
min-height:
25px !important;
padding:
0 7px !important;
font-size:
8px !important;
white-space:
nowrap !important;
}
}
/* =========================================================
VERY SMALL PHONES
========================================================= */
@media(max-width:380px){
#bentoStudioThemeStage
[data-bs-mobile-module="profile"]
img{
width:
108px !important;
height:
108px !important;
}
#bentoStudioThemeStage
.bs-elite-viewport{
height:
228px !important;
min-height:
228px !important;
}
#bentoMobilePrimaryNav
.bs-mobile-tab-v4{
font-size:
9px !important;
}
}
/* END OSBEATS BENTO MOBILE FINAL POLISH */
/* OSBEATS 20260910 BENTO MOBILE UNIFORM MODULE GUTTERS */
@media(max-width:700px){
/*
========================================================
MOBILE CONTENT FRAME
========================================================
Keep top bar, mobile tab navigation and Hero at their
existing geometry.
Every Bento content module BELOW the Hero receives the
same inner horizontal gutter.
*/
#bentoStudioThemeStage
.bs-mobile-stack{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
padding:
0 !important;
box-sizing:
border-box !important;
}
/*
AUTHORITATIVE MODULE WIDTH
16px total reduction = 8px inset on each side.
Combined with the Bento stage's existing outer padding,
this creates a clean visible channel between every
module and the outside storefront wall.
*/
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module]{
width:
calc(100% - 16px) !important;
max-width:
calc(100% - 16px) !important;
min-width:
0 !important;
margin-left:
auto !important;
margin-right:
auto !important;
box-sizing:
border-box !important;
}
/*
Explicit module enforcement prevents older Bento
component-specific 100% rules from overriding the
uniform mobile gutter.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="profile"],
#bentoStudioThemeStage
[data-bs-mobile-module="about"],
#bentoStudioThemeStage
[data-bs-mobile-module="player"],
#bentoStudioThemeStage
[data-bs-mobile-module="stats"],
#bentoStudioThemeStage
[data-bs-mobile-module="library"],
#bentoStudioThemeStage
[data-bs-mobile-module="bundles"],
#bentoStudioThemeStage
[data-bs-mobile-module="license"],
#bentoStudioThemeStage
[data-bs-mobile-module="quote"],
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
width:
calc(100% - 16px) !important;
max-width:
calc(100% - 16px) !important;
min-width:
0 !important;
margin-left:
auto !important;
margin-right:
auto !important;
box-sizing:
border-box !important;
}
/*
Keep the visual card edges uniform.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="profile"],
#bentoStudioThemeStage
[data-bs-mobile-module="about"],
#bentoStudioThemeStage
[data-bs-mobile-module="player"],
#bentoStudioThemeStage
[data-bs-mobile-module="library"],
#bentoStudioThemeStage
[data-bs-mobile-module="bundles"],
#bentoStudioThemeStage
[data-bs-mobile-module="license"],
#bentoStudioThemeStage
[data-bs-mobile-module="quote"],
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
border-radius:
9px !important;
overflow:
hidden !important;
}
/*
Stats container follows the same outer gutter,
while the individual stat cards remain evenly
distributed inside it.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="stats"]{
display:
grid !important;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
) !important;
gap:
7px !important;
}
#bentoStudioThemeStage
[data-bs-mobile-module="stats"]
> *{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
margin:
0 !important;
box-sizing:
border-box !important;
}
/*
Library content remains completely inside its
uniformly inset outer module.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-track-grid,
#bentoStudioThemeStage
[data-bs-mobile-module="library"]
.bs-library-grid{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
margin-left:
0 !important;
margin-right:
0 !important;
box-sizing:
border-box !important;
}
/*
Bundle inner card and licensing CTA must stay inside
the same module gutter and not extend toward the wall.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="bundles"]
> *,
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
> *{
max-width:
100% !important;
box-sizing:
border-box !important;
}
/*
Bottom quote and promo banner now line up perfectly
with the modules above them.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="quote"],
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
align-self:
center !important;
}
}
/*
Slightly tighter gutter for very narrow devices so
usable content width is not unnecessarily reduced.
*/
@media(max-width:360px){
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module],
#bentoStudioThemeStage
[data-bs-mobile-module="profile"],
#bentoStudioThemeStage
[data-bs-mobile-module="about"],
#bentoStudioThemeStage
[data-bs-mobile-module="player"],
#bentoStudioThemeStage
[data-bs-mobile-module="stats"],
#bentoStudioThemeStage
[data-bs-mobile-module="library"],
#bentoStudioThemeStage
[data-bs-mobile-module="bundles"],
#bentoStudioThemeStage
[data-bs-mobile-module="license"],
#bentoStudioThemeStage
[data-bs-mobile-module="quote"],
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
width:
calc(100% - 12px) !important;
max-width:
calc(100% - 12px) !important;
}
}
/* END OSBEATS BENTO MOBILE UNIFORM MODULE GUTTERS */
/* OSBEATS 20260910 BENTO MOBILE LICENSE BANNER GUTTER FIX */
@media(max-width:700px){
/*
========================================================
LICENSING MODULE
========================================================
Force the actual visible licensing module to use
the same 8px-per-side inner gutter as the rest of
the Bento mobile modules.
*/
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="license"],
#bentoStudioThemeStage
[data-bs-mobile-module="license"]{
width:
calc(100% - 16px) !important;
max-width:
calc(100% - 16px) !important;
min-width:
0 !important;
margin-left:
auto !important;
margin-right:
auto !important;
padding-left:
0 !important;
padding-right:
0 !important;
align-self:
center !important;
box-sizing:
border-box !important;
}
/*
The visual licensing card itself must remain
completely inside the inset module wrapper.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
.bs-license-box,
#bentoStudioThemeStage
.bs-mobile-stack
.bs-license-box{
position:
relative !important;
left:
auto !important;
right:
auto !important;
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
margin-left:
0 !important;
margin-right:
0 !important;
transform:
none !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
}
/*
Ensure the Licensing CTA also stays inside the
card rather than stretching past its edge.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
.bs-license-module-cta,
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
button,
#bentoStudioThemeStage
[data-bs-mobile-module="license"]
a{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
margin-left:
0 !important;
margin-right:
0 !important;
box-sizing:
border-box !important;
}
/*
========================================================
BOTTOM PROMO BANNER
========================================================
The desktop banner uses edge-fill pseudo elements.
On mobile those old expansion rules can make the
artwork LOOK full-bleed even when the module wrapper
itself has the correct gutter.
Force both the module and its visible artwork back
inside the same Bento mobile content channel.
*/
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="banner"],
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
position:
relative !important;
left:
auto !important;
right:
auto !important;
width:
calc(100% - 16px) !important;
max-width:
calc(100% - 16px) !important;
min-width:
0 !important;
margin-left:
auto !important;
margin-right:
auto !important;
align-self:
center !important;
transform:
none !important;
overflow:
hidden !important;
border-radius:
9px !important;
box-sizing:
border-box !important;
background-size:
cover !important;
background-position:
center center !important;
background-repeat:
no-repeat !important;
}
/*
Neutralize the old desktop edge-fill expansion.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]::before,
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]::after,
#bentoStudioThemeStage
.bs-bottom-banner::before,
#bentoStudioThemeStage
.bs-bottom-banner::after{
left:
0 !important;
right:
0 !important;
top:
0 !important;
bottom:
0 !important;
width:
100% !important;
max-width:
100% !important;
height:
100% !important;
margin:
0 !important;
padding:
0 !important;
transform:
none !important;
border-radius:
inherit !important;
box-sizing:
border-box !important;
}
/*
Any child artwork/branding inside the banner
must stay within the banner boundary.
*/
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]
> *{
max-width:
100% !important;
box-sizing:
border-box !important;
}
/*
Direct class enforcement in case Bento's runtime
module attribute is applied to an outer wrapper.
*/
#bentoStudioThemeStage
.bs-mobile-stack
.bs-bottom-banner{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
margin-left:
0 !important;
margin-right:
0 !important;
transform:
none !important;
overflow:
hidden !important;
border-radius:
9px !important;
box-sizing:
border-box !important;
}
}
/*
Maintain the same proportional treatment on
very narrow phones.
*/
@media(max-width:360px){
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="license"],
#bentoStudioThemeStage
[data-bs-mobile-module="license"],
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="banner"],
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
width:
calc(100% - 12px) !important;
max-width:
calc(100% - 12px) !important;
}
}
/* END OSBEATS BENTO MOBILE LICENSE BANNER GUTTER FIX */
/* OSBEATS 20260911 BENTO LICENSE BANNER ALIGNMENT OVERRIDE */
@media(max-width:700px){
/*
The previous targeted block correctly applied:
width: calc(100% - 16px)
but later class rules on .bs-license-box and
.bs-bottom-banner restored width:100%.
These rules are intentionally last in the cascade.
*/
/* =====================================================
LICENSING — MATCH QUOTE/BUNDLES CONTENT CHANNEL
===================================================== */
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-mobile-stack
> [data-bs-mobile-module="license"],
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-license-box[data-bs-mobile-module="license"],
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-license-box{
position:
relative !important;
left:
auto !important;
right:
auto !important;
width:
calc(100% - 16px) !important;
min-width:
0 !important;
max-width:
calc(100% - 16px) !important;
margin-left:
auto !important;
margin-right:
auto !important;
transform:
none !important;
align-self:
center !important;
box-sizing:
border-box !important;
}
/*
Keep licensing content inside the newly inset card.
*/
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="license"]
> *{
max-width:
100% !important;
box-sizing:
border-box !important;
}
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="license"]
.bs-license-module-cta,
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="license"]
button,
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="license"]
a{
width:
100% !important;
max-width:
100% !important;
min-width:
0 !important;
box-sizing:
border-box !important;
}
/* =====================================================
BOTTOM BANNER — SAME EXACT OUTER ALIGNMENT
===================================================== */
#bentoStudioThemeStage.bs-mobile-rebuilt
.bs-mobile-stack
> [data-bs-mobile-module="banner"],
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-bottom-banner[data-bs-mobile-module="banner"],
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-bottom-banner{
position:
relative !important;
left:
auto !important;
right:
auto !important;
width:
calc(100% - 16px) !important;
min-width:
0 !important;
max-width:
calc(100% - 16px) !important;
margin-left:
auto !important;
margin-right:
auto !important;
transform:
none !important;
align-self:
center !important;
overflow:
hidden !important;
box-sizing:
border-box !important;
}
/*
Prevent the desktop edge-fill artwork from visually
extending beyond the newly inset mobile banner.
*/
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-bottom-banner::before,
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-bottom-banner::after,
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="banner"]::before,
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="banner"]::after{
left:
0 !important;
right:
0 !important;
width:
100% !important;
max-width:
100% !important;
margin:
0 !important;
transform:
none !important;
box-sizing:
border-box !important;
}
}
/*
Match the existing narrower-device gutter rule.
*/
@media(max-width:360px){
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="license"],
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-license-box,
#bentoStudioThemeStage
.bs-mobile-stack
> [data-bs-mobile-module="banner"],
#bentoStudioThemeStage
.bs-mobile-stack
> .bs-bottom-banner{
width:
calc(100% - 12px) !important;
max-width:
calc(100% - 12px) !important;
}
}
/* END OSBEATS BENTO LICENSE BANNER ALIGNMENT OVERRIDE */
/* OSBEATS 20260911 BENTO MOBILE BANNER MODULE POSITION */
@media(max-width:700px){
/*
Move the ENTIRE bottom banner module upward.
position:relative + top:-12px moves the visible
module up while its original layout position remains
reserved underneath it.
Result:
real visible space BELOW the banner module.
The banner artwork and ONLY ON OSBEATS content are
not modified.
*/
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner,
body.storefront-theme-bento-studio
#bentoStudioThemeStage
[data-bs-mobile-module="banner"]{
position:
relative !important;
top:
-12px !important;
}
}
/* END OSBEATS BENTO MOBILE BANNER MODULE POSITION */
/* OSBEATS 20260911 BENTO MOBILE LEGACY LAYOUT COLLAPSE */
@media(max-width:700px){
/*
VERIFIED DOM:
#bentoStudioThemeStage
> .bs-shell
> .bs-mobile-stack <-- real mobile content
> .bs-layout <-- obsolete desktop layout
Mobile modules have already been moved into
.bs-mobile-stack.
The nested desktop .bs-layout was still consuming
document height below the mobile storefront.
*/
body.storefront-theme-bento-studio
#bentoStudioThemeStage.bs-mobile-rebuilt
> .bs-shell
> .bs-layout{
display:
none !important;
position:
static !important;
width:
0 !important;
min-width:
0 !important;
max-width:
0 !important;
height:
0 !important;
min-height:
0 !important;
max-height:
0 !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
overflow:
hidden !important;
}
/*
The shell now sizes only to the real mobile stack.
*/
body.storefront-theme-bento-studio
#bentoStudioThemeStage.bs-mobile-rebuilt
> .bs-shell{
height:
auto !important;
min-height:
0 !important;
max-height:
none !important;
margin-bottom:
0 !important;
padding-bottom:
0 !important;
}
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-mobile-stack{
height:
auto !important;
min-height:
0 !important;
max-height:
none !important;
margin-bottom:
0 !important;
padding-bottom:
0 !important;
}
/*
Stage ends shortly after the approved banner.
*/
body.storefront-theme-bento-studio
#bentoStudioThemeStage{
height:
auto !important;
min-height:
0 !important;
max-height:
none !important;
padding-bottom:
14px !important;
}
}
/* END OSBEATS BENTO MOBILE LEGACY LAYOUT COLLAPSE */
/* OSBEATS 20260911 BENTO ELITE APPROVED FIDELITY V4 */
body.storefront-theme-bento-studio
#bentoStudioThemeStage.bs-approved-elite-v4{
--elite-accent:#ff5a1f;
}
/* =========================================================
PUBLIC ELITE CONTROLS — NEVER DISPLAY
========================================================= */
#bentoStudioThemeStage
.bs-elite-controls,
#bentoStudioThemeStage
[data-elite-controls],
#bentoStudioThemeStage
#bentoEliteControls{
display:none !important;
}
/* =========================================================
HERO — APPROVED MOCKUP DETAILS
========================================================= */
#bentoStudioThemeStage
.bs-approved-hero-v4{
position:relative !important;
}
#bentoStudioThemeStage
.bs-approved-hero-v4
.bs-elite-badge::before{
content:"♛";
margin-right:5px;
color:var(--elite-accent);
}
#bentoStudioThemeStage
.bs-approved-hero-message-v4{
position:absolute;
right:22px;
bottom:20px;
z-index:8;
width:145px;
text-align:right;
pointer-events:none;
}
#bentoStudioThemeStage
.bs-approved-hero-message-v4 strong{
display:block;
color:#e8e1db;
font-family:cursive;
font-size:16px;
font-weight:500;
line-height:1.02;
transform:
rotate(-7deg);
opacity:.92;
}
#bentoStudioThemeStage
.bs-approved-hero-message-v4 span{
display:block;
margin-top:17px;
color:#c8d1d5;
font-size:7px;
font-weight:900;
line-height:1.15;
letter-spacing:.22em;
}
/* =========================================================
PROFILE — APPROVED ELITE BADGE + SOCIALS
========================================================= */
#bentoStudioThemeStage
.bs-approved-elite-badge-v4{
width:max-content;
max-width:100%;
margin:
7px auto 4px;
padding:
5px 9px;
border:
1px solid
var(--elite-accent);
border-radius:
5px;
color:#fff;
background:
rgba(255,90,31,.08);
font-size:9px;
font-weight:900;
letter-spacing:.07em;
}
#bentoStudioThemeStage
.bs-approved-elite-badge-v4 span{
color:var(--elite-accent);
}
#bentoStudioThemeStage
.bs-approved-socials-v4{
width:100%;
margin-top:13px;
padding-top:12px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
border-top:
1px solid
rgba(255,255,255,.08);
}
#bentoStudioThemeStage
.bs-approved-socials-v4 a{
width:29px;
height:29px;
display:flex;
align-items:center;
justify-content:center;
color:#9ea9ae;
border:
1px solid
transparent;
border-radius:50%;
text-decoration:none;
transition:
.2s ease;
}
#bentoStudioThemeStage
.bs-approved-socials-v4 a svg{
width:15px;
height:15px;
}
#bentoStudioThemeStage
.bs-approved-socials-v4 a:hover{
color:#fff;
border-color:
var(--elite-accent);
background:
rgba(255,90,31,.10);
box-shadow:
0 0 14px
rgba(255,90,31,.16);
}
/* =========================================================
ABOUT — APPROVED MOCKUP COPY
========================================================= */
#bentoStudioThemeStage
.bs-approved-about-extra-v4{
margin-top:14px;
color:#d8dfe2;
}
#bentoStudioThemeStage
.bs-approved-about-extra-v4 p{
margin:
0 0 13px;
font-size:9px;
line-height:1.45;
}
#bentoStudioThemeStage
.bs-approved-worldwide-v4{
display:flex;
align-items:center;
gap:6px;
color:#c4cdd1;
font-size:8px;
}
/* =========================================================
FEATURED PLAYER — APPROVED PREMIUM DEPTH
========================================================= */
@media(min-width:701px){
#bentoStudioThemeStage
.bs-approved-player-v4{
border-color:
rgba(255,255,255,.15)
!important;
background:
radial-gradient(
circle at 30% 46%,
rgba(255,90,31,.11),
transparent 28%
),
#091014
!important;
box-shadow:
0 15px 38px
rgba(0,0,0,.25),
0 0 18px
rgba(255,90,31,.08);
}
#bentoStudioThemeStage
.bs-approved-player-v4 img{
box-shadow:
0 0 0 1px
var(--elite-accent),
0 0 20px
rgba(255,90,31,.24);
}
}
/* =========================================================
FEATURED DROP — APPROVED MOCKUP
========================================================= */
#bentoStudioThemeStage
.bs-approved-spotlight-v4{
position:relative;
isolation:isolate;
width:100%;
height:194px;
min-height:194px;
max-height:194px;
margin:
10px 0;
padding:
14px 17px;
display:grid;
grid-template-columns:
190px
minmax(0,1fr);
align-items:center;
gap:18px;
overflow:hidden;
border:
1px solid
var(--elite-accent);
border-radius:8px;
background:#07090b;
box-sizing:border-box;
box-shadow:
0 17px 38px
rgba(0,0,0,.31);
}
#bentoStudioThemeStage
.bs-approved-spotlight-v4::before{
content:"";
position:absolute;
z-index:-3;
inset:0;
width:100%;
height:100%;
background-image:
var(--spotlight-bg-v4);
background-repeat:
no-repeat;
background-position:
center center;
background-size:
cover;
opacity:1;
}
#bentoStudioThemeStage
.bs-approved-spotlight-v4::after{
content:"";
position:absolute;
z-index:-2;
inset:0;
background:
linear-gradient(
90deg,
rgba(5,7,9,.96) 0%,
rgba(5,7,9,.90) 24%,
rgba(5,7,9,.66) 42%,
rgba(5,7,9,.28) 58%,
rgba(5,7,9,.08) 76%,
rgba(5,7,9,.02) 100%
);
}
#bentoStudioThemeStage.elite-overlay-strong
.bs-approved-spotlight-v4::after{
background:
linear-gradient(
90deg,
rgba(5,7,9,.97) 0%,
rgba(5,7,9,.92) 30%,
rgba(5,7,9,.63) 50%,
rgba(5,7,9,.18) 72%,
rgba(5,7,9,.04) 100%
);
}
/* vinyl behind artwork */
#bentoStudioThemeStage
.bs-approved-cover-wrap-v4{
position:relative;
width:188px;
height:164px;
display:flex;
align-items:center;
z-index:3;
}
#bentoStudioThemeStage
.bs-approved-vinyl-v4{
position:absolute;
z-index:0;
top:10px;
right:-19px;
width:143px;
height:143px;
border-radius:50%;
background:
radial-gradient(
circle,
#ec571f 0 7px,
#161616 8px 18px,
#292929 19px 21px,
#080808 22px 38px,
#202020 39px 41px,
#070707 42px 58px,
#1d1d1d 59px 61px,
#050505 62px 100%
);
box-shadow:
0 0 18px
rgba(0,0,0,.8);
}
#bentoStudioThemeStage
.bs-approved-cover-v4{
position:relative;
z-index:2;
width:158px;
height:158px;
overflow:hidden;
border:
1px solid
var(--elite-accent);
border-radius:5px;
background:#11191d;
box-shadow:
0 0 0 1px
rgba(255,90,31,.18),
0 0 22px
rgba(255,90,31,.25);
}
#bentoStudioThemeStage
.bs-approved-cover-v4 img{
width:100%;
height:100%;
object-fit:cover;
}
#bentoStudioThemeStage
.bs-approved-cover-fallback-v4{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:
var(--elite-accent);
font-size:36px;
font-weight:900;
}
#bentoStudioThemeStage
.bs-approved-kicker-v4{
margin-bottom:4px;
color:
var(--elite-accent);
font-size:9px;
font-weight:900;
letter-spacing:.14em;
}
#bentoStudioThemeStage
.bs-approved-spotlight-copy-v4 h2{
margin:
0 0 3px;
color:#fff;
font-size:32px;
line-height:1;
}
#bentoStudioThemeStage
.bs-approved-spotlight-artist-v4{
margin-bottom:6px;
color:#d7dee1;
font-size:10px;
}
#bentoStudioThemeStage
.bs-approved-spotlight-copy-v4 p{
width:auto;
max-width:430px;
margin:
0 0 8px;
color:#e0e6e8;
font-size:10px;
line-height:1.38;
white-space:pre-line;
}
#bentoStudioThemeStage
.bs-approved-tags-v4{
margin-bottom:9px;
display:flex;
flex-wrap:wrap;
gap:5px;
}
#bentoStudioThemeStage
.bs-approved-tags-v4 span{
padding:
4px 8px;
border:
1px solid
rgba(255,255,255,.15);
border-radius:
5px;
background:
rgba(6,11,14,.78);
color:#e2e7e9;
font-size:8px;
}
#bentoStudioThemeStage
.bs-approved-tags-v4
.exclusive{
color:#ff7351;
border-color:
rgba(255,90,31,.48);
background:
rgba(255,90,31,.12);
}
#bentoStudioThemeStage
.bs-approved-actions-v4{
display:flex;
align-items:center;
gap:8px;
margin-top:0;
}
#bentoStudioThemeStage
.bs-approved-actions-v4 button{
min-height:36px;
padding:
0 18px;
border-radius:5px;
font-family:inherit;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#bentoStudioThemeStage
.bs-approved-listen-v4{
min-width:118px;
color:#fff;
border:
1px solid
var(--elite-accent);
background:
var(--elite-accent);
box-shadow:
0 0 20px
rgba(255,90,31,.32);
}
#bentoStudioThemeStage
.bs-approved-license-v4{
min-width:132px;
color:#fff;
border:
1px solid
#3a474d;
background:
rgba(8,13,16,.89);
}
#bentoStudioThemeStage
.bs-approved-only-v4{
position:absolute;
z-index:8;
top:13px;
right:15px;
color:#fff;
font-size:7px;
font-weight:900;
letter-spacing:.11em;
}
#bentoStudioThemeStage
.bs-approved-only-v4 strong{
color:
var(--elite-accent);
}
/* =========================================================
TRACK LIBRARY — APPROVED FOUR-CARD GEOMETRY
========================================================= */
@media(min-width:701px){
#bentoStudioThemeStage
.bs-approved-track-grid-v4{
display:grid !important;
grid-template-columns:
repeat(
4,
minmax(0,1fr)
)
!important;
gap:
8px
!important;
}
#bentoStudioThemeStage
.bs-approved-track-card-v4{
width:100% !important;
min-width:0 !important;
height:170px !important;
min-height:170px !important;
max-height:170px !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
#bentoStudioThemeStage
.bs-approved-track-card-v4 img{
width:100% !important;
height:96px !important;
min-height:96px !important;
max-height:96px !important;
object-fit:cover !important;
}
#bentoStudioThemeStage
.bs-approved-track-card-v4.is-spotlight-track{
border-color:
var(--elite-accent)
!important;
box-shadow:
0 0 0 1px
var(--elite-accent),
0 0 18px
rgba(255,90,31,.19);
}
}
/* =========================================================
ABOUT / LEFT SIDE / QUOTE — APPROVED ALIGNMENT
========================================================= */
@media(min-width:701px){
#bentoStudioThemeStage
.bs-layout
> .bs-left{
align-self:
stretch;
}
#bentoStudioThemeStage
.bs-layout
> .bs-left
.bs-side-quote{
margin-top:
auto !important;
}
}
#bentoStudioThemeStage
.bs-approved-quote-v4{
position:relative;
overflow:hidden;
}
#bentoStudioThemeStage
.bs-approved-quote-v4::after{
content:"";
position:absolute;
left:11px;
right:11px;
bottom:9px;
height:22px;
opacity:.27;
background:
repeating-linear-gradient(
90deg,
transparent 0 3px,
#ff304f 3px 4px,
transparent 4px 7px
);
mask-image:
linear-gradient(
180deg,
transparent,
#000 30%,
#000 70%,
transparent
);
}
/* =========================================================
BOTTOM PROMO — EXACT THIN APPROVED PROPORTION
DESKTOP ONLY
========================================================= */
@media(min-width:701px){
#bentoStudioThemeStage
.bs-approved-bottom-banner-v4{
height:58px !important;
min-height:58px !important;
max-height:58px !important;
overflow:hidden !important;
}
#bentoStudioThemeStage
.bs-approved-bottom-banner-v4::before,
#bentoStudioThemeStage
.bs-approved-bottom-banner-v4::after{
top:0 !important;
bottom:0 !important;
}
}
/* =========================================================
PREMIUM MOTION — APPROVED SUBTLE TREATMENT
========================================================= */
#bentoStudioThemeStage:not(.elite-motion-off)
.bs-approved-track-card-v4{
transition:
transform .22s ease,
border-color .22s ease,
box-shadow .22s ease;
}
#bentoStudioThemeStage:not(.elite-motion-off)
.bs-approved-track-card-v4:hover{
transform:
translateY(-3px);
border-color:
var(--elite-accent)
!important;
box-shadow:
0 10px 22px
rgba(0,0,0,.28),
0 0 14px
rgba(255,90,31,.12);
}
/* =========================================================
MOBILE — PRESERVE EXISTING APPROVED MOBILE ARCHITECTURE
========================================================= */
@media(max-width:700px){
#bentoStudioThemeStage
.bs-approved-hero-message-v4{
display:none;
}
#bentoStudioThemeStage
.bs-approved-spotlight-v4{
width:
calc(100% - 16px);
max-width:
calc(100% - 16px);
min-height:0;
margin:
0 auto 9px;
padding:11px;
grid-template-columns:
108px
minmax(0,1fr);
gap:11px;
}
#bentoStudioThemeStage
.bs-approved-spotlight-v4::before{
width:100%;
opacity:.42;
background-position:
var(
--elite-spotlight-x,
72%
)
center;
}
#bentoStudioThemeStage
.bs-approved-spotlight-v4::after{
background:
linear-gradient(
90deg,
rgba(4,7,9,.97),
rgba(4,7,9,.74)
);
}
#bentoStudioThemeStage
.bs-approved-cover-wrap-v4{
width:108px;
height:108px;
}
#bentoStudioThemeStage
.bs-approved-cover-v4{
width:108px;
height:108px;
}
#bentoStudioThemeStage
.bs-approved-vinyl-v4{
width:92px;
height:92px;
top:8px;
right:-12px;
}
#bentoStudioThemeStage
.bs-approved-spotlight-copy-v4 h2{
font-size:20px;
}
#bentoStudioThemeStage
.bs-approved-spotlight-copy-v4 p{
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
2;
font-size:8px;
}
#bentoStudioThemeStage
.bs-approved-tags-v4{
display:none;
}
#bentoStudioThemeStage
.bs-approved-only-v4{
display:none;
}
#bentoStudioThemeStage
.bs-approved-actions-v4{
flex-wrap:wrap;
}
#bentoStudioThemeStage
.bs-approved-actions-v4 button{
min-height:32px;
padding:
0 10px;
font-size:8px;
}
}
@media(max-width:430px){
#bentoStudioThemeStage
.bs-approved-spotlight-v4{
grid-template-columns:
1fr;
}
#bentoStudioThemeStage
.bs-approved-cover-wrap-v4{
width:100%;
height:145px;
}
#bentoStudioThemeStage
.bs-approved-cover-v4{
width:145px;
height:145px;
}
#bentoStudioThemeStage
.bs-approved-vinyl-v4{
width:128px;
height:128px;
left:72px;
right:auto;
}
}
/* END OSBEATS 20260911 BENTO ELITE APPROVED FIDELITY V4 */
/* OSBEATS 20260911 BENTO ABOUT FINAL FIT */
/* Old quote module remains intentionally removed. */
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-side-quote,
body.storefront-theme-bento-studio
#bentoStudioThemeStage
[data-bs-mobile-module="quote"],
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-approved-quote-v4{
display:none !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
max-width:0 !important;
max-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
overflow:hidden !important;
}
/*
DESKTOP ABOUT
- Move About upward by reducing its upper spacing.
- Shorten About so it physically ends ABOVE the banner.
- Do NOT move the banner.
*/
@media(min-width:701px){
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-about,
body.storefront-theme-bento-studio
#bentoStudioThemeStage
[data-bs-mobile-module="about"]{
position:relative !important;
top:0 !important;
height:330px !important;
min-height:330px !important;
max-height:330px !important;
margin-top:6px !important;
margin-bottom:0 !important;
padding:16px !important;
align-self:start !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/*
Undo the previous bad banner movement.
Banner stays in its original approved location.
*/
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-bottom-banner,
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-approved-bottom-banner-v4{
top:0 !important;
margin-top:0 !important;
margin-bottom:0 !important;
}
}
/* Mobile remains unchanged. */
@media(max-width:700px){
body.storefront-theme-bento-studio
#bentoStudioThemeStage
.bs-about,
body.storefront-theme-bento-studio
#bentoStudioThemeStage
[data-bs-mobile-module="about"]{
height:auto !important;
min-height:0 !important;
max-height:none !important;
}
}
/* END OSBEATS 20260911 BENTO ABOUT FINAL FIT */
/* OSBEATS 20260911 BENTO ELITE SPOTLIGHT SLIDES V3 STOREFRONT */
#bentoStudioThemeStage
.bs-elite-spotlight-slider-v3{
position:relative;
width:100%;
height:194px;
margin:
10px 0;
overflow:hidden;
border:
1px solid
var(--elite-accent);
border-radius:8px;
background:#05090c;
box-sizing:border-box;
}
#bentoStudioThemeStage
.bs-elite-spotlight-track-v3{
position:relative;
width:100%;
height:100%;
}
#bentoStudioThemeStage
.bs-elite-spotlight-slide-v3{
position:absolute;
inset:0;
display:grid;
grid-template-columns:
225px
minmax(0,1fr);
align-items:center;
gap:16px;
padding:
14px 18px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .45s ease;
box-sizing:border-box;
}
#bentoStudioThemeStage
.bs-elite-spotlight-slide-v3.is-active{
opacity:1;
visibility:visible;
pointer-events:auto;
}
#bentoStudioThemeStage
.bs-elite-spotlight-bg-v3{
position:absolute;
inset:0;
z-index:0;
background-repeat:
no-repeat;
background-size:
cover;
}
#bentoStudioThemeStage
.bs-elite-spotlight-shade-v3{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(
90deg,
rgba(4,8,11,.96) 0%,
rgba(4,8,11,.90) 27%,
rgba(4,8,11,.63) 47%,
rgba(4,8,11,.22) 72%,
rgba(4,8,11,.04) 100%
);
}
/*
LEFT ARTWORK
Cover square is fixed and centered vertically.
Vinyl is a complete record, not two clipped arcs.
*/
#bentoStudioThemeStage
.bs-elite-spotlight-art-v3{
position:relative;
z-index:3;
width:225px;
height:160px;
overflow:visible;
}
#bentoStudioThemeStage
.bs-elite-cover-v3{
position:absolute;
z-index:4;
left:0;
top:2px;
width:156px;
height:156px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border:
1px solid
var(--elite-accent);
border-radius:5px;
background:#10171b;
box-shadow:
0 0 20px
rgba(255,90,31,.18);
box-sizing:border-box;
}
#bentoStudioThemeStage
.bs-elite-cover-v3 img{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
object-fit:cover;
object-position:
center center;
}
#bentoStudioThemeStage
.bs-elite-cover-fallback-v3{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:
var(--elite-accent);
font-size:38px;
font-weight:900;
}
/*
Full 150px vinyl record.
Roughly half of the disc remains visible beside the cover,
matching the approved mockup geometry.
*/
#bentoStudioThemeStage
.bs-elite-vinyl-v3{
position:absolute;
z-index:2;
left:90px;
top:5px;
width:150px;
height:150px;
border-radius:50%;
background:
radial-gradient(
circle at center,
#080b0e 0 4px,
#ff5a1f 5px 11px,
#12171c 12px 21px,
#080b0e 22px 24px,
transparent 25px
),
repeating-radial-gradient(
circle at center,
#070a0d 0 2px,
#151a1f 3px 4px,
#080b0e 5px 7px,
#191e23 8px 9px
);
box-shadow:
inset 0 0 0 1px
rgba(255,255,255,.08),
0 5px 24px
rgba(0,0,0,.75);
}
#bentoStudioThemeStage
.bs-elite-vinyl-v3::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:42px;
height:42px;
transform:
translate(
-50%,
-50%
);
border-radius:50%;
background:
radial-gradient(
circle,
#090d11 0 4px,
var(--elite-accent) 5px 9px,
#171c21 10px 20px,
#080b0e 21px
);
}
#bentoStudioThemeStage
.bs-elite-vinyl-v3 span{
position:absolute;
z-index:3;
left:50%;
top:50%;
width:5px;
height:5px;
transform:
translate(
-50%,
-50%
);
border-radius:50%;
background:#050709;
}
/*
COPY
*/
#bentoStudioThemeStage
.bs-elite-spotlight-copy-v3{
position:relative;
z-index:3;
min-width:0;
}
#bentoStudioThemeStage
.bs-elite-spotlight-kicker-v3{
margin-bottom:5px;
color:
var(--elite-accent);
font-size:9px;
font-weight:900;
letter-spacing:.14em;
}
#bentoStudioThemeStage
.bs-elite-spotlight-copy-v3 h2{
margin:
0 0 2px;
color:#fff;
font-size:31px;
line-height:1;
}
#bentoStudioThemeStage
.bs-elite-spotlight-artist-v3{
margin-bottom:5px;
color:#d9e0e4;
font-size:10px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-copy-v3 p{
max-width:430px;
margin:
0 0 7px;
color:#f1f4f5;
font-size:10px;
line-height:1.35;
}
#bentoStudioThemeStage
.bs-elite-spotlight-tags-v3{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-bottom:8px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-tags-v3 span{
padding:
4px 8px;
border:
1px solid
rgba(255,255,255,.17);
border-radius:5px;
background:
rgba(5,10,13,.78);
color:#e5eaec;
font-size:8px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-tags-v3
.exclusive{
color:#ff7959;
border-color:
rgba(255,90,31,.48);
background:
rgba(255,90,31,.12);
}
#bentoStudioThemeStage
.bs-elite-spotlight-actions-v3{
display:flex;
align-items:center;
gap:8px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-actions-v3 button{
min-width:118px;
min-height:36px;
padding:
0 18px;
border:
1px solid
var(--elite-accent);
border-radius:5px;
background:
var(--elite-accent);
color:#fff;
font-family:inherit;
font-size:9px;
font-weight:900;
cursor:pointer;
}
#bentoStudioThemeStage
.bs-elite-spotlight-actions-v3
.secondary{
min-width:132px;
border-color:#3b474d;
background:
rgba(6,11,14,.88);
}
#bentoStudioThemeStage
.bs-elite-only-v3{
position:absolute;
z-index:5;
right:15px;
top:13px;
color:#fff;
font-size:7px;
font-weight:900;
letter-spacing:.1em;
}
#bentoStudioThemeStage
.bs-elite-only-v3 strong{
color:
var(--elite-accent);
}
/*
Slider navigation.
*/
#bentoStudioThemeStage
.bs-elite-spotlight-dots-v3{
position:absolute;
z-index:8;
right:15px;
bottom:8px;
display:flex;
align-items:center;
gap:5px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-dots-v3 button{
width:18px;
height:5px;
padding:0;
border:0;
border-radius:999px;
background:
rgba(128,140,148,.45);
cursor:pointer;
}
#bentoStudioThemeStage
.bs-elite-spotlight-dots-v3
button.is-active{
width:26px;
background:
var(--elite-accent);
}
/*
MOBILE
*/
@media(max-width:700px){
#bentoStudioThemeStage
.bs-elite-spotlight-slider-v3{
height:430px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-slide-v3{
grid-template-columns:1fr;
align-content:start;
gap:10px;
padding:14px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-art-v3{
width:225px;
height:160px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-copy-v3 h2{
font-size:28px;
}
#bentoStudioThemeStage
.bs-elite-spotlight-dots-v3{
right:12px;
bottom:8px;
}
}
/* END OSBEATS 20260911 BENTO ELITE SPOTLIGHT SLIDES V3 STOREFRONT */
/* OSBEATS 20260912 FEATURED DROP VINYL ASSET CSS */
#bentoStudioThemeStage .bs-elite-spotlight-art-v3{
position:relative;
overflow:hidden;
}
#bentoStudioThemeStage .bs-featured-drop-vinyl-v1{
position:absolute;
top:50%;
left:69px;
width:148px;
height:148px;
transform:translateY(-50%);
display:block;
object-fit:contain;
aspect-ratio:1 / 1;
border-radius:50%;
z-index:1;
pointer-events:none;
user-select:none;
}
#bentoStudioThemeStage .bs-elite-cover-v3{
position:relative;
z-index:2;
}
#bentoStudioThemeStage .bs-elite-cover-v3 img,
#bentoStudioThemeStage .bs-elite-cover-v3 .bs-elite-cover-image-v3{
position:relative;
z-index:2;
}
@media (max-width: 900px){
#bentoStudioThemeStage .bs-featured-drop-vinyl-v1{
left:65px;
width:140px;
height:140px;
}
}
/* END OSBEATS 20260912 FEATURED DROP VINYL ASSET CSS */
/* =========================================================
OSBEATS 20260912 EDITORIAL WAVE FUNCTIONAL PASS V1
EDITORIAL ONLY
========================================================= */
/* ---------------------------------------------------------
DESKTOP — APPROVED MOCKUP PROPORTIONS
Approved reference keeps:
HERO | FEATURED RELEASE | WIDE RIGHT RAIL
--------------------------------------------------------- */
@media(min-width:1401px){
body.storefront-theme-editorial-wave
.ew-main{
grid-template-columns:
minmax(0,1fr)
245px
360px !important;
}
body.storefront-theme-editorial-wave
.ew-right-rail{
width:360px !important;
min-width:360px !important;
}
body.storefront-theme-editorial-wave
.ew-stats-panel > div:last-child{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:0 !important;
}
body.storefront-theme-editorial-wave
.ew-stats-panel article{
min-width:0;
padding:0 9px;
border-right:
1px solid #292929;
}
body.storefront-theme-editorial-wave
.ew-stats-panel article:first-child{
padding-left:0;
}
body.storefront-theme-editorial-wave
.ew-stats-panel article:last-child{
padding-right:0;
border-right:0;
}
body.storefront-theme-editorial-wave
.ew-now-playing{
grid-template-columns:
85px
45px
150px
34px
minmax(160px,1fr)
72px
105px !important;
}
}
/* ---------------------------------------------------------
NOW PLAYING PLAY / PAUSE
--------------------------------------------------------- */
body.storefront-theme-editorial-wave
.ew-now-play{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:
1px solid #a92d30;
border-radius:
50%;
background:
#a92d30;
color:#fff;
font-size:12px;
font-weight:900;
cursor:pointer;
}
body.storefront-theme-editorial-wave
.ew-now-play:hover{
background:#c4383c;
}
body.storefront-theme-editorial-wave
.ew-wave,
body.storefront-theme-editorial-wave
.ew-now-wave{
cursor:pointer;
}
body.storefront-theme-editorial-wave
.ew-wave.is-playing,
body.storefront-theme-editorial-wave
.ew-now-wave.is-playing{
border-color:
#d33b40 !important;
}
body.storefront-theme-editorial-wave
.ew-track-row.is-playing{
background:
#111313 !important;
}
/* Existing smaller-screen Editorial layout remains authoritative. */
@media(max-width:1400px) and (min-width:651px){
body.storefront-theme-editorial-wave
.ew-now-playing{
grid-template-columns:
75px
44px
minmax(120px,1fr)
34px
minmax(140px,1fr)
90px !important;
}
}
@media(max-width:650px){
body.storefront-theme-editorial-wave
.ew-now-play{
display:none !important;
}
}
/* END OSBEATS 20260912 EDITORIAL WAVE FUNCTIONAL PASS V1 */
/* =========================================================
OSBEATS 20260912 EDITORIAL EXACT MINI WAVEFORM V1
EDITORIAL WAVE ONLY.
Uses exact existing Mini Storefront waveform colors/design.
========================================================= */
/* waveform buttons remain in their existing Editorial slots */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave{
display:
block !important;
width:
100% !important;
padding:
0 !important;
border:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
background:
transparent !important;
overflow:
hidden !important;
cursor:
pointer !important;
}
/* exact Mini waveform fills the existing Editorial height */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave
.osbeats-real-waveform,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave
.osbeats-real-waveform{
position:
relative !important;
display:
block !important;
width:
100% !important;
height:
100% !important;
min-width:
0 !important;
overflow:
hidden !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
background:
transparent !important;
}
/* exact Mini SVG geometry */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave
.osbeats-real-wave-svg,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave
.osbeats-real-wave-svg{
position:
absolute !important;
inset:
0 !important;
display:
block !important;
width:
100% !important;
height:
100% !important;
shape-rendering:
geometricPrecision !important;
}
/* exact Mini neutral idle waveform */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave
.osbeats-real-wave-gray path,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave
.osbeats-real-wave-gray path{
fill:
#555b65 !important;
stroke:
none !important;
}
/* exact Mini playback-progress color */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave
.osbeats-real-wave-red path,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave
.osbeats-real-wave-red path{
fill:
#73070B !important;
stroke:
none !important;
}
/*
Exact Mini progress behavior:
red copy occupies the same complete waveform and is revealed
only through clip-path as playback advances.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave
.osbeats-real-wave-progress,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave
.osbeats-real-wave-progress{
position:
absolute !important;
inset:
0 !important;
width:
100% !important;
height:
100% !important;
overflow:
visible !important;
pointer-events:
none !important;
z-index:
2 !important;
clip-path:
inset(0 100% 0 0);
-webkit-clip-path:
inset(0 100% 0 0);
}
/* red SVG stays exactly aligned with neutral SVG */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave
.osbeats-real-wave-progress
.osbeats-real-wave-svg,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave
.osbeats-real-wave-progress
.osbeats-real-wave-svg{
position:
absolute !important;
inset:
0 !important;
width:
100% !important;
min-width:
100% !important;
max-width:
none !important;
height:
100% !important;
}
/* exact Mini subtle center axis */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-wave
.osbeats-real-waveform::after,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-wave
.osbeats-real-waveform::after{
content:
"" !important;
position:
absolute !important;
left:
0 !important;
right:
0 !important;
top:
50% !important;
height:
1px !important;
transform:
translateY(-.5px) !important;
background:
rgba(255,255,255,.035) !important;
pointer-events:
none !important;
z-index:
3 !important;
}
/* END OSBEATS 20260912 EDITORIAL EXACT MINI WAVEFORM V1 */
/* =========================================================
OSBEATS 20260912 EDITORIAL SOCIAL ICONS V1
EDITORIAL WAVE ONLY.
========================================================= */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-socials{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
12px !important;
min-height:
30px;
margin:
18px 0 !important;
}
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-socials a,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-social-placeholder{
width:
26px;
height:
26px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
flex:
0 0 26px;
color:
#a8a7a2 !important;
border:
0;
background:
transparent;
text-decoration:
none;
}
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-socials svg{
width:
15px;
height:
15px;
display:
block;
}
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-socials a:hover{
color:
#ffffff !important;
}
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-social-placeholder{
cursor:
default;
}
/* END OSBEATS 20260912 EDITORIAL SOCIAL ICONS V1 */
/* =========================================================
OSBEATS 20260912 EDITORIAL BUY LICENSE DIRECT V1
BUY LICENSE BUTTON ONLY.
No visual redesign.
========================================================= */
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-now-playing
.ew-buy-license{
position:
relative !important;
z-index:
20 !important;
pointer-events:
auto !important;
cursor:
pointer !important;
}
/* END OSBEATS 20260912 EDITORIAL BUY LICENSE DIRECT V1 */
/* =========================================================
OSBEATS 20260912
EDITORIAL PROTECTED LICENSING MODAL VISIBILITY V1
Same protected shared-popup behavior already used by
Bento Studio.
EDITORIAL WAVE ONLY.
========================================================= */
body.storefront-theme-editorial-wave
#customThemeFeatureModal:not([hidden]){
display:
flex !important;
position:
fixed !important;
inset:
0 !important;
align-items:
center !important;
justify-content:
center !important;
visibility:
visible !important;
opacity:
1 !important;
pointer-events:
auto !important;
z-index:
2147483000 !important;
}
body.storefront-theme-editorial-wave
#customThemeFeatureModal:not([hidden])
.custom-theme-feature-backdrop{
pointer-events:
auto !important;
}
body.storefront-theme-editorial-wave
#customThemeFeatureModal:not([hidden])
.custom-theme-feature-dialog{
position:
relative !important;
z-index:
2 !important;
pointer-events:
auto !important;
}
/* END OSBEATS 20260912
EDITORIAL PROTECTED LICENSING MODAL VISIBILITY V1 */
/* =========================================================
OSBEATS 20260912
EDITORIAL LICENSING MODAL PALETTE V2
Editorial Wave only.
Black / white / red.
Shared native licensing-modal geometry.
========================================================= */
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.custom-theme-feature-backdrop{
background:
rgba(0,0,0,.84) !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.custom-theme-feature-dialog{
background:
#0b0f12 !important;
border:
1px solid #3a4146 !important;
border-top:
3px solid #ef2f3a !important;
color:
#ffffff !important;
box-shadow:
0 24px 70px
rgba(0,0,0,.58) !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.custom-theme-feature-kicker{
color:
#ef2f3a !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.custom-theme-feature-dialog h2{
color:
#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.custom-theme-feature-close{
background:
#11171b !important;
border:
1px solid #485157 !important;
color:
#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.custom-theme-feature-body{
color:
#d8dde0 !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-track-heading{
border-bottom-color:
#32393e !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-track-heading strong{
color:
#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-track-heading span{
color:
#a7b0b6 !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-grid article{
background:
#11171b !important;
border:
1px solid #343d42 !important;
color:
#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-grid article > span{
color:
#ef2f3a !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-grid article > strong,
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-option-title{
color:
#ffffff !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-grid article p{
color:
#b3bcc1 !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-grid article button{
background:
#b82029 !important;
border:
1px solid #e13a43 !important;
color:
#ffffff !important;
font-weight:
800 !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.theme-license-grid article button:hover{
background:
#d52a34 !important;
border-color:
#ef4650 !important;
}
/* END OSBEATS 20260912
EDITORIAL LICENSING MODAL PALETTE V2 */
/* =========================================================
OSBEATS 20260913
EDITORIAL LEFT MENU V3 VISUAL STATE
========================================================= */
#editorialWaveThemeStage
.ew-menu-v3-active{
background:
rgba(180,25,34,.22) !important;
border-left:
3px solid #ef2f3a !important;
color:
#ffffff !important;
}
#editorialWaveThemeStage
#ewTracks.ew-menu-v3-target{
outline:
1px solid
rgba(239,47,58,.60);
outline-offset:
4px;
}
/* About popup content */
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.ew-about-modal-content{
max-width:
760px;
color:
#d8dde0;
line-height:
1.7;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.ew-about-modal-content p{
margin:
0 0 24px;
color:
#d8dde0 !important;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.ew-about-modal-meta{
display:
flex;
gap:
12px;
padding-top:
16px;
border-top:
1px solid #343d42;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.ew-about-modal-meta strong{
color:
#ef2f3a;
}
#customThemeFeatureModal[
data-storefront-theme="editorial-wave"
]
.ew-about-modal-meta span{
color:
#ffffff;
}
/* END EDITORIAL LEFT MENU V3 VISUAL STATE */
/* =========================================================
OSBEATS 20260913
EDITORIAL LEFT RAIL FINAL V4 STYLES
========================================================= */
#editorialWaveThemeStage
.ew-menu-v4-item{
width:
100%;
display:
flex !important;
align-items:
center;
gap:
9px;
text-align:
left;
text-decoration:
none !important;
cursor:
pointer;
}
#editorialWaveThemeStage
.ew-menu-v4-icon{
width:
14px;
flex:
0 0 14px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
color:
#ef2f3a;
font-size:
11px;
}
#editorialWaveThemeStage
.ew-owner-tools-label{
margin:
16px 0 6px;
padding:
12px 12px 6px;
border-top:
1px solid #2d3236;
color:
#737c82;
font-size:
9px;
font-weight:
800;
letter-spacing:
.15em;
}
/* END OSBEATS 20260913
EDITORIAL LEFT RAIL FINAL V4 STYLES */
/* =========================================================
OSBEATS 20260913
OSBEATS STOREFRONT ICON STANDARD CSS V1
Icon geometry stays identical across themes.
Theme colors continue to inherit through currentColor.
========================================================= */
.osb-storefront-icon-wrap{
width:
16px;
height:
16px;
flex:
0 0 16px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
color:
currentColor;
}
.osb-storefront-icon{
width:
15px;
height:
15px;
display:
block;
fill:
none;
stroke:
currentColor;
stroke-width:
1.8;
stroke-linecap:
round;
stroke-linejoin:
round;
}
.osb-storefront-nav-label{
min-width:
0;
display:
inline-block;
}
/*
Editorial Wave uses exactly the same icon geometry as
every other storefront theme. Only theme presentation
such as color is allowed to differ.
*/
#editorialWaveThemeStage
[data-osbeats-storefront-icon]{
display:
flex !important;
align-items:
center !important;
gap:
9px !important;
}
#editorialWaveThemeStage
[data-osbeats-storefront-icon]
.osb-storefront-icon-wrap{
color:
currentColor;
}
/* END OSBEATS 20260913
OSBEATS STOREFRONT ICON STANDARD CSS V1 */
/* =========================================================
OSBEATS 20260913
STANDARD WEBSITE ICON VISIBILITY V1
========================================================= */
#editorialWaveThemeStage
.ew-standard-website-link{
color:
#b9c1c6 !important;
display:
inline-flex !important;
align-items:
center;
justify-content:
center;
}
#editorialWaveThemeStage
.ew-standard-website-link
.osb-storefront-icon-wrap{
color:
#b9c1c6 !important;
}
#editorialWaveThemeStage
.ew-standard-website-link:hover,
#editorialWaveThemeStage
.ew-standard-website-link:hover
.osb-storefront-icon-wrap{
color:
#ffffff !important;
}
#editorialWaveThemeStage
.ew-standard-website-link
.osb-storefront-icon{
fill:
none !important;
stroke:
currentColor !important;
}
/* END OSBEATS 20260913
STANDARD WEBSITE ICON VISIBILITY V1 */
/* =========================================================
OSBEATS 20260913
EDITORIAL ACTIVE TAB TEXT FIX V1
Active/highlighted Editorial menu items keep:
- red accent/background
- WHITE text for readability
Same rule applies to standardized storefront labels.
========================================================= */
#editorialWaveThemeStage
.active,
#editorialWaveThemeStage
.ew-menu-v3-active,
#editorialWaveThemeStage
[aria-current="page"]{
color:
#ffffff !important;
}
#editorialWaveThemeStage
.active
.osb-storefront-nav-label,
#editorialWaveThemeStage
.ew-menu-v3-active
.osb-storefront-nav-label,
#editorialWaveThemeStage
[aria-current="page"]
.osb-storefront-nav-label{
color:
#ffffff !important;
}
/*
Keep standardized icons readable too.
*/
#editorialWaveThemeStage
.active
.osb-storefront-icon-wrap,
#editorialWaveThemeStage
.ew-menu-v3-active
.osb-storefront-icon-wrap,
#editorialWaveThemeStage
[aria-current="page"]
.osb-storefront-icon-wrap{
color:
#ffffff !important;
}
/* END OSBEATS 20260913
EDITORIAL ACTIVE TAB TEXT FIX V1 */
/* =========================================================
OSBEATS 20260913
EDITORIAL FEATURED BUNDLE LINK STYLE V1
========================================================= */
#editorialWaveThemeStage
.ew-bundle-link{
display:
inline-flex;
align-items:
center;
gap:
8px;
color:
#d52a34 !important;
font-weight:
800;
text-decoration:
none;
cursor:
pointer;
}
#editorialWaveThemeStage
.ew-bundle-link:hover{
color:
#ffffff !important;
text-decoration:
underline;
}
#editorialWaveThemeStage
.ew-bundle-link:focus-visible{
outline:
2px solid #ef2f3a;
outline-offset:
4px;
}
/* END OSBEATS 20260913
EDITORIAL FEATURED BUNDLE LINK STYLE V1 */
/* =========================================================
OSBEATS 20260913
UNIVERSAL STOREFRONT MENU STANDARD CSS V1
========================================================= */
body{
--osb-menu-accent:
#ef2f3a;
--osb-menu-active-text:
#ffffff;
}
/* Neon Pulse */
body.storefront-theme-neon-pulse{
--osb-menu-accent:
#bd28ff;
--osb-menu-active-text:
#ffffff;
}
/* Midnight Minimal */
body.storefront-theme-midnight-minimal{
--osb-menu-accent:
#c89548;
--osb-menu-active-text:
#111111;
}
/* Aurora Wave */
body.storefront-theme-aurora-wave{
--osb-menu-accent:
#19e5ed;
--osb-menu-active-text:
#ffffff;
}
/* Signal Grid */
body.storefront-theme-signal-grid{
--osb-menu-accent:
#6eff8c;
--osb-menu-active-text:
#ffffff;
}
/* Crimson Luxe */
body.storefront-theme-crimson-luxe{
--osb-menu-accent:
#ef4651;
--osb-menu-active-text:
#ffffff;
}
/* Bento Studio */
body.storefront-theme-bento-studio{
--osb-menu-accent:
#ff5a20;
--osb-menu-active-text:
#ffffff;
}
/* Editorial Wave */
body.storefront-theme-editorial-wave{
--osb-menu-accent:
#ef2f3a;
--osb-menu-active-text:
#ffffff;
}
/* ---------------------------------------------------------
Remove old theme-specific menu controls only after the
canonical menu has been created.
--------------------------------------------------------- */
.osb-canonical-menu-host
.osb-canonical-legacy-hidden{
display:
none !important;
}
/* ---------------------------------------------------------
Shared menu geometry
--------------------------------------------------------- */
.osb-canonical-menu{
width:
100%;
color:
inherit;
}
.osb-canonical-public{
display:
flex;
}
.osb-canonical-menu-item{
appearance:
none;
-webkit-appearance:
none;
border:
0;
background:
transparent;
color:
inherit;
font:
inherit;
text-decoration:
none;
cursor:
pointer;
display:
inline-flex;
align-items:
center;
justify-content:
flex-start;
gap:
8px;
min-width:
0;
}
.osb-canonical-menu-icon{
width:
16px;
height:
16px;
flex:
0 0 16px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
color:
currentColor;
}
.osb-canonical-menu-icon
.osb-storefront-icon{
width:
15px;
height:
15px;
fill:
none;
stroke:
currentColor;
stroke-width:
1.8;
stroke-linecap:
round;
stroke-linejoin:
round;
}
.osb-canonical-menu-label{
white-space:
nowrap;
}
/* ---------------------------------------------------------
Standard/default horizontal storefront menus
--------------------------------------------------------- */
.osb-canonical-menu--horizontal
.osb-canonical-public{
flex-direction:
row;
align-items:
stretch;
gap:
2px;
flex-wrap:
wrap;
}
.osb-canonical-menu--horizontal
.osb-canonical-menu-item{
min-height:
46px;
padding:
0 14px;
border-bottom:
2px solid
transparent;
}
.osb-canonical-menu--horizontal
.osb-canonical-menu-item:hover{
color:
var(
--osb-menu-accent
);
}
.osb-canonical-menu--horizontal
.osb-canonical-public
.osb-canonical-menu-item.active{
border-bottom-color:
var(
--osb-menu-accent
);
color:
var(
--osb-menu-accent
);
}
/*
Owner tools use their own second row on horizontal themes
instead of being mixed with public-facing navigation.
*/
.osb-canonical-menu--horizontal
.osb-canonical-owner{
width:
100%;
display:
flex;
align-items:
center;
gap:
4px;
flex-wrap:
wrap;
padding:
7px 10px;
border-top:
1px solid
rgba(127,127,127,.25);
}
.osb-canonical-menu--horizontal
.osb-canonical-owner-label{
margin-right:
6px;
font-size:
9px;
font-weight:
800;
letter-spacing:
.14em;
opacity:
.62;
}
.osb-canonical-menu--horizontal
.osb-canonical-owner
.osb-canonical-menu-item{
min-height:
30px;
padding:
4px 10px;
}
/* ---------------------------------------------------------
Bento Studio + Editorial Wave vertical menus
--------------------------------------------------------- */
.osb-canonical-menu--vertical
.osb-canonical-public{
flex-direction:
column;
gap:
2px;
}
.osb-canonical-menu--vertical
.osb-canonical-menu-item{
width:
100%;
min-height:
38px;
padding:
8px 12px;
border-left:
3px solid
transparent;
text-align:
left;
}
.osb-canonical-menu--vertical
.osb-canonical-menu-item:hover{
color:
var(
--osb-menu-accent
);
}
.osb-canonical-menu--vertical
.osb-canonical-public
.osb-canonical-menu-item.active{
border-left-color:
var(
--osb-menu-accent
);
background:
color-mix(
in srgb,
var(--osb-menu-accent) 16%,
transparent
);
color:
var(
--osb-menu-active-text
) !important;
}
.osb-canonical-menu--vertical
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
.osb-canonical-menu--vertical
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon{
color:
var(
--osb-menu-active-text
) !important;
}
/* Owner tools remain visually separate from visitor actions */
.osb-canonical-menu--vertical
.osb-canonical-owner{
margin-top:
14px;
padding-top:
10px;
border-top:
1px solid
rgba(127,127,127,.30);
display:
flex;
flex-direction:
column;
gap:
2px;
}
.osb-canonical-menu--vertical
.osb-canonical-owner-label{
padding:
4px 12px 6px;
font-size:
9px;
font-weight:
800;
letter-spacing:
.15em;
opacity:
.65;
}
/* ---------------------------------------------------------
Small screens
--------------------------------------------------------- */
@media(max-width:720px){
.osb-canonical-menu--horizontal
.osb-canonical-public{
display:
grid;
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
.osb-canonical-menu--horizontal
.osb-canonical-menu-item{
width:
100%;
padding:
9px 10px;
min-height:
40px;
}
.osb-canonical-menu--horizontal
.osb-canonical-owner{
display:
grid;
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
.osb-canonical-menu--horizontal
.osb-canonical-owner-label{
grid-column:
1 / -1;
}
}
/* END OSBEATS 20260913
UNIVERSAL STOREFRONT MENU STANDARD CSS V1 */
/* =========================================================
OSBEATS 20260913
UNIVERSAL MENU HOST REPAIR CSS V3
========================================================= */
.osb-menu-v3-hidden,
.osb-menu-v3-empty-host{
display:
none !important;
}
/* =========================================================
DEFAULT + STANDARD THEMES
========================================================= */
.osb-menu-v3-real-host{
width:
100% !important;
max-width:
none !important;
}
.osb-menu-v3-real-host
> .osb-canonical-menu{
width:
100% !important;
max-width:
none !important;
margin:
0 !important;
}
.osb-menu-v3-standard
.osb-canonical-public{
width:
100% !important;
display:
flex !important;
flex-direction:
row !important;
flex-wrap:
nowrap !important;
align-items:
stretch !important;
gap:
0 !important;
overflow-x:
auto;
scrollbar-width:
thin;
}
.osb-menu-v3-standard
.osb-canonical-public
.osb-canonical-menu-item{
flex:
0 0 auto !important;
width:
auto !important;
min-width:
auto !important;
min-height:
52px !important;
padding:
0 14px !important;
white-space:
nowrap !important;
}
.osb-menu-v3-standard
.osb-canonical-owner{
width:
100% !important;
display:
flex !important;
flex-direction:
row !important;
flex-wrap:
nowrap !important;
align-items:
center !important;
gap:
4px !important;
padding:
7px 14px !important;
overflow-x:
auto;
}
.osb-menu-v3-standard
.osb-canonical-owner
.osb-canonical-menu-item{
width:
auto !important;
min-height:
34px !important;
flex:
0 0 auto !important;
padding:
4px 10px !important;
}
/* =========================================================
DEFAULT STOREFRONT
========================================================= */
.osb-menu-v3-default{
color:
#111111 !important;
--osb-menu-accent:
#ef2f3a;
--osb-menu-active-text:
#111111;
}
.osb-menu-v3-default
.osb-canonical-menu-item,
.osb-menu-v3-default
.osb-canonical-menu-icon,
.osb-menu-v3-default
.osb-canonical-menu-label{
color:
#111111 !important;
}
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item:hover{
color:
#c91f29 !important;
}
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item.active,
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
linear-gradient(
90deg,
#090909 0%,
#250507 48%,
#4f0a10 100%
) !important;
color:
#ffffff !important;
border-bottom-color:
#ef2f3a !important;
}
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-label{
color:
#ef2f3a !important;
}
.osb-menu-v3-default
.osb-canonical-owner{
border-top:
1px solid #d0d0d0 !important;
color:
#111111 !important;
}
.osb-menu-v3-default
.osb-canonical-owner-label{
color:
#666666 !important;
opacity:
1 !important;
}
/* =========================================================
SMALL SCREENS
Desktop stays one row.
Mobile may scroll horizontally rather than creating
random multi-row navigation.
========================================================= */
@media(max-width:720px){
.osb-menu-v3-standard
.osb-canonical-public{
display:
flex !important;
grid-template-columns:
none !important;
flex-wrap:
nowrap !important;
overflow-x:
auto !important;
}
.osb-menu-v3-standard
.osb-canonical-owner{
display:
flex !important;
grid-template-columns:
none !important;
flex-wrap:
nowrap !important;
}
.osb-menu-v3-standard
.osb-canonical-owner-label{
grid-column:
auto !important;
flex:
0 0 auto;
}
}
/* OSBEATS DEFAULT ACTIVE CHILD COLOR FINAL */
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon{
color:
#ffffff !important;
}
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-storefront-icon,
.osb-menu-v3-default
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-storefront-icon{
color:
#ffffff !important;
stroke:
#ffffff !important;
}
/* END OSBEATS 20260913
UNIVERSAL MENU HOST REPAIR CSS V3 */
/* =========================================================
OSBEATS 20260913
STOREFRONT MENU POLICY CSS V2
========================================================= */
/*
HOME IS NO LONGER A STOREFRONT MENU ITEM.
Safety rule in case stale markup survives a render.
*/
[data-osb-canonical-menu]
[data-osb-canonical-action="home"]{
display:
none !important;
}
/*
DEFAULT PROFILE:
Owner utilities live in the upper profile owner controls,
never as a second storefront navigation row.
*/
.osb-menu-v3-default
.osb-canonical-owner,
.osb-default-canonical-menu
.osb-canonical-owner{
display:
none !important;
}
/* =========================================================
DEFAULT PROFILE OWNER TOOLBAR
========================================================= */
.osb-default-owner-toolbar{
display:
flex;
flex-direction:
column;
gap:
8px;
}
.osb-default-owner-action-standard{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
8px !important;
}
.osb-default-owner-action-icon{
width:
16px;
height:
16px;
flex:
0 0 16px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
}
.osb-default-owner-action-icon
.osb-storefront-icon{
width:
15px;
height:
15px;
fill:
none;
stroke:
currentColor;
stroke-width:
1.8;
stroke-linecap:
round;
stroke-linejoin:
round;
}
/* END OSBEATS 20260913
STOREFRONT MENU POLICY CSS V2 */
/* =========================================================
OSBEATS 20260913
OWNER STUDIO CUSTOM ICONS V1
One icon only per button.
Creator Studio:
custom studio/canvas icon.
Mastering Studio:
custom waveform/mastering icon.
========================================================= */
/*
Remove legacy decorative/pseudo icons that were causing
two icons to appear beside the new standardized SVG.
*/
.artist-actions
#ownerStudio::before,
.artist-actions
#ownerStudio::after,
.artist-actions
#ownerMastering::before,
.artist-actions
#ownerMastering::after{
content:
none !important;
display:
none !important;
}
/*
Prevent inherited icon/background artwork from adding a
second visual icon.
*/
.artist-actions
#ownerStudio,
.artist-actions
#ownerMastering{
background-image:
none !important;
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
9px !important;
}
.owner-custom-action-icon{
width:
18px;
height:
18px;
flex:
0 0 18px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
color:
currentColor;
}
.owner-custom-action-icon svg{
width:
17px;
height:
17px;
display:
block;
fill:
none;
stroke:
currentColor;
stroke-width:
1.7;
stroke-linecap:
round;
stroke-linejoin:
round;
}
/* END OSBEATS 20260913
OWNER STUDIO CUSTOM ICONS V1 */
/* =========================================================
OSBEATS 20260913
PROFILE SOCIAL ICONS 2026 CSS V2
Icons only.
No square button shell.
No border.
No background.
No box shadow.
========================================================= */
#socialLinks{
display:
flex;
align-items:
center;
gap:
16px !important;
}
#socialLinks a{
width:
auto !important;
min-width:
0 !important;
height:
auto !important;
min-height:
0 !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
border-radius:
0 !important;
outline-offset:
4px;
background:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
text-decoration:
none !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
color:
#ffffff !important;
line-height:
1 !important;
cursor:
pointer;
transition:
opacity .16s ease,
transform .16s ease;
}
/*
Eliminate any inherited decorative square/button layers.
*/
#socialLinks a::before,
#socialLinks a::after{
content:
none !important;
display:
none !important;
}
#socialLinks a:hover{
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
opacity:
.76;
transform:
translateY(-1px);
}
#socialLinks a:focus-visible{
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
outline:
1px solid currentColor;
outline-offset:
4px;
}
.profile-social-icon-only{
width:
19px;
height:
19px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
color:
currentColor;
pointer-events:
none;
}
.profile-social-icon-only svg{
width:
19px;
height:
19px;
display:
block;
overflow:
visible;
fill:
none;
stroke:
currentColor;
stroke-width:
1.8;
stroke-linecap:
round;
stroke-linejoin:
round;
}
/*
Facebook's current standalone "f" reads better filled.
*/
#socialLinks
[data-social-platform="facebook"]
.profile-social-icon-only svg{
fill:
currentColor;
stroke:
none;
}
/* END OSBEATS 20260913
PROFILE SOCIAL ICONS 2026 CSS V2 */
/* =========================================================
OSBEATS 20260913
NEON PULSE CANONICAL TAB HOST FIX V4
IMPORTANT:
The canonical OSBeats menu is hosted INSIDE .np-tabs.
Therefore:
- KEEP .np-tabs visible
- HIDE only Neon Pulse's original direct buttons
- KEEP [data-osb-canonical-menu] visible
========================================================= */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs{
display:
flex !important;
visibility:
visible !important;
height:
auto !important;
max-height:
none !important;
overflow:
visible !important;
align-items:
stretch !important;
width:
100% !important;
}
/*
Hide ONLY the five original Neon native tabs:
Music / About / Playlists / Photos / Store.
*/
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
> button{
display:
none !important;
}
/*
Prevent the old native purple underline from surviving.
*/
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
> button::before,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
> button::after{
content:
none !important;
display:
none !important;
}
/*
Explicitly preserve the ONE universal storefront menu
living inside the Neon tab host.
*/
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
> [data-osb-canonical-menu]{
display:
block !important;
visibility:
visible !important;
width:
100% !important;
max-width:
none !important;
flex:
1 1 100% !important;
margin:
0 !important;
}
/*
Keep one clean horizontal public row.
*/
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
[data-osb-canonical-menu]
.osb-canonical-public{
display:
flex !important;
flex-direction:
row !important;
flex-wrap:
nowrap !important;
align-items:
stretch !important;
width:
100% !important;
overflow:
visible !important;
}
/* END OSBEATS 20260913
NEON PULSE CANONICAL TAB HOST FIX V4 */
/* =========================================================
OSBEATS 20260913
NEON PULSE OWNER TOOLS DROPDOWN CSS V2
========================================================= */
body.storefront-theme-neon-pulse
.osb-neon-owner-dropdown-v2{
position:
relative;
flex:
0 0 auto;
display:
flex;
align-items:
stretch;
z-index:
200;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-trigger-v2{
height:
100% !important;
white-space:
nowrap !important;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-trigger-v2:hover,
body.storefront-theme-neon-pulse
.osb-neon-owner-dropdown-v2.open
.osb-neon-owner-trigger-v2{
color:
#ffffff !important;
background:
rgba(189,40,255,.16) !important;
border-bottom-color:
#bd28ff !important;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-chevron-v2{
margin-left:
3px;
font-size:
10px;
opacity:
.8;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-panel-v2{
position:
absolute !important;
top:
calc(100% + 6px);
right:
0;
width:
220px !important;
min-width:
220px !important;
margin:
0 !important;
padding:
7px !important;
display:
none !important;
flex-direction:
column !important;
gap:
3px !important;
background:
#07111f !important;
border:
1px solid #7c36ff !important;
border-radius:
4px;
box-shadow:
0 18px 45px
rgba(0,0,0,.58);
z-index:
1000;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-dropdown-v2.open
.osb-neon-owner-panel-v2{
display:
flex !important;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-panel-v2
.osb-canonical-menu-item{
width:
100% !important;
min-height:
40px !important;
padding:
9px 11px !important;
justify-content:
flex-start !important;
border:
0 !important;
color:
#ffffff !important;
background:
transparent !important;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-panel-v2
.osb-canonical-menu-item:hover{
background:
rgba(189,40,255,.18) !important;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-panel-v2
.osb-canonical-menu-icon{
color:
#bd28ff !important;
}
/* END OSBEATS 20260913
NEON PULSE OWNER TOOLS DROPDOWN CSS V2 */
/* =========================================================
OSBEATS 20260913
NEON PULSE SINGLE ACTIVE INDICATOR V5
ROOT CAUSE:
The canonical menu now lives inside .np-tabs.
Original Neon CSS:
.np-tabs button.active::after
therefore also matched canonical active buttons and drew
a SECOND purple line.
Disable only the inherited Neon pseudo indicator on the
canonical menu and keep the canonical border indicator.
========================================================= */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-menu-item::before,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-menu-item::after{
content:
none !important;
display:
none !important;
background:
none !important;
width:
0 !important;
height:
0 !important;
}
/*
ONE active indicator only.
*/
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
border-top:
0 !important;
border-left:
0 !important;
border-right:
0 !important;
border-bottom:
2px solid #bd28ff !important;
box-shadow:
none !important;
}
/*
Non-active items have no purple bottom decoration.
*/
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:not(.active):not([aria-current="page"]){
border-bottom-color:
transparent !important;
box-shadow:
none !important;
}
/* END OSBEATS 20260913
NEON PULSE SINGLE ACTIVE INDICATOR V5 */
/* =========================================================
OSBEATS 20260913
STANDARD STOREFRONT MENU INTERACTION V1
SHARED MENU RULE FOR STANDARD THEMES
Same interaction logic:
- transparent normal state
- theme-tinted hover state
- stronger theme-tinted active state
- white icon + white label when active
- one bottom accent indicator
Theme-specific values only:
- accent
- hover background
- active background
Applies to:
- Neon Pulse
- Midnight Minimal
- Aurora Wave
- Ivory Gold
- Signal Grid
- Crimson Luxe
========================================================= */
/* ---------------------------------------------------------
NEON PULSE
--------------------------------------------------------- */
body.storefront-theme-neon-pulse{
--osb-standard-menu-accent:
#bd28ff;
--osb-standard-menu-hover-bg:
rgba(189,40,255,.16);
--osb-standard-menu-active-bg:
rgba(189,40,255,.24);
}
/* ---------------------------------------------------------
MIDNIGHT MINIMAL
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal{
--osb-standard-menu-accent:
#d7a34c;
--osb-standard-menu-hover-bg:
rgba(215,163,76,.15);
--osb-standard-menu-active-bg:
rgba(215,163,76,.23);
}
/* ---------------------------------------------------------
AURORA WAVE
--------------------------------------------------------- */
body.storefront-theme-aurora-wave{
--osb-standard-menu-accent:
#19dbe5;
--osb-standard-menu-hover-bg:
rgba(25,219,229,.14);
--osb-standard-menu-active-bg:
rgba(25,219,229,.22);
}
/* ---------------------------------------------------------
SIGNAL GRID
--------------------------------------------------------- */
body.storefront-theme-signal-grid{
--osb-standard-menu-accent:
#5cff82;
--osb-standard-menu-hover-bg:
rgba(92,255,130,.13);
--osb-standard-menu-active-bg:
rgba(92,255,130,.20);
}
/* ---------------------------------------------------------
CRIMSON LUXE
--------------------------------------------------------- */
body.storefront-theme-crimson-luxe{
--osb-standard-menu-accent:
#ef4651;
--osb-standard-menu-hover-bg:
rgba(239,70,81,.15);
--osb-standard-menu-active-bg:
rgba(239,70,81,.23);
}/* =========================================================
SHARED PUBLIC MENU BUTTON BEHAVIOR
========================================================= */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item{
background:
transparent !important;
color:
inherit !important;
border-top:
0 !important;
border-left:
0 !important;
border-right:
0 !important;
border-bottom:
2px solid transparent !important;
box-shadow:
none !important;
transition:
background .16s ease,
color .16s ease,
border-color .16s ease !important;
}/* =========================================================
HOVER STATE
========================================================= */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:hover,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:hover,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:hover,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:hover,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:hover{
background:
var(
--osb-standard-menu-hover-bg
) !important;
color:
#ffffff !important;
border-bottom-color:
var(
--osb-standard-menu-accent
) !important;
}/* Hover label */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-label,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-label,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-label,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-label{
color:
#ffffff !important;
}/* Hover icon */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon{
color:
#ffffff !important;
}/* =========================================================
ACTIVE / SELECTED STATE
========================================================= */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"],
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"],
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"],
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"],
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
var(
--osb-standard-menu-active-bg
) !important;
color:
#ffffff !important;
border-bottom-color:
var(
--osb-standard-menu-accent
) !important;
box-shadow:
none !important;
}/* Active labels */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label{
color:
#ffffff !important;
}/* Active icons */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon{
color:
#ffffff !important;
}
/* =========================================================
OWNER TOOLS USES THE SAME THEME INTERACTION
========================================================= */
body.storefront-theme-neon-pulse
.osb-neon-owner-trigger-v2{
background:
transparent !important;
border-bottom:
2px solid transparent !important;
}
body.storefront-theme-neon-pulse
.osb-neon-owner-trigger-v2:hover,
body.storefront-theme-neon-pulse
.osb-neon-owner-dropdown-v2.open
.osb-neon-owner-trigger-v2{
background:
var(
--osb-standard-menu-active-bg
) !important;
color:
#ffffff !important;
border-bottom-color:
var(
--osb-standard-menu-accent
) !important;
}/* =========================================================
ONE INDICATOR ONLY
========================================================= */
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item::before,
body.storefront-theme-neon-pulse
[data-osb-canonical-menu]
.osb-canonical-menu-item::after,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item::before,
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item::after,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item::before,
body.storefront-theme-aurora-wave
[data-osb-canonical-menu]
.osb-canonical-menu-item::after,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item::before,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item::after,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item::before,
body.storefront-theme-crimson-luxe
[data-osb-canonical-menu]
.osb-canonical-menu-item::after{
content:
none !important;
display:
none !important;
}
/* END OSBEATS 20260913
STANDARD STOREFRONT MENU INTERACTION V1 */
/* =========================================================
OSBEATS 20260913
OSBEATS OWNER ACTION + VERIFIED BADGE CSS V2
========================================================= */
/* ---------------------------------------------------------
OWN PROFILE
Never Follow or Message yourself.
--------------------------------------------------------- */
.osb-self-profile-action-hidden-v2{
display:
none !important;
visibility:
hidden !important;
pointer-events:
none !important;
}
/*
Defensive Neon owner-view protection.
Once the reliable owner controller marks the document as
self-profile, any Follow/Message element it identified
cannot be revived by theme CSS.
*/
html.osb-self-profile-owner
#neonPulseThemeStage
.osb-self-profile-action-hidden-v2{
display:
none !important;
}
/* ---------------------------------------------------------
OSBEATS VERIFIED BADGE V2
--------------------------------------------------------- */
.osb-verified-badge-v2{
width:
23px !important;
height:
23px !important;
min-width:
23px !important;
min-height:
23px !important;
margin:
0 0 0 6px !important;
padding:
0 !important;
border:
0 !important;
border-radius:
0 !important;
background:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
vertical-align:
middle !important;
line-height:
1 !important;
overflow:
visible !important;
}
.osb-verified-badge-v2::before,
.osb-verified-badge-v2::after{
content:
none !important;
display:
none !important;
}
.osb-verified-v2-svg{
width:
23px !important;
height:
23px !important;
display:
block !important;
overflow:
visible !important;
}
.osb-verified-v2-shell{
fill:
#f02b3a;
stroke:
#ff6671;
stroke-width:
.65;
}
.osb-verified-v2-core{
fill:
#08090b;
}
.osb-verified-v2-wave{
fill:
none;
stroke:
#ffffff;
stroke-width:
1.45;
stroke-linecap:
round;
stroke-linejoin:
round;
}
.osb-verified-v2-check{
fill:
none;
stroke:
#ffffff;
stroke-width:
1.85;
stroke-linecap:
round;
stroke-linejoin:
round;
}
/* END OSBEATS 20260913
OSBEATS OWNER ACTION + VERIFIED BADGE CSS V2 */
/* =========================================================
OSBEATS 20260913
OSBEATS VERIFIED BADGE CSS V3
CLEAR CHECK-FIRST VERIFIED MARK
========================================================= */
.osb-verified-badge-v3{
width:
22px !important;
height:
22px !important;
min-width:
22px !important;
min-height:
22px !important;
margin:
0 0 0 6px !important;
padding:
0 !important;
border:
0 !important;
border-radius:
0 !important;
background:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
vertical-align:
middle !important;
line-height:
1 !important;
overflow:
visible !important;
}
.osb-verified-badge-v3::before,
.osb-verified-badge-v3::after{
content:
none !important;
display:
none !important;
}
.osb-verified-v3-svg{
width:
22px !important;
height:
22px !important;
display:
block !important;
overflow:
visible !important;
}
.osb-verified-v3-shell{
fill:
#ef233c;
stroke:
#ff5a6c;
stroke-width:
.75;
}
.osb-verified-v3-core{
fill:
#07080a;
}
.osb-verified-v3-ring{
fill:
none;
stroke:
rgba(255,255,255,.16);
stroke-width:
.8;
}
.osb-verified-v3-check{
fill:
none;
stroke:
#ffffff;
stroke-width:
2.9;
stroke-linecap:
round;
stroke-linejoin:
round;
}
/*
Neutralize any older badge styling if a prior class
briefly survives during theme rendering.
*/
.osb-verified-badge-v3
.osb-verified-v2-wave,
.osb-verified-badge-v3
.osb-verified-v2-check{
display:
none !important;
}
/* END OSBEATS 20260913
OSBEATS VERIFIED BADGE CSS V3 */
/* =========================================================
OSBEATS 20260913
MIDNIGHT MINIMAL NATIVE SOCIAL ROW ALIGNMENT V2
ROOT CAUSE:
Midnight Minimal renders its own social links inside:
#midnightMinimalThemeStage .np-social-row
It does NOT use the default profile #socialLinks node.
Move that actual native social row upward so the
profile divider no longer passes through the icons.
========================================================= */
/* ---------------------------------------------------------
ACTUAL MIDNIGHT SOCIAL ROW
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity
.np-social-row{
position:
relative !important;
top:
-10px !important;
z-index:
6 !important;
margin-top:
0 !important;
margin-bottom:
0 !important;
padding-top:
0 !important;
padding-bottom:
0 !important;
display:
flex !important;
align-items:
center !important;
gap:
12px !important;
}
/* ---------------------------------------------------------
NATIVE SOCIAL LINK ALIGNMENT
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-social-row
.np-social,
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-social-row
a{
position:
relative !important;
top:
0 !important;
margin:
0 !important;
padding:
0 !important;
vertical-align:
middle !important;
line-height:
1 !important;
}
/* ---------------------------------------------------------
ICON CENTERING
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-social-row
svg{
display:
block !important;
vertical-align:
middle !important;
}
/* ---------------------------------------------------------
GIVE IDENTITY CONTENT CLEAN LOWER CLEARANCE
This prevents the social row from visually colliding
with the profile-strip divider after it is lifted.
--------------------------------------------------------- */
/* END OSBEATS 20260913
MIDNIGHT MINIMAL NATIVE SOCIAL ROW ALIGNMENT V2 */
/* =========================================================
OSBEATS 20260913
MIDNIGHT MINIMAL CANONICAL MENU HOST V1
ROOT CAUSE
Midnight Minimal has its own native .np-tabs buttons.
The universal OSBeats menu is also hosted in .np-tabs.
Keep the host.
Hide only Midnight's original direct buttons.
Keep the canonical menu.
========================================================= */
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs{
display:
flex !important;
visibility:
visible !important;
width:
100% !important;
height:
auto !important;
max-height:
none !important;
overflow:
visible !important;
align-items:
stretch !important;
}
/*
HIDE ONLY ORIGINAL MIDNIGHT TABS
Music
About
Playlists
Photos
Store
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs
> button[data-np-tab]{
display:
none !important;
}
/*
Remove native Midnight active line.
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs
> button[data-np-tab]::before,
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs
> button[data-np-tab]::after{
content:
none !important;
display:
none !important;
}
/*
KEEP STANDARD OSBEATS MENU
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs
> [data-osb-canonical-menu]{
display:
block !important;
visibility:
visible !important;
flex:
1 1 100% !important;
width:
100% !important;
max-width:
none !important;
margin:
0 !important;
}
/*
ONE HORIZONTAL MENU ROW
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
[data-osb-canonical-menu]
.osb-canonical-public{
display:
flex !important;
flex-direction:
row !important;
flex-wrap:
nowrap !important;
align-items:
stretch !important;
width:
100% !important;
overflow:
visible !important;
}
/*
IMPORTANT:
Original Midnight CSS uses:
.np-tabs button.active::after
Since the canonical menu lives inside .np-tabs,
that selector can also hit the standard menu.
Kill the inherited pseudo-line.
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-menu-item::before,
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-menu-item::after{
content:
none !important;
display:
none !important;
}
/*
ONE GOLD ACTIVE INDICATOR ONLY
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
var(
--osb-standard-menu-active-bg
) !important;
color:
#ffffff !important;
border-top:
0 !important;
border-left:
0 !important;
border-right:
0 !important;
border-bottom:
2px solid
var(
--osb-standard-menu-accent
) !important;
box-shadow:
none !important;
}
/* END OSBEATS 20260913
MIDNIGHT MINIMAL CANONICAL MENU HOST V1 */
/* =========================================================
OSBEATS 20260913
MIDNIGHT MINIMAL OWNER TOOLS DROPDOWN CSS V1
========================================================= */
body.storefront-theme-midnight-minimal
.osb-midnight-owner-dropdown-v1{
position:
relative;
flex:
0 0 auto;
display:
flex;
align-items:
stretch;
z-index:
200;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-trigger-v1{
height:
100% !important;
white-space:
nowrap !important;
background:
transparent !important;
border-bottom:
2px solid transparent !important;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-trigger-v1:hover,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-dropdown-v1.open
.osb-midnight-owner-trigger-v1{
background:
var(
--osb-standard-menu-active-bg
) !important;
color:
#ffffff !important;
border-bottom-color:
var(
--osb-standard-menu-accent
) !important;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-chevron-v1{
margin-left:
3px;
font-size:
10px;
opacity:
.8;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1{
position:
absolute !important;
top:
calc(100% + 6px);
right:
0;
width:
220px !important;
min-width:
220px !important;
margin:
0 !important;
padding:
7px !important;
display:
none !important;
flex-direction:
column !important;
gap:
3px !important;
background:
#11100d !important;
border:
1px solid
var(
--osb-standard-menu-accent
) !important;
border-radius:
3px;
box-shadow:
0 18px 45px
rgba(0,0,0,.35);
z-index:
1000;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-dropdown-v1.open
.osb-midnight-owner-panel-v1{
display:
flex !important;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
.osb-canonical-menu-item{
width:
100% !important;
min-height:
40px !important;
padding:
9px 11px !important;
justify-content:
flex-start !important;
border:
0 !important;
color:
#ffffff !important;
background:
transparent !important;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
.osb-canonical-menu-item:hover{
background:
var(
--osb-standard-menu-hover-bg
) !important;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
.osb-canonical-menu-icon{
color:
var(
--osb-standard-menu-accent
) !important;
}
/* END OSBEATS 20260913
MIDNIGHT MINIMAL OWNER TOOLS DROPDOWN CSS V1 */
/* =========================================================
OSBEATS 20260913
MIDNIGHT OWNER DROPDOWN VISIBILITY CSS V3
Direct descendant targeting.
Do not assume Creator Studio / Mastering Studio use
public-menu child classes.
========================================================= */
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1{
color:
#ffffff !important;
opacity:
1 !important;
filter:
none !important;
mix-blend-mode:
normal !important;
}
/*
ALL ACTION ELEMENTS INSIDE THE OWNER PANEL
*/
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
a,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
button,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
[role="button"],
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
[role="link"]{
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
opacity:
1 !important;
filter:
none !important;
mix-blend-mode:
normal !important;
text-shadow:
none !important;
visibility:
visible !important;
pointer-events:
auto !important;
}
/*
FORCE ALL TEXT DESCENDANTS WHITE.
This catches owner-tool markup regardless of whether
the label is a span, strong, small, or another wrapper.
*/
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
a
span:not(.osb-canonical-menu-icon),
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
a
strong,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
a
small,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
button
span:not(.osb-canonical-menu-icon),
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
button
strong,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
button
small{
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
opacity:
1 !important;
filter:
none !important;
}
/*
MIDNIGHT GOLD ICONS
*/
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
.osb-canonical-menu-icon{
color:
#d7a34c !important;
-webkit-text-fill-color:
#d7a34c !important;
opacity:
1 !important;
filter:
none !important;
}
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
.osb-canonical-menu-icon
svg{
color:
#d7a34c !important;
stroke:
#d7a34c !important;
opacity:
1 !important;
}
/*
HOVER
*/
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
a:hover,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
button:hover,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
[role="button"]:hover,
body.storefront-theme-midnight-minimal
.osb-midnight-owner-panel-v1
[role="link"]:hover{
background:
rgba(215,163,76,.18) !important;
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
}
/* END OSBEATS 20260913
MIDNIGHT OWNER DROPDOWN VISIBILITY CSS V3 */
/* =========================================================
OSBEATS 20260913
STANDARD STOREFRONT DIMENSION POLICY V1
DIMENSION SOURCE OF TRUTH:
storefront-theme-neon-pulse
Standard themes are not allowed to independently change
the core storefront geometry.
Standard theme appearance may vary.
Standard theme dimensions must not.
Applies to:
Neon Pulse
Midnight Minimal
Aurora Wave
Ivory Gold
Signal Grid
Crimson Luxe
Bento Studio / Editorial Wave are separate Elite layouts.
========================================================= */
/* END OSBEATS 20260913
STANDARD STOREFRONT DIMENSION POLICY V1 */
/* =========================================================
OSBEATS 20260913
MIDNIGHT PROFILE VISUAL REPAIR V1
IMPORTANT
Neon Pulse remains the geometry source of truth.
These rules restore only Midnight presentation that was
accidentally removed by the geometry-normalization pass.
They do NOT change:
- profile-strip height
- avatar shell width/height
- hero height
- track-row dimensions
- storefront width
- overall theme height
========================================================= */
/* ---------------------------------------------------------
MIDNIGHT CREATOR PHOTO
The Neon geometry system owns the .np-avatar shell.
Midnight owns only the IMAGE INSIDE that shell.
--------------------------------------------------------- */
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-avatar{
overflow:
hidden !important;
background-size:
cover !important;
background-position:
center !important;
background-repeat:
no-repeat !important;
}
/*
Restore the inner image sizing that was removed during
the geometry cleanup.
This does not resize .np-avatar itself.
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-avatar
.midnight-minimal-main-avatar{
position:
absolute !important;
inset:
0 !important;
display:
block !important;
width:
100% !important;
height:
100% !important;
max-width:
none !important;
max-height:
none !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
border-radius:
50% !important;
object-fit:
cover !important;
object-position:
center !important;
opacity:
1 !important;
visibility:
visible !important;
filter:
grayscale(1)
contrast(1.04)
brightness(1.03) !important;
z-index:
5 !important;
pointer-events:
none !important;
}
/* ---------------------------------------------------------
MIDNIGHT IDENTITY POSITION
Restore the approved visual offset.
transform does NOT change document-flow dimensions, so
Midnight still uses Neon Pulse's exact profile-strip size.
--------------------------------------------------------- */
@media(min-width:721px){
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity{
transform:
translate(
3px,
-13px
) !important;
}
}
/*
Keep heading/meta/tagline compact after the lift.
These values mirror the shared Neon presentation without
modifying the profile-strip geometry.
*/
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity
h1{
margin:
0 0 3px !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity-meta{
margin:
0 !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity
p{
margin:
6px 0 8px !important;
}
/* ---------------------------------------------------------
MOBILE
Do not apply the desktop -13px lift on mobile.
--------------------------------------------------------- */
@media(max-width:720px){
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity{
transform:
none !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-avatar
.midnight-minimal-main-avatar{
width:
100% !important;
height:
100% !important;
object-fit:
cover !important;
}
}
/* END OSBEATS 20260913
MIDNIGHT PROFILE VISUAL REPAIR V1 */
/* =========================================================
OSBEATS 20260913
MIDNIGHT FINAL PLAY CONTROL V4
========================================================= */
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play{
appearance:none !important;
-webkit-appearance:none !important;
position:relative !important;
overflow:hidden !important;
padding:0 !important;
border:1px solid #a5a5a1 !important;
border-radius:50% !important;
background:#dededb !important;
box-shadow:none !important;
color:#171717 !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play > *{
display:none !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play::before{
content:"" !important;
position:absolute !important;
top:50% !important;
left:54% !important;
width:0 !important;
height:0 !important;
border-top:5px solid transparent !important;
border-bottom:5px solid transparent !important;
border-left:8px solid #171717 !important;
transform:translate(-50%,-50%) !important;
background:transparent !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play::after{
content:none !important;
display:none !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play[data-mm-state="playing"]::before{
content:"" !important;
display:block !important;
left:43% !important;
width:3px !important;
height:11px !important;
border:0 !important;
border-radius:1px !important;
background:#171717 !important;
}
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play[data-mm-state="playing"]::after{
content:"" !important;
display:block !important;
position:absolute !important;
top:50% !important;
left:57% !important;
width:3px !important;
height:11px !important;
border:0 !important;
border-radius:1px !important;
background:#171717 !important;
transform:translate(-50%,-50%) !important;
}
/* END MIDNIGHT FINAL PLAY CONTROL V4 */
/* OSBEATS 20260913 NEON PURPLE WAVEFORM PROGRESS V5 */
body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-track-wave{
position:relative !important;
overflow:hidden !important;
}
body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-neon-progress-svg{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:block !important;
pointer-events:none !important;
z-index:3 !important;
clip-path:inset(0 100% 0 0);
will-change:clip-path !important;
}
body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-neon-progress-svg path,
body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-neon-progress-svg
.np-approved-wave-path{
fill:#a83bff !important;
opacity:1 !important;
filter:
drop-shadow(0 0 2px rgba(168,59,255,.95))
drop-shadow(0 0 5px rgba(168,59,255,.70)) !important;
}/* END NEON PURPLE WAVEFORM PROGRESS V5 */
/* OSBEATS 20260913 REMAINING STANDARD THEME NORMALIZER CSS V2
STANDARD GEOMETRY POLICY
Neon Pulse remains the geometry source of truth.
This block intentionally contains NO desktop avatar width,
avatar height,
profile-strip height,
identity transform,
hero height,
or track-row geometry.
Aurora / Ivory / Signal / Crimson inherit those dimensions
directly from the shared Neon geometry lock.
*/
/* =========================================================
REMOVE THE DUPLICATE NATIVE FIVE-BUTTON TAB ROW
KEEP THE BUTTONS IN DOM FOR LEGACY FUNCTION SAFETY
========================================================= */
body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
.np-tabs > button,
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
.np-tabs > button,
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
.np-tabs > button{
display:none !important;
}/* =========================================================
CANONICAL MENU HOST
========================================================= */
body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
.np-tabs,
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
.np-tabs,
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
.np-tabs{
position:relative !important;
z-index:80 !important;
}body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
[data-osb-canonical-menu],
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
[data-osb-canonical-menu],
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
[data-osb-canonical-menu]{
width:100% !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
}
@media(min-width:721px){body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
.np-tabs,
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
.np-tabs,
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
.np-tabs,
body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
[data-osb-canonical-menu],
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
[data-osb-canonical-menu],
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
[data-osb-canonical-menu],
body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
.osb-canonical-public,
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
.osb-canonical-public,
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
.osb-canonical-public{
overflow:visible !important;
max-height:none !important;
}
}
/* =========================================================
OWNER TOOLS DROPDOWN
FIXED POSITION PREVENTS MENU SCROLLBAR
========================================================= */
.osb-standard-owner-dropdown-v2{
position:relative !important;
display:flex !important;
align-self:stretch !important;
flex:0 0 auto !important;
overflow:visible !important;
}
.osb-standard-owner-trigger-v2{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
height:100% !important;
min-height:inherit !important;
padding-left:16px !important;
padding-right:16px !important;
border-top:0 !important;
border-left:1px solid rgba(255,255,255,.22) !important;
border-right:1px solid rgba(255,255,255,.22) !important;
border-bottom:2px solid transparent !important;
background:transparent !important;
color:#ffffff !important;
box-shadow:none !important;
cursor:pointer !important;
white-space:nowrap !important;
}
.osb-standard-owner-trigger-v2:hover,
.osb-standard-owner-dropdown-v2.open
.osb-standard-owner-trigger-v2{
background:
var(
--osb-standard-menu-active-bg
) !important;
border-bottom-color:
var(
--osb-standard-menu-accent
) !important;
}
.osb-standard-owner-arrow-v2{
display:inline-block !important;
margin-left:1px !important;
font-size:9px !important;
line-height:1 !important;
}
.osb-standard-owner-panel-v2{
position:fixed !important;
z-index:2147483000 !important;
display:none !important;
min-width:210px !important;
width:max-content !important;
max-width:min(280px,calc(100vw - 16px)) !important;
max-height:none !important;
overflow:visible !important;
padding:6px !important;
border:
1px solid
var(
--osb-standard-menu-accent
) !important;
background:#071117 !important;
box-shadow:
0 14px 34px rgba(0,0,0,.48) !important;
}
.osb-standard-owner-dropdown-v2.open
.osb-standard-owner-panel-v2{
display:grid !important;
gap:3px !important;
}
.osb-standard-owner-action-v2{
display:flex !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
min-height:38px !important;
padding:0 12px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#ffffff !important;
font:inherit !important;
font-size:11px !important;
font-weight:700 !important;
text-align:left !important;
text-decoration:none !important;
white-space:nowrap !important;
cursor:pointer !important;
}
.osb-standard-owner-action-v2:hover,
.osb-standard-owner-action-v2:focus-visible{
background:
var(
--osb-standard-menu-hover-bg
) !important;
color:#ffffff !important;
outline:0 !important;
}
/* =========================================================
STANDARD TRACK-PANEL BOTTOM SPACING
SAME DESKTOP BALANCE AS LOCKED NEON
========================================================= */
@media(min-width:721px){body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
.np-panel,
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
.np-panel,
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
.np-panel{
padding:
19px 20px 20px !important;
}body.storefront-theme-aurora-wave
.np-theme-stage.osb-standard-normalized-v2
.np-track-tools,
body.storefront-theme-signal-grid
.np-theme-stage.osb-standard-normalized-v2
.np-track-tools,
body.storefront-theme-crimson-luxe
.np-theme-stage.osb-standard-normalized-v2
.np-track-tools{
margin-bottom:
11px !important;
}
}/* =========================================================
REMOVE DEAD SPACE BETWEEN STANDARD STAGE AND GLOBAL FOOTER
SAME LOGIC ALREADY USED BY MIDNIGHT MINIMAL
========================================================= */
body.storefront-theme-aurora-wave
.storefront,
body.storefront-theme-aurora-wave
main,
body.storefront-theme-aurora-wave
main.storefront,
body.storefront-theme-aurora-wave
#storefront,
body.storefront-theme-aurora-wave
.artist-profile-page,
body.storefront-theme-aurora-wave
.profile-page,
body.storefront-theme-aurora-wave
.storefront-page,
body.storefront-theme-signal-grid
.storefront,
body.storefront-theme-signal-grid
main,
body.storefront-theme-signal-grid
main.storefront,
body.storefront-theme-signal-grid
#storefront,
body.storefront-theme-signal-grid
.artist-profile-page,
body.storefront-theme-signal-grid
.profile-page,
body.storefront-theme-signal-grid
.storefront-page,
body.storefront-theme-crimson-luxe
.storefront,
body.storefront-theme-crimson-luxe
main,
body.storefront-theme-crimson-luxe
main.storefront,
body.storefront-theme-crimson-luxe
#storefront,
body.storefront-theme-crimson-luxe
.artist-profile-page,
body.storefront-theme-crimson-luxe
.profile-page,
body.storefront-theme-crimson-luxe
.storefront-page{
min-height:0 !important;
height:auto !important;
margin-bottom:0 !important;
padding-bottom:0 !important;
}body.storefront-theme-aurora-wave
.np-theme-stage,
body.storefront-theme-aurora-wave
.np-shell,
body.storefront-theme-signal-grid
.np-theme-stage,
body.storefront-theme-signal-grid
.np-shell,
body.storefront-theme-crimson-luxe
.np-theme-stage,
body.storefront-theme-crimson-luxe
.np-shell{
margin-bottom:0 !important;
padding-bottom:0 !important;
}body.storefront-theme-aurora-wave
footer,
body.storefront-theme-aurora-wave
.site-footer,
body.storefront-theme-aurora-wave
.global-footer,
body.storefront-theme-aurora-wave
#siteFooter,
body.storefront-theme-signal-grid
footer,
body.storefront-theme-signal-grid
.site-footer,
body.storefront-theme-signal-grid
.global-footer,
body.storefront-theme-signal-grid
#siteFooter,
body.storefront-theme-crimson-luxe
footer,
body.storefront-theme-crimson-luxe
.site-footer,
body.storefront-theme-crimson-luxe
.global-footer,
body.storefront-theme-crimson-luxe
#siteFooter{
margin-top:0 !important;
}
/*
IMPORTANT:
No .np-avatar dimensions exist in this V2 block.
No .np-profile-strip dimensions exist in this V2 block.
Those are inherited from current Neon Pulse geometry.
*/
/* END REMAINING STANDARD THEME NORMALIZER CSS V2 */
/* OSBEATS 20260913 STANDARD THEME PROFILE CONTRACT V1 */
/* =========================================================
STANDARD CREATOR IDENTITY POSITION
Same position for:
- Neon Pulse
- Midnight Minimal
- Aurora Wave
- Ivory Gold
- Signal Grid
- Crimson Luxe
========================================================= */
@media(min-width:721px){html body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-identity,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity,
html body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-identity,
html body.storefront-theme-signal-grid
.standard-palette-theme-stage
.np-identity,
html body.storefront-theme-crimson-luxe
.standard-palette-theme-stage
.np-identity{
align-self:
center !important;
transform:
translate(
3px,
-13px
) !important;
}
}/* =========================================================
DISPLAY NAME
========================================================= */
html body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-identity h1,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity h1,
html body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-identity h1,
html body.storefront-theme-signal-grid
.standard-palette-theme-stage
.np-identity h1,
html body.storefront-theme-crimson-luxe
.standard-palette-theme-stage
.np-identity h1{
margin:
0 0 5px !important;
padding:
0 !important;
font-size:
23px !important;
line-height:
1.05 !important;
}/* =========================================================
ARTIST / PRODUCER + LOCATION
========================================================= */
html body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-identity-meta,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity-meta,
html body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-identity-meta,
html body.storefront-theme-signal-grid
.standard-palette-theme-stage
.np-identity-meta,
html body.storefront-theme-crimson-luxe
.standard-palette-theme-stage
.np-identity-meta{
display:
flex !important;
align-items:
center !important;
gap:
6px !important;
margin:
0 !important;
padding:
0 !important;
min-height:
14px !important;
font-size:
10px !important;
line-height:
14px !important;
}html body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-identity-meta i,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity-meta i,
html body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-identity-meta i,
html body.storefront-theme-signal-grid
.standard-palette-theme-stage
.np-identity-meta i,
html body.storefront-theme-crimson-luxe
.standard-palette-theme-stage
.np-identity-meta i{
font-style:
normal !important;
margin:
0 !important;
}/* =========================================================
REMOVE ABOUT / TAGLINE FROM PROFILE HEADER
About remains available through the About menu.
========================================================= */
html body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-identity > p,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity > p,
html body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-identity > p,
html body.storefront-theme-signal-grid
.standard-palette-theme-stage
.np-identity > p,
html body.storefront-theme-crimson-luxe
.standard-palette-theme-stage
.np-identity > p{
display:
none !important;
visibility:
hidden !important;
height:
0 !important;
min-height:
0 !important;
margin:
0 !important;
padding:
0 !important;
}/* =========================================================
SOCIAL ICON POSITION
========================================================= */
html body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-social-row,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-social-row,
html body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-social-row,
html body.storefront-theme-signal-grid
.standard-palette-theme-stage
.np-social-row,
html body.storefront-theme-crimson-luxe
.standard-palette-theme-stage
.np-social-row{
margin-top:
10px !important;
margin-bottom:
0 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:720px){html body.storefront-theme-neon-pulse
#neonPulseThemeStage
.np-identity,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-identity,
html body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-identity,
html body.storefront-theme-signal-grid
.standard-palette-theme-stage
.np-identity,
html body.storefront-theme-crimson-luxe
.standard-palette-theme-stage
.np-identity{
transform:
none !important;
}
}/* =========================================================
STANDARD STOREFRONT → FOOTER GAP
All six themes receive exactly 24px between the
storefront container and the global footer.
========================================================= */
html body.storefront-theme-neon-pulse
#storefront,
html body.storefront-theme-midnight-minimal
#storefront,
html body.storefront-theme-aurora-wave
#storefront,
html body.storefront-theme-signal-grid
#storefront,
html body.storefront-theme-crimson-luxe
#storefront{
min-height:
0 !important;
height:
auto !important;
margin-bottom:
0 !important;
padding-bottom:
24px !important;
}/*
The parent storefront owns the one standard footer gap.
*/
html body.storefront-theme-neon-pulse
.np-theme-stage,
html body.storefront-theme-midnight-minimal
.np-theme-stage,
html body.storefront-theme-aurora-wave
.np-theme-stage,
html body.storefront-theme-signal-grid
.np-theme-stage,
html body.storefront-theme-crimson-luxe
.np-theme-stage{
margin-bottom:
0 !important;
}
/* END STANDARD THEME PROFILE CONTRACT V1 */
/* OSBEATS 20260913 AURORA VISUAL ONLY V5 */
/* Aurora brand accent */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-brand
strong{
color:
var(
--osb-standard-menu-accent,
#19dbe5
) !important;
}
/* Aurora Owner Tools icon accent */
html
body.storefront-theme-aurora-wave
.osb-standard-owner-trigger-v2
.osb-canonical-menu-icon{
color:
var(
--osb-standard-menu-accent,
#19dbe5
) !important;
}
/* END AURORA VISUAL ONLY V5 */
/* OSBEATS 20260913 AURORA VISUAL RESTORE V6 */
/*
Aurora uses absolutely positioned artwork inside the
standard Neon-sized hero.
These two properties establish the visual containing block.
They do NOT alter the hero dimensions.
*/
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-hero.aw-hero{
position:
relative !important;
overflow:
hidden !important;
}
/*
Exact internal Aurora banner artwork rules recovered
from the verified pre-V5 stylesheet.
*/
/*
Real creator banner becomes the cyan/teal photographic
presentation shown in the approved Aurora mockup.
*/
#auroraWaveThemeStage .aw-hero-image{
position:absolute !important;
inset:0 !important;
z-index:0 !important;
background-image:
var(--aw-banner-image) !important;
background-size:
cover !important;
background-position:
center 40% !important;
background-repeat:
no-repeat !important;
filter:
grayscale(1)
brightness(.67)
contrast(1.18) !important;
transform:
scale(1.01) !important;
}
#auroraWaveThemeStage .aw-hero-shade{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:
linear-gradient(
90deg,
#007e93 0%,
#00aebf 44%,
#00869f 70%,
#005c72 100%
) !important;
opacity:.78 !important;
mix-blend-mode:color !important;
pointer-events:none !important;
}
/*
Exact banner-wave treatment:
two clean horizontal waveform lines, not bars.
*/
#auroraWaveThemeStage .aw-banner-wave{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
z-index:3 !important;
width:100% !important;
height:64px !important;
overflow:visible !important;
pointer-events:none !important;
}
#auroraWaveThemeStage .aw-banner-wave path{
fill:none !important;
vector-effect:
non-scaling-stroke !important;
}
#auroraWaveThemeStage .aw-banner-wave-soft{
stroke:#087f99 !important;
stroke-width:1.1 !important;
opacity:.62 !important;
}
#auroraWaveThemeStage .aw-banner-wave-main{
stroke:#19e5ed !important;
stroke-width:2 !important;
opacity:.92 !important;
filter:
drop-shadow(
0 0 3px
rgba(25,229,237,.50)
) !important;
}
#auroraWaveThemeStage .aw-banner-wave{
height:48px !important;
}
/*
Source Owner Tools rows are transport containers only.
The V6 finalizer moves their actions into the dropdown.
*/
html
body.storefront-theme-aurora-wave
#storefront
.osb-canonical-owner{
display:
none !important;
}
/*
Saved heart uses Aurora accent.
*/
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-heart.saved{
color:
#19e5ed !important;
}
/* END AURORA VISUAL RESTORE V6 */
/* OSBEATS 20260913 AURORA OWNER MENU CSS V8 */
/* Never display the canonical source Owner Tools row. */
html
body.storefront-theme-aurora-wave
#storefront
.osb-canonical-owner{
display:
none !important;
}
/* Keep ONE horizontal public row. */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-osb-canonical-menu]
.osb-canonical-menu--horizontal,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-osb-canonical-menu]
.osb-canonical-menu--horizontal
.osb-canonical-public{
overflow:
visible !important;
}
/* One Aurora Owner Tools item. */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-aurora-owner-v8]{
position:
relative !important;
display:
inline-flex !important;
align-items:
stretch !important;
flex:
0 0 auto !important;
vertical-align:
middle !important;
}
/* Trigger */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-aurora-owner-v8]
.osb-standard-owner-trigger-v2{
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
6px !important;
min-width:
max-content !important;
height:
100% !important;
margin:
0 !important;
white-space:
nowrap !important;
color:
#ffffff !important;
background:
transparent !important;
box-shadow:
none !important;
}
/* Aurora accent icon */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-aurora-owner-v8]
.osb-canonical-menu-icon{
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
color:
var(
--osb-standard-menu-accent,
#19dbe5
) !important;
}
/* Dropdown panel */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-aurora-owner-v8]
.osb-standard-owner-panel-v2{
display:
none !important;
position:
absolute !important;
top:
100% !important;
right:
0 !important;
left:
auto !important;
z-index:
10000 !important;
min-width:
200px !important;
margin:
2px 0 0 !important;
padding:
6px !important;
overflow:
visible !important;
border:
1px solid
var(
--osb-standard-menu-accent,
#19dbe5
) !important;
background:
#06171e !important;
box-shadow:
0 12px 28px
rgba(0,0,0,.45) !important;
}
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-aurora-owner-v8].open
.osb-standard-owner-panel-v2{
display:
grid !important;
gap:
3px !important;
}
/* Owner actions exist only inside dropdown */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
[data-aurora-owner-v8]
.osb-standard-owner-action-v2{
display:
flex !important;
align-items:
center !important;
justify-content:
flex-start !important;
width:
100% !important;
min-height:
36px !important;
margin:
0 !important;
padding:
0 10px !important;
color:
#ffffff !important;
background:
transparent !important;
border:
0 !important;
text-align:
left !important;
text-decoration:
none !important;
white-space:
nowrap !important;
}
/* Visible Aurora save control stays icon-only. */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-heart{
overflow:
hidden !important;
white-space:
nowrap !important;
}
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-heart.saved{
color:
#19e5ed !important;
}
/* END AURORA OWNER MENU CSS V8 */
/* OSBEATS 20260914 IVORY GOLD APPROVED COLOR MATCH V5 */
/* =========================================================
APPROVED IVORY GOLD PALETTE
Visual reference:
- clean white / ivory storefront
- bright premium surfaces
- dark charcoal / black typography
- restrained champagne gold
- soft warm-gray secondary details
- NO PURPLE
- NO MAGENTA
- NO NEON GLOW
========================================================= */
body.storefront-theme-ivory-gold,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold{
--ivory-page:#f2eee6;
--ivory-white:#fffdf9;
--ivory-soft:#fbf8f1;
--ivory-soft-2:#f6f2e9;
--ivory-text:#171717;
--ivory-muted:#6b655d;
--ivory-gold:#d1a04a;
--ivory-gold-deep:#ad7722;
--ivory-gold-light:#e3bd72;
--ivory-line:#dfd6c8;
--ivory-line-dark:#cdbb9a;
--osb-standard-menu-accent:
#d1a04a !important;
--osb-standard-menu-hover-bg:
rgba(209,160,74,.08) !important;
--osb-standard-menu-active-bg:
transparent !important;
background:
#f2eee6 !important;
color:
#171717 !important;
}
/* =========================================================
PREVIEW BAR
REMOVE NEON PURPLE CHROME
========================================================= */
body.storefront-theme-ivory-gold
.storefront-theme-preview-bar,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
.storefront-theme-preview-bar{
background:
#071019 !important;
border-color:
#b98a38 !important;
border-left-color:
#d1a04a !important;
box-shadow:
none !important;
color:
#ffffff !important;
}
body.storefront-theme-ivory-gold
.storefront-theme-preview-bar span,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
.storefront-theme-preview-bar span{
color:
#e0ad52 !important;
}
body.storefront-theme-ivory-gold
.storefront-theme-preview-bar a,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
.storefront-theme-preview-bar a{
color:
#ffffff !important;
border-color:
#d1a04a !important;
}
/* =========================================================
STOREFRONT SHELL
KILL PURPLE BORDER / GLOW
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-shell,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-shell{
background:
#fffdf9 !important;
border-color:
#d1a04a !important;
outline-color:
#d1a04a !important;
color:
#171717 !important;
box-shadow:
0 14px 34px
rgba(54,42,24,.14) !important;
}
/* =========================================================
TOP NAVIGATION
MOCKUP = WHITE / IVORY + BLACK TEXT
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-topbar,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-topbar{
background:
#fffdf9 !important;
color:
#171717 !important;
border-color:
#dfd6c8 !important;
box-shadow:
none !important;
}
/* OS = GOLD, BEATS = DARK */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-brand strong,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-brand strong{
color:
#d08e27 !important;
-webkit-text-fill-color:
#d08e27 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-brand span,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-brand span{
color:
#171717 !important;
-webkit-text-fill-color:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-nav,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-nav a,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-nav button,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-top-icons,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-top-icons a,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-top-icons button,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-nav,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-nav a,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-nav button,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-top-icons,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-top-icons a,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-top-icons button{
color:
#171717 !important;
stroke:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-search,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-search input,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-search,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-search input{
background:
#f1f0ec !important;
color:
#171717 !important;
border-color:
#ded9d0 !important;
box-shadow:
none !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-global-search input::placeholder{
color:
#79746d !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-mini-avatar{
border-color:
#d1a04a !important;
box-shadow:
none !important;
}
/* =========================================================
HERO
IMPORTANT:
THE REAL NEON RENDERER USES AN INLINE BACKGROUND IMAGE
PLUS .np-hero-shade.
OVERRIDE BOTH.
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero{
background-color:
#ead7b6 !important;
background-image:
url('/assets/storefront-themes/ivory-gold/hero-default.png') !important;
background-size:
cover !important;
background-position:
center 58% !important;
background-repeat:
no-repeat !important;
color:
#171717 !important;
box-shadow:
none !important;
filter:
none !important;
}
/*
THIS WAS ONE OF THE PURPLE SOURCES.
*/
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero-shade,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero-shade{
background:
transparent !important;
background-image:
none !important;
opacity:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* NO NEON PSEUDO GLOW/TINT */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero::before,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero::after,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero::before,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-hero::after{
background:
none !important;
background-image:
none !important;
box-shadow:
none !important;
text-shadow:
none !important;
color:
transparent !important;
}
/* =========================================================
PROFILE BAND
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-profile-strip,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-profile-strip{
background:
#fffdf9 !important;
color:
#171717 !important;
border-color:
#dfd6c8 !important;
box-shadow:
none !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-avatar,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-avatar{
border-color:
#d1a04a !important;
outline-color:
#d1a04a !important;
box-shadow:
0 7px 18px
rgba(60,45,23,.14) !important;
}
/* ALL PROFILE TEXT DARK */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity h1,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity strong,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity-meta,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity-meta span,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity h1,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity strong,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity-meta,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-identity-meta span{
color:
#171717 !important;
-webkit-text-fill-color:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-social-row,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-social-row a,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-social-row button{
color:
#171717 !important;
stroke:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-inline-stats,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-inline-stats article,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-inline-stats strong{
color:
#171717 !important;
-webkit-text-fill-color:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-inline-stats span{
color:
#6b655d !important;
}
/* =========================================================
MENU
APPROVED MOCKUP:
WHITE/IVORY ROW
DARK TEXT
GOLD ACTIVE TEXT + GOLD UNDERLINE
NO PURPLE
NO ACTIVE FILL
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs{
background:
#fffdf9 !important;
color:
#171717 !important;
border-color:
#dfd6c8 !important;
box-shadow:
none !important;
}
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item{
background:
transparent !important;
color:
#171717 !important;
border-color:
transparent !important;
box-shadow:
none !important;
}
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-label,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-label{
color:
#171717 !important;
-webkit-text-fill-color:
#171717 !important;
}
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-icon,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-icon{
color:
#625d56 !important;
stroke:
#625d56 !important;
}
/* ACTIVE ITEM */
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item.active,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"],
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item.active,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]{
background:
transparent !important;
color:
#ad7722 !important;
border-bottom-color:
#d1a04a !important;
box-shadow:
none !important;
}
/*
SHARED STANDARD CSS FORCED THESE WHITE.
OVERRIDE THEM DIRECTLY.
*/
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label{
color:
#ad7722 !important;
-webkit-text-fill-color:
#ad7722 !important;
}
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon{
color:
#d1a04a !important;
stroke:
#d1a04a !important;
}
/* DIRECT NEON TAB FALLBACK */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active span,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active span{
background:
transparent !important;
color:
#ad7722 !important;
-webkit-text-fill-color:
#ad7722 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active svg,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active svg *,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active svg,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active svg *{
color:
#d1a04a !important;
stroke:
#d1a04a !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active::after,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs button.active::after{
background:
#d1a04a !important;
box-shadow:
none !important;
opacity:
1 !important;
}
/* =========================================================
PLAYER / CONTENT
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-panel,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-simple-panel{
background:
#fffdf9 !important;
color:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-panel h1,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-panel h2,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-panel h3{
color:
#171717 !important;
-webkit-text-fill-color:
#171717 !important;
}
/* SEARCH / FILTERS */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-search,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-search input,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-filters select{
background:
#ffffff !important;
color:
#171717 !important;
border-color:
#d8d0c4 !important;
box-shadow:
none !important;
}
/* TRACK ROWS */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row{
background:
#fffdf9 !important;
color:
#171717 !important;
border-color:
#e2dacd !important;
box-shadow:
none !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row:nth-child(even){
background:
#fffdf9 !important;
}
/* TRACK TEXT */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-copy,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-copy strong,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-copy a{
color:
#171717 !important;
-webkit-text-fill-color:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-copy span{
color:
#6b655d !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-duration{
color:
#38342f !important;
}
/* PLAY BUTTON — MOCKUP LIGHT GRAY */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-play{
background:
#efeee9 !important;
color:
#202020 !important;
border-color:
#d1cbc0 !important;
box-shadow:
none !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-play.playing,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-play[data-np-state="playing"]{
background:
#d1a04a !important;
color:
#171717 !important;
border-color:
#ad7722 !important;
box-shadow:
none !important;
}
/* WAVEFORM */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-approved-wave-path{
fill:
#c5c2bb !important;
opacity:
.95 !important;
filter:
none !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-neon-progress-svg
.np-approved-wave-path{
fill:
#d1a04a !important;
opacity:
1 !important;
filter:
none !important;
}
/* HEART / MORE */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-heart,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-more{
color:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-heart.saved{
color:
#d1a04a !important;
}
/* PRICE BUTTON — CHAMPAGNE GOLD */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-price{
background:
#d5a64f !important;
background-image:
none !important;
color:
#171717 !important;
border-color:
#c49238 !important;
box-shadow:
none !important;
}
/* OTHER PANEL TEXT */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-simple-panel,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-simple-panel p,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-simple-panel div,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-simple-panel span{
color:
#171717 !important;
}
/* =========================================================
OWNER TOOLS VISUAL COLORS
NO STRUCTURE CHANGE
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.osb-standard-owner-trigger-v2,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.osb-standard-owner-trigger-v2
.osb-canonical-menu-label{
color:
#171717 !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.osb-standard-owner-trigger-v2
.osb-canonical-menu-icon{
color:
#d1a04a !important;
stroke:
#d1a04a !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.osb-standard-owner-panel-v2{
background:
#fffdf9 !important;
color:
#171717 !important;
border-color:
#d1a04a !important;
box-shadow:
0 10px 24px
rgba(48,38,23,.15) !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.osb-standard-owner-action-v2{
background:
transparent !important;
color:
#171717 !important;
}
/* =========================================================
FINAL NEON COLOR LEAK BLOCK
These are visual-only resets.
========================================================= */
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage{
--osb-standard-menu-accent:
#d1a04a !important;
--osb-standard-menu-hover-bg:
rgba(209,160,74,.08) !important;
--osb-standard-menu-active-bg:
transparent !important;
}
/* END IVORY GOLD APPROVED COLOR MATCH V5 */
/* OSBEATS 20260914 IVORY GOLD ROUND CORNER NO-BLEED V5 */
/* =========================================================
ORIGINAL NEON OUTER RADIUS
DETECTED FROM PRE-IVORY BASELINE:
9px
========================================================= */
/* background behind the curved shell */
body.storefront-theme-ivory-gold
#storefront,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#storefront{
background:
#f2eee6 !important;
}
/* =========================================================
ACTUAL OUTER STOREFRONT
Explicit radius.
Do NOT rely on inherit.
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage,
body.storefront-theme-ivory-gold
#neonPulseThemeStage.np-theme-stage,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage.np-theme-stage{
border-radius:
9px !important;
overflow:
hidden !important;
background:
#fffdf9 !important;
background-clip:
border-box !important;
clip-path:
inset(0 round 9px) !important;
isolation:
isolate !important;
}
/* =========================================================
INNER SHELL
Same exact radius as outer storefront.
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-shell,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-shell{
border-radius:
9px !important;
overflow:
hidden !important;
background:
#fffdf9 !important;
background-clip:
border-box !important;
}
/* =========================================================
TOP WHITE HEADER
Follow the same upper curve.
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-topbar,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-topbar{
border-top-left-radius:
9px !important;
border-top-right-radius:
9px !important;
background:
#fffdf9 !important;
background-clip:
border-box !important;
}
/* =========================================================
LOWER EDGE
Everything remains clipped by the OUTER stage.
No white rectangle can extend through the bottom curves.
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-panel:last-child,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-panel:last-child{
border-bottom-left-radius:
9px !important;
border-bottom-right-radius:
9px !important;
background-clip:
border-box !important;
}
/* =========================================================
SHELL PSEUDO LAYERS
Any decorative stage layer must obey the same curve.
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage::before,
body.storefront-theme-ivory-gold
#neonPulseThemeStage::after,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage::before,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage::after{
border-radius:
9px !important;
}
/* END IVORY GOLD ROUND CORNER NO-BLEED V5 */
/* OSBEATS 20260914 IVORY GOLD PROFILE OUTLINE V1 */
/*
APPROVED IVORY GOLD MOCKUP PROFILE CIRCLE
Current live circle:
border + additional outline = visually too thick.
Approved mockup:
one thin gold perimeter only.
Scope:
border treatment only.
*/
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-avatar,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-avatar{
box-sizing:
border-box !important;
border:
2px solid #d1a04a !important;
outline:
none !important;
outline-width:
0 !important;
outline-offset:
0 !important;
}
/* END IVORY GOLD PROFILE OUTLINE V1 */
/* OSBEATS 20260914 IVORY GOLD MENU ICON HOVER V1 */
/*
IVORY GOLD ONLY
Fix:
Shared menu hover styling was allowing icons to become
white against the light Ivory navigation background.
Approved behavior:
hover icon = black.
No layout, menu structure, text, active-state,
dimensions, or functionality changes.
*/
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon,
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon{
color:
#171717 !important;
stroke:
#171717 !important;
fill:
none !important;
}
/* SVG children that use explicit stroke */
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg path,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg line,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg circle,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg polyline,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg rect{
color:
#171717 !important;
stroke:
#171717 !important;
}
/* Font / text-based menu icons */
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon i,
body.storefront-theme-ivory-gold
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon span{
color:
#171717 !important;
-webkit-text-fill-color:
#171717 !important;
}
/* END IVORY GOLD MENU ICON HOVER V1 */
/* OSBEATS 20260914 SIGNAL GRID APPROVED VISUAL SYSTEM V2 */
/* =========================================================
APPROVED SIGNAL GRID PALETTE
Exact visual direction from approved mockup:
PAGE / SHELL:
near-black + deep blue-black
PRIMARY ACCENT:
emerald / electric green
PURCHASE CTA:
bright lime green
BRAND:
OS = orange
BEATS = white
NO PURPLE
NO MAGENTA
========================================================= */
body.storefront-theme-signal-grid{
--sg-page:#020609;
--sg-shell:#050c12;
--sg-nav:#07111b;
--sg-panel:#08131d;
--sg-input:#101d29;
--sg-line:#1c303b;
--sg-line-soft:#182832;
--sg-text:#f4f7f7;
--sg-muted:#9eacb2;
--sg-green:#1df078;
--sg-green-bright:#2af77c;
--sg-green-dark:#08794a;
--sg-lime:#86fa3d;
--sg-orange:#f3a21b;
background:
#020609 !important;
color:
#f4f7f7 !important;
}
/* =========================================================
THEME PREVIEW BAR
========================================================= */
body.storefront-theme-signal-grid
.storefront-theme-preview-bar{
background:
#061018 !important;
border-color:
#1df078 !important;
border-left-color:
#1df078 !important;
color:
#ffffff !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
.storefront-theme-preview-bar span{
color:
#1df078 !important;
}
body.storefront-theme-signal-grid
.storefront-theme-preview-bar a{
color:
#ffffff !important;
border-color:
#1df078 !important;
}
/* =========================================================
OUTER STOREFRONT
PURPLE BORDER -> GREEN
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage,
body.storefront-theme-signal-grid
#neonPulseThemeStage,
body.storefront-theme-signal-grid
.np-shell{
background:
#050c12 !important;
color:
#f4f7f7 !important;
border-color:
#1df078 !important;
outline-color:
#1df078 !important;
box-shadow:
0 0 0 1px rgba(29,240,120,.22),
0 16px 36px rgba(0,0,0,.42) !important;
}
/* =========================================================
TOP NAV
========================================================= */
body.storefront-theme-signal-grid
.np-topbar{
background:
#07111b !important;
color:
#f4f7f7 !important;
border-color:
#1c303b !important;
box-shadow:
none !important;
}
/* OS = ORANGE */
body.storefront-theme-signal-grid
.np-brand strong{
color:
#f3a21b !important;
-webkit-text-fill-color:
#f3a21b !important;
}
/* BEATS = WHITE */
body.storefront-theme-signal-grid
.np-brand span{
color:
#f4f7f7 !important;
-webkit-text-fill-color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-brand{
color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-global-nav,
body.storefront-theme-signal-grid
.np-global-nav a,
body.storefront-theme-signal-grid
.np-global-nav button,
body.storefront-theme-signal-grid
.np-top-icons,
body.storefront-theme-signal-grid
.np-top-icons a,
body.storefront-theme-signal-grid
.np-top-icons button{
color:
#f4f7f7 !important;
stroke:
#f4f7f7 !important;
}
/* TOP SEARCH */
body.storefront-theme-signal-grid
.np-global-search,
body.storefront-theme-signal-grid
.np-global-search input{
background:
#101d29 !important;
color:
#f4f7f7 !important;
border-color:
#263e4e !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
.np-global-search input::placeholder{
color:
#8ea0aa !important;
}
/* MINI AVATAR */
body.storefront-theme-signal-grid
.np-mini-avatar{
border-color:
#1df078 !important;
box-shadow:
0 0 0 1px rgba(29,240,120,.35) !important;
}
/* =========================================================
HERO
KEEP CURRENT HERO ARTWORK.
REMOVE PURPLE VISUAL CAST AND COLORIZE IT GREEN.
NO HERO DIMENSION CHANGE.
========================================================= */
body.storefront-theme-signal-grid
.np-hero{
position:
relative !important;
background-color:
#063622 !important;
box-shadow:
none !important;
}
/*
Existing hero shade becomes Signal Grid green colorizer.
*/
body.storefront-theme-signal-grid
.np-hero-shade{
background:
linear-gradient(
90deg,
rgba(0,16,10,.52) 0%,
rgba(7,220,105,.40) 46%,
rgba(0,12,9,.58) 100%
) !important;
mix-blend-mode:
color !important;
opacity:
1 !important;
}
/*
Fallback colorizer for renderers where .np-hero-shade
is absent.
*/
body.storefront-theme-signal-grid
.np-hero::after{
content:
"" !important;
position:
absolute !important;
inset:
0 !important;
pointer-events:
none !important;
background:
rgba(15,235,111,.34) !important;
mix-blend-mode:
color !important;
z-index:
1 !important;
}
/* =========================================================
PROFILE BAND
========================================================= */
body.storefront-theme-signal-grid
.np-profile-strip{
background:
#050c12 !important;
color:
#f4f7f7 !important;
border-color:
#1c303b !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
.np-avatar{
box-sizing:
border-box !important;
border:
2px solid #1df078 !important;
outline:
none !important;
outline-width:
0 !important;
outline-offset:
0 !important;
box-shadow:
0 0 8px rgba(29,240,120,.20) !important;
}
body.storefront-theme-signal-grid
.np-identity,
body.storefront-theme-signal-grid
.np-identity h1,
body.storefront-theme-signal-grid
.np-identity strong{
color:
#f4f7f7 !important;
-webkit-text-fill-color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-identity-meta,
body.storefront-theme-signal-grid
.np-identity-meta span{
color:
#a5b2b8 !important;
}
body.storefront-theme-signal-grid
.np-social-row,
body.storefront-theme-signal-grid
.np-social-row a,
body.storefront-theme-signal-grid
.np-social-row button{
color:
#f4f7f7 !important;
stroke:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-inline-stats,
body.storefront-theme-signal-grid
.np-inline-stats article,
body.storefront-theme-signal-grid
.np-inline-stats strong{
color:
#f4f7f7 !important;
-webkit-text-fill-color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-inline-stats span{
color:
#a5b2b8 !important;
}
/* =========================================================
MENU BAR
APPROVED MOCKUP:
NO GREEN RECTANGLE
GREEN ICON + LABEL + THIN UNDERLINE ONLY
========================================================= */
body.storefront-theme-signal-grid
.np-tabs,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]{
background:
#07111b !important;
color:
#f4f7f7 !important;
border-color:
#1c303b !important;
box-shadow:
none !important;
}
/* DEFAULT */
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item,
body.storefront-theme-signal-grid
.np-tabs button{
background:
transparent !important;
color:
#f4f7f7 !important;
border-color:
transparent !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-label{
color:
#f4f7f7 !important;
-webkit-text-fill-color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-icon{
color:
#a8b6bc !important;
stroke:
#a8b6bc !important;
}
/* HOVER */
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover,
body.storefront-theme-signal-grid
.np-tabs button:hover{
background:
transparent !important;
color:
#1df078 !important;
}
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-label{
color:
#1df078 !important;
-webkit-text-fill-color:
#1df078 !important;
}
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item:hover
.osb-canonical-menu-icon svg *{
color:
#1df078 !important;
stroke:
#1df078 !important;
}
/* ACTIVE */
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item.active,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"],
body.storefront-theme-signal-grid
.np-tabs button.active,
body.storefront-theme-signal-grid
.np-tabs .active{
background:
transparent !important;
background-image:
none !important;
color:
#1df078 !important;
border-bottom-color:
#1df078 !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label{
color:
#1df078 !important;
-webkit-text-fill-color:
#1df078 !important;
}
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon{
color:
#1df078 !important;
stroke:
#1df078 !important;
}
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item.active::after,
body.storefront-theme-signal-grid
[data-osb-canonical-menu]
.osb-canonical-menu-item[aria-current="page"]::after,
body.storefront-theme-signal-grid
.np-tabs button.active::after{
background:
#1df078 !important;
box-shadow:
none !important;
opacity:
1 !important;
}
/* =========================================================
OWNER TOOLS DROPDOWN COLORS
========================================================= */
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v2{
background:
transparent !important;
color:
#f4f7f7 !important;
border:
0 !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v2:hover{
color:
#1df078 !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-panel-v2{
position:
absolute !important;
top:
calc(100% + 6px) !important;
right:
0 !important;
min-width:
205px !important;
z-index:
10050 !important;
padding:
6px !important;
background:
#07111b !important;
border:
1px solid #1df078 !important;
box-shadow:
0 14px 30px rgba(0,0,0,.48) !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-panel-v2[hidden]{
display:
none !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-action-v2{
display:
block !important;
width:
100% !important;
padding:
10px 12px !important;
border:
0 !important;
background:
transparent !important;
color:
#f4f7f7 !important;
text-align:
left !important;
cursor:
pointer !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-action-v2:hover{
background:
rgba(29,240,120,.08) !important;
color:
#1df078 !important;
}
body.storefront-theme-signal-grid
[data-osb-signal-owner-source-hidden="1"]{
display:
none !important;
}
/* =========================================================
TRACK AREA
========================================================= */
body.storefront-theme-signal-grid
.np-panel,
body.storefront-theme-signal-grid
.np-simple-panel{
background:
#050c12 !important;
color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-panel h1,
body.storefront-theme-signal-grid
.np-panel h2,
body.storefront-theme-signal-grid
.np-panel h3{
color:
#f4f7f7 !important;
-webkit-text-fill-color:
#f4f7f7 !important;
}
/* SEARCH + FILTERS */
body.storefront-theme-signal-grid
.np-track-search,
body.storefront-theme-signal-grid
.np-track-search input,
body.storefront-theme-signal-grid
.np-track-filters select{
background:
#101d29 !important;
color:
#f4f7f7 !important;
border-color:
#253b49 !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
.np-track-search input::placeholder{
color:
#82949e !important;
}
/* TRACK ROWS */
body.storefront-theme-signal-grid
.np-track-row{
background:
#050c12 !important;
color:
#f4f7f7 !important;
border-color:
#1c303b !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
.np-track-copy,
body.storefront-theme-signal-grid
.np-track-copy strong,
body.storefront-theme-signal-grid
.np-track-copy a{
color:
#f4f7f7 !important;
-webkit-text-fill-color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-track-copy span{
color:
#93a4ac !important;
}
body.storefront-theme-signal-grid
.np-track-duration{
color:
#d9e0e2 !important;
}
/* PLAY BUTTON */
body.storefront-theme-signal-grid
.np-track-play{
background:
#10202c !important;
color:
#f4f7f7 !important;
border-color:
#6a7e89 !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
.np-track-play.playing,
body.storefront-theme-signal-grid
.np-track-play[data-np-state="playing"]{
background:
#113b2c !important;
color:
#1df078 !important;
border-color:
#1df078 !important;
}
/* =========================================================
WAVEFORM
GRAY/BLUE BASE
GREEN PLAYED PROGRESS
========================================================= */
body.storefront-theme-signal-grid
.np-approved-wave-path{
fill:
#49616c !important;
opacity:
.94 !important;
filter:
none !important;
}
body.storefront-theme-signal-grid
.np-neon-progress-svg
.np-approved-wave-path{
fill:
#13df85 !important;
opacity:
1 !important;
filter:
none !important;
}
/* HEART / MORE */
body.storefront-theme-signal-grid
.np-track-heart,
body.storefront-theme-signal-grid
.np-track-more{
color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.np-track-heart.saved{
color:
#1df078 !important;
}
/* =========================================================
PRICE BUTTONS
APPROVED MOCKUP = BRIGHT LIME + BLACK TEXT
========================================================= */
body.storefront-theme-signal-grid
.np-track-price{
background:
#86fa3d !important;
background-image:
none !important;
color:
#071006 !important;
border-color:
#86fa3d !important;
box-shadow:
none !important;
-webkit-text-fill-color:
#071006 !important;
}
body.storefront-theme-signal-grid
.np-track-price:hover{
background:
#94ff4e !important;
color:
#071006 !important;
}
/* =========================================================
REMOVE PURPLE/MAGENTA DECORATIVE GLOW FROM SHELL ELEMENTS
========================================================= */
body.storefront-theme-signal-grid
.np-tabs,
body.storefront-theme-signal-grid
.np-profile-strip,
body.storefront-theme-signal-grid
.np-track-row,
body.storefront-theme-signal-grid
.np-panel,
body.storefront-theme-signal-grid
.np-topbar{
text-shadow:
none !important;
}
/* END SIGNAL GRID APPROVED VISUAL SYSTEM V2 */
/* OSBEATS 20260914 SIGNAL GRID OWNER + ICON PURGE V6 */
/* =========================================================
OWNER TOOLS — SINGLE ROW ONLY
========================================================= */
body.storefront-theme-signal-grid
.osb-signal-owner-wrap-v6{
position:
relative !important;
display:
flex !important;
align-items:
stretch !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6{
background:
transparent !important;
background-image:
none !important;
border:
0 !important;
box-shadow:
none !important;
color:
#f4f7f7 !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6:hover,
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6:focus,
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6:focus-visible{
background:
transparent !important;
background-image:
none !important;
color:
#1df078 !important;
border-color:
#1df078 !important;
box-shadow:
none !important;
outline-color:
#1df078 !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6:hover
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6:hover
.osb-canonical-menu-icon,
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6:focus
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
.osb-signal-owner-trigger-v6:focus
.osb-canonical-menu-icon{
color:
#1df078 !important;
stroke:
#1df078 !important;
-webkit-text-fill-color:
#1df078 !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-caret-v6{
margin-left:
5px !important;
font-size:
10px !important;
color:
currentColor !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-panel-v6{
position:
absolute !important;
top:
calc(100% + 6px) !important;
right:
0 !important;
z-index:
10050 !important;
min-width:
205px !important;
padding:
6px !important;
background:
#07111b !important;
background-image:
none !important;
border:
1px solid #1df078 !important;
box-shadow:
0 14px 30px rgba(0,0,0,.48) !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-panel-v6[hidden]{
display:
none !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-action-v6{
display:
flex !important;
width:
100% !important;
align-items:
center !important;
padding:
10px 12px !important;
margin:
0 !important;
background:
transparent !important;
background-image:
none !important;
border:
0 !important;
border-radius:
0 !important;
box-shadow:
none !important;
color:
#f4f7f7 !important;
text-align:
left !important;
text-decoration:
none !important;
}
body.storefront-theme-signal-grid
.osb-signal-owner-action-v6:hover,
body.storefront-theme-signal-grid
.osb-signal-owner-action-v6:focus,
body.storefront-theme-signal-grid
.osb-signal-owner-action-v6:focus-visible{
background:
rgba(29,240,120,.08) !important;
background-image:
none !important;
color:
#1df078 !important;
border-color:
#1df078 !important;
box-shadow:
none !important;
outline-color:
#1df078 !important;
}
/* =========================================================
SIGNAL GRID TRACK ACTIONS
NO PURPLE / MAGENTA ALLOWED.
HEART:
default = white
hover/focus = emerald green
saved = emerald green
MORE:
default = white
hover/focus = emerald green
Backgrounds remain black/transparent.
========================================================= */
/* HEART DEFAULT */
body.storefront-theme-signal-grid
.np-track-heart,
body.storefront-theme-signal-grid
.np-track-row
button[aria-label*="save" i],
body.storefront-theme-signal-grid
.np-track-row
button[title*="save" i]{
background:
transparent !important;
background-image:
none !important;
color:
#f4f7f7 !important;
border-color:
transparent !important;
box-shadow:
none !important;
outline-color:
transparent !important;
}
/* HEART HOVER / FOCUS */
body.storefront-theme-signal-grid
.np-track-heart:hover,
body.storefront-theme-signal-grid
.np-track-heart:focus,
body.storefront-theme-signal-grid
.np-track-heart:focus-visible,
body.storefront-theme-signal-grid
.np-track-row
button[aria-label*="save" i]:hover,
body.storefront-theme-signal-grid
.np-track-row
button[aria-label*="save" i]:focus,
body.storefront-theme-signal-grid
.np-track-row
button[title*="save" i]:hover,
body.storefront-theme-signal-grid
.np-track-row
button[title*="save" i]:focus{
background:
rgba(29,240,120,.08) !important;
background-image:
none !important;
color:
#1df078 !important;
border-color:
#1df078 !important;
box-shadow:
none !important;
outline-color:
#1df078 !important;
}
/* SAVED HEART */
body.storefront-theme-signal-grid
.np-track-heart.saved,
body.storefront-theme-signal-grid
.np-track-heart.is-saved,
body.storefront-theme-signal-grid
.np-track-heart[aria-pressed="true"]{
background:
rgba(29,240,120,.08) !important;
background-image:
none !important;
color:
#1df078 !important;
border-color:
transparent !important;
box-shadow:
none !important;
}
/* HEART SVG */
body.storefront-theme-signal-grid
.np-track-heart:hover svg,
body.storefront-theme-signal-grid
.np-track-heart:hover svg *,
body.storefront-theme-signal-grid
.np-track-heart:focus svg,
body.storefront-theme-signal-grid
.np-track-heart:focus svg *,
body.storefront-theme-signal-grid
.np-track-heart.saved svg,
body.storefront-theme-signal-grid
.np-track-heart.saved svg *,
body.storefront-theme-signal-grid
.np-track-heart.is-saved svg,
body.storefront-theme-signal-grid
.np-track-heart.is-saved svg *{
color:
#1df078 !important;
stroke:
#1df078 !important;
}
/* THREE-DOT / MORE DEFAULT */
body.storefront-theme-signal-grid
.np-track-more,
body.storefront-theme-signal-grid
.np-track-row
button[aria-label*="more" i],
body.storefront-theme-signal-grid
.np-track-row
button[title*="more" i]{
background:
transparent !important;
background-image:
none !important;
color:
#f4f7f7 !important;
border-color:
transparent !important;
box-shadow:
none !important;
outline-color:
transparent !important;
}
/* THREE-DOT / MORE HOVER */
body.storefront-theme-signal-grid
.np-track-more:hover,
body.storefront-theme-signal-grid
.np-track-more:focus,
body.storefront-theme-signal-grid
.np-track-more:focus-visible,
body.storefront-theme-signal-grid
.np-track-row
button[aria-label*="more" i]:hover,
body.storefront-theme-signal-grid
.np-track-row
button[aria-label*="more" i]:focus,
body.storefront-theme-signal-grid
.np-track-row
button[title*="more" i]:hover,
body.storefront-theme-signal-grid
.np-track-row
button[title*="more" i]:focus{
background:
rgba(29,240,120,.08) !important;
background-image:
none !important;
color:
#1df078 !important;
border-color:
#1df078 !important;
box-shadow:
none !important;
outline-color:
#1df078 !important;
}
/* THREE-DOT SVG / CHILD ELEMENTS */
body.storefront-theme-signal-grid
.np-track-more:hover svg,
body.storefront-theme-signal-grid
.np-track-more:hover svg *,
body.storefront-theme-signal-grid
.np-track-more:focus svg,
body.storefront-theme-signal-grid
.np-track-more:focus svg *,
body.storefront-theme-signal-grid
.np-track-more:hover span,
body.storefront-theme-signal-grid
.np-track-more:focus span{
color:
#1df078 !important;
stroke:
#1df078 !important;
fill:
#1df078 !important;
}
/* =========================================================
GENERIC TRACK ACTION PURPLE-KILL
Covers shared Neon hover/focus selectors that may target
the track action buttons directly.
========================================================= */
body.storefront-theme-signal-grid
.np-track-row button:hover,
body.storefront-theme-signal-grid
.np-track-row button:focus,
body.storefront-theme-signal-grid
.np-track-row button:focus-visible{
--np-accent:
#1df078 !important;
--theme-accent:
#1df078 !important;
}
/* Do not override lime purchase button with generic rule */
body.storefront-theme-signal-grid
.np-track-row
.np-track-price:hover,
body.storefront-theme-signal-grid
.np-track-row
.np-track-price:focus{
background:
#94ff4e !important;
color:
#071006 !important;
border-color:
#94ff4e !important;
box-shadow:
none !important;
}
/* END SIGNAL GRID OWNER + ICON PURGE V6 */
/* OSBEATS 20260914 SIGNAL GRID OWNER SOURCE CSS V8 */
/*
DEFENSIVE SOURCE POLICY
Signal Grid is not permitted to show the old
.osb-canonical-owner second row.
*/
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-canonical-owner{
display:
none !important;
}
/* SINGLE OWNER TOOLS CONTROL */
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8{
position:
relative !important;
display:
flex !important;
align-items:
stretch !important;
}
/* TRIGGER */
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8
.osb-standard-owner-trigger-v2{
background:
transparent !important;
background-image:
none !important;
color:
#f4f7f7 !important;
border:
0 !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8
.osb-standard-owner-trigger-v2:hover,
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8
.osb-standard-owner-trigger-v2:focus,
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8
.osb-standard-owner-trigger-v2:focus-visible{
background:
transparent !important;
background-image:
none !important;
color:
#1df078 !important;
border-color:
#1df078 !important;
box-shadow:
none !important;
outline-color:
#1df078 !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8
.osb-standard-owner-trigger-v2:hover
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8
.osb-standard-owner-trigger-v2:hover
.osb-canonical-menu-icon{
color:
#1df078 !important;
stroke:
#1df078 !important;
}
/* PANEL */
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-panel-v8{
position:
fixed !important;
z-index:
10050 !important;
min-width:
205px !important;
padding:
6px !important;
display:
none !important;
background:
#07111b !important;
background-image:
none !important;
border:
1px solid #1df078 !important;
box-shadow:
0 14px 30px rgba(0,0,0,.48) !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-source-v8.open
.osb-signal-owner-panel-v8{
display:
block !important;
}
/* ACTIONS */
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-panel-v8
.osb-standard-owner-action-v2{
display:
flex !important;
width:
100% !important;
align-items:
center !important;
padding:
10px 12px !important;
background:
transparent !important;
background-image:
none !important;
border:
0 !important;
box-shadow:
none !important;
color:
#f4f7f7 !important;
text-align:
left !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-panel-v8
.osb-standard-owner-action-v2:hover,
body.storefront-theme-signal-grid
#signalGridThemeStage
.osb-signal-owner-panel-v8
.osb-standard-owner-action-v2:focus{
background:
rgba(29,240,120,.08) !important;
color:
#1df078 !important;
box-shadow:
none !important;
}
/* END SIGNAL GRID OWNER SOURCE CSS V8 */
/* OSBEATS 20260914 SIGNAL GRID FUNCTIONAL CSS V3 */
/* =========================================================
PLAY BUTTON — SIGNAL GRID GREEN / BLACK ONLY
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]{
position:
relative !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus-visible{
border-color:
#1df078 !important;
color:
#1df078 !important;
outline:
none !important;
outline-color:
transparent !important;
box-shadow:
none !important;
background:
#101d29 !important;
background-image:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover svg,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover svg *,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus svg,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus svg *{
color:
#1df078 !important;
stroke:
#1df078 !important;
fill:
#1df078 !important;
}
/* =========================================================
PLAYING STATE — REAL PAUSE ICON
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]{
border-color:
#1df078 !important;
background:
#101d29 !important;
color:
#1df078 !important;
box-shadow:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]
> *{
opacity:
0 !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::before,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::after{
content:
"" !important;
position:
absolute !important;
top:
50% !important;
width:
3px !important;
height:
11px !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
border-radius:
1px !important;
background:
#1df078 !important;
clip-path:
none !important;
transform:
translateY(-50%) !important;
opacity:
1 !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::before{
left:
calc(50% - 5px) !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::after{
left:
calc(50% + 2px) !important;
}
/* =========================================================
WAVEFORM — BASE NEVER CHANGES SIZE
Progress is an absolutely positioned clone.
It cannot participate in layout or collapse the waveform.
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave{
position:
relative !important;
overflow:
hidden !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave
> .np-approved-wave-svg,
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave
> .np-osbeats-real-wave-svg{
display:
block !important;
width:
100% !important;
max-width:
100% !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave
.sg-wave-progress-v1{
position:
absolute !important;
inset:
0 !important;
z-index:
2 !important;
width:
100% !important;
height:
100% !important;
max-width:
100% !important;
margin:
0 !important;
pointer-events:
none !important;
display:
block !important;
color:
#1df078 !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave
.sg-wave-progress-v1
path,
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave
.sg-wave-progress-v1
line,
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave
.sg-wave-progress-v1
polyline{
stroke:
#1df078 !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave
.sg-wave-progress-v1
rect{
fill:
#1df078 !important;
stroke:
#1df078 !important;
}
/* =========================================================
CONTACT
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-action="contact"]{
cursor:
pointer !important;
}
/* =========================================================
SIGNAL GRID PLAY CONTROL HARD COLOR LOCK V2
The rendered play button is identified by data-np-play.
No inherited Neon/Purple hover, focus, SVG, pseudo-element,
outline or shadow is permitted.
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]{
--np-accent:
#1df078 !important;
--theme-accent:
#1df078 !important;
--accent:
#1df078 !important;
--neon:
#1df078 !important;
accent-color:
#1df078 !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus-visible{
color:
#1df078 !important;
border-color:
#1df078 !important;
outline:
none !important;
outline-width:
0 !important;
outline-color:
transparent !important;
box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
background-color:
#101d29 !important;
background-image:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover > *,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus > *,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus-visible > *{
color:
#1df078 !important;
border-color:
#1df078 !important;
outline-color:
transparent !important;
box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover svg,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus svg,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus-visible svg{
color:
#1df078 !important;
stroke:
#1df078 !important;
outline:
none !important;
box-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover svg circle,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus svg circle,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus-visible svg circle{
stroke:
#1df078 !important;
filter:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover svg path,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus svg path,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus-visible svg path{
stroke:
#1df078 !important;
filter:
none !important;
}
/*
Catch a ring drawn with ::before / ::after by older
Neon Pulse styling without interfering with the V2
playing-state pause bars.
*/
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):hover::before,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):hover::after,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):focus::before,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):focus::after{
border-color:
#1df078 !important;
outline-color:
transparent !important;
box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
}
/*
Preserve approved pause bars as green.
*/
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::before,
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::after{
background:
#1df078 !important;
border-color:
#1df078 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* =========================================================
SIGNAL GRID PLAY BUTTON ROOT HOVER FIX V3
Verified DOM:
button.np-track-play[data-np-play]
The play glyph is literal text.
The waveform is a DIFFERENT data-np-play button.
Therefore:
- target .np-track-play only
- remove inherited idle pseudo artwork completely
- preserve V3 pause bars only while playing
========================================================= */
/* REAL CIRCULAR PLAY CONTROL */
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]{
-webkit-appearance:
none !important;
appearance:
none !important;
border-image:
none !important;
outline:
0 !important;
outline-offset:
0 !important;
box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
}
/* HOVER / FOCUS / ACTIVE — GREEN + BLACK ONLY */
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:hover,
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus,
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:focus-visible,
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:active,
html
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-row:hover
button.np-track-play[data-np-play],
html
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-row:focus-within
button.np-track-play[data-np-play]{
border:
1px solid #1df078 !important;
border-color:
#1df078 !important;
border-image:
none !important;
background:
#101d29 !important;
background-color:
#101d29 !important;
background-image:
none !important;
color:
#ffffff !important;
outline:
0 !important;
outline-width:
0 !important;
outline-style:
none !important;
outline-color:
transparent !important;
outline-offset:
0 !important;
box-shadow:
none !important;
-webkit-box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
}
/*
IDLE/HOVER:
delete inherited Neon pseudo rings instead of attempting
to recolor them.
Safe because the actual play glyph is the literal ▶
inside the button.
*/
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"])::before,
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"])::after{
content:
none !important;
display:
none !important;
width:
0 !important;
height:
0 !important;
background:
none !important;
background-color:
transparent !important;
background-image:
none !important;
border:
0 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* PLAYING STATE — ONLY THE TWO GREEN PAUSE BARS SURVIVE */
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]{
border:
1px solid #1df078 !important;
border-color:
#1df078 !important;
background:
#101d29 !important;
background-image:
none !important;
color:
#1df078 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::before,
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::after{
content:
"" !important;
display:
block !important;
position:
absolute !important;
top:
50% !important;
width:
3px !important;
height:
11px !important;
padding:
0 !important;
margin:
0 !important;
border:
0 !important;
border-radius:
1px !important;
background:
#1df078 !important;
background-color:
#1df078 !important;
background-image:
none !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
transform:
translateY(-50%) !important;
}
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::before{
left:
calc(50% - 5px) !important;
}
html
body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::after{
left:
calc(50% + 2px) !important;
}
/* END SIGNAL GRID FUNCTIONAL CSS V3 */
/* OSBEATS 20260914 SIGNAL GRID PLAY ICON V4B */
/* REAL SIGNAL GRID PLAY BUTTON */
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]{
position:
relative !important;
font-size:
0 !important;
line-height:
1 !important;
overflow:
visible !important;
}
/* IDLE PLAY TRIANGLE */
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"])::before{
content:
"" !important;
display:
block !important;
position:
absolute !important;
left:
50% !important;
top:
50% !important;
width:
0 !important;
height:
0 !important;
margin:
0 !important;
padding:
0 !important;
border-top:
5px solid transparent !important;
border-bottom:
5px solid transparent !important;
border-left:
8px solid #f4f7f7 !important;
border-right:
0 !important;
border-radius:
0 !important;
background:
transparent !important;
background-image:
none !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
transform:
translate(-38%,-50%) !important;
opacity:
1 !important;
pointer-events:
none !important;
}
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"])::after{
content:
none !important;
display:
none !important;
}
/* HOVER / FOCUS */
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):hover,
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):focus,
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):focus-visible{
border-color:
#1df078 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):hover::before,
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):focus::before,
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play]:not([data-sg-state="playing"]):focus-visible::before{
border-left-color:
#1df078 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* PLAYING STATE */
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]{
border-color:
#1df078 !important;
background:
#101d29 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::before,
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::after{
content:
"" !important;
display:
block !important;
position:
absolute !important;
top:
50% !important;
width:
3px !important;
height:
11px !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
border-radius:
1px !important;
background:
#1df078 !important;
background-image:
none !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
transform:
translateY(-50%) !important;
opacity:
1 !important;
pointer-events:
none !important;
}
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::before{
left:
calc(50% - 5px) !important;
}
html body.storefront-theme-signal-grid
#signalGridThemeStage
button.np-track-play[data-np-play][data-sg-state="playing"]::after{
left:
calc(50% + 2px) !important;
}
/* END SIGNAL GRID PLAY ICON V4B */
/* OSBEATS 20260914 SIGNAL GRID ACTIVE TAB V1 */
/*
Approved Signal Grid active menu state:
- no filled green rectangle
- transparent menu background
- emerald icon
- emerald text
- thin emerald underline
- no geometry change
*/
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
color:
#1df078 !important;
border:
0 !important;
outline:
0 !important;
box-shadow:
inset 0 -2px 0 #1df078 !important;
filter:
none !important;
}
/* ACTIVE HOVER REMAINS TRANSPARENT */
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active:hover,
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]:hover{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
color:
#1df078 !important;
box-shadow:
inset 0 -2px 0 #1df078 !important;
}
/* ACTIVE LABEL + ICON */
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon{
color:
#1df078 !important;
-webkit-text-fill-color:
#1df078 !important;
}
/* SVG ICON */
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
svg,
body.storefront-theme-signal-grid
#signalGridThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
svg{
color:
#1df078 !important;
stroke:
#1df078 !important;
}
/* END SIGNAL GRID ACTIVE TAB V1 */
/* OSBEATS 20260914 CRIMSON LUXE PURPLE PURGE V2 */
/* =========================================================
AUTHORITATIVE CRIMSON PALETTE
========================================================= */
body.storefront-theme-crimson-luxe{
--osb-standard-menu-accent:
#ef4651 !important;
--osb-standard-menu-hover-bg:
rgba(239,70,81,.10) !important;
--osb-standard-menu-active-bg:
transparent !important;
--np-accent:
#ef4651 !important;
--theme-accent:
#ef4651 !important;
--accent:
#ef4651 !important;
--neon:
#ef4651 !important;
accent-color:
#ef4651 !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage{
--np-accent:
#ef4651 !important;
--theme-accent:
#ef4651 !important;
--accent:
#ef4651 !important;
--neon:
#ef4651 !important;
border-color:
#ef4651 !important;
outline-color:
#ef4651 !important;
box-shadow:
none !important;
}
/* =========================================================
OUTER FRAME
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-shell{
border-color:
#ef4651 !important;
outline:
none !important;
box-shadow:
none !important;
}
body.storefront-theme-crimson-luxe
#storefrontThemePreviewBar{
border-color:
#ef4651 !important;
box-shadow:
none !important;
}
/* =========================================================
TRACK ROW HOVER / PLAYING
This is the state V1 missed.
========================================================= */
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:hover,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:focus-within{
background:
linear-gradient(
90deg,
rgba(239,70,81,.10),
#081321 18%
) !important;
box-shadow:
inset 2px 0 0 #ef4651 !important;
outline:
none !important;
}
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row.playing{
background:
linear-gradient(
90deg,
rgba(239,70,81,.12),
#081321 18%
) !important;
box-shadow:
inset 2px 0 0 #ef4651 !important;
}
/* =========================================================
CIRCULAR PLAY CONTROL
========================================================= */
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play{
outline:
none !important;
box-shadow:
none !important;
filter:
none !important;
text-shadow:
none !important;
}
/*
Direct hover/focus AND inherited row-hover state.
*/
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:hover,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:focus,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:focus-visible,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:active,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:hover
button.np-track-play,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:focus-within
button.np-track-play{
border-color:
#ef4651 !important;
background:
#101b2a !important;
background-image:
none !important;
color:
#ef4651 !important;
outline:
0 !important;
outline-color:
transparent !important;
box-shadow:
none !important;
-webkit-box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
}
/* PLAY TRIANGLE / PSEUDO ARTWORK */
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:hover::before,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:focus::before,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:hover
button.np-track-play::before,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:focus-within
button.np-track-play::before{
border-left-color:
#ef4651 !important;
box-shadow:
none !important;
filter:
none !important;
}
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:hover::after,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:focus::after,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:hover
button.np-track-play::after,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:focus-within
button.np-track-play::after{
box-shadow:
none !important;
outline-color:
transparent !important;
filter:
none !important;
}
/* SVG PLAY ARTWORK IF PRESENT */
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:hover svg,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play:hover svg *,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:hover
button.np-track-play svg,
html
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row:hover
button.np-track-play svg *{
color:
#ef4651 !important;
stroke:
#ef4651 !important;
filter:
none !important;
}
/* =========================================================
HEART + THREE DOT CONTROLS
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-heart,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-more{
color:
#ffffff !important;
background:
transparent !important;
box-shadow:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-heart:hover,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-heart:focus,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-more:hover,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-more:focus{
color:
#ef4651 !important;
background:
rgba(239,70,81,.08) !important;
border-color:
#ef4651 !important;
outline:
none !important;
box-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-heart.saved,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-heart.is-saved,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-heart[aria-pressed="true"]{
color:
#ef4651 !important;
}
/* =========================================================
WAVEFORM PROGRESS
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
[class*="progress"]
.np-approved-wave-path,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
svg[class*="progress"]
path{
fill:
#ef4651 !important;
stroke:
#ef4651 !important;
}
/* =========================================================
FALLBACK COVER ART
Does not alter uploaded artwork.
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-cover-fallback{
color:
#ef4651 !important;
border-color:
#ef4651 !important;
background:
#120b0b !important;
}
/* =========================================================
PUBLIC MENU
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item{
background:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:hover,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item:focus{
background:
transparent !important;
color:
#ef4651 !important;
box-shadow:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
transparent !important;
color:
#ef4651 !important;
border:
0 !important;
box-shadow:
inset 0 -2px 0 #ef4651 !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-label,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon{
color:
#ef4651 !important;
-webkit-text-fill-color:
#ef4651 !important;
}
/* END CRIMSON LUXE PURPLE PURGE V2 */
/* OSBEATS 20260914 CRIMSON OWNER PLAYBACK CSS V1 */
/* =========================================================
OWNER TOOLS — ONE MENU ROW ONLY
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-source-v1{
position:
relative !important;
display:
flex !important;
align-items:
stretch !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-source-v1
.osb-standard-owner-trigger-v2{
background:
transparent !important;
background-image:
none !important;
color:
#ffffff !important;
border:
0 !important;
box-shadow:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-source-v1
.osb-standard-owner-trigger-v2:hover,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-source-v1
.osb-standard-owner-trigger-v2:focus{
background:
transparent !important;
color:
#ef4651 !important;
box-shadow:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-panel-v1{
position:
fixed !important;
z-index:
10050 !important;
min-width:
205px !important;
padding:
6px !important;
display:
none !important;
background:
#081321 !important;
background-image:
none !important;
border:
1px solid #ef4651 !important;
box-shadow:
0 14px 30px rgba(0,0,0,.48) !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-source-v1.open
.osb-crimson-owner-panel-v1{
display:
block !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-panel-v1
.osb-standard-owner-action-v2{
display:
flex !important;
width:
100% !important;
align-items:
center !important;
padding:
10px 12px !important;
background:
transparent !important;
border:
0 !important;
color:
#ffffff !important;
box-shadow:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-panel-v1
.osb-standard-owner-action-v2:hover,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-crimson-owner-panel-v1
.osb-standard-owner-action-v2:focus{
background:
rgba(239,70,81,.09) !important;
color:
#ef4651 !important;
box-shadow:
none !important;
}
/*
Defensive protection only.
The source-level branch prevents this row from being
created for Crimson in the first place.
*/
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.osb-canonical-owner{
display:
none !important;
}
/* =========================================================
CRIMSON PLAYING STATE
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play[data-np-play]{
position:
relative !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play[data-np-play][data-cl-state="playing"]{
font-size:
0 !important;
border-color:
#ef4651 !important;
background:
#101b2a !important;
color:
#ef4651 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/*
Two authoritative pause bars while audio is playing.
*/
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play[data-np-play][data-cl-state="playing"]::before,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play[data-np-play][data-cl-state="playing"]::after{
content:
"" !important;
display:
block !important;
position:
absolute !important;
top:
50% !important;
width:
3px !important;
height:
11px !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
border-radius:
1px !important;
background:
#ef4651 !important;
background-color:
#ef4651 !important;
background-image:
none !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
transform:
translateY(-50%) !important;
opacity:
1 !important;
pointer-events:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play[data-np-play][data-cl-state="playing"]::before{
left:
calc(50% - 5px) !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
button.np-track-play[data-np-play][data-cl-state="playing"]::after{
left:
calc(50% + 2px) !important;
}
/* =========================================================
FIXED-SIZE WAVEFORM
The base waveform always remains 100% width.
Playback progress is an absolute clone layered above it.
The progress layer therefore cannot participate in layout
or compress the waveform column.
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave{
position:
relative !important;
width:
100% !important;
min-width:
0 !important;
max-width:
100% !important;
box-sizing:
border-box !important;
overflow:
hidden !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
> .np-approved-wave-svg,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
> .np-osbeats-real-wave-svg{
display:
block !important;
width:
100% !important;
min-width:
100% !important;
max-width:
100% !important;
margin:
0 !important;
transform:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
.cl-wave-progress-v1{
position:
absolute !important;
inset:
0 !important;
z-index:
2 !important;
display:
block !important;
width:
100% !important;
min-width:
100% !important;
max-width:
100% !important;
height:
100% !important;
margin:
0 !important;
transform:
none !important;
pointer-events:
none !important;
color:
#ef4651 !important;
}
/* PROGRESS ARTWORK */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
.cl-wave-progress-v1
path,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
.cl-wave-progress-v1
line,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
.cl-wave-progress-v1
polyline{
stroke:
#ef4651 !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
.cl-wave-progress-v1
rect{
fill:
#ef4651 !important;
stroke:
#ef4651 !important;
}
/*
Current standard waveform uses a filled path.
*/
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave
.cl-wave-progress-v1
.np-approved-wave-path{
fill:
#ef4651 !important;
stroke:
none !important;
opacity:
1 !important;
}
/* END CRIMSON OWNER PLAYBACK CSS V1 */
/* OSBEATS 20260914 CRIMSON LUXE TRACK ACTIONS CSS V1 */
/* =========================================================
CRIMSON TRACK PLAYER — DESKTOP LAYOUT
Columns:
cover / play / title / waveform / duration /
heart / price / download+Facebook+X / more
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row{
grid-template-columns:
44px
34px
minmax(190px,1.45fr)
minmax(150px,1fr)
42px
28px
82px
104px
24px !important;
column-gap:
8px !important;
align-items:
center !important;
}
/* ACTION GROUP */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-actions-v1{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
5px !important;
min-width:
0 !important;
width:
104px !important;
}
/* BUTTON SHELL */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
background:
#111722 !important;
background-image:
none !important;
border:
1px solid #66232a !important;
border-radius:
0 !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
cursor:
pointer !important;
}
/* SVG SIZE */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1
svg{
width:
15px !important;
height:
15px !important;
fill:
none !important;
stroke:
#ffffff !important;
stroke-width:
1.9 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
/* FACEBOOK MARK */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-facebook-v1
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* HOVER / FOCUS */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1:hover,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1:focus,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1:focus-visible{
background:
rgba(239,70,81,.13) !important;
border-color:
#ef4651 !important;
color:
#ef4651 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1:hover
svg,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1:focus
svg{
stroke:
#ef4651 !important;
}
/* DOWNLOAD STATE */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-download-v1.download-ready{
border-color:
#9a3039 !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-download-v1.download-locked{
opacity:
.46 !important;
}
/* =========================================================
PRESERVE WAVEFORM WIDTH
New action controls receive their own dedicated column.
The waveform remains a flexible minmax column.
========================================================= */
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave{
min-width:
0 !important;
width:
100% !important;
max-width:
100% !important;
}
/* =========================================================
MEDIUM DESKTOP / TABLET
========================================================= */
@media(max-width:1180px){
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(150px,1.3fr)
minmax(110px,.8fr)
38px
26px
72px
92px
22px !important;
column-gap:
5px !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-actions-v1{
width:
92px !important;
gap:
3px !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1{
width:
27px !important;
height:
27px !important;
min-width:
27px !important;
min-height:
27px !important;
}
}
/* =========================================================
MOBILE
Keep all three actions visible.
Hide waveform + duration only when space becomes tight.
========================================================= */
@media(max-width:820px){
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-wave,
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-duration{
display:
none !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(0,1fr)
26px
70px
84px
22px !important;
column-gap:
4px !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-actions-v1{
width:
84px !important;
gap:
3px !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1{
width:
24px !important;
height:
24px !important;
min-width:
24px !important;
min-height:
24px !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1
svg{
width:
12px !important;
height:
12px !important;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media(max-width:560px){
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.np-track-row{
grid-template-columns:
38px
30px
minmax(0,1fr)
22px
60px
68px
20px !important;
column-gap:
3px !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-actions-v1{
width:
68px !important;
gap:
2px !important;
}
body.storefront-theme-crimson-luxe
#crimsonLuxeThemeStage
.cl-track-action-v1{
width:
21px !important;
height:
21px !important;
min-width:
21px !important;
min-height:
21px !important;
}
}
/* END CRIMSON LUXE TRACK ACTIONS CSS V1 */
/* OSBEATS 20260914 SIGNAL GRID TRACK ACTIONS CSS V1 */
/* =========================================================
CRIMSON TRACK PLAYER — DESKTOP LAYOUT
Columns:
cover / play / title / waveform / duration /
heart / price / download+Facebook+X / more
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-row{
grid-template-columns:
44px
34px
minmax(190px,1.45fr)
minmax(150px,1fr)
42px
28px
82px
104px
24px !important;
column-gap:
8px !important;
align-items:
center !important;
}
/* ACTION GROUP */
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-actions-v1{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
5px !important;
min-width:
0 !important;
width:
104px !important;
}
/* BUTTON SHELL */
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
background:
#07111b !important;
background-image:
none !important;
border:
1px solid #185035 !important;
border-radius:
0 !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
cursor:
pointer !important;
}
/* SVG SIZE */
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1
svg{
width:
15px !important;
height:
15px !important;
fill:
none !important;
stroke:
#ffffff !important;
stroke-width:
1.9 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
/* FACEBOOK MARK */
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-facebook-v1
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* HOVER / FOCUS */
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1:hover,
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1:focus,
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1:focus-visible{
background:
rgba(29,240,120,.10) !important;
border-color:
#1df078 !important;
color:
#1df078 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1:hover
svg,
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1:focus
svg{
stroke:
#1df078 !important;
}
/* DOWNLOAD STATE */
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-download-v1.download-ready{
border-color:
#1b8050 !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-download-v1.download-locked{
opacity:
.46 !important;
}
/* =========================================================
PRESERVE WAVEFORM WIDTH
New action controls receive their own dedicated column.
The waveform remains a flexible minmax column.
========================================================= */
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave{
min-width:
0 !important;
width:
100% !important;
max-width:
100% !important;
}
/* =========================================================
MEDIUM DESKTOP / TABLET
========================================================= */
@media(max-width:1180px){
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(150px,1.3fr)
minmax(110px,.8fr)
38px
26px
72px
92px
22px !important;
column-gap:
5px !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-actions-v1{
width:
92px !important;
gap:
3px !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1{
width:
27px !important;
height:
27px !important;
min-width:
27px !important;
min-height:
27px !important;
}
}
/* =========================================================
MOBILE
Keep all three actions visible.
Hide waveform + duration only when space becomes tight.
========================================================= */
@media(max-width:820px){
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-wave,
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-duration{
display:
none !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(0,1fr)
26px
70px
84px
22px !important;
column-gap:
4px !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-actions-v1{
width:
84px !important;
gap:
3px !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1{
width:
24px !important;
height:
24px !important;
min-width:
24px !important;
min-height:
24px !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1
svg{
width:
12px !important;
height:
12px !important;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media(max-width:560px){
body.storefront-theme-signal-grid
#signalGridThemeStage
.np-track-row{
grid-template-columns:
38px
30px
minmax(0,1fr)
22px
60px
68px
20px !important;
column-gap:
3px !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-actions-v1{
width:
68px !important;
gap:
2px !important;
}
body.storefront-theme-signal-grid
#signalGridThemeStage
.sg-track-action-v1{
width:
21px !important;
height:
21px !important;
min-width:
21px !important;
min-height:
21px !important;
}
}
/* END SIGNAL GRID TRACK ACTIONS CSS V1 */
/* OSBEATS 20260915 IVORY GOLD TRACK ACTIONS CSS V2 */
/* =========================================================
CRIMSON TRACK PLAYER — DESKTOP LAYOUT
Columns:
cover / play / title / waveform / duration /
heart / price / download+Facebook+X / more
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row{
grid-template-columns:
44px
34px
minmax(190px,1.45fr)
minmax(150px,1fr)
42px
28px
82px
104px
24px !important;
column-gap:
8px !important;
align-items:
center !important;
}
/* ACTION GROUP */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-actions-v1{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
5px !important;
min-width:
0 !important;
width:
104px !important;
}
/* BUTTON SHELL */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
background:
#fffdf9 !important;
background-image:
none !important;
border:
1px solid #d9c69d !important;
border-radius:
0 !important;
color:
#171717 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
cursor:
pointer !important;
}
/* SVG SIZE */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1
svg{
width:
15px !important;
height:
15px !important;
fill:
none !important;
stroke:
#171717 !important;
stroke-width:
1.9 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
/* FACEBOOK MARK */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-facebook-v1
svg
path:first-child{
fill:
#171717 !important;
stroke:
#171717 !important;
}
/* HOVER / FOCUS */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:hover,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus-visible{
background:
rgba(209,160,74,.14) !important;
border-color:
#d1a04a !important;
color:
#d1a04a !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:hover
svg,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus
svg{
stroke:
#d1a04a !important;
}
/* DOWNLOAD STATE */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-download-v1.download-ready{
border-color:
#d1a04a !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-download-v1.download-locked{
opacity:
.46 !important;
}
/* =========================================================
PRESERVE WAVEFORM WIDTH
New action controls receive their own dedicated column.
The waveform remains a flexible minmax column.
========================================================= */
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-wave{
min-width:
0 !important;
width:
100% !important;
max-width:
100% !important;
}
/* =========================================================
MEDIUM DESKTOP / TABLET
========================================================= */
@media(max-width:1180px){
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(150px,1.3fr)
minmax(110px,.8fr)
38px
26px
72px
92px
22px !important;
column-gap:
5px !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-actions-v1{
width:
92px !important;
gap:
3px !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1{
width:
27px !important;
height:
27px !important;
min-width:
27px !important;
min-height:
27px !important;
}
}
/* =========================================================
MOBILE
Keep all three actions visible.
Hide waveform + duration only when space becomes tight.
========================================================= */
@media(max-width:820px){
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-wave,
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-duration{
display:
none !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(0,1fr)
26px
70px
84px
22px !important;
column-gap:
4px !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-actions-v1{
width:
84px !important;
gap:
3px !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1{
width:
24px !important;
height:
24px !important;
min-width:
24px !important;
min-height:
24px !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1
svg{
width:
12px !important;
height:
12px !important;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media(max-width:560px){
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row{
grid-template-columns:
38px
30px
minmax(0,1fr)
22px
60px
68px
20px !important;
column-gap:
3px !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-actions-v1{
width:
68px !important;
gap:
2px !important;
}
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1{
width:
21px !important;
height:
21px !important;
min-width:
21px !important;
min-height:
21px !important;
}
}
/* END IVORY GOLD TRACK ACTIONS CSS V2 */
/* OSBEATS 20260915 IVORY GOLD ACTIVE INDICATOR V3 */
/* =========================================================
ROOT CASCADE CORRECTION
Ivory uses Neon Pulse geometry and may therefore carry
both theme classes.
This combined selector is intentionally more specific
than either single-theme variable declaration.
========================================================= */
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold{
--osb-standard-menu-accent:
#d1a04a !important;
--osb-standard-menu-active-bg:
transparent !important;
--osb-standard-menu-hover-bg:
rgba(209,160,74,.10) !important;
--np-accent:
#d1a04a !important;
--theme-accent:
#d1a04a !important;
--accent:
#d1a04a !important;
}
/* =========================================================
EXACT NEON V5 PATH — IVORY OVERRIDE
Mirrors the late Neon V5 path but adds the Ivory class,
giving this rule greater specificity.
========================================================= */
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
color:
#ad7722 !important;
border:
0 !important;
border-bottom:
2px solid #d1a04a !important;
border-bottom-color:
#d1a04a !important;
outline:
0 !important;
outline-color:
transparent !important;
box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
}
/* =========================================================
IVORY-ONLY FALLBACK
Covers Ivory even if geometry routing changes later.
========================================================= */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
color:
#ad7722 !important;
border-bottom-width:
2px !important;
border-bottom-style:
solid !important;
border-bottom-color:
#d1a04a !important;
box-shadow:
none !important;
filter:
none !important;
}
/* =========================================================
ACTIVE ICON + LABEL
========================================================= */
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon{
color:
#ad7722 !important;
-webkit-text-fill-color:
#ad7722 !important;
}
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
svg{
color:
#d1a04a !important;
stroke:
#d1a04a !important;
}
/* =========================================================
KILL ANY NEON PSEUDO INDICATOR
========================================================= */
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active::before,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active::after{
content:
none !important;
display:
none !important;
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* =========================================================
HOVER WHILE ACTIVE STAYS GOLD
========================================================= */
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold:not(.storefront-theme-midnight-minimal)
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active:hover{
background:
transparent !important;
color:
#ad7722 !important;
border-bottom:
2px solid #d1a04a !important;
border-bottom-color:
#d1a04a !important;
box-shadow:
none !important;
}
/* END IVORY GOLD ACTIVE INDICATOR V3 */
/* OSBEATS 20260915 IVORY GOLD PLAY GRADIENT V1B */
/* DEFAULT PLAY BUTTON */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play{
background:
linear-gradient(
135deg,
#e2c078 0%,
#d1a04a 24%,
#ad7722 45%,
#5a421d 68%,
#171717 100%
) !important;
background-color:
#ad7722 !important;
border:
1px solid #d1a04a !important;
outline:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.34),
0 1px 2px rgba(0,0,0,.18) !important;
filter:
none !important;
}
/* PLAY TRIANGLE */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play::before,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play::before{
border-left-color:
#fffdf9 !important;
filter:
none !important;
}
/* SVG / ICON FALLBACK */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play
svg,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play
svg *,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play
svg,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play
svg *{
color:
#fffdf9 !important;
fill:
#fffdf9 !important;
stroke:
#fffdf9 !important;
}
/* HOVER / FOCUS */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:hover,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:focus,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:focus-visible,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:hover,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:focus,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:focus-visible{
background:
linear-gradient(
135deg,
#efd69a 0%,
#d9ad58 26%,
#b98229 47%,
#65491d 68%,
#111111 100%
) !important;
border-color:
#ad7722 !important;
outline:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 0 0 1px rgba(209,160,74,.22) !important;
filter:
none !important;
}
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:hover::before,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:focus::before,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:hover::before,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:focus::before{
border-left-color:
#ffffff !important;
}
/* PRESSED */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:active,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
button.np-track-play:active{
background:
linear-gradient(
135deg,
#d1a04a 0%,
#ad7722 40%,
#453317 70%,
#0e0e0e 100%
) !important;
border-color:
#ad7722 !important;
}
/* END IVORY GOLD PLAY GRADIENT V1B */
/* OSBEATS 20260915 IVORY GOLD TRACK BUTTON GRADIENT V2 */
/* =========================================================
IVORY GOLD PLAYER BUTTON FAMILY
Applies to:
- Price
- Download
- Facebook
- X
Play button remains controlled by Play Gradient V1B.
========================================================= */
/* =========================================================
PRICE BUTTON
========================================================= */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track],
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track]{
background:
linear-gradient(
135deg,
#e2c078 0%,
#d1a04a 24%,
#ad7722 45%,
#5a421d 68%,
#171717 100%
) !important;
background-color:
#ad7722 !important;
background-image:
linear-gradient(
135deg,
#e2c078 0%,
#d1a04a 24%,
#ad7722 45%,
#5a421d 68%,
#171717 100%
) !important;
border:
1px solid #d1a04a !important;
color:
#fffdf9 !important;
-webkit-text-fill-color:
#fffdf9 !important;
outline:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
0 1px 2px rgba(0,0,0,.18) !important;
text-shadow:
0 1px 1px rgba(0,0,0,.35) !important;
filter:
none !important;
}
/* PRICE HOVER */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track]:hover,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track]:focus,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track]:focus-visible,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track]:hover,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track]:focus{
background:
linear-gradient(
135deg,
#efd69a 0%,
#d9ad58 25%,
#b98229 47%,
#65491d 68%,
#111111 100%
) !important;
border-color:
#ad7722 !important;
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
outline:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.40),
0 0 0 1px rgba(209,160,74,.18) !important;
}
/* =========================================================
DOWNLOAD / FACEBOOK / X
========================================================= */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1{
background:
linear-gradient(
135deg,
#e2c078 0%,
#d1a04a 24%,
#ad7722 45%,
#5a421d 68%,
#171717 100%
) !important;
background-color:
#ad7722 !important;
background-image:
linear-gradient(
135deg,
#e2c078 0%,
#d1a04a 24%,
#ad7722 45%,
#5a421d 68%,
#171717 100%
) !important;
border:
1px solid #d1a04a !important;
color:
#fffdf9 !important;
outline:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
0 1px 2px rgba(0,0,0,.18) !important;
filter:
none !important;
}
/* SVG ICONS */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1
svg,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1
svg *,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1
svg,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1
svg *{
color:
#fffdf9 !important;
fill:
none !important;
stroke:
#fffdf9 !important;
filter:
none !important;
}
/* FACEBOOK FILLED ICON */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-facebook-v1
svg
path:first-child,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-facebook-v1
svg
path:first-child{
fill:
#fffdf9 !important;
stroke:
#fffdf9 !important;
}
/* DOWNLOAD / FACEBOOK / X HOVER */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:hover,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus-visible,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:hover,
html
body.storefront-theme-neon-pulse.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus{
background:
linear-gradient(
135deg,
#efd69a 0%,
#d9ad58 25%,
#b98229 47%,
#65491d 68%,
#111111 100%
) !important;
border-color:
#ad7722 !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.40),
0 0 0 1px rgba(209,160,74,.18) !important;
filter:
none !important;
}
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:hover
svg,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:hover
svg *,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus
svg,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:focus
svg *{
color:
#ffffff !important;
stroke:
#ffffff !important;
}
/* FACEBOOK HOVER */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-facebook-v1:hover
svg
path:first-child,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-facebook-v1:focus
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* PRESSED STATE */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-track-action-v1:active,
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.np-track-row
[data-np-track]:active{
background:
linear-gradient(
135deg,
#d1a04a 0%,
#ad7722 40%,
#453317 70%,
#0e0e0e 100%
) !important;
border-color:
#ad7722 !important;
}
/* DOWNLOAD LOCKED STATE */
html
body.storefront-theme-ivory-gold
#neonPulseThemeStage
.ig-download-v1.download-locked{
opacity:
.62 !important;
}
/* END IVORY GOLD TRACK BUTTON GRADIENT V2 */
/* OSBEATS 20260915 AURORA WAVE TRACK ACTIONS CSS V1 */
/* =========================================================
CRIMSON TRACK PLAYER — DESKTOP LAYOUT
Columns:
cover / play / title / waveform / duration /
heart / price / download+Facebook+X / more
========================================================= */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row{
grid-template-columns:
44px
34px
minmax(190px,1.45fr)
minmax(150px,1fr)
42px
28px
82px
104px
24px !important;
column-gap:
8px !important;
align-items:
center !important;
}
/* ACTION GROUP */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-actions-v1{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
5px !important;
min-width:
0 !important;
width:
104px !important;
}
/* BUTTON SHELL */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
background:
#071820 !important;
background-image:
none !important;
border:
1px solid #146d78 !important;
border-radius:
0 !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
cursor:
pointer !important;
}
/* SVG SIZE */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1
svg{
width:
15px !important;
height:
15px !important;
fill:
none !important;
stroke:
#ffffff !important;
stroke-width:
1.9 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
/* FACEBOOK MARK */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-facebook-v1
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* HOVER / FOCUS */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:hover,
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:focus,
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:focus-visible{
background:
rgba(32,215,230,.12) !important;
border-color:
#20d7e6 !important;
color:
#20d7e6 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:hover
svg,
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:focus
svg{
stroke:
#20d7e6 !important;
}
/* DOWNLOAD STATE */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-download-v1.download-ready{
border-color:
#19bcca !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-download-v1.download-locked{
opacity:
.46 !important;
}
/* =========================================================
PRESERVE WAVEFORM WIDTH
New action controls receive their own dedicated column.
The waveform remains a flexible minmax column.
========================================================= */
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-wave{
min-width:
0 !important;
width:
100% !important;
max-width:
100% !important;
}
/* =========================================================
MEDIUM DESKTOP / TABLET
========================================================= */
@media(max-width:1180px){
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(150px,1.3fr)
minmax(110px,.8fr)
38px
26px
72px
92px
22px !important;
column-gap:
5px !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-actions-v1{
width:
92px !important;
gap:
3px !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1{
width:
27px !important;
height:
27px !important;
min-width:
27px !important;
min-height:
27px !important;
}
}
/* =========================================================
MOBILE
Keep all three actions visible.
Hide waveform + duration only when space becomes tight.
========================================================= */
@media(max-width:820px){
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-wave,
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-duration{
display:
none !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row{
grid-template-columns:
42px
32px
minmax(0,1fr)
26px
70px
84px
22px !important;
column-gap:
4px !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-actions-v1{
width:
84px !important;
gap:
3px !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1{
width:
24px !important;
height:
24px !important;
min-width:
24px !important;
min-height:
24px !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1
svg{
width:
12px !important;
height:
12px !important;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media(max-width:560px){
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row{
grid-template-columns:
38px
30px
minmax(0,1fr)
22px
60px
68px
20px !important;
column-gap:
3px !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-actions-v1{
width:
68px !important;
gap:
2px !important;
}
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1{
width:
21px !important;
height:
21px !important;
min-width:
21px !important;
min-height:
21px !important;
}
}
/* END AURORA WAVE TRACK ACTIONS CSS V1 */
/* OSBEATS 20260915 AURORA WAVE BUTTON GRADIENT V1 */
/* =========================================================
AURORA WAVE PLAYER BUTTON FAMILY
Smooth dark/cyan treatment.
No glossy highlight.
No glow.
No inflated/bubble shadow.
Applies to:
- Play
- Price
- Download
- Facebook
- X
========================================================= */
/* =========================================================
PLAY BUTTON
========================================================= */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
button.np-track-play{
background:
linear-gradient(
135deg,
#071820 0%,
#09252c 38%,
#0d6975 72%,
#20d7e6 100%
) !important;
background-color:
#071820 !important;
border:
1px solid #20d7e6 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* PLAY ICON */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
button.np-track-play::before{
border-left-color:
#ffffff !important;
filter:
none !important;
}
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
button.np-track-play
svg,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
button.np-track-play
svg *{
color:
#ffffff !important;
stroke:
#ffffff !important;
}
/* PLAY HOVER */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
button.np-track-play:hover,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
button.np-track-play:focus,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
button.np-track-play:focus-visible{
background:
linear-gradient(
135deg,
#061318 0%,
#0b3038 38%,
#128393 72%,
#29e4f2 100%
) !important;
border-color:
#29e4f2 !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* =========================================================
PRICE BUTTON
========================================================= */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row
[data-np-track]{
background:
linear-gradient(
135deg,
#071820 0%,
#09252c 38%,
#0d6975 72%,
#20d7e6 100%
) !important;
background-color:
#071820 !important;
background-image:
linear-gradient(
135deg,
#071820 0%,
#09252c 38%,
#0d6975 72%,
#20d7e6 100%
) !important;
border:
1px solid #20d7e6 !important;
border-radius:
3px !important;
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
text-shadow:
none !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* PRICE HOVER */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row
[data-np-track]:hover,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row
[data-np-track]:focus,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row
[data-np-track]:focus-visible{
background:
linear-gradient(
135deg,
#061318 0%,
#0b3038 38%,
#128393 72%,
#29e4f2 100%
) !important;
border-color:
#29e4f2 !important;
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
box-shadow:
none !important;
}
/* =========================================================
DOWNLOAD / FACEBOOK / X
========================================================= */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1{
background:
linear-gradient(
135deg,
#071820 0%,
#09252c 38%,
#0d6975 72%,
#20d7e6 100%
) !important;
background-color:
#071820 !important;
background-image:
linear-gradient(
135deg,
#071820 0%,
#09252c 38%,
#0d6975 72%,
#20d7e6 100%
) !important;
border:
1px solid #20d7e6 !important;
border-radius:
2px !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* ACTION ICONS */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1
svg,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1
svg *{
color:
#ffffff !important;
stroke:
#ffffff !important;
filter:
none !important;
}
/* FACEBOOK FILLED MARK */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-facebook-v1
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* ACTION HOVER */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:hover,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:focus,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:focus-visible{
background:
linear-gradient(
135deg,
#061318 0%,
#0b3038 38%,
#128393 72%,
#29e4f2 100%
) !important;
border-color:
#29e4f2 !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:hover
svg,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:hover
svg *,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:focus
svg,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:focus
svg *{
color:
#ffffff !important;
stroke:
#ffffff !important;
}
/* FACEBOOK HOVER */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-facebook-v1:hover
svg
path:first-child,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-facebook-v1:focus
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* =========================================================
PRESSED STATE
========================================================= */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-track-action-v1:active,
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.np-track-row
[data-np-track]:active{
background:
linear-gradient(
135deg,
#050e12 0%,
#082027 40%,
#0b5964 72%,
#18b8c7 100%
) !important;
border-color:
#18b8c7 !important;
box-shadow:
none !important;
}
/* =========================================================
LOCKED DOWNLOAD
========================================================= */
html
body.storefront-theme-aurora-wave
#auroraWaveThemeStage
.aw-download-v1.download-locked{
opacity:
.64 !important;
}
/* END AURORA WAVE BUTTON GRADIENT V1 */
/* OSBEATS 20260915 MIDNIGHT MINIMAL PLAYER ACTIONS CSS V1B */
/* TRACK GRID */
body.storefront-theme-midnight-minimal
.np-track-row{
grid-template-columns:
44px
34px
minmax(190px,1.45fr)
minmax(150px,1fr)
42px
28px
82px
104px
24px !important;
column-gap:
8px !important;
align-items:
center !important;
}
/* ACTION GROUP */
body.storefront-theme-midnight-minimal
.mm-track-actions-v1{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
5px !important;
width:
104px !important;
}
/* ACTION BUTTON SIZE */
body.storefront-theme-midnight-minimal
.mm-track-action-v1{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
border-radius:
2px !important;
cursor:
pointer !important;
}
/* =========================================================
BLACK + GOLD BUTTON FAMILY
========================================================= */
body.storefront-theme-midnight-minimal
button.np-track-play,
body.storefront-theme-midnight-minimal
.np-track-row
[data-np-track],
body.storefront-theme-midnight-minimal
.mm-track-action-v1{
background:
linear-gradient(
135deg,
#0d0d0d 0%,
#181612 36%,
#55401f 72%,
#d6a64c 100%
) !important;
background-color:
#0d0d0d !important;
border:
1px solid #c99840 !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
none !important;
text-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-midnight-minimal
.np-track-row
[data-np-track]{
border-radius:
3px !important;
-webkit-text-fill-color:
#ffffff !important;
}
/* ICONS */
body.storefront-theme-midnight-minimal
button.np-track-play::before{
border-left-color:
#ffffff !important;
}
body.storefront-theme-midnight-minimal
button.np-track-play
svg,
body.storefront-theme-midnight-minimal
button.np-track-play
svg *,
body.storefront-theme-midnight-minimal
.mm-track-action-v1
svg,
body.storefront-theme-midnight-minimal
.mm-track-action-v1
svg *{
color:
#ffffff !important;
stroke:
#ffffff !important;
filter:
none !important;
}
body.storefront-theme-midnight-minimal
.mm-facebook-v1
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* HOVER */
body.storefront-theme-midnight-minimal
button.np-track-play:hover,
body.storefront-theme-midnight-minimal
button.np-track-play:focus,
body.storefront-theme-midnight-minimal
button.np-track-play:focus-visible,
body.storefront-theme-midnight-minimal
.np-track-row
[data-np-track]:hover,
body.storefront-theme-midnight-minimal
.np-track-row
[data-np-track]:focus,
body.storefront-theme-midnight-minimal
.mm-track-action-v1:hover,
body.storefront-theme-midnight-minimal
.mm-track-action-v1:focus,
body.storefront-theme-midnight-minimal
.mm-track-action-v1:focus-visible{
background:
linear-gradient(
135deg,
#080808 0%,
#201c15 36%,
#715425 72%,
#e0b45d 100%
) !important;
border-color:
#e0b45d !important;
color:
#ffffff !important;
box-shadow:
none !important;
filter:
none !important;
}
/* PRESSED */
body.storefront-theme-midnight-minimal
.mm-track-action-v1:active,
body.storefront-theme-midnight-minimal
.np-track-row
[data-np-track]:active{
background:
linear-gradient(
135deg,
#050505 0%,
#14120f 40%,
#493719 72%,
#b88632 100%
) !important;
border-color:
#b88632 !important;
}
/* =========================================================
ACTIVE MENU — STRONG MIDNIGHT OVERRIDE
========================================================= */
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
.np-tabs
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"],
html
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active{
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
color:
#c99840 !important;
border:
0 !important;
border-bottom:
2px solid #d6a64c !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
html
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item.active
svg{
color:
#d6a64c !important;
stroke:
#d6a64c !important;
}
/* REMOVE INHERITED ACTIVE PSEUDO LAYERS */
html
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item.active::before,
html
body.storefront-theme-midnight-minimal
[data-osb-canonical-menu]
.osb-canonical-menu-item.active::after{
content:
none !important;
display:
none !important;
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
}
/* RESPONSIVE */
@media(max-width:1180px){
body.storefront-theme-midnight-minimal
.np-track-row{
grid-template-columns:
42px
32px
minmax(150px,1.3fr)
minmax(110px,.8fr)
38px
26px
72px
92px
22px !important;
column-gap:
5px !important;
}
body.storefront-theme-midnight-minimal
.mm-track-actions-v1{
width:
92px !important;
gap:
3px !important;
}
body.storefront-theme-midnight-minimal
.mm-track-action-v1{
width:
27px !important;
height:
27px !important;
min-width:
27px !important;
min-height:
27px !important;
}
}
@media(max-width:820px){
body.storefront-theme-midnight-minimal
.np-track-wave,
body.storefront-theme-midnight-minimal
.np-track-duration{
display:
none !important;
}
body.storefront-theme-midnight-minimal
.np-track-row{
grid-template-columns:
42px
32px
minmax(0,1fr)
26px
70px
84px
22px !important;
column-gap:
4px !important;
}
body.storefront-theme-midnight-minimal
.mm-track-actions-v1{
width:
84px !important;
gap:
3px !important;
}
body.storefront-theme-midnight-minimal
.mm-track-action-v1{
width:
24px !important;
height:
24px !important;
min-width:
24px !important;
min-height:
24px !important;
}
}
@media(max-width:560px){
body.storefront-theme-midnight-minimal
.np-track-row{
grid-template-columns:
38px
30px
minmax(0,1fr)
22px
60px
68px
20px !important;
column-gap:
3px !important;
}
body.storefront-theme-midnight-minimal
.mm-track-actions-v1{
width:
68px !important;
gap:
2px !important;
}
body.storefront-theme-midnight-minimal
.mm-track-action-v1{
width:
21px !important;
height:
21px !important;
min-width:
21px !important;
min-height:
21px !important;
}
}
/* END MIDNIGHT MINIMAL PLAYER ACTIONS CSS V1B */
/* OSBEATS 20260915 MIDNIGHT MINIMAL PLAY FACEBOOK POLISH V2 */
/* =========================================================
MIDNIGHT PLAY CONTROL
Stronger selector than inherited standard/Neon rules.
Smooth black -> muted gold gradient.
No glow.
No bubble effect.
========================================================= */
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play,
html
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play,
html
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play{
background:
linear-gradient(
135deg,
#080808 0%,
#14120f 32%,
#302719 55%,
#725524 78%,
#d6a64c 100%
) !important;
background-color:
#080808 !important;
background-image:
linear-gradient(
135deg,
#080808 0%,
#14120f 32%,
#302719 55%,
#725524 78%,
#d6a64c 100%
) !important;
border:
1px solid #c99840 !important;
outline:
0 !important;
outline-color:
transparent !important;
box-shadow:
none !important;
filter:
none !important;
}
/* PLAY TRIANGLE */
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play::before,
html
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play::before,
html
body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
button.np-track-play::before{
border-left-color:
#ffffff !important;
filter:
none !important;
}
/* SVG ICON FALLBACK */
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play
svg,
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play
svg *,
html
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play
svg,
html
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play
svg *{
color:
#ffffff !important;
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* PLAY HOVER / FOCUS */
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play:hover,
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play:focus,
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play:focus-visible,
html
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play:hover,
html
body.storefront-theme-neon-pulse.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play:focus-visible{
background:
linear-gradient(
135deg,
#050505 0%,
#17140f 30%,
#3f321b 56%,
#8a6728 80%,
#e0b45d 100%
) !important;
background-color:
#050505 !important;
border-color:
#e0b45d !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
/* PLAYING STATE */
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play.is-playing,
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play.active,
html
body.storefront-theme-midnight-minimal
#neonPulseThemeStage
button.np-track-play[aria-pressed="true"]{
background:
linear-gradient(
135deg,
#070707 0%,
#17140f 34%,
#493919 62%,
#9b742b 82%,
#d6a64c 100%
) !important;
border-color:
#d6a64c !important;
box-shadow:
none !important;
}
/* =========================================================
THINNER FACEBOOK MARK
Download and X remain untouched.
========================================================= */
html
body.storefront-theme-midnight-minimal
.mm-facebook-v1
svg{
display:
none !important;
}
html
body.storefront-theme-midnight-minimal
.mm-facebook-glyph-v2{
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
width:
auto !important;
height:
auto !important;
margin:
0 !important;
padding:
0 !important;
font-family:
Arial,
Helvetica,
sans-serif !important;
font-size:
15px !important;
font-weight:
500 !important;
font-style:
normal !important;
line-height:
1 !important;
letter-spacing:
0 !important;
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
text-shadow:
none !important;
transform:
translateY(-.25px) !important;
}
/* FACEBOOK HOVER REMAINS CLEAN */
html
body.storefront-theme-midnight-minimal
.mm-facebook-v1:hover
.mm-facebook-glyph-v2,
html
body.storefront-theme-midnight-minimal
.mm-facebook-v1:focus
.mm-facebook-glyph-v2{
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
font-weight:
500 !important;
}
/* END MIDNIGHT MINIMAL PLAY FACEBOOK POLISH V2 */
/* OSBEATS 20260915 MIDNIGHT MINIMAL ACTION ICON BALANCE V3 */
/* =========================================================
MIDNIGHT ACTION ICON VISUAL BALANCE
Button dimensions stay unchanged.
Download SVG:
- reduced
Facebook f:
- slightly enlarged
X SVG:
- reduced
Goal:
all three have approximately equal visual weight.
========================================================= */
/* DOWNLOAD */
html
body.storefront-theme-midnight-minimal
.mm-download-v1
svg{
width:
14px !important;
height:
14px !important;
min-width:
14px !important;
min-height:
14px !important;
max-width:
14px !important;
max-height:
14px !important;
display:
block !important;
margin:
0 auto !important;
transform:
none !important;
}
/* DOWNLOAD SVG CHILDREN */
html
body.storefront-theme-midnight-minimal
.mm-download-v1
svg
*{
vector-effect:
non-scaling-stroke !important;
}
/* FACEBOOK */
html
body.storefront-theme-midnight-minimal
.mm-facebook-v1
.mm-facebook-glyph-v2{
font-size:
16px !important;
font-weight:
500 !important;
line-height:
1 !important;
width:
14px !important;
height:
16px !important;
min-width:
14px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
margin:
0 auto !important;
padding:
0 !important;
transform:
translateY(-0.25px) !important;
}
/* X */
html
body.storefront-theme-midnight-minimal
.mm-x-v1
svg{
width:
14px !important;
height:
14px !important;
min-width:
14px !important;
min-height:
14px !important;
max-width:
14px !important;
max-height:
14px !important;
display:
block !important;
margin:
0 auto !important;
transform:
none !important;
}
/* X SVG CHILDREN */
html
body.storefront-theme-midnight-minimal
.mm-x-v1
svg
*{
vector-effect:
non-scaling-stroke !important;
}
/* FALLBACK IF X IS TEXT INSTEAD OF SVG */
html
body.storefront-theme-midnight-minimal
.mm-x-v1{
font-size:
14px !important;
line-height:
1 !important;
}
/* KEEP BUTTON BOXES UNCHANGED */
html
body.storefront-theme-midnight-minimal
.mm-download-v1,
html
body.storefront-theme-midnight-minimal
.mm-facebook-v1,
html
body.storefront-theme-midnight-minimal
.mm-x-v1{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
align-items:
center !important;
justify-content:
center !important;
}
/* RESPONSIVE ICON BALANCE */
@media(max-width:1180px){
html
body.storefront-theme-midnight-minimal
.mm-download-v1
svg,
html
body.storefront-theme-midnight-minimal
.mm-x-v1
svg{
width:
13px !important;
height:
13px !important;
min-width:
13px !important;
min-height:
13px !important;
}
html
body.storefront-theme-midnight-minimal
.mm-facebook-v1
.mm-facebook-glyph-v2{
font-size:
15px !important;
width:
13px !important;
height:
15px !important;
}
}
@media(max-width:820px){
html
body.storefront-theme-midnight-minimal
.mm-download-v1
svg,
html
body.storefront-theme-midnight-minimal
.mm-x-v1
svg{
width:
12px !important;
height:
12px !important;
min-width:
12px !important;
min-height:
12px !important;
}
html
body.storefront-theme-midnight-minimal
.mm-facebook-v1
.mm-facebook-glyph-v2{
font-size:
14px !important;
width:
12px !important;
height:
14px !important;
}
}
/* END MIDNIGHT MINIMAL ACTION ICON BALANCE V3 */
/* OSBEATS 20260915 MIDNIGHT ORPHAN META SEPARATOR FIX V10 */
/*
V7/V9 position the role and location directly.
The original metadata separator is therefore orphaned
and must not remain in the original document flow.
*/
[data-osb-midnight-runtime-root-v7="1"]
.np-identity-meta
i{
display:
none !important;
visibility:
hidden !important;
width:
0 !important;
height:
0 !important;
min-width:
0 !important;
min-height:
0 !important;
margin:
0 !important;
padding:
0 !important;
border:
0 !important;
overflow:
hidden !important;
}
/* END OSBEATS 20260915 MIDNIGHT ORPHAN META SEPARATOR FIX V10 */
/* OSBEATS 20260915 NEON PULSE TRACK ACTIONS CSS V1 */
/* =========================================================
CRIMSON TRACK PLAYER — DESKTOP LAYOUT
Columns:
cover / play / title / waveform / duration /
heart / price / download+Facebook+X / more
========================================================= */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-row{
grid-template-columns:
44px
34px
minmax(190px,1.45fr)
minmax(150px,1fr)
42px
28px
82px
104px
24px !important;
column-gap:
8px !important;
align-items:
center !important;
}
/* ACTION GROUP */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-actions-v1{
display:
flex !important;
align-items:
center !important;
justify-content:
center !important;
gap:
5px !important;
min-width:
0 !important;
width:
104px !important;
}
/* BUTTON SHELL */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1{
width:
30px !important;
height:
30px !important;
min-width:
30px !important;
min-height:
30px !important;
padding:
0 !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
background:
#111722 !important;
background-image:
none !important;
border:
1px solid #66232a !important;
border-radius:
0 !important;
color:
#ffffff !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
cursor:
pointer !important;
}
/* SVG SIZE */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1
svg{
width:
15px !important;
height:
15px !important;
fill:
none !important;
stroke:
#ffffff !important;
stroke-width:
1.9 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
/* FACEBOOK MARK */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-facebook-v1
svg
path:first-child{
fill:
#ffffff !important;
stroke:
#ffffff !important;
}
/* HOVER / FOCUS */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1:hover,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1:focus,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1:focus-visible{
background:
rgba(189,40,255,.13) !important;
border-color:
#bd28ff !important;
color:
#bd28ff !important;
outline:
0 !important;
box-shadow:
none !important;
filter:
none !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1:hover
svg,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1:focus
svg{
stroke:
#bd28ff !important;
}
/* DOWNLOAD STATE */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-download-v1.download-ready{
border-color:
#9a3039 !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-download-v1.download-locked{
opacity:
.46 !important;
}
/* =========================================================
PRESERVE WAVEFORM WIDTH
New action controls receive their own dedicated column.
The waveform remains a flexible minmax column.
========================================================= */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-wave{
min-width:
0 !important;
width:
100% !important;
max-width:
100% !important;
}
/* =========================================================
MEDIUM DESKTOP / TABLET
========================================================= */
@media(max-width:1180px){
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-row{
grid-template-columns:
42px
32px
minmax(150px,1.3fr)
minmax(110px,.8fr)
38px
26px
72px
92px
22px !important;
column-gap:
5px !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-actions-v1{
width:
92px !important;
gap:
3px !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1{
width:
27px !important;
height:
27px !important;
min-width:
27px !important;
min-height:
27px !important;
}
}
/* =========================================================
MOBILE
Keep all three actions visible.
Hide waveform + duration only when space becomes tight.
========================================================= */
@media(max-width:820px){
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-wave,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-duration{
display:
none !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-row{
grid-template-columns:
42px
32px
minmax(0,1fr)
26px
70px
84px
22px !important;
column-gap:
4px !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-actions-v1{
width:
84px !important;
gap:
3px !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1{
width:
24px !important;
height:
24px !important;
min-width:
24px !important;
min-height:
24px !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1
svg{
width:
12px !important;
height:
12px !important;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media(max-width:560px){
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-row{
grid-template-columns:
38px
30px
minmax(0,1fr)
22px
60px
68px
20px !important;
column-gap:
3px !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-actions-v1{
width:
68px !important;
gap:
2px !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1{
width:
21px !important;
height:
21px !important;
min-width:
21px !important;
min-height:
21px !important;
}
}
/* END NEON PULSE TRACK ACTIONS CSS V1 */
/* OSBEATS 20260915 NEON PULSE FINAL STANDARD POLISH CSS V1 */
/* =========================================================
STRICT NEON SCOPE
Other standard themes reuse the Neon geometry class.
The runtime data attribute exists ONLY on real Neon Pulse.
========================================================= */
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-actions-v1{
display:
grid !important;
grid-template-columns:
repeat(3,30px) !important;
gap:
6px !important;
align-items:
center !important;
justify-content:
center !important;
width:
max-content !important;
min-width:
102px !important;
margin:
0 !important;
padding:
0 !important;
}
/* =========================================================
STANDARD 30 × 30 ACTION BUTTON BOX
========================================================= */
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1{
width:
30px !important;
min-width:
30px !important;
max-width:
30px !important;
height:
30px !important;
min-height:
30px !important;
max-height:
30px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
margin:
0 !important;
padding:
0 !important;
border:
1px solid #7c36ff !important;
border-radius:
2px !important;
background:
linear-gradient(
135deg,
#09111f 0%,
#11152a 55%,
#351258 100%
) !important;
color:
#ffffff !important;
box-shadow:
none !important;
filter:
none !important;
line-height:
1 !important;
cursor:
pointer !important;
}
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1:hover,
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1:focus-visible{
border-color:
#bd28ff !important;
background:
linear-gradient(
135deg,
#10152a 0%,
#3d1464 58%,
#8f20cc 100%
) !important;
color:
#ffffff !important;
box-shadow:
none !important;
outline:
none !important;
}
/* =========================================================
STANDARD ACTION ICON BALANCE
Download = 14
Facebook = 16 / 500
X = 14
========================================================= */
/* DOWNLOAD */
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-download-v1
svg{
width:
14px !important;
height:
14px !important;
min-width:
14px !important;
min-height:
14px !important;
max-width:
14px !important;
max-height:
14px !important;
display:
block !important;
margin:
0 auto !important;
fill:
none !important;
stroke:
currentColor !important;
transform:
none !important;
}
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-download-v1
svg
*{
vector-effect:
non-scaling-stroke !important;
}
/* FACEBOOK */
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-facebook-glyph-v1{
width:
14px !important;
height:
16px !important;
min-width:
14px !important;
display:
inline-flex !important;
align-items:
center !important;
justify-content:
center !important;
margin:
0 auto !important;
padding:
0 !important;
font-family:
Arial,
Helvetica,
sans-serif !important;
font-size:
16px !important;
font-weight:
500 !important;
font-style:
normal !important;
line-height:
1 !important;
letter-spacing:
0 !important;
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
text-shadow:
none !important;
transform:
translateY(-0.25px) !important;
}
/* X */
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-x-v1
svg{
width:
14px !important;
height:
14px !important;
min-width:
14px !important;
min-height:
14px !important;
max-width:
14px !important;
max-height:
14px !important;
display:
block !important;
margin:
0 auto !important;
fill:
none !important;
stroke:
currentColor !important;
transform:
none !important;
}
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-x-v1
svg
*{
vector-effect:
non-scaling-stroke !important;
}
/* =========================================================
ACTIVE MENU
No filled purple rectangle.
One purple 2px underline only.
========================================================= */
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]{
background:
transparent !important;
background-image:
none !important;
color:
#bd28ff !important;
border-top:
0 !important;
border-left:
0 !important;
border-right:
0 !important;
border-bottom:
2px solid #bd28ff !important;
box-shadow:
none !important;
}
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon,
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"]
.osb-canonical-menu-icon{
color:
#bd28ff !important;
}
/* =========================================================
TABLET ICON BALANCE
========================================================= */
@media(max-width:1180px){
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-download-v1
svg,
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-x-v1
svg{
width:
13px !important;
height:
13px !important;
min-width:
13px !important;
min-height:
13px !important;
max-width:
13px !important;
max-height:
13px !important;
}
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-facebook-glyph-v1{
font-size:
15px !important;
}
}
/* =========================================================
MOBILE ICON BALANCE
========================================================= */
@media(max-width:820px){
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-download-v1
svg,
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-x-v1
svg{
width:
12px !important;
height:
12px !important;
min-width:
12px !important;
min-height:
12px !important;
max-width:
12px !important;
max-height:
12px !important;
}
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-facebook-glyph-v1{
font-size:
14px !important;
}
}
/* END NEON PULSE FINAL STANDARD POLISH CSS V1 */
/* OSBEATS EDITORIAL WAVE COLOR FINAL V8C START */
/*
EDITORIAL WAVE APPROVED PALETTE
Deep black + burgundy control system derived from the
approved active Music navigation treatment.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage{
--ew8c-black:
#080909;
--ew8c-black-soft:
#111111;
--ew8c-burgundy:
#2f0d10;
--ew8c-burgundy-mid:
#55151b;
--ew8c-burgundy-high:
#7b1f27;
--ew8c-accent:
#ef303c;
--ew8c-border:
#592126;
--ew8c-text:
#ffffff;
}
/*
Exact duplicate-menu correction.
These audit-confirmed legacy links are part of the same
.ew-side-nav as the approved menu.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-side-nav
.osb-canonical-legacy-hidden,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-legacy-hidden-v8c="1"]{
display:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
overflow:hidden !important;
}
/*
Main Editorial controls.
Side navigation is intentionally excluded by JS tagging.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"]{
background:
linear-gradient(
135deg,
var(--ew8c-black) 0%,
var(--ew8c-black-soft) 34%,
var(--ew8c-burgundy) 67%,
var(--ew8c-burgundy-mid) 100%
)
!important;
color:
var(--ew8c-text)
!important;
border:
1px solid
var(--ew8c-border)
!important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.015)
!important;
text-shadow:
none
!important;
}
/*
Bright red is retained as the accent edge rather than
the full button fill.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
button[data-ew-main-control-v8c="1"],
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
a[data-ew-main-control-v8c="1"]{
border-left:
2px solid
var(--ew8c-accent)
!important;
}
/*
Hover and keyboard focus.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"]:hover,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"]:focus-visible{
background:
linear-gradient(
135deg,
#050505 0%,
var(--ew8c-burgundy) 40%,
var(--ew8c-burgundy-mid) 72%,
var(--ew8c-burgundy-high) 100%
)
!important;
color:
#ffffff
!important;
border-color:
var(--ew8c-accent)
!important;
outline:
none
!important;
}
/*
Active / selected player and filter controls.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"].active,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"][aria-selected="true"],
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"][aria-pressed="true"],
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"][aria-current="true"]{
background:
linear-gradient(
135deg,
var(--ew8c-burgundy-high) 0%,
var(--ew8c-burgundy) 51%,
var(--ew8c-black) 100%
)
!important;
color:
#ffffff
!important;
border-color:
var(--ew8c-accent)
!important;
}
/*
Keep the approved primary side-menu visual system.
Only active/current navigation receives the burgundy fill.
Inactive navigation remains Editorial black.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-side-nav
button:not(.active):not([aria-current="page"]),
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-side-nav
a:not(.active):not([aria-current="page"]){
background:
transparent
!important;
}
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-side-nav
.active,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.ew-side-nav
[aria-current="page"]{
background:
linear-gradient(
90deg,
var(--ew8c-burgundy) 0%,
#18090b 58%,
var(--ew8c-black) 100%
)
!important;
border-left:
3px solid
var(--ew8c-accent)
!important;
color:
#ffffff
!important;
}
/*
Slider / volume controls.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
input[type="range"]{
accent-color:
var(--ew8c-accent)
!important;
}
/*
Icons remain readable against the dark gradients.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"]
svg{
color:
#ffffff
!important;
}
/*
Disabled state.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"]:disabled,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-main-control-v8c="1"][aria-disabled="true"]{
opacity:.55 !important;
cursor:not-allowed !important;
}
/* OSBEATS EDITORIAL WAVE COLOR FINAL V8C END */
/* OSBEATS EDITORIAL WAVEFORM TRANSPARENCY V9 START */
/*
Editorial Wave only.
Remove the colored rectangular fill behind the
waveform while preserving:
- waveform bars
- waveform progress
- track controls
- V8C burgundy/black button treatment
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.osbeats-real-waveform,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.bs-bento-real-wave{
background:
transparent
!important;
background-color:
transparent
!important;
background-image:
none
!important;
box-shadow:
none
!important;
}
/*
Ensure the waveform host itself does not receive
a legacy colored fill from hover/active states.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.osbeats-real-waveform:hover,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
.bs-bento-real-wave:hover{
background:
transparent
!important;
background-color:
transparent
!important;
background-image:
none
!important;
}
/* OSBEATS EDITORIAL WAVEFORM TRANSPARENCY V9 END */
/* OSBEATS EDITORIAL WAVEFORM INNER TRANSPARENCY V9B START */
/*
EDITORIAL WAVEFORM V9B
V9 cleared the outer host.
V9B also clears full-size inner background layers
and host pseudo-elements while preserving actual
waveform bars / canvas / SVG graphics.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-host-v9b="1"],
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-bg-layer-v9b="1"]{
background:
transparent
!important;
background-color:
transparent
!important;
background-image:
none
!important;
box-shadow:
none
!important;
}
/*
Pseudo-elements can visually create a full rectangular
burgundy/black layer even when the host itself reports
a transparent computed background.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-host-v9b="1"]::before,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-host-v9b="1"]::after,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-bg-layer-v9b="1"]::before,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-bg-layer-v9b="1"]::after{
background:
transparent
!important;
background-color:
transparent
!important;
background-image:
none
!important;
box-shadow:
none
!important;
}
/*
Hover must remain transparent as well.
*/
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-host-v9b="1"]:hover,
body.storefront-theme-editorial-wave
#editorialWaveThemeStage
[data-ew-wave-bg-layer-v9b="1"]:hover{
background:
transparent
!important;
background-color:
transparent
!important;
background-image:
none
!important;
box-shadow:
none
!important;
}
/* OSBEATS EDITORIAL WAVEFORM INNER TRANSPARENCY V9B END */
/* OSBEATS EDITORIAL WAVEFORM CONTAINER V9C START */
body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-ew-wave-transparent="1"],
body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-ew-wave-transparent="1"]::before,
body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-ew-wave-transparent="1"]::after{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
}
body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-ew-wave-transparent="1"]{
border-image: none !important;
}
body.storefront-theme-editorial-wave #editorialWaveThemeStage .osbeats-real-waveform,
body.storefront-theme-editorial-wave #editorialWaveThemeStage .bs-bento-real-wave,
body.storefront-theme-editorial-wave #editorialWaveThemeStage .ew-waveform,
body.storefront-theme-editorial-wave #editorialWaveThemeStage .ew-track-waveform,
body.storefront-theme-editorial-wave #editorialWaveThemeStage .ew-wave{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
body.storefront-theme-editorial-wave #editorialWaveThemeStage .osbeats-real-waveform canvas,
body.storefront-theme-editorial-wave #editorialWaveThemeStage .osbeats-real-waveform svg,
body.storefront-theme-editorial-wave #editorialWaveThemeStage .bs-bento-real-wave canvas,
body.storefront-theme-editorial-wave #editorialWaveThemeStage .bs-bento-real-wave svg{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* OSBEATS EDITORIAL WAVEFORM CONTAINER V9C END */
/* OSBEATS 20260916 EDITORIAL WAVEFORM OUTLINE REMOVAL V9D CSS START */
html body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-osb-editorial-wave-core="1"],
html body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-osb-editorial-wave-core="1"]::before,
html body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-osb-editorial-wave-core="1"]::after,
html body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-osb-editorial-wave-wrap="1"],
html body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-osb-editorial-wave-wrap="1"]::before,
html body.storefront-theme-editorial-wave #editorialWaveThemeStage [data-osb-editorial-wave-wrap="1"]::after {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
background-image: none !important;
}
html body.storefront-theme-editorial-wave #editorialWaveThemeStage .osbeats-real-waveform,
html body.storefront-theme-editorial-wave #editorialWaveThemeStage .bs-bento-real-wave {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
background-image: none !important;
}
/* OSBEATS 20260916 EDITORIAL WAVEFORM OUTLINE REMOVAL V9D CSS END */
/* OSBEATS 20260916 NEON MOBILE FIX V4B START */
/*
Real Neon Pulse only.
Other standard themes may reuse Neon geometry.
*/
@media(max-width:820px){
/*
CANONICAL MENU
The menu is intentionally wider than a phone.
Make the actual host horizontally reachable.
*/
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage
.np-tabs.osb-canonical-menu-host{
display:
flex !important;
grid-template-columns:
none !important;
justify-content:
flex-start !important;
overflow-x:
auto !important;
overflow-y:
hidden !important;
overscroll-behavior-x:
contain !important;
-webkit-overflow-scrolling:
touch;
scrollbar-width:
none !important;
}
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage
.np-tabs.osb-canonical-menu-host::-webkit-scrollbar{
width:
0 !important;
height:
0 !important;
}
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage
.np-tabs.osb-canonical-menu-host
.osb-canonical-menu-item{
flex:
0 0 auto !important;
width:
auto !important;
min-width:
max-content !important;
}
/*
APPROVED ACTION BOXES
Keep all three shells at the standard 30x30 size.
*/
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-actions-v1{
display:
grid !important;
grid-template-columns:
repeat(3,30px) !important;
gap:
6px !important;
width:
102px !important;
min-width:
102px !important;
max-width:
102px !important;
justify-content:
start !important;
align-items:
center !important;
}
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1{
width:
30px !important;
min-width:
30px !important;
max-width:
30px !important;
height:
30px !important;
min-height:
30px !important;
max-height:
30px !important;
padding:
0 !important;
flex:
0 0 30px !important;
}
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-track-action-v1
svg{
width:
12px !important;
height:
12px !important;
}
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-final-facebook-glyph-v1{
font-size:
14px !important;
line-height:
1 !important;
}
}
/*
430PX / SMALL-PHONE GRID
Existing computed grid:
38 30 136 22 60 68 20
Increase ONLY the action column:
68 -> 102
The flexible title column absorbs the 34px difference.
*/
@media(max-width:560px){
html
body.storefront-theme-neon-pulse:not(.storefront-theme-midnight-minimal):not(.storefront-theme-aurora-wave):not(.storefront-theme-ivory-gold):not(.storefront-theme-signal-grid):not(.storefront-theme-crimson-luxe)
#neonPulseThemeStage[data-osb-neon-final-actions-v1="1"]
.np-track-row[data-np-final-actions-ready="1"]{
grid-template-columns:
38px
30px
minmax(0,1fr)
22px
60px
102px
20px !important;
column-gap:
3px !important;
}
}
/* OSBEATS 20260916 NEON MOBILE FIX V4B END */
/* OSBEATS MIDNIGHT MENU V2 — MIDNIGHT ONLY */
/* Transparent active tab and single gold underline. */
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs.osb-canonical-menu-host
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs.osb-canonical-menu-host
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item[aria-current="page"] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: #c99840 !important;
-webkit-text-fill-color: #c99840 !important;
border-bottom: 2px solid #d7a34c !important;
box-shadow: none !important;
}
/* Keep the active label gold, not inherited white. */
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs.osb-canonical-menu-host
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-label,
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs.osb-canonical-menu-host
[data-osb-canonical-menu]
.osb-canonical-public
.osb-canonical-menu-item.active
.osb-canonical-menu-icon {
color: #c99840 !important;
-webkit-text-fill-color: #c99840 !important;
}
@media (max-width: 820px) {
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs.osb-canonical-menu-host {
display: flex !important;
grid-template-columns: none !important;
justify-content: flex-start !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none !important;
}
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs.osb-canonical-menu-host::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
html body.storefront-theme-midnight-minimal
#midnightMinimalThemeStage
.np-tabs.osb-canonical-menu-host
.osb-canonical-menu-item {
flex: 0 0 auto !important;
width: auto !important;
min-width: max-content !important;
}
}
/* END OSBEATS MIDNIGHT MENU V2 */
/* OSB PUBLIC ROLE SURFACES V1 — classic profile only */
#artistPublicDisplayRole {
color: #f0e9e2 !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin: 4px 0 5px !important;
}
/* =========================================================
OSBEATS LICENSE INFORMATION AUTO CENTER V1
2026-09-30
No Direct Purchase:
Lease / Premium / Exclusive remain their normal card size
and are centered as a three-card group.
Direct Purchase enabled:
all four cards use the full available row.
This affects the standard artist profile only.
========================================================= */
@media(min-width:701px){
body:not(.custom-theme-live)
#music
.profile-license-info-grid:not(:has(
.profile-license-info-card[data-info-tier="buy_now"]
)){
width:75% !important;
max-width:75% !important;
margin-left:auto !important;
margin-right:auto !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body:not(.custom-theme-live)
#music
.profile-license-info-grid:has(
.profile-license-info-card[data-info-tier="buy_now"]
){
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
}
/* Phones retain the approved single-column layout. */
@media(max-width:700px){
body:not(.custom-theme-live)
#music
.profile-license-info-grid{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:1fr !important;
}
}