/* ========================================================================== ea-article.css — СОБСТВЕННОЕ У СТРАНИЦЫ НОВОСТИ (/news/news/view/…). Общая типографика тела (заголовки, абзацы, списки, таблицы, цитаты, ссылки, ритм) вынесена 08.09 в ea-prose.css — её делят статья новости, статьи «Life in Albania» и служебные страницы раздела `page`. Здесь остаётся только то, чего у других страниц нет: шапка статьи (титул, дата, черта), её появление и контейнер в полосе 481-767px. Шаблон вешает на обёртку ОБА класса — `.news-view-block` и `.ea-prose`. Правила ниже скоупятся первым и подключены ПОСЛЕ ea-prose.css, поэтому там, где статья спорит с общим слоем (первый h2 сразу под шапкой), выигрывает она. ВСЕ ЧИСЛА НИЖЕ — ЗАМЕРЫ ЖИВЫХ СТРАНИЦ (computed, 1440px), не «типографический идеал». Источники (свод — .planning/reports/2026-09-06-news-view-design.md): контейнер и ритм секции — /news/news и /life_in_alb: `.shell` 1200 (padding 15) => контент 1170 при left 131; секция `section-98 section-sm-110 section-bottom-66` => 110/66 на десктопе и 98/66 на 375px; шапка — канонные классы `.ea-head` / `.ea-title` / `.ea-divider` (главная, /services, /page/about-us), но переопределённые в скоупе статьи (07.09): левая ось вместо центра, вес 700 вместо синтетического 800, кегль 46 вместо 42 — обоснование замерами в блоке «шапка статьи»; потолок ведущего кадра — 570px: натуральный размер ассетов проекта (site_crop/ = 570x385, оригиналы 600px шириной); радиусы/тени/появление — `.ea-card`: `--r-lg` 22, `--shadow-…`, .35s `--ease`. Отдельный файл по той же причине, что ea-hero.css: `git revert` одного файла должен откатывать только страницу новости. Подключён в TmSiteHelper::$_css ПОСЛЕ custom.css (оттуда токены) и ПОСЛЕ ea-prose.css. ========================================================================== */ /* Контент идёт во всю ширину контейнера — как секции главной, /services и /page/about-us. Узкой колонки чтения здесь НЕТ намеренно: она делала статью уже любой другой страницы сайта, и это читалось как чужая вёрстка. Специфичность (0,3,0) намеренно выше правил по тегу в ea-prose.css: иначе `table{width:100%}` и `img{max-width:100%}` (0,1,1) считали бы 100% от обёртки и вылезали за неё. Исключение `.ea-head` — шапка своя, ниже. */ .news-view-block > *:not(.ea-head):not(.img-block){ max-width:100%; margin-inline:0; } /* ---------- шапка статьи ---------- */ /* Шаблон вешает канонные `.ea-head`/`.ea-title`/`.ea-divider`, но здесь они переопределяются СОЗНАТЕЛЬНО и только в скоупе статьи. Канон не правится: специфичность у обоих (0,2,0), а этот файл подключён ПОСЛЕ custom.css. Почему вообще переопределяем — замер, а не вкус. `.ea-home .ea-head` даёт `text-align:center` (custom.css:829), и на всех остальных страницах под центрованным титулом стоит ЦЕНТРОВАННОЕ содержимое: на /page/about-us это лид `.mkC-lead` 698px по центру, на главной и /services — центрованные сетки карточек. Статья — единственное место, где центр встретился с ЛЕВОЙ прозой во всю полосу (замер 1440: h1 left 106 w 1220 center; первый p left 106 w 1220 left). Глаз начинает строку в середине и прыгает к левому краю. Плюс сам `.ea-title` — заголовок СЕКЦИИ: на главной он четырежды стоит как

(«Hot offers», «Recent offers», …). Титул документа — не полоса главной. Ось выравниваем влево: так шапка садится на левый край текста и повторяет композицию карточки, с которой читатель сюда пришёл (`.ea-card-title` 19/800 left + `.ea-card-meta` 13px под ним, замер /news/news). */ .news-view-block .ea-head{ text-align:left; margin-bottom:38px; } /* Вес 700, а не канонные 800: в теме Montserrat объявлен ТОЛЬКО в 400 и 700 (`css/fonts/montserrat.css` — 7 @font-face на 400, 7 на 700, италики нет). 800 браузер синтезирует, размазывая контур 700, и на 46px это видно как утолщённое мыло. Плотность добираем трекингом (-.025em против канонных -.02em), а не поддельным жиром. Кегль 46 против канонных 42 — чтобы вернуть ступень между титулом и h2 (28px): было 42→21 = ×2.0 и дальше ×1.24 до текста, то есть середина шкалы пустовала. Стало 46→28→17 = ×1.64 и ×1.65, один коэффициент на всю лестницу. `balance` — титул почти всегда в две строки на 1220px, ровный клин читается лучше висячего хвоста. */ .news-view-block .ea-title{ font-size:clamp(30px,5.6vw,46px); line-height:1.1; font-weight:700; letter-spacing:-.025em; margin:0; text-wrap:balance; } /* Дата набрана как `.ea-card-meta` в карточке списка новостей: 13/600/.02em/ `--ink-40`. Пара «заголовок + дата под ним» тоже взята оттуда (ea_card.twig). Скоуп обёрткой обязателен: `.news-view-block p` ниже по файлу сильнее одиночного класса и иначе перебивает метрику даты. */ .news-view-block .news-article__meta{ margin-block:12px 0; font-size:13px; line-height:1.3; font-weight:600; letter-spacing:.02em; color:var(--ink-40); } .news-article__meta time{font:inherit;color:inherit} /* Черта остаётся канонной 64x4 с брендовым градиентом, но прижата влево — на одну ось с титулом и текстом. Это ЕДИНСТВЕННОЕ место градиента на странице (девять «тиков» над h2 сняты ниже), поэтому он снова что-то значит: брендбук про red/orange/yellow говорит «когда хотим сказать это мы» — один раз в шапке, а не девять раз как орнамент. */ .news-view-block .ea-head .ea-divider{ margin:20px 0 0; } /* Первый h2 сразу после шапки волоска не получает: черта шапки уже закрыла заголовок статьи, две линейки подряд — лишняя. */ .news-view-block .ea-head + h2{ margin-top:0; padding-top:0; border-top:0; } /* ---------- появление ---------- */ /* ОДИН срежиссированный момент на загрузке — шапка и ведущий кадр, лесенкой. Пер-блочного появления по скроллу здесь НЕТ сознательно: замер на этой же странице показал, что IntersectionObserver не отдаёт элементы, пролетевшие между кадрами при быстром скролле (Ctrl+End, переход по якорю) — 51 абзац из 58 оставался opacity:0 навсегда. Текст статьи не имеет права зависеть от срабатывания наблюдателя, поэтому он просто видим. Длительность и кривая — те же .35s `--ease`, что у `.ea-card` в списке новостей, откуда читатель сюда и пришёл. */ @media (prefers-reduced-motion:no-preference){ .news-view-block .ea-title{animation:ea-article-in .45s var(--ease) both} .news-view-block .news-article__meta{animation:ea-article-in .45s var(--ease) .07s both} .news-view-block .ea-head .ea-divider{animation:ea-article-in .45s var(--ease) .13s both} } @keyframes ea-article-in{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } /* ---------- контейнер в полосе 481-767px ---------- */ /* Тема даёт `.shell,.shell-wide{max-width:480px}` и поднимает потолок только с 768px (750 / 970 / 1200). Список новостей из этой ямы выведен правилом `@media(max-width:767px){.news .shell{max-width:100%;width:100%}}` в БД-CSS `/uploads/files_css/style.css:911`, и цепляется оно за класс секции `news`, которого у статьи нет: на 600px список шёл 585px во всю ширину, а статья стояла колонкой 480px по центру — тот же разрыв контейнера, что и на 1440, только в другой полосе. Повторяем поведение КОДОМ: правка БД-CSS — это правка данных, ей место в db_patch отдельной задачей. Специфичность (0,2,0) перебивает тему (0,1,0). */ @media (max-width:767px){ .container.news-view-block{max-width:100%;width:100%} } /* ---------- узкие экраны ---------- */ /* Ритм секции (98/66 на 375px) держат `section-98`/`section-bottom-66` — ровно как на /news/news и /life_in_alb, и он не трогается. Кегль титула на 375px даёт свой clamp (30px): та же лестница ~1.4, что и на десктопе, только сжатая — 30 → 22 → 19 → 17 при тексте 16. До правки на узком было 26→21→16, то есть ×1.24 и ×1.31: иерархия почти плоская. Кегль текста и лестница заголовков на узком заданы в ea-prose.css — здесь только шапка статьи. */ @media (max-width:767px){ .news-view-block .ea-head{margin-bottom:30px} .news-view-block .ea-head .ea-divider{margin-top:16px} }