/* ============================================================ Site-wide loading overlay (SiteLoader) ------------------------------------------------------------ Keeps every page fully hidden behind one branded loading screen until its data is actually ready, instead of letting the raw page structure / shimmer placeholders pop in piece by piece — and instead of briefly showing a page's real content before an async auth check decides to redirect elsewhere (the old "flash of content, then jump to /Login" behavior). How it works: - By default (no `site-ready` class on ), every direct child of except #site-loader is invisible. The page can go on building itself underneath (AJAX, DOM writes, images) — none of it is visible until it's actually ready. - assets/js/site-loader.js adds `site-ready` to (via window.SiteLoader.ready()) once the page's initial data has loaded, which reveals the real content and fades the overlay out. - A page about to redirect elsewhere (failed auth, or Login.html realizing the visitor is already logged in) calls window.SiteLoader.lock() first, so the real content can never flash into view for the instant before navigation happens. - If nothing calls ready() within a while (dead server / very slow connection), the overlay swaps itself to a small "connection problem, retry" state instead of spinning forever. ============================================================ */ body:not(.site-ready) { overflow: hidden; } body:not(.site-ready) > :not(#site-loader) { opacity: 0 !important; pointer-events: none !important; } body.site-ready > :not(#site-loader) { opacity: 1; transition: opacity .35s ease; } #site-loader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: #151415; opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s linear 0s; /* سایت با کلاس .inter-body/.lato-body روی فونتش رو IRANSans تنظیم می‌کنه (تعریفش توی styles.pure.css با @font-face هست، که قبل از این فایل روی همه‌ی صفحات لود میشه). این خط رو صریح ست می‌کنیم (نه فقط تکیه به ارث‌بری) تا اگه یه روز #site-loader توی صفحه‌ای بدون اون کلاس‌ها استفاده شد هم درست بمونه. */ font-family: IRANSans, Tahoma, sans-serif; } body.site-ready #site-loader { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } #site-loader .site-loader-mark { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; } #site-loader .site-loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(154, 92, 255, .16); border-top-color: #8a4fe0; animation: siteLoaderSpin .85s linear infinite; } #site-loader .site-loader-logo { width: 46px; height: 46px; object-fit: contain; animation: siteLoaderPulse 1.8s ease-in-out infinite; } #site-loader .site-loader-text { color: #8b8b90; font-size: 13px; letter-spacing: .02em; } #site-loader .site-loader-retry { display: none; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 0 28px; max-width: 320px; } #site-loader .site-loader-retry-icon { width: 40px; height: 40px; color: #8a4fe0; } #site-loader .site-loader-retry-msg { color: #cbcbcb; font-size: 14px; line-height: 1.9; } #site-loader .site-loader-retry-btn { border: none; cursor: pointer; padding: 11px 30px; border-radius: 14px; font-weight: 700; font-size: 14px; font-family: inherit; background: linear-gradient(135deg, #c9a8ff, #8a4fe0); color: #1c1030; box-shadow: 0 10px 24px rgba(154, 92, 255, .35); } #site-loader .site-loader-retry-btn:active { transform: translateY(1px); } #site-loader.site-loader-failed .site-loader-mark, #site-loader.site-loader-failed .site-loader-text { display: none; } #site-loader.site-loader-failed .site-loader-retry { display: flex; } @keyframes siteLoaderSpin { to { transform: rotate(360deg); } } @keyframes siteLoaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .8; } } @media (prefers-reduced-motion: reduce) { #site-loader .site-loader-ring, #site-loader .site-loader-logo { animation: none; } }