/* ========================================================================== ESTRIA — Pagina di caricamento (Debug 0824) Compare solo al primo atterraggio della scheda: lo snippet inline nel mette html.loading, js/loader.js fa il resto e poi la toglie. Senza quella classe il markup non esiste a schermo, quindi con JS disattivato la pagina si vede normalmente. ========================================================================== */ .loader { display: none; } html.loading, html.loading body { overflow: hidden; } html.loading .loader { display: flex; position: fixed; inset: 0; z-index: 500; /* sopra il velo fra pagine (400) e tutto il resto */ align-items: center; justify-content: center; background: #000000; /* da brief */ /* Uscita a veneziana: js/loader.js scrive in --loader-mask gli stessi gradienti delle transizioni fra pagine (js/veil.js). Senza la variabile la mask è "none", cioè overlay pieno. */ -webkit-mask-image: var(--loader-mask, none); mask-image: var(--loader-mask, none); will-change: mask-image; } /* La stessa barra in cima a ogni pagina (.scroll-progress, animations.css §2), qui riempita dal caricamento della pagina e non dallo scroll. */ .loader__bar { position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--arancio-1); } /* Il pitto in loop e il logo finale stanno nello stesso riquadro 268×76 e quindi alla stessa scala: il simbolo non si sposta di un pixel quando il loop lascia il posto al logo. Larghezza da brief: 1/5 dello schermo su desktop, 1/2 su mobile (Debug 0825: era 1/3, +50% da brief). */ .loader__mark { position: relative; width: 20vw; aspect-ratio: 268 / 76; } .loader__pitto, .loader__logo { position: absolute; inset: 0; width: 100%; height: 100%; } /* Il logo lo scarica js/loader.js e lo lascia qui, fermo sul fotogramma dove il loop del pitto lo lascerà: invisibile ma disegnato, perché con display:none il browser non campiona la timeline SMIL e al passaggio si vedrebbe un salto. */ .loader__logo { opacity: 0; } .loader__logo.is-on { opacity: 1; } @media (max-width: 767px) { .loader__mark { width: 50vw; } }