/* Base surface background & text color */
html,body,main.bootstrapiso{
background:var(--tfm-surface);
color:var(--tfm-on-surface);
}
/* ===== TEAM FM PLAYER STYLES (player.css) ===== */
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{padding-bottom:calc(env(safe-area-inset-bottom)+90px);font-family:var(--tfm-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/******** GLOBAL UTILITIES ********/
.hidden{display:none!important}
/******** CARD LISTS ********/
.player-card.hidden{display:none!important}
.player-card{position:relative;cursor:pointer}
.player-card.focused{outline:3px solid var(--tfm-accent-lime);outline-offset:0}
/* mobile thumbs */
#station-picker-mobile img.station-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;padding:0;vertical-align:middle}
#station-picker-mobile .player-card span{font-size:var(--tfm-fs-body-plus);font-weight:500}
/******** PLAYER BAR ********/
#player-bar{position:fixed;left:0;right:0;bottom:0;height:74px;background:linear-gradient(90deg,var(--tfm-primary-light) 0%,var(--tfm-primary-dark) 100%);display:flex;align-items:center;padding:0 12px 0 8px;z-index:1050;color:var(--tfm-white)}
#player-cover{width:60px;height:60px;border-radius:6px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 4px rgba(0,0,0,.4)}
#playpause{background:var(--tfm-white);border:2px solid var(--tfm-primary-dark);width:56px;height:56px;border-radius:50%;flex:0 0 auto;margin-left:auto;margin-right:16px;display:flex;align-items:center;justify-content:center;font-size:var(--tfm-fs-icon-lg);color:var(--tfm-text-dark);cursor:pointer}
#playpause:active{transform:scale(.95)}
#title-wrap{flex:1 1 auto;padding-left:12px;overflow:hidden;min-width:0}
#title-wrap span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#title-main{font-weight:700;font-size:var(--tfm-fs-h4);line-height:1.2}
#title-sub{font-size:var(--tfm-fs-small);line-height:1.2}
#desktop-controls{display:flex;align-items:center;gap:var(--tfm-gap-xs);padding-right:8px}
#volume-range{width:120px}
/******** HAMBURGER MENU ********/
#menu-drawer{position:fixed;top:0;right:-1040px;width:240px;height:60vh;background:linear-gradient(180deg,var(--tfm-primary) 0%,var(--tfm-primary-dark) 100%);color:var(--tfm-white);z-index:2100;transition:right .3s;padding:70px 18px 24px;border-bottom-left-radius:12px;box-shadow:-4px 0 8px rgba(0,0,0,.25)}
#menu-drawer a{display:block;color:var(--tfm-white);font-size:var(--tfm-fs-body-plus);padding-bottom:1rem;text-decoration:none}
body.menu-open #menu-drawer{right:0}
body.menu-open #mobile-nav{ z-index: 1040; } /* onder de lade, nog steeds boven de player-bar */
#cookie-banner{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));padding:14px 12px;background:linear-gradient(90deg,var(--tfm-primary) 0%,var(--tfm-primary-dark) 100%);color:var(--tfm-white);display:flex;flex-wrap:wrap;align-items:center;gap:var(--tfm-gap);font-size:var(--tfm-fs-small-plus);z-index: 1040;border-top:1px solid rgba(255,255,255,.35);box-shadow:0 -2px 4px rgba(0,0,0,.3)}
#cookie-banner button{border:none;border-radius:4px;padding:6px 12px;font-weight:600;cursor:pointer}
.btn-accept{background:var(--tfm-accent-lime);color:var(--tfm-text-dark)}
.btn-reject{background:var(--tfm-white);color:var(--tfm-text-dark)}
.btn-settings{background:transparent;color:var(--tfm-white);text-decoration:underline}
/******** COOKIE MODAL ********/
#title-sub {
font-size:var(--tfm-fs-small);
}
#playpause {
width: 46px;
height: 46px;
font-size: 1.7rem;
margin-right: 8px;
flex-shrink: 0;
}
#desktop-controls {
display: none;
}
#mobile-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 56px;
background: var(--tfm-primary-dark);
color: var(--tfm-white);
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1040;
}
#mobile-nav button {
flex: 1 1 33.33%;
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
font-size: 1.7rem;
color: #fff;
border: none;
background: none;
cursor: pointer;
}
@media (min-width: 1500px) {
#playpause {
width: 72px;
height: 72px;
font-size: 2.4rem;
}
}
/* === Chromecast-knop & playerbalk =============================== */
#player-bar {
display: flex;
align-items: center;
gap:var(--tfm-gap-sm);
}
#player-bar #title-wrap {
flex: 1 1 auto;
min-width: 0;
}
#cast-launcher {
width: 24px;
height: 24px;
cursor: pointer;
--disconnected-color: var(--tfm-white);
--connected-color: var(--tfm-cast-connected);
--connecting-color: var(--tfm-cast-connecting);
}
/* --- kaart klikbaar maken (Chromecast build) --- */
.player-card .card-img-overlay,
.player-card .gradient,
.player-card .gradient-hover {
position: absolute;
bottom: 8px;
right: 8px;
pointer-events: none;
}
/* --- kaart volledig klikbaar maken (desktop) --- */
#station-picker-desktop .player-card * {
pointer-events: none;
}
/* ========= PWA install-banner ========= */
#install-banner {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(90px + env(safe-area-inset-bottom));
background: var(--tfm-primary);
color: var(--tfm-white);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,.25);
display: flex;
align-items: center;
gap:var(--tfm-gap);
padding: 12px 14px;
z-index: 1060;
transform: translateY(20px);
opacity: 0;
transition: opacity .35s, transform .35s;
}
#install-banner.show {
opacity: 1;
transform: translateY(0);
}
#install-banner.hidden {
display: none;
}
#install-banner p {
flex: 1 1 auto;
padding: 0;
font-size: .95rem;
line-height: 1.25;
}
#install-banner button {
border: none;
padding: 6px 14px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
}
#install-btn {
background: var(--tfm-accent-lime);
color: var(--tfm-text-dark);
}
#install-close {
background: transparent;
color: var(--tfm-white);
font-size: 1.4rem;
line-height: 1;
width: 32px;
}
@media (max-width: 767.98px) {
#install-banner {
top: 12px;
bottom: auto;
left: 12px;
right: 12px;
}
}
/* ===== Install-banner – desktop pop-up ===== */
@media (min-width: 992px) {
#install-banner {
left: 50%;
right: auto;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
max-width: 360px;
padding: 18px 20px;
gap:var(--tfm-gap-md);
}
}
.left-section {
display: flex;
align-items: center;
gap:var(--tfm-gap-lg);
}
#hamburger {
padding-right: 8px;
font-size: 2rem;
color: var(--tfm-white);
cursor: pointer;
}
#title-wrap {
display: flex;
flex-direction: column;
justify-content: center;
}
#title-main {
font-weight: 700;
font-size:var(--tfm-fs-h4);
text-align: left;
}
#title-sub {
font-size:var(--tfm-fs-small);
text-align: left;
}
@media (max-width: 767.98px) {
#cast-launcher,
google-cast-launcher {
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
#mobile-cast-btn {
display: flex !important;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 48px;
min-height: 48px;
height: 100%;
background: none;
border: none;
color: var(--tfm-white);
font-size: 1.7rem;
cursor: pointer;
border-radius: 8px;
transition: background .2s;
}
#mobile-cast-btn:active {
background: var(--tfm-primary-dark);
}
}
@media (min-width: 768px) {
#cast-launcher,
google-cast-launcher {
display: inline-block !important;
width: 24px !important;
height: 24px !important;
opacity: 1 !important;
pointer-events: auto !important;
}
#mobile-cast-btn {
display: none !important;
}
}
#player-info {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 12px;
min-width: 0;
}
/* ===== Scroll-fix — ruimte onder vaste balk(en) ==================== */
html,body{height:100%;} /* body rekt 100 vh → scrollen kan altijd */
main.bootstrapiso{
min-height:100%;
overflow-y:auto; /* als content hoger is → scroll */
/* 74 px (player) + env() voor iOS safe-area */
padding-bottom:calc(74px + env(safe-area-inset-bottom));
}
/* ===== Mobile station-lijst volledig scrollbaar ================= */
@media (max-width:767.98px){
#station-picker-mobile{
/* vaste hoogtes: 74 px player-bar + 56 px nav + 20 px lucht */
padding-bottom:calc(74px + 56px + 20px);
overflow-y:auto; /* eigen scrollbar indien nodig */
}
}
/* ===== Zwevende hamburger – desktop ===== */
#hamburger{
position:fixed;
top:18px; right:18px;
font-size:var(--tfm-fs-icon-xl);
color:var(--tfm-primary-dark); /* donkerblauw → zichtbaar op wit */
background:var(--tfm-accent-lime); /* fel geel bolletje */
width:44px; height:44px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 6px rgba(0,0,0,.25);
z-index:1300;
cursor:pointer;
transition:transform .15s;
}
#hamburger:active{ transform:scale(.92); }
/* Mobiel verbergen */
@media(max-width:767.98px){
#hamburger{ display:none !important; }
}
/* Hamburger altijd boven de lade */
#hamburger{
z-index: 2200 !important; /* hoger dan #menu-drawer (2100) */
}
/* Optioneel: zodra lade open is, icoon iets naar links laten wijken
zodat het niet pal tegen de rand zit. Pas 260px aan als je lade
breder of smaller is. */
body.menu-open #hamburger{
transform: translateX(-260px);
transition: transform .25s;
}
/* ==== Desktop: hamburger blijft staan (geen kruis/shift) ==== */
@media (min-width: 992px){
body.menu-open #hamburger{
transform:none !important;
}
}
/* ===== Station‑badge op de actieve kaart =========================== */
.player-card.playing .gradient-hover { /* maak bestaande overlay zichtbaar */
opacity: 1;
}
.player-card.playing::after { /* tekstlabel linksonder */
content: attr(data-station);
position: absolute;
left: 8px;
bottom: 8px;
padding: 2px 6px;
font-size: .75rem;
font-weight: 600;
background: rgba(0,0,0,.65);
color: var(--tfm-white);
border-radius: 4px;
pointer-events: none;
white-space: nowrap;
}
/* Mobile: stationnaam verbergen */
@media (max-width: 767.98px){
#station-name{ display:none !important; }
}
@media(max-width:767.98px){
#cookie-banner{
bottom:calc(74px + 56px + 12px + env(safe-area-inset-bottom)); /* player + nav + marge */
}
}
/* === hard‑fix: mobile bottom nav (14‑07‑2025) ====================== */
@media (max-width: 767.98px){
/* nav steeds zichtbaar op phones */
#mobile-nav{
display:flex !important;
position:fixed; left:0; right:0; bottom:0;
height:56px;
z-index:1055; /* cookie‑banner 1045, player 1065 */
}
/* player‑bar een “trede” omhoog */
#player-bar{
bottom:56px; /* hoogte nav‑bar */
z-index:1065; /* altijd boven nav + banner */
}
/* cookie‑banner daar weer boven */
#cookie-banner{
bottom:calc(74px + 56px + env(safe-area-inset-bottom));
z-index:1045;
}
}
/* === Cross‑fade titel & artiest (prefers‑reduced‑motion safe) === */
@media (prefers-reduced-motion: no-preference){
#title-wrap span{
transition:opacity .2s ease;
}
#title-wrap span.fade-out{ opacity:0; }
#title-wrap span.fade-in { opacity:0; animation:tfm-fade-in .2s forwards; }
@keyframes tfm-fade-in{
to{ opacity:1; }
}
}
/* === Play/pause micro‑interactie =============================== */
@media (prefers-reduced-motion: no-preference){
#playpause{
transition:
transform .15s ease,
box-shadow .15s ease;
}
#playpause:hover{
transform:translateY(-2px);
box-shadow:0 4px 6px rgba(0,0,0,.25);
}
#playpause:active{
transform:scale(.95);
box-shadow:0 2px 4px rgba(0,0,0,.25);
}
}
/* === Install‑banner slide‑in ================================== */
@media (prefers-reduced-motion: no-preference){
#install-banner{
transition:transform .45s cubic-bezier(.25,.8,.25,1), opacity .45s ease;
}
#install-banner.show{
transform:translateY(0); /* blijft gelijk, maar transition activeert */
opacity:1;
}
#install-banner.hidden{
transform:translateY(20px);
opacity:0;
}
}
/* Reduced‑motion: banner verschijnt direct, zonder slide/opacity */
@media (prefers-reduced-motion: reduce){
#install-banner{
transition:none!important;
}
}
/* === Volume‑slider custom skin =============================== */
#volume-range{
appearance:none;
width:120px;
height:var(--tfm-slider-h,6px);
cursor:pointer;
background:transparent; /* we tekenen zelf de track */
margin:0;
}
/* WebKit (Chrome, Edge, Safari) ------------------------------- */
#volume-range::-webkit-slider-runnable-track{
background:linear-gradient(to right,
var(--tfm-accent-lime) 0%,
var(--tfm-accent-lime) var(--pct,50%),
rgba(255,255,255,.35) var(--pct,50%),
rgba(255,255,255,.35) 100%);
height:var(--tfm-slider-h,6px);
border-radius:3px;
}
#volume-range::-webkit-slider-thumb{
appearance:none;
width:14px; height:14px;
border-radius:50%;
background:var(--tfm-accent-lime);
border:2px solid var(--tfm-primary-dark);
margin-top:-4px; /* center thumb */
transition:transform .15s ease;
}
#volume-range:active::-webkit-slider-thumb{
transform:scale(.9);
}
/* Firefox ----------------------------------------------------- */
#volume-range::-moz-range-track{
background:transparent;
}
#volume-range::-moz-range-progress{
background:var(--tfm-accent-lime);
height:var(--tfm-slider-h,6px);
border-radius:3px 0 0 3px;
}
#volume-range::-moz-range-thumb{
width:14px; height:14px;
border-radius:50%;
background:var(--tfm-accent-lime);
border:2px solid var(--tfm-primary-dark);
transition:transform .15s ease;
}
#volume-range:active::-moz-range-thumb{
transform:scale(.9);
}
/* High‑contrast fallback (prefers‑reduced‑transparency) -------- */
@media (forced-colors: active){
#volume-range::-webkit-slider-runnable-track,
#volume-range::-moz-range-progress{
background:Highlight;
}
#volume-range::-webkit-slider-thumb,
#volume-range::-moz-range-thumb{
background:HighlightText;
}
}
/* ------------------------------------------------------------------
Dark‑mode component‑contrasts
------------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
/* Play/pause button */
#playpause{
background:var(--tfm-surface);
color:var(--tfm-on-surface);
border-color:var(--tfm-primary-light);
}
/* Install‑banner CTA‑knop */
#install-btn{
color:var(--tfm-primary-dark); /* donkerblauw leesbaar op geel */
}
/* Cookie‑banner Accept‑knop */
.btn-accept{
color:var(--tfm-primary-dark);
}
}
/* === Safe‑area helper ========================================== */
/* Gebruik max() zodat er óf de vaste hoogte óf de device‑inset geldt,
afhankelijk van wat groter is. */
:root{
--tfm-safe-inset: env(safe-area-inset-bottom,0px);
}
/* Player‑bar */
#player-bar{
padding-bottom:0;
}
/* Mobile bottom‑nav */
#mobile-nav{
padding-bottom:calc(max(0px,var(--tfm-safe-inset)));
}
/* Cookie‑banner & install‑banner positioneren boven safe‑area */
#cookie-banner,
#install-banner{
bottom:calc(74px + var(--tfm-safe-inset));
}
/* Scroll‑spacer voor main content */
main.bootstrapiso{
padding-bottom:calc(74px + var(--tfm-safe-inset));
}
/* --- Install‑banner positie terug naar boven op mobiel -------- */
@media (max-width: 767.98px){
#install-banner{
top:12px;
bottom:auto; /* overschrijft safe‑area regel */
}
}
/* Forceer install‑banner bovenaan op mobiel (altijd) ------------- */
@media (max-width: 767.98px){
#install-banner{
top:12px !important;
bottom:auto !important;
left:12px !important;
right:12px !important;
}
}
/* Install‑banner bovenaan voor álle schermen < 992 px */
@media (max-width: 991.98px){
#install-banner{
top:12px !important;
bottom:auto !important;
left:12px !important;
right:12px !important;
transform:none !important; /* zeker geen translate‑center */
}
}
/* Cookie‑banner altijd boven nav‑balk (< 992 px) ------------------ */
@media (max-width: 991.98px){
#cookie-banner{
bottom:calc(74px + 56px + var(--tfm-safe-inset)) !important;
}
}
/* Inline SVG‑icons */
.icon{
width:24px; height:24px; fill:currentColor; flex-shrink:0;
}
/* 2 ) Leesbare titel – donkere fade‑overlay --------------------- */
/* Donkere fade-overlay onder tekst */
.player-card .card-img-overlay::before {
content: "";
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
/* Tekst boven fade houden */
.player-card .card-img-overlay * {
position: relative;
z-index: 1;
}
/* Play‑icoon rechtsonder, boven overlay én tekst */
.player-card .mdi-play-circle {
position: absolute !important;
bottom: 8px !important;
right: 8px !important;
font-size: 32px;
color: var(--tfm-white);
opacity: .9;
pointer-events: none;
z-index: 3; /* boven overlay en tekst */
}
/* Overlay: ruimte rechts voor play-icoon */
.player-card .card-img-overlay,
.player-card .gradient,
.player-card .gradient-hover {
padding: 0 56px 8px 12px !important; /* top | right | bottom | left */
box-sizing: border-box;
}
/* Mobiele station‑lijst: lucht tussen afbeelding & tekst ---------- */
@media (max-width: 767.98px){
#station-picker-mobile .player-card{
display:flex; /* thumbnail + tekst op één rij */
align-items:center;
gap:var(--tfm-gap-sm); /* 8 px – gebruik gerust gap-md (1 rem) als je meer wilt */
}
}
/* Chromecast icoon status -------------------------------------- */
#cast-launcher{ opacity:.3; pointer-events:none; }
body.cast-ready #cast-launcher{ opacity:1; pointer-events:auto; }
body.cast-failed #cast-launcher{
opacity:.3; pointer-events:auto; cursor:help;
}
body.cast-failed #cast-launcher::after{
content:'Cast niet beschikbaar';
position:absolute; top:-32px; right:0;
background:#333; color:#fff; font-size:.75rem;
padding:3px 6px; border-radius:4px;
}
/* ------------ AirPlay‑knop (alleen iOS/WebKit) -------------------- */
#airplay-btn{
background:none; border:none; color:var(--tfm-white);
font-size:1.7rem; display:none; cursor:pointer;
padding:0 6px;
}
body.ios #airplay-btn{ display:inline-flex; align-items:center; }
/* ===== Card hover‑lift ============================================ */
@media (hover: hover){ /* alleen apparaten met muis/trackpad */
.player-card{
transition:box-shadow .2s ease, transform .2s ease;
box-shadow:0 2px 4px rgba(0,0,0,.12);
}
.player-card:hover,
.player-card:focus-visible{
transform:translateY(-2px);
box-shadow:0 6px 12px rgba(0,0,0,.18);
}
}
/* Reduced‑motion: geen translate, wel shadow */
@media (prefers-reduced-motion: reduce) {
.player-card {
transition: box-shadow .2s ease;
}
.player-card:hover,
.player-card:focus-visible {
transform: none;
}
}
/* Mobile bottom‑nav – 3 × gelijke knoppen */
@media (max-width: 767.98px) {
#mobile-nav button {
flex: 1 1 33.33%;
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
font-size: 1.7rem;
color: #fff;
border: none;
background: none;
cursor: pointer;
}
}
.icon {
display: inline-block;
width: 24px;
height: 24px;
fill: currentColor;
vertical-align: middle;
}
/* Fix voor