/* ═══════════════════════════════════════════════════════════════════════ Цены на услуги бюро переводов ───────────────────────────── Переключатель видов перевода, карточки тарифов, таблицы цен по языкам, «что входит». ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА. Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы над разными блоками можно было работать одновременно и правки не затирали друг друга. ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ: 1. Пиши сюда только то, что относится к этому блоку. Общее - карточки, тени, ритм между блоками, заголовки разделов - в 00_obshchee.css. 2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает их при равной силе селектора. Но эталонные стили (css/etalon/*) написаны через [data-h] и [data-b] - против них пиши той же формы селектор или сильнее, иначе правило молча проиграет. 3. Каждой правке - комментарий: что меняем, по чьей команде, и строка «Откат: …», чтобы можно было вернуть как было. 4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них ссылается манифест контрольных сумм. 5. Проверять замером на живой странице, а не на глаз. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Флаг перед названием языка ────────────────────────────────────── Заведено 18.08.2026 по диктовке Павла: «письменный перевод, устный перевод - везде должны флаги быть». На действующем сайте флаг стоит прямо в ячейке языка во всех языковых таблицах цен; у строк услуг (апостиль, вёрстка, легализация) флага нет - у нас так же, потому что этих названий нет в справочнике языков. Картинка НЕ своя: это та же полоска, что у бегущей строки подвала - home/static/img/podval/flagi.webp, 56 клеток по 40px (на экране 20px), порядок клеток записан в KLETKI_FLAGOV в home/models.py. Номер клетки приходит из разметки в `--f`, её ставит _imya_s_flagom там же. Один запрос на все флаги страницы вместо полусотни, и подвал с ценами не разъезжаются. Правило продублировано из 16_podval.css намеренно: там селектор привязан к `body footer.podval`, до таблиц цен он не достаёт, а переносить общее правило в 00_obshchee.css нельзя - файл чужой. Появится в справочнике язык с новым флагом - полоску пересобрать и дописать код в KLETKI_FLAGOV; до тех пор язык покажется без флага. Замер: 20x20, сдвиг вниз на 2px - как в подвале, чтобы флаг сидел на строке одинаково в обоих местах. Откат: удалить этот раздел (флаг исчезнет, название останется). */ #ceny .ptable .pflag { display: inline-block; width: 20px; height: 20px; vertical-align: -2px; background-image: url("../../../img/podval/flagi.a72b56925d86.webp"); background-repeat: no-repeat; background-size: 1120px 20px; background-position: calc(var(--f) * -20px) 0; } /* ─────────────────────────────────────────────────────────────────────── Шапка таблицы цен: покрасить, выровнять скругления ───────────────────────────────────────────────── Диктовка Павла 18.08.2026, правки 2 и 3. 2) «Давай каким-нибудь цветом, может быть границами, бордовыми ли, серыми ли - как-нибудь покрасим вот именно этот блок» (строка «Язык · Базовый · Профессиональный · Экспертный» и строка «с языка · на язык»). Образец - действующий сайт academperevod.ru, замер живой страницы: строка-категория - заливка #E1E2E3, текст 16px, начертание 700; служебная строка - заливка #C3C3C3; под шапкой - линия 2px, цвет #911A22 (бордовый). Перекладываем на нашу палитру: строка-категория - #D9DBDE (наш серый, назван Павлом); служебная строка - #C8CBCF (тот же серый на тон темнее - как на действующем, где служебная темнее); линия под шапкой - 2px #8C1821 (наш фирменный бордовый). Данные таблицы не трогаем: красится только thead. 3) «Левый край верхний острый, правый край верхний закруглённый». Причина брака: в glavnaya.css скругление 16px раздаётся списком селекторов, где есть .tarif[data-b] - а класс tarif носят не только карточки тарифов, но и ячейки шапки «Базовый / Профессиональный / Экспертный». Скругление 16px и тень доставались всем трём ячейкам, а «Язык» оставался острым, отсюда разные углы. Скругление и тень с ячеек снимаем и ставим 16px ровно на два верхних угла шапки. Нижние углы прямые: таблица под шапкой продолжается. Откат: удалить весь этот раздел до следующей линии - шапка вернётся к заливке #F5F6F7 без бордовой линии, «Экспертный» снова будет с круглым правым углом и тенью. ─────────────────────────────────────────────────────────────────────── */ /* заливка всей шапки + снятие чужого скругления и тени */ #ceny .ptable[data-b] thead[data-b] th[data-b] { background: #d9dbde; border-radius: 0; box-shadow: none; } /* Служебная строка «с языка / на язык» - на тон темнее. Текст берём тёмно-серым #3D4247 (тот самый --tekst-temno-seryj, которым Павел уже просил набирать направление): на серой заливке прежний #63676C давал контраст 3,5:1 - ниже нормы 4,5:1 для мелкого текста, а тёмно-серый даёт 6,2:1. Размер и начертание остаются прежними, 15px обычным. */ #ceny .ptable[data-b] thead[data-b] th.napr[data-b] { background: #c8cbcf; font-size: 15px; font-weight: 400; color: var(--tekst-temno-seryj, #3d4247); } /* строка-категория: 16px жирным, как на действующем сайте */ #ceny .ptable[data-b] thead[data-b] tr[data-b]:first-child th[data-b] { font-size: 16px; font-weight: 700; color: #1b1b1b; } /* бордовая линия под шапкой: по нижнему ряду шапки и по ячейке «Язык», которая занимает оба ряда сразу (rowspan) */ #ceny .ptable[data-b] thead[data-b] tr[data-b]:last-child th[data-b], #ceny .ptable[data-b] thead[data-b] th.lang[data-b] { border-bottom: 2px solid #8c1821; } /* оба верхних угла шапки - одинаково скруглены, 16px как у карточек */ #ceny .ptable[data-b] thead[data-b] tr[data-b]:first-child th[data-b]:first-child { border-top-left-radius: 16px; } #ceny .ptable[data-b] thead[data-b] tr[data-b]:first-child th[data-b]:last-child { border-top-right-radius: 16px; } /* ─────────────────────────────────────────────────────────────────────── Плюс у карточек тарифов - на одну линию с названием ─────────────────────────────────────────────────── Диктовка Павла 18.08.2026, правка 4: «плюсики стоят чуть ниже, чем слово «Экспертный». Давай поставим их на один уровень со словами «Экспертный», «Профессиональный», «Базовый», чтобы немножко сжать». Замер до правки: верх знака был на 22px ниже верха названия - знак стоял абсолютом в правом нижнем углу карточки (bottom: 2px, right: 2px из общего правила glavnaya.css «один вид на все плюсы»). Убираем у знака абсолютное позиционирование - и он встаёт в ту же строку-флексбокс, что и название, по верхнему краю (у .foldh стоит align-items: flex-start). Сам знак не меняется: коробка 24x24, синий #1646E8, глиф 17px - как у всех плюсов сайта. Правило действует только на карточки тарифов в блоке цен, остальные плюсы остаются в углу. Откат: удалить этот раздел - знак вернётся в правый нижний угол. ─────────────────────────────────────────────────────────────────────── */ #ceny article.tarif[data-b] .pl[data-b] { position: static; align-self: flex-start; /* Оптическая поправка: глиф «+» сидит в своей коробке 24x24 ниже, чем прописные буквы названия в своей строке. По верхнему краю коробки совпадают точно, но на глаз знак уходил вниз на 1,6px на компьютере и на 3,3px на телефоне (там строка ниже). Поднимаем на 2px - после этого середина знака и середина слова расходятся меньше чем на полпикселя. Откат: убрать margin-top. */ margin-top: -2px; } /* Телефон: в шапке таблицы видна только одна колонка тарифа (остальные спрятаны стилями эталона), поэтому правило «скруглить последнюю ячейку» попадало бы в спрятанную - и правый верхний угол снова становился бы острым. Скругляем правый угол у каждой колонки тарифа: видна всё равно одна. На компьютере правило не действует. Откат: удалить этот раздел - на телефоне правый верхний угол шапки станет острым. */ body.mob #ceny .ptable[data-b].naprav thead[data-b] tr[data-b]:first-child th.tarif[data-b], body.mob #ceny .ptable[data-b].cols thead[data-b] tr[data-b]:first-child th[data-c][data-b] { border-top-right-radius: 16px; } /* ═══════════════════════════════════════════════════════════════════════ Диктовка Павла 18.08.2026, вторая тройка правок по блоку цен. Дописано в конец файла, разделы выше (флаги, покраска шапки, плюс на уровне слова) не тронуты - правки сделаны перебивкой. ═══════════════════════════════════════════════════════════════════════ */ /* ── А. Плашка тарифа ниже: высоту задаёт строка названия ──────────────── Павел: «базовый, профессиональный, экспертный - там где плюсики разворачиваются. Плюсики ты поднял на уровень слова, окей, но сами плашки остались высокими. Сократи их - мы же собственно для этого и делаем». Замер свёрнутой плашки до правки - 68px, и все 68 разложились так: 20px поле карточки сверху (.card3 padding 20px 24px, glavnaya.css) 24px строка шапки (.foldh min-height:24px, эталон) - при том что сама строка названия высотой 20,8px (16px x 1,3) 4px отступ под заголовком (.foldwrap margin-bottom) 20px поле карточки снизу Три из четырёх слагаемых - запас под знак «+», который раньше стоял абсолютом в правом нижнем углу: 24px в шапке резервировали высоту коробки знака, а поля 20px держали его в стороне от текста. Знак переехал в строку с названием, запас стал лишним воздухом. Что делаем: 1) min-height шапки снимаем - высоту задаёт строка названия; 2) коробку знака делаем ровно в высоту этой строки (было 24px при строке 20,8px - лишние 3,2px тянули шапку вверх). Высота считается от переменных эталона: calc(--lh-h3 * 1em) при --fs-h3 = 16px даёт 20,8px на компьютере и 17,5px на телефоне, то есть подстраивается сама. Заодно отпадает поправка -2px из раздела выше: она правила именно перекос «глиф центрован в коробке 24px, буквы - в строке 20,8px». Коробка совпала со строкой - центр знака и центр слова сходятся точно, без поправки; 3) отступ 4px под заголовком убираем: у раскрытого тела свой margin-top 6px, гармошка не слипнется, а у свёрнутой плашки эти 4px были чистым воздухом; 4) поля карточки сверху и снизу 20px -> 12px (телефон 14px -> 10px). Боковые поля не трогаем: 24px по бокам держат текст от края. Замер после правки - 44,8px вместо 68px (телефон 37,5px вместо 56px). Откат: удалить пункты А1-А4 - плашка вернётся к 68px. */ /* А1. Запас под знак в шапке снимаем */ #ceny article.tarif[data-b] .foldh[data-b] { min-height: 0; } /* А2. Коробка знака - ровно в высоту строки названия */ #ceny article.tarif[data-b] .pl[data-b] { height: calc(var(--lh-h3, 1.3) * 1em); margin-top: 0; } /* А3. Отступ под заголовком не нужен: у тела гармошки свой margin-top */ #ceny article.tarif[data-b] .foldwrap[data-b] { margin-bottom: 0; } /* А4. Поля карточки сверху и снизу */ #ceny article.tarif[data-b] { padding-top: 12px; padding-bottom: 12px; } body.mob #ceny article.tarif[data-b] { padding-top: 10px; padding-bottom: 10px; } /* ── Б. Флаг в таблицах: мельче на 20% и по центру слова ───────────────── Павел: «флаги - английский, китайский. Во-первых, они находятся чуть выше, чем слово - их нужно отцентровать по центру слова. И сделать процентов на двадцать меньше: сейчас они прям сильно забирают на себя внимание». Замер до правки (строка «Английский», ячейка 15px/18,75px): флаг 20x20, vertical-align -2px; верх флага на 3,0px ВЫШЕ верха строки, центр флага на 2,5px выше центра слова - отсюда «чуть выше» и перетягивание внимания. Размер: 20px -> 16px, ровно -20%, как просил Павел. Пересчёт полоски. Картинка одна на все флаги - home/static/img/podval/flagi.webp, 56 клеток в ряд; номер клетки приходит из разметки в `--f`. И ширина полоски, и сдвиг фона считаются от размера клетки, поэтому меняются обе величины разом: background-size: 56 x 20 = 1120px -> 56 x 16 = 896px; background-position: --f x -20px -> --f x -16px. Меняем что-то одно - в клетке окажется соседний флаг. Центровка. Замер шрифта ячейки: базовая линия на 15,0px от верха строки, строка 18,75px, значит её центр на 5,5px ВЫШЕ базовой линии. Чернила слов «Английский» и «Китайский» идут от +12px над базовой линией до -1px под ней, их центр - те же 5,5px над базовой линией: центр строки и центр слова здесь совпадают. Ставим vertical-align -2,5px: низ флага опускается на 2,5px ниже базовой линии, центр коробки 16px оказывается ровно на 5,5px выше её - в центре слова. Флаг при этом целиком внутри строки (её низ - 3,75px под базовой линией), высота строк таблицы не растёт. Откат: вернуть 20px / 1120px 20px / -20px / -2px. */ #ceny .ptable[data-b] .pflag { width: 16px; height: 16px; vertical-align: -2.5px; background-size: 896px 16px; background-position: calc(var(--f) * -16px) 0; } /* ── В. Примечания под таблицами - во всю ширину блока ─────────────────── Павел: «текст, который идёт после - например, в письменном переводе "Ставки за письменный перевод указаны для одной учётной страницы" - давай расширим на всю страницу, чтобы текст был широкий. Это же касается всех текстов: в переводе личных документов текст тоже нужно сделать широким, сейчас он по центру немножко идёт. И блок "Работа с графикой" в дополнительных услугах - тоже на всю ширину, сейчас почему-то по центру». Держала их колонка сплошного текста из guide.css, раздел 1: `.pnotes { width: min(100%, var(--text-col)); max-width: 832px; margin-inline: auto }`. Правило общее для подзаголовков, FAQ и примечаний; трогать guide.css нельзя (чужой файл), поэтому перебиваем отсюда - ровно для примечаний блока цен. Приём не новый: так же в glavnaya.css расширены вопросы FAQ. Ширина до правки - 832px при блоке 1180px, отступ слева 174px (текст стоял узкой колонкой по центру). После - 1180px, отступ слева 0. Верхний отступ примечания (--sp-3) не трогаем: правим только ширину и боковые поля. Затрагивает четыре вкладки из восьми - только у них есть примечания: письменный перевод, перевод личных документов, легализация, дополнительные услуги («Работа с графикой (Вёрстка)»). У остальных четырёх (устный, синхронный, апостиль, гиды) примечаний нет, правило для них холостое. Откат: удалить этот раздел - примечания вернутся в колонку 832px. */ #ceny .pnotes[data-b] { width: auto; max-width: none; margin-inline: 0; } /* ═══════════════════════════════════════════════════════════════════════ Диктовка Павла 18.08.2026, третья тройка правок по блоку цен: убрать синий, покрасить выбранную вкладку и выбранный тариф, поправить длинные названия языков на телефоне. Дописано в конец файла, разделы выше не тронуты - правки сделаны перебивкой. ═══════════════════════════════════════════════════════════════════════ */ /* ── Г. Синий из знаков раскрытия убран ────────────────────────────────── Павел: «блоки „Цены на услуги перевода“ - здесь почему-то возникает синий цвет. Откуда у нас синий цвет?» Нашли замером: в блоке цен синим светились только знаки «+» у карточек тарифов - span.pl, цвет rgb(22, 70, 232) = #1646E8. Это переменная --cvet-plusa из glavnaya.css, раздел 23: ярко-синий взят из монограммы логотипа и роздан всем знакам раскрытия сайта («один вид на все плюсы»). Больше ничего синего в блоке нет - проверено перебором всех элементов #ceny по color, background и границам. Свой цвет знаку не назначаем, а отдаём ему цвет текста карточки. Тогда он сам держится палитры: на белой карточке будет чёрный #1B1B1B, на выбранной (раздел Е) - белый. Красить в #8C1821 нельзя: на красной заливке знак пропал бы. Правило узкое - только знаки тарифов в блоке цен. Знаки в других блоках остаются как есть, ими занимается общий файл. Оговорка на 18.08.2026: тем же днём в 00_obshchee.css (раздел 4) знаки убраны со всего сайта - вместо них подсветка блока. Значит синего в блоке не видно и без этого правила. Правило всё равно оставлено: оно ничего не ломает, а если знак когда-нибудь вернут, синий с ним не вернётся. Откат: удалить раздел Г - знаки снова станут ярко-синими. */ #ceny article.tarif[data-b] .pl[data-b], #ceny article.tarif[data-b] .pl[data-b]::before { color: inherit; } /* ── Д. Выбранная вкладка вида перевода - фирменным градиентом ─────────── Павел: «та вкладка, которая открыта, подсвечивается красным - таким же, как кнопка с градиентом. А все остальные остаются чёрными на сером фоне». Замер до правки: выбранная вкладка - плоская заливка #2F3336 (эталонный --accent, тёмно-серый), текст белый. Невыбранные - #F5F6F7, текст чёрный, рамка #D9DBDE. Невыбранные не трогаем: замер показывает, что они уже ровно такие, как просит Павел - чёрный текст на сером фоне. Лишнее правило здесь мешало бы общему правилу наведения, которое пишется в 00_obshchee.css. Выбранной отдаём тот же перелив, что у красных кнопок сайта - значения слово в слово из 00_obshchee.css, раздел 2: верх #CB3039, к 34% высоты #8C1821, низ #75121A, постамент снизу #6D131A и светлый блик изнутри. Состояния тоже оттуда: при наведении светлее и на пиксель вверх, при нажатии ещё светлее и вдавливается. Рамку оставляем 1px (цветом низа градиента #75121A), а не снимаем, как у больших кнопок: у вкладок высота считается от рамки, и снятие рамки сдвинуло бы выбранную вкладку на 2px относительно соседних. Замер после правки - 34px и у выбранной, и у невыбранной, как было. Откат: удалить раздел Д - выбранная вкладка снова станет плоской #2F3336. */ #ceny .tabsrow[data-b] .pt[data-b].on { background-color: #8c1821; background-image: linear-gradient(180deg, #cb3039 0%, #8c1821 34%, #75121a 100%); border-color: #75121a; color: #fff; box-shadow: 0 3px 0 0 #6d131a, inset 0 4px 8px 4px rgba(255, 255, 255, .12); transition: background-image .25s, box-shadow .25s, transform .25s; } /* Наведение - только при настоящем курсоре (решение Павла 08.09.2026, правило 4.5 в bloki/00_obshchee.css: на сенсорном экране :hover не отпускает и залипает после касания). Откат: снять @media. */ @media (hover: hover) and (pointer: fine) { #ceny .tabsrow[data-b] .pt[data-b].on:hover { background-image: linear-gradient(180deg, #d93a44 0%, #9a1a23 34%, #82141d 100%); box-shadow: 0 4px 0 0 #6d131a, inset 0 4px 10px 4px rgba(255, 255, 255, .18); transform: translateY(-1px); } } #ceny .tabsrow[data-b] .pt[data-b].on:active { background-image: linear-gradient(180deg, #e5444e 0%, #a81d27 34%, #8d1620 100%); box-shadow: 0 0 0 0 #6d131a, inset 0 4px 8px 4px rgba(255, 255, 255, .22); transform: translateY(2px); } @media (prefers-reduced-motion: reduce) { #ceny .tabsrow[data-b] .pt[data-b].on { transition: none; } #ceny .tabsrow[data-b] .pt[data-b].on:hover, #ceny .tabsrow[data-b] .pt[data-b].on:active { transform: none; } } /* ── Е. Выбранный тариф - белым по фирменному красному ─────────────────── Павел: «базовый, профессиональный, экспертный - при наведении подсвечиваются, при нажатии раскрываются. И если выбран Профессиональный и показываются его цены - он белый на красном фоне, а Базовый и Экспертный - чёрные на белом, в белой кнопке». Наведение здесь не пишем: общее правило «наведение красит блок красным, текст белым» живёт в 00_obshchee.css, дублировать его в блоке нельзя - два правила на одно состояние потом не развести. Здесь только состояние «выбран». Как устроен выбор. Своего признака у карточки нет: раскрытием заведует эталонный сценарий js/etalon/interactive.js - он ставит кнопке-шапке aria-expanded="true" и показывает тело карточки. Значит выбранная карточка = карточка с раскрытой шапкой, и её видно селектором :has(). Своего сценария не заводим - лишний код и лишняя гонка с чужими правками. Про aria-controls в селекторе. В разметке все три карточки приходят с aria-expanded="true" - свёрнутыми их делает тот же сценарий при запуске. Без оговорки все три вспыхнули бы красным до его выполнения. Атрибут aria-controls сценарий проставляет сам, в разметке его нет, поэтому правило включается только после запуска сценария - вспышки не будет. Невыбранные карточки не трогаем: замер показывает белую заливку и текст #1B1B1B - ровно «чёрные на белом», как просит Павел. Внутренности карточки перекрашиваем поимённо: цитата, пояснение к цене, «Что входит» и пункты списка набраны тёмно-серым из 00_obshchee.css (пункты 17-20), и на красном они были бы нечитаемы. Берём чистый белый, а не полупрозрачный: на #8C1821 белый даёт контраст 8,6:1, разбавленный белый выглядит грязным. Заголовок, цена и знак раскрытия цвет наследуют. Браузеры без :has() (старше Chrome 105 / Safari 15.4) правило пропустят - карточки останутся белыми, как сейчас. Ломаться нечему. Откат: удалить раздел Е - раскрытая карточка снова будет белой. */ #ceny article.tarif[data-b]:has(.foldh[data-b][aria-controls][aria-expanded="true"]) { background: #8c1821; color: #fff; } #ceny article.tarif[data-b]:has(.foldh[data-b][aria-controls][aria-expanded="true"]) .quote[data-b], #ceny article.tarif[data-b]:has(.foldh[data-b][aria-controls][aria-expanded="true"]) .tprice[data-b] span[data-b], #ceny article.tarif[data-b]:has(.foldh[data-b][aria-controls][aria-expanded="true"]) .vhod[data-b], #ceny article.tarif[data-b]:has(.foldh[data-b][aria-controls][aria-expanded="true"]) li[data-b] { color: #fff; } /* Телефон: тот же смысл у переключателей под таблицей. «Базовый / Профессиональный / Экспертный» (.tswitch) выбирает, чьи цены показывать в таблице - это и есть слова Павла «выбран Профессиональный и показываются его цены»; .cswitch делает то же в устном, синхронном и гидах. Выбранная кнопка была тёмно-серой #2F3336 - ставим фирменный красный, чтобы «выбран» выглядел одинаково по всему блоку. Невыбранные уже белые с чёрным текстом. Откат: удалить это правило - выбранная кнопка снова станет #2F3336. */ #ceny .tswitch[data-b] button[data-b][aria-pressed="true"], #ceny .cswitch[data-b] button[data-b][aria-pressed="true"] { background: #8c1821; border-color: #8c1821; color: #fff; } /* ── Ж. Телефон: длинные названия языков не вылезают из колонки ────────── Павел: «языки на телефоне пусть остаются - хоть цвет добавляется. Азербайджанский сильно вылазит». Замер на 375: колонка языка 42% = 146,8px, за вычетом полей 134,8px; слово «Азербайджанский» шириной 141,3px - перелезало через линию колонки на 6,6px и налезало на цену. Переносить слово некуда: оно одно, дефисов в нём нет. Горизонтальной прокрутки страницы при этом не было и нет. Правим шириной, а не кеглем: 15px в таблицах Павел ставил отдельной правкой, уменьшать их обратно нельзя. Запас есть у колонок с ценами - там самое широкое число «1 417,5» занимает 56,7px из 89,3px. Отдаём колонке языка 55% (192px, за вычетом полей 180px): «Азербайджанский» встаёт с флагом в одну строку и остаётся 18,8px запаса, а колонкам цен хватает 79px на число (запас 9,8px). 55% - не выдумка: ровно столько стояло в эталоне до того, как его перебили на 42%. Второе правило - страховка от таких же слов в служебных таблицах: «СВЕРХСРОЧНЫЙ» в апостиле вылезал на 22,8px, «нотариальной» в легализации на 8,2px, «листА4.слайд» в дополнительных на 7,9px. Языков это правило не касается - после расширения колонки им переноситься не от чего, - а слишком длинное слово ломает по букве вместо того, чтобы лезть на соседнюю колонку. Замер после правки: ни одна ячейка блока не выходит за свою колонку, ширина страницы 375px без прокрутки. На компьютере правила не работают. Откат: удалить раздел Ж - колонка языка вернётся к 42%, а «Азербайджанский» снова будет налезать на цену. */ body.mob #ceny .ptable[data-b] th[data-b].lang, body.mob #ceny .ptable[data-b] td[data-b].lang { width: 55%; } body.mob #ceny .ptable[data-b] tbody[data-b] th[data-b], body.mob #ceny .ptable[data-b] tbody[data-b] td[data-b] { overflow-wrap: break-word; } /* ═══════════════════════════════════════════════════════════════════════ Диктовка Павла 18.08.2026, правка 15 (телефон): убрать синий с кнопок блока и свести кегли переключателей и таблиц к одному размеру. Дописано в конец файла, разделы выше не тронуты - правки перебивкой. ═══════════════════════════════════════════════════════════════════════ */ /* ── З. Откуда брался синий: цвет кнопок отдан браузеру ────────────────── Павел, второй раз подряд: «сейчас я тебе сказал поменять синий шрифт в таблице устный перевод, синхронный перевод, чёрный на белом сказал, что был чёрный на сером. У тебя остался он синий». И там же: «плашки „Базовый / Профессиональный / Экспертный“ остаются голубыми, голубыми на белом, а та, которая активная, - белая на красном. Неактивные - чёрный шрифт на белом». Почему прошлый поиск синего ничего не нашёл. Искали перебором getComputedStyle по всему блоку в headless chromium - и цвет всех этих кнопок вернулся как rgb(0, 0, 0), чистый чёрный. Он и правда чёрный, но не наш: ни одно правило цвет этим кнопкам НЕ НАЗНАЧАЕТ, и они донашивают браузерное значение ключевого слова `buttontext`. В эталоне у них стоит `font: inherit` - это шрифт, но не цвет; `color` не наследуется у кнопок сам собой. В Chrome `buttontext` = чёрный, поэтому на нашем стенде всё выглядит прилично. В Safari на айфоне то же `buttontext` = системный голубой (#007AFF) - ровно тот «голубой на белом», который видит Павел на телефоне. На стенде такой брак не показывается в принципе, его можно найти только чтением каскада. Кнопки, у которых цвет был отдан браузеру (замер: color = rgb(0,0,0), то есть значение не от нас) - проверено на всех восьми вкладках: · .tabsrow .pt - невыбранные вкладки видов: «Устный перевод», «Синхронный перевод» и остальные шесть; · .tswitch button - «Базовый / Профессиональный / Экспертный» (письменный перевод), кроме нажатой; · .cswitch button - переключатель вида в устном, синхронном, личных документах и гидах, кроме нажатой; · .showall - «Смотреть все языки» / «Свернуть список», есть на пяти вкладках. Всё остальное в блоке цвет получает от нас: #1B1B1B текст, #3D4247 служебные строки, #FFF на красном. Синих значений в блоке нет ни одного - ни в тексте, ни в фоне, ни в рамках, ни в псевдоэлементах. Что делаем: 1) цвет кнопкам назначаем явно - чёрный сайта #1B1B1B у всех ненажатых; нажатая остаётся белой на красном (разделы Д и Е); 2) снимаем родной вид кнопки (appearance: none): на айфоне он тянет за собой и цвет, и лёгкий градиент фона. Внешне ничего не теряем - фон, рамка, скругление и поля у всех четырёх видов кнопок прописаны в эталоне; 3) -webkit-text-fill-color: currentColor - в Safari заливка глифов может остаться системной, даже когда color уже наш. currentColor привязывает её к color, поэтому правило не мешает ни подсветке наведения из 00_obshchee.css (там своё !important), ни белому тексту нажатой кнопки. Правило намеренно НЕ спрятано под body.mob: на планшете Safari (768px и шире) страница считается компьютерной, а голубые кнопки там были бы те же. На компьютере в Chrome видимой разницы нет - чёрный rgb(0,0,0) меняется на чёрный сайта rgb(27,27,27). Откат: удалить пункты З1 и З2 - кнопки снова возьмут цвет у браузера, и на айфоне текст станет голубым. */ /* З1. Кнопки блока цен не донашивают браузерный вид */ body #ceny .tabsrow[data-b] .pt[data-b], body #ceny .tswitch[data-b] button[data-b], body #ceny .cswitch[data-b] button[data-b], body #ceny .showall[data-b] { -webkit-appearance: none; appearance: none; -webkit-text-fill-color: currentColor; } /* З2. Ненажатые кнопки - чёрным шрифтом сайта */ body #ceny .tabsrow[data-b] .pt[data-b]:not(.on), body #ceny .tswitch[data-b] button[data-b]:not([aria-pressed="true"]), body #ceny .cswitch[data-b] button[data-b]:not([aria-pressed="true"]), body #ceny .showall[data-b] { color: #1b1b1b; } /* З3. Телефон: невыбранная вкладка - на белом, а не на сером. Павел про вкладки: «чёрный на белом сказал, что был чёрный на сером». Замер до: фон невыбранной вкладки #F5F6F7 (эталонный --soft). Ставим белый; рамка #D9DBDE остаётся, вкладка не растворяется в странице. Выбранная не трогается - она под красным градиентом из раздела Д. Только телефон: на компьютере полоса вкладок остаётся серой, как принято. Откат: удалить З3 - невыбранные вкладки вернутся к серому #F5F6F7. */ body.mob #ceny .tabsrow[data-b] .pt[data-b]:not(.on) { background-color: #fff; } /* ── И. Телефон: один кегль на переключатели и таблицы - по карточке тарифа ─ ПЕРЕПИСАНО 18.08.2026 вечером, взамен первой редакции этого же раздела. Первая редакция свела всё перечисленное к 16px по плашке «24/7» первого экрана. Павел посмотрел и забраковал, дословно: «В таблицах ты взял и капец как расхерачил шрифты: я тебе сказал сделать ещё меньше, а ты сделал ещё больше. Ещё раз: там, где „Базовый / Профессиональный“ отвечает за раскрытие таблицы, этот шрифт взять из „Базового / Профессионального“, который отвечает за раскрытие описания услуги. Тем же шрифтом нужно написать язык в таблице, названия языков и название таблицы „Базовый / Профессиональный“. Таким же размером - „с языка на язык“ и саму цифру цены, только тёмно-серым, как оно было». Образец теперь другой - шапка карточки тарифа (.foldh, та самая, что раскрывает описание услуги). Замер на 375: кегль 14px, начертание 650, межстрочный 17,5px, цвет #1B1B1B. В эталоне она набрана переменными (font-size: var(--fs-h3); line-height: var(--lh-h3)), а у body.mob --fs-h3 = 14px. Поэтому и здесь пишем var(--fs-h3), а не 14px числом: поменяется образец - за ним сами пойдут вкладки, переключатели и таблицы. Замер на 375, было (вчера) -> стало: вкладки видов .pt 16 -> 14 начертание 650 (как у образца) переключатель тарифа .tswitch 16 -> 14 начертание 400/650 -> 650 переключатель вида .cswitch 16 -> 14 начертание 400/650 -> 650 «Смотреть все языки» .showall 16 -> 14 начертание 400 (не трогаем) шапка «Язык / Базовый / …» 16 -> 14 начертание 700 -> 650 названия языков и услуг (th) 16 -> 14 начертание 700 -> 650 «с языка / на язык» 16 -> 14 начертание 400, цвет прежний цены и данные ячеек (td) 16 -> 14 цвет #1B1B1B -> #3D4247 Про начертание. Павел развёл две вещи: «тем же ШРИФТОМ» - язык, названия языков и шапка таблицы (и переключатель тарифов, с которого он взял образец), «таким же РАЗМЕРОМ» - «с языка / на язык» и цена. Поэтому 650 от образца получают только первые. Цены, направление и «Смотреть все языки» остаются обычными (400): полужирные цифры в каждой строке таблицы читаются тяжело, и Павел про них сказал именно «размером». На Windows разницы между 650 и 700 не видно (Segoe UI подставляет ближайшее доступное - Bold), на айфоне SF Pro отрисует ровно 650 - тот же вес, что у образца. Про тёмно-серый у цен. «Как оно было» замерами не подтверждается: цена в ячейке всегда была чёрной - и у нас, и на действующем сайте. Проверено по двум снятым замерам: C:\Users\Павел\Claude\Projects\Вебсайт\shrifty_elementov.json - действующий сайт, «Ячейка таблицы цен»: 13px, обычное, rgb(27, 27, 27); C:\Users\Павел\Claude\Projects\Вебсайт\shrifty_mobilnye.json - наш стенд, «Ячейка таблицы»: 16px, 400, #1B1B1B. Серый в этой таблице был ровно один - #3D4247 у строки «с языка / на язык», и в тех же отчётах он назван тёмно-серым. Его и берём: это фирменный тёмно-серый текста сайта, переменная --tekst-temno-seryj из glavnaya.css. Контраст на белом 10,4:1 - норма для мелкого текста с большим запасом. Только телефон. На компьютере всё остаётся как было (15px в таблицах, 16px в шапке, цена чёрная): там ширины хватает, а Павел смотрел телефон. Замер на 1440 до и после правки совпадает до значения. Откат: удалить раздел И - вернутся эталонные 12/15px и разнобой кеглей, из-за которого правка и затевалась. Откат к вчерашней редакции (всё по 16px) - заменить var(--fs-h3) на 16px в И1-И6 и снять И7-И8. */ /* И1. Названия вкладок - в кегль образца. Начертание у них уже 650. */ body.mob #ceny .tabsrow[data-b] .pt[data-b] { font-size: var(--fs-h3); } /* И2. Переключатели тарифа и вида - шрифт образца целиком: Павел прямо сказал взять его с плашек «Базовый / Профессиональный». Нажатая кнопка была 650 и раньше, ненажатые подтягиваются к ней. */ body.mob #ceny .tswitch[data-b] button[data-b], body.mob #ceny .cswitch[data-b] button[data-b] { font-size: var(--fs-h3); font-weight: 650; } /* И3. «Смотреть все языки» - кегль образца (чёрный на белом - пункт З2) */ body.mob #ceny .showall[data-b] { font-size: var(--fs-h3); } /* И4. Тело таблицы: названия языков, цены, служебные ячейки. Кегль ставится ячейкам, а не таблице: в glavnaya.css (раздел 21-28) стоит `.blk table th, .blk table td, .blk .showall { font-size: 15px }` - правило на сами ячейки, и размер, заданный таблице, до них не доходит. */ body.mob #ceny .ptable[data-b] th[data-b], body.mob #ceny .ptable[data-b] td[data-b] { font-size: var(--fs-h3); } /* И5. Служебная строка «с языка / на язык»: раздел «покраска шапки» выше задаёт ей 15px селектором сильнее, чем И4 - перебиваем отдельно. Цвет и начертание там же и остаются (#3D4247, обычное). */ body.mob #ceny .ptable[data-b] thead[data-b] th.napr[data-b] { font-size: var(--fs-h3); } /* И6. Шапка-категория «Язык / Базовый / Профессиональный / Экспертный». Раздел «покраска шапки» выше держит её на 16px полужирными по действующему сайту - на компьютере так и остаётся, а на телефоне отдаём шрифт образца. */ body.mob #ceny .ptable[data-b] thead[data-b] tr[data-b]:first-child th[data-b] { font-size: var(--fs-h3); font-weight: 650; } /* И7. Названия языков и услуг в первой колонке - тем же начертанием. В теле таблицы это ячейки th, и жирность 700 им даёт браузер, а не мы. */ body.mob #ceny .ptable[data-b] tbody[data-b] th[data-b] { font-weight: 650; } /* И8. Цены и остальные данные ячеек - фирменным тёмно-серым. Названия языков и услуг (th) остаются чёрными: серым красятся данные. */ body.mob #ceny .ptable[data-b] tbody[data-b] td[data-b] { color: var(--tekst-temno-seryj, #3d4247); } /* ── И9. Перенос в шапке таблицы: со знаком, а не по букве ──────────────── Правило из вчерашней редакции оставлено, но работать оно теперь начинает только на узких экранах. Замер «Профессиональный» - самое длинное слово шапки (слово / место в ячейке): 375px, вчера 16px 170 / 145 - не влезало, перенос был обязателен; 375px, сегодня 14px 142 / 145 - влезает, запас 3px, правило холостое; 320px, сегодня 14px 142 / 120 - не влезает, перенос снова нужен. Поэтому правило не выброшено: на телефонах Павла (375 и шире) оно молчит, а на узких 320-360 удерживает слово внутри колонки. Одним переносом по букве не обойтись: получалось «Профессиональн / ый» - разрыв посреди слова без знака, читается как опечатка. Поэтому вместе с break-word включаем словарный перенос: в документе стоит lang="ru", и браузер ломает слово по слогам со знаком - «Профессиональ- / ный». Приставка -webkit- нужна для Safari, там свойство до сих пор с ней. Перенос ограничен по длине слова - hyphenate-limit-chars: 14 8 4, то есть «переносить только слова от 14 букв, не меньше 8 букв до знака и 4 после». Без ограничения браузер начинал переносить и там, где обошёлся бы пробелом: шапка устного превращалась в «Стоимость ми- / нимального за- / каза». Слова короче 14 букв («легализации» на 320px) при нехватке места ломаются по букве от break-word - это редкий случай самых узких экранов. Откат: удалить И9 - на 320px «Профессиональный» вылезет за свою колонку. */ body.mob #ceny .ptable[data-b] thead[data-b] th[data-b] { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 8; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 14 8 4; } /* ── И10. Переключатель тарифов снова в строку ──────────────────────────── Вчера из-за кегля 16px переключатель «Базовый / Профессиональный / Экспертный» пришлось выстроить в столбик: слова не помещались в колонки и рвались по букве («Профессиональны / й»). С кеглем образца 14px нужда отпала - возвращаем строку. Замер на 375 (слово / место в кнопке): Базовый 60,7 / 88 запас 27,3 Профессиональный 142,0 / 155 запас 13,0 Экспертный 87,5 / 88 запас 0,5 Высота полосы 110px -> 34px, экран заметно короче. Но запас у «Экспертного» - полпикселя, и это на нашем Segoe UI. На айфоне рисует SF Pro, ширина букв другая, и полпикселя может не хватить - вернётся ровно тот брак, из-за которого столбик и появился. Поэтому колонки считаем не долями (в эталоне 27% / 46% / 27%), а по содержимому: боковым кнопкам - ровно по их слову (auto), середине - весь остаток (1fr). Тогда «Базовый» и «Экспертный» не могут не поместиться по построению, а у длинного «Профессионального» запас растёт с 13 до ~33px. Замер после: 66,7 / 181,2 / 93,5, полоса по-прежнему во всю ширину, высота те же 34px. Узкие экраны. На 320px в строку не встают ни «Профессиональный» (142 против 129), ни «Экспертный» (87,5 против 73) - там столбик остаётся. Порог 360px: на 360 самая узкая раскладка ещё держит все три слова с запасом, ниже - нет. Откат: удалить И10 - вернутся эталонные 27% / 46% / 27% на любой ширине, и на узких экранах слова снова порвутся по букве. */ body.mob #ceny .tswitch[data-b] { grid-template-columns: auto 1fr auto; } @media (max-width: 359.98px) { body.mob #ceny .tswitch[data-b] { grid-template-columns: 1fr; } } /* ── К. Таблицы цен на белом поле - пункт 29 диктовки ───────────────────── Павел 18.08.2026: «сейчас такие вещи, как таблицы языков, прозрачная, потому что дальше „как получить готовый перевод“ тоже прозрачная - так не должно быть, они должны быть на белом фоне, соответственно с закруглёнными полями». Первым кругом фон получил только блок «Как получить»; проверка 19.08 поймала, что таблицы остались прозрачными: у `.tscroll`, `.ptable`, шапки и строк фон `rgba(0,0,0,0)`, и сквозь них видна суша шара `#eef0f2` - на компьютере это 15 % площади таблицы. Образец фона взят с карточек этой же страницы (`.card3`, `.anketa`, `#faq .q`): белый, скругление 16px, тень переменной `--tenj-bloka`. Так таблица встаёт в один ряд с остальными блоками, а не выглядит заплаткой. Скругление вешаем на обёртку прокрутки, а не на саму таблицу: у таблицы свои границы ячеек, и радиус на ней углы не скругляет. Обёртке нужен `overflow: hidden`, иначе углы первой и последней строки торчат наружу - но по горизонтали прокрутка таблице нужна, поэтому `overflow-x: auto` ставится обратно. Откат: удалить раздел К - таблицы снова станут прозрачными. */ body #ceny .tscroll { background: #fff; border-radius: 16px; box-shadow: var(--tenj-bloka, 0 10px 20px 0 rgba(21, 72, 137, .08)); overflow: hidden; overflow-x: auto; } /* Сама таблица фон не красит - он идёт от обёртки; но строки должны быть непрозрачными, иначе подложка просвечивает сквозь них поверх белого. */ body #ceny .tscroll .ptable, body #ceny .tscroll .ptable thead, body #ceny .tscroll .ptable tbody, body #ceny .tscroll .ptable tr { background-color: transparent; } /* ═══════════════════════════════════════════════════════════════════════ Кегль 13 и таблицы цен (диктовка Павла 20.08.2026) ═══════════════════════════════════════════════════════════════════════ Правки из книги замера «ШРИФТЫ_МОБИЛЬНЫЕ применить на стр. О компании» и отдельного списка Павла по таблицам цен. Число кегля - переменная --kegl-melkij, задана в C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css Все правила под гейтом body.mob: книга замера снята на 375x812, компьютерный вид блока цен не меняется. ═══════════════════════════════════════════════════════════════════════ */ /* Цвет линий таблиц цен. Родной цвет границ на белом почти не читается - Павел: «Границы между ячейками сделать более тёмным серым цветом, чтобы разделение хорошо читалось». */ body.mob #ceny { --linia-tablic-cen: #9aa0a6; } /* ── Ц1. Мелкий текст блока цен - 13px ──────────────────────────────────── Было: цитата в карточке тарифа 13,5px, приписка у цены 12px, «Что входит» 12px, пункты списка 13,5px, «Смотреть все языки» / «Свернуть список» 14px, примечания под таблицами 13,5px. Веса. У «Смотреть все языки» селектор тот же, что в разделе И3 выше по файлу, - перебивает порядком. У остальных выигрывали эталонные правила без идентификатора (.card3[data-b] p[data-b], .tprice[data-b] span[data-b], .vhod[data-b], .lst[data-b] li[data-b], .pnotes[data-b] p[data-b]) - здесь селекторы идут через #ceny и перебивают их идентификатором, без !important. Откат: удалить Ц1. ─────────────────────────────────────────────────────────────────────── */ body.mob #ceny .tarif .quote, body.mob #ceny .tarif .tprice span, body.mob #ceny .tarif .vhod, body.mob #ceny .tarif .lst li, body.mob #ceny .pnotes p { font-size: var(--kegl-melkij); } body.mob #ceny .showall[data-b] { font-size: var(--kegl-melkij); } /* ── Ц2. Подзаголовок блока цен - 13px, чёрным и жирным ─────────────────── Павел: «Сделать 13. Черный, жирный» - строка «Все цены указаны в рублях». Было 12px, начертание 400, цвет тёмно-серый #3D4247. Кегль и начертание держало эталонное .sub[data-b] (0,2,0), цвет - glavnaya.css `#ceny > p[data-b]` (1,1,1). Здесь (1,3,2) - перебивает оба без !important. Откат: удалить Ц2. ─────────────────────────────────────────────────────────────────────── */ body.mob #ceny > p.sub[data-b] { font-size: var(--kegl-melkij); font-weight: 700; color: #1b1b1b; } /* ── Ц3. Шапка таблиц: один серый и всё по центру ───────────────────────── Павел, заливка: «Сейчас ячейки „С языка“ и „На язык“ выделены более тёмной заливкой. Убрать это выделение и сделать одинаковый серый фон у всей шапки таблицы». Служебная строка направлений была на тон темнее (#C8CBCF против #D9DBDE у остальной шапки) - равняем на общий серый. Павел, выключка: «Слово „Язык“ расположить по центру ячейки по горизонтали и по вертикали» и отдельно: «Во всех таблицах раздела с ценами нужно выровнять по центру содержимое серой шапки… Все элементы шапки выровнять по центру по горизонтали и вертикали». Правило одно на все восемь вкладок: «Язык» в письменном, устном и синхронном, столбцы личных документов и апостиля, «Этап легализации», «Услуга» в дополнительных услугах. Тело таблицы не трогаем: названия языков в первой колонке остаются по левому краю. Веса. Заливку держал раздел «покраска шапки» выше по файлу, селектор `#ceny .ptable[data-b] thead[data-b] th.napr[data-b]` (1,5,2) - здесь (1,5,3), перебивает. Выключку держали эталонное `.ptable[data-b] th[data-b].lang` (0,4,1) и guide.css `.ptable[data-b].naprav th[data-b].lang` (0,5,1) - идентификатор #ceny сильнее обоих. !important не нужен. Откат: удалить Ц3 - строка направлений снова станет темнее, а «Язык» вернётся к левому верхнему углу. ─────────────────────────────────────────────────────────────────────── */ body.mob #ceny .ptable[data-b] thead[data-b] th[data-b] { background-color: #d9dbde; text-align: center; vertical-align: middle; } /* ── Ц4. Границы таблиц - более тёмным серым ────────────────────────────── Павел: «Границы между ячейками сделать более тёмным серым цветом, чтобы разделение хорошо читалось. Внешнюю границу таблицы также сделать этим же более тёмным серым цветом». Бордовая линия под шапкой (2px #8C1821) оставлена: её Павел не правил, она отделяет шапку от данных. Общая покраска границ её бы съела - поэтому вторым правилом бордовый цвет возвращается нижней грани шапки. Оба правила без !important: у покраски вес (1,5,3), у возврата бордового (1,6,3) - строго сильнее. Внешняя граница вешается на обёртку прокрутки .tscroll, а не на саму таблицу: у обёртки скругление 16px и overflow: hidden, и рамка на ней ложится ровно по закруглению. Откат: удалить Ц4 - границы вернутся к цвету текста. ─────────────────────────────────────────────────────────────────────── */ body.mob #ceny .ptable[data-b] th[data-b], body.mob #ceny .ptable[data-b] td[data-b] { border-color: var(--linia-tablic-cen); } body.mob #ceny .ptable[data-b] thead[data-b] th.napr[data-b], body.mob #ceny .ptable[data-b] thead[data-b] tr[data-b]:last-child th[data-b], body.mob #ceny .ptable[data-b] thead[data-b] th.lang[data-b] { border-bottom-color: #8c1821; } body.mob #ceny .tscroll { border: 1px solid var(--linia-tablic-cen); } /* ── Ц5. Переключатель тарифов: одинаковые отступы у трёх кнопок ────────── Павел: «В переключателе тарифов „Базовый“, „Профессиональный“, „Экспертный“ нужно выровнять внутренние горизонтальные отступы. Сейчас у кнопки „Профессиональный“ расстояние от текста до левого и правого края больше. Установить одинаковые отступы слева и справа для всех трёх кнопок. Ширина кнопок может различаться из-за длины названий». Причина брака: полоса была сеткой «auto 1fr auto» (раздел И10 выше по файлу), и весь свободный запас строки доставался средней кнопке - «Профессиональный» получал 181px на 142px текста, а соседи вставали ровно по своему слову. Сетка меняется на строку-флексбокс: во флексбоксе кнопка по умолчанию ровно по содержимому, поэтому запас слева и справа у всех трёх один и тот же - тот, что задан отступом. Отступ 4px вместо эталонных 2px: Павел просил не «побольше», а «одинаковые», а на 2px слово почти упиралось в рамку. Больше 4px брать нельзя - при 6px три кнопки уже не помещаются в строку на 360px (замер: нужно 340,2px при 334,4 доступных), и «Экспертный» уезжает на вторую строку. Перенос строки разрешён намеренно. Замер: в один ряд полоса встаёт на 360, 375 и 414px (нужно 328,2px при 334,4 доступных на 360px). Если на айфоне запаса не хватит - там рисует SF Pro, буквы шире, - полоса перенесёт «Экспертный» на вторую строку, но за край экрана не полезет. На экранах уже 360px остаётся столбик, как и было в разделе И10: во флексбоксе это направление column, кнопки тянутся во всю ширину так же, как тянулись в сетке 1fr. Промежуток между кнопками не задаём - он берётся у эталонной полосы (4px), чтобы правка не меняла ритм. ВНИМАНИЕ: раздел И10 выше по файлу этой правкой перекрыт. Его grid-template-columns на флексбоксе не действуют, но строки оставлены - они и есть откат: удалить Ц5, и полоса вернётся к сетке И10. ─────────────────────────────────────────────────────────────────────── */ body.mob #ceny .tswitch[data-b] { display: flex; flex-wrap: wrap; justify-content: center; } body.mob #ceny .tswitch[data-b] button[data-b] { padding-left: 4px; padding-right: 4px; } @media (max-width: 359.98px) { body.mob #ceny .tswitch[data-b] { flex-direction: column; } } /* ═══════════════════════════════════════════════════════════════════════ Ц6. Таблицы цен и кнопки видов перевода - принято с «О компании» ═══════════════════════════════════════════════════════════════════════ ОТКУДА ПРИЕХАЛО. 21.08.2026 Павел принял вид страницы «О компании» как окончательный: «сейчас у нас эталонная, где все корректировки приняты, сделаны, проверены - это страница „О компании“. Давай перенесём всё на главную». Правила ниже переехали сюда из примерочного слоя C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\test_o_kompanii.css Слой удалён целиком, вместе со строкой подключения в home_page.html. ЧТО ИЗМЕНИЛОСЬ ПРИ ПЕРЕЕЗДЕ. Только приставка селектора: было «body.stranica-o-kompanii», стало «body». Вес каждого правила упал ровно на один класс, и этого хватает: файл подключается после эталона, а внутри файла правила стоят последними, поэтому при равном весе побеждают они. Числа, свойства и порядок не тронуты. Задания, по которым правки делались: C:\Users\Павел\Claude\Projects\Вебсайт\ЗАДАНИЕ_О_КОМПАНИИ_20.08.md C:\Users\Павел\Claude\Projects\Вебсайт\ЗАДАНИЕ_ШАПКА_И_LENTY_21.08.md ═══════════════════════════════════════════════════════════════════════ */ /* ── Ц6.1. Цвет линий таблиц цен на всех ширинах ───────────────────────── Родной цвет границ (--line) на белом почти не читается. Павел: «Границы между ячейками сделать более тёмным серым цветом, чтобы разделение хорошо читалось». Число то же, что уже было принято для телефона в разделе К этого файла: #9AA0A6. Контраст к белому 2,5:1 - для разделительной линии достаточно, а серым остаётся серым, таблица не превращается в сетку из чёрных линий. Раздел К задаёт эту переменную под «body.mob». Здесь она задаётся без гейта, то есть и на компьютере тоже; на телефоне оба объявления совпадают значение в значение, спорить нечему. Откат: удалить Ц6.1-Ц6.4 - таблицы вернутся к прежнему бледному разделению на компьютере. */ body #ceny { --linia-tablic-cen: #9aa0a6; } /* ── Ц6.2. Шапка таблиц одного серого тона, всё по центру ──────────────── Павел, заливка: «Сейчас ячейки „С языка“ и „На язык“ выделены более тёмной заливкой. Убрать это выделение и сделать одинаковый серый фон у всей шапки таблицы». Служебная строка направлений была на тон темнее - #C8CBCF против #D9DBDE у остальной шапки; равняем на общий #D9DBDE. Павел, выключка: «Все элементы шапки выровнять по центру по горизонтали и вертикали». Одно правило закрывает все восемь вкладок сразу: «Язык» в письменном, устном, синхронном, личных документах и гидах, столбцы апостиля, «Этап легализации» в легализации, «Услуга» в дополнительных услугах. Тело таблицы намеренно не трогается: названия языков и услуг в первой колонке остаются по левому краю, как были. Что перебиваем: · #ceny .ptable[data-b] thead[data-b] th.napr[data-b] (1,5,2) из раздела «покраска шапки» этого файла - тёмная заливка служебной строки; · .ptable[data-b] th[data-b].lang (0,4,1) из эталона и .ptab[data-b][data-ppanel=apostil] .ptable[data-b] th[data-b]:first-child (0,7,2) оттуда же - выключка влево у первой колонки; · vertical-align: top из эталонного .ptable[data-b] th[data-b]. ПОЧЕМУ У #ceny ДОПИСАН [data-b]. Без него вес был бы (1,4,3), а у правила про .napr - (1,5,2): по числу классов оно сильнее, и служебная строка направлений осталась бы тёмной (замер поймал: #C8CBCF вместо #D9DBDE). С атрибутом вес (1,5,3) - тот же, что был у примерочного слоя с приставкой страницы, и правило снова побеждает. */ body #ceny[data-b] .ptable[data-b] thead[data-b] th[data-b] { background-color: #d9dbde; text-align: center; vertical-align: middle; } /* ── Ц6.3. Границы между ячейками - более тёмным серым ─────────────────── Красится border-color, а не border целиком: толщина и стиль линий эталонные (1px solid), их Павел не правил. Бордовая линия под шапкой (2px #8C1821, раздел «покраска шапки» выше по файлу) оставлена - она отделяет шапку от данных, и общая покраска её бы съела. Поэтому вторым правилом бордовый возвращается нижней грани шапки: у служебной строки направлений, у нижнего ряда шапки и у ячейки «Язык», которая занимает оба ряда сразу (rowspan). */ body #ceny .ptable[data-b] th[data-b], body #ceny .ptable[data-b] td[data-b] { border-color: var(--linia-tablic-cen); } body #ceny .ptable[data-b] thead[data-b] th.napr[data-b], body #ceny .ptable[data-b] thead[data-b] tr[data-b]:last-child th[data-b], body #ceny .ptable[data-b] thead[data-b] th.lang[data-b] { border-bottom-color: #8c1821; } /* ── Ц6.4. Внешняя рамка таблицы - тем же тёмным серым ─────────────────── Рамка вешается на обёртку прокрутки .tscroll, а не на саму таблицу: у обёртки скругление 16px и overflow: hidden (раздел К выше по файлу), и рамка на ней ложится ровно по закруглению. На самой таблице углы бы не скруглились - у неё свои границы ячеек. Ширину страницы рамка не двигает: .tscroll - блок во всю ширину колонки, 2px рамки съедаются его же шириной, горизонтальной прокрутки не появляется (проверено замером на 375 и 1440). */ body #ceny .tscroll { border: 1px solid var(--linia-tablic-cen); } /* ── Ц6.5. Одна высота у всех восьми кнопок видов перевода ─────────────── Задание от 21.08.2026, пункт «З». Речь о полосе .tabsrow в разделе #ceny - восемь переключателей вида перевода: «Письменный перевод», «Устный перевод», «Синхронный перевод», «Перевод личных документов», «Апостиль», «Легализация», «Гиды-переводчики», «Дополнительные услуги». Что просил Павел: компьютер - одна высота у всех, «под высоту кнопок „Онлайн-заявка“, „Калькулятор заказа“ и переключателя „Частным клиентам“»; одна ширина у всех, «по самой длинной надписи, „Перевод личных документов“»; не помещается в ряд - переносить во второй ряд; телефон - раскладку (сетка 2 колонки) не трогать, но высоту сделать одинаковой: было 49,81 у двухсловных надписей против 34 у однословных. Замер до правки (1440, полоса содержимого 1180): высота у всех 34; ширины 192,25 / 149,17 / 190,03 / 247,84 / 98,84 / 123,58 / 171,38 / 212,67 - то есть все восемь разной ширины. ВЫСОТА 3,2rem. Замер образцов: «Онлайн-заявка» и «Калькулятор заказа» - min-height 51,2px, по факту 51,19px (шрифт 16px, интерлиньяж 24,8px, отступы 12,8px сверху и снизу). 3,2rem при корневом кегле 16px даёт ровно эти 51,2px, поэтому пишем в rem, а не в дробных пикселях. ПОЧЕМУ ЧЕРЕЗ min-height И С НУЛЕВЫМИ ВЕРТИКАЛЬНЫМИ ОТСТУПАМИ. Так высота гарантированно одна и та же в обоих случаях: и когда надпись в одну строку (работает min-height), и когда в две (телефон: 2 x 17,92 = 35,84 спокойно умещаются внутрь 51,2). Останься отступы 6px сверху и снизу, две строки на компьютере дали бы 53px и равенство сломалось бы. Надпись ставится по центру флексбоксом. Перебивается min-height:34px из эталона C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\etalon\glavnaya-b.css и отступы var(--sp-2) оттуда же. Пункт И1 выше по файлу правит у этих же кнопок только кегль, спорить нечему. Откат: удалить Ц6.5 и Ц6.6 - кнопки вернутся к разнобою. */ body #ceny .tabsrow[data-b] .pt[data-b] { min-height: 3.2rem; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; } /* ── Ц6.6. Одна ширина и перенос во второй ряд - только компьютер ──────── Гейт «:not(.mob)» обязателен: на телефоне (класс mob ставится при ширине экрана до 640px сценарием C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\etalon\auto_mob.js) полоса .tabsrow - сетка из двух колонок, и Павел просил её не трогать. ШИРИНА 15,75rem (252px). Самая длинная надпись «Перевод личных документов» в один ряд занимает 247,84px вместе с отступами 12px и рамкой 1px. Начертание у выбранной и невыбранной кнопки одинаковое (650), поэтому ширина не скачет при переключении - проверено замером. Взят запас 4px: при точном 248px хватило бы 0,16px, и любое отличие в отрисовке шрифта уронило бы надпись на вторую строку. СКОЛЬКО КНОПОК В РЯД. В полосе 1180 при зазоре 6px помещается 4 x 252 + 3 x 6 = 1026px, пятая уже не влезает (1284). Значит два ряда по четыре - ровные колонки, оба ряда одинаковой ширины. Это отменяет решение прошлого круга, где кнопки оставили своего размера со ссылкой на нехватку места: Павел разрешил второй ряд. Сама полоса и так flex с переносом и выключкой по центру (эталон glavnaya-b.css), поэтому второй ряд получается сам собой, как только у кнопок появляется фиксированная ширина. Свойства полосы повторены явно - так правило не зависит от того, что с полосой сделают выше по файлу. */ body:not(.mob) #ceny .tabsrow[data-b] { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } body:not(.mob) #ceny .tabsrow[data-b] .pt[data-b] { flex: 0 0 auto; width: 15.75rem; max-width: 100%; } /* ── Ц6.7. Восемь кнопок видов перевода: овал ──────────────────────────── Часть общей правки «форма и размер всех кнопок» (задание 4, второй круг). Остальные кнопки сайта получили и форму, и размер 240 x 51,2 - разбор и перечень в разделе «Форма и размер всех кнопок» файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css Этим восьми даётся ТОЛЬКО форма: они стоят одним рядом в полосе 1180 и уже сейчас переносятся на две строки. При 240 точках на каждую ряду нужно 1920 - это три строки вместо двух, и таблица цен разъезжается. Павел разрешил прямо: «если размер не позволяет - можно делать её такой, как позволяет размер». Правило живёт здесь, а не в 00_obshchee.css, потому что оно про блок цен: рядом стоят Ц6.5 и Ц6.6, которые задают этим же кнопкам высоту и ширину, и все три числа читаются в одном месте. Перебивается border-radius:6px из эталона .pt[data-b] (0,2,0), здесь вес (1,1,1). Откат: удалить правило - вернутся скруглённые прямоугольники. */ body #ceny .pt { border-radius: 999px; }