/* ═══════════════════════════════════════════════════════ THEIA AI — AI Guided Learning System | Main Stylesheet ═══════════════════════════════════════════════════════ */ /* Шрифты грузятся через в base/base.html (быстрее, чем @import — не блокирует парсинг этого файла). Здесь только переменные/токены. */ :root { --bg:#0a0a0f; --surface:#111118; --surface-2:#1a1a24; /* ИСПРАВЛЕНИЕ: границы были сплошным серым (#252535) — визуально "шаблонно". Полупрозрачный белый — тот самый приём тёмных интерфейсов уровня Linear ("границы, нарисованные светом, а не закрашенные"). Прозрачность подобрана так, чтобы сохранить ту же воспринимаемую яркость, что и раньше — ничего не "пропадает" там, где граница служит треком прогресс-бара. */ --border:rgba(255,255,255,.09); --border-light:rgba(255,255,255,.05); --text:#e8e8f0; --text-muted:#888899; --text-dim:#555566; --accent:#7c6dfa; --accent-dim:#5a4fd0; --accent-glow:rgba(124,109,250,.25); --green:#22d3a0; --green-dim:rgba(34,211,160,.15); --red:#f55555; --red-dim:rgba(255,85,85,.15); --yellow:#f5c518; --yellow-dim:rgba(245,197,24,.15); --font-sans:'Montserrat',system-ui,sans-serif; --font-mono:'Space Mono',monospace; /* ДОБАВЛЕНО: сигнатурный вес для UI-текста — между обычным (400) и medium (600), как Linear's "510" — едва заметный акцент без тяжести bold. */ --weight-emphasis:555; --radius:10px; --radius-lg:16px; --radius-sm:6px; /* ИСПРАВЛЕНИЕ: тени были одним слоем мягкого размытия. Добавлен тонкий слой-"кант" (0 0 0 1px) под мягким размытием — приём, которым Vercel/ Linear подчёркивают край плавающих элементов (модалки, дропдауны, поповеры) поверх обычного бордера. */ --shadow:0 0 0 1px rgba(255,255,255,.04),0 4px 24px rgba(0,0,0,.4); --shadow-lg:0 0 0 1px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.3),0 12px 48px rgba(0,0,0,.55); --shadow-accent:0 0 32px var(--accent-glow); --nav-h:80px; --t:.2s ease; /* ИСПРАВЛЕНИЕ: цвет навбара раньше был зашит напрямую в .nav{background:...} (см. правило .nav ниже) — из-за этого светлая тема НЕ могла его перекрасить: навбар оставался тёмным, даже когда весь остальной фон сайта менялся на белый. Теперь переменная, переопределяется в [data-theme="light"] — навбар реально реагирует на смену темы. */ --nav-bg: rgba(10,10,15,.92); } /* ДОБАВЛЕНО: светлая тема. Тёмная (:root выше) остаётся дефолтом — светлая включается атрибутом data-theme="light" на (см. base.html — рендерится сервером из User.theme_preference, переключается кнопкой в навбаре). Палитра по заданию: голубой (акцент), белый (фон), тёплый бежево-жёлтый (второй акцент — --accent-warm, для декоративных мест вроде градиента заголовка на главной). Важно: --green/--red/--yellow здесь ЗАМЕТНО темнее версий из :root — исходные значения (#22d3a0, #f55555, #f5c518) читаемы как ТЕКСТ на тёмном фоне, но на белом фоне не проходят контраст 4.5:1 (та же дисциплина, что при работе над :focus-visible ранее в проекте — не полагаться на "тот же цвет одинаково сработает на любом фоне"). */ [data-theme="light"] { --bg:#ffffff; --surface:#f7f8fb; --surface-2:#eef1f6; --border:rgba(15,23,42,.09); --border-light:rgba(15,23,42,.05); --text:#161a2b; --text-muted:#5b6376; --text-dim:#9298a8; --accent:#2f6fed; --accent-dim:#1f52c4; --accent-glow:rgba(47,111,237,.16); --accent-warm:#e0ad3f; --accent-warm-dim:#c4931f; --accent-warm-glow:rgba(224,173,63,.22); /* ДОБАВЛЕНО: второй акцент (тёплый бирюзовый) — без него светлая тема держалась по сути на ОДНОМ цвете (голубой) + нейтральных серых, из-за чего выглядела заметно скучнее тёмной (там одновременно на виду фиолетовый + зелёный + жёлтый + красный). Даёт реальное визуальное разнообразие, не просто "поменяли фон на белый". */ --accent-2:#0891b2; --accent-2-dim:#0e7490; --accent-2-glow:rgba(8,145,178,.14); --green:#0e9f6e; --green-dim:rgba(14,159,110,.12); --red:#dc2626; --red-dim:rgba(220,38,38,.1); --yellow:#b45309; --yellow-dim:rgba(180,83,9,.12); --shadow:0 0 0 1px rgba(15,23,42,.05),0 4px 20px rgba(15,23,42,.08); --shadow-lg:0 0 0 1px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.06),0 12px 40px rgba(15,23,42,.12); --shadow-accent:0 0 32px var(--accent-glow); /* ДОБАВЛЕНО: навбар — отдельный ЦВЕТНОЙ (голубой оттенок) полупрозрачный фон, а не белый/серый как остальная страница — панель реально ВЫДЕЛЯЕТСЯ, а не сливается с фоном сайта. */ --nav-bg: rgba(219,234,254,.85); /* Родная UI-хромота браузера (скроллбар, чекбоксы) — светлая, не тёмная */ color-scheme: light; } [data-theme="dark"], :root:not([data-theme]) { color-scheme: dark; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-sans);font-style:italic;font-weight:400;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none;transition:opacity var(--t)} /* ДОБАВЛЕНО: везде на сайте были :hover-стили без парного :focus-visible — пользователь клавиатуры (Tab) не видел, где находится фокус, ни на одной ссылке/кнопке сайта. Один общий видимый индикатор фокуса на все реально интерактивные элементы (a, button) — не срабатывает при клике мышью, только при навигации с клавиатуры. */ a:focus-visible,button:focus-visible,.btn:focus-visible,.btn-sm:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)} /* ДОБАВЛЕНО: role="button" на div/li (slide-list__item, task-item, project-item, module-accordion__header) не покрывается селектором выше — это не настоящие /