/* Оформление товарных страниц ППЗТИ. * Подключается из mu-plugin ПОСЛЕ стилей Elementor и темы. * Шапку и подвал печатает сайт, здесь только секции tp-*. */ :root{ --fon:#fff; --seryj:#F7F4F0; --tekst:#241C14; --tekst-slab:#5E564C; --liniya:#E8E2DA; --oranzh:#FEA828; --oranzh-tyomnyj:#E8930F; --sinij:#9A5512; --temnyj:#3F2814; --temnyj-2:#2E1D0F; /* ⭐ Первый экран и услуги владелец вернул к синему 30.08.2026: остальной сайт остаётся коричневым, поэтому цвета героя вынесены в свои переменные, а не возвращены в --temnyj. Тот красит ещё меню, плитки, шапки таблиц и полосу, они должны остаться тёплыми. */ --geroj-temn:#12303F; --geroj-temn-2:#0C2531; --geroj-svet:#17415A; } /* ---------- обёртка темы ---------- * Тема кладёт наш main внутрь #content > .col-full и печатает перед ним блок * хлебных крошек: на страницах Elementor там заголовок страницы, а у нас пусто, * и оставался провал почти на 400 px с одной декоративной картинкой. * Класс ppzti-tovarnaya ставит на body наш mu-plugin. */ .ppzti-tovarnaya .breadcrumb-wrap{display:none} .ppzti-tovarnaya #content{padding:0;margin:0} .ppzti-tovarnaya #content>.col-full, .ppzti-tovarnaya #content>.col-fluid{max-width:none;width:100%;padding:0;margin:0} /* ⚠️ Шапка сайта лежит АБСОЛЮТОМ поверх содержимого: у неё класс * header-absolute, на страницах Elementor она ложится на баннер с фото. * Баннер мы убрали, поэтому первый блок обязан сам отступить на её высоту, * иначе логотип и телефон накрывают хлебные крошки и надзаголовок. * Замерено: 93 px от 1024 и шире, 73 px на узких экранах. */ .ppzti-tovarnaya .tp-geroj{padding-top:118px} /* ⚠️ Порог 1249 тот же, что у шапки: ниже него шапка становится ниже (75 px * вместо 93), и прежний порог 1023 оставлял на ширинах от 1024 до 1249 * зазор в 43 px вместо 25. Регрессия найдена Кодексом 28.08.2026. */ @media (max-width:1249px){ .ppzti-tovarnaya .tp-geroj{padding-top:96px} } /* ---------- наше содержимое ---------- * ⚠️ Правила по голым тегам обязаны быть ограничены нашим main: иначе они * либо перебивают шапку и подвал сайта, либо сами перебиваются стилями темы, * у которой селекторы вида #content h1 специфичнее одиночного h1. */ .tp-soderzhimoe{box-sizing:border-box;background:var(--fon); color:var(--tekst-slab); font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased} .tp-soderzhimoe *{box-sizing:border-box} .tp-soderzhimoe img{max-width:100%;height:auto;display:block} .tp-soderzhimoe a{color:var(--sinij)} /* ⛔ Обводка фокуса была оранжевой: #FEA828 на белом даёт контраст 1.94, на * сером 1.76 при норме 3 для нетекстового контраста. Замер Кодекса * 28.08.2026. Тёмная обводка видна на любом светлом фоне, а на тёмном герое * её перекрывает отдельное правило ниже. */ .tp-soderzhimoe :focus-visible{outline:2px solid var(--tekst);outline-offset:2px} .tp-geroj :focus-visible,.tp-shapka :focus-visible, .tp-menyu-mob :focus-visible,.tp-podval :focus-visible{outline-color:var(--oranzh)} /* ⭐ Ширина контента ОДНА С САЙТОМ: 1530 px, это значение container_width из * настроек Elementor (кит ID 6), а не подобранное на глаз. Боковой отступ 30 px, * как у остальных страниц. Раньше здесь стояло 1220, и наши страницы выглядели * заметно уже соседних: при окне 1600 контент шёл 1172 против 1530. * ⚠️ Длину строки текста ограничивает не контейнер, а правила по абзацам * (max-width в ch): широкий контейнер нужен таблицам, сеткам и герою, а * абзацы всё равно остаются читаемой длины. * ⚠️ Здесь 1590, а не 1530: у Elementor 1530 это ширина САМОГО контента, а * отступы лежат снаружи. У нас border-box, поэтому к потолку добавлены оба * отступа по 30. Проверено замером: при окне 1600 и 1440 края совпадают. */ .tp-obertka{max-width:1590px;margin:0 auto;padding:0 30px} /* ссылка для клавиатуры: шапка липкая, без неё меню проходят на каждой странице */ .tp-propustit{position:absolute;left:-9999px;top:0;z-index:100; background:var(--oranzh);color:#1C1813;font-weight:700;padding:12px 20px; border-radius:0 0 10px 0;text-decoration:none} .tp-propustit:focus{left:0} .tp-soderzhimoe:focus{outline:none} /* заголовок таблицы: нужен для доступности, глазами не мешает */ .tp-tabl caption{text-align:left;padding:14px 16px 12px;font-size:13.5px; color:var(--tekst-slab);border-bottom:1px solid var(--liniya)} .tp-tabl th[scope="row"]{background:transparent;color:var(--tekst); font-weight:500;text-transform:none;letter-spacing:0;font-size:14.8px; text-align:left;border-top:1px solid var(--liniya)} /* ---------- шапка ---------- * Повторяет прежнюю шапку Elementor один в один: лежит абсолютом поверх героя, * фон прозрачный, отступ сверху 40 px, ряд высотой 53 px, меню белой пилюлей * с радиусом 30 px. Все числа сняты замером живого сайта 28.08.2026, а не * подобраны на глаз. * * ⚠️ Шапка НЕ липкая, и это осознанно: прежняя тоже уходила при прокрутке * (замер: после скролла на 900 px контейнер шапки на -860). Липкая полоса * закрывала бы верх содержимого и попадала бы в каждый кадр проверки. * * ⚠️ Абсолют требует, чтобы под шапкой стоял тёмный герой. Отступ под неё * даёт правило .ppzti-tovarnaya .tp-geroj{padding-top:118px} выше по файлу. */ /* ⛔ Без темы у body остаётся отступ браузера 8 px и шрифт с засечками. * Поймано замером 28.08.2026: герой шёл с x=8 и шириной 1424 вместо 1440, * а шапка и подвал печатались Times New Roman. Стили темы мы срезаем сами, * значит и обнулять эти два умолчания обязаны сами. */ .ppzti-tovarnaya{margin:0;background:var(--fon);color:var(--tekst); font-family:Inter,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased} .tp-shapka{position:absolute;top:0;left:0;right:0;z-index:40;color:#fff} .tp-shapka-ryad{display:flex;align-items:center;gap:0;margin-top:40px;min-height:53px} .tp-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;line-height:0} .tp-logo img{width:180px;height:auto;display:block} .tp-shapka .tp-tel{display:inline-flex;align-items:center;gap:12px;margin-left:48px; color:#fff;text-decoration:none;font-weight:600;font-size:16px; letter-spacing:-.01em;white-space:nowrap} .tp-shapka .tp-tel svg{color:var(--oranzh);flex:0 0 auto} .tp-shapka .tp-tel:hover span, .tp-shapka .tp-tel:focus-visible span{color:var(--oranzh)} /* кнопка шапки: оранжевая пилюля со стрелкой в белом кружке, как было */ /* ⛔ Селектор с двумя классами намеренно: .tp-cta объявлена ниже по файлу, * и при равной специфичности она перебивала padding кнопки шапки. * Замер 28.08.2026: приезжало 14px 28px вместо 12px 12px 12px 24px. */ /* ⚠️ Отступ 57 и поля 12/29 не на глаз: по замеру прежней шапки кнопка * начиналась с x502 и кончалась на x729 при окне 1440. */ .tp-shapka .tp-shapka-cta{display:inline-flex;align-items:center;gap:20px; margin-left:57px;padding:12px 12px 12px 29px;font-size:15px;flex:0 0 auto} .tp-strelka{display:inline-flex;align-items:center;justify-content:center; width:29px;height:29px;border-radius:50%;background:#fff;color:#1C1813;flex:0 0 auto} /* меню белой пилюлей: пункты разделены точкой, как в прежней шапке */ .tp-navi{margin-left:auto;background:#fff;border-radius:30px;padding:0 15px; flex:0 1 auto;min-width:0} .tp-navi ul{list-style:none;margin:0;padding:0} .tp-navi>ul{display:flex;align-items:center} .tp-navi>ul>li{display:flex;align-items:center;position:relative} .tp-navi>ul>li+li::before{content:"\00B7";color:#C0B6A9;font-size:15px;line-height:1} /* ⚠️ Кегль 16 и высота строки 1.4 не подобраны, а сняты с прежней шапки: * её пилюля имела высоту ровно 53 px при padding 15px сверху и снизу. */ .tp-navi a,.tp-navi span{display:block;padding:15px 20px;color:var(--tekst); text-decoration:none;font-size:16px;font-weight:500;line-height:1.4; white-space:nowrap;transition:color .16s ease} .tp-navi a:hover,.tp-navi a:focus-visible{color:var(--oranzh-tyomnyj)} /* ⛔ Текущий пункт НЕ красим оранжевым: #E8930F на белом даёт контраст 2.44 * при норме 4.5 (замер 28.08.2026, замечание Кодекса). Выделяем начертанием * и подчёркиванием, цвет текста остаётся тёмным. */ /* ⚠️ Подчёркивание убрано: пункт занимает всю высоту пилюли, и линия садилась * на её скруглённый край. В прежней шапке текущий пункт не выделялся вовсе, * поэтому оставляем только начертание. */ .tp-navi .tp-tekushchij{color:var(--tekst);font-weight:700;cursor:default} /* выпадающий список: раскрытие без скриптов, на :hover и :focus-within */ .tp-navi .tp-spisok{position:absolute;top:100%;left:0;min-width:238px; margin:4px 0 0;padding:8px 0;background:#fff;border-radius:16px; box-shadow:0 20px 46px rgba(46,29,15,.24); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60} .tp-navi .tp-gnezdo:hover .tp-spisok, .tp-navi .tp-gnezdo:focus-within .tp-spisok{opacity:1;visibility:visible;transform:translateY(0)} .tp-navi .tp-spisok li{display:block} .tp-navi .tp-spisok a{padding:9px 20px;font-size:15px;color:#4C4131} /* ⚠️ Текущий подпункт отдельным правилом: общее правило по span было * специфичнее .tp-tekushchij и съедало выделение. */ .tp-navi .tp-spisok .tp-tekushchij{padding:9px 20px;font-size:15px; color:var(--tekst);font-weight:700;box-shadow:none} .tp-navi .tp-spisok a:hover, .tp-navi .tp-spisok a:focus-visible{color:var(--oranzh-tyomnyj);background:rgba(254,168,40,.11)} /* ⚠️ Последний пункт с выпадающим списком это «О ЗАВОДЕ», а не «Контакты»: * у последнего пункта списка нет вовсе, и правило по :last-child висело * впустую (замечание Кодекса 28.08.2026). */ .tp-navi>ul>li:nth-last-child(2) .tp-spisok{left:auto;right:0} /* бургер: виден там, где пилюля меню уже не влезает */ .tp-burger{display:none;align-items:center;justify-content:center; width:48px;height:48px;margin-left:18px;padding:0;flex:0 0 auto; background:var(--oranzh);border:0;border-radius:9px;cursor:pointer; transition:background .16s ease} .tp-burger:hover{background:var(--oranzh-tyomnyj)} .tp-burger-polosy, .tp-burger-polosy::before, .tp-burger-polosy::after{display:block;width:20px;height:2px;background:#1C1813; border-radius:2px;transition:transform .18s ease,opacity .18s ease} .tp-burger-polosy{position:relative} .tp-burger-polosy::before, .tp-burger-polosy::after{content:"";position:absolute;left:0} .tp-burger-polosy::before{top:-6px} .tp-burger-polosy::after{top:6px} .tp-burger[aria-expanded="true"] .tp-burger-polosy{background:transparent} .tp-burger[aria-expanded="true"] .tp-burger-polosy::before{transform:translateY(6px) rotate(45deg)} .tp-burger[aria-expanded="true"] .tp-burger-polosy::after{transform:translateY(-6px) rotate(-45deg)} /* только для экранного диктора */ .tp-skrytno{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* панель меню на узком экране */ .tp-menyu-mob{position:fixed;inset:0;z-index:70;background:var(--temnyj-2); overflow-y:auto;padding:104px 0 44px;-webkit-overflow-scrolling:touch} .tp-menyu-mob[hidden]{display:none} /* ⚠️ ряд шапки поднимаем над панелью, иначе крестик оказывается под ней и меню невозможно закрыть мышью */ .tp-menyu-otkryto .tp-shapka-ryad{position:relative;z-index:80} .tp-menyu-otkryto,.tp-menyu-otkryto body{overflow:hidden} .tp-mob-spisok{list-style:none;margin:0;padding:0} .tp-mob-spisok>li{border-top:1px solid rgba(255,255,255,.12);padding:14px 0 16px} .tp-mob-spisok>li:first-child{border-top:0} .tp-mob-spisok ul{list-style:none;margin:8px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 18px} .tp-mob-spisok a,.tp-mob-spisok span{display:block;color:rgba(255,255,255,.82); text-decoration:none;font-size:15.5px;padding:6px 0} .tp-mob-spisok .tp-mob-razdel{color:#fff;font-weight:700;font-size:14px; letter-spacing:.05em;padding:0} .tp-mob-spisok .tp-tekushchij{color:var(--oranzh)} .tp-mob-niz{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px; margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)} /* ⛔ Плавающая кнопка звонка из mu-plugin trubi-float-call имеет z-index 9998 * и накрывала бы телефон в раскрытом меню. Селектор с ID намеренно: правило * плагина стоит по ID и печатается inline в конце body, обычным классом его * не перебить. */ html.tp-menyu-otkryto #trubi-float-call{display:none} .tp-mob-tel{color:#fff;text-decoration:none;font-weight:700;font-size:17px} .tp-mob-tel:hover,.tp-mob-tel:focus-visible{color:var(--oranzh)} /* Пороги сняты с кадров живого сайта 28.08.2026: * на 1440 видно логотип, телефон, кнопку и пилюлю меню; * на 1024 пилюля уже не влезает, вместо неё бургер; * на 390 остаются только логотип и бургер. * * ⛔ Средняя ступень заведена по замеру, а не по красивому числу. Раньше меню * пряталось только на 1199, и на ширинах от 1200 до 1340 пилюля не влезала * в ряд: пункты выходили за экран и появлялась горизонтальная прокрутка. * Поймано замером 28.08.2026 на двенадцати ширинах. Прежняя шапка тут тоже * сжимала поля пунктов, а не прятала меню целиком. * * ⚠️ Порог 1399, а не 1365: на 1380 без сжатия пилюля вставала вплотную * к кнопке, зазор выходил ноль. Со сжатием на 1399 зазор больше сотни. */ @media (max-width:1399px){ .tp-navi a,.tp-navi span{padding:15px 12px;font-size:15px} .tp-shapka .tp-tel{margin-left:24px} .tp-shapka .tp-shapka-cta{margin-left:28px;gap:14px;padding:12px 12px 12px 22px} } @media (max-width:1249px){ .tp-navi{display:none} .tp-burger{display:inline-flex} } /* ⚠️ Порог тот же, что у скрытия меню. Раньше здесь стояло 1023, и ровно на * 1024 меню уже пряталось, а планшетные отступы ещё не включались: шапка * висела на 40 px вместо 22. Поймано Кодексом 28.08.2026. */ @media (max-width:1249px){ .tp-shapka-ryad{margin-top:22px} .tp-menyu-mob{padding-top:88px} .tp-shapka .tp-shapka-cta{margin-left:16px;padding:11px 11px 11px 20px;font-size:14px} /* ⛔ Телефон забирает свободное место, иначе телефон, кнопка и бургер * сбиваются в кучу слева, а справа остаётся пустое поле. В прежней шапке * бургер стоял у самого края. */ .tp-shapka .tp-tel{margin-left:auto;font-size:15px} } @media (max-width:767px){ /* телефон и кнопка уходят в панель меню: в ряд они не помещаются, а звонок на телефоне остаётся плавающей кнопкой mu-plugin */ .tp-shapka .tp-tel,.tp-shapka .tp-shapka-cta{display:none} /* ⚠️ Логотип остаётся 180 px, а поля шапки сужаются до 15: так стояло в * прежней шапке (замер по кадру 390). Общая обёртка страницы держит свои * 30 px, поэтому правило только для шапки. */ .tp-shapka .tp-obertka{padding-left:15px;padding-right:15px} .tp-burger{margin-left:auto} .tp-menyu-mob{padding-top:80px} } /* ---------- герой ---------- */ .tp-geroj{background:var(--geroj-temn);color:#fff; background-image:linear-gradient(115deg,var(--geroj-temn-2) 0%,var(--geroj-temn) 55%,var(--geroj-svet) 100%); padding:26px 0 46px;position:relative;overflow:hidden} .tp-geroj::after{content:"";position:absolute;right:-120px;top:-90px; width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(254,168,40,.16),transparent 68%)} .tp-geroj .tp-obertka{position:relative;z-index:1} .tp-hlebnye{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:20px} .tp-hlebnye a{color:rgba(255,255,255,.62);text-decoration:none} .tp-hlebnye a:hover{color:var(--oranzh)} .tp-geroj-setka{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:44px;align-items:center} .tp-nadzagolovok{display:inline-block;font-size:12px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--oranzh); border:1px solid rgba(254,168,40,.4);border-radius:999px;padding:6px 14px; margin-bottom:16px} .tp-soderzhimoe h1{margin:0;font-size:clamp(31px,4.2vw,52px);line-height:1.08;font-weight:700; letter-spacing:-.02em;color:#fff;text-wrap:balance} .tp-lid{margin:16px 0 0;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.82); max-width:60ch} /* ⭐ Цена в первом экране: отдельная строка, а не хвост лида. Замер 27.08.2026: без этого правила зазор до лида был 0 px. ⚠ Селектор с родителем: одиночный класс тема перебивает своим `.tp-blok p`. */ .tp-geroj .tp-cena{margin:18px 0 0;font-size:17.5px;line-height:1.55; color:rgba(255,255,255,.92);max-width:60ch} .tp-geroj .tp-cena strong{color:var(--oranzh);font-size:21px; font-weight:800;white-space:nowrap} .tp-geroj-foto{border-radius:14px;overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.34)} .tp-geroj-foto img{width:100%;aspect-ratio:4/3;object-fit:cover} .tp-knopki{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0} .tp-cta{display:inline-block;background:var(--oranzh);color:#1C1813;font-weight:700; font-size:15px;border-radius:999px;padding:14px 28px;text-decoration:none; transition:background .16s ease} /* ⛔⛔ Селектор с двумя частями обязателен: .tp-soderzhimoe a{color:var(--sinij)} * специфичнее одиночной .tp-cta и красила текст кнопки в синий. Замер * 28.08.2026: rgb(154,85,18) на оранжевом, контраст 3.88 при норме 4.5. * Дефект жил на всех страницах, нашёл Кодекс. */ .tp-soderzhimoe .tp-cta{color:#1C1813} .tp-cta:hover{background:var(--oranzh-tyomnyj)} .tp-cta.vtor{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42)} .tp-cta.vtor:hover{background:rgba(255,255,255,.09);border-color:#fff} /* плитки ключевых чисел */ .tp-plitki{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14); border-radius:12px;overflow:hidden;margin-top:34px} .tp-plitka{background:var(--temnyj);padding:16px 18px} .tp-plitka b{display:block;font-size:23px;font-weight:700;color:#fff; line-height:1.2;font-variant-numeric:tabular-nums} .tp-plitka span{display:block;font-size:12.5px;color:rgba(255,255,255,.6); margin-top:4px;letter-spacing:.02em} /* ---------- секции ---------- */ .tp-soderzhimoe{display:block} .tp-blok{padding:52px 0;border-bottom:1px solid var(--liniya)} .tp-blok.seryj{background:var(--seryj);border-bottom:0} .tp-blok.uzkij{padding:38px 0} .tp-blok:last-of-type{border-bottom:0} .tp-blok h2{margin:0 0 8px;font-size:clamp(23px,2.6vw,32px);font-weight:700; color:var(--tekst);letter-spacing:-.015em;line-height:1.2;text-wrap:balance} .tp-blok h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--tekst)} .tp-podzag{margin:0 0 26px;font-size:16.5px;color:var(--tekst-slab);max-width:74ch} /* ⛔⛔ Базовое правило для абзацев обёрнуто в :where, чтобы его специфичность * стала нулевой. Иначе `.tp-blok p` (класс плюс тег) перебивает ЛЮБОЙ * одноклассовый селектор, и заданные отступы молча не применяются. * Замер браузером 27.08.2026 до правки: * .tp-snoska-tabl в css margin-top 10px, в браузере 0 * .tp-podzag в css margin-bottom 26px, в браузере 14 * Лечится специфичностью, а не увеличением чисел. */ :where(.tp-blok) p{margin:0 0 14px;max-width:76ch} .tp-blok ul{margin:0 0 14px;padding-left:20px} .tp-blok li{margin-bottom:6px} .tp-blok strong{color:var(--tekst)} /* три слоя конструкции */ .tp-sloi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px; margin-top:26px} .tp-sloj{background:#fff;border:1px solid var(--liniya);border-radius:12px; padding:22px 22px 20px;position:relative} .tp-blok.seryj .tp-sloj{background:#fff} .tp-sloj-nomer{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:10px;background:var(--temnyj);color:var(--oranzh); font-weight:700;font-size:15px;margin-bottom:14px} .tp-sloj p{margin:0;font-size:14.8px;line-height:1.6} /* Заголовок шага и его текст были строчными и слипались в одну строку. * Тот же приём, что у .tp-tovar b. Поймано кадром 31.08.2026. */ .tp-sloj b{display:block;font-size:16px;color:var(--tekst);margin-bottom:6px} .tp-sloj>span:not(.tp-sloj-nomer){display:block;font-size:14.8px; line-height:1.6;color:var(--tekst-slab)} /* две колонки: текст и картинка */ .tp-2kol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:40px;align-items:center;margin-top:22px} .tp-2kol.oborot{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)} .tp-2kol img{border-radius:12px;width:100%;aspect-ratio:3/2;object-fit:cover; border:1px solid var(--liniya)} .tp-2kol p:last-child{margin-bottom:0} /* преимущества: одна карточка выделена цветом */ .tp-plyusy{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;margin-top:26px} .tp-plyus{background:#fff;border:1px solid var(--liniya);border-radius:12px; padding:24px 22px} .tp-plyus b{display:block;font-size:17px;color:var(--tekst);margin-bottom:8px} .tp-plyus p{margin:0;font-size:14.8px;line-height:1.6} .tp-plyus.akcent{background:var(--oranzh);border-color:var(--oranzh)} .tp-plyus.akcent b,.tp-plyus.akcent p{color:#1C1813} .tp-plyus-chislo{display:block;font-size:30px;font-weight:700;line-height:1; color:var(--sinij);margin-bottom:12px;font-variant-numeric:tabular-nums} .tp-plyus.akcent .tp-plyus-chislo{color:#1C1813} /* список «что учесть в проекте»: не буллиты, а карточки с выводом */ .tp-uchest{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px} .tp-uchest li{background:#fff;border:1px solid var(--liniya);border-radius:12px; padding:18px 22px;font-size:15.3px;line-height:1.62; border-left:3px solid var(--oranzh)} .tp-blok.seryj .tp-uchest li{background:#fff} .tp-uchest b{color:var(--tekst)} /* чипы применения */ .tp-chipy{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .tp-chip{display:flex;align-items:center;gap:9px;background:#fff; border:1px solid var(--liniya);border-radius:10px;padding:12px 18px; font-size:14.5px;font-weight:500;color:var(--tekst)} .tp-chip::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--oranzh);flex:none} /* таблицы */ .tp-tabl{overflow-x:auto;margin:22px 0 0;border:1px solid var(--liniya); border-radius:12px;background:#fff} .tp-tabl table{border-collapse:collapse;width:100%;font-size:14.8px; font-variant-numeric:tabular-nums;min-width:520px} .tp-tabl th{background:var(--temnyj);color:#fff;text-align:left;font-weight:600; padding:13px 16px;white-space:nowrap;font-size:13.5px;letter-spacing:.02em} .tp-tabl td{padding:12px 16px;border-top:1px solid var(--liniya);color:var(--tekst-slab)} .tp-tabl tbody tr:nth-child(even) td{background:#FCFAF7} .tp-tabl td:first-child{color:var(--tekst);font-weight:500} .tp-tabl.cifry td{text-align:right} .tp-tabl.cifry td:first-child,.tp-tabl.cifry th:first-child{text-align:left} .tp-tabl.cifry th{text-align:right} /* заголовок группы столбцов ставим по центру своей группы: при выравнивании вправо «Тип 1» и «Тип 2» вставали над колонкой массы, и на широком экране читались как её подпись */ .tp-tabl.cifry th[colspan]{text-align:center} .tp-tabl.cifry th:first-child{text-align:left} /* margin-top отдельным свойством, а не сокращённой записью: сокращённая * обнулила бы нижний отступ, и на страницах диаметров сноска слиплась бы * со следующим за ней заголовком h3. */ .tp-snoska-tabl{margin-top:16px;font-size:13.5px;color:var(--tekst-slab)} /* Обычный абзац после карточек и таблиц. Сноску исключаем, иначе правило с * двумя классами перебило бы её собственные 16px и дало 18. */ :where(.tp-blok) :where(.tp-plyusy,.tp-punkty,.tp-tabl) + p:not(:where(.tp-snoska-tabl)){margin-top:18px} /* карточки товаров */ .tp-tovary{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px;margin-top:26px} /* Заголовок сразу после сетки карточек: без этого он прилипает к * последнему ряду вплотную. Найдено мерилом отступов 31.08.2026 * на странице блога, зазор был -1px. Префикс родителя обязателен: * без него .tp-blok h2 (класс плюс тег) перебивает правило. */ .tp-blok .tp-tovary + h2, .tp-blok .tp-sloi + h2{margin-top:44px} .tp-blok .tp-tovary + p, .tp-blok .tp-sloi + p{margin-top:26px} .tp-tovar{display:flex;flex-direction:column;background:#fff; border:1px solid var(--liniya);border-radius:12px;overflow:hidden; text-decoration:none;color:inherit;transition:border-color .16s ease, transform .16s ease,box-shadow .16s ease} .tp-tovar:hover{border-color:var(--oranzh);transform:translateY(-3px); box-shadow:0 10px 26px rgba(63,40,20,.10)} .tp-tovar img{width:100%;aspect-ratio:16/11;object-fit:cover;background:var(--seryj)} .tp-tovar-telo{padding:14px 16px 16px} .tp-tovar b{display:block;font-size:15.5px;color:var(--tekst);margin-bottom:3px} .tp-tovar span{font-size:13.5px;color:var(--tekst-slab);line-height:1.5} /* призыв полосой */ .tp-polosa{background:var(--temnyj); background-image:linear-gradient(105deg,var(--temnyj-2),#5C3A1B); color:#fff;border-radius:16px;padding:36px 40px;margin-top:8px; display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center} .tp-polosa h2{color:#fff;margin-bottom:8px} .tp-polosa p{color:rgba(255,255,255,.8);margin:0;max-width:62ch} .tp-polosa .tp-knopki{margin:0} /* вопросы и ответы */ .tp-faq{margin-top:24px;border:1px solid var(--liniya);border-radius:12px; overflow:hidden;background:#fff} .tp-faq details{border-bottom:1px solid var(--liniya)} .tp-faq details:last-child{border-bottom:0} .tp-faq summary{cursor:pointer;list-style:none;padding:17px 52px 17px 22px; font-weight:600;color:var(--tekst);font-size:16px;position:relative} .tp-faq summary::-webkit-details-marker{display:none} .tp-faq summary::after{content:"";position:absolute;right:22px;top:50%; width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--sinij); border-bottom:2px solid var(--sinij);transform:rotate(45deg); transition:transform .18s ease} .tp-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .tp-faq summary:hover{color:var(--sinij)} .tp-faq-otvet{padding:0 22px 18px;font-size:15.3px;line-height:1.62} .tp-faq-otvet p{margin:0;max-width:78ch} /* теги перелинковки */ .tp-tegi{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .tp-teg{background:#fff;border:1px solid var(--liniya);border-radius:999px; padding:9px 18px;font-size:14px;color:var(--tekst-slab);text-decoration:none} .tp-teg:hover{border-color:var(--sinij);color:var(--sinij)} /* заметка */ .tp-snoska{background:#fff;border-left:3px solid var(--oranzh); padding:16px 20px;border-radius:0 10px 10px 0;margin-top:20px; border-top:1px solid var(--liniya);border-right:1px solid var(--liniya); border-bottom:1px solid var(--liniya)} .tp-snoska p:last-child{margin-bottom:0} /* ---------- подвал ---------- * Временный по решению владельца 28.08.2026: одна тёмная полоса, логотип, * копирайт и политика конфиденциальности. Вид дорабатываем отдельно. */ .tp-podval{background:#141009;color:rgba(255,255,255,.6);font-size:14px; line-height:1.6;margin-top:0} .tp-podval .tp-obertka{display:flex;align-items:center;flex-wrap:wrap; gap:14px 32px;padding-top:22px;padding-bottom:22px} .tp-podval-logo{flex:0 0 auto;line-height:0} .tp-podval-logo img{width:132px;height:auto;display:block} .tp-podval-pravo{margin:0;flex:1 1 300px;min-width:0} .tp-podval-ssylka{color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.26);transition:color .16s ease} .tp-podval-ssylka:hover, .tp-podval-ssylka:focus-visible{color:var(--oranzh);border-bottom-color:var(--oranzh)} @media (max-width:1000px){ .tp-geroj-setka,.tp-2kol,.tp-2kol.oborot{grid-template-columns:minmax(0,1fr);gap:26px} .tp-geroj-foto{order:-1} .tp-polosa{grid-template-columns:minmax(0,1fr);padding:30px 26px} } @media (max-width:820px){ /* правила шапки отсюда убраны 28.08.2026: своя шапка держит свои пороги (1199, 1023, 767) рядом со своим кодом, а не вперемешку с содержимым */ } @media (max-width:700px){ .tp-blok{padding:38px 0} .tp-geroj{padding:22px 0 36px} .tp-plitka{padding:14px 16px} .tp-plitka b{font-size:20px} .tp-polosa{padding:26px 22px} .tp-faq summary{padding:15px 46px 15px 18px;font-size:15.3px} .tp-faq-otvet{padding:0 18px 16px} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------- форма заявки в правой колонке ---------- * Ставится в блоке «Что такое труба» на страницах ПЭ и ОЦ: слева текст, * справа карточка с формой Contact Form 7 (форма 34, та же, что на главной). * Поля формы приходят из CF7 без своих стилей, поэтому одеваем их здесь. */ .tp-2kol.s-formoj{grid-template-columns:minmax(0,1fr) minmax(300px,.68fr); align-items:start;margin-top:18px} .tp-2kol.s-formoj>div>p:last-child{margin-bottom:0} .tp-forma{background:none;border:0;border-radius:0;padding:0} .tp-blok.seryj .tp-forma{background:none} .tp-forma-zag{font-size:21px;font-weight:700;color:var(--tekst);margin:0 0 8px; line-height:1.25;letter-spacing:-.2px} .tp-blok .tp-forma-tekst{font-size:14.5px;color:var(--tekst-slab);margin:0 0 6px; max-width:none;line-height:1.5} .tp-forma .wpcf7{margin:0} .tp-forma .wpcf7 .row{display:block} .tp-forma .wpcf7 .column-100{margin:0} /* ⭐ Поля как в родной форме сайта: одна линия снизу, без рамки и фона. * Значения сняты замером живой формы на /truby-ppu/, а не подобраны на глаз. */ .tp-forma .wpcf7 input[type="text"], .tp-forma .wpcf7 input[type="email"], .tp-forma .wpcf7 input[type="tel"], .tp-forma .wpcf7 textarea{width:100%;box-sizing:border-box;padding:13px 0; margin:0;border:0;border-bottom:1px solid #E2DCD3;border-radius:0; background:transparent;color:#000;font:inherit;font-size:17px; letter-spacing:-.18px;line-height:1.35} .tp-forma .wpcf7 textarea{min-height:62px;resize:vertical} /* ⛔ Одной оранжевой линии в 1 px мало: #FEA828 к белому даёт 1.94, а к * прежней линии #E2DCD3 всего 1.46 при норме 3 для нетекстового контраста. * Поймано Кодексом 28.08.2026. Держим и толстую линию, и обводку. */ .tp-forma .wpcf7 input:focus, .tp-forma .wpcf7 textarea:focus{outline:2px solid var(--tekst);outline-offset:2px; border-bottom-color:var(--tekst);border-bottom-width:2px} .tp-forma .wpcf7 input:focus:not(:focus-visible), .tp-forma .wpcf7 textarea:focus:not(:focus-visible){outline:0; border-bottom-color:var(--oranzh);border-bottom-width:2px} .tp-forma .wpcf7 input::placeholder, .tp-forma .wpcf7 textarea::placeholder{color:#948A7D;opacity:1} /* ⚠️ У формы обёртка .wpcf7-button это div, а кнопка лежит внутри него. * Если красить оба, получаются две коробки одна в другой. Красим только кнопку. */ .tp-forma .wpcf7 .wpcf7-button{background:none;border:0;padding:0;margin:0;width:auto} /* ⭐ Кнопка-таблетка со стрелкой, как везде на сайте: ширина по содержимому, * радиус 50px, стрелку и кружок рисует тема, мы их больше не прячем. */ .tp-forma .wpcf7 .elementor-button, .tp-forma .wpcf7 button[type="submit"], .tp-forma .wpcf7 input[type="submit"]{display:inline-flex;align-items:center; gap:14px;width:auto;box-sizing:border-box;background:var(--oranzh);color:#1C1813; font:inherit;font-weight:600;font-size:16px;border:0;border-radius:50px; padding:12px 12px 12px 30px;cursor:pointer;line-height:1.2; transition:background .15s ease} .tp-forma .wpcf7 .elementor-button:hover, .tp-forma .wpcf7 button[type="submit"]:hover, .tp-forma .wpcf7 input[type="submit"]:hover{background:var(--oranzh-tyomnyj)} .tp-forma .wpcf7 .elementor-button-content-wrapper{display:flex;align-items:center; gap:14px} /* согласие на обработку данных: чекбокс и текст в строку */ .tp-forma .wpcf7 .wpcf7-acceptance, .tp-forma .wpcf7 .wpcf7-list-item{margin:12px 0 14px;display:block} .tp-forma .wpcf7 .wpcf7-list-item label{display:flex;align-items:flex-start;gap:9px; font-size:13.5px;line-height:1.45;color:var(--tekst-slab)} .tp-forma .wpcf7 input[type="checkbox"]{width:16px;height:16px;margin:2px 0 0; flex:0 0 auto;accent-color:var(--oranzh)} .tp-forma .wpcf7-spinner{display:block;margin:10px 0 0} .tp-forma .wpcf7-not-valid-tip{font-size:13px;color:#C0392B;margin:4px 0 0} /* ⛔⛔ Служебные узлы Contact Form 7, которые прятал ЕГО СОБСТВЕННЫЙ css. * Мы этот css срезаем (оформление формы у нас своё), и без этих трёх правил * на страницу вылезают: рамка пустого fieldset со скрытыми полями (браузер * рисует ей 2px groove по умолчанию), текст ответа для экранного диктора и * пустая коробка ответа формы. Поймано замером 28.08.2026: fieldset шириной * 658 px и высотой 20 px стоял между текстом и первым полем. * * ⚠️ screen-reader-response прячем не через display:none, а уводом за экран: * display:none выкидывает узел из дерева доступности, и диктор перестаёт * читать ошибки заполнения. */ .tp-forma .wpcf7 .hidden-fields-container{border:0;margin:0;padding:0;min-inline-size:0} .tp-forma .wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .tp-forma .wpcf7-response-output:empty{display:none} .tp-forma .wpcf7-response-output{font-size:14px;line-height:1.4;border-radius:9px; margin:14px 0 0;padding:10px 12px} .tp-forma .tp-forma-snoska{font-size:12.5px;color:var(--tekst-slab);margin:12px 0 0; line-height:1.5} /* ⭐ Колонки вровень по верху: иначе форма висит ниже заголовка и слева * под текстом остаётся пустое поле. */ /* ⭐ Колонки поровну. При 797px текст занимал 199px высоты против 483px формы, * и под текстом зияла дыра в 284px. Узкая колонка даёт больше строк, столбец * становится выше и разрыв закрывается. */ .tp-2kol.s-formoj{align-items:start;grid-template-columns:1fr 1fr;gap:56px} /* ⭐ Поля в две колонки: «Имя» и «Телефон» в одну строку, остальное на всю * ширину. Форма теряет около 120px высоты, не теряя ни одного поля. * ⚠️ Скрытая ловушка от спама лежит в этой же строке, но она position:absolute * и ячейку сетки не занимает. */ .tp-forma .wpcf7 .row{display:grid;grid-template-columns:1fr 1fr; column-gap:22px;row-gap:0;align-items:start} .tp-forma .wpcf7 .row > .column-100{grid-column:1 / -1;min-width:0} /* имя слева, телефон справа: в разметке телефон третий, поэтому переставляем */ .tp-forma .wpcf7 .row > .column-100:nth-of-type(1){grid-column:1 / 2;order:1} .tp-forma .wpcf7 .row > .column-100:nth-of-type(3){grid-column:2 / 3;order:1} .tp-forma .wpcf7 .row > .column-100:nth-of-type(2){order:2} .tp-forma .wpcf7 .row > .column-100:nth-of-type(4){order:3} .tp-forma .wpcf7 .row > .column-100:nth-of-type(n+5){order:4} @media (max-width:1100px){ /* ⚠️ Ниже 1100px в двух колонках поля становятся уже 200px и подписи * начинают переноситься: возвращаем один столбец. */ .tp-forma .wpcf7 .row{grid-template-columns:1fr;column-gap:0} .tp-forma .wpcf7 .row > .column-100, .tp-forma .wpcf7 .row > .column-100:nth-of-type(1), .tp-forma .wpcf7 .row > .column-100:nth-of-type(3){grid-column:1 / -1} } @media (max-width:900px){ .tp-2kol.s-formoj{grid-template-columns:1fr;gap:24px} .tp-forma .wpcf7 input[type="text"], .tp-forma .wpcf7 input[type="email"], .tp-forma .wpcf7 input[type="tel"], .tp-forma .wpcf7 textarea{font-size:16px;padding:14px 0} } /* ═══ Блоки разбора обозначения и названий ═══ * Ставятся в левой колонке секции с формой. Текст в них тот же, что был * абзацами: задача не добавить слов, а подать их структурой и закрыть * пустоту под коротким текстом. * Тон взят у родных плиток .tp-plitka, но секция светлая, поэтому цвета * зеркальные: светлый фон, тёмный текст. */ /* Разбор аббревиатуры: две карточки в строку */ .tp-razbor{display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--liniya);border:1px solid var(--liniya);border-radius:12px; overflow:hidden;margin:0 0 18px} .tp-razbor-item{background:var(--fon);padding:15px 17px} .tp-razbor-item b{display:block;font-size:20px;font-weight:700;color:var(--tekst); line-height:1.2;letter-spacing:-.2px} .tp-razbor-item span{display:block;margin-top:5px;font-size:13px;line-height:1.45; color:var(--tekst-slab)} /* Названия из спецификаций: список в рамке */ .tp-nazvaniya, .tp-punkty{border:1px solid var(--liniya);border-radius:12px; padding:16px 18px;background:var(--seryj)} .tp-blok.seryj .tp-nazvaniya, .tp-blok.seryj .tp-punkty{background:var(--fon)} .tp-nazvaniya-zag, .tp-punkty-zag{font-size:14px;font-weight:700;color:var(--tekst); margin:0 0 10px;letter-spacing:-.1px} .tp-blok .tp-nazvaniya ul, .tp-blok .tp-punkty ul{margin:0;padding:0;list-style:none; display:grid;grid-template-columns:1fr 1fr;gap:7px 18px} .tp-blok .tp-nazvaniya li, .tp-blok .tp-punkty li{margin:0;font-size:14.5px;color:var(--tekst); padding-left:15px;position:relative;line-height:1.4} /* ⚠️ Маркер рисуем псевдоэлементом, а не list-style: так он не съезжает * при переносе строки на узких экранах. */ .tp-blok .tp-nazvaniya li:before, .tp-blok .tp-punkty li:before{content:"";position:absolute;left:0;top:8px; width:5px;height:5px;border-radius:50%;background:var(--oranzh)} .tp-blok .tp-nazvaniya-snoska, .tp-blok .tp-punkty-snoska{margin:12px 0 0;font-size:13.5px; color:var(--tekst-slab);line-height:1.5;max-width:none} @media (max-width:1100px){ .tp-blok .tp-nazvaniya ul, .tp-blok .tp-punkty ul{grid-template-columns:1fr} } @media (max-width:600px){ .tp-razbor{grid-template-columns:1fr} } /* Список в одну колонку: для узких колонок, где две не помещаются */ .tp-blok .tp-punkty.odna-kolonka ul{grid-template-columns:1fr} /* Галерея снимков производства на странице о заводе. Отдельный класс, а не * tp-tovary: там карточки со ссылкой и подписью, здесь просто ряд фотографий. * Добавлено 27.08.2026 при переносе страницы с Elementor на нашу вёрстку. */ .tp-galereya{display:grid;gap:14px;margin-top:26px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .tp-galereya img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover; border-radius:12px;border:1px solid var(--liniya);display:block} @media (max-width:600px){ .tp-galereya{grid-template-columns:repeat(2,1fr);gap:10px} } /* ───────── Баннер-фотография в герое товарной страницы ───────── * Задача владельца 27.08.2026: у страниц ПЭ, ОЦ и диаметров баннер должен * получить картинку, как у страниц каталога. Там это делает kt-geroj-banner * из kategoriya.css, но у товарных страниц другая раскладка героя, поэтому * нужен свой класс. * * ⚠ Завеса своя, а не надежда на удачный снимок: любую фотографию можно * заменить, и белый текст останется читаемым. * ⚠ Порядок слоёв: фото 0, завеса 1, содержимое 2. Без явного z-index у * обёртки текст уходит под завесу и гаснет. */ .tp-geroj.s-fotom{position:relative;isolation:isolate} .tp-geroj.s-fotom::after{content:none} .tp-geroj-fon{position:absolute;inset:0;z-index:0;width:100%;height:100%; object-fit:cover;object-position:62% 58%} .tp-geroj-zaves{position:absolute;inset:0;z-index:1; background: linear-gradient(96deg, rgba(9,26,36,.95) 0%, rgba(9,26,36,.90) 32%, rgba(9,26,36,.66) 56%, rgba(9,26,36,.40) 100%), linear-gradient(to bottom, rgba(9,26,36,.58) 0%, rgba(9,26,36,0) 24%)} .tp-geroj.s-fotom .tp-obertka{position:relative;z-index:2} /* Плитки фактов поверх фотографии: тёмное стекло вместо светлых карточек, * иначе первый экран превращается в светлую стену поверх кадра. */ .tp-geroj.s-fotom .tp-plitka{background:rgba(9,26,36,.55); backdrop-filter:blur(3px);border-color:rgba(255,255,255,.16)} /* Рендер изделия рядом с фотографией смотрится шумно: на страницах с фоном * он уезжает вниз, под текст, и работает как иллюстрация, а не как второй * герой. На узких экранах он и так под текстом. */ @media (min-width:1024px){ .tp-geroj.s-fotom .tp-geroj-setka{grid-template-columns:minmax(0,1fr)} .tp-geroj.s-fotom .tp-geroj-foto{max-width:420px;margin-top:26px} } /* ⛔⛔ Вторая кнопка на СВЕТЛОМ фоне была почти невидима. * Правило `.tp-cta.vtor{color:#fff}` писалось под тёмный герой, но класс * начали ставить и в светлые секции. Замер контраста браузером 28.08.2026: * белый текст на фоне rgb(242,244,247) дал 1.04 при норме 4.5. * Находка Кодекса, подтверждена замером. * * Лечим контекстом, а не отменой класса: в тёмных местах кнопка остаётся * светлой, в светлых становится тёмной. Селектор с родителем обязателен, * иначе одноклассовое правило выше перебьёт. */ .tp-blok .tp-cta.vtor, .tp-blok.seryj .tp-cta.vtor{ color:var(--tekst); border-color:rgba(36,28,20,.28) } .tp-blok .tp-cta.vtor:hover, .tp-blok .tp-cta.vtor:focus-visible, .tp-blok.seryj .tp-cta.vtor:hover, .tp-blok.seryj .tp-cta.vtor:focus-visible{ background:rgba(36,28,20,.06); border-color:var(--tekst) } /* В герое и на фотографии фон тёмный, там кнопка остаётся белой. */ .tp-geroj .tp-cta.vtor{color:#fff;border-color:rgba(255,255,255,.42)} .tp-geroj .tp-cta.vtor:hover, .tp-geroj .tp-cta.vtor:focus-visible{background:rgba(255,255,255,.09);border-color:#fff} /* ---------- секции главной страницы ---------- * Повторяют блоки прежней главной, собранной Elementor: фотогалерея в герое, * карточки с числами, пара фотографий с годом основания, лента сертификатов * и отзывы. Состав снят с записи 218 (мета _elementor_data) 28.08.2026. */ /* Фотогалерея в герое: девять кадров сменяют друг друга без единого скрипта. * ⚠️ Цикл 45 секунд на девять кадров, то есть по пять секунд на кадр. * Задержку каждому кадру задаёт переменная --n прямо в разметке. */ .tp-geroj-galereya{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--geroj-temn-2)} .tp-geroj-galereya img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 58%;opacity:0; animation:tp-smena-kadra 45s linear infinite; animation-delay:calc(var(--n) * 5s)} @keyframes tp-smena-kadra{ 0%{opacity:0} 2%{opacity:1} 11%{opacity:1} 13%{opacity:0} 100%{opacity:0} } /* ⛔ Первый кадр обязан быть виден СРАЗУ. С общими keyframes он начинал с * opacity:0 и полную видимость набирал за 0.9 секунды: при открытии страницы * герой показывал тёмный прямоугольник. Нашёл Кодекс 28.08.2026. */ .tp-geroj-galereya img:first-child{animation-name:tp-smena-pervogo} @keyframes tp-smena-pervogo{ 0%{opacity:1} 11%{opacity:1} 13%{opacity:0} 98%{opacity:0} 100%{opacity:1} } /* ⛔ Человеку, который просил убрать движение, показываем один кадр. * Мелькающий фон под текстом мешает читать и провоцирует укачивание. */ @media (prefers-reduced-motion:reduce){ .tp-geroj-galereya img{animation:none;opacity:0} .tp-geroj-galereya img:first-child{opacity:1} } /* ⛔ Надзаголовок в светлом блоке. Базовое правило красит его оранжевым, но * оно писалось под тёмный герой: #FEA828 на белом даёт контраст 1.94, а * #E8930F всего 2.44 при норме 4.5. На светлом фоне текст делаем серым, * оранжевой остаётся только рамка. */ .tp-blok .tp-nadzagolovok{color:var(--tekst-slab)} /* Вводный абзац после пары фотографий: без отступа он прилипает к снимкам. */ .tp-blok .tp-foto-para + .tp-podzag{margin-top:28px} /* Одна плитка в герое не должна растягиваться во всю ширину: в прежней * главной это была компактная плашка под кнопками. */ .tp-plitki.odna{grid-template-columns:none;display:inline-grid;max-width:420px} /* Карточки с числами: четыре колонки с цифрой, подписью и объяснением. * На прежней главной это были счётчики Elementor. */ .tp-chisla{display:grid;gap:22px;margin-top:8px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr))} .tp-chislo{background:#fff;border:1px solid var(--liniya);border-radius:14px; padding:24px 24px 26px} .tp-chislo-imya{display:block;font-size:14px;letter-spacing:.06em; text-transform:uppercase;color:var(--tekst-slab);margin-bottom:12px} .tp-chislo-cifra{display:flex;align-items:baseline;gap:8px;margin-bottom:12px} .tp-chislo-cifra b{font-size:38px;line-height:1;color:var(--tekst);font-weight:800} .tp-chislo-cifra span{font-size:14.5px;color:var(--oranzh-tyomnyj);font-weight:700} .tp-chislo p{margin:0;font-size:15px;line-height:1.6;color:var(--tekst-slab)} /* Пара фотографий с годом основания: слева снимок с плашкой, справа второй. */ .tp-foto-para{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:26px} .tp-foto-para figure{margin:0;position:relative;border-radius:16px;overflow:hidden; background:var(--seryj)} .tp-foto-para img{width:100%;height:100%;object-fit:cover;display:block; aspect-ratio:4/3} .tp-foto-plashka{position:absolute;left:16px;bottom:16px;z-index:1; background:rgba(32,21,11,.86);color:#fff;border-radius:12px;padding:12px 18px} .tp-foto-plashka b{display:block;font-size:26px;line-height:1;font-weight:800} .tp-foto-plashka span{display:block;font-size:13px;margin-top:5px; color:rgba(255,255,255,.78)} /* Лента сертификатов: прокручивается пальцем и колесом, без скриптов. * ⚠️ scroll-snap держит кадры по местам, а :focus-visible нужен потому, * что лента доступна с клавиатуры стрелками. */ .tp-lenta{display:flex;gap:16px;margin-top:24px;padding-bottom:12px; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin} .tp-lenta::-webkit-scrollbar{height:8px} .tp-lenta::-webkit-scrollbar-thumb{background:var(--liniya);border-radius:4px} .tp-lenta a,.tp-lenta figure{flex:0 0 auto;margin:0;scroll-snap-align:start; width:196px;border:1px solid var(--liniya);border-radius:12px;overflow:hidden; background:#fff;display:block} .tp-lenta img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover} .tp-lenta-snoska{margin-top:14px;font-size:13.5px;color:var(--tekst-slab)} /* Отзывы: три карточки с текстом, именем и родом занятий. */ /* Секция отзывов на прежней главной шла по фотографии цеха. Повторяем: * снимок фоном, поверх тёмная завеса, карточки полупрозрачные. */ .tp-blok.s-fonom{position:relative;isolation:isolate;color:#fff} .tp-blok.s-fonom > .tp-fon{position:absolute;inset:0;z-index:0;width:100%; height:100%;object-fit:cover;object-position:center} .tp-blok.s-fonom::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(32,21,11,.92),rgba(32,21,11,.86))} .tp-blok.s-fonom > .tp-obertka{position:relative;z-index:2} .tp-blok.s-fonom h2{color:#fff} .tp-blok.s-fonom .tp-nadzagolovok{color:var(--oranzh)} .tp-blok.s-fonom .tp-otzyv{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)} .tp-blok.s-fonom .tp-otzyv p{color:rgba(255,255,255,.84)} .tp-blok.s-fonom .tp-otzyv b{color:#fff} .tp-blok.s-fonom .tp-otzyv span{color:rgba(255,255,255,.62)} .tp-blok.s-fonom .tp-otzyv footer{border-top-color:rgba(255,255,255,.16)} .tp-otzyvy{display:grid;gap:20px;margin-top:26px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .tp-otzyv{background:#fff;border:1px solid var(--liniya);border-radius:14px; padding:24px 24px 22px;display:flex;flex-direction:column} .tp-otzyv p{margin:0 0 18px;font-size:15.2px;line-height:1.65;color:var(--tekst-slab)} .tp-otzyv footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--liniya)} .tp-otzyv b{display:block;color:var(--tekst);font-size:15.5px} .tp-otzyv span{display:block;font-size:13.5px;color:var(--tekst-slab);margin-top:3px} /* Контакты рядом с формой: строки «подпись, значение». */ /* Фотография рядом с контактами: была на прежней главной у формы. */ .tp-foto-kontakt{margin:22px 0 0;border-radius:14px;overflow:hidden;max-width:420px} .tp-foto-kontakt img{width:100%;height:auto;display:block} .tp-kontakty{display:grid;gap:18px;margin-top:22px} .tp-kontakt b{display:block;font-size:13px;letter-spacing:.05em; text-transform:uppercase;color:var(--tekst-slab);margin-bottom:5px} .tp-kontakt span,.tp-kontakt a{font-size:16.5px;color:var(--tekst); text-decoration:none;display:block} .tp-kontakt a:hover,.tp-kontakt a:focus-visible{color:var(--oranzh-tyomnyj)} /* ⚠️ Два номера подряд шли с зазором 7 px, мерило отступов считает это * слипанием. Ставим воздух между строками одного контакта. */ .tp-kontakt a + a,.tp-kontakt span + span{margin-top:10px} @media (max-width:700px){ .tp-foto-para{grid-template-columns:minmax(0,1fr)} .tp-chislo{padding:20px} .tp-chislo-cifra b{font-size:32px} .tp-lenta a,.tp-lenta figure{width:158px} } /* ========================================================================== МОБИЛЬНЫЙ СТАНДАРТ ЭТАЛОНА ДЛЯ ВСЕХ СТРАНИЦ ШАБЛОНА, 02.09.2026 Слово Вени: «мы сегодня должны все страницы доделать по нашему эталону как главная». Эталон это главная «/» (блок 3.13 ниже, там те же числа): текст на 16 от края, блоки (карточки, таблицы, снимки, формы) на 8, карусели на 10 со scroll-padding, плашка героя одной строкой. Главная исключена через body:not(.home): у неё свои правила. Замер до правки (_etalon-sverka.js, девять типов страниц): обёртка 8, текст 8, блоки 8, ленты 8, плашка в две строки, у контактов таблица вылезала за экран на 140px. ⛔ Отрицательные поля −8 только у КОНТЕЙНЕРОВ (.tp-sloi, .tp-plyusy, .tp-tovary, .kt-parametry), не у карточек внутри: иначе поля складываются и карточка уезжает на 0. Одиночные карточки вне контейнера ловятся отдельным правилом с :not(). ========================================================================== */ @media (max-width:700px){ body:not(.home) .tp-soderzhimoe .tp-obertka{padding-left:16px;padding-right:16px} /* ⛔ Внутри :is() нет селекторов с тегом: :is() берёт наибольшую специфичность из списка, и .tp-2kol>figure давал (0,1,1) всему правилу, оно перебивало поля −16 у лент ниже (карточка вставала на 18, не на 10). Снимки в две колонки вынесены отдельной строкой. */ body:not(.home) .tp-soderzhimoe :is(.tp-razbor,.tp-tabl,.tp-plyusy,.tp-sloi,.tp-faq, .tp-tovary,.tp-nazvaniya,.tp-snoska,.tp-polosa,.tp-forma,.tp-foto-para, .kt-parametry,.kt-vrezka,.kt-fakty){ margin-left:-8px;margin-right:-8px} body:not(.home) .tp-soderzhimoe .tp-2kol>:is(figure,img){margin-left:-8px;margin-right:-8px} body:not(.home) .tp-soderzhimoe :is(.tp-sloj,.tp-plyus,.tp-tovar):not(:is(.tp-sloi,.tp-plyusy,.tp-tovary)>*){ margin-left:-8px;margin-right:-8px} /* Карусели категорий: первая карточка на 10, как четыре ленты главной. scroll-padding-left равен padding-left, иначе snap прибивает к нулю (3.11.3). */ body:not(.home) .tp-soderzhimoe [class*="kt-lenta"]{ margin-left:-16px;margin-right:-16px; padding-left:10px;padding-right:16px;scroll-padding-left:10px} /* Таблица шире экрана раздвигала колонку контактов на 140px: ячейка сетки считает min-width по содержимому. Ноль, и прокрутка остаётся внутри .tp-tabl. */ body:not(.home) .tp-soderzhimoe .tp-2kol>*{min-width:0} body:not(.home) .tp-soderzhimoe .tp-tabl{max-width:calc(100% + 16px)} } @media (max-width:700px){ /* Сетки карточек на телефоне каруселью, как четыре ленты главной (3.11): товары, плюсы, шаги. Рецепт тот же: лента flex, зазор 12, карточка 86 процентов, прилипание, первая карточка на 10, scroll-padding равен полю. Поля −16 к обёртке 16, чтобы лента доходила до края экрана. ⛔ Отрицательные −8 из правила выше здесь перебиты: у ленты свои −16. */ body:not(.home) .tp-soderzhimoe :is(.tp-tovary,.tp-plyusy,.tp-sloi){ display:flex;gap:12px;grid-template-columns:none; margin-left:-16px;margin-right:-16px;padding:2px 16px 12px 10px; scroll-padding-left:10px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:thin} body:not(.home) .tp-soderzhimoe :is(.tp-tovary,.tp-plyusy,.tp-sloi)>*{ flex:0 0 86%;scroll-snap-align:start;min-width:0;margin-left:0;margin-right:0} } @media (max-width:767px){ /* Плашка героя одной строкой, как на главной: 11px и .05em вместо 12px и .12em, ширина по тексту, при переносе строки ровные. */ body:not(.home) .tp-geroj .tp-nadzagolovok{font-size:11px;letter-spacing:.05em; padding:6px 12px;width:fit-content;max-width:100%;text-wrap:balance} } /* ========================================================================== ГЛАВНАЯ: дизайн прежней страницы, повторённый на нашей вёрстке Заведено 28.08.2026. Все числа сняты замером с локальной копии сайта на 04.05.2026, а не подобраны на глаз: scripts\zamer-detalej-staroj.js и scripts\zamer-staroj-glavnoj.js. Опорные величины прежней главной: цвета #3A2613 тёмно-коричневый · #CA761A оранжевый · #FAF6F0 светлый фон плитки 330x409, поля 40/30, цифра 80px/600, срез угла 44px услуги плашка 490x462, поля 40/40/35/40, заголовок 24px/600, срез 34px крупные «Услуги.» и «ОТЗЫВЫ.» 100px/600 · «КАТАЛОГ» 70px/800 средние 35px/800 uppercase · надзаголовки 16px/700 uppercase ========================================================================== */ .ppzti-tovarnaya{ --temno-siniy:#3A2613; /* имя переменной прежнее, цвет коричневый: переименование затронуло бы 40 правил */ --oranzh-plitka:#CA761A; --svetlyj-fon:#FAF6F0; /* Снимок, которым залиты рамка карточки года и сами цифры «2017». В оригинале это была одна покупная фотография на обе роли. */ /* ⛔ В имени файла версия «-v2»: статика отдаётся с Cache-Control immutable на год, и перезапись под тем же именем до посетителя НЕ доходит. Правишь картинку, меняй имя. Поймано 28.08.2026: владелец видел прежний рисунок, хотя на сервере лежал новый. */ --god-snimok:url("/wp-content/uploads/2026/08/zalivka-cifr-3.webp"); /* ================================================================== ⭐⭐⭐ РУЧКИ: эти числа крутит владелец мышкой. Панель настройки открывается адресом с ?nastrojka=1 и сама читает строки ниже из этого же файла. ⚠️ ФОРМАТ СТРОКИ ОБЯЗАТЕЛЕН, панель разбирает его буквально: имя вида --r-что-то, значение с единицей, затем в своём комментарии подпись, минимум, максимум и шаг, разделённые вертикальной чертой. Образец смотреть прямо в строках ниже, они и есть образец. Новая ручка появляется в панели сама, править панель не надо. ⛔⛔ Внутрь ЭТОГО комментария знаки открытия и закрытия комментария писать нельзя: в CSS комментарии НЕ вкладываются, первый же закрывающий знак обрывает блок, остаток текста становится мусором, и все объявления ниже пропадают молча. Поймано 30.08.2026: пять ручек не объявились вовсе, отступ кнопки стал нулевым, а браузер не сказал ни слова. ================================================================== */ /* ⭐ Значения подобраны владельцем панелью 30.08.2026 в 15:52 на окне 1536px. Прежние: 394, 0, −164, 640, 80. */ --r-knopka-verh:410px; /* Кнопка заказа: отступ сверху | 0 | 900 | 2 */ --r-tekst-verh:-12px; /* Текст справа: отступ сверху | -200 | 500 | 2 */ --r-foto-verh:-134px; /* Снимок цеха: подъём вверх | -500 | 200 | 2 */ --r-foto-vysota:850px; /* Снимок цеха: наименьшая высота | 300 | 1400 | 5 */ --r-zazor-kolonok:38px; /* Зазор между колонками | 0 | 200 | 2 */ --r-znak-verh:56px; /* Плашка ГОСТ в герое: отступ сверху | 0 | 400 | 2 */ --r-geroj-vozduh:40px; /* Герой: воздух под строкой цены до низа экрана | 0 | 200 | 2 */ } /* ⭐ Срезанный верхний правый угол это фирменная деталь прежней главной: он повторяется у плиток чисел, карточек услуг, снимка цеха и карточек блога. ⚠️ clip-path и border-radius вместе не работают: обрезка идёт по контуру clip-path, а радиус игнорируется. Поэтому скругления здесь нет намеренно. ⛔ Классов `.tp-srez` и `.tp-srez-malyj` здесь больше НЕТ: они были объявлены, но в разметку не проставлены ни разу, и мобильное правило отключения среза применялось к пустоте. Срез записан прямо у каждого компонента, отключается тоже по ним. Замечание Кодекса от 28.08.2026, проверено поиском по проекту. */ /* -------------------------------------------------------------------------- 1. ПЛИТКИ ЧИСЕЛ: 24 часа, 60 км, 10 лет, 46 областей -------------------------------------------------------------------------- */ .tp-soderzhimoe .tp-schyot{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; margin:0 0 56px;list-style:none;padding:0 } .tp-schyot-plitka{ background:#fff;padding:40px 30px;display:flex;flex-direction:column; min-height:409px; clip-path:polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); box-shadow:0 0 0 1px rgba(58,38,19,.10) } /* Чередование как на прежней главной: белая, тёмная, белая, оранжевая */ /* ⭐ Вторая плитка синяя: владелец вернул ей цвет оригинала 31.08.2026. Записан прямо, а не через --temno-siniy: та держит каталог и значки, они остаются коричневыми. */ .tp-schyot-plitka:nth-child(2){background:#0B2B3F;box-shadow:none;color:#fff} .tp-schyot-plitka:nth-child(4){background:var(--oranzh-plitka);box-shadow:none;color:#fff} .tp-schyot-imya{ font-size:20px;font-weight:800;line-height:1.2;color:inherit; display:block;margin:0 0 28px } .tp-schyot-ryad{display:flex;align-items:flex-end;justify-content:space-between;gap:16px} .tp-schyot-znak{width:52px;height:52px;flex:0 0 52px;opacity:.9} .tp-schyot-znak svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none} .tp-schyot-cifra{text-align:right;line-height:1} .tp-schyot-cifra b{display:block;font-size:80px;font-weight:600;line-height:1.06;letter-spacing:-.02em} .tp-schyot-cifra span{display:block;font-size:16px;font-weight:500;margin-top:14px;opacity:.85} .tp-schyot-plitka p{ margin:28px 0 0;padding-top:24px;font-size:15px;line-height:1.55; border-top:1px solid currentColor;opacity:.75 } .tp-schyot-plitka:nth-child(2) p, .tp-schyot-plitka:nth-child(4) p{opacity:.9} /* ⛔ Секция «Про качество» переиспользует этот же компонент, но БЕЗ крупной цифры и значка. Высота 409px рассчитана под цифру 80px и оставляла пустоту: секция раздувалась на 157px против прежней главной. Замечание Кодекса 28.08.2026. */ .tp-soderzhimoe .tp-schyot.bez-cifr .tp-schyot-plitka{min-height:0} .tp-soderzhimoe .tp-schyot.bez-cifr .tp-schyot-imya{margin-bottom:20px} .tp-soderzhimoe .tp-schyot.bez-cifr .tp-schyot-plitka p{margin-top:0} /* -------------------------------------------------------------------------- 2. ПОЛОСА ГОСТ между двумя линиями -------------------------------------------------------------------------- */ .tp-gost-polosa{ display:flex;align-items:center;justify-content:space-between;gap:20px; /* ⚠️ Отступ снизу 76, а не 56: снимок поднят за заголовок на 164px и подходил к этой полосе на 6px. Двигаем полосу, а не подъём: подъём задал владелец. */ padding:26px 0;margin:0 0 76px; border-top:1px solid rgba(58,38,19,.15);border-bottom:1px solid rgba(58,38,19,.15); font-size:16px;font-weight:600;line-height:1.2;text-transform:uppercase; letter-spacing:.02em;color:var(--oranzh-plitka) } .tp-gost-polosa span:last-child{font-size:14px;font-weight:500;opacity:.85} /* -------------------------------------------------------------------------- 3. БЛОК ЗАВОДА: огромное имя, год, фото цеха, нумерованные пункты -------------------------------------------------------------------------- */ .tp-soderzhimoe .tp-imya-zavoda{ font-size:70px;font-weight:800;line-height:1;letter-spacing:-.01em; margin:0 0 44px;color:var(--tekst) } /* ⭐ Величины сняты мерилом с прежней главной, scripts\zamer-sekcii-zavoda.js: ряд 1380x804, три колонки 303 / 395 / 621 при зазоре 30. */ /* ⚠️ Колонки тянутся на высоту ряда, а не обрезаются по своему содержимому: в оригинале снимок шёл вровень с текстом и смыкал композицию. Карточку года держим у верха отдельно, она фиксированная. */ /* ⛔ minmax(0,1fr), а не 1fr: обычная доля не сжимается ниже min-content, и на 1200 текстовая колонка вылезала за окно на 36px. */ .tp-zavod{display:grid;grid-template-columns:303px 395px minmax(0,1fr); /* ⚠️ Зазор ТОЛЬКО между колонками. Между строками ноль: во второй строке стоит кнопка, и её верх обязан совпадать с низом снимка. */ column-gap:var(--r-zazor-kolonok);row-gap:0;align-items:stretch; /* Разрядка -0.16px стояла в прежней теме на всём тексте страницы */ letter-spacing:-.16px} /* ⭐ Выше заголовка «ППЗТИ» выходит только СНИМОК. Текст и карточка года начинаются на общей линии под заголовком. */ .tp-god,.tp-zavod-tekst{align-self:start} /* ⭐ Кнопка живёт во ВТОРОЙ строке сетки, а не внутри текстовой колонки. Так низ снимка сам совпадает с верхом кнопки на любой ширине: снимок занимает первую строку целиком, кнопка стоит под ней. Подбирать высоту снимка числом нельзя, она поедет от длины текста. */ .tp-god{grid-column:1;grid-row:1} .tp-zavod-foto{grid-column:2;grid-row:1} .tp-zavod-tekst{grid-column:3;grid-row:1} /* Кнопка стоит под карточкой года, в её же колонке и строке. ⚠️ Отступ сверху равен высоте карточки 354 плюс воздух 40: карточка фиксированного размера, поэтому число здесь надёжно. Вторая строка сетки для кнопки не годится, она начинается ниже высокого снимка. */ .tp-zavod-knopka{grid-column:1;grid-row:1;align-self:start; padding-left:0;margin-top:var(--r-knopka-verh)} /* ⛔ Перенёс элемент, проверь селекторы: правило кнопки было привязано к .tp-zavod-tekst, кнопка переехала в свою ячейку и превратилась в обычную подчёркнутую ссылку. Мерило совпадения при этом отвечало зелёным: оно меряет геометрию, а не вид. Поймано кадром 28.08.2026. */ .tp-soderzhimoe .tp-zavod-knopka a{text-decoration:none} /* Карточка года: рамка 7px из фотографии, внутри белая плашка. В оригинале обе, и рамка, и заливка цифр, берут ОДИН снимок. */ .tp-god{ position:relative;width:303px;height:354px;padding:7px;border-radius:10px; background:var(--god-snimok) center/cover no-repeat;overflow:visible } /* Сетка точек вокруг карточки: в оригинале её рисовал SVG 764x764 поверх блока */ /* ⛔ z-index:-1 уводил точки под фон предка, и их не было видно вовсе. Слой держим положительным, а белую плашку поднимаем над ним. */ .tp-god::before{ content:"";position:absolute;left:-46px;top:-46px;width:395px;height:446px; background-image:radial-gradient(rgba(58,38,19,.22) 1.4px, transparent 1.5px); background-size:22px 22px;pointer-events:none;z-index:0 } .tp-god-plashka{ position:relative;z-index:1; width:100%;height:100%;border-radius:5px;background:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:20px } /* ⭐⭐⭐ Заливка снимком идёт ОДНИМ полотном на обёртке: и цифра, и подпись вырезаны из одной картинки, как было в оригинале. ⛔ Фон нельзя вешать на потомка с position:absolute: background-clip:text у родителя не видит его глифов, и число пропадает целиком. Проверено кадром 28.08.2026: в карточке осталась одна подпись «Год основания». */ .tp-god-schyot{ display:block; /* ⛔ Цвет под картинкой обязателен (замечание Кодекса 28.08.2026): если снимок не загрузится, обрезка по тексту вырежет пустоту и число с подписью станут невидимыми. Тёмно-синяя заливка держит их читаемыми. */ background:var(--temno-siniy) var(--god-snimok) center/cover no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; /* ⚠️ Внутренний отступ держит выносные элементы цифр внутри контейнера: при 94px и весе 800 глифы Inter выходят за строку на 7px даже с интерлиньяжем 1.06. Мерило отступов считает это выходом за край. */ padding:8px 0 4px } /* И на случай браузера без обрезки по тексту: там прозрачный цвет означал бы пустую карточку, поэтому возвращаем обычный текст. */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .tp-god-schyot{background:none;-webkit-text-fill-color:currentColor;color:var(--temno-siniy)} } /* ⛔⭐⭐⭐ Разъезд лечится РЕЗЕРВОМ МЕСТА, а не подбором ширины: поле сразу шириной под конечное «2017» (227.7px при 94px/800 и ls -3.76px, снято мерилом), число внутри по центру. tabular-nums держит все четыре знака одинаковыми, поэтому рамка не дышит ни на одном кадре счёта. */ /* ⛔⭐⭐ Селекторы с префиксом обёртки намеренно: подпись это тоже span, и правило `.tp-god-schyot span` (класс плюс тег) перебивало одиночный `.tp-god-cifra`. Цифра съёживалась с 94px до 30px, а в css стояло 94. Поймано кадром 28.08.2026. */ .tp-god-schyot .tp-god-cifra{ display:grid;justify-items:center; /* ⚠️ Интерлиньяж 1.06, а не ровно кегль: при lh, равном 94px, глифы выходят за строку на 10px сверху, мерило отступов это ловит. В оригинале стояло 94px и та же беда была у него. */ font-size:94px;font-weight:800;line-height:100px;letter-spacing:-3.76px; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1 } /* ⭐ Резерв и бегущее число лежат в ОДНОЙ ячейке сетки: ширину задаёт резерв с конечным «2017», ячейка берёт наибольшую ширину и больше не меняется. ⛔ Не absolute и не подобранное число в пикселях: absolute выпадает из background-clip:text и число пропадает, а число в пикселях привязано к конкретному шрифту и разъезжается, если Inter не догрузится. visibility:hidden оставляет резерв в потоке, но не рисует его, поэтому в маску заливки он не попадает. ⚠️ В резерве стоит «0000», а не «2017»: если моноширинные цифры не поддержаны запасным шрифтом, нули шире любых других знаков, и промежуточное число всё равно не вылезет за резерв. Замечание Кодекса 28.08.2026. */ .tp-god-schyot .tp-god-cifra i, .tp-god-schyot .tp-god-cifra b{grid-area:1 / 1;font-weight:inherit;font-style:normal} .tp-god-schyot .tp-god-cifra i{visibility:hidden} /* ⚠️ Интерлиньяж, равный кеглю, режет выносные элементы: при 94px буквы выходят за строку и ложатся на подпись. Мерило отступов дало наезд 13px, поэтому подпись отодвинута своим верхним отступом, а кегль остался по замеру. */ .tp-god-schyot .tp-god-podpis{ display:block;margin-top:14px; font-size:30px;font-weight:800;line-height:32px;letter-spacing:-.6px } .tp-zavod-foto{margin:0} /* ⚠️ На прежней главной снимок производства был 395x804 и задавал вертикаль всему блоку. Держим ту же пропорцию, иначе широкий кадр ложится плоской полоской и композиция рассыпается. */ /* ⭐ Снимок выходит вверх ЗА заголовок «ППЗТИ» на 50px, как просил владелец. Подъём складывается из высоты заголовка 70, его нижнего отступа 44 и заданных 50, итого 164. Числа сняты мерилом, не на глаз. ⚠️ Отрицательный верхний отступ у растянутой ячейки сетки поднимает только ВЕРХ: высота ячейки при этом растёт на ту же величину, и низ остаётся на уровне кнопки. Поэтому height:100% здесь не нужен и мешает. */ .tp-zavod-foto{margin-top:var(--r-foto-verh)} .tp-zavod-foto img{ width:100%;height:100%;min-height:var(--r-foto-vysota);object-fit:cover;display:block;border-radius:10px; clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%) } .tp-zavod-tekst{padding-left:40px;margin-top:var(--r-tekst-verh)} .tp-zavod-tekst>p:first-child{ margin:0 0 30px;font-size:20px;font-weight:500;line-height:26px; letter-spacing:-.16px;color:#000 } /* Нумерованные пункты 01. и 02.: номер слева, иконка справа от текста. В оригинале колонка номера 100px, иконка 80x80, зазор до иконки 90px. */ /* ⛔ minmax(0,1fr) и здесь: с обычной долей иконка 80px выезжала за окно на 1200, потому что средняя колонка не сжималась ниже min-content текста. */ .tp-punkt-nom{display:grid;grid-template-columns:100px minmax(0,1fr) 80px; column-gap:0;align-items:start;padding:30px 0 40px; border-top:1px solid rgba(58,38,19,.14)} .tp-punkt-nom>i{font-style:normal;font-size:16px;font-weight:600; line-height:16px;letter-spacing:-.16px;color:#8C8C8C} /* ⚠️ Отступ до иконки урезан с 90 до 40: зазоры вокруг снимка выросли до 80 и забрали у текстовой колонки 100px, строки пунктов стали рваными. Возвращаем ширину здесь, а не сужением зазоров: их задал владелец. */ .tp-punkt-nom>div{padding-right:40px} .tp-punkt-nom b{display:block;font-size:20px;font-weight:600;line-height:20px; letter-spacing:-.8px;color:#000;margin:0 0 16px} .tp-punkt-nom p{margin:0;font-size:16px;font-weight:400;line-height:24px; letter-spacing:-.16px;color:#555} .tp-punkt-znak{ width:80px;height:80px;display:flex;align-items:center;justify-content:center; background:var(--svetlyj-fon);border-radius:10%;color:var(--temno-siniy) } .tp-punkt-znak svg{width:48px;height:48px;stroke:currentColor;fill:none} /* Кнопка секции: обводка 4px, круглый значок стрелки справа. ⛔ Селектор с префиксом родителя намеренно: общая `.tp-cta` объявлена как `.tp-soderzhimoe .tp-cta` и одиночный класс ей проигрывает. */ .tp-soderzhimoe .tp-zavod .tp-cta-obvodka{ display:inline-flex;align-items:center;gap:12px; margin-left:20px;padding:12px 12px 12px 30px; background:transparent;border:4px solid var(--oranzh-plitka);border-radius:50px; font-size:16px;font-weight:600;line-height:30px;letter-spacing:-.16px; color:#503416;text-decoration:none; transition:background-color .2s ease, color .2s ease } .tp-soderzhimoe .tp-zavod .tp-cta-obvodka:hover, .tp-soderzhimoe .tp-zavod .tp-cta-obvodka:focus-visible{ background:var(--oranzh-plitka);color:#fff } .tp-cta-obvodka em{ flex:0 0 auto;width:30px;height:30px;border-radius:50%; background:var(--oranzh-plitka);display:flex;align-items:center;justify-content:center } .tp-cta-obvodka em svg{width:15px;height:15px;stroke:#fff;stroke-width:2;fill:none} /* -------------------------------------------------------------------------- 3.4. НАЕЗД ПЕРВОЙ СЕКЦИИ НА ПЕРВЫЙ ЭКРАН ⭐ В оригинале секция плиток чисел имеет отступ сверху −40px и заходит на герой. Снято мерилом, пункт 6 плана. ⛔ Секции нужен свой фон и слой выше героя, иначе она уедет ПОД него и наезда не будет видно вовсе: у героя своя подложка с фотографией. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 3.10. ГЕРОЙ ГЛАВНОЙ: только факты и воздух между ними Слово Вени 31.08.2026: «с воздухом и по факту». Замер до правки: 566 знаков текста на первом экране против 65 у прежнего сайта, два абзаца подряд. Стало 298: надзаголовок, h1, лид фактами, кнопки, строка цены. ⛔ Селектор с классом .glavnyj обязателен: тот же .tp-geroj.s-fotom стоит на одиннадцати страницах диаметров, правка общего класса задела бы их. -------------------------------------------------------------------------- */ /* ⛔ Только НИЖНЕЕ поле. Верхнее задаёт `.ppzti-tovarnaya .tp-geroj{padding-top:118px}` и оно компенсирует абсолютную шапку. Сокращение `padding` целиком имеет ту же специфичность, стоит ниже по файлу и выигрывает: надзаголовок уезжает под логотип и телефон. Поймано кадром сразу после первой выкатки. */ /* ⭐⭐ Герой во весь экран на любом устройстве (слово Вени 31.08.2026). Замер до правки: на мониторе 1920x1080 недобирал 378 px, на планшете 1024x1366 недобирал 706, а на телефоне 360x640 наоборот вылезал на 171 и обрезал плитку. ⛔ Единица `svh`, а не `vh` и не `dvh`. `vh` на телефоне равна высоте при СВЁРНУТОЙ адресной строке: при развёрнутой низ героя уезжает под неё. `dvh` меняется прямо во время прокрутки, и герой дёргается по высоте. `svh` это наименьшая видимая высота: содержимое влезает всегда и не прыгает. Строка с `vh` идёт первой как запасная для старых браузеров. */ /* ⛔⭐⭐⭐ Плюс наезд следующей секции. Правило `.tp-geroj + .tp-blok` ниже тянет белый блок вверх на 40 px и кладёт его ПОВЕРХ низа героя (z-index 2). Без этой добавки герой честно равен экрану, но нижние 40 px закрыты белым, и внизу видна полоса. Замер высоты этого НЕ ловит: число сходится. Величина одна на оба правила через переменную, иначе разъедутся. */ .tp-geroj.glavnyj{ --naezd-sledushchej:40px; min-height:calc(100vh + var(--naezd-sledushchej)); min-height:calc(100svh + var(--naezd-sledushchej)); display:flex;align-items:center; padding-bottom:64px } /* Обёртка стала флекс-элементом и без явной ширины схлопывается по содержимому, а `margin:0 auto` внутри неё перестаёт центрировать. */ .tp-geroj.glavnyj > .tp-obertka{width:100%} .tp-geroj.glavnyj .tp-nadzagolovok{margin-bottom:24px} .tp-geroj.glavnyj .tp-lid{margin-top:26px;max-width:54ch} .tp-geroj.glavnyj .tp-knopki{margin-top:38px} /* Цена перестала быть абзацем и стала подписью под кнопками: тот же факт, но не спорит с лидом за внимание. */ .tp-geroj.glavnyj .tp-cena{margin-top:20px;font-size:15px;line-height:1.5; color:rgba(255,255,255,.72);max-width:none} .tp-geroj.glavnyj .tp-cena strong{font-size:16px;font-weight:700} .tp-geroj.glavnyj .tp-plitki{margin-top:44px} /* ⭐ Низкие экраны: старый телефон 360x640 и телефон в ландшафте. Растяжка до экрана там не нужна, нужно обратное: ужать содержимое, чтобы влезло. Запрос по ВЫСОТЕ, а не по ширине: на 390x844 ужимать нечего. */ @media (max-height:720px){ .tp-geroj.glavnyj .tp-nadzagolovok{margin-bottom:14px} .tp-geroj.glavnyj .tp-lid{margin-top:16px;font-size:15.5px;line-height:1.5} .tp-geroj.glavnyj .tp-knopki{margin-top:22px;gap:10px;flex-wrap:nowrap} .tp-geroj.glavnyj .tp-cena{margin-top:14px;font-size:14px} .tp-geroj.glavnyj .tp-plitki{margin-top:22px} /* Заголовок и кнопки съедают на низком экране больше всего. Кнопки в один ряд помещаются только компактными: на 360 px две обычные дают 390 px и переносятся, добавляя к высоте ещё строку. */ .tp-geroj.glavnyj h1{font-size:clamp(25px,5.6vw,40px);line-height:1.1} /* ⛔ Один `nowrap` на ряду не спасает: кнопка «Каталог продукции» вылезала за правый край на 360 px. Обе кнопки делят ширину поровну через flex:1, и текст в них не переносится. */ .tp-geroj.glavnyj .tp-cta{padding:12px 18px;font-size:13.5px; text-align:center;white-space:nowrap} .tp-geroj.glavnyj .tp-plitka{padding:12px 14px} .tp-geroj.glavnyj .tp-plitka b{font-size:18px} .tp-geroj.glavnyj .tp-plitka span{font-size:12.5px} } @media (max-height:560px){ .tp-geroj.glavnyj{min-height:0;padding-bottom:32px} } @media (max-width:767px){ .tp-geroj.glavnyj{padding-bottom:40px} .tp-geroj.glavnyj .tp-knopki{margin-top:28px} .tp-geroj.glavnyj .tp-plitki{margin-top:32px} } .tp-geroj + .tp-blok{ margin-top:-40px;position:relative;z-index:2; background:#fff;padding-top:40px } @media (max-width:767px){ /* На телефоне наезд убирается: секция и так начинается сразу под кадром */ .tp-geroj + .tp-blok{margin-top:0;padding-top:0} /* И добавка к высоте героя вместе с ним, иначе экран перерастёт на 40 px */ .tp-geroj.glavnyj{--naezd-sledushchej:0px} } /* -------------------------------------------------------------------------- 3.5. ШАПКА РАЗДЕЛА В ДВЕ КОЛОНКИ ⭐ Устройство снято мерилом с оригинала, scripts azvedka-sekcii-originala.js: сверху строка надзаголовков с зазором 10, под ней линия, затем ряд, где слева заголовок (322 до 532 по разделу), справа текст 470. У нас до 31.08.2026 заголовок шёл во всю строку 1380, а описание под ним на 770: две колонки не собирались нигде. -------------------------------------------------------------------------- */ .tp-soderzhimoe .tp-metki{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding-bottom:16px;margin-bottom:26px; border-bottom:1px solid rgba(58,38,19,.14) } /* ⛔ Рамка-пилюля снимается: общий .tp-nadzagolovok носит её от прежней темы, и в строке меток она перекрывала разделительную линию. В оригинале обе метки это просто строчки над линией. */ .tp-soderzhimoe .tp-metki .tp-nadzagolovok{ margin:0;border:0;background:none;padding:0;border-radius:0; font-size:12px;font-weight:700;line-height:1.2; text-transform:uppercase;letter-spacing:.06em } /* Правая метка мельче и слабее: в оригинале 121px против 560px у левой */ .tp-soderzhimoe .tp-metka-sprava{ font-size:12px;font-weight:700;line-height:1.2;text-transform:uppercase; letter-spacing:.06em;color:var(--tekst-slab);white-space:nowrap } /* ⛔ minmax(0,...) обязателен: без него длинный заголовок вроде «Частые вопросы по трубам ППУ и комплектации объектов» не даёт колонке сжаться, и текст справа выдавливается за окно. */ .tp-soderzhimoe .tp-shapka2{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px); gap:40px;align-items:start;margin:0 0 40px } .tp-soderzhimoe .tp-shapka2>:first-child{margin:0} .tp-soderzhimoe .tp-shapka2 .tp-podzag{margin:0;max-width:none} /* На планшете и телефоне колонки складываются: 470 справа не помещается */ @media (max-width:1023px){ .tp-soderzhimoe .tp-shapka2{grid-template-columns:minmax(0,1fr);gap:18px} /* ⚠️ Зазор 12, а не 6: на 390 метки переносятся на две строки, и мерило отступов считает 5px между буквами слипанием. Порог у него 10. */ .tp-soderzhimoe .tp-metki{flex-wrap:wrap;gap:12px} } /* -------------------------------------------------------------------------- 3.6. СЕРТИФИКАТЫ: слева текст, справа карусель по три документа ⭐ Устройство снято мерилом с оригинала: секция 604, слева блок 428x189, справа карусель 939x454, три документа в ряд, точки под ней. У нас до 31.08.2026 стояли 16 документов лентой по 196px без листания. -------------------------------------------------------------------------- */ .tp-soderzhimoe .tp-sert{ display:grid;grid-template-columns:minmax(0,428px) minmax(0,1fr); gap:52px;align-items:start } .tp-sert-tekst h2{margin:0 0 18px} .tp-sert-tekst p{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--tekst-slab)} .tp-sert-snoska{font-size:14px;opacity:.85} .tp-sert-karusel{position:relative} /* ⭐ Ровно три документа в кадре: ширина ячейки считается от ширины ленты за вычетом двух зазоров. ⛔ Не фиксированные 300px: на 1024 три штуки по 300 не помещаются и четвёртый выглядывает обрезанным. */ .tp-sert-lenta{ display:grid;grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * 20px) / 3); gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth } .tp-sert-lenta::-webkit-scrollbar{display:none} .tp-sert-lenta figure{margin:0;scroll-snap-align:start;background:#fff; border:1px solid rgba(58,38,19,.12)} /* ⭐ Высота всех документов одна, владелец просил обратить на это внимание. object-fit:contain, а не cover: сертификат это документ, обрезать его нельзя. */ .tp-sert-lenta img{width:100%;height:454px;object-fit:contain;display:block; background:#fff;aspect-ratio:auto} .tp-sert-strelka{ position:absolute;top:227px;transform:translateY(-50%);z-index:2; width:44px;height:44px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.94);box-shadow:0 2px 12px rgba(58,38,19,.22); display:flex;align-items:center;justify-content:center;color:var(--temno-siniy); transition:background-color .2s ease } .tp-sert-strelka:hover,.tp-sert-strelka:focus-visible{background:var(--oranzh-plitka);color:#fff} .tp-sert-strelka svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none} .tp-sert-strelka.nazad{left:-14px} .tp-sert-strelka.vpered{right:-14px} .tp-sert-strelka[disabled]{opacity:.3;pointer-events:none} .tp-sert-tochki{display:flex;justify-content:center;gap:9px;margin-top:22px;flex-wrap:wrap} .tp-sert-tochki button{ width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(58,38,19,.26);transition:background-color .2s ease } .tp-sert-tochki button[aria-selected=true]{background:var(--oranzh-plitka);width:22px;border-radius:5px} @media (max-width:1023px){ .tp-soderzhimoe .tp-sert{grid-template-columns:minmax(0,1fr);gap:26px} .tp-sert-lenta{grid-auto-columns:calc((100% - 20px) / 2)} .tp-sert-lenta img{height:360px} .tp-sert-strelka{top:180px} } @media (max-width:767px){ .tp-sert-lenta{grid-auto-columns:82%} .tp-sert-lenta img{height:300px} .tp-sert-strelka{display:none} } /* -------------------------------------------------------------------------- 3.7. ЧАСТЫЕ ВОПРОСЫ: белая карточка, слева текст и кнопка ⭐ Оригинал: карточка 1380x693 на прозрачном фоне, слева колонка 538 (заголовок 105, текст 150, кнопка 226x62), справа список 802, пункт 74. -------------------------------------------------------------------------- */ /* ⭐ Разобрано мерилом _razvedka-chavo-formy.js 01.09.2026. У прежнего сайта НЕТ ни карточки, ни рамок: колонка 538 слева, список 802 справа, а вопросы разделяют одни горизонтальные линии. Слово Вени: «разделители между секциями нам так же, убрать обводку как сейчас сделано». */ .tp-soderzhimoe .tp-faq-karta{ display:grid;grid-template-columns:minmax(0,538px) minmax(0,1fr); gap:40px;align-items:start; background:none;padding:0;clip-path:none } .tp-faq-tekst h2{margin:0 0 22px} /* Цитата с оранжевой полосой слева: у оригинала 3px solid, отступ 20px, кегль 20px обычного начертания. */ .tp-faq-tekst .tp-faq-vvod{ margin:0 0 18px;max-width:340px; font-size:16px;line-height:1.6;color:var(--tekst-slab) } /* Полоса только у ПЕРВОЙ цитаты: в оригинале выделен один абзац, а не все. */ .tp-faq-tekst .tp-faq-vvod:first-of-type{ border-left:3px solid var(--oranzh);padding-left:20px; font-size:17.5px;line-height:1.55;color:var(--tekst) } .tp-faq-tekst .tp-knopki{margin-top:34px} @media (max-width:1023px){ .tp-soderzhimoe .tp-faq-karta{grid-template-columns:minmax(0,1fr);gap:26px;padding:0} .tp-faq-tekst .tp-faq-vvod{max-width:none} } /* ⭐⭐ Список вопросов: ни рамки, ни скругления, ни фона. Линия сверху у каждого пункта плюс линия снизу у всего списка, как в оригинале (1px solid rgb(213,216,220) и rgb(220,224,227) соответственно). ⛔ Селектор с .tp-faq-karta: общее правило .tp-faq{border:1px...} лежит в общей части и стоит на страницах категорий, там карточка нужна. */ .tp-faq-karta .tp-faq{ margin-top:0;border:0;border-radius:0;background:none;overflow:visible; border-bottom:1px solid var(--liniya) } .tp-faq-karta .tp-faq details{border-bottom:0;border-top:1px solid var(--liniya)} .tp-faq-karta .tp-faq details:last-child{border-bottom:0} /* Поля 30px сверху и 25px снизу, место под значок слева 34px. */ .tp-faq-karta .tp-faq summary{ padding:30px 8px 25px 34px;font-size:17.5px;line-height:1.4 } /* ⭐ Значок «плюс» СЛЕВА, как в оригинале, а не стрелка справа. При раскрытии поворачивается на 45 градусов и читается как крестик. */ .tp-faq-karta .tp-faq summary::after{ content:"+";position:absolute;left:0;right:auto;top:28px; width:auto;height:auto;margin:0;border:0; font-size:22px;font-weight:400;line-height:1;color:var(--oranzh); transform:none;transition:transform .18s ease } .tp-faq-karta .tp-faq details[open] summary::after{ transform:rotate(45deg);margin-top:0 } .tp-faq-karta .tp-faq-otvet{padding:0 8px 26px 34px;font-size:16px} @media (max-width:767px){ .tp-faq-karta .tp-faq summary{padding:22px 6px 18px 28px;font-size:16px} .tp-faq-karta .tp-faq summary::after{top:20px;font-size:20px} .tp-faq-karta .tp-faq-otvet{padding:0 6px 20px 28px} } /* -------------------------------------------------------------------------- 3.8. ОТЗЫВЫ: слева белая карточка с листанием, справа заголовок ⭐ Оригинал: ряд из двух по 690x604, слева карточка с каруселью 630x480 и номерами страниц внизу, справа надзаголовок и «ОТЗЫВЫ» поверх фона. -------------------------------------------------------------------------- */ /* ⭐ Фотография цеха фоном, как в оригинале: там ряд 1380x854 лежит на снимке, белая карточка накрывает левую половину, заголовок стоит справа поверх фото. Файл тот же, снят мерилом с оригинала 31.08.2026. */ .tp-soderzhimoe .tp-otzyvy-ryad{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); /* ⭐ Оригинал: ряд 1380x854, фото фоном, ВНУТРЕННИЙ отступ сверху 250px. Именно он оставляет полосу секции видимой над содержимым, а фото при этом занимает всю высоту ряда, начиная с самого верха. */ gap:0;align-items:stretch;min-height:854px;padding-top:250px; background:#0B2B3F url("/wp-content/uploads/2026/03/1200.webp") center/cover no-repeat } /* ⭐ Поля сняты с оригинала: левая колонка 690x604, отступы 80 сверху и 60 справа, снизу ноль. */ .tp-otzyvy-karta{ background:#fff;color:var(--tekst);padding:80px 60px 40px 40px; min-height:604px; display:flex;flex-direction:column;min-width:0;overflow:hidden; clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%) } /* ⛔ Надзаголовок внутри карточки перекрашивается: правило секции красит его в белый по светлому, и на белой карточке он пропадал целиком. */ .tp-blok.otzyvy-temn .tp-otzyvy-karta .tp-nadzagolovok{color:var(--tekst-slab)} /* ⛔⭐⭐ min-width:0 обязателен: лента лежит в flex-колонке, а flex-элемент по умолчанию не сжимается ниже своего min-content. Ширина ленты выросла по трём слайдам разом, overflow не сработал, и второй с третьим отзывом вылезли за карточку на 500 до 1170px. Мерило отступов дало 16 замечаний и наезд заголовка на чужой текст. Поймано 31.08.2026. */ .tp-otzyvy-lenta{ flex:1;min-width:0;width:100%; display:grid;grid-auto-flow:column;grid-auto-columns:100%; gap:0;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth; margin-top:26px } .tp-otzyvy-lenta::-webkit-scrollbar{display:none} .tp-otzyvy-lenta .tp-otzyv{ scroll-snap-align:start;background:none;padding:0;border:0;margin:0; display:flex;flex-direction:column;justify-content:space-between } .tp-otzyvy-lenta .tp-otzyv p{ margin:0;font-size:18px;line-height:1.55;color:var(--tekst) } .tp-otzyvy-lenta .tp-otzyv footer{margin-top:26px;border:0;padding:0} .tp-otzyvy-lenta .tp-otzyv footer b{display:block;font-size:16px;font-weight:600} .tp-otzyvy-lenta .tp-otzyv footer span{ display:block;margin-top:5px;font-size:14px;color:var(--tekst-slab) } /* Номера страниц: 01 02 03, как в оригинале */ .tp-otzyvy-nomera{display:flex;justify-content:center;gap:20px;margin-top:24px} .tp-otzyvy-nomera button{ border:0;background:none;padding:0;cursor:pointer; font-size:15px;font-weight:600;font-variant-numeric:tabular-nums; /* ⚠️ Прозрачность .62, а не .4: при .4 неактивный номер давал контраст 2.34 против порога 4.5, мерило контраста поймало три новых замечания. Активный красим тёмно-коричневым, а не оранжевым: оранжевый на белом даёт 3.43 и тоже не проходит. */ /* ⚠️ .72, а не .62: при .62 контраст 4.27 против порога 4.5, мерило контраста поймало номера 02 и 03. */ color:rgba(58,38,19,.72);transition:color .2s ease } .tp-otzyvy-nomera button[aria-selected="true"]{color:#7A4008;font-weight:700} /* ⭐ Правая колонка: отступы 60 справа и снизу, как в оригинале. */ .tp-otzyvy-zag{ position:relative;z-index:1;min-height:604px; display:flex;flex-direction:column;justify-content:flex-end; padding:0 60px 60px 52px } /* ⚠️ Затемнение снизу под текстом: снимок цеха светлый в верхней части, и белый заголовок на нём читался бы через раз. Слой лежит ПОД буквами. */ .tp-otzyvy-zag::before{ content:"";position:absolute;inset:auto 0 0 0;height:70%;z-index:-1; background:linear-gradient(transparent, rgba(11,43,63,.82)) } /* ⛔ Заголовок справа НЕ белый: тёмный градиент секции идёт только первые 250px, а колонка стоит ниже, и «Отзывы.» пропадало на светлом фоне целиком. В оригинале справа лежала тёмная фотография, у нас её нет. Поймано кадром 31.08.2026, мерило контраста этого не видит: заголовок считается крупным, а порог для крупного 3.0. */ /* ⚠️ Отступ 16, а не 14: мерило отступов считает 6px между буквами метки и заголовка слипанием, порог у него 10. */ .tp-otzyvy-zag .tp-nadzagolovok{margin-bottom:16px} /* ⭐ Белый вернулся 31.08.2026 вместе с фотографией под ним. */ .tp-blok.otzyvy-temn .tp-otzyvy-zag .tp-zag-belyj{color:#fff} .tp-blok.otzyvy-temn .tp-otzyvy-zag .tp-nadzagolovok{color:rgba(255,255,255,.72)} @media (max-width:1023px){ .tp-soderzhimoe .tp-otzyvy-ryad{grid-template-columns:minmax(0,1fr);min-height:0} /* ⚠️ Отступы обязательны и на узком: заголовок стоит на фотографии, и без полей буквы упираются в край секции. Мерило дало 2px сверху и 0 слева. */ .tp-otzyvy-zag{order:-1;padding:26px 20px 30px} .tp-otzyvy-karta{padding:30px 24px} } @media (max-width:767px){ .tp-otzyvy-karta{clip-path:none} .tp-otzyvy-lenta .tp-otzyv p{font-size:16px} } /* -------------------------------------------------------------------------- 3.9. НИЖНИЙ ЭКРАН С ФОРМОЙ ⭐ Оригинал: слева колонка 672 с рисунком 668x438 и сеткой контактов две колонки по 316, справа белая карточка формы. Пункт 8 плана. -------------------------------------------------------------------------- */ /* ⭐⭐ Карточка формы по числам оригинала (мерило _polya-formy-originala.js 01.09.2026): 678x844, фон белый, скругление 10px, поля 75px 100px. Прежний срезанный угол снят по слову Вени «полностью дизайн перенеси». ⛔ Класс .glavnaya-forma обязателен: та же .tp-forma стоит на страницах категорий, там карточка своя. */ .tp-soderzhimoe .tp-blok.seryj .tp-forma, .tp-soderzhimoe .tp-forma{ background:#fff;padding:44px 40px;border-radius:0; clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%) } @media (max-width:767px){ .tp-soderzhimoe .tp-blok.seryj .tp-forma, .tp-soderzhimoe .tp-forma{padding:28px 20px;clip-path:none} } .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma{ border-radius:10px;clip-path:none;padding:75px 100px } /* Заголовок в карточке: 20px обычного начертания, по центру, отступ 50. */ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma-zag{ font-size:20px;font-weight:400;line-height:1.45;text-align:center; margin:0 0 50px;color:var(--tekst) } /* Поля: те же 16px сверху и снизу и кегль 18, что у прежнего сайта, плюс зазор 25px между ними (у нас поля стояли вплотную). */ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 input[type="text"], .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 input[type="email"], .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 input[type="tel"], .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 textarea{ padding:16px 0;font-size:18px;margin-top:25px } .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 textarea{min-height:100px} .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 button[type="submit"], .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 input[type="submit"]{ margin-top:30px;padding:12px 12px 12px 30px;font-size:16px } /* ⭐ Кружок со стрелкой справа, как у кнопки прежнего сайта (260x64). Рисуем псевдоэлементом: разметку кнопки задаёт Contact Form 7, узел туда не вставить. У `input[type=submit]` псевдоэлементов нет, поэтому кружок появится только на варианте с `button`, а он у нас и стоит. */ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 button[type="submit"]{ display:inline-flex;align-items:center;gap:14px } .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 button[type="submit"]::after{ content:"";flex:0 0 auto;width:34px;height:34px;border-radius:50%; background:#0B2B3F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/17px 17px no-repeat } /* Заголовок левой колонки: 30px, как «Проконсультирует инженер» в оригинале. */ .tp-soderzhimoe .tp-zag-kontakt{ font-size:30px;font-weight:600;line-height:1.2;margin:0 0 26px;color:var(--tekst) } /* Контакты отделены линией сверху, поля 35px, как в оригинале. */ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-kontakty{ border-top:1px solid var(--liniya);padding-top:35px;margin-top:10px;gap:34px 40px } .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-kontakt b{ font-size:16px;font-weight:400;text-transform:none;letter-spacing:0; color:#8C8C8C;margin-bottom:14px } .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-kontakt span, .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-kontakt a{font-size:16px;font-weight:500;color:var(--tekst)} @media (max-width:1023px){ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma{padding:44px 40px} .tp-soderzhimoe .tp-zag-kontakt{font-size:26px} } @media (max-width:767px){ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma{padding:28px 20px;border-radius:10px} .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma-zag{font-size:17px;margin-bottom:28px} .tp-soderzhimoe .tp-zag-kontakt{font-size:23px} } /* Рисунок площадки под полупрозрачной пеленой, как в оригинале: мерило razvedka-foto-zavoda.js сняло с ppu.local показ 668x438, opacity 0.2, без рамки и скругления. Обёртке снимаем чужой max-width 420. */ .tp-soderzhimoe .tp-foto-kontakt{margin:0 0 26px;max-width:none;width:100%} .tp-soderzhimoe .tp-foto-kontakt img{ width:100%;max-width:668px;height:auto;display:block; opacity:.2;border:0;border-radius:0;box-shadow:none; /* ⛔ Общее правило картинок задаёт aspect-ratio 3/2 и object-fit cover: рисунок 668x438 растягивался до 441 по высоте и срезался по краям. Ему нужны собственные пропорции, как в оригинале. */ aspect-ratio:auto;object-fit:contain } /* Контакты в две колонки, как в оригинале, а не столбиком */ .tp-soderzhimoe .tp-kontakty{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px } @media (max-width:767px){ .tp-soderzhimoe .tp-kontakty{grid-template-columns:minmax(0,1fr);gap:20px} } /* ⭐ Телефон с низким экраном: 360x640 не добирал 23 px даже после ужатия. Оба медиазапроса выше подходят к нему одновременно, поэтому правило стоит ПОСЛЕ них: при равной специфичности выигрывает то, что ниже по файлу. Верхнее поле 86 px: шапка на телефоне кончается на 80, зазор остаётся. */ @media (max-height:720px) and (max-width:767px){ .tp-geroj.glavnyj{padding-top:86px;padding-bottom:24px} /* ⛔ Растяжка кнопок поровну нужна ТОЛЬКО узкому экрану: на 360 px две обычные не помещаются в ряд. До 02.09.2026 правило стояло в блоке по одной высоте и растягивало кнопки на всю колонку на ноутбуке 1366x768 и на 1280x720: две плашки по 455 px. Поймано кадром. */ .tp-geroj.glavnyj .tp-cta{padding:12px 10px;flex:1 1 0;min-width:0} } /* ⭐⭐ Завеса над фотографией как в оригинале (замер _zavesa-originala.js 31.08.2026). У прежнего сайта это ОДИН градиент 90deg от плотного rgb(11,43,63) слева до ПОЛНОЙ прозрачности справа, поэтому фото читается на всю ширину экрана. У нас справа оставалось 40 процентов затемнения, и правая половина кадра гасла: Веня сказал «не на весь экран». ⛔ Только для главной: тот же .tp-geroj-zaves лежит на страницах диаметров, где текст идёт в две колонки и ему нужна плотная подложка шире. */ .tp-geroj.glavnyj .tp-geroj-zaves{ background: linear-gradient(90deg, rgba(9,26,36,.94) 0%, rgba(9,26,36,.88) 30%, rgba(9,26,36,.62) 55%, rgba(9,26,36,.18) 78%, rgba(9,26,36,0) 100%), linear-gradient(to bottom, rgba(9,26,36,.46) 0%, rgba(9,26,36,0) 18%) } /* ⛔⭐⭐ На узком экране горизонтальный градиент не работает: текст идёт во всю ширину и правым краем выезжает на прозрачную часть, где под ним снег. Замер по прямоугольникам букв на 390 px: лид дал 1.49 при пороге 4.5. Поэтому телефону и планшету даём РОВНУЮ завесу сверху вниз. */ /* ⚠️ 02.09.2026: после перестройки первого экрана строка цены опустилась ближе к светлому низу снимка и дала 4.49 при пороге 4.5 на 390, слайд 1. Нижние точки завесы уплотнены с .70/.64 до .74/.70, верх не тронут. */ @media (max-width:1023px){ .tp-geroj.glavnyj .tp-geroj-zaves{ background:linear-gradient(180deg, rgba(9,26,36,.80) 0%, rgba(9,26,36,.74) 55%, rgba(9,26,36,.70) 100%) } } /* ⚠️ Планшету нужна завеса плотнее телефона: строки текста длиннее и уходят вправо, где на снимке цеха светлое небо. Замер по девяти слайдам на 768x1024: со сплошными .80/.70/.64 строка цены дала 3.96 при пороге 4.5. */ @media (min-width:768px) and (max-width:1023px){ .tp-geroj.glavnyj .tp-geroj-zaves{ background:linear-gradient(180deg, rgba(9,26,36,.86) 0%, rgba(9,26,36,.78) 55%, rgba(9,26,36,.72) 100%) } } /* ⛔⭐⭐ Вторая кнопка в герое была `background:transparent`, то есть белые буквы прямо на фотографии. Галерея крутит девять снимков, и под кнопкой рано или поздно оказывается снег: на 1280x720 замер дал 4.07 при пороге 4.5. Прозрачность проверять бессмысленно, снимок меняется каждые несколько секунд, поэтому кнопке нужна собственная подложка. */ .tp-geroj.glavnyj .tp-cta.vtor{ background:rgba(9,26,36,.42); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px) } .tp-geroj.glavnyj .tp-cta.vtor:hover, .tp-geroj.glavnyj .tp-cta.vtor:focus-visible{ background:rgba(9,26,36,.62);border-color:#fff } /* ⭐ Поля в один столбец, как в оригинале: там «Ваше Имя», «Email», «Телефон» и «Сообщение» идут друг под другом во всю ширину. У нас сетка формы стояла в две колонки по 220 px, и телефон вставал рядом с именем. */ /* ⛔ Смена `grid-template-columns` тут не работает: колонки задаёт свой же css формы правилом сильнее нашего, и замер показал «0px 440px» вместо одной колонки, а поля схлопнулись в ноль ширины. Надёжнее не трогать сетку, а растянуть каждую ячейку на все колонки. */ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 .column-100{ grid-column:1 / -1 } /* ⛔⭐⭐ Чёрная рамка вокруг поля при наборе. Она стояла ради контраста индикатора фокуса (оранжевая линия 1px давала 1.46 при норме 3), но выглядит грубо. Слово Вени 01.09.2026: «убери эту страшную обводку». ⭐ Индикатор остаётся, но другой: линия снизу 2px тёмным цветом текста. Контраст к белому около 15 к 1, то есть с запасом против нормы 3, и при этом видно ровно то поле, в котором курсор. Убирать индикатор совсем нельзя: с клавиатуры станет непонятно, куда идёт ввод. */ .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 input:focus, .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 textarea:focus, .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 input:focus-visible, .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-forma .wpcf7 textarea:focus-visible{ outline:0;outline-offset:0; border-bottom:2px solid var(--tekst); background:transparent } /* ⭐⭐ Поля обёртки как на странице-эталоне /perehody-ppu/. Правило снято мерилом _otkuda-pravilo.js: там `@media (max-width:700px)` даёт 8px, а у главной оставалось общее правило 30px. Слово Вени: «в мобиле отступы не сработали слева и справа». ⚠️ Порог именно 700, а не 767: так на эталоне, и планшет 768 остаётся с привычными 30px. ⛔ Моя прежняя сверка врала: она брала первую `.tp-obertka` на странице, а это обёртка ШАПКИ, у неё свои 15px на обеих страницах. Объект проверки надо называть точно: обёртка СОДЕРЖИМОГО. */ @media (max-width:700px){ .tp-soderzhimoe .tp-obertka{padding-left:8px;padding-right:8px} } /* -------------------------------------------------------------------------- 3.10.1. ПЕРВЫЙ ЭКРАН: ЗАГОЛОВОК ВВЕРХУ, ТЕКСТ И ПЛИТКА ВНИЗУ Слово Вени 01.09.2026: «всё что есть от заголовка опускаем ниже до уровня 2000 метров труб, 2000 метров труб вправо на десктоп». Разметка героя разделена на `.tp-geroj-verh` (плашка ГОСТ и h1) и `.tp-geroj-niz` (лид, кнопки, строка цены). Плитка становится соседом низа. ⛔ Только от 1024: на планшете и телефоне всё идёт столбиком, там ряд из двух колонок не поместится. -------------------------------------------------------------------------- */ @media (min-width:1024px){ /* ⭐ 02.09.2026, слово Вени: «заголовок опусти к тексту, дальше вместе с заголовком и всё что ниже опустить к низу экрана, 2000 метров тоже ниже». Зазор заголовка и лида 104 → 28, обёртка прижата к низу героя. Нижнее поле считается от наезда следующей секции: под строкой цены остаётся воздух до белого из ручки geroj-vozduh, а не 24, как при прежних 64. */ /* Уточнение Вени в тот же час: «ГОСТ 30732-2020 · завод в Павловском Посаде оставь сверху как и было». Плашка остаётся у верха героя, между ней и заголовком пустая строка-распорка 1fr, которая на низком экране схлопывается в ноль. Обёртка растянута на всю высоту героя, иначе верху и низу не от чего отсчитываться. Отступ плашки задан ручкой с именем znak-verh (строка объявления в блоке ручек): 112 px давали ей то же место, что при центровке на 1920x950, по слову Вени стало 56. ⛔ Имя ручки со знаком двоеточия в начале строки комментария писать нельзя: панель считает такие строки объявлениями и ругается. */ /* 02.09.2026, второй кадр Вени: «внизу сократи расстояние в 2 раза, плашку выше». Воздух 80 → 40 и вынесен ручкой, плашка 112 → 56. */ .tp-geroj.glavnyj{align-items:stretch; padding-bottom:calc(var(--naezd-sledushchej) + var(--r-geroj-vozduh))} .tp-geroj.glavnyj>.tp-obertka{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:"znak znak" "prostor prostor" "verh verh" "niz plitka"; align-items:end;column-gap:48px;row-gap:28px } /* Обе обёртки растворяются: плашка, заголовок, низ и плитка становятся прямыми участниками сетки, разметка не меняется. */ .tp-geroj.glavnyj .tp-geroj-setka, .tp-geroj.glavnyj .tp-geroj-verh{display:contents} .tp-geroj.glavnyj .tp-nadzagolovok{grid-area:znak;justify-self:start;align-self:start; margin:var(--r-znak-verh) 0 0} .tp-geroj.glavnyj .tp-geroj-verh h1{grid-area:verh} .tp-geroj.glavnyj .tp-geroj-niz{grid-area:niz} /* ⭐ Плитка уходит вправо и встаёт на один уровень с текстом: обе ячейки выровнены по нижнему краю через `align-items:end` у сетки. */ .tp-geroj.glavnyj .tp-plitki{ grid-area:plitka;margin:0;justify-self:end; grid-template-columns:minmax(0,auto) } /* Первый отступ лида больше не нужен: расстояние держит сетка. */ .tp-geroj.glavnyj .tp-geroj-niz .tp-lid{margin-top:0} } /* Низкий широкий экран (ландшафт планшета): растяжка снята выше, и нижнее поле возвращается к тесному, иначе правило из блока 1024+ его перебьёт. */ @media (min-width:1024px) and (max-height:560px){ .tp-geroj.glavnyj{padding-bottom:32px} } /* -------------------------------------------------------------------------- 3.11. МОБИЛА: ПЛИТКИ И КАРТОЧКИ КАРУСЕЛЬЮ Слово Вени 01.09.2026: «мобилу сделать с такими же отступами как переходы ППУ, эти блоки каруселью в мобиле». Рецепт снят мерилом _razvedka-mobily-etalona.js со страницы /perehody-ppu/, где карусели уже работают: лента flex, зазор 12, поля 2px 8px 12px, отступы 0 -8px, прилипание по оси X, карточка 86 процентов ширины. ⭐ Правило владельца от 25.08.2026: одна карточка видна целиком, от следующей виден край, иначе непонятно, что есть продолжение. Отсюда 86%. ⛔ Отрицательные поля -8px обязательны в паре с padding 8px: без них карточка обрезается о край обёртки, а тень уходит под соседа. -------------------------------------------------------------------------- */ @media (max-width:767px){ /* ⛔⭐⭐⭐ `scroll-padding-left` обязателен вместе с `padding-left`. Без него `scroll-snap-type:x mandatory` при ЗАГРУЗКЕ страницы сам прокручивает ленту к первой точке привязки, а точка считается без учёта поля: замер дал `scrollLeft:20` и карточку на нуле от края. Веня видел это как «после перезагрузки отступы прибиваются к лево вплотную». Величина обязана совпадать с `padding-left`. */ .tp-soderzhimoe .tp-schyot, .tp-soderzhimoe .tp-stati{ display:flex;gap:12px;margin:0 -8px;padding:2px 8px 12px 20px; scroll-padding-left:20px; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:thin; grid-template-columns:none } .tp-soderzhimoe .tp-schyot>*, .tp-soderzhimoe .tp-stati>*{ flex:0 0 86%;scroll-snap-align:start;min-width:0 } /* Плитка внутри ленты тянется по высоте соседей: иначе короткая карточка выглядит обрезанной рядом с длинной. */ .tp-soderzhimoe .tp-schyot>*{display:flex;flex-direction:column} } /* ⭐⭐ Срез угла карточкам в мобильной карусели. Слово Вени 01.09.2026: «первый блок карусели сделай с такими обрезами угла сверху справа». ⛔ Срез снимало правило `@media (max-width:767px){.tp-schyot-plitka, .tp-statya img{clip-path:none}}` выше по файлу: на узкой колонке срез в 44px был велик. В карусели карточка 322px, и срез уместен, но меньше: 28px. ⚠️ Правило обязано стоять НИЖЕ того, что снимает срез: специфичность равная. И вторая половина той же просьбы, «чтобы не сливались»: белая карточка на светлом фоне отличалась от него только тенью в 10 процентов. Усиливаем обводку и добавляем мягкую тень, иначе срез не читается вовсе. */ @media (max-width:767px){ /* ⛔⭐⭐⭐ `clip-path` режет и `box-shadow` тоже: обводка вдоль скошенного края пропадает, и на белой карточке срез не виден вовсе. Поймано кадром: на тёмной плитке угол читался, на белой нет. ⭐ `filter: drop-shadow` накладывается ПОСЛЕ обрезки и обводит силуэт, включая скос. Две тени подряд: тонкая по контуру и мягкая для отрыва от фона. Сам `box-shadow` при этом обнуляем, иначе он рисует прямой прямоугольник поверх скоса. */ .tp-soderzhimoe .tp-schyot .tp-schyot-plitka{ clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); box-shadow:none; filter:drop-shadow(0 0 .6px rgba(58,38,19,.55)) drop-shadow(0 5px 14px rgba(58,38,19,.10)) } /* У тёмной и оранжевой заливка своя, им нужна только мягкая тень. */ .tp-soderzhimoe .tp-schyot .tp-schyot-plitka:nth-child(2), .tp-soderzhimoe .tp-schyot .tp-schyot-plitka:nth-child(4){ filter:drop-shadow(0 5px 14px rgba(58,38,19,.14)) } .tp-soderzhimoe .tp-stati .tp-statya img{ clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%) } /* Воздух под лентой, чтобы карусель не липла к следующему блоку. */ .tp-soderzhimoe .tp-schyot, .tp-soderzhimoe .tp-stati{padding-bottom:20px} /* ⭐⭐ Белая плитка на БЕЛОЙ секции неразличима, сколько контур ни усиливай: тонкая линия в 0.7px на телефоне просто теряется. Решение Вени 01.09.2026: «белые блоки заменить цветом бежевого как бекграунд у нижнего блока с каруселью». Это rgb(247,244,240), фон секции `.tp-blok.seryj`. Заливка отличает карточку от фона сама, контур остаётся только тенью. */ .tp-soderzhimoe .tp-blok:not(.seryj) .tp-schyot .tp-schyot-plitka{ background:#F7F4F0; filter:drop-shadow(0 4px 12px rgba(58,38,19,.10)) } /* Тёмная и оранжевая держат свою заливку. */ .tp-soderzhimoe .tp-blok:not(.seryj) .tp-schyot .tp-schyot-plitka:nth-child(2){background:#0B2B3F} .tp-soderzhimoe .tp-blok:not(.seryj) .tp-schyot .tp-schyot-plitka:nth-child(4){background:var(--oranzh-plitka)} /* ⭐ Воздух между баннером и первой каруселью: замер показал зазор 0. */ .tp-soderzhimoe .tp-geroj + .tp-blok{padding-top:28px} } /* -------------------------------------------------------------------------- 3.12. МОБИЛА: ЗАМЕЧАНИЯ ВЕНИ ОТ 01.09.2026, ВТОРОЙ ЗАХОД -------------------------------------------------------------------------- */ @media (max-width:767px){ /* ⭐ «ППЗТИ опусти в блок 2017, блок подними выше»: заголовок заходит на плашку с годом, зазор в 44px между ними снят. z-index обязателен, иначе поднятая плашка накроет буквы. */ /* Величина подобрана замером: заголовок 38px высотой, плашка начиналась на 19px ниже его низа. Чтобы буквы легли ЦЕЛИКОМ на белое, а не половиной на фон секции, плашку поднимаем на высоту заголовка плюс воздух. */ .tp-soderzhimoe .tp-imya-zavoda{margin-bottom:0;position:relative;z-index:2} .tp-soderzhimoe .tp-zavod{margin-top:-64px} .tp-soderzhimoe .tp-god-plashka{padding-top:74px} /* ⭐ «Услуги тоже сделай каруселью и убери кружок». Рецепт тот же, что у плиток и статей. ⛔ `position:static` обязателен: у карточки услуги стоит `sticky` для наложения при прокрутке на десктопе, и в горизонтальной ленте она из-за него прилипает к краю и перекрывает соседей. */ .tp-soderzhimoe .tp-uslugi-lenta{ display:flex;gap:12px;margin:0 -8px;padding:2px 8px 20px 20px; scroll-padding-left:20px; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:thin; grid-template-columns:none } /* ⛔ `display:flex` здесь ставит СНИМОК и плашку в один ряд: замер показал плашку 181px при карточке 311. Внутри карточки порядок вертикальный, поэтому блочная раскладка. */ .tp-soderzhimoe .tp-uslugi-lenta .tp-usluga{ flex:0 0 86%;scroll-snap-align:start;min-width:0; position:static;min-height:0;margin:0;top:auto;display:block } .tp-soderzhimoe .tp-uslugi-lenta .tp-usluga img{width:100%;height:auto;display:block} .tp-soderzhimoe .tp-uslugi-lenta .tp-usluga-plashka{ margin:-28px 0 0;width:100% } /* Кружок со значком: на узкой карточке он съедает 92px высоты и ничего не сообщает. */ .tp-soderzhimoe .tp-usluga-znak{display:none} /* ⭐⭐ Отзывы: было три этажа подряд, длинное фото на 250px, потом заголовок, потом белая карточка. Слово Вени: «отзывы поднять выше на картинку в белом блоке с отступами 20». Теперь фото работает фоном, заголовок лежит на нём, а белая карточка с отзывом наложена поверх с полями 20 по кругу. */ .tp-soderzhimoe .tp-otzyvy-ryad{ padding-top:0;min-height:0;background-position:center top } .tp-soderzhimoe .tp-otzyvy-zag{ min-height:0;padding:26px 20px 22px } .tp-soderzhimoe .tp-otzyvy-karta{ min-height:0;margin:0 20px 20px;padding:24px 20px } } /* ⛔⭐⭐⭐ ПОЛОСА ПОД ОТЗЫВАМИ: тёмный фон ряда просвечивал полосой в 1px. Веня показывал её трижды, а поиск по границам отвечал «полосы нет»: границы тут ни при чём. Нашлось пиксельным разбором кадра (`scripts\_pikseli-pod-kartochkoj.js`): строка ровно над низом карточки имеет яркость 222 против 255 у белого. Причина: низ ряда и низ карточки совпадают до сотых (-831.23), но координата ДРОБНАЯ, и на границе остаётся полупиксель тёмной заливки ряда. ⭐ Лечение: карточка перекрывает край на пиксель. */ .tp-soderzhimoe .tp-otzyvy-karta{margin-bottom:-1px} /* -------------------------------------------------------------------------- 3.13. ЗАГОЛОВОК ППЗТИ И ТЕКСТ О ЗАВОДЕ НА МОБИЛЕ -------------------------------------------------------------------------- */ @media (max-width:767px){ /* ⭐ «ППЗТИ сделай так же как 2017 и выше его ровно по середине»: тот же приём, что у года, снимок вырезан по буквам. Заливка цветом под картинкой обязательна: если снимок не загрузится, прозрачный текст станет пустотой. */ .tp-soderzhimoe .tp-imya-zavoda{ text-align:center; background:var(--temno-siniy) var(--god-snimok) center/cover no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; padding:6px 0 4px } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .tp-soderzhimoe .tp-imya-zavoda{ background:none;-webkit-text-fill-color:currentColor;color:var(--tekst) } } /* ⭐ Портянка текста: было 306 знаков одним куском кеглем 20px с плотным интерлиньяжем 26px. Разбит на два абзаца в разметке, здесь кегль спокойнее и строки просторнее. */ .tp-soderzhimoe .tp-zavod-tekst>p{ font-size:17px;line-height:1.62;margin:0 0 16px } .tp-soderzhimoe .tp-zavod-tekst>p:last-of-type{margin-bottom:0} } /* -------------------------------------------------------------------------- 4. КРУПНЫЕ ЗАГОЛОВКИ РАЗДЕЛОВ -------------------------------------------------------------------------- */ .tp-soderzhimoe .tp-zag-krupno{ font-size:70px;font-weight:800;line-height:1;letter-spacing:-.01em; margin:16px 0 18px;text-transform:uppercase;color:var(--tekst) } .tp-soderzhimoe .tp-zag-belyj{ font-size:100px;font-weight:600;line-height:1;letter-spacing:-.02em; margin:0;color:#fff } .tp-soderzhimoe .tp-zag-belyj i{font-style:normal;color:var(--oranzh)} .tp-soderzhimoe .tp-zag-srednij{ font-size:35px;font-weight:800;line-height:1.1;text-transform:uppercase; margin:0 0 18px;color:var(--tekst) } /* -------------------------------------------------------------------------- 5. КАТАЛОГ: плитки с фотографией и подписью поверх -------------------------------------------------------------------------- */ .tp-katalog{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .tp-katalog a{ position:relative;display:block;overflow:hidden;text-decoration:none; aspect-ratio:1/1;background:var(--temno-siniy) } .tp-katalog img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .4s ease} .tp-katalog a:hover img,.tp-katalog a:focus-visible img{transform:scale(1.04)} /* ⭐ 02.09.2026, слово Вени по кадру 1920: «описание опусти в них на коричневое, его не видно», и уточнение: «я просил опустить вниз описание, тогда не нужно растягивать коричневое поле». Подпись стояла над плашкой на светлой части снимка. Теперь она внизу, ПОД названием: название поднято на строку (нижнее поле плашки 42 вместо 20), подпись на 20 от низа. Высота плашки 76 вместо 62, градиент прежний. На телефоне подпись скрыта (3.12). ⛔ z-index:2 у подписи обязателен: b идёт в разметке после span. */ .tp-katalog b{ position:absolute;left:0;right:0;bottom:0;z-index:1; padding:20px 22px 42px;font-size:16px;font-weight:600;color:#fff; background:linear-gradient(transparent,rgba(58,38,19,.88) 45%) } .tp-katalog span{ position:absolute;left:22px;right:22px;bottom:20px;z-index:2; font-size:13px;line-height:1.4;color:rgba(255,255,255,.82); white-space:nowrap;overflow:hidden;text-overflow:ellipsis } /* -------------------------------------------------------------------------- 6. УСЛУГИ: тёмная секция, фото во всю ширину, белая плашка поверх -------------------------------------------------------------------------- */ /* ⭐ Услуги владелец вернул к синему 30.08.2026. Цвет записан прямо, а не через --temno-siniy: та переменная красит ещё каталог, значки и вторую плитку чисел, они остаются коричневыми. */ .tp-blok.temnyj{background:#0B2B3F;color:#fff} .tp-blok.temnyj .tp-nadzagolovok{color:rgba(255,255,255,.55)} .tp-uslugi-shapka{ display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start; padding-top:26px;margin-bottom:56px;border-top:1px solid rgba(255,255,255,.18) } .tp-uslugi-sprava{padding-left:24px;border-left:3px solid var(--oranzh)} .tp-uslugi-sprava p{margin:0 0 24px;font-size:17px;line-height:1.55;color:#fff} .tp-blok.temnyj .tp-cta.svetlaya{background:#fff;color:var(--tekst)} /* ⛔ Снимок 542, плашка 462: в оригинале белая плашка лежала ВНУТРИ снимка с воздухом сверху и снизу по 40. У нас высоты были равны, снимок работал подложкой впритык, и секция услуг потеряла 704px против прежней главной. Замечание Кодекса 28.08.2026, высоты сняты мерилом с живой прежней страницы. */ /* ⭐⭐⭐ НАЛОЖЕНИЕ ПРИ ПРОКРУТКЕ, механика снята мерилом с оригинала: каждая карточка это position:sticky в сетке одной колонкой, и следующая наезжает на прилипшую. Пункт 6 плана, слово владельца 31.08.2026. ⚠️ Отступ сверху 110, а не 0: шапка сайта липкая и высотой 93, без запаса карточка прилипает ПОД неё и верх текста закрывается. ⛔ margin-bottom у карточек снят: при sticky он раздвигает ленту и наезда не происходит вовсе, карточки просто идут одна за другой. */ .tp-uslugi-lenta{display:grid;grid-template-columns:minmax(0,1fr)} /* ⚠️ Высота 647, как в оригинале, а не прежние 542: с дописанным вторым абзацем плашка выросла, и наезжающая карточка резала текст на полуслове. */ .tp-usluga{position:sticky;top:110px;margin:0 0 44px;min-height:647px; display:flex;align-items:center} .tp-uslugi-lenta .tp-usluga{margin-bottom:0} /* ⚠️ Тень снизу отделяет прилипшую карточку от наезжающей: без неё стык двух фотографий читается как одна длинная картинка. */ .tp-uslugi-lenta .tp-usluga::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; box-shadow:0 -18px 36px rgba(0,0,0,.34);pointer-events:none } /* Отступ белой плашки слева, как в оригинале */ .tp-usluga-plashka{margin-left:30px} .tp-usluga-eshchyo{margin-top:14px !important;font-size:14px;line-height:1.55; color:var(--tekst-slab)} .tp-usluga>img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block } .tp-usluga-plashka{ position:relative;z-index:1;width:490px;max-width:100%;min-height:462px; background:#fff;color:var(--tekst);padding:40px 40px 35px; display:flex;flex-direction:column; clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%) } .tp-usluga-znak{ width:64px;height:64px;display:flex;align-items:center;justify-content:center; background:var(--svetlyj-fon);border-radius:50%;margin-bottom:28px; color:var(--temno-siniy) } .tp-usluga-znak svg{width:26px;height:26px;stroke:currentColor;fill:none} .tp-usluga-plashka b{font-size:24px;font-weight:600;line-height:1.1;margin:0 0 auto} .tp-usluga-plashka p{margin:32px 0 0;font-size:15px;line-height:1.55;color:#554C3F} .tp-usluga-dalshe{ display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:22px;padding-top:20px;border-top:1px solid rgba(58,38,19,.14); font-size:15px;font-weight:500;color:var(--tekst) } .tp-usluga-dalshe em{ font-style:normal;width:32px;height:32px;flex:0 0 32px;border-radius:50%; border:1px solid rgba(58,38,19,.25);display:flex;align-items:center; justify-content:center;font-size:14px } .tp-usluga:hover .tp-usluga-dalshe em, .tp-usluga:focus-within .tp-usluga-dalshe em{ background:var(--oranzh);border-color:var(--oranzh);color:#1C1813 } /* -------------------------------------------------------------------------- 7. ОТЗЫВЫ на тёмном верху с переходом в светлое -------------------------------------------------------------------------- */ /* ⭐ Числа сняты мерилом с оригинала 31.08.2026: полоса СИНЯЯ #0B2B3F ровно 250px, ниже белое, не тёплый серый. Владелец: «просчитай как на оригинале и сделай тут так же». ⚠️ Синий здесь намеренно, хотя сайт коричневый: в оригинале эта полоса того же цвета, что секция услуг, и служит ей продолжением. */ /* ⛔ Свои поля секции обнулены: обёртка .tp-obertka уже даёт 30px по бокам, и добавленные сюда 30 задваивались, ряд выходил 1320 вместо 1380. Вертикальных полей в оригинале нет вовсе, секция там ровно 854. */ /* ⛔ Полоса над отзывами снята по слову владельца 31.08.2026. В оригинале она была синей высотой 250px, у нас фон секции просто белый. ⚠️ Внутренний отступ ряда 250px ОСТАЁТСЯ: он держит фото и композицию, без него карточка уезжает к самому верху снимка. */ /* ⭐ Отступ сверху 30px и без нижней полосы: слово владельца 31.08.2026. ⛔ border-bottom снимается ЯВНО: он приходит от общего правила .tp-blok (линия между разделами), и одиночного padding тут мало. */ .tp-blok.otzyvy-temn{ background:#fff; position:relative;padding-top:30px;padding-bottom:0; border-bottom:0 } .tp-blok.otzyvy-temn .tp-nadzagolovok{color:rgba(255,255,255,.55)} /* -------------------------------------------------------------------------- 8. БЛОГ: карточки с фотографией -------------------------------------------------------------------------- */ /* ⭐ Три карточки, а не четыре: так в оригинале и так просил владелец 31.08.2026. */ .tp-stati{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .tp-statya{display:block;text-decoration:none;color:inherit} .tp-statya img{width:100%;height:200px;object-fit:cover;display:block; clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%)} .tp-statya-telo{padding:18px 0 0} .tp-statya-data{display:block;font-size:13px;color:#948A7B;margin-bottom:8px} .tp-statya b{display:block;font-size:16px;font-weight:600;line-height:1.35} /* -------------------------------------------------------------------------- ПОРОГИ. Прежняя главная на планшете складывала плитки по две, на телефоне в одну колонку. Повторяем. -------------------------------------------------------------------------- */ /* ⛔ Порог 1379, а не 1199: трёхколоночная раскладка требует 303+395 плюс два зазора по 30, и на 1200 текстовой колонке остаётся 112px после номера, иконки и отступа до неё. Текст сыпался по слову в строку, а снимок тянулся до 2060px. Поймано кадром 28.08.2026. */ @media (max-width:1379px){ .tp-soderzhimoe .tp-schyot{grid-template-columns:repeat(2,1fr)} .tp-schyot-plitka{min-height:0} .tp-zavod{grid-template-columns:303px minmax(0,1fr);column-gap:28px;row-gap:28px} /* ⚠️ Подъём за заголовок только в трёхколоночной раскладке: ниже порога заголовок мельче и снимок налез бы на полосу ГОСТ. */ .tp-zavod-foto,.tp-zavod-tekst{margin-top:0} /* ⛔⭐⭐ min-height ОБЯЗАН сниматься вместе со сменой height: используемая высота это max(height, min-height), и меньший height молча проигрывает. Замер 30.08.2026: здесь стояло 354, а снимок держал 640 на всех узких ширинах. Браузер об этом не сообщает, кадр показывает просто «высокое фото». Нашёл ревизор кода. */ .tp-zavod-foto img{height:354px;min-height:0} .tp-zavod-tekst{grid-column:1 / -1;grid-row:auto;padding-left:0} .tp-god,.tp-zavod-foto{grid-row:auto} .tp-zavod-knopka{grid-column:1 / -1;grid-row:auto;padding-left:0;margin-top:0} .tp-punkt-nom{grid-template-columns:100px minmax(0,1fr) 80px} .tp-punkt-nom>div{padding-right:40px} .tp-katalog{grid-template-columns:repeat(3,1fr)} .tp-stati{grid-template-columns:repeat(2,1fr)} .tp-soderzhimoe .tp-zag-krupno,.tp-soderzhimoe .tp-imya-zavoda{font-size:52px} .tp-soderzhimoe .tp-zag-belyj{font-size:72px} .tp-uslugi-shapka{grid-template-columns:1fr;gap:24px} } @media (max-width:767px){ .tp-soderzhimoe .tp-schyot{grid-template-columns:none;gap:12px} .tp-schyot-plitka{padding:28px 22px} .tp-schyot-cifra b{font-size:64px} .tp-gost-polosa{flex-direction:column;align-items:flex-start;gap:14px; font-size:14px;margin-bottom:36px} .tp-zavod{grid-template-columns:1fr} /* ⛔⭐⭐⭐ Одной колонки в шаблоне МАЛО: у карточки года и снимка стоит жёсткое grid-column из широкой раскладки, и снимок с номером 2 сам создаёт неявную вторую колонку. На телефоне он вставал узкой полосой справа от карточки. Мерило отступов молчало: наездов и правда нет, раскладка просто не та. Поймано кадром 30.08.2026. */ .tp-god,.tp-zavod-foto{grid-column:1} /* ⚠️ Карточка года на телефоне резиновая, но пропорция та же 303 к 354. Цифра ужимается, иначе «2017» при 94px не влезает в узкий экран. */ .tp-god{width:100%;height:auto;aspect-ratio:303 / 354} .tp-god::before{display:none} .tp-god-schyot .tp-god-cifra{font-size:72px;line-height:72px;letter-spacing:-2.9px} .tp-god-schyot .tp-god-podpis{font-size:24px;line-height:24px;letter-spacing:-.48px} .tp-zavod-foto img{height:420px;min-height:0} .tp-katalog{grid-template-columns:repeat(2,1fr);gap:12px} .tp-katalog b{padding:14px 14px;font-size:14px} .tp-katalog span{display:none} .tp-stati{grid-template-columns:1fr} .tp-soderzhimoe .tp-zag-krupno,.tp-soderzhimoe .tp-imya-zavoda{font-size:38px} .tp-soderzhimoe .tp-zag-belyj{font-size:48px} .tp-soderzhimoe .tp-zag-srednij{font-size:26px} /* ⛔ Блочный поток обязателен: на десктопе снимок лежит absolute и не мешает, а здесь он в потоке, и при display:flex снимок с плашкой встают В РЯД. Плашка уезжала за экран, страница получала горизонтальную прокрутку 274px. Поймано 30.08.2026. */ /* ⛔ На телефоне наложение снимается: карточка выше экрана, и прилипшая съедает весь кадр. Плюс блочный поток обязателен, см. ниже. */ .tp-usluga{min-height:0;display:block;position:relative;top:auto} .tp-uslugi-lenta .tp-usluga{margin-bottom:26px} .tp-uslugi-lenta .tp-usluga::after{display:none} .tp-usluga-plashka{margin-left:0} .tp-usluga>img{position:relative;height:220px} .tp-usluga-plashka{width:100%;min-height:0;margin-top:-28px;padding:40px 22px 24px} .tp-punkt-nom{grid-template-columns:44px 1fr;column-gap:12px;padding:24px 0 28px} .tp-punkt-nom>div{padding-right:0} .tp-punkt-znak{display:none} .tp-soderzhimoe .tp-zavod .tp-cta-obvodka{margin-left:0} /* Срез угла на телефоне снимается у всех, кто его носит */ .tp-schyot-plitka,.tp-zavod-foto img,.tp-usluga-plashka, .tp-statya img{clip-path:none} } /* Движение убрано у тех, кто его отключил */ @media (prefers-reduced-motion:reduce){ .tp-katalog img{transition:none} .tp-katalog a:hover img{transform:none} } /* -------------------------------------------------------------------------- Правки после сверки кадров с прежней главной, 28.08.2026 -------------------------------------------------------------------------- */ /* ⚠️ На тёмном фоне надзаголовок шёл в рамке-пилюле от общих стилей, а на прежней главной он был просто строчкой над линией. Снимаем рамку. */ .tp-blok.temnyj .tp-nadzagolovok, .tp-blok.otzyvy-temn .tp-nadzagolovok{ border:0;background:none;padding:0;border-radius:0 } /* Ссылка «Подробнее» на карточке услуги: это часть карточки, а не текстовая ссылка в абзаце, поэтому без подчёркивания и синевы. */ .tp-soderzhimoe .tp-usluga-dalshe, .tp-soderzhimoe .tp-usluga-dalshe:hover{ text-decoration:none;color:var(--tekst) } .tp-usluga-dalshe em svg{width:14px;height:14px;display:block} /* Ссылка карточки статьи тоже не подчёркивается */ .tp-soderzhimoe .tp-statya, .tp-soderzhimoe .tp-statya:hover{text-decoration:none;color:inherit} .tp-soderzhimoe .tp-statya:hover b{color:var(--oranzh-tyomnyj,#B45309)} /* Ссылки каталога тоже */ .tp-soderzhimoe .tp-katalog a, .tp-soderzhimoe .tp-katalog a:hover{text-decoration:none} /* -------------------------------------------------------------------------- 3.13. МОБИЛА, 02.09.2026: пять замечаний Вени по кадрам с телефона (его телефон 412 CSS-пикселей шириной). Замеры до правки в scripts/_zamer-levyh-kraev-mobily.js: обёртка содержимого 8px, карусели 20px, плашка ГОСТ в две строки на всю ширину, карточка года 437px высотой с зазором 128px между «ППЗТИ» и «2017». ⭐ 02.09.2026 днём: правила привязаны к классу body.etalon. Его вешает шаблон (trubi-chistyj-shablon.php) на главную и на страницы с метой ppzti_etalon=1: «О заводе», «Каталог» и следующие по слову Вени «на всех страницах баннер полностью, отступы и карусели как у эталона». Специфичность body.etalon .tp-soderzhimoe равна общему правилу body:not(.home) .tp-soderzhimoe из tovarnaya.css, побеждает позиция в файле: этот блок собирается ПОСЛЕ общей части. -------------------------------------------------------------------------- */ @media (max-width:767px){ /* 1. «Заголовок сделать чуть меньше, чтобы производство трубопроводов помещалось целиком, и опустить ниже к тексту». Строка «производство трубопроводов» при 100px занимает 1467px (мерило _zamer-h1-mobila.js), колонка после правки 5 это 358px на 390: предел 24.4px. Берём 6.1vw: 23.8 на 390, 22 на 360, 25.1 на 412, везде с запасом от 0.4px. ⚠️ Стоит НИЖЕ блока max-height:720 с тем же селектором: побеждает позиция в файле. */ .tp-geroj.glavnyj h1{font-size:clamp(20px,6.1vw,30px);line-height:1.12} /* «Опустить ниже к тексту»: зазор до лида 26 → 12, а воздух над заголовком растёт с 24 до 30, чтобы он и правда сдвинулся вниз. */ .tp-geroj.glavnyj .tp-lid{margin-top:12px} /* 2. «Убрать пустое место» в плашке ГОСТ: при 12px/.12em она ложилась в две строки и растягивалась на всю колонку, справа оставалась пустота. Текст без разрядки 2694px при 100px (43 знака): 11px и .05em дают 344px при колонке 358, одна строка на 390 и шире. На 360 переносится, но ширина по тексту (fit-content) и ровные строки (balance). */ .tp-geroj.glavnyj .tp-nadzagolovok{font-size:11px;letter-spacing:.05em; padding:6px 12px;width:fit-content;max-width:100%;text-wrap:balance; margin-bottom:30px} /* На 360 колонка 328, и 11px/.05em (344) переносятся, а fit-content при переносе всё равно растягивает плашку на всю колонку. Ниже 375 кегль 10.4 и разрядка .04em: 280 + 18 + поля 24 = 322, одна строка. */ @media (max-width:378px){ .tp-geroj.glavnyj .tp-nadzagolovok{font-size:10.4px;letter-spacing:.04em} } /* 3. «ППЗТИ опустить ниже к 2017»: карточка года держала пропорцию 303 к 354 и центрировала число, отсюда 128px пустоты под заголовком. Пропорция снята, плашка сжимается по содержимому: заголовок лежит на её верху (карточка поднята на 64, см. 3.12), число идёт следом. Верхнее поле 84 = высота заголовка 64 от верха карточки плюс 20. */ body.etalon .tp-soderzhimoe .tp-god{aspect-ratio:auto} body.etalon .tp-soderzhimoe .tp-god-plashka{padding:84px 20px 30px; justify-content:flex-start} /* 4. «Отступ у карусели слева сократи в 2 раза»: 20 → 10, у всех трёх лент. Отрицательные поля равны новому полю обёртки 16, иначе лента не дойдёт до края экрана. scroll-padding-left равен padding-left, правило из 3.11. */ body.etalon .tp-soderzhimoe .tp-schyot, body.etalon .tp-soderzhimoe .tp-stati, body.etalon .tp-soderzhimoe .tp-uslugi-lenta{ margin-left:-16px;margin-right:-16px; padding-left:10px;padding-right:16px;scroll-padding-left:10px} } /* 5. «Текст и крупные заголовки: отступ слева в 2 раза больше»: поле обёртки содержимого 8 → 16. Порог 700 тот же, что у правила 3.10. Затрагивает всё внутри обёртки: и карточку года, и снимок, и форму, они тоже встают на 16 от края. */ @media (max-width:700px){ body.etalon .tp-soderzhimoe .tp-obertka{padding-left:16px;padding-right:16px} } /* 6. Слово Вени следом: «отступ у текста правильный, а у блоков сократи в 2 раза». Текст остаётся на 16, а карточки и снимки выходят из обёртки на 8 в обе стороны, то есть встают на 8 от края экрана. Список блоков снят мерилом _bloki-na-kraju-mobily.js: узлы с фоном, рамкой или картинкой, стоящие у края обёртки. Линии-разделители у текста (полоса ГОСТ, пункты, вопросы, контакты) и кнопки блоками не считаются, они при тексте. ⛔ У карточки года на телефоне стояло width:100%: с отрицательными полями она осталась бы 358 шириной и уехала влево. Ширина auto, растяжку даёт сама ячейка сетки. То же у снимка над контактами. */ @media (max-width:700px){ body.etalon .tp-soderzhimoe .tp-god, body.etalon .tp-soderzhimoe .tp-zavod-foto, body.etalon .tp-soderzhimoe .tp-otzyvy-ryad, body.etalon .tp-soderzhimoe .tp-forma{margin-left:-8px;margin-right:-8px} body.etalon .tp-soderzhimoe .tp-god{width:auto} /* Слово Вени следом: «блок с картинками каталога сократи отступы в 2 раза». Сетка плиток каталога это тоже блок с картинками: 16 → 8 от края, зазор между плитками 12 не тронут. */ body.etalon .tp-soderzhimoe .tp-katalog{margin-left:-8px;margin-right:-8px} body.etalon .tp-soderzhimoe .tp-foto-kontakt{width:auto;margin:0 -8px 26px} /* Лента сертификатов это тоже карусель: первая карточка на 10 от края, как у трёх остальных лент, поля обёртки компенсированы полностью. */ body.etalon .tp-soderzhimoe .tp-sert-karusel{margin-left:-16px;margin-right:-16px} body.etalon .tp-soderzhimoe .tp-sert-lenta{ padding:2px 16px 12px 10px;scroll-padding-left:10px} } /* 7. Слово Вени по кадру блока контактов, 02.09.2026: «телефоны подними к картинке, а ниже картинки адрес». Читаю так: на телефоне телефоны идут сразу под заголовком, над рисунком, а адрес, почта и часы под рисунком. Разметка не тронута: сетка контактов растворяется (display:contents), её четыре карточки становятся детьми колонки и переставляются через order. ⛔ Линия над контактами сидела на самой сетке: у растворённого узла рамки нет, поэтому линия переехала на карточку адреса. Только до 767, планшет и десктоп прежние: там рисунок над двумя колонками контактов. */ @media (max-width:767px){ body.etalon .tp-2kol.s-formoj>div:first-child{display:flex;flex-direction:column} body.etalon .tp-soderzhimoe .tp-blok.seryj.glavnaya-forma .tp-kontakty{display:contents} body.etalon .tp-2kol.s-formoj .tp-zag-kontakt{order:0} /* Уточнение следом: «телефоны опусти на картинку». Рисунок поднят под заголовок (18px под ним), телефоны лежат на его верхней части, где небо и облака. Величина считана с замера: телефоны 179..283 от верха секции, рисунок начинался на 307, нужен 167, значит −116 от его прежнего места без поля. Высота блока телефонов 104 при кегле 16 не зависит от ширины экрана, пока подпись не переносится (328 хватает). */ body.etalon .tp-2kol.s-formoj .tp-kontakt:first-child{order:1;margin-top:4px; position:relative;z-index:1} body.etalon .tp-2kol.s-formoj .tp-foto-kontakt{order:2;margin-top:-116px} body.etalon .tp-2kol.s-formoj .tp-kontakt:not(:first-child){order:3;margin-top:20px} body.etalon .tp-2kol.s-formoj .tp-kontakt:nth-child(2){ border-top:1px solid var(--liniya);padding-top:26px;margin-top:0} } /* 8. Слово Вени 02.09.2026: «пробегись по отступам между текстами и разделителем, убери большой и дай воздуха где мало, приведи к единому стандарту». Стандарт на телефоне: **24 px от букв до линии с обеих сторон**. Замер до правки мерилом _zamer-razdelitelej-mobily.js (оно меряет по прямоугольникам букв, поэтому числа ниже это буквы, а не поля): плитки фактов 26/27, качества 20/27, пункты 01/02: над первой линией 5, между 30/23, вопросы ЧАВО 19/24, линия адреса 26/30, лента услуг 20 снизу. Ряды меток (.tp-metki) уже стоят 17/24 и не тронуты: подпись мелкая, а заголовок под линией крупный, там своя пара. */ @media (max-width:767px){ /* плитки: у цифры и подписи есть свой зазор строки, поэтому поле на 2 больше цели сверху и на 3 меньше снизу */ body.etalon .tp-soderzhimoe .tp-schyot .tp-schyot-plitka p{margin-top:26px;padding-top:21px} body.etalon .tp-soderzhimoe .tp-schyot.bez-cifr .tp-schyot-imya{margin-bottom:24px} body.etalon .tp-soderzhimoe .tp-schyot.bez-cifr .tp-schyot-plitka p{margin-top:0} /* пункты 01/02: было 24/28 (буквы 23/30), абзац перед первой линией стоял в 5 px: у него margin-bottom:0 из правила про портянку */ body.etalon .tp-soderzhimoe .tp-punkt-nom{padding:25px 0 22px} body.etalon .tp-soderzhimoe .tp-zavod-tekst p + .tp-punkt-nom{margin-top:19px} /* вопросы ЧАВО: было 22/18 (буквы 24/19) */ body.etalon .tp-soderzhimoe .tp-faq-karta .tp-faq summary{padding-top:22px;padding-bottom:23px} /* лента услуг: поле снизу как у плиток, иначе от «Подробнее» до конца секции 90 px против 58 у остальных */ body.etalon .tp-soderzhimoe .tp-uslugi-lenta{padding-bottom:12px} /* контакты: рисунок → линия 24, линия → «Адрес» 24 (было 26 и 30) */ body.etalon .tp-2kol.s-formoj .tp-foto-kontakt{margin-bottom:24px} body.etalon .tp-2kol.s-formoj .tp-kontakt:nth-child(2){padding-top:20px} /* «Белое поле отзывов в картинке снизу подними и дай отступ в картинке»: карточка стояла вплотную к низу фото, потому что правило .tp-otzyvy-karta{margin-bottom:-1px} (лечение полупикселя на десктопе, 3.12) стоит ниже мобильного margin:0 20px 20px и перебивает его. На телефоне карточке возвращены 20 снизу, фото видно под ней. */ body.etalon .tp-soderzhimoe .tp-otzyvy-karta{margin-bottom:20px} } /* -------------------------------------------------------------------------- 3.14. ЭТАЛОН НА ДРУГИХ СТРАНИЦАХ: «О заводе», «Каталог» (02.09.2026) Слово Вени: «единственное правило, у нас на всех страницах баннер полностью, и в этом баннере коротко вся важная инфа, отступы и карусели как у эталона». Страницы собраны из тех же блоков, что главная; здесь только то, чего на главной нет: галерея снимков цеха, подгруппы каталога, список типоразмеров. -------------------------------------------------------------------------- */ /* Подгруппа каталога: заголовок третьего уровня над рядом карточек. */ body.etalon .tp-podgruppa{margin:34px 0 14px;font-size:20px;line-height:1.25;letter-spacing:-.2px} body.etalon .tp-shapka2 + .tp-podgruppa{margin-top:0} /* Список типоразмеров после карточек труб: без воздуха он липнет к ряду. */ body.etalon .tp-tovary + .tp-nazvaniya{margin-top:24px} /* Галерея цеха на десктопе: четыре снимка в ряд. */ body.etalon .tp-galereya{grid-template-columns:repeat(4,1fr);margin-top:28px} @media (max-width:767px){ /* Вопросы внутри белой карточки: общее правило body:not(.home) даёт списку .tp-faq поля -8, и он вылезает за поле карточки. Только в карточке: обычный список вопросов (уровень «О заводе») остаётся на 8, как все блоки стандарта. */ body.etalon .tp-soderzhimoe .tp-faq-karta .tp-faq{margin-left:0;margin-right:0} /* Пара документов на «О заводе»: блок на 8, как остальные. */ body.etalon .tp-soderzhimoe .tp-dokumenty{margin-left:-8px;margin-right:-8px} /* Галерея цеха каруселью по стандарту: первая карточка на 10, лента на всю ширину экрана (поля -16), прилипание по оси X. */ body.etalon .tp-soderzhimoe .tp-galereya{ display:flex;gap:12px;margin:24px -16px 0;padding:2px 16px 12px 10px; scroll-padding-left:10px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:thin;grid-template-columns:none } body.etalon .tp-soderzhimoe .tp-galereya img{ flex:0 0 86%;scroll-snap-align:start;min-width:0;height:auto;aspect-ratio:4/3;border-radius:10px } body.etalon .tp-podgruppa{margin:26px 0 12px;font-size:18px} } /* «О заводе», 02.09.2026, слово Вени «сделай её непохожей на главную, убери услуги»: страница собрана из блоков категорий (две колонки, разбор чисел, слои, плюсы, обычный список вопросов), а не из блоков главной. Здесь то, чего нет ни в общем CSS, ни у главной. */ /* Галерея цеха крупно: на десктопе два снимка в ряд вместо четырёх. На телефоне остаётся каруселью по стандарту (правило 3.14 выше), тут меняется только пропорция кадра. Ревизор 02.09 принял карусель за дефект: это замысел. */ body.etalon .tp-galereya.krupno{grid-template-columns:repeat(2,1fr);gap:20px} body.etalon .tp-galereya.krupno img{aspect-ratio:3/2} /* Пара документов справа от текста: сертификат и паспорт, пропорция листа. */ body.etalon .tp-dokumenty{display:grid;grid-template-columns:1fr 1fr;gap:14px} body.etalon .tp-dokumenty img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top; display:block;border-radius:12px;border:1px solid var(--liniya);background:#fff} @media (max-width:700px){ body.etalon .tp-dokumenty{gap:10px} } /* -------------------------------------------------------------------------- 3.15. СТАТЬИ БЛОГА: РАЗВОРОТ (02.09.2026) Слово Вени по /harakteristiki-truby-ppu/: «баннер как на главной, картинка на весь экран, но можно не на весь, высота как сейчас; сухой текст, справа пустое место, можно красивее». Разметку собирает mu-plugin trubi-statya-shablon.php: герой с фото фоном, слева колонка текста, справа липкая боковина. -------------------------------------------------------------------------- */ /* Герой: фото фоном, текст в одну колонку, высота по содержимому. */ .tp-geroj.statya .tp-geroj-setka{grid-template-columns:minmax(0,1fr)} .tp-geroj.statya .tp-geroj-setka>div{max-width:820px} .tp-geroj.statya .tp-lid{max-width:62ch} .tp-geroj.statya .tp-geroj-fon{object-position:center 50%} .tp-geroj.statya{padding-bottom:56px} /* На узком экране текст идёт во всю ширину поверх фото: завеса ровная. */ @media (max-width:1023px){ .tp-geroj.statya .tp-geroj-zaves{background:linear-gradient(180deg,rgba(9,26,36,.90),rgba(9,26,36,.84))} } /* Разворот: колонка текста и боковина. */ .tp-statya-razvorot{padding:44px 0 12px} .tp-soderzhimoe .tp-statya-razvorot>.tp-obertka{display:grid;grid-template-columns:minmax(0,1fr);gap:28px} /* Слово Вени 02.09 по кадру 1920: «текст посередине поля, но с левой строки». Разворот не тянется на всю обёртку 1590: колонка 780 плюс боковина 340 центрируются вместе, текст остаётся выровненным по левому краю. */ @media (min-width:1024px){ .tp-soderzhimoe .tp-statya-razvorot>.tp-obertka{grid-template-columns:minmax(0,1fr) 340px;column-gap:64px;align-items:start;max-width:1250px} .tp-statya-bok{position:sticky;top:104px} } .tp-statya-kolonka{max-width:780px;min-width:0} /* Секции статьи внутри колонки: без своих полей и серых полос, тонкая линия между. */ .tp-soderzhimoe .tp-statya-kolonka .tp-blok{padding:0 0 30px;margin:0 0 30px;background:transparent;border-bottom:1px solid var(--liniya)} .tp-soderzhimoe .tp-statya-kolonka .tp-blok:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .tp-soderzhimoe .tp-statya-kolonka .tp-blok .tp-obertka{max-width:none;padding:0;margin:0} .tp-soderzhimoe .tp-statya-kolonka .tp-blok h2{font-size:clamp(22px,2vw,28px);margin:0 0 14px;scroll-margin-top:110px} .tp-soderzhimoe .tp-statya-kolonka .tp-blok p, .tp-soderzhimoe .tp-statya-kolonka .tp-blok li{font-size:17px;line-height:1.65} .tp-soderzhimoe .tp-statya-kolonka .tp-blok li{margin-bottom:8px} .tp-soderzhimoe .tp-statya-kolonka .tp-blok p{margin-bottom:16px} /* Боковина. */ .tp-statya-bok{display:grid;gap:18px;min-width:0} .tp-statya-soderzh,.tp-statya-soderzh-mob{border:1px solid var(--liniya);border-radius:12px;padding:18px 20px;background:var(--seryj)} .tp-statya-soderzh b{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-slab);margin-bottom:12px} .tp-statya-soderzh ol,.tp-statya-soderzh-mob ol{margin:0;padding-left:20px;font-size:15px;line-height:1.45} .tp-statya-soderzh li,.tp-statya-soderzh-mob li{margin-bottom:8px} .tp-statya-soderzh a,.tp-statya-soderzh-mob a{color:var(--tekst);text-decoration:none} .tp-statya-soderzh a:hover,.tp-statya-soderzh-mob a:hover{color:var(--oranzh)} .tp-statya-soderzh-mob{display:none;margin:0} .tp-statya-soderzh-mob summary{cursor:pointer;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-slab);font-weight:700} .tp-statya-soderzh-mob[open] summary{margin-bottom:12px} .tp-statya-cta{background:#0B2B3F;color:#fff;border-radius:12px;padding:24px 22px 26px} .tp-statya-cta b{display:block;font-size:20px;line-height:1.2;margin-bottom:10px} .tp-statya-cta p{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.8)} .tp-statya-cta .tp-cta{display:inline-flex} .tp-statya-tel{display:block;margin-top:14px;color:#fff;font-weight:600;text-decoration:none;font-size:16px} .tp-statya-tel:hover{color:var(--oranzh)} .tp-statya-eshchyo{border:1px solid var(--liniya);border-radius:12px;padding:18px 20px 8px;background:#fff} .tp-statya-eshchyo b{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-slab);margin-bottom:6px} .tp-statya-eshchyo a{display:block;padding:11px 0;border-top:1px solid var(--liniya);color:var(--tekst);text-decoration:none;font-size:15px;line-height:1.4} .tp-statya-eshchyo a:first-of-type{border-top:0} .tp-statya-eshchyo a:hover{color:var(--oranzh)} .tp-statya-eshchyo .tp-statya-vse{color:var(--oranzh);font-weight:600} @media (max-width:1023px){ .tp-statya-soderzh-mob{display:block} .tp-statya-bok .tp-statya-soderzh{display:none} } @media (max-width:767px){ .tp-statya-razvorot{padding-top:24px} .tp-soderzhimoe .tp-statya-kolonka .tp-blok p, .tp-soderzhimoe .tp-statya-kolonka .tp-blok li{font-size:16px;line-height:1.6} /* Боковина и содержание это блоки: на 8 от края, как весь стандарт. */ .tp-soderzhimoe .tp-statya-bok,.tp-soderzhimoe .tp-statya-soderzh-mob{margin-left:-8px;margin-right:-8px} } /* -------------------------------------------------------------------------- 3.16. ПОЧТА ПЕРВОЙ И СТРАНИЦЫ ТРУБ ПОД ЭТАЛОН (02.09.2026) Слово Вени: «заказчики пишут на почту, копируя ящик, так что её светим в первую очередь и при нажатии окно: почта скопирована». Копирование делает скрипт в svoya-obvyazka.php, здесь вид ссылки, окна и почты в шапке. -------------------------------------------------------------------------- */ .tp-kopir-pochtu{cursor:copy} /* Почта в шапке: только на широких экранах, на 1440 в ряд с меню не помещается (логотип, телефон, почта, кнопка и меню это 1474 px при обёртке 1380). */ .tp-pochta-shapka{display:none} @media (min-width:1600px){ .tp-shapka .tp-pochta-shapka{display:inline-flex;align-items:center;gap:10px;margin-left:28px; color:#fff;text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap} .tp-shapka .tp-pochta-shapka svg{color:var(--oranzh);flex:0 0 auto} .tp-shapka .tp-pochta-shapka:hover span,.tp-shapka .tp-pochta-shapka:focus-visible span{color:var(--oranzh)} } .tp-mob-pochta{display:block;margin-top:10px;color:#fff;text-decoration:none;font-weight:600;font-size:16px} .tp-mob-pochta:hover,.tp-mob-pochta:focus-visible{color:var(--oranzh)} /* Окно «Почта скопирована»: внизу по центру, само гаснет через 2,6 с. */ .tp-tost{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px); background:#0B2B3F;color:#fff;padding:12px 18px;border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:15px;line-height:1.4;z-index:9999; opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100% - 32px)} .tp-tost.vidno{opacity:1;transform:translateX(-50%) translateY(0)} .tp-tost b{color:var(--oranzh);font-weight:700} /* Почта в строке цены героя и в карточке расчёта. */ .tp-geroj .tp-cena .tp-kopir-pochtu{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px} .tp-geroj .tp-cena .tp-kopir-pochtu:hover{color:var(--oranzh)} .tp-statya-pochta{display:block;margin-top:14px} .tp-statya-pochta .tp-kopir-pochtu{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;font-size:16px} .tp-statya-pochta .tp-kopir-pochtu:hover{color:var(--oranzh)} /* В блоке формы почта первой строкой контактов, крупнее телефонов. */ .glavnaya-forma .tp-kontakt .tp-kopir-pochtu{font-weight:700} /* Страницы труб: герой эталона с крошками. Крошки занимают свой ряд сетки над плашкой, иначе они падали бы в первую свободную ячейку. */ @media (min-width:1024px){ .tp-geroj.glavnyj.s-kroshkami>.tp-obertka{ grid-template-rows:auto auto minmax(0,1fr) auto auto; grid-template-areas:"krohi krohi" "znak znak" "prostor prostor" "verh verh" "niz plitka" } .tp-geroj.glavnyj.s-kroshkami .tp-hlebnye{grid-area:krohi;align-self:start;margin:var(--r-znak-verh) 0 0} .tp-geroj.glavnyj.s-kroshkami .tp-nadzagolovok{margin-top:16px} } /* Врезка расчёта в тексте категории вместо формы: карточка статьи, прижата к верху. */ .tp-2kol.s-formoj>.tp-vrez-cta{align-self:start} /* Блок фактов под баннером труб: плитки без отступа сверху сверх наезда. */ .tp-soderzhimoe .tp-fakty{padding-bottom:12px;border-bottom:0} /* Плашка героя на 360 у страниц труб переносилась в две строки: общее правило body:not(.home) .tp-geroj .tp-nadzagolovok (0,3,1) сильнее правила главной для экранов до 375 (0,3,0), и кегль 10.4 не применялся. Замер 02.09: /truby-ppu/ на 360 высота плашки 50 при норме 32. */ @media (max-width:378px){ body.etalon .tp-geroj.glavnyj .tp-nadzagolovok{font-size:10.4px;letter-spacing:.04em} } /* -------------------------------------------------------------------------- 3.17. СТРАНИЦЫ ТРУБ: ЦВЕТ, СЕТКА КОМПЛЕКТА, ФОТО У ВОПРОСОВ, КНОПКИ (02.09.2026) Слово Вени по /truby-ppu/pe/108-mm/: «6 блоков, почему не 3x2; всё сливается, поиграй фоном цвета как на главной; ЧАВО разбавь справа картинкой; кнопки, там не видно текста». Разметку собирает trubi-kategoriya-shablon.php. -------------------------------------------------------------------------- */ /* Сетка карточек по числу: 6 это 3x2, 8 это 4x2. Ниже 1024 общие правила (планшет auto-fill, телефон карусель) не трогаем. */ @media (min-width:1024px){ body.etalon .tp-tovary.tp-tovary-2{grid-template-columns:repeat(2,minmax(0,1fr))} body.etalon .tp-tovary.tp-tovary-3{grid-template-columns:repeat(3,minmax(0,1fr))} body.etalon .tp-tovary.tp-tovary-4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* Комплект на тёмно-синем, как «Услуги» главной: белые карточки на нём читаются, заголовок и подзаголовок белые. */ body.etalon .tp-blok.temnyj.tp-komplekt{background:#0B2B3F;border-bottom:0} body.etalon .tp-blok.temnyj.tp-komplekt h2{color:#fff} body.etalon .tp-blok.temnyj.tp-komplekt .tp-podzag, body.etalon .tp-blok.temnyj.tp-komplekt>.tp-obertka>p{color:rgba(255,255,255,.82)} body.etalon .tp-blok.temnyj.tp-komplekt .tp-tovar{border-color:transparent} body.etalon .tp-blok.temnyj.tp-komplekt .tp-tovar:hover{border-color:var(--oranzh)} /* Кнопка второго ряда на тёмной полосе цены и в тёмной секции: правило для светлых секций красило текст в тёмный, и на тёмном он пропадал. */ .tp-blok .tp-polosa .tp-cta.vtor, .tp-blok.temnyj .tp-cta.vtor{color:#fff;border-color:rgba(255,255,255,.42)} .tp-blok .tp-polosa .tp-cta.vtor:hover,.tp-blok .tp-polosa .tp-cta.vtor:focus-visible, .tp-blok.temnyj .tp-cta.vtor:hover,.tp-blok.temnyj .tp-cta.vtor:focus-visible{background:rgba(255,255,255,.09);border-color:#fff;color:#fff} /* Вопросы: список слева, снимок справа, липкий. */ .tp-faq-razvorot{margin-top:24px} .tp-faq-razvorot .tp-faq{margin-top:0} .tp-faq-foto{margin:20px 0 0} .tp-faq-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:14px;border:1px solid var(--liniya)} @media (min-width:1024px){ /* Снимок по высоте списка вопросов: figure растянута по ряду, картинка абсолютная внутри и не участвует в расчёте высоты ряда. Замер до правки: список 437, фото 507, под списком 70px пустоты. */ .tp-faq-razvorot{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:44px;align-items:stretch} /* Минимум 280, а не 360: на 11 типоразмерах список из 4 вопросов даёт 339, и минимум 360 растягивал его на 21px пустоты (ревизор 02.09.2026). */ .tp-faq-foto{margin:0;position:relative;min-height:280px} .tp-faq-foto img{position:absolute;inset:0;height:100%;aspect-ratio:auto} } @media (max-width:700px){ body.etalon .tp-soderzhimoe .tp-faq-foto{margin:20px -8px 0} } /* Слово Вени 02.09.2026 по кадру /truby-ppu/oc/: «белые блоки бежевые». Белые плитки фактов на белой секции сливались с фоном; на телефоне они и так бежевые (решение 01.09). Теперь бежевые на всех ширинах у страниц эталона: первая и третья плитка, вторая тёмная и четвёртая оранжевая держат свой цвет. В бежевых секциях (.seryj) плитки остаются белыми, иначе сольются там. */ body.etalon .tp-blok:not(.seryj) .tp-schyot>.tp-schyot-plitka:nth-child(odd){background:#F7F4F0} /* -------------------------------------------------------------------------- 3.18. ВРЕЗКА РАСЧЁТА В ТЕКСТЕ: СВЕТЛАЯ КАРТОЧКА (02.09.2026) Слово Вени по /truby-ppu/pe/: «синий блок не красивый, и кнопки у него не видно из-за цвета шрифта». Замер: телефон в карточке красился общим правилом ссылок rgb(154,85,18) и на тёмно-синем пропадал (контраст около 2). Карточка стала бежевой с оранжевой кромкой, текст тёмный; в тёмной боковине статьи телефон и подпись почты белые. -------------------------------------------------------------------------- */ /* ⛔ Только от 901px: без медиазапроса правило перебивало одну колонку tovarnaya.css (max-width:900) и на телефоне текст шёл по слову в строку рядом с карточкой 320px. Поймано замером 02.09.2026 в 13:50. */ @media (min-width:901px){ body.etalon .tp-2kol.s-formoj:has(.tp-vrez-cta){grid-template-columns:minmax(0,1fr) minmax(320px,440px)} } .tp-soderzhimoe .tp-vrez-cta.tp-statya-cta{background:#F7F4F0;color:var(--tekst);border:1px solid var(--liniya); border-left:4px solid var(--oranzh);border-radius:14px;padding:26px 26px 28px;align-self:start} .tp-soderzhimoe .tp-vrez-cta.tp-statya-cta b{color:var(--tekst);font-size:22px} .tp-soderzhimoe .tp-vrez-cta.tp-statya-cta p{color:var(--tekst-slab)} .tp-soderzhimoe .tp-vrez-cta .tp-statya-pochta{margin-top:18px;padding-top:16px;border-top:1px solid var(--liniya)} .tp-soderzhimoe .tp-vrez-cta .tp-statya-pochta .tp-kopir-pochtu{color:var(--tekst);font-size:19px;text-decoration-color:var(--oranzh)} .tp-soderzhimoe .tp-vrez-cta .tp-statya-pochta .tp-kopir-pochtu:hover{color:var(--oranzh)} .tp-soderzhimoe .tp-vrez-cta .tp-statya-tel{color:var(--tekst)} .tp-soderzhimoe .tp-vrez-cta .tp-statya-tel:hover{color:var(--oranzh)} /* Подпись «нажмите, чтобы скопировать» под почтой. */ .tp-statya-pochta small{display:block;margin-top:4px;font-size:12.5px;line-height:1.3;color:var(--tekst-slab)} /* Тёмная карточка в боковине статьи: телефон и подпись белые, а не цветом ссылок. */ .tp-soderzhimoe .tp-statya-bok .tp-statya-cta .tp-statya-tel{color:#fff} .tp-soderzhimoe .tp-statya-bok .tp-statya-cta .tp-statya-tel:hover{color:var(--oranzh)} .tp-soderzhimoe .tp-statya-bok .tp-statya-cta .tp-statya-pochta small{color:rgba(255,255,255,.62)} @media (max-width:767px){ .tp-soderzhimoe .tp-vrez-cta.tp-statya-cta{padding:22px 20px 24px} } /* -------------------------------------------------------------------------- 3.19. ПЛИТКИ ФАКТОВ СТРАНИЦ ТРУБ И ПУСТОТЫ ДВУХКОЛОННЫХ БЛОКОВ (02.09.2026) Слово Вени по кадру /truby-ppu/oc/: «переносы на новую строку в таком виде некорректны» (единица «мм» одна под диапазоном) и «все некрасивые пустые места убери». Замер до правки: плитка 409px при содержимом 300, пустой низ 103px. Разметку собирает trubi_fakt_plitka() в trubi-kategoriya-shablon.php: значок в строке имени, число и единица в одной строке, абзац под линией. -------------------------------------------------------------------------- */ /* Секция плиток стоит отдельно: нижнее поле сетки 56 главной здесь давало зазор 158 до следующей секции против 120 у остальных. */ .tp-fakty .tp-schyot{margin-bottom:20px} .tp-fakty .tp-schyot-plitka{min-height:0;padding:34px 30px 36px} .tp-fakty .tp-schyot-shapka{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px} .tp-fakty .tp-schyot-imya{font-size:18px;margin:0} .tp-fakty .tp-schyot-znak{width:40px;height:40px;flex:0 0 40px} /* Значение занимает остаток высоты плитки и держит строку по центру остатка: плитки в ряду равной высоты, а пустота не копится под абзацем. */ .tp-fakty .tp-schyot-cifra{display:flex;flex-wrap:wrap;align-items:baseline;align-content:center; column-gap:10px;row-gap:2px;flex:1 0 auto;text-align:left;line-height:1} .tp-fakty .tp-schyot-cifra b{display:inline;font-size:60px;line-height:1;letter-spacing:-.02em;white-space:nowrap} /* Диапазон: на 1380 плитке остаётся 255px, «от 0,55 до 1,0 мм» при 32px это 258, поэтому кегль плывёт от 28 на узком ряду до 32 на широком. */ .tp-fakty .tp-schyot-cifra.dlinnaya b{font-size:clamp(28px,2.2vw,32px);line-height:1.15;letter-spacing:-.01em} .tp-fakty .tp-schyot-cifra span{display:inline;margin:0;font-size:17px;font-weight:500;white-space:nowrap;opacity:.85} .tp-fakty .tp-schyot-plitka p{margin-top:24px;padding-top:20px;font-size:16px;line-height:1.55;color:var(--tekst);opacity:.92} .tp-fakty .tp-schyot-plitka:nth-child(2) p,.tp-fakty .tp-schyot-plitka:nth-child(4) p{color:#fff} /* Четыре в ряд от 1380, как на главной; между 768 и 1379 две в ряд. Ширины равные (minmax(0,1fr)), иначе длинное число растягивает свою колонку. */ @media (min-width:1380px){.tp-fakty .tp-schyot{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:768px) and (max-width:1379px){ .tp-fakty .tp-schyot{grid-template-columns:repeat(2,minmax(0,1fr))} .tp-fakty .tp-schyot-cifra.dlinnaya b{font-size:32px} } @media (max-width:767px){ .tp-fakty .tp-schyot-plitka{padding:26px 22px 28px} .tp-fakty .tp-schyot-shapka{margin-bottom:18px} .tp-fakty .tp-schyot-cifra b{font-size:52px} .tp-fakty .tp-schyot-cifra.dlinnaya b{font-size:30px} } /* Картинка двухколонного блока по высоте текста. Замер до правки: текст 239..580, картинка всегда 440 (3:2), под коротким текстом и над короткой картинкой пустота до 170px. height:0 плюс min-height:100% выводит картинку из расчёта высоты ряда и растягивает её по нему; min-height сетки не даёт узкой полосе при коротком тексте. Блок формы и блок с плюсами не трогаем. */ @media (min-width:1001px){ /* Короткий текст к верху, вровень с верхом картинки, а не по центру ряда: иначе между подзаголовком и абзацами зияло 83px («Заглушка», текст 239). */ /* И зеркальный .oborot с картинкой слева (/truby-ppu/pe/: картинка 440 при тексте 239). Сетка с плюсами вместо картинки (.tp-plyusy) не задета: правило только для сеток, у которых есть прямой потомок img. */ body.etalon .tp-2kol:not(.s-formoj):has(>img){min-height:260px} /* Слово Вени 02.09.2026 14:51 по /truby-ppu/pe/ «Усиленная изоляция»: текст 266 против таблицы 396, под текстом дыра 137. Текст с таблицей идут стопкой: текст во всю ширину, таблица под ним. */ body.etalon .tp-2kol:not(.s-formoj):has(>.tp-tabl){grid-template-columns:minmax(0,1fr);gap:28px} /* Врезка расчёта рядом с длинным текстом по центру колонки, а не у верха (/truby-ppu/: текст 442, карточка 356, под карточкой было 146). */ body.etalon .tp-2kol.s-formoj>.tp-vrez-cta{align-self:center} /* Плитки последними в секции («Как заказать» каталога): нижнее поле сетки 56 складывалось с полем секции, до следующей выходило 202. Главную не трогаем. */ body.etalon:not(.home):not(.page-id-10492) .tp-soderzhimoe .tp-obertka>.tp-schyot:last-child{margin-bottom:0} /* Колонки к верху и без картинки: два текстовых столбца («Где применяют», 146 против 202) центрировались, и абзацы отрывались от подзаголовка. */ /* Только сетки с прямой картинкой или совсем без картинки: на «О заводе» снимок лежит внутри figure и не тянется, ему центр (ревизор 02.09.2026). */ body.etalon .tp-2kol:not(.s-formoj):has(>img), body.etalon .tp-2kol:not(.s-formoj):not(:has(img)){align-items:start} body.etalon .tp-2kol:not(.s-formoj)>img{height:0;min-height:100%;aspect-ratio:auto;align-self:stretch} } /* -------------------------------------------------------------------------- 3.20. ТАБЛИЦЫ: ОЧЕРТАНИЯ ЯЧЕЕК (02.09.2026), С 17:00 НА ВСЕХ СТРАНИЦАХ ШАБЛОНА Слово Вени по /truby-ppu/ «Размеры и вес труб ППУ»: «тут всё сливается, сделай очертания». Восемь столбцов чисел без вертикальных линий читались одной массой. Линии между столбцами и строками темнее общей --liniya, граница групп «Тип 1» и «Тип 2» толще и в шапке, и в теле, зебра заметнее. -------------------------------------------------------------------------- */ body.ppzti-tovarnaya .tp-tabl{--tabl-liniya:#DDD3C6;border-color:var(--tabl-liniya)} body.ppzti-tovarnaya .tp-tabl td{border-top:1px solid var(--tabl-liniya);border-left:1px solid var(--tabl-liniya)} body.ppzti-tovarnaya .tp-tabl td:first-child{border-left:0} body.ppzti-tovarnaya .tp-tabl th[scope="row"]{border-top:1px solid var(--tabl-liniya)} body.ppzti-tovarnaya .tp-tabl tbody tr:nth-child(even) td, body.ppzti-tovarnaya .tp-tabl tbody tr:nth-child(even) th[scope="row"]{background:#F7F4F0} body.ppzti-tovarnaya .tp-tabl thead th{border-left:1px solid rgba(255,255,255,.22)} body.ppzti-tovarnaya .tp-tabl thead tr:first-child th:first-child{border-left:0} body.ppzti-tovarnaya .tp-tabl thead tr+tr th{border-top:1px solid rgba(255,255,255,.22)} /* Группы столбцов: у первой ячейки группы граница 2px. В теле группы начинаются с 3-го и 6-го столбца (два столбца с rowspan, потом по три в группе). */ body.ppzti-tovarnaya .tp-tabl thead th[colspan]{border-left:2px solid rgba(255,255,255,.5)} body.ppzti-tovarnaya .tp-tabl:has(th[colspan="3"]) thead tr+tr th:nth-child(1), body.ppzti-tovarnaya .tp-tabl:has(th[colspan="3"]) thead tr+tr th:nth-child(4){border-left:2px solid rgba(255,255,255,.5)} body.ppzti-tovarnaya .tp-tabl:has(th[colspan="3"]) td:nth-child(3), body.ppzti-tovarnaya .tp-tabl:has(th[colspan="3"]) td:nth-child(6){border-left:2px solid #C9BBA9} /* -------------------------------------------------------------------------- 3.21. ФАСОНКА, УСЛУГИ, КОНТАКТЫ: ПАЛИТРА ЭТАЛОНА И ПОЧТА В ФОРМЕ (02.09.2026) Слово Вени: «эталон там свой, нужно только в цветовую гамму и отступы». Категории красили карточки «Что важно» и форму заявки в жёлто-персиковые тона kategoriya.css (#FFF5E5, #FFEFD8), которых в эталоне нет: там бежевый #F7F4F0, белый, тёмно-синий и оранжевый. Переменные перебиты здесь, потому что body.ppzti-tovarnaya сильнее :root, а порядок файлов роли не играет. Разметку услуг, контактов и фасонки собирает trubi-uslugi-kontakty.php. -------------------------------------------------------------------------- */ body.ppzti-tovarnaya{--kt-teplyj-50:#FBF9F6;--kt-teplyj-100:#F7F4F0;--kt-teplyj-200:#FFFFFF} /* Почта первой строкой в форме заявки фасонки: крупнее текста формы, с подписью. */ .tp-blok .tp-forma-pochta{margin:0 0 14px;font-size:15.5px;color:var(--tekst);line-height:1.5} .tp-blok .tp-forma-pochta .tp-kopir-pochtu{font-weight:700;font-size:18px;color:var(--tekst);text-decoration:underline;text-decoration-color:var(--oranzh);text-underline-offset:3px} .tp-blok .tp-forma-pochta .tp-kopir-pochtu:hover{color:var(--oranzh)} .tp-blok .tp-forma-pochta small{display:block;font-size:12.5px;color:var(--tekst-slab);margin-top:2px} /* Контакты: блок формы идёт первым после баннера, а правило `.tp-geroj + .tp-blok` красит первую секцию в белый и на телефоне снимает верхнее поле. Форма эталона остаётся бежевой с полем, белая карточка формы на белом была невидима. */ .tp-soderzhimoe .tp-geroj + .tp-blok.glavnaya-forma{background:#F7F4F0} @media (max-width:767px){ .tp-soderzhimoe .tp-geroj + .tp-blok.glavnaya-forma{padding-top:38px} } /* Врезка призыва фасонки (.kt-vrezka) жила на персиковой --kt-teplyj-200 и после перевода переменной в белый слилась с фоном (ревизор 02.09.2026). Теперь как врезка расчёта эталона: бежевая с оранжевой кромкой слева. */ body.ppzti-tovarnaya .kt-vrezka{background:#F7F4F0;border-left:4px solid var(--oranzh)} /* -------------------------------------------------------------------------- 3.22. БАННЕРЫ ФАСОНКИ, УСЛУГ И КОНТАКТОВ: ЦВЕТ ЗАВЕСЫ ГЛАВНОЙ И ВОЗДУХ СНИЗУ (02.09.2026) Слово Вени по /komplektuyushhie-ppu/: «тут на картинке коричневый фон, а должен быть как на главной; блоки карты по сайту прижаты, нет отступов». Завеса категорий была коричневой rgba(26,17,9), у главной тёмно-синяя rgba(9,26,36); стеклянные плитки и пункты карты тоже на коричневом. Отступ снизу: правило `.tp-geroj + .tp-blok` тянет следующую секцию на 40px вверх поверх героя, а у героев категорий и услуг нижнее поле было 40 и 46, то есть съедалось целиком. Главная (эталон) не задета: у неё свой .glavnyj. -------------------------------------------------------------------------- */ body.ppzti-tovarnaya .kt-geroj-zaves{ background: linear-gradient(96deg, rgba(9,26,36,.95) 0%, rgba(9,26,36,.90) 32%, rgba(9,26,36,.66) 56%, rgba(9,26,36,.40) 100%), linear-gradient(to bottom, rgba(9,26,36,.58) 0%, rgba(9,26,36,0) 24%)} body.ppzti-tovarnaya .kt-geroj-banner .kt-fakt, body.ppzti-tovarnaya .kt-geroj-banner .kt-punkt{background:rgba(9,26,36,.55)} body.ppzti-tovarnaya .kt-geroj-banner .kt-punkt:hover, body.ppzti-tovarnaya .kt-geroj-banner .kt-punkt:focus-visible{background:rgba(9,26,36,.78)} /* Полоса фактов под баннером услуг и контактов: коричневая var(--temnyj) → стекло главной. */ body.ppzti-tovarnaya:not(.etalon) .tp-geroj .tp-plitka{background:rgba(9,26,36,.55);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.16)} @media (min-width:768px){ body.ppzti-tovarnaya:not(.etalon) .tp-geroj{padding-bottom:80px} } /* 3.23. Статья про СОДК, 02.09.2026: подзаголовок и абзац после таблицы прилипали к её рамке (.tp-blok h3 имеет margin 0, мерило отступов: 4px). Воздух задаёт нижний элемент. */ body.ppzti-tovarnaya .tp-blok .tp-tabl + h3, body.ppzti-tovarnaya .tp-blok .tp-tabl + p{margin-top:26px} /* 3.24. Нумерованный список и подзаголовки в статье, 02.09.2026. В базовых стилях есть только `.tp-blok ul` (отступ 20px), а `ol` не покрыт вовсе: браузер даёт ему свой отступ 40px и лишние поля сверху и снизу. Порядок работ на стыке в статье про СОДК идёт нумерованным списком, поэтому правило нужно. Заодно воздух над подзаголовком h3: у него margin-top ноль, и он прилипает к предыдущему абзацу и списку. */ /* ⚠ 30px, а не 22: при 22 двузначный номер обрезается левым краем, и десятый пункт печатается как «0.». Поймано глазами на кадре статьи про СОДК. */ body.ppzti-tovarnaya .tp-blok ol{margin:0 0 14px;padding-left:30px} body.ppzti-tovarnaya .tp-blok ol li{margin-bottom:6px} body.ppzti-tovarnaya .tp-statya-kolonka .tp-blok ol li{margin-bottom:8px} body.ppzti-tovarnaya .tp-blok p + h3, body.ppzti-tovarnaya .tp-blok ul + h3, body.ppzti-tovarnaya .tp-blok ol + h3{margin-top:26px}