/* ──────────────────────────────────────────────────────────────────────────── theme.css — единая дизайн-система для всех страниц проекта. Подключать в ПЕРЕД inline-стилями и site-header.css. Inline-`:root` в HTML перекрывает значения отсюда (каскад) — там держим только страничные override'ы (например --gradient-hero для quiz/cabinet). История: - 2026-04-21: создан (P2-7). До этого :root дублировался в 12 HTML, часть значений разъехалась (color-carbs amber vs зелёный, gradient-text warm vs розовый). Приведено к единому состоянию. ──────────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand ──────────────────────────────────────────────── */ --color-primary: #A855F7; /* ── Text ───────────────────────────────────────────────── */ --text-primary: #1E1B2E; /* ratio 14.5:1 на #FEFCFA */ --text-secondary: #5E5E7A; /* ratio 4.6:1 — WCAG AA */ /* ── Surfaces ───────────────────────────────────────────── */ --bg-page: #FEFCFA; --surface-glass: #FFFFFF; --surface-glass-hover: #FAFAF8; --surface-glass-border: #F0EBE3; --shadow-glass: 0 2px 16px rgba(120, 80, 30, 0.06); /* ── Geometry ───────────────────────────────────────────── */ --radius-card: 24px; --radius-btn: 9999px; --radius-input: 16px; /* ── Macros (пищевые нутриенты для донатов/графиков) ───── */ --color-protein: #C084FC; /* purple-400 */ --color-fat: #FB923C; /* orange-400 */ --color-carbs: #FBBF24; /* amber-400 — синхронизировано 2026-04-21 */ /* ── CTA ────────────────────────────────────────────────── */ --gradient-cta: linear-gradient(135deg, #A855F7, #EC4899); --shadow-cta: rgba(168, 85, 247, 0.35); --shadow-cta-hover: rgba(168, 85, 247, 0.45); /* ── Gradient-text (warm editorial, P2-17) ──────────────── */ --gradient-text: linear-gradient(135deg, #2B1810 0%, #9A3412 50%, #C2410C 100%); } /* ── Focus indicators (WCAG 2.4.7, A11Y-P0-2) ────────────── Единое правило для всех интерактивных элементов. `!important` необходим: в 17 HTML-файлах исторически `input:focus { outline: none }` (specificity 0,1,1) перебивает наш `:focus-visible` (0,1,0). `!important` гарантирует что keyboard-пользователи видят фокус. Mouse-пользователей не затрагивает: `:focus-visible` matches только при keyboard-нав. ────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; border-radius: 4px; } /* inputs/selects — box-shadow для лучшей читаемости поверх border */ input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15); } /* ── Skip link (A11Y-P2-7, WCAG 2.4.1) ────────────────────── Первый элемент в табе. Видим только при focus — позволяет keyboard/screen-reader юзерам пропустить navigation/header и сразу попасть на контент. ────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -40px; left: 8px; background: var(--color-primary); color: #FFFFFF; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-weight: 600; z-index: 10000; transition: top 0.15s; } .skip-link:focus { top: 8px; }