/* MyKyiv design tokens — копія :root з redesign/home-photos.html:11-43 1:1 */ /* Метрично підігнаний fallback під Unbounded (усі заголовки теми). * * Unbounded — дисплейний гротеск, він на 31% ШИРШИЙ за системний sans * (заміряно 09.08.2026: рядок H1 у 100px дає 4676px проти 3565px в Arial Bold). * Поки woff2 летить, `font-display: swap` малює заголовок системним шрифтом — * той вкладається у меншу кількість рядків, а після підміни H1 підростає і * штовхає вниз усю статтю. Це і був увесь CLS сторінки: 0.146 на mobile, один * зсув на +57px (заміряно на /interesno/…-44796.html). * * size-adjust розтягує гліфи fallback-а, щоб заголовок лягав у ту саму * кількість рядків з першого кадру. 145% — не «ширина Unbounded / ширина * Arial» (це 1.32), а підібране на реальних заголовках: рядок ніколи не * заповнюється до кінця, останнє слово переноситься цілим, тож чиста * пропорція ширин недобирає рядок. Свіп 100→160% по десяти заголовках * статті: 145% єдине, де H1 лягає в ту саму висоту, що й з Unbounded * (143px проти 143px). Недобір на 140% лишав ще 29px зсуву — на реальній * мережі це не видно (шрифт устигає), але на симульованому slow-4G у * Lighthouse CLS через це не зрушив з 0.146. Перестріл, який 145% дає на * «Читайте також» (+40px), у CLS не потрапляє: цей блок глибоко за фолдом, * а рахується лише видима область. Вище 150% перестрілюють уже H2 у тексті. * * Другий (і головний) рубіж проти цього ж зсуву — preload кириличних * підмножин у inc/perf-fonts.php: коли шрифт устигає до першого кадру, * fallback не показується взагалі. * * line-height у заголовках теми скрізь заданий явно, тож ascent/descent-override * не потрібні — вони б лише розійшлися з реальними метриками Unbounded. * * src лише з local() — жодного мережевого запиту: якщо не знайдеться жоден із * трьох, face просто не застосується і стек поїде далі на system-ui/sans-serif. */ @font-face{ font-family:'Unbounded Fallback'; src: local('Arial'), local('Helvetica'), local('Roboto'); size-adjust: 145%; font-weight: 100 900; font-style: normal; } :root{ /* Ink & paper */ --ink:#0e0e0f; --ink-2:#1b1b1d; --ink-3:#2b2b2e; --paper:#faf7f0; --paper-2:#f2ecdd; --paper-3:#e8e0cb; --line:rgba(14,14,15,.12); --line-strong:rgba(14,14,15,.28); --muted:#6b6458; /* #8a8378 давав 3.5:1 на --paper (#faf7f0) — Lighthouse color-contrast падав * на дрібних 10-12px підписах (мітка «Реклама», мета-рядки). 4.71:1 = AA. */ --muted-2:#756e63; /* MyKyiv brand colors — yellow + red, from my-kiev.com visual DNA */ --yellow:#ffd400; --yellow-soft:#fff4a8; --yellow-deep:#f4c100; --red:#e5322a; --red-soft:#ffd8d4; --red-deep:#b3261e; --tg:#2aabee; --green:#2a7b3a; --radius-sm:10px; --radius:16px; --radius-lg:22px; --shadow-1: 0 1px 0 rgba(14,14,15,.04), 0 2px 6px rgba(14,14,15,.05); --shadow-2: 0 4px 18px rgba(14,14,15,.08); --shadow-3: 0 10px 36px rgba(14,14,15,.10); --header-h: 64px; --quick-h: 56px; /* Незмінна висота «шапки+quick», під яку body тримає відступ. * --header-h/--quick-h стискаються при скролі (body.is-scrolled), і поки * padding-top body рахувався з них, стиснення штовхало ВЕСЬ документ на * 24px угору. Для людини це стрибок тексту під пальцем при першому скролі; * для Lighthouse — layout shift на всю висоту main, який давав рівно * 0.146 CLS (заміряно 09.08.2026: без нього CLS сторінки = 0). * Тому відступ рахуємо від сталої, а стискається лише сама шапка. */ --chrome-h: 120px; } /* Dark theme tokens — активується атрибутом data-theme="dark" (UI-перемикача наразі немає). * * :where(html, body) — бо цей файл їде в сервіси бандлом хрому, а alerts ставить * data-theme на , не на . :where() лишає специфічність 0,1,0 — рівно * як у :root вище, тож перемагає за порядком, а не за вагою. */ :where(html, body)[data-theme="dark"]{ --ink:#f6f1e4; --ink-2:#e9e3d3; --ink-3:#cfc9b9; --paper:#0f0f10; --paper-2:#17171a; --paper-3:#20202a; --line:rgba(246,241,228,.10); --line-strong:rgba(246,241,228,.26); --muted:#a9a294; --muted-2:#847d70; --yellow-soft: rgba(255,212,0,.18); --red-soft: rgba(229,50,42,.22); } /* Ресет документа, .wrap і решта глобальних правил виїхали 17.09.2026: * документні — в base.css, потрібні самій розмітці хрому — в chrome.css. * Причина — сервіси, які тягнуть ці файли бандлом і беруть різні набори: * контентні всі три, застосункові (карта на весь екран) — без base.css. */ /* MyKyiv base — глобальний ресет і типографіка документа. * * Виїхало з tokens.css 17.09.2026. Причина — сервіси: вони тягнуть CSS теми * бандлом (inc/chrome-export.php), і застосунковим сервісам на повний екран * (transport, alerts, roadworks, air) цей шар протипоказаний: `body{padding-top: * var(--chrome-h)}` опускає карту на 120px і додає смугу прокрутки. Тепер вони * беруть tokens + chrome без base, а контентні (pohoda, yarmarky, salaries) — * усі три. * * Тут лишається лише те, що стосується ДОКУМЕНТА. Усе, без чого ламається сама * розмітка хрому (.wrap, .screen-reader-text, замки скролу, ресет посилань у * шапці), переїхало в chrome.css — інакше застосунковий рівень отримав би * поламану шапку. */ *{ box-sizing: border-box; } html, body{ margin:0; padding:0; overflow-x: clip; max-width: 100%; } body{ font-family:'Manrope', system-ui, sans-serif; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; /* Стала, не var(--header-h) + var(--quick-h) — див. коментар до --chrome-h. * Transition теж прибрано: анімувати нема чого, значення не змінюється. */ padding-top: var(--chrome-h); } /* Той самий відступ, але зі специфічністю 0,0,2 — і це не косметика. * * WP друкує `global-styles-inline-css` з правилом `body{padding-top:0px;…}`, * і на singular-сторінках inc/perf.php його свідомо НЕ знімає (там бувають * Gutenberg-блоки). Той