/*
Theme Name: Hello Elementor Child — BitCal
Theme URI: https://bitcal.org
Description: Child theme di Hello Elementor per Bitcoin Calabria. Contiene il template di pagina "Blog BitCal".
Author: Bitcoin Calabria
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child-bitcal
*/
/* Stili globali del child theme.
Gli stili del blog sono in blog-bitcal.css, caricato solo
sulla pagina che usa il template "Blog BitCal". */
/* ------------------------------------------------------------------
Token dell'identità visiva — vedi DESIGN.md
Stanno su :root, e non su .bitcal-blog, perché questo foglio è
caricato su tutte le pagine: l'header di Elementor vive fuori dal
contenitore del blog e prima non poteva raggiungerli.
------------------------------------------------------------------ */
:root{
/* Palette "Crema & Espresso" — blog, percorsi, glossario */
--bcb-antracite:#1c1c1c; /* inchiostro: testo, hero, footer, fasce scure */
--bcb-grigio:#F3EEE6; /* crema: fondo pagina e testo chiaro su scuro */
--bcb-arancio:#ED8B2B; /* arancio Bitcoin: unico accento forte */
--bcb-azzurro:#2191d0; /* azzurro: secondo accento, con parsimonia */
--bcb-carta:#FBF8F3; /* bianco caldo: card e riquadri */
--bcb-rosso:#c0392b; /* rosso caldo: solo l'errore nei test */
/* Famiglie tipografiche. Entrambe sans-serif: i nomi dicono il
ruolo, non la classificazione. */
--bcb-titoli:'Poppins',-apple-system,sans-serif;
--bcb-testo:'Montserrat',-apple-system,sans-serif;
/* Colonna di lettura: a 16px Montserrat sono circa 70 caratteri per
riga. La condividono il testo e tutto ciò che gli sta allineato. */
--bcb-colonna:700px;
/* Header e menu mobile: palette precedente, ancora in uso su tutto
il sito. Volutamente NON allineata a quella sopra — allinearla
cambierebbe l'aspetto. Vedi "Due palette" in DESIGN.md. */
--bcb-header-arancio:#F2921F;
--bcb-header-azzurro:#2c94d4;
--bcb-header-grigio:#E7E7E7;
}
/* ------------------------------------------------------------------
Header del sito — header.php, comportamento in header-bitcal.js
------------------------------------------------------------------
Prima era un modello Elementor (UAE Lite) e qui c'erano le correzioni
alle sue classi, molte con !important per battere la specificità dei
widget. Ora il markup è del tema e lo stile parte da zero, con gli
stessi valori: colori della palette dell'header, Poppins, 90px di
altezza, pannello mobile da sinistra.
Un solo menu: sopra i 1024px è la riga orizzontale con le tendine,
sotto diventa il pannello. 1024px è la soglia che aveva il widget
Elementor (dropdown-tablet). */
.bcb-header{
background:var(--bcb-antracite);
font-family:var(--bcb-titoli);
}
.bcb-header-riga{
display:flex;align-items:center;
gap:24px;
max-width:1180px;min-height:90px;
margin:0 auto;padding:0 20px;
box-sizing:border-box;
}
/* --- Marchio: logo e payoff, un solo link alla home --- */
.bcb-header-marchio{
display:flex;align-items:center;gap:9px;
flex:0 0 auto;
text-decoration:none;
}
.bcb-header-marchio:focus{outline:0;}
.bcb-header-marchio:focus-visible{
outline:3px solid var(--bcb-header-azzurro);outline-offset:2px;
}
.bcb-header-logo{display:block;width:85px;height:85px;}
/* Tre righe già spezzate con (bcb_menu_voci_sezione in
functions.php): stesso aspetto dei link, senza i colori del reset. */
.bcb-nav-lista,
.bcb-nav-lista ul{list-style:none;margin:0;padding:0;}
.bcb-nav-lista a,
.bcb-nav-lista button{-webkit-tap-highlight-color:transparent;}
.bcb-nav-lista button{
display:flex;align-items:center;
margin:0;
background:none;border:0;border-radius:0;
font:inherit;text-align:left;
cursor:pointer;
}
/* Il reset del tema padre, caricato dopo, dà ai button cliccati il fondo
fucsia (button:focus) e a tutti i fuochi da tastiera un anello bianco
(box-shadow): qui la specificità più alta li spegne. Gli stati veri
(hover, sezione aperta) hanno selettori più forti e restano. */
.bcb-nav-lista button:hover,
.bcb-nav-lista button:focus,
.bcb-nav-lista button:active{background:none;}
.bcb-header :focus-visible{box-shadow:none;}
.bcb-nav-lista a:focus,
.bcb-nav-lista button:focus{outline:0;}
.bcb-nav-lista a:focus-visible,
.bcb-nav-lista button:focus-visible{
outline:2px solid var(--bcb-header-azzurro);outline-offset:-2px;
}
.bcb-nav-freccia{
flex:0 0 auto;
width:1rem;height:1rem;
transition:transform .2s ease;
}
/* Il tag davanti: il reset del tema padre, caricato dopo, da ai button
display:inline-block con la stessa specificita di una classe. */
button.bcb-nav-chiudi,
ul.bcb-nav-contatti{display:none;}
/* ------------------------------------------------------------------
Desktop: riga orizzontale con le tendine
------------------------------------------------------------------ */
@media (min-width:1025px){
.bcb-nav{margin-left:auto;}
.bcb-nav-lista{display:flex;align-items:center;}
.bcb-nav-lista > li{position:relative;}
/* Primo livello: 14px; il colore è l'unico segnale dello stato. Il
contrasto fra il grigio dell'header e l'arancio supera il 3:1 chiesto
da WCAG 2.2 AA per i componenti, e il fuoco ha il suo contorno. */
.bcb-nav-lista > li > a,
.bcb-nav-lista > li > button{
display:flex;align-items:center;
height:46px;padding:0 19px;
color:var(--bcb-header-grigio);
font-size:14px;font-weight:400;line-height:1;
text-decoration:none;
}
.bcb-nav-lista > li > button .bcb-nav-freccia{display:none;}
.bcb-nav-lista > li:hover > a,
.bcb-nav-lista > li:hover > button,
.bcb-nav-lista > li > button[aria-expanded="true"],
.bcb-nav-lista > li.current-menu-item > a,
.bcb-nav-lista > li.current-menu-ancestor > button{
background:none;
color:var(--bcb-header-arancio);
}
/* Le tendine: si aprono al passaggio del mouse oppure col pulsante della
sezione (tastiera, tocco), che alza aria-expanded. */
.bcb-nav-lista ul{
display:none;
position:absolute;top:100%;left:0;z-index:100;
min-width:16rem;
padding:.35rem 0;
background:var(--bcb-antracite);
border:1px solid rgba(243,238,230,.12);border-radius:4px;
box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.bcb-nav-lista li:hover > ul,
.bcb-nav-lista button[aria-expanded="true"] + ul{display:block;}
/* Terzo livello (i percorsi di un livello): di fianco, non sotto. */
.bcb-nav-lista ul li{position:relative;}
.bcb-nav-lista ul ul{top:calc(-.35rem - 1px);left:100%;}
.bcb-nav-lista ul a,
.bcb-nav-lista ul button{
display:flex;align-items:center;justify-content:space-between;gap:.75rem;
width:100%;box-sizing:border-box;
padding:.6rem 1.1rem;
color:var(--bcb-header-grigio);
font-size:.92rem;font-weight:400;line-height:1.35;
text-decoration:none;
}
/* La freccia del livello punta a destra, verso la tendina che apre. */
.bcb-nav-lista ul button .bcb-nav-freccia{transform:rotate(-90deg);width:.85rem;height:.85rem;}
.bcb-nav-lista ul li:hover > a,
.bcb-nav-lista ul li:hover > button,
.bcb-nav-lista ul button[aria-expanded="true"],
.bcb-nav-lista ul a:focus-visible,
.bcb-nav-lista ul li.current-menu-item > a{
background:rgba(243,238,230,.06);
color:var(--bcb-header-arancio);
}
}
/* ------------------------------------------------------------------
Sotto i 1024px: riga compatta e pannello che entra da sinistra
------------------------------------------------------------------
Con quattro sezioni, sei percorsi e diciotto voci una tendina sotto
l'hamburger non bastava: il menu è un pannello che copre il 78% dello
schermo, col resto della pagina velato, e le sezioni si aprono una
alla volta. */
@media (max-width:1024px){
.bcb-header-riga{
gap:14px;
padding:12px 20px;
}
.bcb-header-marchio{flex:1 1 auto;min-width:0;}
.bcb-header-logo{width:60px;height:60px;}
.bcb-header-gruppo{font-size:13px;}
button.bcb-hamburger{display:flex;}
.bcb-nav{
position:fixed;
top:0;bottom:0;left:0;
z-index:10000;
width:78%;max-width:22rem;
background:var(--bcb-antracite);
/* Fuori schermo a sinistra. 0.3s con ease-out: parte deciso e rallenta
arrivando. Non visibility:hidden: il browser non anima una
transizione che parte da un elemento appena reso visibile. Il fuoco
da tastiera lo toglie l'attributo inert (header-bitcal.js).
I 40px in più portano fuori anche l'ombra, che altrimenti sporge
sul bordo sinistro della pagina. */
transform:translateX(calc(-100% - 40px));
transition:transform .3s cubic-bezier(.22,.61,.36,1);
pointer-events:none;
/* Colonna flex: le voci in alto, i contatti spinti in fondo. */
display:flex;flex-direction:column;
overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
box-shadow:2px 0 24px rgba(0,0,0,.5);
}
body.bitcal-menu-aperto .bcb-nav{transform:translateX(0);pointer-events:auto;}
/* La X in cima al pannello. */
button.bcb-nav-chiudi{
display:flex;align-items:center;justify-content:flex-end;
flex:0 0 auto;
width:100%;
margin:0;padding:.85rem 1.1rem;
background:none;
border:0;border-bottom:1px solid rgba(243,238,230,.1);border-radius:0;
color:var(--bcb-header-grigio);
line-height:0;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
button.bcb-nav-chiudi:hover,
button.bcb-nav-chiudi:focus,
button.bcb-nav-chiudi:active{background:none;color:var(--bcb-header-arancio);}
button.bcb-nav-chiudi:focus{outline:0;}
button.bcb-nav-chiudi:focus-visible{
outline:2px solid var(--bcb-header-azzurro);outline-offset:-2px;
}
/* I sottomenu si aprono col loro pulsante. */
.bcb-nav-lista button[aria-expanded="false"] + ul{display:none;}
/* Primo livello: le quattro sezioni. */
.bcb-nav-lista > li > a,
.bcb-nav-lista > li > button{
display:flex;align-items:center;justify-content:space-between;gap:.75rem;
width:100%;box-sizing:border-box;
padding:.95rem 1.25rem;
border-bottom:1px solid rgba(243,238,230,.1);
color:var(--bcb-header-grigio);
font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:.01em;
text-decoration:none;
}
.bcb-nav-lista > li > a:hover,
.bcb-nav-lista > li > button:hover,
.bcb-nav-lista > li > button[aria-expanded="true"]{
background:rgba(243,238,230,.04);
color:var(--bcb-header-arancio);
}
.bcb-nav-lista button[aria-expanded="true"] .bcb-nav-freccia{transform:rotate(180deg);}
/* Il sottomenu, un grado più scuro del pannello. */
.bcb-nav-lista > li > ul{
padding:.35rem 0 .75rem;
background:rgba(0,0,0,.22);
}
/* Secondo livello: link (Approfondimenti, Risorse) o pulsanti dei livelli
di difficoltà (Percorsi). */
.bcb-nav-lista ul a{
display:block;
padding:.6rem 1.25rem .6rem 2rem;
color:rgba(243,238,230,.78);
font-family:var(--bcb-testo);font-size:.9rem;font-weight:400;line-height:1.4;
text-decoration:none;
}
.bcb-nav-lista ul button{
justify-content:space-between;gap:.75rem;
width:100%;box-sizing:border-box;
padding:.8rem 1.25rem .8rem 1.75rem;
border-bottom:1px solid rgba(243,238,230,.06);
color:rgba(243,238,230,.92);
font-size:.92rem;font-weight:500;line-height:1.3;
}
.bcb-nav-lista ul a:hover,
.bcb-nav-lista ul a:focus-visible,
.bcb-nav-lista ul button:hover,
.bcb-nav-lista ul button[aria-expanded="true"],
.bcb-nav-lista li.current-menu-item > a{
background:rgba(243,238,230,.05);
color:var(--bcb-header-arancio);
}
/* Terzo livello: gli indici dei percorsi, rientrati e col filetto, come
nel footer: su fondo scuro un margine da solo non si legge come
gerarchia. */
.bcb-nav-lista ul ul{
padding:.2rem 0 .4rem;
background:rgba(0,0,0,.3);
}
.bcb-nav-lista ul ul a{
margin-left:2.4rem;
padding:.5rem 1.25rem .5rem .9rem;
border-left:1px solid rgba(243,238,230,.16);
color:rgba(243,238,230,.66);
font-size:.84rem;
}
/* I contatti ancorati in fondo al pannello: margin-top:auto li spinge giù
nella colonna flex, e scendono sotto l'ultima voce quando le sezioni
aperte riempiono lo schermo. 40px con 2px di passo: sette icone in riga
su 352px, e l'area toccabile resta sopra i 24x24 di WCAG 2.2 AA. */
ul.bcb-nav-contatti{
display:flex;flex-wrap:wrap;justify-content:center;gap:2px;
margin:auto 0 0;
padding:1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
border-top:1px solid rgba(243,238,230,.1);
list-style:none;
}
.bcb-nav-contatti a{
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;
border-radius:4px;
color:rgba(243,238,230,.82);
transition:color .15s ease, background-color .15s ease;
}
.bcb-nav-contatti a:hover,
.bcb-nav-contatti a:focus-visible{
background:rgba(243,238,230,.06);
color:var(--bcb-header-arancio);
}
.bcb-nav-contatti a:focus{outline:0;}
.bcb-nav-contatti a:focus-visible{
outline:2px solid var(--bcb-header-azzurro);outline-offset:-2px;
}
.bcb-nav-contatti .bcb-footer-social-icona{display:block;width:20px;height:20px;}
/* A menu aperto il velo copre la pagina, header compreso: hamburger e
pulsante tornano in chiaro sopra di lui e restano cliccabili, ma sotto
il pannello (10000), che li copre quando ci passa sopra. */
body.bitcal-menu-aperto .bcb-hamburger,
body.bitcal-menu-aperto .bcb-header-gruppo{position:relative;z-index:9999;}
}
/* Sotto i 400px il pulsante perde il padding laterale: a riposo è solo testo
su fondo scuro, e quei pixel servono al marchio. */
@media (max-width:400px){
.bcb-header-riga{gap:8px;}
.bcb-header-gruppo{padding-left:8px;padding-right:8px;}
}
/* Sotto i 360px marchio, payoff, pulsante e hamburger non stanno in una
riga: il payoff, che è decorativo, si nasconde e resta il logo. */
@media (max-width:359px){
.bcb-header-payoff{display:none;}
}
@media (prefers-reduced-motion:reduce){
.bcb-nav{transition:none;}
}
/* Il velo sulla pagina, sotto il pannello e sopra tutto il resto. Un
elemento a parte (header.php) e non uno ::before del body, perché deve
intercettare il tocco per chiudere. */
button.bitcal-menu-velo{
position:fixed;inset:0;
z-index:9998;
/* .82: sotto il pannello passa anche la fascia crema del sito, che a .55
restava quasi bianca; il velo deve far capire che la pagina sotto non
è attiva. */
background:rgba(0,0,0,.82);
opacity:0;visibility:hidden;
transition:opacity .3s ease, visibility .3s;
border:0;padding:0;margin:0;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
button.bitcal-menu-velo.attivo{opacity:1;visibility:visible;}
/* Il reset del tema padre colora i button su hover/focus: il velo deve
restare nero in ogni stato. */
button.bitcal-menu-velo:hover,
button.bitcal-menu-velo:focus,
button.bitcal-menu-velo:active{background:rgba(0,0,0,.82);}
/* Mentre il pannello è aperto la pagina sotto non scorre. */
body.bitcal-menu-aperto{overflow:hidden;}
/* ------------------------------------------------------------------
Footer del sito — vedi DESIGN.md, componente "Footer"
Sta qui e non in blog-bitcal.css perché il footer esce su tutte le
pagine, mentre quel foglio è caricato solo su blog, percorsi e
glossario.
------------------------------------------------------------------ */
.bcb-footer{
background:var(--bcb-antracite);
color:var(--bcb-grigio);
font-family:var(--bcb-testo);
line-height:1.6;
}
/* Il footer NON porta la fascia colorata: la chiude il contenuto, con
.bitcal-blog::after (blog-bitcal.css), e quella fascia è animata
(bcb-flow, i colori scorrono in 9s). Aggiungerne una qui significava due
filetti da 4px attaccati, di cui il mio fermo: sembrava che la fascia
avesse smesso di muoversi.
L'unica pagina senza .bitcal-blog è il 404, dove la fascia la mette il
footer: statica, perché l'animazione vive nel foglio del blog, che su
quella pagina non è caricato. */
.error404 .bcb-footer{
border-top:4px solid transparent;
border-image:linear-gradient(90deg,var(--bcb-azzurro) 0 33%,var(--bcb-arancio) 33% 100%) 1;
}
/* Il footer respira più largo del contenuto: 1140px come le sezioni lo facevano
sembrare una scatola centrata, con 390px di margine vuoto per lato su uno
schermo da 1920. A 1480px la fascia scura resta legata ai bordi e le colonne
si distendono, senza per questo diventare righe da attraversare con gli occhi. */
.bcb-footer-wrap{max-width:1480px;margin:0 auto;padding:56px 40px 28px;}
/* Prima fascia: marchio, colonne di link, donazione.
Larghezze non uguali ma proporzionate al contenuto: il marchio ha un
payoff da mandare a capo, "Argomenti" ha sei voci, le altre due o tre.
Sei colonne al 16% come nel footer Elementor lasciavano due terzi di
vuoto sotto le liste corte. */
.bcb-footer-top{
display:grid;
/* Le tre quote seguono il contenuto: il marchio con il payoff, le colonne
di link, la donazione con il QR da 160px. */
grid-template-columns:minmax(0,.85fr) minmax(0,3fr) auto;
gap:40px 64px;
align-items:start;
}
/* ---------- Marchio ---------- */
/* Il marchio e il suo payoff stanno in colonna e restano attaccati: nella
prima versione la griglia li allontanava e il testo finiva a mezz’aria,
staccato dal logo a cui si riferisce. */
.bcb-footer-brand{display:flex;flex-direction:column;align-items:flex-start;}
/* Il PNG del logo è 500x500 ma il marchio dentro occupa 440x280: sotto ha
141px di trasparenza, il 28% dell’altezza. Senza ritaglio quel vuoto
restava fra marchio e payoff, ed è il motivo per cui il footer Elementor
aveva un margin-top:-33px sul paragrafo. Qui il contenitore mostra solo la
parte piena dell’immagine, così il payoff sale da solo. */
.bcb-footer-logo{display:block;width:150px;aspect-ratio:440/280;overflow:hidden;line-height:0;}
.bcb-footer-logo img{
width:170px;height:auto;display:block;
/* 500/440 di 150px, spostata di -29/-79 in scala: porta il marchio a filo. */
margin:-27px 0 0 -10px;
}
.bcb-footer-logo-testo{
font-family:var(--bcb-titoli);font-weight:700;font-size:1.5rem;
color:var(--bcb-grigio);line-height:1.2;
}
.bcb-footer-payoff{
margin:16px 0 0;
font-size:.82rem;line-height:1.7;
color:rgba(243,238,230,.72);
max-width:34ch;
}
/* ---------- Colonne di link ---------- */
.bcb-footer-nav{
display:grid;
/* auto e non 1fr: le colonne prendono la larghezza del loro contenuto, così
"Tecnologia e Sicurezza" e "Come funziona Bitcoin" stanno su una riga.
Con le colonne uguali andavano a capo tutte. */
/* La colonna dei percorsi porta otto capitoli e ha bisogno di misura, non
di spazio intorno: prende quanto le serve, le altre due restano sul loro
contenuto. Senza questo i titoli lunghi andavano a capo a metà. */
grid-template-columns:auto max-content auto;
justify-content:start;
gap:32px 64px;
}
/* Il titolo di colonna era identico alle voci — 13px Montserrat, stesso
colore — e si leggeva come il primo link della lista. Ora è l'occhiello
del tema: Poppins, più piccolo, spaziato, maiuscolo, azzurro. Il salto
lo fanno famiglia e trattamento, non il peso. */
.bcb-footer-titolo{
margin:0 0 14px;
font-family:var(--bcb-titoli);font-weight:600;font-size:.68rem;
letter-spacing:.14em;text-transform:uppercase;
color:var(--bcb-azzurro);
}
.bcb-footer-lista{margin:0;padding:0;list-style:none;}
.bcb-footer-lista li{margin:0 0 11px;}
.bcb-footer-lista li:last-child{margin-bottom:0;}
/* Allineate a sinistra: una lista centrata non ha un bordo da seguire e
costringe l'occhio a ricentrarsi su ogni riga. È anche l'unico
allineamento usato nel resto del sito. */
.bcb-footer-lista a,
.bcb-footer-attesa{
font-size:.88rem;
color:rgba(243,238,230,.82);
text-decoration:none;
}
.bcb-footer-lista a{transition:color .15s ease;}
.bcb-footer-lista a:hover,
.bcb-footer-lista a:focus-visible{color:var(--bcb-arancio);text-decoration:underline;}
/* Voce ancora senza pagina: resta testo e si distingue dai link. */
.bcb-footer-attesa{color:rgba(243,238,230,.45);}
/* Capitoli di un percorso: rientrati sotto la voce del percorso, un filo più
piccoli e meno accesi. La rientranza è un filetto, non un margine cieco: su
fondo scuro un margine da solo non si legge come gerarchia. */
.bcb-footer-sottovoce{padding-left:14px;border-left:1px solid rgba(243,238,230,.16);}
.bcb-footer-sottovoce a{font-size:.82rem;line-height:1.5;color:rgba(243,238,230,.66);}
/* I capitoli stanno stretti fra loro; lo stacco fra un percorso e il successivo
lo fa il margine superiore della voce di percorso, che non ha bisogno di
:has() e quindi funziona anche su Safari più vecchi. */
.bcb-footer-sottovoce{margin-bottom:5px;}
.bcb-footer-sottovoce + li:not(.bcb-footer-sottovoce){margin-top:20px;}
/* ---------- Donazione lightning ---------- */
.bcb-footer-sostieni-testo{
margin:0 0 10px;
font-size:.82rem;line-height:1.6;
color:rgba(243,238,230,.72);
}
.bcb-footer-lightning{
display:inline-block;
font-family:var(--bcb-titoli);font-weight:500;font-size:.88rem;
color:var(--bcb-arancio);text-decoration:none;
word-break:break-all;
transition:color .15s ease;
}
.bcb-footer-lightning:hover,
.bcb-footer-lightning:focus-visible{color:var(--bcb-grigio);text-decoration:underline;}
/* Il QR sta a 190px. Il codice è 33x33 moduli (versione 4), quindi ogni modulo
cade su ~5.8px di schermo. A 160px erano ~4.8px: sopra la soglia teorica dei
3px, ma in mano si leggeva ancora a fatica, perché la cornice bianca attorno
si mangia parte del lato utile. Sotto i 140px non vale la pena stamparlo. */
.bcb-footer-qr{
display:block;margin:16px 0 0;
width:190px;height:auto;
border-radius:2px;
}
/* ---------- Contatti ---------- */
.bcb-footer-social{margin:40px 0 0;}
.bcb-footer-social-lista{
display:flex;flex-wrap:wrap;gap:8px;
/* -10px recupera il padding dell'area toccabile del primo elemento, così le
icone restano allineate al bordo come il resto della colonna. */
margin:0 0 0 -10px;padding:0;list-style:none;
}
/* L'icona disegnata è 20px, ma l'area che risponde al dito è 44x44: la misura
consigliata su mobile (WCAG 2.2 AA chiede almeno 24x24). Il padding fa da
area, quindi non serve ingrandire il tracciato. */
.bcb-footer-social-lista a{
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;
color:rgba(243,238,230,.82);text-decoration:none;
border-radius:4px;
transition:color .15s ease, transform .15s ease;
}
.bcb-footer-social-icona{
display:block;
width:20px;height:20px;
}
/* Il colore non è il solo segnale del passaggio del mouse: l'icona si alza
anche di un pixel, che si vede pure senza percepire l'arancio. */
.bcb-footer-social-lista a:hover,
.bcb-footer-social-lista a:focus-visible{
color:var(--bcb-arancio);
transform:translateY(-1px);
}
.bcb-footer-social-lista a:active{transform:translateY(0);}
.bcb-footer-social-lista a:focus{outline:0;}
.bcb-footer-social-lista a:focus-visible{
outline:2px solid var(--bcb-azzurro);outline-offset:2px;
}
/* ---------- Coda legale ---------- */
.bcb-footer-coda{
display:flex;flex-wrap:wrap;gap:8px 24px;
justify-content:space-between;align-items:baseline;
margin:44px 0 0;padding:20px 0 0;
border-top:1px solid rgba(243,238,230,.14);
}
.bcb-footer-coda p{
margin:0;
/* .74rem, non 8px come sul mobile del footer precedente: sotto i 12px
un testo di servizio non si legge più. */
font-size:.74rem;line-height:1.6;
color:rgba(243,238,230,.55);
}
.bcb-footer-sep{opacity:.5;margin:0 4px;}
/* Il link all'informativa: stesso tono della riga, sottolineato perché si
capisca che è un link anche senza colore. */
.bcb-footer-coda a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.bcb-footer-coda a:hover{color:var(--bcb-grigio);}
.bcb-footer a:focus-visible{outline:3px solid var(--bcb-azzurro);outline-offset:2px;border-radius:2px;}
/* ---------- Formati ridotti ---------- */
/* Un solo insieme di regole per tutti i formati: il footer Elementor
teneva tre copie della griglia, una per breakpoint. */
/* Sotto i 1100px le tre colonne di link non stanno più in riga con marchio e
donazione senza stringersi: passano a una fascia propria, larga tutta la
pagina, e marchio e donazione si dividono la prima riga. */
/* La soglia è a 1280px, non a 1100: con gli otto capitoli nella colonna dei
percorsi le tre liste smettono di stare in riga con marchio e donazione molto
prima. Sotto quella misura i titoli andavano a capo a raffica. */
@media (max-width:1280px){
.bcb-footer-top{grid-template-columns:minmax(0,1fr) auto;gap:40px 48px;}
.bcb-footer-nav{grid-column:1 / -1;order:2;}
.bcb-footer-sostieni{order:1;}
.bcb-footer-payoff{max-width:46ch;}
}
/* Sotto i 720px il QR non sta accanto al payoff: tutto in colonna. */
@media (max-width:720px){
.bcb-footer-wrap{padding:48px 20px 24px;}
.bcb-footer-top{grid-template-columns:minmax(0,1fr);gap:32px;}
/* In colonna singola torna l’ordine del markup: le liste prima, la
donazione in chiusura. Lo scambio sopra serviva solo a riempire la riga
accanto al marchio, che qui non esiste più. */
.bcb-footer-sostieni{order:0;}
/* Una colonna sola, non due. Con due colonne la riga della griglia prendeva
l’altezza della più alta: “Percorsi di studio” porta undici voci contro le
sei di “Argomenti”, e sotto la lista corta restava mezzo schermo di vuoto
prima di “Risorse”. In pila ogni blocco occupa quello che gli serve. */
.bcb-footer-nav{order:0;grid-template-columns:minmax(0,1fr);gap:28px;}
.bcb-footer-payoff{max-width:none;}
/* Il QR a 190px è tarato sul desktop, dove sta in una colonna stretta. In
pila non ha più un vincolo di larghezza e domina il footer: 150px restano
ben sopra la soglia di leggibilità (33 moduli su ~4.5px l’uno). */
.bcb-footer-qr{width:150px;margin-top:12px;}
.bcb-footer-social{margin-top:28px;}
}
@media (max-width:420px){
/* Qui lo spazio verticale è la risorsa scarsa: voci più vicine. */
.bcb-footer-nav{gap:24px;}
.bcb-footer-lista li{margin-bottom:7px;}
.bcb-footer-coda{margin-top:28px;}
}
/* Il punto d arrivo del link "Vai al contenuto": riceve il fuoco, ma non
ha un contorno da mostrare. */
#bcb-contenuto:focus{outline:0;}