/** * Critical CSS * Liwonde Sun Hotel 2026 * * This file contains critical CSS that loads immediately to prevent FOUC * (Flash of Unstyled Content) and optimize initial render. * * These styles should be loaded synchronously before other CSS. */ /* ============================================ PREVENT LAYOUT SHIFT ============================================ */ body { opacity: 1 !important; visibility: visible !important; } /* ============================================ BODY & MAIN CONTENT STRUCTURE ============================================ */ body { min-height: 100vh; display: flex; flex-direction: column; background-color: #FAF8F5; color: #1A1A1A; line-height: 1.6; overflow-x: hidden; } main { flex: 1; width: 100%; position: relative; /* Account for fixed header. The height steps live in css/components/header.css; 80px is the mobile base fallback. */ padding-top: var(--header-height-mobile, var(--header-height, 80px)); } /* Hero section is first child of main, remove its top padding */ main>[class*="hero"]:first-child, main>div>[class*="hero"]:first-child { margin-top: calc(var(--header-height-mobile, var(--header-height, 80px)) * -1); } .main-content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; } /* ============================================ PAGE LOADER NOTE The loader is styled entirely in css/components/loader.css (.loader / .loader--active / .loader--hiding / .loader--hidden). The old .page-loader rules that used to live here matched markup includes/loader.php no longer emits — and painted a dark #1A1A1A curtain where the loader is now sand — so they were removed. ============================================ */ .page-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; /* Sand, matching .loader in css/components/loader.css. This is inlined above the fold, so a dark value here flashed black before the real loader sheet arrived. */ background: #F8F2E5; transition: opacity 0.5s ease; } .page-loader.fade-out { opacity: 0; } .page-loader.hidden { display: none; } /* ============================================ CRITICAL HEADER NOTE The fixed header is styled entirely in css/components/header.css (.lsh-header / .lsh-mobile). The old .header/.header__* rules that used to live here matched markup that no longer exists, so they were removed. Both critical.css and main.css are render-blocking links in , so there is no paint window where duplicating the header here would prevent a flash — it would only risk the two copies drifting. The space the header occupies is reserved by the main/hero rules above. ============================================ */ /* ============================================ OPTIMIZE FONT RENDERING Use system fonts initially, upgraded when custom fonts load ============================================ */ body, button, input, select, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Will be upgraded to custom fonts when loaded */ body.fonts-loaded h1, body.fonts-loaded h2, body.fonts-loaded h3, body.fonts-loaded .cormorant { font-family: 'Cormorant Garamond', Georgia, serif; } body.fonts-loaded .jost, body.fonts-loaded body, body.fonts-loaded button, body.fonts-loaded input { font-family: 'Jost', sans-serif; } /* ============================================ CRITICAL SECTION HEADER STYLES Force all section headers to be visible ============================================ */ .section-header, .section-header *, .editorial-header, .editorial-header *, body .section-header, body .section-header *, body .editorial-header, body .editorial-header * { opacity: 1 !important; visibility: visible !important; display: block !important; color: #1A1A1A !important; } .section-header__label, .editorial-header .section-header__label, body .section-header__label, body .editorial-header .section-header__label { color: #8B7355 !important; } .section-header__title, .editorial-header .section-header__title, body .section-header__title, body .editorial-header .section-header__title, h1, h2, h3, h4, h5, h6 { color: #1A1A1A !important; } .section-header__subtitle, .section-header__description, .editorial-header .section-header__subtitle, .editorial-header .section-header__description, body .section-header__subtitle, body .section-header__description, body .editorial-header .section-header__subtitle, body .editorial-header .section-header__description, p { color: #4A4A4A !important; } /* ============================================ FORCE EDITORIAL SECTIONS VISIBILITY ============================================ */ .upcoming-events-section *, .editorial-gallery-section *, .editorial-reviews *, .editorial-testimonials-section *, .editorial-rooms-section *, .editorial-facilities-section * { opacity: 1 !important; visibility: visible !important; } /* ============================================ CRITICAL BUTTON STYLES Prevent layout shift during load ============================================ */ .btn, button[type="submit"], button[type="button"] { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } /* ============================================ CRITICAL FORM STYLES ============================================ */ input, select, textarea { display: block; width: 100%; padding: 12px 16px; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 16px; background: #ffffff; } /* ============================================ CRITICAL CONTAINER STYLES ============================================ */ .container, .container-fluid { width: 100%; /* Was a hardcoded 1200px, which drifted from --container-content. */ max-width: var(--container-content, 1120px); margin: 0 auto; padding: 0 var(--container-gutter, 20px); } /* ============================================ CRITICAL GRID STYLES ============================================ */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 768px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } .main-content { padding: 0 12px; } } /* The header height steps live in css/components/header.css (--lsh-header-height, which also feeds --header-height/-mobile). Track the variable rather than repeating pixel values here — the hardcoded 90/100/104px used to drift from the real header height. */ @media (min-width: 1024px) { .main-content { padding: 0 24px; } } @media (min-width: 1280px) { .main-content { padding: 0 32px; } } /* ============================================ CRITICAL FLEX STYLES ============================================ */ .flex { display: flex; } .flex--center { align-items: center; justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } .flex--column { flex-direction: column; } /* ============================================ CRITICAL SPACING ============================================ */ .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; } .p-1 { padding: 8px; } .p-2 { padding: 16px; } .p-3 { padding: 24px; } .p-4 { padding: 32px; }