/* ===========================================================================
HOME — le sezioni della sola pagina d'apertura
---------------------------------------------------------------------------
Queste regole stavano dentro `impaginato.css`, il foglio di sistema, per un
motivo che era solo cronologico: la home è stata costruita per prima e i suoi
stili sono finiti nelle fondamenta mentre le fondamenta venivano scritte.
Il risultato era che le altre diciassette pagine si scaricavano 12,7 KB di
regole che su di loro non potevano agire mai, e che `chi-siamo.php` — l'altra
pagina con un'impaginazione su misura — aveva un foglio suo mentre la home no.
Ora il criterio è uno per tutte: le fondamenta contengono il SISTEMA (griglia,
campi di colore, token, tipografia, componenti condivisi), ogni pagina o
famiglia di pagine contiene la propria IMPAGINAZIONE. Qui dentro non c'è
nessuna ridefinizione di componente: solo posizionamento sulla griglia,
campi di colore e velature, cioè ciò che è proprio di questa pagina.
Va caricato DOPO `impaginato.css`, da cui eredita griglia, token e componenti.
Restano nelle fondamenta, di proposito, due componenti che nascono qui ma
sono condivisi: `.fact` (usato anche da chi-siamo) e `.imp-person` (usato
anche da persone). E `.s-proof .lnk` resta raggruppato con
`.pg-block--stone .lnk`: separarli duplicherebbe la stessa dichiarazione in
due fogli, cioè il difetto che questa riorganizzazione elimina.
Le otto sezioni, nell'ordine in cui si leggono: apertura, prodotti,
chi siamo, settori, servizi, persone, prove, chiusura.
=========================================================================== */
/* Eccezione per la sola apertura: qui accanto c'è il pulsante pieno, e due
elementi arancioni affiancati si contendevano lo sguardo. Il collegamento
resta bianco — il filetto a 2px basta a dichiararlo tale — e la gerarchia
torna leggibile: prima il pulsante, poi il collegamento. */
.impaginato .s-hero .lnk--on-ink { color: var(--on-ink); border-color: var(--on-ink); }
.impaginato .s-hero .lnk--on-ink:hover { color: var(--imp-orange-lite); border-color: var(--imp-orange-lite); }
/* ===========================================================================
2.1 APERTURA — tre campi verticali da pavimento a soffitto
=========================================================================== */
.impaginato .s-hero {
min-height: var(--hero-h);
z-index: 2; /* la vela sporge nei Prodotti: deve stare sopra */
}
/* A tutta larghezza: la fotografia (z-index 2) ci si appoggia sopra, e la
divisione verticale dell'hero è il bordo della foto stessa.
Prima l'inchiostro finiva a col 6 e fra campo e foto restavano 231px di
carta bianca, chiusi su quattro lati e vuoti: si leggevano come
un'immagine non caricata, non come una gola fra due campi. Fermando
l'inchiostro sulla linea della foto restavano comunque 19px di gutter
bianco in mezzo — l'unica cucitura chiara della pagina, dove tutti gli
altri campi si toccano direttamente. Un'eccezione sola non è un sistema.
Come effetto il titolo, che arriva esattamente a col 6, non è più a filo
del bordo del campo scuro. */
.impaginato .s-hero .field--ink { grid-column: bleed-start / bleed-end; }
.impaginato .hero-body {
/* 7 colonne e non 5: con il claim su tre righe, a 5 colonne le righe
rientrate avevano 445px contro i ~531px richiesti dal testo e si
spezzavano tutte in due. Fino a col 8, cioè la linea dove comincia la
fotografia, ogni riga del claim sta su una riga sola. */
grid-column: col 1 / col 8;
grid-row: 1;
/* margine inferiore stretto: l'inchiostro NON si interrompe fra testata e
Prodotti, sono una sola massa. Uno stacco largo qui contraddiceva la
scelta — erano 247px misurati fra l'ultima riga dell'hero e la prima
dei Prodotti, come se fossero due sezioni distinte. */
padding-block: clamp(96px, 16vh, 180px) var(--s1);
align-self: center;
}
.impaginato .hero-body .tick { margin-bottom: 26px; }
/* misura calibrata sulle 6 colonne disponibili: sopra i ~3.6rem le righe
rientrate vanno a capo e il titolo si sfilaccia in cinque righe */
.impaginato .hero-body h1 {
color: var(--on-ink);
font-size: clamp(2.1rem, 3.4vw, 3.6rem);
margin-bottom: 26px;
}
/* Le righe restano righe forzate (il claim non deve andare a capo dove
capita) ma partono TUTTE dallo stesso asse: il rientro di una colonna
sulle righe dopo la prima lasciava il bordo sinistro frastagliato e
leggeva come disordine, non come impaginazione. */
.impaginato .hero-body h1 .l { display: block; }
.impaginato .hero-body h1 i { font-style: normal; color: var(--imp-orange); }
/* Non è una didascalia del titolo: è la frase che dice cosa facciamo, ed è
l'unico testo esteso dell'apertura. A 1.06rem e al 68% di opacità si
leggeva come nota a piè di titolo. Più corpo, più inchiostro e una misura
più larga la rimettono al secondo posto della gerarchia, subito sotto il
claim, senza avvicinarla al titolo. */
.impaginato .hero-lead {
/* 38ch e non 44: a misura più larga la prima riga arrivava a includere
"e ti" e spezzava la frase su una congiunzione. A 38ch rompe dopo
"realtà", che è il confine naturale. */
max-width: 38ch;
font-size: clamp(1.12rem, 1.5vw, 1.32rem);
line-height: 1.55;
color: rgba(244, 241, 236, .86);
margin-bottom: 34px;
}
.impaginato .hero-actions {
display: flex;
align-items: center;
gap: 26px;
flex-wrap: wrap;
}
/* riga colophon: i tre dati verificati, su una riga. Nessuna stat-card,
nessun numerone, nessun finto grafico. */
.impaginato .colophon {
margin-top: var(--s3);
/* Nessun filetto sopra: a piena larghezza entrava nella fotografia e
tagliava le persone, e accorciarlo lo faceva sembrare troncato. I tre
dati si reggono da soli — è lo stacco verticale a separarli dalle
azioni, non una riga. Via anche il padding-top, che serviva solo a
staccare il testo dal filetto. */
font-size: var(--fs-etichetta);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--on-ink-2);
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
}
.impaginato .colophon i { font-style: normal; color: var(--imp-orange); }
/* La fotografia dell'apertura: il fondo della sezione, non un campo accanto
al titolo. In posizione assoluta come i campi di colore: un'immagine in
flusso imporrebbe la propria altezza intrinseca alla riga e trascinerebbe
giù tutta la sezione. Così l'altezza la decide il testo, e `cover` ritaglia. */
/* selettore con `.pg >` per pareggiare la specificità della regola generale
sul contenuto (che imporrebbe position: relative) e vincere per ordine */
.impaginato .pg > .hero-photo {
position: absolute;
/* A tutta larghezza dietro il testo: la fotografia non è più il terzo
campo verticale ma il fondo dell'apertura. La leggibilità del titolo
la garantisce la velatura su `.s-hero .field--ink`, non il fondo pieno. */
grid-column: bleed-start / bleed-end;
left: 0;
top: 0;
/* Altezza ESPLICITA, non `bottom: 0`: su un elemento sostituito (![]()
)
con height:auto vince la dimensione intrinseca e gli inset verticali
vengono ignorati — la foto sfondava dentro i Prodotti.
Niente più sporgenza di 96px: serviva quando la foto era il campo di
destra e doveva legare le due sezioni. A tutta larghezza quella striscia
mostrava solo una banda di cielo chiaro sotto il testo. */
width: 100%;
height: 100%;
object-fit: cover;
/* Il file servito (1276×625) è già tagliato appena sopra il tavolo del
buffet, che portava con sé il marchio di un'altra azienda. La sua
proporzione (2.04) è di poco superiore a quella dell'apertura, quindi
`cover` mostra tutta l'altezza e rifila una trentina di pixel per lato:
qui basta centrare. */
object-position: 50% 50%;
filter: saturate(.92) contrast(1.04);
/* Sotto la velatura (z-index 1) e sotto il testo: è il fondo, non un campo. */
z-index: 0;
}
/* Velatura sull'apertura: il campo d'inchiostro non è più un rettangolo
pieno accanto alla foto ma una sfumatura sopra di essa — densa a sinistra,
dove sta il testo, trasparente a destra, dove la fotografia deve vedersi.
È questa velatura a tenere il titolo sopra il 4.5:1 di contrasto: senza,
il bianco caldo finirebbe su cielo chiaro. */
/* Due strati sovrapposti. Il primo chiude l'apertura sul fondo: la fotografia
finiva di netto contro il campo pieno dei Prodotti e quella riga orizzontale
contraddiceva il principio dichiarato in cima al foglio — testata, apertura
e Prodotti sono UNA massa d'inchiostro, non tre fasce impilate. Spegnendo la
foto nell'inchiostro il confine sparisce. La sfumatura parte all'82%, non
prima: più in alto avrebbe mangiato le persone, che è ciò che la fotografia
deve mostrare. */
.impaginato .s-hero .field--ink {
background:
linear-gradient(to bottom,
rgba(30, 37, 44, 0) 82%,
rgba(30, 37, 44, 1) 100%),
linear-gradient(100deg,
rgba(30, 37, 44, .97) 0%,
rgba(30, 37, 44, .95) 38%,
rgba(30, 37, 44, .72) 62%,
rgba(30, 37, 44, .42) 100%);
z-index: 1;
}
.impaginato .s-hero .hero-body { z-index: 2; }
/* ===========================================================================
2.2 PRODOTTI — campo pieno saldato all'hero; le 4 soluzioni sono un indice
Sale in seconda posizione: è ciò che l'azienda vende.
=========================================================================== */
.impaginato .s-prod {
/* s2 in apertura e non s4: continua la massa d'inchiostro della testata,
non apre una sezione nuova. s3 in chiusura resta, perché sotto c'è il
salto più forte della pagina — dall'inchiostro alla carta. */
padding-block: var(--s2) var(--s3);
z-index: 1;
}
.impaginato .s-prod .field--ink { grid-column: bleed-start / bleed-end; }
/* Niente etichetta di corsia: a differenza dei Settori, qui c'è già un
eyebrow + titolo che identificano la sezione da soli. La testata riparte
dalla stessa base delle righe prodotto sotto: un solo asse per tutta
la sezione. */
.impaginato .prod-head { grid-column: col 1 / col 9; grid-row: 1; }
.impaginato .prod-head .mini-label { color: var(--imp-orange-lite); display: block; margin-bottom: 14px; }
.impaginato .prod-head h2 { color: var(--on-ink); margin-bottom: 18px; }
/* 1.12rem: è la misura del testo introduttivo di fascia in tutto il sito
(`.pg-intro-body p`, `.pg-hero-body .lead`, `.cs-mission-body p`). Prima
qui era .98 e altrove 1.02, tre valori per la stessa funzione. */
.impaginato .prod-head p { max-width: 44ch; color: var(--on-ink-2); font-size: var(--fs-intro); }
.impaginato .prod-list { grid-column: col 1 / c-end; grid-row: 2; margin-top: var(--s2); }
/* Quattro righe identiche: la parità è garantita per costruzione.
In quattro celle di una griglia una finisce sempre per pesare più delle
altre; in quattro righe con identico span, padding e corpo, no. */
.impaginato .prod-row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--cgap);
border-top: 1px solid var(--rule-dark);
padding-block: 44px;
}
.impaginato .prod-row:last-child { border-bottom: 1px solid var(--rule-dark); }
.impaginato .prod-row .name { grid-column: 1 / 5; }
/* 6/13 e non 6/12: con 12 tracce locali, fermarsi a 12 lascia l'ultima
traccia (~90-130px, in base alla larghezza) sempre vuota, irraggiungibile
da qualunque testo — un bug di griglia, non il max-width che segue.
Trovato su PS-Extractor, dove le descrizioni più lunghe lo rendevano
visibile; qui la stessa riga esisteva da prima con lo stesso difetto. */
.impaginato .prod-row .desc { grid-column: 6 / 13; }
.impaginato .prod-row .mini-label { color: var(--on-ink-2); display: block; margin-bottom: 8px; }
.impaginato .prod-row .name b {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.75rem;
letter-spacing: -0.02em;
color: var(--on-ink);
}
/* Nessun max-width: la cella (6/13, ~675px) è già la misura pensata per
questo testo. Un tetto in caratteri sopra una colonna che la griglia ha
già dimensionato è un doppio vincolo — e lo spazio che il secondo lascia
inutilizzato dentro la cella si legge come errore, non come scelta. */
/* 1rem: misura unica del corpo di riga/scheda in tutto il sito, un gradino
sotto l'introduzione di fascia (1.06). Prima questa famiglia stava fra .92
e .98 a seconda del foglio — quattro valori per la stessa funzione. */
.impaginato .prod-row .desc {
font-size: var(--fs-corpo);
color: var(--on-ink-2);
}
/* La regola `.prod-row:hover .name b` è stata rimossa: da quando le righe sono
famiglie e non prodotti, la riga non è più un link — contiene i link ai
singoli prodotti, e un link dentro un link è HTML non valido. Tenere quel
`:hover` avrebbe segnalato una cliccabilità inesistente. Per la stessa
ragione il nome della famiglia non ha più `transition` sul colore: non
cambia stato.
La riga dei nomi dentro la descrizione. Vive qui e non nella colonna del
nome perché la colonna è larga 398px e a 24px tre nomi di prodotto ci
andrebbero a capo; nella descrizione, larga 710px, stanno su una riga. */
.impaginato .prod-row .desc p + p { margin-top: 14px; }
.impaginato .prod-names {
font-size: 1.5rem;
color: var(--on-ink-2);
}
/* Sottolineatura tenue e non colore pieno: sono tre link ravvicinati su fondo
d'inchiostro, e tre parole arancioni in fila si leggerebbero come un menu. */
.impaginato .prod-names a {
color: var(--on-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(244, 241, 236, .35);
transition: color .18s ease, text-decoration-color .18s ease;
}
.impaginato .prod-names a:hover {
color: var(--imp-orange-lite);
text-decoration-color: var(--imp-orange-lite);
}
.impaginato .prod-more { grid-column: col 1 / col 5; grid-row: 3; margin-top: var(--s2); }
/* ===========================================================================
2.3 CHI SIAMO — carta nuda, coppia sfalsata, diagonale di bianco
=========================================================================== */
/* s3 in apertura, non il valore massimo della scala. Qui si passa
dall'inchiostro pieno alla carta bianca, e il cambio di colore annuncia il
confine da solo: nessuno può non accorgersene. Lo spazio serve come segnale
dove non ci sono altri segnali — dopo un cambio di superficie basta quanto
occorre per non incollare il titolo al bordo del colore. Con s5 (224px)
erano due segnali per lo stesso messaggio, pagati con un vuoto.
s1 in chiusura: i Settori sotto sono una battuta compatta che deve stare
addosso, non una sezione a sé. */
.impaginato .s-about { padding-block: var(--s3) var(--s1); }
/* Testata su un solo asse, come .prod-head, .proof-head e .close-body: il
contrasto lo fa la MISURA (20ch il titolo, 44ch il testo), non un vuoto
orizzontale. Spezzare titolo e descrizione su due colonne le fa leggere
come due blocchi di pari peso, mentre la descrizione è subordinata al
titolo; e lo spazio in mezzo resta un buco senza nulla che lo giustifichi.
L'asimmetria della pagina nasce da DOVE è posata la testata (col 1 qui e
in Prodotti, col 5 in Prove, col 8 in Persone), non dallo spezzarla.
L'asimmetria di questa sezione la danno i tre punti in scala discendente. */
.impaginato .about-head { grid-column: col 1 / col 7; grid-row: 1; }
.impaginato .about-h2 { max-width: 20ch; margin-bottom: 24px; }
.impaginato .about-lead {
max-width: 44ch;
font-size: var(--fs-intro);
color: var(--imp-text-mid);
}
/* I tre punti su scala discendente: apre una diagonale di bianco sotto.
Passo s2 e non s3: con s3 il terzo punto scendeva di 303px e la diagonale
scavava un vuoto che spezzava la lettura invece di guidarla. La diagonale
resta, con lo stesso rapporto 1-2-3, su un passo più corto. */
.impaginato .f-01 { grid-column: col 1 / col 5; grid-row: 2; margin-top: var(--s2); }
.impaginato .f-02 { grid-column: col 5 / col 9; grid-row: 2; margin-top: calc(var(--s2) * 2); }
.impaginato .f-03 { grid-column: col 9 / col 13; grid-row: 2; margin-top: calc(var(--s2) * 3); }
/* frase manifesto: recupera la statement-band, che come sezione sparisce.
Era su col 2, unico elemento della pagina su quell'ascissa: un rientro di
~100px rispetto alla testata e al punto 01, che nessun altro elemento
accompagna. Un asse usato da un elemento solo non si legge come scelta,
si legge come disallineamento — stesso difetto già corretto nella testata
Prodotti e nel lead qui sopra. Torna sull'asse della sezione.
Non centrata, non in corsivo: il contrasto è di peso e valore. */
.impaginato .manifesto {
grid-column: col 1 / col 9;
grid-row: 3;
margin-top: var(--s3);
font-family: var(--font-display);
font-size: clamp(1.2rem, 2vw, 1.7rem);
line-height: 1.4;
font-weight: 400;
color: var(--imp-gray);
text-wrap: balance;
}
.impaginato .manifesto b { color: var(--ink); font-weight: 600; }
/* Nota: qui era previsto il simbolo del marchio come segno tipografico di fine
paragrafo. Rimosso dopo averlo visto reso: il file disponibile era verticale
(172x466), quindi a un'altezza da testo diventava una scheggia di ~8px che
legge come uno sporco, non come un segno. Servirebbe una versione
orizzontale del marchio, disegnata per questo scopo. Il file è stato
eliminato nella pulizia dei materiali non usati. */
/* ===========================================================================
2.4 SETTORI — la battuta compatta: ~150px dopo ~1100px di aria.
È il ritmo, non il colore, a scandire la lettura.
Nessun cambio di fondo rispetto a Chi siamo: la riga esiste per i filetti.
=========================================================================== */
.impaginato .s-sectors { padding-block: var(--s1); }
.impaginato .s-sectors .rail-label { grid-row: 1; align-self: center; }
/* Colonne `1fr` che riempiono tutta la larghezza: con le parole allineate a
sinistra e i filetti che arrivavano fino a c-end, un quarto della fascia
restava righe vuote e sembrava incompleta.
Nessun filetto verticale e nessun fondo sul contenitore, ed è la
combinazione che rende la cosa robusta:
- senza fondo, le celle vuote di un'ultima riga parziale sono INVISIBILI
(il rettangolo grigio nasceva solo dal fondo che traspariva dai gap);
- senza `border-left` sui non c'è il filetto spurio al primo elemento
di ogni riga dopo la prima, che `:first-child` non può prevedere perché
non sa dove la griglia va a capo.
Quindi il numero di settori non è cablato da nessuna parte: aggiungerne o
toglierne uno è solo aggiungere o togliere un , a qualunque larghezza. */
.impaginato .sect-row {
grid-column: col 1 / c-end;
grid-row: 1;
display: grid;
/* Numero di colonne fisso, non `auto-fit`: con minmax(170px, 1fr) intorno
ai 1185px la griglia scende a 5 colonne e il sesto settore resta solo su
una seconda riga. Fissare le colonne NON reintroduce i problemi di prima,
che venivano dai bordi e dal fondo, non dal numero: un settore in più
scende semplicemente a riga nuova, senza filetti spuri né celle grigie. */
grid-template-columns: repeat(6, minmax(0, 1fr));
column-gap: var(--cgap);
row-gap: 18px;
padding-block: 30px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
/* 1,25rem e non di più: a 1440px le colonne sono ~190px e "Studi
professionali" a 1,35rem andava a capo. 1,3rem entra con zero margine,
1,25 lascia respiro per un nome di settore più lungo. */
.impaginato .sect-row li {
font-size: clamp(1rem, 1.4vw, 1.25rem);
font-weight: 600;
color: var(--ink);
}
/* ===========================================================================
2.5 SERVIZI — l'indice, con metà pagina vuota. Il titolo resta fermo
mentre l'elenco gli scorre accanto.
=========================================================================== */
/* s1 in apertura: i Settori sopra sono una battuta, non una sezione, e devono
restare attaccati. s4 in chiusura: sotto si passa alla fotografia a piena
superficie, il secondo salto di registro della pagina. */
.impaginato .s-serv { padding-block: var(--s1) var(--s4); }
/* `.pg > .serv-aside` e non solo `.serv-aside`: la regola generale
`.impaginato .pg > *:not(.field)` (che imposta position:relative su tutto
il contenuto) ha specificità (0,3,0) — tre classi, perché l'argomento
di :not() conta. `.impaginato .serv-aside` da solo è (0,2,0) e perde,
quindi lo sticky non si applicava mai. Stesso principio già usato per
le due fotografie in posizione assoluta. */
.impaginato .pg > .serv-aside {
grid-column: col 1 / col 4;
grid-row: 1;
position: sticky;
top: calc(92px + var(--s1));
align-self: start;
/* Vincolo: MAI un fondo, un bordo o un'ombra su questo elemento.
Nell'istante in cui ne prende uno diventa una sidebar da applicazione. */
background: none;
border: 0;
box-shadow: none;
}
/* titolo alto e stretto: si impila in righe corte, gesto da rivista */
.impaginato .serv-aside h2 { max-width: 16ch; margin-bottom: 26px; }
/* Fino a c-end: l'inserto fotografico che occupava le ultime tre colonne è
stato tolto, e lasciarle vuote avrebbe fatto leggere l'angolo come un buco.
È lo stesso assetto che il foglio adottava già sotto i 1080px. */
.impaginato .serv-list { grid-column: col 5 / c-end; grid-row: 1; }
/* Via la colonna da 44px che ospitava il numero: la riga è definita dal
filetto, come le righe prodotto. Il peso lo porta il nome del servizio,
non un segno in più — stessa scelta del manifesto e della fascia settori,
dove la presenza viene dal corpo del carattere e non da un ornamento.
Niente icone qui: questi quattro servizi non hanno un'iconografia propria
e finirebbero sui pittogrammi generici del settore (cilindro, istogramma,
ingranaggio, nodi), che è il vocabolario da cui questa pagina esce. */
/* Riga a due colonne — nome a sinistra, descrizione a destra — come le righe
prodotto (`.prod-row`) e le righe delle pagine interne (`.pg-row`): stessi
assi 1/5 e 6/13, così una riga si legge uguale su qualunque pagina. Prima
il nome stava sopra la descrizione e, su una colonna larga, la riga
risultava alta e sbilanciata a sinistra. */
.impaginato .serv-row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--cgap);
border-top: 1px solid var(--rule);
padding-block: 34px;
}
.impaginato .serv-row h3 {
grid-column: 1 / 5;
font-size: var(--fs-riga);
margin-bottom: 0;
}
/* Nessun max-width: come già documentato per `.prod-row .desc`, è la cella
di griglia a dare la misura, e un secondo tetto in caratteri sopra una
colonna già dimensionata lascerebbe spazio vuoto dentro la cella. */
/* `--fs-intro` e non `--fs-corpo`: stessa misura delle descrizioni di famiglia
nei Prodotti, che sono l'altro elenco di questa pagina. ATTENZIONE alla
larghezza: questa colonna è 415px, quella dei Prodotti 710px — lo stesso
corpo si comporta diversamente, e alzandolo qui due delle quattro
descrizioni sono passate a 4 righe. Sono state accorciate per tornare a 3:
vedi il vincolo di lunghezza documentato sopra `.serv-list` in index.php. */
.impaginato .serv-row p {
grid-column: 6 / 13;
font-size: var(--fs-corpo);
max-width: none;
color: var(--imp-text-mid);
}
/* ===========================================================================
2.6 PERSONE — la fotografia come superficie.
Divisione verticale fotografia | carta. Nessun testo sopra la foto,
quindi zero problemi di contrasto e zero veli scuri.
=========================================================================== */
.impaginato .s-people { min-height: var(--people-h); }
/* come la vela: superficie in posizione assoluta, così l'altezza della
sezione la decidono il testo e il min-height, non l'immagine */
.impaginato .pg > .people-photo {
position: absolute;
grid-column: bleed-start / col 7;
left: 0;
top: 0;
/* come sopra: altezza esplicita, non inset verticali */
width: 100%;
height: 100%;
object-fit: cover;
/* esclude lo stand di terzi sul bordo destro e tiene in quadro le persone */
object-position: 42% 50%;
z-index: 0;
}
.impaginato .people-body {
/* fino a c-end: a 5 colonne la riga persona (foto 88px + testo) si
strozzava e le righe andavano a capo ogni due parole */
grid-column: col 8 / c-end;
grid-row: 1;
align-self: center;
padding-block: var(--s3);
}
.impaginato .people-body h2 { margin-bottom: 18px; }
/* `--fs-intro` come TUTTI gli altri sommari di sezione della pagina
(`.prod-head p`, `.proof-head p`): era l'unico rimasto a `--fs-corpo`, cioè
un gradino sotto, e la sezione Persone si leggeva più debole delle altre
senza che ci fosse una ragione. */
.impaginato .people-body .lead {
max-width: 40ch;
font-size: var(--fs-intro);
color: var(--imp-text-mid);
margin-bottom: var(--s2);
}
.impaginato .people-more { margin-top: var(--s2); }
/* ===========================================================================
2.7 PROVE — certificazioni. Il campo con l'angolo.
La mossa decisiva contro le fasce: il campo di colore NON tocca il bordo
sinistro, quindi ha un angolo superiore sinistro visibile in mezzo alla
pagina — geometria impossibile in un sistema a fasce.
Certificazioni e clienti erano fuse in un'unica sezione: la testata diceva
solo "Certificazioni" ma il campo pietra continuava a coprire anche i loghi
clienti, un tipo di prova diverso (referenze, non conformità) annunciato
solo da una piccola etichetta. Due concetti non si mischiano perché
condividono un colore di sfondo. Ora sono due sezioni: questa finisce con
le certificazioni, la prossima (2.7b, .s-clients) è dei clienti, su carta. */
.impaginato .s-proof {
/* s2 su entrambi i lati: qui i cambi di superficie sono minori — dalla
fotografia alla pietra sopra, dalla pietra alla carta sotto — e non
reggono lo stesso stacco dei due salti principali. s4 in apertura
serviva anche a far spazio alla piastra dei marchi, che non c'è più. */
padding-block: var(--s2);
z-index: 1;
}
/* col 2 e non col 4: l'angolo interno è il gesto che definisce la sezione, ma
a col 4 il bianco a sinistra era il 32% della pagina a 1425px e cresceva in
proporzione sugli schermi larghi (665px a 2185px). Un vuoto di quelle
dimensioni non si legge come scelta, si legge come sezione spostata. A col 2
il bianco scende a ~17%: margine ampio, angolo intatto. */
.impaginato .s-proof .field--stone { grid-column: col 2 / bleed-end; }
/* Il contenuto resta una colonna dentro il campo, che è ciò che giustifica il
rientro, e si avvicina all'asse col 1 del resto della pagina. */
.impaginato .proof-head { grid-column: col 3 / col 8; grid-row: 1; }
.impaginato .proof-head .mini-label { display: block; margin-bottom: 14px; }
.impaginato .proof-head h2 { margin-bottom: 18px; }
.impaginato .proof-head p { max-width: 44ch; color: var(--imp-text-mid); font-size: var(--fs-intro); margin-bottom: 26px; }
/* La piastra bianca dei marchi è stata rimossa: stava nell'angolo in alto a
destra mentre i nomi delle stesse tre certificazioni erano 400px più in
basso, quindi i marchi galleggiavano senza legame col testo. Ora ogni
marchio sta nella riga che gli corrisponde (vedi .cert-rows).
Con la piastra se ne va anche la tacca sul bordo superiore del campo: era
un gesto secondario, e in cambio la sezione perde una duplicazione. La
proprietà che la definisce — l'angolo interno a sinistra — resta. */
/* Fino a c-end e non a col 10: la riga clienti qui sotto chiude a c-end,
quindi fermarsi a col 10 lasciava i filetti delle certificazioni 400px più
corti, con due margini destri nella stessa sezione. Un asse sinistro e un
asse destro per tutto il blocco.
Tre colonne affiancate, non tre righe impilate: erano 331px per tre soli
marchi con una riga di testo ciascuno, contro i ~112px con cui la riga
clienti subito sotto ne mette cinque — stesso tipo di contenuto (immagine
piccola + poche parole), tre volte il peso. Un solo filetto sopra tutto il
blocco, non uno per marchio: tre filetti per tre marchi leggevano come una
tabella, non come un gruppo. */
.impaginato .cert-rows {
grid-column: col 3 / c-end;
grid-row: 2;
margin-top: var(--s2);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--cgap);
border-top: 1px solid var(--rule-strong);
padding-block: 22px;
}
/* `> div` e non `div`: il marchio e il blocco nome+significato sono affiancati
(flex), ma nome e significato fra loro sono impilati — un'unica riga con
tutti e tre appesi in orizzontale non ci sta in un terzo di colonna. Se il
selettore prendesse anche il div interno lo renderebbe un'altra riga flex
orizzontale, vanificando l'impilamento. */
.impaginato .cert-rows > div {
display: flex;
align-items: center;
gap: 16px;
}
/* Altezze normalizzate PER MARCHIO, non un'altezza unica: Kiwa è un rettangolo
con bordo, gli altri due sono cerchi dentro un quadrato, e un cerchio alla
stessa altezza di un rettangolo si legge più piccolo. Stessa logica già
usata per i loghi dei clienti.
60-68px e non 42-48: sotto i ~60px la scritta circolare del SIS CERT e il
nome Synesgy diventano macchie, e un marchio che non si riconosce non serve
a niente. È la misura che avevano sulla piastra — invariata anche qui, a
cambiare è solo la disposizione, non la dimensione dei marchi. */
.impaginato .cert-rows img { width: auto; display: block; flex: none; }
.impaginato .cert-rows .m-9001 { height: 60px; }
.impaginato .cert-rows .m-27001 { height: 68px; }
.impaginato .cert-rows .m-esg { height: 68px; }
.impaginato .cert-rows b {
display: block;
font-family: var(--font-display);
font-size: var(--fs-sottotitolo);
font-weight: 600;
color: var(--ink);
}
.impaginato .cert-rows span { display: block; font-size: var(--fs-nota); color: var(--imp-gray); margin-top: 2px; }
/* ===========================================================================
2.7a-bis PARTNERSHIP — su carta, stesso asse col 3 del blocco sopra e
della fascia clienti sotto, e STESSA FORMA di quest'ultima: etichetta,
filetto, loghi. Le due sezioni sono deliberatamente gemelle.
Il primo impianto era diverso — testo a sinistra e marchi a fianco, per
distinguere i due blocchi — e non ha funzionato, per due ragioni distinte.
La prima è geometrica: i marchi occupano 462px in riga, il testo si fermava
al suo `max-width: 44ch` che in pixel non si restringe, la colonna dei loghi
sì; a 1280 l'area scendeva a 445 e lo stacco dal testo a 18px. La seconda,
più importante, è di ritmo: quel paragrafo era l'unico brano di prosa di
tutto il tratto certificazioni-clienti e spezzava la cadenza
etichetta/loghi che la fascia sotto stabilisce subito dopo.
A distinguere i due blocchi bastano l'etichetta e il fatto che il marchio
InfoCamere dichiari da sé il rapporto fra le due aziende. Con la forma
condivisa un partner nuovo entra senza toccare il CSS.
VINCOLO SULLE IMMAGINI: i due PNG hanno il fondo BIANCO OPACO, senza alfa,
a differenza dei sette loghi clienti. Sulla carta (--paper: #FFF) il
rettangolo è invisibile, ma dev'essere bianco ESATTO: una prima conversione
lasciava il fondo a 242-252 e su carta si vedeva un rettangolo grigio
intorno a InfoCamere, con l'82% dei pixel fuori posto. Se si rigenera un
file, dopo la quantizzazione a tavolozza va forzato il bianco puro.
E questo blocco NON si può spostare su `--stone` o su inchiostro senza prima
ripulire i file: comparirebbero due riquadri bianchi. */
.impaginato .s-partner { padding-block: var(--s2) var(--s1); }
.impaginato .partner-label { grid-column: col 3 / col 6; grid-row: 1; }
/* Flex e non griglia a colonne uguali come i clienti: là le celle uguali
servono a mettere in ordine sette marchi, qui due in celle da un quarto
lascerebbero mezza riga vuota. I loghi stanno alla loro larghezza naturale e
vanno a capo da soli. Il resto della cornice — margine, filetto, respiro
interno — è identico a `.cli-row`, ed è ciò che rende i due blocchi gemelli. */
.impaginato .partner-row {
grid-column: col 3 / c-end;
grid-row: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 34px;
row-gap: 22px;
/* margine e respiro nelle scorciatoie, non in `margin-top`/`padding-top`
separati: un `margin: 0` successivo aveva già azzerato una volta un
`margin-top` dichiarato sopra, e lo stacco era finito a zero. */
margin: 16px 0 0;
padding: 26px 0;
border-top: 1px solid var(--rule);
list-style: none;
}
.impaginato .partner-row li { display: flex; align-items: center; }
/* Stesso trattamento dei loghi clienti — grigio, schiarito, colore al passaggio
del mouse — perché sono la stessa classe di oggetto e trattarli diversamente
introdurrebbe una gerarchia che non c'è. */
.impaginato .partner-row img {
max-width: 100%;
width: auto;
object-fit: contain;
filter: grayscale(1);
/* Come nella fascia clienti: l'opacità passa da una variabile impostata sul
, così le tarature per logo non possono scavalcare la regola di :hover.
Qui il difetto non si vedeva soltanto perché la correzione di InfoCamere
vale 1, lo stesso valore che l'hover imposta. */
opacity: var(--logo-op, .78);
transition: filter .25s ease, opacity .25s ease;
}
.impaginato .partner-row img:hover { filter: grayscale(0); opacity: 1; }
/* InfoCamere a opacità piena, e non è un'incoerenza: serve a pareggiare il
RISULTATO a schermo, che è la cosa che si guarda. I due marchi non hanno la
stessa densità all'origine — register.it è quasi nero, InfoCamere è blu più
grigio con l'albero a punti — e dopo `grayscale(1)` il grigio medio
dell'inchiostro stava a 124 contro 55: InfoCamere era il logo più chiaro di
tutti e nove della pagina, e affiancato a register.it si leggeva sbiadito.
Metà della correzione sta nel file, dove la copertura è stata alzata con una
curva che porta il grigio medio a 101 lasciando il blu del marchio
riconoscibile — RGB(33,78,147) diventa (24,57,108), non nero. L'altra metà
è qui: composto sulla carta bianca, register.it al 78% rende 99, e InfoCamere
a opacità piena rende 101. Pari.
Un filtro CSS non era la strada: `brightness()` ingrigirebbe anche il fondo
bianco opaco del PNG, e `contrast()` non muove InfoCamere perché la sua media
cadeva esattamente sul punto di rotazione del filtro. */
/* Bersaglio 126 come la fascia clienti, non un valore proprio: sono due blocchi
gemelli e affiancati, e tenerli su densità diverse avrebbe rifatto in grande
lo stesso difetto che si stava correggendo in piccolo dentro ogni fascia.
Prima stavano a 99 e 101, cioè venticinque punti più scuri dei clienti.
Qui `brightness` non è utilizzabile — fondo bianco opaco, vedi il commento
nella fascia clienti — quindi la leva è la sola opacità, che per SCHIARIRE
basta sempre.
Nota su come ci si è arrivati: il PNG di InfoCamere è stato scurito da 124 a
101 di grigio quando il bersaglio era «pari con register.it», che stava a 99.
Col bersaglio finale a 126 quel lavoro sul file non sarebbe stato necessario —
l'opacità da sola bastava. Non lo si rifà: il file va bene com'è e lascia più
margine di taratura. */
.impaginato .partner-row .p-infocamere { --logo-op: .84; }
.impaginato .partner-row .p-register { --logo-op: .64; }
/* PC Cube è passato qui dalla fascia clienti (è un socio di PrimeSail, non
un cliente): stessa taratura già misurata lì per lo stesso file, perché
il bersaglio di grigio (126) è identico nelle due fasce gemelle. */
.impaginato .partner-row .p-pccube { --logo-op: .60; }
.impaginato .partner-row .p-pccube img { max-height: 34px; }
.impaginato .partner-row a { display: flex; align-items: center; }
.impaginato .partner-row a:focus-visible { outline: 2px solid var(--imp-orange); outline-offset: 3px; }
/* Un solo tetto per entrambi, senza altezze dedicate: qui i due marchi sono
già bilanciati di per sé. Misurato — InfoCamere 18,4% di copertura con
rapporto 5,78:1, Register.it 19,1% con 4,91:1 — a parità di altezza
l'inchiostro sta a 1,13x. È il motivo per cui si usa il marchio orizzontale
e non il lockup impilato: quello, con rapporto 1,66:1, a 44px stampava 951
contro 1818, scarto 1,91x, e chiedeva 56px solo per stare in pari.
A 40px: InfoCamere 1702, Register.it 1501, dentro l'intervallo della fascia
clienti qui sotto (1486-2120). Il metodo è documentato là.
IL TETTO NON SI ABBASSA SOTTO I 36px: nel marchio InfoCamere le parole
«Distributore Ufficiale di» stanno al 30% dell'altezza del file, e più in
basso smettono di leggersi. È un'informazione, non un ornamento. */
.impaginato .partner-row img { max-height: 40px; }
/* ===========================================================================
2.7b CLIENTI — sezione propria, su carta. Stesso asse (col 3) delle
Certificazioni sopra, per continuità, ma senza campo di colore: nessuna
ragione di contenuto per continuare la pietra fin qui.
=========================================================================== */
.impaginato .s-clients { padding-block: var(--s1) var(--s2); }
.impaginato .cli-label { grid-column: col 3 / col 6; grid-row: 1; }
/* Nessun filetto verticale tra i loghi, per tre ragioni che convergono.
1) Allineamento: cinque celle uguali dentro uno span di otto colonne cadono
a colonna 6,6 / 8,2 / 9,8 / 11,4 — posizioni frazionarie, che non possono
coincidere con nessuna linea della griglia. Uno di quei divisori finiva a
42px dal bordo sinistro del gradino d'inchiostro della chiusura (che sta
su col 10, allineato alla piastra): due bordi verticali quasi allineati,
che si leggono come errore.
2) Cinque loghi in celle rigate sono l'ennesima tabella.
3) Fragilità: servivano `li:first-child` più `nth-child(4)` e `nth-child(n+4)`
nel blocco tablet per rattoppare i bordi quando i loghi andavano a capo.
Stesso meccanismo rotto già rimosso dalla fascia settori: aggiungere o
togliere un cliente non richiede più di toccare il CSS.
Resta il filetto orizzontale, che è ciò che tiene la riga come fascia. */
.impaginato .cli-row {
grid-column: col 3 / c-end;
grid-row: 2;
margin-top: 16px;
display: grid;
/* Quattro colonne, non cinque: con sette clienti cinque celle darebbero una
seconda riga piena al 40%, che si legge come errore. Quattro danno 4+3, con
i centri delle colonne condivisi dalle due righe — è quell'allineamento a
tenere insieme la fascia, non la misura del singolo logo (vedi sotto). In più
le celle salgono da 192 a 242px. */
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--cgap);
/* 26px, non 10: con una riga sola i 10px non si vedevano nemmeno, con due
righe tenevano i loghi troppo vicini per leggersi come righe distinte.
26 è il valore che le righe della pagina già usano per lo stacco interno
(vedi l'indice di densità in impaginato.css): non è un numero nuovo. */
row-gap: 26px;
padding-block: 26px;
border-top: 1px solid var(--rule);
}
.impaginato .cli-row li {
display: flex;
align-items: center;
justify-content: center;
}
/* Nessun mix-blend-mode: sei PNG su sette hanno alfa reale e moltiplicare
altererebbe il verde Intesa (problema di brand guideline). */
.impaginato .cli-row img {
max-width: 100%;
width: auto;
object-fit: contain;
/* `brightness` per scurire i marchi troppo chiari, di nuovo da variabile.
Funziona QUI e non nella fascia partnership per una ragione precisa: questi
PNG hanno alfa reale — dal 62 al 70% di pixel trasparenti — quindi il
moltiplicatore agisce sui soli canali di colore e il fondo resta
trasparente. I due marchi partner hanno il fondo bianco OPACO, e là
`brightness` produrrebbe due rettangoli grigi.
La regola di :hover non ripete `brightness`: al passaggio del mouse il
marchio si mostra com'è davvero, colore pieno e nessuna correzione, allo
stesso modo in cui l'opacità torna a 1. */
filter: grayscale(1) brightness(var(--logo-dim, 1));
/* L'opacità arriva da una variabile, non da un valore diretto, e le correzioni
per logo qui sotto impostano la VARIABILE sul invece di ridichiarare
`opacity` sull'immagine. Non è un vezzo: `.impaginato .cli-row .l-unione img`
ha la stessa specificità di `.impaginato .cli-row img:hover` — tre classi e
un tipo — e stando più in basso nel foglio vinceva sulla regola del
passaggio del mouse, che quindi non riportava più l'opacità a 1 su Unione e
PcCube. Con la variabile le uniche regole che dichiarano `opacity` sono
questa e quella di :hover, che ha una pseudo-classe in più e vince sempre:
aggiungere una taratura per logo non può più rompere l'hover. */
opacity: var(--logo-op, .78);
transition: filter .25s ease, opacity .25s ease;
}
.impaginato .cli-row img:hover {
filter: grayscale(0);
opacity: 1;
}
/* PcCube schiarito, e la ragione è la stessa che ha richiesto il contrario su
InfoCamere nel blocco partnership: si pareggia il grigio a SCHERMO, perché è
quello che si vede. Misurato il grigio medio dell'inchiostro dopo
`grayscale(1)`, i sette clienti stanno fra 30 e 118 — PcCube è il 30, il più
scuro di tutti e nove i marchi della pagina. Composto sulla carta al 78%
rendeva 80, contro i 102-148 degli altri sei: 22 punti sotto il più scuro
dei suoi pari.
Qui basta l'opacità e non serve toccare il file, ed è la differenza con
InfoCamere: là il file era troppo CHIARO (124) e nemmeno l'opacità piena
arrivava al bersaglio, quindi metà correzione stava nel PNG. Per schiarire
invece l'opacità raggiunge qualsiasi valore, quindi non si riscrive niente e
la correzione resta reversibile in una riga.
.60 porta PcCube a 120 a schermo, in mezzo al gruppo di Intesa (126), Viasky
(126) e Unione (102). Effetto secondario utile: PcCube era anche il logo con
più inchiostro per area (2120 contro i 1486 di Unione), quindi schiarirlo
migliora nello stesso colpo l'altro squilibrio. */
/* PC Cube è passato alla fascia partner (vedi sopra): la sua taratura di
grigio vive ora lì sullo stesso file. */
/* Unione, stessa leva. Il bersaglio non è scelto a gusto: è la MEDIANA del
grigio a schermo della fascia, 126, che è dove stanno già Intesa, Viasky e
PcCube. Unione partiva da 102, il più scuro rimasto dopo la correzione di
PcCube. .66 la porta a 126.
NB per chi tara di nuovo questi valori: ogni correzione sposta la mediana,
quindi si misurano tutti e sette prima di toccarne uno. */
.impaginato .cli-row .l-unione { --logo-op: .66; }
/* I tre marchi più chiari, scuriti. Un valore solo per tutti e tre e non tre
tarature: partivano da 115, 117 e 118 di grigio nel file, cioè quasi allo
stesso punto, e .77 li porta rispettivamente a 125, 126 e 127 a schermo.
Tre numeri diversi qui sarebbero stati falsa precisione. */
.impaginato .cli-row .l-cambiano,
.impaginato .cli-row .l-apb,
.impaginato .cli-row .l-ente { --logo-dim: .77; }
/* ALTEZZE PER LOGO — si normalizza l'inchiostro, non l'altezza.
Con un tetto unico a 40px i loghi compatti stampano molto meno degli altri e
si leggono come più piccoli, perché la dimensione percepita la fa la quantità
di segno, non l'ingombro del riquadro. Contati i pixel di inchiostro dipinti
a 1440, il tetto unico dava:
PcCube 2939 · Ente 2433 · Intesa 1947 · Cambiano 1781
Viasky 1506 · APB 1438 · Unione 954
cioè uno scarto di 3,1x fra il primo e l'ultimo, in correlazione quasi esatta
col rapporto d'aspetto (4,92:1 contro 1,97:1). Escluso il sospetto banale:
i margini trasparenti dentro i PNG arrivano al 5% dell'altezza, irrilevanti.
Le quattro correzioni sotto portano lo scarto a 1,4x. Non a 1: l'uguaglianza
piena chiederebbe Unione a 55px, che torreggerebbe sugli altri — il difetto
opposto. La correzione è al 65%.
PER UN CLIENTE NUOVO: si misura l'inchiostro dipinto (area del riquadro x
percentuale di pixel non trasparenti) e si sceglie l'altezza che lo porta
intorno a 1750. Non si va a occhio e non si aggiunge un valore per gusto. */
.impaginato .cli-row img { max-height: 40px; }
.impaginato .cli-row .l-unione img { max-height: 50px; } /* il più compatto */
.impaginato .cli-row .l-apb img { max-height: 44px; } /* monogramma + microtesto */
.impaginato .cli-row .l-ente img { max-height: 36px; } /* wordmark largo */
/* Cambiano e Viasky restano a 40: già in linea.
Intesa NON prende un tetto proprio. Sul desktop è già limitato in larghezza,
quindi un tetto in altezza non lo toccherebbe; sul telefono, dove occupa la
riga intera e arriva a 38px, lo rimpicciolirebbe senza motivo. */
/* NESSUNA deroga di larghezza per Intesa sul desktop, ed è una scelta contro
la misura. Con rapporto 8,9:1 è l'unico logo che il tetto di larghezza taglia
prima di quello di altezza, quindi in cella singola si ferma a 27px contro i
40 degli altri. Su due celle arrivava a 40px come tutti — ma la prima riga passava a
tre elementi contro i quattro della seconda, e i loro centri non coincidono
più. Sette loghi su assi diversi non si leggono come una fascia: si leggono
come una nuvola. Quattro colonne uguali danno quattro assi verticali
condivisi dalle due righe, e questo conta più dell altezza di un singolo
logo: il difetto di Intesa è locale, il disallineamento riguardava tutto.
Nel blocco telefono la deroga resta, perché lì le colonne sono due e Intesa
che occupa la riga intera non rompe nessun asse.
Conseguenza accettata: l ultima cella in basso a destra resta vuota, come
l ultima riga di un paragrafo. Un ottavo cliente la riempie. */
/* ===========================================================================
2.8 CHIUSURA — la fine si fonde nel footer, senza confine orizzontale
=========================================================================== */
/* Il gradino che spezzava il bordo superiore è stato rimosso. Era su col 10
perché lì stava il bordo sinistro della piastra dei marchi: i due
condividevano una linea verticale, e quello lo rendeva leggibile. Togliendo
la piastra è rimasto attaccato a un asse inesistente; riportato su col 2,
l'asse del campo pietra, ha smesso di essere un rettangolo orfano ma è
diventato incomprensibile — una striscia bianca che finisce 120px dopo il
confine, senza motivo visibile.
La ragione di fondo per cui non funzionava: era l'unico confine di sezione
non rettilineo della pagina, un'eccezione senza ragione di contenuto. La
"fascia" la pagina la evita con mezzi che si spiegano da sé — il campo
pietra che non tocca il bordo sinistro, le divisioni verticali, la
fotografia a piena superficie, il ritmo verticale variabile.
Con il gradino via, `z-index` sulla chiusura non serve più: non c'è niente
che sporga nelle Prove. */
.impaginato .s-close { padding-block: var(--s2); }
.impaginato .s-close .field--ink {
grid-column: bleed-start / bleed-end;
/* Stesso filetto usato in impaginato.css fra il footer-grid e la riga del
copyright: qui segna il confine fra la sezione e il footer, che altrimenti
si fondono avendo lo stesso inchiostro di fondo. */
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.impaginato .close-body { grid-column: col 1 / col 9; grid-row: 1; }
.impaginato .close-body h2 { color: var(--on-ink); margin-bottom: 16px; }
.impaginato .close-body p { max-width: 44ch; color: var(--on-ink-2); margin-bottom: 32px; }
/* ===========================================================================
RESPONSIVE
Sul telefono la pagina ha 2 campi di colore + 1 fotografia, e l identita
resta la stessa: una carta con due masse d inchiostro e un campo che non
tocca il bordo sinistro. Nessun blocco riceve fondo, bordo o radius propri
-- e la sola difesa contro il "sono card senza bordo".
=========================================================================== */
/* --- tablet / desktop stretto --- */
@media (max-width: 1080px) {
.impaginato .about-head { grid-column: col 1 / col 8; }
/* Le righe vanno numerate esplicitamente: sul desktop i tre punti stanno
tutti su `grid-row: 2` e lo sfalsamento lo fanno i margin-top crescenti,
ma lì le colonne sono tre distinte. Qui le colonne diventano due, quindi
f-01 e f-03 cadrebbero nella STESSA cella e si stamperebbero uno sopra
l'altro. Impaginato a due colonne: 01 a sinistra, 02 a destra, 03 sotto. */
.impaginato .f-01 { grid-column: col 1 / col 7; grid-row: 2; margin-top: var(--s3); }
.impaginato .f-02 { grid-column: col 7 / c-end; grid-row: 2; margin-top: var(--s3); }
.impaginato .f-03 { grid-column: col 1 / col 7; grid-row: 3; margin-top: var(--s2); }
/* riga 4 e non 3: qui i punti occupano due righe invece di una */
.impaginato .manifesto { grid-column: col 1 / c-end; grid-row: 4; }
/* SETTORI: 3 colonne — sei su questa larghezza sarebbero troppo strette.
Divide esattamente i sei settori in due righe piene. */
.impaginato .sect-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* `.serv-list` non ha più bisogno di uno scostamento qui: la regola base
arriva già a c-end da quando l'inserto fotografico è stato tolto. */
.impaginato .serv-aside { grid-column: col 1 / col 5; }
/* La riga servizio torna a UNA colonna già qui, non a 720: con il titolo
laterale che occupa quattro colonne, a 768px la cella del nome scendeva
a 134px e "Data warehouse" — due parole — si spezzava su cinque righe.
Le righe delle pagine interne non hanno il problema (nessun titolo
laterale, cella da 206px, nomi brevi) e restano a due colonne. */
.impaginato .serv-row { grid-template-columns: 1fr; }
.impaginato .serv-row h3 { grid-column: 1; margin-bottom: 10px; }
.impaginato .serv-row p { grid-column: 1; }
.impaginato .people-body { grid-column: col 7 / c-end; }
/* PARTNERSHIP: nessuno scostamento. La regola base impila già testo e loghi
e la riga arriva a c-end, quindi qui non serve niente. */
/* PROVE: nessuno scostamento necessario. Con la piastra rimossa e la regola
base a col 2 / col 3, campo, testata e righe stanno già bene su questa
larghezza. I loghi clienti tengono le quattro colonne della regola base:
a 1080px le celle scendono a 183px, la stessa misura che il desktop aveva
con cinque colonne. Tre colonne, con sette clienti, lascerebbero un logo
orfano da solo in terza riga. */
}
/* --- telefono --- */
@media (max-width: 720px) {
/* APERTURA: l'inchiostro va da bordo a bordo e NON si chiude qui —
prosegue dentro i Prodotti, quindi testata+hero+prodotti sono un solo
blocco d'inchiostro e sul telefono la pagina ha 2 fondi in tutto */
.impaginato .s-hero { min-height: 0; }
/* Torna INCHIOSTRO PIENO, non la velatura sfumata del desktop: qui la
fotografia scende sotto il testo, quindi sotto il titolo non c'è niente
da velare e la sfumatura lasciava il bianco caldo su carta grigiastra —
testo illeggibile sulla destra. */
.impaginato .s-hero .field--ink {
grid-column: bleed-start / bleed-end;
background: var(--ink);
}
.impaginato .hero-body {
grid-column: col 1 / c-end;
padding-block: var(--s3) var(--s2);
}
.impaginato .hero-body h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
.impaginato .hero-lead { max-width: none; }
/* la vela passa sotto il testo, a tutta larghezza, e conserva la
sovrapposizione in scala ridotta. Torna in flusso normale: qui l'altezza
la dà `aspect-ratio`, non la sezione. */
.impaginato .pg > .hero-photo {
position: static;
inset: auto;
grid-column: bleed-start / bleed-end;
grid-row: 2;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-position: 50% 34%;
margin-bottom: -40px;
}
/* PRODOTTI: nessun bordo superiore, è lo stesso blocco dell'hero */
.impaginato .s-prod { padding-block: var(--s3); }
.impaginato .prod-head { grid-column: col 1 / c-end; }
.impaginato .prod-list { grid-column: col 1 / c-end; margin-top: var(--s2); }
.impaginato .prod-row { grid-template-columns: 1fr; padding-block: 26px; }
.impaginato .prod-row .name,
.impaginato .prod-row .desc { grid-column: 1; }
.impaginato .prod-row .name { margin-bottom: 10px; }
.impaginato .prod-row .name b { font-size: var(--fs-titoletto); }
.impaginato .prod-more { grid-column: col 1 / c-end; }
/* CHI SIAMO: la diagonale sparisce, restano tre righe rigate
(non tre card: nessun fondo, nessun bordo laterale) */
.impaginato .s-about { padding-block: var(--s3); }
.impaginato .about-head,
.impaginato .manifesto { grid-column: col 1 / c-end; }
.impaginato .about-lead { max-width: none; }
.impaginato .f-01, .impaginato .f-02, .impaginato .f-03 {
grid-column: col 1 / c-end;
margin-top: 0;
border-top: 1px solid var(--rule);
padding-top: 26px;
}
.impaginato .f-01 { grid-row: 2; margin-top: var(--s2); }
.impaginato .f-02 { grid-row: 3; }
.impaginato .f-03 { grid-row: 4; }
.impaginato .manifesto { grid-row: 5; padding-block: var(--s3) 0; font-size: 1.3rem; }
/* SETTORI: 2 colonne. L'etichetta esce dalla corsia e passa nelle stesse
colonne dell'elenco, quindi le serve una riga propria: restando su
`grid-row: 1` con `align-self: center` (regola base, giusta sul desktop
dove sta a SINISTRA dell'elenco) finirebbe stampata sopra i settori. */
.impaginato .s-sectors .rail-label { align-self: start; }
/* SETTORI: 2 colonne sul telefono, tre righe piene. */
.impaginato .sect-row {
grid-column: col 1 / c-end;
grid-row: 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 14px;
padding-block: 22px;
}
/* SERVIZI: niente sticky */
.impaginato .s-serv { padding-block: var(--s3); }
.impaginato .pg > .serv-aside {
grid-column: col 1 / c-end;
grid-row: 1;
position: static;
}
.impaginato .serv-aside h2 { max-width: none; }
.impaginato .serv-list { grid-column: col 1 / c-end; grid-row: 2; }
/* una colonna l'ha già imposta il blocco 1080; qui basta stringere il passo */
.impaginato .serv-row { padding-block: 24px; }
/* PERSONE: foto a tutta larghezza, la targhetta ne scavalca il bordo.
Vietato mettere il testo su una piastra bianca sopra la foto:
diventerebbe una card. */
.impaginato .s-people { min-height: 0; }
.impaginato .pg > .people-photo {
position: static;
inset: auto;
grid-column: bleed-start / bleed-end;
grid-row: 1;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
.impaginato .people-body {
grid-column: col 1 / c-end;
grid-row: 2;
padding-block: var(--s2) var(--s3);
}
.impaginato .people-body .lead { max-width: none; }
/* PROVE: il campo pietra conserva la sua proprietà definitoria —
non tocca il bordo sinistro nemmeno sul telefono, l'angolo resta */
.impaginato .s-proof { padding-block: var(--s3); }
.impaginato .s-proof .field--stone {
grid-column: bleed-start / bleed-end;
margin-left: 20px;
}
.impaginato .proof-head,
.impaginato .cert-rows { grid-column: col 1 / c-end; padding-left: 20px; }
.impaginato .proof-head p { max-width: none; }
/* Certificazioni sul telefono: un marchio per riga, non tre per colonna —
a 375px tre colonne strozzerebbero sia i marchi che il testo. */
.impaginato .cert-rows { grid-template-columns: 1fr; row-gap: 18px; }
.impaginato .cert-rows .m-9001 { height: 46px; }
.impaginato .cert-rows .m-27001 { height: 52px; }
.impaginato .cert-rows .m-esg { height: 52px; }
/* PARTNERSHIP: sull'asse col 1, come la fascia clienti qui sotto. Stesso
respiro interno ridotto, per restare gemelle anche sul telefono. */
.impaginato .partner-label,
.impaginato .partner-row { grid-column: col 1 / c-end; }
.impaginato .partner-row { padding-block: 22px; }
/* CLIENTI: sezione propria, su carta — nessun campo da inseguire, quindi
nessun padding-left extra: l'asse è il normale col 1 della pagina. */
.impaginato .s-clients { padding-block: var(--s2) var(--s3); }
.impaginato .cli-label,
.impaginato .cli-row { grid-column: col 1 / c-end; }
/* Due colonne, e qui Intesa prende la riga intera: con due sole colonne non
c'è asse verticale da rompere, e in mezza riga il suo rapporto 8,9:1 la
ridurrebbe a un filo. Sette clienti: Intesa in testa, poi tre righe da due. */
.impaginato .cli-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; padding-block: 22px; }
.impaginato .cli-row .l-intesa { grid-column: span 2; }
/* CHIUSURA: il gradino è stato rimosso dalla regola base, qui non c'è più
niente da riscalare. */
.impaginato .s-close { padding-block: var(--s3) var(--s2); }
.impaginato .close-body { grid-column: col 1 / c-end; }
.impaginato .close-body p { max-width: none; }
}