/* Critical Header Styles - Prevents Loading Flash */ /* This file should be linked in the of every page to ensure instant header styling */ /* Ensure warm grey background everywhere including safe areas */ html { background: #f5f5f4 !important; background-color: #f5f5f4 !important; } body { background: #f5f5f4 !important; background-color: #f5f5f4 !important; } /* Critical header placeholder styles */ #header-placeholder { position: relative; left: 0; right: 0; width: 100%; background: #f5f5f4; backdrop-filter: blur(20px); border-bottom: 1px solid #e7e5e4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); z-index: 1000; transition: all 0.3s ease; overflow: visible; margin-top: calc(-1 * env(safe-area-inset-top, 0)); padding-top: env(safe-area-inset-top, 0); min-height: 80px; } /* Placeholder content styling while header loads */ #header-placeholder::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Cg fill-opacity='0.035'%3E%3Crect x='20' y='15' width='80' height='50' rx='8' ry='8' fill='%23ffffff'/%3E%3Crect x='25' y='35' width='25' height='4' rx='2' fill='%23ffffff'/%3E%3Crect x='55' y='35' width='15' height='4' rx='2' fill='%23ffffff'/%3E%3Crect x='25' y='45' width='45' height='3' rx='1.5' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") center/140px 100px; opacity: 0.4; pointer-events: none; } /* Ensure loaded header styles take precedence */ #header-placeholder header { background: inherit; position: static; margin-top: 0; padding-top: 0; overflow: visible; } /* Ensure mobile menu elements are not affected by placeholder styles */ #header-placeholder .mobile-menu, #header-placeholder .mobile-menu-overlay { position: fixed !important; z-index: 999999 !important; } /* Ensure mobile menu toggle is clickable */ #header-placeholder .mobile-menu-toggle { position: relative !important; z-index: 1001 !important; pointer-events: auto !important; } /* Loading placeholder styling - Hidden to prevent white space */ .loading-placeholder { display: none; /* Hide to prevent white space before header loads */ } /* Mobile responsive adjustments */ @media (max-width: 768px) { #header-placeholder { min-height: 70px; } }