.elementor-kit-6{--e-global-color-primary:#056CB6;--e-global-color-secondary:#032740;--e-global-color-text:#000000;--e-global-color-accent:#056CB6;--e-global-typography-primary-font-family:"Geist";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Geist";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Geist";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Geist";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1680px;}.e-con{--container-max-width:1680px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================== ANIMAZIONE E RIDIMENSIONAMENTO FRECCE (button-primary, button-secondary, link) ========================================================== */ /* 1. Stato di Default: Dimensione 14px e preparazione transizione */ html body .button-primary .elementor-button-icon, html body .button-secondary .elementor-button-icon, html body .link .elementor-button-icon, html body .button-primary .elementor-button-icon svg, html body .button-secondary .elementor-button-icon svg, html body .link .elementor-button-icon svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; transform: rotate(0deg) !important; transform-origin: center center !important; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; } /* 2. Stato in Hover: Rotazione a 45° verso destra (→) */ html body .button-primary:hover .elementor-button-icon, html body .button-secondary:hover .elementor-button-icon, html body .link:hover .elementor-button-icon, html body .button-primary:hover .elementor-button-icon svg, html body .button-secondary:hover .elementor-button-icon svg, html body .link:hover .elementor-button-icon svg, html body .button-primary .elementor-button:hover .elementor-button-icon svg, html body .button-secondary .elementor-button:hover .elementor-button-icon svg, html body .link .elementor-button:hover .elementor-button-icon svg { transform: rotate(45deg) !important; } /* ===== EA-SCROLL-EXPAND — animazione scroll-driven riutilizzabile ===== */ .ea-scroll-expand{--scroll-progress:0;--ea-scale-from:.9;--ea-scale-to:1;--ea-radius-from:24px;--ea-radius-to:4px;transform:scale(calc(var(--ea-scale-from) + (var(--ea-scale-to) - var(--ea-scale-from)) * var(--scroll-progress)));transform-origin:center center;border-radius:calc(var(--ea-radius-from) + (var(--ea-radius-to) - var(--ea-radius-from)) * var(--scroll-progress)) !important;will-change:transform,border-radius;} @media (prefers-reduced-motion: reduce){.ea-scroll-expand{transform:none !important;}} /* #vantaggi: piccola al centro -> zoom uniforme dal centro; stato finale a piena larghezza in 16:9 */ #vantaggi .elementor-element-x4y1hzj{width:100% !important;max-width:100% !important;} #vantaggi .ea-scroll-expand.elementor-element-6upg0v3{--ea-scale-from:.5;--ea-scale-to:1;--ea-radius-from:20px;--ea-radius-to:4px;width:100% !important;max-width:100% !important;aspect-ratio:16 / 9 !important;min-height:0 !important;height:auto !important;transition:transform .12s linear,border-radius .12s linear;} /* ===== /EA-SCROLL-EXPAND ===== */ /* ===== EA-SCROLL-REVEAL — text reveal allo scroll (riutilizzabile) ===== */ .ea-scroll-reveal{--scroll-progress:0;opacity:calc(0.3 + 0.7 * var(--scroll-progress));transform:translateY(calc((1 - var(--scroll-progress)) * 16px));transition:opacity .12s linear, transform .12s linear;will-change:opacity,transform;} @media (prefers-reduced-motion: reduce){.ea-scroll-reveal{opacity:1 !important;transform:none !important;}} /* ===== /EA-SCROLL-REVEAL ===== */ /* ===== EA-ACCORDION-MINIMAL — accordion minimale a linee (riutilizzabile) ===== */ .ea-accordion-minimal .elementor-accordion .elementor-accordion-item{border:0 !important;border-top:1px solid #E3E4E6 !important;background:transparent !important;} .ea-accordion-minimal .elementor-accordion .elementor-accordion-item:last-child{border-bottom:1px solid #E3E4E6 !important;} .ea-accordion-minimal .elementor-tab-title{display:flex !important;align-items:center;justify-content:space-between;gap:16px;background:transparent !important;border:0 !important;padding:22px 0 !important;} .ea-accordion-minimal .elementor-tab-title .elementor-accordion-title{order:1;} .ea-accordion-minimal .elementor-tab-title .elementor-accordion-icon{order:2;margin:0 0 0 auto !important;padding:0 !important;width:auto !important;float:none !important;} .ea-accordion-minimal .elementor-tab-title,.ea-accordion-minimal .elementor-tab-title:hover,.ea-accordion-minimal .elementor-tab-title.elementor-active,.ea-accordion-minimal .elementor-tab-title .elementor-accordion-title{color:#1A1A1A !important;} .ea-accordion-minimal .elementor-tab-title .elementor-accordion-icon i,.ea-accordion-minimal .elementor-tab-title .elementor-accordion-icon svg{color:#1A1A1A !important;fill:#1A1A1A !important;} .ea-accordion-minimal .elementor-tab-content{border:0 !important;background:transparent !important;padding:0 0 22px 0 !important;font-weight:300 !important;color:#5F6366 !important;} /* ===== /EA-ACCORDION-MINIMAL ===== */ /* ===== EA-SEQ-REVEAL — reveal parola-per-parola + comparsa in cascata (riutilizzabile) ===== */ /* Riposo delle parole: 30% del colore del titolo corrente, mai invisibili. Si usa opacity, non un colore fisso: e' color-agnostica, quindi la stessa regola vale su fondo scuro e chiaro. Override per singolo titolo: --ea-word-rest sull'elemento (0 = comportamento precedente). */ :root{--ea-word-rest:.3;} .ea-char{display:inline-block;white-space:pre;} .ea-seq-driver.ea-seq-ready .ea-char{opacity:calc(var(--ea-word-rest,.3) + (1 - var(--ea-word-rest,.3)) * clamp(0, calc((var(--scroll-progress,0) - var(--char-start,0)) / .05), 1));} .ea-seq-driver.ea-seq-ready .ea-reveal-after{opacity:clamp(0, calc((var(--scroll-progress,0) - var(--ra-start,.55)) / .25), 1);transform:translateY(calc((1 - clamp(0, calc((var(--scroll-progress,0) - var(--ra-start,.55)) / .25), 1)) * 14px));transition:opacity .12s linear, transform .12s linear;will-change:opacity,transform;} @media (prefers-reduced-motion: reduce){.ea-seq-driver.ea-seq-ready .ea-char,.ea-seq-driver.ea-seq-ready .ea-reveal-after{opacity:1 !important;transform:none !important;}} /* ===== /EA-SEQ-REVEAL ===== */ /* ===== EA-SHOWCASE — video con espansione full-bleed allo scroll ===== */ /* La utility .ea-scroll-expand serve solo a farsi calcolare --scroll-progress dal driver: il suo scale() qui viene neutralizzato, perche' ingrandirebbe il video dentro al container senza mai raggiungere i bordi. Si usa invece la tecnica full-bleed del design (50% - 50vw): la cornice parte inserita del 28% per lato e arriva esattamente agli estremi del viewport. */ .l-showcase .ea-scroll-expand{--exp:var(--scroll-progress,0);--m0:28%;position:relative;overflow:hidden;transform:none;width:auto;max-width:none;margin-left:calc(var(--m0) * (1 - var(--exp)) + (50% - 50vw) * var(--exp));margin-right:calc(var(--m0) * (1 - var(--exp)) + (50% - 50vw) * var(--exp));border-radius:calc(26px * (1 - var(--exp)))!important;} /* parallasse interno: il video si stringe mentre la cornice si apre */ .l-showcase .ea-scroll-expand iframe{transform:scale(calc(1.12 - .12 * var(--exp)));transform-origin:center;} /* scrim cinematografico che entra con l'espansione. Si usa ::after perche' Elementor riserva .e-con::before allo sfondo dei container. */ .l-showcase .ea-scroll-expand::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(3,39,64,0) 55%,rgba(3,39,64,.42));opacity:var(--exp);z-index:1;} /* controllo decorativo sopra il video */ .l-showcase .l-showcase__control{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);width:auto;z-index:2;pointer-events:none;opacity:calc(.25 + .75 * var(--exp));transform:translateY(calc(14px * (1 - var(--exp))));} .l-showcase .l-showcase__play{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .l-showcase .l-showcase__pill{width:auto;display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:rgba(3,39,64,.55);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);} .l-showcase .l-showcase__pill p{margin:0;} @media (max-width:820px){.l-showcase .ea-scroll-expand{--m0:4%;}} @media (prefers-reduced-motion:reduce){.l-showcase .ea-scroll-expand{--exp:1;}.l-showcase .ea-scroll-expand iframe{transform:none;}} /* ===== /EA-SHOWCASE ===== */ /* ===== EA-SCROLL-REVEAL-CTA — manifesto: gradiente che sale allo scroll ===== */ .l-quote{--wipe:clamp(0,calc((var(--scroll-progress,0) - .12) / .63),1);position:relative;} /* Passaggio NETTO nero -> bianco: rampa larga il 2% del wipe, il grigio intermedio non e' percepibile. Ogni blocco commuta quando il fronte del gradiente lo raggiunge, dal basso verso l'alto. */ .l-quote{--f-h:clamp(0,calc((var(--wipe) - .77) / .02),1);--f-list:clamp(0,calc((var(--wipe) - .49) / .02),1);} .l-quote .imp-row:nth-child(1){--f-row:clamp(0,calc((var(--wipe) - .375) / .02),1);} .l-quote .imp-row:nth-child(2){--f-row:clamp(0,calc((var(--wipe) - .26) / .02),1);} .l-quote .imp-row:nth-child(3){--f-row:clamp(0,calc((var(--wipe) - .15) / .02),1);} .l-quote .l-quote__pin{position:sticky;top:0;} /* ::after e non ::before: Elementor riserva .e-con::before allo sfondo dei container, e il suo top:0 sovra-vincolerebbe il box facendolo scendere. */ .l-quote .l-quote__pin::after{content:"";position:absolute;top:auto;bottom:0;left:0;right:0;width:auto;height:calc(var(--wipe) * 100%);background:radial-gradient(ellipse 130% 150% at 10% 100%,#8DC7F3 0%,#056CB6 45%,#032740 100%);opacity:1;mix-blend-mode:normal;z-index:0;pointer-events:none;} .l-quote .l-quote__pin > *{position:relative;z-index:1;} .l-quote .l-quote__h .elementor-heading-title{color:color-mix(in srgb,#fff calc(var(--f-h) * 100%),#000)!important;} .l-quote .l-quote__h b{font-weight:700;color:inherit;} /* La lista resta DENTRO il container, allineata al titolo: cosi' segue automaticamente la larghezza globale (min(95%,1640px)) senza padding calcolati a mano. Sono solo i bordi a estendersi fino ai margini schermo. */ .l-quote .l-imp__list{position:relative;} .l-quote .l-imp__list::after{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:1px;background:color-mix(in srgb,rgba(255,255,255,.38) calc(var(--f-list) * 100%),#D3D5D6);pointer-events:none;} .l-quote .imp-row{position:relative;padding:clamp(12px,1.5vw,22px) 0;} .l-quote .imp-row::after{content:"";position:absolute;bottom:0;left:calc(50% - 50vw);width:100vw;height:1px;background:color-mix(in srgb,rgba(255,255,255,.38) calc(var(--f-row,0) * 100%),#D3D5D6);pointer-events:none;} .l-quote .imp-row__name .elementor-heading-title{color:color-mix(in srgb,#fff calc(var(--f-row,0) * 100%),#000)!important;} .l-quote .imp-row__desc,.l-quote .imp-row__desc p{color:color-mix(in srgb,rgba(255,255,255,.8) calc(var(--f-row,0) * 100%),#000)!important;} /* Distanza fra nome e sottotitolo: si azzera lo spazio automatico fra widget di Elementor, che da solo valeva una ventina di pixel. */ .l-quote .imp-row__text{gap:0;} .l-quote .imp-row__text > .elementor-widget{margin-block-end:0!important;} .l-quote .imp-row__desc{margin-block-start:clamp(2px,.35vw,5px)!important;} .l-quote .imp-row__desc p{margin:0;} .l-quote .imp-row__arrow svg{filter:brightness(0) invert(var(--f-row,0));transition:transform .32s cubic-bezier(.25,.1,.25,1);} .l-quote .imp-row:hover .imp-row__arrow svg{transform:rotate(45deg);} .l-quote .l-quote__cta .elementor-button{background-color:#056CB6;border-color:#056CB6;color:#fff;} .l-quote a.imp-row{text-decoration:none;color:inherit;} @media (max-height:860px){.l-quote .imp-row__desc{display:none;}} @media (max-width:820px){.l-quote .imp-row__desc{display:none;}} @media (prefers-reduced-motion:reduce){.l-quote{--wipe:1;}} /* ===== /EA-SCROLL-REVEAL-CTA ===== */ /* ===== EA-SOLUTION-CARD — card dei caroselli soluzioni/servizi ===== Le regole erano ancorate a .l-soluzioni, ma la classe .ea-solution-card E' il componente: lo scope alla sezione era incidentale e impediva di riusare le card fuori dalla home. Ora valgono ovunque compaia la card, cosi' gradiente, scorrimento in hover e rotazione della freccia sono identici su tutti i caroselli. */ .ea-solution-card{position:relative;text-decoration:none;color:#fff;transition:background-position .9s cubic-bezier(.25,.1,.25,1);} .ea-solution-card--content{background:linear-gradient(180deg,#032740 0%,#0a3f66 32%,#3d82c4 66%,#a9d4f7 100%);background-size:100% 200%;background-position:50% 0%;} .ea-solution-card--content:hover{background-position:50% 100%;} /* card immagine: l'immagine riempie la card */ .ea-solution-card--image .elementor-widget-image,.ea-solution-card--image .elementor-widget-container{position:absolute;inset:0;height:100%;} .ea-solution-card--image img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.25,.1,.25,1);} .ea-solution-card--image:hover img{transform:scale(1.025);} /* la freccia della CTA ruota all'hover della card, come nel design */ .ea-solution-card__cta .ea-link__icon svg{transition:transform .2s ease-out;} .ea-solution-card--content:hover .ea-link__icon svg{transform:rotate(45deg);} .ea-solution-card p{margin:0;} /* Elementor dichiara .elementor-swiper-button come inline-flex ma non imposta gli assi: senza questi due l'SVG si appoggia in alto a sinistra invece che al centro del cerchio. Vale per tutti i caroselli. */ .elementor-swiper-button{align-items:center;justify-content:center;} .elementor-swiper-button svg{display:block;} /* frecce del carosello: tonde, in stile con il fondo scuro */ .l-soluzioni .elementor-swiper-button{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.42);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);color:#fff;} .l-soluzioni .elementor-swiper-button:hover{background:#fff;border-color:#fff;color:#032740;} /* mobile: cerchio piu compatto, icona ridotta via parametro arrows_size */ @media (max-width:767px){.l-soluzioni .elementor-swiper-button{width:40px;height:40px;}} /* Frecce del carosello prodotti (.l-showcase): stessa geometria di quelle soluzioni, palette invertita perche' qui il fondo e' chiaro (#FFFFFF e card bianche, le frecce sono in posizione 'inside' e ci stanno sopra). Il colore dell'icona NON si imposta qui: il plugin scrive fill sull'SVG da --arrow-normal-color, che vince per specificita'. Si usa il controllo nativo Colore delle frecce (arrow_normal_color / arrow_hover_color). */ .l-showcase .elementor-swiper-button{width:48px;height:48px;border-radius:50%;background:rgba(3,39,64,.06);border:1px solid rgba(3,39,64,.20);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);} .l-showcase .elementor-swiper-button:hover{background:#032740;border-color:#032740;} @media (max-width:767px){.l-showcase .elementor-swiper-button{width:40px;height:40px;}} /* ===== PAGINAZIONE CAROSELLI — pallino inattivo, pillola attiva ===== Attenzione alla cascata: post-6.css viene caricato PRIMA dei CSS dei widget carosello, quindi a parita' di specificita' vincerebbe il plugin. Questi selettori valgono 0-3-0 contro il suo 0-2-0: niente !important. Dimensione e colore del pallino inattivo restano sui controlli nativi (dots_size, dots_normal_color, dots_hover_color). Qui c'e' solo cio' che Elementor non espone: la forma a pillola dello stato attivo. */ .elementor-widget-loop-carousel.elementor-element .swiper-pagination-bullet, .elementor-widget-n-carousel.elementor-element .swiper-pagination-bullet{border-radius:50%;opacity:1;transition:width .3s ease, background-color .3s ease, border-radius .3s ease;} .elementor-widget-loop-carousel.elementor-element .swiper-pagination-bullet-active, .elementor-widget-n-carousel.elementor-element .swiper-pagination-bullet-active{width:24px;border-radius:20px;} /* colore dello stato attivo: nessun controllo nativo lo espone. Il :hover serve perche' la regola hover del plugin ha la stessa specificita' ed e' caricata dopo: senza, la pillola attiva cambierebbe colore al passaggio. */ .l-soluzioni .elementor-element .swiper-pagination-bullet-active, .l-soluzioni .elementor-element .swiper-pagination-bullet-active:hover{background:#fff;} .l-showcase .elementor-element .swiper-pagination-bullet-active, .l-showcase .elementor-element .swiper-pagination-bullet-active:hover{background:#032740;} @media (prefers-reduced-motion:reduce){.ea-solution-card,.ea-solution-card--image img{transition:none;}} /* ===== /EA-SOLUZIONI ===== */ /* ===== EA-CONTAINER — larghezza unica dei contenuti ===== */ /* Tetto a 1640px. Sotto quella soglia il contenuto occupa al massimo il 95% dello spazio disponibile, cosi' resta sempre un margine laterale e nessuna sezione arriva a filo schermo. */ .elementor .e-con-boxed > .e-con-inner{width:min(95%,1640px);max-width:min(95%,1640px);margin-inline:auto;} /* ===== /EA-CONTAINER ===== */ /* ===== EA HERO SERVICE — hero riutilizzabile per le pagine di servizio ===== Replica di .epc-hero del prototipo impianti-chiavi-in-mano.html: glow radiale azzurro su bianco che insegue il puntatore (il JS scrive --mouse-x e --mouse-y; senza JS resta la posizione di default 85% / 4%). Le variabili sono dichiarate sul componente perche' il sito non espone token globali. Il prefisso .elementor serve a battere le regole .e-con di Elementor, che scrivono display/min-height da custom property. */ .ea-hero-service{ --navy:#032740;--blue:#056CB6;--light-blue:#8DC7F3;--white:#FFFFFF; --text-primary:#31312F; --page-gutter:20px;--content-max-width:1680px; --duration-micro:200ms;--ease-standard:cubic-bezier(0.25,0.1,0.25,1); } @media (min-width:768px){.ea-hero-service{--page-gutter:32px;}} @media (min-width:1024px){.ea-hero-service{--page-gutter:48px;}} @media (min-width:1280px){.ea-hero-service{--page-gutter:80px;}} .elementor .ea-hero-service{ position:relative; min-height:82svh; overflow:hidden; padding:max(160px,24vh) 0 clamp(56px,7vh,96px); background:radial-gradient(58% 60% at var(--mouse-x,85%) var(--mouse-y,4%),rgba(141,199,243,.62) 0%,rgba(141,199,243,.16) 34%,rgba(255,255,255,0) 62%),var(--white); color:var(--text-primary); } .ea-hero-service .ea-hero-service__kicker{ font-size:clamp(14px,1.05vw,17px);font-weight:300;letter-spacing:.02em; text-transform:uppercase;color:#000000;margin:0 0 clamp(22px,2.4vw,32px); } .ea-hero-service .ea-hero-service__kicker p{margin:0;} .ea-hero-service .ea-hero-service__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(32px,5vw,88px); align-items:end; } .ea-hero-service .ea-hero-service__h .elementor-heading-title{ font-size:clamp(47px,5.9vw,100px);font-weight:400;line-height:.98; letter-spacing:-.05em;margin:0;max-width:16ch;color:var(--text-primary); } .ea-hero-service .ea-hero-service__h .elementor-heading-title b{font-weight:700;} .ea-hero-service .ea-hero-service__aside{padding-block-end:6px;} .ea-hero-service .ea-hero-service__sub{ font-size:clamp(17px,1.35vw,21px);font-weight:300;line-height:1.5; color:#000000;margin:0 0 clamp(28px,3vw,36px); } .ea-hero-service .ea-hero-service__sub p{margin:0;} @media (max-width:900px){ .ea-hero-service .ea-hero-service__grid{grid-template-columns:1fr;align-items:start;gap:32px;} .ea-hero-service .ea-hero-service__h .elementor-heading-title{max-width:none;} .ea-hero-service .ea-hero-service__aside{padding-block-end:0;} } /* Variante ancora: il bottone porta a un'ancora piu' in basso nella pagina, quindi in hover la freccia ruota fino a puntare verso il basso. La freccia e' disegnata rivolta a nord-est: 135deg in senso orario la porta esattamente a sud. Stessa curva e durata delle altre icone del kit. La rotazione e' applicata solo allo span .elementor-button-icon e non anche all'svg interno, altrimenti si sommerebbe due volte. */ .bottone-ancora .elementor-button .elementor-button-icon{ transform:rotate(0deg); transform-origin:center center; transition:transform .3s cubic-bezier(.25,1,.5,1); } .bottone-ancora .elementor-button:hover .elementor-button-icon{transform:rotate(135deg);} /* ===== HEADER SULLE PAGINE A FONDO CHIARO ===== L'header parte trasparente con logo e testi bianchi: su una pagina chiara risulterebbe invisibile. Qui lo stato .is-scrolled (vetro chiaro, logo scuro, testi navy) viene applicato fin dal caricamento. Si attiva da solo dove c'e' una hero di servizio; per qualsiasi altra pagina chiara basta aggiungere la classe .ea-header-chiaro a un elemento. E' CSS puro e non JS: nessuno sfarfallio bianco prima dell'esecuzione. Le specificita' (0-3-2, 0-2-3 e 0-4-2) battono sia lo stato iniziale sia quello .is-scrolled, quindi allo scroll l'aspetto non cambia. */ body:has(.ea-hero-service) header.elementor-location-header .header-trasparente, body:has(.ea-header-chiaro) header.elementor-location-header .header-trasparente{ background:rgba(253,253,251,.82)!important; -webkit-backdrop-filter:saturate(1.4) blur(14px)!important; backdrop-filter:saturate(1.4) blur(14px)!important; border-color:rgba(3,39,64,.08)!important; box-shadow:0 8px 30px rgba(3,39,64,.1)!important; } /* inversione dei loghi: nasconde il chiaro, mostra lo scuro */ body:has(.ea-hero-service) header.elementor-location-header .elementor-element-56b2ebe, body:has(.ea-header-chiaro) header.elementor-location-header .elementor-element-56b2ebe{display:none!important;} body:has(.ea-hero-service) header.elementor-location-header .elementor-element-1c13719, body:has(.ea-header-chiaro) header.elementor-location-header .elementor-element-1c13719{display:block!important;} /* testi navy */ body:has(.ea-hero-service) header.elementor-location-header .elementor-nav-menu--main .elementor-item, body:has(.ea-hero-service) header.elementor-location-header a, body:has(.ea-header-chiaro) header.elementor-location-header .elementor-nav-menu--main .elementor-item, body:has(.ea-header-chiaro) header.elementor-location-header a{color:#032740!important;} /* ===== EA SHELL — guscio di contenuto condiviso dalle row di servizio. Stessa formula e stessa scala di gutter della hero, cosi' i bordi sinistro e destro di tutte le row restano allineati a ogni risoluzione (20px su mobile, come da standard del progetto). */ .ea-shell{ --page-gutter:20px;--content-max-width:1680px; width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max-width)); margin-inline:auto; } @media (min-width:768px){.ea-shell{--page-gutter:32px;}} @media (min-width:1024px){.ea-shell{--page-gutter:48px;}} @media (min-width:1280px){.ea-shell{--page-gutter:80px;}} /* ===== ROW METODO — intestazione delle pagine di servizio ===== */ /* Il prefisso .elementor porta questi selettori a 0-3-1 / 0-2-1. Serve: le regole globali di Elementor (.elementor-widget-heading .elementor-heading-title e .elementor-widget-text-editor) valgono 0-2-0 e 0-1-0 ma sono servite DOPO il kit, quindi a parita' vincevano loro. Senza questo, l'H2 ereditava font-weight 600 dalla tipografia globale e le parole in grassetto (700) non si distinguevano da quelle normali. */ .elementor .epc-show__title .elementor-heading-title{ font-size:clamp(28px,3.6vw,38px);font-weight:400;line-height:1.05; letter-spacing:-.035em;margin:0;color:#000000;text-wrap:balance; } .elementor .epc-show__sub{ font-size:clamp(16px,1.25vw,19px);font-weight:400;line-height:1.5; color:#000000;margin-block-start:clamp(20px,2.4vw,32px);max-width:65%; } .elementor .epc-show__sub p{margin:0;} @media (max-width:820px){.elementor .epc-show__sub{max-width:none;}} /* ===== ROW CONFRONTO — stacking cards sticky ===== Struttura, sfondi, spaziature, ombre e animazione d'ingresso sono tutti controlli nativi Elementor. Qui resta solo cio' che Elementor non esprime: lo sticky (il controllo Position offre Absolute e Fixed ma non Sticky) e la tipografia fluida con clamp(). Per lo sticky non forzo una regola: valorizzo --position, la stessa custom property che Elementor usa gia' con position:var(--position). */ .ea-confronto-epc .stk{position:relative;padding-block-end:clamp(20px,3vw,40px);} .ea-confronto-epc .stk__card{--position:sticky;} .ea-confronto-epc .stk__card:nth-child(1){top:96px;} .ea-confronto-epc .stk__card:nth-child(2){top:120px;} .ea-confronto-epc .stk__card:nth-child(3){top:144px;} .ea-confronto-epc .stk__card:nth-child(4){top:168px;} .elementor .stk__num .elementor-heading-title{ font-size:clamp(38px,4.4vw,64px);font-weight:300;letter-spacing:-.03em; line-height:1;color:#ffffff;margin:0; } .elementor .stk__title .elementor-heading-title{ font-size:clamp(24px,2.6vw,40px);font-weight:700;letter-spacing:-.02em; line-height:1.06;color:#ffffff;margin:0;max-width:22ch; } .elementor .stk__body{font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:#ffffff;} .elementor .stk__body p{margin:0;} .stk__col--pb .stk__body{font-weight:400;} .stk__col--sol .stk__body{font-weight:700;} /* etichetta: pastiglia tonda attorno all'icona nativa dell'Icon List */ .elementor .stk__lab .elementor-icon-list-item{align-items:center;} .elementor .stk__lab .elementor-icon-list-icon{ flex:0 0 auto;width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center; /* Elementor da' all'svg un margine destro pari a un quarto della sua dimensione, per staccarlo dal testo. Dentro il cerchio quel margine sbilancia la scatola e l'icona risulta fuori centro: si azzera dalla custom property del plugin, senza !important. Lo stacco dal testo lo fornisce comunque .elementor-icon-list-text con il suo padding. */ --e-icon-list-icon-margin: 0; } .elementor .stk__lab .elementor-icon-list-icon svg{display:block;} .elementor .stk__lab .elementor-icon-list-text{ font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; } .stk__col--pb .stk__lab .elementor-icon-list-icon{background:rgba(255,255,255,.1);} .stk__col--pb .stk__lab .elementor-icon-list-icon svg{fill:rgba(255,255,255,.6);} .stk__col--pb .stk__lab .elementor-icon-list-text{color:#ffffff;} .stk__col--sol .stk__lab .elementor-icon-list-icon{background:rgba(141,199,243,.18);} .stk__col--sol .stk__lab .elementor-icon-list-icon svg{fill:#8DC7F3;} .stk__col--sol .stk__lab .elementor-icon-list-text{color:#8DC7F3;} /* sotto i 760px lo stacking si scioglie: le card tornano in flusso */ @media (max-width:760px){ .ea-confronto-epc .stk__card{--position:static;top:auto;} } /* ===== MICRO-RIFLETTORE DENTro LE CARD SCURE ===== Alone azzurro che segue il cursore. Il JS del tema figlio scrive --mx e --my in percentuale; senza JS il gradiente resta al centro e comunque invisibile, perche' l'opacita' sale solo in hover. Si usa ::after e non ::before: Elementor riserva .e-con::before allo sfondo dei container. isolation:isolate confina il mix-blend-mode alla card, altrimenti lo screen schiarirebbe anche cio' che sta sotto. */ .stk__card, .arch-macro{isolation:isolate;} .stk__card::after,.arch-macro::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;opacity:0;z-index:4; transition:opacity .6s cubic-bezier(0.25,0.1,0.25,1); /* Lo stop finale e' rgba(141,199,243,0) e non 'transparent': transparent vale rgba(0,0,0,0), quindi l'interpolazione passa per il nero e lascia un bordo circolare visibile. Stessa tinta ad alfa zero = sfumatura pulita. Le tappe intermedie rendono la caduta piu' graduale e il raggio piu' ampio con alfa piu' bassa la rende leggera e uniforme. */ background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%), rgba(141,199,243,.16) 0%, rgba(141,199,243,.095) 28%, rgba(141,199,243,.04) 52%, rgba(141,199,243,.012) 68%, rgba(141,199,243,0) 82%); mix-blend-mode:screen; } .stk__card:hover::after, .arch-macro:hover::after{opacity:1;} @media (pointer:coarse){.stk__card::after,.arch-macro::after{display:none;}} @media (prefers-reduced-motion:reduce){.stk__card::after,.arch-macro::after{display:none;}} /* Grassetto dentro il word-split di .ea-reveal-letters. Lo splitter marca con .b le parole comprese fra /, che il testo del widget puo' contenere: cosi' il titolo resta testo semplice e il peso lo decide il contenuto, non del markup scritto a mano. */ .elementor .ea-char.b { font-weight: 700; } /* ===== ROW TEAM — asset differenziante ===== Fondo scuro con lo stesso gradiente mouse-tracked della hero home: il JS del tema figlio scrive --mouse-x/--mouse-y, senza JS resta la posizione di default. Griglie e tipografia fluida qui; sfondo, spaziature e animazioni d'ingresso restano sui controlli nativi. */ .ea-team-epc{ background:radial-gradient(ellipse 72% 82% at var(--mouse-x,26%) var(--mouse-y,16%),#8DC7F3 0%,#056CB6 34%,#032740 78%); color:#ffffff; } .ea-team-epc .epc-team-statement{ display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(32px,5vw,80px);align-items:end;margin-block-end:clamp(56px,6vw,88px); } .elementor .ea-team-epc .epc-team-statement__h .elementor-heading-title{ font-size:clamp(32px,3.6vw,58px);font-weight:400;line-height:1.04; letter-spacing:-.035em;margin:0;color:#ffffff;text-wrap:balance; } .elementor .ea-team-epc .epc-team-statement__s{ font-size:clamp(17px,1.3vw,20px);font-weight:300;line-height:1.45;color:#ffffff; } .elementor .ea-team-epc .epc-team-statement__s p{margin:0;} .ea-team-epc .epc-stats{ display:grid;grid-template-columns:repeat(2,1fr);gap:0; margin-block-end:clamp(56px,7vw,96px); } .ea-team-epc .epc-stat{padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,40px);} .ea-team-epc .epc-stat + .epc-stat{border-left:1px solid rgba(255,255,255,.22);} .elementor .ea-team-epc .epc-stat__v .elementor-counter-number-wrapper, .elementor .ea-team-epc .epc-stat__v .elementor-icon{ font-size:clamp(96px,15vw,220px);font-weight:300;line-height:.85; letter-spacing:-.04em;color:#ffffff; } .elementor .ea-team-epc .epc-stat__v .elementor-icon svg{width:.8em;height:.8em;fill:#ffffff;} .elementor .ea-team-epc .epc-stat__h .elementor-heading-title{ font-size:40px;font-weight:600;letter-spacing:-.02em;color:#ffffff;margin:24px 0 12px; } .elementor .ea-team-epc .epc-stat__d{font-size:30px;font-weight:300;line-height:1.45;color:#ffffff;} .elementor .ea-team-epc .epc-stat__d p{margin:0;} .ea-team-epc .epc-team-cards{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,2.6vw,40px);align-items:start; } .ea-team-epc .epc-team-card{padding:2px 0 0 24px;border-left:1px solid rgba(255,255,255,.4);} @media (min-width:1024px){ .ea-team-epc .epc-team-card:nth-child(2){margin-block-start:64px;} .ea-team-epc .epc-team-card:nth-child(3){margin-block-start:128px;} } .elementor .ea-team-epc .epc-team-card__h .elementor-heading-title{ font-size:clamp(20px,1.6vw,26px);font-weight:700;line-height:1.15;margin:0 0 12px;color:#ffffff; } .elementor .ea-team-epc .epc-team-card__b{font-size:18px;font-weight:300;line-height:1.55;color:#ffffff;} .elementor .ea-team-epc .epc-team-card__b p{margin:0;} @media (max-width:820px){ .ea-team-epc .epc-team-statement{grid-template-columns:1fr;gap:24px;} .ea-team-epc .epc-stats{grid-template-columns:1fr;} .ea-team-epc .epc-stat + .epc-stat{border-left:0;border-top:1px solid rgba(255,255,255,.22);} .ea-team-epc .epc-team-cards{grid-template-columns:1fr;gap:32px;} .ea-team-epc .epc-team-card{margin-block-start:0;} } /* ===== ROW AREE DI COMPETENZA ===== Due card su fondo chiaro. Pastiglie ed elenco puntato sono Icon List nativi: le pastiglie in modalita' inline, l'elenco con la spunta ridisegnata in CSS come nel prototipo (bordo ruotato, non un glifo). */ .ea-aree-epc{background:#ffffff;} .ea-aree-epc .epc-aree-head{margin-block-end:clamp(40px,5vw,64px);} .elementor .ea-aree-epc .epc-team-statement__h .elementor-heading-title{ font-size:clamp(32px,3.6vw,58px);font-weight:400;line-height:1.04; letter-spacing:-.035em;margin:0;color:#31312F;text-wrap:balance; } .elementor .ea-aree-epc .epc-team-statement__s{ font-size:clamp(17px,1.3vw,20px);font-weight:300;line-height:1.45; color:#000000;margin-block-start:16px; } .elementor .ea-aree-epc .epc-team-statement__s p{margin:0;} .ea-aree-epc .epc-areas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,2.6vw,40px);} .ea-aree-epc .epc-area{ padding:clamp(32px,3.4vw,52px); border:1px solid #D3D5D6;border-radius:8px;background:#ffffff; transition:border-color 300ms cubic-bezier(0.25,0.1,0.25,1); } .ea-aree-epc .epc-area:hover{border-color:rgba(3,39,64,.3);} .elementor .ea-aree-epc .epc-area__eyebrow{margin-block-end:clamp(16px,1.8vw,22px);} .elementor .ea-aree-epc .epc-area__eyebrow .elementor-heading-title{ font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#056CB6;margin:0; } .elementor .ea-aree-epc .epc-area__h{margin-block-end:14px;} .elementor .ea-aree-epc .epc-area__h .elementor-heading-title{ text-transform:uppercase;font-size:22px;font-weight:500;line-height:1.1; letter-spacing:-.02em;margin:0;color:#31312F; } .elementor .ea-aree-epc .epc-area__badges{margin-block-end:clamp(20px,2.2vw,28px);} .elementor .ea-aree-epc .epc-area__badges .elementor-icon-list-items{gap:8px;flex-wrap:wrap;margin-inline:0;} .elementor .ea-aree-epc .epc-area__badges .elementor-icon-list-item{ display:inline-flex;align-items:center;margin:0;padding:6px 14px; font-size:13px;font-weight:600;color:#032740; border:1px solid rgba(3,39,64,.22);border-radius:999px;background:#f4f8fc; } .elementor .ea-aree-epc .epc-area__badges .elementor-icon-list-item:after{border-width:0;} .elementor .ea-aree-epc .epc-area__b{ font-size:clamp(15px,1.15vw,18px);font-weight:300;line-height:1.5; color:#000000;margin-block-end:clamp(28px,3vw,36px); } .elementor .ea-aree-epc .epc-area__b p{margin:0;} .elementor .ea-aree-epc .epc-area__list .elementor-icon-list-items{display:flex;flex-direction:column;gap:14px;} .elementor .ea-aree-epc .epc-area__list .elementor-icon-list-item{ position:relative;margin:0;padding:0 0 0 30px; font-size:clamp(15px,1.1vw,17px);font-weight:400;line-height:1.45;color:#31312F; } .elementor .ea-aree-epc .epc-area__list .elementor-icon-list-item::before{ content:"";position:absolute;left:4px;top:6px;width:12px;height:7px; border-left:2px solid #056CB6;border-bottom:2px solid #056CB6; transform:rotate(-45deg); } @media (max-width:820px){ .ea-aree-epc .epc-areas{grid-template-columns:1fr;} } /* ===== PAGINAZIONE — pallino attivo blu su fondo chiaro ===== La regola per .l-soluzioni rende il pallino attivo bianco, giusto sul fondo navy della home. La stessa sezione su una pagina a fondo bianco ha esattamente le stesse classi, quindi non e' distinguibile via CSS: serve un modificatore esplicito sul widget carosello. Specificita' 0-4-0 per battere .l-soluzioni .elementor-element ... (0-3-0) e la regola :hover del plugin, servita dopo il kit. */ .elementor .elementor-widget.ea-dots-blu .swiper-pagination-bullet-active, .elementor .elementor-widget.ea-dots-blu .swiper-pagination-bullet-active:hover { background-color: #056CB6 !important; } /* ============================================================ PAGINA ENERGIE RINNOVABILI — blocco 1: hero e sezione pain .ea-hero, .hero-el, .bottone-primario sono gia' globali (CSS aggiuntivo del sito): qui c'e' solo cio' che manca. ============================================================ */ /* Variante "split": l'hero della home centra il contenuto, questa lo distribuisce fra alto e basso. La regola globale usa !important, quindi serve piu' specificita' (0-3-0) oltre che !important per superarla. */ .elementor .ea-hero.ea-hero--split{ justify-content:space-between !important; padding-block-start:max(160px,22vh) !important; padding-block-end:clamp(72px,9vh,120px) !important; padding-inline:0 !important; } .elementor .ea-hero__heading .elementor-heading-title{ font-size:clamp(52px,6.6vw,124px);font-weight:400;line-height:.98; letter-spacing:-.05em;margin:0;max-width:22ch;color:#FFFFFF; text-shadow:0 0 60px rgba(141,199,243,.35); } .elementor .ea-hero__heading{margin-block-end:64px;} /* briciole di pane: Icon List inline, separatore disegnato in CSS */ .elementor .ea-hero .l-breadcrumb{margin-block-end:clamp(20px,2.4vw,32px);} .elementor .ea-hero .l-breadcrumb .elementor-icon-list-items{gap:12px;align-items:center;margin-inline:0;} .elementor .ea-hero .l-breadcrumb .elementor-icon-list-item{ margin:0;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; } .elementor .ea-hero .l-breadcrumb .elementor-icon-list-item:after{border-width:0;} .elementor .ea-hero .l-breadcrumb .elementor-icon-list-item + .elementor-icon-list-item::before{ content:"/";margin-inline-end:12px;color:#ffffff; } .elementor .ea-hero .l-breadcrumb .elementor-icon-list-text, .elementor .ea-hero .l-breadcrumb a{color:#ffffff;text-decoration:none;} .ea-hero .ea-hero__features{ display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-block-end:56px; } .ea-hero .ea-hero__feature{padding-inline-start:24px;border-inline-start:1px solid rgba(255,255,255,.32);} .elementor .ea-hero .ea-hero__feature-title .elementor-heading-title{ font-size:clamp(22px,1.7vw,28px);font-weight:700;margin:0;color:#FFFFFF; } .elementor .ea-hero .ea-hero__feature-title{margin-block-end:8px;} .elementor .ea-hero .ea-hero__feature-body{ font-size:clamp(22px,1.7vw,28px);font-weight:400;line-height:1.4;color:#FFFFFF; } .elementor .ea-hero .ea-hero__feature-body p{margin:0;} @media (min-width:1024px){ .ea-hero .ea-hero__feature{min-height:185px;} .ea-hero .ea-hero__feature:nth-child(2){margin-block-start:72px;} .ea-hero .ea-hero__feature:nth-child(3){margin-block-start:144px;} } @media (min-width:768px) and (max-width:1023px){ .ea-hero .ea-hero__feature{min-height:160px;} .ea-hero .ea-hero__feature:nth-child(2){margin-block-start:48px;} .ea-hero .ea-hero__feature:nth-child(3){margin-block-start:96px;} } @media (max-width:767px){ .ea-hero .ea-hero__features{grid-template-columns:1fr;gap:24px;} .ea-hero .ea-hero__feature{ border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.32); padding-inline-start:0;padding-block-start:16px; } } .ea-hero .ea-hero__ctas{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;} /* ---- sezione pain ---- */ .ea-pain-er{background:#FFFFFF;} .ea-pain-er .l-pain{ display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr); gap:clamp(48px,8vw,140px);align-items:start; } .elementor .ea-pain-er .l-pain__title{ font-size:clamp(18px,1.4vw,21px);font-weight:400;line-height:1.18; color:#000000;max-width:360px;text-wrap:balance; } .elementor .ea-pain-er .l-pain__title p{margin:0;} .ea-pain-er .l-pain__list{display:flex;flex-direction:column;} .ea-pain-er .l-pain__item + .l-pain__item{ border-block-start:1px solid rgba(49,49,47,.55); margin-block-start:clamp(28px,3vw,40px);padding-block-start:clamp(28px,3vw,40px); } .elementor .ea-pain-er .l-pain__h .elementor-heading-title{ font-size:clamp(31px,2.2vw,40px);font-weight:500;line-height:1.08; letter-spacing:-.02em;color:#000000;margin:0; } .elementor .ea-pain-er .l-pain__h{margin-block-end:12px;} .elementor .ea-pain-er .l-pain__desc{ font-size:clamp(25px,1.9vw,34px);font-weight:300;line-height:1.2; letter-spacing:-.02em;color:#000000; } .elementor .ea-pain-er .l-pain__desc p{margin:0;} @media (max-width:860px){ .ea-pain-er .l-pain{grid-template-columns:1fr;gap:36px;} .elementor .ea-pain-er .l-pain__title{max-width:none;} } /* ---- ENERGIE RINNOVABILI — blocco 2: sezione vantaggi ---- */ .ea-ben-er{background:#032740;color:#FFFFFF;} .ea-ben-er .l-benefits{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,8vw,150px);align-items:start; } .elementor .ea-ben-er .l-ben-title .elementor-heading-title{ font-size:clamp(48px,4.2vw,72px);font-weight:500;line-height:1.05; letter-spacing:-.035em;margin:0;color:#FFFFFF; } .elementor .ea-ben-er .l-ben-support{ font-size:clamp(21px,1.65vw,28px);font-weight:300;line-height:1.3; color:#FFFFFF;margin-block-start:32px;max-width:520px; } .elementor .ea-ben-er .l-ben-support p{margin:0;} .elementor .ea-ben-er .l-ben-cta{margin-block-start:36px;} @media (max-width:900px){ .ea-ben-er .l-benefits{grid-template-columns:1fr;gap:40px;} .elementor .ea-ben-er .l-ben-cta .elementor-button{width:100%;} } /* Accordion: widget nativo di Elementor ristilizzato sulle linee del prototipo. Niente JS custom: apertura, icone e accessibilita' restano quelle del widget. Due correzioni rispetto ai default: Elementor rende lo dell'icona PRIMA del titolo e lo manda a destra con float, che il display:flex annulla facendola comparire a sinistra — si rimette in coda con order. E le sue regole per icona e svg valgono 0-3-0 / 0-4-0 ed sono servite dopo il kit, quindi qui serve piu' specificita' per dimensionarle. */ .elementor .ea-accordion-er .elementor-accordion .elementor-accordion-item{ border:0 !important;border-block-start:1px solid rgba(255,255,255,.22) !important; background:transparent !important; } .elementor .ea-accordion-er .elementor-accordion .elementor-accordion-item:last-child{ border-block-end:1px solid rgba(255,255,255,.22) !important; } .elementor .ea-accordion-er .elementor-accordion .elementor-tab-title{ display:flex !important;align-items:center;justify-content:space-between;gap:16px; padding:24px 0 !important;background:transparent !important;border:0 !important; line-height:1.25 !important; } .elementor .ea-accordion-er .elementor-accordion .elementor-accordion-title{ font-family:"Geist",sans-serif;font-size:clamp(19px,1.35vw,23px); font-weight:500;line-height:1.25;color:#FFFFFF;flex:1 1 auto; } .elementor .ea-accordion-er .elementor-accordion .elementor-tab-title .elementor-accordion-icon{ order:2;float:none !important;width:auto !important;flex:0 0 auto; display:flex !important;align-items:center;justify-content:center; color:#FFFFFF;text-align:center !important; } .elementor .ea-accordion-er .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{ width:16px !important;height:16px !important;fill:#FFFFFF; } .elementor .ea-accordion-er .elementor-accordion .elementor-tab-content{ padding:0 0 24px !important;background:transparent !important;border:0 !important; font-size:16px;line-height:1.55;color:rgba(255,255,255,.78); } .elementor .ea-accordion-er .elementor-accordion .elementor-tab-content p{margin:0;} /* ---- blocco immagine con pannello ---- */ .ea-ben-er .l-imgexp{margin-block-start:clamp(120px,13vw,160px);} /* Cornice dell'immagine: stessi parametri dell'effetto gia' in uso — parte al 50% della scala, centrata, e cresce fino a riempire il container in 16:9. La scala e il raggio li anima .ea-scroll-expand da --scroll-progress; la transizione breve smorza gli scatti fra un frame di scroll e il successivo. */ .ea-ben-er .l-imgexp__inner{ position:relative;width:100%;max-width:100%;aspect-ratio:16/9; min-height:0;height:auto;overflow:hidden; } .ea-ben-er .l-imgexp__inner.ea-scroll-expand{ --ea-scale-from:.5;--ea-scale-to:1; --ea-radius-from:20px;--ea-radius-to:4px; transition:transform .12s linear,border-radius .12s linear; } /* l'immagine riempie la cornice a prescindere dal flusso flex */ .elementor .ea-ben-er .l-imgexp__inner > .elementor-widget-image{position:absolute;inset:0;} .elementor .ea-ben-er .l-imgexp__inner .elementor-widget-image img{ width:100%;height:100%;object-fit:cover;display:block; } .ea-ben-er .l-imgexp__panel{ position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,44px); max-width:520px;padding:clamp(24px,2.4vw,36px);z-index:2; background:linear-gradient(35deg,#032740 0%,#246AA5 48%,#7FA9DD 100%); color:#FFFFFF; } .elementor .ea-ben-er .l-imgexp__label .elementor-icon-list-item{ margin:0;font-size:14px;font-weight:600;letter-spacing:.02em;color:#FFFFFF; } .elementor .ea-ben-er .l-imgexp__label .elementor-icon-list-icon{ width:8px;height:8px;border-radius:50%;background:#8DC7F3;flex:0 0 auto; --e-icon-list-icon-margin:0; } .elementor .ea-ben-er .l-imgexp__label{margin-block-end:14px;} .elementor .ea-ben-er .l-imgexp__copy{ font-size:clamp(15px,1.05vw,17px);font-weight:300;line-height:1.5;color:#FFFFFF; } .elementor .ea-ben-er .l-imgexp__copy p{margin:0;} @media (max-width:767px){ /* Su mobile il pannello non puo' restare sovrapposto: dentro una cornice con aspect-ratio e overflow:hidden veniva schiacciato sull'immagine e tagliato. Qui la cornice torna ad altezza libera, l'immagine rientra nel flusso e il pannello scende sotto, a piena larghezza e leggibile. */ .ea-ben-er .l-imgexp__inner{aspect-ratio:auto;height:auto;overflow:visible;} .elementor .ea-ben-er .l-imgexp__inner > .elementor-widget-image{position:static;} .elementor .ea-ben-er .l-imgexp__inner > .elementor-widget-image img{ aspect-ratio:16/10;height:auto;border-radius:8px; } .ea-ben-er .l-imgexp__panel{ position:static;max-width:none;left:auto;bottom:auto; margin-block-start:14px;border-radius:8px; padding:22px 20px; } /* Lo zoom resta, ma si sposta dalla cornice all'immagine: il pannello ora sta sotto e, se scalasse anche lui, il testo tornerebbe piccolo. --scroll-progress lo scrive il JS sulla cornice e le custom property si ereditano, quindi la formula qui e' la stessa di .ea-scroll-expand. */ .ea-ben-er .l-imgexp__inner.ea-scroll-expand{ transform:none !important;border-radius:0 !important; } .elementor .ea-ben-er .l-imgexp__inner > .elementor-widget-image img{ transform:scale(calc(var(--ea-scale-from) + (var(--ea-scale-to) - var(--ea-scale-from)) * var(--scroll-progress,0))); transform-origin:center center; border-radius:calc(var(--ea-radius-from) + (var(--ea-radius-to) - var(--ea-radius-from)) * var(--scroll-progress,0)); will-change:transform,border-radius; transition:transform .12s linear,border-radius .12s linear; } .elementor .ea-ben-er .l-imgexp__copy{font-size:16px;} } /* ---- ENERGIE RINNOVABILI — blocco 3: servizi, prove, case, CTA ---- */ /* Il pallino degli occhielli: un Icon List senza icona non genera lo span .elementor-icon-list-icon, quindi il puntino va disegnato con ::before. */ .elementor .l-imgexp__label .elementor-icon-list-item{display:inline-flex;align-items:center;} .elementor .l-imgexp__label .elementor-icon-list-item::before{ content:"";width:8px;height:8px;border-radius:50%;background:#8DC7F3; flex:0 0 auto;margin-inline-end:10px; } .ea-servizi-er{background:#032740;color:#FFFFFF;} .ea-servizi-er .l-carousel-head{ display:flex;justify-content:space-between;align-items:flex-end; gap:24px;margin-block-end:clamp(32px,4vw,56px); } .elementor .ea-servizi-er .l-carousel-head__title .elementor-heading-title{ font-size:clamp(28px,3vw,48px);font-weight:500;line-height:1.04; letter-spacing:-.035em;margin:0;color:#FFFFFF;text-wrap:balance;max-width:30ch; } .elementor .ea-servizi-er .l-carousel-head__sub{ font-size:clamp(16px,1.25vw,19px);font-weight:400;line-height:1.5; margin-block-start:20px;max-width:58ch;color:#FFFFFF; } .elementor .ea-servizi-er .l-carousel-head__sub p{margin:0;} .ea-prove-er{background:#FFFFFF;} .ea-prove-er .l-prove{display:grid;grid-template-columns:1fr 1fr;gap:0;} .ea-prove-er .l-prove__cell{padding:clamp(8px,3vw,48px) clamp(24px,4vw,64px);} .ea-prove-er .l-prove__cell + .l-prove__cell{border-inline-start:1px solid #D3D5D6;} .elementor .ea-prove-er .l-prove__num{text-align:center;} .elementor .ea-prove-er .l-prove__num .elementor-counter-number-wrapper{ font-size:clamp(96px,15vw,220px);font-weight:300;line-height:.85; letter-spacing:-.04em;color:#31312F; justify-content:center;text-align:center; } .elementor .ea-prove-er .l-prove__h{margin:24px 0 12px;} .elementor .ea-prove-er .l-prove__h .elementor-heading-title{ font-size:clamp(24px,2.4vw,40px);font-weight:700;letter-spacing:-.02em;color:#000000;margin:0; } .elementor .ea-prove-er .l-prove__d{ font-size:clamp(21px,1.56vw,30px);font-weight:300;line-height:1.45;color:#000000;max-width:36ch; } .elementor .ea-prove-er .l-prove__d p{margin:0;} @media (max-width:768px){ .ea-prove-er .l-prove{grid-template-columns:1fr;} .ea-prove-er .l-prove__cell + .l-prove__cell{ border-inline-start:0;border-block-start:1px solid #D3D5D6; margin-block-start:48px;padding-block-start:48px; } } .ea-case-er{background:#FFFFFF;} /* Il testo va in basso a sinistra. Serve dichiarare esplicitamente la direzione: Elementor impone --flex-direction:column ai container, e in colonna align-items governa l'asse orizzontale — con flex-end il testo finiva a destra, e justify-content di default lo teneva in alto. */ .ea-case-er .l-case{ position:relative;border-radius:16px;overflow:hidden; min-height:min(72vh,640px); display:flex;flex-direction:column; justify-content:flex-end;align-items:flex-start; } .elementor .ea-case-er .l-case > .elementor-widget-image{position:absolute;inset:0;z-index:0;} .elementor .ea-case-er .l-case > .elementor-widget-image img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); } .ea-case-er .l-case:hover > .elementor-widget-image img{transform:scale(1.05);} .ea-case-er .l-case__scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(3,39,64,.92) 0%,rgba(3,39,64,.55) 45%,rgba(3,39,64,.08) 100%); } .ea-case-er .l-case__body{position:relative;z-index:2;padding:clamp(32px,5vw,64px);max-width:640px;} .elementor .ea-case-er .l-case__h{margin-block-end:16px;} .elementor .ea-case-er .l-case__h .elementor-heading-title{ font-size:clamp(32px,3.4vw,54px);font-weight:600;line-height:1.02; letter-spacing:-.03em;margin:0;color:#FFFFFF; } .elementor .ea-case-er .l-case__p{font-size:18px;font-weight:300;line-height:1.5;color:#FFFFFF;max-width:48ch;} .elementor .ea-case-er .l-case__p p{margin:0;} .ea-case-er .l-case__steps{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px);margin-block-start:clamp(40px,5vw,72px); } .elementor .ea-case-er .l-case__steplab{margin-block-end:12px;} .elementor .ea-case-er .l-case__steplab .elementor-heading-title{ font-size:14px;font-weight:700;color:#056CB6;letter-spacing:.08em;margin:0; } .elementor .ea-case-er .l-case__steph{padding-block-start:20px;border-block-start:1px solid #D3D5D6;} .elementor .ea-case-er .l-case__steph .elementor-heading-title{ font-size:clamp(24px,2vw,30px);font-weight:500;line-height:1.2;color:#000000;margin:0; } .elementor .ea-case-er .l-case__stepb{ font-size:clamp(15px,1.1vw,17px);font-weight:400;line-height:1.5; color:#000000;margin-block-start:18px; } .elementor .ea-case-er .l-case__stepb p{margin:0;} @media (max-width:768px){ .ea-case-er .l-case__scrim{background:linear-gradient(0deg,rgba(3,39,64,.94) 10%,rgba(3,39,64,.5) 100%);} .ea-case-er .l-case__steps{grid-template-columns:1fr;gap:28px;} } .ea-cta-er{background:#032740;color:#FFFFFF;} .ea-cta-er .l-cta__head{max-width:600px;margin-block-end:clamp(40px,5vw,64px);} .elementor .ea-cta-er .l-cta__head .elementor-heading-title{ font-size:clamp(48px,4vw,68px);font-weight:700;line-height:1.02; letter-spacing:-.03em;margin:0;color:#FFFFFF; } .ea-cta-er .l-cta{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,2.5vw,32px);} .ea-cta-er .l-cta__panel{ display:flex;flex-direction:column;border-radius:8px; padding:clamp(32px,4vw,56px);min-height:clamp(300px,34vw,400px); transition:background-position 1.1s cubic-bezier(.4,0,.2,1),border-color .4s ease; } .ea-cta-er .l-cta__panel--grad{ background:linear-gradient(35deg,#032740 0%,#246AA5 48%,#7FA9DD 100%); background-size:200% 200%;background-position:0% 50%; } .ea-cta-er .l-cta__panel--grad:hover{background-position:100% 50%;} .ea-cta-er .l-cta__panel--outline{ position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.28); } .ea-cta-er .l-cta__panel--outline > *{position:relative;z-index:1;} .ea-cta-er .l-cta__panel--outline::before{ content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s ease; background:linear-gradient(35deg,#032740 0%,#246AA5 48%,#7FA9DD 100%); } .ea-cta-er .l-cta__panel--outline:hover{border-color:transparent;} .ea-cta-er .l-cta__panel--outline:hover::before{opacity:1;} .elementor .ea-cta-er .l-eyebrow .elementor-heading-title{ font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#FFFFFF;margin:0; } .elementor .ea-cta-er .l-eyebrow .elementor-heading-title::before{ content:"";display:inline-block;width:8px;height:8px;border-radius:50%; background:#056CB6;margin-inline-end:10px;vertical-align:middle; } .elementor .ea-cta-er .l-cta__panel--outline .l-eyebrow .elementor-heading-title::before{background:#8DC7F3;} .elementor .ea-cta-er .l-cta__h{margin:20px 0 14px;} .elementor .ea-cta-er .l-cta__h .elementor-heading-title{ font-size:clamp(24px,2.4vw,40px);font-weight:700;letter-spacing:-.02em;color:#FFFFFF;margin:0; } .elementor .ea-cta-er .l-cta__b{ font-size:clamp(18px,1.4vw,22px);font-weight:300;line-height:1.5;color:#FFFFFF;max-width:40ch; } .elementor .ea-cta-er .l-cta__b p{margin:0;} .ea-cta-er .l-cta__btn{margin-block-start:auto;} @media (max-width:820px){ .ea-cta-er .l-cta{grid-template-columns:1fr;} } /* Pallino attivo bianco: gemella di .ea-dots-blu, per caroselli su fondo scuro che non stanno dentro .l-soluzioni. Stessa specificita' 0-4-0. */ .elementor .elementor-widget.ea-dots-bianchi .swiper-pagination-bullet-active, .elementor .elementor-widget.ea-dots-bianchi .swiper-pagination-bullet-active:hover { background-color: #FFFFFF !important; } /* La cornice del case history usa lo stesso componente della foto nella sezione vantaggi: identici scala, raggio e transizione, cosi' le due immagini della pagina si comportano allo stesso modo allo scroll. Il raggio lo governa .ea-scroll-expand, quindi quello fisso cede. */ .ea-case-er .l-case.ea-scroll-expand{ --ea-scale-from:.5;--ea-scale-to:1; --ea-radius-from:20px;--ea-radius-to:4px; transition:transform .12s linear,border-radius .12s linear; } @media (max-width:767px) and (prefers-reduced-motion: reduce){ .elementor .ea-ben-er .l-imgexp__inner > .elementor-widget-image img{ transform:none;border-radius:8px; } } /* ===== CONTENIMENTO ORIZZONTALE DEI CAROSELLI ===== Le frecce sono posizionate in assoluto sui bordi del widget. Se la sezione perde il padding laterale — come accadeva al breakpoint laptop, dove valeva 0 — finiscono a filo viewport e qualsiasi sbordo genera scroll orizzontale di pagina. .ea-shell restituisce i margini di sicurezza; questa regola e' la rete: overflow-x clip taglia lo sbordo senza creare un contenitore di scroll, quindi non rompe gli sticky. */ .l-showcase, .l-soluzioni, .ea-servizi-er{overflow-x:clip;} .elementor .elementor-widget-loop-carousel, .elementor .elementor-widget-n-carousel{max-width:100%;} /* ===== ARCHIVIO PRODOTTI — macro card di accesso agli archivi ===== */ .ea-macro-arch{background:#FFFFFF;} .ea-macro-arch .arch-macros{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px); } .ea-macro-arch .arch-macro{ display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between; min-height:clamp(300px,30vw,400px);padding:clamp(28px,3vw,44px); border-radius:16px;overflow:hidden;text-decoration:none;color:#fff; background:linear-gradient(155deg,#032740 0%,#053a63 58%,#0a5aa0 120%); background-size:100% 180%;background-position:50% 0%; border:1px solid rgba(141,199,243,.28); transition:background-position .7s cubic-bezier(0.25,0.1,0.25,1), border-color .4s ease, transform .4s cubic-bezier(0.25,0.1,0.25,1); } .ea-macro-arch .arch-macro:hover{ background-position:50% 100%;border-color:rgba(141,199,243,.55);transform:translateY(-4px); } .elementor .ea-macro-arch .arch-macro__badge .elementor-heading-title{ display:inline-flex;align-items:center;font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0; padding:8px 14px;border:1px solid rgba(255,255,255,.5);border-radius:999px; } .ea-macro-arch .arch-macro__body{ margin-block-start:auto;padding-block-start:clamp(40px,6vw,72px); display:flex;flex-direction:column;align-items:flex-start;width:100%; } .elementor .ea-macro-arch .arch-macro__h{margin-block-end:14px;} .elementor .ea-macro-arch .arch-macro__h .elementor-heading-title{ font-size:clamp(30px,3vw,32px);font-weight:500;line-height:1.02; letter-spacing:-.03em;margin:0;color:#fff; } .elementor .ea-macro-arch .arch-macro__b{ font-size:clamp(15px,1.15vw,18px);font-weight:400;line-height:1.5; color:#fff;margin-block-end:clamp(22px,2.4vw,30px);max-width:42ch; } .elementor .ea-macro-arch .arch-macro__b p{margin:0;} .ea-macro-arch .arch-macro__cta{ display:flex;flex-direction:row;align-items:center;gap:8px;width:auto; } .elementor .ea-macro-arch .arch-macro__cta-text{font-size:16px;font-weight:700;color:#fff;} .elementor .ea-macro-arch .arch-macro__cta-text p{margin:0;} .ea-macro-arch .arch-macro__cta .ea-link__icon svg{transition:transform 200ms ease-out;} .ea-macro-arch .arch-macro:hover .arch-macro__cta .ea-link__icon svg{transform:rotate(45deg);} @media (max-width:760px){ .ea-macro-arch .arch-macros{grid-template-columns:1fr;} } /* ========================================================== EA-A11Y-TOUCH — WCAG 2.1 SC 2.5.5 Target Size (min 44x44) Aree di tocco solo su mobile (<=767px). Nessuna regola modifica la dimensione del testo o il layout su desktop. ========================================================== */ @media (max-width:767px){ /* 1. Filtri archivio prodotti (~35px). Le chip sono affiancate con spaziatura 0: un overlay si sovrapporrebbe alle chip adiacenti, quindi si alza l'altezza minima. Unico effetto: la barra filtri cresce di ~9px. */ .e-filter .e-filter-item{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* 2. Link-bottone con padding azzerato, es. "Scarica la scheda" (~19px). L'area di tocco viene estesa da un overlay: il box del bottone, e quindi il layout della card, restano identici. */ .elementor-widget-button .elementor-button{ position:relative; } .elementor-widget-button .elementor-button::after{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; min-width:44px; } /* 3. Accordion: il contenitore .elementor-tab-title e' gia' alto ~72px, ma il link focusabile al suo interno misura ~24px. Lo si estende fino a riempire il contenitore: nessun impatto sul layout. */ .elementor-tab-title .elementor-accordion-title{ display:flex; align-items:center; align-self:stretch; min-height:44px; } /* 4. Controlli a sola icona: toggle del menu e frecce dei caroselli. */ .elementor-menu-toggle, .elementor-swiper-button{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } } /* ========================================================== EA MENU — voci di navigazione Riferimento: .ea-header__nav / .ea-header__has-sub / .ea-subnav dei file HTML del progetto. Qui stanno SOLO le regole che i controlli nativi del widget nav-menu non espongono: aspetto dell'indicatore dei sottomenu, sottolineatura dello stato attivo, superficie in vetro del dropdown. Tipografia, spaziatura, paddings e colori sono impostati sul widget (header template #22, nodo 077896e): Geist 12px / 700 / uppercase / letter-spacing .36px, gap 32px, padding voce 6px 0. NB: il "pointer" del widget e' impostato su "none" — la sottolineatura e' riservata allo stato attivo, l'hover usa opacita' .7. ========================================================== */ /* --- Voce: hover a opacita' .7 (come .ea-header__nav a:hover) --- */ header.elementor-location-header .elementor-nav-menu--main .elementor-item{ position:relative; transition:opacity 200ms cubic-bezier(.25,.1,.25,1); } header.elementor-location-header .elementor-nav-menu--main .elementor-item:hover, header.elementor-location-header .elementor-nav-menu--main .elementor-item:focus{ opacity:.7; } /* --- Indicatore dei sottomenu --- Si usa ESCLUSIVAMENTE l'indicatore nativo di Elementor (span.sub-arrow, iniettato da SmartMenus lato client e quindi invisibile nell'HTML servito: non e' nel sorgente, compare solo a runtime). Niente pseudo-elementi aggiuntivi, altrimenti in pagina si vedono due frecce. L'icona e' impostata sul widget a "fas fa-chevron-down". Colore: fill/color a currentColor, cosi' segue la voce — bianco sull'header trasparente, navy sulle pagine a fondo chiaro e sull'header in scroll. Mai un colore fisso. Unica animazione: rotazione di 180deg, da giu' (chiuso) a su (aperto). */ header.elementor-location-header .elementor-nav-menu--main .menu-item-has-children > .elementor-item{ display:inline-flex; align-items:center; gap:7px; } header.elementor-location-header .elementor-nav-menu--main .sub-arrow{ display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0; line-height:0; transform:rotate(0deg); transform-origin:center; transition:transform 300ms cubic-bezier(.25,.1,.25,1); } header.elementor-location-header .elementor-nav-menu--main .sub-arrow svg{ width:10px; height:10px; display:block; fill:currentColor; color:currentColor; } header.elementor-location-header .elementor-nav-menu--main .sub-arrow i{ font-size:10px; line-height:1; color:currentColor; } header.elementor-location-header .elementor-nav-menu--main .menu-item-has-children:hover > .elementor-item .sub-arrow, header.elementor-location-header .elementor-nav-menu--main .menu-item-has-children:focus-within > .elementor-item .sub-arrow{ transform:rotate(180deg); } /* --- Stato attivo: sottolineatura 2px --- .current-menu-item / .elementor-item-active = pagina corrente (equivale ad aria-current="page" nei file di design); .current-menu-ancestor / .current-menu-parent = sezione che contiene la pagina corrente (aria-current="true"): piu' tenue. bottom:-1px + padding verticale 6px della voce = 7px sotto il testo, come bottom:-7px sull'anchor senza padding del design. */ header.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active, header.elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item, header.elementor-location-header .elementor-nav-menu--main .current-menu-ancestor > .elementor-item, header.elementor-location-header .elementor-nav-menu--main .current-menu-parent > .elementor-item{ opacity:1; } header.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::before, header.elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item::before, header.elementor-location-header .elementor-nav-menu--main .current-menu-ancestor > .elementor-item::before, header.elementor-location-header .elementor-nav-menu--main .current-menu-parent > .elementor-item::before{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:currentColor; } /* sezione contenitrice (non la pagina corrente): sottolineatura tenue */ header.elementor-location-header .elementor-nav-menu--main .current-menu-ancestor > .elementor-item::before, header.elementor-location-header .elementor-nav-menu--main .current-menu-parent > .elementor-item::before{ opacity:.4; } /* se la voce e' insieme antenata e pagina corrente, vince il pieno */ header.elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item::before, header.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::before{ opacity:1; } /* --- Dropdown: superficie in vetro (come .ea-subnav) --- Bordo, raggio, ombra e distanza dall'alto stanno sul widget. Scoping su .elementor-nav-menu--main: il menu mobile usa la stessa classe --dropdown sul