/* ============================================================ preloader.css — initial page-load preloader ------------------------------------------------------------ A cream full-screen overlay with the SG monogram + a thin bronze progress bar that animates. Removed via .is-loaded class on (set by JS once window 'load' fires). Notes: - The overlay sits on top of everything (z-index very high). - It uses the same warm cream/ivory palette as the site, never pure black — keeps the brand luxurious from the very first frame. - We disable page scrolling while loading via body.is-loading. This prevents scroll-bg sections from setting currentTime before videos have decoded their first frame. ============================================================ */ /* Lock scroll while loading. */ body.is-loading { overflow: hidden; } .sg-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FAF7F1 0%, #F5F1EA 100%); /* Smooth exit when .is-loaded is added on . */ transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 700ms; opacity: 1; visibility: visible; } /* When the page finishes loading, fade the overlay out and then disable pointer events so it stops capturing clicks. */ body.is-loaded .sg-preloader { opacity: 0; visibility: hidden; pointer-events: none; } .sg-preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; transform: translateY(-8px); /* visually-balanced center */ } /* The monogram itself. - currentColor is set by .sg-preloader-logo color below, which is our deep warm near-black brand color (#1F1C18 — NEVER pure black). - A gentle, slow fade-in lets the mark settle before the bar moves. */ .sg-preloader-logo { width: 120px; height: auto; color: #1F1C18; opacity: 0; animation: sgPreLogoIn 900ms cubic-bezier(0.4, 0, 0.2, 1) 100ms forwards; } @keyframes sgPreLogoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* The bar wraps a thin track and an inner moving fill. Width 200px is deliberately small — a generous track around the logo would feel utilitarian, this reads as a refined touch. */ .sg-preloader-bar { position: relative; width: 180px; height: 1px; background: rgba(31, 28, 24, 0.12); /* faint warm rule */ overflow: hidden; opacity: 0; animation: sgPreLogoIn 700ms cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards; } .sg-preloader-bar > span { position: absolute; inset: 0 auto 0 0; width: 40%; background: #B8956A; /* --bronze */ /* Indeterminate sweep — slides L→R repeatedly while loading. */ animation: sgPreBar 1500ms cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes sgPreBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* Respect users who don't want animation — show a static bar. */ @media (prefers-reduced-motion: reduce) { .sg-preloader-logo, .sg-preloader-bar { animation: none; opacity: 1; } .sg-preloader-bar > span { animation: none; transform: translateX(0); width: 100%; opacity: 0.5; } }