/* Утверждённый редизайн: монохром + ОДИН приглушённый акцент (охра), работающий
только на интерактивных состояниях — ховер, фокус, активный пункт оглавления,
нумерация тезисов. База остаётся чёрно-белой. Это осознанный отход от строчки
«строго монохром» spec §5: образец (polka.academy/books) тоже не монохромен,
владелец отход утвердил.
По умолчанию — светлая тема для ЛЮБОГО посетителя без сохранённого выбора,
независимо от системной/браузерной prefers-color-scheme: инлайновый скрипт
в layout.twig ставит data-theme="light" на синхронно, до первой
отрисовки, если в localStorage ничего не лежит. Явный клик по переключателю
сохраняет выбор и переопределяет тему в обе стороны через data-theme.
Медиазапрос ниже на обычной загрузке уже недостижим (data-theme="light"
стоит всегда) и остаётся резервным путём на случай, если тот инлайновый
скрипт не выполнился (см. app.js, effectiveTheme()).
Правило :root[data-theme="dark"] стоит ПОСЛЕ медиазапроса и имеет равную с
ним специфичность, поэтому побеждает по порядку. Менять порядок нельзя. */
:root {
--bg: #ffffff;
--fg: #111111;
--muted: #6f6f6f;
--rule: #dcdcdc; /* тонкая линейка: границы шапки, подвала, разделители */
--rule-strong: #b4b4b4; /* линейка поплотнее: рамки, засечки, знак подвала */
--accent: #9c7b3d; /* приглушённая охра — только интерактив, не заливки */
/* Та же охра, но пригодная для НАБОРА, а не для линеек и состояний. На белом
#9c7b3d даёт с фоном 3,95:1 — графическому элементу этого хватает (порог
3:1), обычному тексту нет (порог 4,5:1), а плакат впервые красит акцентом
именно текст: эпиграф, последнюю строку коды, номер в оглавлении. Более
тёмный тон той же охры даёт 6:1 и проходит AA. В тёмной теме разделения
не нужно — там охра и так ~9:1, обе переменные совпадают. */
--accent-ink: #7a5f2c;
/* Цифра-подложка раздела («плакат-манифест»): не элемент палитры, а фактура —
минимальный сдвиг от --bg, едва отличимый от фона. Значение своё в каждой
теме: на белом уходим темнее, на чёрном светлее, дельта примерно равная. */
--watermark: #efeee9;
/* Три шрифтовые роли, только системные семейства: ни веб-шрифтов, ни внешних
запросов (spec §5.1). Дисплейная антиква — крупные заголовки; геометричный
гротеск — капс, мета, навигация; читаемая антиква — основной текст. */
--f-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
--f-sans: "Avenir Next", Avenir, Futura, "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--f-body: Georgia, "Times New Roman", serif;
/* Ручная шкала отступов, кратная 15 (не 8px-сетка) — как у образца. */
--s1: 15px; --s2: 30px; --s3: 45px; --s4: 60px; --s6: 90px; --s8: 120px;
/* Композиция во всю ширину: поля растут вместе с экраном, но общая раскладка
не растекается бесконечно. Колонка прозы ограничена отдельно (68ch). */
--pad-x: clamp(18px, 5.2vw, 120px);
--shell: 2200px;
/* Собственный рисованный разделитель вместо
: две линейки со скобочными
засечками и ромб посередине. Хранится маской, а не картинкой, чтобы цвет
брался из токенов темы; фон под маской — градиент, дающий ромбу --fg, а
линейкам --rule-strong. */
--flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 10'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='4.5' width='46' height='1'/%3E%3Crect x='0' y='1.5' width='1' height='7'/%3E%3Crect x='82' y='4.5' width='46' height='1'/%3E%3Crect x='127' y='1.5' width='1' height='7'/%3E%3C/g%3E%3Cpath d='M64 0.5L68.5 5L64 9.5L59.5 5Z' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0d; --fg: #f0efec; --muted: #98968f;
--rule: #2c2c2e; --rule-strong: #46464a; --accent: #c6a462;
--accent-ink: #c6a462; --watermark: #1c1c22;
}
}
:root[data-theme="dark"] {
--bg: #0c0c0d; --fg: #f0efec; --muted: #98968f;
--rule: #2c2c2e; --rule-strong: #46464a; --accent: #c6a462;
--accent-ink: #c6a462; --watermark: #1c1c22;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 400 19px/1.72 var(--f-body);
}
/* Фокус виден всегда и одинаково — пунктир акцентом, с отбивкой. */
a:focus-visible, button:focus-visible, summary:focus-visible {
outline: 1px dashed var(--accent);
outline-offset: 5px;
}
/* Приём-подпись: подчёркивание, растущее ИЗ ЦЕНТРА при наведении. Сделано
фоновым градиентом, а не псевдоэлементом: ::before/::after у ссылок заняты
скобочным мотивом, а разметку оглавления генерирует pandoc — вставить туда
лишний нельзя. */
/* .author__links в этом списке больше нет: там полноразмерные фразы-предложения,
а не короткие навигационные ярлыки, и приём «подчёркивание только при
наведении» оставлял их неотличимыми от обычного текста, пока на них не
наведёшь (прямая претензия автора). Они переведены на прозовый приём —
подчёркивание в покое, как у ссылок внутри манифеста (.manifest a). */
.brand__name, .toc a, .mini-header__links a, .author__more a,
.masthead__nav a, .masthead__social a, .footer__nav a, .footer__social a {
background-image: linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 0 1px;
padding-bottom: 5px;
transition: background-size .3s ease-out .05s, color .25s ease-out;
}
.masthead__home:hover .brand__name,
.masthead__home:focus-visible .brand__name,
.toc a:hover, .toc a:focus-visible,
.mini-header__links a:hover, .mini-header__links a:focus-visible,
.author__more a:hover, .author__more a:focus-visible,
.masthead__nav a:hover, .masthead__nav a:focus-visible,
.masthead__social a:hover, .masthead__social a:focus-visible,
.footer__nav a:hover, .footer__nav a:focus-visible,
.footer__social a:hover, .footer__social a:focus-visible { background-size: 100% 1px; }
/* Видимая подпись над служебным блоком ссылок («Скачать книгу», «Наши
соцсети»): та же гарнитура, кегль и разрядка, что у самих ярлыков рядом, —
отличается только отсутствием скобок, которыми на этом сайте помечено
«нажимаемое». Двоеточие рисуется здесь, а не в разметке: в DOM остаются
только слова. */
.nav-label {
margin: 0;
font-family: var(--f-sans); font-size: 11px; letter-spacing: .2em; line-height: 1;
text-transform: uppercase; color: var(--muted);
}
.nav-label::after { content: ":"; }
/* --- Шапка -------------------------------------------------------------- */
.masthead {
border-bottom: 1px solid var(--rule);
padding: var(--s2) var(--pad-x);
font-family: var(--f-sans);
}
.masthead__inner {
max-width: var(--shell); margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
gap: var(--s2);
}
.brand {
--mark-h: 56px;
--mark-w: 60px; /* 56 × 1040/970 — пропорция кадра логотипа */
display: flex; flex-wrap: wrap; align-items: center;
column-gap: var(--s1); row-gap: 7px; min-width: 0;
}
.brand__title { margin: 0; font: inherit; } /*