/* ============================================================ BLOCK LIBRARY · TOKENS ------------------------------------------------------------ Правила (ЧИТАТЬ ПЕРЕД ПРАВКОЙ): 1. Все семантические токены объявляются ОДИН раз — в :root. 2. Палитра переключается атрибутом data-palette на . Ни body, ни блок НЕ переобъявляют токены палитры — иначе собственное объявление перебивает наследование от (именно на этом сломалась прошлая версия библиотеки). 3. Шрифтовая пара — data-type, радиусы — data-shape. Итоговая "личность" сайта = палитра × шрифтовая пара × форма × набор и порядок блоков. Новый CSS писать не нужно. ============================================================ */ :root{ /* --- сетка и ритм --- */ --maxw: 1280px; --gutter: clamp(20px, 4vw, 48px); --wrap: min(var(--maxw), 100% - (2 * var(--gutter))); --sect: clamp(64px, 8vw, 132px); --sect-tight: clamp(44px, 5vw, 80px); --gap: clamp(20px, 3vw, 40px); --gap-lg: clamp(32px, 6vw, 96px); /* --- шрифты (перекрывается data-type) --- */ --display: Georgia, "Times New Roman", serif; --body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --display-weight: 500; --display-tracking: -.02em; --display-leading: 1.08; /* --- форма (перекрывается data-shape) --- */ --radius: 4px; --radius-lg: 6px; --btn-radius: 2px; --shadow: 0 18px 50px rgba(15, 22, 20, .12); --shadow-sm: 0 6px 20px rgba(15, 22, 20, .08); /* --- палитра по умолчанию: forest --- */ --paper: #F5F0E7; --surface: #FFFFFF; --tone: #E8DFD1; --ink: #17231D; --ink-soft: #47564E; --line: rgba(23, 35, 29, .20); --brand: #183B2B; --brand-deep: #0F2A1D; --brand-soft: #D8E2D8; --on-brand: #FFFFFF; --accent: #9C4B2B; /* текстовый акцент — ТОЛЬКО на paper/surface/tone */ --accent-bright:#E2B98F; /* декоративный акцент — ТОЛЬКО на dark/brand */ --dark: #101B15; --on-dark: #E4E9E3; --on-dark-soft: #A9B6AC; } /* ------------------------------------------------------------ ПАЛИТРЫ. Каждая проверена на WCAG AA: ink/paper, ink-soft/paper, accent/paper, accent/tone, on-brand/brand, on-dark/dark, on-dark-soft/dark, accent-bright/dark. Скрипт проверки: build/check_palettes.py ------------------------------------------------------------ */ [data-palette="forest"]{ --paper:#F5F0E7; --surface:#FFFFFF; --tone:#E8DFD1; --ink:#17231D; --ink-soft:#47564E; --line:rgba(23,35,29,.20); --brand:#183B2B; --brand-deep:#0F2A1D; --brand-soft:#D8E2D8; --on-brand:#FFFFFF; --accent:#9C4B2B; --accent-bright:#E2B98F; --dark:#101B15; --on-dark:#E4E9E3; --on-dark-soft:#A9B6AC; } [data-palette="petrol"]{ --paper:#F4F5F4; --surface:#FFFFFF; --tone:#DFE8E7; --ink:#14232A; --ink-soft:#42565E; --line:rgba(20,35,42,.20); --brand:#0E4A51; --brand-deep:#08343A; --brand-soft:#D2E3E4; --on-brand:#FFFFFF; --accent:#8F521F; --accent-bright:#E9C69D; --dark:#0E2228; --on-dark:#E3EAEB; --on-dark-soft:#A2B4B7; } [data-palette="slate"]{ --paper:#F3F5F7; --surface:#FFFFFF; --tone:#E1E6EC; --ink:#151F2A; --ink-soft:#465464; --line:rgba(21,31,42,.20); --brand:#22405E; --brand-deep:#14283C; --brand-soft:#D7E2EE; --on-brand:#FFFFFF; --accent:#8A5522; --accent-bright:#DCC09A; --dark:#131E2A; --on-dark:#E4E8ED; --on-dark-soft:#A3AEBC; } [data-palette="oxblood"]{ --paper:#F7F2EE; --surface:#FFFFFF; --tone:#EDDFD8; --ink:#231917; --ink-soft:#554540; --line:rgba(35,25,23,.20); --brand:#6A1F27; --brand-deep:#4B1218; --brand-soft:#EFD7D6; --on-brand:#FFFFFF; --accent:#7A4A18; --accent-bright:#E5B694; --dark:#221518; --on-dark:#EDE3DF; --on-dark-soft:#B6A5A0; } [data-palette="brass"]{ --paper:#F8F4EA; --surface:#FFFFFF; --tone:#EDE3CE; --ink:#1E1A13; --ink-soft:#544E3E; --line:rgba(30,26,19,.20); --brand:#463819; --brand-deep:#2F2508; --brand-soft:#E9DEC2; --on-brand:#FFFFFF; --accent:#78560F; --accent-bright:#D2AE5E; --dark:#201A0F; --on-dark:#EDE6D6; --on-dark-soft:#B4A98F; } [data-palette="plum"]{ --paper:#F6F1F3; --surface:#FFFFFF; --tone:#E8DCE3; --ink:#211A21; --ink-soft:#50444F; --line:rgba(33,26,33,.20); --brand:#48233E; --brand-deep:#311727; --brand-soft:#E6D5E1; --on-brand:#FFFFFF; --accent:#874729; --accent-bright:#DDB39C; --dark:#1E131C; --on-dark:#EBE2E7; --on-dark-soft:#B1A2AC; } [data-palette="sea"]{ --paper:#F1F5F6; --surface:#FFFFFF; --tone:#DCE8EC; --ink:#0F2229; --ink-soft:#405860; --line:rgba(15,34,41,.20); --brand:#16485A; --brand-deep:#0D3141; --brand-soft:#D2E5EC; --on-brand:#FFFFFF; --accent:#8D4F26; --accent-bright:#E3BE9B; --dark:#0E222C; --on-dark:#E2EAED; --on-dark-soft:#9FB2BA; } [data-palette="graphite"]{ --paper:#F4F4F2; --surface:#FFFFFF; --tone:#E4E4E0; --ink:#171716; --ink-soft:#4C4C49; --line:rgba(23,23,22,.20); --brand:#232322; --brand-deep:#121211; --brand-soft:#DEDEDA; --on-brand:#FFFFFF; --accent:#8A3C1D; --accent-bright:#DFB495; --dark:#151514; --on-dark:#E6E6E3; --on-dark-soft:#A8A8A4; } /* ------------------------------------------------------------ ШРИФТОВЫЕ ПАРЫ — только системные стеки. Внешние шрифты не подключаются: скорость + нет сторонних запросов, которые пришлось бы описывать в cookie-политике. ------------------------------------------------------------ */ [data-type="editorial"]{ --display: Georgia, "Times New Roman", serif; --body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --display-weight:500; --display-tracking:-.02em; --display-leading:1.08; } [data-type="grotesk"]{ --display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --display-weight:700; --display-tracking:-.035em; --display-leading:1.04; } [data-type="humanist"]{ --display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --display-weight:500; --display-tracking:-.015em; --display-leading:1.12; } [data-type="garamond"]{ --display: Garamond, "EB Garamond", "Book Antiqua", Georgia, serif; --body: "Trebuchet MS", "Segoe UI", system-ui, Arial, sans-serif; --display-weight:500; --display-tracking:0; --display-leading:1.1; } [data-type="neo"]{ --display: "Trebuchet MS", "Segoe UI", system-ui, Arial, sans-serif; --body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --display-weight:700; --display-tracking:-.025em; --display-leading:1.06; } [data-type="bookman"]{ --display: "Bookman Old Style", "Book Antiqua", Georgia, serif; --body: Verdana, "Segoe UI", system-ui, Arial, sans-serif; --display-weight:500; --display-tracking:-.01em; --display-leading:1.12; } /* ------------------------------------------------------------ ФОРМА — радиусы и тени ------------------------------------------------------------ */ [data-shape="sharp"]{ --radius:0; --radius-lg:0; --btn-radius:0; } [data-shape="soft"]{ --radius:6px; --radius-lg:10px; --btn-radius:4px; } [data-shape="round"]{ --radius:14px; --radius-lg:22px; --btn-radius:999px; }