/* ============================================================ SHOP.CSS — СТИЛИ ОВЕРЛЕЯ МАГАЗИНА ПЕРЕРОЖДЕНИЙ Вынесено из styles.css. Подключается отдельным в index.html. Использует CSS-переменные (var(--clr-*)) из styles.css (:root). ВНИМАНИЕ: здесь НЕТ игровых .shop-card/.shop-column (улучшения боковых панелей) и НЕТ .shop-btn (кнопка входа) — они в styles.css. ============================================================ */ /* ============================================================ ПАЛИТРА МАГАЗИНА (по рекомендациям дизайна). Локальные токены, изолированы префиксом --shop-, общий :root в styles.css НЕ трогаем. Роли: фиолет — фон/глубина, циан — интерактив, янтарь — ценность/награды, розовый — акцент. Поверхности почти чёрные; фиолет уходит в рамки/подсветку. ============================================================ */ .shop-overlay { --shop-surface: #0e0a1c; /* поверхности карточек (смягчённо, не #0B0D18 в ноль) */ --shop-container: #131525; /* контейнер-экран */ --shop-depth: #291037; /* фон-глубина */ --shop-violet: #6a00ff; /* фиолет — только подсветка/рамки */ --shop-pink: #ff2ed1; /* розовый — эмоц. акцент */ --shop-cyan: #00e5ff; /* циан — интерактив */ --shop-amber: #ffc93a; /* янтарь — ценность/награды */ --shop-text: #f7f4ff; /* текст основной (не чисто белый) */ --shop-text-dim: #9ca3b8; /* текст второстепенный */ } /* ============================================================ ШАГ 1.4: ПУСТОЙ ОВЕРЛЕЙ МАГАЗИНА ПЕРЕРОЖДЕНИЙ Скрыт по умолчанию; показывается добавлением класса .active. Всё под префиксом .shop- для изоляции от основного экрана. Раскладка и содержимое слотов добавятся на следующих шагах. ============================================================ */ .shop-overlay { position: fixed; inset: 0; z-index: 1000; display: none; /* скрыт по умолчанию */ flex-direction: column; /* корона сверху, экран по центру, слоган снизу */ align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem; /* Фон магазина bg_shop.jpg (ретровейв-сетка с пальмами). Поверх картинки — затемняющая вуаль, чтобы карточки читались, но сама картинка оставалась видимой. Слои сверху вниз: 1) вертикальный градиент-вуаль (плотнее по краям), 2) сама картинка (cover, по центру). */ background: linear-gradient( to bottom, rgba(6, 3, 16, 0.25) 0%, rgba(6, 3, 16, 0.35) 30%, rgba(6, 3, 16, 0.30) 60%, rgba(6, 3, 16, 0.40) 100% ), url("bg_shop.jpg") center center / cover no-repeat, var(--clr-bg-deep); } .shop-overlay.active { display: flex; } /* показ */ .shop-screen { position: relative; width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 1.2rem; align-items: stretch; font-family: 'Tektur', monospace; /* Декор (идея со скрина): тонкая внешняя рамка-«экран» с мягким неоном */ padding: 1.5rem; /* Внешняя рамка магазина — циан (как на макете). Сплошная линия + неравномерное свечение даёт ощущение «разной яркости» по периметру, сохраняя скругление углов. */ border: 2px solid rgba(0, 229, 255, 0.85); border-radius: 16px; background: /* Подсветка 4 углов рамки — циан ярче, чем прямые участки */ radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.35), transparent 12%), radial-gradient(circle at 100% 0%, rgba(0, 229, 255, 0.35), transparent 12%), radial-gradient(circle at 0% 100%, rgba(0, 229, 255, 0.35), transparent 12%), radial-gradient(circle at 100% 100%, rgba(0, 229, 255, 0.35), transparent 12%), radial-gradient(120% 80% at 50% 0%, rgba(106, 0, 255, 0.10), transparent 60%), /* Тёплый «закат» снизу (п.7): мягкое янтарно-розовое свечение от нижней кромки */ radial-gradient(140% 70% at 50% 118%, rgba(255, 140, 60, 0.12), transparent 60%), radial-gradient(120% 80% at 50% 100%, rgba(0, 229, 255, 0.07), transparent 60%), rgba(6, 3, 16, 0.4); box-shadow: 0 0 38px -6px rgba(0, 229, 255, 0.5), 0 0 10px 0px rgba(0, 229, 255, 0.28), inset 0 0 60px -22px rgba(0, 229, 255, 0.4); } /* Эффект 5: HUD-засечки на рамке экрана. Короткие неоновые риски по центру верхней/нижней грани (::before) и середине боковых (::after). Чистый декор: pointer-events:none, не мешают раскладке. */ .shop-screen::before, .shop-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; } /* Верхняя и нижняя центральные засечки (вертикальные чёрточки) */ .shop-screen::before { background: linear-gradient(var(--clr-neon-purple), var(--clr-neon-purple)) no-repeat, linear-gradient(var(--clr-neon-purple), var(--clr-neon-purple)) no-repeat; background-position: top center, bottom center; background-size: 2px 12px, 2px 12px; filter: drop-shadow(0 0 4px var(--clr-neon-purple)); opacity: 0.85; } /* Левая и правая боковые засечки (горизонтальные чёрточки) */ .shop-screen::after { background: linear-gradient(var(--clr-neon-cyan), var(--clr-neon-cyan)) no-repeat, linear-gradient(var(--clr-neon-cyan), var(--clr-neon-cyan)) no-repeat; background-position: left center, right center; background-size: 12px 2px, 12px 2px; filter: drop-shadow(0 0 4px var(--clr-neon-cyan)); opacity: 0.85; } /* ============================================================ ШАГ 1.6: ВНУТРЕННЯЯ РАСКЛАДКА МАГАЗИНА Боковые колонки по 2 слота, центр со счётом и кнопкой НАЗАД, «?» с описанием. Слоты — пустые заглушки. Всё под .shop-. ============================================================ */ /* Боковая колонка: два слота друг над другом */ .shop-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.2rem; } /* Пустой слот товара (заглушка) */ .shop-slot { display: flex; align-items: center; justify-content: center; min-height: 260px; padding: 1.8rem; border: 1.5px solid var(--clr-neon-purple); border-radius: 10px; background: rgba(10, 5, 30, 0.6); box-shadow: inset 0 0 22px rgba(199, 36, 245, 0.06); opacity: 1; } .shop-slot__soon { font-size: 0.8rem; letter-spacing: 3px; color: var(--clr-text-secondary); } /* Центральная колонка */ .shop-center { display: flex; flex-direction: column; align-items: center; justify-content: space-between; /* ядра сверху, НАЗАД снизу */ gap: 1.5rem; padding-bottom: 0.5rem; /* небольшой отступ снизу для кнопки */ } .shop-cores { position: relative; /* база для декоративных уголков */ text-align: center; padding: 2rem 3.2rem; border: 1.5px solid var(--clr-neon-gold); border-radius: 14px; background: radial-gradient(120% 120% at 50% 0%, rgba(255, 179, 0, 0.15), transparent 65%), rgba(20, 12, 0, 0.5); box-shadow: 0 0 24px rgba(255, 179, 0, 0.4), inset 0 0 32px rgba(255, 179, 0, 0.15); } .shop-cores__label { font-size: 0.78rem; letter-spacing: 2.5px; /* Мелкий текст — приглушённая яркость (п.5, ~38%) */ color: rgba(247, 244, 255, 0.4); } /* Значение ядер — «один яркий объект» (п.7): награда, янтарь, максимум свечения во всём магазине. Намеренно ярче остальных элементов. */ .shop-cores__value { font-size: 5rem; font-weight: 900; color: var(--shop-text); text-shadow: 0 0 10px var(--shop-amber), 0 0 26px var(--shop-amber), 0 0 48px rgba(255, 201, 58, 0.6); line-height: 1.05; } /* Круглая кнопка НАЗАД */ .shop-back-btn { width: 220px; height: 220px; border-radius: 50%; border: 2px solid var(--clr-neon-cyan); background: rgba(0, 229, 255, 0.08); color: var(--clr-neon-cyan); font-family: 'Tektur', monospace; font-weight: 700; font-size: 1.5rem; letter-spacing: 2px; cursor: pointer; text-shadow: 0 0 8px var(--clr-neon-cyan); box-shadow: 0 0 16px rgba(0, 229, 255, 0.35), inset 0 0 24px rgba(0, 229, 255, 0.12); transition: transform var(--transition-fast), box-shadow var(--transition-mid); } .shop-back-btn:hover { transform: scale(1.05); box-shadow: 0 0 26px rgba(0, 229, 255, 0.6), inset 0 0 30px rgba(0, 229, 255, 0.2); } .shop-back-btn:active { transform: scale(0.95); } .shop-back-btn:focus-visible { outline: 2px solid var(--clr-neon-pink); outline-offset: 3px; } /* Кнопка «?» и сворачиваемое описание. Кнопка вынесена ЗА правый край рамки магазина (right: -56px), выровнена по нижнему краю экрана. */ .shop-help-btn { position: absolute; right: -56px; bottom: 0; width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid var(--clr-neon-cyan); background: rgba(0, 229, 255, 0.08); color: var(--clr-neon-cyan); font-family: 'Tektur', monospace; font-weight: 700; font-size: 1.2rem; cursor: pointer; text-shadow: 0 0 8px var(--clr-neon-cyan); } .shop-help-btn:focus-visible { outline: 2px solid var(--clr-neon-pink); outline-offset: 3px; } .shop-help-box { position: absolute; right: -56px; bottom: 50px; max-width: 260px; display: none; padding: 0.8rem 1rem; border: 1.5px solid var(--clr-neon-cyan); border-radius: 10px; background: var(--shop-container); /* Описательный текст — приглушённая яркость (п.5, ~55%) */ color: rgba(247, 244, 255, 0.6); font-size: 0.8rem; line-height: 1.45; box-shadow: 0 0 12px rgba(0, 229, 255, 0.22); } .shop-help-box.is-open { display: block; } /* Выделенные ПОНЯТИЯ в тексте справки (БУСТ, КАРТРИДЖ, УЛЬТРА, ЦВЕТ КНОПКИ). Каждый термин — в «товарном» цвете соответствующей карточки с лёгким неоновым свечением, чтобы выделяться из обычного текста. */ .shop-help__term { font-weight: 900; letter-spacing: 0.5px; padding: 0 0.15em; white-space: nowrap; } .shop-help__term--color { color: var(--clr-neon-pink); text-shadow: 0 0 6px rgba(255, 45, 120, 0.7); } .shop-help__term--boost { color: var(--clr-neon-gold); text-shadow: 0 0 6px rgba(255, 179, 0, 0.7); } .shop-help__term--cartridge { color: var(--clr-neon-cyan); text-shadow: 0 0 6px rgba(0, 229, 255, 0.7); } .shop-help__term--ultra { color: var(--clr-neon-purple); text-shadow: 0 0 6px rgba(199, 36, 245, 0.8); } /* Узкие экраны: колонки в два столбца, центр сверху во всю ширину */ @media (max-width: 680px) { .shop-screen { grid-template-columns: 1fr 1fr; gap: 0.7rem; } .shop-center { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: space-between; gap: 0.8rem; } .shop-back-btn { width: 84px; height: 84px; font-size: 0.95rem; } .shop-slot { min-height: 120px; } /* На узком экране за рамкой места нет — возвращаем «?» внутрь */ .shop-help-btn { right: 0; } .shop-help-box { right: 0; } } /* ============================================================ ШАГ 1.8: КАРТОЧКА КОСМЕТИКИ ЦВЕТА КНОПКИ (в слоте магазина) Активная карточка: циан-контур, полная яркость, колонка заголовок / образцы / цена. Образцы .shop-swatch — кружки. ============================================================ */ .shop-slot--card { position: relative; /* база для уголков, иконки */ flex-direction: column; align-items: stretch; /* содержимое во всю ширину карточки */ justify-content: flex-start; text-align: left; gap: 0.75rem; padding: 1.6rem 1.8rem; border-width: 2px; border-color: var(--clr-neon-cyan); /* Поверхность почти чёрная (surface). Лёгкий розовый отлив сильно приглушён — фиолет/розовый уходят в рамку и свечение (п.3). */ background: radial-gradient(160% 100% at 0% 0%, rgba(255, 46, 209, 0.07), transparent 55%), var(--shop-surface); box-shadow: 0 0 20px -3px rgba(0, 229, 255, 0.5), 0 0 7px 0px rgba(0, 229, 255, 0.3), inset 0 0 46px -10px rgba(0, 229, 255, 0.22); opacity: 1; /* перебивает приглушённость пустого слота */ /* overflow: hidden снят: слой дыхания ::before должен светить наружу за рамку. Клиппинг блика короны живёт на .shop-crown и не зависит от этого свойства. */ overflow: visible; /* Эффект 1: «дыхание» рамки — очень медленная, едва заметная пульсация свечения (доступная карточка дышит циан/розовым). Эффект 2: плавный подъём на ховер. transform/box-shadow выведены в transition. */ transform: translateY(0); transition: transform var(--transition-mid), box-shadow var(--transition-mid); /* Дыхание перенесено на слой ::before (opacity, GPU). Статичная тень карточки выше по коду совпадает с нижней точкой дыхания. */ } /* Ховер: лёгкий подъём + усиление свечения. Дыхание ставим на паузу, чтобы ховер-тень не конфликтовала с анимацией. */ .shop-slot--card:hover { transform: translateY(0); /* подъём убран: плашка не шевелится при наведении */ /* Усиленная тень ховера удалена намеренно: раньше она была мёртвой (анимация box-shadow перебивала hover-значение), реальное старое поведение при наведении = замирание дыхания. Его и воспроизводим. */ } .shop-slot--card:hover::before { animation-play-state: paused; } /* Двойная рамка: тонкий внутренний контур с отступом от внешней рамки (как на макете). Декор, клик не ловит. */ .shop-slot--card::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 8px; pointer-events: none; } /* У заблокированной карточки внутренний контур фиолетовый (в тон рамке) */ .shop-slot--card.is-locked::after { border-color: rgba(106, 0, 255, 0.32); } /* Заголовок карточки — розовый акцент (п.1), яркость ~90%, свечение мягкое 8–15px (п.5, п.6). */ .shop-card__title { font-weight: 900; letter-spacing: 1.5px; font-size: 1.1rem; padding-right: 2.4rem; /* место под иконку в углу */ color: #ff2d78; /* красный, как цена в заблокированной карточке */ text-shadow: 0 0 4px rgba(255, 45, 120, 0.7), 0 0 8px rgba(255, 45, 120, 0.35); } /* Цена — ценность/награда = янтарь (п.1). Свечение мягче (п.6). */ .shop-card__price { font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; color: var(--shop-amber); text-shadow: 0 0 6px rgba(255, 201, 58, 0.8), 0 0 12px rgba(255, 201, 58, 0.45); } .shop-card__price.is-owned { color: var(--shop-cyan); text-shadow: 0 0 6px rgba(0, 229, 255, 0.7); } /* Не куплено и ядер не хватает: карточка остаётся ЯРКОЙ и читаемой, но получает «холодный» приглушённо-фиолетовый акцент рамки — сигнал «пока недоступно», без потери контраста текста. opacity НЕ трогаем, чтобы текст и цена читались. */ .shop-slot--card.is-locked { border-color: var(--clr-neon-purple); background: radial-gradient(160% 100% at 0% 0%, rgba(106, 0, 255, 0.10), transparent 55%), var(--shop-surface); /* Статичная тень = нижняя точка старого фиолетового дыхания (при живой анимации видимым минимумом была именно она). */ box-shadow: 0 0 24px -4px rgba(199, 36, 245, 0.5), 0 0 8px 0px rgba(199, 36, 245, 0.28), inset 0 0 50px -8px rgba(199, 36, 245, 0.2); } /* Ховер заблокированной: лёгкий подъём + усиление фиолетового свечения */ .shop-slot--card.is-locked:hover { transform: translateY(0); /* подъём убран: плашка не шевелится при наведении */ /* См. комментарий у .shop-slot--card:hover: воспроизводим реальное старое поведение (замирание дыхания при наведении). */ } .shop-slot--card.is-locked:hover::before { animation-play-state: paused; } .shop-slot--card.is-locked .shop-swatch { cursor: not-allowed; } /* Цена в заблокированной карточке — горящая розово-красная: «нужно ещё ядер» */ .shop-slot--card.is-locked .shop-card__price { color: var(--clr-neon-pink); text-shadow: 0 0 6px var(--clr-neon-pink), 0 0 16px rgba(255, 45, 120, 0.8); } /* Шаг D.5: кнопка покупки буста ×5. Тёплая палитра (gold/orange) в тон панели индикатора буста. Состояние disabled — приглушённое и некликабельное (на D.5 кнопка ещё заглушка). Отдельный модификатор --boost, чтобы не конфликтовать с базовым .shop-card__btn. */ /* Кнопки картриджа и ультра прижаты к низу карточки (выравнивание по одной нижней линии). У буста за прижатие к низу отвечает reason (его margin-top:auto толкает связку reason+кнопку вниз). */ .shop-card__btn--cartridge, .shop-card__btn--ultra, .shop-card__btn--color { margin-top: auto; } /* Если у буста подпись reason скрыта — кнопка сама прижимается к низу */ .shop-boost-reason:not(.is-shown) + .shop-card__btn--boost { margin-top: auto; } .shop-card__btn--boost { font-family: var(--font-display); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-neon-gold); background: rgba(40, 25, 5, 0.85); border: 1px solid var(--clr-neon-gold); border-radius: 4px; padding: 0.65rem 0.9rem; cursor: pointer; text-shadow: 0 0 5px var(--clr-neon-gold); box-shadow: 0 0 10px rgba(255, 179, 0, 0.2); transition: box-shadow 0.15s linear, background 0.15s linear; } .shop-card__btn--boost:hover:not(:disabled) { background: rgba(60, 38, 8, 0.9); box-shadow: 0 0 16px rgba(255, 179, 0, 0.4); } .shop-card__btn--boost:disabled { cursor: not-allowed; color: rgba(255, 179, 0, 0.75); background: rgba(20, 12, 2, 0.9); border-color: rgba(255, 179, 0, 0.45); text-shadow: 0 0 4px rgba(255, 179, 0, 0.4); box-shadow: none; } /* Пояснение причины блокировки покупки буста ×5. По умолчанию скрыт: показывается из updateShopUI() только когда идёт какой-то буст (тогда задаётся текст и display:block через .is-shown). Один нейтральный неоновый стиль на все три причины (без цвет-модификаторов). */ .shop-boost-reason { display: none; margin-top: auto; /* прижимает связку reason+кнопка к низу */ margin-bottom: 0.35rem; /* небольшой зазор: подпись прямо над кнопкой */ text-align: center; /* по центру карточки */ font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.02em; color: var(--clr-neon-cyan); text-shadow: 0 0 6px var(--clr-neon-cyan); } .shop-boost-reason.is-shown { display: block; } /* ШАГ 3: кнопка покупки косметики «ЦВЕТ КНОПКИ». Золото-на-чёрном (тема плашки), отдельный модификатор --color, чтобы не конфликтовать с другими кнопками. Состояния: КУПИТЬ (активна) / disabled (нет выбора, мало ядер, или уже КУПЛЕНО). */ .shop-card__btn--color { font-family: var(--font-display); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-neon-gold); background: rgba(40, 25, 5, 0.85); border: 1px solid var(--clr-neon-gold); border-radius: 4px; padding: 0.65rem 0.9rem; cursor: pointer; text-shadow: 0 0 5px var(--clr-neon-gold); box-shadow: 0 0 10px rgba(255, 179, 0, 0.2); transition: box-shadow 0.15s linear, background 0.15s linear; } .shop-card__btn--color:hover:not(:disabled) { background: rgba(60, 38, 8, 0.9); box-shadow: 0 0 16px rgba(255, 179, 0, 0.4); } .shop-card__btn--color:disabled { cursor: not-allowed; color: rgba(255, 179, 0, 0.75); background: rgba(20, 12, 2, 0.9); border-color: rgba(255, 179, 0, 0.45); text-shadow: 0 0 4px rgba(255, 179, 0, 0.4); box-shadow: none; } /* Шаг E.3: кнопка покупки картриджа ×2. Циан-фиолетовая палитра (тема «картриджа данных»), отделяет от золотого буста. Отдельный модификатор --cartridge, чтобы не конфликтовать с базовым .shop-card__btn. Состояние disabled — приглушённое (на E.3 заглушка). */ .shop-card__btn--cartridge { font-family: var(--font-display); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-neon-cyan); background: rgba(5, 25, 40, 0.85); border: 1px solid var(--clr-neon-cyan); border-radius: 4px; padding: 0.65rem 0.9rem; cursor: pointer; text-shadow: 0 0 5px var(--clr-neon-cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); transition: box-shadow 0.15s linear, background 0.15s linear; } .shop-card__btn--cartridge:hover:not(:disabled) { background: rgba(8, 38, 60, 0.9); box-shadow: 0 0 16px rgba(0, 229, 255, 0.4); } .shop-card__btn--cartridge:disabled { cursor: not-allowed; color: rgba(0, 229, 255, 0.75); background: rgba(3, 14, 22, 0.9); border-color: rgba(0, 229, 255, 0.45); text-shadow: 0 0 4px rgba(0, 229, 255, 0.4); box-shadow: none; } /* Шаг F.4: кнопка УЛЬТРА перерождения. Фиолетово-розовая палитра (мета-престиж, отделяет от золотого буста и цианового картриджа). Отдельный модификатор --ultra, чтобы не конфликтовать с базовым .shop-card__btn. disabled — приглушённое (на F.4 заглушка). */ .shop-card__btn--ultra { font-family: var(--font-display); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-neon-purple); background: rgba(28, 5, 40, 0.85); border: 1px solid var(--clr-neon-purple); border-radius: 4px; padding: 0.65rem 0.9rem; cursor: pointer; text-shadow: 0 0 5px var(--clr-neon-purple); box-shadow: 0 0 10px rgba(199, 36, 245, 0.2); transition: box-shadow 0.15s linear, background 0.15s linear; } .shop-card__btn--ultra:hover:not(:disabled) { background: rgba(45, 8, 60, 0.9); box-shadow: 0 0 16px rgba(199, 36, 245, 0.45); } .shop-card__btn--ultra:disabled { cursor: not-allowed; color: rgba(255, 46, 209, 0.85); background: rgba(24, 4, 20, 0.9); border-color: rgba(255, 46, 209, 0.5); text-shadow: 0 0 4px rgba(255, 46, 209, 0.5); box-shadow: none; } /* Шаг F.4: счётчик уровня УЛЬТРА (0..4) в карточке. */ .shop-card__ultra-count { font-family: var(--font-display); font-size: 1rem; font-weight: 900; letter-spacing: 0.1em; color: var(--clr-neon-pink); text-shadow: 0 0 6px var(--clr-neon-pink); } /* Образцы цвета */ .shop-swatches { display: flex; gap: 0.9rem; } .shop-swatch { position: relative; /* база для вращающегося кольца ::before */ width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; /* Объём-сфера: блик сверху-слева (inset светлый), тень снизу-справа (inset тёмный) и мягкая падающая тень под кружком. */ box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.45), inset -3px -4px 6px rgba(0, 0, 0, 0.55), 0 3px 6px rgba(0, 0, 0, 0.5); transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .shop-swatch:hover { transform: scale(1.12); } .shop-swatch:focus-visible { outline: 2px solid var(--clr-neon-pink); outline-offset: 2px; } .shop-swatch.is-active { border-color: #fff; box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.5), inset -3px -4px 6px rgba(0, 0, 0, 0.55), 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 255, 255, 0.85); } /* Эффект 6: вращающееся кольцо-обводка у ВЫБРАННОГО свотча. Штриховой конический градиент медленно крутится вокруг кружка. */ .shop-swatch.is-active::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: conic-gradient( from 0deg, var(--clr-neon-cyan) 0deg 30deg, transparent 30deg 90deg, var(--clr-neon-pink) 90deg 120deg, transparent 120deg 180deg, var(--clr-neon-cyan) 180deg 210deg, transparent 210deg 270deg, var(--clr-neon-pink) 270deg 300deg, transparent 300deg 360deg ); /* вырезаем центр — остаётся только тонкое кольцо */ -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); animation: shop-swatch-spin 4s linear infinite; } .shop-swatch--default { background: radial-gradient(circle at 35% 35%, #3a1a7a, #1a0a50 60%, #0d0535); } .shop-swatch--black { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 9%, transparent 18%), radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0a0a0a 55%, #000 100%); } /* Чёрно-золотой свотч: золотая сфера + чёрная сужающаяся спираль-улитка (SVG-фон data-URL, толщина ленты от толстой в центре к тонкой к краю). */ .shop-swatch--blackgold { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2235%25%22%20cy%3D%2232%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fff0b8%22%2F%3E%3Cstop%20offset%3D%2252%25%22%20stop-color%3D%22%23e0a020%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%238a6010%22%2F%3E%3C%2FradialGradient%3E%3CclipPath%20id%3D%22c%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cpath%20d%3D%22M50.0%2050.0L50.2%2050.0L50.5%2050.1L50.7%2050.2L50.9%2050.4L51.1%2050.6L51.2%2050.9L51.3%2051.2L51.3%2051.5L51.3%2051.8L51.2%2052.2L51.1%2052.5L50.9%2052.9%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%226.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M50.9%2052.9L50.7%2053.2L50.4%2053.5L50.0%2053.8L49.6%2054.0L49.1%2054.2L48.6%2054.3L48.1%2054.3L47.5%2054.3L46.9%2054.2L46.3%2054.1L45.7%2053.8L45.1%2053.5L44.6%2053.1%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%226.1%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44.6%2053.1L44.1%2052.6L43.6%2052.1L43.2%2051.5L42.8%2050.8L42.5%2050.0L42.3%2049.2L42.2%2048.3L42.2%2047.5L42.2%2046.5L42.4%2045.6L42.7%2044.7L43.1%2043.8L43.6%2042.9%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%225.7%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M43.6%2042.9L44.3%2042.1L45.0%2041.3L45.8%2040.6L46.8%2040.0L47.8%2039.5L48.9%2039.1L50.0%2038.8L51.2%2038.6L52.4%2038.5L53.7%2038.6L55.0%2038.8L56.2%2039.2L57.5%2039.7%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%225.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M57.5%2039.7L58.7%2040.3L59.8%2041.1L60.9%2042.1L61.9%2043.1L62.8%2044.3L63.6%2045.6L64.2%2047.0L64.7%2048.5L65.0%2050.0L65.2%2051.6L65.2%2053.2L65.0%2054.9L64.6%2056.5%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%224.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M64.6%2056.5L64.1%2058.1L63.3%2059.7L62.4%2061.2L61.4%2062.6L60.1%2064.0L58.8%2065.2L57.2%2066.2L55.6%2067.1L53.8%2067.9L51.9%2068.4L50.0%2068.8L48.0%2068.9L46.0%2068.8%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M46.0%2068.8L44.0%2068.5L42.0%2068.0L40.0%2067.3L38.1%2066.4L36.3%2065.2L34.6%2063.9L33.0%2062.3L31.6%2060.6L30.4%2058.7L29.3%2056.7L28.5%2054.6L27.9%2052.3L27.5%2050.0%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%224.1%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M27.5%2050.0L27.4%2047.6L27.5%2045.2L27.9%2042.8L28.5%2040.4L29.4%2038.1L30.6%2035.9L32.0%2033.8L33.6%2031.8L35.5%2030.0L37.5%2028.3L39.7%2026.9L42.1%2025.7L44.6%2024.8%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M44.6%2024.8L47.3%2024.1L50.0%2023.8L52.8%2023.6L55.6%2023.8L58.3%2024.3L61.1%2025.1L63.8%2026.2L66.3%2027.5L68.7%2029.2L71.0%2031.1L73.1%2033.2L74.9%2035.6L76.5%2038.2%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M76.5%2038.2L77.8%2041.0L78.9%2043.9L79.6%2046.9L80.0%2050.0L80.1%2053.2L79.8%2056.3L79.2%2059.5L78.3%2062.6L77.1%2065.6L75.5%2068.5L73.6%2071.2L71.4%2073.8L69.0%2076.1%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M69.0%2076.1L66.2%2078.1L63.3%2079.9L60.2%2081.4L56.9%2082.5L53.5%2083.3L50.0%2083.8L46.4%2083.8L42.9%2083.5L39.3%2082.8L35.9%2081.7L32.5%2080.3L29.3%2078.5L26.2%2076.4%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M26.2%2076.4L23.4%2073.9L20.9%2071.2L18.6%2068.1L16.7%2064.8L15.0%2061.4L13.8%2057.7L13.0%2053.9L12.5%2050.0L12.5%2046.1L12.8%2042.1L13.6%2038.2L14.8%2034.3L16.4%2030.6%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%222.0%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16.4%2030.6L18.4%2027.1L20.8%2023.7L23.6%2020.6L26.6%2017.8L30.0%2015.4L33.6%2013.2L37.5%2011.5L41.5%2010.1L45.7%209.2L50.0%208.8L54.3%208.7L58.7%209.2L63.0%2010.1%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M63.0%2010.1L67.2%2011.4L71.3%2013.2L75.1%2015.4L78.8%2018.0L82.1%2021.1L85.2%2024.4L87.9%2028.1L90.2%2032.1L92.1%2036.3L93.5%2040.7L94.5%2045.3L95.0%2050.0%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2234%22%20cy%3D%2228%22%20rx%3D%2215%22%20ry%3D%2210%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.2%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat; } .shop-swatch--gold { background: radial-gradient(circle at 35% 35%, #fff0b8, #e0a020 52%, #8a6010); } /* ============================================================ РЕДИЗАЙН МАГАЗИНА (идеи оформления со скрина сына). ТОЛЬКО ВИЗУАЛ. Новые классы — декоративные, с aria-hidden в разметке: корона-заголовок, угловые скобки карточек, иконки, концентрические кольца вокруг кнопки НАЗАД, нижний слоган. Существующие id/классы и их логика не затронуты. ============================================================ */ /* Корона-заголовок: неоновая капсула с ★ по бокам (как ★★★ на скрине) */ .shop-crown { position: relative; /* база для бегущего блика ::after */ overflow: hidden; /* блик не выходит за капсулу */ display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 1.6rem; border: 1.5px solid var(--clr-neon-pink); border-radius: 12px; background: rgba(20, 4, 18, 0.6); font-family: 'Tektur', monospace; box-shadow: 0 0 18px -2px rgba(255, 45, 120, 0.5), inset 0 0 18px -10px var(--clr-neon-pink); } /* Эффект 3: бегущий диагональный блик по короне (глянец по стеклу). Тонкая светлая полоса проезжает слева направо раз в ~6s. */ .shop-crown::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; pointer-events: none; background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.18) 55%, transparent 100% ); transform: skewX(-18deg); animation: shop-crown-sheen 6s ease-in-out infinite; } /* Текст и звёзды короны — над бликом */ .shop-crown__text, .shop-crown__star { position: relative; z-index: 1; } .shop-crown__text { font-weight: 900; letter-spacing: 3px; font-size: 1.05rem; color: #fff; text-shadow: 0 0 10px var(--clr-neon-pink), 0 0 26px var(--clr-neon-pink); } .shop-crown__star { color: var(--clr-neon-pink); font-size: 0.9rem; text-shadow: 0 0 10px var(--clr-neon-pink); } /* Угловые скобки рамок (карточки и блок ядер). Чистый декор, не ловят клик. Крупнее и ярче, с мягким свечением по контуру (как на макете). */ .shop-corner { position: absolute; width: 12px; height: 12px; pointer-events: none; border: 1.5px solid var(--clr-neon-cyan); opacity: 1; filter: drop-shadow(0 0 3px var(--clr-neon-cyan)); } .shop-corner--tl { top: 7px; left: 7px; border-right: none; border-bottom: none; } .shop-corner--tr { top: 7px; right: 7px; border-left: none; border-bottom: none; } .shop-corner--bl { bottom: 7px; left: 7px; border-right: none; border-top: none; } .shop-corner--br { bottom: 7px; right: 7px; border-left: none; border-top: none; } /* В блоке ядер уголки золотые, под общий тон рамки */ .shop-cores .shop-corner { border-color: var(--clr-neon-gold); filter: drop-shadow(0 0 4px var(--clr-neon-gold)); } /* Иконка-кружок в правом верхнем углу карточки (как на скрине). Эффект 4: мягкий пульсирующий ореол в цвете товара (currentColor подхватывает цвет каждого модификатора автоматически). */ .shop-ico { position: absolute; top: 0.9rem; right: 0.9rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; pointer-events: none; border: 1.5px solid var(--clr-neon-pink); border-radius: 8px; color: var(--clr-neon-pink); background: rgba(255, 45, 120, 0.08); /* Статичная тень = нижняя точка старого ореола (currentColor подхватывает цвет модификатора, как и раньше в кейфреймах). */ box-shadow: 0 0 8px -2px currentColor; } /* Слой ореола иконки: верхняя точка старой анимации, мигает только прозрачностью (GPU, без repaint). */ .shop-ico::before { content: ""; position: absolute; inset: -1.5px; /* совмещение с рамкой иконки 1.5px */ border-radius: inherit; box-shadow: 0 0 16px 0px currentColor; pointer-events: none; opacity: 0; animation: shop-ico-halo 3.2s ease-in-out infinite; will-change: opacity; } /* Тёплый акцент для буста (молния). Горит ЯРЧЕ прочих иконок — усиленный ореол и более насыщенный фон (как на макете). */ .shop-ico--boost { border-color: var(--clr-neon-gold); color: var(--clr-neon-gold); background: rgba(255, 201, 58, 0.16); /* Статичная тень = нижняя точка старого усиленного ореола */ box-shadow: 0 0 12px 0px currentColor; } .shop-ico--boost::before { box-shadow: 0 0 22px 2px currentColor; animation-duration: 2.4s; /* усиленный ореол пульсирует чаще */ } /* Фиолетовый акцент для УЛЬТРА («?») */ .shop-ico--ultra { border-color: var(--clr-neon-purple); color: var(--clr-neon-purple); background: rgba(199, 36, 245, 0.08); box-shadow: 0 0 10px -2px rgba(199, 36, 245, 0.5); } /* Концентрические кольца вокруг кнопки НАЗАД (вид «СИНТЕЗ»-круга со скрина). Обойма центрирует кнопку; кольца — pointer-events:none, клик идёт в кнопку. */ .shop-back-wrap { position: relative; width: 310px; height: 310px; display: flex; align-items: center; justify-content: center; } .shop-back-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } .shop-back-ring--1 { width: 300px; height: 300px; border: 2px solid rgba(255, 45, 120, 0.7); box-shadow: 0 0 18px -2px rgba(255, 45, 120, 0.6); } .shop-back-ring--2 { width: 256px; height: 256px; border: 2px solid rgba(199, 36, 245, 0.55); } .shop-back-ring--3 { width: 300px; height: 300px; border: 2px solid rgba(255, 45, 120, 0.25); animation: shop-back-pulse 2.6s ease-in-out infinite; will-change: transform, opacity; } /* БЫЛО: анимация width/height => layout (reflow) каждый кадр. СТАЛО: transform scale => чистый композитинг на GPU. 326/300 = 1.0867. translate(-50%,-50%) из базового .shop-back-ring повторяется в каждом кейфрейме, иначе кольцо съедет из центра. */ @keyframes shop-back-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.0867); opacity: 0; } } /* ===== ДЫХАНИЕ КАРТОЧЕК БЕЗ REPAINT ===== БЫЛО: анимация трёхслойного box-shadow (включая inset) на каждой карточке => растеризация карточки каждый кадр, пока открыт магазин. СТАЛО: карточка держит статичную тень нижней точки (вдоха), слой ::before держит тень верхней точки (выдоха) и дышит только прозрачностью. Тени скопированы из старых кейфреймов один в один. */ .shop-slot--card::before { content: ""; position: absolute; inset: -2px; /* совмещение с рамкой карточки 2px */ border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 28px -3px rgba(0, 229, 255, 0.68), 0 0 9px 0px rgba(0, 229, 255, 0.42), inset 0 0 50px -10px rgba(0, 229, 255, 0.3); animation: shop-card-breathe 5.5s ease-in-out infinite; will-change: opacity; } /* У заблокированной карточки слой дышит фиолетом (те же кейфреймы, другая тень). */ .shop-slot--card.is-locked::before { box-shadow: 0 0 32px -4px rgba(199, 36, 245, 0.72), 0 0 11px 0px rgba(199, 36, 245, 0.42), inset 0 0 54px -8px rgba(199, 36, 245, 0.28); } @keyframes shop-card-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Эффект 3: проезд блика по короне. Долгая пауза + быстрый проход: полоса стоит за левым краем, проезжает за ~1.2s, потом ждёт. */ @keyframes shop-crown-sheen { 0% { left: -60%; } 20% { left: 130%; } 100% { left: 130%; } } /* Эффект 4: пульсирующий ореол иконки перенесён на слой ::before, анимируется только opacity (GPU). Тени крайних точек живут в правилах .shop-ico::before и .shop-ico--boost::before. */ @keyframes shop-ico-halo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Эффект 6: медленное вращение кольца у выбранного свотча */ @keyframes shop-swatch-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Кнопка НАЗАД центрируется в обойме; её собственные стили выше сохранены */ .shop-back-wrap .shop-back-btn { position: relative; z-index: 1; } /* Нижний слоган с ★-разделителями (как на скрине) */ .shop-slogan { text-align: center; font-family: 'Tektur', monospace; } .shop-slogan__line { display: flex; align-items: center; justify-content: center; gap: 0.8rem; } .shop-slogan__main { font-weight: 700; letter-spacing: 2px; font-size: 0.85rem; color: #ffffff; text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); } .shop-slogan__star { color: var(--clr-neon-blue); font-size: 0.7rem; text-shadow: 0 0 6px rgba(64, 64, 255, 0.55); } .shop-slogan__sub { margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.5px; /* Мелкий текст — приглушённая яркость (п.5, ~38%) */ color: rgba(247, 244, 255, 0.4); } /* Узкие экраны: корона и слоган компактнее, кольца меньше */ @media (max-width: 680px) { .shop-crown__text { font-size: 0.8rem; letter-spacing: 2px; } .shop-back-btn { width: 140px; height: 140px; font-size: 1.1rem; } .shop-back-wrap { width: 190px; height: 190px; } .shop-back-ring--1, .shop-back-ring--3 { width: 186px; height: 186px; } .shop-back-ring--2 { width: 160px; height: 160px; } /* Мобильный пульс тем же приёмом, что десктопный (см. основной @keyframes shop-back-pulse выше): transform scale вместо width/height, чтобы анимация шла на композиторе без reflow. 206/186 = 1.1075. translate(-50%,-50%) из базового .shop-back-ring повторяется в каждом кейфрейме, иначе кольцо съедет из центра. */ @keyframes shop-back-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.1075); opacity: 0; } } .shop-slot { min-height: 160px; } .shop-slogan__main { font-size: 0.72rem; letter-spacing: 1px; } .shop-ico { width: 26px; height: 26px; top: 0.7rem; right: 0.7rem; } }