/* page-preloader.css – Full-page blocking preloader overlay Covers the viewport and blocks scrolling until the calendar and critical content have finished rendering. */ /* ── Overlay ────────────────────────────────────────────────────────── */ .page-preloader { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; background: linear-gradient(146deg, rgba(255, 255, 255, 0.12) 0%, transparent 26%), linear-gradient(326deg, transparent 10%, rgba(255, 255, 255, 0.08) 40%, transparent 78%), radial-gradient(120% 120% at 50% 100%, #D4B89A 0%, #8B6F5A 100%); transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; will-change: opacity; } /* When hidden */ .page-preloader--hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.55s; } /* ── Lock scroll on while preloader is active ────────────────── */ html.page-preloader-active { overflow: hidden !important; } html.page-preloader-active body { overflow: hidden !important; } /* ── Ring animation ─────────────────────────────────────────────────── */ .page-preloader__ring-wrap { position: relative; width: 7.4rem; height: 7.4rem; display: grid; place-items: center; } .page-preloader__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .page-preloader__track { fill: transparent; stroke: rgba(255, 255, 255, 0.18); stroke-width: 6; } .page-preloader__arc { fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 198; transform-origin: 50% 50%; animation: pagePreloaderSpin 1.25s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)); } @keyframes pagePreloaderSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ── Branding text ──────────────────────────────────────────────────── */ .page-preloader__brand { display: flex; flex-direction: column; align-items: center; gap: 0.28rem; user-select: none; } .page-preloader__brand-main { font-family: 'Lato', sans-serif; font-weight: 900; font-size: clamp(1.15rem, 4.2vw, 1.55rem); letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.94); text-shadow: 0 0 18px rgba(255, 255, 255, 0.32); text-transform: uppercase; } .page-preloader__brand-sub { font-family: 'Lato', sans-serif; font-weight: 700; font-size: clamp(0.72rem, 2.4vw, 0.88rem); letter-spacing: 0.28em; color: rgba(255, 255, 255, 0.68); text-transform: uppercase; } /* ── Pulse glow (subtle "alive" feel) ───────────────────────────────── */ .page-preloader__ring-wrap::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 72%); animation: pagePreloaderPulse 2.2s ease-in-out infinite; pointer-events: none; } @keyframes pagePreloaderPulse { 0%, 100% { transform: scale(0.92); opacity: 0.4; } 50% { transform: scale(1.12); opacity: 1; } }