/* ============================================================ TOVIAN · Проверка поставщика онлайн — ДОБОРНЫЕ СОСТОЯНИЯ ------------------------------------------------------------ Подключается ПОСЛЕДНИМ. Здесь живут только те блоки, которые появляются ПОСЛЕ действия пользователя и которым не нашлось класса в основной вёрстке: часы ожидания с кнопкой прерывания и пометка неполного отчёта. Правило одно: блок, возникший после нажатия кнопки, обязан выглядеть частью той же страницы. Экран, который «слетает» на результате, читается как сбой инструмента, и доверие к самому результату падает вместе с оформлением. Токены (--ink, --muted, --faint, --line, --lime, --lime-ink, --shadow-md) берутся из tovian-tokens.css и online-check.css — своих цветов здесь нет. ============================================================ */ /* ---- часы ожидания в блоке этапов ---- Отдельная полоса под этапами: время идёт слева, объяснение справа, выход из ожидания — там же. Кнопка намеренно тихая: прерывать ожидание не нужно, но возможность выйти обязана быть видна, иначе экран ощущается ловушкой. */ .ocr-proc__wait { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .ocr-proc__clock { flex: 0 0 auto; min-width: 58px; padding: 5px 12px; border: 1px solid rgba(168,232,12,.32); border-radius: 999px; background: rgba(168,232,12,.08); font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: .02em; color: var(--lime-ink); text-align: center; } .ocr-proc__waitt { flex: 1 1 260px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); text-wrap: pretty; } .ocr-proc__cancel { flex: 0 0 auto; padding: 8px 15px; min-height: 36px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.03); color: var(--muted); font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; letter-spacing: -.01em; transition: border-color .2s, color .2s, background .2s; } @media (hover:hover) { .ocr-proc__cancel:hover { border-color: rgba(255,255,255,.24); color: var(--ink); background: rgba(255,255,255,.06); } } .ocr-proc__cancel:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } /* На узком экране часы и кнопка встают в одну строку, объяснение — под ними: иначе подпись сжимается до двух слов в столбик и перестаёт читаться. */ @media (max-width: 560px) { .ocr-proc__wait { gap: 12px; } .ocr-proc__waitt { order: 3; flex-basis: 100%; } .ocr-proc__cancel { margin-left: auto; } } /* ---- поле ввода на узком экране: значок очистки наезжал на значок проверки ---- В общей вёрстке (online-v2.css) кнопка очистки на ширине до 560px уходит в position:absolute и прижимается к правому краю поля. На этой странице справа уже стоит значок состояния ссылки — и два кружка ложились друг на друга: на 390px они перекрывались на 17px, «крестик» съедал «внимание». Возвращаем кнопку в поток и ставим её перед значком: оба видны, оба нажимаются. Правка ограничена этой шапкой — общая вёрстка других страниц не трогается. */ @media (max-width: 560px) { .lb-hero .oc-field .oc-field__clear { position: static; order: 2; } .lb-hero .oc-field .oc-field__sig { order: 2; } } /* ---- слово вместо цифры в клетке сводки ---- В образце в клетке «списано токенов» стоит «бесплатно». Крупным кеглем цифры слово ломало бы строку, поэтому кегль здесь свой, а место в сетке — прежнее. */ .ocr-sp__big--word { font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -.01em; color: var(--lime-ink); line-height: 1.2; } /* ---- пометка неполного отчёта ---- Янтарь, а не красный: неполнота — это не приговор поставщику, а состояние сбора. И не зелёный: отчёт с пропущенным уровнем нельзя читать как готовый. */ .ocr-incomplete { margin-bottom: 18px; padding: 14px clamp(15px,2vw,20px); border: 1px solid rgba(227,178,91,.34); border-left-width: 3px; border-radius: 14px; background: radial-gradient(120% 130% at 0 0, rgba(227,178,91,.09), transparent 62%), rgba(12,14,16,.5); } .ocr-incomplete__k { display: block; margin-bottom: 6px; font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #e3b25b; } .ocr-incomplete__p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 74ch; text-wrap: pretty; } .ocr-incomplete__p b { color: var(--ink); font-weight: 600; } /* ---- сводка без плитки о списании ---- В разметке сетка сводки задана четырьмя долями (1.4fr .8fr .8fr .8fr). Когда входа нет, плитки «списано токенов» не существует, и четвёртая доля остаётся пустым прямоугольником в рамке — пустая клетка в сводке читается как поле, данные для которого не пришли. Колонок должно быть столько же, сколько плиток. */ .ocr-sp__grid--3 { grid-template-columns: 1.4fr .8fr .8fr; } @media (max-width: 960px) { .ocr-sp__grid--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ocr-sp__grid--3 { grid-template-columns: 1fr; } } /* ---- поля отчёта на узком экране ---- Мобильная раскладка отчёта намеренно «во всю ширину»: у .sc-page .ocr-sec на ≤900px снят весь padding, чтобы карточки шли от края до края. Но вместе с коробками нулевой отступ получил и ТЕКСТ: заголовок раздела, лид и подписи групп начинались ровно на нулевом пикселе — первая буква упиралась в кромку экрана и читалась как обрезанная. Возвращаем боковой отступ ровно тот же, что автор оставил у шапки отчёта (.ocr-shell__bar, 12px), — полоса и разделы снова стоят по одной линии, полноширинность при этом сохраняется. Селектор с лишней ступенью (.ocr-main) намеренно: скин отчёта лежит в теге