:root {
--bg: #05070f;
--bg2: #080c18;
--surface: rgba(255,255,255,0.035);
--surface-hover: rgba(255,255,255,0.065);
--border: rgba(255,255,255,0.07);
--border-bright: rgba(0,220,255,0.4);
--cyan: #00dcff;
--cyan-dim: rgba(0,220,255,0.12);
--cyan-glow: rgba(0,220,255,0.25);
--purple: #7c5cfc;
--purple-dim: rgba(124,92,252,0.12);
--text: #f0f4ff;
--text-muted: #6b7a99;
--text-dim: #8a96b0;
--green: #00e87a;
--red: #ff4d6a;
--radius: 18px;
--radius-sm: 12px;
--glass-bg: rgba(255, 255, 255, 0.025);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-blur: blur(16px) saturate(180%);
--glass-bg-panel: rgba(255, 255, 255, 0.06);
--glass-blur-sheet: none;
--lg-shadow: 0 -8px 36px rgba(0, 0, 0, 0.38), 0 4px 20px rgba(0, 40, 90, 0.14);
--lg-inset: inset 0 1px 0 rgba(255, 255, 255, 0.09);
--lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
--lg-specular: linear-gradient(128deg, rgba(0, 210, 255, 0.10) 0%, rgba(100, 140, 255, 0.04) 28%, transparent 52%);
}
/* background у html раньше был задан ТОЛЬКО для светлой темы (см.
html[data-theme="light"] ниже) — у тёмной темы своего значения
не было вообще, фон html оставался дефолтным белым браузера.
Обычно этого не видно (body/канвасы перекрывают всё), но в любой
момент, когда между ними образуется зазор (оверскролл/резиновый
отскок в самом верху страницы, особенно заметно внутри шторки
IT-новостей с её собственным скролл-контейнером) — сквозь этот
зазор на долю секунды показывался белый html позади тёмного
сайта: жалоба "белая полоса сверху, при просмотре новостей её
быть не должно". Явный тёмный фон здесь закрывает этот зазор тем
же цветом, что и у body. */
html { color-scheme: dark; background: var(--bg); }
/* Тёмная тема по умолчанию — без тяжёлого blur на панелях */
html:not([data-theme="light"]) .glass-panel,
[data-theme="dark"] .glass-panel {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: none;
}
html:not([data-theme="light"]) .pill-btn,
[data-theme="dark"] .pill-btn {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html:not([data-theme="light"]) .item-card,
[data-theme="dark"] .item-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-theme="light"] {
color-scheme: light;
background: #5090c4;
min-height: 100%;
}
[data-theme="light"] {
--bg: transparent;
--bg2: #6ba8d9;
--surface: rgba(255,255,255,0.78);
--surface-hover: rgba(255,255,255,0.95);
--border: rgba(15,25,50,0.1);
--border-bright: rgba(0,140,180,0.45);
--cyan: #0088aa;
--cyan-dim: rgba(0,136,170,0.14);
--cyan-glow: rgba(0,136,170,0.22);
--purple: #6350d4;
--purple-dim: rgba(99,80,212,0.12);
--text: #0f1525;
--text-muted: #5a6478;
--text-dim: #3d4a62;
--green: #00a85c;
--red: #e0344f;
--glass-bg: rgba(255, 255, 255, 0.20);
--glass-bg-panel: rgba(255, 255, 255, 0.48);
--glass-border: rgba(255, 255, 255, 0.88);
--glass-blur-sheet: blur(11px) saturate(160%);
--lg-shadow: 0 8px 32px rgba(31, 38, 135, 0.18), 0 2px 8px rgba(31, 38, 135, 0.08);
--lg-inset: inset 0 4px 24px rgba(255, 255, 255, 0.38), inset 0 -2px 10px rgba(31, 38, 135, 0.05);
--lg-edge: inset -10px -8px 0 -11px rgba(255, 255, 255, 0.92), inset 0 -9px 0 -8px rgba(255, 255, 255, 0.65);
--lg-specular: linear-gradient(128deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 22%, transparent 48%), linear-gradient(180deg, rgba(255,255,255,0.30) 0%, transparent 14%);
}
[data-theme="light"] #hero-star-canvas { opacity: 1; }
/* Небольшой блюр, как у «Популярное сегодня»/блоков акций (по
просьбе пользователя). Стоит знать: базовое правило .hero (ниже
по каскаду) специально избегает backdrop-filter — блок сидит
поверх постоянно анимированного неба/облаков (#star-canvas,
position:fixed на всю страницу), и блюр пересчитывается каждый
кадр, что может слегка нагружать GPU при слабом устройстве.
Значение 6px — то же, что и у остальных блоков; если появится
тормознутость именно на светлой теме — можно откатить только эту
строку. */
[data-theme="light"] .hero {
background: linear-gradient(135deg, rgba(0,136,170,0.1) 0%, rgba(99,80,212,0.08) 100%);
border-color: rgba(15,25,50,0.08);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .shop-search-field {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(40, 110, 220, 0.45);
box-shadow:
0 6px 18px rgba(31, 38, 135, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .shop-search-field:focus-within {
border-color: rgba(0, 120, 200, 0.7);
box-shadow:
0 0 0 3px rgba(0, 136, 170, 0.12),
0 8px 20px rgba(31, 38, 135, 0.1);
}
[data-theme="light"] .shop-search-icon { color: #3d4a62; }
[data-theme="light"] .shop-search-input {
color: var(--text);
}
[data-theme="light"] .shop-search-input::placeholder {
color: var(--text-muted);
}
[data-theme="light"] .shop-search-kbd {
color: #3d4a62;
background: rgba(15, 25, 50, 0.06);
border-color: rgba(15, 25, 50, 0.12);
}
[data-theme="light"] .cat-btn-inner {
color: var(--text-muted);
border-color: rgba(15, 25, 50, 0.14);
}
[data-theme="light"] .cat-btn:hover .cat-btn-inner {
color: var(--text);
border-color: rgba(15, 25, 50, 0.22);
}
[data-theme="light"] .cat-btn[data-cat="All"].active .cat-btn-inner {
color: var(--cyan);
border-color: rgba(0, 136, 170, 0.42);
}
[data-theme="light"] .cat-btn.active:not([data-cat="All"]) .cat-btn-inner {
color: var(--text-muted);
border-color: rgba(15, 25, 50, 0.14);
}
[data-theme="light"] .cat-btn[data-cat="Apple Gift Cards"].active .cat-btn-inner,
[data-theme="light"] .cat-btn[data-cat="🍎 Apple Gift Cards"].active .cat-btn-inner {
border-color: rgba(15, 25, 50, 0.14);
}
[data-theme="light"] .cat-btn[data-cat="Apple Gift Cards"]:hover .cat-btn-inner,
[data-theme="light"] .cat-btn[data-cat="🍎 Apple Gift Cards"]:hover .cat-btn-inner {
border-color: rgba(15, 25, 50, 0.22);
}
[data-theme="light"] #category-filter.category-filter--glass .category-filter-glass {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.62) 0%,
rgba(255, 255, 255, 0.76) 55%,
rgba(255, 255, 255, 0.9) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 0 48px rgba(255, 255, 255, 0.35);
}
[data-theme="light"] #category-filter.category-filter--glass .category-filter-glass::after {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.55) 0%,
rgba(200, 230, 255, 0.18) 45%,
transparent 72%
);
}
/* Небольшой блюр, как у остальных блоков (по просьбе пользователя).
На мобильном/тач ниже по каскаду есть отдельное правило
".item-card { backdrop-filter: none !important }" (комментарий
там: "blur на теме/свайпе дорогой") — оно и на светлой теме
продолжит отключать блюр во время свайпа/смены темы, это
намеренно и трогать не нужно. */
[data-theme="light"] .item-card {
background: rgba(255,255,255,0.58);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .modal-overlay,
[data-theme="light"] #modal-overlay {
background-color: rgba(15, 25, 50, 0.34);
}
[data-theme="light"] .modal-overlay.active,
[data-theme="light"] #modal-overlay.active {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Liquid glass — тёмная тема (без blur на обычных панелях) */
html:not([data-theme="light"]) .modal:not(.lg-sheet),
[data-theme="dark"] .modal:not(.lg-sheet) {
background: rgba(8, 14, 30, 0.78) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-top: 1px solid rgba(0, 200, 255, 0.14) !important;
border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow: var(--lg-shadow), var(--lg-inset) !important;
}
[data-theme="dark"] .modal .glass-panel:not(.cart-item),
html:not([data-theme="light"]) .modal .glass-panel:not(.cart-item),
html:not([data-theme="light"]) .support-btn.glass-panel,
[data-theme="dark"] .support-btn.glass-panel,
html:not([data-theme="light"]) #togglePurchases-btn,
[data-theme="dark"] #togglePurchases-btn,
html:not([data-theme="light"]) #purch-data-block,
[data-theme="dark"] #purch-data-block,
html:not([data-theme="light"]) .close-btn,
[data-theme="dark"] .close-btn,
html:not([data-theme="light"]) #pm-qty-controls,
[data-theme="dark"] #pm-qty-controls,
html:not([data-theme="light"]) .modal .pill-btn,
[data-theme="dark"] .modal .pill-btn {
position: relative;
overflow: hidden;
background: var(--glass-bg-panel) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(255, 255, 255, 0.09) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
[data-theme="dark"] .modal:not(.lg-sheet)::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: var(--lg-specular);
opacity: 0.42;
}
[data-theme="dark"] .modal .glass-panel:not(.cart-item)::before,
[data-theme="dark"] .support-btn.glass-panel::before,
[data-theme="dark"] #togglePurchases-btn::before,
[data-theme="dark"] #purch-data-block::before,
[data-theme="dark"] .close-btn::before,
[data-theme="dark"] #pm-qty-controls::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: linear-gradient(128deg, rgba(0, 200, 255, 0.08) 0%, transparent 42%);
opacity: 0.5;
}
[data-theme="dark"] .modal:not(.lg-sheet)::after,
[data-theme="dark"] .modal .glass-panel:not(.cart-item)::after,
[data-theme="dark"] .support-btn.glass-panel::after,
[data-theme="dark"] #togglePurchases-btn::after,
[data-theme="dark"] #purch-data-block::after,
[data-theme="dark"] .close-btn::after,
[data-theme="dark"] #pm-qty-controls::after {
display: none;
}
[data-theme="dark"] .modal > *,
[data-theme="dark"] .modal .glass-panel:not(.cart-item) > *,
[data-theme="dark"] #pm-qty-controls > * { position: relative; z-index: 1; }
[data-theme="dark"] #product-modal {
z-index: 2001;
}
[data-theme="dark"] #purchase-modal:not(.lg-sheet) {
background: rgba(8, 14, 32, 0.84) !important;
}
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] #modal-overlay {
background-color: rgba(0, 0, 0, 0.34);
}
/* Liquid glass — светлая тема */
[data-theme="light"] .modal:not(.lg-sheet) {
background: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur-sheet) !important;
-webkit-backdrop-filter: var(--glass-blur-sheet) !important;
border-top: 1px solid var(--glass-border) !important;
border-left: 1px solid rgba(255, 255, 255, 0.62) !important;
border-right: 1px solid rgba(255, 255, 255, 0.62) !important;
box-shadow: var(--lg-shadow), var(--lg-inset) !important;
color: var(--text);
}
[data-theme="light"] .modal .glass-panel:not(.cart-item),
[data-theme="light"] .support-btn.glass-panel,
[data-theme="light"] #togglePurchases-btn,
[data-theme="light"] #purch-data-block,
[data-theme="light"] .close-btn,
[data-theme="light"] .modal .pill-btn {
position: relative;
overflow: hidden;
background: var(--glass-bg-panel) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
box-shadow: 0 2px 14px rgba(31, 38, 135, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(31, 38, 135, 0.04) !important;
}
[data-theme="light"] .modal::before,
[data-theme="light"] .modal .glass-panel:not(.cart-item)::before,
[data-theme="light"] .support-btn.glass-panel::before,
[data-theme="light"] #togglePurchases-btn::before,
[data-theme="light"] #purch-data-block::before,
[data-theme="light"] .close-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: var(--lg-specular);
opacity: 0.62;
}
[data-theme="light"] .modal::after,
[data-theme="light"] .modal .glass-panel:not(.cart-item)::after,
[data-theme="light"] .support-btn.glass-panel::after,
[data-theme="light"] #togglePurchases-btn::after,
[data-theme="light"] #purch-data-block::after,
[data-theme="light"] .close-btn::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: rgba(255, 255, 255, 0.06);
box-shadow: var(--lg-edge);
opacity: 0.7;
}
[data-theme="light"] .modal > *,
[data-theme="light"] .modal .glass-panel:not(.cart-item) > * { position: relative; z-index: 1; }
[data-theme="light"] #product-modal {
--glass-bg: rgba(255, 255, 255, 0.28);
--glass-bg-panel: rgba(255, 255, 255, 0.56);
--glass-blur-sheet: blur(14px) saturate(170%);
box-shadow: var(--lg-shadow), var(--lg-inset), 0 -1px 0 rgba(255, 255, 255, 0.8) inset !important;
z-index: 2001;
}
[data-theme="light"] #purchase-modal {
--glass-bg: rgba(255, 255, 255, 0.26);
--glass-bg-panel: rgba(255, 255, 255, 0.56);
--glass-blur-sheet: blur(14px) saturate(170%);
box-shadow: var(--lg-shadow), var(--lg-inset), 0 -1px 0 rgba(255, 255, 255, 0.8) inset !important;
z-index: 2002;
}
#cart-modal {
z-index: 2003;
}
/* Корзина: крупный арт, всегда по центру блока товаров.
overflow:hidden в базовом .modal.lg-sheet (нужен для скругления
углов/декора) полностью перебивает overflow-y:auto из базового
.modal (2 класса в селекторе всегда сильнее 1-го, порядок в файле
тут не важен) — из-за этого список товаров не скроллился вообще:
модалка просто обрезала всё, что не влезло по высоте (max-height:
92vh у неё всё равно есть, он не терялся). Чиним не снятием
overflow:hidden (он нужен для скруглений/арта), а тем, что делаем
окно flex-колонкой и отдаём скролл конкретно .cart-stage —
шапка и низ (кнопка оформления, доверие, secure-note) остаются
на местах, зафиксированы. */
#cart-modal.lg-sheet {
isolation: isolate;
--cart-art-bottom: 50%;
padding-top: 10px;
display: flex;
flex-direction: column;
}
#cart-modal > .modal-drag-pill {
margin-top: 4px;
margin-bottom: 14px;
flex-shrink: 0;
}
#cart-modal > .modal-header,
#cart-modal > .checkout-btn,
#cart-modal > .cart-trust,
#cart-modal > .cart-secure {
flex-shrink: 0;
}
#cart-modal > .cart-art-bg {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: visible;
border-radius: inherit;
}
#cart-modal > .cart-art-bg .cart-art-img {
position: absolute;
left: 50%;
bottom: var(--cart-art-bottom);
top: auto;
/* contain — без обрезки; ещё крупнее */
width: min(220%, 920px);
height: auto;
max-height: 780px;
max-width: 920px;
object-fit: contain;
object-position: center center;
transform: translate(-50%, 50%);
opacity: 0.96;
filter:
brightness(1.05) saturate(1.12) contrast(1.0) blur(1.5px)
drop-shadow(0 14px 28px rgba(0, 0, 0, 0.52))
drop-shadow(0 0 30px rgba(30, 90, 190, 0.3));
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
#cart-modal > .cart-art-bg::after {
display: none;
}
#cart-modal.lg-sheet::before,
#cart-modal.lg-sheet::after {
z-index: 0 !important;
}
#cart-modal > .modal-drag-pill,
#cart-modal > .modal-header,
#cart-modal > .cart-stage,
#cart-modal > .checkout-btn,
#cart-modal > .cart-trust,
#cart-modal > .cart-secure {
position: relative;
z-index: 3;
}
#cart-modal .cart-stage {
position: relative;
z-index: 3;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
/* padding+отрицательный margin взаимно гасят видимый сдвиг
контента (нулевая сумма), но расширяют собственный бокс
.cart-stage на 16px в каждую сторону — иначе overflow-x:hidden
(нужен, чтобы список не «гулял» горизонтально) обрезал справа
свечение/контур распроданной строки (было заметно при зуме
страницы). 16px меньше горизонтального паддинга самой
модалки (20px), так что расширение остаётся внутри её же
рамки со скруглением и наружу не вылезает. */
padding-left: 16px;
padding-right: 16px;
margin-left: -16px;
margin-right: -16px;
}
/* Тот же приём, что и padding+margin выше, но по вертикали: у первой
и последней строки списка раньше не было зазора сверху/снизу
вообще (.cart-item margin-bottom:10px — только между строками),
так что светящееся кольцо распроданной строки, если она первая
(например единственный товар в корзине), упиралось прямо в верхний
край overflow-y:auto/-x:hidden .cart-stage и обрезалось. Здесь
буфер — обычный отступ у списка (не padding+отрицательный margin
контейнера), т.к. .cart-stage сам не скроллится «мимо» этого
отступа — он просто часть прокручиваемого контента. */
#cart-items-list {
padding-top: 14px;
padding-bottom: 14px;
}
#cart-modal .checkout-btn {
background: linear-gradient(95deg, #6d28d9 0%, #2563eb 48%, #0891b2 100%) !important;
border: 1px solid rgba(125, 211, 252, 0.55) !important;
color: #f0fbff !important;
text-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
box-shadow:
0 10px 28px -4px rgba(0, 119, 255, 0.55),
0 0 22px rgba(56, 120, 255, 0.42),
0 0 40px rgba(109, 40, 217, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 999px !important;
/* Было 15px вертикально (потом 12px — всё ещё казалось длинной
относительно "Промокод"/"Итого" над ней). Сейчас 10px + чуть
меньше шрифт — по высоте примерно как строка "Промокод". */
padding: 10px 16px !important;
font-size: 14px !important;
letter-spacing: 0.2px;
/* Раньше на всю ширину модалки (100%) — визуально слишком
длинная полоса относительно остального контента корзины.
Чуть уже и по центру. */
width: 88% !important;
margin: 0 auto !important;
display: block !important;
}
#cart-modal .checkout-btn:hover {
filter: brightness(1.06);
box-shadow:
0 12px 34px -4px rgba(0, 140, 255, 0.62),
0 0 30px rgba(56, 189, 248, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
#cart-modal .checkout-btn:active {
transform: scale(0.985);
filter: brightness(0.98);
}
/* Кнопка "Подтвердить и оплатить →" в #checkout-modal — отдельный
элемент от кнопки корзины (#cart-modal .checkout-btn), раньше
уменьшение padding/font-size применили только к кнопке корзины,
эта же оставалась на базовых .checkout-btn (padding:16px,
font-size:15px) — визуально длинной/крупной. Тот же размер, что и
у кнопки корзины, для единообразия. */
#checkout-modal .checkout-btn {
padding: 10px 16px !important;
font-size: 14px !important;
letter-spacing: 0.2px;
width: 88% !important;
margin: 0 auto !important;
display: block !important;
}
#cart-modal .cart-trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 14px;
padding: 0 2px;
}
#cart-modal .cart-trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
color: rgba(170, 210, 255, 0.82);
font-size: 9.5px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.1px;
}
#cart-modal .cart-trust-item svg {
width: 22px;
height: 22px;
stroke: rgba(110, 200, 255, 0.98);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 7px rgba(0, 170, 255, 0.45));
}
#cart-modal .cart-secure {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 12px 0 2px;
padding: 0 8px;
color: rgba(150, 175, 210, 0.62);
font-size: 10.5px;
line-height: 1.35;
text-align: center;
}
#cart-modal .cart-secure svg {
flex-shrink: 0;
width: 12px;
height: 12px;
stroke: rgba(150, 175, 210, 0.7);
fill: none;
stroke-width: 1.7;
}
#cart-modal .cart-item.glass-panel {
background: rgba(8, 16, 36, 0.58) !important;
border: 1px solid rgba(120, 180, 255, 0.14) !important;
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
backdrop-filter: blur(10px) saturate(130%) !important;
-webkit-backdrop-filter: blur(10px) saturate(130%) !important;
border-radius: 14px !important;
padding: 12px 12px !important;
}
#cart-modal .cart-item-info {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: nowrap !important;
flex: 1;
min-width: 0;
}
#cart-modal .cart-item-text {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
#cart-modal .cart-item-ico {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 11px;
display: grid;
place-items: center;
background: linear-gradient(145deg, rgba(140, 80, 255, 0.42), rgba(0, 170, 255, 0.28));
border: 1px solid rgba(160, 190, 255, 0.28);
box-shadow:
inset 0 0 12px rgba(120, 100, 255, 0.22),
0 0 12px rgba(80, 140, 255, 0.2);
}
#cart-modal .cart-item-ico svg {
width: 20px;
height: 20px;
filter: drop-shadow(0 0 6px rgba(180, 120, 255, 0.55));
}
#cart-modal .cart-item-info h4 {
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 !important;
}
#cart-modal .cart-item-info p {
font-size: 13px !important;
color: #ffd76a !important;
text-shadow: 0 0 10px rgba(255, 200, 80, 0.35);
margin: 0 !important;
}
#cart-modal .cart-controls {
background: rgba(6, 12, 28, 0.55);
border: 1px solid rgba(120, 170, 255, 0.16);
border-radius: 999px;
padding: 4px 6px;
gap: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#cart-modal .cart-controls .qty-btn {
width: 30px;
height: 30px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.04);
}
#cart-modal .cart-total-row {
background: rgba(8, 16, 36, 0.58) !important;
border: 1px solid rgba(120, 180, 255, 0.12) !important;
backdrop-filter: blur(10px) saturate(130%) !important;
-webkit-backdrop-filter: blur(10px) saturate(130%) !important;
padding: 12px 14px !important;
margin-bottom: 12px !important;
border-radius: 12px !important;
isolation: isolate;
overflow: hidden;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
#cart-modal .cart-total-row > * {
position: relative;
z-index: 1;
}
#cart-modal #cart-total-val {
text-shadow: 0 0 12px rgba(255, 200, 80, 0.35);
}
[data-theme="light"] #cart-modal > .cart-art-bg {
opacity: 0.45;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
#cart-modal.lg-sheet {
--cart-art-bottom: 48%;
}
#cart-modal > .cart-art-bg .cart-art-img {
opacity: 0.95;
width: min(235%, 860px);
max-width: 860px;
max-height: 720px;
height: auto;
object-fit: contain;
object-position: center center;
transform: translate(-50%, 50%);
filter:
brightness(1.04) saturate(1.1) contrast(1.0) blur(1.5px)
drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 26px rgba(25, 80, 190, 0.28));
}
#cart-modal .cart-trust-item {
font-size: 9px;
}
}
/* Liquid glass — все основные окна (.lg-sheet).
--lg-blur-amt по всему файлу везде равен 0px (грепом проверено —
другого значения нет нигде, ни в CSS, ни в JS) — то есть реального
визуального блюра тут уже давно нет, он был отключен раньше, а
само свойство backdrop-filter осталось. А backdrop-filter — даже
с blur(0px) — не бесплатен: браузер всё равно заводит под него
отдельный compositing-проход (нужно читать то, что "под" окном),
и держит это на КАЖДОМ .lg-sheet окне ВСЕГДА, даже пока оно закрыто
и просто уехало за экран через transform, а не is display:none.
Именно это и давало тормоза на открытии кабинета (там ещё и transform
слайд идёт одновременно) — даже на мощных ПК, потому что это не
CPU-стоимость, а лишний GPU-проход. Раз реального блюра всё равно
нет — убираем backdrop-filter целиком, визуально ничего не меняется. */
.modal.lg-sheet {
--lg-bg: rgba(8, 14, 30, 0.72);
background: var(--lg-bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none;
border-top: 1px solid rgba(160, 230, 255, 0.28) !important;
border-left: 1px solid rgba(255, 255, 255, 0.11) !important;
border-right: 1px solid rgba(255, 255, 255, 0.11) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 0 0 1px rgba(0, 200, 255, 0.09),
0 0 48px rgba(0, 140, 255, 0.07) !important;
transition: transform var(--modal-anim-ms, 380ms) cubic-bezier(0.22, 0.82, 0.2, 1);
overflow: hidden;
/* GPU-слой заранее — open только двигает transform */
-webkit-transform: translate3d(0, 105vh, 0);
transform: translate3d(0, 105vh, 0);
will-change: transform;
contain: layout style;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Невидимый прогрев: layout + compositor без показа пользователю */
.modal.lg-sheet.modal-prewarm {
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
transition: none !important;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
z-index: 1 !important;
}
#modal-overlay.overlay-prewarm {
opacity: 0.001 !important;
pointer-events: none !important;
transition: none !important;
will-change: opacity;
}
body.modal-prewarming {
pointer-events: none;
}
html:not([data-theme="light"]) .modal.lg-sheet.active,
[data-theme="dark"] .modal.lg-sheet.active {
--lg-blur-amt: 0px;
--lg-bg: linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%);
background: var(--lg-bg) !important;
}
[data-theme="light"] .modal.lg-sheet {
--lg-bg: rgba(255, 255, 255, 0.26);
border-top: 1px solid rgba(255, 255, 255, 0.88) !important;
border-left: 1px solid rgba(255, 255, 255, 0.68) !important;
border-right: 1px solid rgba(255, 255, 255, 0.68) !important;
}
[data-theme="light"] .modal.lg-sheet.active {
--lg-blur-amt: 0px;
--lg-bg: linear-gradient(168deg, #ffffff 0%, #f4faff 100%);
background: var(--lg-bg) !important;
}
[data-theme="light"] .modal.lg-sheet.active.glass-ready {
--lg-blur-amt: 0px;
--lg-bg: linear-gradient(168deg, #ffffff 0%, #f4faff 100%);
background: var(--lg-bg) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
0 0 40px rgba(100, 160, 220, 0.08) !important;
}
html:not([data-theme="light"]) .modal.lg-sheet.active.glass-ready,
[data-theme="dark"] .modal.lg-sheet.active.glass-ready {
--lg-blur-amt: 0px;
--lg-bg: linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%);
background: var(--lg-bg) !important;
border-top-color: rgba(190, 240, 255, 0.38) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 0 0 1px rgba(0, 210, 255, 0.12),
0 0 56px rgba(0, 160, 255, 0.10) !important;
}
.modal.lg-sheet.modal-under {
pointer-events: none;
}
/* Стек: blur на окнах, оверлей только затемняет (тот же уровень — без второго dim) */
body.modal-stack #modal-overlay.active {
background: rgba(0, 0, 0, 0.34) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Стек: нижнее окно — тот же фон; blur плавно через JS (без :not(.modal-animating)) */
html:not([data-theme="light"]) body.modal-stack .modal.lg-sheet.modal-under.active,
[data-theme="dark"] body.modal-stack .modal.lg-sheet.modal-under.active,
html:not([data-theme="light"]) body.modal-stack .modal.lg-sheet.modal-under.active.glass-ready,
[data-theme="dark"] body.modal-stack .modal.lg-sheet.modal-under.active.glass-ready,
html:not([data-theme="light"]) body.modal-stack #product-modal.lg-sheet.modal-under.active,
[data-theme="dark"] body.modal-stack #product-modal.lg-sheet.modal-under.active,
html:not([data-theme="light"]) body.modal-stack #profile-modal.lg-sheet.modal-under.active,
[data-theme="dark"] body.modal-stack #profile-modal.lg-sheet.modal-under.active,
html:not([data-theme="light"]) body.modal-stack #purchase-modal.lg-sheet.modal-under.active,
[data-theme="dark"] body.modal-stack #purchase-modal.lg-sheet.modal-under.active,
html:not([data-theme="light"]) body.modal-stack #cart-modal.lg-sheet.modal-under.active,
[data-theme="dark"] body.modal-stack #cart-modal.lg-sheet.modal-under.active {
--lg-blur-amt: 0px !important;
--lg-bg: linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%) !important;
background: linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-top-color: rgba(190, 240, 255, 0.38) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 0 0 1px rgba(0, 210, 255, 0.12),
0 0 48px rgba(0, 160, 255, 0.08) !important;
transition: opacity 0.3s ease, filter 0.32s ease !important;
pointer-events: none;
}
[data-theme="light"] body.modal-stack .modal.lg-sheet.modal-under.active,
[data-theme="light"] body.modal-stack .modal.lg-sheet.modal-under.active.glass-ready,
[data-theme="light"] body.modal-stack #product-modal.lg-sheet.modal-under.active,
[data-theme="light"] body.modal-stack #profile-modal.lg-sheet.modal-under.active,
[data-theme="light"] body.modal-stack #purchase-modal.lg-sheet.modal-under.active,
[data-theme="light"] body.modal-stack #cart-modal.lg-sheet.modal-under.active {
--lg-blur-amt: 0px !important;
background: linear-gradient(168deg, #ffffff 0%, #f4faff 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: opacity 0.3s ease, filter 0.32s ease !important;
pointer-events: none;
}
/* Верхнее / единственное окно — никогда не filter:blur (баг «весь ЛК в каше») */
body.modal-stack .modal.lg-sheet.modal-top.active,
body.modal-stack .modal.lg-sheet.modal-top.active.glass-ready,
.modal.lg-sheet.active:not(.modal-under):not(.modal-closing) {
filter: none !important;
}
/* Быстрое снятие blur при закрытии верхнего окна */
.modal.lg-sheet.modal-unstacking {
transition: opacity 0.28s ease, filter 0.28s ease !important;
}
html:not([data-theme="light"]) body.modal-stack .modal.lg-sheet.modal-top.active.glass-ready,
[data-theme="dark"] body.modal-stack .modal.lg-sheet.modal-top.active.glass-ready,
html:not([data-theme="light"]) body.modal-stack #cart-modal.modal-top.active.glass-ready,
[data-theme="dark"] body.modal-stack #cart-modal.modal-top.active.glass-ready {
--lg-blur-amt: 0px !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
[data-theme="light"] body.modal-stack .modal.lg-sheet.modal-top.active.glass-ready,
[data-theme="light"] body.modal-stack #cart-modal.modal-top.active.glass-ready {
--lg-blur-amt: 0px !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html:not([data-theme="light"]) .modal.lg-sheet::before,
[data-theme="dark"] .modal.lg-sheet::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0, 220, 255, 0.22), transparent 62%),
linear-gradient(128deg, rgba(255, 255, 255, 0.16) 0%, rgba(0, 210, 255, 0.10) 18%, rgba(100, 140, 255, 0.05) 36%, transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 22%);
opacity: 0;
}
[data-theme="light"] .modal.lg-sheet::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 85% 50% at 50% -6%, rgba(255, 255, 255, 0.55), transparent 60%),
linear-gradient(128deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.22) 28%, transparent 54%);
opacity: 0;
}
.modal.lg-sheet.active.glass-ready::before {
opacity: 0.88;
}
[data-theme="light"] .modal.lg-sheet.active.glass-ready::before {
opacity: 0.42;
}
html:not([data-theme="light"]) .modal.lg-sheet::after,
[data-theme="dark"] .modal.lg-sheet::after {
display: block !important;
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(0, 210, 255, 0.08),
inset 0 -14px 28px rgba(0, 180, 255, 0.07);
opacity: 0;
}
[data-theme="light"] .modal.lg-sheet::after {
display: block !important;
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 0 0 1px rgba(255, 255, 255, 0.45),
inset 0 -8px 18px rgba(31, 38, 135, 0.06);
opacity: 0;
}
.modal.lg-sheet.active.glass-ready::after {
opacity: 1;
}
.modal.lg-sheet .modal-drag-pill {
background: rgba(255, 255, 255, 0.22);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
[data-theme="light"] .modal.lg-sheet .modal-drag-pill {
background: rgba(255, 255, 255, 0.58);
border-color: rgba(255, 255, 255, 0.78);
}
.modal.lg-sheet > * {
position: relative;
z-index: 1;
}
html:not([data-theme="light"]) #cart-modal .cart-item.glass-panel,
[data-theme="dark"] #cart-modal .cart-item.glass-panel,
html:not([data-theme="light"]) #cart-modal .cart-total-row,
[data-theme="dark"] #cart-modal .cart-total-row {
background: rgba(8, 16, 36, 0.58) !important;
backdrop-filter: blur(10px) saturate(130%) !important;
-webkit-backdrop-filter: blur(10px) saturate(130%) !important;
border: 1px solid rgba(120, 180, 255, 0.15) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
[data-theme="light"] #cart-modal .cart-item.glass-panel,
[data-theme="light"] #cart-modal .cart-total-row {
background: rgba(255, 255, 255, 0.84) !important;
}
html:not([data-theme="light"]) .modal.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
[data-theme="dark"] .modal.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
html:not([data-theme="light"]) .modal.lg-sheet.active.glass-ready .sub-item,
[data-theme="dark"] .modal.lg-sheet.active.glass-ready .sub-item {
background: rgba(8, 14, 28, 0.92) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
[data-theme="light"] .modal.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
[data-theme="light"] .modal.lg-sheet.active.glass-ready .sub-item {
background: rgba(255, 255, 255, 0.58) !important;
}
/* Xbox purchase detail — same glass overlay pattern as Windows */
html:not([data-theme="light"]) #purchase-modal.lg-sheet.active.skin-xbox:not(.modal-under),
[data-theme="dark"] #purchase-modal.lg-sheet.active.skin-xbox:not(.modal-under),
html:not([data-theme="light"]) #purchase-modal.lg-sheet.active.glass-ready.skin-xbox:not(.modal-under),
[data-theme="dark"] #purchase-modal.lg-sheet.active.glass-ready.skin-xbox:not(.modal-under),
html:not([data-theme="light"]) body.modal-stack #purchase-modal.lg-sheet.modal-top.active.skin-xbox,
[data-theme="dark"] body.modal-stack #purchase-modal.lg-sheet.modal-top.active.skin-xbox {
--lg-bg: transparent !important;
background-color: #050a08 !important;
background-image: url("/static/purchases/bg-xbox-scene.jpg?v=195") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border-top-color: rgba(90, 220, 120, 0.28) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(160, 255, 180, 0.10) !important;
}
html:not([data-theme="light"]) #purchase-modal.skin-xbox.lg-sheet.active .glass-panel:not(.cart-item),
[data-theme="dark"] #purchase-modal.skin-xbox.lg-sheet.active .glass-panel:not(.cart-item),
html:not([data-theme="light"]) #purchase-modal.skin-xbox.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
[data-theme="dark"] #purchase-modal.skin-xbox.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
html:not([data-theme="light"]) #purchase-modal.skin-xbox #purch-data-block,
[data-theme="dark"] #purchase-modal.skin-xbox #purch-data-block {
background: rgba(6, 16, 12, 0.52) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#purchase-modal.skin-xbox .close-btn {
background: rgba(8, 18, 12, 0.45) !important;
}
/* Windows purchase detail — centered Bloom like reference */
html:not([data-theme="light"]) #purchase-modal.lg-sheet.active.skin-windows:not(.modal-under),
[data-theme="dark"] #purchase-modal.lg-sheet.active.skin-windows:not(.modal-under),
html:not([data-theme="light"]) #purchase-modal.lg-sheet.active.glass-ready.skin-windows:not(.modal-under),
[data-theme="dark"] #purchase-modal.lg-sheet.active.glass-ready.skin-windows:not(.modal-under),
html:not([data-theme="light"]) body.modal-stack #purchase-modal.lg-sheet.modal-top.active.skin-windows,
[data-theme="dark"] body.modal-stack #purchase-modal.lg-sheet.modal-top.active.skin-windows {
--lg-bg: transparent !important;
background-color: #00050a !important;
background-image: url("/static/purchases/bg-windows-bloom.jpg?v=181") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border-top-color: rgba(120, 180, 255, 0.28) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(160, 210, 255, 0.12) !important;
}
html:not([data-theme="light"]) #purchase-modal.skin-windows.lg-sheet.active .glass-panel:not(.cart-item),
[data-theme="dark"] #purchase-modal.skin-windows.lg-sheet.active .glass-panel:not(.cart-item),
html:not([data-theme="light"]) #purchase-modal.skin-windows.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
[data-theme="dark"] #purchase-modal.skin-windows.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
html:not([data-theme="light"]) #purchase-modal.skin-windows #purch-data-block,
[data-theme="dark"] #purchase-modal.skin-windows #purch-data-block {
background: rgba(6, 12, 24, 0.52) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#purchase-modal.skin-windows .close-btn {
background: rgba(8, 14, 28, 0.45) !important;
}
/* PS+ purchase detail — реальное фото лежит на сервере:
/static/purchases/bg-ps-detail.jpg, схема как у Xbox/Windows выше */
html:not([data-theme="light"]) #purchase-modal.lg-sheet.active.skin-ps:not(.modal-under),
[data-theme="dark"] #purchase-modal.lg-sheet.active.skin-ps:not(.modal-under),
html:not([data-theme="light"]) #purchase-modal.lg-sheet.active.glass-ready.skin-ps:not(.modal-under),
[data-theme="dark"] #purchase-modal.lg-sheet.active.glass-ready.skin-ps:not(.modal-under),
html:not([data-theme="light"]) body.modal-stack #purchase-modal.lg-sheet.modal-top.active.skin-ps,
[data-theme="dark"] body.modal-stack #purchase-modal.lg-sheet.modal-top.active.skin-ps {
--lg-bg: transparent !important;
background-color: #070b1e !important;
background-image: url("/static/purchases/bg-ps-detail.jpg?v=1") !important;
background-size: cover !important;
background-position: 62% 38% !important;
background-repeat: no-repeat !important;
border-top-color: rgba(120, 180, 255, 0.28) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(160, 190, 255, 0.10) !important;
}
html:not([data-theme="light"]) #purchase-modal.skin-ps.lg-sheet.active .glass-panel:not(.cart-item),
[data-theme="dark"] #purchase-modal.skin-ps.lg-sheet.active .glass-panel:not(.cart-item),
html:not([data-theme="light"]) #purchase-modal.skin-ps.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
[data-theme="dark"] #purchase-modal.skin-ps.lg-sheet.active.glass-ready .glass-panel:not(.cart-item),
html:not([data-theme="light"]) #purchase-modal.skin-ps #purch-data-block,
[data-theme="dark"] #purchase-modal.skin-ps #purch-data-block {
background: rgba(8, 14, 28, 0.55) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#purchase-modal.skin-ps .close-btn {
background: rgba(8, 14, 28, 0.45) !important;
}
#purchase-modal {
z-index: 2002;
}
body:has(.modal.active) #cart-overlay {
z-index: 2100;
}
/* Мобильная оптимизация */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
.modal {
max-height: min(76dvh, calc(100svh - 68px), calc(var(--tg-vh, 100svh) - 68px));
padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
border-radius: 18px 18px 0 0;
}
.modal-drag-pill {
margin: 6px auto 14px;
}
.modal-header {
margin-bottom: 14px;
}
.modal-header h2 {
font-size: 17px;
}
.pm-header-img {
height: 96px;
margin-bottom: 12px;
}
#product-modal.modal--holo {
border-radius: 18px 18px 0 0 !important;
}
#product-modal.modal--holo .pm-header-img {
height: auto !important;
aspect-ratio: 620 / 305 !important;
margin-bottom: 12px;
overflow: hidden !important;
}
#pm-title {
font-size: 18px;
}
.pm-desc {
margin-bottom: 14px;
padding: 10px;
}
.variant-section {
margin-bottom: 14px;
}
/* Мобильные модалки: длительность = JS --modal-anim-ms (не 0.38s) */
.modal:not(.modal-closing) {
transition: transform var(--modal-anim-ms, 280ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
#modal-overlay {
background: rgba(0, 0, 0, 0.32) !important;
}
#modal-overlay.active {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(0, 0, 0, 0.32) !important;
pointer-events: all !important;
}
#modal-overlay.active:not(.overlay-rising):not(.overlay-fading) {
opacity: 1 !important;
}
#modal-overlay.active.overlay-rising {
transition: opacity var(--modal-anim-ms, 280ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
body.modal-animating #modal-overlay.active {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(0, 0, 0, 0.32) !important;
}
body.modal-stack #modal-overlay.active {
background: rgba(0, 0, 0, 0.42) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.modal-animating.modal-stack #modal-overlay.active {
background: rgba(0, 0, 0, 0.42) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Телефон: slide БЕЗ live blur (transform+backdrop = главный лаг). Blur после slide. */
body.modal-animating:not(.modal-stack) .modal.lg-sheet.active:not(.modal-closing),
body.modal-animating:not(.modal-stack) .modal.lg-sheet.modal-closing,
body.modal-swiping .modal.lg-sheet.active {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
--lg-blur-amt: 0px !important;
}
body.modal-animating:not(.modal-stack) .modal.lg-sheet.active:not(.modal-closing) {
transition: transform var(--modal-anim-ms, 280ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
body.modal-animating:not(.modal-stack) .modal.lg-sheet.modal-closing {
transition: transform var(--modal-close-ms, 420ms) cubic-bezier(0.32, 0.0, 0.15, 1) !important;
}
html:not([data-theme="light"]) body.modal-animating:not(.modal-stack) .modal.lg-sheet.active:not(.modal--holo),
[data-theme="dark"] body.modal-animating:not(.modal-stack) .modal.lg-sheet.active:not(.modal--holo),
html:not([data-theme="light"]) body.modal-animating:not(.modal-stack) .modal.lg-sheet.modal-closing:not(.modal--holo),
[data-theme="dark"] body.modal-animating:not(.modal-stack) .modal.lg-sheet.modal-closing:not(.modal--holo) {
background: linear-gradient(
168deg,
rgba(14, 26, 52, 0.94) 0%,
rgba(10, 18, 38, 0.96) 42%,
rgba(8, 14, 30, 0.97) 100%
) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 0 0 1px rgba(0, 210, 255, 0.12) !important;
}
[data-theme="light"] body.modal-animating:not(.modal-stack) .modal.lg-sheet.active:not(.modal--holo),
[data-theme="light"] body.modal-animating:not(.modal-stack) .modal.lg-sheet.modal-closing:not(.modal--holo) {
background: rgba(255, 255, 255, 0.92) !important;
}
/* Xbox holo: не затираем радужную рамку во время slide */
body.modal-animating:not(.modal-stack) #product-modal.modal--holo.active,
body.modal-animating:not(.modal-stack) #product-modal.modal--holo.modal-closing {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
--lg-blur-amt: 0px !important;
}
/* Стек: under — blur через JS, filter в CSS не блокируем */
body.modal-stack .modal.lg-sheet.modal-under.active,
body.modal-stack .modal.lg-sheet.modal-under.active.glass-ready,
body.modal-animating.modal-stack .modal.lg-sheet.modal-under.active,
body.modal-animating.modal-stack .modal.lg-sheet.modal-under.active.glass-ready,
body.modal-stack #product-modal.lg-sheet.modal-under.active,
body.modal-stack #profile-modal.lg-sheet.modal-under.active,
body.modal-stack #purchase-modal.lg-sheet.modal-under.active,
body.modal-stack #cart-modal.lg-sheet.modal-under.active {
--lg-blur-amt: 0px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
transition: opacity 0.2s ease !important;
}
/* Фон-canvas: не прячем — иначе «умирает» весь фон.
JS и так троттлит через __bgPerf.shouldFreezeFx */
body.modal-animating #star-canvas,
body.modal-animating #hero-star-canvas,
body.modal-animating #fireCanvas,
body.modal-swiping #star-canvas,
body.modal-swiping #hero-star-canvas,
body.modal-swiping #fireCanvas {
pointer-events: none !important;
}
/* Во время slide — без тяжёлых псевдо-градиентов на листе */
body.modal-animating .modal.lg-sheet.active::before,
body.modal-animating .modal.lg-sheet.active::after,
body.modal-swiping .modal.lg-sheet.active::before,
body.modal-swiping .modal.lg-sheet.active::after {
opacity: 0 !important;
}
/* Оверлей в стеке НЕ усиливать — иначе второе затемнение с задержкой */
body.modal-stack #modal-overlay.active,
body.modal-animating.modal-stack #modal-overlay.active {
background: rgba(0, 0, 0, 0.42) !important;
}
body.modal-animating.modal-stack .modal.lg-sheet.modal-top.modal-entering.active,
body.modal-animating.modal-stack #cart-modal.modal-top.modal-entering.active {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
--lg-blur-amt: 0px !important;
}
/* ТЕЛЕФОН: blur НИКОГДА не включаем после slide.
Раньше blur(10px) включался когда снимался modal-animating —
из‑за этого «блюр не успевает» на open и «пропадает рано» на close. */
html:not([data-theme="light"]) body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
[data-theme="light"] body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-stack:not(.modal-animating) .modal.lg-sheet.modal-top.active.glass-ready,
[data-theme="dark"] body.modal-stack:not(.modal-animating) .modal.lg-sheet.modal-top.active.glass-ready,
html:not([data-theme="light"]) body.modal-stack:not(.modal-animating) #cart-modal.modal-top.active.glass-ready,
[data-theme="dark"] body.modal-stack:not(.modal-animating) #cart-modal.modal-top.active.glass-ready,
[data-theme="light"] body.modal-stack:not(.modal-animating) .modal.lg-sheet.modal-top.active.glass-ready,
[data-theme="light"] body.modal-stack:not(.modal-animating) #cart-modal.modal-top.active.glass-ready {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
--lg-blur-amt: 0px !important;
}
html:not([data-theme="light"]) body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo) {
background: rgba(10, 16, 34, 0.97) !important;
}
[data-theme="light"] body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo) {
background: rgba(255, 255, 255, 0.97) !important;
}
html:not([data-theme="light"]) .modal:not(.lg-sheet),
[data-theme="dark"] .modal:not(.lg-sheet) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(10, 16, 34, 0.82) !important;
}
[data-theme="light"] .modal:not(.lg-sheet) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] .item-card {
background: rgba(255, 255, 255, 0.52) !important;
}
[data-theme="light"] .modal .glass-panel:not(.cart-item),
[data-theme="light"] .support-btn.glass-panel,
[data-theme="light"] #togglePurchases-btn,
[data-theme="light"] #purch-data-block,
[data-theme="light"] .close-btn {
background: rgba(255, 255, 255, 0.58) !important;
}
[data-theme="light"] .modal::after,
[data-theme="light"] .modal .glass-panel:not(.cart-item)::after {
opacity: 0.45;
}
}
body.modal-animating #modal-overlay.active {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.modal-open .modal.active,
body.modal-animating .modal {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* ПК/slide: только transform — compositor, без mid-slide layout */
body.modal-animating .modal.lg-sheet:not(.modal-closing):not(.modal-under) {
will-change: transform;
overflow: hidden !important;
transition: transform 0.38s cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
/* WAAPI leftover — не мешаем CSS transform */
.modal.lg-sheet.modal-waapi,
body.modal-animating .modal.lg-sheet.modal-waapi,
body.modal-animating .modal.lg-sheet.modal-waapi.modal-entering.active,
body.modal-animating .modal.lg-sheet.modal-waapi.modal-top.modal-entering.active {
transition: none !important;
}
body.modal-animating .modal.lg-sheet.modal-top.modal-entering.active,
body.modal-animating .modal.lg-sheet.modal-entering.active {
will-change: transform;
overflow: hidden !important;
pointer-events: none;
/* Изоляция paint — меньше работы на слабых GPU во время slide */
contain: layout style paint;
-webkit-transform: translateZ(0);
}
/* holo: не режем overflow на slide — иначе ghost у заголовка */
body.modal-animating #product-modal.modal--holo.active,
body.modal-animating #product-modal.modal--holo.modal-entering.active {
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* background-clip:text + transform = артефакт «двойной» строки на открытии */
body.modal-animating #product-modal.modal--holo #pm-title,
#product-modal.modal--holo.modal-waapi #pm-title,
#product-modal.modal--holo.modal-entering #pm-title {
animation: none !important;
will-change: auto !important;
background-image: none !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: #f2f6ff !important;
-webkit-text-fill-color: #f2f6ff !important;
filter: none !important;
transform: translateZ(0);
}
[data-theme="light"] body.modal-animating #product-modal.modal--holo #pm-title,
[data-theme="light"] #product-modal.modal--holo.modal-waapi #pm-title,
[data-theme="light"] #product-modal.modal--holo.modal-entering #pm-title {
color: #1a2233 !important;
-webkit-text-fill-color: #1a2233 !important;
}
body.modal-animating #modal-overlay.active.overlay-rising {
will-change: opacity;
}
body:not(.modal-animating) .modal.lg-sheet.modal-top.active {
will-change: transform;
}
body.modal-animating .modal .glass-panel,
body.modal-swiping .modal .glass-panel {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.modal-swiping .modal.lg-sheet.active {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
--lg-blur-amt: 0px !important;
}
/* Раскрытие «Мои покупки»: фон кабинета не меняем */
/* Подсветка сразу как у готового glass — без «догрузки» после slide */
body.modal-animating .modal.lg-sheet:not(.modal-under)::before,
.modal.lg-sheet.active.glass-ready:not(.modal-under)::before {
opacity: 0.88 !important;
transition: none !important;
animation: none !important;
}
[data-theme="light"] body.modal-animating .modal.lg-sheet:not(.modal-under)::before,
[data-theme="light"] .modal.lg-sheet.active.glass-ready:not(.modal-under)::before {
opacity: 0.42 !important;
}
body.modal-animating .modal.lg-sheet:not(.modal--holo):not(#profile-modal)::after,
.modal.lg-sheet.active.glass-ready:not(.modal--holo):not(#profile-modal)::after {
opacity: 1 !important;
transition: none !important;
animation: none !important;
}
body #product-modal.modal--holo.active,
body #product-modal.modal--holo.active.glass-ready {
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
body #product-modal.modal--holo.active::-webkit-scrollbar,
body #product-modal.modal--holo.active.glass-ready::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
body.modal-animating #product-modal.modal--holo.active {
overflow-x: hidden !important;
overflow-y: auto !important;
}
body:not(.modal-animating) .modal:not(.lg-sheet) {
will-change: auto;
contain: none;
}
/* lg-sheet всегда держат GPU-слой — иначе первый open снова «холодный» */
body:not(.modal-animating) .modal.lg-sheet:not(.active) {
will-change: transform;
contain: layout style;
}
/* ═══ МОБИЛЬНЫЙ ФИНАЛ: blur ВЫКЛ у всех окон (последний блок — побеждает каскад) ═══ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
.modal.lg-sheet,
.modal.lg-sheet.active:not(.modal-under),
.modal.lg-sheet.active.glass-ready:not(.modal-under),
.modal.lg-sheet.modal-entering,
.modal.lg-sheet.modal-closing,
body.modal-animating .modal.lg-sheet:not(.modal-under),
body.modal-animating .modal.lg-sheet.active:not(.modal-under),
body.modal-animating .modal.lg-sheet.active.glass-ready:not(.modal-under),
body.modal-animating .modal.lg-sheet.modal-closing,
body:not(.modal-animating) .modal.lg-sheet.active:not(.modal-under),
body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under),
html:not([data-theme="light"]) body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
[data-theme="light"] body:not(.modal-animating) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-stack:not(.modal-animating) .modal.lg-sheet.modal-top.active.glass-ready,
[data-theme="dark"] body.modal-stack:not(.modal-animating) .modal.lg-sheet.modal-top.active.glass-ready,
[data-theme="light"] body.modal-stack:not(.modal-animating) .modal.lg-sheet.modal-top.active.glass-ready,
body.modal-swiping .modal.lg-sheet.active,
body.modal-swiping .modal.lg-sheet.active.glass-ready,
body.modal-stack .modal.lg-sheet.modal-top.active,
body.modal-stack .modal.lg-sheet.modal-top.active.glass-ready,
#product-modal.modal--holo,
#product-modal.modal--holo.active,
#product-modal.modal--holo.active.glass-ready,
body.purchases-animating #profile-modal.lg-sheet {
--lg-blur-amt: 0px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
}
/* under в стеке: blur через JS — filter в CSS не убиваем */
body.modal-stack .modal.lg-sheet.modal-under.active,
body.modal-stack .modal.lg-sheet.modal-under.active.glass-ready,
body.modal-animating.modal-stack .modal.lg-sheet.modal-under.active,
body.modal-animating.modal-stack .modal.lg-sheet.modal-under.active.glass-ready,
body.modal-stack #product-modal.lg-sheet.modal-under.active,
body.modal-stack #cart-modal.lg-sheet.modal-under.active {
--lg-blur-amt: 0px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: filter 0.32s ease !important;
}
/* Важно: во время slide НЕ делать лист полупрозрачным (глобальные
modal-animating правила иначе «съедают» затемнение раньше/позже).
Специфичность = как у глобальных правил + этот блок позже → побеждает. */
html:not([data-theme="light"]) body.modal-animating .modal.lg-sheet.active:not(.modal-closing):not(.modal-under):not(.modal--holo),
[data-theme="dark"] body.modal-animating .modal.lg-sheet.active:not(.modal-closing):not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-swiping .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body.modal-swiping .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo),
[data-theme="dark"] body.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo),
html:not([data-theme="light"]) body.modal-stack #cart-modal.modal-top.active,
[data-theme="dark"] body.modal-stack #cart-modal.modal-top.active {
background: linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%) !important;
box-shadow: 0 -6px 24px rgba(0,0,0,0.32) !important;
}
[data-theme="light"] body.modal-animating .modal.lg-sheet.active:not(.modal-closing):not(.modal-under):not(.modal--holo),
[data-theme="light"] body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo),
[data-theme="light"] body.modal-swiping .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="light"] body.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo),
[data-theme="light"] body.modal-stack #cart-modal.modal-top.active {
background: linear-gradient(168deg, #ffffff 0%, #f4faff 100%) !important;
}
/* Покупки: высота без transition (layout thrash), плавность — opacity/transform */
#purchases-wrapper {
display: block !important;
grid-template-rows: none !important;
max-height: 0;
overflow: hidden !important;
margin-bottom: 0 !important;
transition: margin-bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
#purchases-wrapper.expanded {
margin-bottom: 16px !important;
}
#purchases-wrapper #purchases-container {
opacity: 0;
transform: translate3d(0, -8px, 0);
transition:
opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
overflow: hidden !important;
min-height: 0 !important;
will-change: auto;
}
#purchases-wrapper.is-animating #purchases-container {
will-change: opacity, transform;
}
#purchases-wrapper.expanded #purchases-container {
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
}
#purchases-arrow {
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* purchases-animating: НЕ трогаем background (inherit давал вспышку) */
/* Xbox: статичная рамка на время slide — анимация border-size жрёт FPS */
body.modal-animating #product-modal.modal--holo,
body.modal-swiping #product-modal.modal--holo {
animation: none !important;
background-size: auto, 100% 100% !important;
}
/* Оверлей: open/close синхронно с slide листа */
#modal-overlay {
background: rgba(0, 0, 0, 0.42) !important;
}
#modal-overlay.active {
opacity: 1 !important;
background: rgba(0, 0, 0, 0.42) !important;
}
#modal-overlay.active.overlay-rising {
transition: opacity var(--modal-anim-ms, 280ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
/* КРИТИЧНО: active+!important иначе opacity:0 при close не работает → вспышка */
#modal-overlay.active.overlay-fading {
opacity: 0 !important;
transition: opacity var(--modal-close-ms, 420ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
#modal-overlay.overlay-fading {
transition: opacity var(--modal-close-ms, 420ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
/* Карточки товаров: blur на теме/свайпе дорогой */
.item-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(12, 18, 36, 0.88) !important;
}
[data-theme="light"] .item-card {
background: rgba(255, 255, 255, 0.72) !important;
}
html.theme-switching .item-card,
html.theme-switching .cat-btn-inner,
html.theme-switching .modal.lg-sheet {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
}
/* Категории: без тяжёлого blur(42px) */
.cat-btn-inner {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
[data-theme="light"] .modal-header h2,
[data-theme="light"] #pm-title { color: var(--text); }
[data-theme="light"] .modal-drag-pill {
background: rgba(255,255,255,0.35);
border: 1px solid rgba(255,255,255,0.55);
}
[data-theme="light"] .close-btn { color: var(--text-muted); }
[data-theme="light"] .support-btn.glass-panel,
[data-theme="light"] #togglePurchases-btn { color: var(--text); }
[data-theme="light"] .support-btn.glass-panel:active,
[data-theme="light"] #togglePurchases-btn:active {
background: rgba(255, 255, 255, 0.22) !important;
}
[data-theme="light"] #purch-id-block > p,
[data-theme="light"] #purch-date-block > p,
[data-theme="light"] .pm-price-label {
color: var(--text-muted);
}
[data-theme="light"] #purch-data-block {
border-style: dashed !important;
border-color: rgba(0, 136, 170, 0.28) !important;
}
/* Тёмный текст на небе плохо читался — по просьбе пользователя
делаем заголовок/подзаголовок хиро и бейдж "Авто-магазин" белыми
и чуть прозрачными. Акцентное слово "подписки" (h1 span) сначала
оставляли фирменным teal-цветом, но пользователь отдельно попросил
перекрасить и его тоже — теперь оно белое, как весь заголовок. */
[data-theme="light"] .hero-label { color: rgba(255, 255, 255, 0.92); }
[data-theme="light"] .hero h1 { color: rgba(255, 255, 255, 0.94); }
[data-theme="light"] .hero h1 span { color: rgba(255, 255, 255, 0.94); }
[data-theme="light"] .hero p { color: rgba(255, 255, 255, 0.82); }
[data-theme="light"] .sub-info h4 { color: var(--text); }
#auth-section { display: flex; align-items: center; gap: 8px; }
/* Корзина и кнопка "Открыть в Telegram" сдвинуты чуть ниже вместе с
остальным контентом; логотип, кнопка профиля и Pro-бейдж — нет,
поэтому им тут margin-top не добавляем (см. запрос пользователя). */
#cart-overlay, #tg-login-btn {
margin-top: 6px;
}
.theme-toggle {
width: 74px; height: 40px; padding: 0; flex-shrink: 0;
border: none; border-radius: 100px;
background: transparent; cursor: pointer; overflow: visible;
transition: transform 0.15s;
display: block; position: relative;
box-sizing: border-box;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle canvas {
display: block; width: 100%; height: 100%;
border-radius: 100px; pointer-events: none;
}
/* ═══ v38: сплошной фон — НЕ для modal-under (under только blur поверх того же вида) ═══ */
html:not([data-theme="light"]) .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="dark"] .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
[data-theme="dark"] .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-animating .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body.modal-animating .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) body.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo),
[data-theme="dark"] body.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo),
html:not([data-theme="light"]) body.modal-stack .modal.lg-sheet.modal-top.active.glass-ready:not(.modal--holo),
[data-theme="dark"] body.modal-stack .modal.lg-sheet.modal-top.active.glass-ready:not(.modal--holo),
html:not([data-theme="light"]) body.modal-animating.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo),
[data-theme="dark"] body.modal-animating.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo),
html:not([data-theme="light"]) #purchase-modal.lg-sheet.active:not(.modal-under),
[data-theme="dark"] #purchase-modal.lg-sheet.active:not(.modal-under),
html:not([data-theme="light"]) #product-modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="dark"] #product-modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
html:not([data-theme="light"]) #cart-modal.lg-sheet.active:not(.modal-under),
[data-theme="dark"] #cart-modal.lg-sheet.active:not(.modal-under),
html:not([data-theme="light"]) body.modal-stack #cart-modal.modal-top.active.glass-ready,
[data-theme="dark"] body.modal-stack #cart-modal.modal-top.active.glass-ready {
--lg-blur-amt: 0px !important;
--lg-bg: linear-gradient(168deg, #101c3a 0%, #0a1428 42%, #060c1c 100%) !important;
background: linear-gradient(168deg, #101c3a 0%, #0a1428 42%, #060c1c 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
border-top-color: rgba(160, 230, 255, 0.45) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(200, 240, 255, 0.22),
inset 0 0 0 1px rgba(0, 200, 255, 0.18),
0 0 36px rgba(0, 140, 255, 0.16),
0 0 64px rgba(80, 60, 200, 0.1) !important;
transition: transform 0.38s cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
/* Кабинет/настройки: без cyan-блика (отдельное правило) */
html:not([data-theme="light"]) #profile-modal.lg-sheet.active:not(.modal-under),
[data-theme="dark"] #profile-modal.lg-sheet.active:not(.modal-under) {
--lg-blur-amt: 0px !important;
--lg-bg: linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%) !important;
background: linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
border-top-color: rgba(255, 255, 255, 0.12) !important;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
transition: transform 0.38s cubic-bezier(0.22, 0.82, 0.2, 1) !important;
/* Свечение карточек не режем по краю листа */
overflow-x: visible !important;
contain: none !important;
}
html:not([data-theme="light"]) body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo),
[data-theme="dark"] body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo),
[data-theme="light"] body.modal-animating .modal.lg-sheet.modal-closing:not(.modal-under):not(.modal--holo) {
transition: transform var(--modal-close-ms, 420ms) cubic-bezier(0.32, 0.0, 0.15, 1) !important;
}
/* Это и есть правило, которое реально управляет видимым окном (см.
комментарий "v38: сплошной фон" выше) — более раннее и более
простое [data-theme="light"] .modal.lg-sheet.active чуть выше по
файлу им полностью перебивается, так что раньше правка там ни на
что не влияла. Окну — тот же лёгкий блюр, что и у остальных
блоков (по просьбе пользователя): фон делаем полупрозрачным и
добавляем backdrop-filter. НЕ трогаем body.modal-stack (второе
окно поверх первого) — там это правило не участвует вообще
(стек всегда идёт через отдельные selectors выше, которые тут не
тронуты) — тот самый старый баг "весь ЛК в каше" был именно про
стек, так что риска повторить его нет. */
[data-theme="light"] .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="light"] .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo),
[data-theme="light"] #profile-modal.lg-sheet.active:not(.modal-under),
[data-theme="light"] #purchase-modal.lg-sheet.active:not(.modal-under),
[data-theme="light"] #product-modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="light"] #cart-modal.lg-sheet.active:not(.modal-under) {
--lg-blur-amt: 0px !important;
background: linear-gradient(168deg, rgba(255, 255, 255, 0.5) 0%, rgba(244, 250, 255, 0.5) 100%) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
filter: none !important;
/* Блюр включается снятием modal-animating одним махом (см. блок
ниже) — без этого перехода получался резкий "щелчок": лист уже
стоит на месте, а фон под ним ещё секунду виден чётко, потом
внезапно застывает в блюре ("блюр не успевает"). Плавный
fade-in сглаживает именно этот момент, не трогая саму скорость
слайда.
ВАЖНО: без !important — сам слайд едет через inline
modal.style.transition = "transform Nms ease" (JS), которое
НЕ должно перебиваться этим правилом. !important здесь один
раз уже сломал открытие/закрытие (окно дёргалось резко вместо
плавного слайда), т.к. important-правило в стилях побеждает
обычный inline-transition независимо от specificity. Обычной
(не-important) специфичности достаточно: во время слайда
transition управляется инлайном или отдельным
modal-closing-правилом ниже по файлу, а как только они его
снимают (resetModalInline, ровно в момент завершения слайда) —
в дело вступает это правило. */
transition: backdrop-filter 0.22s ease-out, -webkit-backdrop-filter 0.22s ease-out;
}
/* Пока сам лист ещё едет (slide-in/out) — без blur: чуть ниже по
файлу уже есть отдельный, специально написанный фикс именно под
это ("на части связок браузер/GPU сам факт наличия backdrop-filter,
даже нулевого, включает дорогой путь захвата фона на каждый
кадр") — здесь просто гарантируем, что именно во время
modal-animating он побеждает, а не наше новое правило выше
(иначе оно перебило бы его по специфичности). Blur появляется,
как только слайд долистал и класс modal-animating снят — и
появляется плавно (transition в правиле выше), а не рывком.
Свойство transition тут намеренно НЕ трогаем: во время слайда его
контролирует inline-стиль из JS (или отдельное modal-closing
правило ниже) — иначе получится точно та же поломка слайда, что
и в правиле выше. backdrop-filter при этом всё равно переключается
мгновенно, т.к. он просто не входит в список анимируемых свойств
в этот момент. */
[data-theme="light"] body.modal-animating .modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="light"] body.modal-animating #profile-modal.lg-sheet.active:not(.modal-under),
[data-theme="light"] body.modal-animating #purchase-modal.lg-sheet.active:not(.modal-under),
[data-theme="light"] body.modal-animating #product-modal.lg-sheet.active:not(.modal-under):not(.modal--holo),
[data-theme="light"] body.modal-animating #cart-modal.lg-sheet.active:not(.modal-under) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Стек (два окна одновременно) — как и раньше, без blur: именно тут
раньше был баг "весь ЛК в каше". */
[data-theme="light"] body.modal-stack .modal.lg-sheet.modal-top.active:not(.modal--holo) {
--lg-blur-amt: 0px !important;
background: linear-gradient(168deg, #ffffff 0%, #f4faff 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
}
.modal.lg-sheet.active:not(.modal-under):not(.modal--holo):not(#profile-modal)::before,
.modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo):not(#profile-modal)::before,
body.modal-animating .modal.lg-sheet:not(.modal-under):not(.modal--holo):not(#profile-modal)::before {
opacity: 0.35 !important;
transition: none !important;
}
[data-theme="light"] .modal.lg-sheet.active:not(.modal-under):not(.modal--holo):not(#profile-modal)::before,
[data-theme="light"] .modal.lg-sheet.active.glass-ready:not(.modal-under):not(.modal--holo):not(#profile-modal)::before {
opacity: 0.22 !important;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', system-ui, sans-serif;
margin: 0; padding: 0;
background: var(--bg);
color: var(--text);
padding-bottom: 40px;
/* clip не ломает position:sticky (в отличие от overflow-x:hidden) */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
/* Прижимаем .shop-footer к самому низу экрана, даже когда
каталог пустой и контента мало (см. .shop-shell flex:1 ниже) */
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
/* Смена темы: только ключевые узлы (не .app-container * — лаг на телефоне) */
html.theme-switching,
html.theme-switching body,
html.theme-switching .modal.lg-sheet,
html.theme-switching .item-card,
html.theme-switching .cat-btn,
html.theme-switching .cat-btn-inner,
html.theme-switching #cart-overlay,
html.theme-switching .theme-toggle {
transition: none !important;
}
[data-theme="light"] body {
background: transparent;
min-height: 100vh;
min-height: 100dvh;
}
/* Звёздный фон — за всем */
#star-canvas {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: 0; pointer-events: none;
}
#bg-canvas {
display: none !important;
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: 1; pointer-events: none; opacity: 0;
}
.app-container { max-width: 900px; margin: 0 auto; position: relative; z-index: 3; }
/* Desktop side rails */
.shop-shell {
position: relative;
z-index: 3;
width: 100%;
max-width: 900px;
margin: 0 auto;
box-sizing: border-box;
/* Растягивается на всё доступное место, отталкивая .shop-footer
к нижнему краю экрана, если контента мало */
flex: 1 0 auto;
}
.shop-side {
display: none;
}
.site-promo-card {
position: relative;
padding: 20px 18px 18px;
border-radius: 24px;
border: 1px solid rgba(100, 160, 255, 0.28);
background: rgba(8, 14, 30, 0.78);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 16px 36px rgba(0, 0, 0, 0.42),
0 0 22px rgba(255, 140, 40, 0.08),
0 0 18px rgba(60, 120, 255, 0.08);
overflow: visible;
isolation: auto;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
animation: site-promo-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.site-promo-card::before {
content: '';
position: absolute;
inset: -18% -12% -14% -12%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 50% 38% at 50% 62%, rgba(255, 140, 40, 0.16) 0%, rgba(255, 120, 20, 0.06) 45%, transparent 72%),
radial-gradient(ellipse 36% 26% at 78% 18%, rgba(255, 160, 50, 0.1) 0%, transparent 70%);
filter: blur(16px);
}
.site-promo-card::after {
content: none !important;
display: none !important;
}
.site-promo-card > * { position: relative; z-index: 1; }
.site-promo-card + .site-promo-card {
margin-top: 18px;
animation-delay: 0.08s;
}
.site-promo-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 18px;
}
.site-promo-kind {
margin: 0;
font-family: 'Syne', 'DM Sans', sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ff9a28;
text-shadow:
0 0 6px rgba(255, 150, 40, 0.55),
0 0 14px rgba(255, 140, 40, 0.28);
}
.site-promo-badge {
padding: 6px 13px;
border-radius: 999px;
font-size: 12px;
font-weight: 850;
color: #1a1208;
background: linear-gradient(180deg, #ffe08a 0%, #ffb84a 45%, #ff8a28 100%);
box-shadow:
0 0 8px rgba(255, 150, 40, 0.4),
0 0 16px rgba(255, 130, 30, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
animation: site-promo-badge-pulse 2.4s ease-in-out infinite;
}
.site-promo-body {
display: grid;
grid-template-columns: 54px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.site-promo-logo-wrap {
width: 54px;
height: 54px;
display: grid;
place-items: center;
background: transparent;
border: none;
overflow: visible;
box-shadow: none;
}
.site-promo-logo {
width: 50px;
height: 50px;
object-fit: contain;
mix-blend-mode: normal;
filter: drop-shadow(0 0 10px rgba(0, 120, 215, 0.45));
}
.site-promo-copy { min-width: 0; }
.site-promo-title {
margin: 0 0 3px;
font-size: 17px;
font-weight: 800;
color: #ffffff;
line-height: 1.15;
}
.site-promo-sub {
margin: 0;
font-size: 13px;
color: rgba(160, 180, 210, 0.72);
}
.site-promo-offer {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
height: 56px;
margin-bottom: 18px;
border-radius: 12px;
overflow: visible;
background: rgba(8, 14, 32, 0.92);
border: 1.5px solid rgba(90, 160, 255, 0.45);
box-shadow: none;
}
.site-promo-offer-deal {
position: relative;
z-index: 2;
flex: 1.28 1 0;
min-width: 0;
height: calc(100% + 6px);
/* оболочка: левая сторона как в v357 (ровная, 12px); справа скос не обрезаем */
margin: -3px 4px -3px -3px;
padding: 0;
border: none;
border-radius: 12px;
background: transparent;
color: #1a1208;
overflow: visible;
clip-path: inset(0 -28px 0 0 round 12px);
-webkit-clip-path: inset(0 -28px 0 0 round 12px);
filter: drop-shadow(0 0 10px rgba(255, 150, 40, 0.35));
isolation: isolate;
}
.site-promo-offer-deal-skew {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1px;
box-sizing: border-box;
width: calc(100% + 16px);
height: 100%;
margin-left: -8px;
padding: 8px 34px 8px 26px;
border: 1.5px solid rgba(70, 35, 0, 0.55);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-top-right-radius: 18px;
border-bottom-right-radius: 10px;
background: linear-gradient(125deg, #ffecc2 0%, #ffd769 24%, #ffc350 44%, #ffab44 64%, #fe9642 82%, #f5821f 100%);
transform: skewX(-12deg);
transform-origin: left center;
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
.site-promo-offer-deal::before,
.site-promo-offer-deal::after {
content: none;
display: none;
}
.site-promo-offer-deal-title,
.site-promo-offer-deal-note {
position: relative;
z-index: 1;
display: block;
text-align: center;
transform: skewX(12deg);
white-space: nowrap;
}
.site-promo-offer-deal-title {
font-size: 26px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.03em;
margin-left: 0;
}
.site-promo-offer-deal-note {
font-size: 11px;
font-weight: 650;
line-height: 1.15;
color: rgba(26, 18, 8, 0.78);
margin-left: 0;
max-width: 100%;
}
.site-promo-offer-stars {
position: relative;
z-index: 1;
flex: 1.15 1 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 92px;
height: 100%;
padding: 0 10px 0 6px;
border-radius: 0;
background: transparent;
border: none;
color: #ffffff;
font-size: 22px;
font-weight: 850;
font-variant-numeric: tabular-nums;
box-shadow: none;
}
.site-promo-offer-stars .site-promo-star {
width: 18px;
height: 18px;
display: block;
flex-shrink: 0;
filter: drop-shadow(0 0 2px rgba(255, 200, 60, 0.3));
}
.site-promo-prices,
.site-promo-old,
.site-promo-new,
.site-promo-deal-note { display: none; }
.site-promo-timer-label {
margin: 0 0 12px;
font-family: 'Syne', 'DM Sans', sans-serif;
font-size: 12.5px;
font-weight: 800;
color: rgba(220, 235, 255, 0.92);
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
text-shadow: 0 0 12px rgba(120, 180, 255, 0.25);
}
.site-promo-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-bottom: 18px;
font-variant-numeric: tabular-nums;
}
.site-promo-timer span[data-h],
.site-promo-timer span[data-m],
.site-promo-timer span[data-s] {
min-width: 48px;
padding: 11px 0;
border-radius: 16px;
text-align: center;
font-size: 17px;
font-weight: 800;
color: #ffffff;
background: rgba(8, 14, 30, 0.92);
border: 1.5px solid rgba(90, 170, 255, 0.4);
box-shadow:
0 0 8px rgba(70, 150, 255, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
text-shadow: none;
transition: transform 0.2s ease, color 0.2s ease;
}
.site-promo-timer span.is-tick {
transform: translateY(-1px) scale(1.04);
color: #9fd0ff;
}
.site-promo-timer-sep {
font-style: normal;
font-size: 18px;
font-weight: 800;
color: #6ec0ff;
text-shadow: 0 0 6px rgba(90, 180, 255, 0.45);
padding: 0 1px;
line-height: 1;
}
.site-promo-cta {
position: relative;
z-index: 2;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
padding: 15px 18px;
font-family: 'DM Sans', sans-serif;
font-size: 14.5px;
font-weight: 750;
letter-spacing: 0.01em;
cursor: pointer;
color: #1a1208;
background: linear-gradient(90deg, #ffe9a0 0%, #ffd24a 38%, #ff8f28 100%);
box-shadow:
0 8px 20px rgba(255, 130, 30, 0.32),
0 0 18px rgba(255, 140, 40, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
-webkit-tap-highlight-color: transparent;
overflow: visible;
transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
animation: site-promo-cta-glow 3.6s ease-in-out infinite;
}
.site-promo-cta::before,
.site-promo-cta::after {
content: none;
display: none;
}
.site-promo-cta span { position: relative; z-index: 1; }
.site-promo-cta:hover {
filter: brightness(1.05);
box-shadow:
0 10px 24px rgba(255, 130, 30, 0.4),
0 0 22px rgba(255, 140, 40, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.site-promo-cta:active {
transform: scale(0.985) translateY(1px);
animation: none;
}
@keyframes site-promo-cta-glow {
0%, 100% {
box-shadow:
0 8px 20px rgba(255, 130, 30, 0.28),
0 0 16px rgba(255, 140, 40, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
50% {
box-shadow:
0 8px 22px rgba(255, 130, 30, 0.38),
0 0 22px rgba(255, 140, 40, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
}
@keyframes site-promo-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes site-promo-badge-pulse {
0%, 100% { box-shadow: 0 0 8px rgba(255, 150, 40, 0.35), 0 0 14px rgba(255, 130, 30, 0.15); }
50% { box-shadow: 0 0 10px rgba(255, 150, 40, 0.5), 0 0 18px rgba(255, 130, 30, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
.site-promo-card,
.site-promo-badge,
.site-promo-cta { animation: none !important; }
}
/* Цветовые акценты по типу акции (p.kind: day/week/month — см.
renderSitePromos в app.js). "Неделя" остаётся оранжевой (стиль
.site-promo-card без модификатора, ничего не меняем), "месяц" —
фиолетовая, "день" — голубая/цвета кислорода. Переопределяем только
цвета — структура и разметка карточки не трогается. */
.site-promo-card--month {
border-color: rgba(150, 110, 255, 0.32);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 16px 36px rgba(0, 0, 0, 0.42),
0 0 22px rgba(150, 90, 255, 0.1),
0 0 18px rgba(60, 160, 255, 0.1);
}
.site-promo-card--month::before {
background:
radial-gradient(ellipse 50% 38% at 50% 62%, rgba(150, 90, 255, 0.18) 0%, rgba(90, 70, 255, 0.06) 45%, transparent 72%),
radial-gradient(ellipse 36% 26% at 78% 18%, rgba(110, 200, 255, 0.12) 0%, transparent 70%);
}
.site-promo-card--month .site-promo-kind {
color: #b98cff;
text-shadow: 0 0 6px rgba(180, 130, 255, 0.55), 0 0 14px rgba(150, 110, 255, 0.28);
}
.site-promo-card--month .site-promo-badge {
background: linear-gradient(180deg, #d9c2ff 0%, #a97bff 45%, #7c4dff 100%);
box-shadow: 0 0 8px rgba(150, 110, 255, 0.4), 0 0 16px rgba(130, 90, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
animation: site-promo-badge-pulse-violet 2.4s ease-in-out infinite;
}
.site-promo-card--month .site-promo-offer { border-color: rgba(150, 110, 255, 0.45); }
.site-promo-card--month .site-promo-offer-deal { filter: drop-shadow(0 0 10px rgba(150, 110, 255, 0.35)); }
.site-promo-card--month .site-promo-offer-deal-skew {
background: linear-gradient(125deg, #ecdcff 0%, #cfa9ff 24%, #b483ff 44%, #9a63ff 64%, #7c48f0 82%, #642fd6 100%);
border-color: rgba(50, 20, 90, 0.55);
}
.site-promo-card--month .site-promo-offer-deal-note { color: rgba(30, 15, 55, 0.78); }
.site-promo-card--month .site-promo-cta {
background: linear-gradient(90deg, #e4d3ff 0%, #b583ff 38%, #7c3fff 100%);
box-shadow: 0 8px 20px rgba(130, 80, 255, 0.32), 0 0 18px rgba(140, 90, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
animation: site-promo-cta-glow-violet 3.6s ease-in-out infinite;
}
.site-promo-card--day {
border-color: rgba(70, 200, 255, 0.34);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 16px 36px rgba(0, 0, 0, 0.42),
0 0 22px rgba(50, 190, 255, 0.12),
0 0 18px rgba(60, 140, 255, 0.1);
}
.site-promo-card--day::before {
background:
radial-gradient(ellipse 50% 38% at 50% 62%, rgba(50, 190, 255, 0.2) 0%, rgba(30, 140, 255, 0.06) 45%, transparent 72%),
radial-gradient(ellipse 36% 26% at 78% 18%, rgba(120, 230, 255, 0.14) 0%, transparent 70%);
}
.site-promo-card--day .site-promo-kind {
color: #4fd6ff;
text-shadow: 0 0 6px rgba(80, 210, 255, 0.55), 0 0 14px rgba(50, 190, 255, 0.28);
}
.site-promo-card--day .site-promo-badge {
background: linear-gradient(180deg, #c6f3ff 0%, #6fd6ff 45%, #1fa8ff 100%);
box-shadow: 0 0 8px rgba(50, 190, 255, 0.4), 0 0 16px rgba(30, 160, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
animation: site-promo-badge-pulse-cyan 2.4s ease-in-out infinite;
}
.site-promo-card--day .site-promo-offer { border-color: rgba(70, 200, 255, 0.48); }
.site-promo-card--day .site-promo-offer-deal { filter: drop-shadow(0 0 10px rgba(50, 190, 255, 0.35)); }
.site-promo-card--day .site-promo-offer-deal-skew {
background: linear-gradient(125deg, #dff6ff 0%, #a7e6ff 24%, #74d3ff 44%, #45bdff 64%, #1f9fef 82%, #0f80d6 100%);
border-color: rgba(5, 45, 75, 0.55);
}
.site-promo-card--day .site-promo-offer-deal-note { color: rgba(10, 35, 55, 0.78); }
.site-promo-card--day .site-promo-cta {
background: linear-gradient(90deg, #d3f2ff 0%, #6fcfff 38%, #1595ff 100%);
box-shadow: 0 8px 20px rgba(30, 160, 255, 0.32), 0 0 18px rgba(50, 170, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
animation: site-promo-cta-glow-cyan 3.6s ease-in-out infinite;
}
@keyframes site-promo-badge-pulse-violet {
0%, 100% { box-shadow: 0 0 8px rgba(150, 110, 255, 0.35), 0 0 14px rgba(130, 90, 255, 0.15); }
50% { box-shadow: 0 0 10px rgba(150, 110, 255, 0.5), 0 0 18px rgba(130, 90, 255, 0.22); }
}
@keyframes site-promo-badge-pulse-cyan {
0%, 100% { box-shadow: 0 0 8px rgba(50, 190, 255, 0.35), 0 0 14px rgba(30, 160, 255, 0.15); }
50% { box-shadow: 0 0 10px rgba(50, 190, 255, 0.5), 0 0 18px rgba(30, 160, 255, 0.22); }
}
@keyframes site-promo-cta-glow-violet {
0%, 100% { box-shadow: 0 8px 20px rgba(130, 80, 255, 0.28), 0 0 16px rgba(140, 90, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
50% { box-shadow: 0 8px 22px rgba(130, 80, 255, 0.38), 0 0 22px rgba(140, 90, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
@keyframes site-promo-cta-glow-cyan {
0%, 100% { box-shadow: 0 8px 20px rgba(30, 160, 255, 0.28), 0 0 16px rgba(50, 170, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
50% { box-shadow: 0 8px 22px rgba(30, 160, 255, 0.38), 0 0 22px rgba(50, 170, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
.site-promo-card--month .site-promo-badge,
.site-promo-card--month .site-promo-cta,
.site-promo-card--day .site-promo-badge,
.site-promo-card--day .site-promo-cta { animation: none !important; }
}
/* ===================== Блок акций v2: одна крупная "hero"-карточка
(самая срочная — ближайший дедлайн) + компактные строки под ней
(см. renderSitePromos в app.js). .site-promo-card и его потомки
выше по файлу больше не рендерятся этой функцией — оставлены
нетронутыми на случай отката, но фактически не используются.
Кнопка "Купить" в hero сама служит индикатором времени: узкая
заливка .fill скошена той же геометрией, что раньше была у
.site-promo-offer-deal-skew (18px/10px справа), и занимает долю
ширины кнопки, равную доле оставшегося времени акции — тает к
левому краю по мере отсчёта (ширина пересчитывается каждую
секунду в tickSitePromoTimers). Слева кнопка обрезана чистым
border-radius обёртки (overflow:hidden), без острых углов. ===== */
/* Обёртка для анимированного светящегося кольца (canvas) — сама
карточка/строка внутри имеет overflow:hidden (см. ниже), поэтому
кольцо рисуется СНАРУЖИ, в отдельной обёртке с overflow:visible,
как у подиума "Популярное сегодня" (li.popular-deck-card). */
.site-promo-ring-wrap { position: relative; overflow: visible; }
.site-promo-ring {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
pointer-events: none; z-index: 0; overflow: visible;
}
.site-promo-hero {
position: relative;
padding: 18px 18px 16px;
border-radius: 24px;
border: 1px solid rgba(255, 154, 40, 0.32);
background: rgba(8, 14, 30, 0.82);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 16px 36px rgba(0, 0, 0, 0.42),
0 0 22px rgba(255, 140, 40, 0.1);
overflow: hidden;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
animation: site-promo-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.site-promo-hero::before {
content: '';
position: absolute;
inset: -18% -12% -14% -12%;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse 55% 42% at 50% 60%, rgba(255, 140, 40, 0.18) 0%, transparent 72%);
filter: blur(16px);
}
.site-promo-hero > * { position: relative; z-index: 1; }
.site-promo-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.site-promo-hero-kind {
font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
color: #ff9a28; text-shadow: 0 0 6px rgba(255, 150, 40, 0.5), 0 0 14px rgba(255, 140, 40, 0.25);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-promo-hero-timer {
flex-shrink: 0; font-size: 12px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
background: rgba(20, 26, 52, 0.65); border: 1px solid rgba(255, 170, 60, 0.35);
border-radius: 999px; padding: 6px 12px; transition: transform 0.2s ease;
}
.site-promo-hero-timer.is-tick { transform: translateY(-1px) scale(1.04); }
.site-promo-hero-body { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.site-promo-hero-logo {
width: 52px; height: 52px; border-radius: 13px; object-fit: contain; flex-shrink: 0;
filter: drop-shadow(0 0 10px rgba(0, 120, 215, 0.4));
background: rgba(255, 255, 255, 0.03);
}
.site-promo-hero-copy { min-width: 0; }
/* Название + чип типа сделки (1+1, 2+1, -30%) в одной строке — чип
не даёт названию сжаться до нуля (min-width:0) и сам не сжимается
(flex-shrink:0), при нехватке места переносится на новую строку. */
.site-promo-hero-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.site-promo-hero-title {
margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #fff; line-height: 1.18;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-width: 0;
}
.site-promo-hero-deal-chip {
display: inline-flex; align-items: center; flex-shrink: 0; margin-bottom: 4px;
font-size: 10.5px; font-weight: 900; color: #06131f;
background: linear-gradient(135deg, #ffe27a, #ff9a28);
padding: 2px 7px; border-radius: 7px;
box-shadow: 0 0 8px rgba(255, 160, 40, 0.45);
white-space: nowrap;
}
.site-promo-hero-price { margin: 0; font-size: 13px; color: rgba(200, 220, 255, 0.72); }
.site-promo-hero-price s { color: rgba(200, 215, 235, 0.42); font-weight: 600; margin-right: 2px; }
.site-promo-hero-price b { color: #ffd24a; font-size: 15px; font-weight: 850; }
/* Кнопка — цветом фона карточки (без золотой заливки), а подсветка +
её анимация, которая раньше бежала кольцом по контуру ВСЕЙ
карточки, теперь живёт по контуру именно этой кнопки. Раньше
пульс делали анимацией box-shadow/border-color НАПРЯМУЮ — это
requires repaint каждый кадр (не композитное свойство), отсюда
дёрганость на слабых устройствах/WebView (видно на видео от
пользователя — рывками, а не плавно). Теперь анимируем только
opacity отдельного слоя (::before) с уже готовым ярким свечением —
opacity композитится на GPU, без перерисовки, поэтому гладко
всегда, независимо от мощности устройства. */
.site-promo-hero-cta {
position: relative; display: block; width: 100%; height: 52px;
border: 1.5px solid rgba(255, 170, 60, 0.4); border-radius: 26px;
background: rgba(255, 255, 255, 0.03); cursor: pointer; padding: 0;
outline: none; -webkit-tap-highlight-color: transparent;
box-shadow: 0 0 8px rgba(255, 140, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: filter 0.2s ease;
}
/* Без outline:none браузер по тапу/фокусу рисует свою рамку вокруг ВСЕЙ
прямоугольной формы кнопки. */
.site-promo-hero-cta::-moz-focus-inner { border: 0; }
.site-promo-hero-cta::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: inherit;
border: 1.5px solid rgba(255, 195, 100, 0.95);
box-shadow: 0 0 8px rgba(255, 150, 40, 0.55), 0 0 14px rgba(255, 140, 40, 0.28);
opacity: 0;
pointer-events: none;
animation: site-promo-hero-cta-glow 2.6s ease-in-out infinite;
}
.site-promo-hero-cta .label {
position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
font-size: 14.5px; font-weight: 800; color: #fff;
}
.site-promo-hero-cta:active { filter: brightness(0.95); }
@keyframes site-promo-hero-cta-glow {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
.site-promo-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.site-promo-row {
display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 14px;
background: rgba(8, 14, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.site-promo-row:hover { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); }
.site-promo-row:active { transform: scale(0.985); }
.site-promo-row-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; flex-shrink: 0; background: rgba(255, 255, 255, 0.03); }
.site-promo-row-copy { min-width: 0; flex: 1; }
/* Метка акции + мини-чип типа сделки в одной строке — чип не зависит
от длины названия (тот обрезается ellipsis'ом отдельно, ниже). */
.site-promo-row-kind-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.site-promo-row-kind { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #ff9a28; flex-shrink: 0; }
.site-promo-row-deal-chip {
display: inline-flex; align-items: center; flex-shrink: 0;
font-size: 8.5px; font-weight: 900; color: #06131f;
background: linear-gradient(135deg, #ffe27a, #ff9a28);
padding: 1px 5px; border-radius: 5px;
box-shadow: 0 0 6px rgba(255, 160, 40, 0.45);
}
.site-promo-row-title { margin: 1px 0 0; font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-promo-row-badge { flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: #ffd24a; white-space: nowrap; }
.site-promo-row-arrow { flex-shrink: 0; color: rgba(255, 255, 255, 0.32); font-size: 16px; }
/* Акценты по типу акции — тот же принцип, что у старых
.site-promo-card--day/--month: меняются только цвета/свечения. */
.site-promo-hero--day { border-color: rgba(70, 200, 255, 0.34); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 16px 36px rgba(0,0,0,.42), 0 0 22px rgba(50,190,255,.12); }
.site-promo-hero--day::before { background: radial-gradient(ellipse 55% 42% at 50% 60%, rgba(50,190,255,.2) 0%, transparent 72%); }
.site-promo-hero--day .site-promo-hero-kind { color: #4fd6ff; text-shadow: 0 0 6px rgba(80,210,255,.55), 0 0 14px rgba(50,190,255,.28); }
.site-promo-hero--day .site-promo-hero-timer { border-color: rgba(70,200,255,.4); }
/* Цвет свечения-::before переопределяем как обычные (не анимируемые
тут) свойства — сам пульс (opacity) один и тот же keyframe везде. */
.site-promo-hero--day .site-promo-hero-cta::before {
border-color: rgba(130, 225, 255, 0.95);
box-shadow: 0 0 8px rgba(70, 200, 255, 0.55), 0 0 14px rgba(50, 190, 255, 0.28);
}
.site-promo-hero--day .site-promo-hero-deal-chip { background: linear-gradient(135deg,#dff6ff,#4fd6ff); box-shadow: 0 0 8px rgba(80,210,255,.5); }
.site-promo-hero--month { border-color: rgba(150, 110, 255, 0.32); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 16px 36px rgba(0,0,0,.42), 0 0 22px rgba(150,90,255,.1); }
.site-promo-hero--month::before { background: radial-gradient(ellipse 55% 42% at 50% 60%, rgba(150,90,255,.18) 0%, transparent 72%); }
.site-promo-hero--month .site-promo-hero-kind { color: #b98cff; text-shadow: 0 0 6px rgba(180,130,255,.55), 0 0 14px rgba(150,110,255,.28); }
.site-promo-hero--month .site-promo-hero-timer { border-color: rgba(150,110,255,.38); }
.site-promo-hero--month .site-promo-hero-cta::before {
border-color: rgba(195, 160, 255, 0.95);
box-shadow: 0 0 8px rgba(150, 110, 255, 0.55), 0 0 14px rgba(150, 90, 255, 0.28);
}
.site-promo-hero--month .site-promo-hero-deal-chip { background: linear-gradient(135deg,#ecdcff,#b483ff); box-shadow: 0 0 8px rgba(180,130,255,.5); }
.site-promo-row--day .site-promo-row-kind { color: #4fd6ff; }
.site-promo-row--day .site-promo-row-deal-chip { background: linear-gradient(135deg,#dff6ff,#4fd6ff); box-shadow: 0 0 6px rgba(80,210,255,.5); }
.site-promo-row--month .site-promo-row-kind { color: #b98cff; }
.site-promo-row--month .site-promo-row-deal-chip { background: linear-gradient(135deg,#ecdcff,#b483ff); box-shadow: 0 0 6px rgba(180,130,255,.5); }
@media (prefers-reduced-motion: reduce) {
.site-promo-hero { animation: none !important; }
.site-promo-hero-cta::before { animation: none !important; opacity: 0; }
}
@media (max-width: 440px) {
.site-promo-hero { padding: 16px 14px 14px; border-radius: 20px; }
.site-promo-hero-title { font-size: 16px; }
.site-promo-hero-cta { height: 48px; }
.site-promo-row { padding: 9px 11px; }
}
.cart-item-promo {
display: inline-block;
align-self: flex-start;
margin-top: 4px;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
color: #041018;
background: linear-gradient(135deg, #ffd24a, #ff8a3d);
}
.shop-side-brand {
display: none;
margin: 0 0 14px;
padding: 0 2px;
line-height: 1;
}
.shop-side-brand .logo-text {
font-family: 'Syne', sans-serif;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.4px;
color: var(--text, #eef5ff);
}
.shop-side-brand .logo-text em {
font-style: normal;
color: var(--cyan, #00dcff);
}
.shop-side-block {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 14px 14px 12px;
border-radius: 18px;
border: 1px solid rgba(120, 180, 255, 0.14);
background:
radial-gradient(120% 80% at 0% 0%, rgba(0, 220, 255, 0.10), transparent 55%),
linear-gradient(165deg, rgba(16, 24, 42, 0.92), rgba(8, 12, 24, 0.88));
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
margin-bottom: 12px;
overflow: hidden;
}
.shop-side-block::before {
content: none;
display: none;
}
.shop-side-block--perks {
position: relative;
overflow: hidden;
padding: 16px 18px 18px;
box-sizing: border-box;
background:
radial-gradient(120% 80% at 100% 0%, rgba(255, 180, 80, 0.10), transparent 55%),
linear-gradient(165deg, rgba(18, 22, 36, 0.94), rgba(8, 12, 22, 0.9));
border-color: rgba(255, 190, 120, 0.16);
}
.shop-side-block--perks .shop-side-head {
justify-content: center;
margin: 0 0 14px;
padding: 4px 6px 6px;
min-height: 1.4em;
}
.shop-side-block--perks .shop-side-head h3,
.shop-side-block--perks > .shop-side-head h3 {
width: 100%;
text-align: center;
letter-spacing: 0.07em;
line-height: 1.35;
}
.shop-side-block--perks::before {
content: '';
position: absolute;
inset: -40% -20%;
background:
radial-gradient(circle at 20% 30%, rgba(255, 190, 90, 0.12), transparent 42%),
radial-gradient(circle at 80% 70%, rgba(80, 180, 255, 0.08), transparent 45%);
pointer-events: none;
animation: perks-ambient 12s ease-in-out infinite alternate;
z-index: 0;
}
.shop-side-block--perks > * {
position: relative;
z-index: 1;
}
@keyframes perks-ambient {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
100% { transform: translate3d(4%, -3%, 0) scale(1.06); opacity: 1; }
}
.shop-side-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 12px;
padding-left: 0;
}
.shop-side-block h3 {
margin: 0;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(220, 232, 255, 0.92);
}
.shop-side-head-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(126, 240, 255, 0.85);
padding: 3px 7px;
border-radius: 999px;
border: 1px solid rgba(0, 220, 255, 0.22);
background: rgba(0, 220, 255, 0.08);
}
.shop-side-block--popular {
overflow: visible;
padding: 16px 18px 18px 12px;
box-sizing: border-box;
}
.shop-side-block--popular .shop-side-head {
justify-content: center;
margin: 0 0 14px;
padding: 4px 6px 6px;
min-height: 1.4em;
}
.shop-side-block--popular .shop-side-head h3,
.shop-side-block--popular > .shop-side-head h3 {
width: 100%;
text-align: center;
letter-spacing: 0.07em;
line-height: 1.35;
}
.shop-side-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.shop-side-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--text-muted, rgba(200, 214, 235, 0.7));
}
/* Популярное: список как на референсе + плавный моушн */
.popular-deck {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: auto;
margin: 8px 0 2px;
padding: 2px 2px 2px 4px;
list-style: none;
overflow: visible;
-webkit-tap-highlight-color: transparent;
}
.popular-deck > li {
position: relative;
margin: 0;
display: block;
overflow: visible;
opacity: 0;
transform: translate3d(0, 16px, 0) scale(0.97);
transform-origin: 50% 60%;
transition:
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.45s ease,
filter 0.3s ease;
transition-delay: calc((var(--rank, 1) - 1) * 0.075s);
will-change: transform, opacity;
z-index: calc(12 - var(--rank, 1));
}
.popular-deck.is-dealt > li {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.popular-deck > li.is-press .popular-item {
transform: scale(0.975);
}
.popular-item {
position: relative;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
margin: 0;
padding: 10px 14px;
border: 1px solid rgba(120, 150, 190, 0.18);
border-radius: 16px;
background:
linear-gradient(155deg, rgba(28, 36, 54, 0.96) 0%, rgba(12, 16, 28, 0.98) 100%);
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
cursor: pointer;
text-align: left;
color: #eef5ff;
font: inherit;
overflow: hidden;
isolation: isolate;
transition:
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.28s ease,
box-shadow 0.35s ease,
filter 0.28s ease,
background 0.28s ease;
-webkit-tap-highlight-color: transparent;
}
/* Лидер продаж, которого сейчас нет на складе (см. get_popular_items
в itesla_site.py — рейтинг не зависит от текущего остатка). Чуть
гасим карточку и убираем курсор-указатель на "купить" — клик
по ней просто покажет тост "нет в наличии" вместо открытия
карточки товара. */
.popular-item--sold {
filter: grayscale(0.85) brightness(0.82);
cursor: default;
}
.popular-item--sold .popular-title {
opacity: 0.7;
}
.popular-item::after {
content: '';
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 18%,
rgba(255, 255, 255, 0.14) 36%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0.14) 64%,
transparent 82%
);
transform: translateX(-150%);
opacity: 0;
mix-blend-mode: overlay;
will-change: transform, opacity;
}
.popular-deck.is-dealt > li .popular-item::after {
animation: popular-shine 32s linear infinite;
animation-delay: calc((var(--rank, 1) - 1) * 1.4s + 1.8s);
}
/* только слева → направо; сброс позиции при opacity:0, без обратного хода */
@keyframes popular-shine {
0% { transform: translateX(-150%); opacity: 0; }
12% { transform: translateX(-150%); opacity: 0; }
14% { opacity: 1; }
36% { transform: translateX(150%); opacity: 1; }
38% { transform: translateX(150%); opacity: 0; }
39% { transform: translateX(-150%); opacity: 0; }
100% { transform: translateX(-150%); opacity: 0; }
}
.popular-deck > li[data-rank="1"] .popular-item,
.popular-deck > li[data-rank="2"] .popular-item,
.popular-deck > li[data-rank="3"] .popular-item {
border-color: transparent;
background:
linear-gradient(155deg, rgba(34, 42, 62, 0.99) 0%, rgba(14, 18, 32, 0.99) 100%);
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* overflow:hidden оставляем — блеск не выходит за скругления;
кольцо свечения рисуется на li снаружи кнопки */
}
.popular-top-ring {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
overflow: visible;
}
.popular-item > .popular-thumb-wrap,
.popular-item > .popular-title {
position: relative;
z-index: 1;
}
.popular-rank {
position: absolute;
left: -3px;
top: -7px;
z-index: 5;
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 900;
color: #e8eef8;
background: rgba(10, 14, 22, 0.96);
border: 1.5px solid rgba(150, 175, 210, 0.45);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
pointer-events: none;
opacity: 0;
transform: scale(0.6);
transition:
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
transition-delay: calc((var(--rank, 1) - 1) * 0.075s + 0.18s);
}
.popular-deck.is-dealt > li .popular-rank {
opacity: 1;
transform: scale(1);
}
.popular-deck > li[data-rank="1"] .popular-rank {
color: #1a1206;
background: linear-gradient(145deg, #ffe9a0 0%, #ffb240 50%, #ff8c20 100%);
border-color: #ffe0a0;
box-shadow:
0 0 12px rgba(255, 170, 50, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.popular-deck > li[data-rank="2"] .popular-rank {
color: #1a1e28;
background: linear-gradient(145deg, #f4f7fb 0%, #c8d2e0 48%, #9eacc0 100%);
border-color: #e8eef6;
box-shadow:
0 0 12px rgba(180, 200, 230, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.popular-deck > li[data-rank="3"] .popular-rank {
color: #1a1008;
background: linear-gradient(145deg, #e8b888 0%, #c87840 48%, #a05a28 100%);
border-color: #e8b070;
box-shadow:
0 0 12px rgba(200, 110, 50, 0.45),
inset 0 1px 0 rgba(255, 220, 180, 0.4);
}
.popular-thumb-wrap {
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.popular-thumb,
.popular-thumb-fallback {
width: 42px;
height: 42px;
border-radius: 11px;
object-fit: contain;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.popular-thumb-fallback {
display: grid;
place-items: center;
font-size: 18px;
}
.popular-thumb-fallback[hidden] { display: none !important; }
.popular-title {
min-width: 0;
font-size: 13.5px;
font-weight: 750;
color: #f5f8ff;
line-height: 1.25;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
}
.popular-price { display: none !important; }
@media (hover: hover) and (pointer: fine) {
.popular-deck.is-dealt > li:hover {
z-index: 20;
transform: translate3d(0, -3px, 0) scale(1.015);
filter: brightness(1.06);
}
.popular-deck.is-dealt > li:hover .popular-item {
border-color: rgba(160, 200, 255, 0.28);
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.popular-deck.is-dealt > li:hover .popular-item::after {
animation: popular-shine-fast 5.5s linear 1;
}
.popular-deck.is-dealt > li[data-rank="1"]:hover .popular-item,
.popular-deck.is-dealt > li[data-rank="2"]:hover .popular-item,
.popular-deck.is-dealt > li[data-rank="3"]:hover .popular-item {
border-color: transparent;
}
}
@keyframes popular-shine-fast {
0% { transform: translateX(-150%); opacity: 0; }
8% { opacity: 1; }
90% { transform: translateX(150%); opacity: 1; }
100% { transform: translateX(150%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.popular-deck > li,
.popular-item,
.popular-rank { transition: none; }
.popular-deck > li {
opacity: 1;
transform: none;
}
.popular-deck > li .popular-rank {
opacity: 1;
transform: none;
}
.popular-item::after,
.popular-top-ring { display: none; }
}
.shop-side-list .price {
color: #7ef0ff;
font-weight: 750;
white-space: nowrap;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.shop-side-list button {
border: none;
background: transparent;
color: #eef5ff;
font: inherit;
font-weight: 600;
text-align: left;
cursor: pointer;
padding: 0;
}
.shop-side-perks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── IT-новости (авто-RSS "Мир"/"Россия" + живой перевод по клику) ──
position+z-index обязательны: #star-canvas — position:fixed
(создаёт свой stacking context) и без этого перекрывает любой
статичный (position:static) контент на странице, как .shop-shell
у каталога — z-index:3 тот же, что и у него. */
.it-news-trigger-wrap {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
max-width: 1512px;
margin: 40px auto 0;
padding: 0 16px;
box-sizing: border-box;
}
.it-news-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 24px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.it-news-trigger:hover {
border-color: var(--border-bright);
transform: translateY(-1px);
}
.it-news-trigger-icon {
width: 17px;
height: 17px;
color: var(--cyan);
flex-shrink: 0;
}
.it-news-title {
font-family: 'DM Sans', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--text);
margin: 0;
}
/* Раньше здесь стоял rgba(255,255,255,0.94) (белый) — было заменено
на var(--text), рассуждая, что в светлой теме и так почти
белый/прозрачный фон у шторки. На практике фон под заголовком —
не белая плашка (у него, в отличие от вкладок ниже, нет своей
var(--surface)-подложки), а прямо небо+облака (та же анимация,
что на главной) — тёмный var(--text) на нём читается заметно
хуже, чем на реально светлой поверхности. По просьбе пользователя
возвращаем белый именно для этого заголовка в светлой теме —
вкладки/крестик ниже не трогаем, у них своя var(--surface)
плашка-подложка, там тёмный текст читается нормально. */
[data-theme="light"] .it-news-title {
color: #fff;
text-shadow: 0 1px 6px rgba(20, 40, 70, 0.35);
}
/* Во время открытой шторки прячем сам каталог сайта (.shop-shell) —
НЕ трогая #star-canvas/#bg-canvas (они снаружи .shop-shell), тем
самым в светлой теме сквозь прозрачный фон шторки видно то же
самое небо+облака, что и на главной, без повторной отрисовки.
.it-news-trigger-wrap (кнопка-триггер) — тоже отдельный элемент
СНАРУЖИ .shop-shell (соседний div, не внутри неё) и в этот список
раньше не попадал: пока шторка (в светлой теме — с прозрачным
фоном) уже открыта, сама кнопка "IT-новости" всё это время
оставалась видимой позади и просвечивала сквозь блюр верхней
панели шторки — баг "кнопку видно". */
body.news-overlay-active .shop-shell,
body.news-overlay-active .shop-footer,
body.news-overlay-active .it-news-trigger-wrap {
visibility: hidden;
}
/* Полноэкранная "шторка" с новостями — по клику на кнопку-триггер
выше заезжает снизу вверх и полностью закрывает интерфейс сайта
(см. openNewsOverlay/closeNewsOverlay в app.js). Вкладки
"Россия"/"По миру" переключают уже загруженный кэш новостей (см.
switchNewsTab) — данные на оба региона запрашиваются заранее
(fetchNewsAll), так что переключение мгновенное, без повторной
загрузки.
visibility переключается с задержкой (transition ... 0s linear
0.4s), а не мгновенно вместе с transform — иначе при закрытии
панель становится invisible ДО того, как доедет анимация вниз, и
обратной анимации не видно вообще. У открытия задержка 0 —
появляется сразу, едет с уже видимым содержимым. */
.it-news-overlay {
position: fixed;
inset: 0;
z-index: 900;
background: var(--bg);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(100%);
/* Длительность/кривая чуть увеличены и смягчены (было 0.4s,
cubic-bezier(.22,.9,.32,1)) — по просьбе "анимацию сделай
плавнее". cubic-bezier(.16,1,.3,1) — мягкое затухание без
пружинного "перехлёста", воспринимается спокойнее. */
transition: transform 0.55s cubic-bezier(.16, 1, .3, 1),
visibility 0s linear 0.55s;
visibility: hidden;
/* GPU-слой заранее, тем же приёмом, что и у остальных модалок
(.modal.lg-sheet выше) — иначе слой под этот fixed-элемент с
5 наложенными backdrop-filter создаётся ПРЯМО в момент
первого открытия, и первые кадры slide-анимации подфризивают,
ожидая эту тяжёлую компоновку/растеризацию (жалоба "чуть
подфризивает при первом открытии"). См. prewarmNewsOverlay в
app.js — она догревает этот слой ещё на простое страницы,
до первого клика по кнопке-триггеру. */
will-change: transform;
}
/* Невидимый прогрев шторки — тот же приём, что .modal-prewarm
у обычных модалок: временно ставим в финальную (открытую)
позицию, но visibility/opacity/pointer-events держат её
полностью незаметной и некликабельной. Один такой проход даёт
браузеру заранее растеризовать 5 слоёв .it-news-blur-layer и
создать compositor-слой — на реальном первом открытии тратиться
уже не на что, едет один дешёвый transform. */
.it-news-overlay.it-news-prewarm {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transition: none !important;
transform: translateY(0) !important;
}
/* В светлой теме у шторки больше нет своего сплошного фона — вместо
этого видно "небо" — тот же #star-canvas, что рисует день/облака
на главной странице (см. body.news-overlay-active .shop-shell
ниже и openNewsOverlay в app.js, где на время открытия шторки
прячется .shop-shell, а не сам канвас — так под шторкой видно
именно живое небо с теми же параметрами, а не его копия). */
[data-theme="light"] .it-news-overlay {
background: transparent;
}
.it-news-overlay.is-open {
transform: translateY(0);
visibility: visible;
transition: transform 0.55s cubic-bezier(.16, 1, .3, 1),
visibility 0s linear 0s;
}
/* Декоративный звёздный фон шторки — мигающие звёзды + пролетающие
кометы, тот же почерк, что и на #star-canvas главной страницы
(см. initNewsStarfield в app.js), но отдельный лёгкий канвас
внутри самой шторки: перекрыть основной #star-canvas сайта было
нельзя (шторка непрозрачная, чтобы полностью скрыть интерфейс
каталога под собой), поэтому здесь свой маленький "космос". */
.it-news-star-canvas {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
display: block;
width: 100%;
height: 100%;
}
.it-news-overlay-header,
.it-news-tabs,
.it-news-overlay-body {
position: relative;
z-index: 1;
}
.it-news-overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
max-width: 1512px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
flex-shrink: 0;
}
/* Заголовок "IT-новости" и вкладки "Россия"/"По миру" — в одну
строку (раньше заголовок и вкладки были отдельными строками одна
под другой — именно это пользователь и просил объединить). */
.it-news-header-left {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
flex-wrap: nowrap;
}
@media (max-width: 480px) {
/* На узких экранах заголовок+вкладки в одну строку не помещаются
без сжатия — возвращаем перенос на вторую строку, чтобы вкладки
не сплющивались. */
.it-news-header-left {
flex-wrap: wrap;
row-gap: 10px;
}
}
.it-news-close {
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 16px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 0.15s ease, background 0.15s ease;
}
.it-news-close:hover {
border-color: var(--border-bright);
transform: rotate(90deg);
}
.it-news-close:active {
transform: rotate(90deg) scale(0.9);
}
/* Вкладки теперь сидят в одной строке с заголовком (см.
.it-news-header-left) — раньше были отдельной строкой со своими
отступами/центрированием, это больше не нужно. */
.it-news-tabs {
display: flex;
gap: 8px;
flex-shrink: 0;
flex-wrap: nowrap;
}
.it-news-tab {
padding: 8px 20px;
border-radius: 999px;
border: 1px solid var(--border);
/* Была сплошная заливка у активной вкладки и полностью
прозрачная (без блюра) у неактивной — просили сделать
заливку обеих вкладок прозрачной со стеклянным блюром вместо
плоского цвета. var(--surface) — тот же полупрозрачный токен,
что и у карточек новостей, так что вкладки выглядят частью
той же "стеклянной" системы. */
background: var(--surface);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--text-dim);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.it-news-tab:hover {
border-color: var(--border-bright);
transform: translateY(-1px);
}
.it-news-tab:active {
transform: translateY(0) scale(0.96);
}
.it-news-tab.is-active {
/* Просили убрать голубую заливку совсем — активная вкладка
отличается только цветом рамки/текста, заливка та же
прозрачно-стеклянная, что и у неактивной (background не
переопределяем, наследуется из .it-news-tab). */
border-color: var(--cyan);
color: var(--cyan);
}
.it-news-overlay-body {
/* Теперь единственный flex-child .it-news-overlay — растягивается
на всю высоту шторки (раньше высоту делили ещё header и tabs,
сидевшие тут же снаружи, см. .it-news-overlay-topbar). Именно
поэтому карточки при скролле реально доходят до самого верха
страницы, а не останавливаются под шапкой. */
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Без этого скролл, дойдя до края списка (а иногда и раньше —
зависит от браузера), "перетекал" на скролл всей страницы
позади шторки (та по-прежнему высокая — .shop-shell просто
visibility:hidden, а не убран из потока) — снаружи это
выглядело как "скролла по новостям нет", хотя список
технически скроллился, просто вместе с фоновой страницей.
Тот же приём уже используется во всех остальных скролл-
модалках сайта. */
overscroll-behavior: contain;
/* Раньше max-width/margin:auto стояли прямо здесь, на самом
скролл-контейнере — на широких экранах это оставляло по
бокам "мёртвые" зоны фона, которые формально лежат ВНЕ
.it-news-overlay-body (у него же и обрезана колонка), и
колесо мыши над ними не скроллило список вообще (баг:
"скролл на фоне не работает"). Теперь скролл-контейнер —
это всегда вся ширина шторки, а сужение и центрирование
самого содержимого переехало в .it-news-overlay-inner —
так что куда бы ни навели курсор внутри шторки, скролл
работает. */
width: 100%;
box-sizing: border-box;
/* Убираем видимый ползунок скролла, сам скролл работает как
обычно (колесо мыши / свайп) — на Firefox и всех WebKit. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.it-news-overlay-body::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.it-news-overlay-inner {
/* padding-top: 0 — иначе верхняя кромка sticky-панели
(.it-news-overlay-topbar, первый ребёнок) "стартовала" бы
ниже реального верха скролл-области, и пара строк пикселей у
самого верха проскакивала бы мимо блюра неразмытой. */
padding: 0 20px 32px;
max-width: 1512px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.it-news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.it-news-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1000px) {
.it-news-grid {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
}
/* Кнопка "Больше новостей" — последний элемент сетки, растягиваем
на все колонки (grid-column: 1 / -1). Прозрачная стеклянная
заливка с блюром — тот же язык, что и у вкладок Россия/По миру
выше, но чуть заметнее (сама кнопка визуально "весит" больше,
чем маленькая вкладка). */
.news-load-more-btn {
/* Была на всю ширину сетки и на var(--surface) целиком — просили
поменьше и заметно прозрачнее. justify-self:center вместо
grid-column:1/-1 растянутой на всю ширину — теперь это узкая
кнопка по центру, не на всю строку. color-mix с transparent —
в 2 раза прозрачнее обычного --surface. */
grid-column: 1 / -1;
justify-self: center;
margin-top: 4px;
padding: 9px 20px;
border-radius: 12px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface) 45%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.news-load-more-btn:hover:not(:disabled) {
border-color: var(--border-bright);
transform: translateY(-2px);
}
.news-load-more-btn:active:not(:disabled) {
transform: translateY(0) scale(0.98);
}
.news-load-more-btn:disabled {
cursor: default;
opacity: 0.6;
}
.news-load-more-btn.is-exhausted {
opacity: 0.45;
}
/* Заголовок+вкладки теперь не отдельная "шапка" над скролл-областью,
а sticky-элемент ВНУТРИ неё же (.it-news-overlay-body) — первый
ребёнок, перед сеткой карточек. За счёт этого карточки при
скролле реально доходят до самого верха страницы и уходят под
панель, а не останавливаются под ней — просьба "чтоб блоки
новостей доходили при скроле до самого верха страницы, и там
уже был наш блюр". У самой панели — полупрозрачный фон +
backdrop-filter: она и есть блюр, который "уже там" — карточки
размываются проходя под ней, а не в отдельной узкой полоске
под вкладками, как было раньше (см. ::after ниже — небольшой
мягкий градиент-хвост у нижнего края панели, чтобы переход к
неразмытым карточкам не был совсем резкой линией). */
/* Настоящий "прогрессивный блюр" (как на Google Labs), а не плоская
полупрозрачная плашка поверх шапки — предыдущая версия красила
область в сплошной серый/белёсый цвет, из-за чего и заголовок, и
фон под ним выглядели тускло и дёшево. У Google Labs фон под
навигацией остаётся ярким/контрастным — просто размывается, и
степень размытия нарастает ближе к самому верху, а не одинакова
по всей полосе. backdrop-filter не умеет плавно менять радиус
внутри одной маски, поэтому эффект набирается несколькими
независимыми слоями (.it-news-blur-layer) с разным blur() и
разной "высотой" градиентной маски — внизу зоны почти нет
размытия, у самого верха слои накладываются и дают сильный
блюр. Никакой заливки цветом — сквозь блюр видно настоящие
цвета того, что под ним (небо/карточки), просто нерезко. */
.it-news-overlay-topbar {
position: sticky;
top: 0;
z-index: 20;
/* Было "contain: layout paint" как попытка оптимизации скролла —
похоже, именно это в сочетании с 5 наложенными backdrop-filter
на широком элементе вызывало жёсткий видимый шов посередине
блюра (contain создаёт новый containing/paint-контекст, из-за
которого backdrop-filter у широких sticky-элементов иногда
рисуется по кускам с нестыкующимся швом на границе). Убрал —
шов был важнее сомнительного выигрыша в производительности. */
}
.it-news-blur-layer {
position: absolute;
/* Раньше пытались "дотянуть" блюр до краёв экрана отступами
left/right: -80px — этого хватало только пока родитель
(.it-news-overlay-topbar) сам был во всю ширину экрана. Но
топбар лежит внутри .it-news-overlay-inner, а у той стоит
max-width:1512px + margin:0 auto (центрированная колонка) —
на широких мониторах топбар УЖЕ уже экрана, и -80px от его
же (узкого) края всё равно не дотягивались до истинного края
вьюпорта. Получалась чёткая граница ровно там, где кончается
колонка ±80px — на тёмном звёздном фоне (в отличие от
гладкого светлого неба) эта граница была отчётливо видна:
"серое" (заблюренное небо) резко переходило в "тёмно-синее"
(небо без блюра). Фикс — стандартный приём "выхода за
пределы центрированного контейнера": left:50% + translateX
считают центр от собственной ширины родителя, а раз сам
родитель тоже отцентрирован в вьюпорте, центр родителя
совпадает с центром экрана — и слой шириной 100vw точно
попадает в истинные края экрана независимо от ширины и
отступов родительской колонки. */
left: 50%;
right: auto;
width: 100vw;
transform: translateX(-50%);
top: 0;
/* Высота теперь не фиксированная, а CSS-переменная, которую
двигает скролл (см. _bindNewsBlurScroll в app.js) — на старте
маленькая (не залезает в первую строку карточек), при скролле
плавно растёт (даёт запас под hover-приподнятые карточки), а
при возврате к началу списка снова сжимается. Fallback 90px —
на случай, если JS почему-то не успел проставить переменную. */
height: var(--news-blur-h, 90px);
transition: height 0.15s linear;
pointer-events: none;
z-index: 0;
}
.it-news-blur-layer:nth-child(1) {
/* Радиусы блюра увеличены (было 2/5/9/14/20) — просили смягчить
видимую границу блюра: чем сильнее размытие, тем больше
соседних пикселей смешивается на стыке карточки и фона под
ней, и тем менее "жёстким" выглядит этот стык. */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 88%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 88%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
mask-composite: intersect;
}
.it-news-blur-layer:nth-child(2) {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 42%, transparent 74%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to bottom, black 0%, black 42%, transparent 74%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
mask-composite: intersect;
}
.it-news-blur-layer:nth-child(3) {
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 60%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 60%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
mask-composite: intersect;
}
.it-news-blur-layer:nth-child(4) {
/* Просили чуть ослабить самую сильную точку блюра (было 20/28px
у 4-го и 5-го слоя) — снизил обе верхние ступени. */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 48%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 48%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
mask-composite: intersect;
}
.it-news-blur-layer:nth-child(5) {
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 8%, transparent 34%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to bottom, black 0%, black 8%, transparent 34%),
linear-gradient(to right, transparent 0, black 4px, black calc(100% - 4px), transparent 100%);
mask-composite: intersect;
}
.news-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-sizing: border-box;
/* Появление карточек с небольшим сдвигом снизу-вверх, по одной
"лесенкой" — задержка берётся из --i (порядковый номер
карточки), см. newsCardHtml в app.js. */
opacity: 0;
animation: news-card-in 0.5s cubic-bezier(.22, .9, .32, 1) forwards;
animation-delay: calc(var(--i, 0) * 55ms);
/* transform у hover был 0.22s — заметно резко, просили плавнее и
медленнее. 0.42s + более "мягкий" ease-out (плавный старт,
мягкое торможение в конце, без пружинного перехлёста). */
transition: transform 0.42s cubic-bezier(.16, .84, .32, 1),
box-shadow 0.42s ease, border-color 0.3s ease;
}
.news-card:hover {
/* Было scale(1.018) — на фоне того, что раньше при наведении
ещё и облака на фоне уезжали вслед за курсором (см. фикс
syncModalOpenState в app.js), увеличение карточки терялось.
Сделал заметнее, плюс чуть приподнимаем z-index, чтобы тень
ложилась поверх соседних карточек, а не под них. */
transform: translateY(-6px) scale(1.035);
border-color: var(--border-bright);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
position: relative;
z-index: 2;
}
@keyframes news-card-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.news-card-media {
width: 100%;
aspect-ratio: 16 / 9;
/* min-height — страховка для встроенных браузеров (например,
старые WebView в Telegram Mini App), где CSS aspect-ratio
может не поддерживаться: без неё блок схлопывается в 0
высоты, пока картинка не загрузится. */
min-height: 170px;
background: #0b1220;
overflow: hidden;
}
.news-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-card-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.news-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.news-card-source {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--cyan);
text-transform: uppercase;
}
.news-card-date {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: var(--text-muted);
white-space: nowrap;
}
.news-card-title {
font-family: 'DM Sans', sans-serif;
font-size: 19px;
font-weight: 700;
line-height: 1.35;
color: var(--text);
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-summary {
font-family: 'DM Sans', sans-serif;
font-size: 15.5px;
line-height: 1.55;
color: var(--text-dim);
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
flex-wrap: wrap;
}
/* ── Моушн-дизайн кнопок карточки: лёгкий подъём + пружинка на hover,
«вжатие» на active — единый почерк для всех 4 кнопок. ── */
.news-translate-btn,
.news-readmore-btn,
.news-brief-btn,
.news-share-btn {
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.15s ease, color 0.15s ease, filter 0.15s ease,
box-shadow 0.18s ease;
will-change: transform;
}
.news-translate-btn:hover,
.news-readmore-btn:hover,
.news-brief-btn:hover,
.news-share-btn:hover {
transform: translateY(-2px) scale(1.04);
}
.news-translate-btn:active,
.news-readmore-btn:active,
.news-brief-btn:active,
.news-share-btn:active {
transform: translateY(0) scale(0.96);
}
.news-translate-btn {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--cyan);
background: var(--cyan-dim);
border: 1px solid var(--border-bright);
border-radius: 100px;
padding: 7px 14px;
cursor: pointer;
}
.news-translate-btn:hover {
background: var(--cyan-glow);
}
.news-translate-btn:disabled {
opacity: 0.6;
cursor: default;
transform: none !important;
}
.news-readmore-btn {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
color: #05070f;
background: var(--cyan);
border: 1px solid var(--cyan);
border-radius: 100px;
padding: 7px 14px;
text-decoration: none;
white-space: nowrap;
}
.news-readmore-btn:hover {
filter: brightness(1.08);
box-shadow: 0 6px 18px rgba(0, 220, 255, 0.25);
}
[data-theme="light"] .news-readmore-btn {
color: #fff;
}
.news-brief-btn {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--text-dim);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
padding: 7px 14px;
cursor: pointer;
}
.news-brief-btn:hover {
color: var(--text);
background: var(--surface-hover);
}
/* Кнопка «Поделиться» — иконка-репост (SVG), без текста, по просьбе. */
.news-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
color: var(--text-dim);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
cursor: pointer;
flex-shrink: 0;
}
.news-share-btn:hover {
color: var(--cyan);
background: var(--surface-hover);
border-color: var(--border-bright);
}
.news-share-btn svg {
width: 16px;
height: 16px;
}
/* ── Модалки «Кратко» и «Поделиться» (создаются в DOM лениво из app.js) ── */
.news-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 2200;
}
.news-modal-overlay.active {
display: block;
}
.news-modal {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(480px, calc(100vw - 32px));
max-height: min(72vh, 620px);
overflow-y: auto;
/* Было 0.94 — почти сплошная тёмная плашка. Снижено до 0.7, чтобы
фон за модалкой (в т.ч. небо/звёзды шторки) проступал сильнее —
blur+saturate ниже по-прежнему держат текст читаемым. */
background: rgba(8, 14, 30, 0.7);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 22px;
box-sizing: border-box;
z-index: 2201;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.news-modal.active {
display: block;
}
/* «Поделиться» — небольшая менюшка у кнопки (как нативный share-sheet
в Windows/браузере), а не большая модалка на весь экран: оверлей
под ней прозрачный (только чтобы ловить клик мимо), сама менюшка
узкая и позиционируется рядом с кнопкой из JS (см. openNewsShare). */
#news-share-overlay {
background: transparent;
}
.news-share-modal {
display: none;
position: fixed;
width: 220px;
max-width: calc(100vw - 24px);
background: rgba(16, 21, 34, 0.98);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 14px;
padding: 6px;
box-sizing: border-box;
z-index: 2201;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.news-share-modal.active {
display: block;
}
.news-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 100px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
}
.news-modal-close:hover {
transform: rotate(90deg) scale(1.08);
background: var(--surface-hover);
}
.news-modal-close:active {
transform: rotate(90deg) scale(0.92);
}
/* Заголовок/дата/описание в этих модалках сидят прямо на фиксированном
тёмном фоне (модалка НЕ подстраивается под светлую тему — см.
.news-modal выше), поэтому цвета здесь захардкожены под тёмную
палитру, а не через var(--text)/var(--text-dim), которые в
светлой теме становятся тёмными и станут нечитаемыми. */
.news-modal-source {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: #00dcff;
text-transform: uppercase;
margin-bottom: 8px;
padding-right: 40px;
}
.news-modal-title {
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 800;
color: #f0f4ff;
line-height: 1.35;
margin: 0 0 8px;
padding-right: 20px;
}
.news-modal-date {
font-family: 'DM Sans', sans-serif;
font-size: 12.5px;
color: #6b7a99;
margin-bottom: 16px;
}
.news-modal-summary {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
line-height: 1.65;
color: #b8c2db;
margin: 0 0 20px;
white-space: pre-line;
}
.news-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.news-share-options {
display: flex;
flex-direction: column;
gap: 1px;
}
.news-share-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 600;
color: #eef2fb;
background: transparent;
border: none;
border-radius: 9px;
padding: 10px 11px;
text-decoration: none;
text-align: left;
cursor: pointer;
box-sizing: border-box;
transition: background 0.12s ease;
}
.news-share-option:hover {
background: rgba(255, 255, 255, 0.08);
}
.news-share-option:active {
background: rgba(255, 255, 255, 0.14);
}
.news-share-option svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: #9fb0d0;
}
.news-empty {
padding: 20px 10px;
text-align: center;
color: var(--text-muted);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
}
.news-skeleton {
height: 260px;
border-radius: 16px;
background: linear-gradient(90deg, var(--surface) 0%, var(--surface-hover) 50%, var(--surface) 100%);
background-size: 200% 100%;
animation: newsSkeletonShine 1.4s ease-in-out infinite;
}
@keyframes newsSkeletonShine {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* "Преимущества" переехали из левого сайдбара в подвал страницы —
статичный маркетинговый блок, который не меняется, не должен
занимать вертикаль колонки. Сами .perk-card ниже не трогаем —
меняется только контейнер (было: карточка в сайдбаре, стало:
полоса на всю ширину под разделителем). */
.shop-footer {
max-width: 1512px;
margin: 32px auto 0;
padding: 20px 16px 6px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
box-sizing: border-box;
}
[data-theme="light"] .shop-footer {
border-top-color: rgba(20, 32, 46, 0.12);
}
.shop-footer-perks {
gap: 10px;
}
@media (min-width: 1180px) {
.shop-footer-perks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
}
@media (max-width: 1179px) {
.shop-footer {
max-width: 900px;
margin-top: 14px;
padding: 16px 12px 4px;
}
.shop-footer-perks .perk-card {
grid-template-columns: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
}
.shop-footer-perks .perk-copy {
text-align: center;
}
}
.perk-card {
--i: 0;
position: relative;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
gap: 11px;
padding: 10px 12px 10px 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.07);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.perk-ico {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
flex-shrink: 0;
position: relative;
background: rgba(255, 210, 74, 0.12);
border: 1px solid rgba(255, 210, 74, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 4px 12px rgba(0, 0, 0, 0.18);
color: #ffd24a;
}
.perk-ico svg {
width: 18px;
height: 18px;
display: block;
transform-origin: 50% 50%;
will-change: transform, opacity, filter;
}
.shop-side-perks.is-live .perk-card[data-perk="flash"] .perk-ico svg {
animation: perk-svg-flash 2.4s ease-in-out infinite;
}
.shop-side-perks.is-live .perk-card[data-perk="shield"] .perk-ico svg {
animation: perk-svg-shield 3.2s ease-in-out infinite;
}
.shop-side-perks.is-live .perk-card[data-perk="star"] .perk-ico svg {
animation: perk-svg-star 2.8s ease-in-out infinite;
}
.shop-side-perks.is-live .perk-card[data-perk="chat"] .perk-ico svg {
animation: perk-svg-chat 2.6s ease-in-out infinite;
}
@keyframes perk-svg-flash {
0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
18% { transform: scale(1.12) rotate(-6deg); filter: brightness(1.25); }
36% { transform: scale(0.96) rotate(4deg); filter: brightness(1.05); }
54% { transform: scale(1.08) rotate(-2deg); filter: brightness(1.18); }
72% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}
@keyframes perk-svg-shield {
0%, 100% { transform: translateY(0) scale(1); }
40% { transform: translateY(-2px) scale(1.06); }
70% { transform: translateY(0) scale(1.02); }
}
@keyframes perk-svg-star {
0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
25% { transform: rotate(12deg) scale(1.1); filter: brightness(1.2); }
50% { transform: rotate(-8deg) scale(0.96); filter: brightness(1.05); }
75% { transform: rotate(6deg) scale(1.06); filter: brightness(1.15); }
}
@keyframes perk-svg-chat {
0%, 100% { transform: translateY(0) rotate(0deg); }
30% { transform: translateY(-2px) rotate(-4deg); }
55% { transform: translateY(1px) rotate(3deg); }
80% { transform: translateY(-1px) rotate(-1deg); }
}
.perk-card[data-perk="flash"] .perk-ico {
color: #ffd24a;
background: rgba(255, 200, 60, 0.14);
border-color: rgba(255, 190, 50, 0.28);
}
.perk-card[data-perk="shield"] .perk-ico {
color: #7ef0ff;
background: rgba(0, 220, 255, 0.1);
border-color: rgba(0, 220, 255, 0.22);
}
.perk-card[data-perk="star"] .perk-ico {
color: #c4b5ff;
background: rgba(140, 110, 255, 0.12);
border-color: rgba(150, 120, 255, 0.24);
}
.perk-card[data-perk="chat"] .perk-ico {
color: #8dffb0;
background: rgba(60, 220, 140, 0.1);
border-color: rgba(80, 220, 150, 0.22);
}
.perk-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.perk-text {
font-size: 12.5px;
font-weight: 700;
color: rgba(236, 242, 255, 0.95);
line-height: 1.25;
letter-spacing: 0.01em;
}
.perk-sub {
font-size: 10.5px;
font-weight: 550;
color: rgba(180, 198, 225, 0.62);
line-height: 1.25;
}
@media (hover: hover) and (pointer: fine) {
.shop-side-perks.is-live .perk-card:hover .perk-ico svg {
animation-duration: 1.4s;
}
}
@media (prefers-reduced-motion: reduce) {
.shop-side-block--perks::before { animation: none !important; }
.perk-ico svg { animation: none !important; }
}
/* Светлая тема: боковые блоки как карточки товаров */
[data-theme="light"] .shop-side-block,
[data-theme="light"] .shop-side-block--perks {
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(255, 255, 255, 0.88);
box-shadow:
0 8px 24px rgba(31, 38, 135, 0.10),
0 2px 8px rgba(31, 38, 135, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
/* «Популярное сегодня» — прозрачный фон (без белой заливки), но с
небольшим блюром того, что позади (по просьбе пользователя —
совсем без блюра список плохо читался поверх неба). */
[data-theme="light"] .shop-side-block--popular {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .shop-side-block--perks::before {
background:
radial-gradient(circle at 18% 28%, rgba(255, 170, 60, 0.14), transparent 44%),
radial-gradient(circle at 82% 72%, rgba(0, 140, 200, 0.1), transparent 46%);
}
[data-theme="light"] .shop-side-block h3 {
color: var(--text);
}
/* «Популярное сегодня» — сам фон блока уже прозрачный, поэтому
заголовок тоже переводим в белый чуть прозрачный (по просьбе
пользователя), а не оставляем тёмный текст. Блок --perks эта
правка не задевает — у него фон остался непрозрачным. */
[data-theme="light"] .shop-side-block--popular h3 {
color: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .shop-side-head-tag {
color: #0088aa;
border-color: rgba(0, 136, 170, 0.28);
background: rgba(0, 136, 170, 0.08);
}
/* светлая тема: прозрачный фон, как у кнопки Pro — по просьбе
пользователя. Тонкая рамка/тень оставлены (не запрошено убирать) —
без них пронумерованный список сливался бы с небом до
нечитаемости. Отдельные золотой/серебряный/бронзовый оттенки
фона для топ-3 убраны вместе с общим фоном — место всё ещё
понятно по номеру ранга рядом с карточкой. */
[data-theme="light"] .popular-deck > li .popular-item {
background: transparent;
border-color: rgba(15, 25, 50, 0.14);
color: var(--text);
box-shadow: 0 4px 14px rgba(31, 38, 135, 0.08);
}
[data-theme="light"] .popular-deck > li[data-rank="1"] .popular-item {
border-color: rgba(200, 130, 30, 0.3);
background: transparent;
box-shadow: 0 4px 14px rgba(200, 130, 30, 0.1);
}
[data-theme="light"] .popular-deck > li[data-rank="2"] .popular-item {
border-color: rgba(90, 120, 160, 0.3);
background: transparent;
box-shadow: 0 4px 14px rgba(90, 120, 160, 0.1);
}
[data-theme="light"] .popular-deck > li[data-rank="3"] .popular-item {
border-color: rgba(170, 100, 50, 0.3);
background: transparent;
box-shadow: 0 4px 14px rgba(170, 100, 50, 0.1);
}
[data-theme="light"] .popular-deck > li .popular-item::after {
background: linear-gradient(
105deg,
transparent 18%,
rgba(255, 255, 255, 0.35) 36%,
rgba(255, 255, 255, 0.95) 50%,
rgba(255, 255, 255, 0.35) 64%,
transparent 82%
);
mix-blend-mode: soft-light;
}
[data-theme="light"] .popular-rank {
color: #4a5870;
background: rgba(255, 255, 255, 0.98);
border-color: rgba(120, 150, 190, 0.45);
box-shadow: 0 2px 8px rgba(31, 38, 135, 0.12);
}
[data-theme="light"] .popular-deck > li[data-rank="1"] .popular-rank {
color: #7a4a00;
background: linear-gradient(145deg, #fff6d4 0%, #ffd060 52%, #f0a020 100%);
border-color: rgba(230, 150, 40, 0.8);
box-shadow:
0 0 10px rgba(255, 170, 50, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .popular-deck > li[data-rank="2"] .popular-rank {
color: #3a4558;
background: linear-gradient(145deg, #ffffff 0%, #e4ebf4 52%, #c5d0e0 100%);
border-color: rgba(140, 160, 185, 0.8);
box-shadow:
0 0 10px rgba(140, 165, 200, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .popular-deck > li[data-rank="3"] .popular-rank {
color: #6a3a12;
background: linear-gradient(145deg, #f8e4d0 0%, #e0b080 52%, #c87840 100%);
border-color: rgba(180, 110, 55, 0.75);
box-shadow:
0 0 10px rgba(200, 120, 60, 0.32),
inset 0 1px 0 rgba(255, 230, 200, 0.55);
}
[data-theme="light"] .popular-deck > li .popular-title {
color: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .popular-thumb,
[data-theme="light"] .popular-thumb-fallback {
background: rgba(15, 25, 50, 0.05);
border-color: rgba(15, 25, 50, 0.08);
}
[data-theme="light"] .shop-side-list button {
color: var(--text);
}
[data-theme="light"] .perk-card {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62));
border-color: rgba(15, 25, 50, 0.08);
box-shadow:
0 4px 12px rgba(31, 38, 135, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .perk-card[data-perk="flash"] .perk-ico {
color: #c07800;
background: rgba(255, 180, 50, 0.18);
border-color: rgba(230, 140, 30, 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 3px 10px rgba(200, 130, 30, 0.12);
}
[data-theme="light"] .perk-card[data-perk="shield"] .perk-ico {
color: #007a96;
background: rgba(0, 150, 180, 0.12);
border-color: rgba(0, 136, 170, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 3px 10px rgba(0, 120, 160, 0.1);
}
[data-theme="light"] .perk-card[data-perk="star"] .perk-ico {
color: #5a48b8;
background: rgba(110, 90, 220, 0.12);
border-color: rgba(99, 80, 212, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 3px 10px rgba(90, 70, 200, 0.1);
}
[data-theme="light"] .perk-card[data-perk="chat"] .perk-ico {
color: #0a8a4a;
background: rgba(0, 170, 90, 0.12);
border-color: rgba(0, 160, 80, 0.26);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 3px 10px rgba(0, 140, 70, 0.1);
}
[data-theme="light"] .perk-text {
color: var(--text);
}
[data-theme="light"] .perk-sub {
color: var(--text-muted);
}
@media (hover: hover) and (pointer: fine) {
[data-theme="light"] .popular-deck.is-dealt > li:hover .popular-item {
border-color: rgba(15, 25, 50, 0.14);
box-shadow:
0 12px 26px rgba(31, 38, 135, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
filter: none;
}
[data-theme="light"] .popular-deck.is-dealt > li[data-rank="1"]:hover .popular-item,
[data-theme="light"] .popular-deck.is-dealt > li[data-rank="2"]:hover .popular-item,
[data-theme="light"] .popular-deck.is-dealt > li[data-rank="3"]:hover .popular-item {
border-color: transparent;
}
}
/* Это лого реально видно на широких экранах (боковая панель) —
именно его тёмный текст пользователь и просил перекрасить в
белый чуть прозрачный (шапка .top-header на этой ширине скрыта). */
[data-theme="light"] .shop-side-brand .logo-text {
color: rgba(255, 255, 255, 0.94);
}
[data-theme="light"] .shop-side-brand .logo-text em {
color: rgba(255, 255, 255, 0.94);
}
[data-theme="light"] .site-promo-card {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.92);
box-shadow:
0 12px 28px rgba(31, 38, 135, 0.12),
0 0 24px rgba(255, 150, 50, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .site-promo-card::before {
background: radial-gradient(ellipse at center, rgba(255, 160, 60, 0.22) 0%, transparent 70%);
}
[data-theme="light"] .site-promo-kind {
color: #e67a12;
text-shadow:
0 0 8px rgba(255, 160, 60, 0.45),
0 0 16px rgba(255, 140, 40, 0.25);
}
[data-theme="light"] .site-promo-title { color: var(--text); }
[data-theme="light"] .site-promo-sub { color: var(--text-muted); }
[data-theme="light"] .site-promo-offer {
background: rgba(20, 40, 80, 0.08);
border: 1px solid rgba(60, 120, 220, 0.28);
box-shadow: none;
}
[data-theme="light"] .site-promo-offer-deal-skew {
box-shadow:
0 0 8px rgba(255, 160, 40, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .site-promo-offer-stars {
background: rgba(255, 255, 255, 0.82);
border: none;
border-left: 1px solid rgba(60, 120, 220, 0.22);
color: #2a5f9e;
box-shadow: none;
}
[data-theme="light"] .site-promo-timer-label {
color: rgba(40, 60, 90, 0.82);
text-shadow: none;
}
[data-theme="light"] .site-promo-timer span[data-h],
[data-theme="light"] .site-promo-timer span[data-m],
[data-theme="light"] .site-promo-timer span[data-s] {
background: rgba(255, 255, 255, 0.82);
color: var(--text);
border-color: rgba(60, 130, 255, 0.3);
box-shadow: 0 4px 12px rgba(31, 38, 135, 0.08);
text-shadow: none;
}
[data-theme="light"] .site-promo-timer span.is-tick { color: #2a6fd6; }
[data-theme="light"] .site-promo-timer-sep {
color: #3d8cff;
text-shadow: 0 0 8px rgba(80, 160, 255, 0.45);
}
[data-theme="light"] .site-promo-logo {
mix-blend-mode: normal;
filter: drop-shadow(0 2px 6px rgba(31, 38, 135, 0.12));
}
[data-theme="light"] .site-promo-cta {
box-shadow:
0 10px 26px rgba(255, 140, 40, 0.38),
0 2px 8px rgba(31, 38, 135, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Светлая тема для акцентов по типу акции (.site-promo-card--month/--day) */
[data-theme="light"] .site-promo-card--month {
box-shadow:
0 12px 28px rgba(90, 40, 180, 0.14),
0 0 24px rgba(150, 90, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .site-promo-card--month::before {
background: radial-gradient(ellipse at center, rgba(150, 90, 255, 0.2) 0%, transparent 70%);
}
[data-theme="light"] .site-promo-card--month .site-promo-kind {
color: #7c3fe0;
text-shadow: 0 0 8px rgba(150, 90, 255, 0.35), 0 0 16px rgba(130, 70, 255, 0.2);
}
[data-theme="light"] .site-promo-card--month .site-promo-offer {
background: rgba(60, 30, 90, 0.06);
border-color: rgba(130, 90, 220, 0.3);
}
[data-theme="light"] .site-promo-card--month .site-promo-cta {
box-shadow:
0 10px 26px rgba(130, 80, 255, 0.32),
0 2px 8px rgba(31, 38, 135, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .site-promo-card--day {
box-shadow:
0 12px 28px rgba(20, 110, 180, 0.14),
0 0 24px rgba(50, 190, 255, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .site-promo-card--day::before {
background: radial-gradient(ellipse at center, rgba(50, 190, 255, 0.22) 0%, transparent 70%);
}
[data-theme="light"] .site-promo-card--day .site-promo-kind {
color: #0f8fd6;
text-shadow: 0 0 8px rgba(50, 190, 255, 0.35), 0 0 16px rgba(30, 160, 255, 0.2);
}
[data-theme="light"] .site-promo-card--day .site-promo-offer {
background: rgba(10, 60, 100, 0.06);
border-color: rgba(50, 160, 220, 0.3);
}
[data-theme="light"] .site-promo-card--day .site-promo-cta {
box-shadow:
0 10px 26px rgba(30, 160, 255, 0.32),
0 2px 8px rgba(31, 38, 135, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Светлая тема — новый блок акций (hero-карточка + компактные строки,
общий класс для акций дня/недели/месяца — акцентный цвет меняют
модификаторы --day/--month, блюр общий для всех). Фон прозрачный
(по просьбе пользователя), небольшой блюр — как у «Популярное
сегодня» — для читаемости поверх неба. */
[data-theme="light"] .site-promo-hero {
background: transparent;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.92);
box-shadow:
0 12px 28px rgba(31, 38, 135, 0.12),
0 0 24px rgba(255, 150, 50, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .site-promo-hero::before {
background: radial-gradient(ellipse 55% 42% at 50% 60%, rgba(255, 160, 60, 0.22) 0%, transparent 72%);
}
[data-theme="light"] .site-promo-hero-kind {
color: #e67a12;
text-shadow:
0 0 8px rgba(255, 160, 60, 0.45),
0 0 16px rgba(255, 140, 40, 0.25);
}
[data-theme="light"] .site-promo-hero-timer {
background: rgba(255, 255, 255, 0.82);
color: var(--text);
border-color: rgba(255, 170, 60, 0.35);
box-shadow: 0 4px 12px rgba(31, 38, 135, 0.08);
}
[data-theme="light"] .site-promo-hero-timer.is-tick { color: #e67a12; }
[data-theme="light"] .site-promo-hero-logo { filter: drop-shadow(0 2px 6px rgba(31, 38, 135, 0.14)); }
/* Название товара — белое чуть прозрачное (по просьбе пользователя) */
[data-theme="light"] .site-promo-hero-title { color: rgba(255, 255, 255, 0.94); }
[data-theme="light"] .site-promo-hero-price { color: var(--text-muted); }
[data-theme="light"] .site-promo-hero-price s { color: rgba(90, 90, 100, 0.5); }
[data-theme="light"] .site-promo-hero-price b { color: #c8760f; }
/* box-shadow/border-color тут не переопределяем — их постоянно
переписывает анимация свечения контура (see site-promo-hero-cta-glow
и её day/month варианты), она одинаковая в обеих темах. */
[data-theme="light"] .site-promo-hero-cta {
background: rgba(20, 40, 80, 0.06);
}
/* Текст кнопки "Купить сейчас" — белый чуть прозрачный (по просьбе
пользователя) */
[data-theme="light"] .site-promo-hero-cta .label {
color: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .site-promo-hero--day {
box-shadow:
0 12px 28px rgba(20, 110, 180, 0.14),
0 0 24px rgba(50, 190, 255, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .site-promo-hero--day::before {
background: radial-gradient(ellipse 55% 42% at 50% 60%, rgba(50, 190, 255, 0.22) 0%, transparent 72%);
}
[data-theme="light"] .site-promo-hero--day .site-promo-hero-kind {
color: #0f8fd6;
text-shadow: 0 0 8px rgba(50, 190, 255, 0.35), 0 0 16px rgba(30, 160, 255, 0.2);
}
[data-theme="light"] .site-promo-hero--day .site-promo-hero-timer { border-color: rgba(50, 160, 220, 0.3); }
[data-theme="light"] .site-promo-hero--day .site-promo-hero-price b { color: #0f8fd6; }
[data-theme="light"] .site-promo-hero--month {
box-shadow:
0 12px 28px rgba(90, 40, 180, 0.14),
0 0 24px rgba(150, 90, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .site-promo-hero--month::before {
background: radial-gradient(ellipse 55% 42% at 50% 60%, rgba(150, 90, 255, 0.2) 0%, transparent 72%);
}
[data-theme="light"] .site-promo-hero--month .site-promo-hero-kind {
color: #7c3fe0;
text-shadow: 0 0 8px rgba(150, 90, 255, 0.35), 0 0 16px rgba(130, 70, 255, 0.2);
}
[data-theme="light"] .site-promo-hero--month .site-promo-hero-timer { border-color: rgba(130, 90, 220, 0.3); }
[data-theme="light"] .site-promo-hero--month .site-promo-hero-price b { color: #7c3fe0; }
[data-theme="light"] .site-promo-row {
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .site-promo-row:hover {
border-color: rgba(31, 38, 135, 0.14);
background: rgba(255, 255, 255, 0.82);
}
[data-theme="light"] .site-promo-row-logo { filter: drop-shadow(0 2px 6px rgba(31, 38, 135, 0.1)); }
[data-theme="light"] .site-promo-row-kind { color: #e67a12; }
[data-theme="light"] .site-promo-row-title { color: var(--text); }
[data-theme="light"] .site-promo-row-badge { color: #c8760f; }
[data-theme="light"] .site-promo-row-arrow { color: rgba(31, 38, 135, 0.3); }
[data-theme="light"] .site-promo-row--day .site-promo-row-kind { color: #0f8fd6; }
[data-theme="light"] .site-promo-row--month .site-promo-row-kind { color: #7c3fe0; }
[data-theme="light"] .cart-item-promo { color: #8a4b00; }
/* Телефон / планшет: боковые блоки видны, столбиком под основным контентом */
@media (max-width: 1179px) {
.shop-shell {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 12px 28px;
box-sizing: border-box;
}
.shop-side {
display: block;
width: 100%;
position: relative;
z-index: 5;
}
.shop-side-inner {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
box-sizing: border-box;
padding-top: 0;
}
.shop-side-brand {
display: none !important;
}
.shop-shell > .app-container {
order: 1;
width: 100%;
max-width: none;
}
.shop-side--right {
order: 2;
}
.shop-side--left {
order: 3;
}
#site-promos-rail {
width: 100%;
max-width: none;
margin-top: 4px;
}
.shop-side-block {
margin-bottom: 0;
}
.site-promo-card + .site-promo-card {
margin-top: 14px;
}
}
@media (min-width: 1180px) {
.shop-shell {
--shop-side-w: 270px;
--shop-side-w-left: 292px;
--shop-gap: 18px;
display: grid;
grid-template-columns: var(--shop-side-w-left) minmax(0, 900px) var(--shop-side-w);
gap: var(--shop-gap);
max-width: 1512px;
width: 100%;
margin: 0 auto;
padding: 12px 16px 24px;
align-items: start;
box-sizing: border-box;
overflow: visible;
}
.shop-shell > .app-container {
max-width: none;
width: 100%;
margin: 0;
min-width: 0;
overflow: visible;
/* выше .shop-side — иначе корзина/профиль под правой колонкой и не кликаются (особенно при зуме) */
position: relative;
z-index: 20;
}
/* Боковые блоки скроллятся вместе со страницей */
.shop-side {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
align-self: start;
z-index: 5;
}
/* правая колонка не перехватывает клики по корзине/профилю, наложенным поверх.
pointer-events НЕ на .shop-side-inner — иначе paddingTop «Акции дня» ест клики */
.shop-side--right {
pointer-events: none;
}
.shop-side--right .shop-side-block,
.shop-side--right a,
.shop-side--right button,
.shop-side--right .site-promo-card,
.shop-side--right .site-promo-cta,
.shop-side--right .site-promo-hero,
.shop-side--right .site-promo-hero-cta,
.shop-side--right .site-promo-row {
pointer-events: auto;
}
.shop-side-inner {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.shop-side--left .shop-side-inner {
padding-top: 12px;
}
.shop-side--left .shop-side-block--perks {
margin-top: 0;
/* без transition — иначе при зуме «плывёт» */
}
.shop-side--left .shop-side-brand {
margin-bottom: 10px;
}
.shop-side--right .shop-side-inner {
padding-top: 0;
}
.shop-side-brand {
display: block;
}
.top-header .logo {
visibility: hidden;
pointer-events: none;
}
.shop-side--right {
min-width: 0;
pointer-events: none;
}
.shop-side--right .shop-side-block,
.shop-side--right a,
.shop-side--right button,
.shop-side--right .site-promo-card,
.shop-side--right .site-promo-cta,
.shop-side--right .site-promo-hero,
.shop-side--right .site-promo-hero-cta,
.shop-side--right .site-promo-row {
pointer-events: auto;
}
#site-promos-rail {
margin-top: 0;
width: 100%;
max-width: none;
overflow: visible;
}
/* профиль/корзина: правый край = правый край «Акции дня» */
.top-header {
position: relative;
overflow: visible;
z-index: 30;
}
#auth-section {
position: absolute;
top: 0;
bottom: 0;
right: calc(-1 * (var(--shop-side-w) + var(--shop-gap)));
/* без translateY — transform ломает hit-area кнопки при browser zoom */
transform: none;
display: flex;
align-items: center;
z-index: 40;
pointer-events: auto;
}
#category-filter {
column-gap: 5px;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
max-width: 100%;
overflow: visible;
}
.cat-btn-inner {
padding: 7px 10px;
font-size: 11.5px;
}
}
.pill-btn, .qty-btn, .close-btn, .support-btn, .add-btn, .theme-toggle {
transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease, opacity 0.1s ease;
}
.pill-btn:active, .qty-btn:active, .checkout-btn:active, .close-btn:active, .support-btn:active, .add-btn:active, .item-card:active, .theme-toggle:active {
transform: scale(0.94) !important;
box-shadow: 0 0 20px var(--cyan-glow) !important;
border-color: var(--cyan) !important;
}
.scrollable-container { /* Замени на класс твоего списка товаров/корзины */
-webkit-overflow-scrolling: touch; /* Включает инерционный плавный скролл на iOS */
overscroll-behavior: contain; /* Запрещает странице "пружинить" за пределами списка */
}
.top-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 10px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-text { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.logo-text em { font-style: normal; color: var(--cyan); }
/* Белый чуть прозрачный текст лого на светлой теме (по просьбе
пользователя) — тёмный текст плохо читался поверх неба.
Не задевает лого в боковой панели (.shop-side-brand .logo-text) —
там своё, более специфичное правило ниже. */
[data-theme="light"] .logo-text { color: rgba(255, 255, 255, 0.94); }
.profile-btn {
position: relative;
height: 40px;
padding: 0;
border: none;
background: transparent;
border-radius: 999px;
cursor: pointer;
overflow: visible;
display: inline-flex;
align-items: center;
/* Просили чуть опустить, чтобы визуально совпадало с кнопкой
корзины (#cart-overlay) в этом же ряду. */
margin-top: 3px;
transform-origin: right center;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
outline: none;
box-shadow: none;
}
.profile-gemini-ring {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 0.7s ease;
overflow: visible;
}
.profile-btn.premium-active .profile-gemini-ring {
opacity: 1;
}
.profile-btn.premium-active .profile-track {
border-color: transparent;
box-shadow: none;
}
.profile-btn:active {
background: transparent !important;
box-shadow: none !important;
}
.profile-btn:active .profile-track-inner {
transform: scale(0.96);
}
.profile-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.profile-track {
position: relative;
z-index: 1;
height: 40px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
overflow: hidden;
transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}
/* Прозрачный фон, как у кнопки Pro (по просьбе пользователя) */
[data-theme="light"] .profile-track {
background: transparent;
}
/* Имя в кнопке профиля — белое чуть прозрачное (по просьбе
пользователя, фон уже прозрачный, тёмный текст плохо читался) */
[data-theme="light"] .profile-name {
color: rgba(255, 255, 255, 0.88);
}
.profile-btn.art-playing .profile-track {
background: transparent;
border-color: rgba(255, 255, 255, 0.14);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.07),
0 0 22px rgba(236, 72, 153, 0.38),
0 0 40px rgba(251, 146, 60, 0.22),
inset 0 0 18px rgba(255, 255, 255, 0.04);
transition: none;
}
.profile-track-inner {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 6px 14px 6px 6px;
white-space: nowrap;
transition: transform 0.15s ease;
}
.avatar-mini {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--purple));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 13px;
font-family: 'Syne', sans-serif;
flex-shrink: 0;
position: relative;
z-index: 2;
transition: box-shadow 0.5s ease;
}
.profile-btn.art-playing .avatar-mini {
box-shadow: 0 0 10px rgba(0, 220, 255, 0.28), 0 0 18px rgba(168, 85, 247, 0.18);
}
.avatar-mini .avatar-letter {
line-height: 1;
display: block;
}
.profile-name {
color: var(--text-dim);
font-family: 'DM Sans', sans-serif;
font-weight: 500;
font-size: 13px;
white-space: nowrap;
opacity: 1;
}
.profile-btn.art-playing .profile-name {
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.profile-canvas {
display: none;
}
.profile-gemini-ring {
display: none;
}
}
/* PRO-бейдж в шапке — статус-индикатор рядом с профилем, виден
только активным PRO-подписчикам (см. applyCabinetStatsCache в
app.js). Клик ведёт в бота, оформить/продлить PRO можно только
там — на сайте это чисто статус, без своей покупки.
Структура (canvas-кольцо + track) — точная копия profile-btn/
profile-gemini-ring/profile-track, только цвет кольца золотой
вместо радужного (см. PRO_RING_STOPS в app.js). */
.pro-badge {
position: relative;
height: 40px;
padding: 0;
margin-left: 4px;
/* Тот же сдвиг вниз, что и у .profile-btn — чтобы совпадало с
кнопкой корзины на одном уровне. */
margin-top: 3px;
display: inline-flex;
align-items: center;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
outline: none;
}
.pro-badge-ring {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
overflow: visible;
}
.pro-badge-track {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 22px;
border-radius: 999px;
/* Рамку рисует только canvas-кольцо (.pro-badge-ring) — если тут
ещё и CSS border с тем же border-radius:999px, на зуме страницы
DOM-скругление и JS-расчёт пилюли в canvas округляются по
отдельности и на некоторых масштабах на пиксель расходятся,
из-за чего форма "дёргается". border: none убирает второй
источник контура целиком. */
border: none;
background: transparent;
transition: transform 0.15s ease;
}
.pro-badge:active .pro-badge-track {
transform: scale(0.96);
}
.pro-badge-text {
position: relative;
z-index: 2;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
font-size: 15px;
color: #ffffff;
/* Бегущий слева направо переливающийся градиент по тексту, как
в лого "Xbox Game Pass Ultimate" — сам текст красится
линейным градиентом, а бежит не сам градиент, а окно
background-position поверх него (см. keyframes ниже).
Важно: НИКАКИХ двух соседних стопов одного цвета — раньше
между 0-26% и 74-100% был плоский белый участок, а на стыке
соседних повторов тайла (74%→100%→0%(след. тайл)→26%) эти
два плоских куска складывались в один широкий (52%), который
был ШИРЕ окна показа текста (~33%) — окно на несколько кадров
целиком попадало внутрь него, и анимация выглядела
"остановившейся". Теперь каждая соседняя пара стопов имеет
свой цвет — окно на каждом кадре застаёт хоть небольшой, но
непрерывный переход, без плоских участков вообще. */
background-image: linear-gradient(90deg,
#ffffff 0%, #FFE9B0 25%, #FFD54A 50%, #FFE9B0 75%, #ffffff 100%);
background-size: 300% 100%;
background-position: -100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: pro-badge-text-sweep 5.5s linear infinite;
}
/* Диапазон -100%..50% (не -100%..200%!) — для фона шире контейнера
background-position% и фактический сдвиг картинки связаны как
2:1 (проверено измерением), поэтому разбег в 300 процентных
пунктов прогонял градиент через ДВА полных прохода за один цикл
анимации — блик пробегал вдвое чаще, чем казалось по
animation-duration, из-за чего смена цветов выглядела резче и
"быстрее", чем задано. 150 пунктов (-100 → 50) — это ровно ОДИН
проход, и переход между витками цикла бесшовный (после точки 50%
узор идентичен точке -100% — тайл градиента просто продолжается). */
@keyframes pro-badge-text-sweep {
0% { background-position: -100% 0; }
100% { background-position: 50% 0; }
}
@media (prefers-reduced-motion: reduce) {
.pro-badge-ring {
display: none;
}
.pro-badge-text {
animation: none;
background: none;
-webkit-text-fill-color: currentColor;
color: var(--text-dim);
}
}
.shop-search {
/* Небольшой нижний сдвиг всего контента страницы, кроме шапки
(логотип/профиль/Pro остаются на месте) — .shop-search тут
"якорь": сайдбары (Популярное/Акции) синхронизируются с ней
через syncSideLayoutToCatalog() в app.js и сдвигаются сами. */
margin: 10px 16px 10px;
position: relative;
z-index: 4;
}
.shop-search-field {
display: flex;
align-items: center;
gap: 10px;
height: 46px;
padding: 0 10px 0 14px;
border-radius: 14px;
border: 1.5px solid rgba(70, 140, 255, 0.55);
background: rgba(8, 14, 28, 0.88);
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shop-search-field:focus-within {
border-color: rgba(90, 170, 255, 0.85);
box-shadow:
0 0 0 3px rgba(60, 130, 255, 0.16),
0 10px 26px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.shop-search-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: rgba(210, 224, 255, 0.72);
}
.shop-search-input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
outline: none;
background: transparent;
color: #eef4ff;
font: 500 14px/1.2 'DM Sans', sans-serif;
letter-spacing: 0.01em;
}
.shop-search-input::placeholder {
color: rgba(170, 188, 220, 0.55);
font-weight: 500;
}
.shop-search-input::-webkit-search-decoration,
.shop-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.shop-search-kbd {
flex-shrink: 0;
min-width: 26px;
height: 26px;
padding: 0 7px;
display: grid;
place-items: center;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: rgba(200, 214, 240, 0.75);
font: 650 12px/1 'DM Sans', system-ui, sans-serif;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
pointer-events: none;
user-select: none;
}
.hero {
margin: 0 16px 4px;
padding: 26px 22px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(6, 12, 28, 0.94) 0%, rgba(10, 18, 38, 0.9) 55%, rgba(8, 14, 32, 0.92) 100%);
border: 1px solid rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
/* без backdrop-filter — иначе blur пересчитывает анимированный #star-canvas каждый кадр */
}
/* в”Ђв”Ђ РЎРўРЛРДЛЯ НОВОГО ЗВЕЗДНОГО ФОНА РР— CANVAS в”Ђв”Ђ */
#hero-star-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* Звёзды лежат на самом дне блока */
pointer-events: none; /* Чтобы не перекрывали клики */
}
/* Убеждаемся, что текст, огонь и ракета лежат ПОВЕРХ звёзд */
.hero-label,
.hero h1,
.hero p,
#fireCanvas,
#rocket-img {
position: relative;
z-index: 2;
}
.hero::before {
content: ''; position: absolute; top: -40px; right: -40px;
width: 180px; height: 180px; background: radial-gradient(circle, rgba(0,220,255,0.15) 0%, transparent 70%); pointer-events: none;
}
.hero-label {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(0,220,255,0.1); border: 1px solid rgba(0,220,255,0.2);
color: var(--cyan); font-size: 11px; font-weight: 600;
letter-spacing: 0.8px; text-transform: uppercase;
padding: 4px 10px; border-radius: 100px; margin-bottom: 12px;
}
.hero-label::before { content: ''; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.hero h1 { font-family: 'Syne', sans-serif; margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; }
.hero h1 span { color: var(--cyan); }
.hero p { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 65%; line-height: 1.5; }
/* Категории: blur строго внутри блока, мягкие края через mask */
#category-filter {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
row-gap: 8px;
column-gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 10px 14px 12px;
position: sticky;
top: 0;
z-index: 100;
background: transparent;
border-bottom: none;
box-shadow: none;
overflow: visible;
isolation: isolate;
}
.category-filter-glass {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
background: linear-gradient(
180deg,
rgba(5, 7, 15, 0.48) 0%,
rgba(5, 7, 15, 0.64) 55%,
rgba(5, 7, 15, 0.8) 100%
);
backdrop-filter: blur(42px) saturate(185%);
-webkit-backdrop-filter: blur(42px) saturate(185%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 0 52px rgba(0, 200, 255, 0.1);
-webkit-mask-image:
linear-gradient(
to right,
transparent 0%,
#000 2%,
#000 98%,
transparent 100%
),
linear-gradient(
to bottom,
#000 0%,
#000 62%,
rgba(0, 0, 0, 0.94) 74%,
rgba(0, 0, 0, 0.78) 84%,
rgba(0, 0, 0, 0.5) 91%,
rgba(0, 0, 0, 0.22) 96%,
transparent 100%
);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(
to right,
transparent 0%,
#000 2%,
#000 98%,
transparent 100%
),
linear-gradient(
to bottom,
#000 0%,
#000 62%,
rgba(0, 0, 0, 0.94) 74%,
rgba(0, 0, 0, 0.78) 84%,
rgba(0, 0, 0, 0.5) 91%,
rgba(0, 0, 0, 0.22) 96%,
transparent 100%
);
mask-composite: intersect;
}
.category-filter-glass::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 220, 255, 0.16) 0%,
rgba(0, 180, 255, 0.08) 42%,
transparent 70%
);
-webkit-mask-image: inherit;
mask-image: inherit;
-webkit-mask-composite: inherit;
mask-composite: inherit;
}
#category-filter.category-filter--glass .category-filter-glass {
opacity: 1;
visibility: visible;
}
#category-filter .cat-btn {
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
#category-filter {
justify-content: flex-start;
column-gap: 6px;
row-gap: 6px;
padding: 8px 12px 10px;
}
.cat-btn-inner {
padding: 7px 11px;
font-size: 12px;
}
}
.cat-btn {
display: inline-flex;
flex: 0 0 auto;
border: none;
background: transparent;
padding: 0;
margin: 0;
border-radius: 100px;
white-space: nowrap;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
-webkit-tap-highlight-color: transparent;
overflow: visible;
}
.cat-btn-inner {
position: relative;
z-index: 1;
display: inline-block;
padding: 8px 11px;
font-size: 12px;
white-space: nowrap;
font-weight: 600;
color: var(--text-muted);
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 100px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.18);
transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
overflow: visible;
max-width: 100%;
box-sizing: border-box;
}
.cat-btn-text { position: relative; z-index: 1; }
.cat-contour-canvas {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
display: block;
background: transparent !important;
}
.cat-btn:hover .cat-btn-inner {
color: rgba(255,255,255,0.88);
border-color: rgba(255, 255, 255, 0.24);
}
.cat-btn.active .cat-btn-inner {
transform: none;
}
.cat-btn:active .cat-btn-inner,
.cat-btn.cat-pressed .cat-btn-inner {
transform: scale(0.97);
}
.cat-btn.active:active .cat-btn-inner,
.cat-btn.active.cat-pressed .cat-btn-inner {
transform: scale(0.97);
}
.cat-btn[data-cat="All"].active .cat-btn-inner {
color: var(--cyan);
background: var(--surface);
border-color: rgba(0, 220, 255, 0.38);
}
.cat-btn.active:not([data-cat="All"]) .cat-btn-inner {
color: var(--text-muted);
background: var(--surface);
border-color: rgba(255, 255, 255, 0.16);
}
.cat-btn[data-cat="Apple Gift Cards"].active .cat-btn-inner,
.cat-btn[data-cat="🍎 Apple Gift Cards"].active .cat-btn-inner {
border-color: rgba(255, 255, 255, 0.16);
}
.cat-btn[data-cat="Apple Gift Cards"]:hover .cat-btn-inner,
.cat-btn[data-cat="🍎 Apple Gift Cards"]:hover .cat-btn-inner {
border-color: rgba(255, 255, 255, 0.24);
}
@media (prefers-reduced-motion: reduce) {
.cat-contour-canvas { display: none; }
.cat-btn { transition: none; }
}
#items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; padding: 16px; align-items: stretch; }
.item-card {
background: rgba(255,255,255,0.028); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 12px 12px; cursor: pointer; transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
position: relative; overflow: hidden;
display: flex; flex-direction: column; height: 100%;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
.item-card > * { position: relative; z-index: 1; }
.item-card::before {
content: ''; position: absolute; inset: 0; border-radius: var(--radius);
background: linear-gradient(135deg, rgba(0,220,255,0.04) 0%, rgba(124,92,252,0.04) 100%);
opacity: 0; transition: opacity 0.2s; z-index: 0; pointer-events: none;
}
.item-card:hover::before { opacity: 1; }
.item-card:active { transform: scale(0.96); border-color: var(--cyan); box-shadow: 0 0 28px var(--cyan-glow), 0 0 60px rgba(0,220,255,0.1); }
.item-card:hover { border-color: rgba(0,220,255,0.35); box-shadow: 0 0 18px rgba(0,220,255,0.15); }
/* Xbox: тёмный фон + радуга только в обводке (откат на ~3 шага) */
.item-card--holo {
border: 2px solid transparent !important;
padding: 14px 12px 12px !important;
background:
linear-gradient(165deg, rgba(10, 14, 26, 0.92) 0%, rgba(4, 6, 14, 0.95) 100%) padding-box,
linear-gradient(
125deg,
#e4e8f8 0%,
#7ef0ff 14%,
#c8a8ff 28%,
#ffe9a8 42%,
#a8ffd8 56%,
#ffb8e8 70%,
#98e8ff 84%,
#e4e8f8 100%
) border-box !important;
background-size: auto, 280% 280% !important;
animation: holo-card-border 30s linear infinite;
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.45),
0 0 16px rgba(120, 200, 255, 0.1),
0 0 28px rgba(180, 120, 255, 0.07);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: hidden;
}
.item-card--holo::before {
display: block !important;
content: '' !important;
opacity: 0.35 !important;
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 40%) !important;
inset: 0;
border-radius: inherit;
z-index: 0;
pointer-events: none;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.item-card--holo:hover::before { opacity: 0.45 !important; }
.item-card--holo::after { display: none !important; content: none !important; }
.item-card--holo .item-card-glass { display: contents; }
.item-card--holo:hover {
border-color: transparent !important;
box-shadow:
0 10px 32px rgba(0, 0, 0, 0.5),
0 0 22px rgba(120, 200, 255, 0.14),
0 0 36px rgba(180, 120, 255, 0.09);
}
.item-card--holo:active { border-color: transparent !important; }
/* сразу после загрузки + раз в 30с: короткое переливание градиента */
@keyframes holo-card-border {
0% { background-position: 0 0, 0% 50%; }
5% { background-position: 0 0, 100% 50%; }
10% { background-position: 0 0, 0% 50%; }
10.01%, 100% { background-position: 0 0, 0% 50%; }
}
/* радужный градиент текста = цвета контура, без пауз */
@keyframes holo-title-shine {
/* слева → направо; удвоенный паттерн + size 200% = стык без рывка */
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.item-card--holo .item-title,
#product-modal.modal--holo #pm-title {
/* паттерн ×2; цвета чуть разбавлены белым (~30%), переходы мягче */
background-image: linear-gradient(
90deg,
color-mix(in srgb, #c8a8ff 70%, #fff) 0%,
color-mix(in srgb, #e8b0f4 70%, #fff) 5%,
color-mix(in srgb, #ffb8e8 70%, #fff) 10%,
color-mix(in srgb, #ffd0c8 70%, #fff) 15%,
color-mix(in srgb, #ffe9a8 70%, #fff) 20%,
color-mix(in srgb, #d8f5b8 70%, #fff) 25%,
color-mix(in srgb, #a8ffd8 70%, #fff) 30%,
color-mix(in srgb, #90f0ee 70%, #fff) 35%,
color-mix(in srgb, #7ef0ff 70%, #fff) 40%,
color-mix(in srgb, #a8c8ff 70%, #fff) 45%,
color-mix(in srgb, #c8a8ff 70%, #fff) 50%,
color-mix(in srgb, #e8b0f4 70%, #fff) 55%,
color-mix(in srgb, #ffb8e8 70%, #fff) 60%,
color-mix(in srgb, #ffd0c8 70%, #fff) 65%,
color-mix(in srgb, #ffe9a8 70%, #fff) 70%,
color-mix(in srgb, #d8f5b8 70%, #fff) 75%,
color-mix(in srgb, #a8ffd8 70%, #fff) 80%,
color-mix(in srgb, #90f0ee 70%, #fff) 85%,
color-mix(in srgb, #7ef0ff 70%, #fff) 90%,
color-mix(in srgb, #a8c8ff 70%, #fff) 95%,
color-mix(in srgb, #c8a8ff 70%, #fff) 100%
);
background-size: 200% 100%;
background-repeat: repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
animation: holo-title-shine 12s linear infinite;
will-change: background-position;
}
[data-theme="light"] .item-card--holo .item-title,
[data-theme="light"] #product-modal.modal--holo #pm-title {
background-image: linear-gradient(
90deg,
color-mix(in srgb, #8b5cf6 72%, #fff) 0%,
color-mix(in srgb, #db2777 72%, #fff) 10%,
color-mix(in srgb, #d4a017 72%, #fff) 20%,
color-mix(in srgb, #10b981 72%, #fff) 30%,
color-mix(in srgb, #00b8d4 72%, #fff) 40%,
color-mix(in srgb, #8b5cf6 72%, #fff) 50%,
color-mix(in srgb, #db2777 72%, #fff) 60%,
color-mix(in srgb, #d4a017 72%, #fff) 70%,
color-mix(in srgb, #10b981 72%, #fff) 80%,
color-mix(in srgb, #00b8d4 72%, #fff) 90%,
color-mix(in srgb, #8b5cf6 72%, #fff) 100%
);
}
[data-theme="light"] .item-card--holo {
/* фон и рамка — как у обычных карточек товара, по просьбе
пользователя. Прошлая попытка (полупрозрачный слой ПОВЕРХ
анимированного радужного слоя) не сработала: даже на 58%
непрозрачности радужный слой позади всё равно просвечивал
цветными пятнами по всей карточке — именно это и выглядело
«фон не прозрачный». Теперь радужный слой в светлой теме
просто не рисуем вообще (background — один сплошной слой,
без animation), а не пытаемся его перекрыть. */
background: rgba(255, 255, 255, 0.58) !important;
border-color: var(--border) !important;
background-size: auto !important;
animation: none !important;
/* базовое правило .item-card--holo (не светлая тема) выключает
блюр через !important — тут переопределяем тем же способом,
чтобы карточка Xbox получила тот же небольшой блюр, что и
остальные карточки товара (по просьбе пользователя) */
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
box-shadow:
0 8px 24px rgba(31, 38, 135, 0.12),
0 0 16px rgba(120, 200, 255, 0.1);
}
[data-theme="light"] .item-card--holo::before {
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 45%) !important;
}
/* Кнопка "Выбрать" внутри карточки Xbox — тот же фон, что и у кнопки
в обычных карточках (по просьбе пользователя); явный override на
случай, если что-то внутри .item-card--holo влияет на неё. */
[data-theme="light"] .item-card--holo .add-btn {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
html:not([data-theme="light"]) .item-card--holo,
[data-theme="dark"] .item-card--holo {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
.item-card--holo,
#product-modal.modal--holo,
.item-card--holo .item-title,
#product-modal.modal--holo #pm-title {
animation: none;
}
}
/* Голографическая рамка — модалка Xbox (как было, без лишней заливки) */
#product-modal.modal--holo {
--lg-blur-amt: 0px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
border: 2.5px solid transparent !important;
border-bottom: none !important;
/* overflow-y:auto ломает скругление — квадрат торчит в правом углу */
overflow: hidden !important;
border-radius: 22px 22px 0 0 !important;
isolation: isolate;
display: flex;
flex-direction: column;
overscroll-behavior: contain;
max-height: min(92dvh, calc(100svh - 36px));
/* равные отступы; без ползунка контент по центру */
padding: 8px 14px 32px 14px !important;
scrollbar-width: none;
-ms-overflow-style: none;
background:
linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%) padding-box,
linear-gradient(
125deg,
#e4e8f8 0%,
#7ef0ff 14%,
#c8a8ff 28%,
#ffe9a8 42%,
#a8ffd8 56%,
#ffb8e8 70%,
#98e8ff 84%,
#e4e8f8 100%
) border-box !important;
background-size: auto, 280% 280% !important;
animation: holo-card-border 30s linear infinite;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 0 36px rgba(90, 200, 255, 0.18),
0 0 72px rgba(180, 120, 255, 0.14) !important;
}
#product-modal.modal--holo::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
html:not([data-theme="light"]) #product-modal.modal--holo.active,
html:not([data-theme="light"]) #product-modal.modal--holo.active.glass-ready,
[data-theme="dark"] #product-modal.modal--holo.active,
[data-theme="dark"] #product-modal.modal--holo.active.glass-ready {
--lg-bg: transparent;
border: 2.5px solid transparent !important;
border-bottom: none !important;
border-top-color: transparent !important;
background:
linear-gradient(168deg, #142444 0%, #0c162e 38%, #080e1e 100%) padding-box,
linear-gradient(
125deg,
#e4e8f8 0%,
#7ef0ff 14%,
#c8a8ff 28%,
#ffe9a8 42%,
#a8ffd8 56%,
#ffb8e8 70%,
#98e8ff 84%,
#e4e8f8 100%
) border-box !important;
background-size: auto, 280% 280% !important;
animation: holo-card-border 30s linear infinite;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 40px rgba(90, 200, 255, 0.2),
0 0 80px rgba(180, 120, 255, 0.16) !important;
}
[data-theme="light"] #product-modal.modal--holo,
[data-theme="light"] #product-modal.modal--holo.active,
[data-theme="light"] #product-modal.modal--holo.active.glass-ready {
--lg-bg: transparent;
border: 2.5px solid transparent !important;
border-bottom: none !important;
background:
linear-gradient(
168deg,
rgba(255, 255, 255, 0.88) 0%,
rgba(244, 250, 255, 0.92) 100%
) padding-box,
linear-gradient(
125deg,
#e4e8f8 0%,
#7ef0ff 14%,
#c8a8ff 28%,
#ffe9a8 42%,
#a8ffd8 56%,
#ffb8e8 70%,
#98e8ff 84%,
#e4e8f8 100%
) border-box !important;
background-size: auto, 280% 280% !important;
animation: holo-card-border 30s linear infinite;
box-shadow:
var(--lg-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 0 36px rgba(120, 200, 255, 0.16),
0 0 72px rgba(180, 140, 255, 0.12) !important;
}
#product-modal .modal-holo-rim {
display: none;
}
/* убрать glass-слои lg-sheet — дают квадратный «хвост» в углу */
#product-modal.modal--holo::before,
#product-modal.modal--holo::after,
html:not([data-theme="light"]) #product-modal.modal--holo::before,
html:not([data-theme="light"]) #product-modal.modal--holo::after,
[data-theme="dark"] #product-modal.modal--holo::before,
[data-theme="dark"] #product-modal.modal--holo::after,
[data-theme="light"] #product-modal.modal--holo::before,
[data-theme="light"] #product-modal.modal--holo::after {
display: none !important;
content: none !important;
opacity: 0 !important;
}
#product-modal:not(.modal--holo) .pm-body-scroll {
display: contents;
}
#product-modal.modal--holo .pm-body-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
border-radius: inherit;
position: relative;
z-index: 1;
padding: 0;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/old Edge */
}
#product-modal.modal--holo .pm-body-scroll::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.item-image-wrap {
width: 100%; height: 100px; display: flex; align-items: center; justify-content: center;
margin-bottom: 12px; border-radius: 12px; background: rgba(255,255,255,0.02); overflow: hidden;
}
.item-image { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); transition: transform 0.2s; }
.item-card:hover .item-image { transform: scale(1.05); }
/* Xbox neon logo (transparent bg) */
.item-card--holo .item-image-wrap {
background: transparent;
overflow: visible;
/* лёгкое мягкое перо краёв — не обрезает кончики логотипа */
-webkit-mask-image: radial-gradient(
ellipse 96% 96% at 50% 50%,
#000 72%,
rgba(0, 0, 0, 0.75) 88%,
transparent 100%
);
mask-image: radial-gradient(
ellipse 96% 96% at 50% 50%,
#000 72%,
rgba(0, 0, 0, 0.75) 88%,
transparent 100%
);
}
.item-card--holo .item-image {
width: 78px;
height: 78px;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.35));
}
#product-modal.modal--holo #pm-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
filter: none;
border-radius: inherit;
}
#product-modal.modal--holo .pm-header-img {
/* второе фото: коллаж игр целиком в cyan-рамке */
position: relative;
width: 100%;
height: auto;
aspect-ratio: 620 / 305;
margin-bottom: 14px;
padding: 0;
border: 1.5px solid rgba(126, 240, 255, 0.72);
box-shadow:
0 0 0 1px rgba(126, 240, 255, 0.18),
0 0 22px rgba(90, 200, 255, 0.28);
background: rgba(4, 8, 18, 0.85);
overflow: hidden;
border-radius: 14px;
}
#product-modal.modal--holo .pm-header-img::before,
#product-modal.modal--holo .pm-header-img::after {
display: none !important;
content: none !important;
}
#product-modal.modal--holo #pm-desc {
display: block !important;
margin-bottom: 18px;
}
#product-modal.modal--holo .xbox-logo-host {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block !important;
overflow: visible;
border-radius: inherit;
}
#product-modal.modal--holo .xbox-hero-banner {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: inherit;
pointer-events: none;
}
#product-modal.modal--holo .xbox-collage {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
/* тёмный нейтральный — без cyan/зелени в щелях */
background: #0a0e16;
isolation: isolate;
cursor: pointer;
touch-action: manipulation;
display: grid;
grid-template-columns: 1.15fr 1.5fr 1.15fr;
grid-template-rows: 1fr;
align-items: stretch;
transition: grid-template-columns 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#product-modal.modal--holo .xbox-collage.hot-0 {
grid-template-columns: 1.95fr 1.05fr 1fr;
transition: grid-template-columns 0.48s cubic-bezier(0.25, 0.8, 0.35, 1);
}
#product-modal.modal--holo .xbox-collage.hot-1 {
grid-template-columns: 1fr 2.05fr 1fr;
transition: grid-template-columns 0.48s cubic-bezier(0.25, 0.8, 0.35, 1);
}
#product-modal.modal--holo .xbox-collage.hot-2 {
grid-template-columns: 1fr 1.05fr 1.95fr;
transition: grid-template-columns 0.48s cubic-bezier(0.25, 0.8, 0.35, 1);
}
/* Подложка из слайдов — закрывает микро-щели цветом картинок */
#product-modal.modal--holo .xbox-collage-backdrop {
position: absolute;
inset: -12%;
z-index: 0;
display: flex;
pointer-events: none;
transform: translateZ(0) scale(1.12);
opacity: 0.85;
filter: none;
}
#product-modal.modal--holo .xbox-bd-slice {
flex: 1 1 0;
margin: 0 -4%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* Слот = колонка грида */
#product-modal.modal--holo .xbox-collage-slot {
position: relative;
min-width: 0;
/* +2px сверху/снизу — убирает светлую волоску по краю */
height: calc(100% + 2px);
margin-top: -1px;
overflow: hidden;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
filter: none;
background: #0a0e16;
}
#product-modal.modal--holo .xbox-collage-slot::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
box-shadow:
inset 0 0 0 1.5px rgba(255, 255, 255, 0.78),
inset 0 0 28px rgba(255, 255, 255, 0.12);
opacity: 0;
transition: opacity 0.45s ease;
}
#product-modal.modal--holo .xbox-collage-slot.is-hot::before {
opacity: 1;
}
/* Соседние панели чуть гаснут — ощущение «приближения» без большого scale */
#product-modal.modal--holo .xbox-collage[class*="hot-"] .xbox-collage-slot:not(.is-hot) .xbox-slot-track img {
filter: brightness(0.78) contrast(0.96) saturate(0.88);
transition:
transform 0.48s cubic-bezier(0.25, 0.8, 0.35, 1),
filter 0.48s cubic-bezier(0.25, 0.8, 0.35, 1);
}
/* Перекрытие сильнее + мягкий тонкий шов (не яркая «щель») */
#product-modal.modal--holo .xbox-collage-slot.slot-0 {
z-index: 1;
margin-right: -10%;
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
#product-modal.modal--holo .xbox-collage-slot.slot-0::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.55),
rgba(126, 240, 255, 0.4),
rgba(255, 255, 255, 0.35));
box-shadow: 0 0 6px rgba(126, 240, 255, 0.25);
clip-path: polygon(calc(100% - 1.5px) 0, 100% 0, 90% 100%, calc(90% - 1.5px) 100%);
-webkit-clip-path: polygon(calc(100% - 1.5px) 0, 100% 0, 90% 100%, calc(90% - 1.5px) 100%);
opacity: 0.55;
}
#product-modal.modal--holo .xbox-collage-slot.slot-1 {
z-index: 2;
margin-left: -7.5%;
margin-right: -7.5%;
clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
-webkit-clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
#product-modal.modal--holo .xbox-collage-slot.slot-1::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.55),
rgba(168, 255, 106, 0.35),
rgba(255, 255, 255, 0.35));
box-shadow: 0 0 6px rgba(126, 240, 255, 0.25);
clip-path: polygon(calc(100% - 1.5px) 0, 100% 0, 94% 100%, calc(94% - 1.5px) 100%);
-webkit-clip-path: polygon(calc(100% - 1.5px) 0, 100% 0, 94% 100%, calc(94% - 1.5px) 100%);
opacity: 0.55;
}
#product-modal.modal--holo .xbox-collage-slot.slot-2 {
z-index: 1;
margin-left: -10%;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}
#product-modal.modal--holo .xbox-slot-track {
display: flex;
width: 200%;
height: 100%;
transform: translate3d(0, 0, 0);
will-change: transform;
background: transparent;
position: relative;
z-index: 1;
}
#product-modal.modal--holo .xbox-slot-track img {
flex: 0 0 50%;
width: 50%;
height: 100%;
object-fit: cover;
object-position: center center;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
transform: translate3d(0, 0, 0) scale(1);
transform-origin: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
filter: brightness(1) contrast(1) saturate(1);
transition:
transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
filter 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* AAA-подход: слабый scale + яркость/контраст + лёгкий сдвиг; главный zoom — через grid */
#product-modal.modal--holo .xbox-collage-slot.is-hot .xbox-slot-track img {
transform: translate3d(0, -1.2%, 0) scale(1.04);
filter: brightness(1.1) contrast(1.07) saturate(1.1);
transition:
transform 0.48s cubic-bezier(0.25, 0.8, 0.35, 1),
filter 0.48s cubic-bezier(0.25, 0.8, 0.35, 1);
}
/* Xbox photo logo + white inner sunlight on hover/click */
.xbox-logo-pic {
position: relative;
width: 78px;
height: 78px;
display: block;
overflow: visible;
-webkit-tap-highlight-color: transparent;
}
#product-modal.modal--holo .xbox-logo-pic {
width: 88px;
height: 88px;
}
.xbox-logo-pic img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
border: 0;
}
.xbox-logo-pic .xbox-base {
filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.35));
}
.xbox-logo-pic .xbox-sun {
opacity: 0;
transform: scale(0.16);
transform-origin: center center;
/* мягкое свечение линий — чуть слабее, чем раньше */
filter:
drop-shadow(0 0 1px #fff)
drop-shadow(0 0 5px rgba(255, 255, 255, 0.85));
transition:
opacity 0.36s cubic-bezier(0.22, 0.82, 0.2, 1),
transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
mix-blend-mode: screen;
}
.item-card--holo:hover .xbox-sun,
.item-card--holo:active .xbox-sun,
.xbox-logo-pic.is-lit .xbox-sun,
#product-modal.modal--holo:hover .xbox-sun {
opacity: 1;
transform: scale(1);
}
.item-badge {
position: absolute; top: 10px; right: 10px; background: rgba(0,232,122,0.15); border: 1px solid rgba(0,232,122,0.3);
color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
padding: 2px 7px; border-radius: 100px;
}
.item-badge--sold {
position: absolute !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
background: rgba(200,30,30,0.20);
border: 1.5px solid rgba(220,50,50,0.75);
color: #ff4444;
font-size: 10px;
letter-spacing: 1px;
padding: 3px 10px;
text-shadow: 0 0 8px rgba(255,60,60,0.6);
box-shadow: 0 0 10px rgba(200,30,30,0.35);
width: fit-content;
max-width: 80%;
}
/* Sold-out card: full FOMO treatment matching reference */
.item-card--sold-out {
border-color: rgba(160,30,30,0.45) !important;
cursor: default;
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent !important;
animation: soldBorderPulse 5.2s ease-in-out infinite;
}
/* Плавная пульсация контура: яркость нарастает и медленно затухает */
@keyframes soldBorderPulse {
0%, 100% {
box-shadow:
0 0 0 1px rgba(160,30,30,0.28),
0 0 28px rgba(140,20,20,0.24),
0 0 54px rgba(120,10,10,0.13),
inset 0 1px 0 rgba(255,255,255,0.04);
border-color: rgba(160,30,30,0.42);
}
50% {
box-shadow:
0 0 0 1.2px rgba(230,55,45,0.44),
0 0 34px rgba(190,38,28,0.32),
0 0 62px rgba(140,18,14,0.18),
inset 0 1px 0 rgba(255,255,255,0.05);
border-color: rgba(230,60,52,0.58);
}
}
/* Ранний доступ к партии (см. shop_common.py: 0-3мин — только админы,
3-5мин — ещё и PRO; см. также itesla_site.py get_items(), поле
early_access). Карточка чуть затемнена + чередующиеся диагональные
полосы (светлая/тёмная) поверх контента — сигнал "это видно только
тебе (админу/PRO), остальным пока нет". pointer-events:none —
полосы не мешают кликам по карточке. */
.item-card--early::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.07) 0px,
rgba(255,255,255,0.07) 12px,
rgba(0,0,0,0.18) 12px,
rgba(0,0,0,0.18) 24px
),
rgba(0,0,0,0.12);
pointer-events: none;
z-index: 2;
}
/* Xbox-карточка (--holo) отдельно гасит свой ::after — если она
ЕЩЁ и --early, полосы всё равно должны быть видны поверх неё. */
.item-card--holo.item-card--early::after {
display: block !important;
content: '' !important;
}
.item-badge--early {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
z-index: 3;
background: rgba(255,196,0,0.16);
border: 1px solid rgba(255,196,0,0.4);
color: #ffcf4a;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 100px;
text-shadow: 0 0 8px rgba(255,196,0,0.3);
width: fit-content;
/* Короткая подпись + жёсткий потолок ширины — на узких карточках
этот бейдж (top-left) не должен доезжать до "МАЛО"/"ПРОДАНО"
(top-right), иначе тексты перекрываются (см. скриншот-тест). */
max-width: 44%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Красный атмосферный ореол */
.item-card--sold-out::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(ellipse at 50% 110%, rgba(160,20,20,0.45) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.item-card--sold-out > * { position: relative; z-index: 1; }
/* На тапе/ховере распроданной карточки .item-card:active подмешивает
голубую обводку/свечение (border-color: var(--cyan) + cyan box-shadow) —
тут явно фиксируем тот же спокойный красный, что и в состоянии покоя
(0% кадр soldBorderPulse), чтобы контур не прыгал в синий цвет. */
.item-card--sold-out:hover, .item-card--sold-out:active {
transform: none !important;
border-color: rgba(160,30,30,0.42) !important;
box-shadow:
0 0 0 1px rgba(160,30,30,0.28),
0 0 28px rgba(140,20,20,0.24),
0 0 54px rgba(120,10,10,0.13),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.item-image--grey {
filter: grayscale(1) brightness(0.62) contrast(0.9);
}
/* Grey out the title on sold-out cards */
.item-card--sold-out .item-title {
color: rgba(160,160,170,0.7) !important;
}
.item-card--sold-out .item-price strong {
color: rgba(140,140,150,0.6) !important;
}
.add-btn--sold {
background: rgba(70,70,75,0.35) !important;
border-color: rgba(110,110,120,0.35) !important;
color: rgba(170,170,175,0.65) !important;
cursor: default !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: none !important;
white-space: nowrap;
-webkit-tap-highlight-color: transparent !important;
}
.add-btn--sold:hover, .add-btn--sold:active {
transform: none !important;
box-shadow: none !important;
background: rgba(70,70,75,0.35) !important;
}
/* Строка корзины: товар лежал в корзине и закончился на складе
(см. applyCartOutOfStock в app.js — ставится и после неудачной
попытки оплаты, и проактивно при каждом открытии корзины через
/api/cart_stock_check). Раньше была красная рамка + бегущее
красное кольцо (canvas, createPillRingAnim) — убрано по просьбе
(«убери красную подсветку в корзине»). Осталась нейтральная
серая рамка/фон + серый текст/иконка (ниже) и плашка
«НЕТ В НАЛИЧИИ» — без красного акцента.
Селектор дополнен префиксами тем и лишним классом, чтобы перебить
#cart-modal .cart-item.glass-panel (там !important на фон/рамку). */
#cart-modal .cart-item.glass-panel.cart-item--sold-out,
html:not([data-theme="light"]) #cart-modal .cart-item.glass-panel.cart-item--sold-out,
[data-theme="dark"] #cart-modal .cart-item.glass-panel.cart-item--sold-out,
[data-theme="light"] #cart-modal .cart-item.glass-panel.cart-item--sold-out {
border: 1px solid rgba(150,150,158,0.28) !important;
box-shadow:
0 0 0 1px rgba(150,150,158,0.14),
inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
html:not([data-theme="light"]) #cart-modal .cart-item.glass-panel.cart-item--sold-out,
[data-theme="dark"] #cart-modal .cart-item.glass-panel.cart-item--sold-out {
background: rgba(60, 62, 68, 0.55) !important;
}
[data-theme="light"] #cart-modal .cart-item.glass-panel.cart-item--sold-out {
background: rgba(198, 198, 202, 0.82) !important;
}
/* Свайп по строке корзины (см. bindCartSwipeGestures в app.js):
слева направо — убавить/убрать (работает и для распроданных строк,
у них нет кнопки «−»); справа налево — добавить, если есть в
наличии. Иконки-подсказки лежат в собственных границах строки под
содержимым (z-index) и просто открываются при translateX — им не
нужен overflow:hidden. */
.cart-swipe-row {
position: relative;
touch-action: pan-y;
margin-bottom: 10px;
}
.cart-swipe-row .cart-item {
margin-bottom: 0;
}
.cart-swipe-content {
position: relative;
z-index: 1;
will-change: transform;
}
.cart-swipe-content.cart-swipe-snap {
transition: transform 0.24s cubic-bezier(0.22, 0.82, 0.2, 1);
}
.cart-swipe-action {
position: absolute;
top: 0;
bottom: 0;
width: 72px;
display: flex;
align-items: center;
z-index: 0;
opacity: 0;
pointer-events: none;
}
.cart-swipe-action svg { width: 22px; height: 22px; }
/* Направления свайпа поменяны местами (см. bindCartSwipeGestures в
app.js) — теперь свайп вправо добавляет (зелёный плюс слева),
свайп влево убавляет (красный минус справа), поэтому и позиции
иконок здесь зеркально поменяны. */
.cart-swipe-action--dec {
right: 0;
justify-content: flex-end;
padding-right: 18px;
color: #ff5a4a;
}
.cart-swipe-action--inc {
left: 0;
justify-content: flex-start;
padding-left: 18px;
color: #34d17a;
}
#cart-modal .cart-item--sold-out .cart-item-info h4 {
color: rgba(170,170,178,0.75) !important;
}
#cart-modal .cart-item--sold-out .cart-item-info p {
color: rgba(150,150,158,0.65) !important;
text-shadow: none !important;
/* grayscale красит и текст, и звёздочку-эмодзи рядом с ценой —
color тут эмодзи не берёт, filter берёт. */
filter: grayscale(1);
}
/* Логотип-плашка (звезда в квадрате) на распроданной строке — тоже
в серый: фон-градиент, свечение и сама заливка звезды (stop-color
внутри инлайнового SVG-градиента можно перебить через CSS). */
#cart-modal .cart-item--sold-out .cart-item-ico {
background: linear-gradient(145deg, rgba(140,140,148,0.35), rgba(110,110,118,0.22)) !important;
border-color: rgba(150,150,158,0.3) !important;
box-shadow: none !important;
}
#cart-modal .cart-item--sold-out .cart-item-ico svg {
filter: none !important;
}
#cart-modal .cart-item--sold-out .cart-item-ico stop {
stop-color: #9a9aa2 !important;
}
/* Жёлто-оранжевая плашка акции (1+1/2+1) — тоже в серый */
#cart-modal .cart-item--sold-out .cart-item-promo {
background: linear-gradient(135deg, #9a9aa2, #7a7a82) !important;
color: rgba(20,20,24,0.75) !important;
}
/* Вместо +/- на распроданной строке — плашка «НЕТ В НАЛИЧИИ» */
#cart-modal .cart-controls.cart-controls--sold {
padding: 8px 14px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(180,180,188,0.75);
white-space: nowrap;
background: rgba(70,70,75,0.3);
border-color: rgba(130,130,140,0.25);
}
.item-title {
font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
margin: 0 0 8px; line-height: 1.25; color: var(--text);
min-height: 2.5em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-card-footer { margin-top: auto; }
.item-price { font-size: 12px; font-weight: 500; color: var(--text-muted); margin: 0 0 10px; min-height: 1.4em; }
.item-price strong { color: var(--cyan); font-weight: 600; }
html:not([data-theme="light"]) .add-btn,
[data-theme="dark"] .add-btn {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.add-btn {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--cyan); border-radius: 10px; padding: 9px 12px;
font-size: 13px; font-weight: 600; cursor: pointer; width: 100%;
font-family: 'DM Sans', sans-serif;
transition: transform 0.2s cubic-bezier(0.25, 1.5, 0.5, 1), box-shadow 0.2s, background 0.2s;
}
.add-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(0, 220, 255, 0.3); box-shadow: 0 0 15px rgba(0, 220, 255, 0.15); }
.add-btn:active { transform: scale(0.95); background: rgba(0, 220, 255, 0.15); opacity: 1; }
.add-btn.solid {
background: rgba(0, 220, 255, 0.08); border-color: rgba(0, 220, 255, 0.25);
color: var(--cyan); font-size: 15px; font-weight: 700; font-family: 'Syne', sans-serif;
box-shadow: 0 4px 16px rgba(0, 180, 210, 0.1);
}
.add-btn.solid:hover { background: rgba(0, 220, 255, 0.15); box-shadow: 0 4px 24px rgba(0, 180, 210, 0.3); border-color: rgba(0, 220, 255, 0.5); }
.add-btn.solid:active { transform: scale(0.95) !important; }
/* Корзина в шапке (как на референсе) */
#cart-overlay {
position: relative;
bottom: auto;
left: auto;
transform: none;
width: auto;
max-width: none;
height: 40px;
display: none;
align-items: center;
justify-content: center;
z-index: 50;
cursor: pointer;
border: 1px solid var(--border);
padding: 0 22px;
background: var(--surface);
border-radius: 999px;
overflow: visible;
isolation: isolate;
flex-shrink: 0;
pointer-events: auto !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition:
background 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
#cart-overlay.visible,
#cart-overlay[style*="flex"] {
display: inline-flex !important;
}
#cart-overlay .cart-glass-bg { display: none; }
#cart-overlay .cart-overlay-waves { display: none; }
/* слои: частицы → блюр → эмодзи/текст → бейдж */
#cart-overlay .cart-fx {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
#cart-overlay .cart-particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 0;
pointer-events: none;
filter: none;
transform: translateZ(0);
}
#cart-overlay .cart-fx-blur {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
pointer-events: none;
/* без блюра — частицы остаются максимально чёткими */
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: transparent;
}
[data-theme="light"] #cart-overlay .cart-fx-blur {
background: transparent;
}
.cart-count-badge {
position: absolute;
/* Пилюля — stadium-shape (border-radius: 999px при высоте 40px),
то есть у правого края скругление радиусом 20px. При старых
отступах (-5px/-5px, потом -4px/-2px, потом 0/2px) бейдж всё
ещё частично выступал за видимый контур пилюли. Убрали любой
"вылет" совсем — теперь бейдж целиком внутри пилюли. */
top: 3px;
right: 3px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
display: none;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
font-family: 'DM Sans', sans-serif;
line-height: 1;
color: #fff;
background: #3d7cff;
box-shadow: 0 0 0 2px rgba(8, 12, 24, 0.9);
pointer-events: none;
z-index: 3;
}
#cart-overlay.visible .cart-count-badge,
#cart-overlay[style*="flex"] .cart-count-badge {
display: inline-flex;
}
#purchases-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
margin-bottom: 20px;
}
#purchases-wrapper.expanded { grid-template-rows: 1fr; }
#purchases-container {
overflow: hidden;
min-height: 0;
opacity: 0;
transform: translate3d(0, -8px, 0);
transition:
opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
contain: layout paint;
}
#purchases-wrapper.expanded #purchases-container {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Раскрытие списка — blur кабинета НЕ трогаем (иначе «подтягивается» с задержкой) */
#purchases-wrapper.is-animating #active-subs .glass-panel,
#purchases-wrapper.is-animating #active-subs .glass-panel::before,
#purchases-wrapper.is-animating #active-subs .glass-panel::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: none !important;
animation: none !important;
}
#active-subs .sub-item.glass-panel {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
will-change: auto;
}
#active-subs .sub-item.is-expired {
opacity: 0.62;
}
#active-subs .sub-item.is-expired .sub-title-gradient {
opacity: 0.85;
}
#purchases-arrow {
font-size: 12px;
opacity: 0.6;
display: inline-block;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#cart-overlay .cart-overlay-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0;
color: var(--text, #eef5ff);
font-weight: 700;
font-size: 13px;
font-family: 'DM Sans', sans-serif;
letter-spacing: 0.01em;
white-space: nowrap;
pointer-events: none;
filter: none;
-webkit-font-smoothing: antialiased;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
#cart-overlay .cart-overlay-icon {
font-size: 15px;
line-height: 1;
filter: none;
}
#cart-overlay:hover {
border-color: rgba(0, 220, 255, 0.35);
box-shadow: 0 0 16px rgba(0, 220, 255, 0.12);
}
#cart-overlay:active {
background: rgba(255, 255, 255, 0.1);
}
/* Прозрачный фон, как у кнопки Pro (по просьбе пользователя) */
[data-theme="light"] #cart-overlay {
background: transparent;
}
[data-theme="light"] #cart-overlay:active {
background: rgba(0, 0, 0, 0.06);
}
/* Текст "Корзина" — белый чуть прозрачный (по просьбе пользователя,
фон кнопки уже прозрачный, тёмный текст плохо читался) */
[data-theme="light"] #cart-overlay .cart-overlay-content {
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 3px rgba(15, 25, 50, 0.35);
}
[data-theme="dark"] #cart-overlay {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] #cart-overlay .cart-overlay-content {
color: #f0f4ff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
#cart-overlay .cart-particles { display: none; }
#cart-overlay .cart-fx-blur {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: transparent;
}
}
.modal-overlay, #modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.34);
z-index: 1999;
opacity: 0;
pointer-events: none;
transition: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#modal-overlay.active, .modal-overlay.active {
pointer-events: all !important;
}
#modal-overlay.active:not(.overlay-rising):not(.overlay-fading),
.modal-overlay.active:not(.overlay-rising):not(.overlay-fading) {
opacity: 1 !important;
}
#modal-overlay.active.overlay-rising,
.modal-overlay.active.overlay-rising {
pointer-events: all !important;
transition: opacity var(--modal-anim-ms, 280ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
#modal-overlay.active.overlay-fading,
.modal-overlay.active.overlay-fading {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity var(--modal-close-ms, 420ms) cubic-bezier(0.22, 0.82, 0.2, 1) !important;
}
.modal {
position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 900px;
background: rgba(8, 14, 30, 0.78);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-top: 1px solid rgba(0, 200, 255, 0.12);
border-left: 1px solid rgba(255,255,255,0.05);
border-right: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 -8px 36px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.07);
border-radius: 24px 24px 0 0;
z-index: 2000;
/* vh стабильнее %, нет пересчёта по высоте контента каждый кадр */
-webkit-transform: translate3d(0, 105vh, 0);
transform: translate3d(0, 105vh, 0);
opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.38s cubic-bezier(0.22, 0.82, 0.2, 1);
padding: 8px 20px 32px; max-height: 92vh; overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.modal.active {
transform: translate3d(0, 0, 0);
}
/* Закрытие: длительность задаёт JS, не 0.72s */
.modal.modal-closing,
body.modal-animating .modal.lg-sheet.modal-closing {
transition: transform var(--modal-close-ms, 420ms) cubic-bezier(0.32, 0.0, 0.15, 1) !important;
}
.modal.modal-closing,
body.modal-animating .modal.modal-closing,
body.modal-animating .modal.lg-sheet.modal-closing,
body.modal-animating:not(.modal-stack) .modal.lg-sheet.active.modal-closing {
pointer-events: none !important;
}
.modal-drag-pill { width: 36px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 10px; margin: 12px auto 18px; }
.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.modal-header h2 {
margin: 0;
font-family: 'Syne', sans-serif;
font-size: 20px;
font-weight: 800;
flex: 1 1 auto;
min-width: 0;
line-height: 1.2;
}
.close-btn {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-muted);
flex: 0 0 32px;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
max-width: 32px;
max-height: 32px;
aspect-ratio: 1 / 1;
box-sizing: border-box;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.15s;
line-height: 0;
padding: 0;
flex-shrink: 0;
}
.close-btn:active { transform: scale(0.9); background: var(--surface-hover); }
.glass-panel {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.15);
}
.pm-header-img {
width: 100%; height: 130px; border-radius: var(--radius);
background: linear-gradient(135deg, rgba(0,220,255,0.05) 0%, rgba(124,92,252,0.08) 100%);
border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center;
margin-bottom: 18px; overflow: hidden; position: relative;
}
.pm-header-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(0,220,255,0.08), transparent 60%); }
#pm-img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6)); position: relative; z-index: 1; transition: opacity 0.2s ease; }
#pm-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; }
.pm-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 22px; padding: 14px; border-radius: var(--radius-sm); }
.pm-price-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.variant-section { margin-bottom: 20px; }
.variant-label { font-size: 11px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; display: block; margin-bottom: 10px; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-btn {
background: var(--glass-bg); color: var(--text-dim); border: 1px solid var(--glass-border);
border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
transition: all 0.15s; font-family: 'DM Sans', sans-serif;
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.pill-btn:active { transform: scale(0.96); }
.pill-btn.active { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }
.pill-btn.disabled { opacity: 0.25; pointer-events: none; }
#pm-action-block { margin-top: 16px; }
.pm-price-label { font-size: 15px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.1px; }
#pm-qty-controls {
display: none;
position: relative;
overflow: hidden;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(0, 220, 255, 0.09);
border: 1px solid rgba(0, 220, 255, 0.30);
padding: 8px 12px;
border-radius: var(--radius-sm);
box-shadow: 0 4px 20px rgba(0, 220, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.12);
cursor: pointer;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}
#pm-qty-controls::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(128deg, rgba(0,220,255,0.18) 0%, rgba(255,255,255,0.05) 28%, transparent 52%);
opacity: 0.7;
}
#pm-qty-controls::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset -8px -6px 0 -9px rgba(0,220,255,0.14), inset 0 -7px 0 -6px rgba(255,255,255,0.08);
opacity: 0.6;
}
#pm-qty-controls:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(0, 220, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
background: rgba(0, 220, 255, 0.13);
border-color: rgba(0, 220, 255, 0.42);
}
#pm-qty-controls:active {
transform: scale(0.988);
}
#pm-qty-controls > * { position: relative; z-index: 1; }
#pm-qty-controls .qty-btn {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(0, 220, 255, 0.28);
color: var(--cyan);
}
#pm-qty-val {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
direction: ltr;
unicode-bidi: plaintext;
letter-spacing: 0.01em;
}
#pm-qty-val .pm-qty-p { color: var(--cyan); font-weight: 800; }
#pm-qty-val .pm-qty-sep { opacity: 0.4; font-weight: 500; }
[data-theme="light"] #pm-qty-controls {
background: rgba(255, 255, 255, 0.50) !important;
border-color: rgba(255, 255, 255, 0.82) !important;
box-shadow: 0 4px 22px rgba(31, 38, 135, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}
[data-theme="light"] #pm-qty-controls::before {
background: linear-gradient(128deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 26%, transparent 50%) !important;
}
[data-theme="light"] #pm-qty-controls::after {
box-shadow: inset -8px -6px 0 -9px rgba(255,255,255,0.88), inset 0 -7px 0 -6px rgba(255,255,255,0.5) !important;
}
[data-theme="light"] #pm-qty-controls .qty-btn {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
.qty-btn {
background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
width: 38px; height: 38px; font-size: 20px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: 0.1s; line-height: 0; padding: 0;
}
.qty-btn:active { transform: scale(0.9); background: var(--surface-hover); }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: var(--radius-sm); margin-bottom: 10px; }
/* Ставим название и цену в одну строку */
.cart-item-info {
display: flex !important;
align-items: center !important; /* Центрируем по вертикали */
gap: 8px !important; /* Расстояние между названием и ценой */
flex-wrap: wrap !important; /* Если название длинное, цена аккуратно перенесется */
}
.cart-item-info h4 {
font-size: 15px !important; /* Было больше, делаем аккуратнее */
margin: 0 !important;
}
.cart-item-info p {
font-size: 15px !important;
margin: 0 !important;
font-weight: 600 !important; /* Делаем цену чуть жирнее, чтобы выделялась */
color: #ffd700 !important; /* По желанию: можно сделать цвет звезд/цены золотым */
}
.cart-controls { display: flex; align-items: center; gap: 6px; }
.cart-controls span { font-weight: 800; font-size: 14px; min-width: 20px; text-align: center; font-family: 'Syne', sans-serif; }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: var(--radius-sm); margin-top: 4px; margin-bottom: 16px; }
.cart-total-row span { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.cart-total-row strong { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; color: var(--cyan); }
.cart-promo-row { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); margin-top: 8px; }
.cart-promo-row input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; padding: 6px 4px; }
.cart-promo-row button { flex: 0 0 auto; background: rgba(0,220,255,.14); border: 1px solid rgba(0,220,255,.3); color: var(--cyan); border-radius: 10px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cart-promo-row button:disabled { opacity: .5; cursor: default; }
#cart-promo-status { font-size: 12.5px; padding: 0 4px 6px; min-height: 1em; }
#cart-promo-status.ok { color: #42ff96; }
#cart-promo-status.err { color: #ff6b6b; }
.checkout-discount-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.checkout-discount-row span { font-size: 13px; color: var(--text-muted); }
.checkout-discount-row strong { color: #42ff96; font-family: 'Syne', sans-serif; font-size: 16px; }
.cabinet-pro-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.cabinet-pro-row-label { font-size: 13px; color: var(--text-muted); }
.cabinet-pro-row strong { color: #ffc94d; font-family: 'Syne', sans-serif; font-size: 18px; }
.checkout-cashback-row { margin-top: -2px; }
.checkout-cashback-label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; font-size: 13px; color: var(--text-muted); }
.checkout-cashback-label input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--cyan); cursor: pointer; flex: 0 0 auto; }
.checkout-cashback-row strong { color: #ffc94d; font-family: 'Syne', sans-serif; font-size: 16px; }
#checkout-summary-list { padding: 4px 0 8px; }
.checkout-summary-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 4px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.checkout-summary-item:last-child { border-bottom: none; }
.checkout-summary-item .name { color: var(--text); flex: 1; }
.checkout-summary-item .qty { color: var(--text-muted); flex: 0 0 auto; }
.checkout-summary-item .price { color: var(--cyan); font-weight: 700; flex: 0 0 auto; }
.checkout-pay-methods { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 4px 0 16px; }
.checkout-pay-btn { transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.checkout-pay-btn:active { transform: scale(0.94); opacity: .85; }
.checkout-pay-btn {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.checkout-pay-ico { font-size: 20px; }
.checkout-pay-btn.is-active { border-color: var(--cyan); color: var(--text); box-shadow: 0 0 0 1px var(--cyan) inset, 0 0 18px rgba(0,220,255,.18); }
/* Убираем огромный SVG-замок из checkout-modal (он масштабировался от стилей корзины) */
#checkout-modal .cart-secure { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; padding: 10px 4px 4px; }
#checkout-modal .cart-secure svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--text-muted); fill: none; }
.checkout-btn {
width: 100%; padding: 16px; background: rgba(0,220,255,0.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0,220,255,0.32); border-radius: var(--radius-sm); color: var(--cyan); font-size: 15px; font-weight: 700;
font-family: 'Syne', sans-serif; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); transition: all 0.2s ease;
}
.checkout-btn:hover { background: rgba(0,220,255,0.14); border-color: rgba(0,220,255,0.6); box-shadow: 0 0 22px rgba(0,220,255,0.3), inset 0 1px 0 rgba(255,255,255,0.1); }
.checkout-btn:active { transform: scale(0.98); background: rgba(0,220,255,0.22); box-shadow: 0 0 36px rgba(0,220,255,0.5); }
.checkout-btn:disabled { opacity: .55; cursor: default; }
.profile-card { display: flex; align-items: center; gap: 14px; border-radius: var(--radius); padding: 16px; margin-bottom: 18px; }
.avatar-big { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--purple)); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 4px 16px var(--cyan-glow); }
.profile-info h3 { margin: 0 0 3px; font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800; }
.profile-info p { margin: 0; font-size: 12px; color: var(--text-muted); }
.stat-blocks { display: flex; gap: 8px; margin-bottom: 20px; }
.stat-block { flex: 1; padding: 14px 10px; border-radius: var(--radius-sm); text-align: center; }
.stat-block h4 { margin: 0 0 4px; font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: var(--cyan); }
.stat-block h4[style] { font-size: 13px !important; }
.stat-block p { margin: 0; font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
/* ПК: кабинет чуть уже и по центру (не ломает transform-анимацию) */
@media (min-width: 481px) {
#profile-modal.modal {
left: max(24px, calc(50% - 370px));
right: max(24px, calc(50% - 370px));
width: auto;
max-width: 740px;
}
}
/* Боковые поля кабинета/настроек */
#profile-modal.modal {
padding: 6px 14px 16px !important;
}
#profile-modal > .modal-drag-pill {
margin: 8px auto 10px;
}
#profile-modal .modal-header {
margin-bottom: 12px;
}
#profile-modal .profile-card {
padding: 14px;
margin-bottom: 14px;
}
/* Кабинет: 3 карточки с иконками (на ПК — ширина как у остальных окон).
По умолчанию (баланс умещается) все три — ровные трети, как и были
(basis 33.333%, рост выключен — сумма ровно 100%, никто ничего не
отжимает). Если цифра баланса длинная и не помещается в свою треть —
у .stat-card--balance/--days стоит min-width: max-content, то есть
карточка не может стать УЖЕ своего реального содержимого, а
flex-shrink:0 запрещает её сжимать вообще. Единственная карточка,
которой разрешено сжиматься (flex-shrink:1, min-width:0) — это
.stat-card--sub: именно она отдаёт освободившееся место балансу,
а "Дней осталось" при этом остаётся нетронутой. */
#profile-modal .stat-blocks {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
#profile-modal .stat-card {
flex: 0 1 33.333%;
}
#profile-modal .stat-card--balance,
#profile-modal .stat-card--days {
flex-shrink: 0;
min-width: max-content;
}
#profile-modal .stat-card--sub {
flex-shrink: 1;
min-width: 0;
}
#profile-modal .stat-card {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 92px;
height: 92px;
padding: 10px 8px;
border-radius: 22px;
text-align: left;
background: rgba(12, 18, 34, 0.72);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: relative;
overflow: visible;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
transform: scale(1);
transition:
transform 0.16s cubic-bezier(0.22, 0.82, 0.2, 1),
box-shadow 0.32s ease,
border-color 0.28s ease,
background 0.28s ease,
filter 0.22s ease;
}
#profile-modal .stat-card:hover {
filter: none;
}
#profile-modal .stat-card:active,
#profile-modal .stat-card.is-pressed {
transform: scale(0.955);
filter: none;
}
/* Hover: только внешний box-shadow. Контурный filter не меняем —
иначе при переходе «тухнет» на долю секунды (особенно у 1 и 3). */
#profile-modal .stat-card--balance:hover {
border-color: rgba(255, 196, 64, 0.32);
background: rgba(30, 24, 12, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(255, 180, 40, 0.13),
0 0 48px 16px rgba(245, 150, 30, 0.08);
}
#profile-modal .stat-card--balance:active,
#profile-modal .stat-card--balance.is-pressed {
border-color: rgba(255, 196, 64, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 16px 4px rgba(255, 180, 40, 0.11),
0 0 36px 12px rgba(245, 150, 30, 0.06);
}
#profile-modal .stat-card--sub:hover {
border-color: rgba(90, 255, 110, 0.32);
background: rgba(12, 30, 16, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(60, 255, 90, 0.13),
0 0 48px 16px rgba(50, 220, 80, 0.08);
}
#profile-modal .stat-card--sub:active,
#profile-modal .stat-card--sub.is-pressed {
border-color: rgba(90, 255, 110, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 16px 4px rgba(60, 255, 90, 0.11),
0 0 36px 12px rgba(50, 220, 80, 0.06);
}
#profile-modal .stat-card--sub.is-sub-active:hover {
border-color: rgba(90, 255, 110, 0.32);
background: rgba(12, 30, 16, 0.76);
box-shadow:
inset 0 1px 0 rgba(200, 255, 180, 0.1),
0 0 22px 6px rgba(60, 255, 90, 0.13),
0 0 48px 16px rgba(50, 220, 80, 0.08);
}
#profile-modal .stat-card--sub.is-sub-inactive:hover {
border-color: rgba(140, 160, 180, 0.32);
background: rgba(18, 24, 34, 0.8);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 18px 5px rgba(120, 140, 160, 0.1),
0 0 40px 12px rgba(100, 120, 140, 0.05);
}
#profile-modal .stat-card--days:hover {
border-color: rgba(90, 255, 110, 0.32);
background: rgba(12, 30, 16, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(60, 255, 90, 0.13),
0 0 48px 16px rgba(50, 220, 80, 0.08);
}
#profile-modal .stat-card--days:active,
#profile-modal .stat-card--days.is-pressed {
border-color: rgba(90, 255, 110, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 16px 4px rgba(60, 255, 90, 0.11),
0 0 36px 12px rgba(50, 220, 80, 0.06);
}
#profile-modal .stat-card--days.days-glow-warn:hover {
border-color: rgba(210, 230, 70, 0.32);
background: rgba(28, 30, 12, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(200, 220, 60, 0.13),
0 0 48px 16px rgba(180, 200, 40, 0.08);
}
#profile-modal .stat-card--days.days-glow-danger:hover,
#profile-modal .stat-card--days.days-glow-critical:hover {
border-color: rgba(255, 70, 70, 0.32);
background: rgba(30, 12, 14, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(255, 60, 60, 0.13),
0 0 48px 16px rgba(220, 40, 40, 0.08);
}
@media (hover: none) {
#profile-modal .stat-card:hover {
filter: none;
border-color: inherit;
background: rgba(12, 18, 34, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#profile-modal .stat-card--balance:hover,
#profile-modal .stat-card--sub:hover,
#profile-modal .stat-card--days:hover {
border-color: inherit;
background: rgba(12, 18, 34, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
}
@media (prefers-reduced-motion: reduce) {
#profile-modal .stat-card {
transition: none;
}
}
#profile-modal .stat-contour {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: visible;
display: block;
}
#profile-modal .stat-contour-glow {
fill: none;
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 0 100;
transition: stroke-dasharray 0.7s cubic-bezier(0.22, 0.82, 0.2, 1), stroke 0.45s ease, filter 0.45s ease;
}
#profile-modal.contours-intro .stat-contour-glow {
transition: stroke-dasharray 2.6s cubic-bezier(0.16, 0.84, 0.18, 1);
}
#profile-modal .stat-card > :not(.stat-contour) {
position: relative;
z-index: 1;
}
#profile-modal .stat-card--balance {
overflow: visible;
border-color: transparent;
/* По просьбе: свечение-подсветка (box-shadow) не должно быть
постоянным — только на :hover/:active, как было изначально.
Alpha 0 в покое. Рассеянность самой обводки теперь достигается
через .stat-contour-glow ниже (она и остаётся видна всегда). */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(255, 180, 40, 0),
0 0 48px 16px rgba(245, 150, 30, 0);
}
#profile-modal .stat-card--balance .stat-contour-glow {
stroke: #F5C84A;
/* ВАЖНО: карточка сидит всего в ~6px от реальной границы обрезки
(.profile-slider-viewport / .profile-slide, overflow-x:hidden
ради анимации свайпа между Кабинетом и Настройками — трогать
рискованно, сломает переключение вкладок). Любой blur шире
6px гарантированно обрезается набок, поэтому все предыдущие
попытки с 22-44px размытием всегда выглядели жёстко слева и
справа, как их ни настраивай. По просьбе сделали ярче как у
центральной карточки (полная непрозрачность обводки + более
плотное свечение), но радиус blur оставили в пределах ~5px,
чтобы не вернуть обрезку. */
stroke-width: 2.15;
stroke-opacity: 1;
filter:
drop-shadow(0 0 2px rgba(255, 205, 70, 0.8))
drop-shadow(0 0 5px rgba(245, 170, 40, 0.45));
}
/* По просьбе: контурная полоса — постоянный информационный элемент
карточки (как у центральной карточки подписки), видна всегда, а
не только при наведении/нажатии. */
#profile-modal .stat-card--balance .stat-contour-glow,
#profile-modal .stat-card--days .stat-contour-glow {
opacity: 1;
transition: stroke-dasharray 0.7s cubic-bezier(0.22, 0.82, 0.2, 1), stroke 0.45s ease, filter 0.45s ease;
}
#profile-modal .stat-card--balance #stat-balance {
background: linear-gradient(165deg, #FFF3C2 0%, #FFE08A 28%, #F5B942 55%, #D4922A 78%, #B87618 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
filter: drop-shadow(0 1px 1px rgba(80, 40, 0, 0.35));
}
#profile-modal .stat-card--sub {
border-color: transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(60, 255, 90, 0),
0 0 48px 16px rgba(50, 220, 80, 0);
gap: 6px;
padding-left: 8px;
padding-right: 8px;
}
#profile-modal .stat-card--sub .stat-contour-glow {
stroke: #5CFF78;
filter:
drop-shadow(0 0 4px rgba(80, 255, 110, 0.65))
drop-shadow(0 0 8px rgba(50, 220, 80, 0.28));
}
#profile-modal .stat-card--sub.is-sub-inactive .stat-contour-glow {
stroke: rgba(140, 160, 180, 0.45);
filter: none;
stroke-dasharray: 0 100 !important;
}
#profile-modal .stat-card--sub.sub-glow-warn .stat-contour-glow {
animation: subContourGlitchYellow 2.6s steps(2, end) infinite;
}
#profile-modal .stat-card--sub.sub-glow-danger .stat-contour-glow {
animation: subContourGlitchRed 1.7s steps(2, end) infinite;
}
#profile-modal .stat-card--sub.sub-glow-critical .stat-contour-glow {
stroke: #FF3B3B;
filter:
drop-shadow(0 0 7px rgba(255, 50, 50, 0.9))
drop-shadow(0 0 16px rgba(220, 30, 30, 0.55));
animation: subContourPulseRed 1.15s ease-in-out infinite;
}
@keyframes subContourGlitchYellow {
0%, 72%, 100% {
stroke: #5CFF78;
filter:
drop-shadow(0 0 6px rgba(80, 255, 110, 0.75))
drop-shadow(0 0 14px rgba(60, 220, 90, 0.4));
opacity: 1;
}
74%, 78% {
stroke: #FFE566;
filter:
drop-shadow(0 0 5px rgba(255, 220, 60, 0.9))
drop-shadow(0 0 12px rgba(255, 190, 40, 0.5));
opacity: 0.55;
}
76% {
stroke: #FFF2A0;
opacity: 1;
}
86%, 90% {
stroke: #FFE566;
opacity: 0.4;
}
}
@keyframes subContourGlitchRed {
0%, 68%, 100% {
stroke: #5CFF78;
filter:
drop-shadow(0 0 6px rgba(80, 255, 110, 0.55))
drop-shadow(0 0 12px rgba(60, 220, 90, 0.3));
opacity: 1;
}
70%, 76% {
stroke: #FF4D4D;
filter:
drop-shadow(0 0 6px rgba(255, 60, 60, 0.9))
drop-shadow(0 0 14px rgba(220, 30, 30, 0.5));
opacity: 0.45;
}
73% { opacity: 1; }
82%, 88% {
stroke: #FF6B6B;
opacity: 0.35;
}
}
@keyframes subContourPulseRed {
0%, 100% {
opacity: 0.75;
filter:
drop-shadow(0 0 5px rgba(255, 50, 50, 0.7))
drop-shadow(0 0 12px rgba(220, 30, 30, 0.4));
}
50% {
opacity: 1;
filter:
drop-shadow(0 0 9px rgba(255, 70, 70, 1))
drop-shadow(0 0 20px rgba(255, 40, 40, 0.65));
}
}
#profile-modal .stat-card--days {
border-color: transparent;
/* См. пояснение у .stat-card--balance — box-shadow подсветка
снова только на :hover/:active, alpha 0 в покое. */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(60, 255, 90, 0),
0 0 48px 16px rgba(50, 220, 80, 0);
}
/* См. пояснение у .stat-card--balance .stat-contour-glow — доступно
только ~6px до реальной границы обрезки, размытие подогнано под
это расстояние, иначе оно просто срезается слева/справа. */
#profile-modal .stat-card--days .stat-contour-glow {
stroke: #5CFF78;
stroke-width: 2.15;
stroke-opacity: 1;
filter:
drop-shadow(0 0 2px rgba(90, 255, 120, 0.8))
drop-shadow(0 0 5px rgba(60, 220, 90, 0.45));
}
#profile-modal .stat-card--days.days-glow-warn .stat-contour-glow {
stroke: #D4E85A;
stroke-width: 2.15;
stroke-opacity: 1;
filter:
drop-shadow(0 0 2px rgba(216, 235, 90, 0.8))
drop-shadow(0 0 5px rgba(180, 200, 40, 0.45));
}
#profile-modal .stat-card--days.days-glow-danger .stat-contour-glow {
stroke: #FF5A5A;
stroke-width: 2.15;
stroke-opacity: 1;
filter:
drop-shadow(0 0 2px rgba(255, 90, 90, 0.8))
drop-shadow(0 0 5px rgba(220, 40, 40, 0.45));
}
#profile-modal .stat-card--days.days-glow-critical .stat-contour-glow {
stroke: #FF2E2E;
stroke-width: 2.3;
stroke-opacity: 1;
filter:
drop-shadow(0 0 2.5px rgba(255, 60, 60, 0.85))
drop-shadow(0 0 5.5px rgba(220, 30, 30, 0.5));
}
@media (prefers-reduced-motion: reduce) {
#profile-modal .stat-contour-glow { transition: none; }
#profile-modal .stat-card--sub.sub-glow-warn .stat-contour-glow,
#profile-modal .stat-card--sub.sub-glow-danger .stat-contour-glow,
#profile-modal .stat-card--sub.sub-glow-critical .stat-contour-glow {
animation: none;
}
}
#profile-modal .stat-card-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-width: 0;
flex: 0 1 auto;
}
#profile-modal .stat-card::before,
#profile-modal .stat-card::after {
display: none !important;
}
#profile-modal .stat-card-icon {
position: relative;
width: 52px;
height: 52px;
display: grid;
place-items: center;
flex-shrink: 0;
}
#profile-modal .stat-card--balance .stat-card-icon {
width: 58px;
height: 58px;
perspective: 640px;
perspective-origin: 50% 42%;
margin-top: 0;
transform-style: preserve-3d;
overflow: visible;
}
#profile-modal .stat-card-icon::before {
content: '';
position: absolute;
inset: 6px;
border-radius: 50%;
filter: blur(10px);
opacity: 0.55;
pointer-events: none;
}
#profile-modal .stat-card--balance .stat-card-icon::before {
inset: 2px;
background: radial-gradient(circle, rgba(255, 196, 64, 0.85), transparent 70%);
transform: translateZ(-18px);
}
#profile-modal .stat-card--balance.coin-enter .stat-card-icon::before {
animation: cabinetCoinGlow 1.3s cubic-bezier(0.22, 0.68, 0.36, 1) both;
}
#profile-modal .stat-card--sub .stat-card-icon::before {
display: none;
}
/* Подписка — контурное свечение вместо толстой рамки */
#profile-modal .stat-card--sub {
border-color: transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 0 22px 6px rgba(60, 255, 90, 0),
0 0 48px 16px rgba(50, 220, 80, 0);
gap: 6px;
padding-left: 8px;
padding-right: 8px;
}
#profile-modal .stat-card--sub.is-sub-active {
border-color: transparent;
box-shadow:
inset 0 1px 0 rgba(200, 255, 180, 0.1),
0 0 22px 6px rgba(60, 255, 90, 0),
0 0 48px 16px rgba(50, 220, 80, 0);
}
#profile-modal .stat-card--sub.is-sub-inactive {
border-color: transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 18px 5px rgba(120, 140, 160, 0),
0 0 40px 12px rgba(100, 120, 140, 0);
}
#profile-modal .stat-card--sub .stat-card-icon {
width: 54px;
height: 54px;
margin-top: 0;
overflow: visible;
}
#profile-modal .sub-seal {
position: relative;
width: 52px;
height: 52px;
display: grid;
place-items: center;
}
#profile-modal .sub-seal-spin {
position: absolute;
inset: 0;
z-index: 1;
transform-origin: 50% 50%;
animation: subSealSpin 16s linear infinite;
will-change: transform;
}
#profile-modal .sub-seal-spin img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
filter: none !important;
}
#profile-modal .sub-seal-check {
position: relative;
z-index: 2;
width: 52px !important;
height: 52px !important;
display: block;
overflow: visible;
pointer-events: none;
/* галочка вне .sub-seal-spin — не крутится; без общей тени иконок */
filter: none !important;
}
#profile-modal .stat-card--sub .stat-card-icon svg.sub-seal-check {
filter: none !important;
}
/* Галочка/крестик — два path в одном svg, переключаем видимость по
классу is-sub-active/is-sub-inactive на карточке (см. app.js). По
умолчанию (до того как JS узнает статус) показана галочка — как и
было раньше, чтобы не мигало пустой иконкой при первой отрисовке. */
#profile-modal .sub-seal-mark {
transition: opacity 0.35s ease;
}
#profile-modal .sub-seal-mark--check {
opacity: 1;
visibility: visible;
}
#profile-modal .sub-seal-mark--cross {
opacity: 0;
visibility: hidden;
}
/* !important + visibility на случай, если что-то ещё в каскаде (или
закэшированная старая копия файла) выставляет opacity:1 обеим
меткам сразу — раньше галочка оставалась видна поверх крестика. */
#profile-modal .stat-card--sub.is-sub-inactive .sub-seal-mark--check {
opacity: 0 !important;
visibility: hidden !important;
}
#profile-modal .stat-card--sub.is-sub-inactive .sub-seal-mark--cross {
opacity: 1 !important;
visibility: visible !important;
}
#profile-modal .stat-card--sub.is-sub-active .sub-seal-mark--check {
opacity: 1;
visibility: visible;
}
#profile-modal .stat-card--sub.is-sub-active .sub-seal-mark--cross {
opacity: 0;
visibility: hidden;
}
#profile-modal .stat-card--sub.is-sub-inactive .sub-seal-spin {
filter: grayscale(0.9) brightness(0.72);
animation-duration: 22s;
/* По просьбе: при неактивной подписке анимация вращения печати
останавливается вместо того, чтобы просто крутиться медленнее. */
animation-play-state: paused;
}
#profile-modal .stat-card--sub .stat-card-value {
min-height: 0;
justify-content: flex-start;
font-size: 15px;
line-height: 1.15;
}
#profile-modal .stat-card--sub .stat-card-value.is-active {
color: #6bff78;
font-size: 15px;
font-weight: 800;
text-shadow: 0 0 10px rgba(80, 255, 100, 0.4);
letter-spacing: -0.01em;
}
#profile-modal .stat-card--sub .stat-card-label {
margin: 0;
color: rgba(160, 185, 200, 0.75);
text-transform: none;
letter-spacing: 0.01em;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
}
#profile-modal .stat-card--sub.is-sub-active .stat-card-label {
color: #5fd86c;
}
@keyframes subSealSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
#profile-modal .sub-seal-spin {
animation: none;
}
}
#profile-modal .stat-card--days .stat-card-icon::before {
background: radial-gradient(circle, rgba(110, 180, 255, 0.5), transparent 72%);
inset: 0;
}
#profile-modal .stat-card--days .stat-card-icon {
width: 64px;
height: 64px;
overflow: visible;
}
#profile-modal .stat-card--days .days-cal {
width: 62px !important;
height: 62px !important;
display: block;
overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
#profile-modal .days-hand-min animateTransform,
#profile-modal .days-hand-hour animateTransform {
display: none;
}
}
#profile-modal .stat-card-icon svg,
#profile-modal .stat-card-icon .stat-card-img {
position: relative;
z-index: 1;
width: 48px;
height: 48px;
display: block;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
#profile-modal .stat-card--days .days-cal {
width: 62px !important;
height: 62px !important;
filter:
drop-shadow(0 5px 10px rgba(0, 0, 0, 0.48))
drop-shadow(0 1px 2px rgba(80, 140, 220, 0.25));
}
/* Жёсткий размер — нельзя раздуться до intrinsic 2K PNG */
#profile-modal .stat-card--balance .stat-card-img {
width: 54px !important;
height: 54px !important;
max-width: 54px !important;
max-height: 54px !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: contain;
pointer-events: none;
user-select: none;
transform-origin: 50% 50%;
transform-style: preserve-3d;
will-change: transform, filter;
flex: none;
}
#profile-modal .stat-card-icon .stat-card-img {
width: 54px !important;
height: 54px !important;
max-width: 54px !important;
max-height: 54px !important;
object-fit: contain;
pointer-events: none;
user-select: none;
transform-origin: 50% 50%;
transform-style: preserve-3d;
will-change: transform, filter;
}
#profile-modal .stat-card--balance.coin-enter .stat-card-img {
animation: cabinetCoinEnter 1.3s cubic-bezier(0.22, 0.68, 0.36, 1) both;
}
/* Раньше здесь были ещё и rotateX/rotateY/rotateZ — CSS крутило
плоский рендер монеты как флип-карточку, а ВНУТРИ канваса Three.js
одновременно крутил саму 3D-модель. Два независимых источника
вращения время от времени совпадали в развороте "на ребро"
одновременно — двойное схлопывание в линию, ощущалось как криво.
Просили: пусть после появления монета крутится "по оси" — так
будет только ОДНО вращение, честное и полностью 3D (см.
startCabinetCoin3DSpin в app.js — крутит саму модель непрерывно).
CSS теперь отвечает только за "появление" — без единого поворота.
Второй заход: просили сделать НАЧАЛО анимации другим — раньше
монета как бы вылетала из глубины экрана; теперь вместо этого
монета падает сверху и слегка подпрыгивает на месте, прежде чем
осесть (переброс scale выше 1 в момент "приземления" на 45% —
это и есть отскок). Длительность короче (1.3s вместо 1.8s) —
отскоку идёт более резкий темп, чем плавному вылету. */
@keyframes cabinetCoinEnter {
0% {
opacity: 0;
transform: translate3d(0, -52px, -30px) scale(0.55);
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)) brightness(1.1);
}
45% {
opacity: 1;
transform: translate3d(0, 6px, 8px) scale(1.16);
filter: drop-shadow(0 10px 20px rgba(255, 190, 50, 0.55)) brightness(1.28) contrast(1.08);
}
68% {
transform: translate3d(0, -5px, 2px) scale(0.93);
filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.3)) brightness(1.04);
}
86% {
transform: translate3d(0, 1px, 0) scale(1.03);
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34)) brightness(1.01);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)) brightness(1);
}
}
@keyframes cabinetCoinGlow {
0% { opacity: 0.1; transform: translateZ(-40px) scale(0.5); }
45% { opacity: 0.9; transform: translateZ(-4px) scale(1.3); }
70% { opacity: 0.4; transform: translateZ(-20px) scale(0.9); }
100% { opacity: 0.55; transform: translateZ(-18px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
#profile-modal .stat-card--balance.coin-enter .stat-card-img,
#profile-modal .stat-card--balance.coin-enter .stat-card-icon::before {
animation: none;
}
}
#profile-modal .stat-card-value {
margin: 0;
min-height: 22px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 1.1;
color: #f4f7ff;
letter-spacing: -0.02em;
}
#profile-modal .stat-card--balance .stat-card-value {
margin-top: 0;
/* Не переносить длинное число на 2 строки — карточка теперь сама
расширяется под содержимое (см. .stat-blocks выше), поэтому
перенос тут больше не нужен и только испортит вид. */
white-space: nowrap;
}
#profile-modal .stat-card-value.is-muted {
font-size: 13px;
color: var(--text-dim);
}
#profile-modal .stat-card-value.is-active {
color: #fff;
font-size: 15px;
letter-spacing: 0.02em;
}
#profile-modal .stat-card-label {
margin: 0;
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.45px;
line-height: 1.2;
}
[data-theme="light"] #profile-modal .stat-card {
background: rgba(255, 255, 255, 0.58);
border-color: rgba(30, 60, 110, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] #profile-modal .stat-card-value {
color: #122038;
}
[data-theme="light"] #profile-modal .stat-card--sub .stat-card-value.is-active {
color: #1a9a28;
text-shadow: none;
}
[data-theme="light"] #profile-modal .stat-card--sub.is-sub-active .stat-card-label {
color: #2a9a38;
}
/* Только узкий экран (телефон) — иконка сверху, текст снизу */
@media (max-width: 480px) {
#profile-modal.modal {
left: 0;
right: 0;
width: auto;
max-width: none;
}
#profile-modal .stat-blocks {
gap: 7px;
}
#profile-modal .stat-card {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 108px;
height: auto;
padding: 10px 4px 8px;
overflow: visible;
}
#profile-modal .stat-card--balance {
overflow: visible;
}
#profile-modal .stat-card-text {
align-items: center;
text-align: center;
width: 100%;
flex: 0 1 auto;
}
#profile-modal .stat-card-value {
justify-content: center;
font-size: 15px;
min-height: 18px;
text-align: center;
}
#profile-modal .stat-card-label {
font-size: 9px;
letter-spacing: 0.02em;
text-align: center;
white-space: normal;
line-height: 1.15;
max-width: 100%;
}
#profile-modal .stat-card--sub .stat-card-value.is-active {
font-size: 13px;
}
#profile-modal .stat-card--sub .stat-card-label {
font-size: 9px;
}
#profile-modal .stat-card-icon {
width: 42px;
height: 42px;
}
#profile-modal .stat-card--balance .stat-card-icon {
width: 46px;
height: 46px;
}
#profile-modal .stat-card--sub .stat-card-icon {
width: 44px;
height: 44px;
}
#profile-modal .stat-card--days .stat-card-icon {
width: 46px;
height: 46px;
}
#profile-modal .sub-seal,
#profile-modal .sub-seal-check {
width: 40px !important;
height: 40px !important;
}
#profile-modal .stat-card--days .days-cal {
width: 44px !important;
height: 44px !important;
}
#profile-modal .stat-card-icon svg {
width: 40px;
height: 40px;
}
#profile-modal .stat-card-icon .stat-card-img,
#profile-modal .stat-card--balance .stat-card-img {
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
}
}
@media (max-width: 380px) {
#profile-modal .stat-card { min-height: 100px; padding: 8px 3px 6px; gap: 4px; }
#profile-modal .stat-card-icon { width: 38px; height: 38px; }
#profile-modal .stat-card--balance .stat-card-icon { width: 42px; height: 42px; margin-top: 0; }
#profile-modal .stat-card--sub .stat-card-icon { width: 40px; height: 40px; }
#profile-modal .stat-card--days .stat-card-icon { width: 42px; height: 42px; }
#profile-modal .sub-seal,
#profile-modal .sub-seal-check {
width: 36px !important;
height: 36px !important;
}
#profile-modal .stat-card-icon svg { width: 36px; height: 36px; }
#profile-modal .stat-card--days .days-cal { width: 40px !important; height: 40px !important; }
#profile-modal .stat-card-icon .stat-card-img,
#profile-modal .stat-card--balance .stat-card-img {
width: 40px !important;
height: 40px !important;
max-width: 40px !important;
max-height: 40px !important;
}
#profile-modal .stat-card-value { font-size: 14px; }
#profile-modal .stat-card--balance .stat-card-value { margin-top: 0; }
#profile-modal .stat-card--sub .stat-card-value.is-active { font-size: 12px; }
#profile-modal .stat-card-value.is-active,
#profile-modal .stat-card-value.is-muted { font-size: 12px; }
#profile-modal .stat-card-label { font-size: 8px; }
}
#purch-id-block > p,
#purch-date-block > p {
color: var(--text-muted);
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.sub-list { display: flex; flex-direction: column; gap: 8px; }
.sub-item {
position: relative; overflow: hidden;
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px; border-radius: var(--radius-sm);
cursor: pointer;
/* Было transition: all — при переносе кнопки "Продлить" на вторую
строку (узкие экраны, длинное название + flex-wrap) высота карточки
менялась, и "all" анимировал в том числе layout-свойства с "bounce"
easing (cubic-bezier с превышением 1) — на 0.2с текст визуально
наезжал на перенесённую строку. Ограничили transition только
визуальными свойствами, чтобы reflow происходил мгновенно. */
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, filter 0.2s;
/* Единая высота для ВСЕХ карточек купленных товаров — раньше
min-height задавался только Xbox/Windows/PS+ (с фото-обложкой),
а обычные карточки без обложки были ниже — из-за этого список
выглядел неровным. Теперь высота одна для всех. */
min-height: 92px;
box-sizing: border-box;
}
/* Xbox / Windows / PS+ — тот же min-height, но !important нужен только
тут, чтобы более специфичные фото-скины его не переопределили. */
#profile-modal #active-subs .sub-item.skin-xbox,
#profile-modal #active-subs .sub-item.skin-windows,
#profile-modal #active-subs .sub-item.skin-ps,
#profile-modal #active-subs .sub-item.skin-yandex {
padding: 10px 12px !important;
min-height: 92px !important;
box-sizing: border-box;
align-items: center;
}
@media (max-width: 480px) {
/* Нормальная высота карточки на мобильном (было 118px — слишком
много). 80px хватает на 3 строки текста и не раздувает список. */
#profile-modal #active-subs .sub-item {
min-height: 80px;
}
#profile-modal #active-subs .sub-item.skin-xbox,
#profile-modal #active-subs .sub-item.skin-windows,
#profile-modal #active-subs .sub-item.skin-ps {
min-height: 80px !important;
}
}
/* PS+ (skin-ps) добавлен позже в app.js (getPurchaseSkinClass:
'ps\+|ps\s*plus|playstation' -> 'skin-ps', + ![]()
),
но соответствующих правил тут не было вообще — карточка падала в
дефолтный .sub-item без ограничения размера, из-за чего сырой
![]()
рендерился в исходном размере файла
(та самая "гигантская иконка"). Правила ниже — по образцу Xbox/Windows. */
#profile-modal #active-subs .sub-item.skin-xbox .sub-xbox-logo,
#profile-modal #active-subs .sub-item.skin-windows .sub-windows-logo,
#profile-modal #active-subs .sub-item.skin-ps .sub-ps-logo,
#profile-modal #active-subs .sub-item.skin-claude .sub-claude-logo {
width: 40px;
height: 40px;
}
#profile-modal #active-subs .sub-item.skin-xbox .sub-text-col h4,
#profile-modal #active-subs .sub-item.skin-windows .sub-text-col h4,
#profile-modal #active-subs .sub-item.skin-ps .sub-text-col h4,
#profile-modal #active-subs .sub-item.skin-claude .sub-text-col h4 {
margin: 0 0 1px;
font-size: 15px;
}
#profile-modal #active-subs .sub-item.skin-xbox .sub-text-col p,
#profile-modal #active-subs .sub-item.skin-windows .sub-text-col p,
#profile-modal #active-subs .sub-item.skin-ps .sub-text-col p,
#profile-modal #active-subs .sub-item.skin-claude .sub-text-col p {
font-size: 13px;
line-height: 1.25;
}
#profile-modal #active-subs .sub-item.skin-xbox .renew-btn,
#profile-modal #active-subs .sub-item .renew-btn {
padding: 6px 15px;
font-size: 10px;
letter-spacing: 0.35px;
border-radius: 8px;
max-width: none;
line-height: 1.2;
}
#profile-modal #active-subs .purchases-hint {
padding: 10px 12px;
margin: 0 0 8px;
border-radius: 12px;
border: 1px dashed rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.03);
text-align: left;
}
#profile-modal #active-subs .purchases-hint-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin: 0 0 2px;
}
#profile-modal #active-subs .purchases-hint-sub {
font-size: 12px;
color: var(--text-muted);
margin: 0;
line-height: 1.3;
}
.sub-item > .purchase-skin {
/* !important обязателен: ".modal .glass-panel:not(.cart-item) > *"
(специфичность 0,4,0 — четыре класса) ставит всем прямым
потомкам карточки position:relative, что перебивало наш
position:absolute (специфичность всего 0,2,0). Из-за этого
видео ВСЁ ЭТО ВРЕМЯ было обычным блоком в потоке, а не
абсолютно спозиционированной подложкой — отсюда и гигантская
карточка изначально, и перенос текста под видео (flex-wrap),
и то, что видео рендерилось в исходном размере вместо
компактной обрезанной карточки. */
position: absolute !important;
inset: 0;
z-index: 0 !important;
pointer-events: none;
border-radius: inherit;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 1;
transition: opacity 0.55s ease;
}
.sub-item.is-fx-active > .purchase-skin {
opacity: 0;
}
/* Steam-скин —