/* ============================================================ Luna СПА — свой CSS поверх Elementor. Порядок правил важен: база -> медиазапрос 1040 -> медиазапрос 680. На первом этапе проекта обратный порядок трижды ломал вёрстку (подробности в site-v3/_README_v3.md). База всегда идёт до медиазапросов. ============================================================ */ :root{ /* фоны */ --luna-cream:#FBF8F2; --luna-cream-2:#F5EFE4; --luna-cream-3:#F0E7D8; /* тёмные */ --luna-dark:#3B322A; --luna-ink:#2E2A24; /* акценты */ --luna-brown:#8A5F30; --luna-brown-dark:#664524; --luna-gold:#E0B877; /* оливково-фисташковый */ --luna-olive:#4F5A34; --luna-olive-2:#5A6539; --luna-pistachio:#DCE3C4; /* текст */ --luna-muted:#6E6255; --luna-muted-2:#736546; } /* ------------------------------------------------------------ Запасной отступ под фиксированную шапку. В эталоне первый блок каждой внутренней страницы сам держит padding-top:clamp(120px,16vw,150px). Страницы, собранные в Elementor, получают этот отступ из своей вёрстки — у них класс .elementor-page, и правило их не касается. Здесь подстраховка для обычных страниц WordPress, чтобы контент не уезжал под шапку. ------------------------------------------------------------ */ body.luna.luna-no-hero:not(.elementor-page) .site-main{padding-top:110px} /* ------------------------------------------------------------ Админ-панель WordPress и фиксированная шапка. Админ-бар сдвигает страницу через html{margin-top}, но элементы с position:fixed этого сдвига не видят и уезжают под него. Залогиненный заказчик видел бы шапку наполовину перекрытой. Высоты admin bar заданы самим WordPress: 32px и 46px на узких экранах. ------------------------------------------------------------ */ body.luna.admin-bar #hdr{top:32px} @media (max-width:782px){body.luna.admin-bar #hdr{top:46px}} /* ------------------------------------------------------------ Базовый межстрочный интервал. Hello Elementor ставит на body line-height:1.5. В эталоне на body межстрочный не задан вообще — он наследует browser default «normal». Разница вылезает везде, где дизайн не указал line-height явно: строка длительности в карточке становится 20px вместо 18, строка с ценой 45 вместо 43, и каждая карточка каталога выше эталонной на 12px. По отдельности мелочь, но это ровно та систематическая дрейфующая типографика, из-за которой перенос «почти похож». Возвращаем normal. Элементы, где дизайн задал line-height явно (1.5 / 1.6 / 1.7 инлайном), не затрагиваются — у них своё значение. ------------------------------------------------------------ */ body.luna{line-height:normal} /* ------------------------------------------------------------ Сброс отступов у заголовков и абзацев. В эталоне всё держится на `*{margin:0}`, а расстояния заданы инлайном у каждого блока. Hello Elementor добавляет собственные правила вида h1…h6{margin-top:.5rem;margin-bottom:1rem} — селектор по тегу сильнее звёздочки, поэтому сброс эталона проигрывает. Полное правило темы: h1…h6 { color:inherit; font-family:inherit; font-weight:500; line-height:1.2; margin-block-end:1rem; margin-block-start:.5rem } Отсюда сразу три расхождения: лишние 8px сверху у каждого заголовка, межстрочный 1.2 вместо browser default (имя мастера в карточке — 31px вместо 36) и насильственный вес 500. В эталоне ничего этого нет: `*{margin:0}` плюс значения по умолчанию браузера. Селекторы намеренно такой же специфичности (0,0,1), как у темы: luna.css грузится после неё и выигрывает при равенстве, а правила макета по классам (`.h2` задаёт свои line-height и font-weight) остаются сильнее и работают как задумано. ------------------------------------------------------------ */ h1,h2,h3,h4,h5,h6{margin:0;line-height:normal;font-weight:bold} p,ul,ol,figure{margin:0} /* Текст, который заказчик пишет в админке, — единственное место, где нужен свой ритм: там нет инлайновых отступов. Шаг взят из макета (16px между абзацами на странице программы). */ body.luna .luna-prose p{margin:0 0 16px} body.luna .luna-prose p:last-child{margin-bottom:0} body.luna .luna-prose h2,body.luna .luna-prose h3{margin:28px 0 12px} body.luna .luna-prose ul,body.luna .luna-prose ol{margin:0 0 16px 22px} /* ------------------------------------------------------------ УТВЕРЖДЁННОЕ ОТКЛОНЕНИЕ ОТ ЭТАЛОНА — Q19, решение от 22.09.2026. Страницы эталона расходились в акцентном коричневом: index.html — кнопки и ссылки #8A5F30, наведение #664524 program.html — кнопки и ссылки #A6763E, наведение #8A5F30 Заказчик свёл к #A6763E — это охра из ТЗ («ключевой акцент ≈ #A6763E»). Тёмный #8A5F30 остаётся состоянием наведения, как было в program.html. Сведение сделано здесь, а не правкой luna-base.css: тот файл — дословная копия принятого дизайна, и он должен оставаться сверяемым с эталоном. Все осознанные расхождения — в этом блоке, чтобы их было видно одним взглядом и можно было откатить. ------------------------------------------------------------ */ /* * Селекторы намеренно те же, что в эталоне, без префикса body.luna. * * Первая версия этого блока была написана как `body.luna a{color:#A6763E}` — * и перекрасила текст на кнопках в коричневый. Причина в специфичности: * `body.luna a` — это (0,1,2), а `.btn-book` и `.btn-primary`, задающие * белый и кремовый текст, всего (0,1,0). Правило про ссылки выиграло * у правил про кнопки, хотя речь шла о разных вещах. * * В эталоне то же правило записано как `a{...}` — (0,0,1), и кнопкам оно * не мешает. Повторяем эту запись: luna.css грузится после luna-base.css, * поэтому при равной специфичности побеждает он, а компонентные классы * остаются сильнее и сохраняют свой цвет текста. */ a{color:#A6763E} a:hover{color:#8A5F30} .btn-primary{background:#A6763E} .btn-book{background:#A6763E} .tab.active{background:#A6763E;border-color:#A6763E} :focus-visible{outline-color:#A6763E} /* ------------------------------------------------------------ Hello Elementor перекрашивает любые