/* premium/ — ЕДИНЫЕ токены премиум-контура (Челюскинцев, 5 + Дом Форм). Сведение П0.1 (14.08.2026, план «Премиум-сайт — новый дизайн с опорой на брендбуки»): было три версии — брендбучная трёхслойка донора ~/projects/premiumsite (07.08), рип-снятая R-371 (13.08) и палитра Ч5 из памяти. Решение Алекса: брендбук — база, рип — поверка. Палитра из памяти совпала с брендбуком Ч5 дословно, дельты нет. Архитектура донора сохранена, слои не смешивать: 1. РИТМ (:root) — отступы, кегли, радиусы, движение. Общий для обоих брендов, шкала кита Ventr (premiumsite/docs/kits/). 2. СЕМАНТИКА ([data-brand]) — фон, текст, акцент, линия, шрифты, лого. Сырые хексы живут ТОЛЬКО здесь, источник — разобранные брендбуки (premiumsite/brand/{cheluskin5,domform}/tokens.json, с номерами страниц PDF). (Был слой 3 — LEGACY рип-палитры R-371 под старую витрину; снесён в П2 14.08 вместе с ней. Правила работы с ДС — premium/ds/CONTRACT.md.) КОНВЕНЦИЯ: data-brand ставится на , не на . Страница без атрибута останется без палитры — это баг страницы, гейт check-premium-ds.mjs ловит. Компоненты используют только семантику и ритм: ни один компонент не знает про #E3C19C — иначе второй бренд придётся переверстывать. Поверка рипом (все контрасты посчитаны 14.08, не «на глаз»): · line-strong 28% как контур полей ПРОВАЛИВАЕТ WCAG 1.4.11 (Ч5 2.24, ДФ 2.47 < 3) → введён --field-border на 40% альфы (Ч5 3.23, ДФ 3.58); · fg-faint (Ч5 3.05, ДФ 3.58) — только крупный текст 18px+/декор, не основной; · радиус — код роли (кнопка/карта/поле/чип), а не свободный выбор из шкалы. ⚠️ Отдельный набор от landing/assets/css/main.css — комфорт и премиум не смешиваем (AGENTS.md §0). */ :root { /* ── Ритм. Шкала кита Ventr: 8/12/16/20/24/28/32/36/40, продлена вверх до секционных отступов (у Ventr секции идут 64 и 80). ── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 120px; /* Ventr: макет 1440, поля по 100 → контент 1240. На мобиле поля жмутся, но не меньше 20 — иначе текст липнет к краю экрана. */ --container: 1240px; --gutter: clamp(20px, 5vw, 100px); /* Вертикальный ритм секции. На мобиле воздух дороже: 64 вместо 120. Числа литералами, а не var() внутри clamp: вложенные переменные не разворачивает ни статический анализатор, ни человек с первого взгляда. */ --section-y: clamp(64px, 9vw, 120px); /* ── Типографика. Кегли Ventr (96/72/48/32/24/18/16/14) в clamp, чтобы не держать брейкпоинты руками. Трекинг −2% у крупного — оттуда же. ── */ --t-display: clamp(2.75rem, 7.5vw, 6rem); /* 44 → 96 */ --t-h1: clamp(2rem, 5vw, 4rem); /* 32 → 64 */ --t-h2: clamp(1.75rem, 3.6vw, 3rem); /* 28 → 48 */ --t-h3: clamp(1.375rem, 2.4vw, 2rem); /* 22 → 32 */ --t-h4: 1.5rem; --t-lead: 1.125rem; --t-body: 1rem; --t-small: 0.875rem; --t-caption: 0.75rem; --lh-tight: 1.05; /* дисплейный кегль; рип подтвердил: lh≈1 у капса — и есть «дорого» */ --lh-head: 1.2; --lh-body: 1.5; --ls-tight: -0.02em; /* Ventr: ls −2% на заголовках */ --ls-caps: 0.08em; /* капс без разрядки читается как ошибка */ /* ── Радиусы. Шкала Ventr + роли из рип-поверки: радиус — код роли. Кнопка задаётся в бренде (у Ч5 рамка, у ДФ пилюля — брендбук стр. 12). ── */ --r-xs: 2px; --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px; --r-card: var(--r-md); /* карточки лотов, медиа-плитки */ --r-field: var(--r-lg); /* поля формы */ --r-chip: var(--r-full); /* чипы фильтра */ /* ── Движение. Премиум — это медленнее и мягче обычного, но не настолько, чтобы интерфейс казался залипшим. ── */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur: 240ms; --dur-slow: 480ms; /* Скрим под текстом поверх фото. Требование обоих брендбуков: у Ч5 текст на фото всегда светлый, у ДФ на сложном фоне обязателен затемняющий слой. Слоя два, и второй не для красоты: рендеры бывают яркими именно слева, где стоит текст (закатное небо, освещённый фасад). Вертикального градиента там не хватает, и подзаголовок пропадает — поймано на скринах 07.08. */ --scrim: linear-gradient(90deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.28) 45%, rgb(0 0 0 / 0) 78%), linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.1) 40%, rgb(0 0 0 / 0.6) 100%); /* Готовое фокус-кольцо (имя --focus-ring историческое: до П2 имя --focus держал legacy-слой рип-витрины, снесён 14.08 вместе с ней) */ --focus-ring: 2px solid currentColor; --focus-offset: 3px; } /* ───────────────────────────────────────────────────────────────────────── СЕМАНТИКА БРЕНДОВ Оба бренда тёмные ПО БРЕНДБУКАМ (это не «тёмная тема», это базовый вид). Приглушённый текст и линии считаем прозрачностью от fg, а не отдельными хексами: так они сами попадают в тон любому фону и не разъезжаются при правке палитры. Контрасты у значений посчитаны 14.08 (поверка рипом). ───────────────────────────────────────────────────────────────────────── */ /* Челюскинцев, 5 — брендбук 2025 (жильё, квартал премиум-класса). Акцентом взят #AB9B91 (база градиентов, стр. 12), а не #FFB51F: жёлтый в гайде живёт в декоративных композициях из сегментов (стр. 20), и в роли цвета кнопок он кричит. #FFB51F оставлен как редкий акцент для меток. */ [data-brand="cheluskin5"] { --bg: #191b25; /* стр. 9; рядом в гайде rgb 19,19,28 — расходится с HEX, берём HEX */ --bg-elev: #21232e; --fg: #e4e4e4; /* на bg 13.5:1; текст на фото ВСЕГДА он (стр. 11) */ --fg-muted: rgb(228 228 228 / 0.64); /* на bg 6.25:1 — AA с запасом */ --fg-faint: rgb(228 228 228 / 0.38); /* 3.05:1 — ⛔ только 18px+/декор */ --line: rgb(228 228 228 / 0.14); /* хайрлайны-разделители, не контуры полей */ --line-strong: rgb(228 228 228 / 0.28); /* 2.24:1 — акцентный декор, ⛔ не для полей */ --field-border: rgb(228 228 228 / 0.40); /* 3.23:1 ≥3 — контур полей (WCAG 1.4.11), находка рипа */ --accent: #ab9b91; /* на bg 6.39:1 */ --accent-fg: #191b25; /* текст на акценте 6.39:1 — светлый по песку не писать */ --accent-loud: #ffb51f; /* на bg 9.7:1 — метки, не кнопки */ --error: #ff9c8a; /* ошибки формы; на bg 8.47:1, на elev 7.72:1 */ /* Подложка под планировки. Чертёж идёт с прозрачным фоном, стены тёмно-серые: на фоне страницы они бы исчезли. Светлый фирменный #E4E4E4 работает как бумага, на которой чертёж и должен лежать. Текст на ней — 13.5:1. */ --paper: #e4e4e4; --paper-fg: #191b25; /* Знак бренда. Растр 973x107 с вырезанной прозрачностью, пропорция 9.09 */ --logo: url("../img/logo-cheluskin5-mark.webp"); --logo-ratio: 9.09; --font-display: "Cormorant", Georgia, serif; --font-text: "TT Norms Pro", system-ui, sans-serif; /* файл боевой v2.000, веб-лицензию на наш домен подтвердить (brand/FONTS.md донора) */ --display-case: uppercase; /* гайд: заголовки только капсом (стр. 14) */ --display-weight: 700; --display-ls: 0.01em; /* Cormorant капсом без разрядки слипается */ --r-btn: var(--r-sm); /* скруглённая рамка-«кнопка» из декора гайда (стр. 18) */ } /* Дом Форм — брендбук push.collective (апарт-отель, юридически нежилое). ⛔ Слово «квартира» на страницах ДФ запрещено: «апартаменты» или «резиденция». Светлый конец нейтральной шкалы у бренда белый (стр. 6, тон 1%), поэтому --fg белый, а не выдуманный тёплый оттенок. */ [data-brand="domform"] { --bg: #272b35; /* neutral, стр. 6 */ --bg-elev: #30343f; --fg: #ffffff; /* на bg 14.2:1 */ --fg-muted: rgb(255 255 255 / 0.66); /* на bg 7.06:1 */ --fg-faint: rgb(255 255 255 / 0.40); /* 3.58:1 — ⛔ только 18px+/декор */ --line: rgb(255 255 255 / 0.14); --line-strong: rgb(255 255 255 / 0.28); /* 2.47:1 — декор, ⛔ не для полей */ --field-border: rgb(255 255 255 / 0.40); /* 3.58:1 ≥3 — контур полей (WCAG 1.4.11) */ --accent: #e3c19c; /* primary, стр. 6; на bg 8.34:1 */ --accent-fg: #272b35; /* текст на акценте 8.34:1 */ --accent-loud: #e3c19c; --error: #ff9c8a; /* ошибки формы; на bg 6.99:1, на elev 6.14:1 */ /* secondary #715D56 из гайда на тёмном фоне 2.29:1 — ⛔ только декор (градиенты, подложки); текстом — лишь на светлой подложке (на белом 6.17:1). */ --secondary: #715d56; /* Светлый конец нейтральной шкалы бренда белый (стр. 6, тон 1%) */ --paper: #ffffff; --paper-fg: #272b35; /* Знак бренда. Вектор из брендбука, 976x128, пропорция 7.63 */ --logo: url("../img/logo-domform.svg"); --logo-ratio: 7.63; --font-display: "CoFo Cinema 1909", Georgia, serif; /* ⚠ у нас TRIAL — на прод нельзя (fonts.json: ok_for_prod=false) */ --font-text: "Raleway", system-ui, sans-serif; /* ⚠ CoFo Cinema 1909 — КАПИТЕЛЬНАЯ гарнитура: строчные нарисованы прописными, «Дом Форм» и «ДОМ ФОРМ» выглядят одинаково (проверено рендером 07.08). Значение none честное — регистром управляет текст, а не CSS. Следствие для копирайта жёсткое: заголовок ДФ должен быть КОРОТКИМ; в брендбуке (стр. 12) крупно стоит только «ДОМ ФОРМ», а «бутиковые апартаменты в историческом центре» идёт мелким подзаголовком наборным шрифтом. */ --display-case: none; --display-weight: 400; --display-ls: 0.01em; --r-btn: var(--r-full); /* кнопки-пилюли — макет сайта в брендбуке, стр. 12 */ } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }