/* ========================================================================== Site Preloader — фирменная полноэкранная загрузочная сцена Полностью самостоятельный компонент, отдельный файл (не раздувает основной style.css, легко изолировать/отключить при необходимости). Токены — те же, что и по всему сайту: --c-burgundy-void — фон сцены (тот же тон, что у hero/team-photo); --gold/--border-gold — прогресс-бар; --motion-reveal/--motion-nav — существующие motion-токены (--motion-reveal уже используется для entrance-анимаций по сайту). Новых цветов/анимационных значений не вводится. prefers-reduced-motion: отдельный @media-блок не нужен — глобальное правило в начале style.css (`*,*::before,*::after{transition-duration: 0.001ms!important}`) уже сворачивает все transition ниже до мгновенных — тот же сайтовый механизм, что и для reveal-анимаций. ========================================================================== */ #site-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--c-burgundy-void); opacity: 1; transform: scale(1); visibility: visible; transition: opacity var(--motion-reveal), transform var(--motion-reveal), visibility 0s linear 0s; } /* Добавляется JS после завершения загрузки — тот же приём "класс переключает состояние", что и .reveal.is-visible по остальному сайту. Лёгкий scale (1 → 1.015) вместе с более длинным --motion-reveal (было --motion-page, 320ms) делает уход сцены плавнее/весомее — "раскрытие", а не резкий плоский обрез. pointer-events:none ставится сразу с классом — клики не перехватываются уже во время самого затухания. */ #site-preloader.is-hidden { opacity: 0; transform: scale(1.015); visibility: hidden; pointer-events: none; transition: opacity var(--motion-reveal), transform var(--motion-reveal), visibility 0s linear var(--dur-slow); } .site-preloader__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding-inline: var(--container-pad); max-width: 100%; } /* 260–340px на desktop по ТЗ — clamp() держит верхнюю границу 300px (в середине запрошенного диапазона, соответствует пропорциям реального файла логотипа) и безопасно сужается на узких viewport, не подходя к краям экрана ни на одной проверенной ширине (390/430px). */ .site-preloader__logo { display: block; width: clamp(160px, 45vw, 300px); height: auto; opacity: 0; transform: scale(0.97); transition: opacity var(--motion-reveal), transform var(--motion-reveal); } #site-preloader.is-visible .site-preloader__logo { opacity: 1; transform: scale(1); } /* Прогресс-бар вместо прежней статичной декоративной линии — тонкий трек (border-gold, тот же токен, что у .map-embed/.contact-form) с золотой заливкой, которую JS двигает в несколько проходов (см. preloader.js) — ощущение подлинной многоэтапной загрузки, не однократная декоративная отрисовка. Тоньше и короче прежнего варианта (1px, 100px) — ближе к исходному "очень тонкий акцент", при этом движение заливки всё ещё читается. */ .site-preloader__progress { width: 100px; max-width: 28vw; height: 1px; background: var(--border-gold); opacity: 0; overflow: hidden; transition: opacity var(--motion-nav); transition-delay: 150ms; } #site-preloader.is-visible .site-preloader__progress { opacity: 1; } .site-preloader__progress-fill { height: 100%; width: 0%; background: var(--gold); transition: width 260ms var(--ease-standard); } /* Обычная навигация по сайту / back-forward (см. shouldShowPreloader() в preloader.js) — инлайн-скрипт в синхронно добавляет этот класс на ДО того, как #site-preloader вообще успевает отрисоваться, поэтому полноэкранной сцены не видно вовсе (не "быстрое исчезновение", а полное отсутствие показа). При F5/reload и при новом входе на сайт класс не добавляется — сцена показывается как обычно. */ html.no-preloader #site-preloader { display: none; }