/* =====================================================================
AutoMoto Rozzano — foglio di stile condiviso
Ricavato dal progetto Figma "AutoMoto-Rozzano-L1" (cartella _tema)
Larghezza di riferimento desktop: 1440px (contenitore) / 1539px (tela)
Larghezza di riferimento mobile: 390px
===================================================================== */
/* ---------- Font (in locale, nessuna chiamata a servizi esterni) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin-ext.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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin.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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-ext.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; }
/* ---------- Variabili ---------- */
:root {
--arancione: #f07024;
--arancione-ombra: rgba(240, 112, 36, 0.35);
--arancione-chiaro: #fff3eb;
--grigio: #111111; /* sfondi scuri */
--grigio-scheda: #1a1a1a;
--testo: #1e1e1e;
--testo-medio: #3a3a3a;
--testo-grigio: #646464;
--grigio-medio: #6b6b6b; /* "color-grigio-chiaro" in Figma */
--grigio-tenue: #9a9a9a;
--grigio-chiaro: #f8f8f8; /* sfondi chiari */
--grigio-superficie: #fafafa;
--bianco: #ffffff;
--bordo: rgba(0, 0, 0, 0.06);
--bordo-forte: rgba(0, 0, 0, 0.08);
--font-titoli: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
--font-testo: 'Inter', system-ui, -apple-system, sans-serif;
--raggio: 16px;
--raggio-piccolo: 12px;
--contenitore: 1440px;
--gutter: 60px;
}
/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-testo);
font-size: 14px;
line-height: 1.5;
color: var(--testo);
background: var(--bianco);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
address { font-style: normal; }
ul { padding: 0; list-style: none; }
input, select, textarea { font: inherit; }
/* ---------- Tipografia ---------- */
.h1 {
font-family: var(--font-titoli);
font-weight: 800;
font-size: 68px;
line-height: 1;
letter-spacing: -0.03em;
color: var(--grigio);
}
.h1--md { font-size: 58px; line-height: 1.1; letter-spacing: -0.02em; }
.h2 {
font-family: var(--font-titoli);
font-weight: 800;
font-size: 44px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--testo);
}
.h2--sm { font-size: 40px; }
.h3 {
font-family: var(--font-titoli);
font-weight: 800;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.h4 {
font-family: var(--font-titoli);
font-weight: 700;
font-size: 20px;
line-height: 1.25;
}
.testo { font-size: 18px; line-height: 1.65; color: var(--testo-grigio); }
.testo-md { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--grigio-medio); }
.accento { color: var(--arancione); }
.chiaro { color: var(--bianco); }
/* Etichetta in maiuscoletto sopra i titoli ("I nostri servizi", ...) */
.tag {
display: block;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--arancione);
}
.tag + .h2, .tag + .h2--sm { margin-top: 12px; }
/* Etichetta piccola ("Centro autorizzato") */
.tag-sm {
font-size: 11px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.03em;
}
/* Pillola arancione trasparente */
.pill {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 999px;
background: rgba(240, 112, 36, 0.15);
border: 1px solid rgba(240, 112, 36, 0.6);
color: var(--arancione);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
white-space: nowrap;
}
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--contenitore);
margin-inline: auto;
}
.section { padding: 80px var(--gutter); }
.section--dark { background: var(--grigio); color: var(--bianco); }
.section--dark .h2 { color: var(--bianco); }
.section--light { background: var(--grigio-chiaro); }
.section--white { background: var(--bianco); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.section-head .h2 { max-width: 640px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ---------- Pulsanti ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 18px;
border-radius: var(--raggio);
background: var(--arancione);
color: var(--bianco);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
white-space: nowrap;
transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: #d9611a; }
.btn--glow {
padding: 16px 28px;
font-size: 15px;
font-weight: 700;
box-shadow: 0 8px 24px var(--arancione-ombra);
}
.btn--glow:hover { transform: translateY(-1px); box-shadow: 0 10px 28px var(--arancione-ombra); }
.btn--outline {
padding: 18px 30px;
background: transparent;
border: 2px solid var(--grigio-medio);
color: var(--grigio-medio);
}
.btn--outline:hover { background: rgba(0,0,0,0.04); }
.btn--outline-light {
padding: 16px 28px;
background: transparent;
border: 2px solid rgba(255,255,255,0.25);
color: var(--bianco);
font-weight: 700;
font-size: 15px;
}
.btn--outline-light:hover { background: rgba(255,255,255,0.06); }
.btn--block { width: 100%; }
.btn .ico { width: 17px; height: 17px; flex: 0 0 auto; }
/* ---------- Intestazione ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
height: 120px;
background: var(--bianco);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.site-header .container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 40px;
}
.site-header .logo img { height: 66px; width: 198px; object-fit: contain; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
display: block;
padding: 8px 16px;
border-radius: var(--raggio-piccolo);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: var(--testo);
transition: background .2s;
}
.nav a:hover { background: var(--grigio-chiaro); }
.nav a.is-active, .nav a[aria-current="page"] { color: var(--arancione); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-tel {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: var(--raggio-piccolo);
color: var(--arancione); font-weight: 600; font-size: 14px;
}
.header-tel .icon { width: 15px; height: 15px; }
.nav-toggle { display: none; padding: 8px; border-radius: var(--raggio-piccolo); color: var(--grigio); }
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon--chiudi, .menu-open .nav-toggle .icon--menu { display: none; }
.menu-open .nav-toggle .icon--chiudi { display: block; }
/* ---------- Hero ---------- */
.hero { background: var(--grigio-chiaro); }
.hero .container {
display: flex;
align-items: center;
min-height: 560px;
padding-left: 40px;
}
.hero__testo { flex: 0 0 580px; display: flex; flex-direction: column; gap: 20px; padding-right: 40px; }
.hero__testo .testo { max-width: 420px; }
.hero__cta { display: flex; gap: 20px; flex-wrap: wrap; }
.hero__img { flex: 1 1 0; align-self: stretch; padding: 60px; }
.hero__img img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; border-radius: var(--raggio); }
.hero--wide .hero__testo { flex: 1 1 0; }
.hero--wide .hero__testo .testo { max-width: 710px; }
.slice { height: 4px; width: 367px; max-width: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--arancione), rgba(240,112,36,0)); }
/* Briciole di pane (pagine interne) */
.breadcrumb {
display: flex; align-items: center; gap: 4px;
padding-bottom: 32px;
font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
color: var(--grigio-tenue);
}
.breadcrumb .icon { width: 13px; height: 13px; }
.breadcrumb a:hover { color: var(--arancione); }
.breadcrumb .is-current { color: var(--arancione); }
/* ---------- Schede servizio (sfondo scuro, foto in trasparenza) ---------- */
.card-servizio {
position: relative;
display: flex; flex-direction: column;
height: 432px; padding: 28px;
border-radius: var(--raggio);
background: var(--grigio-scheda);
overflow: hidden;
color: var(--bianco);
}
.card-servizio__img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; opacity: .5;
}
.card-servizio::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,.8) 40%, rgba(0,0,0,.15) 100%);
}
.card-servizio > * { position: relative; z-index: 1; }
.card-servizio > .card-servizio__img { position: absolute; z-index: 0; transition: transform .5s, opacity .3s; }
.card-servizio::after { z-index: 0; }
.card-servizio:hover > .card-servizio__img { transform: scale(1.04); opacity: .6; }
.card-servizio__top { display: flex; align-items: center; justify-content: space-between; }
.card-servizio__num { font-family: var(--font-titoli); font-weight: 700; font-size: 20px; color: var(--arancione); }
.card-servizio__body { margin-top: auto; }
.card-servizio__body .h3 { margin-top: 4px; color: var(--bianco); }
.card-servizio__body p { padding: 12px 0 24px; font-size: 14px; line-height: 1.6; color: rgba(248,248,248,.7); }
/* ---------- Schede bianche con icona ---------- */
.card {
background: var(--bianco);
border-radius: var(--raggio);
padding: 28px;
box-shadow: 0 1px 1.5px rgba(0,0,0,.05);
}
.card--bordo { border: 1px solid var(--bordo); }
.card__icon {
display: flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: var(--raggio);
background: var(--arancione-chiaro); color: var(--arancione);
}
.card__icon .icon { width: 28px; height: 28px; stroke-width: 1.75; }
.card .h4 { margin-top: 20px; }
.card .h4 + p { margin-top: 8px; }
.card p { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--grigio-medio); }
/* Icona tonda arancione per elenchi */
.list-check { display: flex; flex-direction: column; gap: 14px; }
.list-check li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--testo); }
.list-check li::before {
content: ""; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
background: var(--arancione-chiaro) url("data:image/svg+xml;utf8,") center / 14px no-repeat;
}
/* Riquadro numeri (15+, 3k+, ...) */
.numeri { display: flex; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.numeri > div { flex: 1 1 0; padding: 28px 12px; text-align: center; border-right: 1px solid var(--bordo); }
.numeri > div:nth-child(even) { background: var(--grigio-superficie); }
.numeri > div:last-child { border-right: 0; }
.numeri > div { display: flex; flex-direction: column-reverse; }
.numeri dd { display: block; font-family: var(--font-titoli); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--arancione); }
.numeri dt { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--grigio-medio); }
/* ---------- Chi siamo ---------- */
.chi-siamo { display: flex; align-items: flex-start; gap: 80px; }
.chi-siamo__media { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; }
.chi-siamo__foto { border-radius: var(--raggio); overflow: hidden; background: #f0f0f0; }
.chi-siamo__foto img { width: 100%; height: 468px; object-fit: cover; }
.chi-siamo__testo { flex: 0 1 624px; }
.chi-siamo__testo .h2 { margin-top: 12px; }
@media (max-width: 1100px) { .chi-siamo { gap: 40px; } }
@media (max-width: 720px) {
.chi-siamo { flex-direction: column; gap: 32px; }
.chi-siamo__testo { flex: 1 1 auto; order: -1; }
.chi-siamo__foto img { height: 300px; }
}
/* ---------- Modulo prenotazione (sfondo scuro) ---------- */
.prenota .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.prenota__testo { flex: 0 1 648px; }
.prenota__testo .h4 { margin-top: 24px; color: var(--grigio-chiaro); }
.prenota__testo .testo { padding: 12px 0; color: var(--grigio-chiaro); }
.form-card {
flex: 0 1 648px;
padding: 33px;
border-radius: var(--raggio);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
}
.form-card .field { display: flex; flex-direction: column; }
.form-card .field + .field, .form-card .row + .field, .form-card .field + .row { margin-top: 16px; }
.form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card label { padding-bottom: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); }
.form-card .input {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
height: 48.5px; padding: 13px 17px;
border-radius: var(--raggio);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.5); font-size: 14px; font-weight: 500;
}
.form-card .input input, .form-card .input select {
flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0;
color: var(--bianco); font-size: 14px; font-weight: 500;
appearance: none; -webkit-appearance: none;
}
.form-card .input input::placeholder { color: rgba(255,255,255,.5); }
.form-card .input select { color: rgba(255,255,255,.5); }
.form-card .input select option { color: var(--testo); }
.form-card .input .icon { width: 17px; height: 17px; flex: 0 0 auto; color: rgba(255,255,255,.5); pointer-events: none; }
.form-card .input--icon-left { padding-left: 42px; }
.form-card .input--icon-left > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; }
.form-card .btn { margin-top: 24px; }
.form-card .nota { padding-top: 16px; text-align: center; font-size: 14px; font-weight: 500; color: var(--arancione); }
.form-card input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; }
/* ---------- Recensioni ---------- */
.rating-google {
display: flex; align-items: center; gap: 12px;
padding: 13px 21px; border-radius: var(--raggio);
background: var(--grigio-chiaro); border: 1px solid var(--bordo);
}
.rating-google { transition: box-shadow .2s; }
.rating-google:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.rating-google__logo { width: 20px; height: 20px; }
.rating-google strong { font-family: var(--font-titoli); font-weight: 800; font-size: 20px; line-height: 1; }
.rating-google .stelle { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
.rating-google small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--grigio-medio); }
.stelle .icon { width: 14px; height: 14px; color: var(--arancione); }
.stelle { display: flex; gap: 2px; }
.recensione {
display: flex; flex-direction: column; gap: 16px;
height: 226px; padding: 25px;
border-radius: var(--raggio);
background: var(--bianco); border: 1px solid rgba(0,0,0,.07);
box-shadow: 0 2px 4px rgba(0,0,0,.04);
}
.recensione p { flex: 1 1 auto; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--testo-medio); }
.recensione footer { display: flex; align-items: center; gap: 12px; padding-top: 9px; border-top: 1px solid var(--bordo); }
.avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: var(--arancione); color: var(--bianco);
font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.recensione b { display: block; font-weight: 600; font-size: 14px; }
.recensione small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--grigio-medio); }
/* ---------- Dove trovarci ---------- */
.dove { display: flex; gap: 20px; align-items: stretch; margin-top: 40px; }
.mappa { position: relative; flex: 1 1 0; min-height: 468px; border-radius: var(--raggio); overflow: hidden; background: #e8e8e8; }
.mappa > img, .mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.mappa__indirizzo {
position: absolute; left: 20px; bottom: 20px;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; border-radius: var(--raggio);
background: rgba(255,255,255,.95); box-shadow: 0 2px 12px rgba(0,0,0,.12);
font-size: 14px; font-weight: 600; color: var(--testo);
}
.mappa__indirizzo .icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--arancione); }
.dove__dati { flex: 0 0 432px; display: flex; flex-direction: column; gap: 16px; }
.orari { padding: 24px; }
.orari__titolo { display: flex; align-items: center; gap: 10px; font-family: var(--font-testo); font-size: 15px; font-weight: 700; }
.orari__titolo .icon { width: 18px; height: 18px; color: var(--arancione); }
.orari ul { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.orari li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.orari li span { font-weight: 500; color: var(--grigio-medio); }
.orari li b { font-weight: 600; color: var(--grigio); text-align: right; }
.orari li b.chiuso { color: var(--arancione); }
.contatti-list { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.contatto {
display: flex; align-items: center; gap: 12px;
padding: 15px 17px; border-radius: var(--raggio); border: 1px solid var(--bordo-forte);
transition: background .2s;
}
.contatto:hover { background: var(--grigio-chiaro); }
.contatto__ico { flex: 0 0 36px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--raggio-piccolo); }
.contatto__ico .icon { width: 16px; height: 16px; }
.contatto__ico--tel { background: #fff7f0; color: var(--arancione); }
.contatto__ico--wa { background: #f0fdf4; color: #16a34a; }
.contatto__ico--mail { background: #eff6ff; color: #1d4ed8; }
.contatto b { display: block; font-weight: 600; font-size: 14px; color: var(--grigio); }
.contatto span { display: block; font-size: 14px; font-weight: 500; color: var(--grigio-medio); }
/* ---------- Piè di pagina ---------- */
.site-footer { background: var(--grigio); color: var(--bianco); }
.site-footer .container { padding: 60px 40px; } /* stessi margini dell'intestazione: il logo del footer è in colonna con quello in alto */
.footer-grid { display: flex; gap: 40px; padding-bottom: 20px; }
.footer-brand { flex: 1 1 auto; }
.footer-brand img { height: 50px; width: 150px; object-fit: contain; object-position: left center; }
.footer-brand p { max-width: 300px; padding-top: 20px; font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.45); }
.social { display: flex; gap: 8px; padding-top: 20px; }
.social a {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: var(--raggio);
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
transition: background .2s;
}
.social a:hover { background: rgba(255,255,255,.12); }
.social .icon { width: 18px; height: 18px; color: rgba(255,255,255,.55); }
.footer-col { flex: 0 0 306px; }
.footer-col .tag { margin-bottom: 16px; }
.footer-col li a { transition: color .2s; }
.footer-col li { padding: 4px 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.footer-col li a:hover, .footer-bottom a:hover { color: var(--arancione); }
.footer-col li.muted { font-weight: 400; color: rgba(255,255,255,.5); }
.footer-col li.accento { color: var(--arancione); }
.footer-bottom {
display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
padding-top: 33px; border-top: 1px solid rgba(255,255,255,.07);
font-size: 14px; font-weight: 500; color: rgba(255,255,255,.3);
}
.footer-bottom small { font-size: 13px; font-weight: 400; }
/* ---------- Utilità ---------- */
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.pt-40 { padding-top: 40px; }
.text-right { text-align: right; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* =====================================================================
Adattamento tablet
===================================================================== */
@media (max-width: 1100px) {
:root { --gutter: 40px; }
.site-header .container { padding-inline: 20px; }
.header-tel { display: none; }
.nav-toggle { display: inline-flex; }
.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h1 { font-size: 56px; }
.hero__testo { flex: 0 0 50%; }
.hero__img { padding: 40px 40px 40px 0; }
.prenota .container { flex-direction: column; align-items: stretch; }
.prenota__testo, .form-card { flex: 1 1 auto; }
.dove { flex-direction: column; }
.dove__dati { flex: 1 1 auto; }
.footer-grid { flex-wrap: wrap; }
.footer-col { flex: 1 1 200px; }
}
/* Menu a comparsa: vedi "Menu a schermo intero" in fondo al file */
/* =====================================================================
Adattamento mobile (riferimento Figma: 390px)
===================================================================== */
@media (max-width: 720px) {
:root { --gutter: 30px; }
.site-footer .container { padding-inline: var(--gutter); }
.section { padding: 60px var(--gutter); }
.site-header { height: 70px; }
.site-header .logo img { height: 48px; width: 144px; }
.header-cta .btn { display: none; }
.h1, .h1--md { font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; }
.h2 { font-size: 36px; }
.h2--sm { font-size: 32px; }
.section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
.section-head .text-right { text-align: left; }
.hero .container { flex-direction: column; align-items: stretch; min-height: 0; padding: 40px 30px 30px; }
.hero__testo { flex: 1 1 auto; padding: 0; }
.hero__img { padding: 30px 0 0; }
.hero__img img { min-height: 220px; height: auto; aspect-ratio: 4 / 3; }
.hero__cta { flex-direction: column; align-items: flex-start; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.card-servizio { height: 380px; }
.numeri { flex-direction: column; }
.numeri > div { border-right: 0; border-bottom: 1px solid var(--bordo); }
.numeri > div:last-child { border-bottom: 0; }
.form-card { padding: 24px; }
.form-card .row { grid-template-columns: 1fr; }
.recensione { height: auto; }
.mappa { min-height: 380px; }
.footer-grid { flex-direction: column; gap: 32px; }
.footer-col { flex: 1 1 auto; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ---------- Revisioni: schede servizio orizzontali ---------- */
.rev-scheda { display: flex; align-items: flex-start; gap: 40px; }
.rev-scheda__ico {
flex: 0 0 60px; display: flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: var(--raggio);
background: var(--arancione-chiaro); color: var(--arancione);
}
.rev-scheda__ico .icon { width: 28px; height: 28px; stroke-width: 1.75; }
.rev-scheda .h4 { margin-top: 0; }
.rev-scheda__testo { flex: 1 1 auto; }
/* ---------- Revisioni: passi "Come funziona" ---------- */
.passi {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
padding-top: 56px;
margin: 0;
padding-left: 0;
list-style: none;
}
.passi__passo { display: flex; flex-direction: column; align-items: flex-start; }
.passi__num {
display: flex; align-items: center; justify-content: center;
width: 80px; height: 80px; margin-bottom: 24px;
border-radius: var(--raggio);
background: var(--arancione-chiaro);
border: 2px solid rgba(240, 112, 36, 0.7);
font-family: var(--font-titoli);
font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em;
color: var(--arancione);
}
.passi .h4 { margin-bottom: 8px; color: var(--grigio); }
.passi p { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--grigio-medio); }
/* ---------- Revisioni: domande frequenti ---------- */
.faq { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.faq__intro { flex: 0 0 360px; }
.faq__intro .h2 { margin-top: 16px; }
.faq__intro .testo { padding-top: 20px; }
.faq__lista { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.faq__item {
background: var(--bianco);
border: 1px solid var(--bordo);
border-radius: var(--raggio);
}
.faq__item[open] { border: 2px solid rgba(240, 112, 36, 0.5); }
.faq__item summary {
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
padding: 24px; cursor: pointer; list-style: none;
font-family: var(--font-titoli);
font-weight: 700; font-size: 20px; line-height: 1.25;
color: var(--grigio);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__ico {
flex: 0 0 28px;
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: #f0f0f0;
transition: background .2s, transform .2s;
}
.faq__ico .icon { width: 16px; height: 16px; color: var(--grigio-medio); }
.faq__item[open] .faq__ico { background: var(--arancione); transform: rotate(180deg); }
.faq__item[open] .faq__ico .icon { color: var(--bianco); }
.faq__domanda { font: inherit; color: inherit; margin: 0; }
.faq__risposta { padding: 0 24px 24px; font-size: 15px; line-height: 1.75; color: var(--grigio-medio); }
/* Adattamenti responsive delle sezioni Revisioni
(raccolti qui per non interferire con le media query condivise) */
@media (max-width: 1100px) {
.passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq__intro { flex: 0 0 300px; }
}
@media (max-width: 720px) {
.rev-scheda { gap: 20px; }
.rev-scheda__ico { flex: 0 0 48px; width: 48px; height: 48px; margin-top: 0; }
.passi { grid-template-columns: 1fr; padding-top: 40px; gap: 32px; }
.faq { flex-direction: column; gap: 32px; }
.faq__intro { flex: 1 1 auto; }
.faq__item summary { padding: 20px; font-size: 18px; }
.faq__risposta { padding: 0 20px 20px; }
}
/* ---------- Officina: Servizi e Sceglici (sezioni chiare contigue) ---------- */
/* Nel Figma le due sezioni condividono lo stesso fondo (#f8f8f8) e si leggono
come un unico blocco: elimino la spaziatura doppia tra di esse. */
.off-sceglici { padding-top: 0; }
.off-servizi .card, .off-sceglici .card { display: flex; flex-direction: column; }
.off-servizi .card .h4, .off-sceglici .card .h4 { color: var(--grigio); }
@media (max-width: 720px) {
.off-sceglici { padding-top: 40px; }
}
/* ---------- Noleggio: Esigenze ---------- */
.nol-head { text-align: center; }
.nol-head .h2 { margin-top: 16px; }
.nol-esigenze {
display: grid;
grid-template-columns: repeat(2, minmax(0, 432px));
justify-content: center;
gap: 20px;
padding-top: 56px;
}
.nol-esigenza {
position: relative;
display: flex;
flex-direction: column;
padding: 32px;
border-radius: var(--raggio);
background: var(--grigio-chiaro);
border: 1px solid var(--bordo);
overflow: hidden;
}
.nol-esigenza__ico {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; margin-bottom: 24px;
border-radius: var(--raggio);
background: var(--arancione-chiaro);
}
.nol-esigenza__ico .icon { width: 24px; height: 24px; color: var(--arancione); }
.nol-esigenza .h3 { color: var(--grigio); }
.nol-esigenza__sottotitolo {
padding: 4px 0 28px;
font-size: 18px; line-height: 1.65;
color: var(--grigio-medio);
}
.nol-esigenza__lista { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.nol-esigenza__lista li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 14px; font-weight: 500; line-height: 1.5;
color: var(--grigio-medio);
}
.nol-esigenza__check {
flex: 0 0 20px;
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px; margin-top: 2px;
border-radius: 50%;
background: var(--arancione-chiaro);
}
.nol-esigenza__check .icon { width: 11px; height: 11px; color: var(--arancione); }
/* Variante scura (Professionisti), con filetto arancione in alto */
.nol-esigenza--scura {
background: var(--grigio);
border-color: transparent;
color: var(--bianco);
}
.nol-esigenza--scura::before {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 4px; background: var(--arancione);
}
.nol-esigenza--scura .h3 { color: var(--bianco); }
.nol-esigenza--scura .nol-esigenza__ico { background: rgba(240, 112, 36, 0.15); }
.nol-esigenza--scura .nol-esigenza__sottotitolo { color: rgba(255, 255, 255, 0.7); }
.nol-esigenza--scura .nol-esigenza__lista li { color: rgba(248, 248, 248, 0.7); }
.nol-esigenza--scura .nol-esigenza__check { background: rgba(240, 112, 36, 0.2); }
/* ---------- Noleggio: Auto (listino modelli) ---------- */
.nol-nota-listino { max-width: 320px; }
.nol-auto {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
padding-top: 56px;
}
.nol-auto__scheda {
display: flex; flex-direction: column;
background: var(--bianco);
border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: var(--raggio);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.nol-auto__scheda--evidenza {
border-color: transparent;
box-shadow: 0 8px 32px rgba(240, 112, 36, 0.12);
}
.nol-auto__media { position: relative; background: #f0f0f0; }
.nol-auto__media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nol-auto__tag {
position: absolute; left: 12px; bottom: 12px;
padding: 3px 12px;
border-radius: var(--raggio-piccolo);
background: rgba(0, 0, 0, 0.55);
color: rgba(255, 255, 255, 0.85);
font-size: 13px; font-weight: 600; line-height: 1.5;
letter-spacing: 0.08em; text-transform: uppercase;
}
.nol-auto__tag--verde {
left: auto; right: 12px; bottom: auto; top: 12px;
background: rgba(22, 163, 74, 0.8);
}
.nol-auto__corpo { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; padding: 24px; }
.nol-auto__corpo .h4 { color: var(--grigio); }
.nol-auto__dati {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
border-radius: var(--raggio);
background: rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.nol-auto__dato {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 12px 8px;
background: var(--grigio-chiaro);
text-align: center;
}
.nol-auto__dato .icon { width: 14px; height: 14px; color: var(--arancione); }
.nol-auto__dato b { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--grigio); }
.nol-auto__dato span { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--grigio-medio); }
.nol-auto__riga {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
margin-top: auto;
}
.nol-auto__prezzo { display: flex; flex-direction: column; }
.nol-auto__da { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--grigio-medio); }
.nol-auto__prezzo strong {
font-family: var(--font-titoli);
font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em;
color: var(--arancione);
}
.nol-auto__periodo { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--grigio-medio); }
/* Adattamenti responsive delle sezioni Noleggio */
@media (max-width: 1100px) {
.nol-esigenze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nol-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.nol-head { text-align: left; }
.nol-esigenze { grid-template-columns: 1fr; padding-top: 40px; }
.nol-esigenza { padding: 24px; }
.nol-nota-listino { max-width: none; text-align: left; }
.nol-auto { grid-template-columns: 1fr; padding-top: 40px; }
.nol-auto__corpo { padding: 20px; gap: 16px; }
.nol-auto__dato { padding: 12px 6px; }
.nol-auto__riga { flex-direction: column; align-items: stretch; gap: 16px; }
.nol-auto__riga .btn { width: 100%; }
}
/* ---------- Pratiche: Servizi ---------- */
.pra-logo-partner {
flex: 0 0 auto;
width: 382px;
max-width: 100%;
height: auto;
object-fit: contain;
}
/* ---------- Pratiche: Documenti necessari ---------- */
/* Riquadro scuro "Non sei sicuro di cosa serve?" nella colonna introduttiva */
.pra-callout {
display: flex;
flex-direction: column;
gap: 16px;
padding: 21px;
border-radius: var(--raggio);
background: var(--grigio);
border: 1px solid var(--bordo);
}
.pra-callout .h4 { color: var(--grigio-chiaro); }
.faq__intro .pra-callout .testo { padding-top: 0; color: var(--grigio-chiaro); }
.pra-callout__tel {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
font-size: 14px;
font-weight: 700;
color: var(--arancione);
}
.pra-callout__tel .icon { width: 14px; height: 14px; flex: 0 0 auto; }
/* Contenuto della scheda aperta: elenco documenti + nota */
.pra-doc { padding: 4px 24px 24px; }
.pra-doc__lista { display: flex; flex-direction: column; gap: 10px; }
.pra-doc__lista li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: var(--grigio);
}
.pra-doc__check {
flex: 0 0 20px;
display: flex; align-items: center; justify-content: center;
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 50%;
background: #f0fdf4;
color: #16a34a;
}
.pra-doc__check .icon { width: 12px; height: 12px; }
.pra-nota {
margin-top: 16px;
padding: 13px 17px;
border-radius: var(--raggio);
background: #fff7f0;
border: 1px solid rgba(240, 112, 36, 0.15);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: #7a4a20;
}
.pra-nota b { color: var(--arancione); font-weight: 500; }
/* Avviso informativo in fondo all'elenco */
.pra-info {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 8px;
padding: 17px 25px;
border-radius: var(--raggio);
background: #eff6ff;
border: 1px solid rgba(29, 78, 216, 0.12);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: #1d4ed8;
}
.pra-info__ico {
flex: 0 0 20px;
display: flex; align-items: center; justify-content: center;
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 50%;
background: #dbeafe;
}
.pra-info__ico .icon { width: 14px; height: 14px; }
/* Adattamenti responsive delle sezioni Pratiche */
@media (max-width: 1100px) {
.pra-logo-partner { width: 260px; }
}
@media (max-width: 720px) {
.pra-logo-partner { width: 220px; }
.pra-doc { padding: 4px 20px 20px; }
.pra-info { padding: 16px 18px; }
}
/* ---------- Contatti: canali di contatto ---------- */
.con-canali {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.con-canale {
display: flex;
flex-direction: column;
gap: 20px;
padding: 29px;
border-radius: var(--raggio);
background: var(--grigio-chiaro);
border: 1px solid var(--bordo);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: box-shadow .2s, transform .2s;
}
.con-canale:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07); }
.con-canale__ico {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--raggio);
background: var(--bianco);
}
.con-canale__ico .icon { width: 20px; height: 20px; color: var(--arancione); }
.con-canale__ico--wa .icon { color: #16a34a; }
.con-canale__ico--mail .icon { color: #1d4ed8; }
.con-canale__email { overflow-wrap: anywhere; }
.con-canale__testo { display: block; }
.con-canale__tag { color: var(--grigio-medio); }
.con-canale .h4 { display: block; padding-top: 6px; color: var(--grigio); }
.con-canale .testo { display: block; padding-top: 5px; color: var(--grigio-medio); }
/* ---------- Contatti: Inviaci un messaggio ---------- */
.con-scrivici { display: flex; align-items: flex-start; gap: 40px; }
.con-scrivici__col { flex: 1 1 0; min-width: 0; }
.con-scrivici__media {
flex: 1 1 0;
min-width: 0;
border-radius: var(--raggio);
overflow: hidden;
background: #f0f0f0;
}
.con-scrivici__media { background: transparent; overflow: visible; }
/* Variante chiara del modulo: .form-card è pensata per fondo scuro */
.form-card--chiara {
flex: 1 1 auto;
margin-top: 32px;
padding: 0;
background: transparent;
border: 0;
}
.form-card--chiara label,
.form-card--chiara legend { color: var(--grigio-medio); }
.form-card--chiara .input {
height: 52.5px;
background: var(--bianco);
border: 1px solid var(--bordo-forte);
color: rgba(17, 17, 17, 0.5);
font-size: 15px;
}
.form-card--chiara .input input,
.form-card--chiara .input textarea { color: var(--grigio); font-size: 15px; font-weight: 400; }
.form-card--chiara .input input::placeholder,
.form-card--chiara .input textarea::placeholder { color: rgba(17, 17, 17, 0.5); }
/* Area di testo del messaggio */
.con-area { height: auto; align-items: stretch; padding: 15px 17px; }
.con-area textarea {
width: 100%;
min-height: 96px;
background: transparent;
border: 0;
outline: 0;
resize: vertical;
line-height: 1.6;
}
.con-nota { color: var(--grigio-medio); font-weight: 500; }
/* Scelta del servizio: gruppo di radio a forma di pulsante */
.con-scelta { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.con-scelta legend {
padding: 0 0 8px;
font-size: 14px;
font-weight: 500;
}
.con-scelta__opzioni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.con-scelta__radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.con-scelta__pulsante {
display: flex;
align-items: center;
justify-content: center;
min-height: 53px;
padding: 11px 13px;
border-radius: var(--raggio);
background: #f0f0f0;
border: 1px solid transparent;
color: var(--grigio-medio);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-align: center;
cursor: pointer;
transition: background .2s, color .2s;
}
.con-scelta__pulsante:hover { background: #e6e6e6; }
.con-scelta__radio:checked + .con-scelta__pulsante {
background: var(--arancione);
color: var(--grigio-chiaro);
font-size: 14px;
}
.con-scelta__radio:focus-visible + .con-scelta__pulsante { outline: 2px solid var(--arancione); outline-offset: 2px; }
/* Adattamenti responsive delle sezioni Contatti */
@media (max-width: 1100px) {
.con-canali { grid-template-columns: 1fr; }
.con-scrivici { flex-direction: column; }
.con-scrivici__col, .con-scrivici__media { flex: 1 1 auto; width: 100%; }
.con-scelta__opzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.con-canale { padding: 24px; }
.form-card--chiara { padding: 0; }
.con-scrivici__media img { min-height: 220px; }
.con-scelta__opzioni { grid-template-columns: 1fr; }
.con-scelta__pulsante { min-height: 48px; font-size: 14px; }
}
/* =====================================================================
Estensioni del sito (non presenti nel progetto grafico statico)
===================================================================== */
/* ---------- Icone SVG in linea ---------- */
.icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; }
.btn .ico { width: 17px; height: 17px; }
/* ---------- Accessibilità ---------- */
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 100;
padding: 10px 16px; border-radius: var(--raggio-piccolo);
background: var(--grigio); color: var(--bianco); font-weight: 600;
transition: top .2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--arancione); outline-offset: 3px; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--bianco); }
[id] { scroll-margin-top: 130px; }
@media (max-width: 720px) { [id] { scroll-margin-top: 80px; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
.footer-col .tag, .site-footer p.tag { margin-top: 0; }
.site-header .logo { display: block; }
/* ---------- Hero senza immagine (contatti, pagine legali, errori) ---------- */
.hero--solo-testo .container { min-height: 360px; padding-block: 60px; padding-right: 40px; }
.hero--solo-testo .hero__testo { flex: 1 1 auto; max-width: 820px; }
.hero__testo .tag + .h1 { margin-top: 12px; }
/* ---------- Moduli: esito, errori, consenso ---------- */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-esito {
margin-bottom: 20px; padding: 14px 16px; border-radius: var(--raggio);
font-size: 14px; font-weight: 600; line-height: 1.5;
}
.form-esito--ok { background: rgba(22, 163, 74, .14); border: 1px solid rgba(22, 163, 74, .5); color: #15803d; }
.form-esito--errore { background: rgba(220, 38, 38, .1); border: 1px solid rgba(220, 38, 38, .45); color: #b91c1c; }
.section--dark .form-esito--ok { color: #86efac; }
.section--dark .form-esito--errore { color: #fca5a5; }
.field__errore { padding-top: 6px; font-size: 13px; font-weight: 600; color: #dc2626; }
.section--dark .field__errore { color: #fca5a5; }
.form-card .input.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.form-card .input:focus-within { border-color: var(--arancione); box-shadow: 0 0 0 1px var(--arancione); }
.form-card .input select { cursor: pointer; }
.form-card .input select.is-selected, .form-card .input select:has(option:checked:not([value=""])) { color: var(--bianco); }
.form-card--chiara .input select.is-selected, .form-card--chiara .input select:has(option:checked:not([value=""])) { color: var(--grigio); }
.form-card--chiara .input .icon { color: var(--grigio-medio); }
.form-card--chiara .input textarea { font: inherit; }
.input__chevron { margin-left: auto; }
.form-card .field--check { margin-top: 18px; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.7); padding-bottom: 0 !important; }
.form-card--chiara .check { color: var(--grigio-medio); }
.check a { text-decoration: underline; color: inherit; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: transparent;
transition: background .2s, border-color .2s;
}
.form-card--chiara .check__box { border-color: rgba(0,0,0,.25); background: var(--bianco); }
.check__box .icon { width: 12px; height: 12px; }
.check input:checked + .check__box { background: var(--arancione); border-color: var(--arancione); color: var(--bianco); }
.check input:focus-visible + .check__box { outline: 2px solid var(--arancione); outline-offset: 2px; }
.check.is-invalid .check__box { border-color: #ef4444; }
.btn[disabled] { opacity: .65; cursor: progress; }
.prenota__contatti { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 16px; }
.prenota__contatti a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bianco); }
.prenota__contatti a:hover { color: var(--arancione); }
.prenota__contatti .icon { width: 18px; height: 18px; color: var(--arancione); }
.prenota__esterno { padding-top: 10px; text-align: center; font-size: 14px; }
.prenota__esterno a { display: inline-flex; align-items: center; gap: 6px; color: var(--bianco); text-decoration: underline; text-underline-offset: 3px; }
.prenota__esterno .icon { width: 14px; height: 14px; }
/* ---------- Mappa caricata su richiesta ---------- */
.mappa__attiva {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px; border-radius: var(--raggio);
background: var(--grigio); color: var(--bianco); font-size: 14px; font-weight: 600;
box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: background .2s;
}
.mappa__attiva:hover { background: var(--arancione); }
.mappa__attiva .icon { width: 16px; height: 16px; }
.mappa__indirizzo { z-index: 2; transition: box-shadow .2s; }
.mappa__indirizzo:hover { box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.mappa.is-attiva .mappa__attiva, .mappa.is-attiva > img { display: none; }
.mappa--alta { min-height: 420px; }
/* ---------- Recensioni: invito quando non ci sono testimonianze pubblicate ---------- */
.recensioni-invito {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: 28px; border-radius: var(--raggio); background: var(--grigio-chiaro); border: 1px solid var(--bordo);
}
.recensioni-invito .testo { max-width: 640px; font-size: 16px; }
.recensioni-invito .btn--outline { padding: 14px 24px; }
.recensioni-invito .btn:not(.btn--outline) { padding: 16px 24px; }
/* ---------- Testi lunghi (pagine legali) ---------- */
.prosa { max-width: 820px; font-size: 16px; line-height: 1.75; color: var(--testo-medio); }
.prosa h2 { margin: 36px 0 12px; font-family: var(--font-titoli); font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--grigio); }
.prosa h2:first-child { margin-top: 0; }
.prosa p + p, .prosa ul + p, .prosa p + ul { margin-top: 12px; }
.prosa ul { list-style: disc; padding-left: 22px; }
.prosa li + li { margin-top: 6px; }
.prosa a { color: var(--arancione); text-decoration: underline; text-underline-offset: 3px; }
.prosa__aggiornamento { margin-top: 36px !important; font-size: 14px; color: var(--grigio-tenue); }
/* ---------- Schede collegamento (404) ---------- */
.card--link { transition: box-shadow .2s, transform .2s; }
.card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.card--link .h4 { margin-top: 0; }
/* ---------- Barra azioni rapide (smartphone) ---------- */
.mobile-bar { display: none; }
@media (max-width: 720px) {
body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.mobile-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.97); box-shadow: 0 -4px 20px rgba(0,0,0,.08);
border-top: 1px solid var(--bordo);
backdrop-filter: blur(8px);
transition: transform .3s var(--ease-morbido, ease), opacity .3s;
}
.mobile-bar a {
display: flex; align-items: center; justify-content: center; gap: 8px;
height: 48px; border-radius: var(--raggio-piccolo);
background: var(--bianco); border: 1.5px solid var(--bordo-forte);
color: var(--grigio); font-size: 14px; font-weight: 600;
transition: background .2s, border-color .2s;
}
.mobile-bar a:active { background: var(--grigio-chiaro); }
.mobile-bar .icon { width: 18px; height: 18px; color: var(--arancione); }
.mobile-bar a[href^="https://wa.me"] .icon { color: #16a34a; }
.mobile-bar__cta { background: var(--arancione) !important; border-color: var(--arancione) !important; color: var(--bianco) !important; box-shadow: 0 6px 16px var(--arancione-ombra); }
.mobile-bar__cta .icon { color: var(--bianco) !important; }
.menu-aperto .mobile-bar { transform: translateY(110%); opacity: 0; pointer-events: none; }
.hero--solo-testo .container { min-height: 0; padding: 40px 30px; }
.hero__cta .btn { width: 100%; }
.recensioni-invito { padding: 22px; }
.recensioni-invito .hero__cta { width: 100%; }
.mappa__attiva { top: auto; bottom: 96px; }
.prosa { font-size: 15px; }
.check { font-size: 13px; }
}
/* Contatti e dove trovarci: su tablet la mappa non deve collassare */
@media (max-width: 1100px) {
.con-scrivici__media .mappa { min-height: 380px; }
}
/* Righe a due colonne nei moduli: i campi affiancati non devono avere margine superiore */
.form-card .row > .field + .field { margin-top: 0; }
.form-card .row + .row { margin-top: 16px; }
/* Pagine interne: la foto verticale del servizio non deve allungare troppo l'hero */
.hero--wide .hero__img img { max-height: 520px; }
@media (max-width: 720px) { .hero--wide .hero__img img { max-height: 320px; } }
/* Hero con foto di una persona (Pratiche auto): riquadro verticale 4:5, la persona si vede dalla testa al busto */
.hero--ritratto .hero__img { display: flex; justify-content: flex-end; align-items: center; }
.hero__ritratto { width: 384px; max-width: 100%; margin: 0; }
.hero--ritratto .hero__img img { width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: 4 / 5; object-position: center top; }
.hero__didascalia { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--arancione); }
.hero__didascalia-nome { font-family: var(--font-titoli); font-size: 20px; font-weight: 800; color: var(--grigio); }
.hero__didascalia-ruolo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--arancione); }
.hero__didascalia-frase { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--grigio-medio); }
@media (max-width: 1100px) { .hero__ritratto { width: 330px; } }
@media (max-width: 720px) {
.hero--ritratto .hero__img { justify-content: center; }
.hero__ritratto { width: 100%; max-width: 340px; }
}
/* Area di testo del messaggio: altezza libera anche nella variante chiara */
.form-card .input.con-area { height: auto; }
/* =====================================================================
Animazioni: apertura e comparsa allo scorrimento (sobrie, solo dissolvenze)
Attive solo con la classe .anim impostata nel
===================================================================== */
:root { --ease-morbido: cubic-bezier(.22, .61, .36, 1); }
@keyframes rivela-su { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes rivela-dissolvi { from { opacity: 0; } to { opacity: 1; } }
@keyframes rivela-foto { from { transform: scale(1.035); } to { transform: none; } }
@keyframes rivela-linea { from { transform: scaleX(0); } to { transform: none; } }
/* Apertura: intestazione e hero */
.anim:not(.anim-off) .site-header { animation: rivela-dissolvi .7s ease both; }
.anim:not(.anim-off) .hero__testo > * { animation: rivela-su .9s var(--ease-morbido) both; }
.anim:not(.anim-off) .hero__testo > :nth-child(1) { animation-delay: .10s; }
.anim:not(.anim-off) .hero__testo > :nth-child(2) { animation-delay: .22s; }
.anim:not(.anim-off) .hero__testo > :nth-child(3) { animation-delay: .34s; }
.anim:not(.anim-off) .hero__testo > :nth-child(4) { animation-delay: .46s; }
.anim:not(.anim-off) .hero__img { animation: rivela-dissolvi 1.1s ease .2s both; }
.anim:not(.anim-off) .hero__img img { animation: rivela-foto 1.8s var(--ease-morbido) .2s both; }
.anim:not(.anim-off) .hero .slice { transform-origin: left center; animation: rivela-linea 1s var(--ease-morbido) .7s both; }
/* Scorrimento: elementi singoli e gruppi con comparsa sfalsata */
.anim:not(.anim-off) [data-reveal]:not(.rivelato),
.anim:not(.anim-off) [data-reveal-group] > :not(.rivelato) {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity .8s var(--ease-morbido) var(--ritardo, 0s), transform .9s var(--ease-morbido) var(--ritardo, 0s);
}
.anim:not(.anim-off) [data-reveal].in-vista:not(.rivelato),
.anim:not(.anim-off) [data-reveal-group] > .in-vista:not(.rivelato) {
opacity: 1;
transform: none;
}
/* Intestazione: ombra più marcata quando la pagina scorre */
.site-header { transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, .07); }
@media (prefers-reduced-motion: reduce) {
.anim .site-header, .anim .hero__testo > *, .anim .hero__img, .anim .hero__img img, .anim .hero .slice { animation: none !important; }
.anim [data-reveal], .anim [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}
/* =====================================================================
Menu a schermo intero (tablet e smartphone)
===================================================================== */
:root { --altezza-header: 120px; }
.site-header { height: var(--altezza-header); }
.nav__extra { display: none; }
@media (max-width: 1100px) {
html.menu-aperto { overflow: hidden; }
.nav {
position: fixed; left: 0; right: 0; top: var(--altezza-header); bottom: 0; z-index: 49;
display: flex; flex-direction: column; align-items: stretch; gap: 0;
height: calc(100dvh - var(--altezza-header));
padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom));
overflow-y: auto; overscroll-behavior: contain;
background: var(--bianco);
border-top: 1px solid var(--bordo);
opacity: 0; visibility: hidden; transform: translateY(-10px);
transition: opacity .35s var(--ease-morbido, ease), transform .35s var(--ease-morbido, ease), visibility 0s linear .35s;
}
.menu-open .nav {
opacity: 1; visibility: visible; transform: none;
transition: opacity .35s var(--ease-morbido, ease), transform .35s var(--ease-morbido, ease), visibility 0s;
}
.nav > a {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 4px; border-radius: 0;
border-bottom: 1px solid var(--bordo-forte);
font-family: var(--font-titoli); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
color: var(--grigio);
}
.nav > a:hover { background: transparent; color: var(--arancione); }
.nav > a::after {
content: ""; flex: 0 0 22px; width: 22px; height: 22px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: .35; transition: opacity .2s, transform .2s;
}
.nav > a:hover::after, .nav > a[aria-current="page"]::after { opacity: 1; transform: translateX(3px); }
.nav > a[aria-current="page"] { color: var(--arancione); }
.nav__extra { display: flex; flex-direction: column; gap: 22px; margin-top: auto; padding-top: 32px; }
.nav__azioni { display: flex; flex-direction: column; gap: 12px; }
.nav__azioni-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nav .nav__azioni .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; border-radius: var(--raggio); line-height: 1.5;
}
.nav .nav__azioni .btn--glow { padding: 18px 24px; font-size: 16px; font-weight: 700; color: var(--bianco); background: var(--arancione); }
.nav .nav__azioni .btn--glow:hover { background: #d9611a; }
.nav .nav__info a { display: inline; padding: 0; border-radius: 0; font-size: 14px; }
.nav .nav__info a:hover { background: transparent; color: var(--arancione); }
.nav .btn--linea {
padding: 14px 16px; font-size: 15px; background: var(--bianco); color: var(--grigio);
border: 1.5px solid var(--bordo-forte); font-weight: 600;
}
.nav .btn--linea:hover { background: var(--grigio-chiaro); }
.btn--linea .ico { width: 18px; height: 18px; color: var(--arancione); }
.btn--linea.btn--wa .ico { color: #16a34a; }
.nav__info { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--grigio-medio); }
.nav__info a { color: var(--grigio); font-weight: 600; }
/* Comparsa sfalsata delle voci */
.nav > a, .nav__extra { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease-morbido, ease), transform .45s var(--ease-morbido, ease), color .2s; }
.menu-open .nav > a, .menu-open .nav__extra { opacity: 1; transform: none; }
.menu-open .nav > a:nth-child(1) { transition-delay: .05s; }
.menu-open .nav > a:nth-child(2) { transition-delay: .09s; }
.menu-open .nav > a:nth-child(3) { transition-delay: .13s; }
.menu-open .nav > a:nth-child(4) { transition-delay: .17s; }
.menu-open .nav > a:nth-child(5) { transition-delay: .21s; }
.menu-open .nav > a:nth-child(6) { transition-delay: .25s; }
.menu-open .nav__extra { transition-delay: .3s; }
.menu-open .nav > a:hover { transition-delay: 0s; }
}
@media (max-width: 720px) {
:root { --altezza-header: 70px; }
.nav { padding-inline: 24px; }
.nav > a { font-size: 24px; padding: 17px 2px; }
}
@media (max-width: 1100px) and (max-height: 640px) {
.nav > a { font-size: 20px; padding: 13px 2px; }
.nav__extra { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.nav, .nav > a, .nav__extra { transition: none !important; transform: none !important; }
}
/* =====================================================================
Schede con icona: animazione discreta al passaggio del mouse
L'icona si riempie di arancione con un piccolo movimento; la scheda si solleva appena
===================================================================== */
.card, .con-canale, .nol-esigenza, .contatto {
transition: transform .35s var(--ease-morbido), box-shadow .35s var(--ease-morbido), border-color .35s, background .2s;
}
.card__icon, .rev-scheda__ico, .nol-esigenza__ico, .con-canale__ico, .contatto__ico {
transition: background-color .35s var(--ease-morbido), color .35s var(--ease-morbido), transform .45s var(--ease-morbido), box-shadow .35s var(--ease-morbido);
}
.card__icon .icon, .rev-scheda__ico .icon, .nol-esigenza__ico .icon, .con-canale__ico .icon, .contatto__ico .icon {
transition: transform .5s var(--ease-morbido), color .35s;
}
@media (hover: hover) and (pointer: fine) {
.card:hover:not(.orari):not(.contatti-list), .nol-esigenza:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(17, 17, 17, .08);
}
.card--bordo:hover { border-color: rgba(240, 112, 36, .25); }
.card:hover .card__icon,
.card:hover .rev-scheda__ico,
.nol-esigenza:hover .nol-esigenza__ico,
.con-canale:hover .con-canale__ico {
background-color: var(--arancione);
color: var(--bianco);
box-shadow: 0 8px 18px var(--arancione-ombra);
transform: translateY(-2px);
}
.card:hover .card__icon .icon,
.card:hover .rev-scheda__ico .icon,
.nol-esigenza:hover .nol-esigenza__ico .icon,
.con-canale:hover .con-canale__ico .icon {
color: var(--bianco);
transform: scale(1.08) rotate(-6deg);
}
.nol-esigenza--scura:hover .nol-esigenza__ico { box-shadow: 0 8px 18px rgba(240, 112, 36, .45); }
.contatto:hover .contatto__ico { transform: scale(1.06); }
.contatto:hover .contatto__ico .icon { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
.card__icon .icon, .rev-scheda__ico .icon, .nol-esigenza__ico .icon, .con-canale__ico .icon, .contatto__ico .icon { transform: none !important; }
}
/* Icone dei contatti (telefono, WhatsApp, email): centratura esatta.
La regola del tema ".contatto span { display: block }" annullava il flex del contenitore icona */
.contatto .contatto__ico {
display: flex; align-items: center; justify-content: center;
flex: 0 0 40px; width: 40px; height: 40px; line-height: 0;
}
.contatto .contatto__ico .icon { width: 18px; height: 18px; margin: 0; }
.contatto > span:last-child { min-width: 0; }
.contatto b { overflow-wrap: anywhere; }
.contatto .contatto__ico--tel { color: var(--arancione); }
.contatto .contatto__ico--wa { color: #16a34a; }
.contatto .contatto__ico--mail { color: #1d4ed8; }
/* =====================================================================
Select dei moduli
- tutto il campo è cliccabile, freccia allineata, testo lungo con puntini
- stati: hover, focus (bordo e freccia arancioni), errore
- dove supportato (Chrome/Edge recenti) anche la tendina aperta è nello stile del sito
===================================================================== */
.form-card .input { transition: border-color .2s, box-shadow .2s, background-color .2s; }
.form-card .input:hover { border-color: rgba(255, 255, 255, .28); }
.form-card--chiara .input:hover { border-color: rgba(0, 0, 0, .18); }
.form-card .input--select { position: relative; padding: 0; cursor: pointer; }
.form-card .input--select select {
position: absolute; inset: 0;
width: 100%; height: 100%; margin: 0;
padding: 0 46px 0 17px;
border: 0; border-radius: inherit; background: transparent;
font-size: 14px; font-weight: 500; line-height: normal;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: pointer;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.form-card--chiara .input--select select { font-size: 15px; }
.form-card .input--select.input--icon-left select { padding-left: 42px; }
.form-card .input--select select::-ms-expand { display: none; }
.form-card .input--select select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--bianco); }
.form-card--chiara .input--select select:-moz-focusring { text-shadow: 0 0 0 var(--grigio); }
.form-card .input--select > .input__chevron,
.form-card .input--select.input--icon-left > .input__chevron {
position: absolute; left: auto; right: 16px; top: 50%;
width: 18px; height: 18px; margin: 0;
transform: translateY(-50%);
transition: transform .25s var(--ease-morbido, ease), color .2s;
}
.form-card .input--select:hover > .input__chevron { color: rgba(255, 255, 255, .8); }
.form-card--chiara .input--select:hover > .input__chevron { color: var(--grigio); }
.form-card .input--select:focus-within > .input__chevron { color: var(--arancione); }
.form-card .input--select > .icon:not(.input__chevron) { z-index: 1; }
.form-card .input--select:has(select:open) > .input__chevron { transform: translateY(-50%) rotate(180deg); }
/* Selettore di data nativo: icona coerente con le frecce delle select */
.form-card input[type="date"] { cursor: pointer; }
.form-card input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; transition: opacity .2s; }
.form-card .input:hover input[type="date"]::-webkit-calendar-picker-indicator { opacity: .9; }
/* Voci della tendina di sistema: leggibili sul fondo del modulo */
.form-card .input--select option { background: var(--grigio-scheda); color: var(--bianco); }
.form-card--chiara .input--select option { background: var(--bianco); color: var(--grigio); }
.form-card .input--select option[value=""] { color: var(--grigio-tenue); }
.form-card .input--select option:disabled { color: #6b6b6b; }
/* Tendina personalizzata (browser con appearance: base-select) */
@supports (appearance: base-select) {
.form-card .input--select select,
.form-card .input--select select::picker(select) { appearance: base-select; }
.form-card .input--select select { display: flex; align-items: center; }
.form-card .input--select select::picker-icon { display: none; }
.form-card .input--select select::picker(select) {
margin-block: 8px;
padding: 6px;
min-inline-size: anchor-size(inline);
max-block-size: min(320px, 50vh);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 14px;
background: var(--bianco);
box-shadow: 0 20px 44px rgba(17, 17, 17, .18), 0 2px 6px rgba(17, 17, 17, .06);
opacity: 0;
transform: translateY(-6px);
transition: opacity .2s var(--ease-morbido, ease), transform .2s var(--ease-morbido, ease), overlay .2s allow-discrete, display .2s allow-discrete;
}
.form-card .input--select select:open::picker(select) { opacity: 1; transform: none; }
@starting-style {
.form-card .input--select select:open::picker(select) { opacity: 0; transform: translateY(-6px); }
}
.form-card .input--select option {
display: flex; align-items: center; gap: 10px;
padding: 11px 12px;
border-radius: 10px;
background: transparent;
color: var(--testo);
font-size: 14px; font-weight: 500; line-height: 1.35;
cursor: pointer;
transition: background-color .15s, color .15s;
}
.form-card .input--select option:hover,
.form-card .input--select option:focus-visible { background: var(--arancione-chiaro); color: var(--arancione); outline: none; }
.form-card .input--select option:checked { color: var(--arancione); font-weight: 600; }
.form-card .input--select option::checkmark { order: 1; margin-left: auto; color: var(--arancione); font-weight: 700; }
.form-card .input--select option[value=""] { color: var(--grigio-tenue); }
.form-card .input--select option:disabled { display: none; }
}
/* Smartphone: testo a 16px nei campi per evitare lo zoom automatico di iOS */
@media (max-width: 720px) {
.form-card .input input,
.form-card .input select,
.form-card .input textarea { font-size: 16px !important; }
.form-card .input { height: 52px; }
.form-card .input.con-area { height: auto; }
}
/* ---------- Recensioni lette da Google ---------- */
.recensioni-griglia .recensione { height: auto; min-height: 226px; }
.recensione__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recensione__fonte { width: 18px; height: 18px; opacity: .9; }
.recensione p a.recensione__altro { color: var(--arancione); font-weight: 600; white-space: nowrap; }
.recensione p a.recensione__altro:hover { text-decoration: underline; }
.recensione b a:hover { color: var(--arancione); }
.stelle .stella--vuota { color: #e3e3e3; }
.recensioni-azioni { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 24px; }
.recensioni-fonte { margin-top: 14px; font-size: 13px; color: var(--grigio-tenue); }
.recensioni-azioni .btn--outline { padding: 14px 24px; }
.recensioni-azioni .btn:not(.btn--outline) { padding: 16px 24px; }
@media (max-width: 720px) { .recensioni-azioni .hero__cta { width: 100%; } }
/* ---------- Carosello recensioni: 3 per pagina, frecce e indicatori ---------- */
.carosello { position: relative; }
.carosello__traccia {
--per-pagina: 3;
--righe: 2;
--spazio: 20px;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(var(--righe), auto);
grid-auto-columns: calc((100% - (var(--per-pagina) - 1) * var(--spazio)) / var(--per-pagina));
gap: var(--spazio);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
/* spazio per ombra e sollevamento al passaggio senza tagli */
padding: 8px 4px 16px;
margin: -8px -4px -16px;
}
.carosello__traccia::-webkit-scrollbar { display: none; }
.carosello__traccia:focus-visible { outline: 2px solid var(--arancione); outline-offset: 4px; border-radius: var(--raggio); }
.carosello__elemento { scroll-snap-align: start; min-width: 0; }
.carosello .recensione { transition: transform .35s var(--ease-morbido), box-shadow .35s var(--ease-morbido); }
@media (hover: hover) and (pointer: fine) {
.carosello .recensione:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(17, 17, 17, .08); }
}
.carosello__controlli { display: flex; align-items: center; gap: 14px; }
.carosello__controlli[hidden] { display: none !important; }
.carosello__freccia {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 50%;
background: var(--bianco); color: var(--grigio);
border: 1.5px solid var(--bordo-forte);
box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-morbido), opacity .25s;
}
.carosello__freccia .icon { width: 20px; height: 20px; transition: transform .25s var(--ease-morbido); }
.carosello__freccia:hover:not(:disabled) { background: var(--arancione); border-color: var(--arancione); color: var(--bianco); }
.carosello__freccia[data-prec]:hover:not(:disabled) .icon { transform: translateX(-2px); }
.carosello__freccia[data-succ]:hover:not(:disabled) .icon { transform: translateX(2px); }
.carosello__freccia:active:not(:disabled) { transform: scale(.94); }
.carosello__freccia:disabled { opacity: .35; cursor: default; box-shadow: none; }
.carosello__punti { display: flex; align-items: center; gap: 8px; }
.carosello__punto {
width: 8px; height: 8px; padding: 0; border-radius: 999px;
background: #d9d9d9;
transition: width .35s var(--ease-morbido), background-color .25s;
}
.carosello__punto:hover { background: #bdbdbd; }
.carosello__punto[aria-current="true"] { width: 26px; background: var(--arancione); }
/* area di tocco più ampia senza cambiare l'aspetto */
.carosello__punto { position: relative; }
.carosello__punto::after { content: ""; position: absolute; inset: -10px -4px; }
@media (max-width: 1100px) {
.carosello__traccia { --per-pagina: 2; }
}
@media (max-width: 720px) {
.carosello__traccia { --per-pagina: 1; --righe: 1; grid-auto-columns: 86%; --spazio: 14px; }
.recensioni-azioni { flex-direction: column; align-items: stretch; }
.carosello__controlli { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.carosello__traccia { scroll-behavior: auto; }
}
.carosello.mt-20 { margin-top: 32px; }
.carosello__contatore { min-width: 64px; text-align: center; font-size: 14px; font-weight: 600; color: var(--grigio-medio); font-variant-numeric: tabular-nums; }
.carosello__contatore b { color: var(--arancione); font-weight: 700; }
/* ---------- Logo ---------- */
.logo { position: relative; display: block; }
.logo__home { display: block; -webkit-tap-highlight-color: transparent; }
.logo__home:focus:not(:focus-visible) { outline: none; }
/* touch: niente contorno arancione attorno al logo dopo un tocco (Safari lo mostra anche col focus da script) */
@media (hover: none) and (pointer: coarse) { .logo__home:focus { outline: none; } }
.logo--footer { display: inline-block; }
/* ---------- Noleggio: logo "Partner ufficiale di Zetarent" nella sezione veicoli ---------- */
.nol-partner { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.nol-partner__logo { width: 230px; height: auto; }
@media (max-width: 720px) {
.nol-partner { align-items: flex-start; }
.nol-partner__logo { width: 180px; }
}
/* ---------- Modulo: invito al portale quando si sceglie una revisione ---------- */
.prenota__portale {
display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px;
margin-top: 16px; padding: 16px 18px;
border-radius: var(--raggio);
background: rgba(240, 112, 36, .12); border: 1px solid rgba(240, 112, 36, .45);
color: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.5;
}
.prenota__portale[hidden] { display: none; }
.prenota__portale > .icon { width: 24px; height: 24px; color: var(--arancione); }
.prenota__portale b { color: var(--bianco); }
.prenota__portale .btn { grid-column: 1 / -1; justify-self: start; margin-top: 0 !important; }
/* ---------- Menu mobile: nessun contorno sulle voci dopo il tocco ---------- */
.nav > a:focus:not(:focus-visible) { outline: none; }
/* ---------- Logo Zetarent cliccabile ---------- */
.nol-partner__link { display: block; border-radius: var(--raggio-piccolo); transition: opacity .2s; }
.nol-partner__link:hover { opacity: .85; }
/* Campi del modulo raggruppati: nascosti quando si sceglie una revisione (prenotazione sul portale) */
.prenota__campi { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.prenota__campi[hidden] { display: none; }
/* ---------- Cloudflare Turnstile nei moduli ---------- */
.form-card .field--turnstile { margin-top: 16px; }
.turnstile { min-height: 65px; width: 100%; }
.turnstile iframe { max-width: 100%; }
/* Prenotazione: con noleggio o pratiche data e orario lasciano il posto alla richiesta scritta */
.prenota__gruppo { border: 0; margin: 0; padding: 0; min-width: 0; }
.prenota__gruppo[hidden] { display: none; }
.form-card .prenota__gruppo + .field { margin-top: 16px; }
.form-card .input textarea { color: var(--bianco); font-size: 14px; font-weight: 500; }
.form-card .input textarea::placeholder { color: rgba(255,255,255,.5); }
.prenota__gruppo:not([hidden]) .con-area { animation: gruppo-compare .35s ease both; }
@keyframes gruppo-compare { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .prenota__gruppo:not([hidden]) .con-area { animation: none; } }
/* ---------- Stato di apertura in tempo reale (orari, stile Google) ---------- */
.stato-apertura { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: 14px 0 0; font-size: 14px; line-height: 1.4; color: var(--grigio-medio); }
.stato-apertura b { font-weight: 700; }
.stato-apertura__punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.stato-apertura--aperto b, .stato-apertura--aperto .stato-apertura__punto { color: #188038; }
.stato-apertura--chiude-presto b, .stato-apertura--chiude-presto .stato-apertura__punto,
.stato-apertura--apre-presto b, .stato-apertura--apre-presto .stato-apertura__punto { color: #c26401; }
.stato-apertura--chiuso b, .stato-apertura--chiuso .stato-apertura__punto { color: #d93025; }
.stato-apertura--aperto .stato-apertura__punto { box-shadow: 0 0 0 0 rgba(24, 128, 56, .45); animation: stato-pulsa 2.4s ease-out infinite; }
@keyframes stato-pulsa { 0% { box-shadow: 0 0 0 0 rgba(24, 128, 56, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(24, 128, 56, 0); } }
@media (prefers-reduced-motion: reduce) { .stato-apertura__punto { animation: none !important; } }
/* nel piè di pagina scuro */
.stato-apertura--scuro { margin: 2px 0 0; color: rgba(255, 255, 255, .6); }
.stato-apertura--scuro.stato-apertura--aperto b, .stato-apertura--scuro.stato-apertura--aperto .stato-apertura__punto { color: #4ade80; }
.stato-apertura--scuro.stato-apertura--chiude-presto b, .stato-apertura--scuro.stato-apertura--chiude-presto .stato-apertura__punto,
.stato-apertura--scuro.stato-apertura--apre-presto b, .stato-apertura--scuro.stato-apertura--apre-presto .stato-apertura__punto { color: #fbbf24; }
.stato-apertura--scuro.stato-apertura--chiuso b, .stato-apertura--scuro.stato-apertura--chiuso .stato-apertura__punto { color: #f87171; }
.stato-apertura--scuro.stato-apertura--aperto .stato-apertura__punto { animation-name: stato-pulsa-scuro; }
@keyframes stato-pulsa-scuro { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
/* ---------- Accessibilità: riflusso a 320 px (zoom 400%) senza scorrimento orizzontale ----------
Interviene solo quando una parola o un pulsante non ci starebbero: alle larghezze normali l'aspetto non cambia */
.h1, .h2, .h3 { overflow-wrap: break-word; }
@media (max-width: 360px) {
.h1, .h1--md { hyphens: auto; -webkit-hyphens: auto; }
.btn--block { white-space: normal; text-align: center; }
}
/* l'avviso "si apre in una nuova scheda" non deve allargare la pagina (es. link dentro il carosello che scorre) */
.visually-hidden[data-nuova-scheda] { position: fixed; top: 0; left: 0; }
/* =====================================================================
Consenso cookie: banner, pannello preferenze, richiesta per la mappa
(componente nuovo con i colori, i caratteri e i bottoni già del sito)
===================================================================== */
.consenso {
position: fixed; z-index: 90; left: 24px; bottom: 24px;
width: min(460px, calc(100vw - 32px));
padding: 24px 24px 20px; border-radius: var(--raggio);
background: var(--bianco); color: var(--testo);
border: 1px solid var(--bordo-forte);
box-shadow: 0 24px 60px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .06);
font-family: var(--font-testo);
animation: consenso-entra .45s cubic-bezier(.2, .8, .2, 1) both;
}
.consenso[hidden], .consenso-pannello[hidden], .mappa-consenso[hidden] { display: none !important; }
@keyframes consenso-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.consenso__titolo { margin: 0 32px 8px 0; font-family: var(--font-titoli); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--grigio); }
.consenso__testo { margin: 0; font-size: 14px; line-height: 1.6; color: var(--testo-medio); }
.consenso__testo a { color: var(--arancione); text-decoration: underline; text-underline-offset: 2px; }
.consenso__chiudi {
position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--grigio-medio); cursor: pointer;
}
.consenso__chiudi:hover { background: var(--grigio-chiaro); color: var(--grigio); }
.consenso__chiudi .icon { width: 18px; height: 18px; }
.consenso__chiudi--statico { position: static; flex: none; }
.consenso__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.consenso__btn { width: 100%; font-weight: 600; }
.consenso__personalizza {
grid-column: 1 / -1; justify-self: center;
padding: 6px 10px; border: 0; background: transparent; cursor: pointer;
font: inherit; font-size: 14px; font-weight: 600; color: var(--grigio); text-decoration: underline; text-underline-offset: 3px;
}
.consenso__personalizza:hover { color: var(--arancione); }
.consenso__personalizza--forte { grid-column: auto; justify-self: stretch; border: 1px solid var(--bordo-forte); border-radius: var(--raggio); text-decoration: none; padding: 10px 18px; }
/* pannello preferenze */
.consenso-pannello, .mappa-consenso { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.consenso-pannello__sfondo { position: absolute; inset: 0; background: rgba(17, 17, 17, .55); backdrop-filter: blur(2px); }
.consenso-pannello__box, .mappa-consenso__box {
position: relative; width: min(620px, 100%); max-height: calc(100dvh - 32px);
display: flex; flex-direction: column;
background: var(--bianco); border-radius: var(--raggio); box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
animation: consenso-entra .35s cubic-bezier(.2, .8, .2, 1) both;
}
.mappa-consenso__box { width: min(480px, 100%); padding: 24px; }
.consenso-pannello__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 12px 24px; border-bottom: 1px solid var(--bordo); }
.consenso-pannello__testa .consenso__titolo { margin: 0; }
.consenso-pannello__corpo { padding: 16px 24px; overflow-y: auto; }
.consenso-pannello__piede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--bordo); }
.consenso-cat { padding: 16px 0; border-bottom: 1px solid var(--bordo); }
.consenso-cat:last-child { border-bottom: 0; padding-bottom: 4px; }
.consenso-cat__testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consenso-cat__titolo { font-weight: 700; font-size: 15px; color: var(--grigio); }
.consenso-cat__sempre { font-size: 13px; font-weight: 600; color: var(--grigio-medio); }
.consenso-cat__descr { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--testo-medio); }
.consenso-cat__servizi { margin: 6px 0 0; font-size: 13px; color: var(--grigio-medio); }
/* interruttore */
.consenso-interruttore { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.consenso-interruttore input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.consenso-interruttore__traccia { position: absolute; inset: 0; border-radius: 999px; background: #d9d9d9; transition: background .2s; }
.consenso-interruttore__traccia::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bianco); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.consenso-interruttore input:checked + .consenso-interruttore__traccia { background: var(--arancione); }
.consenso-interruttore input:checked + .consenso-interruttore__traccia::after { transform: translateX(20px); }
.consenso-interruttore input:focus-visible + .consenso-interruttore__traccia { outline: 2px solid var(--arancione); outline-offset: 3px; }
.consenso-aperto { overflow: hidden; }
/* telefono: il banner occupa la parte bassa, sopra la barra rapida */
@media (max-width: 1100px) {
.consenso { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; padding: 20px 18px 16px; }
}
@media (max-width: 560px) {
.consenso__titolo { font-size: 17px; }
.consenso__testo { font-size: 13.5px; }
.consenso-pannello { padding: 0; place-items: end stretch; }
.consenso-pannello__box { width: 100%; max-height: 92dvh; border-radius: var(--raggio) var(--raggio) 0 0; }
.consenso-pannello__piede { grid-template-columns: 1fr 1fr; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.consenso-pannello__piede .consenso__personalizza--forte { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
.consenso, .consenso-pannello__box, .mappa-consenso__box { animation: none; }
}
/* ---------- Tabelle nelle pagine legali (elenco cookie) ---------- */
.prosa h3 small { font-weight: 500; font-size: .8em; color: var(--grigio-medio); }
.prosa__tabella { overflow-x: auto; margin: 12px 0 28px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-piccolo); }
.prosa__tabella table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.prosa__tabella th, .prosa__tabella td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bordo); }
.prosa__tabella th { background: var(--grigio-chiaro); font-weight: 700; color: var(--grigio); white-space: nowrap; }
.prosa__tabella tr:last-child td { border-bottom: 0; }
/* ---------- Hero: logo del partner sotto le briciole di pane (Agenzia Italia sulle Pratiche auto) ---------- */
.hero__partner { margin: 0; }
.hero__partner img { display: block; height: 36px; width: auto; }
.hero__partner a { display: inline-block; border-radius: var(--raggio-piccolo); transition: opacity .2s; }
.hero__partner a:hover { opacity: .85; }
.hero__partner a:focus-visible { outline: 2px solid var(--arancione); outline-offset: 3px; }
.hero__partner--grande img { height: 64px; }
@media (max-width: 720px) { .hero__partner img { height: 30px; } .hero__partner--grande img { height: 52px; } }
/* ---------- Scheda servizio: logo del partner (Zetarent sul Noleggio, Agenzia Italia sulle Pratiche auto) ---------- */
.card-servizio__partner {
display: inline-flex; align-items: center;
margin-bottom: 14px; padding: 7px 12px;
border-radius: 10px; background: var(--bianco);
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.card-servizio__partner img { display: block; height: 24px; width: auto; }
.card-servizio:hover .card-servizio__partner { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
/* =====================================================================
Blocco "Prossima apertura" (pagina Pratiche auto): cosa è pronto e cosa si sta completando
===================================================================== */
.in-arrivo__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.in-arrivo__paragrafo { margin-top: 20px; max-width: 560px; color: rgba(248, 248, 248, .75); }
.in-arrivo__paragrafo + .in-arrivo__paragrafo { color: var(--bianco); font-weight: 600; }
.in-arrivo__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.in-arrivo__scheda {
padding: 28px; border-radius: var(--raggio);
background: var(--grigio-scheda); border: 1px solid rgba(255, 255, 255, .08);
}
.in-arrivo__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.in-arrivo__etichetta { font-family: var(--font-titoli); font-weight: 700; font-size: 18px; color: var(--bianco); }
.in-arrivo__stato { display: flex; flex-direction: column; margin-top: 12px; }
.in-arrivo__voce { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.in-arrivo__segno {
width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
background: rgba(240, 112, 36, .15); border: 1px solid rgba(240, 112, 36, .6); color: var(--arancione);
}
.in-arrivo__segno .icon { width: 16px; height: 16px; }
.in-arrivo__dettaglio { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-arrivo__dettaglio b { font-size: 15px; font-weight: 700; color: var(--bianco); }
.in-arrivo__dettaglio span { font-size: 13px; line-height: 1.5; color: rgba(248, 248, 248, .6); }
.in-arrivo__esito { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(248, 248, 248, .55); white-space: nowrap; }
.in-arrivo__voce.is-in-corso .in-arrivo__esito { color: var(--arancione); }
/* voce ancora in lavorazione: anello che gira piano */
.in-arrivo__voce.is-in-corso .in-arrivo__segno { background: transparent; border: 2px solid rgba(240, 112, 36, .25); border-top-color: var(--arancione); animation: in-arrivo-gira 1.6s linear infinite; }
@keyframes in-arrivo-gira { to { transform: rotate(360deg); } }
.in-arrivo__avanzamento { margin-top: 20px; }
.in-arrivo__barra { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.in-arrivo__barra i { display: block; height: 100%; border-radius: 6px; background: var(--arancione); box-shadow: 0 0 14px var(--arancione-ombra); }
.in-arrivo__avanzamento p { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: rgba(248, 248, 248, .6); }
.in-arrivo__avanzamento b { color: var(--bianco); font-weight: 700; }
.in-arrivo__partner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: rgba(248, 248, 248, .6); }
.in-arrivo__logo { display: inline-flex; padding: 7px 12px; border-radius: 10px; background: var(--bianco); }
.in-arrivo__logo img { display: block; height: 26px; width: auto; }
@media (max-width: 1100px) {
.in-arrivo__griglia { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
.in-arrivo__scheda { padding: 20px; }
.in-arrivo__voce { grid-template-columns: auto minmax(0, 1fr); }
.in-arrivo__esito { grid-column: 2; }
.in-arrivo__azioni .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.in-arrivo__voce.is-in-corso .in-arrivo__segno { animation: none; }
}
/* =====================================================================
Noleggio: veicoli da Rent4Business (elenco con filtri e scheda del veicolo)
Stessi colori, caratteri e componenti delle schede già esistenti
===================================================================== */
a.nol-auto__media { display: block; }
.nol-auto__tag--promo { left: 12px; bottom: auto; top: 12px; background: var(--arancione); color: var(--bianco); }
.nol-auto__titolo-link { color: inherit; transition: color .2s; }
.nol-auto__titolo-link:hover { color: var(--arancione); }
.nol-auto__allestimento { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--grigio-medio); }
.nol-auto__anticipo { margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--grigio-medio); }
.nol-auto__azioni { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: none; text-align: center; }
.nol-auto__richiedi { font-size: 13px; font-weight: 600; color: var(--arancione); text-decoration: underline; text-underline-offset: 3px; }
.nol-auto__richiedi:hover { color: var(--grigio); }
.nol-auto__scheda[hidden] { display: none; }
/* filtri */
.nol-filtri { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-top: 40px; }
.nol-filtri[hidden] { display: none; }
.nol-filtri__tipi { display: flex; flex-wrap: wrap; gap: 8px; }
.nol-filtro {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px; cursor: pointer;
background: var(--bianco); border: 1px solid var(--bordo-forte);
font: inherit; font-size: 14px; font-weight: 600; color: var(--grigio);
transition: background .2s, border-color .2s, color .2s;
}
.nol-filtro span { font-size: 12px; font-weight: 600; color: var(--grigio-medio); }
.nol-filtro:hover { border-color: var(--arancione); }
.nol-filtro.is-attivo { background: var(--arancione); border-color: var(--arancione); color: var(--bianco); }
.nol-filtro.is-attivo span { color: rgba(255, 255, 255, .85); }
.nol-filtri__scelte { display: flex; flex-wrap: wrap; gap: 12px; }
.nol-filtri__campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--grigio-medio); }
.nol-filtri__campo select {
min-width: 190px; padding: 10px 38px 10px 14px; border-radius: var(--raggio-piccolo);
border: 1px solid var(--bordo-forte); background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f07024' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
font: inherit; font-size: 14px; font-weight: 500; color: var(--grigio); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.nol-filtri__campo select:focus-visible { outline: 2px solid var(--arancione); outline-offset: 2px; }
.nol-filtri__cerca { position: relative; display: block; }
.nol-filtri__cerca .icon { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--arancione); pointer-events: none; }
.nol-filtri__cerca input {
width: 260px; padding: 10px 14px 10px 40px; border-radius: var(--raggio-piccolo);
border: 1px solid var(--bordo-forte); background: var(--bianco);
font: inherit; font-size: 14px; font-weight: 500; letter-spacing: normal; color: var(--grigio);
}
.nol-filtri__cerca input::placeholder { color: var(--grigio-medio); font-weight: 400; }
.nol-filtri__cerca input:focus-visible { outline: 2px solid var(--arancione); outline-offset: 2px; }
.nol-vuoto--filtri .btn { margin-top: 16px; }
.nol-filtri__esito { flex: 1 1 100%; font-size: 13px; color: var(--grigio-medio); }
.nol-filtri + .nol-auto { padding-top: 24px; }
.nol-altri { display: flex; justify-content: center; padding-top: 40px; }
.nol-altri[hidden] { display: none; }
.nol-vuoto { margin-top: 40px; padding: 32px; border-radius: var(--raggio); background: var(--bianco); border: 1px solid var(--bordo); text-align: center; }
.nol-vuoto .testo { margin-top: 8px; }
.nol-vuoto--filtri { font-size: 15px; color: var(--grigio-medio); }
.nol-vuoto[hidden] { display: none; }
/* ---------- Scheda del veicolo ---------- */
.vei-hero__allestimento { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--grigio-medio); }
.vei-prezzo {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 28px; align-items: center;
padding: 22px 24px; border-radius: var(--raggio);
background: var(--bianco); border: 1px solid var(--bordo-forte); box-shadow: 0 8px 32px rgba(240, 112, 36, .1);
}
.vei-prezzo__rata { display: flex; align-items: flex-end; gap: 10px; }
.vei-prezzo__da { font-size: 12px; font-weight: 600; color: var(--grigio-medio); margin-bottom: 8px; }
.vei-prezzo__rata strong { font-family: var(--font-titoli); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -.02em; color: var(--arancione); }
.vei-prezzo__mese { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--grigio-medio); margin-bottom: 4px; }
.vei-prezzo__dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.vei-prezzo__dati li { display: flex; flex-direction: column; gap: 2px; }
.vei-prezzo__dati span { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--grigio-medio); }
.vei-prezzo__dati b { font-size: 15px; font-weight: 700; color: var(--grigio); }
.vei-prezzo__badge { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.vei-prezzo__consegna { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--grigio-medio); }
.vei-prezzo__consegna .icon { width: 15px; height: 15px; color: var(--arancione); }
.vei-hero .hero__testo { gap: 28px; }
.vei-galleria { display: flex; flex-direction: column; gap: 12px; }
.vei-galleria__principale { border-radius: var(--raggio); overflow: hidden; background: #f0f0f0; }
.vei-galleria__principale img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.vei-galleria__miniature { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vei-galleria__mini { padding: 0; border: 2px solid transparent; border-radius: var(--raggio-piccolo); overflow: hidden; background: #f0f0f0; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.vei-galleria__mini img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vei-galleria__mini:hover, .vei-galleria__mini.is-attiva { opacity: 1; border-color: var(--arancione); }
.vei-inclusi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.vei-inclusi__elenco { padding: 32px; border-radius: var(--raggio); background: var(--grigio-chiaro); }
.vei-tecnica { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 40px; align-items: start; }
.vei-tecnica__gruppo .h4 { color: var(--grigio); margin-bottom: 12px; }
.vei-tecnica__gruppo dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bordo); font-size: 14px; }
.vei-tecnica__gruppo dl > div:last-child { border-bottom: 0; }
.vei-tecnica__gruppo dt { color: var(--grigio-medio); font-weight: 500; }
.vei-tecnica__gruppo dd { margin: 0; color: var(--grigio); font-weight: 600; text-align: right; }
.vei-chip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.vei-chip li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--bianco); border: 1px solid var(--bordo-forte); font-size: 13px; font-weight: 600; color: var(--grigio); }
.vei-chip .icon { width: 14px; height: 14px; color: var(--arancione); }
.vei-su-misura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.vei-su-misura__opzioni { display: flex; flex-direction: column; gap: 22px; }
.vei-su-misura__titolo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--arancione); }
.vei-su-misura .vei-chip { margin-top: 10px; }
.vei-su-misura .vei-chip li { background: var(--grigio-chiaro); }
.vei-dotazioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 40px; align-items: start; }
.vei-dotazioni__gruppo { border-radius: var(--raggio-piccolo); background: var(--bianco); border: 1px solid var(--bordo); }
.vei-dotazioni__gruppo summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; color: var(--grigio); }
.vei-dotazioni__gruppo summary::-webkit-details-marker { display: none; }
.vei-dotazioni__gruppo summary > span:first-child { flex: 1 1 auto; }
.vei-dotazioni__conta { font-size: 12px; font-weight: 600; color: var(--grigio-medio); }
.vei-dotazioni__gruppo summary .icon { width: 16px; height: 16px; color: var(--arancione); transition: transform .2s; }
.vei-dotazioni__gruppo[open] summary .icon { transform: rotate(180deg); }
.vei-dotazioni__gruppo ul { padding: 0 18px 16px 36px; list-style: disc; font-size: 14px; line-height: 1.6; color: var(--testo-medio); }
.vei-dotazioni__gruppo li + li { margin-top: 4px; }
.vei-descrizione h3 { margin: 28px 0 10px; font-family: var(--font-titoli); font-size: 20px; font-weight: 800; color: var(--grigio); }
@media (max-width: 1100px) {
.vei-inclusi, .vei-su-misura { grid-template-columns: 1fr; gap: 32px; }
.vei-tecnica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.nol-filtri { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.nol-filtri__tipi { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.nol-filtro { flex: none; }
.nol-filtri__scelte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.nol-filtri__campo { min-width: 0; }
.nol-filtri__campo select { min-width: 0; width: 100%; }
.nol-filtri__campo--cerca { grid-column: 1 / -1; }
.nol-filtri__cerca input { width: 100%; font-size: 16px; }
.nol-auto__azioni { flex-direction: column; }
.vei-prezzo { grid-template-columns: 1fr; padding: 20px; }
.vei-prezzo__rata strong { font-size: 42px; }
.vei-tecnica, .vei-dotazioni { grid-template-columns: 1fr; }
.vei-galleria__miniature { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vei-inclusi__elenco { padding: 22px; }
}
/* scheda veicolo: foto su fondo bianco senza tagli e miniature compatte (annulla gli stili generici dell'hero) */
.vei-hero .container { align-items: flex-start; }
.vei-hero .hero__testo { padding-top: 40px; }
.vei-galleria .vei-galleria__principale img { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; object-fit: contain; background: var(--bianco); }
.vei-galleria .vei-galleria__mini img { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; object-fit: contain; background: var(--bianco); border-radius: 0; }
.vei-galleria__principale { background: var(--bianco); }
.vei-galleria__mini { background: var(--bianco); }
.vei-tecnica:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
.vei-hero .hero__testo { padding-top: 0; }
.vei-tecnica:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}
/* ---------- Scheda veicolo: scarica l'offerta in PDF ---------- */
.vei-pdf { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--testo); transition: color .2s; }
.vei-pdf .icon { width: 20px; height: 20px; color: var(--arancione); flex: none; }
.vei-pdf span { text-decoration: underline; text-decoration-color: var(--arancione); text-underline-offset: 4px; }
.vei-pdf small { font-size: 13px; font-weight: 400; color: var(--grigio-medio); }
.vei-pdf:hover { color: var(--arancione); }
.vei-pdf:focus-visible { outline: 2px solid var(--arancione); outline-offset: 4px; border-radius: 4px; }
.vei-hero .vei-pdf { margin-bottom: 40px; }
@media (max-width: 1100px) { .vei-hero .vei-pdf { margin-bottom: 0; } }
@media (max-width: 720px) { .vei-pdf small { display: none; } }
/* ---------- Pulsante "Torna su": compare dopo un po' di scorrimento ---------- */
.torna-su {
position: fixed; right: 24px; bottom: 24px; z-index: 55;
display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
border: 0; border-radius: 50%; cursor: pointer;
background: var(--arancione); color: var(--bianco);
box-shadow: 0 6px 16px var(--arancione-ombra);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity .25s, transform .25s, visibility 0s linear .25s, background .2s;
}
.torna-su .icon { width: 22px; height: 22px; }
.torna-su.is-visibile { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, background .2s; }
.torna-su:hover { background: #d9611a; }
.torna-su:focus-visible { outline: 2px solid var(--arancione); outline-offset: 3px; }
@media (max-width: 720px) {
.torna-su { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .torna-su, .torna-su.is-visibile { transition: none; } }
/* =====================================================================
Magazine: elenco articoli, schede, articolo
===================================================================== */
.mag-categorie { display: flex; flex-wrap: wrap; gap: 8px; }
.mag-categorie .nol-filtro { text-decoration: none; }
.mag-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 40px; }
.mag-scheda {
position: relative; display: flex; flex-direction: column;
background: var(--bianco); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: var(--raggio);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); overflow: hidden;
transition: box-shadow .25s, transform .25s;
}
.mag-scheda:hover { box-shadow: 0 8px 32px rgba(240, 112, 36, 0.12); transform: translateY(-2px); }
.mag-scheda__media { position: relative; display: block; background: #f0f0f0; overflow: hidden; }
.mag-scheda__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; transition: transform .5s; }
.mag-scheda:hover .mag-scheda__media img { transform: scale(1.03); }
.mag-scheda__tag {
position: absolute; left: 12px; bottom: 12px; padding: 3px 12px; border-radius: var(--raggio-piccolo);
background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.9);
font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase;
}
.mag-scheda__corpo { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 24px; }
.mag-scheda__meta { font-size: 13px; color: var(--grigio-medio); }
.mag-scheda__corpo .h4 { color: var(--grigio); line-height: 1.3; }
.mag-scheda__titolo { color: inherit; }
/* tutta la scheda è cliccabile tramite il link del titolo */
.mag-scheda__titolo::after { content: ""; position: absolute; inset: 0; }
.mag-scheda__titolo:focus-visible { outline: none; }
.mag-scheda:has(.mag-scheda__titolo:focus-visible) { outline: 2px solid var(--arancione); outline-offset: 3px; }
.mag-scheda__estratto { font-size: 15px; line-height: 1.6; color: var(--testo-grigio); }
.mag-scheda__leggi { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--arancione); }
.mag-scheda__leggi .ico { width: 16px; height: 16px; transition: transform .2s; }
.mag-scheda:hover .mag-scheda__leggi .ico { transform: translateX(3px); }
.mag-pagine { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding-top: 48px; }
.mag-pagine__stato { font-size: 14px; color: var(--grigio-medio); }
.mag-cta__contenuto { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.mag-cta__contenuto .testo { margin-top: 12px; max-width: 620px; color: rgba(248, 248, 248, .75); }
.mag-cta__azioni { display: flex; flex-direction: column; gap: 12px; flex: none; }
.mag-cta__azioni .btn { justify-content: center; }
/* logo del partner in testa all'articolo: logo ufficiale bianco su targhetta scura */
.mag-partner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.mag-partner a { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 10px; background: var(--grigio); }
.mag-partner img { height: 22px; width: auto; }
.mag-partner span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio-medio); }
.mag-articolo__titolo { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; }
.mag-articolo__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--grigio-medio); }
.mag-articolo__meta span { display: inline-flex; align-items: center; gap: 6px; }
.mag-articolo__meta .icon { width: 16px; height: 16px; color: var(--arancione); }
.mag-articolo-hero .breadcrumb a:last-child { color: var(--arancione); }
.mag-prosa { margin-inline: auto; font-size: 17px; }
.mag-prosa > p:first-child { font-size: 19px; line-height: 1.65; color: var(--testo); }
.mag-prosa h3 { margin: 28px 0 8px; font-family: var(--font-titoli); font-size: 19px; font-weight: 800; color: var(--grigio); }
.mag-prosa ol { list-style: decimal; padding-left: 24px; }
.mag-prosa ol + p, .mag-prosa p + ol { margin-top: 12px; }
.mag-prosa li::marker { color: var(--arancione); font-weight: 700; }
.mag-prosa blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--arancione); color: var(--testo); font-weight: 500; }
.mag-anteprima { position: sticky; top: var(--altezza-header, 120px); z-index: 40; padding: 10px 16px; background: #fff3eb; border-bottom: 2px solid var(--arancione); color: #7a4a20; font-size: 14px; text-align: center; }
.mag-anteprima a { color: inherit; font-weight: 700; text-decoration: underline; }
@media (max-width: 1100px) {
.mag-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mag-cta__contenuto { flex-direction: column; align-items: flex-start; gap: 28px; }
.mag-cta__azioni { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 720px) {
.mag-categorie { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.mag-categorie .nol-filtro { flex: none; }
.mag-griglia { grid-template-columns: 1fr; padding-top: 28px; }
.mag-scheda__corpo { padding: 20px; }
.mag-cta__azioni { flex-direction: column; align-self: stretch; }
.mag-prosa { font-size: 16px; }
.mag-prosa > p:first-child { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .mag-scheda, .mag-scheda__media img, .mag-scheda__leggi .ico { transition: none; } .mag-scheda:hover { transform: none; } }
/* ---------- Intestazione con sette voci di menu (Magazine attivo): niente ritorni a capo tra 1101 e 1400 px ---------- */
.site-header--compatto .nav > a, .site-header--compatto .header-tel { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1400px) {
.site-header--compatto .container { padding-inline: 24px; }
.site-header--compatto .nav { gap: 0; }
.site-header--compatto .nav > a { padding-inline: 10px; }
.site-header--compatto .header-cta { gap: 4px; }
.site-header--compatto .header-tel { padding-inline: 8px; }
}
@media (min-width: 1101px) and (max-width: 1200px) {
.site-header--compatto .logo img { width: 156px; height: 52px; }
.site-header--compatto .nav > a { padding-inline: 8px; }
.site-header--compatto .header-cta .btn { padding-inline: 16px; }
}