/* Страница «Технический перевод» - собрана 24.08.2026 по структуре Павла.
Правило: своих придумок нет, оформление берётся с главной. Блоки цен,
отзывов, писем, анкет и форм используют классы главной и её файлы
css/site/bloki/*, поэтому здесь только то, чего на главной не было:
1. два ряда полосы первого экрана (карточки и ряд 24/7) с кнопкой
заявки между ними;
2. читаемость перенесённой разметки разделов (.tp-tekst);
3. парный блок «Экономия бюджета / Скорость перевода»;
4. список вопросов и ответов, перенесённый абзацами.
Приставка `body` у правил намеренная: она даёт вес выше эталона
(css/etalon/*.css), который править запрещено.
Откат: снять подключение файла в
home/templates/home/service_archetype_page.html. */
/* ── 1. Первый экран: карточки, кнопка теста, ряд показателей ────── */
/* Четыре карточки (Тест, Глоссарий, Формат, Персонально). Эталонная
полоса .buls.common рисует ряд из равных ячеек - здесь она же, только
ячейка выше: у карточек две строки текста вместо одной. */
/* Карточки «Тест / Глоссарий / Формат / Персонально» устроены как плашки
первого экрана главной: слово-рубрика, под ним выделенная строка, ниже
пояснение - и всё по центру. Разбор Павла 24.08.2026: «у каждой плашки
есть оглавление, вторая строка другим шрифтом, жирным, и основной
текст - у тебя ничего не соблюдено».
Кегли и центровка приходят от эталона и bloki/02_pervyj_ekran.css - их
не трогаем. Здесь только вторая строка: у плашек hero она задана
отдельным тегом .pbold, а в полосе .buls разметка проще, поэтому
выделяем первую строку пояснения. */
/* Первая строка внутри .bt играет роль средней строки буллета - на главной
это отдельный класс .bb: 16 / 20,8 / 650 / #1B1B1B. Цвет добавлен
25.08.2026: строка шла тёмно-серой и одна во всей странице расходилась с
главной (поймано сверкой). */
body .buls[data-h].common.tp-kartochki .bt[data-h] > div:first-child {
font-weight: 650;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
color: #1b1b1b;
margin: .3rem 0 .35rem;
}
/* Ритм первого экрана - канон главной (bloki/02_pervyj_ekran.css, П2):
нижний отступ .hero 20,78 (телефон 23,39)
верхнее поле .buls.common 26,4
нижнее поле .buls.common 23,4
нижний отступ ряда кнопок 26,4
Первые три приходят из общего файла, а четвёртое там привязано к
«.track .acts» - к ряду внутри переключателя аудиторий, которого на
странице услуги нет.
ПОПРАВКА 24.08.2026 (замечание Павла «интервал до кнопок и после кнопок
разный»). Числа главной означают её состав: там между первым экраном и
кнопками стоят переключатель аудиторий и калькулятор. На странице услуги
кнопки идут сразу после первого экрана, и те же числа дали разные
просветы: сверху 20,77, снизу 26,39.
Правило страницы: видимый просвет НАД рядом кнопок равен просвету ПОД
ним. У кнопки снизу торчит постамент 3 точки, поэтому при равных
видимых просветах числа отступов отличаются на эти 3: сверху 23,4,
снизу 26,4.
ПОПРАВКА 2 (24.08.2026, третье замечание Павла об этих просветах).
Я мерил расстояния до ГРАНИЦЫ полосы .buls.common, а видимый край - это
карточка внутри неё: у полосы есть внутреннее поле сверху 26,4, и оно
складывалось с нижним отступом кнопки. Под кнопкой выходило 26,4 + 26,4
= 52,8 против 23,4 сверху - вдвое, и глазами это видно, хотя замер
«до границы» показывал ровные числа.
Теперь у полос страницы внутреннее поле снято, а просветы держат только
отступы кнопки: сверху 23,4, снизу 26,4 (минус постамент 3 = те же
видимые 23,4). Проверять - между .bul и .act, а не между .buls и .acts. */
body .buls[data-h].common.tp-kartochki,
body .buls[data-h].common.tp-ryad {
padding-top: 0;
margin-bottom: 0;
}
body .acts[data-h] {
margin-top: 23.4px;
margin-bottom: 26.4px;
}
body .acts.tp-test-zayavka {
justify-content: center;
margin: 23.4px 0 26.4px;
}
/* Высота кнопки - те же 51,2, что у всех кнопок сайта. Подпись длиннее
обычной, поэтому кнопка растёт в ширину, а не в две строки: правило
Павла «как переключатель, а где места нет - по месту». Без этого
.acts .act из glavnaya.css переносил текст и давал высоту 75,2. */
body .acts.tp-test-zayavka .act[data-h] {
flex: 0 0 auto;
width: auto;
min-width: 240px;
height: 51.2px;
min-height: 51.2px;
padding: 0 28px;
white-space: nowrap;
}
/* Кнопки «Заказать перевод» внутри перенесённых разделов. Эталон
оформляет только .act[data-h] первого экрана, у разметки из кабинета
этого признака нет - поэтому вид кнопки задан здесь, теми же числами:
240x51,2, овал, фирменный красный. */
/* Кнопки внутри перенесённых разделов. ВИД, ЦВЕТ, ПОСТАМЕНТ, НАВЕДЕНИЕ И
НАЖАТИЕ приходят из единого правила кнопок сайта - bloki/00_obshchee.css,
куда 24.08.2026 добавлен селектор «a.tp-knopka». Здесь только размер,
выключка по центру и воздух вокруг: своих цветов и своих эффектов у
страницы быть не должно (разбор Павла 24.08.2026 - «для всех кнопок на
сайте единое правило»). */
body .tp-tekst a.tp-knopka {
display: inline-flex;
align-items: center;
justify-content: center;
width: 240px;
height: 51.2px;
border-radius: 999px;
color: #fff;
font-weight: 600;
text-decoration: none;
margin: 12px auto;
}
/* Кнопка стоит по центру блока - решение Павла 24.08.2026. */
body .tp-tekst > a.tp-knopka {
display: flex;
}
/* Ряд показателей 24/7 - без верхней линии: она уже есть у карточек выше,
две подряд читаются как рамка. */
body .buls[data-h].common.tp-ryad {
border-top: 0;
}
/* ── 2. Перенесённые разделы: читаемость ────────────────────────── */
/* Заголовки разделов - как у блоков главной: их кегль и отступы задаёт
glavnaya.css для .blk > h2, поэтому здесь только внутренняя типографика
перенесённой разметки. */
body .tp-tekst p,
body .tp-tekst li {
font-size: 15px;
line-height: 21.75px;
color: #3d4247;
}
/* Исключения - строки со своей ролью: название этапа и название пункта
фактора набраны полужирным по решению Павла, выжимка и девиз колонки
парного блока тоже. Кегль у них свой, поэтому общий текст их не трогает. */
body .card3.tp-etap .tp-etap-nazvanie p,
body #faktory .tp-faktor-nazvanie,
body .tp-devis p {
font-size: 16px;
color: #1b1b1b;
}
body .tp-tekst ul,
body .tp-tekst ol {
padding-left: 22px;
margin: 12px 0;
}
body .tp-tekst li {
margin-bottom: 6px;
}
body .tp-tekst h3 {
font-size: 21px;
line-height: 1.3;
margin: 22px 0 10px;
}
/* ── 2.1. Заголовок ВНУТРИ редакционного текста ──────────────────────
Правило Павла 31.08.2026 («Перевод договоров»): подзаголовки, которые
открывают куски редакционного текста, - самостоятельные смысловые
разделы. Они поднимаются с H3 на H2 (преобразование
`podnyat_zagolovki`) и набираются КАК H2 РАЗДЕЛА: 28 / 1,2, вес 700,
ПО ЦЕНТРУ.
Своё правило нужно потому, что общий вид H2 задаётся в glavnaya.css
селектором `.blk[data-b] > h2[data-b]` - только для ПРЯМОГО потомка
блока. Заголовок внутри редакционного текста лежит глубже, в
`.rt-tekst`, и под то правило не попадает.
Верхний отступ больше нижнего: заголовок отделяется от предыдущего
куска сильнее, чем от своего текста. */
body .tp-tekst .rt-tekst h2 {
font-size: 28px;
line-height: 1.2;
font-weight: 700;
text-align: center;
margin: 34px 0 18px;
}
body.mob .tp-tekst .rt-tekst h2 {
font-size: 23px;
margin: 26px 0 14px;
}
/* Заголовок H3 внутри редакционного текста - ТОЖЕ ПО ЦЕНТРУ, но
уровень остаётся третьим (правило Павла 31.08.2026 по «Переводу
устава»: «если внутри блока H2 стоят три заголовка H3, оставляем их
H3, просто по центру их надо сделать»).
На «Переводе договоров» два таких заголовка Павел велел поднять до
H2 - там они открывают крупные смысловые куски. Уровень решается по
странице, а выключка по центру - общая: заголовок внутри
редакционного текста всегда стоит по центру своей колонки. */
body .tp-tekst .rt-tekst h3 {
text-align: center;
}
body .tp-tekst img {
max-width: 100%;
height: auto;
border-radius: var(--radius-karta, 16px);
}
/* Ссылки внутри перенесённых списков - фирменным красным, как в меню. */
body .tp-tekst a {
color: var(--krasnyj, #8c1821);
}
/* ── 3. Карточки разделов ───────────────────────────────────────── */
/* Общий вид карточки - как у карточек главной (.card3): белый фон, без
рамки, мягкая тень --tenj-bloka из glavnaya.css, скруглённый угол. */
/* ВАЖНО: .tp-faktor и .tp-primer в списке НЕТ - решение Павла 24.08.2026.
Фактор («Экспертность», «Системность», «Технологии») - это сам блок, а не
карточка внутри карточки: «не надо делать один белый блок для факторов,
получается блок в блоке, дополнительная вложенность и граница». Примеры
перевода тоже без рамок - «полностью на белом фоне». */
body .tp-karta,
body .tp-otrasl,
body .tp-etap,
body .tp-anketa,
body .tp-polovina {
background: #fff;
border-radius: 16px;
box-shadow: var(--tenj-bloka);
padding: 20px 22px;
}
/* Какие технические документы мы переводим: четыре карточки по две в ряд,
внутри карточки список слева, картинка справа - как на действующем
сайте. */
/* ПОЧЕМУ КЛАСС, А НЕ ИДЕНТИФИКАТОР РАЗДЕЛА (правка 31.08.2026).
До 31.08.2026 все правила этого блока были написаны от `#dokumenty` -
идентификатора раздела на «Техническом переводе». Но раздел у каждой
страницы называется по-своему: «kakie-dokumenty» на юридической,
«kategorii» на медицинской, «delovaya-dokumentaciya» на деловой. На
этих трёх страницах не применялось НИЧЕГО - ни две колонки «список
слева, картинка справа», ни размер картинки, ни заливка вровень с
краями карточки; карточка раскладывалась столбцом, а картинка шла во
всю ширину под списком (замер юридической: картинка 599x498 при
ширине карточки 600). Правила переписаны на класс компонента
`.tp-dokumenty` - канон, раздел 13.1: раскладка привязывается к
компоненту, а не к странице. Список из 21 ссылки под карточками
остался на идентификаторе: он есть только на «Техническом переводе».
*/
body .tp-dokumenty .tp-karta {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
gap: 18px;
align-items: center;
}
body #dokumenty > h2 + .tp-karta,
body .tp-dokumenty .tp-karta {
margin: 0;
}
/* Высота считается ПО РЯДУ, а не по всему блоку - правка Павла
01.09.2026: «каждый блок в строке мы делаем по высоте самого высокого
блока в строке, а высота каждого блока в строке определяется
количеством строк текста; ряд с договорами и страховой документацией
не должен тянуться до высоты ряда с учредительными документами».
Раньше стояло grid-auto-rows: 1fr - это равняет ВСЕ ряды сетки по
самому высокому во всём блоке. Теперь ряд получает свою высоту
(auto), а карточки внутри ряда растягиваются по нему сами: у сетки
по умолчанию align-items: stretch, а карточке задана height: 100%. */
body .tp-dokumenty {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: auto;
gap: 24px;
}
/* Все четыре карточки одного размера - требование Павла 25.08.2026: ряды
сетки равны, а карточка растягивается на всю высоту своей ячейки. */
body .tp-dokumenty .tp-karta {
height: 100%;
}
body .tp-dokumenty .tp-karta ul {
margin: 0;
}
body .tp-dokumenty .tp-karta img {
width: 100%;
border-radius: 0;
}
/* Перелинковка на страницы услуг - 21 ссылка, которая на действующем сайте
показывалась только на телефоне (список «Наши услуги в области
технического перевода»). Содержимое Павел велел сохранить, поэтому
список стоит под карточками и разложен в четыре колонки: столбцом в
двадцать одну строку он занимал полтора экрана. */
body #dokumenty > ul:not(.tp-karta ul) {
grid-column: 1 / -1;
columns: 4;
column-gap: 24px;
list-style: none;
padding: 0;
margin: 0;
}
body #dokumenty > ul:not(.tp-karta ul) li {
break-inside: avoid;
margin-bottom: 8px;
}
@media (max-width: 900px) {
body #dokumenty > ul:not(.tp-karta ul) {
columns: 2;
}
}
/* Отрасли и тематики: плитка «иконка + подпись», ЧЕТЫРЕ в ряд - решение
Павла 24.08.2026 («шестнадцать как раз четыре по четыре»). Сетка своя, а
не .kart4 из bloki/05_uslugi.css: та рассчитана под карточки услуг с
раскрывашкой (колонка заголовка 135, картинка 76) и сжимала плитки до 73
точек. */
body .tp-otrasli {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
/* Подзаголовок раздела своих правил НЕ имеет: кегль, цвет, ширину и
боковые поля задаёт канон главной (glavnaya.css, `.blk > .sub`), где
поля равны 174 - именно они ставят строку по центру страницы. Правило
«margin: 0 0 20px», стоявшее здесь, обнуляло боковые поля, и блок
шириной 832 прижимался к левому краю: замер показывал центр 732 против
906 у заголовка и плиток. Снято 24.08.2026 по замечанию Павла. */
body #otrasli .tp-otrasl {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 14px;
align-items: center;
}
body #otrasli .tp-otrasl img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 0;
}
body #otrasli .tp-otrasl p {
margin: 0;
font-weight: 600;
}
body #otrasli .tp-knopka {
grid-column: 1 / -1;
justify-self: center;
}
/* Как мы выполняем: этап - картинка слева, название и действия справа. */
/* Этап - как на действующем сайте (замер .s-exec-item): в строку слева
картинка 128, рядом название этапа, дальше перечень действий. Зазор 30.
Разбор Павла 24.08.2026: «слева у нас картинка, дальше формат - иди и
посмотри, как это сделано на сайте». */
/* ПОЧЕМУ КЛАСС, А НЕ ИДЕНТИФИКАТОР РАЗДЕЛА (правка 31.08.2026).
Как и у карточек документов, правила этапов были написаны от
`#kak-vypolnyaem` - идентификатора раздела на «Техническом
переводе». На юридической странице раздел называется
«kak-perevodim», и ни одно правило туда не доставало. Канон,
раздел 13.1: раскладка привязывается к компоненту. */
/* ВЕС СЕЛЕКТОРА. Пишем `.card3.tp-etap`, а не просто `.tp-etap`: в
glavnaya.css стоит `.card3[data-b] { display: flex; flex-direction:
column }` весом 0-0-2-0, и голый `body .tp-etap` (0-0-1-1) ему
проигрывает, хотя tehperevod.css подключается позже. Карточка этапа
несёт оба класса, поэтому пара даёт 0-0-2-1 и выигрывает без правки
разметки. Название внутри заливки пишется от карточки целиком:
`.card3[data-b] p[data-b]` весит 0-0-3-1. */
body .card3.tp-etap {
display: grid;
grid-template-columns: 128px 262px minmax(0, 1fr);
gap: 30px;
align-items: center;
margin-bottom: 20px;
}
body .card3.tp-etap img {
width: 128px;
border-radius: 0;
}
/* Текст этапа справа - ОБЫЧНЫЙ текст раздела: 15 / 21,75, вес 400,
цвет #3d4247. Полужирным набрано только название этапа, и оно живёт в
заливке средней колонки.
Здесь до 31.08.2026 стояло `font-weight: 700; font-size: 16px` - это
правило писалось для НАЗВАНИЯ этапа, когда название было прямым
потомком карточки. Название давно переехало в заливку, и правило
стало ловить описание шага: на «Юридическом переводе», где описание
набрано абзацем, а не списком, текст справа выходил полужирным.
Правка Павла 31.08.2026: «на техническом переводе основной текст не
жирный, у тебя он получается тёмный серый, жирный».
ВЫРАВНИВАНИЕ ПО ВЫСОТЕ (правило Павла 31.08.2026, канон раздел 5д).
Текст справа стоит по центру карточки: от верхней кромки белого до
первой строки и от последней строки до нижней кромки - поровну.
`align-self: center` центрирует его в строке сетки, обнулённые поля
абзаца не дают перекоса. Высоту карточки задаёт этот текст плюс
поля; ниже картинки с полями карточка не становится - на это стоит
min-height.
ВЕС СЕЛЕКТОРА. У абзаца стоит `[data-b]`: нижнее поле задаёт
`.card3[data-b] p[data-b]` из glavnaya.css весом 0-0-3-1, и голый
`body .card3.tp-etap > p` (0-0-2-2) ему проигрывает - абзац
оставался на 6 точек ниже центра. */
body .card3.tp-etap > p[data-b],
body .card3.tp-etap > ul {
margin: 0;
align-self: center;
}
/* Нижний предел высоты: картинка 128 плюс поля карточки 20 сверху и 20
снизу. Короткое описание не сжимает карточку до полоски, длинное
растит её по себе - карточки в блоке получаются разной высоты, и это
норма (на «Техническом переводе» они 250, 228 и 207). */
body .card3.tp-etap {
min-height: 168px;
}
body .card3.tp-etap ul {
margin: 0;
}
/* Шапка блока примеров: слева подзаголовок, справа красная кнопка. */
body .tp-primery-shapka {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
}
/* Кнопка блока примеров прижата к правому краю - решение Павла 24.08.2026. */
body .tp-primery-shapka a.tp-knopka {
margin: 0 0 0 auto;
}
body .tp-primery-shapka h3 {
margin: 0;
}
/* Примеры технического перевода: три снимка в ряд, у каждого номер в
кружке - как на действующем сайте. */
body .tp-primery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 0 0 18px;
align-items: start;
}
/* Колонок ровно столько, сколько снимков: при двух примерах в сетке на
три колонки они жались влево, и просветы между ними выглядели разными
(замечание Павла 02.09.2026 по «Переводу устава»). */
body .tp-primery[data-n="1"] {
grid-template-columns: minmax(0, 1fr);
}
body .tp-primery[data-n="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Развёрнутый пример: название, описание, снимок и призыв - как на
действующем сайте (снято 02.09.2026).
Ряды общие на весь блок: карточка раскладывается по строкам сетки
блока (subgrid), поэтому название, описание, снимок и призыв у всех
трёх примеров лежат на одном уровне - высоту строки задаёт самый
высокий из них. Требование Павла: «текст должен быть выровнен по
самому высокому... чтобы все три картинки были на одинаковом уровне».
Откат: удалить grid-template-rows у .tp-primery-polnye и subgrid у
.tp-primer-polnyj - карточки снова встанут каждая по своей высоте. */
body .tp-primery-polnye {
/* Пять строк - по числу частей примера: номер, название, описание,
снимок, призыв. */
grid-template-rows: auto auto auto auto auto;
align-items: stretch;
}
body .tp-primer-polnyj {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
row-gap: 0;
}
/* Шаги оформления перевода: карточка из трёх частей.
Блок «Примеры оформления перевода» кластера личных документов собран
тем же компонентом, что примеры проектов, но карточка у него короче:
номер, снимок, описание. Названия и описания над снимком нет -
решение Павла 03.09.2026: «убрать, чтобы номер сразу шёл над
картинкой». Значит и рядов у сетки три, а не пять.
Колонок столько, сколько снимков в подразделе: у заверения печатью и
нотариального заверения их три, у апостиля четыре - там снимки
получаются мельче, так и задумано.
Ряды общие на подраздел (subgrid), поэтому номера стоят на одном
уровне, снимки на одном уровне и подписи выровнены - требование
Павла: «все цифры на одном уровне, все картинки на одном уровне».
Откат: удалить эти правила - карточка вернётся к пяти рядам примеров
проектов и рассыплется. */
body .tp-primery-polnye.tp-shagi {
grid-template-rows: auto auto auto;
}
body .tp-shagi .tp-primer-polnyj {
grid-row: span 3;
}
body .tp-primery.tp-shagi[data-n="4"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Шаги без подписи: у карточки только номер и снимок.
Так устроен блок примеров на «Переводе документов на немецкий»: на
действующей странице под снимками нет ни строчки текста. Рядов у
сетки два вместо трёх, остальное общее с шагами дипломов.
Откат: удалить эти два правила - карточка потребует третий ряд,
которого у неё нет, и снимки разъедутся по высоте. */
body .tp-primery-polnye.tp-shagi.tp-shagi-bez-podpisej {
grid-template-rows: auto auto;
}
body .tp-shagi.tp-shagi-bez-podpisej .tp-primer-polnyj {
grid-row: span 2;
}
/* Снимки шагов книжные - в отличие от альбомных снимков проектов.
Высоту задаёт сам снимок, обрезать его нельзя (канон, раздел 8). */
body .tp-shagi .tp-primer-snimok img {
width: 100%;
height: auto;
}
/* Эталонный размер снимка - требование Павла 03.09.2026.
Эталон: первая картинка блока «Примеры оформления перевода дипломов»
на «Переводе диплома», подраздел «Заверение перевода диплома печатью
бюро переводов». Замер действующего сайта на 1440: ячейка 380 точек,
снимок 272 на 363 - он стоит по центру ячейки с белыми полями по
бокам (правило действующего сайта: width 272px при max-width 80 %).
У нас снимок растягивался на всю ячейку, 380 на 507, - отсюда слова
Павла «сейчас они очень большие».
Ставим долю ячейки с потолком: 80 %, но не больше 272 точек.
Три столбца - ровно эталон (80 % от 380 это 304, потолок срезает до
272). Четыре столбца - 224, меньше эталона: Павел это разрешил
(«там можем ещё уменьшить»). Одна колонка на телефоне - потолок 272.
Ужимается сама кнопка, а не картинка внутри неё: на кнопке висит
значок лупы в правом нижнем углу, и от ужатой картинки в широкой
кнопке лупа осталась бы у края пустой ячейки.
Откат: удалить это правило - снимок снова растянется на всю ячейку. */
body .tp-shagi .tp-primer-snimok {
width: 80%;
max-width: 272px;
margin-left: auto;
margin-right: auto;
}
/* Номер шага держится за своим снимком. Снимок теперь уже ячейки и
стоит по центру, поэтому номер, прижатый к краю ячейки, оторвался бы
от него на полсотни точек. Даём номеру ту же ширину и те же поля -
он встаёт ровно над левым краем снимка. Требование Павла 03.09.2026:
«чтобы номер сразу шёл над картинкой». */
body .tp-shagi .tp-primer-polnyj .tp-primer-nomer {
width: 80%;
max-width: 272px;
margin-left: auto;
margin-right: auto;
}
/* Между подразделами - воздух: шапка следующего не должна прилипать к
подписям предыдущего. */
body .tp-shagi + .tp-primery-shapka {
margin-top: 28px;
}
body .tp-primer-nazvanie {
margin: 0 0 6px;
font-size: 16px;
line-height: 20px;
font-weight: 650;
color: #1e1f22;
}
body .tp-primer-opisanie {
margin: 0 0 12px;
font-size: 15px;
line-height: 21.75px;
color: #3d4247;
}
/* Снимок прижат к верху своей строки: строка выше самого снимка, если у
соседа он крупнее. */
body .tp-primer-polnyj .tp-primer-snimok {
align-self: start;
}
/* Ссылка-призыв под снимком. Это ссылка к форме заказа, а не кнопка:
кнопка в блоке уже есть выше. */
body .tp-primer-cta {
display: block;
margin: 12px 0 0;
align-self: end;
font-size: 15px;
line-height: 21.75px;
color: var(--krasnyj, #8c1821);
font-weight: 650;
}
/* У развёрнутого примера номер не в кружке поверх снимка, а перед
названием - как на действующем сайте. */
body .tp-primer-polnyj .tp-primer-nomer {
position: static;
width: auto;
height: auto;
margin: 0 0 4px;
background: none;
color: var(--krasnyj, #8c1821);
font-size: 15px;
font-weight: 700;
justify-content: flex-start;
}
@media (max-width: 900px) {
body .tp-primery,
body .tp-primery[data-n="2"] {
grid-template-columns: minmax(0, 1fr);
}
/* Подраздел с четырьмя снимками схлопывается в одну колонку вместе с
остальными. Своё правило на четыре колонки у него сильнее общего и
на телефоне оставалось в силе: ячейка получалась 76 точек, подпись
под снимком ниже своей минимальной ширины не сжимается, и карточки
вылезали за сетку - снимки 85-121 точки в ячейке 76 (замер
03.09.2026 на ширине 390). */
body .tp-primery.tp-shagi[data-n="4"] {
grid-template-columns: minmax(0, 1fr);
}
body .tp-primer-opisanie {
font-size: 13px;
line-height: 17.55px;
}
}
body .tp-primer {
position: relative;
}
body .tp-primer img {
width: 100%;
border-radius: 0;
}
body .tp-primer-nomer {
position: absolute;
top: -12px;
left: -12px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--knopka-fon);
color: #fff;
font-weight: 700;
}
/* Анкеты переводчиков своих правил НЕ имеют: блок собран разметкой главной
(лента .strip.anketi со стрелками), вид приходит из
bloki/11_perevodchiki.css и сценария js/site/lenty.js. Здесь была своя
сетка в четыре колонки - она ломала ленту, карточки наезжали друг на
друга. Снято 24.08.2026 после разбора Павла: «профессиональные
переводчики должны быть так, как на главной». */
/* Факторы качества - раскладка действующего сайта (замер .s-factors-item):
каждый фактор идёт строкой, слева рубрика с девизом и картинкой (треть
ширины), справа его пункты. Три фактора друг под другом, а не тремя
колонками. */
body #faktory .tp-faktor {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 30px;
align-items: start;
margin-bottom: 20px;
}
body #faktory .tp-faktor img {
width: 100%;
border-radius: 0;
margin: 12px 0 0;
}
/* Левая часть фактора: рубрика и девиз ПО ЦЕНТРУ - как на действующем
сайте (замер: рубрика 28/700 по центру, девиз 16/700 по центру).
Разбор Павла 24.08.2026: «Экспертность должна по центру, "Сложных
технических переводов нет" - по центру». */
body #faktory .tp-faktor-shapka {
text-align: center;
}
body #faktory .tp-faktor-shapka > p:first-child {
font-weight: 700;
font-size: 28px;
margin: 0 0 10px;
}
body #faktory .tp-faktor-shapka > p:nth-child(2) {
font-weight: 700;
font-size: 16px;
margin: 0;
}
/* Пункты - в две колонки: слева название, справа пояснение (замер
действующего сайта .s-factors-item-content-fact: 252 / 443, зазор 24). */
body #faktory .tp-faktor-stroka {
display: grid;
grid-template-columns: 252px minmax(0, 1fr);
gap: 24px;
margin-bottom: 22px;
}
body #faktory .tp-faktor-nazvanie {
font-weight: 700;
font-size: 16px;
margin: 0;
}
body #faktory .tp-faktor-poyasnenie {
font-size: 15px;
line-height: 21.75px;
color: #3d4247;
margin: 0;
}
@media (max-width: 900px) {
body #faktory .tp-faktor-stroka {
grid-template-columns: 1fr;
gap: 6px;
}
}
/* Блок «Оцените качество перевода»: форма главной под заголовком.
Строки-подводки над формой - мелким кеглем во всю ширину блока (решение
Павла 24.08.2026 по строкам «Ваш проект с очень „узкоспециальной
специальностью“…» и «Закажите срочный технический перевод»). */
body #test-forma > p {
font-size: 13px;
line-height: 1.45;
color: var(--muted, #63676c);
text-align: center;
margin: 0 0 10px;
}
body #test-forma > p:last-of-type {
margin-top: 14px;
}
/* Блок с формой: слева тексты, справа форма - как на действующем сайте
(замер: текстовая колонка 684 и коробка формы рядом). Разбор Павла
24.08.2026: «все эти тексты идут слева, а форма справа». Заголовок
раздела остаётся во всю ширину над обеими колонками.
ПРАВИЛО ПРИВЯЗАНО К КЛАССУ, а не к идентификатору блока (канон,
13.1). Правка Павла 01.09.2026 по промышленному и авиационному
переводу: «сделай так, чтобы отдельный текст был слева от формы,
ровно так, как в форме "Закажите технический перевод или получите
точную оценку сроков и стоимости"; это касается ВСЕХ блоков заказа
на этих страницах». Раньше правило работало только на блоке
#zakazhite, и на страницах с несколькими формами остальные блоки
выкладывали текст над формой. */
body .zayavka-sleva {
display: grid;
grid-template-columns: minmax(0, 1fr) 760px;
gap: 0 40px;
align-items: start;
}
/* Коробка формы - той же ширины, что блок заявки главной (760), и прижата
к правому краю; слева остаётся текст. Требование Павла 24.08.2026:
«форма должна быть такого же размера, как „Пора получать действительно
профессиональный перевод“, оцентрована вправо, текст слева - ровно и
гармонично». Сжимать форму нельзя: кнопка вылезала за края. */
body .zayavka-sleva > .zkorobka {
width: 760px;
max-width: 100%;
margin-left: auto;
}
body .zayavka-sleva > h2 {
grid-column: 1 / -1;
}
body .zayavka-sleva > p {
grid-column: 1;
text-align: left;
margin: 0 0 14px;
/* Первая строка подзаголовка встаёт на уровень «Присылайте Ваш
запрос» внутри таблички - требование Павла 03.09.2026 по
«Переводу диплома на немецкий» и «Переводу украинского диплома»:
«подзаголовок поставить на уровень таблички, вместе с "Присылайте
Ваш запрос"».
Отступ равен верхнему полю таблички (22) плюс её рамка (1):
bloki/14_zayavka.css, padding 22px 28px 26px и border 1px. До
правки подзаголовок стоял вровень с ВЕРХОМ таблички, а её текст
начинался на 23 точки ниже (замер 03.09.2026).
Правило общее для компонента, поэтому ровняются все блоки заказа
сайта - и это правильно: вид у них один. Откат: убрать
padding-top. */
padding-top: 23px;
}
body .zayavka-sleva > .zkorobka {
grid-column: 2;
grid-row: 2 / span 20;
margin: 0;
}
@media (max-width: 900px) {
/* minmax(0, 1fr), а не 1fr - иначе страницу распирает вбок.
Правка 08.09.2026, пункты 2.4 и 3.27 сводного пакета: «Промышленный
перевод» таскало влево-вправо нещадно. Замер на стенде: ширина
страницы 774 точки при окне 375, самый широкий узел - коробка формы
760 точек, а колонка сетки у блока заявки тоже 760.
Почему так выходило. Запись `1fr` означает `minmax(auto, 1fr)`, и
нижняя граница `auto` не даёт колонке сжаться ниже содержимого. У
коробки формы задано `width: 760px` (правило выше, требование Павла
24.08.2026 «форма такого же размера, как на главной»), поэтому
колонка держала 760 и на телефоне. Ноль вместо `auto` разрешает
колонке сжаться, а `max-width: 100%` у самой коробки подгоняет её
под экран.
Подложка с шаром (774 точки) была следствием, а не причиной: она
тянется по ширине страницы.
Откат: вернуть `1fr` - страницу снова будет таскать вбок. */
body .zayavka-sleva {
grid-template-columns: minmax(0, 1fr);
}
body .zayavka-sleva > p,
body .zayavka-sleva > .zkorobka {
grid-column: 1;
grid-row: auto;
}
}
/* Преимущества профессионального перевода: слева картинка, справа текст -
раскладка действующего сайта (замер .huge-inner: 472 и 708). */
/* ───────────────────────────────────────────────────────────────────────
Статичный редакционный блок с иллюстрацией (канон, раздел 0.2.1).
Образец - «Преимущества профессионального перевода технической
документации»: изображение слева, текст справа, прозрачный фон, без белой
карточки и без тени. Класс «blok-illyustraciya» открывает тот же компонент
любой странице услуги; правила были привязаны к одному идентификатору
блока и на второй странице не работали (разбор 26.08.2026).
ВАРИАНТ КОМПОНЕНТА ВКЛЮЧАЕТ ТОЛЬКО КЛАСС (правка 29.08.2026). До неё в
каждом правиле рядом с классом стоял `body #preimushchestva` - остаток
первой страницы, и семантический идентификатор работал стилевым
переключателем. Плата за это: любой блок, которому дали тот же
осмысленный id, молча вставал в чужую сетку - на «Переводе патентов»
карточки со значком превратились в шесть узких колонок. Канон (раздел
14) запрещает выбирать вариант компонента по адресу или идентификатору;
идентификатор остаётся якорем и целью возврата, а вид даёт класс.
─────────────────────────────────────────────────────────────────────── */
body .blok-illyustraciya {
display: grid;
/* Колонка иллюстрации - ПО КАРТИНКЕ (решение Павла 28.08.2026,
вариант «картинка по левому краю, текст занимает остальное»):
подогнанная или узкая картинка отдаёт освободившееся место тексту.
Ширину колонки ставит сценарий переменной, по умолчанию - прежние
472 по замеру действующего сайта.
Первый заход делал колонку auto по самой картинке - и ленивые
изображения ломали раскладку: незагруженный img при width:auto
занимает 0x0, место не резервируется, расчёт «текст по низу
картинки» слепнет, а мобильные картинки вылезали за экран (замеры
28.08.2026: блок регламентов раздулся с 664 до 1292, возврат на
«Техническом переводе» промахнулся на 1324). Поэтому колонку держит
переменная, а картинка остаётся width:100% - место резервируется
атрибутами размеров при любой ширине колонки. */
grid-template-columns: var(--kolonka-kartinki, 472px) minmax(0, 1fr);
gap: 0 30px;
align-items: start;
/* Строки - по содержимому, и ни точкой больше.
Картинка занимает «grid-row: 2 / span 30» - запас строк на любое число
абзацев в правой колонке. При строках «auto» браузер раздаёт высоту
картинки по ВСЕМ тридцати строкам, включая пустые: замер 27.08.2026 на
«Видах регламентов» - 28 пустых строк по 17,6 точки, блок раздулся до
1157 при содержимом 664, и между блоками зияла дыра в пол-экрана.
Пока текст был длиннее картинки, это не проявлялось.
«min-content» даёт строкам ровно высоту содержимого; пустые строки
остаются нулевыми, а строки под картинкой всё равно дорастают до её
высоты - блок не короче иллюстрации. */
grid-auto-rows: min-content;
}
body .blok-illyustraciya > h2 {
grid-column: 1 / -1;
}
/* Картинка стоит ПО ЦЕНТРУ своего поля - правило Павла 28.08.2026.
Поле у картинки теперь детерминированное: его высота равна высоте
закрытого текста (15 строк на 1440, 12 на 1280, 10 от 901) плюс
кнопка. Ширину колонки под эту высоту считает сценарий переменной
--kolonka-kartinki: большая картинка уменьшается, маленькая
увеличивается, но не больше чем на 20% от натурального размера.
До 28.08.2026 центрирование включалось отдельным классом «il-centr»
на одну страницу; теперь это общее поведение, и класса больше нет.
Правило относится к РЕДАКЦИОННОМУ блоку с иллюстрацией: поле картинки
существует только там, где высоту закрытого текста считает компонент
(«rt-blok»). У статичного блока с иллюстрацией поля нет, равнять
картинку не по чему, и она остаётся у верхней кромки - как стояла
(уточнение 29.08.2026 при переводе блока с идентификатора на класс). */
body .rt-blok.blok-illyustraciya > img {
align-self: center;
}
body .blok-illyustraciya > img {
grid-column: 1;
grid-row: 2 / span 30;
width: 100%;
border-radius: 0;
}
body .blok-illyustraciya > p,
body .blok-illyustraciya > ul,
body .blok-illyustraciya > .rt-tekst,
body .blok-illyustraciya > .rt-knopka {
grid-column: 2;
margin: 0 0 14px;
}
/* Нижний отступ переезжает с текста на кнопку «Читать далее».
Канон, раздел 5и: просвет между разделами меряется до первого и от
последнего ВИДИМОГО элемента. Когда текст короткий, кнопка скрыта, а
её место занимал нижний отступ текста - и межблочный просвет
становился 84 вместо 70 (замер 31.08.2026 на «Переводе
бизнес-планов», правка Павла: «интервал между последним предложением
абзаца и следующим блоком слишком большой; после текстового блока до
следующего H2 тоже слишком большое расстояние»). Отступ на кнопке
исчезает вместе с ней сам. */
body .blok-illyustraciya > .rt-tekst {
margin-bottom: 0;
}
body .blok-illyustraciya > .rt-knopka {
margin-top: 14px;
margin-bottom: 0;
}
@media (max-width: 900px) {
/* Одна колонка, и она НЕ ШИРЕ окна: «minmax(0, 1fr)», а не «1fr».
«1fr» - это «minmax(auto, 1fr)»: колонка не сжимается уже своего
содержимого, и длинное слово или широкая таблица распирают документ.
Прежде от этого страховало отдельное правило по идентификатору
блока; при переводе на класс страховка стала общей (29.08.2026). */
body .blok-illyustraciya {
grid-template-columns: minmax(0, 1fr);
}
body .blok-illyustraciya > img,
body .blok-illyustraciya > p,
body .blok-illyustraciya > ul,
body .blok-illyustraciya > .rt-tekst,
body .blok-illyustraciya > .rt-knopka {
grid-column: 1;
grid-row: auto;
}
}
/* ── 3а-1. Номер карточки отраслей ────────────────────────────────────
Карточки «ключевых отраслей» на нефтегазовой и нефтесервисной
страницах нумерованы - так на действующих страницах. Номер стоит
сбоку от заголовка внутри кнопки; при наведении белеет существующим
правилом body .fold:hover * (00_obshchee.css, раздел 4.3). */
body .card3 .foldh .kn {
font-weight: 700;
color: var(--cvet-cifr, #8c1821);
margin-right: 10px;
flex: 0 0 auto;
}
/* ── 2а. Перечисление в H1 - следующей строкой ────────────────────────
ТЗ Павла 01.09.2026 по нефтегазу и нефтесервису: «H1 остаётся полным в
разметке, а в макете первого экрана он разбивается на две строки:
основная часть крупно, перечисление - следующей строкой».
Текст H1 не меняется: часть после двоеточия оборачивается в span и
набирается мельче, с новой строки. У страниц без двоеточия хвоста нет
и правило ни на что не действует.
Откат: убрать span в шаблоне первого экрана - H1 снова пойдёт одним
куском. */
body .hero[data-h] h1[data-h] .h1-hvost[data-h] {
display: block;
margin-top: 6px;
font-size: 24px;
line-height: 1.25;
font-weight: 700;
color: var(--tekst-temno-seryj, #3d4247);
}
@media (max-width: 900px) {
body .hero[data-h] h1[data-h] .h1-hvost[data-h] {
font-size: 16px;
line-height: 1.3;
}
}
/* ── 3а-2. Плашки по общему правилу ТЗ 01.09.2026 ─────────────────────
Общее правило плашечных блоков нефтегаза и нефтесервиса: название по
центру, весь остальной текст по левому краю, содержимое прижато к
ВЕРХНЕМУ краю (по высоте не центруем), высота плашек в ряду - по самой
высокой в этом ряду.
Высоту ряда выравнивает сама сетка, поэтому здесь только выключка и
прижим кверху. Заливка, тень, скругление и отклик на наведение
остаются общими: карточка как была `.card3.fold`, так и осталась.
Откат: снять модификатор `plashki-kanon` в паспорте страницы. */
/* Оба модификатора ряда перечислены намеренно: у правила главной
«.cards3.kart3:not(.ryadom) .card3» вес выше, чем у пары классов, и без
.kart3/.kart4 наш прижим кверху проигрывал ему на трёхколоночных
блоках (замер 01.09.2026: kart4 слушался, kart3 нет). */
/* Плашка без значка - в одну колонку (замечание Павла 02.09.2026).
Сетка карточки в bloki/05_uslugi.css всегда держит первую колонку под
картинку: `clamp(...) minmax(0, 1fr)`. Когда значок снят, колонка
остаётся пустой, а заголовок жмётся в правую - 211 точек из 325 - и
рвётся на две строки даже там, где помещается в одну. Отсюда и
«разное расстояние от названия до текста»: у одних плашек заголовок в
одну строку, у других в две.
Метку «bez-znachka» ставит сам компонент (kartochki_otraslej), когда
значки сняты, поэтому правило не задевает плашки со значками -
например примеры проектов.
Вес селектора (0,6,1) - перебивает правило сетки (0,6,0) при любом
порядке подключения файлов.
Откат: удалить это правило - вернётся пустая колонка под значок. */
body .cards3[data-b].plashki-kanon.bez-znachka .card3[data-b] {
grid-template-columns: minmax(0, 1fr);
/* Одних колонок мало: раскладку карточки задают ИМЕНОВАННЫЕ области
«risunok zagolovok» / «tekst tekst» (glavnaya.css, раздел 31), и
они держат две колонки сами по себе. Поэтому переписываем и их. */
grid-template-areas:
"zagolovok"
"tekst";
}
/* Название плашки занимает ВСЮ её ширину и центруется по ней, а не по
куску (замечание Павла 02.09.2026: «центровать по центру всего блока,
который закрашивается красным, а не где-то справа в ограниченной
ячейке»). Кнопка-заголовок по умолчанию сжимается по содержимому,
поэтому длинные названия рвались на две строки там, где помещались в
одну, и «расстояние от названия до текста» выглядело разным. */
body .cards3[data-b].plashki-kanon .card3[data-b] .foldwrap[data-b],
body .cards3[data-b].plashki-kanon .card3[data-b] .foldh[data-b] {
width: 100%;
}
body .cards3[data-b].plashki-kanon .card3[data-b] .foldh[data-b] > span {
flex: 1 1 auto;
text-align: center;
}
/* Заголовок плашки НЕ резервирует две строки.
Общее правило карточек (bloki/05_uslugi.css, раздел 05.1) держит под
заголовком высоту двух строк даже там, где текст встал в одну: так
выравнивается первая строка у карточек со значком. У плашек без значка
выравнивать нечего, а пустая вторая строка читается как разный отступ
от названия до текста - «почему в этих двух плашках расстояние от
названия блока до самого текста разное» (Павел, 02.09.2026).
Вес. Резерв ставит правило 05_uslugi.css, раздел 05.1, весом
(0,10,1) - оно написано от `.kart3:not(.ryadom)`. Поэтому здесь у
названия дописан `[data-b]`: вес (0,10,2), правило выигрывает при
любом порядке подключения файлов. Без приписки резерв оставался на
плашках с сеткой `kart3` - замер 02.09.2026 на «Переводе
документов»: у названия в одну строку min-height 41,6px, видимый
просвет до текста 42 точки против 21 на нефтегазе.
Откат: удалить правило - вернётся резерв в две строки. */
body .cards3[data-b].plashki-kanon.bez-znachka .card3[data-b]
.foldh[data-b] > span[data-b]:first-child {
min-height: 0;
}
/* Две группы документов - карточка во всю ширину.
Требование Павла 02.09.2026: «этот блок должен быть размещён так, как
у нас на сайте, полностью по горизонтали - в ряду у нас один блок».
Дальше: текст слева, картинка справа примерно 60 на 40; название
группы по центру текстовой части; текст прижат кверху; список
документов - в два ровных столбца; при наведении текстовая часть
краснеет, как сейчас.
Правило написано от числа карточек, а не от страницы: две длинные
группы (20 и 29 пунктов) в половине ширины дают две башни, а во всю
ширину читаются в два столбца. У блоков с четырьмя и более группами
раскладка прежняя - две карточки в ряд.
Откат: удалить этот блок - карточки вернутся в две колонки. */
body .tp-dokumenty[data-n="2"] {
grid-template-columns: minmax(0, 1fr);
}
/* Текст прижат кверху: заливка по умолчанию центрирует единственного
ребёнка по высоте, а во всю ширину карточка выше текста. */
body .tp-dokumenty[data-n="2"] .tp-zalivka {
align-items: flex-start;
}
/* Список - в два ровных столбца; пункт не разрывается между ними. */
body .tp-dokumenty[data-n="2"] .tp-zalivka ul {
columns: 2;
column-gap: 28px;
}
body .tp-dokumenty[data-n="2"] .tp-zalivka li {
break-inside: avoid;
}
/* Картинка не тянет карточку вверх.
В карточке во всю ширину под снимок уходит 38% - это 430 точек, и при
родных пропорциях снимок вырастает до 475 точек в высоту. Высоту
карточки задавал он, а не текст: рядом со списком в два столбца
оставалось пустое поле (замер 02.09.2026: карточка 660 при тексте
430). Ограничение по высоте возвращает роль ведущего тексту; снимок
вписывается целиком и стоит по центру своей половины.
340 точек - высота десяти строк списка, то есть самой короткой из
двух групп. Меньше делать нечего: снимок перестанет читаться.
Откат: удалить правило - высоту снова будет задавать картинка. */
/* Подводка группы - по левому краю, как весь текст карточки.
По центру стоит только НАЗВАНИЕ группы: «перевод личных документов
частных лиц ставится посередине... дальше текст пишется слева»
(Павел, 02.09.2026). Подводка - это текст, а не заголовок, и
центрирование компонента ей не наследуется.
Вес. Названия групп центрирует правило `body .tp-dokumenty
.tp-gruppa > p` весом (0,2,2) - под него попадает и подводка,
потому что она тоже абзац. Здесь к тому же селектору добавлен класс
подводки: вес (0,3,2), правило выигрывает.
Откат: удалить правило - подводка встанет по центру, как название. */
body .tp-dokumenty .tp-gruppa > p.tp-gruppa-podvodka {
text-align: left;
}
body .tp-dokumenty[data-n="2"] .tp-karta img {
max-height: 340px;
width: auto;
max-width: 100%;
justify-self: center;
}
/* Список внутри плашки не добавляет своего отступа сверху.
В блоке «Технический перевод по направлениям» тело плашки - список, и
у него свой margin 12px. Из-за него до первой строки выходило 32
точки, а в соседних блоках, где тело - абзац, 20. Замечание Павла
02.09.2026: «очень большое расстояние от названия блока до текста,
нужно сделать такое же, как в остальных блоках».
Снимаем и нижний отступ последнего списка - иначе внизу плашки
появляется лишний воздух той же природы.
Откат: удалить правило - вернутся 32 точки в блоке направлений. */
body .cards3[data-b].plashki-kanon .card3[data-b] .foldb[data-b] > ul:first-child,
body .cards3[data-b].plashki-kanon .card3[data-b] .foldb[data-b] > ol:first-child {
margin-top: 0;
}
body .cards3[data-b].plashki-kanon .card3[data-b] .foldb[data-b] > ul:last-child,
body .cards3[data-b].plashki-kanon .card3[data-b] .foldb[data-b] > ol:last-child {
margin-bottom: 0;
}
body .cards3[data-b].plashki-kanon.kart3 .card3[data-b],
body .cards3[data-b].plashki-kanon.kart4 .card3[data-b] {
align-items: start;
align-content: start;
}
body .cards3[data-b].plashki-kanon .card3[data-b] .foldwrap[data-b] {
text-align: center;
}
body .cards3[data-b].plashki-kanon .card3[data-b] .foldh[data-b] {
justify-content: center;
text-align: center;
}
body .cards3[data-b].plashki-kanon .card3[data-b] .foldb[data-b] {
text-align: left;
}
/* Призыв «есть похожая задача» в карточке примера - по центру (ТЗ
01.09.2026). Сам текст и адрес приходят из паспорта страницы; ведёт он
к форме ниже по странице, а на действующей странице у него href="#",
то есть ссылка не работает вовсе. */
body .cards3[data-b].plashki-kanon .card3[data-b] .foldb[data-b] .go[data-b] {
justify-content: center;
text-align: center;
}
/* ── 4. Парный блок «Экономия бюджета / Скорость перевода» ───────── */
/* Экономия и скорость - две карточки в ряд, как на действующем сайте
(замер .s-econ-speed-inner: две колонки по 574, зазор 32). */
body .tp-para {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
align-items: start;
}
body .tp-polovina > h2 {
margin: 0 0 10px;
text-align: center;
}
/* Девиз карточки («Мы не ставим завышенную цену…») - по центру,
полужирный 16, как на действующем сайте (замер .s-econ-speed-item-desc). */
body .tp-polovina > p:not([class]) {
text-align: center;
font-weight: 700;
margin: 0 0 24px;
}
/* Пункт карточки: название 28/700, выжимка 16 полужирная, пояснение 16
обычное (замер .s-econ-speed-item-fact действующего сайта). Разбор Павла
24.08.2026: «посмотри внимательно, какие там шрифты, какая разметка». */
body .tp-podzagolovok {
font-size: 28px;
font-weight: 700;
margin: 22px 0 6px;
}
/* Короткая строка с числом («4 уровня проверки…», «Экономия бюджета до
70%…») - обычный абзац, как весь остальной текст: 15 px, тёмно-серый,
без выделения. Раньше она набиралась 16 px полужирным и выбивалась из
страницы - правка Павла 25.08.2026. Класс оставлен: он размечает смысл
строки, а не её вид. */
body .tp-vyzhimka {
margin: 0 0 8px;
}
/* ── 5. Вопросы и ответы ────────────────────────────────────────── */
/* Разметка та же, что у блока вопросов главной (details/summary), поэтому
вид приходит из bloki/15_voprosy.css. Здесь только воздух между парами:
на главной его задаёт сетка блока, а этот раздел собран из содержимого
страницы. */
body .tp-faq details.q {
margin-bottom: 12px;
}
/* ── 5.0.1. Кнопка под примерами перевода - по центру ──────────────
Правка Павла 01.09.2026 по «Промышленному переводу»: «в блоке "Как мы
оформляем промышленный перевод", примеры технического перевода -
кнопка слева стоит, должна по центру». Ряд с кнопкой выводит общий
шаблон блока примеров, поэтому правило одно на все страницы с этим
блоком. */
body .tp-knopka-ryad {
text-align: center;
margin: 24px 0 0;
}
/* ── 5.1. Редакционный блок: текст ОБТЕКАЕТ картинку ───────────────
Правка Павла 01.09.2026: «когда мы нажимаем "читать далее", картинка
остаётся на своём месте, в том же углу, где и была - слева сверху,
она не идёт посередине, а текст разворачивается на всю ширину;
получается сверху такой уголочек, где остаётся картинка, а после
того, как картинка заканчивается, текст пишется на всю ширину».
До правки блок был сеткой в две колонки: картинка в левой, текст в
правой на всю высоту раскрытого блока. Раскрытый текст оставался в
узкой колонке, а картинка съезжала к середине по высоте.
Сделано обтеканием: картинка выводится из потока влево, текст идёт
обычным потоком и сам обтекает её - рядом с картинкой по правой
части, ниже картинки во всю ширину. Ширину картинки по-прежнему
держит переменная --kolonka-kartinki, которую считает сценарий, так
что свёрнутый вид и обрезка текста не меняются.
Правило живёт в медиазапросе для компьютера: на телефоне у блока своя
раскладка в одну колонку (раздел 6), и обтекание там не нужно. */
@media (min-width: 901px) {
body .blok-illyustraciya {
display: block;
}
body .blok-illyustraciya > img {
float: left;
width: var(--kolonka-kartinki, 472px);
/* Просвет до текста - те же 30, что были зазором сетки; снизу 14,
чтобы строка под картинкой не липла к ней. */
margin: 0 30px 14px 0;
}
/* Кнопка «Читать далее» и «Свернуть» всегда под всем блоком, а не
сбоку от картинки. */
body .blok-illyustraciya > .rt-knopka {
clear: both;
}
}
/* ── 6. Телефон ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
body .tp-dokumenty,
body .tp-otrasli,
body .tp-para,
body .tp-primery {
grid-template-columns: 1fr;
}
body .tp-karta,
body .card3.tp-etap,
body #otrasli .tp-otrasl {
grid-template-columns: 1fr;
}
body .card3.tp-etap > p,
body .card3.tp-etap ul {
grid-column: 1;
}
body .card3.tp-etap img,
body #otrasli .tp-otrasl img {
width: 96px;
height: auto;
}
}
/* ── 8. Правки по разбору Павла, 24.08.2026 (вечер) ───────────────── */
/* 8.1. Просвет от заголовка раздела до подзаголовка - 14, как на главной.
На главной это делает отрицательный верхний отступ .sub, привязанный к
соседству «h2 + .sub» (glavnaya.css). У перенесённого содержимого между
заголовком и подзаголовком иногда стоит перевод строки, соседство
ломается, и просвет оставался равным полному отступу заголовка.
Правило ниже повторяет расчёт главной для разделов страницы.
МЕЖДУ ЗАГОЛОВКОМ И ПОДЗАГОЛОВКОМ БЫВАЕТ КНОПКА. Мобильный сценарий
прячет вводный абзац под «Читать далее» и ставит кнопку сразу за
заголовком (tehperevod_mobile.js, разделы «Отрасли» и подобные). На
компьютере кнопка скрыта, но в дереве остаётся - и соседство
«h2 + .sub» опять ломается: на «Техническом переводе» просвет был 70
вместо 14 (замер 31.08.2026). Поэтому в правило добавлены варианты с
кнопкой между ними. Правка Павла: «почини технический, пусть везде
будет 14». */
body .blk[data-b] > h2[data-b] + .sub[data-b],
body .blk[data-b] > h2[data-b] + p[data-b].sub,
body .blk[data-b] > h2[data-b] + .tp-readmore + .sub[data-b],
body .blk[data-b] > h2[data-b] + .tp-readmore + p[data-b].sub,
body .blk[data-b] > h2[data-b] + .readmore + .sub[data-b],
body .blk[data-b] > h2[data-b] + .readmore + p[data-b].sub {
margin-top: calc(14px - var(--sp-block));
}
/* 8.2. Картинки карточек. Белый фон вырезан у самих файлов (копии в
home/static/img/tp_bez_fona, скрипт vyrezat_fon_kartinok), поэтому
рисунок при наведении остаётся в своих цветах, а вокруг него виден фон
плитки - без белого квадрата и без красной заливки поверх рисунка.
Правило `mix-blend-mode` снято: оно смешивало рисунок с красным.
Разбор Павла 24.08.2026: «сами картинки должны остаться именно
картинками, незакрашенными красным; по контуру, без квадрата».
Подсветка текста (белый) на сами картинки не влияет - у них нет текста. */
body .tp-otrasl img,
body .tp-karta img,
body .tp-etap img,
body #faktory .tp-faktor-shapka img,
/* Редакционный блок с иллюстрацией: рисунок лежит на странице по контуру,
без серого квадрата - тот же вид, что у «Преимуществ» на «Техническом
переводе» (требование Павла 27.08.2026). Общее правило guide.css
«.blk img { background: var(--soft) }» красит подложку любой картинке
внутри раздела, и до этой правки квадрат стоял и на «Переводе
инструкций», и на «Переводе чертежей». Компонент добавлен в этот список,
а не оформлен своим правилом на странице (канон, раздел 5г).
«border: 0» перенесено сюда из правила по идентификатору блока
(29.08.2026): рамки картинке не ставит никто, но снятие её было частью
вида «Преимуществ», и при переводе блока на класс оно не теряется. */
body .blok-illyustraciya > img {
background: none;
box-shadow: none;
border: 0;
border-radius: 0;
mix-blend-mode: normal;
}
/* 8.3. Примеры перевода - без рамок и карточек, на белом фоне страницы. */
body .tp-primer {
background: none;
box-shadow: none;
padding: 0;
border-radius: 0;
}
body .tp-primer-snimok {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
body .tp-primer-snimok img {
width: 100%;
border-radius: 0;
}
/* 8.4. Факторы качества - каждый фактор сам по себе, без общей белой
обёртки: «блок в блоке» Павел велел убрать. */
body #faktory .tp-faktor {
background: none;
box-shadow: none;
padding: 0;
border-radius: 0;
}
/* ── 9. Правки по диктовке Павла 24.08.2026 (финальный круг) ───────── */
/* 9.1. Маркеры перечней - фирменным красным, как на действующем сайте
(«точки у списка должны быть красные, а не чёрные»). */
body .tp-tekst li::marker {
color: #8c1821;
}
/* 9.2. Факторы качества. Слева - название H3, девиз и картинка без всякой
подложки; справа - три карточки, каждая разбита 30/70. Высота левой
колонки равна высоте трёх правых карточек: обе колонки растягиваются на
всю высоту строки сетки, а карточки распределяют свободное место между
собой. */
body #faktory .tp-faktor {
align-items: stretch;
}
body #faktory .tp-faktor-shapka {
display: flex;
flex-direction: column;
align-items: center;
}
body #faktory .tp-faktor-shapka img {
margin-top: auto;
max-width: 100%;
}
body #faktory .tp-faktor-punkty {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Пункт фактора - карточка по общим правилам сайта: белый фон, тень,
скругление, внутренние поля. Внутри - две колонки 30/70. */
body #faktory .tp-faktor-stroka {
display: grid;
grid-template-columns: 30% minmax(0, 70%);
gap: 24px;
align-items: start;
flex: 1 1 0;
margin: 0;
padding: 20px 22px;
background: #fff;
border-radius: 16px;
box-shadow: var(--tenj-bloka);
}
/* 9.3. Парный блок «Экономия бюджета / Скорость перевода».
Между колонками - жирный плюс на уровне подзаголовков; строки колонок
стоят попарно на одном уровне (сетка из одинаковых рядов). */
body .tp-para {
position: relative;
}
body .tp-para::before {
content: "+";
position: absolute;
left: 50%;
top: var(--tp-plyus-verh, 84px);
transform: translate(-50%, -50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--knopka-fon);
color: #fff;
font-size: 28px;
font-weight: 700;
line-height: 1;
}
/* Колонка парного блока: строки идут по общей сетке, поэтому заголовки,
подзаголовки, черта и подблоки левой и правой колонок стоят на одном
уровне (требование Павла: «всё ровно, как в оригинале»).
Число рядов приходит переменной --ryadov: его считает преобразование
para_ekonomiya по самой длинной колонке. Пять - значение по умолчанию
для страниц с двумя подблоками в каждой колонке; на «Авиационном
переводе» подблоков три, и рядов шесть. Пока число было жёстко
пятёркой, шестой узел печатался поверх пятого - правка Павла
31.08.2026. */
body .tp-para {
grid-template-rows: repeat(var(--ryadov, 5), auto);
}
/* Колонка занимает ВСЕ ряды общей сетки, начиная с первого: тогда
заголовок, девиз, черта и подблоки левой и правой колонок стоят
попарно на одном уровне (требование Павла: «всё ровно, как в
оригинале»). */
body .tp-para .tp-polovina {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / span var(--ryadov, 5);
gap: 0;
align-content: start;
}
/* Запасной вариант для браузеров без subgrid: строки не выровняются
попарно, но текст не наложится. */
@supports not (grid-template-rows: subgrid) {
body .tp-para .tp-polovina {
display: flex;
flex-direction: column;
}
}
body .tp-podblok {
display: flex;
flex-direction: column;
}
/* Черта под подзаголовком колонки. */
body .tp-polovina .tp-cherta {
border: 0;
border-top: 1px solid var(--line, #d9dbde);
margin: 18px 0;
width: 100%;
}
/* Подблок колонки: H4, полужирная выжимка, текст.
H2 в списке селекторов - для страниц, где задание требует сделать
колонки самостоятельными смысловыми блоками («Экономия бюджета» и
«Скорость перевода» на промышленной и авиационной страницах). На
«Техническом переводе» H2 внутри колонки нет, поэтому правило там
ничего не меняет - проверено слепком 29.08.2026. */
body .tp-polovina > h2,
body .tp-polovina h3 {
font-size: 21px;
line-height: 1.3;
font-weight: 700;
margin: 0 0 8px;
}
/* 9.4. Картинка блока с иллюстрацией - без квадрата, без тени, без рамки.
Правило живёт в разделе 8.2 у класса компонента; отдельного повтора по
идентификатору «преимуществ» здесь больше нет (29.08.2026). */
/* 9.5. Лупа на примерах перевода. При наведении поверх снимка появляется
кружок с лупой и плюсом - подсказка «можно увеличить». В раскрытом виде
(окно зума) значок меняется на лупу с минусом, и нажатие по снимку
сворачивает его. Требование Павла 24.08.2026, крестик снят. */
body .tp-primer-snimok {
position: relative;
}
body .tp-primer-snimok::after {
content: "";
position: absolute;
right: 12px;
bottom: 12px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--knopka-fon) center / 22px 22px no-repeat;
background-image:
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M7.5 10.5h6M10.5 7.5v6'/%3E%3C/svg%3E"),
var(--knopka-fon);
background-position: center, center;
background-size: 24px 24px, auto;
background-repeat: no-repeat, no-repeat;
opacity: 0;
transition: opacity .2s;
pointer-events: none;
}
/* Наведение - только при настоящем курсоре (решение Павла 08.09.2026,
правило 4.5 в bloki/00_obshchee.css: на сенсорном экране :hover не
отпускает и залипает после касания). Здесь залипала подсказка-лупа:
она вспыхивала на снимке ПОСЛЕ того, как его уже нажали, и оставалась
висеть - то есть подсказывала задним числом.
На телефоне лупа теперь не показывается вовсе. Там, где Павел решил
иначе, она горит постоянно и без наведения: раздел М26 ниже держит её
видимой в блоке примеров оформления (замечание К2-9, 08.09.2026).
Обход клавишей отделён: он обязан работать на любом устройстве.
Откат: снять @media. */
body .tp-primer-snimok:focus-visible::after {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
body .tp-primer-snimok:hover::after {
opacity: 1;
}
}
/* Раскрытый снимок: лупа с минусом в том же месте окна зума. */
body .pismo-zum {
cursor: zoom-out;
}
body .pismo-zum::after {
content: "";
position: fixed;
right: 28px;
bottom: 28px;
width: 48px;
height: 48px;
border-radius: 50%;
background-image:
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M7.5 10.5h6'/%3E%3C/svg%3E"),
var(--knopka-fon);
background-position: center, center;
background-size: 26px 26px, auto;
background-repeat: no-repeat, no-repeat;
pointer-events: none;
}
/* ── 10. Круг 6: заливка только текстовой части ──────────────────────
Решение Павла 24.08.2026: наводим мышью на ВСЮ карточку, а краснеет
только её текстовая часть - прямоугольник со скруглёнными углами, той же
градиентной заливкой, что у кнопок. Текст внутри белый и стоит
посередине. Картинки при наведении не закрашиваются и остаются на белом.
Карточки страницы для этого сняты из общего списка подсветки в
bloki/00_obshchee.css - там подсвечиваются блоки главной. */
body .tp-zalivka {
border-radius: 16px;
transition: background-image .25s, color .25s;
}
@media (hover: hover) and (pointer: fine) {
body .tp-karta:hover .tp-zalivka,
body .tp-otrasl:hover .tp-zalivka,
body .tp-etap:hover .tp-zalivka,
body .tp-faktor-stroka:hover .tp-faktor-nazvanie {
background-image: var(--knopka-fon);
}
body .tp-karta:hover .tp-zalivka,
body .tp-karta:hover .tp-zalivka *,
body .tp-otrasl:hover .tp-zalivka,
body .tp-otrasl:hover .tp-zalivka *,
body .tp-etap:hover .tp-zalivka,
body .tp-etap:hover .tp-zalivka *,
body .tp-faktor-stroka:hover .tp-faktor-nazvanie {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Маркеры списка тоже белеют - требование Павла. */
body .tp-karta:hover .tp-zalivka li::marker {
color: #fff;
}
}
/* 10.1. Документы: список в блоке-заливке, поля слева и справа равны.
Слева от края заливки до маркеров - те же 18, что справа от текста до
края: 18 поля + 20 отступ списка даёт видимый зазор до точки, а справа
поле 18 отмеряется от самой длинной строки. */
body .tp-dokumenty .tp-zalivka {
padding: 14px 18px;
}
body .tp-dokumenty .tp-zalivka ul {
margin: 0;
padding-left: 16px;
}
/* Картинка карточки чуть меньше - место ушло под поля заливки. */
body .tp-dokumenty .tp-karta {
grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
gap: 10px;
}
/* Картинка вписывается в отведённое место целиком, не обрезаясь. */
body .tp-dokumenty .tp-karta img {
width: 100%;
height: auto;
object-fit: contain;
}
/* 10.3. Документы БЕЗ КАРТИНОК: три плашки в ряд.
Правка Павла 31.08.2026 по «Деловому переводу»: «блок похож на то, что
у нас на техническом переводе, но здесь нет картинок. Раз визуала для
этого раздела нет, раскладку меняем: разместить в ряд по три штуки,
по ширине одинаковые, по высоте - по высоте самой большой; название
сверху, по центру по ширине, с одинаковым отступом от верхнего края;
основной текст на одинаковом расстоянии от названия и с одинаковым
отступом слева; где текста меньше - центруем по высоте, сверху от
названия и снизу до красной черты расстояние одинаковое».
Равная высота приходит из базового правила компонента
(grid-auto-rows: 1fr и .tp-karta { height: 100% }), поэтому здесь
только число колонок, одна колонка внутри карточки и центрирование.
Модификатор ставит преобразование dokumenty(bez_kartinok=True) -
раскладка привязана к компоненту, а не к странице (канон, 13.1). */
body .tp-dokumenty-bez-kartinok {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Картинки нет - вторая колонка не нужна, карточка остаётся сеткой в одну
колонку: так заливка растягивается на всю высоту ячейки (align-items:
stretch у карточки задано разделом 11.1). */
body .tp-dokumenty-bez-kartinok .tp-karta {
grid-template-columns: minmax(0, 1fr);
}
body .tp-dokumenty-bez-kartinok .tp-gruppa {
width: 100%;
}
/* Название - по центру ширины, отступ до списка одинаковый во всех
плашках. */
body .tp-dokumenty-bez-kartinok .tp-gruppa > p {
text-align: center;
margin: 0 0 12px;
}
/* Список - слева, отступ до маркеров одинаковый во всех плашках. */
body .tp-dokumenty-bez-kartinok .tp-zalivka ul {
margin: 0;
padding-left: 20px;
}
/* На телефоне общее правило компонента ставит одну колонку - плашки идут
столбцом, центрирование по высоте при этом не мешает: высота каждой
равна её содержимому. */
@media (max-width: 900px) {
body .tp-dokumenty-bez-kartinok {
grid-template-columns: 1fr;
}
}
/* 10.2. Отрасли: плитка 40/60 - картинка слева, текст справа. Скругление
слева заметное, справа - как у самой плитки. */
body #otrasli .tp-otrasl {
grid-template-columns: 40% minmax(0, 60%);
gap: 0;
padding: 12px;
}
body #otrasli .tp-otrasl-tekst {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 12px 14px;
text-align: center;
border-radius: 16px 10px 10px 16px;
}
body #otrasli .tp-otrasl-tekst p {
margin: 0;
}
/* 10.3. Этапы: краснеет только название; оно по центру своего блока и
растянуто на всю высоту карточки, зазоры слева и справа равны 24. */
body .card3.tp-etap {
grid-template-columns: 128px 262px minmax(0, 1fr);
gap: 24px;
align-items: stretch;
}
body .card3.tp-etap .tp-etap-nazvanie {
display: flex;
align-items: center;
padding: 16px 18px;
}
body .card3.tp-etap .tp-etap-nazvanie p {
margin: 0;
}
body .card3.tp-etap img {
align-self: center;
}
/* 10.4. Факторы: название пункта - блок-заливка, колонки 40/60 (решение
Павла: «там сорок, на другую часть шестьдесят»). */
body #faktory .tp-faktor-stroka {
grid-template-columns: 40% minmax(0, 60%);
gap: 0;
align-items: stretch;
}
body #faktory .tp-faktor-nazvanie {
display: flex;
align-items: center;
margin: 0;
padding: 14px 18px;
border-radius: 16px;
transition: background-image .25s, color .25s;
}
body #faktory .tp-faktor-poyasnenie {
padding: 14px 18px;
}
/* 10.5. Парный блок: названия колонок и девиз - по центру, девиз
полужирный и единый. */
body .tp-polovina > h2 {
text-align: center;
font-size: 28px;
line-height: 33.6px;
margin: 0 0 12px;
}
body .tp-polovina .tp-devis {
text-align: center;
font-weight: 700;
}
body .tp-polovina .tp-devis p {
margin: 0 0 6px;
font-weight: 700;
}
/* ── 11. Круг 7: заливка вровень с краями карточки ───────────────────
Разбор Павла 24.08.2026: «границы красного блока должны совпадать с
границами белого блока, чтобы не было эффекта блок в блоке».
Приём один на все четыре места: внутренние поля карточки гасятся у
заливки отрицательными полями и возвращаются её собственными - тогда
красный прямоугольник доходит до края карточки, а текст стоит там же,
где стоял. Скругление берётся карточкино (16), чтобы углы совпали. */
/* 11.1. Документы: заливка вровень слева, сверху и снизу; справа - своя
граница, там начинается картинка. */
/* Карточка растягивает содержимое по высоте, иначе заливка ниже картинки
и сверху-снизу остаётся просвет (замер: 9,4). */
body .tp-dokumenty .tp-karta {
align-items: stretch;
}
body .tp-dokumenty .tp-zalivka {
display: flex;
/* Содержимое прижато к ВЕРХУ ячейки - правка Павла 01.09.2026:
«отступ от верхнего края до названия одинаковый у всех, договоры и
страховую документацию надо поднять». Прежде стояло center, и в
невысоких карточках название висело посередине. */
align-items: flex-start;
/* Края заливки вровень с карточкой (гасим её поля), а внутренние поля
меньше прежних: слева до маркеров списка и справа до края - по 12
вместо 24. Освободившееся место уходит картинке. Разбор Павла
25.08.2026: «сделай отступы слева и справа меньше, за счёт этого
освободится место для картинки». */
margin: -20px 0 -20px -24px;
padding: 16px 12px;
border-radius: 16px;
}
/* Название группы - ПО ЦЕНТРУ красной ячейки, у всех таких блоков.
Правка Павла 01.09.2026: «заголовок блока документов должен стоять
посередине вот этого красного блока с заливкой». Раньше правило
действовало только у варианта без картинок; теперь общее для
компонента. Список под названием остаётся слева. */
body .tp-dokumenty .tp-gruppa > p {
text-align: center;
margin: 0 0 12px;
}
/* Группа занимает всю ширину заливки, иначе центрировать нечего: у
flex-элемента ширина считается по содержимому, и «по центру»
получалось по центру самой строки (замер 01.09.2026: группа 319 при
заливке 343). */
body .tp-dokumenty .tp-gruppa {
flex: 1 1 auto;
min-width: 0;
}
/* Заливка занимает белую карточку ЦЕЛИКОМ - вровень со всеми четырьмя
краями. Вторая правка Павла 31.08.2026: «эти блоки в техническом
переводе идут с картинкой, поэтому справа оставлено место и заливка
только наполовину; здесь картинки нет, значит заливка должна быть на
всю ширину белого квадрата». Базовое правило 11.1 гасит поля карточки
слева, сверху и снизу, а справа оставляет 24 под картинку - здесь
гасится и правое поле.
Содержимое прижато к ВЕРХНЕМУ краю, а не отцентровано: «блоки поднять
наверх по верхнему краю, все названия блоков должны быть на одном
уровне, а где текста меньше - плашка просто раньше заканчивается».
Это отменяет центрирование по высоте из первой правки того же дня. */
body .tp-dokumenty-bez-kartinok .tp-zalivka {
display: flex;
align-items: flex-start;
margin: -20px -24px;
padding: 18px;
}
/* 11.2. Отрасли: заливка вровень сверху, справа и снизу; слева - своя
граница у картинки. Скругление одинаковое со всех сторон. */
body #otrasli .tp-otrasl {
align-items: stretch;
}
body #otrasli .tp-otrasl-tekst {
margin: -12px -12px -12px 0;
padding: 12px 16px;
border-radius: 16px;
}
/* 11.3. Этапы: заливка вровень сверху и снизу. Название снова полужирное -
оно потеряло начертание, когда переехало внутрь блока-заливки. */
body .card3.tp-etap .tp-etap-nazvanie {
margin: -20px 0;
padding: 20px 18px;
border-radius: 16px;
justify-content: center;
text-align: center;
}
body .card3.tp-etap .tp-etap-nazvanie p {
font-weight: 700;
font-size: 16px;
}
/* 11.4. Факторы: заливка вровень слева, сверху и снизу; текст названия -
по центру прямоугольника и по горизонтали, и по вертикали. */
body #faktory .tp-faktor-nazvanie {
margin: -20px 0 -20px -22px;
padding: 20px 22px;
border-radius: 16px;
justify-content: center;
text-align: center;
}
/* 11.5. «Технологии»: снимок программ уменьшен на 30 % по показу (файл
уменьшать было мало - картинка тянулась по ширине колонки) и стоит по
центру своей колонки. */
/* Уменьшается ТОЛЬКО снимок программ (Технологии) - анкеты и сертификаты
Павел велел не трогать: «там всё нормально смотрится, оставь в покое».
Отбор по имени файла: у остальных карточек фактора картинки другие. */
body #faktory .tp-faktor-shapka img[src*="qual-3"] {
width: 70%;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
/* 11.6. Картинка текстового блока «Что такое технический перевод»: без
серого квадрата. Замер показал у неё фон #F5F6F7 и радиус 8 - это и
читалось как «серый квадрат» вокруг ноутбука (разбор Павла 24.08.2026,
круг 7). Остаётся сама картинка: белый лист, ноутбук и тень. */
body #kachestvo .kachestvo-kartinka,
body #kachestvo .kachestvo-visual img {
background: none;
border-radius: 0;
box-shadow: none;
}
/* Заголовок «Виды технического перевода» вернулся на уровень H2 (решение
Павла 25.08.2026) и набирается как остальные H2 разделов: 28 px по
центру. Раздел по-прежнему живёт внутри текстового блока, но уровень и
вид у него теперь такие же, как у других разделов страницы. */
body #kachestvo .tp-vidy-zagolovok {
font-size: 28px;
line-height: 33.6px;
font-weight: 700;
text-align: center;
margin: 28px 0 12px;
}
/* ══════════════════════════════════════════════════════════════════════
МОБИЛЬНАЯ ВЕРСИЯ. ТЗ Павла 25.08.2026.
Эталон - главная в телефонном виде: карточка закрыта, нажатие раскрывает
её и красит красным, повторное нажатие сворачивает, нижележащее уезжает
вниз. Поведение навешивает
C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\site\tehperevod_mobile.js,
здесь только внешний вид.
Типографика взята замером мобильной главной (25.08.2026):
заголовок раздела H2 20 / 24 700
название карточки 16 / 20 650
подзаголовок под H2 13 / 16,64 700
мелкий текст и списки 13 / 17,55 400 #3D4247
Все правила стоят под body.mob - класс вешает auto_mob.js при ширине
окна 640 точек и меньше. Компьютерная раскладка не задета.
Откат: удалить этот раздел целиком и подключение сценария в шаблоне.
═══════════════════════════════════════════════════════════════════════ */
/* ── М1. Ничего не выходит за экран ──────────────────────────────────
Блок заказа стоял двумя колонками с жёсткой коробкой формы 760 точек:
дорожка сетки растягивалась под неё, и документ становился 774 точки
при экране 375 - страницу можно было отщипнуть пальцем и увидеть узкую
колонку на белом поле. Коробка теперь занимает ширину родителя, как в
форме главной (bloki/14_zayavka.css, правило .zayavka-blok .zkorobka). */
body.mob #zakazhite {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
body.mob #zakazhite > .zkorobka {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0;
}
/* Кнопка отправки шла с min-width: max-content и на узком телефоне (320)
держала 349 точек - форма расширяла документ. Ширину ей задаёт сама
форма, минимума достаточно нулевого. */
body.mob .zayavka-blok .zknopka {
min-width: 0;
max-width: 100%;
}
body.mob .blk img,
body.mob .blk table {
max-width: 100%;
}
/* Кнопка раздела шириной 240 точек вылезала за правый край. В шапке блока
«Как мы оформляем технический перевод» она стоит справа от заголовка
(flex, margin-left: auto): на телефоне строка не переносилась, и кнопка
уезжала на 46 точек за экран - документ становился 422 точки вместо 375.
Теперь строка переносится, кнопка встаёт под заголовком во всю ширину. */
body.mob .tp-knopka {
max-width: 100%;
}
body.mob .tp-primery-shapka {
flex-wrap: wrap;
gap: 10px;
}
body.mob .tp-primery-shapka a.tp-knopka {
width: 100%;
margin: 0;
}
/* ── М2. Раскрытая карточка ──────────────────────────────────────────
Тот же перелив, что при наведении и касании на главной
(bloki/00_obshchee.css, раздел 4.5). Здесь он не по наведению, а по
состоянию: пока карточка раскрыта, она остаётся красной. */
body.mob [data-tp-blok].tp-otkryt {
background-color: var(--podsvet-fon) !important;
background-image: var(--knopka-fon) !important;
border-color: var(--podsvet-fon) !important;
box-shadow: 0 10px 20px -8px rgba(140, 24, 33, .55) !important;
}
body.mob [data-tp-blok].tp-otkryt,
body.mob [data-tp-blok].tp-otkryt * {
color: var(--podsvet-tekst) !important;
-webkit-text-fill-color: var(--podsvet-tekst) !important;
}
/* Заливки внутри карточки на красном фоне лишние: они рисовались, чтобы
отделить текст от белого листа. */
body.mob [data-tp-blok].tp-otkryt .tp-zalivka {
background: transparent !important;
}
body.mob [data-tp-shapka] {
cursor: pointer;
}
/* Спрятанное сценарием тело карточки. Голого атрибута hidden мало: у
некоторых тел свой display (пункты факторов - сетка), а правило
браузера [hidden]{display:none} слабее правила с классом. */
body.mob [hidden] {
display: none !important;
}
/* Раскрытая плашка первого экрана - тем же красным, что карточки. */
body.mob .hero .pl.tp-otkryt {
background-color: var(--podsvet-fon) !important;
background-image: var(--knopka-fon) !important;
border-color: var(--podsvet-fon) !important;
box-shadow: 0 10px 20px -8px rgba(140, 24, 33, .55) !important;
}
body.mob .hero .pl.tp-otkryt,
body.mob .hero .pl.tp-otkryt * {
color: var(--podsvet-tekst) !important;
-webkit-text-fill-color: var(--podsvet-tekst) !important;
}
body.mob [data-tp-shapka]:focus-visible {
outline: 2px solid var(--podsvet-fon);
outline-offset: 2px;
}
/* ── М3. Карточки первого экрана: Тест, Глоссарий, Формат, Персонально ─
Закрытая показывает число и короткое название, раскрытая - пояснение. */
body.mob .buls.common.tp-kartochki .bul .bt > div:first-child {
font-size: 13px;
line-height: 17.55px;
font-weight: 400;
color: #3d4247;
}
body.mob .buls.common.tp-kartochki .tp-bul-telo {
font-size: 13px;
line-height: 17.55px;
}
/* ── М3а. Единый шаг первого экрана ───────────────────────────────────
Требование Павла 25.08.2026: «отмерь ещё раз везде расстояние между
блоками, они должны быть одинаковые - от плашек до кнопки калькулятора,
от кнопки до он-лайн заявки, от неё до плашки „Тест“, от „Формата“ до
заявки на тестовый перевод, от неё до „24/7“; по горизонтали и по
вертикали тютелька в тютельку».
Замер до правки (окно 375): между рядами плашек 10, по горизонтали 10,
между кнопками 7, от плашек до кнопок 23, от кнопок до карточек 3, от
карточек до заявки 9, от заявки до «24/7» 3. Теперь везде 12 - то же
число, что уже стояло между карточками «Тест» и «24/7». */
body.mob .hero[data-h],
body.mob .hero[data-h] .hright[data-h],
body.mob .acts[data-h],
body.mob .buls[data-h].common.tp-kartochki,
body.mob .buls[data-h].common.tp-ryad {
gap: 12px;
}
/* Кнопки и ряды карточек лежат не внутри .hero, а рядом с ним в main -
поэтому селекторы без приставки .hero. Промежуток задаётся только
сверху, снизу ноль: иначе к нему прибавляется отступ соседа. */
body.mob main > .acts[data-h],
body.mob main > .buls[data-h].common,
body.mob .ok-ryad-zayavki {
margin-top: 12px;
margin-bottom: 0;
padding-top: 0;
}
body.mob .hero[data-h] {
margin-top: 20px;
margin-bottom: 0;
}
body.mob .hero[data-h] .hright[data-h] {
margin-top: 0;
}
/* Заголовок и вступление - тот же шаг. Между самими абзацами вступления
разрыва нет: это один текст, а не два блока. */
body.mob .hero[data-h] h1[data-h] {
margin-bottom: 12px;
}
/* ── М4. Ограничения под формой теста ────────────────────────────────
Зачин «У нашего предложения есть ограничения:» остаётся строкой,
нумерованный текст прячется до нажатия. Текст не переписан: сценарий
только заворачивает хвост абзаца в свою обёртку. Красным заливать целый
абзац не нужно - подсвечивается сама строка-переключатель. */
body.mob .tp-ogranicheniya .tp-zachin {
display: block;
font-weight: 650;
color: var(--cvet-cifr, #8c1821);
}
body.mob .tp-ogranicheniya.tp-otkryt {
background: none !important;
box-shadow: none !important;
}
body.mob .tp-ogranicheniya.tp-otkryt,
body.mob .tp-ogranicheniya.tp-otkryt * {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
}
/* Раскрытая строка подсвечивается, как карточка: тем же переливом. */
body.mob .tp-ogranicheniya.tp-otkryt .tp-zachin {
display: block;
margin: 0 -8px 8px;
padding: 6px 8px;
border-radius: 8px;
background-color: var(--podsvet-fon) !important;
background-image: var(--knopka-fon) !important;
color: var(--podsvet-tekst) !important;
-webkit-text-fill-color: var(--podsvet-tekst) !important;
}
/* ── М5. Какие технические документы мы переводим ─────────────────────
Две карточки в ряд, картинки на телефоне не нужны: они съедают полосу,
а название документа читается и без них. Закрытая карточка показывает
две строки списка с многоточием - именно строки, а не два пункта,
поэтому обрезка идёт по -webkit-line-clamp. */
body.mob .tp-dokumenty {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: min-content;
gap: 10px;
align-items: start;
}
body.mob .tp-dokumenty .tp-karta {
display: block;
height: auto;
align-self: start;
padding: 12px 12px 14px;
}
body.mob .tp-dokumenty .tp-karta img {
display: none;
}
/* Блок без картинок: заливка вровень с краями карточки и на телефоне -
правка Павла 31.08.2026. Поля мобильной карточки другие (12 по бокам,
12 сверху, 14 снизу), поэтому и гашение своё. */
body.mob .tp-dokumenty-bez-kartinok .tp-zalivka {
margin: -12px -12px -14px;
/* Общее правило блоков держит max-width: 100%, и оно срезало бы
прибавку от отрицательных полей: замер 31.08.2026 давал 146 при
карточке 170. На телефоне карточка блочная, поэтому ограничение
снимается явно. */
max-width: none;
padding: 12px;
}
/* Название группы внутри карточки набирается тем же кеглем, что список:
иначе полужирный абзац шёл бы 15 / 21,75 рядом со списком 13 / 17,55 и
выбивался из карточки. Добавлено 29.08.2026 при сборке «Научного
перевода»; на «Техническом переводе» абзацев внутри этих карточек нет
вовсе, поэтому правило там ничего не меняет - проверено слепком. */
body.mob .tp-dokumenty .tp-karta ul,
body.mob .tp-dokumenty .tp-karta li,
body.mob .tp-dokumenty .tp-karta p,
body.mob .tp-dokumenty .tp-karta a {
font-size: 13px;
line-height: 17.55px;
/* Пункт 5 мобильного задания 09.09.2026: «не разрывать слова и не
переносить их по слогам; если слово не помещается, переносить его
целиком на следующую строку». Было «anywhere» - разрыв в любом
месте, от него «Учредительны | е». «break-word» рвёт только слово,
которое само по себе длиннее строки. */
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
body.mob .tp-dokumenty .tp-karta p {
margin: 0 0 6px;
}
body.mob .tp-dokumenty .tp-karta.tp-obrezano ul {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── М5а. Список документов: зазор слева и белые точки в раскрытой
карточке. Правки Павла 25.08.2026: «отодвинь точки от левого края -
справа места достаточно» и «при раскрытии они должны быть белыми, чтобы
было видно, что там список». */
body.mob .tp-dokumenty .tp-karta ul {
padding-left: 22px;
margin-left: 2px;
}
body.mob [data-tp-blok].tp-otkryt li::marker {
color: #fff;
}
/* ── М6. Отрасли и тематики ───────────────────────────────────────────
Вводный абзац уходит под кнопку «Читать полностью», карточки идут по
две в ряд без картинок, названия переносятся. */
body.mob #otrasli .tp-otrasli {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: min-content;
gap: 10px;
align-items: start;
}
/* Карточка на телефоне - простой блок. На компьютере это сетка «картинка
слева, текст справа»: картинку мы прячем, а её колонка оставалась и
зажимала текст в полоску шириной в две буквы (поймано снимком). */
body.mob #otrasli .tp-otrasl {
display: block;
height: auto;
align-self: start;
padding: 10px;
}
body.mob #otrasli .tp-otrasl .tp-zalivka {
display: block;
width: 100%;
}
body.mob #otrasli .tp-otrasl img {
display: none;
}
/* Название отрасли в половине экрана: 13 px, переносы только по словам.
С 16 px и переносом «где угодно» длинные названия («Медицина,
фармацевтика и биотехнологии») рвались по слогам и буквам - карточка
превращалась в столбик из двух-трёх букв (поймано снимком 25.08.2026). */
body.mob #otrasli .tp-otrasl p {
font-size: 13px;
line-height: 16.9px;
font-weight: 650;
/* Пункты 5 и 15 мобильного задания 09.09.2026: «слова внутри указанных
строк не разрывать и не переносить по слогам». Было `hyphens: auto` -
браузер расставлял слоговые переносы («Горнодо- бывающая»). */
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
/* ── М7. Как мы выполняем технический перевод ─────────────────────────
Виден только заголовок этапа, список раскрывается нажатием и идёт одной
колонкой на всю ширину карточки. */
body.mob .card3.tp-etap {
display: block;
padding: 12px 14px;
/* Нижний предел высоты снимается: он держал карточку не ниже
картинки, а на телефоне картинка скрыта, и 168 точек пустоты под
коротким шагом были бы дырой на пол-экрана. */
min-height: 0;
}
body.mob .card3.tp-etap img {
display: none;
}
body.mob .card3.tp-etap .tp-etap-nazvanie p {
font-size: 16px;
line-height: 20px;
font-weight: 650;
}
body.mob .card3.tp-etap ul {
columns: 1;
margin: 10px 0 0;
padding-left: 18px;
}
body.mob .card3.tp-etap li {
font-size: 13px;
line-height: 17.55px;
}
/* ── М8. Факторы качества ─────────────────────────────────────────────
Видна шапка (название и вводная фраза), пункты раскрываются. Внутри
раскрытой карточки пункт идёт сверху, пояснение под ним - десктопное
чередование слева и справа на телефоне не читается. */
body.mob #faktory .tp-faktor {
display: block;
padding: 12px 14px;
}
body.mob #faktory .tp-faktor-shapka {
display: block;
}
/* Раскрытая карточка фактора красится красным - края должны быть
скруглены, как у всех остальных карточек страницы, иначе красный
прямоугольник с острыми углами бросается в глаза (правка Павла
25.08.2026). */
body.mob #faktory .tp-faktor {
border-radius: 16px;
}
/* Строки внутри фактора имеют свой белый фон - на красной карточке текст
становился белым по белому, и раскрытый фактор выглядел набором пустых
квадратов. На красном фоне подложка не нужна. */
body.mob #faktory .tp-faktor.tp-otkryt .tp-faktor-stroka,
body.mob #faktory .tp-faktor.tp-otkryt .tp-faktor-punkty {
background: transparent !important;
box-shadow: none !important;
}
body.mob #faktory .tp-faktor img {
display: none;
}
body.mob #faktory .tp-faktor-shapka p:first-child {
font-size: 16px;
line-height: 20px;
font-weight: 650;
}
body.mob #faktory .tp-faktor-shapka p + p {
font-size: 13px;
line-height: 17.55px;
}
/* Строки фактора на компьютере растягиваются на всю высоту колонки
(flex: 1 1 0) - так три карточки выравниваются по высоте. На телефоне от
этого между пунктами оставалась пустота в пол-экрана. */
body.mob #faktory .tp-faktor-punkty {
display: block;
margin-top: 12px;
}
body.mob #faktory .tp-faktor-stroka {
display: block;
flex: 0 0 auto;
padding: 0;
margin-bottom: 14px;
text-align: left;
}
body.mob #faktory .tp-faktor-nazvanie,
body.mob #faktory .tp-faktor-poyasnenie {
text-align: left;
}
body.mob #faktory .tp-faktor-nazvanie {
font-size: 16px;
line-height: 20px;
font-weight: 650;
padding: 0;
margin: 0 0 4px;
}
body.mob #faktory .tp-faktor-poyasnenie {
font-size: 13px;
line-height: 17.55px;
padding: 0;
margin: 0;
}
/* ── М9. Экономия бюджета и Скорость перевода ─────────────────────────
Два самостоятельных раскрывающихся блока, один под другим. Закрытый
показывает заголовок и девиз, раскрытый - оба подблока по вертикали.
Задание 3 от 09.09.2026: «на "Промышленном переводе" и "Авиационном
переводе" эти блоки реализованы из рук вон плохо: непонятно, откуда
там ноги растут, какие-то огромные плюсики и тому подобное. Пойти и
переделать - по образцу технического перевода».
Причина была в адресе правил. Раздел был написан на идентификатор
секции «#ekonomiya-skorost» - так она зовётся на техпереводе; на
промышленном и авиационном секция называется «#ekonomiya», и мобильные
правила туда не доставали. Замер стенда 09.09.2026, экран 375:
· техперевод - сетка в один столбец 349, заголовок 20 точек;
· промышленный - сетка «32px 285px» (первая колонка отведена под
красный знак «плюс» между половинами, он и есть «огромный
плюсик»), заголовок 28 точек в колонке 145.
Теперь правила адресованы классу блока `.tp-para` - он один и тот же
на всех трёх страницах. Ничего нового не добавляется: это те же
правила техперевода, просто доходящие до соседних страниц. */
body.mob .tp-para {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
gap: 12px;
}
/* На компьютере половины выровнены по общей сетке (subgrid по пяти рядам),
а между ними стоит красный знак «плюс». На телефоне колонки идут одна
под другой: сетка не нужна - от неё в свёрнутой карточке оставалась
пустая половина экрана, - а знак «плюс» ложился поверх текста. */
body.mob .tp-para .tp-polovina {
display: block;
grid-row: auto;
}
body.mob .tp-para::before {
display: none;
}
body.mob .tp-polovina {
padding: 14px 16px;
}
body.mob .tp-polovina > h2 {
font-size: 20px;
line-height: 24px;
margin: 0 0 8px;
}
body.mob .tp-devis p {
font-size: 13px;
line-height: 17.55px;
}
body.mob .tp-podblok {
display: block;
margin-bottom: 14px;
}
body.mob .tp-podblok h3 {
font-size: 16px;
line-height: 20px;
font-weight: 650;
margin: 0 0 4px;
}
body.mob .tp-podblok p {
font-size: 13px;
line-height: 17.55px;
margin: 0 0 6px;
}
/* ── М10. Что такое технический перевод: снимок по центру ─────────────
Столбец со снимком был около 240 точек и стоял слева, снимок начинался
от левого края блока. Теперь столбец занимает всю ширину содержимого,
а снимок стоит по центру. */
body.mob #kachestvo .kachestvo-visual {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
float: none;
}
body.mob #kachestvo .kachestvo-visual img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* ── М11. Кнопка «Читать далее» блоков со своей механикой ───────────── */
body.mob .tp-readmore {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 10px 0 14px;
padding: 0;
border: 0;
background: none;
color: var(--cvet-cifr, #8c1821);
font: inherit;
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
body.mob .tp-readmore::after {
content: "";
width: 10px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cpath d='M4 6.16a.53.53 0 0 1-.357-.155L.548 2.746a.6.6 0 0 1 0-.75.53.53 0 0 1 .713 0L4 4.879l2.739-2.883a.53.53 0 0 1 .713 0 .6.6 0 0 1 0 .75L4.356 6.005A.5.5 0 0 1 4 6.16Z' fill='%238c1821'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s;
}
body.mob .tp-readmore[aria-expanded="true"]::after {
transform: rotate(180deg);
}
/* ── М11а. Абзацы текстовых блоков - как на мобильной главной ─────────
На компьютере абзац идёт 15 / 21,75, на телефоне главная уменьшает его до
13 / 17,55 (замер главной 25.08.2026, блок «Нам не всё равно, какой
перевод Вы получите»). Здесь то же самое: правило берётся у компонента
главной, а не назначается заново. */
body.mob .blk.tp-tekst > p,
body.mob #kachestvo .kachestvo-obrez p,
body.mob .blok-illyustraciya > p {
font-size: 13px;
line-height: 17.55px;
}
/* ── М11б. Поля форм - 16 px, как на главной ──────────────────────────
Кегль меньше 16 заставляет iPhone приближать страницу, когда человек
ставит курсор в поле, и человек проваливается в форму. На главной поля
поэтому 16 / 21,6, а мелкой (13 px) там сделана только подсказка внутри
поля - её Павел правил отдельно (bloki/14_zayavka.css, раздел З2).
Здесь поля шли 14 px - приводим к главной, подсказку не трогаем. */
body.mob .zayavka-blok .zpole input,
body.mob .zayavka-blok .zpole textarea {
font-size: 16px;
line-height: 21.6px;
}
/* ── М11в. Заголовки, у которых свой кегль на компьютере ──────────────
«Виды технического перевода - письменный и устный» набран 28 px, как
остальные H2 компьютерной версии, и это правило протекало на телефон.
Заголовок примеров перевода (H3) шёл 21 px. На телефоне оба берут кегль
мобильной главной: H2 - 20 / 24, подзаголовок внутри раздела - 16 / 20. */
body.mob #kachestvo .tp-vidy-zagolovok {
font-size: 20px;
line-height: 24px;
margin: 20px 0 10px;
}
body.mob .tp-primery-shapka h3 {
font-size: 16px;
line-height: 20px;
}
/* ── М12. Полноэкранный просмотр примеров перевода ────────────────────
Снимок вписан в экран целиком, разводом двух пальцев увеличивается,
пальцем двигается. Страница под окном не прокручивается: у окна
touch-action: none, а прокрутка тела выключается сценарием. */
.tp-polnyj {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
background: rgba(12, 13, 15, .95);
touch-action: none;
overscroll-behavior: contain;
}
.tp-polnyj-snimok {
max-width: 100%;
max-height: 100%;
transform-origin: center center;
will-change: transform;
user-select: none;
-webkit-user-drag: none;
}
.tp-polnyj-zakryt {
position: absolute;
top: 14px;
right: 14px;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .92);
color: #1b1b1b;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
/* ───────────────────────────────────────────────────────────────────────
Карточка «картинка слева, текст справа» (.tp-karta-tekst).
Устройство - карточка блока «Какие технические документы мы переводим»,
только одна на весь раздел: слева коллаж, справа вводный текст и список.
Так собран раздел «Какие инструкции мы переводим»: на действующем сайте
коллаж стоял слева от текста, а при переносе он растягивался во всю
ширину страницы (замер 26.08.2026: 1132x1398).
Откат: удалить этот раздел - карточка станет обычным потоком.
─────────────────────────────────────────────────────────────────────── */
/* Признак data-b в селекторе обязателен: у карточки .card3 общий стиль
задаёт display: flex, и правило без признака слабее (замер 26.08.2026). */
body .tp-karta-tekst[data-b] {
display: grid;
grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
body .tp-karta-tekst[data-b] > img {
width: 100%;
height: auto;
}
/* На телефоне колонки складываются: сначала коллаж, под ним текст. */
@media (max-width: 760px) {
body .tp-karta-tekst[data-b] {
grid-template-columns: 100%;
gap: 16px;
}
}
/* ───────────────────────────────────────────────────────────────────────
Подписи колонок над парами шагов (.kp-kolonki).
На действующем сайте у блока «Как заказать перевод инструкции» две
колонки подписаны: слева «От вас потребуется», справа «Что мы сделаем».
Пары шагов собраны общим компонентом главной, у которого своих подписей
нет, поэтому подписи выводятся отдельной строкой и делят ту же сетку
44/56, что и сами пары.
Откат: удалить этот раздел - подписи встанут друг под другом.
─────────────────────────────────────────────────────────────────────── */
body .kp-kolonki[data-b] {
display: grid;
grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
column-gap: 30px;
padding: 0 12px;
margin: 0 0 10px;
}
/* Подпись стоит по центру своей колонки, кегль и начертание - как у
заголовка шага (канон, раздел 0.2.1). */
body .kp-kolonki[data-b] .kp-kolonka[data-b] {
margin: 0;
text-align: center;
font-size: 16px;
font-weight: 650;
line-height: 1.25;
}
/* Правая подпись фирменным красным - как на действующем сайте. */
body .kp-kolonki[data-b] .kp-kolonka[data-b]:last-child {
color: #8c1821;
}
/* Текст правой колонки пар - бордовый цвет общего компонента. Общее
правило страницы услуги («body .tp-tekst p») красит все абзацы серым и
перебивало его: у компонента вес (0,1,0), у страничного правила (0,2,1).
Канон, раздел 0.2.1: страничные правила текстового блока не перебивают
цвет компонента. */
body .tp-tekst .kakpoluchit[data-b] .kp-opisanie[data-b] p[data-b],
body .tp-tekst .kakpoluchit[data-b] .kp-opisanie[data-b] {
color: var(--cvet-bordo, #911a22);
}
/* На телефоне пары идут в столбик, и подписи колонок теряют смысл: они
остаются только для читалок. */
@media (max-width: 760px) {
body .kp-kolonki[data-b] {
display: none;
}
}
/* ───────────────────────────────────────────────────────────────────────
Кнопки первого экрана на телефоне: подпись не переносится.
Замер 26.08.2026 на 375: «Калькулятор стоимости» и «Отправить файл на
расчет» вставали в две строки и вырастали до 240x75 при канонических
51,2. Правило то же, что у кнопки тестового перевода: кнопка растёт в
ширину до края рабочей области, а высота остаётся канонической.
Откат: удалить этот раздел - подпись снова начнёт переноситься.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Кнопки первого экрана лежат рядом с .hero, а не внутри него - поэтому
селектор идёт от самого ряда кнопок. Ряд между плашками
(.tp-test-zayavka) уже описан выше своим правилом. */
body.mob .acts[data-h]:not(.tp-test-zayavka) .act[data-h] {
width: auto;
min-width: 240px;
max-width: 100%;
height: 51.2px;
min-height: 51.2px;
padding: 0 22px;
white-space: nowrap;
}
}
/* ───────────────────────────────────────────────────────────────────────
Карточки со значком на телефоне: один столбец.
На главной такие карточки стоят по две в ряд, и заголовки там короткие.
На странице услуги заголовок бывает длиннее ширины колонки - например
«Квалифицированные переводчики»: слово не переносится (правило главной
запрещает разрывать слова), выходит за край карточки и растягивает
документ. Замер 26.08.2026 на 375: карточка 170, заголовок 172, документ
377 при окне 375.
Один столбец решает это без разрыва слов: карточка становится 349, и
любое слово помещается целиком.
Откат: удалить этот раздел - вернутся две колонки и переполнение.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Вариант выбирается модификатором разметки, а не адресом или типом
страницы (канон, раздел 14). !important обязателен: в guide.css правило
`body.mob .cards3 { grid-template-columns: repeat(2, ...) !important }`
перебивает любую обычную запись. Тем же приёмом пользуется файл
09_preimushchestva_biznesu.css для ширины до 359. */
body.mob .cards3[data-b].korp.v-odin-stolbec,
/* Тот же одностолбцовый вариант для карточек отраслей (kart3) на
нефтегазовой и нефтесервисной страницах: в двух колонках слово
«Конфиденциальность» кеглем компонента (16) шире половины экрана, а
рвать слово переносом и сокращать текст канон запрещает - прецедент
компонента korp, раздел 0.2.1. Главная не задета: у её сеток kart3
модификатора нет. */
body.mob .cards3[data-b].kart3.v-odin-stolbec {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
Редакционный текстовый блок: телефон показывает три строки
═══════════════════════════════════════════════════════════════════════
Канон, раздел 0.2.1. Один компонент на все редакционные разделы страницы
услуги: заголовок и иллюстрация видны целиком, текстовая часть на
телефоне обрезана до трёх строк, под ней кнопка «Читать далее».
Обрезка задана стилями, а не сценарием: разметка приезжает с обёрткой
«rt-tekst», поэтому три строки видны с первой отрисовки и текст не
мигает (задание Павла 26.08.2026). Сценарий только переключает класс,
меняет надпись кнопки, ставит aria-expanded и возвращает окно к
заголовку при сворачивании.
Компонент не применяется к формам, отзывам, анкетам, ценам, вопросам и
ответам, карточкам и блокам, у которых уже есть своё раскрытие: вложенных
раскрытий быть не должно.
ОДНА ВЫСОТА НА ВСЕ БЛОКИ (правило Павла 28.08.2026).
Закрытый блок показывает фиксированное число строк, дальше идёт
кнопка. Число строк - ступенями по ширине окна:
от 1440 - 15 строк;
1280-1439 - 12 строк;
901-1279 - 10 строк;
до 900 - 3 строки (телефон и планшет).
Правило общее и для блока с картинкой, и для блока без картинки:
разная у них только ширина текстовой колонки. Текст короче нормы -
показывается целиком, кнопки нет.
Вариантов «rt-vsegda», «rt-po-kartinke», «il-po-tekstu» и «il-centr»
больше НЕТ: они решали ту же задачу по-разному и давали четыре разных
вида одного компонента. Их поглотило это правило.
Откат: удалить раздел и снять класс «rt-blok» с разделов в
home/uslugi_konfig.py.
═══════════════════════════════════════════════════════════════════════ */
body .rt-knopka {
/* Вид кнопки задан один раз здесь; показывается она везде, где текст
длиннее нормы строк, и прячется атрибутом hidden, когда обрезать
нечего. Вариантов блока, от которых это зависело бы, больше нет.
Тот же вид, что у «Читать полностью» в блоке о качестве: фирменный
цвет, полужирная, с уголком, который переворачивается при раскрытии.
Своих цветов и своих эффектов у страницы быть не должно (канон,
раздел 3). */
display: none;
align-items: center;
gap: 6px;
margin: 8px 0 0;
padding: 0;
border: 0;
background: none;
color: var(--cvet-cifr, #8c1821);
font: inherit;
font-size: 13px;
line-height: 17.55px;
font-weight: 700;
text-decoration: none;
text-align: left;
cursor: pointer;
}
body .rt-knopka::after {
content: "";
width: 10px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cpath d='M4 6.16a.53.53 0 0 1-.357-.155L.548 2.746a.6.6 0 0 1 0-.75.53.53 0 0 1 .713 0L4 4.879l2.739-2.883a.53.53 0 0 1 .713 0 .6.6 0 0 1 0 .75L4.356 6.005A.5.5 0 0 1 4 6.16Z' fill='%238c1821'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s;
}
body .rt-blok.rt-otkryt .rt-knopka::after {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
body .rt-knopka::after {
transition: none;
}
}
/* Кнопку, спрятанную сценарием, не должен показывать ни один вариант.
Правило браузера [hidden]{display:none} слабее правил вариантов выше, и
без этой строки «Читать далее» висело бы под текстом, который и так
виден целиком. На телефоне то же делает body.mob [hidden]; здесь -
на любой ширине и только для этой кнопки. */
body .rt-knopka[hidden] {
display: none !important;
}
/* ── Единая высота закрытого блока: ступени по ширине ───────────────────
Обрезка задана СТИЛЯМИ и по строкам, а не по высоте коробки: половины
строки внизу не остаётся, и закрытый вид верен с первой отрисовки - до
запуска сценариев (канон, раздел 9, пункт 12). Сценарий только прячет
кнопку там, где обрезать нечего, и подгоняет поле картинки.
Ступени: 15 строк от 1440, 12 от 1280, 10 от 901, 3 до 900. */
body .rt-blok .rt-tekst {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* Точную высоту ставит сценарий: line-clamp с вложенными абзацами,
списками и подзаголовками считает строки не так, как человек (замер
28.08.2026: при clamp 15 было видно 24 строки). Пока сценарий не
посчитал, работает line-clamp - закрытый вид верен с первой отрисовки. */
body .rt-blok.rt-schitano .rt-tekst {
display: block;
-webkit-line-clamp: none;
overflow: hidden;
max-height: var(--rt-vysota, none);
}
body .rt-blok.rt-otkryt .rt-tekst {
display: block;
-webkit-line-clamp: none;
overflow: visible;
max-height: none;
}
body .rt-blok .rt-knopka {
display: inline-flex;
}
@media (min-width: 901px) {
body .rt-blok .rt-tekst {
-webkit-line-clamp: 10;
/* min-height здесь НЕ ставить: высоту блока держит сама картинка -
сценарий вписывает её в поле нужной высоты, и грид-строки дорастают
до неё. min-height на тексте перебивал max-height обрезки и
показывал лишние строки (пойман замером 28.08.2026: 22 строки
вместо 15). */
}
}
@media (min-width: 1280px) {
body .rt-blok .rt-tekst {
-webkit-line-clamp: 12;
}
}
@media (min-width: 1440px) {
body .rt-blok .rt-tekst {
-webkit-line-clamp: 15;
}
}
@media (max-width: 640px) {
/* Три строки задаёт общее правило выше; здесь - только мобильное
своё: картинка и типографика. */
/* Иллюстрация показывается только в раскрытом виде - как в блоке
«Особенности перевода инструкций» (решение Павла 26.08.2026).
Свёрнутый редакционный блок на телефоне выглядит одинаково у всех
разделов: заголовок, три строки текста, кнопка. */
body .rt-blok > img {
display: none;
}
body .rt-blok.rt-otkryt > img {
display: block;
}
/* Вид кнопки задан наверху один раз - здесь только показываем её. */
body .rt-blok .rt-knopka {
display: inline-flex;
}
/* Единая типографика редакционного текста: те же значения, что у
принятого мобильного текста блока «Нам не всё равно, какой перевод Вы
получите». Списки и strong не выбиваются - ни кеглем, ни начертанием,
ни межстрочным интервалом (канон, раздел 6). */
body .rt-blok .rt-tekst p,
body .rt-blok .rt-tekst li,
body .rt-blok .rt-tekst strong,
body .rt-blok .rt-tekst b {
font-size: 13px;
line-height: 17.55px;
font-weight: 400;
color: #3d4247;
}
body .rt-blok .rt-tekst p,
body .rt-blok .rt-tekst ul,
body .rt-blok .rt-tekst ol {
margin: 0 0 6px;
}
body .rt-blok .rt-tekst li {
margin-bottom: 6px;
}
}
/* ── 3а. Смежные услуги «С этой услугой заказывают» ──────────────── */
/* Блок появился на страницах 28.08.2026, когда Павел велел заполнить
справочник связей. Вид - карточки, выбор Павла того же дня из двух
показанных вариантов (второй был рядом ссылок).
Свой вид карточки задаётся здесь, а ОТКЛИК НА НАВЕДЕНИЕ - общим
правилом в bloki/00_obshchee.css, раздел 4.3: селектор `.smz li`
добавлен в тамошние списки, своих правил наведения у страницы нет
(канон, раздел 5г).
Отступы блока не задаются вовсе: секция несёт класс `blk`, и ритм
70/42 приходит от общего правила - замер совпал с блоком карточек
«Наши возможности» до знака. */
body .smz {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
/* Карточки стоят ровно посередине - без отступа под маркеры списка.
Правка Павла 08.09.2026, замечание 24: «кнопки в блоке "С этой услугой
заказывают" размещены не по центру: с левой стороны расстояние до края
больше, чем справа». Замер на телефоне 375 подтвердил: слева 35 точек,
справа 13.
Откуда бралось. Секция несёт класс `tp-tekst`, а редакционные списки
там отодвинуты под маркеры правилом `body .tp-tekst ul` (22 точки
слева, раздел выше). Оно перебивало `padding: 0` этого блока по
специфичности: класс плюс два элемента против класса плюс один.
Маркеров у карточек нет - `list-style: none`, - а отступ под них
оставался.
Откат: удалить правило - карточки снова сместятся вправо на 22 точки. */
body .tp-tekst ul.smz {
padding-left: 0;
margin: 0;
}
body .smz li {
background: #fff;
border-radius: var(--radius-karta, 16px);
box-shadow: var(--tenj-bloka, 0 4px 18px rgba(0, 0, 0, .08));
}
body .smz a {
display: block;
padding: 28px 24px;
text-align: center;
color: var(--krasnyj, #8c1821);
text-decoration: none;
font-weight: 650;
font-size: 18px;
}
@media (max-width: 900px) {
body .smz {
grid-template-columns: 1fr;
gap: 12px;
}
body .smz a {
padding: 18px 16px;
font-size: 16px;
}
}
/* ══════════════════════════════════════════════════════════════════════
18. Страница «Апостиль» - четыре своих компонента.
Задание Павла 03.09.2026; раскладки сняты с действующей страницы,
осмотр записан в ОСМОТР_ДО_СБОРКИ_2026-09-03.md папки задания.
══════════════════════════════════════════════════════════════════════ */
/* 18.1. «Мы поможем»: три белые ячейки, слева картинка, справа номер в
красном квадрате, заголовок и содержимое. Отклика на наведение НЕТ -
сознательное исключение из канона 5г по прямому указанию Павла:
«никакого затемнения, никакого покраснения, плашки статичные».
Не «чинить» обратно. */
body .tp-pomozhem {
display: grid;
gap: 40px;
}
body .tp-pomozhem .pm-yachejka {
display: grid;
grid-template-columns: 335px minmax(0, 1fr);
gap: 24px;
padding: 24px;
background: #fff;
border-radius: var(--radius-karta, 16px);
box-shadow: var(--tenj-bloka, 0 4px 18px rgba(0, 0, 0, .08));
align-items: start;
}
/* Подложка картинки - светло-розовая со скруглением, как на действующей
странице. Картинка вписывается целиком, не обрезается. */
body .tp-pomozhem .pm-kartinka {
background: #f8eeee;
border-radius: 12px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
}
body .tp-pomozhem .pm-kartinka img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
body .tp-pomozhem .pm-shapka {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 14px;
}
body .tp-pomozhem .pm-nomer {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--krasnyj, #8c1821);
color: #fff;
border-radius: 8px;
font-size: 20px;
font-weight: 700;
}
body .tp-pomozhem .pm-zagolovok {
margin: 0;
font-size: 21px;
line-height: 1.3;
font-weight: 700;
color: #1e1f22;
}
body .tp-pomozhem .pm-soderzhimoe > p {
margin: 0 0 12px;
}
/* Серые плашки: перечень с галочками и ведомства. */
body .tp-pomozhem .pm-plashka {
background: #f5f6f8;
border-radius: 12px;
padding: 16px 20px;
margin: 0 0 12px;
}
body .tp-pomozhem .pm-vedomstvo {
margin: 0 0 6px;
color: var(--krasnyj, #8c1821);
font-weight: 700;
}
body .tp-pomozhem .pm-plashka p:last-child {
margin-bottom: 0;
}
body .tp-pomozhem .pm-perechen ul,
body .tp-pomozhem .pm-perechen ol {
list-style: none;
margin: 0;
padding: 0;
}
body .tp-pomozhem .pm-perechen li {
position: relative;
padding-left: 26px;
margin: 0 0 10px;
}
body .tp-pomozhem .pm-perechen li:last-child {
margin-bottom: 0;
}
body .tp-pomozhem .pm-perechen li::before {
content: "\2714";
position: absolute;
left: 0;
top: 0;
color: var(--krasnyj, #8c1821);
font-weight: 700;
}
@media (max-width: 900px) {
body .tp-pomozhem .pm-yachejka {
grid-template-columns: 1fr;
}
body .tp-pomozhem .pm-kartinka {
align-self: auto;
}
}
/* 18.2. «Акции на Апостиль»: карточки акций главной, но три в ряд.
Сама карточка (card3 fold) приходит из общих правил; здесь только
сетка - на главной её даёт cards4 из файла главной, который на
страницах услуг не подключён. Карточки чуть ниже, чем на главной, -
требование Павла: заголовки встают на один уровень. */
body .tp-akcii {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
body .tp-akcii .card3 .cardimg {
width: 100px;
height: auto;
margin: 0 auto;
}
@media (max-width: 900px) {
body .tp-akcii {
grid-template-columns: 1fr;
}
}
/* 18.3. «Страны»: три переключателя и панели групп.
Решение Павла: при наведении подсвечивается ТОЛЬКО заголовок
переключателя, всё остальное на прозрачном фоне, без заливки. */
body .tp-strany .str-ryad {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin: 0 0 28px;
}
body .tp-strany .str-tab {
background: none;
border: 0;
padding: 12px 8px;
cursor: pointer;
text-align: center;
font: inherit;
border-bottom: 3px solid transparent;
}
body .tp-strany .str-tab .str-nazvanie {
display: block;
font-size: 19px;
line-height: 1.3;
font-weight: 700;
color: #1e1f22;
}
body .tp-strany .str-tab .str-podzagolovok {
display: block;
margin-top: 8px;
font-size: 14px;
line-height: 1.4;
color: #5b6167;
}
body .tp-strany .str-tab:hover .str-nazvanie,
body .tp-strany .str-tab:focus-visible .str-nazvanie {
color: var(--krasnyj, #8c1821);
}
body .tp-strany .str-tab.on {
border-bottom-color: var(--krasnyj, #8c1821);
}
body .tp-strany .str-tab.on .str-nazvanie {
color: var(--krasnyj, #8c1821);
}
body .tp-strany .str-panel > p {
margin: 0 0 12px;
}
body .tp-strany .str-panel > h3 {
margin: 18px 0 10px;
font-size: 18px;
font-weight: 700;
}
/* Кнопка раскрытия списка - наша обычная текстовая, как у
редакционного блока («Читать далее»). */
body .tp-strany .str-razvernut {
background: none;
border: 0;
padding: 0;
cursor: pointer;
font: inherit;
font-weight: 650;
color: var(--krasnyj, #8c1821);
}
body .tp-strany .str-razvernut::after {
content: " \25be";
}
body .tp-strany .str-razvernut[aria-expanded="true"]::after {
content: " \25b4";
}
body .tp-strany .str-spisok {
margin-top: 14px;
}
body .tp-strany .str-perechen {
list-style: none;
margin: 0 0 12px;
padding: 0;
columns: 4;
column-gap: 28px;
}
body .tp-strany .str-perechen li {
margin: 0 0 6px;
break-inside: avoid;
}
/* Список стран: страны идут одним перечнем в четыре столбца, сверху
вниз и слева направо, без разрывов между соседями (разбор Павла
03.09.2026: «никаких разделений по группам, все по алфавиту»).
Названия континентов остаются только в третьей группе, консульской
легализации: там деление осмысленно. Континент - жирным во всю
ширину, перечень под ним снова разбивается на столбцы. */
body .tp-strany .str-spisok {
columns: 4;
column-gap: 28px;
}
body .tp-strany .str-spisok .str-region {
font-weight: 700;
column-span: all;
margin: 14px 0 8px;
break-inside: avoid;
}
body .tp-strany .str-spisok .str-region:first-child {
margin-top: 0;
}
body .tp-strany .str-spisok .str-perechen {
columns: initial;
margin: 0;
}
body .tp-strany .str-spisok .str-perechen li {
break-inside: avoid;
margin: 0 0 6px;
}
@media (max-width: 900px) {
body .tp-strany .str-ryad {
grid-template-columns: 1fr;
gap: 6px;
}
body .tp-strany .str-perechen {
columns: 2;
}
}
/* 18.4. Полоса «Апостиль в МинЮст, ЗАГС, МВД, МФЦ» - форма смежных
услуг: белые плашки, по центру, под каждой кнопка. */
body .tp-polosa {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
body .tp-polosa .pl-punkt {
background: #fff;
border-radius: var(--radius-karta, 16px);
box-shadow: var(--tenj-bloka, 0 4px 18px rgba(0, 0, 0, .08));
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
body .tp-polosa .pl-kartinka img {
width: 180px;
height: auto;
}
body .tp-polosa h3 {
margin: 14px 0 8px;
font-size: 18px;
line-height: 1.35;
font-weight: 700;
}
body .tp-polosa p {
margin: 0 0 16px;
color: #3d4247;
}
body .tp-polosa .tp-knopka {
margin-top: auto;
}
@media (max-width: 900px) {
body .tp-polosa {
grid-template-columns: 1fr;
}
}
/* 18.5. «Типы документов для апостиля»: карточка как на действующей
странице - маленькая иконка (100) сверху по центру, название по
центру, перечень по левому краю. Разбор Павла 03.09.2026: большие
картинки компонента документов здесь не годятся - у исходника это
иконки 256, растянутые на колонку. */
body .tp-gruppy-po-centru .tp-gruppa > h3,
body .tp-gruppy-po-centru .tp-gruppa > p:first-child {
text-align: center;
}
body .tp-gruppy-po-centru .tp-karta {
display: flex;
flex-direction: column;
}
body .tp-gruppy-po-centru .tp-karta > img {
order: -1;
width: 100px;
height: auto;
align-self: center;
margin: 0 0 12px;
}
/* 18.7. Акции: название блока и текст карточек по центру
(разбор Павла 03.09.2026). */
body .tp-akcii-blok > h2 {
text-align: center;
}
body .tp-akcii .card3 {
text-align: center;
}
body .tp-akcii .card3 .foldh {
justify-content: center;
text-align: center;
}
/* 18.8. «Мы поможем»: левая часть - один блок на белом фоне, без
розовой подложки и рамок (разбор Павла 03.09.2026: «убери все эти
лишние рамки, просто на белом фоне»). */
body .tp-pomozhem .pm-kartinka {
background: none;
border-radius: 0;
padding: 0;
}
body .tp-pomozhem .pm-kartinka img {
border-radius: 0;
}
/* 18.9. «Список стран» и кнопка раскрытия - по центру, стилем H3
(разбор Павла 03.09.2026). */
body .tp-strany .str-panel > h3 {
text-align: center;
}
body .tp-strany .str-razvernut {
display: block;
margin: 0 auto;
font-size: 18px;
font-weight: 700;
}
/* 18.6. Тело карточки органа: описание, срок и цена одной колонкой
справа - карточка органа собирается гибким сборщиком групп
(kartochki_grupp), и все абзацы после названия лежат в tp-etap-telo. */
body .tp-etap .tp-etap-telo {
display: flex;
flex-direction: column;
gap: 10px;
}
body .tp-etap .tp-etap-telo p {
margin: 0;
}
/* ══════════════════════════════════════════════════════════════════════
19. Разбор Павла со стенда 03.09.2026 - вторая волна правок
страницы «Апостиль».
══════════════════════════════════════════════════════════════════════ */
/* 19.1. Апостилирующие органы: текст справа сплошной, с обычным
межстрочным - без большого отступа между абзацами. Блок от этого
ниже, а содержимое стоит по центру по высоте: сверху и снизу
одинаково (требование Павла). */
body .tp-etap .tp-etap-telo {
gap: 0;
align-self: center;
}
body .tp-etap .tp-etap-telo p {
margin: 0;
}
/* Название органа тоже по центру по высоте - иначе оно прижато к верху,
а текст справа стоит по центру. */
body .tp-etap .tp-etap-nazvanie {
align-self: center;
}
/* 19.2. Картинки органов и шагов инструкции - размера иконок типов
документов (100), чтобы по всей странице снимки были одинаковые и
небольшие (требование Павла: «такого же размера, как в блоке типов
документов, во всех блоках»). Колонка снимка сужается следом. */
body #organy .tp-etap,
body #instrukciya .tp-etap {
grid-template-columns: 100px 262px minmax(0, 1fr);
align-items: center;
}
body #organy .tp-etap > img,
body #instrukciya .tp-etap > img {
width: 100px;
height: auto;
}
/* 19.3. Типы документов: три столбца вместо двух. */
body #tipy-dokumentov .tp-dokumenty {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 19.4. Заливка при наведении закрывает БЕЛУЮ КАРТОЧКУ ЦЕЛИКОМ.
Было: заливка - только блок текста внутри карточки, поэтому справа и
снизу оставались белые поля, и у каждой группы по-своему - в
зависимости от длины перечня (замер 03.09.2026: карточка 578x321,
заливка 554x199, справа 24 точки, сверху 122). Павел: «заливка
должна полностью заливать белое поле».
Теперь красится сама карточка, а внутренняя заливка фон не несёт -
иначе получился бы прямоугольник в прямоугольнике. */
@media (hover: hover) and (pointer: fine) {
body #tipy-dokumentov .tp-karta:hover {
background-image: var(--knopka-fon);
}
body #tipy-dokumentov .tp-karta:hover .tp-zalivka {
background-image: none;
}
body #tipy-dokumentov .tp-karta:hover,
body #tipy-dokumentov .tp-karta:hover * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
body #tipy-dokumentov .tp-karta:hover li::marker {
color: #fff;
}
}
/* 19.5. Способы получения: красная заливка на всю ширину белой плашки.
У пары были боковые поля 12 точек, из-за них слева и справа
оставались белые полосы (замер 03.09.2026). Поля переносятся внутрь
колонок, ширина заливки становится полной. */
body .kakpoluchit.pary .kp-para {
padding-left: 0;
padding-right: 0;
}
body .kakpoluchit.pary .kp-para > * {
padding-left: 12px;
padding-right: 12px;
}
/* 19.6. Акции: название карточки по центру - текст уже по центру,
заголовок оставался слева (разбор Павла 03.09.2026). */
body .tp-akcii .card3 .foldh[data-b],
body .tp-akcii .card3 .foldh {
justify-content: center;
text-align: center;
}
body .tp-akcii .card3 .foldwrap {
justify-content: center;
}
/* 19.7. Полоса услуг: кнопки трёх плашек на одном уровне - текстовая
часть растягивается, кнопка прижата к низу. */
body .tp-polosa .pl-punkt {
justify-content: space-between;
}
body .tp-polosa .pl-punkt h3 {
flex: 0 0 auto;
}
/* 19.8. Таблицы внутри редакционного текста - с видимыми границами.
На действующем сайте таблица «Свидетельство / Справка» страницы
«Апостиль на документы ЗАГС» разлинована серой рамкой 1 точка. У нас
границы были невидимыми, и читать было нельзя: не видно, что столбца
три - первый без заголовка (Назначение, Содержание, Статус и
применение, Копии и дубликаты), второй «Свидетельство», третий
«Справка». Замечание Павла 04.09.2026.
Откат: удалить правила .rt-tekst table - таблица снова станет без
рамок. */
body .rt-tekst table,
body .tp-tekst .rt-tekst table {
width: 100%;
border-collapse: collapse;
margin: 0 0 14px;
}
body .rt-tekst table th,
body .rt-tekst table td {
border: 1px solid #c9c9c9;
padding: 10px 14px;
vertical-align: top;
text-align: left;
}
/* Шапкой считается строка внутри `thead`, а если его нет - первая
строка таблицы.
Пункт 18 мобильного задания 09.09.2026: «полужирным ошибочно выделен
текст, который не является шапкой. Настоящая шапка - строка "Основные
аспекты" и "Описание". Убрать ошибочное полужирное выделение у текста
про адаптацию и учёт культурных и языковых особенностей».
Причина: прежний селектор `tr:first-child` попадал и в первую строку
`tbody` - она первая у своего родителя. На «Переводе брошюр» таблица
размечена с `thead`, поэтому жирными выходили ДВЕ строки: настоящая
шапка и «Адаптация | Учёт культурных и языковых особенностей» (замер
стенда 09.09.2026: вес 700 и заливка #f5f6f8 у обеих).
Теперь строка `tbody` попадает под правило только у таблиц без
`thead` - там первая строка и есть шапка, как было раньше. */
body .rt-tekst table thead tr th,
body .rt-tekst table thead tr td,
body .rt-tekst table > tr:first-child th,
body .rt-tekst table > tr:first-child td,
body .rt-tekst table > tbody:first-child > tr:first-child th,
body .rt-tekst table > tbody:first-child > tr:first-child td {
font-weight: 700;
background: #f5f6f8;
}
/* 19.9. Названия карточек со значком - по центру.
Требование Павла 04.09.2026 по страницам легализации: «налаженный
процесс, легализация под ключ, подробно проконсультируем - разместить
ровно по центру выделенного для них блока». */
body .tp-znachki-po-centru .card3 .foldh,
body .tp-znachki-po-centru .card3 .foldwrap,
body .tp-znachki-po-centru .tp-karta .tp-zalivka,
body .tp-znachki-po-centru .tp-etap .tp-zalivka {
text-align: center;
justify-content: center;
}
/* 19.10. Шаги процедуры фотографиями - блок «Процедура легализации в
ТПП». На действующем сайте это три снимка в ряд, поверх каждого белым
шрифтом номер и название шага; Павел 04.09.2026 велел повторить один
в один, а большую картинку с девушкой убрать.
Под подписью тёмная вуаль: белые буквы поверх голой фотографии
теряются на светлых участках.
Откат: удалить раздел - карточки станут обычными картинками с
текстом под ними. */
body .tp-shagi-foto {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
body .tp-shagi-foto[data-n="4"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body .tp-shagi-foto .sf-shag {
position: relative;
border-radius: 16px;
overflow: hidden;
min-height: 240px;
}
body .tp-shagi-foto .sf-shag img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body .tp-shagi-foto .sf-podpis {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
padding: 20px 22px;
background: linear-gradient(180deg,
rgba(30, 31, 34, 0) 38%, rgba(30, 31, 34, .66) 100%);
}
body .tp-shagi-foto .sf-nomer {
font-size: 28px;
font-weight: 700;
line-height: 1;
color: #fff;
}
body .tp-shagi-foto .sf-nazvanie {
margin: 0;
font-size: 17px;
line-height: 1.35;
font-weight: 650;
color: #fff;
}
@media (max-width: 900px) {
body .tp-shagi-foto,
body .tp-shagi-foto[data-n="4"] {
grid-template-columns: 1fr;
}
}
/* 19.11. Единственная группа документов - плашка во всю ширину.
У блока «Какие документы подлежат легализации в ТПП» группа одна, и
половина ряда пустовала бы (решение Павла 04.09.2026). */
body #kakie-dokumenty .tp-dokumenty[data-n="1"] {
grid-template-columns: minmax(0, 1fr);
}
/* 19.12. Ячейки пополам - блок «Важно знать о получении и Апостиле
справки о несудимости» (приёмка Павла 04.09.2026, СП-3). Два блока,
каждый пополам: слева небольшая картинка по высоте текста, справа
белая плашка с текстом. Наведение красит правую часть - отклик даёт
общее правило «.tp-karta:hover .tp-zalivka», здесь только раскладка.
Откат: удалить раздел - ячейки лягут столбиком без деления пополам. */
body .tp-poloviny {
display: grid;
gap: 24px;
}
body .tp-poloviny .pv-yach {
display: flex;
align-items: stretch;
gap: 28px;
}
/* Картинка «ровно по высоте текста» (слова Павла): слот фиксированной
ширины растянут на высоту ряда, которую задаёт ПЛАШКА С ТЕКСТОМ, а
картинка вписана в слот целиком - у короткой строки выходит совсем
небольшой, высоту ряда она не тянет. */
body .tp-poloviny .pv-slot {
flex: none;
width: 84px;
position: relative;
}
body .tp-poloviny .pv-kartinka {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
body .tp-poloviny .card3.tp-zalivka {
flex: 1;
margin: 0;
}
body .tp-poloviny .pv-telo > p:first-child {
margin-top: 0;
}
body .tp-poloviny .pv-telo > :last-child {
margin-bottom: 0;
}
@media (max-width: 700px) {
body .tp-poloviny .pv-yach {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
/* столбиком слот сам по себе высоты не имеет - картинке возвращается
обычное течение */
body .tp-poloviny .pv-slot {
width: auto;
}
body .tp-poloviny .pv-kartinka {
position: static;
width: 84px;
height: auto;
}
}
/* 19.13. Второй заход приёмки Павла 04.09.2026.
В-6. ТПП, «Какие документы подлежат легализации в ТПП»: картинка
сжимается до высоты текста - раньше она задавала высоту плашки, и
под текстом оставалось пустое поле. Плашка на странице одна и
вытянута во всю ширину, картинка выравнивается по центру своей
половины и не выше заливки с перечнем.
Откат: удалить правило - картинка снова растянет плашку. */
body #kakie-dokumenty .tp-dokumenty[data-n="1"] .tp-karta img {
/* Высоту строки задаёт ТОЛЬКО заливка с перечнем: с height: 0
картинка в расчёте высоты не участвует, а min-height: 100%
растягивает её бокс на готовую строку, object-fit вписывает
снимок целиком. Фикс-высота не годится: до загрузки lazy-картинки
она раздувала карточку, после - обрезала бы по-разному. */
height: 0;
min-height: 100%;
object-fit: contain;
}
/* В-7. Справка о несудимости, «Важно знать»: два блока стоят В ОДНУ
СТРОКУ - слева про получение в МВД, справа про содержание справки.
Каждый внутри по-прежнему пополам: картинка слева, текст справа.
На телефоне ячейки складываются столбиком.
Откат: удалить правило - ячейки снова лягут друг под другом. */
body .tp-poloviny[data-n="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
@media (max-width: 900px) {
body .tp-poloviny[data-n="2"] {
grid-template-columns: 1fr;
}
}
/* 19.14. Страница «Услуги»: список услуг в два столбца.
Задание Павла 03.09.2026 («в два столбца надо как-то нормально
разбить») и решение 04.09.2026. Слева «Письменный перевод» с
тридцатью пунктами, справа личные документы, апостиль и одиночные
ссылки - столбцы выходят почти равными по числу строк. На телефоне
складываются в одну колонку в том же порядке.
Заголовок раздела - полужирная строка-ссылка с отбивкой; одиночные
ссылки набраны тем же начертанием: на действующей странице это
такие же самостоятельные пункты, как заголовки.
Откат: удалить раздел - список снова ляжет одной колонкой. */
body .tp-uslugi-stolbcy {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 48px;
align-items: start;
}
body .tp-uslugi-stolbcy .us-razdel {
margin: 18px 0 8px;
font-weight: 700;
}
body .tp-uslugi-stolbcy .us-razdel:first-child {
margin-top: 0;
}
/* Названия разделов ПОДЧЁРКНУТЫ - правка Павла 06.09.2026 (проверка
мобильных, касается и телефона, и компьютера): «их тоже нужно
подчеркнуть, тем самым обозначив, что на них тоже можно нажимать, что
это кликабельные разделы». До правки подчёркивание появлялось только
при наведении, и на телефоне, где наведения нет, ссылки не отличались
от простого текста. */
body .tp-uslugi-stolbcy .us-razdel a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
body .tp-uslugi-stolbcy .us-razdel a:hover {
color: var(--accent, #8c1821);
text-decoration: underline;
}
body .tp-uslugi-stolbcy ul {
margin: 0 0 6px;
padding-left: 20px;
}
body .tp-uslugi-stolbcy li {
margin: 0 0 6px;
}
@media (max-width: 900px) {
body .tp-uslugi-stolbcy {
grid-template-columns: 1fr;
}
}
/* 19.15. Хаб «Все языки» (задание Павла 04.09.2026).
Плашки «Преимущества нашей компании»: названия по центру, текст по
левому краю, при наведении подсвечивается ВСЯ карточка - тот же
приём, что у «Типов документов для апостиля» (раздел 18.9). */
body .tp-plashki-par .card3 > h3 {
text-align: center;
}
body .tp-plashki-par .card3 > p {
text-align: left;
margin-bottom: 0;
}
/* Задание 1.1 от 09.09.2026: карточки сворачиваются, как обычные блоки
преимуществ. После свёртки название лежит в кнопке `.foldh` внутри
`h3.foldwrap`, а текст - в теле `.foldb`; прежние селекторы по прямым
потомкам до них не достают. Выключка остаётся прежней, названная
Павлом: «название кнопки при этом стоит посередине, текст - по левому
краю». */
/* Селектор с атрибутами: общий слой карточек задаёт кнопке
`.fold[data-b] .foldh[data-b] { text-align: left; justify-content:
space-between }`, и правило по одним классам ему проигрывало (замер
стенда 09.09.2026 - надпись осталась по левому краю). */
body .tp-plashki-par .card3[data-b] .foldh[data-b],
body .tp-plashki-par .card3 .foldh {
text-align: center;
justify-content: center;
}
body .tp-plashki-par .card3 .foldb,
body .tp-plashki-par .card3 .foldb p {
text-align: left;
margin-bottom: 0;
}
@media (hover: hover) and (pointer: fine) {
/* Заливка - КАНОННАЯ, тем же фирменным градиентом, что у всех
заливок при наведении (--knopka-fon). Прежний var(--accent)
разрешался в серый #2f3336 эталона - замечание Павла 04.09.2026:
«почему заливка серым, если канон - красным». */
body .tp-plashki-par .tp-karta:hover {
background-image: var(--knopka-fon);
}
body .tp-plashki-par .tp-karta:hover h3,
body .tp-plashki-par .tp-karta:hover p {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
}
/* «С какими языками мы работаем» - три столбца: европейские, восточные
и африканские, языки СНГ (самый короткий справа). На телефоне
столбцы складываются в одну колонку в том же порядке. */
body .tp-yazyki-stolbcy {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 48px;
align-items: start;
}
body .tp-yazyki-stolbcy h3 {
margin: 0 0 10px;
}
body .tp-yazyki-stolbcy ul {
margin: 0;
padding-left: 20px;
}
body .tp-yazyki-stolbcy li {
margin: 0 0 6px;
}
@media (max-width: 900px) {
body .tp-yazyki-stolbcy {
grid-template-columns: 1fr;
}
}
/* 19.16. Языковые страницы: картинка первого экрана вместо плашек.
Справа от H1 - картинка с флагами языка, по центру отведённого ей
пространства, размером действующего сайта: 330 точек (замер
/languages/english/ 04.09.2026, картинка 330x330). Не растягивать:
Павел - «не надо их делать огромными». */
body .hero .hright-kartinka {
display: flex;
align-items: center;
justify-content: center;
}
body .hero .hright-kartinka img {
width: 330px;
max-width: 100%;
height: auto;
}
@media (max-width: 900px) {
body .hero .hright-kartinka img {
width: 240px;
}
}
/* ── М5в. Группы документов - как блок акций главной ──────────────────
Правка Павла 06.09.2026 (проверка мобильных), блок «Какие юридические
документы мы переводим» и его родня на других страницах услуг:
в закрытой карточке виден ТОЛЬКО заголовок группы, по центру;
нажатие раскрывает карточку НА ВСЮ ШИРИНУ сетки, сдвигая соседние
карточки вниз, - ровно как раскрывается блок акций «Скидка 10 % на
первый заказ» на главной (body.mob .card3.open { grid-column: 1/-1 }
в эталоне glavnaya-b.css). Название остаётся по центру, ниже на всю
ширину идёт список.
Красной заливки у раскрытой группы НЕТ - у акций главной её тоже нет;
заливка остаётся у этапов (tp-otkryt, раздел М2) и у карточек без
заголовков групп на техпереводе.
Класс tp-karta-gruppa и класс раскрытия tp-gruppa-otkryta ставит
home/static/js/site/tehperevod_mobile.js (svyazat_gruppu); кластер
технического перевода этим не затронут - там прежняя обрезка
(гейт по адресу в dokumenty()).
Откат: удалить раздел и ветку svyazat_gruppu в сценарии - группы
вернутся к обрезке в две строки. */
/* Кегль - ПО ГЛАВНОЙ СТРАНИЦЕ: 16 / 20 / 650, по центру, цвет #1B1B1B.
Это названия услуг в блоке «Услуги нашего Бюро переводов с
нотариальным заверением» - «Паспорта и удостоверения», «Водительские
права» и соседние (замер главной 07.09.2026: кнопка .foldh 16px / 20 /
650 / center / rgb(27,27,27)).
ПОЧЕМУ ИМЕННО ОТТУДА. Указание Павла 07.09.2026: «за образец возьмём
главную страницу, там, где услуги нашего бюро с нотариальным
заверением - паспорта, водительские удостоверения; на странице
технический перевод у нас нет оглавления, какие технические документы
переводят, там идёт сразу список, и ссылаться там не на что».
Промежуточная редакция брала 13 / 17,55 из списка техперевода - Павел
отверг: «смотрится не очень, везде на кнопках один шрифт, а здесь
такой маленький».
overflow-wrap: break-word перебивает «anywhere» из раздела М5 выше.
«anywhere» рвал слово в любом месте, и «Учредительные» переносилось
как «Учредительны | е» - замечание Павла 07.09.2026 («а „е“ почему-то
улетает на другую строчку»). «break-word» разрывает только слово,
которое не помещается в строку целиком. */
body.mob .tp-dokumenty .tp-karta-gruppa .tp-gruppa > p {
margin: 0;
text-align: center;
font-size: 16px;
line-height: 20px;
font-weight: 650;
color: var(--ink, #1b1b1b);
overflow-wrap: break-word;
hyphens: none;
}
/* Заголовок группы выглядит названием плашки, а не ссылкой: цвет свой,
подчёркивания нет - как названия акций главной. В раскрытой карточке
ссылка заголовка работает и ведёт на свою страницу (ядро-2). */
body.mob .tp-dokumenty .tp-karta-gruppa .tp-gruppa > p a {
color: inherit;
text-decoration: none;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
/* Тот же запрет разрыва в любом месте: название группы - ссылка, и
правило М5 «anywhere» доставало до неё через селектор `a`. */
overflow-wrap: break-word;
}
body.mob .tp-dokumenty .tp-karta-gruppa.tp-gruppa-otkryta {
grid-column: 1 / -1;
}
body.mob .tp-dokumenty .tp-karta-gruppa.tp-gruppa-otkryta ul {
margin-top: 8px;
}
/* Название - РОВНО ПОСЕРЕДИНЕ белой карточки, и в свёрнутом виде, и в
раскрытом (правка Павла 07.09.2026: «место оставлено под рисунок - это
неправильно; название должно стоять ровно посередине этого белого
блока, никак по-другому»).
ЧТО МЕШАЛО. У заливки стоит отрицательное левое поле -24 точки: на
компьютере оно уводит заливку под картинку, чтобы цвет доходил до края
карточки. На телефоне картинка скрыта (раздел М5), а поле осталось -
заливка вылезала влево за край карточки и не доставала справа, и текст
в ней центрировался на 12 точек левее центра карточки (замер
07.09.2026: карточка 13..183, заливка 13..159). В раскрытом виде
смещение доходило до 25 точек.
СТАЛО. У групповой карточки заливка занимает ровно ширину карточки:
отрицательные поля сняты, свои поля отданы карточке. Центр текста
совпадает с центром карточки в обоих состояниях.
Карточки С ВИДИМОЙ картинкой этим правилом не затронуты: в блоке
документов на телефоне картинки скрыты все (раздел М5), а там, где
карточка не групповая, работает прежняя обрезка. */
body.mob .tp-dokumenty .tp-karta-gruppa .tp-zalivka {
margin: 0;
padding: 0;
width: 100%;
max-width: none;
box-sizing: border-box;
}
body.mob .tp-dokumenty .tp-karta-gruppa .tp-gruppa {
width: 100%;
}
/* Все карточки блока ОДНОЙ ВЫСОТЫ, пока ни одна не раскрыта - правка
Павла 07.09.2026: «сделать размер каждого блока одинаковым: если самая
высокая - корпоративная и коммерческая документация, то и все
остальные такого же размера». Раздел М5 выше ставит сетке
grid-auto-rows: min-content и align-items: start, поэтому карточка с
коротким названием выходила ниже соседки.
Класс «tp-gruppy-svyornuty» держит сценарий tehperevod_mobile.js: он
есть, пока все группы закрыты, и снимается на время раскрытия. Без
этого 1fr равнял бы ряды и по раскрытой карточке - её длинный список
растянул бы все остальные ряды до своей высоты. */
body.mob .tp-dokumenty.tp-gruppy-svyornuty {
grid-auto-rows: 1fr;
align-items: stretch;
}
body.mob .tp-dokumenty.tp-gruppy-svyornuty .tp-karta-gruppa {
align-self: stretch;
height: auto;
display: flex;
align-items: center; /* название посередине и по высоте карточки */
justify-content: center;
}
/* ── М13. Страны на телефоне: только названия групп ───────────────────
Правка Павла 07.09.2026 (консульская легализация): в свёрнутом виде
показываются ТОЛЬКО три названия групп - «Страны-участницы Гаагской
конвенции 1961 года (нужен Апостиль)», «Страны-участницы Минской
конвенции 1993 года (не нужен Апостиль)» и «Страны, для которых нужна
консульская легализация». Всё остальное - пояснения про конвенции,
про статью 27 федерального закона и списки стран - уходит под кнопку
«Читать далее».
ПЕРЕДЕЛАНО 07.09.2026 (вечер) по уточнению Павла: «сейчас вообще не
очевидно, как оно разворачивается. У нас есть три заголовка. После
ПЕРВОГО заголовка идёт маленькая кнопочка "читать далее"; нажимаю - и
ровно под ним открывается текст про Гаагскую конвенцию и список
стран. Свернул - и то же самое под следующим заголовком».
Стало так: каждый заголовок - своя раскрывашка, со своей кнопкой
сразу под ним и своим содержимым, которое раскрывается на месте, а
остальные заголовки уезжают вниз. Кнопки и панели расставляет по
местам порядок flex (ниже), содержимое переключает
home/static/js/site/tehperevod_mobile.js (функция strany).
ПОЧЕМУ display: contents. Заголовки лежат в своей обёртке .str-ryad,
а панели - её соседи; чтобы поставить панель под её заголовок,
обёртку надо «растворить»: тогда заголовки становятся прямыми детьми
блока наравне с панелями, и порядок задаётся одним свойством order.
Узлы при этом никуда не переносятся - на компьютере всё остаётся
вкладками, как было.
Подзаголовок вкладки («В Российской Федерации вступила в силу...»)
уходит: Павел просил в свёрнутом виде ровно три названия.
На компьютере правила не действуют - блок остаётся как был.
Откат: удалить раздел и функцию strany в сценарии. */
body.mob .tp-strany {
display: flex;
flex-direction: column;
}
body.mob .tp-strany .str-ryad {
display: contents;
}
/* Порядок: заголовок - его кнопка - его содержимое, и так три раза.
Номера идут десятками: внутри каждой группы остаётся запас, чтобы
кнопка могла уехать ПОД содержимое, когда группа раскрыта (правка
Павла 08.09.2026, замечание 3.2 - см. раздел М18 ниже). */
body.mob .tp-strany .str-tab[data-strana="0"] { order: 10; }
body.mob .tp-strany .str-chitat[data-gruppa="0"] { order: 11; }
body.mob .tp-strany .str-panel[data-gruppa="0"] { order: 12; }
body.mob .tp-strany .str-tab[data-strana="1"] { order: 20; }
body.mob .tp-strany .str-chitat[data-gruppa="1"] { order: 21; }
body.mob .tp-strany .str-panel[data-gruppa="1"] { order: 22; }
body.mob .tp-strany .str-tab[data-strana="2"] { order: 30; }
body.mob .tp-strany .str-chitat[data-gruppa="2"] { order: 31; }
body.mob .tp-strany .str-panel[data-gruppa="2"] { order: 32; }
/* ── М18. Раскрытая группа: «Свернуть» уходит вниз ─────────────────────
Правка Павла 08.09.2026, замечание 3.2: «нажимаю "Читать далее" -
текст разворачивается, но кнопка "Свернуть" осталась сверху. Это
неправильно. Кнопка "Свернуть" должна быть снизу: человек дочитал и
может нажать её и свернуть».
Пока группа закрыта, кнопка стоит под своим заголовком - иначе её не
найти. Как только группа раскрыта, кнопка уезжает под содержимое: у
неё номер на единицу больше, чем у панели. Раскрытость видно по
`aria-expanded`, его ставит сценарий (tehperevod_mobile.js, strany).
Замер до правки (телефон 375): «Свернуть» на 4236, содержимое группы
до 4828 - кнопка была над шестью сотнями точек текста.
Откат: удалить три правила - кнопка вернётся под заголовок. */
body.mob .tp-strany .str-chitat[data-gruppa="0"][aria-expanded="true"] {
order: 13;
}
body.mob .tp-strany .str-chitat[data-gruppa="1"][aria-expanded="true"] {
order: 23;
}
body.mob .tp-strany .str-chitat[data-gruppa="2"][aria-expanded="true"] {
order: 33;
}
/* ── М19. Разделители между группами стран ─────────────────────────────
Правка Павла 08.09.2026, замечание 3.1: «там, где страны, между каждым
блоком поставить тонкую черту фирменного красного цвета, чтобы было
понятно, где заканчивается одно и начинается другое. Сейчас непонятно».
Черта ставится сверху у второй и третьей групп - перед первой она не
нужна, там и так заголовок блока. Цвет фирменный, толщина 1 точка.
Откат: удалить раздел - границы между группами снова сотрутся. */
body.mob .tp-strany .str-tab[data-strana="1"],
body.mob .tp-strany .str-tab[data-strana="2"] {
border-top: 1px solid var(--cvet-bordo, #8c1821);
padding-top: 14px;
margin-top: 6px;
}
/* ── М20. «Свернуть список» - под самим списком ────────────────────────
Правка Павла 08.09.2026, замечание 3.3: «кнопка "Свернуть список"
опять находится сверху. Это нелогично, она должна быть внизу списка
всех стран».
Панель группы становится колонкой, и кнопка получает номер больше,
чем у перечня, - но только когда список раскрыт. В свёрнутом виде
она остаётся на месте, сразу под заголовком «Список стран», иначе её
не найти.
Замер до правки: «Свернуть список» на 4861, сам перечень из 126 стран
ниже, до 5912 - кнопка стояла над тысячей точек списка.
Откат: удалить раздел - кнопка вернётся над списком. */
/* Колонка задаётся с запасом по силе правила: ниже в этом же разделе
М13 открытая панель объявлена блоком, и без второго класса блок
победил бы - порядок внутри панели тогда не работает вовсе (замер
08.09.2026: order у детей стоял верно, а панель оставалась block). */
body.mob .tp-strany .str-panel.str-otkryta.str-otkryta {
display: flex;
flex-direction: column;
}
body.mob .tp-strany .str-panel.str-otkryta > * {
order: 1;
}
body.mob .tp-strany .str-panel.str-otkryta .str-spisok,
body.mob .tp-strany .str-panel.str-otkryta .str-perechen {
order: 2;
}
body.mob .tp-strany .str-panel.str-otkryta
.str-razvernut[aria-expanded="true"] {
order: 3;
margin-top: 10px;
}
/* Закрытая группа не показывает ничего, кроме своего названия. */
body.mob .tp-strany .str-panel {
display: none;
}
body.mob .tp-strany .str-panel.str-otkryta {
display: block;
}
body.mob .tp-strany .str-podzagolovok {
display: none;
}
/* Кнопка «Читать далее» - маленькая, слева под своим заголовком. */
body.mob .tp-strany .str-chitat {
display: block;
margin: 2px 0 10px;
padding: 0;
text-align: left;
}
body.mob .tp-strany .str-tab {
padding-bottom: 6px;
}
/* Кнопки внутри блока набираются ОДНИМ шрифтом - правка Павла
07.09.2026: «свернуть и развернуть список везде должны быть
одинаковым шрифтом: у тебя "читать далее" и "свернуть" одним, а
"развернуть список" другим - это неправильно». Числа взяты у канонной
кнопки раскрывашки .tp-readmore (раздел М11). */
body.mob .tp-strany .str-razvernut,
body.mob .tp-strany .str-chitat {
font-size: 13px;
line-height: 1.4;
font-weight: 700;
color: var(--cvet-bordo, #8c1821);
}
/* Списки стран на телефоне - ДВА столбца. Правка Павла 07.09.2026:
«список стран в мобильной версии реализован в четыре столбца, при
этом текст заходит друг на друга - нужно организовать в два». Общее
правило блока (раздел 18.3) ставит четыре, а мобильный медиазапрос
переопределял только .str-perechen: сам .str-spisok оставался с
четырьмя столбцами. */
body.mob .tp-strany .str-perechen {
columns: 2;
column-gap: 14px;
}
/* ПЕРЕДЕЛАНО 08.09.2026, круг 2, замечание К2-4 («говорится третий
раз»): «список стран налазит друг на друга: стоит в четыре столбика и
в таком виде не помещается».
ОТКУДА ЧЕТЫРЕ. Третья группа - «Страны, для которых нужна консульская
легализация» - устроена иначе двух первых: внутри общего списка идут
области (`.str-region`), у каждой свой перечень стран. Прежняя
редакция ставила две колонки И общему списку, и вложенным перечням -
получались колонки внутри колонок, то есть четыре столбца в строке.
Содержимое в них не помещалось и распирало страницу: замер 08.09.2026
на телефоне 375 - окно раздвинулось до 470 точек.
Компьютерное правило этот случай учитывает - там у вложенного перечня
стоит `columns: initial`; мобильное про него не знало.
Стало: общий список - одной колонкой (области идут друг за другом, и
заголовок области не отрывается от своих стран), перечень внутри
области - в две колонки. У двух первых групп перечень лежит прямо в
панели, без областей, и на них правило действует как раньше.
Откат: вернуть `.str-spisok` в общий селектор - снова получатся
колонки в колонках. */
body.mob .tp-strany .str-spisok {
columns: initial;
}
body.mob .tp-strany .str-spisok .str-perechen {
columns: 2;
column-gap: 14px;
}
body.mob .tp-strany .str-perechen li {
break-inside: avoid;
}
/* Кегль перечня - канонный для телефона, как у остального текста
страницы: правка Павла 08.09.2026, К2-4, «шрифт - канонический, тот,
что предусмотрен для этих текстов». Было 15 / 21,75 - крупнее
основного текста (13 / 17,55) в полтора раза. */
body.mob .tp-strany .str-perechen li,
body.mob .tp-strany .str-spisok li {
font-size: 13px;
line-height: 17.55px;
}
/* ── М14. Телефон: левый текст блока заявки не показывается ────────────
Правка Павла 07.09.2026 по консульской легализации: «слева написано
"Закажите консульскую легализацию документов. Оставьте заявку, и мы
сделаем всё за Вас в нужные Вам сроки". Давай сделаем так, чтобы этот
текст на мобильной версии вообще никак не фигурировал. Можно так,
чтобы для поисковика он был виден, а здесь не был - он на мобильной
особо ничего не даёт».
ЧТО ЭТО ЗА ТЕКСТ. Левая колонка блока заявки - не шаблон, а кусок
содержимого страницы: заголовок H2 и два абзаца перед формой
(service_archetype_page.html, ветка blok.vid == 'zayavka'). На
компьютере они стоят слева от коробки формы, на телефоне - сверху над
ней, и там только отодвигают саму форму вниз.
КАК СКРЫТО. Приёмом visually-hidden, тем же, что у класса .vhidden
(home/static/css/site/guide.css): текст остаётся в разметке, поисковик
его читает, экранный диктор озвучивает - но места на экране он не
занимает. Именно этого Павел и просил. display: none здесь нельзя:
поисковик такой текст считает скрытым.
Класс .vhidden поставить нельзя - разметка приходит из содержимого
страницы, а не из шаблона; поэтому приём применяется правилом к
прямым потомкам секции заявки.
Коробка формы (.zkorobka) и всё внутри неё не затронуты - правило
бьёт только по заголовку и абзацам самой секции.
Откат: удалить раздел - текст снова встанет над формой. */
@media (max-width: 640px) {
body.mob .zayavka-sleva > h2,
body.mob .zayavka-sleva > p {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
/* ── М15. Список в плашке - тем же шрифтом, что и текст плашки ─────────
Правка Павла 07.09.2026 по справке об отсутствии судимости: «на
втором блоке "справка об отсутствии судимости может содержать
информацию" список почему-то шрифтом отличным от основного... должен
быть одинаковый».
ОТКУДА РАЗНИЦА. В содержимом страницы список стоит ВНУТРИ абзаца:
``. Такая вложенность
недопустима, и браузер выносит список из абзаца - вместе с ним
теряется и шрифт абзаца. Абзацы плашки набраны --fs-body
(.card3 p, glavnaya-b.css), а осиротевший список берёт общий кегль
списков сайта. Замер на телефоне 375 до правки: текст плашки
13,5/18,2, пункты списка 15/21,8 - список крупнее текста над ним.
ПОЧЕМУ ПРАВИМ СТИЛЕМ, А НЕ РАЗМЕТКОЙ. Разметка приходит из
содержимого страницы (поле редактора), а не из шаблона: чинить её
пришлось бы правкой текста в базе на каждой странице, где встретится
такая вложенность. Правило же берёт ровно те значения, которыми
набраны абзацы той же плашки, - это и есть «одинаковый шрифт».
Тот же порядок в каноне сайта: у списков .lst кегль задан теми же
переменными, что у абзацев (glavnaya-b.css).
Откат: удалить раздел - список снова станет крупнее текста плашки. */
body .card3 .pv-telo ul,
body .card3 .pv-telo ol {
margin: 0;
padding-left: 16px;
}
body .card3 .pv-telo li {
font-size: var(--fs-body);
line-height: var(--lh-body);
margin-bottom: var(--sp-1);
}
/* ── М16. Телефон: блок «Важно знать» - картинка слева, текст справа ───
ИСТОРИЯ ПРАВКИ. 07.09.2026 Павел просил на телефоне картинки из этого
блока убрать вовсе - так и было сделано. 08.09.2026 он решение
уточнил (замечание 4.2): «в этих двух подблоках картинку разместить
слева, текст - справа. Такая возможность есть, по тексту всё
помещается. Переделать». Прежнее правило (`display: none` на слоте)
заменено этим.
ЧТО ДЕЛАЕМ. Общий раздел 19.12 на узких экранах складывает ячейку
столбиком - картинка над текстом. Здесь это перестроение отменяется:
ячейка остаётся строкой, слева слот с картинкой, справа белая плашка.
Слот на телефоне уже, чем на компьютере: 84 точки от 349 доступных
съедали бы у текста четверть строки. 60 точек хватает, чтобы снимок
читался, и оставляет тексту 265 - при кегле 13,5 это ровно те же
35-40 знаков в строке, что и в соседних плашках страницы.
Откат: удалить раздел - картинка снова встанет НАД текстом (так
работает общее правило 19.12). */
@media (max-width: 700px) {
body .tp-poloviny .pv-yach {
flex-direction: row;
align-items: stretch;
gap: 12px;
}
/* Слот снова тянется на высоту ряда - как на компьютере, где высоту
задаёт плашка с текстом, а картинка вписывается в неё целиком. */
body .tp-poloviny .pv-slot {
width: 60px;
flex: none;
}
body .tp-poloviny .pv-kartinka {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
}
/* ── М17. Первый экран без калькулятора: девять плашек одной сеткой ────
Правка Павла 08.09.2026, замечания 27 и 28. На страницах, где нет
калькулятора (консульская легализация, справка о несудимости), из ряда
офферов убрана плашка «2 минуты - расчёт на калькуляторе»: она обещала
то, чего на странице нет. Осталось три оффера, и отдельной короткой
полосой они смотрелись обрубком.
Дословно: «эти три плашки идут вместе со следующим рядом плашек, где
по три плашки в ряду... получается первые шесть плашек и следующие
шесть плашек, но эти вытянуты уже на всю длину экрана» и «эти три
плашки делаем такого же размера, как следующие плашки».
Поэтому девять плашек выводятся одной сеткой: три в ряд на компьютере,
два на телефоне - ровно как размечен случай шести у эталона
(`.buls.seg[data-n="6"]`, css/etalon/glavnaya-a.css). Своего правила
для девяти у эталона нет, отсюда этот раздел.
Откат: удалить раздел - девять плашек лягут в четыре столбца, как
любой неразмеченный ряд. */
body .buls.seg.tp-devyat {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.mob .buls.seg.tp-devyat {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* ── М21. Единственная кнопка прайса стоит по центру ───────────────────
Правка Павла 08.09.2026, замечание 13 (страница «Работа с графикой»):
«кнопка "Дополнительные услуги" здесь одна. Пусть остаётся как есть, в
прайс-листе... просто разместить её по центру».
Ряд кнопок прайса на телефоне - сетка из двух столбцов (эталон,
`body.mob .tabsrow`). Когда кнопка одна, она занимает первый столбец,
а второй остаётся пустым: замер 08.09.2026 на телефоне 375 - слева до
края 13 точек, справа 191.
Единственная кнопка растягивается на оба столбца и встаёт по центру,
сохраняя свою ширину. Там, где кнопок две и больше, ничего не
меняется.
Откат: удалить раздел - одинокая кнопка снова прижмётся влево. */
body.mob .tabsrow .pt:only-child {
grid-column: 1 / -1;
justify-self: center;
}
/* ── М22. Свёрнутая группа документов: только название ─────────────────
Правка Павла 08.09.2026, замечание 23.2 (страница «Перевод
документов»): «в видимой части кнопки в мобильной версии нужно
отображать только заголовок: "Перевод личных документов частных лиц",
"Перевод корпоративных документов". А когда разворачиваем - там
разворачивается весь список».
Список в свёрнутом виде и так спрятан, а вот подводка «К таким
относятся следующие документы:» оставалась - и обрывалась на полуслове,
потому что самих документов под ней не было. Теперь она показывается
вместе со списком, при раскрытии.
Подзаголовок блока (абзац `.sub` под заголовком «Какие документы мы
переводим») не трогаем - Павел просил его оставить.
Раскрытая карточка групп документов помечается классом
`tp-gruppa-otkryta` - его ставит home/static/js/site/tehperevod_mobile.js
(замер 08.09.2026: `card3 tp-karta tp-karta-gruppa raskryvashka
tp-gruppa-otkryta`). Общий признак раскрывашек `tp-otkryt` здесь не
используется.
Откат: удалить раздел - подводка вернётся в свёрнутый вид. */
body.mob .tp-dokumenty [data-tp-blok]:not(.tp-gruppa-otkryta)
.tp-gruppa-podvodka {
display: none;
}
/* ── М23. Телефон: блок «Что важно знать» - три строки и кнопка ────────
Правка Павла 08.09.2026, замечание 18 (страница «Срочный апостиль»).
Замер до правки на телефоне 375: три ячейки блока - 1393, 1653 и 1214
точек, вместе 4260, четыре с половиной экрана сплошного текста.
· картинки убираем - прямое исключение из канона, о котором Павел
сказал отдельно: «конкретно для апостиля делаем исключение из
канона: картинки убираем»;
· текст показываем тремя строками, дальше кнопка «Читать далее»
(её ставит js/site/vazhno_znat.js);
· последняя ячейка - «Есть несколько вариантов проставления
Апостиля» - остаётся целиком, её сценарий не сворачивает.
Правило привязано к секции «Что важно знать»: блок «Мы поможем» на
«Апостиле» устроен такими же ячейками и остаётся нетронутым.
Откат: удалить раздел и файл js/site/vazhno_znat.js. */
body.mob #vazhno-znat .tp-pomozhem .pm-kartinka {
display: none;
}
body.mob #vazhno-znat .tp-pomozhem .pm-yachejka.pm-svyornuta
.pm-soderzhimoe {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.mob #vazhno-znat .tp-pomozhem .pm-yachejka.pm-otkryta
.pm-soderzhimoe {
display: block;
overflow: visible;
}
body.mob #vazhno-znat .tp-pomozhem .pm-chitat {
display: block;
margin: 8px 0 0;
padding: 0;
text-align: left;
}
/* ── М24. Телефон: таблица редакционного текста помещается в экран ─────
Правка Павла 08.09.2026, замечание 20.3 (страница «Апостиль на
документы ЗАГС»): «сделать её таким же шрифтом, как основной текст -
сейчас шрифт капитально размахнут; сделать так, чтобы таблица
помещалась в экран полностью, без прокрутки влево-вправо и без заезда
за край; сейчас из-за неё страницу можно раздвигать - это очень
плохо, таблица получается корявая».
Замер до правки на телефоне 375: страница раздвинулась до 454 точек -
таблица шире экрана на 79. Кегль ячейки 15 / 23,25 против основного
текста 13 / 17,55.
ЧТО ДЕЛАЕМ.
· Кегль ячеек - тот же, что у абзаца рядом.
· `table-layout: fixed` заставляет столбцы делить ширину поровну, а не
растягиваться под самое длинное слово; вместе с переносом длинных
слов это и есть «помещается в экран».
· Поля ячеек уменьшены: при трёх столбцах на 349 точках прежние 10-12
точек с каждой стороны съедали треть строки.
На компьютере таблица остаётся как была - там ширины хватает.
Откат: удалить раздел - таблица снова начнёт раздвигать страницу. */
body.mob .rt-tekst table {
table-layout: fixed;
width: 100%;
max-width: 100%;
}
/* Селектор длиннее, чем хотелось бы: кегль ячеек задаёт эталон
правилом `.blk[data-b] table[data-b] td[data-b]` (15 точек), и оно
сильнее короткого `.rt-tekst table td`. Сравнялись по числу классов,
перевесили числом элементов. */
body.mob .blk.tp-tekst .rt-tekst table td,
body.mob .blk.tp-tekst .rt-tekst table th,
body.mob .rt-tekst table td,
body.mob .rt-tekst table th {
font-size: 13px;
line-height: 17.55px;
padding: 6px 7px;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
/* ── М25. Проверено: «Закажите в АкадемПеревод» уже скрыт ─────────────
Замечание Павла 9.3 (страница «Дополнительные услуги»): «блок
"Закажите в Академперевод качественные услуги перевода" в мобильной
версии скрывается, остаётся только "Присылайте ваш запрос"».
Своего правила не потребовалось: блок собран как секция заявки с
классом `zayavka-sleva`, а её заголовок и абзацы на телефоне уже
скрыты приёмом visually-hidden - раздел М14, правка Павла 07.09.2026
по консульской легализации. Замер 08.09.2026 подтвердил: заголовок и
абзац скрыты, виден заголовок формы «Присылайте Ваш запрос».
Отметка оставлена намеренно: пункт проверен, а не забыт. */
/* ── М26. Телефон: примеры оформления диплома ─────────────────────────
Правка Павла 08.09.2026, замечание 26, и переделка того же дня по
кругу 2, замечание К2-9.
РАСКЛАДКУ НЕ МЕНЯЕМ - прямое указание Павла: «раскладка остаётся
прежней - картинка, под ней текст шага; на левую и правую колонки
блок не переделываем». Два варианта, которые он по ходу отменил
(«слева картинка, справа текст с кнопкой Развернуть» и «картинку
вдвое, цифру 1 посередине»), в работу не брались.
Что делаем по К2-9:
1. ИНТЕРВАЛЫ - «намного, существенно меньше, прямо впритык».
Зазор сетки шагов, поля шага и отступы вокруг картинки и текста
сведены к минимуму. Замер до круга 2: шаг занимал 256-326 точек
при картинке в 181.
2. ЧЕРТА ПОД ТЕКСТОМ ШАГА - «чтобы было видно, где кончается этап 1 и
начинается этап 2». Тонкая линия снизу у каждого шага, кроме
последнего в блоке.
3. СКАН ЕЩЁ НА 30 % МЕНЬШЕ: 136 -> 95 точек по ширине.
4. ЦИФРА ШАГА МЕНЬШЕ: 15 -> 12 точек.
5. ЛУПА С ПЛЮСИКОМ, ПОСТОЯННО ВИДНАЯ. Было замечание: «плюсик стоит
только на средней картинке и вообще то есть, то нет». Знак стоял на
всех, но рисовался белым кругом - на белом поле незагруженного ещё
снимка его попросту не видно. Теперь это бордовый круг с белой
лупой внутри: читается на любом фоне, в том числе пока картинка
грузится.
ТОТ ЖЕ ВИД НА «АПОСТИЛЕ» - пункт 3.6.2 сводного пакета: «блок "Как
будет выглядеть ваш апостиль - три варианта представления апостиля"
оформить по шагам 1-2-3, как на "Переводе дипломов": такие же
маленькие картинки, на каждой - неисчезающая лупа с плюсиком. Кнопку
"Заказать апостиль" оставить как есть». Разметка блоков одинаковая
(замер 09.09.2026), поэтому к селекторам добавлен второй адрес -
#kak-vyglyadit. Кнопку он не трогает: правило её переноса осталось
только за блоком дипломов, как Павел и просил.
Откат: удалить раздел - вернутся крупные снимки без знака увеличения. */
body.mob #primery-oformleniya .tp-primery,
body.mob #kak-vyglyadit .tp-primery {
gap: 4px;
}
body.mob #primery-oformleniya .tp-primer,
body.mob #kak-vyglyadit .tp-primer {
padding: 0 0 6px;
margin: 0;
border-bottom: 1px solid var(--liniya, #d9dbde);
}
/* У последнего шага блока черты нет: дальше и так кнопка заказа. */
body.mob #primery-oformleniya .tp-primer:last-child,
body.mob #kak-vyglyadit .tp-primer:last-child {
border-bottom: 0;
}
body.mob #primery-oformleniya .tp-primer-nomer,
body.mob #kak-vyglyadit .tp-primer-nomer {
font-size: 12px;
line-height: 1.2;
margin: 0;
}
body.mob #primery-oformleniya .tp-primer-snimok,
body.mob #kak-vyglyadit .tp-primer-snimok {
position: relative;
display: block;
width: 95px;
margin: 2px auto;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
body.mob #primery-oformleniya .tp-primer-snimok img,
body.mob #kak-vyglyadit .tp-primer-snimok img {
width: 95px;
height: auto;
display: block;
}
/* Лупа с плюсиком - бордовый круг с белым значком внутри. Значок нарисован
встроенной картинкой: окружность, ручка и плюс. Своего файла не заводим -
лишний запрос ради значка в 34 точки не нужен. */
body.mob #primery-oformleniya .tp-primer-snimok::after,
body.mob #kak-vyglyadit .tp-primer-snimok::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 34px;
height: 34px;
border-radius: 50%;
background-color: rgba(140, 24, 33, .92);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
pointer-events: none;
/* Знак виден ВСЕГДА. У кнопки снимка есть свой ::after - подсказка
«Открыть крупно», она проявляется только при наведении и живёт с
`opacity: 0`. Наш знак рисуется тем же псевдоэлементом и получал ту
же прозрачность: отсюда жалоба Павла «плюсик то есть, то нет».
Замер 08.09.2026: прозрачность 0 при заданных фоне и размере. */
opacity: 1;
transition: none;
}
body.mob #primery-oformleniya .tp-primer-opisanie,
body.mob #kak-vyglyadit .tp-primer-opisanie {
font-size: 13px;
line-height: 17.55px;
text-align: center;
margin: 4px 0 0;
}
/* Кнопка заказа, переехавшая под примеры, стоит по центру и с отступом
от следующего блока. */
body.mob #primery-oformleniya > .tp-knopka {
display: block;
width: fit-content;
margin: 10px auto 22px;
}
/* ── М27. Телефон: непарная плашка встаёт посередине ───────────────────
Правка Павла 08.09.2026, круг 2, замечание К2-5: «блок, который в
мобильной версии остаётся непарным, ставим посередине». Названы две
страницы: справка о несудимости - «Вернём деньги, если не сможем
исправить неточность», консульская легализация - «Бесплатная доставка
по Москве при заказе от 10 000 рублей».
Этой же правкой Павел отменил прежнее «убрать блок "Оригинал или
копия"»: «блок не убираем, иначе количество блоков станет неровным».
ПРАВИЛО СНЯТО 09.09.2026 - его заменило задание 4 того же дня:
«центрирование неполного последнего ряда плашек - по всему сайту», и
там же прямо сказано, что ширина плашек и просветы обязаны остаться
как в полном ряду. Здесь плашка растягивалась на оба столбца и
получала ширину `calc((100% - var(--card-gap, 7px)) / 2)`, то есть
считала просвет по переменной эталона (7 точек), а не по фактическому
просвету своей сетки. Новый механизм (js/site/ryady_plashek.js плюс
правило «Задание 4» в конце файла) берёт и число колонок, и просвет у
самой сетки, размеров не трогает вовсе и работает на любой ширине
экрана - в том числе на этих двух страницах.
Откат: вернуть правило
`body.mob .buls.seg .bul:last-child:nth-child(odd)` с grid-column
1 / -1, justify-self: center и расчётной шириной. */
/* ── Таблица без шапки: первая строка обычная ───────────────────────────
Пункт 2.9 сводного пакета (К2-11). Павел про «Перевод документов на
немецкий язык»: «Исполнитель решил, что "Личные документы" - это
заголовок таблицы, и сделал его жирным. Это не так: здесь нет шапки
таблицы. Всё одним шрифтом, обычным».
Правило `body .rt-tekst table tr:first-child td` красит первую строку
любой редакционной таблицы как шапку. В перенесённых таблицах тега
| нет, отличить данные от шапки оно не может. Класс `bez-shapki`
ставит сборка (tehperevod_razmetka.pometit_tablicy_bez_shapki) там,
где ячейка первой строки длиннее 60 знаков - то есть это текст, а не
название столбца.
Настоящие шапки не задеты: на «Перевод брошюр» жирными остаются
«Основные аспекты» и «Описание», как и просил Павел.
Откат: удалить это правило - первая строка снова станет жирной везде. */
body .rt-tekst table.bez-shapki tr:first-child td,
body .rt-tekst table.bez-shapki > tr:first-child td,
body .rt-tekst table.bez-shapki > tbody:first-child > tr:first-child td {
font-weight: 400;
background: none;
}
/* ── 3.23. «Научный перевод»: материалы в один столбец, ровные ──────────
Пункт 3.23 сводного пакета (К2-16), диктовка Павла 08.09.2026 про
раздел «Мы работаем со следующими научными материалами и документами»:
«Чтобы текст по блокам не вылезал, разместить их так же, как "Наши
возможности в области научного перевода": друг за другом в один
столбец. Будет четыре плашки... Плашки все одинакового размера: если
какая-то попадается в две строчки, то и все остальные плашки - в две
строчки».
Замер на стенде 08.09.2026: сетка стояла в два столбца по 169,7 точки,
высота карточек 104 и 88 - разная, потому что названия занимают то две
строки, то одну.
Один столбец - как у образца, названного Павлом («Наши возможности»
собраны с ключом odin_stolbec). Ровная высота - через grid-auto-rows:
строка равняется по самой высокой карточке, и все четыре выходят
одинаковыми.
Правило адресовано только этой странице: на «Медицинском переводе»
тот же блок стоит в два столбца, и Павел его раскладку не трогал.
Откат: удалить раздел - вернутся два столбца разной высоты. */
body.mob.stranica-nauchnyj-perevod .tp-dokumenty {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: 1fr;
}
body.mob.stranica-nauchnyj-perevod .tp-dokumenty .card3.tp-karta {
height: 100%;
}
/* ── 3.6.1. «Типы документов для апостиля» - два столбца ────────────────
Пункт 3.6 сводного пакета (К2-12), диктовка Павла 08.09.2026: «Плашки
"Документы образования", "Документы ЗАГС", "Нотариальные документы",
"Корпоративные документы", "Справки и выписки". Сейчас они размещены в
три столбца - не помещаются. Конкретно этот блок сделать в два
столбца, а последнюю плашку, "Справки и выписки", разместить
посередине. Все кнопочки должны быть одинакового размера».
Замер на стенде 08.09.2026: сетка стояла в три столбца по 109,8 точки
при экране 375 - на плашку оставалось меньше трети ширины.
Непарная плашка по центру - правило канона, заведённое решением Павла
К2-14 (пункт 2.13): последняя в нечётном ряду встаёт посередине
шириной как соседи. Здесь оно же, только для этого блока.
Одинаковый размер - grid-auto-rows: строка равняется по самой высокой
плашке.
Откат: удалить раздел - вернутся три столбца. */
body.mob #tipy-dokumentov .tp-dokumenty,
body.mob .stranica-apostil #tipy-dokumentov .tp-dokumenty,
body.mob.stranica-apostil .tp-dokumenty {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Ряды по содержимому - пункт 14 мобильного задания 09.09.2026:
«плашки раскрываются с чрезмерно большими пустыми промежутками;
особенно заметно между закрытой плашкой "Документы об образовании"
и раскрытой "Документы ЗАГС"; при раскрытии закрытая плашка должна
оставаться выше без большого пустого пространства».
Замер стенда до правки: раскрытая карточка 189 точек, ряды
`grid-auto-rows: 1fr` равняли по ней ВСЕ ряды, и закрытая плашка в
66 точек оставляла под собой 134 точки пустоты.
Равные высоты нужны только в свёрнутом виде («все кнопочки должны
быть одинакового размера», правка 08.09.2026) - там их и оставляем
правилом ниже: класс `tp-gruppy-svyornuty` вешает сценарий, пока в
блоке нет ни одной раскрытой карточки. */
grid-auto-rows: auto;
}
body.mob #tipy-dokumentov .tp-dokumenty.tp-gruppy-svyornuty,
body.mob.stranica-apostil .tp-dokumenty.tp-gruppy-svyornuty {
grid-auto-rows: 1fr;
}
/* Центрирование последней плашки отсюда СНЯТО 09.09.2026: его делает
общее правило задания 4 («центрирование неполного последнего ряда
плашек - по всему сайту»). Прежнее правило растягивало плашку на оба
столбца и считало её ширину по переменной эталона, а не по
фактическому просвету сетки; новое двигает плашку, не трогая
размеров, и работает на любой ширине экрана. Плашка «Справки и
выписки» стоит по центру, как и просил Павел. */
/* ── 3.4.2. «Справка о несудимости»: проверено, уже сделано ─────────────
Пункт 3.4 сводного пакета (замечание 4.2 первого круга): «В этих
двух подблоках картинку разместить слева, текст - справа».
Замер на стенде 08.09.2026: так и есть. Картинка занимает 35..95
точки, текст 143..340 - то есть справа от неё. Раскладку делает
правило `body .tp-poloviny .pv-slot { width: 60px; flex: none }` в
разделе мобильной версии выше.
Своего правила здесь не заводим: 08.09.2026 оно было написано и
снято обратно - расширяло колонку картинки с 60 до 96 точек, чего
Павел не просил (правило 0.4 пакета: ничего не добавлять от себя).
Отметка оставлена, чтобы правило не завели заново. */
/* ── 3.25.2 и 3.26.2. Раскрытая плашка: текст по левому краю ────────────
Пункты 3.25 и 3.26 сводного пакета (К2-19 и К2-24), диктовка Павла
08.09.2026 про «Технический перевод по направлениям нефтегазовой
отрасли» и «Перевод по направлениям нефтесервиса»: «Здесь всё окей.
Единственное: при раскрытии заголовок "Добыча нефти и газа" остаётся
посередине, а весь остальной текст - список - идёт по левому краю».
Замер на стенде 08.09.2026: и заголовок, и тело плашки были выключены
по центру (text-align: center). Список из-за этого читался тяжело:
строки разной длины сходились к середине.
Заголовок оставляем по центру - Павел прямо сказал «остаётся
посередине». Меняем только тело.
Правило общее для карточек-плашек: у них у всех вид один, и разнобой
между страницами был бы хуже. Заголовок не трогаем нигде.
Откат: удалить раздел - текст вернётся к середине. */
/* Выключку по центру ставит `body.mob .cards3[data-b].kart4 .card3[data-b]
.foldb[data-b]` из bloki/05_uslugi.css - селектор из семи классов и
признаков, простым правилом его не перебить. Пишем адресно, по двум
названным страницам: на остальных карточки в четыре ряда короткие, и
середина им идёт. */
body.mob.stranica-neftegaz .cards3[data-b].kart4 .card3[data-b] .foldb[data-b],
body.mob.stranica-nefteservis .cards3[data-b].kart4 .card3[data-b] .foldb[data-b] {
text-align: left;
}
/* ── 3.1.1. Блоки стран: тонкая красная черта между ними ────────────────
Пункт 3.1 сводного пакета (замечание 3.1 первого круга), диктовка
Павла: «Там, где страны, между каждым блоком поставить тонкую черту
фирменного красного цвета, чтобы было понятно, где заканчивается одно
и начинается другое. Сейчас непонятно».
Блоки стран - три раскрывающихся заголовка: Гаагская конвенция,
Минская конвенция, консульская легализация. Замер на стенде
08.09.2026: черты между ними не было вовсе (border 0px none), и на
телефоне три длинных заголовка подряд читались одной простынёй.
Черта того же цвета и толщины, что разделитель статей блога (пункт
3.32): вид у разделителей на сайте один.
У последнего блока черты нет - под ним и так конец перечня.
Откат: удалить раздел. */
/* Черта ставится СВЕРХУ каждой кнопке, кроме первой: так их ровно
две на три блока. Через :not(:last-child) снизу не выходило - после
последней кнопки в ряду стоит ещё один узел, и черта доставалась всем
трём (замер 08.09.2026). */
body .tp-strany .str-ryad .str-tab + .str-tab {
border-top: 1px solid var(--cvet-bordo, #8c1821);
}
/* ── 3.3.3. Консульская легализация: буллеты одного размера ─────────────
Пункт 3.3.3 сводного пакета, диктовка Павла: три верхние плашки
(«24/7», «Онлайн», «100 %») должны быть «того же размера, что
следующие» - «4 этапа», «Госпошлина включена», «Без Вашего участия».
Замер стенда 09.09.2026 (окно 375, буллеты идут по два в ряд): 97,
97, 115, 115, 131, 131, 113, 113, 80. Ширина у всех одна (169), кегли
одни (16 и 13) - разъезжалась только высота: сетка даёт каждому ряду
свою, по самой длинной подписи в этом ряду.
Здесь ряды равняются между собой - grid-auto-rows: 1fr. Это НЕ
отменяет общее правило «высота считается по ряду» (раздел про
.tp-dokumenty выше, правка Павла 01.09.2026): то правило про карточки
документов с текстом разной длины, а тут короткие плашки-показатели и
прямая просьба сделать их одинаковыми. Поэтому правило адресное - имя
страницы в селекторе.
Откат: удалить раздел. */
body.stranica-konsulskaya-legalizatsiya-dokumentov .buls {
grid-auto-rows: 1fr;
}
/* ── 3.6.3. «Апостиль», раздел «Мы поможем»: картинки прочь, кегли в канон ─
Диктовка Павла (пункт 3.6.3 сводного пакета): «Убрать все три огромные
картинки (первая идёт сразу после H2). "Определить, как правильно
поставить апостиль" и "Подать документ в соответствующее ведомство" -
огромный шрифт, должен быть H3; "Правильно подготовить документ" -
тоже привести к нормальному. Описательный текст ("Апостиль можно
поставить несколькими способами") - тем же кеглем, что везде в
редакционных плашках».
Замер стенда 09.09.2026, окно 375:
· три картинки 301x401, 301x500 и 301x133 - вместе почти
полторы высоты экрана;
· .pm-zagolovok - 21 точка при H2 страницы 20: заголовок третьего
уровня крупнее второго;
· текст ячеек - 15 точек при 13 в редакционном тексте (.rt-blok p).
Кегли берутся с самой страницы: H3 редакционного текста здесь 16/700,
основной текст 13/400. Раздел «Что важно знать» на «Срочном апостиле»
картинки прячет тем же приёмом (раздел ниже) - вид у блоков один.
Откат: удалить раздел. */
body #pomozhem .tp-pomozhem .pm-kartinka {
display: none;
}
body #pomozhem .tp-pomozhem .pm-zagolovok {
font-size: 16px;
}
body #pomozhem .tp-pomozhem .pm-soderzhimoe,
body #pomozhem .tp-pomozhem .pm-soderzhimoe > p,
body #pomozhem .tp-pomozhem .pm-plashka,
body #pomozhem .tp-pomozhem .pm-perechen li {
font-size: 13px;
}
/* ── 3.6.5. «Апостиль», акции: название скидки тем же кеглем, что выше ──
Диктовка Павла (пункт 3.6.5): «Названия скидок "Скидка 10% на первый
заказ", "Скидка 20% на группу документов" - тем же шрифтом, что у
блока выше ("Апостиль в любом ведомстве")».
Замер стенда 09.09.2026: «Апостиль в любом ведомстве» - 16/650,
названия скидок - 14/650. Насыщенность и семейство совпадают, разошёлся
только кегль.
Правило адресное: раздел «Акции» есть и на главной, там свой размер
карточек - его не трогаем.
Откат: удалить раздел. */
body.stranica-apostil #akcii .foldh span,
body.stranica-apostil .tp-akcii .foldh span {
font-size: 16px;
}
/* ── Задание 4 (09.09.2026): неполный последний ряд плашек по центру ───
Дословно из задания: «если последний ряд заполнен не полностью,
оставшиеся плашки центрируются как единая группа; ширина плашек и
расстояние между ними остаются такими же, как в полном ряду; одна
оставшаяся плашка располагается по центру; две оставшиеся плашки в
трёхколоночной сетке располагаются рядом с обычным интервалом, а вся
пара центрируется; плашки не растягиваются и не распределяются
равномерно от краёв контейнера».
Сдвиг считает js/site/ryady_plashek.js - от фактического числа
колонок и просвета сетки на текущей ширине экрана; здесь только его
применение. Сдвиг сделан преобразованием, а не полями: так размеры
плашки не меняются вовсе - двигается лишь её положение.
Откат: удалить это правило и файл js/site/ryady_plashek.js. */
body .ryad-hvost {
transform: translateX(var(--hvost-sdvig, 0));
}
/* ── Пункт 3 мобильного задания 09.09.2026: доли столбцов в таблице ────
«Цены на консульскую легализацию»
Дословно: «сейчас столбец "Этап легализации" чрезмерно широкий, а
столбец "Цена" слишком узкий. В мобильной версии установить
пропорции: "Этап легализации" - 40 %, "Цена" - 30 %, "Срок" - 30 %.
Распределить текст внутри этих столбцов».
Замер стенда до правки (окно 375): таблица 347 точек, столбцы 191 /
78 / 78, то есть 55 / 23 / 23 процента.
Таблица набрана `table-layout: fixed`, поэтому доли задаются шапке -
остальные строки наследуют их автоматически.
ЧТО ЕЩЁ ЗАТРОНЕТ. Вкладка «Легализация» - часть общего прайса, она
выводится не только на «Консульской легализации»; страницы, где она
есть, перечислены в отчёте. Ширины столбцов - свойство самой таблицы,
и разными от страницы к странице они быть не должны, поэтому правило
адресовано вкладке, а не одной странице. Другие вкладки прайса
(письменный, апостиль, личные документы) не задеты: селектор указывает
именно `[data-ppanel="legalizaciya"]`.
ГЛАВНАЯ И «ЦЕНЫ» ИСКЛЮЧЕНЫ. Главная - замороженный эталон вида, её
прайс трогать нельзя. «Цены» Павел назвал прямо: «исключение
составляет страница цены, потому что там легализация будет отображена
на другом уровне». Обе исключены по имени страницы в теле документа.
Компьютер не тронут - раздел целиком в `@media (max-width: 760px)`.
Откат: удалить раздел - вернутся доли 55 / 23 / 23. */
@media (max-width: 760px) {
/* Селектор повторяет вид эталонного - с `.ptab`, `[data-b]` и
`body.mob`. Замер стенда 09.09.2026 после первой выкатки: доли
вышли 48 / 26 / 26, потому что в замороженном glavnaya-b.css у
этой же вкладки стоит своё правило
`body.mob .ptab[data-b][data-ppanel="legalizaciya"] .ptable[data-b]
th[data-b]` - оно считает больше классов и атрибутов и побеждало.
Второй замер (после первой правки селектора) дал 48 / 26 / 26: в
споре участвовало ещё правило `body.mob #ceny .ptable th.lang` из
bloki/12_ceny.css, поэтому в селектор добавлен и раздел `#ceny`. */
body.mob:not(.stranica-home):not(.stranica-ceny)
#ceny .ptab[data-b][data-ppanel="legalizaciya"] .ptable[data-b]
thead th[data-b]:nth-child(1) {
width: 40%;
}
body.mob:not(.stranica-home):not(.stranica-ceny)
#ceny .ptab[data-b][data-ppanel="legalizaciya"] .ptable[data-b]
thead th[data-b]:nth-child(2),
body.mob:not(.stranica-home):not(.stranica-ceny)
#ceny .ptab[data-b][data-ppanel="legalizaciya"] .ptable[data-b]
thead th[data-b]:nth-child(3) {
width: 30%;
}
}
/* ── Пункт 5 мобильного задания 09.09.2026: слова не рвутся ────────────
Дословно: «в мобильной версии редакционных текстов сайта, включая
таблицы, не разрывать слова и не переносить их по слогам. Если слово
не помещается, переносить его целиком на следующую строку. Обычный
перенос строки между словами разрешён. Текст должен оставаться
читаемым, без обрезания и выхода за границы блока».
Что здесь задано: `hyphens: none` запрещает слоговые переносы,
`word-break: normal` - разрыв посреди слова, `overflow-wrap:
break-word` оставляет единственный разрешённый случай: слово, которое
не помещается в строку целиком (иначе оно вылезет за край блока, а
этого Павел тоже не хочет).
Область - редакционный текст и таблицы внутри него на телефоне.
Заголовки, плашки и компоненты со своими правилами переноса не
трогаются: у них свои разделы выше, и они уже приведены к тому же
поведению.
Компьютер не задет: весь раздел под `body.mob`.
Откат: удалить раздел. */
body.mob .rt-tekst,
body.mob .rt-tekst p,
body.mob .rt-tekst li,
body.mob .rt-tekst td,
body.mob .rt-tekst th,
body.mob .tp-tekst p,
body.mob .tp-tekst li,
body.mob .tp-tekst td,
body.mob .tp-tekst th {
hyphens: none;
-webkit-hyphens: none;
word-break: normal;
overflow-wrap: break-word;
}
/* ── Пункт 14 мобильного задания 09.09.2026: кегль серых карточек и ────
описания конвенций на «Апостиле»
Дословно: «в карточках "Министерство юстиции", "Органы ЗАГС",
"Министерство внутренних дел" и "Министерство образования" текст
крупнее обычного редакционного текста - привести его к каноническому
шрифту редакционного блока»; «в разделе о странах и конвенциях
пояснительный текст также увеличен - привести к обычному каноническому
шрифту редакционного текста сайта».
Замер стенда 09.09.2026 (окно 375): канон редакционного текста -
13 / 17,55. В серых карточках раздела «Мы поможем» название ведомства
шло 15 / 700, текст 15 / 400; описания конвенций в блоке «Страны» -
15 / 21,75.
Название ведомства остаётся полужирным - это подпись карточки, Павел
просил поправить размер, а не начертание.
Правило адресовано «Апостилю»: те же компоненты есть на соседних
страницах кластера, но Павел назвал именно эту страницу (общее
требование 9 - «на других страницах такие блоки не менять»).
Откат: удалить раздел. */
body.mob.stranica-apostil #pomozhem .pm-plashka p,
body.mob.stranica-apostil #pomozhem .pm-plashka li {
font-size: 13px;
line-height: 17.55px;
}
body.mob.stranica-apostil #strany .str-panel p,
body.mob.stranica-apostil #strany .str-panel li {
font-size: 13px;
line-height: 17.55px;
}
/* ── Пункты 19 и 20 мобильного задания 09.09.2026: направления ─────────
нефтегаза и нефтесервиса
Дословно (пункт 19, «Технический перевод по направлениям нефтегазовой
отрасли»): «убрать увеличенный размер раскрывающегося текста,
привести его к каноническому редакционному шрифту; раскрывающиеся
списки выровнять по левому краю вместе с маркерами или номерами. Это
отдельное прямое указание для данного блока». Пункт 20 повторяет то же
для направлений нефтесервиса.
Замер стенда 09.09.2026 (окно 375): тело раскрытой плашки 16 точек,
пункты списка 15, выключка по центру. Канон редакционного текста на
телефоне - 13 / 17,55.
Прежняя правка 3.25.2 от 08.09.2026 была написана на класс сетки
`.cards3.kart4`, а у этих блоков сетка `cards3 kart3 v-odin-stolbec
plashki-kanon` - селектор не совпадал, и выключка оставалась по
центру. Теперь адрес - раздел `#napravleniya` на двух названных
страницах.
Названия плашек не трогаются: Павел просил поправить раскрывающийся
текст.
Откат: удалить раздел. */
body.mob.stranica-neftegaz #napravleniya .foldb,
body.mob.stranica-neftegaz #napravleniya .foldb p,
body.mob.stranica-neftegaz #napravleniya .foldb li,
body.mob.stranica-neftegaz #napravleniya .foldb ul,
body.mob.stranica-neftegaz #napravleniya .foldb ol,
body.mob.stranica-nefteservis #napravleniya .foldb,
body.mob.stranica-nefteservis #napravleniya .foldb p,
body.mob.stranica-nefteservis #napravleniya .foldb li,
body.mob.stranica-nefteservis #napravleniya .foldb ul,
body.mob.stranica-nefteservis #napravleniya .foldb ol {
font-size: 13px;
line-height: 17.55px;
text-align: left;
}
/* Маркеры остаются слева от текста, а не висят отдельно: списку задан
собственный отступ под маркер. */
body.mob.stranica-neftegaz #napravleniya .foldb ul,
body.mob.stranica-neftegaz #napravleniya .foldb ol,
body.mob.stranica-nefteservis #napravleniya .foldb ul,
body.mob.stranica-nefteservis #napravleniya .foldb ol {
margin: 0;
padding-left: 20px;
}
/* ── Пункты 19 и 20: описания в «Примерах проектов и переводов» ────────
Дословно (пункт 19): «текст описаний, в том числе про перевод и
локализацию эксплуатационной документации, отображается крупнее
канонического. Привести описания к обычному шрифту редакционного
текста сайта». Пункт 20 просит проверить то же на нефтесервисе - там
замер показал те же 15 / 21,75.
Замер стенда 09.09.2026: описание примера - 15 / 21,75 при каноне
13 / 17,55.
Название примера («Буровая установка») оставлено как есть: Павел
назвал только описания.
Откат: удалить раздел. */
body.mob.stranica-neftegaz .tp-primer-opisanie,
body.mob.stranica-nefteservis .tp-primer-opisanie {
font-size: 13px;
line-height: 17.55px;
}
/* ── Пункты 20, 21, 22 мобильного задания 09.09.2026: H3 меньше H2 ─────
Дословно (пункт 20): «подзаголовок "Перевод нефтесервисной
документации - узкоспециализированная задача" и остальные подзаголовки
блока выглядят крупнее H2. Проверить их уровень и оформление. Если это
вложенные H3, привести их к соответствующему размеру, меньшему, чем
H2». Пункт 21 - то же для «Что такое промышленный перевод», пункт 22 -
для «Особенностей авиационного перевода».
Замер стенда 09.09.2026 (окно 375): H2 раздела - 20 / 700, а H3 внутри
редакционного текста - 21 / 700. Иерархия была перевёрнута.
Ставим 16 / 700 - это канонный H3 мобильной версии (замер того же дня:
«Три варианта проставления апостиля» и другие H3 вне редакционного
текста идут 16 / 700).
Уровни заголовков НЕ меняются: Павел просил «не заменять все H2 на H3
автоматически» - правится только размер. Три страницы названы поимённо,
на других редакционных блоках H3 остаётся прежним (общее требование 9).
Откат: удалить раздел. */
body.mob.stranica-nefteservis .tp-tekst .rt-tekst h3,
body.mob.stranica-promyshlennyj-perevod .tp-tekst .rt-tekst h3,
body.mob.stranica-aviacionnyj-perevod .tp-tekst .rt-tekst h3 {
font-size: 16px;
line-height: 20px;
}
/* ── Пункт 20: первый подзаголовок уходит в скрываемую часть ───────────
Дословно: «в свёрнутом состоянии первый подзаголовок ошибочно остаётся
видимым. Он должен находиться в скрываемой части. Для её открытия
должна отображаться кнопка "Читать далее"».
Замер стенда 09.09.2026: закрытый блок «Технический перевод для
нефтесервиса: специфика и требования» показывал H2 раздела, сразу под
ним H3 «Перевод нефтесервисной документации - узкоспециализированная
задача» и три строки текста - подзаголовок съедал видимую часть.
Кнопка «Читать далее» на месте и работает.
Прячем только ПЕРВЫЙ заголовок закрытого блока и только на этой
странице: в раскрытом виде он возвращается.
Откат: удалить раздел. */
body.mob.stranica-nefteservis .rt-blok:not(.rt-otkryt) .rt-tekst > h3:first-child {
display: none;
}
/* ── Пункт 15: плашки одного ряда одной высоты ─────────────────────────
Дословно: «плашки одного мобильного ряда должны иметь одинаковую
высоту. Если у одной плашки две строки, а у соседней три, обе должны
иметь высоту, достаточную для трёхстрочного названия».
Высоту ряда равняет `grid-auto-rows: 1fr` - строка сетки берёт высоту
самой высокой плашки в этой строке, а не во всём блоке (у сетки
`align-items: stretch` по умолчанию, поэтому плашка дорастает сама).
Только телефон и только этот блок: на компьютере плашки и так стоят
ровно.
Откат: удалить раздел. */
body.mob #otrasli .tp-otrasli {
grid-auto-rows: 1fr;
}
body.mob #otrasli .tp-otrasli .tp-otrasl {
height: 100%;
}
/* ── Пункт 11 мобильного задания 09.09.2026: колонки таблицы на ────────
«Переводе документов на немецкий язык»
Дословно: «в мобильной версии уменьшить ширину левой колонки примерно
на 40 % относительно её текущей ширины. Освободившееся место передать
правой колонке, где значительно больше текста. Это уменьшение текущей
ширины на 40 %, а не указание сделать левую колонку шириной 40 %
таблицы. Десктопную версию оставить как есть».
Замер стенда 09.09.2026 (окно 375): таблица 349 точек, колонки 174 и
174 - ровно пополам, по 50 %. Минус 40 % от текущей ширины даёт
50 % × 0,6 = 30 %, остальные 70 % уходят правой колонке.
Откат: удалить раздел - колонки снова встанут пополам. */
@media (max-width: 760px) {
body.stranica-perevod-documentov-na-nemetskii
.rt-tekst table tr > *:first-child {
width: 30%;
}
body.stranica-perevod-documentov-na-nemetskii
.rt-tekst table tr > *:last-child {
width: 70%;
}
}
/* ── Пункт 16 мобильного задания 09.09.2026: шапка таблицы научного ────
Дословно: «выделить шапку таблицы: "Характеристика", "Научный
перевод", "Художественный перевод". Использовать заметное оформление
шапки с заливкой и полужирным текстом».
Разметка таблицы уже верная - шапка лежит в `thead`. До правки её
заливку и полужирность давало общее правило первой строки, и вместе с
ней красилась первая строка данных («Точность терминологии»). Теперь
правило шапки смотрит на `thead` (раздел выше), а здесь шапка
получает более заметную заливку - ту же, что у шапки прайса
(#d9dbde), чтобы она читалась как шапка, а не как ещё одна строка.
Только «Научный перевод»: Павел назвал эту таблицу поимённо.
Откат: удалить раздел - шапка останется со светлой заливкой #f5f6f8. */
body.stranica-nauchnyj-perevod .rt-tekst table thead th,
body.stranica-nauchnyj-perevod .rt-tekst table thead td {
background: #d9dbde;
font-weight: 700;
}
|