/* ============================================================ ПМК — страница «Процедура» (/procedura/) ------------------------------------------------------------ Свёрстана 15.09.2026 по ТЗ страницы на языке главной и двух принятых страниц («Бизнес-план», «Финансовая модель»). Новых дизайн-решений нет: каждый лист собран из словаря base.css и приёмов, принятых заказчиком. Адаптив сделан сразу (требование ТЗ), брейкпоинты — лестница base.css, своих не заведено. Что уехало в base.css при вёрстке этой страницы (по правилу «компонент, понадобившийся второй странице, — в общий файл»): .razdely/.razdel (перечень с номерами, был в biznes-plan.css), .plitki, .marshrut--otstup, .zayavka__forma (стояли дословно в двух страничных файлах). Здесь только раскладки листов. Фоны листов (пять состояний, смежные не совпадают): 01 fon-2 — 02 белый — 03 fon-2 — 04 белый — 05 sinij-fon (единственный выделенный) — 06 fon-2 — 07 белый (маршруту нужна белая подложка: подсветка строки — заливка fon-2) — 08 fon-2 — подвал тёмный. Тёмных зон нет: для страницы не снимали фотографий, тёмное на сайте даёт только снимок (ДИЗАЙН-СИСТЕМА 2.4) — и его дают только плитки листа 05. Две таблицы подряд (листы 03 и 04) — допущение ТЗ при разной форме: у 03 три колонки, оси слева на заливке, рама во всю ширину, фон fon-2; у 04 две колонки, вторая числовая, рама узкая (880), фон белый, под таблицей примечание и ссылка на пункт. Оценка «не простыня ли» — в отчёте. Акценты листов (1–2 на лист): 01 полоса фактов — 02 номера 28/300 — 03 оси таблицы на заливке — 04 числовая колонка дисконтов — 05 плитки-снимки и строка-вывод — 06 примечание о сроке действия решения — 07 маршрут во всю ширину — 08 крупная кнопка. Красного --krasnyj на странице нет: прямых «нельзя» на ней нет, панель да/нет не понадобилась. ============================================================ */ @media (max-width:480px){ /* Ручные переносы H1 рассчитаны на широкую колонку — на телефоне естественный перенос даёт меньше строк (приём главной) */ .geroy__h1-str{display:inline} } /* ================= ЛИСТ 01 — Первый экран ================= Светлый издательский герой (.geroy, base.css): фотографий для страницы нет, тёмный экран без снимка запрещён. Первый экран занимает экран целиком — 100svh минус шапка, правило уже в .geroy base.css, здесь не переопределяется (svh, не dvh: dvh «дышит», пока прячется адресная строка). Раскладка полосы фактов (четыре колонки и вся её лестница по ширинам) 15.09.2026 переехала в base.css: она одинакова на всех светлых страницах, и своих правил листу не нужно. */ /* ================= ЛИСТ 02 — Путь заявки ================= Ось из шести шагов — перечень с номерами .razdely/.razdel (base.css, приехал с /biznes-plan/). Маршрут сюда не берётся сознательно (ТЗ): он крупный и читается как полноценная карта — спорил бы с листом 05 главной; ось — навигация по листу 03, а не вторая дорожная карта. Компактно: номер и название, без сроков и без колонки ПМК. Лист стоит на БЕЛОМ (ритм фонов) — заливка отклика строки по умолчанию --fon на белом невидима, переопределяется на --fon-2 адресно (приём подсветки этапа маршрута: на белом листе подсветка серая). Не дубль правила base, а переопределение под свой фон — задумано компонентом. */ .put .razdel:hover{background-color:var(--fon-2)} @media (hover:none){ .put .razdel:hover{background-color:transparent} } /* ================= ЛИСТ 03 — Что сдаётся на каждом шаге ================= Таблица .tabl на раме .tabl-rama (base.css). Три колонки: шаг (ось, th scope="row") — что сдаётся — в каком виде. Оси — левая колонка и верхняя строка — с редакции 3 таблиц 15.09.2026 начертанием, без заливки сильнее содержимого (base.css). Отклик строки — механика .tabl--adresaty бизнес-плана (там она и живёт, здесь свой селектор): строка целиком ложится на fon-2, на колонке «в каком виде» встаёт вертикальный синий акцент — в ней и спотыкаются, ось отступает в серый. Ни цвета, ни приёма нового. На ≤767 рама — скролл-контейнер с липкой левой колонкой (штатный режим base.css): три колонки с длинными значениями на 360 не живут, приём принят на /biznes-plan/. */ .tabl--sdacha{table-layout:fixed} .tabl--sdacha thead th:first-child{width:21%} .tabl--sdacha thead th:last-child{width:33%} .tabl--sdacha tbody th{padding-right:16px;transition:color .2s ease} /* Волосяная линия на заливке оси пропадала — на тон темнее (приём подложки колонки ФРП, бизнес-план) */ .tabl--sdacha tbody th{border-bottom-color:var(--linia)} .tabl--sdacha tbody tr:last-child th, .tabl--sdacha tbody tr:last-child td{border-bottom-color:transparent} /* Отклик: строка — единица чтения, откликается целиком. Вертикальный акцент на третьей колонке СНЯТ правкой заказчика 15.09.2026 («не нравится дизайн таблицы, странно выглядит»): на бизнес-плане такая полоса метит ГЛАВНЫЙ столбец сравнения (ФРП против банка и инвестора), здесь же сравнения столбцов нет — «в каком виде» не главнее «что сдаётся», и полоса читалась случайной чертой посреди таблицы. Осталась заливка строки целиком, включая ось слева: строка подсвечивается ровно, без обрыва на границе колонок. */ .tabl--sdacha tbody td, .tabl--sdacha tbody th{transition:background-color .2s ease,color .2s ease} .tabl--sdacha tbody tr:hover td, .tabl--sdacha tbody tr:hover th{background-color:var(--fon-2)} .tabl--sdacha tbody tr:hover th{color:var(--chernila)} /* ================= ЛИСТ 04 — Чем обеспечивают заём ================= Вторая таблица подряд — потому ДРУГОЙ ФОРМЫ (требование ТЗ): две колонки, вторая — числа с процентами (.tabl td.chislo, base.css: Geologica 500, tabular-nums), рама узкая, осей слева нет — виды обеспечения здесь содержимое, а не оси сравнения. Отклик строки — заливка целиком, без вертикального акцента (снят по той же правке, что и на листе 03). Оговорка о поручительстве физлиц и залоге оборудования — примечанием .primech (свод: «оговорка к блоку подаётся примечанием»). Под таблицей ссылка на пункт документа (.ssylka-punkt) — опознавательный знак сайта: под числами стоит первоисточник. */ .obespechenie-rama{max-width:880px} .tabl--obespechenie{table-layout:fixed} .tabl--obespechenie thead th:last-child{width:150px} .tabl--obespechenie tbody tr:last-child td{border-bottom-color:transparent} .tabl--obespechenie tbody td{transition:background-color .2s ease,box-shadow .2s ease} .tabl--obespechenie tbody tr:hover td{background-color:var(--fon-2)} /* Источник под таблицей — на отбивке малой строки */ .obespechenie__istochnik{margin-top:14px} @media (max-width:767px){ /* Скролл-режим рамы рассчитан на пять столбцов бизнес-плана; двум столбцам прокрутка не нужна — на 360 таблица помещается как есть, min-width компонента снимаем (приём /finansovaya-model/). Числовая колонка уже: «15–60 %» помещается, а виду обеспечения ширина нужнее. */ .tabl-rama .tabl--obespechenie{min-width:0} .tabl--obespechenie thead th:last-child{width:104px} } /* ================= ЛИСТ 05 — Обеспечение в регионах ================= Единственный выделенный лист страницы (--sinij-fon) — несёт главное отличие от конкурентов: требования регионов прочитаны по документам каждого. Три плитки .plitka (base.css) в ряд — три равноправных случая, номеров нет намеренно (нумерация соврала бы о порядке — приём /biznes-plan/, лист 05). Продающий довод — строкой-вывод .vyvod-stroka, не в абзаце (правка заказчика 15.09.2026). Имён фондов нет: источник — стандарты, их правят часто (решение заказчика 15.09.2026). */ .sluchai{grid-template-columns:repeat(3,minmax(0,1fr))} /* Пояснение первой плитки — самое длинное на сайте (четыре строки фактуры), плитка выше, чем на /biznes-plan/ (380) */ .sluchai .plitka{height:400px} /* ================= ЛИСТ 06 — Кто принимает решение ================= Карточки с раскрытием — правка заказчика 15.09.2026: «перегруженный блок, надо скрыть информацию и при наведении показывать, но не дублировать блок выше». Чем отличается от плитки листа 05, чтобы не быть её повтором: светлая карточка без снимка, переключаются два ТЕКСТОВЫХ слоя, акцент — верхняя линия карточки, а не кадр. Механика та же, что у плитки и у плашки маршрута, — и это намеренно: третьего механизма раскрытия на сайте нет. Слои лежат в одной ячейке грида, высота карточки постоянна, соседей не двигает. Ощущение подъёма даёт содержимое. КАНДИДАТ в base.css, если понадобится второй странице. */ .reshenie__sluchai{grid-template-columns:repeat(3,minmax(0,1fr))} .reshenie__sluchai .kartochka{min-height:264px;display:flex;flex-direction:column} /* min-width:0 обязателен: два слоя в одной ячейке грида иначе не сжимаются и на 360 вылезают за край (поймано проверкой) */ .raskryv__sloi{position:relative;display:grid;flex:1;margin-top:14px;min-width:0} .raskryv__sut,.raskryv__razbor{grid-area:1/1;min-width:0} .raskryv__sut{align-self:start;transition:opacity .25s ease,transform .35s cubic-bezier(.22,.61,.36,1)} .raskryv__razbor{display:grid;grid-template-rows:0fr;align-self:start;opacity:0;transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1),opacity .28s ease} .raskryv__razbor>*{overflow:hidden;min-height:0} .raskryv:hover .raskryv__sut, .raskryv:focus-visible .raskryv__sut, .raskryv:has(:focus-visible) .raskryv__sut{opacity:0;transform:translateY(-8px)} .raskryv:hover .raskryv__razbor, .raskryv:focus-visible .raskryv__razbor, .raskryv:has(:focus-visible) .raskryv__razbor{grid-template-rows:1fr;opacity:1} /* ================= ЛИСТ 07 — Наша роль в процедуре ================= Дорожная карта .marshrut (base.css): четыре шага, две роли — предприятие строкой описания, ПМК плашкой по наведению и фокусу (тач, reduced-motion и печать показывают сразу — правила приехали с компонентом). Колонки срока нет: сроки этапов — на главной, здесь их быть не должно (ТЗ); правая дорожка сетки остаётся пустой, сетка не меняется. Лист стоит на белом — подсветка строки маршрута --fon-2 на fon-2 пропала бы. Отступ от заголовка — .marshrut--otstup (base.css). Своих правил листу не нужно. */ /* ================= ЛИСТ 08 — Форма ================= Форма в потоке (base.css), без колонки контактов — как на /biznes-plan/ и /finansovaya-model/: контакты в подвале строкой ниже. Обёртка .zayavka__forma — base.css. Акцент листа — крупная кнопка. Своих правил листу не нужно. */ /* ============================================================ АДАПТИВ — по лестнице base.css (1024 / 768 / 480), свои брейкпоинты не заводятся. Общие компоненты (герой, перечень с номерами, рама таблицы, плитка, карточки, примечание, маршрут, форма, полоса структуры) несут адаптив из base.css — здесь только страничные раскладки. ============================================================ */ /* ── ЛИСТ 05 — Плитки: 3 → 2 (последняя во всю строку) → 1. На тач пояснение открыто всегда (правило base) — высота плитки перестаёт быть постоянной, жёсткую снимаем, минимум оставляем: кадру нужен рост ── */ @media (max-width:1024px){ .sluchai{grid-template-columns:repeat(2,minmax(0,1fr))} .sluchai .plitka:last-child{grid-column:1/-1} } @media (max-width:768px){ .sluchai{grid-template-columns:1fr} .sluchai .plitka:last-child{grid-column:auto} .sluchai .plitka{height:auto;min-height:340px} } /* ── Адаптив листа 06. На тач раскрытия нет (разбор открыт сразу, правило ниже) — постоянная высота карточке не нужна ── */ @media (max-width:1024px){ .reshenie__sluchai{grid-template-columns:repeat(2,minmax(0,1fr))} .reshenie__sluchai .kartochka:last-child{grid-column:1/-1} } @media (max-width:768px){ .reshenie__sluchai{grid-template-columns:1fr} .reshenie__sluchai .kartochka:last-child{grid-column:auto} .reshenie__sluchai .kartochka{min-height:0} } /* ── Тач: ховера нет — подсветки строк таблиц гасим, чтобы не залипали после тапа (как .tabl--adresaty бизнес-плана); отклик .razdel гасится в base.css, у .put — выше по файлу ── */ @media (hover:none){ /* Наведения нет — разбор открыт сразу, суть снята: она пересказывает первую фразу разбора, вдвоём они дублируют */ .raskryv__sut{display:none} .raskryv__razbor{grid-template-rows:1fr;opacity:1} .tabl--sdacha tbody tr:hover td, .tabl--sdacha tbody tr:hover th{background-color:transparent} .tabl--obespechenie tbody tr:hover td{background-color:transparent;box-shadow:none} }