/* CSS SINGOLO PROGETTO (CPT progetto) — caricato nel sito e nel canvas dell'editor */ :root { --alm-progetto-max: 1440px; --alm-progetto-side: clamp(16px, 5vw, 96px); --alm-section-gap: clamp(48px, 6vw, 100px); --alm-gap: clamp(8px, 0.8vw, 16px); --alm-nav-h: 65px; /* altezza del menu fisso (header.css) */ --alm-progetto-top: clamp(32px, 4vw, 72px); /* stacco tra menu e contenuto */ } /* Il tema compensa il menu fisso con margin-top in vh sul body (15-28vh secondo lo schermo, util.css/media.css): sui monitor alti diventa enorme. Nei progetti lo spazio lo dà solo .alm-progetto, uguale su ogni schermo. */ body.single-progetto:not(.home) { margin-top: 0; } /* Il carosello esce dal bordo destro: niente scroll orizzontale della pagina */ html:has(body.single-progetto), body.single-progetto { overflow-x: clip; } /* Header visibile e in positivo (sfondo bianco), come nel prototipo */ body.single-progetto .navbar { opacity: 1; top: 0; } .alm-progetto { box-sizing: content-box; max-width: var(--alm-progetto-max); margin: 0 auto; padding: calc(var(--alm-nav-h) + var(--alm-progetto-top)) var(--alm-progetto-side) 0; } .alm-progetto > :last-child { margin-bottom: var(--alm-section-gap); } /* * Comparsa allo scroll (theme/js/progetto-reveal.js): dissolvenza + leggera salita, lenta e morbida. * Attiva solo con html.alm-reveal-on (aggiunta nel ; mai nell'editor, mai con "riduci movimento"). */ :root { --alm-reveal-y: 40px; --alm-reveal-time: 1.4s; --alm-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* parte decisa, arriva lentissima */ } @media (max-width: 767px) { :root { --alm-reveal-y: 24px; } } @media (prefers-reduced-motion: no-preference) { .alm-reveal-on .alm-progetto :is(.alm-intro__title, .alm-intro__body, .alm-intro__media, .alm-galleria__item, .alm-carosello, .alm-planimetrie__item) { transition: opacity calc(var(--alm-reveal-time) * 0.85) var(--alm-reveal-ease) var(--alm-reveal-delay, 0s), transform var(--alm-reveal-time) var(--alm-reveal-ease) var(--alm-reveal-delay, 0s); } .alm-reveal-on .alm-progetto :is(.alm-intro__title, .alm-intro__body, .alm-intro__media, .alm-galleria__item, .alm-carosello, .alm-planimetrie__item):not(.is-revealed) { opacity: 0; transform: translate3d(0, var(--alm-reveal-y), 0); will-change: opacity, transform; } /* Piccole sequenze: testo dell'Intro dopo il titolo, immagine dopo il testo, seconda foto della coppia */ .alm-progetto .alm-intro__body { --alm-reveal-delay: 0.12s; } .alm-progetto .alm-intro__media { --alm-reveal-delay: 0.24s; } .alm-progetto .alm-galleria__row--v > .alm-galleria__item:nth-child(2) { --alm-reveal-delay: 0.12s; } } /* Parallasse (plugin parallax-block) dentro i margini del contenuto */ .alm-progetto .parallax-block-wrapper { margin: 0 0 var(--alm-section-gap); }