/* ============================================================ PddPro — общий слой на все страницы Источник — design2/assets/css/main.css. Здесь только то, что общее всем страницам: база (шрифт, цвет, фон), ссылки, кнопки движка, вывод рейтинга. То есть перевод уже существующей вёрстки движка на токены, без правки разметки. Шапка и меню бургера уехали в header.css, подвал — в footer.css (14.08.2026, разбивка работы на параллельные потоки). Порядок подключения тот же: tokens → main → header → footer → страницы, каскад не изменился. Всё, что ниже, снимается откатом темы на messia. ============================================================ */ /* ------------------------------------------------------------ 1. БАЗА: шрифт, цвет текста, фон страницы Движок задаёт это в одном месте — frontend.css, правило body: font-family: "Gilroy", Tahoma, Verdana, sans-serif color: #333333 background: #edf6f9 Проверено: во всей теме и во всех плагинах font-family назначается ровно четыре раза, и только это правило бьёт по всей странице. Остальные три — точечные (.working-hours-timezone и один виджет в skin.css). Поэтому одной строкой здесь шрифт меняется на всём сайте, без лоскутов. body.pdd — специфичность (0,1,1) против (0,0,1) у голого body, так что !important не нужен. Класс вешает messia_pddpro_body_class(). Намеренно НЕ трогаем: display:flex, flex-direction:column, min-height:100vh — на них держится раскладка движка (подвал прижат к низу). А вот font-size и line-height трогаем (14.08.2026, сверка с эталоном). Движок держит на body 16px/1.3, эталон — 13px/1.45 (--font-size-meta и --line-height-base, `body` в design2/assets/css/main.css:16). Разница видна везде, где текст ничем не перекрыт: крошки, тексты виджетов, подписи плагинов. Раскладку это не двигает — на flex-колонку body размер шрифта не влияет. ------------------------------------------------------------ */ body.pdd { font-family: var(--font-family-base); color: var(--color-text); font-size: var(--font-size-meta); line-height: var(--line-height-base); } /* Фон — единственное место во всей теме, где пришлось поставить !important, и вот почему. Фон body назначают пять правил подряд: body background: #edf6f9 frontend.css body background: #FBFBFB frontend.css body background-color: #f9f9f9 !important skin.css .page_listing background: #ffffff frontend.css body.page-template-v3 background: #eff2f3 frontend.css Третье — с !important, и обойти его специфичностью нельзя: !important всегда сильнее обычного объявления, каким бы длинным ни был селектор. Без ответного !important фон остаётся #f9f9f9. Правило точечное: одно свойство, один элемент. Всё остальное в теме по-прежнему обходится специфичностью body.pdd. Проверено через CSS.getMatchedStylesForNode на живой странице. */ body.pdd { background-color: var(--color-bg) !important; } /* ------------------------------------------------------------ 1a. КОНТЕЙНЕР: боковое поле страницы Родительская тема даёт .container { width: 90% } — на 390px это 19.5px по краям, и поле «плывёт» вместе с шириной экрана. Эталон до 1024 держит ровно --page-padding (16px), выше — центрованные --app-max-width. Приводим к этому одним правилом: width 90% перебивается только width, max-width его не отменяет. Только до 1024: выше .container уже даёт 1152 при полях 64, и это совпадает с эталоном. ------------------------------------------------------------ */ @media (max-width: 1023px) { body.pdd .container { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--page-padding); } } /* ------------------------------------------------------------ 2. ССЫЛКИ :where() обнуляет специфичность своего содержимого, поэтому правило весит столько же, сколько голый селектор a — (0,0,1). Это и нужно: цвет получают только ссылки, которым движок цвет не назначил вовсе. Любое компонентное правило вида .foo a по-прежнему сильнее и остаётся в силе. Так базовый слой не лезет в чужие компоненты — например, не перекрашивает белые ссылки на тёмных плашках. Движок голому a задаёт только text-decoration, цвета там нет. ------------------------------------------------------------ */ :where(body.pdd) a { color: var(--color-primary); } :where(body.pdd) a:hover { color: var(--color-primary-hover); } /* ------------------------------------------------------------ 3. КНОПКИ Здесь только подмена цвета: где движок красил кнопку своим синим — красим токеном. Геометрию (высоту, радиус, отступы, толщину рамки) не трогаем: она общая для всех сегментов сайта и переносится вместе с вёрсткой на этапах 3-5. Что подменяем: #2e5fda, #2196F3 frontend.css #208DD7 frontend.css, состояния hover #4e47ff skin.css — это и есть цвет на живом сайте #444bd3 skin.css, hover кнопки отзыва на var(--color-primary), белый — на --color-text-inverse и --color-surface. Поведение сохранено один в один: где движок при наведении выворачивал кнопку наизнанку — выворачиваем и мы; где заливал — заливаем. Меняется только палитра. Селекторы повторяют структуру движка, потому что цвет там назначается на разных уровнях: голый .btn_blue, footer .btn_blue, .card-item-ver-3 .buttons-new .btn_blue.invert и даже #sidebar.object_side .skid .btn_blue:hover с id. Префикс body.pdd добавляет каждому нашему селектору (0,1,1) сверх копии чужого, поэтому наш всегда сильнее — и ни одного !important. .btn_red красным не является: и frontend.css, и skin.css красят его тем же синим. Он стоит на форме отзыва (.add_rev) и в сводке рейтинга (.all_comment_stat), поэтому идёт в тех же группах. ------------------------------------------------------------ */ /* 3.1 Залитая кнопка: «Подробнее», «ЛК компании», «Оставить отзыв» */ body.pdd .btn_blue, body.pdd .btn_red, body.pdd header .btn_blue, body.pdd .cap .btn_blue, body.pdd .home .cap .btn_blue, body.pdd .add_rev .btn_red { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } /* 3.2 Её наведение — движок выворачивает кнопку наизнанку */ body.pdd .btn_blue:hover, body.pdd .btn_red:hover, body.pdd .cap .btn_blue:hover, body.pdd .home .cap .btn_blue:hover, body.pdd .add_rev .btn_red:hover { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); } /* 3.3 Контурная кнопка: «Записаться» в листинге, кнопки подвала, «Все отзывы» в сводке рейтинга */ body.pdd .btn-o, body.pdd .btn_blue.invert, body.pdd footer .btn_blue, body.pdd .card-item-ver-3 .buttons-new .btn_blue.invert, body.pdd .all_comment_stat .btn_red { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); } /* 3.4 Её наведение — движок заливает */ body.pdd .btn-o:hover, body.pdd .btn_blue.invert:hover, body.pdd footer .btn_blue:hover, body.pdd .card-item-ver-3 .buttons-new .btn_blue.invert:hover, body.pdd .all_comment_stat .btn_red:hover, body.pdd #sidebar.object_side .skid .btn_blue:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } /* 3.5 Стрелка внутри вывернутой кнопки — движок перекрашивает заливку svg отдельным правилом */ body.pdd .btn_blue.invert:hover path { fill: var(--color-text-inverse); } /* 3.6 Кнопки в карточке листинга, которые размечены тегом button, а не ссылкой: «Записаться», «Сравнить». skin.css красит их отдельно и мимо классов кнопок — .page-template-newlisting .buttons-new button:not(.favorite), специфичность (0,3,1). Наш общий селектор body.pdd .btn_blue весит (0,2,1) и проигрывает, поэтому здесь нужен свой, повторяющий чужой: класс page-template-newlisting висит на том же body, отсюда body.pdd.page-template-newlisting — (0,4,1), на один класс больше. Фон не трогаем: у движка он transparent, и это правильно — кнопка контурная. */ body.pdd.page-template-newlisting .buttons-new button:not(.favorite) { border-color: var(--color-primary); color: var(--color-primary); } body.pdd.page-template-newlisting .buttons-new button:not(.favorite):hover { background-color: var(--color-primary); color: var(--color-text-inverse); } /* ------------------------------------------------------------ 4. Вывод рейтинга — единственный по-настоящему общий компонент get_object_rating_snippet() печатает одну и ту же разметку .rating > .rating_ball + .stars + .ratingCount на всех четырёх типах страниц: в карточке листинга, в шапке карточки школы, в отзывах и в блоке школ на главной. Это и есть та вещь, которую нет смысла заводить в каждом файле по разу. Здесь только базовый слой — цвет и вес. Раскладка у каждой страницы своя и живёт в её файле: там селекторы длиннее (например body.pdd .pdd-card .pdd-intro__rating .rating) и перебивают эти без всякого !important. ------------------------------------------------------------ */ /* «58 отзывов». skin.css красит ссылку в #444bd3 — один из адресов, отмеченных в разборе от 14.08 как оставшиеся на старой палитре. Правится один раз здесь, а не четыре раза по файлам страниц. */ body.pdd .ratingCount a { color: var(--color-text-secondary); } body.pdd .ratingCount a:hover { color: var(--color-primary); } body.pdd .rating_ball .points { color: var(--color-text); } /* ------------------------------------------------------------ 5. ТИПОГРАФИКА — шкала эталона на разметке движка Шрифт (семейство) переехал разделом 1: он один на весь сайт. Здесь вторая половина типографики из design2/DESIGN.md — размер, вес, интерлиньяж и трекинг по ступеням display / headline / section / body. Зачем отдельно от файлов страниц. Свёрстанные блоки (.pdd-*) свои размеры уже носят. Но текст печатают ещё виджеты, плагины и страницы-одностраничники, которых в переносе нет вовсе: страница отзывов, тексты SEO-блоков, формы. Там до сих пор работает шкала движка — 16px/1.3 и заголовки в 30–36px. Ступени эталона ниже кладутся на голые h1…h6, поэтому берут ровно этот «ничей» текст, а вёрстка страниц перебивает их своими селекторами без !important (у неё их минимум два класса против нашего одного элемента). Трекинг −0.02em — именованное правило эталона: заголовки и цены собраны плотно, мелкий текст остаётся с обычным трекингом. ------------------------------------------------------------ */ body.pdd h1, body.pdd h2, body.pdd h3, body.pdd h4, body.pdd h5, body.pdd h6 { color: var(--color-text); letter-spacing: var(--letter-spacing-title); } /* display — заголовок страницы */ body.pdd h1 { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); } /* headline — название школы, заголовки крупных блоков */ body.pdd h2 { font-size: var(--font-size-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); } /* section — заголовки панелей и секций: вес 600, трекинг обычный */ body.pdd h3 { font-size: var(--font-size-section); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-base); } body.pdd h4, body.pdd h5, body.pdd h6 { font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-base); } /* Поля и кнопки. Форменные элементы не наследуют шрифт от body — это правило браузера, а не движка: без font-family: inherit инпуты поиска, выпадающие списки сортировки и textarea отзыва рисуются системным шрифтом форм, и на странице появляется второй шрифт. Размер намеренно не трогаем: у полей он свой в каждом блоке. */ body.pdd input, body.pdd select, body.pdd textarea, body.pdd button { font-family: inherit; } /* ------------------------------------------------------------ 6. ЗВЁЗДЫ Разметку печатает движок в двух местах — class-messia-ext-funcs.php:804 и class-messia-widget-relevant-reviews.php:85 — и обе печатают одно и то же:
…, пустая звезда тем же div с добавленным .nomark. Значение округляется вниз, дробей в разметке нет — половинок эталона движок отдать не может, поэтому переносится всё остальное: силуэт, цвет, размер и шаг. Картинку темы (icon.svg / nopoint.svg) снимаем и ставим маску --star-shape: фон красится токеном, а не файлом. Заодно уходит разнобой размеров — 15px в разметке темы против 20px в skin.css. Специфичность: у skin.css самый длинный адрес звезды — .rev_items .item .desk .mark (0,4,0), поэтому здесь два селектора: общий body.pdd .stars .mark (0,3,1) и точечный для отзывов (0,5,1). ------------------------------------------------------------ */ body.pdd .stars .mark, body.pdd .rev_items .item .desk .mark { width: var(--stars-size); height: var(--stars-size); margin-right: var(--stars-gap); /* skin.css:2473 добавляет .mark { padding: 10px } — при box-sizing: border-box звезда от этого раздувалась до 20px, и заданные 15px не работали вовсе */ padding: 0; background-image: none; background-color: var(--color-star); -webkit-mask: var(--star-shape); mask: var(--star-shape); -webkit-mask-size: contain; mask-size: contain; } body.pdd .stars .mark.nomark, body.pdd .rev_items .item .desk .mark.nomark { background-color: var(--color-star-empty); } /* Ряд звёзд: у движка .stars — флекс с margin-right 20px и разъезжается по контейнеру. Эталон держит их слитно. */ body.pdd .stars { display: inline-flex; align-items: center; line-height: 0; }