.elementor-kit-8{--e-global-color-primary:#002040;--e-global-color-secondary:#00132B;--e-global-color-text:#1E242C;--e-global-color-accent:#F2A30B;--e-global-typography-primary-font-family:"Clash Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"General Sans";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"General Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-weight:500;background-color:var(--sfondo);color:var(--testo);font-family:"General Sans", Sans-serif;font-size:1.0625rem;font-weight:400;line-height:1.65;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{font-family:"General Sans", Sans-serif;}.elementor-kit-8 h1{color:var(--navy-dark);font-family:"Clash Display", Sans-serif;font-weight:700;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-8 h2{color:var(--navy-dark);font-family:"Clash Display", Sans-serif;font-weight:700;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-8 h3{color:var(--navy-dark);font-family:"Clash Display", Sans-serif;font-weight:700;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-8 h4{color:var(--navy-dark);font-family:"Clash Display", Sans-serif;font-weight:700;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-8 h5{color:var(--navy-dark);font-family:"Clash Display", Sans-serif;font-weight:600;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-8 h6{color:var(--navy-dark);font-family:"Clash Display", Sans-serif;font-weight:600;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-family:"General Sans", Sans-serif;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.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);}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:560px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --navy:#002040; --amber:#F2A30B; --amber-hover:#D99400; --navy-dark:#00132B; --navy-hover:#0A2D54; --antracite:#15191F; --testo:#1E242C; --testo-tenue:#586472; --sfondo:#EDF0F4; --bianco:#FFFFFF; --bordo:#C9D0D8; --testo-su-scuro:#D2DCE9; --e-gv-900ed9f:#1F7A4D; --space-sm:16px; --space-md:24px; --space-lg:32px; --space-xl:40px; --section-y:clamp(64px, 9vw, 124px); --radius-sm:4px; --radius-card:12px; --container:1280px; --container-narrow:720px; --font-display:Clash Display; --font-body:General Sans; --font-mono:JetBrains Mono; --gutter:clamp(20px, 4vw, 40px); --superficie-su-scuro:#FFFFFF0F; --e-gv-53df504:#FFFFFF14; --superficie-su-scuro-forte:#FFFFFF1A; --bordo-su-scuro:#FFFFFF24; --bordo-su-scuro-forte:#FFFFFF66; --e-gv-623bb22:#FFFFFF0D; --velo-foto:#0020402E; --navy-vetro:#0A2D548C; --grigio-chiaro:#AAB7C4; --grigio-medio:#8A98A8; } /* Start custom CSS *//* ========================================================== MTS - complementi allo schema atomico v4 Solo cio' che le Global Classes non possono esprimere. Non aggiungere qui stili che una Global Class puo' gia' fare. NB: la classe e' ripetuta (.bottone.bottone) per alzare la specificita': la scorciatoia 'transition' delle Global Classes azzera la timing function, e questo foglio carica PRIMA del loro. ========================================================== */ /* 1. contesto di impilamento: senza, la foto della card (z-index:-2) finirebbe dietro lo sfondo della sezione invece che dentro la card */ .elementor .card-foto{isolation:isolate} /* 2. cifre a larghezza fissa: i numeri delle statistiche non ballano */ .elementor .numero-grande{font-variant-numeric:tabular-nums} /* 3. curva di accelerazione: v4 memorizza proprieta' e durata, non la timing function */ .elementor .bottone.bottone, .elementor .card.card, .elementor .riga-link.riga-link, .elementor .salta-contenuto.salta-contenuto, .elementor .pillola.pillola, .elementor .faq-domanda.faq-domanda{transition-timing-function:cubic-bezier(.2,0,0,1)} .elementor .card-foto.card-foto, .elementor .card-foto-immagine.card-foto-immagine{transition-timing-function:cubic-bezier(.32,.72,0,1)} /* ==== HEADER E FOOTER ==== Header e footer sono costruiti con elementi atomici v4: colori, spazi e tipografia stanno negli stili degli elementi e restano agganciati alle Variabili. Il menu e' l'unico widget di vecchia generazione: le regole qui sotto servono perche' i suoi controlli non arrivano dove serve. Il pannello dei servizi, invece, e' fatto di elementi v4 e si stila dai loro identificatori. */ /* 1. firma gigante contornata: -webkit-text-stroke non esiste nello schema */ .s-ftmarkh{color:transparent!important;-webkit-text-stroke:1px rgba(255,255,255,.08); white-space:nowrap;user-select:none;display:block} /* 2. MENU ORIZZONTALE Il menu e il testo dei pulsanti non devono andare a capo: senza questi vincoli, sotto i 1050px il pulsante si spezza su due righe e la barra passa da 71 a 89px. Le icone servono solo al menu mobile. */ .s-headbar .e-n-menu:not([data-layout="dropdown"]) .e-n-menu-heading{flex-wrap:nowrap} .s-headbar .e-n-menu:not([data-layout="dropdown"]) .e-n-menu-title-text{white-space:nowrap} .s-headbar .e-n-menu:not([data-layout="dropdown"]) .e-n-menu-icon{display:none} .s-cta.s-cta, .s-ctacall.s-ctacall, .s-tel.s-tel{white-space:nowrap} /* 3. MENU MOBILE A SCHERMO INTERO (sotto i 900px) La barra ha backdrop-filter, che la rende il riquadro di riferimento per i figli position:fixed. Mentre il menu e' aperto il filtro va tolto, altrimenti il pannello resta grande quanto la barra. La barra e' comunque coperta dal pannello, quindi non si vede nulla di diverso. */ .s-headbar:has(.e-n-menu-toggle[aria-expanded="true"]){ backdrop-filter:none!important;-webkit-backdrop-filter:none!important; background-color:transparent!important;border-color:transparent!important;box-shadow:none!important} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-toggle{position:relative;z-index:1002} .s-headbar .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper{ position:fixed!important;inset:0!important; width:auto!important;max-width:none!important;height:auto!important;max-height:none!important; z-index:1001;overflow-y:auto; background:rgba(0,19,43,.97); -webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1); padding:100px max(var(--gutter), (100% - 520px)/2) 48px!important} /* il contenuto si tiene entro 520px grazie al rientro qui sopra: metterlo come max-width sulle voci non funziona, perche' il pannello dei servizi riceve una larghezza calcolata via JavaScript e sfonderebbe il limite. */ .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-heading{ flex-direction:column;flex-wrap:nowrap;align-items:stretch; width:100%;max-width:none;margin:0;gap:0} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-item{max-width:100%;min-width:0} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-title-container{ padding:10px 0!important;background:none!important;justify-content:flex-start} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-title-text{ font-family:var(--font-display);font-weight:700;text-transform:uppercase; font-size:clamp(1.7rem,7vw,2.1rem);line-height:1.1;letter-spacing:-.01em;color:var(--bianco)} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-icon svg{width:22px;height:22px} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-dropdown-icon{display:none} /* la voce "Servizi" scende in fondo e fa da etichetta al blocco dei servizi, che resta sempre aperto: stessa struttura del menu mobile del prototipo */ .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-item:nth-child(2){ order:9;margin-top:26px;padding-top:24px;border-top:1px solid var(--bordo-su-scuro)} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-item:nth-child(2) .e-n-menu-title-text{ font-family:var(--font-mono);font-weight:400;font-size:.7rem; letter-spacing:.14em;color:var(--grigio-medio)} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-item:nth-child(2) .e-n-menu-title-container{ padding:0 0 14px!important} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-content{ position:static!important;width:auto!important;max-width:100%!important} .s-headbar .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con{ display:flex!important;width:auto!important;max-width:100%!important} /* NOTA sugli identificatori: gli elementi del pannello servizi hanno id parlanti assegnati alla costruzione - mgpanel (il riquadro), mggrid (la griglia), mgit1..6 (le sei voci), mgi1..6 (i riquadri icona), mgtt1..6 (i titoli), mgtd1..6 (le descrizioni), mgfoot/mgfl/mgfb (la barra in fondo). Elementor li rende come classi s-. Non si possono usare nomi arbitrari: scarta le classi che non corrispondono a una Global Class esistente. */ /* 4. SERVIZI SU MOBILE: da righe larghe a schede compatte su due colonne */ .e-n-menu[data-layout="dropdown"] .s-mgpanel{ background:none!important;border:none!important;box-shadow:none!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important} .e-n-menu[data-layout="dropdown"] .s-mggrid{grid-template-columns:1fr 1fr!important;gap:10px!important} .e-n-menu[data-layout="dropdown"] :is(.s-mgit1,.s-mgit2,.s-mgit3,.s-mgit4,.s-mgit5,.s-mgit6){ background:var(--superficie-su-scuro);border:1px solid var(--bordo-su-scuro); border-radius:12px;padding:14px!important;gap:11px!important} .e-n-menu[data-layout="dropdown"] :is(.s-mgi1,.s-mgi2,.s-mgi3,.s-mgi4,.s-mgi5,.s-mgi6){ width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important; background:none!important;border:none!important;border-radius:0!important;color:var(--amber)!important} .e-n-menu[data-layout="dropdown"] :is(.s-mgi1,.s-mgi2,.s-mgi3,.s-mgi4,.s-mgi5,.s-mgi6) svg{ width:18px;height:18px} .e-n-menu[data-layout="dropdown"] :is(.s-mgtt1,.s-mgtt2,.s-mgtt3,.s-mgtt4,.s-mgtt5,.s-mgtt6){ font-size:.85rem;line-height:1.15} .e-n-menu[data-layout="dropdown"] :is(.s-mgtd1,.s-mgtd2,.s-mgtd3,.s-mgtd4,.s-mgtd5,.s-mgtd6){ display:none} .e-n-menu[data-layout="dropdown"] .s-mgfoot{ border:none!important;padding:0!important;margin-top:24px!important; flex-direction:column;align-items:stretch} .e-n-menu[data-layout="dropdown"] .s-mgfl{display:none} .e-n-menu[data-layout="dropdown"] .s-mgfb{width:100%;justify-content:center} /* 5. ripiego per chi disattiva le trasparenze nel sistema operativo */ @media (prefers-reduced-transparency: reduce){ .s-headbar,.s-mgpanel{background-color:#00132B!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} } /* 6. titoli sulle sezioni scure Il Kit imposta i titoli in navy scuro (come il prototipo). Sul fondo navy o antracite vanno in bianco: e' una regola sui discendenti, che una Global Class - applicata al singolo elemento - non puo' esprimere. IMPORTANTE: il prefisso .elementor serve per la specificita'. Elementor emette le Global Classes come `.elementor .nome` (0,2,0) in un foglio che carica DOPO questo: senza prefisso `.sezione-navy .testo-tenue` pareggia e perde. */ .elementor .sezione-navy :is(h1,h2,h3), .elementor .sezione-scura :is(h1,h2,h3){color:var(--bianco)} .elementor .sezione-navy .testo-tenue, .elementor .sezione-scura .testo-tenue{color:var(--testo-su-scuro)} /* 7. ICONE SVG: allineamento verticale Il widget SVG inserisce l'icona come elemento IN LINEA, quindi si appoggia alla linea di base di un'interlinea da 28px: piu' l'icona e' piccola, piu' scende. Il telefono da 15px usciva di 5,7px dal suo riquadro. Renderla a blocco toglie la linea di base e centra tutto. */ .e-svg-base > svg{display:block} /* 8. freccetta del menu: giu' da chiusa, su da aperta. Il controllo "Ruota" di Elementor applica una rotazione FISSA, non legata allo stato: va lasciato vuoto. La rotazione va messa sull'SVG interno, non sul pulsante: sul pulsante il widget dichiara gia' un proprio transform che vince, sull'SVG non c'e' nulla che compete. */ .s-headbar .e-n-menu .e-n-menu-dropdown-icon svg{ transition:transform .3s cubic-bezier(.2,0,0,1)} .s-headbar .e-n-menu .e-n-menu-dropdown-icon[aria-expanded="true"] svg{ transform:rotate(180deg)} /* 9. reticolo tecnico di sfondo (.blueprint) E' uno pseudo-elemento con due gradienti e una maschera radiale: v4 non ha ne' pseudo-elementi ne' mask-image. Va sull'elemento che ha position:relative. */ .blueprint::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--superficie-su-scuro) 1px,transparent 1px), linear-gradient(90deg,var(--superficie-su-scuro) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(110% 90% at 15% 0,#000,transparent 72%); mask-image:radial-gradient(110% 90% at 15% 0,#000,transparent 72%)} /* 10. freccia dentro i pulsanti: dimensione e scattino all'hover. Sono regole sui discendenti, fuori dalla portata di una Global Class. */ .elementor .bottone svg{width:18px;height:18px;flex:none; transition:transform .2s cubic-bezier(.2,0,0,1)} .elementor .bottone:hover svg{transform:translateX(3px)} /* 11. header fisso: la barra si scurisce dopo i primi 24px di scorrimento. La classe .e-scorso la mette uno snippet in Elementor > Codice personalizzato ("Header - stato scorrimento"), perche' non esiste un selettore CSS affidabile su tutti i browser per dire "la pagina e' scorsa". */ .s-hdrroot.e-scorso .s-headbar{background-color:rgba(0,19,43,.9)} /* 12. trattino dell'etichetta (eyebrow): 30x3 prima del testo. E' uno pseudo-elemento, fuori dalla portata di v4. Serve su tutte le pagine. */ .elementor .etichetta::before{content:"";width:30px;height:3px;background:var(--navy);flex:none} .elementor .etichetta-chiara::before{background:var(--amber)} /* 13. card: il titolo stringe l'interlinea al crescere del corpo */ .elementor .card h3{line-height:1.18} /* 14. segnaposto mappa (contattaci e home): fondo sfumato + reticolo. I gradienti multipli non esistono nello schema v4. */ .elementor .mappa-segnaposto{background:linear-gradient(135deg,#E4E8EC,#D2DCE9)} .elementor .mappa-segnaposto::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--bordo) 1px,transparent 1px), linear-gradient(90deg,var(--bordo) 1px,transparent 1px); background-size:28px 28px} /* il segnalino a goccia */ .elementor .mappa-pin{border-radius:50% 50% 50% 0;rotate:-45deg} /* 15. campi del modulo: stato di focus. Gli stati :focus non sono esprimibili come variante di Global Class. */ .elementor .campo-controllo:focus{outline:none;border-color:var(--navy); box-shadow:0 0 0 3px rgba(242,163,11,.15)} .elementor .campo-controllo::placeholder{color:var(--testo-tenue);opacity:.65} /* 16. RIQUADRO FOTO: velo, sfumatura di leggibilita' e grade dell'immagine. Sono due pseudo-elementi e un filtro: niente di esprimibile in v4. Usato su 8 pagine, quindi vale la pena tenerlo qui una volta sola. */ .elementor .riquadro-foto::before{content:"";position:absolute;inset:0;z-index:1; background:rgba(0,32,64,.18);mix-blend-mode:multiply;pointer-events:none} .elementor .riquadro-foto::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,19,43,0) 45%,rgba(0,19,43,.82) 100%)} .elementor .riquadro-foto img{filter:saturate(.85) contrast(1.08)} .elementor .riquadro-foto{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} .elementor .riquadro-ambra .tacca-ambra{border-color:rgba(0,19,43,.35)} /* 17. RIGA LINK: la freccia e l'adattamento al fondo scuro sono regole sui discendenti. Usata su 7 pagine. */ .elementor .riga-link svg{width:18px;height:18px;flex:none;color:var(--grigio-medio); transition:transform .25s cubic-bezier(.2,0,0,1),color .25s cubic-bezier(.2,0,0,1)} .elementor .riga-link:hover svg{transform:translateX(3px);color:var(--amber)} .elementor .sezione-navy .riga-link, .elementor .sezione-scura .riga-link{background:var(--superficie-su-scuro); border-color:var(--bordo-su-scuro);color:var(--bianco);box-shadow:none} .elementor .sezione-navy .riga-link:hover, .elementor .sezione-scura .riga-link:hover{background:var(--superficie-su-scuro-forte); border-color:var(--amber)} /* 18. PILLOLA CHIARA: quadratino ambra prima del testo */ .elementor .pillola-chiara::before{content:"";width:7px;height:7px;border-radius:2px; background:var(--amber);flex:none} /* 19. unita' di misura accanto a un numero grande ("500 mq"). Nel testo di un elemento v4 la sanificazione tiene solo l'attributo id: niente class, niente style. Quindi si aggancia per id. */ .elementor #mts-mq{font-family:var(--font-mono);font-size:1.2rem;color:var(--grigio-chiaro)} /* 20. freccia sul pulsante di invio del modulo. Il pulsante di invio non puo' avere figli, quindi la freccia e' una maschera: prende il colore del testo da sola e resta un vettore. */ .elementor .s-ctsub::after{content:"";width:18px;height:18px;flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; transition:transform .2s cubic-bezier(.2,0,0,1)} .elementor .s-ctsub:hover::after{transform:translateX(3px)} /* 21. il pulsante in fondo al pannello servizi e' lo STESSO elemento per il menu desktop e per quello mobile. Nel prototipo la freccia c'e' solo nella versione mobile: qui la si nasconde quando il menu e' orizzontale. */ .s-headbar .e-n-menu:not([data-layout="dropdown"]) .s-mgfbi{display:none} /* ==== COMPONENTI DELLE PAGINE SERVIZIO ==== Galleria, video e FAQ: tutti e tre vivono di pseudo-elementi, figure e selettori sui figli, che una Global Class non puo' esprimere. */ /* 22. GALLERIA */ /* NB: nel prototipo sono
/
, ma i contenitori v4 ammettono solo div/section/article/aside/header/footer. I selettori sono quindi sul figlio diretto e su una classe, non sul tag. */ .elementor .galleria > *{position:relative;margin:0;border-radius:var(--radius-card); overflow:hidden;aspect-ratio:4/5;background:#E4E8EC; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} .elementor .galleria img{width:100%;height:100%;object-fit:cover; filter:saturate(.85) contrast(1.08);transition:transform .5s cubic-bezier(.2,0,0,1)} .elementor .galleria > *:hover img{transform:scale(1.05)} .elementor .galleria > *::before{content:"";position:absolute;inset:0;z-index:1; background:rgba(0,32,64,.18);mix-blend-mode:multiply;pointer-events:none} .elementor .galleria-didascalia{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:14px 16px;color:var(--bianco);font-family:var(--font-mono);font-size:.66rem; letter-spacing:.06em;text-transform:uppercase;margin:0; background:linear-gradient(180deg,rgba(0,19,43,0) 45%,rgba(0,19,43,.82) 100%); display:flex;gap:10px;align-items:center} @media(min-width:901px){ /* la foto guida occupa due colonne. La PROPORZIONE la decide lo stile dell'elemento, non questa regola: qui la specificita' e' piu' alta e vincerebbe, impedendo di allineare la riga. */ .elementor .galleria-guida > *:first-child{grid-column:span 2} } /* i riquadri della galleria non hanno rientro: la foto arriva al bordo, altrimenti resta un anello di sfondo dentro l'angolo arrotondato */ .elementor .galleria > *{padding:0} /* 23. VIDEO: cornice con gli angoli ambra */ .elementor .video-riquadro::before, .elementor .video-riquadro::after{content:"";position:absolute;width:14px;height:14px; z-index:2;pointer-events:none} .elementor .video-riquadro::before{top:-1px;left:-1px; border-top:2px solid var(--amber);border-left:2px solid var(--amber);border-radius:18px 0 0 0} .elementor .video-riquadro::after{bottom:-1px;right:-1px; border-bottom:2px solid var(--amber);border-right:2px solid var(--amber);border-radius:0 0 18px 0} .elementor .video-riquadro video{display:block;width:100%;aspect-ratio:9/16; border-radius:12px;background:#000;object-fit:cover;filter:saturate(.85) contrast(1.08)} @media(min-width:901px){ .elementor .video-affiancato{grid-template-columns:1fr minmax(280px,360px)} } .elementor .video-etichetta::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--amber);flex:none} /* 24. FAQ: e' un
nativo, quindi passa da un blocco HTML. Nessun JavaScript, apertura e chiusura le fa il browser. */ .elementor .faq-voce{border-bottom:1px solid var(--bordo)} .elementor .faq-domanda{width:100%;display:flex;justify-content:space-between;gap:20px; align-items:center;background:none;border:none;cursor:pointer;padding:22px 0;text-align:left; font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--navy-dark); list-style:none} .elementor .faq-domanda::-webkit-details-marker{display:none} .elementor .faq-domanda .ic{flex:none;width:28px;height:28px;border:1px solid var(--bordo); border-radius:var(--radius-sm);display:grid;place-items:center; transition:transform .25s cubic-bezier(.2,0,0,1),background .25s cubic-bezier(.2,0,0,1), color .25s cubic-bezier(.2,0,0,1),border-color .25s cubic-bezier(.2,0,0,1)} .elementor .faq-voce[open] .faq-domanda .ic{transform:rotate(45deg); background:var(--navy);color:var(--bianco);border-color:var(--navy)} .elementor .faq-risposta{padding:0 0 24px;color:var(--testo-tenue);max-width:64ch;margin:0} /* 25. CARD LARGA: la card che occupa tutta la riga della griglia */ .elementor .card-larga .card-icona{margin-bottom:0;flex:none} .elementor .card-larga h3{margin-bottom:6px} .elementor .card-larga > div:last-child{flex:1}/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/clashdisplay-400.woff2') format('woff2'); } @font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/clashdisplay-500.woff2') format('woff2'); } @font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/clashdisplay-600.woff2') format('woff2'); } @font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/clashdisplay-700.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/generalsans-400.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/generalsans-500.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/generalsans-600.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/generalsans-700.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/jetbrainsmono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://milanotrailerservice.it/wp-content/uploads/fonts/jetbrainsmono-500.woff2') format('woff2'); } /* End Custom Fonts CSS */