/* public/assets/css/app.css — дизайн-система бюллетеня. Редакционный, журнальный язык (spec §9): крупная типографика вместо иконок, свой акцент у каждой темы, ироничный «бланк» в служебных элементах. Замена гарнитуры — правка в двух местах: переменная ниже и файлы в public/assets/fonts/. Ни разметка, ни шаблоны от выбора шрифта не зависят. */ /* --- Шрифты: самохостинг, внешних запросов нет ни одного (spec §9.2) ------ */ @font-face { font-family: "Rubik"; src: url("../fonts/Rubik-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Rubik"; src: url("../fonts/Rubik-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Rubik"; src: url("../fonts/Rubik-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "PT Serif"; src: url("../fonts/PTSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PT Serif"; src: url("../fonts/PTSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "PT Serif"; src: url("../fonts/PTSerif-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "PT Serif"; src: url("../fonts/PTSerif-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "PT Mono"; src: url("../fonts/PTMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* --- Токены -------------------------------------------------------------- */ :root { --font-display: "Rubik", system-ui, sans-serif; --font-text: "PT Serif", Georgia, serif; --font-mono: "PT Mono", ui-monospace, monospace; /* База тёплая, не белая: холодный чистый белый утянул бы макет в ту самую корпоративность, от которой мы отталкиваемся (spec §9.3). */ --paper: oklch(97% 0.012 85); --paper-sunk: oklch(94% 0.016 85); --ink: oklch(24% 0.02 60); --muted: oklch(48% 0.02 60); --rule: oklch(84% 0.02 70); /* Одна шкала отступов, кратная 4px, четыре ступени вертикального ритма. */ --step-1: 4px; --step-2: 12px; --step-3: 28px; --step-4: 64px; /* Ширина текста ограничивается по ch, не по пикселям. */ --measure: 48.9rem; } /* Девять акцентов задаются формулой, а не подбираются на глаз: фиксированные светлота и насыщенность, меняется только тон. Оба свойства живут на одном элементе намеренно — подстановка var() внутри пользовательского свойства выполняется там, где свойство объявлено, и --accent-h с до :root не достанет (spec §9.3). */ body { --accent: var(--ink); } body[data-topic] { --accent: oklch(58% 0.17 var(--accent-h)); } .card:not(.card--bonus) .card__link { --accent: oklch(58% 0.17 var(--accent-h)); } /* Бонусная тема выпадает из акцентной серии сознательно: девять тонов заведено ровно по числу ранжированных тем, десятого нет, и набор чернильным цветом и есть видимый признак «эта тема вне очереди» (spec §9.3, §9.4). Здесь только значение --accent — всё остальное (номер, линейка) считает его само. */ .card--bonus .card__link { --accent: var(--ink); } @media (prefers-color-scheme: dark) { :root { --paper: oklch(21% 0.015 70); --paper-sunk: oklch(26% 0.017 70); --ink: oklch(92% 0.012 85); --muted: oklch(70% 0.015 85); --rule: oklch(38% 0.02 70); /* --annotate-mark-bg/-mark-done-bg (репорт владельца, 2026-09-15): бледная жёлтая/зелёная заливка annotate.css (#ffe9a8/#d7ead9, тот же дефолт, что и в этом же :root без темы) держит контраст только с тёмным --ink светлых тем. Здесь --ink светлый (текст .annotate-mark наследует его через color: inherit) — той же бледной заливке не хватит контраста ни при какой светлоте, поэтому это не «подвинуть тон», а тёмная заливка того же жёлтого/зелёного духа, специально для светлого текста поверх. */ --annotate-mark-bg: #4a3c12; --annotate-mark-done-bg: #1f3d28; } body[data-topic] { --accent: oklch(72% 0.15 var(--accent-h)); } .card:not(.card--bonus) .card__link { --accent: oklch(72% 0.15 var(--accent-h)); } .card--bonus .card__link { --accent: var(--ink); } } /* --- База ---------------------------------------------------------------- */ /* Полоса прокрутки резервирует место всегда: иначе переключение темы, чуть меняющее высоту страницы своими украшениями, на одних темах даёт вертикальный скролл, на других нет — и ширина контента дёргается между ними. */ html { scrollbar-gutter: stable; } * { box-sizing: border-box; } body { margin: 0; padding: 0 var(--step-3) var(--step-4); background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 18px; line-height: 1.55; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0 0 var(--step-2); } p { margin: 0 0 var(--step-2); } a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } /* --- Шапка-бланк --------------------------------------------------------- */ .masthead { max-width: var(--measure); margin: 0 auto; padding: var(--step-3) 0 var(--step-2); border-bottom: 2px solid var(--ink); } .masthead__home { text-decoration: none; } .masthead__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; } .masthead__stamp, .hub__order, .topic__stamp, .card__number, .card__minutes, .progress { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .masthead__downloads { display: flex; gap: var(--step-2); font-family: var(--font-mono); font-size: 0.78rem; } /* Ссылка «Войти» — видна только анониму (masthead.twig, {% if identity.get() is null %}), исчезает сразу после входа любой из двух дверей (владелец/редактор). Тот же mono-регистр, что у .masthead__downloads a, отдельной строкой под ним — без text-decoration: none, иначе подчёркивание (и наведённое утолщение глобального a:hover) пропадает только у этой ссылки. */ .masthead__login { display: inline-block; margin-top: var(--step-2); font-family: var(--font-mono); font-size: 0.78rem; } /* --- Счётчик ------------------------------------------------------------- */ /* Тон поощряющий и только: ноль из двадцати — это «начнём» (spec §7.4). */ .progress { margin: var(--step-2) 0; } .progress__done { color: var(--accent); font-weight: 700; } /* «Крупнее на хабе» (spec §7.4) — без единой правки схемы данных: страницу темы опознаёт data-slug, который стоит на у каждой темы и только у неё (topic.twig), а у хаба без атрибутов. Раньше этот пункт спецификации был отложен как требующий нового поля; появившийся data-slug закрыл ровно ту его половину, которая про размер. Вторая половина — «в каких темах остались неотмеченные практики» — по-прежнему ждёт колонки темы в practices.tsv. */ body:not([data-slug]) .progress { font-size: 1.05rem; letter-spacing: 0.02em; } .reset { font-family: var(--font-mono); font-size: 0.78rem; background: none; border: 1px solid var(--rule); border-radius: 2px; padding: var(--step-1) var(--step-2); color: var(--muted); cursor: pointer; } /* --- Хаб ----------------------------------------------------------------- */ body > main { max-width: var(--measure); margin: 0 auto; } .hub__promise { font-size: clamp(2rem, 6vw, 3.2rem); margin-top: var(--step-4); } /* Регресс (жалоба владельца: нав в шапке админки «прыгает» вверх-вниз при переходе между /admin/editors, /admin/review и /admin/notes) — раньше .admin/.admin-editors/.admin-review держали margin-top тремя отдельными однострочными правилами, а у .notes-page не было ни одного margin-top вовсе: /admin/notes рендерился вплотную к border-bottom шапки (0px), тогда как остальные три страницы — с отступом 64px, то есть при навигации между ними возникал скачок в 64px. Один общий отступ на все четыре страницы устраняет разъезд. */ .admin, .admin-editors, .admin-review, .notes-page, .admin-settings { margin-top: calc(var(--step-4) + var(--step-2)); } .intro-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--step-2) 0; margin: var(--step-3) 0; } .intro-strip__title { font-size: 1.1rem; margin-bottom: var(--step-1); } /* CTA профиля на хабе — та же анатомия, что у .intro-strip: линейки сверху и снизу, ни своего фона, ни своих цветов, чтобы тема просвечивала как обычно. Текст (и, при отвеченном профиле, короткая сводка выбранного) пишет refreshProfileCta() (app.js); ссылка внутри всегда ведёт на /profile. */ .profile-cta { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--step-2) 0; margin: var(--step-3) 0; color: var(--muted); font-size: 0.95rem; } .profile-cta a { color: var(--ink); } .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step-3); } @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card__link { display: block; height: 100%; padding: var(--step-2); border: 1px solid var(--rule); border-top: 4px solid var(--accent); background: var(--paper-sunk); text-decoration: none; } .card__number { display: block; font-size: 2.2rem; line-height: 1; color: var(--accent); } .card__title { font-size: 1.35rem; } .card__summary { color: var(--ink); } /* Верхняя линейка у бонусной карточки приглушена: её номер и заголовок уже чернильные через --accent, а сплошная чернильная линейка спорила бы по весу с девятью акцентными. Строк «мин» и шкал у карточки нет вовсе — их не печатает шаблон, поэтому прятать здесь нечего (spec §9.4). */ .card--bonus .card__link { border-top-color: var(--rule); } .card__scales { display: flex; gap: var(--step-2); } .scale { display: inline-flex; gap: 2px; align-items: center; } .scale__pip { width: 8px; height: 8px; border: 1px solid var(--muted); border-radius: 50%; } .scale--impact .scale__pip.is-on { background: var(--accent); border-color: var(--accent); } .scale--effort .scale__pip.is-on { background: var(--muted); } /* --- Страница темы ------------------------------------------------------- */ /* Плавающее меню перехода между темами (partials/topic-jump.twig) — список строит cards(), тот же вызов и тот же порядок, что у сетки хаба. Ниже брейкпоинта это обычный свёрнутый
НАД статьёй — та же анатомия, что у details.howto (акцентная грань слева, утопленный фон, свой треугольник вместо системного): свёрнут по умолчанию по той же причине, что и howto — развёрнутый список десяти тем заслонил бы саму статью на первом экране (см. комментарий у details.howto ниже). Раскрытие кликом — встроенное поведение
, без JS. На широком экране — ДРУГОЙ элемент разметки, не тот же самый принудительно раскрытый
. Раньше здесь стояла именно эта идея (переопределить браузерное `details:not([open]) > :not(summary) { display: none }` авторским `.topic-jump__list { display: block }`, рассчитывая, что авторские стили бьют user-agent), и в теории порядка cascade origin это верно — но живой Playwright-прогон в Chromium 151 показал, что закрытый
прячет содержимое не одним только этим UA-правилом: реальный bounding box у .topic-jump на ≥1200px был {width:192, height:0} — нулевой высоты, некликабельный, — и высота появлялась только после `element.open = true` через JS. Похоже на внутреннее подавление рендера (что-то вроде content-visibility) поверх обычного display:none, которое `display: block` на потомке не отменяет, потому что борется не с тем свойством. Чинить это версией браузера или ещё одним CSS-свойством ненадёжно — вместо этого на широком экране
вообще не используется: - .topic-jump__details — тот же свёрнутый
со видимым , что и на узком экране, — но виден только <1280px. - .topic-jump__pinned — рельс: та же разметка ссылок (partials/ topic-jump-items.twig, чтобы не дублировать её), но плоским
    без
    и без состояния open/closed вообще: смотреть тут нечему, значит нечему и не отрендериться. Виден только на >=1280px. Внутри него ДВА блока (правка владельца после живого прогона первой версии): .topic-jump__list--pinned — список тем, свёрнутый до текущей; ниже, за разделителем, .topic-jump__toc-block — оглавление текущей темы. Оба — соседи
    (см. topic.twig), не его потомки; на любой ширине ровно один из двух виден (`display: none` у второго — это заодно и корректный способ убрать его из accessibility-дерева, так что двух объявлений одного и того же