/** * Revidia Templates — Modern Preloader * Full-screen overlay with animated gradient spinner. * Locks page scroll until the first ad block renders. * * Accent color is driven by CSS custom properties injected inline on the * overlay (and on the admin preview): --revidia-pl-accent + derived shades * (--accent-2..4, --accent-track) and --revidia-pl-accent-rgb for rgba(). * Every var() keeps the original purple as a fallback, so the default look * is unchanged if no color is configured. */ /* Scroll lock — class is added by inline JS in for instant effect, so even content above the fold can't scroll before our JS runs. */ html.revidia-preloader-active, html.revidia-preloader-active body { overflow: hidden !important; height: 100% !important; } .revidia-preloader-overlay { position: fixed; inset: 0; background: #fdfdff; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.35s ease; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; } .revidia-preloader-overlay.revidia-preloader-fading { opacity: 0; pointer-events: none; } .revidia-preloader-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; } /* ------ Spinner (outer ring + inner dot) ------ */ .revidia-preloader-ring { position: relative; width: 140px; height: 140px; margin-bottom: 28px; } .revidia-preloader-ring::before { content: ''; position: absolute; inset: 0; border: 5px solid var(--revidia-pl-accent-track, #ede8ff); border-radius: 50%; } .revidia-preloader-ring::after { content: ''; position: absolute; inset: 0; border: 5px solid transparent; border-top-color: var(--revidia-pl-accent, #6B4FE0); border-right-color: var(--revidia-pl-accent-2, #8B7AE8); border-radius: 50%; animation: revidia-preloader-spin 1.2s linear infinite; } .revidia-preloader-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--revidia-pl-accent-3, #a89bf0) 0%, var(--revidia-pl-accent-4, #c5bcf5) 100%); box-shadow: 0 6px 18px rgba(var(--revidia-pl-accent-rgb, 107, 79, 224), 0.22); } @keyframes revidia-preloader-spin { to { transform: rotate(360deg); } } /* ------ Loading text ------ */ .revidia-preloader-text { font-family: 'Outfit', 'Poppins', -apple-system, sans-serif; font-size: 17px; font-weight: 700; color: #1a1a2e; margin: 0; line-height: 1.4; max-width: 360px; } /* ------ Three animated dots ------ */ .revidia-preloader-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; } .revidia-preloader-dots span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; animation: revidia-preloader-bounce 1.4s ease-in-out infinite; } .revidia-preloader-dots span:nth-child(1) { background: var(--revidia-pl-accent, #6B4FE0); animation-delay: 0s; } .revidia-preloader-dots span:nth-child(2) { background: var(--revidia-pl-accent-3, #a89bf0); animation-delay: 0.2s; } .revidia-preloader-dots span:nth-child(3) { background: var(--revidia-pl-accent-4, #c5bcf5); animation-delay: 0.4s; } @keyframes revidia-preloader-bounce { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.2); } } /* ------ Reduced motion ------ */ @media (prefers-reduced-motion: reduce) { .revidia-preloader-ring::after, .revidia-preloader-dots span { animation: none; } .revidia-preloader-ring::after { border-top-color: var(--revidia-pl-accent, #6B4FE0); border-right-color: var(--revidia-pl-accent, #6B4FE0); border-bottom-color: var(--revidia-pl-accent, #6B4FE0); border-left-color: var(--revidia-pl-accent, #6B4FE0); opacity: 0.4; } } /* ------ Mobile ------ */ @media (max-width: 480px) { .revidia-preloader-ring { width: 110px; height: 110px; margin-bottom: 24px; } .revidia-preloader-dot { width: 44px; height: 44px; } .revidia-preloader-text { font-size: 15px; } } /* ===================================================================== * Alternate styles — selectable in the admin (Preloader tab). * All share the same overlay/fade/scroll-lock machinery; only the * animated indicator differs. The overlay root carries a * `revidia-preloader--