/* LegalDocs · лендинг и справочник v2 по рендеру «Поля и сноски» (lending.html, statya-*.html). Источники: assets/app.css (жетоны, база, кнопки, сноска, журавль) + assets/lending.css — без правок; шрифты — те же файлы, что в приложении (/fonts), вместо Google Fonts. Продуктовые стили приложения не подключаются. */ @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/golos-text-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/golos-text-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/golos-text-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/golos-text-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/literata-cyrillic-opsz-normal.woff2') format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/literata-latin-opsz-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Literata'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/fonts/literata-cyrillic-opsz-italic.woff2') format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Literata'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/fonts/literata-latin-opsz-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/pt-mono-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/pt-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Hallmark · macrostructure: Long Document (реестр как оглавление, документ с полями) · tone: editorial, austere · anchor hue: ink-blue 229° Hallmark · pre-emit critique: см. render-polya-i-snoski.md (оценки по кадрам) Направление «Поля и сноски» — BRIEF-RENDER-POLYA-I-SNOSKI.md. Все цвета и гарнитуры — только токенами ниже. */ /* ============ Токены ============ */ :root { /* Бумага и чернила — нейтраль без крема (риск Б: «кремовая эстетика») */ --paper: #F6F6F3; /* фон кабинета */ --sheet: #FFFFFF; /* лист документа */ --paper-press: #EFEEE9; /* строка под курсором, активный пункт меню */ --paper-inset: #F6F6F3; /* поле ввода на листе — «вдавлено», темнее листа */ --ink: #1A1A18; /* 16,1:1 на фоне */ --ink-2: #63635C; /* вторичный, 5,59:1; 4,93:1 на --paper-press */ --rule: #E2E1DC; /* волосяная линия */ --rule-dot: #B9B8B0; /* точки отточия в оглавлении */ --edge-control: #8C8B83; /* граница поля ввода, 3,16:1 — WCAG 1.4.11 */ --edge-quiet: #D3D2CB; /* граница тихой кнопки: подпись несёт смысл, рамка — только форму */ --action: #243B80; /* чернильно-синий: ссылки (и главная кнопка в варианте «Синий») */ --action-press: #1B2E66; --on-action: #FFFFFF; /* 10,44:1 */ /* Главная кнопка — два варианта на выбор владельца (переключатель «Кнопки» в серой полосе). «Чернила»: цвет текста, синий остаётся только у ссылок. «Синий»: приглушённый тёплый чернильно-синий. */ --btn-main: #243B80; /* чернильно-синий — решение владельца 25.09 (вечер); белый на нём — AA с запасом */ --btn-main-press: #1B2D63; --on-btn-main: #FFFFFF; --focus: #243B80; --edge-field: #8C8B83; /* рамка поля: 3,42:1 на белом — WCAG 1.4.11 */ --mark: #FBEFC2; /* маркер: подсветка пункта при переходе от сноски */ /* Статусы: чей ход */ --st-yours: #1A1A18; --st-service: #63635C; --st-done: #1E6B45; --st-outside: #7A5300; --st-fault: #A32116; /* Прототип (серая полоса) — одинаково в обеих темах, чтобы не спутать с продуктом */ --proto-bg: #3A3A36; --proto-ink: #ECEBE6; --proto-ink-2: #B4B3AC; --proto-on: #ECEBE6; --proto-on-ink: #1A1A18; /* Гарнитуры */ --font-doc: 'Literata', Georgia, serif; --font-ui: 'Golos Text', system-ui, sans-serif; --font-num: 'PT Mono', ui-monospace, monospace; /* Кегли: интерфейс 1,2 (спокойная шкала), документ отдельно */ --t-micro: 12px; --t-meta: 13px; --t-ui: 14px; --t-lead: 15px; --t-toc: 17px; --t-turn: 19px; --t-doc: 18px; --t-h1: 36px; --t-h1-doc: 40px; /* Сетка 4/8 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; --s11: 80px; /* Радиусы: контролы 10 (решение владельца), лист 4, модалки и всплывающие 12 */ --r-control: 6px; /* кнопки и поля — 6 (решение владельца 24.09) */ --r-sheet: 4px; --r-modal: 12px; /* Блоки 25.09 (BLOKI-SPEC.md): плашки заливкой тоном вместо рамки — привычка российских гигантов (Taiga UI Notification, Gravity Alert «filled», VKUI FormStatus/Card, Plasma Note, Контур). Текст --ink на любой заливке ≥ 14,4 : 1, --ink-2 ≥ 5,0 : 1, значки --st-* ≥ 5,4 : 1 (светлая тема). */ --r-block: 12px; /* скругление плашки и карточки-действия (Gravity 8, VKUI 8–12, Taiga 12, Plasma 14) */ --tint: #ECEBE5; /* нейтральная плашка: информация, карточка-действие, шаги (1,10 : 1 к бумаге — как 5 % чёрного у Gravity) */ --tint-info: #E9EDF6; /* информация с синим значком (сейчас не используется в рендере — запас для «Нужно знать») */ --tint-done: #E5F0E8; /* успех: «Деньги зачислены», бесплатный документ */ --tint-outside: #F6EDD6; /* внимание: «Нужна проверка», незаполненные места, нет связи */ --tint-fault: #F8E6E2; /* ошибка: не загрузилось, не запустилось */ /* Движение: Эмиль Ковальски, 150–200 мс, ease-out */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --dur-press: 160ms; /* черта вкладки */ --dur-ui: 180ms; /* наведение, меню, колокол, блоки шагов, раскрытие */ /* Свод «движение продукта» (AUDIT-SVODNYJ §4.3, пакет 1 от 26.09): значения — из рендера, новые только названия */ --dur-enter: 200ms; /* окно, записка, окно-лист, угловая карточка */ --dur-panel: 220ms; /* боковая панель, лист снизу */ --dur-exit: 140ms; /* уход: записка, угловая карточка, панель, окно, лист */ --dur-fade: 150ms; /* линейно: замена при уменьшенном движении, переключатель, «Сохранено» */ --dur-trace: 1200ms; /* след сноски, «пишем» */ --shift-s: 8px; /* записка и блоки */ --shift-m: 16px; /* панель и окно-лист */ --shift-l: 24px; /* лист снизу */ --scale-in: 0.97; /* окно, меню, колокол */ --r-pill: 999px; /* таблетка и выключатель (А14) */ --shadow-float: 0 1px 2px rgba(26, 26, 24, .06), 0 8px 24px rgba(26, 26, 24, .12); color-scheme: light; } :root[data-btn="ink"] { --btn-main: #1A1A18; --btn-main-press: #3A3A36; --on-btn-main: #FFFFFF; --focus: #1A1A18; } /* прежние «чернила», только для сравнения */ /* ============ База ============ */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-ui)/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; } ::selection { background: var(--mark); color: var(--ink); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 3px; } p, li, dd { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; font-style: normal; margin: 0; } button { font: inherit; color: inherit; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } .nw { white-space: nowrap; } svg.ic { width: 16px; height: 16px; flex: none; display: block; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--paper); border-radius: var(--r-control); } ::-webkit-scrollbar-track { background: transparent; } /* ============ Кнопки ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 36px; padding: 0 var(--s4); border-radius: var(--r-control); border: 1px solid var(--edge-quiet); background: transparent; color: var(--ink); font: 500 var(--t-ui)/1 var(--font-ui); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); } .btn .ic { margin-left: -2px; } /* оптика: значок слева съедает 2 px воздуха */ /* Из приложения (styles.css): нажатие — тон фона, не сжатие; наведение — только на устройствах с курсором */ @media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--paper-press); border-color: var(--edge-control); } } .btn:active { background: var(--paper-press); } .btn:disabled { color: var(--ink-2); border-style: dashed; cursor: not-allowed; } /* Кольцо у кнопок — только с клавиатуры (:focus-visible). У тихих оно совмещено с рамкой, как в приложении (строки 1086–1120) */ .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); } .btn--main { background: var(--btn-main); border-color: var(--btn-main); color: var(--on-btn-main); } @media (hover: hover) and (pointer: fine) { .btn--main:hover { background: var(--btn-main-press); border-color: var(--btn-main-press); } } .btn--main:active { background: var(--btn-main-press); } .btn--main:focus-visible { outline-offset: 2px; border-color: var(--btn-main); } .btn--text { border-color: transparent; padding: 0 var(--s3); color: var(--ink); } @media (hover: hover) and (pointer: fine) { .btn--text:hover { border-color: transparent; background: var(--paper-press); } } .btn--icon { width: 36px; padding: 0; position: relative; } .btn--ghost { border-color: transparent; } .btn--ghost:hover { border-color: transparent; } .btn--mini { width: 28px; height: 28px; border-color: transparent; color: var(--ink-2); } .btn--mini:hover { color: var(--ink); border-color: transparent; } .btn--icon .ic { margin: 0; } .btn .plus { color: var(--action); } .dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 2px var(--paper); } .btn-link { border: 0; background: none; padding: 0; color: var(--action); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .fn { position: relative; font: 400 11px/1 var(--font-num); color: var(--action); text-decoration: none; padding: 0 1px; vertical-align: 0.55em; } /* Невидимая зона нажатия: 24 px на компьютере, 44 px на телефоне (аудит, п. 2; WCAG 2.5.8) */ .fn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } .fn:hover { text-decoration: underline; } .fnsep { font: 400 11px/1 var(--font-num); color: var(--ink-2); vertical-align: 0.55em; } .crane { width: 28px; height: 28px; flex: none; background: var(--btn-main); --crane: url(data:image/png;base64,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); -webkit-mask: var(--crane) center / contain no-repeat; mask: var(--crane) center / contain no-repeat; } /* Hallmark · macrostructure: Long Document (лендинг как лист с полями; кадр листа — герой) · tone: editorial, austere · anchor hue: ink-blue 229° Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 (самооценка после аудита — 6-vizual.md, раздел 8) Рендер лендинга LegalDocs по logika/lending.md. Токены — из app.css (не меняется); ниже только новые жетоны лендинга и классы с приставкой ld- / qz- / faq-. Все цвета и гарнитуры — через var(--…). */ /* ============ Жетоны лендинга (новые значения — названы здесь, свод 0: «поднимите в жетон и назовите») ============ */ :root { /* Кегли: пары Контур.Гайдов 48/56, 32/40, 28/36, 24/32, 20/28 (Л-И6 §6.2); наборный 17/28 — Т-Банк body-l 17/1,647 (Л-И6 §1.2) */ --t-display: 48px; --lh-display: 56px; /* h1 компьютер */ --t-display-s: 32px; --lh-display-s: 40px; /* h1 телефон */ --t-h2l: 32px; --lh-h2l: 40px; /* h2 раздела */ --t-h2l-s: 28px; --lh-h2l-s: 36px; /* h2 раздела, телефон */ --t-h3l: 20px; --lh-h3l: 28px; /* h3: двери, группы */ --t-panel: 24px; --lh-panel: 32px; /* заголовок шага 2 квиза */ --t-bodyl: 17px; --lh-bodyl: 28px; /* подзаголовок, лиды */ --t-row: 15px; --lh-row: 22px; /* строки квиза, цены, вопросов */ --t-docs: 15px; --lh-docs: 24px; /* текст документа в кадре */ /* Сетка: контейнер 1152 — между Т-Банком 1104 и Linear 1250 (Л-И6 §1.4, §8.2) */ --ld-max: 1152px; --ld-pad: 32px; --ld-head: 56px; /* липкая шапка — Т-Банк 56 (Л-И6 §1.6) */ --ld-sec: var(--s11); /* отступ раздела 80 */ --ld-note-w: 176px; /* правое поле кадра */ --ld-scrim: rgba(26, 26, 24, .32); /* подложка шторки */ --ld-bar-h: 60px; /* полоса «Создать документ» на телефоне: 44 + 2 × 8 */ } @media (max-width: 899px) { :root { --ld-pad: 20px; --ld-sec: var(--s9); } } @media (max-width: 599px) { :root { --ld-pad: 16px; } } /* ============ База страницы ============ */ html { scroll-padding-top: calc(var(--ld-head) + var(--s4)); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body.ld { font: 400 var(--t-bodyl)/var(--lh-bodyl) var(--font-ui); background: var(--paper); } .ld main:focus { outline: none; } .ld p { margin: 0; } .ld ul, .ld ol, .ld dl, .ld dd, .ld figure { margin: 0; padding: 0; } .ld ul, .ld ol { list-style: none; } /* Заголовки: balance переносит только между словами — overflow-wrap:anywhere даёт ему лишние точки и рвёт слова («отп / уску»); длинное слово влезает уменьшенным кеглем (V-34) */ .ld h1, .ld h2, .ld h3 { font-style: normal; min-width: 0; } .ld [tabindex="-1"]:focus { outline: none; } .ld [tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } .ld-wrap { max-width: calc(var(--ld-max) + 2 * var(--ld-pad)); margin: 0 auto; padding: 0 var(--ld-pad); } .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Пропуск — первая ссылка страницы */ .ld-skip { position: absolute; left: var(--s4); top: calc(-1 * var(--s11)); z-index: 90; padding: var(--s2) var(--s4); background: var(--sheet); color: var(--action); border-radius: var(--r-control); font: 500 var(--t-ui)/20px var(--font-ui); } .ld-skip:focus { top: var(--s2); } /* Серая полоса рендера: не часть продукта, не липкая (липкая здесь — шапка продукта) */ .ld-proto { position: static; gap: var(--s1) var(--s5); } .ld-proto a { color: var(--proto-ink); text-underline-offset: 3px; } .ld-proto a[aria-current="page"] { font-weight: 600; text-decoration: none; } .ld-proto .proto__seg a { display: inline-block; padding: var(--s1) var(--s2); border-radius: var(--r-control); text-decoration: none; } .ld-proto .proto__seg a[aria-pressed="true"] { background: var(--proto-on); color: var(--proto-on-ink); } /* ============ Шапка ============ */ .ld-head { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); } .ld-head__in { display: flex; align-items: center; gap: var(--s6); height: var(--ld-head); } .ld-brand { display: inline-flex; align-items: center; gap: var(--s2); flex: none; color: var(--btn-main); text-decoration: none; font: 650 17px/24px var(--font-ui); letter-spacing: -0.01em; border-radius: var(--r-control); } .ld-nav { display: flex; align-items: stretch; height: 100%; } .ld-nav a { position: relative; display: inline-flex; align-items: center; padding: 0 var(--s3); color: var(--ink); text-decoration: none; font: 500 var(--t-ui)/20px var(--font-ui); white-space: nowrap; } .ld-nav a::after { content: ''; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 2px; background: transparent; } .ld-nav a[aria-current]::after { background: var(--ink); } @media (hover: hover) and (pointer: fine) { .ld-nav a:hover { text-decoration: underline; text-underline-offset: 4px; } } .ld-head__act { display: flex; align-items: center; gap: var(--s2); margin-left: auto; } .ld-menu-btn { display: none; } @media (max-width: 899px) { .ld-nav, .ld-head__cta { display: none; } .ld-menu-btn { display: inline-flex; } .ld-head__act .btn { height: 44px; } } /* Шторка меню (телефон) */ .ld-drawer { position: fixed; inset: 0; z-index: 70; } .ld-drawer[hidden] { display: none; } .ld-drawer__scrim { position: absolute; inset: 0; background: var(--ld-scrim); opacity: 1; transition: opacity var(--dur-panel) linear; } .ld-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4) var(--s6); background: var(--sheet); box-shadow: var(--shadow-float); transform: none; opacity: 1; transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out); overflow-y: auto; } .ld-drawer[data-anim] .ld-drawer__scrim { opacity: 0; } .ld-drawer[data-anim] .ld-drawer__panel { transform: translateX(var(--shift-m)); opacity: 0; } .ld-drawer[data-anim="out"] .ld-drawer__scrim, .ld-drawer[data-anim="out"] .ld-drawer__panel { transition-duration: var(--dur-exit); } .ld-drawer__close { align-self: flex-end; height: 44px; margin-bottom: var(--s2); } .ld-drawer__panel a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s3); border-radius: var(--r-control); color: var(--ink); text-decoration: none; font: 500 var(--t-row)/var(--lh-row) var(--font-ui); } .ld-drawer__panel a[aria-current] { background: var(--paper-press); } .ld-drawer__panel .btn { height: 44px; margin-top: var(--s4); } /* ============ Первый экран ============ */ .ld-hero { padding: var(--s9) 0 var(--ld-sec); } .ld-hero__grid { display: grid; grid-template-columns: minmax(0, 528px) minmax(0, 1fr); gap: var(--s10); align-items: start; } .ld-h1 { font: 560 var(--t-display)/var(--lh-display) var(--font-doc); font-optical-sizing: auto; letter-spacing: -0.02em; color: var(--ink); max-width: 12em; } .ld-sub { margin-top: var(--s4) !important; color: var(--ink-2); max-width: 32em; } .ld-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s7); } .ld-hero__cta .btn--main { height: 44px; padding: 0 var(--s5); font-size: var(--t-lead); } .ld-link { color: var(--action); font: 500 var(--t-row)/var(--lh-row) var(--font-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .ld-cond { margin-top: var(--s3) !important; color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); max-width: 38em; } .ld-hero__fig { position: sticky; top: calc(var(--ld-head) + var(--s6)); } @media (max-width: 1099px) { .ld-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s9); } .ld-hero__text { max-width: 640px; } .ld-hero__fig { position: static; max-width: 720px; } } @media (max-width: 599px) { .ld-hero { padding-top: var(--s6); } .ld-h1 { font-size: var(--t-display-s); line-height: var(--lh-display-s); } .ld-sub { font-size: var(--t-row); line-height: 24px; } .ld-hero__cta { flex-direction: column; align-items: stretch; gap: var(--s3); } .ld-hero__cta .btn--main { width: 100%; } .ld-hero__cta .ld-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; } } /* ============ Квиз ============ */ .qz { margin-top: var(--s7); } .qz__switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-control); background: var(--tint); } .qz__switch[hidden] { display: none; } .qz__switch button { height: 32px; padding: 0 var(--s4); border: 0; border-radius: var(--r-sheet); background: transparent; color: var(--ink-2); font: 500 var(--t-ui)/20px var(--font-ui); cursor: pointer; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); } .qz__switch button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--edge-control); } @media (hover: hover) and (pointer: fine) { .qz__switch button[aria-pressed="false"]:hover { color: var(--ink); } } .qz__switch button:focus-visible { outline-offset: 0; } .qz__h { margin-top: var(--s6); font: 600 var(--t-ui)/20px var(--font-ui); color: var(--ink-2); } .js .qz__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .js .qz__set[hidden] { display: none; } .qz__list { margin: var(--s4) calc(-1 * var(--s2)) 0 !important; border-top: 1px solid var(--rule); } .js .qz__list[hidden] { display: none; } .qz__list > li { border-bottom: 1px solid var(--rule); } /* Строка ситуации: без скриптов — summary, со скриптом — кнопка; вид один */ .qz__row, .qz__sit > summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; padding: var(--s3) var(--s2); border: 0; border-radius: var(--r-sheet); background: none; color: var(--ink); font: 500 var(--t-row)/var(--lh-row) var(--font-ui); text-align: left; cursor: pointer; list-style: none; transition: background-color var(--dur-ui) var(--ease-out); } .qz__sit > summary::-webkit-details-marker { display: none; } .qz__row .ic, .qz__sit > summary .ic { color: var(--ink-2); } @media (hover: hover) and (pointer: fine) { .qz__row:hover, .qz__sit > summary:hover { background: var(--paper-press); } } .qz__row:focus-visible, .qz__sit > summary:focus-visible { outline-offset: -2px; } .qz__sit[open] > summary .ic { transform: rotate(90deg); } .qz__sit > .qz__panel { padding: 0 var(--s2) var(--s5); } .qz__otherp { padding: 0 var(--s2) var(--s4); color: var(--ink-2); font: 400 var(--t-row)/24px var(--font-ui); } .qz__otherp[hidden] { display: none; } .qz__otherp p + p { margin-top: var(--s2) !important; } .qz__otherp a { color: var(--action); } /* Шаг 2 */ .qz__stage { margin-top: var(--s4); } .qz__stage[hidden] { display: none; } .qz__back { margin: 0 0 var(--s2) calc(-1 * var(--s3)); color: var(--ink); } .qz__back[hidden] { display: none; } .qz__ph { font: 600 var(--t-panel)/var(--lh-panel) var(--font-doc); font-optical-sizing: auto; letter-spacing: -0.01em; color: var(--ink); } .qz__sit .qz__ph { display: none; } .qz__q { margin-top: var(--s2) !important; color: var(--ink-2); font: 400 var(--t-row)/24px var(--font-ui); } .qz__docs { margin: var(--s3) calc(-1 * var(--s2)) 0 !important; border-top: 1px solid var(--rule); } .qz__docs > li { border-bottom: 1px solid var(--rule); } .qz__doc { display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: var(--s3); row-gap: 2px; align-items: center; padding: var(--s3) var(--s2); border-radius: var(--r-sheet); color: var(--ink); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-out); } .qz__doc .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--action); } .qz__case { font: 500 var(--t-row)/var(--lh-row) var(--font-ui); } .qz__kind { color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); } .qz__kind .nw { color: var(--ink); font-weight: 500; } @media (hover: hover) and (pointer: fine) { .qz__doc:hover { background: var(--paper-press); } .qz__doc:hover .qz__case { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } } .qz__doc:focus-visible { outline-offset: -2px; } .qz__note, .qz__cond, .qz__next { margin-top: var(--s3) !important; color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); } .qz__note + .qz__cond { margin-top: var(--s2) !important; } .qz__cond + .qz__next { margin-top: var(--s1) !important; } .qz__more { margin-top: var(--s3) !important; font: 400 var(--t-row)/24px var(--font-ui); } .qz__more a { color: var(--action); } /* Раскрытие шага: 180 мс вход, 140 уход, только transform и opacity (свод 6.2–6.5, 6.14) */ .qz__stage, .qz__list, .qz__otherp { transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); } [data-anim="in"] { opacity: 0; transform: translateY(var(--shift-s)); } [data-anim="out"] { opacity: 0; transform: translateY(var(--shift-s)); transition-duration: var(--dur-exit) !important; } @media (max-width: 599px) { .qz__switch { display: flex; } .qz__switch button { flex: 1; height: 40px; } .qz__row, .qz__sit > summary { min-height: 48px; } } /* ============ Кадр листа (первый экран и доверие) ============ */ .ld-fig { margin: 0; min-width: 0; } .ld-sheet { display: grid; grid-template-columns: minmax(0, 1fr) var(--ld-note-w); column-gap: var(--s6); row-gap: var(--s4); padding: var(--s8) var(--s6) var(--s8) var(--s7); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); font: 400 var(--t-docs)/var(--lh-docs) var(--font-doc); font-optical-sizing: auto; color: var(--ink); } .ld-sheet__top { grid-column: 1; padding-bottom: var(--s2); } .ld-sheet__to { color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-doc); white-space: pre-line; } .ld-sheet__title { margin-top: var(--s5) !important; font: 600 var(--t-docs)/var(--lh-docs) var(--font-doc); letter-spacing: .08em; } .ld-sheet__sub { color: var(--ink-2); font-size: var(--t-meta); line-height: 20px; } .ld-sheet__h { grid-column: 1; margin-top: var(--s2) !important; font: 600 var(--t-docs)/var(--lh-docs) var(--font-doc); } .ld-sheet__gap { grid-column: 1; color: var(--rule-dot); font: 400 var(--t-meta)/12px var(--font-num); letter-spacing: .3em; } .ld-cl { grid-column: 1; position: relative; padding-left: var(--s6); hanging-punctuation: first; } .ld-cl__n { position: absolute; left: 0; top: 0; font: 400 var(--t-micro)/var(--lh-docs) var(--font-num); color: var(--ink-2); } .ld-cl .fn { font-size: 11px; } .ld-nt { grid-column: 2; display: grid; gap: var(--s3); align-content: start; font-family: var(--font-ui); } .ld-norm { position: relative; padding-left: var(--s5); font: 400 var(--t-meta)/18px var(--font-ui); color: var(--ink); } .ld-norm__n { position: absolute; left: 0; top: 0; font: 400 11px/18px var(--font-num); color: var(--action); } .ld-norm b { font-weight: 600; } .ld-norm__m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); margin-top: 2px; color: var(--ink-2); font: 400 var(--t-micro)/16px var(--font-ui); } .ld-norm__m .ic { width: 14px; height: 14px; color: var(--st-done); stroke-width: 2; } .ld-ok { display: inline-flex; align-items: center; gap: var(--s1); color: var(--st-done); font-weight: 500; } .ld-bad { color: var(--st-outside); font-weight: 600; } .ld-why { display: block; flex-basis: 100%; color: var(--ink-2); } .ld-todo { display: block; flex-basis: 100%; color: var(--ink); } .ld-norm__m a { color: var(--ink-2); } .ld-cap { margin-top: var(--s3) !important; color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); max-width: 44em; } @media (max-width: 599px) { .ld-sheet { grid-template-columns: minmax(0, 1fr); padding: var(--s6) var(--s4) var(--s6) var(--s4); row-gap: var(--s3); } .ld-nt { grid-column: 1; padding: var(--s3) 0 var(--s1) var(--s6); border-top: 1px solid var(--rule); } } /* ============ Разделы ============ */ .ld-sec { padding: var(--ld-sec) 0; border-top: 1px solid var(--rule); } .ld-h2 { font: 560 var(--t-h2l)/var(--lh-h2l) var(--font-doc); font-optical-sizing: auto; letter-spacing: -0.015em; color: var(--ink); max-width: 22em; } .ld-lead { margin-top: var(--s3) !important; color: var(--ink-2); max-width: 36em; } .ld-h3 { font: 600 var(--t-h3l)/var(--lh-h3l) var(--font-doc); font-optical-sizing: auto; color: var(--ink); } @media (max-width: 599px) { .ld-h2 { font-size: var(--t-h2l-s); line-height: var(--lh-h2l-s); } .ld-lead { font-size: var(--t-row); line-height: 24px; } } /* Как это работает */ .ld-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s8) !important; counter-reset: none; } .ld-step { padding-top: var(--s4); border-top: 1px solid var(--ink); } .ld-step__n { display: block; font: 400 var(--t-meta)/20px var(--font-num); color: var(--ink-2); } .ld-step p { margin-top: var(--s2) !important; color: var(--ink-2); font: 400 var(--t-row)/24px var(--font-ui); } .ld-step b { display: block; color: var(--ink); font: 600 var(--t-bodyl)/26px var(--font-ui); margin-bottom: var(--s1); } .ld-shot { margin-top: var(--s8) !important; } .ld-shot__img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 760; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); } .ld-shot__img--dark { display: none; } @media (max-width: 1023px) { .ld-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .ld-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s6) !important; } .ld-shot { margin-top: var(--s6) !important; } } /* Доверие */ .ld-trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: var(--s10); align-items: start; margin-top: var(--s8); } .ld-kv { border-top: 1px solid var(--rule); } .ld-kv > div { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--s1) var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); } .ld-kv dt { font: 600 var(--t-row)/24px var(--font-ui); color: var(--ink); } .ld-kv dd { font: 400 var(--t-row)/24px var(--font-ui); color: var(--ink-2); } .ld-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5) !important; } .ld-plate { margin-top: var(--s6) !important; padding: var(--s5) var(--s6); background: var(--tint); border-radius: var(--r-block); color: var(--ink); font: 400 var(--t-row)/24px var(--font-ui); } .ld-plate--done { background: var(--tint-done); } @media (max-width: 1099px) { .ld-trust { grid-template-columns: minmax(0, 1fr); gap: var(--s8); } .ld-trust .ld-fig { max-width: 720px; } } @media (max-width: 599px) { .ld-kv > div { grid-template-columns: minmax(0, 1fr); } .ld-plate { padding: var(--s4); } .ld-trust { margin-top: var(--s6); } } /* Две двери */ .ld-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s8) !important; } .ld-door { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6); background: var(--tint); border-radius: var(--r-block); } .ld-door p { color: var(--ink-2); font: 400 var(--t-row)/24px var(--font-ui); } .ld-door .ld-door__price { color: var(--ink); } .ld-door .ld-link { margin-top: auto; padding-top: var(--s3); align-self: flex-start; } .ld-after { margin-top: var(--s4) !important; color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); } [data-doors="0"] [data-doors-block] { display: none !important; } @media (max-width: 767px) { .ld-doors { grid-template-columns: minmax(0, 1fr); } .ld-door { padding: var(--s5); } } /* Цена */ .ld-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s10); align-items: start; margin-top: var(--s8); } .ld-plist { border-top: 1px solid var(--rule); } .ld-prow { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); } .ld-prow__t { display: flex; align-items: baseline; gap: var(--s2); font: 600 var(--t-bodyl)/26px var(--font-ui); color: var(--ink); } .ld-prow__lead { flex: 1; min-width: var(--s6); border-bottom: 1px dotted var(--rule-dot); transform: translateY(-5px); } .ld-prow__p { white-space: nowrap; font-variant-numeric: tabular-nums; } .ld-prow__e { margin-top: 2px !important; color: var(--ink-2); font: 400 var(--t-row)/24px var(--font-ui); } .ld-pside > p { font: 400 var(--t-row)/24px var(--font-ui); color: var(--ink-2); } .ld-pside > p + p, .ld-pside > .ld-plate + p { margin-top: var(--s4) !important; } .ld-pside > .ld-plate { margin-top: var(--s4) !important; } .ld-pside .ld-link { display: inline-block; margin-top: var(--s4); } @media (max-width: 1023px) { .ld-price { grid-template-columns: minmax(0, 1fr); gap: var(--s7); } .ld-pside { max-width: 640px; } } @media (max-width: 599px) { .ld-price { margin-top: var(--s6); } .ld-prow__t { font-size: var(--t-row); line-height: 24px; } } /* Организациям */ .ld-org { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 880px; margin-top: var(--s8); } .ld-org .btn { justify-self: start; margin-top: var(--s6); height: 44px; padding: 0 var(--s5); font-size: var(--t-lead); } @media (max-width: 599px) { .ld-org { margin-top: var(--s6); } .ld-org .btn { width: 100%; } } /* Справочник */ .ld-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s10); margin-top: var(--s8); } .ld-guide h3 { font: 600 var(--t-ui)/20px var(--font-ui); color: var(--ink-2); margin-bottom: var(--s2); } .ld-glist { border-top: 1px solid var(--rule); } .ld-glist li { border-bottom: 1px solid var(--rule); } .ld-glist a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: var(--s3); align-items: center; padding: var(--s3) 0; color: var(--ink); text-decoration: none; font: 400 var(--t-bodyl)/26px var(--font-doc); font-optical-sizing: auto; min-height: 48px; } .ld-glist a .ic { color: var(--action); } @media (hover: hover) and (pointer: fine) { .ld-glist a:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } } .ld-guide__all { grid-column: 1 / -1; } @media (max-width: 767px) { .ld-guide { grid-template-columns: minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); } } /* Частые вопросы: раскрываются независимо */ .faq { margin-top: var(--s8) !important; max-width: 880px; border-top: 1px solid var(--rule); } .faq__i { border-bottom: 1px solid var(--rule); } .faq__i > summary, .faq__b { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: var(--s3); align-items: center; width: 100%; min-height: 56px; padding: var(--s4) 0; border: 0; background: none; text-align: left; cursor: pointer; list-style: none; color: var(--ink); font: 600 var(--t-bodyl)/26px var(--font-ui); } .faq__i > summary::-webkit-details-marker { display: none; } .faq__i > summary h3, .faq__q { font: inherit; margin: 0; } .faq__b .ic, .faq__i > summary .ic { color: var(--ink-2); transition: transform var(--dur-ui) var(--ease-out); } .faq__i[open] > summary .ic, .faq__b[aria-expanded="true"] .ic { transform: rotate(180deg); } .faq__b[aria-expanded="false"] .ic { transition-duration: var(--dur-exit); } @media (hover: hover) and (pointer: fine) { .faq__b:hover .faq__t, .faq__i > summary:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } } .faq__b:focus-visible, .faq__i > summary:focus-visible { outline-offset: 2px; } .faq__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out); } .faq__body.is-shut { grid-template-rows: 0fr; opacity: 0; transition-duration: var(--dur-exit); } .faq__body[hidden] { display: none; } .faq__body > div { overflow: hidden; } .faq__a { padding: 0 var(--s7) var(--s5) 0; color: var(--ink-2); font: 400 var(--t-row)/24px var(--font-ui); max-width: 44em; } .faq__a p + p { margin-top: var(--s3) !important; } .faq__a a { color: var(--action); } @media print { .faq__body[hidden] { display: grid !important; } .faq__body.is-shut { grid-template-rows: 1fr; opacity: 1; } } @media (max-width: 599px) { .faq { margin-top: var(--s6) !important; } .faq__i > summary, .faq__b { font-size: var(--t-row); line-height: 24px; } .faq__a { padding-right: 0; } } /* Финал — лист */ .ld-final__sheet { padding: var(--s10) var(--s9); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); } .ld-final .btn--main { margin-top: var(--s6); height: 44px; padding: 0 var(--s5); font-size: var(--t-lead); } .ld-final .ld-cond { margin-top: var(--s4) !important; } @media (max-width: 599px) { .ld-final__sheet { padding: var(--s7) var(--s4); } .ld-final .btn--main { width: 100%; } } /* Подвал */ .ld-foot { padding: var(--s9) 0 var(--s10); border-top: 1px solid var(--rule); color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); } .ld-foot a, .ld-foot .btn-link { color: var(--ink-2); } .ld-foot__menu { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s6) !important; font: 500 var(--t-ui)/20px var(--font-ui); } .ld-foot__menu a { color: var(--ink); } .ld-foot__docs { display: flex; flex-wrap: wrap; gap: var(--s1) 0; } .ld-foot__docs li:not(:last-child)::after { content: '·'; margin: 0 var(--s2); color: var(--rule-dot); } .ld-foot p { margin-top: var(--s3) !important; max-width: 60em; } .ld-foot .ld-foot__brand { margin-top: var(--s6) !important; color: var(--ink); } /* Логотипы платёжных систем — строка в подвале; только светлая тема */ .pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; } .pay__l { font-size: 13px; color: var(--ink-2); } .pay__i { display: block; height: 22px; width: auto; } @media (max-width: 899px) { .ld-foot { padding-bottom: calc(var(--s10) + var(--ld-bar-h)); } } /* ============ Полоса «Создать документ» на телефоне ============ */ .ld-bar { display: none; } @media (max-width: 899px) { .ld-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--s2) var(--ld-pad) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); visibility: hidden; transform: translateY(100%); transition: transform var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); } .ld-bar.is-on { visibility: visible; transform: none; transition: transform var(--dur-panel) var(--ease-out), visibility 0s; } .ld-bar .btn { width: 100%; height: 44px; font-size: var(--t-lead); } } /* ============ Окно cookie (logika/vhod.md В19) ============ */ .ld-ck { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 50; width: 360px; max-width: calc(100vw - 2 * var(--s4)); padding: var(--s5); background: var(--sheet); border-radius: var(--r-modal); box-shadow: var(--shadow-float); color: var(--ink); font: 400 var(--t-ui)/20px var(--font-ui); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); } .ld-ck[hidden] { display: none; } .ld-ck[data-anim="in"], .ld-ck[data-anim="out"] { opacity: 0; transform: translateY(var(--shift-s)); } .ld-ck[data-anim="out"] { transition-duration: var(--dur-exit); } .ld-ck__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } /* Ряд кнопок окна переносится, вес равный — как в лендинге lp.css .ld-ck__acts (LA-1 №1) */ .ld-ck__acts .btn { flex: 1 1 max-content; min-width: 0; white-space: normal; } .ld-ck a { color: var(--action); } .ld-ck__done { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 50; max-width: 360px; padding: var(--s3) var(--s4); background: var(--sheet); border-radius: var(--r-modal); box-shadow: var(--shadow-float); font: 400 var(--t-ui)/20px var(--font-ui); } .ld-ck__done:empty { display: none; } @media (max-width: 899px) { .ld-ck, .ld-ck__done { left: var(--s4); right: var(--s4); bottom: var(--s4); width: auto; max-width: none; } .ld-ck__acts .btn { height: 44px; } } /* Заглушка рендера: переход в продукт (серый — как полоса рендера, не продукт) */ .ld-stub { position: fixed; left: var(--s6); bottom: var(--s6); z-index: 80; max-width: min(520px, calc(100vw - 2 * var(--s4))); padding: var(--s3) var(--s4); background: var(--proto-bg); color: var(--proto-ink); border-radius: var(--r-control); font: 500 var(--t-meta)/18px var(--font-ui); overflow-wrap: anywhere; } .ld-stub:empty { display: none; } @media (max-width: 899px) { .ld-stub { left: var(--s4); bottom: calc(var(--ld-bar-h) + var(--s4)); } } /* ============ Появление кадров при прокрутке — вариант «предлагаю» (?reveal=1) ============ По логике Р19 появления нет. Вариант для сравнения: только вторичные кадры, один раз, 200 мс, сдвиг 8 (NN/g, Л-И2 §9.7) */ :root[data-reveal="1"].js .ld-rv { transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); } :root[data-reveal="1"].js .ld-rv.is-wait { opacity: 0; transform: translateY(var(--shift-s)); } /* ============ Статья справочника и образец ============ */ .ar { padding-top: var(--s7); padding-bottom: var(--ld-sec); } .ar-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s1) 0; color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); } .ar-crumbs li:not(:last-child)::after { content: '→'; margin: 0 var(--s2); color: var(--ink-2); } .ar-crumbs a { color: var(--ink-2); } .ar-grid { display: grid; grid-template-columns: minmax(0, 720px) 40px minmax(0, 296px); margin-top: var(--s6); } .ar-grid > * { grid-column: 1; min-width: 0; } .ar-h1 { font: 560 40px/48px var(--font-doc); font-optical-sizing: auto; letter-spacing: -0.02em; max-width: 16em; } .ar-meta { margin-top: var(--s3) !important; color: var(--ink-2); font: 400 var(--t-meta)/20px var(--font-ui); } .ar-body { font: 400 var(--t-doc)/28px var(--font-doc); font-optical-sizing: auto; color: var(--ink); } .ar-body p, .ar-body li { hanging-punctuation: first; } .ar-body > * + * { margin-top: var(--s4) !important; } .ar-body h2 { margin-top: var(--s9) !important; font: 600 24px/32px var(--font-doc); letter-spacing: -0.01em; scroll-margin-top: calc(var(--ld-head) + var(--s4)); } .ar-body h2 + * { margin-top: var(--s3) !important; } .ar-body ul.ar-ul li, .ar-body ol.ar-ol li { position: relative; padding-left: var(--s6); } .ar-body ul.ar-ul li + li, .ar-body ol.ar-ol li + li { margin-top: var(--s2); } .ar-body ul.ar-ul li::before { content: '—'; position: absolute; left: 0; color: var(--ink-2); } .ar-body ol.ar-ol { counter-reset: ar; } .ar-body ol.ar-ol li { counter-increment: ar; } .ar-body ol.ar-ol li::before { content: counter(ar); position: absolute; left: 0; top: 0; font: 400 var(--t-meta)/28px var(--font-num); color: var(--ink-2); } .ar-short { padding: var(--s5) var(--s6); background: var(--tint); border-radius: var(--r-block); font: 400 var(--t-bodyl)/28px var(--font-ui); } .ar-short h2 { margin: 0 0 var(--s2) !important; font: 600 var(--t-ui)/20px var(--font-ui); color: var(--ink-2); letter-spacing: 0; } .ar-toc { padding: var(--s4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--font-ui); } .ar-toc h2 { margin: 0 0 var(--s2) !important; font: 600 var(--t-ui)/20px var(--font-ui); color: var(--ink-2); letter-spacing: 0; } .ar-toc ol { columns: 2; column-gap: var(--s7); counter-reset: toc; } .ar-toc li { break-inside: avoid; font: 400 var(--t-row)/24px var(--font-ui); padding: 2px 0; } .ar-toc a { color: var(--action); } /* Сноски статьи на правом поле, как в документе */ .ar-fn { font: 400 11px/1 var(--font-num); color: var(--action); vertical-align: .55em; text-decoration: none; padding: 0 1px; position: relative; } .ar-fn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } .ar-side { grid-column: 3 !important; padding-top: 92px; font-family: var(--font-ui); } /* 48 отступ h2 + 32 строка h2 + 12 — поле начинается на уровне первого абзаца */ .ar-note { position: relative; padding-left: var(--s5); font: 400 var(--t-meta)/18px var(--font-ui); color: var(--ink); } .ar-note + .ar-note { margin-top: var(--s3); } .ar-note__n { position: absolute; left: 0; top: 0; font: 400 11px/18px var(--font-num); color: var(--action); } /* Номер основания — кнопка: к нему можно вернуться к месту в тексте (свод 1.7) */ button.ar-note__n { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-align: left; } button.ar-note__n::after { content: ''; position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; } button.ar-note__n:hover { text-decoration: underline; } /* Вспышка «номер ↔ основание»: включается мгновенно, гаснет за --dur-trace (как margin-flash приложения) */ .ar-note, .ar-body p, .ar-body li, .ar-table caption, .ar-sample figcaption { border-radius: 3px; transition: background-color var(--dur-trace) var(--ease-out), box-shadow var(--dur-trace) var(--ease-out); } .ar .is-hit { background-color: var(--mark); box-shadow: 0 0 0 4px var(--mark); transition: none; } .ar-note b { font-weight: 600; } .ar-note span.src { display: block; color: var(--ink-2); font-size: var(--t-micro); line-height: 16px; margin-top: 2px; } .ar-note span.src a { color: var(--ink-2); } .ar-pair { display: contents; } /* Таблица норм (V-92): столбцы текстовые и переносятся между словами — nowrap распирал таблицу, первый столбец сжимался и рвал слова по буквам, а третий уезжал в прокрутку вбок даже на компьютере. Узкие короткие (числа, суммы, сроки) помечаем классом .ar-num. Прокрутка внутри обёртки остаётся запасом на случай, когда столбцов больше трёх. break-word, а не normal: nbsp-связки («в той же форме; …») длиннее строки иначе уводят карточку вбок на 320; обычные слова break-word не рвёт — он работает только когда связка одна не помещается в строку. */ .ar-tw { overflow-x: auto; } .ar-tw .ar-table { min-width: 100%; } .ar-table { width: 100%; border-collapse: collapse; font: 400 var(--t-row)/22px var(--font-ui); } .ar-table caption { text-align: left; padding-bottom: var(--s2); color: var(--ink-2); font-size: var(--t-meta); } .ar-table th, .ar-table td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rule); overflow-wrap: break-word; word-break: normal; hyphens: manual; } .ar-table thead th { font-weight: 600; color: var(--ink-2); font-size: var(--t-meta); border-bottom-color: var(--ink-2); } .ar-table th:first-child, .ar-table td:first-child { color: var(--ink); min-width: 11ch; max-width: 30%; } .ar-table td:nth-child(2) { font-weight: 600; } .ar-table td:last-child { color: var(--ink-2); } .ar-table .ar-num { white-space: nowrap; } /* В статьях у первой ячейки стоит пер-статейный overflow-wrap:anywhere (та же строка