/* ============================================================================ Прелоадер: белый экран с логотипом, анимация на Velocity. Разметка — inc/strom-preloader.php, логика — assets/js/preloader.js. Показывается ОДИН раз за сессию: скрипт в ставит на класс .strom-loader-done, если флаг уже в sessionStorage, и слой не рисуется вовсе — без вспышки, до первой отрисовки. Отказоустойчивость: если JS не загрузился, слой всё равно уйдёт — за это отвечает failsafe-анимация ниже (6s) и правило для .no-js. ============================================================================ */ .strom-loader { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: #fff; /* Страховка: даже без JS слой исчезнет через 6s (шаговая анимация без плавности). */ animation: stromLoaderFailsafe 0s linear 6s forwards; } @keyframes stromLoaderFailsafe { to { opacity: 0; visibility: hidden; } } /* Уже видели в этой сессии — слоя нет с самого начала. */ .strom-loader-done .strom-loader { display: none; } .strom-loader__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3vw, 34px); padding: 0 24px; } .strom-loader__logo { width: clamp(220px, 40vw, 420px); } .strom-loader__logo svg { display: block; width: 100%; height: auto; } /* Полоска-индикатор под логотипом. */ .strom-loader__bar { position: relative; width: clamp(140px, 22vw, 200px); height: 2px; border-radius: 2px; background: rgba(14, 126, 80, .14); overflow: hidden; } .strom-loader__bar-fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 2px; background: linear-gradient(90deg, #0e7e50, #399c5d); } /* Стартовое состояние ставим ТОЛЬКО когда JS есть (класс вешает скрипт в ). Без него логотип и полоска видны сразу — иначе при сбое загрузки JS остался бы пустой белый экран. Логотип рисуется обводкой: заливку гасим (fill-opacity:0), а сама обводка и dasharray настраиваются в JS — длину каждого контура можно узнать только через getTotalLength(). vector-effect там же: без него ширина обводки считалась бы в единицах viewBox (4989 на 420px экрана — 1 единица ≈ 0.08px, обводки не видно). */ .strom-js .strom-loader__logo path, .strom-js .strom-loader__logo polygon { fill-opacity: 0; } .strom-js .strom-loader__bar-fill { width: 0; } @media (prefers-reduced-motion: reduce) { .strom-loader { animation-delay: 1.2s; } .strom-js .strom-loader__logo path, .strom-js .strom-loader__logo polygon { fill-opacity: 1; } .strom-js .strom-loader__bar-fill { width: 100%; } }