/* ========================================================================== Sfondo animato della testata — AlbaSoftware Coppia di css/sfondo-animato.css con js/sfondo-animato.js. Si carica solo nelle pagine che lo richiamano nel frammento di content/: Non modifica nessuna regola di style.css e usa le sue stesse variabili, quindi va caricato DOPO style.css (build.py lo fa da se'). Come sono impilati i livelli nella fascia hero 1. il gradiente blu/nero di .hero (resta quello di sempre) 2. .sfondo-hero con la tela dell'animazione (z-index 0) 3. .sfondo-hero::after velatura scura (protegge il contrasto) 4. .hero__inner titolo e testo (z-index 1) Il punto 3 e' quello che tiene il testo leggibile: qualunque cosa disegni l'animazione, sopra c'e' sempre un velo scuro e il titolo resta bianco su fondo scuro. Se in futuro si alzasse la luminosita' dell'effetto, basta aumentare l'opacita' della velatura senza toccare il JavaScript. ========================================================================== */ /* La fascia diventa il riferimento per il posizionamento della tela e taglia quello che esce: l'animazione non deve mai creare barre di scorrimento. */ .hero[data-sfondo] { position: relative; overflow: hidden; /* isolation crea un contesto di fusione: la modalita' additiva usata dal JavaScript resta confinata alla tela e non interferisce col resto */ isolation: isolate; } /* -------------------------------------------------------------------------- 1. Il riquadro dell'animazione -------------------------------------------------------------------------- */ .sfondo-hero { position: absolute; inset: 0; z-index: 0; /* la tela e' decorativa: nessun clic la deve intercettare */ pointer-events: none; } .sfondo-hero__tela { display: block; width: 100%; height: 100%; } /* Velatura di sicurezza sopra l'animazione. E' densa solo sulla colonna di sinistra, dove cadono briciola di pane, titolo e testo introduttivo, e si dissolve prima di meta' fascia: da li' in poi l'effetto resta pieno. Aumentare il primo valore se un domani il testo dovesse risultare meno leggibile; non serve toccare il JavaScript. */ .sfondo-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 21, 36, 0.60) 0%, rgba(6, 21, 36, 0.46) 26%, rgba(6, 21, 36, 0.12) 46%, rgba(6, 21, 36, 0.00) 60%); } /* Il contenuto sale sopra i due livelli decorativi. Il selettore e' scritto dentro .hero[data-sfondo] per non toccare le altre pagine. */ .hero[data-sfondo] .hero__inner { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 2. Ritocchi per singola scena Dove l'animazione e' piu' luminosa la velatura sale, dove e' tenue scende: l'intensita' percepita resta la stessa su tutte e quattro le pagine. -------------------------------------------------------------------------- */ /* News, variante fumo: copre tutta la fascia e ha contorni sfumati, quindi sotto al testo serve un po' piu' di velo che nelle altre scene */ .hero[data-sfondo='fumo'] .sfondo-hero::after { background: linear-gradient(100deg, rgba(6, 21, 36, 0.64) 0%, rgba(6, 21, 36, 0.50) 28%, rgba(6, 21, 36, 0.14) 50%, rgba(6, 21, 36, 0.00) 64%); } /* News: la pagina di giornale riempie la fascia da un bordo all'altro e contiene titoli scritti per esteso. Il velo e' il piu' spesso di tutte le scene sulla meta' sinistra, dove sta il titolo della pagina, e si apre presto a destra per non spegnere lo scorcio, che e' il motivo della scena. Le colonne di sinistra sono gia' le piu' piccole e tenui, quindi il velo spesso cade proprio dove l'effetto ha meno da perdere. */ .hero[data-sfondo='notiziario'] .sfondo-hero::after { background: linear-gradient(100deg, rgba(6, 21, 36, 0.80) 0%, rgba(6, 21, 36, 0.66) 32%, rgba(6, 21, 36, 0.22) 54%, rgba(6, 21, 36, 0.02) 70%); } /* Area download: la cartella sta a destra, il testo della fascia e' piu' lungo che nelle altre pagine e arriva quasi a meta' larghezza: il velo si chiude un po' piu' tardi, cosi' l'ultima riga resta su fondo pieno. */ .hero[data-sfondo='download'] .sfondo-hero::after { background: linear-gradient(100deg, rgba(6, 21, 36, 0.62) 0%, rgba(6, 21, 36, 0.48) 30%, rgba(6, 21, 36, 0.12) 50%, rgba(6, 21, 36, 0.00) 62%); } /* Richiesta Informazioni: l'arco e' molto luminoso ma concentrato a destra, lontano dal testo, quindi la velatura puo' chiudersi prima */ .hero[data-sfondo='contatto'] .sfondo-hero::after { background: linear-gradient(100deg, rgba(6, 21, 36, 0.56) 0%, rgba(6, 21, 36, 0.40) 24%, rgba(6, 21, 36, 0.08) 42%, rgba(6, 21, 36, 0.00) 54%); } /* -------------------------------------------------------------------------- 3. Schermi stretti Sul telefono la fascia e' bassa e il titolo occupa quasi tutta la larghezza: l'animazione si attenua per non disturbare la lettura. -------------------------------------------------------------------------- */ @media (max-width: 720px) { .sfondo-hero { opacity: 0.72; } .sfondo-hero::after { background: linear-gradient(170deg, rgba(6, 21, 36, 0.44) 0%, rgba(6, 21, 36, 0.58) 60%, rgba(6, 21, 36, 0.66) 100%); } /* Sul telefono il titolo della pagina occupa tutta la larghezza: il velo diventa uniforme e la pagina di giornale resta un fondale appena visibile. */ .hero[data-sfondo='notiziario'] .sfondo-hero::after { background: linear-gradient(170deg, rgba(6, 21, 36, 0.62) 0%, rgba(6, 21, 36, 0.72) 60%, rgba(6, 21, 36, 0.78) 100%); } .hero[data-sfondo='fumo'] .sfondo-hero::after, .hero[data-sfondo='download'] .sfondo-hero::after, .hero[data-sfondo='contatto'] .sfondo-hero::after { background: linear-gradient(170deg, rgba(6, 21, 36, 0.46) 0%, rgba(6, 21, 36, 0.60) 60%, rgba(6, 21, 36, 0.68) 100%); } } /* -------------------------------------------------------------------------- 4. Riduzione delle animazioni Il JavaScript disegna un solo fotogramma fermo e non avvia il ciclo. Qui si abbassa ulteriormente l'effetto: resta una texture immobile, discreta, che non distrae chi ha chiesto meno movimento. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sfondo-hero { opacity: 0.5; } } /* -------------------------------------------------------------------------- 5. Stampa Le testate scure vengono gia' semplificate in stampa: la tela non serve. -------------------------------------------------------------------------- */ @media print { .sfondo-hero { display: none; } }