/** * Hello Bundle CSS - Vite Pipeline Validation * * This CSS validates: * 1. CSS is extracted from JS imports * 2. CSS is placed in (not inline in body) * 3. No FOUC (Flash of Unstyled Content) * * The visual indicator appears briefly in dev environments * to confirm the bundle loaded correctly. */ /* Visual load indicator (dev only) */ #vite-hello-indicator { position: fixed; bottom: 10px; right: 10px; z-index: 99999; display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px; font-weight: 600; border-radius: 20px; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4); opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease; } #vite-hello-indicator.vite-hello-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; } .vite-hello-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.2); border-radius: 50%; font-size: 10px; } .vite-hello-text { letter-spacing: 0.5px; } /* Marker class to verify CSS loaded in head */ .vite-css-loaded { /* This class can be used to verify CSS extraction worked */ --vite-loaded: true; }