/* * Сказкин — Design System CSS Variables * Version 2.2 «Экслибрис» · 2026-07-20 — синий+латунь на бумаге, Playfair Display ExtraBold 800 + Golos Text. * Version 1.0 · 2026-05-25 (архив: коралл+золото, Playfair+Montserrat). * Source: skazkin.me * * Имена токенов --skz-* сохранены для обратной совместимости; изменены только значения. * Шрифты подключены @import ниже (сквозно, где бы ни грузился theme.css). */ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,800;1,800&family=Golos+Text:wght@400;500;600&display=swap"); @import url("/static/ds.generated.css"); :root { /* ============ COLOUR — BRAND (Экслибрис) ============ */ --skz-coral: #24406E; /* CTA / основной акцент — синий blue-core (имя legacy) */ --skz-coral-hover: #1B3355; /* Нажатие CTA — blue-press */ --skz-gold: #A67C2E; /* Латунь: декор, искра, фольга (НЕ текст на светлом) */ --skz-gold-hover: #6E5316; /* Текст-золото / нажатие латунной кнопки — brass-text (AA 6.4:1) */ /* ============ COLOUR — NEUTRALS ============ */ --skz-chocolate: #232E47; /* Основной текст — чернила (ink) */ --skz-indigo: #232E47; /* Тёмная поверхность — «ночь» (тот же ink) */ --skz-gray-warm: #545D70; /* Приглушённый текст, caption — ink-soft (AA) */ --skz-light-tan: #C9B87E; /* Описания на тёмном — brass-soft */ /* ============ COLOUR — SURFACES ============ */ --skz-bg: #F7F1E4; /* Фон-бумага (paper). NEVER use #FFFFFF */ --skz-surface: #FCF8EE; /* Карточки, поднятые блоки (card) */ --skz-sand: #EFE7D2; /* Отзывы, альт-секции — форзац (endpaper) */ /* ============ COLOUR — LINES ============ */ --skz-line: #DCD1B8; /* Тонкие разделители/рамки */ --skz-line-deep: #C9BFA9; /* Контрастная линия */ /* ============ COLOUR — TEXT ============ */ --skz-text-light: var(--skz-chocolate); --skz-text-light-muted: var(--skz-gray-warm); --skz-text-dark: #F7F1E4; /* На чернильном фоне — бумага */ --skz-text-dark-muted: var(--skz-light-tan); --skz-text-on-primary: #FCF8EE; /* На синей CTA — кремовый */ /* ============ COLOUR — STATE ============ */ --skz-success: #2E7D57; /* Приглушённый зелёный под палитру */ --skz-warning: #B4472A; /* Ошибка — тёплый терракот (не сливается с синим CTA) */ /* ============ TYPOGRAPHY — FAMILIES ============ */ --skz-font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif; --skz-font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ============ TYPOGRAPHY — WEIGHTS ============ */ --skz-weight-regular: 400; --skz-weight-medium: 500; --skz-weight-semibold: 600; --skz-weight-bold: 700; --skz-weight-serif: 800; --skz-weight-black: 900; /* ============ TYPOGRAPHY — SIZES (шкала ДС «Экслибрис» 16.07.2026: заголовки текут clamp'ом, отдельные мобильные ступени не нужны) ============ */ --skz-text-h1: clamp(29px, 3.1vw, 40px); --skz-text-h2: clamp(26px, 2.6vw, 32px); --skz-text-h3: 22px; --skz-text-epigraph: 22px; --skz-text-body: 16px; --skz-text-button: 16px; --skz-text-price: 30px; --skz-text-descriptor: 13px; --skz-text-caption: 14px; /* ============ TYPOGRAPHY — LINE HEIGHT ============ */ --skz-leading-tight: 1.1; --skz-leading-snug: 1.15; --skz-leading-normal: 1.2; --skz-leading-relaxed: 1.4; --skz-leading-loose: 1.6; /* ============ TYPOGRAPHY — LETTER SPACING ============ */ --skz-tracking-tight: -0.01em; --skz-tracking-normal: 0; --skz-tracking-wide: 0.04em; --skz-tracking-wider: 0.08em; /* Descriptor caps */ /* ============ SPACING (шкала ДС: 4 8 12 16 24 32 48 64 96) ============ */ --skz-space-1: 4px; --skz-space-2: 8px; /* base unit */ --skz-space-3: 12px; --skz-space-4: 16px; --skz-space-5: 20px; /* ЛЕГАСИ вне шкалы — в новом коде не использовать */ --skz-space-6: 24px; --skz-space-8: 32px; --skz-space-10: 40px; /* ЛЕГАСИ вне шкалы — в новом коде не использовать */ --skz-space-12: 48px; /* section gap mobile */ --skz-space-16: 64px; --skz-space-20: 80px; /* ЛЕГАСИ вне шкалы — в новом коде не использовать */ --skz-space-24: 96px; /* section gap desktop */ /* ============ BORDER RADIUS (шкала ДС 16.07.2026: 0/2/6/8, больше 8 — нет; легаси-имена сохранены, значения сведены к канону) ============ */ --skz-radius-none: 0; --skz-radius-sm: 8px; /* карточки, панели */ --skz-radius-md: 8px; /* карточки, модалки (было 16) */ --skz-radius-lg: 8px; /* крупные панели (было 20) */ --skz-radius-xl: 6px; /* кнопки, поля (было 24 pillow) */ --skz-radius-full: 9999px; /* только круглые счётчики/точки */ /* ============ SHADOWS ============ */ --skz-shadow-card: 0 4px 24px rgba(35, 46, 71, 0.07); --skz-shadow-card-hover: 0 10px 32px rgba(35, 46, 71, 0.12); --skz-shadow-cta: 0 4px 16px rgba(36, 64, 110, 0.22); /* ЛЕГАСИ: тень наружу против ДС (кнопкам — кромка inset); живёт до переверстки чекаута */ --skz-shadow-divider: 0 1px 0 rgba(201, 191, 169, 0.55); /* ============ LAYOUT ============ */ --skz-container-max: 1200px; --skz-container-pad-mobile: 20px; --skz-container-pad-desk: 48px; --skz-button-min-height: 48px; /* ============ BREAKPOINTS ============ */ /* Use in media queries: */ /* @media (max-width: 480px) { ... mobile ... } */ /* @media (max-width: 960px) { ... tablet ... } */ /* @media (min-width: 1200px) { ... desktop ... } */ } /* ============ MOBILE-SCALED TYPOGRAPHY ============ Заголовки и цена текут clamp'ом — мобильные ступени только у мелких стилей */ @media (max-width: 480px) { :root { --skz-text-h3: 20px; --skz-text-epigraph: 18px; --skz-text-body: 15px; --skz-text-descriptor: 11px; --skz-text-caption: 12px; } } /* ============ BASE STYLES ============ */ body { font-family: var(--skz-font-sans); font-weight: var(--skz-weight-regular); font-size: var(--skz-text-body); line-height: var(--skz-leading-loose); color: var(--skz-text-light); background: var(--skz-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--skz-font-serif); font-weight: var(--skz-weight-serif); color: var(--skz-chocolate); text-transform: none; /* антиква Playfair Display — без капса */ } h1 { font-size: var(--skz-text-h1); line-height: var(--skz-leading-tight); } h2 { font-size: var(--skz-text-h2); line-height: var(--skz-leading-snug); } h3 { font-size: var(--skz-text-h3); line-height: var(--skz-leading-normal); } em, .italic-editorial { font-family: var(--skz-font-serif); font-style: italic; font-weight: var(--skz-weight-serif); } .descriptor { font-family: var(--skz-font-sans); font-weight: var(--skz-weight-medium); font-size: var(--skz-text-descriptor); letter-spacing: var(--skz-tracking-wider); text-transform: uppercase; color: var(--skz-gray-warm); } /* ============ BUTTON UTILITIES ============ */ .btn-skz { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--skz-button-min-height); padding: 14px 32px; border-radius: var(--skz-radius-xl); font-family: var(--skz-font-sans); font-weight: var(--skz-weight-semibold); font-size: var(--skz-text-button); letter-spacing: var(--skz-tracking-wide); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out; } .btn-skz--primary { background: var(--skz-coral); color: var(--skz-text-on-primary); } .btn-skz--primary:hover { background: var(--skz-coral-hover); box-shadow: inset 0 0 0 1px var(--skz-light-tan); } /* --secondary (шоколадная заливка) и --gold (латунь+чернила ~3,6:1) удалены 16.07.2026 — против ДС; админская --gold живёт переопределением в admin.css */ .btn-skz--ghost { background: transparent; color: var(--skz-chocolate); border-color: var(--skz-line-deep); } .btn-skz--ghost:hover { background: var(--skz-surface); border-color: var(--skz-gold); color: var(--skz-chocolate); } /* ============ CONTAINER ============ */ .container-skz { max-width: var(--skz-container-max); margin: 0 auto; padding: 0 var(--skz-container-pad-mobile); } @media (min-width: 768px) { .container-skz { padding: 0 var(--skz-container-pad-desk); } } /* ============ CARD UTILITY ============ */ .card-skz { background: var(--skz-surface); border-radius: var(--skz-radius-md); padding: var(--skz-space-8); box-shadow: var(--skz-shadow-card); transition: box-shadow 0.2s ease-out; } /* hover не двигает макет (канон motion ДС) — только тень */ .card-skz:hover { box-shadow: var(--skz-shadow-card-hover); } /* ============ SECTION UTILITY ============ */ .section-skz { padding: var(--skz-space-24) 0; } @media (max-width: 480px) { .section-skz { padding: var(--skz-space-12) 0; } } .section-skz--dark { background: var(--skz-indigo); color: var(--skz-text-dark); } .section-skz--dark h1, .section-skz--dark h2, .section-skz--dark h3 { color: var(--skz-text-dark); } .section-skz--cream { background: var(--skz-surface); } .section-skz--sand { background: var(--skz-sand); } .section-skz--endpat { background-color: var(--skz-sand); background-image: url('data:image/svg+xml;utf8,'); }