header.section-header img {
display : block;
filter : brightness(50%);
margin : 0 auto;
}
header.section-header-bright img {
display : block;
margin : 0 auto;
}
/* Testo sovrapposto all'immagine nella testata storica. Il selettore e' ANCORATO alla
struttura di quell'header — .mask > .container > div — e non deve tornare generico:
scritto come "> div > div > div" colpiva per posizione qualunque testata annidata di
tre livelli, e dal 2026-09 ha rotto gli header del kit gui-templates, che hanno la
stessa profondita' ma un'altra struttura: nell'istituzionale i due blocchi (ente e
partner) uscivano dal flusso, si sovrapponevano al titolo e la testata collassava a
35 px di altezza. Lo usano ancora i progetti webnir e template. */
header.section-header > .mask > .container > div {
position : absolute;
top : 0;
}
/* ---------------------------------------------------------------------------------------
hdr-hero: la striscia di testata con velo direzionale (2026-09-21).
Classe NUOVA, accanto a section-header: i progetti restano su quella finche' non la
adottano, uno alla volta, e quando lo fanno cambiano soltanto le variabili qui sotto
nel loro css locale — non serve duplicare la regola.
Perche' non si usa piu' ![]()
+ filter: brightness(50%). Quel filtro spegne TUTTA
l'immagine per rendere leggibili due righe che ne occupano un sesto; e l'immagine come
![]()
si rimpicciolisce in proporzione, cosi' su un telefono la banda
diventa alta 75 px e il testo le esce dal fondo. Qui l'immagine e' uno sfondo "cover"
con un punto di fuoco scelto, e il velo e' un gradiente che scurisce solo la parte dove
cade il testo: il resto resta alla piena luminosita'.
Le misure (contrasto WCAG del testo sulla zona dove cade, pixel per pixel sulla
striscia vera; conta il peggior 5% dei pixel, non la media): immagine nuda 1,86:1 —
sotto AA; brightness(50%) 6,39:1; velo 0,62 -> 9,13:1. Un velo a 0,50 equivale
esattamente al brightness(50%) di prima, perche' entrambi moltiplicano i canali sRGB
gia' codificati (per k il filtro, per 1-v il velo): 0,62 costa nulla e lascia margine
per un'immagine futura piu' chiara.
--------------------------------------------------------------------------------------- */
header.hdr-hero {
--hdr-img : url("/img/local/gui/striscia.jpg");
--hdr-prop : 5.5652; /* proporzioni della striscia: 1920 / 345 */
--hdr-fuoco : 50% 50%; /* parte dell'immagine da tenere in vista */
--hdr-velo : .62; /* opacita' del velo dove cade il testo */
--hdr-fine : 62%; /* dove il velo si e' spento del tutto */
/* Tinta del velo, in componenti separate perche' finisce dentro rgb(... / alfa).
Nera scurisce la fotografia sotto il testo chiaro, ed e' il caso normale; bianca la
schiarisce, e serve quando il testo e' SCURO — l'oscilloscopio di webnir, che nelle
lettere ha uno schermo nero, sta in piedi solo cosi'. */
--hdr-velo-tinta: 0 0 0;
/* Dove finisce il tratto PIANO del velo e comincia la discesa verso --hdr-fine.
Serve quando il testo e' largo quanto la banda — su finestra stretta il sottotitolo
arriva al 77% e con la discesa che parte dal 26% laggiu' il velo vale appena 0,25:
misurato, il sottotitolo scendeva a 2,96:1. */
--hdr-piano : 26%;
--hdr-gronda : clamp(1.1rem, 3.5vw, 3.5rem); /* rientro del testo dal bordo sinistro */
--hdr-alt-min: 8rem; /* altezza sotto la quale non si scende */
--hdr-tit : .45; /* corpo del titolo, quota dell'altezza */
--hdr-sub : .075; /* corpo del sottotitolo, idem */
--hdr-cima : .07; /* stacco del testo dal bordo alto, idem */
/* L'ALTEZZA DELLA BANDA, da cui discende tutto il resto. Si calcola invece di dedurla
da aspect-ratio per due motivi: cosi' la stessa espressione serve anche al corpo dei
caratteri (il titolo deve restare una frazione fissa dell'altezza), e sparisce un
effetto collaterale sgradevole — con aspect-ratio + min-height, quando il minimo alza
l'altezza, il browser ricava dall'altezza anche la LARGHEZZA e la banda esce dalla
finestra (misurato: viewport 504 -> banda 712, con scorrimento orizzontale).
L'immagine non si taglia MAI sopra e sotto: l'altezza segue la larghezza secondo le
proporzioni della striscia, quindi "cover" coincide con un adattamento esatto. Con
l'immagine attuale il pareggio cade a 712 px; piu' stretto di cosi' la banda
resterebbe troppo bassa per il testo, comanda --hdr-alt-min e il taglio passa ai
LATI, che su un'immagine larga 5,6 volte l'altezza non si nota. 100vw comprende la
barra di scorrimento, quindi la banda e' semmai di pochi pixel PIU' alta del dovuto:
l'errore cade dalla parte giusta, perche' produce un ritaglio orizzontale e mai
verticale. Da sapere: su uno schermo largo la banda e' alta in proporzione
(2560 px -> 460). Per rimetterle un tetto basta un min() con una max-height, ma da
li' in poi il taglio sopra/sotto torna. */
--hdr-alt : max(calc(100vw / var(--hdr-prop)), var(--hdr-alt-min));
position : relative;
display : grid;
align-items : start; /* il testo sta in alto, non centrato nella banda */
/* min-height e non height: con il titolo al 45% il testo sfiora l'altezza minima, e
sulla banda piu' stretta (dove il sottotitolo va a capo) la supererebbe. Con un
minimo la banda CRESCE invece di tagliare il testo; sopra il pareggio dei 712 px il
contenuto e' molto piu' basso dell'immagine, quindi l'altezza resta quella calcolata
e il taglio verticale continua a non esserci. */
min-height : var(--hdr-alt);
background : var(--hdr-img) var(--hdr-fuoco) / cover no-repeat #15171a;
color : #fff;
}
header.hdr-hero::before { /* il velo: pieno a sinistra, nullo a destra */
content : "";
position : absolute;
inset : 0;
background : linear-gradient(100deg,
rgb(var(--hdr-velo-tinta) / var(--hdr-velo)) 0%,
rgb(var(--hdr-velo-tinta) / calc(var(--hdr-velo) * .85)) var(--hdr-piano),
rgb(var(--hdr-velo-tinta) / 0) var(--hdr-fine));
}
/* position: relative, non z-index: uno pseudo-elemento posizionato si dipinge DOPO il
contenuto non posizionato, quindi coprirebbe il testo. Posizionando anche il testo,
l'ordine torna quello del DOM. */
/* Niente max-width qui: con il titolo proporzionato alla banda, su uno schermo largo
"PortLab" e' piu' largo di qualunque misura fissa e andrebbe a capo. La misura
leggibile la impone il solo sottotitolo, che e' l'unico testo da leggere. */
header.hdr-hero > .hdr-testo {
position : relative;
padding-block : max(.5rem, calc(var(--hdr-alt) * var(--hdr-cima)))
max(.5rem, calc(var(--hdr-alt) * .06));
padding-inline : var(--hdr-gronda);
}
header.hdr-hero h1 {
font-size : calc(var(--hdr-tit) * var(--hdr-alt)); /* sempre il 30% della banda */
line-height : 1.12;
margin : 0;
font-weight : 700;
letter-spacing : -.015em;
color : #fff; /* ricaduta: senza background-clip il titolo resta bianco */
white-space : nowrap; /* il titolo e' una parola: non deve mai spezzarsi */
/* il riquadro si stringe sulla parola. Serve all'onda: background-clip ritaglia il
gradiente sul RIQUADRO, non sulle lettere, e un h1 largo quanto la banda spalmerebbe
l'arcobaleno su migliaia di pixel lasciando alla parola una fetta di tinta quasi
unica (misurato: a 2542 px il riquadro era largo 2430 e la parola ne copriva il 7%). */
width : fit-content;
}
header.hdr-hero p {
/* proporzionale come il titolo, ma con un pavimento: sulla banda minima il 7,5%
sarebbe 9,6 px, illeggibili. */
font-size : max(.92rem, calc(var(--hdr-sub) * var(--hdr-alt)));
margin : .45rem 0 0;
max-width : 46ch; /* misura leggibile, non una riga da 1900 px */
opacity : .93;
/* testo.css giustifica TUTTI i : su due righe corte gli spazi si stirano
e restano i buchi bianchi. Qui si torna a bandiera, e si pareggiano le righe. */
text-align : start;
text-wrap : balance;
}
/* ---------------------------------------------------------------------------------------
GLI EFFETTI SUL TITOLO NON STANNO QUI. Sono classi che si AGGIUNGONO a hdr-hero
sull'elemento