/* ============================================================================ Waliv shared preloader — a solid gradient body of water rises through the bold "WALIV" wordmark in step with real load progress, under the brand bird mark (shown unchanged), with a live percentage. Render-blocking (linked in the of every entry HTML) so it paints on the first frame. Markup is injected by /loader.js; themed per site with .wl-main / .wl-marine / .wl-pharma / .wl-finance. ========================================================================== */ #waliv-loader { --wl-bg: #fbf9f4; --wl-accent: #30b4e4; --wl-accent-mid: #72cdf0; --wl-accent-deep: #2196c9; --wl-base: rgba(20, 33, 61, 0.16); --wl-percent: var(--wl-accent-deep); --wl-sheen: rgba(255, 255, 255, 0.34); position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: var(--wl-bg); opacity: 1; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1); } html.wl-lock, html.wl-lock body { overflow: hidden !important; } #waliv-loader.wl-hide { opacity: 0; pointer-events: none; } .wl-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.5vw, 6px); /* tight, no wasted space */ width: min(54vw, 330px); animation: wl-pop 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* Brand bird mark — shown exactly as-is (no recolouring). */ .wl-bird { width: clamp(64px, 9.5vw, 92px); height: auto; display: block; margin-bottom: clamp(2px, 0.6vw, 8px); } .wl-word { width: 100%; height: auto; display: block; overflow: visible; } .wl-text { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 800; font-size: 105px; letter-spacing: -0.04em; } /* The empty, unfilled wordmark sitting under the water. */ .wl-text-base { fill: var(--wl-base); } /* Rising body of water — translateY is set from JS to match load progress. */ .wl-rise { transform: translateY(88px); } /* Opaque brand gradient water (see #wl-grad in JS). */ .wl-water { fill: url(#wl-grad); } .wl-wave-1 { fill: url(#wl-grad); animation: wl-wave 2.8s linear infinite; } .wl-wave-2 { fill: url(#wl-grad); opacity: 0.72; animation: wl-wave 4s linear infinite reverse; } .wl-grad-stop-1, .wl-grad-stop-2, .wl-grad-stop-3 { stop-opacity: 1; } @keyframes wl-wave { from { transform: translateX(0); } to { transform: translateX(-380px); } } @keyframes wl-pop { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } } /* Live load percentage under the wordmark. */ .wl-percent { margin-top: clamp(2px, 0.6vw, 8px); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 800; font-size: clamp(9px, 0.9vw, 10px); letter-spacing: 0.14em; color: var(--wl-percent); font-variant-numeric: tabular-nums; } .wl-percent-num { font-variant-numeric: tabular-nums; } /* ── Per-site themes: gradient loader screens + opaque graded waves. Scoped with the #waliv-loader id so they outrank the id-level defaults above (an id selector beats a bare class on specificity). ── */ #waliv-loader.wl-main { --wl-bg: radial-gradient(circle at 26% 18%, #ffffff 0%, transparent 28rem), linear-gradient(135deg, #eef9ff 0%, #c7ecff 48%, #8fd1f1 100%); --wl-accent: #343434; --wl-accent-mid: #151515; --wl-accent-deep: #000000; --wl-base: rgba(0, 0, 0, 0.14); --wl-percent: #0f1720; } #waliv-loader.wl-marine { --wl-bg: radial-gradient(circle at 24% 18%, rgba(95, 151, 232, 0.34) 0%, transparent 28rem), linear-gradient(135deg, #061120 0%, #102c58 48%, #061832 100%); --wl-accent: #5fb5ff; --wl-accent-mid: #2367c7; --wl-accent-deep: #081d42; --wl-base: #d9efff; --wl-percent: #e3f1ff; } #waliv-loader.wl-pharma { --wl-bg: radial-gradient(circle at 24% 18%, #ffffff 0%, transparent 28rem), linear-gradient(135deg, #f0fff4 0%, #c9f3d5 52%, #8ed6a5 100%); --wl-accent: #1f8a4c; --wl-accent-mid: #0e6738; --wl-accent-deep: #05351f; --wl-base: rgba(5, 53, 31, 0.18); --wl-percent: #06351f; } #waliv-loader.wl-finance { --wl-bg: radial-gradient(circle at 24% 18%, rgba(255, 232, 168, 0.42) 0%, transparent 28rem), linear-gradient(135deg, #fff8e2 0%, #e5bf5b 50%, #9a6b17 100%); --wl-accent: #8a5a06; --wl-accent-mid: #5d3a02; --wl-accent-deep: #2c1a00; --wl-base: rgba(79, 51, 4, 0.2); --wl-percent: #4f3304; } @media (prefers-reduced-motion: reduce) { .wl-wave-1, .wl-wave-2 { animation: none; } .wl-inner { animation: none; } }