/* public/shared.css — общие токены и элементы для всех 4 страниц, подключается через , без сборки. Правки палитры/шрифта/бренд-марки и общих компонентов (nav, card, button.primary) — только здесь. Алиасы --paper/--ink/--grey/--gold существуют, чтобы login.html не переписывать — его разметка использует старые имена переменных, но числовые значения теперь одни и те же во всех файлах. */ :root { --bg: #faf6ef; --paper: #faf6ef; --card-bg: #ffffff; --surface-2: #fbf9f5; --card-border: rgba(46, 42, 37, 0.08); --text: #2e2a25; --ink: #2e2a25; --ink-rgb: 46, 42, 37; --paper-rgb: 250, 246, 239; --text-dim: #8a8177; --grey: #8a8177; --accent: #d4a64a; --gold: #d4a64a; --gold-rgb: 212, 166, 74; --accent-dark: #b98d3b; --accent-tint: rgba(212, 166, 74, 0.12); --hairline: rgba(46, 42, 37, 0.12); --error: #c25b4a; --error-rgb: 194, 91, 74; --error-tint: rgba(194, 91, 74, 0.1); --success: #4a6f46; --success-tint: rgba(111, 155, 106, 0.12); --shadow-color: rgba(46, 42, 37, 0.18); --scheme: light; } /* Тёмная тема включается через data-theme="dark" на , которую /theme.js всегда явно проставляет ДО первой отрисовки (читает localStorage, иначе prefers-color-scheme) — поэтому здесь достаточно одного атрибутного селектора, без дублирующего media query. */ :root[data-theme="dark"] { --bg: #1c1a17; --paper: #1c1a17; --card-bg: #26231f; --surface-2: #2a2622; --card-border: rgba(255, 255, 255, 0.08); --text: #ece7de; --ink: #ece7de; --ink-rgb: 236, 231, 222; --paper-rgb: 28, 26, 23; --text-dim: #a49a8c; --grey: #a49a8c; --accent-dark: #e0b768; --accent-tint: rgba(212, 166, 74, 0.16); --hairline: rgba(255, 255, 255, 0.1); --error-tint: rgba(194, 91, 74, 0.18); --success-tint: rgba(111, 155, 106, 0.18); --shadow-color: rgba(0, 0, 0, 0.45); --scheme: dark; } .brand { font-family: "Fraunces", "Iowan Old Style", "Georgia", "Times New Roman", serif; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text); margin: 0; padding-left: 0.3em; } .brand a { color: inherit; text-decoration: none; } .back-link { align-self: flex-start; font-size: 0.8rem; color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; } .back-link:hover { color: var(--accent-dark); border-color: var(--accent-dark); } .nav-links a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; } .nav-links a:hover { color: var(--accent-dark); border-color: var(--accent-dark); } .nav-btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--accent-tint); border: 1px solid rgba(var(--gold-rgb), 0.3); color: var(--accent-dark); font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: background 200ms ease, transform 150ms ease; } .nav-btn:hover { background: rgba(var(--gold-rgb), 0.22); transform: translateY(-1px); } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 26px 26px 28px; box-shadow: 0 20px 50px -30px var(--shadow-color); animation: cardIn 400ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(var(--gold-rgb), 0.5); } /* Sun/moon theme toggle — flat SVG icon, one button, both icons stacked and cross-faded via [data-theme] so no JS-side icon swap is needed. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); cursor: pointer; transition: background 200ms ease, border-color 200ms ease, transform 150ms ease; } .theme-toggle:hover { border-color: var(--accent-dark); transform: translateY(-1px); } .theme-toggle svg { width: 17px; height: 17px; display: block; } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }