/* Закониум — демо-переключатель палитр для заказчика. Палитры со страницы холста «Цвета — варианты»: у каждой проверен контраст (tests/js/tokens.test.js проверяет и эти блоки). Палитра — только значения токенов nc.css; включается атрибутом data-palette на , который ставит web/static/js/palette.js. Без атрибута действует основная палитра «Полночь и мята» из nc.css. Переключатель виден только тому, кто открыл сайт по ссылке с ?palitra. */ :root[data-palette="indigo-laym"] { --base: #2f2b8f; --base-deep: #201d66; --on-base-muted: #cfcdf4; --line-on-base: #4541a6; --line-strong-on-base: #9a97dd; --action: #c8f25c; --action-hover: #b9ea3c; --on-action: #1b2406; --on-action-muted: #3b4a12; --accent-soft: #3b37a8; --paper-accent: #3531a3; --paper-accent-soft: #eceafd; --stamp: #d4202f; --dev-bg: #c8f25c; --dev: #1b2406; } :root[data-palette="ultramarin-zholtyy"] { --base: #1638b8; --base-deep: #0f2a8f; --on-base-muted: #c8d3fb; --line-on-base: #2e4fc6; --line-strong-on-base: #8fa3ea; --action: #ffd54a; --action-hover: #ffcd24; --on-action: #10204f; --on-action-muted: #3d4668; --accent-soft: #2446c4; --paper-accent: #1638b8; --paper-accent-soft: #eaf0fe; --stamp: #d4202f; --dev-bg: #ffd54a; --dev: #10204f; } :root[data-palette="ultramarin-mandarin"] { --base: #1638b8; --base-deep: #0f2a8f; --on-base-muted: #c8d3fb; --line-on-base: #2e4fc6; --line-strong-on-base: #8fa3ea; --action: #ffa56b; --action-hover: #ffb27f; --on-action: #2a1206; --on-action-muted: #5a2a12; --accent-soft: #2446c4; --paper-accent: #1638b8; --paper-accent-soft: #eaf0fe; --stamp: #d4202f; --dev-bg: #ffa56b; --dev: #2a1206; } :root[data-palette="izumrud-korall"] { --base: #0a4a3e; --base-deep: #06352c; --on-base-muted: #bfe3d8; --line-on-base: #1b6656; --line-strong-on-base: #86c2b2; --action: #ff9b80; --action-hover: #ffab93; --on-action: #2b0b04; --on-action-muted: #5c2213; --accent-soft: #136b59; --paper-accent: #0c6654; --paper-accent-soft: #e3f4ee; --stamp: #c8242f; --dev-bg: #ff9b80; --dev: #2b0b04; } :root[data-palette="surguch"] { --base: #7a1d2c; --base-deep: #5a1320; --on-base-muted: #f2cfd4; --line-on-base: #94303f; --line-strong-on-base: #d99aa4; --action: #f6dfb8; --action-hover: #f0d19c; --on-action: #4a0f1a; --on-action-muted: #6e2a33; --accent-soft: #8a2536; --paper-accent: #8a2233; --paper-accent-soft: #f9eaec; --stamp: #8a2233; --dev-bg: #f6dfb8; --dev: #4a0f1a; } :root[data-palette="polnoch-myata"] { --base: #14264d; --base-deep: #0c1834; --on-base-muted: #c3cde4; --line-on-base: #27406f; --line-strong-on-base: #8a9cc4; --action: #5fe0bd; --action-hover: #43d4ad; --on-action: #05261d; --on-action-muted: #1c4a3c; --accent-soft: #1d3566; --paper-accent: #1f4396; --paper-accent-soft: #e8eef9; --stamp: #d4202f; --dev-bg: #5fe0bd; --dev: #05261d; } /* Образцы в переключателе: цвет фона и действия каждой палитры. */ .palette-opt[data-palette="indigo-laym"] { --sw-base: #2f2b8f; --sw-action: #c8f25c; } .palette-opt[data-palette="ultramarin-zholtyy"] { --sw-base: #1638b8; --sw-action: #ffd54a; } .palette-opt[data-palette="ultramarin-mandarin"] { --sw-base: #1638b8; --sw-action: #ffa56b; } .palette-opt[data-palette="izumrud-korall"] { --sw-base: #0a4a3e; --sw-action: #ff9b80; } .palette-opt[data-palette="surguch"] { --sw-base: #7a1d2c; --sw-action: #f6dfb8; } .palette-opt[data-palette="polnoch-myata"] { --sw-base: #14264d; --sw-action: #5fe0bd; } /* Карточки (строка «Карточки:» переключателя): белый лист на тёмно-синем фоне слишком яркий (замечание заказчика 24.09.2026) — три варианта на выбор. Бумага — только значения токенов листа; тёмные — роли листа у витринных карточек возвращаются к значениям фона. Без атрибута — основной вид из nc.css, холодная бумага. */ :root[data-cards="belye"] { --paper: #ffffff; --paper-2: #f5f7fa; --paper-line: #e3e7ee; --paper-accent-soft: #e8eef9; } :root[data-cards="teplaya"] { --paper: #f5f2ea; --paper-2: #ebe6da; --paper-line: #ddd6c7; --paper-accent-soft: #e6e7ef; } /* Тёмные на витрине: тарифы, шаги, «Отличия», карточки описаний — глубокий тёмно-синий с белым текстом и цветом действия; белыми остаются настоящие листы — отчёт, находки, документы, формы, таблицы и каталоги «Что проверяем». */ :root[data-cards="temnye"] :is(.card.plan, .card.offer-step, .card.diff-theme, .card.card-row, .section > .wrap > .grid > .card:not(.doc-card), .section > .wrap > .card:not(.rp-summary):not(.rp-counts):not(.rp-progress):not(.report-block):not(.sample):not(.doc):not(:has(.tracker-list, .lex-list))) { --bg: var(--base-deep); --surface: var(--base); --surface-raised: var(--base-deep); --ink: var(--on-base); --ink-muted: var(--on-base-muted); --line: var(--line-on-base); --line-strong: var(--line-strong-on-base); --accent: var(--action); --on-accent: var(--on-action); --accent-soft: var(--base); --focus: var(--action); --mark: var(--on-base); background: var(--base-deep); color: var(--ink); border: 1px solid var(--line-on-base); } .palette-opt[data-cards="belye"] { --sw-base: #ffffff; --sw-action: #ffffff; } .palette-opt[data-cards="holodnaya"] { --sw-base: #eef2f8; --sw-action: #eef2f8; } .palette-opt[data-cards="teplaya"] { --sw-base: #f5f2ea; --sw-action: #f5f2ea; } .palette-opt[data-cards="temnye"] { --sw-base: var(--base-deep); --sw-action: var(--base-deep); } /* Сам переключатель: плашка внизу по центру поверх страницы. */ .palette-bar { position: fixed; left: 50%; bottom: var(--space-4); z-index: 60; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1); width: max-content; max-width: calc(100% - 2 * var(--space-4)); padding: var(--space-2); background: var(--base-deep); color: var(--on-base); border: 1px solid var(--line-strong-on-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-size: 13px; line-height: 18px; } .palette-bar { flex-direction: column; align-items: stretch; } .palette-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1); } .palette-row > b { flex: none; min-width: 72px; padding: 0 var(--space-2); font-weight: 600; } .palette-opt, .palette-close { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; } .palette-opt:hover, .palette-close:hover { border-color: var(--line-strong-on-base); } .palette-opt[aria-pressed="true"] { border-color: var(--action); } .palette-dots { display: inline-flex; } .palette-dots i { display: block; width: 14px; height: 14px; border-radius: var(--radius-pill); border: 1px solid var(--on-base); } .palette-dots i:first-child { background: var(--sw-base); } .palette-dots i:last-child { margin-left: -5px; background: var(--sw-action); } .palette-close { color: var(--on-base-muted); } @media (max-width: 767px) { .palette-opt .palette-name { display: none; } } @media print { .palette-bar { display: none; } }