@charset "UTF-8"; /** * Site preloader — water drop filling with animated waves. * * Shown from the first painted frame (markup lives in html.html.twig, right * after ), hidden by js/base.js on window.load. A CSS-only fallback * animation auto-hides it after ~4s so the site is never blocked if JS * fails or is disabled. */ .site-preloader { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(180deg, var(--white) 0%, var(--light-blue) 100%); opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0.45s ease; animation: site-preloader-autohide 0.5s ease 4s forwards; } .site-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .site-preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; text-align: center; } .site-preloader__drop { width: clamp(76px, 14vw, 112px); height: auto; filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--primary-blue) 22%, transparent)); } .site-preloader__drop-bg { fill: color-mix(in srgb, var(--light-blue) 65%, var(--white)); } .site-preloader__drop-outline { fill: none; stroke: var(--primary-blue); stroke-width: 3; stroke-linejoin: round; } .site-preloader__rise { animation: site-preloader-rise 4.2s ease-in-out infinite; } .site-preloader__wave { fill: var(--primary-blue); animation: site-preloader-wave 3.4s linear infinite; } .site-preloader__wave--back { fill: color-mix(in srgb, var(--primary-blue) 55%, var(--light-blue)); animation-duration: 5.2s; animation-direction: reverse; } .site-preloader__brand { margin: 0; max-width: 18rem; color: var(--navy-blue); font-size: 0.95rem; font-family: Roboto, sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0.01em; line-height: 1.45; } .site-preloader__dots { display: flex; gap: 0.45rem; } .site-preloader__dots span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary-blue); animation: site-preloader-dot 1.2s ease-in-out infinite; } .site-preloader__dots span:nth-child(2) { animation-delay: 0.15s; } .site-preloader__dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes site-preloader-wave { to { transform: translateX(-120px); } } @keyframes site-preloader-rise { 0%, 100% { transform: translateY(96px); } 50% { transform: translateY(14px); } } @keyframes site-preloader-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } @keyframes site-preloader-autohide { to { opacity: 0; visibility: hidden; } }