/* Critical CSS - Prevents Flash on Page Load */ /* This should be inlined in the of each page for instant loading */ /* Immediate page setup */ html { background: #fff; } body { margin: 0; background: #fff; font-family: 'Mona Sans', sans-serif; opacity: 0; animation: fadeIn 0.2s ease-in-out forwards; } @keyframes fadeIn { to { opacity: 1; } } /* Header placeholder to prevent layout shift */ #header-placeholder, .site-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); z-index: 1000; } /* Main content spacing */ main { padding-top: 80px; min-height: 100vh; } /* Footer placeholder to prevent layout shift */ #footer-placeholder, footer { min-height: 200px; background: #042dac; } /* Prevent flash of unstyled text */ .hero-title, .section-title, h1, h2, h3 { visibility: hidden; } body.page-loaded .hero-title, body.page-loaded .section-title, body.page-loaded h1, body.page-loaded h2, body.page-loaded h3 { visibility: visible; }