@layer components { /* Текстовий контент статей і сторінок. Тут — і тільки тут — посилання підсвічуються акцентом. Глобально це робити не можна: у макеті посилання меню й підвала світло-сірі. */ .prose a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: .2em; } .prose a:hover { text-decoration-thickness: 2px; } .prose > * + * { margin-block-start: var(--sp-24); } .prose h2 { margin-block-start: var(--sp-56); } .prose h3 { margin-block-start: var(--sp-40); } .prose p, .prose li { color: var(--label-secondary); } } @layer components { /* --- Внутрішні елементи статті ---------------------------------------- Рішення з дзвінка 02.09: нічого унікального не малюємо, беремо стандартні блоки WordPress і стилізуємо під тему. Тому селектори тут — це класи ядра (`wp-block-*`), а не власна розмітка: усе, що редактор вставить у Гутенберзі, одразу виглядає як частина сайту. */ .prose h4 { margin-block-start: var(--sp-32); font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 500; line-height: 1.32; } .prose ul, .prose ol { padding-inline-start: var(--sp-24); color: var(--label-secondary); } .prose li + li { margin-block-start: var(--sp-8); } .prose li::marker { color: var(--accent-primary); } .prose strong { color: var(--label-primary); font-weight: 500; } /* Таблиця — головний елемент статті про логістику: порівняння термінів, вартості й обмежень. На вузькому екрані вона прокручується всередині себе, а не ламає сторінку. */ .prose .wp-block-table { overflow-x: auto; } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-2); } .prose th, .prose td { padding: var(--sp-12) var(--sp-16); border-block-end: .5px solid var(--surface-separator); text-align: start; vertical-align: top; } .prose th { color: var(--label-primary); font-weight: 500; white-space: nowrap; background: var(--surface-glass-1); } .prose td { color: var(--label-secondary); } .prose tbody tr:last-child td { border-block-end: 0; } .prose figure { margin: 0; } .prose figcaption { margin-block-start: var(--sp-8); color: var(--label-tertiary); font-size: var(--fs-caption); } .prose .wp-block-image img { border-radius: var(--r-12); } .prose blockquote { margin: 0; padding: var(--sp-20) var(--sp-24); border-inline-start: 3px solid var(--accent-primary); border-radius: 0 var(--r-12) var(--r-12) 0; background: var(--surface-glass-1); } .prose blockquote p { color: var(--label-primary); } .prose blockquote cite { display: block; margin-block-start: var(--sp-8); color: var(--label-tertiary); font-size: var(--fs-caption); font-style: normal; } .prose hr, .prose .wp-block-separator { height: 0; margin-block: var(--sp-40); border: 0; border-block-start: .5px solid var(--surface-separator); } /* Акцентний блок «важливо» — це звичайна група Гутенберга з фоном. Редактор ставить її без нашої допомоги, а виглядає вона як елемент теми. */ .prose .wp-block-group.has-background { padding: var(--sp-24); border-radius: var(--r-12); } .prose code { padding: 2px 6px; border-radius: var(--r-8); background: var(--surface-glass-1); font-size: .9em; } } /* --- НАВМИСНО ПОЗА @layer ------------------------------------------------ Ядро WordPress друкує стилі блоків інлайном у і робить це поза каскадними шарами. За правилами CSS нешарові стилі виграють у шарових незалежно від специфічності, тому `.prose td { border-block-end }` всередині @layer програвав ядровому `.wp-block-table td { border: 1px }` і таблиця малювалась сіткою. Це той самий механізм, через який колись усі посилання стали бірюзовими. Підвищувати специфічність тут марно — рятує лише вихід із шару. */ .prose .wp-block-table td, .prose .wp-block-table th { border: 0; border-block-end: .5px solid var(--surface-separator); } .prose .wp-block-table tbody tr:last-child td { border-block-end: 0; }