/* Aroken — сезонные темы оформления. Каждое правило начинается с [data-site-theme]: без темы не срабатывает ни одно и не грузится ни одна картинка.
Тему ставит js/themes.js на (или campaigns.js на плашку, или витрина prototypes/themes на обёртку).
Токены: --th-accent (+ -rgb, -hi — светлый край градиента), --th-ink — текст на акценте, --th-bg — фон промо-плашки, --th-glyph — значок в полосе.
Декор не ловит клики (pointer-events: none) и стоит в полях: у верхних углов первого экрана — за контентом, на стыке с первой секцией — в промежутке между текстами. */
/* ---------- Токены тем ---------- */
[data-site-theme="halloween"] {
--th-accent: #FF8A1F; --th-accent-hi: #FFB65C; --th-accent-rgb: 255, 138, 31; --th-ink: #1A0D02;
--th-bg: radial-gradient(380px 260px at 58% 104%, rgba(255, 138, 31, .3), rgba(255, 138, 31, 0) 72%), radial-gradient(560px 400px at -4% -10%, rgba(117, 87, 255, .46), rgba(117, 87, 255, 0) 70%), radial-gradient(520px 380px at 104% 110%, rgba(255, 106, 18, .3), rgba(255, 106, 18, 0) 72%), #100A19;
--th-glyph: url("data:image/svg+xml,");
}
[data-site-theme="black_friday"] {
--th-accent: #C7FF2E; --th-accent-hi: #E7FF8A; --th-accent-rgb: 199, 255, 46; --th-ink: #0A0A0A;
--th-bg: radial-gradient(420px 280px at 58% 104%, rgba(199, 255, 46, .2), rgba(199, 255, 46, 0) 72%), radial-gradient(520px 380px at -4% -10%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 70%), #050505;
--th-glyph: url("data:image/svg+xml,");
}
[data-site-theme="new_year"] {
--th-accent: #8FE3FF; --th-accent-hi: #D6F5FF; --th-accent-rgb: 143, 227, 255; --th-ink: #04131C;
--th-bg: radial-gradient(380px 260px at 58% 104%, rgba(143, 227, 255, .24), rgba(143, 227, 255, 0) 72%), radial-gradient(560px 400px at -4% -10%, rgba(117, 87, 255, .44), rgba(117, 87, 255, 0) 70%), radial-gradient(520px 380px at 104% 110%, rgba(38, 110, 210, .5), rgba(38, 110, 210, 0) 72%), #07101F;
--th-glyph: url("data:image/svg+xml,");
}
[data-site-theme="summer"] {
--th-accent: #FFD23F; --th-accent-hi: #FFE88F; --th-accent-rgb: 255, 210, 63; --th-ink: #1A1400;
--th-bg: radial-gradient(420px 300px at 100% -10%, rgba(255, 210, 63, .34), rgba(255, 210, 63, 0) 70%), radial-gradient(600px 420px at -4% 110%, rgba(63, 217, 196, .36), rgba(63, 217, 196, 0) 70%), radial-gradient(380px 260px at 58% 104%, rgba(115, 214, 255, .2), rgba(115, 214, 255, 0) 72%), #061A1D;
--th-glyph: url("data:image/svg+xml,");
}
[data-site-theme="autumn"] {
--th-accent: #FFA53D; --th-accent-hi: #FFCB80; --th-accent-rgb: 255, 165, 61; --th-ink: #1C0C00;
--th-bg: radial-gradient(380px 260px at 58% 104%, rgba(255, 165, 61, .26), rgba(255, 165, 61, 0) 72%), radial-gradient(560px 400px at -4% -10%, rgba(226, 85, 45, .4), rgba(226, 85, 45, 0) 70%), radial-gradient(520px 380px at 104% 110%, rgba(140, 70, 24, .6), rgba(140, 70, 24, 0) 72%), #150C08;
--th-glyph: url("data:image/svg+xml,");
}
[data-site-theme="valentine"] {
--th-accent: #FF7AB0; --th-accent-hi: #FFB8D4; --th-accent-rgb: 255, 122, 176; --th-ink: #22030F;
--th-bg: radial-gradient(380px 260px at 58% 104%, rgba(255, 122, 176, .28), rgba(255, 122, 176, 0) 72%), radial-gradient(560px 400px at -4% -10%, rgba(255, 77, 126, .36), rgba(255, 77, 126, 0) 70%), radial-gradient(520px 380px at 104% 110%, rgba(117, 87, 255, .42), rgba(117, 87, 255, 0) 72%), #17070F;
--th-glyph: url("data:image/svg+xml,");
}
[data-site-theme="birthday"] {
--th-accent: #B8A3FF; --th-accent-hi: #DCD1FF; --th-accent-rgb: 184, 163, 255; --th-ink: #120A2A;
--th-bg: radial-gradient(380px 260px at 58% 104%, rgba(199, 255, 46, .22), rgba(199, 255, 46, 0) 72%), radial-gradient(560px 400px at -4% -10%, rgba(117, 87, 255, .54), rgba(117, 87, 255, 0) 70%), radial-gradient(520px 380px at 104% 110%, rgba(255, 102, 97, .32), rgba(255, 102, 97, 0) 72%), #0E0B1F;
--th-glyph: url("data:image/svg+xml,");
}
/* ---------- Мелкие акценты страницы: второе свечение холста, искра заголовка, точка «Набор открыт» ---------- */
:root[data-site-theme] { --accent-2-rgb: var(--th-accent-rgb); }
[data-site-theme] .hero__spark { color: var(--th-accent); }
[data-site-theme] .badge__dot { background: var(--th-accent); box-shadow: 0 0 10px rgba(var(--th-accent-rgb), .65); }
[data-site-theme] .nav.is-scrolled { border-bottom-color: rgba(var(--th-accent-rgb), .2); }
/* ---------- Плашки кампании ---------- */
/* полоса над шапкой: подсветка и кромка цвета темы, значок темы вместо ✦ */
:is([data-site-theme] .cta-plate--bar, .cta-plate--bar[data-site-theme]) { background: radial-gradient(60% 180% at 50% 100%, rgba(var(--th-accent-rgb), .16), rgba(var(--th-accent-rgb), 0) 70%), linear-gradient(90deg, #0A0B09, #111210 50%, #0A0B09); }
:is([data-site-theme] .cta-plate--bar, .cta-plate--bar[data-site-theme])::after { background: linear-gradient(90deg, rgba(var(--th-accent-rgb), 0), rgba(var(--th-accent-rgb), .6) 50%, rgba(var(--th-accent-rgb), 0)); }
:is([data-site-theme] .cta-plate--bar, .cta-plate--bar[data-site-theme]) .cta-plate__text::before { content: ""; flex: none; align-self: center; width: 16px; height: 16px; background: var(--th-accent); -webkit-mask: var(--th-glyph) center / contain no-repeat; mask: var(--th-glyph) center / contain no-repeat; }
:is([data-site-theme] .cta-plate--bar, .cta-plate--bar[data-site-theme]) .cta-plate__link { color: var(--th-accent); }
:is([data-site-theme] .cta-plate, .cta-plate[data-site-theme]) .cta-plate__unit:last-child .cta-plate__num { color: var(--th-accent); }
/* промо-плашка и её мини-версия внизу окна (.cta-plate--dock): фон, стикер, свечение подарка, рамка бонуса и 3D-объект темы у подарка */
:is([data-site-theme] .cta-plate--promo, .cta-plate--promo[data-site-theme]) { border-color: rgba(var(--th-accent-rgb), .3); background: var(--th-bg); }
:is([data-site-theme] .cta-plate--dock, .cta-plate--dock[data-site-theme]) { border-color: rgba(var(--th-accent-rgb), .36); background: radial-gradient(380px 150px at 8% 100%, rgba(var(--th-accent-rgb), .2), rgba(var(--th-accent-rgb), 0) 70%), var(--th-bg); }
:is([data-site-theme] :is(.cta-plate--promo, .cta-plate--dock), :is(.cta-plate--promo, .cta-plate--dock)[data-site-theme]) .cta-plate__sticker { filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .38)) drop-shadow(0 0 24px rgba(var(--th-accent-rgb), .34)); }
:is([data-site-theme] :is(.cta-plate--promo, .cta-plate--dock), :is(.cta-plate--promo, .cta-plate--dock)[data-site-theme]) .cta-plate__sticker-paper { background: linear-gradient(100deg, var(--th-accent), var(--th-accent-hi)); color: var(--th-ink); }
:is([data-site-theme] :is(.cta-plate--promo, .cta-plate--dock), :is(.cta-plate--promo, .cta-plate--dock)[data-site-theme]) .cta-plate__bonus { border-color: rgba(var(--th-accent-rgb), .38); background: rgba(var(--th-accent-rgb), .1); }
:is([data-site-theme] .cta-plate--promo, .cta-plate--promo[data-site-theme]) .cta-plate__gift { filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 48px rgba(var(--th-accent-rgb), .3)); }
:is([data-site-theme] .cta-plate--dock, .cta-plate--dock[data-site-theme]) .cta-plate__gift { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 28px rgba(var(--th-accent-rgb), .3)); }
.theme-plate-art, .theme-plate-tape { pointer-events: none; -webkit-user-select: none; user-select: none; }
.theme-plate-art img { display: block; width: 100%; height: auto; }
.cta-plate--promo > .theme-plate-art { position: relative; z-index: 3; grid-area: art; align-self: end; justify-self: start; width: 46%; margin: 0 0 -22px -8%; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .5)); }
/* на промо у всех объектов свой вес: шарики с нитками и тонкая доска при общей ширине выглядели крошкой */
.cta-plate--promo > .theme-plate-art--balloons { width: 60%; margin-left: -14%; }
.cta-plate--promo > .theme-plate-art--surfboard { width: 54%; }
/* на плашке внизу окна объект выглядывает из-за подарка (на телефоне подарка нет — из-за стикера), а не лежит на нём вторым стикером:
z-index -1 — над фоном плашки, под подарком и стикером; наружу выходит не дальше подарка, чтобы не ложиться на текст страницы. */
.cta-plate--dock > .theme-plate-art { position: absolute; z-index: -1; top: -18px; left: -20px; width: 50px; rotate: -16deg; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
/* лента «Чёрной пятницы» на плашках */
.theme-plate-tape { position: absolute; z-index: 1; display: flex; align-items: center; overflow: hidden; background: var(--th-accent, #C7FF2E); color: #0A0A0A; font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.theme-plate-tape b { font-weight: 700; }
.cta-plate--promo > .theme-plate-tape { left: -2%; right: -2%; top: 0; height: 24px; rotate: .5deg; font-size: 12px; }
/* снег на кромке плашек (Новый год), волна по низу промо (лето), ярлык «Чёрной пятницы» над стикером плашки внизу окна */
:is([data-site-theme="new_year"] .cta-plate--promo, .cta-plate--promo[data-site-theme="new_year"])::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 14px; background: url("../assets/img/themes/snowcap.svg") 0 0 / 160px 14px repeat-x; pointer-events: none; }
:is([data-site-theme="summer"] .cta-plate--promo, .cta-plate--promo[data-site-theme="summer"])::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 8px; height: 22px; background: url("../assets/img/themes/waves.svg") 0 0 / 150px 22px repeat-x; opacity: .5; pointer-events: none; }
:is([data-site-theme="new_year"] .cta-plate--dock, .cta-plate--dock[data-site-theme="new_year"])::after { content: ""; position: absolute; z-index: 1; left: 116px; right: 24px; top: -4px; height: 10px; border-radius: 6px 6px 0 0; background: url("../assets/img/themes/snowcap.svg") 0 0 / 120px 10px repeat-x; pointer-events: none; }
.cta-plate--dock > .theme-plate-tape { top: -12px; left: 118px; height: 20px; padding: 0 10px; border-radius: 3px; rotate: -3deg; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6); font-size: 10px; }
/* ---------- Гирлянда под шапкой: видна, пока страница у самого верха ---------- */
.theme-nav { position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none; background-repeat: repeat-x; background-position: 50% 0; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.nav.is-scrolled .theme-nav, .nav.is-open .theme-nav { opacity: 0; translate: 0 -8px; }
.theme-nav--garland { background-image: url("../assets/img/themes/garland.svg"); background-size: 320px 36px; }
.theme-nav--garland::before, .theme-nav--garland::after { content: ""; position: absolute; inset: 0; background-repeat: repeat-x; background-position: 50% 0; background-size: 320px 36px; mix-blend-mode: screen; }
/* свечение лампочек — в процентах плитки, чтобы на телефоне (плитка 231px) оставалось на своих лампочках; --glow — радиус */
.theme-nav--garland { --glow: 14px; }
.theme-nav--garland::before { background-image: radial-gradient(circle at 13.1% 52.4%, rgba(199, 255, 46, .8), rgba(199, 255, 46, 0) var(--glow)), radial-gradient(circle at 63% 52.4%, rgba(115, 214, 255, .8), rgba(115, 214, 255, 0) var(--glow)); }
.theme-nav--garland::after { background-image: radial-gradient(circle at 37% 52.4%, rgba(255, 102, 97, .8), rgba(255, 102, 97, 0) var(--glow)), radial-gradient(circle at 86.9% 52.4%, rgba(184, 163, 255, .8), rgba(184, 163, 255, 0) var(--glow)); }
.theme-nav--bunting { height: 40px; background-image: url("../assets/img/themes/bunting.svg"); background-size: 240px 40px; }
.theme-nav--hearts { height: 40px; background-image: url("../assets/img/themes/hearts.svg"); background-size: 200px 40px; }
/* ---------- Первый экран ---------- */
/* Две нулевые по высоте полосы внутри .hero: верхняя — в начале контента (декор уходит вверх в поле и за контент), нижняя — в конце
(декор живёт в промежутке --seam между первым экраном и первой секцией). --gutter — боковое поле, --pad-top — верхнее поле; их считает js/themes.js. */
.theme-decor { position: relative; height: 0; overflow-x: clip; pointer-events: none; }
.theme-decor--top { z-index: -1; }
.theme-decor--seam { z-index: 2; }
.theme-art { position: absolute; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; background-repeat: no-repeat; background-position: center; background-size: contain; }
.theme-art img { display: block; width: 100%; height: auto; }
/* объекты на стыке: --s — сторона квадрата, по центру промежутка */
.theme-decor--seam .theme-art { --s: min(120px, calc(var(--seam) - 8px)); width: var(--s); top: calc(var(--seam) / 2 - var(--s) / 2); }
/* Хэллоуин: паутинка с паучком в левом углу, летучие мыши над правым, две тыквы на стыке */
[data-site-theme="halloween"] .theme-art--web { left: 0; top: calc(-1 * var(--pad-top)); width: calc(var(--gutter) + 52px); aspect-ratio: 120 / 176; background-image: url("../assets/img/themes/web.svg"); }
[data-site-theme="halloween"] .theme-art--bat { top: calc(-1 * var(--pad-top) + 10px); width: 56px; aspect-ratio: 64 / 26; background-image: url("../assets/img/themes/bat.svg"); filter: drop-shadow(0 0 6px rgba(184, 163, 255, .35)); }
[data-site-theme="halloween"] .theme-art--bat-1 { right: calc(var(--gutter) + 190px); top: calc(-1 * var(--pad-top) + 12px); }
[data-site-theme="halloween"] .theme-art--bat-2 { right: calc(var(--gutter) + 96px); width: 40px; top: calc(-1 * var(--pad-top) + 4px); }
[data-site-theme="halloween"] .theme-art--bat-3 { right: calc(var(--gutter) + 30px); width: 28px; top: calc(-1 * var(--pad-top) + 22px); }
.theme-decor.is-narrow .theme-art--bat { display: none; }
[data-site-theme="halloween"] .theme-art--pumpkin-1 { --s: min(150px, calc(var(--seam) + 4px)); left: max(0px, calc(var(--gutter) - 34px)); rotate: -6deg; }
[data-site-theme="halloween"] .theme-art--pumpkin-2 { --s: min(88px, calc(var(--seam) * .62)); left: calc(max(0px, var(--gutter) - 34px) + min(150px, var(--seam)) * .82); top: calc(var(--seam) / 2 - var(--s) * .2); rotate: 9deg; }
/* Чёрная пятница: две ленты накрест через стык и ценник */
/* ленты тоньше расчётной высоты и положе расчётного угла, вращение от центра: концы не упираются в карточку первого экрана
и в заголовок следующей секции — между лентами и текстом остаётся воздух */
[data-site-theme="black_friday"] .theme-art--tape { --th: calc(var(--tape-h) - 6px); left: -5%; width: 110%; height: var(--th); top: calc(var(--seam) / 2 - var(--th) / 2); display: flex; align-items: center; overflow: hidden; background: var(--th-accent); color: #0A0A0A; font: 700 13px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; rotate: calc(-.8 * var(--tape-a)); transform-origin: 50% 50%; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .8); }
[data-site-theme="black_friday"] .theme-art--tape-2 { background: #0B0B0C; color: var(--th-accent); border-block: 1.5px solid var(--th-accent); rotate: calc(var(--tape-a) * .6); }
.theme-art--tape b, .theme-plate-tape b { flex: none; font-weight: 700; }
[data-site-theme="black_friday"] .theme-art--tag { --s: min(104px, calc(var(--seam) * .78)); left: max(2px, calc(var(--gutter) - 20px)); rotate: -10deg; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); }
/* Новый год: шары на нитках в боковых полях, пара шаров на стыке; снег — на холсте */
[data-site-theme="new_year"] .theme-decor--top .theme-art--ornament { --drop: 40px; top: calc(-1 * var(--pad-top) + var(--drop)); width: 40px; transform-origin: 50% calc(-1 * var(--drop)); }
[data-site-theme="new_year"] .theme-decor--top .theme-art--ornament::before { content: ""; position: absolute; left: 50%; bottom: 88%; width: 1px; height: var(--drop); background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .5)); }
[data-site-theme="new_year"] .theme-decor--top .theme-art--ornament-1 { --drop: 22px; left: calc(var(--gutter) / 2 - 20px); }
[data-site-theme="new_year"] .theme-decor--top .theme-art--ornament-2 { --drop: 70px; right: calc(var(--gutter) / 2 - 17px); width: 34px; }
/* третий шар висел прямо на гирлянде под шапкой и путался в лампочках — гирлянды там достаточно */
.theme-decor--top.is-narrow .theme-art--ornament { display: none; }
[data-site-theme="new_year"] .theme-decor--seam .theme-art--ornament-1 { --s: min(84px, calc(var(--seam) * .6)); left: max(4px, calc(var(--gutter) - 14px)); rotate: -14deg; }
[data-site-theme="new_year"] .theme-decor--seam .theme-art--ornament-2 { --s: min(62px, calc(var(--seam) * .46)); left: calc(max(4px, var(--gutter) - 14px) + min(84px, var(--seam) * .6) * .78); top: calc(var(--seam) / 2 - var(--s) * .1); rotate: 18deg; filter: hue-rotate(-70deg) saturate(1.2); }
/* Лето: солнце за правым углом, волны по стыку, пальма и доска */
[data-site-theme="summer"] .theme-art--sun { right: -140px; top: calc(-1 * var(--pad-top) - 200px); width: 520px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 63, .26), rgba(255, 170, 40, .1) 38%, rgba(255, 170, 40, 0) 68%); }
/* волны: высота от стыка (на страницах с узким стыком не задевают заголовок), плитка — в пропорции 240×36; сама полоса стоит и гаснет
к правому краю — не линейка через всю страницу, а вода у пальмы; едет только слой волн внутри */
[data-site-theme="summer"] .theme-decor--seam .theme-art--waves { --wh: min(36px, calc(var(--seam) * .5)); --ww: calc(var(--wh) * 240 / 36); left: 0; right: 0; width: auto; height: var(--wh); top: calc(var(--seam) / 2 - var(--wh) / 2); overflow: hidden; opacity: .7; -webkit-mask-image: linear-gradient(90deg, #000 18%, rgba(0, 0, 0, .1) 78%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(90deg, #000 18%, rgba(0, 0, 0, .1) 78%, rgba(0, 0, 0, 0)); }
[data-site-theme="summer"] .theme-decor--seam .theme-art--waves::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--ww)); right: 0; background: url("../assets/img/themes/waves.svg") 0 0 / var(--ww) var(--wh) repeat-x; }
/* пальма рисунком без полей: ствол вставал прямо на заголовок следующей секции — ниже ростом и чуть выше по стыку */
[data-site-theme="summer"] .theme-art--palm { --s: min(124px, calc(var(--seam) * .82)); left: max(-6px, calc(var(--gutter) - 42px)); top: calc(var(--seam) / 2 - var(--s) * .56); aspect-ratio: 170 / 200; width: calc(var(--s) * .85); background-image: url("../assets/img/themes/palm.svg"); }
[data-site-theme="summer"] .theme-art--surfboard { --s: min(120px, calc(var(--seam) * .86)); left: calc(max(-6px, var(--gutter) - 42px) + min(140px, var(--seam)) * .6); rotate: 8deg; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
/* Осень: три кленовых листа разного оттенка на стыке; падающие листья — на холсте */
[data-site-theme="autumn"] .theme-art--leaf-1 { --s: min(100px, calc(var(--seam) * .72)); left: max(2px, calc(var(--gutter) - 24px)); rotate: -18deg; }
[data-site-theme="autumn"] .theme-art--leaf-2 { --s: min(76px, calc(var(--seam) * .55)); left: calc(max(2px, var(--gutter) - 24px) + min(100px, var(--seam) * .72) * .74); top: calc(var(--seam) / 2 - var(--s) * .1); rotate: 34deg; filter: hue-rotate(-24deg) saturate(1.25); }
[data-site-theme="autumn"] .theme-art--leaf-3 { --s: min(58px, calc(var(--seam) * .42)); left: calc(max(2px, var(--gutter) - 24px) + min(100px, var(--seam) * .72) * 1.34); top: calc(var(--seam) / 2 - var(--s) * .9); rotate: -52deg; filter: hue-rotate(20deg) brightness(1.1); }
/* День влюблённых: гирлянда сердечек под шапкой, два сердца на стыке; всплывающие сердечки — на холсте */
[data-site-theme="valentine"] .theme-art--heart-1 { --s: min(108px, calc(var(--seam) * .78)); left: max(2px, calc(var(--gutter) - 22px)); rotate: -10deg; }
[data-site-theme="valentine"] .theme-art--heart-2 { --s: min(60px, calc(var(--seam) * .44)); left: calc(max(2px, var(--gutter) - 22px) + min(108px, var(--seam) * .78) * .82); top: calc(var(--seam) / 2 - var(--s) * .95); rotate: 14deg; filter: hue-rotate(12deg) brightness(1.18) saturate(.7); }
/* День рождения школы: флажки под шапкой, шарики на стыке; конфетти — на холсте */
[data-site-theme="birthday"] .theme-art--balloons { --s: min(160px, calc(var(--seam) * 1.08)); left: max(0px, calc(var(--gutter) - 34px)); top: calc(var(--seam) / 2 - var(--s) * .52); rotate: -4deg; }
/* ---------- Частицы: холст за контентом, над свечением фона ---------- */
/* холст прозрачный, и за текстом без подложки снежинка или конфетти читаются как соринка на букве: в колонке текста частицы
приглушены, в полную силу — в боковых полях; на телефоне колонка во всю ширину — приглушены везде */
.theme-fx { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .4) 22%, rgba(0, 0, 0, .4) 78%, #000); mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .4) 22%, rgba(0, 0, 0, .4) 78%, #000); }
/* ---------- Плашка внизу окна на ноутбуке и планшете: подарок меньше, поле слева 100px ---------- */
@media (max-width: 1279px) {
.cta-plate--dock > .theme-plate-art { top: -16px; left: -16px; width: 44px; }
.cta-plate--dock > .theme-plate-tape { left: 106px; }
:is([data-site-theme="new_year"] .cta-plate--dock, .cta-plate--dock[data-site-theme="new_year"])::after { left: 104px; }
}
/* ---------- Телефон ---------- */
@media (max-width: 767px) {
/* подарка нет: объект — из-за угла стикера, ярлык ленты правее него, снег не доходит до крестика на углу */
.cta-plate--dock > .theme-plate-art { top: -16px; left: -12px; width: 38px; }
.cta-plate--dock > .theme-plate-tape { left: 40px; }
/* значок темы в полосе не шире ✦ — на 360 «до 16 сентября» остаётся в первой строке */
:is([data-site-theme] .cta-plate--bar, .cta-plate--bar[data-site-theme]) .cta-plate__text::before { width: 10px; height: 12px; }
:is([data-site-theme="new_year"] .cta-plate--dock, .cta-plate--dock[data-site-theme="new_year"])::after { left: 22px; right: 36px; }
.theme-nav { top: calc(100% - 14px); height: 26px; }
.theme-nav--garland, .theme-nav--garland::before, .theme-nav--garland::after { background-size: 231px 26px; }
.theme-nav--garland { --glow: 10px; }
.theme-nav--bunting { height: 28px; background-size: 168px 28px; }
.theme-nav--hearts { height: 28px; background-size: 140px 28px; }
.cta-plate--promo > .theme-plate-art { position: absolute; top: 100px; right: 10px; width: 56px; margin: 0; rotate: 10deg; }
:is([data-site-theme="summer"] .cta-plate--promo, .cta-plate--promo[data-site-theme="summer"])::after { bottom: 2px; height: 16px; background-size: 110px 16px; }
.cta-plate--promo > .theme-plate-art--balloons { top: 86px; right: 4px; width: 74px; margin: 0; }
.cta-plate--promo > .theme-plate-art--surfboard { width: 64px; }
.cta-plate--promo > .theme-plate-tape { height: 22px; font-size: 10px; }
[data-site-theme="black_friday"] .theme-art--tape { font-size: 11px; letter-spacing: .12em; }
.theme-fx { -webkit-mask-image: none; mask-image: none; opacity: .55; }
[data-site-theme="summer"] .theme-art--sun { right: -220px; top: calc(-1 * var(--pad-top) - 260px); }
}
/* ---------- Движение: только если человек не просил меньше ---------- */
@media (prefers-reduced-motion: no-preference) {
.theme-art, .theme-plate-art { animation: theme-in .9s var(--ease) .2s both; }
.theme-nav--garland::before { animation: theme-twinkle 2.2s ease-in-out infinite alternate; }
.theme-nav--garland::after { animation: theme-twinkle 2.2s ease-in-out -1.1s infinite alternate; }
[data-site-theme="halloween"] .theme-art--bat { animation: theme-in .9s var(--ease) .2s both, theme-flutter 2.6s ease-in-out infinite alternate; }
[data-site-theme="halloween"] .theme-art--bat-2 { animation-delay: .2s, -.9s; animation-duration: .9s, 2.1s; }
[data-site-theme="halloween"] .theme-art--bat-3 { animation-delay: .2s, -1.7s; animation-duration: .9s, 1.8s; }
[data-site-theme="new_year"] .theme-decor--top .theme-art--ornament { animation: theme-in .9s var(--ease) .2s both, theme-swing 3.4s ease-in-out infinite alternate; }
[data-site-theme="new_year"] .theme-decor--top .theme-art--ornament-2 { animation-delay: .2s, -1.4s; }
[data-site-theme="summer"] .theme-decor--seam .theme-art--waves::before { animation: theme-waves 16s linear infinite; }
.theme-art--tape b, .theme-plate-tape b { animation: theme-marquee 90s linear infinite; }
.theme-art--tape-2 b { animation-direction: reverse; }
.theme-plate-tape b { animation-duration: 60s; }
}
@keyframes theme-in { from { opacity: 0; translate: 0 10px; } }
@keyframes theme-twinkle { from { opacity: .15; } to { opacity: 1; } }
@keyframes theme-flutter { from { translate: 0 0; scale: 1 1; } 50% { scale: 1 .72; } to { translate: -6px -5px; scale: 1 1; } }
@keyframes theme-swing { from { rotate: -6deg; } to { rotate: 6deg; } }
@keyframes theme-waves { to { translate: var(--ww, 240px) 0; } }
@keyframes theme-marquee { to { translate: -50% 0; } }