/* ============================================================ ZIMA — переключаемые темы (решение владельца 06.09): две независимые оси на : data-zima-type = a | b — шрифты (A: Cormorant Garamond + Onest; B: Fraunces + Manrope) data-zima-palette = a | b — цвета (A: снег/ель/графит; B: камень/мох/медь) Без атрибута — текущий вид. Файл общий для витрины, брони и админки: он переопределяет токены admin-tokens.css, booking-v2.css и ключевые правила marketing.css. Полное описание — docs/design-audit.md. ============================================================ */ /* ---------- Шрифты 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; } /* ---------- Цвета 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; } /* Переопределение токенов админки (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); } 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); }