/* ════════════════════════════════════════════ ДОБРО ДОШЛИ One stylesheet for the whole site. Content files carry no styling of their own, so the design can be replaced here in one place. ════════════════════════════════════════════ */ /* ── ШРИФТЫ ────────────────────────────────────────────────────────── Всё лежит у нас, ничего не грузится со стороны. Файлы переменные: один на всё семейство вместо отдельного файла на каждое начертание. Один шрифт на весь сайт: заголовки отличаются от текста только весом. Golos Text сделан под русский и спокойно читается вдлинную. ПОЧЕМУ @font-face ТРИ РАЗА. Это не дубль и не ошибка — это три куска одного шрифта, и их разделяет строка unicode-range: кириллица, расширенная латиница, латиница. Браузер смотрит, какие буквы есть на странице, и качает только те куски, которые нужны: на русской странице — один файл вместо трёх. Если свести в одно объявление, unicode-range исчезнет, и браузер будет качать всё целиком. Загрузка шрифта вырастет втрое, а выгоды никакой. Трогать не нужно. ──────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/css/fonts/golos-text-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/css/fonts/golos-text-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/css/fonts/golos-text-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } :root { /* ── ТИПОГРАФИКА ── Восемь стилей из кита дизайнера, и больше на сайте ничего нет: каждая надпись — один из них. Десктопные значения его, мобильные посчитаны от самого длинного слова: «Государственная» в 48 пунктах занимает 410 точек, а на телефоне под текст остаётся 342 — не влезает. При 30 занимает 256 и влезает даже в экран 320. Между крайними значениями браузер подбирает кегль сам, поэтому скачка на какой-то одной ширине нет. стиль телефон десктоп начертание трекинг h1 30 / 35 48 / 56 700 −1% h2 24 / 30 32 / 40 700 −0,5% h3 20 / 23 24 / 28 700 0 лид 18 / 25 20 / 28 400 0 текст 16 / 24 16 / 24 400 0 мета 14 / 20 14 / 20 400 0 цитата 16 / 28 16 / 28 500 0 плашка 16 / 28 16 / 28 400/700 0 Правка от 7 октября: дизайнер пересчитал интерлиньяжи и снял трекинг со всего, кроме двух верхних заголовков. Заголовки, лид и текст стали плотнее на два пункта, мета, цитата и плашка — просторнее на два. Логика видна: то, что читают залпом, сжалось, а то, что выхватывают глазами по строчке, разошлось. */ --t-h1: clamp(30px, 4.4vw, 48px); --t-h1-lh: 1.167; --t-h2: clamp(24px, 2.6vw, 32px); --t-h2-lh: 1.25; --t-h3: clamp(20px, 1.9vw, 24px); --t-h3-lh: 1.167; --t-lead: clamp(18px, 1.7vw, 20px); --t-lead-lh: 1.4; --t-main: 16px; --t-main-lh: 1.5; --t-meta: 14px; --t-meta-lh: 1.43; /* Плашка живёт на том же кегле, что текст, но дышит шире — это отдельный интерлиньяж, а не «основной». */ --t-callout-lh: 1.75; /* Цитата всего на две точки крупнее основного текста: разбивает полосу не кегль, а красная линейка слева. Почему так — в разделе про цитату ниже по файлу. */ --t-quote: 18px; --t-quote-lh: 1.55; /* Таблица набрана мельче текста: в ячейке строка короткая, и крупный кегль только гонит таблицу в высоту. Шапка ещё на ступень мельче и капителью — она подпись к столбцу, а не его заголовок. */ --t-table: 14px; --t-table-lh: 1.45; --t-table-head: 12px; --t-meta-w: 500; /* мета по киту — Medium, а не Regular */ --t-tight: -0.01em; /* −1%: только h1 */ --t-half: -0.005em; /* −0,5%: только h2 */ --t-wide: 0; /* кит снял трекинг с меты */ /* ── ШКАЛА ОТСТУПОВ ── Восьмиточечная сетка: все поля и промежутки на сайте — одна из этих ступеней, и больше ничего. Четвёрка в начале — половинная ступень, как принято в таких системах: ею набираются мелкие внутренние зазоры, где целых восемь уже много. Имя — это само число, а не «маленький» и «большой». Буквенные имена удобно читать, пока их три, а на десяти начинается спор, 24 — это «lg» или «xl», и переменную перестают угадывать и начинают искать. Девяносто значений по файлу округлены к ближайшей ступени; при равном расстоянии — вниз, потому что страницу просили ужать, а не раздуть. Что сдвинулось больше всего: боковые поля на телефоне с 20 на 16 и мелкие внутренние зазоры с 12 на 8. Исключение одно — поправки меньше четырёх точек. Это не отступы, а оптика: подчёркивание под ссылкой, строки списка в подвале, приём для экранного диктора в .visually-hidden. Там счёт идёт на пиксель, и сетка к ним отношения не имеет. */ --space-4: 4px; --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-72: 72px; /* ── ВЕРТИКАЛЬНЫЙ РИТМ ── Второй столбец кита: сколько воздуха над элементом и под ним. Отступы не схлопываются — они складываются, как в макете: 8 под заголовком плюс 8 над абзацем дают 16. Поэтому поля, а не внешние отступы. элемент сверху снизу h1 0 24 h2 48 8 h3 24 8 лид 24 8 текст 8 0 цитата 24 16 плашка 32 16 */ --p-h2-top: var(--space-40); /* 29.10: было 48 */ --p-h3-top: var(--space-24); --p-lead-top: var(--space-32); /* 29.10: было 24 */ --p-head-bot: var(--space-8); /* общий низ у h2, h3 и лида */ --p-h1-bot: var(--space-24); --p-quote: var(--space-24); --p-quote-bot: var(--space-16); --p-callout: var(--space-24); --p-callout-bot: 0; /* 27.10: было 40 и 16 */ /* Воздух между абзацами. У дизайнера main_text получает сверху 8, и если понимать это буквально — по восемь точек на каждый абзац, — текст сливается в одну плиту: восемь точек это треть строки. Скорее всего в макете 8 стоит у блока текста целиком, а не у каждого абзаца. Держим это отдельной ручкой, чтобы решение было видно, а не спрятано в правиле. */ --p-para: var(--space-24); /* Воздух над списком. Меньше межабзацного: список продолжает фразу, которая его вводит («Понадобятся:»), и при 24 отрывался от неё. Двенадцать — половина межабзацного, ступени в шкале для неё нет, поэтому число стоит здесь, одно на весь файл. Правка 27 октября. */ --p-list: 12px; /* Воздух перед вопросом в интервью. Он больше межабзацного нарочно: внутри ответа абзацы идут через 24, а новая пара «вопрос — ответ» начинается через 40 — так видно, где кончился один заход и начался следующий, даже если ответ занял пять абзацев. */ --p-qa: var(--space-32); /* 29.10: было 40 — меньше, чем у h2 (40) */ /* Колонка текста на карточке ленты: заголовок и лид делят её поровну. Размер подобран по лиду — по нему колонка и считалась исходно. */ --card-col: 480px; /* 30.10: было 400 — лид в 55–60 знаков, заголовок в три строки, а не в четыре */ /* Ширина колонки чтения. Была 800: при кегле 16 это 89 знаков в строке, а читается спокойно 60–75. При 680 выходит 72. Кит требует этой правки молча — 16 пунктов в широкой колонке не работают. */ --col: 680px; --header-h: 64px; /* Ширина страницы. На большом мониторе шапка, лента, список руководств и подвал больше не растягиваются на всё окно: содержимое стоит по центру в 1440 точках, а остаток окна уходит в поля поровну слева и справа. До 1488 точек ширины поле обычное, 24. Правка 29.10. */ --page-max: 1440px; --page-x: max(var(--space-24), calc((100% - var(--page-max)) / 2 + var(--space-24))); /* Заголовок главной: высота вместе с его верхним отступом. */ /* ── ЦВЕТА ── Шесть цветов на весь сайт плюс три исключения. До этой правки в файле лежало двадцать пять прописанных цветов, пятнадцать из них — оттенки серого, и соседние не различались глазом: #555, #666 и #6b6b6b стояли в одной и той же роли на разных страницах. Поменять «серый подписи» означало найти все четыре. Теперь роль определяет цвет, а не наоборот. Нужен новый оттенок — сначала вопрос, какая это роль; если роль уже есть, берём её цвет. Красный один на всё: ссылка при наведении, активный пункт, красная плашка. Он там, где ссылка и в покое выглядит ссылкой — подчёркнута или стоит в списке-навигаторе. И его нет на крупных заголовках карточек: заголовок и без того ведёт куда-то весь целиком. */ --c-bg: #FFFFFF; /* фон страницы и карточек */ --c-ink: #111111; /* текст, заголовки, сильные границы */ --c-accent: #D83C0D; /* ссылки, наведение, активное, красная плашка */ --c-muted: #666666; /* даты, авторы, подписи — второй голос */ --c-surface: #F2F2F2; /* заливки: таблицы, плашки, место под фото */ --c-border: #E0E0E0; /* тонкие разделители и рамки полей ввода */ /* Седьмой серый, и он нужен. Шести цветов не хватает ровно на одно: отличить то, на что нельзя нажать, от того, на что можно. В списке руководств недописанный материал — не ссылка, и читатель должен видеть это, не наводя мышь. Если красить его основным серым, он станет неотличим от обычной подписи. Значение выбрано не на глаз: #888888 даёт на белом 3,5:1 — заметно светлее основного серого (5,7:1), но текст ещё читается. Прежний #c5c5c5 давал 1,9:1, то есть не читался вовсе. Тем же цветом набраны тонкие подчёркивания ссылок: это та же мысль — линия тише текста, но видна. */ --c-quiet: #888888; /* неактивное и подчёркивания ссылок */ } /* Правка 29.10: на странице «Такой страницы нет» подвал стоит внизу экрана, а не посередине пустой страницы. */ body:has(> main.is-404) { min-height: 100vh; display: flex; flex-direction: column; } body:has(> main.is-404) > main { flex: 1; } body { background: var(--c-bg); color: var(--c-ink); font-family: 'Golos Text', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none;} img { display: block; max-width: 100%; } /* Two rings, so the focus is visible on white, on black and on a photograph alike: the white one shows against dark, the black one against light. */ :focus-visible { outline: 2px solid var(--c-bg); outline-offset: 0; box-shadow: 0 0 0 4px var(--c-ink); } /* A card is a photograph with an absolutely positioned image on top, and in that arrangement the browser paints the picture over the outline. So the ring is a layer of its own, drawn above everything inside the card. */ .block-link, .next { position: relative; } .block-link:focus-visible, .next:focus-visible { outline: none; box-shadow: none; } .block-link:focus-visible::after, .next:focus-visible::after { content: ""; position: absolute; inset: 4px; z-index: 10; border: 3px solid var(--c-bg); box-shadow: 0 0 0 3px var(--c-ink), inset 0 0 0 3px var(--c-ink); pointer-events: none; } /* Present for screen readers and search engines, invisible on screen. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Lets a keyboard or screen-reader user jump past the menu, which is repeated on every page. Invisible until it takes focus. */ .skip-link { position: fixed; /* fixed, not absolute: it must stay reachable even when the page is already scrolled */ left: 8px; top: -60px; z-index: 200; background: var(--c-ink); color: var(--c-bg); font-size: var(--t-meta); font-weight: var(--t-meta-w); letter-spacing: var(--t-wide); padding: var(--space-8) var(--space-16); transition: top 0.15s; line-height: var(--t-meta-lh); } .skip-link:focus { top: 8px; } /* ── ШАПКА ── */ /* The bar itself is the site
; the two