/* ═══════════════════════════════════════════════════════════════════════ Перевод по ключевым отраслям ──────────────────────────── Три столбца карточек с картинкой, заголовком, текстом и ссылкой. ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА. Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы над разными блоками можно было работать одновременно и правки не затирали друг друга. ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ: 1. Пиши сюда только то, что относится к этому блоку. Общее - карточки, тени, ритм между блоками, заголовки разделов - в 00_obshchee.css. 2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает их при равной силе селектора. Но эталонные стили (css/etalon/*) написаны через [data-h] и [data-b] - против них пиши той же формы селектор или сильнее, иначе правило молча проиграет. 3. Каждой правке - комментарий: что меняем, по чьей команде, и строка «Откат: …», чтобы можно было вернуть как было. 4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них ссылается манифест контрольных сумм. 5. Проверять замером на живой странице, а не на глаз. ═══════════════════════════════════════════════════════════════════════ */ /* ── 06.1. Числа блока 06 «Перевод по ключевым отраслям» ──────────────── */ /* Задание Павла 17.08.2026: «картинка + заголовок» одной высоты, текст во всех карточках начинается на одном уровне. МЕХАНИКА ЗДЕСЬ НЕ ПОВТОРЯЕТСЯ. Она одна на три блока (05, 06, 09) и описана в разделе 05.1 файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\05_uslugi.css Там же полный расчёт и таблица чисел по всем трём блокам. Здесь - только значения этого блока. Расчёт для блока 06. Самое длинное слово среди заголовков - «Художественный», 141,47 точки шрифтом заголовка (Inter, 650, 16px, интерлиньяж 20,8px), замер canvas measureText сверен с живой вёрсткой. Плюс запас 6 точек до правого края = колонка заголовка 148. Ширина карточки за вычетом полей 325,33; зазор 14: 325,33 − 14 − 148 = 163,3 → бокс картинки 163×163. Колонка заголовка получается 148,3 точки, до правого края остаётся 6,86 точки - самое длинное слово не рвётся. Порог трёх строк - 142 точки, колонка шире, значит ни один заголовок блока на третью строку не уходит. Исходники квадратные 192×192, пропорция бокса 1/1, увеличения сверх исходника нет. «Устный перевод» физически встаёт в одну строку (131,4 точки при колонке 148,3) - вторую строку под ним держит min-height. Было: картинка 46×76, заголовок начинался в 84 точках от левого края карточки, верх текста 112 и 128,3 точки от верха карточки. Стало: картинка 163×163, заголовок в 201 точке, верх текста один. Откат: удалить этот раздел - механика возьмёт запасные значения и картинка вернётся к прежнему размеру. */ .cards3[data-b].kart3:not(.ryadom) { --kart-shapka: 148px; --kart-risunok: 100px; /* было 163px - см. пояснение в конце файла */ --kart-proporciya: 1 / 1; } /* Размер картинки - 100x100 во всех трёх блоках (решение Павла 17.08.2026). Расчёт агента давал разные значения: 75 в услугах, 163 в отраслях, 128 в преимуществах - каждый блок брал максимум, который позволяла ширина его карточки. Формально верно, но рядом блоки выглядели разнокалиберно: карточка отраслей 313px против 242px у услуг. Павел выбрал одно число на все блоки - 100x100, как на действующем сайте academperevod.ru. Колонка заголовка при этом остаётся шире самого длинного слова, проверено замером. Откат: вернуть прежние значения 75 / 163 / 128. */ /* ── 06.2. Телефон: карточки плотнее (диктовка Павла 18.08.2026) ──────── */ /* Павел: «Технический перевод, экономический - то же самое. Для всех плашек, для всех блоков делаем существенно меньше расстояния между блоками - и по высоте, и по горизонтали». ЧИСЛА И РАСЧЁТ ЗДЕСЬ НЕ ПОВТОРЯЮТСЯ. Они одни на пять блоков (05, 06, 08, 09, 10) и разобраны в разделе 05.3 файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\05_uslugi.css Коротко: промежуток между карточками 18 -> 10, поля 14/16 -> 9/8, заголовок 14 -> 11, текст 13,5 -> 11, ссылка 12 -> 10,5, остаточный зазор картинки 14 -> 0 у свёрнутой карточки. Самое длинное слово блока - «Художественный»: 123,79 точки при кегле 14, значит 97,26 при кегле 11. Под содержимое карточки на телефоне остаётся 131,70 - запас 34,44 точки, в одну строку и без выхода за край. Компьютерный вид не задет: правила живут под body.mob, класс вешается при ширине окна 640 точек и меньше. Откат: удалить весь раздел 06.2 - на телефоне вернутся промежуток 18, поля 14/16, кегли 14 и 13,5 и зазор 14 точек у свёрнутой карточки. */ body.mob .cards3[data-b].kart3:not(.ryadom) { gap: 10px; } body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] { padding: 9px 8px; } body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b]:not(.open) { column-gap: 0; row-gap: 6px; } /* Заголовок карточки - крупная строка образца «24/7», 16px. ПРАВКА 19.08.2026. Задание Павла в справочнике кеглей телефонной версии (C:\Users\Павел\Claude\Projects\Вебсайт\ШРИФТЫ_МОБИЛЬНЫЕ 2.docx, таблица «Отрасли», строка «Заголовок карточки»): «Сделать 16 px. Художественный заменить на Деловой». ПОЧЕМУ 16 СТАЛО ВОЗМОЖНО. 18.08 кегль держали на 11,2 из-за одного слова: «Художественный» при 16 занимал 141,47 точки при 131,70 доступных и вылезал за карточку на 9,77. Павел решил это не кеглем, а текстом - карточка переименована в «Деловой перевод». После замены самое длинное слово блока - «Экономический»: 130,24 точки при 131,70, запас 1,46. Влезает. Межстрочный множитель 1,25 остаётся: 16 × 1,25 = 20 - ровно образец (крупная строка «24 / 7» набрана 16 / 16, у заголовка карточки услуг тот же 16 / 20, к нему и приводим). Цвет rgb(27, 27, 27) и жирность 650 не трогаем. Замеры самых длинных слов при кегле 16 (canvas measureText шрифтом заголовка, сверено с живой вёрсткой): «Экономический» 130,24 · «Юридический» 114,27 · «Медицинский» 113,09 «Технический» 104,88 · «Деловой» 71,47 · «перевод» 68,20 Доступная ширина считается как у услуг (полоса галереи, две колонки, промежуток 10, поля карточки по 8): ширина окна / 2 − 55,795. 414 -> 151,20 (запас 20,96) 375 -> 131,70 (запас 1,46) 360 -> 124,20 (не хватает 6,04) 320 -> 104,20 (не хватает 26,04) Порог - 373 точки; округляем до 374, как это уже сделано для услуг (раздел 05.6 файла 05_uslugi.css), чтобы оба блока переключались на одной ширине. Ниже порога возвращается 11,2px - строка .bb образца «Компаниям»; при ней «Экономический» занимает 91,17 и влезает даже на 320 (доступно 104,20, запас 13,03). Замер на 375 до: 11,2 / 14. После: 16 / 20. Компьютер не задет: правило под body.mob, на 1440 остаётся 16 / 20,8. Откат: вернуть font-size 11.2px и удалить медиазапрос ниже. */ body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldh[data-b] { font-size: 16px; line-height: 1.25; min-height: 24px; } /* Узкий телефон: 16 не помещается, возвращаем 11,2 (расчёт выше). Откат: удалить медиазапрос - на узких телефонах заголовки вылезут за карточку. */ @media (max-width: 374px) { body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldh[data-b] { font-size: 11.2px; } } body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldwrap[data-b] { margin-bottom: 2px; } body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldb[data-b] { margin-top: 4px; } /* Раскрывающийся текст карточки - строка .bt образца «Компаниям» и одновременно пояснение блока 07 «Как получить готовый перевод» («Отправим готовый перевод…»), оба замера дают одно число: 10,8px / 14,58px / 400. Было 11px / 14,85px. Интерлиньяж 1,35 уже стоял, а 10,8 × 1,35 = 14,58 - править нечего. Цвет rgb(61, 66, 71) совпадает с образцом; бордовый цвет пояснения блока 07 не переносим - Павел назвал размер. Пункт 22 диктовки 18.08.2026. Откат: вернуть font-size 11px. */ body.mob .cards3[data-b].kart3:not(.ryadom) .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. Задание Павла в справочнике кеглей телефонной версии, таблица «Отрасли», строка «Ссылка „Подробнее“»: «10,8 px» - мелкая строка образца «24/7». Меняем только кегль, множитель 1,3 остаётся: межстрочный 13,65 -> 14,04. Замер на 375 до: 10,5 / 13,65. После: 10,8 / 14,04. Компьютер не задет: на 1440 остаётся 13 / 16,9. Откат: вернуть font-size 10.5px. */ body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .go[data-b] { font-size: 10.8px; line-height: 1.3; } /* ── 06.3. Телефон: посадка полосы галереи (диктовка Павла 18.08.2026) ── Пункты 8 и 9 диктовки: заголовки полос галереи стоят не по центру, а тень карточек срезается обрезкой дорожки. РАЗБОР И ЧИСЛА ЗДЕСЬ НЕ ПОВТОРЯЮТСЯ. Причина одна на все полосы галереи и разобрана в разделе 05.4 файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\05_uslugi.css Коротко: у .galp стоит `padding: 0 22px; margin-inline: -22px`; на телефоне ширина полосы задана колонкой сетки .rail, поэтому отрицательное поле полосу не расширило, а сдвинуло влево на 22 точки. Содержимое встало серединой на 165,5 вместо 187,5, а тень карточек уткнулась в левый край обрезки .track.gal (overflow: hidden) - запас слева 0 точек, снизу 0,2 точки при уходе тени на 20. Обнуляем сдвиг: полоса встаёт в свою колонку, её поля по 22 точки остаются внутри обрезки и работают запасом под тень. Заголовку возвращаем поля страницы, полосе добавляем нижнее поле под тень. Кегль карточек этого блока пункт 7 не меняет («как 24/7», кегль 16): самое длинное слово блока «Художественный» при кегле 16 занимает 141,47 точки при 131,70 доступных и вылезет за карточку, а разрыв внутри слова запрещён (glavnaya.css, раздел 31). Потолок кегля для этого блока - 14,89. Подробности - в разделе 05.4 файла 05_uslugi.css. ПОЗЖЕ В ТОТ ЖЕ ДЕНЬ, пункт 22: у блока появился свой образец - буллеты сегмента «Компаниям», и кегль стал 11 -> 11,2 (строка .bb образца). Разбор в разделе 05.5 файла 05_uslugi.css. А 19.08.2026 кегль стал 16: карточку «Художественный перевод» Павел переименовал в «Деловой перевод», и слово, которое держало кегль на месте, из блока ушло. Действующий расчёт - в разделе 06.2 выше; всё, что написано в этом абзаце про кегль, - история. Компьютерный вид не задет: правила живут под body.mob. Откат: удалить раздел 06.3 - полоса вернётся на 22 точки влево, заголовок уедет от центра, тень снова будет срезаться. */ body.mob .galp[data-b][aria-labelledby="gh-2"] { 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%}`, и без отмены заголовок только сдвигается влево, а не расширяется. Подробнее - в разделе 05.4 файла 05_uslugi.css. Откат: удалить правило. */ body.mob .galp[data-b][aria-labelledby="gh-2"] > h2[data-b] { margin-inline: -22px; max-width: none; } /* ── 06.4. Телефон: выключка свёрнутой карточки (Павел, 18.08.2026) ───── Пункт 22 диктовки: «кроме того, в этих блоках текст сделать по центру: когда он в таком виде - он по центру, когда нажимаешь - он ближе к левому краю». РАЗБОР ЗДЕСЬ НЕ ПОВТОРЯЕТСЯ. Правило одно на блоки 05, 06 и 09 и разобрано в разделе 05.5 файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\05_uslugi.css Там же замеры образца «Компаниям» и объяснение, почему заголовок берёт строку .bb (11,2px), а не .bn (16px). Коротко: пока карточка свёрнута, заголовок по центру; с классом .open правило не срабатывает и возвращается эталонная выключка влево. Два свойства, а не одно: justify-content двигает коробку заголовка (кнопка .foldh - flex со `space-between`), text-align выравнивает строки внутри многострочного заголовка. Компьютерный вид не задет: правило живёт под body.mob. Откат: удалить правило - свёрнутый заголовок вернётся к левому краю. */ body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b]:not(.open) .foldh[data-b] { justify-content: center; text-align: center; } /* ── Кегль 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, а внутри ссылки-флексбокса - через justify-content. Разбор - в разделе «Кегль 13» файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\05_uslugi.css Откат: удалить раздел - текст вернётся к 10,8px и к левому краю. ─────────────────────────────────────────────────────────────────────── */ body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldb[data-b] p[data-b], body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .go[data-b] { font-size: var(--kegl-melkij); } body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .foldb[data-b] { text-align: center; } body.mob .cards3[data-b].kart3:not(.ryadom) .card3[data-b] .go[data-b] { justify-content: center; }