/* ════════════════════════════════════════════════════════════════════════════════════ entry.patterns.css — ПРАВКИ ВХОДНЫХ ЭКРАНОВ (index / pin / setup). Подключать ПОСЛЕ pages/index.css, pages/pin.css, pages/setup.css. Всё, что здесь есть, видно на присланных скриншотах. Три дефекта и один ритм. Ни одной новой величины: только существующие токены и шкала --sp-*. ════════════════════════════════════════════════════════════════════════════════════ */ /* ═══ 1. АВТОЗАПОЛНЕНИЕ КРАСИТ ПОЛЯ В ГОЛУБОЙ ════════════════════════════════════ На скриншотах входа и входа сотрудника поля «Телефон», «Пароль», «Код пространства» и первая клетка пинкода — голубые. Это не наш цвет и вообще не цвет: так Chrome помечает подставленное значение, и подменить фон обычным background нельзя — браузер рисует свой поверх. Почему это важнее, чем кажется. Голубой — единственный холодный цвет на экране, где вся палитра тёплая и зелёная, и стоит он на ПЕРВОМ экране продукта, в поле, куда человек смотрит в первую очередь. Экран, собранный по макету, из-за одного этого выглядит чужим и незаконченным — при том, что в css нет ни одной ошибки: правила для этого состояния просто нет ни в одном файле проекта. Приём один на все браузеры: заливка через inset box-shadow (её autofill не перекрывает) и -webkit-text-fill-color для текста. transition в 1e8s — известный способ отложить перекраску там, где box-shadow не поддержан. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, select:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100px var(--surface) !important; box-shadow: inset 0 0 0 100px var(--surface) !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); transition: background-color 1e8s ease-in-out 0s; font-family: inherit !important; } /* В фокусе поле обязано выглядеть как в фокусе, а не как подставленное: рамка и кольцо остаются, заливка — та же белая. */ input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 100px var(--surface), var(--ring) !important; box-shadow: inset 0 0 0 100px var(--surface), var(--ring) !important; border-color: var(--accent) !important; } /* Клетки пинкода: та же беда, но у них своя заливка и центрирование. */ .pin-cell:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100px var(--surface) !important; box-shadow: inset 0 0 0 100px var(--surface) !important; } /* Firefox помечает автозаполнение своим внутренним состоянием — там достаточно фона. */ @supports (-moz-appearance:none) { input:autofill, select:autofill { background: var(--surface); color: var(--text); filter: none; } } /* ═══ 2. ЧЁРНАЯ РАМКА НА «ЧТО ЕЩЁ» ══════════════════════════════════════════════ На скриншоте раскрытого шага 1 вокруг «Что ещё» стоит чёрный прямоугольник — это системная обводка фокуса браузера. Она появляется у ЛЮБОГО интерактивного элемента, которому не задан свой вид фокуса, и в проекте таких элементов много: summary, .link-btn, .chip, .btn-find, .back-btn, .le-mkdef, .icon-btn. В токенах есть ровно одно кольцо — --ring, «единственный вид обводки при фокусе». По коду же :focus-visible описан четырьмя способами (outline 2px accent, box-shadow ring, inset 2px, outline:none) и у большинства кнопок не описан вовсе. Один вид на всё: своя обводка вместо чужой, тем же кольцом, что у полей ввода. */ .more > summary:focus-visible, .link-btn:focus-visible, .chip:focus-visible, .btn-find:focus-visible, .btn-cta:focus-visible, .back-btn:focus-visible, .le-mkdef:focus-visible, .icon-btn:focus-visible, .tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } /* У чипа и главной кнопки скругление своё — кольцо обязано ему следовать, иначе выглядит наклейкой поверх. */ .chip:focus-visible { border-radius: var(--r-pill) } .btn-cta:focus-visible, .btn-find:focus-visible { border-radius: var(--r-md) } /* ═══ 3. РАЗРЯДКА КАПИТЕЛИ: ПЯТЬ ЗНАЧЕНИЙ НА ОДНО НАМЕРЕНИЕ ══════════════════════ На шаге 2 в одном кадре видны «ИНН ОРГАНИЗАЦИИ» (.1em) и «ЗАЧЕМ ИНН» в тёмной колонке (.14em) — одна роль, две разные разрядки, и подписи звучат по-разному, хотя должны звучать одинаково. По файлу: .eyebrow .14em, label .1em, .rail-ctx-label .14em, .opt-tag .08em, .invite-code .08em, .le-mkdef .04em, .mem-pin .14em. Намерений два — «подпись капителью» и «крупный набор с разрядкой». Два токена (--ls-caps в patterns.css, для набора остаётся .08em как осознанная величина). */ label, .rail-ctx-label, .eyebrow, .opt-tag, .le-mkdef, .le-def { letter-spacing: var(--ls-caps) } /* Код и пинкод — не подпись, а крупный набор, который диктуют вслух: там разрядка больше ОСМЫСЛЕННО. Одна величина на оба. */ .invite-code, .mem-pin { letter-spacing: .08em } /* ═══ 4. РИТМ ШАГА: 24 / 12 / 4 ══════════════════════════════════════════════════ Главная правка по существу и самая заметная. Сейчас на шаге расстояния такие: lede 20 ↓ label 6 ↓ поле 12 ↓ чипы 6 ↓ подсказка 4 ↓ факты 18 ↓ «что ещё» 10 ↓ кнопки 20. Восемь значений в диапазоне 4–20, то есть практически одно расстояние. Поэтому шаг и читается одним длинным списком, где «поле ввода», «список фактов» и «кнопка» лежат вперемешку — при полностью аккуратной вёрстке. Ставим три ступени, и структура появляется без единой новой рамки: 24 — между смысловыми частями (вопрос → поле → рассказ → действие) 12 — внутри части 4 — между однородными строками */ .lede { margin-bottom: var(--rh-sec)} .field { margin-bottom: var(--rh-block)} label { margin-bottom: var(--sp-3)} .sub { margin-top: var(--sp-2)} .chips { margin-top: var(--sp-3); gap: var(--sp-3)} .chips.modes { margin-top: var(--sp-3)} /* Рассказ о продукте — отдельная часть шага, а не хвост поля. */ .facts { margin: var(--rh-sec) 0 0; gap: var(--sp-4)} .more { margin-top: var(--rh-block)} .more .facts { margin-top: var(--sp-4)} /* Действие отделяется от чтения сильнее всего: это единственное место, где ступень ещё крупнее секции — иначе кнопка читается продолжением абзаца. */ .actions { margin-top: var(--sp-10); gap: var(--sp-5)} .skip-note { margin-top: var(--rh-block)} .le-list { gap: var(--sp-2); margin-bottom: var(--rh-block)} .mem-list { gap: var(--sp-2); margin: var(--rh-block) 0 var(--sp-3)} .le-form, .mem-form { margin-top: var(--rh-sec)} /* Разделительная линия над формой организации убрана: секции разделяет ритм. Линия рядом с крупным воздухом даёт двойное разделение — оно и читается как «ещё одна рамка». Линия остаётся там, где секции РАВНЫ по весу (код приглашения). */ .le-form { border-top: 0; padding-top: 0} /* Шаги (.steps) стояли здесь с --rh-block, а ниже, в секции про левую колонку, тот же селектор перебивал их на --sp-8 — раннее правило не рисовалось вовсе. Оставлено одно, в секции 6: там оно стоит рядом с остальными кеглями и отступами колонки. */ .rail-ctx { padding-top: var(--rh-sec)} /* ═══ 5. ИКОНКИ КОСЯТ ОТНОСИТЕЛЬНО ТЕКСТА ═══════════════════════════════════════ Сейчас: .facts li{align-items:flex-start} + .facts li i{width:16px;margin-top:2px}. Двойка подобрана на глаз под 13px текста и один конкретный глиф. Она не может быть верной: у иконочного шрифта своя высота строки и свои внутренние отступы, у каждого глифа своя высота рисунка, и при align-items:flex-start браузер прижимает к верху ДВА РАЗНЫХ строчных бокса — текстовый (13px × 1.5 = 19.5px) и иконочный (16px × 1). Их центры расходятся на несколько пикселей, и никакой margin это не выправит: он лечит один случай и ломает остальные. Ровно поэтому «иконки один хрен криво». ПЕРВАЯ ПОПЫТКА БЫЛА НЕВЕРНОЙ, И ВАЖНО ПОЧЕМУ. Я выровнял ЦЕНТР строчного бокса иконки по центру первой строки — числа совпали точно, а глаз всё равно видит перекос. Потому что бокс — не рисунок: у каждого глифа своя высота чернил внутри общего бокса (fa-building высокий и узкий, fa-money-bill-trend-up низкий и широкий), и центры боксов совпадают, а центры рисунков — нет. ОПОРА — БАЗОВАЯ ЛИНИЯ, И ЭТО УЖЕ РЕШЕНО В ВАШЕМ КОДЕ. В counterparties.css у значка роли (.cp-ic) стоит ровно тот же рецепт с пояснением: «раньше стояла по верхнему краю с отступом в 2px — числом, подобранным на глаз; базовая линия у значка и текста общая по построению». Надо было сразу взять его, а не изобретать второе решение той же задачи. Кегль .92em и ширина 1.1em — оттуда же: значки обязаны быть одинаковой ширины, иначе текст строк перестанет выравниваться. Двухстрочный пункт ведёт себя верно сам: baseline берёт базовую линию ПЕРВОЙ строки, а не блока целиком. */ .facts li { align-items: baseline } .facts li i { margin-top: 0; width: 1.1em; font-size: .92em; text-align: center; flex: none; line-height: inherit } /* Иконка в кнопке — там ряд центрированный и строка одна, сравнивать надо центры. */ .btn-cta i, .link-btn i, .back-btn i, .btn-find i { line-height: 1; width: 1.1em; text-align: center; flex: none } .le-ico, .le-item i { width: 1.1em; text-align: center; flex: none; line-height: inherit } /* ═══ 6. ЛЕВАЯ КОЛОНКА МЕЛКАЯ ДЛЯ СВОЕГО МЕСТА ════════════════════════ Шаги набраны 14px и 12px — учётными кеглями реестра, в котором ищут цифры. Здесь не ищут: это единственное место, где человек видит весь путь, и читает его один раз в жизни. Берём готовые ступени (--fs-form у названия шага, --fs-md у подписи), новых величин не вводим. Колонка шире на 2rem: «ООО, ИП — сколько нужно» на 15rem вставало впритык. Раньше здесь назывался ещё и --fs-lede — токен, который этот блок никогда не брал (подпись набрана --fs-md). Комментарий обещал одно, код делал другое, и по обещанию токен считался живым: искать мёртвое принято поиском ИМЕНИ, а имя встречалось — в комментарии. Сам --fs-lede убран в 09.803: он был третьим именем для 15px рядом с --fs-xl и --fs-form и не использовался нигде. */ .wrap { grid-template-columns: 17rem 1fr } .rail { padding: var(--sp-9) var(--sp-8); gap: var(--rh-sec)} .rail .mark { font-size: var(--fs-4xl); margin-bottom: var(--sp-9)} .steps { gap: var(--sp-8)} .step-item { gap: var(--sp-5)} .step-num { flex: 0 0 28px; height: 28px; font-size: var(--fs-md) } .step-item.done .step-num::after { font-size: var(--fs-lg) } .step-name { font-size: var(--fs-form) } .step-note { font-size: var(--fs-md) } .rail-ctx-label{ font-size: var(--fs-xs) } .rail-ctx-text { font-size: var(--fs-lg) } @media (max-width:860px){ .wrap { grid-template-columns: 1fr } } /* ═══ 7. ТРИ РАВНЫХ ВЫХОДА В ОДНОМ РЯДУ ═════════════════════════════════════════ На шаге 2 в одной строке стоят «Сохранить организацию», «Дальше →» и «Пропустить шаг», а под ними ещё абзац про то, что можно и позже. Четыре способа уйти со шага, и ни один не выглядит главным — «Сохранить» вообще погашено. Вёрстка это не лечит, но она может перестать врать: у ряда действий один главный элемент, остальные тише на ступень. «Дальше» — призрачная, пока организация не сохранена; «Пропустить» — ссылкой, а не кнопкой: это отказ, а не действие. Порядок оставлен ваш (главное последним — сторож rhythm его проверяет). */ .actions .btn-far { background: none; border: 0; padding: var(--sp-3) 0; color: var(--text-muted); font-size: var(--fs-md); font-weight: var(--fw-normal); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; } .actions .btn-far:hover { color: var(--accent); text-decoration-color: currentColor } .actions .kbd-hint { margin-left: var(--sp-2)} /* ═══ 8. КАРТОЧКА «НАШЛИ В РЕЕСТРЕ» ═════════════════════════════════════════════ Здесь человек подтверждает организацию кнопкой — и подтверждать он должен ровно то, что сохранится. Сохраняется же весь ответ реестра: ИНН, КПП, ОГРН, адрес, дата регистрации, руководитель и полное наименование. Показывалось из этого три поля одной строкой через точки, остальное уезжало в юрлицо молча. Строка через точки для реквизитов не годится в принципе: «6679168854 · 667901001 · 1136679012345» — три числа подряд, и какое из них ОГРН, читатель выясняет счётом цифр. Поэтому форма .p-kv — подпись и значение, — а не своя вёрстка: это ровно тот случай, для которого примитив и заведён. */ .found-full { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.45 } .found-facts { margin-top: var(--rh-block)} /* Подложка карточки цветная — подписи на ней тише основного текста, но не бледнее границы читаемости. */ .found-facts .p-kv-l { color: var(--text-secondary) } .found-facts .p-kv-v { font-size: var(--fs-xs) } .found-acts { margin-top: var(--rh-block)} /* ═══ 9. КАКУЮ СТРОКУ ПРАВИМ ════════════════════════════════════════════════════ Форма шага 2 одна на «завести новую» и «изменить эту», а при трёх организациях в списке эти два состояния по её виду не различались: нажал карандаш — поля сменились, но чьи именно, видно не было. Отмечаем ИСТОЧНИК правки в списке. Рамкой и подложкой, без сдвига и без своей высоты: строка не должна прыгать, иначе список дёргается при каждом входе в правку. Цвет — акцентный: это не предупреждение и не ошибка, а «вот эта». */ .le-item.editing { border-color: var(--accent); background: var(--accent-soft) } .le-item.editing .le-meta { color: var(--text-secondary) } /* ═══ 10. ЗАВЕДЁННЫЕ ОРГАНИЗАЦИИ В КОЛОНКЕ ШАГОВ ════════════════════════════════ Список живёт на шаге 2 и вместе с ним уходит с экрана: на шаге 3 человек уже не видит, что собрал. Колонка для этого и есть — она отвечает «где я и что позади». Именами в столбик, а не строкой через запятую: два-три названия юрлиц длинные, и в строке они склеиваются в кашу, из которой не выделить одно. Ритм — --rh-item: это однородные строки, самое плотное расстояние из трёх. */ .rail-le { display: flex; flex-direction: column; gap: var(--rh-item)} .rail-le-one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } /* ═══ 11. ИМЯ И ПОДПИСЬ В СТРОКЕ СПИСКА ═════════════════════════════════════════ «Дмитрий» и «Руководитель» в одной строке стояли вразнобой. Причина та же, что у значков в секции 5, и лечится тем же: строка выровнена по ЦЕНТРАМ (align-items:center), а рядом стоят два текста разного кегля и разной гарнитуры — 15px полужирный интерфейсный и 12px моноширинный. Их строчные боксы разной высоты, центры совпадают, а БАЗОВЫЕ ЛИНИИ расходятся — глаз читает именно их, поэтому подпись «съезжает» относительно имени. Правим не контейнер, а сами тексты: align-self у пары спанов заводит для них общую базовую линию, а кнопки, значки и пинкод остаются выровненными по центру, как и должны быть. Поменяй мы align-items у всей строки — карандаш с крестиком уехали бы за текстом. */ .le-item > .le-name, .le-item > .le-meta, .mem-item > .le-name, .mem-item > .le-meta { align-self: baseline } /* ═══ 12. ТИХАЯ ССЫЛКА-ОТКАЗ НА ВХОДЕ ══════════════════════════════════════════ «Забыли пароль?» и «← Назад ко входу» выглядели СИСТЕМНОЙ КНОПКОЙ — серым прямоугольником с рамкой браузера. Причина оказалась в одну чёрточку: на этой странице свой класс называется .linkbtn (описан в index.css), а в 09.747 кнопки завели как .link-btn — через дефис. Класс стоял, правила под ним не было, браузер рисовал