/* =========================================================================
Pagine.
Due lavori distinti in questo file:
1. ridisegnare il markup che esce dal Content Composer (finche' il contenuto
non e' convertito, e' quello che il visitatore vede davvero);
2. i blocchi che il tema aggiunge sotto il contenuto.
========================================================================= */
/* =========================================================================
1. FASCIA DEL TITOLO
Apre ogni pagina col colore del corso. E' il primo pezzo di «piu' colore».
========================================================================= */
/* Navy di partenza. Il colore del corso entra solo dove un corso c'e': prima
la fascia era `var(--corso)`, che fuori dalle pagine corso vale rosso — e
ricerca, 404 e archivi si ritrovavano mezzo schermo rosso. */
.fascia-titolo {
background: var(--navy);
color: #fff;
padding-block: clamp(2.2rem, 5vw, 3.6rem);
}
.fascia-titolo .titolo-pagina { color: #fff; }
.ha-corso .fascia-titolo {
background: var(--corso);
color: var(--su-corso);
}
.ha-corso .fascia-titolo .titolo-pagina { color: var(--su-corso); }
.titolo-pagina {
margin: 0;
color: inherit;
font-size: var(--t-h1);
letter-spacing: -0.035em;
max-width: 20ch;
}
.fascia-titolo-nota {
margin: var(--s4) 0 0;
max-width: 46ch;
font-size: var(--t-guida);
font-weight: var(--peso-medio);
opacity: .86;
}
/* =========================================================================
2. CONTENUTO DELLE PAGINE
Il contenuto e' stato convertito da shortcode a HTML: queste sono le classi
che il convertitore produce. Sono poche e dicono cosa sono, non come si
vedono — «colonna-meta», non «col-md-6».
========================================================================= */
.corpo-pagina > *:first-child { margin-top: 0; }
.corpo-pagina > *:last-child { margin-bottom: 0; }
.corpo-pagina h2,
.corpo-pagina .titolo-sezione { margin-top: var(--s12); }
.corpo-pagina h3 { margin-top: var(--s10); }
.corpo-pagina h2:first-child,
.corpo-pagina h3:first-child,
.corpo-pagina .titolo-sezione:first-child { margin-top: 0; }
/* Il titolo di sezione porta il segno del corso: lega la sezione al colore
della pagina senza bisogno di un altro elemento. */
.titolo-sezione {
position: relative;
padding-top: var(--s5);
/* Senza un limite i titoli correvano per tutti i 1160px mentre i paragrafi
si fermano a 728: il bordo destro della colonna sembrava sfilacciato. */
max-width: 26ch;
}
.titolo-sezione::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.5rem;
height: 5px;
border-radius: 3px;
background: var(--corso);
}
.a-centro { text-align: center; }
.a-destra { text-align: right; }
.a-sinistra { text-align: left; }
/* Frase che apre un discorso: era in grassetto dentro un paragrafo, qui ha
il respiro che merita. */
/* La frase d'apertura e' piu' GRANDE del testo, quindi 44ch la rendevano piu'
LARGA in pixel del paragrafo sotto: la riga sporgeva a destra e la colonna
sembrava disallineata. A 30ch resta dentro la misura del testo, e la
differenza di corpo basta a distinguerla. */
/* La specificita' conta: `.rilievo` da sola (0,1,0) perdeva contro
`.corpo-pagina p` (0,1,1), che impone 68ch — e 68ch di un carattere piu'
grande fanno piu' pixel del testo normale. Risultato: la frase d'apertura
sporgeva di 290px oltre il paragrafo sotto. */
.corpo-pagina .rilievo,
.rilievo {
font-size: var(--t-guida);
font-weight: var(--peso-forte);
line-height: 1.35;
color: var(--navy);
max-width: 34ch;
margin-block: var(--s8) var(--s4);
}
.rilievo:first-child { margin-top: 0; }
/* --- colonne --------------------------------------------------------------
Il vecchio impianto aveva cinque scatole annidate per fare una colonna.
Qui e' una griglia: le colonne si impilano da sole sul telefono. */
.colonne {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: var(--s8) var(--s10);
margin-block: var(--s8);
align-items: start;
}
.colonna > *:first-child { margin-top: 0; }
.colonna > *:last-child { margin-bottom: 0; }
@media (min-width: 52rem) {
.colonne:has(> .colonna-terzo) { grid-template-columns: repeat(3, 1fr); }
.colonne:has(> .colonna-due-terzi) { grid-template-columns: 2fr 1fr; }
.colonne:has(> .colonna-meta) { grid-template-columns: repeat(2, 1fr); }
}
/* --- divisore --------------------------------------------------------------
Era una riga grigia che tagliava la pagina in due. Diventa un segno corto
nel colore del corso: separa senza spezzare. */
.divisore {
width: 3.5rem;
height: 5px;
margin: var(--s12) 0;
border: 0;
border-radius: 3px;
background: var(--corso);
}
.divisore-dotted {
height: 0;
width: 100%;
max-width: var(--misura);
border-top: 2px dotted var(--filo-scuro);
background: none;
border-radius: 0;
}
/* --- immagini --------------------------------------------------------------- */
.immagine { margin-block: var(--s10); }
/* Le immagini dentro il testo non devono occupare uno schermo intero: la
brochure dei livelli e' 1035x921 e da sola faceva 950 px di altezza,
spezzando la lettura in due.
`width: auto` da solo era sbagliato: annullava la larghezza dichiarata
nell'attributo e il logo Cambridge, dichiarato a 567px, usciva a 1024. Il
limite va messo, non la larghezza. */
.immagine img {
border-radius: var(--raggio-g);
max-width: 100%;
max-height: 30rem;
height: auto;
object-fit: contain;
}
.immagine.a-centro { margin-inline: auto; }
.immagine.a-centro img { margin-inline: auto; }
/* --- blocco in evidenza ------------------------------------------------------ */
.blocco-evidenza {
margin-block: var(--s10);
padding: var(--s8);
background: var(--corso-tenue);
border-radius: var(--raggio-g);
border-left: 5px solid var(--corso);
}
.blocco-evidenza > *:first-child { margin-top: 0; }
.blocco-evidenza > *:last-child { margin-bottom: 0; }
/* --- elenchi ------------------------------------------------------------------ */
/* Solo gli elenchi SENZA classe: quelli con una classe sono griglie o elenchi
costruiti dal tema, e il rientro del browser piu' il margine fra le voci li
sballa. Nella griglia dei punti di forza in copertina la seconda e la terza
scheda finivano 8 px piu' in basso della prima. */
.corpo-pagina :is( ul, ol ):not( [class] ) { padding-left: 1.15em; }
.corpo-pagina :is( ul, ol ):not( [class] ) > li + li { margin-top: var(--s2); }
/* «Il prezzo NON include»: stesso elenco, segno diverso. Un elenco di cose
escluse col segno di spunta verde direbbe il contrario di quel che dice. */
.elenco-escluso {
list-style: none;
margin: var(--s6) 0 0;
padding: 0;
display: grid;
gap: var(--s2);
}
.elenco-escluso li {
display: flex;
gap: var(--s3);
align-items: flex-start;
max-width: var(--misura);
color: var(--grigio);
}
.elenco-escluso li::before {
content: "—";
flex: 0 0 auto;
font-weight: var(--peso-nero);
color: var(--grigio-chiaro);
}
/* =========================================================================
3. LISTINI
La cliente ha scritto: «Si fa fatica a leggere la pagine dei prezzi…
passa la voglia». Qui si risponde a quello e basta:
- il corpo parte da 17px e i prezzi da 19, non da 13;
- il prezzo e' l'unica cosa in nero della riga, cosi' l'occhio lo trova;
- le cifre sono tabulari, cosi' le colonne si incolonnano davvero;
- su telefono la tabella diventa un elenco di schede, e ogni numero si
porta dietro l'etichetta della sua colonna.
========================================================================= */
.tabella {
width: 100%;
margin: var(--s8) 0;
border-collapse: separate;
border-spacing: 0;
background: var(--carta);
border: 1px solid var(--filo);
border-radius: var(--raggio-g);
overflow: hidden;
font-size: var(--t-base);
box-shadow: var(--ombra-1);
}
.tabella th,
.tabella td {
padding: 0.95rem 1.1rem;
border-top: 1px solid var(--filo);
vertical-align: baseline;
}
.tabella thead th {
border-top: 0;
background: var(--navy);
color: #fff;
font-size: 0.75rem;
font-weight: var(--peso-nero);
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.tabella tbody tr:nth-child(even) td { background: var(--carta-calda); }
.listino td.a-destra {
font-variant-numeric: tabular-nums;
font-size: var(--t-grande);
font-weight: var(--peso-nero);
letter-spacing: -0.02em;
color: var(--navy);
white-space: nowrap;
}
.bsc-rate,
.bsc-sub {
display: block;
margin-top: 0.15rem;
font-size: var(--t-mini);
font-weight: var(--peso-medio);
letter-spacing: 0;
color: var(--grigio);
font-variant-numeric: tabular-nums;
}
@media (max-width: 44rem) {
.tabella,
.tabella thead,
.tabella tbody,
.tabella tr,
.tabella td { display: block; }
.tabella {
border: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.tabella thead { display: none; }
.tabella tbody tr {
margin-bottom: var(--s4);
background: var(--carta);
border: 1px solid var(--filo);
border-left: 5px solid var(--corso);
border-radius: var(--raggio-g);
box-shadow: var(--ombra-1);
overflow: hidden;
}
.tabella tbody tr:nth-child(even) td { background: transparent; }
.tabella td {
border-top: 0;
padding: 0.3rem 1rem;
text-align: left;
}
.tabella td:first-child {
padding-top: 0.9rem;
font-size: var(--t-grande);
font-weight: var(--peso-nero);
color: var(--navy);
letter-spacing: -0.02em;
}
.tabella td:last-child { padding-bottom: 0.9rem; }
/* L'etichetta viaggia con la cella: senza, nella scheda i numeri
sarebbero cifre senza nome. */
.tabella td[data-etichetta]::before {
content: attr(data-etichetta);
display: block;
font-size: 0.6875rem;
font-weight: var(--peso-nero);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--grigio);
}
.tabella td:first-child[data-etichetta]::before { display: none; }
}
/* =========================================================================
4. ELENCHI E SCHEDE GENERICHE
========================================================================= */
.elenco-articoli {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
gap: var(--s8);
}
.scheda-articolo { display: grid; gap: var(--s3); }
.scheda-immagine img { border-radius: var(--raggio-g); }
.scheda-titolo { font-size: var(--t-h4); margin: 0; }
.scheda-titolo a { color: var(--navy); text-decoration: none; }
.scheda-titolo a:hover { color: var(--rosso-scuro); }
.scheda-sunto { margin: 0; color: var(--grigio); font-size: var(--t-picc); }
.elenco-risultati { list-style: none; padding: 0; display: grid; gap: var(--s6); }
.elenco-risultati a { font-size: var(--t-h4); font-weight: var(--peso-forte); text-decoration: none; }
.elenco-risultati p { margin: var(--s2) 0 0; color: var(--grigio); font-size: var(--t-picc); }
.elenco-scorciatoie {
list-style: none;
padding: 0;
margin: var(--s8) 0 0;
display: grid;
gap: var(--s3);
}
.elenco-scorciatoie a {
display: block;
padding: var(--s4) var(--s5);
border: 1px solid var(--filo);
border-left: 5px solid var(--rosso);
border-radius: var(--raggio-g);
background: var(--carta);
font-weight: var(--peso-forte);
color: var(--navy);
text-decoration: none;
}
.elenco-scorciatoie a:hover { background: var(--carta-calda); }
/* --- ricerca ---------------------------------------------------------------- */
.ricerca-etichetta {
display: block;
margin-bottom: var(--s2);
font-size: var(--occhiello);
font-weight: var(--peso-nero);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--grigio);
}
.ricerca-riga { display: flex; gap: var(--s2); }
.ricerca-riga .ricerca-campo { flex: 1 1 auto; }
.articolo-data { margin: var(--s3) 0 0; font-size: var(--t-picc); opacity: .8; }
/* =========================================================================
ICONE
Il vecchio tema aveva un font di icone da 60 KB per quattro simboli nella
pagina Contatti. Qui sono quattro disegni in linea nel foglio di stile:
niente da scaricare, prendono il colore del corso e restano nitidi ovunque.
========================================================================= */
.bsc-icona {
flex: 0 0 auto;
display: inline-block;
width: 1.35rem;
height: 1.35rem;
background: var(--corso);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.bsc-icona-luogo {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.bsc-icona-telefono {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.bsc-icona-posta {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.bsc-icona-orario {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* L'elenco dei recapiti: icona a sinistra, testo che non si infila sotto. */
.bsc-list {
list-style: none;
margin: var(--s6) 0;
padding: 0;
display: grid;
gap: var(--s5);
}
.bsc-list > li { display: flex; gap: var(--s4); align-items: flex-start; }
/* =========================================================================
BLOCCHI RICORRENTI NEL CONTENUTO
========================================================================= */
/* Quattro caratteristiche in fila. Erano quattro
consecutivi con una riga
di testo ciascuno: come titoli dicevano che iniziava una sezione nuova, e
invece erano un elenco. */
.caratteristiche {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: var(--s5);
margin-block: var(--s10);
}
.caratteristica {
padding: var(--s6);
background: var(--carta-calda);
border-radius: var(--raggio-g);
border-top: 4px solid var(--corso);
}
.caratteristica h3 {
margin: 0 0 var(--s2);
font-size: var(--t-h4);
color: var(--navy);
}
.caratteristica p { margin: 0; font-size: var(--t-picc); color: var(--inchiostro-2); }
/* Un bottone che sta da solo su una riga ha bisogno d'aria attorno,
altrimenti sembra incastrato nel paragrafo precedente. */
.azione-sola { margin-block: var(--s10); }
/* Le immagini centrate che il vecchio editor lasciava dentro un
. */
.corpo-pagina img.aligncenter {
display: block;
margin-inline: auto;
border-radius: var(--raggio-g);
}
.corpo-pagina p:has(> img) { text-align: center; }
/* --- prezzi fuori tabella -----------------------------------------------------
Dove il prezzo non sta in un listino ma in mezzo al testo, va comunque
trovato a colpo d'occhio: e' l'informazione che la gente cerca. */
.prezzo-blocco {
margin-block: var(--s10);
padding: var(--s6);
background: var(--carta);
border: 1px solid var(--filo);
border-left: 5px solid var(--corso);
border-radius: var(--raggio-g);
box-shadow: var(--ombra-1);
max-width: 34rem;
}
.prezzo-titolo {
margin: 0 0 var(--s4);
font-size: var(--occhiello);
font-weight: var(--peso-nero);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--grigio);
}
.prezzo-riga {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s5);
align-items: baseline;
justify-content: space-between;
padding-block: var(--s3);
border-top: 1px solid var(--filo);
}
.prezzo-riga:first-of-type { border-top: 0; }
.prezzo-cosa { flex: 1 1 14rem; font-size: var(--t-picc); color: var(--inchiostro-2); }
.prezzo-cifra {
font-size: var(--t-h3);
font-weight: var(--peso-nero);
letter-spacing: -0.03em;
color: var(--navy);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* --- riquadro di un ente collegato -------------------------------------------- */
.riquadro-agenzia {
margin-block: var(--s10);
padding: var(--s6);
background: var(--carta-calda);
border-radius: var(--raggio-g);
max-width: 34rem;
}
.riquadro-agenzia p { margin: 0 0 var(--s1); font-size: var(--t-picc); }
.riquadro-agenzia p:last-child { margin-bottom: 0; }
.riquadro-titolo {
font-weight: var(--peso-nero) !important;
color: var(--navy);
margin-bottom: var(--s3) !important;
font-size: var(--t-base) !important;
}
.prezzo-nota {
margin: var(--s3) 0 0;
font-size: var(--t-mini);
color: var(--grigio);
}
/* Paragrafi rimasti vuoti dal vecchio editor: erano spaziatori. La spaziatura
la decide il tema, quindi non devono occupare una riga.
ATTENZIONE: qui c'era anche `p:has(> br:only-child)`, ed era un errore
grave. `:only-child` conta i figli ELEMENTO, non i nodi di testo: quindi
`
testo altro testo
` corrispondeva, e interi paragrafi di
contenuto vero sparivano dalla pagina. I paragrafi fatti del solo si
tolgono dal contenuto, non si nascondono col CSS. */
.corpo-pagina p:empty { display: none; }
/* Su telefono anche i collegamenti brevi dentro un elenco vogliono un bersaglio
comodo: «Apri in Google Maps» era alto 20px. */
@media (pointer: coarse), (max-width: 62rem) {
.bsc-list a,
.elenco-risultati a,
.elenco-scorciatoie a,
.woocommerce-breadcrumb a,
.woocommerce-MyAccount-navigation a { display: inline-block; padding-block: 0.5rem; }
}
/* --- testi legali di Iubenda -------------------------------------------------
Le pagine Privacy, Cookie e Termini non sono contenuto nostro: le inietta
uno script di iubenda.com, con la sua tipografia (11px) e i suoi titoli.
La struttura non si puo' cambiare da qui; la leggibilita' si'. */
.iub-body-embed,
#iubenda_policy,
.iubenda_legal_document {
font-size: var(--t-base) !important;
line-height: var(--interlinea) !important;
color: var(--inchiostro) !important;
max-width: none;
}
#iubenda_policy .iub_content,
.iubenda_legal_document .iub_content { padding: 0 !important; }
#iubenda_policy h1, #iubenda_policy h2, #iubenda_policy h3,
.iubenda_legal_document h1, .iubenda_legal_document h2, .iubenda_legal_document h3 {
font-family: var(--carattere-tit) !important;
color: var(--navy) !important;
letter-spacing: -0.02em !important;
}
#iubenda_policy p, #iubenda_policy li,
.iubenda_legal_document p, .iubenda_legal_document li {
font-size: inherit !important;
line-height: inherit !important;
}
#iubenda_policy a, .iubenda_legal_document a { color: var(--rosso-scuro) !important; }
/* Dentro i documenti Iubenda i collegamenti sono fitti e bassi: su telefono
vanno distanziati come tutti gli altri. */
@media (pointer: coarse), (max-width: 62rem) {
.iub-body-embed a,
#iubenda_policy a,
.iubenda_legal_document a { display: inline-block; padding-block: 0.4rem; }
}
/* Il piede del documento Iubenda e i suoi collegamenti restavano a 11px. */
.iub_footer, .iub_footer p, .iub_footer a,
#iubenda_policy .iub_footer p { font-size: var(--t-mini) !important; line-height: 1.5 !important; }
/* Le note sotto un listino — «Frequenza: …», «Le tre rate scadono …», «Il
prezzo include …» — erano paragrafi centrati in mezzo a una pagina allineata
a sinistra. Sono didascalie della tabella che le precede: stesso margine
degli altri, corpo piu' piccolo, e attaccate alla tabella invece che
galleggianti fra due blocchi. */
.nota-tabella {
margin: var(--s5) 0 var(--s6);
font-size: var(--t-picc);
color: var(--inchiostro-2);
max-width: var(--misura);
}
/* Il margine negativo — che attacca la nota alla tabella — vale SOLO quando
la nota segue davvero una tabella o un'altra nota.
Prima era sulla classe: bastava che una frase iniziasse con «Il prezzo
include» perche' prendesse -24px, e dove seguiva un elenco invece di una
tabella si tirava su coprendo l'ultima voce. Un margine negativo va sempre
legato a cosa c'e' PRIMA, mai all'elemento da solo. */
.tabella + .nota-tabella,
.cmsmasters_wrap_table + .nota-tabella { margin-top: calc( var(--s6) * -1 ); }
.nota-tabella + .nota-tabella { margin-top: calc( var(--s3) * -1 ); }
/* =========================================================================
SEZIONE A DUE COLONNE
Il testo si ferma a 68 caratteri per riga — oltre, l'occhio perde il rigo
tornando a capo — e in un contenitore da 1160 px lasciava quattrocento pixel
di bianco a destra. Allargare la riga sarebbe stato il rimedio sbagliato:
la colonna che avanzava la prende il titolo.
Sotto i 62rem torna una colonna sola: a quella larghezza un titolo affiancato
diventerebbe una parola per riga.
========================================================================= */
.sezione-due {
display: grid;
gap: var(--s5) var(--s10);
margin-block: var(--s12);
}
.sezione-due:first-child { margin-top: 0; }
.sezione-due-titolo .titolo-sezione { margin: 0; max-width: 14ch; }
.sezione-due-testo > *:first-child { margin-top: 0; }
.sezione-due-testo > *:last-child { margin-bottom: 0; }
/* Dentro la colonna il testo occupa la sua larghezza: il limite di lettura
ce l'ha gia' la colonna stessa. */
.sezione-due-testo p,
.sezione-due-testo li { max-width: none; }
.sezione-due-testo .rilievo { max-width: none; }
@media (min-width: 62rem) {
.sezione-due { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
/* Una sezione col solo titolo non deve lasciare mezza riga vuota. */
.sezione-due-sola { grid-template-columns: 1fr; }
}