/* ============================================================================= AYAL TOURS — SITE PRELOADER Enqueued globally (every page) via ayal_enqueue_assets() in functions.php. Markup lives at the top of header.php, right after . Depends on: ayal-tokens (for --ease-out, --ayal-green, --font-body) ============================================================================= */ .ayal-preloader { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background-color: #FFFFFF; clip-path: circle(150% at 50% 50%); transition: background-color 900ms var(--ease-out), clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1), opacity 400ms linear; } /* Background pattern — a fine, very low-opacity dot grid, on a pseudo- element so it can be swapped independently of the logo/bar content. Two colour variants (default + .is-green), same pattern this file already uses for the bar/logo/percent text — a `mix-blend-mode` single-pattern approach was tried first but is a visual no-op against the preloader's pure #FFFFFF base (overlay against pure white always resolves back to white), so this uses plain alpha instead. */ .ayal-preloader::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(circle, rgba(40, 54, 24, 0.07) 1px, transparent 1.6px); background-size: 24px 24px; pointer-events: none; } .ayal-preloader.is-green::before { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1.6px); } /* Background swaps to brand green once progress crosses 82% */ .ayal-preloader.is-green { background-color: var(--ayal-green, #283618); } /* Reveal — circle shrinks to nothing, uncovering the page beneath it */ .ayal-preloader.is-revealing { clip-path: circle(0% at 50% 50%); } /* Fully done — removed from interaction/paint once the reveal transition ends */ .ayal-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Prevents scroll/interaction with the page while the preloader is up */ body.ayal-preloading { overflow: hidden; } /* ── Logo, bar, percentage ───────────────────────────────────────────────────── */ .ayal-preloader__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; } .ayal-preloader__logo { width: 100px; height: 100px; object-fit: contain; transition: filter 500ms var(--ease-out); } /* Logo goes white once the background turns green — same technique as the header's transparent-state logo */ .ayal-preloader.is-green .ayal-preloader__logo { filter: brightness(0) invert(1); } .ayal-preloader__logo-text { font-family: var(--font-heading, serif); font-size: 22px; font-weight: 400; letter-spacing: 0.02em; color: var(--ayal-charcoal, #14150F); transition: color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__logo-text { color: #FFFFFF; } .ayal-preloader__bar-track { width: 160px; height: 2px; border-radius: 2px; background: rgba(75, 93, 58, 0.15); overflow: hidden; transition: background-color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__bar-track { background: rgba(255, 255, 255, 0.25); } .ayal-preloader__bar-fill { width: 0%; height: 100%; background: var(--ayal-green, #283618); transition: width 120ms linear, background-color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__bar-fill { background: #FFFFFF; } .ayal-preloader__percent { font-family: var(--font-body, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ayal-charcoal-3, #8B8C7E); transition: color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__percent { color: rgba(255, 255, 255, 0.75); } /* ── Reduced motion ──────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ayal-preloader { transition: opacity 300ms linear !important; clip-path: none !important; } .ayal-preloader.is-revealing { clip-path: none !important; } }