: nell'archivio di stagione ogni competizione porta il colore del proprio ramo. */ .tema-rosso { --accento: var(--rosso); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--sfondo); color: var(--testo); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; } a { color: var(--accento); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } /* ---------- intestazione ---------- */ .bfl-header { border-bottom: 3px solid var(--accento); padding: 14px 0 10px; } .bfl-contenitore { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; } .bfl-logo img { display: block; max-height: 84px; width: auto; } /* ---------- navigazione ---------- */ .bfl-nav { position: relative; border-bottom: 1px solid var(--bordo); background: var(--sfondo); } .bfl-nav-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px; } .bfl-nav-lista a { display: block; padding: 11px 13px; font-size: 14px; font-weight: 600; color: var(--testo); border-bottom: 3px solid transparent; white-space: nowrap; } .bfl-nav-lista a:hover { color: var(--accento); text-decoration: none; background: var(--sfondo-alt); } .bfl-nav-lista a.attiva { color: var(--accento); border-bottom-color: var(--accento); } /* Ogni voce porta il colore del suo ramo, in qualunque pagina ci si trovi: azzurro la Serie A e la Champions, rosso la Serie B e l'Europa League. */ .bfl-nav-lista a.rosso { color: var(--rosso); } .bfl-nav-lista a.rosso:hover, .bfl-nav-lista a.rosso.attiva { color: var(--rosso); } .bfl-nav-lista a.rosso.attiva { border-bottom-color: var(--rosso); } .bfl-nav-lista a.blu { color: var(--blu); } .bfl-nav-lista a.blu:hover, .bfl-nav-lista a.blu.attiva { color: var(--blu); } .bfl-nav-lista a.blu.attiva { border-bottom-color: var(--blu); } .bfl-nav-toggle { display: none; width: 100%; padding: 10px 16px; background: none; border: 0; border-bottom: 1px solid var(--bordo); font: inherit; font-weight: 600; text-align: left; color: var(--testo); cursor: pointer; } .bfl-nav-toggle::before { content: "\2630\00a0\00a0"; } /* ---------- selettore stagione ---------- */ .bfl-stagione { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px; color: var(--testo-tenue); } .bfl-stagione select { font: inherit; padding: 4px 6px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--sfondo); color: var(--testo); } .rimando-albo { margin: 4px 0 22px; font-size: 15px; } /* avviso discreto, per gli stati che vale la pena segnalare (una partita ancora da giocare, un dato non disponibile) */ .avviso { background: var(--sfondo-alt); border-left: 3px solid var(--accento); padding: 8px 12px; margin: 0 0 16px; font-size: 14px; } /* ---------- contenuto ---------- */ main { padding: 18px 0 40px; } h1, h2, h3 { margin: 0 0 12px; line-height: 1.25; font-weight: 700; } h1 { font-size: 22px; color: var(--accento); } h2 { font-size: 18px; } h3 { font-size: 15px; } .bfl-sezione { margin-bottom: 30px; } .bfl-titolo-sezione { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accento); } .bfl-titolo-sezione h2 { margin: 0; color: var(--accento); } .bfl-titolo-sezione .sottotitolo { font-size: 13px; color: var(--testo-tenue); } /* l'annata affianca il nome della competizione ed e' resa allo stesso modo: stesso corpo, stesso colore, stesso peso */ .bfl-titolo-sezione h2 .annata { font: inherit; color: inherit; } .torna-indietro { margin: 0 0 14px; font-size: 14px; } .torna-indietro a { color: var(--testo-tenue); } .torna-indietro a:hover { color: var(--accento); } /* Marcatori accanto al risultato: nelle stagioni storiche erano gia' scritti nella pagina, dal 2005/06 si ricavano dai gol registrati in formazioni. Il primo gruppo e' sempre quello della squadra di casa, come nell'originale; il punto e virgola separa le due squadre. */ table.incontri td.marcatori { font-size: 12px; width: 34%; line-height: 1.45; } table.incontri .mc-sep { padding: 0 4px; opacity: .6; } @media (max-width: 620px) { table.incontri td.marcatori { font-size: 11px; } } /* ---------- tabelle ---------- */ /* Le tabelle di classifica e tabellino sono larghe: su schermo stretto scorrono dentro il proprio contenitore invece di allargare la pagina. */ .bfl-tabella-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; } table.bfl { width: 100%; border-collapse: collapse; font-size: 13px; } table.bfl th, table.bfl td { padding: 6px 8px; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: middle; } table.bfl thead th { background: var(--accento); color: #fff; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border-bottom: 0; } table.bfl tbody tr:hover { background: var(--sfondo-alt); } table.bfl td.num, table.bfl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } table.bfl td.centro, table.bfl th.centro { text-align: center; } table.bfl .principale { font-weight: 600; } table.bfl .tenue { color: var(--testo-tenue); } /* ---------- classifica ---------- */ /* La posizione occupa quanto le basta: lasciata libera, nelle classifiche a tre colonne si allargava fino a staccare il numero dal nome della squadra. */ table.classifica th:first-child, table.classifica td:first-child { width: 1%; white-space: nowrap; padding-right: 4px; } /* Colori sociali: cerchio diviso a meta', con il bordo come terzo colore. Il gradiente ha uno stacco netto al 50%, non una sfumatura. */ .pallino { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(0,0,0,.25); flex: none; box-sizing: border-box; } /* A 30px il cerchio e' piu' alto del testo. L'allineamento si fa su un contenitore interno: mettere display:flex sul gli toglierebbe il comportamento di cella e sfalserebbe le colonne. */ .squadra-cella { display: flex; align-items: center; gap: 9px; } table.classifica td.principale { white-space: nowrap; } .nota-penalita { font-size: 12px; margin-top: -8px; } /* Dettaglio casa/fuori: 21 colonne non stanno su un telefono. Sotto i 700px restano solo i totali. */ @media (max-width: 700px) { .solo-largo { display: none; } } /* Nella home la classifica e' sempre ridotta ai totali. */ table.classifica.compatta .solo-largo { display: none; } /* ---------- facce dei presidenti ---------- */ /* Una fila per divisione: Serie A sopra, Serie B sotto. */ .facce-fila { margin-bottom: 18px; } .facce-etichetta { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blu); border-bottom: 2px solid var(--blu); padding-bottom: 4px; } .facce-fila.fila-b .facce-etichetta { color: var(--rosso); border-bottom-color: var(--rosso); } .facce { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px; margin-bottom: 8px; } /* Sotto il ritratto la maglia sociale, su una riga propria: in linea col nome manderebbe a capo le squadre dal nome lungo. */ .faccia .colori { display: flex; justify-content: center; margin-top: 6px; } .faccia-maglia { width: 42px; height: auto; } .faccia .nome { margin-top: 3px; } .faccia { text-align: center; } .faccia img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raggio); /* il bordo dice la divisione, come nell'originale */ border: 3px solid var(--blu); background: var(--sfondo-alt); } .faccia.serie-b img { border-color: var(--rosso); } .faccia .nome { display: block; margin-top: 5px; font-size: 11px; line-height: 1.3; color: var(--testo-tenue); } .faccia a:hover img { filter: brightness(1.06); } .faccia a:hover .nome { color: var(--accento); } .faccia .vuota { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 3px solid var(--bordo); border-radius: var(--raggio); background: var(--sfondo-alt); color: var(--testo-tenue); font-size: 20px; font-weight: 700; } /* Sul telefono quattro per riga: con le colonne calcolate sullo spazio il numero cambiava da un modello all'altro e le due file non si allineavano. E al posto del ritratto resta la sola maglia: a quella misura una faccia non si riconosce, una maglia si. */ @media (max-width: 560px) { .facce { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .faccia .nome { font-size: 10px; } .faccia a > img, .faccia .vuota { display: none; } .faccia .colori { margin-top: 0; } .faccia-maglia { width: 100%; } } /* ---------- home ---------- */ .home-comp { margin-bottom: 34px; } .home-comp .bfl-titolo-sezione a { color: var(--accento); } .home-doppia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } @media (max-width: 860px) { .home-doppia { grid-template-columns: 1fr; gap: 18px; } } .home-doppia h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); } .home-scadenza { background: var(--sfondo-alt); border-left: 3px solid var(--accento); padding: 10px 14px; margin-bottom: 20px; font-size: 14px; } /* ---------- giornate e incontri ---------- */ .bfl-giornata { border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: 10px; background: var(--sfondo); } .bfl-giornata > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; list-style: none; } .bfl-giornata > summary::-webkit-details-marker { display: none; } .bfl-giornata > summary::before { content: "\25B8"; color: var(--accento); transition: transform .15s ease; } .bfl-giornata[open] > summary::before { transform: rotate(90deg); } .bfl-giornata > summary:hover { background: var(--sfondo-alt); } .bfl-giornata > summary .scadenza { margin-left: auto; font-weight: 400; font-size: 12px; } .bfl-giornata .bfl-tabella-wrap { margin: 0; } .bfl-giornata table.bfl { font-size: 14px; } .bfl-giornata table.bfl tr:last-child td { border-bottom: 0; } table.incontri td.squadra { width: 38%; } table.incontri td.casa { text-align: right; } table.incontri td.ospite { text-align: left; } table.incontri td.risultato { width: 12%; white-space: nowrap; } table.incontri .punteggio { font-weight: 700; padding: 2px 8px; border-radius: var(--raggio); background: var(--sfondo-alt); color: var(--testo); display: inline-block; } table.incontri .punteggio:hover { background: var(--accento); color: #fff; text-decoration: none; } table.incontri td.fantapunti { width: 12%; font-size: 12px; } /* Con i marcatori le colonne sono cinque: i nomi delle squadre cedono spazio. */ table.incontri.con-marcatori td.squadra { width: 22%; } table.incontri.con-marcatori td.risultato { width: 10%; } table.incontri.con-marcatori td.fantapunti { width: 10%; } @media (max-width: 480px) { table.incontri td.fantapunti { display: none; } } /* classifica marcatori: era il "mostra classifica marcatori" dell'originale */ .marcatori-classifica { margin-top: 4px; margin-bottom: 16px; } table.classifica-marcatori th:first-child, table.classifica-marcatori td:first-child { width: 8%; } table.classifica-marcatori th:nth-child(2), table.classifica-marcatori td:nth-child(2) { width: 8%; } table.classifica-marcatori th:nth-child(3), table.classifica-marcatori td:nth-child(3) { width: 46%; } /* ---------- albo d'oro ---------- */ table.albo td.stagione { white-space: nowrap; font-weight: 600; width: 1%; } table.albo td { vertical-align: top; } /* nelle stagioni con due righe per cella (Serie A/Serie B) i due vincitori restano su righe distinte */ table.albo td br { content: ""; display: block; margin-bottom: 2px; } table.albo a { font-weight: 500; } /* ---------- tabellino ---------- */ .tab-contesto { margin: -6px 0 16px; font-size: 13px; } /* Le due squadre affiancate su desktop, impilate su telefono. */ .tab-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } @media (max-width: 760px) { .tab-griglia { grid-template-columns: 1fr; gap: 30px; } } .tab-squadra { min-width: 0; } .tab-testata { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 2px solid var(--accento); } /* h2 nel tabellino, h3 nella pagina delle formazioni, dove il livello sopra e' gia' occupato dal turno: stessa resa, il nome della squadra apre la colonna */ .tab-testata h2, .tab-testata h3 { margin: 0; font-size: 17px; color: var(--accento); } .tab-gol { margin-left: auto; font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accento); } .tab-marcatori { margin: 0 0 10px; font-size: 13px; color: var(--testo-tenue); } /* Lo stacco fra chi ha giocato e chi no e' l'informazione principale della formazione e va letto a colpo d'occhio. Tutte e cinque le colonne — ruolo, numero, nome, voto, switch — prendono lo stesso colore, nero per chi ha giocato: se anche una sola resta a meta' strada la differenza si annacqua. Il "tenue" non si applica qui, per lo stesso motivo. */ table.tabellino { font-size: 13px; } table.tabellino td, table.tabellino td.tenue { padding: 4px 6px; color: #000; } table.tabellino .tab-ruolo { width: 1%; white-space: nowrap; font-size: 11px; } table.tabellino .tab-ord { width: 1%; white-space: nowrap; font-size: 11px; } table.tabellino .tab-nome { width: auto; } table.tabellino .tab-voto { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; } table.tabellino .tab-switch { width: 1%; } /* Chi non e' sceso in campo: tutte e cinque le colonne dello stesso grigio chiaro, e in corsivo. Niente barratura, che si leggerebbe come "annullato". */ table.tabellino tr.nongiocato td, table.tabellino tr.nongiocato td.tenue { color: #b9c1c8; font-style: italic; } table.tabellino tr.tab-separatore td { background: var(--sfondo-alt); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); padding: 3px 6px; } /* Il riepilogo del punteggio: i modificatori si mostrano sempre, anche a zero, e sono tutti dello stesso grigio scuro. Solo il totale spicca. */ table.tab-totali { width: 100%; margin-top: 10px; font-size: 13px; } table.tab-totali td { padding: 3px 6px; border: 0; color: var(--testo-tenue); } table.tab-totali tr.totale td { border-top: 1px solid var(--bordo); padding-top: 6px; font-weight: 700; font-size: 15px; color: var(--testo); } /* i supplementari vengono dopo il totale, come nel tabellino d'epoca */ table.tab-totali tr.supplementari td { font-style: italic; } /* ---------- formazioni ---------- */ /* Le partite di uno stesso turno una sotto l'altra, ciascuna con le sue due colonne: la griglia e' la stessa del tabellino, cambia solo la distanza. */ .form-partita { margin-bottom: 26px; } .form-partita:last-child { margin-bottom: 0; } /* I ruoli in cui il giocatore puo' essere schierato: informazione di servizio, sta accanto al nome ma non deve competere con lui. */ table.formazione .form-ruoli { width: 1%; white-space: nowrap; font-size: 11px; } table.formazione .form-ruoli, table.formazione tr.form-riserva td { color: var(--testo-tenue); } table.formazione tr.form-riserva td { font-size: 12px; font-style: italic; } /* Stacco fra un reparto e l'altro: una riga bassa e senza bordo. Nell'ASP era una riga di gif trasparenti; qui basta lo spazio. */ table.formazione tr.form-stacco td { padding: 0; height: 8px; border-bottom: 0; } table.formazione tr.form-stacco:hover { background: none; } .form-malus { margin: 6px 0 0; font-size: 12px; font-style: italic; } /* Chi ha consegnato e chi no: azzurro e rosso, gli unici due colori del sito. */ table.consegne .consegna-ok { color: var(--blu); font-weight: 700; } table.consegne .consegna-no { color: var(--rosso); font-weight: 700; } /* ---------- scheda della fantasquadra ---------- */ .fs-testata { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 2px solid var(--accento); } .fs-intestazione { min-width: 0; } .fs-dati { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 14px; } .fs-scorciatoie { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 14px; } .fs-scorciatoie a { color: var(--testo-tenue); } .fs-scorciatoie a:hover { color: var(--accento); } /* Palmares: due righe di contatori, sopra i trofei ancora in palio, sotto quelli delle competizioni chiuse, che restano in secondo piano. Le due griglie hanno le stesse colonne, cosi' i riquadri si incolonnano. */ .fs-palmares { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .fs-palmares:last-child { margin-bottom: 0; } .fs-palmares li { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px 12px; display: flex; align-items: baseline; gap: 10px; } .fs-palmares .numero { font-size: 22px; font-weight: 700; color: var(--accento); font-variant-numeric: tabular-nums; } .fs-palmares .titolo { font-size: 13px; } .fs-palmares li.spenta { background: var(--sfondo-alt); } .fs-palmares li.spenta .numero { color: var(--testo-tenue); font-weight: 400; } .fs-palmares li.spenta .titolo { color: var(--testo-tenue); } /* le immagini stanno alla loro dimensione, affiancate al contenuto */ .fs-storia { display: flow-root; } .fs-storia img { float: right; margin: 0 0 12px 20px; border-radius: var(--raggio); } .fs-storia p { margin: 0; line-height: 1.65; } .fs-societa-blocco { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .fs-societa-blocco img { border-radius: var(--raggio); } .fs-societa-blocco .bfl-tabella-wrap { flex: 1 1 280px; margin-bottom: 0; } table.fs-societa td:first-child { width: 34%; } /* Rosa: i reparti su una riga sola, la maglia di fianco. I reparti si spartiscono lo spazio in parti uguali (flex: 1 1 0), qualunque sia il loro numero, cosi' non vanno mai a capo. */ .fs-rosa-blocco { display: flex; align-items: flex-start; gap: 20px; } .fs-rosa-blocco .fs-maglia { flex: none; order: 2; } .fs-rosa { display: flex; gap: 14px; flex: 1 1 auto; min-width: 0; } .fs-reparto { flex: 1 1 0; min-width: 0; } .fs-reparto h3 { margin: 0 0 6px; } .fs-reparto h3 .tenue { font-weight: 400; font-size: 13px; } .fs-reparto ul { list-style: none; margin: 0; padding: 0; font-size: 14px; } .fs-reparto li { padding: 3px 0; border-bottom: 1px solid var(--bordo); } .fs-reparto li:last-child { border-bottom: 0; } /* Rosa con i contratti: sei blocchi invece dei reparti, e per ogni giocatore ingaggio e anni di contratto. Sei colonne su una riga sola stanno strette, quindi qui la rosa va a capo invece di comprimersi. */ /* Tre blocchi per riga: sopra portieri, difensori e laterali, sotto dal centrocampo in su. Lasciati liberi di andare a capo da soli si sistemavano quattro e due, e il taglio cadeva in mezzo alla difesa invece che fra i reparti. Con la griglia il capo va sempre sui centrocampisti. */ .fs-rosa.con-contratti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; } .fs-rosa.con-contratti .fs-reparto { min-width: 0; } @media (max-width: 900px) { .fs-rosa.con-contratti { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .fs-rosa.con-contratti { grid-template-columns: 1fr; } } table.fs-contratti { font-size: 13px; } table.fs-contratti td { padding: 3px 4px; } table.fs-contratti .fs-nome { width: auto; } table.fs-contratti .fs-ruoli { width: 1%; white-space: nowrap; font-size: 11px; } table.fs-contratti .fs-squadra { width: 1%; white-space: nowrap; font-size: 11px; } table.fs-contratti .fs-ingaggio { width: 1%; white-space: nowrap; } table.fs-contratti .fs-contratto{ width: 1%; white-space: nowrap; font-size: 11px; } /* Le tre convenzioni del foglio d'asta, che qui valgono come li': corsivo e anno fra parentesi per gli under 21, barrato per gli over senza una squadra di serie A. Il corsivo e' riservato a questo, percio' gli infortunati sotto restano solo in grigio. */ table.fs-contratti .under21 { font-style: italic; } table.fs-contratti .priorita { text-decoration: underline; } table.fs-contratti .fuori-serie-a { text-decoration: line-through; } /* I due segni si sommano, ma text-decoration non si eredita fra regole: se non si scrive il caso doppio, l'ultima vince e uno dei due sparisce. */ table.fs-contratti .priorita.fuori-serie-a { text-decoration: underline line-through; } table.fs-contratti .fs-anno { color: var(--testo-tenue); font-size: 11px; } /* Chi e' in lista infortunati resta in rosa ma non conta nei limiti: si vede che c'e' senza pesare quanto gli altri. */ table.fs-contratti tr.infortunato td { color: var(--testo-tenue); } table.fs-contratti tr.fs-sostituto td { border-bottom: 0; font-size: 11px; padding-top: 0; } .fs-nota-rosa { margin: 10px 0 0; font-size: 12px; } /* Rendimento dei giocatori: tre righe a testa (campionato, coppe, totale). Le prime due restano in secondo piano, la somma e' quella che si legge. */ table.fs-giocatori tr.g-parziale td { color: var(--testo-tenue); border-bottom: 0; } table.fs-giocatori tr.g-totale td { font-weight: 600; } table.fs-giocatori tr.g-parziale td.g-nome, table.fs-giocatori tr.g-totale td.g-nome { white-space: nowrap; } table.fs-giocatori tr.g-parziale + tr.g-parziale td { padding-top: 0; } table.fs-giocatori tr.g-totale td { padding-bottom: 8px; } table.fs-andamento tfoot td { border-bottom: 0; font-weight: 700; } table.fs-andamento tfoot tr.totale td { border-top: 2px solid var(--bordo); } table.fs-andamento tfoot tr.media td { font-weight: 400; color: var(--testo-tenue); } /* le altre squadre: quattro per riga, riquadri tutti della stessa misura */ .fs-elenco { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .fs-elenco li { display: flex; align-items: center; gap: 9px; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 7px 10px; font-size: 14px; min-width: 0; } .fs-elenco li > a, .fs-elenco li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-elenco li.corrente { background: var(--sfondo-alt); font-weight: 700; } /* su schermo stretto i reparti vanno a capo e la maglia passa sotto */ @media (max-width: 820px) { .fs-rosa-blocco { flex-wrap: wrap; } .fs-rosa { flex-wrap: wrap; } .fs-reparto { flex: 1 1 150px; } .fs-rosa-blocco .fs-maglia { order: 0; margin: 0 auto; } .fs-elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .fs-storia img { float: none; display: block; margin: 0 auto 14px; } } @media (max-width: 420px) { .fs-elenco { grid-template-columns: 1fr; } } /* ---------- statistiche generali ---------- */ .stats-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--bordo); font-size: 14px; } .stats-nav a { color: var(--testo-tenue); } .stats-nav a:hover { color: var(--accento); } .stats-nav .attiva { font-weight: 700; color: var(--accento); } /* i riquadri delle graduatorie e degli scontri, tutti della stessa misura */ .stats-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .stats-blocco h3 { margin: 0 0 6px; } .stats-blocco table { margin: 0; } table.stats-rendimento td { padding: 4px 6px; } table.stats-rendimento td:first-child { width: 1%; white-space: nowrap; } table.stats-rendimento td:last-child { width: 22%; } table.stats-scontri th, table.stats-scontri td { padding: 4px 6px; } /* andamento: una colonna per squadra, l'esito nella cella */ table.stats-andamento td:first-child, table.stats-andamento th:first-child { white-space: nowrap; } table.stats-andamento td.centro { font-weight: 700; } .esito-v { color: #1a7f37; } .esito-n { color: var(--testo-tenue); } .esito-p { color: var(--rosso); } .stats-legenda { font-size: 13px; margin-top: 8px; } .stats-legenda span { font-weight: 700; } /* ---------- pie' di pagina ---------- */ .bfl-footer { border-top: 1px solid var(--bordo); padding: 16px 0 26px; font-size: 13px; color: var(--testo-tenue); } .bfl-footer a { color: var(--testo-tenue); text-decoration: underline; } .bfl-footer a:hover { color: var(--accento); } /* ---------- torna su ---------- */ /* Prende il colore del ramo: azzurro in Serie A, rosso in Serie B, come il resto della pagina. Senza JavaScript resta nascosto e l'ancora funziona comunque dal fondo pagina. */ .torna-su { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accento); color: #fff; font-size: 20px; line-height: 1; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; } .torna-su.visibile { opacity: .85; visibility: visible; transform: none; } .torna-su:hover, .torna-su:focus { opacity: 1; color: #fff; } @media (max-width: 560px) { .torna-su { right: 12px; bottom: 12px; width: 38px; height: 38px; font-size: 18px; } } /* Chi ha chiesto meno movimento non lo vede comparire da sotto. */ @media (prefers-reduced-motion: reduce) { .torna-su { transition: none; transform: none; } } /* ---------- responsive ---------- */ @media (max-width: 860px) { .bfl-nav-toggle { display: block; } .bfl-nav-lista { display: none; flex-direction: column; gap: 0; padding-bottom: 8px; } .bfl-nav-lista.aperto { display: flex; } .bfl-nav-lista a { padding: 11px 16px; border-bottom: 1px solid var(--bordo); } .bfl-nav-lista a.attiva { border-bottom-color: var(--bordo); border-left: 3px solid var(--accento); padding-left: 13px; } .bfl-stagione { margin: 0; padding: 8px 16px; } .bfl-logo img { max-height: 60px; } body { font-size: 14px; } } @media (max-width: 480px) { .bfl-contenitore { padding: 0 12px; } h1 { font-size: 19px; } table.bfl { font-size: 12px; } table.bfl th, table.bfl td { padding: 5px 6px; } } @media print { .bfl-nav, .bfl-footer, .bfl-stagione, .noprint { display: none !important; } body { font-size: 11px; } } /* ============================================================ Classi storiche del sito ASP. Servono ai testi HTML salvati nel database (news, pendolini, descrizioni fantasquadra) che le contengono gia'. Rimappate sulla nuova scala: nell'originale erano 8-10px, illeggibili su mobile. ============================================================ */ .testo, .testoj { font-size: 13px; line-height: 1.5; color: var(--testo); } .testoj { text-align: left; } .testo_ccc { font-size: 13px; color: #b6bcc3; } .testo9 { font-size: 12px; line-height: 1.45; } .testo9_ccc { font-size: 12px; color: #b6bcc3; } .testo8 { font-size: 11px; line-height: 1.4; } .testo8_ccc { font-size: 11px; color: #b6bcc3; } .testobig { font-size: 15px; line-height: 1.4; } .testobig_blu { font-size: 15px; font-weight: 700; color: var(--blu); } .testobig_rosso { font-size: 15px; font-weight: 700; color: var(--rosso); } .testodata { font-size: 13px; color: var(--blu); } .testodata_rosso { font-size: 13px; color: var(--rosso); } .testodata_grigio { font-size: 13px; color: var(--testo-tenue); } .testodata9 { font-size: 12px; color: var(--blu); } .testodata9_rosso { font-size: 12px; color: var(--rosso); } .testobianco { font-size: 13px; color: #fff; } .testobianco9 { font-size: 12px; color: #fff; } .link1 { color: var(--blu); } .link1_rosso { color: var(--rosso); } .link1_grigio { color: var(--testo-tenue); } .link2 { color: var(--testo); } .link2:hover { color: var(--blu); } .link2_rosso { color: var(--testo); } .link2_rosso:hover { color: var(--rosso); } .linkbianco { color: #fff; } #email { display: none; } /* trappola anti-spam presente nell'originale */