` del mockup; in Elementor lo
fa uno pseudo-elemento della sezione, così non serve un widget vuoto in pagina.
Senza, il testo bianco finisce su un cielo chiaro e non si legge. */
.gg-home .e-hero,
.gg-home .e-strategia{position:relative;isolation:isolate;overflow:hidden}
.gg-home .e-strategia::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* Nella Strategia la fotografia è lo sfondo della sezione, quindi un velo sulla
sezione basta. Nella copertina no: la fotografia è un widget dentro il
contenitore, che sta a z-index 2 — un velo sulla sezione finirebbe *sotto* la
foto. Va quindi appeso allo strato delle fotografie, dove copre le slide e
resta sotto al testo. */
.gg-home .e-hero .campo.campo::after{content:"";position:absolute;inset:0;z-index:2;
pointer-events:none;background:linear-gradient(to top,rgba(14,22,28,.9) 0%,
rgba(14,22,28,.66) 26%,rgba(14,22,28,.18) 58%,rgba(14,22,28,0) 84%)}
.gg-home .e-strategia::after{background:linear-gradient(120deg,rgba(2,80,90,.96) 0%,
rgba(2,80,90,.93) 60%,rgba(2,80,90,.9) 100%)}
.gg-home .e-strategia > .e-con-inner{position:relative;z-index:2;color:#CFE3E5}
.gg-home .e-strategia h2,
.gg-home .e-strategia .elementor-heading-title{color:#fff}
/* ============================================================
CORREZIONI DOPO LA PRIMA LETTURA A VIDEO (22/09)
Quasi tutte hanno la stessa causa: nel mockup la misura stava sul tag
(`b`, `a`, `h3`), in Elementor la nostra classe sta sull'involucro del widget
e dentro c'è l'elemento vero, che altrimenti prende le misure del kit.
============================================================ */
/* Copertina: il contenuto va in basso, come nella proposta. Il contenitore
«boxed» è alto quanto la sezione, quindi il testo va spinto in fondo. */
.gg-home .e-hero > .e-con-inner{justify-content:flex-end}
/* Barra gialla: le misure sull'elemento dentro il widget */
.gg-home .e-bando .stato .elementor-heading-title{font-size:11.5px;letter-spacing:.14em}
.gg-home .e-bando .nome .elementor-heading-title{font-size:16px;line-height:1.3}
.gg-home .e-bando .quando .elementor-heading-title{font-size:14px;font-weight:400;line-height:1.3}
.gg-home .e-bando .quando .elementor-heading-title b{font-family:var(--font-d);font-size:14.5px;font-weight:700}
.gg-home .e-bando .vai .elementor-heading-title{font-size:13px;letter-spacing:.07em}
/* Notizie: il pulsante «tutte le notizie» a destra del titolo */
.gg-home .e-news .testa{align-items:baseline}
.gg-home .e-news .testa .vai{margin-left:auto}
/* Notizie: le due misure di titolo, che il kit riportava entrambe a 28 px */
.gg-home .e-news .titolo .elementor-heading-title{font-size:15.5px;line-height:1.34;font-weight:600}
.gg-home .e-news .e-loop-item:first-of-type .titolo .elementor-heading-title{font-size:23px;
line-height:1.2;max-width:26ch}
/* e un po' d'aria fra foto, categorie e titolo nella notizia in evidenza */
.gg-home .e-news .e-loop-item:first-of-type .testo{display:grid;gap:10px;padding-top:4px}
.gg-home .e-news .e-loop-item:not(:first-of-type) .testo{display:grid;gap:6px;align-content:start}
.gg-home .e-news .n-notizia{align-items:start}
/* I link testuali sono widget titolo: da blocco a riga, se no il sottolineato
arriva in fondo alla colonna invece di fermarsi sotto le parole */
.gg-home .vai .elementor-heading-title,
.gg-home .vai-scuro .elementor-heading-title,
.gg-home .storia .elementor-heading-title{display:inline-block}
.gg-home .vai,
.gg-home .vai-scuro,
.gg-home .storia{width:fit-content}
/* Chi siamo: le immagini del collage non si vedevano. L'involucro del widget è
`position:relative`, quindi l'immagine assoluta si misurava su un'altezza zero. */
.gg-home .e-collage .grande > .elementor-widget,
.gg-home .e-collage .piccola > .elementor-widget{position:absolute;inset:0}
.gg-home .e-collage .grande .elementor-widget-container,
.gg-home .e-collage .piccola .elementor-widget-container{height:100%}
/* Chi siamo: più aria fra la colonna di testo e il collage, e sotto il testo */
.gg-home .e-ident .griglia{gap:clamp(48px,7vw,96px)}
.gg-home .e-ident .griglia > .e-con:first-child{display:grid;gap:18px;align-content:start}
.gg-home .e-ident .incisione{margin-top:26px}
/* Copertina a tre fotografie (widget Slides).
Due cose da sapere. La prima: il widget sta dentro il contenitore «boxed», che è
largo 1320, mentre la fotografia deve arrivare ai bordi — quindi lo strato si
àncora al centro e si allarga alla finestra (`.e-hero` ha `overflow:hidden`, non
sborda). La seconda: fra il widget e la slide ci sono quattro involucri, e basta
che uno non erediti l'altezza perché tutto collassi a zero. `.elementor-swiper` è
quello che mi era sfuggito. */
/* `.campo.campo` non è un refuso: Elementor difende il `max-width:100%` dei widget
con `.e-con.e-con > .e-con-inner > .elementor-widget`, che pesa quattro classi.
Ripetere la classe porta questa regola a cinque e la fa vincere. */
.gg-home .e-hero .campo.campo{position:absolute;top:0;bottom:0;left:50%;right:auto;width:100vw;
max-width:none;transform:translateX(-50%);z-index:0;padding:0;margin:0}
.gg-home .e-hero .campo .elementor-widget-container,
.gg-home .e-hero .campo .elementor-swiper,
.gg-home .e-hero .campo .elementor-slides-wrapper,
.gg-home .e-hero .campo .elementor-slides,
.gg-home .e-hero .campo .elementor-main-swiper,
.gg-home .e-hero .campo .swiper,
.gg-home .e-hero .campo .swiper-wrapper,
.gg-home .e-hero .campo .swiper-slide,
.gg-home .e-hero .campo .elementor-repeater-item-,
.gg-home .e-hero .campo .swiper-slide-bg{height:100%}
.gg-home .e-hero .campo .swiper-slide-bg{background-position:50% 44%;background-size:cover}
/* Il nome del luogo: è il Titolo della slide, vestito come la targhetta `.ph` del
mockup — in alto a sinistra, sopra il velo. Descrizione e pulsante restano spenti:
il testo della copertina è quello sotto, scritto a widget. */
.gg-home .e-hero .campo .swiper-slide-inner{display:block;position:absolute;inset:0;
padding:0;margin:0;background:none}
.gg-home .e-hero .campo .swiper-slide-contents{position:absolute;top:18px;left:20px;
width:auto;max-width:none;z-index:4;text-align:left}
.gg-home .e-hero .campo .elementor-slide-heading{margin:0;font-family:var(--font-b);
font-size:10.5px;font-weight:400;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;
background:rgba(14,22,28,.55);color:#fff;padding:4px 9px;display:inline-block}
.gg-home .e-hero .campo .elementor-slide-description,
.gg-home .e-hero .campo .elementor-slide-button{display:none}
@media (max-width:980px){
.gg-home .e-hero .campo .swiper-slide-contents{top:14px;left:14px}
}
.gg-home .e-hero .campo .elementor-swiper-button{z-index:3;width:44px;height:44px;border-radius:0;
color:#fff;background:rgba(14,22,28,.55);display:grid;place-items:center;font-size:18px;
top:16px;bottom:auto;transform:none}
.gg-home .e-hero .campo .elementor-swiper-button:hover{background:rgba(14,22,28,.85)}
.gg-home .e-hero .campo .elementor-swiper-button-prev{left:auto;right:72px}
.gg-home .e-hero .campo .elementor-swiper-button-next{right:20px}
@media (max-width:980px){
.gg-home .e-hero .campo .elementor-swiper-button{top:auto;bottom:16px}
}
/* La parola in filigrana vive dentro un widget HTML, ed Elementor dà a ogni widget
`position:relative`: la parola si ancorava al widget — una scatola alta zero messa
dove capita nel flusso — invece che alla sezione. Il widget che la contiene torna
statico e smette di occupare spazio, così l'ancora ridiventa la sezione. */
.gg-home .elementor-widget:has(> .elementor-widget-container > .fantasma){position:static;
height:0;margin:0;padding:0}
/* ============================================================
SECONDA LETTURA A VIDEO (22/09) — sezioni dalla Strategia in giù
Stessa storia delle altre: le regole del mockup colpivano tag e `
` che qui
non ci sono più, e la disposizione a griglia finiva sull'elemento sbagliato,
perché fra la scheda e il testo c'è l'involucro del widget.
============================================================ */
/* Chi siamo — i riquadri dei numeri erano quadrati: il contenitore portava i 10 px
di padding del kit, che stringevano la colonna e mandavano a capo l'etichetta. */
.gg-home .e-numeri{padding:0}
.gg-home .e-numeri > .elementor-widget{width:100%}
/* Strategia — testo e link. Il colore chiaro stava sul contenitore, ma il widget
di testo ha una regola propria dal kit e vinceva: restava grigio su fondo scuro. */
.gg-home .e-strategia .elementor-widget-text-editor,
.gg-home .e-strategia .elementor-widget-text-editor p{color:#CFE3E5}
.gg-home .e-strategia .storia .elementor-heading-title{color:var(--sole);
border-bottom:2px solid var(--sole);padding-bottom:2px}
/* Strategia — le tre schede documento: contorno, fondo, e le quattro parti al
posto giusto (icona | titolo+riga | scarica). */
.gg-home .e-strategia .scarica{gap:12px;padding:0}
.gg-home .e-strategia .scheda{display:grid;grid-template-columns:auto 1fr auto;gap:2px 16px;
align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
padding:17px 20px}
.gg-home .e-strategia .scheda > .elementor-widget-html{grid-column:1;grid-row:1/3;
display:grid;place-items:center}
.gg-home .e-strategia .scheda svg{width:26px;height:26px;display:block;fill:none;
stroke:var(--sole);stroke-width:1.5}
.gg-home .e-strategia .scheda > .elementor-widget-heading:not(.vai){grid-column:2;grid-row:1}
.gg-home .e-strategia .scheda > .elementor-widget-text-editor{grid-column:2;grid-row:2}
.gg-home .e-strategia .scheda > .vai{grid-column:3;grid-row:1/3}
.gg-home .e-strategia .scheda .elementor-heading-title{font-family:var(--font-d);font-size:16.5px;
font-weight:500;line-height:1.25;color:#fff}
.gg-home .e-strategia .scheda .vai .elementor-heading-title{font-size:12px;font-weight:600;
letter-spacing:.11em;text-transform:uppercase;color:var(--sole)}
.gg-home .e-strategia .scheda small{font-size:13px;color:#CFE3E5}
/* Progetti — le tre schede: la disposizione a due colonne era scritta per `h3`,
`p` e `.vai`, che qui stanno dentro tre involucri. Va data agli involucri. */
.gg-home .e-ssl .scheda > .elementor-widget-heading:not(.vai){grid-column:1;grid-row:1}
.gg-home .e-ssl .scheda > .elementor-widget-text-editor{grid-column:1;grid-row:2}
.gg-home .e-ssl .scheda > .vai{grid-column:2;grid-row:1/3;align-self:center}
.gg-home .e-ssl .scheda .elementor-heading-title{font-family:var(--font-d);font-size:14.5px;
font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.gg-home .e-ssl .scheda .vai .elementor-heading-title{font-size:12px;letter-spacing:.1em;
color:var(--terra-d);border-bottom:2px solid currentColor;padding-bottom:2px}
/* Domanda — i cinque passi. Il cerchio era `.e-passo i`, ma quell'`` il tema lo
sostituisce con l'SVG in fase di stampa: restava un disegno nero grande 300 px.
Il cerchio diventa l'involucro del widget, il segno sta dentro. */
.gg-home .e-passo{text-align:center;align-items:center}
.gg-home .e-passo > .elementor-widget-html{width:76px;height:76px;margin:0 auto 12px;
border-radius:50%;background:var(--sabbia-l);border:3px solid var(--bianco);
display:grid;place-items:center;flex:0 0 auto}
.gg-home .e-passo svg{width:32px;height:32px;display:block;fill:none;stroke:var(--terra-x);
stroke-width:1.5}
.gg-home .e-passo .ordine .elementor-heading-title{font-family:var(--font-d);font-size:10.5px;
font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-d)}
.gg-home .e-passo .elementor-widget-text-editor span{font-size:13.5px;color:var(--ink-2);
display:block;max-width:16ch;margin:0 auto}
/* facciamo futuro — la frase era grigia su fondo scuro: stesso caso della Strategia. */
.gg-home .e-fascia .elementor-widget-text-editor,
.gg-home .e-fascia .elementor-widget-text-editor p{color:#fff;font-family:var(--font-d);
font-size:clamp(19px,2.3vw,28px);font-weight:200;line-height:1.28;max-width:26ch;margin:0}
.gg-home .e-fascia .eyebrow .elementor-heading-title{color:var(--sole)}
/* Newsletter — il pulsante c'era ma travestito da secondo campo: la regola del
mockup vestiva *ogni* input del modulo, compreso il submit. */
.gg-home .e-chiusa .tnp-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
align-items:center}
.gg-home .e-chiusa .tnp-email{width:min(360px,74vw)}
.gg-home .e-chiusa input.tnp-submit{width:auto;min-width:170px;height:49px;padding:0 26px;
background:var(--sole);color:var(--ink);border:0;font-family:var(--font-d);font-weight:600;
font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.gg-home .e-chiusa input.tnp-submit:hover{background:#FFC231}
/* Ritocchi di Marco (22/09), ristretti alla sezione: il contenitore del widget a
metà altezza centra il segno dentro il cerchio. La stessa riga scritta sul
selettore di Elementor (`.e-con > .e-con-inner > .elementor-widget > …`) varrebbe
per ogni widget del sito. */
.gg-home .e-passo .elementor-widget-html > .elementor-widget-container{height:45%}
/* Il box «Hai bisogno di aiuto?»: quattro widget in una griglia a due colonne, senza
posizione esplicita il testo finiva sotto l'icona. */
.gg-home .e-aiuto > .elementor-widget-html{grid-column:1;grid-row:1/4;align-self:start}
.gg-home .e-aiuto > .elementor-widget-heading:not(.vai-scuro){grid-column:2;grid-row:1}
.gg-home .e-aiuto > .elementor-widget-text-editor{grid-column:2;grid-row:2}
.gg-home .e-aiuto > .vai-scuro{grid-column:2;grid-row:3;margin-top:6px}
.gg-home .e-aiuto .elementor-heading-title{font-family:var(--font-d);font-size:16px;font-weight:600}
.gg-home .e-aiuto .vai-scuro .elementor-heading-title{font-size:12.5px;font-weight:600;
letter-spacing:.11em;text-transform:uppercase;color:var(--terra-d);
border-bottom:2px solid currentColor;padding-bottom:2px}
/* Social: la testa della sezione aveva le regole solo dentro `.e-news`. */
.gg-home .e-social .testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 20px;
margin-bottom:30px}
.gg-home .e-social .testa .elementor-heading-title{font-family:var(--font-d);
font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em}
.gg-home .e-social .testa .vai{margin-left:auto}
.gg-home .e-social .testa .vai .elementor-heading-title{font-size:12.5px;font-weight:600;
letter-spacing:.11em;text-transform:uppercase;color:var(--mare-d);
border-bottom:2px solid var(--mare-d);padding-bottom:2px}
/* Social — feed Facebook (Smash Balloon) dentro il box. Il plugin scrive le sue
regole con #cff: qui l'id è ripetuto con una classe in più per pareggiare il
peso. Le schede in rilievo del plugin diventano righe piatte, come i box vicini. */
.gg-home .canale .feed{padding:15px;flex:1}
.gg-home .canale .feed #cff .cff-header,
.gg-home .canale .feed #cff .cff-share-container,
.gg-home .canale .feed #cff .cff-dot{display:none}
.gg-home .canale .feed #cff .cff-posts-wrap{padding:0}
.gg-home .canale .feed #cff .cff-item.cff-box{background:none;box-shadow:none;margin:0;
padding:0 0 14px;border-bottom:1px solid var(--linea)}
.gg-home .canale .feed #cff .cff-item.cff-box + .cff-item.cff-box{padding-top:14px}
.gg-home .canale .feed #cff .cff-item.cff-box:last-child{border-bottom:0;padding-bottom:0}
.gg-home .canale .feed #cff .cff-text{font-size:14px;line-height:1.55;color:var(--ink-2)}
.gg-home .canale .feed #cff .cff-text a{color:var(--ink)}
.gg-home .canale .feed #cff .cff-media-link{font-size:12.5px;color:var(--ink-2)}
.gg-home .canale .feed #cff .cff-post-links{font-family:var(--font-d);font-size:12px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase}
.gg-home .canale .feed #cff .cff-post-links a{color:var(--mare-d)}
/* Social — YouTube dal feed RSS ([gg-youtube] in functions.php). Stesse classi del
mockup (.foto, .play, .corpo): qui solo ciò che il link e l'elenco aggiungono. */
.gg-home .gg-youtube{display:flex;flex-direction:column;height:100%}
/* hqdefault è 4:3 con le bande nere dentro: tagliato a 16:9 le bande spariscono */
.gg-home .gg-youtube a.foto{display:block;aspect-ratio:16/9}
/* il contenitore di Elementor porta 10px di padding suo: i box del mockup non ne hanno */
.gg-home .canale.e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px}
.gg-home .gg-youtube .corpo a{color:var(--ink);text-decoration:none}
.gg-home .gg-youtube .corpo a:hover b,.gg-home .gg-youtube .altri a:hover{text-decoration:underline}
.gg-home .gg-youtube .data{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.gg-home .gg-youtube .altri{list-style:none;margin:0;padding:0 15px 15px;font-size:13.5px}
.gg-home .gg-youtube .altri li{padding-top:11px;border-top:1px solid var(--linea)}
.gg-home .gg-youtube .altri li + li{margin-top:11px}
.gg-home .gg-youtube .altri a{color:var(--ink);text-decoration:none}
.gg-home .gg-youtube .altri .data{margin-top:3px}
/* Notizie senza immagine in evidenza: Elementor non stampa il widget e il riquadro
resta vuoto. Lo riempiono l'incisione del promontorio e il nome del GAL su sabbia.
Testo terra scura su sabbia: 4,92:1. Il corpo segue la larghezza del riquadro
(unità cqw), così vale per la miniatura e per la notizia grande. */
.gg-home .e-news .img:not(:has(img)){container-type:inline-size;
background:var(--sabbia) url(../img/incisione.svg) center 32% / 62% auto no-repeat}
.gg-home .e-news .img:not(:has(img))::after{content:"GAL Gargano" / "";position:absolute;
left:0;right:0;bottom:9%;text-align:center;font-family:var(--font-d);font-weight:600;
font-size:max(10px,4.4cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-x)}
/* Barra dell'avviso da [gg-avviso]: il widget Shortcode è un solo figlio della riga,
quindi la riga flessibile la rifà il contenitore dello shortcode. Le parti interne
(.stato, b, .conto, .vai) usano le regole del mockup più su. */
.gg-home .e-bando .elementor-widget-shortcode{flex:1 1 100%}
.gg-home .e-bando .gg-avviso{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.gg-home .e-bando .gg-avviso a{color:var(--ink);text-decoration:none}
/* nessun avviso aperto: la fascia gialla non resta vuota, sparisce */
.gg-home .e-bando:not(:has(.gg-avviso)){display:none}