/* ==========================================================================
Blocco condiviso — HERO DELLE PAGINE INTERNE
Maintenance `Hero` 55:347 · Compliance `Hero` 113:1143 · 1512 x 1051
⚠️ NON e l'Hero della Home. Quella e a piena larghezza col visual sotto il
titolo; questa e a DUE COLONNE: testo a sinistra, immagine a destra.
Stessa famiglia di quadrati decorativi ruotati, misure diverse.
Verificato identico su Compliance: stesse due colonne, stesso padding,
stessi quattro quadrati, stessa immagine al 205.48%. Cambiano solo i testi
e l'etichetta del pulsante. Vale anche per MRF e Monitoring.
Verifica altezza: 171 (padding top) + 800 (immagine) + 80 (padding bottom) = 1051 ✔
Colonne: (1432 − 80 di gap) / 2 = 676 ciascuna ✔
Il padding-top 171 = 91 dell'header sovrapposto + 80, come sulla Home.
========================================================================== */
.hero2 {
position: relative;
overflow: hidden;
padding-top: 171px;
padding-bottom: var(--space-6); /* 80 */
background: var(--gradient-hero-maintenance);
color: var(--text-on-dark);
}
/* --- I quadrati decorativi ------------------------------------------------
Quattro quadrati concentrici ruotati di 45 gradi, centrati sotto il centro
della sezione. Il bordo e 5px pieni: NON scala con la rotazione, quindi va
scritto in px e non in percentuale.
Le misure sono i lati PRIMA della rotazione (1512 / 1012 / 512 / 12): il
riquadro che si vede a schermo e piu grande di un fattore √2.
-------------------------------------------------------------------------- */
.hero2__patterns {
position: absolute;
inset: 0;
pointer-events: none;
}
/* ⚠️ `--hero2-pattern-scala` e `--hero2-pattern-y` valgono 1 e 428.65px, cioe
ESATTAMENTE il mockup, e a 1512 non cambiano niente. Esistono perche il
responsive possa rimpicciolire i quadrati e rialzarne il centro senza
riscrivere queste righe: su una sezione alta un terzo, un centro fissato a
428px sotto la meta finisce fuori dal riquadro. Stesso meccanismo
dell'Hero della Home. */
.hero2__pattern {
position: absolute;
left: 50%;
top: calc(50% + var(--hero2-pattern-y, 428.65px));
width: calc(var(--lato) * var(--hero2-pattern-scala, 1));
height: calc(var(--lato) * var(--hero2-pattern-scala, 1));
transform: translate(-50%, -50%) rotate(-45deg);
border: var(--stroke-pattern);
opacity: .25;
}
/* --- Le due colonne ------------------------------------------------------- */
.hero2__row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--space-6); /* 80 — NON i 16 della griglia */
width: 100%;
}
.hero2__col {
flex: 1 1 0;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between; /* titolo in alto, descrizione in fondo */
}
.hero2__titolo {
color: var(--text-on-dark);
/* ⚠️ 4 set 2026 — ERA `white-space: nowrap`, ed e stato tolto.
Gli a-capo di questo titolo sono espliciti (un
nel testo), quindi il
nowrap non serviva a ottenerli: serviva a impedire un a-capo automatico
in un punto sbagliato. Ma una traduzione che non porta con se i propri
a-capo diventa UNA RIGA SOLA, e con il nowrap quella riga non poteva
andare a capo: usciva dalla colonna e finiva sopra la fotografia
accanto. Misurato in italiano: +1367px oltre i 676 della colonna su
Compliance, +1094 su MRF, +898 su Maintenance. E la schermata che Andrea
ha mandato il 4 set.
Senza nowrap l'inglese non si sposta di un pixel — i
restano dove
sono e le righe ci stanno — e una traduzione piu lunga va a capo invece
di sfondare. Lo controlla strabordo.mjs. */
}
.hero2__descrizione {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5); /* 40 fra il testo e il pulsante */
}
/* Fra un paragrafo e l'altro passa UNA RIGA VUOTA, non i 40 del blocco: in
Figma i paragrafi sono un layer di testo solo, separati da un a-capo. */
.hero2__paragrafi {
display: flex;
flex-direction: column;
gap: var(--type-h4-lh); /* 29 = una riga */
width: 100%;
}
/* ⚠️ 24px, NON 16. Nel mockup del 1 set 2026 il paragrafo degli Hero interni
e passato al corpo grande: verificato su Maintenance (55:355, 7 righe da
29 = 203), Compliance (113:1151, 3 righe = 87) e MRF (113:1167, 2 righe =
58). Tutte e tre le altezze tornano solo con 24/29.
L'altezza della sezione non cambia comunque: la colonna del titolo e alta
800 fissi e la descrizione ci sta appoggiata in fondo. */
.hero2__testo {
color: var(--text-on-dark-muted);
font-size: var(--type-h4-size); /* 24 */
line-height: var(--type-h4-lh); /* 29 */
}
/* --- L'immagine ----------------------------------------------------------
Come nel blocco Workflow: renderizzata al 205.48% della larghezza del box
e ancorata in alto a sinistra, quindi tagliata a destra. Va fornita
INTERA, non gia ritagliata.
-------------------------------------------------------------------------- */
.hero2__media {
flex: 1 1 0;
min-width: 0;
height: 800px;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
}
.hero2__media > img {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 205.48%;
max-width: none;
object-fit: cover;
object-position: left top;
}
/* Monitoring 113:1183 — qui il fill e un `cover` a scala 100%: l'immagine e
gia proporzionata al riquadro 676x800 e non va tagliata. Si disattiva lo
sbordamento, non lo si corregge con un'altra percentuale. */
/* ⚠️ Resta ASSOLUTA come nell'altra variante: il riquadro e anche un
segnaposto `.ph`, cioe un contenitore flex con una didascalia. Un'immagine
rimessa nel flusso diventerebbe un flex item e si stringerebbe per far
posto a quella didascalia (676 -> 430). Qui cambia solo la scala. */
.hero2--intera .hero2__media > img {
width: 100%;
object-position: center;
}
/* Monitoring 113:1179 — unico Hero del progetto senza a-capo battuti a mano
nel titolo: il wrapping e naturale su 676px e il nowrap lo impedirebbe. */
.hero2--titolo-libero .hero2__titolo {
white-space: normal;
}