/* ============================================================ _loader.css — экран загрузки страницы: картина Айвазовского на фоне, логотип, прогресс-бар. Скрывается JS-таймером в static/js/site_loader.js (~350мс после load). Разметка — partials/_page_loader.html. На privacy/404 лоадер отключён через {% block site_loader %}{% endblock %}. Зависит от _base.css (только базовые tokens — accent через хардкод). ============================================================ */ #page-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; transition: opacity 0.7s ease, visibility 0.7s ease; } #page-loader.out { opacity: 0; visibility: hidden; pointer-events: none; } /* Мгновенное скрытие loader'а на внутренних страницах сессии. Класс site-preloaded ставится inline-скриптом в до рендера body, поэтому юзер вообще не увидит мерцания. */ html.site-preloaded #page-loader { display: none !important; } /* ── Предохранитель (failsafe) ────────────────────────────────────────── Инцидент 08.06.2026: при деградации канала (ТСПУ) site_loader.js не успевал выполниться, и экран загрузки висел минутами — JS-фолбэк (30с) живёт ВНУТРИ самого скрипта, и если скрипт не догрузился, прятать некому. Этот CSS-таймер НЕ зависит от JS: через ~10с он гасит лоадер в любом случае. keyframes БЕЗ `from` — намеренно: implicit-from берёт текущее значение, поэтому если JS уже спрятал (.out → opacity 0), анимация идёт 0→0 (без мерцания); если не спрятал — плавно гасит. */ #page-loader { animation: pl-failsafe 0.6s ease 10s forwards; } @keyframes pl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .pl-bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; filter: brightness(0.65) saturate(0.9); } .pl-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,18,10,0.25), rgba(28,18,10,0.60)); } .pl-content { position: relative; z-index: 1; text-align: center; color: #fff; } .pl-mark { width: clamp(72px, 12vw, 110px); height: auto; display: block; margin: 0 auto 18px; } .pl-logo { font-family: 'Inter', sans-serif; font-size: clamp(22px, 4vw, 34px); font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 2px 24px rgba(0,0,0,0.6); margin-bottom: 28px; } .pl-logo span { color: #E8A84C; } .pl-bar-track { width: 200px; height: 2px; margin: 0 auto; background: rgba(255,255,255,0.15); border-radius: 99px; overflow: hidden; } .pl-bar { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #8B1A2C, #C27D2A); transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .pl-status { margin-top: 18px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); text-transform: uppercase; transition: opacity 0.18s ease; min-height: 1em; }