/* Дизайн-система формы самооценки. Токены — те же, что у дашбордов портала (docs/СПЕЦИФИКАЦИЯ_ДИЗАЙНА_ДАШБОРДОВ.md), чтобы отчёт и портал читались как одно семейство. Основная тема — тёмная; светлая включается системной настройкой либо переключателем, который пишет data-theme на . */ :root { --bg: #0A141C; --card: #0F1F2B; --card2: #152834; --line: #1E3242; --tx: #E9EFF3; --tx2: #94A9B9; --tx3: #5F7486; --ac: #35D6BE; --acq: #6FD8E8; --acdim: #1C6F66; --warn: #D9B44A; --warndim: #4A3D14; --bar1: #2A3D4F; --bar2: #35506A; --callout: #10312C; --r1: #35D6BE; --r2: #2AA79A; --r3: #1F7C76; --r4: #33506A; --r5: #26394A; --r6: #1A2632; --shadow: 0 1px 0 rgba(0,0,0,.35); --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #EEF2F4; --card: #FFFFFF; --card2: #F4F7F8; --line: #DBE3E8; --tx: #0A141C; --tx2: #55697A; --tx3: #8095A4; --ac: #0E8577; --acq: #0E6C85; --acdim: #9FD8D0; --warn: #8A6712; --warndim: #EFE3C0; --bar1: #C9D5DE; --bar2: #9FB4C4; --callout: #E4F2EF; --r1: #0E8577; --r2: #3FA79A; --r3: #7FC4BA; --r4: #9FB4C4; --r5: #C3D0DA; --r6: #E0E7EC; --shadow: 0 1px 2px rgba(10,20,28,.06); } } :root[data-theme="light"] { --bg: #EEF2F4; --card: #FFFFFF; --card2: #F4F7F8; --line: #DBE3E8; --tx: #0A141C; --tx2: #55697A; --tx3: #8095A4; --ac: #0E8577; --acq: #0E6C85; --acdim: #9FD8D0; --warn: #8A6712; --warndim: #EFE3C0; --bar1: #C9D5DE; --bar2: #9FB4C4; --callout: #E4F2EF; --r1: #0E8577; --r2: #3FA79A; --r3: #7FC4BA; --r4: #9FB4C4; --r5: #C3D0DA; --r6: #E0E7EC; --shadow: 0 1px 2px rgba(10,20,28,.06); } /* Шрифты лежат в самом сервисе: на портале по /fonts/ их не оказалось, а тянуть с внешнего CDN в рантайме — лишняя зависимость и утечка запросов пользователей. Набор complete, кириллица полная (проверено: 64 из 64 букв). Если файлы не отдались, сработает системный стек из --sans / --mono. */ @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexSans-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2'); } * { box-sizing: border-box; } html { color-scheme: dark light; } body { margin: 0; background: var(--bg); color: var(--tx); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--ac); } h1, h2, h3 { line-height: 1.22; margin: 0; font-weight: 600; } h1 { font-size: 28px; letter-spacing: -.01em; } h2 { font-size: 20px; } h3 { font-size: 16px; } .wrap { max-width: 940px; margin: 0 auto; padding: 0 20px 96px; } /* ── шапка ── */ .top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); } .top-in { max-width: 940px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; } .brand { font-weight: 600; letter-spacing: -.01em; } .brand span { color: var(--tx3); font-weight: 400; } .top .spacer { flex: 1; } .progress { font: 400 12px/1 var(--mono); color: var(--tx2); white-space: nowrap; } .progress b { color: var(--ac); font-weight: 400; } .btn { font: 500 13px/1 var(--sans); color: var(--tx); background: var(--card2); border: 1px solid var(--line); border-radius: 3px; padding: 9px 14px; cursor: pointer; transition: border-color .15s, color .15s; } .btn:hover { border-color: var(--acdim); color: var(--ac); } .btn-primary { background: var(--ac); border-color: var(--ac); color: var(--bg); font-weight: 600; padding: 13px 22px; font-size: 15px; } .btn-primary:hover { color: var(--bg); opacity: .9; } .btn-ghost { background: transparent; } /* ── интро ── */ .intro { padding: 34px 0 8px; } .intro p { color: var(--tx2); max-width: 68ch; margin: 12px 0 0; } .modes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .mode { border: 1px solid var(--line); border-radius: 3px; padding: 12px 16px; background: var(--card); flex: 1 1 260px; text-decoration: none; color: inherit; display: block; } .mode:hover { border-color: var(--acdim); } .mode.is-on { border-color: var(--ac); border-left: 3px solid var(--ac); } .mode b { display: block; } .mode small { color: var(--tx3); font: 400 12px/1.4 var(--mono); } /* ── карточки разделов ── */ .section { background: var(--card); border: 1px solid var(--line); border-left: 4px dashed var(--warn); border-radius: 3px; padding: 22px 24px; margin-top: 20px; box-shadow: var(--shadow); } .section > header { border-bottom: 1px solid var(--line); padding-bottom: 12px; } .section .num { font: 400 12px/1 var(--mono); color: var(--warn); } .section .sub { color: var(--tx3); font-size: 13px; margin-top: 4px; } .field { padding: 18px 0; border-bottom: 1px solid var(--line); } .field:last-child { border-bottom: 0; padding-bottom: 0; } .field > label.q, .field .q { display: block; font-weight: 600; margin-bottom: 3px; } .field .hint { color: var(--tx3); font-size: 13px; margin-bottom: 10px; } .field .unit { font: 400 12px/1 var(--mono); color: var(--tx3); } /* варианты */ .opts { display: grid; gap: 7px; margin-top: 10px; } .opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 9px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--card2); transition: border-color .12s; } .opt:hover { border-color: var(--acdim); } .opt input { margin: 2px 0 0; accent-color: var(--ac); flex: none; } .opt input:checked ~ span { color: var(--ac); } .opt:has(input:checked) { border-color: var(--ac); } select { font: 400 14px/1 var(--sans); color: var(--tx); background: var(--card2); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; width: 100%; max-width: 420px; } select:focus, .opt:focus-within { outline: 2px solid var(--acdim); outline-offset: 1px; } /* матрица */ .matrix { overflow-x: auto; margin-top: 10px; } .matrix table { border-collapse: collapse; width: 100%; min-width: 520px; } .matrix th { font: 400 11.5px/1.3 var(--mono); color: var(--tx3); text-align: center; font-weight: 400; padding: 0 6px 8px; vertical-align: bottom; } .matrix th:first-child { text-align: left; width: 42%; } .matrix td { padding: 8px 6px; border-top: 1px solid var(--line); text-align: center; } .matrix td:first-child { text-align: left; font-size: 14px; color: var(--tx2); } .matrix input { accent-color: var(--ac); } .matrix tr:hover td { background: var(--card2); } .matrix .grp { font: 400 11.5px/1 var(--mono); color: var(--warn); padding-top: 14px; } /* подвал формы */ .submit { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .note { border: 1px dashed var(--warn); color: var(--warn); border-radius: 3px; padding: 10px 14px; font-size: 13px; background: var(--warndim); } :root[data-theme="light"] .note, :root:not([data-theme="dark"]) .note { background: var(--warndim); } .foot { color: var(--tx3); font-size: 12.5px; margin-top: 40px; } /* ── навигация по разделам ── */ .toc { position: sticky; top: 56px; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 0; } /* Разделы переносим по строкам вместо горизонтальной прокрутки: полоса скролла под шапкой выглядела как дефект и прятала последние разделы. */ .toc-in { max-width: 940px; margin: 0 auto; padding: 0 20px; display: flex; gap: 5px; flex-wrap: wrap; } .toc a { font: 400 11.5px/1 var(--mono); color: var(--tx2); text-decoration: none; padding: 6px 9px; border: 1px solid var(--line); border-radius: 3px; white-space: nowrap; } .toc a:hover { border-color: var(--acdim); color: var(--ac); } .toc a.done { border-color: var(--acdim); color: var(--ac); } @media (max-width: 640px) { .wrap { padding: 0 14px 72px; } .section { padding: 18px 16px; } h1 { font-size: 23px; } /* На узком экране длинное название бренда ломалось на три строки и наезжало на счётчик. Оставляем короткую строку, подпись убираем. */ .top-in { padding: 10px 12px; gap: 8px; } .brand { font-size: 13px; white-space: nowrap; } .top .btn { padding: 7px 9px; font-size: 12px; } .brand br, .brand span { display: none; } .progress { font-size: 11px; } .toc-in { padding: 0 14px; gap: 4px; } .toc a { font-size: 11px; padding: 5px 7px; } .submit .progress { display: none; } .matrix table { min-width: 420px; } } /* ─────────────────────────── страница отчёта ─────────────────────────── */ .hero-grid { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 16px; } .hero-grid > div:first-child { flex: 1 1 240px; } .big { font: 600 62px/1 var(--mono); color: var(--ac); letter-spacing: -.02em; } .big span { font-size: 20px; color: var(--tx3); } .hero-top { display: inline-block; margin-top: 12px; padding: 6px 12px; border: 1px solid var(--ac); color: var(--ac); border-radius: 3px; font: 500 13px/1 var(--sans); } .hero-pos { color: var(--tx2); margin-top: 10px; } .hero-cmp { flex: 1 1 300px; display: grid; gap: 8px; align-content: start; } .kv { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 7px; } .kv span { color: var(--tx3); font-size: 13px; } .kv b { font: 400 13px/1.3 var(--mono); text-align: right; } /* строка раздела */ .secrow { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .secrow:last-child { border-bottom: 0; } .secrow-l { flex: 0 0 240px; } .secrow-l .hint { margin: 2px 0 0; } .secrow .sc { flex: 1; } .secrow-v { font: 400 18px/1 var(--mono); color: var(--ac); min-width: 46px; text-align: right; } /* шкала с тремя маркерами */ .sc { margin: 12px 0 4px; } .sc-bar { position: relative; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--bar1), var(--bar2)); } .sc-slim .sc-bar { height: 6px; } .sc .m { position: absolute; top: 50%; width: 2px; height: 20px; transform: translate(-50%, -50%); border-radius: 1px; } .sc-slim .m { height: 14px; } .m-you { background: var(--ac); width: 4px; height: 24px; box-shadow: 0 0 0 2px var(--card); } .sc-slim .m-you { height: 16px; } .m-peer { background: var(--warn); } .m-all { background: var(--tx3); } .sc-ends { display: flex; justify-content: space-between; gap: 10px; font: 400 11.5px/1 var(--mono); color: var(--tx3); margin-top: 7px; } .sc-dir { color: var(--tx3); } /* дискретная шкала градаций */ .sc-opts { display: grid; gap: 5px; margin: 12px 0 6px; } .sc-opt { display: flex; gap: 10px; align-items: center; font-size: 13px; } .sc-opt-l { flex: 0 0 40%; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-opt-track { flex: 1; height: 9px; background: var(--card2); border-radius: 2px; } .sc-opt-track i { display: block; height: 100%; background: var(--bar2); border-radius: 2px; } .sc-opt-n { flex: 0 0 40px; text-align: right; font: 400 12px/1 var(--mono); color: var(--tx3); } .sc-opt-tag { flex: 0 0 96px; display: flex; gap: 4px; } .sc-opt.is-you .sc-opt-l { color: var(--ac); } .sc-opt.is-you .sc-opt-track i { background: var(--ac); } .tag { font: 400 10.5px/1 var(--mono); color: var(--tx3); border: 1px solid var(--line); border-radius: 2px; padding: 4px 6px; } .tag-you { color: var(--ac); border-color: var(--acdim); } /* карточка параметра */ .pcard { padding: 18px 0; border-bottom: 1px solid var(--line); } .pcard:last-child { border-bottom: 0; padding-bottom: 0; } .pcard-head { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; } .pcard-head .hint { margin: 3px 0 0; } .pcard-vals { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font: 400 12.5px/1.4 var(--mono); color: var(--tx3); } .val-you { color: var(--tx2); } .val-you b { color: var(--ac); font-weight: 400; } .pcard-pos { color: var(--tx2); font-size: 13px; margin-top: 8px; } .pcard-base { color: var(--tx3); font: 400 11.5px/1.5 var(--mono); margin-top: 7px; } .warn-inline { color: var(--warn); } .chip { font: 500 11.5px/1 var(--sans); padding: 6px 10px; border-radius: 2px; border: 1px solid var(--line); color: var(--tx2); white-space: nowrap; } .chip-ahead { color: var(--ac); border-color: var(--acdim); } .chip-behind { color: var(--warn); border-color: var(--warn); border-style: dashed; } .chip-onpar { color: var(--tx3); } .grp-title { margin: 22px 0 2px; color: var(--tx2); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; } .grp-title:first-of-type { margin-top: 8px; } .cols { display: flex; gap: 20px; flex-wrap: wrap; } .cols > .section { flex: 1 1 380px; } .hl { padding: 12px 0; border-bottom: 1px solid var(--line); } .hl:last-child { border-bottom: 0; } .hl .hint { margin: 3px 0 0; } @media (max-width: 640px) { .big { font-size: 46px; } .secrow { flex-wrap: wrap; } .secrow-l { flex: 1 1 100%; } .sc-opt-l { flex: 0 0 34%; } .sc-opt-tag { flex: 0 0 60px; } } /* печать: тот же документ, но на белом и без интерфейса. Селектор перечисляет и варианты с data-theme: иначе выбранная тёмная тема перебьёт печатные токены по специфичности и страница уйдёт в принтер чёрной заливкой. */ @media print { :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #fff; --card: #fff; --card2: #f4f7f8; --line: #d8dee3; --tx: #101820; --tx2: #3d4a55; --tx3: #6b7a86; --ac: #0B6A5F; --warn: #7A5A10; --bar1: #d3dbe1; --bar2: #aab8c3; } /* Браузер по умолчанию не печатает фоны, а вся шкала — это градиент трека и цветные маркеры: без принудительной печати цвета в PDF от неё остаётся пустое место. Плюс дублируем цвет обводкой, чтобы шкала читалась даже если пользователь отключит фоновую графику в диалоге печати. */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sc-bar { background: #dfe5ea !important; border: 1px solid #c4ced6; } .sc .m { box-shadow: none; border-radius: 0; } .m-you { background: #0B6A5F !important; outline: 1px solid #0B6A5F; } .m-peer { background: #7A5A10 !important; outline: 1px solid #7A5A10; } .m-all { background: #55636d !important; outline: 1px solid #55636d; } .sc-opt-track { background: #eef1f4 !important; border: 1px solid #d3dae0; } .sc-opt-track i { background: #aab8c3 !important; } .sc-opt.is-you .sc-opt-track i { background: #0B6A5F !important; } .chip { border-width: 1px !important; } .top, .toc, .btn, #theme-toggle { display: none !important; } body { font-size: 11.5pt; } .wrap { max-width: none; padding: 0; } .section { break-inside: avoid; box-shadow: none; margin-top: 12px; border-left: 3px solid var(--warn); } .pcard, .hl, .secrow { break-inside: avoid; } .cols { display: block; } a[href]:after { content: ""; } } /* ── текстовые блоки отчёта ── */ .lead { font: 600 19px/1.35 var(--sans); color: var(--tx); margin: 16px 0 0; max-width: 62ch; } .say { color: var(--tx2); margin: 12px 0 0; max-width: 68ch; } .steps { margin: 10px 0 0; padding-left: 22px; color: var(--tx2); } .steps li { margin: 8px 0; padding-left: 4px; } .steps li b { color: var(--tx); font-weight: 600; } .steps li::marker { color: var(--ac); font-family: var(--mono); } .hl-head { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; } .hl-gap { border-left: 3px solid var(--warn); padding-left: 14px; margin-left: -2px; } .actions { margin: 10px 0 0; padding-left: 20px; color: var(--tx2); font-size: 14px; } .actions li { margin: 6px 0; } .actions li::marker { color: var(--acdim); } @media print { .lead { font-size: 13pt; } .say, .actions, .steps { color: #2a343d; } .hl-gap { border-left: 2px solid #7A5A10; } }