/* ═══════════════════════════════════════════════════════════════════════════ palette.css — LA MAZZETTA DELL'INTERFACCIA (22 lug 2026) ═══════════════════════════════════════════════════════════════════════════ Scelta di Fabio, mazzetta «C»: > «Soluzione C senza ombra di dubbio. Trattasi di un lavoro tecnico dove > dobbiamo prediligere la leggibilità. L'impatto grafico lo abbiamo > destinato alle grafiche di esportazione.» L'INTERFACCIA è in ARDESIA. UN SOLO accento — il verde campo — riservato a ciò su cui si clicca e a ciò che è attivo. Prima c'erano QUATTORDICI famiglie di colore in ~1.000 punti (blu 211, rosso 134, ambra 134, smeraldo 113, verde 106, indaco 82, viola 71, arancio 58, giallo 39, violetto 32, rosa 19, ciano 16, teal 6, magenta 3), con quattro verdi quasi identici e quattro blu. Non era una mazzetta: era un colorificio, e da lì nascevano accostamenti come il marrone di «Apri Scheda» accanto al blu elettrico dello stato attivo. ⚠️⚠️ COSA NON SI TOCCA — il colore che è DATO, non decorazione: · zone di classifica (Champions, Europa, retrocessione) — vengono dai verdetti · vittorie / pareggi / sconfitte · scudetti, verdetti, palmarès · stemmi delle squadre e colori sociali · il campetto e le maglie · TUTTE le grafiche d'esportazione (SVG/PNG/Instagram): sono il prodotto della Redazione, ed è lì che vive l'impatto visivo. Togliere il colore a queste cose non semplificherebbe: renderebbe il dato più difficile da leggere, cioè l'opposto del motivo per cui si fa questo lavoro. ⚠️ Caricato da TUTTE le 17 pagine, esplicitamente. Non si mettono regole valide per tutto il sito in un file che alcune pagine non caricano — errore già fatto stamattina con `responsive.css`, che Stadi/Record/Redazione non hanno. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── ARDESIA: l'interfaccia ── */ --ndc-900: #0f172a; --ndc-800: #1e293b; --ndc-700: #334155; --ndc-600: #475569; --ndc-500: #64748b; --ndc-400: #94a3b8; --ndc-300: #cbd5e1; --ndc-200: #e2e8f0; --ndc-100: #f1f5f9; /* ⚠️★★★ 28 lug — `--ndc-testo` e `--ndc-bordo` erano USATE e mai DEFINITE. Chi le usava (`var(--ndc-testo, #e2e8f0)`) prendeva quindi sempre il **fallback**, un grigio quasi bianco: sul tema CHIARO diventava **bianco su bianco** e i bottoni «Solo panchina (114)» e «Tutti (810)» erano invisibili (segnalato da Fabio). ★ Un fallback non è un valore di tema: sembra dire «prendi il colore giusto», ma è fisso. Una variabile usata da un componente va DEFINITA per ogni tema. */ --ndc-testo: #e2e8f0; /* testo normale, tema scuro */ --ndc-bordo: #334155; /* bordo dei controlli, scuro */ /* ── L'UNICO accento: verde campo ── */ --ndc-azione: #15803d; /* fondo pieno, tema scuro */ --ndc-azione-chiaro: #dcfce7; /* pastello, tema chiaro */ --ndc-azione-testo: #14532d; /* testo sul pastello */ --ndc-azione-hover: #166534; } /* le stesse variabili, per gli altri due temi */ body.bg-slate-50 { --ndc-testo: #0f172a; /* slate-900 su fondo chiaro */ --ndc-bordo: #94a3b8; /* bordo visibile sul bianco */ } body.bg-black { --ndc-testo: #f1f5f9; --ndc-bordo: #475569; } /* ═══════════════════════════════════════════════════════════ 0. LE FAMIGLIE DEL DATO — sei, chiuse, con un significato fisso (27 lug 2026, richiesta di Fabio: «i colori andrebbero standardizzati per tipologia così da essere un forte richiamo mnemonico») ═══════════════════════════════════════════════════════════ ⚠️ Queste NON sono decorazione: colorano il DATO, che questa mazzetta dichiara esplicitamente intoccabile. Ma sono SEI e non quattordici, e ognuna vuol dire una cosa sola — è la differenza fra uno standard e un colorificio. Chi legge impara sei significati una volta e li ritrova identici in tutto il sito: è il richiamo mnemonico che serve. COME SI USANO — la regola è il RUOLO del numero, non il suo segno: chiave il valore su cui si sta ordinando, e i totali di sintesi (punti, posizione, media, differenza reti) favore ciò che si è guadagnato (vittorie, reti fatte, porta inviolata, rigori realizzati, espulsioni a favore) contro ciò che si è subito (sconfitte, reti subite, espulsioni contro, autoreti contro, penalizzazioni) conteggio un quanti neutro (partite, campionati, presenze, stagioni, panchine) ripartizione la stessa cosa divisa (in casa / fuori, 1° / 2° tempo) tempo quando e chi (date, stagioni, periodi, nomi) ⚠️ Restano fuori e non si toccano: le zone di classifica (vengono dai verdetti), gli stemmi e i colori sociali, il campetto, le grafiche d'esportazione. Quelli hanno già il loro colore, ed è dato pure lui. ⚠️ Il tema CHIARO ha valori propri: gli stessi toni su fondo bianco non hanno contrasto sufficiente, ed è la fascia d'età del nostro pubblico a pagarne il prezzo. */ :root { --dato-chiave: #fbbf24; --dato-chiave-bordo: #6b4d07; --dato-favore: #4ade80; --dato-favore-bordo: #14532d; --dato-contro: #f87171; --dato-contro-bordo: #5c1a1a; --dato-conteggio: #38bdf8; --dato-conteggio-bordo: #0c3f5c; --dato-ripartizione: #a78bfa; --dato-ripartizione-bordo: #3c2d6b; --dato-tempo: #94a3b8; --dato-tempo-bordo: #334155; } /* tema chiaro: toni scuri, per avere contrasto su fondo bianco 🔴 …ma «fondo bianco» non era vero (29 agosto 2026). Le righe del kit hanno il loro fondo — #dde2ea — e la pagina è #eef2f7: su quelli, DUE colori su sei stavano sotto la soglia. Misurato su tutte e tre le superfici: oro #b45309 → 3,86 sulla riga · 4,47 sulla pagina (serve 4,5) verde #15803d → 3,86 sulla riga · 4,46 sulla pagina Gli altri quattro passavano. Sul COMPUTER non si vedeva: lì il numero è a 24 px e la soglia scende a 3,0 — il difetto esisteva solo sul telefono, dove il kit lo stampa a 16 px. ★ Scesi di un gradino ciascuno (amber-700→800, green-700→800): 5,45 e 5,48 sulla riga. La differenza a occhio è un'unghia; il tono resta quello. */ body.bg-slate-50, body.chiaro, html[data-theme="light"] body { --dato-chiave: #92400e; --dato-chiave-bordo: #fcd9a4; --dato-favore: #166534; --dato-favore-bordo: #bbf7d0; --dato-contro: #b91c1c; --dato-contro-bordo: #fecaca; --dato-conteggio: #0369a1; --dato-conteggio-bordo: #bae6fd; --dato-ripartizione: #6d28d9; --dato-ripartizione-bordo: #ddd6fe; --dato-tempo: #475569; --dato-tempo-bordo: #cbd5e1; } /* ═══════════════════════════════════════════════════════════ 1. «APRI SCHEDA» e i pulsanti d'azione delle card ═══════════════════════════════════════════════════════════ */ .btn-card-action { background-color: var(--ndc-azione) !important; color: #ffffff !important; border: none !important; } .btn-card-action:hover { background-color: var(--ndc-azione-hover) !important; } .btn-card-action * , .btn-card-action i { color: #ffffff !important; } body.bg-slate-50 .btn-card-action { background-color: var(--ndc-azione-chiaro) !important; color: var(--ndc-azione-testo) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .10); } body.bg-slate-50 .btn-card-action:hover { background-color: #bbf7d0 !important; } body.bg-slate-50 .btn-card-action *, body.bg-slate-50 .btn-card-action i { color: var(--ndc-azione-testo) !important; } /* ═══════════════════════════════════════════════════════════ 2. LE SCHEDE (tab): attiva = accento, le altre = ardesia Prima l'attiva era blu elettrico su ogni ambiente, qualunque fosse il colore dell'ambiente stesso. ═══════════════════════════════════════════════════════════ */ /* ★ 27 lug (Fabio: «togli quell'azzurro» → «questo è peggio» sull'arancione → «meglio un verde e testo bianco»): il pulsante SELEZIONATO ha fondo verde campo e testo bianco, in entrambi i temi. UNA sola definizione, qui: le pagine avevano la loro (blu in stadi, blu nei bottoni formazione di calciatori) e questa regola le sovrascriveva a metà — fondo verde e testo verde chiaro, illeggibile. ⚠️ Vale sia per i tab (`.tab-btn.active`) sia per i bottoni di formato (`.fmt-btn-active`): sono la stessa cosa per chi guarda. */ /* ⚠️★★ La specificità va misurata, non sperata: i tab attivi portano addosso classi Tailwind di colore (`text-blue-400`, `border-blue-500`) e c'è una regola `body:not(.bg-slate-50):not(.bg-black) .text-blue-400 { color: … !important }` che vale (0,4,0) — più di `.tab-btn.active` (0,2,0), quindi il testo restava AZZURRO su fondo verde: contrasto misurato **1,97**, illeggibile. Con `html body:not(…):not(…)` si arriva a (0,5,1) e si vince davvero. */ /* ★★★ 27 agosto 2026 — E ANCHE LE SOTTO-LINGUETTE DI «VARIE». Gli agenti hanno misurato TRE stati «selezionato» diversi nella stessa pagina: `.tab-btn.active` verde in tutti e due i temi (questa regola), `.spareggi-subtab-btn.active` **grigio** invece che verde, e `.albo-sub-btn.active` che **cambia famiglia di colore fra i due temi** mentre gli altri no. Tre modi di dire la stessa cosa nella stessa schermata. ★ Non sono «altri bottoni»: per chi guarda sono la stessa cosa dei tab, e come i tab si comportano adesso. */ html body:not(.bg-slate-50):not(.bg-black) .tab-btn.active, html body:not(.bg-slate-50):not(.bg-black) .tab-btn[aria-selected="true"], html body:not(.bg-slate-50):not(.bg-black) .fmt-btn-active, html body:not(.bg-slate-50):not(.bg-black) .spareggi-subtab-btn.active, html body:not(.bg-slate-50):not(.bg-black) .albo-sub-btn.active, html body.bg-slate-50 .tab-btn.active, html body.bg-slate-50 .tab-btn[aria-selected="true"], html body.bg-slate-50 .fmt-btn-active, html body.bg-slate-50 .spareggi-subtab-btn.active, html body.bg-slate-50 .albo-sub-btn.active, html body.bg-black .tab-btn.active, html body.bg-black .tab-btn[aria-selected="true"], html body.bg-black .fmt-btn-active, html body.bg-black .spareggi-subtab-btn.active, html body.bg-black .albo-sub-btn.active { background: var(--ndc-azione) !important; color: #ffffff !important; border-color: var(--ndc-azione-hover) !important; border-bottom-color: var(--ndc-azione-hover) !important; } /* ═══════════════════════════════════════════════════════════ 3. LE ICONE DELLA BARRA LATERALE Ognuna aveva la sua famiglia (oro, verde, blu, ciano, ambra, rosso, violetto, smeraldo, arancio, teal, viola, rosa): dodici colori in una colonna. Ora ardesia, e l'accento solo su quella della pagina in cui ci si trova. ═══════════════════════════════════════════════════════════ */ #mainSidebar .sidebar-nav a i { color: var(--ndc-400) !important; } #mainSidebar .sidebar-nav a:hover i { color: var(--ndc-200) !important; } #mainSidebar .sidebar-nav a[aria-current="page"] i { color: #4ade80 !important; } #mainSidebar .sidebar-nav a[aria-current="page"] { background: var(--ndc-800) !important; } body.bg-slate-50 #mainSidebar .sidebar-nav a i { color: var(--ndc-600) !important; } body.bg-slate-50 #mainSidebar .sidebar-nav a:hover i { color: var(--ndc-800) !important; } body.bg-slate-50 #mainSidebar .sidebar-nav a[aria-current="page"] i { color: var(--ndc-azione) !important; } body.bg-slate-50 #mainSidebar .sidebar-nav a[aria-current="page"] { background: var(--ndc-200) !important; } /* ═══════════════════════════════════════════════════════════ 4. IL PANNELLO «ASPETTO» — carattere e tema ═══════════════════════════════════════════════════════════ Fabio (22 lug): «usa la tonalità immediatamente sopra, sia nel tema chiaro ma anche in quello scuro, non questo blu elettrico che non c'entra nulla». Lo stato attivo è UN GRADINO della stessa famiglia del pannello: dice «sei qui» senza gridare, e non compete con l'unico accento del sito. */ .fs-btn { color: var(--ndc-400); background: transparent; } .fs-btn--active { background: rgba(255, 255, 255, .20) !important; color: #ffffff !important; box-shadow: none !important; } body.bg-slate-50 .fs-btn { color: var(--ndc-600) !important; } body.bg-slate-50 .fs-btn--active { background: var(--ndc-300) !important; color: var(--ndc-900) !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .15) !important; } body.bg-black .fs-btn { color: #8a8a8a; } body.bg-black .fs-btn--active { background: #2e2e2e !important; color: #ffffff !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════ 5. I NUMERI DELLE CARD — il colore non diceva niente ═══════════════════════════════════════════════════════════ Nelle card di Calciatori il «Periodo» era blu e le «Presenze» verdi. Nessuno dei due colori porta un significato: il periodo è una data, le presenze un conteggio. L'enfasi la danno già corpo e peso. Selettori a combinazione ESATTA — le stesse classi servono altrove per cose che sono dato. */ .text-sm.font-bold.text-blue-400.font-mono { color: var(--ndc-200) !important; } .text-lg.font-black.text-green-500.leading-none, .text-lg.font-black.text-blue-500.leading-none, .text-lg.font-black.text-red-500.leading-none { color: #ffffff !important; } body.bg-slate-50 .text-sm.font-bold.text-blue-400.font-mono { color: var(--ndc-700) !important; } body.bg-slate-50 .text-lg.font-black.text-green-500.leading-none, body.bg-slate-50 .text-lg.font-black.text-blue-500.leading-none, body.bg-slate-50 .text-lg.font-black.text-red-500.leading-none { color: var(--ndc-900) !important; } /* ═══════════════════════════════════════════════════════════ 6. IL BADGE «PRIMO / ULTIMO CAMPIONATO» (Squadre) ═══════════════════════════════════════════════════════════ Era blu su blu trasparente: due date, nessun significato nel colore. */ .badge-champ { background: rgba(148, 163, 184, .12) !important; color: var(--ndc-200) !important; border-color: rgba(148, 163, 184, .25) !important; } body.bg-slate-50 .badge-champ { background: var(--ndc-200) !important; color: var(--ndc-800) !important; border-color: var(--ndc-300) !important; } /* ═══════════════════════════════════════════════════════════ 7. LA LENTE «statistiche rapide» — è un'AZIONE ═══════════════════════════════════════════════════════════ */ button[class^="bg-emerald-500/10"], button[class*=" bg-emerald-500/10"] { background-color: rgba(21, 128, 61, .18) !important; color: #4ade80 !important; }button[class^="bg-emerald-500/10"]:hover, button[class*=" bg-emerald-500/10"]:hover{ background-color: rgba(21, 128, 61, .30) !important; }body.bg-slate-50 button[class^="bg-emerald-500/10"], body.bg-slate-50 button[class*=" bg-emerald-500/10"]{ background-color: var(--ndc-azione-chiaro) !important; color: var(--ndc-azione-testo) !important; } /* ═══════════════════════════════════════════════════════════ 8. LA REDAZIONE — i pulsanti d'esportazione ═══════════════════════════════════════════════════════════ Erano verde, arancio, blu e ciano: quattro famiglie per quattro formati, in una griglia di 16 card — 98 pulsanti colorati in una schermata sola. Il formato però sta scritto sopra («SVG», «PNG», «Report», «Articolo»): il colore non aggiungeva informazione, la ripeteva. Restano in ardesia; l'accento va al primo, che è l'azione principale. ⚠️ ECCEZIONE: il pulsante «Social» tiene il suo gradiente — quello NON è decorazione, è il marchio di Instagram, e dice a cosa serve. */ /* 🟢 IL VERDE-AZIONE È RISERVATO AL «CONSULTA» (Fabio, 11 agosto 2026). Il tasto SVG lo portava in tutte e 38 le card: quando «Accadde Oggi» ha avuto il suo tasto verde — l'unico aperto a chi non è abbonato — i due verdi si sono confusi e l'assaggio si perdeva fra gli altri. ★ Ora l'SVG sta in ardesia come PNG, Report e Articolo: nella Redazione il verde vale UNA cosa sola. `--ndc-azione` resta il colore-azione altrove (banner cookie, voce attiva della sidebar, icone delle card): qui cambia solo il tasto. */ .btns button.svg { background: var(--ndc-700) !important; color: var(--ndc-100) !important; } .btns button.svg:hover { background: var(--ndc-600) !important; } .btns button.jpg, .btns button.rep, .btns button.art { background: var(--ndc-700) !important; color: var(--ndc-100) !important; } .btns button.jpg:hover, .btns button.rep:hover, .btns button.art:hover { background: var(--ndc-600) !important; } body.bg-slate-50 .btns button.svg { background: var(--ndc-600) !important; color: #fff !important; } body.bg-slate-50 .btns button.jpg, body.bg-slate-50 .btns button.rep, body.bg-slate-50 .btns button.art { background: var(--ndc-600) !important; color: #fff !important; } /* I pulsanti «Articolo» portano il colore in uno STILE IN LINEA, e ognuno il suo: viola, ciano, teal, smeraldo, ambra, verde. Inseguire i singoli valori sarebbe sbagliato — si prendono TUTTI i pulsanti con stile in linea dentro .btns. ⚠️ Escluso `.ndc-social`: quello è il marchio di Instagram, non decorazione. Uno stile in linea si batte solo con !important. */ .btns button[style]:not(.ndc-social) { background: var(--ndc-700) !important; color: var(--ndc-100) !important; } .btns button[style]:not(.ndc-social):hover { background: var(--ndc-600) !important; } body.bg-slate-50 .btns button[style]:not(.ndc-social) { background: var(--ndc-600) !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════ 9. I RIQUADRI DELLE ICONE (Redazione) ═══════════════════════════════════════════════════════════ Sedici card, sedici riquadri colorati — e in tema chiaro restavano scuri (un marrone fuori posto sul bianco). A distinguere le card basta la FORMA dell'icona: trofeo, tessera, calendario, martelletto. Il riquadro diventa tonale; l'icona resta, in accento. */ .card .ic { background: rgba(148, 163, 184, .12) !important; color: #4ade80 !important; } .card .ic i, .card .ic svg { color: #4ade80 !important; } body.bg-slate-50 .card .ic { background: var(--ndc-200) !important; color: var(--ndc-azione) !important; } body.bg-slate-50 .card .ic i, body.bg-slate-50 .card .ic svg { color: var(--ndc-azione) !important; } /* ═══════════════════════════════════════════════════════════ 10. «Allega un documento» (Redazione) ═══════════════════════════════════════════════════════════ Teal in uno stile in linea, e fuori dal gruppo `.btns`: per questo era sfuggito. È un'azione secondaria — carica un file, non produce una grafica — quindi ardesia, non accento. Grigio in tutti e tre i temi. */ button[onclick*="docCarica"] { background: var(--ndc-700) !important; color: var(--ndc-100) !important; } button[onclick*="docCarica"]:hover { background: var(--ndc-600) !important; } body.bg-slate-50 button[onclick*="docCarica"] { background: var(--ndc-600) !important; color: #ffffff !important; } body.bg-black button[onclick*="docCarica"] { background: #2e2e2e !important; color: #eee !important; } /* ═══════════════════════════════════════════════════════════ 11. GLI ULTIMI TRE — cookie, espandi, azzera ═══════════════════════════════════════════════════════════ */ /* «Ho capito» del banner cookie: è l'azione principale di quel banner → accento */ #ndc-cookie-banner .btn-accept { background: var(--ndc-azione) !important; color: #fff !important; } #ndc-cookie-banner .btn-accept:hover { background: var(--ndc-azione-hover) !important; } /* «Espandi» delle schede: comando d'interfaccia, era azzurrino */ .tab-expand-btn { background: rgba(148, 163, 184, .14) !important; color: var(--ndc-300) !important; border-color: rgba(148, 163, 184, .28) !important; } body.bg-slate-50 .tab-expand-btn { background: var(--ndc-200) !important; color: var(--ndc-700) !important; border-color: var(--ndc-300) !important; } /* «Azzera» dei filtri. Era rosso, ma NON è un'azione distruttiva: rimette i filtri a zero, e si rifà in un clic. Il rosso qui non avvertiva di niente — se un giorno comparirà un comando che cancella davvero, quello sì merita il rosso. */ button[onclick*="resetFilters"] { background: rgba(148, 163, 184, .12) !important; color: var(--ndc-300) !important; border-color: rgba(148, 163, 184, .28) !important; } button[onclick*="resetFilters"]:hover { background: rgba(148, 163, 184, .22) !important; color: #ffffff !important; } body.bg-slate-50 button[onclick*="resetFilters"] { background: var(--ndc-200) !important; color: var(--ndc-700) !important; border-color: var(--ndc-300) !important; } body.bg-slate-50 button[onclick*="resetFilters"]:hover { background: var(--ndc-300) !important; } /* ═══════════════════════════════════════════════════════════ 12. FILTRI, RICERCA, CTA — gli ultimi ═══════════════════════════════════════════════════════════ ⚠️ Per schema, non per nome: gli «Azzera» chiamano funzioni diverse in ogni ambiente ma condividono il vestito. È la stessa lezione dei `.bak` nel bundle e dei pulsanti «Articolo» — si prende il vestito, non il nome. */ /* Filtro SELEZIONATO (decenni): è una scelta accesa → accento. Erano arancio E ambra, cioè due famiglie per la stessa identica funzione. */ button[class^="bg-orange-600"][class*="rounded-lg"], button[class*=" bg-orange-600"][class*="rounded-lg"], button[class^="bg-amber-600"][class*="rounded-lg"], button[class*=" bg-amber-600"][class*="rounded-lg"] { background-color: var(--ndc-azione) !important; color: #ffffff !important; }body.bg-slate-50 button[class^="bg-orange-600"][class*="rounded-lg"], body.bg-slate-50 button[class*=" bg-orange-600"][class*="rounded-lg"], body.bg-slate-50 button[class^="bg-amber-600"][class*="rounded-lg"], body.bg-slate-50 button[class*=" bg-amber-600"][class*="rounded-lg"]{ background-color: var(--ndc-azione-chiaro) !important; color: var(--ndc-azione-testo) !important; } /* «Cerca» di «Oggi nella storia» e il CTA della splash: azioni principali → accento */ button[class^="bg-amber-600"][class*="h-9"], button[class*=" bg-amber-600"][class*="h-9"], .v2-landing-cta { background: var(--ndc-azione) !important; color: #ffffff !important; }button[class^="bg-amber-600"][class*="h-9"]:hover, button[class*=" bg-amber-600"][class*="h-9"]:hover, .v2-landing-cta:hover{ background: var(--ndc-azione-hover) !important; } /* «Azzera»: preso per VESTITO, così vale in tutti gli ambienti */ button[class^="bg-red-900/10"], button[class*=" bg-red-900/10"] { background-color: rgba(148, 163, 184, .12) !important; color: var(--ndc-300) !important; border-color: rgba(148, 163, 184, .28) !important; }button[class^="bg-red-900/10"]:hover, button[class*=" bg-red-900/10"]:hover{ background-color: rgba(148, 163, 184, .22) !important; color: #ffffff !important; }body.bg-slate-50 button[class^="bg-red-900/10"], body.bg-slate-50 button[class*=" bg-red-900/10"]{ background-color: var(--ndc-200) !important; color: var(--ndc-700) !important; border-color: var(--ndc-300) !important; }body.bg-slate-50 button[class^="bg-red-900/10"]:hover, body.bg-slate-50 button[class*=" bg-red-900/10"]:hover{ background-color: var(--ndc-300) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 13. LA SPAZZATA — tutti i PULSANTI con un fondo saturo ═══════════════════════════════════════════════════════════════════════════ Fin qui i casi erano stati presi uno per uno, e ne comparivano di nuovi ogni volta che si apriva una vista diversa (sotto-schede, pillole, spareggi…): è il metodo sbagliato. Qui si prende la REGOLA — un pulsante d'interfaccia non ha un fondo colorato — e si riaffermano dopo le poche eccezioni. ⚠️ Solo `button`, di proposito. I colori che sono DATO stanno su celle, badge e testi, non su pulsanti: così la spazzata non li sfiora. ⚠️ `.ndc-social` e `.ig` esclusi: quello è il marchio di Instagram. */ button[class^="bg-blue-"], button[class*=" bg-blue-"], button[class^="bg-indigo-"], button[class*=" bg-indigo-"], button[class^="bg-sky-"], button[class*=" bg-sky-"], button[class^="bg-cyan-"], button[class*=" bg-cyan-"], button[class^="bg-teal-"], button[class*=" bg-teal-"], button[class^="bg-purple-"], button[class*=" bg-purple-"], button[class^="bg-violet-"], button[class*=" bg-violet-"], button[class^="bg-fuchsia-"], button[class*=" bg-fuchsia-"], button[class^="bg-pink-"], button[class*=" bg-pink-"], button[class^="bg-rose-"], button[class*=" bg-rose-"], button[class^="bg-red-"], button[class*=" bg-red-"], button[class^="bg-orange-"], button[class*=" bg-orange-"], button[class^="bg-amber-"], button[class*=" bg-amber-"], button[class^="bg-yellow-"], button[class*=" bg-yellow-"] { background-color: var(--ndc-700) !important; color: var(--ndc-100) !important; border-color: rgba(148, 163, 184, .28) !important; }body.bg-slate-50 button[class^="bg-blue-"], body.bg-slate-50 button[class*=" bg-blue-"], body.bg-slate-50 button[class^="bg-indigo-"], body.bg-slate-50 button[class*=" bg-indigo-"], body.bg-slate-50 button[class^="bg-sky-"], body.bg-slate-50 button[class*=" bg-sky-"], body.bg-slate-50 button[class^="bg-cyan-"], body.bg-slate-50 button[class*=" bg-cyan-"], body.bg-slate-50 button[class^="bg-teal-"], body.bg-slate-50 button[class*=" bg-teal-"], body.bg-slate-50 button[class^="bg-purple-"], body.bg-slate-50 button[class*=" bg-purple-"], body.bg-slate-50 button[class^="bg-violet-"], body.bg-slate-50 button[class*=" bg-violet-"], body.bg-slate-50 button[class^="bg-fuchsia-"], body.bg-slate-50 button[class*=" bg-fuchsia-"], body.bg-slate-50 button[class^="bg-pink-"], body.bg-slate-50 button[class*=" bg-pink-"], body.bg-slate-50 button[class^="bg-rose-"], body.bg-slate-50 button[class*=" bg-rose-"], body.bg-slate-50 button[class^="bg-red-"], body.bg-slate-50 button[class*=" bg-red-"], body.bg-slate-50 button[class^="bg-orange-"], body.bg-slate-50 button[class*=" bg-orange-"], body.bg-slate-50 button[class^="bg-amber-"], body.bg-slate-50 button[class*=" bg-amber-"], body.bg-slate-50 button[class^="bg-yellow-"], body.bg-slate-50 button[class*=" bg-yellow-"]{ background-color: var(--ndc-200) !important; color: var(--ndc-800) !important; border-color: var(--ndc-300) !important; } /* ── le ECCEZIONI, riaffermate dopo la spazzata ──────────────────────────── Vengono dopo di proposito: la spazzata è la regola, queste sono le poche cose che devono restare accese. */ /* ⚠️ QUI c'erano due righe che «proteggevano» il pulsante Social dalla spazzata. Facevano il contrario: `background-image: initial` gli ha CANCELLATO il gradiente Instagram e `background-color: transparent` l'ha reso bianco su bianco — 32 testi invisibili in tema chiaro, tutti «Social». E non servivano nemmeno: la spazzata colpisce `button[class*="bg-..."]`, e il Social il gradiente ce l'ha in linea. ★ Una regola scritta «per sicurezza», senza verificare cosa fa, è un difetto. */ /* 🟢 `.btns button.svg` TOLTO da questa lista (11 ago 2026): il verde-azione qui dentro vinceva sulla regola specifica più sopra, e il tasto SVG restava verde in tutte e 38 le card. Il verde della Redazione ora è del solo «Consulta». ⚠️ Era la stessa cosa decisa in DUE punti del file: cambiarne uno non bastava, e a schermo sembrava che la modifica non avesse effetto. */ /* ★ LA SERIE C ha un fondo suo (Fabio, 15 agosto 2026: «la serie C una un altro fondo magari anche un rosso tenue o altro»). Serve perché dopo la spazzata «Il tabellone» e «Serie C» erano due bottoni identici, e due cose diverse con lo stesso aspetto si leggono come una sola. ⚠️ È un'eccezione DICHIARATA, non un colore inline: l'inline evade la spazzata ed è esattamente ciò che aveva prodotto il marrone illeggibile. ⚠️ Il rosso nel sito significa già retrocessione e sconfitta: qui è un mattone desaturato, tenuto lontano dal rosso d'allarme. */ /* ⚠️ ARANCIO TENUE, e in tema scuro è una VELATURA, non una tinta piena: un arancione scuro pieno È il marrone (#7c2d12 è letteralmente quello appena debellato). La velatura su fondo scuro si legge arancione senza diventare bruna — è lo stesso modo in cui il sito fa le sue fasce `bg-amber-900/20`. */ button.ndc-serie-c { background-color: rgba(234, 88, 12, .22) !important; color: #fdba74 !important; border: 1px solid rgba(251, 146, 60, .45) !important; } button.ndc-serie-c:hover { background-color: rgba(234, 88, 12, .32) !important; } body.bg-slate-50 button.ndc-serie-c { background-color: #ffedd5 !important; color: #9a3412 !important; border: 1px solid #fdba74 !important; } body.bg-slate-50 button.ndc-serie-c:hover { background-color: #fed7aa !important; } /* ★ l'icona nel quadratino segue il fondo, altrimenti resta il bianco/20 di Tailwind */ button.ndc-serie-c > span:first-child { background: rgba(251, 146, 60, .18) !important; } body.bg-slate-50 button.ndc-serie-c > span:first-child { background: rgba(154, 52, 18, .12) !important; } /* ⚠️ `body.bg-slate-50 .font-bold { color:#000 !important }` (light-theme.css) vince a parità di specificità perché dichiarata dopo: il titolo usciva NERO invece che arancio scuro. Si batte con la specificità — `button.ndc-serie-c span` sale a (0,3,2) — non con un altro !important. */ body.bg-slate-50 button.ndc-serie-c span, body.bg-slate-50 button.ndc-serie-c span.font-black, body.bg-slate-50 button.ndc-serie-c span.font-bold { color: #9a3412 !important; } button.ndc-serie-c span, button.ndc-serie-c span.font-black, button.ndc-serie-c span.font-bold { color: #fdba74 !important; } body.bg-slate-50 button.ndc-serie-c span.font-black { color: #7c2d12 !important; }.btn-card-action, #ndc-cookie-banner .btn-accept, button[class^="bg-orange-600"][class*="rounded-lg"], button[class*=" bg-orange-600"][class*="rounded-lg"], button[class^="bg-amber-600"][class*="rounded-lg"], button[class*=" bg-amber-600"][class*="rounded-lg"], button[class^="bg-amber-600"][class*="h-9"], button[class*=" bg-amber-600"][class*="h-9"], .v2-landing-cta{ background-color: var(--ndc-azione) !important; color: #ffffff !important; border-color: transparent !important; }body.bg-slate-50 .btn-card-action, body.bg-slate-50 button[class^="bg-orange-600"][class*="rounded-lg"], body.bg-slate-50 button[class*=" bg-orange-600"][class*="rounded-lg"], body.bg-slate-50 button[class^="bg-amber-600"][class*="rounded-lg"], body.bg-slate-50 button[class*=" bg-amber-600"][class*="rounded-lg"]{ background-color: var(--ndc-azione-chiaro) !important; color: var(--ndc-azione-testo) !important; }body.bg-slate-50 #ndc-cookie-banner .btn-accept, body.bg-slate-50 button[class^="bg-amber-600"][class*="h-9"], body.bg-slate-50 button[class*=" bg-amber-600"][class*="h-9"], body.bg-slate-50 .v2-landing-cta{ background-color: var(--ndc-azione) !important; color: #ffffff !important; } /* Gli ultimi due, che avevano classi proprie e sfuggivano alla spazzata: · `.tab-pill` attiva, ambra trasparente → tono · i pulsanti `bg-green-600` (es. «Esegui» della Scatola Magica): verde sì, ma un verde DIVERSO dall'accento — due verdi per la stessa idea è esattamente il problema da cui siamo partiti. Allineati. */ .tab-pill[class^="bg-amber"], .tab-pill[class*=" bg-amber"], .tab-pill.active { background-color: rgba(148, 163, 184, .16) !important; color: var(--ndc-200) !important; border-color: rgba(148, 163, 184, .30) !important; }body.bg-slate-50 .tab-pill[class^="bg-amber"], body.bg-slate-50 .tab-pill[class*=" bg-amber"], body.bg-slate-50 .tab-pill.active{ background-color: var(--ndc-200) !important; color: var(--ndc-800) !important; border-color: var(--ndc-300) !important; }button[class^="bg-green-6"], button[class*=" bg-green-6"], button[class^="bg-emerald-6"], button[class*=" bg-emerald-6"]{ background-color: var(--ndc-azione) !important; color: #ffffff !important; }button[class^="bg-green-6"]:hover, button[class*=" bg-green-6"]:hover, button[class^="bg-emerald-6"]:hover, button[class*=" bg-emerald-6"]:hover{ background-color: var(--ndc-azione-hover) !important; } /* Le pillole di Record avevano SEI varianti dello stesso stato — `active-amber`, `-blue`, `-emerald`, `-violet`, `-rose`, `-orange`: sei colori per dire una cosa sola, «questa è selezionata». È il problema in miniatura. */ .tab-pill[class*="active-"] { background: var(--ndc-azione) !important; color: #ffffff !important; border-color: var(--ndc-azione) !important; } body.bg-slate-50 .tab-pill[class*="active-"] { background: var(--ndc-azione-chiaro) !important; color: var(--ndc-azione-testo) !important; border-color: #86efac !important; } /* ══════════════════════════════════════════════════════════════════════════════ * ★★★ PAVIMENTO DI LEGGIBILITÀ SU MOBILE — REGOLA ASSOLUTA (27 luglio 2026) * * Fabio, guardando la scheda squadra: «tutti quei dati scritti uno sotto l'altro * quasi invisibili, aumenta e di parecchio il font» e poi «devi prenderla come * REGOLA ASSOLUTA: quei numeri così piccoli non devono starci». * * Misurato in quella sola vista, su un telefono da 375 px: **8 elementi fra 9 e * 11 px**, 15 a 13 px, 6 a 14 px. I valori dei «Risultati Storici» — 1624, 868, * 698 — erano a **13 px**, e i colori sociali a **11 px**. * * Da qui il pavimento vale per TUTTO il sito (questo foglio è caricato da tutti e * quindici gli ambienti), non per la pagina che ho in mano al momento: * · nessun testo sotto i 15 px; * · i NUMERI (b, strong, tabular-nums, font-black) non sotto i 20 px. * `max(…, 1em)` serve a non RIMPICCIOLIRE quello che è già più grande. * * ⚠️ Non tocca il desktop (solo sotto i 900 px) né i contenuti disegnati dentro * un `` o un `` d'export, che hanno le loro misure. * ⚠️ Il collaudo è `admin/scripts/verifica_corpi_mobile.js`: elenca ogni testo * sotto il pavimento, così la regola non regredisce in silenzio. * ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 899px) { /* pavimento: 15 px per qualunque testo */ /* `html body` (2,1,0) per vincere su `html .classe` (1,1,0) di responsive.css qualunque sia l'ordine di caricamento dei due fogli */ html body .text-\[9px\], html body .text-\[10px\], html body .text-\[11px\], html body .text-\[12px\], html body .text-\[13px\], html body .text-\[14px\], html body .text-xs, html body .text-\[0\.65rem\], html body .text-\[0\.7rem\], html body .text-\[0\.75rem\], html body .text-\[0\.8rem\], html body .text-tiny { font-size: max(15px, 1em) !important; line-height: 1.3 !important; } html body .text-sm { font-size: max(16px, 1em) !important; } /* i numeri del dato: mai sotto i 20 px 🔴🔴 …ma SOLO per chi non dichiara gia' un corpo piu' grande (27 agosto 2026). `max(20px, 1em)` sembra un pavimento e non lo e': `1em` non e' la misura dell'elemento, e' quella del PADRE. Su un numero scritto `text-3xl` (30 px) il calcolo dava `max(20, 18) = 20`, e il pavimento si comportava da **tetto**. ★ Misurato a 375 px sulla scheda di un allenatore: `792` PANCHINE usciva a 20 px sotto un'etichetta anch'essa portata a 20 — dato ed etichetta si incontravano esattamente li'. Vale per i sei riquadri dell'intestazione, per i quattro del calciatore, per le 96 card delle Stagioni: **la stessa riga**. ⚠️ E' la terza volta oggi che questo idioma morde (`.n2-p1`/`.n2-p3` il 28 luglio, `.ndc-riquadri` stamattina): un `max(Npx, 1em)` con `!important` su un elemento che porta la propria classe di corpo e' sempre un tetto travestito. ★ Le esclusioni sono le stesse gia' usate nel blocco desktop qui sotto: `text-lg` resta dentro, perche' 18 px e' sotto il pavimento e li' il pavimento serve. */ /* 🔴🔴🔴 IL GRASSETTO DENTRO UN PARAGRAFO E' EMFASI, NON UN DATO (27 agosto 2026). Regola di Fabio guardando le card della Redazione sul telefono: «grassetto ereditato». Il testo sta a 15 px e ogni saliva a 20: «La **classifica generale in ordine di partecipazioni**: 146 squadre» usciva con meta' frase in corpo titolo — **25 paragrafi su 25**, e la card 38 px piu' alta. ★★★ Perche' `:not(p b)` e non un'eccezione in fondo al file: il pavimento e' scritto DUE volte (qui e nella copia «che vince dappertutto» piu' sotto) e la seconda pesa (0,12,2). Un'eccezione che provi a batterla apre una gara di specificita' che si perde: qui invece la corrispondenza **non avviene**, e vale per tutte e due le copie perche' la scrivo su tutte e due. ⚠️ Escluso solo `b`/`strong` nudi: `.tabular-nums`, `.font-black` e `.font-bold` restano col pavimento anche dentro un

, perche' quelle classi le porta un DATO. ★ E' la generalizzazione della toppa del 20 agosto (le guide), che salvava CINQUE contenitori per id: ogni prosa scritta dopo ricadeva nel difetto, e infatti la Redazione non era in elenco. */ html body b:not(p b):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl), html body strong:not(p strong):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl), html body .tabular-nums:not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl), html body .font-black:not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl), html body .font-mono.select-all:not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) { font-size: max(20px, 1em) !important; } /* …ma un'etichetta in grassetto DENTRO un testo piccolo non deve gonfiarsi: le etichette del kit e le maiuscolette restano dove sono */ html body .n2-bt, html body .uppercase.tracking-widest, html body .uppercase.tracking-wide, html body .n2-altri, html body .n2-azione, html body label b, html body label strong, html body dt b, html body dt strong, /* 🔴 LE GUIDE SONO PROSA, NON DATO (20 agosto 2026). Il pavimento dei 20 px e' scritto per i NUMERI («1624», «868»), ma colpisce ogni : dentro una guida discorsiva, dove il grassetto marca il nome di un tasto in mezzo alla frase, le parole in neretto uscivano grandi il doppio di quelle attorno — un testo che sembra rotto proprio nel punto in cui deve spiegare. Qui il grassetto torna grande come la riga che lo contiene. */ /* (il grassetto dentro un paragrafo e' gia' escluso a monte, sui due pavimenti: vedi «IL GRASSETTO DENTRO UN PARAGRAFO E' EMFASI» piu' su) */ html body #ndc-lav-aiuto b, html body #ndc-lav-aiuto strong, html body #sp-guida b, html body #sp-guida strong, html body #ndc-guida-card b, html body #ndc-guida-card strong, html body .ndc-tip-istantaneo b, html body .ndc-tip-istantaneo strong, html body .ndc-lav-tip b, html body .ndc-lav-tip strong { font-size: inherit !important; } } /* ══════════════════════════════════════════════════════════════════════════════ * ★★★ PAVIMENTO — la copia che vince DAPPERTUTTO (27 luglio 2026) * * ⚠️ Perché serve una seconda scrittura: il pavimento «autorevole» sta in * `css/responsive.css`, dentro il sistema dei quattro livelli di testo, perché lì * deve battere quelle regole. Ma **non tutti gli ambienti caricano responsive.css** * (misurato: `varie` e altri non ce l'hanno), e in quelle pagine il pavimento * mancava: in `varie` 9 testi restavano a 11-13 px. * Questo foglio è caricato da tutti e quindici, quindi qui si ripete la regola con * la stessa forma ad alta specificità — così vince sia dove il sistema dei livelli * c'è, sia dove non c'è. La duplicazione è voluta e documentata da entrambe le parti. * ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 899px) { html:not(.font-small):not(.font-large):not(.font-xl) .text-xs, html:not(.font-small):not(.font-large):not(.font-xl) .text-\[9px\], html:not(.font-small):not(.font-large):not(.font-xl) .text-\[10px\], html:not(.font-small):not(.font-large):not(.font-xl) .text-\[11px\], html:not(.font-small):not(.font-large):not(.font-xl) .text-\[12px\], html:not(.font-small):not(.font-large):not(.font-xl) .text-\[13px\], html:not(.font-small):not(.font-large):not(.font-xl) .text-\[14px\], html:not(.font-small):not(.font-large):not(.font-xl) .text-tiny { font-size: 15px !important; line-height: 1.35 !important; } html:not(.font-small):not(.font-large):not(.font-xl) .text-sm { font-size: 16px !important; } html:not(.font-small):not(.font-large):not(.font-xl) td, html:not(.font-small):not(.font-large):not(.font-xl) th { font-size: 15px !important; } /* i numeri: solo chi NON ha una taglia propria, per non abbassare i grandi */ /* 🔴🔴★★★ IL PAVIMENTO NON DEVE BATTERE UNA MISURA SCRITTA A MANO (4 settembre 2026). Il banco ha contato **166 elementi** in cui il corpo dichiarato non e' quello reso, e la causa era una sola riga: questa. Su Record **160 numeri di classifica** scritti `font-size:18px` uscivano a 20; il menu di Scommettiamo, scritto 15, usciva a 20; il menu a tendina dei tab di Squadre, scritto 18, a 20. ★ Non e' una regola nuova: e' quella che questa riga gia' DICHIARA di essere — «solo chi NON ha una taglia propria». Una classe `.text-sm` era gia' una taglia propria; una misura scritta nello `style` lo e' di piu', ed era l'unica che non veniva ascoltata, perche' l'`!important` batte anche l'inline. ⚠️ Sotto i 15 px ci sono 187 misure scritte a mano, ma stanno quasi tutte nei COSTRUTTORI DI IMMAGINI (grafiche/, export-utils.js, la lavagna): li' l'11 px e' giusto, l'immagine si esporta ingrandita. Nelle 22 schermate misurate il pavimento tocca 166 elementi e sono **tutti dichiarati da 15 px in su**: nessuno viene abbandonato in basso. ★ E' scritto su TUTTE E DUE le copie (qui e in responsive.css), come il `:not(p b)` del 27 agosto: una sola non basterebbe, e un'eccezione in fondo al file aprirebbe una gara di specificita' che si perde. */ html:not(.font-small):not(.font-large):not(.font-xl) b:not(p b):not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not([style*="font-size"]), html:not(.font-small):not(.font-large):not(.font-xl) strong:not(p strong):not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not([style*="font-size"]), html:not(.font-small):not(.font-large):not(.font-xl) .tabular-nums:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not([style*="font-size"]), html:not(.font-small):not(.font-large):not(.font-xl) .font-black:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not([style*="font-size"]), html:not(.font-small):not(.font-large):not(.font-xl) .font-bold:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not([style*="font-size"]) { font-size: max(20px, 1em) !important; } html:not(.font-small):not(.font-large):not(.font-xl) .text-xs.font-black, html:not(.font-small):not(.font-large):not(.font-xl) .text-sm.font-black, html:not(.font-small):not(.font-large):not(.font-xl) .text-base.font-black { font-size: 20px !important; } /* le etichette non sono numeri */ html:not(.font-small):not(.font-large):not(.font-xl) .uppercase.tracking-widest, html:not(.font-small):not(.font-large):not(.font-xl) .uppercase.tracking-wide, html:not(.font-small):not(.font-large):not(.font-xl) .n2-bt, html:not(.font-small):not(.font-large):not(.font-xl) .n2-altri { font-size: max(15px, 1em) !important; } /* 🔴★★★ `.n2-azione` STAVA QUI DENTRO, e non doveva (26 agosto 2026, Fabio: «già il bottone in fondo è piccolo»). Questo è l'elenco delle ETICHETTE, e il suo pavimento — `max(15px, 1em)` — non fissa una misura: fa **seguire il testo intorno**. Il comando in fondo alla scheda ereditava 17 px e restava sotto la nota che gli sta sopra, e la regola che il kit gli scriveva non arrivava mai perché questa ha specificità (0,4,1) e `!important`. ★ Un comando non è un'etichetta. Adesso la sua misura la decide chi la scrive per lui: `responsive.css` sotto i 900 px, `--n2-p-az` sopra. */ /* e le griglie di dati: due per riga anche dove responsive.css non arriva */ html .grid-cols-3:not(.n2-blocchi), html .grid-cols-4:not(.n2-blocchi), html .grid-cols-5:not(.n2-blocchi), html .grid-cols-6:not(.n2-blocchi) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html [id*="campo"] .grid, html .campetto .grid, html .formazione .grid { grid-template-columns: unset !important; } } /* i numeri-dato in grassetto con taglia piccola esplicita — anche negli ambienti che NON caricano responsive.css (misurato: `record`, `stadi`, `grafiche`). In `record` i valori dei primati stavano a 17-19,1 px: sono il dato principale. */ @media (max-width: 899px) { html:not(.font-small):not(.font-large):not(.font-xl) .text-sm.font-bold, html:not(.font-small):not(.font-large):not(.font-xl) .text-base.font-bold, html:not(.font-small):not(.font-large):not(.font-xl) .text-lg.font-bold, html:not(.font-small):not(.font-large):not(.font-xl) .text-lg { font-size: max(20px, 1em) !important; } /* una classe di colore non decide la dimensione (vedi responsive.css) */ /* ⚠️★★ LA CATENA DI :not() SI FERMAVA A text-3xl (corretto il 30 luglio 2026) Qualunque `.text-slate-400` con `text-4xl` o più veniva schiacciato a 16 px da questa stessa regola. Misurato in Campionati: `#statDraws` con `text-4xl text-slate-400` stava a 16 px mentre il gemello `text-red-400` accanto stava a 36 — stessa classe di corpo, colore diverso, ed era il COLORE a decidere la dimensione. Esattamente quel che il commento qui sopra dice di non voler fare. ★ Enumerare i corpi in un :not() è fragile: ogni classe nuova va aggiunta a mano. Ora la catena copre fino a text-9xl. */ /* 🔴★★★ E QUI IL PAVIMENTO DIVENTA UN TETTO (4 settembre 2026, stessa famiglia della guardia messa poco sopra al pavimento dei 20 px). `max(15px, 1em)` sembra un minimo, ma `1em` e' il corpo del PADRE: se il padre sta a 14 px la formula vale 15, e con l'`!important` **abbassa** a 15 una parola scritta a mano 16. Sul Libro dei Record erano 43 «punti» accanto ai numeri. ★ Vale la stessa ragione della guardia gemella: una misura scritta nello `style` e' una taglia propria, e questa regola dichiara di rispettare le taglie proprie. ⚠️ Resta com'e' la copia da schermo largo (palette.css, `@media min-width:900px`, `max(18px, 1em)`): stessa trappola, ma il banco misura a 375 px e non l'ha mai vista in opera. Non si corregge quello che non si e' misurato. */ html body .text-slate-400:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl):not(.text-9xl):not([style*="font-size"]) { font-size: max(15px, 1em) !important; } } /* la barra cookie e i bottoni al pavimento anche dove `responsive.css` non arriva (misurato: `help` la mostrava a 13,3 px e «Ho capito» a 14,5). */ @media (max-width: 899px) { html #ndc-cookie-banner, html #ndc-cookie-banner *, html #ndc-cookie-banner a, html #ndc-cookie-banner p, html #ndc-cookie-banner button { font-size: 15px !important; } /* ⚠️ 4 set 2026 — la stessa guardia del pavimento dei corpi, terzo punto: sei bottoni della Rosa scritti `font-size:15px` uscivano a 17. Chi dichiara una misura ha gia' deciso, e il pavimento non deve scavalcarla. */ html body:not(.home-page) button:not(.n2-azione):not(.n2-altri):not(.n2-aiuto):not(.v2-landing-sec-btn):not([style*="font-size"]), html body:not(.home-page) .btn:not([style*="font-size"]) { font-size: max(15px, 1em) !important; } html #v2-breadcrumb, html #v2-breadcrumb * { font-size: 15px !important; } /* 🔴🔴★★★ LA STESSA TRAPPOLA DEL 28 LUGLIO, in un altro punto (Fabio, 4 settembre 2026: «perché i tre tab successivi su 2 righe?» · «il max è fuori luogo, si capisce»). `max(15px, 1em)` vuole essere un PAVIMENTO, ma `1em` è il corpo del GENITORE: dentro la scheda d'apertura, che sta a 17 px, alza l'etichetta a 17 — ignorando il `font-size:15px` scritto nel bottone stesso. ★ MISURATO: bottone largo 120 px, ma la regola generica dei bottoni gli impone `padding: .5rem 1rem` e gliene lascia **88** di spazio utile; a 17 px in grassetto «Cleansheet» non ci sta e va a capo. Risultato: la seconda fila alta **81 px** contro i 62 della prima. ★ Rimedio uguale a quello di luglio: MISURA FISSA. E si restituisce la larghezza che la regola generica si era presa — il bottone il suo margine se l'era già scelto. */ /* ⚠️ E il selettore dev'essere PIÙ SPECIFICO di quello che gonfia: `html body:not(.home-page) button:not(…):not(…):not(…)` pesa più di `html body .classe`, e fra due `!important` vince la specificità. Provato: con `html body .classe` il corpo restava 17. */ /* ⚠️ La via non è vincere una gara di specificità (provata: `html body .classe` pesa meno di `html body:not(.home-page) button:not():not():not()`, e il corpo restava 17). Si toglie il bottone dalla regola che lo gonfia, con un `:not()` — è l'idioma che questo file usa già per `.n2-azione`. */ html body:not(.home-page) button.v2-landing-sec-btn { font-size: 15px !important; padding: 12px 6px !important; } /* 13 → 14 il 1 ago 2026: misurato, a 375 px entra come il 13; a 15 la barra sfora. */ html .muxv2-navbar span { font-size: 14px !important; } /* eccezione dichiarata */ } @media (max-width: 899px) { /* ⚠️★★ L'ETICHETTA STA DENTRO IL NUMERO, quindi `max(15px, 1em)` la GONFIAVA: `1em` è il corpo del genitore, e il genitore qui è il numero a 23 px. Risultato segnalato da Fabio: «FONDAZIONE» tutto maiuscolo ed **enorme**, più grande del nome della squadra. Un'etichetta non può essere più grande del dato che etichetta: misura fissa, leggibile e chiaramente subordinata. */ /* ★ 13 px e su UNA riga (Fabio, 28 lug: «presenze devi ridurlo, deve andare su una riga»). A 15 px con la spaziatura larga «PRESENZE» chiedeva 74 px, non ci stava e si spezzava in «PRESENZ / E». Ridotta la misura e tolta la spaziatura: sta in una riga e lascia spazio al numero, che nel frattempo è cresciuto. ⚠️ È un'eccezione dichiarata al pavimento dei 15 px, e vale SOLO per la targhetta di un numero — sempre la stessa in tutta la lista, in maiuscoletto, non un testo da leggere. */ html body .n2-p3 small { font-size: 13px !important; letter-spacing: 0 !important; /* ⚠️★ a capo SÌ, ma solo fra le parole. Tre tentativi, tre esiti: `anywhere` spezzava dentro la parola («PRESENZ / E»); `nowrap` faceva TAGLIARE le etichette di due parole («CLEAN SHEET», «MEDIA PUNTI» — 19 tagli per tab); `normal` manda a capo agli spazi e lascia intere le parole: «CLEAN / SHEET» si legge, e «PRESENZE» a 13 px ci sta da sola. */ white-space: normal !important; overflow-wrap: normal !important; /* ⚠️ E STACCATA DAL NUMERO (Fabio, 28 lug: «fondata era troppo attaccata all'anno»). Misurato: fra «1912» e «FONDATA» c'erano −5 px, cioè si sovrapponevano — il numero è cresciuto a 29,6 px e la sua altezza di riga scendeva sull'etichetta, che non aveva margine sopra. Un dato e la sua targhetta devono respirare. */ margin-top: 5px !important; line-height: 1.15 !important; } /* il numero non deve invadere lo spazio sotto di sé */ html body .n2-p3 { line-height: 1.05 !important; } /* ★★ IL NOME È IL SOGGETTO della lista, non può essere la voce più piccola. Fabio: «il nome della squadra scritto molto più piccolo. Assurdo». Gerarchia corretta: numero d'ordine e valore 23,2 px · **nome 20 px** · etichetta 15. */ html body .n2-p2 { font-size: calc(var(--k-base) * 1.25) !important; } } /* la fascia dei colori della classifica: UNA riga, non quattro (27 luglio 2026) */ @media (max-width: 899px) { /* ⚠️ NON con `overflow-x: auto`: l'avevo scritto e sarebbe stato uno scorrimento orizzontale, cioè la regola che questo lavoro esiste per eliminare. Le voci vanno a capo e stanno in DUE righe grazie alle etichette accorciate. */ html body .n2-legenda-zone { display: flex !important; flex-wrap: wrap !important; gap: 4px 14px !important; } html body .n2-legenda-zone > span { flex: 0 0 auto; font-size: 15px !important; } } /* ── Pavimento anche dove il corpo è scritto INLINE nel JS o in v2-enhancements ── (27 luglio 2026) ⚠️ Uno stile inline senza `!important` perde contro una regola di foglio con `!important`: è l'unico modo di raggiungere questi testi senza riscrivere ogni pezzo di HTML generato. */ @media (max-width: 899px) { html body .v2-sec-title, html body .v2-filter-chip, html body .v2-filter-clear, html body .v2-filter-chip .remove, html body .v2-btn-primary, html body .v2-btn-secondary, html body .v2-help-popup { font-size: 15px !important; } } /* Un nome non si taglia: va a capo. (27 luglio 2026) ⚠️ `truncate` sui nomi lunghi faceva sparire il cognome — «Abel Xavier Luís Da Silva…». Due righe al massimo, e si spezza fra le parole, mai a metà parola. */ .ndc-nome-2righe { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: none; } /* La paginazione va a capo, non sfonda (27 luglio 2026) */ @media (max-width: 899px) { html body .ndc-pager { flex-direction: column !important; align-items: flex-start !important; gap: 8px; } html body .ndc-pager-btns { flex-wrap: wrap !important; justify-content: center; width: 100%; row-gap: 6px; } /* i tasti restano tastabili: 44 px di lato è il minimo per un dito */ html body .ndc-pager-btns > button { min-width: 44px; min-height: 44px; } } /* Sotto-tab: si va a capo, non si scorre di lato (27 luglio 2026) ⚠️ In «Riepilogo Totale» la barra `flex gap-2 overflow-x-auto` teneva un tab («Calciatori») fuori dallo schermo, raggiungibile solo scorrendo — e il dropdown mobile lì era spento. */ @media (max-width: 899px) { html body #totalsContainer .flex.overflow-x-auto, html body #totalsGlobalView .flex.overflow-x-auto, html body #perpetuaGlobalView .flex.overflow-x-auto, html body #alboSubTabBar { flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 8px; /* ⚠️ `min-w-max` = `min-width: max-content`: la barra restava larga 1607 px e andare a capo non serviva a niente. Un contenitore che non può stringersi vanifica qualunque wrap — è lo stesso vizio di `1fr` senza `minmax`. */ min-width: 0 !important; } html body #alboSubTabBar > * { flex: 0 1 auto; } } /* Primati: il NOME non si schiaccia sotto il valore (27 luglio 2026) ⚠️ «Migliaccio Giulio» restava in 42 px perché il valore («39"sec dal suo ingresso», 187 px) si prendeva la riga. Il soggetto viene prima: almeno il 55% e il valore va a capo se serve. */ @media (max-width: 899px) { html body .ndc-rec-riga { align-items: flex-start !important; } html body .ndc-rec-riga > :first-child { flex: 1 1 55% !important; min-width: 0; } html body .ndc-rec-riga > :last-child { flex: 0 1 auto !important; text-align: right; white-space: normal !important; } } /* Il selezionato, quando la classe è messa dal JS (27 luglio 2026) */ html body .ndc-sel-verde { background: var(--ndc-azione) !important; color: #ffffff !important; border: 1px solid var(--ndc-azione-hover) !important; } /* Intestazione delle schede: su mobile il tasto d'uscita e i dati non si sovrappongono (28 luglio 2026 — «TORNA ALLA LISTA» era scritto sopra la data di nascita). */ @media (max-width: 899px) { html body .ndc-testa-scheda { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px; padding-right: 56px; /* lo spazio della X in alto a destra */ } html body .ndc-testa-scheda > * { max-width: 100%; min-width: 0; } /* i dati tornano allineati a sinistra: a destra non c'è più niente accanto */ html body .ndc-testa-scheda .text-right { text-align: left !important; } html body .ndc-testa-scheda .justify-end { justify-content: flex-start !important; } } /* Le barre di esportazione (Scatola Magica) vanno a capo: a 375 px misuravano 762 px e finivano fuori dallo schermo (28 luglio 2026). */ @media (max-width: 899px) { html body .ndc-barra-export { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 8px; width: 100%; } html body .ndc-barra-export > * { flex: 0 1 auto; } } /* ══════════════════════════════════════════════════════════════════════════════ LO STILE DEI TASTI DI ESPORTAZIONE — uno solo, come nella Redazione (28 luglio 2026, Fabio: «rendili nello stile la redazione»). Era scritto dentro `grafiche/index.html`, quindi valeva solo là: qui diventa comune, e vale su mobile E su desktop («queste cose sono valide anche per la desktop»). Colori: verde SVG · arancio JPG/PNG · blu Report · viola Articolo, e sul tema chiaro il fondo scende al livello 700 — il testo è già bianco, si scurisce il fondo (contrasti misurati nella Redazione: 5,02 · 5,18 · 5,85). ══════════════════════════════════════════════════════════════════════════════ */ .ndc-btns { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } .ndc-btns > button, .ndc-btns > .ndc-social { flex: 0 1 auto; min-width: 64px; padding: 9px 12px; border: 0; border-radius: 9px; font-weight: 800; color: #fff; font-size: 15px; cursor: pointer; transition: filter .15s; } .ndc-btns > button:hover { filter: brightness(1.12); } .ndc-btns .exp-svg { background: #16a34a; } .ndc-btns .exp-jpg { background: #ea580c; } .ndc-btns .exp-rep { background: #2563eb; } .ndc-btns .exp-art { background: #7c3aed; } .ndc-btns .exp-neutro { background: var(--ndc-700, #334155); } body.bg-slate-50 .ndc-btns .exp-svg { background: #15803d; } body.bg-slate-50 .ndc-btns .exp-jpg { background: #c2410c; } body.bg-slate-50 .ndc-btns .exp-rep { background: #1d4ed8; } body.bg-slate-50 .ndc-btns .exp-art { background: #6d28d9; } body.bg-slate-50 .ndc-btns .exp-neutro { background: #64748b; } /* ══════════════════════════════════════════════════════════════════════════════ I RIQUADRINI PER STAGIONE (schede allenatore e arbitro) — 28 luglio 2026 ⚠️ Erano sei (PAN·V·N·P·GF·GS) e otto (partite·vinte casa·vinte fuori·N·rigori· espulsioni) TUTTI IN FILA: su 375 px l'ultimo restava fuori dallo schermo. ★ Vanno a capo e hanno una larghezza minima che li rende leggibili: tre per riga su 375 px. E le sigle sono diventate parole («R.C» non si capisce, «rigori casa» sì). Vale su mobile e su desktop: sopra i 900 px lo spazio c'è e restano in fila. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 899px) { html body .ndc-riquadri { flex-wrap: wrap !important; gap: 6px !important; } html body .ndc-riquadri > * { flex: 1 1 96px !important; min-width: 96px !important; max-width: 100%; } } /* ══════════════════════════════════════════════════════════════════════════════ I GRAFICI STAGIONALI non scorrono di lato (28 luglio 2026) ⚠️ `chartRefStagWrapper` (arbitri), `chartCoachStagWrapper` (allenatori) e `chartSquadraStagWrapper` (squadre) hanno `min-width:400px` e il JS li allarga in proporzione alle stagioni: misurati **1428 px** dentro un contenitore `overflow-x-auto`. Su mobile è uno scorrimento orizzontale, che qui non ammettiamo. ★ Il grafico si stringe: le barre diventano sottili, ma il PROFILO si legge e i numeri esatti stanno nei riquadri sopra. Un dato dietro un gesto è peggio di un dato piccolo. Sul desktop niente cambia. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 899px) { html body #chartRefStagWrapper, html body #chartCoachStagWrapper, html body #chartSquadraStagWrapper { min-width: 0 !important; width: 100% !important; } html body #chartRefStagWrapper > canvas, html body #chartCoachStagWrapper > canvas, html body #chartSquadraStagWrapper > canvas { max-width: 100% !important; } /* e il contenitore non ha più niente da far scorrere */ html body #chartRefStagWrapper, html body #chartCoachStagWrapper, html body #chartSquadraStagWrapper { overflow-x: visible !important; } } /* Esordi, ultima gara e prime sanzioni (scheda arbitro): ETICHETTA SOPRA, PARTITA SOTTO (28 luglio 2026 — Fabio: «tutti fuori allineamento»). ⚠️ Erano righe `justify-between`: etichetta a sinistra e partita a destra. Su 375 px «Siena-Atalanta 1-1 (0-0)» andava a capo e le due colonne non si allineavano più. ★ Su una riga stretta l'etichetta va SOPRA: si legge in ordine, senza incolonnamenti che si rompono. Sul desktop resta la stessa forma, più ordinata di prima. */ .ndc-riga-milestone { display: block; } .ndc-riga-milestone > span:first-child { display: block; margin-bottom: 4px; } .ndc-riga-milestone .ndc-val-milestone { text-align: left; } /* La barra dei comandi dichiara di stare SOPRA il contenuto (28 luglio 2026) ⚠️ Fabio l'aveva vista «coprire» l'intestazione dei riquadri: il fondo è opaco al 97% e non c'è sovrapposizione statica — è il contenuto che le scorre dietro, e senza un'ombra il taglio a metà lettera si legge come un errore di impaginazione. ★ Un'ombra non risolve un difetto: dichiara una gerarchia, ed è quello che mancava. */ .ndc-modnav { box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55) !important; } body.bg-slate-50 .ndc-modnav { box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .35) !important; } /* ══════════════════════════════════════════════════════════════════════════════ * ★★★ IL PAVIMENTO ANCHE SUL DESKTOP (28 luglio 2026, richiesta di Fabio) * * Il pavimento è nato come regola mobile. Misurato sul desktop: **68 testi sotto i * 15 px** in una sola pagina — 50 a 13, dieci a 13,6, due a 10. Un testo che non si * legge non si legge su nessuno schermo: il pubblico è lo stesso. * * ⚠️ Qui si alzano SOLO i testi, non i numeri: sul desktop la gerarchia dei corpi * (16 · 20 · 28 · 34) è quella giusta e alzare i numeri a 20 stravolgerebbe le * tabelle dense a 15 colonne. Il pavimento dei numeri resta una regola mobile. * * ┌──────────────────────────────────────────────────────────────────────────────┐ * │ ★★★ 31 LUGLIO 2026 — IL PAVIMENTO DEL DESKTOP SALE DA 15 A 18 │ * └──────────────────────────────────────────────────────────────────────────────┘ * Fabio: «secondo te 15 è un carattere leggibile in un monitor da 16 pollici?» * * ★ NO, e la ragione è geometrica, non di gusto. I 15 px sono nati misurando SUL * TELEFONO, tenuto a 30-35 cm. Un monitor si guarda a 55-70 — il doppio della * distanza — e a parità di angolo visivo servono circa 1,7 volte i pixel. Portare * qui il numero del telefono voleva dire dimezzare la leggibilità senza accorgersene. * ⚠️ Il 28 luglio ho scritto in questo stesso commento «un testo che non si legge non * si legge su nessuno schermo: il pubblico è lo stesso». Vero sul pubblico, FALSO * sulla misura: cambia la distanza, e con lei il numero. * * ★ IL VINCOLO CHE BLOCCAVA TUTTO È DECADUTO. Sopra sta scritto «alzare i numeri * stravolgerebbe le tabelle dense a 15 colonne». Fabio, 31 luglio: «tabelle non ne * abbiamo più e non devono essercene se non quelle con massimo 5 colonne». * Verificato prima di toccare: fuori da `admin/` restano QUATTRO punti con più di 5 * colonne — `campionati/1945-46.html` (9 e 11), `index.html` (9), * `varie/query-builder.js` (7). Nessuna a 15. * ★ E provato dal vivo, non stimato: sulla classifica a 9 colonne del 1945-46, a * 1440 px, il passaggio 15 → 18 lascia la tabella larga 982 px IDENTICI, zero celle * tagliate, nessuno sfondamento. Cresce solo l'altezza della riga. * * ⚠️★★★ PERCHÉ QUESTA REGOLA È IL PUNTO GIUSTO, e non le singole pagine. * Con `!important` qui dentro, nessuna pagina può alzarsi da sola: ho provato a * scrivere lo stile IN LINEA su una cella e il carattere è rimasto 15. Ecco perché * Fabio vedeva «tutti gli ambienti con caratteri piccoli» — non erano dieci difetti * in dieci posti, era UNA riga che li governava tutti. * * ⚠️ Il telefono NON si tocca: il blocco `max-width:899px` più sopra resta a 15, perché * là quel numero è misurato bene. * * ⚠️ Due eccezioni DICHIARATE, le stesse del mobile: * · i controlli della dimensione del carattere (`.fs-btn`: A− A A+ A++), che sono * minuscoli per costruzione e mostrano la scala che governano; * · gli identificativi tecnici (id squadra/giocatore in `font-mono select-all`): * riferimenti da copiare, non dati da leggere. * ══════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { html:not(.font-small):not(.font-large):not(.font-xl) .text-xs:not(.fs-btn):not(.select-all), html:not(.font-small):not(.font-large):not(.font-xl) .text-\[9px\]:not(.fs-btn):not(.select-all), html:not(.font-small):not(.font-large):not(.font-xl) .text-\[10px\]:not(.fs-btn):not(.select-all), html:not(.font-small):not(.font-large):not(.font-xl) .text-\[11px\]:not(.fs-btn):not(.select-all), html:not(.font-small):not(.font-large):not(.font-xl) .text-\[12px\]:not(.fs-btn):not(.select-all), html:not(.font-small):not(.font-large):not(.font-xl) .text-\[13px\]:not(.fs-btn):not(.select-all), html:not(.font-small):not(.font-large):not(.font-xl) .text-\[14px\]:not(.fs-btn):not(.select-all), html:not(.font-small):not(.font-large):not(.font-xl) .text-tiny:not(.fs-btn):not(.select-all) { font-size: 18px !important; /* era 15 — v. il riquadro del 31 luglio qui sopra */ line-height: 1.4 !important; } /* ★ `.text-sm` è il corpo più diffuso del sito: da solo vale 510 ricorrenze in Campionati e 809 in Calciatori. Vale 14 px in Tailwind, e senza questa riga restava l'unica fascia sotto il pavimento nuovo. */ /* ⚠️★★ ECCEZIONE DICHIARATA: le targhette dei nomi SUL CAMPETTO (31 lug 2026). Stanno in riquadri larghi 80 px sopra il campo, e a 18 px si troncavano: «Bonaventura» ne chiede 107, «De Silvestri» 96, «Stanković» 83. ★ È una regressione causata da questo stesso pavimento, trovata misurando Top 11 — non un difetto preesistente. Lì il vincolo non è la distanza dell'occhio ma la larghezza della maglia: il nome deve stare INTERO sopra il giocatore, e un nome troncato non si legge affatto. ★ Il criterio è `.truncate`, non un nome inventato per l'occasione: un elemento che DICHIARA di troncare è già vincolato in larghezza, e ingrandirlo lo tronca soltanto di più. Vale ovunque, non solo sul campetto. */ html:not(.font-small):not(.font-large):not(.font-xl) .text-sm:not(.fs-btn):not(.select-all):not(.truncate) { font-size: 18px !important; } /* le celle delle tabelle: 18 px (erano 15, e prima ancora 13) */ html:not(.font-small):not(.font-large):not(.font-xl) td, html:not(.font-small):not(.font-large):not(.font-xl) th { font-size: 18px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ * ★★★ I DATI, SUL DESKTOP, HANNO ANCH'ESSI UN PAVIMENTO (28 luglio 2026) * Fabio: «font così piccoli sono illeggibili in un contesto di molta informazione, e * se riguardano i DATI vanno assolutamente aumentati». * ★ Distinzione che regge la regola: il **testo** sta a 15 px, il **numero che porta * l'informazione** a 17 px. Non 20 come su mobile: là c'è una riga per volta, qui una * tabella a quindici colonne, e 20 px la spaccherebbero. 17 px è il valore più alto * che le tabelle dense reggono senza mandare a capo (misurato). * ⚠️ Non si toccano i numeri che hanno già una taglia grande: il pavimento non abbassa * mai — l'errore di luglio non si ripete. * ══════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { html:not(.font-small):not(.font-large):not(.font-xl) td.tabular-nums, html:not(.font-small):not(.font-large):not(.font-xl) td .tabular-nums, html:not(.font-small):not(.font-large):not(.font-xl) .tabular-nums:not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl), html:not(.font-small):not(.font-large):not(.font-xl) .font-black:not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl), /* ⚠️★★ IL PAVIMENTO NON TOCCA I PILOTI DEL KIT (28 luglio 2026). `.n2-p1` e `.n2-p3` erano qui dentro con `!important`: un pavimento che si comporta da TETTO. Sul desktop la lista deve crescere — posizione 26, punti 38 — e restavano inchiodati a 17 px, mentre il nome accanto stava a 28 (misurato). ★ Il kit calcola i propri corpi e non scende mai sotto la soglia da solo: qui il pavimento non serve, e faceva solo danno. Restano dentro le celle di tabella e le classi generiche, che non hanno nessuno che le protegga. */ /* 🔴🔴🔴 DUE ERRORI MIEI, IN FILA, IL 27 AGOSTO 2026 — vale la pena raccontarli. ① Ho tolto `.ndc-riquadri > * > *:first-child` perche' agiva da TETTO (misurato: 168 riquadri su 168 nella carriera di un allenatore col dato a 17-18 sotto un'etichetta a 18). Ma nell'unico ALTRO posto che usa `.ndc-riquadri` — il «Riepilogo Squadre» degli arbitri — quella stessa riga era un **pavimento vero**: il dato sta a 16 px e `max(17px,1em)` lo alzava a 17. Togliendola, 288 riquadri su 288 sono scesi a 16, cioe' esattamente quanto la loro etichetta. ★★★ La stessa riga aveva ruoli OPPOSTI nei due soli punti che la usano. «Tolgo la regola che fa danno» non basta: bisogna guardare **dove altro si applica**. ② Togliendola ho lasciato la lista di selettori qui sopra terminata da una VIRGOLA, con solo commenti fino alla graffa: nessun blocco di dichiarazioni. Il browser scarta la regola **intera**, e il pavimento del desktop per `td.tabular-nums`, `.tabular-nums` e `.font-black` era sparito. Verificato nel CSSOM: quel `@media` conteneva **zero regole**. ⚠️ E il commento che avevo scritto diceva «le regole generiche qui sopra continuano a coprire chi non ne ha» — cioe' affermava proprio la cosa che avevo appena rotto. Un commento non e' una verifica. ★ Rimedio: la riga torna, ma con le stesse esclusioni delle altre — chi dichiara gia' un corpo piu' grande non viene toccato, e cosi' il pavimento resta un pavimento invece di diventare un tetto. */ html:not(.font-small):not(.font-large):not(.font-xl) .ndc-riquadri > * > *:first-child:not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl) { font-size: max(17px, 1em) !important; } } /* Le voci del menu laterale (desktop) al pavimento — 28 luglio 2026 ⚠️ `#mainSidebar span { font-size: 0.85rem !important }` in v2-enhancements.css vale (1,0,1) con `!important`: batteva il pavimento (0,5,1). Sul desktop la sidebar ha spazio, quindi 13,6 px era solo un'abitudine — la navigazione si legge come il resto. ★ Per battere una regola con id serve un selettore con id: la specificità si misura. */ @media (min-width: 900px) { html body #mainSidebar span, html body #mainSidebar a, html body #mainSidebar div { font-size: 18px !important; } /* il titolo di sezione della sidebar resta più piccolo del testo? no: è un'etichetta */ html body #mainSidebar .uppercase { font-size: 16px !important; letter-spacing: .04em; } /* ★ 31 lug: 15 → 18 (le voci) e 15 → 16 (le etichette DATI/PROTAGONISTI/ESPLORA, che sono targhette e restano un gradino sotto ciò che introducono). ⚠️ Provato prima di scrivere: la barra resta larga 215 px, nessuna voce si tronca, e l'ultima («SCOMMETTI») scende di 7 px — era già oltre il bordo anche a 15, e la barra scorre da sé (`overflow-y:auto`). */ } /* Gli ultimi sei del desktop (28 luglio 2026) — misurati uno per uno: · il copyright nel piede era a **11,2 px** (il nome dell'autore del sito); · il banner dei cookie a 13,6; · «Filtra per decennio» a 14,08 px, che viene da `.text-slate-400 { font-size: .88rem }` in v2-enhancements.css — la classe di COLORE che porta una misura, la mina già trovata sul mobile il 27 luglio: qui è la stessa, sul desktop. */ @media (min-width: 900px) { html body #copyright-footer, html body #copyright-footer *, html body #ndc-cookie-banner, html body #ndc-cookie-banner * { font-size: 18px !important; } /* erano 15 (31 lug) */ html body #copyright-footer .policy-links a { font-size: 18px !important; } /* ⚠️ stessa correzione della gemella sopra: la catena si fermava a text-3xl */ /* ⚠️★★★ 31 lug 2026 — QUESTA RIGA VINCEVA SUL PAVIMENTO NUOVO, IN SILENZIO. Il pavimento del desktop è salito a 18 (v. il riquadro più sopra), ma «1° POSTO» negli ANDAMENTI di Squadre continuava a rendere 16 px. Motivo: questa regola sta DOPO nel foglio e pesa (0,11,2) contro (0,6,1) — vince due volte. ★ E `1em` non è una misura fissa: è quella del GENITORE. Il riquadro sta a 16, quindi `max(15px, 1em)` restituiva 16 e il testo restava lì. ⚠️ È la stessa «mina» descritta due righe sopra — la classe di COLORE che porta una misura — trovata sul mobile il 27 luglio e sul desktop il 28. Alla terza volta il pavimento dev'essere UNO: se cambia sopra, cambia anche qui. */ /* ⚠️ 4 set 2026 — la stessa guardia, sulla copia da SCHERMO LARGO. Il 4 mattina l'avevo lasciata stare scrivendo «stessa trappola, ma il banco misura a 375 px e non l'ha mai vista in opera». Poi Fabio: «questo controllo deve valere anche per il desktop». Misurata a 1280: **320 elementi** con il corpo dichiarato diverso da quello reso, tutti qui — «punti» scritto 16 px e reso 18, su Record. */ html body .text-slate-400:not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not([class*="text-6xl"]):not([class*="text-7xl"]):not([class*="text-8xl"]):not([class*="text-9xl"]):not([style*="font-size"]) { font-size: max(18px, 1em) !important; } } /* I dati dei gironi 1945-46: due per riga e il numero grande (28 luglio 2026) Fabio: «forse testi più grandi almeno i dati?» — stavano a 24 px in riquadri larghi e mezzi vuoti, tre per riga su 375 px. ★ Dove lo spazio c'è, il dato lo prende: è la stessa scelta del riquadro del campione in Campionati (due per riga, numeri a 34). */ .ndc-dati-girone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .ndc-dati-girone > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .ndc-dati-girone .ndc-dato { font-size: 34px !important; font-weight: 800; line-height: 1.05; } .ndc-dati-girone .ndc-et { font-size: 16px !important; margin-top: 2px; } @media (min-width: 900px) { /* sul desktop c'è più spazio: tre per riga, numeri comunque generosi */ .ndc-dati-girone { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ndc-dati-girone > div:last-child:nth-child(odd) { grid-column: auto; } .ndc-dati-girone .ndc-dato { font-size: 30px !important; } } /* La barra dei tab della 1945-46 va a capo invece di scorrere (28 luglio 2026) ★ Stessa mina della barra Albi d'Oro del 27: min-w-max vanifica il wrap. */ .ndc-barra-tab > button { font-size: 15px !important; padding-left: 12px; padding-right: 12px; } /* La barra dei tab compatta: le icone sono decorazione, il testo e' l'informazione (28 lug) */ @media (max-width: 899px) { .ndc-barra-tab > button { padding-top: 8px; padding-bottom: 8px; } .ndc-barra-tab > button > i { display: none; } } /* Il badge del rango si adatta al numero (28 luglio 2026) Fabio: «il contenitore al punto 3 allargalo». Era `w-6`, cioè 24 px fissi: bastavano per una cifra, e dalla decima posizione in poi il numero veniva tagliato — «20» ne chiede 28. ★ Larghezza MINIMA 24 (il cerchio resta tondo per le prime nove) e poi cresce col contenuto: la forma segue il dato, non il contrario. */ .ndc-rango { min-width: 24px; width: auto; padding: 0 5px; } /* ═══════════════════════════════════════════════════════════════════════════ STEMMI MONOCROMATICI — il marchio deve vedersi su TUTTI i temi (28 lug 2026) ═══════════════════════════════════════════════════════════════════════════ Il PNG della Juventus era il marchio BIANCO su trasparente: invisibile sul fondo chiaro (Fabio l'ha visto nella classifica 1945-46). Rigenerato NERO dall'SVG — che è la forma giusta del marchio — ma così sparisce sul tema scuro (Fabio: «occhio quando usi la juve su sfondo scuro»). ★ Un marchio a un solo colore non ha una versione buona per entrambi i fondi: ne ha DUE, e sono l'una il negativo dell'altra. Invece di tenere due file e sceglierli via JavaScript, si inverte quello che c'è: su un PNG di puro nero su trasparente `invert(1)` restituisce esattamente il bianco d'origine. ⚠️ Vale SOLO per i marchi a un colore solo. Misurato su tutti i 74 stemmi: l'unico con luminanza 0 è la Juventus. Invertire un Napoli (azzurro) o un Bologna (rosso e blu) ne stravolgerebbe i colori. Se un domani se ne aggiunge un altro, va aggiunto qui — non è una regola generale. Il tema è una classe sul body: bg-slate-50 chiaro · bg-slate-900 scuro · bg-black nero (OLED). */ body.bg-slate-900 img[src*="/Juventus.png"], body.bg-black img[src*="/Juventus.png"] { filter: invert(1); } /* ══════════════════════════════════════════════════════════════════════════════════════ GLI STEMMI — UNA GESTIONE SOLA, DESKTOP E MOBILE (31 luglio 2026) ══════════════════════════════════════════════════════════════════════════════════════ Fabio: «lo stemma di Juve e Napoli era in sospeso, la sua visibilità nei vari temi» e poi «unifica tutta la gestione degli stemmi sia desktop che mobile». IL PROBLEMA, MISURATO sui file veri (luminosità dei pixel opachi, 0 = nero): · Juventus luminosità 0 — il **100%** dei pixel è quasi nero: una «J» nera su trasparente, che sul tema scuro sparisce del tutto · Inter 68% scuri · Milan 70% · Pisa 62% → stesso rischio · Napoli cerchio azzurro con anello e lettera BIANCHI, che sul tema chiaro si fondono col fondo Non è quindi il caso di due squadre: è il caso di ogni stemma il cui colore va nella stessa direzione del fondo. LA CURA: non si toccano i colori dello stemma — sarebbe falsare un marchio — ma gli si mette sotto una base neutra che CAMBIA COL TEMA. Così il contrasto è garantito qualunque sia il colore, e nessuna squadra va trattata come un caso speciale. ⚠️ La regola aggancia gli stemmi dal PERCORSO (`src*="stemmi/"`), non da una classe: nel sito compaiono in **21 file** con nomi di classe diversi, e una regola per classe ne avrebbe coperti solo alcuni — che è esattamente il difetto che stiamo togliendo. ⚠️ Vale per desktop e mobile insieme: nessun `@media`, nessuna eccezione. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ★★★ 1 AGOSTO 2026 — LA BASE È CHIARA SEMPRE, SU TUTTI I TEMI. Fabio: «lo stemma Juventus, da sempre lo stesso problema: scuro su scuro». ⚠️ MISURATO: la luminanza media dei pixel non trasparenti dello stemma della Juventus è **0** — è nero pieno. Su una base al 10% di bianco, sopra un fondo #020617, resta invisibile. Non era una questione di gusto: era aritmetica. ⚠️ E la vecchia regola aveva il difetto SPECULARE: sul tema chiaro la base era scura all'8%, quindi uno stemma bianco spariva allo stesso modo. Due varianti di tema, due modi di sbagliare. ★ LA REGOLA UNICA: gli stemmi sono disegnati per stare su BIANCO — è così che vengono stampati. Una base chiara li fa leggere tutti, neri e bianchi, su qualunque tema, e non tratta nessuna squadra come caso speciale. ⚠️🔴 E LA BASE CHIARA DA SOLA NON BASTA — sarebbe l'errore speculare. Misurati tutti e 74 gli stemmi: **1 molto scuro** (Juventus, L=0) e **2 molto chiari** (Hellas Verona e Verona, L>200). Una base chiara fa leggere la Juventus e fa sparire il Verona. ★ Non esiste UNA base buona per entrambi: la base la deve decidere lo stemma. Lo fa `js/stemmi-contrasto.js`, che ne misura la luminanza e sceglie. Qui resta solo il valore neutro di partenza, per chi sta nel mezzo (la maggioranza). */ img[src*="stemmi/"] { background: rgba(255, 255, 255, .10); /* base neutra: la sovrascrive `stemmi-contrasto.js` */ border-radius: 50%; /* il riempimento stacca il disegno dal bordo della base: senza, uno stemma quadrato tocca il cerchio e sembra tagliato */ padding: 2px; box-sizing: border-box; } body.bg-slate-50 img[src*="stemmi/"] { background: rgba(15, 23, 42, .08); } body.bg-black img[src*="stemmi/"] { background: rgba(255, 255, 255, .14); } /* ★ le due decise dalla misura vincono su tutto, tema compreso */ html img[src*="stemmi/"].ndc-stemma-scuro { background: rgba(255, 255, 255, .92) !important; } html img[src*="stemmi/"].ndc-stemma-chiaro { background: rgba(15, 23, 42, .80) !important; } /* ⚠️ ECCEZIONI DICHIARATE: dove lo stemma è già dentro una sua cornice — la pedina del campetto, la testata della scheda partita — la base diventa un secondo cerchio dentro il primo. Là non serve e si toglie. */ .ft-campo img[src*="stemmi/"], svg img[src*="stemmi/"], .n2-top .n2-stem { background: none; padding: 0; }