/* ────────────────────────────────────────────────────────────── Общий стиль сайта. Один файл на все страницы. Оформление — по образцу HLTV и FACEIT. От HLTV: тёмно-синяя основа, плоские панели с тонкой рамкой, таблицы с тёмной шапкой, счёт матча в рамке между командами, зелёное «выиграл» и красное «проиграл». От FACEIT: оранжевый акцент на всём, что нажимается, скруглённые карточки, круглые аватары, уровень игрока кружком. Раньше каждая страница таскала свою копию этого же CSS прямо внутри HTML: браузер скачивал одно и то же заново на каждом переходе и не мог ничего закэшировать. Теперь это отдельный файл с длинным сроком жизни в кэше — качается один раз. Шрифты тоже свои. Google Fonts — это лишние DNS, TLS и блокирующий отрисовку запрос к чужому серверу на каждой странице; на домашнем канале это заметно. ────────────────────────────────────────────────────────────── */ /* ───────────────────────────── шрифты ───────────────────────────── */ @font-face{font-family:Oswald;font-style:normal;font-weight:400;font-display:swap; src:url(/static/fonts/oswald-cyrillic-400.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Oswald;font-style:normal;font-weight:400;font-display:swap; src:url(/static/fonts/oswald-latin-400.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/oswald-cyrillic-600.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/oswald-latin-600.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap; src:url(/static/fonts/oswald-cyrillic-700.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap; src:url(/static/fonts/oswald-latin-700.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap; src:url(/static/fonts/manrope-cyrillic-400.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap; src:url(/static/fonts/manrope-latin-400.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/manrope-cyrillic-600.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/manrope-latin-600.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap; src:url(/static/fonts/manrope-cyrillic-800.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap; src:url(/static/fonts/manrope-latin-800.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ───────────────────────────── палитра ───────────────────────────── */ /* Все цвета сайта — здесь и только здесь. Постраничные стили берут их по имени и своих шестнадцатеричных значений не держат: иначе смена палитры превращается в охоту по десяти файлам. Старые имена (--ink, --crate, --row, --sand, --dim, --brass, --olive, --stamp, --rule) оставлены псевдонимами новых: ими написана бо́льшая часть правил, и переименовывать их по всему сайту — верный способ что-нибудь пропустить. Новые правила пишите новыми именами. */ :root{ /* поверхности — тёмно-синие, как на HLTV */ --bg:#0f141a; /* страница */ --bg-top:#0a0e13; /* верхняя полоса, подложка под код */ --panel:#1a222c; /* карточка, панель */ --panel-2:#232e3b; /* строка внутри панели */ --panel-3:#2c3948; /* наведение, выделенная строка */ --line:#2f3b49; /* рамки и разделители */ /* текст */ --txt:#e6ebf0; --txt-dim:#8fa2b5; /* акцент — оранжевый FACEIT. Одно значение и для заливки, и для букв: на самой светлой подложке (--panel-3) даёт контраст 4.8. */ --accent:#ff6a1f; --accent-hi:#ff8a4a; --accent-bg:rgba(255,106,31,.12); --on-accent:#0f141a; /* исходы, как на HLTV: зелёное выиграл, красное проиграл. Пара на каждый: плашка и буквы — буквами плашечный цвет слишком тёмен. */ --win:#1f9d5a; --win-t:#4fd48b; --loss:#d63a2a; --loss-t:#ff6f5e; --live:#e3402c; /* стороны — как в игре */ --ct:#5d9cec; --ct-bg:#1e3350; --t:#e8b84a; --t-bg:#3d3117; /* кнопка входа — цвета Steam */ --steam:#2a475e; --steam-hi:#3a5f7c; /* скругление карточек, как на FACEIT */ --r:4px; /* прежние имена */ --ink:var(--bg);--crate:var(--panel);--row:var(--panel-2);--row-hi:var(--panel-3); --sand:var(--txt);--dim:var(--txt-dim);--rule:var(--line); --brass:var(--accent);--olive:var(--win);--olive-t:var(--win-t); --stamp:var(--loss);--stamp-t:var(--loss-t); --ost:Oswald,"Arial Narrow",system-ui,sans-serif; --man:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif} /* ───────────────────────────── основа ───────────────────────────── */ *{box-sizing:border-box} /* У кнопок в этом файле задан display:inline-block, а авторский стиль сильнее браузерного — и атрибут hidden переставал работать именно на кнопках. Спрятанные кнопки лобби так и оставались на виду. */ [hidden]{display:none!important} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--txt);font-family:var(--man);font-size:14px; line-height:1.45;min-height:100vh} .wrap{max-width:var(--page);margin:0 auto;padding:22px clamp(14px,1.6vw,34px) 80px} h2{font-family:var(--ost);font-weight:600;font-size:13px;letter-spacing:.16em; text-transform:uppercase;color:var(--txt-dim);margin:0 0 12px} h3{font-family:var(--ost);font-weight:600;font-size:15px;letter-spacing:.1em; text-transform:uppercase;margin:0 0 10px} a{color:var(--accent-hi)} ::selection{background:var(--accent);color:var(--on-accent)} /* ───────────────────────────── шапка ───────────────────────────── Полоса во всю ширину окна, как на HLTV и FACEIT, а не заголовок внутри колонки. Слева название сервера с оранжевой кромкой, дальше вкладки, справа человек. Липнет к верху: на длинных страницах переход в другой раздел не требует прокрутки наверх. */ header.topbar{background:var(--bg-top);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:80} .topin{max-width:var(--page);margin:0 auto;padding:0 clamp(14px,1.6vw,34px);display:flex; align-items:stretch;gap:14px;min-height:58px} .brand{display:flex;flex-direction:column;justify-content:center; font-family:var(--ost);font-weight:700;font-size:21px;letter-spacing:.1em; text-transform:uppercase;line-height:1;color:#fff;text-decoration:none; padding-left:12px;border-left:4px solid var(--accent);margin:12px 0; white-space:nowrap} .brand small{display:block;font-family:var(--man);font-weight:700;font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);margin-top:5px; white-space:normal} a.brand:hover{color:var(--accent-hi)} nav.tabsnav{display:flex;flex-wrap:wrap;margin-left:6px} nav.tabsnav a{display:flex;align-items:center;font-family:var(--ost);font-size:14px; letter-spacing:.12em;text-transform:uppercase;padding:0 14px;color:var(--txt-dim); text-decoration:none;border-top:3px solid transparent; border-bottom:3px solid transparent;transition:color .13s,background .13s} nav.tabsnav a:hover{color:#fff;background:rgba(255,255,255,.04)} nav.tabsnav a.on{color:#fff;border-bottom-color:var(--accent)} nav.tabsnav a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px} nav.tabsnav a.mine{color:var(--win-t)} nav.tabsnav a.mine:hover{color:#fff} .headright{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none} /* меню под ником */ .usermenu{position:relative} .userbtn{display:flex;align-items:center;gap:9px;background:transparent; border:1px solid transparent;border-radius:var(--r);padding:5px 8px;cursor:pointer; color:var(--txt);font-family:var(--man);font-weight:700;font-size:13px; letter-spacing:.02em;text-transform:none;transition:border-color .13s,background .13s; max-width:250px} .userbtn:hover{border-color:var(--line);background:var(--panel)} .userbtn[aria-expanded=true]{border-color:var(--accent);background:var(--panel)} .userbtn img{width:30px;height:30px;border-radius:50%;object-fit:cover; border:2px solid var(--line);flex:0 0 auto} .userbtn .un{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .userbtn .caret{font-size:9px;color:var(--txt-dim);flex:0 0 auto} .userpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px; background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent); border-radius:var(--r);box-shadow:0 14px 34px rgba(0,0,0,.55);display:none;padding:6px 0} .usermenu.open .userpanel{display:block} .userpanel .uhead{padding:10px 15px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .userpanel .uhead b{display:block;font-family:var(--ost);font-size:16px;letter-spacing:.06em; text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .userpanel .uhead span{display:block;font-size:11px;letter-spacing:.12em;color:var(--txt-dim);margin-top:4px} .userpanel a,.userpanel button{display:block;width:100%;text-align:left;background:transparent; border:0;border-radius:0;padding:10px 15px;font-family:var(--man);font-weight:600;font-size:13px; letter-spacing:.02em;color:var(--txt);text-decoration:none;cursor:pointer; text-transform:none} .userpanel a:hover,.userpanel button:hover{background:var(--panel-3);color:#fff} .userpanel .sep{height:1px;background:var(--line);margin:6px 0} .userpanel .out:hover{color:var(--loss-t)} .userpanel a:focus-visible,.userpanel button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .offline{display:none;font-family:var(--man);font-weight:800;font-size:10px; letter-spacing:.12em;text-transform:uppercase;background:var(--loss);color:#fff; padding:6px 10px;border-radius:3px} .offline.on{display:inline-block} @media(max-width:760px){ /* Вкладки уходят на вторую строку и прокручиваются вбок, а не переносятся в три ряда: полоса остаётся полосой. */ .topin{flex-wrap:wrap;padding:8px 14px;gap:6px 10px;min-height:0} .brand{margin:4px 0;font-size:18px} .headright{margin-left:auto} nav.tabsnav{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto; margin:0 -14px;padding:0 8px;scrollbar-width:none;position:relative} nav.tabsnav::-webkit-scrollbar{display:none} nav.tabsnav a{padding:10px 12px;font-size:13px;white-space:nowrap} } /* Шесть вкладок и «Моё лобби» на узком ноутбуке: сжимаем отступы, а не переносим вкладки во второй ряд. Не влезли и так (длинный ник, аватар) — лента листается, как на телефоне, а страница вбок не едет. */ @media(min-width:761px) and (max-width:1240px){ nav.tabsnav{flex-wrap:nowrap;margin-left:0;min-width:0;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;position:relative} nav.tabsnav::-webkit-scrollbar{display:none} nav.tabsnav a{padding:0 10px;font-size:13px;letter-spacing:.1em;white-space:nowrap} } /* Гаснущий край — знак, что лента листается и за краем есть ещё. Классы ставит navStrip, и только когда вкладкам правда тесно. */ nav.tabsnav.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent); mask-image:linear-gradient(90deg,#000 78%,transparent)} nav.tabsnav.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%); mask-image:linear-gradient(90deg,transparent,#000 22%)} nav.tabsnav.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)} @media(min-width:761px) and (max-width:1040px){ .brand small{display:none} nav.tabsnav a{padding:0 8px;letter-spacing:.06em} } /* ───────────────────────────── кнопки ───────────────────────────── */ button,a.btn{font-family:var(--man);font-weight:800;font-size:11px;letter-spacing:.14em; text-transform:uppercase;padding:9px 14px;background:var(--panel-2);color:var(--txt); border:1px solid var(--line);border-radius:var(--r);cursor:pointer;text-decoration:none; display:inline-block;line-height:1.3; transition:background .14s,border-color .14s,color .14s} button:hover:not(:disabled),a.btn:hover{background:var(--panel-3);border-color:var(--txt-dim)} button:focus-visible,a.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px} button:disabled{opacity:.4;cursor:not-allowed} /* Не .tab: у вкладок «включено» — это подчёркивание, а не заливка. Без этого исключения button.on красил вкладку целиком, а .tab.on красил тем же цветом текст — и надпись пропадала. */ button.primary,a.btn.primary,button.on:not(.tab),a.btn.on{background:var(--accent); color:var(--on-accent);border-color:var(--accent)} button.primary:hover:not(:disabled),a.btn.primary:hover, button.on:not(.tab):hover:not(:disabled),a.btn.on:hover{background:var(--accent-hi); border-color:var(--accent-hi);color:var(--on-accent)} button.ghost,a.btn.ghost{background:transparent} /* Опасные кнопки должны читаться как опасные СРАЗУ, а не при наведении: на телефоне наведения нет вовсе. В покое — красный контур и красный текст, при наведении — заливка. */ button.danger,a.btn.danger{border-color:rgba(214,58,42,.55);color:var(--loss-t)} button.danger:hover:not(:disabled),a.btn.danger:hover{background:var(--loss); border-color:var(--loss);color:#fff} button.danger:disabled{color:var(--loss-t)} button.small,a.btn.small{font-size:10px;padding:7px 11px} /* Главная кнопка страницы — оранжевая, как «Play» на FACEIT. */ button.cta{font-family:var(--ost);font-weight:700;font-size:17px;letter-spacing:.12em; padding:13px 26px;background:var(--accent);color:var(--on-accent);border-color:var(--accent)} button.cta:hover:not(:disabled){background:var(--accent-hi);border-color:var(--accent-hi)} button.cta:disabled{background:var(--panel-2);color:var(--txt-dim);border-color:var(--line)} button.steam{background:var(--steam);border-color:var(--steam);color:#fff} button.steam:hover:not(:disabled){background:var(--steam-hi);border-color:var(--steam-hi)} /* ───────────────────────────── блоки ───────────────────────────── */ /* Ритм разделов. Два размера промежутка, и оба названы: --gap-block — между разделами БЕЗ подложки (их разделяет воздух), --gap-panel — между разделами-панелями (их и так видно по подложке). */ /* Ширина содержимого. Умолчание для всего сайта — прежние 1180: при них страница выглядит собранной, и витринные страницы вроде главной с её большим клипом на широком контейнере просто раздувались. Страницы, которым ширина ПО ДЕЛУ нужна, переопределяют это число у себя: каждая грузит свой page-*.css, и строчки `:root{--page:…}` в нём хватает. Так сделан профиль — там приборная панель из таблиц, плиток и двух колонок, ей 1180 тесны. Поля при этом растут вместе с экраном: clamp даёт 14 точек на телефоне и до 34 на большом мониторе. */ :root{--page:1180px} :root{--gap-block:28px;--gap-panel:14px;--pad-panel:16px 18px} .sec{margin-top:var(--gap-block)} /* Раздел с подложкой. Свой промежуток снизу и НИКАКОГО сверху: складывать оба — это и есть дыра в полэкрана. */ .sec.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:var(--pad-panel);margin-top:0;margin-bottom:var(--gap-panel)} .sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px; border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:14px} /* Заголовок раздела — один на весь сайт: белые узкие капители с оранжевой чёрточкой слева, как заголовки блоков на HLTV. */ .sechead h2,.sechead2 h3{font-family:var(--ost);font-weight:600;font-size:15px; letter-spacing:.14em;text-transform:uppercase;color:var(--txt);margin:0; display:flex;align-items:center;gap:9px} .sechead h2::before,.sechead2 h3::before{content:"";display:inline-block;width:3px; height:14px;background:var(--accent);border-radius:2px;flex:none} .sechead .cnt,.sechead2 .cnt{font-family:var(--ost);font-size:12px; letter-spacing:.12em;color:var(--txt-dim)} .sechead .cnt{margin-left:auto} .gate{margin:40px auto;max-width:520px;background:var(--panel);border:1px solid var(--line); border-top:3px solid var(--accent);border-radius:var(--r);padding:30px;text-align:center} .gate p{color:var(--txt-dim);line-height:1.6;font-size:14px} .note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--win); border-radius:var(--r);padding:12px 16px;margin:16px 0;font-size:13px; color:var(--txt-dim);line-height:1.6} .note b{color:var(--txt)} .note.warn{border-left-color:var(--loss)} .empty{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:20px;color:var(--txt-dim);font-size:14px;line-height:1.6} /* Единая заглушка «здесь пока пусто»: заголовок, объяснение и, если есть куда идти, кнопка. */ .emptybox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:20px 22px;margin:12px 0} .emptybox .eh{font-family:var(--ost);font-size:16px;letter-spacing:.06em; text-transform:uppercase;color:var(--txt)} .emptybox .et{color:var(--txt-dim);font-size:14px;line-height:1.6;margin-top:8px; max-width:62ch} .emptybox button{margin-top:14px} .skelbox{margin:12px 0} /* Список «название — значение — пояснение». Общий: им написаны и строки настроек на «Состоянии», и факты на странице карты. */ .rows{list-style:none;margin:10px 0 0;padding:0} .rows li{display:flex;align-items:baseline;gap:10px;padding:6px 0;flex-wrap:wrap; border-bottom:1px solid var(--line);font-size:13px} .rows li:last-child{border-bottom:none} .rows .k{color:var(--txt);min-width:min(270px,100%)} .rows .v{color:var(--txt-dim);min-width:min(200px,100%)} .rows .v b{color:var(--txt)} .rows .v i{font-style:normal;color:var(--txt-dim)} .rows .why{flex:1 1 260px;min-width:0;color:var(--txt-dim);font-size:12px; line-height:1.5;padding-left:0;overflow-wrap:anywhere} .rows .k,.rows .v{overflow-wrap:anywhere} @media (max-width:900px){ .rows .k{min-width:min(180px,100%)} .rows .why{flex-basis:100%} } @media (max-width:640px){ .rows .k{flex-basis:100%} .rows .v{min-width:0} } .muted{color:var(--txt-dim);font-size:13px} /* N/A — «числа нет» (App.na). Тусклее числа и с точечным подчёркиванием: под ним подсказка, почему числа нет. Ноль остаётся нулём и так не выглядит — это разные вещи. */ .na{font-family:var(--man);font-weight:800;font-size:.82em;letter-spacing:.06em; color:var(--txt-dim);border-bottom:1px dotted currentColor;cursor:help;white-space:nowrap} /* Лицо команды (App.teamFace): логотип или квадрат с буквами. */ .tface{width:22px;height:22px;flex:0 0 22px;border:1px solid var(--line);border-radius:3px; display:inline-flex;align-items:center;justify-content:center;font-family:var(--ost); font-size:9px;letter-spacing:.04em;object-fit:cover;background:var(--panel-2);overflow:hidden} .tface.l{width:44px;height:44px;flex-basis:44px;font-size:14px} /* Подразделы «Турниров»: кубки, команды, игроки. Отдельной строкой над страницей, а не вкладками в шапке: в шапке их было бы семь. */ nav.subnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px} nav.subnav a{font-family:var(--ost);font-size:13px;letter-spacing:.12em;text-transform:uppercase; padding:7px 14px;border:1px solid var(--line);border-radius:3px;color:var(--txt-dim); text-decoration:none;background:var(--panel)} nav.subnav a:hover{color:#fff;border-color:var(--txt-dim)} nav.subnav a.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* «скоро» у подраздела, которого ещё нет (Rush Point Cup). */ nav.subnav a .soon{display:inline-block;margin-left:8px;font-family:var(--man);font-weight:800; font-size:9.5px;letter-spacing:.12em;padding:2px 6px;border-radius:3px;background:var(--panel-3); color:var(--txt-dim);vertical-align:1px} nav.subnav a.on .soon{background:rgba(0,0,0,.22);color:var(--on-accent)} nav.subnav a:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* Вкладки: подчёркивание оранжевым, как переключатели на FACEIT. */ .tabs{display:flex;gap:2px;flex-wrap:wrap;margin:18px 0 14px;border-bottom:1px solid var(--line)} .tab{font-family:var(--ost);font-size:14px;letter-spacing:.12em;text-transform:uppercase; padding:10px 16px;background:transparent;border:0;border-radius:0; border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--txt-dim);cursor:pointer} .tab:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.04);border-color:transparent; border-bottom-color:var(--line)} .tab.on,.tab.on:hover:not(:disabled){color:#fff;border-bottom-color:var(--accent);background:transparent} /* Плашки состояний — маленькие скруглённые чипы. */ .pill{display:inline-block;font-family:var(--man);font-weight:800;font-size:10px; letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:3px;line-height:1.2} .pill.ok{background:var(--win);color:var(--on-accent)} /* .bad — то же, что .no: на «Состоянии» плашки назывались по-своему. */ .pill.no,.pill.bad{background:var(--loss);color:#fff} .pill.warn{background:var(--accent);color:var(--on-accent)} .pill.dim{background:var(--panel-3);color:var(--txt-dim)} code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--bg-top); padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);display:block; overflow-x:auto;white-space:nowrap;margin:8px 0} input,input[type=search],input[type=text]{font-family:var(--man);font-size:14px; padding:10px 12px;background:var(--bg);border:1px solid var(--line); border-radius:var(--r);color:var(--txt)} input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)} input::placeholder{color:var(--txt-dim);opacity:.7} label.chk{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--txt-dim);cursor:pointer;user-select:none} label.chk input{accent-color:var(--accent);width:16px;height:16px} /* всплывающая подсказка снизу */ .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%); visibility:hidden; background:var(--accent);color:var(--on-accent);font-weight:800;font-size:13px; letter-spacing:.06em;padding:12px 20px;border-radius:var(--r); box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .22s;z-index:200; max-width:90vw;text-align:center} .toast.on{transform:translateX(-50%) translateY(0);visibility:visible} .toast.bad{background:var(--loss);color:#fff} /* заглушка, пока грузятся данные: страница не прыгает и не мигает пустотой */ .skel{background:var(--panel);border-radius:var(--r);position:relative;overflow:hidden; height:64px;margin-bottom:6px} .skel::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:sweep 1.1s linear infinite} @keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}} /* ссылка на профиль игрока — везде одинаковая */ a.plink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--txt-dim); transition:color .12s,border-color .12s} a.plink:hover,a.plink:focus-visible{color:var(--accent-hi);border-bottom-color:var(--accent-hi)} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ───────────────────── диалог «сменить имя» ───────────────────── */ .namedlg{position:fixed;inset:0;background:rgba(6,9,13,.86);display:flex; align-items:center;justify-content:center;padding:20px;z-index:300} .namedlg[hidden]{display:none} .namebox{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent); border-radius:var(--r);padding:26px;max-width:430px;width:100%; box-shadow:0 18px 60px rgba(0,0,0,.5)} .namebox h3{margin:0 0 10px} .namebox p{font-size:13px;line-height:1.55;margin:0 0 16px} .namebox input{width:100%;font-size:16px;padding:12px} .namebtns{display:flex;gap:10px;margin-top:16px} .namebtns button{flex:1} .namemsg{margin-top:12px;padding:10px;font-size:13px;border-left:3px solid var(--loss); background:rgba(214,58,42,.12);border-radius:0 var(--r) var(--r) 0;line-height:1.5} .namemsg[hidden]{display:none} /* ─────────────── фон страницы ─────────────── Как на FACEIT: широкая полоса над шапкой профиля или команды. Без картинки — тонкая тёмная полоска с кнопкой: пустое место в половину экрана хуже, чем его отсутствие. Снизу затемнение, чтобы шапка на любой картинке читалась. */ .cover{position:relative;background:var(--panel-2);border-radius:var(--r) var(--r) 0 0; min-height:44px;display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden} .cover.has{min-height:0;background:none} .cover img{display:block;width:100%;max-height:230px;object-fit:cover} .cover.has::after{content:"";position:absolute;inset:auto 0 0 0;height:60%; background:linear-gradient(to bottom, transparent, rgba(15,20,26,.85)); pointer-events:none} .cover .cacts{position:absolute;right:10px;bottom:10px;display:flex;gap:8px; z-index:1} /* Без картинки кнопки стоят в самой полоске, а не поверх неё. */ .cover:not(.has) .cacts{position:static;margin:8px 10px} /* ════════════════ подгонка картинки ════════════════ */ .cropov{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:60; display:flex;align-items:center;justify-content:center;padding:18px} /* Окно широкое: в маленьком картинку не подогнать — на глаз не видно, что именно попадёт в рамку. Высоту ограничиваем окном браузера, чтобы на ноутбуке кнопки не уезжали за нижний край. */ .cropbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:20px;max-width:560px;width:100%;max-height:100%;overflow:auto} .cropbox h3{font-family:var(--ost);font-size:16px;letter-spacing:.1em; text-transform:uppercase;margin:0 0 6px} .cropbox .muted{margin:0 0 12px} /* Размеры задаёт скрипт: холст растягивается на всю ширину окна, а форму держит aspect-ratio. Тут — только вид. */ #cropCanvas{max-width:100%;display:block;margin:0 auto; background:var(--panel-2);border:1px solid var(--accent); cursor:grab;touch-action:none} #cropCanvas:active{cursor:grabbing} #cropZoom{width:100%;margin:12px 0} .cropbox .acts{display:flex;gap:8px;justify-content:flex-end} /* Ряд кнопок. Базовое правило: без него подпись про форматы липла вплотную к кнопке и начиналась с середины строки. */ .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* Ползунок приближения. Браузерный по умолчанию сине-белый и посреди тёмной страницы выглядит чужим. */ #cropZoom{-webkit-appearance:none;appearance:none;height:22px;background:transparent} #cropZoom::-webkit-slider-runnable-track{height:4px;background:var(--line);border-radius:2px} #cropZoom::-moz-range-track{height:4px;background:var(--line);border-radius:2px} #cropZoom::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:16px;height:16px;margin-top:-6px;background:var(--accent);border-radius:50%; border:1px solid var(--accent);cursor:pointer} #cropZoom::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border-radius:50%; border:1px solid var(--accent);cursor:pointer} #cropZoom:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* ─────────────── общие кирпичи оформления ─────────────── Круглый аватар из Steam и квадрат-логотип из букв — одинаковые на всех страницах, чтобы человек и команда узнавались с первого взгляда. */ .face{flex:none;border-radius:50%;border:1px solid var(--line); background:var(--panel-2);display:flex;align-items:center;justify-content:center; font-family:var(--ost);color:var(--txt-dim);object-fit:cover} .tav{flex:none;display:flex;align-items:center;justify-content:center; font-family:var(--ost);letter-spacing:.06em;border:1px solid var(--line); border-radius:var(--r);overflow:hidden} img.tav{object-fit:cover;background:var(--panel-2)} /* Кружок уровня, как на FACEIT: цвет по ступеням — серый, зелёный, жёлтый, оранжевый, красный. Живёт здесь, а не на странице профиля: тот же кружок стоит и в таблице игроков кастомов. Число внутри считает App.levelOf, здесь только вид. */ .lvl{--lvlc:var(--txt-dim);flex:none;width:46px;height:46px;border-radius:50%; border:3px solid var(--lvlc);background:var(--bg);display:flex;align-items:center; justify-content:center;font-family:var(--ost);font-weight:600;font-size:20px; color:var(--lvlc);cursor:help} /* Тот же кружок в строку таблицы: рядом с цифрой рейтинга, а не вместо неё. Кружок и число лежат в общей строке-флексе (.lvlrow) и меряются по её середине: vertical-align пришлось бы подбирать под каждый размер шрифта, и на живом сайте кружок от этого съехал вниз. */ .lvl.sm{width:22px;height:22px;border-width:2px;font-size:11px} .lvlrow{display:inline-flex;align-items:center;gap:7px} .lvl.l1{--lvlc:#9aa5b1} .lvl.l2,.lvl.l3{--lvlc:#3dd67a} .lvl.l4,.lvl.l5,.lvl.l6,.lvl.l7{--lvlc:#ffc12b} .lvl.l8,.lvl.l9{--lvlc:#ff6a1f} .lvl.l10{--lvlc:#ff3b2f} /* ════════════════ панель и живой счёт ════════════════ Панель — общий кирпич: лобби, страница матча, турниры. Живой блок — крупный счёт, лента и мини-карта — стоит и в лобби, и на странице матча, поэтому лежит здесь, а не в файле одной страницы. */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:16px;margin-bottom:14px} .specrow{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap} .speccount{font-family:var(--ost);font-size:15px;letter-spacing:.1em; color:var(--txt-dim)} .speccount b{color:var(--accent-hi)} .panel.live{border-top:3px solid var(--live)} .panel.live .lvscore{display:flex;align-items:baseline;justify-content:center; gap:14px;margin:12px 0 6px} .panel.live .lvscore b{font-family:var(--ost);font-size:34px;line-height:1} .panel.live .lvscore i{font-style:normal;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--txt-dim);margin:0 8px} .panel.live .lvscore .ct b{color:var(--ct)} .panel.live .lvscore .tt b{color:var(--t)} .panel.live .lvscore .colon{color:var(--txt-dim);font-family:var(--ost);font-size:26px} .panel.live .lvalive{text-align:center;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--txt-dim);margin-bottom:12px} .panel.live .lmapbox{margin:0 auto 12px;max-width:460px} .panel.live .lvline{display:flex;align-items:baseline;gap:8px;font-size:13px; padding:4px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .panel.live .lvline:last-child{border-bottom:0} .panel.live .lvline .r{color:var(--txt-dim);font-size:11px;min-width:34px} .panel.live .lvline .w{color:var(--txt-dim);font-size:12px} .panel.live .lvline .arr{color:var(--txt-dim)} .panel.live .lvline .who.ct{color:var(--ct)} .panel.live .lvline .who.tt{color:var(--t)} /* ════════════════ подсказка по наведению ════════════════ Лежит в body и позиционируется от окна: иначе её обрезала бы таблица с прокруткой, а столбец «рейтинг» в таблицах как раз крайний. */ .tipbox{position:absolute;z-index:300;max-width:min(340px,calc(100vw - 16px)); background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent); border-radius:var(--r);padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.55); font-size:13px;line-height:1.5;color:var(--txt)} .tiphead{font-family:var(--ost);font-size:13px;letter-spacing:.1em; text-transform:uppercase;color:var(--accent-hi);margin-bottom:8px} .tipline{display:flex;gap:12px;justify-content:space-between;padding:2px 0} .tipline .tk{color:var(--txt-dim)} .tipline .tv{font-family:var(--ost);white-space:nowrap} .tipnote{color:var(--txt-dim);font-size:12px;line-height:1.55;margin-top:9px; padding-top:9px;border-top:1px solid var(--line)} /* То, у чего есть подсказка, должно быть видно, что её можно вызвать, — и с клавиатуры тоже: подсказка открывается по Tab и Enter. */ .hastip{cursor:help;border-bottom:1px dotted var(--txt-dim)} .hastip:hover,.hastip:focus{border-bottom-color:var(--accent);outline:none} .hastip:focus-visible{outline:1px solid var(--accent);outline-offset:2px} /* «?» у заголовка — за ним пояснение раздела. Знак рисуется здесь, а не текстом (см. App.qchip). В заголовке-строке отступ даёт сам заголовок. */ .qchip{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:8px; border-radius:50%;border:1px solid var(--line);color:var(--txt-dim);background:transparent; font:800 11px/1 var(--man);letter-spacing:0;text-transform:none;cursor:help; vertical-align:2px;flex:none} .qchip::after{content:"?"} .qchip.hastip{border-bottom:1px solid var(--line)} .qchip:hover,.qchip:focus,.qchip.hastip:hover,.qchip.hastip:focus{border-color:var(--accent);color:var(--accent)} .sechead h2 .qchip,.sechead2 h3 .qchip{margin-left:0} /* На телефоне пальцу нужно больше 18 пикселей: поле нажатия шире знака. */ @media(max-width:760px){.qchip{position:relative} .qchip::before{content:"";position:absolute;inset:-10px}} /* ════════════════ карточка игрока по наведению (App: pcBuild) ════════════════ Лежит в body, как подсказка: таблица с прокруткой её бы обрезала. Внутренние классы — с приставкой nc-: .row, .top, .k уже заняты общими стилями, а .pcard — разведкой в лобби. */ .nickcard{position:absolute;z-index:310;width:318px;max-width:calc(100vw - 16px); background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent); border-radius:6px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:14px 16px 12px; font-family:var(--man);font-size:13px;line-height:1.35;color:var(--txt); text-align:left;text-transform:none;letter-spacing:0} .nickcard .nc-top{display:flex;gap:12px;align-items:center} .nickcard .nc-ava{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none; background:hsl(205,30%,24%);border:2px solid hsl(205,42%,46%);display:grid;place-items:center; font:600 19px var(--ost);color:hsl(205,48%,80%)} .nickcard .nc-ava img{width:100%;height:100%;object-fit:cover;display:block} .nickcard .nc-who{min-width:0;flex:1} .nickcard .nc-nm{font:600 19px var(--ost);letter-spacing:.04em;color:#fff;line-height:1.1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nickcard .nc-tm{font-size:12px;color:var(--txt-dim);margin-top:4px;display:flex;align-items:center; gap:6px;min-width:0} .nickcard .nc-tm .tface{width:18px;height:18px;flex-basis:18px;font-size:8px} .nickcard .nc-tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nickcard .nc-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:13px 0 10px} .nickcard .nc-nums div{background:var(--panel-2);border-radius:4px;padding:7px 4px 6px;text-align:center} .nickcard .nc-nums b{display:block;font:600 17px var(--ost);color:#fff;line-height:1.1} .nickcard .nc-nums b.up{color:var(--win-t)} .nickcard .nc-nums b.down{color:var(--loss-t)} .nickcard .nc-nums b .na{font-size:12px} .nickcard .nc-nums span{font-size:9.5px;color:var(--txt-dim);letter-spacing:.1em; text-transform:uppercase;font-weight:800} .nickcard .nc-row{display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:12.5px;padding:5px 0;border-top:1px solid var(--line);min-height:28px} .nickcard .nc-k{color:var(--txt-dim)} .nickcard .nc-form{display:flex;gap:3px} .nickcard .nc-form i{width:13px;height:13px;border-radius:2px;background:#2bb673} .nickcard .nc-form i.l{background:#d6344a} .nickcard .nc-form i.d{background:#5b6b7c} .nickcard .nc-rk .rpb{transform:scale(.92);transform-origin:right center} .nickcard .nc-go{display:flex;justify-content:space-between;align-items:center;gap:10px; margin-top:9px;font-size:11.5px;color:var(--txt-dim)} .nickcard .nc-go a{color:var(--accent);font-weight:800;letter-spacing:.06em; text-transform:uppercase;font-size:11px;text-decoration:none;white-space:nowrap} .nickcard .nc-go a:hover{color:var(--accent-hi)} /* ─────────────── живая мини-карта ─────────────── Стоит в двух местах — на главной и в лобби, — поэтому стили общие. */ .lmapbox{position:relative;aspect-ratio:1/1;background:var(--bg); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .lmapimg{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;opacity:.62} svg.lmap{position:absolute;inset:0;width:100%;height:100%;display:block} svg.lmap .lkill.age0{opacity:1} svg.lmap .lkill.age1{opacity:.62} svg.lmap .lkill.age2{opacity:.4} svg.lmap .lkill.age3{opacity:.24} svg.lmap .lshot{stroke:var(--txt);stroke-width:3;opacity:.5} svg.lmap .lshot.ct{stroke:var(--ct)} svg.lmap .lshot.tt{stroke:var(--t)} svg.lmap .lfrom{fill:var(--ct)} svg.lmap .lfrom.tt{fill:var(--t)} svg.lmap .ldead{fill:none;stroke:var(--loss);stroke-width:5} svg.lmap .ldead.ct{stroke:var(--ct)} svg.lmap .ldead.tt{stroke:var(--t)} /* ════════════════ клипы моментов ════════════════ Плеер и плейлист рядом, как хайлайты на Allstar: видео слева, список справа, текущий момент подсвечен, у следующего пометка «дальше». */ .clipbox{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px; background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px} .clipstage{min-width:0} .clipstage video{display:block;width:100%;aspect-ratio:16/9;background:#000; border-radius:var(--r)} .clipcap{margin-top:8px;font-size:13px;color:var(--txt-dim);display:flex; align-items:baseline;gap:8px;flex-wrap:wrap} .clipcap b{color:#fff;font-family:var(--ost);font-weight:600;font-size:16px; letter-spacing:.06em;text-transform:uppercase} /* Ссылки в подписи клипа — на телефоне это цели для пальца, а строчка текста высотой 17 пикселей ею не является. Даём вертикальный запас padding-ом, а отрицательным margin-ом возвращаем строку на место, чтобы подпись не разъехалась. */ .clipcap a.plink,.clipcap .cgo{display:inline-block;padding:5px 2px; margin-top:-5px;margin-bottom:-5px} .clipcap a.plink{color:var(--txt)} .clipcap .cgo{margin-left:auto;font-size:12px} .clipcap .vote{font:700 12px var(--man);letter-spacing:.06em;padding:4px 10px; border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--txt); cursor:pointer;text-transform:none} .clipcap .vote:hover{border-color:var(--accent)} .clipcap .vote.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .clip .ck.k-reel{background:var(--accent);color:var(--on-accent)} .clipstage button.small{margin-top:10px} .cliplist{display:flex;flex-direction:column;gap:6px;max-height:480px;overflow:auto; min-width:0} .clip{display:grid;grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ck cw tag" "ck cm tag";gap:2px 10px;align-items:center; text-align:left;background:var(--panel-2);border:1px solid var(--line); border-radius:var(--r);padding:8px 10px;text-transform:none;letter-spacing:0; font-weight:600;font-size:13px;color:var(--txt);cursor:pointer} .clip:hover:not(:disabled){background:var(--panel-3);border-color:var(--txt-dim)} .clip.on{border-color:var(--accent);background:var(--accent-bg)} .clip .ck{grid-area:ck;font-family:var(--ost);font-size:11px;letter-spacing:.1em; text-transform:uppercase;padding:4px 7px;border-radius:3px;background:var(--panel-3); color:var(--txt);white-space:nowrap} .clip .ck.k-ace{background:var(--loss);color:#fff} .clip .ck.k-quad{background:var(--accent);color:var(--on-accent)} .clip .ck.k-clutch{background:var(--win);color:var(--on-accent)} .clip .ck.k-knife{background:var(--txt);color:var(--bg)} .clip .ck.k-ninja{background:var(--accent-hi);color:var(--on-accent)} .clip .cw{grid-area:cw;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clip .cm{grid-area:cm;font-size:11px;color:var(--txt-dim);font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clip .tag{grid-area:tag;font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-hi);font-weight:800;min-width:0} /* Выбранная строка клипа — это