/* ═══════════════════════════════════════════════════════════════════════════ ВЕРАНДА · витрина гостя. Токены. 🔴 Это единственное место, где живут цвета, шрифты и шаг сетки. Ни в одном другом файле витрины не должно быть ни hex-кода, ни имени шрифта, ни «магического» пикселя отступа. Появился — значит один факт начал жить в двух местах, и через месяц они разойдутся. Обоснование каждого решения — ../../дизайн/DESIGN.md. Источники цвета — БРЕНД.md (снят пипеткой с их меню-досок, логотипа и уличных вывесок) и поправка владельца SVI от 28.08.2026. 🔴 Расхождение источников разрешено в пользу поправки 28.08: в основе кремовый и оттенки коричневого, зелень — на отдельные сюжеты. По ней уже сведена главная, принятая на 90%. Разбор — DESIGN.md §1. 🔴 Белого в файле нет ни одного — ни чистого, ни полупрозрачного поверх бумаги. Светлое здесь только одно: слоновая кость. Проверяется поиском по этому файлу — ни одной шестёрки эф и ни одной тройки 255. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── БУМАГА ────────────────────────────────────────────────────────────── Кремовая основа. Три ступени, и больше не заводим: у гостя телефон на солнце, четвёртый оттенок бумаги он просто не различит. */ --v-paper: #F6EFE1; /* фон страницы */ --v-paper-2: #FCF8EE; /* слоновая кость: карточки, поля, плитки */ --v-paper-3: #F0E5D0; /* тёплая подложка: врезки, сноски, метки */ /* Границы. Две, и они разного назначения. --v-line — декоративная: рамка карточки, разделитель списка. Контраст к бумаге 1.30 — этого хватает, потому что смысл несёт не она, а фон и текст рядом. --v-line-2 — граница элемента управления: поле ввода, чекбокс, рамка кнопки. 3.68 к --v-paper и 3.37 к --v-paper-3: выше порога 3.0 для графики интерфейса. Поле ввода, обведённое декоративной линией, на пляжном солнце перестаёт читаться как поле. */ --v-line: #E0D2B8; --v-line-2: #8F7856; /* ── ЧЕРНИЛА ───────────────────────────────────────────────────────────── Три ступени, все три проходят 4.5:1 на любой из трёх бумаг. */ --v-ink: #33200F; /* основной текст. 13.6 на --v-paper */ --v-ink-2: #6B5340; /* второй план. 6.3 */ --v-ink-3: #7A6248; /* третий план, сноски. 5.0 */ /* ── ЗНАК ──────────────────────────────────────────────────────────────── Коричневый — цвет краски их собственного логотипа, а не подобранный на глаз. Заголовки, главная кнопка, цена. */ --v-brand: #543621; /* 9.5 на --v-paper */ --v-brand-2: #3E2716; /* наведение и нажатие */ /* Золото. 🔴 Текст им не набирается нигде: 3.75 на бумаге при пороге 4.5. Для текста есть --v-gold-ink. Само золото живёт в линиях и штрихах. */ --v-gold: #9B7333; --v-gold-ink: #7A5520; /* 5.8 на --v-paper — золото, которым пишут */ /* ── СЮЖЕТ: ДОСТАВКА ───────────────────────────────────────────────────── «с доставкой зелёное» — поправка владельца от 28.08. Зелень #2E4637 снята с их меню-досок, кремовый текст #DCE8DA оттуда же. */ --v-green: #2E4637; /* плоскость сюжета */ --v-green-2: #37503F; /* панель внутри сюжета */ --v-green-line: #4A6350; /* декоративная граница на зелени */ --v-green-line-2: #8FA98F; /* граница элемента управления на зелени, 4.0 */ --v-green-ink: #DCE8DA; /* текст на зелени, 8.1 */ --v-green-ink-2: #B9CDB6; /* второй план на зелени, 6.1 */ /* ── СЮЖЕТ: ФАБРИКА И ФУТЕР ────────────────────────────────────────────── Тёмно-коричневый, не чёрный. Производство и низ страницы. */ --v-dark: #2A1A0F; --v-dark-2: #3A2415; --v-dark-line: #4A3520; --v-dark-line-2: #8A6E4C; /* граница управления на тёмном, 3.5 */ --v-dark-ink: #F0E5D0; /* 13.4 */ --v-dark-ink-2: #BFA989; /* 7.4 */ /* ── КРАСНЫЙ ───────────────────────────────────────────────────────────── С их уличной вывески. 🔴 Редкая метка: стоп-лист, «закрыто», ошибка поля, удаление из корзины. Не фон раздела и не обычная кнопка. Неизвестность красным НЕ помечается — для неё --v-ask-*, см. ниже. */ --v-red: #9C0A18; /* 7.4 на --v-paper */ --v-red-2: #7E0812; /* наведение */ --v-red-tint: #F3E3E0; /* подложка метки, текст на ней 7.1 */ /* ── СОСТОЯНИЕ «УТОЧНЯЕТСЯ» ────────────────────────────────────────────── 🔴 Отдельная роль, а не оттенок красного. Правило движка «не выдумывать» заставляет витрину честно писать «уточняется» в пяти местах из семи по часам, в одном из семи по меню и на всех зонах доставки. Красным этого столько, что красный перестал бы значить «стоп». Носитель — золото на тёплой подложке плюс иконка. Разбор — DESIGN.md §5. */ --v-ask-ink: var(--v-gold-ink); --v-ask-bg: var(--v-paper-3); --v-ask-line: var(--v-line-2); /* ── ФОКУС ─────────────────────────────────────────────────────────────── Клавиатура и озвучка. Обводка, а не тень: тень на бумаге не видна. */ --v-focus: var(--v-brand); --v-focus-light: var(--v-paper-2); /* фокус на зелени и на тёмном */ --v-focus-w: 2px; --v-focus-off: 2px; /* ── ШРИФТ ─────────────────────────────────────────────────────────────── БРЕНД.md, снято с их досок и логотипа: заголовки антиквой, цифры и кнопки гротеском. Три семейства и ни одного больше. 🔴 Файлы шрифтов лежат у нас (витрина/шрифты/), не на чужом CDN — правило §8.2 архитектуры. Здесь только имена и откат: @font-face живёт в шрифты.css, чтобы токены оставались файлом без загрузок. */ --v-font-h: "Playfair Display", "Iowan Old Style", Georgia, serif; --v-font-text: "Lora", Georgia, "Times New Roman", serif; --v-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Иероглифика: свой CJK-шрифт весит 5–10 МБ и против правила «мобильный трафик». Берём системную антикву — она у гостя уже есть. */ --v-font-cjk: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; /* Кегли. 🔴 Ниже 14 px не опускаемся нигде, и 14 — только для меток прописными. Машинный аудит считает всё, что мельче, «мелким текстом»: у худшего из шести вариантов главной таких мест было 85. */ --v-fs-d1: clamp(34px, 8.6vw, 56px); /* заголовок экрана */ --v-fs-d2: clamp(28px, 6.4vw, 40px); /* заголовок раздела */ --v-fs-d3: 26px; /* заголовок карточки */ --v-fs-d4: 22px; /* подзаголовок */ --v-fs-lead: 18px; /* лид */ --v-fs: 17px; /* основной текст */ --v-fs-2: 16px; /* текст в карточке, поля */ --v-fs-3: 15px; /* сноска, подпись под кадром */ --v-fs-cap: 14px; /* метка прописными. Дно шкалы */ --v-lh-h: 1.06; /* заголовки */ --v-lh: 1.62; /* текст */ --v-lh-2: 1.4; /* короткие строки в карточке */ --v-track: .18em; /* разрядка прописных — приём с их меню-досок */ --v-track-2: .12em; /* разрядка в кнопках */ /* ── РИТМ ──────────────────────────────────────────────────────────────── Всё кратно 8. Единственное исключение — --v-pad, поле у края экрана: 20 px оставляет на 390 ровно 350 рабочих, то есть две колонки по 167 с шагом 16. Исключение названо здесь, чтобы его не «поправили». 🔴 Расстояние между блоками задаёт контейнер через gap, а не соседи через margin. Самодельные margin-ы у соседей и есть тот «разнобой отступов», который владелец назвал отдельной претензией дважды. */ --v-1: 4px; --v-2: 8px; --v-3: 12px; --v-4: 16px; --v-5: 24px; --v-6: 32px; --v-7: 48px; --v-8: 64px; --v-9: 96px; --v-gap: var(--v-5); /* шаг сетки карточек */ --v-gap-2:var(--v-4); /* шаг внутри карточки. Один на всю карточку */ --v-pad: 20px; /* поле у края экрана */ --v-sec: var(--v-8); /* поле раздела сверху и снизу */ --v-maxw: 1240px; /* полоса содержания */ --v-maxc: 62ch; /* потолок строки текста */ /* ── ФОРМА ─────────────────────────────────────────────────────────────── Радиус нулевой. Их язык — меловая доска, деревянная решётка, печатное меню: там прямой угол. Скругление — язык приложений, не ресторана. */ --v-r: 0; --v-bw: 1px; /* толщина границы */ --v-sw: 1.6; /* толщина штриха иконки, сетка 24×24 */ /* Цели нажатия. У гостя телефон и мокрые руки с пляжа: ниже 48 нет ничего, главные полосы — 56. */ --v-tap: 48px; --v-tap-2: 56px; /* ── КАДР ──────────────────────────────────────────────────────────────── 🔴 Потолок исходников — 1080 px по короткой стороне, медиана 905. Поэтому кадр живёт в колонке и никогда не растягивается во всю ширину десктопа. Разбор — DESIGN.md §3. */ --v-shot-maxw: 720px; /* одиночный кадр в колонке */ --v-ar-dish: 4 / 5; /* карточка блюда */ --v-ar-point: 3 / 2; /* карточка точки */ --v-ar-board: 12 / 5; /* их меню-доска */ /* ── ДВИЖЕНИЕ ──────────────────────────────────────────────────────────── Только цвет и лёгкий сдвиг. Ни размытия, ни полупрозрачности поверх прокрутки — на телефоне это рывки (БРЕНД.md, «чего избегать»). */ --v-t: .18s; --v-t-2: .5s; /* приближение кадра при наведении */ } /* ── Зерно бумаги ─────────────────────────────────────────────────────────── Одна строка data-URI: ни картинки, ни запроса наружу. Это тактильность печатного меню, а не текстура ради текстуры. */ :root{ --v-grain: url("data:image/svg+xml;utf8,"); --v-grain-op: .30; } /* ── Тёмной темы у витрины нет ────────────────────────────────────────────── Бумага и есть бренд: перекрасить её в тёмное — это перестать быть «Верандой». Плюс 70% гостей приходят с телефона на улице, где выигрывает тёмный текст на светлом. Тёмное на витрине — два названных сюжета (Фабрика и футер), и они тёмные всегда, при любой системной теме. Поэтому prefers-color-scheme здесь не слушаем сознательно. */ /* ── Признак подключения ──────────────────────────────────────────────────── Токен, а не правило: страница, которой важно знать, дошёл ли этот файл, пишет `display: var(--v-loaded, block)`. Файл подключён — блок скрыт; не подключён — переменной нет, срабатывает запасное значение и предупреждение видно. Так проверка живёт в токенах и не зависит от того, в каком порядке подключены стили. */ :root{ --v-loaded: none; }