/* ========================================================================== ШКАЛА ШАГОВ .nt-steps-ig — общий компонент (вынесен из credit-page.css 07.10.2026). Где: /credit/ («Как оформить рассрочку»), мастер регистрации агента на /kabinet/ (dekan-naked). Грузится на всех страницах (inc/assets/enqueue.php, хэндл nt-steps) — копировать правила к себе не нужно. Разметка:
01

…

…

[
…
…
]
…
Сетка: 4 ячейки по умолчанию (на ≤860px — 2×2); --5 — пять шагов одной строкой (мастер регистрации агента). Состояния: --accent — текущий шаг (синий), .is-next — шаг впереди (приглушён). Можно
    /
  1. вместо
    . ========================================================================== */ /* Открытая шкала 01–04 (утв. 18.07, прототип v8): без коробки — 2px сверху/снизу, делители 1px, индексы и факты Unbounded, финальная ячейка — синяя инверсия. !important на шрифтах/цветах — щит от глобалки. */ .nt-steps-ig { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid #000; border-bottom: 2px solid #000; border-left: 2px solid #000; border-right: 2px solid #000; } .nt-steps-ig__cell { display: flex; flex-direction: column; padding: 22px 22px 20px; border-right: 1px solid #000; transition: background .15s ease; } .nt-steps-ig__cell:last-child { border-right: none; } .nt-steps-ig__cell:hover { background: var(--nt-hover-bg); } .nt-steps-ig__num { font-family: 'Unbounded', 'Montserrat', sans-serif !important; font-weight: 400 !important; font-size: clamp(24px, 2.4vw, 30px) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; color: #000 !important; margin-bottom: 14px; transition: color .15s ease; } .nt-steps-ig__cell:hover .nt-steps-ig__num { color: var(--nt-blue) !important; } .nt-steps-ig__title { font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.01em; color: #000 !important; line-height: 1.3; margin: 0 0 8px; } .nt-steps-ig__desc { font-family: var(--nt-font-text) !important; font-size: 15px !important; font-weight: var(--nt-text2-weight) !important; line-height: 1.55 !important; color: var(--nt-text2-color) !important; margin: 0; } .nt-steps-ig__fact { margin-top: auto; padding-top: 18px; } .nt-steps-ig__v { font-family: 'Unbounded', 'Montserrat', sans-serif !important; font-weight: 500 !important; font-size: clamp(21px, 2vw, 26px) !important; letter-spacing: -0.01em; line-height: 1; color: #000 !important; white-space: nowrap; } .nt-steps-ig__l { font-family: 'Unbounded', 'Montserrat', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--nt-note) !important; margin-top: 8px; line-height: 1.5; } /* Финальная ячейка — синяя инверсия (финиш пути = выгода) */ .nt-steps-ig__cell--accent { background: var(--nt-blue) !important; border-right: none; } .nt-steps-ig__cell--accent .nt-steps-ig__num, .nt-steps-ig__cell--accent .nt-steps-ig__title, .nt-steps-ig__cell--accent .nt-steps-ig__v { color: #fff !important; } .nt-steps-ig__cell--accent .nt-steps-ig__desc { color: rgba(255, 255, 255, 0.75) !important; } .nt-steps-ig__cell--accent .nt-steps-ig__l { color: rgba(255, 255, 255, 0.65) !important; } .nt-steps-ig__cell--accent:hover { background: #1a2ce0 !important; } .nt-steps-ig__cell--accent:hover .nt-steps-ig__num { color: #fff !important; } @media (max-width: 860px) { .nt-steps-ig { grid-template-columns: 1fr 1fr; } .nt-steps-ig__cell { border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 18px 16px 16px; } .nt-steps-ig__cell:nth-child(2n) { border-right: none; } .nt-steps-ig__cell:nth-child(n+3) { border-bottom: none; } .nt-steps-ig__num { font-size: 22px !important; margin-bottom: 10px; } .nt-steps-ig__v { font-size: 20px !important; } } /* ── Список вместо div (
    1. ) — без маркеров и отступов ── */ ol.nt-steps-ig, ul.nt-steps-ig { list-style: none !important; margin: 0 !important; padding: 0 !important; } .nt-steps-ig > li { margin: 0 !important; } .nt-steps-ig > li::before, .nt-steps-ig > li::marker { content: none !important; } /* ── Пройденный шаг — ссылка: вернуться и посмотреть (владелец 07.10.2026: «не могу переходить по шагам»). Разметка:
    2. 01 …
      3. — ссылка накрывает ячейку целиком, строка номера и названия не меняется. Шаги впереди и текущий — без ссылки. ── */ .nt-steps-ig__cell { position: relative; } .nt-steps-ig__cover { position: absolute; inset: 0; z-index: 1; } .nt-steps-ig__cell.is-done { cursor: pointer; } .nt-steps-ig__cell.is-done:hover .nt-steps-ig__num, .nt-steps-ig__cell.is-done:hover .nt-steps-ig__title { color: var(--nt-blue) !important; } /* Пройденный шаг открыт для просмотра (.is-viewing): белая ячейка, синий текст и синяя рамка внутри — «вы здесь», текущий шаг остаётся синим. Владелец 07.10.2026 спутал «04 К текущему шагу» (номер строки коробки) с шагом 4 — шкала должна показывать, какой шаг открыт. */ .nt-steps-ig__cell.is-viewing { box-shadow: inset 0 0 0 2px var(--nt-blue); background: #fff !important; } .nt-steps-ig__cell.is-viewing .nt-steps-ig__num, .nt-steps-ig__cell.is-viewing .nt-steps-ig__title { color: var(--nt-blue) !important; } /* ── Шаг впереди (ещё не пройден) ── */ .nt-steps-ig__cell.is-next .nt-steps-ig__num, .nt-steps-ig__cell.is-next .nt-steps-ig__title { color: rgba(0, 0, 0, .3) !important; } .nt-steps-ig__cell.is-next:hover { background: none; } .nt-steps-ig__cell.is-next:hover .nt-steps-ig__num { color: rgba(0, 0, 0, .3) !important; } /* ── Пять шагов (мастер регистрации агента на /kabinet/, 07.10.2026) ── */ .nt-steps-ig--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 860px) { /* одной строкой, не 2×2: это шкала прогресса */ .nt-steps-ig--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .nt-steps-ig--5 .nt-steps-ig__cell { padding: 12px 8px 10px; border-bottom: none; border-right: 1px solid #000; } .nt-steps-ig--5 .nt-steps-ig__cell:nth-child(2n) { border-right: 1px solid #000; } .nt-steps-ig--5 .nt-steps-ig__cell:last-child { border-right: none; } .nt-steps-ig--5 .nt-steps-ig__num { font-size: 18px !important; margin-bottom: 6px; } /* подписи — не мельче 11px (шкала кеглей сайта); длинное слово переносится */ .nt-steps-ig--5 .nt-steps-ig__title { font-size: 11px !important; letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; } } @media (max-width: 480px) { .nt-steps-ig--5 .nt-steps-ig__cell { padding: 10px 6px 8px; } .nt-steps-ig--5 .nt-steps-ig__num { font-size: 16px !important; margin-bottom: 4px; } /* на телефоне подпись только у текущего шага, и он вдвое шире: 6 колонок = 4 номера + текущий шаг на 2. Иначе в 70px ячейке слово «КОМПАНИЯ» рвалось посередине, а мельче 11px подписи не делаем. */ .nt-steps-ig--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nt-steps-ig--5 .nt-steps-ig__cell--accent { grid-column: span 2; } .nt-steps-ig--5 .nt-steps-ig__title { overflow-wrap: normal; hyphens: manual; } .nt-steps-ig--5 .nt-steps-ig__cell:not(.nt-steps-ig__cell--accent) .nt-steps-ig__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ── Номер и название в одну строку: «01 Компания» (владелец 07.10.2026, «давай в одну строку») ── Ячейка — flex-колонка с переносом строк: номер и заголовок сидят в первой строке, описание и факт — ниже. Номер и название — один шрифт (Montserrat) и один кегль: крупная цифра Unbounded рядом с мелким названием выглядела несоразмерно (владелец 07.10.2026: «большие цифры, маленький текст, простой шрифт»). Разделитель — воздух 12px. */ .nt-steps-ig__cell { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; } .nt-steps-ig__num { margin-bottom: 0; font-family: var(--nt-font-text) !important; font-weight: 900 !important; font-size: 15px !important; letter-spacing: 0.01em; } .nt-steps-ig__title { flex: 1 1 0; min-width: 0; margin: 0; font-size: 15px !important; line-height: 1.25; } .nt-steps-ig__desc { flex-basis: 100%; margin-top: 10px; } .nt-steps-ig__fact { flex-basis: 100%; } @media (max-width: 860px) { .nt-steps-ig__num { font-size: 13px !important; margin-bottom: 0; } .nt-steps-ig__cell { column-gap: 8px; } .nt-steps-ig--5 .nt-steps-ig__num { font-size: 12px !important; } .nt-steps-ig--5 .nt-steps-ig__num { margin-bottom: 0; } .nt-steps-ig--5 .nt-steps-ig__cell { align-items: center; } } @media (max-width: 480px) { .nt-steps-ig--5 .nt-steps-ig__num { margin-bottom: 0; } .nt-steps-ig--5 .nt-steps-ig__cell { column-gap: 6px; justify-content: center; } }