:root { /* СВЕТЛАЯ СХЕМА С 19.08.2026 — та же, что в витрине (`web_ui.py`). Значения дублируются, потому что файлы стилей разные; при правке менять ОБА (`70_DIALOG` §7-бис). */ --bg:#E4E7EA; --panel:#F2F4F6; --border:#D1D7DC; --text:#191C1F; /* ПЛАШКИ ОТБОРА — ФИЛЬТРЫ, ПОИСК, ПОРЯДОК, СТРАНИЦЫ. За 20.08.2026 тон прошёл полный круг: #F2F4F6 -> #F8FAFB -> #FCFDFE (светлее, по просьбе) -> и обратно вниз, ТЕМНЕЕ ИСХОДНОГО. Причина: чем светлее плашка, тем хуже на ней виден бледный чип фильтра. Промежуточный заход темнить сами чипы владелец забраковал — «слишком по цветастому». Полоса отбора стала самой тёмной поверхностью страницы, и это честно: она служебная, чипы на ней приподняты, карточки ниже — белые. Своя рамка и свой вторичный текст: на #D3D9DE прежние #D1D7DC и #6F6F6F не читались (замер: подпись давала 3,53 при пороге 4,5). */ --panel-2:#EDF0F2; --border-2:#D1D7DC; --muted-2:#61686F; /* Цвет заголовков — отдельным токеном: они «потушены» до тёмно-серого (правка владельца 22.08.2026), а текст абзацев остаётся чернильным. Замер контраста к листу #E4E7EA: было 13,8 у #191C1F, стало 10,6 — заголовок мягче, но до порога читаемости вчетверо. */ --title:#2A3138; --muted:#6F6F6F; --accent:#D0021B; --accent2:#0e7490; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* INTER ФАЙЛАМИ, А НЕ НАДЕЖДОЙ НА СИСТЕМУ. PDF-кейс набран этими же ПУТЬ СЧИТАЕТСЯ ОТ САМОГО CSS, а не от страницы. Здесь стояло «assets/fonts/…», и браузер шёл в /assets/assets/fonts/ — 404 на все пять начертаний (замер 21.08.2026), сайт рисовался системным шрифтом. Правильный путь — «fonts/…». TTF из `fonts/`; если у посетителя Inter не установлен, страница подставляла системный шрифт, и «копия отчёта» переставала ею быть. Пять начертаний — те же, что регистрирует `xado_case_builder`. */ /* Тонкие начертания (100–250) — из переменного файла: статических легче Light у Inter в нашей поставке нет. Диапазон намеренно не доходит до 300, чтобы обычный текст по-прежнему брал статический Light и вид страницы не менялся. */ /* ОДИН ВАРИАТИВНЫЙ ШРИФТ ВМЕСТО ШЕСТИ ФАЙЛОВ (23.08.2026, по аудиту). Было: вариативный TTF на диапазон 100–250 плюс пять статических начертаний — 3,7 Мб, больше, чем весь остальной сайт без сканов и PDF. Стало: `Inter-Variable.woff2`, 342 Кб на все веса 100–900. Проверено по самому файлу: ось `wght` идёт от 100 до 900, ось `opsz` от 14 до 32, кириллица и украинские буквы на месте. WOFF2 понимают все браузеры с 2016 года; запасной TTF не держим — лишние 856 Кб ради машин, которых на промышленной витрине нет. */ @font-face { font-family:Inter; font-weight:100 900; font-display:swap; src:url("fonts/Inter-Variable.woff2") format("woff2"); } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.5; } .wrap { max-width:1180px; margin:0 auto; padding:0 20px; } /* ШАПКА В ЦВЕТ ФОНА И БЕЗ РАЗДЕЛИТЕЛЕЙ (требование владельца 19.08.2026). Полоса другого тона с линией снизу отрезала логотип от страницы и читалась как чужой элемент. */ /* Лёгкая тень вместо линии: шапка липкая, и при прокрутке под неё уезжает содержимое — без тени граница читалась только по обрезанным буквам (решение владельца 19.08.2026). */ /* Фон шапки — В ТОН БЛОКАМ ФИЛЬТРОВ (правка владельца 20.08.2026). Шапка и полоса отбора стоят встык и обе служебные; один тон делает из них одну панель управления, а белые карточки под ней — то, ради чего страница открыта. */ .top { border-bottom:0; background:var(--panel-2); position:sticky; top:0; z-index:5; box-shadow:0 2px 10px rgba(25,28,31,.09); } .top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; /* Плашка ВПЛОТНУЮ К ВЕРХНЕМУ КРАЮ — как в шапке PDF-кейса, где красный прямоугольник срезан краем листа. Отступ сверху нулевой у всей полосы, поэтому кнопки языка выравниваются по верху, а не по центру. */ padding-top:0; padding-bottom:16px; } /* ЛОГОТИП ПО ЛЕВОМУ КРАЮ КОЛОНКИ — как лист отчёта и как каталог (правка владельца 19.08.2026): расстояние от края страницы обязано быть одинаковым на всех страницах. Прежний отступ 14 px сдвигал плашку вправо относительно содержимого. Зазор увеличен ровно на снятые 14 px, чтобы заголовок остался на прежнем месте. */ .brand { display:flex; align-items:center; gap:28px; padding-left:0; } /* ССЫЛКИ-КАРТИНКИ. Знак в шапке, знак в подвале и точка на карте — это ссылки, внутри которых нет текста, и своего цвета им никто не задавал: браузер держал их синими, а подвальной ещё и рисовал подчёркивание под картинкой. На глаз это заметно только в подвале, но чинится одинаково (ревизия 22.08.2026). На странице кейса знак в шапке свёрстан иначе — `div.brand > a` без класса, — поэтому в отборе есть и он. */ .brand-a, .brand > a, .foot-logo-a, .pin { color:inherit; text-decoration:none; } .brand-a { display:block; line-height:0; } .logo { display:block; height:52px; width:auto; } /* Название НЕ ПЕРЕНОСИТСЯ: разорванное на «XADO VALIDATION &» и «TEST REPORTS» оно читается как две строки мелкого текста рядом с крупной плашкой, а не как имя сайта. На узком экране прячется целиком. */ .brand span { font-weight:500; font-size:14px; color:var(--text); letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; } @media (max-width:720px) { .brand span { display:none; } .logo { height:40px; } } .langs { padding-bottom:0; } /* Кнопка языка стоит на общей базовой линии ТЕКСТОМ, а не рамкой: рамка у неё своя и опускается ниже строки, как у всякой кнопки. */ .langs { display:flex; gap:6px; flex-wrap:wrap; } /* ВЫПАДАЮЩИЙ СПИСОК ЯЗЫКОВ. Свёрнутый вид — код языка с уголком, раскрытый — полные названия по строке на язык. Держится на фокусе и наведении: скрипта на статических страницах нет, а `
` не закрывается щелчком мимо. */ /* НАЗВАНИЕ ВИТРИНЫ — ЗАГОЛОВОК СТРАНИЦЫ, А НЕ СТРОКА В ШАПКЕ (решение владельца 21.08.2026). У каталога вообще не было `h1`: строка рядом с логотипом повторялась на пятистах страницах и для поиска заголовком не считалась. Кегль тот же, что у `h1` разделов, поэтому отдельного размера здесь нет — только поля. */ /* ЗАГОЛОВОК ТИТУЛЬНОЙ — ТОТ ЖЕ, ЧТО У РАЗДЕЛОВ (правка владельца 22.08.2026: «хочу, чтобы титульная выглядела так по стилю заголовка и вертикальным интервалам»). Замер расхождения: у разделов 38 px тонким начертанием и поля 26/16, на титульной было 32 px жирным и поля 0/10. Правила не копируются — селектор просто дописан к тому же объявлению (`45_SITE` §0). */ .lang-dd { position:relative; display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:5px 9px 5px 10px; font-size:14px; outline:none; } .lang-dd:hover, .lang-dd:focus-within { color:var(--text); } /* МОСТИК ЧЕРЕЗ ЗАЗОР. Между кнопкой и списком 5 px пустоты, и пока курсор их пересекал, наведение срывалось — список захлопывался раньше, чем мышь доходила до пункта (замечание владельца 21.08.2026). Прозрачная полоска делает область наведения сплошной. */ .lang-dd::after { content:""; position:absolute; left:0; right:0; top:100%; height:9px; } .lang-car { font-size:10px; line-height:1; opacity:.75; } .lang-menu { display:none; position:absolute; right:-1px; top:calc(100% + 5px); min-width:150px; padding:4px; z-index:30; background:#fff; border:1px solid var(--border); border-radius:5px; box-shadow:0 8px 22px rgba(25,28,31,.16); } .lang-dd:hover .lang-menu, .lang-dd:focus-within .lang-menu { display:block; } .lang-btn { display:block; width:100%; background:transparent; color:var(--text); cursor:pointer; border:0; border-radius:3px; padding:6px 10px; font:inherit; font-size:14px; text-align:left; text-decoration:none; white-space:nowrap; } .lang-btn:hover { background:#EEF0F2; text-decoration:none; } /* МЕНЮ. Пункт текущей страницы — не ссылка, а текст: ссылка на саму себя обещает переход, которого нет. ВЫРАВНИВАНИЕ ПО ОДНОЙ ЛИНИИ С НАЗВАНИЕМ (правка владельца 20.08.2026). Полоса шапки прижата к верху (`align-items:flex-start` ради плашки логотипа), поэтому меню само выходит на строку названия отступом сверху, а не выключкой: центрировать всю полосу нельзя — уедет плашка. Разделители — псевдоэлементом, а не отдельным узлом: так первый пункт остаётся первым и в разметке, и для чтения с экрана. */ /* Отступ сверху ставит меню НА СТРОКУ НАЗВАНИЯ. Полоса шапки прижата к верху ради красной плашки логотипа, поэтому центрировать её целиком нельзя — уедет плашка. Число не подобрано на глаз: название занимает 20…52 px от верха полосы, его середина 36, высота строки меню 20, отсюда 36 − 10 = 26. Меняете кегль названия — пересчитайте. */ .nav { display:flex; align-items:baseline; gap:0; flex-wrap:wrap; margin:0 0 0 auto; padding:0 22px 0 0; } .nav-l { color:var(--muted); text-decoration:none; font-size:13.5px; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; padding:0 14px; } .nav-l + .nav-l { border-left:1px solid var(--border); } .nav-l:hover { color:var(--text); text-decoration:none; } .nav-l.on { color:var(--text); font-weight:500; } @media (max-width:900px) { .nav { margin:10px 0 0; width:100%; padding:0; } .nav-l:first-child { padding-left:0; } } /* Заметка об исторических названиях и рекомендация — один вид: это оба служебные пояснения, а не результат испытаний. */ .legacy { color:var(--muted); font-size:13.5px; max-width:70ch; border-left:3px solid var(--border); padding-left:14px; margin:26px 0; } /* СОВРЕМЕННЫЙ АНАЛОГ. Красную полосу слева убрали (правка владельца 20.08.2026): красный на листе кейса означает РЕЗУЛЬТАТ — цифры HERO, черта у вывода комиссии, — и на рекомендации он обещал не то. Вместо полосы — снимок продукта слева. Нет снимка — блок остаётся текстовым и не ломается. */ .rec { display:flex; align-items:center; gap:20px; margin:26px auto 0; max-width:920px; padding:18px 20px; background:var(--panel); } .rec-img { flex:0 0 96px; width:96px; } .rec-img img { display:block; width:100%; height:auto; } .rec-b { min-width:0; } .rec-t { font-size:12.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin:0 0 6px; } .rec-n { font-size:15px; font-weight:500; margin:0; } .rec-n a { color:var(--text); text-decoration:none; } .rec-n a:hover { color:var(--accent); text-decoration:underline; } .rec-d { color:var(--muted); font-size:13px; margin:8px 0 0; } /* БЛОК «СОВРЕМЕННЫЙ АНАЛОГ» — ЧУТЬ ГОЛУБЕЕ ЛИСТА (правка владельца 22.08.2026), тем же семейством, что фильтр «Оборудование»: тон #EDF3FA, рамка #DCE7F3. Плашки узлов под ним — того же оттенка, чтобы блок и его теги читались как одно целое. */ /* БЕЗ ЗАЛИВКИ, НО С ЛИНЕЙКАМИ (правка владельца 23.08.2026). Голубое поле под блоком владелец забраковал; вместо него — линейки сверху и снизу того же холодного тона, что фон фильтров, и потолще обычных: 2 px против 1. */ /* ЕДИНЫЙ ШАГ 18 px И ОДНА РАМКА НА ВЕСЬ БЛОК (правка владельца 23.08.2026). Нижняя линейка стояла между составами и строкой «Как обрабатывают такие узлы» — строка оказывалась снаружи блока, хотя относится к нему. Теперь верхняя черта у `.rec`, нижняя — у `.rec-m`, и всё, что между ними, живёт одним блоком с одинаковыми отступами. Разделителей внутри нет: ряды разводит воздух. */ .rec { background:none; border:0; border-radius:0; border-top:2px solid var(--border); padding:18px 0 0; } .rec-l-img li { border-top:0; padding:0; } /* Селектор с тегом `a`: правило `.wc-tag.unit` идёт ниже по файлу и с тем же весом перебивало бы этот тон. */ .rec-m a.wc-tag { background:#E2EBF6; color:#23354D; } .rec-m a.wc-tag:hover { background:#D2E0F0; color:#182636; } /* СОСТАВЫ В ДВЕ КОЛОНКИ (правка владельца 22.08.2026). В одну они растягивали блок на треть экрана при том, что справа пустовало полполосы. Разделители при этом переехали с горизонтальных линий на вертикальную между колонками — иначе в сетке они рвутся. */ .rec-l-img { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px 22px; margin:18px 0 0; } .rec-l-img li { display:flex; align-items:center; gap:12px; border-top:0; padding:8px 0; } .rec-l-img li:nth-child(2) { border-top:0; } @media (max-width:720px) { .rec-l-img { grid-template-columns:1fr; } } /* Банка у каждой строки: 40 px, у одиночного состава — прежние 96. */ .rec-th { flex:0 0 40px; width:40px; height:auto; display:block; } .rec-l { list-style:none; margin:6px 0 0; padding:0; } .rec-l li { padding:6px 0; border-top:1px solid var(--border); } .rec-l li:first-child { border-top:0; } /* Сетка составов идёт БЕЗ внутренних линеек — правило стоит после общего `.rec-l li`, иначе оно бы его не перебило (правка владельца 23.08.2026: «разделитель убрать»). Шаг тот же 18 px, что и всюду в блоке. */ .rec-l.rec-l-img li { border-top:0; padding:0; } .rec .rec-t { margin:0 0 18px; } .rec-l a { color:var(--text); text-decoration:none; font-size:15px; font-weight:500; } .rec-l a:hover { color:var(--accent); text-decoration:underline; } .rec-l span { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; } @media (max-width:620px) { .rec { flex-direction:column; align-items:flex-start; } } /* Плитки продуктов и отраслей — та же карточка, что в каталоге. */ .tiles { display:grid; gap:14px; grid-template-columns:1fr; margin:22px 0; align-items:stretch; } /* КАРТОЧКА ТОВАРА. Разметка и классы взяты у карточки каталога (`wc`, `wc-head`, `wc-org`, `wc-foot`), здесь только то, чего в каталоге нет: место под снимок и колонка «подпись — значение». Кнопка внизу выровнена у всех карточек ряда — поэтому `flex` с `margin-top:auto` у подвала, а не просто поток. */ .prod { display:flex; flex-direction:column; } .prod .wc-foot { margin-top:auto; } .prod .prod-dl { margin:0 0 16px; } .prod .wc-equip { font-size:13.5px; line-height:1.45; } /* МЕСТО ПОД СНИМОК резервируется всем карточкам разом, если снимок есть хотя бы у одной: полупустая сетка с разной высотой карточек выглядит поломкой, а не ожиданием файлов. */ /* Снимок слева, название и назначение справа от него. Серой подложки под банкой больше нет: обтравленный снимок лежит прямо на карточке, а подложка делала из него «картинку в рамке». */ .prod-top { display:flex; gap:18px; align-items:center; margin:16px 0 14px; } .prod-img { flex:0 0 84px; height:132px; } .prod-img img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; } .prod-name { min-width:0; } .prod-name .wc-org { margin:0 0 5px; } .prod-name .wc-equip { margin:0; } @media (max-width:420px) { .prod-top { gap:12px; } .prod-img { flex:0 0 64px; height:104px; } } /* ЗНАЧЕНИЕ ПОЛУЖИРНЫМ, подпись — мелкой красной прописной: тот же рисунок, что у панели листа кейса (`sh-lab`/`sh-val`). Правка владельца 21.08.2026: раньше подпись и значение шли одним кеглем и одинаковым начертанием, и глаз не отделял одно от другого. */ .prod-row { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:7px 0; border-top:1px solid var(--border); } .prod-row:first-child { border-top:0; } /* Ссылка на страницу продукта — строкой над кнопкой каталога: она уводит с сайта, поэтому набрана скромнее кнопки. */ .prod-promo { margin:14px 0 0; font-size:14px; } .prod-promo a { color:var(--accent); font-weight:600; text-decoration:none; } .prod-promo a:hover { text-decoration:underline; } /* Подписи строк — ТЁМНО-СЕРЫЕ, а не красные (правка владельца 22.08.2026): красный на карточке товара занят названием состава и ссылками, и три красные подписи подряд спорили с ними. */ .prod-lab { font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:#4A5157; font-weight:700; padding-top:2px; } .prod-val { font-size:14.5px; font-weight:700; color:var(--text); line-height:1.4; min-width:0; } /* НОМЕРА МЕТОДИК ПЕРЕНОСЯТСЯ (правка владельца 23.08.2026): тринадцать номеров через разделитель не влезали в колонку и уезжали за край карточки. Разрешаем перенос и держим номер с точкой вместе. */ .prod-val { overflow-wrap:anywhere; } .prod-val a { white-space:nowrap; } .prod-none { color:var(--muted); font-size:13.5px; margin:0; } /* БЛОК ПРОГРАММЫ — ЕДИНСТВЕННОЕ МЕСТО ВИТРИНЫ СО СВОЕЙ ПАЛИТРОЙ. Цвета сняты пипеткой со снимка попапа xado.com (21.08.2026): #002A58 / #002B5B тёмно-синий, #033C57 переход, #0A823F зелёный в правом нижнем углу, #F4C300 заголовок, кнопка #44CC5B → #42C25D. Исключение оговорено в `45_SITE` §7: блок ведёт на другой сайт, и читатель должен узнать программу, попав туда. */ /* БЛОК ПРОГРАММЫ БЕЗ ЗАЛИВКИ (правка владельца 22.08.2026). Синяя плашка была единственным цветным полем на всей витрине и читалась как чужой баннер. Теперь блок лежит на общем листе, а вместе с заливкой поменялись и цвета надписей: белое по синему на сером стало бы нечитаемым. */ /* Блок отделён линейками сверху и снизу (правка владельца 22.08.2026): без заливки он сливался с прозой страницы. */ .pilot { margin:48px 0 8px; display:grid; grid-template-columns:minmax(0,340px) 1fr; color:var(--text); overflow:hidden; position:relative; /* ЛИНЕЙКИ БЛОКА ПРОГРАММЫ — ЦВЕТОМ КНОПКИ И ТОЛЩЕ (правка владельца 23.08.2026, «color 1=2=3»): верхняя и нижняя черта берут тот же зелёный #44CC5B, что и кнопка «Оставить заявку», и набраны в 3 px. Блок так читается единым целым, а не куском общей прозы. */ border-top:3px solid #44CC5B; border-bottom:3px solid #44CC5B; padding:16px 0 20px; } .pilot-photo { position:relative; min-height:230px; } .pilot-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:18% center; } /* БЕЗ РАЗМЫВКИ ПРАВОГО КРАЯ (правка владельца 22.08.2026). Маска гасила снимок в фон — она была нужна, пока блок лежал на цветной заливке; на общем листе снимок стоит как есть. */ .pilot-body { padding:30px 34px 32px; position:relative; z-index:1; min-width:0; } .pilot-over { font-size:15px; line-height:1.45; margin:0 0 6px; color:var(--muted); max-width:56ch; } /* Название программы — ЭКСТРА БОЛДОМ (900) и РОВНО ЦВЕТОМ КНОПКИ (владелец подтвердил 22.08.2026 после моего замечания о контрасте: #44CC5B на сером листе даёт 1,69 — это ниже порога читаемости, решение принято сознательно). */ .pilot-h { font-size:34px; line-height:1.1; font-weight:900; margin:0 0 18px; color:#44CC5B; letter-spacing:-.01em; } .pilot-rows { display:grid; gap:9px; margin:0 0 22px; max-width:62ch; } /* Колонка подписей сужена со 150 до 118 px, зазор с 14 до 10: между «МЫ ДАЁМ» и значением зияла дыра в полсотни пикселей (замечание владельца 22.08.2026). */ .pilot-row { display:grid; grid-template-columns:118px 1fr; gap:10px; align-items:baseline; } /* Подписи — тот же зелёный, но темнее заголовка: 11,5 px прописными требуют контраста от 4,5, и #18682A даёт 5,54. */ .pilot-lab { font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:#18682A; font-weight:700; } .pilot-val { font-size:14.5px; line-height:1.45; color:var(--text); } .pilot-cta { margin:0; } .pilot-cta a { display:inline-flex; align-items:center; padding:13px 30px; background:linear-gradient(90deg,#44CC5B,#42C25D); color:#fff; font-size:15px; font-weight:700; text-decoration:none; letter-spacing:.3px; } .pilot-cta a:hover { background:linear-gradient(90deg,#3BB94F,#39AE52); color:#fff; text-decoration:none; } @media (max-width:820px) { .pilot { grid-template-columns:1fr; } .pilot-photo { min-height:190px; } .pilot-photo img { -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 60%,transparent 100%); object-position:22% 28%; } .pilot-h { font-size:27px; } .pilot-row { grid-template-columns:1fr; gap:2px; } .pilot-body { padding:22px 20px 26px; } } .dl-row { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 8px; max-width:none; } .dl { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; background:var(--accent); color:#fff; text-decoration:none; font-size:14.5px; font-weight:600; } .dl:hover { background:#B00018; color:#fff; text-decoration:none; } /* КАРТА. Пропорция держится `aspect-ratio`, метки стоят в процентах — поэтому карта тянется по ширине колонки без пересчёта координат. СОСЕДНИЕ БЛОКИ ЗАХОДЯТ НА КАРТУ. Верхние 11 % и нижние 18 % высоты значащего не несут: самая северная метка (Эстония) стоит на 27,8 %, самая южная (Индонезия) — на 63,2 %. Вместо того чтобы гнать пустую штриховку через всю колонку, карта уходит под текст отрицательными полями. Поля заданы в процентах — процент внешнего поля считается от ШИРИНЫ родителя, поэтому доля высоты умножена на 397/718: 16 % × 0,553 = 8,8 % сверху и 29 % × 0,553 = 16,2 % снизу. Нижний заход поднят с 18 до 29 % высоты (разметка владельца 21.08.2026): теги встали на 73 % высоты карты — ниже самой южной метки (Индонезия, 63,2 %) с запасом, но без пустой полосы. КАРТА ЛЕЖИТ НИЖЕ ТЕКСТА. Отрицательный слой (`z-index:-1`) для этого не годится: он опускает карту под содержимое не только при отрисовке, но и при попадании курсора — метки переставали нажиматься вовсе (замер: ни одна из восемнадцати). Поэтому карта остаётся в обычном слое, а соседи поднимаются над ней: следующие за ней — селектором `~`, идущие ПЕРЕД — классом `upmap`, потому что селектора «предыдущий брат» в CSS нет. */ /* Пропорция и положение картинки приходят из расчёта окна (`map_window`) прямо в разметке: они зависят от границ окна, и держать их ещё и здесь значило бы иметь два источника правды. Обрезка — `overflow:hidden`: картинка внутри шире окна. */ .wmap { position:relative; z-index:0; overflow:hidden; margin:-8.8% 0 -16.2%; pointer-events:none; } /* Соседи карты — поверх неё, с обеих сторон. */ .upmap, .wmap ~ * { position:relative; z-index:1; } /* КАРТА УХОДИТ В ЛЕВЫЙ ОБРЕЗ ЛИСТА (правка владельца 21.08.2026). Левое поле считается от середины колонки: `50%` — это её половина, `50vw` — половина окна; разность и есть расстояние до края, минус 8 px зазора. Приём работает при любой ширине окна, пока колонка уже него, — поэтому ниже 1100 px он выключается. */ @media (min-width:1100px) { /* Зазор задан с запасом: `50vw` считает и полосу прокрутки, поэтому половина её ширины съедается. Попытка вычесть полосу через переменную `calc(100vw - 100%)` провалилась — переменная подставляется ТЕКСТОМ, и `100%` считается уже от колонки, а не от окна: зазор раздулся до 71 px. СДВИГ ВЛЕВО НА 50 px (правка владельца 22.08.2026) сделан за счёт этого зазора: карта уходит за левый край экрана, а справа ничего не открывается — её правый край и так лежит за краем колонки. */ .wmap { margin-left:calc(50% - 34px - 50vw); } } .wmap > img { position:absolute; max-width:none; filter:brightness(.80) contrast(1.15) opacity(.85); } /* МЕТКА — ЯКОРЬ РАЗМЕРОМ С ТОЧКУ. Подписи висят на нём абсолютно, поэтому появление плашки НЕ ДВИГАЕТ саму точку: раньше метка была строкой flex, и всплывающая подпись отжимала точку вбок — со стороны это читалось как прыжок. */ .pin { position:absolute; width:var(--d); height:var(--d); transform:translate(-50%,-50%); z-index:1; text-decoration:none; pointer-events:auto; } .pin-dot { position:absolute; inset:0; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px #fff; } /* Имя страны стоит у точки постоянно, самым мелким кеглем. Сторона выбрана при сборке — там, где не мешают соседние подписи и точки (`_place_labels`); кому места не нашлось, помечен `s-q` и молчит до наведения. */ .pin-n, .pin-t { position:absolute; white-space:nowrap; } /* Подпись — такая же цель, как точка: по ней наводят и щёлкают (правка владельца 21.08.2026). Плашка, наоборот, событий не ловит: она всплывает поверх точки, и своя цель ей не нужна. */ .pin-n { pointer-events:auto; } .pin-t { pointer-events:none; } .pin-n { font-size:9px; line-height:1; font-weight:600; color:#3E4348; text-shadow:0 0 3px #fff, 0 0 2px #fff; } .s-r .pin-n { left:calc(100% + 3px); top:50%; transform:translateY(-50%); } .s-l .pin-n { right:calc(100% + 3px); top:50%; transform:translateY(-50%); } .s-b .pin-n { top:calc(100% + 3px); left:50%; transform:translateX(-50%); } .s-t .pin-n { bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); } .s-br .pin-n { left:calc(50% + var(--d) * .35); top:calc(50% + var(--d) * .35); } .s-tr .pin-n { left:calc(50% + var(--d) * .35); bottom:calc(50% + var(--d) * .35); } .s-bl .pin-n { right:calc(50% + var(--d) * .35); top:calc(50% + var(--d) * .35); } .s-tl .pin-n { right:calc(50% + var(--d) * .35); bottom:calc(50% + var(--d) * .35); } .s-q .pin-n { display:none; } /* При наведении плашка встаёт РОВНО НА МЕСТО ТОЧКИ, а точка гаснет (правка владельца 21.08.2026). Ничего не сдвигается — подпись просто сменяется на крупную. */ .pin-t { display:none; left:50%; top:50%; transform:translate(-50%,-50%); font-size:12px; font-weight:600; color:#191C1F; background:#fff; padding:2px 7px; border-radius:3px; box-shadow:0 1px 4px rgba(25,28,31,.28); } .pin-t i { font-style:normal; color:var(--muted); margin-left:5px; } .pin:hover { z-index:3; } .pin:hover .pin-dot { opacity:0; } .pin:hover .pin-n { opacity:0; } .pin:hover .pin-t { display:inline-block; } /* На узком экране подписи слиплись бы: остаётся точка и подсказка. */ @media (max-width:900px) { .pin .pin-n { display:none; } } /* Страны — теми же тегами, что в фильтре каталога (`a.tag` со счётчиком в ``): белый тег, надпись цветом метки на карте; при наведении цвета меняются местами. Своей вёрстки нет — тег уже знает, как себя вести (`45_SITE` §0). ТРИ РЯДА. Восемнадцать тегов общей длиной 1898 px на колонке 1140 px ложились в два ряда. Замер по ширинам: три ряда выходят при ширине блока от 660 до 900 px, поэтому предел — 840 px, с запасом в обе стороны. */ .geo { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; max-width:840px; /* Полупрозрачный белый в покое (правка владельца 21.08.2026): теги стоят на карте, и сквозь них видно её штриховку — они лежат НА листе, а не заслоняют его. Под курсором заливка становится плотной. */ --tone-bg:rgba(255,255,255,.72); --tone-bg-h:#D0021B; --tone-fg:#D0021B; --tone-fg-h:#FFFFFF; } .geo .tag i { opacity:.75; } /* МЕТОДИКИ. Своей палитры и своей сетки нет: плитка — та же `wc`, что в каталоге и в продуктах (`46_METHODS` §7). Здесь только то, чего у карточки кейса не бывает: таблица норм и лестница этапов. */ .m-filter { max-width:none; margin:6px 0 16px; } /* Подпись раздела и теги — по ОДНОЙ левой кромке, и она же кромка текстовой колонки. В каталоге у строки фильтра свои поля (10 px слева у тегов), из-за них «УЗЕЛ» вставал левее самих тегов. */ .m-filter .fx-line { padding:0; } /* Нижнее поле — как у тегов каталога: без него теги упирались в разделительную линию секции. */ .m-filter .fx-tags { padding:8px 0 14px; } .m-filter .fx-name { font-size:13.5px; color:var(--muted-2); flex:none; } .m-filter .tag { cursor:pointer; } .m-full { color:var(--muted); font-size:13.5px; margin:-6px 0 10px; max-width:70ch; } /* Узлы методики — теми же тегами и тем же тоном, что раздел «Узел» в фильтре каталога: тон приходит по `data-fx`, а не переписан здесь (`45_SITE` §0). */ /* Разделительной линии здесь нет: секция фильтра рисует её сама, а под снимком она лишняя (правка владельца 21.08.2026). */ .m-units { margin:8px 0 14px; border:0; } .m-units .fx-tags { padding:0; gap:8px; } .m-cases { margin:10px 0 18px; } .m-list { margin:8px 0 18px; padding-left:20px; line-height:1.65; max-width:74ch; } .m-list li { margin:0 0 6px; } /* Воздух между заголовком раздела и таблицей (правка владельца 21.08.2026): 8 px читались как «таблица приклеена к строке». */ .c-tw { margin:20px 0 26px; } .m-steps { margin:8px 0 20px; padding-left:22px; line-height:1.6; max-width:74ch; } .m-steps li { margin:0 0 10px; } .m-step { display:block; } .m-when { display:block; color:var(--muted); font-size:13px; margin-top:2px; } /* Состав — со снимком банки, как в каталоге продуктов. ВОЗДУХА БОЛЬШЕ, И МЕЖДУ СОСТАВАМИ ЛИНЕЙКА (правка владельца 21.08.2026): два состава подряд без разделителя читались как один абзац с двумя картинками. Линейка та же, что у строк таблиц. */ /* ДВЕ СТРОКИ ФИЛЬТРА (правки владельца 22.08.2026, по разметке на снимке). Внутри блока всё поджато: название сидит у своих чипов, линейка — близко к обеим строкам; зато сам блок отодвинут от лида, чтобы отделяться от текста не воздухом внутри, а полем вокруг. Замеры до правки: лид→название 8, название→чипы 22, чипы→линейка 26, линейка→название 27. Линейка одна, между строками: без неё «оборудование» и «узел» сливались в кучу плашек, и было непонятно, что условий два. */ /* Низ блока: чипы «узла» упирались в нижнюю линейку вплотную (1 px). Отводим те же 6 px, что и везде внутри блока. */ /* Двойной класс — не украшение: `.fx-sec { padding:0 }` стоит в файле ниже и с тем же весом перебивал одиночный `.m-filter`. */ .fx-sec.m-filter { margin-top:22px; padding-bottom:8px; } /* ЗАЗОРЫ БЛОКА — 8 px, КРОМЕ РЯДОВ КНОПОК (правка владельца 22.08.2026, вторая редакция). Между рядами самих кнопок остаётся 6 px — это их собственный `gap`. Остальное сведено к 8: «название → кнопки», «нижняя кнопка → линейка», «линейка → следующее название» и «нижняя кнопка → нижняя линейка». Отступ блока от лида сверху не тронут. */ .m-filter .fx-line { gap:8px; } /* У контейнера кнопок были СВОИ поля — 8 px сверху и 14 снизу (`.m-filter .fx-tags` выше по файлу). Из-за них зазор, который я мерил по коробкам как 6, на глаз выходил 14 и 20: замер шёл между контейнерами, а видно сумму с их полями. Обнуляем — весь отступ теперь задаёт один `gap`. Поймано 22.08.2026. */ .m-filter .fx-tags { padding:0; } /* ОБОРУДОВАНИЕ — СВОИМ ТОНОМ (правка владельца 22.08.2026). Две строки одинаковых серых плашек читались как одна куча; тон берём не новый, а тот же приём, что у фасетов каталога («страна» — сине-фиолетовая, «оценка» — розовая): холодный синий вместо нейтрального серого. Тон добавлен синевы по просьбе владельца 22.08.2026: было #CFD8E3, стало #C4D6EC. Подпись #23354D на нём даёт контраст 8,4, белое на выбранной плашке — 6,2; оба с запасом к порогу 4,5. */ .m-filter .gr-line { --tone:47,98,160; --tone-bg:#C4D6EC; --tone-bg-h:#ADC6E3; --tone-fg:#23354D; --tone-fg-h:#182636; } /* Интервалы сведены к тем же, что в фильтрах каталога: там строка фасета живёт на padding 9/10/8 при зазоре 10 и без собственных полей. Замеры на странице методик до правок: лид→название 8, название→чипы 22, чипы→линейка 26, линейка→название 27; стало 22 / 5 / 8 / 8 (правка владельца 22.08.2026 по разметке). */ .m-filter .fx-line + .fx-line { border-top:1px solid var(--border); margin-top:8px; padding-top:8px; } /* Узлы кейса — плашками в одну строку с подписью; перенос разрешён, иначе на узком экране строка уезжает за край. */ .rec-tags { display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; } .rec-m .wc-tag { text-decoration:none; } /* Ячейка без числа: подпись выходит на место значения и набирается крупнее обычной, иначе рядом с цифрами она теряется. */ .m-cell-txt .m-lab { font-size:16px; line-height:1.35; color:var(--text); padding-top:6px; } /* Чертёж приложения: во всю ширину листа, на белом — чертёж чёрным по белому, и серый фон страницы под ним читался бы как поле листа. */ .ap-fig { margin:22px 0 26px; } .ap-fig picture { display:block; background:#fff; padding:14px 16px; border:1px solid var(--border); } .ap-fig img { display:block; width:100%; height:auto; } .ap-fig figcaption { margin-top:8px; font-size:13px; color:var(--muted); } /* СЧЁТЧИК РАСХОДА. Поля в строку, ответ — таблицей того же вида, что и таблица приложения: он её продолжение, а не отдельная форма. */ .calc { display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-end; margin:18px 0 8px; } .calc-f { display:flex; flex-direction:column; gap:6px; min-width:0; } .calc-f span { font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); } .calc-f select, .calc-f input { font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--border); background:#fff; color:var(--text); border-radius:4px; min-width:0; } .calc-f select { max-width:min(100%, 560px); } .calc-f input { width:150px; } .calc-out { flex:1 1 100%; margin-top:4px; } .calc-out table { margin:0; } .calc-none { color:var(--muted); font-size:14.5px; } .m-none { margin:28px 0 8px; color:var(--muted); font-size:15px; } .m-instr { margin:20px 0 6px; font-size:15px; } .m-instr a { color:var(--accent); font-weight:600; text-decoration:none; } .m-instr a:hover { text-decoration:underline; } .m-apps { list-style:none; padding-left:0; } .m-apps li { padding:14px 0; border-top:1px solid var(--border); } .m-apps li:first-child { border-top:0; } .m-apps a { color:var(--accent); text-decoration:none; font-weight:500; } .m-apps a:hover { text-decoration:underline; } .m-prods { list-style:none; padding-left:0; margin:18px 0 26px; } .m-prod { display:flex; align-items:center; gap:18px; padding:16px 0; margin:0; } .m-prod + .m-prod { border-top:1px solid var(--border); } .m-prod:first-child { padding-top:4px; } .m-prod:last-child { padding-bottom:4px; } .m-pi { flex:none; width:64px; height:74px; display:flex; align-items:center; justify-content:center; } .m-pi img { max-width:100%; max-height:100%; object-fit:contain; } .m-pn { min-width:0; } .m-pf { display:block; color:var(--muted); font-size:13px; margin-top:2px; } .m-src { color:var(--muted); font-size:13.5px; max-width:74ch; margin:18px 0 0; } /* Линейки блока — ОБЫЧНОГО СЕРОГО тона (правка владельца 23.08.2026): холодный синий читался как ещё один смысловой слой, а блок должен отделяться, а не выделяться. Толщина 2 px остаётся. */ .rec-m { margin:0; padding:18px 0; font-size:13.5px; color:var(--muted); border-bottom:2px solid var(--border); } .rec-m a { color:var(--accent); } /* Плитка методики — карточка каталога целиком в ссылке. Название внутри цветом текста, а не ссылки: синей строки в проекте нет. */ .m-tile { display:block; text-decoration:none; color:inherit; } .m-tile:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(26,26,26,.14); } .m-tile .wc-org { color:var(--text); } /* СНИМОК УЗЛА. Слева картинка, справа название — как в карточке продукта; высота фиксирована, чтобы плитки в ряду стояли ровно при любом соотношении сторон снимка. */ /* Воздух между линейкой под номером методики и снимком (правка владельца 21.08.2026): 4 px читались как «картинка приклеена». */ .m-top { display:flex; align-items:center; gap:14px; margin:18px 0 10px; } .m-img { flex:none; width:115px; height:91px; display:flex; align-items:center; justify-content:center; } .m-img img { max-width:100%; max-height:100%; object-fit:contain; } .m-hero { display:flex; align-items:stretch; gap:26px; margin:0 0 10px; } /* ВЫСОТУ СНИМКА ЗАДАЁТ ТЕКСТ СПРАВА (правка владельца 21.08.2026). Гнездо снимка растягивается на высоту колонки текста, а сам снимок лежит в нём абсолютно и вписывается по большей стороне: в высоту он больше колонки не вырастет, а на своей высоте не оставит дыру. Ширина поднята с 228 до 260 px. */ .m-hero-i { flex:none; width:260px; display:flex; flex-direction:column; } /* `align-self:stretch` и явная ширина обязательны: колонка снимка центрирует своих детей, а единственный ребёнок гнезда лежит абсолютно — без растяжки гнездо схлопывалось в нулевую ширину (замер: коробка снимка 0×166). */ .m-hero-ph { flex:1 1 auto; position:relative; min-height:150px; display:block; align-self:stretch; width:100%; } .m-hero-i img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center top; } /* Колонка текста тянется до правого края листа, поэтому лид здесь без общего ограничения в 70 знаков: иначе строка обрывалась бы заметно левее заголовка. */ .m-hero-t { min-width:0; flex:1 1 auto; } /* Верхнее поле заголовка снято: снимок слева и текст справа должны начинаться с одной высоты (замечание владельца 21.08.2026), а воздух над блоком даёт крошка. */ .m-hero-t h1 { margin-top:0 !important; } .m-hero-t .page-lead { max-width:none; } .m-hero-t .m-full { max-width:none; } /* Ссылка в каталог — под снимком, строкой по центру колонки. */ .m-hero-i .m-cases { margin:14px 0 0; font-size:14px; text-align:center; } .m-hero-i .m-cases a { color:var(--accent); text-decoration:none; } .m-hero-i .m-cases a:hover { text-decoration:underline; } /* Узлы — В ОДНУ СТРОКУ. Их редко больше пяти, а перенос делал из строки лесенку (разметка владельца 21.08.2026). Если строка всё же не вмещает, она прокручивается вбок, а не ломается. */ .m-hero-t .m-units { margin:18px 0 0; } .m-hero-t .m-units .fx-tags { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; } /* Столбец снимка: сам снимок и под ним теги узлов, по его оси. */ .m-hero-i { display:flex; flex-direction:column; align-items:center; } .m-hero-i .m-units { margin:14px 0 0; border:0; } .m-hero-i .fx-tags { justify-content:center; } /* Ссылка в каталог — в тон тега фильтра: на светлом листе прежняя заливка почти не читалась (замечание владельца 21.08.2026). */ @media (max-width:620px) { .m-hero { display:block; } .m-hero-i { width:190px; margin:0 0 12px; } .m-hero-ph { min-height:130px; } } .prod-val .sep { color:var(--muted); margin:0 7px; user-select:none; } .prod-val a { color:var(--accent); text-decoration:none; } .prod-val a:hover { text-decoration:underline; } .m-tile .wc-equip { color:var(--muted); } .m-tile { position:relative; padding-bottom:42px; } /* Кегль стрелки поднят с 19 до 27 px (замечание владельца 21.08.2026): на плитке шириной в треть колонки прежняя терялась. */ /* В покое стрелка бледная — это подсказка, а не действие; вспыхивает она только под курсором (замечание владельца 21.08.2026). Тон взят от рамки карточек (#D1D7DC), на полтона темнее — чтобы читалась на белом поле плитки, но не спорила с текстом. */ .m-go { position:absolute; right:26px; bottom:16px; font-size:27px; line-height:1; color:#C3CAD1; transition:color .15s ease, transform .15s ease; } .m-tile:hover .m-go { color:var(--accent); transform:translateX(4px); } /* Ссылки внутри страницы методики — тоном витрины, без синевы и без подчёркивания браузера по умолчанию. */ .m-list a, .m-src a, .rec-m a { color:var(--accent); text-decoration:none; } .m-list a:hover, .m-src a:hover, .rec-m a:hover { text-decoration:underline; } .steps { margin:12px 0 18px; padding-left:22px; line-height:1.7; max-width:70ch; } .steps li { margin:0 0 6px; } .page h3 { margin:26px 0 8px; } .tech-a { margin:14px 0 4px; font-size:15px; } .tech-a a { color:var(--accent); font-weight:600; text-decoration:none; } .tech-a a:hover { text-decoration:underline; } @media (max-width:520px) { .prod-row { grid-template-columns:1fr; gap:2px; } } /* КОЛОНКИ РОВНО ПОПОЛАМ. `1fr` — это `minmax(auto,1fr)`, и широкое содержимое (длинное название состава, ряд номеров методик) раздувало свою колонку: на странице продуктов вышло 617 против 509 px (замечание владельца 22.08.2026). `minmax(0,1fr)` запрещает колонке расти под содержимое. */ @media (min-width:860px) { .tiles { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } .tile { background:#fff; border:1px solid var(--border); padding:20px 22px; } .tile h3 { margin:0 0 8px; font-size:17px; } .tile p { margin:0 0 8px; color:var(--muted); font-size:14px; } .tile dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:12px 0 0; font-size:13.5px; } .tile dt { color:var(--muted); } .tile dd { margin:0; } .tile .tile-n { display:inline-block; margin-top:12px; font-weight:500; } /* Кегль 36 и начертание 200 (правки владельца 22.08.2026). Цвет вернулся к чернильному: тонкий шрифт светлеет сам, и глушить его цветом больше не нужно. */ .page h1, .site-h1 { font-size:36px; line-height:1.22; font-weight:200; /* Разрядка: было −0,015em (текст поджат), стало +0,036em. Прибавка посчитана от ЗАМЕРА, а не на глаз: строка «Методики обработки» на 36 px занимала 328 px; чтобы она стала длиннее на 10 %, на каждый из 18 знаков нужно добавить 1,83 px — это и есть 0,051em сверх прежнего. */ letter-spacing:.036em; color:var(--text); margin:26px 0 16px; } .page h2 { font-size:28px; line-height:1.25; font-weight:200; letter-spacing:.036em; color:var(--text); margin:56px 0 14px; display:flex; align-items:center; gap:13px; } .page h2:first-child { margin-top:26px; } /* Иконка стоит ПО ЦЕНТРУ строки заголовка: у рисунка нет базовой линии, глаз соотносит с текстом его середину (`45_SITE` §6). Цвет один на все — фирменный красный; меняется этой строкой. */ .h-ico { flex:none; width:27px; height:27px; color:var(--accent); } /* На узком экране заголовок 21 px, и крупная иконка перетягивает его на себя: уменьшаем все разом, перекрывая поштучный размер. */ @media (max-width:720px) { .h-ico { width:24px !important; height:24px !important; } } .page h3 { font-size:19px; font-weight:300; margin:24px 0 8px; } @media (max-width:720px) { .page h1, .site-h1 { font-size:27px; } .page h2 { font-size:21px; } } .page-lead { color:var(--muted); max-width:70ch; margin:0 0 8px; font-size:15px; line-height:1.6; } .page p, .page li { max-width:70ch; } /* ССЫЛКА В ПРОЗЕ — КРАСНАЯ, КАК ВЕЗДЕ (правка владельца 22.08.2026). Такие ссылки нигде не получали класса и доставались браузеру по умолчанию: синяя, а после перехода — лиловая. На странице «О документах» их четыре, и все на чужие сайты. Подчёркивание тут ОСТАВЛЕНО намеренно: запрет на подчёркивание касается кнопок и тегов, где ссылку видно по плашке; в сплошном тексте убрать его — значит спрятать сам факт ссылки. ОТБОР ТОЛЬКО ПО АБЗАЦАМ САМОЙ СТРАНИЦЫ. Первая попытка ловила всякую ссылку без класса (`.page a:not([class])`) — и оказалась слишком широкой: класса не носят и кнопка программы, и хлебная крошка, и номера методик на карточке товара, и списки приложений. Они оформлены через КЛАСС РОДИТЕЛЯ, а правило с двумя классами перебивало его по весу: кнопка стала красной с подчёркиванием (замечание владельца 22.08.2026). Поэтому берём ровно прозу — абзац, лежащий прямо в листе страницы и не несущий своего класса, плюс `.legacy` (примечание мелким шрифтом там же). ЦВЕТ — СТРОКИ, НЕ КРАСНЫЙ (правка владельца 22.08.2026). Красным на витрине помечено действие: кнопка, фильтр, переход в каталог. Ссылка внутри фразы действием не является, ей хватает подчёркивания, а красная строчка посреди абзаца рвёт чтение. */ .page > p:not([class]) a:not([class]), .page > p.legacy a:not([class]) { color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .page > p:not([class]) a:not([class]):visited, .page > p.legacy a:not([class]):visited { color:inherit; } .page > p:not([class]) a:not([class]):hover, .page > p.legacy a:not([class]):hover { color:var(--accent); text-decoration-thickness:2px; } .lang-btn.on { background:var(--accent); color:#fff; } /* ЛИД, ПОИСК И КАРТИНКА — ОДНА ЗОНА (решение владельца 20.08.2026). Снимок техники выровнен по НИЖНЕМУ КРАЮ СТРОКИ ПОИСКА, а не по лиду: так владелец показал на разметке. Значит картинка обязана перекрыть по вертикали обе строки сразу, и держать её в потоке нечем — `position:absolute` от общей зоны, привязка `bottom:0`. Ширина 780 — прежние 520 в полтора раза. Отсюда и ширина лида: текст не должен заезжать под картинку, поэтому его колонка считается вычитанием, а не назначается. */ /* РАЗМЕР И СМЕЩЕНИЯ СНИМКА — ОДНИМ НАБОРОМ, на `:root`, потому что от них зависит не только сама зона, но и отступ полосы фильтров под нею. Правило владельца 20.08.2026: картинка крупнее прежней, опущена и сдвинута вправо, а лид растянут — но НЕ ПОД картинку. Ширины связаны вычитанием, а не подобраны: сдвиг вправо возвращает лиду ровно столько же, сколько отнимает у колонки. `--hero-h` = 0,242 ширины: пропорция файла 1240×300. Меняете ширину — пересчитайте высоту, иначе поедет интервал от шапки. */ :root { --hero-w:660px; --hero-h:160px; --hero-gap:32px; --hero-out:0px; /* вылет за правый край колонки */ --hero-down:19px; /* насколько свисает ниже строки поиска */ /* ЗАХОД ТЕКСТА В РАМКУ КАРТИНКИ. Разрешён владельцем 20.08.2026 («может ли текст немного наползать») и опирается на замер альфа-канала, а не на глаз: в той полосе высоты, куда достаёт лид, первый непрозрачный столбец снимка стоит на 40,6 px от левого края — до него пусто. 60 — это ширина лида ровно 520, как заказано. Само по себе число заходом НЕ ЯВЛЯЕТСЯ: это лишь предел колонки, а строки в неё не дотягивают — замер даёт −5 px, то есть текст кончается ДО рамки. Правите лид — проверяйте замером фактический заход, а не эту цифру. СТРОКИ ПОИСКА ЭТО НЕ КАСАЕТСЯ: она ниже, и там у снимка колёса, а не пустота. */ --hero-lap:60px; } /* Вылет разрешаем только там, где под него есть поле страницы: иначе картинка вылезет за экран и заведёт боковую прокрутку. */ @media (min-width:1260px) { :root { --hero-out:12px; } } /* НИЖНИЙ ПРЕДЕЛ ВЫСОТЫ ЛИДА — ЭТО ИНТЕРВАЛ ОТ ШАПКИ (требование владельца 20.08.2026). Картинка привязана к низу строки поиска, значит её верх зависит от того, во сколько строк лёг лид: короче текст — картинка уезжает под шапку. Арифметика прямая: интервал = высота лида + 77 + свес − высота картинки. При нынешних числах интервал = высота лида − 60, и предел 84 держит его не ниже 24 px при любой длине текста. */ .lead { color:var(--muted); margin:0 0 8px; min-height:84px; max-width:min(70ch, calc(100% - var(--hero-w) - var(--hero-gap) + var(--hero-out) + var(--hero-lap))); } /* Снимок обтравлен (`bin/cutout.py`), фона под ним нет — поэтому ни рамки, ни заливки: он лежит прямо на фоне страницы. РАЗМЕР ЗАДАЁТСЯ ``, А НЕ КАРТИНКЕ: раскладкой управляет обёртка, и правило на вложенном `img` до неё не доходит. */ /* Привязка К СТРОКЕ ПОИСКА, а не к зоне: владелец показал на разметке жёлтую направляющую от нижнего края поиска. Позиционируем от самой строки — тогда совпадение точное при любой высоте зоны. */ /* Строка поиска остаётся ПОЛНОЙ ШИРИНЫ, а место под картинку освобождает ВНУТРЕННИМ полем. Так и поле поиска не лезет под картинку (оно растягивается `flex:1`), и правый край картинки встаёт по краю колонки: якорь `right:0` считается от границы элемента, внутреннее поле его не сдвигает. Ограничить саму строку `max-width` было бы ошибкой — картинка уехала бы влево вместе с её правым краем. */ .lead-zone .f-head { position:relative; padding-right:calc(var(--hero-w) + var(--hero-gap) - var(--hero-out)); } .lead-zone picture { position:absolute; right:calc(-1 * var(--hero-out)); bottom:calc(-1 * var(--hero-down)); width:var(--hero-w); max-width:100%; display:block; } .hero { display:block; width:100%; height:auto; } /* Полоса фильтров отходит вниз ровно на свес картинки — иначе снимок лёг бы на первый блок отбора. */ .lead-zone + .fx { margin-top:calc(12px + var(--hero-down)); } /* На узком экране картинка ушла бы под текст и растянула первый экран на две прокрутки, не сказав ничего нового. Заодно снимаем вычитание: без картинки колонка ни к чему. */ @media (max-width:1040px) { .lead-zone picture { display:none; } :root { --hero-w:0px; --hero-gap:0px; --hero-down:0px; --hero-out:0px; --hero-lap:0px; } } /* ФИЛЬТРЫ НАД КАТАЛОГОМ, ВО ВСЮ ШИРИНУ — как в витрине (`SHOWCASE_CSS`, решение владельца 07.08). Боковая колонка, стоявшая здесь до 16.08, давала три беды разом: теги не помещались в 250 px и рвались по одному в строку; колонка была выше экрана, и нижние разделы открывались только в конце страницы; а карточка теряла 250 px ширины — из-за чего цифра HERO ужималась с 26 px до 19,9 px. */ /* Поиск и обе галочки — ОДНОЙ СТРОКОЙ (решение владельца 18.08): каждая на своей строке съедала бы высоту, ради экономии которой разделы фасетов и сворачиваются. */ .f-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; } .f-head #q { max-width:320px; } .f-chk { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted); font-size:13.5px; user-select:none; white-space:nowrap; } .f-chk:hover { color:var(--text); } .f-chk input { accent-color:var(--accent); width:15px; height:15px; cursor:pointer; } /* ДВЕ ГАЛОЧКИ, ПОМЕНЯНЫ МЕСТАМИ 19.08.2026 (решение владельца). «доп. фильтры» открывает СТРАНУ: рядовой посетитель ищет по узлу и отрасли, а география — уточнение для того, кто знает, что ищет. Безымянная открывает тир, рейтинг и выбор сортировки: это наша кухня, и спрашивать о ней посетителя незачем. Она освободилась после того, как Россию и Беларусь открыли. */ .fx-sec[data-fx="country"] { display:none; } body.adv .fx-sec[data-fx="country"] { display:block; } .fx-sec[data-fx="rating"] { display:none; } body.ext .fx-sec[data-fx="rating"] { display:block; } /* Выбор сортировки стоит В СТРОКЕ «Сила и рейтинг» и виден вместе с ней — по той же галочке. ВСЁ В СТРОКЕ ОДНОЙ ВЫСОТЫ И ПО ЦЕНТРУ. Селект по умолчанию выше тегов и садится на свою базовую линию — строка выглядела рваной (замечание владельца 19.08.2026). */ .fx-sec[data-fx="rating"] .fx-line { align-items:center; } .fx-sec[data-fx="rating"] .sortbox { flex:none; display:inline-flex; align-items:center; gap:6px; height:28px; margin:0 0 0 4px; font-size:13px; color:var(--muted-2); } .fx-sec[data-fx="rating"] .sortbox select { height:28px; padding:0 22px 0 8px; background:var(--panel-2); color:var(--text); font:inherit; font-size:13px; border:1px solid var(--border-2); border-radius:4px; line-height:26px; } /* Крестик «сбросить раздел» ПОЯВЛЯЕТСЯ ТОЛЬКО ПРИ ВЫБОРЕ. Скрипт ставит `hidden`, но правила вида `.fx-line .fx-off { display:inline-flex }` и `.fx-sec:not(.closed) .fx-off { order:2 }` перебивают `display:none` браузерного стиля — крестик висел в каждом разделе всегда, и открытом и закрытом, обещая действие, которого нет. `!important` тут по делу: правил-конкурентов несколько, и гоняться за каждым точностью селектора значит чинить это в третий раз. */ .fx-off[hidden] { display:none !important; } /* ВСЁ В ЗАГОЛОВКЕ РАЗДЕЛА — ПО ОДНОЙ ЛИНИИ. Название, счётчик, число выбранных и крестик садились на разные базовые линии, и строка выглядела рваной в каждом блоке. */ /* ОДНА ВЫСОТА У ВСЕГО В СТРОКЕ. Раньше каждый элемент садился на свою базовую линию: у крестика `line-height:0`, у названия своя, у тегов третья — и строка выглядела рваной в каждом блоке. Теперь у всех детей строки одна высота и вертикальный центр (правка владельца 19.08.2026). */ .fx-line { align-items:center; } .fx-line > * { align-self:center; } .fx-toggle, .fx-total, .fx-off, .fx-tags, .fx-rows, .fx-prev { display:inline-flex; align-items:center; } /* Стрелка, название, счётчик и крестик — ОДНОЙ ВЫСОТЫ И ПО ЦЕНТРУ. У каждого была своя базовая линия: у стрелки `line-height:1`, у названия капслок с трекингом, у крестика нулевая межстрочная — и строка выглядела рваной в каждом блоке (правка владельца 19.08.2026, повторно). */ .fx-toggle { gap:6px; min-height:26px; } .fx-arrow, .fx-name, .fx-total { display:inline-flex; align-items:center; height:26px; line-height:1; } /* КРЕСТИК БЕЗ ПЛАШКИ (правка владельца 19.08.2026): красная кнопка под знаком выглядела действием более важным, чем сам фильтр. Остаётся один глиф, красный при наведении. */ /* Крестик: коробка выровнена по центру строки замером (расхождение 0,5 px, как у названия и тегов), но знак «✕» в Inter сидит чуть ниже середины кегля — отсюда поправка в пиксель. Она оптическая, а не геометрическая: числа уже сходились. Цвет при наведении — тот же красный, что у активной кнопки языка. */ .fx-off { height:26px; width:26px; line-height:1; display:inline-flex; align-items:center; justify-content:center; background:none !important; border:0 !important; color:var(--muted); } .fx-off svg { display:block; } .fx-off:hover { background:none !important; color:#D0021B !important; } /* СКРЫТОЕ ОСТАЁТСЯ СКРЫТЫМ. Правило выравнивания выше однажды уже воскресило спрятанный элемент: `display:inline-flex` перебил `display:none` браузерного стиля, и счётчики вылезли с нулём. */ [hidden] { display:none !important; } /* Счётчик кейсов — по правому краю: слева от него теперь пусто, и прижатое к левому краю число выглядело потерянным. Селектор с `.cards` НАРОЧНО: стили витрины подключаются ПОСЛЕ этих и объявляют `.c-bar { justify-content:space-between }` — при равной точности побеждает тот, что ниже. */ .cards .c-bar { justify-content:flex-end; } .site-card { position:relative; } /* Строка действий карточки: одна кнопка «Подробнее», прижата вниз, чтобы у карточек разной высоты она стояла на одной линии. */ .sc-act { display:flex; gap:8px; margin-top:auto; padding-top:10px; } .btn-p { display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 13px; border-radius:4px; font-size:13.5px; text-decoration:none; background:var(--accent); color:#fff; border:1px solid var(--accent); white-space:nowrap; } .btn-p:hover { filter:brightness(1.08); } .btn-s { display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 13px; border-radius:4px; font-size:13.5px; text-decoration:none; background:transparent; color:var(--muted); border:1px solid var(--border); white-space:nowrap; } .btn-s:hover { color:var(--accent); border-color:var(--accent); } /* Страница одного кейса */ /* ═══ ПРАВИЛА ФОРМЫ ═══════════════════════════════════════════════ 1. В КНОПКЕ ТЕКСТ НЕ ПОДЧЁРКИВАЕТСЯ. Подчёркивание значит «ссылка в тексте»; на кнопке оно спорит с рамкой и выглядит опечаткой. 2. СКРУГЛЕНИЯ — ТОЛЬКО У ТЕГОВ И ФИЛЬТРОВ. Всё остальное — прямые углы, как на листе отчёта. Оба требования владельца, 19.08.2026. */ a.btn-p, a.btn-s, .ic-b, .lang-btn, .brand, .brand a, .f-reset, .wc-pdf, .wc-tl, .fx-toggle, .pg-num, .pg-arrow, .fx-off, .share-b, .crumb a { text-decoration:none; } /* СКРУГЛЕНИЕ 4 px — У ВСЕХ КНОПОК, единым правилом. Владелец уточнил 19.08.2026: у кнопки «PDF-отчёт» в карточке каталога оно и было, и остальные кнопки надо привести к ней, а не наоборот. Листы, панели и таблицы остаются с прямыми углами — это документ. */ .btn-p, .btn-s, .ic-b, .f-reset, .share-b, .wc-btns, .wc-pdf, .wc-more { border-radius:4px; } /* БЕЗ СКРУГЛЕНИЯ: кнопки языка и номера страниц (решение владельца 19.08.2026). Они не входят в полосу действий кейса — это навигация по каталогу, и прямой угол отделяет её от кнопок документа. */ .lang-btn, .pg-num, .pg-arrow, .sheet, .sh-panel, .sh-cell, .c-tab, .c-tab th, .c-tab td, .sh-concl, .site-card, .wc { border-radius:0; } /* Воздух между шапкой и листом: 6 px были почти впритык, лист «прилипал» к полосе с логотипом (правка владельца 19.08.2026). */ .case-wrap { padding-top:26px; } /* Название кейса в шапке — вместо общего «Доказательная база». Читатель пришёл по ссылке на конкретный акт, и шапка обязана сказать, на какой (требование владельца 19.08.2026). */ .case-page .brand-t { color:var(--muted); font-size:14px; letter-spacing:.01em; font-weight:400; } .case-page .site-card { margin:0 auto; } /* Значки прижаты вправо: кнопка PDF теперь фиксированной ширины, и остаток полосы уходит в пробел между нею и значками — так и задумано владельцем 20.08.2026. */ .share { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; justify-content:space-between; margin:30px 0 4px; } /* ШИРИНА РОВНО КАК У КНОПКИ «PDF-ОТЧЁТ» В КАРТОЧКЕ КАТАЛОГА (правка владельца 20.08.2026). 506 px — это внутренняя ширина карточки: 560 минус поля 27+27, замерено. Число жёсткое намеренно: требование было «такая же по размеру», а не «такой же доли листа». `max-width` держит узкий экран, где 506 не поместится. */ .share-main { flex:0 0 auto; width:506px; max-width:100%; min-width:0; } .share-ic { display:flex; align-items:center; gap:10px; flex:none; } /* Облегчённая полоса — на страницах без кейса: подпись слева, значки справа, сверху линейка (правка владельца 22.08.2026). */ /* ПОДПИСЬ ВОЗЛЕ ЗНАЧКОВ, А НЕ У ДРУГОГО КРАЯ (правка владельца 23.08.2026): `space-between` уносил «Поделиться» к левому полю, и связь со значками терялась. Своей линейки у полосы больше нет — сверху уже стоит разделитель блока. */ .share-lite { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin:30px 0 8px; } .share-t { font-size:13.5px; color:var(--muted); } .share-main .btn-p { width:100%; } .share-sp { flex:1; } /* ВСЕ КНОПКИ ПОЛОСЫ — ОДНОГО РОСТА И ОДНОГО ВИДА (правка владельца 19.08.2026). Кнопка PDF была заливной и в спокойном состоянии пропадала на светлом листе; значки — обведёнными. Теперь у всех белый фон, одна рамка, высота 42, а наведение — красное: здесь красный уместен, это призыв к действию, а не цифра результата. */ /* Рост 44 px — РОВНО КАК У КНОПКИ «PDF-ОТЧЁТ» В КАРТОЧКЕ КАТАЛОГА (замерено там же: 506×44, поля 12/14, кегль 13,5, вес 500, трекинг 0,5). Прежние 43 брались из старого замера — на один пиксель мимо. Значки подогнаны под ту же высоту, чтобы полоса читалась одним рядом. */ .case-page .btn-p, .ic-b { display:inline-flex; align-items:center; justify-content:center; height:44px; cursor:pointer; background:#fff; color:#61686F; border:1px solid #D8DDE2; text-decoration:none; transition:background .18s ease, color .18s ease, border-color .18s ease; } .ic-b { width:44px; } /* Кнопка PDF — ВИД ИЗ КАТАЛОГА: серая заливка без рамки, тот же кегль и трекинг (правка владельца 19.08.2026). Белая с рамкой в спокойном состоянии терялась на листе. Наведение остаётся красным. */ .case-page .btn-p { flex:none; padding:0 14px; font-size:13.5px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; background:#DFE4E9; color:#191C1F; border:0; } .case-page .btn-p:hover, .ic-b:hover { background:#EB0000; color:#fff; border-color:#EB0000; filter:none; } .ic { display:block; } .share-ok { color:var(--ok); font-size:14px; } /* ═══ ЛИСТ КЕЙСА — КОПИЯ PDF-ОТЧЁТА ═══════════════════════════════ Палитра и шкала взяты из `bin/xado_case_builder.py`, не подобраны на глаз: красный #EB0000 (цифры, плашка), плотный #D0021B (мелкие подписи), текст #191C1F, вторичный #61686F, заливки #EDF0F3, линии #D8DDE2. Кегли пересчитаны из пунктов PDF в пиксели ×1.16. ЛИСТ ВСЕГДА СВЕТЛЫЙ, даже когда сайт тёмный: отчёт — это документ, и на тёмной подложке он перестаёт им выглядеть (замечание владельца 19.08.2026). Цвета заданы явно, не переменными темы. */ /* Лист без скруглений и без смены фона под ним: белая карточка с тенью лежит на том же сером, что и каталог. Ширина — как две карточки каталога в ряд, то есть вся полоса `.wrap` (правки владельца 19.08.2026). Кегли подняты: на экране PDF-шкала мелковата. */ .sheet { background:#fff; color:#191C1F; padding:40px 44px 34px; margin:0 0 20px; box-shadow:0 2px 18px rgba(26,26,26,.16); } .sh-top { display:flex; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #D8DDE2; margin-bottom:24px; } .sh-cls { display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.8px; text-transform:uppercase; color:#61686F; } .sh-cls span { color:#D8DDE2; } .sh-eye { font-size:12.5px; letter-spacing:.8px; text-transform:uppercase; color:#D0021B; font-weight:700; margin:0 0 12px; } /* Плашка серии — та же, что в карточке каталога. Зазор до заголовка увеличен примерно в 1,75 раза (14 -> 24 px, правка владельца 19.08.2026): плашка и крупный заголовок стояли впритык и читались одним блоком. */ .sh-serwrap { margin:0 0 24px; } .sh-ser { display:inline-block; padding:4px 10px 3px; background:#D0021B; color:#fff; font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; } /* ЗАГОЛОВОК КЕЙСА — ПО ОБЩЕМУ ОБРАЗЦУ (правка владельца 22.08.2026). Страница кейса собирается отдельным шаблоном, и правка заголовков разделов её не задела: там оставались 38 px, вес 300 и поджатая на 0,015em строка, тогда как на всех разделах 36 / 200 / +0,036em. Числа взяты у `.page h1` — не «похожие», а те же самые. */ .sh-title { font-size:36px; line-height:1.22; font-weight:200; letter-spacing:.036em; color:var(--text); margin:0 0 16px; } .sh-meta { font-size:14.5px; line-height:1.6; color:#61686F; margin:0 0 4px; } .sh-meta2 { font-size:14.5px; color:#61686F; margin:0 0 26px; font-weight:500; } /* ТОЛЬКО ВЕРТИКАЛЬНЫЕ РАЗДЕЛИТЕЛИ, внешнего контура нет (правка владельца 19.08.2026). Рамка вокруг панели делала её отдельной таблицей, хотя это три подписи к одному документу. */ .sh-panel { display:grid; gap:0; background:#EDF0F3; border:0; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:0 0 24px; } .sh-cell { background:transparent; padding:17px 22px; border-left:1px solid #D8DDE2; } .sh-cell:first-child { border-left:0; } .sh-lab { display:block; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:#D0021B; font-weight:700; margin-bottom:9px; } .sh-val { display:block; font-size:14.5px; line-height:1.45; color:#191C1F; } .sh-sub { display:block; margin-top:5px; font-size:13.5px; color:#61686F; line-height:1.45; } /* ЗАГОЛОВОК РАЗДЕЛА — КАК В ОТЧЁТЕ: Inter Light, крупно. В PDF это 19 pt тонкого начертания при 26 pt заголовка кейса; на экране тот же пропорциональный шаг. Полужирные 18 px были вдвое мельче нужного и читались как подпись, а не как заголовок (замечание владельца 19.08.2026). Отбивки сверху и снизу тоже из отчёта: 30 и 16. */ .sh-h { font-size:28px; font-weight:300; color:#191C1F; margin:38px 0 18px; letter-spacing:-.015em; line-height:1.25; } /* HERO: цифры крупным красным, подписи серым, между ними вертикальная линия — ровно как в отчёте. */ /* СЕТКА 2×2 С ЛИНИЯМИ МЕЖДУ ЯЧЕЙКАМИ — как в отчёте: вертикаль между столбцами, горизонталь между рядами, внешней рамки нет. Раньше стояли только линии слева и рамки сверху-снизу: при четырёх значениях второй ряд «сливался» с первым. */ /* МЕРА, А НЕ ВСЯ ШИРИНА. Лист широкий — как две карточки каталога, — и HERO, растянутый на 1140 px, давал колонку в 526 px: подпись укладывалась в одну строку, а в отчёте она в две. Дело не в красоте: длинная строка хуже читается, а глаз перестаёт связывать подпись с цифрой над ней. Ограничиваем и ставим по центру (замечание владельца 19.08.2026). */ .sh-metrics { display:grid; gap:0; margin:0 auto 26px; max-width:720px; grid-template-columns:repeat(2,1fr); } .sh-metrics[data-n="1"] { max-width:420px; grid-template-columns:1fr; } .sh-metrics[data-n="3"] { max-width:720px; } .m-cell { padding:22px 26px; border-left:1px solid #D8DDE2; border-top:1px solid #D8DDE2; } .m-cell:nth-child(2n+1) { border-left:0; padding-left:0; } .m-cell:nth-child(-n+2) { border-top:0; } /* ТРИ ЗНАЧЕНИЯ — БЕЗ ОБРУБКА ЛИНЕЙКИ (правка владельца 22.08.2026). При трёх ячейках в двух колонках третья переносится вниз, и верхняя линейка тянулась только под левой половиной: получалась висящая черта до середины листа. Для `data-n="3"` её не рисуем вовсе — ячейки и так разделены пустотой. */ .sh-metrics[data-n="3"] .m-cell { border-top:0; } /* ТОТ ЖЕ НАБОР, ЧТО В PDF (`xado_case_builder`, `31_PDF_LAYOUT` §4-бис): значение — Inter Black, стрелка — Inter Light и КРУПНЕЕ значения в 1,18 раза. У меня стрелка была 0,62 — вдвое мельче нужного, и направление терялось (замечание владельца 19.08.2026). Отбивки — доли кегля, как в отчёте: 0,20 до значения, 0,18 до единицы. */ .m-val { font-size:44px; line-height:1.08; font-weight:900; color:#EB0000; white-space:nowrap; letter-spacing:-.025em; } .m-ar { font-size:1.18em; font-weight:300; margin-right:.20em; line-height:1; vertical-align:-.04em; } .m-un { font-size:.55em; margin-left:.18em; font-weight:300; } .m-lab { margin-top:13px; font-size:14.5px; line-height:1.5; color:#61686F; } /* Таблица замеров. Широкую прокручиваем ВНУТРИ блока: иначе на телефоне горизонтально едет вся страница. */ .c-tw { overflow-x:auto; margin:0 0 18px; } .i-up { margin:18px 0 0; font-size:13.5px; } .i-up a, .i-all a { color:var(--muted); text-decoration:none; } .i-up a:hover, .i-all a:hover { color:var(--accent); text-decoration:underline; } .i-all { margin:18px 0 8px; font-size:15px; } .page .i-all + h3 { margin-top:46px; } .i-all a { color:var(--accent); font-weight:600; } /* Ссылка на приложение прямо в графе «когда и как»: цвет витрины, без подчёркивания (в таблице оно спорит с линейками), стрелка и запрет переноса — чтобы «порядок замера →» не разрывался. */ a.i-ap { color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap; } a.i-ap:hover { text-decoration:underline; } .i-rec { margin:12px 0 20px; padding-left:20px; line-height:1.7; } .i-rec a { font-weight:600; } .i-fig { white-space:nowrap; font-weight:700; } .c-tab { border-collapse:collapse; width:100%; font-size:14.5px; color:#191C1F; } /* ЦВЕТА ЗАГОЛОВКА И РАЗДЕЛИТЕЛЯ ПОМЕНЯНЫ МЕСТАМИ (правка владельца 21.08.2026): полоса заголовка была светлее сетки и тонула, а сетка рубила таблицу на клетки. Теперь заголовок — плотная серая полоса (#C2C9D0), а линейки — светлые (#EDF0F3); строки различает зебра. */ /* ЛИНЕЙКИ ТАБЛИЦЫ — 2 px (правка владельца 23.08.2026). На сером листе сайта светлая черта в один пиксель почти не видна: строки сливались. Цвет оставлен светлым, прибавлена толщина — так таблица читается рядами, а не сеткой. */ .c-tab th, .c-tab td { border:2px solid #E7EBEF; padding:9px 12px; text-align:left; vertical-align:top; } .c-tab th { background:#D6DBE0; font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase; /* Надпись держит читаемость и на осветлённой заливке: #4A5157 на #D6DBE0 даёт контраст 5,78. */ color:#4A5157; white-space:nowrap; } /* ЗАГОЛОВОК ТАБЛИЦЫ ПРИЛОЖЕНИЯ ПЕРЕНОСИТСЯ (правка владельца 23.08.2026). `nowrap` заведён для узких таблиц кейса, где шапки короткие («ПРОБЕГ», «ЗАМЕРЯЛОСЬ»). В приложении 1 шапка длиной в строку — «Количество геля-ревитализанта ХАДО на один литр для одного этапа обработки, (мл)», — и запрет переноса растягивал таблицу за край экрана. На страницах методик и приложений перенос разрешаем, а числовым колонкам задаём долю ширины. */ .page .c-tab th { white-space:normal; } /* Доли ширины — ТОЛЬКО таблице приложения (класс `ap-tab`). Первая редакция правила задала их всем таблицам страницы разом, и трёх- колоночная таблица замеров в методике схлопнулась: параметр и прибор наехали друг на друга (поймано владельцем 23.08.2026). */ .c-tab.ap-tab { table-layout:fixed; } .c-tab.ap-tab th:first-child { width:58px; } .c-tab.ap-tab th:nth-child(4), .c-tab.ap-tab th:nth-child(5) { width:15%; } /* ЗНАЧЕНИЯ В ТАБЛИЦЕ НЕ КРАСНЫЕ. В PDF красным набраны только цифры HERO; в таблицах замеров они обычные, чернильные. Красная таблица уравнивала рядовой замер с главным результатом (замечание владельца 19.08.2026). */ .c-tab td b { color:#191C1F; font-weight:700; } /* МЕНЬШЕ КОНТРАСТА (правка владельца 21.08.2026). Замер отрыва от листа страницы (#E4E7EA): заголовок был 1,35 — тяжёлая серая полоса; стал 1,12. Полоса строки была 1,18 — стала 1,07: строки различаются, но таблица не рябит. */ .c-tab.zebra tbody tr:nth-child(even) { background:#ECEEF1; } /* Проза тоже держится меры: строка на всю ширину листа читается тяжело, глаз теряет начало следующей. Таблицы — во всю ширину, им мера не нужна, у них своя сетка. */ .sh-p { font-size:14.5px; line-height:1.68; margin:0 0 15px; color:#191C1F; max-width:820px; } /* ВЫВОД КОМИССИИ — ПО ПРОПОРЦИЯМ ОТЧЁТА. Шрифт: Inter Light (в PDF это `F_LIGHT`, 11 pt), а не обычный — с обычным блок выглядел плотнее остального текста. Красная колонка: 2,6 мм при 174 мм контента = 1,49 % ширины. На листе в 1140 px это 17 px; у меня стояло 3 px — вчетверо тоньше, и акцент не читался (замечание владельца 19.08.2026). Ширина — вся полоса листа, как в отчёте: там блок идёт во всю колонку контента, а не мерой прозы. */ /* ЛЕВЫЙ КРАЙ ЗАДАЁТ БЛОК ВЫВОДА, А НЕ НАОБОРОТ. Я сперва понял задачу навыворот и подвинул влево сам вывод и HERO — владелец поправил 19.08.2026: их трогать было нельзя, двигать надо было заголовки ВПРАВО, к их кромке. Мера листа — колонка 920 px по центру; вывод занимает её целиком, HERO центрируется внутри неё. */ .sh-concl { font-size:16px; font-weight:300; line-height:1.7; padding:26px 30px; background:#EDF0F3; border-left:10px solid #EB0000; max-width:920px; margin:0 auto; } /* Колонка листа. Частные ширины ниже задаются С `.sheet >`, иначе это правило их перебивает: точность одинаковая, а стоит оно позже — на чём HERO и уехал к левому краю. */ .sheet > * { max-width:920px; margin-left:auto; margin-right:auto; } .sheet > .sh-metrics { max-width:720px; } .sheet > .sh-metrics[data-n="1"] { max-width:420px; } .sheet > .sh-title, .sheet > .sh-meta, .sheet > .sh-meta2 { max-width:920px; } .sh-concl b { font-weight:700; } .sh-title, .sh-meta, .sh-meta2 { max-width:900px; } /* `margin: … auto …`, а НЕ `0`: короткая запись с нулём по бокам перебивала `margin-left:auto` колонки листа, и дисклеймер уезжал к самому краю, разойдясь с выводом (замечание владельца 19.08.2026). */ .sh-disc { font-size:13px; line-height:1.6; color:#61686F; margin:26px auto 0; padding-top:16px; border-top:1px solid #D8DDE2; } @media (max-width:640px) { .sheet { padding:24px 18px 22px; } .sh-title { font-size:27px; } .m-cell { border-left:0; padding:14px 0; border-top:1px solid #D8DDE2; } .m-cell:first-child { border-top:0; } } /* Список оригиналов — КАК В КАРТОЧКЕ КАТАЛОГА: свёрнут, подпись по центру под полосой кнопок, маркер `
` убран (замечание владельца 19.08.2026). Ширина — по полосе кнопок, чтобы «по центру» означало то же самое, что там. */ .sh-origs { margin:0 0 22px; } .sh-origs > summary { list-style:none; cursor:pointer; text-align:center; font-weight:300; font-size:14.5px; color:#61686F; padding:6px 0; transition:color .15s ease; } .sh-origs > summary::-webkit-details-marker { display:none; } .sh-origs > summary:hover { color:#191C1F; text-decoration:underline; } .sh-origs ul { margin:10px auto 0; padding:0; list-style:none; max-width:620px; } .sh-origs li { margin:0 0 7px; font-size:14.5px; text-align:center; } /* Подчёркивание ТОЛЬКО ПРИ НАВЕДЕНИИ (правка владельца 19.08.2026): постоянная черта под каждой из десяти строк превращала список в решётку. */ .sh-origs a, .sh-origs-one a { color:#191C1F; text-decoration:none; } .sh-origs a:hover, .sh-origs-one a:hover { color:#EB0000; text-decoration:underline; } .sh-origs-one { margin:0 0 22px; font-size:14.5px; text-align:center; font-weight:300; } /* ХЛЕБНАЯ КРОШКА — ОДНА НА ВСЕ СТРАНИЦЫ (решение владельца 21.08.2026). Раньше на листе кейса она стояла внизу и звалась `case-back`, а в методиках — вверху и звалась `m-back`: два вида одной кнопки. Теперь один класс, одно место (сверху, под шапкой) и один интервал. Внизу листа кейса крошка тоже осталась: лист длинный, и возвращаться с его конца в начало страницы незачем. */ .crumb { margin:30px 0 34px; font-size:14px; } /* СТРАНИЦА КЕЙСА — ТОТ ЖЕ РИТМ, ЧТО У МЕТОДИКИ (правка владельца 22.08.2026). У кейса лист имел свой отступ сверху 26 px, и от шапки до хлебной крошки выходило 56 против 30 на странице методики. */ .case-wrap { padding-top:0; } .crumb a { color:var(--muted); text-decoration:none; } .crumb a:hover { color:var(--accent); } .crumb-b { margin:34px 0 0; } #q { flex:1; min-width:0; background:var(--panel-2); color:var(--text); border:1px solid var(--border-2); border-radius:4px; padding:7px 9px; font:inherit; font-size:14px; } #q::placeholder { color:var(--muted-2); } .f-reset[hidden] { display:none; } .f-reset { background:var(--panel-2); color:var(--muted-2); cursor:pointer; border:1px solid var(--border-2); border-radius:4px; padding:7px 9px; font:inherit; font-size:14px; } .f-reset:hover { color:var(--text); } /* Тона и вид тегов приходят из SHOWCASE_CSS, тем же файлом, что у витрины. Здесь — заголовок блока и сворачивание, которых там нет: витрина строит фасеты на `
`, а нам нужен щелчок по тегу БЕЗ разворота блока. */ /* Тёмные подписи — светлая схема с 19.08.2026, как и в витрине. */ .fx-sec[data-fx="rating"] { --tone:225,29,72; --tone-bg:#EFC4D3; --tone-bg-h:#E59EB6; --tone-fg:#76204E; --tone-fg-h:#551738; } .fx-sec[data-fx="country"] { --tone:99,102,241; --tone-bg:#CACEE4; --tone-bg-h:#A8AED1; --tone-fg:#384183; --tone-fg-h:#282F5E; } /* ЗАГОЛОВОК И ТЕГИ В ОДНОЙ СТРОКЕ, пока блок закрыт (решение владельца 17.08). Раскрытие переносит теги на свою строку целиком. Порядок задаётся `order`, а не разметкой: в закрытом виде теги идут сразу за заголовком, в раскрытом — под ним, а крестик обязан остаться справа от заголовка в обоих случаях. */ /* Блок чуть выше, зазор между блоками меньше (правка владельца 19.08.2026): полоса фильтров стала разреженной, а сами блоки при поднятом кегле — тесными. */ .fx-line { display:flex; align-items:center; gap:10px; padding:9px 10px 8px; flex-wrap:wrap; } .fx-toggle { flex:none; display:flex; align-items:center; gap:8px; background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:13.5px; color:var(--muted-2); text-align:left; order:0; } .fx-toggle:hover { color:var(--text); } .fx-arrow { color:var(--tone-fg); font-size:16px; line-height:1; width:12px; transition:transform .12s; } .fx-sec:not(.closed) .fx-arrow { transform:rotate(90deg); } .fx-total { color:var(--muted-2); font-size:12px; font-variant-numeric:tabular-nums; } /* КРЕСТИК КРУПНЕЕ (решение владельца 17.08): в 12 px он не читался как кнопка и промахивался мимо пальца. 22 px плюс площадь нажатия 28×28 — нижняя граница, ниже которой в мобильных руководствах элемент считается непопадаемым. */ /* Селектор с `.fx-line` НАМЕРЕННО: `SHOWCASE_CSS` подключается ПОСЛЕ этого файла и своим `.fx-off { font-size:13px }` перебивал бы правило одинаковой силы. Проверено замером: кегль оставался 12 px. */ /* `line-height:0` НАМЕРЕННО: у знака «×» большой надстрочный запас, и при line-height:1 строчный бокс тянет его вниз — крестик вставал ниже заголовка (замечено владельцем 17.08). С нулевой высотой строки центрирование считает сам flex, по глифу. */ .fx-line .fx-off { margin-left:0; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; padding:0; font-size:22px; line-height:0; text-decoration:none; color:var(--muted-2); border-radius:4px; } .fx-line .fx-off:hover { color:#fff; background:var(--bad); text-decoration:none; } /* ЗАКРЫТЫЙ БЛОК ОБРЕЗАЕТ СТРОКУ, А НЕ ПРЯЧЕТ ЕЁ. Теги остаются на месте и кликаются сразу; разворот нужен только чтобы добраться до тех, что не поместились. Тень справа показывает, что строка продолжается, — иначе обрез читается как конец списка. */ /* Отступ у `.fx-tags` снимаем: в `SHOWCASE_CSS` там `padding:0 10px 10px`, а строку теперь выравнивает `.fx-line`. */ .fx-rows .fx-tags { padding:0; } .fx-row { display:flex; align-items:center; gap:6px; min-width:0; } .fx-row + .fx-row { margin-top:6px; } /* Разделитель между фасетами в одной строке — вместо переноса. Тир и рейтинг стоят рядом и НЕ переносятся принудительно. */ .fx-sep { flex:none; width:1px; align-self:stretch; margin:2px 4px; background:var(--border); } /* ЗАКРЫТО: теги в той же строке, что заголовок; лишние строки скрыты, первая обрезается по правому краю с растушёвкой — видно, что список продолжается. */ .fx-sec.closed .fx-rows { order:1; flex:1 1 0; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(to right, #000 90%, transparent); mask-image:linear-gradient(to right, #000 90%, transparent); } .fx-sec.closed .fx-row { flex-wrap:nowrap; } .fx-sec.closed .fx-row + .fx-row { display:none; } .fx-sec.closed .fx-tags { flex-wrap:nowrap; } .fx-sec.closed .fx-n { order:2; } .fx-sec.closed .fx-off { order:3; margin-left:0; } /* РАСКРЫТО: заголовок остаётся один в строке, теги уходят под него и переносятся свободно. */ .fx-sec:not(.closed) .fx-rows { order:3; flex:1 0 100%; padding:2px 0 5px; } .fx-sec:not(.closed) .fx-row { flex-wrap:wrap; } .fx-sec:not(.closed) .fx-n { order:1; } .fx-sec:not(.closed) .fx-off { order:2; } /* Тир красим ПОТИРНО, а не разделом: S и C — не два значения одного свойства, а «показывать первым» и «показывать с оговоркой». Цвета те же, что у значка тира в интерфейсе (`TIER_COLORS`). */ .fx-sec[data-fx="tier"] .tag[data-value="S"] { --tone:22,163,74; --tone-bg:#CDE1CD; --tone-bg-h:#ACCFAE; --tone-fg:#255429; --tone-fg-h:#1B3C1D; } .fx-sec[data-fx="tier"] .tag[data-value="A"] { --tone:2,132,199; --tone-bg:#BEE1F1; --tone-bg-h:#93CDE8; --tone-fg:#185484; --tone-fg-h:#113D5F; } .fx-sec[data-fx="tier"] .tag[data-value="B"] { --tone:217,119,6; --tone-bg:#E4C79B; --tone-bg-h:#DAB072; --tone-fg:#693D13; --tone-fg-h:#4D2C0E; } .fx-sec[data-fx="tier"] .tag[data-value="C"] { --tone:100,116,139; --tone-bg:#D1D7DA; --tone-bg-h:#B3BDC2; --tone-fg:#293135; --tone-fg-h:#1D2326; } .c-bar { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px; } .count { color:var(--muted); font-size:14px; margin:0; } .count b { color:var(--text); font-size:15px; } /* ЧИСЛО АКТОВ — ВЕЛИЧИНА ВТОРОСТЕПЕННАЯ (правка владельца 19.08.2026). Крупная тёмная цифра рядом с числом кейсов спорила с ним за внимание, хотя отвечает на другой вопрос. Набираем как обычный текст подписи. */ .count-acts b { color:inherit; font-size:inherit; font-weight:400; } .sortbox { color:var(--muted); font-size:13.5px; } #sort { background:var(--panel-2); color:var(--text); font:inherit; font-size:13.5px; border:1px solid var(--border-2); border-radius:4px; padding:5px 8px; margin-left:6px; } /* Зазор между карточками даёт `gap` сетки `.sc-grid` из SHOWCASE_CSS. Своего отступа тут быть не должно: в `CARD_CSS` он висит на `.wc-item` — обёртке раскрывающегося списка интерфейса, которой в каталоге нет вовсе, поэтому сперва карточки шли сплошняком. */ .site-card[hidden] { display:none; } .empty { color:var(--muted); padding:30px 0; } /* 40 -> 6 px (правка владельца 20.08.2026): в каталоге это поле шло ВДОБАВОК к зазору подвала, и до узора набегало 58 px — вдвое больше, чем на странице кейса. Со шестью зазор в каталоге и на кейсе один и тот же, 24 px. */ .cards { padding-bottom:6px; } .pager { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:24px; } /* БЕЗ СКРУГЛЕНИЙ (правка владельца 20.08.2026) — как у кнопок языка. Оба ряда переключают не действие, а место: там язык, тут страница. Прямой угол их и роднит. */ .pg-arrow, .pg-num { background:var(--panel-2); color:var(--muted-2); border:1px solid var(--border-2); border-radius:0; cursor:pointer; padding:6px 11px; font:inherit; font-size:13.5px; } .pg-arrow:hover:not(:disabled), .pg-num:hover { color:var(--text); border-color:#3a4150; } .pg-arrow:disabled { opacity:.35; cursor:default; } .pg-num.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; } .pg-gap { color:var(--muted); padding:0 2px; } .pg-nums { display:flex; gap:4px; align-items:center; flex-wrap:wrap; } /* ПОДВАЛ ПОВТОРЯЕТ ПОДПИСЬ PDF-КЕЙСА: та же красная плашка и та же строка копирайта. Соты — зеркало шапки кейса: там они в правом верхнем углу листа, здесь в правом нижнем углу страницы. `overflow:hidden` обязателен — лист A4 целиком выше подвала, видна должна остаться только полоса узора. */ /* Подвал НЕ ВЫДЕЛЯЕТСЯ ЦВЕТОМ (решение владельца 17.08) — тот же фон, что у страницы, отделяет только тонкая линия. `overflow` НЕ скрываем: узор обязан выходить за верхнюю границу подвала и перетекать на страницу, а не обрезаться по ней. */ /* ЛИНИИ НЕТ. Подвал не выделяется ни цветом, ни рамкой: с фоном страницы от него оставалась одна тонкая полоска над копирайтом, и читалась она как случайный артефакт, а не как граница блока. Отделяет воздух — отступ сверху и собственная высота. */ /* Зазор до футера сжат 56 -> 20 -> 8 px (правки владельца 19 и 20.08.2026): пустая полоса между содержимым и узором читалась как обрыв страницы. Меряется он НЕ ОДНИМ ЭТИМ ЧИСЛОМ: узор прижат к низу подвала, поэтому сверху к зазору добавляется разница между высотой подвала и высотой узора (289 px) — см. `.foot-in`. */ .foot { position:relative; margin-top:8px; color:var(--muted); font-size:14px; } /* ДВА УЗОРА В РЯД: широкий `OCTO_Pat_Right` слева, узкий `OCTO_Pat_Left` справа (порядок задан владельцем 17.08 — блоки поменяны местами). Ширины держим В ПРОПОРЦИИ САМИХ ФАЙЛОВ (5217 и 3942 единицы): задай их на глаз — и соты в двух блоках выйдут разного размера, стык станет виден. */ /* УЗОР БЕЛЫЙ И НЕПРОЗРАЧНЫЙ (решение владельца 19.08.2026). При тёмной схеме он был засветкой в 5 %; на светлой такая засветка исчезла вовсе. Белые соты на сером читаются как тиснение: рисунок виден, но за внимание с текстом не спорит. Перекрашиваем ФИЛЬТРОМ, а не правим файлы: те же SVG уходят в PDF-кейс, где узор обязан остаться исходного цвета. */ /* УЗОР НЕ ОБРЕЗАЕТСЯ И ЛЕЖИТ ПОВЕРХ СТРАНИЦЫ (правка владельца 20.08.2026). Прежде блок нёс `overflow:hidden` и был ростом с футер (~310 px). Соты при ширине 39,7 % экрана имеют высоту 0,568 ширины: на экране 1920 это 433 px — верх узора срезался, и срез гулял при масштабировании страницы. Убираем обрез: `align-items:flex-end` прижимает узор к низу, лишняя высота уходит ВВЕРХ, на тело страницы. Под ним ничего не ломается — `pointer-events:none` и `z-index:0` против `z-index:1` у текста футера. */ .foot-deco { position:absolute; left:0; right:0; bottom:0; top:0; display:flex; /* По НИЖНЕМУ краю — требование владельца ещё от 18.08.2026; при сжатом зазоре центрирование стало заметно уводить узор вверх. ПО ЦЕНТРУ, БЕЗ ПРИВЯЗКИ К КРАЯМ (решение владельца 20.08.2026, отменяет привязку вправо от 19.08). Привязка к краю заставляет узор жить шириной окна, а он теперь неизменного размера — цеплять его не за что. */ align-items:flex-end; justify-content:center; gap:51px; /* Обрез ТОЛЬКО ПО ГОРИЗОНТАЛИ. Узор шире телефона, и без этого он завёл бы боковую прокрутку. `clip` вместо `hidden` намеренно: только `clip` разрешает оставить вторую ось видимой, а по вертикали резать нельзя — ради этого обрез и снимали. */ overflow-x:clip; overflow-y:visible; /* Узор — тиснение, а не рисунок. Плотность подбиралась на глаз владельцем: .05 -> .38 -> .46 (20.08.2026). */ opacity:.46; pointer-events:none; user-select:none; z-index:0; /* Тень БЕЗ размытия по цвету фона не сработает: рисуем её `drop-shadow` по самой форме сот, а не по рамке блока — иначе тень легла бы прямоугольником. */ filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(25,28,31,.18)); } /* РАЗМЕР НЕИЗМЕННЫЙ (решение владельца 20.08.2026: «совсем запретим увеличение или уменьшение»). Взят вид при ширине окна 1280 px — 508 и 384 px, зазор 51. Ни процентов, ни `vw`, ни `clamp`: узор выглядит одинаково на любом экране и при любом масштабе страницы. Пропорция ширин держится ОТ САМИХ ФАЙЛОВ (5217 и 3942 единицы) — задай на глаз, и соты в двух блоках выйдут разного размера, стык станет виден. */ .octo { display:block; height:auto; flex:none; } .octo-b { width:384px; } /* OCTO_Pat_Left — узкий */ .octo-a { width:508px; } /* OCTO_Pat_Right — широкий */ /* Логотип и копирайт СПРАВА, друг под другом — как в образце. */ /* Верхнее поле 120 -> 106 px (правка владельца 20.08.2026): им задаётся высота подвала, а узор прижат к его низу — лишние 14 px отодвигали узор от содержимого страницы, хотя пустыми выглядели зазором. */ .foot-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-end; text-align:right; --foot-pad-b:120px; padding-top:106px; padding-bottom:var(--foot-pad-b); } /* ПОЕЗД В ПОДВАЛЕ, слева, НИЗОМ ПО СТРОКЕ АДРЕСОВ САЙТОВ — так владелец показал направляющей 20.08.2026. Отсчёт `bottom` идёт от границы блока, а она ниже текста ровно на нижнее поле, — поэтому поле вынесено в переменную и подставляется сюда же. Разъедутся числа — уедет и выключка. Выключка слева при правой колонке получается сама: элемент вынут из потока, `align-items:flex-end` его не касается. Подвал одинаков на всех страницах (требование владельца 19.08.2026), поэтому поезд стоит и в каталоге, и на листе кейса. */ /* ШИРИНА СЧИТАЕТСЯ ОТ ТЕКСТА, А НЕ НАЗНАЧАЕТСЯ. Владелец разрешил 20.08.2026 наложить поезд на текстовый блок на 20 px — значит его правый край стоит на 20 px правее левого края самой длинной строки подвала. Эта строка — русское примечание об оригиналах, 456 px (английское короче, 420, и там выйдет не наложение, а зазор 16; это не ошибка, а следствие того, что блок выключен вправо). `100%` для вынутого из потока элемента — это ПОЛЕ ВМЕСТЕ С ОТСТУПАМИ колонки, поэтому боковые 20+20 в формуле уже учтены и вычитается ровно ширина строки. Сменится кегль подвала или текст примечания — замерить заново. */ .foot-train { position:absolute; left:0; bottom:var(--foot-pad-b); width:calc(100% - 456px); display:block; } .foot-train img { display:block; width:100%; height:auto; } /* НА УЗКОМ ЭКРАНЕ — ВТОРОЙ СТРОКОЙ, ПО ПРАВОМУ КРАЮ ТЕКСТА (правка владельца 20.08.2026). Прежде поезд там просто скрывался. Возвращаем его в поток: правую выключку даёт `align-items:flex-end` самой колонки, а `order` опускает его под адреса — в разметке он стоит первым, иначе оказался бы над логотипом. */ @media (max-width:820px) { .foot-train { position:static; order:9; width:min(100%, 520px); margin-top:18px; } } /* Логотип футера уменьшен в 1,35 раза: 26 -> 19 px (правка владельца 19.08.2026). Высота, а не ширина: пропорции держит сам SVG. */ .foot-logo { display:block; height:19px; width:auto; margin-bottom:12px; } .foot-in p { margin:0; } .foot-c { color:var(--text); font-weight:500; } .foot-note { margin-top:4px; } .foot-terms { color:inherit; text-decoration:underline; text-underline-offset:2px; margin-left:6px; } .foot-terms:hover { color:var(--accent); } /* Ссылки на продуктовые сайты XADO (правка владельца 20.08.2026). Выключка правая — её задаёт весь `.foot-in`, отдельного правила не нужно. Кегль на ступень мельче примечания: это не текст подвала, а список адресов. */ /* Кегль и цвет — РОВНО КАК У КОПИРАЙТА (правка владельца 20.08.2026): 14 px и `--text`. Прежние 13 px серым отправляли адреса в примечание, а они той же весомости, что и строка правообладателя. */ .foot-sites { margin-top:10px; font-size:14px; color:var(--text); } /* Полужирные — правка владельца 20.08.2026: это адреса, их читают и запоминают, а не просматривают вместе с примечанием. Разделитель намеренно остаётся обычным весом и цветом строки. */ .foot-sites a { color:var(--text); text-decoration:none; font-weight:700; } .foot-sites a:hover { color:var(--accent); text-decoration:underline; } /* Логотип ведёт на xado.com. Ссылка блочная — иначе строчный бокс добавил бы под картинкой полосу в высоту надстрочника, и отступ до копирайта поехал бы. */ .foot-logo-a { display:block; } @media (max-width:720px) { .foot-in { --foot-pad-b:70px; padding-top:70px; } /* Размер узора и на телефоне тот же: он запрещён к изменению. Лишнее по бокам срезает `overflow-x:clip` у `.foot-deco`. */ } /* --- карточка каталога, общее с витриной --- */ .wc-item { border:1px solid var(--border); border-radius:8px; margin-top:14px; padding:0 14px; background:var(--panel); } .wc-item > summary { cursor:pointer; padding:12px 2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; list-style:none; } .wc-item > summary::-webkit-details-marker { display:none; } /* Стрелка того же кегля, что в очереди: раскрытие — это управление разделом, а не сноска, и мелкую стрелку не видно на фоне плашек. */ .wc-item > summary::before { content:'▸'; color:var(--text); font-size:21px; line-height:1; width:18px; transition:transform .12s; } .wc-item[open] > summary::before { transform:rotate(90deg); } .wc-item[open] { padding-bottom:14px; } .lang-tabs { display:flex; gap:8px; align-items:center; margin:0 0 0 auto; flex-wrap:wrap; } .lang-tab { font:600 13px/1 Inter, system-ui, sans-serif; letter-spacing:.06em; color:var(--lc); background:transparent; border:1px solid var(--lc); border-radius:6px; padding:7px 14px; cursor:pointer; opacity:.72; transition:opacity .12s, background .12s, box-shadow .12s; } .lang-tab:hover { opacity:1; background:var(--lcbg); } .lang-tab.on { opacity:1; background:var(--lcbg); box-shadow:inset 0 -2px 0 var(--lc); } /* Карточка РЕЗИНОВАЯ: занимает ширину ячейки сетки, а не свою. `max-width:560px` держал её уже колонки и на широком экране оставлял пустое поле справа — сетка тянулась, карточка нет. */ /* КАРТОЧКА ПРИПОДНИМАЕТСЯ ПРИ НАВЕДЕНИИ (правка владельца 19.08.2026). Сдвиг маленький и тень мягкая: карточка — документ, а не кнопка, и прыжок на пять пикселей выглядел бы игрушечно. `will-change` не ставим: карточек на странице десять, а не сотня. */ .wc { transition:box-shadow .18s ease, transform .18s ease; } .site-card:hover .wc, .wc-item .wc:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(26,26,26,.14); } .wc { background:#fff; border:1px solid #D8DDE2; padding:22px 26px; color:#191C1F; font-family: Inter, system-ui, sans-serif; width:100%; box-sizing:border-box; } /* `flex-start`, а не `center`: слева теперь две строки — тип документа и плашка серии, — и при центрировании правый блок с годами уезжал бы к середине левого. */ .wc-head { display:flex; justify-content:space-between; align-items:flex-start; font-size:12.5px; border-bottom:1px solid #D8DDE2; padding-bottom:11px; } .wc-eyebrow { font-weight:700; color:#D0021B; letter-spacing:.8px; text-transform:uppercase; } /* ЦВЕТ ПЛАШКИ = ЦВЕТ ЗАГОЛОВКА (`.wc-eyebrow`, #D0021B), а не фирменный #EB0000 цифр HERO. Отметка серии стоит В ОДНОЙ СТРОКЕ с типом документа и читается вместе с ним — два разных красных рядом выглядят опечаткой. От цифр она при этом отличается, и правильно: цифра — результат, отметка — характеристика документа. */ /* ПЛАШКА ВСЕГДА СО ВТОРОЙ СТРОКИ (решение владельца 18.08). В одну строку с типом документа она вставала лишь у коротких названий, а у длинных всё равно переносилась — шапка получалась то в одну строку, то в две, и карточки в сетке стояли неровно. Перенос всегда даёт один и тот же рисунок. */ .wc-ser { display:block; margin:6px 0 0; padding:3px 8px 2px; width:fit-content; background:#D0021B; color:#fff; font-weight:600; letter-spacing:.6px; } /* Правый блок шапки прижат ВПРАВО и переносится по своим правилам: обе строки по правому краю, диапазон лет неразрывен. */ .wc-place { color:#61686F; font-weight:500; text-align:right; flex:none; max-width:46%; } .wc-yrs { white-space:nowrap; } /* Левый блок может переносить плашку серии на свою строку — тогда она встаёт под тип документа, а не тянет шапку вширь. */ .wc-head > .wc-eyebrow { min-width:0; } .wc-org { font-weight:300; font-size:19px; margin:14px 0 3px; } .wc-equip { font-weight:300; font-size:14px; color:#61686F; margin:0 0 14px; } /* Заливка панели HERO СВЕТЛЕЕ фона страницы. После перехода на светлую схему она сравнялась с ним по тону, и панель на белой карточке читалась как дырка насквозь (замечание владельца 19.08.2026). */ .wc-metrics { display:grid; gap:10px 8px; background:#F5F7F9; padding:12px 10px; container-type:inline-size; } /* min-width:0 обязателен: у элемента грида ширина по умолчанию не меньше содержимого, а содержимое здесь неразрывное — без этого колонка раздувается и карточка едет вправо, вместо того чтобы ужать кегль. */ .wc-m { position:relative; padding-right:6px; min-width:0; } .wc-m:not(.eol)::after { content:""; position:absolute; right:0; top:2px; bottom:2px; width:1px; background:#D8DDE2; } /* Строка значения НЕ ПЕРЕНОСИТСЯ. «↓ 46-79 %» разорванное на две строки читается как две разные цифры, а стрелка отрывается от числа. Уместиться обязано всегда — поэтому кегль ужимается, а не строка ломается (`clamp` вместо жёстких 21 px). */ /* ОДИН КЕГЕЛЬ НА ВЕСЬ КАТАЛОГ — 5,7 % ширины блока метрик. Единица `cqi` считается от БЛОКА, а не от ячейки, поэтому две карточки равной ширины дают одинаковую цифру независимо от того, сколько в них значений. Резиновость сохраняется: сузилась карточка — сузились все цифры разом. Потолок 26 px — дальше цифра начинает спорить с названием предприятия. */ .wc-m > div:first-child { white-space:nowrap; font-size:21px; font-size:clamp(14px, 5.7cqi, 26px); } /* Стрелка и единица — в em: они обязаны ужиматься вместе с цифрой, иначе на узкой карточке «%» окажется крупнее самого числа. */ .wc-num { font-weight:900; font-size:1em; color:#EB0000; line-height:1; } .wc-arrow { font-weight:300; font-size:1.14em; color:#EB0000; } .wc-unit { font-weight:300; font-size:.72em; color:#EB0000; } .wc-label { font-weight:300; font-size:11.5px; color:#61686F; line-height:1.25; margin-top:6px; } /* ВЫВОД — сразу под значениями, до примечания (`40_WEB_CARD` §4-бис). Крупнее и плотнее примечания: это вторая по важности строка карточки после самой цифры, а примечание — оговорка к ней. */ .wc-verdict { font-weight:500; font-size:14.5px; line-height:1.4; margin:14px 0 0; color:#191C1F; } .wc-teaser { font-weight:300; font-size:14px; line-height:1.35; margin:8px 0 14px; color:#525A62; } .wc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; } /* ТЕГ — НЕ ССЫЛКА НА ВИД. С 22.08.2026 тег ведёт в каталог, но подчёркивание ему не положено: в кнопках и тегах проекта его нет (договорённость с владельцем), а браузер дорисовал своё, как только `span` стал `a`. */ a.wc-tag, a.wc-tag:hover { text-decoration:none; } .wc-tag { font-weight:500; font-size:12px; padding:4px 10px; border-radius:4px; cursor:pointer; transition:background .15s ease, color .15s ease; } /* Насыщенность погашена вместе с чипами фильтра (правка владельца 20.08.2026): фильтр и тег, который он отбирает, — одна краска. */ .wc-tag.unit { background:#EDEFF0; color:#293135; } .wc-tag.unit:hover { background:#D1D7DA; color:#1D2326; } .wc-tag.effect { background:#EAF3EB; color:#255429; } .wc-tag.effect:hover { background:#CDE1CD; color:#1B3C1D; } .wc-tag.diag { background:#E4F4F6; color:#0F5255; } .wc-tag.diag:hover { background:#BCE4E8; color:#0B3B3D; } .wc-foot { border-top:1px solid #D8DDE2; padding-top:14px; } /* ДВЕ КНОПКИ В ОДНОЙ ПОЛОСЕ, между ними разделитель (решение владельца 19.08.2026). Раньше стояла одна широкая «PDF-отчёт», и страница кейса была доступна только стрелкой в углу. Обе тянутся `flex:1` — полоса делится пополам ровно; на карточке без страницы кейса «PDF-отчёт» занимает её целиком, как прежде. */ .wc-btns { display:flex; align-items:stretch; border-radius:4px; overflow:hidden; background:#DFE4E9; } /* КНОПКИ «ПОДРОБНЕЕ» НЕТ: кликается вся карточка (решение владельца 19.08.2026). Полосу целиком занимает «PDF-отчёт» — единственное действие, которое уводит НЕ на страницу кейса. */ .wc-pdf { flex:1; display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; font-size:13.5px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; background:#DFE4E9; color:#191C1F; text-decoration:none; transition:all .2s ease; } /* Заголовок — НАСТОЯЩАЯ ссылка, а не только обработчик щелчка: она берётся клавиатурой, открывается средней кнопкой в новой вкладке и видна поисковику. Щелчок по остальной карточке доводит скрипт. */ .wc-tl { color:inherit; text-decoration:none; } .wc-tl:hover { color:var(--accent); text-decoration:none; } /* НАВЕДЕНИЕ — СЕРО-ГОЛУБОЕ, А НЕ КРАСНОЕ (решение владельца 19.08.2026). Красный на кнопке спорил с цифрами HERO: в кейсе он означает результат, а не «сюда можно нажать». Тон средний по светлоте, контраст с белым 4,6 — выше порога AA. */ .wc-more:hover, .wc-pdf:hover { background:#5B7183; color:#fff; text-decoration:none; } /* Разделитель — линия, а не зазор: две кнопки читаются одной полосой действий, а не двумя разными блоками. */ .wc-sep { width:1px; background:#CFCCC8; flex:none; } .wc-orig { display:block; text-align:center; margin-top:10px; font-weight:300; font-size:12.5px; color:#61686F; text-decoration:none; transition:color .15s ease; } .wc-orig:hover { color:#191C1F; text-decoration:underline; } /* Оригиналы актов серии. Свёрнуты по умолчанию: карточка стоит в сетке среди двадцати других, и двенадцать строк в развёрнутом виде сломали бы ряд. Раскрытие —
, без JS: на Wix Studio это обычный HTML-блок, а любой скрипт там надо ещё и разрешить. */ .wc-origs { margin-top:10px; } .wc-origs > summary { list-style:none; cursor:pointer; text-align:center; font-weight:300; font-size:12.5px; color:#61686F; transition:color .15s ease; } .wc-origs > summary::-webkit-details-marker { display:none; } .wc-origs > summary:hover { color:#191C1F; text-decoration:underline; } .wc-origs > summary::after { content:" ▾"; font-size:10px; } .wc-origs[open] > summary::after { content:" ▴"; } .wc-scans { margin:8px 0 0; padding:8px 0 0; border-top:1px solid #EFEDEA; list-style:none; max-height:196px; overflow-y:auto; } .wc-scans li { display:flex; align-items:baseline; gap:8px; padding:3px 0; font-size:12.5px; font-weight:300; } .wc-scans .wc-yr { flex:none; width:34px; color:#A5A5A5; font-variant-numeric:tabular-nums; } /* Метка языка оригинала. Приглушённая рамка, а не цветная плашка: это уточнение к ссылке, а не ещё один статус кейса. */ .wc-lg { flex:none; font-size:10.5px; font-weight:500; letter-spacing:.4px; color:#8A8A8A; border:1px solid #D8DDE2; border-radius:3px; padding:1px 4px; white-space:nowrap; } .wc-scans a { color:#4A4A4A; text-decoration:none; } .wc-scans a:hover { color:#EB0000; text-decoration:underline; } .wc-zip { display:block; margin-top:8px; text-align:center; font-size:12px; font-weight:300; color:#A5A5A5; text-decoration:none; } .wc-zip:hover { color:#191C1F; text-decoration:underline; } /* --- сетка и фасеты, общее с витриной --- */ /* Сетка витрины — РОВНО ДВЕ КОЛОНКИ по пять строк (решение владельца 07.08). Не «сколько влезет»: карточка свёрстана под 340 px, и на широком мониторе четыре штуки в ряд превращают витрину в плитку, по которой не видно отдельного кейса. Две колонки держат тот же масштаб, в каком карточку увидит инженер. */ .sc-grid { display:grid; gap:20px; margin-top:16px; grid-template-columns:repeat(2, minmax(0, 1fr)); } @media (max-width: 780px) { .sc-grid { grid-template-columns:1fr; } } .sc-item { display:flex; flex-direction:column; } .sc-meta { margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.4; } /* Дыра на месте отсутствующего перевода. Намеренно НЕ похожа на карточку: она сообщает об отсутствии, а не показывает товар. */ .sc-gap { min-height:300px; border:1px dashed var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.02); } .sc-gap-in { text-align:center; padding:18px; } .sc-gap-l { font-size:13px; color:var(--warn); text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; } .sc-gap-t { font-size:14px; color:var(--text); margin-bottom:4px; } .sc-gap-s { font-size:13px; color:var(--muted); } .sc-gap-h { font-size:12.5px; color:var(--muted); margin-top:10px; } /* ЧЕТЫРЕ РАЗДЕЛА ФАСЕТОВ, каждый ВО ВСЮ ШИРИНУ (решение владельца 07.08). В две колонки раздел получал ~500 px, теги в одну строку туда не помещались и уезжали в прокрутку — то есть половина значений каталога оказывалась не видна, пока её не поищешь. */ /* Зазор между блоками фильтров: 8 -> 5 -> 0 px. Последнее — вместе с прозрачными плашками (20.08.2026): без заливки зазор перестал что-либо разделять, разделяет теперь ЧЕРТА между блоками. */ .fx { display:grid; gap:0; margin:12px 0 4px; grid-template-columns:1fr; } /* Черта только МЕЖДУ блоками — ни сверху первого, ни снизу последнего: рамка вокруг всей полосы вернула бы ту самую панель, от которой отказались, сделав плашки прозрачными. ЧЕРТА СНИЗУ, А НЕ СВЕРХУ, И ЭТО ВАЖНО. Два первых блока — «рейтинг» и «страна» — обычно скрыты (`display:none`, открываются галочками). Соседский селектор `+` их не пропускает, и при черте сверху линия вылезала над первым ВИДИМЫМ блоком — проверено замером. У скрытого же элемента собственная граница не рисуется вовсе, поэтому черта снизу решает это сама, без перечисления случаев. Последний блок («результат») не скрывается никогда. */ .fx-sec:not(:last-child) { border-bottom:1px solid var(--border); } /* Блок фильтра — ТОЛЬКО ЗАЛИВКА, без контура (правка владельца 19.08.2026): рамка вокруг каждого из шести блоков дробила полосу фильтров на шесть отдельных панелей. */ /* ПЛАШКА ПРОЗРАЧНАЯ — ПРОБА (правка владельца 20.08.2026, «может будет легче смотреться, потом если что вернём обратно»). Блоки отбора лежат прямо на фоне страницы, отделяет их друг от друга только зазор сетки. Вернуть плашку — поставить обратно `background:var(--panel-2, var(--panel))`, одна строка. Токен `--panel-2` при этом остаётся в деле: на нём шапка, поиск, выбор порядка и кнопки страниц. */ .fx-sec { border:0; border-radius:6px; background:transparent; padding:0; /* min-width:0 обязателен: элемент сетки по умолчанию не уже своего содержимого, а содержимое здесь — непереносимая строка тегов. Без этого раздел раздувался до 1500 px и распирал вширь всю страницу (проверено 07.08). */ min-width:0; /* Тон раздела ПО УМОЛЧАНИЮ — тот же, что у чипа «узел» в карточке. Прежняя полупрозрачная заливка `rgba(var(--tone))` давала на светлом фоне другой оттенок и рвала связь фильтра с тегом. */ --tone:100,116,139; --tone-bg:#D1D7DA; --tone-bg-h:#B3BDC2; --tone-fg:#293135; --tone-fg-h:#1D2326; } /* Тона новых разделов — те же, что на публичном сайте (сведено 18.08.2026). Без них тир, рейтинг и страна брали серый по умолчанию и терялись среди прочих. ПОДПИСЬ ТЕПЕРЬ ТЁМНАЯ. При светлой схеме (19.08.2026) прежние светлые варианты (#4ade80, #fb7185, …) на бледной заливке не читались вовсе — оставлен тот же тон, но насыщенный. */ /* ПАРЫ КРАСОК — ТЕ ЖЕ, ЧТО У ЧИПОВ КАРТОЧКИ (`.wc-tag`): узел — #ECEFF1/#37474F, результат — #E8F5E9/#2E7D32, техника — #E0F7FA/#00838F. Остальные разделы карточных чипов не имеют, им подобраны бледные заливки того же семейства. НАСЫЩЕННОСТЬ — 70 % ИСХОДНОЙ. Число выбрано владельцем 20.08.2026 после трёх заходов: полная краска — «слишком по цветастому», 40 % — «сильно погасил», решение «между текущим и предыдущим». ЧИП ФИЛЬТРА НА СТУПЕНЬ ТЕМНЕЕ ТЕГА КАРТОЧКИ, и это не про цвет, а про светлоту. Плашка отбора светлее фона страницы, поэтому чип в один тон с тегом (`50`) на ней пропадал — замер давал 1,00–1,02, то есть буквально ничего. Чип взят на ступень `100`, тег остался на `50`; краска у них одна, различает их только светлота. */ .fx-sec[data-fx="tier"] { --tone:22,163,74; --tone-bg:#CDE1CD; --tone-bg-h:#ACCFAE; --tone-fg:#255429; --tone-fg-h:#1B3C1D; } .fx-sec[data-fx="top"] { --tone:225,29,72; --tone-bg:#EFC4D3; --tone-bg-h:#E59EB6; --tone-fg:#76204E; --tone-fg-h:#551738; } .fx-sec[data-fx="country"] { --tone:99,102,241; --tone-bg:#CACEE4; --tone-bg-h:#A8AED1; --tone-fg:#384183; --tone-fg-h:#282F5E; } /* ОТРАСЛЬ — НА СТУПЕНЬ ГЛУБЖЕ ПРОЧИХ И НА ДВЕ БЛЕДНЕЕ ПО КРАСКЕ (правки владельца 20.08.2026). Оранжевый на прежней светлоте почти не отличался от фона страницы: после снятия плашек замер дал 1,06 при 1,17-1,26 у соседей. Взята следующая ступень шкалы, а краска у неё погашена до 58 % против общих 70 % — «чуток менее насыщенным». Замер показал занятное: гашение краски КОНТРАСТ НЕ СЪЕЛО, а прибавило (1,28 -> 1,31). Фон страницы холодный, тёплый чип от него дальше именно светлотой, а не цветностью. */ .fx-sec[data-fx="industry"] { --tone:217,119,6; --tone-bg:#E4C79B; --tone-bg-h:#DAB072; --tone-fg:#693D13; --tone-fg-h:#4D2C0E; } .fx-sec[data-fx="equipment_type"] { --tone:8,145,178; --tone-bg:#BCE4E8; --tone-bg-h:#90D2DA; --tone-fg:#0F5255; --tone-fg-h:#0B3B3D; } .fx-sec[data-fx="unit_type"] { --tone:100,116,139; --tone-bg:#D1D7DA; --tone-bg-h:#B3BDC2; --tone-fg:#293135; --tone-fg-h:#1D2326; } .fx-sec[data-fx="results"] { --tone:34,139,58; --tone-bg:#CDE1CD; --tone-bg-h:#ACCFAE; --tone-fg:#255429; --tone-fg-h:#1B3C1D; } .fx-sec > summary { cursor:pointer; padding:7px 10px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:8px; user-select:none; list-style:none; } .fx-sec > summary::-webkit-details-marker { display:none; } /* Треугольник рисуем сами: браузерный маркер по-разному выглядит в Chrome и Firefox и съезжает от flex-раскладки. Символ вставлен БУКВОЙ: строка живёт внутри Python, и `` там — восьмеричная escape-последовательность, дающая на экране мусор (проверено 07.08). */ .fx-sec > summary::before { content:"▸"; font-size:16px; line-height:1; color:var(--tone-fg); width:12px; transition:transform .12s; } .fx-sec[open] > summary::before { transform:rotate(90deg); } .fx-name { text-transform:uppercase; letter-spacing:.5px; } .fx-n { background:rgba(var(--tone), .9); color:#12151b; border-radius:9px; padding:0 6px; font-size:12px; font-weight:600; } /* Предпросмотр — только в свёрнутом виде: в развёрнутом те же теги стоят строкой ниже, и дубль в заголовке был бы шумом. `text-overflow:ellipsis` обрезает строку по краю заголовка и ставит многоточие; для этого нужны сразу nowrap, overflow:hidden и min-width:0 на элементе флекса — без последнего он не сжимается и вылезает. */ .fx-prev { display:none; } .fx-sec:not([open]) .fx-prev { display:block; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fx-prev .tag { margin-right:5px; } .fx-off { margin-left:auto; color:var(--muted); text-decoration:none; font-size:13px; padding:0 4px; } /* Тот же красный, что у активной кнопки языка (правка владельца 19.08.2026). `--bad` — цвет ошибки, и на крестике сброса он обещал не то. */ .fx-off:hover { color:#D0021B; } /* Теги переносятся на новую строку, когда не влезают (решение владельца 07.08). Прокрутка вбок прятала половину значений: чтобы увидеть их, надо было сначала догадаться, что там что-то есть. Раздел вырастет на строку-другую — зато весь каталог виден сразу. `flex:0 0 auto` — тег занимает ровно свою ширину: растягивать теги по ширине ряда при переносе нельзя, последний ряд из одного тега растянулся бы во всю строку. */ .fx-tags { display:flex; flex-wrap:wrap; gap:6px; padding:0 10px 10px; min-width:0; } .fx-tags::-webkit-scrollbar { height:6px; } .fx-tags::-webkit-scrollbar-thumb { background:#3a4150; border-radius:3px; } /* Скругление — 4 px, как у чипов в карточке: фильтр и карточка показывают одно и то же, разметку кейса. */ /* align-items:baseline, а не center: число набрано мельче подписи, и при центрировании его бокс встаёт выше строки — цифра «висит» над словом. Базовая линия сажает их на одну строку. */ /* Теги чуть ниже ростом (правка владельца 19.08.2026): кегль подняли на пиксель, и при прежних полях кнопки стали грузными. Поля по вертикали сжаты с 5 до 3 — итоговая высота меньше прежней. */ /* ЗАЛИВКА СПЛОШНАЯ И БЕЗ КОНТУРА — как у чипов в карточке (правка владельца 19.08.2026). Была прозрачная 13 % с рамкой: на просвет тон менялся вместе с подложкой, и один и тот же «узел» в фильтре и в карточке выглядел разными цветами. Теперь у фильтра и карточки одна пара красок на смысл. */ .tag { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; font-size:12.5px; font-weight:500; padding:3px 12px; border-radius:4px; text-decoration:none; white-space:nowrap; border:0; background:var(--tone-bg); color:var(--tone-fg); transition:background .15s ease, color .15s ease; } /* Без подчёркивания: линия приходила из общего `a:hover`, а тег — переключатель, а не ссылка в тексте. Наведение показывает плотность заливки, этого достаточно. */ .tag:hover { background:var(--tone-bg-h); color:var(--tone-fg-h); text-decoration:none; } .tag i { font-style:normal; font-size:11px; opacity:.65; } /* Выбранный — тот же тон, набранный плотнее, плюс явная рамка. Другой краски не вводим: иначе на панели заведётся третий смысл. */ /* ВЫБРАННЫЙ — ПЛОТНАЯ ЗАЛИВКА, а не полупрозрачная. При светлой схеме (19.08.2026) заливка .38 давала бледный тон, на котором белый текст не читался; выбранный тег переставал отличаться от обычного. */ .tag.on { background:rgb(var(--tone)); color:#fff; font-weight:600; } .tag.on:hover { background:rgb(var(--tone)); color:#fff; } .tag.on i { opacity:.8; } /* Тег, который с текущими фильтрами ничего не добавит: виден, но не кликается — см. комментарий в web_page. */ .tag.zero { opacity:.38; cursor:default; }