/* ===================================================================================== Ambient «лава-лампа» фон для market.php (SOTA 2026) ------------------------------------------------------------------------------------ Очень субтильный mesh-gradient на весь экран ПОД контентом. Капли — мягкие radial-gradient; их цвет берётся из активного слайда hero (JS извлекает доминирующую палитру) и ПЛАВНО перетекает при смене слайда — это возможно благодаря @property (зарегистрированную custom-property типа можно анимировать через transition, обычный градиент — нельзя). Капли медленно дрейфуют через transform (GPU), а лёгкий blur на КОНТЕЙНЕРЕ (а не на каждой капле) даёт эффект «за стеклом» с хорошей производительностью (рекомендация Floating-практик). Слой виден сквозь прозрачный .page поверх базового фона --canvas (html/body). Уважает prefers-reduced-motion (дрейф выключается). На мобиле мягче и легче. Класс .mkt-has-lava на ставит JS — поэтому прозрачность .page включается только здесь (на explore и других страницах ничего не меняется). ===================================================================================== */ /* Цвет капли — регистрируем как , чтобы он плавно транзишился. inherits:false — у каждой капли свой --lc. До установки из JS — transparent (никакого мелькания). */ @property --lc{ syntax: ''; inherits: false; initial-value: transparent; } /* Пропускаем ambient-слой сквозь контент. ВАЖНО: прозрачным должен быть и сам , и .page — иначе непрозрачный фон body (это не-позиционированный блок) по правилам стекинга рисуется ПОВЕРХ слоя с z-index:-1 и полностью его закрывает. Базовый фон --canvas остаётся на (он тематичен: у html тоже есть data-theme), поэтому тема не ломается. Только на странице с активным фоном. */ .mkt-has-lava, .mkt-has-lava .page{ background: transparent; } .mkt-lava{ position: fixed; inset: 0; z-index: -1; /* ровно по вьюпорту — позиции от краёв экрана */ pointer-events: none; overflow: hidden; opacity: var(--lava-op, .045); /* чуть ярче — крутится здесь */ filter: blur(var(--lava-blur, 72px)); -webkit-filter: blur(var(--lava-blur, 72px)); /* px, не vw — Safari дружелюбнее */ } [data-theme="light"] .mkt-lava{ --lava-op: .03; } /* на светлой теме тише */ .mkt-lava .lb{ position: absolute; background: var(--lc, transparent); /* СПЛОШНОЙ цвет — чтобы была видна неправильная форма */ border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%; /* базовая «неправильная» форма (фолбэк, если морф выключен) */ transition: --lc 1.6s var(--ease, ease); /* плавная смена цвета при смене слайда */ will-change: transform, border-radius; } /* ЧЕТЫРЕ большие кляксы неправильной формы (меньше числом, крупнее). Одна большая по центру, одна большая у ПРАВОГО края, плюс пара. Каждая дрейфует и «дышит» формой по-своему. */ .mkt-lava .lb1{ width: 66vmin; height: 66vmin; left: 14%; top: 6%; animation: mktDrift1 42s ease-in-out infinite, mktMorphA 18s ease-in-out infinite; } /* БОЛЬШАЯ — верх-центр */ .mkt-lava .lb2{ width: 58vmin; height: 58vmin; left: 60%; top: 40%; animation: mktDrift2 48s ease-in-out infinite, mktMorphB 22s ease-in-out infinite; } /* БОЛЬШАЯ — правый край, ниже */ .mkt-lava .lb3{ width: 52vmin; height: 52vmin; left: 2%; top: 54%; animation: mktDrift3 52s ease-in-out infinite, mktMorphC 16s ease-in-out infinite; } /* низ-лево */ .mkt-lava .lb4{ width: 50vmin; height: 50vmin; left: 48%; top: 14%; animation: mktDrift4 45s ease-in-out infinite, mktMorphA 20s ease-in-out infinite; } /* середина */ /* дрейф — у каждой свой путь, амплитуда заметная */ @keyframes mktDrift1{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 33%{ transform: translate3d( 12vmin, 18vmin,0) scale(1.12); } 66%{ transform: translate3d(-14vmin, 9vmin,0) scale(0.9); } } @keyframes mktDrift2{ 0%,100%{ transform: translate3d(0,0,0) scale(1.08); } 50%{ transform: translate3d(-18vmin, 15vmin,0) scale(0.88); } } @keyframes mktDrift3{ 0%,100%{ transform: translate3d(0,0,0) scale(0.94); } 40%{ transform: translate3d( 16vmin,-14vmin,0) scale(1.14); } 70%{ transform: translate3d( 20vmin, 7vmin,0) scale(1); } } @keyframes mktDrift4{ 0%,100%{ transform: translate3d(0,0,0) scale(1.06); } 50%{ transform: translate3d(-15vmin,-16vmin,0) scale(0.9); } } /* «дыхание» формы (морфинг border-radius) — три разных паттерна, чтобы кляксы жили по-разному */ @keyframes mktMorphA{ 0%,100%{ border-radius: 42% 58% 65% 35% / 55% 48% 52% 45%; } 33%{ border-radius: 60% 40% 35% 65% / 62% 35% 65% 38%; } 66%{ border-radius: 38% 62% 55% 45% / 46% 60% 40% 54%; } } @keyframes mktMorphB{ 0%,100%{ border-radius: 55% 45% 48% 52% / 42% 58% 42% 58%; } 50%{ border-radius: 36% 64% 62% 38% / 64% 38% 62% 36%; } } @keyframes mktMorphC{ 0%,100%{ border-radius: 48% 52% 60% 40% / 58% 42% 58% 42%; } 40%{ border-radius: 64% 36% 40% 60% / 38% 64% 36% 62%; } 70%{ border-radius: 45% 55% 52% 48% / 52% 50% 50% 46%; } } /* Кляксы заканчиваются за 150px ДО секции .mkt-cta: над ней лава мягко растворяется в фон --canvas, поэтому к CTA-баннеру (и футеру) подходит чистый фон — как раньше. Полосу-затухание вставляет JS прямо перед .mkt-cta (div.mkt-lava-fade); она не занимает места (height:0) и тематична. */ .mkt-has-lava .mkt-lava-fade{ position: relative; height: 0; } .mkt-has-lava .mkt-lava-fade::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(to bottom, transparent, var(--canvas)); pointer-events: none; } /* мобильные: меньше blur (экран меньше) и тише */ @media (max-width: 768px){ .mkt-lava{ --lava-blur: 54px; --lava-op: .04; } [data-theme="light"] .mkt-lava{ --lava-op: .028; } } /* доступность: останавливаем дрейф (цвет всё равно мягко меняется — это не «движение») */ @media (prefers-reduced-motion: reduce){ .mkt-lava .lb{ animation: none; } }