/* =========================================================================
CalcioMap - Foglio di stile del tema
Caricato dopo bootstrap.min.css: qui stanno solo le personalizzazioni.
========================================================================= */
/* -------------------------------------------------------------------------
0. Caratteri
-------------------------------------------------------------------------
Due font variabili serviti in locale, nessuna richiesta a Google Fonts:
una sola richiesta per famiglia copre tutti i pesi da 400 a 700, contro
i quattro file che servirebbero con i font statici.
Archivo per titoli e interfaccia: e' un grottesco stretto, pensato per
titolazione fitta, e regge bene i corpi grandi senza occupare due righe.
Source Serif per il testo lungo: le grazie guidano l'occhio sulla riga e
su articoli da millecinquecento parole la differenza si sente.
font-display: swap fa comparire subito il testo con il font di sistema
e lo sostituisce a caricamento finito. Bloccare il rendering in attesa
del font peggiorerebbe l'LCP, che e' il vincolo principale del progetto.
------------------------------------------------------------------------- */
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Serif";
src: url("../fonts/source-serif-variable.woff2") format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Serif";
src: url("../fonts/source-serif-variable-italic.woff2") format("woff2-variations");
font-weight: 400 700;
font-style: italic;
font-display: swap;
}
/* -------------------------------------------------------------------------
1. Design token
------------------------------------------------------------------------- */
:root {
/*
* Palette Brasile, sostituita alla precedente (blu navy / oro / blu
* cielo / prugna) su richiesta del 21/08/2026. I nomi delle variabili
* sono rimasti quelli originali per non dover toccare le centinaia di
* regole che li usano: solo il valore e' cambiato. La combinazione
* precedente e' conservata per intero in tools/palette-precedente.md,
* insieme alla procedura per tornare indietro in un solo passaggio.
*/
--cm-navy: #12140f;
--cm-navy-soft: #1e2118;
--cm-green: #087a3a;
--cm-green-dark: #05602e;
--cm-accent: #ffd400;
--cm-danger: #d8443c;
--cm-sky: #146b3a;
--cm-plum: #2c2f28;
--cm-text: #14150f;
--cm-text-muted: #5a5d52;
--cm-border: #e2e4d8;
--cm-surface: #ffffff;
--cm-surface-alt: #f6f7f0;
--cm-radius: 14px;
--cm-radius-sm: 8px;
--cm-shadow-sm: 0 1px 2px rgba(18, 20, 15, .06), 0 2px 8px rgba(18, 20, 15, .04);
--cm-shadow-md: 0 4px 12px rgba(18, 20, 15, .08), 0 12px 32px rgba(18, 20, 15, .08);
/*
* Altezza della sola riga del menu: e' la parte che resta agganciata
* scorrendo, ed e' il valore con cui si compensa il salto alle ancore.
* Alzata da 62px a 78px il 21/08/2026 su richiesta esplicita (la barra
* era "troppo piccola"): logo, voci di menu e lente sono state
* ingrandite in proporzione nelle rispettive regole, cosi' la riga piu'
* alta non lascia solo vuoto sopra e sotto elementi rimasti piccoli.
*/
--cm-header-h: 78px;
/* Altezza della barra di servizio, la riga che scorre via. */
--cm-servizio-h: 46px;
/*
* Segnaposto per lo spazio colore delle sfumature. Restano vuoti sui
* browser che non sanno interpolare in oklab, dove la sfumatura viene
* comunque disegnata nello spazio predefinito. Serve un preambolo non
* vuoto prima del segnaposto, altrimenti la regola sarebbe un errore di
* sintassi proprio sui browser che si vogliono servire.
*/
--in-oklab: ;
--in-oklch: ;
/*
* Due famiglie con ruoli distinti: il sans per tutto cio' che e' interfaccia
* e titolazione, il serif per la prosa. I fallback hanno metriche vicine
* agli originali, cosi' lo scambio a font caricato non sposta il testo e
* non genera scostamento di layout (CLS).
*/
--cm-font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--cm-font-text: "Source Serif", Georgia, "Times New Roman", "Liberation Serif", serif;
/* Retrocompatibilita' con le regole scritte prima della revisione. */
--cm-font: var(--cm-font-ui);
}
@supports (background: linear-gradient(in oklab, white, black)) {
:root {
--in-oklab: in oklab;
--in-oklch: in oklch;
}
}
/* -------------------------------------------------------------------------
2. Base
------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
/*
* Compensa l'header agganciato quando si salta a un'ancora, tenendo conto
* anche della barra di amministrazione. Il selettore e' :root e non html
* perche' admin-bar.css imposta a sua volta scroll-padding-top su html:
* a parita' di specificita' vincerebbe l'ultimo caricato, e la pseudo-classe
* :root ha specificita' superiore, quindi il risultato e' deterministico.
*/
:root {
scroll-padding-top: calc(
var(--cm-header-h) + var(--wp-admin--admin-bar--height, 0px) + 16px
);
}
body {
margin: 0;
font-family: var(--cm-font);
font-size: 1rem;
line-height: 1.65;
color: var(--cm-text);
background: var(--cm-surface);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--cm-green-dark);
text-decoration: none;
}
a:hover,
a:focus-visible {
text-decoration: underline;
}
h1, h2, h3, h4 {
font-family: var(--cm-font-ui);
font-weight: 700;
line-height: 1.18;
color: var(--cm-navy);
margin: 0 0 .6em;
letter-spacing: -.02em;
/* Evita che un titolo lungo resti spezzato su una parola sola. */
text-wrap: balance;
}
/*
* Scala tipografica costruita su un rapporto costante, non su valori scelti
* a occhio: ogni livello e' circa 1,25 volte il precedente. I clamp fanno
* crescere i titoli con la larghezza dello schermo senza media query.
*/
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
h4 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
p { margin: 0 0 1.1em; }
/* Contorno di focus visibile: requisito di accessibilita' WCAG. */
:focus-visible {
outline: 3px solid var(--cm-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Rispetta chi ha ridotto le animazioni a livello di sistema. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* Utility per testo riservato agli screen reader. */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: .7rem 1.1rem;
background: var(--cm-navy);
color: #fff;
border-radius: 0 0 var(--cm-radius-sm) 0;
}
.skip-link:focus {
left: 0;
}
/* -------------------------------------------------------------------------
3. Layout
------------------------------------------------------------------------- */
.cm-container {
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: 20px;
}
.cm-main {
min-height: 60vh;
padding-block: 2.5rem 4rem;
}
.cm-section {
margin-block: 3rem;
}
/* -------------------------------------------------------------------------
4. Header
------------------------------------------------------------------------- */
.cm-header {
position: sticky;
/*
* A utente collegato la barra di amministrazione e' fissa in cima e
* coprirebbe l'header agganciato. WordPress dichiara la propria altezza
* in --wp-admin--admin-bar--height su html (32px, 46px sotto 782px) solo
* quando la barra e' presente: a utente non collegato la variabile non
* esiste e vale il valore di ripiego 0px.
*/
top: var(--wp-admin--admin-bar--height, 0px);
/* Sotto l'header ma sopra il contenuto; la barra admin sta a 99999. */
z-index: 900;
background: var(--cm-navy);
color: #fff;
box-shadow: var(--cm-shadow-sm);
}
/*
* Sotto i 600px WordPress rende la barra di amministrazione position: absolute:
* scorre via con la pagina e non va piu' compensata, altrimenti l'header
* resterebbe staccato dal bordo superiore.
*/
@media screen and (max-width: 600px) {
.cm-header {
top: 0;
}
}
/*
* L'header e' una griglia sola su due righe, e non due blocchi impilati:
* gli stessi elementi cambiano posto fra desktop e mobile senza essere
* duplicati nel markup. Ricerca e lingua stanno nella barra di servizio su
* schermo largo e accanto al logo su schermo stretto, ma il pannello di
* ricerca resta uno solo.
*
* La disposizione di partenza e' quella stretta: la griglia a due righe con
* la barra si attiva da 992px in su.
*/
.cm-header__inner {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
grid-template-areas:
"marchio . lingua ricerca interruttore"
"navigazione navigazione navigazione navigazione navigazione";
align-items: center;
column-gap: .5rem;
min-height: var(--cm-header-h);
}
/*
* A schermo stretto il contenitore della barra si dissolve: display: contents
* lo toglie dal flusso lasciando i figli come elementi diretti della griglia,
* liberi di occupare un'area propria. E' quello che permette di non duplicare
* il pulsante di ricerca in due punti del markup.
*/
.cm-servizio {
display: contents;
}
.cm-servizio__voci {
display: none;
}
.cm-lang {
grid-area: lingua;
}
.cm-brand {
grid-area: marchio;
}
.cm-nav-toggle {
grid-area: interruttore;
}
.cm-nav {
grid-area: navigazione;
}
@media (min-width: 992px) {
.cm-header__inner {
grid-template-columns: auto 1fr auto;
grid-template-areas:
"barra barra barra"
"marchio navigazione ricerca";
column-gap: 1.2rem;
}
.cm-servizio {
grid-area: barra;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: var(--cm-servizio-h);
}
.cm-servizio__voci {
display: flex;
align-items: center;
gap: 1.1rem;
}
.cm-nav {
justify-self: end;
}
/*
* Scorrendo, la barra di servizio esce dalla vista e resta agganciata solo
* la riga del menu. Lo scostamento negativo pari alla sua altezza fa
* esattamente questo: l'header si aggancia con i primi trentasei pixel
* sopra il bordo. Sommare le due righe terrebbe fissi quasi cento pixel di
* comandi sopra il testo, per tutta la lettura.
*/
.cm-header {
top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--cm-servizio-h));
}
/*
* Fascia piu' scura dietro la prima riga. E' un pseudo-elemento e non uno
* sfondo sul blocco perche' deve arrivare ai bordi della finestra, mentre
* il blocco vive dentro il contenitore centrato.
*/
.cm-header::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: var(--cm-servizio-h);
background: rgba(0, 0, 0, .22);
border-bottom: 1px solid rgba(255, 255, 255, .08);
pointer-events: none;
}
}
/* Collegamenti di servizio ---------------------------------------------- */
.cm-servizio__voci a {
position: relative;
display: inline-flex;
align-items: center;
color: rgba(255, 255, 255, .72);
font-family: var(--cm-font-ui);
font-size: .86rem;
font-weight: 600;
letter-spacing: .01em;
text-decoration: none;
}
.cm-servizio__voci a:hover,
.cm-servizio__voci a:focus-visible {
color: #fff;
text-decoration: none;
}
.cm-brand {
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: 1.42rem;
font-weight: 800;
color: #fff;
letter-spacing: -.02em;
}
.cm-brand:hover,
.cm-brand:focus-visible {
color: #fff;
text-decoration: none;
}
.cm-brand__mark {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--cm-green) 0%, var(--cm-accent) 100%);
flex: 0 0 auto;
}
/* Pulsante di apertura del menu su mobile. */
.cm-nav-toggle {
display: none;
align-items: center;
gap: .5rem;
padding: .5rem .8rem;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--cm-radius-sm);
color: #fff;
font: inherit;
font-size: .9rem;
cursor: pointer;
}
.cm-nav-toggle__bars,
.cm-nav-toggle__bars::before,
.cm-nav-toggle__bars::after {
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
.cm-nav-toggle__bars {
position: relative;
}
.cm-nav-toggle__bars::before,
.cm-nav-toggle__bars::after {
content: "";
position: absolute;
left: 0;
}
.cm-nav-toggle__bars::before { top: -6px; }
.cm-nav-toggle__bars::after { top: 6px; }
/* -------------------------------------------------------------------------
5. Navigazione principale
------------------------------------------------------------------------- */
.cm-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.cm-nav > ul {
display: flex;
align-items: center;
gap: .15rem;
}
/*
* Le voci di primo livello restano su una riga. Prima andavano a capo tutte:
* non era una scelta di stile, era il menu che non ci stava, perche' ricerca e
* lingua occupavano 288 pixel della stessa riga. Con la barra di servizio lo
* spazio c'e', e una voce spezzata in due righe tornerebbe a essere il segnale
* che qualcosa non entra piu'.
*/
@media (min-width: 992px) {
.cm-nav > ul > li > a {
white-space: nowrap;
}
}
.cm-nav a {
display: block;
padding: .7rem .8rem;
color: var(--cm-accent);
font-size: .95rem;
font-weight: 700;
border-radius: var(--cm-radius-sm);
transition: background-color .18s ease, color .18s ease;
}
.cm-nav a:hover,
.cm-nav a:focus-visible {
background: var(--cm-accent);
color: var(--cm-navy);
text-decoration: none;
}
.cm-nav .current-menu-item > a,
.cm-nav .current-menu-ancestor > a {
background: var(--cm-accent);
color: var(--cm-navy);
}
/*
* Fra 992 e 1199 pixel le otto voci a riga singola, con lo spazio di
* marchio e lente gia' tolti, non ci stanno con la spaziatura piena: la
* riga di navigazione condivide le colonne della griglia con la barra di
* servizio (sono la stessa griglia su due righe), quindi un traboccamento
* qui trascina fuori dal contenitore anche lingua e ricerca nella riga
* sopra, non solo il menu stesso. Si stringe qui padding, spaziatura e
* carattere, e si torna alla misura piena da 1200px, dove lo spazio avanza
* davvero.
*
* La regola sta dopo .cm-nav a e non prima: a parita' di specificita' vince
* l'ultima dichiarata nel file, non quella "logicamente" piu' vicina alla
* sua sezione. E' lo stesso errore che aveva rotto l'hamburger su mobile.
*/
@media (min-width: 992px) and (max-width: 1199px) {
.cm-nav > ul {
gap: 0;
}
.cm-nav a {
padding-inline: .5rem;
font-size: .87rem;
}
}
/* Sottomenu a tendina su desktop. */
.cm-nav li {
position: relative;
}
/* .children e' la classe generata dal menu di ripiego wp_list_pages(). */
.cm-nav .sub-menu,
.cm-nav .children {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 232px;
padding: .4rem;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
box-shadow: var(--cm-shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cm-nav li:hover > .sub-menu,
.cm-nav li:focus-within > .sub-menu,
.cm-nav li:hover > .children,
.cm-nav li:focus-within > .children {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cm-nav .sub-menu a,
.cm-nav .children a {
color: var(--cm-text);
font-weight: 500;
}
.cm-nav .sub-menu a:hover,
.cm-nav .sub-menu a:focus-visible,
.cm-nav .children a:hover,
.cm-nav .children a:focus-visible {
background: var(--cm-surface-alt);
color: var(--cm-navy);
}
/* -------------------------------------------------------------------------
Selettore di lingua
-------------------------------------------------------------------------
Lo stato di partenza e' l'elenco visibile, cioe' le due pill affiancate:
e' cio' che si vede se il JavaScript non parte. E' lo script ad aggiungere
la classe is-tendina, che nasconde l'elenco e mostra il pulsante.
Scritto al contrario, con l'elenco nascosto nel markup, un errore nello
script lascerebbe il sito senza alcun modo di cambiare lingua.
------------------------------------------------------------------------- */
.cm-lang {
position: relative;
display: flex;
align-items: center;
}
.cm-lang__menu {
display: flex;
align-items: center;
gap: .3rem;
list-style: none;
margin: 0;
padding: 0;
}
.cm-lang__menu a {
display: block;
padding: .3rem .55rem;
font-family: var(--cm-font-ui);
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
text-decoration: none;
}
.cm-lang__menu .current-lang a,
.cm-lang__menu a:hover {
background: var(--cm-green);
border-color: var(--cm-green);
color: #fff;
text-decoration: none;
}
/* Il nome esteso serve solo dentro la tendina. */
.cm-lang__nome {
display: none;
}
/* Pulsante della tendina ------------------------------------------------ */
.cm-lang__toggle {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .48rem .65rem .48rem .7rem;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 999px;
color: rgba(255, 255, 255, .88);
font-family: var(--cm-font-ui);
font-size: .84rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.cm-lang__toggle:hover,
.cm-lang__toggle[aria-expanded="true"] {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .38);
color: #fff;
}
.cm-lang__globo {
opacity: .8;
}
.cm-lang__freccia {
opacity: .7;
transition: transform .16s ease;
}
.cm-lang__toggle[aria-expanded="true"] .cm-lang__freccia {
transform: rotate(180deg);
}
/* Stato con JavaScript attivo ------------------------------------------- */
.cm-lang.is-tendina .cm-lang__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 20;
display: block;
min-width: 168px;
padding: .35rem;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius-sm);
box-shadow: var(--cm-shadow-md);
}
.cm-lang.is-tendina .cm-lang__menu[hidden] {
display: none;
}
.cm-lang.is-tendina .cm-lang__menu a {
display: flex;
align-items: center;
gap: .55rem;
padding: .5rem .6rem;
border: 0;
border-radius: 6px;
color: var(--cm-text);
font-size: .88rem;
font-weight: 600;
text-transform: none;
}
.cm-lang.is-tendina .cm-lang__menu a:hover,
.cm-lang.is-tendina .cm-lang__menu a:focus-visible {
background: var(--cm-surface-alt);
color: var(--cm-navy);
}
.cm-lang.is-tendina .cm-lang__menu .current-lang a {
background: transparent;
color: var(--cm-green-dark);
}
.cm-lang.is-tendina .cm-lang__menu .current-lang a::after {
content: "\2713";
margin-left: auto;
font-weight: 700;
}
.cm-lang.is-tendina .cm-lang__sigla {
min-width: 26px;
padding: .12rem .3rem;
background: var(--cm-surface-alt);
border-radius: 4px;
font-family: var(--cm-font-ui);
font-size: .68rem;
font-weight: 700;
text-align: center;
color: var(--cm-text-muted);
}
.cm-lang.is-tendina .cm-lang__nome {
display: inline;
}
/* -------------------------------------------------------------------------
6. Breadcrumb
------------------------------------------------------------------------- */
.cm-breadcrumb {
padding-block: .9rem;
background: var(--cm-surface-alt);
border-bottom: 1px solid var(--cm-border);
font-size: .87rem;
}
.cm-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem;
list-style: none;
margin: 0;
padding: 0;
}
.cm-breadcrumb li:not(:last-child)::after {
content: "/";
margin-left: .4rem;
color: var(--cm-text-muted);
}
.cm-breadcrumb a {
color: var(--cm-text-muted);
}
.cm-breadcrumb [aria-current="page"] {
color: var(--cm-navy);
font-weight: 600;
}
/* -------------------------------------------------------------------------
7. Hero
------------------------------------------------------------------------- */
.cm-hero {
position: relative;
padding: 2.6rem 0 2.2rem;
background:
radial-gradient(1000px 380px at 12% -18%, rgba(8, 122, 58, .22), transparent 60%),
linear-gradient(135deg, var(--cm-navy) 0%, var(--cm-navy-soft) 100%);
color: #fff;
overflow: hidden;
}
.cm-hero h1 {
color: #fff;
margin-bottom: .45rem;
}
.cm-hero__subtitle {
max-width: 62ch;
margin: 0;
font-size: clamp(1rem, .95rem + .35vw, 1.16rem);
color: rgba(255, 255, 255, .84);
}
.cm-hero__media {
margin-top: 1.8rem;
border-radius: var(--cm-radius);
overflow: hidden;
box-shadow: var(--cm-shadow-md);
}
/* -------------------------------------------------------------------------
7-bis. Scheda club e stadio
------------------------------------------------------------------------- */
/*
Due blocchi affiancati che si impilano da soli quando lo spazio scende
sotto i 280px per colonna. Non serve una media query: auto-fit con minmax
la sostituisce, e continua a funzionare anche dentro contenitori stretti
dove una media query, che guarda il viewport, sbaglierebbe.
Ogni blocco ha un colore proprio, dichiarato una volta sola nella variabile
--cm-scheda-accent e usato da testata, bordo, sfondo e stato di passaggio
del puntatore. Cambiare identita' a un blocco vuol dire cambiare una riga:
e' il motivo per cui il colore sta in una variabile e non ripetuto in
cinque regole.
*/
.cm-scheda {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
margin-bottom: 2.4rem;
}
.cm-scheda__blocco {
--cm-scheda-accent: var(--cm-green);
overflow: hidden;
background: var(--cm-surface);
border: 1px solid color-mix(in oklab, var(--cm-scheda-accent) 24%, var(--cm-border));
border-radius: var(--cm-radius);
box-shadow: var(--cm-shadow-sm);
}
.cm-scheda__blocco--stadio {
--cm-scheda-accent: var(--cm-sky);
}
/* Testata a tinta piena: e' cio' che distingue le due schede a colpo d'occhio. */
.cm-scheda__titolo {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
margin: 0;
padding: .85rem 1.4rem;
overflow: hidden;
background: linear-gradient(100deg var(--in-oklab),
var(--cm-scheda-accent),
color-mix(in oklab, var(--cm-scheda-accent) 55%, var(--cm-navy)));
color: #fff;
font-size: .8rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
/*
Marcature sulla testata: l'arco del dischetto sulla destra e la linea di
meta' campo. Sono due pseudo-elementi e nessuna immagine. Restano molto
tenui: devono farsi notare dopo il titolo, non prima.
*/
.cm-scheda__titolo::before {
content: "";
position: absolute;
inset-block: -60%;
inset-inline-end: 1.1rem;
inline-size: 88px;
border: 2px solid rgba(255, 255, 255, .22);
border-radius: 50%;
pointer-events: none;
}
.cm-scheda__titolo::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-end: 3.5rem;
inline-size: 2px;
background: rgba(255, 255, 255, .16);
pointer-events: none;
}
@media (forced-colors: active) {
.cm-scheda__titolo::before,
.cm-scheda__titolo::after {
content: none;
}
}
.cm-scheda__icona {
flex: none;
inline-size: 1.15rem;
block-size: 1.15rem;
}
.cm-scheda__dati {
margin: 0;
padding: .35rem 1.4rem .5rem;
}
/*
Il separatore si applica alle righe che non sono l'ultima, invece di essere
messo su tutte e poi tolto all'ultima: cosi' la regola dice cosa vuole
ottenere e non puo' cancellare per sbaglio un bordo deciso altrove.
*/
.cm-scheda__riga {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .3rem 1rem;
margin-inline: -.6rem;
padding: .62rem .6rem;
border-radius: var(--cm-radius-sm);
transition: background-color .18s ease;
}
.cm-scheda__riga:not(:last-child) {
border-bottom: 1px solid var(--cm-border);
}
.cm-scheda__riga:hover {
background: color-mix(in oklab, var(--cm-scheda-accent) 7%, transparent);
}
.cm-scheda__riga dt {
font-size: .92rem;
color: var(--cm-text-muted);
}
.cm-scheda__riga dd {
margin: 0;
font-weight: 700;
text-align: right;
/* Cifre a larghezza fissa: capienze e anni restano incolonnati. */
font-variant-numeric: tabular-nums;
color: var(--cm-navy);
}
.cm-scheda__mappa {
margin: 0;
padding: .2rem 1.4rem 0;
font-size: .94rem;
}
.cm-scheda__mappa a {
display: inline-flex;
align-items: center;
gap: .4rem;
/* Bersaglio tattile: sotto i 24px il dito manca il collegamento. */
min-block-size: 24px;
font-weight: 600;
color: color-mix(in oklab, var(--cm-scheda-accent) 70%, var(--cm-navy));
}
.cm-scheda__nota {
margin: 0;
padding: .7rem 1.4rem 1.2rem;
font-size: .84rem;
line-height: 1.5;
text-wrap: pretty;
color: var(--cm-text-muted);
}
/* -------------------------------------------------------------------------
7-ter. Hero sezione
-------------------------------------------------------------------------
Copertina scura delle pagine Sezione (template-sezione.php), stessa
identita' della copertina in home ma con testo allineato a sinistra:
briciole di pane integrate, titolo con barra gialla, sottotitolo e
pillole informative, piu' un pallone disegnato in SVG a destra (vedi
template-parts/global/hero-sezione.php). Le media query stanno tutte
qui, nella stessa sezione delle regole di base: spostarle in un blocco
responsive condiviso e lontano da qui e' l'errore che in passato ha
gia' rotto un componente simile.
------------------------------------------------------------------------- */
.cm-hero-sezione {
position: relative;
padding: 3rem 0 2.6rem;
background:
radial-gradient(900px 360px at 85% -10%, rgba(255, 212, 0, .10), transparent 60%),
radial-gradient(1000px 380px at 8% 110%, rgba(8, 122, 58, .28), transparent 60%),
linear-gradient(135deg, var(--cm-navy) 0%, var(--cm-navy-soft) 100%);
color: #fff;
overflow: hidden;
}
.cm-hero-sezione__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
align-items: center;
gap: 2.4rem;
}
.cm-hero-sezione__testo {
min-width: 0;
}
.cm-hero-sezione__briciole {
margin: 0 0 1rem;
font-size: .85rem;
}
.cm-hero-sezione__briciole ol {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: .35rem;
}
.cm-hero-sezione__briciole li {
display: flex;
align-items: center;
gap: .35rem;
}
.cm-hero-sezione__briciole li:not(:last-child)::after {
content: "/";
color: rgba(255, 255, 255, .35);
}
.cm-hero-sezione__briciole a {
color: rgba(255, 255, 255, .72);
}
.cm-hero-sezione__briciole a:hover,
.cm-hero-sezione__briciole a:focus-visible {
color: #fff;
text-decoration: underline;
}
.cm-hero-sezione__briciole [aria-current="page"] {
color: var(--cm-accent);
font-weight: 700;
}
.cm-hero-sezione__titolo {
color: #fff;
margin: 0;
}
.cm-hero-sezione__barra {
display: block;
width: 64px;
height: 4px;
margin: .7rem 0 1.1rem;
border-radius: 2px;
background: var(--cm-accent);
}
.cm-hero-sezione__sottotitolo {
max-width: 60ch;
margin: 0 0 1.3rem;
font-size: clamp(1rem, .95rem + .35vw, 1.14rem);
color: rgba(255, 255, 255, .84);
}
.cm-hero-sezione__pillole {
display: flex;
flex-wrap: wrap;
gap: .6rem;
list-style: none;
margin: 0;
padding: 0;
}
.cm-hero-sezione__pillola {
padding: .4rem .9rem;
border-radius: 999px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .18);
font-size: .82rem;
font-weight: 600;
color: #fff;
}
.cm-hero-sezione__arte {
display: flex;
align-items: center;
justify-content: center;
}
.cm-hero-sezione__arte svg {
width: 100%;
max-width: 220px;
height: auto;
}
@media (max-width: 991px) {
.cm-hero-sezione {
padding: 2.2rem 0 2rem;
}
.cm-hero-sezione__inner {
grid-template-columns: 1fr;
gap: 1.4rem;
}
.cm-hero-sezione__arte svg {
max-width: 150px;
margin: 0 auto;
}
}
@media (max-width: 575px) {
.cm-hero-sezione__pillole {
gap: .45rem;
}
.cm-hero-sezione__pillola {
padding: .35rem .75rem;
font-size: .78rem;
}
}
/* -------------------------------------------------------------------------
8. Schede numeri chiave
------------------------------------------------------------------------- */
/*
L'azzeramento dei segni di elenco sta qui e non su una regola globale:
una regola su * non sarebbe sovrascrivibile da un livello di cascata piu'
basso senza !important. Va ripetuto anche il padding, perche' il segno di
elenco vive nello spazio che il browser riserva a sinistra.
*/
.cm-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: -2.2rem;
margin-bottom: 2.6rem;
padding: 0;
list-style: none;
position: relative;
z-index: 2;
}
/*
Quattro colori che ruotano sulle quattro schede. Il valore resta blu scuro
invece di prendere il colore della scheda: su fondo chiaro l'oro non
raggiungerebbe il rapporto di contrasto richiesto, e un numero che non si
legge non e' un numero. Il colore lo portano la barra, il bordo e il
fondo, che sono decorazione e non informazione.
*/
.cm-stat {
--cm-stat-accent: var(--cm-green);
position: relative;
overflow: hidden;
padding: 1.4rem 1.15rem 1.25rem;
/*
* Due strati: le fasce del taglio dell'erba, appena percettibili, e sopra
* la sfumatura del colore della scheda. Le fasce sono una sfumatura
* ripetuta e non un'immagine: pesano zero byte, restano nitide a ogni
* ingrandimento e prendono il colore dalla variabile della scheda.
*/
background:
repeating-linear-gradient(115deg,
color-mix(in oklab, var(--cm-stat-accent) 5%, transparent) 0 14px,
transparent 14px 28px),
linear-gradient(165deg var(--in-oklab),
color-mix(in oklab, var(--cm-stat-accent) 10%, var(--cm-surface)),
var(--cm-surface) 62%);
border: 1px solid color-mix(in oklab, var(--cm-stat-accent) 26%, var(--cm-border));
border-radius: var(--cm-radius);
box-shadow: var(--cm-shadow-sm);
text-align: center;
transition: transform .2s ease, box-shadow .2s ease;
}
.cm-stat:nth-child(2) { --cm-stat-accent: var(--cm-sky); }
.cm-stat:nth-child(3) { --cm-stat-accent: var(--cm-accent); }
.cm-stat:nth-child(4) { --cm-stat-accent: var(--cm-plum); }
/* Barra di testata. */
.cm-stat::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 4px;
background: linear-gradient(to right var(--in-oklab),
var(--cm-stat-accent),
color-mix(in oklab, var(--cm-stat-accent) 45%, var(--cm-navy)));
}
/*
Cerchio di centrocampo tagliato dall'angolo: e' il segno che dice "campo"
senza dover caricare un'immagine di uno stadio. Solo il contorno, non il
pieno, perche' e' cosi' che le marcature stanno su un campo vero.
*/
.cm-stat::after {
content: "";
position: absolute;
inset-block-start: -46px;
inset-inline-end: -46px;
inline-size: 124px;
block-size: 124px;
border: 2px solid color-mix(in oklab, var(--cm-stat-accent) 26%, transparent);
border-radius: 50%;
pointer-events: none;
}
.cm-stat:hover {
transform: translateY(-3px);
box-shadow: var(--cm-shadow-md);
}
/*
In modalita' a contrasto forzato sfondi e sfumature spariscono: la barra
di testata viene ridisegnata come bordo, che invece resta.
*/
@media (forced-colors: active) {
.cm-stat {
border-block-start: 4px solid CanvasText;
}
.cm-stat::before,
.cm-stat::after {
content: none;
}
}
.cm-stat__value {
display: block;
position: relative;
font-size: 1.9rem;
font-weight: 800;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--cm-navy);
}
.cm-stat__label {
display: block;
position: relative;
margin-top: .35rem;
font-size: .78rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
text-wrap: balance;
/*
* Etichetta virata verso il colore della scheda ma tenuta scura: mescolata
* con il blu resta leggibile anche quando l'accento e' l'oro.
*/
color: color-mix(in oklab, var(--cm-stat-accent) 32%, var(--cm-navy));
}
/* -------------------------------------------------------------------------
9. Tab
------------------------------------------------------------------------- */
.cm-tabs {
display: flex;
gap: .3rem;
margin-bottom: 1.8rem;
padding-bottom: 2px;
list-style: none;
overflow-x: auto;
border-bottom: 2px solid var(--cm-border);
scrollbar-width: thin;
}
.cm-tabs::-webkit-scrollbar { height: 4px; }
.cm-tabs::-webkit-scrollbar-thumb { background: var(--cm-border); border-radius: 4px; }
.cm-tabs button {
position: relative;
padding: .75rem 1.05rem;
background: none;
border: 0;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
color: var(--cm-text-muted);
font: inherit;
font-size: .95rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color .18s ease, border-color .18s ease;
}
.cm-tabs button:hover {
color: var(--cm-navy);
}
.cm-tabs button[aria-selected="true"] {
color: var(--cm-green-dark);
border-bottom-color: var(--cm-green);
}
/*
* Nessuna regola display:none sui pannelli.
* I pannelli usano hidden="until-found" e il browser li nasconde da solo con
* content-visibility: hidden. Forzare display:none romperebbe la funzione
* ed escluderebbe il testo dalla ricerca nella pagina.
*/
.cm-panel {
animation: cm-fade .22s ease;
}
@keyframes cm-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* -------------------------------------------------------------------------
10. Contenuto editoriale
------------------------------------------------------------------------- */
/*
* La prosa passa al serif e cresce di corpo. Diciannove pixel su venti-trenta
* righe di testo non sono un vezzo: sotto i diciotto la lettura prolungata
* costringe ad avvicinarsi allo schermo, e queste pagine sono lunghe.
*/
.cm-content {
font-family: var(--cm-font-text);
font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
line-height: 1.72;
}
/*
* Misura di riga: oltre le settanta battute l'occhio fatica a ritrovare
* l'inizio della riga successiva. Il limite si applica solo al testo
* corrente, non a tabelle e figure, che restano a piena larghezza.
*/
.cm-content > p,
.cm-content > ul,
.cm-content > ol,
.cm-content > blockquote,
.cm-content > h2,
.cm-content > h3,
.cm-content > h4 {
max-width: 68ch;
}
.cm-content > *:first-child { margin-top: 0; }
.cm-content > *:last-child { margin-bottom: 0; }
.cm-content h2 {
margin-top: 2.6rem;
padding-top: .9rem;
border-top: 3px solid var(--cm-border);
}
.cm-content h3 { margin-top: 1.9rem; }
.cm-content ul,
.cm-content ol {
margin: 0 0 1.1em;
padding-left: 1.35em;
}
.cm-content li { margin-bottom: .4em; }
/*
* Primo paragrafo in evidenza: da' un attacco alla pagina e riprende la
* regola di scrittura secondo cui chi legge solo l'apertura ha gia'
* la risposta.
*/
.cm-content > p:first-of-type {
font-size: 1.14em;
line-height: 1.62;
color: var(--cm-navy);
}
/* -------------------------------------------------------------------------
10-0. Firma e data di aggiornamento
------------------------------------------------------------------------- */
.cm-firma {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .35rem .8rem;
margin: 0 0 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--cm-border);
font-family: var(--cm-font-ui);
font-size: .9rem;
color: var(--cm-text-muted);
}
.cm-firma__autore {
font-weight: 700;
color: var(--cm-navy);
}
/* Separatore fra le voci, disegnato con un pseudo-elemento per non
sporcare il markup con caratteri decorativi letti dagli screen reader. */
.cm-firma__ruolo::before,
.cm-firma__data::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin-right: .8rem;
vertical-align: middle;
background: var(--cm-border);
border-radius: 50%;
}
/* -------------------------------------------------------------------------
10-0bis. Sintesi iniziale
-------------------------------------------------------------------------
Il riquadro "in breve" in cima all'articolo. Risponde alla domanda in sei
righe per chi non legge tutto, ed e' il formato che Google preferisce
quando sceglie un estratto da mostrare in cima ai risultati.
------------------------------------------------------------------------- */
.cm-content .cm-sintesi {
max-width: 68ch;
margin: 0 0 2.4rem;
padding: 1.4rem 1.6rem;
background: linear-gradient(180deg, #f2f8f5 0%, var(--cm-surface-alt) 100%);
border: 1px solid var(--cm-border);
border-left: 4px solid var(--cm-green);
border-radius: var(--cm-radius);
}
.cm-content .cm-sintesi > h2,
.cm-content .cm-sintesi > h3 {
margin: 0 0 .9rem;
padding: 0;
border: 0;
font-size: 1.05rem;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--cm-green-dark);
}
.cm-content .cm-sintesi ul {
margin: 0;
padding-left: 1.15em;
font-size: .98em;
}
.cm-content .cm-sintesi li {
margin-bottom: .5em;
}
.cm-content .cm-sintesi li:last-child {
margin-bottom: 0;
}
/* -------------------------------------------------------------------------
10-bis. Figure e diagrammi
------------------------------------------------------------------------- */
.cm-figure {
margin: 2rem 0;
padding: 1.4rem;
background: var(--cm-surface-alt);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
}
.cm-figure svg,
.cm-figure img {
display: block;
width: 100%;
height: auto;
}
.cm-figure figcaption {
margin-top: 1rem;
font-family: var(--cm-font-ui);
font-size: .88rem;
line-height: 1.5;
color: var(--cm-text-muted);
text-align: center;
}
/* -------------------------------------------------------------------------
10-ter. Indice dell'articolo
-------------------------------------------------------------------------
Lo scorrimento morbido e la compensazione dell'header agganciato sono gia'
impostati su :root in cima al foglio: qui serve solo la presentazione.
------------------------------------------------------------------------- */
.cm-toc {
margin: 0 0 2.5rem;
padding: 1.3rem 1.5rem;
background: var(--cm-surface-alt);
border: 1px solid var(--cm-border);
border-left: 4px solid var(--cm-green);
border-radius: var(--cm-radius);
font-family: var(--cm-font-ui);
max-width: 68ch;
}
.cm-toc__title {
margin: 0 0 .8rem;
font-size: .82rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cm-text-muted);
}
.cm-toc ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: cm-toc;
}
.cm-toc li { margin: 0 0 .45rem; }
.cm-toc li:last-child { margin-bottom: 0; }
.cm-toc a {
display: block;
padding: .15rem 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
color: var(--cm-navy);
counter-increment: cm-toc;
}
.cm-toc a::before {
content: counter(cm-toc) ".";
display: inline-block;
min-width: 1.6em;
color: var(--cm-green-dark);
font-variant-numeric: tabular-nums;
}
/* Le sottovoci rientrano e perdono la numerazione, per non competere. */
.cm-toc .cm-toc__sub {
margin: .35rem 0 .6rem 1.6em;
}
.cm-toc .cm-toc__sub a {
font-size: .94rem;
font-weight: 400;
color: var(--cm-text-muted);
}
.cm-toc .cm-toc__sub a::before {
content: "";
min-width: 0;
}
.cm-toc a:hover,
.cm-toc a:focus-visible {
color: var(--cm-green-dark);
text-decoration: underline;
}
/* Voce corrispondente alla sezione visibile, aggiornata da main.js. */
.cm-toc a[aria-current="true"] {
color: var(--cm-green-dark);
}
/* -------------------------------------------------------------------------
10-quater. Torna su
------------------------------------------------------------------------- */
.cm-top {
position: fixed;
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
z-index: 90;
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .7rem .95rem;
font-family: var(--cm-font-ui);
font-size: .88rem;
font-weight: 600;
line-height: 1;
color: #fff;
text-decoration: none;
background: var(--cm-navy);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px;
box-shadow: var(--cm-shadow-md);
transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}
.cm-top:hover,
.cm-top:focus-visible {
background: var(--cm-green-dark);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}
/*
* L'attributo hidden va rispettato esplicitamente: display:inline-flex qui
* sopra vincerebbe sulla regola predefinita del browser, e il pulsante
* resterebbe visibile anche quando lo script lo nasconde.
*/
.cm-top[hidden] {
display: none;
}
/*
* Su schermo stretto resta la sola freccia: un pulsante con etichetta
* coprirebbe una porzione di testo troppo ampia.
*/
@media (max-width: 600px) {
.cm-top {
padding: .8rem;
}
.cm-top__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
/* -------------------------------------------------------------------------
10-sexies. Fonti ufficiali
------------------------------------------------------------------------- */
.cm-fonti {
max-width: 68ch;
margin: 3rem 0 0;
padding: 1.5rem 1.7rem;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
}
.cm-fonti__titolo {
margin: 0 0 .5rem;
padding: 0;
border: 0;
font-size: 1.1rem;
}
.cm-fonti__nota {
margin: 0 0 1rem;
font-family: var(--cm-font-ui);
font-size: .87rem;
line-height: 1.55;
color: var(--cm-text-muted);
}
.cm-fonti__elenco {
display: grid;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--cm-font-ui);
font-size: .95rem;
}
.cm-fonti__elenco a {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 600;
}
/*
* Freccia che segnala il collegamento verso l'esterno. E' decorativa e sta
* in un pseudo-elemento: dentro il markup verrebbe letta dagli screen reader
* come un carattere senza significato.
*/
.cm-fonti__elenco a::after {
content: "";
width: 12px;
height: 12px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* -------------------------------------------------------------------------
10-quinquies. Riquadro di utilita'
------------------------------------------------------------------------- */
.cm-utile {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
margin: 3rem 0 0;
padding: 1.5rem 1.7rem;
background: var(--cm-surface-alt);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
}
.cm-utile__testo {
flex: 1 1 320px;
}
.cm-utile__titolo {
margin: 0 0 .3rem;
font-family: var(--cm-font-ui);
font-size: 1.08rem;
font-weight: 700;
color: var(--cm-navy);
}
.cm-utile__nota {
margin: 0;
font-family: var(--cm-font-ui);
font-size: .86rem;
line-height: 1.5;
color: var(--cm-text-muted);
}
.cm-utile__scelte {
display: flex;
gap: .6rem;
}
.cm-utile__btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .68rem 1.35rem;
font-family: var(--cm-font-ui);
font-size: .95rem;
font-weight: 600;
color: var(--cm-navy);
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: 999px;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cm-utile__btn:hover,
.cm-utile__btn:focus-visible {
color: var(--cm-green-dark);
border-color: var(--cm-green);
background: #fff;
}
.cm-utile__btn[disabled] {
opacity: .5;
cursor: default;
}
.cm-utile__btn[aria-pressed="true"] {
color: #fff;
background: var(--cm-green-dark);
border-color: var(--cm-green-dark);
opacity: 1;
}
.cm-utile__esito {
flex: 1 1 100%;
margin: 0;
font-family: var(--cm-font-ui);
font-size: .92rem;
color: var(--cm-text-muted);
}
.cm-utile__esito[hidden] {
display: none;
}
/*
* Ancora del titolo: il simbolo compare al passaggio del mouse e permette
* di copiare il link diretto alla sezione. Resta raggiungibile da tastiera.
*/
.cm-anchor {
margin-left: .35em;
font-family: var(--cm-font-ui);
font-weight: 400;
color: var(--cm-border);
text-decoration: none;
opacity: 0;
transition: opacity .15s ease;
}
h2:hover > .cm-anchor,
h3:hover > .cm-anchor,
.cm-anchor:focus-visible {
opacity: 1;
color: var(--cm-green);
}
.cm-content table {
width: 100%;
margin: 0 0 1.4em;
border-collapse: collapse;
font-size: .95rem;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
overflow: hidden;
}
.cm-content thead th {
padding: .8rem .9rem;
background: var(--cm-navy);
color: #fff;
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
}
.cm-content tbody td,
.cm-content tbody th {
padding: .72rem .9rem;
border-top: 1px solid var(--cm-border);
text-align: left;
vertical-align: top;
}
.cm-content tbody tr:nth-child(even) { background: var(--cm-surface-alt); }
.cm-content tbody tr:hover { background: #eef4f9; }
/* Su schermi stretti la tabella scorre in orizzontale senza rompere il layout. */
.cm-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cm-content blockquote {
margin: 1.4em 0;
padding: .9rem 1.2rem;
background: var(--cm-surface-alt);
border-left: 4px solid var(--cm-green);
border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
color: var(--cm-text-muted);
}
/*
* Domande frequenti.
* Il markup e' quello descritto in PROMPT_CONTENUTI.md e alimenta anche
* i dati strutturati FAQPage generati in inc/seo.php.
*/
.cm-content .cm-faq {
margin-bottom: 1rem;
padding: 1.1rem 1.3rem;
background: var(--cm-surface-alt);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
}
.cm-content .cm-faq h3 {
margin-top: 0;
margin-bottom: .5rem;
font-size: 1.05rem;
color: var(--cm-navy);
}
.cm-content .cm-faq > *:last-child {
margin-bottom: 0;
}
/* -------------------------------------------------------------------------
10-bis. Linea del tempo
-------------------------------------------------------------------------
Componente per i calendari: una stagione europea, le fasi di un torneo,
la sequenza dei turni preliminari.
E' una lista ordinata e non una serie di div: l'ordine e' informazione, e
un lettore di schermo deve poter annunciare "elemento 3 di 7". La grafica
e' tutta in pseudo-elementi, quindi il redattore scrive solo:
- Luglio Primo turno preliminare
Nessuna classe da ricordare oltre a quella sul contenitore.
------------------------------------------------------------------------- */
.cm-timeline {
--cm-timeline-accent: var(--cm-green);
margin: 1.8rem 0;
padding: 0 0 0 1.9rem;
list-style: none;
position: relative;
}
/* L'asse verticale. */
.cm-timeline::before {
content: "";
position: absolute;
inset-block: .6rem;
inset-inline-start: 6px;
inline-size: 2px;
background: linear-gradient(to bottom var(--in-oklab),
var(--cm-timeline-accent),
color-mix(in oklab, var(--cm-timeline-accent) 25%, transparent));
}
.cm-timeline li {
position: relative;
margin: 0 0 1.1rem;
padding: .85rem 1.1rem;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius-sm);
box-shadow: var(--cm-shadow-sm);
line-height: 1.55;
text-wrap: pretty;
}
.cm-timeline li:last-child {
margin-bottom: 0;
}
/* Il pallino sull'asse, allineato alla prima riga del testo. */
.cm-timeline li::before {
content: "";
position: absolute;
inset-block-start: 1.15rem;
inset-inline-start: -1.9rem;
inline-size: 14px;
block-size: 14px;
border: 3px solid var(--cm-timeline-accent);
border-radius: 50%;
background: var(--cm-surface);
}
/*
Il primo strong di ogni voce e' il periodo: diventa un'etichetta a se',
senza che il redattore debba aggiungere una classe.
*/
.cm-timeline li > strong:first-child {
display: block;
margin-bottom: .2rem;
font-size: .78rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: color-mix(in oklab, var(--cm-timeline-accent) 45%, var(--cm-navy));
}
@media (forced-colors: active) {
.cm-timeline li::before {
border-color: CanvasText;
}
.cm-timeline::before {
background: CanvasText;
}
}
/* -------------------------------------------------------------------------
10-ter. Pagina contatti e modulo
-------------------------------------------------------------------------
Il modulo e' l'unico punto del sito in cui l'utente scrive invece di
leggere. Regole non negoziabili applicate qui:
- font-size 1rem sui campi: sotto i 16px iOS ingrandisce la pagina da solo
al primo tocco, e l'utente si ritrova con il modulo fuori schermo;
- altezza minima 48px, 52px su puntatore grossolano;
- etichette sopra i campi, sempre visibili;
- :user-invalid invece di :invalid, cosi' il campo diventa rosso solo dopo
che l'utente lo ha lasciato, non appena la pagina si apre.
------------------------------------------------------------------------- */
.cm-contatti-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
align-items: start;
margin-bottom: 2.6rem;
}
/* La colonna del modulo occupa piu' spazio quando ce n'e' abbastanza. */
@supports (grid-template-columns: subgrid) {
@media (min-width: 62rem) {
.cm-contatti-layout {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
}
}
.cm-contatti {
position: relative;
overflow: hidden;
padding: 2rem;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
box-shadow: var(--cm-shadow-md);
}
/* Barra di testata sfumata: segnala che qui si agisce, non si legge. */
.cm-contatti::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 5px;
background: linear-gradient(to right var(--in-oklab),
var(--cm-green), var(--cm-sky), var(--cm-accent));
}
.cm-contatti__intro {
margin-bottom: 1.8rem;
}
.cm-contatti__titolo {
margin: 0 0 .5rem;
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
font-weight: 800;
line-height: 1.15;
text-wrap: balance;
color: var(--cm-navy);
}
.cm-contatti__testo {
margin: 0;
max-inline-size: 58ch;
line-height: 1.65;
text-wrap: pretty;
color: var(--cm-text-muted);
}
.cm-contatti__avviso {
margin: 0 0 1.6rem;
padding: .95rem 1.1rem;
border-radius: var(--cm-radius-sm);
border-inline-start: 4px solid;
font-weight: 600;
line-height: 1.5;
}
.cm-contatti__avviso:focus-visible {
outline: 3px solid var(--cm-navy);
outline-offset: 3px;
}
.cm-contatti__avviso--ok {
background: color-mix(in oklab, var(--cm-green) 10%, var(--cm-surface));
border-color: var(--cm-green);
color: var(--cm-green-dark);
}
.cm-contatti__avviso--errore {
background: color-mix(in oklab, var(--cm-danger) 9%, var(--cm-surface));
border-color: var(--cm-danger);
color: #9c2f28;
}
/* --- Campi -------------------------------------------------------------- */
.cm-form__griglia {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0 1.2rem;
}
.cm-form__campo,
.cm-form__gruppo {
margin-block-end: 1.5rem;
border: 0;
padding: 0;
min-inline-size: 0;
}
.cm-form__etichetta {
display: block;
margin-block-end: .4rem;
padding: 0;
font-size: .95rem;
font-weight: 700;
color: var(--cm-navy);
}
.cm-form__obbligatorio {
color: var(--cm-danger);
}
.cm-form__input {
inline-size: 100%;
min-block-size: 48px;
padding: .75rem .9rem;
font-family: inherit;
/* Mai sotto 1rem: sotto i 16px iOS ingrandisce la pagina da solo. */
font-size: 1rem;
line-height: 1.5;
color: var(--cm-text);
background: var(--cm-surface);
border: 1px solid color-mix(in oklab, var(--cm-navy) 22%, var(--cm-border));
border-radius: var(--cm-radius-sm);
transition: border-color .18s ease, box-shadow .18s ease;
}
.cm-form__input--lungo {
min-block-size: 9rem;
/* Solo verticale: allargando si romperebbe la griglia. */
resize: vertical;
}
.cm-form__input:hover:not(:focus) {
border-color: color-mix(in oklab, var(--cm-navy) 38%, var(--cm-border));
}
.cm-form__input:focus-visible {
outline: 3px solid var(--cm-green);
outline-offset: 1px;
border-color: var(--cm-green);
}
/*
:user-invalid e non :invalid. Con :invalid tutti i campi obbligatori
sarebbero rossi al caricamento, prima ancora che l'utente scriva: e' il
modo piu' rapido per far chiudere la pagina.
*/
.cm-form__input:user-invalid,
.cm-form__input[aria-invalid="true"] {
border-color: var(--cm-danger);
background: color-mix(in oklab, var(--cm-danger) 4%, var(--cm-surface));
}
.cm-form__input:user-valid {
border-color: color-mix(in oklab, var(--cm-green) 55%, var(--cm-border));
}
.cm-form__nota {
margin: .4rem 0 0;
font-size: .86rem;
line-height: 1.5;
color: var(--cm-text-muted);
}
/* L'errore porta un simbolo oltre al colore: il colore da solo non basta. */
.cm-form__errore {
display: flex;
align-items: flex-start;
gap: .4rem;
margin: .45rem 0 0;
font-size: .88rem;
font-weight: 600;
line-height: 1.45;
color: #9c2f28;
}
.cm-form__errore::before {
content: "!";
flex: none;
display: grid;
place-items: center;
inline-size: 1.15rem;
block-size: 1.15rem;
border-radius: 50%;
background: var(--cm-danger);
color: #fff;
font-size: .8rem;
font-weight: 800;
}
/* --- Scelte ------------------------------------------------------------- */
.cm-form__scelte {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.cm-form__scelta {
display: inline-flex;
align-items: center;
gap: .5rem;
min-block-size: 48px;
padding: .55rem .95rem;
background: var(--cm-surface-alt);
border: 1px solid var(--cm-border);
border-radius: 999px;
font-size: .94rem;
cursor: pointer;
transition: background-color .18s ease, border-color .18s ease;
}
.cm-form__scelta input {
/* accent-color colora il pallino nativo senza ricostruirlo. */
accent-color: var(--cm-green);
inline-size: 1.05rem;
block-size: 1.05rem;
margin: 0;
}
/*
:has() evita di dover aggiungere una classe da JavaScript quando la scelta
cambia: la regola guarda direttamente lo stato del figlio.
*/
.cm-form__scelta:has(input:checked) {
background: color-mix(in oklab, var(--cm-green) 12%, var(--cm-surface));
border-color: var(--cm-green);
font-weight: 600;
}
.cm-form__scelta:has(input:focus-visible) {
outline: 3px solid var(--cm-green);
outline-offset: 2px;
}
/* --- Consenso ----------------------------------------------------------- */
.cm-form__consenso {
display: flex;
align-items: flex-start;
gap: .7rem;
padding: .9rem 1rem;
background: var(--cm-surface-alt);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius-sm);
font-size: .93rem;
line-height: 1.55;
cursor: pointer;
}
.cm-form__consenso input {
flex: none;
accent-color: var(--cm-green);
inline-size: 1.2rem;
block-size: 1.2rem;
margin-block-start: .1rem;
}
.cm-form__consenso:has(input:focus-visible) {
outline: 3px solid var(--cm-green);
outline-offset: 2px;
}
/* --- Azioni ------------------------------------------------------------- */
.cm-form__azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .8rem 1.2rem;
margin-block-start: 1.8rem;
padding-block-start: 1.4rem;
border-block-start: 1px solid var(--cm-border);
}
.cm-form__invia {
min-block-size: 52px;
padding: .85rem 2rem;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg var(--in-oklab),
var(--cm-green), color-mix(in oklab, var(--cm-green) 60%, var(--cm-navy)));
border: 0;
border-radius: 999px;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
box-shadow: var(--cm-shadow-sm);
}
.cm-form__invia:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--cm-shadow-md);
}
.cm-form__invia:focus-visible {
outline: 3px solid var(--cm-navy);
outline-offset: 3px;
}
/* Disattivato solo dopo un invio valido, per evitare il doppio invio. */
.cm-form__invia:disabled {
filter: grayscale(.5);
opacity: .7;
cursor: progress;
transform: none;
}
.cm-form__azioni .cm-form__nota {
margin: 0;
}
/*
Campo esca. Non display:none, che alcuni programmi automatici riconoscono
ed evitano: viene spostato fuori dallo schermo.
*/
.cm-form__esca {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* --- Colonna laterale --------------------------------------------------- */
.cm-info-card {
--cm-info-accent: var(--cm-sky);
margin-block-end: 1.1rem;
padding: 1.3rem 1.4rem;
background: var(--cm-surface);
border: 1px solid color-mix(in oklab, var(--cm-info-accent) 24%, var(--cm-border));
border-inline-start: 4px solid var(--cm-info-accent);
border-radius: var(--cm-radius-sm);
box-shadow: var(--cm-shadow-sm);
}
.cm-info-card--tempi { --cm-info-accent: var(--cm-green); }
.cm-info-card--correzioni { --cm-info-accent: var(--cm-accent); }
.cm-info-card--no { --cm-info-accent: var(--cm-danger); }
.cm-info-card__titolo {
margin: 0 0 .7rem;
font-size: .82rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: color-mix(in oklab, var(--cm-info-accent) 45%, var(--cm-navy));
}
.cm-info-card p {
margin: 0 0 .6rem;
font-size: .94rem;
line-height: 1.6;
text-wrap: pretty;
color: var(--cm-text-muted);
}
.cm-info-card p:last-child {
margin-bottom: 0;
}
.cm-info-card__elenco {
margin: 0 0 .6rem;
padding-inline-start: 1.1rem;
font-size: .94rem;
line-height: 1.6;
color: var(--cm-text-muted);
}
.cm-info-card__elenco li {
margin-block-end: .35rem;
}
.cm-info-card__nota {
font-style: italic;
}
/* -------------------------------------------------------------------------
10-quater. Pagina chi siamo
------------------------------------------------------------------------- */
.cm-blocco__titolo {
margin: 0 0 1.4rem;
font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
font-weight: 800;
line-height: 1.2;
text-wrap: balance;
color: var(--cm-navy);
}
.cm-principi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.1rem;
}
.cm-principio {
position: relative;
overflow: hidden;
padding: 1.5rem 1.5rem 1.4rem;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
box-shadow: var(--cm-shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.cm-principio::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 4px;
background: var(--cm-green);
}
.cm-principi > :nth-child(2)::before { background: var(--cm-sky); }
.cm-principi > :nth-child(3)::before { background: var(--cm-accent); }
.cm-principi > :nth-child(4)::before { background: var(--cm-plum); }
.cm-principio:hover {
transform: translateY(-3px);
box-shadow: var(--cm-shadow-md);
}
.cm-principio__titolo {
margin: 0 0 .6rem;
font-size: 1.12rem;
font-weight: 700;
line-height: 1.3;
text-wrap: balance;
color: var(--cm-navy);
}
.cm-principio__testo {
margin: 0;
font-size: .96rem;
line-height: 1.65;
text-wrap: pretty;
color: var(--cm-text-muted);
}
/* --- Metodo ------------------------------------------------------------- */
.cm-metodo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.1rem;
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.cm-metodo__fase {
padding: 1.5rem;
background: linear-gradient(160deg var(--in-oklab),
color-mix(in oklab, var(--cm-navy) 5%, var(--cm-surface)),
var(--cm-surface) 65%);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
}
.cm-metodo__numero {
display: block;
margin-block-end: .6rem;
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
color: color-mix(in oklab, var(--cm-green) 60%, var(--cm-navy));
}
.cm-metodo__titolo {
margin: 0 0 .5rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
text-wrap: balance;
color: var(--cm-navy);
}
.cm-metodo__testo {
margin: 0;
font-size: .94rem;
line-height: 1.65;
text-wrap: pretty;
color: var(--cm-text-muted);
}
/* --- Firma -------------------------------------------------------------- */
.cm-firma-blocco {
position: relative;
overflow: hidden;
padding: 2.2rem;
background: linear-gradient(140deg var(--in-oklab), var(--cm-navy), var(--cm-navy-soft));
border-radius: var(--cm-radius);
color: #fff;
text-align: center;
}
/* Cerchio di centrocampo tagliato: il segno grafico del sito. */
.cm-firma-blocco::after {
content: "";
position: absolute;
inset-block-start: -90px;
inset-inline-end: -70px;
inline-size: 240px;
block-size: 240px;
border: 2px solid rgba(255, 255, 255, .12);
border-radius: 50%;
pointer-events: none;
}
.cm-firma-blocco__ruolo {
position: relative;
margin: 0 0 .3rem;
font-size: .8rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: color-mix(in oklab, var(--cm-green) 55%, #ffffff);
}
.cm-firma-blocco__nome {
position: relative;
margin: 0 0 1rem;
font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
font-weight: 800;
line-height: 1.15;
}
.cm-firma-blocco__testo {
position: relative;
margin: 0 auto 1.6rem;
max-inline-size: 62ch;
line-height: 1.7;
text-wrap: pretty;
color: rgba(255, 255, 255, .85);
}
.cm-firma-blocco__azione {
position: relative;
margin: 0;
}
.cm-bottone {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: 48px;
padding: .8rem 1.8rem;
background: var(--cm-green);
border-radius: 999px;
font-weight: 700;
color: #fff;
text-decoration: none;
transition: transform .18s ease, background-color .18s ease;
}
.cm-bottone:hover {
transform: translateY(-2px);
background: var(--cm-green-dark);
color: #fff;
}
.cm-bottone:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
@media (pointer: coarse) {
.cm-form__input,
.cm-form__scelta {
min-block-size: 52px;
}
}
/* Chi ha chiesto meno animazioni non deve vedere spostamenti al passaggio. */
@media (prefers-reduced-motion: reduce) {
.cm-principio:hover,
.cm-form__invia:hover:not(:disabled),
.cm-bottone:hover {
transform: none;
}
}
/* Stato vuoto mostrato quando una sezione non ha ancora contenuto. */
.cm-empty {
padding: 2rem 1.4rem;
background: var(--cm-surface-alt);
border: 1px dashed var(--cm-border);
border-radius: var(--cm-radius);
color: var(--cm-text-muted);
text-align: center;
}
/* -------------------------------------------------------------------------
11. Griglia di card
------------------------------------------------------------------------- */
.cm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.cm-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: var(--cm-surface);
border: 1px solid var(--cm-border);
border-radius: var(--cm-radius);
box-shadow: var(--cm-shadow-sm);
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cm-card:hover {
transform: translateY(-4px);
border-color: rgba(8, 122, 58, .45);
box-shadow: var(--cm-shadow-md);
}
/* Il focus da tastiera deve evidenziare tutta la card, non solo il link. */
.cm-card:focus-within {
border-color: var(--cm-green);
box-shadow: 0 0 0 3px rgba(8, 122, 58, .25), var(--cm-shadow-md);
}
/* --- Immagine ------------------------------------------------------------ */
.cm-card__media {
position: relative;
aspect-ratio: 40 / 21;
overflow: hidden;
background: var(--cm-navy);
}
.cm-card__media::after {
/* Velo scuro in basso: stacca il bordo della foto dal corpo bianco. */
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to top, rgba(18, 20, 15, .35), transparent);
pointer-events: none;
}
.cm-card__img,
.cm-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.cm-card:hover .cm-card__img,
.cm-card:hover .cm-placeholder {
transform: scale(1.05);
}
/* --- Corpo --------------------------------------------------------------- */
.cm-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 1.25rem 1.35rem 1.15rem;
}
.cm-card__eyebrow {
display: block;
margin-bottom: .35rem;
font-size: .74rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--cm-green-dark);
}
.cm-card__title {
margin: 0 0 .5rem;
font-size: 1.16rem;
line-height: 1.3;
}
.cm-card__title a {
color: var(--cm-navy);
}
.cm-card__title a:hover {
text-decoration: none;
}
/*
* Il link viene steso su tutta la card: un solo reale, quindi
* un solo elemento nella navigazione da tastiera e un solo link
* per i crawler. Il testo dell'ancora resta il titolo della pagina,
* che e' esattamente l'anchor text utile alla SEO interna.
*/
.cm-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.cm-card__text {
margin: 0 0 1.1rem;
font-size: .93rem;
line-height: 1.6;
color: var(--cm-text-muted);
}
.cm-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
padding-top: .9rem;
border-top: 1px solid var(--cm-border);
}
.cm-card__meta {
font-size: .82rem;
font-weight: 600;
color: var(--cm-text-muted);
}
.cm-card__cta {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-left: auto;
font-size: .89rem;
font-weight: 700;
color: var(--cm-green-dark);
}
.cm-card__cta svg {
transition: transform .22s ease;
}
.cm-card:hover .cm-card__cta svg {
transform: translateX(3px);
}
/* -------------------------------------------------------------------------
12. Pulsanti
------------------------------------------------------------------------- */
.cm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
padding: .68rem 1.35rem;
border: 2px solid transparent;
border-radius: 999px;
font-size: .95rem;
font-weight: 700;
cursor: pointer;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.cm-btn:hover { text-decoration: none; transform: translateY(-1px); }
.cm-btn--primary {
background: var(--cm-green);
border-color: var(--cm-green);
color: #fff;
}
.cm-btn--primary:hover {
background: var(--cm-green-dark);
border-color: var(--cm-green-dark);
color: #fff;
}
.cm-btn--ghost {
background: transparent;
border-color: rgba(255, 255, 255, .55);
color: #fff;
}
.cm-btn--ghost:hover {
background: rgba(255, 255, 255, .14);
color: #fff;
}
.cm-btn--outline {
background: transparent;
border-color: var(--cm-border);
color: var(--cm-navy);
}
.cm-btn--outline:hover {
border-color: var(--cm-green);
color: var(--cm-green-dark);
}
/* -------------------------------------------------------------------------
13. Footer
------------------------------------------------------------------------- */
.cm-footer {
margin-top: 4rem;
padding-block: 2.6rem 1.6rem;
background: var(--cm-navy);
color: rgba(255, 255, 255, .75);
font-size: .92rem;
}
.cm-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1.8rem;
padding-bottom: 1.8rem;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cm-footer h2 {
margin-bottom: .7rem;
color: #fff;
font-size: .82rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.cm-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.cm-footer li { margin-bottom: .45rem; }
.cm-footer a { color: rgba(255, 255, 255, .75); }
.cm-footer a:hover { color: #fff; }
.cm-footer__bottom {
padding-top: 1.4rem;
text-align: center;
font-size: .85rem;
color: rgba(255, 255, 255, .55);
}
.cm-footer__bottom p { margin: 0; }
/* -------------------------------------------------------------------------
14. Adattamenti mobile
------------------------------------------------------------------------- */
@media (max-width: 991px) {
/*
* Disposizione stretta: logo, comandi e pulsante menu sulla prima riga,
* navigazione a tutta larghezza sulla seconda. Le aree sono dichiarate
* nella regola base della griglia: qui restano solo gli aggiustamenti.
*/
.cm-header__inner {
padding-block: .65rem;
}
.cm-nav-toggle {
display: inline-flex;
}
.cm-nav {
display: none;
width: 100%;
max-height: min(70vh, 520px);
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: 1rem;
}
.cm-nav.is-open { display: block; }
.cm-nav > ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.cm-nav a {
padding: .7rem .3rem;
border-radius: 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
/* Su mobile il sottomenu resta nel flusso: niente hover disponibile. */
.cm-nav .sub-menu,
.cm-nav .children {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
margin: 0 0 .3rem .9rem;
padding: 0;
background: none;
border: 0;
border-left: 2px solid rgba(255, 255, 255, .18);
box-shadow: none;
border-radius: 0;
}
.cm-nav .sub-menu a,
.cm-nav .children a {
padding-left: .8rem;
color: rgba(255, 255, 255, .8);
font-size: .9rem;
}
.cm-nav .sub-menu a:hover,
.cm-nav .children a:hover {
background: rgba(255, 255, 255, .1);
color: #fff;
}
.cm-stats { margin-top: 1.4rem; }
}
@media (max-width: 575px) {
.cm-container { padding-inline: 16px; }
.cm-hero { padding: 2rem 0 1.8rem; }
.cm-tabs {
/* Le tab scorrono in orizzontale e si agganciano una alla volta:
su schermo stretto sette voci non stanno su una riga. */
scroll-snap-type: x proximity;
margin-inline: -16px;
padding-inline: 16px;
}
.cm-tabs button {
padding: .65rem .8rem;
font-size: .9rem;
scroll-snap-align: start;
}
.cm-grid {
/* Una sola colonna: minmax(280px) su schermi da 320px provocherebbe
traboccamento orizzontale. */
grid-template-columns: 1fr;
gap: 1.1rem;
}
.cm-card__body { padding: 1.1rem 1.1rem 1rem; }
.cm-stats {
grid-template-columns: repeat(2, 1fr);
gap: .7rem;
}
.cm-stat { padding: .95rem .7rem; }
.cm-stat__value { font-size: 1.5rem; }
.cm-stat__label { font-size: .72rem; }
.cm-footer__grid { gap: 1.4rem; }
}
/* -------------------------------------------------------------------------
14-bis. Ricerca interna
-------------------------------------------------------------------------
Il pannello e' un