/* ============================================================ ДИЗАЙН-СИСТЕМА · СЛОЙ 1 — ТОКЕНЫ Единственный источник правды по цвету, шрифту, размерам. Правило: в коде интерфейсов НЕ пишется ни одного hex-цвета и ни одного «px наугад» — только var(--...) отсюда. Исходник цвета — бренд-бук владельца (раскладка «Золото и индиго»). ============================================================ */ /* --- ШРИФТ: файлы свои, не с Google (SER-293, 09.10.2026) --------------------- Раньше IBM Plex тянулся со страниц ссылкой на fonts.googleapis.com: отдельный запрос к чужому серверу, который держит отрисовку (PageSpeed лендинга мини-курса — 775 мс простоя). Теперь шрифт описан здесь, в файле, который страница грузит и так, а сами файлы лежат рядом, в ui/fonts/ (fontsource 5.3.0, лицензия OFL — fonts/OFL-LICENSE.txt). font-display:swap — текст виден сразу системным шрифтом и подменяется, когда IBM Plex догрузится. Браузер качает только нужное начертание и алфавит (unicode-range). */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) 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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) 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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) 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:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) 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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) 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} :root, [data-theme="light"] { /* Светлая тема названа и отдельным селектором, не только :root: без этого островок светлой темы внутри тёмной страницы (плашка палитры, кусок примера, врезка) не получает светлых значений — он наследует тёмные и выглядит чужим. Родные элементы браузера — плеер, полосы прокрутки, календарь у поля даты — красятся не нашими переменными, а этой строкой. Без неё в тёмной теме они остаются белыми, и «чужой вид» приходит внутрь системы. */ color-scheme: light; /* --- ШРИФТ ------------------------------------------------ */ --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* --- РАЗМЕР ТЕКСТА (6 ступеней, больше не заводим) -------- */ --fs-xs: 12px; --lh-xs: 1.45; /* подписи, ярлыки, сноски */ --fs-s: 13px; --lh-s: 1.5; /* мелкий служебный текст */ --fs-base: 15px; --lh-base: 1.6; /* основной текст, поля */ --fs-md: 17px; --lh-md: 1.5; /* подзаголовок, лид */ --fs-lg: 21px; --lh-lg: 1.35; /* заголовок блока */ --fs-xl: 26px; --lh-xl: 1.25; /* заголовок страницы */ --fs-2xl: 33px; --lh-2xl: 1.18; /* крупный экран/обложка */ /* --- ВЕС -------------------------------------------------- */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --- ОТСТУПЫ (шаг 4, 8 ступеней) -------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* --- РАДИУСЫ (немного, не двенадцать) --------------------- */ --r-xs: 4px; /* флажок: квадрат должен читаться квадратом, а не кружком */ --r-s: 8px; /* поля, мелкие кнопки, плашки */ --r-m: 12px; /* карточки, крупные кнопки */ --r-l: 20px; /* панели, модалки */ --r-full: 999px; /* пилюли, аватар */ /* --- ГРАНИЦЫ И ДВИЖЕНИЕ ----------------------------------- */ --bw: 1px; --t-fast: 120ms; --t: 200ms; --ease: cubic-bezier(.2,.6,.3,1); /* --- ШИРИНЫ ----------------------------------------------- */ --w-page: 1120px; --w-narrow: 640px; --w-modal: 480px; /* предел ширины окна поверх экрана — модалка не растягивается */ --w-booking: 900px; /* плашка записи на встречу: 250 «обо мне» + календарь + 190 времена. Шире — календарь расползается и теряет вид сетки. */ --w-post-card: 1080px; /* карточка поста для соцсетей — ширина */ --h-post-card: 1350px; /* карточка поста для соцсетей — высота, формат 4:5 (портрет ленты Instagram/Threads, шире используемая площадь экрана, чем квадрат 1:1) */ /* ========================================================== ЦВЕТ · СВЕТЛАЯ ТЕМА Первые пять — прямо из бренд-бука, остальное выведено из них. ========================================================== */ --bg: #F3EDDF; /* бренд: фон */ --text: #20211C; /* бренд: текст */ --gold: #E0A82E; /* бренд: акцент 1 (голос, действие) */ --indigo: #2B3A5C; /* бренд: акцент 2 (система, деньги) */ --muted: #8E8770; /* бренд: служебный */ --surface: #FBF7EE; /* карточка, «бумага» поверх фона */ --surface-2: #EDE5D2; /* вложенный блок, шапка таблицы */ --inset: #FFFDF8; /* поле ввода */ --line: #DDD3BC; /* обычная граница */ --line-strong: #C6B996; /* граница при наведении / активная */ --text-2: #6B6555; /* вторичный текст */ /* Приглушённый текст — своя роль, а не бренд-цвет. На бренд-цвете #8E8770 подписи давали контраст 3.08 к фону при норме 4.5, то есть читались хуже нормы. Было var(--muted), проверено приёмкой 2026-08-22. */ --text-3: #6C6755; /* приглушённый: подписи, ярлыки */ --text-on-accent: #20211C; /* текст поверх золота */ --text-on-indigo: #F1ECDD; /* текст поверх индиго */ /* ССЫЛКА — отдельная роль, а не «просто индиго». Внутри плотной поверхности (.on-gold, .on-indigo) эти же имена получают другие значения — см. base.css. */ --link: var(--indigo); --link-hover: var(--indigo-hover); --link-line: var(--line-strong); /* Наведение и нажатие — светлее основного жёлтого, а не темнее: прежние затемнённые значения и были тем горчичным, который владелец видел на кнопках (08.10.2026). Как в тёмной теме. */ --gold-hover: #EDBB48; --gold-active: #E0A82E; --gold-soft: #FCEFC8; /* фон золотой плашки */ /* Бумажные стикеры (post-it) — цвет самой бумаги, одинаковый в обеих темах: стикер остаётся стикером. Сергей 26.10.2026: «стикеры именно как классические бумажные, например розового цвета». Текст на них — --text-on-accent. */ --note-pink: #FFB8CF; --note-yellow: #FFEE8A; --note-blue: #A9DDF3; --note-green: #C4EBA2; /* Золото в офисе ОДНО, и оно же золото текстом. Здесь стояло отдельное затемнённое значение, заведённое приёмкой ради контраста мелкого текста (чистое золото на светлом фоне даёт 1.83). На практике это был второй жёлтый в системе — тот самый горчичный, который вычищен из офиса 2026-08-27, — и он раз за разом пролезал обратно: сначала строкой в брендбуке дизайнера, потом в карусель. Владелец 2026-09-12: «почему применяется горчичный, если он давно заменён и везде уже указан другой жёлтый». Решение: значение одно, как в тёмной теме. Где золотому тексту не хватает контраста — берётся не другой жёлтый, а другая РОЛЬ: плашка (background: var(--gold)) либо индиго. Старых значений здесь нет даже в комментариях: записанный числом мёртвый цвет делает любую будущую проверку грепом ложной. */ --gold-text: var(--gold); --gold-line: rgba(224,168,46,.45); /* полупрозрачная золотая рамка: плитка времени */ --indigo-hover: #22304D; --indigo-soft: #EDF0F7; /* ПОДВАЛ — две постоянные пары, тёмная и светлая. Подвал берёт пару, противоположную блоку над ним (под светлым — тёмную, под тёмным — светлую), поэтому значения не меняются вместе с темой: это те же цвета палитры, закреплённые за ролью. */ --foot-dark-bg: #2B3A5C; --foot-dark-text: #F1ECDD; --foot-light-bg: #EDE5D2; --foot-light-text: #20211C; /* Акцент «выбрано» (день, слот) — так же, как на боевом букинге: в светлой теме индиго, в тёмной золото. Это не «золото — единственный акцент системы», это отдельная роль. */ --accent-select: var(--indigo); --accent-select-hover: var(--indigo-hover); --accent-select-soft: var(--indigo-soft); --text-on-select: var(--text-on-indigo); /* Цвета состояний берутся как ЦВЕТ ТЕКСТА на своей мягкой плашке, поэтому подобраны по контрасту к ней, а не «на глаз». Было: --ok #4F7A4A (3.98 на своей плашке), --warn #9A6B12 (3.88). Проверено приёмкой 2026-08-22. */ --ok: #476E42; --ok-soft: #DEE9DA; --warn: #E0A82E; --warn-soft: #FCEFC8; /* жёлтый один; текст «внимание» — плашкой, не коричневым */ --danger: #A8452F; --danger-soft: #F3DDD7; /* --- ПЕЧАТЬ. Тема на бумаге не работает: там всегда белый лист и чёрные чернила. Значения живут здесь же, чтобы в parts/ не появилось ни одного hex. --- */ --print-bg: #FFFFFF; --print-text: #000000; --print-line: #999999; --print-meta: #555555; /* --- СКВОЗНЫЕ ДАННЫЕ САЙТА. Значение задаётся только здесь. В страницах стоит переменная: SSI-строка `#include virtual="/ds/v/<имя>.html"` (имя без `--site-`), в документах из .md — пометка {{site-<имя>}}. Сборщик (python3 ui/build.py) раскладывает значения по файлам ui/v/, сайт подставляет их при отдаче. Поменял здесь, собрал — изменилось везде. Склонённые формы имени в текстах документов («Сипите Сергею Александровичу») остаются текстом: переменная склонять не умеет. --- */ --site-name: "Сергей Сипита"; --site-email: "hello@sipita.ru"; --site-domain: "sipita.ru"; --site-ip: "ИП Сипита Сергей Александрович"; --site-inn: "503115768574"; --site-ogrnip: "313503119000035"; --site-address: "142455, Московская обл., Ногинский р-н, г. Электроугли, ул. Школьная, д. 40, кв. 1"; --site-tg-channel: "https://t.me/sipita08"; --site-tg-personal: "https://t.me/SipitaSergey"; --site-vk-group: "https://vk.ru/sipita08"; --site-vk-personal: "https://vk.ru/sipitasergey"; --site-max: "https://max.ru/join/ckqMy6PLqC7lMcFUblNhWghGbWQEWMobrDAj0thJUFk"; --site-tenchat: "https://tenchat.ru/SipitaSergey"; --site-youtube: "https://www.youtube.com/@SipitaSergey"; --site-threads: "https://www.threads.com/@sipitasergey"; /* Кольцо фокуса — то же одно золото. Здесь оставался прежний горчичный в полупрозрачном виде: он пережил замену 2026-08-27 потому, что записан числами через запятую и не ловился поиском по hex. */ --focus: 0 0 0 3px rgba(224,168,46,.35); --shadow-1: 0 1px 2px rgba(32,33,28,.07); --shadow-2: 0 8px 24px rgba(32,33,28,.10); } /* ========================================================== ЦВЕТ · ТЁМНАЯ ТЕМА Меняются ТОЛЬКО цветовые роли. Размеры, радиусы, шрифт — те же, они темы не касаются. ========================================================== */ [data-theme="dark"] { color-scheme: dark; --bg: #232B42; /* бренд: фон/индиго тёмной темы */ --text: #F1ECDD; --gold: #E0A82E; --indigo: #4A5C8A; --muted: #98A0BB; --surface: #2A3350; --surface-2: #323C5C; --inset: #1E2539; --line: #3B466A; --line-strong: #55659A; --text-2: #BDC4D8; --text-3: #A3ABC6; /* было var(--muted) #98A0BB — 4.17 на --surface-2 */ --text-on-accent: #20211C; --text-on-indigo: #F1ECDD; --link: var(--gold); --link-hover: var(--gold-hover); --link-line: var(--line-strong); --gold-hover: #EDBB48; --gold-active: #E0A82E; --gold-soft: var(--surface-2); /* тёмного жёлтого не бывает — тёмный жёлтый и есть горчица; мягкая плашка на тёмном = индиго */ --gold-text: var(--gold); /* на тёмном фоне золото текстом читается и без правки */ --indigo-hover: #5B6EA0; --indigo-soft: #2F3A59; --gold-line: var(--gold); /* полупрозрачное золото на индиго даёт грязно-оливковый */ --accent-select: var(--gold); --accent-select-hover: var(--gold-hover); --accent-select-soft: var(--gold-soft); --text-on-select: var(--text-on-accent); --ok: #7FB878; --ok-soft: #2B3B2D; --warn: #E0A82E; --warn-soft: var(--surface-2); --danger: #E89078; --danger-soft: #46281F; /* было #E08066 — 4.41 на --surface */ --focus: 0 0 0 3px rgba(224,168,46,.35); --shadow-1: 0 1px 2px rgba(0,0,0,.28); --shadow-2: 0 10px 28px rgba(0,0,0,.38); } /* ============================================================== КАРУСЕЛЬ ДЛЯ СОЦСЕТЕЙ · РАЗМЕРЫ КАДРА 1080×1350 Экранная шкала (--fs-*) слайду не годится: она рассчитана на текст в 15px с расстояния вытянутой руки, а слайд читают с ладони, уменьшённым в ленте втрое. Поэтому у карусели своя шкала — но живёт она здесь, в единственном месте с числами, а не внутри слайдов. Цвет карусель берёт общий, бренд-буковый: отдельной «палитры для Instagram» в офисе нет и быть не должно. Формат кадра уже описан выше: --w-post-card / --h-post-card. ============================================================== */ :root, [data-theme="light"], [data-theme="dark"] { --cr-pad: 80px; /* безопасное поле: ближе к краю соцсеть режет угол превью */ --cr-gap: 28px; /* просвет между блоками внутри слайда */ --cr-fs-hero: 92px; /* заголовок обложки — единственная вещь, видимая в ленте */ /* Заголовок обычного слайда почти равен обложечному, и это не опечатка: карточку читают с ладони уменьшенной втрое. Здесь стояло 64px по экранной логике «обложка крупнее, остальное скромнее» — в ленте такой заголовок теряется. Сверено с паком, откуда взят конвейер: у него 82-86px на каждом слайде при том же кадре 1080×1350. */ --cr-fs-h: 82px; /* заголовок обычного слайда */ --cr-fs-lead: 40px; /* лид под заголовком */ --cr-fs-body: 34px; /* основной текст слайда */ --cr-fs-meta: 24px; /* подпись, счётчик, хэндл */ --cr-fs-numeral: 230px; /* крупная цифра-акцент */ /* Название инструмента на карточке-листикле. Больше --cr-fs-h намеренно: на таком слайде название — единственное, что должно прочитаться в неоткрытой карточке ленты, а описание под ним вторично. Требование владельца 2026-09-17: «важно, чтобы был масштаб такой, что даже если карточка не открыта, то можно было прочитать, а то часто так делают, что не читабельно вообще никак». Проверено на 10 названиях: самое длинное («Сервис рассылок», 15 знаков) укладывается в две строки, короткие — в одну. */ --cr-fs-tool: 118px; /* название инструмента на карточке-листикле */ --cr-lh-tight: 1.06; /* заголовки: строки почти вплотную */ --cr-lh: 1.25; /* лид */ --cr-lh-body: 1.45; /* текст абзацем */ --cr-r: 24px; /* радиус плашки на слайде — крупнее экранного, кадр большой */ --cr-bar: 6px; /* толщина полосы прогресса в подвале */ /* Минимальная высота нижней панели. Именно она не даёт кадру опустеть: сколько бы ни было текста, низ слайда занят. Без неё короткий слайд превращался в пустой бланк — владелец 2026-09-12: «у тебя пропущено несколько слайдов». */ --cr-panel-min: 420px; } /* ============================================================== ПРЕЗЕНТАЦИЯ НА ЭКРАНЕ · слайды, которые показывают с проектора Отдельная шкала нужна по той же причине, что у карусели: экранная (--fs-*) рассчитана на текст в 15px с расстояния вытянутой руки, а слайд читают из глубины комнаты. От карусельной (--cr-*) отличается тем, что кадр здесь не фиксирован (1280 на ноутбуке, 1920 на проекторе, 390 на телефоне) — поэтому размеры тянутся за шириной окна через clamp, а не стоят числом. Цвет презентация берёт общий, своей палитры у неё нет. ============================================================== */ :root, [data-theme="light"], [data-theme="dark"] { --sl-pad-y: clamp(40px, 7vh, 96px); /* поле сверху и снизу слайда */ --sl-pad-x: clamp(24px, 6vw, 120px); /* поле по бокам */ --sl-gap: clamp(16px, 2.2vh, 32px); /* просвет между блоками слайда */ --sl-gap-col: clamp(24px, 4vw, 72px); /* просвет между колонками в «текст + кадр» */ --sl-fs-hero: clamp(34px, 5.2vw, 84px); /* заголовок титульного слайда */ --sl-fs-h: clamp(26px, 3.4vw, 54px); /* заголовок обычного слайда */ --sl-fs-lead: clamp(17px, 1.7vw, 28px); /* лид под заголовком */ --sl-fs-body: clamp(15px, 1.25vw, 21px);/* основной текст слайда */ --sl-fs-meta: clamp(11px, 0.85vw, 15px);/* надзаголовок, счётчик, подпись к кадру */ --sl-fs-numeral: clamp(44px, 7vw, 120px); /* цифра-акцент, когда на слайде одна мысль */ --sl-lh-tight: 1.04; /* заголовки: строки почти вплотную */ --sl-lh: 1.3; /* лид */ --sl-lh-body: 1.5; /* текст абзацем */ --sl-rule: 3px; /* толщина линии-акцента у края текстового блока */ /* Движение на слайде. Медленнее рабочего экрана (--t 200мс): зритель видео должен успеть заметить, что появилось, а не уловить мелькание. */ --sl-t-in: 600ms; /* появление тезиса и узла сцены */ --sl-t-step: 280ms; /* шаг задержки между соседями в сцене (строки терминала, узлы) */ --sl-scn-node: clamp(88px, 8.5vw, 150px); /* сторона плитки-узла в сцене */ --sl-fs-ico: clamp(34px, 3.4vw, 60px); /* значок внутри узла сцены */ --sl-nav-w: clamp(220px, 18vw, 300px); /* ширина оглавления слева у колоды, которую читают без ведущего */ } /* ============================================================== ПРОДАЮЩАЯ СТРАНИЦА (ЛЕНДИНГ) · СВОЯ ШКАЛА РАЗМЕРОВ Экранная шкала (--fs-*) рассчитана на рабочие экраны офиса: заголовок 33px. Продающей странице нужен заголовок, который читается с телефона за секунду, — поэтому у неё, как у карусели, своя шкала, и живёт она здесь, а не в странице. Цвет — общий, бренд-буковый. Заведено 2026-10-08 (лендинг «Поиск работы»). ============================================================== */ :root, [data-theme="light"], [data-theme="dark"] { --ld-fs-hero: clamp(40px, 6.2vw, 78px); /* заголовок первого экрана */ --ld-lh-hero: 1.02; --ld-fs-h: clamp(28px, 3.4vw, 46px); /* заголовок секции */ --ld-lh-h: 1.1; --ld-fs-lead: clamp(18px, 1.5vw, 22px); /* подзаголовок, крупный абзац */ --ld-fs-big: clamp(22px, 2.4vw, 34px); /* итоговая фраза на полосе */ --ld-fs-num: clamp(56px, 7vw, 104px); /* крупная цифра шага, цена */ --ld-sec-y: clamp(64px, 9vw, 128px); /* поле секции сверху и снизу */ --ld-gap: clamp(32px, 5vw, 80px); /* просвет между колонками */ --ld-w: 1200px; /* ширина содержимого лендинга */ }