/** Copyright (c) 2026 Protocol-Z. All rights reserved. Proprietary and Confidential. **/ /* Z Marine. Eredita tutto da corporate.css e ridefinisce solo la palette e i blocchi propri: mare, scafo che gira, liste della pagina. */ :root { /* L'accento di Z Marine sta in corporate.css, su [data-prodotto="z-marine"]. Stava anche qui, con valori diversi, e vinceva quello di corporate perche' l'attributo e' sul : due fonti per lo stesso colore, di cui una senza effetto. Qui restano solo i valori che corporate non conosce: il fondo, il mare e il disegno della barca. */ --bg: #03080d; --bg-elev: #08131b; /* Tinte lette dallo shader dell'acqua. */ --mare-profondo: #04162b; --mare-basso: #0b7d8c; --mare-cielo: #17395c; --mare-sole: #ffeec6; /* Il disegno della barca. Linea scura su scafo chiaro in tutti e due i temi: e' come si legge una tavola tecnica, e sul mare scuro lo scafo bianco stacca da solo. */ --yacht-linea: #0d5f6b; --yacht-linea-tenue: #2b7f8b; --yacht-vetro-fondo: rgba(23, 78, 122, 0.34); --yacht-vetro-bordo: #14526b; --yacht-pieno: rgba(243, 251, 252, 0.93); --yacht-pieno-forte: rgba(226, 242, 245, 0.97); /* Dentro lo scafo aperto non c'e' piu' il pieno chiaro a reggere il tratto: una linea scura su fondo scuro sparisce. La sezione ha percio' un colore suo, che nel tema chiaro coincide con quello normale perche' li' il fondo e' gia' bianco. */ --yacht-linea-dentro: #6fcfda; } [data-theme="light"] { --bg: #ffffff; --bg-elev: #f4f8f9; --mare-profondo: #0a3a63; --mare-basso: #16a3b0; --mare-cielo: #a9d5e8; --mare-sole: #fff6dd; /* Su fondo bianco uno scafo bianco sparisce: il pieno prende una punta di grigio freddo e la linea si scurisce, cosi' la sagoma resta netta senza cambiare disegno. */ --yacht-linea: #0a4a55; --yacht-linea-tenue: #2b7079; --yacht-vetro-fondo: rgba(20, 82, 128, 0.22); --yacht-vetro-bordo: #123f57; --yacht-pieno: #e6f0f3; --yacht-pieno-forte: #d5e6ec; --yacht-linea-dentro: #0a4a55; } /* --- Primo schermo ------------------------------------------------------------------ */ /* IL BINARIO E' UN ELEMENTO, NON UN AVANZO DI SOTTRAZIONE. La corsa della sequenza e' quanto resta della sezione dopo aver toccato cio' che sta fermo: `altezzaSezione - offsetDiCioCheStaFermo - altezzaDiCioCheStaFermo`. Dichiarando l'altezza della sezione con `min-height`, quel resto non era garantito: su telefono il testo del primo schermo entra nel flusso della sezione, quindi l'offset di cio' che sta fermo diventa l'altezza del testo, e appena testo piu' fascia superavano il minimo l'altezza della sezione diventava il suo contenuto e la corsa si annullava. Con corsa nulla la sequenza non e' piu' una funzione della posizione: sta all'inizio e poi salta alla fine, che e' il difetto che si vedeva sul telefono e non su desktop. Qui la corsa e' un elemento vuoto e dichiarato in fondo alla sezione: l'altezza della sezione e' contenuto piu' binario, quindi il resto vale esattamente il binario, su qualunque schermo e con qualunque lunghezza di testo. Le misure sono in `svh`, non in `vh`. Su telefono `vh` cambia quando la barra degli indirizzi si ritira: il binario si accorciava sotto al dito e la sequenza saltava all'indietro. `svh` e' l'altezza a barra visibile e non cambia mai. */ /* Il riancoraggio dello scorrimento va spento qui dentro: e' il meccanismo con cui il browser compensa i cambi di altezza sopra la finestra, e su una sezione alta due schermi e mezzo, con i caratteri che arrivano e la tela dell'acqua che si accende, quella compensazione sposta la pagina da sola dentro la sequenza. Fuori da questa sezione resta attivo, dove serve davvero. */ .hero-mare { position: relative; overflow-anchor: none; } .hero-binario { height: 150vh; height: 150svh; pointer-events: none; } .hero-mare-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; } .hero-mare-stage .wrap { position: relative; z-index: 2; display: grid; gap: var(--sp-2); } /* IL TITOLO ESCE MENTRE LA BARCA SI CORICA. In pianta la barca e' stretta e sta accanto alla colonna del testo, quindi il titolo si legge. Coricata e' lunga quanto lo schermo e ci passa sotto: il testo puo' restare per il tratto in cui sta uscendo, ma a giro compiuto sopra la barca non ci deve essere piu' niente. Il velo che protegge le righe se ne va con loro, perche' da li' in poi non protegge nulla e sbiadirebbe la poppa senza ragione. Su telefono non serve niente di tutto questo: il testo sta sopra la fascia della barca, non davanti, e se ne va da solo scorrendo. */ .hero-testo { max-width: 46ch; opacity: calc(1 - var(--testo-via, 0)); transform: translateY(calc(var(--testo-via, 0) * -20px)); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .hero-mare-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, var(--bg) 0%, var(--bg) 30%, transparent 70%); background: linear-gradient(96deg, var(--bg) 0%, var(--bg) 26%, color-mix(in srgb, var(--bg) 88%, transparent) 44%, transparent 68%); opacity: calc(1 - var(--testo-via, 0)); transition: opacity 0.4s var(--ease); pointer-events: none; z-index: 1; } .hero-mare h1 { font-size: var(--t-hero); max-width: 16ch; } .hero-mare p.lead { font-size: var(--t-guida); color: var(--text-secondary); max-width: 56ch; margin: var(--sp-2) 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } /* I TESTI STANNO VICINI ALLA SEQUENZA, NON A UNO SCHERMO DI DISTANZA. La sezione della barca finisce dove finisce il binario, e subito dopo comincia quella che spiega cosa cambia: fra le due c'era il riempimento normale delle sezioni, cioe' fino a centoquattro pixel, e sommato al fondo della fascia agganciata diventava mezzo schermo di vuoto. Qui il riempimento fra la sequenza e cio' che segue si riduce, e su telefono scompare: la barca si corica sull'acqua e la riga successiva e' subito sotto. */ .hero-mare + section { padding-top: var(--sp-2); } @media (max-width: 900px) { .hero-mare + section { padding-top: 10px; } } /* --- Il mare ------------------------------------------------------------------------ */ /* Due strati sovrapposti: sotto il ripiego in CSS, sopra il canvas WebGL. Il canvas diventa visibile solo quando lo shader è partito davvero, così un dispositivo senza WebGL o con movimento ridotto non resta con una fascia nera. A fine sequenza il mare non torna a riempire tutto: si ritira in una fascia bassa e la barca coricata ci galleggia sopra. `--onda` va da 0 (mare su tutta la scena, vista dall'alto) a 1 (fascia sotto lo scafo). IL PELO DELL'ACQUA VA DOVE STA IL GALLEGGIAMENTO, non a una percentuale scelta a occhio: altrimenti la barca non galleggia, sta dentro una nebbia. Il centro del riquadro dello scafo e' a meta' della scena, e il galleggiamento sta 170 unita' di disegno piu' in basso (400 su 460, meno il mezzo riquadro): quel 170 diviso 1400 e' la frazione della lunghezza a barca coricata, ed e' l'unico numero che serve. */ .mare-zona { position: absolute; left: 0; right: 0; top: calc(var(--onda, 0) * (50% + var(--L-coricata) * 0.1214 + var(--scendi, 0) * var(--L-coricata) * 0.0263)); bottom: 0; pointer-events: none; z-index: 0; /* La sfumatura in cima e' larga: con un margine stretto il pelo dell'acqua diventava una mensola netta sotto lo scafo invece di una superficie. */ mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 88%, transparent 100%); opacity: var(--acqua, 1); transition: opacity 0.45s var(--ease), top 0.5s var(--ease); } #mare { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); } #mare.acceso { opacity: 1; } /* Ripiego: quattro bande con parallasse e creste in gradiente. */ .mare-css { position: absolute; inset: 0; overflow: hidden; } .mare-css span { position: absolute; left: -50%; width: 200%; height: 100%; background-repeat: repeat-x; background-position: 0 bottom; opacity: 0.85; animation: scorri var(--dur, 22s) linear infinite; } .mare-css span:nth-child(1) { --dur: 26s; background-image: radial-gradient(120% 90% at 50% 120%, var(--mare-basso) 0%, var(--mare-profondo) 70%); opacity: 1; animation: none; left: 0; width: 100%; } .mare-css span:nth-child(2) { --dur: 19s; background-image: radial-gradient(60px 22px at 60px 100%, color-mix(in srgb, var(--mare-basso) 70%, #ffffff) 0%, transparent 70%); background-size: 220px 100%; opacity: 0.5; } .mare-css span:nth-child(3) { --dur: 13s; background-image: radial-gradient(40px 14px at 40px 100%, color-mix(in srgb, var(--mare-basso) 40%, #ffffff) 0%, transparent 70%); background-size: 140px 100%; opacity: 0.35; } .mare-css span:nth-child(4) { --dur: 9s; background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--mare-sole) 60%, transparent) 45%, transparent 90%); background-size: 340px 100%; opacity: 0.22; } @keyframes scorri { to { transform: translateX(-25%); } } /* SENZA COPIONE LA BARCA SI VEDE LO STESSO. Il disegno entra dissolvendo, e la dissolvenza parte da zero: e' il copione della pagina a portarla a uno dopo due fotogrammi. Se il copione non gira, pero', quello zero resta, e al posto della barca c'era un riquadro vuoto alto due schermi e mezzo. Il valore di partenza e' quindi quello d'arrivo, e a metterlo a zero e' la classe che la pagina si mette da sola quando il copione c'e' davvero: cosi' l'ingresso resta un ingresso e l'assenza non e' un guasto. Per la stessa ragione, senza copione la sezione non ha il suo binario: sarebbe scorrimento a vuoto verso una sequenza che non parte. */ @media (prefers-reduced-motion: no-preference) { .js-anim .yacht-scena { --avanti: 0; } } html:not(.js-anim) .hero-binario { display: none; } html:not(.js-anim) .hero-mare-stage { position: static; height: auto; display: block; } html:not(.js-anim) .hero-mare-stage::before { display: none; } html:not(.js-anim) .scena-fondo { position: relative; inset: auto; height: 52vh; margin-top: var(--sp-2); } html:not(.js-anim) .yacht-scena { --giro: 1; --centra: 1; --onda: 1; transform: translate(-50%, -50%); } @media (prefers-reduced-motion: reduce) { .mare-css span { animation: none; } } /* --- La scena della barca ------------------------------------------------------------ */ .scena-fondo { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; /* In pianta la barca sta in piedi e a limitarla e' l'altezza; di fianco e' coricata e a limitarla e' la larghezza. Una misura sola andrebbe bene per una delle due e sprecherebbe l'altra, quindi la lunghezza cresce insieme alla virata. Le due misure stanno qui, e non sullo scafo, perche' anche il mare deve poterle leggere: e' con quelle che trova il proprio pelo. */ /* LE DUE MISURE SI PRENDONO SULLA FASCIA, NON SULLA FINESTRA. La fascia della scena non e' una frazione fissa dello schermo: su desktop e' quasi tutta la finestra, su un telefono piccolo e' un terzo, perche' sopra c'e' il testo e il testo non si accorcia insieme allo schermo. Misurata in unita' della finestra, la barca restava un francobollo in mezzo a una fascia larga oppure sbordava da una fascia stretta. Le unita' di contenitore la misurano su cio' che la contiene davvero. Le righe in unita' della finestra restano come ripiego per chi non le conosce. */ container-type: size; --L-dritta: min(86vh, 86svh, 52vw); /* In pianta la barca sta in piedi: a limitarla e' l'altezza della fascia, e la larghezza entra in gioco solo su una fascia molto bassa e molto stretta. */ --L-dritta: min(90cqh, 260cqw); /* Coricata la barca deve prendersi la fascia: e' il fotogramma su cui si guarda il disegno, e un disegno di tavola tecnica si legge solo se e' grande. */ --L-coricata: min(90vw, 176vh, 176svh, 1420px); /* Coricata e' il contrario: comanda la larghezza. */ --L-coricata: min(92cqw, 280cqh, 1420px); } /* IL MODELLO STA NELLO SPAZIO, NON E' UN'IMMAGINE CHE CAMBIA. `--L` e' la lunghezza fuori tutto a schermo, e da li' discende ogni altra misura: `--u` e' l'unita' del disegno, cioe' un 1400esimo della lunghezza. Le quote sono quelle del riferimento comune, quindi ogni piano si posiziona con l'aritmetica del disegno. */ .yacht-scena { /* Il disegno c'e'. A nasconderlo per farlo entrare e' la classe che la pagina si mette da sola quando il copione gira: senza copione non c'e' nessun ingresso da aspettare. */ --avanti: 1; --L: calc(var(--L-dritta) * (1 - var(--giro, 0)) + var(--L-coricata) * var(--giro, 0)); --u: calc(var(--L) / 1400); --sposta: 24vw; /* A meta' virata la barca e' in diagonale, e una diagonale occupa piu' di tutti e due i lati: senza rientrare li' lo scafo esce dal riquadro proprio nel punto in cui si guarda. `--picco` vale 0 alle due estremita' e 1 a meta'. */ --picco: calc(var(--giro, 0) * (1 - var(--giro, 0)) * 4); --rientro: 0.26; position: absolute; top: 50%; left: 50%; width: var(--L); height: calc(var(--u) * 460); /* La prospettiva e' proporzionata alla barca, non un numero fisso: con un valore fisso su schermo piccolo l'effetto sparisce e su schermo grande diventa un grandangolo. */ perspective: calc(var(--L) * 1.9); perspective-origin: 50% 50%; transform: translate(-50%, -50%) translateX(calc((1 - var(--centra, 0)) * var(--sposta))) translateY(calc(var(--scendi, 0) * 8%)) scale(calc(1 - var(--picco, 0) * var(--rientro))); transition: transform 0.35s var(--ease); } /* Due rotazioni insieme, ed e' quello che si legge come "la barca vira": `rotateX` porta lo sguardo dallo zenit all'orizzonte (dalla pianta al fianco), `rotateZ` corica la barca da verticale a orizzontale. Sono la stessa manovra vista da due assi, e vanno insieme. LA TRANSIZIONE E' LUNGA, ED E' LEI A FARE LA MORBIDEZZA. Lo scorrimento non arriva a cadenza regolare: una raffica di eventi, poi un vuoto. Interpolare fra un valore e l'altro nel copione della pagina vuol dire ricalcolare lo stile di ventinove strati a ogni fotogramma, sul filo principale, che e' proprio dove non c'e' tempo; la transizione, invece, interpola la trasformazione gia' calcolata e lo fa dove le trasformazioni si compongono. E' il motivo per cui accorciandola la scena si vedeva a scatti. Resta un solo caso da trattare a mano, ed e' il salto della posizione: li' la transizione riprodurrebbe tutta la rotazione nel suo tempo, e sembrerebbe un'animazione che riparte da sola. Per quel fotogramma la transizione si toglie, e il salto resta un salto. Dall'alto la prua guarda in su, a giro compiuto il fianco guarda a sinistra. */ .yacht-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateZ(calc((1 - var(--giro, 0)) * -90deg)) rotateX(calc((1 - var(--giro, 0)) * -90deg)); transition: transform 0.4s var(--ease); } .strato { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity 0.28s var(--ease); } /* Ponti e linee d'acqua sono piani orizzontali: `rotateX(90deg)` li corica nel piano di galleggiamento, `translateY` li porta alla quota, misurata come scarto dal centro del riquadro (230). La quota arriva in linea dal generatore, insieme al disegno: aggiungere un ponte o una linea d'acqua non richiede una regola in piu' qui. */ .ponte, .linea-acqua { transform: translateY(calc(var(--u) * var(--quota, 0))) rotateX(90deg); } /* Le ordinate sono piani trasversali: `rotateY(90deg)` le mette di traverso e `translateX` le porta alla loro stazione lungo la barca. La stazione arriva in linea dal generatore, quindi aggiungerne una non richiede una regola in piu'. */ .ordinata { transform: translateX(calc(var(--u) * (var(--staz) - 700))) rotateY(90deg); } /* Il profilo sta sul piano di simmetria, a mezzeria, dove sta anche sul vero: e' la sezione longitudinale della barca, non una parete appiccicata di lato. A dare il fianco curvo sono le linee d'acqua, che e' l'unico modo perche' la parete si pieghi davvero girando invece di restare un cartone. */ .murata { transform: none; } /* Per un fotogramma, davanti a un salto della posizione: senza questo la barca riprodurrebbe tutta la rotazione invece di trovarsi gia' dove deve stare. */ .yacht-scena.scatta, .yacht-scena.scatta .yacht-3d, .yacht-scena.scatta .strato { transition: none; } /* TRE PESI DI LINEA, E LO SPESSORE SCALA COL DISEGNO. Il tratto non e' a spessore fisso in pixel. In pianta lo scafo e' sei volte piu' lungo che largo, quindi a schermo il baglio e' un nastro di poco piu' di cento pixel: con lo spessore bloccato le linee si impastano e il disegno sembra schiacciato. Scalando, in pianta vengono sottili e nitide e in profilo, che e' reso tre volte piu' grande, vengono giustamente piu' corpose. I valori sono percio' piu' alti di quelli di una tavola a grandezza naturale: vanno letti alla scala a cui il disegno si vede davvero. */ .y-linea { fill: none; stroke: var(--yacht-linea); stroke: color-mix(in srgb, var(--yacht-linea) calc(var(--pelle, 1) * 100%), var(--yacht-linea-dentro)); stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; } .y-forte { stroke-width: 5; } .y-sottile { stroke-width: 2.2; } .y-tenue { stroke: var(--yacht-linea-tenue); stroke: color-mix(in srgb, var(--yacht-linea-tenue) calc(var(--pelle, 1) * 100%), var(--yacht-linea-dentro)); stroke-width: 1.8; opacity: 0.66; } /* Il vetro e' una superficie, non un tappo: in pianta un riempimento pieno copriva quello che sta sotto e i tre ponti diventavano tre placche sovrapposte. */ .y-vetro { fill: var(--yacht-vetro-fondo); stroke: var(--yacht-vetro-bordo); stroke-width: 2.2; } .ponte .y-vetro { fill-opacity: 0.55; } .y-pieno { fill: var(--yacht-pieno); stroke: none; } .y-pieno-forte { fill: var(--yacht-pieno-forte); stroke: none; } /* IL FIANCO E' IL DISEGNO STESSO, MASCHERATO DENTRO L'SVG. Ricavarne vettori lasciava sbavature: da un raster con tratti di un pixel non si tira fuori informazione che non c'e'. Il disegno resta quello che e' e maschera due rettangoli di colore, uno col pieno del tema per il corpo e uno con la linea del tema per l'inchiostro. La maschera dell'inchiostro e' in scala di grigio, quindi porta con se' anche il tratteggio delle vetrate, che esce come mezzo tono senza separarlo a soglie. Il mascheramento sta dentro l'SVG e non qui: con `mask-image` su un div, su iOS la maschera non veniva applicata e i due strati si dipingevano come rettangoli pieni, cioe' sul telefono si vedeva un riquadro bianco al posto della barca. Qui restano solo i colori. */ .y-corpo-mare { fill: var(--yacht-pieno); opacity: var(--avanti, 0); transition: opacity 0.9s var(--ease); transition-delay: 0.2s; } .y-inchiostro-mare { fill: var(--yacht-linea); fill: color-mix(in srgb, var(--yacht-linea) calc(var(--pelle, 1) * 100%), var(--yacht-linea-dentro)); opacity: var(--avanti, 0); transition: opacity 0.9s var(--ease); transition-delay: 0.35s; } /* Il tratto si disegna una volta sola all'ingresso. `pathLength="1"` normalizza ogni percorso, cosi' non serve indovinare la lunghezza elemento per elemento. */ .y-traccia { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--avanti, 0)); transition: stroke-dashoffset 1.4s var(--ease); transition-delay: var(--rit, 0s); } /* IL CORPO BIANCO E' UNO SOLO. Girando non deve sembrare che la parte bianca sia fatta di pezzi sovrapposti. Prima lo era: ogni piano portava il suo riempimento semitrasparente e a quaranta gradi se ne accavallavano sette, quindi si vedevano le giunzioni e il grigio si sommava. Qui i ruoli sono separati: il pieno dello scafo sul profilo resta pieno e opaco per tutta la rotazione, ed essendo uno solo non ha giunzioni da mostrare; i piani dei ponti perdono il riempimento mentre si gira e restano di sola linea, che e' quello che disegna la struttura invece di impastarla. `--pelle` vale 1 alle due soste e quasi 0 a meta' giro. */ /* A meta' giro il tratto non va sbiadito troppo: nel tema chiaro lo scafo e' quasi bianco su bianco, e sotto un certo punto la barca spariva proprio nel fotogramma in cui la si guarda. */ .yacht-scena { --pelle: calc(1 - var(--picco, 0) * 0.6); } .y-pieno, .y-pieno-forte { opacity: var(--avanti, 0); transition: opacity 0.6s var(--ease); transition-delay: calc(var(--rit, 0s) + 0.5s); } /* A meta' giro i piani orizzontali si vedono di sbieco, e un piano di sbieco pieno e' una lastra grigia che sporge dal fianco: sono lastre cosi' che facevano sembrare la barca un mazzo di fogli invece di un solido. Il riempimento quasi sparisce e resta il tratto, che e' quello che racconta la struttura. */ .ponte .y-pieno, .ponte .y-pieno-forte { opacity: calc(var(--avanti, 0) * (1 - var(--picco, 0) * 0.88)); transition: opacity 0.3s var(--ease); } /* Le vetrate della pianta si spengono del tutto a meta' giro. Sono superfici scure, e una superficie scura vista di taglio non e' una vetrata: e' una macchia appoggiata sul fianco. */ .ponte .y-vetro { opacity: calc(var(--avanti, 0) * (1 - var(--picco, 0))); transition: opacity 0.3s var(--ease); } /* Lo scafo del profilo non sbiadisce mai: e' il corpo. */ .murata .y-pieno { opacity: var(--avanti, 0); } /* Ogni piano si accende quando ha senso vederlo. Dall'alto comandano i ponti; di fianco comanda il profilo, e i piani orizzontali sono di taglio, quindi si spengono. ORDINATE E LINEE D'ACQUA ESISTONO SOLO NEL GIRO. Alle due soste sono di taglio e non disegnano niente: lasciarle accese riempiva la vista dall'alto di trattini staccati che sembravano un errore. `--picco` vale 0 alle due estremita' e 1 a meta', quindi compaiono mentre lo scafo si piega, che e' l'unico momento in cui raccontano qualcosa, e sono loro a rendere il passaggio fra sopra e fianco un attraversamento invece di un cambio di immagine. */ /* I ponti si spengono del tutto, non fino a un quinto: a giro compiuto sono di taglio, e un piano di taglio non e' un piano, e' una riga grigia appoggiata sopra il fianco. Era quella che si vedeva passare sopra la tuga a fine sequenza. */ .ponte { opacity: calc(1 - var(--giro, 0)); } .ponte[data-liv="inferiore"] { opacity: calc((1 - var(--giro, 0)) * 0.5); } /* Il fianco e' il soggetto, non uno dei piani: a meta' giro deve gia' reggere la scena, e a sessantacinque centesimi si vedevano le linee della carena attraverso lo scafo. */ .murata { opacity: calc(0.5 + var(--giro, 0) * 0.5); } /* Linee d'acqua e ordinate accompagnano, non competono: sono tante, e alla stessa forza del fianco il fotogramma di mezzo diventava un reticolo. */ .linea-acqua { opacity: calc(var(--picco, 0) * 0.7); } .ordinata { opacity: calc(var(--picco, 0) * 0.6); } @media (max-width: 900px) { /* SU TELEFONO IL PALCO E' UNA COLONNA: IL TESTO SOPRA, LA BARCA SOTTO. Su schermo stretto non c'e' una colonna libera accanto al titolo, quindi sovrapporre testo e disegno non e' un'opzione: si sovrappongono e non si legge ne' l'uno ne' l'altro. E non e' un'opzione nemmeno far scorrere via il testo lasciando la barca da sola, perche' per tutta la sequenza resterebbe fermo sullo schermo il solo disegno, con sotto una fascia vuota alta mezzo schermo: era quello che si vedeva prima. Qui il palco resta un riquadro agganciato alto uno schermo, come su desktop, ma dispone i suoi due pezzi in colonna invece di sovrapporli. Il testo sta in cima e non se ne va, la fascia della barca prende tutto lo spazio che resta, e non c'e' un pixel vuoto. Cade anche tutta la famiglia di difetti del `display: contents`, primo fra tutti il velo che finiva agganciato alla sezione intera e passava davanti alla poppa sbiadendola. */ .hero-mare { padding-top: 4px; } .hero-binario { height: 130vh; height: 130svh; } .hero-mare-stage { flex-direction: column; align-items: stretch; } /* Il velo protegge le righe scritte sopra il disegno: qui non ci sono, il testo sta sopra la fascia della barca e non davanti. */ .hero-mare-stage::before { display: none; } .hero-mare-stage .wrap { flex: none; } .hero-testo { opacity: 1; transform: none; max-width: none; } /* Il titolo resta grande: e' la prima cosa che si legge, e rimpicciolirlo per far posto al disegno vuol dire togliere forza proprio dove serve. A cedere e' il sommario, che si stringe di un paio di punti, e la fascia della barca, che prende quello che resta con un minimo sotto il quale la pianta non ci starebbe. */ .hero-mare p.lead { font-size: var(--t-corpo); line-height: 1.45; margin: 12px 0; } .hero-mare-stage .wrap { gap: 14px; } .scena-fondo { position: relative; inset: auto; flex: 1 1 auto; min-height: 32svh; margin-top: 6px; } .yacht-scena { --sposta: 0px; --rientro: 0.06; } .y-tenue { opacity: 0.55; } } @media (max-width: 560px) { .hero-binario { height: 120vh; height: 120svh; } /* IL DETTAGLIO NON SI TOGLIE SU TELEFONO, SI INGROSSA. Prima qui sparivano battagliole, stazioni e la meta' degli oblo': su schermo piccolo erano diventati rumore, ma togliere il dettaglio vuol dire mostrare una barca diversa da quella che si vede su desktop. E il problema non era la quantita', era lo spessore: il tratto scala con il disegno, quindi a schermo stretto scendeva sotto il pixel e da linea diventava una velatura grigia. Qui si alza, e il dettaglio resta tutto e si legge. */ .y-linea { stroke-width: 4.6; } .y-forte { stroke-width: 6.4; } .y-sottile { stroke-width: 3.2; } .y-tenue { stroke-width: 2.6; opacity: 0.62; } } @media (prefers-reduced-motion: reduce) { /* Due correzioni distinte, e servono tutte e due. La prima: le proprieta' restano ferme, ma "ferme" vuol dire ai valori di arrivo, non a quelli di partenza. Senza dirlo, `--giro` resta 0, i ponti restano coricati (quindi di taglio, invisibili) e le murate spente, e la barca non si vede affatto. La seconda: la sezione torna alta quanto un primo schermo normale. Il binario e' l'unica cosa che la allunga, quindi basta togliere lui: lasciarlo, anche senza animare niente, obbligherebbe a scorrere il vuoto per superare la sezione, che e' proprio cio' che la preferenza chiede di evitare. */ .hero-mare { padding: var(--sp-4) 0; } .hero-binario { display: none; } .hero-mare-stage { position: static; height: auto; display: block; } .hero-mare-stage::before { display: none; } .scena-fondo { position: relative; inset: auto; height: 52vh; margin-top: var(--sp-2); } .hero-testo { opacity: 1; transform: none; } .yacht-scena { --giro: 1; --avanti: 1; --centra: 1; --onda: 1; --scendi: 0; transform: translate(-50%, -50%); } .yacht-scena, .yacht-3d, .strato, .ponte, .y-traccia, .y-pieno, .y-pieno-forte { transition: none; } .y-traccia { stroke-dashoffset: 0; } } /* --- La gamma ------------------------------------------------------------------------ */ .g-nome { font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 550; letter-spacing: -0.03em; } .g-desc { color: var(--text-secondary); font-size: var(--t-corpo); } /* --- Chi lo usa --------------------------------------------------------------------- */ /* QUATTRO, DUE, UNA. MAI TRE. Con `auto-fit` e una larghezza minima, quattro schede fra 852 e 1127 pixel di finestra finivano tre sopra e una sola sotto, in un angolo: e' esattamente la fascia di un tablet in orizzontale e di un portatile piccolo. Le soglie qui sono dichiarate, quindi la riga e' sempre piena, e le schede si allungano invece di restare strette con l'aria intorno. */ /* Quattro colonne fisse a qualunque larghezza: su un telefono da 390 pixel ogni colonna scendeva sotto i 90, e una parola come "Concessionari" e' piu' larga di cosi'. La pagina prendeva 17 pixel di scorrimento orizzontale. Le colonne scendono a due e poi a una. */ .usi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: var(--sp-3); } @media (max-width: 1000px) { .usi { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .usi { grid-template-columns: minmax(0, 1fr); } } .usi .card-icon { width: 54px; height: 54px; } .usi .card-icon .material-symbols-outlined { font-size: 30px; } /* --- Come entra in casa -------------------------------------------------------------- */ /* .passi, .passo e il gruppo .contact stavano anche qui, identici a corporate.css. */ /* --------------------------------------------------------------------------- Gamma */ /* Quattro riquadri, non un elenco piatto. C'era anche la lunghezza fuori tutto accanto al nome. Non ci stava: queste non sono barche che vendiamo noi, sono i tipi di scafo che un cantiere puo' mettere sulla piattaforma, e scrivere 24 metri accanto a "Flybridge" faceva sembrare la sezione un listino nostro. L'icona resta un'icona: dice di che categoria si tratta, non prova a disegnare lo scafo. */ .gamma-carte { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } .gamma-carta { display: flex; flex-direction: column; gap: 10px; padding: var(--pad-scheda); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .gamma-icona { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-testo); } .gamma-icona .material-symbols-outlined { font-size: 28px; } .gamma-carta .g-nome { margin: 0; } .gamma-carta .g-desc { margin: 0; } @media (max-width: 760px) { .gamma-carte { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } } /* ----------------------------------------------------------------------------- FAQ */ /* `

` invece di una fisarmonica scritta a mano: si apre anche senza JavaScript, la ricerca del browser ci trova dentro il testo chiuso, e la tastiera funziona da sola. */