:root{ /* Фон и карточки — из экспорта «Temper Dashboard» (июль). Карточка стала полупрозрачной: поверх фона она даёт то самое стекло, ради которого макет и переделывали. Размытие подкладывается ниже, по самому употреблению токена, — иначе его пришлось бы вписать в полсотни мест с инлайновыми стилями. */ --bg:#edecea; --card:rgba(255,255,255,.55); /* Тот же цвет под именем из экспортов. Все макеты Claude Design зовут его `--glass`, и при переносе стилей приходилось переименовывать вручную — а это ровно тот шаг, на котором значение и теряется. */ --glass:rgba(255,255,255,.55); --card-solid:#ffffff; --glass-strong:rgba(255,255,255,.7); --blur:blur(20px) saturate(1.2); --ink:#1a1a1a; --ink-2:#5f5f5b; --ink-3:#8a8a86; --hair:rgba(26,26,26,.08); --lime:#d6f24b; --sleep:#7C90C9; --sleep-soft:#DDE3F5; --steps:#8FA92B; --steps-soft:#E8F0C4; --hrv:#4FA396; --hrv-soft:#D6EAE6; --neutral-line:#4A4E52; --rose-ink:#B54A62; --rose:#E07A8D; --rose-soft:#F7DCE2; --rose-dark:#F09AAC; --track:#E8E8E4; --st-optimal:#5F8A63; --st-normal:#BCD3B4; --st-normal-ink:#7B9C76; --st-out:#E07A8D; --st-none:#D8D8D4; /* Имена для цветов, которые до сих пор стояли по всему кабинету числами. Приехали с дизайн-системой из экспорта «Документы»; значения те же. */ --surface-sunken:#f7f6f4; --surface-dark:#2f3234; --surface-dark-2:#1c1e20; --surface-inert:#F0F0EC; --hair-strong:#E8E8E4; --dashed:#d2d1cc; --ink-row:#2C2F31; --ink-quiet:#6E7378; --ink-faint:#9AA0A6; --st-optimal-ink:#4E7A54; /* Тень шире и мягче прежней: карточка не лежит на фоне, а висит над ним. */ --shadow:0 8px 40px rgba(0,0,0,.04); --warm:#d98b52; /* Тёмная подложка и мятная линия — из экспорта «Комплексное УЗИ». На ней рисуются графики динамики и пилюли-шаги: тёмный блок посреди светлого экрана — самый сильный акцент, какой есть в системе, и тратится он на то, ради чего документ и открывают повторно. */ --dark:#22221f; --on-dark:#edecea; --mint:#7beba2; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* * Размытие под стеклом. * * Карточки по всему кабинету заданы инлайново — `background:var(--card)` в * разметке и в строках, которые собирают модули. Вписать `backdrop-filter` * в каждое такое место значит пройти по полусотне файлов и не забыть ни * одного; вместо этого правило цепляется за само употребление токена. * * Два селектора, потому что запись отличается: в разметке пишут без пробела, * а браузер, сериализуя cssText из JS, ставит пробел после двоеточия. */ [style*="background:var(--card)"], [style*="background: var(--card)"], [style*="background:var(--glass)"], [style*="background: var(--glass)"]{ backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); } /* * Горизонтальное переполнение обрезается, но не прокручивается: `clip` * вместо `hidden`. Разница не косметическая — `hidden` делает корень * прокручиваемым, и `position:sticky` внутри страницы перестаёт держаться * вовсе. Так молча не работали липкие шапки на списках маркеров и * оглавление разбора: правило стоит в оболочке, а ломается вёрстка страниц. */ html,body{margin:0;padding:0;overflow-x:clip;} /* * Шрифт задан здесь, а не по месту. * * В экспортах он стоит инлайном на корневом контейнере каждого макета — * и при переносе в кабинет потерялся: `font-family` не было ни на одной * странице, и весь кабинет рисовался браузерным serif. На макет это не * похоже ничем, кроме цветов, и заметить подмену трудно как раз потому, * что текст остаётся читаемым. * * Набор тот же, что в экспорте: 'Helvetica Neue' на маке, Helvetica на * старых системах, 'Segoe UI' на Windows. */ body{ background:var(--bg);-webkit-font-smoothing:antialiased; font-family:'Helvetica Neue',Helvetica,'Segoe UI',sans-serif; font-weight:400;color:var(--ink); } /* Поля и кнопки шрифт от body не наследуют — это правило браузера. */ input,textarea,select,button{font-family:inherit;} a{color:var(--ink);text-decoration:none;} a:hover{color:var(--ink-2);} *{box-sizing:border-box;} .shell{display:flex;align-items:flex-start;width:100%;min-height:100vh;padding:0;margin:0;} /* * Рельс — по макету «Кровь · стиль приложения». * * Плита цвета бумаги с волосяной линией справа, логотип капсом и круглая * кнопка сворачивания рядом с ним. Свёрнутый — 76 px: остаются значки, а * подписи и заголовки групп не пропадают рывком, а тают; ширина, отступы и * прозрачность движутся одной кривой за 260–300 мс. * * Сворачивается кнопкой, а не наведением: наведение — случайный жест, меню * разворачивалось, когда курсор просто шёл мимо, и страница под ним * дёргалась. Выбор запоминается и держится на всех экранах (nav.js, * temper.rail.min). Свёрнутый рельс занимает меньше места по-настоящему: * колонка сужается, и страница разъезжается следом. * * Активный пункт — тонкое голубое кольцо, как у выбранной пилюли вида. Заливки * в рельсе больше нет ни у кого: лаймовая плашка спорила с экраном за взгляд. * * Все селекторы прижаты к `.colL` намеренно. У страниц есть свои