/* ОБЩИЕ ПЕРЕМЕННЫЕ ТЕМ Светлая — :root, тёмная — [data-theme="dark"] на . */ :root { --bg-page: #f4f6f8; --text-main: #222222; --text-muted: #666666; --text-label: #444444; --card-bg: #ffffff; --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); --section-bg: #f8fafc; --section-border: #e5e7eb; --input-bg: #ffffff; --input-border: #d1d5db; --input-text: #111827; --focus-border: #2563eb; --focus-ring: rgba(37, 99, 235, 0.15); --btn-primary: #2563eb; --btn-primary-hover: #1d4ed8; --btn-reset-bg: #e5e7eb; --btn-reset-text: #111827; --btn-reset-hover: #d1d5db; --header-bg: rgba(255, 255, 255, 0.92); --header-border: #e5e7eb; --footer-bg: #ffffff; --footer-border: #e5e7eb; --accent-soft: #eff6ff; --theme-btn-bg: #ffffff; --theme-btn-text: #111827; --theme-btn-border: #d1d5db; --theme-btn-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } [data-theme="dark"] { --bg-page: #0f172a; --text-main: #f1f5f9; --text-muted: #94a3b8; --text-label: #cbd5e1; --card-bg: #1e293b; --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --section-bg: #334155; --section-border: #475569; --input-bg: #1e293b; --input-border: #64748b; --input-text: #f8fafc; --focus-border: #60a5fa; --focus-ring: rgba(96, 165, 250, 0.25); --btn-primary: #3b82f6; --btn-primary-hover: #2563eb; --btn-reset-bg: #475569; --btn-reset-text: #f8fafc; --btn-reset-hover: #64748b; --header-bg: rgba(30, 41, 59, 0.95); --header-border: #475569; --footer-bg: #1e293b; --footer-border: #475569; --accent-soft: #1e3a5f; --theme-btn-bg: #334155; --theme-btn-text: #f8fafc; --theme-btn-border: #64748b; --theme-btn-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: var(--bg-page); color: var(--text-main); line-height: 1.5; transition: background 0.25s ease, color 0.25s ease; } a { color: var(--btn-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Кнопка переключения темы — правый нижний угол */ .theme-toggle { position: fixed; right: 24px; bottom: 24px; z-index: 1000; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 1px solid var(--theme-btn-border); background: var(--theme-btn-bg); color: var(--theme-btn-text); box-shadow: var(--theme-btn-shadow); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; } .theme-toggle:hover { transform: scale(1.06); } .theme-toggle:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .btn { display: inline-block; border: none; cursor: pointer; padding: 14px 28px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; } .btn-primary { background: var(--btn-primary); color: #ffffff; } .btn-primary:hover { background: var(--btn-primary-hover); text-decoration: none; transform: translateY(-1px); } @media (max-width: 600px) { .theme-toggle { right: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 22px; } }