/* * Токены оформления. * * Одна вёрстка, две палитры. Всё, что различается между светлой и тёмной * темой, объявлено здесь и только здесь: в шаблонах и в main.css цвета * встречаются исключительно как var(--…). * * В макете тема считалась в JavaScript — 52 тернарника вида `dark ? A : B` * пересчитывались на каждый элемент при каждом переключении. Здесь смена * темы — это смена одного атрибута на . */ @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Variable.woff2') format('woff2-variations'); font-weight: 400 800; font-display: swap; font-style: normal; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; font-style: normal; } :root { /* Типографика */ --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; /* Сетка */ --container: 1160px; --gutter: 20px; --hair: 2px; /* зазор между карточками: сетка из волосяных линий */ --section-gap: 40px; /* ── Светлая палитра ─────────────────────────────────────────── */ --bg: #f8fafc; --fg: #0c0e14; --muted: #5b6675; --card: #ffffff; --surface: #f1f5f9; --input: #ffffff; --border: rgba(0, 0, 0, 0.08); --border-2: rgba(0, 0, 0, 0.12); --faint: rgba(0, 0, 0, 0.22); --brand: #1a4fa0; --danger: #dc2626; --danger-bg: rgba(239, 68, 68, 0.09); --danger-border: rgba(220, 38, 38, 0.3); --ok: #15803d; /* Точки на фоне блока чек-листа */ --dots: rgba(0, 0, 0, 0.05); /* Акценты: базовый цвет, цвет текста, подложка, граница. Базовый одинаков в обеих темах, остальные три различаются. */ --a1: #f97316; --a2: #3b82f6; --a3: #10b981; --a4: #a855f7; --a5: #ec4899; --a6: #06b6d4; --at1: #c2410c; --at2: #1d4ed8; --at3: #047857; --at4: #6d28d9; --at5: #9d174d; --at6: #0369a1; --ab1: #fff7ed; --ab2: #eff6ff; --ab3: #ecfdf5; --ab4: #f5f3ff; --ab5: #fdf2f8; --ab6: #ecfeff; --ad1: rgba(249, 115, 22, 0.25); --ad2: rgba(59, 130, 246, 0.25); --ad3: rgba(16, 185, 129, 0.25); --ad4: rgba(168, 85, 247, 0.25); --ad5: rgba(236, 72, 153, 0.25); --ad6: rgba(6, 182, 212, 0.25); /* Фильтр для встроенной карты: в светлой теме не трогаем */ --map-filter: none; } :root[data-theme='dark'] { --bg: #09090f; --fg: #f0f4ff; /* В макете здесь стоял #6B7280 — контраст 4.4:1, на грани AA для мелкого текста. Поднято до безопасного значения. */ --muted: #8b93a1; --card: #0f1117; --surface: #0c0e16; --input: #12141c; --border: rgba(255, 255, 255, 0.07); --border-2: rgba(255, 255, 255, 0.12); --faint: rgba(255, 255, 255, 0.18); --brand: #4c8de0; --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.13); --danger-border: rgba(239, 68, 68, 0.45); --ok: #22c55e; --dots: rgba(255, 255, 255, 0.05); --at1: #fb923c; --at2: #60a5fa; --at3: #34d399; --at4: #c084fc; --at5: #f472b6; --at6: #22d3ee; --ab1: rgba(249, 115, 22, 0.07); --ab2: rgba(59, 130, 246, 0.07); --ab3: rgba(16, 185, 129, 0.07); --ab4: rgba(168, 85, 247, 0.07); --ab5: rgba(236, 72, 153, 0.07); --ab6: rgba(6, 182, 212, 0.07); --map-filter: invert(90%) hue-rotate(180deg); } /* * Локальный акцент. * * Элементу достаточно класса .sec-3, дальше он пользуется --a/--at/--ab/--ad * и не знает, какой именно цвет за ними стоит. Так один и тот же компонент * работает в любом разделе. */ .sec-1 { --a: var(--a1); --at: var(--at1); --ab: var(--ab1); --ad: var(--ad1); } .sec-2 { --a: var(--a2); --at: var(--at2); --ab: var(--ab2); --ad: var(--ad2); } .sec-3 { --a: var(--a3); --at: var(--at3); --ab: var(--ab3); --ad: var(--ad3); } .sec-4 { --a: var(--a4); --at: var(--at4); --ab: var(--ab4); --ad: var(--ad4); } .sec-5 { --a: var(--a5); --at: var(--at5); --ab: var(--ab5); --ad: var(--ad5); } .sec-6 { --a: var(--a6); --at: var(--at6); --ab: var(--ab6); --ad: var(--ad6); }