/** * Preloader fullscreen, AB Designers * Depende de classes em : .preloader-pending | .ab-preloader-skip */ :root { --ab-preloader-gold: #ffd700; --ab-preloader-bg: #000000; /* Contorno já visível; só transição de preenchimento + wordmark */ --ab-preloader-outline-hold: 0.4s; --ab-preloader-fill: 0.55s; --ab-preloader-word: 0.8s; --ab-preloader-hold: 1.1s; --ab-preloader-fade: 0.7s; --ab-preloader-content: 0.85s; /* Largura única: símbolo e “Designers” alinhados */ --ab-preloader-mark-width: min(72vw, 280px); } /* Conteúdo oculto até o fim da sequência (primeiro filho = overlay) */ html.preloader-pending body > *:not(#abPreloader) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.preloader-pending { background-color: var(--ab-preloader-bg); } html.preloader-pending body { overflow: hidden; min-height: 100vh; background-color: var(--ab-preloader-bg); } html.ab-preloader-skip #abPreloader, #abPreloader[hidden] { display: none !important; } #abPreloader.ab-preloader { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); box-sizing: border-box; background: var(--ab-preloader-bg); opacity: 1; transition: opacity var(--ab-preloader-fade) ease-in-out; } #abPreloader.ab-preloader.is-exiting { opacity: 0; pointer-events: none; } .ab-preloader__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.75rem, 3vw, 1.35rem); width: min(92vw, 420px); } /* Símbolo: viewBox do asset original */ .ab-preloader__mark { width: var(--ab-preloader-mark-width); height: auto; aspect-ratio: 800 / 576.51; overflow: visible; } /* Contorno completo desde o início; sem “desenho” por dashoffset */ .ab-preloader__mark-path { fill: transparent; stroke: var(--ab-preloader-gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; paint-order: stroke fill; transition: fill var(--ab-preloader-fill) ease-in-out, stroke var(--ab-preloader-fill) ease-in-out, stroke-width var(--ab-preloader-fill) ease-in-out; } #abPreloader.ab-preloader.is-filled .ab-preloader__mark-path { fill: var(--ab-preloader-gold); stroke: var(--ab-preloader-gold); stroke-width: 0; } /* Lettering */ .ab-preloader__wordmark-wrap { width: var(--ab-preloader-mark-width); max-width: 100%; margin-inline: auto; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--ab-preloader-word) ease-out, transform var(--ab-preloader-word) cubic-bezier(0.22, 1, 0.36, 1); } #abPreloader.ab-preloader.show-wordmark .ab-preloader__wordmark-wrap { opacity: 1; transform: translate3d(0, 0, 0); } .ab-preloader__wordmark { display: block; width: 100%; height: auto; aspect-ratio: 800 / 94.51; } .ab-preloader__wordmark img { width: 100%; height: auto; display: block; object-fit: contain; object-position: center bottom; } /* Conteúdo principal: fade-in após overlay (exclui o próprio preloader até remoção) */ html.preloader-reveal body > *:not(#abPreloader) { visibility: visible !important; pointer-events: auto !important; opacity: 0; animation: ab-preloader-content-in var(--ab-preloader-content) ease-out forwards; } @keyframes ab-preloader-content-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { :root { --ab-preloader-outline-hold: 0.05s; --ab-preloader-fill: 0.15s; --ab-preloader-word: 0.2s; --ab-preloader-hold: 0.15s; --ab-preloader-fade: 0.25s; --ab-preloader-content: 0.2s; } .ab-preloader__wordmark-wrap { transform: none; } #abPreloader.ab-preloader.show-wordmark .ab-preloader__wordmark-wrap { transform: none; } }