/** * Greeny Preloader — Stylesheet * * Non-critical visual styles for the preloader overlay. * Critical layout/positioning CSS is inlined in by PHP (Greeny_Enqueue). * * @package GreenPreloader * @since 1.0.0 */ /* ── Overlay structure ───────────────────────────────────────────────────── */ #greeny-preloader { /* Stacking already set via critical CSS */ overflow: hidden; /* Anti-aliasing hint */ -webkit-font-smoothing: antialiased; } /* ── Inner container — centers the canvas ────────────────────────────────── */ .greeny-loader-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; /* Prevents layout shift for surrounding content */ position: relative; } /* ── Canvas ──────────────────────────────────────────────────────────────── */ #greeny-loader-canvas { display: block; /* Logical size — actual pixel dimensions set by JS via DPR */ width: 250px; height: 250px; background: transparent; } /* ── Optional custom logo above canvas ──────────────────────────────────── */ .greeny-logo-wrap { display: flex; align-items: center; justify-content: center; } .greeny-logo-img { max-width: 120px; max-height: 80px; object-fit: contain; /* Subtle entrance — JS removes after a beat */ animation: greeny-logo-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes greeny-logo-pop { from { opacity: 0; transform: scale(0.82) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Ambient background shimmer (decorative ring) ────────────────────────── */ #greeny-preloader::after { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 50% at 50% 50%, rgba(0, 168, 107, 0.08) 0%, transparent 70% ); pointer-events: none; animation: greeny-pulse-bg 4s ease-in-out infinite; } @keyframes greeny-pulse-bg { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ── Noise grain texture overlay ─────────────────────────────────────────── */ #greeny-preloader::before { content: ''; position: absolute; inset: 0; /* Base64 4×4 noise tile — zero network request */ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12NgYGD4z8BQDwAEgAF/QualIQAAAABJRU5ErkJggg=="); background-size: 64px 64px; opacity: 0.04; pointer-events: none; } /* ── Reduced motion: skip all animations ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #greeny-preloader, #greeny-preloader::before, #greeny-preloader::after, .greeny-logo-img { animation: none !important; transition: none !important; } } /* ── RTL support ─────────────────────────────────────────────────────────── */ [dir="rtl"] .greeny-loader-inner { direction: rtl; }