/* ============================================================ ПМК — страница «Подбор программы» (/programmy/) ------------------------------------------------------------ Свёрстана 21.09.2026 по ТЗ «ТЗ страниц/programmy-konsultant.md», в тот же день внесена первая партия правок заказчика («ПРАВКИ 1 — страница консультанта.md», 19 пунктов). Страница НЕ выкладывается на сервер до отдельного разрешения заказчика (решение 19.09.2026, исключение в vylozhit.sh). Образец — лист 04 /oborudovanie/: «человек вводит — страница отвечает». Опросник собран из того же словаря: рама как .poisk__rama, поля .pole/.pole__vvod, кнопки .knopka, выдача .tabl редакции 3, «не знаю» — кнопка пунктиром как примеры запросов. Без JavaScript опросника нет вовсе (гейт .js), вместо него noscript с формой. ЕДИНСТВЕННОЕ НОВОЕ ДИЗАЙН-РЕШЕНИЕ — ЛЕНТА ОТВЕТОВ (.lenta-otvetov), согласована заказчиком 19.09.2026: ответы человека висят над результатом метками, правятся щелчком, результат пересчитывается. Правки 21.09.2026, что изменилось в стилях: — вопросы одним столбцом сверху вниз (п. 2), сетки в две колонки больше нет; — поле с подбором .poisk-pole — одна механика на регион и ОКВЭД (п. 1, 8): выдача списком кнопок, выбранное строкой с «изменить», у региона метка «разобран построчно»; — панель расчёта .raschet рядом с полем суммы (п. 3): подложка fon-2 с линией-указателем --sinij, как у строки-вывода; Правка 4 (четвёртая партия, 21.09.2026) — что добавилось в стилях: короткий список двумя группами и четырьмя колонками (.korotkij__gruppa, .korotkij__summa, .korotkij__stavka), «о чём» в две строки по словам; перечень документов за ссылкой (.perechen-ssylka), форма почты (.perechen-forma) и ответ на неё (.perechen-otvet); плотная лента шагов вместо таблицы этапов (.shagi); тонкий лист превью (.sek--tonkij); заголовок дорожной карты во всю ширину (#marshrut-zag). Всё собрано из токенов словаря. — состояние ошибки обязательного поля (п. 4): рамка и подпись цветом внимания --vnim, красный здесь не берётся — это не «нельзя», а «заполните»; — рамка «нужна дополнительная информация» на карточке программы (п. 12): .kartochka--utochnit, рамка --vnim и метка на подложке --vnim-fon — те же токены, что у метки находки; — риски по разделам .riski (п. 11) — строки через волосяные линии из словаря (.otsek), заголовок раздела — типографика .metka; — три таблицы дорожной карты (п. 16–18) — .tabl редакции 3, строки-заголовки групп и фаз .tabl__gruppa; — блок «Сколько это стоит на самом деле» снят (п. 14), стили .stavka-pravda и счётчик .programma__schet удалены. Вторая партия правок 21.09.2026 (восемь пунктов), в стилях: — подсветка вопроса, к которому вернулись из ленты ответов (п. 1): .vopros.is-podsvet, рамка --sinij на подложке --sinij-fon, гаснет сама; — описание программы в карточке (п. 5): .programma__opisanie; — справочное после дорожной карты (п. 4): .spravka в секции 04, «почему не подошли» и гранты ниже карты; — подпись «о чём» в сравнении сайта с документом (п. 7): .tabl__o-chem; кнопка перехода к вопросу в строке риска .otsek__perehod. Третья партия правок 21.09.2026 (два пункта), в стилях: — короткий список предварительно подошедших .korotkij (п. 1); — таблица документов «стадия — запрашиваем у вас — готовим сами» документы по стадиям – списком .stadiya / .doky / .dok-stroka и приметой документа .td-primeta, правило деления .dokumenty-pravilo под таблицей (п. 2); обеспечение строками «что — значение» .obesp. Фоны листов (смежные не совпадают): 01 герой fon-2 — 02 опросник sinij-fon (единственный выделенный) — 03 результат белый — 04 маршрут fon-2 — 05 как работает белый — 06 заявка fon-2 — подвал тёмный. Листы 03 и 04 появляются после подбора; без них ритм остаётся верным: sinij-fon — белый — fon-2. Акценты листов (1–2 на лист): 01 полоса фактов — 02 рама опросника и крупная кнопка — 03 строка чисел .vyvod-stroka и карточки программ — 04 таблица документов и крупная кнопка — 05 перечень — 06 крупная кнопка. Красный: только знак «отсекает» в строках стопов — это «нельзя», разрешённое применение (ДИЗАЙН-СИСТЕМА 2.3), меньше 2 % площади. Данные в этот файл и в разметку руками не вписываются: пакет вставляет сборщик sobrat-prototip.py, показ рендерит programmy.js через одну прослойку poluchitPodbor(). ============================================================ */ /* ================= ЛИСТ 01 — Первый экран ================= Компактный герой (.geroy--kompaktnyj, base.css): первый экран отдан опроснику, герой живёт по содержимому. Кадра у страницы нет — тёмное на сайте даёт только фотография, поэтому фон fon-2. Числовые факты полосы заполняет сборщик из данных базы — руками они не пишутся и не правятся. */ .geroy--kompaktnyj .geroy__fakty{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1024px){ .geroy--kompaktnyj .geroy__fakty{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:480px){ .geroy--kompaktnyj .geroy__fakty{grid-template-columns:1fr} } /* ================= ЛИСТ 02 — Опросник ================= Рама — та же панель, что у поиска /oborudovanie/: белый фон, рамка 1px --linia, поле 28/32. Подложка не липнет к фону листа (правка заказчика 14.09.2026). Без JavaScript блока нет. Вопросы идут ОДНИМ СТОЛБЦОМ сверху вниз (правка 21.09.2026, п. 2): боковая раскладка сбивала. Поля ввода не шире 560px — длиннее строка ввода не читается, а рама остаётся во всю ширину листа, как у образца. */ .konsultant{display:none} .js .konsultant{display:block} .konsultant__rama{background:#fff;border:1px solid var(--linia);padding:32px 36px} .konsultant__voprosy{display:grid;gap:30px} .vopros{min-width:0} .vopros .pole,.vopros__para,.poisk-pole__vydacha{max-width:560px} /* Номер вопроса — числовой слой: мелкий, серый, как заголовки колонок. Подпись вопроса — как подпись поля формы. */ .vopros__nomer{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);margin-bottom:6px} .vopros__podpis{display:block;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--chernila);margin-bottom:10px} .vopros__hint{font-size:13px;line-height:1.5;color:var(--seryj-2);margin-top:8px;max-width:64ch} /* Пара числовых полей в одном вопросе */ .vopros__para{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px} /* Поле с кнопкой «не знаю» под ним: кнопка стоит вне label, чтобы нажатие не ставило фокус в поле. */ .pole-s-knopkoj{min-width:0} .pole-s-knopkoj .knopka-punktir{margin-top:8px} /* Вопрос, к которому вернулись из ленты ответов или из строки «не хватает ответа» (правка 2, п. 1): рамка --sinij на подложке --sinij-fon вокруг всего вопроса, ставится скриптом и гаснет сама через две секунды. Тень, а не рамка: не двигает раскладку. */ .vopros{transition:box-shadow .45s ease} .vopros.is-podsvet{box-shadow:0 0 0 10px var(--sinij-fon),0 0 0 11px var(--sinij)} /* Обязательное поле без ответа (правка 21.09.2026, п. 4): рамка и подпись цветом внимания. Это не «нельзя», поэтому не красный. */ .vopros.is-oshibka .pole__vvod{border-color:var(--vnim)} .vopros__oshibka{font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.45;color:var(--vnim);margin-top:8px;max-width:64ch} /* Сумма и расчёт рядом (п. 3): поле слева, справа панель с числами, которые страница считает из условий программ по введённой сумме. Панель — подложка fon-2 с линией-указателем --sinij, как у строки-вывода: это ответ страницы, а не ещё одно поле. */ .vopros__s-raschetom{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px 32px;align-items:start} .raschet{background:var(--fon-2);border-left:3px solid var(--sinij);padding:16px 20px;max-width:560px} .raschet__pusto{font-size:14px;line-height:1.5;color:var(--seryj)} .raschet__stroka{display:flex;justify-content:space-between;gap:16px;font-size:15px;line-height:1.5;padding:6px 0;border-bottom:1px solid var(--linia-2)} .raschet__stroka:last-of-type{border-bottom:0} .raschet__chto{color:var(--seryj)} .raschet__znach{font-family:var(--sans);font-weight:500;color:var(--chernila);text-align:right;font-variant-numeric:tabular-nums} .raschet__otkuda{font-size:13px;line-height:1.5;color:var(--seryj-2);margin-top:8px} /* Кнопки-выборы: прямоугольник с рамкой, выбранный — рамка --sinij и подложка --sinij-fon. Кнопки, а не ссылки: меняют содержимое страницы. «Не знаю» равноправен и не выглядит поражением. Повторное нажатие снимает выбор (п. 5). */ .vybor{display:flex;flex-wrap:wrap;gap:10px} .vybor__knopka{font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.2;color:var(--chernila);background:#fff;border:1px solid var(--linia);padding:11px 18px;cursor:pointer;transition:border-color .12s,background-color .12s} .vybor__knopka:hover{border-color:var(--sinij)} .vybor__knopka.is-vybrano{border-color:var(--sinij);background:var(--sinij-fon)} /* Вариант-чекбокс (обеспечение): та же кнопка, состояние даёт спрятанный input — класс не нужен. */ .vybor__knopka:has(input:checked){border-color:var(--sinij);background:var(--sinij-fon)} label.vybor__knopka{user-select:none} /* Поле с подбором .poisk-pole — механика листа 04 /oborudovanie/, одна на регион и ОКВЭД (п. 1, 8): поле, выдача-подсказка списком кнопок, выбранное встаёт строкой с пунктирной кнопкой «изменить». У региона в выдаче и в строке стоит метка «разобран построчно»: она объясняет, почему ответ по таким регионам глубже. */ .poisk-pole__vydacha{margin-top:10px;border:1px solid var(--linia);background:#fff;max-height:300px;overflow-y:auto} .poisk-pole__stroka{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--linia-2);padding:10px 14px;cursor:pointer;transition:background-color .15s} .poisk-pole__stroka:last-child{border-bottom:0} .poisk-pole__stroka:hover,.poisk-pole__stroka.is-tekushchaya{background:var(--fon-2)} .poisk-pole__kod{flex:0 0 auto;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--sinij);font-variant-numeric:tabular-nums} .poisk-pole__imya{font-family:var(--text);font-size:14px;line-height:1.45;color:var(--seryj);min-width:0} .poisk-pole__metka{flex:0 0 auto;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--da)} .poisk-pole__pusto{padding:12px 14px;font-size:14px;line-height:1.5;color:var(--seryj)} .poisk-pole__vybrano{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--chernila);max-width:64ch} .poisk-pole__vybrano .poisk-pole__kod{font-size:17px} .poisk-pole__vybrano .poisk-pole__imya{flex:1 1 220px} /* Кнопка-пунктир: как примеры запросов листа 04 — действие второго плана, меняет содержимое страницы. Активное состояние — сплошная линия чернилами: так помечена нажатая «не знаю». */ .knopka-punktir{background:none;border:0;padding:0;cursor:pointer;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} .knopka-punktir:hover{color:var(--chernila);border-bottom:1px solid var(--seryj)} .knopka-punktir.is-aktiv{color:var(--chernila);border-bottom:1px solid var(--chernila)} .konsultant__deystvie{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px;padding-top:26px;border-top:1px solid var(--linia-2)} .konsultant__ogovorka{font-size:14px;line-height:1.5;color:var(--seryj);max-width:44ch} /* ================= ЛЕНТА ОТВЕТОВ ================= ЕДИНСТВЕННОЕ НОВОЕ ДИЗАЙН-РЕШЕНИЕ СТРАНИЦЫ, согласовано заказчиком 19.09.2026. Ответы человека висят полосой над результатом, каждый — отдельной меткой «подпись → значение». Щелчок по метке возвращает к вопросу и ставит фокус в поле; результат пересчитывается при каждой правке ответа. Метка — кнопка, а не ссылка: она меняет содержимое страницы. Подпись — типографика .metka (13/500 --seryj-2), значение — числовой слой Geologica 15/500. Рама — панель 1px --linia на белом, как у рамы опросника. */ /* После подбора страница прокручивается к ленте, а не к началу секции (правка 3, п. 1): короткий список должен читаться без прокрутки. Отступ прокрутки — как у секций (шапка + полоса структуры) плюс воздух. */ .lenta-otvetov{display:flex;flex-wrap:wrap;gap:8px 10px;background:#fff;border:1px solid var(--linia);padding:12px 18px;margin-bottom:24px;scroll-margin-top:calc(var(--header-h) + 68px + 16px)} .lenta-otvetov__otvet{display:flex;align-items:baseline;gap:8px;background:var(--fon-2);border:1px solid var(--linia-2);padding:8px 14px;cursor:pointer;font-family:var(--sans);transition:border-color .12s,background-color .12s} .lenta-otvetov__otvet:hover{border-color:var(--sinij);background:#fff} .lenta-otvetov__podpis{font-size:12px;font-weight:500;color:var(--seryj-2)} .lenta-otvetov__znachenie{font-size:15px;font-weight:500;color:var(--chernila);font-variant-numeric:tabular-nums} /* Пустой ответ («не знаю») — значение серым: честное состояние, а не ошибка. */ .lenta-otvetov__otvet.is-pusto .lenta-otvetov__znachenie{color:var(--seryj)} /* ================= ЛИСТ 03 — Результат ================= */ /* Строка чисел — акцент листа: что мы только что сделали, с числами. Носитель — .vyvod-stroka из base.css, здесь только отступ под ленту. */ #rezultat .vyvod-stroka{margin-top:0;margin-bottom:28px} .rezultat-blok{margin-bottom:32px} .rezultat-blok>h3{margin-bottom:6px} .rezultat-blok__pochemu{font-size:14px;line-height:1.55;color:var(--seryj);margin-bottom:18px;max-width:72ch} /* Строки через волосяные линии со знаком полярности слева — словарь перечней. Носитель для «что вас отсекает» в результате и для рисков по разделам в дорожной карте. */ .otsek{border-top:1px solid var(--linia)} .otsek__stroka{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;padding:16px 4px;border-bottom:1px solid var(--linia-2)} .otsek__znak{width:15px;height:15px;margin-top:5px;background-size:15px 15px;background-repeat:no-repeat} .otsek__znak--stop{background-image:url("data:image/svg+xml;utf8,")} .otsek__znak--vnim{background-image:url("data:image/svg+xml;utf8,")} .otsek__znak--vopros{background-image:url("data:image/svg+xml;utf8,")} .otsek__text{font-size:16px;line-height:1.6;color:var(--chernila);max-width:78ch} .otsek__programma{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);display:block;margin-bottom:2px} /* Правка 5, п. 4: ссылка на документ фонда – ОТДЕЛЬНОЙ строкой. Приклеенная к концу причины, она рвала строку пополам, и причина переставала читаться. В base.css у .ssylka-punkt блочный показ, здесь он больше не отменяется. */ .otsek__text .ssylka-punkt{margin-top:6px} .otsek__programmy{display:block;font-size:13px;line-height:1.5;color:var(--seryj-2);margin-top:4px} /* Переход к вопросу из строки «не хватает ответа» (правка 2, п. 1) — та же кнопка-пунктир, что «не знаю» у полей. */ .otsek__perehod{display:block;margin-top:6px} /* Метка на подложке внимания: «этого нет на сайте фонда» у находки и «нужна дополнительная информация» на карточке программы (п. 12). Один приём, два текста. Не красная. */ .nahodka-metka,.utochnit-metka{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:500;line-height:1.2;color:var(--vnim);background:var(--vnim-fon);padding:4px 8px;vertical-align:1px} .nahodka-metka{margin-right:10px} .utochnit-metka{margin-bottom:12px;align-self:flex-start} /* Карточки подходящих программ: словарь base.css. Первая — главная в листе: линия сверху 5px (акцент «главной в листе» по дизайн-системе). Карточка, по которой не хватает ответов или есть оговорки, получает рамку внимания и метку (п. 12): видно, что это не итог, тут надо уточнить. Счётчиков «3 оговорки, 27 находок» больше нет. */ .programmy-setka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .programmy-setka .kartochka--pokazatel{padding-top:24px} .programmy-setka .kartochka--glav{border-top-width:5px} .programmy-setka .kartochka--utochnit{border-color:var(--vnim)} .programmy-setka .kartochka--utochnit.kartochka--pokazatel{border-top-color:var(--sinij)} .programma__uroven{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);margin-bottom:8px} /* Одна-две строки о программе (правка 2, п. 5): «на что» и «кому» словами документов фонда. Текстовый слой, серым, «кому» чернилами: круг заявителей — то, что отсекает. */ .programma__opisanie{font-size:14px;line-height:1.5;color:var(--seryj);margin-top:6px;max-width:60ch} .programma__opisanie--komu{color:var(--chernila)} .programma__usloviya{display:grid;gap:8px;margin:14px 0 6px} .programma__stroka{display:flex;justify-content:space-between;gap:16px;font-size:15px;line-height:1.5;border-bottom:1px solid var(--linia-2);padding-bottom:8px} /* Условие ставки — строкой во всю ширину под парой «что – значение» (правка 7, п. 6). Раньше оно жило внутри названия и резалось многоточием на 80 знаках: «…радиоэлектроники и (или)…». */ .programma__stroka--s-usloviem{flex-wrap:wrap} .programma__uslovie{flex:0 0 100%;font-size:14px;line-height:1.5;color:var(--seryj);margin-top:4px} .programma__chto{color:var(--seryj)} .programma__znach{font-family:var(--sans);font-weight:500;color:var(--chernila);text-align:right;font-variant-numeric:tabular-nums} .programma__vnim{font-size:14px;line-height:1.55;color:var(--seryj);margin-top:10px} .programma__deystvie{margin-top:auto;padding-top:18px} /* Уточняющие вопросы на результате (п. 6, 10, 13): рама как у опросника, вопрос остаётся на месте после ответа с видимым выбором, у каждого — зачем он и сколько программ уточнит. */ .utochneniya{background:#fff;border:1px solid var(--linia);padding:24px 28px} .utochneniya__zag{font-family:var(--sans);font-size:18px;font-weight:600;margin-bottom:6px} .utochneniya .rezultat-blok__pochemu{margin-bottom:6px} .utochneniya .vopros{margin-top:22px;padding-top:18px;border-top:1px solid var(--linia-2)} .utochneniya .vopros__podpis{margin-bottom:6px} .utochneniya__zachem{font-size:13px;line-height:1.5;color:var(--seryj-2);margin-bottom:10px;max-width:64ch} .utochneniya__zachem b{font-weight:500;color:var(--seryj)} /* Честный отказ: без кнопки заявки, с причинами и «что поможет» */ .otkaz{border-left:3px solid var(--sinij);padding-left:24px;max-width:820px} .otkaz h3{margin-bottom:10px} .otkaz p{font-size:16px;line-height:1.6;color:var(--chernila);max-width:72ch} .otkaz .otsek{margin:18px 0 22px} /* Свод по неразобранному региону: карточка фонда + строки «что — значение» */ .svod__rama{background:#fff;border:1px solid var(--linia);border-top:3px solid var(--sinij);padding:28px 32px;max-width:860px} .svod__fond{font-family:var(--sans);font-size:22px;font-weight:600;line-height:1.3;margin-bottom:4px} .svod__kontakt{font-size:14px;color:var(--seryj);margin-bottom:18px} .svod__stroki{display:grid;gap:12px} .svod__stroka{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;border-bottom:1px solid var(--linia-2);padding-bottom:12px} .svod__chto{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);padding-top:2px} .svod__znach{font-size:15px;line-height:1.55;color:var(--chernila)} @media (max-width:767px){ .svod__stroka{grid-template-columns:1fr;gap:4px} } /* Гранты — справка, без нажима */ .granty .tabl{max-width:860px} .granty h3{margin-bottom:6px} /* Справочное после дорожной карты (правка 2, п. 4): «почему не подошли» и гранты. Пока программа не выбрана — единственное содержимое секции 04; после выбора отделено от карты линией. */ .spravka>*+*{margin-top:48px} .spravka--posle-karty{margin-top:64px;padding-top:48px;border-top:1px solid var(--linia)} /* «Почему не подошли остальные» — единственный аккордеон страницы (.akk, base.css), внутри таблица редакции 3. */ .neproshli{max-width:1000px} .neproshli .tabl td{font-size:15px} /* ================= ЛИСТ 04 — Дорожная карта ================= Порядок: что может помешать (риски по разделам, п. 11) — где сайт расходится с документом, сравнением (п. 15, правка 2 п. 7) — документы таблицей со скачиванием (п. 16), по стадиям, где поимённого перечня нет (правка 2 п. 8) — этапы с фазами (п. 17) — обрывы — что придётся написать — обеспечение — отчётность и санкции таблицей (п. 18) — кнопка заявки — цитата фонда — справочное (правка 2 п. 4). */ .marshrut-blok{margin-top:48px} .marshrut-blok:first-child{margin-top:0} .marshrut-blok>h3{margin-bottom:6px} .marshrut-blok>.rezultat-blok__pochemu{margin-bottom:16px} #marshrut .tabl-rama{max-width:1040px} #marshrut .tabl td,#marshrut .tabl tbody th{font-size:15px} #marshrut .tabl .ssylka-punkt{display:block;margin-top:6px} /* Строка-заголовок группы внутри таблицы: фаза маршрута, группа документов. Типографика метки, сильная линия снизу как у шапки — это ось сравнения, а не строка данных. */ .tabl tbody tr.tabl__gruppa th{font-size:13px;font-weight:500;color:var(--seryj-2);padding:26px 12px 8px;border-bottom:2px solid var(--chernila);background:none} .tabl tbody tr.tabl__gruppa:first-child th{padding-top:4px} .tabl tbody tr.tabl__gruppa:hover{background:none} .tabl__gruppa small,#marshrut .tabl tbody th small{display:block;font-weight:400;font-family:var(--text);font-size:13px;line-height:1.45;color:var(--seryj);margin-top:3px} .tabl td.tabl__seryj{color:var(--seryj)} /* Подпись «о чём» над значением в сравнении сайта с документом (правка 2, п. 7): три колонки, предмет сравнения — меткой в первой. */ .tabl__o-chem{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seryj-2);margin-bottom:4px} #marshrut .tabl td small{display:block;font-size:13px;line-height:1.45;color:var(--seryj);margin-top:6px} /* Риски по разделам: заголовок раздела — типографика .metka, строки — словарь .otsek. */ .riski__razdel{margin-top:22px} .riski__zag{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);display:flex;align-items:center;gap:9px;margin-bottom:6px} .riski__zag::before{content:"";width:6px;height:6px;flex:0 0 auto;background:var(--seryj-2)} /* Скачивание таблицы документов: кнопка второго плана и подпись рядом. Работает после заявки (решение заказчика 21.09.2026). */ .skachat{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px} .skachat__podpis{font-size:14px;line-height:1.5;color:var(--seryj);max-width:60ch} .skachat__podpis.is-vnim{color:var(--vnim)} .dokumenty-itogo{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--chernila);margin-bottom:18px} .obryvy{display:grid;gap:12px;max-width:78ch;margin-top:12px} .obryvy__stroka{border-left:3px solid var(--krasnyj);padding-left:20px;font-size:15px;line-height:1.55;color:var(--chernila)} #marshrut .spisok li{font-size:15px;max-width:78ch} .marshrut-deystvie{margin-top:48px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} /* Цитата фонда у заявки: чужой текст в кавычках, с источником */ /* ================= ЛИСТ 05 — Как это работает ================= Собран из .sek__stroki и .spisok — своих правил не требует. */ /* ================= ПРАВКА 3 — короткий список и таблицы «вы / мы» ================= Третья партия правок 21.09.2026 (два пункта). Короткий список предварительно подошедших (п. 1): строка на программу — название с меткой уровня, одна строка «о чём», сумма и ставка одной строкой. Без условий, рисков и находок: они приходят после уточнений. Строки через волосяные линии, как перечни словаря. */ .korotkij{border-top:1px solid var(--linia)} /* Правка 4, п. 1 и 3: две группы с заголовками (региональные первыми), сумма и ставка — СВОИ колонки. В одной клетке «3–75 млн ₽, ставка 5 %» ни сумму, ни ставку сравнить нельзя, а ради этого список и существует. Колонки чисел фиксированной ширины: на 1280 и 1680 они стоят столбиком и читаются сверху вниз. */ .korotkij__gruppa{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);padding:22px 4px 7px;border-bottom:2px solid var(--chernila)} .korotkij__gruppa:first-child{padding-top:6px} .korotkij__stroka{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) 168px 152px;gap:4px 24px;padding:12px 4px;border-bottom:1px solid var(--linia-2);align-items:start} .korotkij__imya{font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.3;color:var(--chernila);min-width:0} /* «О чём»: две строки в клетке, остальное открывается нажатием (правка 5, п. 6). Обрезка текста снята и здесь, и в выгрузке — клетка держит полный текст, число строк задаёт .raskryv-tekst. */ .korotkij__o-chem{font-size:14px;line-height:1.5;color:var(--seryj);min-width:0} .korotkij__o-chem--net{color:var(--seryj-2)} .korotkij__summa,.korotkij__stavka{font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.4;color:var(--chernila);font-variant-numeric:tabular-nums;min-width:0} .korotkij__stavka-znach{display:block} /* Пересмотр ставки ВВЕРХ — отдельной строкой под ставкой: скилл запрещает называть ставку половиной, а в узкую колонку целиком она не ложится. */ .korotkij__stavka-vverh{display:block;font-family:var(--text);font-size:12px;font-weight:400;line-height:1.4;color:var(--vnim);margin-top:3px} .korotkij__stavka--net .korotkij__stavka-znach{font-weight:400;color:var(--seryj)} /* Кнопка-пунктир внутри подводки уточнений: «показать подробности, не отвечая» — действие второго плана. */ .utochneniya .rezultat-blok__pochemu .knopka-punktir{font-size:14px} /* Таблица документов по стадиям (п. 2): «стадия — запрашиваем у вас — готовим сами — делаем вместе». Стадия — узкая колонка, клетки — списки документов; условная группа фонда («только если в залог передаётся недвижимость») — подзаголовком внутри клетки типографикой метки; примета документа («форма фонда», «по требованию фонда») — мелко в строку за названием. Правило деления — мелкой строкой под таблицей: его видит клиент, и его же правит заказчик. */ #marshrut .tabl .td-stroka .td-primeta{display:inline;font-size:12px;color:var(--seryj-2);margin:0 0 0 8px} /* .dokumenty-pravilo снят правкой 4, п. 8: абзац «Как делим» заказчик счёл лишним — разделение видно по самой таблице. Само правило живёт в выгрузке (kto_delaet), стиля ему больше не нужно. */ /* Обеспечение строками «что — значение» — приём свода по региону, без рамы. */ .obesp{max-width:860px} @media (max-width:1024px){ .korotkij__stroka{grid-template-columns:minmax(0,1fr) 150px 140px;gap:4px 20px} .korotkij__imya{grid-column:1 / -1} } @media (max-width:767px){ .korotkij__stroka{grid-template-columns:1fr;gap:4px} .korotkij__imya{grid-column:auto} .korotkij__o-chem .raskryv-tekst__telo{--strok:4} } /* ================= ПРАВКА 4 — превью, перечни, шаги ================= Четвёртая партия правок 21.09.2026, одиннадцать пунктов. */ /* Лист «Как мы проверяем программы» переехал в начало страницы (п. 11). Лист тонкий: первый экран остаётся за опросником, а превью читается по пути к нему. */ .sek--tonkij{padding-top:48px;padding-bottom:48px} @media (max-width:1024px){.sek--tonkij{padding-top:40px;padding-bottom:40px}} @media (max-width:767px){.sek--tonkij{padding-top:32px;padding-bottom:32px}} /* Превью в две колонки: заголовок слева, текст справа. Иначе блок вырастал на 700px и отжимал опросник на второй экран – а опросник и есть то, ради чего человек пришёл. */ .kak-prevyu{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:24px 64px;align-items:start} .kak-prevyu__zag h2{max-width:14ch} .kak-prevyu__telo p{font-size:16px;line-height:1.6;color:var(--chernila);max-width:72ch} .kak-prevyu__telo p+p{margin-top:14px} .kak-prevyu__telo .vyvod-stroka{margin-top:22px;font-size:18px;color:var(--chernila)} @media (max-width:1024px){ .kak-prevyu{grid-template-columns:1fr;gap:18px} .kak-prevyu__zag h2{max-width:22ch} } /* Перечень под вопросом уточнения (п. 5): сам перечень стоит рядом с вопросом, а варианты ответа называют себя словами. */ .vopros__perechen{font-size:14px;line-height:1.55;color:var(--chernila);margin-bottom:8px;max-width:72ch} /* Заголовок дорожной карты во всю ширину секции (п. 10): у .sek h2 в base.css стоит max-width 22ch, и имя программы ложилось в пять строк. Здесь заголовок собирается из данных, его длину вёрсткой не угадать. */ #marshrut-zag{max-width:none} /* Перечень документов открывается ссылкой (п. 6): первый на странице бесплатно, следующий — за почту. Ссылка живёт в клетке таблицы вместо списка, рядом — сколько документов в этой стадии. */ .perechen-ssylka{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--sinij-yark);border-bottom-color:var(--sinij-yark)} .perechen-ssylka:hover{color:var(--sinij);border-bottom-color:var(--sinij)} /* Стадии, состав которых фонд построчно не печатает, — одной строкой под таблицей, а не строкой на каждую: заказчик увидел пять одинаковых строк подряд. */ /* Документы по стадиям списком, а не таблицей (правка 6, п. 1–3). Три колонки резали длинные названия по одному слову, а условную группу фонда печатали заново в каждой колонке. Теперь документ занимает всю ширину, а «кто готовит» стоит отдельной пометкой справа — она короткая и одинаковой длины, колонку держать нечем. */ .stadiya{margin-top:30px} .stadiya__zag{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.3; display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding-bottom:10px;border-bottom:2px solid var(--chernila)} .stadiya__skolko{font-family:var(--text);font-weight:400;font-size:14px;color:var(--seryj-2)} .stadiya__pometka{font-size:14px;line-height:1.5;color:var(--seryj);margin-top:10px} .stadiya__zakryto{margin-top:14px} .doky__gruppa{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2); margin:20px 0 2px} .doky__gruppa--zapros{color:var(--vnim)} .dok-stroka{display:flex;align-items:baseline;gap:24px;padding:10px 0; border-bottom:1px solid var(--linia-2)} .dok-stroka:last-child{border-bottom:0} .dok-stroka__imya{flex:1;font-size:15px;line-height:1.5;min-width:0} .dok-stroka__imya .td-primeta{display:inline;font-size:12px;color:var(--seryj-2);margin-left:8px} .dok-stroka__kto{flex:none;width:150px;text-align:right;font-family:var(--sans); font-size:13px;font-weight:500;color:var(--sinij);line-height:1.4} .skachat__usloviya{font-size:14px;line-height:1.55;color:var(--seryj-2);margin-top:10px;max-width:78ch} .skachat__spisok{color:var(--seryj)} @media (max-width:640px){ .dok-stroka{display:block;padding:12px 0} .dok-stroka__kto{width:auto;text-align:left;display:block;margin-top:4px} } .dokumenty-ostalnye{font-size:14px;line-height:1.55;color:var(--seryj);margin-top:14px;max-width:78ch} /* Форма почты: панель с линией-указателем — приём панели расчёта у поля суммы. Поле и кнопка в строку, на узком — столбиком. */ .perechen-forma{background:var(--fon-2);border-left:3px solid var(--sinij);padding:20px 24px;margin-top:22px;max-width:640px} .perechen-forma__zag{font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.3;color:var(--chernila)} .perechen-forma__tekst{font-size:14px;line-height:1.55;color:var(--seryj);margin-top:4px} .perechen-forma__stroka{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:14px} .perechen-forma__stroka .pole{flex:1 1 260px;min-width:0} .perechen-forma__stroka .knopka{flex:0 0 auto} .perechen-forma__oshibka{font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.45;color:var(--vnim);margin-top:10px} .perechen-forma__soglasie{font-size:12px;line-height:1.5;color:var(--seryj-2);margin-top:12px} .perechen-forma__soglasie a{color:inherit} .perechen-otvet{background:var(--sinij-fon);padding:20px 24px;margin-top:22px;max-width:640px} .perechen-otvet__zag{font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.3;color:var(--chernila)} .perechen-otvet__tekst{font-size:14px;line-height:1.55;color:var(--seryj);margin-top:4px} .perechen-otvet .knopka{margin-top:14px} /* Этапы: плотная лента шагов вместо таблицы из четырёх колонок (п. 9). Две колонки «что делаете вы» и «что делаем мы» были почти пустыми — из 1005 шагов у 662 идёт ход фонда. Осталось: номер, название, наша строка там, где работа наша, срок и кто ведёт коротким словом. Ряд 12px вместо 16 у таблицы, шапки нет — значения называют себя сами. */ .shagi{border-top:1px solid var(--linia)} .shagi__faza{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);padding:22px 0 7px;border-bottom:2px solid var(--chernila)} .shagi__faza:first-child{padding-top:6px} .shagi__shag{display:grid;grid-template-columns:30px minmax(0,1fr) 190px 124px;gap:2px 18px;padding:10px 0;border-bottom:1px solid var(--linia-2);align-items:start} .shagi__nomer{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);font-variant-numeric:tabular-nums;padding-top:3px} .shagi__sut{min-width:0} /* Правка 6, п. 5: шаг набран полужирным во всю ленту и давал баннерную слепоту – восемь одинаково жирных строк подряд. Вес обычный, отличие держат кегль и цвет. */ .shagi__zag{font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.4;color:var(--chernila)} .shagi__rabota{font-size:14px;line-height:1.5;color:var(--seryj);margin-top:3px} .shagi__utochnenie{font-size:13px;line-height:1.45;color:var(--seryj-2);margin-top:3px} .shagi__srok{font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.45;color:var(--chernila);font-variant-numeric:tabular-nums;padding-top:2px;min-width:0} .shagi__srok--net{font-weight:400;color:var(--seryj-2)} .shagi__kto{font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.4;color:var(--sinij);padding-top:3px;min-width:0} .shagi__kto--net{font-weight:400;color:var(--seryj-2)} @media (max-width:1024px){ .shagi__shag{grid-template-columns:26px minmax(0,1fr) 165px 112px;gap:2px 14px} } @media (max-width:767px){ .shagi__shag{grid-template-columns:24px minmax(0,1fr);gap:2px 12px} .shagi__srok,.shagi__kto{grid-column:2 / -1;padding-top:2px} .perechen-forma,.perechen-otvet{padding:16px} .perechen-forma__stroka .knopka{width:100%;text-align:center} } /* ================= ПРАВКА 5 — шапка списка, раскрытие текста, направления и таблица документов ================= Пятая партия правок 23.09.2026, девять пунктов. */ /* Шапка колонок короткого списка (п. 5). Сетка та же, что у строки, типографика — шапки таблицы из base.css: человек читает список как таблицу, и подписи должны выглядеть так же. */ .korotkij__shapka{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) 168px 152px;gap:4px 24px;padding:6px 4px 8px;border-bottom:2px solid var(--chernila);font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2)} /* Заголовок первой группы идёт сразу за шапкой — двойная жирная линия подряд читается как сбой. */ .korotkij__shapka+.korotkij__gruppa{padding-top:16px;border-bottom-width:1px} /* Медиазапросы шапки стоят ЗДЕСЬ, рядом со своим правилом, а не в блоке правки 3 выше: одноклассовые правила решает порядок, и правило из верхнего блока проигрывало этому (свод граблей, «перенос правила меняет порядок каскада»). */ @media (max-width:1024px){ .korotkij__shapka{grid-template-columns:minmax(0,1fr) 150px 140px;gap:4px 20px} /* Название занимает свою строку целиком, подписывать его нечем. */ .korotkij__shapka-imya{display:none} } @media (max-width:767px){ /* Строка стала столбиком – шапка колонок ей не подходит, и подпись переезжает к самой клетке (приём .tabl td[data-t] из base.css). */ .korotkij__shapka{display:none} .korotkij__stroka [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:2px} } /* Текст, который дочитывается на месте (п. 6). Клетка держит заданное число строк, полный текст лежит в разметке, кнопка разворачивает его НАЖАТИЕМ — на телефоне наведения нет, а ховер, двигающий вёрстку, запрещён сводом граблей. Лишнюю кнопку снимает замер в programmy.js: по длине строки угадать нельзя, ширина клетки на 1280 и на 1680 разная. */ .raskryv-tekst{min-width:0} .raskryv-tekst__telo{display:-webkit-box;-webkit-line-clamp:var(--strok,2);-webkit-box-orient:vertical;overflow:hidden} .raskryv-tekst.is-otkryt .raskryv-tekst__telo{display:block;overflow:visible} .raskryv-tekst__knopka{margin-top:5px} /* Направления в вопросе «Что хотите сделать» (п. 7). Кнопка несёт число программ, стоящих за направлением, — оно и задаёт порядок. Редкие направления лежат под переключателем и раскрываются на месте. Разделы (.vybor__gruppa) ждут поля «группа» в справочнике направлений, см. отчёт. */ .vybor__skolko{display:block;font-family:var(--text);font-size:12px;font-weight:400;line-height:1.35;color:var(--seryj-2);margin-top:4px} .vybor__knopka.is-vybrano .vybor__skolko{color:var(--sinij)} .vybor__gruppa{flex:0 0 100%;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);margin:12px 0 0} .vybor__gruppa:first-child{margin-top:0} /* Кнопкой, а не пунктирной ссылкой: заказчик её не находил глазами (правка 7, п. 4). Ширину не растягиваем — кнопка во всю строку читалась бы как главное действие вопроса. */ /* Обёртка занимает строку целиком, кнопка внутри неё — по содержимому: иначе она читается как ещё один вариант ответа. */ .vybor__obolochka{flex:0 0 100%;margin-top:16px} .vybor__pereklyuchatel{margin:0} .vybor__eshche{flex:0 0 100%;margin-top:2px} /* Документы в клетке — не стеной текста (п. 8). Штрих перед каждым документом и воздух между ними: до этого десяток названий шёл подряд, и границу между ними ловили по заглавной букве. Штрих — тот же знак, что у перечней .spisok в base.css. */ /* На 768 таблица идёт впритык к краю: отступ под штрих стоит 20px в каждой из трёх колонок документов, и 60px выносят её за экран (замер: 798px при ширине окна 768). Там документы разделены линией – она не стоит ширины вовсе. Заказчик назвал оба способа: «маркеры, линии или отступы». */ @media (max-width:1023px){ } /* Липкое название стадии снято правкой 6, п. 1. Оно наезжало на название соседней стадии: sticky у клеток таблицы держится в своей строке не всегда, и две короткие строки подряд слипались в кашу («экспресс-» поверх «входная»). Таблицы стадий больше нет — документы идут списком во всю ширину, и держать нечего. */ /* Печать: раскрытия доводятся до конечного состояния, иначе в PDF уходит обрезанный текст (свод граблей). */ @media print{ .raskryv-tekst__telo{display:block;overflow:visible} .raskryv-tekst__knopka,.vybor__pereklyuchatel{display:none} } /* ================= АДАПТИВ ================= */ @media (max-width:1024px){ .konsultant__rama{padding:24px} .programmy-setka{grid-template-columns:1fr} } @media (max-width:767px){ .konsultant__rama{padding:20px 16px} .vopros__para,.vopros__s-raschetom{grid-template-columns:1fr} .konsultant__deystvie .knopka{width:100%;text-align:center} .lenta-otvetov{padding:12px 14px} .otsek__stroka{grid-template-columns:22px minmax(0,1fr);gap:10px} .svod__rama{padding:20px 16px} .utochneniya{padding:20px 16px} .raschet__stroka{flex-direction:column;gap:2px} .raschet__znach{text-align:left} .tabl tbody tr.tabl__gruppa th{padding:18px 0 6px} } /* Тач: у кнопок-выборов и строк выдачи нет наведения — состояния и так видны рамкой и подложкой. Мёртвых вкладок нет: всё переключается настоящими кнопками. */ @media (prefers-reduced-motion:reduce){ .lenta-otvetov__otvet,.vybor__knopka,.poisk-pole__stroka,.vopros{transition:none} } /* ================= ПЕЧАТЬ ================= Результат печатается как есть — это ответ на вопросы читателя. Опросник и кнопки действий на бумаге не нужны. */ @media print{ .konsultant__deystvie,.programma__deystvie,.marshrut-deystvie, .poisk-pole__vydacha,.skachat,.perechen-forma,.perechen-otvet .knopka{display:none} } /* ── Сравнение программ (правка 7, п. 7) ───────────────────────────── Строится только из расходящихся признаков, поэтому строк мало, а колонок столько, сколько программ подошло (не больше четырёх). Первая колонка — название признака, она же прижата влево. */ .sravnenie{margin-top:8px} .tabl--sravnenie tbody th{width:22%;min-width:150px;vertical-align:top; font-family:var(--sans);font-weight:500;font-size:14px;color:var(--seryj)} .tabl--sravnenie td{vertical-align:top;font-size:15px;line-height:1.5} .tabl--sravnenie thead th{font-family:var(--sans);font-weight:600;font-size:14px; color:var(--chernila);line-height:1.3} /* Поле с подставленным «не знаю»: значение есть, но это не число — показываем его вторичным цветом, чтобы не путалось с введённым. */ .pole__vvod--ne-znayu{color:var(--seryj)} /* Доп. вопрос внутри вопроса (помощь с банковской гарантией) — отступом и линией слева, чтобы читался как уточнение, а не как седьмой вопрос опросника. */ .vopros__dop{margin-top:20px;padding-left:20px;border-left:2px solid var(--linia)} .vopros__dop .vybor{margin-top:10px} /* ============================================================== ПРАВКА 8 (25.09.2026) — результат и дорожная карта заново. Заказчик: «много полосок и примечаний, много шума, глаз и фокус теряется», «кнопки теряются на фоне массива текста», «к этому моменту у клиента будет баннерная слепота», «дорожная карта как массив данных – надо легче». Всё ниже собрано из токенов словаря, новых цветов нет. Документы по этапам – по образцу слайда «Какие документы и на каком этапе сдавать» презентации ПМК. ============================================================== */ /* Как мы проверяем: два тезиса вместо трёх абзацев */ .kak-tezisy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px} .kak-tezis{border-top:3px solid var(--sinij);padding-top:16px} .kak-tezis__zag{font-family:var(--sans);font-size:18px;font-weight:600;line-height:1.35;color:var(--chernila);margin-bottom:8px} .kak-tezis p:not(.kak-tezis__zag){font-size:15px;line-height:1.6;color:var(--seryj)} @media (max-width:767px){.kak-tezisy{grid-template-columns:1fr}} /* Ответ эксперта — вместо строки-полоски */ .otvet-eksperta{background:#fff;border:1px solid var(--linia);border-top:3px solid var(--sinij);padding:32px 40px 28px;margin-bottom:40px} .otvet-eksperta__kto{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--sinij);display:flex;align-items:center;gap:9px;margin-bottom:14px} .otvet-eksperta__kto::before{content:"";width:6px;height:6px;background:var(--sinij)} .otvet-eksperta__glav{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 56px;align-items:start} .otvet-eksperta__fraza{font-family:var(--sans);font-size:28px;font-weight:500;line-height:1.3;color:var(--chernila);text-wrap:balance} .otvet-eksperta__dalshe{font-size:18px;line-height:1.5;color:var(--chernila);margin-top:14px} .otvet-eksperta__deystviya{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:24px} .otvet-eksperta__chisla{display:grid;gap:18px} .otvet-eksperta__chislo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center;border-left:3px solid var(--sinij);padding-left:20px} .otvet-eksperta__chislo b{font-family:var(--sans);font-size:64px;font-weight:300;line-height:1;color:var(--sinij);font-variant-numeric:tabular-nums} .otvet-eksperta__chislo span{font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.35;color:var(--chernila)} .otvet-eksperta__ogovorka{font-size:13px;line-height:1.5;color:var(--seryj-2);margin-top:22px;padding-top:14px;border-top:1px solid var(--linia-2)} @media (max-width:1024px){ .otvet-eksperta{padding:26px 28px 24px} .otvet-eksperta__glav{grid-template-columns:1fr} .otvet-eksperta__chisla{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .otvet-eksperta{padding:22px 18px 20px} .otvet-eksperta__fraza{font-size:22px} .otvet-eksperta__dalshe{font-size:16px} .otvet-eksperta__chisla{grid-template-columns:1fr} .otvet-eksperta__chislo b{font-size:48px} .otvet-eksperta__deystviya .knopka{width:100%;text-align:center} } /* Уточнения: вопрос слева, ответы справа, без пояснений */ .utochneniya{padding:26px 32px 10px;margin-bottom:40px} .utochneniya__zag{font-size:20px;margin-bottom:4px} .ut-vopros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px 32px;align-items:center;margin:0!important;padding:16px 0!important;border-top:1px solid var(--linia-2)} .utochneniya__zag+.ut-vopros{border-top:0} .ut-vopros .vopros__podpis{margin:0;font-size:16px;line-height:1.4} .ut-vopros .vopros__perechen{font-size:13px;line-height:1.5;color:var(--seryj);margin:6px 0 0} .ut-vopros .vybor{justify-content:flex-end;gap:8px} .ut-vopros .vybor__knopka{padding:9px 16px;font-size:14px} .ut-vopros--shiroko{grid-template-columns:1fr} .ut-vopros--shiroko .vybor{justify-content:flex-start} @media (max-width:1024px){ .ut-vopros{grid-template-columns:1fr} .ut-vopros .vybor{justify-content:flex-start} } /* Список программ: «с чего начать» и остальные строкой */ .spisok-programm>h3{margin-bottom:18px} .glavnaya-programma{background:var(--sinij-fon);border-left:3px solid var(--sinij);padding:28px 32px 30px} .glavnaya-programma__metka{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--sinij);margin-bottom:10px} .glavnaya-programma__uroven{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj);margin-bottom:4px} .glavnaya-programma h3{font-size:26px;line-height:1.25;margin-bottom:10px} .glavnaya-programma__dlya{font-size:15px;line-height:1.55;color:var(--chernila);max-width:80ch} .glavnaya-programma__dlya+.glavnaya-programma__dlya{margin-top:2px} .glavnaya-programma .chisla-plitki{margin:22px 0 18px} .glavnaya-programma__pochemu{font-size:15px;line-height:1.55;color:var(--chernila);max-width:80ch;margin-bottom:22px;font-weight:500} .glavnaya-programma.is-vybrana .knopka{--nayezd:var(--sinij-2)} .chisla-plitki{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .chisla-plitki__p{padding:0 20px;border-left:1px solid var(--linia);min-width:0} .chisla-plitki__p:first-child{padding-left:0;border-left:0} .chisla-plitki__chto{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj);margin-bottom:6px} .chisla-plitki b{display:block;font-family:var(--sans);font-size:28px;font-weight:300;line-height:1.15;color:var(--chernila);font-variant-numeric:tabular-nums} .chisla-plitki__dop{display:block;font-size:12px;line-height:1.4;color:var(--seryj);margin-top:6px} .glavnaya-programma .chisla-plitki__p{border-left-color:rgba(13,26,50,.14)} @media (max-width:1024px){ .chisla-plitki{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0} .chisla-plitki__p:nth-child(odd){padding-left:0;border-left:0} } @media (max-width:479px){ .chisla-plitki{grid-template-columns:1fr} .chisla-plitki__p{padding-left:0;border-left:0} .glavnaya-programma{padding:22px 18px} .glavnaya-programma .knopka{width:100%;text-align:center} } .programmy-spisok{margin-top:36px} .programmy-spisok__zag{font-family:var(--sans);font-size:18px;font-weight:600;margin-bottom:8px} .programmy-spisok__gruppa{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);padding:18px 12px 6px} .programma-stroka{display:grid;grid-template-columns:minmax(0,1fr) 170px 140px 80px;gap:4px 24px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--linia-2);padding:14px 12px;cursor:pointer;font:inherit;color:inherit;transition:background-color .15s ease} .programma-stroka__imya{min-width:0} .programma-stroka__nazvanie{display:block;font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.3;color:var(--chernila);transition:color .15s ease} .programma-stroka__dlya{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5;color:var(--seryj);margin-top:3px} .programma-stroka__summa,.programma-stroka__stavka{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--chernila);font-variant-numeric:tabular-nums} .programma-stroka__stavka small{display:block;font-family:var(--text);font-size:12px;font-weight:400;color:var(--vnim);margin-top:2px} .programma-stroka__strelka{white-space:nowrap;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--sinij-yark);text-align:right;transition:transform .15s ease} .programma-stroka__strelka::after{content:" →"} .programma-stroka:hover,.programma-stroka:focus-visible{background:var(--fon-2)} .programma-stroka:hover .programma-stroka__nazvanie{color:var(--sinij-yark)} .programma-stroka:hover .programma-stroka__strelka{transform:translateX(4px)} .programma-stroka.is-vybrana{background:var(--sinij-fon)} @media (max-width:1024px){ .programma-stroka{grid-template-columns:minmax(0,1fr) 150px 120px} .programma-stroka__strelka{display:none} } @media (max-width:767px){ .programma-stroka{grid-template-columns:1fr 1fr;padding:14px 4px} .programma-stroka__imya{grid-column:1 / -1} } /* Почему не подошли остальные — под кнопкой */ .neproshli{margin-top:28px;max-width:none} .neproshli__panel{display:none;margin-top:18px} .neproshli.is-open .neproshli__panel{display:block} .neproshli .otsek__text{font-size:15px} @media print{.neproshli__panel{display:block}.neproshli__knopka{display:none}} /* Источники ответа — одним списком внизу, без ссылок */ .istochniki-otveta{margin-top:64px;padding-top:24px;border-top:1px solid var(--linia);max-width:900px} .istochniki-otveta__zag{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--seryj);margin-bottom:10px} .istochniki-otveta__spisok{margin:0;padding-left:20px;display:grid;gap:4px} .istochniki-otveta__spisok li{font-size:13px;line-height:1.5;color:var(--seryj)} .istochniki-otveta__gde{color:var(--seryj-2)} .istochniki-otveta__gde::before{content:" – "} /* Карта: коротко о программе */ .korotko .chisla-plitki{background:#fff;border:1px solid var(--linia);padding:22px 24px} .korotko__stroki{margin-top:18px;max-width:980px} .korotko__stroka{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 24px;padding:10px 0;border-bottom:1px solid var(--linia)} .korotko__stroka:last-child{border-bottom:0} .korotko__chto{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj);padding-top:2px} .korotko__znach{font-size:15px;line-height:1.55;color:var(--chernila)} @media (max-width:767px){.korotko__stroka{grid-template-columns:1fr}} .marshrut-primech{font-size:14px;line-height:1.55;color:var(--seryj);margin-top:14px;max-width:80ch} .marshrut-blok>h3{margin-bottom:16px} /* Сайт против документа — парами */ .marshrut-blok>h3 .nahodka-metka{margin:0 0 0 12px;vertical-align:3px} .nahodki{display:grid;gap:12px;max-width:980px} .nahodka{background:#fff;border:1px solid var(--linia);padding:16px 20px} .nahodka__chto{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--chernila);margin-bottom:10px} .nahodka__para{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px} .nahodka__gde{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seryj-2);margin-bottom:3px} .nahodka__znach{font-size:15px;line-height:1.5;color:var(--chernila)} .nahodka__storona--sajt .nahodka__znach{color:var(--seryj);text-decoration:line-through;text-decoration-color:var(--seryj-2)} @media (max-width:767px){.nahodka__para{grid-template-columns:1fr}} /* Путь до денег — шаги лентой */ .marshrut-blok .put{list-style:none;margin:0;padding:44px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:52px 0} .put__shag{position:relative;border-top:2px solid var(--linia);padding:18px 18px 0 0;min-width:0} .put__shag::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;background:var(--sinij)} .put__faza{position:absolute;top:-32px;left:0;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seryj-2);white-space:nowrap} .put__shag--faza{border-top-color:var(--sinij)} .put__nomer{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);font-variant-numeric:tabular-nums;margin-bottom:4px} .put__zag{font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.3;color:var(--chernila)} .put__srok{font-size:14px;line-height:1.45;color:var(--chernila);margin-top:8px} .put__kto{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seryj-2);margin-top:6px} .put__my{font-size:13px;line-height:1.45;color:var(--sinij);margin-top:6px} .obryvy{margin-top:36px} .obryvy__zag{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--chernila);margin-bottom:10px} @media (max-width:767px){ .marshrut-blok .put{grid-template-columns:1fr;gap:0;padding-top:0;border-left:2px solid var(--linia);margin-left:4px} .put__shag{border-top:0;padding:0 0 22px 22px} .put__shag::before{top:4px;left:-6px} .put__faza{position:static;display:block;margin-bottom:6px} } /* Документы по этапам — колонками, как слайд презентации */ .legenda-dokov{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:16px} .legenda-dokov span{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--seryj)} .znak-doka{flex:0 0 auto;display:inline-block;width:12px;height:12px} .znak-doka--nul{background:var(--sinij)} .znak-doka--forma{background:#fff;box-shadow:inset 0 0 0 2px var(--sinij)} .znak-doka--vy{background:var(--seryj-2)} .znak-doka--vmeste{background:var(--vnim)} .etapy-dokov{display:grid;grid-template-columns:repeat(var(--kolonok,4),minmax(0,1fr));gap:14px;align-items:start;max-width:calc(var(--kolonok,4) * 360px)} .etap-dokov{background:#fff;border:1px solid var(--linia);min-width:0} .etap-dokov__shapka{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--sinij);color:#fff;padding:13px 18px} .etap-dokov__shapka b{font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.3} .etap-dokov__shapka span{font-family:var(--sans);font-size:13px;color:var(--seryj-2);font-variant-numeric:tabular-nums} .etap-dokov ul.etap-dokov__spisok{list-style:none;margin:0;padding:14px 18px 6px} .etap-dokov ul.etap-dokov__spisok li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--chernila);margin:0 0 9px} .etap-dokov__spisok .znak-doka{margin-top:4px} .etap-dokov__eshche{font-size:13px;line-height:1.45;color:var(--seryj-2);padding:0 18px 14px} .etap-dokov__pometka{font-size:13px;line-height:1.45;color:var(--seryj);padding:0 18px 14px} .etap-dokov__spisok+.etap-dokov__eshche{margin-top:2px} .dokumenty__zov{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;margin-top:18px;padding:16px 20px;background:#fff;border:1px solid var(--linia)} .dokumenty__zov p{font-size:15px;line-height:1.5;color:var(--chernila);max-width:70ch} @media (max-width:1100px){.etapy-dokov{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.etapy-dokov{grid-template-columns:1fr}} /* Обеспечение: две короткие части */ .dve-chasti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;max-width:980px} .dve-chasti__c{background:#fff;border:1px solid var(--linia);padding:18px 22px} .dve-chasti__zag{font-family:var(--sans);font-size:15px;font-weight:600;margin-bottom:8px} .dve-chasti ul{margin:0;padding-left:18px} .dve-chasti li{font-size:14px;line-height:1.5;color:var(--chernila);margin:3px 0} @media (max-width:767px){.dve-chasti{grid-template-columns:1fr}} /* После выдачи */ .posle__chast{max-width:980px} .posle__chast+.posle__chast{margin-top:26px} .posle__zag{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--chernila);margin-bottom:4px} .posle__stroka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:4px 28px;padding:10px 0;border-bottom:1px solid var(--linia)} .posle__chto{font-size:15px;line-height:1.5;color:var(--chernila)} .posle__kogda,.posle__razmer{font-size:14px;line-height:1.5;color:var(--seryj)} .posle__razmer{color:var(--chernila);font-family:var(--sans);font-weight:500} .posle__esli{font-size:14px;line-height:1.5;color:var(--vnim);margin-top:10px} @media (max-width:767px){.posle__stroka{grid-template-columns:1fr}} /* Предложение в конце карты */ .predlozhenie{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:56px;background:#fff;border:1px solid var(--linia);border-top:3px solid var(--sinij);padding:30px 34px} .predlozhenie__tekst{flex:1 1 420px;min-width:0} .predlozhenie h3{font-size:22px;margin-bottom:8px} .predlozhenie p{font-size:15px;line-height:1.55;color:var(--seryj);max-width:70ch} @media (max-width:767px){.predlozhenie{padding:22px 18px}.predlozhenie .knopka{width:100%;text-align:center}} .granty__spisok{margin:12px 0 0;padding-left:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 32px;max-width:980px} .granty__spisok li{font-size:15px;line-height:1.5;color:var(--chernila)} @media (max-width:767px){.granty__spisok{grid-template-columns:1fr}} /* ============================================================== ПРАВКА 9 (25.09.2026): «уже лучше, но надо больше визуальных элементов или акцентов, глаз устаёт от однотипного текста». Номера блоков карты, риск карточкой с меткой, направления плашками, счётчик программ в одну строку с направлением. ============================================================== */ /* Номер блока дорожной карты крупно, как номер этапа на слайде */ #marshrut-telo{counter-reset:blok} #marshrut-telo .marshrut-blok>h3{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} #marshrut-telo .marshrut-blok>h3::before{counter-increment:blok;content:counter(blok,decimal-leading-zero);font-family:var(--sans);font-size:34px;font-weight:300;line-height:1;color:var(--sinij-yark);font-variant-numeric:tabular-nums} /* Ключевые числа — синим */ .korotko .chisla-plitki b,.glavnaya-programma .chisla-plitki b{color:var(--sinij)} .korotko .chisla-plitki{border-top:3px solid var(--sinij)} /* Направления плашками */ .plashki{display:flex;flex-wrap:wrap;gap:8px} .plashka{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.3;color:var(--sinij);background:var(--sinij-fon);padding:6px 11px} /* Риск — карточкой: цветная линия по виду, метка жирно, текст под ней */ .riski .otsek{border-top:0;display:grid;gap:10px} .otsek__stroka--risk{background:#fff;border:1px solid var(--linia);border-left:3px solid var(--vnim);padding:14px 18px;grid-template-columns:22px minmax(0,1fr)} .otsek__stroka--risk.otsek__stroka--vopros{border-left-color:var(--seryj-2)} .otsek__stroka--risk .otsek__programma{font-size:15px;font-weight:600;color:var(--chernila);margin-bottom:4px} .otsek__stroka--risk .otsek__text{font-size:15px;line-height:1.55;color:var(--seryj);max-width:none} .riski .riski__razdel{margin-top:18px} /* Знаки документов по легенде слайда */ .znak-doka--korp{background:var(--seryj-2)} .znak-doka--fin{background:var(--vnim)} .dokumenty__sosed{font-size:15px;line-height:1.55;color:var(--chernila);background:var(--sinij-fon);border-left:3px solid var(--sinij);padding:12px 18px;margin-bottom:18px;max-width:980px} /* Корпус изученного */ .istochniki-otveta__korpus{font-size:13px;line-height:1.55;color:var(--seryj);margin-top:12px;max-width:90ch} /* «Производство комплектующих – 2 программы» в одну строку */ .vybor__skolko{display:inline;margin:0;font-size:13px} /* ============================================================== ПРАВКА 10 (25.09.2026): змейка этапов, «что можно купить», компактные колонки документов, закреплённое действие, счётчик ответов, действие на первом экране. ============================================================== */ /* Первый экран: кнопка под подзаголовком */ .geroy__deystvie{margin-top:28px} /* Счётчик ответов */ .konsultant__schet{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--seryj);font-variant-numeric:tabular-nums} .konsultant__schet.is-gotovo{color:var(--da)} /* Змейка этапов: ряды, чётный справа налево, повороты между рядами */ .zmejka{--m:14px;margin-top:8px} .zmejka__ryad{list-style:none;margin:0;padding:0 0 44px;display:flex;position:relative} .zmejka__ryad--obr{flex-direction:row-reverse} .zmejka__ryad--posl{padding-bottom:0} .zmejka__shag{flex:0 0 calc(100% / var(--v-ryadu,4));position:relative;padding:0 34px 0 0;min-width:0} .zmejka__ryad--obr .zmejka__shag{padding:0 0 0 34px} .zmejka__shag::before{content:"";position:absolute;top:var(--m);left:0;right:0;height:2px;background:var(--sinij);opacity:.22} .zmejka__ryad--posl .zmejka__shag:last-child::before{right:auto;width:30px} .zmejka__ryad--obr.zmejka__ryad--posl .zmejka__shag:last-child::before{left:auto;right:0;width:30px} .zmejka__ryad:not(.zmejka__ryad--posl)::after{content:"";position:absolute;top:var(--m);bottom:calc(-1 * var(--m));right:0;width:24px;border:2px solid rgba(13,26,50,.22);border-left:0} .zmejka__ryad--obr:not(.zmejka__ryad--posl)::after{right:auto;left:0;border-left:2px solid rgba(13,26,50,.22);border-right:0} .zmejka__verh{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:12px} .zmejka__ryad--obr .zmejka__verh{flex-direction:row} .zmejka__nomer{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-family:var(--sans);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--sinij);color:#fff;position:relative;z-index:1} .zmejka__shag--fond .zmejka__nomer{background:var(--fon-2);color:var(--sinij);box-shadow:inset 0 0 0 2px var(--sinij)} .zmejka__faza{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seryj-2);background:var(--fon-2);padding:2px 8px;position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .zmejka__zag{font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.3;color:var(--chernila);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .zmejka__srok{font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.35;color:var(--sinij-yark);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .zmejka__kto{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seryj);margin-top:8px} .zmejka__shag--vy .zmejka__kto{color:var(--sinij)} /* Один шаг в ряду (телефон): вертикальная линия слева */ .zmejka--1 .zmejka__ryad{padding-bottom:0} .zmejka--1 .zmejka__ryad::after{display:none} .zmejka--1 .zmejka__shag{padding:0 0 22px 44px!important} .zmejka--1 .zmejka__shag::before{top:0;bottom:0;left:14px;right:auto;width:2px;height:auto} .zmejka--1 .zmejka__ryad--posl .zmejka__shag:last-child::before{display:none} .zmejka--1 .zmejka__verh{margin-left:-44px} .zmejka--1 .zmejka__nomer{margin-right:4px} @media print{.zmejka__zag,.zmejka__srok{display:block}} /* Что можно купить на заём */ .zakupki__setka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1136px} .zakupki__k{background:#fff;border:1px solid var(--linia);border-top:3px solid var(--sinij);padding:18px 22px 16px} .zakupki__k--nelzya{border-top-color:var(--krasnyj)} .zakupki__k--oborud{border-top-color:var(--vnim)} .zakupki__k--produkt{border-top-color:var(--sinij-yark)} .zakupki__zag{font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:10px} .zakupki__spisok{list-style:none;margin:0;padding:0;display:grid;gap:8px} .zakupki__spisok li{position:relative;padding-left:20px;font-size:14px;line-height:1.45;color:var(--chernila)} .zakupki__spisok li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;background:var(--sinij)} .zakupki__k--nelzya li::before{background:none;width:10px;height:10px;top:5px;background-image:url("data:image/svg+xml;utf8,")} .zakupki__k--oborud li::before{background:var(--vnim)} .zakupki__k--produkt li::before{background:var(--sinij-yark)} .zakupki__limit{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--sinij);background:var(--sinij-fon);padding:2px 7px;margin-left:8px;vertical-align:1px} .zakupki__limit--stop{color:var(--krasnyj);background:var(--krasnyj-fon)} .zakupki__pochemu{display:block;font-size:13px;color:var(--seryj);margin-top:2px} .zakupki__eshche{margin-top:10px} @media (max-width:900px){.zakupki__setka{grid-template-columns:1fr}} /* Документы по этапам — компактнее, чтобы колонки влезали в экран */ .etap-dokov__shapka{padding:11px 16px} .etap-dokov__shapka b{font-size:15px} .etap-dokov ul.etap-dokov__spisok{padding:12px 16px 4px} .etap-dokov ul.etap-dokov__spisok li{font-size:13px;line-height:1.35;margin:0 0 7px;gap:9px} .etap-dokov ul.etap-dokov__spisok .znak-doka{width:10px;height:10px;margin-top:3px} .etap-dokov__eshche,.etap-dokov__pometka{font-size:12px;padding:0 16px 12px} .etap-dokov__vse{margin:2px 16px 12px;font-size:13px} /* Закреплённое действие внизу экрана */ .lipkoe-dejstvie{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:14px 28px;flex-wrap:wrap;padding:12px 96px 12px var(--gutter);background:rgba(255,255,255,.97);border-top:1px solid var(--linia);box-shadow:0 -8px 24px -18px rgba(13,26,50,.35)} .lipkoe-dejstvie[hidden]{display:none} .lipkoe-dejstvie__tekst{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--chernila);max-width:70ch} .lipkoe-dejstvie .knopka{padding:12px 24px} @media (max-width:767px){ .lipkoe-dejstvie{padding:10px 16px} .lipkoe-dejstvie__tekst{font-size:13px;flex:1 1 100%;text-align:center} .lipkoe-dejstvie .knopka{width:100%;text-align:center} } @media print{.lipkoe-dejstvie{display:none!important}} /* Шаг змейки – белой карточкой под номером (правка 10) */ .zmejka__karta{background:#fff;border:1px solid var(--linia);padding:12px 14px 12px;min-height:118px} .zmejka__shag--vy .zmejka__karta{border-left:3px solid var(--sinij)} .zmejka__verh{margin-bottom:10px} @media (max-width:699px){ .zmejka--1 .zmejka__shag{padding-right:8px!important} .zmejka__karta{min-height:0} } /* ============================================================== ПРАВКА 11 (26.09.2026): документы стадиями сверху вниз, змейка ровнее. Заказчик: «а если не рядами, а сверху вниз, чтобы стадии шли, так будет читабельнее?» ============================================================== */ .etapy-dokov{grid-template-columns:1fr!important;max-width:none;gap:12px} .etap-dokov{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:stretch} .etap-dokov>*:not(.etap-dokov__shapka){grid-column:2} .etap-dokov__shapka{grid-column:1;grid-row:1 / span 6;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:6px;padding:18px 20px} .etap-dokov__nomer{font-family:var(--sans);font-size:28px;font-weight:300;line-height:1;color:#fff;opacity:.55;font-variant-numeric:tabular-nums} .etap-dokov__shapka b{font-size:17px;line-height:1.3} .etap-dokov__skolko{font-family:var(--text);font-size:13px;color:var(--seryj-2)} .etap-dokov ul.etap-dokov__spisok{column-count:3;column-gap:28px;padding:16px 20px 6px} .etap-dokov ul.etap-dokov__spisok li{break-inside:avoid;display:flex} @media (max-width:1100px){.etap-dokov ul.etap-dokov__spisok{column-count:2}} @media (max-width:767px){ .etap-dokov{grid-template-columns:1fr} .etap-dokov>*{grid-column:1!important} .etap-dokov__shapka{grid-row:auto;flex-direction:row;align-items:baseline;padding:12px 16px} .etap-dokov__nomer{font-size:18px} .etap-dokov ul.etap-dokov__spisok{column-count:1} } /* Змейка: легенда, карточки ряда одной высоты, метки хода */ .zmejka__legenda{display:flex;flex-wrap:wrap;gap:8px 24px;margin:-4px 0 22px;font-size:13px;color:var(--seryj)} .zmejka__legenda span{display:flex;align-items:center;gap:8px} .zmejka__l{display:inline-block;width:14px;height:14px} .zmejka__l--vy{background:var(--sinij)} .zmejka__l--fond{background:var(--fon-2);box-shadow:inset 0 0 0 2px var(--sinij)} .zmejka__ryad{align-items:stretch} .zmejka__shag{display:flex;flex-direction:column} .zmejka__karta{flex:1;display:flex;flex-direction:column;align-items:flex-start;min-height:0} .zmejka__kto{margin-top:auto;padding-top:10px} .zmejka__kto{display:inline-block;font-size:12px;line-height:1;padding:5px 8px;background:var(--fon-2);color:var(--seryj);margin-top:12px} .zmejka__shag--vy .zmejka__kto{background:var(--sinij-fon);color:var(--sinij)} .zmejka__karta .zmejka__kto{margin-top:auto} .zmejka__srok{margin-bottom:12px} .zmejka__ryad--obr.zmejka__ryad--posl .zmejka__shag:last-child::before{left:0;right:0;width:auto} .zmejka__zag{-webkit-line-clamp:4} .etap-dokov__vse{justify-self:start} .zmejka__ryad--obr.zmejka__ryad--posl .zmejka__shag:last-child::before{left:34px} /* ============================================================== ПРАВКА 12 (26.09.2026): «После выдачи займа» – три зоны вместо трёх таблиц: показатели карточками, календарь отчётов, санкции с крупным числом. ============================================================== */ .posle2__pokazateli{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;max-width:1136px} .posle2__pok{background:var(--sinij);color:#fff;padding:20px 22px 18px;position:relative} .posle2__metka{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--sinij);background:#fff;padding:3px 8px;margin-bottom:12px} .posle2__pok-chto{font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.35} .posle2__pok-znach{font-family:var(--sans);font-size:22px;font-weight:300;line-height:1.3;margin-top:8px} .posle2__pok-dop{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);margin-top:10px} .posle2__esli{font-size:15px;line-height:1.55;color:var(--chernila);background:var(--vnim-fon);border-left:3px solid var(--vnim);padding:12px 18px;margin-top:14px;max-width:1136px} .posle2__esli b{font-family:var(--sans);font-weight:600;color:var(--vnim)} .posle2__dve{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;margin-top:32px;max-width:1136px;align-items:start} .posle2__zag{font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:12px} .posle2__otchet{background:#fff;border:1px solid var(--linia);border-left:3px solid var(--sinij-yark);padding:12px 16px;margin-bottom:10px} .posle2__period{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--sinij-yark);background:var(--sinij-fon);padding:3px 7px;margin-bottom:6px} .posle2__otchet-chto{font-size:14px;line-height:1.45;color:var(--chernila)} .posle2__otchet-kogda{font-size:13px;line-height:1.45;color:var(--seryj);margin-top:4px} .posle2__daty{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .posle2__daty span{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--chernila);background:var(--fon-2);border:1px solid var(--linia);padding:3px 8px} .posle2__sankcii{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .posle2__sank{background:#fff;border:1px solid var(--linia);border-top:3px solid var(--krasnyj);padding:14px 16px} .posle2__sank-chislo{display:block;font-family:var(--sans);font-size:30px;font-weight:300;line-height:1.1;color:var(--krasnyj);font-variant-numeric:tabular-nums} .posle2__sank-kak{display:block;font-size:12px;line-height:1.4;color:var(--seryj);margin-top:4px} .posle2__sank-kak--tekst{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--chernila)} .posle2__sank-za{font-size:13px;line-height:1.45;color:var(--chernila);margin-top:10px;padding-top:8px;border-top:1px solid var(--linia-2)} @media (max-width:1024px){.posle2__dve{grid-template-columns:1fr}} @media (max-width:479px){.posle2__sankcii{grid-template-columns:1fr}} /* ============================================================== ПРАВКА 13 (26.09.2026): змейка – ряды раздвинуты («слиплись по высоте»), линия и поворот одного сплошного цвета: полупрозрачные линия и рамка поворота накладывались в углу и давали тёмные пятна. ============================================================== */ .zmejka{--linija-zm:#C5CBD5} .zmejka__ryad{padding-bottom:72px} .zmejka__ryad--posl{padding-bottom:0} .zmejka__shag::before{background:var(--linija-zm);opacity:1} .zmejka__ryad:not(.zmejka__ryad--posl)::after{border-color:var(--linija-zm);border-width:2px;width:22px;top:var(--m);bottom:calc(-1 * var(--m) - 2px);height:auto} .zmejka__ryad--obr:not(.zmejka__ryad--posl)::after{border-left:2px solid var(--linija-zm);border-right:0} .zmejka__ryad:not(.zmejka__ryad--obr):not(.zmejka__ryad--posl)::after{border-right:2px solid var(--linija-zm);border-left:0} /* ol[class] в base.css (0,1,1) сильнее одиночного класса – поэтому отступ ряда змейки не применялся вовсе, и ряды слипались. */ ol.zmejka__ryad{padding:0 0 72px} ol.zmejka__ryad.zmejka__ryad--posl{padding-bottom:0} .zmejka--1 ol.zmejka__ryad{padding-bottom:0} /* Источники под кнопкой, пунктами (правка 13) */ .istochniki-otveta__panel{margin-top:18px} .istochniki-otveta__spisok{list-style:none;padding-left:0;gap:6px} ul.istochniki-otveta__spisok{padding-left:0} .istochniki-otveta__spisok li{position:relative;padding-left:18px} .istochniki-otveta__spisok li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--seryj-2)} .istochniki-otveta__korpus{margin:0 0 14px} /* «Чем помогает ПМК» – в конце карты (правка 13). Тёмная карточка, не секция: правило «двух тёмных секций» касается листов страницы. */ .pomoshch-pmk{margin-top:64px;background:var(--sinij);color:#fff;padding:36px 40px 34px} .pomoshch-pmk__metka{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seryj-2);margin-bottom:6px} .pomoshch-pmk h3{color:#fff;font-size:28px;line-height:1.2} .pomoshch-pmk__setka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:28px;border-top:1px solid rgba(255,255,255,.18)} .pomoshch-pmk__punkt{padding:22px 22px 4px 0;border-right:1px solid rgba(255,255,255,.12)} .pomoshch-pmk__punkt+.pomoshch-pmk__punkt{padding-left:22px} .pomoshch-pmk__punkt:last-child{border-right:0} .pomoshch-pmk__nomer{display:block;font-family:var(--sans);font-size:34px;font-weight:300;line-height:1;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;margin-bottom:14px} .pomoshch-pmk__zag{font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.3;color:#fff} .pomoshch-pmk__tekst{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);margin-top:8px} .pomoshch-pmk__niz{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:30px} .pomoshch-pmk__podpis{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);max-width:52ch} @media (max-width:1024px){ .pomoshch-pmk__setka{grid-template-columns:repeat(2,minmax(0,1fr))} .pomoshch-pmk__punkt{border-right:0;padding-left:0!important;border-bottom:1px solid rgba(255,255,255,.12)} .pomoshch-pmk__punkt:nth-child(odd){padding-right:22px} } @media (max-width:600px){ .pomoshch-pmk{padding:26px 18px} .pomoshch-pmk__setka{grid-template-columns:1fr} .pomoshch-pmk .knopka{width:100%;text-align:center} } /* Список разобранных фондов – тихой строкой перед заявкой (26.09.2026) */ .regiony-spisok{padding-top:32px;padding-bottom:32px;border-top:1px solid var(--linia)} .regiony-spisok__tekst{font-size:13px;line-height:1.7;color:var(--seryj);max-width:1100px} /* ПРАВКА 14 (27.09.2026): подсказка вместо списка, пока уточнения без ответа */ .utochneniya__zhdyom{margin:24px 0 0;font-size:17px;font-weight:600;color:var(--chernila)} /* ПРАВКА 15 (27.09.2026): ответ эксперта – тёмная карточка с акцентами (палитра сайта: --sinij, белый, прозрачности как в «Чем помогает ПМК»), срезанный угол – мотив кнопок сайта. */ .otvet-eksperta{background:var(--sinij);color:#fff;border:0;padding:40px 48px 30px; clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)} .otvet-eksperta__kto{color:rgba(255,255,255,.62)} .otvet-eksperta__kto::before{background:#fff} .otvet-eksperta__fraza{color:#fff;font-size:34px;line-height:1.22} .otvet-eksperta__dalshe{color:rgba(255,255,255,.82)} .otvet-eksperta__prog{color:#fff;font-weight:600;background:var(--sinij-2);box-shadow:inset 0 -2px 0 var(--sinij-yark);padding:1px 6px} .otvet-eksperta__chisla{border-left:1px solid rgba(255,255,255,.16);padding-left:36px;gap:22px} .otvet-eksperta__chislo{border-left:0;padding-left:0} .otvet-eksperta__chislo b{color:#fff;font-size:84px} .otvet-eksperta__chislo span{color:rgba(255,255,255,.86)} .otvet-eksperta__chislo--ne b{font-size:44px;color:rgba(255,255,255,.45)} .otvet-eksperta__chislo--ne span{color:rgba(255,255,255,.55)} .otvet-eksperta .knopka--kontur{--nayezd:var(--sinij-2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)} .otvet-eksperta__ogovorka{color:rgba(255,255,255,.5);border-top-color:rgba(255,255,255,.14)} @media (max-width:1024px){.otvet-eksperta{padding:30px 28px 24px}.otvet-eksperta__chisla{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:20px}} @media (max-width:600px){.otvet-eksperta{padding:24px 18px 20px}.otvet-eksperta__fraza{font-size:24px}.otvet-eksperta__chislo b{font-size:56px}} /* Обеспечение: заметка вместо строки «на какую сумму» */ .obesp-zametka{margin:0 0 20px;padding:14px 18px;background:var(--sinij-fon);border-left:3px solid var(--sinij);font-size:16px;line-height:1.5;color:var(--chernila)} .obesp-zametka b{font-weight:600} /* ПРАВКА 16 (28.09.2026): «Что хотите сделать» – группы по одной в строке, как список с галочками: видно всё, можно отметить несколько. */ .ut-vopros .vybor.vybor--stolbec{display:grid;grid-template-columns:1fr;gap:6px;justify-content:stretch;max-width:640px} .vybor--stolbec .vybor__knopka--galka{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;padding:11px 16px} .vybor__galka{width:18px;height:18px;border:1.5px solid var(--seryj-2);background:#fff;position:relative} .vybor__knopka--galka.is-vybrano .vybor__galka{background:var(--sinij);border-color:var(--sinij)} .vybor__knopka--galka.is-vybrano .vybor__galka::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .vybor--stolbec .vybor__skolko{display:inline;margin:0;white-space:nowrap} .vybor--stolbec>.vybor__knopka:not(.vybor__knopka--galka){justify-self:start} .programmy-spisok--drugie{margin-top:28px} .programmy-spisok--drugie{margin-top:36px;padding-top:24px;border-top:2px solid var(--sinij)} .programmy-spisok__poyasn{font-size:15px;line-height:1.5;color:var(--seryj);margin:-4px 0 10px;max-width:760px} @media (max-width:600px){ .vybor--stolbec .vybor__knopka--galka{grid-template-columns:18px minmax(0,1fr);row-gap:2px} .vybor--stolbec .vybor__knopka--galka .vybor__skolko{grid-column:2} } /* ПРАВКА 17 (28.09.2026): софинансирование считается из бюджета и займа */ .vopros__sofin{margin-top:12px;font-size:15px;line-height:1.5;color:var(--seryj)} .vopros__sofin b{color:var(--chernila);font-weight:600} /* ПРАВКА 18 (28.09.2026): вопрос о перечне продукции в карточке программы */ .produkciya-vopros{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--linia)} .produkciya-vopros__podpis{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--chernila)} .produkciya-vopros .vybor{gap:8px} .produkciya-vopros .vybor__knopka{padding:8px 14px;font-size:14px} .produkciya-vopros__hint{flex-basis:100%;margin:0;font-size:14px;color:var(--seryj)} .forma__galka{grid-column:1/-1;margin:4px 0 0} /* 29.09.2026: пометка «продукция не в перечне» у программы в списке */ .programma-stroka__metka{display:block;font-size:13px;font-weight:500;color:var(--krasnyj);margin-top:3px} .programma-stroka__metka--karta{color:var(--vnim)}