/* ============================================================================ SELLAM — SITE PRELOADER ============================================================================ Full-screen cover shown from first paint until readiness is reached (see the inline script next to #sellam-preloader in each page) or a safety timeout elapses. Pure CSS/HTML for the initial appearance so there is nothing to flash in: the overlay markup and this stylesheet are both present before renders anything else. JavaScript only ever adds "is-exiting" and later removes the element — it never has to run for the loader to correctly cover the page. ========================================================================== */ html.sellam-preloading, html.sellam-preloading body { overflow: hidden; height: 100%; } #sellam-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #002f3f; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); opacity: 1; transition: opacity 0.6s ease; } #sellam-preloader.is-exiting { opacity: 0; pointer-events: none; } /* Logo + tagline breathe together as one unit — animating the shared wrapper (not each child separately) keeps their relative spacing fixed throughout the cycle. */ .sellam-preloader-inner { display: flex; flex-direction: column; align-items: center; animation: sellam-preloader-breathe 2s ease-in-out infinite; } #sellam-preloader img { width: min(220px, 42vw); height: auto; display: block; } /* Sharp -> subtly soft/blurred -> sharp. Held at full clarity for a beat on either side of the cycle rather than snapping straight back, so the motion reads as an unhurried breath instead of a pulse. */ @keyframes sellam-preloader-breathe { 0%, 100% { opacity: 1; filter: blur(0); transform: scale(1); } 50% { opacity: 0.9; filter: blur(1.4px); transform: scale(0.992); } } /* !important throughout — the site-wide "body p" typography rule (styles.css) forces its own font-size/family/weight with !important on every

, so this component-scoped rule needs the same to actually take effect, matching the override pattern already used elsewhere in this codebase for the same reason. */ .sellam-preloader-tagline { margin: 18px 0 0 !important; color: #fff !important; font-family: var(--font-optima, "Optima Local", Optima, Candara, "Segoe UI", Arial, sans-serif) !important; font-size: 9px !important; font-weight: 400 !important; letter-spacing: 0.06em !important; line-height: 1.4 !important; text-align: center !important; opacity: 0.85 !important; } @media (prefers-reduced-motion: reduce) { .sellam-preloader-inner { animation: none; opacity: 1; filter: none; transform: none; } #sellam-preloader { transition: opacity 0.01ms ease; } }