/* ============================================= LEXARO BRAND PRELOADER ============================================= */ .lexaro-preloader { position: fixed; inset: 0; z-index: 10000; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; transition: opacity .5s ease, visibility .5s ease; } .lexaro-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Холодный вход отмечен раньше, в — прелоадер не должен появляться вовсе на повторных переходах внутри той же вкладки/сессии */ html.no-preloader .lexaro-preloader { display: none !important; } /* Платье SVG */ .preloader-dress { width: 80px; height: 80px; color: var(--primary); } .preloader-dress .dress-path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw-dress 1.2s cubic-bezier(.4,0,.2,1) forwards; } .preloader-dress .dress-skirt { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw-dress 1s cubic-bezier(.4,0,.2,1) .4s forwards; opacity: .7; } @keyframes draw-dress { to { stroke-dashoffset: 0; } } /* Название бренда */ .preloader-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; animation: fade-in-brand .6s ease .8s forwards; } .preloader-brand__name { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 700; color: var(--primary); letter-spacing: 6px; text-transform: uppercase; } .preloader-brand__sub { font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text-light); } /* Анимированная линия под названием */ .preloader-line { width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; animation: expand-line .8s cubic-bezier(.4,0,.2,1) 1s forwards; opacity: 0; } @keyframes expand-line { from { width: 0; opacity: 1; } to { width: 120px; opacity: 1; } } @keyframes fade-in-brand { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================= SKELETON LOADING — для карточек товаров ============================================= */ .skeleton { background: linear-gradient( 90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .product-card--skeleton .product-card__img-wrap { background: none; } .product-card--skeleton .skeleton-img { width: 100%; height: 100%; } .product-card--skeleton .skeleton-line { height: 14px; margin-bottom: 8px; } .product-card--skeleton .skeleton-line--short { width: 60%; } .product-card--skeleton .skeleton-line--price { height: 18px; width: 40%; margin-bottom: 14px; } .product-card--skeleton .skeleton-btn { height: 36px; width: 100%; } /* ============================================= SCROLL ANIMATIONS — Lexaro Max (раньше отдельный файл animations.css — объединено с этим файлом, чтобы убрать один render-blocking запрос: оба всегда грузились вместе, на каждой странице, в одном и том же порядке — Lighthouse на главной показывал LCP с ~90% "Render Delay", вызванным суммой 6 отдельных блокирующих CSS-файлов). Использование: добавь data-animate="fade-up" (или другой вариант) Опционально: data-delay="100" (мс) ============================================= */ /* --- Базовые состояния ДО появления --- */ [data-animate] { opacity: 0; will-change: opacity, transform; transition: opacity .65s cubic-bezier(.4, 0, .2, 1), transform .65s cubic-bezier(.4, 0, .2, 1); } /* Задержки */ [data-delay="100"] { transition-delay: .10s; } [data-delay="150"] { transition-delay: .15s; } [data-delay="200"] { transition-delay: .20s; } [data-delay="250"] { transition-delay: .25s; } [data-delay="300"] { transition-delay: .30s; } [data-delay="350"] { transition-delay: .35s; } [data-delay="400"] { transition-delay: .40s; } [data-delay="500"] { transition-delay: .50s; } /* --- Начальные позиции --- */ [data-animate="fade-up"] { transform: translateY(36px); } [data-animate="fade-down"] { transform: translateY(-24px); } [data-animate="fade-left"] { transform: translateX(36px); } [data-animate="fade-right"] { transform: translateX(-36px); } [data-animate="fade-in"] { transform: none; } [data-animate="zoom-in"] { transform: scale(.92); } [data-animate="zoom-out"] { transform: scale(1.06); } /* --- Состояние ПОСЛЕ появления (добавляется JS) --- */ [data-animate].is-visible { opacity: 1; transform: none !important; } /* --- Если JS отключён или prefers-reduced-motion --- */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================= ПОЯВЛЕНИЕ СТРАНИЦЫ ПРИ ПЕРЕХОДЕ Раньше здесь была View Transitions API (@view-transition + кроссфейд старой/новой страницы через ::view-transition-old/new(root)). Отказались от неё полностью после того, как пользователь вживую увидел «пропадание стилей» между переходами. Причина, подтверждённая эмпирически (CDP Network/CPU throttling, не на глаз): у API нет способа гарантировать, что новая страница уже готова к показу к моменту, когда доигрывает анимация исчезновения старой — на связи медленнее локалхоста (мобильный интернет, основная аудитория сайта) в этом зазоре виден пустой экран. Это и Chrome-only механизм (Safari/Firefox его не показывали вовсе). Вместо кросс-документного трюка — простая, детерминированная CSS- анимация появления самого содержимого
: работает одинаково в любом браузере, не зависит от скорости сети и не требует «снимка» предыдущей страницы вообще — только opacity, без transform (чтобы не ломать position:sticky у .catalog-sidebar/.cart-summary внутри). Шапка/ промо-полоса/футер не анимируются — они одинаковы на каждой странице, поэтому ощущаются как неподвижная, стабильная рамка сайта. ============================================= */ main#main { animation: main-fade-in .32s ease-out both; } @keyframes main-fade-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { main#main { animation: none; } } /* Хиро (pages/home.php, стили в style.css) уже играет свой безусловный вход-анимацией на КАЖДОЙ загрузке — намеренно, не через data-animate, чтобы гарантированно показаться даже без JS (см. Стадию 5). На холодном входе (html.no-preloader ОТСУТСТВУЕТ — прелоадер реально показан) это уместно как единственная анимация появления. На тёплой навигации внутри сессии (html.no-preloader ЕСТЬ) страница уже получает общее появление через main-fade-in выше — свой более сложный многоступенчатый вход хиро поверх него дал бы двойную, слегка дёрганую анимацию вместо одной чистой. */ html.no-preloader .hero__content > *, html.no-preloader .hero__visual { animation: none; opacity: 1; transform: none; }