/* ===================================================================== СУНДУК — shared stylesheet for all pages (responsive desktop + mobile) ===================================================================== */ :root { --bg-0: #17181B; --card: #252528; --card-2: #2c2c30; --line: #2a2a2e; --text: #ececec; --text-dim: #a8a8a8; --text-mute: #6c6c70; --accent: #F99057; --accent-2: #FEC701; --accent-3: #FEAE46; --pill-bg: #2C1710; --pill-bg-hover: #3d241a; --cats-bg: #241815; --danger: #F21E1E; --pink: #ff2d8a; --mint: #2bf0c2; /* акцентный градиент (кнопки «Купить», оплата и т.п.) */ --grad-1: #FEC701; --grad-2: #FEAE46; /* rgb свечения в шапке — задаётся числами, чтобы подставлять в rgba() */ --glow-rgb: 249, 144, 87; --maxw: 1100px; } /* ===================================================================== АНГЛИЙСКАЯ ВЕРСИЯ — бренд PlayTown, фиолетовая тема + пузыри вместо сундуков. Язык проставляется на (см. shared.js и инлайн-скрипт в страниц), поэтому вся перекраска — переопределением переменных. ===================================================================== */ html[lang="en"] { --accent: #A855F7; --accent-2: #8B5CF6; --accent-3: #A855F7; --pill-bg: #221733; --pill-bg-hover: #2f1f47; --cats-bg: #1d1430; /* мягкий переход между двумя насыщенными виолетами — без светлого, почти белого конца, который выглядел резко */ --grad-1: #5F2CB7; --grad-2: #7947BE; --glow-rgb: 139, 92, 246; } /* Логотип playtown почти квадратный (1500×1336) и с тенью-фильтром, дающей поля вокруг рисунка, поэтому высота заметно больше рыжего (29px). Строка шапки от этого выше кнопок — так и задумано. */ html[lang="en"] .logo-mark { height: 66px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg-0); color: var(--text); font-family: 'Montserrat', system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } a { color: inherit; } img { max-width: 100%; } body { display: flex; flex-direction: column; align-items: center; min-height: 100vh; } /* скролл заблокирован под открытой шторкой; top выставляется из JS, чтобы не терять позицию */ body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } .wrap { flex: 1 0 auto; width: 100%; } footer { align-self: stretch; } /* ====== HEADER BACKGROUND (orange glow + chests) ====== */ .page-header-bg { position: absolute; top: 0; left: 0; width: 100%; height: 620px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--glow-rgb),.30) 0%, rgba(var(--glow-rgb),.10) 42%, rgba(23,24,27,0) 100%), url("chests.svg") top center / 1240px auto repeat; background-color: transparent; -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%); } /* английская версия: фиолетовое свечение + пузыри из CSS вместо сундуков. Кольца (полые пузыри) разных размеров тайлятся с разным шагом, чтобы узор не читался как сетка; пара мелких залитых точек добавляет глубины. */ html[lang="en"] .page-header-bg { background: linear-gradient(180deg, rgba(var(--glow-rgb),.32) 0%, rgba(var(--glow-rgb),.12) 42%, rgba(23,24,27,0) 100%), radial-gradient(circle at 25% 30%, transparent 10px, rgba(168,85,247,.16) 11px, transparent 12px), radial-gradient(circle at 72% 62%, transparent 6px, rgba(168,85,247,.14) 7px, transparent 8px), radial-gradient(circle at 60% 18%, rgba(168,85,247,.12) 0 4px, transparent 5px), radial-gradient(circle at 12% 78%, rgba(168,85,247,.10) 0 6px, transparent 7px); background-size: auto, 230px 230px, 165px 165px, 135px 135px, 195px 195px; background-repeat: no-repeat, repeat, repeat, repeat, repeat; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px 24px 64px; position: relative; z-index: 1; } /* ====== LOGO ====== */ .logo { flex-shrink: 0; display: flex; align-items: center; gap: 4px; user-select: none; cursor: pointer; text-decoration: none; color: inherit; } .logo img { width: auto; object-fit: contain; display: block; } .logo-mark { height: 29px; } .logo-text-fallback { display: flex; align-items: center; gap: 6px; font: 800 18px/1 'Montserrat', sans-serif; letter-spacing: 1.5px; color: #fff; } .logo-text-fallback .chest { width: 28px; height: 22px; background: linear-gradient(180deg, #c98a4a, #8a4f23); border-radius: 4px; position: relative; box-shadow: inset 0 0 0 1.5px #4a2a14; } .logo-text-fallback .chest::before { content:""; position:absolute; left:0;right:0;top:42%; height:2px; background:#4a2a14; } .logo-text-fallback .chest::after { content:""; position:absolute; left:50%;top:55%; transform:translate(-50%,-50%); width:5px;height:7px; background:#f5c84a; border-radius:1px; box-shadow:0 0 0 1px #4a2a14; } /* ====== DESKTOP HEADER ====== */ header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 0; } .search { position: relative; background: var(--pill-bg); border-radius: 124px; height: 44px; display: flex; align-items: center; padding: 0 18px 0 46px; flex: 1 1 auto; min-width: 240px; max-width: 520px; } .search .s-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(255,255,255,.5); display: flex; } .search .s-ico svg { width: 18px; height: 18px; } .search input { background: transparent; border: 0; outline: 0; color: var(--text); font: 500 15px 'Montserrat', sans-serif; width: 100%; } .search input::placeholder { color: rgba(255,255,255,.45); } .pill-btn { background: var(--pill-bg); border: 0; color: var(--text); height: 44px; padding: 0 32px; border-radius: 124px; font: 600 14px 'Montserrat', sans-serif; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: background .2s; white-space: nowrap; flex-shrink: 0; text-decoration: none; } .pill-btn:hover { background: var(--pill-bg-hover); } .pill-btn img { width: 20px; height: 20px; object-fit: contain; } .pill-btn svg { width: 20px; height: 20px; } .cart-count { font-weight: 700; color: #fff; } /* кнопки без подписи (только иконка) — боковые отступы уже. У корзины отступы сужаются, когда счётчик скрыт, т.е. корзина пуста */ .pill-btn.fav-btn, .pill-btn.cart-btn.is-empty { padding: 0 20px; } /* Сердечко избранного (верхнее меню, закреплённая панель, боковое меню). Пусто — только контур; появились товары — заливка. Класс has-fav вешает refreshFav(). Так же, как #wishBtn на странице товара. */ [data-fav-link] svg { fill: none; stroke: currentColor; stroke-width: 2; } [data-fav-link].has-fav svg { fill: currentColor; } /* ====== СЖАТАЯ ЗАКРЕПЛЁННАЯ ШАПКА (десктоп) ====== */ .top-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 55; padding: 16px 0; /* горизонтальные отступы — во внутреннем блоке */ background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; } .top-sticky.show { transform: translateY(0); opacity: 1; pointer-events: auto; } /* геометрия строго как у .wrap, иначе панель не совпадёт с контентом страницы: max-width и padding должны быть на одном элементе, как там. Раскладка повторяет header.top — те же gap и space-between, чтобы при появлении панели элементы не перескакивали относительно обычной шапки */ .top-sticky-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* размеры логотипа, поиска и кнопок не переопределяем — берутся из основной шапки. Здесь только стекло вместо непрозрачной заливки */ .top-sticky .search, .top-sticky .pill-btn { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); } .top-sticky .pill-btn:hover { background: linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.10)), rgba(0,0,0,.6); } /* ====== CATEGORY NAV ====== */ nav.cats { width: 100%; height: 44px; background: var(--cats-bg); border-radius: 124px; display: flex; align-items: center; justify-content: space-around; padding: 0 18px; margin: 14px 0 64px; gap: 4px; overflow-x: auto; scrollbar-width: none; } nav.cats::-webkit-scrollbar { display: none; } nav.cats .cat-item { background: transparent; border: 0; color: #fff; font: 600 14px 'Montserrat', sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: color .15s, opacity .15s; white-space: nowrap; padding: 6px 12px; border-radius: 100px; text-decoration: none; } nav.cats .cat-item img { transition: opacity .15s; } nav.cats .cat-item:hover { color: rgba(255,255,255,.6); } nav.cats .cat-item:hover img { opacity: .55; } nav.cats .cat-item.active { color: rgba(255,255,255,.4); } nav.cats .cat-item.active img { opacity: .35; } nav.cats .cat-item img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; } nav.cats .cat-item svg { width: 18px; height: 18px; color: #fff; opacity: .9; flex-shrink: 0; } /* ====== MOBILE HEADER + DRAWER + TABBAR (hidden on desktop) ====== */ .m-header { display: none; } .m-tabbar { display: none; } .m-drawer-backdrop { display: none; } .m-drawer { display: none; } /* ====== HERO CAROUSEL ====== */ .hero { position: relative; height: 390px; border-radius: 18px; overflow: hidden; background: #1a1a1e; margin: 64px 0 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; display: flex; align-items: flex-end; padding: 40px; border-radius: 18px; } .hero-slide.active { opacity: 1; z-index: 1; } .hero-slide-bg-fallback { position:absolute; inset:0; background: radial-gradient(circle at 30% 40%, #2563d8 0%, rgba(37,99,216,0) 55%), radial-gradient(circle at 70% 70%, #1a1042 0%, rgba(26,16,66,0) 60%), linear-gradient(135deg, #0a0418 0%, #1a0d2e 100%); z-index: -1; } .hero-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 157px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 100%); pointer-events: none; z-index: 1; border-radius: 0 0 18px 18px; } .slide-plats { position: absolute; top: 28px; right: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; z-index: 3; justify-items: start; } .slide-plat { display: flex; align-items: center; gap: 8px; color: #fff; font: 700 18px 'Montserrat', sans-serif; } .slide-plat img { width: 22px; height: 22px; object-fit: contain; } .slide-plat svg { width: 22px; height: 22px; color: #fff; flex-shrink: 0; } .slide-content { position: absolute; top: 140px; right: 28px; z-index: 3; text-align: right; } .slide-sub { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 38px; color: #fff; letter-spacing: 0.5px; line-height: 1.05; text-transform: uppercase; } .slide-sub .from { display: block; font-size: 26px; font-weight: 600; margin-top: 6px; opacity: .95; } /* контейнер заголовка (для индивидуальной раскладки слайда) */ .slide-wordmark { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); z-index: 3; height: 52px; } .slide-wordmark img { height: 100%; width: auto; } .slide-title-big { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 52px; letter-spacing: 14px; color: #fff; z-index: 3; white-space: nowrap; } .hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 4; } .hero-dots span { width: 7px; height: 7px; background: rgba(255,255,255,.5); border-radius: 50%; cursor: pointer; transition: all .2s; } .hero-dots span.active { background: #fff; transform: scale(1.3); width: 22px; border-radius: 100px; } .arrow-zone { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 3; display: flex; align-items: center; cursor: pointer; } .arrow-zone.left { left: 0; justify-content: flex-start; padding-left: 16px; background: linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity .3s ease; } .arrow-zone.right { right: 0; justify-content: flex-end; padding-right: 16px; background: linear-gradient(270deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity .3s ease; } .hero:hover .arrow-zone { opacity: 1; } .slider-arrow { width: 48px; height: 48px; background: transparent; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; z-index: 4; opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .35s ease, color .15s ease; user-select: none; pointer-events: none; } .arrow-zone.right .slider-arrow { transform: translateX(8px); } .hero:hover .slider-arrow { opacity: 1; transform: translateX(0); pointer-events: auto; } .slider-arrow:hover { color: #fff; transform: scale(1.15); } .slider-arrow svg { width: 26px; height: 26px; } /* ====== SECTION TITLES ====== */ section.products { margin: 64px 0 0; } .sec-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; text-align: left; margin: 0 0 16px; letter-spacing: 0; text-transform: none; display: flex; align-items: center; gap: 10px; } .sec-title .emo { font-size: 22px; font-weight: 400; } /* если вместо эмодзи внутри стоит своя иконка — размер задаём явно, font-size на картинку не действует */ .sec-title .emo svg, .sec-title .emo img { width: 22px; height: 22px; display: block; } /* ====== PRODUCT GRID + CARDS ====== */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .card { background: var(--card); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: background .2s ease, box-shadow .2s ease, padding .2s ease, margin .2s ease; position: relative; overflow: visible; transform-origin: center; text-decoration: none; color: inherit; } /* hover: the CARD itself stretches taller (image keeps its size, just nudges up). symmetric padding growth + compensating negative margins => no grid reflow */ .card:hover { background: #696969; padding-top: 18px; margin-top: -8px; padding-bottom: 18px; margin-bottom: -8px; box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 5; } .cover { transition: transform .2s ease; } .card:hover .cover { transform: translateY(-6px); } .cover { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #0e0e10; } .cover > img.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } .cover-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; pointer-events: none; z-index: 3; } .badge { font: 700 10.5px 'Montserrat', sans-serif; letter-spacing: .5px; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; color: #fff; } .badge.action { background: var(--pink); } .badge.topprice { background: var(--pink); } .badge.cashback { background: var(--mint); color: #00201a; border-radius: 50%; width: 30px; height: 30px; display:inline-flex; align-items:center; justify-content:center; padding: 0; font-weight: 800; font-size: 11px; } /* Оверлей — квадрат без своего скругления: округляет его обрезкой сама .cover (overflow:hidden + border-radius). Если дать оверлею такой же радиус, то у угла складываются две сглаженные кромки — оверлея и обрезки — и между ними остаётся ~1px недокрашенной картинки. Одно скругление = чистый угол. backdrop-filter тоже убран: он не подрезался скруглением и давал светлые дуги. */ .hover-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.66); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 0; opacity: 0; pointer-events: none; transition: opacity .18s ease; } .card:hover .hover-overlay { opacity: 1; pointer-events: auto; } .hover-actions { display: flex; gap: 24px; } .hover-action { width: 58px; display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; } .hover-circle { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; background: rgba(30,30,35,.92); border: 1px solid rgba(255,255,255,.12); color: #fff; } .hover-circle.red { background: var(--danger); border-color: rgba(242,30,30,.4); } /* английская версия: кнопка «Купить» на обычной карточке — фиолетовая, не красная */ html[lang="en"] .hover-circle.red { background: #7947BE; border-color: rgba(121,71,190,.4); } .hover-action:hover .hover-circle { transform: scale(1.08); } .hover-circle img { width: 26px; height: 26px; object-fit: contain; } /* cart glyph — addtocart.svg, optically centred in the circle */ .hover-action[data-action="cart"] .hover-circle { border: none; } .hover-action[data-action="cart"] .hover-circle img { width: 31px; height: 31px; transform: translate(2px, 2px); } /* added-to-cart confirmation: green gradient + black check */ .hover-circle.added { background: linear-gradient(135deg, #12FF05 0%, #56D57C 100%); border-color: rgba(18,255,5,.5); } .hover-circle.added img { display: none; } .hover-circle.added::after { content: ""; width: 11px; height: 19px; border: solid #000; border-width: 0 3.5px 3.5px 0; transform: translateY(-2px) rotate(45deg); } .hover-circle svg { width: 26px; height: 26px; } .hover-action .hover-label { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); font: 700 11px 'Montserrat', sans-serif; letter-spacing: 0.2px; color: #fff; text-align: center; white-space: nowrap; } .price-block { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 12px; padding: 6px 4px; overflow: visible; } .price-now { font-family: 'Anton', 'Montserrat', sans-serif; font-weight: 400; font-size: 34px; color: #fff; line-height: 1; letter-spacing: .5px; white-space: nowrap; } .price-old-col { display: flex; flex-direction: column; align-items: center; justify-content: space-between; align-self: stretch; overflow: visible; } .badge-discount { display: inline-block; background: var(--danger); color: #fff; font: 700 11px 'Montserrat', sans-serif; letter-spacing: -.03em; padding: 2px 9px; border-radius: 50px; line-height: 1.4; margin-top: -25px; position: relative; z-index: 20; } .price-old { font-family: 'Anton', 'Montserrat', sans-serif; font-weight: 400; font-size: 21px; color: rgba(255,255,255,.42); text-decoration: line-through; line-height: 1; letter-spacing: .5px; white-space: nowrap; } /* ====== PROMO BANNER ====== */ .promo { position: relative; border-radius: 18px; overflow: hidden; height: 220px; margin: 64px 0; background: radial-gradient(circle at 50% 60%, #7a1a2a 0%, #2a0a12 60%, #100408 100%); display:flex; align-items:center; justify-content:center; cursor: pointer; transition: transform .2s; } .promo img { width: 100%; height: 100%; object-fit: cover; } .promo:hover { transform: translateY(-2px); } /* баннер без ссылки — просто картинка: ни курсора, ни отклика на наведение */ .promo-static { cursor: default; } .promo-static:hover { transform: none; } /* ====== SOCIAL ====== */ .social { width: 715px; max-width: 100%; margin: 64px auto; text-align: center; } .social h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: 0; text-transform: none; margin-bottom: 8px; } .social p { color: #ccc; font-size: 19px; font-weight: 600; margin-bottom: 32px; line-height: 1.45; } .social-icons { display: flex; justify-content: center; gap: 40px; } .social-btn { width: 72px; height: 72px; background: #0D0D0D; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s, background .2s; color: #fff; text-decoration: none; } .social-btn:hover { transform: scale(1.06); background: #333; } /* соцсеть без ссылки (напр. Instagram): иконка видна, но не кликается и не реагирует на наведение */ .social-off { pointer-events: none; cursor: default; } .social-btn img { width: 36px; height: 36px; object-fit: contain; } .social-btn svg { width: 28px; height: 28px; } /* ====== CATALOG CTA ====== */ .catalog-cta { display: flex; justify-content: center; margin: 64px 0 0; } .catalog-cta a, .catalog-cta button { background: linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 100%); color: #17181B; border: 0; height: 56px; padding: 0 38px; border-radius: 124px; font: 700 16px 'Montserrat', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: transform .15s; text-decoration: none; } .catalog-cta a:hover, .catalog-cta button:hover { transform: translateY(-1px); } /* на тёмно-фиолетовом градиенте английской версии тёмный текст не читается; иконка нарисована currentColor, поэтому белеет вместе с подписью */ html[lang="en"] .catalog-cta a, html[lang="en"] .catalog-cta button { color: #fff; } /* ====== FOOTER ====== */ /* z-index: 0, а не 1 — у .wrap стоит 1, и футер, идущий следом, при равном значении перекрывал бы закреплённые элементы внутри .wrap (панель «Купить / В корзину» на карточке товара: её z-index заперт в контексте наложения .wrap и наружу не действует) */ footer { background: #000; padding: 44px 0; margin-top: 0; position: relative; z-index: 0; } .footer-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 60px; } .footer-left { display: flex; flex-direction: column; gap: 7px; min-width: 280px; } .footer-left a { color: #d8d8d8; text-decoration: none; font: 500 16px 'Montserrat', sans-serif; transition: color .2s; } .footer-left a:hover { color: #fff; } .payment-row { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .payment-row img { height: 30px; width: auto; object-fit: contain; } .footer-center { flex: 1; } .footer-top { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; flex-wrap: wrap; } .footer-logo img { display: block; } .footer-logo .logo-mark { height: 27px; } /* английский логотип квадратный и с полями от тени, а правило шапки (html[lang="en"] .logo-mark: 66px) по специфичности перебивает строку выше — в футере это раздувает лого. Возвращаем к высоте строки футера. margin-left компенсирует пустое поле внутри svg (≈12% слева, ~5px при 40px), чтобы видимый логотип совпадал по левому краю с текстом «© …» под ним. */ html[lang="en"] .footer-logo .logo-mark { height: 40px; margin-left: -5px; } .footer-socials { display: flex; gap: 12px; } .footer-social { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: transparent; transition: transform .2s; cursor: pointer; color: #fff; text-decoration: none; } .footer-social:hover { transform: translateY(-2px); } .footer-social img { width: 22px; height: 22px; } .footer-social svg { width: 22px; height: 22px; } .footer-mail { background: #fff; color: #000; height: 44px; padding: 0 24px; border-radius: 100px; display: flex; align-items: center; font: 600 16px 'Montserrat', sans-serif; text-decoration: none; } .footer-copy { font: 500 14px 'Montserrat', sans-serif; color: #d2d2d2; margin-bottom: 14px; } .footer-text { color: rgba(255,255,255,.35); line-height: 1.7; font: 400 14px 'Montserrat', sans-serif; max-width: 760px; } /* ====== NOTIFICATION (rounded liquid-glass pill) ====== */ .notif { position: fixed; bottom: 24px; right: 24px; color: #fff; background: rgba(42,32,28,.42); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); padding: 14px 24px; border-radius: 100px; font: 600 13.5px 'Montserrat', sans-serif; z-index: 9999; border: 1px solid rgba(255,255,255,.18); /* плашка живёт в DOM всегда и скрывается прозрачностью, а прозрачное всё равно ловит нажатия — без этого она перехватывала бы клики по тому, над чем висит (на мобильных это правая часть нижнего меню) */ pointer-events: none; box-shadow: 0 14px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); transform: translateY(10px); opacity: 0; transition: transform .25s, opacity .25s; } .notif.show { transform: translateY(0); opacity: 1; } /* ====== PAGE HEAD (inner pages) ====== */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 22px; flex-wrap: wrap; } .page-head .sec-title { margin: 0; } /* ====== ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА (простой текст RU | EN) ====== */ /* без подложки и внутренних отступов — иначе текст не встаёт вровень с копирайтом и остальными строками колонки */ .lang-switch { display: inline-flex; align-items: center; gap: 8px; } .lang-switch button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-mute); font: 600 14px 'Montserrat', sans-serif; transition: color .15s; } .lang-switch button:hover { color: var(--text-dim); } .lang-switch button.sel { color: #fff; } .lang-sep { color: var(--text-mute); font: 400 14px 'Montserrat', sans-serif; user-select: none; } /* стоит в ряду .footer-top рядом с кнопкой email, поэтому отступ снизу не нужен */ .footer-lang { margin-left: 4px; } /* ====== FAVORITES ====== */ .fav-clear { background: transparent; border: 0; color: var(--text-mute); cursor: pointer; font: 600 14px 'Montserrat', sans-serif; padding: 8px 4px; transition: color .15s; } .fav-clear:hover { color: #fff; } .fav-empty { text-align: center; padding: 60px 20px 80px; } .fav-empty-ico { font-size: 54px; line-height: 1; margin-bottom: 18px; } .fav-empty-title { font: 700 22px 'Montserrat', sans-serif; color: #fff; margin-bottom: 10px; } .fav-empty-text { color: var(--text-mute); font: 400 15px 'Montserrat', sans-serif; line-height: 1.6; max-width: 420px; margin: 0 auto 26px; } .fav-empty-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 30px; border-radius: 100px; background: linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 100%); color: #17181B; font: 700 15px 'Montserrat', sans-serif; text-decoration: none; } /* ====== FILTER + PAGINATION (catalog / filters) ====== */ .filter { position: relative; display: inline-block; } .filter-btn { background: rgba(255,255,255,.07); border: 0; color: var(--text); height: 44px; padding: 0 20px; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-radius: 124px; font: 600 14px 'Montserrat', sans-serif; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; transition: background .2s; white-space: nowrap; width: 100%; } .filter-btn:hover { background: rgba(255,255,255,.13); } .filter-btn b { color: #fff; font-weight: 700; } .filter-btn svg { width: 16px; height: 16px; } .filter-btn .filter-ico { width: 16px; height: 16px; object-fit: contain; } .filter-btn .chev { margin-left: 2px; transition: transform .2s; } .filter.open .filter-btn .chev { transform: rotate(180deg); } .filter-menu { position: absolute; top: 52px; left: 0; right: 0; width: 100%; /* фон и прозрачность — как у кнопок в шапке (.m-icon-btn) */ background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 0; border-radius: 18px; padding: 6px; z-index: 30; /* тень оставлена — меню всплывает над контентом и должно от него отделяться */ box-shadow: 0 24px 60px rgba(0,0,0,.55); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; } .filter.open .filter-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .filter-menu button { display: flex; width: 100%; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--text-mute); font: 500 14px 'Montserrat', sans-serif; padding: 11px 14px; border-radius: 10px; cursor: pointer; text-align: left; transition: color .15s, background .15s; } .filter-menu button:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); } .filter-menu button.active { color: #fff; font-weight: 700; } .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 28px 0 8px; } .pagination button { min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--text-mute); font: 600 15px 'Montserrat', sans-serif; transition: background .15s, color .15s; } .pagination button:hover { color: #fff; } .pagination button.active { background: transparent; color: #fff; font-weight: 800; } .pagination button.nav { color: var(--text-mute); } .pagination button.nav:hover { color: #fff; } .pagination .dots { color: var(--text-mute); padding: 0 4px; } /* хлебные крошки строит shared.js — они есть и на десктопе, и на мобильных. В одну строку без переносов: последний элемент (название страницы/товара) сжимается и обрезается многоточием, остальные держат свою ширину. */ .breadcrumb { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; font: 500 13.5px 'Montserrat', sans-serif; color: var(--text-dim); margin: 0 0 18px; } /* Порядок отступов: полоса категорий — большой зазор — крошки — маленький зазор — контент. Соседние вертикальные отступы схлопываются в наибольший, поэтому маленький зазор под крошками держится, только если у блока под ними верхнего отступа нет — обнуляем. */ .breadcrumb + * { margin-top: 0; } /* Контейнер блоков витрины (страница категории) своих отступов не имеет: пустой — пропускает насквозь отступ следующей секции, непустой — отступ своей первой секции. В обоих случаях 64px стали бы зазором под крошками. */ .breadcrumb + #catBlocks:empty + *, .breadcrumb + #catBlocks > :first-child { margin-top: 0; } .breadcrumb a { color: var(--text-dim); text-decoration: none; flex: none; white-space: nowrap; } .breadcrumb a:hover { color: #fff; } /* стрелка того же цвета, что и соседние ссылки */ .breadcrumb .sep { color: var(--text-dim); flex: none; } /* длинное название товара обрезаем многоточием, а не переносим строку */ .breadcrumb .cur { color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================================================================== MOBILE (≤ 820px) ===================================================================== */ @media (max-width: 820px) { /* на мобильных свои закреплённые кнопки — сжатая шапка не нужна */ header.top, nav.cats, .top-sticky { display: none; } /* сверху отбиваем от шапки (полосы категорий здесь нет), снизу зазор поменьше — но не впритык */ .breadcrumb { margin: 26px 0 18px; } /* закреплены только кнопки — панели-навбара нет, логотип уезжает вместе со страницей. fixed, а не sticky: у html/body стоит overflow-x: hidden, который ломает sticky */ /* без position/z-index: иначе .m-header создаёт контекст наложения и запирает в нём закреплённые кнопки — их перекрывали бы карточки (.badge-discount и т.п.) */ .m-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; min-height: 80px; } .m-header .m-icon-btn, .m-header-search { position: fixed; top: calc(22px + env(safe-area-inset-top)); z-index: 50; } #mMenuBtn { left: 14px; } #mSearchBtn { right: 14px; } .m-icon-btn { width: 56px; height: 56px; flex-shrink: 0; border: 0; outline: none; cursor: pointer; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .15s; } /* лёгкая белая вуаль поверх той же чёрной основы — обратная связь на нажатие */ .m-icon-btn:hover, .m-icon-btn:active { background: linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.10)), rgba(0,0,0,.6); } .m-icon-btn:focus, .m-icon-btn:focus-visible { outline: none; } .m-icon-btn svg { width: 26px; height: 26px; } .m-header .logo { margin: 0 auto; } .m-header .logo img { height: 34px; } .m-header .logo-mark { height: 25px; } .m-header .logo-text-fallback { font-size: 22px; } /* английский логотип playtown крупнее и в мобильной шапке (перебиваем .m-header .logo img — общего html[lang=en] недостаточно по весу) */ html[lang="en"] .m-header .logo img { height: 85px; } /* высокий playtown в шапке садится ниже кнопок — приподнимаем. transform, а не margin: высота шапки остаётся прежней */ html[lang="en"] .m-header .logo { transform: translateY(-15px); } /* bottom tab bar */ /* прижато к нижнему краю; прямоугольник с плавно скруглёнными верхними углами */ .m-tabbar { display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; border: 0; border-radius: 30px 30px 0 0; padding: 12px 6px calc(10px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); justify-content: space-around; } .m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; cursor: pointer; color: #fff; text-decoration: none; padding: 4px 0; } .m-tab svg { width: 26px; height: 26px; } /* иконки-картинки бывают непропорциональные (sales.svg — 57×69) */ .m-tab img { width: 26px; height: 26px; object-fit: contain; } .m-tab span { font: 600 11px 'Montserrat', sans-serif; color: #fff; } /* подсветки текущей вкладки нет: где находишься, показывают хлебные крошки */ /* корзина: иконка + счётчик в ряд. Иконка уезжает влево от центра, освобождая место числу — вкладка при этом остаётся зрительно уравновешенной */ .m-tab .m-tab-ico { display: flex; align-items: center; justify-content: center; gap: 5px; } .m-tab .m-tab-count { font: 500 12px 'Montserrat', sans-serif; color: #fff; line-height: 1; } /* уведомление поднимаем над нижним меню — на месте по умолчанию плашка ложилась прямо на вкладки */ .notif { right: 16px; bottom: calc(var(--tabbar-h, 74px) + 14px); max-width: calc(100vw - 32px); } body { padding-bottom: 0; } /* drawer */ .m-drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .25s; } .m-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .m-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 340px; z-index: 80; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); transform: translateX(-100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; padding: calc(22px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); } /* вместо системного скроллбара — тонкая серая полоска без стрелок и подложки */ .m-drawer { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; } .m-drawer::-webkit-scrollbar { width: 4px; } .m-drawer::-webkit-scrollbar-track { background: transparent; } .m-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 100px; } @media (hover: hover) { .m-drawer::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); } } .m-drawer.open { transform: translateX(0); } /* во время свайпа шторка следует за пальцем — анимация мешала бы */ .m-drawer.dragging, .m-drawer-backdrop.dragging { transition: none; } .m-drawer .m-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .m-drawer .m-drawer-head .logo { flex: 0 0 auto; display: flex; align-items: center; } .m-drawer .m-drawer-head .logo-mark, .m-drawer .m-drawer-head a img { height: 44px !important; width: auto !important; max-width: 75%; filter: none !important; } /* английский playtown в шторке — заметно крупнее (base зафиксирован !important). max-width убираем: при height 64px картинка шире лимита 75%, и ширину зажимало при фиксированной высоте — логотип сплющивался по горизонтали */ html[lang="en"] .m-drawer .m-drawer-head a img { height: 96px !important; max-width: none !important; } .m-drawer .m-drawer-close { background: transparent; border: 0; color: #fff; cursor: pointer; width: 40px; height: 40px; display:flex;align-items:center;justify-content:center; } .m-drawer .m-drawer-close svg { width: 24px; height: 24px; } .m-drawer-label { font: 700 12px 'Montserrat', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin: 14px 4px 4px; } .m-drawer a { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; color: #fff; text-decoration: none; font: 600 16px 'Montserrat', sans-serif; transition: background .18s ease, color .18s ease; } /* :hover только для мыши — на тач-экранах он залипает после тапа */ @media (hover: hover) { .m-drawer a:hover { background: rgba(255,255,255,.08); } } .m-drawer a:active { background: rgba(255,255,255,.12); } /* текущая страница/категория (только пункты навигации, не логотип в шапке) */ .m-drawer > a.active { background: rgba(255,255,255,.10); } /* в шторке — той же строкой, что и пункты меню */ .m-drawer .lang-switch { padding: 10px 12px; gap: 10px; } .m-drawer .lang-switch button, .m-drawer .lang-sep { font-size: 15px; } .m-drawer a svg, .m-drawer a img { width: 22px; height: 22px; color: #fff; } .m-drawer a img { filter: brightness(0) invert(1); object-fit: contain; } /* mobile search — раскрывается прямо в шапке, между кнопками меню и поиска */ .m-header-search { left: 82px; right: 82px; transform: scaleX(.86); /* 14 (край) + 56 (кнопка) + 12 (зазор) */ transform-origin: right center; height: 56px; max-width: none; min-width: 0; margin: 0; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 0; box-shadow: none; border-radius: 16px; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1); } .m-header.search-open .m-header-search { opacity: 1; pointer-events: auto; transform: scaleX(1); } /* лупа уже есть на соседней кнопке — внутри поля она лишняя */ .m-header-search .s-ico { display: none; } .m-header-search { padding: 0 20px; } .m-header-search input { font-size: 16px; } /* 16px — iOS не зумит при фокусе */ /* логотип уступает место строке поиска */ .m-header .logo { transition: opacity .18s ease; } .m-header.search-open .logo { opacity: 0; pointer-events: none; } /* layout */ .wrap { padding: calc(8px + env(safe-area-inset-top)) 14px 30px; } .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .page-header-bg { height: 420px; } .hero { height: 230px; margin-bottom: 26px; } .hero-slide { padding: 22px; } .slide-plats { top: 16px; right: 16px; gap: 8px 16px; } .slide-plat { font-size: 13px; } .slide-plat img { width: 16px; height: 16px; } .slide-content { top: auto; bottom: 64px; right: 18px; } .slide-sub { font-size: 22px; } .slide-sub .from { font-size: 16px; } .slide-wordmark { height: 30px; bottom: 26px; } .slide-title-big { font-size: 28px; letter-spacing: 6px; bottom: 28px; } .arrow-zone { display: none; } .sec-title { font-size: 30px; font-weight: 800; margin: 26px 0 16px; } .price-now { font-size: 26px; } .price-old { font-size: 16px; } .promo { height: 150px; border-radius: 14px; } .social { margin: 36px auto; } .social h3 { font-size: 20px; } .social p { font-size: 15px; margin-bottom: 22px; } .social-icons { gap: 26px; } .social-btn { width: 60px; height: 60px; } .social-btn img { width: 30px; height: 30px; } .social-btn svg { width: 24px; height: 24px; } .catalog-cta { margin: 34px 0 8px; } /* снизу — место под нижнее меню (--tabbar-h задаёт shared.js) */ footer { padding: 32px 0 calc(26px + var(--tabbar-h, 74px)); } /* на карточке товара над меню висит ещё и панель «Купить / В корзину» */ body[data-page="product"] footer { padding-bottom: calc(26px + var(--tabbar-h, 74px) + 78px); } /* на карточке товара фон и скругление берёт на себя .pi-cta — она подстилает меню целиком. Свой фон здесь дал бы второй слой и шов на стыке */ body[data-page="product"] .m-tabbar { border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .footer-wrap { flex-direction: column; gap: 26px; padding: 0 18px; } .footer-left { min-width: 0; width: 100%; align-items: flex-start; } .footer-center { width: 100%; } .footer-top { gap: 16px; } .footer-mail { font-size: 14px; height: 40px; } /* catalog / filters */ .page-head { gap: 12px; margin: 4px 0 16px; } .filter-btn { height: 40px; padding: 0 16px; font-size: 13px; } .pagination { justify-content: center; margin: 22px 0 6px; } } @media (max-width: 380px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 9px; } .price-now { font-size: 22px; } } /* ---------- мини-корзина (модальное окно) ---------- */ .cart-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; } .cart-modal.open { display: flex; } .cart-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .cart-modal-card { position: relative; width: min(440px, 92vw); max-height: 80vh; display: flex; flex-direction: column; /* стекло — как у кнопок шапки и меню фильтра */ background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .cart-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.10); font: 700 18px 'Montserrat', sans-serif; } .cart-modal-x { background: none; border: 0; color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } .cart-modal-x:hover { color: #fff; } .cart-modal-list { padding: 6px 20px; overflow-y: auto; overscroll-behavior: contain; } /* Свой скроллер вместо системного: тот рисует на стекле карточки белую полосу со стрелками. Стандартные свойства — для Firefox и новых Chrome, правила ::-webkit-scrollbar — для остальных webkit-браузеров. */ .cart-modal-list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } .cart-modal-list::-webkit-scrollbar { width: 6px; } .cart-modal-list::-webkit-scrollbar-track { background: transparent; } .cart-modal-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 100px; } .cart-modal-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); } /* flex-start: строки бывают в несколько строк текста, по центру они разъезжались бы */ .cart-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.10); } .cart-row-title { flex: 1 1 auto; min-width: 0; font: 500 14.5px/1.4 'Montserrat', sans-serif; color: #fff; } /* выбранные параметры — между названием и ценой, перечислены полностью. Без обрезки: длинные подписи переносятся, а не прячутся за многоточием */ .cart-row-opt { flex: 0 1 auto; min-width: 0; text-align: right; font: 500 12.5px/1.4 'Montserrat', sans-serif; color: var(--text-dim); white-space: normal; overflow-wrap: anywhere; } .cart-row-price { font: 700 14.5px 'Montserrat', sans-serif; white-space: nowrap; } .cart-row-del { background: none; border: 0; color: var(--text-mute); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; } .cart-row-del:hover { color: var(--danger); } .cart-total { padding: 14px 0 6px; text-align: right; font: 500 15px 'Montserrat', sans-serif; } .cart-empty { padding: 36px 0; text-align: center; color: var(--text-dim); } /* сворачиваемая строка «Есть промокод?» (вариант D) — на товаре и в корзине */ .promo-row { margin: 12px 0 2px; } .promo-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-dim); font: 600 14px 'Montserrat', sans-serif; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; } .promo-toggle:hover { color: #fff; } .promo-input { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 13px 16px; color: #fff; font: 600 14.5px 'Montserrat', sans-serif; outline: none; transition: border-color .15s; } .promo-input:focus { border-color: #fff; } .promo-input::placeholder { color: var(--text-mute); } .cart-modal .promo-row { padding: 4px 20px 0; } .cart-modal-foot { display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.10); } .cart-modal-clear { background: transparent; border: 0; color: #fff; border-radius: 100px; padding: 12px 20px; font: 600 14px 'Montserrat', sans-serif; cursor: pointer; transition: color .15s; } .cart-modal-clear:hover { color: rgba(255,255,255,.6); } .cart-modal-pay { flex: 1; background: linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 100%); color: #17181B; border: 0; border-radius: 100px; padding: 12px; font: 700 15px 'Montserrat', sans-serif; cursor: pointer; transition: filter .15s; } .cart-modal-pay:hover { filter: brightness(1.03); } .cart-modal-pay:disabled, .cart-modal-clear:disabled { opacity: .45; cursor: default; } .cart-modal-pay:disabled:hover { filter: none; } .cart-modal-clear:disabled:hover { color: #fff; } /* ===================================================================== ШИРОКИЕ КАРТОЧКИ — карусель S.renderWide() Здесь, а не в product.css: карусель рисуется и на главной (подборка с layout = wide), а product.css подключает только страница товара. ===================================================================== */ .sp-viewport { position: relative; } .sp-track { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; /* запас по вертикали: overflow-x создаёт скролл-контейнер, который режет и сверху/снизу — без него увеличенная карточка и её тень обрезались бы */ padding: 24px 6px; margin: -24px -6px; /* плавное затухание по бокам вместо жёсткой обрезки карточек на краях (лента зациклена — за краями всегда есть продолжение). Градиент только по горизонтали, по вертикали непрозрачный — тени карточек не режем. */ --sp-fade: clamp(20px, 6%, 60px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-fade), #000 calc(100% - var(--sp-fade)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-fade), #000 calc(100% - var(--sp-fade)), transparent 100%); } .sp-track::-webkit-scrollbar { display: none; } .wcard { flex: 0 0 calc((100% - 20px) / 2); box-sizing: border-box; position: relative; background: var(--card); border-radius: 18px; padding: 16px; display: flex; gap: 18px; align-items: stretch; text-decoration: none; color: inherit; cursor: pointer; transition: background .2s ease, transform .22s ease, box-shadow .22s ease; } /* hover: увеличиваем через transform. Раньше росли padding с компенсирующими margin — это меняло раскладку: обложка (flex-basis в %) пересчитывалась и дёргалась, а вылезающие за пределы скролл-контейнера углы и тень обрезались. transform только рисует, поэтому ни пересчёта, ни сдвига соседей нет. */ .wcard:hover { background: #696969; transform: scale(1.025); box-shadow: 0 14px 34px rgba(0,0,0,.45); z-index: 1; } .wcard-cover { position: relative; flex: 0 0 44%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #0e0e10; } .wcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .wcard-disc { position: absolute; right: 8px; bottom: 8px; z-index: 3; background: var(--danger); color: #fff; font: 700 12px 'Montserrat', sans-serif; letter-spacing: -.03em; padding: 4px 11px; border-radius: 50px; } .wcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .wcard-title { font: 800 18px/1.25 'Montserrat', sans-serif; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wcard-price { display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; } .wcard-price .price-now { font: 400 30px 'Anton', 'Montserrat', sans-serif; color: #fff; line-height: 1; letter-spacing: .5px; white-space: nowrap; } .wcard-price .price-old { font: 400 19px 'Anton', 'Montserrat', sans-serif; color: rgba(255,255,255,.42); text-decoration: line-through; line-height: 1; letter-spacing: .5px; white-space: nowrap; } .wcard-cta { display: flex; gap: 12px; margin-top: auto; padding-top: 18px; align-items: center; } .wcard-buy { flex: 1 1 auto; height: 52px; border: 0; border-radius: 100px; cursor: pointer; background: linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 100%); color: #17181B; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 15px 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .5px; transition: filter .15s, transform .15s; } .wcard-buy:hover { filter: brightness(1.04); transform: translateY(-1px); } .wcard-buy img { width: 20px; height: 20px; filter: brightness(0); } /* см. .btn-buy в product.css — на фиолетовом градиенте текст и иконка белые */ html[lang="en"] .wcard-buy { color: #fff; } html[lang="en"] .wcard-buy img { filter: none; } .wcard-cart { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; } .wcard-cart:hover { transform: scale(1.06); } .wcard-cart img { width: 26px; height: 26px; filter: brightness(0); transform: translate(2px, 1px); } /* подтверждение добавления в корзину — как у обычных карточек */ .wcard-cart.added { background: linear-gradient(135deg, #12FF05 0%, #56D57C 100%); } .wcard-cart.added img { display: none; } .wcard-cart.added::after { content: ""; width: 11px; height: 19px; border: solid #000; border-width: 0 3.5px 3.5px 0; transform: translateY(-2px) rotate(45deg); } /* стрелки — появляются при наведении на левую / правую половину */ .sp-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; z-index: 20; background: rgba(12,12,14,.78); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s, background .15s; } .sp-arrow svg { width: 26px; height: 26px; } .sp-arrow.left { left: 14px; } .sp-arrow.right { right: 14px; } .sp-arrow.show { opacity: 1; pointer-events: auto; } .sp-arrow.show:hover { background: rgba(12,12,14,.96); } @media (max-width: 820px) { .wcard { flex: 0 0 88%; padding: 12px; gap: 12px; } /* на тач-экранах увеличение при «наведении» только мешает — оно залипает после тапа */ .wcard:hover { transform: none; box-shadow: none; background: var(--card); } .wcard-title { font-size: 15px; } .wcard-price .price-now { font-size: 24px; } .wcard-price .price-old { font-size: 15px; } .wcard-cta { gap: 10px; padding-top: 14px; } .wcard-buy { height: 46px; font-size: 13px; gap: 8px; } .wcard-cart { width: 46px; height: 46px; } .wcard-cart img { width: 22px; height: 22px; } .sp-arrow { width: 46px; height: 46px; } }