/* ===== css/tokens.css ===== */ /* ========================================================================== Портал 1535 — фирменная основа: токены. Версия 2.1 от 23.09.2026 (+ профиль «Геометрия» для варианта B). Правила и обоснования: docs/design/redesign/FOUNDATION.md (обязательная основа; вариант B «Геометрия» — её профиль, § 19). Опора — три варианта логотипа лицея (docs/brand/README.md): индиго #321282 (центр #624BA1), красный #C2161E (центр #DD5A44), чёрный #161616 (центр #616161). Других тонов нет: tools/design-qa/palette.js → «вне бренда: 0»; цветов на тему — не больше 16. Слои: 1. Шкалы --indigo-*, --red-*, --gray-*. Номер ступени = светлота OKLCH × 100. В компонентах НЕ используются. 2. Роли --color-*: 12 смысловых + 5 состояний + 3 «на заливке». Один индиго и один красный на тему. 3. Типографика, пространство, форма, значки, цели, движение, раскладка. 4. Плотность и типографические роли вариантов: A «Ясность» (по умолчанию), C «Рабочий стол» и B «Геометрия» (профиль § 19). 5. Тёмная тема: блок для системной настройки и блок для явного выбора (атрибут data-theme корневого элемента). 6. Контракт --p-* (docs/plan/ARCHITECTURE.md, § 9.2): компоненты Blade берут только его. Атрибуты корневого элемента html: data-variant="a|b|c", data-layout="stack|master-detail", data-nav="sidebar", data-theme="light|dark", data-brand="brand|quiet" (присутствие бренда; у B по умолчанию "brand"). Сгенерировано скриптом _src/tokens-gen.js; руками не править. ========================================================================== */ :root { color-scheme: light; /* ---------- 1. Шкалы (примитивы) ---------- */ /* Индиго — тон 285° у края знака, 290° у светлых ступеней (градиент знака идёт от 285° к 293°) */ --indigo-97: #F5F4FD; /* oklch(0.97 0.012 291) · резерв */ --indigo-94: #EAE8FF; /* oklch(0.939 0.031 290) · подложка выбранного (светлая) */ --indigo-88: #D6D2FA; /* oklch(0.88 0.055 290) · наведение на главную (тёмная) */ --indigo-80: #BCB4F4; /* oklch(0.799 0.09 290) · индиго действия (тёмная): главная кнопка, ссылки, выбранное, фокус */ --indigo-70: #9D92DE; /* oklch(0.699 0.11 290) · нажатие главной (тёмная) */ --indigo-58: #7A6BC1; /* oklch(0.58 0.129 290) · резерв */ --indigo-48: #5E4CA3; /* oklch(0.479 0.135 290) · резерв; светлота и хрома центра знака #624BA1 (ΔE 0,0075) */ --indigo-42: #4D359D; /* oklch(0.419 0.16 288) · наведение на главную (светлая) */ --indigo-32: #321282; /* oklch(0.321 0.167 285) · КРАЙ ЗНАКА #321282 — индиго действия (светлая); фирменная плоскость (обе) */ --indigo-29: #292648; /* oklch(0.29 0.061 286) · подложка выбранного (тёмная): светлее зоны #222222 */ --indigo-26: #230D5E; /* oklch(0.259 0.13 285) · нажатие главной (светлая) */ /* Красный — тон 27° у края знака, 25° у светлых ступеней (сдвиг Бецольда — Брюкке: светлый красный желтеет) */ --red-97: #FDF2F1; /* oklch(0.969 0.012 24) · резерв */ --red-94: #FEE4E2; /* oklch(0.939 0.029 23) · резерв */ --red-88: #FACAC5; /* oklch(0.879 0.055 25) · резерв */ --red-80: #F2A7A1; /* oklch(0.799 0.09 24) · резерв */ --red-74: #F28881; /* oklch(0.74 0.13 25) · наведение на красную заливку (тёмная) */ --red-70: #ED756E; /* oklch(0.7 0.15 25) · красный «нужно вам» (тёмная): текст, значок, заливка счётчика */ --red-63: #DD5A44; /* oklch(0.633 0.169 32) · ЦЕНТР КРАСНОГО ЗНАКА #DD5A44 — резерв */ --red-52: #C2161E; /* oklch(0.52 0.201 27) · КРАЙ КРАСНОГО ЗНАКА #C2161E — красный «нужно вам» (светлая) */ --red-44: #9B1014; /* oklch(0.44 0.17 27) · наведение на красную заливку (светлая) */ --red-36: #721212; /* oklch(0.359 0.13 27) · резерв */ --red-26: #3C1714; /* oklch(0.26 0.059 27) · резерв */ /* Графит — хрома 0, из чёрного варианта знака */ --gray-100: #FFFFFF; /* oklch(1 0 0) · фон (светлая); текст на заливках (светлая) */ --gray-97: #F5F5F5; /* oklch(0.97 0 0) · зоны, наведение (светлая) */ --gray-94: #EBEBEB; /* oklch(0.94 0 0) · нажатие (светлая); текст (тёмная) */ --gray-90: #DEDEDE; /* oklch(0.901 0 0) · разделители (светлая) */ --gray-80: #BEBEBE; /* oklch(0.802 0 0) · резерв */ --gray-72: #A4A4A4; /* oklch(0.719 0 0) · вторичный текст (тёмная) */ --gray-62: #868686; /* oklch(0.62 0 0) · рамки полей, неактивное (обе) */ --gray-49: #616161; /* oklch(0.493 0 0) · ЦЕНТР ЧЁРНОГО ЗНАКА #616161 — вторичный текст (светлая) */ --gray-36: #3D3D3D; /* oklch(0.36 0 0) · разделители, нажатие (тёмная) */ --gray-30: #2E2E2E; /* oklch(0.301 0 0) · наведение (тёмная) */ --gray-25: #222222; /* oklch(0.252 0 0) · зоны и то, что поверх (тёмная) */ --gray-20: #161616; /* oklch(0.2 0 0) · КРАЙ ЧЁРНОГО ЗНАКА #161616 — текст (светлая), фон (тёмная) */ --gray-0: #000000; /* oklch(0 0 0) · слово «ЛИЦЕЙ» чёрного знака — только печать */ /* ---------- 2. Роли — светлая тема ---------- */ --color-bg: var(--gray-100); /* Фон страницы, карточки и поля ввода */ --color-surface: var(--gray-97); /* Зоны: шапка таблицы, боковое меню, дорожка сегмента, «для вас» в месяце, цитата ленты, фон сообщения и сводки ошибок */ --color-surface-raised: var(--gray-100); /* То, что поверх страницы: панели, окна, меню, выпадающие списки, подсказки (с линией и тенью) */ --color-line: var(--gray-90); /* Разделители, рамки карточек, дорожка шкалы */ --color-field-border: var(--gray-62); /* Рамки полей, флажков, радиокнопок, чипов, переключателей (≥ 3 : 1) */ --color-text: var(--gray-20); /* Основной текст, заголовки, статусы «идёт» и «отклонена»; фон тоста и подсказки */ --color-text-muted: var(--gray-49); /* Вторичный текст, метаданные, статус «завершено», счётчик «непрочитано» */ --color-text-disabled: var(--gray-62); /* Только неактивные элементы (контраст не нормируется) */ --color-primary: var(--indigo-32); /* Индиго действия: заливка главной кнопки, ссылки, контур второстепенной кнопки, выбранное, кольцо фокуса, отмеченный флажок, заполненная шкала */ --color-selected: var(--indigo-94); /* Подложка выбранного: строка списка-мастера, пункт меню, день календаря — только вместе с полосой или контуром */ --color-attention: var(--red-52); /* Красный «нужно вам» и ошибка ввода: плашка «ваш ход» и счётчик «ждут вас», текст и значок ошибки, рамка сводки ошибок, кнопка подтверждения */ --color-brand: var(--indigo-32); /* Фирменная плоскость: вход; по решению пользователя — одна плоскость на экран */ --color-hover: var(--gray-97); /* Наведение на строку, пункт, второстепенную, текстовую и нейтральную кнопку */ --color-press: var(--gray-94); /* Нажатие кнопок; наведение внутри зоны surface; скелетон */ --color-primary-hover: var(--indigo-42); /* Наведение на главную кнопку */ --color-primary-press: var(--indigo-26); /* Нажатие главной кнопки */ --color-attention-hover: var(--red-44); /* Наведение на красную заливку (кнопка подтверждения) */ --color-on-primary: var(--gray-100); /* Текст и значки на главной кнопке, галочка флажка */ --color-on-attention: var(--gray-100); /* Текст и значок плашки «ваш ход», число счётчика «ждут вас», текст кнопки подтверждения */ --color-on-brand: var(--gray-100); /* Текст, белый знак и кольцо фокуса на фирменной плоскости */ --scrim: rgb(22 22 22 / 0.48); /* затемнение под окном и панелью */ --emblem-fill: url(#g-indigo); /* знак: градиент индиго из docs/brand/logo-1535-indigo.svg */ --emblem-plate: var(--gray-100); /* белые цифры знака */ /* ---------- 3. Типографика: одна гарнитура, два начертания ---------- */ --font-sans: "Golos Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --fw-regular: 400; --fw-strong: 600; --numeric: tabular-nums; /* только таблицы, номера, даты, время, счётчики — не body */ /* Шкала: кегль / интерлиньяж (интерлиньяж кратен 4) */ --fs-xs: 13px; --lh-xs: 16px; /* только подписи под значком: нижняя панель и рейка планшета (2.2) */ --fs-sm: 14px; --lh-sm: 20px; /* метаданные, подписи, шапка таблицы, статус в строке */ --fs-md: 16px; --lh-md: 24px; /* основной текст, строки, поля, кнопки */ --fs-lg: 18px; --lh-lg: 24px; /* заголовок блока, панели, окна (оба варианта) */ --fs-xl: 22px; --lh-xl: 28px; /* заголовок экрана на телефоне; заголовок экрана C */ --fs-2xl: 28px; --lh-2xl: 36px; /* заголовок экрана A от 768 px; плоскость входа C */ --fs-3xl: 36px; --lh-3xl: 44px; /* только плоскость входа */ /* Профиль «Геометрия» (B): вторая гарнитура — только три дисплейные роли (FOUNDATION.md, § 19.4); запасная — Golos Text */ --font-display: "Unbounded", "Golos Text", "Segoe UI", Arial, sans-serif; --tracking-display: -0.02em; /* дисплейные строки: Unbounded на 30 % шире Golos, −0,02 em возвращает 3 % */ /* ---------- 4. Пространство: шаг 4, шкала закрыта ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---------- 5. Форма и значки ---------- */ --radius-s: 4px; /* поля, кнопки, чипы, сегменты, подсветка строки, метки, шкала */ --radius-m: 8px; /* карточки, панели, окна, плитки, тосты */ --radius-round: 999px; /* только аватар, счётчик, переключатель, точка */ --line-thin: 1px; /* разделители, рамки карточек и полей */ --line-strong: 2px; /* выбранный контур, поле с ошибкой, кольцо фокуса, рамка ошибки */ --line-indicator: 3px; /* полоса выбранного пункта меню, вкладки и строки */ --shadow-overlay: 0 4px 16px rgb(22 22 22 / 0.14), 0 1px 4px rgb(22 22 22 / 0.10); /* единственная тень: то, что поверх */ --focus-width: 2px; --focus-offset: 2px; --icon-s: 16px; /* в тексте и метках */ --icon-m: 20px; /* кнопки, строки, меню, шапка */ --icon-l: 24px; /* нижняя панель, пустые состояния, плитки */ --icon-status: 16px; /* значок статуса в строке; 20 на сенсоре */ --icon-stroke: 1.5; /* видимая толщина штриха в px при любом размере (vector-effect: non-scaling-stroke) */ /* ---------- 6. Цели и элементы управления ---------- */ --target-min: 24px; /* мышь; на сенсоре — 44 px */ --control-h: 40px; /* кнопка */ --control-h-s: 32px; /* чип, сегмент, кнопка-значок в плотной строке; 44 на сенсоре */ --field-h: 40px; /* поле ввода; 48 на сенсоре */ /* ---------- 7. Движение ---------- */ --dur-fast: 120ms; --dur-panel: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* ---------- 8. Раскладка ---------- */ --page-gutter: 16px; /* 360–767 */ --grid-gap: 16px; --grid-cols: 4; --nav-w: 256px; /* боковое меню от 1180 px */ --rail-w: 88px; /* рейка 768–1179 px */ --bottom-nav-h: 64px; /* нижняя панель до 767 px */ --content-max: 1440px; --list-w: 360px; /* панель списка в раскладке «список + детали» (C) */ --aside-w: 320px; /* справочная колонка C на 1920 */ --measure: 70ch; /* длина строки абзаца */ /* ---------- 9. Профиль «Геометрия» (B): мотив знака (FOUNDATION.md, § 19). Новых тонов нет ---------- */ --deco-on-brand: var(--indigo-48); /* цифры и дуги на фирменной плоскости; светлота и хрома центра знака #624BA1; обе темы */ --deco-ghost: var(--color-selected); /* цифра раздела на фоне страницы: та же ступень, что подложка выбранного (#EAE8FF / #292648) */ --deco-angle: -45deg; /* ось знака: единица и флажки пятёрок лежат под 45° */ --cut: 32px; /* срез угла 45° — только правый верхний угол фирменной плоскости */ --plane-h: 200px; /* плоскость главной от 1100 px основной области: 7 колонок × 200 px */ --plane-band-h: 112px; /* полоса на телефоне и планшете: дата, приветствие, две цифры сводки; дела — в первом экране */ --deco-zone: 240px; /* своя зона цифры на плоскости главной (≈ 2,5 из 7 колонок на 1366); текст в неё не заходит */ --deco-zone-band: 96px; /* ширина зоны цифры на входе телефона; сторона квадрата пустого состояния (зона в полосе — квадрат --plane-band-h) */ --deco-digit: 176px; /* цифра дня на плоскости главной: обе цифры «22» читаются, срезана внешняя треть */ --deco-digit-band: 104px; /* цифра в полосе (первая цифра — целиком), на входе телефона и в квадрате пустого состояния */ --deco-digit-login: 300px; /* «1535» на плоскости входа от 768 px */ --deco-digit-ghost: 128px; /* цифра раздела в шапке от 1180 px; нижняя треть срезана линией шапки */ --deco-lh: 1; /* интерлиньяж декоративной цифры: рамка = кегль */ --deco-arc: 240px; /* дуга-циркуль на плоскости входа от 768 px */ --deco-arc-w: 40px; /* толщина дуги ≈ штрих цифры */ --step-diamond: calc(var(--icon-l) * 0.75); /* ромб шага: сторона 18, диагональ 25,5 — в ячейке 24 */ --dur-deco: 320ms; /* декор появляется один раз; при prefers-reduced-motion — без движения */ } @media (pointer: coarse) { :root { --target-min: 44px; --control-h: 48px; --control-h-s: 44px; --field-h: 48px; --icon-status: 20px; } } @media (min-width: 768px) { :root { --page-gutter: 24px; --grid-gap: 24px; --grid-cols: 8; } } @media (min-width: 1180px) { :root { --page-gutter: 32px; --grid-cols: 12; } } /* ---------- 9. Варианты: плотность и типографические роли ---------- */ /* A «Ясность» — по умолчанию: просторно, для учителя с телефоном. data-layout="stack" */ :root, [data-variant="a"] { --row-min: 56px; --row-pad-y: var(--space-3); --row-pad-x: var(--space-4); --row-gap: var(--space-1); --block-pad: var(--space-6); --block-gap: var(--space-8); --section-gap: var(--space-12); --header-h: 56px; --type-screen-fs: var(--fs-xl); --type-screen-lh: var(--lh-xl); --type-block-fs: var(--fs-lg); --type-block-lh: var(--lh-lg); --type-hero-fs: var(--fs-3xl); --type-hero-lh: var(--lh-3xl); } @media (min-width: 768px) { :root, [data-variant="a"] { --header-h: 64px; --type-screen-fs: var(--fs-2xl); --type-screen-lh: var(--lh-2xl); } } /* C «Рабочий стол» — плотно, для офиса: строка в две линии 52 px, заголовок экрана 22, текст тот же 16. data-layout="master-detail" */ [data-variant="c"] { --row-min: 40px; --row-pad-y: var(--space-1); --row-pad-x: var(--space-4); --row-gap: 0px; --block-pad: var(--space-4); --block-gap: var(--space-6); --section-gap: var(--space-8); --header-h: 56px; --type-screen-fs: var(--fs-xl); --type-screen-lh: var(--lh-xl); --type-block-fs: var(--fs-lg); --type-block-lh: var(--lh-lg); --type-hero-fs: var(--fs-2xl); --type-hero-lh: var(--lh-2xl); } @media (pointer: coarse) { [data-variant="c"] { --row-min: 48px; --row-pad-y: var(--space-2); } } /* B «Геометрия» — профиль § 19: плотность и раскладка A (data-layout="stack"), асимметрия 7 + 5; дисплейная гарнитура — три роли: .t-display-hero (плоскость входа), .t-display-title (названия разделов из закрытого списка и приветствие на плоскости; на телефоне — Golos 22/28), .t-figure (только цифры, 18/24). data-brand="brand" — по умолчанию, "quiet" убирает плоскость главной и декор */ [data-variant="b"] { --row-min: 56px; --row-pad-y: var(--space-3); --row-pad-x: var(--space-4); --row-gap: var(--space-1); --block-pad: var(--space-6); --block-gap: var(--space-8); --section-gap: var(--space-12); --header-h: 56px; --type-screen-fs: var(--fs-xl); --type-screen-lh: var(--lh-xl); --type-block-fs: var(--fs-lg); --type-block-lh: var(--lh-lg); --type-hero-fs: var(--fs-2xl); --type-hero-lh: var(--lh-2xl); --type-title-font: var(--font-sans); --type-title-tracking: normal; } @media (min-width: 768px) { [data-variant="b"] { --header-h: 64px; --type-screen-fs: var(--fs-2xl); --type-screen-lh: var(--lh-2xl); --type-hero-fs: var(--fs-3xl); --type-hero-lh: var(--lh-3xl); --type-title-font: var(--font-display); --type-title-tracking: var(--tracking-display); } } /* ---------- 10. Тёмная тема: те же роли, другие ступени ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: var(--gray-20); --color-surface: var(--gray-25); --color-surface-raised: var(--gray-25); --color-line: var(--gray-36); --color-field-border: var(--gray-62); --color-text: var(--gray-94); --color-text-muted: var(--gray-72); --color-text-disabled: var(--gray-62); --color-primary: var(--indigo-80); --color-selected: var(--indigo-29); --color-attention: var(--red-70); --color-brand: var(--indigo-32); --color-hover: var(--gray-30); --color-press: var(--gray-36); --color-primary-hover: var(--indigo-88); --color-primary-press: var(--indigo-70); --color-attention-hover: var(--red-74); --color-on-primary: var(--gray-20); --color-on-attention: var(--gray-20); --color-on-brand: var(--gray-94); --shadow-overlay: 0 4px 16px rgb(0 0 0 / 0.48), 0 1px 4px rgb(0 0 0 / 0.40); --scrim: rgb(0 0 0 / 0.64); --emblem-fill: var(--color-on-brand); /* белая версия знака (docs/brand/README.md): цифры — цвет фона */ --emblem-plate: transparent; } } :root[data-theme="dark"] { color-scheme: dark; --color-bg: var(--gray-20); --color-surface: var(--gray-25); --color-surface-raised: var(--gray-25); --color-line: var(--gray-36); --color-field-border: var(--gray-62); --color-text: var(--gray-94); --color-text-muted: var(--gray-72); --color-text-disabled: var(--gray-62); --color-primary: var(--indigo-80); --color-selected: var(--indigo-29); --color-attention: var(--red-70); --color-brand: var(--indigo-32); --color-hover: var(--gray-30); --color-press: var(--gray-36); --color-primary-hover: var(--indigo-88); --color-primary-press: var(--indigo-70); --color-attention-hover: var(--red-74); --color-on-primary: var(--gray-20); --color-on-attention: var(--gray-20); --color-on-brand: var(--gray-94); --shadow-overlay: 0 4px 16px rgb(0 0 0 / 0.48), 0 1px 4px rgb(0 0 0 / 0.40); --scrim: rgb(0 0 0 / 0.64); --emblem-fill: var(--color-on-brand); /* белая версия знака (docs/brand/README.md): цифры — цвет фона */ --emblem-plate: transparent; } /* ---------- 11. Контракт --p-* (ARCHITECTURE.md § 9.2) ---------- */ /* Компоненты Blade берут только эти токены. Объявлены и на элементах, которые переопределяют вариант или тему (data-variant, data-scope): пользовательские свойства вычисляются там, где объявлены. */ :root, [data-variant], [data-scope] { /* Поверхности и текст */ --p-bg: var(--color-bg); --p-surface: var(--color-bg); /* карточка лежит на фоне страницы и отделена линией */ --p-surface-raised: var(--color-surface-raised); --p-surface-sunken: var(--color-surface); /* зоны: шапка таблицы, меню, дорожка, сообщение */ --p-hover: var(--color-hover); --p-press: var(--color-press); --p-field-bg: var(--color-bg); --p-text: var(--color-text); --p-text-muted: var(--color-text-muted); --p-text-subtle: var(--color-text-muted); /* третьего уровня текста нет: он был бы ниже 5,5 : 1 */ --p-text-disabled: var(--color-text-disabled); --p-border: var(--color-line); --p-border-strong: var(--color-field-border); --p-field-border: var(--color-field-border); /* Индиго: действие, выбранное, фокус */ --p-accent: var(--color-primary); /* только заливка главной кнопки */ --p-accent-hover: var(--color-primary-hover); --p-accent-press: var(--color-primary-press); --p-on-accent: var(--color-on-primary); --p-link: var(--color-primary); --p-accent-soft: var(--color-selected); /* подложка выбранного — только с полосой или контуром */ --p-accent-soft-text: var(--color-primary); --p-focus: var(--color-primary); --p-focus-inner: var(--color-bg); --p-focus-width: var(--focus-width); --p-focus-offset: var(--focus-offset); /* Красный «нужно вам» и ошибка */ --p-attention: var(--color-attention); --p-attention-hover: var(--color-attention-hover); --p-on-attention: var(--color-on-attention); /* Фирменная плоскость и знак */ --p-brand: var(--color-brand); --p-on-brand: var(--color-on-brand); --p-emblem-fill: var(--emblem-fill); --p-emblem-plate: var(--emblem-plate); /* Обратная поверхность (тост, подсказка) и затемнение */ --p-inverse-bg: var(--color-text); --p-on-inverse: var(--color-bg); --p-scrim: var(--scrim); /* Статусы: тон задаёт сервер по формуле «ваш ход» (FOUNDATION.md, § 4), а не код статуса */ --p-status-action-fg: var(--color-attention); --p-status-progress-fg: var(--color-text); --p-status-done-fg: var(--color-text-muted); --p-status-new-fg: var(--color-text); --p-status-in-progress-fg: var(--color-text); --p-status-on-hold-fg: var(--color-text); --p-status-needs-info-fg: var(--color-text); --p-status-pending-approval-fg: var(--color-text); --p-status-rejected-fg: var(--color-text); --p-status-resolved-fg: var(--color-text-muted); --p-status-closed-fg: var(--color-text-muted); --p-status-cancelled-fg: var(--color-text-muted); --p-status-new-bg: transparent; --p-status-new-border: transparent; --p-status-in-progress-bg: transparent; --p-status-in-progress-border: transparent; --p-status-on-hold-bg: transparent; --p-status-on-hold-border: transparent; --p-status-needs-info-bg: transparent; --p-status-needs-info-border: transparent; --p-status-pending-approval-bg: transparent; --p-status-pending-approval-border: transparent; --p-status-resolved-bg: transparent; --p-status-resolved-border: transparent; --p-status-closed-bg: transparent; --p-status-closed-border: transparent; --p-status-rejected-bg: transparent; --p-status-rejected-border: transparent; --p-status-cancelled-bg: transparent; --p-status-cancelled-border: transparent; /* Сообщения: одна форма, различает значок; у ошибки — красная рамка */ --p-ok-fg: var(--color-text); --p-ok-bg: var(--color-surface); --p-ok-border: var(--color-line); --p-warn-fg: var(--color-text); --p-warn-bg: var(--color-surface); --p-warn-border: var(--color-line); --p-info-fg: var(--color-text); --p-info-bg: var(--color-surface); --p-info-border: var(--color-line); --p-err-fg: var(--color-text); --p-err-icon: var(--color-attention); --p-err-bg: var(--color-surface); --p-err-border: var(--color-attention); /* Типографика */ --p-font-text: var(--font-sans); --p-font-heading: var(--font-sans); --p-font-mono: var(--font-sans); /* моноширинного шрифта нет: номера — табличными цифрами основной гарнитуры */ --p-fs-xs: var(--fs-xs); --p-lh-xs: var(--lh-xs); --p-fs-sm: var(--fs-sm); --p-lh-sm: var(--lh-sm); --p-fs-md: var(--fs-md); --p-lh-md: var(--lh-md); --p-fs-lg: var(--fs-lg); --p-lh-lg: var(--lh-lg); --p-fs-xl: var(--fs-xl); --p-lh-xl: var(--lh-xl); --p-fs-2xl: var(--fs-2xl); --p-lh-2xl: var(--lh-2xl); --p-fs-3xl: var(--fs-3xl); --p-lh-3xl: var(--lh-3xl); --p-fw-regular: var(--fw-regular); --p-fw-medium: var(--fw-regular); /* 500 не используется */ --p-fw-semibold: var(--fw-strong); --p-fw-bold: var(--fw-strong); /* 700 не используется */ --p-numeric: var(--numeric); /* только таблицы, номера, даты, время, счётчики */ --p-type-screen-fs: var(--type-screen-fs); --p-type-screen-lh: var(--type-screen-lh); --p-type-block-fs: var(--type-block-fs); --p-type-block-lh: var(--type-block-lh); --p-type-hero-fs: var(--type-hero-fs); --p-type-hero-lh: var(--type-hero-lh); /* Пространство, форма, значки */ --p-space-1: var(--space-1); --p-space-2: var(--space-2); --p-space-3: var(--space-3); --p-space-4: var(--space-4); --p-space-6: var(--space-6); --p-space-8: var(--space-8); --p-space-12: var(--space-12); --p-space-16: var(--space-16); --p-radius-sm: var(--radius-s); --p-radius-md: var(--radius-m); --p-radius-round: var(--radius-round); --p-shadow-overlay: var(--shadow-overlay); --p-line-thin: var(--line-thin); --p-line-strong: var(--line-strong); --p-line-indicator: var(--line-indicator); --p-icon-s: var(--icon-s); --p-icon-m: var(--icon-m); --p-icon-l: var(--icon-l); --p-icon-status: var(--icon-status); --p-icon-stroke: var(--icon-stroke); /* Цели и элементы управления */ --p-target-min: var(--target-min); --p-control-height: var(--control-h); --p-control-height-s: var(--control-h-s); --p-field-height: var(--field-h); /* Плотность варианта */ --p-row-min: var(--row-min); --p-row-pad-y: var(--row-pad-y); --p-row-pad-x: var(--row-pad-x); --p-row-gap: var(--row-gap); --p-block-pad: var(--block-pad); --p-block-gap: var(--block-gap); --p-section-gap: var(--section-gap); --p-header-h: var(--header-h); /* Раскладка */ --p-page-gutter: var(--page-gutter); --p-grid-gap: var(--grid-gap); --p-grid-cols: var(--grid-cols); --p-nav-w: var(--nav-w); --p-rail-w: var(--rail-w); --p-bottom-nav-h: var(--bottom-nav-h); --p-content-max: var(--content-max); --p-list-w: var(--list-w); --p-aside-w: var(--aside-w); --p-measure: var(--measure); /* Движение */ --p-dur-fast: var(--dur-fast); --p-dur-panel: var(--dur-panel); --p-ease: var(--ease); /* Профиль «Геометрия» (B, FOUNDATION.md § 19): дисплейная гарнитура, мотив знака, ромб шага */ --p-font-display: var(--font-display); /* только .t-display-hero, .t-display-title от 768 px, .t-figure и декоративные цифры */ --p-tracking-display: var(--tracking-display); --p-type-title-font: var(--type-title-font); --p-type-title-tracking: var(--type-title-tracking); --p-deco-on-brand: var(--deco-on-brand); --p-deco-ghost: var(--deco-ghost); --p-deco-angle: var(--deco-angle); --p-cut: var(--cut); --p-plane-h: var(--plane-h); --p-plane-band-h: var(--plane-band-h); --p-deco-zone: var(--deco-zone); --p-deco-zone-band: var(--deco-zone-band); --p-deco-digit: var(--deco-digit); --p-deco-digit-band: var(--deco-digit-band); --p-deco-digit-login: var(--deco-digit-login); --p-deco-digit-ghost: var(--deco-digit-ghost); --p-deco-lh: var(--deco-lh); --p-deco-arc: var(--deco-arc); --p-deco-arc-w: var(--deco-arc-w); --p-step-diamond: var(--step-diamond); --p-dur-deco: var(--dur-deco); } /* ===== @fonts ===== */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/golos-text/golos-text-cyrillic-400-normal.woff2?v=15a5cbadfc1aa7a5") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/golos-text/golos-text-latin-400-normal.woff2?v=c8246f55dbddb17c") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/golos-text/golos-text-cyrillic-600-normal.woff2?v=1df9c46f33069094") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/golos-text/golos-text-latin-600-normal.woff2?v=ecd56e7dae8376b3") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/unbounded/unbounded-cyrillic-600-normal.woff2?v=59a9e6e0927fa850") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/unbounded/unbounded-latin-600-normal.woff2?v=616878858361f1a4") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== css/base.css ===== */ /* ========================================================================== Портал 1535 — база интерфейса (модуль Ui, E0-T3). Только контракт --p-* (ARCHITECTURE.md § 9.2): без литералов цвета, кегля, отступа, радиуса и тени. Эталон — docs/design/redesign/_src/components.css. Шрифт Golos Text подключает E11-T7 (woff2 со своего сервера); до этого — системный запасной стек из --p-font-text, без обращений к чужим серверам. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--p-space-4); } body { margin: 0; min-height: 100vh; background: var(--p-bg); color: var(--p-text); font-family: var(--p-font-text); font-size: var(--p-fs-md); line-height: var(--p-lh-md); font-weight: var(--p-fw-regular); -webkit-font-smoothing: antialiased; hyphens: manual; overflow-wrap: break-word; } h1, h2, h3, h4, h5, p, ul, ol, dl, dd, dt, figure { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; line-height: inherit; font-weight: var(--p-fw-semibold); } /* кегль заголовка — роль класса: .t-screen, .t-block */ ul, ol { list-style: none; } b, strong, th { font-weight: var(--p-fw-semibold); } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; } button { cursor: pointer; } svg { max-width: 100%; } table { border-collapse: collapse; } [hidden] { display: none !important; } /* Табличные цифры — только там, где числа стоят столбиком (FOUNDATION.md, § 6.3) */ td, th, time, .num, .count, .count-attention, .code, .date, .mark { font-variant-numeric: var(--p-numeric); } a { color: var(--p-link); text-decoration: underline; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: var(--p-line-strong); } .t-link { display: inline-flex; align-items: center; min-height: var(--p-target-min); } :focus-visible { outline: var(--p-focus-width) solid var(--p-focus); outline-offset: var(--p-focus-offset); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .nw { white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Ссылка «Перейти к содержимому»: видна при фокусе с клавиатуры */ .skip-link { position: absolute; left: var(--p-space-2); top: var(--p-space-2); z-index: 10; display: inline-flex; align-items: center; min-height: var(--p-target-min); padding: var(--p-space-2) var(--p-space-4); border-radius: var(--p-radius-sm); background: var(--p-inverse-bg); color: var(--p-on-inverse); transform: translateY(-200%); } .skip-link:focus { transform: none; } .skip-link:focus-visible { outline-color: var(--p-on-inverse); } /* ----- Типографика: 10 стилей ----- */ .sm { font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .md { font-size: var(--p-fs-md); line-height: var(--p-lh-md); } .strong { font-weight: var(--p-fw-semibold); } .regular { font-weight: var(--p-fw-regular); } .muted { color: var(--p-text-muted); } .attention { color: var(--p-attention); } .t-hero { font-size: var(--p-type-hero-fs); line-height: var(--p-type-hero-lh); font-weight: var(--p-fw-semibold); } .t-screen { font-size: var(--p-type-screen-fs); line-height: var(--p-type-screen-lh); font-weight: var(--p-fw-semibold); } .t-block { font-size: var(--p-type-block-fs); line-height: var(--p-type-block-lh); font-weight: var(--p-fw-semibold); } .t-xs { font-size: var(--p-fs-xs); line-height: var(--p-lh-xs); } .measure { max-width: var(--p-measure); } /* ----- Значки и знак ----- */ .ic { width: var(--p-icon-m); height: var(--p-icon-m); flex: none; fill: none; stroke: currentColor; stroke-width: var(--p-icon-stroke); stroke-linecap: round; stroke-linejoin: round; } .ic-s { width: var(--p-icon-s); height: var(--p-icon-s); } .ic-l { width: var(--p-icon-l); height: var(--p-icon-l); } .emblem { display: block; flex: none; width: var(--p-space-8); height: var(--p-space-8); } .em-plate { fill: var(--p-emblem-plate); } .em-mark { fill: var(--p-emblem-fill); } .em-white .em-plate { fill: transparent; } .em-white .em-mark { fill: var(--p-on-brand); } /* ===== css/components.css ===== */ /* ========================================================================== Портал 1535 — компоненты x-ui::* (модуль Ui, E0-T3). Только контракт --p-* (ARCHITECTURE.md § 9.2–9.3): без литералов цвета, кегля, отступа, радиуса и тени. Правила, состояния и роли цвета — FOUNDATION.md § 10; эталон вёрстки — docs/design/redesign/_src/components.css (переведён на псевдонимы контракта). Полное оформление и прививки — E11-T2; API компонентов зафиксирован в E0-T3. ========================================================================== */ /* ----- Статус: значок + слово; три громкости ----- */ .status { display: inline-flex; align-items: flex-start; gap: var(--p-space-2); justify-self: start; align-self: flex-start; max-width: 100%; color: var(--p-text); } .status > .ic { width: var(--p-icon-m); height: var(--p-icon-m); margin-top: calc((var(--p-lh-md) - var(--p-icon-m)) / 2); } .status.sm { font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .status.sm > .ic { width: var(--p-icon-status); height: var(--p-icon-status); margin-top: calc((var(--p-lh-sm) - var(--p-icon-status)) / 2); } /* «Ваш ход, срок горит» — красная плашка: слово и залитый значок цветом on-attention. Признак формы, а не только цвета: в оттенках серого и при дальтонизме плашка остаётся самым тяжёлым пятном строки (FOUNDATION.md, § 4) */ .status-action { padding: 0 var(--p-space-2); border-radius: var(--p-radius-sm); background: var(--p-attention); color: var(--p-on-attention); font-weight: var(--p-fw-semibold); } .status-done { color: var(--p-text-muted); } /* ----- Кнопки ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--p-space-2); min-height: var(--p-control-height); min-width: var(--p-target-min); padding: 0 var(--p-space-4); border: var(--p-line-thin) solid transparent; border-radius: var(--p-radius-sm); background: transparent; color: var(--p-accent); font-size: var(--p-fs-md); line-height: var(--p-lh-md); font-weight: var(--p-fw-semibold); text-decoration: none; white-space: nowrap; transition: background-color var(--p-dur-fast) var(--p-ease); } .btn-primary { background: var(--p-accent); color: var(--p-on-accent); } .btn-primary:hover, .btn-primary.is-hover { background: var(--p-accent-hover); } .btn-primary:active, .btn-primary.is-press { background: var(--p-accent-press); } .btn-secondary { border-color: var(--p-accent); } .btn-secondary:hover, .btn-secondary.is-hover, .btn-quiet:hover, .btn-quiet.is-hover, .btn-neutral:hover, .btn-neutral.is-hover { background: var(--p-hover); } .btn-secondary:active, .btn-secondary.is-press, .btn-quiet:active, .btn-quiet.is-press, .btn-neutral:active, .btn-neutral.is-press { background: var(--p-press); } .btn-quiet { padding: 0 var(--p-space-3); } /* Необратимое действие на экране — нейтральная кнопка с корзиной; красная заливка — только в окне подтверждения */ .btn-neutral { color: var(--p-text); border-color: var(--p-field-border); } .btn-danger-fill { background: var(--p-attention); color: var(--p-on-attention); } .btn-danger-fill:hover, .btn-danger-fill.is-hover { background: var(--p-attention-hover); } .btn:disabled { background: var(--p-surface-sunken); border-color: var(--p-border); color: var(--p-text-disabled); cursor: not-allowed; } .btn-quiet:disabled { background: transparent; border-color: transparent; } .btn-s { min-height: var(--p-control-height-s); padding: 0 var(--p-space-3); } .btn-block { width: 100%; } /* ----- Поля и выбор ----- */ .field { display: grid; gap: var(--p-space-1); align-content: start; } .field > .label, legend { font-weight: var(--p-fw-semibold); } .hint { font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); color: var(--p-text-muted); } .input { width: 100%; min-height: var(--p-field-height); padding: 0 var(--p-space-3); border: var(--p-line-thin) solid var(--p-field-border); border-radius: var(--p-radius-sm); background: var(--p-bg); color: var(--p-text); font-size: var(--p-fs-md); line-height: var(--p-lh-md); } textarea.input { min-height: calc(var(--p-field-height) * 2.4); padding: var(--p-space-2) var(--p-space-3); resize: vertical; } .input::placeholder { color: var(--p-text-muted); opacity: 1; } .input:hover, .input.is-hover { border-color: var(--p-text-muted); } .input:focus-visible, .input.is-focus { outline: var(--p-focus-width) solid var(--p-focus); outline-offset: var(--p-focus-offset); border-color: var(--p-accent); } .input[aria-invalid="true"] { border: var(--p-line-strong) solid var(--p-attention); padding-inline: calc(var(--p-space-3) - var(--p-line-thin)); } .input:disabled { background: var(--p-surface-sunken); border-color: var(--p-border); color: var(--p-text-disabled); cursor: not-allowed; } .err { display: flex; gap: var(--p-space-2); align-items: flex-start; color: var(--p-attention); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .err > .ic { width: var(--p-icon-s); height: var(--p-icon-s); margin-top: calc((var(--p-lh-sm) - var(--p-icon-s)) / 2); } .select { position: relative; } .select select { appearance: none; -webkit-appearance: none; padding-right: var(--p-space-12); } .select > .ic { position: absolute; right: var(--p-space-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--p-text-muted); } .with-icon { position: relative; } .with-icon > .ic { position: absolute; left: var(--p-space-3); top: 50%; transform: translateY(-50%); color: var(--p-text-muted); pointer-events: none; } .with-icon > .input { padding-left: calc(var(--p-space-3) * 2 + var(--p-icon-m)); } .check { position: relative; display: flex; gap: var(--p-space-3); align-items: flex-start; min-height: var(--p-target-min); padding-block: var(--p-space-2); cursor: pointer; } .check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .box { flex: none; display: grid; place-items: center; width: var(--p-icon-m); height: var(--p-icon-m); margin-top: calc((var(--p-lh-md) - var(--p-icon-m)) / 2); border: var(--p-line-thin) solid var(--p-field-border); border-radius: var(--p-radius-sm); background: var(--p-bg); color: var(--p-on-accent); } .box > .ic { width: var(--p-icon-s); height: var(--p-icon-s); visibility: hidden; } .check input:checked + .box { background: var(--p-accent); border-color: var(--p-accent); } .check input:checked + .box > .ic { visibility: visible; } .check input:focus-visible + .box { outline: var(--p-focus-width) solid var(--p-focus); outline-offset: var(--p-focus-offset); } .check input:disabled + .box { background: var(--p-surface-sunken); border-color: var(--p-border); } .check:has(input:disabled) { color: var(--p-text-disabled); cursor: not-allowed; } .is-selected .box { border-color: var(--p-text-muted); } /* флажок в выбранной строке: 5,16 и 5,75 : 1 к подложке */ .radio .box { border-radius: var(--p-radius-round); } .radio input:checked + .box { background: var(--p-bg); border: var(--p-line-strong) solid var(--p-accent); } .radio .dotmark { display: block; width: calc(var(--p-icon-m) / 2); height: calc(var(--p-icon-m) / 2); border-radius: var(--p-radius-round); background: var(--p-accent); visibility: hidden; } .radio input:checked + .box .dotmark { visibility: visible; } fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; margin-bottom: var(--p-space-1); } /* Переключатель: контур и положение ручки; без индиго-заливки дорожки (заливка — только у главной кнопки) */ .switch { display: flex; align-items: center; gap: var(--p-space-3); min-height: var(--p-target-min); cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .switch-track { position: relative; flex: none; width: calc(var(--p-icon-l) * 5 / 3); height: var(--p-icon-l); border: var(--p-line-thin) solid var(--p-field-border); border-radius: var(--p-radius-round); background: var(--p-bg); } .switch-knob { position: absolute; top: 50%; left: var(--p-space-1); width: var(--p-icon-s); height: var(--p-icon-s); margin-top: calc(var(--p-icon-s) / -2); border-radius: var(--p-radius-round); background: var(--p-text-muted); transition: left var(--p-dur-fast) var(--p-ease); } .switch input:checked + .switch-track { border: var(--p-line-strong) solid var(--p-accent); } .switch input:checked + .switch-track .switch-knob { left: calc(100% - var(--p-icon-s) - var(--p-space-1) + var(--p-line-thin)); background: var(--p-accent); } .switch input:focus-visible + .switch-track { outline: var(--p-focus-width) solid var(--p-focus); outline-offset: var(--p-focus-offset); } .switch:has(input:disabled) { color: var(--p-text-disabled); cursor: not-allowed; } .switch input:disabled + .switch-track { border-color: var(--p-border); background: var(--p-surface-sunken); } .switch input:disabled + .switch-track .switch-knob { background: var(--p-text-disabled); } .switch-state { color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } /* ----- Чипы, сегменты, вкладки ----- */ .chips { display: flex; flex-wrap: wrap; gap: var(--p-space-2); } .chip { display: inline-flex; align-items: center; gap: var(--p-space-2); min-height: var(--p-control-height-s); padding: 0 var(--p-space-3); border: var(--p-line-thin) solid var(--p-field-border); border-radius: var(--p-radius-sm); background: var(--p-bg); color: var(--p-text); } .chip:hover, .chip.is-hover { background: var(--p-hover); } .chip[aria-pressed="true"] { border: var(--p-line-strong) solid var(--p-accent); padding-inline: calc(var(--p-space-3) - var(--p-line-thin)); color: var(--p-accent); font-weight: var(--p-fw-semibold); } .chip:disabled { color: var(--p-text-disabled); border-color: var(--p-border); background: var(--p-bg); cursor: not-allowed; } .seg { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: var(--p-space-1); padding: var(--p-space-1); border-radius: var(--p-radius-sm); background: var(--p-surface-sunken); border: var(--p-line-thin) solid var(--p-border); } .seg label { position: relative; display: inline-flex; align-items: center; min-height: var(--p-control-height-s); padding: 0 var(--p-space-3); border: var(--p-line-strong) solid transparent; border-radius: var(--p-radius-sm); cursor: pointer; } .seg label:hover { background: var(--p-press); } .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .seg label:has(input:checked) { background: var(--p-bg); border-color: var(--p-accent); color: var(--p-accent); font-weight: var(--p-fw-semibold); } .seg label:has(input:focus-visible) { outline: var(--p-focus-width) solid var(--p-focus); outline-offset: var(--p-focus-offset); } .tabs { display: flex; gap: var(--p-space-1); border-bottom: var(--p-line-thin) solid var(--p-border); overflow-x: auto; } .tab { position: relative; display: inline-flex; align-items: center; gap: var(--p-space-2); min-height: var(--p-control-height); padding: 0 var(--p-space-3); border: 0; background: none; color: var(--p-text); white-space: nowrap; } .tab:hover { background: var(--p-hover); } .tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--p-accent); font-weight: var(--p-fw-semibold); } .tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--p-space-3); right: var(--p-space-3); bottom: 0; height: var(--p-line-indicator); background: var(--p-accent); } .tab:focus-visible { outline-offset: calc(-1 * var(--p-focus-width)); } .tabpanel { padding-top: var(--p-space-4); } /* ----- Метки и счётчики: «ждут вас» — залитый круг; «непрочитано» — число без заливки ----- */ .meta { display: block; color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .meta-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--p-space-2); } .attr { display: inline-flex; align-items: center; gap: var(--p-space-1); } .attr > .ic { width: var(--p-icon-s); height: var(--p-icon-s); } .count { color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); font-weight: var(--p-fw-regular); } .count-attention { display: inline-grid; place-items: center; min-width: var(--p-icon-l); height: var(--p-icon-l); padding: 0 var(--p-space-1); border: var(--p-line-strong) solid var(--p-bg); border-radius: var(--p-radius-round); background: var(--p-attention); color: var(--p-on-attention); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); font-weight: var(--p-fw-semibold); } .avatar { display: inline-grid; place-items: center; flex: none; width: var(--p-space-8); height: var(--p-space-8); border-radius: var(--p-radius-round); background: var(--p-surface-sunken); border: var(--p-line-thin) solid var(--p-border); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); font-weight: var(--p-fw-semibold); color: var(--p-text); } .tip-wrap { position: relative; display: inline-flex; } .tooltip { position: absolute; left: 0; top: calc(100% + var(--p-space-2)); z-index: 2; width: max-content; max-width: min(280px, 80vw); padding: var(--p-space-2) var(--p-space-3); border-radius: var(--p-radius-sm); background: var(--p-inverse-bg); color: var(--p-on-inverse); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); box-shadow: var(--p-shadow-overlay); } .tooltip.is-static { position: static; } /* ----- Строки, таблица, карточка ----- */ .list { border-top: var(--p-line-thin) solid var(--p-border); } .row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--p-row-gap) var(--p-space-4); align-items: start; min-height: var(--p-row-min); padding: var(--p-row-pad-y) var(--p-row-pad-x); border-bottom: var(--p-line-thin) solid var(--p-border); } .row:hover, .row.is-hover { background: var(--p-hover); } .row.is-selected { background: var(--p-accent-soft); } .row.is-selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p-line-indicator); background: var(--p-accent); } .row-main { display: grid; gap: var(--p-row-gap); min-width: 0; } .row-title { display: block; min-width: 0; } .row-sub { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--p-space-2); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); color: var(--p-text-muted); } .row-sub > .status { margin-right: var(--p-space-1); } .row-date { margin-top: calc((var(--p-lh-md) - var(--p-lh-sm)) / 2); color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .row.is-unread .row-title { font-weight: var(--p-fw-semibold); } /* Точка «непрочитано» — в поле строки, не сдвигает кромку текста */ .dot-unread { position: absolute; left: calc(var(--p-space-1) / 2); top: calc(var(--p-row-pad-y) + (var(--p-lh-md) - var(--p-space-2)) / 2); width: var(--p-space-2); height: var(--p-space-2); border-radius: var(--p-radius-round); background: var(--p-text); } .row-aside { display: grid; gap: var(--p-space-2); justify-items: end; text-align: right; } a.row-link { color: inherit; text-decoration: none; } a.row-link:hover .row-title { text-decoration: underline; } /* Компактная строка C рядом с деталями: название в одну строку, полное — в панели деталей (исключение из ТП-04) */ .row-compact .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-compact .row-sub { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; } .row-compact .row-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; } .card { display: grid; gap: var(--p-space-3); align-content: start; padding: var(--p-block-pad); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); background: var(--p-bg); } .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--p-space-2) var(--p-space-4); } .kv dt { margin-top: calc((var(--p-lh-md) - var(--p-lh-sm)) / 2); color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } /* Ссылка-значение (e-mail, телефон) переносится внутри колонки, а не выходит за край узкого экрана. */ .kv dd > .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: start; } .table-wrap { overflow-x: auto; border-top: var(--p-line-thin) solid var(--p-border); } .table { width: 100%; } .table th, .table td { padding: var(--p-space-3) var(--p-space-4); text-align: left; vertical-align: top; border-bottom: var(--p-line-thin) solid var(--p-border); } .table thead th { position: sticky; top: 0; background: var(--p-surface-sunken); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); color: var(--p-text-muted); } .table tbody tr:hover { background: var(--p-hover); } .num { text-align: right; } /* ----- Сообщение (alert) и сводка ошибок: одна форма ----- */ .alert { display: grid; grid-template-columns: var(--p-icon-m) minmax(0, 1fr); gap: var(--p-space-1) var(--p-space-3); align-items: start; padding: var(--p-space-3) var(--p-space-4); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); background: var(--p-surface-sunken); color: var(--p-text); } .alert > .ic { margin-top: calc((var(--p-lh-md) - var(--p-icon-m)) / 2); } .alert-body { display: grid; gap: var(--p-space-1); } .alert-title { font-weight: var(--p-fw-semibold); } .alert-error { border: var(--p-line-strong) solid var(--p-attention); padding: calc(var(--p-space-3) - var(--p-line-thin)) calc(var(--p-space-4) - var(--p-line-thin)); } .alert-error > .ic { color: var(--p-attention); } .alert-error a { color: var(--p-text); } /* ссылки на поля — графит с подчёркиванием: индиго не касается красной рамки (ЦВ-11) */ /* ----- Шапка страницы: крошки, подпись раздела, заголовок, действия ----- */ .page-header { display: grid; gap: var(--p-space-2); } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--p-space-1); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); color: var(--p-text-muted); } .crumbs li { display: inline-flex; align-items: center; gap: var(--p-space-1); } .crumbs li + li::before { content: "›"; color: var(--p-text-muted); } .crumbs a { display: inline-flex; align-items: center; min-height: var(--p-target-min); } .page-header-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--p-space-3) var(--p-space-6); } .page-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-2); } /* ----- Поверх: панель, окно, меню, тост ----- */ .panel, .dialog, .menu, .search-results, .dp-pop { --p-surface-sunken: var(--p-hover); } /* зона внутри «поверх» — на ступень светлее панели в тёмной теме */ .panel { display: flex; flex-direction: column; width: 100%; max-width: 400px; background: var(--p-surface-raised); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); box-shadow: var(--p-shadow-overlay); } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-3); padding: var(--p-space-2) var(--p-space-2) var(--p-space-2) var(--p-space-4); border-bottom: var(--p-line-thin) solid var(--p-border); } .panel-group { padding: var(--p-space-4) var(--p-space-4) var(--p-space-1); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); font-weight: var(--p-fw-semibold); color: var(--p-text-muted); } .panel .row { --p-row-pad-x: var(--p-space-4); } .panel-foot { display: flex; flex-wrap: wrap; gap: var(--p-space-2); justify-content: space-between; padding: var(--p-space-2); border-top: var(--p-line-thin) solid var(--p-border); } .dialog { display: grid; gap: var(--p-space-4); width: 100%; max-width: 520px; padding: var(--p-space-6); background: var(--p-surface-raised); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); box-shadow: var(--p-shadow-overlay); } .dialog-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-3); justify-content: flex-end; } .doc-line { display: grid; grid-template-columns: var(--p-icon-m) minmax(0, 1fr); gap: var(--p-space-3); padding: var(--p-space-3) 0; border-top: var(--p-line-thin) solid var(--p-border); border-bottom: var(--p-line-thin) solid var(--p-border); } .doc-line > .ic { margin-top: calc((var(--p-lh-md) - var(--p-icon-m)) / 2); } .code { word-spacing: var(--p-space-1); } .menu { display: grid; width: fit-content; max-width: 100%; min-width: min(240px, 100%); padding: var(--p-space-1) 0; background: var(--p-surface-raised); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); box-shadow: var(--p-shadow-overlay); } .menu-item { display: flex; align-items: center; gap: var(--p-space-3); min-height: var(--p-control-height); padding: 0 var(--p-space-4); border: 0; background: none; color: var(--p-text); text-align: left; text-decoration: none; } .menu-item:hover, .menu-item.is-hover { background: var(--p-hover); } .menu-item:disabled { color: var(--p-text-disabled); cursor: not-allowed; background: none; } .menu-sep { height: 0; margin: var(--p-space-1) 0; border-top: var(--p-line-thin) solid var(--p-border); } .toast { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-1) var(--p-space-3); min-height: var(--p-space-12); padding: var(--p-space-1) var(--p-space-4); border-radius: var(--p-radius-md); background: var(--p-inverse-bg); color: var(--p-on-inverse); box-shadow: var(--p-shadow-overlay); max-width: 100%; } .toast .btn { margin-right: calc(-1 * var(--p-space-3)); color: var(--p-on-inverse); text-decoration: underline; text-underline-offset: 0.2em; } .toast .btn:hover { background: transparent; text-decoration-thickness: var(--p-line-strong); } .toast :focus-visible { outline-color: var(--p-on-inverse); } .empty { display: grid; gap: var(--p-space-3); justify-items: start; padding: var(--p-space-8) var(--p-space-6); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); } .empty > .ic { color: var(--p-text-muted); } .skel-row { display: grid; gap: var(--p-space-2); padding: var(--p-space-3) 0; border-bottom: var(--p-line-thin) solid var(--p-border); } .skel { display: block; height: var(--p-space-4); border-radius: var(--p-radius-sm); background: var(--p-press); } .skel-meta { height: var(--p-space-3); } /* ----- Шкала прогресса: всегда индиго; перебор — словом ----- */ .progress { display: grid; gap: var(--p-space-1); } .progress-head { display: flex; justify-content: space-between; gap: var(--p-space-3); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .progress-track { height: var(--p-space-2); border-radius: var(--p-radius-sm); background: var(--p-border); overflow: hidden; } .progress-fill { height: 100%; border-radius: var(--p-radius-sm); background: var(--p-accent); } /* ----- Поиск с результатами по группам ----- */ .search-pop { position: relative; display: grid; gap: var(--p-space-1); } .search-results { display: grid; padding: var(--p-space-1) 0; background: var(--p-surface-raised); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); box-shadow: var(--p-shadow-overlay); } .search-group { padding: var(--p-space-2) var(--p-space-4) var(--p-space-1); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); font-weight: var(--p-fw-semibold); color: var(--p-text-muted); } .search-item { display: grid; grid-template-columns: var(--p-icon-m) minmax(0, 1fr); gap: var(--p-space-3); align-items: start; min-height: var(--p-control-height); padding: var(--p-space-2) var(--p-space-4); color: var(--p-text); text-decoration: none; } .search-item > .ic { margin-top: calc((var(--p-lh-md) - var(--p-icon-m)) / 2); color: var(--p-text-muted); } .search-item:hover, .search-item.is-hover { background: var(--p-hover); } .search-item mark { background: none; color: inherit; font-weight: var(--p-fw-semibold); } /* ----- Страницы (pagination) ----- */ .pager ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-1); } .pager a, .pager .pg { display: inline-grid; place-items: center; min-width: var(--p-control-height); min-height: var(--p-control-height); padding: 0 var(--p-space-2); border: var(--p-line-strong) solid transparent; border-radius: var(--p-radius-sm); color: var(--p-text); text-decoration: none; } .pager a:hover { background: var(--p-hover); } .pager a[aria-current="page"] { border-color: var(--p-accent); color: var(--p-accent); font-weight: var(--p-fw-semibold); } .pager .pg-edge { gap: var(--p-space-1); grid-auto-flow: column; color: var(--p-accent); font-weight: var(--p-fw-semibold); } .pager span.pg { color: var(--p-text-muted); } .pager button.pg { background: none; font-weight: var(--p-fw-semibold); } .pager button.pg:disabled { color: var(--p-text-disabled); cursor: not-allowed; } /* ----- Загрузка файла: пунктир = «ещё не существует» ----- */ /* Колонка — по ширине зоны, а не по содержимому: собственная ширина поля файла (кнопка и «Файл не выбран» шрифтом Golos) на 360 px шире колонки, и колонка auto растягивала всю страницу */ .drop { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--p-space-2); padding: var(--p-space-4); border: var(--p-line-thin) dashed var(--p-field-border); border-radius: var(--p-radius-md); } .drop.is-hover { background: var(--p-hover); border-color: var(--p-text-muted); } .drop.is-invalid { border: var(--p-line-strong) dashed var(--p-attention); padding: calc(var(--p-space-4) - var(--p-line-thin)); } .files { display: grid; } .file { display: grid; grid-template-columns: var(--p-space-12) minmax(0, 1fr) auto; gap: var(--p-space-3); align-items: center; padding: var(--p-space-2) 0; border-bottom: var(--p-line-thin) solid var(--p-border); } .thumb { display: grid; place-items: center; width: var(--p-space-12); height: var(--p-space-12); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-sm); background: var(--p-surface-sunken); color: var(--p-text-muted); } /* ----- Выбор даты ----- */ .datepick { display: grid; gap: var(--p-space-2); width: fit-content; max-width: 100%; } .dp-pop { display: grid; gap: var(--p-space-2); padding: var(--p-space-3) var(--p-space-1); background: var(--p-surface-raised); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); box-shadow: var(--p-shadow-overlay); } .dp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-2); } .dp-grid { display: grid; grid-template-columns: repeat(7, minmax(var(--p-target-min), var(--p-control-height))); gap: 0; } .dp-dow { display: grid; place-items: center; height: var(--p-control-height-s); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); color: var(--p-text-muted); } .dp-day { display: grid; place-items: center; width: 100%; height: var(--p-control-height); border: var(--p-line-strong) solid transparent; border-radius: var(--p-radius-sm); background: none; color: var(--p-text); } .dp-day:hover { background: var(--p-hover); } .dp-day.is-today { border-color: var(--p-text-muted); } .dp-day[aria-pressed="true"] { background: var(--p-accent-soft); border-color: var(--p-accent); color: var(--p-accent); font-weight: var(--p-fw-semibold); } .dp-day:disabled { color: var(--p-text-disabled); cursor: not-allowed; background: none; } /* ----- Штамп ПЭП: графит, поворот −4° только на экране ----- */ .stamp { display: grid; gap: var(--p-space-1); width: fit-content; max-width: 100%; padding: var(--p-space-3) var(--p-space-4); border: var(--p-line-strong) solid var(--p-text); border-radius: var(--p-radius-sm); color: var(--p-text); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); transform: rotate(-4deg); } .stamp-title { font-weight: var(--p-fw-semibold); } .stamp dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--p-space-3); } .stamp dt { color: var(--p-text-muted); } /* ----- Шаги процесса: текущий — залитый графитовый круг с номером (не «кольцо с точкой» радиокнопки) ----- */ .steps-c { container-type: inline-size; } .steps { display: grid; } .step-i { position: relative; display: grid; grid-template-columns: var(--p-icon-l) minmax(0, 1fr); gap: var(--p-space-3); padding-bottom: var(--p-space-6); } .step-i:last-child { padding-bottom: 0; } .step-i::after { content: ""; position: absolute; left: calc(var(--p-icon-l) / 2); top: calc(var(--p-icon-l) + var(--p-space-1)); bottom: var(--p-space-1); border-left: var(--p-line-thin) solid var(--p-text-muted); } .step-i.is-current::after, .step-i.is-future::after { border-left-style: dashed; border-left-color: var(--p-field-border); } .step-i:last-child::after { display: none; } .mark { display: grid; place-items: center; width: var(--p-icon-l); height: var(--p-icon-l); border: var(--p-line-thin) solid var(--p-text-muted); border-radius: var(--p-radius-round); color: var(--p-text-muted); background: var(--p-bg); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); font-weight: var(--p-fw-semibold); } .mark > .ic { width: var(--p-icon-s); height: var(--p-icon-s); } .is-current .mark { background: var(--p-text); border-color: var(--p-text); color: var(--p-bg); } .is-future .mark { border-style: dashed; border-color: var(--p-field-border); font-weight: var(--p-fw-regular); } .step-body { display: grid; gap: 0; } .is-done .step-name, .is-future .step-name { color: var(--p-text-muted); } .is-current .step-name { font-weight: var(--p-fw-semibold); } [data-variant="c"] .step-i { padding-bottom: var(--p-space-3); } @container (min-width: 720px) { .steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--p-space-2); } .step-i { grid-template-columns: minmax(0, 1fr); gap: var(--p-space-2); padding-bottom: 0; } [data-variant="c"] .step-i { padding-bottom: 0; } .step-i::after { left: calc(var(--p-icon-l) + var(--p-space-2)); right: var(--p-space-2); top: calc(var(--p-icon-l) / 2); bottom: auto; border-left: 0; border-top: var(--p-line-thin) solid var(--p-text-muted); } .step-i.is-current::after, .step-i.is-future::after { border-top-style: dashed; border-top-color: var(--p-field-border); } } /* ----- Лента событий ----- */ .feed { display: grid; } .feed li { position: relative; display: grid; grid-template-columns: var(--p-icon-s) minmax(0, 1fr); gap: var(--p-space-3); padding-bottom: var(--p-space-4); } .feed li:last-child { padding-bottom: 0; } .feed li::before { content: ""; position: absolute; left: calc(var(--p-icon-s) / 2); top: var(--p-space-6); bottom: 0; border-left: var(--p-line-thin) solid var(--p-border); } .feed li:last-child::before { display: none; } .feed-dot { width: var(--p-space-2); height: var(--p-space-2); margin: calc((var(--p-lh-sm) - var(--p-space-2)) / 2) calc((var(--p-icon-s) - var(--p-space-2)) / 2) 0; border-radius: var(--p-radius-round); background: var(--p-text-muted); } .feed-body { display: grid; } .feed-quote { margin-top: var(--p-space-1); padding: var(--p-space-2) var(--p-space-3); border-radius: var(--p-radius-sm); background: var(--p-surface-sunken); } /* Список и детали (C): список 360, детали — остальное; уже 700 px — стек, на телефоне детали отдельным экраном */ .mdet { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; } .mdet-list { min-width: 0; min-height: 0; border-bottom: var(--p-line-thin) solid var(--p-border); overflow: hidden; } .mdet-list-head { display: grid; gap: var(--p-space-3); padding: var(--p-space-3) var(--p-row-pad-x); border-bottom: var(--p-line-thin) solid var(--p-border); } .mdet-detail { container: detail / inline-size; display: grid; gap: var(--p-space-6); align-content: start; padding: var(--p-block-pad) var(--p-space-6); min-width: 0; min-height: 0; overflow: hidden; } @container main (min-width: 700px) { .mdet { grid-template-columns: var(--p-list-w) minmax(0, 1fr); } .mdet-list { border-bottom: 0; border-right: var(--p-line-thin) solid var(--p-border); } } .detail-head { display: grid; gap: var(--p-space-2); } .detail-num { display: flex; align-items: center; gap: var(--p-space-1); } .detail-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-2); align-items: center; } .detail-cols { display: grid; gap: var(--p-space-6); } @container detail (min-width: 640px) { .detail-cols { grid-template-columns: minmax(0, 1fr) 224px; } } .docs-list li { display: grid; grid-template-columns: var(--p-icon-m) minmax(0, 1fr) auto; gap: var(--p-space-3); padding: var(--p-space-3) 0; border-bottom: var(--p-line-thin) solid var(--p-border); align-items: start; } .docs-list li:first-child { border-top: var(--p-line-thin) solid var(--p-border); } .docs-list li > .ic { margin-top: calc((var(--p-lh-md) - var(--p-icon-m)) / 2); } .doc-future { color: var(--p-text-muted); } /* ===== Дополнения E0-T3: поведение компонентов без JavaScript ===== */ /* Страница: область контента с полями и ограничением ширины */ .page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--p-section-gap); align-content: start; width: 100%; max-width: var(--p-content-max); padding: var(--p-space-6) var(--p-page-gutter) var(--p-space-8); } .page-header { display: grid; gap: var(--p-space-2); } .page-section { color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } /* Подсказка: видна по наведению и фокусу (Esc — E11-T2) */ .tip-wrap .tooltip { display: none; } .tip-wrap:hover .tooltip, .tip-wrap:focus-within .tooltip { display: block; } /* Окно — нативный : открывается кнопкой command="show-modal" без скриптов */ dialog.dialog { color: var(--p-text); } dialog.dialog:not([open]) { display: none; } dialog.dialog::backdrop { background: var(--p-scrim); } .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--p-space-3); } /* Меню «Ещё» и меню профиля — раскрытие
(работает без JavaScript) */ .disclosure { position: relative; } .disclosure > summary { list-style: none; } .disclosure > summary::-webkit-details-marker { display: none; } /* Ширина раскрытого меню — от экрана (с полями страницы), а не от кнопки: проценты у absolute считаются от
, и на телефоне меню сжималось до ширины аватара, а ФИО уходило за край экрана (горизонтальная прокрутка). */ .disclosure > .menu { position: absolute; right: 0; top: calc(100% + var(--p-space-1)); z-index: 5; min-width: min(240px, calc(100vw - 2 * var(--p-page-gutter))); max-width: calc(100vw - 2 * var(--p-page-gutter)); } .menu-item form { display: contents; } button.menu-item { width: 100%; font: inherit; cursor: pointer; } .menu-head { display: grid; padding: var(--p-space-2) var(--p-space-4); border-bottom: var(--p-line-thin) solid var(--p-border); } .menu-note { color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } /* Таблица: на узком контейнере — список строк */ .table-c { container-type: inline-size; } .table caption { text-align: left; padding: 0 0 var(--p-space-2); font-weight: var(--p-fw-semibold); } .table-list { display: none; } @container (max-width: 559px) { .table-c .table-wrap { display: none; } .table-c .table-list { display: block; border-top: var(--p-line-thin) solid var(--p-border); } } .table-list .row dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--p-space-3); } .table-list .row dt { color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-md); } /* Список и детали: вариант A (data-layout="stack") — список и деталь отдельными страницами */ [data-layout="stack"] .mdet { grid-template-columns: minmax(0, 1fr); } [data-layout="stack"] .mdet[data-selected] .mdet-list { display: none; } [data-layout="stack"] .mdet:not([data-selected]) .mdet-detail { display: none; } [data-layout="stack"] .mdet .mdet-list { border-right: 0; border-bottom: 0; } /* Номер с табличными цифрами; с copyable — копирование щелчком, Enter и пробелом (app.js, E11-T7) */ .number { display: inline-flex; align-items: center; gap: var(--p-space-1); font-variant-numeric: var(--p-numeric); } .number[data-copy] { min-height: var(--p-target-min); cursor: copy; } /* Метка-атрибут (badge) */ .badge { display: inline-flex; align-items: center; gap: var(--p-space-1); color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .badge > .ic { width: var(--p-icon-s); height: var(--p-icon-s); } /* Тосты: область уведомлений */ .toasts { position: fixed; left: var(--p-page-gutter); right: var(--p-page-gutter); bottom: calc(var(--p-bottom-nav-h) + var(--p-space-4)); z-index: 20; display: grid; justify-items: center; gap: var(--p-space-2); pointer-events: none; } .toasts > * { pointer-events: auto; } /* Сообщение клиентского кода (app.js, E11-T7) — та же форма сообщения, но поверх страницы: ошибка фонового действия */ .toasts > .alert { width: min(100%, var(--p-measure)); background: var(--p-surface-raised); box-shadow: var(--p-shadow-overlay); } .alert-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-2); margin-top: var(--p-space-1); } /* Поиск: поле со значком */ .search-form { display: flex; gap: var(--p-space-2); align-items: stretch; } .search-form > .with-icon { flex: 1 1 auto; } /* Прогресс: нативный (значение без встроенных стилей), всегда индиго; перебор — словом рядом */ .progress-bar { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: var(--p-space-2); border: 0; border-radius: var(--p-radius-sm); background: var(--p-border); color: var(--p-accent); overflow: hidden; } .progress-bar::-webkit-progress-bar { background: var(--p-border); border-radius: var(--p-radius-sm); } .progress-bar::-webkit-progress-value { background: var(--p-accent); border-radius: var(--p-radius-sm); } .progress-bar::-moz-progress-bar { background: var(--p-accent); border-radius: var(--p-radius-sm); } /* Выбор даты: нативное поле date (всплывающий месяц — E11-T2) */ .date-field { max-width: calc(var(--p-space-16) * 4); } /* Загрузка файла: скрытое поле, видимая кнопка — подпись */ .drop input[type="file"] { min-width: 0; max-width: 100%; min-height: var(--p-target-min); } /* ===== css/shell.css ===== */ /* ========================================================================== Портал 1535 — оболочка варианта B «Геометрия» (модуль Ui, E0-T3 → E11-T1; прототип docs/design/variants/b-geometriya-v2, FOUNDATION 2.2 § 7, § 19): шапка с верхней навигацией от 1180 px, рейка 88 px (768–1179 px), нижняя панель с «＋ Заявка» (до 767 px), меню профиля с темой и оформлением, подвал, макет без оболочки. Только контракт --p-*. Раскладка — контейнерными запросами (§ 7.2). Остальное оформление оболочки (крошки, бейджи, поиск в шапке) — E11-T3. ========================================================================== */ /* ----- Приложение ----- */ .app-c { container: app / inline-size; } .app { display: grid; min-height: 100vh; background: var(--p-bg); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "header" "body" "bottom"; } .app-header { grid-area: header; container: hdr / inline-size; position: relative; z-index: 6; } /* Содержимое и подвал: подвал — внизу окна на короткой странице и после содержимого на длинной. position: relative — блок-контейнер для скрытых подписей (.sr-only): иначе на телефоне они отсчитываются от корня и растягивают документ под областью прокрутки */ .app-body { grid-area: body; position: relative; display: flex; flex-direction: column; min-width: 0; } .app-main { container: main / inline-size; flex: 1 0 auto; min-width: 0; } .app-main:focus { outline: none; } /* Рейка — свой слой над содержимым (ниже шапки): её всплывающие меню «Ещё» и «Создать» перекрывают страницу, а не наоборот (прилипающая .rail — свой контекст наложения, и z-index меню действует только внутри него) */ .app-rail { display: none; min-height: 0; position: relative; z-index: 5; } .app-bottom { grid-area: bottom; } /* Содержимое не шире --p-content-max и по центру: верхняя навигация не занимает колонку */ [data-nav="topbar"] .app-main > .page { margin-inline: auto; } /* Телефон: шапка и нижняя панель — строки сетки, прокручивается только содержимое с подвалом, панель ничего не закрывает */ @container app (max-width: 767px) { .app { height: 100vh; height: 100dvh; min-height: 0; } .app-body { overflow-y: auto; overscroll-behavior: contain; } /* viewport-fit=cover: подписи ячеек — над системной полосой «домой» (iPhone) */ .app-bottom { padding-bottom: env(safe-area-inset-bottom); background: var(--p-bg); } } /* Прокручиваемая область получает фокус, только если в ней нет других целей (shell.js): кольцо — внутри области */ .app-body:focus-visible { outline-offset: calc(-1 * var(--p-focus-width)); } /* Планшет: рейка слева, шапка прилипает к верху окна */ @container app (min-width: 768px) { .app { grid-template-columns: var(--p-rail-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "header header" "rail body"; } .app-header { position: sticky; top: 0; } .app-rail { display: block; grid-area: rail; background: var(--p-surface-sunken); border-right: var(--p-line-thin) solid var(--p-border); } .app-bottom { display: none; } } /* От 1180 px — верхняя навигация, как в B: всё содержимое на полную ширину, рейки нет */ @container app (min-width: 1180px) { .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "body"; } .app-rail { display: none; } } /* ----- Шапка ----- */ .hdr { display: flex; align-items: center; gap: var(--p-space-3); min-height: var(--p-header-h); padding: 0 var(--p-space-2) 0 var(--p-page-gutter); border-bottom: var(--p-line-thin) solid var(--p-border); background: var(--p-bg); } .hdr-brand { display: flex; align-items: center; gap: var(--p-space-3); min-height: var(--p-target-min); min-width: 0; color: var(--p-text); text-decoration: none; } .hdr-brand:hover .hdr-title { text-decoration: underline; } .hdr-name { display: grid; white-space: nowrap; min-width: 0; } .hdr-title { font-weight: var(--p-fw-semibold); } .hdr-sub { display: none; color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .hdr-actions { display: flex; align-items: center; gap: var(--p-space-2); margin-left: auto; } .hdr-item { display: flex; align-items: center; } .hdr-create { display: none; } /* Общие классы шапки (ими пользуются и элементы модулей в шапке — например, плашка демо-стенда E13-T1): .hdr-sub виден от 600 px ширины шапки, .profile-name — от 900 px. Исключения варианта B ниже относятся только к подписи у знака и к имени у аватара */ @container hdr (min-width: 600px) { .hdr { padding-right: var(--p-page-gutter); } .hdr .hdr-sub { display: block; } } /* От 1180 px: поля шапки — по кромке содержимого (не шире --p-content-max, поэтому и на 1920 px места не больше 1376 px). Знак, верхняя навигация и правая часть (кнопки и элементы модулей в шапке) не сжимаются — пункты не наезжают на кнопки, а плашки модулей не рассыпаются на несколько строк; правая часть занимает остаток строки, а если не помещается — уходит второй строкой шапки целиком, без наложения и прокрутки вбок. Первая строка и тогда — во всю высоту шапки (знак не обрезается, полоса выбранного пункта — у её нижнего края) */ @container hdr (min-width: 1180px) { .hdr { flex-wrap: wrap; align-items: stretch; padding-inline: max(var(--p-page-gutter), calc((100% - var(--p-content-max)) / 2 + var(--p-page-gutter))); } .hdr > .hdr-brand, .hdr > .tnav { flex: none; } .hdr > .tnav { min-height: calc(var(--p-header-h) - var(--p-line-thin)); } .hdr-actions { flex: 1 0 auto; justify-content: flex-end; } .hdr > .hdr-brand, .hdr-actions { align-self: center; } .hdr-create { display: flex; } } /* «ГБОУ Школа № 1535» у знака на 1180–1365 px уступает место верхней навигации */ @container hdr (min-width: 1180px) and (max-width: 1365px) { .hdr-brand .hdr-sub { display: none; } } .icon-btn { position: relative; display: inline-grid; place-items: center; grid-auto-flow: column; gap: var(--p-space-2); min-width: var(--p-control-height); height: var(--p-control-height); padding: 0 var(--p-space-2); border: 0; border-radius: var(--p-radius-sm); background: transparent; color: var(--p-text); text-decoration: none; cursor: pointer; } .icon-btn:hover { background: var(--p-hover); } .icon-btn-s { min-width: var(--p-control-height-s); height: var(--p-control-height-s); padding: 0; } .btn-icon { padding: 0; min-width: var(--p-control-height); } .profile-name { display: none; max-width: calc(var(--p-space-16) * 3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @container hdr (min-width: 900px) { .profile-name { display: block; } } /* Имя у аватара от 1180 px уступает место верхней навигации и элементам модулей (оно есть в меню профиля; в прототипе B у аватара имени нет) */ @container hdr (min-width: 1180px) { .avatar-btn .profile-name { display: none; } } /* ----- Верхняя навигация (от 1180 px): пункт — текст 16, выбранный — индиго 600 и полоса 3 px снизу ----- */ .tnav { display: none; } @container hdr (min-width: 1180px) { .tnav { display: flex; min-width: 0; margin-left: var(--p-space-4); } } @container hdr (min-width: 1366px) { .tnav { margin-left: var(--p-space-6); } } .tnav-list { display: flex; align-items: stretch; } .tnav-list > li { display: flex; align-items: stretch; } .tnav-item { position: relative; display: inline-flex; align-items: center; gap: var(--p-space-1); min-height: var(--p-target-min); height: 100%; padding: 0 var(--p-space-2); border: 0; background: none; color: var(--p-text); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; } .tnav-item:hover { background: var(--p-hover); } .tnav-item[aria-current="page"], .tnav-item.is-current { color: var(--p-accent-soft-text); font-weight: var(--p-fw-semibold); } .tnav-item[aria-current="page"]::after, .tnav-item.is-current::after { content: ""; position: absolute; left: var(--p-space-2); right: var(--p-space-2); bottom: 0; height: var(--p-line-indicator); background: var(--p-accent); } .tnav-item:focus-visible { outline-offset: calc(-1 * var(--p-focus-width)); } .tnav-item > .ic-s { width: var(--p-icon-s); height: var(--p-icon-s); } .tnav-item > .count, .tnav-item > .count-attention { margin-left: var(--p-space-1); } .tnav .nav-menu { display: flex; height: 100%; } .tnav .nav-menu > .menu { left: 0; right: auto; top: 100%; } .tnav-menu[open] > summary > .ic-s { transform: rotate(180deg); } /* ----- Раскрывающиеся меню оболочки: группы и пункты ----- */ .menu-group { padding: var(--p-space-3) var(--p-space-4) var(--p-space-1); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); font-weight: var(--p-fw-semibold); color: var(--p-text-muted); } .nav-menu > .menu, .create-menu > .menu { min-width: min(calc(var(--p-space-16) * 4), calc(100vw - 2 * var(--p-page-gutter))); } .menu-item[aria-current="page"] { background: var(--p-accent-soft); color: var(--p-accent-soft-text); font-weight: var(--p-fw-semibold); } .menu-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--p-space-2); bottom: var(--p-space-2); width: var(--p-line-indicator); background: var(--p-accent); } .menu-item { position: relative; } /* ----- Меню профиля: имя, разделы (телефон), пункты модулей, тема и оформление ----- */ .avatar-btn { padding: 0 var(--p-space-1); } .profile-menu { width: min(calc(var(--p-space-16) * 5), calc(100vw - 2 * var(--p-page-gutter))); max-height: calc(100vh - var(--p-header-h) - var(--p-space-4)); overflow-y: auto; } .menu-profile { padding: var(--p-space-1) 0; border-top: var(--p-line-thin) solid var(--p-border); } .menu-head + .menu-profile { border-top: 0; } @container app (min-width: 768px) { .menu-phone { display: none; } } .menu-phone { padding-bottom: var(--p-space-1); } .look { display: grid; gap: var(--p-space-3); padding: var(--p-space-1) var(--p-space-4) var(--p-space-4); border-top: var(--p-line-thin) solid var(--p-border); } .look-group { display: grid; gap: var(--p-space-2); } .look-group > legend.menu-group { padding: var(--p-space-2) 0 0; margin-bottom: var(--p-space-2); } .look-hint { color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .look .seg { justify-self: stretch; flex-wrap: nowrap; } .look .seg label { flex: 1 1 auto; justify-content: center; padding: 0 var(--p-space-2); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); white-space: nowrap; } .look-save { justify-self: start; } .look[data-js] .look-save { display: none; } /* ----- Рейка (768–1179 px): «＋», пункт на всю ширину 88, подпись 13/16 с полями 8, полоса выбранного у края ----- */ .rail { position: sticky; top: var(--p-header-h); display: grid; align-content: start; gap: var(--p-space-1); padding: var(--p-space-3) 0; } @media (max-height: 720px) { .rail { position: static; } } .rail > li { display: grid; } .rail-item { position: relative; display: grid; justify-items: center; gap: var(--p-space-1); width: 100%; padding: var(--p-space-2); border: 0; background: none; color: var(--p-text); font: inherit; text-decoration: none; text-align: center; cursor: pointer; } .rail-item .t-xs { max-width: 100%; overflow-wrap: anywhere; } .rail-item:hover { background: var(--p-press); } .rail-item[aria-current="page"], .rail-item.is-current { background: var(--p-accent-soft); color: var(--p-accent-soft-text); font-weight: var(--p-fw-semibold); } .rail-item[aria-current="page"]::before, .rail-item.is-current::before { content: ""; position: absolute; left: 0; top: var(--p-space-2); bottom: var(--p-space-2); width: var(--p-line-indicator); background: var(--p-accent); } .rail-item > .count-attention { position: absolute; top: var(--p-space-1); left: calc(50% + var(--p-space-3)); } .rail-create-cell { justify-items: center; padding-bottom: var(--p-space-2); } .rail-create { min-width: var(--p-control-height); padding: 0; } .rail .nav-menu > .menu, .rail .create-menu > .menu { left: calc(100% + var(--p-space-1)); right: auto; top: 0; } .rail .nav-menu { display: grid; } /* ----- Нижняя панель (до 767 px): пять ячеек, в середине «＋ Заявка» — контур индиго, подпись цветом невыбранных ----- */ .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: var(--p-bottom-nav-h); border-top: var(--p-line-thin) solid var(--p-border); background: var(--p-bg); } /* Ячейка не шире своей доли панели: без min-width: 0 и колонки minmax(0, 1fr) длинная подпись (nowrap) растягивала ячейку до своей ширины, и на 360 px пять ячеек выходили за край и наезжали друг на друга (E9-T7: пятый пункт «Очереди»); теперь подпись обрезается многоточием. */ .bn-cell { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } .bn-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-1); min-height: var(--p-target-min); padding: var(--p-space-1) 0; border: 0; background: none; color: var(--p-text-muted); font: inherit; text-decoration: none; cursor: pointer; } .bn-item .t-xs { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-item[aria-current="page"], .bn-item.is-current { color: var(--p-accent-soft-text); } .bn-item[aria-current="page"] .t-xs, .bn-item.is-current .t-xs { font-weight: var(--p-fw-semibold); } .bn-item[aria-current="page"]::before, .bn-item.is-current::before { content: ""; position: absolute; top: 0; left: calc(50% - var(--p-space-4)); width: var(--p-space-8); height: var(--p-line-indicator); background: var(--p-accent); } .bn-item > .count-attention { position: absolute; top: var(--p-space-1); left: calc(50% + var(--p-space-3)); } .bn-create { color: var(--p-text-muted); } .bn-plus { display: grid; place-items: center; width: calc(var(--p-space-8) + var(--p-space-2)); height: calc(var(--p-space-6) + var(--p-space-1)); margin-block: calc((var(--p-icon-l) - var(--p-space-6) - var(--p-space-1)) / 2); border: var(--p-line-strong) solid var(--p-accent); border-radius: var(--p-radius-sm); color: var(--p-accent-soft-text); } .bn-cell .create-menu { display: grid; } .bn-cell .create-menu > .menu { top: auto; bottom: calc(100% + var(--p-space-1)); right: auto; left: 50%; transform: translateX(-50%); } /* ----- Пункты-кнопки (метод post) и ячейки списков навигации ----- */ .rail form, .bn-cell form, .tnav-list form { display: grid; } button.menu-item { text-align: left; } /* ----- Подвал ----- */ .app-footer { padding: var(--p-space-6) var(--p-page-gutter); border-top: var(--p-line-thin) solid var(--p-border); color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--p-space-2) var(--p-space-6); max-width: var(--p-content-max); } [data-nav="topbar"] .footer-inner { max-width: calc(var(--p-content-max) - 2 * var(--p-page-gutter)); margin-inline: auto; } /* по кромке содержимого */ .footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--p-space-4); } .footer-links a { display: inline-flex; align-items: center; min-height: var(--p-target-min); color: var(--p-text); } /* ----- Макет без оболочки: вход, активация, оферта, ошибки ----- */ .bare { display: grid; min-height: 100vh; grid-template-rows: 1fr auto; background: var(--p-bg); } .bare-main { display: grid; justify-items: center; align-content: start; padding: var(--p-space-12) var(--p-page-gutter) var(--p-space-8); } .bare-main:focus { outline: none; } .bare-card { display: grid; gap: var(--p-space-6); width: 100%; max-width: calc(var(--p-space-16) * 9); } .bare-brand { display: flex; align-items: center; gap: var(--p-space-3); color: var(--p-text); text-decoration: none; } .bare-brand .emblem { width: var(--p-space-12); height: var(--p-space-12); } .bare-footer { padding: var(--p-space-4) var(--p-page-gutter); color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); text-align: center; } /* ----- Страница ошибки ----- */ .error-page { display: grid; gap: var(--p-space-4); } .error-code { color: var(--p-text-muted); font-size: var(--p-fs-sm); line-height: var(--p-lh-sm); } .error-ref { display: grid; gap: var(--p-space-1); padding: var(--p-space-3) var(--p-space-4); border: var(--p-line-thin) solid var(--p-border); border-radius: var(--p-radius-md); background: var(--p-surface-sunken); } .error-ref .number { font-weight: var(--p-fw-semibold); word-break: break-all; } .error-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-3); } /* ===== css/geometry.css ===== */ /* ========================================================================== Портал 1535 — профиль «Геометрия» (вариант B; FOUNDATION 2.2 § 19; эталон — docs/design/redesign/_src/components.css, раздел «Профиль „Геометрия“», и прототип docs/design/variants/b-geometriya-v2). Язык форм знака поверх основы: дисплейная гарнитура в трёх ролях, декоративная цифра под −45° в своей зоне, фирменная плоскость (одна на экран, ≤ 15 % первого экрана), срез угла 32 px — только у плоскости, ромб шага, линейка раздела. Новых тонов нет; красного в декоре не бывает. Только контракт --p-* (локальные свойства зоны — с подчёркиванием: --_dx, --_dy). ========================================================================== */ /* ----- Дисплейная гарнитура (Unbounded 600) — три роли; всё остальное, включая названия объектов, — Golos Text ----- */ .t-display-hero { font-family: var(--p-font-display); font-size: var(--p-type-hero-fs); line-height: var(--p-type-hero-lh); font-weight: var(--p-fw-semibold); letter-spacing: var(--p-tracking-display); } .t-display-title { font-family: var(--p-type-title-font); font-size: var(--p-type-screen-fs); line-height: var(--p-type-screen-lh); font-weight: var(--p-fw-semibold); letter-spacing: var(--p-type-title-tracking); } .t-figure { font-family: var(--p-font-display); font-size: var(--p-fs-lg); line-height: var(--p-lh-lg); font-weight: var(--p-fw-semibold); font-variant-numeric: var(--p-numeric); } /* ----- Декор: у каждого элемента своя зона (data-deco — её рамка), зона не пересекает текст ----- */ [data-deco] { position: relative; overflow: hidden; pointer-events: none; user-select: none; } /* Цифра — графика, а не текст (x-ui::deco-digit): контур надписи обрезает заливку; центр — от правого нижнего угла зоны в долях кегля (--_dx, --_dy), поэтому цифру срезают только края плоскости, а внутренняя граница зоны её не касается */ .geo-digit { position: absolute; left: calc(100% - var(--_dx, 0.5) * var(--_deco-size, var(--p-deco-digit))); top: calc(100% - var(--_dy, 0.5) * var(--_deco-size, var(--p-deco-digit))); width: var(--p-line-thin); height: var(--p-line-thin); font-family: var(--p-font-display); font-weight: var(--p-fw-semibold); font-size: var(--_deco-size, var(--p-deco-digit)); line-height: var(--p-deco-lh); letter-spacing: var(--p-tracking-display); color: var(--p-deco-on-brand); transform: rotate(var(--p-deco-angle)); animation: geo-in var(--p-dur-deco) var(--p-ease) both; } .geo-digit svg { display: block; width: var(--p-line-thin); height: var(--p-line-thin); max-width: none; overflow: visible; } .geo-digit text { text-anchor: middle; dominant-baseline: central; } .geo-digit rect { fill: currentColor; } @keyframes geo-in { from { opacity: 0; } } /* ----- Фирменная плоскость (x-ui::plane): на телефоне и планшете — полоса 112 px во всю ширину основной области ----- */ .geo-plane { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--p-plane-band-h); height: var(--p-plane-band-h); margin: calc(-1 * var(--p-space-6)) calc(-1 * var(--p-page-gutter)) 0; background: var(--p-brand); color: var(--p-on-brand); } .geo-plane-text { display: grid; align-content: center; gap: var(--p-space-1); min-width: 0; padding: 0 var(--p-space-4) 0 var(--p-page-gutter); } .geo-plane .t-display-title { overflow-wrap: break-word; } /* Зона в полосе — квадрат высотой полосы: первая цифра — целиком, вторая срезана верхним и правым краем (2.2) */ .geo-plane .geo-zone { --_deco-size: var(--p-deco-digit-band); --_dx: 0.24; --_dy: 0.82; } .geo-plane :focus-visible { outline-color: var(--p-on-brand); } .geo-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--p-space-3); } .geo-sum > span { white-space: nowrap; } .geo-plane .geo-wide { display: none; } /* в полосе телефона — только дата и две цифры сводки */ /* Телефон: приветствие на полосе — строкой основного текста; крупное на полосе — только цифры (декор и сводка) */ @container main (max-width: 679px) { .geo-plane .t-display-title { font-family: var(--p-font-text); font-size: var(--p-fs-md); line-height: var(--p-lh-md); font-weight: var(--p-fw-regular); letter-spacing: normal; } } @container main (min-width: 680px) { .geo-plane .geo-wide { display: inline; } .geo-plane .geo-xl { display: none; } } /* ----- Главная B: полоса на телефоне и планшете; от 1100 px основной области — плоскость 7 колонок × 200 px со срезом, справа от неё — дела (7 + 5). Раскладка — по составу, а не шаблоном областей: место дел (.home-tasks) занято всегда — виджетами attention, заглушкой дел или пустым состоянием главной; блоки остальных областей идут по порядку парами (.home-place-start слева, .home-place-end справа), последний без пары — на всю ширину (.home-place-wide; места считает Home\Domain\HomeLayout). Область без виджетов не выводится и места не занимает — пустых колонок нет ----- */ .home-b { display: grid; gap: var(--p-block-gap) var(--p-grid-gap); grid-template-columns: minmax(0, 1fr); align-items: start; } .home-b > .home-greet { display: none; } /* Область виджетов: несколько блоков одной области — друг под другом с зазором блока */ .home-area { display: grid; gap: var(--p-block-gap); align-content: start; min-width: 0; } /* Линейка раздела вместо рамки карточки: 2 px цветом текста над блоком (не больше 5 в первом экране) */ .home-b > .block, .ruled { padding-top: var(--p-space-3); border-top: var(--p-line-strong) solid var(--p-text); } /* От 680 px: 8 колонок; полоса, дела и блок без пары — на всю ширину, пара — 4 + 4 */ @container main (min-width: 680px) { .home-b { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-b > * { grid-column: 1 / -1; } .home-b > .home-place-start { grid-column: 1 / span 4; } .home-b > .home-place-end { grid-column: 5 / span 4; } } /* От 1100 px: 12 колонок; плоскость 7 и дела 5 — первым рядом, пары — 7 + 5 */ @container main (min-width: 1100px) { .home-b { grid-template-columns: repeat(12, minmax(0, 1fr)); } .home-b > .home-place-start { grid-column: 1 / span 7; } .home-b > .home-place-end { grid-column: 8 / span 5; } .home-b > .home-tasks { grid-column: 8 / span 5; grid-row: 1; } .home-b > .geo-plane { grid-column: 1 / span 7; grid-row: 1; height: var(--p-plane-h); margin: 0; grid-template-columns: minmax(0, 1fr) var(--p-deco-zone); border-radius: var(--p-radius-md); clip-path: polygon(0 0, calc(100% - var(--p-cut)) 0, 100% var(--p-cut), 100% 100%, 0 100%); } .home-b .geo-plane-text { gap: var(--p-space-2); padding: 0 var(--p-space-4) 0 var(--p-space-8); } /* Обе цифры читаются: первая целиком, у второй краем плоскости срезана внешняя треть рисунка (2.2) */ .home-b .geo-zone { --_deco-size: var(--p-deco-digit); --_dx: 0.53; --_dy: 0.6; } .home-b .geo-plane .geo-xl { display: inline; } } /* ----- «Тихое» оформление: плоскости и декора нет, приветствие — строкой над сеткой, дела — под ним на всю ширину, дальше те же пары ----- */ [data-brand="quiet"] .geo-plane, [data-brand="quiet"] [data-deco] { display: none; } [data-brand="quiet"] .home-b > .home-greet { display: grid; gap: 0; } @container main (min-width: 1100px) { [data-brand="quiet"] .home-b > .home-tasks { grid-column: 1 / -1; grid-row: auto; } } /* ----- Шаги процесса — ромбом: пройдено — контур с галочкой, текущий — залитый графит с номером (номер не поворачивается), будущее — пунктир. Ромб значит только «шаг» ----- */ [data-variant="b"] .mark { position: relative; z-index: 0; border: 0; border-radius: initial; background: none; } [data-variant="b"] .mark::before { content: ""; position: absolute; z-index: -1; inset: calc((var(--p-icon-l) - var(--p-step-diamond)) / 2); border: var(--p-line-thin) solid var(--p-text-muted); background: var(--p-bg); transform: rotate(45deg); } [data-variant="b"] .is-current .mark { background: none; color: var(--p-bg); } [data-variant="b"] .is-current .mark::before { border-color: var(--p-text); background: var(--p-text); } [data-variant="b"] .is-future .mark::before { border-style: dashed; border-color: var(--p-field-border); }