/* ========================================================================== DR. SEJAL KULKARNI — PRELOADER + PAGE-NAVIGATION LOADER Drop this file in as /preloader.css and link it in , BEFORE your main stylesheet (so it can paint before other CSS parses). ========================================================================== */ /* -------------------------------------------------------------------------- 1. THEME TOKENS -------------------------------------------------------------------------- */ :root { --preloader-bg: #FAF5EF; /* soft blush cream — match hero background */ --preloader-text: #2A1520; /* deep plum/charcoal — match body heading color */ --preloader-accent: #9B4D6E; /* rose accent — match site's primary CTA color */ --preloader-accent-soft: #F3EAE3; /* faint line track color */ --preloader-font-display: 'Cormorant Garamond', serif; --preloader-font-mono: 'DM Sans', sans-serif; --nav-loader-height: 3px; } /* Prevent flash of un-preloaded page content */ html.preloader-pending { background-color: #FAF5EF !important; } html.preloader-pending body { opacity: 0 !important; visibility: hidden !important; overflow: hidden !important; } /* -------------------------------------------------------------------------- 2. FIRST-VISIT PRELOADER (full screen, shown once per session) -------------------------------------------------------------------------- */ #site-preloader { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: var(--preloader-bg); overflow: hidden; /* prevents the page behind from scrolling while preloader is up */ } body.preloader-active { overflow: hidden; height: 100vh; } .preloader-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vw, 22px); padding: 0 24px; width: 100%; max-width: 520px; text-align: center; } /* Name — reveals via letter-by-letter fade using a CSS custom property driven by JS ('--reveal') mapped to load progress. Falls back gracefully if JS is slow: everything is visible by 100% or by the safety timeout. */ .preloader-name { font-family: var(--preloader-font-display); font-weight: 500; font-style: italic; font-size: clamp(1.6rem, 6vw, 2.75rem); color: var(--preloader-text); letter-spacing: 0.01em; line-height: 1.15; margin: 0; opacity: 0; transform: translateY(6px); filter: blur(2px); animation: preloader-fade-in 0.8s ease forwards; } .preloader-name .char { display: inline-block; opacity: 0; transform: translateY(6px); filter: blur(2px); transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease; } .preloader-name .char.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .preloader-subtitle { font-family: var(--preloader-font-mono); font-size: clamp(0.68rem, 2vw, 0.78rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--preloader-accent); opacity: 0; animation: preloader-fade-in 0.6s ease 0.2s forwards; } /* Pulse / heartbeat line — draws left to right in sync with real progress */ .preloader-pulse { width: min(280px, 70vw); height: 32px; overflow: visible; } .preloader-pulse-track { fill: none; stroke: var(--preloader-accent-soft); stroke-width: 2; } .preloader-pulse-fill { fill: none; stroke: var(--preloader-accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 340; /* matches path length, set to real length in JS if path changes */ stroke-dashoffset: 340; transition: stroke-dashoffset 0.25s linear; } .preloader-percent { font-family: var(--preloader-font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--preloader-text); opacity: 0.65; min-width: 3ch; } /* Exit animation — fades + lifts the whole overlay away */ #site-preloader.is-done { animation: preloader-exit 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; pointer-events: none; } @keyframes preloader-exit { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-16px); } } @keyframes preloader-fade-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* Gentle reveal for hero content once preloader clears, so the page doesn't just "pop" in — purely optional, remove if hero already animates. */ body.preloader-was-active .hero-reveal-target { animation: content-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes content-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- 3. ACCESSIBILITY / MOTION PREFERENCES -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .preloader-name .char { transition: opacity 0.2s linear; transform: none; filter: none; } .preloader-pulse-fill { transition: none; } #site-preloader.is-done { animation: none; opacity: 0; } body.preloader-was-active .hero-reveal-target { animation: none; } } /* -------------------------------------------------------------------------- 4. MOBILE / SMALL-SCREEN TUNING -------------------------------------------------------------------------- */ @media (max-width: 480px) { .preloader-inner { gap: 12px; } .preloader-pulse { width: min(220px, 65vw); height: 26px; } } /* Respect very short / landscape mobile viewports so the preloader never causes internal scroll or clipping */ @media (max-height: 420px) { .preloader-inner { gap: 8px; transform: scale(0.85); } } /* -------------------------------------------------------------------------- 5. SCROLL REVEAL (works with IntersectionObserver in script.js) -------------------------------------------------------------------------- */ [data-sr] { opacity: 0; transform: translateY(32px); transition: opacity 0.65s ease, transform 0.65s ease; will-change: opacity, transform; } [data-sr].visible { opacity: 1; transform: translateY(0); } [data-sr-group] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-sr-group].visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; } [data-sr-group].visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.10s; } [data-sr-group].visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.15s; } [data-sr-group].visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.20s; } [data-sr-group].visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.25s; } [data-sr-group].visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.30s; } [data-sr-group].visible > *:nth-child(7) { opacity:1; transform:none; transition-delay:0.35s; } [data-sr-group].visible > *:nth-child(8) { opacity:1; transform:none; transition-delay:0.40s; } [data-sr-group].visible > *:nth-child(n+9) { opacity:1; transform:none; transition-delay:0.45s; }