/* ═══════════════════════════════════════════════════════════════════════ Первый экран ──────────── H1, слоган, вводный абзац, плашки с цифрами, кнопки действий, красная полоса 24/7. ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА. Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы над разными блоками можно было работать одновременно и правки не затирали друг друга. ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ: 1. Пиши сюда только то, что относится к этому блоку. Общее - карточки, тени, ритм между блоками, заголовки разделов - в 00_obshchee.css. 2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает их при равной силе селектора. Но эталонные стили (css/etalon/*) написаны через [data-h] и [data-b] - против них пиши той же формы селектор или сильнее, иначе правило молча проиграет. 3. Каждой правке - комментарий: что меняем, по чьей команде, и строка «Откат: …», чтобы можно было вернуть как было. 4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них ссылается манифест контрольных сумм. 5. Проверять замером на живой странице, а не на глаз. ═══════════════════════════════════════════════════════════════════════ */ /* ── Кнопка с градиентом ───────────────────────────────────────────────── Правило переехало в 00_obshchee.css, раздел 2: Павел 18.08.2026 велел расшарить градиент на ВСЕ кнопки, а не только на «Калькулятор заказа». Держать его здесь, в файле первого экрана, стало неправильно - оно больше не про первый экран. */ /* ── Первый экран отодвинут от меню (диктовка Павла 18.08.2026) ─────────── Павел: «давай отодвинем H1 вместе с блоками от главного меню, сейчас прилеплено; сделай хотя бы вдвое больше расстояния, даже втрое». Было около 17px: 12px нижний отступ строки быстрых ссылок плюс 4,8px верхний отступ первого экрана. Стало 51px - ровно втрое. Число в правиле 51, а не 46: нижний отступ меню и верхний отступ первого экрана схлопываются (берётся больший из двух), поэтому на экране получается ровно столько, сколько здесь написано. Отступ задан первому экрану, а не меню: меню липкое, его отступы участвуют в расчёте прилипания, трогать их рискованно. Откат: удалить правило. */ .hero[data-h] { margin-top: 51px; } body.mob .hero[data-h] { margin-top: 20px; /* на телефоне втрое от прежних 7 */ } /* ── Линия между шестью плашками и рядом 24/7 убрана (диктовка Павла 18.08.2026) Павел: «вот эта вот линия, которая отделяет первые шесть и остальные четыре, - уберём». О какой линии речь. В первом экране над линией стоят шесть плашек с цифрами - 2007, 65, 1500+, 1016, 131, 99 %; под линией идёт ряд из четырёх плашек - 24/7, 2 минуты, Онлайн, 100 %. Это ровно то деление «первые шесть и остальные четыре», о котором сказал Павел. Рисует линию эталон: .buls[data-h].common{border-top:1px solid var(--line)} в css/etalon/glavnaya-a.css, и glavnaya.css в разделе 16 прямо называет её «линия между шестью плашками и рядом 24/7». Замер до правки (окно 1440): серая линия #d9dbde толщиной 1px во всю рабочую ширину 1180px, на отметке 655px от верха страницы. Линии в шапке не тронуты: под строкой 1 (логотип, адрес, телефон) и под строкой быстрых ссылок. Ни одна из них не делит ничего на шесть и четыре, поэтому под диктовку они не подпадают. Воздух остаётся прежним: расстояние держат отступ hero снизу и внутренний отступ полосы (переменная --vozduh-linii - 42px на компьютере, 22px на телефоне). Исчезает только волосок, ряды не сдвигаются. Приписка `body` намеренная: эталон пишет .buls[data-h].common, наш файл подключается позже и перебил бы его и так, но с `body` правило заведомо сильнее и не зависит от порядка подключения. Откат: удалить правило - линия вернётся. */ body .buls[data-h].common { border-top: 0; } /* ── Уголок на плашках 24/7 убран (диктовка Павла 18.08.2026) ──────────── Павел: «и уголок тоже уберём на 24/7 и на остальных в том же ряду». Уголок - квадратная скобка 18x18 фирменным красным #8c1821 в левом верхнем углу плашки, как скобки логотипа. Появился по диктовке 14.08.2026, задан в glavnaya.css, раздел 25.2. Убираем у всех четырёх плашек ряда, а не только у «24/7»: 24/7, 2 минуты, Онлайн, 100 %. Как убрано: отменён сам псевдоэлемент (content: none). Это надёжнее, чем обнулять border: не остаётся ни отрисовки, ни коробки 18x18. Правило в glavnaya.css не трогаем - файл общий, над ним идёт работа. Сила селектора. У правила в glavnaya.css вес (0,4,1): .buls[data-h].common .bul::before. Здесь добавлена приписка `body`, вес (0,4,2) - перебивает при любом порядке подключения файлов. Проверено замером: после правки content у ::before равен none на всех четырёх плашках, и на компьютере, и на телефоне. Строка .buls[data-h].common .bul{position:relative} в glavnaya.css остаётся: она ничего не рисует и нужна, если уголки решат вернуть. Откат: удалить правило - уголки вернутся. */ body .buls[data-h].common .bul::before { content: none; } /* ── Плашки 24/7 уменьшены на 20 % на телефоне (диктовка Павла 18.08.2026) ─ Павел: «плашки 24/7, 2 минуты, Онлайн - тоже нужно сильно сократить. Давай за счёт уменьшения шрифта: процентов на двадцать точно уменьшить». Речь про ряд из четырёх плашек с крупными цифрами - 24/7, 2 минуты, Онлайн, 100 %. Уменьшено ровно на 20 % всё, что задаёт размер плашки: цифра, подпись, отступ под цифрой и внутренние поля. Междустрочный интервал отдельной строкой не задаётся: эталон пишет его безразмерным (--lh-num равен 1, --lh-body равен 1,35), поэтому он ужимается вместе с кеглем сам. Замер на телефоне 375 до правки: цифра 20px/20px, подпись 13,5px/18,2px, поля плашки 16px сверху и снизу, 18px по бокам. Только телефон: класс body.mob ставит сценарий auto_mob.js по условию max-width 640px, на компьютере его нет - там всё остаётся как было (цифра 28px, подпись 15px, поля 16/18). Сила селектора. Кегли задаёт эталон - .buls[data-h].common .bn[data-h], вес (0,5,0); поля - glavnaya.css, .buls[data-h] .bul[data-h], вес (0,4,0). Здесь добавлена приписка body.mob, вес (0,5,1) - перебивает при любом порядке подключения файлов. Откат: удалить три правила ниже - вернутся 20px, 13,5px и поля 16/18. */ body.mob .buls[data-h].common .bn[data-h] { font-size: 16px; /* было 20px */ margin-bottom: 3.2px; /* было 4px */ } body.mob .buls[data-h].common .bt[data-h] { font-size: 10.8px; /* было 13,5px */ } body.mob .buls[data-h].common .bul[data-h] { padding: 12.8px 14.4px; /* было 16px 18px */ } /* ── Первый экран спрессован на телефоне (диктовка Павла 18.08.2026) ────── Павел: «и сделать интервал между блоками чуть поменьше, чтобы это всё немножко спрессовать». Ужаты пять расстояний первого экрана, все замеры - телефон 375. 1. Между текстом (H1, слоган, вводный абзац) и сеткой из шести плашек: 9,6px -> 8px -> 12px. Задавал эталон, body.mob .hero[data-h]{gap:.6rem}. 2. Между шестью плашками: 14px -> 10px -> 12px. Задавал glavnaya.css, body.mob .hright[data-h]{gap:14px}. 3. Между первым экраном и рядом 24/7: было 44px (22px нижний отступ hero плюс 22px верхний внутренний отступ ряда), стало 28px (14 плюс 14). 4. Между двумя строками ряда 24/7: 16px -> 12px. Только у ряда .common; буллеты аудиторий (.buls.seg) не тронуты, у них свои блоки-файлы. 5. Под рядом 24/7, до переключателя «Частным / Компаниям»: 28,8px -> 18px. 6. Под H1: 8px -> 12px. Задавал эталон через переменную --sp-3; сама переменная не тронута - она держит отступы во многих других блоках сайта, поэтому число задано здесь, в границах мобильного первого экрана. ПРАВКА 25.08.2026. Главную сопоставили со страницей «Технический перевод» на телефоне 375: там шаг первого экрана - 12px везде, а здесь три интервала выбивались - 8px под текстом, 10px между плашками и 8px под H1. Каноническим для этих трёх принято 12px, страница услуги остаётся эталоном шага. Остальные расстояния первого экрана (14px, 18px и прочие) не тронуты: их к 12px никто не сводил. Отступ первого экрана от меню (margin-top 20px выше в этом файле) не тронут: он задан отдельной диктовкой «отодвинем H1 от главного меню». Селектор body.mob .hero[data-h] встречается в файле второй раз намеренно - у той правки свой откат, и мешать их в одно правило нельзя. Компьютер не затронут: все числа под body.mob. Откат: удалить четыре правила ниже - вернутся 9,6 / 14 / 22+22 / 16 / 28,8 и отступ под H1 из переменной --sp-3. Откат только правки 25.08.2026 (без отката всего уплотнения): вернуть gap 8px у .hero, gap 10px у .hright и удалить правило с margin-bottom у H1. */ body.mob .hero[data-h] { gap: 12px; /* было 9,6px, затем 8px */ margin-bottom: 14px; /* было 22px */ } body.mob .hright[data-h] { gap: 12px; /* было 14px, затем 10px */ } body.mob .hero[data-h] .hleft[data-h] h1[data-h] { margin-bottom: 12px; /* было 8px из переменной --sp-3 */ } body.mob .buls[data-h].common { padding-top: 14px; /* было 22px */ gap: 12px; /* было 16px */ margin-bottom: 18px; /* было 28,8px */ } /* ── Кнопки заказа выше на телефоне: стилями не переставить ─────────────── Диктовка Павла 18.08.2026: «кнопки "Калькулятор заказа" и "Онлайн заявка" перенести повыше - поместить между первым набором из шести плашек и вторым рядом из четырёх. Чтобы на компьютере они были в одном месте, а на телефоне - в другом». Правило не написано, и вот почему. Свойство order переставляет только соседей внутри одного флекса или грида. Здесь родители разные: main > section.hero шесть плашек main > div.buls.common ряд 24/7 из четырёх main > div.segwrap переключатель аудиторий main > div.track > div.rail > section.segblock > div.acts кнопки Кнопки лежат на три уровня глубже - внутри дорожки-слайдера. Разложить дорожку через display:contents нельзя: .track прячет переполнение, и ему сценарием проставляется высота, а .rail - грид из двух колонок по 100 %, который и переключает «Частным / Компаниям». Разложив их, мы сломаем сам переключатель. Второе, важнее техники: кнопки у аудиторий разные. «Калькулятор заказа» у частных ведёт на /kalkulyator-perevoda-lichnyh-dokumentov/, у компаний - на /kalkulyator-pismennogo-perevoda/. Над переключателем аудитория ещё не выбрана, поэтому перед переносом надо решить, куда ведёт кнопка там. Что нужно в разметке (home_page.html): отдельная пара кнопок между закрывающим тегом первого экрана и блоком .buls.common, а внутри дорожки оставить то, что зависит от аудитории. Решение и правка - за Павлом: шаблон правят другие. Откат: нечего откатывать, правил здесь нет. */ /* ── H1 и слоган по центру на телефоне (диктовка Павла 18.08.2026, пункт 3) ─ Павел: «Бюро переводов с нотариальным заверением в Москве - по центру; "Точный перевод точно в срок" - по центру; это касается только мобильной версии». Центруются ровно две строки первого экрана: заголовок H1 и слоган под ним. Вводный абзац («Перевод документов и текстов на 65 языков...») не тронут - Павел его не называл, а длинный текст по центру читается хуже. Замер на телефоне 375 до правки: у H1 и у слогана text-align: start, то есть по левому краю. После правки у обоих center. Только телефон. Класс body.mob ставит сценарий auto_mob.js по условию max-width 640px; на компьютере (замер 1440) у H1 и слогана остаётся start, как Павел и сказал - «компьютер не трогать». Про подсветку слогана. Слоган работает раскрывашкой: 00_obshchee.css красит его фирменным красным и раздвигает минусовыми полями на 6px в обе стороны (.hero .hleft .slogan.raskryvashka). Выключка на это не влияет: коробка строки остаётся во всю ширину колонки, по центру едет только сам текст внутри неё. Полоска подсветки при наведении по-прежнему совпадает с шириной заголовка. Сила селектора. H1 задаёт эталон - h1[data-h], вес (0,1,1), и 00_obshchee.css - body.mob h1[data-h], вес (0,2,2). Слоган - эталон .slogan[data-h], вес (0,2,0). Здесь вес (0,4,2) и (0,5,1) соответственно - перебивает при любом порядке подключения файлов. Откат: удалить правило - обе строки вернутся к левому краю. */ body.mob .hero[data-h] .hleft[data-h] h1[data-h], body.mob .hero[data-h] .hleft[data-h] .slogan[data-h] { text-align: center; } /* ── Плашки первого экрана по центру (диктовка Павла 18.08.2026, пункт 4) ── Павел: «Плашки 2007, 65 000+, 1016 и так далее - всё хорошо, шрифт хороший, всё ровно; цифры и текст сделать по центру, и это касается как десктопной версии, так и мобильной. То есть 2007, потом заголовок "Старт работы компании", потом "19 лет накопления опыта и терминологии" - по центру в десктопной; в мобильной то же; когда кликаем на мобильной - тоже всё по центру». Речь про шесть плашек справа от H1 - 2007, 65, 1500+, 1016, счётчик страниц, 99 %. В каждой три строки: крупная цифра (.pnum), подпись (.pbold) и текст, который раскрывается по нажатию (.ptext). Все три центруются. Это единственная правка сегодняшней диктовки, которая меняет и компьютер: пункты 3 и 7 - только телефон. Поэтому здесь приставка body, а не body.mob. Кегли и высоты не тронуты намеренно - Павел сказал «шрифт хороший, всё ровно». Замер до и после совпадает: компьютер 1440 - цифра 28px, подпись 16px, текст 15px; телефон 375 - 20px, 14px, 13,5px. Почему три селектора. 1. Кнопка .pltog - в ней лежат цифра и подпись; эталон прижимает её содержимое влево (.pltog[data-h]{text-align:left}). 2. Крупная цифра .pnum - у неё СВОЁ правило влево в glavnaya.css: .hero .pl .pnum{text-align:left}, вес (0,3,0). Наследованием его не перебить, поэтому цифра названа отдельно. Проверено замером: без этой строки .pbold и .ptext центруются, а .pnum остаётся left. В glavnaya.css при этом правиле стоит пометка, что слева выбрал сам Павел - «либо всё слева, либо всё по центру». Сегодняшняя диктовка отменяет тот выбор в пользу центра; сам файл glavnaya.css не трогаем, над ним идёт работа. 3. Раскрывающийся текст .ptext лежит НЕ внутри кнопки, а рядом с ней - выключку кнопки он не наследует. Подпись .pbold отдельной строки не требует: своей выключки у неё нет, она наследует от кнопки. Замер до правки: компьютер 1440 - .pltog left, .pnum left, .pbold left, .ptext start; телефон 375 в раскрытом виде - то же самое. После правки везде center, включая раскрытый .ptext на телефоне. Знак «+» в углу плашки на телефоне (.chev) выключка не сдвигает: он position: absolute и прибит к правому краю кнопки (и сегодня скрыт правилом «раскрывашки без плюсиков» в 00_obshchee.css). Сила селектора. Самое сильное правило «влево» - glavnaya.css, .hero .pl .pnum, вес (0,3,0). Здесь вес (0,6,1) - перебивает при любом порядке подключения файлов. Откат: удалить правило - содержимое плашек вернётся к левому краю. */ body .hero[data-h] .hright[data-h] .pl[data-h] .pltog[data-h], body .hero[data-h] .hright[data-h] .pl[data-h] .pnum[data-h], body .hero[data-h] .hright[data-h] .pl[data-h] .ptext[data-h] { text-align: center; } /* ── Буллеты аудиторий приведены к плашкам 24/7 (Павел 18.08.2026, пункт 7) ─ Павел: «Блок 24/7, две минуты онлайн - супер по шрифту, прям то, что надо. Тебе нужно сделать такого же размера блок "от одного дня", "бесплатно", "5 нотариусов" - ровно такого же размера». «От 1 дня», «Бесплатно», «5 нотариусов» - это буллеты аудиторий (.buls.seg): шесть плашек под кнопками у «Частным» и шесть у «Компаниям». Эталон - ряд .buls.common: 24/7, 2 минуты, Онлайн, 100 %. Его сегодня уменьшили на 20 % (правило выше в этом файле), а буллеты аудиторий остались в прежнем кегле - отсюда и разнобой, который увидел Павел. Замер эталона на телефоне 375 (снят со страницы, не из кода): · крупная цифра .bn - 16px, межстрочный 16px, отступ снизу 3,2px, цвет rgb(27,27,27), насыщенность 700; · подпись .bt - 10,8px, межстрочный 14,58px, цвет rgb(61,66,71), насыщенность 400; · поля плашки - 12,8px сверху и снизу, 14,4px по бокам. Замер буллетов аудиторий до правки: цифра 20px, отступ 4px; подпись 13,5px; поля 16px и 18px. Цвета и насыщенности уже совпадали с эталоном - правились только размеры. Строка .bb - средняя жирная строка, она есть только у «Компаниям» («лексических единиц», «экономии бюджета», «на договор и NDA»). В эталоне такой строки нет, поэтому она уменьшена на те же 20 %: 14px -> 11,2px, отступ 2,4px -> 1,92px. Иначе она осталась бы почти вровень с цифрой. Междустрочный интервал отдельно не задаём: эталон пишет его безразмерным (--lh-num равен 1, --lh-body равен 1,35), поэтому он ужимается вместе с кеглем сам. Только телефон. На компьютере (замер 1440) оба семейства и так одинаковы - цифра 28px, подпись 15px, поля 16/18 - равнять нечего, и пункт 7 в диктовке отнесён к телефону. Сила селектора. Кегли задаёт эталон - .buls[data-h].seg .bn[data-h], вес (0,5,0); поля - glavnaya.css, .buls[data-h] .bul[data-h], вес (0,4,0). Здесь приставка body.mob, вес (0,6,1) - перебивает при любом порядке подключения файлов. Откат: удалить четыре правила ниже - вернутся 20px, 14px, 13,5px и поля 16/18. */ body.mob .buls[data-h].seg .bn[data-h] { font-size: 16px; /* было 20px - как у ряда 24/7 */ margin-bottom: 3.2px; /* было 4px */ } /* Средняя строка .bb доведена до мелкой строки образца (правка 18.08.2026). Образец, к которому приводятся буллеты, - плашка «24/7»: крупная строка 16px/700, мелкая 10,8px/400 с интерлиньяжем 1,35 (14,58px). Замер до правки, телефон 375: .bb - 11,2px, насыщенность 650, интерлиньяж 14px. Мимо образца по всем трём числам. Прежняя правка считала .bb «подзаголовком» и просто уменьшила её на 20 % вместе с остальным; в образце такой строки нет, и равнять её надо не на 20 %, а на мелкую строку. Стало: 10,8px / 400 / 1,35 - ровно как .bt. ЧЕМ ЗА ЭТО ПЛАТИМ - сказать Павлу. Строка .bb есть только у «Компаниям» («лексических единиц», «экономии бюджета», «на договор и NDA»). Теперь она по кеглю, насыщенности и интерлиньяжу СОВПАДАЕТ со строкой .bt под ней, то есть перестаёт читаться как подзаголовок: буллет выглядит как цифра и два одинаковых мелких абзаца. Вёрстка при этом не ломается - замер высот буллетов «Компаниям» на телефоне: было 60,7 / 60,7 / 74,7 / 74,7 / 74,7 / 74,7, стало 61,3 / 61,3 / 75,8 / 75,8 / 75,8 / 75,8 - прибавка в 1,1 точки от интерлиньяжа (14 -> 14,58), переносов строк не прибавилось, ширины прежние. Если Павел захочет вернуть средней строке различимость, самый дешёвый способ - оставить кегль 10,8px, но насыщенность 700 (как у крупной строки образца): размер тогда останется по образцу, а вес отличит подзаголовок. Откат: вернуть font-size 11.2px, снять font-weight и line-height. */ /* ОТМЕНЕНО 19.08.2026. Строка .bb возвращена к 11,2px / 650. Причина отмены: во второй половине диктовки Павел назвал буллеты «Компаниям» ОБРАЗЦОМ для карточек отраслей, преимуществ бизнесу и акций - «такой же шрифт, где 150 400, до 70 %». Карточки к этому образцу уже приведены (11,2px / 650), и если саму .bb опустить до 10,8 / 400, образец разъедется с тем, что по нему выставлено. Второй довод - тот самый, который автор правки сам записал ниже как «сказать Павлу»: при 10,8 / 400 средняя строка перестаёт отличаться от пояснения под ней, и буллет читается как цифра и два одинаковых мелких абзаца. Откат: вернуть font-size 10.8px, font-weight 400, line-height 1.35. */ body.mob .buls[data-h].seg .bb[data-h] { font-size: 11.2px; font-weight: 650; line-height: 1.25; margin-bottom: 2.4px; } body.mob .buls[data-h].seg .bt[data-h] { font-size: 10.8px; /* было 13,5px - как у ряда 24/7 */ } body.mob .buls[data-h].seg .bul[data-h] { padding: 12.8px 14.4px; /* было 16px 18px - как у ряда 24/7 */ } /* ── Тень буллетов аудиторий не режется дорожкой (Павел 18.08.2026, п. 9, 13) Павел: «где "Оценка по фото" и "Вернём деньги" - там тоже такая явственная белая черта идёт. Эта белая черта не должна отрезать никогда фон. Фон должен растворяться в белом». Где это. «Оценка по фото» и «Вернём деньги» - два нижних буллета панели «Частным клиентам» (section#chastnym) на первом экране, не блок качества. Панель лежит в дорожке переключателя аудиторий div.track, у дорожки overflow: hidden (эталон glavnaya-a.css), а высоту ей выставляет сценарий glavnaya.js строкой track.style.height = active.offsetHeight - ровно по активной панели. Всё, что вылезло за панель, срезается по прямой. Тень карточки - 0 10px 20px rgba(21,72,137,.08). Замер до этой правки - ступенька на кромке обрезки, то есть последний пиксель внутри против первого снаружи: · телефон 375, низ буллета: запас 22,2 точки, на кромке 253,253,254 против 255,255,255 - ступенька 5 единиц из 255; · компьютер 1440, низ буллета: запас 16,4 точки, 250,251,253 против 255,255,255 - ступенька 13 единиц; · компьютер 1440, бок буллета: запас 8 точек, 251,251,252 против 255,255,255 - ступенька 12 единиц. Это и есть «явственная белая черта»: тень не растворяется, а обрывается. Правка касается ОБЕИХ ширин. Прежняя жила только под body.mob, и на компьютере не хватало даже больше, чем на телефоне. ПОЧЕМУ ПРЕЖНЯЯ ПРАВКА НЕ ПОМОГЛА - и что оказалось не так. Отсекатель был найден верно: над буллетами он ровно один, это div.track (обход вверх по родителям от буллета до body, замер на живой странице). Неверным было ЧИСЛО. Считали по правилу «сдвиг плюс половина размытия», получали 20 точек и давали 22. На деле Chrome рисует размытие шире. Замер контрольным образцом: белая карточка 200x60 с нашей тенью 0 10px 20px положена на чистый белый лист, посчитаны пиксели. · вниз тень занимает 26 точек (последняя окрашенная - 26-я, 27-я уже 255,255,255), а не 20; · вбок - 16 точек (16-я окрашена, 17-я белая), а не 10. Значит запас нужен 26 вниз и 16 вбок. Прежние 22 не дотягивали 4 точки - отсюда и остаток белой черты, который поймал контроль. ЧТО СДЕЛАНО - запас даёт ПОЛЕ ПАНЕЛИ, обрезку не трогаем. 1. Нижнее поле панели поднято до 28 точек на ОБЕИХ ширинах (было 16 на компьютере и 22 на телефоне). Поле входит в offsetHeight, а сценарий counter_segbar.js ставит дорожке height именно по offsetHeight активной панели - значит дорожка вырастает сама и тень помещается целиком. Собственное поле дорожке давать нельзя: у неё box-sizing: border-box и высота уже проставлена в пикселях, поле съело бы содержимое и срезало низ карточек. 2. ПОЧЕМУ НЕ overflow-clip-margin. Заманчивый способ - оставить панель как есть и разрешить дорожке рисовать за кромкой (overflow: clip + overflow-clip-margin: 30px + clip-path, чтобы открыть только низ). Он был написан, замерен и СНЯТ: замена overflow: hidden на clip ломает страницу вширь. Замер: при overflow: clip у дорожки первого экрана document.scrollWidth становится 337 при клиенте 320, 392 при 375, 431 при 414 - ровно плюс 17 точек на любой ширине, то есть на телефоне появляется горизонтальная прокрутка. Причина - лента .rail внутри дорожки шире её вдвое (две колонки по 100 % впритык): overflow: hidden делает дорожку контейнером прокрутки и гасит это переполнение, а clip - не гасит, и оно доходит до страницы. Возврат на hidden убирает прокрутку: document.body.scrollWidth становится ровно равен ширине окна на 320, 360, 375 и 414. У documentElement.scrollWidth остаётся плюс 2-3 точки, но это не наш блок: столько занимает фоновая подложка .fon-podlozhka (position: fixed, ширина окна плюс 2), и на прокрутку страницы она не влияет. 3. Вбок запас остаётся полем панели. На компьютере он поднят с 8 до 18 точек - этого хватает с запасом (нужно 16), а буллеты только чуть уже: 373,3 -> 366,7, переносов строк не прибавилось (замер 1440). 4. На телефоне поле поднято с 10 до 14 точек, и ровно на столько же сужен ПРОМЕЖУТОК МЕЖДУ КОЛОНКАМИ буллетов - с 16 до 8. Ширина буллета от этого не меняется вовсе: под два буллета и промежуток отведено 349,4 минус два поля, то есть сумма «два поля плюс промежуток» должна остаться 36. Было 10+10+16, стало 14+8+14. Замер подтверждает: ширина буллета 156,7 и до, и после; высоты 73,9 / 73,9 / 88,5 / 88,5 / 73,9 / 73,9 не изменились, переносов строк не прибавилось, на высоту панели обмен не влияет вовсе. Ужат только промежуток между колонками; промежуток между рядами (row-gap) намеренно оставлен 16 - вертикальный ритм не трогаем. 5. Цена правки по высоте: панель растёт на 12 точек на компьютере (поле 16 -> 28, дорожка 310 -> 322) и на 6 на телефоне (поле 22 -> 28, дорожка 368 -> 374). Место занимает сама тень. ЧТО ПОЛУЧИЛОСЬ (ступенька на кромке обрезки - последний пиксель внутри против первого снаружи; замер по пикселям): · телефон, низ буллета: было 253,253,254 -> 255,255,255 (5 единиц), стало 255,255,255 -> 255,255,255 - ступеньки нет, тень идёт все 26 точек и сама доходит до белого; · телефон, бок буллета: было 251,251,252 -> 255,255,255 (11 единиц), стало 254,254,254 -> 255,255,255 - 3 единицы; · компьютер, низ буллета: было 250,251,253 -> 255,255,255 (13 единиц), стало ступеньки нет; · компьютер, бок буллета: было 251,251,252 -> 255,255,255 (12 единиц), стало ступеньки нет. ЧЕГО НЕ ХВАТАЕТ - и это надо сказать Павлу. На ТЕЛЕФОНЕ по бокам запас 14 точек при нужных 16: на кромке 254,254,254 против 255,255,255, ступенька 3 единицы из 255 - против 11 до правки (1 единица на канал, глазом не читается). Полные 16 взять можно только промежутком между колонками в 4 точки (сумма «два поля плюс промежуток» жёстко равна 36, иначе буллеты сужаются и в «Оценка по фото» и «Вернём деньги» переносится строка: они вырастают с 74 до 90 точек, а панель с 362 до 384). Проверено снимками с трёхкратным увеличением: при промежутке 4 буллеты выглядят почти сомкнутыми, при 8 - разделены ясно, а остаток ступеньки в 3 единицы глазом не читается. Выбраны 14 и 8; если Павел захочет ноль вместо трёх единиц - поле 16, промежуток 4. Вбок разрешить рисование дорожке нельзя ни при каком числе: во-первых ломается ширина страницы (пункт 2), во-вторых в открывшееся поле вышла бы соседняя панель «Компаниям» - её колонка начинается ровно на правой кромке дорожки. Сила селекторов. Поля панели задаёт glavnaya.css, .segblock[data-h], вес (0,2,0). Здесь приписка body поднимает вес до (0,2,1), а телефонное правило - до (0,3,1); перебивают при любом порядке подключения файлов. Обрезку дорожки не трогаем вовсе - эталонное overflow: hidden остаётся. Откат: удалить три правила ниже - вернутся поля 0 8px 16px на компьютере, 0 10px 22px и промежуток 16 на телефоне и белая черта. */ body .segblock[data-h] { padding: 0 18px 28px; /* было 0 8px 16px - бока и низ под тень */ } body.mob .segblock[data-h] { padding: 0 14px 28px; /* было 0 10px 22px - бока и низ под тень */ } body.mob #chastnym .buls[data-h].seg, body.mob #kompaniyam .buls[data-h].seg { column-gap: 8px; /* было 16px - ровно то, что забрали поля панели */ } /* ── Вводный абзац первого экрана - чёрным (диктовка Павла 18.08.2026, п. 30) Павел: «с учётом того, что мы всё-таки сделали теперь этот шар, давай текст "перевод документов и текстов на 65 языков" сделаем тоже чёрным, а не серым, но чтобы он не терялся». Речь про абзац p.intro под слоганом - «Перевод документов и текстов на 65 языков для бизнеса и частных лиц…». Причина: под страницу легла фоновая подложка (вращающийся шар), и серый текст на ней теряется. Замер до правки: цвет rgb(61,66,71) - серый из эталона (.intro[data-h]{color:#3d4247} в glavnaya-a.css). Кегль 15px, насыщенность 400 - не тронуты, Павел про них не говорил. Стало: #1b1b1b - тот же чёрный, которым уже набраны H1 и слоган рядом (замер: у обоих rgb(27,27,27)). Отдельного «почернее» не изобретаем - берём цвет, который на первом экране уже есть. Обе ширины. Павел говорил про компьютер, но подложка на телефоне та же, и серый там теряется так же - поэтому приписка body, а не body.mob. Проверено замером: после правки rgb(27,27,27) и на 1440, и на 375. Сила селектора: эталон .intro[data-h] - вес (0,2,0), здесь (0,4,1). Откат: удалить правило - вернётся серый rgb(61,66,71). */ body .hero[data-h] .hleft[data-h] .intro[data-h] { color: #1b1b1b; } /* ── 5. Горизонтальная прокрутка: скрытый заголовок панели «Компаниям» ──── Проверка 19.08.2026 нашла точную причину, по которой страница на телефоне на 2 точки шире экрана (на 414 - на 3). Виноват скрытый заголовок панели «Компаниям» -

в home_page.html. Правило .vhidden (guide.css) прячет его через position: absolute без left и top, поэтому заголовок встаёт на своё естественное место - внутри панели, которая стоит за кадром справа. А обрезка дорожки .track его не гасит: ни один предок не позиционирован, содержащий блок у заголовка - сам body, и по правилам CSS обрезка не действует на потомка, чей содержащий блок лежит вне обрезающей коробки. Доказано гашением по одному: скрыть #kompaniyam .segh - и ширина падает ровно до ширины окна (322 -> 320, 377 -> 375, 417 -> 414). Ни подложка, ни панель связи, ни буллеты лишних точек не дают - они честно обрезаны. Лечим не заголовок, а панель: своя система координат у .segblock делает её содержащим блоком для скрытого заголовка, и обрезка дорожки начинает на него действовать. Так правка не трогает ни общий .vhidden (он один на весь сайт), ни разметку. Откат: удалить раздел 5 - вернутся лишние 2 точки ширины. */ body .segblock[data-h] { position: relative; } /* ── 6. Переключатель аудиторий с переливом (диктовка Павла 19.08.2026, п. 35) Павел дословно: «кнопку переключения "Частным клиентам" и "Компаниям" давай сделаем тоже с переливом. То есть там, где "Компании", "Частным клиентам" - так же, как калькулятор и онлайн-заявка, таким же переливчатым, с градиентом». ЧТО ИМЕННО КРАСИМ. Выбранную сторону рисует не сама вкладка, а бегунок .knob - красная пилюля, которая ездит под текстом при переключении (эталон glavnaya-a.css: position: absolute, transition: transform .22s). Значит перелив нужен ему. Вкладки .segtab только меняют цвет текста на белый - их не трогаем, и невыбранная сторона остаётся белой, как была. ОТКУДА ЧИСЛА. Ровно те же, что у кнопок сайта, - 00_obshchee.css, раздел 2: перелив #CB3039 сверху, #8C1821 на 34 %, #75121A внизу; постамент 0 3px 0 0 #6D131A; внутренний блик inset 0 4px 8px 4px rgba(255,255,255,.12). Перелив взят переменной --knopka-fon, а не копией цифр: если Павел когда- нибудь поправит перелив на кнопках, переключатель подхватит правку сам и они не разъедутся. Замер до правки: бегунок залит плоским rgb(140,24,33), теней нет - обе ширины, оба положения. ПОСТАМЕНТ ПОМЕЩАЕТСЯ. Между низом бегунка и внутренним краем полосы 4,52 точки (3,52 внутреннее поле полосы плюс 1 рамка) - замер и на 375, и на 1440. Постамент высотой 3 укладывается целиком: ничего не срезается и за рамку полосы не вылезает. ВЫСОТА НЕ ЕДЕТ - это важно, иначе дорожка прыгала бы при переключении. Тени места в раскладке не занимают, бегунок позиционирован абсолютно, высоту полосы держат вкладки. Замер после правки в обоих положениях: 375 - бегунок 170,17x40,88, полоса 49,91; 1440 - бегунок 235,47x43,98, полоса 53,02. Те же числа, что до правки. Свойство transition намеренно не переписываем: своя строка перебила бы эталонное transform .22s и бегунок стал бы прыгать без хода. Пишем background-image, а не background: заливка rgb(140,24,33) из glavnaya.css останется подложкой, если перелив вдруг не отрисуется. Обе ширины: Павел про версии не разделял, переключатель один и тот же. Сила селектора: у glavnaya.css .segbar[data-h] .knob[data-h], вес (0,4,0); здесь (0,6,1) - перебивает при любом порядке подключения файлов. Приписка .segwrap заодно отделяет переключатель первого экрана от возможных одноимённых полос в других блоках. Откат: удалить правило - бегунок снова станет плоским #8C1821 без теней. */ body .segwrap[data-h] .segbar[data-h] .knob[data-h] { background-image: var(--knopka-fon); box-shadow: 0 3px 0 0 #6d131a, inset 0 4px 8px 4px rgba(255, 255, 255, .12); } /* ── 7. Кегли телефона по справочнику Павла (документ «ШРИФТЫ_МОБИЛЬНЫЕ 2») Павел прошёл справочник кеглей телефонной версии и в последней колонке таблиц проставил задания. Первого экрана касаются шесть строк из таблиц 2 и 3: заголовок H1 20 → 24 слоган под заголовком 17,5 → 20 вкладка переключателя, выбранная 14 → 16 вкладка переключателя, обычная 14 → 16 скрытый подзаголовок аудитории 14 → 16 кнопки действий, обе аудитории 14 → 16 Всё - только телефон: правила написаны через body.mob, класс ставит сценарий auto_mob.js при ширине до 640. Замер на компьютере 1440 до и после правки совпадает до сотой доли. Почему кегли пишутся поимённо, а не через переменные --fs-*. Переменные общие на всю страницу: --fs-h2 - это и слоган, и все заголовки разделов, --fs-h3 - и вкладки, и кнопки, и десяток мелочей в других блоках. Павел правит первый экран, а не всю страницу, и заголовки разделов правит другой человек в другом файле. Поэтому каждому предмету задан свой кегль числом. Откат раздела целиком: удалить пункты 7.1-7.5 - вернутся 20 / 17,5 / 14 / 14 / 14 и боковые поля вкладок 1rem. */ /* 7.1. Заголовок H1 - 24px вместо 20px. Междустрочный интервал не трогаем: 1,2 задан в 00_obshchee.css, при 24px это 28,8 - строки не слипаются. ЗАМЕР ПО ЧЕТЫРЁМ ШИРИНАМ (высота коробки заголовка, строк): 320 было 72,00 / 3 строки стало 86,39 / 3 строки 360 было 72,00 / 3 строки стало 86,39 / 3 строки 375 было 48,00 / 2 строки стало 86,39 / 3 строки 414 было 48,00 / 2 строки стало 86,39 / 3 строки За экран не вылезает нигде: ширина прокрутки документа равна видимой на всех четырёх ширинах, самое длинное слово «нотариальным» помещается даже в колонку 320-й ширины (294,41). Первый экран стал выше - это неизбежно при росте кегля, и вот на сколько (низ ряда кнопок от верха документа): 375 - 779,45 → 825,66 (+46,21); 414 - так же; 320 - 867,30 → 917,00 (+49,70); 360 - 825,14 → 825,66 (+0,52, там рост заголовка почти целиком съеден дорожкой переключателя, см. 7.3). Сила селектора: в 00_obshchee.css заголовок задан как body.mob h1[data-h]. Здесь то же самое плюс .hero и .hleft - строго сильнее, и файл подключён позже. Откат: удалить правило - вернётся 20px. */ body.mob .hero[data-h] .hleft[data-h] h1[data-h] { font-size: 24px; } /* 7.2. Слоган «Точный перевод точно в срок» - 20px вместо 17,5px. Замер: 360, 375 и 414 - одна строка, коробка 21,34 → 24,39. На 320 слоган ломается на две строки (48,78): видимому тексту при 20px нужно 301,7, а в колонке 294,41 - не хватает 7,3. Молча уменьшать кегль ради одной ширины не стал, Павлу сказано числами. Подсветка и раскрывашка не затронуты: 00_obshchee.css красит слоган и раздвигает его минусовыми полями по 6px, кегль там не задан. Откат: удалить правило - вернётся 17,5px. */ body.mob .hero[data-h] .hleft[data-h] .slogan[data-h] { font-size: 20px; } /* 7.3. Вкладки переключателя аудиторий - 16px вместо 14px. ПОЧЕМУ ЗАОДНО МЕНЯЮТСЯ ПОЛЯ ВКЛАДКИ. «Частным клиентам» жирным при 16px занимает 154,34. Боковые поля из эталона (1rem = 16px с каждой стороны) оставляют вкладке на 375 всего 138,19 - надпись ломается на две строки, и дорожка вырастает с 49,91 до 77,81. Поля срезаны до 2px, и надпись снова помещается в строку: ширина вкладке остаётся надписи нужно строк 320 138,69 154,34 2 (и при 14px было 2) 360 158,69 154,34 1 (при 14px было 2) 375 166,19 154,34 1 414 185,69 154,34 1 На вид срезанные поля не заметны: у вкладки выключка по центру, поле задаёт только ширину строки, а не место надписи. При 16px надпись стоит в бегунке шириной 170,17 - по 7,9 свободного с каждой стороны, до закругления пилюли не достаёт. На 320 надпись остаётся в две строки. Это не ухудшение - там и при 14px было две (дорожка 71,59). В строку на 320 её не уложить ничем, кроме сокращения самой надписи или выноса полосы в обрез по краям экрана: вкладке там 142,69, а надписи нужно 154,34. Решение за Павлом, молча не сокращаю. ВЫСОТА ДОРОЖКИ НЕ ЕДЕТ - ради этого срезано и вертикальное поле, с 9,6 до 8,04. Арифметика: строка при 16px равна 16 × 1,55 = 24,8; вкладка 24,8 + 2 × 8,04 = 40,88 - ровно столько же, сколько было при 14px (21,7 + 2 × 9,6 = 40,9). Замер дорожки на 375: было 49,906, стало 49,891 - расхождение 0,015, это одна шестьдесят четвёртая пикселя, ниже сетки округления браузера. На 414 то же самое. На 360 дорожка стала НИЖЕ - 71,59 → 49,89: там надпись перестала ломаться на две строки. На 320 - 71,59 → 74,69, обе вкладки как были в две строки. Оба положения проверены нажатием: и на «Частным клиентам», и на «Компаниям» дорожка на каждой ширине одна и та же, при переключении не прыгает. Бегунок высоту не держит - он позиционирован абсолютно и следует за полосой, перелив из пункта 6 не затронут. Числа связаны: если менять кегль вкладок дальше, вертикальное поле надо пересчитать по той же формуле (высота вкладки 40,88 = кегль × 1,55 + 2 × поле), иначе дорожка поедет. Откат: удалить правило - вернутся 14px и поля .6rem 1rem. */ body.mob .segwrap[data-h] .segbar[data-h] .segtab[data-h] { font-size: 16px; padding: 8.04px 2px; /* 8,04 держит прежнюю высоту дорожки, 2 - строку */ } /* 7.4. Скрытый подзаголовок аудитории - 16px вместо 14px. Это h2 с классами segh и vhidden внутри панели аудитории: «Частным клиентам» и «Компаниям» для голосового чтения. Правило .vhidden (guide.css) держит его коробкой 1x1 с clip-path: inset(50%), поэтому кегль на раскладку не влияет вовсе - замер после правки те же 1x1 на всех четырёх ширинах. Правка сделана ради справочника: Павел ведёт таблицу кеглей, и разнобой между строкой в таблице и файлом сбивает. Заодно это отвязывает подзаголовок от общего размера H2, который правят в 00_obshchee.css: наш селектор сильнее и кегль здесь свой. Откат: удалить правило - вернётся 14px. */ body.mob .segblock[data-h] .segh[data-h] { font-size: 16px; } /* 7.5. Кнопки действий «Калькулятор заказа» и «Онлайн заявка» - 16px. Обе аудитории сразу: правило написано на .segblock, а панели «Частным» и «Компаниям» - это два .segblock внутри дорожки, кнопки в них одинаковые. НАДПИСИ В ОДНУ СТРОКУ НЕ ПОМЕЩАЮТСЯ, И ЭТО НЕ НОВОСТЬ. Замер (сколько нужно надписи / сколько остаётся в кнопке, строк): ширина Калькулятор заказа Онлайн заявка было 14px стало 16px было 14px стало 16px 320 140,08/82,00 2 160,08/82,00 2 103,52/82,02 2 118,30/82,02 2 360 140,08/102,0 2 160,08/102,0 2 103,52/102,0 2 118,30/102,0 2 375 140,08/109,5 2 160,08/109,5 2 103,52/109,5 1 118,30/109,5 2 414 140,08/129,0 2 160,08/129,0 2 103,52/129,0 1 118,30/129,0 1 То есть «Калькулятор заказа» стоял в две строки на всех четырёх ширинах и при 14px - в одну строку он не помещался никогда. От 16px меняется только «Онлайн заявка» на 375: была одна строка, стала две. Высота ряда кнопок при этом 59,19 → 63,97, всего +4,78: строки в кнопках выравниваются по сетке, и обе кнопки теперь одинаково двухстрочные - вид ровнее прежнего, когда одна была в две строки, а вторая в одну. ПОЧЕМУ НЕЛЬЗЯ ПРОСТО СРЕЗАТЬ ПОЛЯ, как у вкладок. Кнопка на 375 шириной 157,50, а надписи «Калькулятор заказа» при 16px нужно 160,08 - она не влезает даже при нулевых полях. Ряду тоже взять неоткуда: панель отдаёт 349,41, из них 28 уходит на боковые поля под тень (пункт 4) и 6,39 на зазор между кнопками. Что можно сделать - решать Павлу, молча не уменьшаю: · сократить надпись до «Калькулятор» - при 16px ей нужно около 98, она встанет в строку на всех ширинах; · поставить кнопки друг под другом - каждой достанется 321,41, обе надписи встанут в строку, но первый экран вырастет ещё примерно на 64; · оставить две строки - разница с сегодняшним видом всего +4,78 по высоте. Перелив, постамент и подсветка кнопок из 00_obshchee.css не затронуты: там задан фон и тени, кегль не задан. Откат: удалить правило - вернутся 14px. */ body.mob .segblock[data-h] .acts[data-h] .act[data-h] { font-size: 16px; } /* ═══════════════════════════════════════════════════════════════════════ Кегль 13: первый экран (диктовка Павла 20.08.2026) ═══════════════════════════════════════════════════════════════════════ Правки из книги замера «ШРИФТЫ_МОБИЛЬНЫЕ применить на стр. О компании». Число кегля - в переменной --kegl-melkij, она задана в C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css ═══════════════════════════════════════════════════════════════════════ */ /* Слоган - жирным. Павел: «Сделать жирный» (было 600). Эталон задаёт 600 в .slogan[data-h] (glavnaya-a.css), вес (0,2,0). Здесь (0,4,2) - перебивает без !important. Откат: удалить правило - вернётся 600. */ body.mob .hero[data-h] .hleft[data-h] p.slogan[data-h] { font-weight: 700; } /* Служебная приписка «- подробнее» убрана совсем. Павел: «Ее нет в мобильной версии. Не используем. Текст разворачивается при клике на Точный… убрать ее с сайта совсем». Это невидимый span класса vhidden, его дописывает к слогану C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\site\glavnaya.js ради голосового чтения. На экране его и так не видно (приём visually-hidden в guide.css), display:none убирает его ещё и из озвучки. Роль кнопки и aria-expanded у слогана остаются, раскрытие работает как было. Правило сносит только приписку внутри слогана. Общий .vhidden не тронут: подписи «Частным клиентам» и «Компаниям» в карусели аудитории по-прежнему читаются диктором. Откат: удалить правило - приписка вернётся в озвучку. */ body.mob .hero[data-h] .hleft[data-h] p.slogan[data-h] .vhidden { display: none; } /* Мелкая строка буллета-образца «24/7» (было 10,8px). Тот же селектор, что в разделе выше по файлу, - правило ниже по файлу перебивает его по порядку, без утяжеления и без !important. Откат: удалить правило - вернутся 10,8px. */ body.mob .buls[data-h].common .bt[data-h], body.mob .buls[data-h].common .bt[data-h] div { font-size: var(--kegl-melkij); } /* Плашки переключателя аудитории: мелкая строка (было 10,8px) и нижняя подпись у «Компаниям» (было 11,2px). Откат: удалить правило. */ body.mob .buls[data-h].seg .bt[data-h], body.mob .buls[data-h].seg .bt[data-h] div, body.mob .buls[data-h].seg .bb[data-h] { font-size: var(--kegl-melkij); } /* Пояснение внутри плашки первого экрана (было 13,5px от эталонного .ptext[data-h], вес (0,2,0)). Здесь (0,6,1). Откат: удалить правило. */ body.mob .hero[data-h] .hright[data-h] .pl[data-h] .ptext[data-h] { font-size: var(--kegl-melkij); } /* Вводный абзац под слоганом (было 13,5px от эталонного .intro[data-h], вес (0,2,0)). Здесь (0,5,1). Цвет и прочее из раздела выше по файлу не трогаем - Павел правил только кегль. Откат: удалить правило. */ body.mob .hero[data-h] .hleft[data-h] .intro[data-h] { font-size: var(--kegl-melkij); } /* ═══════════════════════════════════════════════════════════════════════ Первый экран - принято с «О компании» 21.08.2026 ═══════════════════════════════════════════════════════════════════════ ОТКУДА ПРИЕХАЛО. Павел принял вид страницы «О компании» как окончательный: «сейчас у нас эталонная, где все корректировки приняты, сделаны, проверены - это страница „О компании“. Давай перенесём всё на главную». Раздел переехал сюда из примерочного слоя C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\test_o_kompanii_ekran.css Слой удалён целиком вместе со строкой подключения в home_page.html. ЧТО ИЗМЕНИЛОСЬ ПРИ ПЕРЕЕЗДЕ: · приставка «body.stranica-o-kompanii» заменена на «body»; · ряд с кнопкой «Онлайн-заявка» больше не дорисовывается сценарием - он стоит настоящей разметкой в home_page.html, между первым экраном и рядом из четырёх плашек. Поэтому исчез резерв места под кнопку (класс тела «ok-knopka-vstala») и оба правила резерва: кнопка есть с первой отрисовки, занимать под неё пустоту больше не нужно; · правила стоят в конце файла - при равном весе с правилами выше по файлу побеждают они, порядком, без !important. Задания целиком: C:\Users\Павел\Claude\Projects\Вебсайт\ЗАДАНИЕ_О_КОМПАНИИ_20.08.md C:\Users\Павел\Claude\Projects\Вебсайт\ЗАДАНИЕ_ШАПКА_И_LENTY_21.08.md ═══════════════════════════════════════════════════════════════════════ */ /* ── П1. Кнопка «Онлайн-заявка» на первом экране ────────────────────────── ГДЕ СТОИТ. Ряд с кнопкой стоит между первым экраном (.hero) и рядом из четырёх плашек (.buls.common). Одно и то же место закрывает оба порядка из задания: компьютер основной текст → кнопка → четыре плашки → переключатель → «Калькулятор заказа» (шесть плашек стоят справа от текста, внутри .hero, поэтому в порядке сверху вниз между текстом и кнопкой их нет) телефон основной текст → шесть плашек → кнопка → четыре плашки → переключатель → «Калькулятор заказа» (на телефоне .hero складывается в одну колонку: сначала текст, следом плашки) ПОЧЕМУ НЕ В ЛЕВОЙ КОЛОНКЕ. Если поставить кнопку под вводным абзацем, внутрь .hleft, она встанет по центру колонки шириной 404 точки, а не по центру страницы. В задании сказано «строго по центру по горизонтали» - значит по центру всей полосы содержимого. РАЗМЕР задаёт общее правило кнопок, раздел 6 файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css 240 x 51,2 и овал 999px, одинаково на компьютере и на телефоне. Здесь остались только цвет и поведение. ЦВЕТ. Перелив взят переменной --knopka-fon из 00_obshchee.css, а не копией цифр: поправят перелив кнопок - кнопка подхватит правку сама. КАК КНОПКА ОТКРЫВАЕТ ОКНО ЗАЯВКИ. Ровно так же, как остальные кнопки заказа на сайте: признак data-open-form="order" плюс адрес #zayavka. Оба перечислены в общем списке C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\site\overlay.js и в раннем перехвате кликов в base.html; перехват там один на весь документ, своего обработчика кнопке не нужно. Откат: удалить П1 и разметку ряда в home_page.html. */ body .ok-ryad-zayavki { display: flex; justify-content: center; /* строго по центру полосы содержимого */ margin: 0; } body .ok-knopka-zayavki { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; line-height: 1.55; text-align: center; text-decoration: none; color: #fff; border: 0; background-color: #8c1821; /* подложка, если перелив не отрисуется */ background-image: var(--knopka-fon); box-shadow: 0 3px 0 0 #6d131a, inset 0 4px 8px 4px rgba(255, 255, 255, .12); cursor: pointer; transition: background-image .25s, box-shadow .25s, transform .25s; } /* Наведение - только при настоящем курсоре (решение Павла 08.09.2026, правило 4.5 в bloki/00_obshchee.css: на сенсорном экране :hover не отпускает и залипает после касания). Откат: снять @media. */ @media (hover: hover) and (pointer: fine) { body .ok-knopka-zayavki:hover { 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 .ok-knopka-zayavki: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 .ok-knopka-zayavki:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body .ok-knopka-zayavki { transition: none; } } /* ── П2. Четыре расстояния первого экрана ───────────────────────────────── Задание 1.2 второго круга. Павел велел уравнять между собой четыре расстояния и сделать их вдвое меньше того, каким было расстояние от «Онлайн-заявки» до ряда плашек: 1. до кнопки «Онлайн-заявка» сверху; 2. после кнопки «Онлайн-заявка» снизу; 3. от ряда плашек «24/7, две минуты, онлайн» до переключателя; 4. от кнопки «Калькулятор заказа» до плашки, начинающейся словом «Бесплатно». ЗАМЕР ДО ПРАВКИ, ширина 1440, по видимым краям (снимок с элементом и такой же снимок с visibility:hidden на нём; шар на время замера заморожен подменой requestAnimationFrame, шум между двумя снимками подряд - ноль строк): 1. до кнопки 46,75 2. после кнопки 46,75 3. плашки → переключатель 28,80 4. калькулятор → «Бесплатно» 13,00 Величина по заданию - половина от второго: 46,75 / 2 = 23,375. Берём 23,4 - то же число с точностью до десятой, и с ним отступы записываются без бесконечных дробей. Павел в диктовке назвал «около 23,5», расхождение 0,1 - от того, что 47,0 первого круга было округлением 46,75 при шаге замера в четверть точки. ЧТО ЧЕМ ДЕРЖИТСЯ: расстояние 1 нижний отступ .hero 20,78 (компьютер) 23,39 (телефон) расстояние 2 нижний отступ ряда с кнопкой 0 + верхнее поле .buls.common 26,4 расстояние 3 нижний отступ .buls.common 23,4 расстояние 4 нижний отступ ряда .acts 26,4 Почему расстояние 2 держится двумя числами. У кнопки снизу торчит постамент в 3 точки, он и есть её видимый край. Нужный просвет 23,4 набирается как 0 (отступ ряда) + 26,4 (поле плашек) − 3 (постамент). Одним отступом ряда обойтись нельзя: поле .buls.common в 42 точки само по себе больше искомого просвета, и отступ пришлось бы делать отрицательным. Поле .buls.common правится спокойно: разделительная черта, ради которой оно в эталоне заведено, обнулена выше по этому же файлу (border-top: 0), так что поле работает только как пустое место. ПОЧЕМУ У .buls.common ДВА СЕЛЕКТОРА В СПИСКЕ. Выше по файлу есть правило body.mob .buls[data-h].common (вес 0,5,1) - оно ставит телефону padding-top 14 и margin-bottom 18. Одного «body .buls[data-h].common» (0,4,1) не хватило бы: на телефоне победило бы то правило. Второй селектор списка повторяет его вес и стоит ниже по файлу, поэтому побеждает порядком. Тот же приём уже применён в glavnaya.css. H1 ничем не трогается: ни кегль, ни начертание, ни межстрочный, ни его собственные поля. Правится нижнее поле СЕКЦИИ, а не заголовка. Замер: H1 на 1440 - 40px/700/46px, коробка 404,03x184; на 375 и 414 - 24px/700/28,8px, коробка 86,39 по высоте. До правки числа те же. ПОПРАВКА 21.08.2026. Шапка после переработки стала выше на 15,2 точки, и первый экран лёг на другую субпиксельную сетку: расстояние 1 поехало с 23,39 на 23,88, хотя ни одно правило не менялось. Нижний отступ .hero уменьшен на те же 0,49 - 21,27 → 20,78. Замер после поправки: снова 23,39 на 1440 и на 1280. Откат: удалить П2 - вернутся 42 / 28,8 / 16 и разнобой зазоров. */ body .hero[data-h] { margin-bottom: 20.78px; } body.mob .hero[data-h] { margin-bottom: 23.39px; } body .buls[data-h].common, body.mob .buls[data-h].common { padding-top: 26.4px; margin-bottom: 23.4px; } body .track[data-h] .acts[data-h] { margin-bottom: 26.4px; } /* ── П3. Переключатель «Частным клиентам / Компаниям» - травяной ────────── Павел, 20.08 вечер: изумрудный не подошёл, нужен «насыщенный цвет свежей травы». Первая диктовка (по ней делался изумрудный) звучала так: «Сделать заметнее: тот же тип градиента, что у красного оформления, но в спокойных изумрудно-зелёных оттенках. Не ярко-зелёный». ЧТО КРАСИМ. Выбранную сторону рисует не вкладка, а бегунок .knob - пилюля, которая ездит под текстом (эталон glavnaya-a.css). Вкладки .segtab только меняют цвет надписи на белый, их не трогаем: невыбранная сторона остаётся серой на белом, как была. ОТКУДА ЧИСЛА. Строение перелива в точности как у красного из раздела 2 файла 00_obshchee.css: три остановки на 0 %, 34 % и 100 %, постамент снизу, белый блик изнутри. Меняются только цвета - травяной ряд, тон 102-103°, насыщенность 75 %: верх 0 % #358413 середина 34 % #28680F низ 100 % #22580D постамент #1C4909 КОНТРАСТ БЕЛОЙ НАДПИСИ (WCAG 2.1, отношение яркостей, посчитано кодом): на #358413 (самый светлый край перелива, верх) 4,71 : 1 на #28680F (там, где стоит надпись) 6,82 : 1 на #22580D (низ) 8,50 : 1 на #1C4909 (постамент) 10,47 : 1 Порог для обычного текста - 4,5 : 1. Худший край, верхний, даёт 4,71 - запас есть, надпись читается на любой высоте бегунка. ПОЧЕМУ НЕ СВЕТЛЕЕ. Трава хочется ярче, но белый текст этого не даёт: у зелёного почти вся яркость сидит в зелёном канале, и порог 4,5 упирается примерно в светлоту 30 % при насыщенности 75 %. Перебор показал предел: #37870F даёт 4,53, #3E9418 - уже 3,85, фирменный зелёный #228B22 - 4,39, тоже ниже порога. Взят #358413 (4,71): самый сочный из тех, у кого остаётся запас над порогом, а не впритык. С ФИРМЕННЫМИ ЦВЕТАМИ НЕ СПОРИТ. Бордовый #8C1821 остаётся у всех кнопок действия, серый #54595F - у служебного текста; травяной стоит на одном предмете и ни с чем не соседствует вплотную. Ради этого правка и делалась: раньше бегунок был того же бордового перелива, что и кнопки вокруг, и переключатель терялся среди них. БЕГУНОК В ПОЛОСТИ - ЗАЗОР СО ВСЕХ ЧЕТЫРЁХ СТОРОН ОДИНАКОВЫЙ (пункт 3 задания 20.08). Павел: «Бегунок переключателя стоит в полости неровно: сверху белого зазора больше, снизу впритык». Мешал постамент: тень 0 3px 0 0 рисовала ту же пилюлю, сдвинутую вниз на 3 точки, и съедала нижний зазор (3,52 − 3 = 0,52). Поэтому постамент нарисован ВНУТРЬ (inset 0 -3px), а бегунок занимает свою половину полости целиком - опоры top/bottom/left обнулены, ширина 50 %. Замер после правки: верх/низ/лево/право = 3,52 / 3,52 / 3,52 / 3,52. ВЫСОТА НЕ ЕДЕТ: правятся только цвета, размеры и тени той же формы, что были. Бегунок позиционирован абсолютно, высоту полосы держат вкладки. Сила селектора: выше по этому файлу то же правило записано как body .segwrap[data-h] .segbar[data-h] .knob[data-h] - вес тот же (0,6,1), и наше побеждает порядком. Откат: удалить П3 - бегунок вернётся к бордовому переливу. */ body .segwrap[data-h] .segbar[data-h] .knob[data-h] { background-color: #28680f; background-image: linear-gradient(180deg, #358413 0%, #28680f 34%, #22580d 100%); box-shadow: inset 0 -3px 0 0 #1c4909, inset 0 4px 8px 4px rgba(255, 255, 255, .12); top: 0; right: auto; bottom: 0; left: 0; width: 50%; } /* ── П4. Под переключателем - только «Калькулятор заказа» ───────────────── Пункт 4 задания 20.08. Павел: «Под переключателем оставить только „Калькулятор заказа“, по центру. Кнопка „Онлайн-заявка“ уже стоит сверху, вторая внизу не нужна». ГДЕ ЭТО. Под переключателем в разметке стоит ряд .acts, и в нём две кнопки - по одному ряду на каждую сторону переключателя. Прячем обе лишние: стороны переключаются на глазах у посетителя, и спрятать только одну значило бы, что кнопка появляется при переключении. ЧЕМ ОТЛИЧАЕМ КНОПКИ. Не по классу main/sec и не по номеру в ряду: кнопки заводятся в кабинете, там можно поменять и вид, и порядок. Отличаем по назначению - у кнопки заявки признак data-open-form="order", у калькулятора вместо него data-calc-mode. Признак ставит шаблон по действию, выбранному в кабинете, так что метка едет вместе с кнопкой. Кнопка остаётся в разметке, но display:none убирает её и с экрана, и с клавиатурного обхода, и из зачитывания голосом - лишней «невидимой» цели не остаётся. ЦЕНТР. .acts - флексбокс с justify-content:center, поэтому оставшаяся кнопка встаёт по центру полосы сама. Замер на 1440: кнопка 320 точек, слева 412, справа 412 - отклонение 0,00. На 1280 - 332 и 332. Откат: удалить П4 - вторая кнопка вернётся на место. */ body .track[data-h] .acts[data-h] .act[data-h][data-open-form="order"] { display: none; } /* П4.1. На телефоне оставшуюся кнопку надо ещё и поставить по центру. На компьютере ряд .acts - флексбокс с выключкой по центру, и одна кнопка центруется сама. На телефоне эталон glavnaya-a.css перестраивает ряд в сетку из двух равных колонок (body.mob .acts{grid-template-columns: repeat(2,minmax(0,1fr))}). Спрятанная кнопка колонку не освобождает - оставшаяся садится в первую из двух и прижимается к левому краю. Замер на 375 до правки: слева от кнопки 0, справа 163,91. Делаем одну колонку вместо двух и выключаем содержимое по центру. ШИРИНА 240 - та же, что у всех кнопок сайта после раздела 6 файла 00_obshchee.css. Здесь она повторена явно, чтобы кнопка не тянулась на всю колонку сетки. Замер после правки: слева и справа от кнопки поровну - 40,70 и 40,70 на 375, 60,20 и 60,20 на 414. Откат: удалить П4.1 - кнопка вернётся в левую колонку из двух. */ body.mob .track[data-h] .acts[data-h] { grid-template-columns: minmax(0, 1fr); justify-items: center; } body.mob .track[data-h] .acts[data-h] .act[data-h] { width: 240px; max-width: 100%; }