, тому правило `.form-ui__bottom p { display: none }` ховало її разом із приміткою: у дайджесті не було кнопки «Підписатися». Абзац лишається, але без вмісту й без відступів, тобто нульової висоти. */ .blog-scope .nl-in .form-ui__required { display: none; } .blog-scope .nl-in .form-ui__bottom p { margin: 0; } /* Кнопка приходить із сайтовими класами (btn--lg btn--primary) — підганяємо під блогову: та сама пілюля й висота, що в .nl-form. */ .blog-scope .nl-in .form-submit-button { border-radius: var(--site-radius-pill); padding: 13px 26px; font-size: 15px; white-space: nowrap; } .blog-scope .nl-in .form-ui__checkbox { order: 2; flex: 1 1 100%; color: var(--muted); margin-top: 2px; } .blog-scope .nl-in .form-ui__checkbox label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; color: var(--text-default); font-size: 12px; } .blog-scope .nl-in .form-ui__checkbox input { margin-top: 3px; flex: none; accent-color: var(--primary); } /* Дзеркалимо брейкпоінт макета: там `@media(max-width:640px)` ставить `.nl-form { flex-direction: column }`, тобто поле й кнопка одне під одним на всю ширину. Наш контракт — flex-wrap, тому те саме дає базис 100%. Блок стоїть у КІНЦІ групи навмисно: медіа-запит не додає специфічності, тож правило `.form-ui__bottom { flex: 0 0 auto }` вище перебивало б його, якби йшло пізніше у файлі. */ @media (max-width: 640px) { .blog-scope .nl-in .form-ui__field, .blog-scope .nl-in .form-ui__bottom { flex: 1 1 100%; } /* Кнопку тягнемо через увесь ланцюжок: у макеті flex-стовпчик розтягує елементи сам, а в нас `.form-ui__bottom` — flex-контейнер (core.css), і кнопка лежить у
усередині нього. Без 100% на самому
кнопка лишалась
би вузькою пілюлею під полем на всю ширину. */
.blog-scope .nl-in .form-ui__bottom p,
.blog-scope .nl-in .form-submit-button {
width: 100%;
}
}
/* ── Панель дайджесту ──────────────────────────────────────────────────────
У макеті панель має лише смуга ВСЕРЕДИНІ сітки статей
(`.grid > .nl-inline { background: var(--lav) … }` у blog-listing.css), а
дайджест, поставлений окремим блоком у секції сторінки, лишався зовсім без
фону, рамки й відступів. Даємо панель обом випадкам, а пласку лаванду
замінюємо на градієнт — цього в макеті немає, це правка вже по факту.
Другий селектор потрібен, щоб перебити правило з blog-listing.css: у нього
специфічність (0,3,0), а в `.blog-scope .nl-inline` — лише (0,2,0), тож
самого першого селектора не хватило б.
`grid-column` поза grid-контейнером браузер просто ігнорує, тому одне
правило працює і в сітці, і окремою секцією. */
.blog-scope .nl-inline,
.blog-scope .grid > .nl-inline {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--site-lav) 0%, var(--site-tint-mint) 100%);
border: 1px solid var(--line);
border-radius: var(--site-radius-card);
padding: 28px 32px;
margin: 10px 0;
}
/* Форму ще не вибрали в CMS — не лишаємо порожню половину сітки. */
.blog-scope .nl-in--noform {
grid-template-columns: 1fr;
}
/* У макеті головні кнопки CTA всередині тексту й продуктового містка — пілюлі
(там це стояло інлайновим style="border-radius:30px"; тримаємо в CSS). */
.blog-scope .inline-cta-btns .btn-primary,
.blog-scope .pb-cta .btn-primary {
border-radius: 30px;
}
/* ── Протиотрута до сайтового .hero ────────────────────────────────────────
Скоуп .blog-scope захищає САЙТ від стилів блогу, але не навпаки: сайтове
правило `.hero` (distribute/core.css) підмішувалось у блоговий hero і давало
йому height:100vh, градієнт і flex-центрування. Тому блоковий клас
перейменовано на `.blog-hero` — а тут гасимо решту сайтових властивостей,
якщо колись знову збіжаться імена. */
.blog-scope .blog-hero {
height: auto;
min-height: 0;
display: block;
background: none;
padding: var(--space-300) 0 var(--space-400);
}
/* Та сама історія з `.card`: сайтове правило (core.css) дає карткам
`min-height: 224px`, і короткі картки в сітці розтягувались. У макеті
мінімальної висоти в картки немає — знімаємо.
Перевірено: решта сайтових властивостей `.card` (фон, радіус, padding)
блоговими правилами перебиті, витікає саме min-height. */
.blog-scope .card {
min-height: 0;
}
/* ── Протиотрута до сайтового .slider ──────────────────────────────────────
Найгірший із трьох випадків: сайтовий `.slider` (core.css) — це стрічка
логотипів, і вона нав'язує слайдеру «Обране редакцією» фіксовану
`width: 1200px`, `margin: auto`, `overflow: hidden` (тобто вбиває
горизонтальну прокрутку) і два білих градієнти по краях через ::before/::after.
Блоковий клас перейменовано на `.blog-slider`; розкладка стрічки лежить у
blog-listing.css під тим же новим ім'ям, а тут лишаються тільки гасіння
сайтових властивостей. */
.blog-scope .blog-slider {
width: auto;
margin: 0;
overflow-x: auto;
overflow-y: visible;
}
/* ── Градієнт у H1 hero через звичайний ─────────────────────────────
H1 у блоці «Блог: hero сторінки» — поле з HTML. Замість окремого поля
«Акцент» редактор просто обгортає частину заголовка в , і вона
показується градієнтом. Оголошення ті самі, що в .grad-text
(blog-listing.css) — окремий клас лишається для решти верстки. */
.blog-scope .blog-hero h1 span {
background-image: var(--site-grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.blog-scope .blog-hero h1 span {
background-image: none;
color: var(--site-accent);
}
}
/* ── Нумерований список (блок «Нумерований список») ────────────────────────
Заміна колишніх «Типових помилок»: той самий вигляд із макета
(.mistake-item у blog-article.css), але з двома новими можливостями —
тон у кожного пункту свій і тип нумерації вибирає редактор.
Чому не перевикористали .mistake*: клас із назвою про помилки на списку
«Що зробити зараз» читався б неправильно, а правити файл верстки з макета
не хочеться — правила там лишаються як історія передачі.
Це справжній , тому нумерація рахується CSS-лічильником: вставлений у
середину пункт не змушує переписувати решту. Тип лічильника приходить
атрибутом data-marker — значення поля збігається зі стилем CSS. */
.blog-scope .numlist {
list-style: none;
margin: 16px 0;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 12px;
counter-reset: numlist;
}
.blog-scope .numlist__item {
display: flex;
gap: 13px;
align-items: flex-start;
padding: 14px 16px;
background: var(--lav);
border: 1px solid var(--line);
border-radius: var(--site-radius-sm);
border-left: 4px solid var(--primary);
counter-increment: numlist;
}
.blog-scope .numlist__num {
font-size: 11px;
font-weight: 800;
color: #fff;
background: var(--primary);
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
font-family: var(--font-h);
}
/* Тип нумерації. `decimal` — дефолт, тому окремого правила не потребує. */
.blog-scope .numlist__num::after { content: counter(numlist) }
.blog-scope .numlist[data-marker="upper-latin"] .numlist__num::after { content: counter(numlist, upper-latin) }
.blog-scope .numlist[data-marker="upper-roman"] .numlist__num::after { content: counter(numlist, upper-roman) }
/* «Без нумерації» — кружок прибираємо цілком, лишається смуга кольору тону. */
.blog-scope .numlist[data-marker="none"] .numlist__num { display: none }
.blog-scope .numlist__body strong {
font-size: 14.5px;
font-weight: 700;
color: var(--ink);
display: block;
margin-bottom: 4px;
}
.blog-scope .numlist__body p {
font-size: 13.5px;
color: var(--site-muted);
margin: 0;
line-height: 1.6;
}
/* Тони — та сама палітра, що у виносок (.callout success/warning/danger):
один набір кольорів на весь блог, інакше зелений у списку й зелений у
виносці розійшлись би. */
.blog-scope .numlist__item--success { background: var(--green-bg); border-left-color: var(--green) }
.blog-scope .numlist__item--success .numlist__num { background: var(--green) }
.blog-scope .numlist__item--warning { background: var(--yellow-bg); border-left-color: var(--yellow) }
.blog-scope .numlist__item--warning .numlist__num { background: var(--yellow); color: #5D4037 }
.blog-scope .numlist__item--danger { background: var(--red-bg); border-left-color: var(--red) }
.blog-scope .numlist__item--danger .numlist__num { background: var(--red) }
/* ── Виноски в колонках (блок «Виноски в колонках») ────────────────────────
Чому не таблиця в rich text: таблиця дає колонки шириною ПО ВМІСТУ —
заміряно на секції «Кого це стосується», де одна виноска стала вузькою й
висотою на пів екрана, а друга розповзлась. Grid із `minmax(0, 1fr)` робить
колонки рівними за визначенням, а `gap` дає відступ, якого в таблиці без
border-spacing немає.
`minmax(0, 1fr)`, а не `1fr`: `1fr` означає «не менше min-content», тому
довге слово в одній виносці роздуло б її колонку. Нуль у minmax знімає це
обмеження, і колонки лишаються рівними за будь-якого тексту. */
.blog-scope .callout-grid {
display: grid;
gap: 13px;
margin: 16px 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-scope .callout-grid[data-cols="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Власні вертикальні відступи виносок у ряду зайві — відступи тримає gap. */
.blog-scope .callout-grid > .callout { margin: 0 }
/* Остання виноска, якщо вона в рядку САМА, розтягується на всю ширину:
непарна п'ята роль у секції «Кого це стосується» інакше висіла б half-width
з порожнечею праворуч.
Умова «сам у рядку» = «остання І перша у своєму рядку», тобто в двох
колонках це `:nth-child(odd)`, а в трьох — `:nth-child(3n+1)`. Правило для
двох колонок навмисно виключає ряди з трьома (`:not([data-cols="3"])`):
інакше в трьох колонках воно ловило б і третій елемент із чотирьох, який
насправді не сам. */
.blog-scope .callout-grid:not([data-cols="3"]) > .callout:last-child:nth-child(odd),
.blog-scope .callout-grid[data-cols="3"] > .callout:last-child:nth-child(3n+1) {
grid-column: 1 / -1;
}
/* Три колонки на середньому екрані вже не читаються — стає дві. */
@media (max-width: 900px) {
.blog-scope .callout-grid[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
/* Колонок стало дві — отже й «сам у рядку» тепер інший елемент: правило для
трьох колонок вимикаємо, вмикаємо двоколонкове. */
.blog-scope .callout-grid[data-cols="3"] > .callout:last-child:nth-child(3n+1) { grid-column: auto }
.blog-scope .callout-grid[data-cols="3"] > .callout:last-child:nth-child(odd) { grid-column: 1 / -1 }
}
/* На мобільному будь-який ряд складається в одну колонку. */
@media (max-width: 640px) {
.blog-scope .callout-grid,
.blog-scope .callout-grid[data-cols="3"] { grid-template-columns: 1fr }
}
/* ── Виноски: сині й сірі тони ─────────────────────────────────────────────
У макеті виноска мала чотири тони (info / success / warning / danger), і на
секції «Кого це стосується» їх не хватило: п'ять ролей, а розрізняти треба
всі. Додано ще два.
Кольори НЕ вигадані — це токени ДС, ті самі, якими фарбуються плашки
ld-tag: --status-trasperent-* на фон, --status-filled-* на смугу,
--text-information / --text-default на текст. Тому синій у виносці той
самий, що синій у решті сайту.
`info` навмисно лишається фірмовим фіолетовим: у макеті він саме такий, і
перефарбувати його в синій означало б змінити наявні статті. */
.blog-scope .callout.blue {
background: var(--status-trasperent-blue);
border-left: 4px solid var(--status-filled-blue);
/* Текст — blue-800, а НЕ --text-information (blue-500, #3388FF): заміряно
на цій сторінці, на фоні blue-100 (#E5F0FF) той дає контраст 2.8:1 і
провалює WCAG AA для основного тексту. blue-800 (#004099) дає 8.6:1.
ДС уживає blue-500 на плашках ld-tag — там це дрібний підпис у два слова,
а тут абзац, і правило інше. Решта тонів виноски так само на темних
значеннях (#2D1B6E, #1A4731, #7B1212). */
color: var(--color-other-colors-blue-800);
}
.blog-scope .callout.neutral {
background: var(--status-trasperent-passive);
border-left: 4px solid var(--status-filled-passive);
color: var(--text-default);
}
/* Ті самі два тони в пунктах нумерованого списку — палітра одна на весь блог. */
.blog-scope .numlist__item--blue { background: var(--status-trasperent-blue); border-left-color: var(--status-filled-blue) }
.blog-scope .numlist__item--blue .numlist__num { background: var(--status-filled-blue) }
.blog-scope .numlist__item--neutral { background: var(--status-trasperent-passive); border-left-color: var(--status-filled-passive) }
.blog-scope .numlist__item--neutral .numlist__num { background: var(--status-filled-passive) }
/* ── Чому не працював position: sticky ─────────────────────────────────────
Симптом: сайдбар листингів (.sidebar), зміст статті (.toc-col) і бічна
картка (.sidebar-col) не липли ніде в блозі — прокручувались разом зі
сторінкою, хоч position: sticky й top у них стоять.
Причина не в блозі: у core.css сайту є `body { overflow-x: hidden }`
(рядок ~2697). За специфікацією, якщо одна вісь overflow не visible, друга
вісь із visible обчислюється в auto — тобто body мовчки стає СКРОЛ-
КОНТЕЙНЕРОМ. Липкий елемент чіпляється до найближчого скрол-контейнера, а
ним тепер є body, який сам нікуди не скролиться (скролиться html). Через це
sticky технічно «працює», але зсув завжди нульовий.
Заміряно на /blog/bronyuvannya-pratsivnykiv-2026/ (1440px): при
body overflow-x:hidden зміст їхав із текстом до -993px; після заміни на
clip зупиняється рівно на top:142px, як і задумано.
Чому clip, а не visible: `overflow-x: clip` + `overflow-y: visible` — єдина
пара, у якій visible НЕ перетворюється в auto, тобто скрол-контейнера не
виникає. При цьому clip так само відрізає горизонтальне вилізання, для чого
сайтовий overflow-x: hidden і стояв (перевірено: scrollWidth == clientWidth,
горизонтальної прокрутки немає).
:has() потрібен, щоб не чіпати решту сайту: правило діє лише на сторінках,
де є обгортка блогу. Специфічність (0,1,1) вища за `body` з core.css, тому
порядок підключення файлів не має значення. */
body:has(.blog-scope) {
overflow-x: clip;
overflow-y: visible;
}
/* ── Дві колонки: сайдбар поруч зі СПИСКОМ ─────────────────────────────────
У макеті сітка карток і сайдбар були однією сіткою `.cols`, і сайдбар не міг
закріплюватись: `position: sticky` рухає елемент лише в межах його
контейнера, а для grid-елемента контейнер — його клітинка. Заміряно на
/blog/akademiya/ (1440px): сітка карток 294px (три картки), сайдбар 437px →
клітинка = 437px = власна висота сайдбару, хід липкості 0.
Тепер ліва колонка тримає всю «списочну» частину — сітку, пагінацію й секції
під нею (дайджест), тому клітинка сайдбару вища за нього самого й липкість
працює навіть на трьох картках. Секції вище сітки (hero, фільтри, слайдер)
лишились на всю ширину: у вузькій колонці смуга чіпсів фільтра переносилась
у другий рядок (заміряно: 75px → 129px).
Ширини й відступ ті самі, що були в `.cols` (1fr + 300px, gap 32px).
`align-items: start` обов'язковий: без нього grid розтягує елемент на всю
висоту рядка, і липнути знову буде нічому. */
.blog-scope .listing-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 32px;
align-items: start;
padding-bottom: 20px;
}
/* Сторінка без сайдбару (реєстр тегів) — обгортка є, але колонок немає. */
.blog-scope .listing-layout--full {
display: block;
}
/* ≤980px: сайдбар іде в потоці під контентом — той самий брейкпоінт, що вже
був у `.sidebar` (blog-listing.css), тільки тепер складати треба ще й саму
розкладку. */
@media (max-width: 980px) {
.blog-scope .listing-layout { grid-template-columns: minmax(0, 1fr) }
}
/* ── Посилання в тексті (рев'ю блогу, п. 4.7) ─────────────────────────────
«Посилання не підкреслені і не читаються як посилання». Колір посилання
був темно-фіолетовим (#4D479D) — тим самим, що й заголовки, тобто
відрізнити посилання від виділеного слова було нічим.
Тепер посилання в тексті завжди підкреслене й яскраве:
- на світлих поверхнях — синій з фірмового градієнта (#236BEB, контраст
на білому 4.9:1 — норма AA для звичайного тексту);
- на темних банерах — світла лаванда (#C2C7F8). Раніше там стояв білий,
тобто той самий колір, що й текст навколо: посилання трималось лише на
підкресленні й «читалось гірше, ніж на білому».
Чіпляємо ЛИШЕ посилання в тексті: без класу всередині абзаців,
пунктів списку й клітинок таблиць — так розмічає rich text. Кнопки, теги,
картки й пункти змісту мають класи й лишаються як були. */
.blog-scope {
--blog-link: #236BEB;
--blog-link-on-dark: var(--site-lav-2);
}
.blog-scope :is(.article-col, .sidebar-col, .listing-main, .sidebar, .ov) :is(p, li, td, th, dd, figcaption, blockquote, label) a:not([class]) {
color: var(--blog-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.blog-scope :is(.article-col, .sidebar-col, .listing-main, .sidebar, .ov) :is(p, li, td, th, dd, figcaption, blockquote, label) a:not([class]):hover {
text-decoration-thickness: 2px;
}
/* Темні поверхні — ті самі, що в розділі «C. Темні поверхні» blog-article.css.
Селектор повторює структуру світлого правила й стоїть нижче, тому при
однаковій специфічності перемагає саме він. */
.blog-scope :is(.inline-cta-text, .pb-header, .sidebar-cta, .sb-banner, .checklist-hdr, .deadline-box) :is(p, li, td, th, dd, figcaption, blockquote, label) a:not([class]) {
color: var(--blog-link-on-dark);
}
/* ── Один розмір тексту в банерах (рев'ю блогу, п. 4.11) ──────────────────
Банери прийшли з макета різними майданчиками, і текст у них мав чотири
розміри: 13px (CTA у тексті, бічна картка), 13.5px (продуктовий блок),
12.5px (шапка чек-листа). Поруч на одній сторінці це видно одразу.
Зводимо до одного — 14px, як текст банера в сайдбарі листингів. */
.blog-scope {
--blog-banner-text: 14px;
}
.blog-scope .inline-cta-text p,
.blog-scope .inline-cta-text ul,
.blog-scope .inline-cta-text ol,
.blog-scope .pb-header p,
.blog-scope .pb-header ul,
.blog-scope .pb-header ol,
.blog-scope .sidebar-cta p,
.blog-scope .sidebar-cta ul li,
.blog-scope .checklist-hdr p {
font-size: var(--blog-banner-text);
}
/* ── Повна назва картки при наведенні (рев'ю блогу, п. 2.1) ───────────────
Назва в картці обрізається до двох рядків («Кінцевий бенефіціарний...»),
і зрозуміти, про що стаття, не можна. Повну назву показує підказка — та
сама біла підказка блогу, що й у «+N авторів» ([data-tip] у
blog-listing.css), тільки на всю ширину назви, а не 260px по центру:
назва довга, і вузька підказка перетворилась би на стовпчик.
data-tip з повною назвою приходить одразу в розмітці картки (без JS-заміру
«чи обрізана» — рев'ю MR LIGA-11426). Показуємо і на клавіатурному фокусі
посилання (focus-within), не тільки на hover. */
.blog-scope .card-title[data-tip]::after {
left: 0;
right: 0;
transform: none;
width: auto;
max-width: none;
font-size: 13px;
line-height: 18px;
font-weight: 500;
}
.blog-scope .card-title[data-tip]::before {
left: var(--space-300);
}
.blog-scope .card-title[data-tip]:focus-within::after,
.blog-scope .card-title[data-tip]:focus-within::before {
opacity: 1;
visibility: visible;
}
/* ── Теги статті під плашками (рев'ю блогу, п. 4.2) ───────────────────────
Теги стояли в одному рядку з плашками-статусами й мали таку саму пілюлю —
читач не розрізняв, де статус, а де посилання на добірку. Тепер теги
окремим рядком під плашками і без підкладки: просто «#Податки» фірмовим
кольором, як текстове посилання. Плашки лишились як були. */
.blog-scope .article-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-050) var(--space-200);
margin: calc(-1 * var(--space-050)) 0 var(--space-200);
}
.blog-scope .article-tag {
color: var(--site-accent);
font-size: var(--typo-sizes-h300);
font-weight: 500;
line-height: 1.4;
text-decoration: none;
}
.blog-scope .article-tag:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Hover кнопки в банері сайдбару (рев'ю блогу, п. 5.2) ─────────────────
Кнопка банера без вибраного в CMS стилю — біла пілюля (.sb-banner .btn у
blog-listing.css). На hover спільне `.btn:hover` робило її фон прозорим, а
текст — білим без рамки, і «Замовити демо» зливалась із фіолетовим
банером. Тут — лише hover і лише для кнопки БЕЗ стилю (маркер btn-plain
ставить blog/_Buttons): стилі з CMS мають власний hover. */
.blog-scope .sb-banner .btn-plain:hover {
background: transparent;
border-color: var(--text-alternative);
color: var(--text-alternative);
}
/* ── Кнопки бічної картки статті зі стилем із CMS (рев'ю блогу, п. 5.2) ───
Тепер бічна картка малює кнопку тим стилем, що вибраний у CMS
(blog/_SidebarButtons). Макетні btn-sb-* були на всю ширину й з відступом
між собою — кнопки зі стилем отримують те саме, щоб картка не змінювала
ритм від вибору стилю. Кольори й hover — зі стилю кнопки (site-buttons). */
.blog-scope .sidebar-cta > .btn,
.blog-scope .sidebar-cta > .btn-ghost {
width: 100%;
}
/* Відступ після кнопки зі стилем. Після btn-sb-primary він уже є (її власний
margin-bottom у blog-article.css), тож тут лише випадок «перед тобою кнопка
зі стилем» — інакше між двома макетними кнопками відступ подвоївся б. */
.blog-scope .sidebar-cta > :is(.btn, .btn-ghost) + :is(.btn, .btn-ghost, .btn-sb-primary, .btn-sb-secondary) {
margin-top: var(--space-150);
}