/* ============================================================
ПМК — базовые стили всего сайта
------------------------------------------------------------
Переписан 25.08.2026 по «04 — ОБЛИК: решить до вёрстки.md»
и «ДИЗАЙН-СИСТЕМА.md» (сведена набело 01.09.2026). Прежняя версия (22.08)
забракована заказчиком целиком и не используется.
Здесь живёт общее для всех страниц: токены, шрифты, контейнер,
секции, типографика, метка блока, кнопки, перечни, таблица,
карточки, ссылка на пункт документа, заглушка, шапка, подвал,
форма. Страничное — в файле страницы (glavnaya.css).
Правила, которые нельзя нарушать (решения 25–26.08.2026,
уточнение 27.08 ночью):
— радиус ноль везде;
— срез 45° НЕ ставится «везде»: заказчик — «к 4-му блоку глаз уже
вообще не воспримет». На странице не больше четырёх применений;
здесь срез несут только кнопки (заливка отклика наезжает из угла
среза — форма и механика связаны). Карточки, панели, слоты —
чистые прямоугольники;
— смысловой знак берётся из общего словаря (правка 27.08 ночью):
да/нет — галочка и крестик в кружках (SVG, без border-radius),
фирменный треугольник в перечнях снят — «очень сливается»;
— прописных букв нет нигде, разрядка положительной не бывает;
— числовой слой набран Geologica с tabular-nums;
— движения ровно три вида (ДИЗАЙН-СИСТЕМА, раздел 7): раскрытие
по наведению (opacity + translateY(14px), .3s ease), проявление
при первом показе (то же, задержка 60мс между соседями, один раз)
и отклик кнопки (наезд заливки из угла среза, 200 мс). Четвёртого нет.
Появление не сдвигает соседей: скрытое живёт в потоке
с opacity 0, место зарезервировано. prefers-reduced-motion
отключает всё, содержимое при этом видно сразу.
============================================================ */
/* ── Шрифты: только локальные файлы, см. assets/fonts/README.md ── */
@font-face{font-family:Geologica;src:url(/assets/fonts/geologica-var-cyrillic.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Geologica;src:url(/assets/fonts/geologica-var-latin.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Geologica;src:url(/assets/fonts/geologica-var-latin-ext.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0100-02BB,U+20B0-20BF}
@font-face{font-family:Commissioner;src:url(/assets/fonts/commissioner-var-cyrillic.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Commissioner;src:url(/assets/fonts/commissioner-var-latin.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Commissioner;src:url(/assets/fonts/commissioner-var-latin-ext.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0100-02BB,U+20B0-20BF}
/* ── Токены — из ДИЗАЙН-СИСТЕМЫ, раздел 2 и 4 ── */
:root{
--sinij:#0D1A32; /* с основного сайта заказчика, обязателен */
--sinij-2:#16294D; /* на ступень светлее, крупные плашки и ховер кнопки */
--chernila:#101418; /* текст */
--seryj:#5A6472; /* вторичный текст */
--seryj-2:#8A93A1; /* подписи, метки */
--linia:#DDE1E7; /* границы */
--linia-2:#EDF0F3; /* тонкие разделители */
--fon:#FFFFFF;
--fon-2:#F5F7F9; /* фон блока, чередование */
--sinij-yark:#1B5FA8; /* ссылки, наведение, фокус */
--sinij-fon:#E8EFF7; /* подложка выделенного */
/* Красный снят пипеткой с логотипа ФРП (итерация 6). Редкий
смысловой сигнал: «не финансируется», сроки-отсекатели,
ограничения. НЕ БОЛЬШЕ 2% площади экрана. Нельзя: заливка кнопки,
фон плашки, шапка, подвал, рядом со знаком ФРП — это фирменный
цвет фонда, а ПМК фондом не является. */
--krasnyj:#DC0032;
--krasnyj-fon:#FCE8ED;
--da:#1F6B4D; --da-fon:#E8F2ED;
--vnim:#8C5B12; --vnim-fon:#FAEFDC;
--sans:Geologica,system-ui,-apple-system,"Segoe UI",sans-serif;
--text:Commissioner,system-ui,-apple-system,"Segoe UI",sans-serif;
/* Радиус ноль, срез 45° только у кнопок (8→12px) и рамы
калькулятора (26px) — сами срезы зашиты в clip-path по месту.
Токен --srez-kart удалён 01.09: карточных срезов нет
с итерации 8, держать отменённое решение в токенах опасно. */
--r:0; /* скруглений нет ни у чего — решение облика */
--srez:8px; /* срез кнопки, на ховере 12px */
--ten:0 1px 2px rgba(13,26,50,.05),0 10px 28px -14px rgba(13,26,50,.16);
/* ── Токены сетки (адаптив, ДИЗАЙН-СИСТЕМА 11.1) ──
Боковое поле и высота шапки — переменные, а не числа в правилах:
их подхватывают контейнер, шапка, полоса структуры, липкие
колонки и scroll-margin якорей. Новый брейкпоинт — одна строка. */
--gutter:32px; /* боковое поле контейнера */
--header-h:72px; /* высота шапки — от неё считают полоса структуры и якоря */
--sek:96px; /* интервал секции: 96 → 72 → 56 → 44 */
--lipko-top:calc(var(--header-h) + 68px); /* верх липких колонок: шапка + полоса 52 + зазор 16 */
}
/* Лестница токенов — по таблице 11.1 дизайн-системы.
Ширина 1024 принадлежит полосе 1024–1199 (gutter 28), поэтому
структурные медиа (≤1024) и токенные (≤1199/≤1023) не совпадают —
это следование таблице, а не ошибка. */
@media (min-width:1600px){:root{--gutter:40px}}
@media (max-width:1199px){:root{--gutter:28px;--header-h:68px}}
@media (max-width:1024px){:root{--sek:72px}}
@media (max-width:1023px){:root{--gutter:24px;--header-h:64px}}
@media (max-width:768px){:root{--sek:56px}}
@media (max-width:767px){:root{--gutter:20px;--header-h:60px}}
@media (max-width:479px){:root{--gutter:16px;--header-h:56px;--sek:44px}}
/* ── Основа ── */
*,*::before,*::after{box-sizing:border-box}
html{margin:0;padding:0}
body{margin:0;font-family:var(--text);font-weight:400;font-size:17px;line-height:1.62;color:var(--chernila);background:var(--fon)}
img{max-width:100%;height:auto;display:block}
p{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.018em;text-wrap:balance;margin:0;color:inherit}
h1{font-size:48px;line-height:1.08}
h2{font-size:34px;line-height:1.15}
h3{font-size:22px;line-height:1.3}
/* Заголовки уменьшаются ступенями, не clamp: clamp даёт значения
вне шкалы (web-adaptiv) */
@media (max-width:1024px){
h1{font-size:40px}
h2{font-size:30px}
}
@media (max-width:768px){
h1{font-size:33px}
h2{font-size:27px}
h3{font-size:20px}
}
@media (max-width:480px){
h1{font-size:29px}
h2{font-size:24px}
}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--sinij-yark);outline-offset:2px}
/* ── Контейнер: 1200px, поле — токен --gutter ── */
.w{max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* Узкая полоса чтения */
.uzko{max-width:720px}
/* ── Секции: воздух — токен --sek (96 → 72 → 56 → 44),
фоны чередуются решением состава страницы ── */
.sek{padding-top:var(--sek);padding-bottom:var(--sek)}
.sek--fon2{background:var(--fon-2)}
/* Выделенная светлая секция (--sinij-fon) — не больше одной на страницу
(ДИЗАЙН-СИСТЕМА, раздел 5). Переехала из glavnaya.css 14.09.2026:
понадобилась второй странице (/biznes-plan/, лист 05). */
.sek--vydel{background:var(--sinij-fon)}
.sek h2{max-width:22ch}
.podzag{font-size:19px;line-height:1.55;color:var(--seryj);max-width:720px;margin-top:16px}
.sek__telo{margin-top:48px}
.sek__stroki{margin-top:48px;max-width:720px;display:grid;gap:14px}
.sek__stroki p{font-size:16px;line-height:1.6}
/* Тело ближе к заголовку, когда подзаголовок листа снят, — правило
«48px (36px, если подзаголовок снят)» из раздела 5 дизайн-системы.
Переехал из glavnaya.css 14.09.2026 (нужен /biznes-plan/). */
.sek__telo--blizhe{margin-top:36px}
/* Внутренние отступы секций сжимаются вслед за --sek */
@media (max-width:1024px){
.sek__telo,.sek__stroki{margin-top:36px}
.sek__telo--blizhe{margin-top:28px}
.podzag{font-size:18px;margin-top:14px}
}
@media (max-width:768px){
.sek__telo,.sek__stroki{margin-top:28px}
.sek__telo--blizhe{margin-top:22px}
.podzag{font-size:17px}
}
/* ── Метка блока: строчная, со скошенным уголком 6px.
Номер листа живёт только в комментарии кода. ── */
.metka{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.metka::before{content:"";width:6px;height:6px;flex:0 0 auto;background:var(--seryj-2)}
/* ── Заголовок колонки: числовой слой, Geologica ── */
.zag-kolonki{font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.3;color:var(--seryj-2)}
/* ── Кнопки: прямоугольник со срезом правого нижнего угла.
Отклик (итерация 6, «глаз не радуется при наведении»): заливка
НАЕЗЖАЕТ ИЗ УГЛА СРЕЗА — диагональный слой linear-gradient
съезжает background-position из правого нижнего угла, 200мс.
Слой живёт в background-image, а не в псевдоэлементе: absolute
псевдоэлемент лёг бы ПОВЕРХ текста кнопки (порядок отрисовки),
а с z-index:-1 спрятался бы ПОД background-color самой кнопки.
Плюс срез подрастает 8 → 12px. Размер кнопки и соседи
не двигаются. Цвет наезда — существующий токен через --nayezd,
у каждого типа свой; новых цветов нет. Отклик один на все
кнопки сайта, включая кнопки мессенджеров и плавающую.
prefers-reduced-motion обнуляет длительности глобальным
правилом в конце файла. ── */
.knopka{--nayezd:var(--sinij-yark);display:inline-block;font-family:var(--sans);font-size:16px;font-weight:500;line-height:1;padding:16px 30px;background-color:var(--sinij);background-image:linear-gradient(135deg,rgba(255,255,255,0) 50%,var(--nayezd) 50.3%);background-size:300% 300%;background-position:0% 0%;background-repeat:no-repeat;color:#fff;text-decoration:none;border:0;cursor:pointer;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);transition:background-position .2s ease,clip-path .2s ease}
.knopka:hover{background-position:100% 100%;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.knopka--kontur{--nayezd:var(--sinij-fon);background-color:transparent;color:var(--sinij);box-shadow:inset 0 0 0 1px var(--sinij)}
/* Крупная кнопка — акцент своего блока (итерация 7, лист 13) */
.knopka--krupnaya{font-size:17px;padding:19px 44px}
/* Те же два типа на тёмном фоне */
.knopka--belaya{--nayezd:var(--sinij-fon);background-color:#fff;color:var(--sinij)}
.knopka--kontur-belaya{--nayezd:rgba(255,255,255,.16);background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
/* ── Перечни. Итерация 8: фирменный треугольный маркер снят
(«эти треугольники… очень сливается друг с другом»).
Итерация 9: залитые кружки у строчных знаков сняты —
заказчик: «одинаковые буллет-поинты — очень сильно рябит
в глазах». Знак остаётся в строках (полярность читается
без изучения), но весит втрое меньше: галочка и крестик
ШТРИХОМ, без залитого кружка. Цветной знак группы — заголовок
панели да/нет словом и цветом (ниже).
Нейтральный перечень — короткая линия. ── */
.spisok{display:grid;gap:11px}
.spisok li{position:relative;padding-left:24px}
/* Координаты знака — переменными: страница может сдвинуть знак
(у листа показателей финмодели у строки свои поля), и тогда
сдвинуться обязан и второй слой — галочка при наведении.
Пока координаты дублировались руками, галочка съехала
относительно штриха; теперь место одно. */
.spisok li::before{content:"";position:absolute;left:var(--znak-x,0);top:var(--znak-y,12px);width:11px;height:2px;background:var(--seryj-2)}
.spisok--da li,.spisok--net li{padding-left:27px}
.spisok--da li::before,.spisok--net li::before{top:6px;width:15px;height:15px;background:none;background-size:15px 15px;background-repeat:no-repeat}
.spisok--da li::before{background-image:url("data:image/svg+xml;utf8,")}
/* Красный знак: «не финансируется» и «нельзя» — разрешённое
применение --krasnyj (ДИЗАЙН-СИСТЕМА, 2.3) */
.spisok--net li::before{background-image:url("data:image/svg+xml;utf8,")}
/* Отклик строки при наведении (итерация 7): сдвиг transform
не участвует в потоке — соседей не двигает */
.spisok li{transition:transform .2s ease}
.spisok li:hover{transform:translateX(5px)}
/* Нейтральный перечень: при наведении штрих сменяется зелёной
галочкой — правка заказчика 15.09.2026. Только у нейтрального:
у перечней да/нет знак уже стоит и несёт смысл, менять его
на наведении нельзя. Два слоя, а не смена картинки: фон
не анимируется, а opacity анимируется. */
.spisok:not(.spisok--da):not(.spisok--net) li::before{transition:opacity .2s ease}
.spisok:not(.spisok--da):not(.spisok--net) li::after{content:"";position:absolute;left:var(--znak-x,0);top:calc(var(--znak-y,12px) - 7px);width:15px;height:15px;background-image:url("data:image/svg+xml;utf8,");background-size:15px 15px;background-repeat:no-repeat;opacity:0;transition:opacity .2s ease}
.spisok:not(.spisok--da):not(.spisok--net) li:hover::before{opacity:0}
.spisok:not(.spisok--da):not(.spisok--net) li:hover::after{opacity:1}
/* Перечень в две колонки. ПЕРЕЕХАЛ из glavnaya.css 16.09.2026
по правилу «компонент, понадобившийся второй странице, —
в общий файл»: понадобился перечню реестра промышленного
дизайна на /oborudovanie/ (лист 06), а стоял в файле главной,
где им набраны длинные перечни отраслей листа 03.
Значения перенесены без изменений, вместе со своим
медиазапросом: на ≤768 колонка одна. */
.spisok--dvakol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.spisok--dvakol li{align-self:start}
@media (max-width:768px){
.spisok--dvakol{grid-template-columns:1fr}
}
/* ── Таблица: основной способ подачи условий ──
РЕДАКЦИЯ 3 от 15.09.2026 — третья жалоба заказчика на таблицы
подряд (14.09 бизнес-план, 15.09 процедура, 15.09 статьи:
«мне не нравится дизайн таблиц, их надо прям пересмотреть»).
Направление — читаемость строки, а не рисование сетки:
— вертикальных линий нет, колонки разделяет воздух;
— шапка без заливки: мелкий кегль 13/500, цвет --seryj-2,
под шапкой ОДНА сильная линия --chernila. Положительный
трекинг из ТЗ не взят — разрядка запрещена дизайн-системой
(3.3), расхождение в отчёте;
— строки без заливки, между ними волосяная --linia-2,
вертикальный отступ ячейки 16px;
— колонка-ось (th scope="row") — начертание и цвет заголовка:
Geologica 500 --chernila. Требование правки 14.09 «оси
читаются сильнее содержимого» сохранено, носитель сменился
с заливки на начертание;
— числа: td.chislo — tabular-nums, выравнивание вправо, nowrap;
— отклик строки при наведении — заливка --fon-2;
— главная колонка на подложке --sinij-fon остаётся приёмом
страницы (.tabl--adresaty на /biznes-plan/) — только там,
где главный столбец сравнения есть;
— на узких экранах строка становится КАРТОЧКОЙ (ось —
заголовком, ячейки — парами «название → значение», подписи
из data-t); горизонтальная прокрутка — только у матриц
от пяти колонок, класс .tabl--matrica.
border-collapse:separate (зазор 0): при collapse липкая левая
колонка мобильной матрицы уезжает без своих линий — линии
в collapse рисует слой таблицы, а не ячейка. ── */
.tabl{border-collapse:separate;border-spacing:0;width:100%;font-size:16px}
.tabl thead th{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);background:none;text-align:left;padding:0 24px 10px 12px;border-bottom:2px solid var(--chernila);vertical-align:bottom}
.tabl td{padding:16px 24px 16px 12px;border-bottom:1px solid var(--linia-2);vertical-align:top}
.tabl td.chislo{font-family:var(--sans);font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* Заголовок числовой колонки выравнивается по своим числам */
.tabl thead th.th-chislo{text-align:right}
/* Колонка-ось: то, ПО ЧЕМУ сравнивают. Начертание и цвет заголовка,
кегль на ступень меньше текста ячейки — ось видна, но не кричит. */
.tabl tbody th{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--chernila);padding:16px 24px 16px 12px;border-bottom:1px solid var(--linia-2);vertical-align:top;text-align:left;background:none}
/* Перечень внутри ячейки идёт строками — знак «—» запрещён
заказчиком 15.09.2026, запятая длинный перечень слепляет. */
.tabl .td-stroka{display:block}
.tabl .td-stroka+.td-stroka{margin-top:4px}
/* Отклик строки: заливка. Страница может дополнить своим акцентом
(вертикальная синяя черта на главной колонке — /biznes-plan/). */
.tabl tbody tr{transition:background-color .2s ease}
.tabl tbody tr:hover{background-color:var(--fon-2)}
/* ── Рама таблицы — правка заказчика 14.09.2026 («края сильно
близко прилегают к фону»): у таблицы поле, содержимое
не липнет к фону листа. Рамка 1px --linia, фон --fon — панель
из словаря, не новый приём. Снята быть не может.
На узких экранах два режима:
— обычная таблица (до четырёх колонок) складывается
в карточки — прокрутки нет, рама остаётся панелью;
— матрица от пяти колонок (.tabl--matrica) прокручивается
ВНУТРИ рамы (overflow-x на обёртке, не на body), левая
колонка осей липкая; липкой ячейке нужен непрозрачный
фон — теперь это --fon, заливки у осей больше нет. ── */
.tabl-rama{background:var(--fon);border:1px solid var(--linia);padding:28px 32px}
@media (max-width:1024px){
.tabl-rama{padding:20px}
}
@media (max-width:767px){
/* Карточный режим: ось — заголовок карточки, остальные ячейки —
пары «название колонки → значение». Название берётся
из data-t ячейки; ячейка без data-t печатает голое значение. */
.tabl:not(.tabl--matrica){display:block}
.tabl:not(.tabl--matrica) thead{display:none}
.tabl:not(.tabl--matrica) tbody{display:block}
.tabl:not(.tabl--matrica) tbody tr{display:block;padding:14px 0;border-bottom:1px solid var(--linia-2)}
.tabl:not(.tabl--matrica) tbody tr:last-child{border-bottom:0}
.tabl:not(.tabl--matrica) tbody th{display:block;border-bottom:0;padding:0 0 2px}
.tabl:not(.tabl--matrica) tbody td{display:block;border-bottom:0;padding:8px 0 0}
.tabl:not(.tabl--matrica) tbody td[data-t]::before{content:attr(data-t);display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seryj-2);margin-bottom:3px}
.tabl:not(.tabl--matrica) td.chislo{text-align:left;white-space:normal}
/* Заливка строки при «наведении» на тач гасится общим блоком ниже */
/* Матрица от пяти колонок: прокрутка внутри рамы.
Горизонтального поля у рамы нет: липкая ячейка прилипает
к краю области прокрутки ВМЕСТЕ с padding, и в полосе поля
выглядывал уезжающий текст. Отступ от рамки дают сами ячейки
(левое поле 12px). */
.tabl-rama:has(.tabl--matrica){padding:14px 0;overflow-x:auto}
.tabl--matrica{min-width:640px}
.tabl--matrica thead th:first-child,
.tabl--matrica tbody th{position:sticky;left:0;z-index:1;background:var(--fon)}
}
/* ── Карточки: чистый прямоугольник с рамкой. Срез угла снят
итерацией 8 — «папка со скошенным углом» стояла на всём подряд
и перестала быть приёмом. Отклик — рамка синеет. ── */
.kartochki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kartochki--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Сетка карточек: 3–4 → 2 → 1 (web-adaptiv) */
@media (max-width:1024px){
.kartochki,.kartochki--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
.kartochki,.kartochki--4{grid-template-columns:1fr}
}
.kartochka{background:#fff;border:1px solid var(--linia);padding:28px 28px 24px;display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;transition:border-color .12s}
.kartochka:hover{border-color:var(--sinij)}
.kartochka h3{margin-bottom:10px}
.kartochka p{font-size:16px;color:var(--seryj);line-height:1.55}
.kartochka .ssylka-punkt{margin-top:auto;padding-top:16px}
/* ── Карточка перехода: вся карточка — ссылка, в правом верхнем
углу стрелка → 24px, синяя сразу (итерация 10 главной:
«стрелочка как сейчас малозаметна» — укрупнена и окрашена
не только при наведении). ПЕРЕЕХАЛА из glavnaya.css 15.09.2026
без изменения значений — понадобилась второй странице
(/stati/, лист 03 «Страницы услуг»); на главной это карточки
услуг листа 06. Отклик: рамка синеет (общее правило
.kartochka:hover), стрелка ярчеет и сдвигается к углу. ── */
.kartochka--perehod{position:relative}
.kartochka--perehod h3{padding-right:34px}
.kartochka__strelka{position:absolute;top:20px;right:22px;font-family:var(--sans);font-size:24px;font-weight:400;line-height:1;color:var(--sinij);transition:color .2s,transform .2s ease}
.kartochka--perehod:hover .kartochka__strelka{color:var(--sinij-yark);transform:translate(3px,-3px)}
/* ── Ряд карточки со снимком. ПЕРЕЕХАЛ из glavnaya.css 14.09.2026
по правилу «компонент, понадобившийся второй странице, — в общий
файл»: на главной это услуги, на /biznes-plan/ — случаи
региональных фондов. Снимок прижат к правому краю до рамки
(отрицательное поле съедает padding карточки), при наведении
растёт transform-ом — масштаб не в потоке, соседей не двигает.
Вид на главной не менялся: правила перенесены дословно. ── */
.kartochka__ryad{display:flex;gap:14px;align-items:center}
.kartochka__ryad p{min-width:0}
.kartochka__obekt{flex:0 0 auto;width:140px;height:140px;object-fit:contain;margin:-8px -28px -8px 0;transition:transform .2s ease}
.kartochka:hover .kartochka__obekt{transform:scale(1.12)}
@media (max-width:1024px){
.kartochka__obekt{width:110px;height:110px;margin-right:-22px}
}
@media (max-width:768px){
.kartochka__ryad{flex-direction:column;align-items:flex-start;gap:8px}
.kartochka__obekt{align-self:flex-end;margin:-6px -20px -12px 0}
}
@media (hover:none){
.kartochka:hover .kartochka__obekt{transform:none}
}
/* ── Примечание: оговорка к блоку, а не продолжение текста.
Знак «!» и подложка — правка заказчика 14.09.2026 по листу 03
/biznes-plan/. Цвет не новый: токены --vnim / --vnim-fon лежат
в системе с первой итерации и это их первое применение.
Красный сюда нельзя — он фирменный цвет ФРП и оставлен под
«не финансируется» (ДИЗАЙН-СИСТЕМА 2.1). ── */
.primech{display:flex;gap:14px;align-items:flex-start;background:var(--vnim-fon);border-left:3px solid var(--vnim);padding:18px 22px;margin-top:32px}
.primech__znak{flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--vnim);color:var(--vnim-fon);font-family:var(--sans);font-size:14px;font-weight:600;line-height:1;margin-top:1px}
.primech p{font-size:15px;line-height:1.6;color:var(--chernila)}
/* ── Карточка-показатель: число — главное в карточке.
Три яруса: значение 44/300 — что это 15/500 — пояснение.
Линия 3px сверху — структурный элемент, читается раньше текста.
Введена 26.08 по замечанию «мало дизайн-элементов». ── */
.kartochka--pokazatel{border-top:3px solid var(--sinij);padding-top:22px}
/* Селектор с родителем: иначе проигрывает «.kartochka p» */
/* Значение — синим: «ключевые числа» из разрешённых применений
акцента (ДИЗАЙН-СИСТЕМА 2.1, итерация 6) */
.kartochka .kartochka__znachenie{font-family:var(--sans);font-size:44px;font-weight:300;line-height:1.1;color:var(--sinij);font-variant-numeric:tabular-nums;margin-bottom:6px}
.kartochka .kartochka__chto{font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.3;color:var(--seryj-2);margin-bottom:14px}
/* ── Панель да/нет: перечень в белой карточке с цветным заголовком.
Итерация 8: срез снят (прямоугольник). Итерация 9: знак
из заголовка панели УБРАН — заказчик: «очень много крестиков
и галочек… в заголовках табов они не нужны». Полярность группы
держат слово, цвет и цветная линия под заголовком; строчные
знаки остались в перечне (штрихом, см. .spisok). ── */
.panel-danet{background:#fff;border:1px solid var(--linia);padding:28px;min-width:0;transition:border-color .12s}
/* Отклик при наведении: рамка синеет. Вёрстку не двигает. */
.panel-danet:hover{border-color:var(--sinij)}
.panel-danet__znak{font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.3;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid}
.panel-danet--da .panel-danet__znak{color:var(--da);border-bottom-color:rgba(31,107,77,.35)}
.panel-danet--net .panel-danet__znak{color:var(--krasnyj);border-bottom-color:rgba(220,0,50,.3)}
.panel-danet .ssylka-punkt{margin-top:18px}
/* Подпись оси над парой панелей: без неё не видно, что панели
сравниваются попарно */
.os-podpis{font-family:var(--text);font-size:15px;line-height:1.45;color:var(--seryj-2)}
/* ── Ссылка на пункт документа: опознавательный знак сайта.
Пока не ссылка, а текст — страниц с документами ещё нет.
Отклик (итерация 4): подчёркивание становится сплошным, цвет
темнеет — по правилу дизайн-системы «ссылка меняет подчёркивание
на сплошное». Вёрстку не двигает. ── */
.ssylka-punkt{display:block;width:fit-content;font-family:var(--text);font-size:13px;line-height:1.45;color:var(--seryj);border-bottom:1px dotted var(--seryj-2);transition:color .12s,border-bottom-color .12s}
.ssylka-punkt:hover{color:var(--chernila);border-bottom:1px solid var(--seryj)}
/* ── Подсказка-пункт. Итерация 7: значок «§» отменён заказчиком
(«непонятный и не выделяется») — триггером стало слово
«источник» с пунктирным подчёркиванием: значок читается как
действие, которое он делает. Кнопка настоящая — работает
мышью, с клавиатуры и тапом (is-open вешает JS). Подсказка
выходит ВНИЗ от триггера и число не перекрывает; если правый
край выходит за окно, JS ставит .punkt--pravo. Печать:
подсказки раскрываются в поток, чтобы ссылки попали в PDF. ── */
.punkt{position:relative;display:inline-flex;vertical-align:baseline}
.punkt__marker{display:inline;flex:0 0 auto;background:none;border:0;border-bottom:1px dotted var(--seryj-2);color:var(--seryj);font-family:var(--text);font-size:12px;line-height:1.2;padding:0;cursor:help;transition:border-color .2s,color .2s}
.punkt:hover .punkt__marker,.punkt.is-open .punkt__marker,.punkt__marker:focus-visible{border-bottom-style:solid;border-color:var(--sinij-yark);color:var(--sinij-yark)}
/* Скрытая подсказка — display:none, а не visibility: absolute-бокс
width:max-content у правого края страницы раздувал scrollWidth
(горизонтальное переполнение), хотя был невидим. Появление —
короткой анимацией вместо transition: display не анимируется.
Селектор из двух классов: одиночный .punkt__tip проигрывал
«классу + тегу» вроде .kalk-stroka span (грабля каскада) —
подсказка вставала display:flex и раздувала scrollWidth. */
.punkt .punkt__tip{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:max-content;max-width:320px;background:#fff;border:1px solid var(--sinij);box-shadow:var(--ten);padding:10px 14px;font-family:var(--text);font-size:13px;line-height:1.45;font-weight:400;color:var(--seryj);text-align:left;white-space:normal}
.punkt.is-open .punkt__tip{display:block;animation:punktIn .2s ease}
/* Наведение и фокус открывают подсказку только там, где ховер
настоящий: на тач эмулированный :hover и залипший focus-within
не давали закрыть подсказку повторным тапом — открытием на тач
управляет только is-open (тап, initPunkt). Условие продублировано
в JS нет — JS работает через is-open на всех устройствах. */
@media (hover:hover){
.punkt:hover .punkt__tip,.punkt:focus-within .punkt__tip{display:block;animation:punktIn .2s ease}
}
/* Та же защита специфичностью для открытых состояний не нужна:
display:block здесь тоже 0,2,0 и стоит ниже по файлу */
/* Появление без выезда: приём «плашка выезжает снизу» отменён */
@keyframes punktIn{from{opacity:0}to{opacity:1}}
.punkt--pravo .punkt__tip{left:auto;right:0}
/* Триггер в тёмном контексте */
.punkt--svetlyj .punkt__marker{border-bottom-color:rgba(255,255,255,.4);color:rgba(255,255,255,.7)}
@media print{
.punkt .punkt__tip{position:static;display:block;animation:none;border:0;box-shadow:none;padding:2px 0 0;max-width:none}
}
/* ── Раскрытие по наведению (.raskryv) УДАЛЕНО в итерации 7:
«эти всплывающие плашки очень проигрышно выглядят… очень
несовременно» — приём отменён заказчиком как класс. Текст
теперь либо виден сразу (листы 04, 09), либо переключается
сменой состояния (вкладки листа 03, аккордеоны 07 и 10).
Галочка-шеврон как значок раскрытия убрана вместе с ним:
галочка означает «готово», а не «есть ещё». ── */
/* ── Заглушка: содержимого нет, и это показано честно ── */
.zaglushka{background:var(--fon-2);border:1px dashed var(--linia);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:24px;font-family:var(--text);font-size:14px;line-height:1.45;color:var(--seryj-2)}
/* ── Ссылки в тексте ── */
.sek a:not([class]),.podval a:not([class]){color:inherit}
.ssylka-vneshn{color:var(--sinij-yark);text-decoration:underline;text-decoration-color:rgba(27,95,168,.4);text-underline-offset:3px;transition:text-decoration-color .12s}
.ssylka-vneshn:hover{text-decoration-color:var(--sinij-yark)}
/* ── Неразрывное обозначение. Обозначения стандартов фонда —
«СФ-И-242», «СФ-И-82», региональные «СФ-01», «ПФ-01» —
рвутся ПО ДЕФИСУ, неразрывные пробелы тут бессильны.
Оборачивает инструмент ../SEO/instrumenty/tipografika.js
(правило добавлено 15.09.2026 первой статьёй), руками
не проставлять — забывается. Неразрывный дефис U+2011
не используется: зависит от наличия глифа в сабсете шрифта. ── */
.nobr{white-space:nowrap}
/* ── Шапка: светлая, 72px, логотип тёмный 34px. Итерация 7: шапка
ПРИЛИПАЕТ — первый этаж навигации, общее меню сайта видно всю
прокрутку; полоса структуры страницы прилипает вторым этажом
под ней (top: 72px). Квадрат-буллет активного пункта снят
(«буллет непонятен»); наведение заметнее прежней смены цвета:
линия вырастает под пунктом слева направо, 200мс; у активного
пункта линия стоит постоянно. ── */
.shapka{background:var(--fon);border-bottom:1px solid var(--linia);height:var(--header-h);display:flex;align-items:center;position:sticky;top:0;z-index:12}
.shapka .w{display:flex;align-items:center;gap:24px;width:100%}
.shapka__logo{display:flex;align-items:center;flex:0 0 auto}
.shapka__logo img{height:34px;width:auto}
.menu{display:flex;gap:22px;margin-left:auto}
.menu__link{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--seryj);text-decoration:none;position:relative;padding:6px 0;white-space:nowrap;transition:color .2s}
/* Линия наведения: не двигает вёрстку — absolute под пунктом */
.menu__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sinij);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease}
.menu__link:hover{color:var(--chernila)}
.menu__link:hover::after{transform:scaleX(1)}
/* Активный раздел: линия стоит постоянно */
.menu__link--aktiv{color:var(--chernila)}
.menu__link--aktiv::after{transform:scaleX(1)}
/* Телефон полужирным, почта под ним мельче и серым — по образцу */
.shapka__svyaz{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.shapka__tel{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--chernila);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .12s}
.shapka__tel:hover{color:var(--sinij-yark)}
.shapka__pochta{font-family:var(--text);font-size:13px;color:var(--seryj);text-decoration:none;white-space:nowrap;transition:color .12s}
.shapka__pochta:hover{color:var(--chernila)}
.shapka__deystvie{flex:0 0 auto;font-size:15px;padding:14px 22px}
/* ── Шапка: адаптив (ДИЗАЙН-СИСТЕМА 11.2) ──
≤1250 текстовые контакты → кнопка звонка; ≤1024 меню в бургер,
кнопка действия остаётся в шапке; ≤768 кнопка — в панели
бургера на всю строку. Панель — та же