/* ========================================== CRITICAL CSS - Fixed for Proper Loading Load this FIRST in the of all HTML pages Only contains styles essential for initial page render ========================================== */ /* Critical container to prevent layout shift */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* Critical header styling to prevent layout shift */ .main-header { background-color: #ffffff; border-bottom: 3px solid #2d5016; min-height: 80px; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; min-height: 60px; } /* Critical page header to prevent layout shift */ .page-header { background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%); color: #ffffff; padding: 1.5rem 0 2rem 0; text-align: center; min-height: 100px; } /* Critical typography to prevent font loading shift */ .page-title { font-size: 3rem; color: #ffffff; margin-bottom: 1rem; font-weight: 600; } .page-subtitle { font-size: 1.25rem; color: #f5f5dc; line-height: 1.6; margin: 0; } /* Ensure consistent spacing during load */ section { padding: 3rem 0; } /* Loading spinner - only show when needed */ .loading-spinner { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); z-index: 9999; justify-content: center; align-items: center; } .loading-spinner.active { display: flex; } /* Critical responsive breakpoints */ @media (max-width: 768px) { .page-title { font-size: 2rem; } .page-subtitle { font-size: 1.125rem; } .container { padding: 0 1rem; } .page-header { padding: 2rem 0 1.5rem 0; min-height: 100px; } } @media (max-width: 480px) { .page-title { font-size: 1.75rem; } .page-header { padding: 1.5rem 0 1rem 0; min-height: 80px; } } /* Prevent horizontal scrolling during load */ html { overflow-x: hidden; }