/* ============================================================ ПМК — раздел «Статьи» (/stati/) ------------------------------------------------------------ Свёрстан 15.09.2026 по ТЗ «ТЗ страниц/stati.md» на языке главной и четырёх принятых страниц. Это каркас раздела: страница обязана выглядеть нормально и с пятью карточками, и с двадцатью. Адаптив сделан сразу, брейкпоинты — лестница base.css, своих не заведено. Правка 16.09.2026 (заказчик: «сильно пусто» о первом экране и «сделал бы фильтрацию под каждый вопрос, который мы разбираем в статьях, так легче ориентироваться»): герой стал компактным и получил полосу фактов, лист 02 — фильтр по вопросу читателя. Оба блока собраны из словаря base.css; своего в файле — одна размерная ступень кнопки (.knopka--melkaya, см. лист 02). Что уехало в base.css при вёрстке этой страницы (по правилу «компонент, понадобившийся второй странице, — в общий файл»): .kartochka--perehod и .kartochka__strelka (лист 03, были в glavnaya.css, перенос дословный, вид главной не менялся). Первое живое применение .zaglushka (base.css) — пустое состояние листа 02. Фоны листов (смежные не совпадают): 01 fon-2 — 02 белый — 03 fon-2 — 04 белый — подвал тёмный. Тёмных зон нет: для страницы не снимали фотографий, тёмное на сайте даёт только снимок (ДИЗАЙН-СИСТЕМА 2.4). Акценты листов (1–2 на лист): 01 полоса фактов — 02 ряд фильтров над сеткой (заглушка под ним, пока сетка пуста) — 03 карточки перехода со стрелками — 04 крупная кнопка. Красного --krasnyj на странице нет: «нельзя» на ней нет. ============================================================ */ /* ================= ЛИСТ 01 — Первый экран ================= Светлый издательский герой (.geroy, base.css) БЕЗ полной высоты экрана. Правка заказчика 16.09.2026: «сильно пусто». Почему здесь снята высота в экран. Правило 11.3 дизайн-системы («первый экран занимает экран целиком», единица svh) написано для посадочных страниц: там герой продаёт, и полный экран — его работа. /stati/ — страница-список, её работа начинается со списка материалов. Снимков у статей нет и не будет (решение при проектировании раздела), заполнять высоту нечем, и calc(100svh - header) держал экран с меткой, заголовком и абзацем посередине и двумя пустотами по краям. Правило 11.3 отменено ТОЛЬКО для этого героя: .geroy в base.css не тронут, высоту снимает модификатор страницы. Героям посадочных страниц полный экран остаётся. Прежний модификатор .geroy--centr (центрирование содержимого по вертикали) снят: центрировать стало не по чему — при высоте по содержимому центрирование ничего не делает, а имя врало бы про то, что правило делает. Полоса фактов у героя ТЕПЕРЬ ЕСТЬ: пустоту убирает содержание, а не отступы. Колонок три, а не четыре — столько у раздела проверяемых чисел, четвёртое пришлось бы выдумать. Своя раскладка полосы компонентом разрешена прямо: «страница может задать своё, если у неё другой набор фактов» (base.css). */ .geroy--kompaktnyj .w{min-height:0} .geroy--kompaktnyj .geroy__fakty{grid-template-columns:repeat(3,minmax(0,1fr))} /* На ≤1024 возвращаем две колонки base.css, и переопределять приходится явно: правило страницы весит больше и иначе утащило бы три колонки на планшет. Замерено, почему туда нельзя: «48 документов» требует 251px, а треть полосы даёт 219px на экране 769px и 229px на 800px — число молча наезжало бы на соседнюю колонку, перенести его неразрывный пробел не даёт. Третий факт на всю строку не растягиваем: подпись факта и так обрезана по 34ch (base.css), растяжение ничего не меняет — проверено на 1024. */ @media (max-width:1024px){ .geroy--kompaktnyj .geroy__fakty{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:768px){ .geroy--kompaktnyj .geroy__fakty{grid-template-columns:1fr} } /* ================= ЛИСТ 02 — Материалы ================= Пустое состояние. Пока в сетке нет ни одной карточки .statya, сетка скрыта и стоит заглушка; первая раскомментированная карточка показывает сетку и прячет заглушку САМА — CSS :has, без правок JS и этого файла (требование ТЗ «сетка должна оживать сама»). В браузере без :has (таких среди живых не осталось) пустая сетка и без правила не рисует ничего — заглушка просто стоит под ней. */ .stati-telo .kartochki:not(:has(.statya)){display:none} .stati-telo:has(.statya) .stati-pusto{display:none} /* Заглушка — компонент .zaglushka (base.css), здесь только воздух листа: 24px компонентных полей для пустого состояния целого раздела мало. Заголовок строки — типографика ярлыка слота (.slot-foto b): Geologica 500 --seryj, кегль 15 из шкалы. */ .stati-pusto{padding:56px 24px} .stati-pusto__zag{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--seryj)} /* ---- Фильтр по вопросу читателя ---- Правка заказчика 16.09.2026: «сделал бы фильтрацию под каждый вопрос, который мы разбираем в статьях, так легче ориентироваться». Группы — готовая таксономия очереди статей («Остальные семнадцать»): пройду ли я, что от меня потребуют, как это оценивают, чем обеспечивать, региональные фонды. У статьи РОВНО ОДНА группа: региональные разделы есть во всех пяти, и при нескольких метках фильтр перестал бы фильтровать. Кнопки — существующие .knopka и .knopka--kontur, новых типов кнопок не заведено (ДИЗАЙН-СИСТЕМА 10). Нажатая группа залита, ненажатые — контурные: состояние различается заливкой, а не только цветом, и продублировано в aria-pressed. Своего в файле одна размерная ступень: ряд из пяти кнопок в кегле призыва (16/30) спорил бы с кнопкой формы — тот же приём, что .knopka--krupnaya, только в другую сторону. Понадобится второй странице — переедет в base.css. Сама фильтрация — CSS: JS ставит на .stati-telo один атрибут data-filtr, дальше работают пять правил ниже. Карточка знает свою группу из data-vopros. Ряд показывается только при живом JS (.js на , base.css): без скриптов фильтровать нечем, и мёртвый ряд кнопок читался бы как поломка. Без JS видны все пять статей — это и есть состояние «сброс». */ .stati-filtr{display:none} .js .stati-filtr{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px} .knopka--melkaya{font-size:14px;padding:11px 18px} /* Число статей в группе — числовой слой кнопки: Geologica кнопки уже стоит, добавляется только табличная ширина цифр и приглушение. Приглушение через opacity, а не цветом: кнопка бывает залитой (белый текст) и контурной (синий), цвет пришлось бы задавать дважды. */ .stati-filtr__chislo{margin-left:9px;opacity:.62;font-variant-numeric:tabular-nums} /* Пять правил по числу групп. Группа без статей кнопки не получает (JS считает карточки), но правило для неё стоит заранее — чтобы первая статья «Региональных фондов» заработала без правки CSS, как оживает сетка через :has выше. */ .stati-telo[data-filtr="projdu-li-ya"] .statya:not([data-vopros="projdu-li-ya"]), .stati-telo[data-filtr="chto-potrebuyut"] .statya:not([data-vopros="chto-potrebuyut"]), .stati-telo[data-filtr="kak-ocenivayut"] .statya:not([data-vopros="kak-ocenivayut"]), .stati-telo[data-filtr="chem-obespechivat"] .statya:not([data-vopros="chem-obespechivat"]), .stati-telo[data-filtr="regionalnye-fondy"] .statya:not([data-vopros="regionalnye-fondy"]){display:none} /* На узком экране кнопки во всю ширину не растягиваем: пять полос подряд читаются как меню, а не как фильтр. Поля и кегль убавляем ступенью — ряд складывается в две-три строки. */ @media (max-width:480px){ .js .stati-filtr{gap:8px;margin-bottom:24px} .knopka--melkaya{font-size:13px;padding:10px 14px} } /* Карточка статьи: метка группы — ярлык 13/500 --seryj-2 (шкала «метки, ярлыки»). До 16.09.2026 в ней стояла свободная тема («процедура», «бизнес-план»); с появлением фильтра тема и группа стали говорить об одном, и в метке оставлена группа — тогда после нажатия фильтра видно, по какому признаку отобраны оставшиеся карточки. Класс оставлен прежним: изменился текст, а не типографика; дата — числовой слой, Geologica с tabular-nums, прижата к низу карточки приёмом .kartochka .ssylka-punkt (margin-top:auto) — у карточек в ряду даты стоят на одной линии при разной длине текста. Отклик карточки — рамка синеет (base.css), по словарю микро-откликов для карточек. */ .statya__tema{display:block;font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.3;color:var(--seryj-2);margin-bottom:12px} .statya__data{display:block;margin-top:auto;padding-top:18px;font-family:var(--sans);font-size:13px;font-weight:400;line-height:1.3;color:var(--seryj-2);font-variant-numeric:tabular-nums} /* ================= ЛИСТ 03 — Страницы услуг ================= Три карточки перехода — компонент base.css, сетка .kartochki ведёт колонки (3 → 2 → 1). На ≤1024 сетка двухколонная и третья карточка осталась бы сиротой в полстроки — растягиваем её на всю (приём листа 05 /procedura/); на ≤768 колонка одна, растяжение снимается. */ @media (max-width:1024px){ .perehody .kartochka:last-child{grid-column:1/-1} } @media (max-width:768px){ .perehody .kartochka:last-child{grid-column:auto} } /* ================= ЛИСТ 04 — Форма ================= Форма без колонки контактов — как на трёх страницах услуг: контакты в подвале строкой ниже. Обёртка .zayavka__forma — base.css. Своих правил листу не нужно. */