/* Оформление интерфейса. Отдельный файл, а не inline: политика безопасности запрещает inline-стили, и это же не даёт им расползтись по шаблонам. Визуальный язык — российский нормативный документ: бумага, чернила, синь мастичной печати, заголовки серифом (как в утверждаемом акте), номера пунктов моноширинным. Один громкий элемент — лист со штампом на лендинге; всё остальное намеренно тихое. */ :root { --paper: #fbfbf8; /* бумага, чуть тёплая, но не кремовая */ --sheet: #ffffff; /* лист документа */ --ink: #1a2233; /* чернила */ --pencil: #636d7e; /* пометки карандашом (muted) */ --rule: #d9dce2; /* линейки и разделители — декоративные, 3:1 не нужны */ /* Граница ЭЛЕМЕНТА УПРАВЛЕНИЯ: WCAG 1.4.11 требует 3:1, а --rule даёт 1.37:1 — рамка поля ввода была формально невидимой. */ --rule-strong: #8a92a3; --stamp: #2b4a9e; /* синь мастичной печати — акцент */ --stamp-weak: #eef2fb; /* подложка под синь */ --stamp-strong: #23407f; /* синь при наведении */ --ink-soft: #333f4e; /* текст-пояснение: между чернилами и карандашом */ --seal: #b3352c; /* киноварь отметок — только для предупреждений */ --seal-weak: #fdf5f4; /* подложка под киноварь */ /* Шкала размеров текста. До неё размеры подбирались по месту — вплоть до 14.5px, что прямо выдаёт значение, выбранное на глаз. Шесть шагов покрывают весь интерфейс: подпись, вспомогательный текст, интерфейс, основной текст, подзаголовок, заголовок. */ --text-xs: 13px; --text-sm: 14px; --text-md: 15px; --text-lg: 17px; --text-title: 19px; /* логотип и подзаголовки карточек */ --text-xl: 21px; --text-2xl: 28px; --radius: 4px; /* документы не скругляют углы почти */ /* Тёмной темы у продукта нет намеренно: визуальный язык — физический документ, инвертировать бумагу бессмысленно. Но заявить светлую схему обязательно, иначе списки select и полосы прокрутки придут тёмными. */ color-scheme: light; --serif: "PT Serif", Georgia, "Times New Roman", serif; --mono: ui-monospace, "JetBrains Mono", "Courier New", monospace; } * { box-sizing: border-box; } /* Ссылка к содержимому: на каждой странице перед основным блоком стоит шапка с навигацией, и без неё клавиатурный пользователь проходит её заново каждый раз. Скрыта, пока не поймает фокус. */ .skip { position: absolute; left: -9999px; background: var(--stamp); color: #fff; padding: 10px 16px; border-radius: var(--radius); z-index: 10; } .skip:focus { left: 12px; top: 12px; } body { margin: 0; font: 16px/1.6 system-ui, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--paper); } main { max-width: 1000px; margin: 0 auto; padding: 28px 20px 48px; } /* Страницы с таблицами шире: 880px — ширина для ЧТЕНИЯ, и семь колонок с полями ввода в неё не помещаются. На 1280 поля ОС и ПО схлопывались в квадраты, а последние столбцы уходили за край — то есть таблица, сделанная ради скорости ввода, была неудобна именно на рабочем экране. */ main.wide { max-width: 1200px; } /* Статья — книжная полоса по центру. Полоса содержания шире текста (1000 px против 68ch), и растянутая на всю ширину карточка статьи оставляла бы справа пустое поле: текст прижат влево, рамка далеко. Ограничиваем саму карточку и центрируем её — широкая полоса при этом остаётся у тех страниц, где есть что в неё положить: витрина тарифов, главная, кабинет, таблицы. */ main > article.card, main > nav.crumbs { max-width: 78ch; margin-inline: auto; } /* Мера набора: строка длиннее 75 знаков теряет читателя на возврате к началу следующей. Сетки (.grid, .grid3, .compare) не ограничиваем — там колонки задают ширину сами. */ .lead, .card > p, .card > ul, .card > ol, .note, .help, .intro { max-width: 68ch; } /* --- шапка --- */ .top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 14px 20px; background: var(--sheet); border-bottom: 2px solid var(--ink); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: var(--text-title); color: var(--ink); text-decoration: none; letter-spacing: .01em; } .brand-mark { display: block; } .brand-sub { font-family: system-ui, "Segoe UI", sans-serif; font-weight: 400; font-size: var(--text-xs); color: var(--pencil); align-self: center; margin-top: 2px; } @media (max-width: 560px) { .brand-sub { display: none; } } .topnav { margin-left: auto; display: flex; gap: 18px; } .topnav a { color: var(--pencil); text-decoration: none; font-size: var(--text-md); } /* Наведение только для указателя: на сенсорном экране состояние залипало после нажатия — кнопка выглядела нажатой до следующего касания. */ @media (hover: hover) { .topnav a:hover { color: var(--stamp); } } h1, h2 { font-family: var(--serif); letter-spacing: .005em; } h1 { font-size: var(--text-2xl); line-height: 1.25; margin: 0 0 12px; } h2 { font-size: var(--text-xl); margin: 0 0 10px; line-height: 1.25; } h3, .hero-calc-title, .compare-way { line-height: 1.25; } .lead { font-size: var(--text-lg); color: var(--ink-soft); } .note, .help { color: var(--pencil); font-size: var(--text-sm); } .help { margin: 6px 0 0; } .intro { color: var(--pencil); margin: 0 0 18px; } /* Надзаголовок-пометка: номер раздела или ссылка на норму. */ .eyebrow { font: 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--pencil); margin: 0 0 8px; } .ref-mark { font: 12px/1.4 var(--mono); color: var(--stamp); margin: 0 0 4px; } .card, .blocks { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 28px; /* Между группами расстояние обязано быть больше, чем внутри группы: 20px было МЕНЬШЕ внутреннего шага 22px, и страница читалась одной сплошной лентой. */ margin-bottom: 36px; } /* --- герой: текст + лист документа --- */ .hero-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: 36px; align-items: start; padding: 26px 0 34px; } .hero-doc h1 { font-size: 32px; } /* витрина: единственный шаг вне шкалы, намеренно крупнее заголовка страницы */ .hero-doc .actions { margin-top: 22px; } /* Экспресс-расчёт в hero — сигнатурный элемент: продукт вместо картинки. Оформлен как бланк: линейка сверху, тихая рамка, никакой имитации. */ .hero-calc { background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--stamp); border-radius: var(--radius); padding: 20px 22px 18px; box-shadow: 0 6px 18px rgba(26, 34, 51, .06); } .hero-calc-title { font-family: var(--serif); font-weight: 700; font-size: var(--text-title); margin: 0 0 4px; } .hero-calc-sub { color: var(--pencil); font-size: var(--text-sm); margin: 0 0 14px; } .hc-field { display: block; font-weight: 550; font-size: var(--text-sm); margin-bottom: 12px; } .hc-field select { display: block; width: 100%; margin-top: 5px; padding: 8px 10px; /* 16px, а не 15: Safari на iOS зумит вьюпорт на фокусе поля мельче 16px, и это первый же элемент воронки. */ font: 16px/1.4 system-ui, "Segoe UI", sans-serif; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet); color: var(--ink); } .hc-field select:focus { outline: 2px solid var(--stamp); outline-offset: 1px; } .hero-calc .check { font-size: var(--text-sm); margin-bottom: 8px; } .hc-submit { width: 100%; margin-top: 12px; padding: 12px 18px; font-weight: 600; } .hero-calc .note { margin: 10px 0 0; font-size: var(--text-xs); } /* --- сравнение путей --- */ .compare { display: grid; gap: 0; } .compare-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--rule); } .compare-row:first-child { border-top: 0; } .compare-way { font-family: var(--serif); font-weight: 700; } .compare-row p { margin: 0; color: var(--ink-soft); font-size: var(--text-md); } .compare-row.is-us { background: var(--stamp-weak); margin: 0 -28px; padding: 14px 28px; } .compare-row.is-us .compare-way { color: var(--stamp); } /* --- финальный призыв --- */ .closing { text-align: center; padding: 34px 24px 10px; } .closing .actions { justify-content: center; } /* --- шаги опросника --- */ .steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .step { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--sheet); color: var(--pencil); text-decoration: none; font-size: var(--text-sm); } .step.current { background: var(--stamp); border-color: var(--stamp); color: #fff; } /* --- вопросы --- */ .q { padding: 14px 0; border-top: 1px solid var(--rule); } .q:first-of-type { border-top: 0; } label { display: block; font-weight: 550; margin-bottom: 6px; } /* Все текстовые поля, а не только type="text": поля почты и пароля получались вдвое уже соседних и выглядели чужими на странице. */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea { width: 100%; padding: 9px 11px; font: inherit; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet); } input:focus, textarea:focus, .cta:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; } fieldset { border: 0; padding: 0; margin: 0; } legend { font-weight: 550; margin-bottom: 8px; padding: 0; } .check, .radio { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; margin-bottom: 7px; } .check input, .radio input { margin-top: 4px; accent-color: var(--stamp); } /* --- кнопки --- */ .actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; } button { font: inherit; cursor: pointer; border-radius: var(--radius); padding: 10px 18px; } .primary { background: var(--stamp); color: #fff; border: 1px solid var(--stamp); } .primary:hover { background: var(--stamp-strong); } .ghost { background: var(--sheet); color: var(--ink); border: 1px solid var(--rule-strong); } .link { background: none; border: 0; color: var(--pencil); padding: 0; text-decoration: underline; } .cta { display: inline-block; background: var(--stamp); color: #fff; padding: 12px 24px; border-radius: var(--radius); text-decoration: none; font-weight: 600; } .cta:hover { background: var(--stamp-strong); } /* Ссылка — действие, а не пометка: цвет карандаша означает «пояснение, не кликабельно», и вторичная ссылка рядом с примечанием сливалась с ним. */ .ghost-link { color: var(--stamp); } /* Счётчик и суммы меняются: пропорциональные цифры дёргали бы соседний текст на каждом шаге опроса. */ .progress { color: var(--pencil); font-size: var(--text-sm); margin-left: auto; font-variant-numeric: tabular-nums; } /* --- плитки результата --- */ /* Плитки результата: одинаковая сетка строк во всех плитках, чтобы подпись, значение и примечание стояли на общих линиях — иначе три числа, ради которых пришёл пользователь, «пляшут» по высоте. */ .grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0; } .tile { display: grid; grid-template-rows: subgrid; grid-row: span 3; } @media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tile { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; background: var(--sheet); } /* Главный вердикт выделен так же, как бланк расчёта в hero: линейкой сверху. */ .tile.is-main { border-top: 3px solid var(--stamp); background: var(--stamp-weak); } .tile.is-main .tile-value { color: var(--stamp); } .tile-label { display: block; color: var(--pencil); font-size: var(--text-xs); } .tile-value { display: block; font-family: var(--serif); font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 3px 0; } .tile-note { display: block; color: var(--pencil); font-size: var(--text-xs); } /* Значение-фраза, а не число: 26 пт серифом её распирает за плитку. Класс, а не атрибут style — тот отбрасывается нашим же CSP. */ .tile-value.is-text { font-size: 1rem; line-height: 1.35; font-weight: 600; } .findings, .findings li { color: var(--seal); } /* Сообщение об ошибке формы обязано читаться КАК ошибка: прежний селектор `.findings li` не срабатывал на абзаце, и текст красился как обычный. */ .form-error { color: var(--seal); border: 1px solid var(--seal); border-left-width: 4px; border-radius: var(--radius); background: var(--seal-weak); padding: 10px 14px; margin: 0 0 16px; } /* Объявление сервиса: полоса над содержимым каждой страницы. Обычное объявление синее — тем же цветом, что и прочие подтверждения; работы и недоступность красные, как ошибка формы: посетитель должен понять разницу между «вышло обновление» и «сейчас ничего не получится», не читая текста. */ .announcement { border: 1px solid; border-left-width: 4px; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 18px; white-space: pre-line; } .announcement-info { color: var(--stamp); border-color: var(--stamp); background: var(--stamp-weak); } .announcement-warning { color: var(--seal); border-color: var(--seal); background: var(--seal-weak); } /* Состояние выданного пакета. Красным — только то, что действительно требует действия: пакет на руках собран по прежней редакции. */ .badge { display: inline-block; font-size: var(--text-sm); padding: 2px 8px; border-radius: var(--radius); } .badge-fresh { background: var(--stamp-weak); color: var(--stamp); } .badge-stale { background: var(--seal); color: #fff; } /* Незаполненное описание. Синий, а не красный: человек ничего не сломал, он ещё не закончил — и заготовка честно не знала виртуальности узлов. */ .gaps { border: 1px solid var(--stamp); border-left-width: 4px; border-radius: var(--radius); background: var(--stamp-weak); padding: 18px 20px; margin: 0 0 22px; } .gaps-title { margin: 0 0 4px; font-weight: 550; color: var(--stamp); } .gap { padding-top: 16px; margin-top: 14px; border-top: 1px solid var(--rule); } .gap-subject { margin: 0; font-weight: 550; } .gap-question { margin: 2px 0 0; font-size: var(--text-sm); color: var(--ink-soft); } /* Цена ответа — тем же цветом, что и вывод расчёта: это про результат, а не про оформление. */ .gap-price { margin: 4px 0 0; font-size: var(--text-sm); color: var(--stamp); } .gap-answer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } /* Объект стоит перед ответом и держит ширину: иначе кнопки в соседних строках группы разъезжаются и глазу не за что зацепиться. */ .gap-object { min-width: 210px; font-weight: 550; } .gap-answer input[type="text"] { min-width: 190px; width: auto; } /* Пояснение к принятому строго и к отложенному: рядом, но тише вопроса. */ .aside-note { border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); padding: 14px 18px; margin: 0 0 18px; } .aside-note p { margin: 0; } .aside-note p + p { margin-top: 6px; } /* Примечания — не замечания: нейтральный цвет, иначе читаются как проблема. */ .notes li { color: var(--pencil); } .foot { max-width: 1000px; margin: 0 auto; padding: 0 20px 36px; color: var(--pencil); font-size: var(--text-sm); border-top: 1px solid var(--rule); padding-top: 18px; } .foot a { color: var(--pencil); } /* --- сетки лендинга --- */ /* 190px, а не 210: при 210 три колонки требовали 674px против 672 доступных на 768 — третья карточка срывалась на свою строку. */ .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; } .grid3 h3 { font-size: 1rem; margin: 0 0 6px; font-family: var(--serif); } .grid3 p { margin: 0; color: var(--ink-soft); font-size: var(--text-md); } /* Отступ под номер — на КАЖДОМ пункте: заданный один раз на списке, он доставался только первой колонке, и номера второй наезжали на текст первой («…и класс12.»). */ .cols { columns: 2; column-gap: 24px; padding-inline-start: 0; } .cols li { break-inside: avoid; margin-bottom: 5px; margin-inline-start: 26px; } .cols li::marker { font-family: var(--mono); font-size: var(--text-xs); color: var(--pencil); } .permalink { /* Многострочное поле, а не input: URL расчёта длиннее любой колонки, а кнопки «скопировать» быть не может — интерфейс без JavaScript. */ width: 100%; padding: 9px 11px; font: 13px/1.5 var(--mono); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); word-break: break-all; resize: vertical; } article h2 { margin-top: 26px; } .muted { color: var(--pencil); font-size: var(--text-sm); } /* Номер закона не разрывается по дефису: «по 152-» на одной строке и «ФЗ» на следующей читается как опечатка, а не как перенос. */ .nowrap { white-space: nowrap; } @media (max-width: 720px) { .hero-doc { grid-template-columns: 1fr; } .compare-row { grid-template-columns: 1fr; gap: 4px; } .compare-row.is-us { margin: 0 -16px; padding: 14px 16px; } .card { padding: 20px 16px; } .cols { columns: 1; } .topnav { width: 100%; margin-left: 0; } } /* --- оговорка о персональных данных в опроснике --- */ .privacy { border: 1px solid var(--rule); border-left: 4px solid var(--stamp); background: var(--stamp-weak); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; font-size: var(--text-md); } .privacy p { margin: 0 0 8px; } .privacy p:last-child { margin-bottom: 0; } /* Подтверждение выполненного действия: молчаливый редирект неотличим от несработавшей кнопки. */ .form-done { color: var(--stamp); border: 1px solid var(--stamp); border-left-width: 4px; border-radius: var(--radius); background: var(--stamp-weak); padding: 10px 14px; margin: 0 0 18px; } /* Формы входа и регистрации короткие — на всю полосу набора они выглядят разреженно, а поля уезжают от подписей. */ .auth-card { max-width: 520px; } .topnav-form { display: inline; } .topnav-form .link { font-size: var(--text-md); } /* --- кабинет --- */ /* Широкая таблица прокручивается ВНУТРИ себя: семь колонок с полями ввода иначе растягивают страницу, и горизонтально ездит весь макет. Тени у краёв показывают, что таблица продолжается: без них видно два столбца из семи и ничто не намекает, что можно прокрутить. Приём чисто фоновый — интерфейс работает без JavaScript. */ .table-scroll { overflow-x: auto; background: linear-gradient(to right, var(--sheet) 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), var(--sheet) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(26, 34, 51, .12), rgba(26, 34, 51, 0)), radial-gradient(farthest-side at 100% 50%, rgba(26, 34, 51, .12), rgba(26, 34, 51, 0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .table-scroll .systems { min-width: 720px; } .table-scroll .levels { min-width: 520px; } /* Таблицы норм в тексте: условия уровней защищённости и объём базового набора мер. Свой класс, а не голая : правило для `.card table` имело бы ту же специфичность, что `.systems th`, и таблицы кабинета переняли бы чужой вид по одному лишь порядку строк в файле. */ .levels { width: 100%; border-collapse: collapse; margin: 18px 0; } .levels th, .levels td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--rule); vertical-align: top; } .levels thead th { font-size: var(--text-sm); color: var(--pencil); font-weight: 550; } .levels tbody th { white-space: nowrap; } .levels td:first-of-type { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Подпись — над таблицей и слева: она объясняет, по какой норме построены строки, и в этой роли читается раньше шапки. */ .levels caption { caption-side: top; text-align: left; padding-bottom: 8px; font-size: var(--text-sm); color: var(--pencil); } /* Поле переименования схлопывалось в полоску, когда таблица получила минимальную ширину: колонки перераспределились, и ввод остался без места. Ширина задаётся полю, а не колонке. */ .systems .rename input { min-width: 170px; } /* Подсказка про Enter — мелким и приглушённым: она нужна один раз, а живёт в каждой строке таблицы. */ .systems .rename-hint { font-size: .78rem; opacity: .7; white-space: nowrap; } /* Ввод в таблице: без нижней границы колонки делят ширину по содержимому, и поле ОС становится уже слова «ОС». */ .systems input[type="text"] { min-width: 130px; } .systems input[type="number"] { min-width: 72px; } .systems { width: 100%; border-collapse: collapse; margin: 18px 0; } .systems td { font-variant-numeric: tabular-nums; } .systems th, .systems td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--rule); vertical-align: middle; } .systems th { font-size: var(--text-sm); color: var(--pencil); font-weight: 550; } .systems tr.is-current { background: var(--stamp-weak); } .systems .rename { display: flex; gap: 8px; align-items: center; } .systems .rename input { max-width: 260px; } .row-actions { display: flex; gap: 12px; align-items: center; } /* Подпись только для скринридера: в таблице колонка уже названа шапкой, но поле ввода обязано иметь собственное имя. */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Переходы между шагами описания системы: назад слева, вперёд справа. */ .steps { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--rule); flex-wrap: wrap; } /* Нормативная база на лендинге: перечень актов со ссылками. Строки длинные (полное наименование акта плюс издатель), поэтому маркеры убраны — с ними каждая строка переносится на вторую и список рябит. */ .sources { list-style: none; padding: 0; margin: 16px 0 0; } .sources li { padding: 8px 0; border-top: 1px solid var(--rule); } .sources li:first-child { border-top: none; } /* --- статьи: вопросы с ответами и следующий шаг --- */ /* Ответы читаются подряд, поэтому вопрос отделён весом, а не линейкой: девять линеек подряд превращают раздел в бланк. */ .faq { margin: 0; } .faq dt { font-weight: 550; margin-top: 18px; } .faq dd { margin: 4px 0 0; color: var(--ink-soft); max-width: 68ch; } /* Следующий шаг отделён от текста статьи расстоянием и линейкой сверху: это не продолжение чтения, а развилка — её нужно заметить, дочитав до конца, и не спутать с очередным разделом. */ /* Навигационная цепочка над статьёй. Ступень «здесь» не ссылка: ссылка на саму себя никуда не ведёт и сбивает чтение с экрана. */ .crumbs { margin: 0 0 12px; font-size: var(--text-sm); color: var(--pencil); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .crumbs a { color: var(--ink-soft); } .crumbs-sep { color: var(--rule-strong); } .next-step { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule); } .next-step h2 { margin-top: 0; } .next-step p { max-width: 68ch; } /* Соседние темы. Тише, чем «Что дальше»: там названное действие, здесь — боковые двери для того, кто пришёл с соседним вопросом и главную не открывал. Заголовок мельче основного, чтобы блок не спорил с призывом над ним. */ /* Схема к статье. Картинка сжимается по ширине карточки, но не растягивается сверх своего размера: вектор растянутый выглядит не резче, а пустее — линии разъезжаются от подписей. */ .scheme { margin: 22px 0; } .scheme img { max-width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: var(--radius); } .scheme figcaption { margin-top: 8px; font-size: var(--text-sm); color: var(--pencil); max-width: 68ch; } .related { margin-top: 26px; } .related h2 { font-size: var(--text-md); margin-bottom: 8px; } .related ul { margin: 0; padding-inline-start: 20px; } .related li { margin-bottom: 4px; } /* --- образцы документов ---------------------------------------------- Образец должен читаться как документ, а не как ещё один раздел страницы: рамка и подложка отделяют то, что собрал движок, от того, что мы о нём рассказываем. Иначе разбор и сам документ сливаются, и человек не понимает, что именно он получит файлом. */ .sample .document { border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; background: var(--paper); } .sample .document h3 { font-size: var(--text-md); margin: 22px 0 6px; } .sample .document h3:first-child { margin-top: 0; } .sample .document p { max-width: 72ch; } .samples { list-style: none; margin: 0; padding: 0; } .samples li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); } .samples h2 { font-size: var(--text-md); margin: 0 0 4px; } .samples p { margin: 0; color: var(--ink-soft); max-width: 72ch; } /* Служебные врезки счётчика. ⚠️ Метрика вставляет свои технические iframe (синхронизация идентификаторов) и прячет их АТРИБУТОМ style="display:none". Наша политика безопасности инлайн-стили запрещает, атрибут отбрасывается — и пустые врезки вылезают внизу страницы (замечено владельцем 01.09.2026). Тот же класс отказа, что 27.08 с полосами: сервер прав, разметка верна, видно только глазами и в консоли браузера. Прячем своим правилом — оно приходит из нашего файла, и CSP к нему вопросов не имеет. */ iframe[src*="mc.yandex"] { display: none !important; } /* Приманка для роботов на форме обращения. Не display:none и не hidden: часть скриптов такие поля пропускает именно потому, что их не видно в разметке «как у людей». Поле остаётся в потоке, но уезжает за край экрана. */ .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- воронка и посещаемость в разделе управления ---------------------- Графика без JavaScript и без внешних библиотек: полосы и столбики — это div с процентной шириной или высотой. Интерфейс работает без JS намеренно, и служебные страницы не исключение. */ .funnel { list-style: none; padding: 0; margin: 0 0 1rem; } .funnel li { margin-bottom: .6rem; } .funnel-label { display: flex; justify-content: space-between; font-size: .92rem; } .funnel-count { font-variant-numeric: tabular-nums; font-weight: 600; } .funnel-track { display: flex; align-items: center; gap: .5rem; } /* Полоса — SVG: ширину задаёт атрибут фигуры, потому что атрибут style запрещён нашим CSP и молча отбрасывается браузером. */ .funnel-bar { display: block; width: 100%; height: 18px; } .funnel-bar rect { fill: #57a97a; } .funnel-share { font-size: .8rem; opacity: .75; white-space: nowrap; font-variant-numeric: tabular-nums; } .funnel-lost { color: #a33; margin-left: .3rem; } .visits-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: .5rem 0; overflow-x: auto; } .visits-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 26px; } .visits-bar { display: block; width: 100%; height: 100%; } .visits-bar rect { fill: #57a97a; } .visits-day { font-size: .68rem; opacity: .7; margin-top: 2px; white-space: nowrap; } /* --- кабинет карточками (решение владельца 26.08) --------------------- Прежде системы стояли таблицей из пяти колонок, и в каждой строке было три одинаковые кнопки: следующий шаг приходилось вычислять. Теперь система — карточка, где слева состояние и путь, справа одно главное действие. */ .access-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-left: 4px solid var(--stamp); background: var(--stamp-weak); border-radius: var(--radius); padding: 16px 20px; margin: 18px 0 0; } .access-bar-demo { border-left-color: var(--pencil); background: var(--paper); } .access-line { margin: 0 0 2px; font-size: var(--text-md); } .access-bar > div { flex-grow: 1; min-width: 260px; } /* Ссылка, выглядящая кнопкой: действие ведёт на другую страницу, а не отправляет форму, и здесь честнее