/* ============================================================ ZIMA — переключаемые темы (решение владельца 06.09): две независимые оси на : data-zima-type = a | b — шрифты (A: Cormorant Garamond + Onest; B: Fraunces + Manrope) data-zima-palette = a | b | c | d | e — цвета: A снег/ель/графит; B камень/мох/медь (аудит 06.09); C бирюза главной 1 мая (#1b4f52); D аква + беж первого лендинга 15 февраля (#30b0c7 / #f5f0eb); E крем + терракота макета 19 апреля (#c6743a / #0e3538). C/D/E добавлены 11.09 по просьбе владельца — история главной как выбор. Без атрибута — текущий вид. Файл общий для витрины, брони и админки: он переопределяет токены admin-tokens.css, booking-v2.css и ключевые правила marketing.css. Главная (marketing.css) берёт бренд-цвета из --mk-* (fallback = текущие значения), поэтому палитра меняет и её: градиент шапки, кнопки, заголовки, рамки. Полное описание — docs/design-audit.md, список палитр един с src/lib/ui-theme.ts и web/src/lib/ui-theme.ts. ============================================================ */ /* ---------- Шрифты A: «Северный лес» ---------- */ html[data-zima-type="a"] { --zima-font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --zima-font-text: "Onest", "Noto Sans Thai", system-ui, sans-serif; --zima-display-weight: 300; --zima-display-tracking: 0.01em; --zima-display-scale: 1.18; /* admin-tokens.css / booking-v2.css */ --font: var(--zima-font-text); --font-head: var(--zima-font-display); } /* ---------- Шрифты B: «Тёплый камень» ---------- */ html[data-zima-type="b"] { --zima-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif; --zima-font-text: "Manrope", "Onest", "Noto Sans Thai", system-ui, sans-serif; --zima-display-weight: 300; --zima-display-tracking: 0; --zima-display-scale: 1.14; --font: var(--zima-font-text); --font-head: var(--zima-font-display); } html[data-zima-type] body { font-family: var(--zima-font-text); } html[data-zima-type] h1, html[data-zima-type] h2, html[data-zima-type] h3, html[data-zima-type] .booking-hero-desc, html[data-zima-type] .ant-typography h4, html[data-zima-type] h4.ant-typography, html[data-zima-type] .zima-owner-tile-value, html[data-zima-type] .zima-recep-tile-value, html[data-zima-type] .zima-shift-tile-value { font-family: var(--zima-font-display); font-weight: var(--zima-display-weight); letter-spacing: var(--zima-display-tracking); } html[data-zima-type] h1 { font-size: calc(1em * var(--zima-display-scale) * 1.9); line-height: 1.08; } html[data-zima-type] h2 { font-size: calc(1em * var(--zima-display-scale) * 1.45); line-height: 1.15; } html[data-zima-type] h3 { font-size: calc(1em * var(--zima-display-scale) * 1.2); line-height: 1.2; } html[data-zima-type="b"] h1, html[data-zima-type="b"] h2, html[data-zima-type="b"] h3 { font-variation-settings: "opsz" 144, "SOFT" 60; } /* Плитки-числа: антиква легковата для табличных цифр — берём вес 500 */ html[data-zima-type] .zima-owner-tile-value, html[data-zima-type] .zima-recep-tile-value, html[data-zima-type] .zima-shift-tile-value { font-weight: 500; font-variant-numeric: tabular-nums; } /* Витрина: тело 16 px и интерлиньяж 1.55 (правило шкалы) */ html[data-zima-type] .booking-page, html[data-zima-type] .site-page, html[data-zima-type] .marketing-body { font-size: 16px; line-height: 1.55; } html[data-zima-type] .bk2 { --font: var(--zima-font-text); --font-head: var(--zima-font-display); } html[data-zima-type] .bk2 h1, html[data-zima-type] .bk2 h2 { font-weight: var(--zima-display-weight); } /* AntD: заголовки Typography и кнопки остаются на текстовом шрифте */ html[data-zima-type] .ant-btn, html[data-zima-type] .ant-input, html[data-zima-type] .ant-select, html[data-zima-type] .ant-menu { font-family: var(--zima-font-text); } /* ---------- Цвета A: «Северный лес» ---------- */ html[data-zima-palette="a"] { --zima-bg: #f7f8f7; --zima-surface: #ffffff; --zima-ink: #1f2a2c; --zima-ink-soft: #4a5a5c; --zima-ink-mute: #6f7d79; --zima-line: #e3e7e5; --zima-line-2: #d3dad7; --zima-accent: #2e6b62; --zima-accent-deep: #275c54; --zima-accent-soft: #e8f0ed; --zima-sidebar: #1a2325; --zima-warn: #d18b1c; --zima-radius: 4px; --mk-accent: #2e6b62; --mk-accent-deep: #134045; --mk-line-accent: #cfe3df; --mk-accent-rgb: 46 107 98; --mk-accent-deep-rgb: 19 64 69; } /* ---------- Цвета B: «Тёплый камень» ---------- */ html[data-zima-palette="b"] { --zima-bg: #ecebe6; --zima-surface: #f6f5f0; --zima-ink: #2b2b2a; --zima-ink-soft: #4a4a47; --zima-ink-mute: #7a7a74; --zima-line: #dedcd3; --zima-line-2: #cfccc0; --zima-accent: #4f6b5c; --zima-accent-deep: #405849; --zima-accent-soft: #e3e8e2; --zima-sidebar: #2b2b2a; --zima-warn: #b46a3a; --zima-radius: 10px; --mk-accent: #4f6b5c; --mk-accent-deep: #34473d; --mk-line-accent: #cfd8d0; --mk-accent-rgb: 79 107 92; --mk-accent-deep-rgb: 52 71 61; } /* ---------- Цвета C: «Бирюза» — главная 1 мая 2026 (f05e24b), до палитры v2 ---------- */ html[data-zima-palette="c"] { --zima-bg: #f4f7f7; --zima-surface: #ffffff; --zima-ink: #1c2a2c; --zima-ink-soft: #4c5c5e; --zima-ink-mute: #6f7d7f; --zima-line: #dfe6e6; --zima-line-2: #cbd7d8; --zima-accent: #1b4f52; --zima-accent-deep: #134045; --zima-accent-soft: #e3ecec; --zima-sidebar: #134045; --zima-warn: #d18b1c; --zima-radius: 10px; --mk-accent: #1b4f52; --mk-accent-deep: #134045; --mk-line-accent: #c9dcdd; --mk-accent-rgb: 27 79 82; --mk-accent-deep-rgb: 19 64 69; } /* ---------- Цвета D: «Аква и беж» — первый лендинг 15 февраля 2026 (657d832) ---------- */ html[data-zima-palette="d"] { --zima-bg: #f5f0eb; --zima-surface: #ffffff; --zima-ink: #2b2f30; --zima-ink-soft: #5a6062; --zima-ink-mute: #7c8284; --zima-line: #e8e4e0; --zima-line-2: #d0c8c0; --zima-accent: #2698ab; --zima-accent-deep: #1f7f8f; --zima-accent-soft: #e4f3f5; --zima-sidebar: #2b2f30; --zima-warn: #c9862a; --zima-radius: 12px; --mk-accent: #30b0c7; --mk-accent-deep: #2698ab; --mk-line-accent: #d0c8c0; --mk-accent-rgb: 48 176 199; --mk-accent-deep-rgb: 38 152 171; } /* ---------- Цвета E: «Крем и терракота» — макет Claude Design 19 апреля 2026 ---------- */ html[data-zima-palette="e"] { --zima-bg: #f3f5f6; --zima-surface: #ffffff; --zima-ink: #0e3538; --zima-ink-soft: #3b4244; --zima-ink-mute: #6b7374; --zima-line: #dde5e6; --zima-line-2: #c9d4d5; --zima-accent: #c6743a; --zima-accent-deep: #a85f2c; --zima-accent-soft: #f7ebe1; --zima-sidebar: #0e3538; --zima-warn: #d98a4b; --zima-radius: 14px; --mk-accent: #1b4f52; --mk-accent-deep: #0e3538; --mk-line-accent: #dde5e6; --mk-accent-rgb: 27 79 82; --mk-accent-deep-rgb: 14 53 56; } /* В макете E терракота — только кнопки действия; фон шапки остаётся глубоким teal. */ html[data-zima-palette="e"] .site-cta, html[data-zima-palette="e"] .btn-primary, html[data-zima-palette="e"] .faq-chip-book { background: #c6743a; border-color: #c6743a; } /* Переопределение токенов админки (admin-tokens.css) и брони (booking-v2.css) */ html[data-zima-palette] { --primary: var(--zima-accent); --primary-deep: var(--zima-accent-deep); --primary-700: var(--zima-accent-deep); --primary-soft: var(--zima-accent-soft); --primary-line: var(--zima-line-2); --ink: var(--zima-ink); --ink-soft: var(--zima-ink-soft); --ink-mute: var(--zima-ink-mute); --bg-app: var(--zima-bg); --bg-warm: var(--zima-bg); --surface: var(--zima-surface); --surface-2: var(--zima-bg); --sidebar: var(--zima-sidebar); --line: var(--zima-line); --line-2: var(--zima-line-2); --line-warm: var(--zima-line); --warn: var(--zima-warn); --st-booking: var(--zima-accent); --svc-ticket: var(--zima-accent); --r-xs: var(--zima-radius); --r-sm: calc(var(--zima-radius) + 4px); /* бронь */ --teal: var(--zima-accent); --teal-80: var(--zima-accent); --teal-20: var(--zima-line-2); --teal-10: var(--zima-accent-soft); --accent: var(--zima-accent); --accent-deep: var(--zima-accent-deep); --bg: var(--zima-surface); --bg-soft: var(--zima-bg); --bg-frost: var(--zima-bg); --fg: var(--zima-ink); --fg-soft: var(--zima-ink-soft); --fg-muted: var(--zima-ink-mute); --navy: var(--zima-ink); --line-strong: var(--zima-line-2); } html[data-zima-palette] body { background: var(--zima-bg); color: var(--zima-ink); } html[data-zima-palette] .bk2 { --line: var(--zima-line); } /* Админка: карточки и плитки на токенах темы */ html[data-zima-palette] .zima-owner-card, html[data-zima-palette] .zima-owner-tile, html[data-zima-palette] .zima-owner-insights, html[data-zima-palette] .zima-recep-card, html[data-zima-palette] .zima-recep-tile, html[data-zima-palette] .zima-shift-card, html[data-zima-palette] .zima-shift-tile { background: var(--zima-surface); border-color: var(--zima-line); border-radius: calc(var(--zima-radius) + 6px); } html[data-zima-palette] .zima-recep-tile--warn { border-color: var(--zima-warn); } html[data-zima-palette] .ant-layout, html[data-zima-palette] .ant-layout-content { background: var(--zima-bg); } html[data-zima-palette] .ant-btn-primary { background: var(--zima-accent); border-color: var(--zima-accent); } html[data-zima-palette] .ant-btn-primary:hover { background: var(--zima-accent-deep) !important; border-color: var(--zima-accent-deep) !important; } html[data-zima-palette] .zima-desk-sider, html[data-zima-palette] .ant-layout-sider { background: var(--zima-sidebar) !important; } html[data-zima-palette] .zima-desk-sider .ant-menu-dark .ant-menu-item-selected { background: var(--zima-accent) !important; } /* Витрина: акцентные элементы marketing.css (там цвета захардкожены) */ html[data-zima-palette] .booking-hero-cta { border-color: var(--zima-accent-soft); } html[data-zima-palette] .faq-chip-book, html[data-zima-palette] .site-cta, html[data-zima-palette] .btn-primary { background: var(--zima-accent); border-color: var(--zima-accent); } html[data-zima-palette] a:not(.booking-hero-logo):not(.booking-hero-cta) { color: var(--zima-accent-deep); } /* Первый экран главной тёмный: ссылки на нём (кнопка «Забронировать», стрелка, переключатель языка) остаются белыми, иначе акцент-deep тонет в фоне. */ /* Специфичность выше правила a:not():not() выше — (0,3,1). */ html[data-zima-palette] .booking-hero-cta a.booking-hero-cta-label, html[data-zima-palette] .booking-lang-float .site-header-lang a.site-header-lang-btn { color: #fff; } html[data-zima-palette] .booking-hero-cta a.booking-hero-cta-arrow { color: rgba(255, 255, 255, 0.6); } html[data-zima-palette] .booking-page { background: var(--zima-bg); } /* ---------- Админка: крупные заголовки и карточки на дисплейном шрифте / токенах ---------- */ html[data-zima-type] .zima-vj-day-num, html[data-zima-type] .zvd-name, html[data-zima-type] .zima-desk-title { font-family: var(--zima-font-display); font-weight: var(--zima-display-weight); letter-spacing: var(--zima-display-tracking); } html[data-zima-type] .zima-vj-day-num { font-size: 30px; } html[data-zima-type] .zvd-name { font-size: 32px; } html[data-zima-palette] .zima-vj-row, html[data-zima-palette] .fpe-panel, html[data-zima-palette] .zima-plan-line, html[data-zima-palette] .zima-public-price-admin__block, html[data-zima-palette] .ant-card, html[data-zima-palette] .ant-modal-content, html[data-zima-palette] .ant-drawer-content { background: var(--zima-surface); } html[data-zima-palette] .ant-input, html[data-zima-palette] .ant-input-number, html[data-zima-palette] .ant-select-selector { background: var(--zima-surface); border-color: var(--zima-line-2); }