/* Окно внешней проверки. * * Свой файл, а не кусок css/pages/bybit.css: окно живёт в оболочке портала и * нужно на любом разделе, а bybit.css — стили страницы, которой может не быть * вовсе. Заодно шеститысячный файл раздела не растёт дальше. * * Токены объявлены на КОРНЕ окна (.dchk), а не на странице: узел висит в * вне классов раздела и переменных страницы не получает — грабля, на * которой в проекте обжигались трижды (см. шапки bybit.css, chat-templates.css, * template-editor.css). * * Цвета берутся ИЗ ТОКЕНОВ ПРОЕКТА: у сайта есть светлая тема, и захардкоженные * тёмные хексы сделали бы окно чёрной плитой посреди молочной страницы. * Литералов ровно три — красный, янтарный и синий: глобальных токенов для них * в проекте нет, те же значения стоят в bybit.css. * * ПРО ДВИЖЕНИЕ. Правило владельца (19.08.2026) — никаких цветных подсветок * обновлений и построчных появлений: за долгую смену это изматывает. Оно здесь * соблюдено: ничего не мигает само по себе, движение есть только там, где идёт * ПРОЦЕСС, начатый человеком, — ожидание ответа. Индикатор ожидания * prefers-reduced-motion НЕ гасит намеренно (замороженные точки читаются как * зависание — на этом уже обожглись с загрузкой ордеров), всё остальное * движение под ним выключается. */ .dchk { --dchk-bg: var(--page-bg-2); --dchk-bg2: color-mix(in srgb, var(--text) 4%, transparent); --dchk-bg3: color-mix(in srgb, var(--text) 7%, transparent); --dchk-hover: color-mix(in srgb, var(--text) 11%, transparent); --dchk-border: color-mix(in srgb, var(--text) 11%, transparent); --dchk-border2: color-mix(in srgb, var(--text) 7%, transparent); --dchk-fg: var(--text); --dchk-mut: var(--muted); --dchk-mut2: color-mix(in srgb, var(--text) 45%, transparent); --dchk-acc: var(--primary); --dchk-bad: #e5484d; /* как --by-sell */ --dchk-warn: #e0a83c; /* как --by-amber */ --dchk-info: #2f81f7; /* как --by-unread */ /* Те же смыслы, но для ТЕКСТА. В тёмной теме совпадают с основными; см. ниже, почему в светлой — нет. */ --dchk-bad-fg: var(--dchk-bad); --dchk-warn-fg: var(--dchk-warn); --dchk-r: 9px; --dchk-r2: 12px; } /* Светлая тема: значки и рамки остаются прежними, а текст темнеет. Красный и янтарный, взятые из тёмной темы, на молочном фоне дают 2–3:1 — этого хватает акценту (точка, полоса, обводка), но не абзацу: список нюансов документа и строка «Это НЕ чисто» читаются целиком, а не замечаются краем глаза. Поэтому цвет ТЕКСТА отдельным токеном, а не общим на всё. */ [data-theme="light"] .dchk { --dchk-bad-fg: #b4262b; --dchk-warn-fg: #855800; } /* Запас для браузеров без color-mix. * * Условие ОБЯЗАНО содержать свойство: «@supports not (color-mix(…))» без него * синтаксически невалидно, такое условие считается ложным, а «not ложь» — * истиной, и запас применялся бы ВСЕГДА. Именно так 19.08.2026 в светлой теме * половина текста стала белой по белому. И запас задан для ОБЕИХ тем: * молчаливо «тёмный» запас — та же ошибка, только отложенная. */ @supports not (color: color-mix(in srgb, white 50%, black)) { .dchk { --dchk-bg2: rgba(255, 255, 255, 0.04); --dchk-bg3: rgba(255, 255, 255, 0.07); --dchk-hover: rgba(255, 255, 255, 0.11); --dchk-border: rgba(255, 255, 255, 0.11); --dchk-border2: rgba(255, 255, 255, 0.07); --dchk-mut2: rgba(255, 255, 255, 0.45); } [data-theme="light"] .dchk { --dchk-bg2: rgba(0, 0, 0, 0.04); --dchk-bg3: rgba(0, 0, 0, 0.06); --dchk-hover: rgba(0, 0, 0, 0.1); --dchk-border: rgba(0, 0, 0, 0.12); --dchk-border2: rgba(0, 0, 0, 0.07); --dchk-mut2: rgba(15, 20, 17, 0.55); } } /* JS прячет окно атрибутом hidden — правило обязано побеждать display:flex. */ .dchk[hidden] { display: none !important; } .dchk [hidden] { display: none !important; } /* ---------- подложка и панель ---------- */ .dchk { position: fixed; inset: 0; z-index: 10030; display: flex; /* Прижимаем к верху, а не центруем: панель растёт вниз по мере прихода ответа, и центрирование дёргало бы шапку вверх на каждом итоге. */ align-items: flex-start; justify-content: center; padding: 7vh 16px 16px; background: rgba(0, 0, 0, 0.55); font-family: var(--font-ui); animation: dchk-scrim .14s ease-out; } .dchk__panel { width: min(680px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--dchk-bg); border: 1px solid var(--dchk-border); border-radius: var(--dchk-r2); box-shadow: var(--shadow); overflow: hidden; animation: dchk-in .16s cubic-bezier(.2, .8, .3, 1); } @keyframes dchk-scrim { from { opacity: 0; } to { opacity: 1; } } @keyframes dchk-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* ---------- шапка ---------- */ .dchk__head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--dchk-border2); } .dchk__glass { display: inline-flex; color: var(--dchk-mut); } .dchk__title { font-size: 13px; font-weight: 650; color: var(--dchk-fg); } /* Состояние источника. Не украшение: «выключен» и «молчит» чинятся разным, и различить их оператор обязан ДО того, как потратит запрос. Класс НЕ .dchk__src: так называется блок первоисточника в итоге, и красная полоса обвинения доставалась значку «источник на связи» (поймано глазами на первом же снимке 23.08.2026). Имена в одном файле обязаны быть про разное. */ .dchk__state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 9px; font-size: 10.5px; color: var(--dchk-mut2); background: var(--dchk-bg2); border: 1px solid var(--dchk-border2); border-radius: 999px; white-space: nowrap; } .dchk__stateDot { width: 7px; height: 7px; border-radius: 50%; background: var(--dchk-mut2); flex: 0 0 auto; } /* Живой источник — ровное свечение, БЕЗ пульсации: точка, мигающая всю смену, изматывает ровно так же, как подсветка обновлений в списке. */ .dchk__stateDot--on { background: var(--dchk-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dchk-acc) 22%, transparent); } .dchk__stateDot--wait { background: var(--dchk-warn); } .dchk__stateDot--off { background: var(--dchk-mut2); } .dchk__x { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; font: inherit; font-size: 17px; line-height: 1; color: var(--dchk-mut2); background: none; border: 1px solid transparent; border-radius: var(--dchk-r); cursor: pointer; transition: color .12s ease, background-color .12s ease; } .dchk__x:hover { color: var(--dchk-fg); background: var(--dchk-bg3); } /* ---------- вкладки ---------- */ .dchk__tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--dchk-border2); } .dchk__tab { position: relative; padding: 7px 12px 8px; font: inherit; font-size: 11.5px; color: var(--dchk-mut2); background: none; border: 0; border-radius: var(--dchk-r) var(--dchk-r) 0 0; cursor: pointer; transition: color .12s ease, background-color .12s ease; } .dchk__tab:hover { color: var(--dchk-fg); background: var(--dchk-bg2); } .dchk__tab.is-on { color: var(--dchk-fg); font-weight: 600; } /* Подчёркивание активной вкладки. Отдельным псевдоэлементом, а не border — так оно не двигает текст на пиксель при переключении. */ .dchk__tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--dchk-acc); transform: scaleX(0); transition: transform .16s cubic-bezier(.2, .8, .3, 1); } .dchk__tab.is-on::after { transform: scaleX(1); } /* ---------- тело ---------- */ .dchk__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 12px; display: flex; flex-direction: column; gap: 10px; } /* ---------- поле значения ---------- */ .dchk__field { display: flex; gap: 8px; } .dchk__input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; font: inherit; font-size: 13px; color: var(--dchk-fg); background: var(--dchk-bg2); border: 1px solid var(--dchk-border); border-radius: var(--dchk-r); transition: border-color .12s ease, background-color .12s ease; } .dchk__input::placeholder { color: var(--dchk-mut2); } .dchk__input:focus { outline: none; border-color: color-mix(in srgb, var(--dchk-acc) 55%, transparent); background: var(--dchk-bg3); } .dchk__input:disabled { opacity: .6; } .dchk__go { flex: 0 0 auto; padding: 9px 16px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dchk-fg); background: var(--dchk-bg3); border: 1px solid var(--dchk-border); border-radius: var(--dchk-r); cursor: pointer; transition: background-color .12s ease, border-color .12s ease, transform .1s ease; } .dchk__go:hover:not(:disabled) { border-color: color-mix(in srgb, var(--dchk-acc) 55%, transparent); background: color-mix(in srgb, var(--dchk-acc) 14%, transparent); } .dchk__go:active:not(:disabled) { transform: scale(.97); } .dchk__go:disabled { opacity: .55; cursor: default; } /* ---------- чипы вида ---------- */ .dchk__kinds { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dchk__kindsCap { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--dchk-mut2); } .dchk__chip { padding: 3px 10px; font: inherit; font-size: 11px; color: var(--dchk-mut2); background: none; border: 1px solid var(--dchk-border2); border-radius: 999px; cursor: pointer; transition: color .12s ease, background-color .12s ease, border-color .12s ease; } .dchk__chip:hover { color: var(--dchk-fg); background: var(--dchk-bg2); } .dchk__chip.is-on { color: var(--dchk-fg); background: var(--dchk-bg3); border-color: var(--dchk-border); } /* Вид, который предложил САМ сервер, не решившись угадывать. Обводка, а не заливка: это подсказка, а не выбор — выбор всё равно за человеком. */ .dchk__chip.is-hint { color: var(--dchk-warn); border-color: color-mix(in srgb, var(--dchk-warn) 55%, transparent); } /* ---------- площадка для файла ---------- */ .dchk__drop { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 22px 16px; font: inherit; color: var(--dchk-mut2); background: var(--dchk-bg2); border: 1px dashed var(--dchk-border); border-radius: var(--dchk-r2); cursor: pointer; transition: color .13s ease, background-color .13s ease, border-color .13s ease; } .dchk__drop:hover:not(:disabled) { color: var(--dchk-fg); border-color: color-mix(in srgb, var(--dchk-acc) 50%, transparent); } .dchk__drop:disabled { opacity: .55; cursor: default; } .dchk__dropIco { display: inline-flex; } .dchk__dropTxt { display: grid; gap: 3px; text-align: left; font-size: 12.5px; } .dchk__dropTxt i { font-style: normal; font-size: 10.5px; color: var(--dchk-mut2); } /* Файл тащат над окном. Красим ВСЮ панель, а не площадку: тащат туда, куда смотрят, а смотрят на окно целиком — и бросок ловится где угодно. */ .dchk.is-drag .dchk__panel { border-color: color-mix(in srgb, var(--dchk-acc) 60%, transparent); box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--dchk-acc) 18%, transparent); } .dchk.is-drag .dchk__drop { color: var(--dchk-fg); border-color: var(--dchk-acc); border-style: solid; background: color-mix(in srgb, var(--dchk-acc) 10%, transparent); } .dchk__fileRow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--dchk-bg2); border: 1px solid var(--dchk-border); border-radius: var(--dchk-r); } .dchk__fileIco { flex: 0 0 auto; padding: 2px 6px; font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--dchk-bad-fg); background: color-mix(in srgb, var(--dchk-bad) 12%, transparent); border-radius: 4px; } .dchk__fileName { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dchk__fileSize { flex: 0 0 auto; font-size: 10.5px; color: var(--dchk-mut2); } /* ---------- сноска и ошибка ---------- */ .dchk__note { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--dchk-mut2); } .dchk__err { padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: var(--dchk-bad-fg); background: color-mix(in srgb, var(--dchk-bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--dchk-bad) 30%, transparent); border-radius: var(--dchk-r); } /* ---------- ожидание ---------- */ .dchk__wait { padding: 10px 12px; background: var(--dchk-bg2); border: 1px solid var(--dchk-border2); border-radius: var(--dchk-r); } .dchk__waitTop { display: flex; align-items: center; gap: 8px; } .dchk__waitText { font-size: 12px; color: var(--dchk-fg); } .dchk__waitSec { margin-left: auto; font-size: 11px; color: var(--dchk-mut2); font-variant-numeric: tabular-nums; } /* Три точки — те же, что у загрузки ордеров: подскок с масштабом виден боковым зрением. Робкое мерцание принимали за статичную надпись. */ .dchk__dots { display: inline-flex; gap: 3px; align-items: center; } .dchk__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--dchk-acc); animation: dchk-dot .9s ease-in-out infinite; } .dchk__dots i:nth-child(2) { animation-delay: .15s; } .dchk__dots i:nth-child(3) { animation-delay: .3s; } @keyframes dchk-dot { 0%, 70%, 100% { opacity: .25; transform: translateY(0) scale(.8); } 35% { opacity: 1; transform: translateY(-4px) scale(1.15); } } /* Шкала честная: ширину двигает JS по РЕАЛЬНОМУ времени против того же срока, что стоит на сервере. Выдуманных шагов «отправляем / разбираем» здесь нет — сервер делает всё одним запросом, и различить их браузер не может. */ .dchk__bar { height: 3px; margin-top: 8px; border-radius: 3px; background: var(--dchk-bg3); overflow: hidden; } .dchk__bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--dchk-acc); transition: width .1s linear; } /* Срок вышел. Цвет меняем один раз и насовсем — это смена смысла, а не подсветка обновления. */ .dchk__wait.is-over .dchk__bar i { background: var(--dchk-warn); } .dchk__wait.is-over .dchk__dots i { background: var(--dchk-warn); } .dchk__waitHint { margin-top: 6px; font-size: 10.5px; color: var(--dchk-mut2); } /* ---------- итог ---------- */ .dchk__res { display: grid; gap: 10px; animation: dchk-res-in .16s ease-out; } @keyframes dchk-res-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .dchk__verdict { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: var(--dchk-r2); background: var(--dchk-bg2); border: 1px solid var(--dchk-border2); border-left: 3px solid var(--dchk-mut2); } .dchk__vDot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--dchk-mut2); } .dchk__vBody { flex: 1 1 auto; min-width: 0; } .dchk__vTitle { font-size: 13px; font-weight: 650; color: var(--dchk-fg); } .dchk__vSub { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--dchk-mut); } .dchk__vOrigin { margin-top: 4px; font-size: 10.5px; color: var(--dchk-mut2); } /* Тона итога. Единственное, что видно боковым зрением, — поэтому «источник не ответил» ОБЯЗАН отличаться от «совпадений нет»: первое не проверено вовсе. */ .dchk__res--hit .dchk__verdict { border-left-color: var(--dchk-bad); background: color-mix(in srgb, var(--dchk-bad) 8%, transparent); } .dchk__res--hit .dchk__vDot { background: var(--dchk-bad); } .dchk__res--clean .dchk__verdict { border-left-color: var(--dchk-acc); } .dchk__res--clean .dchk__vDot { background: var(--dchk-acc); } .dchk__res--wait .dchk__verdict { border-left-color: var(--dchk-info); } .dchk__res--wait .dchk__vDot { background: var(--dchk-info); } .dchk__res--dark .dchk__verdict { border-left-color: var(--dchk-warn); } .dchk__res--dark .dchk__vDot { background: var(--dchk-warn); } .dchk__warn { padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: var(--dchk-warn-fg); background: color-mix(in srgb, var(--dchk-warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--dchk-warn) 30%, transparent); border-radius: var(--dchk-r); } .dchk__mini { flex: 0 0 auto; padding: 3px 9px; font: inherit; font-size: 10.5px; color: var(--dchk-mut2); background: none; border: 1px solid var(--dchk-border2); border-radius: var(--dchk-r); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, border-color .12s ease; } .dchk__mini:hover { color: var(--dchk-fg); background: var(--dchk-bg3); border-color: var(--dchk-border); } /* ---------- сводка ---------- */ .dchk__facts { display: grid; gap: 4px; padding: 9px 11px; background: var(--dchk-bg2); border: 1px solid var(--dchk-border2); border-radius: var(--dchk-r); } .dchk__kv { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 10px; align-items: baseline; font-size: 11.5px; } .dchk__kv span { color: var(--dchk-mut2); } /* Переносим по любому месту: ссылка на профиль длиннее ширины окна. */ .dchk__kv b { font-weight: 600; color: var(--dchk-fg); overflow-wrap: anywhere; } .dchk__secHead { display: flex; align-items: center; gap: 8px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--dchk-mut2); } /* ---------- досье «Шерлока»: по строкам, кнопка отчёта, окно ---------- */ .dchk__dos { display: grid; gap: 8px; } .dchk__dos .dchk__secHead { margin-top: 4px; } .dchk__dosActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; } /* Ссылка в облике главной кнопки: отчёт — то, ради чего окно открывают. */ .dchk__go--link { text-decoration: none; display: inline-flex; align-items: center; } .dchk__fold--raw { flex: 1 1 100%; } .dchk__fold--raw > summary { font-size: 10.5px; color: var(--dchk-mut2); } .dchk--sherlock .dchk__panel { width: min(560px, 100%); } .dchk--sherlock .dchk__body { padding-top: 12px; } .dchk--sherlock .dchk__state { font-size: 10.5px; color: var(--dchk-mut2); } .dchk__secHead .dchk__mini { margin-left: auto; text-transform: none; letter-spacing: 0; } /* ---------- первоисточники ---------- */ .dchk__srcs { display: grid; gap: 6px; } .dchk__src { padding: 8px 10px; background: var(--dchk-bg2); border: 1px solid var(--dchk-border2); border-left: 3px solid color-mix(in srgb, var(--dchk-bad) 55%, transparent); border-radius: var(--dchk-r); } .dchk__srcHead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 10.5px; } .dchk__srcHead b { font-size: 11.5px; color: var(--dchk-fg); overflow-wrap: anywhere; } .dchk__srcHead span { color: var(--dchk-mut2); } .dchk__srcHead i { font-style: normal; color: var(--dchk-mut2); } .dchk__quote { margin-top: 5px; padding: 6px 8px; font-size: 11px; line-height: 1.45; color: var(--dchk-mut); background: var(--dchk-bg3); border-radius: var(--dchk-r); overflow-wrap: anywhere; } /* ---------- дословный ответ ---------- */ .dchk__raw { display: grid; gap: 6px; } .dchk__pre { margin: 0; padding: 10px 12px; max-height: 46vh; overflow: auto; scrollbar-width: thin; font: inherit; font-size: 11.5px; line-height: 1.5; /* Ответ бота выровнен пробелами и эмодзи — перенос по словам с сохранением переводов строк даёт ровно тот вид, который человек видит в телеграме. */ white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dchk-fg); background: var(--dchk-bg2); border: 1px solid var(--dchk-border2); border-radius: var(--dchk-r); } .dchk__rawNone { padding: 8px 10px; font-size: 11px; line-height: 1.45; color: var(--dchk-mut2); background: var(--dchk-bg2); border: 1px dashed var(--dchk-border2); border-radius: var(--dchk-r); } /* ---------- сворачиваемое: досье и тех-инспекция ---------- */ .dchk__fold { border: 1px solid var(--dchk-border2); border-radius: var(--dchk-r); background: var(--dchk-bg2); } .dchk__fold > summary { padding: 8px 11px; font-size: 11.5px; color: var(--dchk-mut); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .dchk__fold > summary::-webkit-details-marker { display: none; } .dchk__fold > summary::before { content: "›"; display: inline-block; font-size: 14px; line-height: 1; color: var(--dchk-mut2); transition: transform .14s ease; } .dchk__fold[open] > summary::before { transform: rotate(90deg); } .dchk__fold > summary i { margin-left: auto; font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dchk-mut2); } .dchk__fold > .dchk__pre, .dchk__fold > .dchk__facts { margin: 0 8px 8px; } /* Досье — персональные данные третьих лиц. Помечено рамкой, а не цветом текста: это предупреждение о содержимом, а не тревога. */ .dchk__fold--pd { border-color: color-mix(in srgb, var(--dchk-warn) 32%, transparent); } .dchk__fold--pd > summary i { color: var(--dchk-warn-fg); } /* ---------- подвал: что уже спрашивали ---------- */ .dchk__foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--dchk-border2); background: var(--dchk-bg2); } .dchk__footCap { flex: 0 0 auto; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--dchk-mut2); } .dchk__recent { display: flex; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } .dchk__pill { flex: 0 0 auto; max-width: 190px; padding: 3px 9px; font: inherit; font-size: 10.5px; color: var(--dchk-mut); background: var(--dchk-bg3); border: 1px solid var(--dchk-border2); border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s ease, border-color .12s ease; } .dchk__pill:hover { color: var(--dchk-fg); border-color: var(--dchk-border); } .dchk__pill--hit { color: var(--dchk-bad-fg); border-color: color-mix(in srgb, var(--dchk-bad) 35%, transparent); } .dchk__pill--clean { color: var(--dchk-mut); } .dchk__pill--dark { color: var(--dchk-warn-fg); border-color: color-mix(in srgb, var(--dchk-warn) 32%, transparent); } /* ---------- банк по карте ---------- * * Итог — «пластик»: логотип, имя банка, платёжная система, номер с выделенным * BIN и строки правды под ним. Движение ЗДЕСЬ — отклик на действие человека * (нажал «Проверить» — карточка выезжает и собирается), а не подсветка * обновления: карточка появляется один раз и дальше стоит. Пока идёт запрос — * пустой пластик с бегущим бликом: это «идёт работа», и оно честное — блик * живёт ровно столько, сколько ждём ответ. */ .dchk__cardOut { display: grid; margin-top: 10px; } .dchk__cardOut:empty { display: none; } .dchk__input--card { font-variant-numeric: tabular-nums; letter-spacing: .06em; } .dchk__card { display: grid; gap: 8px; perspective: 900px; } .dchk__cardFace { position: relative; display: grid; gap: 12px; padding: 14px 16px 13px; border-radius: 14px; color: var(--dchk-fg); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--dchk-acc) 22%, transparent), transparent 60%), linear-gradient(135deg, var(--dchk-bg3), var(--dchk-bg2)); border: 1px solid var(--dchk-border); box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .55); overflow: hidden; transform-origin: 50% 0%; animation: dchk-card-in .42s cubic-bezier(.2, .8, .25, 1) both; } /* Блик по диагонали — один раз, вместе с появлением. */ .dchk__card--known .dchk__cardFace::after, .dchk__card--bad .dchk__cardFace::after, .dchk__card--unknown .dchk__cardFace::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--dchk-fg) 9%, transparent), transparent); transform: skewX(-18deg) translateX(0); animation: dchk-card-gloss .9s ease-out .18s both; pointer-events: none; } @keyframes dchk-card-in { from { opacity: 0; transform: translateY(14px) rotateX(-14deg) scale(.97); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes dchk-card-gloss { from { transform: skewX(-18deg) translateX(-40%); opacity: 0; } 30% { opacity: 1; } to { transform: skewX(-18deg) translateX(420%); opacity: 0; } } /* Тон итога — левая кромка, как у вердикта выше: видна боковым зрением. */ .dchk__card--known .dchk__cardFace { border-left: 3px solid var(--dchk-acc); } .dchk__card--unknown .dchk__cardFace { border-left: 3px solid var(--dchk-warn); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--dchk-warn) 14%, transparent), transparent 60%), linear-gradient(135deg, var(--dchk-bg3), var(--dchk-bg2)); } .dchk__card--bad .dchk__cardFace { border-left: 3px solid var(--dchk-bad); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--dchk-bad) 16%, transparent), transparent 60%), linear-gradient(135deg, var(--dchk-bg3), var(--dchk-bg2)); } .dchk__cardTop { display: flex; align-items: center; gap: 10px; min-width: 0; } .dchk__cardLogo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--dchk-fg) 6%, transparent); animation: dchk-card-pop .5s cubic-bezier(.2, 1.2, .3, 1) .12s both; } .dchk__cardLogo img { width: 100%; height: 100%; object-fit: contain; display: block; } .dchk__cardLogo.is-plate { background: var(--bank-plate); box-shadow: inset 0 0 0 1px var(--bank-plate-edge); } .dchk__cardLogo--mono { font: 700 15px var(--font-ui); color: var(--bank-c); background: var(--bank-plate); box-shadow: inset 0 0 0 1px var(--bank-plate-edge); } .dchk__cardLogo--none { color: var(--dchk-mut2); border: 1px dashed var(--dchk-border); background: none; } @keyframes dchk-card-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .dchk__cardBank { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; animation: dchk-card-rise .38s ease-out .16s both; } .dchk__card--unknown .dchk__cardBank { color: var(--dchk-warn-fg); } .dchk__cardScheme { flex: 0 0 auto; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dchk-mut); border: 1px solid var(--dchk-border); border-radius: 999px; background: var(--dchk-bg2); animation: dchk-card-rise .38s ease-out .22s both; } /* Номер — «тиснением»: крупно, табличными цифрами, BIN подчёркнут линией, которая прорисовывается слева направо после появления карточки. */ .dchk__cardNum { font-size: 19px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--dchk-fg); overflow-wrap: anywhere; animation: dchk-card-rise .38s ease-out .2s both; } .dchk__cardBin { position: relative; font-weight: 700; color: var(--dchk-acc); } .dchk__card--bad .dchk__cardBin { color: var(--dchk-bad-fg); } .dchk__card--unknown .dchk__cardBin { color: var(--dchk-warn-fg); } .dchk__cardBin::after { content: ""; position: absolute; left: 0; right: .12em; bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; transform-origin: 0 50%; animation: dchk-bin-line .45s cubic-bezier(.2, .8, .3, 1) .48s both; } @keyframes dchk-bin-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } .dchk__cardMeta { display: flex; flex-wrap: wrap; gap: 6px; } .dchk__cardPill { padding: 3px 9px; font-size: 10.5px; line-height: 1.35; color: var(--dchk-mut); background: var(--dchk-bg2); border: 1px solid var(--dchk-border2); border-radius: 999px; animation: dchk-card-rise .36s ease-out both; } .dchk__cardPill:nth-child(1) { animation-delay: .3s; } .dchk__cardPill:nth-child(2) { animation-delay: .38s; } .dchk__cardPill:nth-child(3) { animation-delay: .46s; } .dchk__cardPill--ok { color: var(--dchk-fg); border-color: color-mix(in srgb, var(--dchk-acc) 40%, transparent); background: color-mix(in srgb, var(--dchk-acc) 10%, transparent); } .dchk__cardPill--bad { color: var(--dchk-bad-fg); border-color: color-mix(in srgb, var(--dchk-bad) 35%, transparent); background: color-mix(in srgb, var(--dchk-bad) 9%, transparent); } .dchk__cardPill--mute { color: var(--dchk-mut2); } @keyframes dchk-card-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .dchk__cardNote { margin: 0; padding: 8px 10px; font-size: 11px; line-height: 1.45; color: var(--dchk-warn-fg); background: color-mix(in srgb, var(--dchk-warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--dchk-warn) 28%, transparent); border-radius: var(--dchk-r); animation: dchk-card-rise .36s ease-out .4s both; } /* Пустой пластик на время запроса: блик бежит, пока ждём. */ .dchk__card--wait .dchk__cardFace { animation: none; border-left: 3px solid var(--dchk-border); } .dchk__card--wait .dchk__cardLogo { animation: none; } .dchk__shim { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--dchk-bg3) 25%, var(--dchk-hover) 50%, var(--dchk-bg3) 75%); background-size: 200% 100%; animation: dchk-shim 1.1s linear infinite; } .dchk__cardBank.dchk__shim { width: 40%; height: 16px; } .dchk__cardNum.dchk__shim { width: 72%; height: 22px; } @keyframes dchk-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---------- узкий экран ---------- */ @media (max-width: 640px) { .dchk { padding: 0; } .dchk__panel { width: 100%; max-height: 100%; height: 100%; border: 0; border-radius: 0; } .dchk__field { flex-wrap: wrap; } .dchk__go { width: 100%; } .dchk__kv { grid-template-columns: 1fr; gap: 1px; } } /* ---------- меньше движения ---------- * * Гасим УКРАШЕНИЯ: вход панели, появление итога, подчёркивание вкладки, отклик * кнопки. Индикатор ожидания оставляем: это не украшение, а сообщение «идёт * работа», и замороженные точки читаются как зависание. Шкалу двигает JS — * она работает и без переходов. */ @media (prefers-reduced-motion: reduce) { .dchk, .dchk__panel, .dchk__res, .dchk__cardFace, .dchk__cardFace::after, .dchk__cardLogo, .dchk__cardBank, .dchk__cardScheme, .dchk__cardNum, .dchk__cardBin::after, .dchk__cardPill, .dchk__cardNote { animation: none; } .dchk__tab::after, .dchk__go, .dchk__fold > summary::before { transition: none; } .dchk__go:active:not(:disabled) { transform: none; } }