/* «Раки Татар» — светлый гастро, медная гамма. Медь #9E5426 выбрана заказчиком 09.08.2026 по prototype/palette-ab.html и сохранена при переходе на светлый фон 14.08.2026: на кремовом #FAF4EC она даёт контраст 5,1 при норме AA 4,5. Тёмными остаются первый экран и подвал — там живут логотип и фотографии, снятые в низком ключе. Их значения возвращаются ниже, в блоке .hero/.footer: вся вёрстка обращается к токенам, поэтому область переключается целиком, без дублирования правил. Что пришлось затемнить против прежней тёмной темы: зелёный, специю и панцирь — на светлом их прежние значения давали контраст ниже нормы. */ :root { --bg: #faf4ec; --surface: #ffffff; --surface-2: #f2e7da; --line: rgba(var(--text-rgb), 0.14); --line-strong: rgba(var(--text-rgb), 0.24); --text: #241a12; --text-rgb: 36, 26, 18; --muted: #6b5747; --accent: #9e5426; --accent-hi: #8a4820; --accent-rgb: 158, 84, 38; --green: #1f7a44; --green-rgb: 31, 122, 68; --spice: #a9762f; --spice-rgb: 169, 118, 47; --shell: #b06c34; --shell-dim: #8e5628; /* Производные поверхности. Держим их токенами, чтобы палитра переключалась одним блоком, а не правкой по всему файлу. */ --bg-header: rgba(250, 244, 236, 0.88); --bg-scrim: rgba(28, 18, 9, 0.72); --bg-scrim-soft: rgba(28, 18, 9, 0.50); --bg-badge: rgba(36, 26, 18, 0.78); --bg-footer: #150e07; --hero-top: #2a1a10; --art: rgba(192, 122, 63, 0.42); --media-1: #efe2d3; --media-2: #e2d1bd; --media-hero-1: #402a1a; --media-hero-2: #20160c; --on-accent: #fff; --on-spice: #241a08; --placeholder: #9b8878; --accent-soft: #8a4820; --green-soft: #1f7a44; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --max: 1320px; --pad: 64px; --section: 96px; --head: "Oswald", "Arial Narrow", Impact, sans-serif; --body: "Manrope", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Тёмные острова на светлой странице. Токены переопределяются на самой секции, поэтому всё внутри — заголовки, подписи, кнопки, границы, плашки — переключается само. Отдельных правил вида «.hero .btn { color: … }» не появляется, и светлая тема не начинает расходиться с тёмной при каждой правке компонента. */ .hero, .footer { --bg: #1c1209; --surface: #271a10; --surface-2: #332215; --text: #f5e7de; --text-rgb: 245, 231, 222; --muted: #c4a289; --accent-hi: #ad5f2b; --green: #2e9e5b; --green-rgb: 46, 158, 91; --spice: #d2a56e; --spice-rgb: 210, 165, 110; --shell: #c07a3f; --shell-dim: #a06534; --media-1: #3a2618; --media-2: #1d1409; --placeholder: #8a7360; --accent-soft: #e29a63; --green-soft: #58cf8a; --bg-badge: rgba(28, 18, 9, 0.78); color: var(--text); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--head); font-weight: 600; margin: 0; line-height: 1.15; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .section { padding: var(--section) 0; } .section--tight { padding-top: 40px; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .section-head h2 { font-size: 44px; text-transform: uppercase; letter-spacing: 0.01em; } .section-head p { margin: 6px 0 0; color: var(--muted); } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: var(--r-md); font-weight: 700; letter-spacing: 0.01em; transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.34); } .btn--primary:hover { background: var(--accent-hi); box-shadow: 0 8px 36px rgba(var(--accent-rgb), 0.5); } .btn--ghost { border: 1px solid var(--accent); color: var(--text); } .btn--ghost:hover { background: rgba(var(--accent-rgb), 0.14); } .btn--block { width: 100%; height: 46px; padding: 0 16px; } .btn:focus-visible { outline: 2px solid var(--spice); outline-offset: 3px; } /* Видимый фокус для всего, что получает клавиатуру, а не только для кнопок: без этого навигация с Tab по шапке, подвалу и карточкам шла вслепую. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--spice); outline-offset: 3px; border-radius: var(--r-sm); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--spice); outline-offset: 1px; } /* ---------- Шапка ---------- */ .header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header__row { display: flex; align-items: center; gap: 32px; height: 76px; } .logo { font-family: var(--head); font-size: 22px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; gap: 10px; } .logo span { color: var(--accent); } .logo svg { width: 26px; height: 26px; color: var(--accent); } /* Эмблема владельца. Надпись на её ленте в 48 px не читается, поэтому имя рядом остаётся текстом — оно же и попадает в поиск и скринридер. */ .logo__badge { width: 48px; height: 48px; flex: none; border-radius: 50%; } .nav { display: flex; gap: 22px; font-size: 15px; color: var(--muted); margin-right: auto; } .nav a { transition: color 0.15s var(--ease); } .nav a:hover { color: var(--text); } /* Бургер. На широком экране не нужен — там меню развёрнуто строкой. Кнопку в разметку не вписываем: шапка своя копия на 47 страницах плюс три генератора, и держать их синхронными руками не выйдет. Кнопку создаёт menu.js рядом с уже существующим