/* ═══════════════════════════════════════════════════════════════════════ Нам не всё равно, какой перевод Вы получите ─────────────────────────────────────────── Текстовый блок с картинкой в пропорции 30/70 и кнопкой «Читать полностью». ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА. Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы над разными блоками можно было работать одновременно и правки не затирали друг друга. ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ: 1. Пиши сюда только то, что относится к этому блоку. Общее - карточки, тени, ритм между блоками, заголовки разделов - в 00_obshchee.css. 2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает их при равной силе селектора. Но эталонные стили (css/etalon/*) написаны через [data-h] и [data-b] - против них пиши той же формы селектор или сильнее, иначе правило молча проиграет. 3. Каждой правке - комментарий: что меняем, по чьей команде, и строка «Откат: …», чтобы можно было вернуть как было. 4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них ссылается манифест контрольных сумм. 5. Проверять замером на живой странице, а не на глаз. ═══════════════════════════════════════════════════════════════════════ */ /* ── Правка 18.08.2026, диктовка Павла ───────────────────────────────── Что просили: 1. Свёрнуто - видны первые ЧЕТЫРЕ строки текста во всю ширину страницы, под ними кнопка «Читать полностью» у левого края. 2. Раскрыто - страница делится примерно 30/70: слева картинка, справа полный текст. 3. Картинка появляется ТОЛЬКО при раскрытии. Образец - действующий сайт academperevod.ru, блок section.huge: .huge-inner - flex, .huge-image - 40% ширины, .huge-content - 60% с отступом слева 35px; при свёрнутом тексте картинка схлопывается в ноль (класс .hide-img). У нас пропорция 30/70, как продиктовал Павел, отступ текста от картинки - var(--card-gap) = 30px. Раскрытием управляет эталонный сценарий js/etalon/interactive.js: он вешает классу секции #kachestvo класс .kach-open и меняет надпись на кнопке. Ничего нового заводить не пришлось, наблюдателей нет. Откат: удалить всё ниже этой шапки до конца файла и вернуть в шаблоне home_page.html обёртку .kachestvo-obrez (абзацы лежали прямо в .kachestvo-tekst). ────────────────────────────────────────────────────────────────────── */ /* 1. Текст блока идёт во всю ширину. guide.css сужает любой .long до колонки чтения (width: min(100%, var(--text-col)) и margin-inline: auto) - для этого блока сужение снимаем, иначе «во всю ширину» не получится. Откат: удалить правило. */ .kachestvo-tekst[data-b] .long[data-b] { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } /* 2. Абзацы после первого показываем всегда. В эталоне glavnaya-b.css они спрятаны (.long.more{display:none}) и открываются целиком по кнопке. Нам нужно не «первый абзац», а «первые четыре строки», поэтому текст идёт сплошным потоком, а лишнее срезает обрезка из правила 3. Откат: удалить правило - вернётся показ одного первого абзаца. */ .kachestvo-tekst[data-b] .long[data-b].more { display: block; } /* 3. Свёрнутое состояние - ровно четыре строки. Обрезка стоит на обёртке .kachestvo-obrez, а не на всей колонке текста: кнопка лежит рядом с обёрткой и поэтому не срезается вместе с текстом. line-clamp считает строки, а не пиксели, поэтому отступы между абзацами не сбивают счёт и последняя строка не разрезается пополам. Откат: удалить правило - текст будет виден целиком. */ #kachestvo:not(.kach-open) .kachestvo-obrez[data-b] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } /* 4. Свёрнуто - одна колонка во всю ширину. glavnaya.css держит здесь сетку 30/70 постоянно; пока текст свёрнут, колонок быть не должно. Откат: удалить правило. */ #kachestvo:not(.kach-open) .kachestvo-ryad[data-b] { display: block; } /* 5. Раскрыто - две колонки 30/70, картинка слева, текст справа. Доли считаются от всей ширины ряда (30% и 70%), а промежуток между колонками сделан внутренним отступом текста - так пропорция остаётся ровно 30/70, а не «30/70 от остатка после промежутка». Откат: удалить правило - вернётся сетка из glavnaya.css (30fr/70fr с промежутком 30px). */ #kachestvo.kach-open .kachestvo-ryad[data-b] { display: grid; grid-template-columns: 30% 70%; gap: 0; align-items: start; } /* Картинки нет - текст занимает всю ширину и в раскрытом виде, пустой колонки на её месте не остаётся. Откат: удалить правило. */ #kachestvo.kach-open .kachestvo-ryad[data-b]:not(:has(.kachestvo-visual)) { grid-template-columns: 100%; } /* Отступ текста от картинки. Селектор с соседством: отступ появляется только тогда, когда слева действительно стоит картинка. Откат: удалить правило. */ #kachestvo.kach-open .kachestvo-visual[data-b] + .kachestvo-tekst[data-b] { padding-left: var(--card-gap); } /* 6. Картинка видна только в раскрытом виде. В свёрнутом её нет совсем (display: none), поэтому браузер её даже не скачивает - файл грузится в момент раскрытия. Откат: удалить оба правила - картинка будет видна всегда. */ .kachestvo-visual[data-b] { display: none; } #kachestvo.kach-open .kachestvo-visual[data-b] { display: block; } .kachestvo-visual[data-b] img { display: block; width: 100%; height: auto; border-radius: var(--rad); } /* 7. Кнопка «Читать полностью» - у левого края, цветом логотипа. На действующем сайте кнопка красная, полужирная, с уголком вниз, который переворачивается при раскрытии. Повторяем: уголок нарисован фоном, лишней разметки не потребовалось. Откат: удалить правила - вернётся серая подчёркнутая надпись из эталонного glavnaya-b.css. */ #kachestvo .readmore[data-b] { display: inline-flex; align-items: center; gap: 6px; margin: var(--sp-3) 0 0; padding: 0; color: var(--cvet-cifr, #8c1821); font-weight: 700; text-decoration: none; text-align: left; } #kachestvo .readmore[data-b]::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; } #kachestvo.kach-open .readmore[data-b]::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { #kachestvo .readmore[data-b]::after { transition: none; } } /* 8. Телефон: колонок нет, картинка и текст идут друг под другом. Порог 760px - тот же, что у остальных блоков страницы. Картинка сверху, но не во весь экран: снимок вертикальный, во всю ширину он занял бы пол-экрана и отодвинул текст вниз. Откат: удалить весь блок @media. */ @media (max-width: 760px) { #kachestvo.kach-open .kachestvo-ryad[data-b] { grid-template-columns: 100%; gap: var(--sp-5); } #kachestvo.kach-open .kachestvo-visual[data-b] + .kachestvo-tekst[data-b] { padding-left: 0; } #kachestvo.kach-open .kachestvo-visual[data-b] { max-width: 15rem; } } /* ═══════════════════════════════════════════════════════════════════════ 9. Правило Павла про белую черту (диктовка 18.08.2026, пункты 9 и 13) ─────────────────────────────────────────────────────────────────────── Павел, пункт 13: «Акции-спецпредложения и преимущества для частных заказчиков - два по сути одинаковых блока. У акций тень дальше идёт, видно, что растворяется, а в преимуществах для частных заказчиков она обрезается. А ещё где „Оценка по фото“ и „Вернём деньги“ - там тоже явственная белая черта. Эта белая черта не должна отрезать никогда фон. Фон должен растворяться в белом». ╔═════════════════════════════════════════════════════════════════════╗ ║ ПРАВИЛО ПАВЛА НА БУДУЩЕЕ - записано по его прямому указанию: ║ ║ ║ ║ БЕЛАЯ ЧЕРТА НЕ ДОЛЖНА ОТРЕЗАТЬ ФОН НИКОГДА. ║ ║ ФОН РАСТВОРЯЕТСЯ В БЕЛОМ. ║ ║ ║ ║ Как это проверять. Если над блоком с тенями стоит overflow ║ ║ (hidden, clip, auto), между краем содержимого и краем обрезки ║ ║ нужен запас не меньше, чем уходит тень. ║ ║ ║ ║ ЧИСЛА ИСПРАВЛЕНЫ 18.08.2026 ПО ЗАМЕРУ. Правило «сдвиг плюс ║ ║ половина размытия» даёт 20 точек вниз и 10 вбок - и оно НЕВЕРНО: ║ ║ Chrome рисует размытие шире. Замер контрольным образцом (белая ║ ║ карточка с тенью 0 10px 20px на чистом белом, посчитаны пиксели): ║ ║ вниз тень занимает 26 точек, вбок - 16. Столько запаса и нужно. ║ ║ ║ ║ Запас меньше - тень обрывается ровной чертой, и блок выглядит ║ ║ подрезанным. Мерить не «есть ли поле», а ступеньку на кромке: ║ ║ последний пиксель внутри против первого снаружи. Тень ушла ║ ║ целиком - ступеньки нет. На глаз такую черту легко пропустить. ║ ╚═════════════════════════════════════════════════════════════════════╝ В ЭТОМ БЛОКЕ ПРАВИТЬ БЫЛО НЕЧЕГО - и это надо сказать Павлу. Плашки «Оценка по фото» и «Вернём деньги» лежат НЕ ЗДЕСЬ. Замером на живой странице они найдены в полосе первого экрана: section#chastnym, плашки .buls.seg .bul, крупная строка .bn 16px. Блок «Нам не всё равно, какой перевод Вы получите» (этот файл) начинается сильно ниже, на 4993-й точке прокрутки, и никаких плашек в нём нет. Белая черта у этих плашек - та же болезнь, что у полос галереи: над ними стоит своя дорожка div.track с overflow: hidden (эталон glavnaya-a.css), запас снизу 16,2 точки при уходе тени на 20 - хвост тени срезается. Лечится нижним полем у section#chastnym: сценарий ставит дорожке высоту по offsetHeight активной полосы, а offsetHeight считает поля, значит дорожка вырастет сама. Файл первого экрана C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\02_pervyj_ekran.css правит другой агент - сам не трогаю, число передаю отчётом. Собственная обрезка в этом блоке есть - .kachestvo-obrez (правило 3 выше, -webkit-line-clamp: 4). Она режет строки текста, а не фон: теней внутри неё нет, box-shadow ни у одного вложенного элемента не стоит, замер это подтвердил. Правило Павла она не нарушает, трогать её не нужно. Откат: удалить этот раздел - он только пояснительный, правил в нём нет. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ 10. Блок целиком - на белом поле (диктовка Павла 18.08.2026, пункт 31) ─────────────────────────────────────────────────────────────────────── Павел: «основной текст "нам не всё равно, какой перевод вы получите" - давай тоже сделаем на белом фоне. А то некрасиво получается: он на прозрачном фоне, а когда кликаешь, рисунок на белом фоне, а текст на прозрачном. То есть давай всё сделаем на белом фоне». Причина. Под страницу легла фоновая подложка (вращающийся шар, .fon-podlozhka). Замер до правки: у section#kachestvo фон rgba(0,0,0,0) - то есть его нет вовсе, и подложка просвечивает сквозь текст. Снимок в раскрытом виде это и показывает: картинка читается на белом, а текст рядом - на подложке. ОБРАЗЕЦ ВЗЯТ ЗАМЕРОМ с карточки услуг (.card3 на живой странице): фон rgb(255,255,255), скругление 16px, поля 20px 24px на компьютере и 14px 16px на телефоне, тень 0 10px 20px rgba(21,72,137,.08) - та самая общая --tenj-bloka из glavnaya.css, раздел 29.3. Повторяем всё, кроме полей: у нас не карточка в ряду, а блок во всю ширину, поэтому поля ровные - 24px на компьютере и 16px на телефоне. Тень взята не для красоты: без неё белое поле на белой странице превращается в невидимый прямоугольник, а на подложке - в наклейку с резким краем. Тень - то же, чем обозначены края всех остальных белых поверхностей сайта. Тень не срезается: над блоком по дереву единственный overflow - это .device с overflow-x: clip, и он проходит ровно в 16 точках снаружи колонки страницы (замер: колонка 130 … 1310, .device 114 … 1326). Тени вбок нужно 16 точек - помещается впритык; вниз нужно 26, а под блоком свой отступ 42 точки. ПРО ВЫРАВНИВАНИЕ - почему заголовок теперь отступает от края поля. Блок стал карточкой, и его край (130 на компьютере) стоит там же, где край любого другого блока страницы; заголовок отступает внутрь на 24 точки - ровно так же, как заголовок внутри карточки услуг. Городить отрицательные поля, чтобы вытащить заголовок на прежнее место, не стал: пришлось бы зашивать числом боковое поле страницы (16 точек на компьютере, 12,8 на телефоне), и белое поле поехало бы во всю ширину сайта - это уже не «блок на белом», а полоса во весь экран. Обе ширины, как и просил Павел. Откат: удалить оба правила - блок вернётся на прозрачный фон без полей и скругления. ═══════════════════════════════════════════════════════════════════════ */ #kachestvo { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--tenj-bloka); } body.mob #kachestvo { padding: 16px; /* как у карточки на телефоне */ } /* ═══════════════════════════════════════════════════════════════════════ Правка 19.08.2026: отступ сверху считается до H2, а не до края карточки ─────────────────────────────────────────────────────────────────────── Диктовка Павла: расстояние от белого края предыдущей карточки до H2 должно равняться расстоянию после H2 - 35 на телефоне, 70 на компьютере. Здесь блок сам стал белой карточкой (раздел выше), и его собственное поле - 16 точек на телефоне, 24 на компьютере - вставало МЕЖДУ ритмом и заголовком. Получалось: ритм 35 до края карточки плюс 16 поля = 51 до H2; на компьютере 70 плюс 24 = 94. Верхнего края у этой карточки на белой странице всё равно не видно: тень 0 10px 20px со смещением вниз над карточкой не рисуется вовсе (замер пикселей: над верхней кромкой чистое 255,255,255). То есть глаз ловит именно заголовок - от него и отмеряем. Вычитаем собственное поле из отступа сверху. Число не пишем дважды: берётся из переменной, которая стоит рядом с самим полем. Чтобы вычитание сработало, у блока цен снят нижний отступ (22 точки на телефоне перебили бы нужные 19) - правило 5.4 в 00_obshchee.css. Замер до: 51 на 375 и 94 на 1440. После: 35 и 70. Откат: удалить раздел - вернутся 51 и 94. */ #kachestvo { --pole-kachestvo: 24px; } body.mob #kachestvo { --pole-kachestvo: 16px; } main > .blk[data-b]#kachestvo { margin-top: calc(var(--sp-block) - var(--pole-kachestvo, 0px)); } /* ── Кегль 13: качество (диктовка Павла 20.08.2026) ─────────────────────── Правки из книги замера «ШРИФТЫ_МОБИЛЬНЫЕ применить на стр. О компании»: текст блока и его продолжение (было 13,5px), кнопки «Читать полностью» и «Свернуть» (было 12px). Стало 13px. Число кегля - переменная --kegl-melkij, задана в C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css Веса: держали эталонные .long[data-b] и .readmore[data-b], оба (0,2,0). Здесь (1,2,2) и (1,2,1) - перебивают идентификатором, без !important. Откат: удалить раздел. ─────────────────────────────────────────────────────────────────────── */ body.mob #kachestvo p.long, body.mob #kachestvo .readmore { font-size: var(--kegl-melkij); }