/* ========================================================================= Esil MOOC — design tokens v2 (DESIGN_SPEC.md §2) Источник: branding/BRAND.md (брендбук 2022). Один файл для LMS, MFE, сертификата, страницы проверки и генератора. ========================================================================= */ /* Roboto Slab — единственная гарнитура бренда. Файлы лежат рядом: fonts/. P1: заменить полные woff2 (66–69 КБ) на подмножество latin+cyrillic+16 казахских кодовых точек (~32 КБ на начертание; замер a11y-трека). */ @font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/RobotoSlab-Light.woff2") format("woff2"); } @font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/RobotoSlab-Regular.woff2") format("woff2"); } @font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/RobotoSlab-Medium.woff2") format("woff2"); } @font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/RobotoSlab-Bold.woff2") format("woff2"); } :root { /* ---------- 1. Палитра брендбука (7 цветов) ---------- */ --esil-green-dark: #1e3228; /* Pantone 5605 C · на белом 13.62 · заголовки, основной текст, подвал */ --esil-green: #008964; /* Pantone 3288 C · на белом 4.41 · ТОЛЬКО иконки, прогресс, рамки, текст ≥24px (или ≥18.66px bold) */ --esil-green-deep: #1a503c; /* Pantone 357 C · на белом 9.31 · действия, ссылки, фирменные панели, герой */ --esil-gold: #96825a; /* Pantone 7503 C · на белом 3.73 · линейки, древко, рамки; НИКОГДА мелкий текст; на зелёном 2.50 — не индикатор */ --esil-gold-light: #f0d78c; /* Pantone 7403 C · на #1a503c 6.56, на #1e3228 9.60 · текст/кнопки на зелёном; на белом 1.42 — НИКОГДА текст */ --esil-black: #000000; --esil-white: #ffffff; /* ---------- 2. Производные (цвет брендбука + белый/чёрный) ---------- */ --esil-paper: #fcf6e6; /* gold-light 22% + white · тёплые полосы, лист сертификата · #1e3228 на нём 12.62 */ --esil-paper-strong: #f8edcb; /* gold-light 45% + white · бейджи, уведомления, фон ошибки · #1e3228 11.65, #000 17.97 */ --esil-gold-tint: #f4e3ae; /* gold-light 70% + white · hover кнопки «золотая фольга» · #1e3228 10.66 */ --esil-mist: #f1f4f3; /* green-deep 6% + white · чередование секций, текущий пункт оглавления · #1e3228 12.30 */ --esil-mist-strong: #e8eeec; /* green-deep 10% + white · hover строк, дорожка прогресса (#008964 на ней 3.75) */ --esil-line: #dae3e0; /* green-deep 16% + white · декоративные волосяные линии (1.31 — не граница элемента управления) */ --esil-control: #74807a; /* green-dark 62% + white · рамки полей и чекбоксов 4.11 (≥3:1 для не-текста) */ --esil-ink: #1e3228; /* = green-dark · основной текст 13.62 */ --esil-ink-2: #4b5b53; /* green-dark 80% + white · вторичный текст 7.19 белый / 6.66 paper */ --esil-muted: #5d6b64; /* green-dark 72% + white · мета ≥14px: 5.60 белый / 5.19 paper / 5.06 mist / 4.79 paper-strong */ --esil-green-text: #006e50; /* green 80% + black · мелкий зелёный текст, «пройдено» 6.28 */ --esil-gold-text: #786848; /* gold 80% + black · мелкий «золотой» текст 5.42 белый / 5.03 paper / 4.64 paper-strong */ --esil-on-green-2: #d1dcd8; /* white 80% + green-deep · вторичный текст на #1a503c 6.62 / на #1e3228 9.69 */ /* ---------- 3. Семантические роли ---------- */ --color-bg: var(--esil-white); --color-bg-alt: var(--esil-mist); --color-bg-warm: var(--esil-paper); --color-surface-brand: var(--esil-green-deep); /* герой, вывески, мобильное меню */ --color-surface-night: var(--esil-green-dark); /* университетская полоса, подвал */ --color-heading: var(--esil-ink); --color-text: var(--esil-ink); --color-text-2: var(--esil-ink-2); --color-text-muted: var(--esil-muted); --color-on-brand: var(--esil-white); /* 9.31 на deep, 13.62 на dark */ --color-on-brand-2: var(--esil-on-green-2); --color-on-brand-accent: var(--esil-gold-light); --color-link: var(--esil-green-deep); /* ВСЕГДА подчёркнута: против текста 1.46 — цвет не отличает ссылку */ --color-link-hover: var(--esil-green-dark); --color-link-on-brand: var(--esil-gold-light); --color-action: var(--esil-green-deep); /* основная кнопка, белый текст 9.31 */ --color-action-hover: var(--esil-green-dark); /* 13.62 */ --color-action-on-brand: var(--esil-gold-light); /* «золотая фольга», текст #1e3228 9.60 */ --color-action-on-brand-hover: var(--esil-gold-tint); --color-control-border: var(--esil-control); --color-rule: var(--esil-gold); /* линейки на светлом; активная вкладка 3.73 */ --color-rule-on-brand: var(--esil-gold-light); /* линейки/черты/подчёркивания на зелёном */ --color-pole: var(--esil-gold); /* «древко» 3px: выбранное/текущее на светлом */ --color-pole-on-brand: var(--esil-gold-light); --color-progress: var(--esil-green); --color-progress-track: var(--esil-mist-strong); --color-plate-bg: var(--esil-gold-light); /* плашка языка ҚАЗ/РУС/ENG */ --color-plate-text: var(--esil-green-dark); /* 9.60 */ --color-state-success: var(--esil-green-deep); /* + значок ✓ + слово */ --color-state-success-bg: var(--esil-mist); --color-state-error: var(--esil-black); /* бренд без красного: чёрный текст + ✕ + рамка/полоса 2–4px */ --color-state-error-bg: var(--esil-paper-strong); --color-state-notice-bg: var(--esil-paper-strong); /* + полоса 3px #96825a слева + значок */ /* ---------- 4. Корпоративные градиенты (45°) — только поверхности и бренд-элементы, НИКОГДА под текстом ---------- */ --esil-gradient-green: linear-gradient(45deg, #1e3228 0%, #008964 50%, #1a503c 100%); /* белый в середине 4.41 → текст на нём запрещён */ --esil-gradient-gold: linear-gradient(45deg, #96825a 0%, #f0d78c 50%, #96825a 100%); /* ---------- 5. Волны герба (флаги с.55, сумки с.27/37, чехол с.35) ---------- */ /* Плитка 48×40 из 4 волн; для полосы: background: var(--esil-waves-…) left center / auto 100% repeat-x */ --esil-waves-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='40' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='%23f0d78c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 5 C6 0 18 0 24 5 S42 10 48 5'/%3E%3Cpath d='M0 15 C6 10 18 10 24 15 S42 20 48 15'/%3E%3Cpath d='M0 25 C6 20 18 20 24 25 S42 30 48 25'/%3E%3Cpath d='M0 35 C6 30 18 30 24 35 S42 40 48 35'/%3E%3C/g%3E%3C/svg%3E"); /* имя из v1: штрих #f0d78c — золото на зелёном */ --esil-waves-gold-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='40' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='%2396825a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 5 C6 0 18 0 24 5 S42 10 48 5'/%3E%3Cpath d='M0 15 C6 10 18 10 24 15 S42 20 48 15'/%3E%3Cpath d='M0 25 C6 20 18 20 24 25 S42 30 48 25'/%3E%3Cpath d='M0 35 C6 30 18 30 24 35 S42 40 48 35'/%3E%3C/g%3E%3C/svg%3E"); /* на белом/бумаге: сертификат */ --esil-waves-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='40' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='%231a503c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 5 C6 0 18 0 24 5 S42 10 48 5'/%3E%3Cpath d='M0 15 C6 10 18 10 24 15 S42 20 48 15'/%3E%3Cpath d='M0 25 C6 20 18 20 24 25 S42 30 48 25'/%3E%3Cpath d='M0 35 C6 30 18 30 24 35 S42 40 48 35'/%3E%3C/g%3E%3C/svg%3E"); /* зелёное на золотой бумаге */ --esil-waves-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='40' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 5 C6 0 18 0 24 5 S42 10 48 5'/%3E%3Cpath d='M0 15 C6 10 18 10 24 15 S42 20 48 15'/%3E%3Cpath d='M0 25 C6 20 18 20 24 25 S42 30 48 25'/%3E%3Cpath d='M0 35 C6 30 18 30 24 35 S42 40 48 35'/%3E%3C/g%3E%3C/svg%3E"); /* фактура на зелёном (чехол с.35), не под текстом */ --esil-wave-line-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 4Q10 0 20 4T40 4' fill='none' stroke='%2396825a' stroke-width='1.5'/%3E%3C/svg%3E"); /* одиночная волна-разделитель (404, пустые состояния) */ --esil-band-sm: 16px; /* < 600px */ --esil-band-md: 24px; /* 600–1023px, мобильные баннеры */ --esil-band-lg: 40px; /* ≥ 1024px: низ героя, верх подвала */ /* ---------- 6. Типографика: только Roboto Slab (Times New Roman — вспомогательная гарнитура брендбука) ---------- */ --font-brand: "Roboto Slab", "Times New Roman", "Noto Serif", Georgia, serif; --font-numeric: "Times New Roman", "Roboto Slab", serif; /* только колонки чисел: у Roboto Slab нет tnum; номер сертификата, длительности */ --fw-light: 300; /* только цифры/дисплей ≥ 36px на сплошном фоне */ --fw-regular: 400; /* текст */ --fw-medium: 500; /* кнопки, подписи полей, вкладки */ --fw-bold: 700; /* заголовки, названия, акцент */ --fs-display: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem); /* 30–52 · H1 героя главной */ --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); /* 28–44 */ --fs-h2: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); /* 22–32 */ --fs-h3: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); /* 18–24 */ --fs-card-title: 1.125rem; /* 18 · строка списка 17 (1.0625rem) */ --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* 17–20 */ --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16–18 */ --fs-ui: 1rem; /* кнопки, поля (≥16px — iOS не зумит) */ --fs-meta: 0.875rem; /* 14 — НИЖНИЙ ПРЕДЕЛ любого текста */ --fs-code: 0.8125rem; /* 13 — только ҚАЗ/РУС/ENG (Bold) и бегущий колонтитул */ --fs-numeral: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); /* цифры шагов «1 2 3», Light/Bold, #96825a (крупный текст 3.73) */ --lh-tight: 1.15; /* ≥ 1.12: акценты Ё/Й +0.905em, хвосты у/р/ұ −0.213em */ --lh-heading: 1.25; --lh-body: 1.6; /* ru/kk */ --lh-body-en: 1.55; --lh-ui: 1.35; --tracking-running: 0.32em; /* «E S I L U N I V E R S I T Y ——— О Н Л А Й Н - К У Р С Ы» — 1 раз на странице */ --tracking-title: 0.22em; /* «С Е Р Т И Ф И К А Т» */ --tracking-code: 0.06em; /* ҚАЗ / РУС / ENG */ --measure: 65ch; /* ru/kk ≈ 66 кириллических знаков */ --measure-en: 55ch; /* ---------- 7. Отступы (сетка 4px) и раскладка ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --gutter: clamp(16px, 4vw, 32px); /* боковое поле никогда не меньше 16px */ --container: 1200px; --container-text: 760px; --univ-bar-h: 32px; /* только ≥ 1024px */ --header-h: 72px; /* ≥ 768px */ --header-h-mobile: 56px; /* < 768px */ --sticky-bar-h: 64px; /* + env(safe-area-inset-bottom) */ --side-card-w: 340px; --filters-w: 264px; --card-min-w: 264px; /* grid-template-columns: repeat(auto-fill, minmax(var(--card-min-w), 1fr)) */ --tap: 48px; /* цель касания на телефоне */ --tap-min: 44px; /* плотный десктоп; WCAG 2.5.8 минимум 24px */ /* Брейкпоинты (в @media): 600 — карточки→строки; 768 — десктопная шапка; 1024 — 2 колонки курса, полоса университета; 1200 — 4 колонки */ /* ---------- 8. Радиусы: язык вывесок и печатных листов ---------- */ --radius-0: 0; /* герой, вывески, полосы, лист сертификата, липкие панели */ --radius-1: 2px; /* плашки языка, вымпел, бейджи */ --radius-2: 4px; /* кнопки, поля, карточки, чипы фильтров, постер видео */ --radius-3: 8px; /* верхние углы нижнего листа, диалоги */ --radius-round: 50%;/* печать, аватар */ /* ---------- 9. Линейки и тени (тонированы #1e3228 = rgb 30 50 40) ---------- */ --rule-hair: 1px solid var(--esil-line); --rule-gold: 1px solid var(--esil-gold); --rule-gold-short-w: 32px; /* короткая золотая линейка под H2: 32×2px (пригласительные с.30) */ --pole-w: 3px; /* «древко» вымпела с.54 */ --shadow-1: 0 1px 2px rgb(30 50 40 / 0.10); --shadow-lift: 0 2px 4px rgb(30 50 40 / 0.10), 0 12px 28px -12px rgb(30 50 40 / 0.30); /* hover карточки, липкая боковая карточка */ --shadow-bar: 0 -1px 0 #dae3e0, 0 -6px 20px rgb(30 50 40 / 0.10); /* нижняя липкая панель */ --shadow-sheet: 0 -12px 32px rgb(30 50 40 / 0.18); /* нижний лист, меню */ --shadow-paper: 0 1px 0 rgb(30 50 40 / 0.06), 0 10px 30px -18px rgb(30 50 40 / 0.35); /* лист сертификата */ /* ---------- 10. Фокус ---------- */ --focus-ring: 0 0 0 2px #ffffff, 0 0 0 5px #1a503c; /* любая светлая поверхность 9.31; работает и вплотную к кнопке #1a503c */ --focus-ring-on-brand: 0 0 0 3px #f0d78c; /* на #1a503c 6.56, на #1e3228 9.60 */ --focus-ring-lv: 0 0 0 3px #ffffff, 0 0 0 7px #000000; /* режим для слабовидящих */ /* ---------- 11. Движение ---------- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-1: 120ms; /* hover, нажатие */ --dur-2: 200ms; /* лист, меню, липкая панель */ --dur-3: 320ms; /* только «печать» на странице проверки */ /* ---------- 12. Слои ---------- */ --z-sticky: 10; --z-bar: 20; --z-header: 30; --z-sheet: 40; --z-toast: 50; /* ---------- 13. Псевдонимы v1 (branding/tokens.css) — чтобы не ломать существующий CSS ---------- */ --esil-font: var(--font-brand); --esil-h1: var(--fs-h1); --esil-h2: var(--fs-h2); --esil-h3: var(--fs-h3); --esil-h4: 1.25rem; --esil-text-xs: var(--fs-meta); --esil-text-sm: 0.9375rem; --esil-text-md: 1rem; --esil-text-lg: var(--fs-lead); --esil-leading: var(--lh-body); --esil-leading-tight: var(--lh-heading); --esil-measure: var(--measure); --esil-tracking-caps: var(--tracking-running); --esil-radius-sm: var(--radius-1); --esil-radius: var(--radius-2); --esil-radius-lg: var(--radius-3); --esil-shadow: var(--shadow-1); --esil-shadow-lift: var(--shadow-lift); --esil-focus: var(--focus-ring); --esil-success: var(--esil-green-text); --esil-container: var(--container); /* Extra v1 aliases kept for generator/esil_generator/static/app.css (not owned here) */ --esil-weight-light: var(--fw-light); --esil-weight-regular: var(--fw-regular); --esil-weight-medium: var(--fw-medium); --esil-weight-bold: var(--fw-bold); } :lang(en) { --measure: var(--measure-en); --lh-body: var(--lh-body-en); } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } } /* ---------- «Для слабовидящих» (класс на ; ставится inline-скриптом из cookie esil-lv до отрисовки) ---------- */ html.esil-lv-125 { font-size: 125%; } html.esil-lv-150 { font-size: 150%; } html.esil-lv-spacing { --lh-body: 1.9; letter-spacing: 0.04em; word-spacing: 0.12em; } html.esil-lv-contrast { /* чёрный на белом 21:1 */ --color-text: #000; --color-text-2: #000; --color-text-muted: #000; --color-heading: #000; --color-bg-alt: #fff; --color-bg-warm: #fff; --esil-line: #000; --color-link: #000; --focus-ring: var(--focus-ring-lv); } html.esil-lv-night { /* белый на #1e3228 13.62, ссылки #f0d78c 9.60 */ --color-bg: #1e3228; --color-bg-alt: #1e3228; --color-bg-warm: #1e3228; --color-text: #fff; --color-text-2: #fff; --color-text-muted: #fff; --color-heading: #fff; --color-link: #f0d78c; --esil-line: #f0d78c; color-scheme: dark; } html.esil-lv-gold { /* #1e3228 на #f0d78c 9.60 */ --color-bg: #f0d78c; --color-bg-alt: #f0d78c; --color-bg-warm: #f0d78c; --color-text: #1e3228; --color-text-2: #1e3228; --color-text-muted: #1e3228; --color-link: #1e3228; --esil-line: #1e3228; } html.esil-lv-noimg img:not(.esil-logo):not(.esil-crest) { visibility: hidden; } html[class*="esil-lv-"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } html[class*="esil-lv-"] a { text-decoration-thickness: 2px; } /* ---------- Paragon 23 (MFE brandOverride) — генерировать `paragon build-tokens`, hover-оттенки не править руками ---------- --pgn-color-primary-base: #1a503c (hover #1e3228) --pgn-color-brand-base: #008964 (прогресс, акценты) --pgn-color-info-base: #1a503c (Indigo мапит ссылки на info — сейчас бирюзовые) --pgn-color-link-base: #1a503c (подчёркивание сохранить) --pgn-color-success-base: #1a503c --pgn-color-danger-base: #000000 (до согласования красного) --pgn-color-warning-base: #786848 --pgn-color-light-base: #f1f4f3 --pgn-color-dark-base: #1e3228 --pgn-color-gray-700: #4b5b53 --pgn-color-light-400: #dae3e0 --pgn-typography-font-family-base / -headings: "Roboto Slab", "Times New Roman", serif --pgn-size-border-radius-base: 4px; карточка: без тени, рамка 1px #dae3e0 ------------------------------------------------------------------------------------------ */