/* ===================================================================== Front-end — noleggio e vendita allestimenti Nessuna dipendenza esterna. Mobile first. Il foglio è costruito su tre regole, non su eccezioni: 1. le distanze vengono da una scala (--s1…--s9), mai da numeri sciolti 2. i campi di un modulo hanno un'unica definizione, valida ovunque 3. ogni blocco respira dall'alto: il margine sta sopra, non sotto ===================================================================== */ /* ── Fondamenta ─────────────────────────────────────────────────── */ :root{ /* Colori */ --bk:#fbf8f4; --carta:#ffffff; --carta-2:#f6f1ea; --ink:#241f1c; --ink-2:#574e46; --tenue:#8d8274; --linea:#e6ddd1; --linea-2:#f1eae0; --acc:#a8324f; --acc-scuro:#8b2841; --acc-tenue:#fdf4f6; --acc-linea:#f1d8de; --acc-chiaro:#f0c3ce; /* accento su fondo scuro: copertina e fondo pagina */ --ok:#2c6e4f; --ok-tenue:#eaf4ee; --ok-linea:#cde5d8; --no:#a13b2a; --no-tenue:#fbeeea; --no-linea:#f1d9d1; --oro:#93752f; /* Scala delle distanze: tutto nasce da qui */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px; /* Margine laterale e respiro verticale delle sezioni: crescono con lo schermo, così su telefono non si sta stretti e su desktop non si nuota. */ --pad:clamp(20px,5vw,64px); --aria:clamp(64px,8vw,112px); /* Forme */ --r-s:8px; --r:12px; --r-g:18px; --r-p:999px; --ombra:0 1px 2px rgba(60,45,30,.04), 0 6px 22px rgba(60,45,30,.05); --ombra-alta:0 14px 46px rgba(60,45,30,.16); /* Caratteri. Se il servizio esterno non rispondesse, restano le riserve di sistema: il sito cambia aspetto ma resta leggibile. */ --titolo:'DM Serif Text',Georgia,'Times New Roman',serif; --testo:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Immagini di sfondo: nessuna per impostazione predefinita. Si caricano dal gestionale, in Impostazioni → Azienda, che scrive queste due variabili nel . Finché non ci sono, resta il fondo pieno definito qui sotto: nessuna richiesta a siti esterni. */ --copertina-img:none; --sezione-img:none; --copertina-fondo:#2a1e1a; --sezione-fondo:#241a17; --largo:1200px; --testa-h:66px; /* altezza dell'intestazione */ --appiccica:86px; /* sotto l'intestazione, mai sopra */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ /* Rete di sicurezza contro gli sfondamenti orizzontali. "clip" e non "hidden": hidden disattiverebbe position:sticky dell'intestazione e delle colonne laterali. */ overflow-x:clip; margin:0;background:var(--bk);color:var(--ink); font:16px/1.7 var(--testo); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} img,svg{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--titolo);font-weight:400;letter-spacing:-.01em} h1{line-height:1.08} h2{line-height:1.15} h3,h4{line-height:1.25;letter-spacing:-.01em} p{margin:0} ul,ol{margin:0} :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:var(--r-s)} ::selection{background:var(--acc-linea)} .num,[class*="prezzo"],.soldi,.totale-riga{font-variant-numeric:tabular-nums} .solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} .contenitore{width:100%;max-width:var(--largo);margin-inline:auto;padding-inline:var(--pad)} /* ===================================================================== 1 · CAMPI DEI MODULI — una definizione sola, valida ovunque ===================================================================== */ .modulo-accesso label, .modulo-area .griglia-c label, .griglia-c label, .cassa label.intera, .date-riga label, .opzione label{ display:block; font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink-2); } .modulo-accesso input, .griglia-c input, .griglia-c select, .griglia-c textarea, .cassa textarea, .date-riga input, .opzione select, .filtri .prezzi input, .date-carrello input, .barra-periodo input, .cerca-catalogo input{ display:block;width:100%; margin-top:var(--s1);padding:11px 14px; border:1px solid var(--linea);border-radius:var(--r); background-color:var(--bk); font-size:15.5px;line-height:1.4;color:var(--ink); transition:border-color .16s,box-shadow .16s,background-color .16s; } .griglia-c textarea,.cassa textarea{ min-height:96px;resize:vertical;line-height:1.6;font-family:inherit; } .modulo-accesso input:focus, .griglia-c input:focus,.griglia-c select:focus,.griglia-c textarea:focus, .cassa textarea:focus,.date-riga input:focus,.opzione select:focus, .filtri .prezzi input:focus,.date-carrello input:focus,.barra-periodo input:focus{ outline:none;background-color:var(--carta); border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-linea); } input[type=date],input[type=time],input[type=number]{font-variant-numeric:tabular-nums} input::placeholder,textarea::placeholder{color:#b9ad9d} /* Freccia dei menu a tendina: stessa famiglia delle icone del sito (tratto 1.8, estremi arrotondati), incorporata come dato per non dipendere da un file esterno. */ /* Tutti i menu a tendina del sito, con la stessa freccia. Va usato "background-color" nelle regole specifiche: la scorciatoia "background" azzererebbe l'immagine della freccia. */ select{ -webkit-appearance:none;-moz-appearance:none;appearance:none; background-color:var(--bk); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8274' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:17px 17px; padding-right:42px; cursor:pointer; } select:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8324f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } select::-ms-expand{display:none} /* Nota sotto un campo */ .griglia-c small,.modulo-accesso small,.date-riga small,.opzione small{ display:block;margin-top:var(--s1); font-size:12.5px;font-weight:400;line-height:1.5;color:var(--tenue); } /* Griglia dei campi */ .griglia-c{display:grid;gap:var(--s4);grid-template-columns:1fr} @media (min-width:560px){ .griglia-c{grid-template-columns:1fr 1fr} } .griglia-c .intera{grid-column:1/-1} /* ===================================================================== 2 · PULSANTI ===================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:48px;padding:12px 24px; border:1px solid var(--ink);border-radius:var(--r); background:var(--ink);color:var(--bk); font-size:15px;font-weight:600;letter-spacing:.005em; text-align:center;cursor:pointer; transition:background .18s,border-color .18s,color .18s,transform .12s; } .btn:hover{background:#3b322b;border-color:#3b322b} .btn:active{transform:translateY(1px)} .btn svg{width:17px;height:17px;flex:none;stroke-width:1.9} .btn-acc{background:var(--acc);border-color:var(--acc);color:#fff} .btn-acc:hover{background:var(--acc-scuro);border-color:var(--acc-scuro)} .btn-vuoto{background:transparent;border-color:var(--linea);color:var(--ink)} .btn-vuoto:hover{background:var(--carta-2);border-color:#d7ccbc} .btn-p{min-height:40px;padding:9px 17px;font-size:14px} .btn[disabled],.btn.disabilitato{opacity:.4;pointer-events:none} /* display:inline-flex vince sull'attributo hidden, che di suo vale display:none. Senza questa riga un pulsante marcato hidden resta visibile: capita ogni volta che si imposta display su un elemento. */ .btn[hidden]{display:none} /* ===================================================================== 3 · INTESTAZIONE ===================================================================== */ .testa{ position:sticky;top:0;z-index:50; background:rgba(251,248,244,.94);backdrop-filter:blur(14px); border-bottom:1px solid var(--linea); } .testa-riga{display:flex;align-items:center;gap:var(--s3); height:var(--testa-h);min-width:0} /* Il marchio DEVE potersi restringere. Con flex:none non si restringe mai, quindi il troncamento con i puntini non scatta e su schermo stretto la riga sfonda il contenitore, lasciando una striscia vuota a destra su tutte le pagine. */ .marchio{display:flex;align-items:center;gap:10px; flex:0 1 auto;min-width:0;overflow:hidden} .marchio img{height:36px;width:auto;flex:none} .marchio b{min-width:0;font-family:var(--titolo);font-size:19px;font-weight:600; letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:640px){ .marchio b{font-size:16.5px} } .nav-p{display:none;margin-left:var(--s3);padding:0;list-style:none} @media (min-width:1040px){ .nav-p{display:flex;gap:2px} } .nav-p>li,.nav-p>li.con-giu{position:relative} .nav-p>li>a{display:block;padding:9px 14px;border-radius:var(--r-s); font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background .15s,color .15s} .nav-p>li>a:hover{background:var(--carta-2);color:var(--ink)} .nav-p .giu{ position:absolute;top:calc(100% + 4px);left:0;min-width:230px;padding:var(--s2); background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-g); box-shadow:var(--ombra-alta); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s,transform .18s,visibility .18s; } .nav-p>li:hover .giu,.nav-p>li:focus-within .giu{opacity:1;visibility:visible;transform:none} .nav-p .giu a{display:block;padding:9px 12px;border-radius:var(--r-s); font-size:14px;color:var(--ink-2)} .nav-p .giu a:hover{background:var(--acc-tenue);color:var(--acc)} .azioni-testa{margin-left:auto;display:flex;align-items:center;gap:var(--s1); flex:none} .ico-btn{position:relative;width:42px;height:42px;flex:none; display:grid;place-items:center; border:1px solid transparent;border-radius:var(--r);background:transparent; color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s} .ico-btn:hover{background:var(--carta-2);color:var(--ink)} .ico-btn svg{width:20px;height:20px;stroke-width:1.6} .pallino{position:absolute;top:5px;right:5px;min-width:17px;height:17px;padding:0 5px; display:grid;place-items:center;border-radius:var(--r-p); background:var(--acc);color:#fff;font-size:10.5px;font-weight:700; font-variant-numeric:tabular-nums;line-height:1} @media (min-width:1040px){ .ico-btn.menu{display:none} } .modo{display:flex;gap:2px;padding:3px;margin-right:var(--s1);flex:none; border:1px solid var(--linea);border-radius:var(--r-p);background:var(--carta)} .modo a{padding:6px 15px;border-radius:var(--r-p); font-size:13px;font-weight:600;color:var(--tenue);white-space:nowrap; transition:background .16s,color .16s} .modo a:hover{color:var(--ink)} .modo a.on{background:var(--ink);color:var(--bk)} @media (max-width:820px){ .modo a{padding:6px 11px;font-size:12.5px} } /* Su telefono resta: senza, non c'è modo di passare alla vendita. Si accorcia soltanto. */ @media (max-width:480px){ .modo{margin-right:0} .modo a{padding:6px 10px;font-size:12px;letter-spacing:-.01em} } @media (max-width:360px){ .marchio b{display:none} } /* Menu a scomparsa */ .velo{position:fixed;inset:0;z-index:60;background:rgba(36,31,28,.46); opacity:0;pointer-events:none;transition:opacity .25s} .velo.on{opacity:1;pointer-events:auto} .cassetto{position:fixed;inset:0 auto 0 0;width:min(330px,88vw);z-index:65; background:var(--carta);border-right:1px solid var(--linea); transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto;padding:var(--s5) var(--s4) var(--s8);overscroll-behavior:contain} .cassetto.on{transform:none} .cassetto h4{margin:var(--s6) 0 var(--s2);font-family:var(--testo); font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)} .cassetto a{display:block;padding:10px 12px;border-radius:var(--r-s); font-size:15px;color:var(--ink-2)} .cassetto a:hover{background:var(--carta-2);color:var(--ink)} .cassetto a.figlia{padding-left:26px;font-size:14px;color:var(--tenue)} /* Ricerca */ .cerca-velo{position:fixed;inset:0;z-index:70;background:rgba(36,31,28,.5); display:none;padding:12vh var(--s4) var(--s4)} .cerca-velo.on{display:block} .cerca-scatola{max-width:620px;margin-inline:auto;padding:var(--s2); background:var(--carta);border-radius:var(--r-g);box-shadow:var(--ombra-alta)} .cerca-scatola form{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3)} .cerca-scatola svg{width:21px;height:21px;flex:none;color:var(--tenue);stroke-width:1.8} .cerca-scatola input{flex:1;min-width:0;border:0;background:transparent; padding:11px 0;font-size:17px;outline:none} .cerca-scatola .sugg{padding:var(--s3);margin-top:var(--s2); border-top:1px solid var(--linea-2);font-size:13px;color:var(--tenue)} .cerca-scatola .sugg a{display:inline-block;margin:var(--s1) var(--s1) 0 0; padding:5px 13px;border:1px solid var(--linea);border-radius:var(--r-p);color:var(--ink-2)} .cerca-scatola .sugg a:hover{border-color:var(--acc);color:var(--acc)} /* ===================================================================== 4 · IMPAGINAZIONE E SEZIONI ===================================================================== */ main{display:block} .sezione{padding-block:var(--aria)} .sezione-testa{display:flex;align-items:flex-end;gap:var(--s5);flex-wrap:wrap; margin-bottom:var(--s6)} .sezione-testa h2{font-size:clamp(27px,3.6vw,36px)} .sezione-testa p{margin-top:var(--s2);max-width:58ch; font-size:16px;line-height:1.65;color:var(--ink-2)} .sezione-testa .oltre{margin-left:auto;display:inline-flex;align-items:center;gap:6px; font-size:14.5px;font-weight:600;color:var(--acc);white-space:nowrap} .sezione-testa .oltre svg{width:16px;height:16px} .sopratitolo{display:block;margin-bottom:var(--s2);font-family:var(--testo); font-size:12.5px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--acc)} .briciole{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap; padding-block:var(--s5);font-size:13px;color:var(--tenue)} .briciole a:hover{color:var(--acc)} .briciole .sep{opacity:.45} .briciole [aria-current]{color:var(--ink)} /* ===================================================================== 5 · COPERTINA ===================================================================== */ .copertina{ position:relative;isolation:isolate;overflow:hidden; padding-block:var(--s9) var(--s8); color:#fff; } @media (min-width:900px){ .copertina{padding-block:120px var(--s9)} } /* Sotto tutto c'è il fondo pieno: se un'immagine è stata caricata la copre, altrimenti resta lui e la copertina funziona lo stesso. */ .copertina::before{ content:"";position:absolute;inset:0;z-index:-2; background-color:var(--copertina-fondo); background-image:var(--copertina-img); background-size:cover;background-position:center 38%; transform:scale(1.02); } /* Le due sfumature coprono l'immagine e si addensano dove c'è il testo: fitte a sinistra, quasi trasparenti a destra, così la foto resta leggibile. */ .copertina::after{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(205deg, rgb(28 20 17 / 59%) 0%, rgb(28 20 17 / 50%) 42%, rgb(28 20 17 / 82%) 100%), radial-gradient(70ch 50ch at 30% 20%, rgba(139,40,65,.46), transparent 70%); } @media (max-width:760px){ /* Su schermo stretto il testo occupa tutta la larghezza: la sfumatura cambia direzione e si addensa verso il basso, dove sta la lettura. */ .copertina::after{ background: linear-gradient(271deg, rgb(28 20 17 / 44%) 0%, rgb(28 20 17 / 62%) 42%, rgb(28 20 17 / 91%) 100%), radial-gradient(70ch 50ch at 30% 20%, rgba(139,40,65,.46), transparent 70%); } } .copertina-corpo{position:relative;z-index:1} .copertina .sopratitolo{color:var(--acc-chiaro)} .copertina h1{ margin-top:14px; font-size:clamp(35px,6.2vw,60px);max-width:20ch;line-height:1.04;color:#fff; text-shadow:0 1px 30px rgba(20,12,10,.4); } .copertina .sotto{ margin-top:var(--s5);max-width:54ch; font-size:17.5px;line-height:1.68;color:rgba(255,255,255,.9); } .copertina .azioni{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)} /* Pulsante chiaro, per fondi scuri */ .btn-chiaro{background:transparent;border-color:rgba(255,255,255,.5);color:#fff} .btn-chiaro:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff} .fiducia{display:grid;gap:var(--s5);margin-top:var(--s8); padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.22); grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:760px){ .fiducia{grid-template-columns:repeat(4,minmax(0,1fr))} } .fiducia b{display:block;font-family:var(--titolo);font-size:26px;line-height:1.15;color:#fff} .fiducia span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5; color:rgba(255,255,255,.72)} /* Su telefono le due colonne sono strette: a 26px una frase di venti caratteri va a capo male e le due voci risultano di altezza diversa. */ @media (max-width:600px){ .fiducia{gap:var(--s4) var(--s5);margin-top:var(--s7)} .fiducia b{font-size:18.5px;line-height:1.2} .fiducia span{margin-top:4px;font-size:12.5px;line-height:1.45} } /* ===================================================================== 5-bis · RICERCA A PASSI Sta sotto la copertina, non dentro l'intestazione: prima il cliente capisce dove si trova, poi vede da dove si comincia. ===================================================================== */ .ricerca-guscio{margin-top:calc(var(--s7) * -1);position:relative;z-index:2} @media (max-width:760px){ .ricerca-guscio{margin-top:calc(var(--s6) * -1)} } .ricerca{padding:var(--s6);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g);box-shadow:var(--ombra)} @media (max-width:640px){ .ricerca{padding:var(--s5)} } .ricerca-tit{margin-bottom:var(--s5);font-size:clamp(21px,2.6vw,27px)} /* Due lati: il calendario a sinistra, tutto il resto a destra. Su telefono diventano uno sopra l'altro. */ .ricerca-corpo{display:grid;gap:var(--s6)} @media (min-width:900px){ .ricerca-corpo{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:var(--s7)} } .lato-quando,.lato-cosa{min-width:0;display:flex;flex-direction:column;gap:var(--s3)} /* In vendita non c'è il calendario: il lato destro occupa tutta la riga e la linea di separazione non ha più nulla da separare. Due classi battono una, quindi questa regola vince su quelle nei media query qui sotto senza bisogno di !important. */ .lato-cosa.intero{ grid-column:1/-1; padding-left:0;border-left:0; padding-top:0;border-top:0; } .lato-tit{font-family:var(--testo);font-size:11.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--tenue)} /* Il lato sinistro è separato dal destro da una linea, non da un vuoto */ @media (min-width:900px){ .lato-cosa{padding-left:var(--s7);border-left:1px solid var(--linea-2)} } @media (max-width:899px){ .lato-cosa{padding-top:var(--s5);border-top:1px solid var(--linea-2)} } /* Il selettore delle date ha sostituito i due campi affiancati: le regole di quelli sono state rimosse per non lasciare peso morto. */ /* A destra: raccolta, parola chiave e pulsante sulla stessa riga */ .cosa-campi{display:grid;gap:var(--s3)} @media (min-width:620px){ .cosa-campi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)} } .campo-r{min-width:0} .campo-r label{display:block;margin-bottom:6px; font-size:12.5px;font-weight:600;color:var(--ink-2)} .campo-r input,.campo-r select{ display:block;width:100%;height:52px;padding:0 16px; border:1px solid var(--linea);border-radius:var(--r); background-color:var(--bk); font-size:16px;line-height:normal; transition:border-color .16s,box-shadow .16s,background-color .16s} .campo-r select{padding-right:42px} .campo-r input:focus,.campo-r select:focus{outline:none;background-color:var(--carta); border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-linea)} /* Su una riga sua, allineato ai campi sopra */ .ricerca-vai{width:100%;height:52px;min-height:52px;margin-top:var(--s3); padding-inline:var(--s6);white-space:nowrap} .ricerca-nota{margin-top:var(--s5);padding-top:var(--s4); border-top:1px solid var(--linea-2); font-size:13.5px;line-height:1.6;color:var(--tenue)} .ricerca-nota b{color:var(--acc)} .ricerca-nota a{margin-left:var(--s2);color:var(--acc);font-weight:600; text-decoration:underline;text-underline-offset:3px} /* Versione compatta, per le pagine interne */ .ricerca.compatta{padding:var(--s5);margin-bottom:var(--s6); background:var(--carta-2);box-shadow:none} .ricerca.compatta .ricerca-corpo{gap:var(--s5)} @media (min-width:900px){ .ricerca.compatta .ricerca-corpo{gap:var(--s6)} } @media (min-width:900px){ .ricerca.compatta .lato-cosa{padding-left:var(--s6)} .ricerca.compatta .lato-cosa.intero{padding-left:0} } .ricerca.compatta .data-campo input, .ricerca.compatta .campo-r input, .ricerca.compatta .campo-r select{padding:0 42px 0 14px;font-size:15px; background-color:var(--carta)} .ricerca.compatta .ricerca-vai{min-height:46px;padding-inline:var(--s5)} .ricerca.compatta .ricerca-nota{margin-top:var(--s4);padding-top:var(--s3);font-size:13px} /* ===================================================================== 6 · GRIGLIE DI PRODOTTI ===================================================================== */ .griglia{display:grid;gap:var(--s4);grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:720px){ .griglia{gap:var(--s5);grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:1060px){ .griglia{grid-template-columns:repeat(4,minmax(0,1fr))} } .griglia.larga{grid-template-columns:repeat(1,minmax(0,1fr))} @media (min-width:620px){ .griglia.larga{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1060px){ .griglia.larga{grid-template-columns:repeat(3,minmax(0,1fr))} } .scheda-p{display:flex;flex-direction:column;background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g);overflow:hidden; transition:transform .24s cubic-bezier(.4,0,.2,1),box-shadow .24s,border-color .24s} .scheda-p:hover{transform:translateY(-3px);box-shadow:var(--ombra);border-color:#dbcfbe} .scheda-p .foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--carta-2)} .scheda-p .foto img{width:100%;height:100%;object-fit:cover; transition:transform .55s cubic-bezier(.4,0,.2,1)} .scheda-p:hover .foto img{transform:scale(1.045)} .scheda-p .segni{position:absolute;top:var(--s3);left:var(--s3); display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start} .scheda-p .corpo{display:flex;flex-direction:column;flex:1;gap:var(--s1); padding:var(--s4) var(--s4) var(--s5)} .scheda-p .cat{font-size:11px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--tenue)} .scheda-p h3{font-size:17px} .scheda-p .breve{font-size:13.5px;line-height:1.55;color:var(--tenue); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .scheda-p .prezzo{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap; margin-top:auto;padding-top:var(--s3); font-family:var(--titolo);font-size:20px;font-weight:600} .scheda-p .prezzo .al-giorno{font-family:var(--testo);font-size:12px; font-weight:500;color:var(--tenue)} .scheda-p .prezzo .barrato{font-family:var(--testo);font-size:13px;font-weight:400; color:var(--tenue);text-decoration:line-through} .segno{display:inline-flex;align-items:center;gap:5px;padding:4px 11px; border-radius:var(--r-p);font-size:11px;font-weight:700;letter-spacing:.02em; line-height:1.5;backdrop-filter:blur(6px)} .segno.libero{background:rgba(234,244,238,.95);color:var(--ok)} .segno.occupato{background:rgba(251,238,234,.95);color:var(--no)} .segno.usato{background:rgba(253,246,233,.95);color:var(--oro)} .segno.nuovo{background:rgba(234,244,238,.95);color:var(--ok)} .segno.evidenza{background:rgba(36,31,28,.9);color:var(--bk)} .segno.esaurito{background:rgba(36,31,28,.84);color:#fff} /* Vetrina delle categorie */ .vetrina{display:grid;gap:var(--s4);grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:860px){ .vetrina{gap:var(--s5);grid-template-columns:repeat(4,minmax(0,1fr))} } .vetrina a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden; border:1px solid var(--linea);border-radius:var(--r-g);background:var(--carta-2)} .vetrina a img{width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.4,0,.2,1)} .vetrina a:hover img{transform:scale(1.05)} .vetrina .strato{position:absolute;inset:auto 0 0 0;padding:var(--s7) var(--s4) var(--s4); color:#fff;background:linear-gradient(to top,rgba(28,22,18,.88),rgba(28,22,18,.28) 55%,transparent)} .vetrina .strato b{display:block;font-family:var(--titolo);font-size:19px;line-height:1.2} .vetrina .strato span{font-size:12.5px;opacity:.84} /* Sezione con immagine di sfondo, testi chiari. Cambia l'indirizzo in --sezione-img per usarne una tua. */ .sezione-immagine{ position:relative;isolation:isolate;overflow:hidden;color:#fff; } .sezione-immagine::before{ content:"";position:absolute;inset:0;z-index:-2; background-color:var(--sezione-fondo); background-image:var(--sezione-img); background-size:cover;background-position:center; } .sezione-immagine::after{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg, rgb(26 19 16 / 70%) 0%, rgb(26 19 16 / 68%) 55%, rgba(26,19,16,.92) 100%), radial-gradient(70ch 46ch at 18% 12%, rgba(139,40,65,.34), transparent 68%); } /* Su schermo stretto la sfumatura cambia direzione: il testo occupa tutta la larghezza e serve più copertura dove comincia a leggersi. */ @media (max-width:760px){ .sezione-immagine::after{ background: linear-gradient(251deg, rgb(26 19 16 / 52%) 0%, rgb(26 19 16 / 86%) 55%, rgba(26,19,16,.92) 100%), radial-gradient(70ch 46ch at 18% 12%, rgba(139,40,65,.34), transparent 68%); } } .sezione-immagine h2{color:#fff} .sezione-immagine .sezione-testa p{color:rgba(255,255,255,.78)} .sezione-immagine .sopratitolo{color:var(--acc-chiaro)} /* Passi numerati. Il numero è un tondo pieno, non una cifra appoggiata sulla linea: così resta leggibile sia su fondo chiaro sia sopra un'immagine. */ .passi{display:grid;gap:var(--s7);counter-reset:passo} @media (min-width:820px){ .passi{grid-template-columns:repeat(3,1fr);gap:var(--s7)} } .passo{position:relative;padding-top:var(--s6)} .passo::after{content:"";position:absolute;top:19px;left:0;right:0;height:1px; background:var(--linea)} .passo::before{ counter-increment:passo;content:counter(passo,decimal-leading-zero); position:absolute;top:0;left:0;z-index:1; width:38px;height:38px;display:grid;place-items:center; border-radius:var(--r-s);background:var(--acc);color:#fff; border:1px solid rgba(255,255,255,.22); font-family:var(--testo);font-size:13px;font-weight:700;letter-spacing:.02em; } /* Quando c'è un'icona prende il posto del numero */ .passo-ico{position:absolute;top:0;left:0;z-index:2; width:38px;height:38px;display:grid;place-items:center; border-radius:var(--r-s);background:var(--acc);color:#fff; border:1px solid rgba(255,255,255,.22)} .passo-ico svg{width:20px;height:20px} /* Le icone a campitura piena riempiono di più il riquadro: rimpicciolite un filo restano otticamente della stessa dimensione di quelle a tratto. */ .passo-ico svg[fill="currentColor"]{width:19px;height:19px} .passo:has(.passo-ico)::before{display:none} .passo h3{margin-top:18px;font-size:19px} .passo p{margin-top:var(--s2);font-size:15px;line-height:1.68;color:var(--ink-2)} .sezione-immagine .passo::after{background:rgba(255,255,255,.22)} .sezione-immagine .passo h3{color:#fff} .sezione-immagine .passo p{color:rgba(255,255,255,.76)} .richiamo{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; margin-top:var(--s7);padding:var(--s5); background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-g)} .richiamo>div{flex:1;min-width:260px} .richiamo b{display:block;font-family:var(--titolo);font-size:20px;line-height:1.3} .richiamo span{display:block;margin-top:var(--s1); font-size:14.5px;line-height:1.6;color:var(--ink-2)} /* ===================================================================== 7 · CATALOGO ===================================================================== */ .catalogo{display:grid;gap:var(--s6);align-items:start;padding-bottom:var(--s7)} @media (min-width:980px){ .catalogo{grid-template-columns:240px minmax(0,1fr);gap:var(--s7)} } .filtri{padding:var(--s5);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} @media (min-width:980px){ .filtri{position:sticky;top:calc(var(--appiccica) + var(--s5))} } .filtri h4{margin-bottom:var(--s3);font-family:var(--testo);font-size:11px; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)} .filtri .gruppo{padding-bottom:var(--s5);margin-bottom:var(--s5); border-bottom:1px solid var(--linea-2)} .filtri .gruppo:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0} .filtri a{display:flex;justify-content:space-between;gap:var(--s2); padding-block:6px;font-size:14.5px;line-height:1.45;color:var(--ink-2)} .filtri a:hover{color:var(--acc)} .filtri a.on{color:var(--acc);font-weight:600} .filtri a.figlia{padding-left:var(--s3);font-size:14px} .filtri a .q{font-size:12px;color:var(--tenue)} .filtri .prezzi{display:flex;align-items:center;gap:var(--s2)} .filtri .prezzi input{margin-top:0;padding:9px 11px;font-size:14.5px;min-width:0} .filtri .btn{width:100%;margin-top:var(--s3)} .filtri p{font-size:13.5px;line-height:1.6} .barra-cat{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap; margin-bottom:var(--s5)} .barra-cat .conteggio{font-size:14px;color:var(--tenue)} .barra-cat select{margin-left:auto;padding:9px 42px 9px 14px; border:1px solid var(--linea);border-radius:var(--r-s); background-color:var(--carta);font-size:14px} .apri-filtri{display:inline-flex} @media (min-width:980px){ .apri-filtri{display:none} } @media (max-width:979px){ .filtri{display:none} .filtri.on{display:block;position:fixed;inset:auto 0 0 0;z-index:70; max-height:82vh;overflow-y:auto;border-radius:var(--r-g) var(--r-g) 0 0; box-shadow:var(--ombra-alta);padding-bottom:var(--s7)} } .pagine{display:flex;justify-content:center;gap:var(--s1);flex-wrap:wrap; margin-top:var(--s7)} .pagine a,.pagine span{min-width:44px;height:44px;padding-inline:var(--s3); display:grid;place-items:center; border:1px solid var(--linea);border-radius:var(--r);background:var(--carta); font-size:14px;font-weight:600;color:var(--ink-2)} .pagine a:hover{border-color:var(--acc);color:var(--acc)} .pagine .on{background:var(--ink);border-color:var(--ink);color:var(--bk)} .pagine .salto{border:0;background:transparent;color:var(--tenue);min-width:24px} /* ===================================================================== 8 · SCHEDA PRODOTTO ===================================================================== */ .prodotto{display:grid;gap:var(--s6);align-items:start;padding-bottom:var(--s5)} @media (min-width:900px){ .prodotto{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:var(--s7)} } .galleria .grande{position:relative;aspect-ratio:4/3;overflow:hidden; border:1px solid var(--linea);border-radius:var(--r-g);background:var(--carta-2)} .galleria .grande img{width:100%;height:100%;object-fit:cover} .galleria .grande .segni{position:absolute;top:var(--s3);left:var(--s3); display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start} .miniature{display:flex;gap:var(--s2);margin-top:var(--s3); overflow-x:auto;padding-bottom:var(--s1);scrollbar-width:thin} .miniature button{flex:none;width:76px;aspect-ratio:1;padding:0;overflow:hidden; border:1px solid var(--linea);border-radius:var(--r);background:var(--carta-2);cursor:pointer; transition:border-color .16s,box-shadow .16s} .miniature button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-linea)} .miniature img{width:100%;height:100%;object-fit:cover} @media (min-width:900px){ .acquisto{position:sticky;top:calc(var(--appiccica) + var(--s5))} } .acquisto .cat-link{display:inline-block;margin-bottom:var(--s2); font-size:11.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--acc)} .acquisto h1{font-size:clamp(27px,3.9vw,38px)} .acquisto .occhiello{margin-top:var(--s3);max-width:52ch; font-size:16.5px;line-height:1.65;color:var(--ink-2)} .prezzo-grande{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap; margin-top:var(--s5)} .prezzo-grande .cifra{font-family:var(--titolo);font-size:34px;font-weight:600; letter-spacing:-.025em} .prezzo-grande .unita{font-size:14px;color:var(--tenue)} .prezzo-grande .barrato{font-size:16px;color:var(--tenue);text-decoration:line-through} .stima{margin-top:var(--s2);font-size:14.5px;line-height:1.65;color:var(--ink-2)} .stima b{font-family:var(--titolo);font-size:19px;color:var(--acc)} .stima span{font-size:13.5px;color:var(--tenue)} .modulo-acquisto{margin-top:var(--s5)} /* Il selettore delle date dentro il modulo di acquisto */ .date-prodotto{margin-bottom:var(--s5)} .opzione{margin-bottom:var(--s4)} .riga-aggiungi{display:flex;align-items:stretch;gap:var(--s3);flex-wrap:wrap; margin-top:var(--s5)} .riga-aggiungi .btn{flex:1;min-width:200px} .contatore{display:flex;align-items:stretch;flex:none;overflow:hidden; border:1px solid var(--linea);border-radius:var(--r);background:var(--carta)} .contatore button{width:44px;border:0;background:transparent; font-size:19px;color:var(--ink-2);cursor:pointer;transition:background .15s} .contatore button:hover{background:var(--carta-2);color:var(--ink)} .contatore input{width:48px;border:0;background:transparent;text-align:center; font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums; -moz-appearance:textfield;appearance:textfield} .contatore input::-webkit-outer-spin-button, .contatore input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .nota-piccola{margin-top:var(--s3);font-size:13px;line-height:1.6;color:var(--tenue)} .cambio-modo{display:flex;align-items:center;gap:var(--s2); margin-top:var(--s5);padding:14px 17px; border:1px dashed var(--acc-linea);border-radius:var(--r);background:var(--acc-tenue); font-size:14px;font-weight:600;line-height:1.45;color:var(--acc)} .cambio-modo:hover{background:#fbe9ee} .cambio-modo svg{width:16px;height:16px;flex:none;margin-left:auto} .pratiche{margin-top:var(--s6);padding-top:var(--s5);list-style:none; border-top:1px solid var(--linea)} .pratiche li{padding-block:var(--s2);font-size:14.5px;line-height:1.65;color:var(--ink-2)} .pratiche li+li{border-top:1px solid var(--linea-2)} .pratiche li b{color:var(--ink)} .dettagli{display:grid;gap:var(--s7);margin-top:var(--s5); padding-block:var(--s7);border-top:1px solid var(--linea)} @media (min-width:860px){ .dettagli{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} } .dettagli>.testo,.dettagli>.tecnica{min-width:0} .dettagli h2{margin-bottom:var(--s4);font-size:24px} .prosa{max-width:66ch;font-size:16px;line-height:1.8;color:var(--ink-2)} .tecnica dl{margin:0} .tecnica dl>div{display:flex;justify-content:space-between;gap:var(--s4); padding-block:var(--s3);border-bottom:1px solid var(--linea-2);font-size:14.5px} .tecnica dl>div:last-child{border-bottom:0} .tecnica dt{flex:none;color:var(--tenue)} .tecnica dd{margin:0;text-align:right;font-weight:500} /* Calendario */ .calendario-sez{padding-block:var(--s7);border-top:1px solid var(--linea);scroll-margin-top:var(--appiccica)} .mese-nav{display:flex;gap:var(--s2);margin-left:auto} .mesi{display:grid;gap:var(--s5)} @media (min-width:720px){ .mesi{grid-template-columns:repeat(2,1fr)} } @media (min-width:1060px){ .mesi{grid-template-columns:repeat(3,1fr)} } .mese{padding:var(--s4);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} .mese-tit{margin-bottom:var(--s3);font-family:var(--titolo); font-size:18px;text-transform:capitalize} .mese-testa,.mese-griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .mese-testa span{padding-bottom:var(--s2);text-align:center; font-size:10.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--tenue)} .mese-griglia .g{aspect-ratio:1;display:grid;place-items:center; border-radius:var(--r-s);font-size:13px;font-variant-numeric:tabular-nums} .mese-griglia .g.libero{background:var(--ok-tenue);color:var(--ok);font-weight:600} .mese-griglia .g.pieno{background:var(--no-tenue);color:var(--no);font-weight:600; text-decoration:line-through;text-decoration-thickness:1.5px} .mese-griglia .g.passato{color:#cec2b1} .mese-griglia .g.fuori{opacity:0} .mese-griglia .g.oggi{box-shadow:inset 0 0 0 2px var(--ink)} .legenda-cal{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap; margin-top:var(--s5);font-size:13px;color:var(--tenue)} .legenda-cal span{display:inline-flex;align-items:center;gap:var(--s2)} .legenda-cal i{width:14px;height:14px;border-radius:var(--r-s);display:block} .legenda-cal i.libero{background:var(--ok-tenue);border:1px solid var(--ok-linea)} .legenda-cal i.pieno{background:var(--no-tenue);border:1px solid var(--no-linea)} .legenda-cal i.passato{background:#f1eae0} .legenda-cal .nota{color:var(--ink-2);font-style:italic} /* ===================================================================== 9 · CARRELLO ===================================================================== */ .blocco-carrello{padding-bottom:var(--s7);margin-bottom:var(--s7); border-bottom:1px solid var(--linea)} .blocco-carrello:last-of-type{padding-bottom:var(--s5);margin-bottom:0;border-bottom:0} .blocco-testa{display:flex;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s5)} .blocco-testa h2{font-size:26px} .svuota{border:0;background:transparent;color:var(--tenue);font-size:13.5px; text-decoration:underline;text-underline-offset:3px;cursor:pointer} .svuota:hover{color:var(--no)} .date-carrello{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3); padding:var(--s4) var(--s5);margin-bottom:var(--s4); background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r)} /* Stesso trattamento di .lato-tit nella barra di ricerca: le due etichette dicono la stessa cosa e devono sembrare la stessa cosa. */ .date-carrello .et{display:block;width:100%; font-family:var(--testo);font-size:11.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--tenue)} .date-carrello input{width:auto;margin-top:0;padding:9px 12px; border-radius:var(--r-s);background:var(--carta);font-size:14.5px} .date-carrello .esito{margin-left:auto;font-size:13.5px;color:var(--tenue)} .date-carrello .esito b{color:var(--acc)} .carrello-corpo{display:grid;gap:var(--s5);align-items:start} @media (min-width:940px){ .carrello-corpo{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s6)} } .righe-carrello{display:grid;gap:var(--s3)} .riga-c{display:grid;gap:var(--s4);align-items:center;padding:var(--s4); background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-g); grid-template-columns:84px minmax(0,1fr) auto auto 36px; grid-template-areas:"foto dati qta tot via"} .riga-c .foto{grid-area:foto} .riga-c .dati{grid-area:dati} .riga-c .qta-form{grid-area:qta} .riga-c .totale-riga{grid-area:tot} .riga-c .via-form{grid-area:via} @media (max-width:660px){ .riga-c{grid-template-columns:72px minmax(0,1fr) 36px; grid-template-areas:"foto dati via" "foto qta tot"; row-gap:var(--s3);align-items:start} .riga-c .qta-form,.riga-c .totale-riga{align-self:center} .riga-c .totale-riga{text-align:right} } .riga-c.guasta{border-color:var(--no-linea);background:var(--no-tenue)} .riga-c .foto{display:block;width:100%;aspect-ratio:1;overflow:hidden; border-radius:var(--r);background:var(--carta-2)} .riga-c .foto img{width:100%;height:100%;object-fit:cover} .riga-c .dati{min-width:0;display:flex;flex-direction:column;gap:3px} .riga-c .nome{font-family:var(--titolo);font-size:17px;font-weight:600;line-height:1.3} .riga-c .nome:hover{color:var(--acc)} .riga-c .var{font-size:12.5px;font-weight:600;color:var(--acc)} .riga-c .unit{font-size:13px;line-height:1.5;color:var(--tenue)} .riga-c .guaio{margin-top:var(--s1);font-size:12.5px;font-weight:600;color:var(--no)} .riga-c .qta-form input{width:68px;margin:0;padding:9px; border:1px solid var(--linea);border-radius:var(--r-s);background:var(--bk); text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums} .riga-c .totale-riga{font-family:var(--titolo);font-size:18px;font-weight:600;white-space:nowrap} .riga-c .via-form button{width:36px;height:36px;display:grid;place-items:center; border:0;border-radius:var(--r-s);background:transparent;color:var(--tenue);cursor:pointer} .riga-c .via-form button:hover{background:var(--no-tenue);color:var(--no)} .riga-c .via-form svg{width:17px;height:17px} /* Riepiloghi laterali */ .riepilogo-c,.cassa-riepilogo{padding:var(--s5);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g);box-shadow:var(--ombra)} @media (min-width:940px){ .riepilogo-c,.cassa-riepilogo{position:sticky;top:calc(var(--appiccica) + var(--s5))} } .riepilogo-c h3,.cassa-riepilogo h3{margin-bottom:var(--s4);font-size:19px} .riepilogo-c dl,.cassa-riepilogo dl{display:grid;grid-template-columns:1fr auto; gap:var(--s3) var(--s4);font-size:14.5px} .riepilogo-c dt,.cassa-riepilogo dt{color:var(--ink-2)} .riepilogo-c dd,.cassa-riepilogo dd{margin:0;text-align:right;font-weight:600; font-variant-numeric:tabular-nums} .riepilogo-c .lieve,.cassa-riepilogo .lieve{font-size:13.5px;font-weight:400;color:var(--tenue)} .gratis{color:var(--ok);font-weight:700} .soglia{margin-top:var(--s3);padding:10px 13px;border-radius:var(--r-s); background:var(--ok-tenue);font-size:13px;line-height:1.5;color:var(--ok)} .acconto{display:flex;align-items:baseline;gap:var(--s3); margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linea)} .acconto span{font-size:14.5px;color:var(--ink-2)} .acconto b{margin-left:auto;font-family:var(--titolo);font-size:26px;font-weight:600; font-variant-numeric:tabular-nums} .riepilogo-c .btn,.cassa-riepilogo .btn{width:100%;margin-top:var(--s4)} .minuta{margin-top:var(--s3);font-size:12.5px;line-height:1.6;color:var(--tenue)} .continua{display:block;margin-top:var(--s4);text-align:center; font-size:14px;font-weight:600;color:var(--acc)} .mini-righe{display:grid;gap:var(--s3);max-height:290px;overflow-y:auto; padding-bottom:var(--s4);margin-bottom:var(--s4); list-style:none;border-bottom:1px solid var(--linea)} .mini-righe li{display:grid;grid-template-columns:46px minmax(0,1fr) auto; gap:var(--s3);align-items:center} .mini-righe img{width:46px;height:46px;object-fit:cover; border-radius:var(--r-s);background:var(--carta-2)} .mini-righe .n{min-width:0;font-size:13.5px;line-height:1.4} .mini-righe .n small{display:block;font-size:12px;color:var(--tenue)} .mini-righe .p{font-size:13.5px;font-weight:600;white-space:nowrap; font-variant-numeric:tabular-nums} /* ===================================================================== 10 · CASSA ===================================================================== */ .cassa{display:grid;gap:var(--s5);align-items:start;padding-bottom:var(--s7)} @media (min-width:940px){ .cassa{grid-template-columns:minmax(0,1fr) 350px;gap:var(--s6)} } .cassa-colonna{display:grid;gap:var(--s4)} .passo-c{padding:var(--s5);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} @media (min-width:640px){ .passo-c{padding:var(--s6)} } .passo-c h2{display:flex;align-items:center;gap:var(--s3);font-size:21px} .passo-c h2 .n{width:30px;height:30px;flex:none;display:grid;place-items:center; border-radius:50%;background:var(--ink);color:var(--bk); font-family:var(--testo);font-size:13.5px;font-weight:700} .passo-c .spiega{margin-top:var(--s3);font-size:14.5px;line-height:1.65;color:var(--tenue)} .passo-c .spiega a{color:var(--acc);font-weight:600} .passo-c .spiega+.griglia-c,.passo-c .spiega+.scelte-c, .passo-c .spiega+.linguette,.passo-c h2+.griglia-c, .passo-c h2+.scelte-c,.passo-c h2+.riquadro-date{margin-top:var(--s5)} .passo-c .griglia-c+.griglia-c{margin-top:var(--s4)} .passo-c .scelte-c+.griglia-c,.passo-c .griglia-c+.scelte-c, .passo-c .griglia-c+.interruttore-c,.passo-c .interruttore-c+.griglia-c{margin-top:var(--s5)} .linguette{display:flex;gap:var(--s1);padding:var(--s1); background:var(--carta-2);border-radius:var(--r)} .linguette button{flex:1;padding:10px;border:0;border-radius:var(--r-s); background:transparent;font-size:14px;font-weight:600;color:var(--tenue);cursor:pointer; transition:background .16s,color .16s} .linguette button.on{background:var(--carta);color:var(--ink);box-shadow:var(--ombra)} .scelte-c{display:grid;gap:var(--s3)} .scelta-c{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3); align-items:start;padding:var(--s4) var(--s4); border:1px solid var(--linea);border-radius:var(--r);background:var(--bk); cursor:pointer;transition:border-color .16s,background .16s} .scelta-c:hover{border-color:#d7ccbc} .scelta-c:has(input:checked){border-color:var(--acc);background:var(--acc-tenue)} .scelta-c input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--acc)} .scelta-c b{display:block;font-size:15px;font-weight:600;line-height:1.4} .scelta-c small{display:block;margin-top:3px;font-size:13px;line-height:1.55;color:var(--tenue)} .interruttore-c{display:flex;align-items:center;gap:var(--s3);padding:13px var(--s4); border:1px solid var(--linea);border-radius:var(--r);background:var(--bk);cursor:pointer} .interruttore-c input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--acc)} .interruttore-c span{font-size:14.5px;font-weight:500} /* Caselle multiple */ .scelte{display:grid;gap:var(--s2)} @media (min-width:700px){ .scelte{grid-template-columns:1fr 1fr} } .scelta{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;column-gap:var(--s3);padding:12px var(--s4); border:1px solid var(--linea);border-radius:var(--r);background:var(--bk); cursor:pointer;transition:border-color .16s,background .16s} .scelta:hover{border-color:#d7ccbc} .scelta:has(input:checked){border-color:var(--acc);background:var(--acc-tenue)} .scelta input{width:18px;height:18px;margin:0;accent-color:var(--acc)} .scelta .et{min-width:0;font-size:14px;line-height:1.45} .scelta .et b{display:block;font-weight:600} .scelta .et small{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--tenue)} .scelta .extra{justify-self:end;white-space:nowrap;padding:3px 10px; border:1px solid var(--acc-linea);border-radius:var(--r-p);background:var(--carta); font-size:12px;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums} .riquadro-date{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; padding:var(--s4) var(--s5); background:var(--acc-tenue);border:1px solid var(--acc-linea);border-radius:var(--r)} .riquadro-date>div{flex:1;min-width:190px} .riquadro-date .et{display:block;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--acc)} .riquadro-date b{display:block;margin-top:3px;font-family:var(--titolo);font-size:19px} .riquadro-date .sotto{display:block;font-size:13px;color:var(--ink-2)} .sotto-titolo{margin-top:var(--s6);padding-top:var(--s5); border-top:1px solid var(--linea-2); font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--tenue)} /* ===================================================================== 11 · CONFERMA E PAGAMENTO ===================================================================== */ .conferma{max-width:700px;margin:var(--s3) auto var(--s8)} .sigillo{width:62px;height:62px;margin-bottom:var(--s5);display:grid;place-items:center; border-radius:50%;background:var(--ok-tenue);color:var(--ok)} .sigillo svg{width:30px;height:30px} .conferma h1{margin-bottom:var(--s3);font-size:clamp(30px,4.8vw,44px)} .conferma .occhiello{font-size:17px;line-height:1.7;color:var(--ink-2)} .cifra-conferma{margin-top:var(--s6);padding:var(--s5);text-align:center; background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-g)} .cifra-conferma span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--tenue)} .cifra-conferma b{display:block;margin-top:var(--s2);font-family:var(--titolo); font-size:40px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .cifra-conferma small{display:block;margin-top:var(--s1);font-size:13.5px;color:var(--tenue)} .cifra-conferma.saldata{background:var(--ok-tenue);border-color:var(--ok-linea)} .cifra-conferma.saldata b{color:var(--ok)} .istruzioni,.prossimi{margin-top:var(--s7)} .istruzioni h2,.prossimi h2{margin-bottom:var(--s3);font-size:22px} .istruzioni .spiega{margin-bottom:var(--s4);font-size:15px;line-height:1.7;color:var(--ink-2)} .copiabili{display:grid;gap:var(--s2)} .copiabile{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto; gap:var(--s3);align-items:center;padding:var(--s3) var(--s4); background:var(--carta);border:1px solid var(--linea);border-radius:var(--r)} @media (max-width:580px){ .copiabile{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s1)} .copiabile .et{grid-column:1/-1} } .copiabile .et{font-size:11.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--tenue)} .copiabile code{min-width:0;font-family:var(--mono);font-size:14.5px;font-weight:600; word-break:break-all;line-height:1.5} .copiabile button{padding:9px 15px;border:1px solid var(--linea);border-radius:var(--r-s); background:var(--bk);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer; transition:border-color .16s,color .16s,background .16s} .copiabile button:hover{border-color:var(--acc);color:var(--acc)} .copiabile button.fatto{background:var(--ok-tenue);border-color:var(--ok-linea);color:var(--ok)} .mappa-riquadro{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; padding:var(--s5);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} .mappa-riquadro>div{flex:1;min-width:210px} .mappa-riquadro .et{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--tenue)} .mappa-riquadro b{display:block;margin-top:var(--s1);font-size:16px;line-height:1.45} .mappa-riquadro .tel{display:block;margin-top:2px;font-size:14px;color:var(--tenue)} #ppRiquadro{padding:var(--s5);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} #ppPulsanti{min-height:54px} #ppNota{margin-top:var(--s3);text-align:center} .alternativa{margin-top:var(--s5);padding:var(--s4) var(--s5); background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r)} .alternativa summary{font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer} .alternativa summary:hover{color:var(--acc)} .alternativa[open] summary{margin-bottom:var(--s2)} .prossimi ol{padding-left:var(--s5);display:grid;gap:var(--s3)} .prossimi li{font-size:15px;line-height:1.7;color:var(--ink-2)} .prossimi li b{color:var(--ink)} .azioni-conferma{display:flex;gap:var(--s3);flex-wrap:wrap; margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--linea)} /* ===================================================================== 12 · ACCESSO E AREA RISERVATA ===================================================================== */ .scheda-accesso{max-width:460px;margin:var(--s7) auto var(--s9);padding:var(--s6); background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-g); box-shadow:var(--ombra)} .scheda-accesso h1{margin-bottom:var(--s2);font-size:29px} .scheda-accesso .occhiello{margin-bottom:var(--s5); font-size:15px;line-height:1.7;color:var(--ink-2)} .modulo-accesso label{margin-bottom:var(--s4)} .modulo-accesso .coppia{display:grid;gap:0 var(--s3)} @media (min-width:460px){ .modulo-accesso .coppia{grid-template-columns:1fr 1fr} } .modulo-accesso .btn{width:100%;margin-top:var(--s2)} .modulo-accesso .minuta{margin-bottom:var(--s4)} .sotto-accesso{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap; margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--linea-2); font-size:14px;color:var(--tenue)} .sotto-accesso a{color:var(--acc);font-weight:600} .area-testa{display:flex;align-items:flex-end;gap:var(--s5);flex-wrap:wrap; margin-bottom:var(--s5)} .area-testa h1{font-size:clamp(28px,4.2vw,38px)} .area-testa p{margin-top:var(--s2);font-size:14.5px;color:var(--tenue)} .area-testa .btn{margin-left:auto} .ancore{display:flex;gap:var(--s2);flex-wrap:wrap;overflow-x:auto; padding-bottom:var(--s1);margin-bottom:var(--s6);scrollbar-width:none} .ancore::-webkit-scrollbar{display:none} .ancore a{padding:8px 16px;border:1px solid var(--linea);border-radius:var(--r-p); background:var(--carta);font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap; transition:border-color .16s,color .16s} .ancore a:hover{border-color:var(--acc);color:var(--acc)} .evidenza-evento{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap; padding:var(--s5) var(--s6);margin-bottom:var(--s6); background:var(--acc-tenue);border:1px solid var(--acc-linea);border-radius:var(--r-g)} .evidenza-evento>div{flex:1;min-width:230px} .evidenza-evento .et{display:block;font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--acc)} .evidenza-evento b{display:block;margin-top:var(--s1);font-family:var(--titolo); font-size:26px;line-height:1.2} .evidenza-evento .sotto{display:block;margin-top:3px;font-size:14px;color:var(--ink-2)} .evidenza-evento .conto{display:inline-block;margin-top:var(--s3);padding:4px 13px; border-radius:var(--r-p);background:var(--carta); font-size:12.5px;font-weight:700;color:var(--acc)} .sez-area{padding-block:var(--s7);border-top:1px solid var(--linea); scroll-margin-top:calc(var(--appiccica) + var(--s4))} .sez-area h2{margin-bottom:var(--s4);font-size:24px} .spiega-area{margin:calc(var(--s3) * -1) 0 var(--s5);font-size:14.5px;color:var(--tenue)} .lista-area{display:grid;gap:var(--s3)} .carta-area{display:grid;grid-template-columns:62px minmax(0,1fr);gap:var(--s4); padding:var(--s4);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} @media (min-width:640px){ .carta-area{padding:var(--s5);gap:var(--s5)} } .carta-area .data-blocco{align-self:start;padding:var(--s2) 0 10px;text-align:center; background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r)} .carta-area .data-blocco .g{display:block;font-family:var(--titolo);font-size:21px; font-weight:600;line-height:1;font-variant-numeric:tabular-nums} .carta-area .data-blocco .m{display:block;margin-top:2px;font-size:10.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)} .carta-area .data-blocco .a{display:block;font-size:10px;color:var(--tenue)} .carta-area .corpo{min-width:0;display:flex;flex-direction:column;gap:var(--s1)} .carta-area .riga-alta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap} .carta-area .riga-alta b{font-size:15px;letter-spacing:.03em;font-variant-numeric:tabular-nums} .carta-area .dettaglio{font-size:13.5px;line-height:1.6;color:var(--tenue)} .carta-area .soldi{margin-top:var(--s1);font-family:var(--titolo);font-size:18px;font-weight:600} .carta-area .soldi em{font-family:var(--testo);font-style:normal;font-size:13px; font-weight:500;color:var(--acc)} .carta-area .soldi em.ok{color:var(--ok)} .carta-area .azioni-area{display:flex;gap:var(--s5);flex-wrap:wrap; margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linea-2)} .carta-area .azioni-area a{font-size:13.5px;font-weight:600;color:var(--ink-2)} .carta-area .azioni-area a:hover{color:var(--acc)} .carta-area .azioni-area a.paga{color:var(--acc)} .bollino{padding:3px 11px;border-radius:var(--r-p); font-size:11.5px;font-weight:700;line-height:1.5;white-space:nowrap} .bollino.attesa{background:#fdf5e7;color:#8d5b1c} .bollino.corso{background:#eef4fb;color:#22578f} .bollino.chiuso{background:var(--ok-tenue);color:var(--ok)} .bollino.annullato{background:var(--no-tenue);color:var(--no)} .chip-area{padding:3px 11px;border:1px solid;border-radius:var(--r-p); font-size:11.5px;font-weight:600;line-height:1.5} /* I moduli dell'area sono schede, non campi appoggiati sul fondo */ .modulo-area{padding:var(--s5);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} @media (min-width:640px){ .modulo-area{padding:var(--s6)} } .modulo-area h3{margin-bottom:var(--s4);padding-bottom:var(--s3); border-bottom:1px solid var(--linea-2);font-size:17px} .modulo-area .btn{margin-top:var(--s5)} .due-moduli{display:grid;gap:var(--s4);align-items:start} @media (min-width:900px){ .due-moduli{grid-template-columns:1fr 1fr;gap:var(--s5)} } .solo-nuovo{display:block} /* ===================================================================== 13 · ELEMENTI COMUNI ===================================================================== */ .avviso{padding:14px var(--s4);margin-bottom:var(--s4); border:1px solid;border-radius:var(--r);font-size:14.5px;line-height:1.65} .avviso:last-child{margin-bottom:0} .avviso-ok{background:var(--ok-tenue);border-color:var(--ok-linea);color:var(--ok)} .avviso-err{background:var(--no-tenue);border-color:var(--no-linea);color:var(--no)} .avviso-info{background:var(--acc-tenue);border-color:var(--acc-linea);color:var(--acc)} .avviso b{display:block;margin-bottom:2px} .avviso code{padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.6); font-family:var(--mono);font-size:12.5px} .niente{padding:var(--s8) var(--s5);text-align:center; background:var(--carta);border:1px dashed var(--linea);border-radius:var(--r-g)} .niente svg{width:44px;height:44px;margin:0 auto var(--s4);color:#d6cabb;stroke-width:1.3} .niente h3{margin-bottom:var(--s2);font-size:21px} .niente p{max-width:48ch;margin:0 auto var(--s5);font-size:15px; line-height:1.7;color:var(--tenue)} .brindello{position:fixed;left:50%;bottom:var(--s5);z-index:100; transform:translate(-50%,14px);padding:13px 22px;border-radius:var(--r-p); background:var(--ink);color:var(--bk);font-size:14px;font-weight:500; box-shadow:var(--ombra-alta);opacity:0;pointer-events:none;transition:all .25s} .brindello.on{opacity:1;transform:translate(-50%,0)} /* ===================================================================== 14 · FONDO PAGINA ===================================================================== */ .fondo{margin-top:var(--s9);padding-block:var(--s8) var(--s5); background:var(--ink);color:#cec4b7} .fondo a{color:#cec4b7;transition:color .15s} .fondo a:hover{color:#fff} .fondo-griglia{display:grid;gap:var(--s6)} /* L'ultima colonna è più larga delle due centrali: contiene indirizzi email e vie, che sono più lunghi di "Carrello" o "Come funziona". */ @media (min-width:780px){ .fondo-griglia{grid-template-columns:1.5fr .9fr .9fr 1.4fr;gap:var(--s6)} } @media (min-width:1040px){ .fondo-griglia{gap:var(--s7)} } .fondo h4{margin-bottom:var(--s4);font-family:var(--testo);font-size:11px; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8c8074} .fondo ul{padding:0;list-style:none} .fondo li{padding-block:5px;font-size:14.5px} .fondo .marchio b{color:#fff} .fondo .info{margin-top:var(--s4);max-width:44ch; font-size:14px;line-height:1.8;color:#a99d90} .fondo-basso{display:flex;gap:var(--s4);flex-wrap:wrap; margin-top:var(--s7);padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#8c8074} .fondo-basso .destra{margin-left:auto} /* ===================================================================== 15 · STAMPA E ACCESSIBILITÀ ===================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } } @media print{ .testa,.barra-periodo,.fondo,.cassetto,.velo,.cerca-velo,.brindello, .ancore,.azioni-conferma,.btn{display:none !important} body{background:#fff} .contenitore{max-width:none;padding:0} } /* ===================================================================== 16 · ORIENTAMENTO — sapere sempre dove si è e cosa si sta guardando ===================================================================== */ /* Intestazione di pagina */ .testa-pagina{margin-bottom:var(--s5)} .testa-pagina h1{font-size:clamp(28px,4.4vw,42px)} .testa-pagina .quanti{margin-top:var(--s2);font-size:14.5px;color:var(--tenue)} .testa-pagina .intro{margin-top:var(--s3);max-width:62ch; font-size:16px;line-height:1.7;color:var(--ink-2)} /* Sottocategorie: la via più naturale per scendere di un livello */ .sotto-raccolte{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)} .sotto-raccolte a{padding:9px 16px;border:1px solid var(--linea);border-radius:var(--r-p); background:var(--carta);font-size:14px;font-weight:500;color:var(--ink-2); transition:border-color .16s,color .16s,background .16s} .sotto-raccolte a:hover{border-color:var(--acc);background:var(--acc-tenue);color:var(--acc)} /* Striscia della data: ricorda il filtro attivo senza rifare la ricerca */ .striscia-data{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap; padding:12px var(--s4);margin-bottom:var(--s3); border:1px solid var(--linea);border-radius:var(--r);background:var(--carta-2); font-size:14px;color:var(--ink-2)} .striscia-data.attiva{border-color:var(--acc-linea);background:var(--acc-tenue)} .striscia-data svg{width:17px;height:17px;flex:none;color:var(--acc)} .striscia-data .testo{flex:1;min-width:180px;line-height:1.5} .striscia-data b{color:var(--acc)} .striscia-data .collega{padding:0;border:0;background:transparent; font:inherit;font-weight:600;color:var(--acc);cursor:pointer; text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .striscia-data .collega.tenue{color:var(--tenue)} /* Il modulo che porta le date non si vede: la striscia apre il calendario direttamente, e questo serve solo a trasportare i valori. */ .modulo-date-nascosto{position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Invito a passare all'altra modalità */ .invito-modo{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; margin-top:var(--s7);padding:var(--s5); border:1px dashed var(--acc-linea);border-radius:var(--r-g);background:var(--acc-tenue)} .invito-modo>div{flex:1;min-width:240px} .invito-modo b{display:block;font-family:var(--titolo);font-size:19px;line-height:1.3} .invito-modo span{display:block;margin-top:var(--s1); font-size:14.5px;line-height:1.6;color:var(--ink-2)} /* Scelta noleggio/vendita nel menu a scomparsa */ .modo-cassetto{display:grid;gap:var(--s2);margin-bottom:var(--s3)} .modo-cassetto a{display:block;padding:13px 15px; border:1px solid var(--linea);border-radius:var(--r);background:var(--bk); font-size:15px;font-weight:600;color:var(--ink)} .modo-cassetto a small{display:block;margin-top:2px; font-size:12.5px;font-weight:400;color:var(--tenue)} .modo-cassetto a.on{border-color:var(--acc);background:var(--acc-tenue);color:var(--acc)} .modo-cassetto a.on small{color:var(--acc)} /* Pannello dei filtri: su telefono deve dire cos'è e come si chiude */ .filtri-testa{display:none} .filtri-fondo{display:none} .velo-filtri{position:fixed;inset:0;z-index:69;background:rgba(36,31,28,.46); opacity:0;pointer-events:none;transition:opacity .25s} .velo-filtri.on{opacity:1;pointer-events:auto} @media (max-width:979px){ .filtri.on{padding-top:0} .filtri-testa{display:flex;align-items:flex-start;gap:var(--s3); position:sticky;top:0;z-index:2; padding:var(--s5) var(--s5) var(--s4);margin:0 calc(var(--s5) * -1) var(--s5); background:var(--carta);border-bottom:1px solid var(--linea)} .filtri-testa>div{flex:1;min-width:0} .filtri-testa b{display:block;font-family:var(--titolo);font-size:20px;line-height:1.25} .filtri-testa span{display:block;margin-top:3px; font-size:13px;line-height:1.5;color:var(--tenue)} .chiudi-filtri{width:40px;height:40px;flex:none;display:grid;place-items:center; border:1px solid var(--linea);border-radius:var(--r);background:var(--bk); font-size:24px;line-height:1;color:var(--ink-2);cursor:pointer} .chiudi-filtri:hover{border-color:var(--acc);color:var(--acc)} .filtri-fondo{display:block;position:sticky;bottom:0; padding:var(--s4) var(--s5) var(--s5);margin:var(--s5) calc(var(--s5) * -1) 0; background:var(--carta);border-top:1px solid var(--linea)} .filtri-fondo .btn{width:100%} } /* Sezione a fondo alternato: due sezioni chiare di fila si fondono e il lettore non percepisce il cambio di argomento. */ .sezione-alt{background:var(--carta-2); border-block:1px solid var(--linea)} /* Intestazione su telefono: le icone si allineano al bordo del contenuto, non al bordo dello schermo, e il marchio recupera lo spazio. */ @media (max-width:760px){ .testa-riga{gap:var(--s2)} /* Il pulsante è 42px con un'icona di 20: 11px di aria per lato. Con questo margine il tratto dell'icona finisce esattamente sulla stessa verticale del testo sottostante. */ .azioni-testa{margin-right:-11px} .marchio{padding-right:var(--s1)} } @media (max-width:480px){ .ico-btn{width:40px;height:40px} .azioni-testa{margin-right:-10px} } /* ===================================================================== 17 · INTESTAZIONE SU TELEFONO Restano hamburger e carrello: tutto il resto passa nel cassetto, così il nome del marchio ha lo spazio che gli serve. ===================================================================== */ @media (max-width:760px){ .solo-largo{display:none} .azioni-testa{margin-right:0;gap:var(--s3)} .testa-riga{gap:var(--s3)} .marchio b{font-size:17.5px} } @media (max-width:480px){ .ico-btn{width:38px;height:38px} .marchio img{height:32px} } /* L'hamburger è largo quanto il suo tratto: niente cornice né margine a sinistra, così le tre linee cadono sulla verticale del contenuto. Vale fino a 1040px, dove compare il menu esteso. */ @media (max-width:1040px){ .ico-btn.menu{width:22px;height:22px;margin-right:2px;border:0;padding:0} .ico-btn.menu svg{width:22px;height:22px} .ico-btn.menu:hover{background:transparent;color:var(--acc)} } /* Le azioni dentro il cassetto */ .azioni-cassetto{display:grid;gap:var(--s2); padding-bottom:var(--s5);border-bottom:1px solid var(--linea-2)} .azioni-cassetto a,.azioni-cassetto button{ display:flex;align-items:center;gap:var(--s3);width:100%; padding:12px 14px;border:1px solid var(--linea);border-radius:var(--r); background:var(--bk);font:inherit;font-size:15px;font-weight:500; color:var(--ink);text-align:left;cursor:pointer} .azioni-cassetto a:hover,.azioni-cassetto button:hover{ border-color:var(--acc);background:var(--acc-tenue);color:var(--acc)} .azioni-cassetto svg{width:19px;height:19px;flex:none;stroke-width:1.7} .azioni-cassetto span{flex:1;min-width:0} .azioni-cassetto em{flex:none;padding:1px 9px;border-radius:var(--r-p); background:var(--acc);color:#fff;font-style:normal; font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums} .azioni-cassetto a:hover em{background:var(--acc-scuro)} .cassetto-testa{display:flex;align-items:center;gap:var(--s3); margin-bottom:var(--s5)} .cassetto-testa b{flex:1;min-width:0;font-family:var(--titolo);font-size:19px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Le azioni del cassetto servono su ogni schermo dove il cassetto esiste */ @media (min-width:1041px){ .azioni-cassetto{display:none} } /* Contatti nel fondo pagina: icona e testo allineati. La misura è fissata su tutte le icone del fondo, non solo su quelle dei contatti: un SVG senza width e height dichiarati, dentro un contenitore flessibile, si espande fino a riempire lo spazio. */ .fondo svg{width:17px;height:17px;flex:none} .fondo .contatti li{padding-block:6px} .fondo .contatti a{display:flex;align-items:flex-start;gap:10px;line-height:1.5} .fondo .contatti a svg{width:17px;height:17px;flex:none;margin-top:3px; color:var(--acc-chiaro);transition:color .15s} .fondo .contatti a:hover svg{color:#fff} .fondo .contatti span{min-width:0;word-break:break-word} /* ===================================================================== 18 · MENU A TENDINA DEL CATALOGO Una voce sola: con venti categorie una riga di voci non regge. ===================================================================== */ .nav-p .freccina{width:14px;height:14px;margin-left:2px;opacity:.6; transition:transform .18s} .nav-p>li>a{display:inline-flex;align-items:center;gap:4px} .nav-p>li:hover>a .freccina,.nav-p>li:focus-within>a .freccina{transform:rotate(180deg)} .giu-largo{min-width:min(680px,86vw);padding:var(--s5); display:grid;gap:var(--s4) var(--s5); grid-template-columns:repeat(var(--colonne,2),minmax(0,1fr))} .giu-gruppo{min-width:0} .giu-gruppo .capo{padding:0 0 6px;font-size:14.5px;font-weight:600; color:var(--ink);border-bottom:1px solid var(--linea-2);margin-bottom:5px} .giu-gruppo .capo:hover{background:transparent;color:var(--acc)} .giu-gruppo .figlia{padding:5px 0;font-size:13.5px;color:var(--tenue)} .giu-gruppo .figlia:hover{background:transparent;color:var(--acc)} .giu-gruppo .altro{font-style:italic} .giu-tutto{grid-column:1/-1;display:flex;align-items:center;gap:7px; margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--linea-2); font-size:14px;font-weight:600;color:var(--acc)} .giu-tutto:hover{background:transparent} .giu-tutto svg{width:15px;height:15px} /* ===================================================================== 19 · MARCHIO: LOGO, NOME O ENTRAMBI ===================================================================== */ .marchio img{height:36px;width:auto;flex:none} .marchio-logo img{height:40px} /* Su telefono "entrambi" mostra il solo logo: affiancati non ci stanno, e il nome finirebbe troncato dopo tre lettere. */ @media (max-width:600px){ .marchio-entrambi b{display:none} .marchio-entrambi img{height:34px} } /* ===================================================================== 20 · NUOVO O USATO — solo in modalità vendita ===================================================================== */ .due-strade{display:grid;gap:var(--s5)} @media (min-width:820px){ .due-strade{grid-template-columns:1fr 1fr;gap:var(--s6)} } .strada{padding:var(--s6);background:var(--carta); border:1px solid var(--linea);border-radius:var(--r-g)} .strada h3{margin-top:var(--s3);font-size:21px} .strada p{margin-top:var(--s3);font-size:15px;line-height:1.7;color:var(--ink-2)} .strada ul{margin-top:var(--s4);padding-top:var(--s4); padding-left:0;list-style:none;border-top:1px solid var(--linea-2)} .strada li{position:relative;padding:6px 0 6px 22px; font-size:14.5px;line-height:1.55;color:var(--ink-2)} .strada li::before{content:"";position:absolute;left:2px;top:14px; width:7px;height:7px;border-radius:50%;background:var(--acc-linea); border:1px solid var(--acc)} .tag-strada{display:inline-block;padding:4px 13px;border-radius:var(--r-p); font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .tag-strada.nuovo{background:var(--ok-tenue);color:var(--ok); border:1px solid var(--ok-linea)} .tag-strada.usato{background:#fdf6e9;color:var(--oro);border:1px solid #f0e2c6} /* ===================================================================== 22 · CORREZIONI SU SCHERMO STRETTO ===================================================================== */ /* La striscia della data respira di più, ovunque */ .striscia-data{margin-bottom:var(--s6)} .striscia-data .comandi{display:inline-flex;align-items:center;gap:var(--s4); flex:none;white-space:nowrap} @media (max-width:640px){ .striscia-data{align-items:flex-start} .striscia-data .testo{flex:1 1 100%;min-width:0} .striscia-data .comandi{flex:1 1 100%;gap:var(--s5);margin-top:var(--s1)} } /* Barra delle date nel carrello */ .date-carrello .et small{font-weight:400;color:var(--tenue)} .date-carrello .coppia-date{display:flex;align-items:center;gap:var(--s2); flex:1 1 auto;min-width:0} .date-carrello .coppia-date input{flex:1;min-width:0} .date-carrello .tratto{flex:none;color:var(--tenue)} @media (max-width:640px){ .date-carrello{align-items:stretch} .date-carrello .et{flex:1 1 100%} .date-carrello .coppia-date{flex:1 1 100%} /* La freccia fra le due date diventa verticale: affiancate non ci stanno */ .date-carrello .coppia-date{flex-direction:column;align-items:stretch;gap:var(--s1)} .date-carrello .coppia-date input{width:100%} .date-carrello .tratto{align-self:center;transform:rotate(90deg);line-height:1} .date-carrello .btn{flex:1 1 100%;width:100%;justify-content:center} } /* L'importo di riga non deve uscire dalla scheda */ .riga-c .totale-riga{min-width:0;overflow-wrap:anywhere} @media (max-width:660px){ .riga-c{grid-template-columns:72px minmax(0,1fr) 36px; grid-template-areas:"foto dati via" "foto qta tot"} .riga-c .totale-riga{justify-self:end;text-align:right;font-size:17px} .riga-c .qta-form input{width:60px} } @media (max-width:400px){ .riga-c{grid-template-columns:60px minmax(0,1fr) 32px} .riga-c .totale-riga{font-size:16px} } /* Alla cassa, fra il riquadro delle date e i campi ci vuole aria */ .passo-c .riquadro-date+.griglia-c{margin-top:var(--s6)} /* Calendario: i giorni liberi sono scegliibili */ .mese-griglia a.g{text-decoration:none;cursor:pointer; transition:background .14s,color .14s,transform .1s} .mese-griglia a.g.libero:hover{background:var(--acc);color:#fff;transform:scale(1.06)} .mese-griglia a.g:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .mese-griglia .g.scelto{background:var(--acc);color:#fff;font-weight:700; box-shadow:0 0 0 2px var(--acc-linea)} .mese-griglia a.g.scelto:hover{background:var(--acc-scuro)} /* ===================================================================== 23 · CALENDARIO SELEZIONABILE ===================================================================== */ .cal-stato{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; padding:13px var(--s4);margin-bottom:var(--s4); border:1px solid var(--linea);border-radius:var(--r);background:var(--carta-2); font-size:14.5px;line-height:1.5;color:var(--ink-2)} .cal-stato.con-scelta{border-color:var(--acc-linea);background:var(--acc-tenue)} .cal-stato span{flex:1;min-width:200px} .cal-stato b{color:var(--acc)} .cal-stato .rifai{flex:none;font-weight:600;color:var(--acc); text-decoration:underline;text-underline-offset:3px;white-space:nowrap} /* Il primo e l'ultimo giorno del periodo si riconoscono a colpo d'occhio */ .mese-griglia .g.scelto:first-of-type{border-top-left-radius:var(--r-s)} /* Quando la data cambia, la striscia si accende per un attimo */ @keyframes lampeggia{ 0%,100%{box-shadow:0 0 0 0 rgba(168,50,79,0)} 30% {box-shadow:0 0 0 4px var(--acc-linea)} 60% {box-shadow:0 0 0 4px var(--acc-linea)} } .striscia-data.lampeggia{animation:lampeggia 1.6s ease-out 1} @media (prefers-reduced-motion:reduce){ .striscia-data.lampeggia{animation:none;box-shadow:0 0 0 3px var(--acc-linea)} } /* Su schermo stretto la freccia fra le due date ha bisogno di aria */ @media (max-width:640px){ .date-carrello .coppia-date .tratto{margin:9px 0} } /* ===================================================================== 24 · SELETTORE DELLE DATE ===================================================================== */ /* Il pulsante che lo apre: si comporta come un campo */ .campo-date{min-width:0;width:100%} .campo-date label{display:block;margin-bottom:6px; font-size:12.5px;font-weight:600;color:var(--ink-2)} .pulsante-date{display:flex;align-items:center;gap:var(--s3); width:100%;min-height:52px;padding:0 16px; border:1px solid var(--linea);border-radius:var(--r); background-color:var(--bk);cursor:pointer;text-align:left; font:inherit;font-size:16px;color:var(--tenue); transition:border-color .16s,box-shadow .16s,background-color .16s} .pulsante-date:hover{border-color:#d7ccbc} .pulsante-date:focus-visible{outline:none;background-color:var(--carta); border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-linea)} .pulsante-date svg{width:18px;height:18px;flex:none;color:var(--acc)} .pulsante-date .valore{flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pulsante-date.pieno{color:var(--ink);font-weight:600; background-color:var(--carta);border-color:var(--acc-linea)} .pulsante-date .quanti{flex:none;padding:3px 10px;border-radius:var(--r-p); background:var(--acc-tenue);color:var(--acc); font-size:12px;font-weight:700;white-space:nowrap} /* Il verbo con la freccia: senza, il pulsante si legge come un'etichetta che mostra una data e nessuno prova a premerlo. */ .pulsante-date .apri{flex:none;display:inline-flex;align-items:center;gap:5px; font-size:13.5px;font-weight:700;color:var(--acc);white-space:nowrap} .pulsante-date .apri svg{width:14px;height:14px;color:inherit; transition:transform .16s} .pulsante-date:hover .apri svg{transform:translateX(3px)} @media (max-width:420px){ .pulsante-date .apri span,.pulsante-date .quanti{display:none} } .nota-date{margin-top:var(--s2);font-size:12.5px;line-height:1.5;color:var(--tenue)} /* Il riquadro */ .sel-velo{position:fixed;inset:0;z-index:120;display:grid;place-items:center; padding:var(--s5);background:rgba(36,31,28,.55);backdrop-filter:blur(3px)} .sel-velo[hidden]{display:none} .sel-scatola{width:100%;max-width:660px;max-height:90vh; display:flex;flex-direction:column;overflow:hidden; background:var(--carta);border-radius:var(--r-g);box-shadow:var(--ombra-alta)} /* Su telefono occupa tutto: un calendario stretto non si usa */ @media (max-width:700px){ .sel-velo{padding:0;place-items:stretch} .sel-scatola{max-width:none;max-height:none;height:100%;border-radius:0} } /* Schermi corti o stretti (iPhone SE e simili): un mese solo. Con due, il secondo resta sotto la piega e non si vede, dando l'impressione che il calendario finisca lì. Meglio uno intero e raggiungibile, con le frecce per spostarsi. */ @media (max-width:430px), (max-height:720px){ .sel-mesi .sel-mese:nth-child(2){display:none} .sel-mesi{padding-top:var(--s4)} /* Con un mese solo il suo titolo ripete quello della navigazione */ .sel-mese-tit{display:none} } .sel-testa{display:flex;align-items:center;gap:var(--s4); padding:var(--s5) var(--s5) var(--s4)} .sel-testa h2{flex:1;min-width:0;font-size:21px;line-height:1.25} /* La frase guida è l'unica istruzione del riquadro: sta su una riga propria e occupa tutta la larghezza disponibile. */ .sel-stato{margin:0 var(--s5) var(--s2);padding:11px 15px; border-radius:var(--r);background:var(--acc-tenue); border:1px solid var(--acc-linea); font-size:14.5px;line-height:1.55;color:var(--ink-2)} .sel-stato b{color:var(--acc);font-weight:700} /* L'istruzione sta sempre su una riga propria, sotto la data: affiancate si leggono come una frase sola e ci si perde. */ .sel-stato .riga{display:block} .sel-stato .riga+.riga{margin-top:3px} /* Quello che compare nel pannello entra in dissolvenza: un elemento che spunta di colpo si nota meno di uno che arriva, e sposta lo sguardo nel punto sbagliato. */ @keyframes entraDolce{ from{opacity:0;transform:translateY(-3px)} to {opacity:1;transform:none} } .sel-stato.entra{animation:entraDolce .26s ease-out} .sel-fondo .btn.entra{animation:entraDolce .26s ease-out} @media (prefers-reduced-motion:reduce){ .sel-stato.entra,.sel-fondo .btn.entra{animation:none} } /* "Conferma →" dentro la frase: stesso comando del pulsante in fondo, messo dove l'occhio si trova già. */ .conferma-qui{padding:0;border:0;background:transparent; font:inherit;font-weight:700;color:var(--acc);cursor:pointer; text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1.5px} .conferma-qui:hover{color:var(--acc-scuro)} /* Le icone restano nude: un contorno attorno a ciascuna, in un pannello già delimitato, aggiunge rumore senza aiutare. */ .sel-chiudi{width:40px;height:40px;flex:none;display:grid;place-items:center; border:0;border-radius:var(--r);background:transparent; color:var(--tenue);cursor:pointer;transition:color .16s,background .16s} .sel-chiudi:hover{background:var(--carta-2);color:var(--acc)} .sel-chiudi svg{width:19px;height:19px;display:block} .sel-nav{display:flex;align-items:center;justify-content:center;gap:var(--s8); padding:var(--s5) var(--s5) 0} .sel-nav button{width:42px;height:42px;flex:none; display:grid;place-items:center; border:0;border-radius:var(--r);background:transparent; color:var(--tenue);cursor:pointer;transition:color .16s,background .16s} .sel-nav button:hover{background:var(--carta-2);color:var(--acc)} .sel-nav button svg{width:18px;height:18px;display:block} .sel-nav span{min-width:170px;text-align:center; font-family:var(--titolo);font-size:19px;text-transform:capitalize} /* Su telefono le frecce vanno ai bordi: al centro sarebbero fuori dalla portata del pollice. */ @media (max-width:700px){ .sel-nav{justify-content:space-between;gap:var(--s3)} .sel-nav span{flex:1} } .sel-mesi{flex:1;overflow-y:auto;display:grid;gap:var(--s6); padding:var(--s6) var(--s5) var(--s5)} /* Due mesi affiancati, separati da una linea: senza, le due griglie sembrano una sola tabella di quattordici colonne. */ @media (min-width:620px){ .sel-mesi{grid-template-columns:1fr 1fr;gap:var(--s6)} .sel-mesi .sel-mese+.sel-mese{padding-left:var(--s6); border-left:1px solid var(--linea-2)} } .sel-mese-tit{margin-bottom:var(--s3);text-align:center; font-family:var(--titolo);font-size:16px;text-transform:capitalize;color:var(--ink-2)} .sel-testa-g,.sel-griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .sel-testa-g span{padding-bottom:6px;text-align:center; font-size:10.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--tenue)} .sel-g{aspect-ratio:1;display:grid;place-items:center; border:0;border-radius:var(--r-s);background:transparent; font:inherit;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ink)} .sel-g.fuori{visibility:hidden} .sel-g.passato{color:#cec2b1} button.sel-g.libero{cursor:pointer;transition:background .14s,color .14s} button.sel-g.libero:hover{background:var(--acc-tenue);color:var(--acc)} .sel-g.dentro{background:var(--acc-tenue);color:var(--acc);border-radius:0} .sel-g.inizio,.sel-g.fine,.sel-g.solo{background:var(--acc);color:#fff;font-weight:700} button.sel-g.inizio:hover,button.sel-g.fine:hover,button.sel-g.solo:hover{ background:var(--acc-scuro);color:#fff} .sel-g.inizio{border-radius:var(--r-s) 0 0 var(--r-s)} .sel-g.fine{border-radius:0 var(--r-s) var(--r-s) 0} .sel-g.solo{border-radius:var(--r-s)} /* I due pulsanti si dividono la riga a metà, su qualunque schermo. "Conferma" resta della stessa larghezza anche quando è solo: così non cambia forma ogni volta che si azzerano le date. */ .sel-fondo{display:flex;gap:var(--s3);padding:var(--s4) var(--s5) var(--s5)} .sel-fondo .btn{flex:1 1 50%;min-width:0;justify-content:center} .sel-fondo #selPulisci[hidden]+.btn{flex:0 1 50%;margin-left:auto} @media (max-width:700px){ .sel-fondo{padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))} } /* ===================================================================== 25 · PAGINE DI ERRORE ===================================================================== */ .pagina-errore{max-width:620px;margin:var(--s7) auto var(--s9);text-align:center} .pagina-errore .codice{display:inline-block;padding:5px 16px;margin-bottom:var(--s5); border:1px solid var(--linea);border-radius:var(--r-p);background:var(--carta); font-family:var(--titolo);font-size:15px;letter-spacing:.06em;color:var(--tenue)} .pagina-errore h1{font-size:clamp(28px,4.6vw,42px)} .pagina-errore .spiega{margin-top:var(--s4); font-size:16.5px;line-height:1.7;color:var(--ink-2)} .pagina-errore .indirizzo{margin-top:var(--s3);font-size:13.5px;color:var(--tenue)} .pagina-errore .indirizzo code{padding:3px 9px;border-radius:6px; background:var(--carta-2);font-family:var(--mono);font-size:12.5px; word-break:break-all} .cerca-errore{display:flex;align-items:center;gap:var(--s3); max-width:460px;margin:var(--s6) auto 0;padding:var(--s2) var(--s2) var(--s2) var(--s4); border:1px solid var(--linea);border-radius:var(--r-p);background:var(--carta)} .cerca-errore:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-linea)} .cerca-errore svg{width:19px;height:19px;flex:none;color:var(--tenue)} .cerca-errore input{flex:1;min-width:0;border:0;background:transparent; padding:10px 0;font-size:16px;outline:none} .cerca-errore .btn{flex:none;min-height:42px;padding-inline:var(--s5); border-radius:var(--r-p)} .pagina-errore .azioni{display:flex;gap:var(--s3);flex-wrap:wrap; justify-content:center;margin-top:var(--s6)} .scorciatoie{margin-top:var(--s7);padding-top:var(--s5); border-top:1px solid var(--linea)} .scorciatoie .et{display:block;margin-bottom:var(--s3); font-size:11.5px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--tenue)} .scorciatoie .elenco{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center} .scorciatoie .elenco a{padding:8px 16px;border:1px solid var(--linea); border-radius:var(--r-p);background:var(--carta); font-size:14px;font-weight:500;color:var(--ink-2)} .scorciatoie .elenco a:hover{border-color:var(--acc);background:var(--acc-tenue); color:var(--acc)} .aiuto-errore{margin-top:var(--s6);font-size:14.5px;line-height:1.7;color:var(--tenue)} .aiuto-errore a{color:var(--acc);font-weight:600} /* Pagamento non riuscito: il riquadro cambia stato, non aggiunge una riga */ #ppRiquadro.fallito{border-color:var(--no-linea);background:var(--no-tenue)} #ppRiquadro.fallito #ppNota{text-align:left} .cifra-conferma.da-pagare b{color:var(--acc)} .cifra-conferma.da-pagare span{color:var(--acc)} /* Lo stato del pagamento, quando non è ancora avvenuto */ .ancora-da-pagare{display:inline-block;margin-top:var(--s3);padding:4px 14px; border-radius:var(--r-p);background:var(--no-tenue);border:1px solid var(--no-linea); font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--no)} .cifra-conferma.non-pagato{border-color:var(--no-linea);background:var(--no-tenue)} /* La via alternativa, quando il pagamento non parte */ .alternativa.in-evidenza{border-color:var(--acc);background:var(--acc-tenue); box-shadow:0 0 0 3px var(--acc-linea)} .alternativa.in-evidenza summary{color:var(--acc);font-weight:700} /* Cartello in cima alla conferma quando il pagamento non è riuscito. La pagina dice "richiesta ricevuta" e insieme "pagamento fallito": due notizie opposte vanno separate, non impilate. */ .cartello-pagamento{display:flex;gap:var(--s4);align-items:flex-start; margin-bottom:var(--s5);padding:var(--s4) var(--s5); border:1px solid var(--no-linea);border-left:4px solid var(--no); border-radius:var(--r);background:var(--no-tenue); font-size:14.5px;line-height:1.6;color:var(--ink-2);text-align:left} .cartello-pagamento[hidden]{display:none} .cartello-pagamento .segno{flex:none;width:24px;height:24px; display:grid;place-items:center;border-radius:50%; background:var(--no);color:#fff;font-weight:700;font-size:14px;line-height:1} .cartello-pagamento b{display:block;margin-bottom:3px;color:var(--no)} .conferma .sigillo.in-sospeso{background:var(--no-tenue);border-color:var(--no-linea); color:var(--no)}