/* * Мост между старой вёрсткой страницы и новым контейнером. * * Зачем: шапка и подвал уже переверстаны и живут в .it-container - поля * 80px с каждого края на любом разрешении. Основное содержимое страниц * осталось в старом .container (main.css:141) - фиксированные 1400px по * центру, без полей. На экране 1440 это давало расхождение краёв: шапка * от 80 до 1345, контент от 13 до 1413 - контент шире шапки на ~67px с * каждой стороны, и границы блоков не совпадали по вертикали. * * 🛑 main.css НЕ трогаем (правило проекта: новый CSS со старым не мешаем). * Файл грузится входом legacy.js, то есть ПОСЛЕ main.css - при равной * специфичности (0,1,0 у обоих) выигрывает то, что ниже. * * Правило одно на весь сайт: .container стоит в 36 шаблонах, поэтому * выравниваются разом все страницы, а не только главная. */ .container { /* Было max-width: 1400px - фиксированный кадр по центру. Теперь предел свой, общий с шапкой и подвалом, и включается только на широких мониторах (см. --container-max). */ max-width: var(--container-max); margin-left: auto; margin-right: auto; width: 100%; /* 🛑 Обязательно: глобального border-box в main.css нет (там, наоборот, есть точечный content-box). Без этой строки поля прибавились бы к width:100% и дали горизонтальную прокрутку на всех страницах. */ box-sizing: border-box; padding-left: var(--container-pad); padding-right: var(--container-pad); } /* Планшет: контент не шире 640 и стоит по центру - пара к правилу для `.it-container` в layout.css. Меняешь границы там - меняй и здесь. */ @media (min-width: 700px) and (max-width: 999px) { .container { max-width: var(--container-tablet); } } /* Десктоп: те же 80px, что у шапки и подвала. Числа в @media не берутся из переменных - брейкпоинт пишем прямо (справка в tokens.css). */ @media (min-width: 1000px) { .container { padding-left: var(--container-pad-desktop); padding-right: var(--container-pad-desktop); } } /* * ---------- Раскладка страницы (18.08.2026) ---------- * * Колонки приведены к макету: левая 380, правая 256, центральная тянется. * Было 300 / flex-grow / 400 - то есть левая уже макетной на 80px, правая * шире на 146. * * 🛑 Классы разметки НЕ переименованы намеренно: `.content`, `.left-sidebar`, * `.main` и `.right-sidebar` стоят в 25 шаблонах, и переименование ради новой * сетки означало бы правку каждого. Сетку задаём тем же классам здесь - * разметка страниц не трогается вовсе. * * Промежуток 30px: в макете между левой колонкой и центральной ровно 31px * (левая кончается на 460, центральная начинается на 491). Между центральной * и правой в макете зазора нет вовсе (943,6 и 944) - это выглядит недосмотром * дизайнера, поэтому справа держим тот же промежуток, что и слева. * * Центральная колонка шире макетной (в макете 452,6 при кадре 1280): контейнер * у нас резиновый - поля по 80px на любом разрешении, - и весь остаток ширины * достаётся ей. Это принятое решение по контейнеру, а не расхождение вёрстки. */ /* Лента главной. В main.css у #mainArticles стоял padding: 50px 0 - вместе с отступом под пилюлями рубрик это давало 70px между ними и первой карточкой против 31 в макете. Свой отступ тут не нужен вовсе: расстояние между блоками задаёт отбивка самих блоков. Само правило из main.css удалено 19.08.2026, но эта строка нужна и после удаления - по двум причинам: 1. main.css подключается с ФИКСИРОВАННОЙ версией (?2023-09-21), поэтому у всех, у кого он уже закэширован, старый padding продолжает действовать. Файлы этой сборки версионируются хэшем и доезжают сразу. 2. main.css может прийти обратно мержем master -> upgrade. Селектор повторяет исходный (0,2,1), иначе короткий #mainArticles (0,1,0) проигрывает по специфичности и правило молча не применяется - так и было до 19.08.2026. */ .content .main #mainArticles { padding: 0; } /* 🛑 У .main в main.css стоит `padding: 0 50px` - содержимое центральной колонки было вдвинуто внутрь на 50px с каждой стороны. Из-за этого лента начиналась не от края колонки, а широкий блок «Благородный Куръан» (он лежит в сетке, а не в колонке) оказывался шире ленты на те же 50px - выглядело как «блок вылез за колонку» (замечание Дмитрия 19.08.2026). В макете такого отступа нет: карточки идут от границы колонки. */ .content .main { padding: 0; } /* Мобильная: колонки идут одна под другой. Старый CSS ставил .content flex-строкой БЕЗ медиазапросов, то есть три колонки в ряд даже на телефоне. */ .content { display: block; } /* 🛑 Ширины колонок из main.css (300 и 400) снимаем ВНЕ медиазапроса. Пока сброс стоял только в десктопном блоке, правая колонка на телефоне держала свои 400px и давала горизонтальную прокрутку на экране 390. */ .content > .left-sidebar, .content > .right-sidebar { width: auto; max-width: 100%; } @media (min-width: 1000px) { .content { display: grid; grid-template-columns: 380px minmax(0, 1fr); align-items: start; column-gap: var(--gap-columns); row-gap: var(--sp-30); } .content > .main { min-width: 0; } } /* Три колонки держатся до самого мобильного порога - тот же 1000 (решение Дмитрия 20.08.2026). Это возможно, потому что колонки заданы долями и сжимаются вместе с экраном: на 1000 они выходят 330 / 367 / 223. Прежние пороги (1280, потом 1100) остались от жёстких пиксельных колонок, и при них правая колонка проваливалась вниз полосой во всю ширину, хотя места хватало. Внутренние страницы (рубрика, статья, теги) правую колонку отключают, и им сетка остаётся двухколоночной: без :has() у них справа висел бы пустой трек. */ @media (min-width: 1000px) { /* 🛑 Колонки заданы ДОЛЯМИ, а не пикселями: контейнер резиновый, и сетка должна занимать его целиком на любой ширине, сохраняя пропорции макета 380 : 422 : 256 (решение Дмитрия 20.08.2026). На кадре макета 1280 доли дают ровно макетные числа, на широком мониторе колонки растут вместе. Пиксельные значения оставляли справа пустое место, центрирование сетки - увеличенные поля вместо полей контейнера. */ .content:has(.right-sidebar) { grid-template-columns: 380fr 422fr 256fr; } /* 🛑 Места в сетке задаём ЯВНО. Иначе широкий блок, который идёт в разметке после центральной колонки (например «Благородный Куръан» на две колонки), занимает вторую строку и выталкивает правую колонку под себя - она уезжала вниз, под всю ленту. */ .content > .left-sidebar { grid-column: 1; grid-row: 1; } .content > .main { grid-column: 2; grid-row: 1; } /* 🛑 `min-width: 0` боковым колонкам - без него грид-элемент не даёт содержимому сжаться уже своей «естественной» ширины. Всплыло 24.09.2026, когда «Топ статей об исламе» стал каруселью: лента из 23 карточек по 260px растянула левую колонку до 6332px и утащила за собой всю страницу (горизонтальная прокрутка на 5299px), хотя у самой ленты `overflow-x` стоит. У `.main` такое правило было с самого начала. */ .content > .left-sidebar, .content > .right-sidebar { min-width: 0; } .content > .right-sidebar { grid-column: 3; grid-row: 1; } /* 🛑 Только просмотрщик мусхафа (`/quran/`, просьба Дмитрия 26.09.2026): левая колонка («Актуальное», «Самое читаемое») там не нужна, страница листает Коран, а не читает статьи. Убирается ПЕРЕОПРЕДЕЛЕНИЕМ блока `leftSidebar` целиком (см. Mushaf/index.html.twig) - div `.left-sidebar` из разметки пропадает совсем, а не остаётся пустым: `:has(.left-sidebar)` на обычных страницах истинно всегда (блок рендерит обёртку, даже когда sidebarNews/sidebarCatNews пусты), так что правило ничего, кроме этой страницы, не задевает. Правая колонка сохраняет прежнюю ширину (256fr), левая (380fr) отдаётся основному содержимому целиком (422+380=802fr). */ .content:not(:has(.left-sidebar)) { grid-template-columns: 802fr 256fr; } .content:not(:has(.left-sidebar)) > .main { grid-column: 1; } .content:not(:has(.left-sidebar)) > .right-sidebar { grid-column: 2; } } /* * 🛑 Только страница расписания намаза (`/namaztime/`, просьба Дмитрия * 17.09.2026) - остальные страницы идут по неизменной сетке макета 380/422/256 * выше. У таблицы шести намазов ячейки `white-space: nowrap` (namaz-page.css), * и в диапазоне 1000-1365px колонка `.main` из макетной сетки (334-457px) * оказывается уже минимальной ширины таблицы (~444px) - Ишу видно только * прокруткой вбок. Сужаем здесь левую колонку в пользу главной; выше 1365px * макетная сетка уже даёт колонке достаточно места сама. */ @media (min-width: 1000px) and (max-width: 1365px) { .content:has(.it-namaz-page) { grid-template-columns: 270fr 530fr 258fr; } } /* * 🛑 Десктопной сетки рекламное место 1 не касается ВООБЩЕ (решение Дмитрия * 07.09.2026): там баннер стоит над шапкой, вне `.content`, как стоял всегда. * В промежуточной версии он был первой строкой этой сетки, а колонки * сдвигались во вторую - и «Благородный Куръан», у которого в koran.css * жёстко прописана строка 2, оказывался с ними в одной ячейке: аят рисовался * поверх карточек центральной колонки. Замер положения колонок поломки не * показывал (у наложенных элементов координаты правильные), видно было только * глазами. Правка отменена целиком; на мобильной баннер переезжает в ленту * переносом узла - см. `redesign/blocks/top_banner_mobile_slot.html.twig`. */ /* * Рамки боковых колонок. В main.css у .left-sidebar и .right-sidebar стоит * border: 1px #e5e5e5 - серые линии по краям обеих колонок. В макете колонки * без рамок вовсе, блоки разделяются отступами (замечание Дмитрия 18.08.2026). * * Снимаем здесь, а не в main.css: он остаётся нетронутым для страниц, которые * ещё живут на старой вёрстке целиком. */ .content .left-sidebar, .content .right-sidebar { border: 0; } /* * 🛑 Здесь был разделитель под содержимым - чёрная линия 4px, унаследованная * от старой вёрстки (border-bottom у .content). Убрана 19.08.2026 по * замечанию Дмитрия: в макете этой линии нет. Сам border у .content остаётся * снятым - ниже. */ .container.content { border-bottom: none; } /* * ---------- Списки в тексте материала (20.08.2026) ---------- * * Текст редакции приходит из базы сырым HTML в `.article__text`, и списки там * шли браузерными: мелкие номера, слипшиеся строки, шрифт `Manrope Light` из * старого `main.css` - при том что сам текст вокруг уже набран Golos Text. * В макете внутренних страниц нет, поэтому вид собран по смыслу и из токенов: * номер в песочном кружке (фон блока «Куръан»), маркер - фирменная оранжевая * точка. * * 🛑 Только списки БЕЗ класса. В контенте попадаются служебные (`ul.slides` у * галерей и подобные) - у них своя раскладка, и общий `list-style: none` с * нашими `::before` её ломает. Списки из редактора класса не имеют. */ .article__text ol:not([class]), .article__text ul:not([class]) { margin: 0 0 var(--sp-20); padding: 0; list-style: none; counter-reset: it-list; } .article__text ol:not([class]) > li, .article__text ul:not([class]) > li { position: relative; margin: 0 0 var(--sp-12); padding-left: var(--sp-32); font-family: var(--font-main); line-height: 1.55; } /* Номер: своя нумерация счётчиком, потому что штатный маркер `decimal` не красится и не выравнивается - его нельзя ни увести в кружок, ни задать ему кегль отдельно от текста пункта. */ .article__text ol:not([class]) > li::before { position: absolute; top: 2px; left: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-sand-bg); color: var(--c-text); counter-increment: it-list; content: counter(it-list); font-size: var(--fs-12); font-weight: var(--fw-demibold); line-height: 1; } .article__text ul:not([class]) > li::before { position: absolute; top: 11px; left: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); content: ''; } /* * Блок комментариев (виджет Cackle) стоит в 13 шаблонах и своих стилей не * имеет вовсе - прижимался вплотную к тексту материала. Отбивка 30px по * просьбе Дмитрия 20.08.2026; правила здесь, а не в шаблонах, чтобы не * править их по одному. * * 🛑 Сам виджет НЕ стилизуем (указание Дмитрия) - только то, что лежит вне * его разметки: строка-заглушка и подпись сервиса. Поэтому и шрифт задан не * блоку целиком, а этим двум элементам: у `.comments` он наследовался бы * внутрь виджета. */ .comments { margin-top: var(--sp-30); /* В шаблонах инлайном стоит `width: 620px` - число из старой вёрстки. На мобильной это горизонтальная прокрутка; `max-width` ограничивает инлайновую ширину, не требуя ни `!important`, ни правки 12 файлов. */ max-width: 100%; } /* * Текст, который виджет пишет вместо себя («Комментарии отключены» - именно * это сейчас отдаёт Cackle для сайта 29657). Пока своей разметки у виджета в * контейнере нет, там лежит один текстовый узел - на это и опирается селектор: * появятся элементы (спиннер загрузки или сами комментарии) - правило * отключится само, и виджет останется со своим оформлением. */ #mc-container:not(:has(*)) { display: block; padding: var(--sp-16) 0; color: var(--c-text-muted); font-family: var(--font-main); font-size: var(--fs-14); } /* Подпись сервиса - служебная строка, а не часть материала: мельче и спокойнее. Фирменные буквы внутри неё покрашены самим Cackle, их не трогаем - это условие бесплатного тарифа. */ #mc-link { display: inline-block; margin-top: var(--sp-12); color: var(--c-text-meta); font-family: var(--font-main); font-size: var(--fs-11); text-decoration: none; } #mc-link:hover { text-decoration: underline; } /* * ---------- Мобильная: порядок блоков по макету (20.08.2026) ---------- * * Макет мобильной главной - узел Figma 0:6. Там блоки идут одной колонкой в * своём порядке: Хузур ТВ, главный материал, «Вопрос-ответ», «Благородный * Куръан», «1000 и один хадис», лента «Рубрик». В разметке они лежат в трёх * колонках десктопа, и без этого раздела на телефоне вываливались стопкой в * порядке колонок: сначала ВЕСЬ левый сайдбар (главный материал плюс 1254px * списка «Топ статей об исламе»), потом центр, потом правый. * * 🛑 Блоки, которых в мобильном макете нет, НЕ прячем (решение Дмитрия * 20.08.2026) - «Фото дня», «Видео дня» и «Мобильные приложения» уходят в * хвост страницы, ниже ленты. * * Исключение - «Топ статей об исламе»: он стоит сразу за главным материалом, * как на десктопе (решение Дмитрия 20.08.2026), а не в хвосте. * * Как это сделано: `.content` на мобильной - flex-колонка, а промежуточные * обёртки (сами колонки и `#mainArticles`) получают `display: contents` - * тогда их дети становятся элементами этой колонки, и порядком можно * управлять через `order`. Разметка при этом не трогается вовсе: те же классы * стоят в 25 шаблонах, переносить блоки в HTML значило бы ломать десктоп. * * 🛑 Раздел ограничен `max-width: 999px` намеренно. Десктопная сетка ниже * задаётся в `min-width: 1000px`, и `display: contents` у колонок её бы * сломал - grid-элементов просто не осталось бы. */ @media (max-width: 999px) { .content { display: flex; flex-direction: column; /* Единственный источник расстояния между блоками на мобильной. Значение - в `--gap-mobile`: на него завязаны отрицательные поля блоков ниже, поэтому правится одним местом. */ gap: var(--gap-mobile); } .content > .left-sidebar, .content > .main, .content > .main > #mainArticles, .content > .right-sidebar { display: contents; } /* Свои отбивки блоков внутри колонок на мобильной складывались бы с gap и давали 50px вместо 30. Расстояние здесь задаёт только gap. */ .content .it-tv, .content .it-hadis, .content .it-koran-player, .content .right-sidebar .it-feed { margin-bottom: 0; } .content .it-qa-wrap { margin-top: 0; } /* Кнопка догрузки и пагинация на страницах списков - те же элементы flex-колонки, поэтому их собственные отбивки складывались с `gap`: на телефоне между списком, кнопкой и пагинацией выходило по 50px при десктопных 20. Расстояние здесь задаёт только `gap`. */ .content #loadmore, .content .default_pagination { margin-top: 0; } /* Строка-переключатель справочников (сонник, имена, термины): её собственные 20px сверху и снизу (`service-pages.css`) складывались с `gap` и отрывали её и от заголовка, и от поля поиска. */ .content .tags_filter { margin: 0; } /* То же у крошек и списка дуа (замечание Дмитрия 24.09.2026 - «слишком большой отступ»): у крошек 20px снизу из `main.css`, у списка 20px сверху из `prayers.css`, и оба складывались с `gap` - выходило 35px там, где видно 15. На десктопе свои поля остаются: там `gap` колонки не работает, расстояние задают именно они. */ .content .breadcrumbs { margin-bottom: 0; } .content .it-dua-list { margin-top: 0; } /* 🛑 Три блока с подложкой идут ВСТЫК (макет: «Вопрос-ответ» 1403-1823, «Куръан» 1823-2831, «хадис» 2831-3346 - конец одного равен началу следующего). Расстояние между блоками задаёт `gap` контейнера, поэтому промежуток снимается отрицательным полем сверху у второго и третьего - ровно на `--gap-mobile`, ту же переменную, что стоит в самом `gap`. Соседством (`+`) так не сделать: в разметке блоки лежат в РАЗНЫХ колонках (`.main` и `.right-sidebar`), рядом их ставит только `order`, а он на CSS-селекторы соседства не влияет. */ .content > .it-koran-wide, .content .it-hadis { margin-top: calc(-1 * var(--gap-mobile)); } /* 🛑 Здесь у «Топ статей об исламе» снимался `gap` контейнера: блок стоял сразу за главным материалом, а разделяла их чёрная линия под карточкой (`.it-lead::after`) со своими полями по 20px. С 16.09.2026 линии на мобильной нет (в макете её нет - разбор в card-article.css), и без промежутка заголовок «Топ статей» прилипал к строке с датой. Расстояние теперь задаёт `gap`, как у остальных блоков ленты. */ /* Здесь у «Топ статей об исламе» из 23 материалов показывались 7 (решение Дмитрия 20.08.2026): вертикальный список занимал ~1430px и отодвигал «Вопрос-ответ» на два экрана вниз. С 24.09.2026 блок стал каруселью - она горизонтальная и высоту страницы не раздувает, все 23 материала доступны смахиванием. Правило снято как мёртвое: класса `.it-feed` у блока больше нет. */ /* Порядок блоков. Шаг 10, чтобы между соседями можно было вставить блок, не перенумеровывая остальные (с шагом 1 запас кончился на первой же вставке - «Топ статей» между 2 и 3). 🛑 Перенумерован 07.09.2026 по решению Дмитрия: сайт новостной, значит контент должен идти раньше рекламных и сервисных блоков. Раньше сразу за шапкой шли рекламное место 5 и Хузур ТВ - первое потому, что у рекламных мест не было своего order и они падали в 0, впереди всех. Теперь порядок такой: аудио-сура, баннер «Коран.Тафсир» (рядом с сурой по смыслу), статья дня, «Топ статей об исламе», Хузур ТВ, рекламные места, дальше как было. Правка только мобильная - десктопная сетка ниже 1000px не действует, там всё осталось прежним. 16.09.2026: перед аудио-сурой встала сетка тем - в макете она идёт сразу за строкой поиска (см. следующий комментарий). */ /* 🛑 Сетка тем (.it-topics) стоит ПЕРВОЙ - сразу под строкой поиска, как в мобильном макете (узел `63:130` в `0:6`, указание Дмитрия 16.09.2026). До этого она жила в конце ленты (order:100) - разбор переезда блока ВНУТРЬ .main остался в topics-grid.css, здесь важно только то, что своего места в порядке по умолчанию у неё нет: без этой строки блок получил бы order:0 и всё равно оказался первым, но случайно, а не по решению. Между сеткой и «встык»-тройкой (qa-wrap 70, koran-wide 80, hadis 90) ничего не меняется: их отрицательные поля рассчитаны на соседство друг с другом, а сетка теперь стоит от них далеко. */ .content .it-topics { order: 5; } .content .it-hero-player { order: 10; } /* Хузур ТВ - третий блок песочной плашки (в макете он на ней же, сразу за плеером суры; решение Дмитрия 16.09.2026 - поднять, но ТОЛЬКО на мобильной). До этого стоял пятым, после статьи дня и «Топ статей» (порядок от 07.09.2026) - на десктопе он там и остался, правило лежит внутри `max-width: 999px`. */ /* Карусель идёт сразу под строкой поиска: на её первой странице лежит сетка тем, которая в макете стоит первой (её собирает hero-slider.js переносом блоков). Селекторы сетки и ТВ оставлены на случай, когда карусели нет - без JS или когда второй страницы не оказалось: тогда блоки остаются в ленте на своих прежних местах. */ .content .it-hero-slider { order: 5; } .content .it-tv { order: 15; } /* 🛑 Внутри карусели правила ленты снимаются, и делать это надо ИМЕННО здесь: `order: 15` выше задан селектором той же силы, а при равной специфичности выигрывает файл, подключённый позже, - legacy-bridge идёт последним. В hero-slider.css такой сброс проигрывал молча, и ТВ уезжал во вторую колонку (`order` действует в любом флекс-контейнере, а страница карусели тоже флекс). Заодно снимаются поля ленты и отрицательные боковые поля «Куръана», из-за которых он был шире страницы и прокрутка не попадала на границы. */ .content .it-hero-slider__row > * { order: 0; width: auto; margin: 0; } /* Рекламное место 1 сюда переносит скрипт (top_banner_mobile_slot) - на десктопе блок остаётся над шапкой. Место в ряду он получает только на главной (её признак в разметке - аудиоплеер суры, он больше нигде не выводится). На остальных страницах у соседних блоков order по умолчанию, и баннер остаётся первым, как стоял: дать ему order без разбора значило бы утопить его в конец страницы всюду, где нового порядка нет. */ .content:has(.it-koran-player) > .it-header__banner { order: 20; } /* 🛑 На ВНУТРЕННИХ страницах баннер должен стоять так же, как на главной - после верха страницы и перед лентой материалов (решение Дмитрия 17.09.2026). Раньше он был первым в контенте и вклинивался между строкой поиска и хлебными крошками. Двигаем не баннер, а то, что должно быть ВЫШЕ него: крошкам и заголовку раздела ставим отрицательный порядок. Так надёжнее - у остальных блоков страницы своего порядка нет, они нулевые, и любое число у баннера утопило бы его в конец. Правило не касается главной: там баннер уже расставлен своим `order`, а крошек с заголовком раздела нет вовсе. */ .content:not(:has(.it-koran-player)) .breadcrumbs, .content:not(:has(.it-koran-player)) .article__header { order: -1; } /* Свои поля блока внутри ленты не нужны: сверху их задаёт `gap` контейнера, а боковые - `.container`, в котором блок теперь лежит. Собственный `.it-container` (он нужен блоку над шапкой, вне `.container`) иначе дал бы двойные поля. */ .content > .it-header__banner { padding: 0; } .content > .it-header__banner .it-container { max-width: none; padding: 0; } .content .it-feed.it-lead { order: 30; } /* «Новости» (25.09.2026) - между статьёй дня и «Самое читаемое», как в левой колонке десктопа. Нужен свой класс: общий `.it-feed:not(.it-lead)` ниже отдаёт 40 любому такому блоку колонки, а этому нужно раньше. */ .content .left-sidebar > .it-news { order: 35; } /* 🛑 Карусель «Топ статей об исламе» встаёт на место прежнего списка (24.09.2026). Блок сменил класс с `.it-feed` на `.it-carousel`, своего порядка не получил и упал в 0 - то есть оказался выше строки поиска, первым блоком мобильной страницы. С 26.09.2026 блок выводится плитками «Историй» (`.it-stories--wide`) - то же правило и для них. */ .content .left-sidebar > .it-feed:not(.it-lead):not(.it-news), .content .left-sidebar > .it-carousel, .content .left-sidebar > .it-stories { order: 40; } /* Рекламные места правой колонки: место 5 - первым, как просил Дмитрий, остальные (12, 4, 6) сразу за ним, чтобы реклама стояла одной группой, а не вразброс по странице. 🛑 Только ПРЯМЫЕ дети колонки: у места 5 сам баннер лежит внутри `.it-aside__banner-block` с тем же классом `.it-aside__banner`, и общий селектор задевал бы его вместе с соседями. */ .content .right-sidebar > .it-aside__banner-block { order: 60; } .content .right-sidebar > .it-aside__banner { order: 65; } .content .it-qa-wrap { order: 70; } .content > .it-koran-wide { order: 80; } .content .it-hadis { order: 90; } /* «Истории» (узел 0:257 мобильного макета) - между хадисом и рекламным местом, как в макете (там блок стоит перед «Рекламный баннер» и «Рубрики»). Добавлено 18.09.2026. 🛑 Лента с модификатором `--wide` под это правило НЕ попадает: тем же блоком выводятся «Статьи о снах» на `/sonnik/` (восстановлено 25.09.2026 из git, коммит `1667f8b`), и она должна стоять там, где стоит в разметке - сразу под поиском. С общим `order: 95` она уезжала в конец колонки, ниже пояснительного текста (замер 24.09.2026: лента на 1856px при тексте на 466). */ .content .it-stories:not(.it-stories--wide) { order: 95; } /* Отступ снизу 20px по просьбе Дмитрия 18.09.2026 - `gap` контейнера даёт только 15, добираем разницу тем же приёмом, что у `.it-topics`/ `.it-hero-player` выше (margin складывался бы с `gap` и дал 35). */ .content .it-stories { margin-bottom: calc(var(--sp-20) - var(--gap-mobile)); } /* Рекламное место из ленты рубрик, перенесённое сюда скриптом (assets/controllers/mobile-ad-banner.js) - между хадисом и рубриками, во всю ширину экрана, как просил Дмитрий 17.09.2026. */ .content .it-mobile-banner { order: 100; } .content .it-rubrics { order: 110; } .content .it-mobile-banner { margin: 0 calc(-1 * var(--container-pad)) 0; text-align: center; } .content .it-mobile-banner img { border-radius: 0; } /* Ниже - то, чего в мобильном макете нет. Порядок внутри группы сохраняется тот же, что в разметке. */ .content .right-sidebar > .it-feed { order: 120; } /* Свои отбивки рекламных мест (`margin-bottom` у `.it-aside__banner`) на мобильной складывались бы с `gap` контейнера - расстояние здесь задаёт только он, как и у блоков выше. Снимаем у прямых детей колонки: у места 5 сам баннер лежит внутри `.it-aside__banner-block`, и общий селектор задевал бы его вместе с соседями. */ .content .right-sidebar > .it-aside__banner, .content .right-sidebar > .it-aside__banner-block { margin-bottom: 0; } /* ---------- Песочная плашка первого экрана (макет 0:6, Rectangle 1) ---------- * * В макете строка поиска и блоки первого экрана лежат на одной подложке * 390×900 с ОДНИМ градиентом сверху вниз. Подложка - это контейнер * `.it-hero`: строка поиска и карусель переносятся внутрь него скриптом * (`controllers/hero-bg.js`), потому что в разметке они живут в разных * местах - поиск в шапке, карусель в `.content`. * * ⚠️ Три версии до этого фон НЕ принадлежал блоку, и каждая давала свою * беду: (1) градиент, порезанный по блокам с подгонкой цветов стыков - * расходился на другой ширине; (2) одна картинка, нарисованная в двух * элементах со сдвигом - на границе оставалась тонкая грань; (3) слой * `body::before` с высотой, которую считал скрипт, - стыков не было, но * фон висел подложкой, не связанной с блоком (замечание Дмитрия * 16.09.2026: нужен контейнер). Теперь высоту задаёт само содержимое. * * Ограничение `body:has(.it-topics)` - блок есть только на главной, а * полоса поиска стоит на всех страницах: без него правки поиска * разъехались бы по всему сайту. */ .it-hero { /* 🛑 Обязательно: глобального border-box в main.css нет, а контейнер - элемент флекс-колонки с отрицательными боковыми полями. Без этой строки его поля прибавлялись к растянутой ширине, и страница уезжала вправо на 40px (горизонтальная прокрутка). */ box-sizing: border-box; /* Снизу 30px до следующего блока ленты (указание Дмитрия 16.09.2026). 🛑 `gap` контейнера при этом гасим отрицательной частью, иначе он прибавился бы к полю и дал 45. */ margin: 0 calc(-1 * var(--container-pad)) calc(var(--sp-30) - var(--gap-mobile)); padding: 0 var(--container-pad) var(--sp-20); background: var(--grad-hero); /* 🛑 На странице поиска (главная переопределяет ниже) плашка без своего `order` проигрывает баннеру очередь DOM-порядка: баннер (`top_banner_mobile_slot.html.twig`) скриптом вставляется ПЕРВЫМ ребёнком `.content` и у него order по умолчанию 0 - плашка (тоже 0) вставала после него (замечание Дмитрия 17.09.2026, `/search/?page=2`). -1 гарантирует место выше баннера везде, кроме главной, где ниже задан более специфичный селектор. */ order: -1; } /* 🛑 Место в ленте задаём ТОЛЬКО на главной: там `.content` - флекс-колонка с расставленным `order`, и без своего номера контейнер уехал бы в начало. На остальных страницах (например, в поиске) `order` наоборот вредит: у соседей его нет, они считаются нулевыми и встают ВЫШЕ контейнера - на странице поиска так пагинация оказалась над плашкой. Специфичность этого селектора (`body:has(...)`) выше общего `.it-hero` выше - на главной побеждает значение 5, а не -1. */ body:has(.it-topics) .it-hero { order: 5; } /* Внутри контейнера полоса поиска уже не выходит за края сама - боковые поля даёт `.it-hero`, а свой фон ей не нужен вовсе. 🛑 `box-sizing` повторяем здесь: в header.css он объявлен локальным сбросом на `.it-header *`, а перенесённая форма шапке больше не потомок. Без этой строки его собственные поля прибавлялись к его ширине 100%, и страница уезжала вправо на 60px. Общий признак: переносишь узел из блока со своим сбросом - сброс за ним НЕ едет. */ .it-hero .it-header__search, .it-hero .it-header__search * { box-sizing: border-box; } /* По той же причине повторяем сброс кнопки: в шапке он висит на `.it-header button` (серый фон и рамка браузера), а перенесённая кнопка поиска под него больше не попадает. */ .it-hero .it-header__search button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } /* Кнопка позиционируется от края формы, а он теперь совпадает с краем поля ввода: в шапке форма несла боковое поле контейнера, и в отступе кнопки оно было учтено. */ .it-hero .it-header__search-submit { right: var(--sp-16); } .it-hero .it-header__search { margin: 0; padding: var(--sp-20) 0; background: none; } /* Поля внутри плашки: 20px между блоками ленты (`gap` контейнера даёт 15, добираем разницу). Низ плашки - `padding-bottom` контейнера `.it-hero`. 🛑 Сверху сетке поле НЕ нужно (указание Дмитрия 16.09.2026): 20px от поля поиска до первого ряда плиток уже дают нижние поля самой полосы поиска. Своё поле давало 40px вместо макетных 20. */ .content .it-topics { padding-top: 0; } .content .it-hero-player, .content .it-hero-slider, .content .it-tv { margin-top: calc(var(--sp-20) - var(--gap-mobile)); margin-bottom: calc(var(--sp-20) - var(--gap-mobile)); } /* Внутри контейнера у карусели своих полей нет: сверху её отделяет поле строки поиска, снизу - `padding` самого контейнера. */ .it-hero .it-hero-slider { margin: 0; } /* 🛑 Сброс полей внутри карусели идёт ПОСЛЕ правила выше: `.it-tv` попадает под оба селектора, и внутри страницы карусели поля ленты ему не нужны - там блоки стоят рядом, а не друг под другом. Правило-близнец выше по файлу (`order`, ширина) оставлено на своём месте - оно про другое. */ .content .it-hero-slider__row > * { margin: 0; } } /* Обёртка плеера нужна только мобильной - на десктопе она снимается, и карточка остаётся прямым ребёнком правой колонки, как была. */ @media (min-width: 1000px) { .it-hero-player { display: contents; } } /* * ---------- Хлебные крошки (20.08.2026) ---------- * * Шрифт приведён к пунктам меню шапки (`.it-header__nav-link`, просьба * Дмитрия): Golos Text, тот же плавный кегль `--fs-nav-link`. В старом * `main.css` крошки набраны «Manrope Thin» 14px серым #4c4c4c - в проекте * этого шрифта нет вовсе, браузер подставлял системный. * * Подчёркивание у ссылки оставлено как было (просьба Дмитрия 20.08.2026), * по наведению добавляется фирменный оранжевый. Текущий раздел (последний, * в `span`) - приглушённым, чтобы отличался от кликабельных. */ .breadcrumbs, .breadcrumbs a, .breadcrumbs span { color: var(--c-text); font-family: var(--font-main); font-size: var(--fs-nav-link); line-height: 1.4; } .breadcrumbs a { text-decoration: underline; } .breadcrumbs a:hover { color: var(--c-accent); } .breadcrumbs span { color: var(--c-text-muted); } /* * ---------- Заголовок страницы списка (20.08.2026) ---------- * * «Рамадан - все новости и статьи по теме» и такие же заголовки страниц тегов * и рубрик. Были «Manrope Light» 32px (шрифта в проекте нет) с полями по 21px * сверху и снизу - заголовок начинался ниже соседних колонок. * * 🛑 Правило только для ПРЯМОГО ребёнка `.main`. Тот же класс носит заголовок * материала, но там `h1` лежит внутри `div.article__header` - его этот * селектор не задевает, страницы статей пока живут на старом оформлении. */ .main > h1.article__header { margin: 0 0 var(--sp-20); color: var(--c-text); font-family: var(--font-main); font-size: var(--fs-feed-title-big); font-weight: var(--fw-demibold); line-height: 1.2; } /* На мобильной отбивка под заголовком меньше - просьба Дмитрия 24.09.2026. */ @media (max-width: 999px) { .main > h1.article__header { margin-bottom: 5px; } } /* * ---------- Кнопка «Задать вопрос» (20.08.2026) ---------- * * Оформлена как «Все новости» и «Загрузить еще» (`.it-more`): пунктирная * рамка, радиус 4, Golos 14. Было - «Manrope Light» 16px в чёрной сплошной * рамке с полями 4×8. * * 🛑 Ширину НЕ растягиваем: у `.it-more` она 100%, а эта кнопка стоит в * строке над списком, и её прежний размер (139×37) сохраняется - просьба * Дмитрия. Отсюда `width: auto` и фиксированная высота. * * Отбивка сверху была 50px при 35 снизу. Сверху убрана совсем: кнопка - * первый элемент центральной колонки, и с любым полем она вставала ниже * соседних колонок (те начинаются вровень с контейнером). Снизу общий шаг 20. */ .ask_form_opener { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); width: auto; min-width: 139px; height: 37px; margin: 0 0 var(--sp-20); padding: 0 var(--sp-16); border: 1px dashed var(--c-sand); border-radius: var(--r-4); background: transparent; color: var(--c-text-black); font-family: var(--font-main); font-size: var(--fs-14); line-height: 1.2; text-decoration: none; } .ask_form_opener:hover { border-color: var(--c-accent); color: var(--c-accent); } /* * ---------- Описание раздела под списком (20.08.2026) ---------- * * Текст-подводка внизу страниц рубрик, тегов, фетв, вопросов и конференций. * В старом `main.css` он набран «Manrope Light» - шрифта в проекте нет, и * браузер подставлял системный - заголовком 36px и абзацем 18px: на фоне * остальной страницы читалось как чужой блок. * * Приведено к общим стилям: заголовок как у секций (плавный 17→20, DemiBold), * текст 14px с интерлиньяжем 1.5. Класс `.article__smaller` носят только эти * описания - страницы материалов, где `.article__text` тоже встречается, * правило не задевает. */ .article.article__smaller .article__header { margin: 0 0 var(--sp-12); color: var(--c-text); font-family: var(--font-main); font-size: var(--fs-feed-title-big); font-weight: var(--fw-demibold); line-height: 1.2; } .article.article__smaller .article__text { color: var(--c-text); font-family: var(--font-main); font-size: var(--fs-14); line-height: 1.5; } .article.article__smaller .article__text p { margin: 0 0 var(--sp-12); } .article.article__smaller .article__text p:last-child { margin-bottom: 0; } /* Крошки везде идут первым элементом колонки, поэтому верхняя отбивка из `main.css` не нужна ни на списках, ни на странице материала - сверху уже поле самой страницы (просьба Дмитрия 20-21.08.2026). ⚠️ Сначала правило стояло с `:has(+ .it-cards)` - только для списков; на странице материала за крошками идёт заголовок, и там отбивка оставалась. */ .breadcrumbs { margin-top: 0; } /* * ---------- Просмотрщик Корана: прокрутка перевода (22.08.2026) ---------- * * 🛑 У блока перевода аята в `main.css` стоит `height: 240px; overflow: hidden`, * а прокрутку внутри него делала библиотека IScroll. Её файла в проекте НЕТ - * `/static/bower_components/iscroll/build/iscroll.js` отдаёт 404 и на диске * отсутствует, то есть библиотека не грузилась и раньше. Значит перевод, * который не помещался в 240px, дочитать было нельзя вовсе: текст просто * обрезался. * * Возвращаем нативную прокрутку - стороннюю библиотеку 2013 года ради этого * тащить незачем. Сам просмотрщик остаётся на своей старой вёрстке: новый * раздел «Куръан» идёт этапом 7 и пока заблокирован материалами Заказчика. */ [data-iscroll] { overflow-y: auto; } /* * 🛑 Сканы страниц мусхафа - 640px в натуральную величину, и на телефоне они * уводили страницу за экран (замер 22.08.2026: scrollWidth 660 при 375 * видимых). Своей ширины у них в разметке нет, поэтому ограничиваем здесь. */ .koran-book__page__original img { max-width: 100%; height: auto; }