/* Шапка и общесайтовые пробы оформления - диктовки Павла 14.08.2026. Файл подключается в base.html на всех страницах (glavnaya.css живёт только на главной, из-за чего липкое меню не работало на внутренних - ловили на /ceny/). Всё с пометками «Откат», как и в glavnaya.css. */ /* ── 26. Меню как на боевом, шрифт сайта, красные кнопки ─────────────── */ /* 26.1. Шрифт всего сайта - INTER (решение Павла 17.08.2026 после пробы трёх вариантов: Inter, Georgia, PT Sans). Файлы лежат у нас, в home/static/fonts - браузер посетителя за ними никуда не ходит. Inter вариативный: один файл держит все начертания от тонкого до жирного, поэтому вес задаётся обычным font-weight. Откат: вернуть сюда Tahoma и убрать оба @font-face. */ @font-face { font-family: "Inter"; src: url("../../fonts/inter-cyrillic.de93fdc85e3d.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter"; src: url("../../fonts/inter-latin.260c81a4759b.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } /* ПОЧЕМУ У ТЕЛА ДОКУМЕНТА НАПИСАНО «html body», А НЕ ПРОСТО «body» (правка 24.08.2026, задание Павла «сделай на всех страницах шрифт Inter»). ЧТО БЫЛО НЕ ТАК. Замороженный эталон css/etalon/dvizhok.css одной сокращённой записью задаёт телу и кегль, и интервал, и семейство: body { font: 16px/1.55 -apple-system, Segoe UI, Roboto, Arial, sans-serif } Сила селектора у него такая же, как была здесь - (0,0,1), - но подключается он в base.html ПОЗЖЕ этого файла, поэтому при равной силе побеждал он, и тело набиралось системным шрифтом. На главной шрифт чинило повторное правило в css/site/glavnaya.css: этот файл идёт после эталона. На внутренних страницах (цены, услуги, блог, вакансии, юридические, калькуляторы, 404, поиск) glavnaya.css не подключается - и Inter до них не доезжал. Замер 24.08.2026, ширина 1440: главная тело Inter 16px/24.8px /ceny/ тело -apple-system 16px/24.8px /blog/ тело -apple-system 16px/24.8px 404 тело -apple-system 16px/24.8px калькулятор тело -apple-system 16px/24.8px ПОЧЕМУ ХВАТАЕТ ОДНОГО СЕМЕЙСТВА. Сокращение «font:» в эталоне задаёт три вещи, а здесь пишется только семейство - значит кегль и интервал остаются эталонными. Это и нужно: замер выше показывает, что кегль и интервал тела у главной и у внутренних страниц УЖЕ совпадали (16px/24.8px, то есть 16px/1.55) - расходилось только семейство. Переносить сюда что-либо ещё из glavnaya.css не требуется, и ничего не перенесено. ЧТО СДЕЛАНО. Приписка «html» поднимает силу селектора тела с (0,0,1) до (0,0,2), и правило выигрывает у эталона независимо от порядка подключения файлов. Порядок общего слоя оформления в base.html при этом не тронут - его менять запрещено. Кнопкам и полям приписка НЕ нужна и намеренно не поставлена: у них эталон семейство не задаёт вовсе, они и раньше получали Inter на всех страницах, а лишнее усиление могло бы перебить частные правила блоков. Повторное правило в css/site/glavnaya.css после этой правки стало бессмысленным (оно ставило ровно то же семейство) и удалено там же. Откат: вернуть селектор к «body,» и вернуть в glavnaya.css удалённый раздел «Inter и на главной» - тогда внутренние страницы снова станут системным шрифтом. */ html body, button, input, select, textarea { font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* 26.2. Меню шапки компьютера - по образцу действующего academperevod.ru: пункты 16px тёмные, наведение красит бордовым, у пунктов с подменю шеврон; выпадашка белая, рамка #ccc, шириной 300, подпункты с пунктирными разделителями. Откат: удалить 26.2. */ :root { --cvet-bordo: #911a22; } body .sitemenu[data-b] { font-size: 16px; line-height: 1.3; color: var(--ink, #1b1b1b); gap: 2px 4px; } body .sitemenu[data-b] > a, body .sitemenu[data-b] .navgroup > a { padding: 10px 11px; color: var(--ink, #1b1b1b); } body .sitemenu[data-b] > a:hover, body .sitemenu[data-b] .navgroup > a:hover { color: var(--cvet-bordo); text-decoration: none; } body .sitemenu .navgroup > a::after { content: " ▾"; font-size: 11px; color: var(--muted, #63676c); } body .sitemenu .navgroup .dropdown { min-width: 300px; padding: 4px 0; border: 1px solid #ccc; border-radius: 0; background: #fff; box-shadow: 0 8px 18px -10px rgba(27, 27, 27, .35); } body .sitemenu .navgroup .dropdown a { padding: 12px 15px; border-bottom: 1px dashed #ccc; color: var(--ink, #1b1b1b); font-size: 17px; /* на два кегля меньше меню (19) - диктовка 17 */ } body .sitemenu .navgroup .dropdown a:last-child { border-bottom: 0; } body .sitemenu .navgroup .dropdown a:hover { background: #fff; color: var(--cvet-bordo); } /* второй ряд быстрых ссылок - тем же кеглем, что на действующем */ body .sitemenu.second[data-b] { font-size: 15px; } /* 26.2а. Диктовка 15: шапка по строкам, как на действующем сайте. Строка 1 (уезжает при прокрутке): логотип · подпись · адрес и часы · телефон и почта. Строки 2-3 (меню и быстрые ссылки) - в .menublok, который прилипает к верху. Откат: удалить 26.2а и вернуть прежнюю разметку шапки. */ .sitehead[data-h] { align-items: center; gap: .4rem 2rem; border-bottom: 0; padding: 6px 0 10px; margin-bottom: 0; } .sitehead .sh-slogan { max-width: 15rem; color: var(--ink, #1b1b1b); font-size: 14px; line-height: 1.35; } .sitehead .sh-adres { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; } .sitehead .sh-adres .adr { color: var(--cvet-bordo); white-space: nowrap; } .sitehead .sh-adres .chasy { color: var(--ink, #1b1b1b); } .sitehead .sh-kontakty { display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; } .sitehead .sh-kontakty .tel { color: var(--ink, #1b1b1b); font-size: 19px; font-weight: 700; text-decoration: none; white-space: nowrap; } .sitehead .sh-kontakty .pochta { color: var(--ink, #1b1b1b); font-size: 14px; text-decoration: none; } /* липкий блок меню: строки 2 и 3 всегда наверху, строка 1 уезжает */ .menublok { position: sticky; top: 0; z-index: 55; background: #fff; } body.mob .menublok { position: static; /* на телефоне своё меню и своя липкая шапка */ } /* пункты пошире, в одну строку и на одной линии, перенос вниз запрещён */ body .sitemenu[data-b] { flex-wrap: nowrap; align-items: center; border-top: 1px solid var(--line, #d9dbde); padding-top: 8px; } body .sitemenu[data-b] > a, body .sitemenu[data-b] .navgroup > a { padding: 10px 15px; white-space: nowrap; } body .sitemenu.second[data-b] { border-top: 0; padding-top: 0; } /* более явственный указатель «раскрывается вниз» */ body .sitemenu .navgroup > a::after { content: " ▼"; font-size: 9px; color: var(--ink, #1b1b1b); vertical-align: 2px; } /* открытый раздел подчёркнут красным (на действующем - чёрным) */ body .sitemenu[data-b] a.tekushchij { color: var(--cvet-bordo); text-decoration: underline; text-decoration-color: var(--cvet-bordo); text-decoration-thickness: 2px; text-underline-offset: 5px; } /* «Заказать перевод» в конце строки меню - красным, жирным */ body .sitemenu[data-b] .mzakaz[data-b] { margin-left: auto; color: var(--cvet-bordo); font-weight: 700; white-space: nowrap; } body .sitemenu[data-b] .mzakaz[data-b]:hover { text-decoration: underline; } /* ── 26.2б. Диктовка 16: строка 1 по высоте логотипа, значки, линии ────── */ /* Логотип - на 30% меньше прежнего (решение Павла 17.08.2026): было 76px, стало 53px. Освободившееся место отдано тексту строки 1 - подпись, адрес, телефон и почта стали крупнее, см. ниже. Прежняя логика «логотип до предела строки» (диктовка 17) отменена этой правкой: Павел решил, что текст рядом важнее размера знака. Откат: вернуть 76px здесь и прежние кегли текста ниже. */ .sitehead .sitelogo .znak { height: 53px; } .sitehead .sitelogo { margin-right: auto; } /* Логотип НЕ сжимать (правка 17.08.2026 вместе с новым знаком от Павла). Строка 1 - гибкая (flex), и по умолчанию любой её блок можно ужать. При высоте 76px новый логотип просит 447px ширины, свободных было 344 - и картинка молча сплющивалась: пропорции файла 5.88, на экране выходило 4.52. На глаз это читается как «шрифт стал уже», а не как поломка, так что заметить трудно - поймал замером. Теперь логотип не ужимается ни при каких обстоятельствах, а место под него освобождено у соседей (см. ниже: адресу разрешён перенос, значки 36px вместо 40, промежуток 10px вместо 12). Откат: убрать flex-shrink. */ .sitehead .sitelogo { flex: 0 0 auto; } .sitehead .sitelogo .znak { width: auto; max-width: none; } /* Ступени для узких окон. Раз логотип больше не сжимается, на узком окне переполняется уже сама строка: при окне 1009 телефон с почтой вылезали на 22px за край. Поэтому на узких окнах логотип уменьшается целиком - пропорции сохраняются, просто знак становится меньше. Это честнее, чем плющить картинку. Пороги подобраны замером: при какой ширине строка перестаёт помещаться. Откат: удалить три media-запроса ниже. */ @media (max-width: 1200px) { .sitehead .sitelogo .znak { height: 47px; } } @media (max-width: 1080px) { .sitehead .sitelogo .znak { height: 42px; } } @media (max-width: 980px) { .sitehead .sitelogo .znak { height: 36px; } } .sitehead[data-h] { align-items: center; flex-wrap: nowrap; gap: .2rem 10px; /* было 12px - ужато ради логотипа */ border-bottom: 1px solid var(--line, #d9dbde); /* единственная линия после строки 1 */ padding: 8px 0; margin-bottom: 0; } /* Подпись в две строки, как на действующем. Кегли подняты 17.08.2026 вместе с уменьшением логотипа: было 12.5px - мелко и не читалось. Стало 15px, как основной мелкий текст сайта и как подпись на действующем сайте. */ .sitehead .sh-slogan { display: flex; flex-direction: column; gap: 2px; max-width: none; font-size: 15px; line-height: 1.35; } .sitehead .sh-adres { font-size: 15px; line-height: 1.35; } /* Адресу разрешён перенос: раньше он стоял в одну строку и держал 249px ширины, из-за чего логотипу не хватало места (см. пояснение выше). Теперь длинный адрес переносится, а часы остаются отдельной строкой. */ .sitehead .sh-adres .adr { white-space: normal; max-width: 12rem; } /* значки мессенджеров - квадраты высотой с логотип */ .sitehead .sh-messendzhery { display: flex; align-items: center; gap: 8px; } .sitehead .sh-mes { display: block; width: 36px; height: 36px; } .sitehead .sh-mes .mi { display: block; width: 100%; height: 100%; } /* Телефон и почта крупнее - место освободилось после уменьшения логотипа. На действующем сайте academperevod.ru телефон 20px, вес 900; берём 21px и жирное начертание Inter. Почта была 14px - стала 15px, вровень с подписью и адресом. */ .sitehead .sh-kontakty .tel { font-size: 21px; } .sitehead .sh-kontakty .pochta { font-size: 15px; } /* линии: после строки меню - ничего, после быстрых ссылок - одна, и она же остаётся при прокрутке (это низ липкого блока) */ body .sitemenu[data-b] { border-top: 0; border-bottom: 0; padding: 10px 0; margin-bottom: 0; } body .sitemenu.second[data-b] { border-bottom: 1px solid var(--line, #d9dbde); padding-top: 0; padding-bottom: 10px; margin-bottom: 12px; } /* верхнее меню крупнее (диктовка 17) и распределено по всей длине строки */ body .sitemenu[data-b] { font-size: 19px; justify-content: space-between; } body .sitemenu[data-b] .mzakaz[data-b] { margin-left: 0; font-size: 19px; } /* быстрые ссылки мельче, чтобы помещались в одну строку */ body .sitemenu.second[data-b] { font-size: 13.5px; flex-wrap: nowrap; white-space: nowrap; } body .sitemenu.second[data-b] > a { padding: 4px 10px; } /* Ступени меню для узких окон (17.08.2026). Меню 19px требует всей ширины 1180. На окне 1085 оно переполнялось на 39px. Уменьшаем кегль ступенями, но ПОРЯДОК СОХРАНЯЕМ: пункт меню всегда крупнее своего подпункта - именно на нарушение этого порядка Павел и указал («главное меню малюсенькое, а подменю от него крупное»). Откат: см. раздел 30.4. */ /* ── 27. Ширина сайта (решение Павла 17.08.2026) ───────────────────────── Было 1120px внешних / 1088px рабочих - число досталось по наследству от прототипа на Astro, расчёта под содержимое за ним не стояло. Стало 1212px внешних / 1180px рабочих - РОВНО КАК НА ДЕЙСТВУЮЩЕМ САЙТЕ. Замер academperevod.ru 17.08.2026: контейнер `.container` там 1200px с полями по 10px, то есть содержимое стоит в 1180px, и такую ширину имеет 71 блок страницы. Промежуточное значение 1140 держалось полдня и было заменено, когда Павел сказал: «на нашем сайте сейчас 1180». Считается так: рабочая ширина = --shirina-sajta минус боковые поля (по 16px с каждой стороны, на телефоне по 12.8px). ВАЖНО: значение живёт ТОЛЬКО здесь. Все остальные файлы берут его переменной. Единственное место, где число всё ещё написано руками, - критический стиль в начале home_page.html: он рисует первый экран до загрузки файлов, переменные там ещё не объявлены. Про селектор `body .device`. Этот файл подключается в base.html РАНЬШЕ эталонных стилей, а эталонный dvizhok.css заново ставит .wrap и .device в 1120px. При равной силе селекторов побеждает тот, что ниже по порядку, то есть эталон - и на внутренних страницах ширина не менялась (поймал на /terminologicheskij-glossarij/). Приписка `body` делает наше правило сильнее, и порядок подключения перестаёт иметь значение. Телефон это не задевает: эталонное `body.mob .device{max-width:390px}` сильнее нашего правила и остаётся в силе - рамка экрана телефона как была 390px, так и есть. Откат: вернуть 1120px в этой переменной и в home_page.html. */ :root { --shirina-sajta: 1212px; } body .device, body .wrap { max-width: var(--shirina-sajta); } /* Ничего не торчит за край страницы. Ленты отзывов и писем сделаны так: у дорожки поля -22px наружу и padding 22px внутрь - это запас, чтобы тени карточек не срезались (раздел 30 glavnaya.css). Пока окно шире сайта, запас прячется в пустых полях по бокам. Но если окно уже сайта (1172), 6px этого запаса вылезают за экран, и внизу появляется горизонтальная полоса прокрутки на пустое место. Поймал замером при окне 1180. `clip` вместо `hidden` выбран намеренно: hidden создаёт контейнер прокрутки и ломает липкое меню (position: sticky), clip - нет. Откат: удалить это правило (вернётся полоса прокрутки на узких окнах). */ body .device { overflow-x: clip; } /* ── 28. Правки Павла из ШРИФТЫ_САЙТА_3.docx (17.08.2026) ──────────────── Меняем ровно то, что помечено, остальное не трогаем. Откат: удалить раздел 28. */ /* 1. Быстрые ссылки второго ряда шапки: 13.5 → 15 */ body .sitemenu.second[data-b] { font-size: 15px; } /* 33. Ссылки в подвале: синие «по умолчанию» → фирменный бордовый. Размер 13 и обычное начертание остаются. */ body .podval a, body footer a { color: var(--cvet-bordo); } /* -- 29. Кнопка заказа в шапке (задание 4.2 от 20.08.2026) --------------- Павел: «ты забыл указать, что мы делаем такую же кнопку в шапке, называем её "Заказать перевод" и делаем её такой же формы, как я описал». И отдельно: «в шапке делай уже финально, чтобы на всех страницах была такая кнопка». ПОЭТОМУ ПРАВКА ЗДЕСЬ, А НЕ В СЛОЕ ПРИМЕРКИ. Остальные правки того же круга делались в примерочном слое и действовали только на «О компании»; эту Павел велел делать сразу начисто, на всех страницах. 21.08.2026 он принял страницу целиком, слои примерки сняты, и соседние правки лежат теперь в файлах блоков папки C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\ Здешняя правка от этого не изменилась - она и была общесайтовой. ВТОРУЮ КНОПКУ НЕ ДОБАВЛЯЕМ. В шапке уже есть ссылка ровно с этим назначением - .mzakaz в конце первой строки меню, шаблон C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\pilotsite\templates\parts\shapka.html строка с ``. Надпись берётся из справочника кабинета (order_button) и сейчас как раз «Заказать перевод». Переоформляем её, а не ставим рядом вторую: - разметка не меняется вовсе, значит проверка test_glavnaya_na_o_kompanii.py, которая сверяет тело копии с телом главной строка в строку, остаётся зелёной; - окно заявки открывается тем же общим перехватом кликов по data-open-form="order", своего обработчика не нужно; - две кнопки «Заказать перевод» рядом в одной строке меню выглядели бы ошибкой. ФОРМА И ЦВЕТ - как у прочих кнопок круга: овал 999px, фирменный перелив --knopka-fon, постамент и внутренний блик. Была красная надпись без заливки - стала настоящая кнопка с белой надписью. РАЗМЕР - «по месту», и вот почему. Общий размер круга 240 x 51,2. Строка меню разложена флексбоксом с justify-content: space-between и без переносов, и запас до соседнего пункта «Контакты» невелик: 16,5 точки на 1440 и 10,5 на 1024. Кнопка шириной 240 налезла бы на «Контакты» уже на 1440. Павел разрешил прямо: «если размер не позволяет - можно делать её такой, как позволяет размер». Поэтому ширина у кнопки своя, по надписи, а поля заданы в em - тогда кнопка сама сжимается вместе с кеглем меню, который уже уменьшается ступенями на 1200 и 1080 (раздел 27 выше). Высота 51,2 - общая, как у всех кнопок круга; строка меню от этого становится выше на 6,5 точки, это единственное, что двигается. ЗАМЕР ПОСЛЕ ПРАВКИ. Кнопка и запас от «Контактов» до неё: 1440 213,05 x 51,19 кегль 19 запас 15,15 1280 213,05 x 51,19 кегль 19 запас 15,15 1200 190,61 x 51,19 кегль 17 запас 25,99 1024 173,81 x 51,19 кегль 15,5 запас 10,19 768 173,81 x 51,19 кегль 15,5 запас 3,98 Запас везде положительный, на соседний пункт кнопка не налезает. Горизонтального переполнения нет ни на одной из семи проверенных ширин (1440, 1280, 1200, 1024, 768, 414, 375): ширина документа всюду равна ширине окна. НА ТЕЛЕФОНЕ первая строка меню спрятана и открывается бургером - там кнопка тоже есть и выглядит так же: 168,20 x 51,19, овал, кегль 15 (кегль ей задаёт постоянный файл bloki/01_shapka.css, раздел про телефонное меню, его не трогаем). Откат: удалить раздел 29 - в шапке снова будет красная надпись-ссылка без заливки, и строка меню станет на 6,5 точки ниже. */ body .sitemenu[data-b] .mzakaz[data-b] { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 51.2px; padding: .55em 1.1em; border: 0; border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; background-color: var(--cvet-bordo, #8c1821); background-image: var(--knopka-fon); box-shadow: 0 3px 0 0 #6d131a, inset 0 4px 8px 4px rgba(255, 255, 255, .12); transition: background-image .25s, box-shadow .25s, transform .25s; } body .sitemenu[data-b] .mzakaz[data-b]:hover { color: #fff; text-decoration: none; background-image: var(--knopka-fon-navedenie); box-shadow: 0 4px 0 0 #6d131a, inset 0 4px 10px 4px rgba(255, 255, 255, .18); transform: translateY(-1px); } body .sitemenu[data-b] .mzakaz[data-b]:active { background-image: var(--knopka-fon-nazhatie); box-shadow: 0 0 0 0 #6d131a, inset 0 4px 8px 4px rgba(255, 255, 255, .22); transform: translateY(2px); } body .sitemenu[data-b] .mzakaz[data-b]:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body .sitemenu[data-b] .mzakaz[data-b] { transition: none; } } /* == 30. Переработка шапки. Диктовка Павла 21.08.2026, разделы А-Д ======== Файл задания: C:\Users\Павел\Claude\Projects\Вебсайт\ЗАДАНИЕ_ШАПКА_И_LENTY_21.08.md Шапка общая для всего сайта, и Павел разрешил править её начисто: «в шапке делай уже финально, чтобы на всех страницах была такая кнопка, мы же уже на главную всё переносим». Поэтому правки не в примерочном слое, а здесь, в постоянном файле, и действуют они на всех страницах. Заодно сюда переехали правки строки 1 из примерочного слоя css/site/test_o_kompanii_shapka.css: держать одно и то же число в двух местах нельзя. Слой сначала опустел, а 21.08.2026 был удалён вместе с остальными слоями примерки и строкой подключения в base.html. Откат всего раздела 30: удалить его и сценарий C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\site\shapka.js вместе со строкой его подключения в base.html. ======================================================================= */ /* -- 30.1. Шапка отзывается на прокрутку (задание, раздел А) ------------- Павел: «прокрутка вниз - первая строка уходит; малейшая прокрутка вверх - первая строка возвращается; снова вниз - снова уходит». Смысл назван им же: «если посетитель поднимается наверх, то ему нужны контакты». КАК СДЕЛАНО - ДВУМЯ ЛИПКИМИ СТРОКАМИ, БЕЗ ВЫНОСА ИЗ ПОТОКА. Обе строки шапки остаются на своих местах в потоке документа и получают position: sticky. Меняется только точка прилипания: показываем .sitehead прилипает к 0 .menublok прилипает к высоте строки 1 прячем .sitehead прилипает к «минус высота строки 1» - уезжает за верхний край окна .menublok прилипает к 0 Высоту строки 1 сценарий кладёт в переменную --shapka-stroka1. ПОЧЕМУ НЕ position: fixed. Фиксированная шапка выпадает из потока, и под неё пришлось бы подкладывать распорку в её высоту. Любая ошибка в распорке - и содержимое страницы дёргается, а Павел просил «не дёргать содержимое». У липких строк поток вообще не меняется: они занимают своё место всегда, двигается только отрисовка. ПОЧЕМУ ДВИГАЕМ top, А НЕ transform. Прилипание считает браузер, и transform у липкого элемента спорит с этим счётом: элемент уезжает, а точка прилипания остаётся на месте. Переход по top браузер ведёт так же плавно и при этом сам держит элемент у края. На телефоне ничего этого нет: строка 1 там скрыта совсем (glavnaya.css, @media max-width: 760px), а .menublok на телефоне не липкий - у телефона своя шапка .apphead. Правила ниже написаны под body:not(.mob). Откат: удалить пункт 30.1 - шапка вернётся к прежнему поведению (строка 1 уезжает и не возвращается до самого верха). */ body:not(.mob) .sitehead { position: sticky; top: 0; z-index: 56; transition: top .28s ease; } body:not(.mob) .menublok { top: var(--shapka-stroka1, 0px); transition: top .28s ease; } /* Свёрнутое состояние: строка 1 уезжает вверх, меню занимает её место. Класс ставит сценарий на , а не на : тело документа уже несёт классы страницы и раскладки, мешать в одну кучу состояние прокрутки с ними не стоит. */ /* Минус ещё одна точка - не украшение, а необходимость. За строкой 1 следит наблюдатель пересечений из C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\site\panel_svyazi.js по нему плавающая панель связи понимает, что контакты из шапки уехали, и показывается. Если строка встаёт ровно на «минус своя высота», её нижний край ложится точно на границу окна: площадь пересечения ноль, но браузер в этом положении отдаёт isIntersecting = true и больше не срабатывает. Поймано замером: наблюдатель дал одну запись ratio 1 и замолчал, панель связи не появлялась вовсе. Лишняя точка уводит строку за границу окна целиком, наблюдатель честно отдаёт isIntersecting = false, панель работает как прежде. На вид эта точка никак не сказывается: строка и так за краем экрана. Откат: убрать «- 1px» - панель связи перестанет показываться. */ html.shapka-svernuta body:not(.mob) .sitehead { top: calc(-1 * var(--shapka-stroka1, 0px) - 1px); } html.shapka-svernuta body:not(.mob) .menublok { top: 0; } @media (prefers-reduced-motion: reduce) { body:not(.mob) .sitehead, body:not(.mob) .menublok { transition: none; } } /* -- 30.2. Пять блоков строки 1 - поровну (задание, раздел Б) ------------ Блоков пять: логотип | «Бюро переводов. Профессиональный / перевод на 65 языков» | адрес с часами | три значка | телефон с почтой. БЫЛО. Свободное место раздавали два «margin: auto» - у логотипа справа (раздел 26.2б) и у блока телефона слева (раздел 26.2а), плюс третья резинка у значков из примерочного слоя. Отсюда и разнобой, который Павел увидел: зазоры 12 / 12 / 31,44 / 12 на ширине 1440. СТАЛО. Все резинки сняты, вместо них у строки justify-content: space-between - браузер сам раздаёт остаток поровну между всеми пятью. Ни одного отступа в точках не задано: изменится ширина окна или длина адреса - зазоры пересчитаются сами и останутся равными. Место под «чуть просторнее» дал перенос слова: строка 1 подписи стала «Бюро переводов. Профессиональный», строка 2 - «перевод на 65 языков» (правка в разметке home_page.html). Самая длинная строка подписи укоротилась, блок сузился, остаток ушёл в зазоры. Откат: удалить пункт 30.2 - вернутся резинки и прежний разнобой. */ body .sitehead[data-h] { justify-content: space-between; } body .sitehead .sitelogo { margin-right: 0; } body .sitehead .sh-kontakty { margin-left: 0; } body .sitehead .sh-messendzhery { margin-left: 0; } /* Адрес одной строкой - переехало из примерочного слоя без изменений. Перебивает «.sitehead .sh-adres .adr {white-space: normal; max-width: 12rem}» из раздела 26.2б, где перенос был разрешён ради места под крупный логотип. Логотип с тех пор уменьшен, место вернулось, а после переноса слова его стало ещё больше. Откат: удалить оба правила - адрес снова будет переноситься. */ body .sitehead .sh-adres { flex: 0 0 auto; } body .sitehead .sh-adres .adr { white-space: nowrap; max-width: none; } /* -- 30.3. Белая полоса шапки во всю ширину экрана (задание, раздел В) --- Павел: «белый фон строки меню тянется от края до края экрана, при любой ширине окна; сами кнопки и пункты остаются в пределах рабочей ширины сайта, но полоса под ними - во всю ширину, чтобы за неё ничего не выглядывало». ЧЕМ ЭТО БЫЛО ТРУДНО. Шапка лежит внутри «.device», а у него стоит overflow-x: clip (раздел 27 выше) - он подрезает всё, что шире 1212 точек, и без него на окнах уже 1180 внизу появляется горизонтальная полоса прокрутки. Проверено перебором: обычный псевдоэлемент шириной 100vw обрезается, box-shadow на 100vmax обрезается тоже, overflow-clip-margin не помогает. Не обрезается только position: fixed - он считается от окна, а не от «.device». Проверено на 1920, 1440, 1024 и 768, при прокрутке 0 и 1200: полоса доходит до обоих краёв, полосы прокрутки не появляется. ПОЛОСА НУЖНА ТОЛЬКО ПРИЛИПШЕЙ ШАПКЕ. Пока шапка стоит на своём месте наверху страницы, закрывать ею нечего: над шапкой ничего нет. Как только шапка прилипла к верху окна, под ней едет содержимое страницы - вот тогда полоса и включается. Прилипание отслеживает сценарий и ставит на класс shapka-prilipla. Высота полосы - высота того, что сейчас прилипло: меню плюс строка 1, если она показана, и одно меню, если свёрнута. Оба числа сценарий кладёт в переменные, поэтому полоса всегда ровно по шапке, а переход высоты идёт теми же 0,28 с, что и переезд строк, - в ногу. pointer-events: none - полоса лежит под содержимым и не должна перехватывать нажатия по краям экрана. Откат: удалить пункт 30.3 - белый фон снова будет только в рабочей ширине сайта. */ body:not(.mob) .menublok::before { content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 0; background: #fff; z-index: -1; pointer-events: none; transition: height .28s ease; } html.shapka-prilipla body:not(.mob) .menublok::before { height: calc(var(--shapka-menyu, 0px) + var(--shapka-stroka1, 0px)); } html.shapka-prilipla.shapka-svernuta body:not(.mob) .menublok::before { height: var(--shapka-menyu, 0px); } @media (prefers-reduced-motion: reduce) { body:not(.mob) .menublok::before { transition: none; } } /* -- 30.4. Кегли в шапке - всё к 16 (задание, раздел Г) ------------------ Павел свёл шапку к одному кеглю: верхний ряд (Все услуги … Контакты) 16px, жирный, чёрный выпадающее меню под «Все услуги» 16px, обычный, чёрный нижняя строка быстрых ссылок 16px, обычный, чёрный кнопка «Заказать перевод» 16px Было 19 / 17 / 15. Прежние ступени для узких окон (17px на 1200 и 15,5px на 1080) удалены: при базовом кегле 16 они делали шрифт КРУПНЕЕ базового, то есть работали наоборот. ТЕКУЩИЙ РАЗДЕЛ ОСТАЁТСЯ КРАСНЫМ. В таблице задания у верхнего ряда написан чёрный цвет - это про обычный цвет пунктов. Подчёркнутый красным открытый раздел (правило .tekushchij, раздел 26.1) - это не цвет ряда, а отметка «вы здесь», её Павел заводил отдельной диктовкой 14.08 и не отменял. Оставлено; если решит убрать - удалить правило .tekushchij. Откат: удалить пункт 30.4 - вернутся 19 / 17 / 15. */ body .sitemenu[data-b], body .sitemenu[data-b] .mzakaz[data-b] { font-size: 16px; } body .sitemenu[data-b]:not(.second) > a, body .sitemenu[data-b]:not(.second) .navgroup > a { font-weight: 700; } /* Нижняя строка быстрых ссылок - обычным начертанием: жирный там задан только у верхнего ряда. Правило выше отделено :not(.second), но у самого ряда быстрых ссылок начертание могло прийти по наследству - закрепляем. Откат: удалить правило. */ body .sitemenu.second[data-b], body .sitemenu.second[data-b] > a { font-weight: 400; } body .sitemenu .navgroup .dropdown a { font-size: 16px; font-weight: 400; } body .sitemenu.second[data-b] { font-size: 16px; } /* -- 30.5. Кнопка «Заказать перевод» и ритм шапки (задание, раздел Д) ---- Павел: надпись внутри кнопки не посередине - отцентровать; саму кнопку поставить по центру ряда меню; уравнять три расстояния по вертикали; размер кнопки подогнать под получившийся ритм. ЧТО ИМЕННО БЫЛО НЕ ТАК - ВИНОВАТ ПОСТАМЕНТ. У кнопки снизу постамент в 3 точки (тень 0 3px 0 0, раздел 29 выше) - тот же, что у всех кнопок сайта. Он рисуется НАРУЖУ, за коробку. Отсюда две беды сразу, обе по полторы точки, и обе Павел увидел: · коробка кнопки 99,19 … 150,38, а видимое пятно 99,19 … 153,38. Середина коробки 124,79 - ровно середина ряда меню, но середина ПЯТНА 126,29, то есть на 1,5 ниже. Кнопка выглядит осевшей; · надпись центруется по коробке (124,38 с учётом метрик шрифта), а не по пятну, - и оказывается на 1,9 выше его середины. ЧИНИМ ОБА, НЕ ТРОГАЯ ВИДА КНОПКИ: 1. кнопка поднимается на 1,5 точки - тогда пятно вместе с постаментом встаёт ровно по середине ряда. Подъём сделан относительным смещением (position: relative; top), а не отступом: отступ вошёл бы в расчёт высоты ряда и утянул бы за собой все три расстояния, а смещение на раскладку не влияет вовсе; 2. надпись опускается внутри кнопки на 1,9: полторы точки - половина постамента, ещё 0,4 - поправка на метрики шрифта (у строчной коробки надстрочная часть выше подстрочной, и при равных полях надпись всё равно сидит чуть выше середины). Число не выдумано: сначала поставили ровно 1,5 и замерили - осталось 16,69 сверху и 17,50 снизу, разница 0,81, её половина и есть эти 0,4. После поправки: 17,09 и 17,10. Постамент при этом остаётся наружным, как у всех прочих кнопок сайта, - вид не меняется, меняется только выключка. ТРИ РАССТОЯНИЯ. Замер до правки, ширина 1440 (линий в шапке ровно две, проверено построчным перебором точек: y = 88,0…88,5 под блоком логотипа и y = 199,0…199,5 внизу шапки): 1. линия под логотипом → строка «Все услуги» 25,19 2. строка «Все услуги» → строка «Нотариальный» 25,20 3. строка «Нотариальный» → нижняя линия шапки 10,00 Первые два равны не случайно: оба считаются как поле ряда (10) + (высота кнопки − высота строки) / 2 = 10 + (51,2 − 20,8)/2 = 25,2. То есть ритм шапки задаёт именно высота кнопки - ровно то, о чём Павел и сказал: «размер кнопки подогнать под получившийся ритм». ВЫБРАН РИТМ 25,2, а не какое-то меньшее число. Причина: кнопка не должна быть меньше кнопки переключателя «Частным клиентам» (это правило Павла из круга 20.08, там же общий размер кнопок 240 x 51,2). При 51,2 ритм получается 25,2 - меньше нельзя, иначе кнопка станет ниже общего размера. Значит править надо только третье расстояние: нижнее поле строки быстрых ссылок 10 → 25,2. Шапка от этого становится выше на 15,2 точки, и всё содержимое страниц опускается на столько же - это единственное следствие. Откат: удалить пункт 30.5 - вернутся 10 точек внизу и прежняя выключка кнопки. */ body .sitemenu[data-b] .mzakaz[data-b] { /* 1. Кнопка выше на высоту половины постамента - пятно по центру ряда. */ position: relative; top: -1.5px; /* 2. Надпись ниже на столько же - она по центру пятна, а не коробки. */ padding: calc(.55em + 1.9px) 1.1em calc(.55em - 1.9px); } /* 3. Третье расстояние подтянуто к первым двум. */ body .sitemenu.second[data-b] { padding-bottom: 25.2px; } /* -- 30.6. Узкие окна: как меню держится без уменьшения кегля ----------- Прежние ступени уменьшали кегль меню (17px на 1200, 15,5px на 1080). Павел назвал 16 для всех, значит кегль на узких окнах трогать нельзя, а помещаться меню всё равно должно. Место берём из полей между пунктами, а когда и их не хватает - разрешаем перенос. ЗАМЕР, где меню перестаёт помещаться в одну строку при кегле 16: 1280 запас до кнопки 30,7 помещается 1180 запас 26,1 помещается 1080 запас 11,8 помещается 1024 переполнение 1,3 НЕ помещается 768 переполнение 257,3 не помещается с большим запасом СТУПЕНЬ 1 (не шире 1080). Боковые поля пунктов 15 → 8. Пунктов семь, значит экономия 7 x 14 = 98 точек - этого хватает до 930 точек ширины окна. Кегль остаётся 16. СТУПЕНЬ 2 (не шире 940). Даже при нулевых полях одни только надписи с кнопкой требуют около 880 точек, а колонка на 768 - всего 736. Дальше ужимать нечего, поэтому строке разрешён перенос: пункты переносятся и выключаются по центру, между строками 10 точек. Это честнее, чем обрезать меню краем «.device», как было раньше: до этой правки на 768 меню вылезало за колонку на 257 точек и просто пряталось под обрез. Три расстояния из пункта 30.5 считаны для одной строки меню; на узких окнах, где строка переносится, ритм задаёт уже сам перенос. Это ожидаемо: раскладка там другая. Откат: удалить пункт 30.6 - на окнах уже 1030 меню снова полезет за край и будет обрезано. */ @media (max-width: 1080px) { body .sitemenu[data-b]:not(.second) > a, body .sitemenu[data-b]:not(.second) .navgroup > a { padding-left: 8px; padding-right: 8px; } } @media (max-width: 940px) { body .sitemenu[data-b]:not(.second) { flex-wrap: wrap; justify-content: center; row-gap: 10px; } } /* 30.6а. Те же две строки шапки на узких окнах. Ступени кегля, которые я убрал в пункте 30.4, держали не только верхний ряд меню: за их счёт помещались и строка 1, и быстрые ссылки. Без них обе полезли за колонку - замер до правки: ширина окна строка 1 быстрые ссылки 1080 0 11,1 1024 0 67,1 940 21,9 151,1 900 61,9 191,1 768 193,9 323,1 Раньше это не бросалось в глаза: «.device» с overflow-x: clip просто срезал лишнее, и на 768 у строки 1 пропадал телефон с почтой, а у быстрых ссылок - последние две ссылки. Прятать контакты под обрез нельзя. Обеим строкам разрешён перенос ровно с той ширины, где они перестают помещаться: быстрым ссылкам с 1080, строке 1 с 940. Кегль не трогаем - Павел назвал 16 для всех. Проверено замером после правки: переполнения нет ни у одной из трёх строк шапки на 1920, 1600, 1440, 1280, 1080, 1024, 940, 900 и 768. Откат: удалить пункт 30.6а - строки снова будут срезаться обрезкой. */ /* Ступень сдвинута 1080 -> 1090 при переводе сайта на Inter (24.08.2026). Порог 1080 был замерен системным шрифтом. Inter шире, и быстрые ссылки перестают влезать раньше. Замер на /ceny/, вылет правого края последней ссылки за коробку ряда, в точках: ширина системный Inter до правки Inter после правки 1100 0 0 0 (одна строка) 1090 0 1,1 0 (перенос) 1085 0 6,1 0 (перенос) 1081 0 10,1 0 (перенос) 1080 перенос перенос перенос Вылет не давал полосы прокрутки - его прятал обрез «.device» (overflow-x: clip, раздел 27), то есть последняя ссылка тихо резалась краем. Прятать ссылки под обрез нельзя - причина та же, что в 30.6а. Откат: вернуть 1090px на 1080px. */ @media (max-width: 1090px) { body .sitemenu.second[data-b] { flex-wrap: wrap; justify-content: center; row-gap: 6px; } } /* Правило переноса строки 1 на окнах уже 940 переехало 21.08.2026 в файл шапки css/site/bloki/01_shapka.css, раздел С1 - туда же, куда из glavnaya.css переехало само правило `body .sitehead[data-h]`. Оба правила одинаковой силы, и кто из них победит, решает порядок файлов; врозь они жить не могут - оставь это здесь, и на окнах 761-940 строка 1 перестала бы переноситься и полезла бы за край колонки. Замеры и причина переноса - выше, в пояснении к пункту 30.6а. */ /* ═══════════════════════════════════════════════════════════════════════ 31. Обёртка шапки
- без собственной коробки ─────────────────────────────────────────────────────────────────────── Задание 21.08.2026, пункт 1: на сайте не было ни одного тега
. Шапка (логотип, контакты, меню) лежала простыми div-ами, да ещё и внутри
- то есть меню считалось содержимым страницы. ПОЧЕМУ НЕ ПРОСТО ОБЕРНУТЬ. Обе строки шапки липкие: .sitehead - position: sticky (раздел 30.1 выше) .menublok - position: sticky (раздел 12 выше) Липкий элемент ездит в пределах своего РОДИТЕЛЯ. Обычный
высотой в саму шапку стал бы ему клеткой: меню отлипало бы сразу за нижним краем шапки вместо того, чтобы держаться у верха всю страницу. Замер до правки (окно 1440x900, главная): прокрутка 400 .menublok.top = 0 прокрутка 2000 .menublok.top = 0 прокрутка 6000 .menublok.top = 0 С обычным
на 2000 и 6000 меню уехало бы за край экрана. ЧТО ДЕЛАЕТ display: contents. Обёртка не создаёт коробки вовсе: её дети участвуют в раскладке так, как будто обёртки нет. Точка отсчёта липких строк остаётся прежней (.wrap на обычных страницах, .device на главной), раскладка не меняется ни на точку, а в разметке и в дереве доступности появляется ориентир «banner». Проверено замером после правки: координаты .sitehead, .menublok, .hero, main и подвала совпали с замером до правки до сотой доли точки, а поведение липких строк на 400 / 2000 / 1900 / 6000 - один в один. Селекторы правил оформления от обёртки не пострадали: ни одного правила вида `main > .apphead`, `main > .sitehead`, `main > .menublok` в проекте нет (проверено поиском), а правила `main > .blk`, `main > .track`, `main > .galwrap` целятся в секции содержимого - они как были, так и остались прямыми детьми
. Откат: удалить этот раздел и теги
в base.html и home_page.html. ═══════════════════════════════════════════════════════════════════════ */ .sajt-shapka { display: contents; } /* На телефоне «.wrap» - колонка flex, и правило эталона `body.mob .wrap > *{flex:0 0 auto}` (etalon/dvizhok.css) целится в прямых детей. При display: contents дети шапки становятся элементами этой колонки, но под селектор `.wrap > *` уже не подпадают - обёртка стоит между ними. Без этой строки меню на телефоне могло бы сжаться: у элемента flex по умолчанию flex-shrink: 1. Повторяем эталонное правило для детей обёртки - вид не меняется, поведение возвращается к прежнему. */ body.mob .sajt-shapka > * { flex: 0 0 auto; } /* ═══════════════════════════════════════════════════════════════════════ 32. Ссылка «Перейти к содержимому» ─────────────────────────────────────────────────────────────────────── Задание 21.08.2026, пункт 2. Разметка - первой строкой тела документа в C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\pilotsite\templates\base.html Глазами её не видно, пока на неё не перешли клавишей. Спрятана уводом за верхний край окна, а НЕ через display:none / visibility:hidden / hidden - спрятанное теми способами выпадает из порядка обхода клавишей, и ссылка не работала бы вовсе. :focus-visible, а не :focus - чтобы ссылка не выскакивала от щелчка мышью по пустому месту. z-index выше шапки (у .menublok 55, у .sitehead 56, у .apphead 60), иначе на прокрученной странице ссылка вылезла бы ПОД липкой шапкой. Откат: удалить этот раздел и строку разметки в base.html. ═══════════════════════════════════════════════════════════════════════ */ .k-soderzhimomu { position: absolute; top: 0; left: 8px; z-index: 100; transform: translateY(-120%); padding: 10px 16px; background: #8c1821; color: #fff; font: 600 15px/1.2 inherit; text-decoration: none; border-radius: 0 0 6px 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); } .k-soderzhimomu:focus-visible { position: fixed; transform: translateY(0); outline: 2px solid #fff; outline-offset: -5px; } /* ═══════════════════════════════════════════════════════════════════════ 33. «vizualno-skryto» - видно чтению с экрана, не видно глазам ─────────────────────────────────────────────────────────────────────── Задание 21.08.2026, пункт 7: у восьми таблиц цен на главной не было подписи . Кто читает таблицу с экрана, слышал «таблица, 5 столбцов» и никак не мог узнать, о каких услугах эта таблица - а их на странице восемь подряд. ПОЧЕМУ ПОДПИСЬ СПРЯТАНА. Над каждой таблицей уже стоит видимый заголовок

, и его же текст идёт в . Показать подпись значило бы напечатать заголовок дважды - то есть изменить вид принятой главной. Прячем от глаз, оставляем чтению с экрана. ПОЧЕМУ НЕ display:none и не visibility:hidden - ими прячут ОТ ВСЕХ, включая чтение с экрана; подписи бы просто не стало. Приём ниже (коробка 1x1 точка + clip-path) прячет только от глаз - он же используется во всех известных наборах оформления под именем sr-only. white-space: nowrap нужен, чтобы длинный текст не переносился внутри коробки в одну точку шириной и не растягивал страницу. Класс общий: он пригодится любой будущей странице, а не только ценам. Откат: удалить этот раздел и теги в home/templates/home/home_page.html и home/templates/home/parts/price_table_directions.html ═══════════════════════════════════════════════════════════════════════ */ .vizualno-skryto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Кнопка «Наверх» на компьютере ────────────────────────────────────── Пункт 2.16 сводного пакета (К2-46), диктовка Павла 08.09.2026: «серенькую кнопку прилепить справа, в правом верхнем углу, около "Заказать перевод", немного вынесенную за поле». Стоит последней в строке меню, сразу за «Заказать перевод», и выходит за правое поле на 10 точек - это и есть «немного вынесенная». Серая, без заливки: главное действие строки - «Заказать перевод», и кнопка возврата не должна с ним спорить. На телефоне не показывается: там своя кнопка в шапке (01_shapka.css, раздел Т9). Откат: удалить этот раздел и кнопку .naverh--desk из parts/shapka.html. */ body .sitemenu .naverh--desk { flex: 0 0 auto; margin-right: -10px; margin-left: 6px; padding: 2px 4px; background: none; border: 0; line-height: 1; cursor: pointer; color: inherit; } body .sitemenu .naverh--desk .ai { display: block; width: 22px; height: 22px; } body.mob .naverh--desk { display: none; } /* Наведение - только при настоящем курсоре (правило 4.5 в bloki/00_obshchee.css: на сенсорном экране :hover не отпускает). */ @media (hover: hover) and (pointer: fine) { body .sitemenu .naverh--desk:hover .ai { opacity: .7; } }