/* ═══════════════════════════════════════════════════════════════════════ Услуги нашего Бюро переводов ──────────────────────────── Четыре карточки в ряд, красная кнопка «Смотреть все услуги» под блоком. ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА. Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы над разными блоками можно было работать одновременно и правки не затирали друг друга. ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ: 1. Пиши сюда только то, что относится к этому блоку. Общее - карточки, тени, ритм между блоками, заголовки разделов - в 00_obshchee.css. 2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает их при равной силе селектора. Но эталонные стили (css/etalon/*) написаны через [data-h] и [data-b] - против них пиши той же формы селектор или сильнее, иначе правило молча проиграет. 3. Каждой правке - комментарий: что меняем, по чьей команде, и строка «Откат: …», чтобы можно было вернуть как было. 4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них ссылается манифест контрольных сумм. 5. Проверять замером на живой странице, а не на глаз. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ ОБЩЕЕ ПРАВИЛО ТРЁХ БЛОКОВ - «картинка + заголовок» одной высоты ─────────────────────────────────────────────────────────────────────── Задание Павла 17.08.2026. Правило ОДНО на три блока с одинаковой раскладкой карточки (слева картинка, справа заголовок, ниже текст во всю ширину карточки): 05 «Услуги нашего Бюро переводов…» .cards3.kart4 06 «Перевод по ключевым отраслям» .cards3.kart3:not(.ryadom) 09 «Наши преимущества … бизнеса» .cards3.korp Механика (раздел 05.1 ниже) лежит только здесь. В файлах C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\06_otrasli.css и C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\09_preimushchestva_biznesu.css только числа своего блока и ссылка на этот раздел. Блок 08 «Преимущества частным» (.cards3.kart3.ryadom) правилу НЕ подчиняется: там картинка сверху по центру, поэтому во всех селекторах стоит :not(.ryadom). ЧТО БЫЛО НЕ ТАК (замеры на localhost:8009, окно 1440×900): 1. Поясняющий текст начинался на разной высоте от верха карточки: блок 05 - от 81,6 до 143,2 точки; блоки 06 и 09 - 112 и 128,3. Причин две. Первая: заголовок то в одну строку, то в две. Вторая (главная): у карточки .card3 строки сетки не заданы, обе auto, а карточки в ряду тянутся до общей высоты - лишняя высота делилась между строками и первая строка «картинка + заголовок» разъезжалась у каждой карточки по-своему. 2. Картинка была мелкой: бокс 44×44 у услуг, 46×76 у отраслей и преимуществ, при исходниках 192×192 и 120×90. ЧТО СДЕЛАНО: - строки карточки заданы жёстко: `auto 1fr`. Первая строка ровно по содержимому, весь излишек высоты уходит во вторую (текст и ссылка). Поэтому верх текста одинаков во всех карточках блока; - под заголовок всегда резервируются ДВЕ строки (min-height 2lh), даже когда слов хватает на одну; - картинке отдана вся ширина карточки, оставшаяся от колонки заголовка, а высота бокса выведена из пропорции исходников. РАСЧЁТ ШИРИНЫ (не на глаз). Для каждого блока canvas measureText замерил самое длинное СЛОВО среди всех заголовков блока тем же шрифтом, каким набран заголовок: Inter, 650, 16px, интерлиньяж 20,8px. Замер сверен с живой вёрсткой - расхождение 0,0 точки. К ширине слова прибавлен запас 6 точек до правого края карточки, остаток ширины карточки отдан картинке. блок самое длинное слово слово колонка бокс картинки ──── ───────────────────── ─────── ──────── ───────────── 05 Корпоративные 128,84 135 px 75 × 75 06 Художественный 141,47 148 px 163 × 163 09 Конфиденциальность 176,86 183 px 128 × 96 Ширина карточки за вычетом полей: 224,5 (05) и 325,33 (06 и 09); зазор между картинкой и заголовком 14 точек. 05: 224,50 − 14 − 135 = 75,5 → бокс 75, колонка заголовка 135,5 06: 325,33 − 14 − 148 = 163,3 → бокс 163, колонка заголовка 148,3 09: 325,33 − 14 − 183 = 128,3 → бокс 128, колонка заголовка 183,3 Проверено отдельно: при такой колонке ни один заголовок блока не уходит на ТРЕТЬЮ строку (порог - 129, 142 и 177 точек соответственно, колонка шире порога во всех трёх блоках). Уже колонку делать нельзя: самое длинное слово порвётся переносом. Заголовки, которые физически не могут стать двухстрочными, потому что это одно слово или короткая пара: «Устный перевод» (06), «Тестовый перевод» и «Конфиденциальность» (09). У них две строки держит min-height, текст стоит в первой. Пропорция бокса. У блоков 05 и 06 исходники квадратные 192×192, бокс квадратный. У блока 09 это значки 120×90, 96×90, 115×90 - пропорция бокса 4/3, картинка вписывается по высоте и прижата влево, поэтому левая вертикаль у всех значков общая. Телефон не тронут: всё правило живёт внутри @media (min-width: 761px). На узком экране картинка у свёрнутой карточки скрыта эталонным правилом, и своя раскладка там уже есть. Откат: удалить разделы 05.1 и 05.2 из этого файла, а также разделы 06.1 и 09.1 из файлов 06_otrasli.css и 09_preimushchestva_biznesu.css. Вернётся вид до 17.08.2026: картинки 44 и 46 точек, заголовки в одну или две строки, текст на разной высоте. ═══════════════════════════════════════════════════════════════════════ */ /* ── 05.1. Механика (общая для блоков 05, 06 и 09) ────────────────────── */ @media (min-width: 761px) { /* Строки карточки: первая по содержимому, весь излишек - во вторую. Колонки: картинка = что осталось от карточки после колонки заголовка, но не шире своего потолка --kart-risunok. clamp не даёт колонке заголовка сжаться уже расчётной: на узком ноутбуке (1025-1180 точек) уменьшается картинка, а не заголовок. Откат: убрать эти два свойства - вернутся `auto minmax(0, 1fr)` и растягивание строк. */ .cards3[data-b].kart4 .card3[data-b], .cards3[data-b].kart3:not(.ryadom) .card3[data-b], .cards3[data-b].korp .card3[data-b] { --kart-zazor: 14px; grid-template-rows: auto 1fr; grid-template-columns: clamp(0px, calc(100% - var(--kart-zazor) - var(--kart-shapka, 135px)), var(--kart-risunok, 44px)) minmax(0, 1fr); } /* Картинка занимает свою колонку целиком. Высота - из пропорции блока, поэтому бокс одинаков у всех карточек и первая строка карточки везде одной высоты. Откат: вернуть height 44px (услуги) / 76px и max-width 46px. */ .cards3[data-b].kart4 .card3[data-b] .cardimg, .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .cardimg, .cards3[data-b].korp .card3[data-b] .cardimg { width: 100%; max-width: none; height: auto; aspect-ratio: var(--kart-proporciya, 1 / 1); object-fit: contain; object-position: left center; } /* Заголовок принудительно в две строки: под него резервируется высота двух строк, даже если текст встал в одну. 41.6px - запасной вариант для браузеров без единицы lh (2 × 20,8px). Откат: удалить обе строки min-height. */ .cards3[data-b].kart4 .card3[data-b] .foldh[data-b] > span[data-b]:first-child, .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldh[data-b] > span[data-b]:first-child, .cards3[data-b].korp .card3[data-b] .foldh[data-b] > span[data-b]:first-child { display: block; min-height: 41.6px; min-height: 2lh; } /* Вторая строка карточки тянется на всю оставшуюся высоту, поэтому ссылка «Подробнее…» встаёт по низу карточки (правило 4 гайда). Без этого align-items: center центрует текст в пустой строке. Откат: удалить align-self. */ .cards3[data-b].kart4 .card3[data-b] .foldb[data-b], .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldb[data-b], .cards3[data-b].korp .card3[data-b] .foldb[data-b] { align-self: stretch; } } /* ── 05.2. Числа блока 05 «Услуги нашего Бюро переводов» ──────────────── */ /* Самое длинное слово блока - «Корпоративные», 128,84 точки шрифтом Inter 650 16px. Плюс запас 6 точек = колонка заголовка 135. Остаток ширины карточки (224,5 − 14 − 135 = 75,5) отдан картинке: бокс 75×75, исходники квадратные 192×192, увеличения сверх исходника нет. Было: картинка 44×44, заголовок начинался в 82 точках от левого края карточки. Стало: картинка 75×75, заголовок в 113 точках. Откат: удалить этот блок переменных - механика вернётся к запасным значениям 135px / 44px и картинка станет как была. */ .cards3[data-b].kart4 { --kart-shapka: 135px; /* 76px, а не 100. Решение Павла 17.08.2026: «оставляем 76 только в услугах». Причина - арифметика: карточка 273px, за вычетом полей 225, из них 135 держит колонка заголовка (уже нельзя - порвётся слово «Корпоративные»), плюс промежуток 14. На картинку остаётся ровно 76. Поставить 100 можно было бы только тремя карточками в ряд вместо четырёх - Павел выбрал сохранить четыре. В отраслях и преимуществах бизнесу картинка 100x100. Откат: вернуть 100px, картинка сама упрётся в те же 76. */ --kart-risunok: 76px; --kart-proporciya: 1 / 1; } /* Размер картинки - 100x100 во всех трёх блоках (решение Павла 17.08.2026). Расчёт агента давал разные значения: 75 в услугах, 163 в отраслях, 128 в преимуществах - каждый блок брал максимум, который позволяла ширина его карточки. Формально верно, но рядом блоки выглядели разнокалиберно: карточка отраслей 313px против 242px у услуг. Павел выбрал одно число на все блоки - 100x100, как на действующем сайте academperevod.ru. Колонка заголовка при этом остаётся шире самого длинного слова, проверено замером. Откат: вернуть прежние значения 75 / 163 / 128. */ /* ═══════════════════════════════════════════════════════════════════════ 05.3. ТЕЛЕФОН: карточки плотнее (диктовка Павла 18.08.2026) ─────────────────────────────────────────────────────────────────────── Павел: «Технический перевод, экономический - то же самое. Для всех плашек, для всех блоков делаем существенно меньше расстояния между блоками - и по высоте, и по горизонтали», «сильно сокращаем шрифт», «и текст, который внутри написан, тоже сократить. Чтобы всё было компактнее». Одни и те же числа стоят в пяти блоках: 05 услуги, 06 отрасли, 08 преимущества частным, 09 преимущества бизнесу, 10 акции. Расчёт лежит здесь, в остальных файлах - ссылка на этот раздел и свои селекторы. ВНИМАНИЕ: кегли заголовка и текста карточки ПОЗЖЕ В ТОТ ЖЕ ДЕНЬ пересмотрены - см. раздел 05.4 в конце файла. Числа этого раздела (11 и 11) остались только у блоков 06 и 09: там крупнее не даёт слово «Конфиденциальность». У блоков 05, 08 и 10 стоит кегль плашки «24/7». ОТКУДА ЧИСЛА (замер на живой странице, окно 375 точек, body.mob). Считали от самого длинного слова во всех пяти блоках. Это «Конфиденциальность» из преимуществ бизнесу. Разрыв внутри слова запрещён (glavnaya.css, раздел 31: overflow-wrap: normal, word-break: normal), значит слово обязано влезть в карточку целиком - переносом задачу не решить, только размером. Сетка карточек на телефоне - две колонки шириной 305,41 точки на всех блоках галереи (в акциях 349,41: у них нет боковых полей .galp). При промежутке 10 карточка выходит 147,70; поля 8 слева и справа оставляют под содержимое 131,70. «Конфиденциальность» шрифтом заголовка (Inter, 650) занимает 154,75 точки при кегле 14 - значит 121,59 при кегле 11. Запас 10,11 точки. Следом идут «Сертифицированное» (116,14) и «Профессиональные» (111,32) - тоже с запасом. Ни одно слово ни в одном из пяти блоков шире не бывает, поэтому кегль 11 закрывает все пять. Что изменилось по числам (было -> стало): промежуток между карточками 18 -> 10 поля карточки 14/16 -> 9/8 кегль заголовка карточки 14 -> 11 (интерлиньяж 17,5 -> 13,75) кегль текста карточки 13,5 -> 11 (интерлиньяж 18,23 -> 14,85) ссылка «Подробнее» и промокод 12 -> 10,5 низ кнопки заголовка 32 -> 24 (палец всё ещё попадает) Отдельно - остаточный зазор внутри карточки. В блоках 05, 06 и 09 карточка это сетка «картинка | заголовок» с column-gap 14 точек (glavnaya.css, раздел 31). На телефоне у свёрнутой карточки картинка скрыта, колонка схлопывается в 0, а зазор 14 точек остаётся и молча съедает ширину заголовка: заголовку доставалось 97,70 вместо 111,70. Обнуляем зазор ровно у свёрнутой карточки - у раскрытой картинка возвращается, и 14 точек ей нужны. Компьютерный вид не задет: всё правило живёт под body.mob, а этот класс вешается только при ширине окна 640 точек и меньше (home/static/js/etalon/auto_mob.js). Откат раздела целиком: удалить всё ниже до конца файла - на телефоне вернутся промежуток 18, поля 14/16, кегли 14 и 13,5 и зазор 14 точек у свёрнутой карточки. ═══════════════════════════════════════════════════════════════════════ */ /* Промежуток между карточками. Откат: удалить правило - вернётся 18px из переменной --card-gap (glavnaya.css, раздел О2а). */ body.mob .cards3[data-b].kart4 { gap: 10px; } /* Поля карточки. Откат: удалить правило - вернутся 14px 16px (glavnaya.css, `body.mob .card3[data-b]`). */ body.mob .cards3[data-b].kart4 .card3[data-b] { padding: 9px 8px; } /* Зазор внутри свёрнутой карточки: картинки нет - зазор не нужен. Откат: удалить правило - вернутся column-gap 14px и row-gap 10px. */ body.mob .cards3[data-b].kart4 .card3[data-b]:not(.open) { column-gap: 0; row-gap: 6px; } /* Заголовок карточки - крупный кегль плашки «24/7» (пункт 7 раздела 05.4). Было 11px, стало 16px. Цвет и жирность не трогаем: цвет уже совпадает с эталоном, а Павел назвал только размер и цвет. Замер: «Корпоративные» при кегле 16 занимает 128,84 точки, под содержимое карточки отведено 131,70 - влезает. Откат: вернуть font-size 11px. */ body.mob .cards3[data-b].kart4 .card3[data-b] .foldh[data-b] { font-size: 16px; line-height: 1.25; min-height: 24px; } /* Отбивка под заголовком. Откат: удалить - вернутся 4px (--sp-1). */ body.mob .cards3[data-b].kart4 .card3[data-b] .foldwrap[data-b] { margin-bottom: 2px; } /* Отбивка над текстом карточки. Откат: удалить - вернутся 6px (--sp-2). */ body.mob .cards3[data-b].kart4 .card3[data-b] .foldb[data-b] { margin-top: 4px; } /* Текст карточки - мелкий кегль плашки «24/7» (пункт 7 раздела 05.4). Было 11px, стало 10,8px. Интерлиньяж уже 1,35, а 10,8 × 1,35 = 14,58 - ровно эталонные 14,58px. Цвет совпадает с эталоном и без правки. Откат: вернуть font-size 11px. */ body.mob .cards3[data-b].kart4 .card3[data-b] .foldb[data-b] p[data-b] { font-size: 10.8px; line-height: 1.35; margin-bottom: 4px; } /* Ссылка «Подробнее…». Правка 19.08.2026: 10,5 -> 10,8 px. Задание Павла в справочнике кеглей телефонной версии (C:\Users\Павел\Claude\Projects\Вебсайт\ШРИФТЫ_МОБИЛЬНЫЕ 2.docx, таблица «Услуги», строка «Ссылка „Подробнее“»): «10,8 px». Это мелкая строка образца «24/7» - тем самым ссылка перестаёт быть единственным размером в карточке, который к образцу не приведён. Меняем только кегль: множитель 1,3 остаётся, межстрочный 13,65 -> 14,04. Курсив, цвет и жирность не трогаем - Павел назвал размер. Замер на 375 до: 10,5 / 13,65. После: 10,8 / 14,04. Компьютер не задет: правило под body.mob, на 1440 остаётся 13 / 16,9. Откат: вернуть font-size 10.5px (а без всего правила - 12px из --fs-sec). */ body.mob .cards3[data-b].kart4 .card3[data-b] .go[data-b] { font-size: 10.8px; line-height: 1.3; } /* ═══════════════════════════════════════════════════════════════════════ 05.4. ТЕЛЕФОН: кегль карточек по плашке «24/7» и посадка полосы галереи ─────────────────────────────────────────────────────────────────────── Диктовка Павла 18.08.2026, пункты 7, 8 и 9. Разбор общий на несколько блоков, поэтому лежит здесь; в файлах 06, 08, 09 и 10 - только свои селекторы и ссылка сюда. ── ПУНКТ 7. Кегль «как 24/7» ───────────────────────────────────────── Павел: «Ровно такого же размера нужно сделать блоки „Паспорта и удостоверения“ - то есть паспорта и удостоверения должны быть как 24/7, „онлайн“ и так далее, и водительские права; я имею в виду этот блок полностью. Дальше „Заказ срочного перевода“ - тоже сделать таким же по размеру, то есть заголовок и сам текст акций, спецпредложений сделать таким же размером и цветом». ОБРАЗЕЦ - плашка первого экрана .buls.common .bul. Замер на 375 точках: крупная строка .bn 16px / 16px / 700 / rgb(27, 27, 27) мелкая строка .bt 10,8px / 14,58px / 400 / rgb(61, 66, 71) Карточка до правки: заголовок .foldh 11px / 13,75px / 650 / rgb(27, 27, 27) текст .foldb p 11px / 14,85px / 400 / rgb(61, 66, 71) ЦВЕТА УЖЕ СОВПАДАЮТ - и у заголовка, и у текста, точь-в-точь. Менять нечего, и это стоит сказать Павлу: он просил «размером и цветом», а расходился только размер. Жирность не трогаем. Павел назвал размер и цвет; по правилу из glavnaya.css (раздел 35) меняется ровно то, что помечено, остальное - цвет, жирность - остаётся как было. Поэтому заголовок остаётся 650, а не становится 700, как у плашки. Интерлиньяж заголовка остаётся 1,25, хотя у плашки он 1,0. У плашки одна строка с цифрой, а заголовок карточки переносится на две-три: при 1,0 строки сцепляются выносными элементами (р, у, д). У текста интерлиньяж 1,35 уже стоял, и 10,8 × 1,35 = 14,58 - ровно эталонное число, ничего править не пришлось. ГДЕ КЕГЛЬ 16 НЕ ПОСТАВИТЬ. Разрыв внутри слова запрещён (glavnaya.css, раздел 31: overflow-wrap normal, word-break normal), значит самое длинное слово блока обязано влезть в карточку целиком - иначе оно вылезет за карточку. Замер canvas measureText шрифтом заголовка (Inter, 650) на 375 точках; под содержимое карточки отведено 131,70 точки, в акциях - 153,70: блок самое длинное слово при 11 при 16 доступно потолок кегля ──── ──────────────────── ────── ─────── ──────── ───────────── 05 Корпоративные 88,58 128,84 131,70 16,35 да 06 Художественный 97,26 141,47 131,70 14,89 нет 08 переводчиков 78,98 114,88 131,70 18,34 да 09 Конфиденциальность 121,59 176,86 131,70 11,91 нет 10 нотариального 83,21 121,03 153,70 20,32 да Кегль 16 поставлен в блоках 05, 08 и 10 - ровно в тех, что назвал Павел («Паспорта и удостоверения» и «Водительские права» - блок 05, «Заказ срочного перевода» - блок 08, акции и спецпредложения - блок 10). Блоки 06 «Перевод по ключевым отраслям» и 09 «Преимущества бизнесу» ОСТАВЛЕНЫ НА 11. Их Павел не называл, а поставить им 16 нельзя: «Конфиденциальность» вылезет за карточку на 45 точек, «Художественный» - на 10. Решение за Павлом, варианты: разрешить перенос внутри слова; опустить эти два блока до их потолка (14,89 и 11,91); перевести их на один столбец, как уже сделано для узких экранов в разделе 09.2. Побочный эффект, о котором надо знать: 05 и 06 - две стороны одного переключателя «Частным / Компаниям», поэтому при переключении кегль заголовков заметно меняется. То же у пары 07 и 09. ЧТО ИЗ ПУНКТА 7 ПОЗЖЕ ОТМЕНЕНО. Вечером того же дня, пункт 23, Павел назвал кегль 16 в акциях слишком большим и дал блокам 06, 09 и 10 новый образец - буллеты сегмента «Компаниям». Кегль заголовка там теперь 11,2px; блоки 05 и 08 остались на 16. Разбор - раздел 05.5 ниже. Откат пункта 7: вернуть font-size 11px заголовку и тексту карточки в файлах 05, 08 и 10. ── ПУНКТЫ 8 и 9. Полоса галереи стояла на 22 точки левее страницы ──── Павел, пункт 8: «Блоки „Услуги нашего бюро переводов с нотариальным заверением“, „Как получить готовый перевод“, „Преимущества для частных заказчиков“ - они стоят неровно, не отцентрованы. „Акции и спецпредложения“ нормально». Павел, пункт 9: «У преимуществ для частных заказчиков тени снизу не видны, граница идёт под обрез и очень некрасиво, как-то слева очень некрасиво… У акций тень дальше идёт, видно, что растворяется, а в преимуществах для частных заказчиков она обрезается». ОДНА ПРИЧИНА НА ОБА ПУНКТА. В glavnaya.css (раздел О2) полосе галереи задано `.galp { padding: 0 22px; margin-inline: -22px }` - поле под тень, вынесенное наружу. На компьютере это работает. На телефоне полоса лежит в сетке .rail с колонками ровно по ширине дорожки, ширина колонки фиксирована, и отрицательное поле полосу НЕ РАСШИРИЛО, а только сдвинуло влево на 22 точки. Замер на 375: дорожка .track.gal 12,8 … 362,2 (ширина 349,4) полоса .galp -9,2 … 340,2 (ширина та же 349,4, сдвинута) содержимое полосы 12,8 … 318,2 (ширина 305,4) Отсюда обе беды сразу: 1. Содержимое полосы стоит не по центру страницы. Его середина - 165,5 при середине страницы 187,5, то есть на 22 точки левее. Заголовок выключен по центру, но по центру СВОЕЙ коробки, а коробка съехала - Павел это и увидел. Образец «Акции и спецпредложения» - обычная секция .blk, у неё коробка 12,8 … 362,2, ровно по колонке страницы. 2. Тень карточки (0 10px 20px, glavnaya.css раздел 29.3) режется. У дорожки .track.gal стоит overflow: hidden - он нужен переключателю «Частным / Компаниям», чтобы прятать неактивную сторону. Замер запаса от карточек до края обрезки: слева 0 точек - тень срезана начисто, отсюда «слева некрасиво» справа 44 точки - тень видна целиком, отсюда перекос снизу 0,2 точки - тень срезана начисто, отсюда «белая черта» У «Акций» обрезки над карточками нет вообще, тень уходит в поля страницы и растворяется - потому этот блок и выглядит правильно. ПРАВИЛО ПАВЛА НА БУДУЩЕЕ (записано по его прямому указанию): БЕЛАЯ ЧЕРТА НЕ ДОЛЖНА ОТРЕЗАТЬ ФОН НИКОГДА. ФОН РАСТВОРЯЕТСЯ В БЕЛОМ. Практически это значит: если над блоком с тенями стоит overflow, между краем содержимого и краем обрезки нужен запас не меньше, чем уходит тень - у нашей тени это 20 точек вниз (сдвиг 10 плюс половина размытия 20) и по 10 точек вбок. ЧТО СДЕЛАНО (только телефон, только свои полосы): а) отрицательное поле полосы обнулено. Полоса встаёт ровно в свою колонку 12,8 … 362,2, а её собственные поля по 22 точки остаются ВНУТРИ обрезки - и превращаются в тот самый запас под тень. Заодно содержимое встаёт по центру страницы: было 165,5, стало 187,5; б) заголовку раздела возвращены поля страницы: margin-inline -22px гасит поле полосы, и коробка заголовка становится 12,8 … 362,2 - ровно как у образца «Акции и спецпредложения», с той же выключкой по центру и теми же переносами; в) полосе добавлено нижнее поле 22 точки - запас под тень нижнего ряда карточек внутри обрезки. Высоту дорожки сценарий берёт как offsetHeight активной полосы (js/etalon/interactive.js), а offsetHeight считает поля, поэтому дорожка вырастает сама и тень помещается целиком. 22 - то же число, что по бокам, и его хватает: тень уходит на 20 точек. ЧИСЛА ОБРАЗЦА «АКЦИИ И СПЕЦПРЕДЛОЖЕНИЯ» (для блока 07 «Как получить готовый перевод», его правит другой агент; полосы gh-3 в этом файле нет): заголовок h2: коробка 12,8 … 362,2, ширина 349,4, выключка по центру, margin 0 0 50px, кегль 18,5px / 1,2 / 700 / rgb(27, 27, 27). Чтобы полоса gh-3 встала так же, ей нужны те же три правила, что ниже, - с её собственным aria-labelledby. ПОБОЧНЫЙ ЭФФЕКТ, который надо показать Павлу: нижнее поле 22 точки увеличивает просвет от последнего ряда карточек до следующего заголовка с 50 до 72 точек. Часть просвета теперь занимает сама тень, поэтому на глаз прибавка меньше 22, но она есть. Если Павел захочет вернуть ритм точно, нижний отступ дорожки надо уменьшить на те же 22 точки в файле C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css (раздел 1.2, `.galwrap[data-b] .track[data-b].gal { margin-bottom }`) - это чужой файл, сам не трогаю. Компьютерный вид не задет: все правила живут под body.mob, а класс вешается только при ширине окна 640 точек и меньше (home/static/js/etalon/auto_mob.js). Проверено замером на 1440. Откат пунктов 8 и 9: удалить два правила ниже - полоса вернётся на 22 точки влево, заголовок снова уедет от центра, тень снизу и слева снова будет срезаться. ═══════════════════════════════════════════════════════════════════════ */ /* Полоса «Услуги нашего Бюро переводов» - привязка по aria-labelledby: класс .galp один на все полосы галереи, а править надо только свою. gh-1 - эта полоса, gh-2 - отрасли, gh-3 - «Как получить» (чужой файл), gh-4 - преимущества бизнесу, gh-5 - преимущества частным. */ body.mob .galp[data-b][aria-labelledby="gh-1"] { margin-inline: 0; /* ПРАВКА 19.08.2026: то же число, но из общей переменной - его вычитает из ритма правило 5.2 в 00_obshchee.css. Откат: вернуть 22px. */ padding-bottom: var(--zapas-galerei, 22px); } /* max-width обязателен вместе с отрицательным полем. В dvizhok.css стоит страховка от горизонтальной прокрутки `body.mob .wrap * {max-width:100%}`; 100% считается от коробки полосы (305,4), поэтому без отмены заголовок от отрицательных полей только сдвигался влево, а не расширялся - проверено замером. За край страницы заголовок при этом не выходит: 12,8 … 362,2 - ровно колонка страницы. Откат: удалить правило - заголовок вернётся в коробку полосы. */ body.mob .galp[data-b][aria-labelledby="gh-1"] > h2[data-b] { margin-inline: -22px; max-width: none; } /* ═══════════════════════════════════════════════════════════════════════ 05.5. ТЕЛЕФОН: образец «Компаниям» и выключка свёрнутой карточки ─────────────────────────────────────────────────────────────────────── Диктовка Павла 18.08.2026, пункты 22, 23 и 27. Разбор общий на блоки 05, 06, 09 и 10, поэтому лежит здесь; в остальных файлах - свои селекторы и ссылка сюда. ── ОБРАЗЕЦ. Буллеты сегмента «Компаниям» ───────────────────────────── Павел, пункт 22: «возвращаемся к „Компаниям“: такой же шрифт, где „150 400“, „до 70 %“, ты ставишь там, где у нас идёт перевод ключевых отраслей - технический перевод, экономический перевод. Такой же текст должен быть там, где „тестовый перевод“, „профессиональные переводчики“ - по размеру такой же, как „150 400 лексических единиц“». Пункт 23: «акции и спецпредложения - здесь у тебя слишком большой шрифт, нужно сделать такой же, как „2 часа“, „150 400“». Буллет «Компаниям» (#kompaniyam .buls.seg .bul) - это ТРИ строки, а не две. Замер на живой странице, окно 375 точек, body.mob: .bn «150 400», «До 70 %», «2 часа» 16px / 16px / 700 / rgb(27, 27, 27) .bb «лексических единиц», «2 часа» -> «на договор и NDA» 11,2px / 14px / 650 / rgb(27, 27, 27) .bt «Терминологические глоссарии…» 10,8px / 14,58px / 400 / rgb(61, 66, 71) Заголовок карточки берёт строку .bb - 11,2px, а не .bn - 16px. Причины три, и все проверяемые: 1. Арифметика. Разрыв внутри слова запрещён (glavnaya.css, раздел 31), значит самое длинное слово блока обязано влезть в карточку целиком. Под содержимое карточки на телефоне отведено 131,70 точки (в акциях 153,70). Замер canvas measureText шрифтом заголовка (Inter, 650): блок самое длинное слово при 11,2 при 16 доступно 16 влезает ──── ──────────────────── ──────── ─────── ──────── ────────── 05 Корпоративные 90,19 128,84 131,70 да 06 Художественный 99,03 141,47 131,70 нет, +9,77 09 Конфиденциальность 123,80 176,86 131,70 нет, +45,16 10 нотариального 84,73 121,04 153,70 да В блоках 06 и 09 кегль 16 физически не помещается: «Художественный» вылезет за карточку на 9,77 точки, «Конфиденциальность» - на 45,16. Это ровно то, о чём Павлу сказано вчера, и с тех пор ширина карточки не изменилась. 2. Пункт 23 сам это подтверждает. В акциях заголовок УЖЕ стоял 16px - то есть ровно .bn образца, - и именно его Павел назвал «слишком большим», указав на «2 часа» и «150 400». Значит под этими словами он имеет в виду не кегль цифры, а размер буллета целиком, а в нём словесная часть набрана 11,2. 3. Роль и начертание. Цифра .bn - 700, а .bb («лексических единиц») - 650, ровно как заголовок карточки, и того же цвета rgb(27, 27, 27). Заголовок карточки - именная группа, а не число, его пара в образце это .bb. ЧТО ОСТАЛОСЬ НА ВЫБОР ПАВЛА. Если кегль 16 в отраслях и преимуществах бизнесу нужен именно как цифра, есть только два честных варианта, оба меняют вид блока сильнее, чем кегль: - перевести эти два блока на ОДИН столбец на телефоне (карточка становится 305,41, под содержимое 289,41 - 16px влезает с запасом, но блок вытягивается вдвое по высоте); - разрешить перенос внутри слова (тогда «Конфиденциаль-ность»). Сам не выбираю - решение за Павлом. ЧТО ЗДЕСЬ НЕ ТРОГАЛОСЬ. Блок 05 «Услуги нашего Бюро переводов» остаётся на кегле 16: пункт 22 назвал отрасли и преимущества бизнесу, пункт 23 - акции, а услуги Павел принял вчера по образцу «24/7» и в этой диктовке не назвал. Побочный эффект, о котором надо знать: 05 и 06 - две стороны одного переключателя «Частным / Компаниям», и после этой правки при переключении кегль заголовков меняется с 16 на 11,2. После пункта 23 блок 05 остаётся единственным на кегле 16 из четырёх. Если Павел захочет ровно, услугам надо поставить те же 11,2 - одна строка в разделе 05.3 этого файла. Текст карточки (.foldb p) - строка .bt образца, 10,8px / 14,58px. То же число приходит и со второй стороны: пункт 22 требует равнять раскрывающийся текст на пояснение блока 07 «Как получить готовый перевод», а там замер даёт ровно 10,8px / 14,58px / 400 (цвет там свой, бордовый rgb(145, 26, 34), его не переносим - Павел назвал размер). В блоках 05 и 10 текст карточки уже стоял 10,8 / 14,58 и правки не потребовал, в 06 и 09 было 11 / 14,85. ── ВЫКЛЮЧКА. Свёрнутая карточка по центру, раскрытая - влево ────────── Павел, пункт 22: «кроме того, в этих блоках текст сделать по центру: когда он в таком виде - он по центру, когда нажимаешь - он ближе к левому краю, вот таким образом». Пункт 27: «услуги нашего бюро переводов с нотариальным заверением - там, где нераскрытые карточки, „паспорта и удостоверения“, „справки“, давай сделаем их по центру, не слева». Правило одно на блоки 05, 06 и 09: пока карточка свёрнута, её заголовок выключен по центру; как только она раскрылась (класс .open), всё возвращается к выключке влево. Поэтому селектор кончается на `.card3:not(.open)` - раскрытое состояние правило не задевает вовсе. Почему два свойства, а не одно (то же, что в разделе 1 файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\10_akcii.css): justify-content двигает саму коробку заголовка - кнопка .foldh это flex со `space-between` из эталона, короткий заголовок в одну строку прижимался к левому краю; text-align выравнивает строки внутри, когда заголовок в две-три строки и занимает всю ширину карточки. Знак «+» правило не задевает: он position: absolute в правом нижнем углу карточки (glavnaya.css, «Один вид на все плюсы»), из потока кнопки выключен, поэтому заголовок центруется по всей ширине карточки, а не со сдвигом на ширину плюса. Наезда строк на плюс нет - проверено замером прямоугольников строк против прямоугольника плюса во всех карточках трёх блоков. Блок 10 «Акции и спецпредложения» этому правилу не подчиняется: там заголовок стоит по центру ВСЕГДА, в обоих состояниях - так Павел попросил 17.08.2026 (раздел 1 файла 10_akcii.css), и в этой диктовке он это не отменял. Компьютерный вид не задет: все правила живут под body.mob, а класс вешается только при ширине окна 640 точек и меньше (home/static/js/etalon/auto_mob.js). Проверено замером на 1440. Откат раздела: удалить правило ниже (услуги вернутся к выключке влево в свёрнутом виде) и такие же правила из разделов 06.4 и 09.4; в 06 и 09 вернуть font-size 11px заголовку и тексту карточки, в 10 - 16px заголовку. ═══════════════════════════════════════════════════════════════════════ */ /* Свёрнутая карточка услуг - заголовок по центру (пункт 27). Откат: удалить правило - вернутся `justify-content: space-between` и `text-align: left` из эталона, заголовок снова прижмётся влево. */ body.mob .cards3[data-b].kart4 .card3[data-b]:not(.open) .foldh[data-b] { justify-content: center; text-align: center; } /* ── 05.6. Узкий телефон: кегль 16 в услугах не помещается ────────────── Найдено замером при проверке пунктов 22, 23 и 27 (18.08.2026, вечер). Правка НЕ по отдельной команде Павла - по общему его требованию: заголовок карточки не должен вылезать за карточку. Кегль 16 поставлен утром по пункту 7 и проверялся только на 375 точках, где он влезает впритык. На узких телефонах не влезает. Ширина содержимого карточки этого блока считается так (полоса галереи, две колонки, промежуток 10, поля карточки по 8): содержимое = ширина окна / 2 − 55,795 Замер сходится с формулой точка в точку: 375 -> 131,70; 360 -> 124,21; 320 -> 104,21. Самое длинное слово блока «Корпоративные» при кегле 16 занимает 128,84, значит порог - 369,3 точки ширины окна. Ниже порога слово выходит за карточку: на 360 - на 4,64 точки, на 320 - на 24,64. Разрыв внутри слова запрещён (glavnaya.css, раздел 31), поэтому вопрос решается только кеглем. Ниже порога ставим 11,2px - тот же кегль образца «Компаниям», что уже стоит в блоках 06, 09 и 10 (раздел 05.5). «Корпоративные» при 11,2 занимает 90,19 при 104,21 доступных на 320 - запас 14,02. Порог округлён до 374: на 375 кегль 16 остаётся (это ширина, на которой Павел смотрел и принимал утреннюю правку), а в промежутке 370-374 запас меньше 3 точек и держаться за него незачем. Страницу вбок не тянуло и до правки (карточка обрезает лишнее сама, `body.mob .wrap * {max-width:100%}` в dvizhok.css), беда была ровно в том, что текст лез на границу карточки. ТО ЖЕ САМОЕ ЕСТЬ В БЛОКЕ 08 «Преимущества для частных заказчиков»: там тоже кегль 16 с утра, и на 320 точках «1500+ отраслевых переводчиков» выходит за карточку на 10,67 точки. Файл C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\08_preimushchestva_chastnym.css чужой, сам не трогаю - передаю замер. Откат: удалить медиазапрос - на узких телефонах вернётся кегль 16 и выход заголовков за карточку. */ @media (max-width: 374px) { body.mob .cards3[data-b].kart4 .card3[data-b] .foldh[data-b] { font-size: 11.2px; } } /* ── Кегль 13: услуги (диктовка Павла 20.08.2026) ───────────────────────── Правки из книги замера «ШРИФТЫ_МОБИЛЬНЫЕ применить на стр. О компании». Число кегля - переменная --kegl-melkij, задана в C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css 1. Поясняющий текст карточки и ссылка «Подробнее»: было 10,8px, стало 13px. Селекторы те же, что в разделах выше по файлу, - правила ниже по файлу перебивают их порядком, без !important. 2. Текст карточки и ссылка «Подробнее» - по центру. Павел: «Разместить текст по центру а не по левому краю». Выключка ставится раскрывающейся части карточки (.foldb), а не абзацу: «Подробнее» - строчная ссылка, на ней самой text-align ничего не делает. Но сама ссылка ещё и флексбокс во всю ширину (в нём надпись и стрелка «›»), и выключка родителя её не двигает - поэтому вторым правилом центруется содержимое самого флексбокса. Откат: удалить раздел - текст вернётся к 10,8px и к левому краю. ─────────────────────────────────────────────────────────────────────── */ body.mob .cards3[data-b].kart4 .card3[data-b] .foldb[data-b] p[data-b], body.mob .cards3[data-b].kart4 .card3[data-b] .go[data-b] { font-size: var(--kegl-melkij); } body.mob .cards3[data-b].kart4 .card3[data-b] .foldb[data-b] { text-align: center; } body.mob .cards3[data-b].kart4 .card3[data-b] .go[data-b] { justify-content: center; } /* ═══════════════════════════════════════════════════════════════════════ У-К. Постамент кнопки «Смотреть все услуги» больше не обрезается ═══════════════════════════════════════════════════════════════════════ ОТКУДА ПРИЕХАЛО. 21.08.2026 Павел принял вид страницы «О компании» как окончательный и велел перенести всё на главную. Правило переехало сюда из примерочного слоя C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\test_o_kompanii_ekran.css (пункт 5.1; слой удалён). Там же было записано, что место этой правке - именно здесь, в файле блока услуг. ЧТО ПОЙМАЛ ЗАМЕР. У кнопки «Смотреть все услуги» нарисовано 51,00 точки вместо положенных 54,19 - нижние 3,19 срезаны. Срезает их обёртка ленты услуг: у .track.gal стоит overflow:hidden (лента ездит вбок, и её нужно подрезать по краям), а низ кнопки приходится ровно на нижний край этой обёртки - 2574,28 против 2573,94. Постамент кнопки лежит на 3 точки ниже и целиком уходит под обрез. Из-за этого у кнопки видна не вся дуга: срез верхнего угла 3,18 кв. точки, нижнего - 0,59. Радиусы при этом одинаковые. Именно эту кнопку Павел назвал 18.08, когда сказал, что низ квадратный, и именно её тогда лечили радиусом 12px, приняв обрез за работу тени. Правку с радиусом 12px отменил раздел 6 файла 00_obshchee.css, здесь чинится сам обрез. ЛЕЧЕНИЕ. Обёртке даётся 4 точки нижнего поля - обрезка считается по краю поля, и постамент помещается целиком. НИЧЕГО НЕ СЪЕЗЖАЕТ. Высоту обёртки сценарий js/etalon/interactive.js задаёт числом в атрибуте style (height: 747px, у соседних лент 510 и 619), и она остаётся прежней: поле добавляется внутрь, потому что у обёртки box-sizing: border-box. Замер после правки: высоты 747 / 510 / 619 - те же, высота всей страницы та же. Слепок геометрии всех элементов страницы до и после показывает единственное расхождение: padding-bottom 0px → 4px у трёх обёрток .track.gal. Больше ни один элемент не сдвинулся ни на сотую. По горизонтали ничего не меняется: поле только нижнее, боковая обрезка ленты остаётся как была. Правило берёт все три ленты, а не одну: у остальных под обрез ничего не попадает, а разводить исключения там, где правка ничего не двигает, незачем. ПРОВЕРКА КАРТИНКОЙ. Снимок нижнего левого угла кнопки с шестикратным увеличением: без правила низ кнопки обрублен по прямой и угол выглядит срезанным, с правилом дуга видна целиком и совпадает с верхней. Числами: срез угла верх 3,18 / низ 0,59 без правила и 3,18 / 3,20 с ним. Здесь же живёт правило Павла «белая черта не должна отрезать фон никогда» - эта правка ровно про него. Откат: удалить У-К - постамент снова обрежется, низ этой кнопки опять будет казаться площе верха. */ body .track.gal { padding-bottom: 4px; }