/* * VitalBoost Front-End Utilities * Lightweight CSS that supports lazy loading, LQIP blur-up, and embed reservations. * Minified at runtime by the plugin — keep this source readable. */ /* ── LQIP Blur-Up Effect ───────────────────────────────────────────────────── Images marked with .vb-lqip start as a blurred LQIP placeholder and transition to the full image once the src is loaded. ─────────────────────────────────────────────────────────────────────────── */ img.vb-lqip { filter: blur(8px); transition: filter 0.4s ease-in-out, opacity 0.4s ease-in-out; will-change: filter; } img.vb-lqip.vb-loaded { filter: blur(0); } /* ── Responsive Embed Container ────────────────────────────────────────────── Prevents layout shift for iframes / embeds that load asynchronously. ─────────────────────────────────────────────────────────────────────────── */ .vb-embed-responsive { aspect-ratio: 16 / 9; width: 100%; height: auto; display: block; } /* ── Lazy Image Placeholder ────────────────────────────────────────────────── Renders a soft skeleton background before the real image loads. ─────────────────────────────────────────────────────────────────────────── */ img[loading="lazy"]:not(.vb-lqip) { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: vb-shimmer 1.5s infinite; min-height: 1px; /* Ensure element is visible for IntersectionObserver */ } @keyframes vb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Font Flash Prevention ─────────────────────────────────────────────────── When font preload is active, hide text briefly to avoid FOUT-induced CLS. Remove fonts-loading class from after fonts are ready. ─────────────────────────────────────────────────────────────────────────── */ .fonts-loading * { visibility: hidden !important; } /* ── Image Dimension Safety Net ────────────────────────────────────────────── When width/height can't be determined server-side, ensure images scale proportionally to prevent CLS from explicit-dimensions mismatch. ─────────────────────────────────────────────────────────────────────────── */ img { max-width: 100%; height: auto; } /* ── Ad / Embed Space Reservation ──────────────────────────────────────────── Prevents layout shift when ad scripts or embed code loads asynchronously. Override per-site as needed via your theme CSS. ─────────────────────────────────────────────────────────────────────────── */ [class*="adsbygoogle"], [class*="ad-slot"], [class*="advertisement"], [id*="ad-container"], ins.adsbygoogle { display: block; min-height: 90px; } /* ── Skip-Link Focus Visibility ───────────────────────────────────────────── Maintains accessibility compliance alongside our INP changes. ─────────────────────────────────────────────────────────────────────────── */ .skip-link:focus { clip: auto !important; clip-path: none !important; height: auto !important; overflow: visible !important; position: static !important; width: auto !important; }