/* site/natale-styles.css — pagina Natale aziendale. I colori vengono tutti dai token :root di styles.css: §2 vieta di introdurne altri. */ /* Il rosso di Natale sta SOLO sulle due fasce scure — la promozione e il form — non su tutta la pagina. Titolo, testo, nav e footer restano sul verde --espresso del resto del sito. E' un colore nominato qui e usato in due punti, non un override del token: un override su .nat-page tingerebbe anche la nav e il footer, che sono componenti condivisi con tutte le altre pagine. Deroga dichiarata al §2, che chiude la tavolozza e vieta il rosso: vale per questa pagina stagionale e per questi due blocchi soltanto. */ /* I due rossi della pagina. Dichiarati anche su body.nat-body e non solo su .nat-page: le variabili CSS scendono ai discendenti, non salgono, e .nat-page e' dentro al body — quindi la cornice larga, che e' il fondo del body, leggerebbe una variabile che li' non esiste e resterebbe trasparente. */ .nat-page, body.nat-body { --natale-rosso: #a31a2e; --natale-rosso-acceso: #c81e3a; } /* La cornice della pagina — il bordo che su tutto il sito e' corallo — qui e' rossa. Il colore vero della cornice e' il fondo del , impostato in natale.html; qui si allineano il filo della cornice, i bordi della nav, il logo e i puntini, che altrimenti resterebbero corallo dentro una cornice rossa. */ .nat-page { outline-color: var(--natale-rosso); } /* Il filo interno della cornice: .poster::before lo disegna corallo per tutto il sito, e dentro una cornice rossa restava arancione. */ .nat-page::before { border-color: var(--natale-rosso); } /* La cornice larga e' il fondo del che si vede nel margine del poster. Su /natale lo impostava l'HTML della pagina; qui la pagina e' una sola per tutti gli eventi, quindi la classe la mette il componente al montaggio e la toglie uscendo — altrimenti la serata aperta dopo si ritroverebbe la cornice natalizia. */ body.nat-body { background-color: var(--natale-rosso); } .nat-page .topbrand { border-top-color: var(--natale-rosso); border-bottom-color: var(--natale-rosso); } .nat-page .topbrand-link { color: var(--natale-rosso); } .nat-page { background: var(--cream); color: var(--espresso); } /* ── Hero compatto: il titolo porta il peso, la CTA è subito raggiungibile. */ .nat-hero { padding: 3rem 1.5rem 2.5rem; max-width: 60rem; margin: 0 auto; } .nat-hero-titolo { font-family: var(--display); font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; color: var(--ink); } /* Il titolo e' di un pezzo solo, nel nero del sistema: --ink, non #000, che il §2 vieta. L' qui non colora e non inclina — se un testo salvato dal pannello ne contiene ancora uno, il titolo resta uniforme invece di tornare rosso a sorpresa. */ .nat-hero-titolo em { color: inherit; font-style: normal; } .nat-hero-sottotitolo { font-size: 1.05rem; line-height: 1.6; max-width: 42rem; margin: 0 0 0.75rem; } /* Il pulsante sta attaccato al testo sopra e respira sotto. Sopra: il margine del paragrafo da solo non bastava, perche' .block-cta porta 18px di margin-top dal foglio globale che qui si sommavano — 32px in tutto. Azzerato, restano i 12px del paragrafo, cioe' una spaziatura sola invece di due impilate. Sotto: la foto partiva attaccata al pulsante, zero stacco. I 28px lo separano dal blocco immagine senza staccarlo dal testo a cui appartiene. */ /* L'apertura riusa .hero / .hero-marquee / .hero-photo / .hero-menu-btn dal foglio globale: quelle classi fanno gia' l'altezza a schermo pieno, la fascia scorrevole e il bollo. Qui servono solo le due regole che organizza ha per se', cioe' il bollo in basso a sinistra e l'immagine che riempie il riquadro. */ .nat-hero-home .hero-menu-btn { top: auto; bottom: 24px; left: 24px; right: auto; transform: none; } /* L'overflow resta: costa nulla e impedisce che qualunque cosa dentro il riquadro ne esca. Lo scale del 14% e' sparito col parallasse — serviva solo a dare l'aria entro cui l'immagine scorreva. */ .nat-hero-home .hero-photo { overflow: hidden; } .nat-hero-home .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Fascia scorrevole e bollo della freccia in rosso invece che corallo: sono i due elementi piu' grandi dell'apertura, e il corallo qui non direbbe Natale. */ /* La nav e' dentro .nat-page, quindi vira sul rosso solo su questa pagina senza toccare styles.css, che e' protetto e vale per tutto il sito: i puntini fra le voci, la voce Natale con il suo tag, e la pillola Prenota. */ .nat-page .topbrand-dot { background: var(--natale-rosso); } /* Le tre righe del menu a tendina: corallo su tutto il sito, rosse qui dentro come il resto della nav. La classe e' botnav-burger — .nav-burger esiste ma e' di un'altra nav, e prendere quella voleva dire scrivere una regola che non tocca niente e sembra fatta. */ .nat-page .botnav-burger span { background: var(--natale-rosso); } .nat-page .nav-natale, .nat-page .nav-natale-tag { color: var(--natale-rosso); } .nat-page .reserve-pill { border-color: var(--natale-rosso); color: var(--natale-rosso); } .nat-page .reserve-pill:hover { background: var(--natale-rosso); color: var(--cream); } .nat-hero-home .hero-marquee-item { color: var(--natale-rosso); } .nat-hero-home .hero-marquee-sep { color: var(--natale-rosso); } .nat-hero-home .hero-menu-core { background: var(--natale-rosso); } /* Il disco dietro il bollo era un velo semitrasparente, pensato per una hero scura: su questa foto chiara non staccava. Diventa pieno e chiaro — --cream-light, non #fff, che il §2 vieta — e la scritta che gli gira intorno diventa nera (--ink). Sul crema pieno il nero sta sopra 18:1; la scritta rossa di prima, sul lino, stava a 7:1 buoni ma su un fondo che cambiava tinta a ogni foto nuova. Cosi' il bollo non dipende piu' da cosa c'e' sotto. La sfocatura del fondo globale qui non serve piu' e non si vede: il disco e' opaco. */ .nat-hero-home .hero-menu-backdrop { background: var(--cream-light); } .nat-hero-home .hero-menu-text { fill: var(--ink); } /* In hover il bollo globale vira su --coral-deep, cioe' arancione, con un'ombra arancione. Qui va su un rosso piu' acceso: stesso gesto, stessa famiglia di colore. Schiarirlo verso il crema lo avrebbe smorzato invece che ravvivato. */ .nat-hero-home .hero-menu-btn:hover .hero-menu-core { background: var(--natale-rosso-acceso); box-shadow: 0 10px 28px color-mix(in oklab, var(--natale-rosso-acceso) 50%, transparent); } /* ── Il menù: una scheda incorniciata come quella dei menu serata, con dentro l'attesa invece dei piatti. Riusa .block e .tag, che sono globali — le classi ev-* della pagina evento vivono in events-styles.css, che qui non e' caricato. */ /* La sezione del menu' sta sul rosso come la promozione sopra: le due fasce si leggono come un blocco unico invece che alternarsi con il crema. La scheda dentro perde il fondo chiaro di .block e tiene solo la cornice, in crema smorzato. */ /* La fascia va da bordo a bordo come quella della promozione: il fondo e' della sezione, il contenuto resta vincolato dentro. Prima la sezione stessa era larga 60rem, quindi il rosso copriva solo la colonna centrale. */ .nat-menu { background: var(--natale-rosso); color: var(--cream); padding: 3rem 1.5rem; } /* calc(60rem - 3rem) e non 60rem: .nat-formule ha 60rem di larghezza PIU' 1.5rem di padding per lato, quindi le sue schede vivono dentro 912px, non 960. Chi si allinea a loro deve togliere quello stesso padding, o sborda di 24px per lato — e si nota, perche' i bordi sono visibili e corrono paralleli. */ .nat-menu-card { max-width: calc(60rem - 3rem); margin: 0 auto; align-items: center; text-align: center; padding: 2.5rem 1.5rem; background: transparent; border: 1px solid color-mix(in oklab, var(--cream) 35%, transparent); } .nat-menu-titolo { font-family: var(--display); font-size: 1.9rem; margin: 0 0 1.5rem; color: var(--cream); } .nat-menu-albero { display: block; margin: 0 auto 0.75rem; color: var(--cream); } .nat-menu-arrivo { font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--cream); margin: 0 0 0.6rem; } .nat-menu-attesa { font-size: 0.95rem; line-height: 1.6; max-width: 32rem; margin: 0 auto; opacity: 0.82; } /* ── Le quattro formule: 2×2 su desktop, una colonna sotto i 768px (§4). */ .nat-formule { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 60rem; margin: 0 auto; padding: 0 1.5rem 3rem; } /* Le schede si invertono al passaggio del mouse: a riposo chiare con il bordo rosso, in hover il rosso pieno. Ogni figlio deve seguire l'inversione, o su uno dei due fondi sparisce: icona, corsivo e pulsante hanno entrambi gli stati. I 200ms lineari sono quelli che il §9 assegna gia' al "coral wash on hover": il vocabolario del movimento non si allarga, si riusa. */ .nat-formula { display: flex; flex-direction: column; padding: 0; background: var(--cream-light); color: var(--espresso); border: 1px solid var(--natale-rosso); transition: background-color 200ms linear, color 200ms linear; } /* La foto sta sopra, al vivo dentro la cornice: il padding e' passato al corpo, o la scheda avrebbe una fascia crema intorno all'immagine e sembrerebbe incollata. Provata anche di lato, a destra del testo: al testo restavano 227px, cioe' quattro righe strette e i titoli lunghi spezzati in due. Sopra, larga, non toglie niente. */ .nat-formula-foto { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; } .nat-formula-foto img { width: 100%; height: 100%; object-fit: cover; display: block; /* Le quattro foto vengono da set diversi: una e' luce di giorno in sala, una e' tungsteno caldo, una ha gli schermi azzurri del buffet dietro. Un filo di seppia allinea il bianco e le fa leggere come uno shooting solo. La seppia pero' smorza da sola, e quattro foto di cibo smorte non fanno venire fame: la saturazione percio' SALE invece di scendere, e recupera quello che la seppia toglie. La tinta comune resta, il colore no. I due numeri: `sepia` decide quanto si somigliano, `saturate` quanta vita hanno. */ filter: saturate(1.14) contrast(1.09) sepia(0.1) brightness(1.02); } /* Anche la foto segue l'inversione: un velo rosso, non un filtro. Senza, in hover la scheda diventa rossa e l'immagine resta l'unica cosa ferma, e si stacca. */ .nat-formula-foto::after { content: ''; position: absolute; inset: 0; background: var(--natale-rosso); opacity: 0; transition: opacity 200ms linear; } .nat-formula:hover .nat-formula-foto::after { opacity: 0.3; } .nat-formula-corpo { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem; flex: 1; } .nat-formula:hover { background: var(--natale-rosso); color: var(--cream); } .nat-formula-icona { color: var(--natale-rosso); margin-bottom: 0; transition: color 200ms linear; } .nat-formula:hover .nat-formula-icona { color: var(--cream); } /* Il pulsante della scheda: fondo chiaro e scritta scura. Il §2 vieta sia #fff che #000, quindi sono --cream-light e --espresso, i due sostituti che prescrive. */ /* A riposo il pulsante e' un contorno rosso sul chiaro; quando la scheda si inverte diventa quello pieno e chiaro. */ .nat-formula .block-cta { margin-top: 0.9rem; background: transparent; color: var(--natale-rosso); border-color: var(--natale-rosso); transition: background-color 200ms linear, color 200ms linear, border-color 200ms linear; } .nat-formula:hover .block-cta { background: var(--cream-light); color: var(--espresso); border-color: var(--cream-light); } /* §2: em nel corpo su crema e' --leaf, su scuro e' --coral-soft. La scheda cambia fondo, quindi cambia anche questo. */ .nat-formula em { color: var(--leaf); } .nat-formula:hover em { color: var(--coral-soft); } /* line-height stretta: l'ereditata era 38px su un carattere da 25, e quasi 7px di aria sopra e sotto le lettere si leggevano come uno stacco che non c'era. */ .nat-formula-titolo { font-family: var(--display); font-size: 1.55rem; line-height: 1.15; margin: 0; } .nat-formula-testo { font-size: 0.95rem; line-height: 1.55; margin: 0; flex: 1; } /* ── Promozione: blocco scuro, pill ★ (§6.4 — unico non-carattere ammesso). */ .nat-promo { background: var(--natale-rosso); color: var(--cream); padding: 3rem 1.5rem; } /* Due colonne asimmetriche. A sinistra il titolo con la scadenza fa da ancora: e' la ragione per cui si legge la fascia. A destra i vantaggi, separati da filetti invece che da trattini o schede — i testi sono lunghi, e un filetto li divide senza pretendere che stiano in una scatola. */ /* La sezione resta a 60rem come tutte le altre: allargarla avrebbe disallineato la fascia dal resto della pagina. I pixel che servivano al primo vantaggio per stare su una riga — ne mancavano 29 — vengono solo dal rapporto fra le colonne e dallo spazio in mezzo, che si restringe da 48 a 32px. Il margine e' voluto: la colonna e' piu' larga del minimo necessario, cosi' il testo non torna su due righe alla prima parola aggiunta dal pannello o in inglese. La colonna di sinistra NON e' sticky: restare incollata mentre l'altra scorre si legge come un blocco fermo, non come un ancoraggio. */ .nat-promo-inner { max-width: calc(60rem - 3rem); margin: 0 auto; display: grid; grid-template-columns: 0.58fr 1fr; gap: 1.5rem; align-items: start; } /* Il tag pulsa per attirare l'occhio sulla scadenza. Bianco e nero sono --cream-light e --espresso: il §2 vieta sia #fff che #000. Il battito e' un alone che si espande e svanisce piu' una crescita dell'1,5% — il §9 vieta gli hover oltre 1.08, e qui si resta molto sotto. Spento del tutto da prefers-reduced-motion, come il §9 impone senza eccezioni. */ .nat-promo-pill { display: inline-flex; align-items: center; gap: 0.4rem; border: 1.5px solid var(--cream-light); border-radius: 999px; padding: 4px 12px; font-family: var(--condensed); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; background: var(--cream-light); color: var(--espresso); animation: nat-pulsa 2.4s ease-in-out infinite; } @keyframes nat-pulsa { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklab, var(--cream-light) 55%, transparent); } 70% { transform: scale(1.015); box-shadow: 0 0 0 10px color-mix(in oklab, var(--cream-light) 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklab, var(--cream-light) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .nat-promo-pill { animation: none; } } .nat-promo-titolo { font-family: var(--display); font-size: 2.2rem; line-height: 1.12; margin: 1rem 0 0; } /* I vantaggi arrivano come testo ricco dal pannello — chi scrive fa un elenco puntato, che e' il gesto naturale — quindi lo stile vale sia sul contenitore sia sull'elenco che ci trova dentro. Il pallino sparisce: a separare sono i filetti. */ .nat-promo-punti { list-style: none; padding: 0; margin: 0; border-top: 1px solid color-mix(in oklab, var(--cream) 28%, transparent); } .nat-promo-punti ul { list-style: none; padding: 0; margin: 0; } .nat-promo-punti p { margin: 0; } .nat-promo-punto, .nat-promo-punti li { padding: 1.35rem 0; border-bottom: 1px solid color-mix(in oklab, var(--cream) 28%, transparent); font-size: 1.02rem; line-height: 1.55; } @media (max-width: 900px) { .nat-promo-inner { grid-template-columns: 1fr; gap: 1.75rem; } .nat-promo-titolo { font-size: 1.8rem; } } /* ── Menù e sale meeting. */ /* Sale meeting: trittico. Sopra, titolo e testo affiancati; sotto, tre foto verticali in fila. Le schede formula qui sopra sono quattro rettangoli 16:9 in due colonne: se anche questa sezione impagina foto larghe in due colonne, si legge come una loro ripetizione. Tre foto in verticale cambiano numero e proporzione, e la sezione si distingue senza cambiare linguaggio. */ .nat-meeting { /* 60rem come .nat-formule, non calc(60rem - 3rem): qui non c'e' nessuna cornice visibile: quello che si allinea a occhio sono le foto, che vivono nel contenuto. Con 912px di larghezza totale il contenuto ne misurava 864, e la sezione rientrava di 24px per lato rispetto alle schede. Il taglio centrale combaciava lo stesso — entrambe centrate sulla pagina — e questo lo faceva sembrare allineato. */ max-width: 60rem; margin: 0 auto; padding: 4rem 1.5rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } /* Sei colonne anche dentro il testo, con lo stesso gap e sulla stessa larghezza: le tracce coincidono con quelle della sezione, quindi titolo e corpo si staccano sul 720 esatto, dove si staccano le schede formula. */ .nat-meeting-testo { grid-column: 1 / 7; grid-row: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; align-items: end; padding-bottom: 1.25rem; } .nat-meeting-titolo { grid-column: 1 / 4; font-family: var(--display); font-size: 2rem; line-height: 1.15; margin: 0; } .nat-meeting-corpo { grid-column: 4 / 7; font-size: 0.97rem; line-height: 1.6; margin: 0; } /* 3:2 e non piu' 3:4. Le foto delle sale sono orizzontali per natura — una sala riunioni e' larga — e il ritaglio verticale ne portava via la vetrata, lo schermo e la scritta sulla porta, cioe' quello che le rende riconoscibili. Tre riquadri orizzontali piccoli restano comunque un'altra cosa dalle quattro schede sopra: sono tre, su una riga sola, e larghi un terzo. */ .nat-meeting-fig { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; } .nat-meeting-fig img { width: 100%; height: 100%; object-fit: cover; display: block; } .nat-meeting-fig--a { grid-column: 1 / 3; grid-row: 2; } .nat-meeting-fig--b { grid-column: 3 / 5; grid-row: 2; } .nat-meeting-fig--c { grid-column: 5 / 7; grid-row: 2; } /* Sotto i 900px il titolo va sopra il testo: due colonne da 6rem non sono una griglia, sono due colonne di parole spezzate. Le foto restano in fila: sono verticali, quindi reggono lo stretto meglio di quanto reggerebbero impilate. */ @media (max-width: 900px) { .nat-meeting { padding: 3rem 1.5rem; } .nat-meeting-testo { grid-template-columns: 1fr; gap: 0.75rem; } .nat-meeting-titolo, .nat-meeting-corpo { grid-column: 1; } .nat-meeting-titolo { font-size: 1.75rem; } } /* Sotto i 700px le tre foto si impilano, una per riga e larghe tutta la colonna. Prima ne passava una larga e due mezze: con le foto verticali reggeva, con quelle orizzontali delle sale le due mezze scendevano a 130x86 — un tavolo e sette sedie in un francobollo, che non dice piu' niente a nessuno. */ @media (max-width: 700px) { .nat-meeting { grid-template-columns: 1fr; } .nat-meeting-testo, .nat-meeting-fig--a, .nat-meeting-fig--b, .nat-meeting-fig--c { grid-column: 1; grid-row: auto; } } /* ── Form: pattern «events booking form» di §6.10 — etichette visibili in Oswald 10px, campi riempiti di crema senza bordo, focus ring corallo 2px con 2px di offset, placeholder in corsivo. */ /* Fondo verde Stellar e non rosso: e' lo stesso --espresso di .block.dark, cioe' il fondo scuro che il sito usa dappertutto. Il rosso resta alle due fasce sopra — la promozione e il menu' — e il form chiude la pagina con l'altro colore del Natale. */ .nat-form { background: var(--espresso); padding: 3rem 1.5rem; } /* 912px come le schede formula, non 544: due colonne di campi hanno bisogno della larghezza della pagina, e cosi' i bordi del form cadono dove cadono quelli delle schede. */ .nat-form-inner { max-width: calc(60rem - 3rem); margin: 0 auto; } /* I campi vanno a coppie. Messaggio, consensi, pulsante ed esito attraversano entrambe le colonne: sono cose intere, non meta' di qualcosa. */ .nat-form-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; align-items: start; } .nat-form-campo--largo, .nat-form-consenso, .nat-form-esito, .nat-form-griglia button[type="submit"] { grid-column: 1 / -1; } /* Il pulsante sta su fondo verde scuro: il bordo corallo ereditato da .block-cta ci litigava. Diventa un verde chiaro, che e' --leaf schiarito col crema — nessun colore nuovo, la tavolozza del §2 e' chiusa. */ .nat-form-griglia button[type="submit"] { border-color: color-mix(in oklab, var(--leaf) 55%, var(--cream-light)); /* La scritta era corallo, ereditata da .block-cta. Diventa il verde scuro del form: il pulsante e' gia' una macchia chiara su fondo scuro, non gli serve un colore che urli. In hover si riempie del verde chiaro del suo bordo, invece del corallo pieno che .block-cta userebbe. */ color: var(--espresso); } .nat-form-griglia button[type="submit"]:hover { background: color-mix(in oklab, var(--leaf) 55%, var(--cream-light)); color: var(--espresso); } .nat-form label { display: block; font-family: var(--condensed); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in oklab, var(--cream) 72%, transparent); margin-bottom: 4px; } .nat-form input, .nat-form select, .nat-form textarea { width: 100%; background: color-mix(in oklab, var(--cream) 96%, transparent); color: var(--espresso); border: 0; padding: 12px 14px; font-family: var(--display); font-size: 15px; border-radius: 0; outline: none; } .nat-form input::placeholder, .nat-form textarea::placeholder { font-style: italic; opacity: 0.6; } /* L'anello di fuoco corallo del §6.10 qui non entra: e' arancione, e su questa pagina l'arancione non c'e'. Crema chiaro, che sul verde scuro stacca piu' del corallo e resta leggibile anche per chi naviga da tastiera. */ .nat-form input:focus, .nat-form select:focus, .nat-form textarea:focus { outline: 2px solid var(--cream-light); outline-offset: 2px; } .nat-form-campo { margin-bottom: 0.9rem; } .nat-form textarea { resize: vertical; } /* Il consenso è una frase sola con il link dentro: la casella le sta accanto, non sopra due righe di testo spezzato. */ .nat-form-consenso { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1.25rem 0; } .nat-form-consenso input { width: auto; flex: none; margin-top: 3px; } .nat-form-consenso span { font-size: 0.82rem; line-height: 1.5; color: color-mix(in oklab, var(--cream) 82%, transparent); } /* Il link dell'informativa: crema chiaro e sottolineato. Tolto il colore, la sottolineatura diventa l'unica cosa che lo distingue dal testo intorno — senza, sarebbe un link invisibile, e questo proprio sulla riga che parla di consenso. */ .nat-form-consenso a { color: var(--cream-light); text-decoration: underline; text-underline-offset: 2px; } .nat-form-esito { margin-top: 0.9rem; font-size: 0.85rem; } /* L'errore: un rosa chiaro, cioe' il rosso della pagina schiarito col crema. Il rosso pieno su verde scuro non si leggerebbe — sono due colori scuri — e il corallo sarebbe l'arancione che qui non vogliamo. */ .nat-form-esito.is-errore { color: color-mix(in oklab, var(--natale-rosso-acceso) 45%, var(--cream)); } @media (max-width: 768px) { .nat-formule { grid-template-columns: 1fr; } } /* Sotto i 700px i campi tornano in colonna: due select affiancate su 320px sono due select illeggibili. */ @media (max-width: 700px) { .nat-form-griglia { grid-template-columns: 1fr; } } /* §9: il movimento si rispetta, non si impone. */ @media (prefers-reduced-motion: reduce) { .nat-page * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Neve. Decorazione e basta: non intercetta i clic, e sparisce del tutto per chi ha chiesto meno movimento (§9). */ .nat-neve { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; } .nat-neve-fiocco { position: absolute; top: -5vh; color: var(--cream-light, #fff); /* Sul fondo scuro il fiocco si vede gia' da solo. Sul crema della pagina, cream-light su cream e' quasi invisibile (contrasto ~1.06:1): un contorno sottile con un token esistente (--grey-60, nessun colore nuovo) lo rende percepibile senza scurire il disegno, che lo farebbe sembrare grigio e sporco. drop-shadow e non box-shadow: qui l'elemento e' un SVG, e box-shadow avrebbe ombreggiato il suo rettangolo invece del fiocco. */ filter: drop-shadow(0 0 1.1px color-mix(in oklab, var(--grey-60) 70%, transparent)); animation-name: nat-cade; animation-timing-function: linear; animation-iteration-count: infinite; } /* Una sola @keyframes per tutti: deriva e rotazione arrivano dalle variabili che il componente scrive su ogni fiocco. I fallback servono se un giorno qualcuno usa la classe senza passarle. */ @keyframes nat-cade { from { transform: translate3d(0, -5vh, 0) rotate(0deg); } to { transform: translate3d(var(--deriva, 1.5rem), 105vh, 0) rotate(var(--giro, 360deg)); } } @media (prefers-reduced-motion: reduce) { .nat-neve { display: none; } }