/*
* polish.css — global, additive "make it feel crisp" layer for Tamper Market.
*
* Intentionally conservative: it only smooths typography, adds a keyboard
* focus ring, unifies scrollbars and selection colour, and tames the mobile
* tap flash. It does NOT change layout, colours or component structure, so it
* is safe to drop on every page without visual regressions. Page-specific
* rules (e.g. .bm-body scrollbars) keep overriding it via higher specificity.
*/
/* Smoother text everywhere */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Smooth in-page anchor scrolling (respecting reduced-motion below) */
html { scroll-behavior: smooth; }
/* Accent text selection */
::selection { background: rgba(96, 165, 250, .32); color: #fff; }
/* Кольцо фокуса для того, у чего нет другого признака: ссылки, кнопки,
списки, элементы с tabindex.
Текстовые поля и textarea сюда НЕ входят намеренно. Задумывалось, что
правило сработает только при переходе с клавиатуры, но у полей ввода
браузер считает и клик мышью «видимым фокусом» — за ним обычно следует
набор текста. Из-за этого при нажатии на поиск вокруг поля вспыхивало
синее кольцо со скруглением 8px и отступом 2px: оно висело отдельно от
поля и не совпадало с его формой. Поля показывают фокус сами — рамкой
или подчёркиванием, плюс в них стоит курсор. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
input:where([type="checkbox"], [type="radio"], [type="range"], [type="file"],
[type="color"], [type="button"], [type="submit"], [type="reset"]):focus-visible {
outline: 2px solid rgba(96, 165, 250, .75);
outline-offset: 2px;
border-radius: 8px;
}
/* Softer, on-brand tap highlight on touch devices */
* { -webkit-tap-highlight-color: rgba(96, 165, 250, .18); }
/* Thin, dark, consistent scrollbars (Firefox + WebKit). Page-level custom
scrollbars still win on their own containers via higher specificity. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .12);
border-radius: 8px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, .22);
background-clip: content-box;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ── Header favorite/cart icons REMOVED (2026-07-15) ────────────────────────
♥ / cart live only inside the signed-in userpod dropdown. Standalone
header clusters (.hd-actions / .hd-icons / .hd-iconlink) were duplicates
and caused flash + visual clutter. Hard-hide any leftover markup. */
.hd-actions,
.hd-icons,
.hd-r > a.hd-iconlink,
.hd-r > a.hd-iconbtn,
.hd-r > a.hd-ic {
display: none !important;
}
/* Unify header control order: lang → user pod */
.hd-r { display: flex !important; align-items: center !important; }
.hd-r .lang { order: 1 !important; }
.hd-r [data-tm-userpod] { order: 2 !important; }
/* Legacy button styles kept inert (markup removed); safe if a page regresses. */
.hd-iconlink, .hd-iconbtn, .hd-ic {
width: 40px !important; height: 40px !important; flex-shrink: 0;
display: none !important;
border-radius: 50% !important;
}
.hd-iconlink svg, .hd-iconbtn svg, .hd-ic svg {
width: 18px !important; height: 18px !important;
stroke-width: 2 !important; stroke-linejoin: round !important; stroke-linecap: round !important;
transition: transform .2s ease;
}
.hd-iconlink:hover, .hd-iconbtn:hover, .hd-ic:hover {
color: #fff !important;
border-color: rgba(96,165,250,.42) !important;
box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 24px rgba(96,165,250,.18), 0 1px 0 rgba(255,255,255,.05) inset !important;
transform: translateY(-1px) !important;
}
.hd-iconlink:hover svg, .hd-iconbtn:hover svg, .hd-ic:hover svg { transform: scale(1.08); }
.hd-iconlink:active, .hd-iconbtn:active, .hd-ic:active { transform: translateY(0) scale(.95) !important; }
/* Active page (on /favorites or /cart) — soft accent fill */
.hd-iconlink.on, .hd-iconlink[aria-current="page"],
.hd-iconbtn.on, .hd-iconbtn[aria-current="page"],
.hd-ic.on, .hd-ic[aria-current="page"] {
color: #fff !important;
border-color: rgba(96,165,250,.45) !important;
background:
linear-gradient(180deg, rgba(96,165,250,.16) 0%, rgba(96,165,250,.02) 60%),
rgba(12,16,13,.6) !important;
}
/* Count badge — brand-blue, cut out from the header with a dark ring */
.hd-ic-badge, .hd-iconbtn-cnt {
background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
color: #fff !important;
border: 2px solid #0b0e0a !important;
box-shadow: 0 2px 8px rgba(59,130,246,.5) !important;
top: -5px !important; right: -5px !important;
min-width: 18px !important; height: 18px !important;
font-weight: 800 !important;
animation: tmBadgePop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes tmBadgePop { 0% { transform: scale(.2); opacity: 0 } 60% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }
@media (max-width: 680px) {
.hd-iconlink, .hd-iconbtn, .hd-ic { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
.hd-iconlink svg, .hd-iconbtn svg, .hd-ic svg { width: 16px !important; height: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
.hd-ic-badge, .hd-iconbtn-cnt { animation: none !important; }
}
/* ── Product card header (.acc-card on market + favorites) ───────────────────
The favorite heart is absolute top-right; the header row holds the
game+chips block (left) and the price (right). On narrow cards the long
chip row (hours, $inventory, Prime, ELO…) shoved the price under the heart,
so only a stray "₽" peeked out past the edge. Fix: pin the price, give the
row clearance for the heart, and let the game/chips block shrink instead.
Centralised here so it can never drift apart between pages again. */
.acc-card-head { padding-right: 56px !important; gap: 10px !important; }
.acc-game-badge-top { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; }
.acc-price, .acc-price-stack { flex-shrink: 0 !important; }
.acc-price-old, .acc-price-new, .acc-price { white-space: nowrap !important; }
/* ── Brand logo: Tamper.Market ──────────────────────────────────────────────
Real period glyph — baseline, tight, azure + soft glow. Not a square,
not a fake spacer box. Markup: Tamper.Market */
.lo-t {
font-family: Inter, system-ui, -apple-system, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -.02em !important;
color: #fff !important;
white-space: nowrap !important;
}
.lo-t span,
.lo-t .lo-sq {
display: inline !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: #60a5fa !important;
-webkit-text-fill-color: #60a5fa !important;
text-shadow: 0 0 10px rgba(96,165,250,.55) !important;
font-size: 1em !important;
font-weight: inherit !important;
font-style: normal !important;
line-height: inherit !important;
letter-spacing: 0 !important;
vertical-align: baseline !important;
position: static !important;
top: auto !important;
left: auto !important;
overflow: visible !important;
transform: none !important;
}
.lo-t span::before,
.lo-t span::after,
.lo-t .lo-sq::before,
.lo-t .lo-sq::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
box-shadow: none !important;
}
.pager button.on {
background: linear-gradient(180deg, #60a5fa, #3b82f6) !important;
box-shadow: 0 4px 14px rgba(59,130,246,.32) !important;
}
/* ── Site-wide header nav ──────────────────────────────────────────────────
2026-08-22: капсула с белой таблеткой на активном пункте заменена на
текст с подчёркиванием. Пункты перестают выглядеть кнопками — в шапке
нечего «нажимать как кнопку», это навигация, и белая плашка спорила с
единственной по-настоящему белой кнопкой на странице («Купить»).
Разметку это не трогает: тот же