/*
* Eroe di pagina interna — aspetto
*
* Origine: .page-hero / .page-hero-content di source-clean/styles.css, piu'
* il blocco @media (max-width: 820px). Ogni valore letto.
*
* ⚠️ NON e' l'eroe della home: quello e' .hero, con le tre diapositive e il
* movimento del mouse. Questo e' l'eroe delle pagine interne — nel sorgente
* lo usano Costruttori e Cantieri, quindi ricorre e vive qui una volta sola.
*
* ⚠️ La scala del titolo e' PROPRIA: clamp(4rem, 8.5vw, 8rem), diversa da
* --falone-h1 della home (clamp(4.2rem, 10.2vw, 8.6rem)). Non si riusa il
* token, o il titolo sarebbe piu' grande dell'originale.
*
* Indice
* 1. sezione
* 2. fotografia e velo
* 3. contenuto
*/
/* ======================================================================
1. SEZIONE
======================================================================
Il margine interno in alto tiene conto dell'header fisso: senza,
il titolo finirebbe sotto la barra. */
.falone-page-hero {
position: relative;
min-height: var(--falone-phero-min-h, 620px);
display: grid;
/* ⚠️ Senza, la colonna implicita ha minimo min-content: un titolo con una
parola lunga (es. Infrastrutture, "amministrazione") allarga la colonna
oltre il contenitore. Stessa trappola gia' nota per grid-template-columns
su una pista scorrevole — vedi CLAUDE.md §7. */
grid-template-columns: minmax(0, 1fr);
/* end su Costruttori, center su Impegno: e' un controllo */
align-items: var(--falone-phero-align, end);
padding:
calc(var(--falone-header-height, 70px) + var(--falone-phero-pad-top, 96px))
var(--falone-phero-pad-x, 52px)
var(--falone-phero-pad-bottom, 72px);
overflow: hidden;
background: var(--falone-phero-bg, #121212);
color: var(--falone-phero-ink, #fff);
}
@media (max-width: 820px) {
.falone-page-hero {
min-height: var(--falone-phero-min-h-tablet, 560px);
padding:
calc(var(--falone-header-height, 74px) + var(--falone-phero-pad-top-tablet, 74px))
var(--falone-phero-pad-x-tablet, 18px)
var(--falone-phero-pad-bottom-tablet, 56px);
}
}
/* ======================================================================
2. FOTOGRAFIA E VELO
======================================================================
⚠️ Selettore DISCENDENTE sull'![]()
: `.elementor img { height: auto }` ha
specificita' (0,1,1) e batterebbe una classe sola, lasciando la foto alla
sua altezza naturale. Trappola gia' presa nel collage delle Persone. */
.falone-page-hero .falone-page-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Impegno inquadra piu' in alto: `center 32%` invece del centro */
object-position: var(--falone-phero-img-pos, center center);
opacity: var(--falone-phero-img-op, .78);
}
/* Due sfumature sovrapposte: una da sinistra, una dall'alto. Il sorgente le
mette su ::after, quindi sopra la foto e sotto il testo (z-index 1). */
.falone-page-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* ripiego per i browser senza color-mix: i valori esatti del sorgente */
background:
linear-gradient(90deg, rgba(18, 18, 18, .78), rgba(18, 18, 18, .2)),
linear-gradient(180deg, rgba(18, 18, 18, .12), rgba(18, 18, 18, .78));
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
.falone-page-hero::after {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-left, .78) * 100%), transparent),
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-right, .2) * 100%), transparent)),
linear-gradient(180deg,
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-top, .12) * 100%), transparent),
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-bottom, .78) * 100%), transparent));
}
}
/* ----------------------------------------------------------------------
Velo a TRE passaggi
----------------------------------------------------------------------
⚠️ Non e' il velo di sopra con un valore in piu': e' una sfumatura di
forma diversa, con un passaggio intermedio a una posizione precisa.
Costruttori usa due punti, Impegno tre:
90deg .92 -> .42 al 60% -> .18
180deg .62 -> .30 al 40% -> .70
Tenerli come DUE blocchi distinti, scelti da un interruttore, evita di
dover ricavare per calcolo il punto intermedio equivalente del caso a due
passaggi: nessun valore derivato, solo quelli letti dal sorgente. */
.falone-page-hero--veil3::after {
background:
linear-gradient(90deg, rgba(18,18,18,.92), rgba(18,18,18,.42) 60%, rgba(18,18,18,.18)),
linear-gradient(180deg, rgba(18,18,18,.62), rgba(18,18,18,.3) 40%, rgba(18,18,18,.7));
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
.falone-page-hero--veil3::after {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-left, .92) * 100%), transparent),
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-mid-x, .42) * 100%), transparent) var(--falone-phero-veil-mid-x-pos, 60%),
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-right, .18) * 100%), transparent)),
linear-gradient(180deg,
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-top, .62) * 100%), transparent),
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-mid-y, .3) * 100%), transparent) var(--falone-phero-veil-mid-y-pos, 40%),
color-mix(in srgb, var(--falone-phero-veil-color, #121212) calc(var(--falone-phero-veil-bottom, .7) * 100%), transparent));
}
}
/* ----------------------------------------------------------------------
Fotografia sulla META' DESTRA
----------------------------------------------------------------------
⚠️ NON e' la copertina delle altre pagine interne, dove la fotografia sta
a tutta pagina sotto un velo. Nello screen di Ristrutturazione (05/08) la
foto occupa la parte destra e sfuma verso sinistra sul nero, e il testo
sta nella meta' libera.
⚠️ La sfumatura di raccordo e' orizzontale e agisce SULL'IMMAGINE, con una
`mask`: mettere un velo sopra la foto la scurirebbe tutta, mentre qui
serve che a sinistra sparisca del tutto e a destra resti intatta.
Il ripiego per i browser senza `mask-image` e' il velo a due sfumature
della copertina normale, che resta leggibile. */
.falone-page-hero--foto-destra .falone-page-hero__img {
left: auto;
right: 0;
width: var(--falone-phero-img-w, 62%);
opacity: var(--falone-phero-img-op, 1);
}
@supports (mask-image: linear-gradient(90deg, transparent, #000)) {
.falone-page-hero--foto-destra .falone-page-hero__img {
-webkit-mask-image: linear-gradient(90deg,
transparent 0,
#000 var(--falone-phero-fade, 34%));
mask-image: linear-gradient(90deg,
transparent 0,
#000 var(--falone-phero-fade, 34%));
}
/* col raccordo affidato alla mask, il velo generale non serve piu' su
tutta la fascia: resta solo un abbassamento in basso per staccare il
testo, come nello screen */
.falone-page-hero--foto-destra::after {
background: linear-gradient(180deg,
transparent 42%,
rgba(18, 18, 18, .55));
}
}
.falone-page-hero--foto-destra .falone-page-hero__content {
width: min(var(--falone-phero-content-max-destra, 620px), 100%);
}
@media (max-width: 820px) {
/* sotto gli 820 la foto torna a tutta larghezza: una meta' da 62% su uno
schermo stretto non lascerebbe posto al titolo */
.falone-page-hero--foto-destra .falone-page-hero__img {
right: 0;
width: 100%;
opacity: var(--falone-phero-img-op-tablet, .5);
}
.falone-page-hero--foto-destra .falone-page-hero__img {
-webkit-mask-image: none;
mask-image: none;
}
}
/* ======================================================================
3. CONTENUTO
====================================================================== */
.falone-page-hero__content {
position: relative;
z-index: 1;
width: min(var(--falone-phero-content-max, 960px), 100%);
margin-left: var(--falone-indent, 0px);
}
.falone-page-hero__h1 {
max-width: var(--falone-phero-title-max, 980px);
margin: 0;
color: var(--falone-phero-ink, #fff);
font-family: var(--falone-font-display, "Jost", sans-serif);
/* ⚠️ Una singola parola lunga ("amministrazione", Infrastrutture) non si
spezza da sola e sborda dal riquadro sotto gli 820px: la riga normale
va a capo solo fra le parole. Rete di sicurezza, non cambia nulla dove
le parole ci stanno gia'. */
overflow-wrap: break-word;
/* ⚠️ La formula fluida e' PARAMETRIZZATA in tre parti, non sostituita da
un numero: ogni pagina del sorgente ha la sua scala —
Costruttori clamp(4rem, 8.5vw, 8rem)
Impegno clamp(3.1rem, 5.85vw, 5.35rem)
e un controllo che scrivesse un valore fisso perderebbe la fluidita'.
Il controllo del valore fisso resta come scavalcamento, per chi lo
vuole. */
font-size: clamp(4rem, 8.5vw, 8rem); /* ripiego */
font-size: var(--falone-phero-title-size,
clamp(
var(--falone-phero-title-size-min, 4rem),
var(--falone-phero-title-size-vw, 8.5vw),
var(--falone-phero-title-size-max, 8rem)
));
line-height: var(--falone-phero-title-lh, .88);
margin-bottom: var(--falone-phero-title-gap, 20px); /* modello: h1 { margin-bottom: 20px } */
/* ⚠️ COMPENSAZIONE DELLE DISCENDENTI.
Il titolo ha interlinea .88 su un corpo di 122px: la scatola della riga e'
PIU' BASSA del carattere, e l'inchiostro dell'ultima riga sborda sotto —
misurato 34px. Il paragrafo che segue partiva esattamente dal fondo della
scatola e finiva SOPRA le discendenti: su «Il nostro impegno.» la g e la p
si intralciavano col testo, misurato -34px di spazio su sette copertine.
⚠️ Il modello ha lo stesso difetto (-14px), ma non si vede: i suoi titoli
non hanno discendenti sull'ultima riga. Qui si corregge.
In `em` e non in px: l'inchiostro che sborda e' proporzionale al corpo,
quindi la compensazione scala da se' a ogni larghezza. */
padding-bottom: var(--falone-phero-title-discese, .3em);
/* ⚠️ Il ripiego e' 700, NON `inherit`.
Con `inherit` il titolo prendeva il peso del contenitore — cioe' normale
— e i titoli delle copertine di Creatori di Valore e Il nostro impegno
erano finiti a 400: misurato. Prima di questa riga non c'era nessuna
dichiarazione e valeva il grassetto predefinito dell'; introducendo
il controllo ho cambiato quel comportamento senza accorgermene.
700 e' lo stesso peso di .falone-h1 (l'eroe della home), che e' il
riferimento chiesto dall'utente il 04/08.
⚠️ Il sorgente dichiara `h1, h2, h3 { font-weight: 600 }`: tutto il sito
e' un passo piu' grasso dell'originale. Vedi la nota nel CLAUDE.md. */
font-weight: var(--falone-phero-title-weight, 600);
}
.falone-page-hero__h1 em {
color: var(--falone-phero-accent, #f7941d);
font-style: italic;
}
/* ⚠️ Il sorgente usa DUE marcatori diversi per la parte in accento del
titolo: in Creatori e Impegno (corsivo), in
Ristrutturazione (solo il punto finale, NON corsivo). Qui la seconda forma
e' : stesso colore, nessun corsivo. */
.falone-page-hero__h1 .falone-accent {
color: var(--falone-phero-accent, #f7941d);
font-style: normal;
}
.falone-page-hero .falone-eyebrow { color: var(--falone-phero-accent, #f7941d); }
.falone-page-hero__text {
max-width: var(--falone-phero-text-max, 720px);
/* il modello lascia il margine sotto del browser: 1em, cioe' 18px al corpo
di questa copertina */
margin: var(--falone-phero-text-top, 0) 0 var(--falone-p-gap, 1em);
font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
font-size: clamp(1rem, 1.25vw, 1.25rem); /* ripiego */
font-size: var(--falone-phero-text-size,
clamp(
var(--falone-phero-text-size-min, 1rem),
var(--falone-phero-text-size-vw, 1.25vw),
var(--falone-phero-text-size-max, 1.25rem)
));
font-weight: 400;
/* ⚠️ Il sorgente non dichiara interlinea qui, quindi eredita la regola
di base p { line-height: 1.78 }. Nel porting questo elemento ha una
CLASSE, e il selettore globale `p` (0,0,1) non la raggiunge: restava
l'interlinea predefinita del browser. Misurato sul riferimento di
Costruttori: 32,04px su 18px di corpo = 1,78. */
line-height: var(--falone-phero-text-lh, 1.78);
color: rgba(255, 255, 255, .78); /* ripiego */
color: color-mix(in srgb,
var(--falone-phero-ink, #fff) calc(var(--falone-phero-text-op, .78) * 100%),
transparent);
}
/* ======================================================================
4. PULSANTI
======================================================================
Dallo screen di Efficientamento (05/08): un pulsante pieno e un secondo
di solo testo con la freccia. Senza testo il modello non li stampa, quindi
le copertine gia' fatte non cambiano. */
.falone-page-hero__azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--falone-phero-azioni-gap, 26px);
margin-top: var(--falone-phero-azioni-top, 34px);
}
/* ⚠️ Selettore con DUE classi: Hello Elementor pubblica
`a:active, a:hover { color: #336 }` con specificita' (0,1,1) e farebbe
diventare blu navy questo link al passaggio. Trappola gia' presa sui
pulsanti della home. */
.falone-page-hero__azioni .falone-page-hero__link {
display: inline-flex;
align-items: center;
gap: var(--falone-phero-link-gap, 12px);
color: var(--falone-phero-link-ink, #fff);
font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
font-size: var(--falone-phero-link-size, .68rem);
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
}
.falone-page-hero__azioni a.falone-page-hero__link:hover,
.falone-page-hero__azioni a.falone-page-hero__link:focus-visible,
.falone-page-hero__azioni a.falone-page-hero__link:active {
color: var(--falone-phero-accent, #f7941d);
}
.falone-page-hero__azioni .falone-page-hero__link em {
font-style: normal;
transition: transform .3s ease;
}
@media (prefers-reduced-motion: reduce) {
.falone-page-hero__azioni .falone-page-hero__link em { transition: none; }
}
.falone-page-hero__azioni a.falone-page-hero__link:hover em { transform: translateX(4px); }