/*
* Header pagina (widget df_hero).
* Misure e breakpoint ripresi dalle classi .header-big / .header-small del kit,
* spaziature orizzontali dal design system (--ave-pad-x contiene gia' il cap a
* 1290px e i gutter 40/32/20). I fallback servono se il widget viene usato dove
* le variabili AVE non ci sono.
*/
.df-hero {
--df-hero-min-height: 515px;
--df-hero-py: 120px;
--df-hero-measure: 760px;
/* Esplicito: il padding deve stare DENTRO la min-height, come nell'originale.
Elementor lo imposta gia' sui suoi discendenti, ma non ci contiamo. */
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: var(--df-hero-min-height);
padding-block: var(--df-hero-py);
padding-inline: var(--ave-pad-x, 40px);
background-color: var(--ave-color-black, #000);
}
.df-hero--md {
--df-hero-min-height: 350px;
--df-hero-py: 80px;
}
.df-hero--sm {
--df-hero-min-height: 240px;
--df-hero-py: 48px;
}
/*
* Immagine: sempre come background, ritagliata a riempire il box e centrata.
* L'url arriva inline dal render del widget.
*/
.df-hero__media {
position: absolute;
inset: 0;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/*
* Velo in sfumatura, non uniforme: scuro dove sta il testo (in basso) e via via
* trasparente salendo, cosi' la foto resta leggibile nella meta' alta.
* 10% dal basso = nero 0.5, 70% dal basso = completamente trasparente.
*/
.df-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 10%, rgba(0, 0, 0, 0) 70%);
}
/* position:relative (senza z-index) basta a tenerlo sopra al media. */
.df-hero__inner {
--df-hero-gap: 20px;
/* Quanto resta fra titolo e sottotitolo, che il gap non lo riguarda. */
--df-hero-subtitle-gap: 4px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--df-hero-gap);
}
/*
* Nessuna tipografia e nessun colore: il titolo e' un tag vero (h1/h2/p), quindi
* scala e colore arrivano dal kit — DF - H1 e' 60/300/1.1em, con i suoi valori
* per breakpoint. Qui resta la sola misura della riga.
*/
.df-hero__title {
margin: 0;
max-width: var(--df-hero-measure);
}
/*
* Sottotitolo e descrizione, entrambi facoltativi: come per il titolo la
* tipografia arriva dal kit, qui resta la sola misura della riga (la stessa del
* titolo, governata dal control "Larghezza massima del testo").
* La distanza dagli altri elementi la da' il gap di .df-hero__inner.
*/
.df-hero__subtitle,
.df-hero__description {
margin: 0;
max-width: var(--df-hero-measure);
}
/*
* Sottotitolo: un passo sotto al titolo nella scala del kit — DF - H2
* (48/38/32px) contro DF - H1 (60/48/40px). Si usano le var globali di
* Elementor e non dei px scritti a mano: il kit le ridefinisce dentro le sue
* media query, quindi il responsive arriva da solo e se il design system cambia
* la scala questo blocco la segue. I fallback valgono fuori dal kit.
*
* La famiglia invece la prende dal TITOLO (dfh1) e non da DF - H2: e' un ,
* quindi senza questa riga eredita il font del body (DF - Corpo = Inter) e
* stona accanto al titolo in Manrope. Puntando a dfh1 resta uguale al titolo
* anche se nel kit le due voci prendessero strade diverse.
*/
.df-hero__subtitle {
font-family: var(--e-global-typography-dfh1-font-family, "Manrope"), sans-serif;
font-size: var(--e-global-typography-3f189b5-font-size, 48px);
font-weight: var(--e-global-typography-3f189b5-font-weight, 400);
line-height: var(--e-global-typography-3f189b5-line-height, 1.35em);
/* Attaccato al titolo: annulla il gap del flex e lascia solo un filo. */
margin-top: calc(var(--df-hero-subtitle-gap) - var(--df-hero-gap));
}
/* La descrizione passa da wpautop, quindi contiene
: i margini del tema
sommati al gap del flex raddoppierebbero lo stacco. */
.df-hero__description > :first-child {
margin-top: 0;
}
.df-hero__description > :last-child {
margin-bottom: 0;
}
/*
* Occhiello: la tipografia sta nella classe `ave-title-tag` del kit (14px, 500,
* uppercase, letter-spacing .1em), che il widget mette sull'elemento. Qui solo
* il layout della variante con freccia.
*/
.df-hero__eyebrow {
margin: 0;
}
/*
* Da tablet in su il testo sta sopra la foto, su velo scuro: il bianco e' l'unico
* colore che il kit non puo' dare, perche' dipende dal fondo. Sotto i 768px il
* blocco passa su fondo chiaro e titolo e occhiello tornano ai colori del kit,
* senza che qui si dichiari niente. Due classi per battere il Theme Style
* (`.elementor-kit-476813 h1`) e tre sull'occhiello per battere `.ave-title-tag`.
*/
@media (min-width: 768px) {
.df-hero .df-hero__title,
.df-hero .df-hero__subtitle,
.df-hero .df-hero__description,
.df-hero .df-hero__eyebrow.ave-title-tag {
color: var(--ave-color-white, #fff);
}
}
a.df-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 11px;
text-decoration: none;
transition: opacity 200ms ease;
}
a.df-hero__eyebrow:hover {
opacity: 0.7;
}
/* La freccia non si stringe: l'etichetta cede prima. */
.df-hero__arrow {
flex: none;
}
/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
.df-hero {
--df-hero-min-height: 400px;
--df-hero-py: 63px;
}
.df-hero--md {
--df-hero-min-height: 300px;
--df-hero-py: 40px;
}
.df-hero--sm {
--df-hero-min-height: 200px;
--df-hero-py: 32px;
}
}
/* --- Mobile: immagine sola, testo sotto su fondo chiaro ------------------ */
@media (max-width: 767px) {
.df-hero {
--df-hero-img-height: 300px;
min-height: 0;
padding: 0;
background-color: transparent;
}
.df-hero--sm {
--df-hero-img-height: 200px;
}
/* Torna nel flusso: l'immagine sta sopra, il testo scende sotto. */
.df-hero__media {
position: static;
height: var(--df-hero-img-height);
background-position: center right;
}
.df-hero__media::after {
display: none;
}
.df-hero__inner {
--df-hero-gap: 19px;
padding-block: 30px;
padding-inline: var(--ave-pad-x, 20px);
}
}