/* ==================================================
radio.css — Radio view + featured collections
Split from index.html lines 4684–5024 on 2026-04-23
================================================== */
/* ====================================================================
* 2026-04-29 — Lookymart Radio (mobile-style centered stack)
* Layout per latest reference: narrow centered column, vertical stack
* (art → now-playing → controls → mixer/genre card → playlist).
* ==================================================================== */
#radioView.view {
min-height: calc(100vh - 65px);
padding: 16px 20px 64px;
/* Transparent so only the rounded .radio-shell card is visible —
* no full-bleed white block between the section-banner above and
* the shell below. The body's plaza bg + section gradient show
* through naturally. */
background: transparent;
}
.radio-shell {
max-width: 540px;
margin: 14px auto 24px;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px;
/* Curved outer container that wraps the whole radio section —
* matches the section-banner / hero-band 28px curve language. */
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 28px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(15, 23, 42, 0.05),
0 24px 60px -28px rgba(15, 23, 42, 0.2);
}
.radio-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 4px 0;
}
/* "◆ LOOKYMART RADIO · STREAMING LIVE" — red chip + white font.
* Red because it's a live/urgent broadcast indicator. */
.radio-label {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
color: #FFFFFF !important;
background: #F2252F !important;
border: 2px solid #111111;
border-radius: 8px;
padding: 3px 10px 4px;
box-shadow: 2px 2px 0 #111111;
text-shadow: none !important;
}
.radio-label::first-letter { color: #FFD21E; }
.radio-live-dot {
width: 32px;
height: 32px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
position: relative;
}
.radio-live-dot::after {
content: '';
position: absolute;
inset: 9px;
border-radius: 50%;
background: #ec4899;
box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18);
animation: pulse 1.6s ease-in-out infinite;
}
/* Frosted-glass card base for each zone */
.radio-art-card,
.radio-now-card,
.radio-mixer-card,
.radio-tracks-wrap {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 22px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 12px 32px -18px rgba(15, 23, 42, 0.18);
}
/* §1 — Album art (centered square) */
.radio-art-card {
aspect-ratio: 1;
overflow: hidden;
position: relative;
padding: 0;
}
.radio-art {
font-size: 96px;
background-size: cover, 22px 20px;
transition: opacity 0.4s ease;
}
/* Visualizer canvas — sits above the static art when audio is playing */
.radio-viz {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
background: #07070b;
border-radius: inherit;
}
.radio-art-card.viz-on .radio-viz { opacity: 1; }
.radio-art-card.viz-on .radio-art { opacity: 0; }
/* Mode picker — small overlay at the bottom of the art card */
.radio-viz-modes {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2px;
padding: 4px;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border-radius: 999px;
z-index: 2;
opacity: 0;
transition: opacity 0.2s ease;
}
.radio-art-card:hover .radio-viz-modes,
.radio-art-card.viz-on .radio-viz-modes { opacity: 1; }
.rv-mode {
padding: 5px 11px;
background: transparent;
border: 0;
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.72);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.rv-mode:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.rv-mode--active {
background: linear-gradient(135deg, #f472b6, #ec4899);
color: #fff;
box-shadow: 0 2px 6px rgba(236, 72, 153, 0.5);
}
/* Triangle pattern + radio glyph centered */
.radio-art {
width: 100%; height: 100%;
background:
radial-gradient(ellipse at center, rgba(236, 72, 153, 0.18), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: cover, 18px 16px;
background-position: center, center;
background-repeat: no-repeat, repeat;
display: flex;
align-items: center;
justify-content: center;
font-size: 76px;
text-shadow: 0 6px 28px rgba(236, 72, 153, 0.35);
}
.radio-art::after {
content: '📻';
filter: drop-shadow(0 4px 18px rgba(255, 255, 255, 0.85));
}
.radio-art.playing::after { animation: pulse 1.8s ease-in-out infinite; }
/* §2 — Now-playing card */
.radio-now-card {
padding: 22px 22px 18px;
position: relative;
container-type: inline-size;
container-name: rnow;
}
.radio-fav {
position: absolute;
top: 16px;
right: 16px;
width: 38px; height: 38px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.06);
color: #ec4899;
font-size: 16px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, background 0.15s ease;
}
.radio-fav:hover { transform: scale(1.08); background: #fdf2f8; }
/* "NOW PLAYING" eyebrow — red chip + white font, matches .radio-label. */
.radio-now-eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: #FFFFFF !important;
background: #F2252F !important;
border: 2px solid #111111;
border-radius: 8px;
padding: 3px 10px 4px;
box-shadow: 2px 2px 0 #111111;
margin-bottom: 6px;
text-shadow: none !important;
}
.radio-now-title {
font-family: 'Roboto', sans-serif;
font-size: clamp(20px, 5.6cqi, 28px);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.15;
color: #111;
margin: 0 0 6px;
padding-right: 44px; /* room for the heart button */
overflow-wrap: break-word;
}
.rnm-artist {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #1f2937;
font-weight: 700;
}
.rnm-cat {
font-family: var(--mono);
font-size: 11px;
color: #94a3b8;
margin-top: 2px;
margin-bottom: 14px;
}
/* Decorative waveform — bars with pink-purple-blue gradient. */
.radio-waveform {
height: 56px;
display: flex;
align-items: flex-end;
gap: 2px;
margin-bottom: 12px;
}
.rw-bar {
flex: 1;
min-width: 2px;
border-radius: 1px;
background: linear-gradient(180deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%);
opacity: 0.85;
}
.radio-progress {
display: flex;
align-items: center;
gap: 12px;
}
.rp-time {
font-family: var(--mono);
font-size: 11px;
color: #64748b;
min-width: 36px;
}
.rp-time:last-child { text-align: right; }
.rp-track {
flex: 1;
height: 6px;
background: rgba(15, 23, 42, 0.08);
border-radius: 999px;
position: relative;
}
.rp-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0; /* JS-driven via #rpFill.style.width */
background: linear-gradient(90deg, #ec4899, #a855f7);
border-radius: 999px;
transition: width 0.15s linear;
}
.rp-knob {
position: absolute;
left: 0; /* JS-driven via #rpKnob.style.left */
top: 50%;
width: 14px; height: 14px;
margin-left: -7px;
margin-top: -7px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
transition: left 0.15s linear;
pointer-events: none; /* clicks pass through to .rp-track */
}
/* §4 — Genre filter card (EQ + Bass/Volume sliders removed 2026-04-29
* — they were visual-only mocks and the user called them out as fake). */
.radio-mixer-card {
padding: 16px 18px;
}
.radio-genre {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.rg-eyebrow {
font-family: 'Roboto', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
color: #94a3b8;
text-align: center;
}
.rg-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.rg-chips .filter-chip {
padding: 6px 8px;
border-radius: 999px;
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(15, 23, 42, 0.06);
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rg-chips .filter-chip:hover { background: #ffffff; color: #111; }
.rg-chips .filter-chip.active {
background: linear-gradient(135deg, #f472b6, #ec4899);
color: #fff;
border-color: rgba(236, 72, 153, 0.4);
box-shadow: 0 4px 12px -4px rgba(236, 72, 153, 0.5);
}
/* ---------- PLAYER CONTROLS (centered row) ---------- */
.radio-controls {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
margin: 4px 0;
}
.rc-btn {
width: 52px;
height: 52px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.7);
color: #475569;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, background 0.15s ease;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 4px 10px -4px rgba(15, 23, 42, 0.18);
}
.rc-btn:hover { transform: translateY(-2px); background: #ffffff; color: #111; }
.rc-play {
width: 64px;
height: 64px;
font-size: 22px;
background: linear-gradient(135deg, #f472b6, #ec4899);
color: #fff;
border-color: rgba(236, 72, 153, 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 8px 20px -6px rgba(236, 72, 153, 0.55);
}
.rc-play:hover { background: linear-gradient(135deg, #ec4899, #db2777); color: #fff; }
.rc-repeat { color: #06b6d4; }
/* §5 — Playlist (single-column rows, mobile-style) */
.radio-tracks-wrap {
padding: 16px 16px 14px;
}
.rt-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
padding: 0 4px;
}
.rt-eyebrow {
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
color: #94a3b8;
}
.rt-link {
font-family: 'Roboto', sans-serif;
font-size: 11px;
font-weight: 600;
color: #ec4899;
text-decoration: none;
}
.rt-link:hover { text-decoration: underline; }
.rt-foot {
margin-top: 10px;
text-align: center;
}
.rt-count {
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: #cbd5e1;
}
.radio-tracks {
display: flex;
flex-direction: column;
gap: 6px;
}
.rt-row {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto 18px;
gap: 12px;
align-items: center;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 14px;
cursor: pointer;
text-align: left;
transition: background 0.15s ease;
color: inherit;
font-family: inherit;
}
.rt-row:hover { background: rgba(15, 23, 42, 0.04); }
.rt-row--current {
background: linear-gradient(135deg, rgba(252, 231, 243, 0.85), rgba(254, 226, 226, 0.6));
}
.rt-row--current .rt-title { color: #db2777; }
/* Track thumbnail — small triangle-pattern square (matches the big art) */
.rt-thumb {
width: 40px; height: 40px;
border-radius: 10px;
background:
radial-gradient(circle at center, rgba(236, 72, 153, 0.18), transparent 60%),
url("data:image/svg+xml;utf8,");
background-size: cover, 7px 6px;
background-repeat: no-repeat, repeat;
background-position: center, center;
flex: 0 0 auto;
}
.rt-info { min-width: 0; }
.rt-title {
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 700;
color: #111;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.rt-meta {
font-family: var(--mono);
font-size: 10px;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.rt-time {
font-family: var(--mono);
font-size: 11px;
color: #64748b;
font-weight: 600;
}
.rt-more {
color: #94a3b8;
font-size: 14px;
}
.rt-empty {
padding: 24px;
text-align: center;
font-family: var(--mono);
font-size: 12px;
color: #94a3b8;
}
/* Dark-mode overrides — keep the gradient mood but invert surfaces. */
body.dark-mode #radioView.view {
background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
}
body.dark-mode .radio-shell,
body.dark-mode .radio-art-card,
body.dark-mode .radio-now-card,
body.dark-mode .radio-mixer-card,
body.dark-mode .radio-tracks-wrap {
background: rgba(30, 27, 75, 0.45) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .radio-now-title { color: #f1f5f9; }
body.dark-mode .rnm-artist { color: #cbd5e1; }
body.dark-mode .rt-row { background: rgba(30, 27, 75, 0.4); border-color: rgba(255, 255, 255, 0.08); }
body.dark-mode .rt-row:hover { background: rgba(30, 27, 75, 0.7); }
body.dark-mode .rt-title { color: #f1f5f9; }
@media (max-width: 700px) {
.radio-shell { padding: 12px; }
/* Phone player + footer dock shrinks (preserved from old radio.css) */
.player-phone { width: 110px; height: 220px; right: 10px; bottom: 10px; border-radius: 18px; padding: 4px; }
.phone-screen { border-radius: 14px; }
.phone-art { font-size: 20px; }
.pb-title { font-size: 9px; }
.footer-dock { bottom: 6px; height: 46px; border-radius: 16px; padding: 0 8px; gap: 6px; }
.dock-btn { width: 34px; height: 34px; font-size: 16px; }
.dock-music { width: 44px; height: 44px; font-size: 20px; }
.dock-chat { width: 46px; height: 46px; bottom: 8px; right: 10px; font-size: 20px; }
.chat-window { right: 130px; bottom: 68px; width: calc(100vw - 150px); max-width: 320px; height: 380px; }
.pb-progress { max-width: 100%; }
.pb-time { display: none; }
}
/* Secret admin portal — looks like a regular copyright char but triple-click opens admin.
No hover hint, no underline, no pointer cursor — blends in completely. */
.secret-portal {
cursor: default;
user-select: none;
}
/* ---------- Featured Collections banner ---------- */
.featured-row {
max-width: 1400px;
margin: 0 auto;
padding: 12px 48px 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.featured-card {
position: relative;
border: 1px solid var(--border);
overflow: hidden;
cursor: pointer;
aspect-ratio: 16 / 10;
background: var(--bg-card);
transition: all 0.3s;
}
.featured-card:hover {
border-color: var(--cyan-dim);
transform: translateY(-3px);
box-shadow: 0 24px 48px -20px rgba(0, 240, 200, 0.25);
}
.featured-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-card:hover img { transform: scale(1.04); }
.featured-overlay {
position: absolute;
inset: 0;
padding: 36px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to top,
rgba(10, 11, 15, 0.92) 0%,
rgba(10, 11, 15, 0.55) 45%,
rgba(10, 11, 15, 0.1) 75%,
transparent 100%);
}
.featured-eyebrow {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.25em;
color: var(--cyan);
text-transform: uppercase;
margin-bottom: 12px;
}
.featured-card h3 {
font-family: var(--serif);
font-size: clamp(28px, 3vw, 40px);
font-weight: 400;
letter-spacing: -0.02em;
margin: 0 0 6px;
line-height: 1;
color: var(--text);
}
.featured-card h3 em {
font-style: italic;
color: var(--cyan);
font-weight: 400;
}
.featured-sub {
font-family: var(--mono);
font-size: 12px;
color: var(--text-dim);
margin-bottom: 16px;
letter-spacing: 0.02em;
}
.featured-meta {
display: flex;
gap: 20px;
margin-bottom: 18px;
font-family: var(--mono);
font-size: 11px;
color: var(--text-faint);
}
.featured-meta span { display: flex; gap: 6px; }
.featured-meta b {
color: var(--text);
font-weight: 400;
}
.featured-cta {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 10px 18px;
background: var(--blue);
color: #ffffff;
border: none;
cursor: pointer;
align-self: flex-start;
font-weight: 500;
transition: background 0.15s;
}
.featured-cta:hover { background: var(--blue-hover); }
@media (max-width: 900px) {
nav.top-dock { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
.top-search { order: 3; flex-basis: 100%; max-width: none; }
.nav-actions { gap: 8px; }
.geo-wrap { display: none; }
.category-bar { padding: 10px 14px; }
.category-bar-inner { overflow-x: auto; scrollbar-width: thin; gap: 12px; }
.cat-all { padding: 8px 16px; font-size: 12px; flex-shrink: 0; }
.hero { padding: 10px 14px; gap: 10px; }
.hero h1 { white-space: normal; font-size: 15px; }
.grid { padding: 24px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.filter-bar { padding: 16px 24px; flex-direction: column; gap: 16px; align-items: flex-start; }
footer { padding: 24px; flex-direction: column; gap: 12px; text-align: center; }
.admin-shell { grid-template-columns: 1fr; }
.admin-sidebar { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 12px; }
.admin-sidebar h4 { display: none; }
.admin-nav-item { flex-shrink: 0; border-left: none; border-bottom: 2px solid transparent; }
.admin-nav-item.active { border-left: none; border-bottom-color: var(--cyan); }
.admin-main { padding: 24px; }
.dash-grid { grid-template-columns: 1fr 1fr; }
.upload-panel { grid-template-columns: 1fr; }
.table-row, .sales-row { grid-template-columns: 40px 1fr auto; font-size: 11px; }
.table-row > *:nth-child(n+4), .sales-row > *:nth-child(n+4) { display: none; }
.searchrow { padding: 12px 20px; top: 92px; }
.search-shortcut { display: none; }
.results-header { padding: 16px 24px 0; }
.featured-row { grid-template-columns: 1fr; padding: 0 20px 16px; gap: 12px; }
.featured-card { aspect-ratio: 4 / 3; }
.featured-overlay { padding: 22px; }
}