/*
* Hero della home — dall'originale index.html r.136–160.
*
* In questo file: tutto l'aspetto e le due animazioni della sezione.
* Markup in templates/hero.php, controlli in includes/widgets/class-hero.php.
* Niente .js: il parallasse è il meccanismo condiviso (data-adea-par), le
* entrate sono CSS puro con ritardi fissi, gli hover sono transition.
*
* ⚠️ Come per l'header, i valori NON vengono dalla prima regola trovata:
* styles.css si contraddice e le regole più in basso vincono a pari
* specificità. Casi verificati qui:
* · il velo ha classe `hero-veil hero-veil-reference`; r.105 dice 90deg
* rgba(7,16,17,…) ma r.478 (.hero-veil) è più in basso → vale
* 100deg rgba(6,19,36,…). Misurato.
* · `.hero-h1` r.339 (40px) e r.391 (32px) sono CODICE MORTO: `.hero-title`
* r.340 (48px) e r.397 (38px) li seguono nel foglio con lo stesso peso.
* · lo sheen del bottone r.72–74 è superato da r.730–731 (correzione già
* applicata al componente condiviso .adea-c-cta in adea-tokens.css).
*
* Cascata MISURATA sull'originale (getComputedStyle a 1440/1024/900/700/560/375):
*
* larghezza padding wrap titolo lead meta tag
* >1040 168px 40px 44px 72px 20px riga 54/24px 15px
* 961–1040 138px 40px 44px 56px 20px colonna 54/24px 15px
* 621–960 138px 20px 44px 48px 18px colonna 48/18px 15px
* ≤620 120px 20px 28px 38px 17px colonna 44/16px 14px
* (+ min-height:100vh sul wrap)
*
* Variabili controllate dall'editor (ripiego = valore originale). Come per
* l'header, i gradini hanno una variabile PROPRIA invece di un controllo
* responsive: il CSS che Elementor stampa per il desktop sta su un selettore
* con l'id del documento e batterebbe le media query di questo foglio (§13).
*
* Indice: sezione · immagine e velo · impaginato · occhiello · titolo · lead ·
* azioni · meta (frase + tag) · entrate · breakpoint · editor/reduced-motion
*/
/* ---------- sezione ---------- */
.adea-hero{
position:relative;min-height:var(--adea-hero-minh,100vh);
display:flex;align-items:flex-end;overflow:hidden;
background:var(--adea-hero-bg,#0a1618);
font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif);
line-height:normal; /* il Kit impone 1.5; l'originale eredita `normal` dal body */
}
/* ---------- immagine di fondo e velo ----------
Due livelli separati: l'immagine porta il Ken Burns + il parallasse, il velo
sta sopra e non si muove. Su un solo elemento le due trasformazioni si
sovrascriverebbero. */
.adea-hero-slide{
position:absolute;inset:0;background-size:cover;background-position:center;
transform-origin:center center;will-change:transform;
animation:adeaHeroKen var(--adea-hero-ken-dur,18s) ease-in-out infinite;
}
/* --adea-par lo scrive adea-core.js: min(34, scrollY*0.22)px, la formula dello
script inline dell'originale (index.html r.1734). Se il JS non c'è vale 0px
e l'immagine resta ferma ma visibile. */
@keyframes adeaHeroKen{
0% {transform:scale(1.16) translate3d(0,var(--adea-par,0px),0)}
50% {transform:scale(1.22) translate3d(-1.5%,calc(1.2% + var(--adea-par,0px)),0)}
100%{transform:scale(1.16) translate3d(0,var(--adea-par,0px),0)}
}
.adea-hero-veil{
position:absolute;inset:0;
background:var(--adea-hero-veil,linear-gradient(100deg,rgba(6,19,36,.92) 0%,rgba(6,19,36,.74) 40%,rgba(6,19,36,.4) 100%));
}
/* ---------- impaginato ---------- */
.adea-hero-wrap{
position:relative;z-index:2;width:100%;max-width:1480px;margin:0 auto;
padding:var(--adea-hero-pad-t,168px) var(--adea-hero-pad-x,40px) var(--adea-hero-pad-b,44px);
display:flex;flex-direction:column;justify-content:space-between;gap:48px;
}
.adea-hero-copy{max-width:900px}
/* ---------- occhiello ----------
Non usa .adea-c-kicker: quello condiviso viene da .adea-about-kicker (fondo
chiaro, bordo #d7e4d8, corpo 13px). Questo è il velo chiaro su foto, con
valori diversi in tutto tranne il border-radius. Sovrascriverlo sarebbe
riscriverlo (§7). */
.adea-hero-kicker{
display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:rgba(255,255,255,.88);margin-bottom:28px;
}
/* ---------- titolo ---------- */
.adea-hero-title{
max-width:1000px;font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:var(--adea-hero-title-size,72px);font-weight:400;line-height:.98;
letter-spacing:-.04em;color:#fff;margin:0 0 24px;text-wrap:balance;
}
/* ---------- lead ---------- */
.adea-hero-lead{
max-width:var(--adea-hero-lead-maxw,860px);
font-size:var(--adea-hero-lead-size,20px);line-height:1.55;
color:rgba(255,255,255,.82);margin:0 0 34px;
}
/* ---------- azioni ----------
Il bottone È il componente condiviso .adea-c-cta. Qui solo i due valori in
cui l'hero differisce da .adea-company-cta (da cui nasce il componente):
l'ombra di base e quella in hover. Misurate sull'originale. */
.adea-hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.adea-hero .adea-c-cta{box-shadow:0 18px 34px -18px rgba(0,0,0,.38)}
.adea-hero .adea-c-cta:hover,
.adea-hero .adea-c-cta:focus-visible{box-shadow:0 18px 34px -14px rgba(66,173,89,.6)}
/* l'icona dell'hero è verde scuro pieno con freccia bianca, non il tondo
bianco del componente condiviso */
.adea-hero .adea-c-cta__icon{background:var(--adea-verde-scuro,#379a4c);color:#fff}
/* ---------- meta: frase + tag ---------- */
.adea-hero-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.adea-hero-partners{display:flex;align-items:center;gap:18px}
.adea-hero-partners p{
max-width:460px;margin:0;font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:16px;line-height:1.45;color:#fff;
}
.adea-hero-tags{display:flex;align-items:center;justify-content:flex-end;gap:var(--adea-hero-tags-gap,14px);flex-wrap:wrap}
.adea-hero-tag{
display:inline-flex;align-items:center;justify-content:center;
min-height:var(--adea-hero-tag-minh,54px);padding:0 var(--adea-hero-tag-padx,24px);
border-radius:999px;border:1px solid rgba(255,255,255,.45);
background:rgba(255,255,255,.02);backdrop-filter:blur(8px);
font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:var(--adea-hero-tag-size,15px);font-weight:500;color:#fff;
}
/* ---------- entrate ----------
L'hero NON usa il meccanismo condiviso: nell'originale è escluso
esplicitamente da revealRegister (script.js r.254, REVEAL_EXCLUDE contiene
`.hero-hero` e `.h-rise`). Non è un osservatore: parte al caricamento con
ritardi fissi. Restano quindi in questo foglio (§5).
`opacity:0` di base è ammesso qui perché l'animazione è CSS puro: senza
JavaScript parte lo stesso e `both` la lascia a opacity 1. L'unico caso in
cui non parte è l'editor, dove infatti è forzata a visibile più sotto.
⚠️ animation-delay DOPO la shorthand e nella stessa regola: la shorthand
azzera un delay dichiarato altrove. */
.adea-hero-rise{
opacity:0;
animation:adeaHeroRise var(--adea-hero-rise-dur,.85s) cubic-bezier(.22,.8,.3,1) both;
animation-delay:var(--adea-hero-rise-delay,0s);
}
@keyframes adeaHeroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:1040px){
.adea-hero-wrap{padding-top:var(--adea-hero-pad-t-1040,138px)}
.adea-hero-title{font-size:var(--adea-hero-title-size-1040,56px)}
.adea-hero-meta{flex-direction:column;align-items:flex-start}
.adea-hero-tags{justify-content:flex-start}
}
/* .sect dell'originale: a ≤960 il padding orizzontale scende a 20px */
@media(max-width:960px){
.adea-hero-wrap{padding-left:var(--adea-hero-pad-x-960,20px);padding-right:var(--adea-hero-pad-x-960,20px)}
.adea-hero-title{font-size:var(--adea-hero-title-size-960,48px)}
.adea-hero-lead{font-size:var(--adea-hero-lead-size-960,18px)}
.adea-hero-tag{--adea-hero-tag-minh:48px;--adea-hero-tag-padx:18px}
}
@media(max-width:620px){
.adea-hero-wrap{
min-height:var(--adea-hero-minh,100vh);
padding-top:var(--adea-hero-pad-t-620,120px);
padding-bottom:var(--adea-hero-pad-b-620,28px);
}
.adea-hero-title{font-size:var(--adea-hero-title-size-620,38px);line-height:1.02}
.adea-hero-lead{font-size:var(--adea-hero-lead-size-620,17px);--adea-hero-lead-maxw:100%}
.adea-hero-partners{align-items:flex-start;flex-direction:column}
.adea-hero-tags{--adea-hero-tags-gap:10px}
.adea-hero-tag{--adea-hero-tag-minh:44px;--adea-hero-tag-padx:16px;--adea-hero-tag-size:14px}
}
/* ---------- editor e reduced-motion ----------
Con reduced-motion l'originale ferma solo le entrate (r.527) e lascia
correre il Ken Burns: qui lo fermiamo anche, ⚠️ DEVIAZIONE DICHIARATA dal
comportamento originale, richiesta da §8 del prompt di porting ("tutto
fermo"). Il fotogramma su cui si ferma è lo 0% (scale 1.16), così
l'inquadratura non salta rispetto al primo istante. */
@media(prefers-reduced-motion:reduce){
.adea-hero-rise{opacity:1!important;animation:none!important;transform:none!important}
.adea-hero-slide{animation:none!important;transform:scale(1.16)}
}
.elementor-editor-active .adea-hero-rise{opacity:1!important;animation:none!important;transform:none!important}
.elementor-editor-active .adea-hero-slide{animation:none!important;transform:scale(1.16)}