/* ХАБ ПЛЕЙ — стили сайта. Вынесены из index.html 30.09.2026.
Подключается из :
(__ASSET_V__ подставляет pages.js по mtime файла — версия для кэша браузера). */
/* Локальные шрифты вместо Google Fonts CDN — иначе браузер каждого посетителя обращается
напрямую к серверам Google при каждой загрузке сайта, передавая IP-адрес и другие метаданные
за пределы РФ без согласия пользователя (трансграничная передача персональных данных).
Файлы .woff2 нужно положить в папку /fonts/ рядом с этим HTML — см. инструкцию в конце файла. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/oswald-500.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/oswald-600.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/oswald-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2');}
:root{
--rink-black:#0B0E14;
--rink-black-2:#131824;
--steel:#1E3A5F;
--ice:#F1F4F8;
--ice-2:#E4E9F1;
--rink-blue:#2F6FED;
--rink-blue-dim:#1F4FB0;
--puck-red:#E5383B;
--frost:#8A93A6;
--frost-dark:#5B6478;
--white:#FFFFFF;
--success:#2CB67D;
--radius:16px;
--radius-sm:10px;
--shadow:0 8px 24px rgba(11,14,20,0.10);
--shadow-lg:0 16px 40px rgba(11,14,20,0.18);
/* Стрелка выпадающего списка: рисуем свою вместо нативной, которая прижата к самому краю */
--select-arrow:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235B6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Та же стрелка белым — для активного (тёмного) чипа категории с выпадающим меню */
--select-arrow-light:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--font-display:'Oswald',sans-serif;
--font-body:'Inter',sans-serif;
/* Цифры (цены, счётчики, промокоды) раньше набирались третьей гарнитурой — JetBrains Mono.
Ради неё грузилось два лишних файла шрифта, а на странице соседствовали три разных
рисунка букв. Теперь это тот же Inter с табличными цифрами: у них одинаковая ширина,
поэтому столбцы цен и счётчики выравниваются так же ровно, как в моноширинном. */
--font-num:'Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* Фон страницы светлый, а шапка и подвал тёмные. Когда браузер на телефоне «оттягивает»
страницу за край (резиновая прокрутка), видно фон полотна — а он берётся от body, то есть
светлый. Из-за этого при свайпе вверх под тёмным подвалом появлялась белая полоса.
Задаём фон самому html: тогда за краями видно тёмный цвет, совпадающий и с шапкой, и
с подвалом. Содержимое страницы по-прежнему на светлом — его рисует body. */
html{scroll-behavior:smooth;background:var(--rink-black);}
/* Страница прокручивается только по вертикали. На телефоне случайный свайп вбок раньше
сдвигал весь сайт: какой-нибудь элемент оказывался шире экрана на пару пикселей.
clip не создаёт контейнер прокрутки (в отличие от hidden), поэтому липкая шапка и
нижнее меню продолжают работать; hidden — запасной вариант для старых браузеров.
Горизонтальные полосы фильтров внутри страницы прокручиваются по-прежнему. */
/* Только на body: правило на html в Safari уходит на вьюпорт целиком и на iPhone давало
полосу справа — страница рисовалась чуть уже экрана. */
body{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none;position:relative;}
/* Подсказка под названием раздела. По умолчанию — только гостю (класс is-guest ставит
switchView); в фото-шапках четырёх разделов (.section-hero) показывается всем, см. ниже. */
.guest-hint{display:none;margin-top:8px;padding:8px 12px;border-radius:10px;background:var(--ice);color:var(--frost-dark);font-size:13px;line-height:1.5;max-width:640px;}
body.is-guest .guest-hint{display:block;}
/* Страховка от «полоски справа» на телефоне: если какой-то блок окажется шире экрана,
iOS уменьшает масштаб страницы, и справа остаётся полоса фона html. Ничего не должно
быть шире окна: ограничиваем обёртки и не даём элементам фильтров расширяться по
содержимому. */
body{width:100%;max-width:100%;}
.wrap,section,header.site-header,footer,.hero{max-width:100%;}
select,input,textarea{max-width:100%;}
.filter-bar > *{min-width:0;}
/* Длинные слова и ссылки без пробелов (адрес чата в описании) не должны растягивать карточку
шире экрана — переносим в любом месте. */
.ad-desc,.ad-title,.ad-meta,.about-box,.panel-note,.my-ad-row .title,.my-ad-row .meta,.footer-col p,.notif-item,.deal-row,.incoming-response{overflow-wrap:anywhere;word-break:break-word;}
body{
font-family:var(--font-body);
background:var(--ice);
color:var(--rink-black);
-webkit-font-smoothing:antialiased;
/* Место под нижнее меню раньше давал отступ здесь, у body. Но фон body светлый, и эти
76 пикселей оказывались светлой полосой ПОД тёмным подвалом. Отступ перенесён на сам
подвал (см. footer ниже): он тёмный и уходит под меню без разрыва. */
/* Прилипающий подвал: на коротких страницах (все разделы, кроме главной) контента не
хватало на высоту экрана, подвал заканчивался выше низа окна, и под ним оставалась
пустая полоса фона. Колонка с min-height:100vh и растягивающимся прижимает
подвал к низу, не ломая длинные страницы. */
min-height:100vh;
display:flex;flex-direction:column;
}
main{flex:1 0 auto;}
footer{flex-shrink:0;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
/* Поля ввода и списки по умолчанию рисуются системным шрифтом браузера (на Windows это
Arial) — на странице появлялась третья гарнитура, которую никто не заказывал. */
input,select,textarea{font-family:inherit;}
.ico{flex-shrink:0;vertical-align:middle;}
/* Строки в кабинете, по которым можно кликнуть, чтобы открыть саму публикацию */
.ad-card-author{margin-top:18px;padding-top:16px;border-top:1px solid var(--ice-2);}
.row-openable{cursor:pointer;}
.row-openable:hover .title{color:var(--rink-blue);}
.my-response-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.own-ad-note{
display:flex;align-items:center;gap:9px;
background:var(--ice);border-radius:12px;padding:11px 13px;
font-size:13px;color:var(--frost-dark);line-height:1.4;
}
/* Название объявления внутри текста: выглядит как ссылка, но остаётся кнопкой —
переход никуда не ведёт, оно открывает карточку в модальном окне. */
.link-btn{
font:inherit;color:var(--rink-blue);text-decoration:underline;padding:0;
background:none;border:none;cursor:pointer;text-align:left;
}
.link-btn:hover{color:var(--rink-blue-dim);}
.btn .ico{width:17px;height:17px;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:3px solid var(--rink-blue);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}
/* ---------- rink line divider (signature motif) ---------- */
.rink-divider{
height:6px;
width:100%;
background:repeating-linear-gradient(
90deg,
var(--rink-blue) 0px, var(--rink-blue) 46px,
var(--puck-red) 46px, var(--puck-red) 54px,
var(--rink-blue) 54px, var(--rink-blue) 100px,
transparent 100px, transparent 112px
);
opacity:0.9;
}
.faceoff{
width:14px;height:14px;border-radius:50%;
border:3px solid var(--puck-red);
display:inline-block;flex-shrink:0;
}
/* ---------- header ---------- */
header.site-header{
position:sticky;top:0;z-index:50;
background:var(--rink-black);
color:var(--white);
padding:14px 20px;
display:flex;align-items:center;justify-content:space-between;
gap:12px;
}
.logo{
font-family:var(--font-display);
font-weight:700;
font-size:22px;
letter-spacing:0.5px;
display:flex;align-items:center;gap:8px;
white-space:nowrap;flex-shrink:0;
}
.logo .logo-icon{height:30px;width:auto;display:block;}
.footer-logo .logo-icon{height:26px;}
nav.desktop-nav{display:none;gap:4px;}
nav.desktop-nav :is(a,button){
color:var(--frost);
font-weight:600;font-size:14px;
padding:10px 14px;border-radius:999px;
transition:background .15s, color .15s;
}
nav.desktop-nav :is(a,button).active,nav.desktop-nav :is(a,button):hover{
color:var(--white);background:rgba(255,255,255,0.08);
}
.header-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{
/* Без круглой подложки: иконка живёт прямо на тёмном фоне шапки. Размер оставлен
прежним — это область нажатия, меньше 38 пикселей делать нельзя. */
position:relative;
width:38px;height:38px;
color:var(--white);
display:flex;align-items:center;justify-content:center;
}
.icon-btn:hover{color:var(--rink-blue);}
/* Красная точка «есть непрочитанное» — на кнопке кабинета в шапке и в нижнем меню.
Показывается только когда есть что показать: класс has-unread ставит скрипт. */
.notif-badge{
position:absolute;top:5px;right:5px;
width:9px;height:9px;border-radius:50%;
background:var(--puck-red);
border:2px solid var(--rink-black);
display:none;
}
.has-unread .notif-badge{display:block;}
nav.bottom-nav :is(a,button){position:relative;}
nav.bottom-nav :is(a,button) .notif-badge{top:4px;right:calc(50% - 16px);}
@media(min-width:900px){
nav.desktop-nav{display:flex;}
}
/* ---------- bottom nav (mobile) ---------- */
nav.bottom-nav{
position:fixed;bottom:0;left:0;right:0;z-index:50;
background:var(--rink-black);
display:flex;
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
box-shadow:0 -4px 20px rgba(0,0,0,0.25);
/* Мобильный Safari иногда не перерисовывает position:fixed у низа экрана во время
активной прокрутки, и меню пропадает. Выносим его на отдельный GPU-слой. */
-webkit-transform:translateZ(0);transform:translateZ(0);
-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
@media(min-width:900px){nav.bottom-nav{display:none;}}
nav.bottom-nav :is(a,button){
flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
color:var(--frost);font-size:10px;font-weight:600;padding:6px 2px;border-radius:10px;
/* min-width:0 — иначе кнопка не становится уже своей подписи («Спортсмен»),
и на экранах 320 точек всё меню оказывалось шире экрана */
min-width:0;
}
/* На самых узких экранах подписи чуть мельче, чтобы помещались без обрезки */
@media(max-width:359px){nav.bottom-nav :is(a,button){font-size:9px;}}
nav.bottom-nav :is(a,button) .ic{display:flex;align-items:center;justify-content:center;height:22px;}
nav.bottom-nav :is(a,button).active{color:var(--white);}
nav.bottom-nav :is(a,button).active .ic{color:var(--rink-blue);}
/* ---------- layout helpers ---------- */
.view{display:none;}
/* Отступ снизу, чтобы последняя карточка не прилипала к подвалу */
.view.active{display:block;animation:fadein .25s ease;padding-bottom:44px;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
.section-pad{padding:32px 0;}
.eyebrow{
font-family:var(--font-num);font-variant-numeric:tabular-nums;
font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
color:var(--rink-blue-dim);
display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:0.2px;}
/* Два вида мелкого текста в панелях: пояснение под заголовком и сообщение «пока пусто».
Раньше они набирались инлайновыми стилями и разошлись по размеру — 12,5 против 13 пикселей.
Разница в пол-пикселя не читается как замысел, только как небрежность, поэтому оба
сведены в классы с одним размером. */
.panel-note{font-size:13px;color:var(--frost-dark);margin-bottom:10px;}
.panel-empty{font-size:13px;color:var(--frost-dark);}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 22px;border-radius:999px;font-weight:600;font-size:14.5px;
transition:transform .12s, box-shadow .12s, background .12s;
white-space:nowrap;text-decoration:none;
}
.btn[disabled]{opacity:.55;cursor:default;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--rink-blue);color:var(--white);box-shadow:0 6px 16px rgba(47,111,237,0.35);}
.btn-primary:hover{background:var(--rink-blue-dim);}
.btn-dark{background:var(--rink-black);color:var(--white);}
.btn-dark:hover{background:#000;}
.btn-outline{background:var(--white);color:var(--rink-black);border:1.5px solid var(--ice-2);}
.load-more{display:flex;justify-content:center;padding:18px 0 6px;}
.is-loading{opacity:.55;transition:opacity .15s;pointer-events:none;}
.connect-block{margin-bottom:16px;}
.connect-head{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;}
/* Та же стрелка, что у выпадающих списков (--select-arrow); в свёрнутом виде повёрнута */
.connect-toggle{width:32px;height:32px;border-radius:50%;background:var(--ice-2) var(--select-arrow) no-repeat center/11px 7px;flex-shrink:0;transition:transform .15s;}
.connect-toggle:hover{background-color:var(--ice);}
.connect-block.collapsed .connect-toggle{transform:rotate(-90deg);}
.connect-item{margin-top:14px;padding-top:14px;border-top:1px solid var(--ice-2);}
.connect-item .install-row{margin-bottom:10px;}
.connect-item .install-icon,.connect-item .push-icon{width:40px;height:40px;border-radius:11px;font-size:18px;}
.push-icon{width:52px;height:52px;border-radius:14px;background:var(--ice);display:inline-flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.install-row{display:flex;gap:14px;align-items:center;margin-bottom:12px;}
.install-icon{width:52px;height:52px;border-radius:14px;flex-shrink:0;}
.install-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.install-ios{font-size:13px;color:var(--frost-dark);line-height:1.5;flex:1 1 100%;}
.ios-share{display:inline-block;padding:0 4px;color:var(--rink-blue);font-weight:700;}
/* В установленном приложении нет адресной строки — верхний отступ под статус-бар iPhone */
@media (display-mode: standalone){header.site-header{padding-top:calc(14px + env(safe-area-inset-top));}}
.chip-search{min-width:180px;flex:1 1 180px;max-width:320px;-webkit-appearance:none;appearance:none;}
.chip-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
/* Скелетоны карточек на время загрузки списка */
.skel-card{pointer-events:none;}
.skel{background:linear-gradient(90deg,var(--ice) 25%,#e9edf3 50%,var(--ice) 75%);background-size:200% 100%;animation:skel 1.2s linear infinite;border-radius:8px;}
.skel-badge{width:90px;height:18px;border-radius:999px;}
.skel-title{width:70%;height:20px;}
.skel-line{width:100%;height:13px;}
.skel-line.short{width:55%;}
.skel-btn{width:110px;height:34px;border-radius:999px;margin-top:4px;}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.error-state .btn{margin-top:10px;}
.my-ad-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.char-count{font-size:11.5px;color:var(--frost);text-align:right;margin-top:3px;}
.char-count.near{color:var(--puck-red);}
.upload-status{display:inline-block;font-size:12.5px;color:var(--frost-dark);margin-top:6px;}
.upload-status.busy::before{content:'';display:inline-block;width:12px;height:12px;border:2px solid var(--ice-2);border-top-color:var(--rink-blue);border-radius:50%;margin-right:6px;vertical-align:-2px;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.load-more[hidden]{display:none;}
.load-more .btn{min-width:200px;}
.btn-outline:hover{border-color:var(--rink-blue);color:var(--rink-blue);}
.btn-ghost{background:var(--ice-2);color:var(--rink-black);}
.btn-tg{background:#1877B8;color:var(--white);} /* фирменный #2AABEE с белым текстом ≈ 2,6:1; #1877B8 ≈ 4,8:1 */
.btn-max{background:var(--rink-black);color:var(--white);}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn-block{width:100%;}
/* ---------- hero ---------- */
.hero{
background:radial-gradient(120% 140% at 15% -10%, #1a2338 0%, var(--rink-black) 55%);
color:var(--white);
padding:52px 0 40px;
position:relative;overflow:hidden;
}
.hero::after{
content:"";position:absolute;right:-80px;top:-60px;width:340px;height:340px;
border:2px solid rgba(47,111,237,0.35);border-radius:50%;
}
.hero::before{
content:"";position:absolute;right:30px;bottom:-120px;width:220px;height:220px;
border:2px solid rgba(229,56,59,0.25);border-radius:50%;
}
/* Блок — обычный .wrap (1080px), чтобы текст героя начинался ровно от той же левой границы,
что и карточки разделов под ним. Раньше здесь стоял max-width:640px, который перебивал
ширину .wrap, а вместе с его margin:0 auto центрировал узкую колонку — из-за этого весь
текст героя был заметно сдвинут вправо относительно карточек. Ширину строки ограничиваем
не контейнером, а самими заголовком и абзацем. */
.hero-inner{position:relative;z-index:2;}
.hero h1{font-size:44px;line-height:1.05;margin-bottom:14px;max-width:640px;}
.hero h1 span{color:var(--rink-blue);}
.hero p{color:var(--frost);font-size:16px;line-height:1.55;margin-bottom:26px;max-width:480px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;}
@media(min-width:700px){.hero h1{font-size:58px;}}
/* Герой с фотографией: снимок лежит в /icons/hero.webp; пока его нет — остаётся градиент */
.hero-photo{
background-color:var(--rink-black);
background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.12) 30%, rgba(11,14,20,0) 60%, rgba(11,14,20,.30) 100%), linear-gradient(95deg, rgba(11,14,20,.90) 0%, rgba(11,14,20,.70) 38%, rgba(11,14,20,.18) 68%, rgba(11,14,20,.04) 100%), url('/icons/hero.webp');
background-size:cover;background-position:center 55%;
min-height:540px;display:flex;align-items:center;padding:56px 0 56px;
}
.hero-photo::before,.hero-photo::after{display:none;}
/* .hero-photo — flex-контейнер, поэтому .wrap внутри сжимался по содержимому и уезжал к центру */
.hero-photo > .wrap{width:100%;}
.hero-photo h1,.hero-photo p{text-shadow:0 2px 14px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.6);}
.hero-photo h1{color:#fff;}
.hero-photo p{color:#DCE3EE;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.hero-btn-ghost{background:#fff;color:var(--rink-black);border-color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);}
.hero-btn-ghost:hover{background:#EEF2F8;border-color:#EEF2F8;}
@media(max-width:899px){.hero-photo{min-height:0;padding:40px 0 34px;background-position:center;background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.45) 30%, rgba(11,14,20,.55) 100%), url('/icons/hero-m.webp');}}
.cat-count{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--rink-blue);font-weight:600;}
.cat-count:empty{display:none;}
/* Плитки разделов с фотографиями (те же снимки, что в шапках разделов), шире основного контейнера */
.wrap-wide{max-width:1320px;margin:0 auto;padding:0 20px;}
.category-grid.tiles{gap:16px;margin-top:28px;}
@media(min-width:700px){.category-grid.tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
.tile{position:relative;min-height:250px;border-radius:var(--radius);overflow:hidden;cursor:pointer;background-color:var(--rink-black-2);background-size:cover;background-position:center;box-shadow:var(--shadow);display:flex;align-items:flex-end;transition:transform .15s,box-shadow .15s;isolation:isolate;}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,14,20,.22) 0%, rgba(11,14,20,.48) 45%, rgba(11,14,20,.90) 100%);transition:background .15s;}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.tile:hover::before{background:linear-gradient(180deg, rgba(11,14,20,.15) 0%, rgba(11,14,20,.45) 45%, rgba(11,14,20,.92) 100%);}
.tile-body{position:relative;z-index:1;padding:18px 18px 16px;color:#fff;}
.tile-body h3{font-size:21px;margin-bottom:4px;color:#fff;}
.tile-body p{font-size:13.5px;line-height:1.4;color:#D5DCE8;}
.tile .cat-count{color:#fff;background:rgba(47,111,237,.85);padding:3px 9px;border-radius:999px;font-size:12px;margin-top:10px;}
.tile-athlete{background-image:url('/icons/hero-athlete-sm.webp');}
.tile-team{background-image:url('/icons/hero-team-sm.webp');}
.tile-ice{background-image:url('/icons/hero-ice-sm.webp');}
.tile-market{background-image:url('/icons/hero-market-sm.webp');}
@media(max-width:899px){.tile{min-height:170px;}.category-grid.tiles{margin-top:18px;gap:12px;}.tile-body h3{font-size:19px;}}
.home-block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.how-block{padding-top:56px;}
#view-home .home-block{padding-top:44px;}
#view-home .how-block{padding-top:66px;}
/* Пустой слот партнёров и общий низ секции давали ~150 px пустоты перед подвалом */
#adSlotHome:empty{display:none;}
#view-home{padding-bottom:0;}
#view-home .home-block:last-of-type{padding-bottom:36px;}
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.how-step{position:relative;background:var(--white);border-radius:var(--radius);padding:18px 18px 16px 18px;box-shadow:var(--shadow);}
.how-step .n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--rink-blue);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:12px;}
.how-step h4{font-family:var(--font-display);font-size:17px;margin-bottom:6px;}
.how-step p{font-size:13.5px;line-height:1.5;color:var(--frost-dark);}
@media(max-width:999px){.how-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.how-grid{grid-template-columns:1fr;gap:10px;}.how-step{display:grid;grid-template-columns:32px 1fr;column-gap:12px;}.how-step .n{margin-bottom:0;grid-row:1 / span 2;}.how-step h4{margin-bottom:4px;}}
.home-block-head h2{font-size:22px;}
.latest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.latest-card{display:flex;gap:12px;align-items:flex-start;background:var(--white);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;border:1.5px solid transparent;transition:transform .15s,box-shadow .15s;}
.latest-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--ice-2);}
.latest-thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--ice);}
.latest-body{min-width:0;flex:1;}
.latest-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px;}
.latest-date{font-size:11.5px;color:var(--frost);white-space:nowrap;}
.latest-title{font-weight:600;font-size:14.5px;line-height:1.35;margin-bottom:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.latest-meta{font-size:12.5px;color:var(--frost-dark);}
.latest-sub{font-size:12.5px;color:var(--frost-dark);margin-bottom:6px;line-height:1.4;}
.latest-desc{font-size:13px;color:var(--rink-black);line-height:1.45;margin-bottom:8px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.latest-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--frost-dark);margin-top:auto;}
.latest-foot b{color:var(--rink-black);font-family:var(--font-display);font-size:15px;white-space:nowrap;}
.latest-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.latest-card{flex-direction:column;}
.latest-card .latest-thumb{width:100%;height:140px;border-radius:10px;}
.latest-body{display:flex;flex-direction:column;width:100%;flex:1;}
.k-athlete{background:rgba(47,111,237,.10);color:var(--rink-blue);}
.k-team{background:rgba(229,56,59,.10);color:var(--puck-red);}
.k-ice{background:rgba(44,182,125,.12);color:#1B7F55;}
.k-market{background:rgba(245,166,35,.16);color:#9A6200;}
.home-news-grid{margin-bottom:0;}
@media(min-width:900px){.home-news-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.modal-sm{max-width:520px;}
.share-row{display:flex;gap:8px;margin-bottom:14px;}
.share-row input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--ice-2);border-radius:10px;background:var(--ice);font-size:13.5px;font-family:inherit;}
.share-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.share-app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;background:var(--ice);font-size:12.5px;font-weight:600;color:var(--rink-black);text-decoration:none;border:1.5px solid transparent;}
.share-app span{font-size:22px;}
.share-app:hover{border-color:var(--rink-blue);background:var(--white);}
@media(max-width:480px){.share-apps{grid-template-columns:repeat(2,1fr);}}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pick-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1.5px solid var(--ice-2);border-radius:14px;background:var(--ice);text-align:left;cursor:pointer;font-family:inherit;}
.pick-card:hover{border-color:var(--rink-blue);background:var(--white);}
.pick-card b{font-size:14.5px;}
.pick-card span:last-child{font-size:12.5px;color:var(--frost-dark);}
@media(max-width:480px){.pick-grid{grid-template-columns:1fr;}}
.category-grid{
display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:-28px;position:relative;z-index:3;
}
@media(min-width:700px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.cat-card{
background:var(--white);border-radius:var(--radius);padding:22px;
box-shadow:var(--shadow);cursor:pointer;
display:flex;gap:16px;align-items:flex-start;
transition:transform .15s, box-shadow .15s;
border:1.5px solid transparent;
}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--ice-2);}
.cat-icon{
width:52px;height:52px;border-radius:14px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:24px;
}
.cat-card h3{font-size:19px;margin-bottom:4px;}
.cat-card p{color:var(--frost-dark);font-size:14px;line-height:1.4;}
/* На широком экране четыре раздела в ряд; правило ниже базового, иначе его перебивает 2-колоночное */
@media(min-width:1000px){.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.cat-card{flex-direction:column;gap:12px;}}
/* ---------- generic page header ---------- */
.page-head{padding:28px 0 18px;}
/* Шапка раздела с фотографией: снимок + затемнение, текст белый; кнопка размещения остаётся синей */
.section-hero{background-color:var(--rink-black);background-size:cover;background-position:center 35%;color:#fff;margin-bottom:8px;}
.section-hero{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%);}
.sh-athlete{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-athlete.webp');}
.sh-team{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-team.webp');}
.sh-ice{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-ice.webp');}
.sh-market{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-market.webp');}
/* Телефоны: фото разделов в 1100 px вместо 1800 (06.10.2026, в 2 раза легче) */
@media(max-width:899px){.sh-athlete{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-athlete-m.webp');}.sh-team{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-team-m.webp');}.sh-ice{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-ice-m.webp');}.sh-market{background-image:linear-gradient(180deg, var(--rink-black) 0%, rgba(11,14,20,.10) 32%, rgba(11,14,20,0) 60%, rgba(11,14,20,.25) 100%), linear-gradient(95deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.62) 36%, rgba(11,14,20,.18) 66%, rgba(11,14,20,.04) 100%), url('/icons/hero-market-m.webp');}}
.section-hero .page-head{padding:56px 0 46px;}
.section-hero{min-height:300px;display:flex;align-items:center;}
.section-hero > .wrap{width:100%;}
@media(max-width:899px){.section-hero{min-height:0;}}
.section-hero .page-head h2{color:#fff;font-size:32px;text-shadow:0 2px 14px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.6);}
.section-hero .page-head .sub{color:#E6EEFF;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);}
.section-hero .eyebrow{color:#C9DAFF;text-shadow:0 1px 6px rgba(0,0,0,.6);}
/* Название раздела — прямо на фото (с тенью), описание — на тёмной полупрозрачной плашке цвета
шапки сайта: «стеклянная» подложка сливалась со льдом, сплошная синяя была слишком яркой.
Описание (.guest-hint) в шапках видят все, не только гости. */
.section-hero .sh-panel{max-width:660px;}
.section-hero .sh-panel .guest-hint{display:block;margin-top:14px;padding:12px 16px;border-radius:12px;background:rgba(11,14,20,.68);color:#F1F4F8;font-size:14px;line-height:1.55;max-width:none;box-shadow:0 8px 24px rgba(0,0,0,.25);}
@media(max-width:899px){.section-hero .sh-panel .guest-hint{font-size:13.5px;padding:10px 14px;margin-top:10px;}}
@media(max-width:899px){.section-hero .page-head{padding:26px 0 22px;}.section-hero .page-head h2{font-size:26px;}}
.page-head h2{font-size:28px;margin-bottom:4px;}
.page-head .sub{color:var(--frost-dark);font-size:14.5px;}
.page-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;}
/* ---------- filter bar ---------- */
.filter-bar{
display:flex;flex-wrap:wrap;gap:10px;padding:4px 0 18px;
}
/* ---- Фильтр категорий «Рынка» ----
Два разных устройства для двух ширин экрана, один и тот же выбор (activeMarketGroup /
activeMarketLeaf) и одно и то же состояние.
Десктоп (≥900px): строка чипов «Все» + группы. У группы с подкатегориями на чипе стрелка,
и нажатие раскрывает меню прямо под этим чипом — «Вся группа» и подкатегории. Отдельного
списка категорий рядом с «Городом» нет: раньше он стоял там вторым чипом, дублировал «Все»
и читался как часть фильтра города.
Телефон (<900px): чипов нет вообще — десять групп в столбик занимали шесть строк, а
прокручивать строку вбок неочевидно. Вместо них один выпадающий список со всеми группами
и подкатегориями, он же показывает текущий выбор. */
.market-count{margin-left:auto;font-size:12px;color:var(--frost-dark);white-space:nowrap;align-self:center;}
/* Стрелка-подсказка у правого края строки категорий */
.cats-strip-wrap{position:relative;}
@media(max-width:899px){
.cats-strip-wrap{display:none;}
}
@media(min-width:900px){
.market-cat-select{display:none;}
}
/* Чип группы с подкатегориями: стрелка как у выпадающих списков, чтобы было видно,
что нажатие раскроет меню, а не просто отфильтрует. */
.cats-strip .chip-select.has-menu{
padding-right:34px;
background-image:var(--select-arrow);background-repeat:no-repeat;
background-position:right 13px center;background-size:11px 7px;
}
.cats-strip .chip-select.has-menu.on{background-image:var(--select-arrow-light);}
.cats-strip .chip-select.on{background-color:var(--rink-black);color:var(--white);border-color:var(--rink-black);}
/* Меню подкатегорий под чипом. Лежит вне прокручиваемой строки (иначе обрезалось бы её
overflow), позиция считается скриптом от нажатого чипа. */
.chip-menu{
position:absolute;z-index:200;
background:var(--white);border:1.5px solid var(--ice-2);border-radius:var(--radius-sm);
box-shadow:var(--shadow-lg);padding:6px;min-width:210px;
}
.chip-menu[hidden]{display:none;}
.chip-menu-item{
display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
font-size:13.5px;color:var(--rink-black);white-space:nowrap;
}
.chip-menu-item:hover{background:var(--ice);}
.chip-menu-item.on{background:var(--ice);font-weight:600;}
.chip-menu-item.group{color:var(--frost-dark);border-bottom:1px solid var(--ice-2);border-radius:8px 8px 0 0;margin-bottom:4px;}
.chip-menu-item.group.on{color:var(--rink-black);}
.cats-strip-next{
display:none;
position:absolute;top:2px;right:0;width:34px;height:38px;
align-items:center;justify-content:flex-end;
font-size:24px;line-height:1;color:var(--frost-dark);
background:linear-gradient(to right, rgba(241,244,248,0) 0%, var(--ice) 55%);
}
.cats-strip-next.show{display:flex;}
@media(max-width:899px){
/* «Рынок» на телефоне: поиск во всю ширину, под ним категория и город в два столбца,
ниже — ползунок цены. Бокового свайпа нет. */
.market-row2{flex-wrap:wrap;padding-bottom:10px;}
.market-row2 .chip-search{flex:1 1 100%;max-width:none;}
.market-row2 .market-cat-select,.market-row2 #f-market-city{flex:1 1 calc(50% - 4px);min-width:0;}
.market-row2 .market-count{flex:1 1 100%;margin-left:0;text-align:right;}
}
.chip-select{
flex-shrink:0;
background:var(--white);border:1.5px solid var(--ice-2);border-radius:999px;
padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--rink-black);
min-width:120px;
}
.chip-select:focus{border-color:var(--rink-blue);}
/* Нативный