/* ==========================================================================
uniteam: ux.css, strato UX del 18 set 2026 (modelli/CONTRATTO-ux.md)
Solo produzione: lo iniettano build.py (statiche) e render.php (PHP).
Parte U1. Gli url() relativi si risolvono rispetto a questo foglio (ux/).
Indice
1. Token --ut-*
2. Fascia del titolo interna (§8)
3. Header mobile: pulsante «Preventivo» (§9)
4. Pagina contatti: card
5. Card veicolo (§4) U1b
6. Filtro Marca (§5) U1b
7. Galleria della scheda (§7) U1b
8. Configuratore (§6) U1b
9. Movimento ridotto
10. Regole per larghezza, in fondo e in ordine decrescente
11. Piede di pagina (CONTRATTO-footer, 22 set 2026): sta prima del §9,
le sue regole per larghezza nei blocchi del §10
12. Caratteristiche della scheda a tessere (22 set 2026): prima dell'11
13. Invito WhatsApp «Vuoi una configurazione diversa?» al posto del
banner, scheda e home (22 set 2026): fra il 12 e l'11
14. Velo di caricamento col tetto di un secondo (23 set 2026): prima del 9
0. Caratteri: DM Sans ed Epilogue serviti dal sito e sottoinsiemi dei
font di icone (23 set 2026): in testa a tutto
Giro 3 (19 set 2026): token dei pulsanti d'azione (§1), veicoli
commerciali (§4.3), slider con poche auto (§5.8), barra sticky nei due
versi (§6.1 bis), WhatsApp col banner dei cookie e sulla galleria (§7.4),
messaggio del configuratore sotto il pulsante (§8.5 bis), «Filtra e
ordina» chiuso già alla prima pittura (§10, fino a 991 px).
Specificità: il kit impone (0,1,1) su button, input e h1..h6; ogni regola
nuova su titoli, pulsanti e campi sta sotto un contenitore proprio, (0,2,0)
o più.
========================================================================== */
/* ==========================================================================
0. Caratteri (fase F4, 23 set 2026) — audit velocita.md §4 e §11.1/§11.2
0.1 DM Sans ed Epilogue serviti dal sito.
Il mirror li chiedeva a `fonts.googleapis.com` con due che bloccano
il disegno, e i file poi a `fonts.gstatic.com`: due origini nuove, DNS,
TLS e un foglio in mezzo. Misurato: con Google Fonts la prima pittura
arriva a 1,25..2,35 s in 12 corse su 18, coi file qui a 0,16..0,25 s in
21 su 21. In piu' il browser non manda piu' l'indirizzo IP del visitatore
a Google PRIMA del consenso.
Sono gli stessi file di gstatic (DM Sans v17, Epilogue v20, licenza OFL),
**variabili**: un file per famiglia, stile e sottoinsieme, buono per ogni
peso (DM Sans 100..1000, Epilogue 100..900), cioe' esattamente quello che
serviva Google. Stessi `unicode-range` di Google: latin si scarica sempre,
latin-ext solo se in pagina c'e' un carattere dell'Europa dell'est, il
corsivo solo se qualcuno lo chiede. Misurato sul banco il 23 set 2026:
una pagina italiana scarica i due file `latin` e basta (72,7 KB), e la sola
cookie policy si prende anche `dm-sans-italic-latin` (38,9 KB), perche' e'
l'unica pagina del sito col corsivo. I corsivi e i `latin-ext` stanno qui
apposta: un testo scritto dal pannello puo' chiederli domani, e allora deve
uscire il carattere vero e non l'inclinato finto del browser.
I due file del testo sopra la piega (dm-sans-latin, epilogue-latin) sono
anche in `` subito dopo ``: li mette
`testa_veloce()` di build.py nelle statiche e `rnd_testa_veloce()` di
api/render.php in archivi e schede, con lo STESSO indirizzo che sta qui
sotto (una query diversa sarebbe un secondo scaricamento). I di
Google li toglie la stessa regola.
0.2 Sottoinsiemi dei font di icone.
Ogni pagina scaricava da 530 a 600 KB di font di icone (elementskit 454 KB
dappertutto) per disegnare al massimo cinque glifi. Qui sotto le stesse
famiglie, con gli stessi descrittori, puntate a file da uno a tre KB e con
un `unicode-range` sui soli glifi che il sito usa: a parita' di famiglia,
peso e stile il browser sceglie prima per `unicode-range` e poi prende
l'ultima regola dichiarata, e `ux.css` e' l'ultimo foglio della testa.
Un glifo FUORI dall'intervallo non sparisce: ricade da solo sulla
dichiarazione originale, cioe' sul file intero, come oggi.
Una famiglia puo' volere DUE file: il tema dichiara i suoi Font Awesome 6
coi nomi di famiglia di Font Awesome 5, e i due disegnano gli stessi
codepoint in modo diverso, quindi ogni glifo si prende dal file che oggi
lo disegna davvero. I due file NON si fondono: ognuno ha il suo
`unicode-range`, e i due intervalli non si sovrappongono (fondere con
fontTools cambiava il contorno di 5 glifi su 17).
I file e il manifesto `ux/fonti/icone.json` li genera
`tools/prova_font_icone.py --genera`; la stessa prova, senza argomenti,
fa fallire il collaudo se il sito usa un glifo che non c'e'. ⚠️ Gli
`unicode-range` qui sotto devono combaciare col manifesto byte per byte.
========================================================================== */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("fonti/dm-sans-latin-v17.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("fonti/dm-sans-latin-ext-v17.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 100 1000;
font-display: swap;
src: url("fonti/dm-sans-italic-latin-v17.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 100 1000;
font-display: swap;
src: url("fonti/dm-sans-italic-latin-ext-v17.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Epilogue';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonti/epilogue-latin-v20.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Epilogue';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonti/epilogue-latin-ext-v20.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Epilogue';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("fonti/epilogue-italic-latin-v20.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Epilogue';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("fonti/epilogue-italic-latin-ext-v20.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* 5 glifi, 1136 byte, da site/wp-content/plugins/elementskit-lite/modules/elementskit-icon-pack/assets/fonts/elementskit.woff */
@font-face {
font-family: elementskit;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonti/elementskit-ut1.woff2") format("woff2");
unicode-range: U+e87d-e87e, U+e994, U+e9a5, U+eaaa;
}
/* 4 glifi, 3380 byte, da site/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2 */
@font-face {
font-family: eicons;
font-style: normal;
font-weight: 400;
src: url("fonti/eicons-ut1.woff2") format("woff2");
unicode-range: U+e87d-e87e, U+e994, U+e9a5;
}
/* 12 glifi, 1176 byte, da site/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2 */
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url("fonti/fa5-solid-ut1.woff2") format("woff2");
unicode-range: U+f007, U+f00d, U+f02b, U+f04b, U+f058, U+f067-f068, U+f073, U+f077-f078, U+f0e0, U+f35a;
}
/* 2 glifi, 716 byte, da site/wp-content/themes/novaride/assets/webfonts/fa-solid-900.woff2 */
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url("fonti/fa5-solid-ut2.woff2") format("woff2");
unicode-range: U+f177-f178;
}
/* 5 glifi, 984 byte, da site/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff2 */
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("fonti/fa5-regular-ut1.woff2") format("woff2");
unicode-range: U+f007, U+f058, U+f073, U+f0e0, U+f35a;
}
/* 4 glifi, 1160 byte, da site/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2 */
@font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("fonti/fa5-brands-ut1.woff2") format("woff2");
unicode-range: U+f0e1, U+f16d, U+f232, U+f39e;
}
/* 1 glifi, 656 byte, da site/wp-content/themes/novaride/assets/webfonts/fa-brands-400.woff2 */
@font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("fonti/fa5-brands-ut2.woff2") format("woff2");
unicode-range: U+f067;
}
/* 14 glifi, 1572 byte, da site/wp-content/themes/novaride/assets/webfonts/fa-solid-900.woff2 */
@font-face {
font-family: "Font Awesome 6 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url("fonti/fa6-solid-ut1.woff2") format("woff2");
unicode-range: U+f007, U+f00d, U+f02b, U+f04b, U+f058, U+f067-f068, U+f073, U+f077-f078, U+f0e0, U+f177-f178, U+f35a;
}
/* 5 glifi, 1336 byte, da site/wp-content/themes/novaride/assets/webfonts/fa-brands-400.woff2 */
@font-face {
font-family: "Font Awesome 6 Brands";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("fonti/fa6-brands-ut1.woff2") format("woff2");
unicode-range: U+f067, U+f0e1, U+f16d, U+f232, U+f39e;
}
/* ==========================================================================
1. Token
========================================================================== */
:root {
--ut-ink: #040401;
--ut-accent: #FF3600;
--ut-accent-ink: #CC2E00;
--ut-accent-soft: rgba(255, 54, 0, .08);
--ut-navy: #1B3B6F;
--ut-navy-900: #0A142A;
--ut-navy-850: #040A25;
--ut-cream: #FFF8F6;
--ut-surface-cool: #F0F4FA;
--ut-text: #616161;
--ut-muted: #6E6E6E;
--ut-line: #ECECEC;
--ut-line-cool: #E4E9F0;
--ut-success: #2E8B57;
--ut-error: #D93A3A;
--ut-font-head: 'Epilogue', sans-serif;
--ut-font-body: 'DM Sans', sans-serif;
--ut-r-xl: 46px;
--ut-r-lg: 30px;
--ut-r-md: 16px;
--ut-r-sm: 12px;
--ut-r-pill: 100px;
--ut-shadow-card: 0 2px 16px rgba(27, 59, 111, .07);
--ut-shadow-modal: 0 16px 48px rgba(10, 20, 42, .25);
--ut-focus: 0 0 0 3px rgba(27, 59, 111, .15);
/* Pulsanti d'azione dello strato UX (giro 3, decisione del titolare):
un solo arancio pieno, #CC2E00 (bianco sopra: 5,3:1, AA anche a 12 px),
al passaggio il nero del sito; l'ombra dello stesso arancio. */
--ut-azione: var(--ut-accent-ink);
--ut-azione-sopra: var(--ut-ink);
--ut-azione-ombra: 0 6px 18px rgba(204, 46, 0, .22);
}
/* testo per i soli lettori di schermo */
.ut-vh {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ==========================================================================
2. Fascia del titolo interna (§8)
Quattro varianti, una sola fascia:
E Elementor .bg-section con breadcrumb ElementsKit: agenzia 529a6c8,
contatti 6174ccc, faq 7ff3725, servizi 2a4a8cf, veicoli commerciali 41df74a
T tema .page-header.background-section con immagine (archivi, schede)
N tema senza immagine, prima nera (privacy, cookie, termini)
B articoli del blog: .post-single-meta al posto del breadcrumb
Home e /richiesta-ricevuta/ hanno la hero 5983312: qui non entrano.
Misure: altezza minima fluida (circa 283 px a 1440, 168 a 390), contenuto
centrato in verticale, quindi titolo su una o due righe = stessa altezza.
Composizione: briciole in alto come occhiello (asterisco del marchio),
titolo grande allineato a sinistra, segno Uniteam a destra in trasparenza.
========================================================================== */
/* 2.1 Contenitore: misure, sfondo, segno */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section,
body .page-header.background-section {
--ut-f-m: 50px; /* margine laterale */
--ut-f-r: var(--ut-r-xl); /* raggio */
--ut-f-h: clamp(168px, calc(110px + 12vw), 284px); /* altezza minima */
--ut-f-py: clamp(28px, 3.9vw, 56px); /* respiro verticale minimo */
--ut-f-px: clamp(20px, 3.75vw, 54px); /* rientro del testo: a 1440 sotto il logo */
--ut-f-col: 1270px; /* colonna del testo sugli schermi larghi */
--ut-f-h1: clamp(30px, calc(16px + 3.1vw), 62px); /* titolo */
--ut-f-h1-lungo: min(var(--ut-f-h1), clamp(18px, calc(.5px + 5vw), 46px)); /* articoli: 20 px a 390, mai più grande del titolo normale */
--ut-f-eb: clamp(12px, calc(10px + .25vw), 13.5px); /* occhiello */
--ut-f-gap: clamp(10px, 1.25vw, 18px); /* occhiello-titolo */
--ut-f-segno-h: calc(var(--ut-f-h) * 1.34); /* altezza del segno */
--ut-f-segno-x: clamp(-72px, calc(1.5vw - 20px), -8px); /* dal bordo destro (esce un poco) */
--ut-f-segno-y: calc(var(--ut-f-h) * .16); /* dal bordo alto */
position: relative;
box-sizing: border-box;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
width: calc(100% - 2 * var(--ut-f-m)) !important;
max-width: 1820px;
min-height: var(--ut-f-h) !important;
margin: 0 auto !important;
padding: 0 !important;
border-radius: var(--ut-f-r) !important;
overflow: hidden !important;
isolation: isolate;
color: #fff;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -84 308 265'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.02'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 -84A84 84 0 0 1 0 84ZM308 -84A84 84 0 0 0 308 84ZM125 0H181A181 181 0 0 1 0 181V125A125 125 0 0 0 125 0ZM183 0A125 125 0 0 0 308 125V181A181 181 0 0 1 127 0Z'/%3E%3C/svg%3E") no-repeat right var(--ut-f-segno-x) top var(--ut-f-segno-y) / auto var(--ut-f-segno-h),
linear-gradient(100deg, rgba(4, 10, 37, .78) 0%, rgba(4, 10, 37, .5) 42%, rgba(4, 10, 37, .12) 100%),
url("../wp-content/uploads/2026/03/Progetto-senza-titolo-26.jpg.webp") center top / cover no-repeat,
#0A2A6B !important;
--overlay-opacity: 0; /* velo di Elementor spento */
--kit-widget-spacing: 0px;
}
/* veli dei due temi: il velo è già nello sfondo */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section::before,
body .page-header.background-section::before {
content: none !important;
display: none !important;
}
/* 2.2 Variante E: struttura Elementor */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section > .e-con-inner {
box-sizing: border-box;
display: block !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-width: calc(var(--ut-f-col) + 2 * var(--ut-f-px)) !important;
margin: 0 auto !important;
padding: var(--ut-f-py) var(--ut-f-px) !important;
gap: 0 !important;
}
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section > .e-con-inner > .e-con {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: var(--ut-f-gap) !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section .elementor-widget {
width: 100%;
max-width: 100%;
margin: 0 !important;
text-align: left !important;
}
/* le briciole salgono sopra il titolo e restano ferme e visibili, anche senza JS */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section .elementor-widget-elementskit-breadcrumb {
order: -1;
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
/* 2.3 Varianti T, N, B: struttura del tema */
body .page-header.background-section > .container {
box-sizing: border-box;
width: 100%;
max-width: calc(var(--ut-f-col) + 2 * var(--ut-f-px));
margin: 0 auto;
padding: var(--ut-f-py) var(--ut-f-px);
position: relative;
z-index: 1;
}
body .page-header.background-section > .container > .row {
margin: 0;
}
body .page-header.background-section > .container > .row > [class*="col-"] {
width: 100%;
padding: 0;
}
body .page-header.background-section .page-header-box {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--ut-f-gap);
text-align: left;
}
body .page-header.background-section .page-header-box > .breadcrumb-trail,
body .page-header.background-section .page-header-box > .post-single-meta {
order: -1;
max-width: 100%;
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
/* 2.4 Titolo (le quattro varianti) */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section .elementor-heading-title,
body .page-header.background-section .page-header-box h1 {
max-width: 16em;
margin: 0 !important;
padding: 0;
font-family: var(--ut-font-head) !important;
font-size: var(--ut-f-h1) !important;
font-weight: 700 !important;
line-height: 1.06 !important;
letter-spacing: -.02em !important;
color: #fff !important;
text-align: left !important;
text-wrap: balance;
overflow-wrap: break-word;
hyphens: manual;
}
/* articoli: titoli lunghi, due righe al massimo anche a 390 */
body.single-post .page-header.background-section .page-header-box h1 {
max-width: 22em;
font-size: var(--ut-f-h1-lungo) !important;
line-height: 1.12 !important;
}
/* descrizione di un archivio, se il pannello la riempie */
body .page-header.background-section .page-header-box .taxonomy-description {
max-width: 60ch;
margin: 0;
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, .82);
}
body .page-header.background-section .page-header-box .taxonomy-description p {
margin: 0;
}
/* 2.5 Occhiello: briciole (E, T, N) e data dell'articolo (B) */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb,
body .page-header.background-section .page-header-box ol.trail-items,
body .page-header.background-section .post-single-meta ul {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start !important;
max-width: 100%;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
font-family: var(--ut-font-body) !important;
font-size: var(--ut-f-eb) !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
}
/* l'asterisco del marchio, come negli occhielli di tutto il sito */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb::before,
body .page-header.background-section .page-header-box ol.trail-items::before,
body .page-header.background-section .post-single-meta ul::before {
content: "";
flex: 0 0 auto;
width: 1.1em;
height: 1.1em;
margin-right: .75em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 2.58 12 12'%3E%3Cpath fill='%23FF3600' d='M12.3827 8.57776L15.4995 10.3489L14.0579 12.8066L10.9411 11.0354V14.5778H8.05793V11.0354L4.94109 12.8066L3.49951 10.3489L6.61632 8.57776L3.49951 6.80656L4.94109 4.34893L8.05793 6.12013V2.57776H10.9411V6.12013L14.0579 4.34895L15.4995 6.80659L12.3827 8.57776Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb > li,
body .page-header.background-section .page-header-box ol.trail-items > li,
body .page-header.background-section .post-single-meta ul > li {
display: block !important;
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
font: inherit !important;
letter-spacing: inherit;
color: inherit !important;
white-space: nowrap;
}
/* la voce corrente: bianca, e se non ci sta si accorcia (il titolo sotto è intero) */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb > li:last-child,
body .page-header.background-section .page-header-box ol.trail-items > li:last-child {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: #fff !important;
}
/* separatori: la barra del tema e l'icona di ElementsKit diventano lo stesso segno */
body .page-header.background-section .page-header-box ol.trail-items > li::before,
body .page-header.background-section .post-single-meta ul > li + li::before {
content: "/" !important;
display: inline !important;
margin: 0 .7em !important;
color: rgba(255, 255, 255, .38) !important;
font: inherit !important;
}
body .page-header.background-section .page-header-box ol.trail-items > li:first-child::before {
content: none !important;
display: none !important;
}
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb > li.brd_sep {
display: flex !important;
align-items: center;
margin: 0 .7em !important;
opacity: .38;
line-height: 0 !important;
}
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb > li.brd_sep svg {
display: block;
width: auto;
height: .9em;
}
/* collegamenti */
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb a,
body .page-header.background-section .page-header-box ol.trail-items a,
body .page-header.background-section .post-single-meta a {
font: inherit !important;
letter-spacing: inherit;
color: rgba(255, 255, 255, .78) !important;
text-decoration: none;
border-radius: 4px;
transition: color .2s ease;
}
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb a:hover,
body .page-header.background-section .page-header-box ol.trail-items a:hover,
body .page-header.background-section .post-single-meta a:hover {
color: #fff !important;
text-decoration: underline;
text-decoration-color: var(--ut-accent);
text-decoration-thickness: 2px;
text-underline-offset: .3em;
}
.elementor :is(.elementor-element-529a6c8, .elementor-element-6174ccc, .elementor-element-7ff3725, .elementor-element-2a4a8cf, .elementor-element-41df74a).e-con.bg-section ol.ekit-breadcrumb a:focus-visible,
body .page-header.background-section .page-header-box ol.trail-items a:focus-visible,
body .page-header.background-section .post-single-meta a:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* articoli: niente icone, la data fa da occhiello */
body .page-header.background-section .post-single-meta ul li i {
display: none !important;
}
/* ==========================================================================
3. Header mobile: pulsante «Preventivo» (§9, ultima riga)
Lo crea ux.js dentro il contenitore del menu (35a01c7), prima dell'hamburger.
Visibile solo sotto i 1025 px, dove il «Preventivo» dell'header sparisce.
========================================================================== */
.elementor-6626 a.ut-preventivo-mobile {
display: none;
}
/* ==========================================================================
4. Pagina contatti: card del modulo
Il contenitore de92ff2 dichiara --content-width 1366px, più largo della
colonna del sito (1300): la card sbordava di 13 px per lato rispetto alla
fascia. Torna sulla colonna del sito, come le altre sezioni. Sul telefono
la colonna del modulo (842353b) si allinea alla card blu (regole in fondo).
========================================================================== */
body .elementor-3193 .elementor-element.elementor-element-de92ff2 {
--content-width: 1300px;
}
/* L'aeroplanino decorativo (sfondo di f96dc6b, a «96% 102%») cadeva dentro
il modulo a passi, più alto del CF7 che sostituisce: al passo 3 con gli
errori copriva «per proseguire». Con il modulo sale nell'angolo in alto a
destra, rimpicciolito, nello spazio libero accanto al titolo «Richiedi un
preventivo»: vola verso il titolo e la scia resta sopra i passi. Sotto i
1025 px il tema lo nasconde già (dimensione 0). */
@media (min-width: 1025px) {
body .elementor-3193 .elementor-element.elementor-element-f96dc6b:has(.ut-richiesta) {
background-position: right 52px top 30px;
background-size: 150px auto;
}
}
/* Tastiera (giro 2): Elementor nasconde con visibility:hidden i blocchi con
l'animazione d'entrata (.elementor-invisible) finché non entrano nella
vista, e un elemento nascosto non prende il fuoco: col Tab le CTA della
home si saltavano. Se il blocco contiene link o pulsanti resta trasparente
ma visibile (fuoco e lettori di schermo lo trovano); al fuoco si vede
subito, e ux.js gli toglie l'animazione (.ut-senza-entrata). Le briciole
della fascia hanno già la loro regola (opacity 1 !important). */
.ut-js .elementor-element.elementor-invisible:has(a[href], button) {
visibility: visible;
opacity: 0;
/* giro 3: trasparente ma non cliccabile (un tocco su uno spazio che sembra
vuoto apriva la CTA); il fuoco da tastiera non cambia. Dal giro 3
html.ut-js c'è già alla prima pittura, quindi vale da subito. */
pointer-events: none;
}
.ut-js .elementor-element.elementor-invisible:has(a[href], button):focus-within,
.ut-js .elementor-element.ut-senza-entrata {
opacity: 1;
}
.ut-js .elementor-element.ut-senza-entrata,
.ut-js .elementor-element.ut-senza-entrata.animated {
animation: none !important;
}
/* 4.2 Home, modulo «Devi noleggiare un auto?» (CF7 7750, widget dcb53ca;
giro 2, decisione del titolare: nome e telefono obbligatori). Il tema
centra le colonne in verticale: quando CF7 scrive «Compila questo campo.»
sotto nome e telefono quelle due colonne si allungano e le altre scendono
(etichette sfalsate di 17 px a 1440, di 30 a 1024, dove «Nome e Cognome»
andava anche a capo). Qui le colonne restano alte uguali (i separatori
pure) col contenuto in alto, le etichette stanno su una riga, il pulsante
resta dov'era (centrato sulla riga dei campi senza errori) e l'errore sta
su una riga sola, nel rosso dei token (4,7:1 sul bianco; quello del tema,
3,6:1, non passava). Il modulo si vede da 768 px in su (sotto lo nasconde
Elementor). */
.elementor-element-dcb53ca .rent-details-box {
align-items: stretch;
}
.elementor-element-dcb53ca .rent-details-box .rent-details-item label {
white-space: nowrap;
}
.elementor-element-dcb53ca .rent-details-box .rent-details-item.rent-details-search {
align-self: flex-start;
}
@media (min-width: 992px) {
/* una riga sola: il pulsante (50 px) al centro dei 62 px di etichetta e campo */
.elementor-element-dcb53ca .rent-details-box .rent-details-item.rent-details-search {
margin-top: 6px;
}
}
/* il tema scrive il rosso chiaro con !important: per superarlo serve lo stesso */
.elementor-element-dcb53ca .rent-details-item .wpcf7-not-valid-tip {
margin-top: 4px;
font-size: 14px;
line-height: 1.35;
color: var(--ut-error) !important;
}
.elementor-element-dcb53ca form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output {
border-color: var(--ut-error) !important;
color: var(--ut-error) !important;
}
/* Segno di obbligatorio su nome e telefono. La build mette nell'etichetta
* (aria-required
sui campi): qui lo span prende corpo, peso e interlinea dell'etichetta
(Elementor e ElementsKit gli davano 16 px, peso 400 e interlinea 27,2:
l'etichetta diventava più alta delle altre). Se il markup non ha il segno,
lo disegna ::after, muto per i lettori di schermo. La specificità supera
quella della regola del widget (.elementor-9080 … label span, 0,5,3). */
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .rent-details-item:has(:is(input[name="fullname"], input[name="phone"])) label:not(:has(*))::after {
content: "*";
content: "*" / "";
color: var(--ut-accent-ink);
}
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .rent-details-item:has(:is(input[name="fullname"], input[name="phone"])) label > :is(span, abbr, b, strong, sup) {
display: inline;
margin-left: 2px;
color: var(--ut-accent-ink);
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-decoration: none;
}
/* 4.2 bis Spunta di consenso del modulo 7750 (giro 4, decisione del titolare
del 20 set 2026: il modulo raccoglieva nome, telefono, email e data senza
consenso e senza un link all'informativa).
Il markup lo mette `build.py` (`consenso_7750()`): una sesta colonna
`.ut-consenso` prima del pulsante, con dentro una casella vera
(`input[type=checkbox][name=privacy]`) nascosta alla vista e un quadrato
disegnato qui. Aspetto e testo sono quelli del consenso del modulo a passi
(`ux/richiesta.css`, blocco «consenso»): stessa misura del quadrato, stesso
segno di spunta, stessi colori, stesso corpo del testo, così la stessa
frase non ha due facce in due punti del sito.
Le quattro colonne dei campi riempiono la prima riga esatta (88% meno
5 px): la spunta prende la stessa misura e il pulsante le va accanto, dove
stava. Il separatore verticale che il tema toglie all'ULTIMA colonna adesso
toccherebbe alla spunta: lo si toglie a tutte e due. */
.elementor-element-dcb53ca .rent-details-box .rent-details-item.ut-consenso,
.elementor-element-dcb53ca .rent-details-box .rent-details-item.rent-details-search {
padding-right: 0;
border-right: 0;
}
/* E il filetto va tolto anche al QUARTO campo («Urgenza»). Prima il pulsante
gli stava di fianco e quel bordo li divideva; ora che il pulsante è sceso
accanto alla spunta, il quarto campo chiude la riga e il filetto resta
appeso nel vuoto, con la riga bianca fino in fondo alla scatola (visto a
1440, 1024 e 1000). Il campo si riconosce da chi ha davanti, non dalla
posizione: `:has()` non fa danni dove non c'è (resta il filetto di oggi),
mentre un `nth-last-child` conterebbe male il giorno in cui la riga
cambia. Il `padding-right` resta: toglierlo allargherebbe di 25 px il solo
quarto campo, e i quattro devono restare uguali. */
.elementor-element-dcb53ca .rent-details-box .rent-details-item:has(+ .ut-consenso) {
border-right: 0;
}
.elementor-element-dcb53ca .rent-details-box .rent-details-item.ut-consenso {
width: 100%;
}
@media (min-width: 992px) {
.elementor-element-dcb53ca .rent-details-box .rent-details-item.ut-consenso {
width: calc(88% - 5px);
align-self: center;
}
/* il pulsante non è più in fila coi campi ma accanto alla spunta: i 6 px
che lo centravano sulla riga di etichetta e campo qui lo scentrerebbero */
.elementor-element-dcb53ca .rent-details-box .rent-details-item.rent-details-search {
align-self: center;
margin-top: 0;
}
}
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso p {
margin: 0;
}
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .wpcf7-form-control-wrap {
position: relative;
display: block;
}
/* l'etichetta del consenso è la riga intera, non il nome di un campo: niente
18 px in grassetto e niente `nowrap` (§4.2), che la terrebbe su una riga
sola e la farebbe uscire dalla scatola */
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso label.ut-casella {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 0;
color: var(--ut-text);
font-family: var(--ut-font-body);
font-size: 14.5px;
font-weight: 400;
line-height: 1.5;
white-space: normal;
cursor: pointer;
}
/* ElementsKit ed Elementor danno a ogni `span` dentro una `label` del modulo
13 px grigi e `display:block`: qui i due span sono il quadrato e il testo */
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella > span {
display: block;
margin: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
/* la casella vera resta nel documento, invisibile ma raggiungibile: la
tastiera ci arriva, i lettori di schermo la leggono, e il modulo la manda
al server anche senza JavaScript */
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella-input {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
pointer-events: none;
}
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella-segno {
box-sizing: border-box;
flex: none;
width: 22px;
height: 22px;
margin-top: 1px;
border: 1.5px solid #B7C1D0;
border-radius: 6px;
background: #fff no-repeat center / 13px 13px;
transition: background-color .15s ease, border-color .15s ease;
}
/* il segno di spunta è un'immagine di sfondo, non un disegno nel markup:
senza questo foglio non resta uno scarabocchio in pagina, resta la casella
di serie del browser */
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella-input:checked + .ut-casella-segno {
border-color: var(--ut-navy);
background-color: var(--ut-navy);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
}
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella-input:focus-visible + .ut-casella-segno {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
}
@media (hover: hover) {
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella:hover .ut-casella-segno {
border-color: var(--ut-navy);
}
}
/* quando manca la spunta, il JavaScript di CF7 mette `wpcf7-not-valid` sulla
casella e `aria-invalid` a `true`: il quadrato si tinge come gli altri
errori del modulo */
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella-input:is(.wpcf7-not-valid, [aria-invalid="true"]) + .ut-casella-segno {
border-color: var(--ut-error);
}
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella-testo a {
color: var(--ut-navy);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover: hover) {
body .elementor .elementor-element.elementor-element-dcb53ca .ekit-form form .ut-consenso .ut-casella-testo a:hover {
color: var(--ut-accent-ink);
}
}
/* il suggerimento di CF7 arriva dopo l'etichetta: senza `display:block` il
margine di §4.2 non farebbe niente (su un elemento in linea si perde) */
.elementor-element-dcb53ca .rent-details-item.ut-consenso .wpcf7-not-valid-tip {
display: block;
}
/* 4.3 /veicoli-commerciali/ (pagina Elementor 6683, giro 3)
- Occhiello «Veicoli aziendali» (ca31350): il titolo è largo quanto la
riga e l'asterisco del tema (::before assoluto a sinistra) finiva sul
bordo dello schermo, a 658 px dal testo centrato (131 a 390). Il titolo
si stringe sul testo e resta centrato: asterisco accanto alla parola,
come negli altri occhielli.
- Slider (0e4bcc4): stava a filo dei bordi (da 10 a 1430 a 1440) mentre la
pagina e lo slider delle offerte in home stanno nella colonna (da 80 a
1360): stessa colonna, 1280 px al massimo e 10 px in più per lato fino a
768 px, a tutta larghezza sotto (come la home). Con tre furgoni la fila
la sistema il §5.8. */
.elementor-6683 .elementor-element.elementor-element-ca31350 .elementor-heading-title {
display: inline-block;
position: relative;
}
.elementor-6683 .elementor-element.elementor-element-0e4bcc4 {
box-sizing: border-box;
width: min(1280px, 100% - 20px);
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
5. Card veicolo (§4) U1b
Ganci del render (R1): .ut-card[data-forma][data-tipo] su archivi
(.perfect-fleet-item.fleets-collection-item) e slider (.perfect-fleet-item).
Ogni parte ha un'altezza decisa qui, quindi a parità di larghezza tutte
le card sono alte uguali e il prezzo cade alla stessa quota:
riquadro foto 3:2 · titoletto · titolo 2 righe + sottotitolo 2 righe
riservate · due righe fisse · prezzo in fondo (margin-top:auto).
Foto (misurate sulle 54 del banco): nelle quadrate l'auto sta fra il 20 e
il 79% dell'altezza, un 3:2 in cover ne mostra il 16,7-83,3%, nessuna si
taglia; orizzontali (4:3, 3:2, 1,6) cover; larghe (16:9, 2,46) contain.
========================================================================== */
/* 5.1 La card: colonna flessibile a tutta altezza */
.ut-card {
--ut-c-titolo: 20px; /* corpo del titolo */
--ut-c-sotto: 13px; /* corpo del sottotitolo */
--ut-c-tag: 28px; /* altezza del titoletto (pillola) */
--ut-c-gap: 18px; /* respiro fra foto, titoli, righe, prezzo */
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #fff;
border-color: var(--ut-line);
container-type: inline-size;
transition: border-color .3s ease, box-shadow .3s ease;
}
/* slider: le slide si allungano alla più alta, la card le riempie */
.novaride-car-slider .swiper-slide {
height: auto;
}
.novaride-car-slider .swiper-slide > .ut-card {
height: 100%;
}
.ut-card > .perfect-fleet-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
/* 5.2 Riquadro della foto: stessa proporzione per tutte */
.ut-card .image-box {
position: relative;
flex: 0 0 auto;
aspect-ratio: 3 / 2;
margin: 0 0 var(--ut-c-gap);
overflow: hidden;
border-radius: var(--ut-r-md);
background: #fff;
text-align: center;
}
.ut-card:not([data-forma]) .image-box {
background: var(--ut-cream); /* card senza foto: il riquadro resta */
}
.ut-card .image-box > a {
display: block;
width: 100%;
height: 100%;
}
.ut-card .image-box a img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
object-position: 50% 50%;
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ut-card[data-forma="larga"] .image-box a img {
object-fit: contain;
}
/* 5.3 Titoletto, titolo e sottotitolo: righe riservate */
.ut-card .perfect-fleet-title {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0 0 var(--ut-c-gap);
min-height: calc(var(--ut-c-tag) + 12px + 2.4 * var(--ut-c-titolo) + 6px + 2.8 * var(--ut-c-sotto));
}
.ut-card .perfect-fleet-title h3 {
box-sizing: border-box;
display: block;
max-width: 100%;
height: var(--ut-c-tag);
margin: 0 0 12px;
padding: 8px 14px;
overflow: hidden;
border-radius: var(--ut-r-pill);
background-color: var(--ut-line);
font-family: var(--ut-font-body) !important;
white-space: nowrap;
text-overflow: ellipsis;
}
.ut-card .perfect-fleet-title h3:empty {
visibility: hidden; /* nessun tipo: lo spazio resta */
}
.ut-card .perfect-fleet-title h3 a {
position: relative;
z-index: 2;
color: var(--ut-ink);
text-decoration: none;
}
/* badge «Offerta del mese»: anche su /car-type/offerta-del-mese/, dove il
link del tipo è ./ ; accent-ink perché il bianco a 12 px su #FF3600 non
passa AA (3,6:1), su #CC2E00 sì (5,3:1) */
.ut-card[data-tipo="offerta-del-mese"] .perfect-fleet-title h3,
.ut-card .perfect-fleet-title h3:has(a[href*="offerta-del-mese"]) {
background-color: var(--ut-accent-ink) !important;
}
.ut-card[data-tipo="offerta-del-mese"] .perfect-fleet-title h3 a,
.ut-card .perfect-fleet-title h3:has(a[href*="offerta-del-mese"]) a {
color: #fff !important;
}
.ut-card .perfect-fleet-title h2 {
display: -webkit-box;
margin: 0;
overflow: hidden;
font-size: var(--ut-c-titolo) !important;
line-height: 1.2 !important;
letter-spacing: -.01em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow-wrap: break-word;
}
.ut-card .perfect-fleet-title h2 a {
color: var(--ut-ink);
text-decoration: none;
transition: color .25s ease;
}
/* tutta la card porta alla scheda (il titoletto e la freccia restano sopra) */
.ut-card .perfect-fleet-title h2 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--ut-r-lg);
}
.ut-card .novaride-car-subtitle {
display: -webkit-box;
margin: 6px 0 0;
overflow: hidden;
font-family: var(--ut-font-body);
font-size: var(--ut-c-sotto);
font-weight: 400;
line-height: 1.4;
color: var(--ut-muted);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* 5.4 Le due righe fisse: «[icona] Durata … 48 mesi» (valore a destra) */
.ut-card .perfect-fleet-body {
margin: 0 0 var(--ut-c-gap);
padding: 0 0 var(--ut-c-gap);
border-bottom: 1px solid var(--ut-line);
}
.ut-card .perfect-fleet-body ul {
display: grid;
row-gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.ut-card .perfect-fleet-body ul li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) auto;
column-gap: 10px;
align-items: center;
margin: 0;
font-family: var(--ut-font-body);
font-size: 14px;
font-weight: 400;
line-height: 1.3;
color: var(--ut-muted);
}
.ut-card .perfect-fleet-body ul li > label {
display: contents;
}
.ut-card .perfect-fleet-body ul li i {
grid-area: 1 / 1;
display: block;
width: 18px;
height: 18px;
background-color: var(--ut-accent);
-webkit-mask: var(--ut-c-icona) center / contain no-repeat;
mask: var(--ut-c-icona) center / contain no-repeat;
}
.ut-card .perfect-fleet-body ul li:nth-child(1) i {
/* calendario */
--ut-c-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}
.ut-card .perfect-fleet-body ul li:nth-child(2) i {
/* strada */
--ut-c-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21 9 3M19 21 15 3M12 5v2M12 11v2M12 17v2'/%3E%3C/svg%3E");
}
.ut-card .perfect-fleet-body ul li .feature-value {
grid-area: 1 / 2;
min-width: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ut-card .perfect-fleet-body ul li .feature-label {
grid-area: 1 / 3;
margin: 0;
font-weight: 700;
color: var(--ut-ink);
white-space: nowrap;
}
/* 5.5 Prezzo e freccia, sempre in fondo */
.ut-card .perfect-fleet-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
}
.ut-card .perfect-fleet-pricing {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.ut-card .perfect-fleet-pricing h2 {
margin: 0;
line-height: 1 !important;
letter-spacing: -.01em;
white-space: nowrap;
color: var(--ut-ink);
}
.ut-card .perfect-fleet-pricing h2 span {
margin-left: 2px;
color: var(--ut-muted);
}
.ut-card .perfect-fleet-btn {
flex: 0 0 auto;
}
.ut-card .perfect-fleet-btn .section-icon-btn {
position: relative;
z-index: 2;
margin: 0;
}
/* 5.6 Passaggio del mouse (solo dove il mouse c'è: sul telefono il tocco
lascerebbe la foto ingrandita) e fuoco */
@media (hover: hover) {
.ut-card:hover {
border-color: rgba(27, 59, 111, .2);
box-shadow: var(--ut-shadow-card);
}
.ut-card:hover .image-box a img {
transform: scale(1.035);
}
.ut-card:hover .perfect-fleet-title h2 a {
color: var(--ut-accent-ink);
}
}
.ut-card a:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
border-radius: 8px;
}
/* il titolo è il link di tutta la card: il fuoco disegna il bordo della card */
.ut-card .perfect-fleet-title h2 a:focus-visible {
outline: none;
}
.ut-card .perfect-fleet-title h2 a:focus-visible::after {
outline: 2px solid var(--ut-navy);
outline-offset: 2px;
}
.ut-card .perfect-fleet-title h3 a:focus-visible,
.ut-card .perfect-fleet-btn a.section-icon-btn:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
}
.ut-card .perfect-fleet-btn a.section-icon-btn:focus-visible {
border-radius: 50%;
}
/* 5.7 Card strette (1024 px e slider a 5 colonne): righe più compatte */
@container (max-width: 230px) {
.ut-card .perfect-fleet-body ul li {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 8px;
font-size: 13px;
}
.ut-card .perfect-fleet-body ul li i {
display: none;
}
.ut-card .perfect-fleet-body ul li .feature-value {
grid-area: 1 / 1;
}
.ut-card .perfect-fleet-body ul li .feature-label {
grid-area: 1 / 2;
}
}
/* 5.7 bis Card ancora più strette (griglia degli archivi a due colonne da
mobile, §10, richiesta del titolare 20 set 2026): sotto i 176 px di
contenitore, anche col corpo già ridotto (5.7), la colonna flessibile
dell'etichetta non ha più spazio per «Chilometri/anno» (96 px a 13 px di
corpo) mentre il valore in grassetto accanto (auto, es. «10.000 km», circa
66 px) non si stringe mai: coi due affiancati (98 px disponibili nel caso
più stretto, 320 px di schermo, contro i 170 necessari) il testo finiva
troncato a una lettera («C…»), leggibile per intero solo dallo screen
reader. Misurato sulla griglia a due colonne: 98 px di contenitore a
320 px di schermo, 133 a 390, 145 a 414, 168 a 460 — tutti sotto soglia,
tutti troncati prima della correzione; 178 a 480, dove il testo passa
(ci sta per un pelo, 104 di 104 disponibili) e la soglia lascia la riga
singola di 5.7 com'era. Sotto i 176 px le due colonne diventano due righe:
l'etichetta sopra per intero, il valore in grassetto sotto. La soglia
scelta (176) sta apposta sotto i 178 del caso limite di 480 px di schermo
e ben sotto i 184 dell'archivio a tre colonne di 1024 px (child di 5.7:
lì il testo c'è già per intero, non deve impilarsi) — attenzione: la
query confronta il CONTENUTO della card (dopo padding 20 px e bordo 1 px
per lato), non la larghezza esterna, come già 5.7 e 5.9. Scoperto e
corretto solo per gli archivi (.page-fleets): gli slider della vetrina
(home, /veicoli-commerciali/) non scendono mai sotto i 184 px di
contenuto — 5 per vista, la vista più stretta, resta a 190 — e restano
quindi con valore ed etichetta affiancati. */
@container (max-width: 176px) {
.page-fleets .ut-card .perfect-fleet-body ul li {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
row-gap: 2px;
}
.page-fleets .ut-card .perfect-fleet-body ul li .feature-value {
grid-area: 1 / 1;
overflow: visible;
white-space: normal;
text-overflow: clip;
}
.page-fleets .ut-card .perfect-fleet-body ul li .feature-label {
grid-area: 2 / 1;
}
}
/* 5.8 Slider con poche auto (giro 3). Con meno auto di quante ne entrano in
una vista (/veicoli-commerciali/: 3 furgoni, 3 per vista da 991 px e 4 da
1300) il loop di Swiper mostrava la stessa auto due volte. ux.js (modulo
slider-pochi) mette .ut-slider-fermo finché tutte stanno in vista: fila
ferma e centrata, card larghe come nello slider (--ut-per-vista e
--ut-spazio dalla configurazione del widget), niente copie, frecce né
autoplay. Sotto quella soglia lo slider resta com'è. */
.novaride-car-slider.ut-slider-fermo .swiper-wrapper {
justify-content: center;
gap: var(--ut-spazio, 30px);
transform: none !important;
}
.novaride-car-slider.ut-slider-fermo .swiper-slide {
flex: 0 0 auto;
width: calc((100% - (var(--ut-per-vista, 3) - 1) * var(--ut-spazio, 30px)) / var(--ut-per-vista, 3)) !important;
margin-right: 0 !important;
}
.novaride-car-slider.ut-slider-fermo .swiper-slide-duplicate,
.novaride-car-slider.ut-slider-fermo .car-slider-btn {
display: none !important;
}
/* 5.9 Card molto strette (griglia degli archivi a due colonne da mobile,
§10, richiesta del titolare 20 set 2026): sotto i 230 px il testo delle
righe si compatta già (5.7), ma il prezzo resta al corpo di sempre
(20/14 px, pulsante 34 px, tutti !important del tema): fra 180 e 230 px
di contenitore c'è ancora posto, sotto i 180 «€000/mese» supera lo
spazio che il pulsante lascia libero e il testo finisce sotto il
pulsante (misurato: 22 px di troppo a 118 px, il caso più stretto della
griglia a due colonne, 360 px di schermo). Prezzo e pulsante si
stringono insieme, restano sulla stessa riga e la quota non cambia
(il prezzo sta comunque sempre in fondo, margin-top:auto su §5.5). */
@container (max-width: 180px) {
.ut-card .perfect-fleet-footer {
gap: 6px;
}
.ut-card .perfect-fleet-pricing h2 {
font-size: 16px !important;
}
.ut-card .perfect-fleet-pricing h2 span {
font-size: 11px !important;
}
.ut-card .perfect-fleet-btn .section-icon-btn {
width: 26px;
height: 26px;
}
.ut-card .perfect-fleet-btn .section-icon-btn img {
max-width: 8px;
}
}
/* ==========================================================================
6. Filtro Marca e barra laterale degli archivi (§5) U1b
La barra è un solo aside.widget (rosato) con dentro tre blocchi separati
da : ordinamento (.uniteam-sort), prezzo (.uniteam-pf, stili in linea
del modello), marche (form.ut-marche di R1). Diventano tre riquadri
bianchi uguali, con lo stesso titolo. Sotto i 992 px ux.js li mette dietro
il pulsante «Filtra e ordina» (regole in fondo). Il kit impone (0,1,1) su
button e input: qui tutto sta sotto .page-fleets, (0,3,0) o più.
========================================================================== */
/* 6.1 Contenitore: niente , spazi regolari. La barra è sticky (top
20 px, dal tema) ma più alta dello schermo (1097 px a 1440×900): con quel
top le ultime marche restano irraggiungibili finché non finisce la griglia.
Niente tetto d'altezza né scorrimento interno (tagliavano il riquadro Marca
a metà di una riga di pillole, anche sulle pagine con poche card): dal
giro 3 la barra alta scorre con la pagina nei due versi (§6.1 bis, modulo
barra-sticky di ux.js). Senza JS resta il top 20 px del tema. */
.page-fleets .fleets-sidebar {
top: var(--ut-barra-top, 20px);
border-radius: var(--ut-r-lg);
}
/* 6.1 bis Barra sticky sotto l'header fisso (giro 3). Col top negativo la
parte alta della barra (ordinamento, titolo del prezzo, maniglie) restava
per sempre sopra lo schermo e sotto l'header da 72 px (1440×900 e
1280×720). Ora la barra alta si muove con la pagina in tutte e due le
direzioni e si ferma ai due capi: col fondo a 20 px dal bordo scendendo,
con la cima 20 px sotto l'header risalendo (basta risalire un poco per
ritrovare «Ordina per»). Tutto sticky nativo, niente posizioni scritte a
ogni fotogramma: top (capo basso, negativo) e bottom (capo alto) li scrive
ux.js (modulo barra-sticky) in --ut-barra-min e --ut-barra-max, e a ogni
cambio di verso un distanziale in cima alla colonna (--ut-barra-scarto)
rimette la posizione naturale della barra dove la barra è in quel momento.
Se la barra ci sta, resta ferma sotto l'header. Altezza dell'header da
--ut-header-altezza (menu.css), ripiego 72 px. La regola batte quella di
menu.css (0,3,1) sulle barre degli archivi; senza ux.js resta quella. */
@media (min-width: 992px) {
html body .page-fleets .fleets-sidebar.fleets-sidebar.ut-barra-js {
top: var(--ut-barra-min, calc(var(--ut-header-altezza, 72px) + 20px));
bottom: var(--ut-barra-max, auto);
}
.page-fleets .ut-barra-colonna::before {
content: "";
display: block;
height: var(--ut-barra-scarto, 0px);
}
}
.page-fleets .fleets-sidebar aside.widget {
padding: 20px;
}
.page-fleets .fleets-sidebar .custom-html-widget {
display: flex;
flex-direction: column;
gap: 14px;
}
.page-fleets .fleets-sidebar .custom-html-widget > br {
display: none;
}
.page-fleets .fleets-sidebar .uniteam-sort,
.page-fleets .fleets-sidebar .uniteam-pf,
.page-fleets .fleets-sidebar form.ut-marche {
box-sizing: border-box;
display: block;
margin: 0;
padding: 18px;
border: 1px solid var(--ut-line);
border-radius: var(--ut-r-md);
background: #fff;
box-shadow: none;
font-family: var(--ut-font-body);
}
/* un titolo solo per i tre riquadri */
.page-fleets .fleets-sidebar .uniteam-sort .uniteam-sort__caption,
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__title,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__titolo {
margin: 0;
font-family: var(--ut-font-head);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.005em;
text-transform: none;
color: var(--ut-ink);
white-space: nowrap;
}
/* 6.2 Ordinamento: didascalia su una riga, select a tutta larghezza */
.page-fleets .fleets-sidebar .uniteam-sort .uniteam-sort__form {
margin: 0;
}
.page-fleets .fleets-sidebar .uniteam-sort .uniteam-sort__label {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
margin: 0;
}
.page-fleets .fleets-sidebar .uniteam-sort select.uniteam-sort__select {
box-sizing: border-box;
width: 100%;
min-height: 46px;
margin: 0;
padding: 0 40px 0 14px;
border: 1px solid var(--ut-line);
border-radius: var(--ut-r-sm);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23040401' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
font-family: var(--ut-font-body);
font-size: 15px;
font-weight: 600;
color: var(--ut-ink);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.page-fleets .fleets-sidebar .uniteam-sort select.uniteam-sort__select:hover {
border-color: var(--ut-navy);
}
.page-fleets .fleets-sidebar .uniteam-sort select.uniteam-sort__select:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 2px;
border-color: var(--ut-navy);
}
/* 6.3 Prezzo: font del sito, «Applica» a misura, «Azzera» */
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__head {
align-items: baseline;
margin: 0 0 12px;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__hint {
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
color: var(--ut-muted);
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__values {
gap: 6px;
margin: 0 0 8px;
font-size: 14px;
color: var(--ut-muted);
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__values strong {
font-size: 16px;
font-weight: 700;
color: var(--ut-ink);
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__sep {
color: var(--ut-muted);
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__inputs {
gap: 10px;
margin: 0 0 14px;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__inputs label {
gap: 6px;
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ut-muted);
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__inputs input {
box-sizing: border-box;
min-height: 42px;
margin: 0;
padding: 0 12px;
border: 1px solid var(--ut-line);
border-radius: var(--ut-r-sm);
background: #fff;
font-family: var(--ut-font-body);
font-size: 15px;
font-weight: 600;
color: var(--ut-ink);
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__inputs input {
-moz-appearance: textfield;
appearance: textfield;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__inputs input::-webkit-inner-spin-button,
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__inputs input::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__inputs input:focus {
outline: none;
border-color: var(--ut-navy);
box-shadow: var(--ut-focus);
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 14px;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__actions .uniteam-pf__apply,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__invia {
box-sizing: border-box;
display: inline-flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 44px;
margin: 0;
padding: 0 20px;
border: 0;
border-radius: var(--ut-r-pill);
background: var(--ut-navy);
color: #fff;
font-family: var(--ut-font-body);
font-size: 15px;
font-weight: 700;
font-style: normal;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
box-shadow: none;
cursor: pointer;
transition: background-color .2s ease;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__actions .uniteam-pf__apply:hover,
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__actions .uniteam-pf__apply:focus,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__invia:hover,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__invia:focus {
background: var(--ut-ink);
color: #fff;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__actions .uniteam-pf__apply:focus-visible,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__invia:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__reset,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__azzera {
flex: 0 0 auto;
padding: 4px 2px;
font-family: var(--ut-font-body);
font-size: 14px;
font-weight: 600;
color: var(--ut-accent-ink);
text-decoration: none;
white-space: nowrap;
border-radius: 4px;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__reset:hover,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__azzera:hover {
color: var(--ut-ink);
text-decoration: underline;
text-underline-offset: .25em;
}
.page-fleets .fleets-sidebar .uniteam-pf .uniteam-pf__reset:focus-visible,
.page-fleets .fleets-sidebar .ut-marche .ut-marche__azzera:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 2px;
}
/* 6.4 Marche: pillole che vanno a capo, stato scelto pieno */
.page-fleets .fleets-sidebar .ut-marche .ut-marche__testa {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 14px;
}
.page-fleets .fleets-sidebar .ut-marche .ut-marche__azzera[hidden] {
display: none;
}
.page-fleets aside.widget .ut-marche ul.ut-marche__elenco {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0 !important;
list-style: none !important;
}
.page-fleets aside.widget .ut-marche ul.ut-marche__elenco > li {
display: block;
margin: 0;
padding: 0;
font-weight: 400;
color: inherit;
}
.page-fleets .fleets-sidebar .ut-marche .ut-marca {
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
margin: 0;
padding: 6px 12px 6px 13px;
border: 1px solid var(--ut-line);
border-radius: var(--ut-r-pill);
background: #fff;
font-family: var(--ut-font-body);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
color: var(--ut-ink);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* la casella vera resta (tastiera, lettori di schermo), invisibile */
.page-fleets .fleets-sidebar .ut-marche .ut-marca input {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.page-fleets .fleets-sidebar .ut-marche .ut-marca__conta {
min-width: 1.3em;
font-size: 12px;
font-weight: 600;
color: var(--ut-muted);
text-align: center;
font-variant-numeric: tabular-nums;
}
.page-fleets .fleets-sidebar .ut-marche .ut-marca:hover {
border-color: var(--ut-navy);
}
.page-fleets .fleets-sidebar .ut-marche .ut-marca:has(input:checked) {
border-color: var(--ut-navy);
background: var(--ut-navy);
color: #fff;
}
.page-fleets .fleets-sidebar .ut-marche .ut-marca:has(input:checked) .ut-marca__conta {
color: rgba(255, 255, 255, .78);
}
/* spunta: sta sul nome, così si vede anche senza :has() */
.page-fleets .fleets-sidebar .ut-marche .ut-marca input:checked + .ut-marca__nome::before {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin: 0 6px 0 -1px;
vertical-align: -1px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5l2.6 2.6L10 3.2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5l2.6 2.6L10 3.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-fleets .fleets-sidebar .ut-marche .ut-marca:has(input:focus-visible) {
outline: 2px solid var(--ut-navy);
outline-offset: 2px;
}
/* «Mostra risultati»: serve solo senza JS (con JS il cambio naviga da sé) */
.page-fleets .fleets-sidebar .ut-marche .ut-marche__invia {
display: flex;
width: 100%;
margin-top: 16px;
}
.ut-js .page-fleets .fleets-sidebar .ut-marche .ut-marche__invia {
display: none;
}
/* durante il cambio di pagina */
.page-fleets .fleets-sidebar .ut-marche.ut-in-corso .ut-marche__elenco {
opacity: .6;
cursor: progress;
}
/* 6.5 Pulsante «Filtra e ordina» (lo crea ux.js, visibile sotto i 992 px) */
.page-fleets .fleets-sidebar .ut-filtri-apri {
display: none;
}
/* 6.6 Griglia vuota */
.page-fleets .ut-vuoto {
box-sizing: border-box;
margin: 0 0 30px;
padding: 56px 24px;
border-radius: var(--ut-r-lg);
background: var(--ut-cream);
text-align: center;
}
.page-fleets .ut-vuoto p {
max-width: 28ch;
margin: 0 auto 22px;
font-family: var(--ut-font-head);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
color: var(--ut-ink);
}
.page-fleets .ut-vuoto a {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 26px;
border-radius: var(--ut-r-pill);
background: var(--ut-azione);
color: #fff;
font-family: var(--ut-font-body);
font-size: 16px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background-color .2s ease;
}
.page-fleets .ut-vuoto a:hover {
background: var(--ut-azione-sopra);
color: #fff;
}
.page-fleets .ut-vuoto a:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
}
/* 6.7 Scroll infinito (giro 2): piede della griglia creato da ux.js al posto
della paginazione, che resta nell'HTML (senza JS e per i motori) ma si
nasconde. Stato in aria-live, barra dell'avanzamento, «Mostra altre auto»
come ripiego per chi non scorre o usa la tastiera, errore con «Riprova».
Altezza del piede costante fra riposo e caricamento: niente salti. */
.page-fleets .ut-pag-nascosta {
display: none !important;
}
.page-fleets .ut-altre {
box-sizing: border-box;
width: 100%;
margin: 6px 0 0;
padding: 0 12px;
}
.page-fleets .ut-altre .ut-altre__box {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 8px 0 12px;
text-align: center;
font-family: var(--ut-font-body);
}
.page-fleets .ut-altre p.ut-altre__stato {
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
color: var(--ut-muted);
}
.page-fleets .ut-altre .ut-altre__barra {
position: relative;
width: min(240px, 70%);
height: 4px;
overflow: hidden;
border-radius: var(--ut-r-pill);
background: var(--ut-line);
}
/* la quota la scrive ux.js in --ut-quota (da 0 a 1): si anima solo il
transform, mai la larghezza (niente ricalcolo del layout a ogni fotogramma) */
.page-fleets .ut-altre .ut-altre__riempi {
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--ut-accent);
transform: scaleX(var(--ut-quota, 0));
transform-origin: left center;
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.page-fleets .ut-altre button.ut-altre__piu,
.page-fleets .ut-altre button.ut-altre__riprova {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
margin: 2px 0 0;
padding: 0 30px;
border: 1px solid var(--ut-ink);
border-radius: var(--ut-r-pill);
background: #fff;
color: var(--ut-ink);
font-family: var(--ut-font-body);
font-size: 16px;
font-weight: 700;
font-style: normal;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
box-shadow: none;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.page-fleets .ut-altre button.ut-altre__piu[hidden] {
display: none;
}
.page-fleets .ut-altre button.ut-altre__piu:hover,
.page-fleets .ut-altre button.ut-altre__piu:focus,
.page-fleets .ut-altre button.ut-altre__riprova:hover,
.page-fleets .ut-altre button.ut-altre__riprova:focus {
border-color: var(--ut-ink);
background: var(--ut-ink);
color: #fff;
}
.page-fleets .ut-altre button.ut-altre__piu:focus:not(:focus-visible),
.page-fleets .ut-altre button.ut-altre__riprova:focus:not(:focus-visible) {
background: #fff;
color: var(--ut-ink);
}
.page-fleets .ut-altre button.ut-altre__piu:hover:focus:not(:focus-visible),
.page-fleets .ut-altre button.ut-altre__riprova:hover:focus:not(:focus-visible) {
background: var(--ut-ink);
color: #fff;
}
.page-fleets .ut-altre button.ut-altre__piu:focus-visible,
.page-fleets .ut-altre button.ut-altre__riprova:focus-visible,
.page-fleets .ut-altre a:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
}
/* in caricamento: stesso pulsante, un giro sobrio al posto della freccia */
.page-fleets .ut-altre .ut-altre__giro {
display: none;
box-sizing: border-box;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ut-giro .8s linear infinite;
}
.page-fleets .ut-altre--carica .ut-altre__giro {
display: inline-block;
}
.page-fleets .ut-altre--carica button.ut-altre__piu {
cursor: progress;
}
@keyframes ut-giro {
to { transform: rotate(360deg); }
}
/* errore: messaggio, «Riprova» e il link vero alla pagina successiva */
.page-fleets .ut-altre .ut-altre__errore {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.page-fleets .ut-altre .ut-altre__errore[hidden] {
display: none;
}
.page-fleets .ut-altre .ut-altre__errore p {
margin: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: var(--ut-error);
}
.page-fleets .ut-altre .ut-altre__azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 20px;
}
.page-fleets .ut-altre a.ut-altre__vai,
.page-fleets .ut-altre a.ut-altre__inizio {
font-size: 15px;
font-weight: 600;
color: var(--ut-navy);
text-decoration: underline;
text-underline-offset: 3px;
}
.page-fleets .ut-altre a.ut-altre__vai:hover,
.page-fleets .ut-altre a.ut-altre__inizio:hover {
color: var(--ut-accent-ink);
}
/* ==========================================================================
7. Galleria della scheda (§7) U1b
Markup di R2 (.ut-galleria, niente Swiper né Elementor). Senza JS il
nastro scorre in orizzontale con scroll-snap; frecce, contatore e schermo
intero compaiono con html.ut-js (sono sovrapposti: nessuno spostamento).
Riquadro 4:3 uguale per tutte, contain su bianco: le PNG hanno fondo
bianco pieno, le foto 16:9 e la verticale restano intere.
========================================================================== */
/* 7.1 Riquadro e nastro */
.ut-galleria {
position: relative;
width: 100%;
min-width: 0;
}
.ut-galleria .ut-galleria__vista {
position: relative;
box-sizing: border-box;
/* larghezza intera (giro 2): con la colonna a 836,66 px (1440) le foto
erano larghe 834,66 e lo scorrimento, che si ferma al pixel intero,
lasciava dalla terza foto in poi una colonna della foto prima. Dove
round() non c'è resta la larghezza piena di prima. */
width: round(down, 100%, 1px);
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--ut-line);
border-radius: var(--ut-r-lg);
background: #fff;
}
.ut-galleria ul.ut-galleria__nastro {
display: flex;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
outline: none;
}
.ut-galleria ul.ut-galleria__nastro::-webkit-scrollbar {
display: none;
}
.ut-galleria .ut-galleria__nastro.ut-trascina {
scroll-snap-type: none; /* durante il trascinamento col mouse */
cursor: grabbing;
}
.ut-galleria .ut-galleria__nastro > li.ut-galleria__foto {
display: flex;
flex: 0 0 100%;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.ut-galleria .ut-galleria__nastro > li.ut-galleria__foto::before,
.ut-galleria .ut-galleria__miniature > li::before {
content: none;
display: none;
}
.ut-galleria .ut-galleria__foto img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
object-fit: contain;
background: #fff;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
}
/* fuoco sul nastro (frecce della tastiera): il bordo del riquadro */
.ut-galleria .ut-galleria__vista:has(.ut-galleria__nastro:focus-visible) {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
}
/* 7.2 Comandi sovrapposti: frecce, contatore, schermo intero */
.ut-galleria .ut-galleria__vista .ut-galleria__freccia,
.ut-galleria .ut-galleria__vista .ut-galleria__grande {
position: absolute;
z-index: 2;
box-sizing: border-box;
display: none;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
font-size: 0;
line-height: 0;
text-transform: none;
cursor: pointer;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.ut-js .ut-galleria .ut-galleria__vista .ut-galleria__freccia,
.ut-js .ut-galleria .ut-galleria__vista .ut-galleria__grande {
display: flex;
}
.ut-galleria .ut-galleria__vista .ut-galleria__freccia {
top: 50%;
width: 48px;
height: 48px;
margin-top: -24px;
background: var(--ut-azione);
color: #fff;
box-shadow: 0 4px 14px rgba(10, 20, 42, .18);
}
.ut-galleria .ut-galleria__vista .ut-galleria__freccia--prec {
left: 16px;
}
.ut-galleria .ut-galleria__vista .ut-galleria__freccia--succ {
right: 16px;
}
.ut-galleria .ut-galleria__vista .ut-galleria__freccia:hover,
.ut-galleria .ut-galleria__vista .ut-galleria__freccia:focus {
background: var(--ut-azione-sopra);
color: #fff;
}
.ut-galleria .ut-galleria__vista .ut-galleria__grande {
top: 16px;
right: 16px;
width: 44px;
height: 44px;
border: 1px solid var(--ut-line);
background: rgba(255, 255, 255, .94);
color: var(--ut-ink);
box-shadow: 0 2px 10px rgba(10, 20, 42, .1);
}
.ut-galleria .ut-galleria__vista .ut-galleria__grande:hover,
.ut-galleria .ut-galleria__vista .ut-galleria__grande:focus {
background: var(--ut-ink);
color: #fff;
}
.ut-galleria .ut-galleria__vista .ut-galleria__freccia:focus-visible,
.ut-galleria .ut-galleria__vista .ut-galleria__grande:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 3px;
}
.ut-galleria .ut-galleria__vista button svg {
display: block;
width: 22px;
height: 22px;
pointer-events: none;
}
.ut-galleria .ut-galleria__vista .ut-galleria__grande svg {
width: 20px;
height: 20px;
}
.ut-galleria .ut-galleria__contatore {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 2;
display: none;
padding: 7px 12px;
border-radius: var(--ut-r-pill);
background: rgba(4, 10, 37, .74);
color: #fff;
font-family: var(--ut-font-body);
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
.ut-js .ut-galleria .ut-galleria__contatore {
display: block;
}
/* 7.3 Miniature: sei posti per riga, sincronizzate da ux.js */
.ut-galleria ol.ut-galleria__miniature {
display: flex;
gap: 10px;
margin: 12px 0 0;
padding: 3px;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.ut-galleria ol.ut-galleria__miniature::-webkit-scrollbar {
display: none;
}
.ut-galleria ol.ut-galleria__miniature > li {
flex: 0 0 calc((100% - 50px) / 6);
min-width: 64px;
margin: 0;
padding: 0;
}
.ut-galleria .ut-galleria__miniature button.ut-galleria__mini {
box-sizing: border-box;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--ut-line);
border-radius: var(--ut-r-sm);
background: #fff;
box-shadow: none;
font-size: 0;
line-height: 0;
opacity: .72;
cursor: pointer;
transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ut-galleria .ut-galleria__miniature button.ut-galleria__mini:hover,
.ut-galleria .ut-galleria__miniature button.ut-galleria__mini:focus {
background: #fff;
opacity: 1;
}
.ut-galleria .ut-galleria__miniature button.ut-galleria__mini[aria-current="true"] {
border-color: var(--ut-accent);
box-shadow: inset 0 0 0 1px var(--ut-accent);
opacity: 1;
}
.ut-galleria .ut-galleria__miniature button.ut-galleria__mini:focus-visible {
outline: 2px solid var(--ut-navy);
outline-offset: 2px;
}
.ut-galleria .ut-galleria__mini img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
border: 0;
border-radius: 0;
object-fit: cover;
pointer-events: none;
}
/* 7.4 Schermo intero: