/* =========================================================================== VOX·ARIA — user.css (child template di Cassiopeia) — v2 MOBILE-FIRST / EN Veste neural/dark del brand. Caricato automaticamente da Cassiopeia. v2 (2026-06-30): home NATIVA player-first (niente iframe/WebGL), inglese, mobile-first. Sezione "home-immersive" RIMOSSA. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&family=Poppins:wght@200;300&display=swap'); :root{ --ink:#f4efe6; --muted:#b8b0c2; --bg:#070509; --g1:#28d7f0; --g2:#a855f7; --gold:#e0b15a; --glass:rgba(20,16,28,.42); --line:rgba(244,239,230,.14); --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --wordmark:"Poppins","Century Gothic","Segoe UI",system-ui,sans-serif; --player-h:74px; } /* ---- base / sfondo neural statico su tutto il sito ------------------------- */ /* Il gradiente sta su (non su body) così la sfera 2D (#vxsphere, z-index:-1) NON viene coperta dallo sfondo opaco del body. body resta trasparente. */ html{ background: radial-gradient(120% 90% at 18% -8%, rgba(40,215,240,.10) 0%, transparent 42%), radial-gradient(120% 90% at 92% 4%, rgba(168,85,247,.13) 0%, transparent 46%), radial-gradient(125% 130% at 70% 18%, #1a1336 0%, #0b0814 52%, #060409 100%) #060409; background-attachment:fixed; } body.site{ background:transparent; color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* il player fisso non deve coprire il contenuto in fondo */ .container-main,.site .container-component{padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom) + 26px)} a{color:var(--g1);text-decoration:none} a:hover{color:var(--ink)} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--ink)} .container-component{color:var(--ink)} img{max-width:100%;height:auto} /* SFERA DI LIBRI = sfondo video (vxsphere.js) — fisso dietro al contenuto, non interattivo. Scrim per la leggibilità del testo (scurisce bordi + basso, lascia viva la sfera al centro). */ #vxsphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#05060a} #vxsphere video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92} .vxsphere-scrim{position:absolute;inset:0;pointer-events:none; background: radial-gradient(120% 100% at 50% 38%, transparent 40%, rgba(6,4,9,.72) 100%), linear-gradient(0deg, rgba(6,4,9,.80) 0%, rgba(6,4,9,0) 44%);} /* ---- header Cassiopeia rivestito (logo + menu) ---------------------------- */ .header,.container-header{background:transparent;border:0;box-shadow:none} /* SOLO l'header: .container-component ha anch'esso classe .grid-child, e un align-items:center la' stringe il
alla larghezza del contenuto (bug). */ .container-header .grid-child{align-items:center} .header a.brand-logo,.header .logo{display:inline-flex;align-items:center} .header .logo img,.brand-logo img{width:clamp(150px,40vw,240px);height:auto;display:block} /* tagline dell'header (campo "Tagline" del template) con lo stile "eyebrow" della home, su TUTTE le pagine, + pill "On air". margin-top = spazio logo <-> sottotitolo. */ .header .site-description{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 0; font-family:var(--sans);font-size:11.5px;letter-spacing:.30em;text-transform:uppercase; color:var(--muted);white-space:normal;line-height:1.3} .onair{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ink);padding:8px 14px;border:1px solid var(--line);border-radius:999px; background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .onair .led{width:8px;height:8px;border-radius:50%;background:#ff5470;box-shadow:0 0 11px #ff5470; animation:vx-pulse 1.9s ease-in-out infinite} @keyframes vx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}} @media (prefers-reduced-motion:reduce){.onair .led{animation:none}} /* ---- navigazione (mobile-first, Cassiopeia) ------------------------------- */ .navbar,.mod-menu{background:transparent} .mod-menu a,.navbar a{color:var(--muted);letter-spacing:.04em} .mod-menu a:hover,.mod-menu .current>a,.navbar a:hover{color:var(--ink)} /* =========================================================================== MENU HAMBURGER — un solo controllo in alto a DESTRA (desktop + mobile). Il menu Cassiopeia (.container-nav) diventa un pannello laterale destro nascosto; vxmenu.js inietta il bottone + backdrop e fa il toggle di body.vx-menu-open. Se il JS non gira il menu non si apre (sito JS-driven). =========================================================================== */ .vx-burger{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:120; width:48px;height:48px;padding:0;border-radius:13px;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center; border:1px solid var(--line);background:rgba(11,8,18,.70); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:0 10px 30px -14px #000;transition:border-color .2s ease} .vx-burger:hover{border-color:rgba(244,239,230,.32)} .vx-burger span{display:block;width:20px;height:2px;margin:2.5px 0;border-radius:2px;background:var(--ink); transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease} body.vx-menu-open .vx-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.vx-menu-open .vx-burger span:nth-child(2){opacity:0} body.vx-menu-open .vx-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .vx-nav-backdrop{position:fixed;inset:0;z-index:110;background:rgba(4,3,8,.55); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease} body.vx-menu-open .vx-nav-backdrop{opacity:1;visibility:visible} /* .container-nav → pannello laterale destro, nascosto di default (TUTTE le larghezze) */ .container-nav{position:fixed;top:0;right:0;bottom:0;z-index:115;width:min(86vw,340px); padding:calc(84px + env(safe-area-inset-top)) 24px calc(var(--player-h) + 34px); display:flex;flex-direction:column;gap:4px;overflow-y:auto; background:linear-gradient(180deg,rgba(18,14,30,.985),rgba(9,7,16,.99)); border-left:1px solid var(--line);box-shadow:-30px 0 80px -40px #000; transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1)} body.vx-menu-open .container-nav{transform:translateX(0)} /* voci grandi, verticali, pollice-friendly */ .container-nav .mod-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;width:100%} .container-nav .mod-menu>li{width:100%} .container-nav .mod-menu a{display:block;padding:15px 10px;font-family:var(--serif);font-weight:600; font-size:1.4rem;line-height:1.1;color:var(--ink);letter-spacing:.01em;border-bottom:1px solid rgba(244,239,230,.09)} .container-nav .mod-menu a:hover,.container-nav .mod-menu .current>a,.container-nav .mod-menu .active>a{color:var(--g1)} .container-nav .mod-menu .mod-menu__sub{list-style:none;margin:0 0 0 12px;padding:0} .container-nav .mod-menu .mod-menu__sub a{font-size:1.06rem;color:var(--muted)} .container-nav .container-search{margin-top:16px} /* nascondi eventuali toggle nativi di Cassiopeia: l'unico controllo e' il nostro hamburger */ .container-nav .navbar-toggler,.container-nav button.navbar-toggler{display:none!important} /* ---- bottoni brand (riusabili negli articoli con class="btn") ------------- */ .btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px; padding:14px 22px;border-radius:999px;text-decoration:none;color:var(--ink);min-height:48px; border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);transition:transform .2s ease,border-color .2s ease;cursor:pointer} .btn:hover,.button:hover{transform:translateY(-2px);color:var(--ink);border-color:rgba(244,239,230,.30)} .btn.primary{border-color:transparent;background:linear-gradient(95deg,var(--g1),var(--g2)); color:#0b0910;box-shadow:0 18px 50px -20px var(--g2)} .btn svg{width:14px;height:14px;fill:currentColor} /* =========================================================================== HOME NATIVA — player-first, mobile-first (articolo con classi .vx-home*) Nessun iframe, nessun WebGL. Sfondo statico (sopra), una sola colonna. =========================================================================== */ /* la home riempie il contenitore come le altre pagine (non è una colonna stretta) */ .vx-home{max-width:none;margin:0;padding:clamp(6px,2vw,18px) 0 8px} .vx-hero{padding:clamp(10px,3vw,26px) 2px 0} .vx-eyebrow{font-size:11.5px;letter-spacing:.30em;text-transform:uppercase;color:var(--muted); display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap} .vx-onair{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink);padding:6px 12px;border:1px solid var(--line);border-radius:999px; background:var(--glass)} .vx-onair .led{width:7px;height:7px;border-radius:50%;background:#ff5470;box-shadow:0 0 10px #ff5470; animation:vx-pulse 1.9s ease-in-out infinite} .vx-hero h1{font-family:var(--serif);font-weight:500;line-height:.98;letter-spacing:.004em; font-size:clamp(2.7rem,12vw,5rem);margin:0} .vx-hero h1 .accent{font-style:italic;background:linear-gradient(95deg,var(--g1),var(--g2)); -webkit-background-clip:text;background-clip:text;color:transparent} .vx-sub{margin-top:16px;max-width:46ch;color:var(--muted);font-size:clamp(15px,4vw,17px);line-height:1.6} /* ---- blocco LISTEN (player-first): grande, pollice-friendly ---------------- */ .vx-listen-wrap{margin-top:clamp(22px,6vw,32px)} .vx-listen{display:flex;align-items:center;gap:16px;width:100%; padding:16px 20px;border-radius:18px;border:1px solid transparent;cursor:pointer; background:linear-gradient(95deg,var(--g1),var(--g2));color:#08060d; box-shadow:0 22px 60px -26px var(--g2);transition:transform .2s ease,box-shadow .2s ease; font-family:var(--sans);text-align:left} .vx-listen:hover{transform:translateY(-2px)} .vx-listen:active{transform:translateY(0) scale(.995)} .vx-listen__ico{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center; background:rgba(8,6,13,.16)} .vx-listen__ico svg{width:20px;height:20px;fill:#08060d;display:block} .vx-listen__lab{display:flex;flex-direction:column;line-height:1.15;min-width:0} .vx-listen__lab b{font-size:clamp(18px,5.4vw,22px);font-weight:700;letter-spacing:.01em} .vx-listen__lab span{font-size:12.5px;font-weight:600;opacity:.78;letter-spacing:.02em} .vx-listen__eq{margin-left:auto;display:inline-flex;gap:3px;align-items:flex-end;height:20px} .vx-listen__eq i{width:3.5px;height:6px;background:#08060d;border-radius:2px;opacity:.55; animation:vx-eq 1s ease-in-out infinite} .vx-listen__eq i:nth-child(2){animation-delay:.22s}.vx-listen__eq i:nth-child(3){animation-delay:.44s} .vx-listen__eq i:nth-child(4){animation-delay:.12s} .vx-listen.is-paused .vx-listen__eq i{animation-play-state:paused;height:6px} @keyframes vx-eq{0%,100%{height:5px}50%{height:20px}} @media (prefers-reduced-motion:reduce){.vx-listen__eq i{animation:none}} .vx-now{margin-top:13px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px; padding:2px 4px} .vx-now .tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);flex:none} .vx-now b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* azione secondaria: guarda il loop video su YouTube (link, NO iframe) */ .vx-watch{margin-top:12px;width:100%;justify-content:center;gap:10px} .vx-watch svg{width:16px;height:16px} .vx-watch .ext{opacity:.75;font-weight:700} .vx-watch.is-soon{opacity:.55;cursor:default} .vx-watch.is-soon:hover{transform:none;border-color:var(--line)} /* ---- griglia programmi (1 col mobile → 2 col) ----------------------------- */ .vx-progs{margin-top:clamp(30px,8vw,46px);display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:560px){.vx-progs{grid-template-columns:repeat(2,1fr);gap:16px}} .vx-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px} .vx-sec-h h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.6rem,6vw,2.1rem)} .vx-sec-h a{font-size:13px;font-weight:600;color:var(--g1);white-space:nowrap} .vx-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:20px 18px;border-radius:16px; overflow:hidden;text-decoration:none;color:inherit;min-height:120px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); border:1px solid var(--line);transition:transform .2s ease,border-color .2s ease} .vx-card:hover,.vx-card:focus-visible{transform:translateY(-3px);border-color:rgba(244,239,230,.30);outline:none} .vx-card .bar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c),transparent 85%)} .vx-card .when{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);font-weight:700} .vx-card h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.1;margin:0;color:var(--ink)} .vx-card p{font-size:13.5px;color:#d4ccdf;line-height:1.45;margin:0} .vx-card .age{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:.04em; color:#0b0910;background:var(--c);border-radius:6px;padding:2px 7px} /* ---- chiusura home (link + nota) ------------------------------------------ */ .vx-foot{margin-top:clamp(28px,7vw,40px);display:flex;gap:12px;flex-wrap:wrap} .vx-foot .btn{flex:1 1 auto} .vx-note{display:flex;align-items:flex-start;gap:10px;margin-top:22px;font-size:12px;color:var(--muted); line-height:1.55;max-width:72ch} .vx-note .d{width:7px;height:7px;border-radius:50%;background:var(--g1);box-shadow:0 0 8px var(--g1);flex:none;margin-top:5px} /* =========================================================================== PAGINA "Programs" (markup nell'articolo: .eyebrow2/.ptitle/.lead/.grid4/.prog) =========================================================================== */ .eyebrow2{font-size:clamp(10px,3vw,12px);letter-spacing:.30em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .ptitle{font-family:var(--serif);font-weight:500;font-style:italic;line-height:.98; font-size:clamp(2.3rem,9vw,4.4rem);margin-bottom:14px} .lead{color:var(--muted);max-width:62ch;font-size:clamp(15px,4vw,17px);line-height:1.6;margin-bottom:clamp(26px,7vw,44px)} .lead .em{font-family:var(--serif);font-style:italic;color:var(--ink)} .grid4{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:560px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}} .prog{position:relative;display:flex;flex-direction:column;gap:11px;padding:24px 22px 22px;border-radius:18px;overflow:hidden; background:linear-gradient(180deg,rgba(19,15,31,.40),rgba(11,8,19,.40)); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid var(--line); transition:transform .25s ease,border-color .25s ease} .prog:hover{transform:translateY(-5px);border-color:rgba(244,239,230,.30)} .prog .bar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c),transparent 85%)} .prog .when{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);font-weight:700} .prog h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.12;margin:0} .prog .kind{font-size:12.5px;color:var(--muted);margin-top:-5px} .prog p{font-size:14.5px;color:#d8d0e2;line-height:1.5;margin:0} .prog .age{align-self:flex-start;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.05em;color:#0b0910; background:var(--c);border-radius:6px;padding:2px 8px} .navbtns{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(32px,8vw,56px)} .navbtns .btn{flex:1 1 auto} /* =========================================================================== PAGINA "Schedule" — canale SOLO-MUSICA 24/7 (.vx-sched/.band/.tracks) =========================================================================== */ .vx-sched{align-items:start} .band{position:relative;display:flex;flex-direction:column;gap:9px;padding:22px 20px;border-radius:18px;overflow:hidden; background:linear-gradient(180deg,rgba(19,15,31,.90),rgba(11,8,19,.94)); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid var(--line)} .band .bar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c),transparent 85%)} .band-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .band-h .when{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink)} .band-h .hrs{font-size:12px;font-weight:700;letter-spacing:.10em;color:var(--c)} .band .mood{font-size:12.5px;letter-spacing:.03em;color:var(--muted);margin-top:-3px} .band .tracks{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:7px} .band .tracks li{position:relative;padding-left:15px;font-size:14px;line-height:1.32;color:#d4ccdf} .band .tracks li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--c);opacity:.75} .band .tracks b{color:var(--ink);font-weight:600} .band .tracks .g{color:var(--muted);font-size:12.5px} /* ---- NOW ON AIR (widget live, riempito da vxplayer.js dalla cue) ---------- Album in onda + avanzamento % del blocco + prossima INTRO parlata (IT/EN/FR). Card in evidenza e ben leggibile; --c = colore del genere corrente. */ .vx-now-card{position:relative;margin:0 0 clamp(20px,5vw,28px);padding:18px 20px 16px;border-radius:18px;overflow:hidden; background:linear-gradient(180deg,rgba(20,16,32,.93),rgba(11,8,19,.96)); border:1px solid var(--line);box-shadow:0 18px 50px -30px #000} .vx-now-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--c,#28d7f0),transparent 85%)} .vx-now-card__top{display:flex;align-items:center;gap:9px;margin-bottom:8px} .vx-now-card__top .tag{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--c,#28d7f0)} .vx-now-card__top .dot{width:8px;height:8px;border-radius:50%;background:var(--c,#28d7f0); box-shadow:0 0 10px var(--c,#28d7f0);animation:vx-pulse 1.9s ease-in-out infinite} .vx-now-card__gen{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:capitalize} .vx-now-card__album{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,6vw,2rem);line-height:1.05;color:var(--ink)} .vx-now-card__bar{margin-top:12px;height:6px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden} .vx-now-card__bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--c,#28d7f0);transition:width .9s linear} .vx-now-card__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;font-size:13px;color:var(--muted)} .vx-now-card__meta .pct{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .vx-now-card__meta .nxt b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){.vx-now-card__top .dot{animation:none}} /* =========================================================================== PAGINA "Contact" (.links/.lrow/.disc) =========================================================================== */ .links{display:flex;flex-direction:column;gap:13px;max-width:560px} .lrow{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px; text-decoration:none;color:inherit;background:rgba(255,255,255,.02);min-height:62px; transition:border-color .2s ease,transform .2s ease} .lrow:hover{border-color:rgba(244,239,230,.32);transform:translateX(3px)} .lrow .ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center; background:rgba(40,215,240,.10);color:var(--g1);font-weight:700;font-size:16px} .lrow b{display:block;font-size:15px;color:var(--ink);font-weight:600} .lrow span{font-size:13px;color:var(--muted)} .disc{display:flex;align-items:flex-start;gap:10px;margin-top:clamp(36px,9vw,60px);font-size:12.5px;color:var(--muted); line-height:1.55;max-width:72ch} .disc .d{width:8px;height:8px;border-radius:50%;background:var(--g1);box-shadow:0 0 8px var(--g1);flex:none;margin-top:5px} /* =========================================================================== PAGINE INFORMATIVE / LEGALI (Privacy, Cookie, Legal notice, AI, Rights, Terms) Long-form leggibile. Wrapper .vx-legal negli articoli. =========================================================================== */ .vx-legal{max-width:820px} .vx-legal h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,4.5vw,1.7rem);margin:1.7em 0 .5em;color:var(--ink)} .vx-legal h3{font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.02em;margin:1.3em 0 .4em;color:var(--ink)} .vx-legal p{color:#d4ccdf;line-height:1.65;margin:0 0 .9em;font-size:15px} .vx-legal ul{margin:0 0 1em;padding-left:1.2em;color:#d4ccdf;line-height:1.6;font-size:15px} .vx-legal li{margin:.32em 0} .vx-legal b{color:var(--ink)} .vx-legal a{color:var(--g1)} .vx-legal .updated{display:block;color:var(--muted);font-size:12.5px;margin-bottom:1.4em} .vx-legal .todo{color:var(--gold);font-weight:600} .vx-legal .lgl-note{display:flex;gap:10px;margin-top:2.2em;padding-top:1.2em;border-top:1px solid var(--line); font-size:12.5px;color:var(--muted);line-height:1.55} .vx-legal h2[id]{scroll-margin-top:18px} .vx-legal .vx-toc{margin:.4em 0 2em;padding:14px 16px;border:1px solid var(--line);border-radius:12px; background:rgba(255,255,255,.03)} .vx-legal .vx-toc b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:9px} .vx-legal .vx-toc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px} .vx-legal .vx-toc li{margin:0} .vx-legal .protect{margin:.2em 0 1.6em;padding:14px 16px;border:1px solid rgba(224,177,90,.45); border-left:3px solid var(--gold);border-radius:12px;background:rgba(224,177,90,.09); color:var(--ink);font-size:14.5px;line-height:1.55} .vx-legal .protect b{color:var(--gold)} /* =========================================================================== PLAYER ICECAST — barra persistente (modulo Custom HTML, posizione "footer"/"player") Mobile-first: piena larghezza in basso, safe-area iOS. =========================================================================== */ .vx-player{position:fixed;left:0;right:0;bottom:0;z-index:60; display:flex;align-items:center;gap:13px; padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(11,8,18,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); box-shadow:0 -10px 40px -18px #000} @media(min-width:680px){ .vx-player{left:50%;right:auto;bottom:auto;top:18px;transform:translateX(-50%);max-width:640px; border:1px solid var(--line);border-radius:16px;padding:10px 16px 10px 12px; box-shadow:0 10px 40px -18px #000} } .vx-player__btn{width:46px;height:46px;flex:none;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center; background:linear-gradient(95deg,var(--g1),var(--g2));color:#0b0910} .vx-player__btn svg{width:19px;height:19px;fill:currentColor;display:block} .vx-player__np{display:flex;flex-direction:column;min-width:0;flex:1 1 auto} .vx-player__tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .vx-player__title{font-size:14px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vx-player__eq{display:inline-flex;gap:2px;align-items:flex-end;height:15px;margin-left:auto;flex:none} .vx-player__eq i{width:3px;height:7px;background:linear-gradient(var(--g1),var(--g2));border-radius:2px;animation:vx-eq 1s ease-in-out infinite} .vx-player__eq i:nth-child(2){animation-delay:.22s}.vx-player__eq i:nth-child(3){animation-delay:.44s}.vx-player__eq i:nth-child(4){animation-delay:.12s} .vx-player.is-paused .vx-player__eq i{animation-play-state:paused;height:4px} @media (prefers-reduced-motion:reduce){.vx-player__eq i{animation:none}} /* bottone "LIVE" (Watch live YouTube): appare solo quando YT_LIVE e' impostato */ .vx-player__live{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:8px;text-decoration:none; padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:#fff;background:#e0142d;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset} .vx-player__live[hidden]{display:none} .vx-player__live:hover{color:#fff;filter:brightness(1.09)} .vx-player__live-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:vx-pulse 1.6s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.vx-player__live-dot{animation:none}} /* ---- 4 bottoni nav (What's on/Programmes/Podcast/Contact), template, TUTTE le pagine ---- */ .vx-globalfoot{padding:clamp(20px,5vw,32px) clamp(16px,5vw,28px) 6px;display:flex;justify-content:center} .vx-globalfoot .vx-foot{margin-top:0;max-width:900px;width:100%} /* ---- fascia icone social nel footer: SOTTO i bottoni, SOPRA la barra legale. Override piu' specifico dell'inline del modulo 'Canali' (.vx-foot-chan): centra e compatta (era troppo alta). Non serve re-incollare il modulo. --------------- */ .vx-globalfoot-social{display:flex;justify-content:center;padding:2px clamp(16px,5vw,28px) 10px} .vx-globalfoot-social .vx-foot-chan{margin:0 auto;padding:0;gap:12px;justify-content:center} .vx-globalfoot-social .vx-foot-chan a{width:34px;height:34px} .vx-globalfoot-social .vx-foot-chan a svg{width:17px;height:17px} /* ---- barra legale / provenienza nel footer (template, TUTTE le pagine) ----- */ .vx-legalbar{border-top:1px solid var(--line);text-align:center;color:var(--muted); font-size:12.5px;line-height:1.55;background:rgba(6,4,9,.55); padding:16px clamp(16px,5vw,28px) calc(var(--player-h) + env(safe-area-inset-bottom) + 8px)} .vx-legalbar p{margin:0 auto;max-width:900px} .vx-legalbar__meta{margin-top:6px} .vx-legalbar a{color:var(--g1)} /* ---- embed YouTube live responsivo (16:9), opzionale --------------------- */ .vx-youtube{position:relative;width:100%;max-width:1080px;margin:24px auto;aspect-ratio:16/9; border-radius:16px;overflow:hidden;border:1px solid var(--line)} .vx-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* =========================================================================== PAGINA "Podcast" — box con episodio ascoltabile (riusa .grid4/.prog) =========================================================================== */ .prog .eptitle{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:15.5px;line-height:1.25;margin:2px 0 0} .prog .epmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);letter-spacing:.02em} .prog .epmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6} .prog audio{width:100%;margin-top:6px;height:40px;border-radius:10px; background:rgba(11,8,19,.55);border:1px solid var(--line)} .prog audio::-webkit-media-controls-panel{background:rgba(11,8,19,.55)} /* =========================================================================== CATALOGO PODCAST — vetrina / sezione / libro (generato da build_catalog.py) Vetrina e sezione riusano .grid4/.prog. Qui aggiungo: titolo-link + autore nelle schede, breadcrumb, e la PAGINA-LIBRO (materiali
, box palinsesto, bio autore, age-gate Erotica pure-CSS). Mobile-first, solo token del brand. Dial preserve: VARIANCE 5 / MOTION 4 / DENSITY 4. =========================================================================== */ /* --- schede catalogo: titolo cliccabile + riga autore + link "esplora" ------ */ .prog h3 a{color:var(--ink);text-decoration:none} .prog h3 a:hover{color:var(--c)} .prog .by{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:-6px} .prog .more{color:var(--c);font-weight:600;white-space:nowrap} .vx-more{color:var(--muted);font-size:13.5px;margin-top:4px} .vx-h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,5vw,1.7rem); color:var(--ink);margin:clamp(24px,7vw,34px) 0 14px;line-height:1.15} /* --- breadcrumb ------------------------------------------------------------ */ .vx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px; color:var(--muted);margin-bottom:clamp(12px,4vw,18px)} .vx-crumbs a{color:var(--muted)} .vx-crumbs a:hover{color:var(--ink)} .vx-crumbs .sep{opacity:.5} .vx-crumbs [aria-current]{color:var(--ink);font-weight:600} /* --- pagina-libro: intestazione -------------------------------------------- */ .vx-book{max-width:840px} .vx-book .lead{margin-bottom:0} .vx-byline{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,4vw,1.3rem); color:var(--ink);margin-top:4px;line-height:1.2;padding-bottom:2px} .vx-byline b{font-style:normal;font-weight:600} .vx-meta{font-size:12.5px;color:var(--muted);letter-spacing:.02em;margin-top:3px} /* --- materiali digitali (accordion
, un player per volta) ---------- */ .vx-mats{margin-top:clamp(24px,7vw,34px)} .vx-mats__list{display:flex;flex-direction:column;gap:10px} .vx-mat{border:1px solid var(--line);border-left:3px solid var(--c);border-radius:14px; overflow:hidden;background:linear-gradient(180deg,rgba(19,15,31,.42),rgba(11,8,19,.42)); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .vx-mat>summary{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;cursor:pointer; list-style:none;padding:15px 16px;min-height:54px;user-select:none} .vx-mat>summary::-webkit-details-marker{display:none} .vx-mat>summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg);transition:transform .25s ease} .vx-mat[open]>summary::after{transform:rotate(-135deg)} .vx-mat>summary:hover .vx-mat__k{color:var(--c)} .vx-mat__k{font-weight:600;color:var(--ink);font-size:14.5px;letter-spacing:.01em} .vx-mat__m{font-size:12px;color:var(--muted)} .vx-mat__b{padding:2px 16px 16px} .vx-mat__b audio{width:100%;height:42px;border-radius:10px; background:rgba(11,8,19,.55);border:1px solid var(--line)} .vx-mat__b video{width:100%;border-radius:10px;border:1px solid var(--line);background:#05060a;display:block} .vx-mat__b--vert{display:flex;justify-content:center} .vx-vert{max-width:300px;width:100%} .vx-mat__soon{margin:0;padding:14px 16px;font-size:13px;color:var(--muted);line-height:1.5; border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02)} /* --- video YouTube: toggle 16:9/9:16 puro-CSS (pillole, un embed alla volta) - */ .vx-vtabs{position:relative} .vx-vtabs__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .vx-vtabs__nav{display:flex;gap:8px;margin-bottom:14px} .vx-vtabs__tab{cursor:pointer;padding:7px 16px;border-radius:999px;border:1px solid var(--line); font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--muted);user-select:none; transition:color .2s ease,border-color .2s ease,background .2s ease} .vx-vtabs__tab:hover{color:var(--ink);border-color:var(--c)} .vx-vtabs__radio:focus-visible ~ .vx-vtabs__nav label[for$="-h"], .vx-vtabs__radio--h:focus-visible ~ .vx-vtabs__nav .vx-vtabs__tab--h{outline:2px solid var(--c);outline-offset:2px} .vx-vtabs__radio--h:checked ~ .vx-vtabs__nav .vx-vtabs__tab--h, .vx-vtabs__radio--v:checked ~ .vx-vtabs__nav .vx-vtabs__tab--v{background:var(--c);border-color:var(--c);color:#0b0813} .vx-vtabs__panel{display:none} .vx-vtabs__radio--h:checked ~ .vx-vtabs__panel--h{display:block} .vx-vtabs__radio--v:checked ~ .vx-vtabs__panel--v{display:block} .vx-yt{position:relative;width:100%;padding-bottom:56.25%;border-radius:10px;overflow:hidden; border:1px solid var(--line);background:#05060a} .vx-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vx-yt--vert{max-width:300px;margin:0 auto;padding-bottom:0;aspect-ratio:9/16} .vx-mat__langnote{margin:0 0 12px;font-size:12.5px;font-style:italic;color:var(--muted);line-height:1.5} /* --- box palinsesto (colore = mondo; nota di lancio onesta) ----------------- */ .vx-sched{position:relative;margin:clamp(22px,6vw,30px) 0;padding:20px 20px 18px;border-radius:16px; overflow:hidden;border:1px solid var(--line); background:linear-gradient(180deg,rgba(19,15,31,.55),rgba(11,8,19,.62))} .vx-sched::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--c),transparent 85%)} .vx-sched__h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c); font-weight:700;margin-bottom:8px} .vx-sched__when{font-family:var(--serif);font-size:clamp(1.2rem,4.6vw,1.5rem);color:var(--ink);line-height:1.15} .vx-sched__when b{font-weight:600} .vx-sched__dp{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-left:8px} .vx-sched__note{margin:9px 0 0;font-size:13px;color:var(--muted);line-height:1.5;max-width:62ch} /* --- bio autore + nota diritti --------------------------------------------- */ .vx-bio p{color:#d4ccdf;line-height:1.65;font-size:15px;max-width:64ch;margin:0} .vx-rights{margin-top:clamp(26px,7vw,38px);padding-top:16px;border-top:1px solid var(--line); font-size:12px;color:var(--muted);line-height:1.55;max-width:70ch} /* NOTA: le classi .vx-chan* ("Ascolta anche su") NON vivono piu' qui. Il CSS live del sito non e' raggiungibile dal pannello admin Joomla, quindi -- per restare dentro l'architettura gestibile da admin -- il blocco e' un MODULO Custom HTML self-contained (CSS inline + markup), generato da catalog/build_module_ascolta.py. Vedi memoria feedback_joomla_solo_moduli_nativi_2026-07-21. */ /* --- age-gate Erotica (pure-CSS: la conferma 18+ rivela i materiali) -------- */ .vx-agegate__chk{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .vx-agegate__gate{padding:24px 20px;border:1px solid var(--line);border-radius:16px;text-align:center; background:linear-gradient(180deg,rgba(224,87,127,.10),rgba(224,87,127,.04))} .vx-agegate__t{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--ink);margin-bottom:6px} .vx-agegate__gate p{color:var(--muted);font-size:13.5px;line-height:1.55;max-width:46ch;margin:0 auto 16px} .vx-agegate__btn{cursor:pointer} .vx-agegate__content{display:none} .vx-agegate__chk:checked ~ .vx-agegate__gate{display:none} .vx-agegate__chk:checked ~ .vx-agegate__content{display:block}