/* ============================================================================ Тема «Тематическая» (data-ui-skin="zone") Второй облик интерфейса рядом с классическим. Классика остаётся ровно такой, какой была: 230 живых пользователей к ней привыкли, и менять вид без спроса нельзя. Всё, что здесь написано, действует ТОЛЬКО когда на стоит data-ui-skin="zone". Откуда взялся визуальный язык: с официальных сайтов игры. На stalzone.net заголовки набраны узким гротеском заглавными с крупным трекингом (Bebas Neue 80px / трекинг 8px), текст — Roboto, белый не чистый, а тёплый #ECE7E1 — цвет выгоревшей бумаги. На официальном статус-мониторе фон это фотография Зоны под сильным затемнением, а карточки полупрозрачные. Bebas Neue заменён на Oswald: у бесплатной версии Bebas нет кириллицы. Акцент — охра #C9822E. Янтарь занят конкурентом (у stalzoneauction.ru #c98500 — практически он же), а кислотно-зелёный спорил бы с зелёным цветом роста. ДОСТУПНОСТЬ — не украшение, а требование. Владелец проекта дальтоник, аудитория почти сплошь мужская (дальтонизм у ~8%). Поэтому: • направление цены НИКОГДА не держится на одном цвете — есть стрелка, знак и разная светлота (рост 0.56, падение 0.31); • красный заменён фиолетовым: красный с зелёным сливаются при дейтеранопии, самом частом типе; • все контрасты посчитаны по WCAG, а не подобраны на глаз. Минимум 4.5:1 для текста; значения указаны в комментариях у соответствующих правил. ========================================================================= */ @import url('/static/fonts/fonts.css'); /* ── Токены ────────────────────────────────────────────────────────────── Переопределяем те же переменные, что использует классическая тема, — поэтому большая часть интерфейса перекрашивается сама, без правки каждого правила. */ html[data-ui-skin="zone"] { --bg: #0B0B0C; /* Панели плотнее (.90 вместо .80) — это плата за более светлый фон между ними. Текст лежит на панелях, поэтому его контраст зависит от их плотности, а не от яркости кадра: приглушённый держит 5.0:1, охра 4.7:1 при норме 4.5. Фотография при этом работает в промежутках и по краям, где текста нет. */ --bg2: rgba(20,20,22,.93); --bg3: rgba(28,28,31,.94); --border: rgba(236,231,225,.10); --border2: rgba(236,231,225,.18); --text: #ECE7E1; /* тёплый белый, не #FFF */ --muted: #9C968E; /* 4.9:1 на панели — читается */ --accent: #C9822E; /* охра */ --green: #8FD4A2; /* рост: светлее падения */ --red: #A98BC4; /* падение: фиолетовый вместо красного */ --yellow: #D9B23F; --purple: #A98BC4; --shadow: 0 10px 30px rgba(0,0,0,.55); --tracking-caps: .12em; --radius: 4px; /* почти прямые углы: техника, не аппка */ /* Ширина контента: было 1760 px, отчего на экране 1920 оставалось по 80 px полей с каждой стороны. С плоской заливкой это не читалось, но поверх фотографии пустые поля бросаются в глаза сразу. 1880 оставляет по 20 px — рамка, а не поля. Совсем убирать потолок нельзя: на мониторах 2560+ строки таблицы растянутся так, что глаз перестанет связывать название предмета с ценой в конце строки. */ --content-max: 1880px; color-scheme: dark; } /* ── Ширина контента при увеличенном масштабе ──────────────────────────── Масштаб интерфейса (меню шапки, 125% и 150%) сделан через `zoom` на корневом элементе. Беда в том, что ширина контента задана в vw (`width: min(--content-max, calc(100vw - 48px))`), а единицы vw зум НЕ учитывают: при 125% контейнер занимает 1880 × 1.25 = 2350 физических пикселей на экране в 1920, и правая колонка уезжает за край. Проценты, в отличие от vw, считаются от родителя, который зум уже учёл. Поэтому ширину задаём в них — контент остаётся в экране при любом масштабе. */ html[data-ui-skin="zone"] .main, html[data-ui-skin="zone"] .wrap { width: min(var(--content-max), calc(100% - 48px)) !important; max-width: calc(100% - 48px) !important; margin-left: auto; margin-right: auto; } /* Та же ловушка в сетке главной: боковая колонка задана как clamp(430px, 30vw, 560px) — при увеличенном масштабе 30vw считается от исходного вьюпорта и колонка получается шире доступного места. Проценты берутся от .main, который зум уже учёл. */ @media (min-width: 1101px) { html[data-ui-skin="zone"] .main { grid-template-columns: minmax(0, 1fr) clamp(320px, 26%, 520px); } } /* ── Фотофон ───────────────────────────────────────────────────────────── Приём официального статус-монитора: фиксированный кадр на весь экран и сильное затемнение поверх. Затемнение слабее, чем у них (90/80/95): наш кадр — закат в тумане, он тёмный сам по себе, и под их градиентом от него не остаётся ничего. 66% в середине — самое светлое, при котором приглушённый текст в панелях держит 4.8:1, а охра 4.5:1. position:fixed, а не background-attachment:fixed — второй способ заметно тормозит прокрутку на телефонах и в Safari. */ html[data-ui-skin="zone"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: url('/static/zone-bg.webp') center / cover no-repeat; pointer-events: none; } html[data-ui-skin="zone"] body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Было 82/66/88 — на коротких страницах («Выгодные лоты» это 1129 px при экране 900) весь градиент виден разом, включая тёмные края, и страница выглядела заметно мрачнее длинной главной, где при прокрутке всё время видна светлая середина. Сняли по 10 пунктов: фон между панелями стал в полтора раза светлее (0.096 → 0.147 по яркости). Контраст при этом не пострадал — наоборот, вырос, потому что панели одновременно стали плотнее (см. --bg2). */ /* Третий подход к этому градиенту, и вот почему. Сначала было 82/66/88 — «Выгодные лоты» выглядели мрачнее прочих. Потом 72/48/76 — стало светлее в середине, но края остались тёмными, и на короткой странице (лоты это 1172 px при экране 910) нижний край занимает заметную часть экрана. Разброс яркости фона выходил двукратным: 0.068 внизу против 0.147 в середине — глаз читает это как «темнее». Теперь 58/42/58: перепад всего в полтора раза, страница ровная по всей высоте. Контраст не пострадал — панели уплотнены до .93 (см. --bg2). */ background: linear-gradient(180deg, rgba(11,11,12,.58) 0%, rgba(11,11,12,.42) 45%, rgba(11,11,12,.58) 100%); } html[data-ui-skin="zone"] body { background: var(--bg); font-family: 'Roboto', system-ui, -apple-system, sans-serif; } /* ── Базовый шрифт ─────────────────────────────────────────────────────── Правило со звёздочкой намеренно: в вёрстке, накопленной за год, десятки мест со своими шрифтами (Inter, JetBrains Mono, Segoe UI) — в модалках, тизерах, подсказках. Перечислять их поимённо бесполезно: аудит находил новые после каждой правки. Специфичность здесь минимальная (0-1-0), поэтому любое правило темы ниже с классом её перебивает — заголовки остаются Oswald, цены моноширинными. Работает это только потому, что тема подключена ПОСЛЕ стилей страницы: при равной специфичности побеждает тот, кто идёт последним. */ html[data-ui-skin="zone"] * { font-family: 'Roboto', system-ui, -apple-system, sans-serif; } /* Клавиши в окне горячих клавиш — моноширинные по смыслу, просто своим. */ html[data-ui-skin="zone"] .shortcut-key, html[data-ui-skin="zone"] kbd, html[data-ui-skin="zone"] code { font-family: 'Roboto Mono', ui-monospace, monospace; } /* ── Типографика ───────────────────────────────────────────────────────── Заголовки и любые управляющие подписи — Oswald заглавными с трекингом. Это фирменный приём официального сайта и то, чего нет ни у одного конкурента: у stalzone-monitor основной шрифт Poppins, у lunar-zone вообще системный Segoe UI. */ html[data-ui-skin="zone"] h1, html[data-ui-skin="zone"] h2, html[data-ui-skin="zone"] h3, html[data-ui-skin="zone"] .hdr-brand, html[data-ui-skin="zone"] .header-title, html[data-ui-skin="zone"] .stat-label, html[data-ui-skin="zone"] .quick-btn, html[data-ui-skin="zone"] .tab, html[data-ui-skin="zone"] th { font-family: 'Oswald', 'Roboto', sans-serif; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 500; } /* Числа — моноширинные с табличными цифрами: колонки цен не «пляшут». */ html[data-ui-skin="zone"] .stat-value, html[data-ui-skin="zone"] .price, html[data-ui-skin="zone"] td.num, html[data-ui-skin="zone"] .c-num { font-family: 'Roboto Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* Крупные показатели сводки набираем Oswald — он даёт нужный вес цифре. */ html[data-ui-skin="zone"] .stat-value { font-family: 'Oswald', sans-serif; letter-spacing: .02em; } /* ── Шапка: один вид на всех страницах ─────────────────────────────────── Историческая беда: шапка написана трижды, разными людьми и в разное время. Рынок использует .hdr-brand и .nav-btn, «Лоты» с «Историей» — .header-title и .back-link, а страницы, собираемые в коде (крафт, точность), — .brand и .nav a. Отсюда и разнобой: логотип то заглавными, то нет, пункты меню разного размера и регистра. Тема сводит все три набора к одному. Разметку при этом не трогаем: три шапки объединить в одну — отдельная работа, и делать её заодно с оформлением значит смешать два разных изменения. */ html[data-ui-skin="zone"] .hdr-brand, html[data-ui-skin="zone"] .header-title, html[data-ui-skin="zone"] .brand { font-family: 'Oswald', sans-serif !important; font-weight: 600 !important; font-size: 19px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--text) !important; text-decoration: none; } /* Пункты меню — единый размер, регистр и разрядка во всех трёх шапках. */ html[data-ui-skin="zone"] .nav-btn, html[data-ui-skin="zone"] .back-link, html[data-ui-skin="zone"] .nav a, html[data-ui-skin="zone"] .header-actions a { font-family: 'Oswald', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; } /* Одинаковая заливка и цвет текста во всех трёх шапках. Расхождение было заметным: на «Истории» и «Лотах» кнопки имеют плотный тёмный фон rgba(20,20,22,.93) и светлый текст, а на «Крафте» и «Точности» фон был почти прозрачным (rgba(255,255,255,.016)) — сквозь него просвечивала подложка, кнопки выглядели серыми, а текст был приглушённым вместо белого. */ html[data-ui-skin="zone"] .nav a, html[data-ui-skin="zone"] .back-link, html[data-ui-skin="zone"] .nav-btn { background: var(--bg2) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; } html[data-ui-skin="zone"] .nav a:hover, html[data-ui-skin="zone"] .back-link:hover, html[data-ui-skin="zone"] .nav-btn:hover { border-color: rgba(201,130,46,.5) !important; color: var(--accent) !important; } /* Активный пункт одинаково подсвечен везде. */ html[data-ui-skin="zone"] .nav-btn.active, html[data-ui-skin="zone"] .back-link.active, html[data-ui-skin="zone"] .nav a.active { color: var(--accent) !important; border-color: rgba(201,130,46,.45) !important; background: rgba(201,130,46,.14) !important; } /* Кнопка смены темы на страницах из кода задана инлайном — приводим к общему. */ html[data-ui-skin="zone"] .nav button[onclick*="toggleTheme"] { border-radius: var(--radius) !important; border-color: var(--border2) !important; background: transparent !important; color: var(--muted) !important; font-size: 13px !important; } /* Полоса состояния данных рядом с логотипом (только на рынке). */ html[data-ui-skin="zone"] .hdr-status { font-size: 11px; letter-spacing: .04em; color: var(--muted); } /* ── Поверхности ───────────────────────────────────────────────────────── Панели полупрозрачные, чтобы фотография читалась сквозь них, но плотные настолько, чтобы текст оставался в норме по контрасту. */ html[data-ui-skin="zone"] .header, html[data-ui-skin="zone"] .stat-card, html[data-ui-skin="zone"] .table-wrap, html[data-ui-skin="zone"] .filter-bar, html[data-ui-skin="zone"] .panel, html[data-ui-skin="zone"] .card { background: var(--bg2); border-color: var(--border); border-radius: var(--radius); backdrop-filter: blur(6px); } /* Все три шапки (.header на рынке и лотах, .top и .site-top на страницах из кода) должны быть одного цвета. Раньше .top и .site-top оставались со своим фоном из старой палитры — на крафте и точности шапка выглядела заметно серее, чем на остальных страницах. */ html[data-ui-skin="zone"] .header, html[data-ui-skin="zone"] header.top, html[data-ui-skin="zone"] header.site-top { background: rgba(11,11,12,.86) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: none; } /* ── Управляющие элементы ─────────────────────────────────────────────── На охряной кнопке надпись только тёмная: белая даёт 3.1:1 и не читается, тёмная — 6.0:1. */ html[data-ui-skin="zone"] .quick-btn, html[data-ui-skin="zone"] .header-btn, html[data-ui-skin="zone"] .page-btn { border-radius: var(--radius); border-color: var(--border2); font-size: 12px; } html[data-ui-skin="zone"] .quick-btn.active, html[data-ui-skin="zone"] .tab.active { color: var(--accent); border-color: rgba(201,130,46,.45); background: rgba(201,130,46,.14); } html[data-ui-skin="zone"] #premium-nav-btn { background: var(--accent); border-color: var(--accent); color: #14130A; font-weight: 500; } /* ── Таблица ───────────────────────────────────────────────────────────── Строки разделяются тонкой линией, а не заливкой: на фотографии чередование полос выглядит грязно. */ html[data-ui-skin="zone"] th { font-size: 11px; color: var(--muted); font-weight: 400; background: transparent; } html[data-ui-skin="zone"] td { border-bottom: 1px solid rgba(236,231,225,.05); } html[data-ui-skin="zone"] tr.item-row:hover td { background: rgba(236,231,225,.028); } /* ── Направление цены ──────────────────────────────────────────────────── Цвет здесь НЕ единственный признак — направление читается ещё и знаком числа («−1%» против «+2.5%»), и разной светлотой: рост 0.56, падение 0.31. Даже на чёрно-белом экране одно заметно светлее другого. Стрелок ▲/▼ здесь намеренно нет, хотя сначала я их добавил. Две причины, обе выяснились на живой странице: 1) ::before у обоих элементов ЗАНЯТ — им рисуется хвостик всплывающей подсказки (.fc-pill[data-tooltip]:hover::before, .signal::before). Стрелка его перебивала, и хвостик торчал постоянно. 2) Треугольников U+25B2/U+25BC нет в Oswald: вместо стрелки рисовался пустой прямоугольник — «тофу», который легко принять за скобку. Если стрелки понадобятся, добавлять их надо в саму разметку, а не псевдоэлементом. */ html[data-ui-skin="zone"] .signal.up, html[data-ui-skin="zone"] .fc-pill.up { color: var(--green); } html[data-ui-skin="zone"] .signal.down, html[data-ui-skin="zone"] .fc-pill.down { color: var(--red); } /* ── Элементы остальных страниц ───────────────────────────────────────── «Лоты», «История», профиль и подписка живут в отдельных шаблонах со своими классами. Переменные они берут общие, поэтому цвет подхватывается сам, а вот формы и шрифты приходится указывать явно. */ html[data-ui-skin="zone"] .chip, html[data-ui-skin="zone"] .back-link, html[data-ui-skin="zone"] .btn, html[data-ui-skin="zone"] .btn-primary, html[data-ui-skin="zone"] .f-group input, html[data-ui-skin="zone"] .f-group select { border-radius: var(--radius); } /* Круглые «пилюли» — язык мобильных приложений; тема держит прямые углы. */ html[data-ui-skin="zone"] .chip { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } html[data-ui-skin="zone"] .chip.on { color: var(--accent); border-color: rgba(201,130,46,.45); background: rgba(201,130,46,.14); } html[data-ui-skin="zone"] .back-link { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .1em; } html[data-ui-skin="zone"] .back-link:hover, html[data-ui-skin="zone"] .back-link.active { border-color: rgba(201,130,46,.5); color: var(--accent); background: rgba(201,130,46,.12); transform: none; /* без подпрыгивания: спокойнее и строже */ } html[data-ui-skin="zone"] .sum-card, html[data-ui-skin="zone"] .filters, html[data-ui-skin="zone"] .alerts-box, html[data-ui-skin="zone"] .panel { background: var(--bg2); border-color: var(--border); border-radius: var(--radius); backdrop-filter: blur(6px); } /* Цветная полоска сверху карточек — из классической темы; здесь она спорит с охряным акцентом и дробит композицию. */ html[data-ui-skin="zone"] .sum-card::before { display: none; } html[data-ui-skin="zone"] .sum-value { font-family: 'Oswald', sans-serif; font-weight: 500; letter-spacing: .02em; } html[data-ui-skin="zone"] .sum-label, html[data-ui-skin="zone"] .f-group label { font-family: 'Oswald', sans-serif; letter-spacing: .14em; } html[data-ui-skin="zone"] .page-head h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } /* ── Страница предмета ─────────────────────────────────────────────────── Самый насыщенный экран: график, сделки, стакан, витрина Premium. Классы здесь свои, поэтому формы и шрифты приходится перечислять явно — найдено аудитом (scripts/build_theme_preview.py + обход элементов). */ html[data-ui-skin="zone"] .item-header-btn, html[data-ui-skin="zone"] .item-toast, html[data-ui-skin="zone"] .item-chart-shell, html[data-ui-skin="zone"] .item-chart-skeleton, html[data-ui-skin="zone"] .chart-tip, html[data-ui-skin="zone"] .isb-cell, html[data-ui-skin="zone"] .gate-preview, html[data-ui-skin="zone"] .gate-preview-item, html[data-ui-skin="zone"] canvas { border-radius: var(--radius); } html[data-ui-skin="zone"] .item-header-btn { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .1em; } /* Числа стакана и сводки — тем же моноширинным, что и остальные цены. */ html[data-ui-skin="zone"] .isb-value, html[data-ui-skin="zone"] .isb-cell, html[data-ui-skin="zone"] .detail-num, html[data-ui-skin="zone"] .v, html[data-ui-skin="zone"] .val { font-family: 'Roboto Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* Кнопки и ссылки, у которых нет своего класса. */ html[data-ui-skin="zone"] a, html[data-ui-skin="zone"] button { border-radius: var(--radius) !important; } /* Формы не наследуют шрифт от body — это правило браузера, а не недосмотр вёрстки. Без явного inherit кнопки уезжают в Arial, а ссылки остаются на том, что задано в шаблоне (там местами Inter и JetBrains Mono). */ html[data-ui-skin="zone"] button, html[data-ui-skin="zone"] input, html[data-ui-skin="zone"] select, html[data-ui-skin="zone"] textarea, html[data-ui-skin="zone"] a { font-family: inherit; } /* Надзаголовок витрины Premium: моноширинный тут ни к чему, это не число. */ html[data-ui-skin="zone"] .premium-gate-kicker, html[data-ui-skin="zone"] .gate-btn { font-family: 'Oswald', sans-serif; letter-spacing: .1em; } /* График рисуется в canvas — скругление задаётся ему стилем страницы. */ html[data-ui-skin="zone"] canvas { border-radius: var(--radius) !important; } html[data-ui-skin="zone"] button.active { color: var(--accent); border-color: rgba(201,130,46,.45); background: rgba(201,130,46,.14); } /* ── Форма углов: общее правило ────────────────────────────────────────── Перечислять классы по одному бессмысленно: их сотни, и каждая страница приносит свои (только на «Крафте» аудит нашёл шестнадцать штук). Тема держит один радиус на весь интерфейс, поэтому задаём его разом. Элементы, которым круглая форма нужна по смыслу — индикаторы, аватары, переключатели, — перечислены исключениями ниже. Их немного, и они стабильны. */ html[data-ui-skin="zone"] div[class], html[data-ui-skin="zone"] section[class], html[data-ui-skin="zone"] aside[class], html[data-ui-skin="zone"] label[class], html[data-ui-skin="zone"] span[class], html[data-ui-skin="zone"] button[class], html[data-ui-skin="zone"] a[class], html[data-ui-skin="zone"] form[class], html[data-ui-skin="zone"] b[class], html[data-ui-skin="zone"] input, html[data-ui-skin="zone"] select, html[data-ui-skin="zone"] textarea, html[data-ui-skin="zone"] table, html[data-ui-skin="zone"] img { /* !important здесь осознанно. Тема — верхний слой поверх готовой вёрстки, накопленной за год, где встречаются и вложенные селекторы, и правила с идентификаторами. Без него приходится угадывать специфичность каждого частного случая и дописывать правила бесконечно — аудит показывал по одному-двум недобитым элементам на каждой странице после каждой правки. */ border-radius: var(--radius) !important; } /* Круглыми остаются только те, где это несёт смысл. */ html[data-ui-skin="zone"] .pulse, html[data-ui-skin="zone"] .dot, html[data-ui-skin="zone"] .avatar, html[data-ui-skin="zone"] .user-avatar, html[data-ui-skin="zone"] [class*="badge-dot"], html[data-ui-skin="zone"] [class*="spinner"], html[data-ui-skin="zone"] [class*="switch"]::after { border-radius: 999px !important; } /* Иконки предметов из каталога игры — их вид тема не меняет. */ html[data-ui-skin="zone"] img.item-icon { border-radius: 2px; } /* Надзаголовки разделов: моноширинный тут не к месту, это не число. */ html[data-ui-skin="zone"] .kicker { font-family: 'Oswald', sans-serif; letter-spacing: .16em; } /* Мелкие подписи и выделения, которым в старой вёрстке достались чужие шрифты (Inter, JetBrains Mono). ВАЖНО: именно 'Roboto', а не inherit. Наследование тянет шрифт от родителя, а он-то как раз и задан Inter — от такой «починки» ничего не меняется. Поймано на живой проверке: правило применялось, селектор совпадал, а шрифт оставался прежним. */ html[data-ui-skin="zone"] span.k, html[data-ui-skin="zone"] .hdr-menu, html[data-ui-skin="zone"] .hdr-menu-row, html[data-ui-skin="zone"] .hdr-menu-row span, html[data-ui-skin="zone"] .hdr-status, html[data-ui-skin="zone"] .hdr-status span, html[data-ui-skin="zone"] b { font-family: 'Roboto', system-ui, sans-serif !important; } /* Бирюза в акцентных выделениях внутри текста. */ html[data-ui-skin="zone"] b, html[data-ui-skin="zone"] .accent, html[data-ui-skin="zone"] .hl { color: var(--accent); } /* …но не там, где выделение просто усиливает обычный текст. */ html[data-ui-skin="zone"] p b, html[data-ui-skin="zone"] li b, html[data-ui-skin="zone"] .proof-txt b, html[data-ui-skin="zone"] td b { color: var(--text); } /* ── Профиль и подписка ────────────────────────────────────────────────── Единственная страница, где цвета вписаны прямо в правила, а не взяты из переменных: бирюза у бейджей и фиолетовый у Premium. Поэтому сама она не перекрашивается и требует явных переопределений. Фиолетовый тут важен отдельно: в теме этот цвет занят падением цены. Если оставить его на кнопке Premium, рядом окажутся два разных смысла в одном цвете — а у нас цвет и так несёт нагрузку для тех, кто различает не все оттенки. */ html[data-ui-skin="zone"] .profile-badge, html[data-ui-skin="zone"] .referral-code-pill, html[data-ui-skin="zone"] .referral-step-num, html[data-ui-skin="zone"] .profile-mini-btn { color: var(--accent); border-color: rgba(201,130,46,.42); background: rgba(201,130,46,.12); } html[data-ui-skin="zone"] .btn-premium, html[data-ui-skin="zone"] a.btn-premium { background: var(--accent); border-color: var(--accent); color: #14130A; /* тёмная надпись: белая на охре даёт 3.1:1 */ font-family: 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase; } html[data-ui-skin="zone"] .plan.premium { border-color: rgba(201,130,46,.45); box-shadow: 0 0 0 1px rgba(201,130,46,.14); } html[data-ui-skin="zone"] .profile-action-kicker, html[data-ui-skin="zone"] .profile-kicker, html[data-ui-skin="zone"] .profile-badge, html[data-ui-skin="zone"] .profile-note { font-family: 'Oswald', sans-serif; letter-spacing: .12em; } /* Кнопка оплаты и выгодный тариф были зелёными. В теме зелёный означает рост цены — держать им ещё и «выгоду» значит размыть единственный цвет, на который человек ориентируется в таблице. Отдаём их акценту. */ html[data-ui-skin="zone"] .pay-btn, html[data-ui-skin="zone"] a.pay-btn { background: var(--accent) !important; border-color: var(--accent) !important; color: #14130A !important; } html[data-ui-skin="zone"] .plan-offer { color: var(--accent); border-color: rgba(201,130,46,.35); background: rgba(201,130,46,.10); } /* ── Иконки вместо эмодзи ─────────────────────────────────────────────── Эмодзи остаются в разметке нетронутыми: классическое оформление должно выглядеть ровно так, как выглядело. Рядом с каждым лежит SVG, и тема меняет местами, что показано. Почему вообще: 🔔 💼 ☀ рендерятся по-разному в Windows, macOS и Android, у них свой цвет и своя оптическая плотность — рядом с текстом они всегда выглядят инородно. SVG наследует цвет текста и живёт в одном весе линии со всем остальным. */ .ic-svg { display: none; } html[data-ui-skin="zone"] .ic-emoji { display: none; } html[data-ui-skin="zone"] .ic-svg { display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ── Цвета, вписанные прямо в разметку ─────────────────────────────────── Несколько мест задают цвет инлайном (предупреждение «данные устарели», зелёная кнопка входа, бирюзовые счётчики). Переменные их не достают, поэтому ловим по самому значению. Красный тут отдельно важен: в теме он означает падение цены и заменён фиолетовым. Оставлять красным ещё и предупреждения — значит вернуть ту самую пару красный/зелёный, которая сливается при дальтонизме. Отдаём предупреждениям жёлтый: он различим при всех типах. */ html[data-ui-skin="zone"] [style*="#f85149"], html[data-ui-skin="zone"] [style*="#F85149"] { color: var(--yellow) !important; } html[data-ui-skin="zone"] [style*="#3fb950"], html[data-ui-skin="zone"] [style*="#3FB950"], html[data-ui-skin="zone"] .bestdeals-cta { color: var(--accent) !important; border-color: rgba(201,130,46,.45) !important; } html[data-ui-skin="zone"] [style*="#00d4ff"], html[data-ui-skin="zone"] [style*="#00D4FF"] { color: var(--accent) !important; } /* Цвета встречаются и в записи rgb(), не только шестнадцатеричной. */ html[data-ui-skin="zone"] [style*="rgb(0, 212, 255)"], html[data-ui-skin="zone"] [style*="rgb(0,212,255)"] { color: var(--accent) !important; } html[data-ui-skin="zone"] [style*="rgb(248, 81, 73)"], html[data-ui-skin="zone"] [style*="rgb(248,81,73)"] { color: var(--yellow) !important; } html[data-ui-skin="zone"] [style*="rgb(63, 185, 80)"], html[data-ui-skin="zone"] [style*="rgb(63,185,80)"] { color: var(--green) !important; } /* Шрифты, заданные прямо в теге: перебить их можно только важностью. */ html[data-ui-skin="zone"] [style*="JetBrains"] { font-family: 'Roboto Mono', ui-monospace, monospace !important; } html[data-ui-skin="zone"] [style*="Inter"], html[data-ui-skin="zone"] [style*="Segoe"] { font-family: 'Roboto', system-ui, sans-serif !important; } /* ── Телефон ───────────────────────────────────────────────────────────── Тема писалась под десктоп, и на узком экране её решения работают против неё же: заглавные с разрядкой занимают на 15% больше места, чем обычный текст, а места как раз нет. Замеры на 375×812 (iPhone), страница «Выгодные лоты»: • навигация выезжала на 652 px при 351 видимых — половина за краем. Прокрутка там есть (вёрстка делает её на ≤720px), но пользователь не видит, что справа что-то осталось; • пять кнопок были ниже 36 px — по рекомендациям для касания нужно 44; • подписи 10.5 px с разрядкой 1.5 px: на телефоне разрядка на таком кегле мешает читать, а не помогает. */ @media (max-width: 768px) { /* .header-actions a обязателен: в блоке шапки он задаёт кегль 13px, и его специфичность (0-2-2) выше, чем у .back-link (0-2-1). Без него половина свойств применялась, а размер шрифта оставался десктопным — поймано замером: отступы менялись, кегль нет. */ html[data-ui-skin="zone"] .nav a, html[data-ui-skin="zone"] .back-link, html[data-ui-skin="zone"] .nav-btn, html[data-ui-skin="zone"] .header-actions a { font-size: 12px !important; letter-spacing: .05em !important; padding: 0 11px !important; min-height: 40px !important; } /* Навигация не влезает целиком (шесть пунктов против 375 px) и уезжает вправо прокруткой. Сама прокрутка в вёрстке есть, но она невидимая: человек не догадывается, что справа что-то осталось. Затемняем правый край — это привычный намёк «здесь продолжение». Маска, а не наложенный градиент: наложение перекрыло бы клики по последней кнопке. */ html[data-ui-skin="zone"] .header-actions, html[data-ui-skin="zone"] .nav { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%); } /* Логотип уступает место навигации. */ html[data-ui-skin="zone"] .hdr-brand, html[data-ui-skin="zone"] .header-title, html[data-ui-skin="zone"] .brand { font-size: 16px !important; letter-spacing: .12em !important; } /* Цель для пальца: 44 px — иначе промахи по соседним строкам. Перечисление по маске [class*="chip"] намеренно: чипов в проекте несколько семейств (.chip, .history-filter-chip, .craft-chip), и они продолжают появляться — на «Истории» замер нашёл четыре штуки по 32 px. */ html[data-ui-skin="zone"] .chip, html[data-ui-skin="zone"] [class*="chip"], html[data-ui-skin="zone"] .quick-btn, html[data-ui-skin="zone"] .btn, html[data-ui-skin="zone"] .btn-primary, html[data-ui-skin="zone"] .tab { min-height: 44px; padding-left: 14px; padding-right: 14px; } /* Таблицы шире экрана и живут в прокручиваемой обёртке (на «Истории» это 410 px за краем). Тот же намёк на продолжение, что и у навигации. */ html[data-ui-skin="zone"] .table-wrap { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); } /* Мелкие подписи: кегль чуть крупнее, разрядка меньше. */ html[data-ui-skin="zone"] .sum-label, html[data-ui-skin="zone"] .stat-label, html[data-ui-skin="zone"] .f-group label, html[data-ui-skin="zone"] th { font-size: 11px !important; letter-spacing: .08em !important; } /* Фон: кадр горизонтальный (1920×1078), на вертикальном экране от него видно лишь узкую полосу — около четверти ширины. Показываем ЛЕВУЮ часть, а не центр. Причина в солнце: замер по кадру даёт самую яркую точку на 64% ширины (яркость 253 из 255), и полоса 60-70% вдвое светлее остальных — 112 против 47-52. При показе от центра это пятно упиралось в правый край экрана и читалось как засвет. Берём 15%, а не 25%: медиазапрос покрывает и планшеты, а на 768 px видно уже 53% кадра вместо 26%, и с 25% солнце возвращается в правый край. При 15% в кадр попадают только деревья при любой ширине из этого диапазона — проверено расчётом по яркости полос. */ html[data-ui-skin="zone"] body::before { background-position: 15% 30%; } /* И приглушаем сильнее: на маленьком экране фотография спорит с данными заметнее, чем на большом, где вокруг много воздуха. */ html[data-ui-skin="zone"] body::after { background: linear-gradient(180deg, rgba(11,11,12,.74) 0%, rgba(11,11,12,.62) 45%, rgba(11,11,12,.78) 100%); } } /* ── Значок уверенности в плашке прогноза ──────────────────────────────── В плашке «6ч −0% · 52%» процент уверенности отделён вертикальной чертой (border-left: 1px solid currentColor). Внутри плашки, у которой есть своя рамка, эта короткая чёрточка читается не как разделитель, а как случайно попавшая открывающая скобка — владелец так её и воспринял. Убираем линию, оставляем воздух: пробела достаточно, чтобы число не слипалось с процентом изменения. Заодно чиним шрифт — там был прописан Inter, которого в теме нет. */ html[data-ui-skin="zone"] .fc-pill .fc-trust { border-left: 0 !important; /* Отступ ровно один. В исходной вёрстке их было два — внешний 6px и внутренний 6px, — и разделяла их та самая черта. Убрав черту, я сначала оставил оба: получилось 10 px пустоты вместо прежних 6 до линии, и число уезжало от процента. */ padding-left: 0 !important; margin-left: 5px !important; opacity: .6; font-family: 'Roboto Mono', ui-monospace, monospace !important; font-size: 10px; letter-spacing: 0; } /* ── Остатки чужих шрифтов ─────────────────────────────────────────────── В вёрстке 32 правила с JetBrains Mono и 6 с Inter — они накопились за год и живут под специфичными селекторами, куда базовое правило темы не достаёт. Числам отдаём наш моноширинный, тексту — Roboto. Список собран разбором стилей, а не наугад: почти всё моноширинное — это цены, проценты и время, то есть именно то, где табличные цифры нужны. */ html[data-ui-skin="zone"] .mono, html[data-ui-skin="zone"] .header-meta, html[data-ui-skin="zone"] .proof-row .proof-nums, html[data-ui-skin="zone"] .bd-price-line b, html[data-ui-skin="zone"] .bd-move, html[data-ui-skin="zone"] .bd-target, html[data-ui-skin="zone"] .lot-age, html[data-ui-skin="zone"] .alert-cond, html[data-ui-skin="zone"] .sum-value, html[data-ui-skin="zone"] .isb-value { font-family: 'Roboto Mono', ui-monospace, monospace !important; } html[data-ui-skin="zone"] .header-btn, html[data-ui-skin="zone"] .chart-range-btn, html[data-ui-skin="zone"] .free-note, html[data-ui-skin="zone"] .alerts-hint { font-family: 'Roboto', system-ui, sans-serif !important; } /* ── Мелочи ─────────────────────────────────────────────────────────────── */ html[data-ui-skin="zone"] ::selection { background: rgba(201,130,46,.32); color: var(--text); } html[data-ui-skin="zone"] .ic-svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }