/** * loader.css — Page loading mask. * Site-wide. Injected via wp_body_open hook (functions.php). * * The loader div is added right after opens and removed by loader.js * once window.load fires. Only visible if page takes longer than 300ms to load. * * Tokens: primary-50 (bg), primary-800 (dots) — from base.css. * * Maintained by Fiona — edit animation/colours here and in loader.js only. * Do not edit functions.php for visual changes. * * @since 2.4.0 */ .page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--primary-50); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; overflow: hidden; } .page-loader.visible { opacity: 1; pointer-events: all; } .page-loader.hiding { opacity: 0; transition: opacity 0.6s ease; } .loader-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-800); opacity: 0; transform: scale(0.3); } @keyframes dotWave { 0%, 100% { opacity: 0; transform: scale(0.3); } 5% { opacity: 0.85; transform: scale(1); } 22% { opacity: 0; transform: scale(0.3); } }