/* RageTime — магазин. Тёмная тема, оранжевый градиент, крупные скруглённые панели. */ :root { --bg: #08080a; --bg-2: #0d0d10; --panel: #121215; --panel-2: #191920; --line: #24242c; --ink: #f2f2f5; --muted: #8b8b98; --acc: #ff7a00; --acc-2: #ff4d00; --grad: linear-gradient(100deg, #ff9a2e, #ff5c00 55%, #ff3d00); --violet: linear-gradient(140deg, #9b6bff, #6f3bff); --green: #46d67a; --display: Unbounded, system-ui, sans-serif; /* заголовки, цены, логотип */ --ui: Manrope, system-ui, sans-serif; /* интерфейс и текст */ --radius: 22px; --shadow: 0 18px 40px rgb(0 0 0 / .45); color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Общий масштаб сайта: на компьютере всё на 5% крупнее. zoom масштабирует и вёрстку, и px, поэтому пропорции сохраняются. На телефоне не трогаем — там и так тесно. */ @media (min-width: 900px) { html { zoom: 1.05; } } body { min-height: 100dvh; font: 500 15px/1.45 var(--ui); color: var(--ink); background: radial-gradient(900px 420px at 50% -120px, rgb(255 122 0 / .10), transparent 70%), radial-gradient(700px 500px at 85% 110%, rgb(124 77 255 / .10), transparent 70%), var(--bg); } img, svg { display: block; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } input { font: inherit; } .wrap { width: min(1320px, 100% - 32px); margin-inline: auto; } .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ic--sm { width: 16px; height: 16px; } /* ---- шапка ---- */ .top { position: sticky; top: 0; z-index: 30; padding: 14px 0; background: rgb(8 8 10 / .82); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(255 255 255 / .05); } .top__in { display: flex; align-items: center; gap: 14px; } /* Логотип и онлайн — как у holytime: белый жирный Montserrat без градиента, рядом серая плашка «ОНЛАЙН: N» со скруглением 8 px. */ .brand b { font: 700 25px/1 Montserrat, var(--ui); letter-spacing: .01em; color: #fff; } .online { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: rgb(255 255 255 / .1); font: 700 13px/1 Montserrat, var(--ui); letter-spacing: .02em; color: rgb(255 255 255 / .5); white-space: nowrap; flex-shrink: 0; } .online b { color: #fff; font-variant-numeric: tabular-nums; } .online .ic { color: rgb(255 255 255 / .5); stroke-width: 2.2; } /* Меню: жирный белый Montserrat, как логотип. Текущая страница — в серой плашке того же тона, что «ОНЛАЙН»; при наведении плашка проступает слабее. */ .nav { margin-left: auto; display: flex; align-items: center; gap: 6px; } .nav__l { padding: 11px 18px; border-radius: 12px; font: 700 15px/1 Montserrat, var(--ui); letter-spacing: .005em; color: rgb(255 255 255 / .88); white-space: nowrap; transition: color .18s, background .18s, box-shadow .18s; } .nav__l:hover { color: #fff; background: rgb(255 255 255 / .06); } .nav__l.on { color: #fff; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); } /* ---- баннеры ---- Типографика по образцу holytime: заголовок 26/26, подзаголовок 16/16, квадратная кнопка 40×40 со стрелкой, отступы 30 px. У них Gotham — он платный, поэтому Montserrat: ближайший бесплатный аналог с кириллицей. */ .promo { display: grid; grid-template-columns: 2.1fr 1fr; gap: 16px; margin: 18px 0 20px; } .promo__big, .promo__small { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; border-radius: var(--radius); padding: 30px; min-height: 250px; box-shadow: var(--shadow); } /* Оранжево-красный: янтарный свет слева сверху под текстом, тёплое пятно за кошельком, к правому нижнему углу уходит в красный, низ слева чуть темнее — объём как у студийного фона, без резких переходов. */ .promo__big { background: radial-gradient(34% 60% at 62% 26%, rgb(255 206 130 / .42), transparent 70%), radial-gradient(45% 80% at 0% 0%, rgb(255 178 70 / .45), transparent 70%), radial-gradient(55% 95% at 100% 100%, rgb(205 22 30 / .42), transparent 70%), radial-gradient(60% 100% at 18% 115%, rgb(165 34 0 / .35), transparent 70%), linear-gradient(115deg, #ff8a1f 0%, #ff5a0a 48%, #f2381a 100%); } /* Пиксельная сетка — намёк на блоки Minecraft: только справа, за персонажами, и гаснет к тексту. */ .promo__big::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgb(255 255 255 / .11) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgb(255 255 255 / .11) 1px, transparent 1px) 0 0 / 26px 26px; mask-image: radial-gradient(70% 110% at 72% 40%, #000 10%, transparent 75%); } /* Мягкие световые шары (боке) — глубина, как у студийного фона. */ .promo__big::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 93% 16%, rgb(255 236 200 / .5) 0 24px, transparent 25px), radial-gradient(circle at 42% 88%, rgb(255 230 190 / .3) 0 36px, transparent 37px), radial-gradient(circle at 28% 12%, rgb(255 240 210 / .3) 0 14px, transparent 15px), radial-gradient(circle at 80% 92%, rgb(255 210 170 / .32) 0 18px, transparent 19px); filter: blur(6px); } /* Фиолетовый под кейсы: к низу справа уходит в глубокий индиго, чтобы оранжевые искры и изумруд светились; тёплый отсвет снизу справа — от СУПЕР Кейса. */ .promo__small { background: radial-gradient(55% 60% at 88% 92%, rgb(255 140 60 / .38), transparent 70%), radial-gradient(60% 70% at 0% 0%, rgb(190 150 255 / .45), transparent 70%), linear-gradient(150deg, #8452ff 0%, #5b2fe0 48%, #33168f 100%); } /* Редкие искры-звёздочки в пустой части карточки — перекликаются с искрами кейса. */ .promo__small::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23fff'/%3E%3C/svg%3E") 58% 14% / 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23ffd2a6'/%3E%3C/svg%3E") 94% 50% / 15px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23b8f4ff'/%3E%3C/svg%3E") 30% 30% / 11px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23fff'/%3E%3C/svg%3E") 72% 6% / 10px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23b8f4ff'/%3E%3C/svg%3E") 98% 16% / 10px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23fff'/%3E%3C/svg%3E") 66% 40% / 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23ffd2a6'/%3E%3C/svg%3E") 54% 96% / 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23fff'/%3E%3C/svg%3E") 84% 94% / 9px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' fill='%23b8f4ff'/%3E%3C/svg%3E") 20% 8% / 9px no-repeat; opacity: .8; } /* Дуги на фиолетовом баннере: под текстом и кейсами, над фоном. */ .promo__swoosh { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .promo h1, .promo h2 { position: relative; z-index: 2; font: 600 26px/1 Montserrat, var(--ui); letter-spacing: -.01em; } .promo h1 { max-width: 330px; } .promo h2 { max-width: 240px; } .promo p { position: relative; z-index: 2; margin-top: 12px; max-width: 250px; font: 400 16px/1.12 Montserrat, var(--ui); color: rgb(255 255 255 / .92); } /* Кнопка карточки — одна на обе: стеклянная плашка с подписью и стрелкой. Прижата к низу, поэтому на двух карточках стоит на одной линии. При наведении на карточку плашка светлеет, стрелка чуть уезжает вправо. */ .promo__cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 13px 20px; border-radius: 14px; background: rgb(255 255 255 / .18); color: #fff; backdrop-filter: blur(6px); font-size: 13.5px; font-weight: 800; white-space: nowrap; transition: background .2s, box-shadow .2s; } .promo__cta .ic { transition: translate .2s; } .promo__big:hover .promo__cta, .promo__small:hover .promo__cta { background: rgb(255 255 255 / .28); box-shadow: 0 10px 22px rgb(0 0 0 / .2); } .promo__big:hover .promo__cta .ic, .promo__small:hover .promo__cta .ic { translate: 3px 0; } .promo__art { position: absolute; z-index: 1; pointer-events: none; } /* ---- баннер «Привилегии с доплатой»: апгрейд ранга ---- Справа два персонажа (рендеры skinview3d) обрезаны низом баннера, над ними кошелёк и верёвки, у каждого на груди табличка ранга, как ник над игроком. */ /* Сцена — блок постоянных пропорций (512×250 на широком экране), прижатый к низу баннера. Всё внутри считается от его ширины (cqw), поэтому композиция на любом экране одна и та же, просто крупнее или мельче — ничего ни на кого не наезжает. */ .promo__art--hero { top: auto; bottom: 0; right: 6%; width: 58%; aspect-ratio: 512 / 250; container-type: inline-size; } .hero__char { position: absolute; bottom: -16%; height: 112%; margin: 0; aspect-ratio: 7 / 9; } .hero__char img { width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgb(80 20 0 / .45)); } .hero__char--l { left: -4%; } .hero__char--r { right: -5%; } /* ---- наведение на карточки: параллакс, как у holytime ---- Слои сцены плавно смещаются на разное расстояние: фон чуть-чуть, сцена больше, передний план ещё больше — картинка «оживает» и получает глубину. */ .promo__big, .promo__small { cursor: pointer; } .promo__art--hero, .promo__big::before, .hero__prop--l, .hero__blur, .case, .promo__small::after { transition: translate .6s cubic-bezier(.25,.8,.25,1); } .hero__prop--l, .hero__blur, .case--big { transition-duration: .8s; } .promo__big:hover::before { translate: -5px 0; } .promo__big:hover .promo__art--hero { translate: 10px 0; } .promo__big:hover .hero__prop--l, .promo__big:hover .hero__blur { translate: 10px 0; } /* поверх сдвига сцены: итого 20px */ .promo__small:hover::after { translate: -4px 2px; } .promo__small:hover .case--big { translate: 0 10px; } .promo__small:hover .case--a { translate: -8px 4px; } .promo__small:hover .case--b { translate: 6px -6px; } @media (prefers-reduced-motion: reduce) { .promo__art--hero, .promo__big::before, .hero__prop--l, .hero__blur, .case, .promo__small::after { transition: none; } } /* Кольца вокруг кошелька — как круги от брошенного предмета: центр сцены, куда «течёт» путь. Тонкие, гаснут к краям. */ .hero__halo { position: absolute; left: 50%; top: 30%; translate: -50% -50%; z-index: 0; width: 120cqw; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 5.4cqw, rgb(255 255 255 / .16) 5.4cqw calc(5.4cqw + 1.5px), transparent calc(5.4cqw + 1.5px) 9cqw); mask-image: radial-gradient(circle, #000 12%, transparent 55%); } /* Сумма доплаты под кошельком — главный смысл карточки. */ .hero__diff { position: absolute; left: 50%; top: calc(17% + 14.5cqw); translate: -50% 0; z-index: 3; padding: 1cqw 2cqw; border-radius: 999px; background: rgb(40 16 0 / .45); backdrop-filter: blur(4px); font: 600 2.55cqw/1 Montserrat, var(--ui); color: #fff; white-space: nowrap; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); } /* Кошелёк — оранжевая плитка с белой иконкой и тёплым свечением. */ .hero__wallet { position: absolute; left: 50%; top: 17%; translate: -50% 0; z-index: 3; display: grid; place-items: center; width: 12.9cqw; aspect-ratio: 1; border-radius: 3.5cqw; background: linear-gradient(160deg, #ffac55, #ff6a00 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 1px rgb(255 255 255 / .25), 0 12px 30px rgb(140 40 0 / .45); color: #fff; } .hero__wallet .ic { width: 52%; height: 52%; stroke-width: 2.1; } /* Путь апгрейда — точки от нагрудника младшего ранга через кошелёк к старшему. Круглые точки (штрих нулевой длины + круглый конец), лёгкое свечение и медленное движение вперёд — видно, куда идёт апгрейд. */ .hero__path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; filter: drop-shadow(0 0 3px rgb(255 236 200 / .7)); } .hero__path path { fill: none; stroke: url(#heroPathFade); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 10; vector-effect: non-scaling-stroke; animation: hero-path-flow 1.1s linear infinite; } @keyframes hero-path-flow { to { stroke-dashoffset: -10; } } @media (prefers-reduced-motion: reduce) { .hero__path path { animation: none; } } /* Стрелка в конце пути, над нагрудником старшего ранга. */ .hero__arrow { position: absolute; left: 68%; top: 46%; translate: -50% -50%; z-index: 3; rotate: 90deg; /* смотрит вниз — в ладонь старшего */ display: grid; place-items: center; width: 4.3cqw; height: 4.3cqw; border-radius: 50%; background: #fff; color: #ff6a00; box-shadow: 0 4px 12px rgb(120 40 0 / .35); } .hero__arrow .ic { width: 2.7cqw; height: 2.7cqw; stroke-width: 3; } /* Плитки рангов: «стекло» с нагрудником, как иконки в списке привилегий. */ .hero__rank { position: absolute; z-index: 3; display: grid; place-items: center; width: 9.4cqw; aspect-ratio: 1; border-radius: 2.7cqw; background: linear-gradient(160deg, rgb(255 255 255 / .34), rgb(255 255 255 / .12)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), 0 10px 26px rgb(120 30 0 / .3); backdrop-filter: blur(6px); } /* Нагрудники — заранее уменьшенные копии 256 px (assets/hero/plate-*.png) с плавным масштабированием: «пиксельное» уменьшение с 1000 px теряло контур и искры. */ .hero__rank img { width: 68%; height: auto; image-rendering: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); } /* Нагрудники лежат прямо в вытянутых руках: кулаки на 31% и 70% ширины сцены, на 64% высоты. */ .hero__rank--from { left: 27%; top: 54%; } /* Старший ранг — цель: крупнее и с тёплым свечением. */ .hero__rank--to { left: 63%; top: 53%; width: 11cqw; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 0 4px rgb(255 255 255 / .12), 0 0 34px rgb(255 220 120 / .55); } /* Размытый предмет на переднем плане между персонажами — глубина резкости. */ .hero__blur { position: absolute; left: 34%; bottom: -34%; height: 62%; width: auto; z-index: 2; filter: blur(6px) brightness(.4) saturate(.6); } /* Предметы по краям вместо фонарей holytime: кристалл слева, кейс справа. */ .hero__prop { position: absolute; width: auto; filter: drop-shadow(0 10px 16px rgb(80 20 0 / .4)); } /* Изумруд слева — не отдельной иконкой, а частью сцены: крупный, на переднем плане, обрезан низом карточки и чуть размыт (глубина резкости, как у кейса по центру). */ .hero__prop--l { left: -32%; bottom: -16%; height: 48%; rotate: -20deg; z-index: 4; filter: blur(2.5px) brightness(.92) saturate(.9) drop-shadow(0 14px 22px rgb(90 25 0 / .45)); } .hero__prop--r { right: -6%; bottom: -8%; height: 36%; rotate: 8deg; filter: blur(1.5px) drop-shadow(0 10px 16px rgb(80 20 0 / .4)); } /* ---- баннер «Наборами выгоднее»: кейсы из нашего каталога ---- */ .promo__art--cases { top: 0; bottom: 0; right: 12%; width: 62%; } .case { position: absolute; height: auto; } /* У каждого кейса ореол своего цвета: тёплый у СУПЕР Кейса, бирюзовый у эндер-кейса, зелёный у изумруда. Ореол повторяет силуэт, поэтому совпадает при любой ширине. */ .case--big { width: 74%; right: -12%; bottom: -9%; rotate: -8deg; z-index: 1; filter: drop-shadow(0 0 22px rgb(255 150 60 / .55)) drop-shadow(0 14px 22px rgb(20 0 70 / .5)); } /* Бирюзовый выглядывает из-за большого кейса слева, над кнопкой «Смотреть наборы». */ .case--a { width: 30%; left: 4%; bottom: 34%; rotate: 10deg; z-index: 0; filter: drop-shadow(0 0 14px rgb(60 220 255 / .5)) drop-shadow(0 12px 18px rgb(20 0 70 / .5)); } /* Зелёный — над большим кейсом, рядом с кучей. */ .case--b { width: 26%; right: 2%; top: 5%; rotate: -14deg; filter: drop-shadow(0 0 14px rgb(80 255 140 / .5)) drop-shadow(0 12px 18px rgb(20 0 70 / .5)); } /* ---- общий каркас магазина ---- */ .panel { position: relative; background: linear-gradient(180deg, #16161b, var(--panel) 42%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* Тонкий блик по верхней кромке — панели перестают быть плоскими. */ .panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16), transparent); pointer-events: none; } /* ---- магазин: категории слева, карточки товаров справа ---- */ .shop { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; padding: 8px 0 70px; } /* Категории: простой список в одной панели, прилипает при прокрутке длинной сетки. Иконка, название, количество; выбранный пункт — светлая подложка и тонкая оранжевая полоска слева, без рамок у каждого пункта, градиентов и свечения. */ /* Колонка прокручивается вместе с карточками, а подпись «Категории» по высоте равна заголовку раздела — поэтому плитки начинаются ровно на одной линии с первым рядом карточек. */ .cats { display: grid; gap: 10px; align-content: start; align-self: stretch; } /* Плитки едут за прокруткой: прилипают под шапкой с тем же отступом, с каким под ней появляются карточки. Колонка растянута на всю высоту сетки — иначе прилипать некуда. */ .cats__list { position: sticky; top: 84px; } .cats__label { display: flex; align-items: center; height: 32px; margin-bottom: 6px; padding: 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* Плитки 2 в ряд: картинка раздела сверху, название и «от … ₽» снизу. Нечётная последняя плитка растягивается на весь ряд. */ .cats__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cat { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 118px; padding: 14px 8px 12px; border-radius: 16px; text-align: center; background: var(--panel); border: 1px solid var(--line); color: var(--muted); transition: color .2s, background .2s, border-color .2s; } .cat:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto auto; column-gap: 12px; justify-content: center; text-align: left; padding: 12px 14px; } .cat:last-child:nth-child(odd) .cat__ic { grid-row: span 2; margin: 0; } .cat:hover { color: var(--ink); background: #17171c; border-color: #2e2e37; } .cat__ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; transition: translate .25s; } .cat__ic img, .cat__ic svg { width: 42px; height: 42px; image-rendering: auto; opacity: .9; transition: opacity .2s; } .cat__ic svg { width: 30px; height: 30px; } .cat:hover .cat__ic { translate: 0 -2px; } .cat__txt { display: contents; } .cat__t { font-size: 14px; font-weight: 700; white-space: nowrap; } .cat__from { font-size: 11.5px; font-weight: 600; color: var(--muted); opacity: .8; font-variant-numeric: tabular-nums; } .cat.on { color: #fff; background: #19191f; border-color: rgb(255 120 40 / .55); } .cat.on .cat__from { color: #ffa066; opacity: 1; } .cat.on .cat__ic img, .cat.on .cat__ic svg, .cat:hover .cat__ic img, .cat:hover .cat__ic svg { opacity: 1; } .catalog { min-width: 0; } .catalog__head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 16px; } .catalog__head h2 { font: 800 28px/1.1 var(--display); letter-spacing: -.01em; } /* Сетка карточек. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; } .card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 318px; padding: 18px 18px 18px; border-radius: 22px; cursor: pointer; outline: none; background: linear-gradient(180deg, #17171c, var(--panel) 55%); border: 1px solid var(--line); transition: translate .45s cubic-bezier(.2,.8,.25,1), border-color .35s, box-shadow .45s; } /* Свечение цвета товара за картинкой; при наведении разгорается. */ .card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 40% at 50% 40%, hsl(var(--h) 90% 55% / .16), transparent 70%); transition: opacity .45s, scale .6s; } .card:hover, .card:focus-visible { translate: 0 -6px; border-color: hsl(var(--h) 80% 65% / .45); box-shadow: 0 24px 44px -18px hsl(var(--h) 90% 45% / .55), inset 0 1px 0 rgb(255 255 255 / .06); } .card:hover::before, .card:focus-visible::before { opacity: 1; scale: 1.25; background: radial-gradient(55% 40% at 50% 40%, hsl(var(--h) 90% 55% / .3), transparent 70%); } /* Плашки: бонус — справа, «хит» — слева. */ .card__bonus, .card__hit { position: absolute; top: 14px; z-index: 2; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .card__bonus { right: 14px; color: #5ee88a; background: rgb(40 200 100 / .12); box-shadow: inset 0 0 0 1px rgb(60 220 120 / .32); } /* «Хит продаж» — как у artygrief: мягкая оранжевая подложка, контурный огонёк (Lucide). */ .card__hit { left: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; font: 600 11px Montserrat, var(--ui); color: rgb(255 173 108); background: rgb(234 90 0 / .1); } .card__hit svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Картинка товара: крупная, плавно парит; тень под ней сжимается, когда предмет поднимается. */ .card__art { position: relative; display: grid; place-items: center; height: 168px; margin: 22px 0 6px; } .card__art::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 46%; height: 12px; translate: -50% 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); animation: card-shadow 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); } .card__art img, .card__art svg { width: 128px; height: 128px; image-rendering: auto; filter: drop-shadow(0 10px 18px hsl(var(--h) 90% 40% / .35)); animation: card-float 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); transition: scale .5s cubic-bezier(.3,.9,.3,1.2), rotate .5s cubic-bezier(.3,.9,.3,1.2), filter .45s; } .card:hover .card__art img, .card:hover .card__art svg { scale: 1.1; rotate: -4deg; filter: drop-shadow(0 14px 26px hsl(var(--h) 95% 50% / .6)); } /* Наборы: картинка — скриншот инвентаря, показываем его во всю ширину в рамке. */ /* Размер скриншота прежний, «парит» как остальные. Блок картинки опущен (карточка выше), чтобы даже в верхней точке парения и при увеличении он не доставал до «+5 000 ТК». */ .card--sets .card__art { margin-top: 38px; } .card--sets .card__art img { width: 100%; height: auto; max-height: 150px; object-fit: contain; border-radius: 12px; image-rendering: auto; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 14px 28px -10px rgb(0 0 0 / .7); } .card.card--sets:hover .card__art img { scale: 1.04; rotate: -1.5deg; } @keyframes card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } @keyframes card-shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .8; opacity: .7; } } .card__name { font: 700 20px/1.2 Montserrat, var(--ui); color: var(--ink); overflow-wrap: anywhere; } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; } .card__price { white-space: nowrap; } .card__price i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 2px; } .card__price b { font: 800 21px var(--display); font-variant-numeric: tabular-nums; } /* Кнопка «Купить» — плоская, без градиента, свечения и стрелки: в покое мягкая оранжевая подложка, при наведении на карточку — ровная сплошная заливка. */ .card__buy { padding: 9px 16px; border-radius: 10px; background: rgb(255 110 20 / .12); color: #ff8a3d; font-size: 13.5px; box-shadow: inset 0 0 0 1px rgb(255 120 40 / .22); transition: background .2s, color .2s, box-shadow .2s; } .card:hover .card__buy, .card:focus-visible .card__buy { background: #ff6a13; color: #fff; box-shadow: none; } .card__buy:active { background: #f25e0a; } /* Смена раздела: карточки выезжают друг за другом. */ .grid > .card { animation: rise .6s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(min(var(--i), 7) * .05s); } /* ---- окно товара: прежняя панель покупки, открывается поверх страницы ---- */ .sheet { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 20px; background: rgb(4 4 6 / .72); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; } .sheet.is-open { opacity: 1; } .sheet[hidden] { display: none; } .sheet__card { position: relative; width: min(780px, 100%); max-height: calc(100dvh - 40px); overflow: auto; scrollbar-width: thin; scrollbar-color: #2f2f3a transparent; translate: 0 18px; scale: .97; transition: translate .35s cubic-bezier(.2,.9,.25,1.1), scale .35s cubic-bezier(.2,.9,.25,1.1); } .sheet.is-open .sheet__card { translate: none; scale: 1; } .sheet__x { z-index: 3; } /* В окне у панели нет фиксированной высоты: «Возможности» — своей высоты со скроллом, а шапке — место справа под крестик. */ .sheet .perks { flex: none; } .sheet .perks__scroll { flex: none; max-height: 280px; } .sheet .detail__head { padding-right: 64px; } html.is-locked { overflow: hidden; } /* правая колонка */ .detail { display: flex; flex-direction: column; gap: 16px; } /* Шапка товара: тёмная база плюс медленный переливающийся отсвет в цвет ранга. */ @property --tint { syntax: ""; inherits: true; initial-value: #7a5cff; } .detail__head { position: relative; padding: 20px 24px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 18px; --tint: #7a5cff; background: linear-gradient(118deg, color-mix(in oklab, var(--tint) 34%, transparent) 0%, transparent 34%, color-mix(in oklab, var(--tint) 20%, transparent) 58%, transparent 82%), linear-gradient(120deg, #141418, #17171d 58%, #1a1622); background-size: 260% 100%, 100% 100%; background-position: 0% 0, 0 0; animation: sheen 11s ease-in-out infinite alternate; transition: --tint .5s ease; } .detail__main { min-width: 0; } @keyframes sheen { to { background-position: 100% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .detail__head { animation: none; } } .detail__label { font-size: 12.5px; font-weight: 700; color: var(--muted); } .detail__head h2 { margin-top: 4px; font: 800 clamp(18px, 1.7vw, 24px)/1.2 var(--display); overflow-wrap: anywhere; } .detail__icons { justify-self: center; display: flex; align-items: center; gap: 10px; } .detail__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); } .detail__ico svg, .detail__ico img { width: 30px; height: 30px; } .detail__ico img { image-rendering: auto; } /* сглаживаем: «по пикселям» уменьшение с 1000 px рвёт контур */ .detail__ico--cart { color: var(--muted); } .detail__arr { color: #3a3a46; } .detail__bonus { justify-self: end; text-align: right; } .detail__bonus small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); } .detail__bonus b { font: 800 20px var(--display); color: var(--green); } /* сроки */ /* Выбор срока: выбранный вариант подсвечивает оранжевая «пилюля», которая переезжает между вариантами. */ .periods { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 18px; padding: 6px; border-radius: 16px; background: #0f0f13; border: 1px solid var(--line); } .periods__pill { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; width: var(--w, 0); height: var(--hh, 0); translate: var(--x, 0) var(--y, 0); border-radius: 12px; background: #ff6a13; transition: translate .45s cubic-bezier(.3,.9,.3,1), width .45s cubic-bezier(.3,.9,.3,1); } .period { position: relative; z-index: 1; display: grid; justify-items: center; padding: 11px 8px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--muted); transition: color .3s, background .2s; } .period:not(.on):hover { color: var(--ink); background: rgb(255 255 255 / .04); } .period.on { color: #fff; } .periods--single { grid-template-columns: 1fr; } /* возможности */ .perks { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding: 18px 22px 14px; } .perks__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .02em; } .perks__head .ic { color: var(--acc); } .perks__scroll { position: relative; flex: 1 1 0; min-height: 0; margin-top: 10px; overflow: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #2f2f3a transparent; /* Затухание сверху и снизу: видно, что список прокручивается, а не обрезан. */ mask-image: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 22px), transparent); } .perks__list { list-style: none; } .perks__list li { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; padding: 13px 4px; border-bottom: 1px solid rgb(255 255 255 / .05); font-size: 13.5px; } .perks__list li:last-child { border-bottom: 0; } .perks__k { display: flex; align-items: baseline; gap: 9px; font-weight: 700; } .perks__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); translate: 0 -2px; flex: none; } .perks__v { color: var(--muted); font-weight: 600; text-align: right; } .perks__sec { margin-top: 6px; font-weight: 800; color: var(--ink); } .perks__sec::before { display: none; } /* покупка */ .buy { display: flex; align-items: center; gap: 16px; padding: 16px 20px; } .buy__cart { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); } .buy__sum small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); } .buy__sum b { font: 800 22px var(--display); font-variant-numeric: tabular-nums; } .buy .btn { margin-left: auto; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 800; transition: filter .18s, transform .12s; } /* Главная кнопка — плоская сплошная оранжевая, без градиента и свечения (как «Купить» на карточке при наведении). */ .btn--acc { background: #ff6a13; color: #fff; transition: background .2s, transform .12s; } .btn--acc:hover { background: #ff7b2c; } .btn--acc:active { background: #f25e0a; transform: translateY(1px); } .btn--block { width: 100%; } /* ---- подвал ---- Две части: блок «Будьте на связи» с крупными карточками соцсетей и панель со скруглённым верхом — о сервере, разделы, оплата, документы. */ .foot { position: relative; margin-top: 56px; } /* Сообщество — как у artygrief: заголовок капсом, карточки в цвете сети (тонкая рамка и лёгкая заливка), при наведении карточка заливается цветом целиком. */ .comm { padding-bottom: 48px; } .comm__title { font: 800 clamp(26px, 3vw, 32px)/1.2 Montserrat, var(--ui); letter-spacing: -.025em; text-transform: uppercase; color: #fff; } .comm__sub { margin-top: 10px; font-size: 15px; line-height: 1.6; color: rgb(181 176 171); } .comm__grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin-top: 28px; } .comm__card { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; min-height: 108px; padding: 24px 20px; border-radius: 12px; border: 1px solid var(--social-color); background: var(--social-color); border-color: color-mix(in srgb, var(--social-color) 18%, #252321); background: color-mix(in srgb, var(--social-color) 7%, #11100f); font: 750 clamp(18px, 2vw, 25px)/1.2 Montserrat, var(--ui); color: rgb(238 237 240); transition: background-color .2s, border-color .2s, color .2s; } .comm__brand { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; } .comm__brand svg { width: 100%; height: 100%; } .comm__card:is(:hover, :focus-visible, :active) { background: var(--social-hover); border-color: var(--social-hover); color: #fff; } .comm__card:focus-visible, .comm__help a:focus-visible { outline: 2px solid rgb(255 148 64); outline-offset: 5px; } .comm__help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 26px; font-size: 14px; color: rgb(181 176 171); } .comm__help a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgb(234 90 0); font-size: 16px; font-weight: 600; line-height: 1.4; color: rgb(245 242 239); transition: color .2s, border-color .2s; } .comm__tg { display: inline-flex; align-items: center; flex-shrink: 0; } .comm__tg svg { width: 22px; height: 18px; } .comm__help a:is(:hover, :focus-visible, :active) { color: rgb(255 148 64); border-bottom-color: rgb(255 148 64); } @media (max-width: 1000px) { .comm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .comm__sub { font-size: 14px; } .comm__grid { gap: 10px; margin-top: 22px; } .comm__card { gap: 8px; min-height: 88px; padding: 20px 8px; border-radius: 10px; font-size: 16px; } .comm__brand { width: 25px; height: 25px; } .comm__help { margin-top: 20px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .comm__card, .comm__help a { transition: none; } } /* Панель подвала. */ .foot__panel { position: relative; padding: 34px 32px 22px; border-radius: 26px 26px 0 0; background: radial-gradient(700px 260px at 0% 0%, rgb(255 122 0 / .07), transparent 70%), #0f0f12; border: 1px solid var(--line); border-bottom: 0; } /* Тонкая тёплая грань сверху, гаснущая к краям. */ .foot__panel::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 122 0 / .7) 30%, rgb(255 122 0 / .7) 70%, transparent); } .foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, auto); gap: 32px 56px; align-items: start; } .foot__about b { font: 700 24px/1 Montserrat, var(--ui); letter-spacing: .01em; color: #fff; } .foot__about p { margin-top: 10px; max-width: 38ch; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--muted); } .foot__about p:empty { display: none; } .foot__ip { margin-top: 18px; } .foot__copy { display: inline-flex; align-items: center; gap: 10px; padding: 9px 9px 9px 14px; border-radius: 13px; border: 1px solid var(--line); background: #141418; font: 800 14px var(--ui); color: var(--ink); transition: border-color .18s, transform .12s; } .foot__copy::before { content: "IP"; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); } .foot__copy .ic { padding: 5px; width: 26px; height: 26px; border-radius: 8px; background: rgb(255 255 255 / .06); color: var(--muted); transition: background .18s, color .18s; } .foot__copy:hover { border-color: rgb(255 122 0 / .45); transform: translateY(-1px); } .foot__copy:hover .ic { background: #ff6a13; color: #fff; } .foot__col { display: grid; gap: 10px; justify-items: start; } .foot__col h4 { margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .foot__col a, .foot__col button { font: 600 14px var(--ui); color: rgb(255 255 255 / .78); transition: color .18s; } .foot__col a:hover, .foot__col button:hover { color: #ff8a3d; } .foot__pay { display: grid; grid-template-columns: repeat(3, 52px); gap: 8px; } .foot__pay span { display: grid; place-items: center; height: 34px; border-radius: 10px; background: #141418; border: 1px solid var(--line); } .foot__pay img { width: auto; display: block; } .foot__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .06); font-size: 12.5px; font-weight: 600; color: var(--muted); } .foot__bottom button { font: inherit; color: inherit; transition: color .18s; } .foot__bottom button:hover { color: var(--ink); } .foot__legal { opacity: .6; } .foot__credit { opacity: .55; font-size: 11.5px; } .foot__credit:hover { opacity: .9; } .foot__year { margin-left: auto; color: rgb(255 255 255 / .6); } @media (max-width: 1040px) { .foot__top { grid-template-columns: 1fr 1fr 1fr; } .foot__about { grid-column: 1 / -1; } } @media (max-width: 720px) { .foot__panel { padding: 26px 18px 18px; } .foot__top { grid-template-columns: 1fr 1fr; gap: 24px; } .foot__col:last-child { grid-column: 1 / -1; } } /* ---- модалка ---- */ .modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgb(4 4 6 / .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s; } .modal.is-open { opacity: 1; } .modal[hidden] { display: none; } .modal__card { position: relative; width: min(430px, 100%); padding: 26px; display: grid; gap: 16px; transform: translateY(14px) scale(.98); transition: transform .28s cubic-bezier(.2,.9,.25,1.1); } .modal.is-open .modal__card { transform: none; } .modal__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); color: var(--muted); } .modal__x:hover { color: var(--ink); } .modal__head { display: flex; align-items: center; gap: 14px; } .modal__head small { font-size: 12px; font-weight: 600; color: var(--muted); } .modal__head h3 { font: 800 20px var(--display); } .fld { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .fld input { padding: 13px 14px; border-radius: 14px; border: 2px solid var(--line); background: #0f0f13; color: var(--ink); font-weight: 700; outline: none; transition: border-color .18s; } .fld input:focus { border-color: var(--acc); } .fld input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px #0f0f13 inset; transition: background-color 600000s 0s; } .modal__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--muted); } .modal__total b { font: 800 24px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; } .modal__msg { font-size: 12.5px; font-weight: 600; text-align: center; color: var(--acc); } .modal__msg:empty { display: none; } .modal__terms { font-size: 11.5px; font-weight: 500; text-align: center; color: var(--muted); } .modal__terms a { color: var(--acc); font-weight: 700; } /* ---- тост ---- */ .toast { position: fixed; left: 50%; bottom: 26px; z-index: 70; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #101014; font-size: 13.5px; font-weight: 800; translate: -50% 16px; opacity: 0; pointer-events: none; transition: .25s; } .toast.show { translate: -50% 0; opacity: 1; } /* ---- адаптив ---- */ @media (max-width: 1040px) { .promo { grid-template-columns: 1fr; } .promo__small { min-height: 150px; } /* Категории — горизонтальная лента над сеткой. */ .shop { grid-template-columns: 1fr; gap: 18px; } .cats { position: static; align-self: auto; } .cats__list { position: static; } .cats__label { display: none; } .cats__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .cat, .cat:last-child:nth-child(odd) { flex: none; display: flex; align-items: center; gap: 8px; min-height: 0; padding: 8px 14px 8px 8px; grid-column: auto; } .cat__ic, .cat:last-child:nth-child(odd) .cat__ic { width: 28px; height: 28px; margin: 0; } .cat__ic img { width: 26px; height: 26px; } .cat__ic svg { width: 20px; height: 20px; } .cat__from { display: none; } } @media (max-width: 720px) { /* Персонажи и кейсы не помещаются рядом с текстом — уводим их полосой вниз. */ /* место под сцену: её высота = ширина / 2.048, а ширина на телефоне — 118% баннера */ .promo__big { padding-bottom: calc(100% * 1.18 / 2.048); } /* % отступа — от ширины карточки */ .promo__small { padding-bottom: 196px; } .promo h1, .promo h2 { font-size: 24px; } .promo__art--hero { width: 118%; right: -9%; } .promo__art--cases { top: auto; height: 180px; width: 100%; right: 0; } .case--big { width: auto; height: 118%; right: 4%; bottom: -22%; } .case--a { width: auto; height: 58%; left: 8%; bottom: 8%; } .case--b { width: auto; height: 42%; right: auto; left: 34%; top: 4%; } .promo__big, .promo__small { min-height: 0; } .nav { display: none; } .top__in { flex-wrap: wrap; } /* Шапка окна товара — в одну колонку: название, бонус, сроки. Иконки дублируют карточку, на узком экране их прячем; три срока короткие и помещаются в ряд. */ .detail__head { grid-template-columns: minmax(0, 1fr); } .sheet .detail__head { padding-right: 24px; } .sheet .detail__main { padding-right: 40px; } .detail__icons { display: none; } .detail__bonus { position: static; justify-self: start; text-align: left; margin-top: 10px; } .sheet { padding: 12px; } .foot__year { margin-left: 0; width: 100%; } .buy { flex-wrap: wrap; } .buy .btn { width: 100%; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } .modal__terms button:hover { color: var(--ink); } .modal__terms button { color: var(--acc); font-weight: 700; font-size: inherit; } /* [hidden] должен побеждать display из правил ниже. */ .online[hidden], .detail__bonus[hidden], .periods[hidden], .exch[hidden] { display: none; } /* Сплошное описание (ключи, валюта): абзац вместо списка с маркерами. */ .perks__list--plain li { display: block; padding: 10px 2px 0; border: 0; } .perks__text { font-size: 13.5px; font-weight: 600; line-height: 1.65; color: var(--muted); } /* Картинки товаров: пиксель-арт не должен размываться. */ .art-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } /* Логотип целиком белый: части бренда не выделяем. */ .brand__acc, .brand__dim { color: inherit; } /* Счётчики сумм: моноширинные цифры, иначе число «дёргается» при перерисовке. */ .buy__sum b, .detail__bonus b, .modal__total b { font-variant-numeric: tabular-nums; } /* Короткий подскок при изменении суммы. */ @keyframes bump { 0% { transform: none; } 35% { transform: translateY(-3px) scale(1.045); } 100% { transform: none; } } .is-bump { animation: bump .42s cubic-bezier(.2,.8,.25,1); } /* Плашка онлайна занимает место до ответа бэкенда: иначе меню дёргается вбок. */ .online { min-width: 118px; justify-content: center; } .online { transition: opacity .6s, visibility .6s; } .online.is-idle { visibility: hidden; opacity: 0; } /* ---- обменник валюты ---- */ .exch { grid-column: 1 / -1; margin-top: 18px; display: grid; gap: 14px; } .exch[hidden] { display: none; } .exch__top { display: flex; justify-content: space-between; align-items: baseline; } .exch__label { font-size: 12.5px; font-weight: 700; color: var(--muted); } .exch__amount { font: 800 20px var(--display); font-variant-numeric: tabular-nums; } /* ---- ползунок суммы ---- Видимая часть — своя: утопленная дорожка, огненная заливка со свечением, мягкий бегунок с ореолом, отметки пресетов и подсказка с суммой. Поверх лежит прозрачный — он принимает мышь, касания и клавиатуру. Положение картинки — --t (0…1), app.js плавно подводит его к значению. Бегунок радиусом --r ходит от края до края так же, как ползунок браузера, поэтому рука и картинка совпадают. */ .exslide { --t: 0; --r: 11px; position: relative; height: 34px; margin: 2px 0 0; touch-action: pan-y; } /* Дорожка — тонкая и спокойная, заливка — ровный фирменный оранжевый. */ .exslide__track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; translate: 0 -50%; border-radius: 999px; background: rgb(255 255 255 / .07); overflow: hidden; } .exslide__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; width: calc(var(--r) + (100% - 2 * var(--r)) * var(--t)); background: linear-gradient(90deg, #ff8a1f, #ff5a0a); box-shadow: 0 0 12px rgb(255 100 10 / .45); } /* Отметки пресетов больше не рисуем — дорожка остаётся чистой. */ .exslide__ticks { display: none; } /* Бегунок: белый кружок с оранжевой каймой и мягкой тенью. */ .exslide__thumb { position: absolute; top: 50%; left: calc(var(--r) + (100% - 2 * var(--r)) * var(--t)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); translate: -50% -50%; pointer-events: none; border-radius: 50%; background: #fff; border: 3px solid #ff6a12; box-shadow: 0 4px 12px rgb(0 0 0 / .45), 0 0 0 0 rgb(255 106 18 / 0); transition: scale .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; } .exslide:hover .exslide__thumb { scale: 1.08; box-shadow: 0 4px 12px rgb(0 0 0 / .45), 0 0 0 6px rgb(255 106 18 / .14); } .exslide.is-drag .exslide__thumb { scale: 1.15; box-shadow: 0 6px 16px rgb(0 0 0 / .5), 0 0 0 8px rgb(255 106 18 / .18); } .exslide:has(.slider:focus-visible) .exslide__thumb { box-shadow: 0 4px 12px rgb(0 0 0 / .45), 0 0 0 6px rgb(255 140 60 / .4); } /* Подсказка с суммой над бегунком — видна, пока ползунок держат или наводят. */ .exslide__bubble { position: absolute; bottom: calc(100% - 2px); left: calc(var(--r) + (100% - 2 * var(--r)) * var(--t)); translate: -50% 6px; opacity: 0; pointer-events: none; white-space: nowrap; padding: 5px 9px; border-radius: 9px; background: #fff; color: #17120e; font: 800 12px var(--display); font-variant-numeric: tabular-nums; box-shadow: 0 8px 20px rgb(0 0 0 / .45); transition: opacity .2s, translate .25s cubic-bezier(.3,1.4,.5,1); } .exslide__bubble::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% -1px; border: 5px solid transparent; border-top-color: #fff; } .exslide:hover .exslide__bubble, .exslide.is-drag .exslide__bubble, .exslide:has(.slider:focus-visible) .exslide__bubble { opacity: 1; translate: -50% 0; } /* Сам ползунок браузера — прозрачный слой поверх, бегунок того же размера. */ .exslide .slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; } .exslide .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 34px; } .exslide .slider::-moz-range-thumb { width: 22px; height: 34px; border: 0; } .exslide .slider:active { cursor: grabbing; } /* Пресеты — пилюли; выбранный залит фирменным градиентом. */ .exch__presets { display: flex; flex-wrap: wrap; gap: 8px; } .exch__presets button { padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s, border-color .2s, background .2s, translate .2s; } .exch__presets button:hover { color: var(--ink); border-color: rgb(255 130 50 / .45); background: rgb(255 110 20 / .08); translate: 0 -1px; } .exch__presets button.on { color: #fff; background: #ff6a13; border-color: transparent; box-shadow: none; } .exch__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .exch__cell { position: relative; padding: 13px 15px; border-radius: 14px; background: #0f0f13; border: 1px solid var(--line); } .exch__cell small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); } .exch__cell b { font: 800 18px var(--display); font-variant-numeric: tabular-nums; } .exch__cell--get b { color: var(--green); } .exch__bonus { position: absolute; top: 10px; right: 12px; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; color: #0e1a12; background: var(--green); } .exch__hint { font-size: 12px; font-weight: 600; color: var(--muted); } .exch__hint:empty { display: none; } @media (max-width: 520px) { .exch__cols { grid-template-columns: 1fr; } } /* Значения в ячейках — просто текст, как на MixerGrief: число и единица рядом. */ .exch__val { display: flex; align-items: baseline; gap: 6px; } .exch__val i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); } /* Бейдж бонуса: тег в этой ячейке красится зелёным, поэтому цвет и кегль задаём явно — иначе получается зелёное на зелёном. */ .exch__cell--get .exch__bonus { color: #0b1710; font: 800 11px var(--ui); letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: var(--green); } /* Сумму можно вписать руками. Поле растягивается по числу: невидимая копия текста (data-v) лежит в той же клетке сетки и задаёт ширину, поэтому «₽» всегда вплотную к цифрам и ничего не прыгает при наборе. */ .exch__cell--edit { cursor: text; transition: border-color .18s, background .18s; } .exch__cell--edit:hover { border-color: #34343f; } .exch__cell--edit:focus-within { border-color: var(--acc); background: #121217; } .exch__cell--get.exch__cell--edit:focus-within { border-color: var(--green); } .exch__cell--get .exch__field input { color: var(--green); caret-color: var(--green); } .exch__field { display: inline-grid; } .exch__field::after, .exch__field input { grid-area: 1 / 1; font: 800 18px var(--display); font-variant-numeric: tabular-nums; padding: 0; margin: 0; border: 0; } .exch__field::after { content: attr(data-v); visibility: hidden; white-space: pre; } /* size="1" в разметке и нулевая базовая ширина: иначе поле приносит свои встроенные 20 символов и распирает клетку, а «₽» уезжает вправо. */ .exch__field input { width: 0; min-width: 100%; background: none; outline: none; color: var(--ink); caret-color: var(--acc); } /* Подсказка про следующий бонус: иконка слева, ключевые цифры ярче. */ .exch__hint { display: flex; align-items: center; gap: 7px; } .exch__hint .ic { color: var(--acc); flex: none; } .exch__hint b { color: var(--ink); font-weight: 800; } /* ======== страница контактов ======== */ .contacts { padding-bottom: 20px; } /* Баннер: ровная тёмная панель, по краям объёмные фигуры во всю высоту, в центре заголовок и переключатель страниц. Фигуры обрезаются краем панели. */ .c-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; align-content: center; gap: 22px; min-height: 300px; margin: 18px 0 20px; padding: 40px 24px; text-align: center; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); background: radial-gradient(60% 80% at 50% 50%, #1c1c21, #141417); } .c-hero h1 { position: relative; z-index: 2; font: 900 clamp(38px, 5vw, 64px)/1 var(--display); letter-spacing: -.01em; text-shadow: 0 8px 30px rgb(0 0 0 / .5); } /* Кучи металлических фигур по краям (рендеры с прозрачным фоном). Куча растягивается на всю высоту баннера и обрезается его краями; фигуры внутри раскладываются в процентах, поэтому композиция одинакова на любой ширине. */ .c-pile { position: absolute; top: 0; bottom: 0; z-index: 1; aspect-ratio: 1.25; pointer-events: none; } .c-pile--l { left: 0; } .c-pile--r { right: 0; } .c-pile img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; rotate: var(--r); filter: drop-shadow(0 16px 22px rgb(0 0 0 / .55)); } /* Переключатель под заголовком: три иконки, текущая — крупнее и белая. */ .c-tabs { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; } .c-tabs__i { display: grid; place-items: center; color: #5f5f6a; transition: color .18s, transform .18s; } .c-tabs__i .ic { width: 18px; height: 18px; } .c-tabs__i:hover { color: var(--ink); transform: translateY(-1px); } .c-tabs__i.on { color: #fff; } .c-tabs__i.on .ic { width: 26px; height: 26px; stroke-width: 2; } /* Сетка каналов: высокие карточки по краям, в центре поддержка над Discord. */ .c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; padding-bottom: 60px; } .c-mid { display: grid; gap: 20px; } /* Карточка канала: сверху прямые углы, снизу — полукруглое «дно». Свечение и кольца поднимаются из-под низа карточки в цвете сети. */ .c-card { --c: var(--acc); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 390px; padding: 30px 26px 60px; text-align: center; border-radius: 22px 22px 110px 110px; border: 1px solid var(--line); background: repeating-radial-gradient(circle at 50% 122%, transparent 0 64px, rgb(255 255 255 / .04) 64px 65px), linear-gradient(180deg, #18181d, #101014); transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s; } .c-card--telegram { --c: #3fa9f5; } .c-card--discord { --c: #7b6cff; } .c-card--vk { --c: #3f6fe0; } .c-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(75% 46% at 50% 112%, color-mix(in oklab, var(--c) 80%, transparent), transparent 72%); opacity: .85; transition: opacity .25s; } .c-card__ic { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; border-radius: 18px; color: #fff; background: color-mix(in oklab, var(--c) 22%, rgb(255 255 255 / .04)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 10px 26px color-mix(in oklab, var(--c) 25%, transparent); transition: transform .22s, background .22s; } .c-card__ic .ic { width: 30px; height: 30px; stroke-width: 2.2; } .c-card:hover .c-card__ic { transform: translateY(-2px) scale(1.04); background: color-mix(in oklab, var(--c) 34%, rgb(255 255 255 / .04)); } .c-card b { font: 900 20px/1.2 var(--display); letter-spacing: -.005em; } .c-card small { font-size: 13px; font-weight: 600; color: var(--muted); max-width: 26ch; } .c-card__go { display: grid; place-items: center; width: 60px; height: 30px; margin-top: 14px; border-radius: 10px; background: rgb(255 255 255 / .12); color: #fff; transition: background .2s, transform .2s; } .c-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--c) 45%, var(--line)); box-shadow: 0 22px 44px color-mix(in oklab, var(--c) 20%, transparent); } .c-card:hover::after { opacity: 1; } .c-card:hover .c-card__go { background: var(--c); transform: translateX(2px); } /* Плашка поддержки — фирменный градиент, как у главной кнопки покупки. */ .c-help { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 18px 18px 18px 18px; border-radius: 22px; background: radial-gradient(220% 70% at 0% 90%, #ff3d00, #ff6a00 55%, #ff9a2e); box-shadow: 0 14px 34px rgb(255 92 0 / .3); transition: transform .2s, box-shadow .2s, filter .2s; } .c-help::before { content: ""; position: absolute; inset: -60% -20%; z-index: -1; background: repeating-conic-gradient(from 210deg at 92% 130%, rgb(255 255 255 / .14) 0deg 3deg, transparent 3deg 13deg); } .c-help__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: #fff; color: var(--acc-2); } .c-help__ic .ic { width: 24px; height: 24px; stroke-width: 2.1; } .c-help__t b { display: block; font: 900 16px/1.2 var(--display); } .c-help__t small { font-size: 12.5px; font-weight: 600; color: rgb(255 255 255 / .82); } .c-help__go { display: grid; place-items: center; flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .2); color: #fff; transition: background .2s, transform .2s; } .c-help:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgb(255 92 0 / .42); filter: brightness(1.05); } .c-help:hover .c-help__go { background: rgb(255 255 255 / .32); transform: translateX(2px); } /* Узкий экран: одна колонка, поддержка — первой, карточки ниже ростом. */ @media (max-width: 900px) { .c-grid { grid-template-columns: 1fr; gap: 14px; } .c-mid { display: contents; } .c-help { order: -1; } .c-card { height: 290px; border-radius: 22px 22px 90px 90px; } /* Заголовок сверху, фигуры — в нижней половине, чтобы не лезли на иконки. */ .c-hero { min-height: 300px; align-content: start; padding-top: 42px; } /* На телефоне кучи уходят в нижнюю часть баннера, под заголовок. */ .c-pile { top: auto; height: 50%; } } /* ---- плавная загрузка ---- Пока шрифты и картинки первого экрана грузятся — страница прозрачная (is-loading), потом блоки по очереди мягко поднимаются на место (is-ready). */ @keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } html.is-loading .top, html.is-loading main, html.is-loading .foot { opacity: 0; } html.is-ready .top { animation: fade .9s ease both; } html.is-ready .promo__big, html.is-ready .promo__small, html.is-ready .shop > *, html.is-ready .c-hero, html.is-ready .c-grid > * { animation: rise 1s cubic-bezier(.22,.61,.36,1) both; } html.is-ready .promo__small { animation-delay: .12s; } html.is-ready .shop > :nth-child(1) { animation-delay: .24s; } html.is-ready .shop > :nth-child(2) { animation-delay: .34s; } html.is-ready .c-grid > :nth-child(1) { animation-delay: .15s; } html.is-ready .c-grid > :nth-child(2) { animation-delay: .25s; } html.is-ready .c-grid > :nth-child(3) { animation-delay: .35s; } html.is-ready .c-grid > :nth-child(n+4) { animation-delay: .45s; } html.is-ready .foot { animation: fade 1s .5s ease both; } /* Картинки товаров проявляются по мере загрузки. */ .art-img { opacity: 0; transition: opacity .6s ease; } .art-img.is-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { html.is-ready *, .grid > .card, .card__art img, .card__art svg, .card__art::after { animation: none !important; } .periods__pill, .card, .card__art img { transition: none; } .art-img { transition: none; } } /* Средние экраны: шапка тесная (логотип, онлайн, четыре пункта и «Кабинет») — ужимаем меню, чтобы «Как зайти на сервер?» не ломалось на три строки. */ @media (min-width: 721px) and (max-width: 1180px) { .top__in { gap: 10px; } .nav { gap: 0; } .nav__l { padding: 10px 11px; font-size: 13.5px; } } /* Пять пунктов меню: на узких ноутбуках и планшетах поджимаем подписи. */ @media (min-width: 721px) and (max-width: 1080px) { .nav__more { display: none; } .online__l { display: none; } } @media (min-width: 721px) and (max-width: 960px) { .top__in { gap: 6px; } .nav__l { padding: 9px 9px; font-size: 13px; } } @media (min-width: 721px) and (max-width: 860px) { .nav__l { padding: 9px 7px; } .brand b { font-size: 19px; } } @media (min-width: 721px) and (max-width: 800px) { .online { display: none; } } /* ---- раздел «Валюта»: панель на странице, как у artygrief ---- Сверху выбор валюты карточками, ниже панель: суммы плиткой, расчёт «Вы получите / За сумму», ползунок с границами, кнопка «Купить за …» и крупная картинка справа. */ .grid[hidden], .cur[hidden] { display: none; } .cur { display: grid; gap: 12px; } .cur__pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .cur-opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 16px; text-align: left; background: var(--panel); border: 1px solid var(--line); transition: background .25s, border-color .25s, transform .15s; } .cur-opt:hover { border-color: #34343f; } .cur-opt:active { transform: scale(.99); } .cur-opt.on { background: linear-gradient(100deg, rgb(255 110 20 / .16), rgb(255 110 20 / .04)); border-color: rgb(255 130 50 / .5); } .cur-opt__ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: #0e0e12; border: 1px solid rgb(255 255 255 / .06); } .cur-opt__ic img, .cur-opt__ic svg { width: 36px; height: 36px; image-rendering: auto; } .cur-opt__t { display: grid; gap: 2px; min-width: 0; } .cur-opt__t b { font-size: 15px; font-weight: 800; color: var(--ink); } .cur-opt__t small { font-size: 12px; font-weight: 700; color: var(--muted); transition: color .25s; } .cur-opt.on .cur-opt__t small { color: var(--green); } .cur-opt__check { display: grid; place-items: center; flex: none; margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .14); color: transparent; transition: background .25s, border-color .25s, color .25s; } .cur-opt.on .cur-opt__check { background: #ff6a13; border-color: transparent; color: #fff; } .cur-opt__check .ic { width: 13px; height: 13px; stroke-width: 3; } .cur__panel { padding: 20px 24px 22px; } .cur__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; } .cur__crumbs { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .cur__crumbs .ic { width: 12px; height: 12px; opacity: .6; } .cur__rate { padding: 5px 10px; border-radius: 10px; background: #0e0e12; border: 1px solid var(--line); font-size: 12px; font-weight: 800; white-space: nowrap; } .cur__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .cur__main { display: grid; gap: 14px; align-content: start; min-width: 0; } .cur__name { font: 800 34px/1.05 var(--display); letter-spacing: -.01em; } .cur__desc { margin-top: -6px; max-width: 440px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--muted); } .cur .exch { margin-top: 0; gap: 14px; } /* Суммы — плитки: цена и сколько придёт с бонусом. */ .cur .exch__presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; } .cur .exch__presets button { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border-radius: 12px; translate: none; background: #0f0f13; border: 1px solid var(--line); box-shadow: none; } .cur .exch__presets button b { font: 800 15px var(--display); color: var(--ink); } .cur .exch__presets button small { font-size: 11px; font-weight: 700; color: var(--muted); } .cur .exch__presets button:hover { border-color: rgb(255 130 50 / .4); background: rgb(255 110 20 / .06); } .cur .exch__presets button.on { background: rgb(255 110 20 / .14); border-color: rgb(255 130 50 / .6); box-shadow: none; } .cur .exch__presets button.on small { color: #ffb070; } /* Расчёт: одна рамка, слева крупно «Вы получите», справа «За сумму» с вводом. */ .cur .exch__cols { grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 16px 18px; border-radius: 16px; background: #0c0c0f; border: 1px solid var(--line); } .cur .exch__cell { padding: 0; background: none; border: 0; } .cur .exch__cell--edit:hover, .cur .exch__cell--edit:focus-within { background: none; border: 0; } .cur .exch__cell--edit:focus-within small { color: var(--acc); } .cur .exch__cell--get { order: -1; padding-right: 18px; } .cur .exch__cell--get.exch__cell--edit:focus-within small { color: var(--green); } .cur .exch__cell:not(.exch__cell--get) { min-width: 150px; padding-left: 18px; border-left: 1px solid var(--line); } .cur .exch__cell small { font-size: 12px; margin-bottom: 4px; } .cur .exch__cell--get .exch__field::after, .cur .exch__cell--get .exch__field input { font-size: 40px; line-height: 1.1; } .cur .exch__cell:not(.exch__cell--get) .exch__field::after, .cur .exch__cell:not(.exch__cell--get) .exch__field input { font-size: 26px; line-height: 1.2; } .cur .exch__cell:not(.exch__cell--get) .exch__val i { color: var(--acc); font-size: 18px; font-weight: 800; } .cur .exch__cell--get .exch__bonus { top: 0; right: 18px; } .exch__note { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); } .exch__lims { display: flex; justify-content: space-between; margin-top: -10px; font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .cur__buy { width: 100%; padding: 16px 20px; border-radius: 12px; font-size: 15px; } .cur__foot { margin-top: -6px; font-size: 12px; font-weight: 600; color: var(--muted); } /* Картинка валюты: крупно, на тёмной подложке со свечением её цвета, плавно парит. */ .cur__art { --h: 145; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; border-radius: 18px; background: radial-gradient(55% 55% at 50% 50%, hsl(var(--h) 80% 45% / .3), transparent 70%), #0c0c0f; border: 1px solid var(--line); } .cur__art img, .cur__art svg { width: min(72%, 280px); height: auto; image-rendering: auto; filter: drop-shadow(0 20px 40px hsl(var(--h) 90% 40% / .5)); animation: card-float 5s ease-in-out infinite; } @media (max-width: 860px) { .cur__body { grid-template-columns: minmax(0, 1fr); } .cur__art { order: -1; min-height: 190px; } .cur__art img, .cur__art svg { width: 150px; } } @media (max-width: 520px) { .cur .exch__cols { grid-template-columns: minmax(0, 1fr); gap: 14px; } .cur .exch__cell:not(.exch__cell--get) { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--line); } .cur__name { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .cur__art img, .cur__art svg { animation: none; } } /* ---- кнопки: Onest — современный гротеск, аккуратнее жирного Manrope ---- */ .btn, .card__buy, .promo__cta, .cur__buy, .tk__cta { font-family: Onest, var(--ui); font-weight: 600; letter-spacing: .01em; } /* ---- окно оформления — «билет» ---- Корешок с товаром, перфорация с вырезами по краям (маска), шаги «Игрок → Оплата» и нижняя панель с суммой и одной главной кнопкой. */ .modal__card.tk { --h: 265; --cut: 104px; width: min(440px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 0; gap: 0; border-radius: 24px; background: #121215; border: 0; scrollbar-width: thin; scrollbar-color: #2f2f3a transparent; -webkit-mask: radial-gradient(circle at 0 var(--cut), transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% var(--cut), transparent 12px, #000 12.5px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 var(--cut), transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% var(--cut), transparent 12px, #000 12.5px) right / 51% 100% no-repeat; } .tk .modal__x { z-index: 2; top: 16px; right: 16px; } /* Корешок: товар и что именно покупают. */ .tk__stub { display: flex; align-items: center; gap: 14px; height: var(--cut); padding: 0 58px 0 20px; background: radial-gradient(120% 160% at 0% 0%, hsl(var(--h) 85% 55% / .26), transparent 60%), linear-gradient(180deg, #1a1a20, #141418); } .tk__ico { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 18px; background: radial-gradient(circle at 50% 70%, hsl(var(--h) 85% 50% / .45), transparent 70%), #0e0e12; border: 1px solid hsl(var(--h) 90% 70% / .35); box-shadow: 0 10px 22px -10px hsl(var(--h) 90% 45% / .7); } .tk__ico img, .tk__ico svg { width: 44px; height: 44px; image-rendering: auto; } .tk__what { display: grid; gap: 7px; min-width: 0; } .tk__what h3 { font: 800 21px/1.1 var(--display); overflow-wrap: anywhere; } .tk__chips { display: flex; flex-wrap: wrap; gap: 6px; } .tk__chip { padding: 4px 9px; border-radius: 8px; background: rgb(255 255 255 / .07); font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .tk__chip--bonus { color: #5ee88a; background: rgb(40 200 100 / .12); } .tk__chip[hidden] { display: none; } /* Перфорация между корешком и телом билета. */ .tk__perf { height: 0; margin: 0 20px; border-top: 2px dashed rgb(255 255 255 / .12); } .tk__body { display: grid; gap: 16px; padding: 18px 20px 16px; } /* Шаги: две точки, между ними линия, заполняется при переходе. */ .tk__steps { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; } .tk__st { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); transition: color .3s; } .tk__dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: #0c0c0f; transition: background .3s, border-color .3s, color .3s; } .tk__dot .ic { width: 14px; height: 14px; } .tk__st[data-st="1"], .tk[data-step="2"] .tk__st[data-st="2"] { color: var(--ink); } .tk__st[data-st="1"] .tk__dot, .tk[data-step="2"] .tk__st[data-st="2"] .tk__dot { background: #ff6a13; border-color: transparent; color: #fff; } .tk__line { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .tk__line i { display: block; height: 100%; background: #ff6a13; transform-origin: left; scale: 0 1; transition: scale .45s cubic-bezier(.3,.9,.3,1); } .tk[data-step="2"] .tk__line i { scale: 1 1; } /* Лента шагов. */ .tk__view { overflow: hidden; margin: -4px; padding: 4px; box-sizing: border-box; transition: height .45s cubic-bezier(.3,.9,.3,1); } .tk.is-instant .tk__view { transition: none; } .tk__track { align-items: start; } .tk__track { display: grid; grid-template-columns: 100% 100%; column-gap: 8px; transition: translate .45s cubic-bezier(.3,.9,.3,1); } .tk[data-step="2"] .tk__track { translate: calc(-100% - 8px) 0; } .tk.is-instant .tk__track, .tk.is-instant .tk__line i { transition: none; } .tk__pane { display: grid; gap: 10px; align-content: start; min-width: 0; transition: opacity .3s; } .tk[data-step="1"] .tk__pane[data-step="2"], .tk[data-step="2"] .tk__pane[data-step="1"] { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .45s; } /* Поля с «плавающей» подписью: подпись внутри поля, при вводе уезжает наверх. */ .tk-in { position: relative; display: block; } .tk-in input { width: 100%; padding: 22px 42px 8px 15px; border-radius: 14px; background: #0c0c0f; border: 1.5px solid var(--line); color: var(--ink); outline: none; font: 700 15px var(--ui); transition: border-color .2s, box-shadow .2s; } .tk-in input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px #0c0c0f inset; transition: background-color 600000s 0s; } .tk-in__label { position: absolute; left: 16px; top: 50%; translate: 0 -50%; pointer-events: none; font-size: 14px; font-weight: 600; color: var(--muted); transition: top .2s, font-size .2s, color .2s, translate .2s; } .tk-in input:focus + .tk-in__label, .tk-in input:not(:placeholder-shown) + .tk-in__label { top: 14px; font-size: 11px; color: var(--acc); } .tk-in input:not(:focus):not(:placeholder-shown) + .tk-in__label { color: var(--muted); } .tk-in input:focus { border-color: var(--acc); box-shadow: 0 0 0 4px rgb(255 110 20 / .12); } .tk-in__ok { position: absolute; right: 15px; top: 50%; translate: 0 -50%; color: var(--green); opacity: 0; scale: .5; transition: opacity .2s, scale .3s cubic-bezier(.3,1.6,.5,1); } .tk-in.is-ok .tk-in__ok { opacity: 1; scale: 1; } .tk-in.is-ok input { border-color: rgb(60 220 120 / .45); } .tk-in.is-ok input:focus { box-shadow: 0 0 0 4px rgb(60 220 120 / .12); } .tk-in.is-ok input:focus + .tk-in__label { color: var(--green); } .tk-in.is-bad input { border-color: rgb(255 80 80 / .6); box-shadow: 0 0 0 4px rgb(255 80 80 / .1); } .tk-in__hint { margin: -4px 2px 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); opacity: .85; } .tk-in.is-bad + .tk-in__hint { color: #ff7a7a; opacity: 1; } /* Способ оплаты — три плитки в ряд. */ .tk-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .tk-pay__opt { position: relative; display: grid; justify-items: center; gap: 3px; padding: 14px 8px 12px; border-radius: 16px; cursor: pointer; text-align: center; background: #0c0c0f; border: 1.5px solid var(--line); transition: border-color .2s, background .2s, translate .2s; } .tk-pay__opt input { position: absolute; opacity: 0; pointer-events: none; } /* Логотипы способа — всегда сверху, в строке одной высоты: знак СБП, платёжные системы у карты, монеты у крипты. У невыбранных — чуть приглушены. */ .tk-pay__logos { display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; margin-bottom: 4px; opacity: .85; transition: opacity .2s, scale .25s; } .tk-pay__logos img { width: auto; display: block; } .tk-pay__opt:hover .tk-pay__logos, .tk-pay__opt:has(input:checked) .tk-pay__logos { opacity: 1; } .tk-pay__opt:has(input:checked) .tk-pay__logos { scale: 1.06; } .tk-pay__opt b { font-size: 14px; font-weight: 800; color: var(--ink); } .tk-pay__opt small { font-size: 11.5px; font-weight: 600; color: var(--muted); } .tk-pay__opt:hover { border-color: #34343f; translate: 0 -1px; } .tk-pay__opt:has(input:checked) { border-color: rgb(255 130 50 / .65); background: radial-gradient(90% 90% at 50% 0%, rgb(255 110 20 / .18), transparent 70%), #0c0c0f; } /* Галочка в углу выбранной плитки. */ .tk-pay__opt::after { content: ""; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: #ff6a13; opacity: 0; scale: .5; transition: opacity .2s, scale .3s cubic-bezier(.3,1.6,.5,1); } .tk-pay__opt:has(input:checked)::after { opacity: 1; scale: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, #ff6a13; } .tk-pay__opt:has(input:focus-visible) { box-shadow: 0 0 0 4px rgb(255 110 20 / .2); } /* Кому выдадим — строка с кнопкой «изменить». */ .tk__who { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px 12px 12px; border-radius: 14px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .08); text-align: left; color: var(--muted); transition: border-color .2s, background .2s; } .tk__who > span { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .tk__who-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgb(60 220 120 / .12); color: var(--green); } .tk__who-t { display: grid; gap: 2px; min-width: 0; } .tk__who-t small { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.3; } .tk__who-t b { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk__who-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk__who em { flex: none; padding: 7px 12px; border-radius: 10px; background: rgb(255 106 19 / .1); font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--acc); transition: background .2s; } .tk__who:hover { border-color: rgb(255 130 50 / .35); background: rgb(255 255 255 / .045); } .tk__who:hover em { background: rgb(255 106 19 / .18); } /* Нижняя панель: сумма и главная кнопка. */ .tk__bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .tk__sum { display: grid; gap: 1px; } .tk__sum small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .tk__sum b { font: 800 24px var(--display); font-variant-numeric: tabular-nums; } .tk__cta { gap: 8px; padding: 15px 20px; border-radius: 12px; font-size: 15px; } .tk[data-step="1"] .tk__cta--pay, .tk[data-step="2"] [data-m-next] { display: none; } .tk__fine { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: -4px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; } .tk__fine .ic { color: var(--green); } .tk__fine button { color: var(--acc); font-weight: 700; font-size: inherit; } @media (max-width: 420px) { .tk-pay { grid-template-columns: 1fr; } .tk-pay__opt { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; padding: 12px 14px; } .tk-pay__logos { grid-row: span 2; margin: 0; align-self: center; justify-content: flex-start; min-width: 72px; } .tk__bar { grid-template-columns: 1fr; } } /* ---- ползунок суммы: ничего не дёргается ---- Цифры одинаковой ширины (tabular-nums) везде, где они меняются на ходу, у плашки бонуса постоянная ширина, подсказка всегда в одну строку. */ .cur__buy, .exch__hint, .exch__hint b, .exch__lims, .exslide__bubble, .exch__bonus { font-variant-numeric: tabular-nums; } .cur .exch__cell--get .exch__bonus { min-width: 58px; text-align: center; } .cur .exch__hint { height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Прокрутка к товарам (баннеры, ссылки в подвале) — с отступом под липкую шапку. */ #shop { scroll-margin-top: 80px; } /* ======== страница документов ======== */ .docs { padding-bottom: 20px; } /* Шапка: тёмная панель с тёплым свечением из угла, как у подвала; снизу вкладки. */ .docs-hero { position: relative; overflow: hidden; margin: 18px 0 20px; padding: 34px 34px 26px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); background: radial-gradient(620px 300px at 100% 0%, rgb(255 110 20 / .13), transparent 70%), radial-gradient(500px 260px at 0% 100%, rgb(120 80 255 / .07), transparent 70%), linear-gradient(180deg, #17171b, #121215); } .docs-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .docs-crumbs a { transition: color .18s; } .docs-crumbs a:hover { color: var(--ink); } .docs-crumbs .ic { width: 14px; height: 14px; opacity: .6; } .docs-crumbs span { color: var(--ink); } .docs-hero h1 { margin-top: 16px; font: 900 clamp(34px, 4.4vw, 56px)/1 var(--display); letter-spacing: -.01em; } .docs-hero > p { margin-top: 12px; max-width: 62ch; font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--muted); } .docs-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; } .docs-tab { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .07); transition: border-color .2s, background .2s; } .docs-tab__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / .05); color: var(--muted); transition: background .2s, color .2s; } .docs-tab__ic .ic { width: 20px; height: 20px; } .docs-tab__t { display: grid; gap: 1px; min-width: 0; } .docs-tab__t small { font: 700 11px var(--display); letter-spacing: .06em; color: var(--muted); } .docs-tab__t b { font: 700 14px/1.25 Onest, var(--ui); color: rgb(255 255 255 / .82); } .docs-tab:hover { border-color: rgb(255 255 255 / .14); background: rgb(255 255 255 / .05); } .docs-tab.on { border-color: rgb(255 122 0 / .5); background: rgb(255 106 19 / .08); } .docs-tab.on .docs-tab__ic { background: #ff6a13; color: #fff; } .docs-tab.on .docs-tab__t small { color: #ff8a3d; } .docs-tab.on .docs-tab__t b { color: #fff; } /* Тело: слева содержание (липнет при прокрутке), справа текст документа. */ .docs-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; scroll-margin-top: 84px; padding-bottom: 40px; } .docs-side { position: sticky; top: 84px; display: grid; gap: 10px; } .docs-toc { padding: 14px 8px 8px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); } .docs-toc__label { padding: 0 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .docs-toc nav { display: grid; gap: 2px; } .docs-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--muted); transition: color .18s, background .18s; } .docs-toc a i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: rgb(255 255 255 / .05); font: 700 10.5px var(--display); font-style: normal; transition: background .18s, color .18s; } .docs-toc a:hover { color: var(--ink); background: rgb(255 255 255 / .03); } .docs-toc a.on { color: var(--ink); background: rgb(255 255 255 / .05); } .docs-toc a.on i { background: #ff6a13; color: #fff; } .docs-help { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); transition: border-color .2s, background .2s; } .docs-help__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgb(42 171 238 / .12); color: #3fb5f0; } .docs-help__t { flex: 1; min-width: 0; display: grid; gap: 1px; } .docs-help__t b { font-size: 14px; font-weight: 700; color: var(--ink); } .docs-help__t small { font-size: 12px; font-weight: 600; } .docs-help__go { transition: translate .2s; } .docs-help:hover { border-color: #34343f; background: #17171c; } .docs-help:hover .docs-help__go { translate: 2px 0; } /* Документ. Разделы и пункты нумеруются счётчиками: 1, 1.1, 1.2… */ .doc { counter-reset: sec; padding: 36px 42px 40px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .doc[hidden] { display: none; } .doc__head { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid rgb(255 255 255 / .06); } .doc__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff8a3d; } .doc__head h2 { margin-top: 10px; font: 800 clamp(24px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -.01em; } .doc__meta { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); } .doc__lead, .doc__p { max-width: 78ch; font-size: 14.5px; line-height: 1.7; color: rgb(255 255 255 / .72); } .doc__lead { margin-bottom: 8px; } .doc__p { margin-bottom: 12px; } /* «Коротко» — главное из документа до чтения деталей. */ .doc__brief { margin-bottom: 26px; padding: 18px 20px; border-radius: 16px; background: #0f0f12; border: 1px solid rgb(255 255 255 / .06); } .doc__brief > b { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .doc__brief ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 12px; } .doc__brief li { position: relative; padding-left: 28px; font-size: 14px; font-weight: 600; line-height: 1.5; color: rgb(255 255 255 / .85); } .doc__brief li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.5-5' fill='none' stroke='%2346d67a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, rgb(70 214 122 / .12); } /* Плашка-предупреждение. */ .doc__note { display: flex; gap: 14px; margin-bottom: 26px; padding: 16px 18px; border-radius: 16px; background: rgb(90 150 255 / .07); border: 1px solid rgb(90 150 255 / .2); } .doc__note .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: #6ea8ff; } .doc__note p { font-size: 14.5px; font-weight: 600; line-height: 1.6; color: rgb(255 255 255 / .82); } .doc__note b { color: #fff; } .doc__note--warn { background: rgb(255 106 19 / .08); border-color: rgb(255 122 0 / .32); } .doc__note--warn .ic { color: #ff8a3d; } .doc__sec { counter-increment: sec; counter-reset: item; scroll-margin-top: 90px; padding-top: 26px; } .doc__sec + .doc__sec { margin-top: 4px; border-top: 1px solid rgb(255 255 255 / .05); } .doc__sec h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 700 18px/1.3 Onest, var(--ui); color: #fff; } .doc__sec h3::before { content: counter(sec); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgb(255 106 19 / .12); color: #ff8a3d; font: 800 13px var(--display); } .doc__sec > ol:not(.rules) { display: grid; gap: 10px; max-width: 80ch; } .doc__sec > ol:not(.rules) > li { counter-increment: item; position: relative; padding-left: 46px; font-size: 14.5px; line-height: 1.65; color: rgb(255 255 255 / .72); } .doc__sec > ol:not(.rules) > li::before { content: counter(sec) "." counter(item); position: absolute; left: 0; top: 1px; font: 700 12.5px/1.8 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; } .doc__sec li b { color: var(--ink); font-weight: 700; } /* Список «возврат не производится». */ .doc__x { display: grid; gap: 8px; max-width: 80ch; } .doc__x li { position: relative; padding: 10px 14px 10px 42px; border-radius: 12px; background: rgb(255 255 255 / .025); font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / .78); } .doc__x li::before { content: ""; position: absolute; left: 14px; top: 12px; width: 16px; height: 16px; border-radius: 5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5 5 6 6M11 5l-6 6' fill='none' stroke='%23ff6b5a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat, rgb(255 90 70 / .12); } /* Правила сервера: нарушение слева, наказание справа. Баны — красным, муты — оранжевым. */ .rules { display: grid; gap: 8px; } .rules li { counter-increment: item; display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 13px; background: rgb(255 255 255 / .025); border: 1px solid rgb(255 255 255 / .04); } .rules li::before { content: counter(sec) "." counter(item); flex: none; min-width: 30px; font: 700 12.5px var(--display); color: var(--muted); } .rules li span { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; color: rgb(255 255 255 / .82); } .rules li em { flex: none; padding: 5px 10px; border-radius: 8px; font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; background: rgb(255 106 19 / .1); color: #ff9a55; } .rules li em.is-ban { background: rgb(255 80 70 / .12); color: #ff7a6e; } .rules li em.is-soft { background: rgb(255 255 255 / .06); color: var(--muted); } @media (max-width: 1040px) { .docs-tabs { grid-template-columns: 1fr 1fr; } .docs-body { grid-template-columns: 1fr; } .docs-side { position: static; order: 2; } .docs-toc { display: none; } } @media (max-width: 720px) { .docs-hero { padding: 26px 18px 18px; } .docs-tabs { grid-template-columns: 1fr; } .doc { padding: 26px 18px 28px; } .doc__brief ul { grid-template-columns: 1fr; } .doc__sec > ol:not(.rules) > li { padding-left: 38px; } .rules li { flex-wrap: wrap; gap: 8px 12px; } .rules li span { flex-basis: calc(100% - 50px); } .rules li em { margin-left: 42px; } } .doc ul, .doc ol { list-style: none; margin: 0; padding: 0; } /* ---- промокод в окне оплаты ---- */ .tk-promo { display: grid; gap: 6px; } .tk-promo [hidden] { display: none !important; } .tk-promo__form { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; } .tk-promo__ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: #ff8a3d; pointer-events: none; } .tk-promo__form input { min-width: 0; height: 46px; padding: 0 14px 0 40px; border-radius: 12px; border: 1px dashed rgb(255 122 0 / .45); background: rgb(255 106 19 / .05); font: 700 14px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); outline: none; transition: border-color .18s, background .18s; } .tk-promo__form input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 600; color: rgb(255 255 255 / .5); } .tk-promo__form input:hover { border-color: rgb(255 122 0 / .7); } .tk-promo__form input:focus { border-style: solid; border-color: #ff7a1a; background: #0f0f12; } .tk-promo__apply { height: 46px; padding: 0 18px; border-radius: 12px; background: rgb(255 106 19 / .14); color: #ff8a3d; font: 600 13.5px Onest, var(--ui); transition: background .18s, color .18s; } .tk-promo__apply:hover { background: #ff6a13; color: #fff; } .tk-promo__apply:disabled { opacity: .6; pointer-events: none; } .tk-promo__ok { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 12px; background: rgb(70 214 122 / .08); border: 1px solid rgb(70 214 122 / .25); font-size: 13px; font-weight: 600; color: rgb(255 255 255 / .8); } .tk-promo__ok > .ic { color: var(--green); flex: none; } .tk-promo__ok span { flex: 1; min-width: 0; } .tk-promo__ok b { color: #fff; letter-spacing: .04em; } .tk-promo__ok em { font-style: normal; font-weight: 800; color: var(--green); } .tk-promo__del { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); transition: background .18s, color .18s; } .tk-promo__del:hover { background: rgb(255 255 255 / .06); color: var(--ink); } .tk-promo__err { font-size: 12.5px; font-weight: 600; color: #ff7a6e; } .tk-promo__err:empty { display: none; } /* Итог со скидкой: старая цена зачёркнута рядом. */ .tk__sum-v { display: flex; align-items: baseline; gap: 8px; } .tk__sum-v s { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .tk__sum-v s[hidden] { display: none; } /* ---- подарок новичку ---- Карточка в левом нижнем углу; выезжает снизу через пару секунд после захода. Матовое стекло: полупрозрачный фон размывает страницу под собой, светлая кромка сверху даёт толщину. Внутри — тёплое пятно, чтобы стеклу было что преломлять. */ .gift { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(320px, calc(100vw - 32px)); isolation: isolate; overflow: hidden; display: grid; padding: 18px 18px 16px; border-radius: 22px; background: linear-gradient(155deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02) 60%), rgb(16 16 20 / .55); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 24px 60px -12px rgb(0 0 0 / .6); opacity: 0; translate: 0 16px; transition: opacity .3s, translate .4s cubic-bezier(.2,.8,.25,1); } .gift::before { content: ""; position: absolute; z-index: -1; width: 220px; height: 160px; left: -60px; top: -70px; border-radius: 50%; background: #ff6a13; opacity: .28; filter: blur(50px); } /* Без поддержки размытия стекло было бы прозрачным — подкладываем плотный фон. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gift { background: linear-gradient(155deg, rgb(255 255 255 / .06), transparent 60%), #16161a; } } .gift.is-open { opacity: 1; translate: 0 0; } .gift[hidden] { display: none; } .gift__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .06); transition: background .18s, color .18s; } .gift__x .ic { width: 14px; height: 14px; } .gift__x:hover { background: rgb(255 255 255 / .14); color: #fff; } .gift__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffa060; } .gift__deal { display: flex; align-items: center; gap: 12px; margin-top: 6px; } .gift__deal b { font: 900 40px/1 var(--display); letter-spacing: -.03em; color: #fff; } .gift__deal span { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: rgb(255 255 255 / .72); } .gift__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; } .gift__code { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 12px 0 14px; border-radius: 14px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .1); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); font: 800 14px var(--ui); letter-spacing: .1em; color: #fff; transition: border-color .18s, background .18s; } .gift__code:hover { border-color: rgb(255 255 255 / .22); background: rgb(0 0 0 / .36); } .gift__code .ic { width: 16px; height: 16px; color: rgb(255 255 255 / .5); transition: opacity .18s, scale .18s; } .gift__done { position: absolute; right: 12px; opacity: 0; scale: .6; color: var(--green) !important; } .gift__code.is-done .gift__copy { opacity: 0; scale: .6; } .gift__code.is-done .gift__done { opacity: 1; scale: 1; } .gift__go { height: 44px; padding: 0 20px; border-radius: 14px; background: #ff6a13; color: #fff; font-size: 14px; font-weight: 800; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); transition: background .2s, transform .12s; } .gift__go:hover { background: #ff7b2c; } .gift__go:active { background: #f25e0a; transform: translateY(1px); } .gift__x:focus-visible, .gift__code:focus-visible, .gift__go:focus-visible { outline: 2px solid #ffa060; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .gift, .gift__code .ic { transition: none; } } /* Голова скина в поле ника и у получателя: пиксели без размытия, мягкое появление. */ .tk-in__head { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 4px 10px rgb(0 0 0 / .4); animation: head-in .3s cubic-bezier(.3,1.4,.5,1); } @keyframes head-in { from { opacity: 0; scale: .6; } } .tk-in__head[hidden] { display: none; } /* у картинок на сайте display:block — он перебивает hidden */ .tk-in.has-head input { padding-left: 56px; } .tk-in.has-head .tk-in__label { left: 57px; } .tk__who-ic--head { background: none; padding: 0; overflow: hidden; } .tk__who-ic--head img { width: 100%; height: 100%; display: block; image-rendering: pixelated; border-radius: inherit; } @media (prefers-reduced-motion: reduce) { .tk-in__head { animation: none; } } /* ===== Как зайти на сервер (howtojoin.html) ===== */ .join { padding-bottom: 40px; } .join-hero { margin-bottom: 16px; } /* Переключатель изданий: подложка выезжает под выбранную кнопку. */ .j-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 24px; padding: 4px; border-radius: 18px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .07); } .j-switch::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 14px; border: 1px solid rgb(255 122 0 / .5); background: rgb(255 106 19 / .1); transition: translate .32s cubic-bezier(.22, .61, .36, 1); } .j-switch[data-platform="bedrock"]::before { translate: calc(100% + 4px) 0; } .j-switch > button { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px; border-radius: 14px; text-align: left; color: var(--muted); transition: color .2s; } .j-switch > button[aria-selected="true"] { color: var(--ink); } .j-switch > button:focus-visible { outline: 2px solid #ff8a3d; outline-offset: -2px; } .j-switch__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / .05); color: var(--muted); transition: background .2s, color .2s; } .j-switch > button[aria-selected="true"] .j-switch__ic { background: #ff6a13; color: #fff; } .j-switch__t { display: grid; gap: 2px; min-width: 0; } .j-switch__t b { font-size: 15px; font-weight: 800; } .j-switch__t small { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Карточка со шагами, вопросами и помощью. */ .join-card { padding: 10px 34px 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .j-steps { list-style: none; margin: 0; padding: 0; } .j-step { /* Скриншоты — не шире 440px (снимки Java примерно такого размера и есть), текст по центру относительно них: иначе на широком экране картинки раздуваются, а под текстом пустота. */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; padding: 24px 0; border-top: 1px solid rgb(255 255 255 / .06); } .j-step:first-child { border-top: 0; } .j-panel.is-in .j-step { animation: j-in .36s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i) * 70ms); } @keyframes j-in { from { opacity: 0; translate: 0 8px; } } .j-badge { display: inline-flex; padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; color: #ff9a4d; background: rgb(255 106 19 / .1); border: 1px solid rgb(255 122 0 / .35); } .j-step h2 { margin-top: 12px; font: 800 22px/1.2 var(--display); letter-spacing: -.01em; } .j-step__copy > p { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.65; color: #b9b9c4; } .j-step__copy b { color: var(--ink); font-weight: 700; } .j-step__copy > .j-step__after { margin-top: 14px; font-size: 14px; } /* IP с кнопкой копирования (Java). */ .j-ip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid rgb(255 122 0 / .22); } .j-ip__field { flex: 1 1 0; min-width: 150px; display: grid; gap: 4px; } .j-ip__field span { font-size: 12px; font-weight: 600; color: var(--muted); } .j-ip__field input { width: 100%; padding: 0; border: 0; background: none; color: #fff; font: 800 20px/1.4 var(--display); letter-spacing: -.01em; } .j-ip__field input:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 4px; border-radius: 4px; } .j-ip__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 800; transition: filter .18s; } .j-ip__btn:hover { filter: brightness(1.08); } .j-ip__btn:active { filter: brightness(.95); } .j-ip__btn.is-done { background: var(--green); } /* Адрес и порт (Bedrock). */ .j-conn { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid rgb(255 122 0 / .22); } .j-conn__row { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label copy" "value copy"; align-items: center; column-gap: 10px; } .j-conn__label { grid-area: label; font-size: 12px; font-weight: 600; color: var(--muted); } .j-conn__value { grid-area: value; font: 800 18px/1.4 var(--display); color: #fff; overflow-wrap: anywhere; } .j-conn__copy { grid-area: copy; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); color: var(--muted); transition: background .18s, color .18s, border-color .18s; } .j-conn__copy:hover { background: rgb(255 255 255 / .08); color: var(--ink); } .j-conn__copy.is-done { color: var(--green); border-color: rgb(70 214 122 / .35); } .j-ip__btn:focus-visible, .j-conn__copy:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; } /* Скриншоты. Мелкие снимки Java увеличены по пикселям, чтобы шрифт игры не мылился. */ .j-fig { margin: 0; min-width: 0; } .j-shot { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgb(255 255 255 / .08); background: #0d0f0b; } .j-shot--frame { display: grid; gap: 12px; padding: 14px; } .j-shot--frame img { display: block; width: 100%; height: auto; } .j-px { image-rendering: pixelated; } .j-fig__note { margin: 12px 0; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--muted); } /* Кнопка «Подключиться»: неактивная, потом активная, по кругу. Снимки одного размера и совпадают по пикселям, поэтому верхний просто лежит поверх нижнего. */ .j-swap { position: relative; padding: 0; overflow: hidden; } .j-swap img { display: block; width: 100%; height: auto; } .j-swap__on { position: absolute; inset: 0; animation: j-swap 3.2s ease-in-out infinite; } @keyframes j-swap { 0%, 35% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } } .j-aside { display: grid; gap: 14px; } .j-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .j-path li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .j-path li .ic { width: 14px; height: 14px; opacity: .6; } .j-path span { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #c9c9d2; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); } .j-path li:last-child span { color: #fff; background: rgb(255 106 19 / .1); border-color: rgb(255 122 0 / .45); } .j-caption { padding-top: 4px; font-size: 12.5px; font-weight: 600; color: #6c6c78; } /* Частые проблемы: аккордеон. */ .j-faq { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .08); } .j-faq h2, .j-help h2 { font: 800 22px/1.2 var(--display); letter-spacing: -.01em; } .j-faq__list { display: grid; gap: 8px; margin-top: 14px; } .j-faq__item { border-radius: 16px; background: rgb(255 255 255 / .025); border: 1px solid rgb(255 255 255 / .07); transition: border-color .18s; } .j-faq__item:hover, .j-faq__item.is-open { border-color: rgb(255 122 0 / .35); } .j-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 15px 16px; text-align: left; font-size: 15px; font-weight: 700; color: var(--ink); } .j-faq__q .ic { flex: none; color: var(--muted); rotate: 90deg; transition: rotate .28s, color .28s; } .j-faq__item.is-open .j-faq__q .ic { rotate: -90deg; color: #ff8a3d; } .j-faq__q:focus-visible { outline: 2px solid #ff8a3d; outline-offset: -3px; border-radius: 16px; } .j-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.22, .61, .36, 1); } .j-faq__item.is-open .j-faq__a { grid-template-rows: 1fr; } .j-faq__a > div { min-height: 0; overflow: hidden; } .j-faq__a p { padding: 0 16px 16px; font-size: 14px; font-weight: 600; line-height: 1.65; color: #b9b9c4; opacity: 0; transition: opacity .22s; } .j-faq__item.is-open .j-faq__a p { opacity: 1; transition-delay: 60ms; } .j-faq__a b { color: var(--ink); } .j-faq__a a { color: #ff9a4d; font-weight: 700; } .j-help { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .08); } .j-help > div { flex: 1 1 0; min-width: 230px; } .j-help p { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--muted); } .j-help__go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #ff9a4d; transition: color .18s, gap .18s; } .j-help__go:hover { color: #ffb47a; gap: 11px; } @media (max-width: 900px) { .j-step { grid-template-columns: 1fr; gap: 18px; padding: 22px 0; } .j-step > .j-fig, .j-step > .j-aside { max-width: 440px; } } @media (max-width: 720px) { .join-card { padding: 4px 18px 24px; } .j-switch > button { gap: 10px; padding: 10px 12px; } .j-switch__t small { white-space: normal; } .j-ip__field input { font-size: 18px; } } @media (max-width: 480px) { .j-switch__ic { display: none; } } @media (prefers-reduced-motion: reduce) { .j-switch::before, .j-faq__a, .j-faq__a p, .j-faq__q .ic { transition: none; } .j-panel.is-in .j-step { animation: none; } .j-swap__on { animation: none; opacity: 1; } } /* ===== Личный кабинет (cabinet.html) ===== */ /* Кнопка в шапке — видна и на телефоне, где меню скрыто. */ .lk-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-left: 6px; padding: 9px 22px; min-width: 128px; border-radius: 12px; font-size: 14px; font-weight: 800; color: #fff; background: rgb(255 106 19 / .14); border: 1px solid rgb(255 122 0 / .4); transition: background .18s, border-color .18s; } .lk-link .ic { width: 16px; height: 16px; color: #ff9a4d; } .lk-link:hover, .lk-link.on { background: rgb(255 106 19 / .24); border-color: rgb(255 122 0 / .7); } /* Вошёл: просто голова и ник, без рамки и подложки (лёгкая подсветка только при наведении). */ .lk-link.is-user, .lk-link.is-user.on { margin-left: 22px; padding: 5px 10px 5px 5px; gap: 9px; min-width: 0; border-color: transparent; background: transparent; } .lk-link.is-user:hover { border-color: transparent; background: rgb(255 255 255 / .06); } .lk-link.is-user .lk-link__head { box-shadow: none; } .lk-link__you { margin-right: 2px; font-size: 13px; font-weight: 600; color: rgb(255 255 255 / .42); } /* Ник — шрифтом интерфейса (Manrope), как пункты меню рядом. */ .lk-link.is-user span { font: 800 15px/1 var(--ui); letter-spacing: .01em; translate: 0 4.5px; } .lk-link__head { width: 26px; height: 26px; border-radius: 7px; image-rendering: pixelated; background: #1b1b20; box-shadow: 0 0 0 1px rgb(255 255 255 / .1); } @media (max-width: 720px) { .lk-link, .lk-link.is-user { margin-left: auto; } } /* Средние экраны: в шапке уже тесно — оставляем только значок. */ @media (min-width: 721px) and (max-width: 1180px) { .lk-link { padding: 9px 14px; min-width: 0; } .lk-link.is-user { padding: 5px; } .lk-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } [data-rarity="common"] { --r: #a7adba; --r-soft: rgb(167 173 186 / .14); } [data-rarity="rare"] { --r: #4aa8ff; --r-soft: rgb(74 168 255 / .16); } [data-rarity="epic"] { --r: #b475ff; --r-soft: rgb(180 117 255 / .18); } [data-rarity="legendary"] { --r: #ffb52e; --r-soft: rgb(255 181 46 / .18); } .lk { padding-bottom: 40px; } .lk-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; } .lk-user { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 18px; background: rgb(0 0 0 / .25); border: 1px solid rgb(255 255 255 / .08); } .lk-user[hidden] { display: none; } .lk-user__head { width: 44px; height: 44px; border-radius: 12px; image-rendering: pixelated; background: #1b1b20; } .lk-user__t { display: grid; gap: 1px; padding-right: 6px; translate: 0 3px; } /* буквы сидят высоко — опускаем к центру головы */ .lk-user__t b { font: 800 17px/1.2 var(--ui); } .lk-user__t small { font-size: 12px; font-weight: 600; color: var(--muted); } .lk-user__out { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--muted); background: rgb(255 255 255 / .05); transition: background .18s, color .18s; } .lk-user__out:hover { background: rgb(255 255 255 / .1); color: #fff; } .lk-loading { display: grid; place-items: center; padding: 60px 0; } .lk-loading[hidden] { display: none; } .lk-loading span { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .12); border-top-color: #ff6a13; animation: lk-spin .8s linear infinite; } @keyframes lk-spin { to { rotate: 360deg; } } .lk-card { padding: 30px 34px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .lk-card[hidden], [data-lk-app][hidden] { display: none; } .lk-card h2 { font: 800 22px/1.2 var(--display); letter-spacing: -.01em; } /* ---- вход ---- */ .lk-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: center; } .lk-login__how > p { margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.6; color: #b9b9c4; } .lk-steps { list-style: none; counter-reset: s; display: grid; gap: 10px; margin: 20px 0 0; padding: 0; } .lk-steps li { counter-increment: s; position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 54px; border-radius: 14px; background: rgb(255 255 255 / .025); border: 1px solid rgb(255 255 255 / .06); } .lk-steps li::before { content: counter(s); position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font: 800 14px var(--display); color: #ff9a4d; background: rgb(255 106 19 / .12); } .lk-steps b { font-size: 15px; font-weight: 800; } .lk-steps span { font-size: 13.5px; font-weight: 600; color: var(--muted); } .lk-login__box { display: grid; gap: 16px; padding: 24px; border-radius: 20px; text-align: center; background: radial-gradient(300px 160px at 50% 0%, rgb(255 106 19 / .12), transparent 70%), var(--bg-2); border: 1px solid rgb(255 122 0 / .22); } .lk-code { display: grid; gap: 12px; justify-items: center; } .lk-code[hidden] { display: none; } .lk-code__hint, .lk-code__label { font-size: 13px; font-weight: 700; color: var(--muted); } .lk-btn-main { min-height: 50px; padding: 0 28px; border-radius: 14px; background: #ff6a13; color: #fff; font-size: 15px; font-weight: 800; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); transition: background .2s, transform .12s; } .lk-btn-main:hover { background: #ff7b2c; } .lk-btn-main:active { transform: translateY(1px); } .lk-btn-main:disabled { opacity: .6; cursor: default; } .lk-cmd { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 14px 18px; border-radius: 14px; background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .12); transition: border-color .18s; } .lk-cmd code { font: 800 clamp(18px, 2.4vw, 24px)/1.2 var(--display); letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; } .lk-cmd .ic { flex: none; width: 18px; height: 18px; color: var(--muted); } .lk-cmd:hover { border-color: rgb(255 122 0 / .5); } .lk-code__status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); } .lk-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff8a3d; animation: lk-pulse 1.4s ease-in-out infinite; } @keyframes lk-pulse { 50% { opacity: .3; scale: .7; } } .lk-code__warn { font-size: 12px; font-weight: 600; line-height: 1.55; color: #73737f; } /* ---- ежедневные карточки ---- */ .lk-daily__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 30px; } .lk-daily__head > div:first-child { flex: 1 1 340px; } .lk-daily__head p { margin-top: 8px; max-width: 60ch; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--muted); } .lk-timer { display: grid; gap: 4px; min-width: 200px; padding: 12px 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid rgb(255 255 255 / .08); } .lk-timer small { font-size: 12px; font-weight: 700; color: var(--muted); } .lk-timer b { font: 800 26px/1 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #7ee2a0; } .lk-timer.is-urgent { border-color: rgb(255 122 0 / .4); } .lk-timer.is-urgent b { color: #ffa060; } /* Дорожка 7 дней: пройденные — галочка, сегодняшний — подсвечен, точка — лучший приз дня. */ .lk-track { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; } .lk-step { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 14px; border-radius: 14px; background: rgb(255 255 255 / .025); border: 1px solid rgb(255 255 255 / .06); color: var(--muted); } .lk-step__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 15px var(--display); background: rgb(255 255 255 / .05); } .lk-step__n .ic { width: 16px; height: 16px; } .lk-step__t { font-size: 12px; font-weight: 700; } .lk-step i { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--r); box-shadow: 0 0 8px var(--r); } .lk-step.is-done { color: #cfd2da; } .lk-step.is-done .lk-step__n { background: rgb(70 214 122 / .16); color: var(--green); } .lk-step.is-now { color: #fff; background: rgb(255 106 19 / .1); border-color: rgb(255 122 0 / .55); } .lk-step.is-now .lk-step__n { background: #ff6a13; color: #fff; } .lk-note { margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #ffb27a; background: rgb(255 106 19 / .08); border: 1px solid rgb(255 122 0 / .25); } .lk-note[hidden] { display: none; } .lk-board { margin-top: 26px; } .lk-board__title { font-size: 15px; font-weight: 800; } .lk-board__title span { color: #ff9a4d; } .lk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 14px; perspective: 1200px; } /* Карточка: две стороны в 3D, переворот по Y. */ .lk-c { position: relative; aspect-ratio: 3 / 4; padding: 0; border-radius: 16px; transition: translate .22s, filter .3s, opacity .3s; } .lk-c__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); } .lk-c.is-flipped .lk-c__in { transform: rotateY(180deg); } .lk-c__back, .lk-c__face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } .lk-c__back { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgb(255 106 19 / .22), transparent 60%), repeating-linear-gradient(45deg, rgb(255 122 0 / .07) 0 2px, transparent 2px 12px), repeating-linear-gradient(-45deg, rgb(255 122 0 / .07) 0 2px, transparent 2px 12px), linear-gradient(160deg, #1d1712, #120f0d); border: 1px solid rgb(255 122 0 / .35); box-shadow: inset 0 0 0 5px rgb(0 0 0 / .25), inset 0 0 0 6px rgb(255 122 0 / .18); } .lk-c__back img { width: 48%; aspect-ratio: 1; border-radius: 14px; box-shadow: 0 8px 20px rgb(0 0 0 / .5); } .lk-c__face { transform: rotateY(180deg); display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 4px; padding: 14px 10px 12px; text-align: center; background: linear-gradient(180deg, var(--r-soft), transparent 70%), #141418; border: 1px solid var(--r); } .lk-face__art { display: grid; place-items: center; width: 100%; min-height: 0; } .lk-face__art img { max-width: 78%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .5)); } .lk-face__art .ic { width: 40%; height: auto; color: var(--r); } .lk-face__t { font-size: 13px; font-weight: 800; line-height: 1.25; color: #fff; } .lk-face__r { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--r); } .lk-grid:not(.is-open):not(.is-busy) .lk-c:hover { translate: 0 -6px; filter: drop-shadow(0 10px 18px rgb(255 106 19 / .25)); } .lk-grid:not(.is-open) .lk-c:focus-visible { outline: 2px solid #ffa060; outline-offset: 3px; } .lk-grid.is-busy .lk-c:not(.is-pick) { opacity: .55; } .lk-c.is-waiting { animation: lk-shake .5s ease-in-out infinite; } @keyframes lk-shake { 25% { rotate: -2deg; } 75% { rotate: 2deg; } } .lk-grid.is-open .lk-c { cursor: default; } .lk-c.is-other { opacity: .5; filter: saturate(.6); } .lk-c.is-pick.is-flipped { z-index: 1; translate: 0 -4px; filter: drop-shadow(0 0 22px var(--r)); } .lk-board__result { display: grid; gap: 4px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-size: 15px; font-weight: 700; background: var(--bg-2); border: 1px solid rgb(255 255 255 / .08); } .lk-board__result[hidden] { display: none; } .lk-board__result b { color: var(--r); } .lk-board__result small { font-size: 13px; font-weight: 600; color: var(--muted); } .lk-board__result.is-done { border-color: rgb(70 214 122 / .35); } .lk-pool { margin-top: 18px; border-radius: 14px; background: rgb(255 255 255 / .02); border: 1px solid rgb(255 255 255 / .07); } .lk-pool[hidden] { display: none; } .lk-pool summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; } .lk-pool summary::-webkit-details-marker { display: none; } .lk-pool summary .ic { rotate: 90deg; color: var(--muted); transition: rotate .25s; } .lk-pool.is-open summary .ic { rotate: -90deg; } .lk-pool ul { overflow: hidden; } .lk-pool ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0 12px 12px; } .lk-pool li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--r-soft); border: 1px solid rgb(255 255 255 / .05); } .lk-pool__art { display: grid; place-items: center; flex: none; width: 34px; height: 34px; } .lk-pool__art img { max-width: 100%; max-height: 100%; } .lk-pool__t { flex: 1; display: grid; font-size: 14px; font-weight: 700; } .lk-pool__t small { font-size: 11.5px; font-weight: 800; color: var(--r); } .lk-pool li b { font: 800 14px var(--display); color: #fff; } /* ---- призы и покупки ---- */ .lk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .lk-list ul { list-style: none; display: grid; gap: 6px; margin: 14px 0 0; padding: 0; } .lk-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .025); border: 1px solid rgb(255 255 255 / .05); } .lk-li__t { font-size: 14px; font-weight: 700; } .lk-li__t[data-rarity] { color: var(--r); } .lk-li__m { grid-row: 2; font-size: 12px; font-weight: 600; color: var(--muted); } .lk-li__s { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 12px; font-weight: 700; color: var(--muted); } .lk-li__s.is-done { color: var(--green); } .lk-li__s.is-hold, .lk-li__s.is-failed { color: #ff8a6b; } .lk-empty { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--muted); } .lk-empty[hidden] { display: none; } .lk-empty a { color: #ff9a4d; font-weight: 700; } @media (max-width: 900px) { .lk-login { grid-template-columns: 1fr; gap: 24px; } .lk-cols { grid-template-columns: 1fr; } } @media (max-width: 720px) { .lk-card { padding: 22px 18px; } .lk-track { grid-template-columns: repeat(7, minmax(36px, 1fr)); gap: 5px; } .lk-step { padding: 9px 2px 10px; } .lk-step__n { width: 28px; height: 28px; font-size: 13px; } .lk-step__t { font-size: 10.5px; } .lk-step i { top: 5px; right: 5px; } .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lk-timer { width: 100%; } } @media (prefers-reduced-motion: reduce) { .lk-c__in, .lk-c, .lk-pool summary .ic { transition: none; } .lk-c.is-waiting, .lk-dot, .lk-loading span { animation: none; } } @media (max-width: 480px) { .lk-step__t { display: none; } .lk-step { gap: 0; } } /* ---- доп. карточки за деньги ---- */ /* Цена на рубашке закрытой карточки (после бесплатной). */ .lk-c__back em { position: absolute; left: 50%; bottom: 10%; translate: -50% 0; padding: 4px 10px; border-radius: 99px; font: 800 12.5px/1.2 var(--ui); font-style: normal; color: #fff; white-space: nowrap; background: rgb(0 0 0 / .55); border: 1px solid rgb(255 122 0 / .45); } .lk-c.is-buy .lk-c__back { filter: saturate(.75) brightness(.85); transition: filter .2s; } .lk-grid.is-open .lk-c.is-buy { cursor: pointer; } .lk-grid.is-open .lk-c.is-buy:hover { translate: 0 -5px; } .lk-grid.is-open .lk-c.is-buy:hover .lk-c__back { filter: none; } .lk-grid.is-open .lk-c.is-buy:focus-visible { outline: 2px solid #ffa060; outline-offset: 3px; } .lk-c.is-wait .lk-c__back { filter: brightness(.7); } .lk-c.is-wait .lk-c__back em { border-color: rgb(255 255 255 / .2); animation: lk-pulse 1.4s ease-in-out infinite; } .lk-c.is-paid .lk-face__r::after { content: " · доп."; color: var(--muted); } /* Призы за сегодня. */ .lk-res__h { font-size: 13px; font-weight: 700; color: var(--muted); } .lk-res__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .lk-res__row b { color: var(--r); } .lk-res__row i { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; color: #ffb27a; background: rgb(255 106 19 / .12); } .lk-res__row small { font-size: 13px; font-weight: 600; color: var(--muted); } .lk-board__result .lk-res__note { font-size: 13px; font-weight: 600; color: var(--muted); } /* Окно покупки. */ .lk-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgb(4 4 6 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; } .lk-modal[hidden] { display: none; } .lk-modal.is-open { opacity: 1; } .lk-modal__box { position: relative; display: grid; justify-items: center; gap: 10px; width: min(380px, 100%); padding: 26px 24px 22px; text-align: center; border-radius: 22px; background: linear-gradient(160deg, rgb(255 255 255 / .06), transparent 60%), #141418; border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .7); translate: 0 10px; transition: translate .25s cubic-bezier(.2, .8, .25, 1); } .lk-modal.is-open .lk-modal__box { translate: 0 0; } .lk-modal__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); background: rgb(255 255 255 / .06); } .lk-modal__x:hover { color: #fff; background: rgb(255 255 255 / .12); } .lk-modal__card { display: grid; place-items: center; width: 74px; aspect-ratio: 3 / 4; border-radius: 12px; margin-bottom: 4px; background: repeating-linear-gradient(45deg, rgb(255 122 0 / .08) 0 2px, transparent 2px 10px), linear-gradient(160deg, #1d1712, #120f0d); border: 1px solid rgb(255 122 0 / .4); } .lk-modal__card img { width: 56%; border-radius: 8px; } .lk-modal__box h3 { font: 800 19px/1.2 var(--display); } .lk-modal__price { font: 900 34px/1 var(--display); color: #fff; } .lk-modal__price b { color: #ff9a4d; } .lk-modal__note { font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--muted); } .lk-modal__fld { display: grid; gap: 6px; width: 100%; margin-top: 6px; text-align: left; } .lk-modal__fld span { font-size: 12.5px; font-weight: 700; color: var(--muted); } .lk-modal__fld input { height: 46px; padding: 0 14px; border-radius: 12px; font: 600 15px var(--ui); color: #fff; background: rgb(0 0 0 / .3); border: 1px solid rgb(255 255 255 / .12); outline: none; transition: border-color .18s; } .lk-modal__fld input:focus { border-color: rgb(255 122 0 / .6); } .lk-modal__err { width: 100%; font-size: 13px; font-weight: 700; color: #ff8a6b; text-align: left; } .lk-modal__err[hidden] { display: none; } .lk-modal .lk-btn-main { width: 100%; margin-top: 6px; } @media (prefers-reduced-motion: reduce) { .lk-modal, .lk-modal__box { transition: none; } .lk-c.is-wait .lk-c__back em { animation: none; } } /* ---- открытие оплаченной карточки (экран поверх всего) ---- */ html.lk-locked, html.lk-locked body { overflow: hidden; } .lk-reveal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: radial-gradient(600px 420px at 50% 45%, rgb(255 106 19 / .14), transparent 70%), rgb(4 4 6 / .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; touch-action: none; } .lk-reveal[hidden] { display: none; } .lk-reveal.is-open { opacity: 1; } .lk-reveal__stage { display: grid; justify-items: center; gap: 22px; text-align: center; } .lk-reveal__card { width: min(240px, 58vw); aspect-ratio: 3 / 4; perspective: 1400px; animation: lk-float 2.4s ease-in-out infinite; } .lk-reveal__card.is-flipped { animation: none; } @keyframes lk-float { 50% { translate: 0 -8px; } } .lk-reveal__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, 1.25, .45, 1); } .lk-reveal__card.is-flipped .lk-reveal__in { transform: rotateY(180deg) scale(1.06); } .lk-reveal__back, .lk-reveal__face { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .lk-reveal__back { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgb(255 106 19 / .25), transparent 62%), repeating-linear-gradient(45deg, rgb(255 122 0 / .08) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgb(255 122 0 / .08) 0 2px, transparent 2px 14px), linear-gradient(160deg, #1d1712, #120f0d); border: 1px solid rgb(255 122 0 / .45); box-shadow: inset 0 0 0 7px rgb(0 0 0 / .25), inset 0 0 0 8px rgb(255 122 0 / .2), 0 30px 60px -20px rgb(0 0 0 / .8); } .lk-reveal__back img { width: 48%; border-radius: 16px; box-shadow: 0 10px 24px rgb(0 0 0 / .5); } .lk-reveal__card:not(.is-flipped) .lk-reveal__back { animation: lk-glow 1.6s ease-in-out infinite; } @keyframes lk-glow { 50% { box-shadow: inset 0 0 0 7px rgb(0 0 0 / .25), inset 0 0 0 8px rgb(255 122 0 / .45), 0 0 40px rgb(255 106 19 / .35); } } .lk-reveal__face { transform: rotateY(180deg); display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 6px; padding: 22px 16px 18px; background: linear-gradient(180deg, var(--r-soft), transparent 70%), #141418; border: 1px solid var(--r); } .lk-reveal__card.is-flipped .lk-reveal__face { box-shadow: 0 0 60px var(--r); } .lk-reveal__face .lk-face__t { font-size: 17px; } .lk-reveal__face .lk-face__r { font-size: 12px; } .lk-reveal__text { display: grid; gap: 6px; min-height: 48px; font-size: 17px; font-weight: 700; color: #fff; } .lk-reveal__text b { color: var(--r); } .lk-reveal__text small { font-size: 13px; font-weight: 600; color: var(--muted); } .lk-reveal__go { min-width: 200px; animation: lk-pop .35s cubic-bezier(.3, 1.4, .5, 1); } .lk-reveal__go[hidden] { display: none; } @keyframes lk-pop { from { opacity: 0; scale: .9; } } @media (prefers-reduced-motion: reduce) { .lk-reveal, .lk-reveal__in { transition: none; } .lk-reveal__card, .lk-reveal__back, .lk-reveal__go { animation: none !important; } } /* ---- защита от твинков: карточка пока недоступна ---- */ .lk-gate { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgb(255 106 19 / .07); border: 1px solid rgb(255 122 0 / .28); } .lk-gate[hidden] { display: none; } .lk-gate__t { display: grid; gap: 3px; } .lk-gate__t b { font-size: 15px; font-weight: 800; color: #fff; } .lk-gate__t span { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--muted); } .lk-gate__bar { height: 8px; border-radius: 99px; background: rgb(255 255 255 / .07); overflow: hidden; } .lk-gate__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff9a2e, #ff5c00); transition: width .6s cubic-bezier(.22, .61, .36, 1); } .lk-grid.is-locked .lk-c { cursor: not-allowed; filter: grayscale(.6) brightness(.7); } .lk-grid.is-locked .lk-c:hover { translate: none !important; filter: grayscale(.6) brightness(.7) !important; } /* ---- Страница /code: код покупки (восстановление аккаунта) ---- */ .rc { padding-bottom: 64px; } .rc-list { display: grid; gap: 14px; max-width: 640px; margin-top: 8px; } .rc-card { display: grid; gap: 12px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 15px; font-weight: 600; line-height: 1.55; } .rc-card a:not(.btn) { color: var(--acc); } .rc-card.is-ready { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); } .rc-what { font-size: 14px; color: var(--muted); } .rc-what b { color: var(--ink); } .rc-muted { color: var(--muted); font-size: 14px; } .rc-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .rc-code code { padding: 12px 18px; border-radius: 14px; background: var(--bg-2); border: 1px dashed var(--line); font: 800 clamp(22px, 5vw, 30px)/1 var(--display); letter-spacing: .06em; color: var(--ink); user-select: all; } .rc-copy, .rc-tg { display: inline-flex; align-items: center; gap: 8px; justify-self: start; } @media (max-width: 520px) { .rc-card { padding: 18px; } } .rc-copy { padding: 12px 18px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); } .rc-copy:hover { border-color: var(--muted); } /* ================= WIN-Топ (/wintop) ================= */ .wt { padding-bottom: 0; } /* отступ до подвала даёт .foot */ .wt-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 28px; align-items: center; margin: 18px 0 26px; padding: 34px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); background: radial-gradient(520px 320px at 88% 10%, rgb(255 196 61 / .14), transparent 70%), radial-gradient(520px 280px at 0% 100%, rgb(255 92 0 / .10), transparent 70%), linear-gradient(180deg, #17171b, #121215); } .wt-hero h1 { margin-top: 16px; font: 900 clamp(40px, 5.6vw, 72px)/.95 var(--display); letter-spacing: -.02em; } .wt-hero h1 span { color: var(--acc); } .wt-hero__copy > p { margin-top: 14px; max-width: 54ch; font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--muted); } .wt-hero code { padding: 2px 7px; border-radius: 7px; background: rgb(255 255 255 / .06); color: var(--ink); font-size: .92em; } .wt-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .wt-stat { min-width: 120px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgb(255 255 255 / .025); } .wt-stat small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); } .wt-stat b { display: block; margin-top: 4px; font: 800 20px/1.1 var(--display); } .wt-clock { padding: 22px 22px 18px; border-radius: 18px; border: 1px solid rgb(255 196 61 / .22); background: linear-gradient(160deg, rgb(255 196 61 / .08), rgb(255 255 255 / .02)); } .wt-clock > small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); } .wt-clock__t { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; } .wt-clock__t span { display: grid; justify-items: center; padding: 12px 4px 9px; border-radius: 12px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .05); } .wt-clock__t b { font: 800 clamp(24px, 3vw, 34px)/1 var(--display); font-variant-numeric: tabular-nums; } .wt-clock__t i { margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .wt-clock__bar { height: 6px; margin-top: 14px; border-radius: 99px; background: rgb(255 255 255 / .06); overflow: hidden; } .wt-clock__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffd25e, #ff7a00); transition: width .6s; } .wt-clock__end { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--muted); } /* ---- подиум ---- */ .wt-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; margin-bottom: 26px; } .wt-podium:empty { display: none; } .wt-p { --m: #e08a4f; --s: 92px; position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; padding: 26px 18px 22px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--m) 30%, var(--line)); background: radial-gradient(260px 200px at 50% 18%, color-mix(in srgb, var(--m) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--m) 7%, #17171b), #121215); box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / .05); animation: wt-rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms); } .wt-p--gold { --m: #ffc83d; --s: 116px; padding-top: 40px; padding-bottom: 30px; } .wt-p--silver { --m: #c9d3e6; } .wt-p__num { position: absolute; top: -18px; right: 10px; font: 900 150px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--m) 30%, transparent); pointer-events: none; } .wt-p__stage { position: relative; display: grid; justify-items: center; width: calc(var(--s) * 1.7); height: calc(var(--s) * 1.55); perspective: 700px; } .wt-p__head { position: relative; width: var(--s); height: var(--s); margin-top: calc(var(--s) * .14); animation: wt-float 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); } .wt-p__head::before { content: ""; position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--m) 38%, transparent), transparent); filter: blur(6px); } .wt-p__shadow { position: absolute; bottom: 2px; width: calc(var(--s) * .9); height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); animation: wt-shadow 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); } .wt-p__name { margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 clamp(16px, 1.8vw, 21px)/1.2 var(--ui); } .wt-p--gold .wt-p__name { font-size: clamp(18px, 2.1vw, 25px); } .wt-p__bal { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); } .wt-p__bal b { font: 800 16px/1 var(--display); color: color-mix(in srgb, var(--m) 70%, #fff); } .wt-prize { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 800; color: var(--ink); background: rgb(255 255 255 / .05); border: 1px solid color-mix(in srgb, var(--m, var(--acc)) 35%, var(--line)); } .wt-prize .ic { width: 14px; height: 14px; color: var(--m, var(--acc)); } .wt-prize--sm { margin: 0; padding: 4px 10px; font-size: 12px; white-space: nowrap; justify-self: end; } .wt-short { display: none; } .wt-flat { position: relative; width: 100%; height: 100%; border-radius: 10px; image-rendering: pixelated; box-shadow: 0 10px 24px rgb(0 0 0 / .45); } /* Объёмная голова: куб из шести граней скина + шапка (второй слой) чуть больше. */ .hc { --k: calc(var(--s) / 8); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: hc-turn 9s ease-in-out infinite; } .hc__base, .hc__hat { position: absolute; inset: 0; transform-style: preserve-3d; } .hc__hat { transform: scale(1.125); } .hc__f { position: absolute; inset: 0; background-image: var(--skin); background-size: calc(var(--k) * 64) auto; background-repeat: no-repeat; image-rendering: pixelated; backface-visibility: hidden; } .hc__f--front { transform: translateZ(calc(var(--s) / 2)); } .hc__f--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .hc__f--right { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.82); } .hc__f--left { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.82); } .hc__f--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(1.08); } .hc__f--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.6); } /* Наведение: плавный доворот и лёгкое увеличение поверх покачивания (без смены скорости анимации — от неё рывок). */ .wt-p__head { transform-style: preserve-3d; transition: rotate .9s cubic-bezier(.2, .7, .2, 1), scale .6s cubic-bezier(.2, .7, .2, 1); } .wt-p:hover .wt-p__head { rotate: y 32deg; scale: 1.07; } .wt-p:hover .wt-p__head:has(.wt-flat) { rotate: none; } /* плоскую запасную голову не поворачиваем — выглядит перекошенной */ .wt-p__head::before { transition: opacity .6s; opacity: .85; transform: translateZ(calc(var(--s) * -.9)); } /* свечение — позади головы, а не сквозь неё */ .wt-p:hover .wt-p__head::before { opacity: 1; } @keyframes hc-turn { 0%, 100% { transform: rotateX(-14deg) rotateY(-34deg); } 50% { transform: rotateX(-8deg) rotateY(34deg); } } @keyframes wt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes wt-shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .78; opacity: .6; } } @keyframes wt-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ---- рейтинг ---- */ .wt-board { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); } .wt-board__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .wt-board__head h2 { font: 800 22px/1.2 var(--display); } .wt-find { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); } .wt-find:focus-within { border-color: color-mix(in srgb, var(--acc) 55%, var(--line)); } .wt-find input { width: 170px; background: none; border: 0; outline: 0; color: var(--ink); font: 700 14px var(--ui); } .wt-list { display: grid; gap: 6px; list-style: none; } .wt-row { display: grid; grid-template-columns: 40px 32px minmax(0, 1fr) auto minmax(110px, 170px); align-items: center; gap: 14px; padding: 9px 14px; border-radius: 14px; background: rgb(255 255 255 / .02); border: 1px solid transparent; transition: background .18s, border-color .18s; } .wt-row:hover { background: rgb(255 255 255 / .045); border-color: var(--line); } .wt-row__place { font: 800 15px/1 var(--display); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; } .wt-row--gold .wt-row__place { color: #ffc83d; } .wt-row--silver .wt-row__place { color: #c9d3e6; } .wt-row--bronze .wt-row__place { color: #e08a4f; } .wt-row__head { width: 32px; height: 32px; border-radius: 7px; image-rendering: pixelated; background: var(--panel-2); } .wt-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 15px; } .wt-row__bal { display: grid; gap: 6px; justify-items: end; } .wt-row__bal b { font: 800 14px/1 var(--display); font-variant-numeric: tabular-nums; } .wt-row__bal i { justify-self: stretch; height: 4px; border-radius: 99px; background: linear-gradient(90deg, rgb(255 255 255 / .05) calc(100% - var(--w)), rgb(255 122 0 / .85) calc(100% - var(--w))); } .wt-empty { padding: 26px 8px; text-align: center; font-weight: 700; color: var(--muted); } .wt-upd { margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; } @media (max-width: 900px) { .wt-hero { grid-template-columns: 1fr; padding: 26px 22px; } } @media (max-width: 680px) { .wt-podium { gap: 8px; grid-template-columns: 1fr 1.12fr 1fr; } .wt-p { --s: 54px; padding: 18px 8px 16px; } .wt-p--gold { --s: 70px; padding-top: 24px; } .wt-p__num { font-size: 90px; top: -10px; right: 4px; } .wt-p__name, .wt-p--gold .wt-p__name { font-size: 14px; } .wt-p__bal { font-size: 11px; } .wt-p__bal b { font-size: 13px; } .wt-p .wt-prize { font-size: 11px; padding: 5px 8px; white-space: nowrap; } .wt-p .wt-prize .ic { display: none; } .wt-full, .wt-unit { display: none; } .wt-short { display: inline; } .wt-board { padding: 16px 12px; } .wt-row { grid-template-columns: 30px 28px minmax(0, 1fr) minmax(76px, 110px); gap: 10px; padding: 8px 10px; } .wt-row .wt-prize--sm { display: none; } .wt-row__head { width: 28px; height: 28px; } .wt-find input { width: 120px; } } @media (prefers-reduced-motion: reduce) { .hc, .wt-p__head, .wt-p__shadow, .wt-p { animation: none; } .hc { transform: rotateX(-12deg) rotateY(-28deg); } } /* Доплата в окне оформления: галочка «Доплата с КНЯЗЬ» и сколько экономит. */ .tk-up { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, rgb(70 214 122 / .10), rgb(70 214 122 / .03)); border: 1.5px solid rgb(70 214 122 / .38); animation: tk-up-in .35s cubic-bezier(.2, .8, .2, 1); transition: border-color .2s, background .2s, opacity .2s; } .tk-up[hidden] { display: none; } .tk-up input { position: absolute; opacity: 0; pointer-events: none; } .tk-up__box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--green); color: #06210f; transition: background .2s, box-shadow .2s; } .tk-up__box .ic { width: 14px; height: 14px; stroke-width: 3; transition: opacity .15s; } .tk-up__t { display: grid; gap: 3px; min-width: 0; } .tk-up__t b { font-size: 14px; font-weight: 800; } .tk-up__t small { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); } .tk-up__save { font-style: normal; font: 800 14px/1 var(--display); color: var(--green); white-space: nowrap; } .tk-up:has(input:not(:checked)) { background: rgb(255 255 255 / .02); border-color: var(--line); } .tk-up:has(input:not(:checked)) .tk-up__box { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); } .tk-up:has(input:not(:checked)) .tk-up__box .ic { opacity: 0; } .tk-up:has(input:not(:checked)) .tk-up__save { color: var(--muted); text-decoration: line-through; } .tk-up:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(70 214 122 / .25); } @keyframes tk-up-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tk-up { animation: none; } }