/* ============================================================================ blocks.css — АГРЕГАТОР стилей секций-блоков витрины-сайта (site-smith). Один на shop-поверхности (shop_ssr.html, после pro.css) подтягивает CSS всех 7 блоков. Buildless MPA: CSS не импортится из JS-модуля → собираем через @import здесь. ?v=8cc7da7372 штампуется ПОЛНЫМ деплоем (deploy-from-ref переписывает 8cc7da7372 в каждом *.css под frontend/) → кэш-бустинг корректен. Каждый блок использует только токены tokens.css (0 хардкод-hex) — палитра/ типографика за ux-pro (UI-гейт). ============================================================================ */ /* Волна 4: старый набор блоков магазина СНЕСЁН (renderShop больше их не рендерит). Их CSS (about_master/about_services/alternating/portfolio/faq/guarantees/final_cta .css) — мёртвые файлы, удаляются вместе с их .js. Единственный набор — site_* ниже. */ /* НОВЫЙ и ЕДИНСТВЕННЫЙ набор блоков standalone-магазина (site_*): ДОСЛОВНЫЙ порт эталона frontend/master-site.html — классы s-* под .site, var-контракт темы читается напрямую. */ @import url("./site/site-blocks.css?v=8cc7da7372"); /* ============================================================================ СЛОЙ ТЕМЫ витрины-сайта мастера (ux-pro, wave-2 — «стили реально работают»). --------------------------------------------------------------------------- site-smith (shop-themes.js) ставит на КОНТЕЙНЕРЕ витрины (.site, атрибут data-r) inline-переменные var-контракта: --acc/--sbg/--ssurf/--sink/--smut/ --sline/--sline2/--grad/--sfont/--sfont-head/--shead-w/--shead-ls/--sstroke. Но сами блоки (.blk-*) и shop-хром (.pp-*) читают ТОКЕНЫ tokens.css (--violet/--ink/--card/--bg/--font/…). Этот слой ПЕРЕОПРЕДЕЛЯЕТ те токены ВНУТРИ [data-r] через контракт-переменные С FALLBACK на tokens → всё поддерево витрины перекрашивается/перешрифчивается темой, а вне [data-r] (обычные страницы) не меняется НИЧЕГО (fallback = текущее значение токена). Инвариант контраста: акцент-рампа выводится из ОДНОГО --acc — тинты (50–300) подмешиваются к белому (светлые, тёмный текст читается), шейды (600–900) — к чёрному (тёмные, белый текст читается). Пара «near-white тинт + near-black текст» держит AA на ЛЮБОЙ поверхности (свет/тёмная тема). color-mix уже используется блоками (portfolio scrim) → браузер-база достаточна. Известное ограничение: очень светлый акцент (жёлтый/лайм) + белый текст на solid-кнопке accent-600 может не добить AA (жёлтый нельзя затемнить в жёлтый); тёмные темы: акцент-ТЕКСТ прямо на странице (eyebrow/inline-ссылки) светлеет слабо — обе точки в follow-up, основная масса (свет/пастель) корректна. ============================================================================ */ [data-r] { /* ── шрифты темы ─────────────────────────────────────────────────────── */ --font: var(--sfont, 'Inter', system-ui, -apple-system, sans-serif); --font-display: var(--sfont-head, 'Unbounded', system-ui, sans-serif); /* ── поверхности / текст / линии (даёт тёмным темам реально тёмный рендер) ─ */ --bg: var(--sbg, #FFFDF7); --card: var(--ssurf, #FFFFFF); --ink: var(--sink, #141414); --ink2: var(--smut, #5B5B66); --line: var(--sline, rgba(20, 20, 20, .08)); --line2: var(--sline2, rgba(20, 20, 20, .14)); /* секция-полоса — лёгкий тинт основного текста поверх фона страницы темы */ --bg2: color-mix(in srgb, var(--sink, #141414) 5%, var(--sbg, #F6F2EA)); /* ── акцент (primary) + фирменный градиент ───────────────────────────── */ --violet: var(--acc, #7C5CFF); --grad-hero: var(--grad, linear-gradient(135deg, #FF5E7E 0%, #7C5CFF 100%)); /* Баннер-градиент СТИЛЯ (theme.g ≠ accent-градиент): applyTheme ставит --grad-banner inline на #app (клиент-рендер баннера, inline всегда побеждает это правило); здесь — статичный канон-fallback на случай data-r без inline. Знак света/CTA — --banner-* (inline). */ --grad-banner: var(--grad, linear-gradient(120deg, #7C5CFF, #FF5E7E)); /* ── акцент-рампа, выведенная из --acc (свет→белый, тень→чёрный) ──────── */ --violet-50: color-mix(in srgb, var(--acc, #7C5CFF) 10%, #fff); --violet-100: color-mix(in srgb, var(--acc, #7C5CFF) 20%, #fff); --violet-200: color-mix(in srgb, var(--acc, #7C5CFF) 34%, #fff); --violet-300: color-mix(in srgb, var(--acc, #7C5CFF) 55%, #fff); --violet-400: color-mix(in srgb, var(--acc, #7C5CFF) 80%, #fff); --violet-500: var(--acc, #7C5CFF); --violet-600: color-mix(in srgb, var(--acc, #7C5CFF) 82%, #000); --violet-700: color-mix(in srgb, var(--acc, #7C5CFF) 66%, #000); --violet-800: color-mix(in srgb, var(--acc, #7C5CFF) 52%, #000); --violet-900: color-mix(in srgb, var(--acc, #7C5CFF) 36%, #000); } /* ── ФОН-ПОЛОТНО витрины: пейнтим --bg (внутри [data-r] = --sbg темы) на ВЕСЬ shop-контейнер #app, чтобы тема красила полотно ЦЕЛИКОМ — включая ТЁМНЫЕ темы. Дыра до фикса: [data-r] выше ремапит --bg←--sbg, но НИ ОДИН элемент не пейнтил этот --bg как фон страницы → на тёмной теме --sink-текст светлел, а полотно body оставалось светлым (body вне #app, ремап [data-r] его не достаёт) = светлый текст на светлом фоне. Здесь #app (полноширный внешний контейнер витрины: шапка+сегмент+ main+подвал под одним [data-r]) заливается var(--bg): тёмная тема → всё полотно тёмное, --sink читаем; светлая → --sbg светлый, как секции-блоки (.ssb-page тоже =--bg, без candy) → визуально консистентно, без регрессии. min-height=100dvh: фон идёт на всю высоту viewport (нет светлого «хвоста» под коротким контентом), dvh — mobile-safe. Секции-ритм (--ssb-surface/soft/muted/brand) красятся ПОВЕРХ (у блоков свой background) → дивайдер-ритм цел. .pp-col-site НЕ подходит под заливку (это центрированная колонка max-1040px → на тёмной теме дала бы тёмную полосу в светлых гуттерах); полотно обязано быть на полноширном #app. Скоуп строго shop: #app[data-r] ставит только JS-клиент витрины (applyShopTheme) — профиль (.pp-col-master, без data-r), маркетплейс, редактор и no-JS/краулер (SSR без theme_vars → нет data-r) не тронуты; SSR-парити и tokens-дефолт целы. ── */ #app[data-r] { min-height: 100dvh; background: var(--bg); } /* ── радиус-режим темы (data-r): sharp почти-прямой · round максимально мягкий. soft = дефолт tokens.css (не переопределяем). Скоуп только внутри витрины. ── */ [data-r="sharp"] { --r: 6px; --r-lg: 8px; --rad-xs: 3px; --rad-sm: 4px; --rad-md: 5px; --rad-lg: 6px; --rad-xl: 8px; --rad-2xl: 10px; --pill: 7px; --rad-pill: 7px; } [data-r="round"] { --r: 28px; --r-lg: 40px; --rad-xs: 10px; --rad-sm: 14px; --rad-md: 18px; --rad-lg: 24px; --rad-xl: 30px; --rad-2xl: 40px; /* pill остаётся 999px (tokens) — круглые кнопки/чипы = суть round-режима */ }