/* РевизорБОТ — компонентный CSS. Требует tokens.css и fonts.css перед собой. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-heading); margin: 0 0 var(--space-3); } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; } h2 { font-size: var(--fs-h2); text-wrap: balance; } h3 { font-size: var(--fs-h3); text-wrap: balance; } p { margin: 0 0 var(--space-3); text-wrap: pretty; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } .nums, .price, .stat-value, .amount, table td.num, table th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; overflow-wrap: anywhere; /* длинные счета/ИНН без пробелов не должны раздвигать таблицу */ } img, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-5); } .container-narrow { max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 var(--space-5); } @media (max-width: 720px) { .container, .container-narrow { padding: 0 var(--space-4); } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-3); top: -60px; background: var(--color-primary); color: var(--color-primary-ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 200; transition: top var(--transition); } .skip-link:focus { top: var(--space-3); } /* ---------- Сетка ---------- */ /* min-width:0 на всех детях grid/flex-рядов — иначе длинный текст/цифры не дают треку сжаться до ширины контейнера и ряд вылезает за экран (классическая утечка CSS Grid/Flexbox с min-width:auto по умолчанию). */ .grid { display: grid; gap: var(--space-5); min-width: 0; } .grid > * { min-width: 0; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid.cols-6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 960px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-6 { grid-template-columns: 1fr; } } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .row > * { min-width: 0; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } /* ---------- Иконки ---------- */ .icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 28px; height: 28px; } /* ---------- Кнопки ---------- */ .btn { --btn-h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--btn-h); padding: 0 var(--space-5); border-radius: var(--radius); border: 1px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--color-primary); color: var(--color-primary-ink); transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); max-width: 100%; } /* на очень узких экранах длинная надпись CTA не помещается в одну строку — переносим текст, а не вылезаем за край (была причина горизонтального переполнения на "Проверить кабинет бесплатно" при ширине < ~360px) */ @media (max-width: 400px) { .btn { white-space: normal; text-align: center; height: auto; min-height: var(--btn-h); padding-top: 10px; padding-bottom: 10px; } } .btn:hover { background: var(--color-primary-hover); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Общая правка «плывущего» текста в кнопках (UX-аудит, п.4): (details/summary «Переименовать»/«Заменить токен» на cabinets.html) по умолчанию рендерится как list-item со своим маркером-треугольником и без вертикального центрирования — из-за этого высота/базовая линия текста не совпадала с обычными .btn в том же ряду. Плюс line-height у самого текста кнопки — иначе унаследованный line-height абзаца/родителя иногда даёт разную фактическую высоту строки у /