/* ══════════════════════════════════════════════════════════════════════ VentiRent — sito-v2 — stile comune a tutte le pagine ══════════════════════════════════════════════════════════════════════ Ogni pagina carica questo file più il suo: home.css home, italiano e inglese vettura.css le pagine della Ferrari Roma e della Porsche 718 Spyder vetture.css la collezione completa (/vetture/, /en/cars/) documento.css condizioni, privacy, ringraziamenti Indice 01 Token 05 Pulsanti e link 09 Piè di pagina 02 Base 06 Testata e menu 10 Movimento 03 Tipografia 07 Barra e WhatsApp 11 Transizioni di pagina 04 Impaginazione 08 Modulo 12 Fotografia ingrandita Regole della casa · Palette: i grigi del marchio (#000 #303030 #5E5E5E #919191 #C6C6C6) più un bianco caldo, «osso». Nessun colore d'accento: il colore lo portano le fotografie. · Angoli vivi. Niente card, niente pill, niente ombre. · Si anima solo transform e opacity (più clip-path sulle immagini). · Punti di rottura: 600 · 900 · 1200 · 1600. ══════════════════════════════════════════════════════════════════════ */ /* ── 01 TOKEN ─────────────────────────────────────────────────────────── */ :root{ --nero:#000; --notte:#070707; --antracite:#0F0F0F; --grafite:#171717; --ferro:#303030; --piombo:#5E5E5E; --grigio:#919191; --argento:#C6C6C6; --osso:#EEEBE6; --testo:var(--osso); --testo-2:var(--grigio); /* 6,7:1 sul nero */ --linea:rgba(238,235,230,.12); --linea-forte:rgba(238,235,230,.3); --errore:#E0907F; --f:'Inter','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif; --t-mega:clamp(3.3rem,12.4vw,13.5rem); --t-display:clamp(2.6rem,6.4vw,7rem); --t-titolo:clamp(2.1rem,4.6vw,4.6rem); --t-sotto:clamp(1.35rem,2.2vw,2rem); --t-lead:clamp(1.12rem,1.4vw,1.34rem); --t-micro:.6875rem; /* uscita lunga e morbida: tutte le rivelazioni */ --e-uscita:cubic-bezier(.16,1,.3,1); /* entrata e uscita simmetriche: pannelli, cambi di stato */ --e-morbida:cubic-bezier(.65,0,.35,1); --margine:clamp(20px,5.2vw,80px); --max:1680px; /* respiro verticale delle sezioni: 56px sul telefono, fino a 220 sui monitor grandi. Fino all'11 settembre sera il minimo era 104px e sul telefono fra due sezioni restavano 200px di nero */ --sezione:clamp(56px,13vw,220px); --testata-h:68px; } @media(min-width:900px){ :root{ --testata-h:84px } } /* ── 02 BASE ──────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} /* Un elemento con l'attributo hidden sparisce sempre, anche quando una regola gli dà un display */ [hidden]{display:none!important} html{ color-scheme:dark; /* calendari e tendine nativi scuri */ -webkit-text-size-adjust:100%;text-size-adjust:100%; overflow-x:hidden;overflow-x:clip; /* clip: nessun contenitore */ overscroll-behavior-x:none; /* trascinabile sul telefono */ background:var(--nero); } @media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } body{ background:var(--nero);color:var(--testo); font-family:var(--f);font-size:1rem;line-height:1.65;font-weight:400; font-optical-sizing:auto; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden;overflow-x:clip; } @media(min-width:1200px){ body{font-size:1.0625rem} } img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} ul[class],ol[class]{list-style:none} ::selection{background:var(--osso);color:var(--nero)} :focus-visible{outline:1px solid var(--osso);outline-offset:5px} .chiaro :focus-visible{outline-color:var(--nero)} .salta{ position:fixed;left:12px;top:12px;z-index:100; padding:14px 18px;background:var(--osso);color:var(--nero); font-size:.8rem;font-weight:500;transform:translateY(-200%); } .salta:focus{transform:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ── 03 TIPOGRAFIA ────────────────────────────────────────────────────── */ .micro{ font-size:var(--t-micro);font-weight:500;line-height:1.4; letter-spacing:.24em;text-transform:uppercase;color:var(--testo-2); } .mega,.display,.titolo{font-weight:300;color:var(--testo)} .mega{font-size:var(--t-mega);line-height:.84;letter-spacing:-.06em;font-weight:250} .display{font-size:var(--t-display);line-height:.98;letter-spacing:-.048em} .titolo{font-size:var(--t-titolo);line-height:1.02;letter-spacing:-.04em} .sotto{font-size:var(--t-sotto);line-height:1.28;letter-spacing:-.02em;font-weight:300} .lead{font-size:var(--t-lead);line-height:1.55;letter-spacing:-.008em;color:var(--argento);font-weight:350} .tenue{color:var(--piombo)} .chiaro .tenue{color:#8C8983} .corpo{color:var(--testo-2);max-width:46ch} .numero{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* ── 04 IMPAGINAZIONE ─────────────────────────────────────────────────── */ .contenitore{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--margine)} .griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px} @media(min-width:600px){ .griglia{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:20px} } @media(min-width:900px){ .griglia{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2vw,36px)} } .tutta{grid-column:1/-1} /* Arrivando a una sezione da un link (#consegna) il titolo si ferma sotto la testata fissa, non dietro. Il modulo, che scende da solo tra un passo e l'altro, prende un po' d'aria in più. */ section[id]{scroll-margin-top:var(--testata-h)} form{scroll-margin-top:calc(var(--testata-h) + 24px)} /* Sezione chiara: una sola per pagina, rompe il ritmo del nero */ .chiaro{ background:var(--osso);color:var(--nero); --testo:var(--nero);--testo-2:var(--piombo); --linea:rgba(0,0,0,.12);--linea-forte:rgba(0,0,0,.34); } .chiaro ::selection{background:var(--nero);color:var(--osso)} /* La grana fotografica (una velatura di rumore sulle immagini a tutto schermo) è stata tolta il 12 settembre 2026: serviva a mascherare la morbidezza delle sorgenti da ~1250 px, ma con le nuove sorgenti da 1672 px si leggeva come sgranatura. La classe .grana è sparita anche dalle pagine. */ /* Immagine che riempie il suo contenitore */ .riempi{position:absolute;inset:0;overflow:hidden} .riempi img,.riempi picture{width:100%;height:100%} .riempi img{object-fit:cover;object-position:var(--fuoco,50% 50%)} /* ── 05 PULSANTI E LINK ───────────────────────────────────────────────── */ .btn{ --h:56px; position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:16px; min-height:var(--h);padding:0 30px; font-size:.72rem;font-weight:500;line-height:1;letter-spacing:.2em;text-transform:uppercase; white-space:nowrap;border:1px solid transparent; transition:color .6s var(--e-uscita),border-color .6s var(--e-uscita); -webkit-tap-highlight-color:transparent; } .btn::before{ content:"";position:absolute;inset:-1px;z-index:-1; transform:scaleY(0);transform-origin:50% 100%; transition:transform .7s var(--e-uscita); } .btn-pieno{background:var(--osso);color:var(--nero);border-color:var(--osso)} .btn-pieno::before{background:var(--nero)} .btn-linea{color:var(--testo);border-color:var(--linea-forte)} .btn-linea::before{background:var(--testo)} .chiaro .btn-pieno{background:var(--nero);color:var(--osso);border-color:var(--nero)} .chiaro .btn-pieno::before{background:var(--osso)} @media(hover:hover){ .btn:hover::before{transform:scaleY(1)} .btn-pieno:hover{color:var(--osso)} .btn-linea:hover{color:var(--nero);border-color:var(--osso)} .chiaro .btn-pieno:hover{color:var(--nero)} .chiaro .btn-linea:hover{color:var(--osso);border-color:var(--nero)} } /* Il testo scorre verso l'alto e ne entra una copia: un solo elemento, la copia è un'ombra del testo stesso */ .btn-t{display:block;overflow:hidden;height:1.25em;line-height:1.25em} .btn-t>span{display:block;text-shadow:0 1.25em 0 currentColor;transition:transform .7s var(--e-uscita)} @media(hover:hover){ .btn:hover .btn-t>span{transform:translateY(-1.25em)} } .btn-piccolo{--h:44px;padding:0 20px} .btn-largo{width:100%} .freccia{width:26px;height:10px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1;transition:transform .7s var(--e-uscita)} @media(hover:hover){ a:hover>.freccia,button:hover>.freccia{transform:translateX(5px)} } /* Link testuale con filetto che passa */ .link{ position:relative;display:inline-flex;align-items:center;gap:14px;padding:10px 0; font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.2; } .link::after{ content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor; opacity:.5;transform-origin:0 50%; } @media(hover:hover){ .link:hover::after{animation:filetto .9s var(--e-uscita)} } @keyframes filetto{ 0%{transform:scaleX(1);transform-origin:100% 50%} 45%{transform:scaleX(0);transform-origin:100% 50%} 46%{transform:scaleX(0);transform-origin:0 50%} 100%{transform:scaleX(1);transform-origin:0 50%} } .azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px} /* ── 06 TESTATA E MENU ────────────────────────────────────────────────── */ .testata{ position:fixed;top:0;left:0;right:0;z-index:50; view-transition-name:testata; transition:transform .8s var(--e-uscita); } .testata::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0)); border-bottom:1px solid transparent; transition:background-color .6s,border-color .6s,opacity .6s; } .testata.solida::before{ background:rgba(7,7,7,.8); -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--linea); } /* Sul telefono niente sfocatura dietro la testata: su un elemento fisso il browser la ricalcola a ogni fotogramma di scorrimento, ed è la prima causa di scatti sui telefoni di fascia media. Fondo quasi pieno. */ @media(max-width:899px){ .testata.solida::before{background:rgba(7,7,7,.94);-webkit-backdrop-filter:none;backdrop-filter:none} } .testata.nascosta{transform:translateY(-101%)} .menu-aperto .testata{transform:none} .menu-aperto .testata::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent} .testata-in{ position:relative;display:flex;align-items:center;gap:24px; height:var(--testata-h);max-width:var(--max);margin:0 auto;padding:0 var(--margine); } .marchio{display:block;flex:0 0 auto} .marchio img{width:112px} @media(min-width:900px){ .marchio img{width:138px} } .nav{display:none} .nav a,.lingua a{ position:relative;padding:12px 0; font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;text-transform:uppercase;line-height:1; color:rgba(238,235,230,.72);transition:color .4s; } .nav a::after{ content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor; transform:scaleX(0);transition:transform .6s var(--e-uscita); } .nav a[aria-current]{color:var(--osso)} .nav a[aria-current]::after{transform:scaleX(1)} @media(hover:hover){ .nav a:hover,.lingua a:hover{color:var(--osso)} .nav a:hover::after{transform:scaleX(1)} } .testata-azioni{margin-left:auto;display:flex;align-items:center;gap:22px} .lingua{display:flex;align-items:center;gap:12px} .lingua a[aria-current]{color:var(--osso)} .lingua a+a::before{content:"";position:absolute;left:-7px;top:50%;width:1px;height:10px;margin-top:-5px;background:var(--linea-forte)} .testata .lingua{display:none} .testata .btn{display:none} @media(min-width:700px){ .testata .btn{display:inline-flex} .testata .lingua{display:flex} } .apri-menu{ display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 0 0 6px; font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;text-transform:uppercase; } .apri-menu-icona{position:relative;width:26px;height:10px} .apri-menu-icona::before,.apri-menu-icona::after{ content:"";position:absolute;left:0;right:0;height:1px;background:currentColor; transition:transform .7s var(--e-uscita),top .7s var(--e-uscita); } .apri-menu-icona::before{top:0} .apri-menu-icona::after{top:9px;left:8px} .menu-aperto .apri-menu-icona::before{top:5px;transform:rotate(22deg)} .menu-aperto .apri-menu-icona::after{top:5px;left:0;transform:rotate(-22deg)} @media(min-width:1200px){ .nav{display:flex;gap:40px;position:absolute;left:50%;transform:translateX(-50%)} .apri-menu{display:none} } /* Menu a tutto schermo (telefono e tablet). Chiuso è invisibile e fuori dal tabulatore (visibility), aperto scende come un sipario. */ .menu-mobile{ position:fixed;inset:0;z-index:45; display:flex;flex-direction:column;justify-content:space-between;gap:40px; padding:calc(var(--testata-h) + 5vh) var(--margine) calc(26px + env(safe-area-inset-bottom)); background:var(--notte);overflow-y:auto;overscroll-behavior:contain; clip-path:inset(0 0 100% 0);visibility:hidden; transition:clip-path .8s var(--e-morbida),visibility 0s .8s; } .menu-aperto .menu-mobile{clip-path:inset(0);visibility:visible;transition:clip-path .9s var(--e-uscita)} .menu-voci{display:grid} .menu-voci li{overflow:hidden;border-bottom:1px solid var(--linea)} .menu-voci a{ display:flex;align-items:baseline;gap:18px;padding:12px 0 10px; font-size:clamp(2.1rem,9.6vw,3.6rem);font-weight:300;letter-spacing:-.045em;line-height:1.05; transform:translateY(105%);transition:transform .9s var(--e-uscita); transition-delay:calc(var(--i,0) * 55ms); } .menu-voci a .micro{flex:0 0 2.4em;letter-spacing:.2em} .menu-aperto .menu-voci a{transform:none;transition-delay:calc(260ms + var(--i,0) * 60ms)} .menu-piede{display:grid;gap:26px;opacity:0;transition:opacity .6s} .menu-aperto .menu-piede{opacity:1;transition:opacity 1s .55s} .menu-contatti{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px} .menu-contatti a{color:var(--argento);font-size:.95rem} @media(min-width:1200px){ .menu-mobile{display:none} } /* chiusura istantanea (voce che resta sulla stessa pagina, ritorno dalla cache) */ .menu-subito .menu-mobile,.menu-subito .menu-voci a,.menu-subito .menu-piede,.menu-subito .testata, .menu-subito .apri-menu-icona::before,.menu-subito .apri-menu-icona::after,.menu-subito .barra{transition:none!important} /* ── 07 BARRA SUL TELEFONO E WHATSAPP ─────────────────────────────────── */ /* Sul telefono, passata l'apertura, sale una barra con le due azioni: la richiesta e WhatsApp. Sparisce sopra il modulo, dove sarebbe doppia. */ .barra{ position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40; display:flex;gap:8px;padding:7px; background:rgba(9,9,9,.95); /* niente sfocatura: vedi la testata */ border:1px solid var(--linea); transform:translateY(calc(100% + 30px));transition:transform .8s var(--e-uscita); } .barra.visibile{transform:none} .barra .btn{--h:52px;flex:1;padding:0 16px} .icona-wa{ flex:0 0 52px;display:flex;align-items:center;justify-content:center; min-height:52px;border:1px solid var(--linea-forte);color:var(--osso); } .icona-wa svg{width:22px;height:22px} .menu-aperto .barra{transform:translateY(calc(100% + 30px))} @media(min-width:900px){ .barra{display:none} } .wa-fisso{display:none} @media(min-width:900px){ .wa-fisso{ position:fixed;right:28px;bottom:28px;z-index:40; display:flex;align-items:center;height:54px;padding:0 16px; background:rgba(9,9,9,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--linea-forte);color:var(--osso); opacity:0;transform:translateY(30px);pointer-events:none; transition:opacity .6s,transform .8s var(--e-uscita),border-color .4s; } .wa-fisso.visibile{opacity:1;transform:none;pointer-events:auto} .wa-fisso svg{width:22px;height:22px;flex:0 0 auto} .wa-fisso span{ max-width:0;overflow:hidden;white-space:nowrap; font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;text-transform:uppercase; transition:max-width .7s var(--e-uscita),margin .7s var(--e-uscita); } .wa-fisso:hover{border-color:var(--osso)} .wa-fisso:hover span,.wa-fisso:focus-visible span{max-width:120px;margin-left:12px} } /* ── 08 MODULO ────────────────────────────────────────────────────────── */ .campo{display:grid;gap:8px;min-width:0} .campo label,.campo .etichetta{ font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--testo-2); } .campo input,.campo select,.campo textarea{ width:100%;min-width:0; padding:10px 0 14px; font-size:1.2rem;font-weight:300;letter-spacing:-.01em;line-height:1.3; color:var(--testo);background:transparent; border:0;border-bottom:1px solid var(--linea-forte);border-radius:0; -webkit-appearance:none;appearance:none; transition:border-color .4s,box-shadow .4s; } @media(max-width:599px){ .campo input,.campo select,.campo textarea{font-size:1.0625rem} } /* sopra i 16px: niente zoom su iOS */ .campo input::placeholder,.campo textarea::placeholder{color:#6F6F6F;opacity:1} .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none;border-bottom-color:var(--testo);box-shadow:0 1px 0 0 var(--testo); } .campo textarea{resize:vertical;min-height:96px} .campo select{ padding-right:34px;cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%23C6C6C6'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center; } .campo select option,.campo select optgroup{background:var(--grafite);color:var(--osso)} .campo input[type="date"]{min-height:52px;text-align:left} /* iOS: il controllo nativo ignora width */ .campo input[type="date"]::-webkit-date-and-time-value{text-align:left} .campo input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer;filter:invert(1)} /* Errori: compaiono solo dopo che il campo è stato toccato o dopo un invio */ .campo .errore{font-size:.8rem;color:var(--errore);min-height:0} .toccato input:invalid,.toccato select:invalid,.toccato textarea:invalid{border-bottom-color:var(--errore);box-shadow:0 1px 0 0 var(--errore)} .spunta{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;cursor:pointer;font-size:.9rem;line-height:1.55;color:var(--testo-2)} .spunta input{ -webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:1px; border:1px solid var(--linea-forte);display:grid;place-content:center;cursor:pointer; transition:border-color .3s,background-color .3s; } .spunta input::before{ content:"";width:11px;height:11px;background:var(--nero); clip-path:polygon(14% 50%,0 64%,38% 100%,100% 22%,86% 8%,38% 72%); transform:scale(0);transition:transform .35s var(--e-uscita); } .spunta input:checked{background:var(--osso);border-color:var(--osso)} .spunta input:checked::before{transform:scale(1)} .spunta input:focus-visible{outline:1px solid var(--osso);outline-offset:4px} .spunta a{color:var(--testo);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .toccato .spunta input:invalid{border-color:var(--errore)} .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ── 09 PIÈ DI PAGINA ─────────────────────────────────────────────────── */ /* Parte alta del piede alleggerita il 13 settembre 2026: il motto era in corpo grande su 22 caratteri, andava su quattro righe e, allineato in basso col logo, lo faceva sembrare caduto sotto la scritta. Ora è una riga di servizio in grigio, a fianco del logo e centrata con lui. */ .piede{position:relative;z-index:2;background:var(--nero);border-top:1px solid var(--linea);padding:clamp(48px,6vw,88px) 0 calc(30px + env(safe-area-inset-bottom))} .piede-alto{display:grid;gap:14px;padding-bottom:clamp(28px,3.5vw,48px)} .piede-marchio img{width:150px} .piede-motto{color:var(--grigio);font-size:.95rem;line-height:1.55;max-width:48ch} .piede-colonne{display:grid;grid-template-columns:1fr 1fr;gap:34px 24px;padding:34px 0;border-top:1px solid var(--linea)} .piede-colonne .micro{margin-bottom:12px} .piede-colonne p,.piede-colonne a{color:var(--argento);font-size:.95rem;line-height:1.9} .piede-colonne nav a{display:block} @media(hover:hover){ .piede a:hover{color:var(--osso)} } .piede-basso{display:grid;gap:18px;padding-top:28px;border-top:1px solid var(--linea);color:var(--piombo);font-size:.8rem;line-height:1.7} .piede-legale{display:flex;flex-wrap:wrap;gap:6px 22px} .piede-legale a{color:var(--grigio)} .nota-ai{color:var(--grigio);max-width:80ch} .piede-basso .lingua a{padding:6px 0} @media(min-width:900px){ .piede-alto{grid-template-columns:auto 1fr;align-items:center;column-gap:clamp(32px,4vw,64px)} .piede-motto{justify-self:end;text-align:right} .piede-colonne{grid-template-columns:repeat(3,1fr)} .piede-basso{grid-template-columns:1fr auto;align-items:end} .piede-basso .nota-ai,.piede-basso .piede-societa{grid-column:1} .piede-basso .lingua{grid-column:2;grid-row:1} } /* spazio per la barra fissa sul telefono */ @media(max-width:899px){ .con-barra .piede{padding-bottom:calc(100px + env(safe-area-inset-bottom))} } /* ── 10 MOVIMENTO ───────────────────────────────────────────────────────── Stato iniziale solo se c'è JavaScript (classe .js, messa in testa alla pagina) e solo se il sistema non chiede movimento ridotto. Senza l'uno o l'altro tutto è visibile da subito. js/moduli/movimento.js aggiunge .visibile quando l'elemento entra nello schermo. */ .p{display:inline-block;vertical-align:top} @media(prefers-reduced-motion:no-preference){ /* :where() azzera la specificità: così la regola .visibile qui sotto vince sempre, qualunque sia il tipo di rivelazione */ .js :where([data-rivela]:not([data-rivela="parole"],[data-rivela="immagine"],[data-rivela="filo"])){ opacity:0;transform:translate3d(0,26px,0); transition:opacity 1.2s var(--e-uscita),transform 1.4s var(--e-uscita); transition-delay:calc(var(--i,0) * 90ms + var(--ritardo,0ms)); } .js [data-rivela].visibile{opacity:1;transform:none} /* parole che salgono da dietro una maschera */ .js [data-rivela="parole"] .p{overflow:hidden;padding:.08em 0 .12em;margin:-.08em 0 -.12em} .js [data-rivela="parole"] .p>span{ display:inline-block;transform:translate3d(0,110%,0); transition:transform 1.3s var(--e-uscita); transition-delay:calc(var(--w,0) * 42ms + var(--ritardo,0ms)); } .js [data-rivela="parole"].visibile .p>span{transform:none} /* immagine che si apre dal basso */ .js [data-rivela="immagine"]{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--e-uscita);transition-delay:var(--ritardo,0ms)} .js [data-rivela="immagine"] img{transform:scale(1.18);transition:transform 2.2s var(--e-uscita);transition-delay:var(--ritardo,0ms)} .js [data-rivela="immagine"].visibile{clip-path:inset(0)} .js [data-rivela="immagine"].visibile img{transform:none} /* filetto che si traccia */ .js [data-rivela="filo"]{transform:scaleX(0);transform-origin:0 50%;opacity:1;transition:transform 1.6s var(--e-uscita)} .js [data-rivela="filo"].visibile{transform:none} } /* Sul telefono si scorre veloce col pollice: le rivelazioni sono più brevi e più corte, e partono appena prima che l'elemento entri nello schermo (js/moduli/movimento.js), così non restano buchi neri in fondo. */ @media(prefers-reduced-motion:no-preference) and (max-width:899px){ .js :where([data-rivela]:not([data-rivela="parole"],[data-rivela="immagine"],[data-rivela="filo"])){ transform:translate3d(0,14px,0); transition-duration:.7s,.8s; transition-delay:calc(var(--i,0) * 50ms + var(--ritardo,0ms)); } .js [data-rivela="parole"] .p>span{transition-duration:.9s;transition-delay:calc(var(--w,0) * 22ms + var(--ritardo,0ms))} } /* ── 11 TRANSIZIONI DI PAGINA ───────────────────────────────────────────── View Transitions tra documenti: il browser che le conosce dissolve una pagina nell'altra, gli altri cambiano pagina come sempre. La testata resta ferma, la fotografia di una vettura passa da una pagina all'altra (view-transition-name uguale sulle due pagine). */ @media(prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation:.55s var(--e-morbida) both vt-esce} ::view-transition-new(root){animation:.9s var(--e-uscita) .1s both vt-entra} ::view-transition-group(*){animation-duration:.9s;animation-timing-function:var(--e-uscita)} } @keyframes vt-esce{to{opacity:0}} @keyframes vt-entra{from{opacity:0;transform:translateY(24px)}} /* ── 12 FOTOGRAFIA INGRANDITA ───────────────────────────────────────────── ⚠️ Nessuna dissolvenza in apertura, per la stessa ragione del sito del 2 settembre: se la pagina non disegna nel momento in cui il pannello nasce, una dissolvenza resta ferma al primo fotogramma e la foto sparisce. In apertura si anima solo la scala, che al peggio resta al 96%. In chiusura la dissolvenza c'è: l'elemento lo toglie un timer. */ .lb{ position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto 1fr auto; background:rgba(4,4,4,.97);color:var(--osso); } .lb.via{opacity:0;transition:opacity .25s} .lb-alto,.lb-basso{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--margine)} .lb-foto{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 var(--margine)} .lb-foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;animation:lb-entra .8s var(--e-uscita)} @keyframes lb-entra{from{transform:scale(.96)}} .lb button{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px} .lb .chiudi{font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase} .lb-frecce{display:flex;gap:4px} .lb-frecce .freccia{width:30px} .lb-frecce button:first-child .freccia{transform:scaleX(-1)} .lb-didascalia{color:var(--grigio);font-size:.85rem} @media(prefers-reduced-motion:reduce){ .lb-foto img{animation:none} .lb.via{transition:none} } /* ── 14 COMPONENTI CONDIVISI ────────────────────────────────────────────── Usati dalla home e dalle pagine delle vetture. */ /* Immagine con cornice che si apre allo scorrimento (--ap: 0 → 1) e leggero spostamento verticale (--py). Le variabili le scrive js/moduli/sezioni.js; senza JavaScript valgono 1 e 0: foto piena. */ [data-cornice]{clip-path:inset(calc((1 - var(--ap,1)) * 9%) calc((1 - var(--ap,1)) * 7%))} [data-cornice] img{transform:translate3d(0,var(--py,0%),0) scale(calc(1.2 - var(--ap,1) * .1))} /* sul telefono la cornice lasciava bordi neri intorno alla foto mentre entrava: foto piena e ferma, sempre */ @media(max-width:899px){ [data-cornice]{clip-path:none} [data-cornice] img{transform:none} } /* Frecce precedente / successiva: gallerie e fila delle vetture */ .frecce{display:flex;align-items:center;gap:6px;flex:0 0 auto} .frecce button{ width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--linea-forte);color:var(--osso); transition:border-color .4s,opacity .4s;-webkit-tap-highlight-color:transparent; } .frecce button:disabled{opacity:.28;cursor:default} .frecce [data-prec] .freccia{transform:scaleX(-1)} .frecce button:active:not(:disabled){border-color:var(--osso)} @media(hover:hover){ .frecce button:not(:disabled):hover{border-color:var(--osso)} } /* Dati tecnici: numero grande e leggero, unità piccola accanto */ .dato{border-top:1px solid var(--linea);padding-top:14px} .dato dt{margin-bottom:14px} .dato dd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:clamp(2.3rem,4.4vw,4.4rem);font-weight:250;line-height:1;letter-spacing:-.05em} .dato dd.parole{font-size:clamp(1.25rem,2vw,1.9rem);font-weight:300;letter-spacing:-.02em;line-height:1.15} .dato-u{font-size:.78rem;font-weight:400;letter-spacing:.04em;color:var(--grigio)} .prezzo{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px} .prezzo b{font-size:clamp(1.9rem,2.8vw,2.6rem);font-weight:300;letter-spacing:-.035em;line-height:1} /* Dato ancora da confermare: resta visibile, in grigio, al posto di un numero inventato. Da sostituire prima di pubblicare. */ .todo{color:var(--piombo)!important} /* Regole: etichetta a sinistra, valore a destra, un filetto per riga */ .regola{display:grid;grid-template-columns:7.2em 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--linea)} .regola:last-child{border-bottom:1px solid var(--linea)} .regola dt{padding-top:.4em} .regola dd{font-size:1.1rem;line-height:1.45} .regola small{display:block;margin-top:5px;color:var(--testo-2);font-size:.88rem;line-height:1.55} /* ── 13 BANNER DEI COOKIE ───────────────────────────────────────────────── js/consenso.js inietta il suo stile, quello oro del sito di agosto. Qui lo si riporta alla palette senza toccare il file del consenso, che resta invariato: specificità più alta (html #vr-cc) perché il suo