.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"neue-haas-grotesk-display";--e-global-typography-primary-font-size:25px;--e-global-typography-primary-font-weight:normal;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"neue-haas-grotesk-text";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:normal;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#E7E7E7;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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);}.elementor-lightbox{background-color:#000000;--lightbox-ui-color:#FFFFFF;--lightbox-ui-color-hover:#FFFFFF;--lightbox-text-color:#FFFFFF;--lightbox-navigation-icons-size:30px;}.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(min-width:2400px){.elementor-kit-7{--e-global-typography-primary-font-size:25px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:20px;--e-global-typography-text-font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS */:root{ --heat:0; --glow:0; --soft:0; --fire-core:#ff003d; --glow-scale:1; /* alone più ampio */ --blur-max:10px; --g1c:#ff3000; --g1o:1; /* cuore bianco-oro caldo */ --g2c:#ff3000; --g2o:1; /* arancio */ --g3c:#ff3800; --g3o:1; /* arancio-rosso */ --g4c:#ff0000; --g4o:1; /* rosso */ --g5c:#ff0000; --g5o:1; /* rosso profondo */ } .fire :is(h1,h2,h3,h4,h5,h6,p,span,a,li,.elementor-button,.elementor-button-text){ --H: max(var(--heat), var(--hov, 0)); --G: max(var(--glow), var(--hov, 0)); --S: max(var(--soft), calc(var(--hov, 0) * .55)); color: color-mix(in srgb, color-mix(in srgb, #ffffff, var(--fire-core) calc(var(--H) * 100%)) calc(100% - var(--S) * 90%), transparent) !important; text-shadow: 0 0 calc(var(--S) * var(--blur-max)) color-mix(in srgb, #ffffff, var(--fire-core) calc(var(--H) * 100%)), 0 0 calc(var(--G) * 4px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g1o) * 100%), var(--g1c)), 0 0 calc(var(--G) * 8px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g2o) * 100%), var(--g2c)), 0 0 calc(var(--G) * 16px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g3o) * 100%), var(--g3c)), 0 0 calc(var(--G) * 20px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g4o) * 100%), var(--g4c)), 0 0 calc(var(--G) * 24px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g5o) * 100%), var(--g5c)), 0 0 calc(var(--G) * 32px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g5o) * 100%), var(--g5c)); } .fire .elementor-icon svg, .fire .elementor-icon svg *{ fill: color-mix(in srgb, #ffffff, var(--fire-core) calc(max(var(--heat), var(--hov, 0)) * 100%)) !important; } .fire .elementor-icon svg{ --H: max(var(--heat), var(--hov, 0)); --G: max(var(--glow), var(--hov, 0)); --S: max(var(--soft), calc(var(--hov, 0) * .55)); filter: drop-shadow(0 0 calc(var(--G) * 1px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g1o) * 100%), var(--g1c))) drop-shadow(0 0 calc(var(--G) * 4px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g1o) * 100%), var(--g1c))) drop-shadow(0 0 calc(var(--G) * 8px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g2o) * 100%), var(--g2c))) drop-shadow(0 0 calc(var(--G) * 16px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g3o) * 100%), var(--g3c))) drop-shadow(0 0 calc(var(--G) * 20px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g4o) * 100%), var(--g4c))) drop-shadow(0 0 calc(var(--G) * 24px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--G) * var(--g5o) * 100%), var(--g5c))) blur(calc(var(--S) * var(--blur-max))); } @keyframes fire-enter{ from{ opacity:0; filter: blur(14px); } /* il fotogramma finale sono i valori naturali dell'elemento */ } .fire .elementor-widget{ animation: fire-enter 0.35s ease-out .2s backwards; } /* Solo la variabile dell'hover è registrata e animata: lo scroll resta istantaneo */ @property --hov { syntax: ""; inherits: true; initial-value: 0; } .fire :is(a, .elementor-button, .elementor-icon, .elementor-menu-toggle){ --hov: 0; transition: --hov .35s ease-out; -webkit-tap-highlight-color: transparent; } /* Puntatore reale: hover classico */ @media (hover: hover) and (pointer: fine){ .fire :is(a, .elementor-button, .elementor-icon, .elementor-menu-toggle):hover{ --hov: 1; } } /* Touch: effetto solo mentre il dito è premuto */ @media (hover: none){ .fire :is(a, .elementor-button, .elementor-icon, .elementor-menu-toggle):active{ --hov: 1; } } /* Navigazione da tastiera */ .fire :is(a, .elementor-button, .elementor-icon, .elementor-menu-toggle):focus-visible{ --hov: 1; } /*POPUP BLUR /* sostituisci 1234 con l'ID del tuo popup */ #elementor-popup-modal-124 .dialog-widget-content { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(20px); } /* header sopra al popup (default Elementor popup: z-index 9999) */ .elementor-location-header { position: sticky; /* o fixed, a seconda di come l'hai impostato */ top: 0; z-index: 10000; } /*BTN-GLOW PULSANTI /* ============================================================ BTN-GLOW · FILE COMPLETO Blur + viraggio cromatico + glow esterno su testo E icone (icon font, SVG inline, SVG servito come ). Sostituisce integralmente il CSS aggiuntivo precedente. ARCHITETTURA Una sola grandezza animata: --glow, transizionata in un unico punto (.btn-glow). Blur, glow del testo e glow delle icone sono funzioni pure di --glow, non stati commutati: questo garantisce la stessa curva ease-out in entrata e in uscita su tutti gli elementi, in combinato. Gli stati impostano solo --glow e il colore. Classi disponibili: .btn-glow effetto completo .glow-keep-colors glow sì, viraggio no (SVG multicolore) .glow-stroke-only icone a contorno: vira solo lo stroke ============================================================ */ /* ------------------------------------------------------------ 1. Variabile animabile inherits:true è ciò che permette a icone e figli di leggere il valore animato del contenitore. ------------------------------------------------------------ */ @property --glow { syntax: ""; initial-value: 0; inherits: true; } /* ------------------------------------------------------------ 2. Stato di riposo ------------------------------------------------------------ */ .btn-glow { --glow: 0; /* scala del glow: testo e icone separati, perché le icone sono spesso più piccole del testo */ --glow-scale: 1; --glow-icon-scale: 1; /* intensità del blur a pieno effetto — mettila a 0px per disattivare il blur mantenendo glow e viraggio */ --glow-blur: 1.2px; /* colore del testo e delle icone in hover/tocco */ --glow-color: #ff0000; /* colori dei livelli di glow */ --g1c: #ff3b30; --g2c: #ff1a1a; --g3c: #ff0000; --g4c: #e00000; --g5c: #b00000; /* opacità massima dei livelli */ --g1o: 1; --g2o: 1; --g3o: 1; --g4o: 1; --g5o: 1; /* evita il rettangolo grigio di default al tap su Android */ -webkit-tap-highlight-color: transparent; /* blur derivato da --glow: a riposo vale blur(0px), quindi non c'è nessuna commutazione di stato da interpolare */ filter: blur(calc(var(--glow) * var(--glow-blur))); text-shadow: 0 0 calc(var(--glow) * 4px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g1o) * 100%), var(--g1c)), 0 0 calc(var(--glow) * 8px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g2o) * 100%), var(--g2c)), 0 0 calc(var(--glow) * 16px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g3o) * 100%), var(--g3c)), 0 0 calc(var(--glow) * 20px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g4o) * 100%), var(--g4c)), 0 0 calc(var(--glow) * 24px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g5o) * 100%), var(--g5c)), 0 0 calc(var(--glow) * 32px * var(--glow-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g5o) * 100%), var(--g5c)); } /* ------------------------------------------------------------ 3. Glow sugli ICON FONT (Font Awesome, Elementor Icons…) Il glifo riceverebbe text-shadow per ereditarietà, ma un valore ereditato è la parte fragile in uscita. Qui la proprietà viene DICHIARATA sull'icona e legge var(--glow): stesso meccanismo degli SVG, che è quello che si comporta correttamente. Usa --glow-icon-scale, così le icone si regolano a parte. ------------------------------------------------------------ */ .btn-glow i, .btn-glow .elementor-icon, .btn-glow .elementor-button-icon { text-shadow: 0 0 calc(var(--glow) * 4px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g1o) * 100%), var(--g1c)), 0 0 calc(var(--glow) * 8px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g2o) * 100%), var(--g2c)), 0 0 calc(var(--glow) * 16px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g3o) * 100%), var(--g3c)), 0 0 calc(var(--glow) * 20px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g4o) * 100%), var(--g4c)), 0 0 calc(var(--glow) * 24px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g5o) * 100%), var(--g5c)), 0 0 calc(var(--glow) * 32px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g5o) * 100%), var(--g5c)); } /* ------------------------------------------------------------ 4. Glow sulle icone SVG (inline, e maschera) text-shadow non tocca la geometria SVG: serve drop-shadow(), che lavora sul canale alfa della forma. 3 livelli invece di 6: drop-shadow è sensibilmente più costoso di text-shadow. ------------------------------------------------------------ */ .btn-glow svg, .btn-glow img[src$=".svg"], .btn-glow .glow-mask { filter: drop-shadow(0 0 calc(var(--glow) * 4px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g1o) * 100%), var(--g1c))) drop-shadow(0 0 calc(var(--glow) * 12px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g3o) * 100%), var(--g3c))) drop-shadow(0 0 calc(var(--glow) * 24px * var(--glow-icon-scale)) color-mix(in srgb, transparent calc(100% - var(--glow) * var(--g5o) * 100%), var(--g5c))); } /* ------------------------------------------------------------ 5. Transizioni --glow è transizionata in UN SOLO punto: è la sorgente unica del movimento. Non va dichiarata sui figli, altrimenti ognuno riapplica la propria easing sul valore ereditato e le curve si desincronizzano. filter e text-shadow NON vanno in lista: derivano già da --glow e una transizione su di essi sovrapporrebbe una seconda easing. Ai figli serve solo la transizione del colore. ------------------------------------------------------------ */ .btn-glow { transition-property: --glow, color, -webkit-text-fill-color; transition-duration: 0.35s; transition-timing-function: ease-out; } .btn-glow .elementor-button-text, .btn-glow i, .btn-glow svg, .btn-glow svg *, .btn-glow img, .btn-glow .elementor-icon, .btn-glow .elementor-button-icon, .btn-glow .glow-mask { transition-property: color, -webkit-text-fill-color, fill, stroke, background-color; transition-duration: 0.35s; transition-timing-function: ease-out; } /* ------------------------------------------------------------ 6. Hover · solo dispositivi con puntatore reale ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .btn-glow:hover { --glow: 1; } /* testo e icon font: color e -webkit-text-fill-color sono ereditati, ma l'!important serve a battere il colore che Elementor imposta sul singolo widget icona */ .btn-glow:hover, .btn-glow:hover .elementor-button-text, .btn-glow:hover i, .btn-glow:hover .elementor-icon, .btn-glow:hover .elementor-button-icon { color: var(--glow-color) !important; -webkit-text-fill-color: var(--glow-color) !important; } /* SVG inline: il colore non passa da `color` ma da fill/stroke. L'!important batte gli attributi di presentazione, gli style inline sui path e i