/* Шрифты подключены в index.html через preconnect + link, а не здесь
через @import. Причина измерена: @import грузится только после разбора CSS,
то есть на один круг позже, и текст успевает отрисоваться системным шрифтом,
а потом подменяется — это и давало сдвиг макета. */
/* Визуальный язык — ../DESIGN.md, доказательная база — ../RESEARCH.md.
Правила ниже расставлены не по вкусу, а по названным признакам шаблонности
из impeccable.style (Пол Бакаус) и скилла frontend-design у Anthropic. */
:root {
/* Inter, Space Grotesk, Geist, Instrument Serif, Poppins, Montserrat названы
переиспользованными — их здесь нет намеренно.
Отдельная ловушка: западные списки «шрифтов 2026» почти все без кириллицы.
Bricolage Grotesque и Satoshi пришлось снять именно поэтому — заголовки
молча падали на Georgia, и это не было видно, пока не замерил ширину строки.
Unbounded и Onest кириллицу поддерживают и в списках переиспользованных
не значатся. */
--font-display: 'Unbounded', Georgia, serif;
--font-body: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--bg: #0b0d09;
--bg-raised: #14170f;
--bg-sunken: #070903;
/* Один доминирующий цвет и один резкий акцент — вместо трёхточечного
градиента. Фиолет убран из основной палитры: violet-градиент назван
самым надёжным признаком AI-генерации в 2026 сразу двумя источниками.
Он остаётся только там, где кодирует смысл — верхний уровень новизны. */
--lime: #c6f432;
--lime-deep: #8fae1c;
--clay: #d96e3c;
--mint: #7be38a;
--violet: #9b6bd8;
--ink: #f4f6ee;
--ink-soft: #9ba394;
/* Приглушённый текст. Был #6b7264 — 4.02 к вдавленному фону и 3.64
к поднятому, то есть ниже нормы WCAG AA (4.5) для мелкого текста.
Lighthouse ловил это на счётчиках в опроснике, но цвет системный,
и тускло было везде — от подписей осей до метаданных заведений.
#7b8374 даёт 5.09 и 4.61: норма выполняется на обоих фонах,
а приглушённость на глаз сохраняется. */
--ink-dim: #7b8374;
--line: rgba(244, 246, 238, 0.1);
--line-accent: rgba(198, 244, 50, 0.26);
--good: #7be38a;
--bad: #e8705f;
/* Радиусы разные по назначению, а не одно значение на всём.
Одинаковое скругление везде названо признаком отсутствия иерархии. */
--r-tile: 6px;
--r-input: 10px;
--r-card: 14px;
--r-pill: 999px;
/* Ритм отступов неравномерный: одинаковый шаг всюду «делает страницу плоской». */
--s-tight: 8px;
--s-base: 16px;
--s-loose: 28px;
--s-section: 52px;
--nav-h: 68px;
}
/* Этап 0 · FOODOS_DESIGN_PROPOSALS + FOODOS-TOKENS-MAP.
Алиасы --foodos-* поверх существующих переменных — контракт токенов
запрещает удалять или переименовывать то, что уже есть выше.
Единственный разрешённый способ ссылаться на эти значения из новых
Proposal-компонентов — имена ниже, не «сырые» --lime/--bg-raised и т.п. */
:root {
/* Цвет: 1:1 маппинг на тёмную палитру, без новых значений. */
--foodos-color-bg: var(--bg);
--foodos-color-surface: var(--bg-raised);
--foodos-color-ink: var(--ink);
--foodos-color-ink-soft: var(--ink-soft);
--foodos-color-ink-dim: var(--ink-dim);
/* Контраст --lime на тёмном проверяется визуально на Этапе 1;
если проиграет — кандидат шафран оформляется отдельным L1 Proposal,
здесь пока не меняем. */
--foodos-color-accent: var(--lime);
--foodos-color-positive: var(--good);
--foodos-color-line: var(--line);
/* Типографика: точные алиасы существующих правил, а не новая шкала.
Каждая строка — то, что уже стоит ниже по файлу:
display = h1/.panel-title · title = .section-h · head = h2 · body = body.
Межбуквенное расстояние в шорткат font не входит и остаётся у правил.
Этап 4 (005): title и head приведены к реальным значениям — раньше
здесь стояли 1.25 и 17px, которых в файле нет; применение таких токенов
молча поменяло бы интерлиньяж и размер, а токен обязан быть алиасом. */
--foodos-type-display: 700 clamp(30px, 8vw, 40px) / 1.03 var(--font-display);
--foodos-type-title: 600 20px / 1.55 var(--font-display);
--foodos-type-head: 600 19px / 1.55 var(--font-display);
--foodos-type-body: 400 15px / 1.55 var(--font-body);
--foodos-type-caption: 500 12px / 1.3 var(--font-body);
/* Motion: числа из FOODOS-TOKENS-MAP.md, не «на глаз». */
--foodos-motion-spring-default: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
--foodos-motion-spring-heavy: 300ms cubic-bezier(0.34, 1.3, 0.64, 1);
--foodos-motion-enter: 240ms cubic-bezier(0.22, 1, 0.36, 1);
--foodos-motion-fade: 180ms ease-out;
--foodos-motion-settle: 90ms ease-in-out;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Любое правило display у класса перебивает атрибут hidden, и скрытый раздел
продолжает рисоваться. Здесь это ловил .levels { display: flex }. */
[hidden] {
display: none !important;
}
html {
background: var(--bg);
}
body {
background: var(--bg);
color: var(--ink);
font: var(--foodos-type-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Декоративное радиальное свечение убрано: `radial-gradient background halo`
и `decorative radial spotlight glow` — два отдельных признака шаблонности
у Impeccable, и «dark mode with glowing accents» третий.
Вместо свечения — едва заметная зернистость, которая даёт поверхности
материальность вместо ощущения пластиковой заливки. */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.5;
background-image: 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.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.shell {
position: relative;
z-index: 1;
max-width: 620px;
margin: 0 auto;
padding: 26px 18px calc(var(--nav-h) + 40px);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
button {
font: inherit;
cursor: pointer;
color: inherit;
}
/* ── Нижняя навигация ──────────────────────────────── */
.tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
display: flex;
height: var(--nav-h);
padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
background: rgba(11, 13, 9, 0.88);
backdrop-filter: blur(20px);
border-top: 1px solid var(--line);
}
.tabs button {
flex: 1;
min-height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
/* Семь вкладок вместо шести (решение PO 20.08): на 360 px каждая
получает по 51 px, поэтому подпись мельче и отступы уже. Иконка
остаётся 20 px — она и опознаётся быстрее подписи. */
padding: 4px 2px;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0;
color: var(--ink-dim);
background: none;
border: none;
border-radius: 12px;
transition: color 0.18s ease;
}
.tabs button::before {
content: '';
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
/* Иконки — инлайновые SVG-маски, не эмодзи (бриф §25). */
.tabs button[data-tab='home'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5V20a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1z'/%3E%3C/svg%3E");
}
.tabs button[data-tab='taste'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 5.5-2.9 8.9H7.4L4.5 8.5z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
}
.tabs button[data-tab='remix'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M4 10a4 4 0 018 0v10M12 10h8M20 10V4M16 20h8'/%3E%3C/svg%3E");
}
/* Сезон — лист: раздел про то, что растёт и созревает сейчас.
Прежняя булавка осталась от «Города», который стал подразделом. */
.tabs button[data-tab='season'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20C5 20 3 15 3 11c6 0 9 2 10 5'/%3E%3Cpath d='M13 20c6 0 8-5 8-9-6 0-9 2-10 5'/%3E%3Cpath d='M12 20v-6'/%3E%3C/svg%3E");
}
.tabs button[data-tab='city'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.tabs button[data-tab='kitchen'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v7a3 3 0 003 3v8M7 3v6M4 3v6M17 3c-2 0-3 2-3 5s1 4 3 4v9'/%3E%3C/svg%3E");
}
/* Свои рецепты — раскрытая тетрадь: не «плюс» и не «звезда», а именно
то, чем раздел является. */
.tabs button[data-tab='recipes'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 012-2h5v18H6a2 2 0 01-2-2z'/%3E%3Cpath d='M20 5a2 2 0 00-2-2h-5v18h5a2 2 0 002-2z'/%3E%3Cpath d='M8 8h1M15 8h1'/%3E%3C/svg%3E");
}
.tabs button[data-tab='trends'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
}
/* Бар — коктейльный бокал: единственная фигура, которую здесь ни с чем
не спутать. */
.tabs button[data-tab='bar'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16l-8 8z'/%3E%3Cpath d='M12 12v7M8 21h8'/%3E%3C/svg%3E");
}
.tabs button[data-tab='habits'] {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 4 5-8 4 5'/%3E%3C/svg%3E");
}
.tabs button.active {
color: var(--lime);
}
/* Ремикс — центральное действие: до создания должен быть один тап, а не поиск
нужной вкладки (бриф §20). Выделяем его не подложкой, а самим глифом —
он единственный залит градиентом и потому читается как главная кнопка. */
/* Центральная вкладка крупнее остальных, но не подсвечена акцентом:
раньше лайм горел на ней всегда, и на экране оказывалось два акцента
сразу — активная вкладка и эта. Приоритет иконки теперь задаётся
размером, а цвет остаётся признаком «вы здесь». */
.tabs button.center::before {
width: 26px;
height: 26px;
}
.tabs button.center {
color: var(--ink-soft);
}
.tabs button.center.active {
color: var(--lime);
}
/* Лента приходит асинхронно, и до её появления страница была пустой —
отсюда прыжок макета на 0.42 CLS: заголовок уезжал вверх, когда
подгружался герой. Резервируем высоту заранее. */
#home-feed:empty {
min-height: 70vh;
}
/* Подвал скрыт, пока идёт первый рендер: он последний в потоке, и его
появление наверху с последующим уездом вниз давало весь CLS страницы.
Скрытого элемента в потоке нет, а ниже него ничего не стоит — поэтому
его появление уже ничего не двигает. См. inline-скрипт в index.html. */
.booting .foot {
display: none;
}
/* Пометка устаревших данных: не красная тревога, но и не сноска петитом —
человек должен её прочитать до того, как поверит списку. */
.stale-note {
margin-bottom: 12px;
padding: 10px 12px;
border-left: 2px solid var(--lime);
border-radius: 0 8px 8px 0;
background: var(--bg-sunken);
}
/* Подменю внутри вкладки. Горизонтальный ряд под шапкой: у человека
на мобильном нет места на второй уровень навигации внизу, а сверху
он читается как продолжение заголовка. */
.subtabs {
display: flex;
gap: 6px;
overflow-x: auto;
margin: 0 -20px 4px;
padding: 0 20px 10px;
scrollbar-width: none;
}
.subtabs::-webkit-scrollbar {
display: none;
}
.subtabs button {
flex: 0 0 auto;
min-height: 40px;
padding: 0 16px;
font: inherit;
font-size: 14px;
color: var(--ink-soft);
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 999px;
}
.subtabs button.active {
background: var(--lime);
border-color: var(--lime);
color: #0b0d09;
font-weight: 500;
}
/* Подборка топ-50: свёрнута, потому что их девять и разворачивать все сразу
значит показать простыню из четырёхсот строк. */
.top-block {
margin-bottom: 10px;
padding: 14px 16px;
background: var(--bg-raised);
border: 1px solid var(--line);
border-radius: var(--r-card);
}
.top-block summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
min-height: 44px;
cursor: pointer;
}
/* Картинка приёма. Квадрат: на схемах важна вся композиция — руки, инструмент
и продукт, — и кадрировать её нельзя, как и схему состава. */
.tech-photo {
display: block;
width: 100%;
max-width: 340px;
aspect-ratio: 1 / 1;
margin: 0 0 12px;
object-fit: contain;
border-radius: var(--r-inner, 12px);
background: var(--bg-sunken);
}
/* Отмеченная утварь: свёрнута, чтобы не мешать отмечать остальное,
но доступна — отметку надо уметь снять. */
.kit-marked {
margin-top: 14px;
border-top: 1px solid var(--line);
padding-top: 12px;
}
.kit-marked summary {
min-height: 44px;
display: flex;
align-items: center;
font-size: 14px;
color: var(--ink-soft);
cursor: pointer;
}
.kit-marked[open] summary {
margin-bottom: 10px;
}
/* ── Сезон и разделы каталога ────────────────────────
Список блюд, по которому человек идёт глазами: имя крупно, кухня и время
мельче и приглушённее. Строки — кнопки: тап открывает разбор. */
.season-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0;
}
.season-item {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 52px;
padding: 10px 14px;
font: inherit;
text-align: left;
color: var(--ink);
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 12px;
}
.season-item b {
font-size: 15px;
font-weight: 500;
}
.season-item span {
font-size: 12.5px;
color: var(--ink-dim);
}
/* Заведение не открывается по тапу: разбирать ресторан нечего.
Оставляем ту же строку, но без вида кнопки. */
.season-item.static {
cursor: default;
}
/* Плитки разделов: короткое имя и число блюд. Число здесь не украшение —
по нему видно, что за разделом действительно что-то есть. */
.section-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0;
}
.section-chip {
display: flex;
align-items: baseline;
gap: 7px;
min-height: 44px;
padding: 0 14px;
font: inherit;
font-size: 14px;
color: var(--ink);
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 999px;
}
.section-chip span {
font-size: 12px;
color: var(--ink-dim);
}
.section-chip.on {
background: var(--lime);
border-color: var(--lime);
color: #0b0d09;
}
.section-chip.on span {
color: #0b0d09;
opacity: 0.7;
}
.section-note {
margin: 14px 0 4px;
font-size: 13.5px;
color: var(--ink-soft);
}
.missing-note {
margin-top: 18px;
padding-left: 12px;
border-left: 2px solid var(--line);
}
/* ── FOODOS-DESIGN-007 (Этап 6) · RemixVerbs ───────────
Ряд глаголов над полем вопроса. Тише поля: это ярлыки перехода между
уже посчитанными версиями, а не действие — поэтому без акцента,
на подложке карточки, с рамкой в её же тон. */
.verbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 14px;
}
.verbs-label {
font: var(--foodos-type-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--foodos-color-ink-dim);
margin-right: 2px;
}
.verb {
min-height: 34px;
padding: 0 13px;
font: inherit;
font-size: 13.5px;
color: var(--foodos-color-ink-soft);
background: transparent;
/* Запасное значение для браузеров без color-mix (Safari < 16.2). */
border: 1px solid rgba(244, 246, 238, 0.16);
border: 1px solid color-mix(in srgb, var(--tint) 22%, transparent);
border-radius: var(--r-pill);
transition: color var(--foodos-motion-fade), border-color var(--foodos-motion-fade);
}
.verb:hover {
color: var(--foodos-color-ink);
border-color: rgba(244, 246, 238, 0.32);
border-color: color-mix(in srgb, var(--tint) 45%, transparent);
}
/* Вопрос по версии. Поле неброское: это помощь на случай затыка,
а не главное действие карточки — главным остаётся оценка. */
.ask {
display: flex;
gap: 8px;
margin-top: 12px;
}
.ask input {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 0 14px;
font: inherit;
font-size: 14px;
color: var(--ink);
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 999px;
}
.ask input::placeholder {
color: var(--ink-dim);
}
.ask button {
min-height: 44px;
padding: 0 18px;
font: inherit;
font-size: 14px;
color: var(--ink);
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
white-space: nowrap;
}
.ask button:disabled {
color: var(--ink-dim);
}
.ask-answer {
margin-top: 10px;
padding: 12px 14px;
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
background: var(--bg-sunken);
border-left: 2px solid var(--lime);
border-radius: 0 10px 10px 0;
}
/* Слот визуала блюда: снимок и схема лежат друг на друге, показывается один.
Оба грузятся заранее — переключение должно быть мгновенным, иначе человек
жмёт кнопку и смотрит на пустоту. */
.dish-visual {
position: relative;
}
.dish-visual .dish-scheme,
.dish-visual[data-view='scheme'] .dish-photo:not(.dish-scheme) {
display: none;
}
.dish-visual[data-view='scheme'] .dish-scheme {
display: block;
}
/* Схему нельзя кадрировать. Снимок блюда живёт в полосе 21:9 и обрезается
по краям без потери — еда остаётся едой. У схемы обрезанный край это
пропавший продукт: в полосе 21:9 борщ лишался сметаны сверху и дна
кастрюли снизу. Поэтому в режиме схемы слот становится квадратным,
а картинка вписывается целиком. */
.dish-visual[data-view='scheme'] .dish-scheme {
aspect-ratio: 1 / 1;
max-height: 420px;
object-fit: contain;
object-position: center;
background: transparent;
}
.visual-switch {
position: absolute;
right: 10px;
bottom: 10px;
display: flex;
gap: 2px;
padding: 2px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(11, 13, 9, 0.82);
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(6px);
}
.visual-switch button {
min-height: 30px;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ink-dim);
font-size: 12px;
letter-spacing: 0.02em;
}
.visual-switch button.active {
background: var(--lime);
color: #0B0512;
}
/* ── Схема состава · взрыв-схема §6 ─────────────────
Язык из visual/diagrams: компоненты разнесены вдоль вертикальной оси
сборки, каждый на выноске. Ось нарисована фоном, а не элементом, чтобы
не появляться в дереве доступности: для чтения с экрана это обычный
нумерованный список «продукт — что держит». */
.exploded {
position: relative;
margin-top: 18px;
padding: 0;
list-style: none;
}
/* Ось сборки: пунктир проходит через центры узлов и обрывается на основе. */
.exploded::before {
content: '';
position: absolute;
left: 21px;
top: 22px;
bottom: 22px;
width: 1px;
background: repeating-linear-gradient(
to bottom,
var(--lime) 0 4px,
transparent 4px 9px
);
opacity: 0.45;
}
.ex-row {
position: relative;
display: grid;
grid-template-columns: 44px 22px 1fr;
align-items: center;
gap: 0;
padding: 7px 0;
}
/* Узел перекрывает ось — так линия читается как проходящая за компонентом,
а не сквозь него. */
.ex-node {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--bg);
color: var(--lime);
}
.ex-node svg {
width: 22px;
height: 22px;
}
/* Выноска: линия с засечкой на конце, как на технической схеме. */
.ex-lead {
position: relative;
height: 1px;
background: var(--line);
}
.ex-lead::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 1px;
height: 7px;
background: var(--lime);
opacity: 0.7;
}
.ex-label {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 10px;
min-width: 0;
}
.ex-label b {
font-size: 15px;
line-height: 1.25;
}
.ex-label i {
font-style: normal;
font-size: 12px;
letter-spacing: 0.02em;
color: var(--ink-dim);
}
.ex-label .ex-unknown {
opacity: 0.65;
}
/* Продукт без роли не притворяется разобранным: узел приглушён. */
.ex-vague .ex-node {
border-style: dashed;
color: var(--ink-dim);
}
/* Основа: сюда всё собирается, поэтому узел заметнее прочих. */
.ex-base .ex-node {
border-color: var(--lime);
color: var(--lime);
}
.ex-base .ex-label b {
color: var(--lime);
}
/* ── Лента главной · §5 ────────────────────────────── */
.feed {
padding: 20px;
margin-bottom: 12px;
background: var(--bg-raised);
border: 1px solid var(--line);
border-radius: var(--r-card);
}
.feed.lead-card {
border-color: var(--line-accent);
background: linear-gradient(180deg, rgba(198, 244, 50, 0.06), transparent 60%), var(--bg-raised);
}
/* ── Полка кухни ───────────────────────────────────────
Горизонтальный ряд вместо столбика: шесть карточек в столбик — это ещё
один экран прокрутки, а претензия к вертикальной простыне уже записана
в RESEARCH §0. Ряд скроллится внутри себя, страница по горизонтали — нет.
FOODOS-DESIGN-003 (Этап 3): «полки визуально вторичны» — обёртка теряет
свою рамку и фон карточки (герой их сохраняет), полка больше не спорит
с ним по весу. Сами .shelf-card остаются кликабельными карточками
со своей рамкой — вес снят только с внешнего контейнера. */
.feed.shelf {
padding-right: 0;
background: transparent;
border-color: transparent;
}
.shelf-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 2px 20px 6px 0;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.shelf-row::-webkit-scrollbar {
display: none;
}
.shelf-card {
flex: 0 0 148px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 0 10px;
overflow: hidden;
text-align: left;
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 14px;
color: var(--ink);
cursor: pointer;
scroll-snap-align: start;
}
.shelf-card:hover {
border-color: var(--line-accent);
}
.shelf-card b {
padding: 8px 10px 0;
font-size: 13.5px;
font-weight: 500;
line-height: 1.25;
}
.shelf-card span {
padding: 0 10px;
font: 400 11px var(--font-mono);
color: var(--ink-dim);
}
.dish-photo.shelf {
aspect-ratio: 4 / 3;
border-radius: 0;
}
/* ── Снимок блюда ──────────────────────────────────────
Кадры сняты на том же фоне #0B0512, поэтому подложка под ними не нужна:
картинка растворяется в карточке, а не лежит плиткой поверх неё. */
.dish-photo {
display: block;
width: 100%;
height: auto;
object-fit: cover;
background: var(--bg-sunken);
}
.dish-photo.lead {
aspect-ratio: 16 / 10;
object-position: center 58%;
margin: -20px -20px 14px;
width: calc(100% + 40px);
border-radius: var(--r-card) var(--r-card) 0 0;
}
.dish-photo.dish {
aspect-ratio: 21 / 9;
object-position: center 60%;
margin-bottom: 14px;
border-radius: var(--r-inner, 12px);
}
@media (prefers-reduced-motion: no-preference) {
.dish-photo {
animation: photo-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
}
@keyframes photo-in {
from { opacity: 0; transform: scale(1.015); }
to { opacity: 1; transform: none; }
}
.feed-label {
margin-bottom: 10px;
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-dim);
}
.feed h2 {
margin-bottom: 8px;
font-size: 22px;
line-height: 1.15;
}
.feed-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 10px;
font: 400 12.5px var(--font-mono);
color: var(--ink-dim);
}
.feed p {
font-size: 14.5px;
color: var(--ink-soft);
}
.feed .ing-grid {
margin: 14px 0 4px;
}
.ghost-btn {
margin-top: 14px;
min-height: 44px;
padding: 11px 18px;
font-size: 14.5px;
font-weight: 500;
color: var(--lime);
background: transparent;
border: 1px solid var(--line-accent);
border-radius: 12px;
transition: background 0.16s ease;
}
.ghost-btn:hover {
background: rgba(198, 244, 50, 0.08);
}
/* Полоска под названием оси показывает, насколько сильно человек её любит. */
.taste-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.taste-chips span {
position: relative;
padding: 8px 13px 10px;
font-size: 13.5px;
background: var(--bg-sunken);
border-radius: 10px;
overflow: hidden;
}
.taste-chips span::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: var(--w);
background: var(--lime);
}
/* ── FOODOS-DESIGN-002 (Этап 2) · TasteFingerprint ─────
.radial — контейнер главного визуала экрана Вкус, был здесь и раньше
(задаёт размер, не трогаем). Внутри теперь кольцо засечек, не радар:
.radial svg по-прежнему ловит любой вложенный