/* Основание интерфейса: шрифты, токены, общие классы. Владелец: таск 26. Файл переписан начисто под макет «Контейнер» (решение A05): прежний описывал четыре вкладки и другую палитру, и дорабатывать его было дороже, чем заменить. Три правила, на которых держится всё остальное: 1. Цвет объявляется здесь и только здесь. Ни один модуль экрана не заводит своего оттенка — нужен цвет, которого нет, это BLOCKED, а не новая переменная в week.css. 2. --risk занят. Красное на экране значит ровно одно: высокий риск сорвать приём пищи. Ошибки, предупреждения и отказы говорят словами и знаком — посмотрите на экран входа в макете: пароль не подошёл, а поле обведено чернилами, не красным. Роль главного действия несёт заливка --sage-deep. 3. Тема только системная. Переключателя нет, поэтому и класса на нет: обе темы живут в :root и в @media (prefers-color-scheme: dark). 4. --ink-3 — не цвет текста. Третья ступень из макета даёт на фоне 2,61:1 при норме 4,5:1 (поправка D06, решение A15): читаемый мелкий текст — подписи, метки полей, надзаголовки — набирается на --ink-2 (5,27:1), сообщение упавшего экрана (.placeholder) — на --ink. За --ink-3 остаются разделители, неактивные состояния, декоративные значки и дублирующая подпись рядом с уже читаемым текстом. Палитра при этом не менялась: все четырнадцать цветов макета на месте. Классы экрана префиксованы именем экрана (today-*, week-*, shopping-* и далее); всё, что без префикса, — отсюда, и переопределять его цвет экран не вправе. */ /* ============================== ШРИФТЫ ============================== Три семейства лежат в public/assets/fonts/ и никуда не ходят: ни Google Fonts, ни CDN, ни одного внешнего адреса во всём файле. Файлы добыты на сборке (см. таск 26), подмножества — кириллица и латиница, unicode-range оттуда же. Onest и Inter — вариативные: один файл на весь диапазон веса, поэтому вес задан диапазоном (700 800 и 400 600), а не двумя правилами на один и тот же src. Geist статичен и нужен только в 400. Onest стоит вместо Funnel Sans из макета: у Funnel Sans нет кириллицы, и русские заголовки съехали бы на системный шрифт — то есть на самое заметное место экрана. font-display: swap — текст виден сразу системным шрифтом и подменяется, когда файл доехал. Запасная цепочка системная: в офлайне до прогрева кэша читать можно. */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('assets/fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('assets/fonts/onest-latin.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: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/inter-latin.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: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/geist-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/geist-latin.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 { color-scheme: light dark; /* Четырнадцать цветов макета — светлая тема. Роли, а не оттенки: bg — лист, surface — карточка на нём, surface-2 — вдавленное (поле ввода, плашка), ink/ink-2/ink-3 — три ступени текста, sage* — зелёная линейка от заливки главного действия до мягкого фона, mist — холодная плашка «здесь фотография», risk* — высокий риск и только он. */ --bg: #f2f1ea; --surface: #ffffff; --surface-2: #e9e8df; --ink: #16301f; --ink-2: #4a6b52; --ink-3: #8b9a8e; --border: #d8d7cc; --sage: #2d5e3a; --sage-2: #4a8c5e; --sage-deep: #2d5e3a; --sage-soft: #dce7d3; --mist: #d6e4e8; --risk: #c0392b; --risk-soft: #f7e3e0; /* Радиусы и толщина контура фокуса от темы не зависят и объявлены один раз; цвет фокуса — --ink, он переопределяется вместе с остальными ниже. */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --focus-width: 2px; --shadow: 0 1px 3px rgba(0, 0, 0, .04); /* Типографика. Три семейства, за каждым закреплена роль: Onest — заголовки и крупные числа, Inter — весь текст, Geist — подписи и надзаголовки. */ --font-display: 'Onest', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-text: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-caption: 'Geist', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-display: 42px; --fs-heading: 26px; --fs-card: 19px; --fs-body: 14px; --fs-caption: 11px; /* Раскладка. Ширина сайдбара и высота таб-бара нужны сразу двоим — оболочке (ui/shell.css) и правилу отступа
у ЯКОРЯ 900, — поэтому живут здесь. */ --sidebar-w: 248px; --tabbar-h: 64px; --gap: 12px; --gap-lg: 20px; --pad: 24px; --tap: 44px; } @media (prefers-color-scheme: dark) { :root { --bg: #141715; --surface: #1c201d; --surface-2: #262b27; --ink: #e8eae4; --ink-2: #a9b5ac; --ink-3: #77857a; --border: #31382f; --sage: #6fa97d; --sage-2: #2c6640; --sage-deep: #1e4429; --sage-soft: #25382b; --mist: #213033; --risk: #ff6b52; --risk-soft: #3a2320; /* Четыре процента чёрного на тёмном листе не видно вовсе, а подъём карточки над фоном в тёмной теме и есть единственное, чем она от фона отличается. */ --shadow: 0 1px 3px rgba(0, 0, 0, .4); } } /* ============================== ОСНОВА ============================== */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.5 var(--font-text); -webkit-font-smoothing: antialiased; /* Длинное слово (адрес, название продукта без пробелов) не должно выталкивать страницу вбок: на 393 px это единственная причина горизонтальной прокрутки, которую не поймать ни одной сеткой. */ overflow-wrap: break-word; /* Серая вспышка под пальцем в iOS ложится поверх собственных состояний кнопки и читается как сбой отрисовки. */ -webkit-tap-highlight-color: transparent; /* Поворот телефона в Safari иначе увеличивает шрифт сам, не спросив. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Браузерное [hidden] { display: none } слабее любого нашего display: секция с hidden осталась бы на странице, потому что .section ставит flex. Селектор удвоен ради специфичности (0,2,0) — бьёт одноклассовые правила без !important и в любом порядке; !important рядом стоит потому, что модуль экрана вправе поставить display и в inline-стиле. Открытие D03: без этого правила один круг починки уже был. */ [hidden][hidden] { display: none !important; } img, svg { max-width: 100%; } svg.icon { display: inline-block; vertical-align: -.18em; flex: none; } /* Читалка экрана читает, глазами не видно: подпись у значка, заголовок у списка. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Фокус виден на всём, по чему можно щёлкнуть или дойти табом, и не снимается нигде и никогда (История 159). Контур, а не цвет: цветом фокус не отличить от выбранного состояния, а на заливке --sage-deep он и вовсе пропадает. outline-offset выносит контур наружу — поэтому он читается и на тёмной кнопке. */ :focus-visible { outline: var(--focus-width) solid var(--ink); outline-offset: 2px; border-radius: var(--r-sm); } /* Убирать системный контур можно только тому, кто рисует свой (.switch, .chip) — и ни в каком другом случае. */ :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================ ТИПОГРАФИКА ============================ Шкала макета: Display 42 · Heading 26 · Card 19 (Onest) · Body 14 · Strong 14 (Inter) · Caption 11 (Geist). Больше кеглей в интерфейсе нет — понадобился промежуточный, значит в раскладке что-то не то. */ .display { margin: 0; font: 800 var(--fs-display)/1.05 var(--font-display); letter-spacing: -.022em; color: var(--ink); } .heading { margin: 0; font: 800 var(--fs-heading)/1.15 var(--font-display); letter-spacing: -.014em; color: var(--ink); } .card-title { margin: 0; font: 700 var(--fs-card)/1.25 var(--font-display); letter-spacing: -.008em; color: var(--ink); } .strong { font-weight: 600; } .caption { font: 400 var(--fs-caption)/1.45 var(--font-caption); color: var(--ink-2); } /* Надзаголовок: «СЛЕДУЮЩИЙ ПРИЁМ ПИЩИ», «КАЖДЫЙ ДЕНЬ», «СОСТАВ». В макете он стоит над каждым вторым блоком, поэтому вынесен в класс, а не набирается заново. */ .eyebrow { margin: 0; font: 400 var(--fs-caption)/1.45 var(--font-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } a { color: var(--sage); text-underline-offset: .18em; } a:hover { color: var(--ink); } code { font: 12px/1.4 var(--font-mono); background: var(--surface-2); border-radius: var(--r-sm); padding: 1px 5px; } /* ============================= РАСКЛАДКА ============================= */ .app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .app-main { flex: 1; min-width: 0; padding: var(--pad) var(--pad) calc(var(--pad) * 2); /* На широком мониторе колонка перестаёт читаться раньше, чем кончается экран. */ max-width: 1280px; /* Ширины здесь нет, и вернуть её нельзя. `.app` — колоночный флекс, поэтому ширину главной колонке считает сам флекс: контейнер минус её собственные поля. `width: 100%` эту связь рвёт — сотня процентов меряется от контейнера, а отступ под сайдбар у ЯКОРЯ 900 прибавляется снаружи, и на 1280–1520 px колонка вылезает вправо ровно на ширину сайдбара. Один круг починки это уже стоило (обходчик в ui/shell.css, который после этой правки не нужен). */ } /* Раздел приложения. Карточной обводки у него нет: в макете рамки носят карточки внутри, а сам раздел — просто колонка. */ .section { display: flex; flex-direction: column; gap: var(--gap-lg); } /* Точка монтирования экрана. min-width: 0 — чтобы широкая таблица внутри прокручивалась сама, а не растягивала колонку. */ .mount { min-width: 0; } /* ============================ ПОВЕРХНОСТИ ============================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); min-width: 0; } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; padding: 16px var(--gap-lg); border-bottom: 1px solid var(--border); } .card-body { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap-lg); } /* Плитка со сводным числом: «5 дней разобрано», «1 560 / 1 840». Число набирается Onest'ом, подпись — Geist'ом; за это отвечает разметка экрана, здесь — коробка. */ .tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; } /* Плашка — вдавленный прямоугольник под пояснение, состав, сводку. Три вида: нейтральная, холодная (mist — «здесь фотография») и зелёная (согласие, итог). */ .plate { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-md); color: var(--ink-2); } .plate-mist { background: var(--mist); color: var(--ink); } .plate-soft { background: var(--sage-soft); color: var(--sage-deep); } @media (prefers-color-scheme: dark) { /* На тёмном листе --sage-deep уходит в фон плашки, и текст пропадает. */ .plate-soft { color: var(--sage); } } /* ========================== ТЕКСТОВЫЕ БЛОКИ ========================== */ .hint { margin: 0; color: var(--ink-2); } /* Сообщение приложения о себе: что оно сделало, чего ждёт, чего не смогло. Нейтральное по цвету намеренно — тревогу несёт текст, а не фон. */ .notice { margin: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink-2); } /* Предупреждение — то же сообщение, но с зацепкой для глаза: полоса слева цветом чернил. Не красная: красное занято риском. */ .notice.warn { border-left: 3px solid var(--ink); padding-left: 12px; } /* Место экрана, который не отрисовался: ловушка в paint() подставляет сюда честную строку вместо пустоты. */ .placeholder { margin: 0; padding: 18px 0; color: var(--ink); } /* Пустое состояние (История 160): не заглушка, а объяснение и одна кнопка. */ .empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap); padding: 28px var(--gap-lg); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--ink-2); } /* ============================== ДЕЙСТВИЯ ============================== */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; font: 600 var(--fs-body)/1.2 var(--font-text); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; text-decoration: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); } .button:disabled { color: var(--ink-3); background: var(--surface-2); border-color: var(--border); cursor: default; } /* Главное действие экрана — заливка, а не цвет: акцент занят риском. */ .button.primary { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--surface); } .button.primary:hover:not(:disabled) { background: var(--sage-2); border-color: var(--sage-2); color: var(--surface); } @media (prefers-color-scheme: dark) { /* В тёмной теме --surface — почти чёрный, и белым текст на зелёном не станет: берём самый светлый из четырнадцати. */ .button.primary, .button.primary:hover:not(:disabled) { color: var(--ink); } } .button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .button.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; color: var(--ink); } /* Необратимое действие («Заменить неделю», «Удалить рецепт»). Оно не красное — так нарисовано в макете и так работает правило акцента: предупреждает текст кнопки и строка рядом с ней, а самая тёмная заливка говорит «это всерьёз». */ .button.danger { background: var(--ink); border-color: var(--ink); color: var(--bg); } .button.danger:hover:not(:disabled) { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--bg); } /* =========================== ЧИПЫ И РИСК =========================== Чип — короткая метка или фильтр: «переносное», «быстро», «на выезд». Кликабельный чип остаётся кнопкой в разметке — иначе до него не дойти табом. */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font: 400 13px/1.25 var(--font-text); color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; } .chip:hover:not(:disabled) { border-color: var(--ink-3); } .chip.active { color: var(--sage-deep); background: var(--sage-soft); border-color: var(--sage); } @media (prefers-color-scheme: dark) { .chip.active { color: var(--sage); } } /* Метка риска. Единственное место во всём файле, где тратится --risk: высокий риск сорвать приём пищи. Средний и низкий нейтральны намеренно — если красным будет помечено всё, красное перестанет что-либо значить. */ .risk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font: 600 12px/1.3 var(--font-text); border: 1px solid transparent; border-radius: 999px; } .risk-high { color: var(--risk); background: var(--risk-soft); border-color: var(--risk); } .risk-medium { color: var(--ink-2); background: var(--surface-2); border-color: var(--border); } .risk-low { color: var(--ink-2); background: transparent; border-color: var(--border); } /* Значок незакрытого («не куплено», «блюдо не выбрано»): приглушённый, не тревога. */ .open-mark { color: var(--ink-2); font-size: 12px; } /* ============================== ФОРМЫ ============================== Поле — вдавленная плашка: фон surface-2, рамка border. В фокусе и при отказе рамка становится чернильной и вдвое толще; отказ отличается от фокуса не цветом, а строкой .field-error под полем. Так нарисован экран входа в макете. */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-label { font: 400 var(--fs-caption)/1.45 var(--font-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .field-error { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--ink-2); } input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="time"], input[type="date"], input[type="email"], select, textarea { width: 100%; min-width: 0; min-height: 40px; padding: 9px 12px; font: 400 var(--fs-body)/1.4 var(--font-text); color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); } input::placeholder, textarea::placeholder { color: var(--ink-2); } input:focus, select:focus, textarea:focus { border-color: var(--ink); background: var(--surface); } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-width: 2px; border-color: var(--ink); } input:disabled, select:disabled, textarea:disabled { color: var(--ink-3); } textarea { resize: vertical; min-height: 120px; line-height: 1.55; } /* Флажок и радио красятся системой — достаточно назвать ей цвет. Выключатель исключён по имени: [type="checkbox"] специфичнее .switch и иначе сплющил бы его до квадрата 18×18. */ input[type="checkbox"]:not(.switch), input[type="radio"] { accent-color: var(--sage-deep); width: 18px; height: 18px; cursor: pointer; } /* Степпер порций «− 2 +». Появляется дважды (на «Сегодня» и в карточке рецепта), и общий у них ровно этот класс — сами экраны собирают его каждый свой. */ .stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; } .stepper button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font: inherit; color: var(--ink); background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; } .stepper button:hover:not(:disabled) { background: var(--surface); } .stepper button:disabled { color: var(--ink-3); cursor: default; } .stepper output, .stepper .stepper-value { min-width: 2.5ch; text-align: center; font: 700 var(--fs-body)/1.2 var(--font-display); } /* Переключатель из двух-трёх взаимоисключающих: «Похудение / Поддержание», «Ввожу состав / Вписываю КБЖУ». В разметке — радиокнопки или кнопки с aria-pressed. */ .segmented { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); } .segmented > * { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 14px; font: 600 13px/1.2 var(--font-text); color: var(--ink-2); background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; } .segmented > .active, .segmented > [aria-pressed="true"], .segmented > [aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); } /* Выключатель «Переживёт контейнер». Рисуется на