/** * Revidia Templates — Modern Preloader * Full-screen overlay with animated gradient spinner. * Locks page scroll until the first ad block renders. */ /* 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.3s 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 #ede8ff; border-radius: 50%; } .revidia-preloader-ring::after { content: ''; position: absolute; inset: 0; border: 5px solid transparent; border-top-color: #6B4FE0; border-right-color: #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, #a89bf0 0%, #c5bcf5 100%); box-shadow: 0 6px 18px rgba(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: #6B4FE0; animation-delay: 0s; } .revidia-preloader-dots span:nth-child(2) { background: #a89bf0; animation-delay: 0.2s; } .revidia-preloader-dots span:nth-child(3) { background: #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: #6B4FE0; border-right-color: #6B4FE0; border-bottom-color: #6B4FE0; border-left-color: #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; } }