/* ============================================================ VascularReport — sfondo a onde sfumate ------------------------------------------------------------ Sostituisce lo sfondo animato a griglia di caratteri (assets/sfondo-griglia.js, 19 KB di JavaScript), cancellato il 14 agosto 2026. Differenze rispetto a quello che c'era prima: - nessun JavaScript e nessun : un solo elemento fisso dietro alla pagina e tre bande che scorrono; - il file e' condiviso da tutte le pagine, quindi si scarica una volta sola e una modifica qui cambia il sito intero. Non e' copiato dentro le pagine come tanto altro CSS del progetto. COME SI USA IN UNA PAGINA NUOVA 1. nel : 2. subito dopo : PER CAMBIARE L'INTENSITA' Solo le quattro variabili --forza-* qui sotto. Sono l'unico punto da toccare: le .onda non hanno 'opacity'. ============================================================ */ /* Interpolazione gradiente in oklab: colori intermedi piu' puliti, senza il grigiore che l'sRGB introduce a meta' strada. Il valore vuoto e' voluto — sui browser che non la supportano la variabile resta vuota e il gradiente funziona lo stesso. */ :root{ --in-oklab: ; } @supports (background: linear-gradient(in oklab, white, black)){ :root{ --in-oklab: in oklab; } } .sfondo-onde{ position: fixed; inset: 0; z-index: -1; /* dietro al contenuto, sopra il fondo pagina */ pointer-events: none; /* non intercetta mai click, focus o selezione */ overflow: hidden; /* ---- LE MANOPOLE DELL'INTENSITA' ---- Quanto colore pieno entra nella velatura: 0% = invisibile, 100% = tinta piatta. Perche' color-mix e non le variabili --accent-*-soft: quelle sono gia' tinte chiarissime (intorno al 95% di luminosita') e, stese su fondo bianco, sparivano. Qui si parte dai colori pieni del sito e si decide in questo punto quanto diluirli. */ --forza-1: 30%; /* banda di fondo, la piu' alta */ --forza-2: 22%; /* banda intermedia */ --forza-3: 15%; /* banda in primo piano, la piu' bassa */ --forza-velo: 42%; /* velatura dall'alto */ /* ---- PALETTE, CON RIPIEGHI ---- Sei pagine (demo, login, reset-password, offline, en/wells-score-dvt) non caricano site.css e hanno una palette ridotta: --accent-bright e --accent-2 li' non esistono. Senza ripiego l'intera dichiarazione color-mix sarebbe invalida e lo sfondo non comparirebbe affatto, in silenzio. La catena scende su --accent e, in ultima istanza, sui valori del tema chiaro. */ --onda-a: var(--accent-bright, var(--accent, #2e90d9)); --onda-b: var(--accent-2, var(--accent, #0b6f9f)); --onda-c: var(--accent, #0d5fb0); --onda-velo: var(--accent-soft, #e6f1fb); /* Velatura d'insieme: scende dall'alto e si spegne a meta' pagina. */ background: linear-gradient(to bottom var(--in-oklab), color-mix(in oklab, var(--onda-velo) var(--forza-velo), transparent) 0%, transparent 46%); } /* Piccola barchetta a vela che naviga FRA la seconda e la terza onda: scafo rosso, vele bianche. E' decorativa come il resto di .sfondo-onde (gia' aria-hidden sul contenitore) e resta un'unica riga di CSS su ogni pagina: e' lo sfondo di uno pseudo-elemento, non un'immagine da aggiungere all'HTML. PROFONDITA' Lo pseudo-elemento verrebbe dipinto dopo tutti i figli, quindi davanti a tutte e tre le bande. Con z-index 1 sulla barca e 2 su .onda-3 l'ordine diventa: onda-1, onda-2, BARCA, onda-3. La banda in primo piano le passa cosi' davanti allo scafo quando la cresta sale, ed e' questo che la fa leggere immersa nell'acqua invece che appoggiata sopra il disegno. DOVE GALLEGGIA Il pelo dell'acqua di .onda-3 non sta in cima alla banda: la maschera tiene la linea di galleggiamento a poco piu' di meta' altezza. Misurata a video, oscilla fra 10,75vh e 14,25vh, cioe' 12,5vh +/- 1,75vh. La barca e' posata li': 'bottom' tiene conto degli 11px che separano la sua linea di galleggiamento dal fondo del riquadro. VELOCITA' Percorre 150vw in 71s = 2,11 vw/s. E' il 12% piu' veloce di .onda-2, l'altra che scorre verso destra (1,89 vw/s), e va in senso opposto a .onda-3 (1,41 vw/s verso sinistra): abbastanza diversa da non sembrare incollata a nessuna delle due. Fuori dai bordi resta una ventina di secondi, poi rientra da sinistra. INCLINAZIONE — perche' proprio questi numeri La barca non oscilla a caso: segue il profilo dell'onda su cui galleggia. Le creste di .onda-3 la superano a 2,11 + 1,41 = 3,52 vw/s e l'onda e' lunga 50vw, quindi una cresta ogni 14,2s: e' il periodo del beccheggio. Perche' la fase non si perda a ogni giro servono due coincidenze, ed e' il motivo per cui rotta e durata sono questi e non altri: - 71s e' un multiplo di 35,5s (mezzo giro di .onda-3), cosi' a fine passata l'onda e' tornata come all'inizio; - 150vw e' un multiplo di 50vw, cosi' il beccheggio chiude esattamente 5 cicli (71 / 14,2 = 5). Cambiando l'uno o l'altro la barca comincia a ballare fuori tempo. L'inclinazione e' la PENDENZA del profilo, cioe' la derivata dell'altezza: nulla su cresta e cavo, dove la barca e' in piano, e massima a meta' altezza. Prua giu' mentre scende, prua su mentre risale. Il ritardo di -3,1s allinea la sua cresta a quella dell'acqua: e' stato misurato a video, non stimato — con la fase sbagliata lo scarto dal pelo dell'acqua arriva a 46px, con questa resta entro 2px per tutta la passata. */ .sfondo-onde::after{ content:""; position:absolute; left:0; bottom:calc(12.5vh - 19px); /* linea di galleggiamento sul pelo di .onda-3 */ width:52px; height:44px; z-index:1; /* davanti a onda-1 e onda-2, dietro a onda-3 */ --beccheggio:1.75vh; /* meta' dell'escursione verticale dell'onda */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 54'%3E%3Crect x='31' y='4' width='2' height='30' fill='%235c4030'/%3E%3Cpath d='M33,6 L33,32 L54,32 Z' fill='%23ffffff'/%3E%3Cpath d='M31,10 L31,32 L16,29 Z' fill='%23eef1f3'/%3E%3Cpath d='M4,34 L60,34 L50,48 L14,48 Z' fill='%23c62828'/%3E%3Cpath d='M4,34 L60,34 L57,38 L7,38 Z' fill='%238e1f1f'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)); /* Tre canali indipendenti, tutti sul compositor come le onde: 'translate' porta la rotta, 'rotate' l'inclinazione, 'transform' il saliscendi. Sono proprieta' distinte, quindi le due animazioni con periodi diversi non si sovrascrivono a vicenda. */ animation: barca-rotta 71s linear infinite, barca-beccheggio 14.2s ease-in-out infinite; animation-delay: 0s, -3.55s; } @keyframes barca-rotta{ from{ translate: -25vw 0; } to { translate: 125vw 0; } } @keyframes barca-beccheggio{ 0% { transform: translateY(calc(var(--beccheggio) * -1)); rotate: 0deg; } /* cresta: in piano */ 25% { transform: translateY(0); rotate: 5deg; } /* discesa: prua giu' */ 50% { transform: translateY(var(--beccheggio)); rotate: 0deg; } /* cavo: in piano */ 75% { transform: translateY(0); rotate: -5deg; } /* risalita: prua su */ 100% { transform: translateY(calc(var(--beccheggio) * -1)); rotate: 0deg; } } .onda{ position: absolute; left: 0; bottom: 0; width: 200%; /* due ripetizioni: una visibile, una in coda */ display: block; /* La forma dell'onda e' una MASCHERA, non un'immagine colorata: decide solo "dove", il colore resta CSS. Cambiare palette non richiede di rigenerare nulla. */ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,160 C240,80 480,240 720,160 C960,80 1200,240 1440,160 L1440,320 L0,320 Z' fill='%23000'/%3E%3C/svg%3E"); mask-size: 50% 100%; mask-repeat: repeat-x; mask-position: bottom left; animation: onda-scorre linear infinite; will-change: translate; } /* Tre bande di colore diverso, non tre volte lo stesso azzurro: l'azzurro chiaro sul fondo, il blu profondo davanti. La differenza di tinta fa leggere la profondita' molto piu' della differenza di opacita', ed e' il motivo per cui bastano velature contenute. */ .onda-1{ height: 46vh; background: linear-gradient(to top var(--in-oklab), color-mix(in oklab, var(--onda-a) var(--forza-1), transparent), transparent); animation-duration: 38s; } .onda-2{ height: 34vh; background: linear-gradient(to top var(--in-oklab), color-mix(in oklab, var(--onda-b) var(--forza-2), transparent), transparent); animation-duration: 53s; animation-direction: reverse; } .onda-3{ height: 25vh; background: linear-gradient(to top var(--in-oklab), color-mix(in oklab, var(--onda-c) var(--forza-3), transparent), transparent); animation-duration: 71s; z-index: 2; /* passa davanti alla barchetta */ } /* Ciclo senza salti: ogni banda e' larga il 200% e la maschera si ripete ogni 50%, quindi spostarsi di -50% riporta esattamente al punto di partenza. Si anima solo 'translate', che il browser gestisce sul compositor: nessun ricalcolo di layout. */ @keyframes onda-scorre{ from{ translate: 0 0; } to { translate: -50% 0; } } /* Al buio le variabili --accent-* valgono gia' azzurri luminosi, che su fondo scuro rendono molto piu' delle stesse percentuali su bianco: qui si scende, non si sale, altrimenti abbagliano. */ @media (prefers-color-scheme: dark){ .sfondo-onde{ --forza-1: 26%; --forza-2: 20%; --forza-3: 15%; --forza-velo: 55%; } } /* Chi ha chiesto meno animazioni vede le onde ferme, non assenti: la decorazione resta, il movimento no. */ @media (prefers-reduced-motion: reduce){ .onda{ animation: none; will-change: auto; } .sfondo-onde::after{ animation: none; translate: 40vw 0; } } /* Su schermi bassi le tre bande occuperebbero quasi tutta la finestra: si abbassano e si diradano un poco. */ @media (max-width: 640px){ .sfondo-onde{ --forza-1: 24%; --forza-2: 18%; --forza-3: 12%; } .onda-1{ height: 34vh; } .onda-2{ height: 25vh; } .onda-3{ height: 18vh; } .sfondo-onde::after{ width: 36px; height: 30px; bottom: calc(9vh - 14px); /* la banda e' piu' bassa: 18vh invece di 25 */ --beccheggio: 1.26vh; /* stessa proporzione dell'onda ridotta */ } } /* In stampa lo sfondo non deve consumare inchiostro ne' finire sopra il referto. */ @media print{ .sfondo-onde{ display: none; } }