/* ========================================================== 1. ТОКЕНЫ Палитра взята из разведки визуального языка tarkov-market (docs/superpowers/specs/2026-09-15-quest-filters-and-visual-design.md). Главное, что чинится: прежняя пара «фон #22211d / линия #3d3b33» давала контраст 1.44:1 — разделителей фактически не было видно, и список квестов читался сплошной простынёй. Здесь фон уходит глубже, линия поднимается до 1.87:1, весь текст — от 4.9:1. ========================================================== */ :root { color-scheme: dark; /* корпус */ --bg: #0b0c0a; --surface-1: #141711; --surface-2: #1c2018; --surface-3: #22271d; --line: #3a4231; --line-strong: #525c44; /* текст */ --text: #e2ddcb; --text-dim: #a49d85; --text-faint: #6e6a58; /* смыслы: цвет здесь — код состояния, а не украшение */ --accent: #d8a12a; /* акцент, каппа, выбранное */ --ok: #8ab814; /* доступен, прибыль */ /* Выполненный квест. Прежде «выполнен» рисовался тоном #3f5a12 — контраст 2.31:1 к строке, ниже порога 3:1 для нетекстовых элементов, и от «доступен» строка отличалась ТОЛЬКО этой полосой. Новый тон — та же зелёная гамма (hue 84° против 77° у --ok), но выцветшая: насыщенность 26 % против 80 %. Это и читается как «сделано и закрыто», и даёт 5.23:1 к строке, 4.79:1 к фону селекта — хватает и на текст по AA. */ --done: #7a9256; --danger: #d4574a; /* провален, убыток */ --started: #6fb3c9; /* квест начат */ --lightkeeper: #4f8f86; /* квесты Смотрителя */ /* Выходы с карты. Сторона выхода — главное, что игроку надо увидеть с одного взгляда: доступен ли выход ему вообще. Поэтому четыре стороны получают четыре тона, а не оттенки одного. Три из четырёх взяты из уже занятых смыслов, чтобы не плодить палитру: ЧВК — тон «доступно», общий — холодный тон «начато», секретный — костяной цвет текста (единственный светлый акцент, редкий выход и должен выделяться). Новый тон ровно один — дикий: янтарь уже занят метками квестов, красный означает провал. */ --exit-pmc: #8ab814; --exit-scav: #c9762b; --exit-shared: #6fb3c9; --exit-secret: #e2ddcb; /* «Вы здесь» на схеме плана рейда. Владелец 22.09.2026: «сделай точку на карте не белой, а какой-то контрастной, а то она сливается со всем остальным» — и это правда: костяное кольцо стояло тем же тоном, что текст, подписи и светлые постройки схемы, среди янтарных кружков мест. ⚠️ ПУРПУР — ЕДИНСТВЕННЫЙ УЧАСТОК КРУГА, КОТОРЫЙ НА ЭТОМ ЭКРАНЕ НИЧЕМ НЕ ЗАНЯТ, и заводится он именно поэтому, а не ради яркости. Всё остальное уже значит что-то своё: янтарь (--accent) — места, их номера и линия обхода; зелёный (--exit-pmc) — выход для ЧВК; рыжий (--exit-scav) — выход для дикого, рамка «взять с собой»; голубой (--exit-shared) — общий выход, и им же схемы рисуют воду; костяной(--exit-secret) — секретный выход и весь текст; красный (--danger) — провал. Подмешивать шестой смысл в занятый тон нельзя: на этой схеме цвет — код состояния, а не украшение (см. шапку файла). Тон выбран тёплый по краю (hue 328°), а не сине-фиолетовый: фиолетовый рядом с голубым выходом на мелкой метке путается, а пурпур не спутать ни с одним соседом даже при дейтеранопии — у зелёного и янтаря красная составляющая падает в тот же канал, но синей у них нет вовсе. Светлота 62 %: темнее — тонет в серо-зелёной подложке схемы, светлее — розовеет и теряет «сигнальность». Тёмный ореол под меткой оставлен и делает своё дело дальше — на белых постройках светлого пурпура мало. */ --you: #ff3fa8; /* свежесть снимка барахолки */ --fresh-live: #47542f; --fresh-stale: #7d5f1c; --fresh-frozen: #6f3226; /* Совместимость со старыми именами: правила ниже переписаны не все, и алиасы гарантируют, что ни один уцелевший селектор не остался без цвета. Новый код должен использовать токены выше. */ --surface: var(--surface-1); --raised: var(--surface-2); --muted: var(--text-dim); --amber: var(--accent); --gain: var(--ok); --loss: var(--danger); /* типографика: Bender (шрифт игрового UI) Google Fonts не отдаёт — проверено запросом. Chakra Petch — ближайший по характеру из доступных: квадратные плечи, срезанные углы, техничные цифры. Запасные стеки обязательны: без сети интерфейс обязан читаться. */ --font-display: 'Chakra Petch', 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, 'Segoe UI', Arial, sans-serif; /* геометрия: радиус — ноль везде, без исключений. Прямой угол — самая узнаваемая черта интерфейса Таркова. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --chip-h: 26px; --ctrl-h: 34px; /* Минимальная цель нажатия. WCAG 2.2 AA требует 24×24 CSS-пикселя, для пальца рекомендуется 44×44. Чекбокс цели был 15×15, кнопки счётчика 22×22 — мимо порога оба. Держим это одним токеном, потому что на сенсорной ширине он вырастает до 44 сразу для всех мелких целей, а размеры соседних колонок считаются от него же. */ --tap: 24px; /* 1760, а не 1440: с трёхколоночной раскладкой плана рейда (рейл / схема / работа) в старой ширине левая колонка сжималась до нечитаемого — «Ключ от кабинета стоматолога» ломался пополам. Токен общий на всё приложение, остальные вкладки проверены на этой ширине. */ --shell: 1760px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; max-width: 100%; } /* Отсечка горизонтального переполнения — только на html и только через clip: overflow-x: hidden на делает его прокручиваемым контейнером, и position: sticky внутри перестаёт прилипать к экрану (панель фильтров уезжала вверх вместе со страницей). */ html { overflow-x: clip; } body { padding: 16px; } /* Очень слабый шум поверх фона — единственная «фактура» интерфейса. Один inline-SVG data-URI, без файлов и без внешних запросов. Лежит первым ребёнком body, поэтому весь контент рисуется поверх него; pointer-events снят, чтобы слой не ловил клики. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: var(--font-display); } button, select, input, textarea { font-family: var(--font-body); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 0; } .app-shell { max-width: var(--shell); margin: 0 auto; } /* Маркировочная надпись над блоком — «ЦЕЛИ», «НАГРАДЫ», «ТОРГОВЕЦ». Русский капс в узком гротеске без трекинга слипается, отсюда letter-spacing. */ .marker { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } /* Уголки-засечки на панели — как рамки прицела. Приём, которого нет у конкурента; делается двумя псевдоэлементами, без картинок. */ .panel { position: relative; background: var(--surface-1); border: 1px solid var(--line); padding: var(--sp-4); } .panel::before, .panel::after { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid var(--line-strong); pointer-events: none; } .panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } /* Диагональная штриховка на недоступном — второй «тарковский» приём. Заблокированный квест не выцветает в фон (прежний дефект: текст «сначала: …» был нечитаем), а получает фактуру. */ .is-hatched { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(226, 221, 203, .035) 6px 7px); }