/* ── ТИПОГРАФІКА СТАТТІ — ЄДИНЕ ДЖЕРЕЛО ───────────────────────────────────── Цей файл читають ДВОЄ: публічна сторінка (DetailArticle через .article-body) і адмін-редактор (TinyMCE content_css). Доти стилі жили двома копіями — Tailwind prose на фронті й рукописний CSS у редакторі — і розходились рівно стільки разів, скільки їх правили. Тепер правка тут — це правка обох. Числа зняті з Tailwind Typography prose-lg (база 18px): відступи в em, щоб масштабувались разом із кеглем. Темна тема: фронт вішає .dark на , редактор — .article-dark на body свого iframe. Кольори через змінні, тож обидва шляхи ведуть до одних правил. */ .article-body { --ab-text: #4b5563; --ab-head: #111827; --ab-muted: #6b7280; --ab-line: #e5e7eb; --ab-th-line: #d1d5db; --ab-marker: #9ca3af; /* rem, не px: на великих екранах корінь росте (глобальна «резинка»), і стаття мусить рости разом. В адмінці корінь 16px — там це ті самі 18px. */ font-size: 1.125rem; line-height: 1.7777778; color: var(--ab-text); } .dark .article-body, .article-body.article-dark { --ab-text: #d1d5db; --ab-head: #f3f4f6; --ab-muted: #9ca3af; --ab-line: #3f3f46; --ab-th-line: #52525b; --ab-marker: #6b7280; } .article-body h2, .article-body h3, .article-body h4 { color: var(--ab-head); } .article-body h2 { font-size: 1.6666667em; font-weight: 700; margin: 1.8666667em 0 1.0666667em; line-height: 1.3333333; } .article-body h3 { font-size: 1.3333333em; font-weight: 600; margin: 1.6666667em 0 .6666667em; line-height: 1.5; } .article-body h4 { font-weight: 600; margin: 1.7777778em 0 .4444444em; line-height: 1.5555556; } .article-body > :first-child { margin-top: 0; } .article-body > :last-child { margin-bottom: 0; } .article-body p { margin: 1.3333333em 0; } .article-body strong, .article-body b { color: var(--ab-head); font-weight: 600; } .article-body a { color: var(--ab-head); font-weight: 500; text-decoration: underline; } .article-body ul, .article-body ol { margin: 1.3333333em 0; padding-left: 1.5555556em; } .article-body li { margin: .6666667em 0; } .article-body ul > li::marker { color: var(--ab-marker); } .article-body ol > li::marker { color: var(--ab-muted); } .article-body blockquote { margin: 1.6666667em 0; padding-left: 1em; border-left: .25rem solid var(--ab-line); font-style: italic; font-weight: 500; color: var(--ab-head); } .article-body hr { border: 0; border-top: 1px solid var(--ab-line); margin: 3.1111111em 0; } .article-body img { max-width: 100%; height: auto; border-radius: 1rem; margin: 1.7777778em 0; } /* Підпис — НА фото: знизу, праворуч, дрібно, на темній підкладці, щоб читався на будь-якому знімку. Фігура тримає позиціювання, картинка — без власних полів. */ .article-body figure { position: relative; margin: 1.7777778em 0; } .article-body figure > img { margin: 0; display: block; width: 100%; } .article-body figcaption { position: absolute; right: .75rem; bottom: .55rem; max-width: 85%; text-align: right; font-size: .75rem; line-height: 1.4; font-style: normal; color: #fff; background: none; padding: 0; /* Без плашки (рішення власника): читабельність тримає тінь. */ text-shadow: 0 1px 4px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); } .article-body figcaption a { color: #fff; font-weight: 400; text-decoration: underline; } /* Порожній підпис (редактор ще не заповнив) не малює порожню плашку на фото. */ .article-body figcaption:empty { display: none; } .article-body iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 1rem; margin: 1.7777778em 0; } /* Таблиці — як у prose: лінія під шапкою і між рядками, без вертикальної сітки. */ .article-body table { width: 100%; border-collapse: collapse; margin: 1.7777778em 0; font-size: .8888889em; line-height: 1.5; } .article-body th { color: var(--ab-head); font-weight: 600; text-align: left; vertical-align: bottom; padding: 0 .5555556em .5555556em; border: 0; border-bottom: 1px solid var(--ab-th-line); } .article-body td { vertical-align: baseline; padding: .5555556em; border: 0; border-bottom: 1px solid var(--ab-line); } .article-body tr:last-child > td { border-bottom: 0; } .article-body td > p, .article-body th > p { margin: 0; } .article-body th:first-child, .article-body td:first-child { padding-left: 0; } .article-body th:last-child, .article-body td:last-child { padding-right: 0; } /* Редакторський прев'ю-контейнер відео (TinyMCE media): без цього ролик у редакторі стояв маркою 640×360, тоді як на сайті він на всю колонку. */ .article-body .mce-preview-object, .article-body .mce-preview-object iframe, .article-body .mce-preview-object video { width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9; } /* Штатна рамка прев'ю відео — геть: вона стояла постійно і виглядала як багнет. Обводка зʼявляється лише коли відео виділене — як у картинок. */ .article-body .mce-preview-object { border: 0 !important; margin: 1.7777778em 0; } .article-body .mce-preview-object[data-mce-selected] { outline: 2px solid #38bdf8; outline-offset: 2px; }