dentro una sezione Elementor a fondo scuro diventava #111 su nero — contrasto 1,08:1, cioe' invisibile: tutto il corpo della pagina Club era illeggibile mentre in produzione era bianco (21:1). Lo stesso capitava al breadcrumb, che un colore suo ce l'ha gia' sul contenitore (#666) e se lo vedeva sovrascrivere dal
interno.
La cura non e' alzare la specificita' da qualche parte, e' smettere di
dire la nostra dove il colore e' gia' deciso: qui si restituisce
l'eredita', e basta. */
:where(.elementor p),
:where(.rank-math-breadcrumb p) {
color: inherit;
}
/* ===========================================================================
[GLB-03] La scala tipografica, applicata sul serio
«Lo farei un po' piu' piccolo e piu' piccoli tutti i titoli di conseguenza /
anche i paragrafi leggermente piu' piccoli»
La scala ridotta ESISTEVA GIA' nei token (--bb-body 14px, --bb-h1 30, --bb-h2
21, --bb-h3 16) ma non arrivava mai in pagina. Misurato prima di toccare:
corpo del testo token 14px -> RESO 16px
ogni h2 del sito token 21px -> RESO 28px (manifesto, titoli degli
offcanvas, "Prodotti correlati",
intestazione del carrello: tutti uguali)
h1 token 30px -> non lo usava nessuno
Chi vinceva: per il corpo il foglio dinamico del Customizer, che dichiara
`body, button, input, ..., :root :where(body){font-size:16px}`; per i titoli
il kit Elementor con `.elementor-kit-6 h1/h2`. Entrambi battono una regola
scritta sull'elemento nudo o dentro `:where()`, che vale zero.
Per questo il compito non era "ridurre la scala" — era gia' ridotta — ma
farla arrivare. Qui si riassegna con la specificita' minima che serve:
`:root body h2` fa 0,1,2 e supera `.elementor-kit-6 h2` (0,1,1), senza
ricorrere a !important, che toglierebbe a chiunque venga dopo la
possibilita' di intervenire.
⚠️ CONSEGUENZA DA CONOSCERE, altrimenti si creano nuove righe morte.
Una base abbastanza forte da battere Elementor (0,1,2) batte anche una
regola di componente scritta con UNA SOLA CLASSE (0,1,0). Non e' una scelta:
in CSS una classe vale piu' di qualsiasi numero di elementi, quindi per
superare `.classe + elemento` servono per forza due classi o una classe piu'
due elementi. Non e' un peggioramento rispetto a prima: oggi quelle regole
perdevano comunque, solo contro Elementor invece che contro di noi.
CONVENZIONE: un componente che vuole una misura sua la dichiara con DUE
classi, p.es. `.bb-home-manifesto .bb-home-manifesto__heading`. Una classe
sola non basta piu'. Vale per h1, h2, h3 e per il corpo del testo.
=========================================================================== */
:root body {
font-size: var(--bb-body);
}
/* [NEW-170, 25/09] La base dei TITOLI scende da `:root body hN` (0,1,2) a
`body hN` (0,0,2). Un solo carattere in meno nel selettore, e cambia chi
comanda.
PERCHE'. GLB-03 aveva alzato la specificita' a 0,1,2 per una ragione
precisa: battere `.elementor-kit-6 h2` (0,1,1). Nel farlo batteva anche
ogni componente scritto con UNA CLASSE (0,1,0) — conseguenza prevista nel
commento qui sopra, con la convenzione "due classi" come rimedio. Solo che
nessuno ha poi riscritto i componenti, e per due settimane 11 titoli hanno
reso il valore della base invece del proprio. Misurati:
.bb-scuola-corso__headline clamp(28,3vw,44) -> 20,16px (meta')
.bb-scuola-hero__title clamp(22,3.5vw,52) -> 27,36px
.bb-joinclub-title 11px -> 20,16px
.bb-bottega-panel__title 11px -> 20,16px
.bb-landing__model-card-name 12px -> 20,16px
...e altri 6
Non era "tutto piu' grande": era tutto appiattito sullo stesso numero, che
e' il modo peggiore in cui una scala si rompe.
ADESSO SI PUO' perche' il kit Elementor NON SI CARICA PIU' (NEW-117: era
l'unica cosa a 0,1,1 da battere, e usciva solo su /scuola/ e /mio-account/).
Caduto quell'avversario, 0,0,2 basta: resta davanti ai soli concorrenti
veri, cioe' `h1/h2/h3` NUDI (0,0,1) — il default del browser (2em, 1.5em,
1.17em) e quelli del Customizer Shoptimizer (42px, 30px, 24px) — e lascia
comandare i componenti, che e' come dovrebbe essere.
VERIFICATO PRIMA DI SCRIVERE, col protocollo DevTools, chiedendo al browser
TUTTE le regole che colpiscono ciascuno degli 11 titoli: nessun
`.qualcosa h2` (0,1,1) da nessuna parte, ne' di Shoptimizer ne' dei plugin.
Quindi non c'e' nessuno pronto a rivincere al posto del componente. Era la
condizione posta da Fabio per scegliere questa strada.
⚠ NON si abbassa la riga del CORPO qui sotto: il Customizer dichiara
`body, button, input, ..., :root :where(body){font-size:16px}`, e quel
`:root :where(body)` fa 0,1,0. Servono 0,1,1, cioe' `:root body`. Un
`body` nudo (0,0,1) perderebbe e il corpo tornerebbe a 16px. */
body h1 { font-size: var(--bb-h1); }
/* [NEW-198] Sul telefono Shoptimizer dichiara `.site h1{font-size:30px}`, che
fa 0,1,1 e sta SOPRA la riga qui sopra (0,0,2): ogni h1 senza una regola di
componente abbastanza forte rendeva 30px invece del token.
Non alziamo la base per batterlo — sarebbe il debito che GLB-03 ha appena
finito di pagare (a 0,1,2 tornerebbe a schiacciare tutti i componenti a
classe sola). Gli togliamo il VALORE alla sua stessa specificita': 0,1,1
contro 0,1,1, e vince il nostro perche' il tema figlio si carica dopo.
Niente !important.
⚠ Questo NON basta a un componente che vuole una misura sua: a 0,1,0 perde
comunque da `.site h1`. Per quello serve la convenzione di GLB-03 — DUE
classi — come fanno le hero di scuola e bottega.
⚠⚠ LA MEDIA QUERY NON E' DECORATIVA, E' LA META' DEL RIMEDIO. La regola di
Shoptimizer vive solo sotto i 768px; scritta senza condizione, la nostra
aggiungerebbe sul DESKTOP una specificita' 0,1,1 che li' non esiste, e
scavalcherebbe i componenti a classe sola: provato, il titolo del carrello
passava da 16px a 27,36. Stesso confine di Shoptimizer, 768 e non 767
(il nostro solito confine e' 767: fra i due c'e' una striscia di 1px). */
@media (max-width: 768px) {
.site h1 { font-size: var(--bb-h1); }
}
body h2 { font-size: var(--bb-h2); }
body h3 { font-size: var(--bb-h3); }
/* ===========================================================================
[NEW-167] Il CARATTERE dei titoli, applicato sul serio
Gemello del blocco qui sopra, e per lo stesso motivo. GLB-01 (decisione
Fabio 2026-08-22) dice "font unico = Jost" e GLB-15 lo ripete come regola
base: TITOLI Jost · PARAGRAFI EDITORIALI Playfair · SERVIZIO/CTA Jost.
Solo che GLB-03 ha riassegnato la MISURA dei titoli e non il CARATTERE: nel
vuoto entrava il foglio dinamico del Customizer Shoptimizer, che dichiara
sull'elemento nudo
h1 { font-family: Jost } <- per caso, ed e' giusto
h2 { font-family: Jost } <- per caso, ed e' giusto
h3 { font-family: Inter }
h4 { font-family: Inter }
h5 { font-family: Inter }
Su h1 e h2 il Customizer diceva Jost per coincidenza, ed e' la ragione per
cui nessuno si era accorto di niente per mesi. Misurato prima di toccare:
h3 "Esplora le differenti misure" -> Inter 16px
h4 "Browse" (pie' di pagina) -> Inter 20px
titoli dei pannelli Club (h2) -> sans-serif GENERICO 20,16px
Quel terzo caso e' il piu' brutto e non veniva dal Customizer: i pannelli
chiedono `var(--bb-font-body, sans-serif)`, e **--bb-font-body non era
definito in nessun file** (come --bb-font e --bb-font-ui: 22 usi in tutto il
tema, zero dichiarazioni; l'unico token vero era --bb-font-family in
variables.css, che invece non usava nessuno). Quindi valeva il ripiego, e
tre titoli giravano nel sans di sistema.
[NEW-168] I tre token ora sono dichiarati in variables.css come alias di
--bb-font-family, quindi il buco e' chiuso alla radice e non solo sui
titoli. Nota: in un primo conto avevo scritto "52 usi" — era gonfiato,
perche' cercando `var(--bb-font` prendevo dentro anche --bb-font-family,
--bb-font-editorial e i --bb-font-size-*. I tre fantasmi erano 22. Su /scuola/ sembravano giusti solo
perche' `.elementor-kit-6 h2` li stava aggiustando per sbaglio: il kit
copriva un nostro difetto, e togliendolo da /mio-account/ e' venuto a galla.
PERCHE' h1 E h2 E NON SOLO h3-h6. Su h1/h2 questa riga non cambia nulla di
visibile — erano gia' Jost — ma smette di farceli dipendere da una
coincidenza dentro un pannello di amministrazione, e rimette in Jost i tre
titoli dei pannelli, che sono h2. Una riga che vale anche come rete.
SPECIFICITA': `:root body h3` fa 0,1,2 e batte sia `h3{}` del Customizer
(0,0,1) sia `.elementor-kit-6 h4` (0,1,1) — quindi funziona anche su
/scuola/, che il kit ce l'ha ancora. Niente !important.
⚠ CONSEGUENZA, la stessa di GLB-03: 0,1,2 batte anche un componente scritto
con UNA CLASSE SOLA. Verificato prima di scrivere che non rompe nessuno: i
soli titoli con un carattere diverso sono `.bb-club-title em` (Georgia, ma
la regola sta sull' e quindi vince lei) e gli usi di --bb-font-editorial,
che stanno tutti su , e — non su titoli. Un titolo
che in futuro voglia un carattere suo lo dichiara con DUE classi.
DA FARE, a parte: i tre token inventati (--bb-font, --bb-font-body,
--bb-font-ui) vanno ricondotti a --bb-font-family. Questa riga li copre sui
titoli, ma altrove restano appesi al loro ripiego.
=========================================================================== */
/* [NEW-170] Abbassata anche questa, da 0,1,2 a 0,0,2, per lo stesso motivo
e per non ricreare lo stesso debito: se restasse a 0,1,2, il primo
componente che volesse un titolo in Playfair scritto con una classe sola
perderebbe in silenzio, esattamente come e' successo alle misure. Contro
`h3{font-family:Inter}` del Customizer (0,0,1) bastano 0,0,2, e il
`font-family` ereditato dal `body` e' comunque piu' debole di una regola
diretta sul titolo. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
font-family: var(--bb-font-family, 'Jost'), sans-serif;
}