html, body {
margin: 0;
padding: 0;
background: #0b0b0b;
color: #fff;
font-family: 'Mukta', system-ui, sans-serif;
}
* { box-sizing: border-box; }
a { color: #fff; text-decoration: none; }
#bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
#bg-video { display: none; }
html, body { background: #14110d url('assets/bus-poster.jpg') center / cover no-repeat fixed; }
}
.scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to bottom,
rgba(11,11,11,.42) 0%,
rgba(11,11,11,.05) 22%,
rgba(11,11,11,0) 50%,
rgba(11,11,11,.32) 100%);
}
main {
position: relative;
z-index: 2;
width: 100%;
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
padding: clamp(16px, 2vw, 26px);
overflow: hidden;
}
/* Grid items default to min-width:auto, which lets them grow past their
track's width instead of shrinking/wrapping — min-width:0 fixes that. */
main > * { min-width: 0; }
/* Top rail */
.top-rail {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
min-width: 0;
}
.clock {
font-family: 'IBM Plex Mono', monospace;
font-size: clamp(13px, 1.3vw, 15px);
color: rgba(255,255,255,.9);
letter-spacing: .02em;
text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.listeners {
display: flex;
align-items: center;
gap: 8px;
font-size: clamp(12px, 1.2vw, 14px);
color: rgba(255,255,255,.9);
text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.dot {
width: 8px; height: 8px; border-radius: 50%;
background: #3ecf6b;
flex: none;
}
.online-count { font-weight: 600; }
.online-label { font-weight: 300; color: rgba(255,255,255,.72); }
.yt-link {
display: flex;
align-items: center;
gap: 8px;
font-size: clamp(12px, 1.25vw, 15px);
font-weight: 600;
color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,.45);
transition: opacity .15s;
}
.yt-link:hover { opacity: .75; }
.yt-badge {
width: 20px; height: 20px; flex: none;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
}
.yt-triangle {
width: 0; height: 0;
border-left: 6px solid #ff0033;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
margin-left: 2px;
}
.arrow { font-weight: 300; opacity: .7; }
/* Wordmark */
.wordmark-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.4vh, 18px);
padding: clamp(12px, 3vh, 40px) 0;
min-height: 0;
}
.wordmark {
margin: 0;
text-align: center;
font-weight: 800;
font-size: clamp(40px, min(9.5vw, 16vh), 124px);
line-height: 1;
letter-spacing: -.015em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(255,255,255,.95);
filter: drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
.sub-label {
display: flex;
align-items: center;
gap: 12px;
font-size: clamp(10px, 1.05vw, 12px);
font-weight: 600;
letter-spacing: .42em;
text-transform: uppercase;
color: rgba(255,255,255,.8);
text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.rule {
width: clamp(24px, 4vw, 56px);
height: 1px;
background: rgba(255,255,255,.5);
}
/* Player pill */
.player-row {
display: flex;
justify-content: center;
}
.player-pill {
width: min(560px, 100%);
display: flex;
align-items: center;
gap: clamp(10px, 1.6vw, 18px);
padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.6vw, 18px);
border-radius: clamp(22px, 4vw, 999px);
background: rgba(28,22,20,.42);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.cover {
width: clamp(40px, 11vw, 62px);
height: clamp(40px, 11vw, 62px);
flex: none;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(150deg, #2f2a24, #16130f);
border: 1px solid rgba(255,255,255,.16);
font-size: clamp(20px, 2vw, 24px);
font-weight: 800;
color: #e8b04b;
overflow: hidden;
position: relative;
}
.cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.text-col {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.track-title {
font-size: clamp(14px, 1.5vw, 17px);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-artist {
font-size: clamp(12px, 1.2vw, 14px);
font-weight: 300;
color: rgba(255,255,255,.68);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-track {
position: relative;
height: 8px;
display: flex;
align-items: center;
cursor: pointer;
margin-top: 2px;
}
.progress-bg {
position: absolute;
left: 0; right: 0;
height: 3px;
border-radius: 3px;
background: rgba(255,255,255,.24);
}
.progress-fill {
position: absolute;
left: 0;
height: 3px;
border-radius: 3px;
background: rgba(255,255,255,.92);
width: 0%;
}
.timecode {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: rgba(255,255,255,.6);
}
.transport {
display: flex;
align-items: center;
gap: clamp(2px, 1vw, 12px);
flex: none;
}
.tbtn {
width: clamp(28px, 8vw, 34px);
height: clamp(28px, 8vw, 34px);
display: grid;
place-items: center;
border: none;
border-radius: 50%;
background: transparent;
color: rgba(255,255,255,.82);
cursor: pointer;
transition: color .15s, background .15s;
}
.tbtn:hover { color: #fff; background: rgba(255,255,255,.12); }
.tbtn.play {
width: clamp(44px, 4vw, 50px);
height: clamp(44px, 4vw, 50px);
border: 1px solid rgba(255,255,255,.4);
background: rgba(255,255,255,.16);
color: #fff;
}
.tbtn.play:hover { background: rgba(255,255,255,.28); }
/* [hidden] on