.elementor-kit-12{--e-global-color-primary:#16161A;--e-global-color-secondary:#56565E;--e-global-color-text:#E4981B;--e-global-color-accent:#EECD00;--e-global-color-0722a44:#F5F5F2;--e-global-color-374b693:#EDEDE8;--e-global-color-e18ecc1:#E7E7E2;--e-global-color-c8b67e6:#FFF6C2;--e-global-color-79c7de6:#8B8B93;--e-global-typography-primary-font-family:"Futura";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Jost";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:500;}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}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;}}:root { --Nero-custom:#16161A; --Autocosi-giallo-chiaro:#eecd00; --Autocosi-giallo-ocra:#e4981b; } /* Start custom CSS *//* ══════════════════════════════════════════════════════════════ AUTO COSÌ · CSS personalizzato Elementor → Impostazioni sito → CSS personalizzato ══════════════════════════════════════════════════════════════ COME È FATTO QUESTO FILE Ogni sezione riguarda un pezzo preciso del sito e si aggancia a una classe che gli hai dato tu dal pannello di Elementor (Avanzate → Classi CSS). Se togli la classe dal widget, la sezione corrispondente smette di avere effetto: non rompe niente. QUI DENTRO C'È SOLO QUELLO CHE ELEMENTOR NON SA FARE. Ogni regola ha sopra il motivo per cui esiste. Se un domani Elementor aggiunge il controllo che manca, quel pezzo si può cancellare. INDICE 1 · La card dell'auto (Loop Item) 2 · Testo evidenziato nei titoli 3 · Modulo Elementor della home (versione vecchia) 4 · Footer 5 · Catalogo · impianto, testata e riga risultati 6 · Catalogo · filtri 7 · Scheda prodotto 8 · FAQ 9 · Modulo di valutazione 10 · Pulsante WhatsApp della scheda prodotto 11 · Le due azioni della scheda prodotto 12 · Maschera di ricerca della home ← marca e modello stanno qui NOTA SULLA NUMERAZIONE Nella versione precedente si saltava dalla 8 alla 10: la 9 non è mai esistita, era un mio errore di conteggio. Qui i numeri sono di nuovo di fila. Non è stata tolta nessuna regola. ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 1 · LA CARD DELL'AUTO (Loop Item) ══════════════════════════════════════════════════════════════ */ /* La foto riempie un riquadro 3:2 a qualunque larghezza. La proporzione sta sul RIQUADRO; l'altezza va poi passata giù di livello in livello fino all'immagine, altrimenti height:100% non ha niente su cui appoggiarsi e la foto esce da sotto. */ .ac-card-foto{ aspect-ratio:3 / 2; overflow:hidden; border-radius:14px; background:#F5F5F2; display:block; } .ac-card-foto > .elementor-widget-image, .ac-card-foto > .elementor-widget-image .elementor-widget-container, .ac-card-foto > .elementor-widget-image figure, .ac-card-foto > .elementor-widget-image a{ display:block; width:100%; height:100%; margin:0; } .ac-card-foto > .elementor-widget-image img{ width:100%; height:100%; max-width:100%; object-fit:cover; display:block; margin:0; } /* La card riempie lo slide e il prezzo si appoggia sempre in fondo: così card di altezza diversa restano allineate sulla riga del prezzo. */ .e-loop-item{ display:flex; } .e-loop-item > .ac-card{ flex-grow:1; min-width:0; } .ac-card > .e-con-inner{ flex-grow:1; } .ac-card-corpo{ flex-grow:1; } .ac-card-corpo > *:last-child{ margin-top:auto; } /* Il titolo occupa sempre due righe, la versione una sola: così specifiche, pillola e prezzo partono alla stessa quota su tutte le card, anche quando un nome è corto e un altro lungo. */ .ac-titolo .elementor-heading-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.24em; /* due righe a interlinea 1.12 */ } .ac-versione .elementor-heading-title{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } /* Le specifiche sono un testo unico, non quattro blocchi affiancati: il punto di separazione lo mette il CSS, e se un valore manca non resta un puntino orfano. */ .ac-specs{ display:block; } .ac-specs > .elementor-element{ display:inline; width:auto; white-space:nowrap; } .ac-specs > .elementor-element > .elementor-widget-container{ display:inline; } .ac-specs .elementor-heading-title{ display:inline; } .ac-specs > .elementor-element:not(:last-child)::after{ content:"\00B7"; padding:0 2px 0 5px; color:#8B8B93; } .ac-specs > .elementor-element:has(.elementor-heading-title:empty){ display:none; } .ac-specs > .elementor-element:has(+ .elementor-element .elementor-heading-title:empty)::after{ content:none; } /* Cifre tutte della stessa larghezza: prezzi e chilometri incolonnati. */ .ac-specs, .ac-prezzo .price{ font-variant-numeric:tabular-nums; } /* ══════════════════════════════════════════════════════════════ 2 · TESTO EVIDENZIATO NEI TITOLI Si usano dentro il campo Titolo, avvolgendo la parola in uno …. ══════════════════════════════════════════════════════════════ */ /* Parola in giallo. */ .ac-giallo{ color:#EECD00; } /* Parola sottolineata in giallo, con la riga che non si interrompe sotto le lettere che scendono (la g, la p). */ .ac-sott{ text-decoration:underline; text-decoration-color:#EECD00; text-decoration-thickness:.16em; text-underline-offset:.06em; text-decoration-skip-ink:none; } /* Parola evidenziata: pastiglia gialla piena. box-decoration-break fa in modo che, se il testo va a capo, la pastiglia si chiuda bene su tutte e due le righe invece di restare aperta. */ .ac-evid{ background:#EECD00; color:#16161A; border-radius:10px; padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } /* ══════════════════════════════════════════════════════════════ 3 · MODULO ELEMENTOR DELLA HOME (versione vecchia) Classe: .ac-maschera ATTENZIONE: questa è la maschera fatta con il widget Modulo, quella dei tre campi prezzo/km/anno. Quando avrai sostituito il widget Modulo con il widget Shortcode [ac_maschera] questa sezione non servirà più e potrai cancellarla tutta: finché il Modulo è ancora nella pagina, però, lasciala dov'è. La maschera nuova, quella con marca e modello, è la sezione 12. Il widget Modulo ha la scheda Stile più povera di tutte: i campi hanno solo colori, tipografia e bordo. Niente rientro, niente altezza, niente stato al passaggio del mouse (Elementor #10591). ══════════════════════════════════════════════════════════════ */ .ac-maschera .elementor-field-textual.elementor-field-textual{ min-height:50px; padding:14px 40px 14px 14px; line-height:1.2; border-radius:14px; background-color:#F5F5F2; } .ac-maschera .elementor-field-textual.elementor-field-textual:hover{ background-color:#EDEDE8; } /* Il pulsante non ha l'altezza: ce l'hanno solo i contenitori. La classe è doppia perché così vince su quella che Elementor scrive da sé dal pannello. */ .ac-maschera .elementor-button.elementor-button{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; line-height:1; border-radius:999px; transition:background-color .18s ease, transform .16s ease; } .ac-maschera .elementor-button.elementor-button:hover{ transform:translateY(-2px); } .ac-maschera .elementor-button-icon i, .ac-maschera .elementor-button-icon svg{ width:16px; height:16px; font-size:16px; } /* Le tre icone ocra accanto alle etichette. Sono decorative, quindi non vanno nel testo: il colore lo dà background, non l'SVG. La classe elementor-field-group-ID la genera il widget dall'ID che hai dato al campo: se cambi gli ID, cambia anche qui. */ .ac-maschera .elementor-field-label{ display:flex; align-items:center; gap:6px; } .ac-maschera .elementor-field-label:before{ content:""; width:14px; height:14px; flex:none; background:#E4981B; -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat; } .ac-maschera .elementor-field-group-max .elementor-field-label{ --ico:url("data:image/svg+xml;utf8,"); } .ac-maschera .elementor-field-group-kmmax .elementor-field-label{ --ico:url("data:image/svg+xml;utf8,"); } .ac-maschera .elementor-field-group-annomin .elementor-field-label{ --ico:url("data:image/svg+xml;utf8,"); } /* ══════════════════════════════════════════════════════════════ 4 · FOOTER Classe: .ac-foot-griglia sul contenitore, .ac-foot-lista sulle liste Le proporzioni con la virgola non si esprimono con le larghezze a percentuale del pannello. I punti di rottura sono quelli del prototipo — 600, 900, 1200 — non quelli di Elementor. ══════════════════════════════════════════════════════════════ */ .ac-foot-griglia{ display:grid; gap:26px; } .ac-foot-griglia > .e-con{ width:auto; max-width:none; } @media (min-width:600px){ .ac-foot-griglia{ grid-template-columns:repeat(2,1fr); } } @media (min-width:900px){ .ac-foot-griglia{ grid-template-columns:1.6fr 1fr 1fr 1fr; } } @media (min-width:1200px){ .ac-foot-griglia{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; } } /* Area di tocco delle voci: 40 px, come nel prototipo. Il widget Lista icone non ha un rientro verticale per voce. */ .ac-foot-lista .elementor-icon-list-item > a, .ac-foot-lista .elementor-icon-list-item > .elementor-icon-list-text{ display:block; padding:8px 0; } /* ══════════════════════════════════════════════════════════════ 5 · CATALOGO · IMPIANTO, TESTATA E RIGA RISULTATI Classi: .ac-catalogo, .ac-crumbs, .ac-pagehead-testo, .ac-results-bar ══════════════════════════════════════════════════════════════ */ /* LE DUE COLONNE. Da 1025px in su: filtri 264 px fissi, risultati che riempiono il resto. Non si fa dal pannello: un contenitore figlio di Elementor nasce con Larghezza 100%, quindi con "A capo" attivo la colonna risultati va a capo e si prende tutta la riga sotto ai filtri. width:auto è la riga che annulla quel 100%. align-items:start serve allo sticky dei filtri: senza, la colonna si stira per tutta l'altezza della riga e lo sticky non ha spazio in cui scorrere. minmax(0,1fr) impedisce alla griglia delle auto di allargare la colonna oltre lo schermo. Sotto i 1025px non c'è nessuna regola: le due colonne restano una sopra l'altra a larghezza piena, come sul telefono. */ .ac-catalogo > .e-con{ min-width:0; } @media (min-width:1025px){ .ac-catalogo{ display:grid; grid-template-columns:264px minmax(0,1fr); gap:28px; align-items:start; } .ac-catalogo > .e-con{ width:auto; max-width:none; } } /* Le briciole: il widget stila il testo, non la disposizione né l'area cliccabile. Senza il padding, una riga di 13 px è un bersaglio da 16 px sul telefono. */ .ac-crumbs .woocommerce-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; margin:0 0 14px; font-family:"Manrope", sans-serif; font-size:13px; font-weight:600; color:#8B8B93; } .ac-crumbs .woocommerce-breadcrumb a{ display:inline-block; padding:6px 0; color:#8B8B93; text-decoration:none; } .ac-crumbs .woocommerce-breadcrumb a:hover{ color:#16161A; } /* Il testo dell'archivio arriva dall'editor di WordPress, quindi è dentro dei

che non hanno controlli nel pannello. */ .ac-pagehead-testo p{ margin:0; } .ac-pagehead-testo p + p{ margin-top:10px; } .ac-pagehead-testo a{ color:#16161A; text-decoration:underline; text-underline-offset:3px; } /* La riga dei risultati: conteggio a sinistra, ordinamento a destra. Sono due widget Shortcode, quindi il pannello non tocca il loro contenuto. Il numero esce dentro un perché va in Jost a 19, mentre il resto della frase è Manrope a 14. */ .ac-results-bar{ font-family:"Manrope", sans-serif; font-size:14px; font-weight:500; color:#8B8B93; } .ac-results-bar b{ font-family:"Jost", sans-serif; font-size:19px; font-weight:700; letter-spacing:-.03em; color:#16161A; } .ac-results-bar .woocommerce-ordering{ margin:0; } .ac-results-bar .woocommerce-ordering select{ height:42px; padding:0 16px; border:0; border-radius:999px; background:#F5F5F2; color:#16161A; font-family:"Manrope", sans-serif; font-size:14px; font-weight:700; cursor:pointer; } /* ══════════════════════════════════════════════════════════════ 6 · CATALOGO · FILTRI Classi: .ac-filtri (pannello laterale), .ac-barrafiltri (telefono), .ac-fgroup (ogni gruppo del pannello) I widget "Filtra prodotti per attributo" e "Filtra prodotti attivi" sono widget classici di WordPress: Elementor non ha nessun controllo sul loro contenuto. Tutto quello che segue esiste per questo motivo. ══════════════════════════════════════════════════════════════ */ /* Le voci diventano pillole a capo, come nel prototipo. Gli !important servono perché WooCommerce le stila con .woocommerce .widget_layered_nav ul li — due classi e due elementi — che batte una regola con una classe sola. */ .ac-filtri ul, .ac-barrafiltri ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; } .ac-filtri ul li, .ac-barrafiltri ul li{ display:inline-flex; align-items:center; min-height:40px; padding:0 15px !important; margin:0 !important; list-style:none !important; border-radius:999px; background:#F5F5F2; transition:background-color .16s ease; } .ac-filtri ul li:hover, .ac-barrafiltri ul li:hover{ background:#EDEDE8; } .ac-filtri ul li.chosen, .ac-barrafiltri ul li.chosen{ background:#16161A; } .ac-filtri ul li a, .ac-barrafiltri ul li a{ font-family:"Manrope", sans-serif; font-size:14px; font-weight:600; color:#16161A; text-decoration:none; } .ac-filtri ul li.chosen a, .ac-barrafiltri ul li.chosen a{ color:#FFFFFF; } .ac-filtri ul li .count, .ac-barrafiltri ul li .count{ font-size:12px; opacity:.5; margin-left:6px; float:none !important; /* WooCommerce lo manda a destra */ font-variant-numeric:tabular-nums; } .ac-filtri ul li.chosen .count{ color:#FFFFFF; } /* I gruppi del pannello, separati da una linea. */ .ac-fgroup{ padding:18px 0; border-bottom:1px solid #E7E7E2; } .ac-fgroup:last-child{ border-bottom:0; } /* La × dei filtri attivi: WooCommerce la disegna rossa (#a00). Il glifo è un cerchio pieno con la croce vuota, quindi sul pillolino nero diventa cerchio giallo e croce nera. */ .ac-filtri .widget_layered_nav_filters li a::before{ color:#EECD00 !important; } /* La barra sopra il catalogo: è il filtro del telefono, agganciata in alto sotto la testata e su una riga sola che scorre di lato. Su desktop è nascosta dal pannello (Reattivo → Nascondi). */ .ac-barrafiltri{ position:sticky; top:62px; z-index:50; } @media (min-width:900px){ .ac-barrafiltri{ top:74px; } } .ac-barrafiltri ul{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .ac-barrafiltri ul::-webkit-scrollbar{ display:none; } .ac-barrafiltri ul li{ flex:none; white-space:nowrap; } /* Il pulsante Neopatentati che sta accanto alle pillole: è un tag, non un attributo, quindi il widget dei filtri non lo vede e resta un widget Pulsante — che però non ha l'altezza. */ .ac-barrafiltri .elementor-button{ min-height:40px; padding:0 15px; display:inline-flex; align-items:center; } /* Il pannello resta agganciato mentre scorri, ma solo su desktop. È position:sticky del CSS e non lo sticky di Elementor: dentro la colonna si ferma da solo alla fine, invece di galleggiare sopra il footer. overscroll-behavior evita che, finito l'elenco dei filtri, la rotellina continui a far scorrere la pagina sotto. */ @media (min-width:1025px){ .ac-filtri{ position:sticky; top:162px; max-height:calc(100vh - 192px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } } /* ══════════════════════════════════════════════════════════════ 7 · SCHEDA PRODOTTO Classi: .ac-scheda, .ac-galleria, .ac-dprice ══════════════════════════════════════════════════════════════ */ /* Due colonne 1.1 / 0.9: con le percentuali del pannello i 40 px di distacco mandano la seconda colonna a capo. */ @media (min-width:900px){ .ac-scheda{ display:grid; grid-template-columns:1.1fr .9fr; gap:0 40px; align-items:start; } .ac-scheda > .e-con{ width:auto; max-width:none; } } /* Miniature della galleria su una riga sola che scorre. Il widget Immagine prodotto non ha un controllo di proporzione, e WooCommerce le dispone su quattro colonne: con sedici foto diventano quattro righe che allungano la pagina. Gli !important sono necessari, le stila con quattro classi e tre elementi. */ .ac-galleria .flex-control-thumbs{ display:flex !important; flex-wrap:nowrap !important; gap:8px; margin:10px 0 0 !important; padding:0 0 6px !important; overflow-x:auto !important; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; list-style:none; } .ac-galleria .flex-control-thumbs li{ flex:0 0 auto !important; width:96px !important; float:none !important; margin:0 !important; scroll-snap-align:start; } .ac-galleria .flex-control-thumbs img{ width:100% !important; aspect-ratio:4 / 3; object-fit:cover; border-radius:12px; display:block; opacity:1 !important; cursor:pointer; } .ac-galleria .flex-control-thumbs img.flex-active{ outline:2px solid #16161A; outline-offset:-2px; } .ac-galleria .flex-control-thumbs::-webkit-scrollbar{ height:6px; } .ac-galleria .flex-control-thumbs::-webkit-scrollbar-thumb{ background:#E7E7E2; border-radius:999px; } /* Il prezzo grande. WooCommerce lo stila con .woocommerce div.product p.price, che batte sia una regola semplice sia il controllo Tipografia del widget: qui l'!important non è una scorciatoia. La misura è elastica come nel prototipo — da 32 a 43,2 px — quindi non serve la media query. */ .ac-dprice .price, .ac-dprice .price bdi, .ac-dprice .woocommerce-Price-amount, .ac-dprice .woocommerce-Price-currencySymbol{ font-family:"Jost", sans-serif !important; font-size:clamp(2rem, 7.6vw, 2.7rem) !important; font-weight:700 !important; letter-spacing:-.04em !important; line-height:1 !important; color:#16161A !important; } .ac-dprice .price{ margin:0 !important; font-style:normal !important; } /* ══════════════════════════════════════════════════════════════ 8 · FAQ Classe: .ac-faq sul contenitore del widget Accordion ══════════════════════════════════════════════════════════════ */ .ac-faq .e-n-accordion{ display:grid; gap:8px; } /* La card. Chiusa è grigia e piatta; aperta diventa bianca con il filo di bordo e l'ombra — lo stesso passaggio delle card auto. */ .ac-faq .e-n-accordion-item{ border-radius:16px; background:#F5F5F2; overflow:hidden; transition:background-color .2s ease, box-shadow .2s ease; } .ac-faq .e-n-accordion-item[open]{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #E7E7E2, 0 2px 4px rgba(22,22,26,.04), 0 10px 22px -10px rgba(22,22,26,.16); } /* La domanda. */ .ac-faq .e-n-accordion-item-title{ padding:16px 18px 17px; gap:12px; } .ac-faq .e-n-accordion-item-title-text{ font-family:"Jost", sans-serif; font-size:18px; font-weight:600; letter-spacing:-.025em; color:#16161A; } /* La risposta: nessuna scatola, solo la spaziatura interna della card. 72ch tiene la riga a una lunghezza leggibile sui monitor larghi. */ .ac-faq .e-n-accordion-item > .e-con{ padding:0 18px 20px; background:none; border:0; border-radius:0; } .ac-faq .e-n-accordion-item .elementor-widget-text-editor{ font-family:"Manrope", sans-serif; font-size:15px; font-weight:500; line-height:1.55; color:#56565E; max-width:72ch; } .ac-faq .e-n-accordion-item p{ margin:0; } .ac-faq .e-n-accordion-item p + p{ margin-top:6px; } /* ══════════════════════════════════════════════════════════════ 9 · MODULO DI VALUTAZIONE Classe: .ac-valuta sul contenitore del widget Modulo (era la sezione 10 nella versione precedente) ══════════════════════════════════════════════════════════════ */ /* --- la testata di ogni passo -------------------------------- */ .ac-valuta .ac-vhead{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:18px 0 8px; } .ac-valuta .ac-vhead__t{ margin:0; font-family:"Jost", sans-serif; font-size:clamp(1.35rem, 4.4vw, 1.6rem); font-weight:700; letter-spacing:-.035em; line-height:1; color:#16161A; } .ac-valuta .ac-vhead__n{ font-family:"Manrope", sans-serif; font-size:13px; font-weight:700; letter-spacing:.04em; color:#8B8B93; white-space:nowrap; font-variant-numeric:tabular-nums; } .ac-valuta .ac-vhead__n b{ color:#16161A; } .ac-valuta .ac-vhint{ margin:-6px 0 0; font-size:12.5px; font-weight:500; color:#8B8B93; } /* --- altezza esatta e stato al fuoco ------------------------- La scheda Campi dà colore, bordo e raggio ma non la spaziatura interna: quella ce l'hanno solo i contenitori. Il contorno compare solo quando il campo è attivo: meno linee a riposo. */ .ac-valuta .elementor-field-textual{ min-height:56px; padding:14px 18px; transition:background-color .18s ease, box-shadow .18s ease; } .ac-valuta .elementor-field-textual:hover{ background-color:#EDEDE8; } .ac-valuta .elementor-field-textual:focus{ outline:none; background-color:#FFFFFF; box-shadow:inset 0 0 0 1.5px #16161A; } .ac-valuta .elementor-field-textual::placeholder{ color:#B6B6BC; font-weight:500; } .ac-valuta textarea.elementor-field-textual{ min-height:110px; } /* --- la targa ------------------------------------------------ Aggancia il campo per il suo ID: Elementor scrive id="form-field-targa" partendo dall'ID del campo. Se cambi quell'ID, cambia anche qui. La banda blu è un SVG scritto dentro il CSS, non un file da caricare. */ .ac-valuta #form-field-targa{ padding-left:58px; text-transform:uppercase; letter-spacing:.2em; font-weight:800; background-color:#FFFFFF; box-shadow:inset 0 0 0 1px #E7E7E2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='60' viewBox='0 0 38 60'%3E%3Crect width='38' height='60' fill='%23003399'/%3E%3Ccircle cx='19' cy='12' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='23' cy='13.07' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='25.93' cy='16' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='27' cy='20' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='25.93' cy='24' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='23' cy='26.93' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='19' cy='28' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='15' cy='26.93' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='12.07' cy='24' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='11' cy='20' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='12.07' cy='16' r='1.3' fill='%23FFCC00'/%3E%3Ccircle cx='15' cy='13.07' r='1.3' fill='%23FFCC00'/%3E%3Crect x='17.2' y='36' width='3.6' height='14' fill='%23FFFFFF'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left center; background-size:42px 100%; } .ac-valuta #form-field-targa::placeholder{ letter-spacing:.14em; font-weight:600; } .ac-valuta #form-field-targa:focus{ box-shadow:inset 0 0 0 1.5px #16161A; } /* --- scelte a pillola ---------------------------------------- Restano radio veri: l'input è nascosto e l'aspetto lo prende l'etichetta, che il browser collega comunque al campo — quindi la tastiera continua a funzionare. Vale solo per i campi di tipo Radio: il consenso resta una casella normale. */ .ac-valuta .elementor-field-type-radio .elementor-field-subgroup{ display:flex; flex-wrap:wrap; gap:8px; } .ac-valuta .elementor-field-type-radio .elementor-field-option{ display:inline-flex; } .ac-valuta .elementor-field-type-radio .elementor-field-option input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .ac-valuta .elementor-field-type-radio .elementor-field-option label{ display:inline-flex; align-items:center; min-height:46px; padding:0 18px; margin:0; border-radius:999px; background:#F5F5F2; font-family:"Manrope", sans-serif; font-size:14.5px; font-weight:600; color:#16161A; cursor:pointer; transition:background-color .16s ease, color .16s ease; } .ac-valuta .elementor-field-type-radio .elementor-field-option label::before{ content:""; width:0; height:6px; border-radius:50%; background:#EECD00; margin-right:0; transition:width .18s ease, margin-right .18s ease; } .ac-valuta .elementor-field-type-radio .elementor-field-option label:hover{ background:#EDEDE8; } .ac-valuta .elementor-field-type-radio .elementor-field-option input:checked + label{ background:#16161A; color:#FFFFFF; } .ac-valuta .elementor-field-type-radio .elementor-field-option input:checked + label::before{ width:6px; margin-right:10px; } .ac-valuta .elementor-field-type-radio .elementor-field-option input:focus-visible + label{ outline:3px solid #E4981B; outline-offset:2px; } /* --- il riquadro di caricamento ------------------------------ */ .ac-valuta .elementor-field-type-upload input[type=file]{ width:100%; min-height:92px; padding:20px 18px 20px 62px; border:1.5px dashed #DCDCD6; border-radius:18px; background-color:#F5F5F2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8B93' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2l1.2-2h8.2l1.2 2h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:22px center; background-size:22px 22px; font-family:"Manrope", sans-serif; font-size:14px; font-weight:600; color:#16161A; cursor:pointer; transition:border-color .18s ease, background-color .18s ease; } .ac-valuta .elementor-field-type-upload input[type=file]:hover{ border-color:#8B8B93; background-color:#EDEDE8; } .ac-valuta input[type=file]::file-.elementor-kit-12-button{ margin-right:12px; border:0; border-radius:999px; padding:10px 16px; background:#FFFFFF; color:#16161A; font-family:"Manrope", sans-serif; font-size:13px; font-weight:700; box-shadow:0 1px 2px rgba(22,22,26,.05); cursor:pointer; } /* --- la freccia dei menu a tendina --------------------------- */ .ac-valuta select.elementor-field-textual{ appearance:none; -webkit-appearance:none; padding-right:46px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356565E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; background-size:16px; cursor:pointer; } /* ══════════════════════════════════════════════════════════════ 10 · PULSANTE WHATSAPP DELLA SCHEDA PRODOTTO Classe: .ac-wa — la scrive lo shortcode [ac_whatsapp] (era la sezione 11 nella versione precedente) ══════════════════════════════════════════════════════════════ */ .ac-wa{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; padding:0 22px; border-radius:999px; background:#EECD00; color:#16161A; font-family:"Manrope", sans-serif; font-size:15px; font-weight:700; text-decoration:none; box-shadow:0 2px 4px rgba(22,22,26,.04), 0 10px 22px -10px rgba(22,22,26,.16); transition:background-color .18s ease, box-shadow .18s ease, transform .16s ease; } .ac-wa:hover{ background:#FFD814; color:#16161A; transform:translateY(-2px); box-shadow:0 4px 10px rgba(22,22,26,.05), 0 20px 40px -16px rgba(22,22,26,.22); } .ac-wa svg{ width:16px; height:16px; flex:none; } /* ══════════════════════════════════════════════════════════════ 11 · LE DUE AZIONI DELLA SCHEDA PRODOTTO Classe: .ac-azioni sul contenitore che tiene i due pulsanti (era la sezione 12 nella versione precedente) Un widget Pulsante e un widget Shortcode non si accordano da soli: sono due elementi diversi e ognuno si dimensiona per conto suo. flex:1 1 0 li fa partire entrambi da zero e dividere la riga in parti uguali — con la base a "auto" vincerebbe il testo più lungo. width:auto serve ad annullare il 100% che Elementor mette di default su ogni widget dentro un contenitore. ══════════════════════════════════════════════════════════════ */ .ac-azioni{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; } .ac-azioni > .elementor-element{ flex:1 1 0; width:auto; max-width:none; min-width:0; } /* I due bottoni veri riempiono la loro metà e hanno la stessa altezza: 50 px, la misura di tutti i pulsanti del sito. */ .ac-azioni .elementor-button, .ac-azioni .ac-wa{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; box-sizing:border-box; } /* Sul telefono si impilano a tutta riga. */ @media (max-width:479px){ .ac-azioni > .elementor-element{ flex:1 1 100%; } } /* ══════════════════════════════════════════════════════════════ 12 · MASCHERA DI RICERCA DELLA HOME Classe: .ac-msk — la scrive lo shortcode [ac_maschera] (era la sezione 13 nella versione precedente) Questa è la maschera nuova, quella con CINQUE menu: marca · modello · prezzo · chilometri · anno più il pulsante Cerca. È uno shortcode, quindi il pannello di Elementor non tocca niente: tutto lo stile passa da qui. COSA È CAMBIATO RISPETTO A PRIMA, e perché · la larghezza minima delle colonne scende da 180 a 168 px: con sei caselle in riga, 180 px non ci stavano più sui monitor da 1280-1366 e l'ultima andava a capo da sola; · in fondo c'è una regola nuova per il menu Modello quando è spento. Il menu Modello nasce disattivato e si accende solo dopo che hai scelto una marca: senza quella regola resta identico agli altri e sembra rotto invece che in attesa. ══════════════════════════════════════════════════════════════ */ /* LA GRIGLIA. auto-fit sistema da solo le caselle: ne mette in riga quante ne entrano e manda a capo le altre. Non c'è nessuna media query da tenere aggiornata, e il giorno in cui aggiungessimo un sesto filtro questa riga non va toccata. Larghezza minima 168 px: sotto quella misura il nome dei modelli più lunghi verrebbe tagliato. align-items:end tiene i menu allineati in basso, così il pulsante Cerca resta sulla stessa linea anche se un'etichetta va su due righe. */ .ac-msk{ display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)); gap:12px; align-items:end; } /* Ogni casella: etichetta sopra, menu sotto. min-width:0 è indispensabile dentro una griglia: senza, un