/* ============================================================ Cultura Digitale — il vestito del sito pubblico (tema «cultura») Figlio di Bento: quello che sta qui vale solo per le pagine della rivista (body.cd > .app). È nato COPIATO dalla bozza approvata (Cultura digitale/bozze/sito.html) con strumenti/costruisci-tema.py; dal 30/9/26 le regole nuove si scrivono QUI, e la bozza è rimasta indietro: lo script non sovrascrive più un foglio più recente (serve --forza). ============================================================ */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/themes/cultura/fonts/Montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/themes/cultura/fonts/Montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Montserrat';font-style:italic;font-weight:400 800;font-display:swap;src:url('/themes/cultura/fonts/Montserrat-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Montserrat';font-style:italic;font-weight:400 800;font-display:swap;src:url('/themes/cultura/fonts/Montserrat-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* le frecce (→ ↗ ← …): il pezzo «latino» di Google non le ha e le disegnava il carattere di sistema (4/10/26). Ritagliate dal Montserrat completo a pesi variabili (google/fonts, ofl/montserrat), 4 KB. */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/themes/cultura/fonts/Montserrat-frecce.woff2') format('woff2');unicode-range:U+2190, U+2192, U+2194-2199} /* Bento alza la base al 112%: la rivista è tarata a 16px. */ html{font-size:100%} /* i token: su :root, così quelli scelti in Pannello → Aspetto vincono */ :root{ --f-tit:'Montserrat',system-ui,-apple-system,sans-serif; --f-ui:'Montserrat',system-ui,-apple-system,sans-serif; --f-serif:'Montserrat',system-ui,sans-serif; --f-dati:'Montserrat',system-ui,sans-serif; --acido:#e9ff4f; --chiave:#dff531; --pun:#365099; --int:#0a6e55; --eve:#b33f16; --lib:#6d33c0; --str:#b0164f; --pun-n:#8ba4ee; --int-n:#3fd6a8; --eve-n:#ff9a6b; --lib-n:#c4a0ff; --str-n:#ff7fae; --new:#0b5f8a; --new-n:#5fc8ff; --sf:#0d1122; --sf-2:#141a2e; --sf-3:#1b2240; --tx:#f1f4ff; --tx-2:#b9c3e4; --ln:#28304d; --ln-f:#3a456e; --blu:#8ba4ee; --errore:#ff8f7a; /* errori dei moduli, «Chiudi l'account», esaurito (prima #ff8f7a e #ff9a8a scritti a mano in sette punti) */ --pnt:#00E5FF; /* i punti dei lettori, CultXP (addon Punti, 10/10/26): il ciano scelto da Marco il 9/10/26 */ --r:0px; /* «tira giù per ricaricare» dentro l'app installata (core: assets/js/webapp-ricarica.js): squadrato, giallo */ --addi-ricarica-fondo:var(--acido); --addi-ricarica-segno:#101733; --addi-ricarica-raggio:0; --r-s:0px; } /* ===================== base ===================== */ .app{ /* le parole chiave nel corpo dell'articolo */ container-type:inline-size; background:var(--sf); color:var(--tx); font-family:var(--f-ui); font-size:16px; line-height:1.55; min-height:100%; } .app,.app *{box-sizing:border-box} body.cd{margin:0; padding:0} body.cd{background:var(--sf)} /* UN CARATTERE SOLO (4/10/26). Marco: «c'è ancora qualche font appartenente alla vecchia piattaforma… verifica bene che il sito abbia solo il font di riferimento». Il tema padre mette il Saira su tutto il body, e il core (base-pubblico.css) dà a --font-display / --font-body-home / --font-mono i caratteri di Bento: quello che sta fuori da .app (il menu laterale del telefono, «Vai al contenuto principale», i pezzi che il core appende al corpo) li ereditava. Si dichiarano qui una volta, su tutta la pagina: un pezzo nuovo li prende da solo. Banco: Cultura digitale/strumenti/prove-caratteri.py (chiede al browser il carattere che disegna davvero). */ body.cd{font-family:var(--f-ui); --font-display:var(--f-tit); --font-body-home:var(--f-ui); --font-mono:var(--f-dati); --bt-font-display:var(--f-tit); --bt-font-body:var(--f-ui)} .app a{color:inherit; text-decoration:none} .app img{display:block; width:100%; height:auto} .app h1,.app h2,.app h3,.app h4,.app h5{font-family:var(--f-tit); margin:0; text-wrap:balance} .app button{font:inherit} .app :focus-visible{outline:3px solid var(--acido); outline-offset:2px} /* ⚠️ IL TITOLO CHE PRENDE IL FUOCO NON SI CONTORNA (28/9/26). Dopo il cambio pagina senza ricaricare il copione mette il fuoco sul titolo nuovo (tabindex=-1), perché chi usa un lettore di schermo sappia che la pagina è cambiata. Safari ogni tanto lo trattava come un fuoco da tastiera e gli disegnava il riquadro giallo — Marco: «ogni tanto si seleziona il riquadro con i bordi». Il fuoco resta, il riquadro no: non è un comando che si preme. */ .app h1[tabindex="-1"]:focus,.app h2[tabindex="-1"]:focus{outline:none} /* ⚠️ IL MARGINE È MARGINE, NON IMBOTTITURA. Il contenitore teneva i 28px di lato come `padding`: il contenuto stava in riga, ma il SUO RIQUADRO arrivava 28px più in là da tutte e due le parti — e chi ci disegna sopra un fondo o un filetto (la fascia dei filtri, il filetto sotto il titolo della sezione, quello in fondo alla voce in evidenza) lo vedeva sporgere rispetto al titolo e alla foto. «Non è allineata al titolo e all'immagine» (Marco, 22/9/26). Con `width` e il margine automatico il riquadro finisce dove finisce la colonna, e si allineano tutti da soli. Il margine si toglie con `width` e non con un `max-width` fisso perché quando la finestra è più stretta di 1220 la colonna non è 1164: è quel che resta, meno i margini. */ .riga-w{width:calc(100% - 56px); max-width:1164px; margin-inline:auto} @media (max-width:700px){ .riga-w{width:calc(100% - 32px); max-width:1188px} } .pagina[hidden]{display:none} /* avanzamento lettura */ .avanz{position:fixed; left:0; right:0; top:env(safe-area-inset-top,0px); height:3px; z-index:60; pointer-events:none} .avanz i{display:block; height:100%; width:0; background:var(--acido); transition:width .08s linear} .app:not([data-pagina="art"]) .avanz{display:none} /* ===================== filo in cima ===================== */ .alta{background:#070a16; color:#fff; font-family:var(--f-dati); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase} .alta-in{display:flex; align-items:center; gap:16px; padding-block:9px} .tick{flex:1; display:flex; align-items:center; gap:11px; min-width:0} .tick .tick-et{display:inline-block; background:var(--acido); color:#101733; padding:3px 9px; white-space:nowrap; font-weight:600; flex:0 0 auto; width:auto} .tick .pista{overflow:hidden; flex:1; min-width:0; mask-image:linear-gradient(90deg,transparent,#000 20px,#000 88%,transparent)} .tick .fila{display:inline-flex; gap:36px; white-space:nowrap; animation:scorri 30s linear infinite} .tick .fila a::before{content:'▸'; color:var(--acido); margin-right:8px} @keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}} .alta .data{color:#c3cbe6; white-space:nowrap} @media (max-width:820px){ .alta .data{display:none} } @media (max-width:620px){ .tick{display:none} .alta-in{justify-content:space-between} .alta .data{display:inline} } /* ===================== testata ===================== */ /* ============================================================ LA PROSSIMA PUNTATA — il tabellone sotto la striscia ============================================================ Scelto da Marco fra quattro bozze il 30/9/26 (la D, «Traccia audio»; prima c'era quello del 22/9). Titolo, orari, dove si guarda la diretta e il numero della puntata vengono dal calendario e dal pannello; qui c'è solo come si vede. Due stati, e li decide l'ora (il copione è prossima.js): prima l'ospite, «Stagione 8 · N1», il conto alla rovescia, «Mettilo in agenda», e sotto l'ora della puntata disegnata come una traccia audio live ON AIR in verde, i minuti che mancano alla fine, la traccia accesa fino alla testina «adesso», «Guarda live» Quello che si vede solo prima porta data-pr-conto, quello solo in onda data-pr-resta. ⚠️ LA TRACCIA È UNA MASCHERA (img/traccia.svg, al telefono traccia-corta.svg): 96 barre scritte nella pagina sarebbero 96 style="…" nel sorgente di ogni visita (Marco, 23/9/26: «voglio totale pulizia»). Il colore lo dà il fondo del pezzo, la parte accesa è lo stesso disegno in verde tagliato a --fatto. ⚠️ LE COSE CHE SI MUOVONO, E NESSUNA PER FARSI NOTARE: il pallino che pulsa come una spia (rosso prima, VERDE in onda), l'equalizzatore accanto a ON AIR, il titolo che entra da sotto con la sua riga che si allunga, la cifra che scatta solo quando cambia. Chi ha chiesto meno animazioni non ne vede nessuna (in fondo). */ @keyframes pr-pulsa{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 9px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}} @keyframes pr-pulsa-live{0%{box-shadow:0 0 0 0 rgba(46,204,113,.6)}70%{box-shadow:0 0 0 10px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}} @keyframes pr-scatta{0%{transform:translateY(-70%);opacity:0}60%{transform:translateY(6%);opacity:1}100%{transform:translateY(0)}} @keyframes pr-sale{from{transform:translateY(105%)}to{transform:translateY(0)}} @keyframes pr-riga{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes pr-barre{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}} @keyframes pr-entra{from{opacity:0; transform:translateY(10px)}} .pr{--pr-verde:#2ecc71; position:relative; overflow:hidden} .pr-traccia{border-block:1px solid var(--ln); background:var(--sf); transition:border-color .4s} .pr[data-stato="live"]{border-top-color:var(--pr-verde)} .pr:not([data-stato="live"]) [data-pr-resta]{display:none !important} .pr[data-stato="live"] [data-pr-conto]{display:none !important} .pr-sfondo{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; filter:blur(22px) saturate(1.3); transform:scale(1.15)} /* ⚠️ NIENTE IMBOTTITURA DI LATO: questa riga È il contenitore di pagina, e i margini glieli dà lui (Marco, 22/9/26: «gli stessi e identici spazi in tutta l'impostazione del sito»). Sopra e sotto sì: fanno respirare la fascia. */ .pr-traccia .pr-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"testo lato" "onda onda"; gap:24px 40px; padding:32px 0 24px; align-items:end} .pr-testo{grid-area:testo; min-width:0} .pr-eti{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0} .pr-stato{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-dati); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--acido); transition:color .4s} .pr-pallino{width:8px; height:8px; border-radius:50%; background:#ff3b30; flex:none; animation:pr-pulsa 2s infinite} .pr-onda{display:none; align-items:flex-end; gap:3px; height:14px} .pr-onda i{display:block; width:3px; height:100%; background:var(--pr-verde); transform-origin:bottom; animation:pr-barre 1.1s ease-in-out infinite} .pr-onda i:nth-child(2){animation-delay:.18s} .pr-onda i:nth-child(3){animation-delay:.36s} .pr-onda i:nth-child(4){animation-delay:.1s} .pr-onda i:nth-child(5){animation-delay:.28s} .pr-ep{display:inline-flex; align-items:center; padding:5px 9px; border:1px solid var(--ln-f); font-family:var(--f-dati); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tx); line-height:1} .pr-ep:empty{display:none} /* ⚠️ «.pr .pr-tit», DUE CLASSI: il tema azzera i margini di tutti i titoli con «.app h2», che pesa più di una classe sola (i 12px del tabellone di prima non si sono mai visti). Il titolo entra da sotto, e per farlo gli serve una finestra: senza overflow:hidden si vedrebbe passare sopra l'etichetta. */ .pr .pr-tit{font-size:clamp(1.55rem,3.1vw,2.6rem); line-height:1.08; margin:16px 0 0; overflow:hidden; position:relative; padding-bottom:14px; text-wrap:balance} .pr-tit span{display:block; animation:pr-sale .6s cubic-bezier(.2,.8,.2,1) both} .pr-tit::after{content:''; position:absolute; left:0; bottom:0; width:58px; height:3px; background:var(--acido); transform-origin:left; animation:pr-riga .5s .45s cubic-bezier(.2,.8,.2,1) both; transition:background .4s} .pr-quando{display:flex; align-items:center; gap:9px; margin:12px 0 0; color:var(--tx); font-size:.95rem} .pr-quando .ico{width:17px; height:17px; color:var(--acido)} .pr-lato{grid-area:lato; display:flex; flex-direction:column; align-items:flex-end; gap:16px} .pr-riga-conto, .pr-riga-resta{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:4px 14px; margin:0} .pr-mancano{font-family:var(--f-dati); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tx); margin-right:2px} .pr-cc{display:inline-flex; align-items:baseline; gap:3px} .pr-cc b{font-family:var(--f-tit); font-size:2.1rem; font-weight:800; line-height:1; color:var(--acido); font-variant-numeric:tabular-nums; display:inline-block} .pr-cc i{font-style:normal; font-size:1rem; font-weight:700; color:var(--tx)} .pr-cc em{font-style:normal; font-family:var(--f-tit); font-size:2.1rem; font-weight:800; line-height:1; color:var(--pr-verde); margin:0 2px} .pr-riga-resta .pr-cc b{color:#fff} .pr-cc b.scatta{animation:pr-scatta .34s cubic-bezier(.2,.9,.3,1.3)} .pr-bt{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; background:var(--acido); font-weight:700; text-decoration:none; font-size:.95rem; white-space:nowrap; transition:background .15s, color .15s} .app .pr-bt{color:#101733} .pr-bt .ico{width:18px; height:18px} .pr-bt[hidden]{display:none} /* la traccia: l'ora della puntata, dall'inizio alla fine */ .pr-ondona{grid-area:onda; position:relative; height:78px} .pr-ondona-barre{position:absolute; left:0; right:0; top:18px; bottom:22px; background:var(--ln-f); -webkit-mask:url('/themes/cultura/img/traccia.svg') center / 100% 100% no-repeat; mask:url('/themes/cultura/img/traccia.svg') center / 100% 100% no-repeat} .pr-ondona-accese{display:none; background:var(--pr-verde); clip-path:inset(0 calc(100% - var(--fatto, 0%)) 0 0)} .pr-testina{position:absolute; top:0; bottom:22px; left:var(--fatto, 0%); width:2px; margin-left:-1px; background:#fff; display:none} .pr-testina b{position:absolute; top:-2px; left:50%; transform:translateX(-50%); padding:2px 6px; background:var(--pr-verde); color:#06210f; font-family:var(--f-dati); font-size:.56rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap} .pr-ondona-ore{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; font-size:.76rem; color:var(--tx); font-variant-numeric:tabular-nums} /* IN ONDA: verde, l'equalizzatore accanto a ON AIR, la traccia accesa fino alla testina */ .pr[data-stato="live"] .pr-stato{color:var(--pr-verde)} .pr[data-stato="live"] .pr-pallino{background:var(--pr-verde); animation:pr-pulsa-live 1.6s infinite} .pr[data-stato="live"] .pr-onda{display:inline-flex} .pr[data-stato="live"] .pr-tit::after{background:var(--pr-verde)} .pr[data-stato="live"] .pr-ondona-accese, .pr[data-stato="live"] .pr-testina{display:block} /* quando cambia (alle 15, alle 16): entra da capo quello che è cambiato */ .pr-cambia .pr-lato, .pr-cambia .pr-quando, .pr-cambia .pr-ep{animation:pr-entra .45s cubic-bezier(.2,.8,.2,1) both} .pr-cambia .pr-tit span{animation:pr-sale .6s cubic-bezier(.2,.8,.2,1) both} @media (max-width:820px){ .pr-traccia .pr-in{grid-template-columns:minmax(0,1fr); grid-template-areas:"testo" "onda" "lato"; gap:20px; padding:26px 0} .pr-lato{align-items:stretch} .pr-riga-conto, .pr-riga-resta{justify-content:flex-start} .pr-mancano{flex-basis:100%} .pr-cc b, .pr-cc em{font-size:1.75rem} .pr-bt{padding:0; min-height:52px} .pr-ondona{height:70px} .pr-ondona-barre{-webkit-mask-image:url('/themes/cultura/img/traccia-corta.svg'); mask-image:url('/themes/cultura/img/traccia-corta.svg')} } @media (prefers-reduced-motion:reduce){ .pr-pallino,.pr-onda i{animation:none} .pr-tit span,.pr-tit::after,.pr-cambia .pr-lato,.pr-cambia .pr-quando,.pr-cambia .pr-ep,.pr-cambia .pr-tit span{animation:none; transform:none} } /* ============================================================ «TE LA SEI PERSA?» — il tabellone dopo la diretta (3/10/26) Marco: «quando finisce la puntata il counter in home dice la prossima… se invece uscisse un messaggio: Te la sei persa? a breve potrai rivederla. Iscriviti e ti arriverà la mail con l'ultima puntata». Movimento scelto: B, «Segnale perso» (bozza: Cultura digitale/bozze/bozza-persa). Due stati accanto a «prima» e «live»: persa dalla fine della diretta finché non esce la registrazione (al massimo 10 giorni); online per 48 ore da quando la registrazione è pubblicata (Marco: «le 48 ore devono partire dopo che è stata caricata la puntata»). Lo stato lo decide prossima.js; il movimento parte con la classe pr-ps-via (entrata) e pr-ps-ripeti (ogni 7 s). ============================================================ */ .pr-ps, .pr-on{display:none} .pr[data-stato="persa"] .pr-testo, .pr[data-stato="persa"] .pr-lato, .pr[data-stato="online"] .pr-testo, .pr[data-stato="online"] .pr-lato{display:none} .pr[data-stato="persa"] .pr-ps{display:block} .pr[data-stato="online"] .pr-on{display:block} /* ⚠️ IN ALTO, NON IN FONDO: il campo dell'iscrizione alla stessa altezza di «LA DIRETTA È FINITA» (Marco, 3/10/26). Il riquadro di prima allinea in fondo (align-items:end). */ .pr-ps.pr-lt, .pr-on.pr-lt{grid-area:lato; align-self:start; min-width:0} .pr-ps.pr-tx, .pr-on.pr-tx{grid-area:testo; min-width:0} .pr[data-stato="persa"] .pr-in, .pr[data-stato="online"] .pr-in{grid-template-columns:minmax(0,1fr) minmax(0,440px); align-items:start} /* l'etichetta: il pallino spento (la diretta è finita); «È già online» lo riaccende di giallo */ .pr-ps .pr-stato{color:var(--tx)} .pr-ps .pr-pallino{background:#5b6587; animation:none; box-shadow:none} .pr-on .pr-pallino{background:var(--acido); animation:pr-ps-pallino 2s infinite} @keyframes pr-ps-pallino{0%{box-shadow:0 0 0 0 rgba(233,255,79,.55)} 70%{box-shadow:0 0 0 9px rgba(233,255,79,0)} 100%{box-shadow:0 0 0 0 rgba(233,255,79,0)}} /* il titolo: «persa?» in giallo */ .pr .pr-ps-tit, .pr .pr-on-tit{font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.02; letter-spacing:-.025em} .pr-ps-tit span, .pr-on-tit span{display:inline-block; animation:none} .pr-ps-tit em, .pr-on-tit em{font-style:normal; color:var(--acido)} .pr-ps-sotto, .pr-on-sotto{margin:14px 0 0; font-size:1rem; line-height:1.55; color:var(--tx)} .pr-ps-sotto b, .pr-on-sotto b{font-weight:700} .pr-ps-sotto [hidden], .pr-on-sotto [hidden]{display:none} /* il lato: il modulo d'iscrizione (quello di Pannello → Moduli contatto, con le sue spunte) */ .pr-ps-fila{display:flex; align-items:stretch; border:1px solid var(--ln-f); background:var(--sf-2)} .pr-ps-fila input{flex:1; min-width:0; height:54px; padding:0 16px; border:0; background:transparent; color:var(--tx); font:inherit; font-size:16px} .pr-ps-fila input::placeholder{color:var(--tx-2)} .pr-ps-fila input:focus{outline:none} .pr-ps-fila:focus-within{border-color:var(--acido)} .pr-ps-fila button{padding:0 22px; border:0; background:var(--acido); color:#101733; font-weight:700; white-space:nowrap; cursor:pointer} .pr-ps .iscr-spunta{font-size:.78rem; line-height:1.45; color:var(--tx)} .pr-ps .iscr-spunta a{color:var(--chiave); font-weight:700} .pr-ps-nota{margin:12px 0 0; font-size:.8rem; color:var(--tx)} /* «È già online»: copertina piccola, il titolo della puntata, il pulsante */ .pr-on-scheda{display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; text-decoration:none} .pr-on-scheda img{width:96px; height:96px; object-fit:cover; display:block; background:var(--sf-3)} .pr-on-scheda b{display:block; font-size:.95rem; line-height:1.35; font-weight:700; color:var(--tx)} .pr-on-scheda span{display:block; margin-top:6px; font-size:.78rem; color:var(--tx)} .pr-on .pr-bt{margin-top:16px; width:100%} .pr-on-poi{display:block; margin-top:12px; font-size:.85rem; color:var(--tx); text-align:center} .pr-on-poi a{color:var(--chiave); font-weight:700} /* la traccia: dopo la diretta è tutta grigia (la puntata c'è stata) e la scritta dice cosa aspettare */ .pr-ps-onda{display:none; position:absolute; inset:0; pointer-events:none} .pr[data-stato="persa"] .pr-ps-onda, .pr[data-stato="online"] .pr-ps-onda{display:block} .pr-ps-luce, .pr-ps-rgb{position:absolute; left:0; right:0; top:18px; bottom:22px; opacity:0; -webkit-mask:url('/themes/cultura/img/traccia.svg') center / 100% 100% no-repeat; mask:url('/themes/cultura/img/traccia.svg') center / 100% 100% no-repeat} .pr-ps-luce{background:var(--acido)} .pr-ps-rgb{mix-blend-mode:screen} .pr-ps-rgb.r{background:#ff3b30} .pr-ps-rgb.c{background:#5fc8ff} .pr-ps-scritta{position:absolute; left:50%; bottom:0; transform:translateX(-50%); font-family:var(--f-dati); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--acido); white-space:nowrap} .pr[data-stato="online"] .pr-ps-luce{opacity:.85} /* ---------- B · SEGNALE PERSO ---------- Entrando: il titolo sale; il pallino lampeggia rosso e si spegne; titolo e traccia si disturbano come una radio fuori frequenza (strisce che scattano, due copie rossa e azzurra sfasate) e intanto il giallo passa sulla traccia (Marco: «sarebbe bello vedere comunque il passaggio del giallo mentre c'è la perdita del segnale»). Ogni 7 s il disturbo torna. */ .pr-ps-via .pr-ps-tit span, .pr-ps-via .pr-on-tit span{animation:pr-sale .7s cubic-bezier(.16,1,.3,1) both} .pr-ps-via .pr-ps-tit span:nth-child(2), .pr-ps-via .pr-on-tit span:nth-child(2){animation-delay:.12s} .pr-ps-via .pr-ps-sotto, .pr-ps-via .pr-on-sotto, .pr-ps-via .pr-ps.pr-lt, .pr-ps-via .pr-on.pr-lt{animation:pr-entra .6s .35s cubic-bezier(.16,1,.3,1) both} .pr-ps-via .pr-ps .pr-pallino{animation:pr-ps-spegne 1.4s steps(1) both} @keyframes pr-ps-spegne{0%{background:#ff3b30} 15%{background:transparent} 30%{background:#ff3b30} 45%{background:transparent} 60%{background:#ff3b30} 75%,100%{background:#5b6587}} .pr-ps-via .pr-ps-tit, .pr-ps-ripeti .pr-ps-tit{animation:pr-ps-disturbo .9s .2s steps(2) both} @keyframes pr-ps-disturbo{ 0%{text-shadow:3px 0 rgba(255,59,48,.85), -3px 0 rgba(95,200,255,.85); clip-path:inset(10% 0 55% 0); transform:translateX(-4px)} 20%{text-shadow:-4px 0 rgba(255,59,48,.85), 4px 0 rgba(95,200,255,.85); clip-path:inset(50% 0 8% 0); transform:translateX(5px)} 40%{text-shadow:2px 0 rgba(255,59,48,.7), -2px 0 rgba(95,200,255,.7); clip-path:inset(0 0 70% 0); transform:translateX(-2px)} 60%{text-shadow:none; clip-path:inset(0 0 0 0); transform:none} 70%{text-shadow:2px 0 rgba(233,255,79,.6), -2px 0 rgba(95,200,255,.6); transform:translateX(2px)} 100%{text-shadow:none; clip-path:inset(0 0 0 0); transform:none}} .pr-ps-via .pr-ondona-barre, .pr-ps-ripeti .pr-ondona-barre{animation:pr-ps-traccia-disturbo .9s .2s steps(2) both} .pr-ps-via .pr-ps-rgb.r, .pr-ps-ripeti .pr-ps-rgb.r{animation:pr-ps-rgb-r .9s .2s steps(2) both} .pr-ps-via .pr-ps-rgb.c, .pr-ps-ripeti .pr-ps-rgb.c{animation:pr-ps-rgb-c .9s .2s steps(2) both} @keyframes pr-ps-traccia-disturbo{ 0%{clip-path:inset(0 0 58% 0); transform:translateX(-7px)} 20%{clip-path:inset(42% 0 0 0); transform:translateX(9px)} 40%{clip-path:inset(20% 0 30% 0); transform:translateX(-3px) scaleY(.55)} 60%{clip-path:inset(0 0 0 0); transform:none} 70%{clip-path:inset(0 0 0 0); transform:translateX(4px)} 100%{clip-path:inset(0 0 0 0); transform:none}} @keyframes pr-ps-rgb-r{ 0%{opacity:.95; transform:translateX(6px); clip-path:inset(0 0 58% 0)} 20%{opacity:.95; transform:translateX(-8px); clip-path:inset(42% 0 0 0)} 40%{opacity:.7; transform:translateX(4px); clip-path:inset(20% 0 30% 0)} 60%{opacity:0} 70%{opacity:.6; transform:translateX(-3px); clip-path:inset(0 0 0 0)} 100%{opacity:0; transform:none}} @keyframes pr-ps-rgb-c{ 0%{opacity:.95; transform:translateX(-6px); clip-path:inset(0 0 58% 0)} 20%{opacity:.95; transform:translateX(8px); clip-path:inset(42% 0 0 0)} 40%{opacity:.7; transform:translateX(-4px); clip-path:inset(20% 0 30% 0)} 60%{opacity:0} 70%{opacity:.6; transform:translateX(3px); clip-path:inset(0 0 0 0)} 100%{opacity:0; transform:none}} .pr-ps-via .pr-ps-luce, .pr-ps-ripeti .pr-ps-luce{animation:pr-ps-passa 1.7s .15s cubic-bezier(.45,0,.25,1) both} @keyframes pr-ps-passa{ 0%{opacity:.95; clip-path:inset(0 100% 0 0)} 30%{opacity:.95; clip-path:inset(0 58% 0 0)} 70%{opacity:.95; clip-path:inset(0 0 0 42%)} 100%{opacity:0; clip-path:inset(0 0 0 100%)}} /* «È già online»: il segnale è tornato. La traccia si riempie di giallo da sinistra e resta accesa */ .pr[data-stato="online"].pr-ps-via .pr-ps-luce{animation:pr-ps-riempie 1.6s .3s cubic-bezier(.65,0,.35,1) both} .pr[data-stato="online"].pr-ps-ripeti .pr-ps-luce, .pr[data-stato="online"].pr-ps-via .pr-ondona-barre, .pr[data-stato="online"].pr-ps-ripeti .pr-ondona-barre{animation:none} @keyframes pr-ps-riempie{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}} @media (max-width:820px){ .pr[data-stato="persa"] .pr-in, .pr[data-stato="online"] .pr-in{grid-template-columns:minmax(0,1fr)} .pr-ps-fila button{padding:0 16px} .pr-ps-luce, .pr-ps-rgb{-webkit-mask-image:url('/themes/cultura/img/traccia-corta.svg'); mask-image:url('/themes/cultura/img/traccia-corta.svg')} } /* riduci animazioni: tutto fermo, tutto visibile */ @media (prefers-reduced-motion:reduce){ .pr-ps *, .pr-on *, .pr-ps-onda *, .pr-ps-via .pr-ondona-barre, .pr-ps-ripeti .pr-ondona-barre{animation:none !important} .pr-ps-luce{opacity:.18 !important; clip-path:none !important} .pr[data-stato="online"] .pr-ps-luce{opacity:.85 !important} .pr-ps-rgb{display:none !important} } html.tc-a11y-reduce-motion .pr-ps *, html.tc-a11y-reduce-motion .pr-on *, html.tc-a11y-reduce-motion .pr-ps-onda *, html.tc-a11y-reduce-motion .pr-ps-via .pr-ondona-barre, html.tc-a11y-reduce-motion .pr-ps-ripeti .pr-ondona-barre{animation:none !important} html.tc-a11y-reduce-motion .pr-ps-rgb{display:none} /* ============================================================ BOZZA — LA BARRA IN CIMA (si apre con ?topbar=1..4) ============================================================ Le icone social sono GIALLE e diventano bianche col mouse sopra: sono riconoscibili dalla forma, il colore serve solo a dire «qui si clicca». ⚠️ La barra sta SOPRA la testata appiccicata, quindi la testata deve scendere di quanto è alta lei — sennò se la mangia scorrendo. */ .tb{background:var(--bg-2,#0a0e1e); border-bottom:1px solid var(--ln); position:relative; z-index:51} .tb-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 0; min-height:38px} .tb-social{display:flex; align-items:center; gap:14px} .tb-social a{display:inline-flex; color:var(--acido); transition:color .15s} .tb-social a:hover{color:#fff} .tb-social .ico{width:17px; height:17px} .tb-quando{display:inline-flex; align-items:center; gap:9px; color:var(--tx-2); font-family:var(--f-dati); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:color .15s} .tb-quando .ico{width:15px; height:15px; color:var(--acido); flex-shrink:0} .tb-quando b{color:var(--tx); font-weight:700} a.tb-quando:hover{color:var(--acido)} a.tb-quando:hover b{color:var(--acido)} .tb-bt{margin-left:4px; padding:5px 11px; border:1px solid var(--acido); color:var(--acido); text-decoration:none; font-size:.7rem; letter-spacing:.06em; transition:all .15s} .tb-bt:hover{background:var(--acido); color:#101733} /* 4 — si ritira scorrendo: in cima c'è, appena si scende sparisce e resta la sola testata. Si guadagnano 38px su tutte le pagine lunghe. */ .tb-ritira{position:sticky; top:calc(env(safe-area-inset-top,0px) - 40px); transition:top .2s ease} /* 2 — dentro la testata: niente barra in più, zero altezza in più. */ .tb-dentro{display:flex; align-items:center; gap:18px; margin-left:auto} .tb-dentro .tb-quando{font-size:.68rem} @media (max-width:820px){ .tb-in{padding:8px 0; gap:10px} .tb-quando{font-size:.62rem; letter-spacing:.04em} .tb-quando .ico{width:13px; height:13px} .tb-bt{padding:4px 8px; font-size:.62rem} .tb-dentro{display:none} } @media (max-width:560px){ /* ⚠️ Sul telefono resta la DATA e basta: «Prossima puntata gio 24 set · 18:00» non ci sta e si tagliava a metà dell'orario, che è il modo peggiore di finire. Le icone restano tutte: sono quelle che si toccano davvero, e una barra che va a capo su due righe mangia mezzo schermo. */ .tb-eti{display:none} .tb-quando span{white-space:nowrap} } .testa{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--sf); border-bottom:1px solid var(--ln)} .testa-in{display:flex; align-items:center; gap:24px; padding-block:18px; transition:padding .2s ease} .testa.ridotta .testa-in{padding-block:10px} /* ⚠️ ABBASSANDOSI NON SPOSTA LA PAGINA (5/10/26, Marco: «fa uno scatto e poi scrolla di botto alla sezione PROSSIMA PUNTATA»). Le due altezze le misura rivista.js (misuraTesta); scorrendo la testata perde l'altezza e prende lo stesso margine sotto, con lo stesso movimento: lo spazio nella pagina resta quello. Senza le misure (prima del copione) è com'era. «misura» e «ferma» le usa solo il copione mentre misura. */ .testa{box-sizing:border-box; height:var(--testa-piena,auto); transition:height .2s ease, margin-bottom .2s ease} .testa.ridotta{height:var(--testa-bassa,auto); margin-bottom:calc(var(--testa-piena,0px) - var(--testa-bassa,0px))} .testa.misura{height:auto !important; margin-bottom:0 !important} .testa.ferma,.testa.ferma *{transition:none !important} /* ⚠️ ANCHE «.app .logo» (28/9/26): il logo caricato dal pannello è un , e «.app img{width:100%}» vale più di «.logo» — il logo usciva largo 300px e alto 90, la testata da 72 a 127px. */ .logo,.app .logo{height:32px; width:auto; color:var(--tx); flex-shrink:0; transition:height .2s ease} .testa.ridotta .logo{height:25px} .menu{display:flex; gap:26px; margin-left:auto; font-family:var(--f-tit); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase} .menu a{padding:5px 0; border-bottom:2px solid transparent; transition:color .15s,border-color .15s} .menu a:hover{color:var(--acido)} .menu a.on{border-bottom-color:var(--acido)} @media (max-width:980px){ .menu{display:none} } .strum{display:flex; align-items:center; gap:14px; margin-left:auto} @media (min-width:981px){ .strum{margin-left:0} } .ico{width:20px; height:20px; flex-shrink:0} .bt-ico{appearance:none; border:0; background:transparent; color:inherit; padding:8px; margin:-8px; cursor:pointer; line-height:0} /* La porta dell'area riservata. Da spenta è un'icona come la lente; da accesa si porta accanto il nome di chi è entrato — così si vede a colpo d'occhio che il sito ti ha riconosciuto, senza un secondo pulsante. */ .bt-chi{display:inline-flex; align-items:center; gap:8px; line-height:1} .bt-chi b{ font-family:var(--f-dati); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; /* Entrando e uscendo la parola cambia: si sfila e rientra invece di scattare. Il copione del core mette .chi-va-via per il tempo del cambio. */ transition:opacity .18s ease, transform .18s ease; } .bt-chi b.chi-va-via{opacity:0; transform:translateX(-5px)} @media (prefers-reduced-motion:reduce){ .bt-chi b{transition:none} } /* ⚠️ DA FUORI È UN PULSANTE, NON UN LINK. «Accedi» era una scritta come le altre e al passaggio del mouse diventava gialla come i titoli: un colore che lì non vuol dire niente (Marco, 21/9/26: «l'hover su accedi non ha senso, un colore che non c'entra nulla; devi fare il pulsante bianco e la scritta blu»). Adesso si vede che si preme. ⚠️ E IL BLU NON È --blu. Quello (#8ba4ee) è pensato per stare SU FONDO SCURO: su bianco fa 2,4:1, cioè non si legge. Questo è lo stesso blu portato al buio — 10,7:1 sul bianco, 13:1 nello stato premuto. */ :root{ --blu-fondo:#22348f; --blu-fondo-scuro:#16225f } /* Marco, 23/9/26: «lo voglio con fondo giallo cultura, e all'hover come tutti gli altri pulsanti (bianco con scritta blu)». */ .bt-chi:not(.chi-dentro){ background:var(--acido); color:var(--blu-fondo); border-radius:999px; padding:7px 16px 7px 12px; margin:0; } .bt-chi:not(.chi-dentro):hover{ background:#fff; color:var(--blu-fondo) } .bt-chi .ico{ color:inherit } /* ⚠️ ENTRATI, IL PULSANTE È VERDE E BATTE (8/10/26, bozza approvata: Cultura digitale/bozze/bozza-online, battito A). Marco: «Il pulsante Accedi in alto vorrei che quando si è online diventasse Verde #00E676 con un aura intorno che fa effetto battito.. per far capire che si è online». Prima era giallo come da fuori. La scritta è blu notte: sul verde il bianco non si legge; misurato 8,8:1. Dentro c'è solo il nome (la riga «o registrati» la nasconde il core). Il battito: due colpi vicini e una pausa, come un cuore, ogni 2,4 secondi; con «riduci animazioni» un anello fermo. */ :root{ --verde-online:#76FF03; --verde-online-aura:118,255,3 } .bt-chi.chi-dentro{ position:relative; isolation:isolate; background:var(--verde-online); color:var(--blu-fondo-scuro); border-radius:999px; padding:7px 16px 7px 12px; margin:0; } /* (11/10/26, Marco) #76FF03 è il colore del pulsante ACCESO, non dell'hover; passandoci sopra è quello standard di tutti i pulsanti (bianco, scritta blu) */ .bt-chi.chi-dentro:hover{ background:#fff; color:var(--blu-fondo) } .bt-chi.chi-dentro::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; animation:chi-battito 2.4s cubic-bezier(.2,.6,.3,1) infinite } @keyframes chi-battito{ 0% { box-shadow:0 0 0 0 rgba(var(--verde-online-aura),.65) } 12% { box-shadow:0 0 0 7px rgba(var(--verde-online-aura),0) } 13% { box-shadow:0 0 0 0 rgba(var(--verde-online-aura),.55) } 30% { box-shadow:0 0 0 11px rgba(var(--verde-online-aura),0) } 100%{ box-shadow:0 0 0 11px rgba(var(--verde-online-aura),0) } } /* Da fuori «ACCEDI» e sotto, piccolo, «o registrati» (Marco, 8/10/26: «quando non sei loggato mettiamo ACCEDI O REGISTRATI»): due righe nella stessa altezza di prima (35 px), la testata non si muove. */ .bt-chi .chi-testi{ display:grid; gap:2px; text-align:left } .bt-chi .chi-sotto{ font-family:var(--f-ui); font-size:.64rem; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.1; opacity:.88 } .bt-chi .chi-sotto[hidden]{ display:none } .bt-chi:not(.chi-dentro){ padding-top:5px; padding-bottom:5px } .mn-chi .chi-testi{ text-align:center } @media (prefers-reduced-motion:reduce){ .bt-chi.chi-dentro::before{ animation:none; box-shadow:0 0 0 3px rgba(var(--verde-online-aura),.35) } } .menu-tel a[data-chi] b{color:var(--acido); margin-left:8px} .burger-bt{display:none} @media (max-width:980px){ .burger-bt{display:block} } .menu-tel{display:none; border-top:1px solid var(--ln); background:var(--sf)} @media (max-width:980px){ .menu-tel{display:block} .menu-tel[hidden]{display:none} .menu-tel a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; min-height:54px; border-bottom:1px solid var(--ln); font-family:var(--f-tit); font-size:1rem; font-weight:700} .menu-tel a b{font-family:var(--f-dati); font-size:.74rem; font-weight:400; color:var(--tx-2)} /* ⚠️ GIALLO COME LA SCHEDA IN BASSO. Col menu aperto si vedono tutti e due insieme: «Puntate» era acceso in giallo nella scheda e in blu nell'elenco, due modi di dire «sei qui» nello stesso schermo. È anche il colore che il menu grande usa per la sezione aperta. */ .menu-tel a.on{color:var(--acido)} } /* ===================== etichette ===================== */ .eti{display:inline-block; font-family:var(--f-dati); font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; padding:4px 9px; color:#fff; background:var(--pun)} .eti.int{background:var(--int)} .eti.eve{background:var(--eve)} .eti.lib{background:var(--lib)} .eti.str{background:var(--str)} .eti.new{background:var(--new)} .eti.acc{background:var(--acido); color:#101733} .eti.nuda{background:transparent; color:var(--pun-n); padding:0; font-weight:600} .eti.nuda.int{color:var(--int-n)} .eti.nuda.eve{color:var(--eve-n)} .eti.nuda.lib{color:var(--lib-n)} .eti.nuda.str{color:var(--str-n)} .eti.nuda.new{color:var(--new-n)} /* ===================== teste di fascia ===================== */ .tf{display:flex; align-items:center; gap:14px; margin-bottom:22px} .tf h2,.tf h3{font-size:clamp(1.15rem,2vw,1.4rem); font-weight:800; letter-spacing:-.022em; white-space:nowrap} .tf .pall{width:9px; height:9px; border-radius:50%; background:var(--acido); flex-shrink:0} .tf .riga{flex:1; height:1px; background:var(--ln)} .tf .tutti{font-family:var(--f-dati); font-size:.7rem; letter-spacing:.08em; color:var(--tx-2); white-space:nowrap} /* ===================== striscia tonde ===================== */ .striscia{background:var(--sf-2); border-bottom:1px solid var(--ln)} .striscia-in{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding-block:18px} .tonda-voce{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; min-width:0} .tonda{position:relative; width:64px; height:64px; flex-shrink:0} .tonda img{width:100%; height:100%; object-fit:cover; border-radius:50%; transition:transform .45s cubic-bezier(.2,.7,.3,1)} .tonda-voce:hover .tonda img{transform:scale(1.07)} .tonda .q{position:absolute; right:-3px; bottom:-3px; width:23px; height:23px; border-radius:50%; background:var(--acido); color:#101733; display:grid; place-items:center; font-family:var(--f-dati); font-size:.68rem; font-weight:600; border:2px solid var(--sf-2)} .tonda-voce .cat{font-family:var(--f-dati); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:4px} .tonda-voce h3{font-size:.92rem; font-weight:700; line-height:1.28; margin-bottom:5px} .tonda-voce:hover h3{color:var(--acido)} /* ============================================================ LA STRISCIA CHE SCORRE (dal 22/9/26 è quella della prima pagina) ============================================================ ⚠️ LO SCORRIMENTO LO FA IL BROWSER, non il copione. La striscia è una colonna di schede che scorre di lato con lo scatto (scroll-snap): così sul telefono si trascina col dito senza una riga di JavaScript, con l'inerzia e il rimbalzo veri del sistema, e il copione deve solo dire «vai alla prossima» ogni tre secondi. Un carosello fatto a mano con le trasforma- zioni si muove peggio e col dito non risponde uguale. ⚠️ E LA BARRA DI SCORRIMENTO NON SI VEDE. Qui è un elemento di impaginazione, non un elenco da scorrere: la barra grigia di sistema in mezzo alla prima pagina si nota e sporca. Resta scorrevole in tutti i modi, solo senza il suo cursore. */ /* ⚠️ FLEX, NON GRID. Con «grid-auto-columns: calc(25% - 20px)» le colonne si comprimevano invece di tenere la misura: otto schede stavano in 1322px invece di 2600, e lo scorrimento avanzava di 26px per volta — cioè di un soffio. Con flex e flex-shrink:0 la scheda è larga quanto le si dice, e la pista diventa lunga davvero. */ /* ⚠️ LA PISTA VA DA BORDO A BORDO, le schede no. Dentro il contenitore di pagina (.riga-w, largo 1220 con 28 di margine) la scheda tagliata a destra finiva contro il bordo dello schermo, non contro la colonna del testo: sembrava disallineata rispetto a tutto il resto della prima pagina. Adesso la pista occupa tutta la larghezza e si tiene ai fianchi lo stesso margine della colonna, calcolato — non scritto a mano. Così la prima scheda comincia esattamente dove comincia il titolo dell'articolo sotto, e le altre scorrono fin sotto il bordo. ⚠️ E IL TAGLIO NON È NETTO: ai due lati il contenuto sfuma nel fondo, dentro quel margine. Una scheda mozzata di colpo sembra un errore di impaginazione; sfumata si legge come «continua». */ .striscia-scorre{ --fianco:max(28px, calc((100% - 1164px) / 2)) } /* ⚠️ E SUL TELEFONO IL MARGINE DELLA COLONNA È 16, NON 28. Col 28 fisso la prima scheda cominciava 12px più in là del titolo sotto: poco, ma è esattamente la cosa che si nota. */ @media (max-width:700px){ .striscia-scorre{ --fianco:16px } } .striscia-scorre .striscia-in{ display:flex; gap:26px; padding:18px var(--fianco); /* ⚠️ E QUI IL CONTENITORE VA DISFATTO TUTTO. Dal 22/9/26 `.riga-w` tiene i margini con `width`, non più con l'imbottitura: senza rimettere `width:auto` la pista si ritroverebbe stretta come la colonna, e la scheda tagliata tornerebbe a finire in mezzo al niente invece che sotto il bordo. */ width:auto; max-width:none; margin-inline:0; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scroll-padding-inline:var(--fianco); scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fianco),#000 calc(100% - var(--fianco)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--fianco),#000 calc(100% - var(--fianco)),transparent 100%); } .striscia-scorre .striscia-in::-webkit-scrollbar{ display:none } .striscia-scorre .tonda-voce{ flex:0 0 273px; scroll-snap-align:start } /* I trattini: uno per schermata. Sono il minimo che dice «ce n'è dell'altro» e a che punto sei — più piccoli di così non si vedrebbero, più grandi diventerebbero un comando che si prende la scena. */ .striscia-segni{ display:flex; justify-content:center; gap:6px; padding-bottom:12px } .striscia-segni button{ flex:1; max-width:46px; height:3px; padding:0; border:0; cursor:pointer; background:var(--ln-f); transition:background .25s; } .striscia-segni button[aria-current="true"]{ background:var(--acido) } .striscia-segni button:hover{ background:var(--chiave) } /* Sul telefono si vede una scheda e mezza: la mezza dice che si può trascinare, senza bisogno di scriverlo. */ @media (max-width:820px){ .striscia-scorre .striscia-in{ gap:18px } .striscia-scorre .tonda-voce{ flex-basis:calc(100% - var(--fianco) - 46px) } } .tonda-voce .data{font-family:var(--f-dati); font-size:.65rem; letter-spacing:.07em; color:var(--tx-2)} /* LE PIÙ ASCOLTATE (bozza A approvata il 1/10/26): quando la striscia è la classifica, sopra le schede una riga che lo dice, con il periodo. Il segno giallo è quello delle teste di fascia (.tf h2::before), più piccolo; le schede restano quelle di sempre. */ .app .cl-testa{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding-top:18px } .app .cl-tit{ font-size:1rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; white-space:nowrap } .app .cl-tit::before{ content:''; display:inline-block; width:5px; height:.82em; margin-right:10px; vertical-align:-1px; background:linear-gradient(180deg,var(--acido),rgba(233,255,79,.35)) } .app .cl-periodo{ font-size:.84rem; font-weight:500; color:var(--tx-2) } .app .striscia-scorre.cl .striscia-in{ padding-top:14px } @media (max-width:700px){ .app .cl-testa{ padding-top:16px } } @media (max-width:980px){ .striscia-in{display:flex; overflow-x:auto; gap:18px; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch} .striscia-in::-webkit-scrollbar{display:none} .tonda-voce{flex:0 0 260px; scroll-snap-align:start} } /* ===================== apertura ===================== */ .apertura{display:grid; grid-template-columns:1.55fr 1fr; gap:30px; padding-block:30px} @media (max-width:980px){ .apertura{grid-template-columns:1fr; gap:22px} } .grande{position:relative; overflow:hidden; display:block} .grande img{transition:transform .6s cubic-bezier(.2,.7,.3,1)} .grande:hover img{transform:scale(1.03)} .grande .velo{position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,30,0) 38%,rgba(8,12,30,.92) 100%)} .grande .dentro{position:absolute; left:0; right:0; bottom:0; padding:30px; color:#fff; z-index:2} @media (max-width:700px){ .grande .dentro{padding:16px} } .grande h2{font-weight:800; font-size:clamp(1.25rem,2.9vw,2.2rem); line-height:1.09; letter-spacing:-.028em; margin:12px 0 11px; transition:color .15s} .grande:hover h2{color:var(--acido)} .grande .meta{font-family:var(--f-dati); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:#d3daf2; display:flex; gap:16px; flex-wrap:wrap} .grande .tondo{position:absolute; right:22px; top:22px; width:56px; height:56px; border-radius:50%; background:var(--acido); display:grid; place-items:center; z-index:3; animation:pulsa 2.8s ease-out infinite} @keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(233,255,79,.5)}70%{box-shadow:0 0 0 18px rgba(233,255,79,0)}100%{box-shadow:0 0 0 0 rgba(233,255,79,0)}} @media (prefers-reduced-motion:reduce){ .grande .tondo{animation:none} } .tre{display:grid; align-content:start} .tre-voce{display:grid; grid-template-columns:160px 1fr; gap:16px; padding-block:16px; border-bottom:1px solid var(--ln); align-items:start} .tre-voce:first-child{padding-top:0} .tre-voce:last-child{border-bottom:0} .tre-voce .foto{overflow:hidden} .tre-voce .foto img{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .tre-voce:hover .foto img{transform:scale(1.06)} .tre-voce h3{font-size:1rem; font-weight:700; line-height:1.28; margin:7px 0 6px} .tre-voce:hover h3{color:var(--acido)} .tre-voce .data{font-family:var(--f-dati); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-2)} @media (max-width:480px){ .tre-voce{grid-template-columns:118px 1fr; gap:13px} } /* ===================== banda con il lettore ===================== */ .banda{background:var(--sf-3); border-block:1px solid var(--ln)} .banda-in{display:grid; grid-template-columns:1fr 420px; gap:30px; align-items:center; padding-block:24px} @media (max-width:980px){ .banda-in{grid-template-columns:1fr; gap:18px} } .banda .et{font-family:var(--f-dati); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-2)} .banda h3{font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:800; line-height:1.2; margin:7px 0 10px; letter-spacing:-.02em} .banda .sotto{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--f-dati); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-2)} /* ===================== incorporazioni vere ===================== */ .embed{position:relative; background:var(--sf-2); border:1px solid var(--ln); overflow:hidden} .embed iframe{display:block; width:100%; height:100%; border:0} .embed.sp{height:152px; border-radius:12px} .embed.yt{aspect-ratio:16/9; border-radius:8px} .embed-att{position:absolute; inset:0; display:grid; place-items:center; padding:16px; text-align:center; gap:9px; align-content:center} .embed.sp .embed-att{grid-template-columns:auto 1fr auto; text-align:left; gap:14px; place-items:center stretch; align-content:center} .marchio-sp{width:42px; height:42px; border-radius:50%; background:#1db954; display:grid; place-items:center; color:#08130a; flex-shrink:0} .marchio-yt{width:62px; height:44px; border-radius:11px; background:#e0342a; display:grid; place-items:center; color:#fff} .embed-att b{display:block; font-size:.95rem; font-weight:700; line-height:1.25} .embed-att span{font-family:var(--f-dati); font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-2)} .embed-att .apri{align-self:center; border:1px solid var(--ln); padding:9px 13px; font-size:.66rem; white-space:nowrap} .embed.yt .embed-att{background:linear-gradient(180deg,rgba(8,12,30,.25),rgba(8,12,30,.8))} .embed.yt .embed-att img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1} /* ===================== schede ===================== */ .griglia4{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:start} .griglia3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start} @media (max-width:980px){ .griglia4{grid-template-columns:repeat(2,1fr); gap:22px} .griglia3{grid-template-columns:repeat(2,1fr); gap:22px} } .scheda{display:grid; gap:10px} .scheda .foto{overflow:hidden; position:relative} .scheda .foto img{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .scheda:hover .foto img{transform:scale(1.05)} .scheda .dur{position:absolute; right:0; bottom:0; background:rgba(9,13,28,.86); color:#fff; font-family:var(--f-dati); font-size:.66rem; padding:3px 8px; font-variant-numeric:tabular-nums} .scheda h3{font-size:1.03rem; font-weight:700; line-height:1.28; letter-spacing:-.012em} .scheda:hover h3{color:var(--acido)} .scheda .sotto{display:flex; gap:13px; flex-wrap:wrap; font-family:var(--f-dati); font-size:.65rem; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-2)} .scheda .strillo{font-family:var(--f-serif); font-size:1rem; color:var(--tx-2); margin:0} /* I LIBRI IN PRIMA PAGINA (3/10/26): le schede di «Da riascoltare», in una fila che scorre. Quattro per volta sul computer, due sul tablet, una e un pezzo della seguente sul telefono (il pezzo dice che si trascina). Lo scorrimento lo fa il browser con lo scatto, come la striscia in cima; il copione dice solo «vai avanti» e accende i trattini. Niente barra di scorrimento: è impaginazione, non un elenco. */ .app .griglia-scorre{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; align-items:start } .app .griglia-scorre::-webkit-scrollbar{ display:none } .app .griglia-scorre > .scheda{ flex:0 0 calc((100% - 3 * 26px) / 4); min-width:0; scroll-snap-align:start } .app .fascia-scorre .striscia-segni{ padding:22px 0 0 } @media (max-width:980px){ .app .griglia-scorre{ gap:22px } .app .griglia-scorre > .scheda{ flex-basis:calc((100% - 22px) / 2) } } @media (max-width:700px){ .griglia4,.griglia3{grid-template-columns:1fr; gap:20px} .scheda{grid-template-columns:118px 1fr; column-gap:15px; row-gap:6px; align-items:start} .scheda .foto{grid-column:1; grid-row:1 / span 3} .scheda .eti,.scheda h3,.scheda .sotto{grid-column:2} .scheda h3{font-size:1rem} .scheda .strillo{display:none} .scheda .dur{font-size:.6rem; padding:2px 6px} /* nella fila che scorre la scheda resta in piedi (foto sopra, testo sotto): una fila di righe di lato non si legge */ .app .griglia-scorre{ gap:16px } .app .griglia-scorre > .scheda{ flex-basis:76%; grid-template-columns:1fr; row-gap:10px } .app .griglia-scorre > .scheda .foto, .app .griglia-scorre > .scheda .eti, .app .griglia-scorre > .scheda h3, .app .griglia-scorre > .scheda .sotto{ grid-column:auto; grid-row:auto } } /* ===================== due colonne + spalla ===================== */ .fascia{padding-block:34px} .due{display:grid; grid-template-columns:1fr 320px; gap:44px; padding-block:34px; align-items:start} @media (max-width:980px){ .due{grid-template-columns:1fr; gap:32px} } .int-riga{display:grid; grid-template-columns:132px 1fr; gap:18px; padding-block:18px; border-bottom:1px solid var(--ln); align-items:start} .int-riga:first-of-type{padding-top:0} .int-riga .foto{overflow:hidden} .int-riga .foto img{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .int-riga:hover .foto img{transform:scale(1.05)} .int-riga h3{font-size:1.04rem; font-weight:700; line-height:1.28; margin:8px 0 6px} .int-riga:hover h3{color:var(--acido)} .int-riga .chi{font-family:var(--f-serif); font-style:italic; font-size:.97rem; color:var(--tx-2); margin:0 0 6px} .int-riga .data{font-family:var(--f-dati); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-2)} @media (max-width:480px){ .int-riga{grid-template-columns:100px 1fr; gap:13px} } .spalla{display:grid; gap:28px; align-content:start} /* Il pulsante che apre le etichette nascoste: si veste come un'etichetta, ma si vede che è un comando — niente bordo, il giallo delle parole chiave. */ .tag-altri{ margin-top:10px; padding:8px 0; border:0; background:none; cursor:pointer; font-family:var(--f-ui); font-size:.82rem; font-weight:600; color:var(--chiave); letter-spacing:-.01em; } .tag-altri:hover{ color:var(--acido); text-decoration:underline; text-underline-offset:3px } .sp-tit{display:flex; align-items:center; gap:11px; margin-bottom:15px} .sp-tit h3{font-size:1rem; font-weight:800; white-space:nowrap} .sp-tit .pall{width:7px; height:7px; border-radius:50%; background:var(--acido)} .sp-tit .riga{flex:1; height:1px; background:var(--ln)} .piu-voce{display:grid; grid-template-columns:auto 1fr; gap:13px; padding-block:12px; border-bottom:1px solid var(--ln); align-items:center} .piu-voce:last-child{border-bottom:0} .piu-voce .t{width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0} .piu-voce .t img{width:100%; height:100%; object-fit:cover; transition:transform .45s} .piu-voce:hover .t img{transform:scale(1.08)} .piu-voce h4{font-size:.9rem; font-weight:700; line-height:1.27; margin-bottom:4px} .piu-voce:hover h4{color:var(--acido)} .piu-voce .data{font-family:var(--f-dati); font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-2)} .barre{display:grid; gap:9px} .barra{display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; color:#fff; padding:10px 13px; transition:transform .18s} .barra:hover{transform:translateX(3px)} .barra .ic{width:36px; height:36px; display:grid; place-items:center; background:rgba(255,255,255,.16); border-radius:50%} .barra b{font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums} .barra em{font-style:normal; font-family:var(--f-dati); font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; opacity:.92} .barra .chi{font-family:var(--f-dati); font-size:.66rem; letter-spacing:.08em} .barra.sp{background:#1db954} .barra.yt{background:#e0342a} .barra.ln{background:#0a66c2} .barra.tg{background:#2aabee} /* sul verde di Spotify e sull'azzurro di Telegram la scritta bianca non si leggeva (2,36 e 2,6 di contrasto, 5/10/26): la scritta è il fondo scuro del sito, come fa Spotify stessa sul suo verde. YouTube e LinkedIn restano col bianco. */ .barra.sp, .barra.tg{color:var(--sf)} /* i canali che mancavano in «Dove ci trovi» (25/9/26): scritta bianca leggibile (≥4,5) */ .barra.ig{background:#c13584} .barra.ap{background:#872ec4} .barra.fb{background:#1877f2} .barra.altro{background:var(--sf-3)} .sp-iscr{background:var(--pun); color:#fff; padding:22px 18px} .app[data-tema="scuro"] .sp-iscr{background:var(--sf-3)} .sp-iscr h3{font-size:1.14rem; font-weight:800; margin-bottom:7px} .sp-iscr p{font-family:var(--f-serif); font-size:.96rem; color:#ccd6f5; margin:0 0 15px} .app[data-tema="scuro"] .sp-iscr p{color:var(--tx-2)} .campo{display:grid; gap:9px} .campo input{border:0; padding:13px 14px; font:inherit; font-size:.9rem; background:#fff; color:#101733; width:100%} .campo button{background:var(--acido); color:#101733; border:0; padding:13px; font-size:.9rem; font-weight:700; cursor:pointer} .campo button:hover{filter:brightness(1.06)} /* ===================== sezione ===================== */ .sez-testa{padding-block:34px 26px; border-bottom:1px solid var(--ln)} /* ⚠️ I NUMERI STANNO SOPRA, IN RIGA. Erano una colonnina a destra del titolo: su una sezione senza descrizione — «Puntate» — restava mezza pagina vuota sotto il titolo e una torre di cifre accanto (Marco, 20/9/26). Adesso sono una striscia in cima alla testata, e il titolo si prende tutta la larghezza. ⚠️ SI FA CON L'ORDINE, NON SPOSTANDO IL MARKUP: questa testata la costruiscono sei punti diversi (le sezioni, le firme, la ricerca, chi siamo…), e cambiarli uno per uno vuol dire dimenticarne uno. */ .sez-testa-in{display:flex; flex-direction:column; align-items:stretch; gap:0} .sez-testa h1{font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800; letter-spacing:-.035em; line-height:1; margin:14px 0 16px} .sez-testa .descr{font-family:var(--f-serif); font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.5; color:var(--tx-2); margin:0} /* ⚠️ .sez-numeri VIVE SOLO SU «CHI SIAMO», che è una pagina da leggere e non un elenco: lì i numeri sono un pezzo del racconto e non hanno una riga di risultati in cui scendere. Sugli elenchi stanno in .conta-num. */ .sez-numeri{order:-1; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 0; margin-bottom:18px; font-family:var(--f-dati); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-2)} .sez-numeri span{display:inline-flex; align-items:baseline; gap:7px; padding:0 15px; border-left:1px solid var(--ln); white-space:nowrap} .sez-numeri span:first-child{padding-left:0; border-left:0} .sez-numeri span:last-child{padding-right:0} .sez-numeri b{font-family:var(--f-tit); font-size:1.08rem; letter-spacing:-.02em; color:var(--tx); font-variant-numeric:tabular-nums} @media (max-width:820px){ /* ⚠️ Niente divisori quando la riga va a capo: il trattino resterebbe all'inizio della riga sotto, come se mancasse qualcosa prima. Sul piccolo separa lo spazio. */ .sez-numeri{font-size:.62rem; margin-bottom:14px; gap:8px 20px} .sez-numeri span{padding:0; border-left:0} .sez-numeri b{font-size:.98rem} } /* ⚠️ IL RIQUADRO HA IL SUO RESPIRO, SU TUTTI E QUATTRO I LATI. Qui c'era solo `padding-block`: finché il contenitore teneva i margini come imbottitura i fianchi arrivavano da lì, e togliendoli il testo è finito appiccicato al bordo della fascia — «non vedi che il testo è al limite del riquadro?» (Marco, 22/9/26). Un riquadro con un fondo suo ha la sua imbottitura, uguale sui quattro lati, e non se la fa prestare da chi lo contiene. */ .chip{appearance:none; cursor:pointer; border:1px solid var(--ln); background:transparent; color:var(--tx-2); padding:9px 15px; font-size:.84rem; transition:all .15s} .chip:hover{border-color:var(--acido); color:var(--acido)} .chip[aria-pressed="true"]{background:var(--acido); color:#101733; border-color:var(--acido); font-weight:700} .conta-ris{font-family:var(--f-dati); font-size:.7rem; color:var(--tx-2); padding-block:18px 0; letter-spacing:.06em; text-transform:uppercase} .evid{display:grid; grid-template-columns:1.1fr 1fr; gap:30px; padding-block:26px; border-bottom:1px solid var(--ln); align-items:center} @media (max-width:820px){ .evid{grid-template-columns:1fr; gap:20px} } .evid .foto{position:relative; overflow:hidden} .evid .foto img{transition:transform .6s cubic-bezier(.2,.7,.3,1)} .evid:hover .foto img{transform:scale(1.03)} .evid .tondo{position:absolute; right:18px; top:18px; width:52px; height:52px; border-radius:50%; background:var(--acido); display:grid; place-items:center; z-index:2} .evid h2{font-size:clamp(1.35rem,2.6vw,2.05rem); font-weight:800; line-height:1.1; letter-spacing:-.028em; margin:14px 0 13px; transition:color .15s} .evid:hover h2{color:var(--acido)} .evid .somm{font-family:var(--f-serif); font-size:1.06rem; color:var(--tx-2); margin:0 0 15px} .evid .meta{font-family:var(--f-dati); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2); display:flex; gap:16px; flex-wrap:wrap} .vuoto{padding:44px 0; text-align:center; color:var(--tx-2); font-family:var(--f-serif); font-size:1.08rem} .pagine{display:flex; gap:8px; justify-content:center; padding-block:14px 36px; flex-wrap:wrap} .pagine span{min-width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--ln); font-family:var(--f-dati); font-size:.82rem; padding-inline:12px} .pagine span.on{background:var(--acido); color:#101733; border-color:var(--acido)} /* ===================== scheda articolo ===================== */ .briciole{font-family:var(--f-dati); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2); padding-block:20px 0; display:flex; gap:10px; flex-wrap:wrap} .briciole a:hover{color:var(--acido)} .briciole b{color:var(--tx); font-weight:400} .art-testa{padding-block:20px 30px; border-bottom:1px solid var(--ln)} .art-occhiello{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; font-family:var(--f-dati); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2)} /* ⚠️ RIDOTTO IL 21/9/26. Era clamp(1.85rem,3.6vw,3rem): su un titolo corto stava bene, ma questi titoli sono lunghi — «SaaS e PaaS are dead? Come load balancer e autoscaling hanno riscritto le regole dell'infrastruttura» sono novanta caratteri — e a 48px riempivano mezzo schermo prima di cominciare a leggere. Marco: «diminuire la grandezza del titolo perché è troppo grande». Si stringe la forbice invece di togliere il clamp: resta grande sui titoli corti, non esplode su quelli lunghi. */ .art-testa h1{font-size:clamp(1.5rem,2.7vw,2.25rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin-bottom:18px} .art-somm{font-family:var(--f-serif); font-size:clamp(1.12rem,1.7vw,1.32rem); line-height:1.5; color:var(--tx-2); margin:0 0 24px} .art-firma{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.88rem; color:var(--tx-2)} .faccia{width:42px; height:42px; border-radius:50%; background:var(--pun); color:#fff; display:grid; place-items:center; font-family:var(--f-tit); font-weight:700; font-size:.82rem} .art-firma b{color:var(--tx)} .art-firma .sep{width:3px; height:3px; border-radius:50%; background:var(--ln-f)} .art-corpo{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; padding-block:30px 36px; align-items:start} /* ⚠️ minmax(0,1fr), non 1fr (2/10/26): «1fr» vuol dire «almeno largo quanto il contenuto più largo», e due foto verticali affiancate allargavano la colonna del testo a 479px su un telefono da 390 (testo tagliato ai lati). */ @media (max-width:980px){ .art-corpo{grid-template-columns:minmax(0,1fr); gap:34px} } /* Le pagine libere del pannello (Chi siamo, Contatti…): stessa tipografia dell'articolo, senza la spalla — una colonna sola, perché non c'è niente da mettere accanto e mezza riga vuota si vede. */ .pag-corpo{grid-template-columns:minmax(0,1fr); padding-block:26px 46px} .cop{margin-bottom:26px} .testo{font-size:1.08rem; line-height:1.72} .testo p{margin:0 0 19px} .testo h2{font-size:clamp(1.35rem,2.2vw,1.6rem); font-weight:700; letter-spacing:-.018em; margin:34px 0 14px} .citazione{font-family:var(--f-serif); font-style:italic; font-size:clamp(1.2rem,2vw,1.42rem); line-height:1.42; border-left:4px solid var(--acido); padding:6px 0 6px 22px; margin:30px 0; color:var(--tx)} .cap-blocco{border:1px solid var(--ln); margin:28px 0} .cap-testa{background:var(--sf-2); padding:13px 17px; border-bottom:1px solid var(--ln); display:flex; align-items:center; gap:11px} .cap-testa h3{font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase} .cap-testa .n{margin-left:auto; font-family:var(--f-dati); font-size:.7rem; color:var(--tx-2)} /* l'indice dei paragrafi (27/9/26): stesso riquadro dei capitoli, numeri al posto dei minuti */ .indice ol{margin:0; padding:0; list-style:none; counter-reset:ind} .indice li{counter-increment:ind} .indice li a{display:grid; grid-template-columns:70px 1fr; gap:15px; padding:12px 17px; border-bottom:1px solid var(--ln); color:inherit; text-decoration:none; align-items:baseline; font-weight:600; line-height:1.35} .indice li:last-child a{border-bottom:0} .indice li a::before{content:counter(ind, decimal-leading-zero); font-family:var(--f-dati); font-size:.86rem; color:var(--acido); font-weight:700} .indice li a:hover, .indice li a:focus-visible{color:var(--acido)} .testo h2{scroll-margin-top:84px} .cap{display:grid; grid-template-columns:70px 1fr; gap:15px; padding:13px 17px; border-bottom:1px solid var(--ln); align-items:baseline; width:100%; text-align:left; background:transparent; border-left:0; border-right:0; border-top:0; color:inherit; cursor:pointer} .cap:last-child{border-bottom:0} .cap:hover{background:var(--sf-2)} .cap b{font-family:var(--f-dati); font-size:.78rem; color:var(--blu); font-variant-numeric:tabular-nums; font-weight:600} .cap:hover b{color:var(--acido)} .cap span{font-size:.95rem} .tagbox{display:flex; gap:8px; flex-wrap:wrap; padding-block:24px; border-top:1px solid var(--ln); margin-top:28px} .tagbox a{border:1px solid var(--ln); padding:7px 13px; font-size:.82rem; color:var(--tx-2); transition:all .15s} /* ⚠️ IL FONDO DEL PASSAGGIO È IL GIALLO DELLE CHIAVI (Marco, 20/9/26), non il grigio-blu di prima: un tag che si accende deve accendersi davvero. Il testo diventa scuro — 15,4:1 sul giallo, misurato — e il bordo prende la stessa tinta, sennò resta un contorno più scuro intorno alla pastiglia. */ .tagbox a:hover{background:var(--chiave); color:var(--sf); border-color:var(--chiave)} .ospite{display:grid; grid-template-columns:auto 1fr; gap:17px; border:1px solid var(--ln); padding:20px; align-items:center; background:var(--sf-2)} .ospite .f{width:62px; height:62px; border-radius:50%; background:var(--pun); color:#fff; display:grid; place-items:center; font-family:var(--f-tit); font-weight:700} .ospite h3{font-size:1.08rem; font-weight:700; margin-bottom:5px} .ospite p{margin:0; font-family:var(--f-serif); font-size:.97rem; color:var(--tx-2)} .indice a{display:grid; grid-template-columns:56px 1fr; gap:11px; padding:9px 11px; font-size:.88rem; align-items:baseline; border-left:2px solid transparent} .indice a b{font-family:var(--f-dati); font-size:.74rem; font-weight:400; color:var(--tx-2); font-variant-numeric:tabular-nums} .indice a:hover{background:var(--sf-2)} .indice a.on{border-left-color:var(--acido); background:var(--sf-2)} .indice a.on b{color:var(--blu)} @media (max-width:980px){ .spalla .blocco-indice{display:none} } /* ===================== iscrizione + piede ===================== */ .iscr{background:var(--sf-3); color:var(--tx); padding-block:34px; border-top:1px solid var(--ln)} .iscr-in{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center} @media (max-width:820px){ .iscr-in{grid-template-columns:1fr} } .iscr h2{font-size:clamp(1.3rem,2.4vw,1.6rem); font-weight:800; letter-spacing:-.025em; margin-bottom:7px} .iscr p{font-family:var(--f-serif); font-size:1.04rem; color:var(--tx-2); margin:0} .iscr-campo{display:flex; gap:10px} .iscr-campo input{border:0; padding:14px 16px; font:inherit; font-size:.9rem; min-width:230px; background:#fff; color:#101733} .iscr-campo button{background:var(--acido); color:#101733; border:0; padding:14px 24px; font-size:.9rem; font-weight:700; white-space:nowrap; cursor:pointer} @media (max-width:480px){ .iscr-campo input{min-width:0; flex:1} } .piede{background:var(--sf-2); color:var(--tx-2); padding-block:34px; font-size:.88rem; border-top:1px solid var(--ln)} /* le colonne sono quelle del pannello, quante sono: il piede mette piede-gr-N (da 1 a 6) */ .piede-gr{display:grid; grid-template-columns:1.7fr repeat(3, minmax(0,1fr)); gap:28px} .piede-gr-1{grid-template-columns:1.7fr minmax(0,1fr)} .piede-gr-2{grid-template-columns:1.7fr repeat(2,minmax(0,1fr))} .piede-gr-4{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))} .piede-gr-5{grid-template-columns:1.3fr repeat(5,minmax(0,1fr))} .piede-gr-6{grid-template-columns:1.2fr repeat(6,minmax(0,1fr))} @media (max-width:820px){ .piede-gr{grid-template-columns:1fr 1fr} } @media (max-width:480px){ .piede-gr{grid-template-columns:1fr} } .piede b.tit{display:block; color:var(--tx); font-family:var(--f-dati); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:11px} .piede a{display:block; padding-block:4px; color:var(--tx-2)} .piede a:hover{color:var(--acido)} .piede .desc{font-family:var(--f-serif); font-size:.98rem; line-height:1.55; margin:12px 0 0} .piede .coda{margin-top:26px; padding-top:18px; border-top:1px solid var(--ln); font-family:var(--f-dati); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; display:flex; gap:16px; flex-wrap:wrap} /* ⚠️ Si alza quanto la fascia in basso: i token --tab-h e --aud-h valgono zero finché quelle strisce non ci sono, quindi qui non serve nessun «se». */ .su{position:fixed; right:20px; bottom:calc(20px + var(--tab-h) + var(--aud-h) + env(safe-area-inset-bottom,0px) + var(--addi-banner-h,0px)); width:46px; height:46px; border-radius:50%; background:var(--acido); color:#101733; display:grid; place-items:center; z-index:55; box-shadow:0 6px 20px rgba(0,0,0,.4); opacity:0; transform:translateY(10px); transition:opacity .25s,transform .25s; pointer-events:none; border:0; cursor:pointer} .su.vista{opacity:1; transform:none; pointer-events:auto} /* comparsa: si parte visibili, l'animazione la accende il copione */ .sale{opacity:1; transform:none} .app.anima .sale{opacity:0; transform:translateY(20px)} .app.anima .sale.dentro{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)} /* quello che è già sullo schermo all'arrivo non entra in scena: c'è e basta (5/10/26, il «fondino blu» fra una pagina e l'altra) */ .app.anima .sale.dentro.subito{transition:none} @media (prefers-reduced-motion:reduce){ .app.anima .sale{opacity:1; transform:none} *{animation-duration:.001ms!important; transition-duration:.001ms!important} } /* ================== PELLE MODERNA: via il registro da quotidiano ================== */ .app{ font-size:16.5px; } /* il filo nero col ticker e la data se ne va: l'interruttore sale nella testata */ .app .alta{display:none} /* niente maiuscolette spaziate: le informazioni si scrivono normali */ .app .eti,.app .grande .meta,.app .scheda .sotto,.app .tre-voce .data,.app .tonda-voce .cat,.app .tonda-voce .data,.app .briciole,.app .art-occhiello,.app .piu-voce .data,.app .evid .meta,.app .sez-numeri,.app .conta-ris,.app .piede b.tit,.app .piede .coda,.app .barra em,.app .barra .chi,.app .tendina,.app .scheda .dur,.app .banda .et,.app .banda .sotto,.app .cap-testa h3,.app .cap-testa .n,.app .embed-att span,.app .menu,.app .filtri .et,.app .tf .tutti,.app .indice a b,.app .cap b,.app .menu-tel a b,.app .art-firma,.app .sp-tit h3{ text-transform:none; letter-spacing:0; font-family:var(--f-ui); } .app .grande .meta,.app .scheda .sotto,.app .evid .meta,.app .tre-voce .data,.app .tonda-voce .data,.app .piu-voce .data,.app .briciole,.app .art-occhiello,.app .conta-ris{ font-size:.88rem; font-weight:500; font-variant-numeric:tabular-nums; } .app .scheda .dur,.app .cap b,.app .indice a b{font-size:.84rem; font-weight:600; font-variant-numeric:tabular-nums} .app .tonda-voce .cat{font-size:.8rem; font-weight:600} .app .menu{font-family:var(--f-ui); font-size:.98rem; font-weight:600; gap:30px} .app .menu a{border-bottom:0; padding:6px 0; position:relative} .app .menu a.on::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--acido); border-radius:2px} .app .menu-tel a{font-family:var(--f-ui); font-weight:600} /* le etichette di sezione diventano pastiglie */ .app .eti{border-radius:999px; padding:6px 13px; font-size:.76rem; font-weight:600; line-height:1} .app .eti.nuda{padding:0; font-size:.84rem; font-weight:600} /* angoli morbidi al posto degli spigoli da giornale */ .app .grande,.app .cop,.app .embed,.app .ospite,.app .cap-blocco,.app .sp-iscr,.app .scheda .foto,.app .tre-voce .foto,.app .int-riga .foto,.app .evid .foto,.app .banda{ border-radius:var(--r); overflow:hidden; } .app .embed.sp{height:160px} .app .chip,.app .pagine span,.app .tagbox a,.app .embed-att .apri,.app .campo input,.app .campo button,.app .iscr-campo input,.app .iscr-campo button{border-radius:999px} .app .barra{border-radius:var(--r-s)} .app .iscr-campo input,.app .campo input{padding-inline:20px} .app .tagbox a{padding:9px 16px} /* le teste di fascia: solo un titolo grosso e un rimando, niente pallino e filetto */ .app .tf .pall,.app .tf .riga,.app .sp-tit .pall,.app .sp-tit .riga{display:none} .app .tf{align-items:baseline; gap:18px; margin-bottom:26px} .app .tf h2,.app .tf h3{font-size:clamp(1.45rem,2.6vw,1.95rem); letter-spacing:-.035em; font-weight:700} /* il rimando in cima alla sezione è un pulsante piccolo: il vestito sta con quello dei pulsanti sotto l'ultima puntata (.banda-azioni a), più in basso */ .app .tf .tutti{margin-left:auto; align-self:center} .app .sp-tit{margin-bottom:16px} .app .sp-tit h3{font-size:1.1rem; letter-spacing:-.025em; font-weight:700} /* titoli piu' stretti e piu' morbidi */ .app h1,.app h2,.app h3{letter-spacing:-.035em} .app .art-testa h1{line-height:1.03} .app .grande h2,.app .evid h2{letter-spacing:-.035em} /* i sommari non hanno piu' le grazie: sans grande e leggero */ .app .art-somm,.app .evid .somm,.app .sez-testa .descr,.app .scheda .strillo,.app .int-riga .chi,.app .piede .desc,.app .sp-iscr p,.app .iscr p,.app .vuoto{ font-family:var(--f-ui); font-style:normal; font-weight:400; } .app .art-somm{font-size:clamp(1.15rem,1.8vw,1.35rem); line-height:1.55} .app .int-riga .chi{font-size:.95rem; font-weight:500} /* la citazione: niente filetto, testo grande e stretto */ .app .citazione{ font-family:var(--f-tit); font-style:normal; font-weight:700; font-size:clamp(1.4rem,2.6vw,1.85rem); line-height:1.28; letter-spacing:-.035em; border-left:0; padding:0; margin:38px 0; color:var(--tx); } .app .citazione::before{content:''; display:block; width:52px; height:4px; border-radius:4px; background:var(--acido); margin-bottom:18px} /* il corpo dell'articolo respira */ .app .testo{font-size:1.12rem; line-height:1.75} .app .testo h2{font-weight:700; letter-spacing:-.03em; margin:40px 0 16px} /* i capitoli: righe morbide */ .app .cap-testa{background:transparent; border-bottom:1px solid var(--ln)} .app .cap-testa h3{font-size:1rem; font-weight:700; letter-spacing:-.02em} .app .cap{border-radius:0} .app .cap span{font-size:1rem} /* pastiglia dei filtri piu' morbida */ .app .chip{padding:11px 18px; font-weight:600} /* i numeri della sezione */ .app .sez-numeri{font-size:.88rem; font-weight:500} .app .sez-numeri b{font-family:var(--f-tit); font-weight:700; letter-spacing:-.04em} /* ⚠️ LA RIGA DEI DATI SI LEGGE, NON SI DECIFRA. Sulla voce in evidenza era maiuscoletto minuscolo e spaziato, con tre pezzi separati da uno spazio: «17 GIUGNO 2026 CON GERARDO SABBARESE 21:33». Tre cose accostate che sembravano una sola, e un 21:33 che si legge come un orario. Adesso è scritta normale, coi puntini in mezzo e i minuti detti in minuti — la stessa riga della fascia in prima pagina, che è quella che funziona. */ .app .evid .meta{ font-family:var(--f-ui); font-size:.92rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--tx-2); display:flex; flex-wrap:wrap; align-items:baseline; gap:0 0; } .app .evid .meta span{display:inline-flex; align-items:baseline} .app .evid .meta span + span::before{content:'·'; padding:0 10px; color:var(--ln-f)} @media (max-width:620px){ .app .evid .meta{ font-size:.86rem } .app .evid .meta span + span::before{ padding:0 7px } } /* ---------- la riga dei dati: SCELTA (Marco, 20/9/26) ---------- Ogni dato con la sua icona, e le icone del giallo delle chiavi. Fra le quattro bozze è quella che si legge più in fretta: l'icona dice CHE COSA è il valore senza spendere una parola, e la riga resta su un rigo solo. */ .app .evid .meta.m-ico{display:flex; gap:8px 26px; flex-wrap:wrap} .app .evid .meta.m-ico span{display:inline-flex; align-items:center; gap:8px} .app .evid .meta.m-ico span + span::before{content:none} .app .evid .meta.m-ico svg{color:var(--chiave); flex-shrink:0} /* ---------- i numeri della sezione: SCELTA (Marco, 20/9/26) ---------- Fuori dalla testa, dentro la riga sotto i filtri che il conteggio ce l'aveva già. Due giri di bozze per arrivarci: il primo (striscia sopra il titolo, cifre grandi, detti a parole, accanto al titolo) era quattro modi di impaginare la stessa idea — una fila di statistiche in cima — e Marco li ha bocciati tutti. Questa non aggiunge un blocco alla testa: lo toglie. E toglie una ripetizione, perché «96 puntate» era scritto due volte. I valori portano il giallo delle chiavi; le parole restano in chiaro. */ .conta-num span{white-space:nowrap} .conta-num b{ color:var(--chiave); font-family:var(--f-tit); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } /* ================== SPIGOLI: niente curve, tutto squadrato ================== */ .app{ } /* i contenitori */ .app .grande,.app .cop,.app .embed,.app .embed.sp,.app .embed.yt,.app .ospite,.app .cap-blocco,.app .sp-iscr,.app .scheda .foto,.app .tre-voce .foto,.app .int-riga .foto,.app .evid .foto,.app .banda,.app .barra{ border-radius:0 } /* i comandi */ .app .chip,.app .pagine span,.app .tagbox a,.app .embed-att .apri,.app .campo input,.app .campo button,.app .iscr-campo input,.app .iscr-campo button,.app .su{ border-radius:0 } .app .su{width:48px; height:48px} /* le etichette tornano rettangolari, con l'angolo vivo */ .app .eti{ border-radius:0; padding:6px 12px } /* le miniature tonde diventano quadrate */ .app .tonda,.app .tonda img{ border-radius:0 } .app .tonda{width:76px; height:76px} .app .tonda .q{ border-radius:0; right:0; bottom:0; width:24px; height:24px; border:0; box-shadow:-2px -2px 0 0 var(--sf-2); } .app .piu-voce .t,.app .piu-voce .t img{ border-radius:0 } .app .piu-voce .t{width:64px; height:64px} /* facce e marchi: quadrati anche loro */ .app .faccia,.app .ospite .f,.app .barra .ic,.app .marchio-sp,.app .marchio-yt{ border-radius:0 } /* i tasti di riproduzione: quadrati, non bollini */ .app .grande .tondo,.app .evid .tondo{ border-radius:0; animation:none } .app .grande .tondo{width:58px; height:58px} .app .evid .tondo{width:54px; height:54px} /* i segni acidi diventano barre nette */ .app .menu a.on::after{ border-radius:0; height:3px } .app .citazione::before{ border-radius:0; width:56px; height:5px } /* un segno squadrato a sinistra delle teste di fascia, al posto del pallino tolto */ .app .tf h2::before,.app .tf h3::before,.app .sp-tit h3::before{ content:''; display:inline-block; width:5px; height:.82em; background:var(--acido); margin-right:12px; vertical-align:-1px; } /* i contorni si vedono: bordo netto sulle immagini */ .app .scheda .foto,.app .tre-voce .foto,.app .int-riga .foto,.app .evid .foto,.app .cop,.app .grande{ border:1px solid var(--ln); } .app[data-tema="scuro"] .scheda .foto,.app[data-tema="scuro"] .tre-voce .foto,.app[data-tema="scuro"] .int-riga .foto,.app[data-tema="scuro"] .evid .foto,.app[data-tema="scuro"] .cop,.app[data-tema="scuro"] .grande{ border-color:#222a45 } /* ================== MONTSERRAT su tutta la famiglia ================== */ .app{ font-size:16px; /* Montserrat e' largo: un filo piu' piccolo */ font-feature-settings:'tnum' 1; /* cifre incolonnate */ } /* i titoli: Montserrat va stretto di spaziatura, sennò si allarga troppo */ .app h1,.app h2,.app h3,.app h4,.app h5{ letter-spacing:-.03em } /* ⚠️ IL TITOLO DELL'ARTICOLO RIEMPIE LA RIGA, E BASTA. Il 20/9 avevo tolto «balance» perché pareggiava le righe fermandosi a due terzi, e l'avevo sostituito con «pretty» — che fa la stessa cosa in piccolo: per non lasciare una riga corta in fondo accorcia anche quelle prima, e il titolo si spezza a metà frase con mezzo schermo vuoto a destra. Marco, 21/9/26: «cos'è questo taglio dei titoli a cazzo di cane?». Adesso niente: il titolo va a capo dove finisce lo spazio, come un testo normale. Un titolo è una frase, non un blocchetto da impaginare. */ .app .art-testa h1{ letter-spacing:-.035em; line-height:1.06; text-wrap:wrap } /* ⚠️ E NEANCHE I TITOLI DENTRO L'ARTICOLO. Il 21/9 avevo tolto «pretty» solo dal titolo grande, e i titoletti del testo erano rimasti con «balance»: su una colonna larga 796px riempivano il 21%, spezzati in due righe corte e pareggiate («Il difetto / strutturale»). Marco: «e questi? non li hai sistemati?». Balance serve dove il titolo è corto e la colonna stretta — le schede — non dentro un testo che si legge per righe intere. */ .app .testo h2,.app .testo h3,.app .testo h4,.app .testo h5{ text-wrap:wrap } /* ⚠️ I TITOLI DENTRO L'ARTICOLO SONO GIALLI (Marco, 21/9/26). È --chiave, lo stesso giallo delle parole chiave dell'autore: quello dei testi. Non --acido, che è il giallo dei pulsanti e del pieno. Contrasto misurato sul fondo dell'articolo: 15,4:1. */ .app .testo h2,.app .testo h3,.app .testo h4,.app .testo h5{ color:var(--chiave) } .app .grande h2,.app .evid h2{ letter-spacing:-.032em; line-height:1.12 } .app .sez-testa h1{ letter-spacing:-.045em } .app .tf h2,.app .tf h3{ letter-spacing:-.03em; font-weight:700 } .app .citazione{ letter-spacing:-.03em; line-height:1.32; font-weight:700 } /* ================== IL LETTORE È NOSTRO ================== ⚠️ NON È PIÙ UN RIQUADRO DI SPOTIFY. Il lettore incorporato di Spotify è una scatola chiusa: porta i suoi colori dentro una pagina che ne ha altri, si presenta con la sua barra di scorrimento, e da fuori non si può comandare — quindi i minutaggi non potevano essere cliccabili. Il podcast però non sta su Spotify: sta su Spreaker, e il file audio è pubblico, si può scorrere e si può leggere da qui. Allora il lettore lo facciamo noi: stessi colori, stesso carattere, e un capitolo che si clicca porta l'audio al suo minuto. Chi preferisce Spotify ha il suo link. ======================================================== */ .app .lettore{ background:var(--sf-2); border:1px solid var(--ln); padding:16px 18px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; align-items:center; } /* ⚠️ LO STACCO SOLO DENTRO L'ARTICOLO. Serve lì, perché il testo cominciava incollato al lettore — «mi devi mettere lo stesso gap che hai messo in alto tra la foto e il player» (Marco, 21/9/26) — ed è lo stesso 26px che la copertina ha sopra (.cop). ⚠️ Messo su TUTTI i lettori allungava anche la fascia della prima pagina, e lì la copertina è tirata da cima a fondo: 26px in più di fascia volevano dire 27px di foto ritagliati invece di 1. Il banco l'ha visto subito. */ .app .art-corpo .lettore{ margin-bottom:26px } .app .lettore-play{ width:62px; height:62px; flex-shrink:0; border:0; cursor:pointer; padding:0; background:var(--acido); color:#0d1122; display:grid; place-items:center; transition:filter .18s, transform .18s; } .app .lettore-play:hover{ filter:brightness(1.07); transform:scale(1.03) } .app .lettore-play svg{ width:26px; height:26px; margin-left:3px } .app .lettore[data-stato="va"] .lettore-play svg{ margin-left:0 } .app .lettore-dx{ min-width:0; display:grid; gap:11px } .app .lettore-riga{ display:flex; align-items:center; gap:14px } .app .lettore-barra{ position:relative; flex:1 1 auto; min-width:0; height:10px; background:var(--ln); cursor:pointer; border:0; padding:0; display:block; } .app .lettore-barra:hover{ background:var(--ln-f) } .app .lettore-barra:focus-visible{ outline:2px solid var(--acido); outline-offset:3px } .app .lettore-fatto{ position:absolute; top:0; bottom:0; left:0; width:0; background:var(--acido) } /* ⚠️ La testina si vede solo quando c'è qualcosa dietro di lei: a zero sembrerebbe un segno capitato lì per sbaglio. */ .app .lettore-testa{ position:absolute; top:-4px; bottom:-4px; width:4px; background:var(--tx); left:0; margin-left:-2px; opacity:0; transition:opacity .15s } .app .lettore[data-stato="va"] .lettore-testa,.app .lettore-barra:hover .lettore-testa{ opacity:1 } .app .lettore-t{ font-variant-numeric:tabular-nums; font-size:.85rem; font-weight:700; color:var(--tx-2); white-space:nowrap } .app .lettore-sotto{ display:flex; align-items:center; gap:9px; flex-wrap:wrap } .app .lettore-bt{ border:1px solid var(--ln); background:transparent; color:var(--tx-2); cursor:pointer; height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; } .app .lettore-bt:hover{ border-color:var(--ln-f); color:var(--tx); background:rgba(255,255,255,.03) } .app .lettore-sp{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--blu); white-space:nowrap } .app .lettore-sp-logo{ width:16px; height:16px; flex:none } .app .lettore-sp:hover{ color:var(--acido) } /* ⚠️ Senza JavaScript il lettore non funziona: allora non si mostra affatto, e al suo posto resta il link a Spotify, che è un link e basta. */ .app .lettore[hidden]{ display:none } .app .lettore-senza{ margin:0; font-size:.88rem; font-weight:600 } .app .lettore-senza a{ color:var(--blu) } .app .lettore-senza a:hover{ color:var(--acido) } /* Sul telefono il tempo non ci sta accanto alla barra: va sotto, ai due capi. */ @media (max-width:620px){ .app .lettore{ grid-template-columns:auto minmax(0,1fr); column-gap:14px; padding:14px } .app .lettore-play{ width:54px; height:54px } .app .lettore-riga{ display:grid; grid-template-columns:1fr auto; gap:4px 10px } .app .lettore-barra{ grid-column:1/-1; order:-1 } .app .lettore-t{ font-size:.8rem } .app .lettore-riga .lettore-t:last-child{ text-align:right } .app .lettore-sotto{ grid-column:1/-1; gap:7px } .app .lettore-bt{ height:32px; padding:0 10px; font-size:.75rem } /* «Su Spotify ↗» qui non ci sta (a 360px restano 51px): «Su» e il logo, nella stessa fila dei pulsanti e in fondo a destra (Marco, 28/9/26). */ .app .lettore-sp{ margin-left:auto } .app .lettore-sp-nome{ display:none } } /* ======================================================== «ASCOLTA ARTICOLO» (27/9/26) — la voce del dispositivo legge il testo. Marco: «un piccolo player sopra ai paragrafi con scritto ASCOLTA ARTICOLO». Più piccolo del lettore della puntata: è un servizio accanto al testo, non il contenuto della pagina. ⚠️ IL COLORE È IL BLU DELLE NEWS, NON IL GIALLO (Marco, 27/9/26: «dev'essere diversa altrimenti si confonde con quella della puntata»). Il giallo resta all'audio della puntata; la voce che legge un testo prende il blu della sezione che si legge (--new-n). Contrasto misurato: icona scura sul blu 9,99, barra blu sul fondo del riquadro 9,2. ⚠️ Nasce hidden: lo accende rivista.js solo se il browser ha una voce italiana (sennò resterebbe un tasto che non fa niente). ======================================================== */ .app .lettura{ background:var(--sf-2); border:1px solid var(--ln); padding:12px 16px; margin:0 0 26px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:center; } .app .lettura[hidden]{ display:none } .app .lettura-play{ width:44px; height:44px; flex-shrink:0; border:0; padding:0; cursor:pointer; background:var(--new-n); color:#0d1122; display:grid; place-items:center; transition:filter .18s, transform .18s; } .app .lettura-play:hover{ filter:brightness(1.07); transform:scale(1.03) } .app .lettura-play svg{ width:20px; height:20px; margin-left:2px } .app .lettura[data-stato="va"] .lettura-play svg{ margin-left:0 } .app .lettura-play:focus-visible,.app .lettura-vel:focus-visible,.app .lettura-barra:focus-visible{ outline:2px solid var(--new-n); outline-offset:3px } .app .lettura-dx{ min-width:0; display:grid; gap:9px } .app .lettura-su,.app .lettura-giu{ display:flex; align-items:center; gap:12px; min-width:0 } .app .lettura-eti{ font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tx); white-space:nowrap } .app .lettura-t{ font-variant-numeric:tabular-nums; font-size:.8rem; font-weight:700; color:var(--tx-2); white-space:nowrap } .app .lettura-vel{ border:1px solid var(--ln); background:transparent; color:var(--tx-2); cursor:pointer; margin-left:auto; height:28px; min-width:44px; padding:0 9px; font:inherit; font-size:.74rem; font-weight:700; font-variant-numeric:tabular-nums; } .app .lettura-vel:hover{ border-color:var(--new-n); color:var(--tx) } /* La barra è sottile, ma il dito ha bisogno di più: 8px di presa sopra e sotto. */ .app .lettura-barra{ position:relative; display:block; flex:1 1 auto; min-width:0; height:6px; background:var(--ln); cursor:pointer } .app .lettura-barra::before{ content:""; position:absolute; left:0; right:0; top:-8px; bottom:-8px } .app .lettura-barra:hover{ background:var(--ln-f) } .app .lettura-fatto{ position:absolute; top:0; bottom:0; left:0; width:0; background:var(--new-n) } @media (max-width:620px){ .app .lettura{ padding:12px 14px; column-gap:12px } .app .lettura-su,.app .lettura-giu{ gap:10px } .app .lettura-eti{ font-size:.76rem; letter-spacing:.07em } } /* i capitoli: adesso portano l'audio al minuto, e quello in corso si vede */ .app .cap[aria-current="true"],.app .indice a[aria-current="true"]{ background:rgba(217,242,74,.10); box-shadow:inset 3px 0 0 var(--acido); } .app .cap[aria-current="true"] b,.app .indice a[aria-current="true"] b{ color:var(--acido) } /* ============================================================ I CAPITOLI IN UN «APRI E CHIUDI» (9/10/26, bozza approvata: Cultura digitale/bozze/bozza-capitoli). Attaccati sotto il lettore: il capitolo in corso sempre in vista («Adesso si parla di», rivista.js lo cambia mentre suona, con un piccolo movimento), e «Tutti i capitoli» che apre e chiude l'elenco (un
: funziona anche senza JavaScript). Niente tacche sulla barra del lettore: lì ci sono già i pallini degli spot (Marco: «ci sarebbe una sovrapposizione»). ============================================================ */ /* (fra il lettore e il riquadro c'è il link a Spotify per chi non ha JavaScript, nascosto) */ .app .art-corpo .lettore:has(+ .capx), .app .art-corpo .lettore:has(+ .lettore-senza + .capx){ margin-bottom:0 } .app .capx{ border:1px solid var(--ln); border-top:0; background:var(--sf); margin:0 0 26px; interpolate-size:allow-keywords } .app .capx-ora{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; padding:16px 18px 0 } .app .capx-eti{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; color:var(--acido) } .app .capx[data-va="1"] .capx-eti::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--acido); animation:capx-batte 1.4s ease-in-out infinite } @keyframes capx-batte{ 0%, 100%{ opacity:1 } 50%{ opacity:.25 } } .app .capx-pos{ font-size:.8rem; font-weight:600; color:var(--tx-2); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap } .app .capx-riga{ grid-column:1 / -1; display:flex; align-items:baseline; gap:12px; min-width:0 } .app .capx-min{ flex:none; font-family:var(--f-dati); font-size:.95rem; font-weight:700; color:var(--acido); font-variant-numeric:tabular-nums } .app .capx-titolo{ min-width:0; font-size:1.12rem; font-weight:700; line-height:1.35; color:var(--tx) } /* quanto manca alla fine del capitolo: una lineetta larga quanto il riquadro */ .app .capx-avanza{ grid-column:1 / -1; display:block; height:3px; margin:14px -18px 0; background:var(--ln) } .app .capx-avanza i{ display:block; height:100%; width:0; background:var(--acido); transition:width .25s linear } @keyframes capx-entra{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } @keyframes capx-luce{ from{ background:rgba(233,255,79,.16) } to{ background:transparent } } .app .capx-riga.capx-nuovo, .barra-cap.capx-nuovo{ animation:capx-entra .45s cubic-bezier(.2,.7,.2,1) } .app .capx-ora.capx-luce{ animation:capx-luce 1.2s ease-out } /* apri e chiudi */ .app .capx-testa{ display:flex; align-items:center; gap:10px; padding:14px 18px; color:var(--tx); font-size:.92rem; font-weight:700; cursor:pointer; list-style:none; user-select:none } .app .capx-testa::-webkit-details-marker{ display:none } .app .capx-testa:hover{ background:var(--sf-2) } .app .capx-testa:focus-visible{ outline:2px solid var(--acido); outline-offset:-2px } .app .capx-chiudi, .app .capx-tendina[open] .capx-apri{ display:none } .app .capx-tendina[open] .capx-chiudi{ display:inline } .app .capx-n{ font-family:var(--f-dati); font-size:.8rem; font-weight:600; color:var(--tx-2) } .app .capx-freccia{ margin-left:auto; flex:none; color:var(--acido); transition:transform .3s } .app .capx-tendina[open] .capx-freccia{ transform:rotate(180deg) } /* l'elenco che scende (dove il browser sa animare l'apertura; altrove si apre di colpo) */ .app .capx-tendina::details-content{ block-size:0; overflow:hidden; transition:block-size .32s cubic-bezier(.2,.7,.2,1), content-visibility .32s allow-discrete } .app .capx-tendina[open]::details-content{ block-size:auto } .app .capx-lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ln) } .app .capx-lista li{ margin:0 } .app .capx-lista li:last-child .cap{ border-bottom:0 } /* la barra audio in basso: il capitolo accanto al numero della puntata (le sue regole stanno con la barra, più sotto) */ @media (prefers-reduced-motion:reduce){ .app .capx-freccia, .app .capx-avanza i, .app .capx-tendina::details-content{ transition:none } .app .capx-riga.capx-nuovo, .app .capx-ora.capx-luce, .barra-cap.capx-nuovo, .app .capx[data-va="1"] .capx-eti::before{ animation:none } } @media (max-width:620px){ .app .capx-ora{ padding:14px 14px 0 } .app .capx-avanza{ margin:12px -14px 0 } .app .capx-titolo{ font-size:1rem } .app .capx-testa{ padding:13px 14px } } /* il testo lungo: Montserrat chiede piu' aria fra le righe */ .app .testo{ font-size:1.06rem; line-height:1.8 } .app .testo p{ margin:0 0 20px } /* il banner della Pubblicità dentro il testo (10/10/26: tre volte, non più sotto il lettore): stesso spazio sopra e sotto, 32px dal paragrafo prima (20 del paragrafo + 12) e 32 dal paragrafo dopo. I 44px di serie dell'addon erano per i posti fuori dal testo, e sotto non c'era niente. */ .app .testo > .adv-bn{ padding-top:12px; margin:0 0 32px } .app .art-somm{ font-size:clamp(1.08rem,1.7vw,1.26rem); line-height:1.6; font-weight:400 } .app .sez-testa .descr{ line-height:1.6 } /* le schede: titoli un filo piu' piccoli, sennò Montserrat manda tutto a capo */ .app .scheda h3{ font-size:.99rem; line-height:1.34 } .app .tre-voce h3{ font-size:.97rem; line-height:1.34 } .app .tonda-voce h3{ font-size:.89rem; line-height:1.34 } .app .int-riga h3{ font-size:1rem; line-height:1.34 } .app .piu-voce h4{ font-size:.87rem; line-height:1.34 } .app .menu{ font-size:.92rem; font-weight:600; gap:28px } /* i dati restano leggibili senza maiuscolette */ .app .grande .meta,.app .scheda .sotto,.app .evid .meta,.app .tre-voce .data,.app .tonda-voce .data,.app .piu-voce .data,.app .briciole,.app .art-occhiello,.app .conta-ris{ font-size:.84rem; font-weight:500; } .app .eti{ font-size:.72rem; font-weight:600; letter-spacing:.01em } /* ================== SFUMATURE (gli angoli restano vivi) ================== */ /* un alone del blu di marchio in cima alla pagina, che si spegne scendendo */ .app{ background-image:linear-gradient(180deg, rgba(64,92,190,.20) 0%, rgba(13,17,34,0) 620px); background-repeat:no-repeat; } /* la striscia in cima e il piede: fondi sfumati invece che piatti */ .app .striscia{ background-image:linear-gradient(180deg,#151c33,#101527) } .app .piede{ background-image:linear-gradient(180deg,#121729,#0b0f1e) } /* la banda del lettore: sfumatura diagonale sul blu di marchio, filo acido sopra */ .app .banda{ background-image:linear-gradient(115deg,#151c35 0%,#27407f 55%,#1a2344 100%); border-top:2px solid var(--acido); border-bottom:0; } /* la banda dell'iscrizione e il riquadro nella spalla */ .app .iscr{ background-image:linear-gradient(115deg,#141a30,#222c52) } .app .sp-iscr{ background-image:linear-gradient(160deg,#1c2342,#141a2e) } /* il velo sulle foto: due passaggi, con una punta del blu di marchio */ .app .grande .velo,.app .embed.yt .embed-att{ background-image:linear-gradient(180deg,rgba(10,14,34,0) 26%,rgba(12,18,48,.42) 54%,rgba(9,12,30,.88) 82%,rgba(8,11,26,.96) 100%); } /* la barra di avanzamento passa dal blu all'acido */ .app .avanz i{ background-image:linear-gradient(90deg,#5b7ad6,var(--acido)) } /* i tasti acidi: una sfumatura appena percettibile, per dargli volume */ .app .campo button,.app .iscr-campo button,.app .grande .tondo,.app .evid .tondo,.app .su{ background-image:linear-gradient(180deg,#f4ff7d,#dff531); } .app .grande .tondo{ box-shadow:0 12px 44px rgba(233,255,79,.28) } /* il segno acido dei titoli di fascia sfuma verso il basso */ .app .tf h2::before,.app .tf h3::before,.app .sp-tit h3::before,.app .citazione::before{ background-image:linear-gradient(180deg,var(--acido),rgba(233,255,79,.35)); } /* al passaggio, un filo di luce sopra la foto della scheda */ .app .scheda .foto{ position:relative } .app .scheda .foto::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s; background-image:linear-gradient(180deg, rgba(233,255,79,.18), rgba(233,255,79,0) 45%); } .app .scheda:hover .foto::after{ opacity:1 } /* le etichette di sezione restano piatte: sono identita', non decorazione */ /* il video parte al clic: il poster si comporta da comando */ .app .embed.yt{ cursor:pointer } .app .embed.yt .marchio-yt{ transition:transform .25s } .app .embed.yt:hover .marchio-yt,.app .embed.yt:focus-visible .marchio-yt{ transform:scale(1.08) } .app .embed.yt .embed-att b{ font-size:1.05rem } .app .embed.yt .embed-att{ gap:14px } /* il poster del video: foto sotto, velo in mezzo, comando sopra */ .app .embed.yt .embed-att{ background-image:none; position:absolute; inset:0 } .app .embed.yt .embed-att img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; margin:0; } .app .embed.yt .embed-att::before{ content:''; position:absolute; inset:0; z-index:1; background-image:linear-gradient(180deg, rgba(10,14,34,.28) 0%, rgba(9,12,30,.55) 60%, rgba(8,11,26,.8) 100%); } .app .embed.yt .embed-att > *:not(img){ position:relative; z-index:2 } .app .embed.yt .embed-att b{ color:#fff } .app .embed.yt .embed-att span{ color:#dfe5f7 } /* ⚠️ IL VIDEO FERMO FINO AL CONSENSO (20/10/26, il Privacy compito 2: il blocco di Scudo fatto dalla piattaforma). Sopra la copertina, al posto del tasto rosso e di «Guarda su YouTube», il riquadro del core (addi_riquadro_consenso, base-pubblico.css) coi colori del sito: il velo della copertina, il testo chiaro, il tasto acido come gli altri. Chi ha già dato il consenso non lo vede (html.addi-ok-marketing) e il video è quello di prima. Nel testo il riquadro copre lo schermo, non la didascalia. */ .app .addi-fermo{ gap:14px; padding:22px 26px; font-family:var(--f-ui); background:linear-gradient(180deg, rgba(10,14,34,.62) 0%, rgba(9,12,30,.8) 55%, rgba(8,11,26,.93) 100%) } /* dentro il testo dell'articolo valgono le regole di .testo p e .testo a: qui un livello in più, così vince il riquadro */ .app .addi-fermo .addi-fermo-tx,.app .addi-fermo .addi-fermo-az{ margin:0 } .app .addi-fermo .addi-fermo-tx{ max-width:30em; font-size:.95rem; line-height:1.5; color:var(--tx) } .app .addi-fermo .addi-fermo-bt{ min-height:46px; padding:0 22px; border-radius:0; color:var(--sf); font:700 .95rem/1 var(--f-ui); background:var(--acido); background-image:linear-gradient(180deg,#f4ff7d,#dff531) } .app .addi-fermo .addi-fermo-bt:hover{ background-image:none; background:#f4ff7d } .app .addi-fermo .addi-fermo-bt:focus-visible,.app .addi-fermo .addi-fermo-fuori:focus-visible{ outline:2px solid var(--acido); outline-offset:3px } .app .addi-fermo .addi-fermo-fuori,.app .addi-fermo .addi-fermo-fuori:hover{ color:var(--tx); font-size:.88rem; text-decoration:underline; text-underline-offset:3px } html:not(.addi-ok-marketing) .app [data-addi-consenso="marketing"] .marchio-yt, html:not(.addi-ok-marketing) .app [data-addi-consenso="marketing"] .embed-att > span:not(.marchio-yt), html:not(.addi-ok-marketing) .app [data-addi-consenso="marketing"] .video-play, html:not(.addi-ok-marketing) .app [data-addi-consenso="marketing"] .video-dati{ visibility:hidden } html:not(.addi-ok-marketing) .app .embed.yt[data-addi-consenso="marketing"]{ cursor:default } .app .testo .video[data-addi-consenso]{ position:relative } .app .testo .video > .addi-fermo{ inset:auto; top:0; left:0; right:0; aspect-ratio:16/9 } @media (max-width:520px){ .app .addi-fermo{ gap:10px; padding:12px 16px } .app .addi-fermo .addi-fermo-tx{ font-size:.84rem; line-height:1.42 } .app .addi-fermo .addi-fermo-bt{ min-height:40px; padding:0 16px; font-size:.86rem } .app .addi-fermo .addi-fermo-fuori,.app .addi-fermo .addi-fermo-fuori:hover{ font-size:.82rem } } /* ================== la fascia dell'ultima puntata: un modulo d'ascolto, non un banner ================== */ .app .banda{ border-top:2px solid var(--acido); border-bottom:1px solid var(--ln) } .app .banda-in{ /* ⚠️ 300 E NON 232: la copertina è quadrata e adesso è alta quanto tutta la fascia (circa 300px), quindi una colonna più stretta la costringe a ritagliarsi i fianchi — e su queste copertine ai fianchi ci stanno la scritta «RADIO EDITION» a sinistra e il microfono a destra. Misurato il 20/9/26: a 232 tagliava 69px, a 300 ne taglia 1. Il ritaglio resta acceso lo stesso, perché con un titolo più lungo la fascia cresce e l'immagine deve comunque riempire, non lasciare un buco. */ display:grid; grid-template-columns:300px minmax(0,1fr); grid-template-areas:"cop testo" "cop lettore"; column-gap:36px; row-gap:18px; padding-block:34px; align-items:start; } /* ⚠️ LA COPERTINA VA DA CIMA A FONDO. La griglia è `align-items:start`, e con quello ogni pezzo resta alto quanto il suo contenuto: la copertina è quadrata, la colonna accanto è più alta, e sotto l'immagine restava un buco. Lo `stretch` sta SOLO su questo pezzo, non sul contenitore: messo lì tirerebbe anche il testo e il lettore, che devono restare in cima. La foto è quadrata e il posto no, quindi si ritaglia (`cover`): il soggetto di queste copertine sta al centro. */ .app .banda-cop{ grid-area:cop; align-self:stretch; display:block; min-height:0; border:1px solid rgba(255,255,255,.14); overflow:hidden } .app .banda-cop img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1) } .app .banda-cop:hover img{ transform:scale(1.04) } .app .banda-testo{ grid-area:testo; min-width:0 } .app .banda-occhiello{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.86rem; font-weight:500; color:var(--tx-2); margin-bottom:12px } .app .banda-testo h3{ font-size:clamp(1.25rem,2.3vw,1.85rem); line-height:1.15; letter-spacing:-.032em; font-weight:700; margin:0 0 10px } .app .banda-testo h3 a:hover{ color:var(--acido) } .app .banda-meta{ margin:0; font-size:.92rem; font-weight:500; color:var(--tx-2) } .app .banda-lettore{ grid-area:lettore; min-width:0; display:grid; gap:14px } .app .banda-lettore .embed.sp{ height:80px; border:1px solid rgba(255,255,255,.12); background:#121728 } .app .banda-lettore .embed.sp .embed-att{ padding:10px 16px } .app .banda-lettore .embed.sp .marchio-sp{ width:36px; height:36px } /* ⚠️ I PULSANTI PICCOLI, UNA REGOLA SOLA (Marco, 27/9/26: «come il pulsante Ascolta l'ultima puntata… più piccoli», poi «voglio tutti i pulsanti così… anche 40 in archivio»). Hanno il vestito di .bv-bt in piccolo: i rimandi in cima alle sezioni («Tutte le 96 →», «40 in archivio →») e i due sotto l'ultima puntata. Stanno insieme apposta: scritti due volte si separano. Il contorno è giallo (--acido), anche su .bv-bt (Marco: «il contorno con il bordo con il giallo di Cultura»); col mouse sopra bianco con la scritta blu. Sotto gli 820px i due dell'ultima puntata stanno affiancati e insieme prendono tutta la riga; senza video il pulsante rimasto la prende da solo (colonne automatiche, non due fisse). */ .app .banda-azioni{ display:flex; gap:12px; flex-wrap:wrap } .app .banda-azioni a,.app .tf .tutti,.app .fl-apri{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border:1px solid var(--acido); color:var(--tx); font-size:.8rem; font-weight:700; line-height:1.55; white-space:nowrap; text-decoration:none; transition:background .15s,color .15s } .app .banda-azioni a:hover,.app .tf .tutti:hover,.app .fl-apri:hover{ background:#fff; color:var(--blu-fondo); border-color:#fff } .app .banda-azioni svg{ width:14px; height:14px; flex:none } @media (max-width:820px){ .app .banda-in{ grid-template-columns:104px minmax(0,1fr); grid-template-areas:"cop testo" "lettore lettore"; column-gap:16px; row-gap:16px; padding-block:24px; } /* ⚠️ SUL TELEFONO LA COPERTINA TORNA QUADRATA. Qui la colonna è larga 104px e il testo accanto ne è alto 166: tirandola si ritagliava il 19% per lato, e la scritta «RADIO EDITION» diventava «EDITION». A 390px una miniatura è una miniatura, in cima accanto al titolo, e si vede tutta. */ .app .banda-cop{ align-self:start; aspect-ratio:1 } .app .banda-testo h3{ font-size:1.12rem } .app .banda-occhiello{ margin-bottom:8px; font-size:.8rem } .app .banda-meta{ font-size:.84rem } .app .banda-azioni{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px } .app .banda-azioni a{ padding-inline:10px } } /* ⚠️ SUL TELEFONO LA COPERTINA VA SOPRA, non di fianco (Marco, 20/9/26). Di fianco era già in cima — misurato, 0px di scarto dal titolo — ma a 104px è una francobollo, e sotto le restava una colonna vuota mentre il testo andava avanti da solo. Sopra, a tutta larghezza e quadrata, è la copertina della puntata e si vede per quello che è. ⚠️ LA SOGLIA È 620px, non 480. Il ramo del telefono arriva fino a 820, e lì un quadrato a tutta larghezza sarebbe alto 764px: una schermata intera di foto prima del titolo. Ma 480 era troppo poco: una finestra stretta a mano — Marco prova così — sta spesso sui 500-520, e lì si rivedeva la miniatura da 104px. 620 è la stessa soglia che il foglio usa già altrove, e il quadrato ci sta alto al massimo 564. Da 621 a 820 resta di fianco. */ @media (max-width:620px){ .app .banda-in{ grid-template-columns:minmax(0,1fr); grid-template-areas:"cop" "testo" "lettore"; row-gap:16px; } .app .banda-cop{ align-self:start; aspect-ratio:1 } } /* il modulo dell'ultima puntata: fondo pieno, niente sfumatura */ .app .banda{ background-image:none; background-color:var(--sf-3) } /* il modulo dell'ultima puntata: nessuna linea, si separa col colore */ .app .banda{ border-top:0; border-bottom:0 } /* ===================== le pagine aggiunte ===================== Sezioni composte, scheda di una voce che si legge, firme, ricerca, chi siamo, scrivici, privacy, pagina non trovata. */ /* il riquadro dei dati: sta dove nelle puntate c'e' il lettore */ .app .dett{ border:1px solid var(--ln); background:var(--sf-2); margin:26px 0 4px } .app .dett-testa{ padding:14px 20px; border-bottom:1px solid var(--ln) } .app .dett-testa h3{ font-size:1rem; font-weight:800 } .app .dett-riga{ display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:18px; padding:12px 20px; border-bottom:1px solid var(--ln); align-items:center } .app .dett-riga:last-child{ border-bottom:0 } .app .dett-riga span{ font-family:var(--f-dati); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2) } .app .dett-riga b{ font-size:.97rem; font-weight:600; color:var(--tx) } @media (max-width:480px){ .app .dett-riga{ grid-template-columns:1fr; gap:4px } } .app .spalla .dett-riga{ grid-template-columns:minmax(0,88px) minmax(0,1fr); gap:12px; padding:11px 16px } .app .spalla .dett-riga b{ font-size:.92rem } /* il giudizio: cinque quadratini, niente stelline */ .app .voti{ display:inline-flex; gap:5px } .app .voti i{ width:16px; height:16px; border:1px solid var(--ln-f); display:block } .app .voti i.on{ background:var(--acido); border-color:var(--acido) } /* le firme */ .app .faccia.gr{ width:84px; height:84px; font-size:1.5rem } .app .fir-griglia{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px } @media (max-width:820px){ .app .fir-griglia{ grid-template-columns:1fr } } .app .fir-voce{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; border:1px solid var(--ln); background:var(--sf-2); padding:18px 20px; transition:border-color .15s } .app .fir-voce:hover{ border-color:var(--acido) } .app .fir-corpo{ display:grid; gap:4px; min-width:0 } .app .fir-corpo b{ font-family:var(--f-tit); font-size:1.12rem; font-weight:700; letter-spacing:-.02em } .app .fir-voce:hover .fir-corpo b{ color:var(--acido) } .app .fir-corpo .ruolo{ font-size:.95rem; color:var(--tx-2) } .app .fir-corpo .quanti{ font-family:var(--f-dati); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-2) } .app .fir-testa{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:start; padding-block:26px 30px; border-bottom:1px solid var(--ln) } .app .fir-testa h1{ font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800; letter-spacing:-.035em; line-height:1; margin:12px 0 14px } /* .fir-numeri NON C'È PIÙ: erano due cifre grandi sotto la biografia, e facevano a pugni con la faccia accanto. I numeri di una firma stanno nella riga sopra la griglia, come su ogni altro elenco (Marco, 20/9/26). */ @media (max-width:480px){ .app .fir-testa{ grid-template-columns:1fr; gap:16px } .app .faccia.gr{ width:64px; height:64px; font-size:1.2rem } } /* la ricerca */ .app .cercona{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid var(--ln-f); background:var(--sf-2); padding:8px 8px 8px 18px; margin-top:28px } .app .cercona .ico{ width:20px; height:20px; color:var(--tx-2); flex-shrink:0 } .app .cercona input{ border:0; background:transparent; color:var(--tx); font:inherit; font-size:1.05rem; padding:14px 0; min-width:0; width:100% } .app .cercona input::placeholder{ color:var(--tx-2) } .app .cercona input:focus{ outline:none } .app .cercona:focus-within{ border-color:var(--acido) } .app .cercona button{ background:var(--acido); color:#101733; border:0; padding:14px 26px; font-size:.9rem; font-weight:700; cursor:pointer } @media (max-width:480px){ .app .cercona{ grid-template-columns:auto minmax(0,1fr); padding:6px 6px 6px 14px; row-gap:0 } .app .cercona button{ grid-column:1 / -1; padding:13px } .app .cercona input{ font-size:1rem; padding:12px 0 } } /* chi siamo, scrivici, privacy: stessa impalcatura della scheda */ .app .chi-in{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; padding-block:34px 44px; align-items:start } @media (max-width:980px){ .app .chi-in{ grid-template-columns:1fr; gap:34px } } .app .modulo{ display:grid; gap:9px; max-width:620px } .app .modulo label{ font-family:var(--f-dati); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2); margin-top:12px } .app .modulo input,.app .modulo select,.app .modulo textarea{ border:1px solid var(--ln); background:var(--sf-2); color:var(--tx); font:inherit; font-size:.97rem; padding:13px 15px; width:100% } .app .modulo input:focus,.app .modulo select:focus,.app .modulo textarea:focus{ outline:none; border-color:var(--acido) } .app .modulo textarea{ resize:vertical } .app .modulo button{ justify-self:start; margin-top:20px; background:var(--acido); color:#101733; border:0; padding:15px 34px; font-size:.92rem; font-weight:700; cursor:pointer } .app .modulo .nota{ font-family:var(--f-serif); font-size:.94rem; color:var(--tx-2); margin:14px 0 0 } .app .due-campi{ display:grid; grid-template-columns:1fr 1fr; gap:18px } .app .due-campi span{ display:grid; gap:9px } .app .due-campi label{ margin-top:0 } @media (max-width:480px){ .app .due-campi{ grid-template-columns:1fr; gap:9px } } /* la voce in evidenza obbedisce anche lei ai filtri: display:grid batte hidden */ .app .evid[hidden]{ display:none } /* sul telefono un titolo di fascia lungo va a capo invece di spingere fuori */ @media (max-width:480px){ .app .tf h2,.app .tf h3{ white-space:normal } } /* la pagina che non c'e' */ .app .nulla{ padding-block:70px 60px; text-align:center } .app .nulla h1{ font-size:clamp(2.1rem,6vw,3.6rem); font-weight:800; letter-spacing:-.035em; line-height:1; margin:18px 0 16px } .app .nulla .descr{ font-family:var(--f-serif); font-size:1.12rem; color:var(--tx-2); margin:0 auto; max-width:540px } .app .nulla-tasti{ display:flex; gap:11px; flex-wrap:wrap; justify-content:center; padding-block:28px 0 } .app .nulla-tasti .chip{ text-decoration:none } .app .nulla .tf{ text-align:left } .app .nulla .griglia3{ text-align:left } @media (max-width:480px){ .app .nulla{ padding-block:46px 40px } } /* ===================== i filtri e le pagine sono LINK, non bottoni (20/9/26) ===================== Sul sito vero le voci sono 96 divise in pagine: filtrare vuol dire richiedere, quindi ogni filtro è un indirizzo. Il vestito però è quello che la bozza aveva dato ai bottoni. */ .app a.chip{display:inline-flex; align-items:center; text-decoration:none} .app .pagine a,.app .pagine span{min-width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--ln); font-size:.82rem; padding-inline:12px; text-decoration:none} .app .pagine a:hover{border-color:var(--acido); color:var(--acido)} .app .pagine .on{background:var(--acido); color:#101733; border-color:var(--acido); font-weight:700} .app .pagine .salto{border:0; min-width:0; padding-inline:2px} /* Il numero di questa pagina e «di 2» sono scritte, non link: niente manina, niente bianco al passaggio del mouse (5/10, Marco: «è come se fosse linkata»). Il bianco vale solo per gli . */ .app .pagine span{cursor:default} /* i capitoli sono link veri (hanno un indirizzo: si mandano a qualcuno) */ .app a.cap{text-decoration:none} /* il testo che arriva da WordPress: le immagini dentro l'articolo non sfondano */ .app .testo img{max-width:100%; height:auto; margin:22px 0} .app .testo figure{margin:22px 0} .app .testo figcaption{font-size:.88rem; color:var(--tx-2); margin-top:8px} .app .testo a{color:var(--blu); text-decoration:underline; text-underline-offset:3px} .app .testo a:hover{color:var(--acido)} .app .testo ul,.app .testo ol{margin:0 0 20px; padding-left:22px} .app .testo li{margin-bottom:8px} .app .testo h3{font-size:1.2rem; font-weight:700; margin:30px 0 12px} .app .testo iframe{max-width:100%} /* ⚠️ LA COLONNA DI DESTRA NON DEVE RESTARE VUOTA. Il 20/9/26 l'indice dei capitoli è uscito da lì (stava scritto due volte), e quella colonna è rimasta con dentro solo il riquadro dell'iscrizione: mezzo schermo bianco per tutta la lunghezza dell'articolo. Adesso ci stanno anche le etichette del pezzo, e il tutto segue chi legge invece di finire dopo tre righe. Il CORPO resta nella sua colonna: lì la riga corta serve a leggere, ed è la sola larghezza che non si allarga. */ .app .spalla{ position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px); overflow:auto; scrollbar-width:none } /* ⚠️ …MA SOLO NELL'ARTICOLO (25/9/26). La regola qui sopra finiva anche sulla spalla della prima pagina (Dove ci trovi, Da leggere, iscrizione), che scorreva dentro sé stessa. Marco: «non deve scrollare, non ha senso». */ .app[data-pagina="home"] .spalla{ position:static; max-height:none; overflow:visible } .app .spalla::-webkit-scrollbar{ display:none } .app .spalla .sp-tag{ border-top:1px solid var(--ln); padding-top:18px } .app .spalla .sp-tag .tagbox{ border-top:0; margin-top:0; padding-block:0 } @media (max-width:980px){ .app .spalla{ position:static; max-height:none } } /* ⚠️ NIENTE LARGHEZZA MASSIMA SUI TESTI DI TESTATA. Il sommario di un articolo e la descrizione di una sezione si fermavano a 820 e 760 pixel: su uno schermo largo il titolo arrivava in fondo e il sommario si fermava a due terzi, lasciando mezza riga vuota. È una regola fissa di Marco, e vale per ogni testo che descrive: prende tutta la sezione. Il CORPO dell'articolo resta nella sua colonna — lì la riga corta serve a leggere. */ /* ===================== il testo che arriva da WordPress ===================== ⚠️ QUELLO CHE NON SI VESTE SI VEDE LO STESSO, MA SBAGLIATO. Il corpo degli articoli è HTML scritto in dieci anni di redazione: dentro ci sono blocchi preformattati, citazioni, tabelle, righe orizzontali e titoli di quarto livello. Senza una regola prendono quella del browser — carattere di sistema, monospazio, margini a caso — e in mezzo a questa pagina stonano. Il caso peggiore visto (20/9/26): un riquadro «preformattato» che NON va a capo e sfora di lato per mezzo schermo. */ .app .testo{ overflow-wrap:anywhere } .app .testo h4{ font-size:1.04rem; font-weight:700; margin:26px 0 10px; letter-spacing:-.02em } .app .testo hr{ border:0; border-top:1px solid var(--ln); margin:32px 0 } .app .testo em{ font-style:italic } /* Un blocco «preformattato» nella redazione non è codice: è un richiamo, un riquadro che dice «senti anche questo». Quindi va a capo come un testo. */ .app .testo pre{ font:inherit; white-space:normal; margin:26px 0; padding:18px 20px 18px 54px; background:var(--sf-2); border-left:3px solid var(--acido); color:var(--tx); font-size:1rem; line-height:1.66; position:relative; } /* ⚠️ L'ICONA LA METTE IL TEMA, NON IL TESTO. Nel testo importato il richiamo comincia con una lampadina scritta come emoji (💡): è un disegno a colori, deciso da chi ha fatto il carattere del sistema operativo, e su un magazine scuro e monocromatico stona — Marco, 21/9/26: «gradirei avere delle icone monocolore, non emoticon». Adesso l'emoji si toglie dal testo (bin/pulisci) e il segno lo mette il vestito: uno solo, dello stesso giallo del bordo, e ce l'hanno tutti i richiami — quelli vecchi e quelli che si scrivono adesso dal pannello, senza che nessuno debba ricordarsi di metterlo. Si disegna con una maschera, non con un'immagine: così il colore lo decide il token, e segue il tema se un giorno cambia. */ .app .testo pre::before{ content:''; position:absolute; left:19px; top:21px; width:21px; height:21px; background:var(--acido); -webkit-mask:var(--ico-lampadina) center/contain no-repeat; mask:var(--ico-lampadina) center/contain no-repeat; } .app .testo pre a{ color:var(--blu) } .app .testo code{ font-family:var(--f-dati); font-size:.92em; background:var(--sf-2); padding:2px 6px } .app .testo pre code{ background:none; padding:0 } .app .testo blockquote{ margin:28px 0; padding:4px 0 4px 22px; border-left:3px solid var(--acido); font-size:1.12rem; line-height:1.55; font-weight:600; letter-spacing:-.01em; } .app .testo blockquote p:last-child{ margin-bottom:0 } /* Una tabella non deve mai allargare la pagina: se non ci sta, scorre lei. */ .app .testo table{ width:100%; border-collapse:collapse; margin:26px 0; font-size:.95rem; display:block; overflow-x:auto } .app .testo th,.app .testo td{ border:1px solid var(--ln); padding:9px 12px; text-align:left; vertical-align:top } .app .testo th{ font-weight:700; background:var(--sf-2) } /* ===================== LE PAROLE CHIAVE IN GIALLO ===================== ⚠️ QUALI SONO LE PAROLE CHIAVE NON LO DECIDIAMO NOI: sono quelle che chi ha scritto l'articolo ha già messo in grassetto. Sono 6.388 in 132 articoli, circa 39 per pezzo, e guardandole una per una sono davvero i concetti — «dispositivo personale audio-first», «ecosistema di contenuti autorevoli». Le etichette dell'articolo NON servono a questo: sono categorie («business», «marketing»), e illuminarle darebbe rumore invece che senso. Misurato il 20/9/26. ⚠️ DUE ECCEZIONI, perché non tutto il grassetto è una parola chiave: · un paragrafo fatto SOLO di grassetto è un titolo travestito («ASCOLTA LA PUNTATA»), e un titolo non si evidenzia; · il grassetto dentro i titoli veri resta com'è. ⚠️ SCRITTA COLORATA, NON EVIDENZIATA. Per mezza giornata è stata una passata di evidenziatore sotto la riga: bocciata da Marco il 20/9/26, la linea sotto dà fastidio a leggere. Adesso è la parola a essere gialla. Il colore ha un token suo (--chiave) e NON è --acido: quello è il giallo dei pulsanti e delle etichette, e i due mestieri devono poter cambiare separatamente senza che uno si porti dietro l'altro. */ .app .testo p strong,.app .testo li strong, .app .testo p strong a,.app .testo li strong a{ color:var(--chiave) } .app .testo p > strong:only-child, .app .testo h2 strong,.app .testo h3 strong,.app .testo h4 strong{ color:inherit } /* ===================== titoli lunghi (20/9/26: i titoli veri arrivano a 277 caratteri) ===================== Le schede tagliano il titolo a tre righe, l'apertura grande a quattro: la riga in più si legge nella scheda. */ .app .tonda-voce h3,.app .tre-voce h3,.app .scheda h3,.app .int-riga h3,.app .piu-voce h4{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .app .grande h2,.app .evid h2{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden} /* ===================== LA RICERCA DEL CORE, VESTITA DA QUI ===================== ⚠️ IL PANNELLO NON È DI QUESTO TEMA. Markup, copione e foglio stanno nel core (partials/search-panel.php, assets/js/ricerca.js, assets/css/ricerca.css) e sono gli stessi su tutti i siti addiplatform: non si toccano, sennò si veste un sito e si spoglia un altro. Qui si dice soltanto come si vede sul sito della rivista, e la gran parte si dice con i TOKEN, perché quel foglio i colori non li scrive: li chiede. ⚠️ QUESTO PEZZO NON SI VEDE NELLA BOZZA: il pannello lo stampa il core, e sito.html non ce l'ha. Si guarda sul sito vero, aprendo la lente. La mappa: a sinistra i nomi che usa il core, a destra i colori di qui. */ body.cd .search-panel{ --bg:var(--sf); /* il fondo del pannello */ --white:var(--sf-2); /* le schede appoggiate sopra */ --text:var(--tx); --muted:var(--tx-2); --border:var(--ln); --red:var(--acido); /* il colore che segna: qui è l'acido, non il rosso */ --font-mono:var(--f-dati); --font-display:var(--f-tit); border-right:1px solid var(--ln); box-shadow:none; } /* Gli angoli: il core li fa tondi, questo sito è squadrato dappertutto. */ body.cd .search-panel-field, body.cd .search-panel-top .modal-close, body.cd .search-panel-mic, body.cd .search-panel-clear, body.cd .search-tipo, body.cd .search-row, body.cd .search-row-logo, body.cd .search-row-swatch, body.cd .search-panel-loadmore{ border-radius:0 } /* LA × DEL PANNELLO COL MOUSE SOPRA: GIALLA CON LA × BLU SCURO (Marco, 29/9/26: «dev'essere Giallo con X blu scuro»). Il core la faceva del colore del testo, che qui è quasi bianco, e Bento la tiene al 60% di opacità: usciva grigia. Piena, e uguale con la tastiera. */ @media (hover:hover){ body.cd .search-panel-top .modal-close:hover{ background:var(--acido); color:var(--sf); opacity:1 } } body.cd .search-panel-top .modal-close:focus-visible{ background:var(--acido); color:var(--sf); opacity:1 } /* ⚠️ SU FONDO SCURO UN'OMBRA NON SI VEDE. Il core stacca le schede dal fondo con `box-shadow` su un grigio chiarissimo: qui non dipinge niente, e le righe si impastano col pannello. Le stacca un bordo. */ body.cd .search-panel-field, body.cd .search-row, body.cd .search-tipo{ border:1px solid var(--ln); box-shadow:none } body.cd .search-row:hover{ border-color:var(--acido); box-shadow:none; transform:none } body.cd .search-row-logo{ border:1px solid var(--ln) } /* Il campo: l'anello del fuoco prende l'acido, come ogni altro campo del sito. ⚠️ UN ANELLO SOLO. Il tema disegna il contorno del fuoco su ogni campo, e il core lo disegna sul riquadro che lo contiene: insieme facevano due cornici gialle una dentro l'altra. Il comando qui è il riquadro, non l'inputino. */ body.cd .search-panel-field:focus-within{ box-shadow:0 0 0 2px var(--acido) } body.cd .search-panel-field input:focus-visible{ outline:none } /* Il nome della sorgente («Archivio») nello stesso maiuscoletto spaziato delle altre teste di fascia, e la parola cercata segnata col giallo delle chiavi. */ body.cd .search-group-head{ color:var(--tx-2) } body.cd .search-row-name mark{ color:var(--chiave) } /* L'etichetta a destra è un numero di episodio o una durata: non è un prezzo. */ body.cd .search-row-code{ font-family:var(--f-dati); letter-spacing:.06em } /* I suggerimenti a campo vuoto: le parole si vestono come il riquadro «Di cosa parla» in fondo a un articolo (.tagbox) — squadrate, col bordo, niente fondo. È il modo in cui questo sito scrive una parola cliccabile: se qui fossero pillole piene sembrerebbero un altro sito. */ body.cd .search-sugg-parole a{ border:1px solid var(--ln); border-radius:0; background:transparent; padding:9px 16px; font-size:.82rem; font-weight:500; color:var(--tx-2); box-shadow:none; transition:background .15s, color .15s, border-color .15s; } body.cd .search-sugg-parole a:hover{ background:var(--chiave); color:var(--sf); border-color:var(--chiave) } /* Il numero accanto alla parola: quanti pezzi ci sono dietro. */ body.cd .search-sugg-parole .n{ color:var(--ln-f); font-family:var(--f-dati); font-size:.75rem; margin-left:5px } /* (12px: sotto non si legge; segnalato dal banco della ricerca, 12/10/26) */ /* Il numero, sul giallo, si scurisce ma resta più tenue della parola. */ body.cd .search-sugg-parole a:hover .n{ color:var(--sf); opacity:.65 } /* ============================================================ LA FASCIA IN BASSO — il lettore che ti segue e il menu a schede ============================================================ Due strisce incollate al fondo: il lettore (sempre) e, sotto i 980px, il menu a schede. L'altezza di ciascuna sta in un token, perché serve a tre posti diversi: lo spazio da lasciare in fondo alla pagina, quanto si alza «torna su», e dove si ferma il menu «Altro» quando si apre. ⚠️ QUI C'È SOLO IL VESTITO. Il markup e il copione di questa fascia vivono nel tema (themes/cultura/partials/footer.php e rivista.js) e non in questa bozza: il lettore deve sapere qual è l'ultima puntata e portarsi dietro il minuto da una pagina all'altra, e questa bozza è un finto sito con un archivio di prova. Il foglio invece resta qui perché è da qui che costruisci-tema.py lo ricopia: una regola scritta direttamente nel tema la prima rigenerazione se la mangia. ⚠️ I TOKEN STANNO SU :root, NON SU .app. Quelli dichiarati su .app li sposta su :root il generatore del tema (costruisci-tema.py), e lì una @media non può più cambiarli: l'altezza resterebbe quella del telefono anche sul desktop. Questi invece sono scritti su :root apposta, e le @media li riscrivono. ⚠️ --aud-h VALE ZERO FINCHÉ LA BARRA NON C'È. La classe la mette il copione quando la accende davvero: senza JavaScript, o su un sito senza puntate con audio, la pagina non deve lasciare in fondo un buco per una barra che non esiste. */ /* Mentre la pagina nuova arriva si capisce che il clic è stato preso. Niente giranti: se la risposta è svelta non si vede niente, ed è giusto così. ⚠️ NIENTE PIÙ FONDINO (5/10/26, Marco dall'iPhone: «quando cambio sezione esce il fondino»). Prima la pagina vecchia si sbiadiva a .45: al telefono la nuova arriva quasi sempre dopo i 140ms, e il contenuto sbiadito sul blu sembrava un velo. Ora il contenuto resta com'è e sotto la testata scorre una lineetta acida, larga quanto la testata (niente che sbordi di lato). */ .app[data-carica="1"] .testa::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; background:linear-gradient(90deg, transparent 0, transparent 30%, var(--acido) 50%, transparent 70%, transparent 100%); background-size:250% 100%; animation:salto-carica 1.1s linear infinite } @keyframes salto-carica{ from{ background-position:100% 0 } to{ background-position:0 0 } } @media (prefers-reduced-motion:reduce){ .app[data-carica="1"] .testa::after{ animation:none; background:var(--acido) } } /* La lampadina del riquadro di richiamo, disegnata una volta e usata come maschera: il colore lo dà chi la usa, così resta monocolore e segue il tema. */ :root{ --ico-lampadina:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 2.8a6.2 6.2 0 0 0-3.7 11.2c.6.45.95 1.1 1.05 1.8h5.3c.1-.7.45-1.35 1.05-1.8A6.2 6.2 0 0 0 12 2.8Z'/%3E%3C/svg%3E") } /* ============================================================ LA BARRA IN BASSO, «TEMPO E PUNTI» (11/10/26, bozza B approvata: Cultura digitale/bozze/bozza-lettore) Marco: «qualche pixel più alto e con uno stile diverso… il volume… quanto vale a livello di punti l'ascolto». Poi, scelta la B: «i minuti della puntata e l'icona del volume le voglio giallo cultura», «di 21:33 bianco», «su mobile il titolo della puntata deve scorrere, si deve leggere tutto» (chi ha chiesto meno animazioni lo vede fermo, coi puntini). Alta 84 al computer (era 74), 68 al telefono (era 62). La linea del tempo corre su tutto il bordo alto: la zona da toccare è alta 16 (14 al telefono), la riga dentro 4 (6 passandoci sopra). Due contatori grandi: i minuti (gialli) e i CultXP (ciano, li scrive l'addon Punti nel posto [data-b-pt]). A destra ±15, la velocità, il volume. ============================================================ */ :root{ --aud-h:0px; --tab-h:0px; --sicuro:env(safe-area-inset-bottom,0px) } body.ha-barra{ --aud-h:84px } .app{ padding-bottom:calc(var(--tab-h) + var(--aud-h) + var(--sicuro)) } /* ⚠️ LE DUE BARRE IN BASSO SI VESTONO ANCHE FUORI DA .app (14/10/26, Marco: «quando parte la skin mi esce il titolo della puntata di quel colore»). Mentre la skin a L stringe il sito, la pubblicità (addon ADV) porta .barra-audio e .tabbar nel , fuori da .app, perché restino ferme in fondo allo schermo. Lì le regole scritte «dentro .app» non valgono: il titolo tornava un link del browser (blu o viola, sottolineato, 16px non grassetto, su tre righe) e la copertina un'immagine di 1080px tagliata nel quadrato. Le barre si portano dietro la base di .app che usano (carattere, interlinea, link, immagini, pulsanti, con lo stesso peso) e le loro regole non cominciano con .app: uguali dentro e fuori. ⚠️ I pulsanti prendono il carattere della barra come dentro .app (16px, quello della bozza approvata): `font:inherit` pesa quanto «.app button» e batte la misura scritta in .barra-sec. Controllo: ops/collaudo/collaudo-adv-sito.py, «le barre fisse uguali durante la L». */ .barra-audio, .tabbar{ color:var(--tx); font-family:var(--f-ui); font-size:16px; line-height:1.55; font-feature-settings:'tnum' 1 } .barra-audio, .barra-audio *, .tabbar, .tabbar *{ box-sizing:border-box } :is(.barra-audio, .tabbar) a{ color:inherit; text-decoration:none } :is(.barra-audio, .tabbar) img{ display:block; width:100%; height:auto } :is(.barra-audio, .tabbar) button{ font:inherit } .tabbar :focus-visible{ outline:3px solid var(--acido); outline-offset:2px } .barra-audio{ position:fixed; left:0; right:0; bottom:calc(var(--tab-h) + var(--sicuro)); z-index:56; display:grid; grid-template-columns:52px 52px minmax(0,1fr) auto auto; align-items:center; gap:16px; height:var(--aud-h); padding:0 clamp(16px,2.4vw,32px); background:var(--sf-2); border-top:1px solid var(--ln); box-shadow:0 -8px 28px rgba(0,0,0,.34); color:var(--tx); -webkit-tap-highlight-color:transparent; } /* ⚠️ `display:grid` batte l'attributo `hidden`, che vale solo finché nessuno dichiara un display: senza questa riga la barra si vedrebbe anche spenta. */ .barra-audio[hidden]{ display:none } .barra-audio :focus-visible{ outline:2px solid var(--acido); outline-offset:2px } /* i pulsanti della barra partono da zero, a peso zero: le regole dei pezzi qui sotto vincono senza !important */ :where(.barra-audio) button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer } /* la linea del tempo, sul bordo alto */ .barra-lin{ position:absolute; left:0; right:0; top:-8px; height:16px; cursor:pointer; touch-action:none } .barra-lin::before, .barra-fatto{ content:''; position:absolute; left:0; top:50%; height:4px; margin-top:-2px; transition:height .12s, margin .12s } .barra-lin::before{ right:0; background:var(--ln-f) } .barra-fatto{ width:0; background:var(--acido) } .barra-testa{ position:absolute; top:50%; left:0; width:12px; height:12px; margin:-6px 0 0 -6px; background:var(--acido); opacity:0; transition:opacity .12s } .barra-lin:hover::before, .barra-lin:hover .barra-fatto{ height:6px; margin-top:-3px } .barra-audio[data-stato="va"] .barra-testa, .barra-lin:hover .barra-testa, .barra-lin:focus-visible .barra-testa{ opacity:1 } .barra-play{ width:52px; height:52px; display:grid; place-items:center; background:var(--acido); color:#101733; transition:filter .15s } .barra-play:hover{ filter:brightness(1.08) } .barra-cop{ width:52px; height:52px; display:block; overflow:hidden; background:var(--sf-3) } .barra-audio .barra-cop img{ width:100%; height:100%; object-fit:cover; display:block } /* il titolo e, sotto, il numero della puntata col capitolo in corso */ .barra-testo{ display:grid; gap:4px; min-width:0 } .barra-audio .barra-tit{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tx); font-size:15px; font-weight:700; line-height:1.3; letter-spacing:-.01em } .barra-audio .barra-tit:hover{ color:var(--acido) } .barra-sotto{ display:flex; align-items:baseline; gap:10px; min-width:0; font-size:13px; line-height:1.3 } .barra-eti{ flex:none; color:var(--chiave); font-weight:700; font-variant-numeric:tabular-nums } .barra-cap{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tx-2); font-weight:500 } .barra-cap[hidden]{ display:none } /* i due contatori: i minuti (il numero giallo, «di 21:33» bianco) e i CultXP (dall'addon Punti) */ .barra-conti{ display:flex; align-items:center; gap:22px; padding:0 6px } .barra-conto{ display:grid; gap:4px; text-align:left } .barra-pt-posto[hidden]{ display:none } .barra-pt-posto{ display:contents } /* il posto dei CultXP non fa un riquadro suo (display:contents): il filetto sta sul pulsante che l'addon ci mette dentro */ .barra-pt-posto > *{ padding-left:22px; border-left:1px solid var(--ln) } .barra-num{ display:flex; align-items:center; gap:7px; font-size:26px; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--acido) } .barra-di{ font-size:12.5px; font-weight:600; line-height:1.2; color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap } /* a destra: ±15, la velocità, il volume */ .barra-bt{ display:flex; align-items:center; gap:8px } .barra-sec{ display:inline-flex; align-items:center; justify-content:center; gap:4px; height:36px; min-width:36px; padding:0 8px; border:1px solid var(--ln); color:var(--tx-2); font-family:var(--f-dati); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; transition:border-color .15s, color .15s } .barra-sec:hover{ border-color:var(--acido); color:var(--acido) } .barra-vel{ min-width:52px } .barra-vol{ display:flex; align-items:center; gap:6px; margin-left:6px } .barra-muto{ display:grid; place-items:center; width:36px; height:36px; color:var(--acido) } .barra-muto:hover{ color:var(--tx) } .barra-muto svg{ width:20px; height:20px } .barra-livello{ -webkit-appearance:none; appearance:none; width:96px; height:16px; margin:0; background:transparent; cursor:pointer; --v:100% } .barra-livello::-webkit-slider-runnable-track{ height:4px; background:linear-gradient(to right, var(--tx) var(--v), var(--ln-f) var(--v)) } .barra-livello::-moz-range-track{ height:4px; background:linear-gradient(to right, var(--tx) var(--v), var(--ln-f) var(--v)) } .barra-livello::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; margin-top:-4px; border:0; background:var(--tx) } .barra-livello::-moz-range-thumb{ width:12px; height:12px; border:0; border-radius:0; background:var(--tx) } .barra-livello:hover::-webkit-slider-thumb{ background:var(--acido) } .barra-livello:focus-visible{ outline:2px solid var(--acido); outline-offset:4px } /* al computer stretto il volume resta solo l'altoparlante, e la copertina se ne va */ @media (max-width:1180px){ .barra-livello, .barra-cop{ display:none } .barra-audio{ grid-template-columns:52px minmax(0,1fr) auto auto } } /* AL TELEFONO (fino a 820): play | titolo e numero | i due conti affiancati. Niente ±15, velocità e volume (il volume sull'iPhone non si può cambiare da una pagina: lo fanno i tasti del telefono). */ @media (max-width:820px){ body.ha-barra{ --aud-h:68px } .barra-audio{ grid-template-columns:44px minmax(0,1fr) auto; gap:12px; padding:0 16px } .barra-lin{ top:-7px; height:14px } .barra-lin::before, .barra-fatto{ height:3px; margin-top:-1.5px } .barra-play{ width:44px; height:44px } .barra-play svg{ width:22px; height:22px } .barra-bt, .barra-cap{ display:none } .barra-testo{ gap:3px } .barra-audio .barra-tit{ font-size:14px } .barra-conti{ gap:12px; padding:0 } .barra-conto{ align-content:center; gap:3px } .barra-pt-posto > *{ padding-left:12px } .barra-num{ font-size:16px; gap:4px } .barra-di{ font-size:12px } /* IL TITOLO CHE NON CI STA SCORRE (rivista.js lo misura e lo scrive due volte, la seconda nascosta ai lettori di schermo): parte fermo, poi va a sinistra e ricomincia senza stacco; sfuma solo sul bordo destro. */ .barra-audio .barra-tit.barra-scorre{ text-overflow:clip; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent 100%) } .barra-scorre .barra-nome{ display:inline-block; animation:barraScorre var(--barra-tempo, 20s) linear infinite } .barra-scorre .barra-nome > span{ padding-right:48px } } @keyframes barraScorre{ 0%, 14%{ transform:translateX(0) } 100%{ transform:translateX(calc(-1 * var(--barra-giro, 0px))) } } @media (prefers-reduced-motion:reduce){ .barra-scorre .barra-nome{ animation:none } .barra-lin::before, .barra-fatto, .barra-testa{ transition:none } } /* ---- il menu a schede, solo sul telefono ---- */ .tabbar{ display:none } @media (max-width:980px){ :root{ --tab-h:62px } /* Con le schede in basso il burger non serve più: due menu per le stesse cose sono un menu di troppo, e quello in alto è il più scomodo da premere. */ .burger-bt{ display:none } .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:57; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; height:calc(var(--tab-h) + var(--sicuro)); padding-bottom:var(--sicuro); background:var(--sf); border-top:1px solid var(--ln); } .tabbar a,.tabbar button{ display:grid; justify-items:center; align-content:center; gap:4px; border:0; background:transparent; cursor:pointer; padding:0; color:var(--tx-2); font-family:var(--f-ui); font-size:.66rem; font-weight:600; text-decoration:none; position:relative; } /* La scheda accesa si riconosce dal giallo di icona e scritta. La riga gialla in cima che c'era prima l'ha tolta Marco il 28/9/26 («eliminare la lineetta gialla»). */ .tabbar .on,.tabbar [aria-expanded="true"]{ color:var(--acido) } .tabbar span{ letter-spacing:-.01em } /* ⚠️ IL PROFILO STA NELLA BARRA, NON IN ALTO (8/10/26, bozza approvata: barra 1, sei voci). Marco: «da mobile dobbiamo riuscire a spostare il pulsante profilo in basso insieme a Home Puntate… quando non si ha l'accesso l'icona è normale, mentre quando si è loggati dev'essere verde» e il battito «anche su mobile». Sei voci: scritte un filo più piccole, e un nome lungo finisce coi puntini invece di spingere le altre. */ .app .strum .bt-chi{ display:none } /* (11/10/26) cinque voci, non più sei: la scritta torna alla misura di prima; 8px ai lati tengono Home e Altro lontani dagli angoli arrotondati dello schermo */ .tabbar a,.tabbar button{ min-width:0 } .tabbar{ padding-left:max(8px, env(safe-area-inset-left, 0px)); padding-right:max(8px, env(safe-area-inset-right, 0px)) } .tabbar a > span:last-child,.tabbar button > span:last-child{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px } .tabbar .tb-chi-ico{ position:relative; display:grid; place-items:center; width:21px; height:21px; border-radius:50% } .tabbar .tb-chi.chi-dentro{ color:var(--verde-online) } .tabbar .tb-chi.chi-dentro .tb-chi-ico::before{ content:""; position:absolute; inset:-2px; border-radius:50%; pointer-events:none; animation:chi-battito-ico 2.4s cubic-bezier(.2,.6,.3,1) infinite } @keyframes chi-battito-ico{ 0% { box-shadow:0 0 0 0 rgba(var(--verde-online-aura),.7) } 12% { box-shadow:0 0 0 5px rgba(var(--verde-online-aura),0) } 13% { box-shadow:0 0 0 0 rgba(var(--verde-online-aura),.6) } 30% { box-shadow:0 0 0 8px rgba(var(--verde-online-aura),0) } 100%{ box-shadow:0 0 0 8px rgba(var(--verde-online-aura),0) } } @media (prefers-reduced-motion:reduce){ .tabbar .tb-chi.chi-dentro .tb-chi-ico::before{ animation:none; box-shadow:0 0 0 3px rgba(var(--verde-online-aura),.35) } } /* «Altro» apre il menu delle sezioni, che sul telefono diventa un foglio che sale dal basso: si apre dove si è premuto, non dall'altra parte dello schermo. Resta lo stesso #menu-tel di prima — un elenco solo, non due. */ .menu-tel{ position:fixed; left:0; right:0; z-index:58; bottom:calc(var(--tab-h) + var(--aud-h) + var(--sicuro)); max-height:58vh; overflow:auto; border-top:1px solid var(--ln); box-shadow:0 -10px 30px rgba(0,0,0,.45); } /* ⚠️ SOTTO LA TESTATA, non solo sotto le due strisce. Il foglio che sale è #menu-tel, che sta DENTRO
, e quella ha già un z-index suo (50): da lì il 58 del foglio non conta più niente verso il resto della pagina — conta il 50 della testata. Con la velina a 54 il foglio si vedeva ma non si poteva toccare, perché la velina gli stava davanti e si prendeva lei i tocchi. Restando sotto il 50, la velina spegne la pagina e lascia stare testata, lettore e barra a schede — che col menu aperto si devono poter ancora premere. */ .tabbar-velo{ position:fixed; inset:0; z-index:45; background:rgba(6,9,20,.55) } .tabbar-velo[hidden]{ display:none } /* Col menu aperto la linguetta di accessibilità e cookie (core, livello 180) resta davanti al foglio (che sta nella testata, livello 50) e ne copre le ultime voci: finché il menu è aperto non si mostra (26/9/26). */ } /* ============================================================ IL MENU DEL TELEFONO COME LA RICERCA (26/9/26) — copiato dalla bozza approvata (bozza-menu/menu.html, costruisci-bozza-menu.py). Il disegno: partials/menu-laterale.php; il copione: rivista.js Entra da sinistra con la stessa curva del pannello della ricerca (assets/css/ricerca.css), sopra tutto, col velo. Colori e caratteri sono i nomi del tema (--sf, --tx, --acido, --f-tit…): è già vestito da Cultura. ============================================================ */ .mn-velo{ position:fixed; inset:0; z-index:290; background:rgba(6,9,20,.62); opacity:0; transition:opacity .25s } .mn-velo.aperto{ opacity:1 } .mn{ position:fixed; top:0; left:0; bottom:0; z-index:300; width:min(88vw, 420px); display:flex; flex-direction:column; background:var(--sf); color:var(--tx); border-right:1px solid var(--ln); visibility:hidden; transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; } .mn.aperto{ visibility:visible; transform:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s } .mn-testa{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 14px 18px; padding-top:calc(14px + env(safe-area-inset-top, 0px)); border-bottom:1px solid var(--ln) } .mn-logo svg{ display:block; width:128px; height:34px; color:var(--tx) } .mn-x{ width:44px; height:44px; display:grid; place-items:center; background:var(--sf-2); color:var(--tx); border:1px solid var(--ln-f); cursor:pointer } .mn-x svg{ width:18px; height:18px } .mn-x:focus-visible, .mn a:focus-visible, .mn button:focus-visible, .mn input:focus-visible{ outline:2px solid var(--acido); outline-offset:2px } .mn-corpo{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:22px } /* le voci entrano una dopo l'altra, da sinistra; chiudendo escono insieme */ .mn .mn-v{ opacity:0; transform:translateX(-22px); transition:opacity .2s, transform .2s } .mn.aperto .mn-v{ opacity:1; transform:none; transition:opacity .42s ease, transform .5s cubic-bezier(.2,.8,.2,1); transition-delay:calc(90ms + var(--i, 0) * 45ms) } @media (prefers-reduced-motion:reduce){ .mn, .mn-velo, .mn .mn-v, .mn.aperto .mn-v{ transition:none } .mn .mn-v{ transform:none } } html.tc-a11y-reduce-motion .mn .mn-v{ transform:none } .mn-cerca{ display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:0 16px; cursor:pointer; text-align:left; background:var(--sf-2); color:var(--tx-2); border:1px solid var(--ln-f); font:inherit; font-family:var(--f-ui); font-size:15px } .mn-cerca svg{ width:18px; height:18px; color:var(--acido); flex:none } .mn-sezioni{ display:flex; flex-direction:column; border-top:1px solid var(--ln) } .mn-sez{ position:relative; display:grid; grid-template-columns:1fr auto 18px; align-items:center; gap:12px; min-height:60px; padding:0 4px 0 18px; border-bottom:1px solid var(--ln); color:var(--tx); text-decoration:none; overflow:hidden } /* il colore della sezione: una riga sottile che si allarga al tocco */ .mn-sez::before{ content:''; position:absolute; left:0; top:12px; bottom:12px; width:4px; background:var(--c, var(--acido)); transition:width .25s ease } /* i colori delle sezioni valgono anche per le lineette del menu del computer (.m-sez, 28/9/26): una regola sola, così i due menu non si contraddicono */ .mn-sez.pun, .menu .m-sez.pun{ --c:#5b7fe0 } .mn-sez.int, .menu .m-sez.int{ --c:#1f9e7d } .mn-sez.lib, .menu .m-sez.lib{ --c:#9a6ff0 } .mn-sez.str, .menu .m-sez.str{ --c:#e0457f } .mn-sez.new, .menu .m-sez.new{ --c:#4fb8f0 } .mn-sez.eve, .menu .m-sez.eve{ --c:#ef6b3a } .mn-sez:hover::before, .mn-sez:focus-visible::before{ width:8px } .mn-sez-nome{ font-family:var(--f-tit); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; line-height:1 } .mn-sez-n{ font-family:var(--f-dati); font-size:.78rem; color:var(--tx-2); font-variant-numeric:tabular-nums } .mn-sez-va{ width:18px; height:18px; fill:none; stroke:var(--tx-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease } .mn-sez:hover .mn-sez-va{ transform:translateX(3px); stroke:var(--acido) } .mn-eti{ margin:0 0 10px; font-family:var(--f-dati); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acido) } /* Marco, 27/9/26: «delle linee divisori tra le sezioni» e i titoli «in giallo cultura». La linea la porta ogni blocco SOTTO di sé, non sopra: le sezioni finiscono già con la loro riga, e una linea sopra il primo blocco faceva due righe a 22px l'una dall'altra. Un blocco che manca (niente diretta in calendario) si porta via anche la sua linea. */ .mn-blocco, .mn-accedi{ padding-bottom:22px; border-bottom:1px solid var(--ln) } .mn-diretta{ display:grid; grid-template-columns:62px 1fr; gap:14px; align-items:center } .mn-giorno{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:70px; border:1px solid var(--acido); color:var(--tx); font-family:var(--f-dati); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em } .mn-giorno b{ font-family:var(--f-tit); font-size:1.7rem; letter-spacing:-.03em; line-height:1; margin:2px 0 } .mn-diretta-t{ display:flex; flex-direction:column; gap:4px; min-width:0 } /* il titolo della puntata sta sopra la data, a tutta larghezza (Marco, 29/9/26: «deve prendere tutta la sezione… ne prende 3/4»); righe riempite, non pareggiate (text-wrap:balance lo stringeva) */ .mn-diretta-tit{ display:block; margin:0 0 12px; font-family:var(--f-tit); font-weight:700; font-size:1.1rem; line-height:1.25; text-wrap:pretty } .mn-diretta-t span{ font-size:.86rem; color:var(--tx-2); line-height:1.4 } .mn-diretta-t .mn-tra{ color:var(--acido); font-family:var(--f-dati); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase } .mn-canali{ display:grid; grid-template-columns:1fr 1fr; gap:8px } .mn-canale{ display:flex; align-items:center; gap:10px; min-height:46px; padding:0 12px; border:1px solid var(--ln-f); color:var(--tx); text-decoration:none; font-size:.9rem; font-weight:600 } .mn-canale svg{ width:18px; height:18px; flex:none } .mn-canale:hover{ border-color:var(--acido) } /* «Accedi» come il pulsante della testata (Marco, 27/9/26: «come il pulsante ACCEDI… cambia anche da Area riservata ad Accedi»): è lo stesso .bt-chi, giallo con l'icona; qui prende tutta la riga e l'altezza di un dito. */ .mn-chi{ width:100%; justify-content:center; min-height:48px; gap:10px; text-decoration:none } .mn-chi b{ font-size:.8rem } .mn-motto{ margin:0; font-size:.82rem; color:var(--tx-2); line-height:1.5 } /* «INSTALLA L'APP» IN FONDO AL MENU (29/9/26, bozza approvata: Cultura digitale/bozze/bozza-installa). Marco: «sul telefono la devi fare uscire all'interno del menu, non in prima pagina», «la voglio sotto a tutto». Il riquadro lo stampa il menu (partials/menu-laterale.php), nascosto; lo accende il core (assets/js/webapp-installa.js) solo dove il browser sa installare, e dice lui se vale «Installa» (Android) o «Come si fa» coi passi (iPhone). Sta sotto il motto, che non ha la sua riga: la linea la porta lui sopra di sé. Lo spazio sotto (scroll-margin) è per la sfumatura: aprendo i passi il menu scende fin lì e l'ultimo passo non ci finisce sotto. */ .mn .mn-app{ padding-top:22px; padding-bottom:0; border-bottom:0; border-top:1px solid var(--ln); scroll-margin-bottom:60px } .mn-app-riga{ display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center } .mn-app-ico{ display:block; width:52px; height:52px; border-radius:12px; border:1px solid var(--ln-f) } .mn-app-t{ display:flex; flex-direction:column; gap:3px; min-width:0 } .mn-app-t b{ font-family:var(--f-tit); font-weight:700; font-size:1rem; line-height:1.25 } .mn-app-t span{ font-size:.86rem; color:var(--tx-2); line-height:1.4 } .mn-app-ok{ display:grid; place-items:center; width:32px; height:32px; background:var(--acido); color:var(--sf) } .mn-app-ok svg{ width:18px; height:18px } .mn-app-bt{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; margin-top:14px; padding:0 16px; background:transparent; color:var(--tx); border:1px solid var(--acido); cursor:pointer; font:inherit; font-family:var(--f-dati); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase } .mn-app-bt svg{ width:18px; height:18px; color:var(--acido); flex:none; transition:transform .25s ease } .mn-app-bt[aria-expanded="true"] svg{ transform:rotate(180deg) } @media (hover:hover){ .mn-app-bt:hover{ background:var(--acido); color:var(--sf) } .mn-app-bt:hover svg{ color:var(--sf) } } /* «Guarda live» nella prossima diretta: lo stesso pulsante, acceso solo in onda (rivista.js) */ .mn-diretta-live{ text-decoration:none } .mn-diretta-live[hidden]{ display:none } .mn-app-passi .addi-installa-passi{ padding-top:16px } .mn-app-passi .addi-installa-passi p{ font-size:.9rem; line-height:1.6; color:var(--tx) } /* LA BARRA DI SCORRIMENTO È NOSTRA (Marco, 26/9/26: «lo scroll non mi convince, a meno che non avvenga con una barra di scorrimento personalizzata»). Quella del browser sul telefono non si vede proprio, o compare un attimo e sparisce: qui una riga sottile a destra, con il cursore acido alto quanto la parte che si vede, sempre lì finché c'è altro da vedere; si trascina anche. In fondo una sfumatura dice che il menu continua, e sparisce quando si arriva giù. */ .mn-corpo{ scrollbar-width:none } .mn-corpo::-webkit-scrollbar{ display:none } .mn-scorri{ position:absolute; right:0; width:16px; top:var(--sc-su, 90px); bottom:calc(10px + env(safe-area-inset-bottom, 0px)); opacity:0; transition:opacity .3s; touch-action:none; cursor:pointer } .mn-scorri::before{ content:''; position:absolute; right:5px; top:0; bottom:0; width:2px; background:var(--ln) } .mn-scorri i{ position:absolute; right:3px; width:6px; top:0; height:40px; background:var(--acido); transition:width .15s, right .15s } .mn-scorri:hover i, .mn-scorri.tiro i{ width:8px; right:2px } .mn.aperto .mn-scorri.serve{ opacity:1; transition:opacity .3s .45s } .mn-sfuma{ position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none; background:linear-gradient(rgba(12,16,32,0), var(--sf)); transition:opacity .25s } .mn-sfuma.fine{ opacity:0 } /* LE LINEETTE COLORATE NEL MENU DEL COMPUTER (Marco, 28/9/26: «come quelle inserite su mobile»): la stessa lineetta verticale col colore della sezione che c'è nel menu del telefono, prima del nome; col mouse sopra si allarga come lì. Solo sulle voci che sono sezioni della rivista. */ .app .menu a.m-sez{ display:inline-flex; align-items:center; gap:9px } .app .menu a.m-sez::before{ content:''; width:3px; height:15px; flex:none; background:var(--c, var(--acido)); transition:width .25s ease } /* una voce che non è una sezione della rivista (Catalogo, Chi siamo) ha la lineetta del colore della linea di separazione (--ln), qui e nel menu del telefono (Marco, 5/10/26). Le sezioni senza un colore loro restano gialle. */ .app .menu a.m-libera, .mn-sez.mn-libera{ --c:var(--ln) } .app .menu a.m-sez:hover::before{ width:6px } @media (prefers-reduced-motion:reduce){ .app .menu a.m-sez::before{ transition:none } } /* col menu o coi filtri aperti le linguette di accessibilità e privacy non si vedono */ body.mn-aperto .tc-linguette, body.fl-aperto .tc-linguette{ visibility:hidden } /* ============================================================ I FILTRI IN UNA BARRA LATERALE (28/9/26) — Marco: «voglio vedere l'icona dei filtri e che si apre come sidebar laterale… al lato destro metti l'icona». Prima c'era una fila di pastiglie sul computer e, sul telefono, due tendine che nessun copione apriva (toccarle non faceva niente, e «Tutti» era bianco su bianco). Adesso su tutti gli schermi (scelta di Marco) il pulsante «Filtri» sta a destra nella riga dei numeri, e la barra entra da DESTRA, dal lato del pulsante, con la stessa curva e lo stesso velo del menu (.mn). Il disegno: pages/rivista-sezione.php; il copione: rivista.js («I FILTRI»). ============================================================ */ .conta-riga{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; padding-top:18px } .conta-riga .conta-ris{ padding-block:0; min-width:0 } .app .fl-apri{ flex:none; cursor:pointer; background:transparent; font-family:var(--f-ui) } .app .fl-apri .ico{ width:16px; height:16px; flex:none } .fl-quanti{ display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; background:var(--acido); color:#101733; font-size:.72rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums } .fl-velo{ position:fixed; inset:0; z-index:290; background:rgba(6,9,20,.62); opacity:0; transition:opacity .25s } .fl-velo.aperto{ opacity:1 } .fl{ position:fixed; top:0; right:0; bottom:0; z-index:300; width:min(88vw, 400px); display:flex; flex-direction:column; background:var(--sf); color:var(--tx); border-left:1px solid var(--ln); font-family:var(--f-ui); visibility:hidden; transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; } .fl.aperto{ visibility:visible; transform:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s } .fl-testa{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 14px 18px; padding-top:calc(14px + env(safe-area-inset-top, 0px)); border-bottom:1px solid var(--ln) } .fl-tit{ display:flex; flex-direction:column; gap:6px; min-width:0 } .fl-tit b{ font-family:var(--f-tit); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; line-height:1.05 } .fl-eti{ margin:0; font-family:var(--f-dati); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acido) } .fl-x{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--sf-2); color:var(--tx); border:1px solid var(--ln-f); cursor:pointer } .fl-x svg{ width:18px; height:18px } .fl-x:focus-visible, .fl a:focus-visible{ outline:2px solid var(--acido); outline-offset:2px } .fl-corpo{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:20px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:26px } .fl-gruppo .fl-eti{ margin-bottom:10px } .fl-voci{ display:flex; flex-direction:column; border-top:1px solid var(--ln) } .fl-voce{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 14px 0 18px; border-bottom:1px solid var(--ln); color:var(--tx); text-decoration:none; font-size:1rem; font-weight:600 } .fl-voce::before{ content:''; position:absolute; left:0; top:12px; bottom:12px; width:0; background:var(--acido); transition:width .2s ease } .fl-voce:hover::before, .fl-voce:focus-visible::before, .fl-voce[aria-current]::before{ width:4px } .fl-voce:hover, .fl-voce[aria-current]{ color:var(--acido) } .fl-voce[aria-current]{ font-weight:800 } .fl-n{ font-family:var(--f-dati); font-size:.78rem; font-weight:500; color:var(--tx-2); font-variant-numeric:tabular-nums } .fl-voce[aria-current] .fl-n{ color:var(--acido) } .fl-togli{ display:flex; align-items:center; justify-content:center; min-height:48px; border:1px solid var(--acido); color:var(--tx); text-decoration:none; font-size:.8rem; font-weight:700; transition:background .15s, color .15s } .fl-togli:hover{ background:#fff; color:var(--blu-fondo); border-color:#fff } @media (prefers-reduced-motion:reduce){ .fl, .fl-velo, .fl-voce::before{ transition:none } } /* ============================================================ AREA RISERVATA Le schermate di chi ha un accesso al sito. La STRUTTURA è del core (assets/css/base-pubblico.css: .account-shell, .account-nav, .account-pane, .form-group…) perché il copione del core le comanda; qui si mette solo il vestito della rivista — fondo scuro, bordi squadrati, giallo sugli stati. ============================================================ */ .area{ padding-bottom:54px } .area-testa{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:20px 26px; border-bottom:1px solid var(--ln); margin-bottom:26px; } .app .account-title{ font-family:var(--f-tit); font-size:clamp(1.5rem,2.7vw,2.25rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin:0; color:var(--acido); /* giallo (Marco, 9/10/26): «Area riservata», «Entra», «Crea il tuo accesso» */ } .app .account-subtitle{ flex:1 1 100%; margin:12px 0 0; color:var(--tx-2); font-size:1.06rem; line-height:1.6 } .area-esci{ display:inline-flex; align-items:center; gap:8px; background:none; cursor:pointer; border:1px solid var(--ln-f); color:var(--tx); padding:9px 16px; font-family:var(--f-dati); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; } .area-esci:hover{ border-color:var(--acido); color:var(--acido) } .app .account-shell{ padding-block:26px 0 } .app .account-nav{ display:flex; flex-direction:column; gap:4px } .app .account-nav-item{ background:none; border:0; border-left:2px solid transparent; width:100%; color:var(--tx-2); text-align:left; font:inherit; font-size:.95rem; } .app .account-nav-item:hover{ color:var(--acido) } .app .account-nav-item.active{ color:var(--tx); border-left-color:var(--acido); background:var(--sf-2) } /* le icone del menu dell'area, gialle (Marco, 9/10/26: «le icone dentro area riservata le voglio giallo cultura digitale») */ .app .account-nav-item svg{ color:var(--acido) } .app .account-nav-item-danger{ color:var(--tx-2) } .app .account-nav-item-danger:hover{ color:var(--errore) } .app .account-nav-sep{ height:1px; background:var(--ln); margin:10px 0 } .app .account-stat{ border:1px solid var(--ln); background:var(--sf-2); padding:18px 20px } .app .account-stat-lbl{ display:block; font-family:var(--f-dati); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2); margin-bottom:8px; } .app .account-stat-num{ font-size:1.5rem; font-weight:800; color:var(--chiave); font-variant-numeric:tabular-nums } .app .account-stat-num-sm{ font-size:1.06rem; color:var(--tx) } .app .account-pane-subtitle{ font-size:1.1rem; font-weight:700; letter-spacing:-.015em; margin:0 0 20px; color:var(--acido) } /* il titolo di ogni schermata dell'area, giallo come quello della pagina (9/10/26) */ /* 5/10/26: toccava l'etichetta sotto (0px); 20 come Bento */ .area-vuoto{ color:var(--tx-2); border:1px dashed var(--ln-f); padding:22px 24px } /* «I MIEI ASCOLTI» (30/9/26, dalla bozza bozza-ascolti/ — le regole si copiano da lì). Marco: «40:09? in che senso.. 40 ore?». Tre numeri (il tempo SENTITO in parole, le puntate, iscritto dal), l'ultima puntata grande con la mappa di cosa si è sentito (giallo), di cosa no (scuro) e del punto in cui ci si è fermati (segno bianco); le altre iniziate; le finite. Il markup lo scrive modules/rivista/ascolti.js. Le distanze le mette il contenitore. */ .app .ma{ display:grid; gap:36px } /* il colore della parte sentita nella barra degli ascolti: il copione dell'addon (ascolti.js) chiede --ma-sentito */ .app{ --ma-sentito:var(--acido) } /* i punti (addon Punti, 10/10/26): la scritta sopra il ciano è il blu notte del fondo */ :root{ --pnt-ink:var(--sf) } .app .ma > *, .app .ma-sez > *, .app .ma-eroe-dx > *, .app .ma h3, .app .ma h4{ margin:0 } /* i tre numeri */ .app .ma-numeri{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px } .app .ma-num{ display:grid; gap:8px; align-content:start; padding:18px 20px; border:1px solid var(--ln); background:var(--sf-2); min-width:0 } .app .ma-num-lbl{ font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2) } .app .ma-num-val{ font-family:var(--f-tit); font-size:2rem; font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--chiave); font-variant-numeric:tabular-nums; white-space:nowrap } .app .ma-num-val small{ font-size:.5em; font-weight:700; letter-spacing:0; color:var(--tx); margin:0 .5em 0 .15em } .app .ma-num-val small:last-child{ margin-right:0 } .app .ma-num-val.parole{ font-size:1.3rem; letter-spacing:-.01em; color:var(--tx); white-space:normal; padding-block:.3em .15em } .app .ma-num-sotto{ font-size:.84rem; line-height:1.45; color:var(--tx-2) } /* le sezioni */ .app .ma-sez{ display:grid; gap:14px } .app .ma-sez-testa{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px } .app .ma-sez-tit{ font-size:1.1rem; font-weight:700; letter-spacing:-.015em } .app .ma-leggenda{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.8rem; color:var(--tx-2) } .app .ma-leggenda span{ display:inline-flex; align-items:center; gap:7px } .app .ma-leggenda i{ display:inline-block; width:18px; height:8px; background:var(--acido) } .app .ma-leggenda i.no{ background:var(--ln-f) } /* la mappa: giallo = sentito, scuro = non sentito, segno bianco = dove ti sei fermato */ .app .ma-mappa{ position:relative; height:10px; background:var(--ln-f) } .app .ma-mappa-piena{ position:absolute; inset:0 } .app .ma-mappa-qui{ position:absolute; top:-5px; bottom:-5px; width:3px; margin-left:-1.5px; background:var(--tx); box-shadow:0 0 0 2px var(--sf-2) } .app .ma-riga .ma-mappa{ height:6px } .app .ma-riga .ma-mappa-qui{ top:-4px; bottom:-4px; width:2px; margin-left:-1px } .app .ma-dati{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; font-size:.86rem; color:var(--tx-2); font-variant-numeric:tabular-nums } .app .ma-dati b{ color:var(--tx); font-weight:700 } /* la data corta serve solo sul telefono, sotto, nelle puntate iniziate */ .app .ma-q-corto{ display:none } /* l'ultima puntata, grande */ .app .ma-eroe{ display:grid; grid-template-columns:152px minmax(0, 1fr); gap:24px; padding:22px; border:1px solid var(--ln); background:var(--sf-2) } .app .ma-eroe.suona{ border-color:var(--acido) } .app .ma-cop{ display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--sf-3) } .app .ma-eroe-dx{ display:grid; gap:14px; align-content:start; min-width:0 } .app .ma-eti{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acido) } .app .ma-eroe-tit{ font-size:1.3rem; font-weight:800; line-height:1.28; letter-spacing:-.015em; text-wrap:balance } .app .ma-eroe-tit a, .app .ma-riga-tit a{ color:inherit; text-decoration:none } .app .ma-eroe-tit a:hover, .app .ma-riga-tit a:hover{ color:var(--acido) } .app .ma-azioni{ display:flex; flex-wrap:wrap; gap:12px; align-items:center } .app .ma-azioni .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:auto; margin:0; padding:10px 18px; font-size:.85rem; line-height:1.55; cursor:pointer } .app .ma-azioni .banda-azioni a{ padding-block:9px } .app .ma-azioni .btn-primary svg{ width:14px; height:14px; fill:currentColor } /* le altre puntate iniziate */ .app .ma-lista{ display:grid; gap:10px } .app .ma-riga{ display:grid; grid-template-columns:64px minmax(0, 1fr) auto; gap:16px; align-items:center; padding:14px 16px; border:1px solid var(--ln); background:var(--sf-2) } .app .ma-riga.suona{ border-color:var(--acido) } .app .ma-riga .ma-cop{ width:64px } .app .ma-riga-dx{ display:grid; gap:9px; min-width:0 } .app .ma-riga-tit{ font-size:.98rem; font-weight:700; line-height:1.35 } .app .ma-riga-tit .ma-eti{ margin-right:8px } .app .ma-play{ display:grid; place-items:center; width:44px; height:44px; border:0; background:var(--acido); color:#0d1122; cursor:pointer } .app .ma-play svg{ width:16px; height:16px; fill:currentColor } .app .ma-play:hover{ background:#fff; color:var(--blu-fondo) } .app .ma-play:focus-visible, .app .ma-azioni .btn-primary:focus-visible{ outline:2px solid var(--acido); outline-offset:3px } /* le finite */ .app .ma-finite{ display:grid; border-top:1px solid var(--ln) } .app .ma-finita{ display:grid; grid-template-columns:24px minmax(0, 1fr) auto; gap:14px; align-items:center; padding:14px 2px; border-bottom:1px solid var(--ln) } .app .ma-finita > svg{ width:22px; height:22px; color:var(--acido) } .app .ma-finita-tit{ font-size:.95rem; font-weight:700; line-height:1.35; min-width:0 } .app .ma-finita-tit small{ display:block; font-size:.8rem; font-weight:500; color:var(--tx-2); margin-top:3px } .app .ma-finita-tit a{ color:inherit; text-decoration:none } .app .ma-finita-tit a:hover{ color:var(--acido) } .app .ma-finita .ma-riascolta{ font-size:.8rem; font-weight:700; color:var(--tx); background:none; border:1px solid var(--acido); padding:8px 14px; cursor:pointer; white-space:nowrap } .app .ma-finita .ma-riascolta:hover{ background:#fff; color:var(--blu-fondo); border-color:#fff } /* le pagine (8/10/26, Marco: «quando arrivi a più di 8 podcast.. anche per quelli ascoltati.. voglio una paginazione»): 8 puntate per pagina nelle iniziate e nelle finite, i numeri li scrive ascolti.js */ .app .ma-pag{ display:flex; flex-wrap:wrap; align-items:center; gap:6px } .app .ma-pag button{ min-width:40px; height:40px; padding:0 10px; border:1px solid var(--ln-f); border-radius:var(--iv-r, 0); background:transparent; color:var(--tx); font-family:var(--f-ui); font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; cursor:pointer } .app .ma-pag button[aria-current="page"]{ background:var(--acido); border-color:var(--acido); color:var(--blu-fondo-scuro) } .app .ma-pag button:disabled{ opacity:.35; cursor:default } .app .ma-pag button:hover:not(:disabled):not([aria-current]){ border-color:var(--acido) } .app .ma-pag button:focus-visible{ outline:2px solid var(--acido); outline-offset:2px } .app .ma-pag-gap{ min-width:16px; font-family:var(--f-ui); font-weight:700; text-align:center; color:var(--tx-2) } .app .ma-pag-quante{ margin-left:auto; font-family:var(--f-ui); font-size:.82rem; color:var(--tx-2); font-variant-numeric:tabular-nums } /* ⚠️ SUL TELEFONO SOLO (8/10/26, Marco: «su desktop andava bene l'impostazione non la dovevi modificare»): sopra gli 820 px resta tutto com'era. Qui sotto le scelte fatte sulla bozza: «Vai con la B e 2 play su copertina». */ @media (max-width:820px){ .app .ma{ gap:28px } /* i numeri B: una scheda sola con tre colonne divise (sotto i 560, tre righe col numero a destra). Anche i numeri di «Invita un amico»: è lo stesso pezzo. */ .app .ma-numeri{ gap:0; border:1px solid var(--ln); background:var(--sf-2) } .app .ma-num{ border:0; border-left:1px solid var(--ln); background:none } .app .ma-num:first-child{ border-left:0 } .app .ma-eroe{ grid-template-columns:96px minmax(0, 1fr); gap:16px; padding:16px } /* il titolo della puntata grande come quelli sotto */ .app .ma-eroe-tit{ font-size:.92rem; font-weight:700; line-height:1.35; letter-spacing:0 } .app .ma-eroe .ma-mappa, .app .ma-eroe .ma-dati, .app .ma-eroe .ma-azioni{ grid-column:1 / -1 } .app .ma-eroe-dx{ display:contents } .app .ma-eroe-testa{ display:grid; gap:8px; align-content:center; min-width:0 } .app .ma-azioni{ flex-direction:column; align-items:stretch } .app .ma-azioni .banda-azioni a{ width:100% } /* le puntate 2: due colonne, il play sulla copertina. ⚠️ il play è ancorato alla copertina (76 px), non al fondo della riga: con un titolo lungo la riga è più alta e scappava giù */ .app .ma-riga{ grid-template-columns:76px minmax(0, 1fr); gap:12px 16px; align-items:start; padding:12px } .app .ma-riga .ma-cop{ grid-column:1; grid-row:1; width:76px } .app .ma-riga-tit{ font-size:.92rem } .app .ma-riga .ma-play{ grid-column:1; grid-row:1; align-self:start; justify-self:end; width:34px; height:34px; margin:49px -7px 0 0; box-shadow:0 0 0 3px var(--sf-2) } .app .ma-riga .ma-play svg{ width:13px; height:13px } /* i dati in due righe: «Ascoltata al 3%» e sotto «Sei a 3:22 di 15:38 · 6 ott», con la data corta */ .app .ma-riga .ma-dati{ justify-content:flex-start; gap:3px 0 } .app .ma-riga .ma-dati-a{ display:contents } .app .ma-riga .ma-pct{ flex-basis:100% } .app .ma-riga .ma-sep, .app .ma-riga .ma-q-lungo{ display:none } .app .ma-riga .ma-q-corto{ display:inline } .app .ma-riga .ma-pos::first-letter{ text-transform:uppercase } .app .ma-riga .ma-quando::before{ content:'\a0\b7\a0' } /* le finite: «Riascolta» è una scritta, sotto il titolo */ .app .ma-finita{ grid-template-columns:24px minmax(0, 1fr); align-items:start; row-gap:6px } .app .ma-finita > svg{ margin-top:1px } .app .ma-finita .ma-riascolta{ grid-column:2; justify-self:start; padding:2px 0; border:0; background:none; color:var(--acido); text-decoration:underline; text-underline-offset:3px } .app .ma-finita .ma-riascolta:hover{ background:none; color:var(--tx) } } @media (max-width:560px){ .app .ma-numeri{ grid-template-columns:minmax(0, 1fr) } .app .ma-num{ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"lbl val" "sotto val"; column-gap:14px; row-gap:5px; align-items:center; padding:14px 16px; border-left:0; border-top:1px solid var(--ln) } .app .ma-num:first-child{ border-top:0 } .app .ma-num-lbl{ grid-area:lbl } .app .ma-num-val{ grid-area:val; justify-self:end; text-align:right; font-size:1.55rem } .app .ma-num-val.parole{ font-size:.95rem; padding:0; white-space:normal; max-width:7.5em } .app .ma-num-sotto{ grid-area:sotto; font-size:.8rem } /* le pagine: il conto va sotto i numeri. I pulsanti sono da 40 come sopra, ma se non ci stanno (sette numeri su un telefono stretto) si stringono tutti uguali invece di andare a capo */ .app .ma-pag{ gap:4px } .app .ma-pag button{ flex:1 1 0; min-width:0; max-width:40px; padding:0 } .app .ma-pag-gap{ flex:0 0 auto; min-width:12px } .app .ma-pag-quante{ flex-basis:100%; margin-left:0 } } @media (min-width:821px){ .app .ma-eroe-testa{ display:grid; gap:10px } } /* Il menu dell'area sul telefono: il pulsante che dice dove sei, la testa della barra, il velo (la struttura è del core; si vede solo sotto i 980px). */ .app .area-menu-bt{ background:var(--sf-2); border:1px solid var(--ln); border-left:2px solid var(--acido); color:var(--tx); font-family:var(--f-ui); font-size:1rem; font-weight:600 } .app .area-menu-bt:hover{ border-color:var(--acido) } .app .area-menu-bt:focus-visible{ outline:2px solid var(--acido); outline-offset:2px } .app .area-menu-testa{ border-bottom:1px solid var(--ln) } .app .area-menu-testa b{ font-family:var(--f-tit); font-size:1.1rem; font-weight:800; letter-spacing:-.015em; color:var(--tx) } .app .area-menu-chiudi{ background:none; border:1px solid var(--ln-f); color:var(--tx) } .app .area-menu-chiudi:hover{ border-color:var(--acido); color:var(--acido) } .app .area-menu-velo{ background:rgba(5,8,20,.62) } /* Entrati, il blocco «Accedi / Iscriviti» è vuoto: sparisce tutto, non solo le sue due metà. Sotto i 900 i suoi due posti vuoti (row-gap 44px) tenevano 56px fra le briciole e il titolo. */ .area-porta:not(:has(> .account-view:not(.hidden))){ display:none } /* Il modulo: accesso e registrazione. */ .area-modulo{ padding-block:26px 0 } /* «ACCEDI» E «ISCRIVITI» AFFIANCATI (Marco, 27/9/26: «separare in due colonne la pagina… da una parte ACCEDI, dall'altra NON SEI ISCRITTO? iscriviti»). Il tema lo chiede in theme.json (area_affiancata), il core stampa .area-porta. ⚠️ LE TESTE STANNO SULLA STESSA RIGA (subgrid): «Non sei iscritto? Iscriviti» va a capo prima di «Accedi», e senza la riga comune il modulo di destra partiva più in basso di quello di sinistra. Sotto i 900px una colonna sola, prima chi entra. */ .area-porta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; column-gap:44px; align-items:start } .area-porta > .account-view{ display:grid; grid-row:span 2; grid-template-rows:subgrid; min-width:0 } .area-porta > .account-view.hidden{ display:none } .area-porta .area-testa{ align-self:stretch; align-items:flex-start; align-content:flex-start } @media (max-width:900px){ .area-porta{ grid-template-columns:minmax(0,1fr); row-gap:44px } .area-porta > .account-view{ grid-row:auto; grid-template-rows:auto auto } } .app .area-modulo .auth-form{ border:1px solid var(--ln); background:var(--sf-2); padding:28px } /* le etichette dei campi (accesso, iscrizione, cassa): scritte normali, almeno 12px, col peso e col colore (12/10/26, le regole dell'impaginazione: il maiuscolo spaziato a 11,2px non si legge) */ .app .form-group label{ font-family:var(--f-ui); font-size:.84rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--tx-2); } .app .form-group input, .app .form-group textarea, .app .form-group select{ background:var(--sf); border:1px solid var(--ln-f); color:var(--tx); font:inherit; padding:13px 15px; } .app .form-group input:focus{ outline:none; border-color:var(--acido) } /* il riempimento automatico del browser non ridipinge il campo: fondo e testo restano quelli del tema (5/10/26, l'occhio della password spariva sull'azzurro chiaro di Chrome) */ .app .form-group input:-webkit-autofill, .app .form-group input:-webkit-autofill:hover, .app .form-group input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px var(--sf) inset !important; -webkit-text-fill-color:var(--tx) !important; caret-color:var(--tx) } /* LA STESSA ALTEZZA PER CAMPI E TENDINE (3/10/26): la tendina del «Chi sei» usciva alta 49 contro 53 dei campi — il browser alla tendina non dà l'altezza di riga del testo. Dichiarata, non ereditata. */ .app .form-group input:not([type=checkbox]):not([type=radio]), .app .form-group select{ height:53px; box-sizing:border-box } .app .form-group select:focus{ outline:none; border-color:var(--acido) } /* la freccia delle tendine (base-pubblico.css): chiara come il testo, e dal bordo destro quanto il testo dal sinistro (rientro 15 + i 2px che Montserrat lascia prima della lettera: misurato sulla foto, 18 e 18) */ /* la lista della tendina nostra (assets/js/tendina.js): un gradino più chiara del campo, la voce scelta col segno giallo */ :root{ --tendina-lista-fondo:var(--sf-2); --tendina-lista-bordo:var(--ln-f); --tendina-lista-scelta:var(--acido); --tendina-lista-ombra:0 18px 40px rgba(0,0,0,.5); } :root{ --tendina-dentro:17px; --tendina-freccia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f1f4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } .campo-aiuto{ color:var(--tx-2); font-size:.82rem } /* «Chi sei» nella registrazione (27/9/26, Marco: «3 selettori per ASCOLTATORE, GIORNALISTA, PODCASTER»). Un campo «Pulsanti (una scelta)» del modulo: tre riquadri affiancati, uno solo acceso. Il pallino della scelta c'è ma non si vede: si preme tutto il riquadro, e da tastiera si va con le frecce. */ .app .scelta-gruppo{ border:0; padding:0; margin:0 0 18px; min-width:0 } .app .scelta-gruppo legend{ padding:0; margin-bottom:8px; font-family:var(--f-dati); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2); } .app .scelta-pulsanti{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px } /* sul telefono tre in fila non ci stanno (in maiuscolo «Ascoltatore» è più largo del riquadro) e a capo ne andava uno solo: uno sotto l'altro, a tutta larghezza */ @media (max-width:520px){ .app .scelta-pulsanti{ grid-template-columns:minmax(0,1fr) } .app .scelta-pulsante span{ min-height:48px } } .app .scelta-pulsante{ position:relative; display:block; cursor:pointer; margin:0 } .app .scelta-pulsante input{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer } .app .scelta-pulsante span{ display:flex; align-items:center; justify-content:center; min-height:52px; padding:10px 8px; background:var(--sf); border:1px solid var(--ln-f); color:var(--tx); font-weight:700; font-size:.92rem; text-align:center; transition:border-color .15s, background .15s, color .15s; } .app .scelta-pulsante:hover span{ border-color:var(--tx-2) } .app .scelta-pulsante input:checked + span{ border-color:var(--acido); color:var(--acido); background:rgba(233,255,79,.07); box-shadow:inset 0 0 0 1px var(--acido) } .app .scelta-pulsante input:focus-visible + span{ outline:2px solid var(--acido); outline-offset:2px } .app .btn-primary, body.cd > .modal-overlay .btn-primary, .tc-consent-btn-accept{ background:var(--acido); color:#0d1122; border:0; font-weight:700; letter-spacing:.01em; } .app .btn-primary:hover{ filter:brightness(1.08) } .app .btn-secondary, body.cd > .modal-overlay .btn-secondary{ display:inline-block; background:none; border:1px solid var(--ln-f); color:var(--tx); padding:13px 22px; cursor:pointer; text-align:center; } .app .btn-secondary:hover{ border-color:var(--acido); color:var(--acido) } .app .btn-danger-outline{ border-color:color-mix(in srgb, var(--errore) 45%, var(--sf)); color:var(--errore) } .app .btn-danger-outline:hover{ border-color:var(--errore); color:var(--errore) } .app .auth-err{ color:var(--errore); font-size:.9rem } .app .save-confirm{ color:var(--acido); font-family:var(--f-dati); font-size:.74rem; letter-spacing:.08em } /* Le finestre del core (accesso, conferme, chiusura account): il markup è loro, il vestito è nostro. Senza queste righe escono bianche col pulsante rosso — il tema di un altro sito in mezzo a questo. */ .app .modal-overlay, body.cd > .modal-overlay{ background:rgba(6,9,20,.72) } .app .modal, body.cd > .modal-overlay .modal{ background:var(--sf-2); border:1px solid var(--ln-f); border-radius:0; color:var(--tx) } .app .modal-title, body.cd > .modal-overlay .modal-title{ font-family:var(--f-tit); font-size:1.35rem; font-weight:800; letter-spacing:-.02em; color:var(--tx); text-transform:none } .app .modal-close, body.cd > .modal-overlay .modal-close{ font-family:var(--f-ui); background:none; border:0; color:var(--tx-2); font-size:1.5rem; cursor:pointer } .app .modal-close:hover, body.cd > .modal-overlay .modal-close:hover{ color:var(--acido) } .app .auth-divider{ color:var(--tx-2); font-family:var(--f-dati); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase } .app .auth-modal-links{ display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--ln); padding-top:16px; margin-top:18px } .app .auth-modal-links a, .app .auth-modal-links button{ background:none; border:0; padding:0; font:inherit; color:var(--tx-2); cursor:pointer; text-align:left; } .app .auth-modal-links a:hover, .app .auth-modal-links button:hover{ color:var(--acido) } .app .confirm-title, body.cd > .modal-overlay .confirm-title{ font-family:var(--f-tit); font-size:1.2rem; font-weight:800; letter-spacing:-.02em; text-transform:none } .app .confirm-icon, body.cd > .modal-overlay .confirm-icon{ color:var(--acido) } .app .confirm-sub, .app .confirm-modal-msg, .app .step-sub, .app .privacy-label{ color:var(--tx-2) } .app .btn-danger-solid{ background:#c0392b; color:#fff } .app .btn-danger-solid:hover{ filter:brightness(1.08) } /* le caselle dei consensi nel modulo di registrazione (stesse classi dell'iscrizione) */ .app .auth-form .area-caselle{ margin:2px 0 18px } .area-rimandi{ margin-top:18px; color:var(--tx-2); display:flex; flex-wrap:wrap; gap:10px; align-items:baseline } .area-sep{ color:var(--ln-f) } .area-link{ background:none; border:0; padding:0; font:inherit; color:var(--acido); cursor:pointer; text-decoration:underline; text-underline-offset:3px } .app .danger-zone{ border:1px solid color-mix(in srgb, var(--errore) 45%, var(--sf)); background:color-mix(in srgb, var(--errore) 10%, transparent); padding:24px } .app .danger-zone-title{ font-size:1.05rem; font-weight:700; margin-bottom:10px } .app .danger-zone-text{ color:var(--tx-2); margin-bottom:18px } @media (max-width:980px){ /* IL MENU DELL'AREA SUL TELEFONO (30/9/26). Niente fila di linguette e niente colonna da mezzo schermo: sotto i 980 la struttura è quella del core (base-pubblico.css, la barra che entra da sinistra aperta da un pulsante che dice dove sei); qui il vestito, e meno aria sopra e sotto il titolo (Marco: «sistemare tutto quello spazio sopra tra breadcrumb e area riservata»). */ .app .account-shell{ display:block; padding-block:0 } .app #viewAccount .area-testa{ padding-block:14px 18px; margin-bottom:18px } .app #viewAccount .account-nav{ background:var(--sf); border-right:1px solid var(--ln) } /* E l'area non diventa una finestra a tutto schermo sopra la pagina: è una pagina del sito come le altre, con la sua testata e il suo piè di pagina. ⚠️ E NON DIMENTICARE IL FONDO. Quella finestra del core ha il fondo BIANCO: togliendole solo la posizione resta il bianco, sopra un sito scuro, e il titolo — che è bianco pure lui — sparisce. Il vestito cancella quello che non si rimette. */ .app .account-view{ position:static; inset:auto; z-index:auto; padding:0; overflow:visible; background:transparent } } /* ============================================================ COL MOUSE SOPRA, OGNI PULSANTE DIVENTA BIANCO CON LA SCRITTA BLU ============================================================ Scelta di Marco (22/9/26): *«sistemare l'hover su METTILO IN AGENDA e tutti i pulsanti — compresi quelli dei form dell'intero sito — con fondo bianco e scritta blu cultura digitale»*. Il blu è `--blu-fondo` (#22348f), lo stesso del pulsante «Accedi»: NON `--blu`, che è la tinta chiara pensata per il testo su fondo scuro e sul bianco sparisce. ⚠️ QUI DENTRO CI SONO ANCHE I PULSANTI DEL CORE (`.btn-primary`, `.btn-secondary`): i moduli del sito sono suoi, e un modulo che al passaggio del mouse si comporta diversamente dal resto si nota subito. ⚠️ E STA IN FONDO AL FOGLIO APPOSTA: una riga scritta prima perde contro una uguale scritta dopo, e questi pulsanti un `:hover` ce l'avevano già quasi tutti (il bordo acido dei filtri, il giallo del pulsante in agenda). ⚠️ `.app` davanti serve a battere `.app a{color:inherit}`, che vale due classi contro una: senza, sul bianco resta la scritta bianca. ⚠️ E I TAG RESTANO GIALLI. Sembrano pastiglie come i filtri, ma sono link verso la pagina di quel tag, non comandi: il giallo al passaggio del mouse su TUTTI i link è una scelta del 21/9 e vale ancora. Qui dentro ci sono solo le cose che si premono — filtri, pagine, pulsanti. ⚠️ SOLO DOVE C'È UN MOUSE (18/10/26). Col dito il «passaggio» resta acceso dopo il tocco: dopo «Salva nuova password» il pulsante «Accedi», comparso proprio sotto il dito, restava bianco come se fosse un altro pulsante. */ @media (hover: hover){ .app .chip:hover, .app .pagine a:hover, .app .embed-att .apri:hover, .app .campo button:hover, .app .iscr-campo button:hover, .app .btn-primary:hover, .app .btn-secondary:hover, .app .pr-bt:hover, .app .tb-bt:hover, .app button[type="submit"]:hover, .app input[type="submit"]:hover, body.cd > .modal-overlay .btn-primary:hover, body.cd > .modal-overlay .btn-secondary:hover, body.cd .tc-consent-btn:hover{ background:#fff; color:var(--blu-fondo); border-color:#fff; } /* Le icone dentro un pulsante seguono la scritta, sennò restano gialle sul bianco e si perdono. */ .app .chip:hover .ico, .app .fl-apri:hover .ico, .app .pr-bt:hover .ico, .app .tb-bt:hover .ico, .app .btn-primary:hover .ico, .app .btn-secondary:hover .ico{ color:var(--blu-fondo) } } /* Quello che prima stava scritto dentro gli elementi (style="…"), e si leggeva nel sorgente di ogni pagina. Marco, 23/9/26: «voglio totale pulizia». */ .sprite{position:absolute} .grande .tondo svg, .evid .tondo svg{color:#101733} .piede .logo{height:28px; width:auto} .fascia.fascia-dopo-filtri{padding-top:26px} .fascia.fascia-risultati{padding-top:18px} .fascia.fascia-aperta-sotto{padding-bottom:0} /* ============================================================ I PEZZI CHE IL CORE E GLI ADDON APPENDONO AL CORPO ============================================================ Banner dei cookie, pulsanti galleggianti (accessibilità, preferenze), le loro finestre: li stampa Privacy (o un altro addon) direttamente dentro , FUORI da .app — e lì valeva il vestito di Bento, il tema padre: rosso, bianco, angoli tondi. Marco, 23/9/26: «prende lo stile vecchio… deve prendere sempre i font e i colori che sono settati nel tema corrente». Due righe fanno il lavoro: 1. qui sopra le regole di finestre e pulsanti valgono anche per `body.cd > .modal-overlay`, cioè per le finestre appese al corpo; 2. qui sotto i NOMI che Bento usa per vestire quei pezzi (--dark, --red, --bt-card…) prendono i colori di questo sito. Un pezzo nuovo che usa gli stessi nomi si veste da solo. Il banco (prove-lab.py, «I pezzi del core vestiti dal tema») legge colori e caratteri di ogni pezzo e diventa rosso se uno non è di questo tema. */ body.cd .tc-consent-banner, body.cd .tc-linguette, body.cd .back-to-top, body.cd .whatsapp-float, body.cd > .modal-overlay, body.cd .addi-installa-fl, body.cd .addi-installa-fatto{ --dark:var(--sf-2); --bg:var(--sf); --white:var(--sf-2); --text:var(--tx); --muted:var(--tx-2); --border:var(--ln); --red:var(--acido); --radius:0px; --shadow:none; --bt-card:var(--sf-2); --bt-ink:var(--tx); --bt-accent:var(--acido); --bt-accent-ink:var(--sf); --bt-line:var(--ln); --bt-shadow:none; --bt-pill:0px; --font-display:var(--f-tit); font-family:var(--f-ui); color:var(--tx); } /* La pagina della password quando il sito è privato (core: addi_sito_privato_pagina() in api/core.php). È un senza .app né .cd, vestito coi nomi di Bento: qui quei nomi prendono i colori e il carattere di Cultura. */ body.addi-privato{ --bt-ground:var(--sf); --bt-card:var(--sf-2); --bt-ink:var(--tx); --bt-line:var(--ln-f); --bt-accent:var(--acido); --bt-accent-ink:var(--sf); --bt-danger:var(--errore); --bt-r:0px; --bt-r-sm:0px; --bt-pill:0px; --bt-shadow:none; --bt-font-display:var(--f-tit); --bt-font-body:var(--f-ui); } /* Alto contrasto del pannello di accessibilità (26/9/26). La regola della piattaforma tocca i colori di Bento, pensati per i temi chiari; qui quelli di Cultura: il testo secondario diventa bianco pieno, i fondi più neri, le linee si vedono. */ html.tc-a11y-contrast{ --tx:#ffffff; --tx-2:#ffffff; --sf:#000000; --sf-2:#07090f; --sf-3:#0e1220; --ln:#7d88b3; --ln-f:#a3acd1; --blu:#c3d0ff } /* le barre dei canali coi colori dei marchi (Spotify verde con la scritta bianca: 2,6:1): in alto contrasto nere, col bordo e la scritta bianchi */ html.tc-a11y-contrast a.barra{ background:#000 !important; color:#fff !important; box-shadow:inset 0 0 0 1px #fff } /* Quello che Bento scrive a mano, senza nome: bianchi, grigi, il verde. */ body.cd .tc-consent-banner{ background:var(--sf-2); color:var(--tx); border-top:1px solid var(--ln); box-shadow:none } body.cd .tc-consent-text{ color:var(--tx) } body.cd .tc-consent-close{ color:var(--tx-2); border-radius:0 } body.cd .tc-consent-close:hover{ color:var(--acido); background:none } body.cd .tc-consent-btn{ border-radius:0; font-family:var(--f-ui) } body.cd .tc-consent-btn-accept{ color:var(--sf); border:1px solid var(--acido) } body.cd .tc-consent-btn-reject{ color:var(--tx); border:1px solid var(--ln-f); background:none } body.cd .tc-consent-btn-customize{ color:var(--tx-2); background:none } /* La linguetta di accessibilità e cookie (26/9/26, core: base-pubblico.css): spigoli vivi, il fondo dei riquadri, la linea chiara; il pallino «preferenze attive» è acido. */ body.cd .tc-linguette{ --bt-r-sm:0px } body.cd .tc-linguetta{ background:var(--sf-2); color:var(--tx); border-color:var(--ln-f); box-shadow:none } body.cd .tc-linguetta-scritta{ font-family:var(--f-dati) } @media (hover:hover){ body.cd .tc-linguetta:hover{ background:#fff; color:var(--blu-fondo); border-color:#fff } } /* «Installa l'app» sul computer (29/9/26, core: base-pubblico.css e webapp-installa.js), dalla bozza approvata: giallo, spigoli vivi, le lettere dei pulsanti del sito; accanto alle linguette e galleggia (il moto è del core). Sul telefono no: lì l'invito sta in fondo al menu, e il pulsante esce dove esce la barra a schede. */ body.cd .addi-installa-fl, body.cd .addi-installa-fatto{ --bt-r-sm:0px } body.cd .addi-installa-bt{ box-shadow:0 6px 18px rgba(0,0,0,.42) } body.cd .addi-installa-apri{ font-family:var(--f-dati); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase } body.cd .addi-installa-x{ border-color:var(--ln-f) } @media (hover:hover){ body.cd .addi-installa-apri:hover{ background:#fff } body.cd .addi-installa-x:hover{ color:var(--acido) } } body.cd .addi-installa-apri:focus-visible, body.cd .addi-installa-x:focus-visible{ outline-color:#fff } body.cd .addi-installa-come, body.cd .addi-installa-fatto{ border-color:var(--ln-f); box-shadow:0 12px 32px rgba(0,0,0,.45) } body.cd .addi-installa-come-t{ font-family:var(--f-dati); letter-spacing:.14em; color:var(--acido) } body.cd .addi-installa-ok{ border-radius:0 } /* i passi (nel riquadro del pulsante e in fondo al menu): numeri e icone nei quadrati del sito */ body.cd .addi-installa-n{ border-color:var(--acido); color:var(--acido); border-radius:0; font-family:var(--f-dati) } body.cd .addi-installa-i{ background:var(--sf-2); border-color:var(--ln-f); color:var(--acido); border-radius:0 } @media (max-width:980px){ body.cd .addi-installa-fl, body.cd .addi-installa-fatto{ display:none } } /* IL PULSANTE WHATSAPP (11/10/26, core: modules/plus-features e base-pubblico.css). Marco: «il pulsante whatsapp non funziona»: su questo sito non c'era. Al computer in basso a destra, sopra la barra del lettore, a filo di «torna su» (stesso lato, stessa misura, spigoli vivi), col fondo dei riquadri e il verde di WhatsApp sull'icona come nei tasti «Condividi»; «torna su» gli sale sopra. Al telefono la voce sta nella barra a schede (footer.php) e questo pulsante lo nasconde il copione dell'addon. */ body.cd .whatsapp-float{ right:20px; bottom:calc(20px + var(--addi-fondo) + var(--addi-banner-h,0px)); width:48px; height:48px; border-radius:0; background:var(--sf-2); color:#25d366; border:1px solid var(--ln-f); box-shadow:0 6px 20px rgba(0,0,0,.4); transition:border-color .18s, transform .18s } body.cd .whatsapp-float svg{ width:24px; height:24px } @media (hover:hover){ body.cd .whatsapp-float:hover{ background:var(--sf-2); border-color:var(--acido); transform:translateY(-1px) } } body.cd .whatsapp-float:focus-visible{ outline:2px solid var(--acido); outline-offset:2px } body.cd:has(.whatsapp-float:not(.hidden)) .su{ bottom:calc(80px + var(--tab-h) + var(--aud-h) + env(safe-area-inset-bottom,0px) + var(--addi-banner-h,0px)) } /* nella barra a schede la voce è vestita come le altre (.tabbar a); l'icona nel verde di WhatsApp */ .tabbar .tabbar-whatsapp .tabbar-icon{ color:#25d366 } /* con WhatsApp le voci tornano sei: «WhatsApp» è la scritta più lunga (61px) e a 375px la voce ne è larga 60, quindi usciva «WhatsA…». Senza il respiro ai lati della scritta e con le lettere un filo più strette ci stanno tutte fino a 360px (misurato). Solo quando la voce c'è: con cinque voci la barra resta com'era. */ @media (max-width:980px){ .tabbar:has(> .tabbar-whatsapp:not(.hidden)) a > span:last-child, .tabbar:has(> .tabbar-whatsapp:not(.hidden)) button > span:last-child{ padding:0; letter-spacing:-.02em } } /* Gli interruttori delle due finestre (accessibilità, cookie): acceso è GIALLO col pallino scuro (Marco, 26/9/26: «rendere gialli i pulsanti quando vengono attivati»). Prima acceso e spento avevano lo stesso fondo grigio: si spostava solo il pallino, e non si capiva cosa fosse acceso. */ body.cd > .modal-overlay .tc-consent-switch input:checked + .tc-consent-switch-slider{ background:var(--acido) } body.cd > .modal-overlay .tc-consent-switch input:checked + .tc-consent-switch-slider::before{ background:var(--sf) } body.cd > .modal-overlay .tc-consent-switch input:focus-visible + .tc-consent-switch-slider{ outline:2px solid var(--acido); outline-offset:2px } body.cd > .modal-overlay .tc-consent-cat-locked{ color:var(--acido) } body.cd > .modal-overlay .tc-consent-switch-slider{ background:var(--ln-f); border-radius:0 } body.cd > .modal-overlay .tc-consent-switch-slider::before{ background:var(--tx); border-radius:0; box-shadow:none } body.cd > .modal-overlay .tc-a11y-feature-icon{ border-radius:0 } /* ⚠️ LA FASCIA IN BASSO LA DICHIARA IL TEMA. Il core alza banner e galleggianti di --addi-fondo; qui vale lettore + barra a schede + margine dell'iPhone. Sta su body e non su :root: --aud-h cambia su body.ha-barra, e un token calcolato su :root lo leggerebbe sempre a zero. */ body.cd{ --addi-fondo:calc(var(--tab-h) + var(--aud-h) + var(--sicuro)) } /* ============================================================ BENVENUTO E PARTNER IN PRIMA PAGINA (24/9/26) ============================================================ Vengono dalla bozza della landing di culturadigitale.live: Marco ha voluto la testa con la foto sopra «La prossima puntata» (senza «Entra nel magazine») e i partner in fondo, prima di «Una puntata al mese». */ /* La luce dietro agli attori è nel blu notte del sito (--sf-3, i riquadri in rilievo), non nel blu elettrico #22348f: «un colore totalmente diverso» dal resto della pagina (Marco, 24/9/26). */ .bv{position:relative; overflow:hidden; background: radial-gradient(55% 75% at 74% 42%, var(--sf-3) 0%, color-mix(in srgb, var(--sf-3) 45%, transparent) 45%, transparent 75%), var(--sf)} .bv-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:32px; align-items:end; padding-top:64px} .bv-testo{padding-bottom:64px; display:flex; flex-direction:column; gap:22px} .bv-occhiello{margin:0; font-size:.8rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--tx)} .app .bv-tit{margin:0; font-size:clamp(3.1rem,7.4vw,6rem); line-height:.9; font-weight:800; letter-spacing:-.045em; text-transform:uppercase; color:var(--tx)} .bv-tit span{display:block; color:var(--chiave)} .bv-lead{margin:0; font-size:1.15rem; line-height:1.55; color:var(--tx); max-width:34em} .bv-azioni{display:flex; flex-wrap:wrap; gap:12px} .app .bv-bt{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border:1px solid var(--acido); color:var(--tx); font-weight:700; font-size:.9rem; text-decoration:none; transition:background .15s,color .15s} .app .bv-bt:hover{background:#fff; color:var(--blu-fondo); border-color:#fff} .bv-bt svg{width:15px; height:15px} .bv-numeri{list-style:none; margin:6px 0 0; padding:18px 0 0; border-top:1px solid var(--ln-f); display:flex; flex-wrap:wrap; gap:10px 28px; font-size:.9rem; color:var(--tx)} .bv-numeri b{color:var(--chiave); font-weight:800; font-size:1.25rem; margin-right:5px; font-variant-numeric:tabular-nums} .bv-foto{margin:0; align-self:end; display:flex; justify-content:center} .app .bv-foto img{display:block; width:auto; max-width:100%; height:auto; max-height:560px; -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%); mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)} #ultima{scroll-margin-top:84px} @media (max-width:860px){ .bv-in{grid-template-columns:1fr; gap:0; padding-top:40px} .bv{background:radial-gradient(90% 45% at 50% 78%, var(--sf-3) 0%, transparent 75%), var(--sf)} .bv-testo{padding-bottom:12px} /* sul telefono i tre numeri stanno al centro (Marco, 24/9/26) */ .bv-numeri{justify-content:center; text-align:center} /* ⚠️ IL POSTO DELLA FOTO PRIMA CHE ARRIVI (5/10/26). Con «width:auto» la foto, finché non è arrivata, è 0×0: qui sta sotto il testo, e arrivando alla Home col cambio pagina (dal catalogo: Marco, «il ritorno da catalogo a home…») tutto quello che segue scendeva di colpo di 300px quando arrivava, e tornando «indietro» il punto della pagina finiva più in basso. Con una larghezza decisa il posto c'è da subito (le proporzioni le dicono width e height dell'immagine). Sopra gli 860px la foto sta accanto al testo e l'altezza non cambia: lì resta com'era. */ .app .bv-foto img{width:100%; max-width:min(100%,560px)} } .prt{padding-block:34px 56px} .prt-gr{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ln); border-left:1px solid var(--ln)} .prt-gr li{display:grid; place-items:center; min-height:132px; padding:24px 28px; border-right:1px solid var(--ln); border-bottom:1px solid var(--ln); background:var(--sf-2)} .app .prt-gr img{display:block; max-width:min(100%,190px); max-height:48px; width:auto; height:auto; filter:brightness(0) invert(1); opacity:.92; transition:opacity .15s} .app .prt-gr .prt-quadro{max-height:76px} .prt-gr li:hover img{opacity:1} .prt-nota{margin:20px 0 0; font-size:.92rem; color:var(--tx)} .app .prt-nota a{color:var(--chiave); font-weight:700; text-decoration:none} .app .prt-nota a:hover{text-decoration:underline} @media (max-width:820px){ .prt-gr{grid-template-columns:repeat(2,minmax(0,1fr))} .prt-gr li{min-height:104px; padding:20px} .app .prt-gr img{max-height:38px} .app .prt-gr .prt-quadro{max-height:60px} } @media (prefers-reduced-motion:reduce){ .app .bv-bt,.app .banda-azioni a,.app .tf .tutti,.app .fl-apri,.app .prt-gr img{transition:none} } /* LA FOTO SALE E SCENDE (24/9/26) — l'unico effetto rimasto: Marco ha tolto luce, effetto sotto, entrata, mouse e parallasse. */ @media (prefers-reduced-motion:no-preference){ .app .bv-foto img{animation:bv-galleggia 7s ease-in-out infinite} } @keyframes bv-galleggia{0%,100%{translate:0 0} 50%{translate:0 -12px}} /* LE INTERVISTE ARRIVANO IN FONDO ALLA SPALLA (24/9/26). La colonna si allunga quanto la riga della griglia, e lo spazio che avanza (meno di una riga: le righe in più le accende il copione) se lo dividono le righe, ognuna col contenuto al centro. L'altezza la mette il copione (quella del contenuto della spalla). Solo con le due colonne affiancate. */ /* ⚠️ «hidden» da solo non basta: .int-riga ha display:grid e vince. */ .due-int .int-riga[hidden]{display:none} @media (min-width:981px){ .due > .due-int{display:flex; flex-direction:column} .due-int .int-riga{flex:1 0 auto; align-content:center} } /* IL PIEDE (24/9/26, Marco): titoli delle colonne in giallo e maiuscolo, niente numeri accanto alle sezioni, e in «Redazione» l'email e le icone dei social. In fondo al foglio perché la regola dei caratteri «dati» più sopra (.app .piede b.tit) gli toglieva maiuscolo e colore. */ .app .piede b.tit{color:var(--chiave); text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:.74rem; margin-bottom:14px} .app .piede .piede-mail{display:inline-flex; align-items:center; gap:8px; word-break:break-all} .piede-mail svg{flex:none; color:var(--chiave)} .piede-social{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px} .app .piede .piede-social a{width:40px; height:40px; display:grid; place-items:center; padding:0; margin:0; border:1px solid var(--ln-f); color:var(--tx); transition:background .15s, color .15s, border-color .15s} .app .piede .piede-social a:hover{background:#fff; color:var(--blu-fondo); border-color:#fff} /* LA LENTE IN ALTO ANCHE SUL TELEFONO, accanto al carrello (11/10/26). Dal 24/9 sotto i 980px stava solo nelle schede in basso; con sei schede, sul telefono vero Home e Altro si tagliavano ai bordi (Marco: «dobbiamo rimettere l'icona cerca in alto vicino al carrello»). Le schede sono tornate cinque. */ /* I LINK IN FONDO A DESTRA (24/9/26): Privacy Policy e Cookie Policy nella riga del copyright, spinti a destra; sul telefono vanno a capo sotto. */ .app .piede .coda{align-items:center} .coda-legali{display:flex; flex-wrap:wrap; gap:6px 20px; margin-left:auto} .app .piede .coda-legali a{display:inline; padding:0; color:var(--tx)} .app .piede .coda-legali a:hover{color:var(--acido)} @media (max-width:620px){ .coda-legali{margin-left:0; width:100%} } /* LE PAGINE-DOCUMENTO (Privacy, Cookie, Accessibilità) vestite da Cultura. I loro riquadri (servizi, diritti, indice) usano i nomi di Bento: qui gli si danno i colori di Cultura. */ .doc-legale{--border:var(--ln); --white:var(--sf-2); --radius:0px; --text:var(--tx); --red:var(--acido); --muted:var(--tx-2)} .doc-legale .testo .pp-toc,.doc-legale .testo .pp-right-card,.doc-legale .testo .cookie-service-card, .doc-legale .testo .pp-service-count span{background:var(--sf-2); border-color:var(--ln); color:var(--tx)} .doc-legale .testo .pp-toc a{color:var(--tx)} .doc-legale .testo .pp-toc a:hover{color:var(--acido)} .doc-legale .testo .cookie-service-badge{color:var(--tx)} .doc-legale .testo table{width:100%; border-collapse:collapse} .doc-legale .testo th,.doc-legale .testo td{border:1px solid var(--ln); padding:8px 10px; text-align:left; vertical-align:top} /* ---------- LA PAGINA CHE NON C'È (404, 25/9/26) ---------- Marco: «una 404 che possa essere comunque utile». Il numero è scritto normale (lo «0» a cerchio non è piaciuto). Le distanze fra i blocchi le dà .nf col gap, non i margini dei pezzi. */ .nf{display:flex; flex-direction:column; gap:48px; padding-block:30px 72px} .nf-testa{display:grid; grid-template-columns:auto minmax(0,1fr); gap:56px; align-items:center} .nf-num{display:block; font-family:var(--f-tit); font-weight:800; font-size:clamp(96px,15vw,208px); line-height:.9; letter-spacing:-.04em; color:var(--tx)} .nf-testo{display:flex; flex-direction:column; align-items:flex-start; gap:16px} .nf-testo h1{margin:0; font-family:var(--f-tit); font-weight:800; font-size:clamp(30px,3.6vw,48px); line-height:1.08; letter-spacing:-.02em; color:var(--tx)} .nf-testo .descr{margin:0; color:var(--tx-2); font-size:1.02rem; line-height:1.6} .nf-azioni{display:flex; flex-wrap:wrap; gap:12px; padding-top:6px} .app .nf-primo{background:var(--acido); border-color:var(--acido); color:var(--blu-fondo)} .app .nf-primo:hover{background:#fff; border-color:#fff; color:var(--blu-fondo)} .nf .cercona{margin-top:0} .nf-forse .tf{margin-bottom:22px} .nf-sezioni{display:flex; flex-direction:column; gap:14px} .nf-sezioni .et{font-family:var(--f-dati); font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-2)} /* a riga libera: l'ultima sezione si allarga invece di restare sola in mezza riga */ .nf-sez{display:flex; flex-wrap:wrap; gap:10px} .nf-sez-v{flex:1 1 170px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; background:var(--sf-2); border-left:4px solid var(--ln-f); color:var(--tx); text-decoration:none; transition:background .15s} .nf-sez-v:hover{background:var(--sf-3)} .nf-sez-v b{font-weight:700} .nf-sez-v span{font-size:.86rem; color:var(--tx-2); font-variant-numeric:tabular-nums} .nf-sez-v.pun{border-left-color:var(--pun-n)} .nf-sez-v.int{border-left-color:var(--int-n)} .nf-sez-v.eve{border-left-color:var(--eve-n)} .nf-sez-v.lib{border-left-color:var(--lib-n)} .nf-sez-v.str{border-left-color:var(--str-n)} .nf-sez-v.new{border-left-color:var(--new-n)} @media (max-width:820px){ .nf{gap:36px; padding-block:18px 56px} .nf-testa{grid-template-columns:1fr; gap:22px} } /* sul telefono: testi al centro e pulsanti a tutta larghezza (Marco, 25/9/26) */ @media (max-width:820px){ .nf-testa{justify-items:center; text-align:center} .nf-testo{align-items:center} .nf-azioni{flex-direction:column; align-self:stretch} .app .nf-azioni .bv-bt{justify-content:center; width:100%} } /* ---------- LA CODA DELLE PUNTATE (bozza B approvata, 25/9/26) ---------- A sinistra la puntata grande, a destra le quattro che vengono dopo; il copione (accendiCoda in rivista.js) le fa entrare una alla volta. ⚠️ TUTTO ALLINEATO (Marco: «non voglio quello spazio sotto all'immagine principale»). L'altezza la decide la copertina grande, che è quadrata; la colonna sta DENTRO quell'altezza (appoggiata sopra, position:absolute, così non la allunga) divisa in quattro righe uguali: la prima parte in cima alla grande, l'ultima finisce in fondo. Niente spazio dentro le voci (la prima e l'ultima ne avevano metà, e le loro miniature venivano più grandi): lo spazio sta fra le voci, col filetto a metà. La miniatura è alta quanto la riga (flex, non griglia: una colonna «auto» la calcolava larga il doppio). */ .coda{align-items:stretch} .coda-scena{position:relative; display:grid; overflow:hidden; align-self:start} .coda-scena > .grande{grid-area:1 / 1} .coda-scena > .grande img{width:100%; height:100%; object-fit:cover; display:block} .coda-colonna{position:relative; min-height:0} .coda-colonna .coda-lista{position:absolute; inset:0; display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); row-gap:24px; overflow:hidden} .coda-lista .tre-voce{display:flex; gap:16px; align-items:stretch; padding:0; border-bottom:0; min-height:0; position:relative; background:var(--sf)} .coda-lista .tre-voce:not(:last-child)::after{content:''; position:absolute; left:0; right:0; bottom:-12px; height:1px; background:var(--ln)} .coda-lista .tre-voce .foto{height:100%; aspect-ratio:1; width:auto; flex:none} .coda-lista .tre-voce .foto img{width:100%; height:100%; object-fit:cover; display:block} .coda-lista .tre-voce > span:last-child{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; overflow:hidden} .app .coda-lista .tre-voce h3{-webkit-line-clamp:2} @media (min-width:1300px){ .app .coda-lista .tre-voce h3{-webkit-line-clamp:3} } .coda-barra{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.14); z-index:6; pointer-events:none} .coda-barra i{display:block; height:100%; width:0; background:var(--acido)} .coda-barra i.va{width:100%; transition-property:width; transition-timing-function:linear} /* sul telefono la colonna va sotto la grande, e torna di altezza sua */ @media (max-width:980px){ .coda-colonna .coda-lista{position:static; grid-template-rows:none; row-gap:28px} .coda-lista .tre-voce:not(:last-child)::after{bottom:-14px} .coda-lista .tre-voce .foto{height:auto; width:110px} } @media (prefers-reduced-motion:reduce){ .coda-barra{display:none} } /* ---------- IL MODULO DI ISCRIZIONE (25/9/26) ---------- È quello di Pannello → Moduli contatto (partials/iscrizione.php): la riga email + pulsante, poi i consensi. Il passo lo dà .iscr-modulo col gap. */ .iscr-modulo{display:flex; flex-direction:column; gap:12px; width:100%} /* ⚠️ la colonna del modulo ha una larghezza sua: «auto» si allargava sul testo dei consensi scritto su una riga sola, e il titolo accanto si stringeva */ .iscr-in{grid-template-columns:minmax(0,1fr) minmax(0,470px)} .iscr-modulo .iscr-campo input{min-width:0; flex:1} .iscr-extra{border:0; padding:14px 20px; font:inherit; font-size:.9rem; background:#fff; color:#101733; width:100%} .iscr-caselle{display:flex; flex-direction:column; gap:10px} .iscr-spunta{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; font-size:.8rem; line-height:1.5; color:var(--tx-2); cursor:pointer; text-align:left} .iscr-spunta input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--acido); cursor:pointer} .iscr-spunta a{color:var(--tx); text-decoration:underline; text-underline-offset:2px} .iscr-nota{margin:0; font-size:.8rem; color:var(--tx-2)} .iscr-trappola{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .iscr-esito{margin:0; font-size:.86rem; font-weight:600; line-height:1.45} .iscr-esito:empty{display:none} .iscr-esito.ok{color:var(--acido)} .iscr-esito.no{color:var(--errore)} /* l'avviso di chi arriva da un link in un'email (conferma, cancellazione dalla newsletter) */ .avviso-pagina{margin:18px auto 0; padding:12px 16px; border-left:4px solid var(--acido); background:var(--sf-2); color:var(--tx); font-weight:600; font-size:.95rem; line-height:1.45} .avviso-pagina.no{border-left-color:var(--errore)} /* sul telefono il modulo in fondo è a tutta larghezza, pulsante compreso */ @media (max-width:820px){ .iscr-in{grid-template-columns:1fr} } @media (max-width:560px){ .iscr-modulo .iscr-campo{flex-direction:column} .iscr-modulo .iscr-campo button{width:100%} } /* ---------- CONDIVIDI, in fondo all'articolo (25/9/26) ---------- Marco: «la possibilità di condivisione dell'articolo, in basso». Link semplici (addi_link_condivisione() nel core): niente programmi dei social, niente cookie. Ogni tasto ha il nome scritto, non solo l'icona. L'icona ha il colore del social; LinkedIn e Facebook nel loro blu chiaro, perché quello pieno sul fondo scuro si legge poco (contrasto 3,0 e 4,1 → 6,3). Sul telefono i tasti vanno a due per riga, larghi tutta la cella, e in testa c'è «Condividi…» del telefono (WhatsApp, Instagram, messaggi: quello che ha installato). */ .condividi{margin-top:34px; padding-top:22px; border-top:1px solid var(--ln)} .condividi .sp-tit{margin-bottom:14px} .cond-fila{display:flex; flex-wrap:wrap; gap:10px} .cond-tasto{display:inline-flex; flex:1 1 auto; justify-content:center; align-items:center; gap:10px; min-height:44px; padding:0 16px; border:1px solid var(--ln); background:var(--sf-2); color:var(--tx); font-family:var(--f-ui); font-size:.9rem; font-weight:600; line-height:1; cursor:pointer; transition:border-color .18s, transform .18s; text-decoration:none} .cond-tasto[hidden]{display:none} /* il display qui sopra batteva l'attributo hidden: «Condividi…» si vedeva anche dove il browser non sa condividere */ .cond-tasto:hover{border-color:var(--acido); transform:translateY(-1px)} .cond-tasto:focus-visible{outline:2px solid var(--acido); outline-offset:2px} .cond-tasto svg{width:18px; height:18px; flex-shrink:0} .cond-tasto.whatsapp svg{color:#25d366} .cond-tasto.linkedin svg{color:#4a9eff} .cond-tasto.facebook svg{color:#5b9dff} .cond-tasto.x svg{color:var(--tx)} .cond-tasto.telegram svg{color:#2aabee} .cond-tasto.email svg,.cond-tasto.link svg{color:var(--tx-2)} .cond-tasto.telefono{background:var(--acido); border-color:var(--acido); color:#101733} .cond-tasto.telefono svg{color:#101733} .cond-esito{margin:10px 0 0; font-size:.86rem; font-weight:600; color:var(--acido)} .cond-esito:empty{display:none} .app .cond-tasto{border-radius:var(--r-s); font-family:var(--f-ui); font-weight:700; font-size:.9rem; letter-spacing:0} /* «Condividi…» e «Copia il link» sono