/* ============================================================ ХимПодготовка — банк заданий (ЕГЭ и ОГЭ) Раньше страница начиналась с выпадающего списка «Номер задания», хотя именно за номером сюда и приходят: «задание 7 ЕГЭ по химии». Номер прятался, а вместо него на входе была лента случайных заданий. Теперь вход — карта экзамена: все номера КИМ плитками, у каждой тема, количество заданий в банке, баллы и личный прогресс ученика. Цвет плитки — уровень сложности по спецификации ФИПИ, а он у первой части совпадает со шкалой: 1 балл — базовый, 2 балла — повышенный. Файл общий для статической страницы ЕГЭ и приложения ОГЭ, поэтому все имена с префиксом bnk-, а правки чужих классов (карточка задания) идут только внутри .bank-page. ============================================================ */ .bank-page { --bnk-ink: #13233D; --bnk-ink-2: #3B4B63; --bnk-muted: #6A7A90; --bnk-line: #E4E9F1; --bnk-bg: #F4F6FA; --bnk-card: #FFFFFF; /* Уровни сложности. Базовый — голубой, повышенный — фиолетовый, развёрнутый ответ — золото бренда: самые дорогие задания экзамена и должны быть самыми заметными. */ --t1: #0EA5E9; --t1-soft: #E6F6FE; --t1-glow: rgba(14, 165, 233, .28); --t2: #8B5CF6; --t2-soft: #F1ECFF; --t2-glow: rgba(139, 92, 246, .28); --t3: #F5A623; --t3-soft: #FFF4E0; --t3-glow: rgba(245, 166, 35, .34); --ok: #10B981; --ok-soft: #DDF7EC; --bad: #F43F5E; --bad-soft: #FFE6EA; --bnk-radius: 20px; --bnk-shadow: 0 1px 2px rgba(19, 35, 61, .05), 0 8px 24px -12px rgba(19, 35, 61, .12); --bnk-shadow-lg: 0 2px 4px rgba(19, 35, 61, .05), 0 22px 44px -18px rgba(19, 35, 61, .28); --bnk-ease: cubic-bezier(.2, .8, .2, 1); /* Липкая панель встаёт под верхнее меню сайта: оно при прокрутке пристыковывается к краю экрана и занимает --hp-bar-h. */ --bnk-sticky-top: calc(var(--hp-bar-h, 62px) + 10px); background: var(--bnk-bg); color: var(--bnk-ink); } /* Класс стоит на и у страницы ЕГЭ, и у приложения ОГЭ: фон должен тянуться на весь экран, а не только под контент. */ body.bank-page { background: var(--bnk-bg); } /* Ширина задаётся явно, а не по содержимому. У сайта body — flex-колонка, а margin: 0 auto отключает растягивание: контейнер брал ширину по содержимому. Сетка плиток под таким расчётом меряет треки 1fr по максимальной ширине плиток, и на телефоне 375 px контейнер раздувался до 485 px — правую часть страницы срезало. У ЕГЭ это .app-container прямо в . В приложении ОГЭ класс .app-container носит обёртка всего приложения, поэтому там — только прямой потомок body, а банк ОГЭ получает свою обёртку .bnk-root. */ body.bank-page > .app-container, .bank-page .bnk-root { width: 100%; min-width: 0; max-width: 1180px; box-sizing: border-box; } .bank-page .bnk-root { margin-inline: auto; } /* Общий стиль сайта выравнивает абзацы по ширине с переносами — в коротких подписях карты и панели это дало бы «дыры» */ .bank-page .bnk-map p, .bank-page .bnk-feed > p, .bank-page .bnk-me p { text-align: left; hyphens: manual; -webkit-hyphens: manual; } /* Свои display у блоков банка перебивали бы атрибут hidden */ .bank-page [hidden] { display: none !important; } .bnk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================================================ Карта экзамена ============================================================ */ .bnk-map { margin: 0 0 28px; scroll-margin-top: calc(var(--hp-bar-h, 62px) + 16px); } .bnk-map__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 4px 16px; } /* У h2 сайта своя оранжевая черта слева и отступ под неё — в шапке карты они ломали выравнивание с плитками. */ .bnk-map__title { margin: 0; padding: 0; font: 900 1.7rem/1.1 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; color: var(--bnk-ink); } .bnk-map__title::before { content: none; } .bnk-map__sub { margin: 6px 0 0; font-size: .95rem; color: var(--bnk-muted); } /* Переключатель частей — сегментированная «таблетка» */ .bnk-seg { display: inline-flex; padding: 4px; gap: 2px; background: #fff; border: 1px solid var(--bnk-line); border-radius: 14px; box-shadow: var(--bnk-shadow); } .bnk-seg button { appearance: none; border: 0; background: transparent; padding: 8px 14px; border-radius: 10px; font: 700 .86rem/1 'Inter', system-ui, sans-serif; color: var(--bnk-ink-2); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; } .bnk-seg button:hover { background: var(--bnk-bg); color: var(--bnk-ink); } .bnk-seg button[aria-pressed="true"] { background: var(--bnk-ink); color: #fff; box-shadow: 0 4px 12px -4px rgba(19, 35, 61, .5); } .bnk-seg button small { font-weight: 600; opacity: .6; margin-left: 4px; } .bnk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 4px 0; font-size: .8rem; color: var(--bnk-muted); } .bnk-legend span { display: inline-flex; align-items: center; gap: 6px; } .bnk-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .bnk-legend .l1 i { background: var(--t1); } .bnk-legend .l2 i { background: var(--t2); } .bnk-legend .l3 i { background: var(--t3); } .bnk-legend .lstar b { color: var(--t3); font-size: .95rem; } .bnk-part { margin-top: 18px; } .bnk-part[hidden] { display: none; } .bnk-part__label { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 10px; font: 800 .78rem/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--bnk-muted); } .bnk-part__label span { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .8; } .bnk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; } /* ——— Плитка номера ——— */ .bnk-tile { --tc: var(--t1); --tc-soft: var(--t1-soft); --tc-glow: var(--t1-glow); position: relative; display: flex; flex-direction: column; min-height: 152px; padding: 14px 14px 12px; border-radius: 18px; background: var(--bnk-card); border: 1px solid var(--bnk-line); box-shadow: var(--bnk-shadow); color: var(--bnk-ink); text-decoration: none; overflow: hidden; overflow: clip; isolation: isolate; transition: transform .25s var(--bnk-ease), box-shadow .25s var(--bnk-ease), border-color .25s; } .bnk-tile[data-tier="2"] { --tc: var(--t2); --tc-soft: var(--t2-soft); --tc-glow: var(--t2-glow); } .bnk-tile[data-tier="3"] { --tc: var(--t3); --tc-soft: var(--t3-soft); --tc-glow: var(--t3-glow); } /* Цветная кромка сверху — уровень читается даже боковым зрением */ .bnk-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tc); opacity: .9; } /* Мягкое свечение цвета уровня в углу плитки */ .bnk-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--tc-glow), transparent 70%); opacity: 0; z-index: -1; transition: opacity .3s; } .bnk-tile:hover, .bnk-tile:focus-visible { transform: translateY(-4px); border-color: var(--tc); box-shadow: 0 18px 36px -18px var(--tc-glow), var(--bnk-shadow-lg); outline: none; } .bnk-tile:hover::after, .bnk-tile:focus-visible::after, .bnk-tile.is-active::after { opacity: 1; } .bnk-tile:active { transform: translateY(-1px) scale(.985); } .bnk-tile.is-active { border-color: var(--tc); box-shadow: 0 0 0 3px var(--tc-glow), var(--bnk-shadow-lg); } .bnk-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .bnk-tile__num { font: 900 2.1rem/1 'Inter', system-ui, sans-serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--tc); } .bnk-tile__pts { margin-top: 3px; padding: 4px 8px; border-radius: 999px; background: var(--tc-soft); color: var(--tc); font: 800 .7rem/1 'Inter', system-ui, sans-serif; white-space: nowrap; } /* У повышенного уровня фиолетовый на светлом слабоват — чуть темнее */ .bnk-tile[data-tier="2"] .bnk-tile__pts { color: #6D3FE0; } .bnk-tile[data-tier="1"] .bnk-tile__pts { color: #0283C2; } .bnk-tile__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 10px 0 12px; font-size: .86rem; font-weight: 650; line-height: 1.32; color: var(--bnk-ink); /* «Электроотрицательность» шире узкой плитки: переносим по слогам, а где браузер не умеет — хотя бы разрываем слово */ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } .bnk-tile__foot { margin-top: auto; } .bnk-tile__bar { display: block; height: 6px; border-radius: 999px; background: #EEF1F6; overflow: hidden; } .bnk-tile__bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--tc), color-mix(in srgb, var(--tc) 60%, #fff)); transition: width .6s var(--bnk-ease); } .bnk-tile__meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 7px; font-size: .72rem; font-weight: 600; color: var(--bnk-muted); white-space: nowrap; } /* Узкая плитка на телефоне не должна распираться подписью */ .bnk-tile__meta > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .bnk-tile__skill.is-good { color: var(--ok); } .bnk-tile__skill.is-mid { color: #D97706; } .bnk-tile__skill.is-low { color: var(--bad); } /* Звезда освоенного номера */ .bnk-tile__star { position: absolute; right: 10px; bottom: 30px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #FFD36B, #F5A623); color: #fff; font-size: 14px; box-shadow: 0 4px 12px -2px rgba(245, 166, 35, .6); transform: scale(0) rotate(-40deg); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); } .bnk-tile.is-mastered .bnk-tile__star { transform: scale(1) rotate(0); } /* Вторая часть — задания с развёрнутым ответом. Тёмные плитки с золотом: это 20 из 56 первичных баллов, и визуально они должны весить больше. */ .bnk-tile[data-part="2"] { background: radial-gradient(120% 90% at 100% 0%, rgba(245, 166, 35, .22), transparent 60%), linear-gradient(150deg, #13233D 0%, #0C1728 100%); border-color: rgba(245, 166, 35, .28); color: #EAF1FB; } .bnk-tile[data-part="2"] .bnk-tile__title { color: #EAF1FB; } .bnk-tile[data-part="2"] .bnk-tile__meta { color: rgba(234, 241, 251, .62); } .bnk-tile[data-part="2"] .bnk-tile__pts { background: rgba(245, 166, 35, .16); color: #FFC761; } .bnk-tile[data-part="2"] .bnk-tile__bar { background: rgba(255, 255, 255, .1); } .bnk-tile[data-part="2"]::before { background: linear-gradient(90deg, #FFD36B, #F5A623); } .bnk-tile[data-part="2"]:hover, .bnk-tile[data-part="2"]:focus-visible, .bnk-tile[data-part="2"].is-active { border-color: #F5A623; box-shadow: 0 0 0 3px rgba(245, 166, 35, .35), 0 22px 44px -18px rgba(9, 20, 36, .75); } .bnk-tile__self { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: #FFC761; } /* ============================================================ Липкая панель над лентой ============================================================ */ .bnk-feed { scroll-margin-top: calc(var(--bnk-sticky-top) + 8px); } .bnk-bar { position: sticky; top: var(--bnk-sticky-top); z-index: 50; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; margin: 0 0 14px; border-radius: 18px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--bnk-line); box-shadow: var(--bnk-shadow-lg); } /* Что сейчас решаем: номер с его цветом или «все номера» */ .bnk-current { --tc: var(--bnk-ink); --tc-soft: #EEF1F6; display: inline-flex; align-items: center; gap: 8px; max-width: 340px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--tc-soft); color: var(--tc); font: 800 .86rem/1.1 'Inter', system-ui, sans-serif; min-height: 40px; } .bnk-current[data-tier="1"] { --tc: #0283C2; --tc-soft: var(--t1-soft); } .bnk-current[data-tier="2"] { --tc: #6D3FE0; --tc-soft: var(--t2-soft); } .bnk-current[data-tier="3"] { --tc: #B86E00; --tc-soft: var(--t3-soft); } .bnk-current__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bnk-current__text small { font-weight: 600; opacity: .75; margin-left: 4px; } .bnk-current__clear { appearance: none; border: 0; width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .8); color: inherit; cursor: pointer; font-size: 16px; line-height: 1; } .bnk-current__clear:hover { background: #fff; } .bnk-current__clear[hidden] { display: none; } .bnk-search { position: relative; flex: 1 1 220px; min-width: 180px; } .bnk-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bnk-muted); pointer-events: none; } .bnk-search input { width: 100%; height: 40px; padding: 0 12px 0 38px; border-radius: 12px; border: 1px solid var(--bnk-line); background: var(--bnk-bg); font: 500 .92rem 'Inter', system-ui, sans-serif; color: var(--bnk-ink); outline: none; transition: border-color .2s, background .2s, box-shadow .2s; } .bnk-search input:focus { background: #fff; border-color: var(--t3); box-shadow: 0 0 0 3px rgba(245, 166, 35, .15); } .bnk-bar .bnk-seg { box-shadow: none; background: var(--bnk-bg); border-color: transparent; } .bnk-bar .bnk-seg button { padding: 8px 11px; font-size: .8rem; } .bnk-bar .bnk-seg button[aria-pressed="true"] { background: #fff; color: var(--bnk-ink); box-shadow: 0 2px 8px -2px rgba(19, 35, 61, .22); } .bnk-select { height: 40px; padding: 0 30px 0 12px; border-radius: 12px; border: 1px solid var(--bnk-line); background: var(--bnk-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A7A90' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center; font: 600 .84rem 'Inter', system-ui, sans-serif; color: var(--bnk-ink); appearance: none; cursor: pointer; outline: none; } .bnk-select:focus { border-color: var(--t3); } .bnk-count { margin: 0 4px 14px; font-size: .88rem; font-weight: 600; color: var(--bnk-muted); } .bnk-count b { color: var(--bnk-ink); } /* ============================================================ Карточка задания ============================================================ */ .bank-page .task-card { --tc: var(--t1); --tc-soft: var(--t1-soft); /* Плотность — как у «Решу ЕГЭ»: на экран компьютера должно влезать два-три задания, а не одно. Поля, шапка, поле ответа и действия ужаты; на телефоне свои размеры — в блоке @media ниже. */ position: relative; padding: 13px 18px 11px 18px; margin-bottom: 10px; border-radius: 16px; background: var(--bnk-card); border: 1px solid var(--bnk-line); box-shadow: var(--bnk-shadow); transition: box-shadow .25s, border-color .25s, transform .25s; animation: bnkIn .45s var(--bnk-ease) both; } .bank-page .task-card[data-tier="2"] { --tc: var(--t2); --tc-soft: var(--t2-soft); } .bank-page .task-card[data-tier="3"] { --tc: var(--t3); --tc-soft: var(--t3-soft); } .bank-page .task-card:hover { box-shadow: var(--bnk-shadow-lg); } .bank-page .task-card.is-correct { border-color: color-mix(in srgb, var(--ok) 45%, var(--bnk-line)); } /* Класс .task-card-header занят аккордеоном олимпиадных задач в общем style.css: оттуда приезжали отступы, курсор-«рука», запрет выделения текста и подсветка при наведении. Здесь шапка — не кнопка. */ .bank-page .task-card-header { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 7px; padding: 0; cursor: default; user-select: auto; -webkit-user-select: auto; } .bank-page .task-card-header:hover { background: transparent; } .bnk-card__id { display: flex; align-items: center; gap: 10px; min-width: 0; } .bnk-card__num { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 9px 4px 8px; border-radius: 9px; background: var(--tc-soft); color: var(--tc); font: 900 1rem/1 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; } .bank-page .task-card[data-tier="1"] .bnk-card__num { color: #0283C2; } .bank-page .task-card[data-tier="2"] .bnk-card__num { color: #6D3FE0; } .bank-page .task-card[data-tier="3"] .bnk-card__num { color: #B86E00; } .bnk-card__num small { font-size: .7rem; font-weight: 800; opacity: .7; } /* Тема и баллы — одной строкой: «Свойства углеводородов · 1 балл» */ .bnk-card__topic { min-width: 0; font-size: .86rem; font-weight: 700; line-height: 1.3; color: var(--bnk-ink); } .bnk-card__topic span { display: inline; margin-left: 8px; font-size: .74rem; font-weight: 600; color: var(--bnk-muted); } .bnk-card__side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bnk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 800 .66rem/1 'Inter', system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; } .bnk-pill--fipi { background: #FFF1DB; color: #B86E00; } .bnk-pill--own { background: #E3F3FE; color: #0369A1; } /* Сборники заданий в банке ОГЭ: «Решу ОГЭ», «Изи ОГЭ» */ .bnk-pill--src { background: #EEF1F6; color: var(--bnk-ink-2); } .bnk-pill--ok { background: var(--ok-soft); color: #047857; } .bnk-pill--bad { background: var(--bad-soft); color: #BE123C; } .bnk-card__link { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--bnk-muted); transition: background .2s, color .2s; } .bnk-card__link:hover { background: var(--bnk-bg); color: var(--bnk-ink); } .bank-page .task-content { color: #3A4658; margin-bottom: 10px; } /* ============================================================ Типографика условия Кегль условия задавали три файла сразу: страница ЕГЭ ставила 1,15rem, приложение ОГЭ — 15px, а телефон правил обоих. Один и тот же банк выглядел по-разному, и на компьютере в карточку ЕГЭ помещалось одно задание на экран. !important здесь не украшение: разметка заданий приходит из ФИПИ и «Решу ОГЭ» со своими размерами шрифта в атрибуте style, и без него условие рисуется тем кеглем, который прислал источник. Элементы, у которых такой размер задан, из правила исключены намеренно — так подпись «Источник: …» остаётся мелкой, а не встаёт вровень с условием. ============================================================ */ .bank-page .task-content, .bank-page .task-content p, .bank-page .task-content div:not([style*="font-size"]):not(.col_name):not(.opts-title), .bank-page .task-content li, .bank-page .task-content td, .bank-page .task-content span:not([style*="font-size"]) { font-size: .95rem !important; line-height: 1.45 !important; } /* Заголовки столбцов («ФОРМУЛЫ РЕАГЕНТОВ») и списков вариантов — мельче условия и с плотной строкой. Из правила выше они исключены намеренно: под общий размер заголовок вставал вровень с текстом и переносился на вторую строку. */ .bank-page .task-content .col_name, .bank-page .task-content .opts-title { font-size: .84rem !important; line-height: 1.25 !important; } /* Длина строки. Карте номеров нужны все 1180 px, условию — нет: на широком экране строка доходила до ста двадцати знаков. Ленту заданий вместе с её панелью сужаем и ставим по центру. */ .bank-page .bnk-feed { max-width: 880px; margin-inline: auto; } .bank-page .task-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 9px; border-top: 1px dashed var(--bnk-line); } .bank-page .answer-row { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; } /* min-width: 0 обязателен: у есть встроенная ширина около двадцати символов, и во flex-строке он не сжимался уже неё — на телефоне кнопку «Проверить» выталкивало за край карточки. */ .bank-page .answer-input { width: 180px; min-width: 0; max-width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--bnk-line); background: var(--bnk-bg); font: 800 1rem 'Inter', system-ui, sans-serif; letter-spacing: .06em; color: var(--bnk-ink); outline: none; transition: border-color .2s, background .2s, box-shadow .2s; } .bank-page .answer-input::placeholder { font-weight: 600; letter-spacing: 0; color: #9AA6B6; } .bank-page .answer-input:focus { background: #fff; border-color: var(--t3); box-shadow: 0 0 0 4px rgba(245, 166, 35, .15); } .bank-page .btn-check { position: relative; flex: 0 0 auto; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #FFB938 0%, #F5A623 45%, #F08C00 100%); color: #fff; font: 800 .88rem 'Inter', system-ui, sans-serif; box-shadow: 0 8px 18px -8px rgba(240, 140, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35); cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; } .bank-page .btn-check:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(240, 140, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .35); } .bank-page .btn-check:active { transform: translateY(1px) scale(.98); } .bank-page .btn-check.correct { background: linear-gradient(135deg, #34D399, #10B981); box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .9); } .bank-page .btn-check.incorrect { background: linear-gradient(135deg, #FB7185, #F43F5E); box-shadow: 0 8px 18px -8px rgba(244, 63, 94, .9); } .bank-page .task-actions-row { display: flex; align-items: center; gap: 2px; } /* «Решение · Теория» — ссылками, как у «Решу ЕГЭ», а не кнопками в рамке: главное действие в карточке — ответ, а не они. */ .bank-page .task-action-btn { appearance: none; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--bnk-muted); font: 700 .84rem 'Inter', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .bank-page .task-action-btn svg { width: 16px; height: 16px; } .bank-page .task-action-btn:hover { background: var(--bnk-bg); color: var(--bnk-ink); } .bank-page .task-action-btn.active-solution { background: var(--bnk-ink); border-color: var(--bnk-ink); color: #fff; } /* После ошибки кнопка решения мягко зовёт к себе */ .bank-page .task-action-btn.is-nudge { animation: bnkNudge 1.2s ease-in-out 2; border-color: var(--t3); color: #B86E00; } .bank-page .part2-note { flex: 1 1 280px; padding: 12px 14px; border-radius: 14px; background: var(--t3-soft); color: #7A4A00; font-size: .88rem; line-height: 1.45; } .bank-page .inline-solution { display: none; margin-top: 10px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(180deg, #F8FAFD, #F3F6FB); border: 1px solid var(--bnk-line); } .bank-page .inline-solution.visible { display: block; animation: bnkIn .35s var(--bnk-ease) both; } .bnk-sol__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 800 1rem 'Inter', system-ui, sans-serif; color: var(--bnk-ink); } .bnk-sol__answer { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border-radius: 12px; background: var(--ok-soft); color: #047857; font-weight: 800; font-size: 1rem; } .bank-page .anon-hint { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #FFF8E6; border: 1px solid #FCE3A6; color: #7A4A00; font-size: .84rem; line-height: 1.5; } .bank-page .anon-hint a, .bank-page .anon-hint .bnk-linkbtn { color: #B45309; font-weight: 800; } .bank-page .bnk-linkbtn { appearance: none; padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; } .bank-page .load-more-btn { appearance: none; height: 50px; padding: 0 28px; border: 0; border-radius: 16px; background: var(--bnk-ink); color: #fff; font: 800 .95rem 'Inter', system-ui, sans-serif; box-shadow: 0 12px 24px -12px rgba(19, 35, 61, .7); cursor: pointer; transition: transform .2s; } .bank-page .load-more-btn:hover { transform: translateY(-2px); } .bnk-loading { display: grid; place-items: center; gap: 12px; padding: 48px 0; color: var(--bnk-muted); font-weight: 600; } .bnk-loading::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bnk-line); border-top-color: var(--t3); animation: bnkSpin .8s linear infinite; } .bnk-empty { padding: 48px 16px; text-align: center; color: var(--bnk-muted); font-weight: 600; } .bnk-empty b { display: block; font-size: 2rem; margin-bottom: 6px; } /* ============================================================ Отклик на ответ: конфетти, всплывающий балл, тряска ============================================================ */ .bnk-burst { position: fixed; z-index: 10000; width: 0; height: 0; pointer-events: none; } .bnk-burst i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--c, #F5A623); opacity: 0; animation: bnkBurst .9s cubic-bezier(.15, .7, .3, 1) forwards; } .bnk-toast { position: fixed; z-index: 10001; pointer-events: none; padding: 6px 12px; border-radius: 999px; background: #0F1E33; color: #fff; font: 800 .86rem 'Inter', system-ui, sans-serif; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(15, 30, 51, .8); transform: translate(-50%, 0); animation: bnkToast 1.4s var(--bnk-ease) forwards; } .bnk-toast b { color: #FFC761; } .bank-page .task-card.is-shake .task-footer { animation: bnkShake .42s ease-in-out; } @keyframes bnkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes bnkSpin { to { transform: rotate(360deg); } } @keyframes bnkBurst { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.6); } } @keyframes bnkToast { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.9); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 70% { opacity: 1; transform: translate(-50%, -18px); } 100% { opacity: 0; transform: translate(-50%, -34px); } } @keyframes bnkShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } } @keyframes bnkNudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); } 50% { box-shadow: 0 0 0 5px rgba(245, 166, 35, .25); } } @media (prefers-reduced-motion: reduce) { .bnk-tile, .bank-page .task-card, .bnk-tile__bar i, .bnk-tile__star { transition: none; animation: none; } .bnk-burst, .bnk-toast { display: none; } .bank-page .task-card.is-shake .task-footer, .bank-page .task-action-btn.is-nudge { animation: none; } } /* ============================================================ Телефон ============================================================ */ @media (max-width: 720px) { .bnk-map { margin-bottom: 18px; } .bnk-map__head { margin-bottom: 10px; gap: 10px; } .bnk-map__title { font-size: 1.2rem; } .bnk-map__sub { display: none; } .bnk-seg { width: 100%; } .bnk-seg button { flex: 1; padding: 8px 6px; } .bnk-seg button small { display: none; } /* Карта на телефоне — сетка номеров, как ряд «1 2 3 … 18» у «Решу ЕГЭ»: две колонки крупных плиток давали около 2500 px прокрутки до первого задания. Квадратик хранит главное — номер, цвет уровня, полоску прогресса и звезду. Тема номера появляется в панели после выбора, а в разметке остаётся для робота и экранного диктора. */ .bnk-part { margin-top: 12px; } .bnk-part__label { margin-bottom: 6px; font-size: .68rem; } .bnk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .bnk-tile { min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 12px; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(19, 35, 61, .06); } .bnk-tile::before { height: 3px; } .bnk-tile__top { justify-content: center; } .bnk-tile__num { font-size: 1.25rem; letter-spacing: -0.03em; } .bnk-tile__pts, .bnk-tile__title, .bnk-tile__meta, .bnk-tile__self { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } .bnk-tile__foot { position: absolute; left: 7px; right: 7px; bottom: 7px; margin: 0; } .bnk-tile__bar { height: 3px; } .bnk-tile__star { top: 3px; right: 3px; bottom: auto; width: 15px; height: 15px; font-size: 8px; } .bnk-tile:hover, .bnk-tile:focus-visible { transform: none; } .bnk-legend { gap: 4px 12px; margin-top: 10px; font-size: .7rem; } /* На телефоне панель не липнет: вместе с верхним меню сайта два липких слоя съедали четверть экрана поверх заданий. */ .bnk-bar { position: static; gap: 6px; padding: 6px; margin-bottom: 10px; border-radius: 14px; box-shadow: var(--bnk-shadow); } .bnk-current { max-width: 100%; flex: 1 1 100%; min-height: 36px; font-size: .8rem; } /* «Все номера, вперемешку» на телефоне — лишняя строка */ .bnk-current:not([data-tier="1"]):not([data-tier="2"]):not([data-tier="3"]) { display: none; } .bnk-search { flex: 1 1 100%; } .bnk-search input { height: 38px; font-size: .88rem; } .bnk-bar .bnk-seg { flex: 1 1 auto; width: auto; } .bnk-bar .bnk-seg button { padding: 7px 8px; font-size: .76rem; } .bnk-select { flex: 0 0 auto; height: 36px; font-size: .78rem; } .bnk-count { margin-bottom: 8px; font-size: .8rem; } /* Карточка — как у «Решу ЕГЭ»: шапка в одну строку, условие почти без полей, «Решение · Теория» ссылками, а не крупными кнопками. Поле ответа и «Проверить» остаются полноразмерными — это главное действие, по ним попадают пальцем. */ .bank-page .task-card { padding: 10px 11px; margin-bottom: 8px; border-radius: 14px; box-shadow: none; animation: none; } .bank-page .task-card-header { margin-bottom: 7px; gap: 6px; flex-wrap: nowrap; } .bank-page .task-content, .bank-page .task-content p, .bank-page .task-content div:not([style*="font-size"]):not(.col_name):not(.opts-title), .bank-page .task-content li, .bank-page .task-content td, .bank-page .task-content span:not([style*="font-size"]) { font-size: .9rem !important; line-height: 1.42 !important; } .bank-page .task-content .col_name, .bank-page .task-content .opts-title { font-size: .78rem !important; line-height: 1.2 !important; } .bank-page .bnk-feed { max-width: none; } .bnk-card__id { flex: 1 1 auto; min-width: 0; gap: 7px; } .bnk-card__num { padding: 3px 7px; border-radius: 8px; font-size: .95rem; } .bnk-card__topic { min-width: 0; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bnk-card__topic span { display: none; } .bnk-card__side { flex: 0 0 auto; gap: 4px; flex-wrap: nowrap; } .bnk-pill { padding: 3px 7px; font-size: .6rem; } .bnk-card__link { width: 26px; height: 26px; } .bank-page .task-content { margin-bottom: 8px; } .bank-page .task-footer { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; } .bank-page .answer-row { width: 100%; gap: 8px; } .bank-page .answer-input { flex: 1 1 auto; width: auto; height: 42px; padding: 0 12px; border-radius: 11px; border-width: 1.5px; font-size: 1rem; } .bank-page .btn-check { height: 42px; padding: 0 14px; border-radius: 11px; font-size: .88rem; } .bank-page .task-actions-row { justify-content: flex-start; gap: 2px; } .bank-page .task-action-btn { flex: 0 0 auto; height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--bnk-muted); font-size: .8rem; } .bank-page .task-action-btn svg { width: 15px; height: 15px; } .bank-page .task-action-btn.active-solution { background: var(--bnk-ink); color: #fff; } /* «Избранное» и «Портфель» в банке ОГЭ — одними значками: четыре подписи в строку на телефоне не помещаются. */ .bank-page .task-action-btn.bnk-act-icon span { display: none; } .bank-page .task-actions-row .bnk-act-push { margin-left: auto; } /* Подвал на телефоне — колонка, и flex-basis из настольного правила задавал подсказке не ширину, а высоту: под двумя строками текста оставалось ещё двести пустых пикселей. */ .bank-page .part2-note { flex: 0 0 auto; padding: 8px 10px; border-radius: 10px; font-size: .8rem; } .bank-page .inline-solution { margin-top: 8px; padding: 12px; border-radius: 12px; } .bnk-sol__title { margin-bottom: 8px; font-size: .92rem; } .bank-page .anon-hint { margin-top: 8px; padding: 8px 10px; font-size: .78rem; } } /* Условие задания — не статья. Общий стиль сайта даёт каждому абзацу отступ в 1rem, а разметка ФИПИ режет условие на много коротких абзацев: между «А) …» и «Б) …» получались пустые полосы. */ .bank-page .task-content p { margin: 0 0 .45em; } .bank-page .task-content p:last-child { margin-bottom: 0; } .bank-page .task-content .opts-title, .bank-page .task-content .col_name { margin-bottom: 3px; } .bank-page .task-content ol.opts { margin: 4px 0; } .bank-page .task-content ol.opts > li { margin-bottom: 0; } /* Выключка. Общий стиль сайта выравнивает абзацы по ширине с переносами — в конспекте это уместно, а в короткой формулировке задания даёт «дыры» между словами и рубит слова дефисами («соответствую-щую»). В банке ОГЭ так было со всеми условиями. */ .bank-page .task-content, .bank-page .task-content p, .bank-page .task-content li, .bank-page .task-content div, .bank-page .inline-solution, .bank-page .inline-solution p, .bank-page .inline-solution li { text-align: left; hyphens: manual; -webkit-hyphens: manual; } /* Лишние переводы строки убирает разбор разметки, а не CSS: и br + br, и br:last-child смотрят на соседние элементы и текста между ними не видят. Первый считал соседями все переводы строки в списке «1) Li
2) C
3) N» и склеивал его в одну строку, второй прятал перевод перед последним абзацем текста — «5) Si» и «Из указанных в ряду…» оказывались на одной строке. */ /* Два столбца задания на соответствие */ .bank-page .task-content .wrap_flex_table { margin: 9px 0; } .bank-page .task-content .wrap_flex_table .col_content p, .bank-page .task-content .wrap_flex_table .col_content div { margin-bottom: 2px; } /* Бланк для ответа «А Б В Г». Класса .ans-table разметка ФИПИ не ставит ни разу — таблицу опознаём по инлайновому border, как и остальные правила для неё в task-view.css. Прежние правила по классу не срабатывали, и пустой бланк занимал 76 px из 487 px условия. */ /* Таблицы с данными — ICE-таблицы двадцать третьего номера. В первом столбце подпись строки («Равновесная концентрация, моль/л»), дальше числа. На телефоне подпись съедала почти всю ширину, и «SO2» ломалось на «SO» и «2», а «0,4» — на «0,» и «4». Числам переносы не нужны: пусть таблица лучше прокручивается вбок. Только с рамкой! Разметку в две колонки («СХЕМА РЕАКЦИИ» слева, «ИЗМЕНЕНИЕ СТЕПЕНИ ОКИСЛЕНИЯ» справа) источник тоже кладёт в , но без рамки и с ячейками по половине ширины. Запрет переносов растягивал правую ячейку, и левая сжималась до одной буквы в строке — условие рассыпалось в столбик. Таких заданий в базе 1139. */ .bank-page .task-content table[border], .bank-page .task-content table[style*="border:1px"] { display: block; width: fit-content; max-width: 100%; overflow-x: auto; } .bank-page .task-content table[border] td + td, .bank-page .task-content table[border] th + th { white-space: nowrap; } .bank-page .task-content table.ans-table, .bank-page .task-content table[style*="border:1px"] { margin: 8px 0 2px; } .bank-page .task-content table.ans-table th, .bank-page .task-content table.ans-table td, .bank-page .task-content table[style*="border:1px"] th, .bank-page .task-content table[style*="border:1px"] td { padding: 4px 16px; } .bank-page .task-content table.ans-table td, .bank-page .task-content table[style*="border:1px"] td { height: 26px; } @media (max-width: 720px) { .bank-page .task-content p { margin-bottom: .4em; } .bank-page .task-content ol.opts { margin: 4px 0; } .bank-page .task-content ol.opts > li { margin-bottom: 0; } .bank-page .task-content .wrap_flex_table { margin: 6px 0; } .bank-page .task-content .wrap_flex_table .col_content p, .bank-page .task-content .wrap_flex_table .col_content div { margin-bottom: 1px; } } /* Таблица «А Б В Г» — бланк для бумажного ответа. В банке ответ вводят в поле ниже, поэтому на телефоне она нужна лишь как подсказка порядка букв и не должна занимать пол-экрана. */ @media (max-width: 720px) { .bank-page .task-content table.ans-table, .bank-page .task-content table[style*="border:1px"] { margin: 6px 0 0; } .bank-page .task-content table.ans-table th, .bank-page .task-content table.ans-table td, .bank-page .task-content table[style*="border:1px"] th, .bank-page .task-content table[style*="border:1px"] td { padding: 3px 12px; } .bank-page .task-content table.ans-table td, .bank-page .task-content table[style*="border:1px"] td { height: 22px; } } /* ============================================================ Задания по одному — с сеткой номеров, как на stepenin.ru Номер КИМ — это 40–60 заданий. Лентой их пролистывали, теряли место и не видели, сколько осталось. Теперь на экране одно задание, а под ним сетка всех заданий номера: решённые зелёные, с ошибкой — красные, открытое сейчас подсвечено цветом уровня. Любое задание открывается одним нажатием. Общее для банка ЕГЭ и приложения ОГЭ: разметку каждый рисует сам, а вид — отсюда. ============================================================ */ /* Цвет уровня для сетки — тот же, что у карточки задания. */ .bnk-nums-wrap[data-tier="1"] { --tc: var(--t1); --tc-soft: var(--t1-soft); --tc-glow: var(--t1-glow); } .bnk-nums-wrap[data-tier="2"] { --tc: var(--t2); --tc-soft: var(--t2-soft); --tc-glow: var(--t2-glow); } .bnk-nums-wrap[data-tier="3"] { --tc: var(--t3); --tc-soft: var(--t3-soft); --tc-glow: var(--t3-glow); } .bnk-step[hidden], .bnk-pager[hidden], .bnk-nums-wrap[hidden], .bnk-seg[hidden] { display: none !important; } /* — Где я: «Задание 5 из 42» и счёт — */ .bnk-step { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin: 2px 0 12px; } .bnk-step__where { font-size: 1rem; font-weight: 800; color: var(--bnk-ink); letter-spacing: -.01em; } .bnk-step__where span { color: var(--bnk-muted); font-weight: 600; } .bnk-step__stat { display: flex; flex-wrap: wrap; gap: 6px; } .bnk-step__stat span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; } .bnk-step__stat b { font-weight: 900; } .bnk-step__stat .ok { background: var(--ok-soft); color: #047857; } .bnk-step__stat .bad { background: var(--bad-soft); color: #BE123C; } .bnk-step__stat .left { background: #EAEEF4; color: var(--bnk-ink-2); } /* Полоска прогресса: зелёное — верно, красное — с ошибкой. */ .bnk-step__bar { flex: 1 1 100%; display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: #E4E9F1; } .bnk-step__bar i { display: block; height: 100%; transition: width .4s var(--bnk-ease); } .bnk-step__bar .ok { background: var(--ok); } .bnk-step__bar .bad { background: var(--bad); } /* — Предыдущее / Следующее — */ .bnk-pager { display: flex; gap: 10px; margin: 4px 0 18px; } .bnk-pager button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border-radius: 14px; cursor: pointer; font: 800 .9rem/1 'Inter', system-ui, sans-serif; letter-spacing: -.01em; color: var(--bnk-ink); background: var(--bnk-card); border: 1px solid var(--bnk-line); box-shadow: var(--bnk-shadow); transition: transform .18s var(--bnk-ease), box-shadow .18s, background .18s, color .18s, opacity .18s; } .bnk-pager button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; } .bnk-pager button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--bnk-shadow-lg); } .bnk-pager .is-next { background: var(--bnk-ink); border-color: var(--bnk-ink); color: #fff; } /* Ответ дан — «Следующее» становится главной кнопкой экрана. */ .bnk-pager .is-next.is-ready { background: linear-gradient(135deg, #F7B84B, #E8850A); border-color: transparent; color: #16191F; box-shadow: 0 12px 24px -12px rgba(232, 133, 10, .9); } .bnk-pager button:disabled { opacity: .4; cursor: default; box-shadow: none; } /* — Сетка номеров — */ .bnk-nums-wrap { margin: 0 0 8px; padding: 18px 18px 16px; border-radius: var(--bnk-radius); background: var(--bnk-card); border: 1px solid var(--bnk-line); box-shadow: var(--bnk-shadow); } .bnk-nums-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .bnk-nums-head b { font-size: .98rem; font-weight: 800; color: var(--bnk-ink); letter-spacing: -.01em; } .bnk-nums-head span { font-size: .78rem; color: var(--bnk-muted); font-weight: 600; } .bnk-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 9px; } .bnk-nums__cell { position: relative; aspect-ratio: 1; min-height: 44px; border-radius: 14px; cursor: pointer; display: grid; place-items: center; font: 700 .95rem/1 'Inter', system-ui, sans-serif; color: var(--bnk-ink); background: #fff; border: 1px solid var(--bnk-line); box-shadow: 0 1px 2px rgba(19, 35, 61, .05), 0 6px 14px -10px rgba(19, 35, 61, .3); transition: transform .16s var(--bnk-ease), box-shadow .16s, background .16s, border-color .16s, color .16s; } .bnk-nums__cell:hover { transform: translateY(-2px); box-shadow: var(--bnk-shadow-lg); } .bnk-nums__cell:focus-visible { outline: 2px solid var(--tc, var(--t1)); outline-offset: 2px; } .bnk-nums__cell.is-ok { background: var(--ok-soft); border-color: #A7E8CF; color: #047857; } .bnk-nums__cell.is-bad { background: var(--bad-soft); border-color: #FBC3CE; color: #BE123C; } /* Значок в углу: результат видно не только по цвету. */ .bnk-nums__cell.is-ok::after, .bnk-nums__cell.is-bad::after { position: absolute; top: 4px; right: 6px; font-size: .56rem; font-weight: 900; line-height: 1; } .bnk-nums__cell.is-ok::after { content: '✓'; } .bnk-nums__cell.is-bad::after { content: '✕'; } .bnk-nums__cell.is-current { background: var(--tc-soft, var(--t1-soft)); color: var(--tc, var(--t1)); border-color: transparent; box-shadow: 0 0 0 2px var(--tc, var(--t1)), 0 10px 20px -10px var(--tc-glow, var(--t1-glow)); transform: scale(1.06); z-index: 1; } .bnk-nums__cell.is-current.is-ok { background: var(--ok-soft); color: #047857; box-shadow: 0 0 0 2px var(--ok), 0 10px 20px -10px rgba(16, 185, 129, .5); } .bnk-nums__cell.is-current.is-bad { background: var(--bad-soft); color: #BE123C; box-shadow: 0 0 0 2px var(--bad), 0 10px 20px -10px rgba(244, 63, 94, .5); } .bnk-nums-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .76rem; font-weight: 600; color: var(--bnk-muted); } .bnk-nums-legend span { display: inline-flex; align-items: center; gap: 7px; } .bnk-nums-legend i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; } .bnk-nums-legend .ok { background: var(--ok-soft); box-shadow: inset 0 0 0 1.5px var(--ok); } .bnk-nums-legend .bad { background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px var(--bad); } .bnk-nums-legend .cur { background: var(--tc-soft, var(--t1-soft)); box-shadow: inset 0 0 0 1.5px var(--tc, var(--t1)); } @media (max-width: 720px) { .bnk-nums-wrap { padding: 14px 12px 12px; border-radius: 16px; } .bnk-nums { grid-template-columns: repeat(6, 1fr); gap: 8px; } .bnk-nums__cell { border-radius: 12px; font-size: .9rem; } .bnk-pager button { padding: 12px 10px; font-size: .86rem; } .bnk-step__where { font-size: .95rem; } } @media (prefers-reduced-motion: reduce) { .bnk-nums__cell, .bnk-pager button, .bnk-step__bar i { transition: none; } .bnk-nums__cell.is-current { transform: none; } } /* ============================================================ Номер выбран — на экране только задания До заданий шла почти целая страница: обложка, карта экзамена из 28 плиток и легенда. Выбрав номер, человек каждый раз пролистывал всё это заново. Теперь, когда номер выбран, обложка и карта скрыты, а сверху — строка «Все номера · №1 Тема»: вернуться к выбору можно ею или из меню сайта. ============================================================ */ body.bnk-solving .bank-hero, body.bnk-solving .bnk-map { display: none !important; } /* Номер уже написан в строке сверху — в панели фильтров он лишний. */ body.bnk-solving .bnk-current { display: none; } .bnk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; } .bnk-top[hidden] { display: none !important; } .bnk-top__back { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 8px 13px; border-radius: 12px; text-decoration: none; background: var(--bnk-card); border: 1px solid var(--bnk-line); box-shadow: var(--bnk-shadow); font-size: .84rem; font-weight: 800; color: var(--bnk-ink); transition: transform .18s var(--bnk-ease), box-shadow .18s; } .bnk-top__back:hover { transform: translateY(-1px); box-shadow: var(--bnk-shadow-lg); } .bnk-top__back svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; } .bnk-top__where { min-width: 0; } .bnk-top__title { margin: 0; font-size: 1.04rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--bnk-ink); } .bnk-top__title b { color: var(--tc, var(--t1)); font-weight: 900; } .bnk-top__meta { margin: 2px 0 0; font-size: .78rem; font-weight: 600; color: var(--bnk-muted); } @media (max-width: 720px) { .bnk-top { gap: 8px 10px; margin-bottom: 10px; } .bnk-top__title { font-size: .96rem; } .bnk-top__back { padding: 7px 11px; font-size: .8rem; } }