, non un'immagine, quindi prende width e
height ma non object-fit (resta una griglia centrata sulla sua etichetta).
.articolo__figura NON e' qui: la sua immagine sta annidata in un
e la figura contiene anche la , che
`overflow:hidden` taglierebbe. La' la proporzione sta gia' sull'![]()
(~riga 519) e funziona a qualunque profondita' di annidamento. */
.hero__figura,
.card__figura,
.lead__figura { aspect-ratio: 16 / 9; overflow: hidden; }
/* ⚠ Il va portato in altezza PRIMA dell'![]()
, e l'![]()
va preso a
qualunque profondita': con il solo `> img` la regola non raggiungeva niente,
perche' il figlio diretto della figura e' il . Misurato in
produzione l'11/09/2026 dopo il primo tentativo: hero 506x284 con dentro
un'immagine 504x265 — venti pixel di vuoto, la regola scritta e inerte. */
.hero__figura > picture,
.card__figura > picture,
.lead__figura > picture,
.hero__figura img, .hero__figura .ph,
.card__figura img, .card__figura .ph,
.lead__figura img, .lead__figura .ph {
display: block; width: 100%; height: 100%;
}
.hero__figura img,
.card__figura img,
.lead__figura img { object-fit: cover; }
/* ==========================================================================
Homepage 1a — apertura editoriale
========================================================================== */
.apertura {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: var(--gutter);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--color-divider);
}
.hero { display: flex; flex-direction: column; gap: var(--space-3); }
.hero__figura { margin: 0; } /* proporzione: sezione "Figure editoriali" */
.hero__titolo {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-9); line-height: 1.08; letter-spacing: -.015em;
margin: 0; text-wrap: pretty;
}
.hero__titolo a { color: inherit; text-decoration: none; }
.hero__titolo a:hover { color: var(--color-accent); }
.hero__sommario {
font-size: var(--fs-4); line-height: 1.6; margin: 0; max-width: 60ch;
color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.secondari { display: flex; flex-direction: column; gap: var(--space-4); }
.secondario {
display: flex; flex-direction: column; gap: var(--space-2);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-divider);
}
.secondario:last-child { padding-bottom: 0; border-bottom: 0; }
.secondario__titolo {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-6); line-height: 1.12; margin: 0;
}
.secondario__titolo a { color: inherit; text-decoration: none; }
.secondario__titolo a:hover { color: var(--color-accent); }
/* Intestazione di rubrica: titolo, filetto elastico, link di sezione. */
.rubrica {
display: flex; align-items: baseline; gap: var(--space-3);
margin: var(--space-5) 0 var(--space-3);
}
.rubrica h2 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-5); margin: 0;
text-transform: uppercase; letter-spacing: .06em;
}
.rubrica__filetto { flex: 1; height: 1px; background: var(--color-divider); }
.rubrica a { color: var(--color-accent); text-decoration: none; }
/* ---------------------------------------------------------------------------
Griglie di card: le colonne rispondono alla COLONNA, non alla finestra
(11/09/2026, Passo 2 di docs\analisi-interfaccia.md)
IL DIFETTO. Erano `repeat(3, 1fr)` fino a 760px di FINESTRA e `1fr` sotto:
tre colonne o una, senza niente in mezzo, e con la soglia presa sulla
finestra invece che sullo spazio davvero disponibile. Misurato: a 761px le
card sono tre da 201, a 759 una da 690 — fattore 3,4 in un pixel. E il punto
peggiore non era nemmeno quello: a 1101px, dove la colonna laterale c'e'
ancora, erano tre da 191 (cioe' 107 di altezza: una striscia).
PERCHE' auto-fit DA SOLO NON BASTA. La prima stesura era
`repeat(auto-fit, minmax(260px, 1fr))`, e misurandola e' saltato fuori il
guaio: queste griglie hanno un numero FISSO di card — tre in homepage,
quattro in sezione. Tre card in due colonne lasciano la terza da sola con
mezza riga vuota accanto, cioe' esattamente il difetto che stiamo togliendo
("i vuoti che si vedono"). auto-fit e' lo strumento giusto per elenchi di
lunghezza variabile, non per una griglia che ne contiene sempre tre.
LA SOLUZIONE, in due parti:
1. Le soglie guardano la LARGHEZZA DELLA COLONNA (@container), non quella
della finestra. E' la correzione della radice comune di §2.1-2.3: la
stessa finestra da 1101px dava alla griglia 751px di spazio con la
sidebar accanto e 1032 senza, e una regola scritta sulla finestra non
puo' distinguere i due casi. Una scritta sulla colonna non ha bisogno di
distinguerli, perche' misura la cosa giusta.
2. La card che resterebbe sola occupa la riga intera. `:nth-child(3):last-child`
si avvera solo quando le card sono ESATTAMENTE tre: se un domani il
template ne stampa quattro, la regola si spegne da sola invece di fare
danni.
auto-fit resta come base per i browser senza @container: peggio delle
soglie qui sotto, ma molto meglio del salto 3->1 che c'era prima.
`min(260px, 100%)` e non `260px` perche' una traccia minima piu' larga del
contenitore sfonderebbe la pagina in orizzontale. */
.griglia > main { container-type: inline-size; container-name: contenuto; }
.griglia-card { display: grid; gap: var(--space-5); }
.griglia-card--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.griglia-card--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-5); }
/* Tre card: tre colonne finche' restano leggibili (>= ~240px di fotografia). */
@container contenuto (min-width: 780px) {
.griglia-card--3 { grid-template-columns: repeat(3, 1fr); }
}
@container contenuto (min-width: 540px) and (max-width: 779.98px) {
.griglia-card--3 { grid-template-columns: repeat(2, 1fr); }
.griglia-card--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}
@container contenuto (max-width: 539.98px) {
.griglia-card--3 { grid-template-columns: 1fr; }
}
/* Quattro card: due colonne, che le dispongono 2+2 senza mai lasciare orfane. */
@container contenuto (min-width: 620px) {
.griglia-card--2 { grid-template-columns: repeat(2, 1fr); }
}
@container contenuto (max-width: 619.98px) {
.griglia-card--2 { grid-template-columns: 1fr; }
}
/* Una card sola — succede nelle sezioni con pochi articoli — prende tutta la
riga invece di stare in mezza e lasciare l'altra meta' bianca. */
.griglia-card > :only-child { grid-column: 1 / -1; }
/* Due misure che vivevano negli attributi style dei template (11/09/2026,
Passo 3). Erano `padding:22px 0` ripetuto in tre file e `padding:40px 0` in
quattro: valori fuori da qualunque scala, invisibili a chi legge il CSS
perche' il CSS non li conteneva, e impossibili da cambiare in un posto solo.
Un valore scritto nel markup e' un valore che nessuno rivedra' mai. */
.griglia-card--spaziata { padding: var(--space-5) 0; }
.stato-vuoto { padding: var(--space-8) 0; }
.card { text-decoration: none; color: inherit; }
.card__figura { margin: 0; } /* proporzione: sezione "Figure editoriali" */
/* .card--larga aveva la sua eccezione a 16/9: ora e' la regola, e l'eccezione
non serve piu'. Se un domani una variante vuole una proporzione diversa, la
dichiara qui e vince per specificita'. */
/* Contenuto a pagamento: dev.md ne impone la marcatura esplicita. */
.sponsorizzato {
margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
border: 1px dashed var(--color-divider);
display: flex; align-items: center; gap: var(--space-4);
background: var(--color-surface);
}
.sponsorizzato__eti { writing-mode: vertical-rl; transform: rotate(180deg); }
.sponsorizzato__corpo { flex: 1; }
.sponsorizzato__titolo {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-6); margin: 0;
}
.sponsorizzato .btn { text-decoration: none; }
/* ==========================================================================
Riquadri di sidebar
========================================================================== */
.riquadro { border: 1px solid var(--color-divider); padding: var(--space-4); }
.riquadro__testa {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: var(--space-3);
}
.riquadro__testa h2,
.riquadro > h2 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-4); margin: 0 0 var(--space-3);
text-transform: uppercase; letter-spacing: .06em;
}
.riquadro__testa h2 { margin: 0; }
.riquadro__testa a { color: var(--color-accent); text-decoration: none; }
.classifica-breve { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.classifica-breve th:first-child { width: 24px; }
.classifica-breve th:not(:first-child):not(:nth-child(2)),
.classifica-breve td:not(:first-child):not(:nth-child(2)) { text-align: right; }
.classifica-breve td { font-variant-numeric: tabular-nums; }
/* Blocchi che arrivano dal generatore esterno: punti chiave, FAQ, fonti.
Usano gli oggetti gia' esistenti (riquadro, kick, blueprint) invece di
introdurre un linguaggio visivo nuovo. */
.riquadro--breve { margin: 0 0 var(--space-6); }
.elenco-breve { margin: var(--space-3) 0 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.elenco-breve li { line-height: 1.4; }
.faq { margin: var(--space-8) 0 0; }
.faq__voce { border-top: 1px solid var(--color-neutral-300); padding: var(--space-3) 0; }
.faq__voce:last-child { border-bottom: 1px solid var(--color-neutral-300); }
/* Era `var(--font-title)`, che non e' mai esistito: il token si chiama
--font-heading. Difetto PREESISTENTE, non del Passo 3 — l'ha trovato
strumenti\verifica-css.ps1 al primo giro. Non si vedeva perche' una var()
indefinita non fa rumore: font-family cadeva su quella ereditata, e le
domande delle FAQ erano nel carattere del corpo invece che in quello dei
titoli. Sbagliato, ma plausibile a vedersi. */
.faq__voce summary { cursor: pointer; font-family: var(--font-heading); font-size: var(--fs-5); }
.faq__voce summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq__voce p { margin: var(--space-3) 0 0; }
.fonti { margin: var(--space-6) 0 0; }
.elenco-fonti { margin: var(--space-2) 0 0; padding-left: var(--space-4); font-size: var(--fs-3); }
.elenco-fonti li { margin-bottom: var(--space-1-5); }
/* Tabella dei risultati (pagina Scores).
La riga si legge come si legge un risultato: "Aston Villa 0–1 Arsenal".
Squadra di casa allineata a destra, punteggio al centro, ospite a sinistra:
il punteggio resta incolonnato anche con nomi di lunghezza diversa. */
.tabella-partite { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.tabella-partite td { padding: var(--space-1-5) var(--space-1-5); vertical-align: middle; }
.tabella-partite .partita__stato { width: 68px; white-space: nowrap; }
.tabella-partite .partita__casa { text-align: right; }
.tabella-partite .partita__ospite { text-align: left; }
.tabella-partite .partita__punteggio {
width: 62px; text-align: center; white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.tabella-partite .partita__sep { padding: 0 var(--space-1); }
/* Pagina Competitions.
07/09/2026: undici campionati in una pagina sola, raggruppati per
competizione, con un indice in cima per non doverla scorrere tutta.
08/09/2026: l'ordine si ribalta — prima il GIORNO, dentro le competizioni —
e l'indice lascia il posto alle schede dei giorni. Le regole
.indice-competizioni e .giorno-partite sono state tolte con il markup che le
usava: CSS senza markup e' peso scaricato da ogni pagina per niente (stessa
pulizia fatta per .filtri il 07/09). */
/* Schede dei giorni. Restano `hidden` finche' risultati.js non le accende:
senza JavaScript non filtrerebbero, e un bottone che non fa niente e' peggio
di nessun bottone. */
.tab-giorni {
display: flex; flex-wrap: wrap; gap: var(--space-1-5);
padding: var(--space-3) var(--gutter) 0;
}
.tab-giorni[hidden] { display: none; }
/* — la fascia "Live now", subito sotto il titolo (11/09/2026) —
Sta fuori da .griglia per essere a tutta larghezza come le schede, quindi si
porta da sola il margine laterale delle pagine, che dentro la griglia le
veniva dal contenitore. Senza, il riquadro toccherebbe i bordi dello schermo. */
.fascia-live {
padding: var(--space-3) var(--gutter) 0;
}
/* — le due chiavi di lettura, per giorno o per campionato (11/09/2026) —
Riusa i bottoni delle schede dei giorni: sono la stessa cosa — si sceglie
cosa si vede, non si filtra un contenuto diverso — e due famiglie di bottoni
diverse per lo stesso gesto sarebbero due cose da tenere allineate. Sta sopra
le schede dei giorni perche' la scelta della lettura viene prima del filtro,
e con un filo d'aria sotto per non sembrare la stessa fila. */
.tab-vista {
display: flex; flex-wrap: wrap; gap: var(--space-1-5);
padding: var(--space-3) var(--gutter) 0;
}
.tab-vista[hidden] { display: none; }
/* Intestazione di giorno DENTRO un campionato: e' una riga di tabella, quindi
non puo' usare .giorno-blocco__testa (che e' un h2 fuori dalla tabella).
Smorta e piccola: qui il protagonista e' il campionato, il giorno e' l'indice. */
.giorno-riga th {
text-align: left; padding: var(--space-3) 0 var(--space-1);
font: 600 var(--fs-1)/1.4 var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 55%, transparent);
border-bottom: 1px solid var(--color-divider);
}
.tab-giorni__b {
display: inline-flex; align-items: center; gap: var(--space-1-5);
cursor: pointer;
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-3); line-height: 1;
letter-spacing: .02em;
color: var(--color-text);
background: transparent;
border: 1px solid var(--color-divider);
border-radius: 0;
padding: var(--space-2) var(--space-3);
white-space: nowrap;
}
.tab-giorni__b .mono {
font-size: var(--fs-1);
color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.tab-giorni__b:hover { border-color: var(--color-accent); color: var(--color-accent); }
.tab-giorni__b--attivo {
background: var(--color-text);
border-color: var(--color-text);
color: var(--color-bg);
}
.tab-giorni__b--attivo .mono { color: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.tab-giorni__b--live .livedot { flex: none; }
/* Il giorno e' l'unita' di lettura della pagina: sotto la sua intestazione
stanno tutte le competizioni che giocano quel giorno. */
.giorno-blocco { margin-bottom: var(--space-8); }
.giorno-blocco[hidden] { display: none; }
.giorno-blocco__testa {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-6);
margin: 0 0 var(--space-3);
padding-bottom: var(--space-1-5);
border-bottom: 2px solid var(--color-text);
}
.giorno-blocco__data { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.competizione { scroll-margin-top: var(--space-4); }
.riquadro__testa h3 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-4); margin: 0;
text-transform: uppercase; letter-spacing: .06em;
}
/* Il riquadro delle partite in corso: si distingue dal calendario perche' e'
l'unica cosa della pagina che cambia mentre la si guarda. */
.competizione--live { border-color: var(--color-live); }
.competizione--live .riquadro__testa h2 { display: flex; align-items: center; gap: var(--space-1-5); }
.tabella-partite .partita__competizione {
text-align: right;
font-size: var(--fs-2);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
white-space: nowrap;
}
@media (max-width: 520px) {
/* Su schermo stretto il nome della competizione ruba spazio ai punteggi:
la riga dice gia' abbastanza senza. */
.tabella-partite .partita__competizione { display: none; }
}
@media (max-width: 520px) {
/* Su schermo stretto i nomi lunghi spezzerebbero la colonna del punteggio:
si riduce il carattere invece di mandare a capo. */
.tabella-partite { font-size: var(--fs-3); }
.tabella-partite td { padding: var(--space-1-5) var(--space-1); }
.tabella-partite .partita__stato { width: 56px; }
}
/* — "Next up": le prossime cinque partite (11/09/2026) —
Tre informazioni per riga — quando, chi, dove — in ordine di importanza per
chi guarda: l'ora in alto e smorta, le squadre in evidenza, la competizione
sotto e piu' piccola. Su una colonna da 336 px i nomi lunghi non ci stanno
affiancati all'ora, quindi si impilano invece di essere troncati: un nome di
squadra tagliato a meta' non si riconosce. */
.prossime { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prossime__riga {
display: grid; gap: var(--space-0-5);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-divider);
}
.prossime__riga:last-child { border-bottom: 0; }
.prossime__ora { color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.prossime__squadre {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
line-height: 1.25;
}
.prossime__v {
font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-2);
color: color-mix(in srgb, var(--color-text) 45%, transparent);
margin: 0 var(--space-0-5);
}
.prossime__comp { color: color-mix(in srgb, var(--color-text) 42%, transparent); }
/* Il fuso si dichiara una volta in fondo al riquadro invece che su ogni riga:
cinque "UTC" incolonnati sono rumore, e l'ora del dato sportivo deve restare
dichiarata (regola del 01/09/2026). */
.prossime__fuso {
margin: var(--space-3) 0 0;
color: color-mix(in srgb, var(--color-text) 42%, transparent);
}
.piu-letti {
margin: 0; padding-left: var(--space-4);
display: flex; flex-direction: column; gap: var(--space-3);
font-size: var(--fs-3); line-height: 1.35;
}
.piu-letti a { color: inherit; text-decoration: none; }
.piu-letti a:hover { color: var(--color-accent); }
.newsletter { padding: var(--space-4); }
.newsletter h2 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-6); margin: var(--space-1-5) 0;
}
.newsletter p {
font-size: var(--fs-3); margin: 0 0 var(--space-3);
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.elenco-club { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.elenco-club a { text-decoration: none; }
/* ==========================================================================
Slot pubblicitari
Le dimensioni sono riservate in CSS: lo slot occupa il suo spazio prima
che la creativita' arrivi, altrimenti il contenuto salta (CLS).
========================================================================== */
.adv { display: grid; place-items: center; margin: 0 auto; }
.adv img { display: block; max-width: 100%; height: auto; }
/* width: min(N, 100%) e non "width: N + max-width: 100%".
Dentro una griglia, max-width in percentuale si misura sull'area di griglia,
e una colonna implicita e' dimensionata sul contenuto: lo slot restava largo
728px dentro un contenitore da 446px e sfondava la pagina. Con min() la
larghezza non puo' superare il contenitore in nessun contesto. */
.adv[data-adv="mpu"] { width: min(300px, 100%); height: 250px; }
.adv[data-adv="halfpage"] { width: min(300px, 100%); height: 600px; }
.adv[data-adv="leaderboard"],
.adv[data-adv="inarticle"] { width: min(728px, 100%); height: 90px; }
.adv[data-adv="mobile"] { width: min(320px, 100%); height: 100px; }
.adv-contenitore {
margin: var(--space-6) 0; padding: var(--space-4);
border: 1px dashed var(--color-divider);
display: grid; place-items: center;
background: var(--color-surface);
}
.adv-contenitore .mono { margin-bottom: var(--space-2); }
/* ==========================================================================
Articolo 1d
========================================================================== */
.articolo { max-width: 720px; }
.articolo__titolo {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-10); line-height: 1.05; letter-spacing: -.015em;
margin: var(--space-3) 0 var(--space-3); text-wrap: pretty;
}
.articolo__sommario {
font-size: var(--fs-6); line-height: 1.5; margin: 0 0 var(--space-4);
color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.dateline {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) 0; margin-bottom: var(--space-5);
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
}
.dateline__foto { width: 36px; height: 36px; flex: none; }
.dateline__nome { font-size: var(--fs-3); }
.dateline__tag { margin-left: auto; display: flex; gap: var(--space-2); }
.articolo__figura { margin: 0 0 var(--space-5); }
.articolo__figura .ph,
.articolo__figura img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.articolo__corpo > p {
font-size: var(--fs-5); line-height: 1.65;
margin: 0 0 var(--space-4);
}
.articolo__corpo h2,
.articolo__corpo h3 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-7); margin: var(--space-6) 0 var(--space-3);
}
.articolo__corpo blockquote {
margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
border-left: 3px solid var(--color-accent);
background: var(--color-surface);
}
.articolo__corpo blockquote p {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-7); line-height: 1.25; margin: 0;
}
.articolo__corpo ul,
.articolo__corpo ol { font-size: var(--fs-5); line-height: 1.65; padding-left: var(--space-5); }
/* Grafico xG inline. Le barre sono generate server-side con altezza in stile:
e' un dato, non una decorazione, quindi non sta nel CSS. */
.grafico {
border: 1px solid var(--color-divider);
padding: var(--space-4); margin-bottom: var(--space-5);
}
.grafico__barre { display: flex; align-items: flex-end; gap: var(--space-1); height: 110px; }
.grafico__barra { flex: 1; background: var(--color-accent-300); }
.grafico__piede { display: flex; justify-content: space-between; margin-top: var(--space-2); }
/* --- paywall metered ---
Il corpo oltre PARAGRAFI_LIBERI non e' nell'HTML: arriva da
api/pub/articolo.php solo se il lettore e' autorizzato. La sfumatura
copre l'ultimo paragrafo visibile, che resta leggibile a meta'. */
.corpo-premium { position: relative; padding-top: var(--space-3); }
.corpo-premium--tagliato > p:last-child {
color: color-mix(in srgb, var(--color-text) 35%, transparent);
}
.sfumatura {
position: absolute; inset: auto 0 0; height: 120px;
background: linear-gradient(transparent, var(--color-bg) 70%);
pointer-events: none;
}
.paywall { padding: var(--space-6); text-align: center; margin-top: var(--space-1-5); }
.paywall h2 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-8); margin: var(--space-2) 0 var(--space-1-5);
}
.paywall p {
font-size: var(--fs-3); margin: 0 auto var(--space-4); max-width: 44ch;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.paywall__azioni { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.paywall__azioni .btn { text-decoration: none; }
/* Risultato in sidebar sulla pagina articolo. */
.risultato__riga {
display: flex; justify-content: space-between;
font-size: var(--fs-5); padding: var(--space-1) 0;
}
/* ==========================================================================
Sezione 1e
========================================================================== */
.intestazione-sezione {
padding: var(--gutter) var(--gutter) var(--space-3);
border-bottom: 1px solid var(--color-divider);
}
.intestazione-sezione h1 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-9); margin: var(--space-1-5) 0 var(--space-2);
}
.intestazione-sezione p {
font-size: var(--fs-4); max-width: 62ch;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* L'area .filtri e' stata tolta il 07/09/2026 con il blocco che la usava
(template\pagine\sezione.php): regole senza markup sono peso scaricato da
ogni pagina del sito per niente. Il componente .seg resta in
componenti.css, dove sta la libreria, ma oggi non lo usa nessuno. */
.lead {
display: flex; gap: var(--space-5);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-divider);
}
/* §2.4, chiuso col Passo 2: era `width: 360px`, larghezza fissa dentro una riga
flessibile. Tornava al 100% solo sotto i 760px, e in mezzo il rapporto fra
immagine e testo cambiava a ogni pixel di finestra — l'immagine ferma, il
testo che si stringeva attorno.
⚠ La misura va sull', non sulla figura. I figli flex di .lead sono
l'ancora e il
del testo: la figura sta DENTRO l'ancora, quindi il
`flex: none` che aveva addosso non ha mai fatto niente, e il 360px reggeva
solo perche' e' una lunghezza assoluta. Il primo tentativo — `min(360px,
38%)` sulla figura — e' finito a 136px invece di 326: una percentuale
dentro un'ancora larga quanto il suo contenuto si misura su una larghezza
indefinita, e casca su auto. Misurato, non dedotto.
`flex: 0 1 360px` parte dai 360 del mockup e li cede in proporzione al
testo quando lo spazio manca; `min-width: 0` e' quello che glielo permette
davvero, perche' senza, un figlio flex non scende sotto la larghezza minima
del proprio contenuto.
La PROPORZIONE della figura e' quella comune (sezione "Figure editoriali"):
era 16/10, cioe' la terza proporzione diversa del sito. */
.lead > a:first-child { display: block; flex: 0 1 360px; min-width: 0; }
.lead__figura { width: 100%; margin: 0; }
.lead__titolo {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-8); margin: var(--space-1-5) 0 var(--space-2);
}
.lead__titolo a { color: inherit; text-decoration: none; }
.lead__titolo a:hover { color: var(--color-accent); }
.lead p {
font-size: var(--fs-3); max-width: 60ch;
color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.paginazione {
display: flex; justify-content: center; gap: var(--space-2);
padding: var(--space-2) 0 var(--space-1); flex-wrap: wrap;
}
.paginazione .btn { min-width: 36px; text-decoration: none; }
/* ==========================================================================
Piede
========================================================================== */
/* ==========================================================================
Pagine legali (08/09/2026)
Riusano .articolo e .articolo__corpo: sono testo lungo, e la misura di
riga buona per un pezzo lo e' anche per una policy.
========================================================================== */
.legale .table { margin: var(--space-4) 0 var(--space-5); }
.legale code {
font: var(--fs-3)/1 var(--font-mono);
padding: var(--space-0-5) var(--space-1);
background: var(--color-surface);
border: 1px solid var(--color-divider);
}
.legale__pannello {
margin: var(--space-5) 0;
padding: var(--space-4) var(--space-6);
border: 1px solid var(--color-divider);
background: var(--color-surface);
}
.legale__pannello p { font-size: var(--fs-4); line-height: 1.6; margin: 0 0 var(--space-3); }
.legale__pannello p:last-child { margin-bottom: 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.legale__aggiornata { margin-top: var(--space-8); }
/* Il piede distribuisce, non accatasta (11/09/2026, Passo 4).
Era un flex con `gap` e basta: il marchio e le tre colonne si stringevano
tutti a sinistra e restavano ottocento pixel di bianco a destra — uno dei
"vuoti che si vedono" segnalati, e il piu' grande della pagina. Il marchio
tiene la sua colonna, le tre navigazioni si dividono il resto: cosi' il
piede occupa la larghezza che gia' pretendeva. */
.piede {
border-top: 1px solid var(--color-divider);
padding: var(--space-6) var(--gutter) var(--space-8);
display: grid;
grid-template-columns: minmax(140px, 1fr) repeat(3, minmax(0, 1fr));
gap: var(--space-6) var(--space-8);
align-items: start;
}
.piede__marchio {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: var(--fs-6);
}
.piede__colonna { display: flex; flex-direction: column; gap: var(--space-1-5); font-size: var(--fs-3); }
.piede__colonna a { color: inherit; text-decoration: none; }
.piede__colonna a:hover { color: var(--color-accent); }
/* ==========================================================================
Adattamento
dev.md: desktop 1280+, tablet, mobile 390. Le sidebar collassano sotto
il contenuto invece di stringersi.
========================================================================== */
/* La colonna laterale scorre col lettore (11/09/2026, Passo 2).
Misurata la pagina articolo: la colonna e' alta quanto l'articolo — 5570px —
e il contenuto che puo' ospitare e' dell'ordine dei 600. Quel vuoto non si
chiude riempiendolo: non c'e' abbastanza roba sensata da metterci, e
inventarne sarebbe peggio. Si chiude facendo restare in vista quella che c'e'.
`align-self: start` e' necessario, non ornamentale: senza, il figlio di una
griglia viene stirato a tutta l'altezza della riga, quindi non ha niente
contro cui scorrere e `sticky` non fa nulla.
Solo sopra i 1100px: sotto, la colonna e' gia' passata SOTTO il contenuto, e
una colonna appiccicata in fondo alla pagina non ha senso. */
@media (min-width: 1101px) {
.sidebar { position: sticky; top: var(--gutter); align-self: start; }
}
@media (max-width: 1100px) {
.griglia { grid-template-columns: 1fr; }
.sidebar { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; }
.apertura { grid-template-columns: 1fr; }
.articolo { max-width: none; }
.articolo__titolo { font-size: var(--fs-9); }
}
@media (max-width: 760px) {
:root { --gutter: var(--space-4); --colonna-gap: var(--space-6); }
.testata { flex-wrap: wrap; gap: var(--space-3); }
.testata__data, .ricerca-mini { display: none; }
.testata__nav { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
/* Score rail orizzontale, come il mobile 1m. */
.strip-live { overflow-x: auto; scrollbar-width: none; }
.strip-live__partite { flex: none; }
.strip-live__partita { flex: none; min-width: 168px; }
.sidebar { grid-template-columns: 1fr; }
/* .griglia-card--3 / --2 NON stanno piu' qui: il numero di colonne lo decide
auto-fit, che a queste larghezze arriva a una da solo e senza il salto. */
.hero__titolo { font-size: var(--fs-8); }
.articolo__titolo { font-size: var(--fs-8); }
.articolo__sommario { font-size: var(--fs-5); }
.intestazione-sezione h1 { font-size: var(--fs-8); }
.lead { flex-direction: column; }
/* In colonna il `flex: 0 1 360px` dell'ancora diventerebbe un'ALTEZZA di
360px, perche' flex-basis segue la direzione dell'asse principale. */
.lead > a:first-child { flex: none; }
.sponsorizzato { flex-direction: column; align-items: flex-start; }
.sponsorizzato__eti { writing-mode: horizontal-tb; transform: none; }
.piede { gap: var(--space-8); }
}
/* Aree tap >= 44px: requisito di accessibilita' di dev.md. */
@media (pointer: coarse) {
.testata__nav a,
.piede__colonna a,
.paginazione .btn { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* La stampa non ha bisogno di pubblicita' ne' di navigazione. */
@media print {
.strip-live, .adv, .adv-contenitore, .testata__azioni, .sidebar, .paywall { display: none; }
.griglia { grid-template-columns: 1fr; }
}