/* ============================================================ ShipFlow · design tokens 14.0 (модернизация 85.0, задача 2 — УМНАЯ ЦВЕТОВАЯ ИНДИКАЦИЯ). Добавлен второй слой цвета — тона индикации, не пересекающиеся с фирменным акцентом: --c-ind-crit / -dim критично · ошибка · просрочено (красный) --c-ind-warn / -dim внимание · ждёт решения (янтарный) --c-ind-ok / -dim порядок · выполнено (зелёный) --c-ind-info / -dim справка (стальной) --c-ind-cat / -dim категория · класс · модель (лиловый) --c-ind-neut / -dim нейтрально · нет данных (графит) --c-data / -dim «просто данные»: графики без оценки, прогресс, подсветка строк, идентификаторы, спарклайны --c-heat-1…4 шкала интенсивности тепловых карт (в тоне данных) Фирменный акцент --c-brand остаётся ТОЛЬКО слоем идентичности (логотип, главная кнопка, активный пункт меню, фокус). В базовой палитре «Deep Space» тона индикации совпадают с прежней семантикой; значения для графитового скина задаёт corporate.css 3.0. Прежние токены не менялись. ============================================================ */ /* ============================================================ 77.0 (задача 6): из комментариев убраны упоминания прежнего названия дизайна; токены не менялись (кэш-бастер поднят до 77.0 вместе с остальными файлами). ============================================================ */ /* ============================================================ ShipFlow · design tokens 13.0 13.0 (модернизация 68.0, задача 9): ЕДИНСТВЕННЫЙ дизайн платформы — «Корпоративный 2.0» (палитру и геометрию задаёт corporate.css поверх этих базовых токенов; отключаемый классический скин удалён вместе с переключателем — см. boot-guard.js). ГЛАВНОЕ в 13.0 — фирменная гарнитура «ROCH Grotesk»: собственный шрифт платформы, разработанный строго под «Корпоративный 2.0» (геометрический гротеск, круглые терминалы, честная кириллица, табличные цифры — артикулы и числа таблиц не «пляшут»). Три начертания в поставке (WOFF2, офлайн, без CDN): 400 · 600 · 800. Шрифты Poppins и Source Code Pro выведены из поставки — все токены типографики указывают на «ROCH Grotesk». ------------------------------------------------------------ Прежняя шапка (история): ShipFlow · design tokens 12.1 · классическая палитра 12.1 (модернизация 54.0, задача 3): + нейтральный семантический тон --c-neut / --c-neut-dim (справочные метрики карточек — «Мест по накладной» и т.п. — по скриншоту «Эталонный стиль карточек»: иконки карточек разноцветные по смыслу, ничего не сливается в один тон). Обе темы; корпоративный скин задаёт свои значения тона. 12.0 (модернизация 47.0, задача 5): + color-scheme, привязанная к теме платформы. Нативные календари браузера (input[type=date], datetime-local) и системные виджеты (выпадающие списки, полосы прокрутки) раньше ВСЕГДА открывались светлыми — попап календаря выбивался из тёмной темы. Теперь :root объявляет color-scheme:dark, а html[data-theme="light"] — color-scheme:light: браузер рисует календарь в цветах активной темы во всех модулях сайта. 26.0 (задача 2 — профессиональная типографика): • ФИРМЕННЫЕ ШРИФТЫ ТЕПЕРЬ В ПОСТАВКЕ (assets/fonts, WOFF2, субсет латиница+кириллица, работают офлайн, без CDN): — «Source Code Pro» (Adobe) — новый моноширинный шрифт платформы: артикулы, числа таблиц, Delivery Note, журналы, версии. Профессиональная гарнитура с честной кириллицей, табличными цифрами и перечёркнутым нулём — заменяет несистемный JetBrains Mono, который у большинства пользователей молча падал в Consolas; — «Poppins» — фирменная геометрическая гарнитура бренда: словознак ShipFlow, экран входа, крупные значения KPI, плашка ROCH ECOSYSTEM (латиница и цифры); • основной стек интерфейса уточнён: Inter → SF Pro Text → Segoe UI Variable Text → Segoe UI → Roboto (лучший из установленных на устройстве, без деградации до Arial); • добавлен токен --f-display для брендовых элементов. Дизайн по эталонному листу иконографики: глубокий тёмно-синий космический фон с тонкой сеткой, скруглённая перивинкль-линия (барвинок) как фирменный акцент, мягкая геометрия. Семантика РАЗНОЦВЕТНАЯ: успех — зелёный, внимание — янтарный, риск — коралловый, информация — небесный, категории — лиловый. ============================================================ */ /* --- фирменная гарнитура «ROCH Grotesk» (13.0 / сайт 68.0, задача 9): собственный шрифт ShipFlow для стиля «Корпоративный 2.0» — самостоятельный хостинг, офлайн, без CDN --- */ @font-face{ font-family:"ROCH Grotesk"; src:url("../fonts/roch-grotesk-400.woff2") format("woff2"); font-weight:100 480; font-style:normal; font-display:swap; } @font-face{ font-family:"ROCH Grotesk"; src:url("../fonts/roch-grotesk-600.woff2") format("woff2"); font-weight:481 690; font-style:normal; font-display:swap; } @font-face{ font-family:"ROCH Grotesk"; src:url("../fonts/roch-grotesk-800.woff2") format("woff2"); font-weight:691 1000; font-style:normal; font-display:swap; } :root{ /* 12.0 (задача 5): системные виджеты и НАТИВНЫЕ КАЛЕНДАРИ — тёмные */ color-scheme: dark; /* Палитра (тёмная тема — базовая) */ --c-bg: #131a2e; --c-bg-2: #161e37; --c-surface: #1b2440; --c-surface-2: #212c4f; --c-surface-3: #2a3660; --c-border: #35427a; --c-border-soft: #2a3563; --c-text: #e9eefc; --c-text-2: #aab7e0; --c-text-3: #7787b8; --c-grid: rgba(136,166,244,.05); /* сетка фона, как на эталоне */ /* Фирменный акцент — перивинкль (линия эталонного листа) */ --c-brand: #7f9ff3; --c-brand-2: #a9c0f8; --c-brand-dim: rgba(127,159,243,.14); --c-on-brand: #0e1631; /* текст поверх брендовой заливки */ /* Семантика — цветовая индикация, а не один тон */ --c-accent: #4ecb8d; /* успех / рост — зелёный */ --c-accent-dim: rgba(78,203,141,.14); --c-warn: #f2b04e; /* внимание — янтарный */ --c-warn-dim: rgba(242,176,78,.14); --c-danger: #f47f7f; /* риск / ошибка — коралловый */ --c-danger-dim: rgba(244,127,127,.14); --c-violet: #b295f5; /* категория — лиловый */ --c-violet-dim: rgba(178,149,245,.14); --c-cyan: #55c3ee; /* информация — небесный */ --c-cyan-dim: rgba(85,195,238,.14); --c-neut: #8f9cc7; /* 12.1: справочно / нейтрально — приглушённый графит */ --c-neut-dim: rgba(143,156,199,.14); /* 14.0 (85.0, задача 2): слой индикации — смысловые тона, отдельные от фирменного акцента */ --c-ind-crit: var(--c-danger); --c-ind-crit-dim: var(--c-danger-dim); --c-ind-warn: var(--c-warn); --c-ind-warn-dim: var(--c-warn-dim); --c-ind-ok: var(--c-accent); --c-ind-ok-dim: var(--c-accent-dim); --c-ind-info: var(--c-cyan); --c-ind-info-dim: var(--c-cyan-dim); --c-ind-cat: var(--c-violet); --c-ind-cat-dim: var(--c-violet-dim); --c-ind-neut: var(--c-neut); --c-ind-neut-dim: var(--c-neut-dim); --c-data: #8fa6d9; /* сталь: данные без оценки */ --c-data-2: #b3c3ea; --c-data-dim: rgba(143,166,217,.14); --c-heat-1: rgba(143,166,217,.22); --c-heat-2: rgba(143,166,217,.42); --c-heat-3: rgba(143,166,217,.66); --c-heat-4: #8fa6d9; /* Геометрия — мягкие скругления в характере иконок */ --r-xs:6px; --r-sm:9px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-pill:999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; /* Тени — глубокий космос, холодные */ --sh-1:0 1px 2px rgba(5,9,22,.35); --sh-2:0 5px 16px rgba(5,9,22,.38); --sh-3:0 16px 42px rgba(5,9,22,.5); --ring:0 0 0 2px rgba(127,159,243,.4); /* Типографика (26.0): фирменные гарнитуры в поставке + честный стек */ --f-sans:"ROCH Grotesk","Inter","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; /* 13.0: фирменная гарнитура */ --f-mono:"ROCH Grotesk","SFMono-Regular",Consolas,"Liberation Mono",monospace; /* 13.0: цифры «ROCH Grotesk» табличные — выравнивание чисел сохранено */ --f-display:"ROCH Grotesk","Inter","Segoe UI",Roboto,system-ui,sans-serif; --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:32px; /* Каркас */ --h-topbar:62px; --w-rail:254px; --w-rail-collapsed:72px; --t-fast:.14s cubic-bezier(.4,0,.2,1); --t-med:.24s cubic-bezier(.4,0,.2,1); } /* Светлая тема — «дневное небо»: те же оттенки при инверсии света */ html[data-theme="light"]{ /* 12.0 (задача 5): нативные календари и виджеты — светлые */ color-scheme: light; --c-bg:#eef1fb; --c-bg-2:#e7ecf9; --c-surface:#fbfcff; --c-surface-2:#f0f3fc; --c-surface-3:#e2e8f8; --c-border:#c3cdee; --c-border-soft:#d5dcf3; --c-text:#1c2440; --c-text-2:#465381; --c-text-3:#7583ae; --c-grid:rgba(63,86,160,.06); --c-brand:#4a6ee0; --c-brand-2:#3557c4; --c-brand-dim:rgba(74,110,224,.12); --c-on-brand:#f6f8ff; --c-accent:#1d9e63; --c-accent-dim:rgba(29,158,99,.12); --c-warn:#b47816; --c-warn-dim:rgba(180,120,22,.13); --c-danger:#cf4d4d; --c-danger-dim:rgba(207,77,77,.12); --c-violet:#7a58cf; --c-violet-dim:rgba(122,88,207,.12); --c-cyan:#1888b8; --c-cyan-dim:rgba(24,136,184,.12); --c-neut:#71809f; --c-neut-dim:rgba(113,128,159,.12); /* 14.0: слой индикации в светлой теме */ --c-data:#4f6ea8; --c-data-2:#3a569a; --c-data-dim:rgba(79,110,168,.12); --c-heat-1:rgba(79,110,168,.18); --c-heat-2:rgba(79,110,168,.38); --c-heat-3:rgba(79,110,168,.62); --c-heat-4:#4f6ea8; --ring:0 0 0 2px rgba(74,110,224,.3); --sh-1:0 1px 2px rgba(28,36,64,.07); --sh-2:0 5px 16px rgba(28,36,64,.09); --sh-3:0 16px 42px rgba(28,36,64,.14); } /* Плотность интерфейса (для длинных таблиц редактора) */ html[data-density="compact"]{ --row-h:30px; --cell-py:4px; } html[data-density="cozy"]{ --row-h:38px; --cell-py:8px; } html[data-density="wide"]{ --row-h:46px; --cell-py:12px; }