/* SmartDZ — публичный каталог тестов («Банк заданий», SDZ_Router extra page template). Один список на странице, фильтрация и метка «пройден» полностью на клиенте (frontend/js/catalog.js, localStorage). Переменные --sdz-color-*/--sdz-radius-* из assets/css/tokens.css. */ /* Прибиваем подвал к низу экрана, даже если тестов мало и страница короче вьюпорта — .sdz-catalog-page ставится на и на «Банк заданий» (page template), и на страницах рубрик предмета/класса (SDZ_Router). */ body.sdz-catalog-page { display: flex; min-height: 100vh; flex-direction: column; } .sdz-catalog-page__main { flex: 1 0 auto; padding: 64px 0 96px; } .sdz-catalog { display: grid; gap: 16px; } /* ---------------- Шапка раздела ---------------- */ .sdz-catalog-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; row-gap: 12px; } .sdz-catalog-head__text { display: grid; flex: 1 1 460px; min-width: 0; gap: 10px; } .sdz-catalog-head__title { margin: 0; color: var(--sdz-color-heading, #102838); font-size: clamp(24px, 5vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; } .sdz-catalog-head__lead { max-width: 72ch; color: var(--sdz-color-text-muted, #577086); font-size: 15px; line-height: 1.6; } .sdz-catalog-totals { display: flex; flex: none; gap: 10px; } .sdz-catalog-total { display: grid; min-width: 116px; gap: 3px; padding: 13px 16px; background: var(--sdz-color-surface, #fff); border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: var(--sdz-radius-md, 12px); } .sdz-catalog-total__value { color: var(--sdz-color-primary, #2d6a9f); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .sdz-catalog-total__label { color: var(--sdz-color-text-muted, #577086); font-size: 11.5px; font-weight: 500; line-height: 1.35; } /* ---------------- Панель фильтров ---------------- */ .sdz-catalog-filters { display: grid; gap: 12px; padding: 16px 18px; background: var(--sdz-color-surface, #fff); border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: var(--sdz-radius-md, 12px); } .sdz-catalog-filters__row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 9px; gap: 10px; } .sdz-catalog-filters__label { flex: none; width: 74px; color: var(--sdz-color-text-muted, #577086); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; line-height: 1.3; text-transform: uppercase; } .sdz-catalog-filters__row + .sdz-catalog-filters__row { padding-top: 12px; border-top: 1px solid var(--sdz-color-surface-muted, #edf3f7); } .sdz-catalog-chip { display: inline-flex; align-items: center; height: 32px; gap: 7px; padding: 0 12px; background: var(--sdz-color-surface, #fff); border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: 999px; color: var(--sdz-color-text, #162b3b); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } .sdz-catalog-chip:hover { background: var(--sdz-color-surface-muted, #edf3f7); border-color: var(--sdz-color-text-muted, #577086); } .sdz-catalog-chip[aria-current="true"] { border-color: var(--sdz-color-primary, #2d6a9f); background: var(--sdz-color-primary-soft, #e8f1f8); color: var(--sdz-color-primary-hover, #235780); font-weight: 700; } .sdz-catalog-chip--grade { padding: 0 14px; } .sdz-catalog-chip__count { flex: none; padding: 1px 7px; background: var(--sdz-color-background, #f4f7fa); border-radius: 999px; color: var(--sdz-color-text-muted, #577086); font-size: 10.5px; font-weight: 700; line-height: 1.5; } .sdz-catalog-chip[aria-current="true"] .sdz-catalog-chip__count { background: var(--sdz-color-surface, #fff); color: var(--sdz-color-primary-hover, #235780); } .sdz-catalog-select { display: none; } .sdz-catalog-seg { display: inline-flex; padding: 3px; background: var(--sdz-color-surface-muted, #edf3f7); border-radius: 9px; gap: 3px; } .sdz-catalog-seg__btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; background: transparent; border-radius: 7px; color: var(--sdz-color-text-muted, #577086); font: 600 12.5px/1 inherit; white-space: nowrap; cursor: pointer; } .sdz-catalog-seg__btn[aria-selected="true"] { background: var(--sdz-color-surface, #fff); color: var(--sdz-color-heading, #102838); font-weight: 700; box-shadow: 0 1px 2px var(--sdz-color-shadow, rgba(16, 40, 56, 0.12)); } .sdz-catalog-search { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; height: 36px; gap: 8px; padding: 0 12px; border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: 9px; } .sdz-catalog-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--sdz-color-text, #162b3b); font-size: 13px; font-weight: 500; outline: none; } .sdz-catalog-sort, .sdz-catalog-reset { display: inline-flex; flex: none; align-items: center; height: 36px; gap: 8px; padding: 0 13px; background: var(--sdz-color-surface, #fff); border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: 9px; color: var(--sdz-color-text, #162b3b); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } .sdz-catalog-sort:hover, .sdz-catalog-reset:hover { background: var(--sdz-color-surface-muted, #edf3f7); } .sdz-catalog-reset[hidden] { display: none; } /* ---------------- Результаты ---------------- */ .sdz-catalog-found { display: flex; align-items: center; gap: 9px; } .sdz-catalog-found__title { margin: 0; color: var(--sdz-color-heading, #102838); font-size: 13.5px; font-weight: 700; } .sdz-catalog-found__done { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--sdz-color-success-soft, #e5f3ec); border-radius: 999px; color: var(--sdz-color-success, #1f6f4f); font-size: 12px; font-weight: 600; } .sdz-catalog-found__done[hidden] { display: none; } .sdz-catalog-badge__mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: currentColor; font-size: 9px; } .sdz-catalog-found__done .sdz-catalog-badge__mark { color: var(--sdz-color-success, #1f6f4f); } /* ---------------- Сетка карточек ---------------- */ .sdz-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sdz-catalog-card { display: flex; flex-direction: column; overflow: hidden; background: var(--sdz-color-surface, #fff); border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: var(--sdz-radius-md, 12px); transition: border-color 0.2s, box-shadow 0.2s; } .sdz-catalog-card:hover { border-color: var(--sdz-color-primary, #2d6a9f); box-shadow: var(--sdz-shadow-card, 0 14px 40px rgba(16, 40, 56, 0.12)); } .sdz-catalog-card--done { border-color: var(--sdz-color-success, #1f6f4f); } .sdz-catalog-card--part { border-color: var(--sdz-color-warning, #8a6419); } .sdz-catalog-card__body { display: grid; gap: 9px; padding: 15px 16px; } .sdz-catalog-card__badges { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; gap: 7px; } .sdz-catalog-badge { flex: none; padding: 2px 8px; background: var(--sdz-color-surface-muted, #edf3f7); border-radius: 6px; color: var(--sdz-color-text, #162b3b); font-size: 10.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .sdz-catalog-badge--progress { background: var(--sdz-color-surface-muted, #edf3f7); color: var(--sdz-color-text-muted, #577086); } .sdz-catalog-badge--progress[hidden] { display: none; } .sdz-catalog-badge--progress.is-done { background: var(--sdz-color-success-soft, #e5f3ec); color: var(--sdz-color-success, #1f6f4f); } .sdz-catalog-badge--progress.is-part { background: var(--sdz-color-warning-soft, #fff4d7); color: var(--sdz-color-warning, #8a6419); } .sdz-catalog-card__title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; } .sdz-catalog-card__title a { color: inherit; text-decoration: none; } .sdz-catalog-card__title a:hover { color: var(--sdz-color-primary, #2d6a9f); } .sdz-catalog-card__lead { margin: 0; color: var(--sdz-color-text-muted, #577086); font-size: 12.5px; line-height: 1.55; } .sdz-catalog-card__foot { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--sdz-color-surface-muted, #edf3f7); border-top: 1px solid var(--sdz-color-border, #ccd9e4); } .sdz-catalog-stat { color: var(--sdz-color-text-muted, #577086); font-size: 11.5px; font-weight: 500; white-space: nowrap; } .sdz-catalog-card__bar { display: block; flex: 1 1 auto; height: 6px; overflow: hidden; background: var(--sdz-color-surface, #fff); border-radius: 4px; } .sdz-catalog-card__bar[hidden] { display: none; } .sdz-catalog-card__fill { display: block; height: 6px; background: var(--sdz-color-warning, #8a6419); border-radius: 4px; } .sdz-catalog-card__cta { display: inline-flex; flex: none; align-items: center; height: 32px; margin-left: auto; padding: 0 13px; background: var(--sdz-color-primary, #2d6a9f); border-radius: 8px; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; } /* .sdz-public-page a (base.css) — два простых селектора той же специфичности что и .sdz-public-page .sdz-btn--primary — перебивает белый цвет текста своим синим, если задать color только на одиночном классе. Тот же приём, что и у .sdz-btn--primary в components.css. */ .sdz-catalog-card__cta, .sdz-public-page .sdz-catalog-card__cta { color: #fff; } .sdz-catalog-card__cta:hover { background: var(--sdz-color-primary-hover, #235780); } /* ---------------- Пусто ---------------- */ .sdz-catalog-empty { display: grid; justify-items: center; gap: 10px; padding: 44px 20px; background: var(--sdz-color-surface, #fff); border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: var(--sdz-radius-md, 12px); text-align: center; } .sdz-catalog-empty[hidden] { display: none; } .sdz-catalog-empty h2 { margin: 0; font-size: 14.5px; font-weight: 700; } .sdz-catalog-empty p { max-width: 40ch; margin: 0; color: var(--sdz-color-text-muted, #577086); font-size: 12.5px; line-height: 1.55; } /* ---------------- Адаптация ---------------- */ @media (max-width: 1000px) { .sdz-catalog-grid { grid-template-columns: minmax(0, 1fr); } .sdz-catalog-totals { width: 100%; } .sdz-catalog-total { flex: 1; min-width: 0; } } @media (max-width: 700px) { .sdz-catalog-head__title { font-size: 22px; } .sdz-catalog-filters__row--chips { display: none; } .sdz-catalog-filters__row--selects { display: flex; gap: 7px; } .sdz-catalog-select { display: block; flex: 1; min-width: 0; height: 44px; padding: 0 12px; background: var(--sdz-color-surface, #fff); border: 1px solid var(--sdz-color-border, #ccd9e4); border-radius: 9px; color: var(--sdz-color-text, #162b3b); font-size: 13px; font-weight: 600; } .sdz-catalog-search, .sdz-catalog-sort, .sdz-catalog-reset { height: 44px; } .sdz-catalog-search { flex: 1 1 100%; } .sdz-catalog-card__foot { flex-wrap: wrap; row-gap: 9px; } .sdz-catalog-card__cta { width: 100%; margin-left: 0; justify-content: center; min-height: 44px; } } @media (min-width: 701px) { .sdz-catalog-filters__row--selects { display: none; } }