/* Theme Name: AvtoGates Description: Публичная тема AvtoGates. Version: 1.4.5 Text Domain: avtogates */ :root { --ink: var(--wp--preset--color--ink, #16201c); --paper: var(--wp--preset--color--paper, #f3f0e7); --white: #fffdf8; --pine: var(--wp--preset--color--pine, #153b33); --pine-deep: #102c27; --lime: var(--wp--preset--color--lime, #d7f06a); --line: #d4d3c9; --muted: #647068; --sand: #e6dfcf; --hero-copy: #d7e0dc; --hero-secondary: #f4f7f3; --hero-facts: #b9c9c2; --line-soft: #c7c9be; --focus: #95c9ff; --surface-soft: #f1f3eb; --surface-success: #e7ece2; --meta: #56645c; --white-strong: #fff; --shadow-soft: rgba(35,46,40,.1); --ink-subtle: #4f5b55; --eyebrow: #53635a; --line-muted: #c5cdbf; --surface-card: #edf0e6; --surface-card-alt: #e2e7dc; --surface-warm: #f2ddae; --text-on-pine: #e7eee8; --step-number: #59675f; --visual-text: #576159; --visual-line: #c5bead; --visual-muted: #626a63; --form-note: #5f685f; --consent: #59645e; --error-bg: #fff0ed; --error-border: #b43f26; --error-text: #76301f; --footer-text: #e6ece5; --footer-muted: #9daf9f; --footer-link: #aebdb4; --telegram: #229ed9; --telegram-hover: #1889bf; --hero-divider: rgba(255,255,255,.17); --hero-link-hover: rgba(255,255,255,.09); --hero-shade: rgba(21,59,51,.27); --caption-bg: rgba(16,44,39,.84); --white-overlay: rgba(255,255,255,.55); --sticky-shadow: rgba(23,40,32,.14); --font-body: var(--wp--preset--font-family--body, "Manrope", Arial, Helvetica, sans-serif); --font-display: var(--wp--preset--font-family--display, "PT Serif", Georgia, "Times New Roman", serif); /* Реальная высота закреплённой мобильной кнопки .mobile-cta — используется и для её min-height, и для нижнего отступа страницы, чтобы подвал не оказывался под кнопкой (см. .mobile-cta и body в @media (max-width: 700px)). Одно число в одном месте. */ --mobile-cta-height: 55px; /* Раскладка редактора (Внешний вид → Редактор → Стили → Раскладка): горизонтальный отступ содержимого от краёв экрана и ширины разделов приходят из theme.json (settings.layout, styles.spacing.padding) как штатные переменные WordPress --wp--style--root--padding-* и --wp--style--global--content-size/--wide-size. Фолбэки после запятой — на случай показа этого файла вне WordPress (например, при статичном просмотре) и совпадают со значениями по умолчанию в theme.json. --avtg-content-inner — не настройка редактора, а производная величина «ширина содержимого минус отступы по бокам» (1240 − 2×28 = 1184px по умолчанию), нужна везде, где раньше было зашито число 1184. */ --avtg-content-inner: calc(var(--wp--style--global--content-size, 1240px) - (var(--wp--style--root--padding-left, 28px) + var(--wp--style--root--padding-right, 28px))); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-synthesis: none; } a { color: inherit; text-decoration: none; } /* Ссылки внутри текста (памятки, политика, текст объекта): сброс выше делал их неотличимыми от текста. Кнопки, навигация, карточки и отдельные ссылки-строки имеют класс или свой контейнер — их не трогаем. */ main :is(p, li, dd) a:not([class]):not(:is(.contact-list, .phone-link, .hero-phone, .inline-link, .roltek-link, .measurement-guide-link, .faq-heading, .consent, .form-error, .hero-text, .kit-switch-item, nav) a) { color: var(--pine); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } main :is(p, li, dd) a:not([class]):not(:is(.contact-list, .phone-link, .hero-phone, .inline-link, .roltek-link, .measurement-guide-link, .faq-heading, .consent, .form-error, .hero-text, .kit-switch-item, nav) a):hover { text-decoration-thickness: 2px; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } img { display: block; max-width: 100%; } .skip-link { background: var(--white); color: var(--ink); font-weight: 800; left: 12px; padding: 12px 16px; position: fixed; top: 12px; transform: translateY(-160%); z-index: 100; } .skip-link:focus { transform: translateY(0); } .site-header { align-items: center; background: rgba(243, 240, 231, .96); display: grid; grid-template-columns: 1fr auto 1fr; margin: 0 auto; padding: 18px max(var(--wp--style--root--padding-left, 28px), calc((100% - var(--wp--style--global--content-size, 1240px)) / 2)); position: relative; z-index: 5; } .brand { align-items: center; color: var(--pine); display: inline-flex; font-size: 14px; font-weight: 900; gap: 10px; letter-spacing: .105em; width: max-content; } .brand-mark { --brand-mark-line: var(--pine); --brand-mark-signal: var(--lime); align-items: center; color: var(--brand-mark-line); display: inline-flex; flex: 0 0 46px; height: 32px; justify-content: center; letter-spacing: 0; width: 46px; } .brand-mark svg { display: block; height: 100%; overflow: visible; width: 100%; } .brand-mark-line, .brand-mark-slat, .brand-mark-rail { fill: none; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } .brand-mark-line { stroke: var(--brand-mark-line); stroke-width: 4; } .brand-mark-slat { stroke: var(--brand-mark-line); stroke-width: 3; } .brand-mark-rail { stroke: var(--brand-mark-signal); stroke-width: 4; } .brand-word { line-height: 1; } .custom-logo-link { display: block; line-height: 0; } .custom-logo { height: auto; max-height: 42px; width: auto; } .site-header nav { display: block; } .site-header nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; } .site-header nav a { color: var(--ink-subtle); font-size: 13px; font-weight: 700; } .header-phone { display: flex; font-size: 14px; font-weight: 800; gap: 18px; justify-self: end; } .header-phone a { border-bottom: 1px solid var(--ink); padding-bottom: 3px; white-space: nowrap; } /* Мессенджеры в шапке (тема 1.4.5, UX-1.9): значки-кнопки внутри .header-phone (третья колонка сетки шапки), подпись для скринридера — aria-label, текст ссылки скрыт font-size: 0 (без CSS остаётся читаемая подпись). Значок — маска из встроенного SVG, цвет currentColor, внешних библиотек нет. */ .header-phone a.header-messenger { align-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--pine); display: inline-flex; font-size: 0; height: 36px; justify-content: center; padding: 0; width: 36px; } .header-phone a.header-messenger:hover { background: var(--lime); border-color: var(--pine); } .header-messenger::before { background: currentColor; content: ""; height: 20px; -webkit-mask: var(--messenger-icon) center / contain no-repeat; mask: var(--messenger-icon) center / contain no-repeat; width: 20px; } .header-messenger--telegram { --messenger-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.5 2.6 10.800c-.8.300-.8 1.400 0 1.700l4.800 1.600 1.800 5.600c.2.700 1 .9 1.600.4l2.700-2.400 4.700 3.500c.6.400 1.300.1 1.500-.6l3.100-15.100c.2-.9-.6-1.600-1.300-1.200zM9.300 13.500l8.600-5.400-6.700 6.400-.3 3.100z'/%3E%3C/svg%3E"); } .header-messenger--whatsapp { --messenger-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.2 14.8l-.4-.2-2.7.7.7-2.6-.3-.4A8 8 0 0 1 12 4zM8.8 7.5c-.3 0-.6.2-.8.5-.5.7-.8 1.5-.2 2.7.9 2 2.700 3.700 4.700 4.600 1.200.5 2 .4 2.600-.1.300-.3.500-.7.500-1l-1.900-.9-.8.9c-1-.4-2.100-1.400-2.600-2.500l.8-.8-.9-1.900z'/%3E%3C/svg%3E"); } .site-header .brand-word, .site-header .header-phone { margin: 0; } /* Match Landing spacing inside the native editor without changing unrelated blocks. */ .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) p { margin-block: 0 1em; } .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) :is(h1, h2, h3) { margin-top: 0; } .editor-styles-wrapper .is-root-container :is(.hero-media, .package-card, .promise-copy, .roltek-copy, .foundation-preview-options, .price-row, .service-grid, .visual-copy, .measurement-guide-copy, .faq-list, .form-panel, .service-card, .step, .measurement-guide-card, .package-grid, .section-heading, .foundation-preview) { margin-block: 0; } .hero { background: var(--pine); color: var(--white); display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, .55fr); min-height: 610px; overflow: hidden; } .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } /* Базовое значение теми: применяется только пока в редакторе у блока нет собственного отступа. На главной у hero-copy в БД уже задан отступ spacing-80 (настройка редактора, п.5 ниже) — он побеждает это правило через специфичность инлайн-стиля, поэтому здесь достаточно, чтобы нижняя граница clamp совпадала с корневым отступом редактора. */ .hero-copy { align-self: center; padding: 54px clamp(var(--wp--style--root--padding-left, 28px), 4vw, 72px); } .eyebrow, .card-kicker { color: var(--eyebrow); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .eyebrow, .card-kicker, .editor-styles-wrapper .is-root-container .eyebrow, .editor-styles-wrapper .is-root-container .card-kicker { margin: 0 0 17px; } .hero .eyebrow { color: var(--lime); } h1, h2, h3, p, .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) h1, .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) h2, .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) h3, .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) p { margin-top: 0; } h1 { font-size: clamp(42px, 3.9vw, 58px); letter-spacing: -.025em; line-height: 1.02; max-width: 720px; } h1, .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) h1 { margin-bottom: 27px; } h2 { font-size: clamp(36px, 4vw, 52px); letter-spacing: -.02em; line-height: 1.08; } h2, .editor-styles-wrapper .is-root-container :where(.hero, .section, .visual-story) h2 { margin-bottom: 22px; } .hero-text { color: var(--hero-copy); font-size: 19px; line-height: 1.55; max-width: 560px; } /* Тема 1.2.8: слово «автоматика» в лиде первого экрана ведёт на страницу комплектов; на тёмном фоне — светлая подчёркнутая ссылка. */ .hero-text a { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } .hero-text a:hover, .hero-text a:focus-visible { text-decoration-thickness: 2px; } /* Тема 1.4.0: строка «Выезжаем на замер в … и окрестности» под лидом первого экрана продуктовой страницы (только для города из рекламной ссылки). */ .hero-city-note { color: var(--white); font-weight: 700; margin: 10px 0 0; } .hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; } .hero-actions, .editor-styles-wrapper .is-root-container .hero-actions { margin-top: 34px; } .hero-actions > .wp-block-buttons { display: contents; } .hero-actions .phone-link, .editor-styles-wrapper .is-root-container .hero-actions .phone-link { margin: 0; } .hero-secondary-link { align-items: center; display: inline-flex; min-height: 44px; } .hero-secondary-link .wp-block-button__link, .is-style-avtogates-link .wp-block-button__link { border-bottom: 1px solid var(--hero-facts); color: var(--hero-secondary); } .guide-hero .wp-block-button.is-style-avtogates-outline .wp-block-button__link, .guide-next .wp-block-button.is-style-avtogates-outline .wp-block-button__link { border-color: #c9d7d0; color: inherit; } .button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .phone-link { align-items: center; border-bottom: 1px solid #9eb3aa; color: var(--hero-secondary); display: inline-flex; font-size: 14px; font-weight: 800; min-height: 44px; padding: 8px 0; } /* .phone-link — это обёртка-

: без этого правила зона касания ограничивалась бы строкой текста внутри , а не всей 44px высотой обёртки. Тот же приём — ниже у .inline-link, .roltek-link, .measurement-guide-link: везде клик регистрируется по границам самой ссылки, а не её родителя. */ .phone-link a { align-items: center; display: inline-flex; min-height: 44px; } /* Блок «Позвонить» в hero: оба номера крупно, каждый — отдельная зона касания. */ .hero-actions .hero-phones { flex-basis: 100%; margin: 6px 0 0; } .hero-phones-title { color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .12em; margin: 0 0 4px; text-transform: uppercase; } .hero-phone-list { display: flex; flex-wrap: wrap; gap: 4px 36px; } .hero-phone { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; } /* Значки типа телефона рисуются CSS-маской, чтобы в post_content не было (kses его вырезает). */ .hero-phone a::before { background: var(--lime); content: ""; flex: none; height: 24px; margin-right: 10px; -webkit-mask: var(--hero-phone-icon) center / contain no-repeat; mask: var(--hero-phone-icon) center / contain no-repeat; width: 24px; } .hero-phone--city { --hero-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); } .hero-phone--mobile { --hero-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; } .hero-phone a { align-items: center; border-bottom: 2px solid var(--lime); color: var(--white); display: inline-flex; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.01em; min-height: 48px; } .hero-facts { border-top: 1px solid var(--hero-divider); display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 20px; } .hero-facts, .editor-styles-wrapper .is-root-container .hero-facts { margin-top: 42px; } .hero-facts span { color: var(--hero-facts); font-size: 12px; } .hero-facts span::before { color: var(--lime); content: "●"; font-size: 7px; vertical-align: 2px; } .hero-facts span::before, .editor-styles-wrapper .is-root-container .hero-facts span::before { margin-right: 8px; } .hero-facts p { color: var(--hero-facts); font-size: 12px; } .hero-facts p, .editor-styles-wrapper .is-root-container .hero-facts p { margin: 0; } .hero-facts p::before { color: var(--lime); content: "●"; font-size: 7px; vertical-align: 2px; } .hero-facts p::before, .editor-styles-wrapper .is-root-container .hero-facts p::before { margin-right: 8px; } .hero-media { min-height: 610px; overflow: hidden; position: relative; } .hero-media, .editor-styles-wrapper .is-root-container .hero-media { margin: 0; } .hero-media::after { background: linear-gradient(90deg, var(--hero-shade), transparent 28%); content: ""; inset: 0; pointer-events: none; position: absolute; } /* Размер изображения, заданный в редакторе (inline width/height у is-resized), перебивал height:100% и картинка висела полосой сверху блока, особенно в ландшафте телефона: блок 610-980px высотой, картинка 207px. Заполнение кадра принадлежит теме. Это не про отступы или ширины раздела (тема настроек редактора п.1-3 этого файла) — про заполнение кадра фото конкретным изображением, у которого редактор мог сохранить собственные width/height как инлайн-атрибуты/стиль (is-resized). Без !important это не отключить, не трогая содержимое страниц: инлайн-стиль в разметке блока всегда весомее внешнего правила. */ .hero-media img, .hero-media img[style] { height: 100% !important; object-fit: cover; width: 100% !important; } .hero-media figcaption, .visual-story figcaption { background: var(--caption-bg); bottom: 18px; color: rgba(255,255,255,.9); font-size: 12px; line-height: 1.4; padding: 8px 10px; position: absolute; right: 18px; z-index: 2; } .project-peek { background: var(--white); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); max-width: var(--wp--style--global--content-size, 1240px); } .project-peek, .editor-styles-wrapper .is-root-container .project-peek { margin: 0 auto; } /* width:100% обязателен: без него высота (min-height 330px при aspect-ratio 4/3) выводила ширину 440px, и в узких двухколоночных раскладках (ландшафт телефона, ~844px) картинка вылезала из своей колонки под текст. */ .project-peek-media { aspect-ratio: 4 / 3; min-height: 330px; width: 100%; } .project-peek-media img, .project-peek-media .case-image-placeholder { height: 100%; object-fit: cover; width: 100%; } .project-peek-copy { align-self: center; max-width: 600px; padding: 56px clamp(30px, 6vw, 94px); } .project-peek-meta { color: var(--meta); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .project-peek-meta, .editor-styles-wrapper .is-root-container .project-peek-meta { margin-bottom: 12px; } .project-peek h2 { font-size: clamp(30px, 3.5vw, 46px); } .project-peek h2, .editor-styles-wrapper .is-root-container .project-peek h2 { margin-bottom: 16px; } .project-peek-copy > p:not(.project-peek-meta) { color: var(--muted); font-size: 16px; line-height: 1.6; } .project-peek-copy > p:not(.project-peek-meta), .editor-styles-wrapper .is-root-container .project-peek-copy > p:not(.project-peek-meta) { margin-bottom: 22px; } .section, .editor-styles-wrapper .is-root-container > .section:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { margin: 0 auto; max-width: var(--wp--style--global--content-size, 1240px); padding: var(--wp--preset--spacing--60, 104px) var(--wp--style--root--padding-left, 28px); } .promise { display: grid; gap: 70px; grid-template-columns: 1.08fr .92fr; } .promise-copy { align-self: end; max-width: 500px; } .promise-copy p, .section-heading > p, .faq-heading > p, .contact-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.65; } .inline-link { align-items: center; border-bottom: 1px solid var(--ink); display: inline-flex; font-size: 14px; font-weight: 800; min-height: 44px; padding-bottom: 4px; } .inline-link a { align-items: center; display: inline-flex; min-height: 44px; } .inline-link, .editor-styles-wrapper .is-root-container .inline-link { margin-top: 8px; } .roltek, .editor-styles-wrapper .is-root-container > .roltek:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { align-items: center; background: var(--surface-success); display: grid; gap: 34px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 46px 52px; } .roltek, .editor-styles-wrapper .is-root-container .roltek { margin-bottom: var(--wp--preset--spacing--70, 104px); } /* Секция .configurator — обёртка плагина конфигуратора, у которого свои внутренние отступы (64/88 px на десктопе). Двойной отступ секции давал ~320 px пустоты до и после конфигуратора. */ .section.configurator { padding-bottom: 0; padding-top: 0; } .roltek-logo { align-items: center; display: flex; width: 190px; } .roltek-logo img { display: block; height: auto; width: 100%; } .roltek-copy .eyebrow { color: var(--pine); } .roltek-copy .eyebrow, .editor-styles-wrapper .is-root-container .roltek-copy .eyebrow { margin-bottom: 12px; } .roltek-copy h2 { font-size: clamp(30px, 3.2vw, 42px); } .roltek-copy h2, .editor-styles-wrapper .is-root-container .roltek-copy h2 { margin-bottom: 10px; } .roltek-copy > p:last-child { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 640px; } .roltek-copy > p:last-child, .editor-styles-wrapper .is-root-container .roltek-copy > p:last-child { margin: 0; } .roltek-link { align-items: center; border-bottom: 1px solid var(--pine); color: var(--pine); display: inline-flex; font-size: 14px; font-weight: 800; gap: 9px; justify-self: end; padding-bottom: 5px; white-space: nowrap; } .roltek-link span { font-size: 18px; line-height: 1; } .roltek-link a { align-items: center; display: inline-flex; min-height: 44px; } /* Отступ считается от ширины окна (процент padding берётся от родителя), а сам раздел ограничен шириной wideSize редактора — поэтому ширину родителя тоже ограничиваем ей же (см. правило .hero, .packages... ниже), иначе на широких экранах содержимое «Стартовых комплектаций» сжималось бы вместо общей ширины --avtg-content-inner (contentSize минус боковые отступы, 1184px по умолчанию). Обе стороны (contentSize/wideSize — «Раскладка», отступ — «Поля» в Внешний вид → Редактор → Стили) настраиваются в редакторе и меняют эту формулу сами. */ .packages, .editor-styles-wrapper .is-root-container > .packages:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { background: var(--white); max-width: none; padding-left: max(var(--wp--style--root--padding-left, 28px), calc((min(100%, var(--wp--style--global--wide-size, 1600px)) - var(--avtg-content-inner)) / 2)); padding-right: max(var(--wp--style--root--padding-right, 28px), calc((min(100%, var(--wp--style--global--wide-size, 1600px)) - var(--avtg-content-inner)) / 2)); } /* Full-width sections must not inherit the editor content-width cap. */ .editor-styles-wrapper .is-root-container > :is(.hero, .packages, .visual-story, .wp-block-avtogates-featured-project):where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { max-width: none; margin-block: 0; } /* Широкие разделы (hero, «Варианты», рассказ с крупным фото, врезка проекта и hero страниц «как работаем») на больших экранах ограничены wideSize редактора по центру (по умолчанию 1600px): до этого они тянулись на всю ширину монитора, а остальные разделы стоят в сетке contentSize (по умолчанию 1240px, решение владельца 17.09.2026). Врезка проекта остаётся на contentSize — она часть той же сетки, см. .project-peek выше. */ .hero, .packages, .visual-story, .guide-hero { margin-left: auto; margin-right: auto; max-width: var(--wp--style--global--wide-size, 1600px); } .section-heading { align-items: end; display: flex; gap: 48px; justify-content: space-between; } .section-heading, .editor-styles-wrapper .is-root-container .section-heading { margin-bottom: 42px; } .section-heading > div { max-width: 680px; } .section-heading > p { max-width: 420px; } .foundation-preview { background: var(--surface-soft); border-top: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); padding: 25px 28px; } .foundation-preview, .editor-styles-wrapper .is-root-container .foundation-preview { margin-bottom: 24px; } .foundation-preview .card-kicker, .editor-styles-wrapper .is-root-container .foundation-preview .card-kicker { margin-bottom: 12px; } .foundation-preview h3 { font-size: 25px; font-weight: 400; line-height: 1.15; max-width: 430px; } .foundation-preview h3, .editor-styles-wrapper .is-root-container .foundation-preview h3 { margin: 0; } .foundation-preview-options { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .foundation-preview-options p { border-left: 1px solid var(--line-muted); padding-left: 16px; } .foundation-preview-options p, .editor-styles-wrapper .is-root-container .foundation-preview-options p { margin: 0; } .foundation-preview-options strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 400; } .foundation-preview-options strong, .editor-styles-wrapper .is-root-container .foundation-preview-options strong { margin-bottom: 5px; } .foundation-preview-options span, .foundation-preview-note { color: var(--muted); font-size: 13px; line-height: 1.5; } .foundation-preview-note, .foundation-preview-links { grid-column: 1 / -1; } .foundation-preview-note, .editor-styles-wrapper .is-root-container .foundation-preview-note { margin: 0; } .package-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } .package-card { background: var(--surface-card); padding: 37px; } .package-card:nth-child(2) { background: var(--surface-card-alt); } .card-kicker { color: var(--pine); } .card-kicker, .editor-styles-wrapper .is-root-container .card-kicker { margin-bottom: 36px; } .package-card h3 { font-size: 32px; font-weight: 400; letter-spacing: -.015em; line-height: 1.12; } .package-card h3, .editor-styles-wrapper .is-root-container .package-card h3 { margin-bottom: 16px; } .price-row { align-items: center; display: flex; flex-wrap: wrap; gap: 11px 16px; } .price { font-size: 34px; font-weight: 800; letter-spacing: -.045em; } .price, .editor-styles-wrapper .is-root-container .price { margin: 0; } .without-auto { background: var(--surface-warm); font-size: 12px; font-weight: 800; padding: 7px 9px; text-transform: uppercase; } .without-auto, .editor-styles-wrapper .is-root-container .without-auto { margin: 0; } .package-description { line-height: 1.55; max-width: 500px; } .package-description, .editor-styles-wrapper .is-root-container .package-description { margin: 23px 0; } .list-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .list-title, .editor-styles-wrapper .is-root-container .list-title { margin-bottom: 11px; } .package-card ul { color: var(--eyebrow); line-height: 1.55; padding-left: 20px; } .package-card ul, .editor-styles-wrapper .is-root-container .package-card ul { margin: 0; } .package-card li + li, .editor-styles-wrapper .is-root-container .package-card li + li { margin-top: 7px; } .price-note { background: var(--pine); color: var(--text-on-pine); font-size: 14px; line-height: 1.6; padding: 23px 28px; } .price-note, .editor-styles-wrapper .is-root-container .price-note { margin-top: 18px; } /* Блок "Куда выезжаем" (п.3.4 ТЗ 22.09.2026) — единый список направлений перед формой вместо разрозненных упоминаний географии в hero/подвале/FAQ. Список — обычный wp-block-list, раскладываем в ряд чипами вместо вертикального маркированного списка. */ .coverage-zone-list.wp-block-list { color: var(--pine); display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding-left: 0; } .coverage-zone-list.wp-block-list, .editor-styles-wrapper .is-root-container .coverage-zone-list.wp-block-list { margin: 0; } .coverage-zone-list li { background: var(--paper-strong, #f2efe4); border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 700; padding: 10px 20px; } .coverage-zone-note { color: var(--muted); font-size: 14px; } .coverage-zone-note, .editor-styles-wrapper .is-root-container .coverage-zone-note { margin-top: 18px; } .services, .editor-styles-wrapper .is-root-container > .services:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { padding-bottom: var(--wp--preset--spacing--70, 104px); } .service-grid { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); } .service-card { border-right: 1px solid var(--line); padding: 28px 24px 32px 0; } .service-card:not(:first-child) { padding-left: 24px; } .service-card:last-child { border-right: 0; } .service-card span, .step span { color: var(--step-number); font-size: 12px; font-weight: 800; } .service-card h3, .step h3 { font-size: 23px; font-weight: 400; line-height: 1.12; } .service-card h3, .step h3, .editor-styles-wrapper .is-root-container .service-card h3, .editor-styles-wrapper .is-root-container .step h3 { margin: 35px 0 12px; } .service-card p, .step p { color: var(--muted); font-size: 14px; line-height: 1.55; } .service-card p, .step p, .editor-styles-wrapper .is-root-container .service-card p, .editor-styles-wrapper .is-root-container .step p { margin-bottom: 0; } .cases, .editor-styles-wrapper .is-root-container > .cases:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { border-top: 1px solid var(--line); padding-top: var(--wp--preset--spacing--70, 104px); } .portfolio-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 22px; } .portfolio-filter button { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--pine); cursor: pointer; font: 700 12px var(--font-body); min-height: 44px; padding: 9px 13px; } .portfolio-filter button.is-active, .portfolio-filter button:hover { background: var(--pine); border-color: var(--pine); color: var(--white-strong); } .case-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } .cases > .wp-block-buttons, .editor-styles-wrapper .is-root-container .cases > .wp-block-buttons { margin-top: 40px; } .case-card { background: var(--white); border: 1px solid var(--line); } .case-card img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; width: 100%; } .case-image-placeholder { align-items: center; aspect-ratio: 4 / 3; background: var(--surface-soft); color: var(--muted); display: flex; font-size: 13px; justify-content: center; } .portfolio-empty { background: var(--white); border: 1px solid var(--line); color: var(--muted); margin: 0; max-width: 640px; padding: 24px; } .portfolio-loading { align-items: center; display: flex; min-height: 260px; } .portfolio-status { color: var(--muted); font-size: 13px; margin: 0 0 16px; } .portfolio-empty h3 { color: var(--pine); font-size: 24px; margin: 0 0 10px; } .portfolio-empty p { line-height: 1.6; margin: 0 0 18px; } .case-copy { padding: 24px; } .case-meta { color: var(--meta); font-size: 11px; font-weight: 800; letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; } .case-copy h3 { font-size: 24px; font-weight: 400; line-height: 1.18; margin-bottom: 10px; } .case-description { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 14px; } /* Мини-ТЗ 23.09.2026 (унификация карточек портфолио, п.2): 5 из 6 фиксированных фактов (без района — он уже показан отдельной строкой .case-meta выше) компактной сеткой на карточке. Пустое значение показывает «—» (см. avtg_portfolio_fixed_facts) — не пропускается молча. */ .case-facts { display: grid; gap: 6px 14px; grid-template-columns: repeat(2, 1fr); margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--line); } .case-facts li { display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; } .case-fact-label { color: var(--meta); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 10px; } .case-fact-value { color: var(--ink); } /* Тот же фиксированный список из 6 фактов на странице объекта — полный, включая район (project-facts блок, avtg_portfolio_facts_block_render). Отдельный необязательный список "Что ещё сделали" ниже — старое свободное поле facts, сохранённое как доп. детали. */ .project-facts-grid { display: grid; gap: 12px 24px; grid-template-columns: repeat(2, 1fr); margin: 0 0 24px; padding: 0; list-style: none; } .project-fact-row { display: flex; flex-direction: column; gap: 2px; } .project-fact-row dt { color: var(--meta); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; } .project-fact-row dd { color: var(--ink); font-size: 15px; margin: 0; } .project-facts h3 { font-size: 13px; font-weight: 800; letter-spacing: .04em; margin: 0 0 10px; text-transform: uppercase; } /* Ни у одного из 11 объектов на dev.avtogates.ru не заполнен the_content() ("О проекте") — раздел рендерит пустой

без текста (h2:only-child), оставляя половину сетки пустой, а «Параметры объекта» — сжатыми в узкую боковую колонку. Пока текста нет, скрываем пустой заголовок и растягиваем факты на всю ширину; как только появится текст, разметка вернётся к исходной колонке 1.45fr/.65fr сама (правила применяются только через :has()). */ .project-public-content > div:has(> h2:only-child) { display: none; } .project-public-content:has(> div > h2:only-child) { grid-template-columns: 1fr; } .project-public-content:has(> div > h2:only-child) .project-facts { padding: 36px; } .project-public-content:has(> div > h2:only-child) .project-facts-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 32px; } @media (max-width: 900px) { .project-public-content:has(> div > h2:only-child) .project-facts-grid { grid-template-columns: repeat(2, 1fr); } } /* .project-lightbox уже задаёт display:flex безусловно (см. минифицированный блок ниже), что перебивает браузерный [hidden]{display:none} — без этого правила закрытие модалки (assets/js/project-gallery-lightbox.js) снимает атрибут hidden, но окно остаётся видимым. */ .project-lightbox[hidden] { display: none; } .project-lightbox-counter { bottom: 18px; color: #fff; font-size: .9rem; font-weight: 700; left: 50%; margin: 0; position: absolute; transform: translateX(-50%); } /* Пока следующий кадр грузится, текущий приглушён, а по центру крутится индикатор — клик по стрелке виден сразу. */ .project-lightbox.is-loading figure img { opacity: .35; transition: opacity .15s; } .project-lightbox.is-loading::after { animation: avtg-lightbox-spin .8s linear infinite; border: 3px solid rgba(255,255,255,.35); border-radius: 50%; border-top-color: #fff; content: ""; height: 40px; left: calc(50% - 20px); position: absolute; top: calc(50% - 20px); width: 40px; } @keyframes avtg-lightbox-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .project-lightbox.is-loading::after { animation-duration: 2.4s; } } .visual-story { background: var(--sand); display: grid; grid-template-columns: 1.12fr .88fr; } .visual-story figure { min-height: 590px; overflow: hidden; position: relative; } .visual-story figure, .editor-styles-wrapper .is-root-container .visual-story figure { margin: 0; } .visual-story figure img { height: 100%; object-fit: cover; width: 100%; } .visual-copy { align-self: center; max-width: 590px; padding: 70px clamp(30px, 6vw, 100px); } .visual-copy > p:not(.eyebrow) { color: var(--visual-text); font-size: 17px; line-height: 1.6; } .visual-story-note { border-top: 1px solid var(--visual-line); color: var(--visual-muted); font-size: 14px; line-height: 1.5; padding-top: 18px; } .visual-story-note, .editor-styles-wrapper .is-root-container .visual-story-note { margin: 28px 0 0; } .visual-story-note strong { color: var(--ink); font-weight: 800; } .process, .editor-styles-wrapper .is-root-container > .process:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { padding-bottom: var(--wp--preset--spacing--70, 104px); } .measurement-guide { align-items: stretch; background: #e7ece2; display: grid; gap: 70px; grid-template-columns: 1.08fr .92fr; } .measurement-guide-copy { max-width: 530px; } /* Коллаж реальных фото подготовки въезда в левой колонке «Памяток»: колонка растягивается на высоту карточек справа, крупный вертикальный кадр слева, два кадра стопкой справа. */ .measurement-guide-intro { display: flex; flex-direction: column; } .measurement-guide-collage { display: grid; flex: 1; gap: 10px; grid-template-columns: 1.15fr .85fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); margin-top: 32px; min-height: 300px; } .measurement-guide-collage figure, .editor-styles-wrapper .is-root-container .measurement-guide-collage figure { margin: 0; min-height: 0; overflow: hidden; position: relative; } .measurement-guide-collage img { display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; } .measurement-guide-collage .collage-main { grid-row: 1 / span 2; } .measurement-guide-copy > p { color: var(--muted); font-size: 17px; line-height: 1.65; } .measurement-guide-copy > p, .editor-styles-wrapper .is-root-container .measurement-guide-copy > p { margin: 0; } .measurement-guide-links { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .measurement-guide-links, .editor-styles-wrapper .is-root-container .measurement-guide-links { margin-top: 24px; } .measurement-guide-link { background: var(--white-overlay); border: 1px solid #c7d0c6; color: var(--ink); display: grid; gap: 6px; min-height: 112px; padding: 18px; text-decoration: none; } .measurement-guide-link:hover, .measurement-guide-link:focus-visible { background: var(--white); border-color: var(--pine); } /* Карточка —

…

: сама ссылка внутри должна занимать всю карточку, иначе зона касания ограничена строкой текста внутри , а не всей карточкой (на мобильном карточка не держит min-height: 112px — см. ниже). */ .measurement-guide-link a { display: block; min-height: 44px; } .measurement-guide-link strong { font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1.1; } /* Заголовок и пояснение карточки памятки — каждый со своей строки. У карточек, добавленных редактором раньше, это две отдельные ссылки с
, а у карточек из avtogates_guide_link_card() — одна ссылка с и внутри: без display:block они слипались в одну строку. */ .measurement-guide-link strong, .measurement-guide-link span { display: block; } .measurement-guide-link span { color: var(--muted); font-size: 12px; line-height: 1.45; } .measurement-guide-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 22px; } .measurement-guide-actions, .editor-styles-wrapper .is-root-container .measurement-guide-actions { margin-top: 22px; } .measurement-guide-actions .button, .editor-styles-wrapper .is-root-container .measurement-guide-actions .button { margin-top: 0; } .measurement-guide-actions .inline-link, .editor-styles-wrapper .is-root-container .measurement-guide-actions .inline-link { margin-top: 0; } .steps { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); } .steps, .editor-styles-wrapper .is-root-container .steps { margin-top: 42px; } .step { border-right: 1px solid var(--line); padding: 25px 20px 5px 0; } .step:not(:first-child) { padding-left: 20px; } .step:last-child { border-right: 0; } .step h3, .editor-styles-wrapper .is-root-container .step h3 { margin-top: 34px; } .faq { border-top: 1px solid var(--line); display: grid; gap: 80px; grid-template-columns: .72fr 1.28fr; } .faq-heading { max-width: 390px; } .faq-heading > a { border-bottom: 1px solid var(--ink); display: inline-block; font-size: 18px; font-weight: 800; padding-bottom: 3px; } .faq-heading > a, .editor-styles-wrapper .is-root-container .faq-heading > a { margin-top: 10px; } .faq-list { border-top: 1px solid #bfc3ba; } .faq-list details { border-bottom: 1px solid #bfc3ba; } .faq-list summary { cursor: pointer; font-family: var(--font-display); font-size: 21px; line-height: 1.25; list-style: none; padding: 23px 44px 23px 0; position: relative; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; font-family: var(--font-body); font-size: 26px; font-weight: 400; position: absolute; right: 4px; top: 19px; } .faq-list details[open] summary::after { content: "−"; } .faq-list details p { color: var(--muted); line-height: 1.6; } .faq-list details p, .editor-styles-wrapper .is-root-container .faq-list details p { margin: -3px 50px 23px 0; } .contact { display: grid; gap: 80px; grid-template-columns: .85fr 1.15fr; } .contact-copy { max-width: 460px; } .contact-list { display: flex; flex-direction: column; gap: 11px; } .contact-list, .editor-styles-wrapper .is-root-container .contact-list { margin-top: 30px; } .contact-list a { font-family: var(--font-display); font-size: 24px; width: max-content; } .contact-list a:last-child { font-family: var(--font-body); font-size: 15px; font-weight: 800; } .contact-list a:last-child, .editor-styles-wrapper .is-root-container .contact-list a:last-child { margin-top: 7px; } .telegram-contact { margin-top: 28px; } .telegram-contact .button { width: max-content; } .telegram-contact p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 9px 0 0; max-width: 360px; } .button-telegram { background: var(--telegram); color: var(--white); } .button-telegram:hover { background: var(--telegram-hover); } .coverage { border-top: 1px solid var(--line); color: #56645c; font-size: 12px; padding-top: 20px; } .coverage, .editor-styles-wrapper .is-root-container .coverage { margin-top: 30px; } .form-panel { background: var(--white); box-shadow: 0 16px 55px var(--shadow-soft); padding: 38px; } .form-panel form { display: grid; gap: 17px; } .form-title h3 { font-size: 29px; font-weight: 400; line-height: 1.12; margin-bottom: 5px; } .form-title p { color: var(--muted); font-size: 13px; margin-bottom: 10px; } .form-next-step { background: var(--surface-soft); color: var(--eyebrow); font-size: 13px; line-height: 1.5; margin: 0; padding: 12px 14px; } .form-submitting { color: var(--pine); font-size: 13px; font-weight: 800; margin: 0; } .selected-package-summary { align-items: center; background: var(--surface-success); display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; padding: 12px 14px; } .selected-package-summary span { color: var(--ink); font-size: 13px; line-height: 1.4; } .selected-package-summary button { background: transparent; border: 0; border-bottom: 1px solid currentColor; color: var(--pine); cursor: pointer; font-size: 12px; font-weight: 800; padding: 2px 0; } .selected-package-summary button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .form-panel label { display: grid; font-size: 13px; font-weight: 800; gap: 7px; } .field-label { align-items: baseline; display: flex; gap: 8px; } .field-label em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; } .form-panel input, .form-panel textarea, .form-panel select { background: var(--white); border: 1px solid var(--line-soft); border-radius: 0; color: var(--ink); outline: 0; padding: 13px; resize: vertical; width: 100%; } .form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus { border-color: var(--pine); } .form-panel .button { margin-top: 4px; } .form-note { color: var(--form-note); font-size: 12px; line-height: 1.45; margin: 0; } .form-success { align-items: flex-start; display: flex; flex-direction: column; min-height: 520px; padding: 25px 5px; } .success-symbol { align-items: center; background: var(--lime); border-radius: 50%; display: flex; font-size: 27px; font-weight: 800; height: 53px; justify-content: center; margin-bottom: 27px; width: 53px; } .form-success h3 { font-size: 32px; font-weight: 400; line-height: 1.12; margin-bottom: 12px; } .form-success p { color: var(--muted); line-height: 1.55; max-width: 390px; } .form-success .case-number { color: var(--ink); font-size: 14px; margin: 2px 0; } .case-number strong { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .03em; } .text-action { color: var(--pine); font-size: 14px; font-weight: 700; margin: 4px 0 2px; text-decoration: underline; text-underline-offset: 3px; } .consent { align-items: start; color: var(--consent); display: flex; font-size: 12px; font-weight: 400; gap: 9px; line-height: 1.45; } .consent input { accent-color: var(--pine); height: 16px; margin: 1px 0 0; padding: 0; width: 16px; } .consent a, .form-error a { border-bottom: 1px solid currentColor; font-weight: 800; } .honeypot { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; } .form-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); font-size: 12px; line-height: 1.5; margin: 0; padding: 10px 12px; } footer { align-items: start; background: var(--pine-deep); color: var(--footer-text); display: grid; gap: 35px; grid-template-columns: 1.3fr 1fr .7fr .9fr .9fr; padding: 43px max(var(--wp--style--root--padding-left, 28px), calc((100% - var(--avtg-content-inner)) / 2)); } footer .brand { color: var(--white); } footer .brand-mark { --brand-mark-line: var(--white); --brand-mark-signal: var(--lime); } .footer-brand p { color: var(--footer-muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; max-width: 330px; } .footer-contacts, .footer-links, .footer-guides { display: flex; flex-direction: column; gap: 9px; } .footer-contacts a { font-size: 13px; font-weight: 800; } .footer-links a, .footer-guides a { color: var(--footer-link); font-size: 12px; } .footer-guides-title { color: var(--footer-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .footer-guides-title, .editor-styles-wrapper .is-root-container .footer-guides-title { margin: 0 0 4px; } /* Ссылки списка «Памятки» — абзацы блочного редактора со своим нижним отступом: вместе с зоной касания 44px строка занимала около 70px и список расползался. Ритм задаёт только ссылка, поэтому отступы обёрток сняты, а колонка идёт без промежутка. */ .footer-guides { gap: 0; } .footer-guides p, .footer-links p, .footer-contacts p, .editor-styles-wrapper .is-root-container :is(.footer-guides, .footer-links, .footer-contacts) p { margin: 0; } .footer-contacts { gap: 0; } /* Промежуток между строками в колонках подвала задаёт раскладка блоков WordPress (.is-layout-flow > * + * { margin-block-start }), а не отступы абзацев — снимаем именно её, иначе строки расходятся на 60px поверх зоны касания. */ :is(.footer-contacts, .footer-links, .footer-guides) > * + * { margin-block-start: 0; } /* Ссылки навигации в подвале лежат в одном абзаце и разделены
. Сами ссылки — блочные строки со своей высотой, поэтому перевод строки добавлял ещё одну пустую строку сверх них. В контактах ссылки строчные (телефоны и почта), там
и делает перенос — его не трогаем. */ .footer-links br { display: none; } .footer-links a { align-items: center; display: flex; } .footer-guides p:first-child { margin-bottom: 4px; } .footer-guides a { align-items: center; display: flex; min-height: 38px; } /* Селектор с body обязателен: раскладочный стиль ядра WordPress «body .is-layout-flex { display: flex }» весомее одного класса и показывал закреплённую мобильную кнопку на компьютере — лаймовой полосой во всю ширину над подвалом. */ body .mobile-cta { display: none; } /* Плавающий блок "Наверх" / "К конфигуратору" в левом нижнем углу главной (пробный вариант, решение владельца 17.09.2026, avtogates_floating_shortcuts в functions.php, вывод через wp_footer). Свой класс без классов блоков ядра — компонент не входит в разметку блоков редактора, поэтому конфликт специфичности с "body .is-layout-flex" (см. пояснение у .mobile-cta выше) здесь не возникает. */ .avtogates-floating-shortcuts { bottom: 20px; display: flex; flex-direction: column; gap: 10px; position: fixed; right: 20px; z-index: 40; } .avtogates-floating-shortcuts__link { align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 10px 26px var(--shadow-soft); color: var(--pine); display: flex; height: 44px; justify-content: center; min-height: 44px; min-width: 44px; width: 44px; } .avtogates-floating-shortcuts__link:hover { border-color: var(--pine); background: var(--lime); } /* Тот же приём, что и у .mobile-cta: пока открыт конфигуратор (признак на публикует плагин avtogates-configurator), прячем блок — иначе он перекрывает модальное окно заявки конфигуратора (z-index: 1000 у модального окна, у блока — 40, но display:none надёжнее z-index на случай будущих изменений верстки модального окна). Правило не привязано к мобильной медиа-выборке в отличие от .mobile-cta, потому что блок виден и на компьютере. */ html[data-avtogates-configurator-visible="true"] .avtogates-floating-shortcuts { display: none; } @media (max-width: 960px) { /* Колонки те же, что на широком экране: логотип — меню — телефон. Раньше здесь было grid-template-columns: 1fr auto и .site-header nav { display: none } — меню пряталось вместе со штатной кнопкой мобильного меню WordPress, и на телефоне меню не было совсем. */ .site-header { gap: 12px; padding: 16px 20px; } .site-header nav ul { gap: 18px; } .hero { grid-template-columns: 1fr 1fr; } /* Как и базовое правило .hero-copy выше — планшетный отступ теми, побеждается инлайн-стилем редактора (spacing-80) на главной, пока он там задан. */ .hero-copy { padding: 64px var(--wp--style--root--padding-left, 28px); } .services .section-heading { display: block; } .service-grid { grid-template-columns: repeat(2, 1fr); } .case-grid { grid-template-columns: repeat(2, 1fr); } .case-card:last-child { grid-column: 1 / -1; } .service-card:nth-child(2) { border-right: 0; } .service-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .service-card:nth-child(3) { padding-left: 0; } .steps { grid-template-columns: repeat(2, 1fr); } .roltek, .editor-styles-wrapper .is-root-container > .roltek:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { gap: 24px; grid-template-columns: auto 1fr; } .roltek-link { grid-column: 2; justify-self: start; } .step { border-bottom: 1px solid var(--line); } .step:nth-child(2n) { border-right: 0; } .step:nth-child(3), .step:nth-child(5) { padding-left: 0; } } /* Ландшафт телефона: ширина попадает в двухколоночную раскладку (960px и меньше — то же правило, что и в @media (max-width: 960px) выше), а высоты 390-430px не хватает. С 18.09.2026 отступ spacing-80 сам тянется по ширине экрана (theme.json settings.spacing.spacingSizes, слаг 80) и на узкой ширине уже не раздувает hero — поэтому обычный мобильный портретный разбор ниже (@media max-width: 700px) больше не переопределяет эти отступы принудительно. Но здесь ширина не узкая (ландшафт даёт 700-960px), а тесна именно высота — вертикальный отступ реагирует только на vw/ширину и не может сам учесть высоту экрана. !important остаётся: это единственный способ перебить инлайн-стиль редактора (spacing-80 в БД) без изменения содержимого страниц (см. правила репозитория). */ @media (max-width: 960px) and (max-height: 520px) { .hero-copy, .hero-copy[style] { padding-top: 32px !important; padding-bottom: 32px !important; } .hero, .hero-media { min-height: 0; } } @media (max-width: 700px) { /* Отступ должен покрывать всю высоту закреплённой .mobile-cta (переменная выше в :root) плюс безопасную зону на телефонах с домашним индикатором — иначе последняя строка подвала уходит под кнопку, когда страница дочитана до конца. */ body { padding-bottom: calc(var(--mobile-cta-height) + env(safe-area-inset-bottom, 0px)); } .site-header { padding: 14px 18px; } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { align-items: center; display: flex; justify-content: center; min-height: 44px; min-width: 44px; } /* Оформление мобильного меню. Отступы и раскладку задаём внутренним элементам: padding самого оверлея принадлежит стилю ядра WordPress и перебивает правило темы. */ .site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--paper); color: var(--ink); } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 56px 20px 28px; width: 100%; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { align-items: center; border-bottom: 1px solid var(--line-soft); color: var(--ink); display: flex; font-size: 17px; font-weight: 800; min-height: 54px; width: 100%; } /* «Памятки» — не такой же пункт, а заголовок группы ссылок под ним. */ .site-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content { border-bottom: 0; color: var(--eyebrow); font-size: 12px; font-weight: 800; letter-spacing: .12em; margin-top: 22px; min-height: 32px; text-transform: uppercase; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation-submenu { background: transparent; border: 0; gap: 0; padding: 0; width: 100%; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--ink-subtle); font-size: 15px; font-weight: 700; min-height: 46px; padding: 0; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; } .site-header .wp-block-navigation__responsive-container-close { margin: 4px 4px 0 0; } /* Пока открыто мобильное меню, плавающие кнопки и закреплённая кнопка внизу не перекрывают его. */ body:has(.wp-block-navigation__responsive-container.is-menu-open) :is(.avtogates-floating-shortcuts, .mobile-cta) { display: none; } .header-phone { align-items: center; display: inline-flex; font-size: 12px; min-height: 44px; } /* Компактная шапка: на телефоне остаётся один номер (мобильный); городской виден в hero, подвале и закреплённой кнопке «Позвонить». */ .header-phone-city { display: none; } .hero-phone-list { flex-direction: column; gap: 0; } .hero-phone { display: block; margin-top: 4px; } .hero-phone a { font-size: 26px; } /* .header-phone — обёртка-

: зона касания должна быть у самой ссылки, не только у обёртки (см. общее пояснение у .phone-link выше). Аналогично — ссылка бренда: на мобильном это единственный явный клик по логотипу. */ .header-phone a, .brand-word a { align-items: center; display: inline-flex; min-height: 44px; } /* Must follow the rule above: «.header-phone a» (0,1,1) outranks «.header-phone-city» (0,1,0) and kept both numbers in the phone header — the header grew to ~434px on a 375px screen and widened every page and the configurator dialog (found 06.10.2026). */ .header-phone .header-phone-city { display: none; } /* Значки мессенджеров в шапке на телефоне не помещаются (логотип, мобильный номер и «Меню» уже занимают всю строку); на телефоне мессенджеры — в блоке «Контакты». */ .header-phone a.header-messenger { display: none; } /* Пункты меню в мобильном оверлее core/navigation — устойчивый класс самого блока WordPress, не зависит от разметки шапки в БД (см. правила репозитория про шапку/подвал). */ .wp-block-navigation-item__content { align-items: center; display: inline-flex; min-height: 44px; } .brand { font-size: 12px; gap: 8px; letter-spacing: .085em; } .brand-mark { flex-basis: 40px; height: 28px; width: 40px; } .hero { display: flex; flex-direction: column; min-height: 0; } /* До 18.09.2026 здесь был !important, принудительно менявший отступ hero-copy на телефоне: инлайн-стиль редактора (spacing-80 в БД) на 390px сжимал текст до ~230px при контенте остальных разделов ~345px. Теперь спейсинг-80 сам описан фигурной шкалой theme.json (settings.spacing.spacingSizes, clamp по ширине экрана) — на узких экранах он сам уменьшается, отдельного переопределения здесь больше не нужно. Если владелец увеличит шаг 80 в «Стили → Раскладка → Интервалы», новое значение будет фигурно уменьшаться на телефоне само, а не игнорироваться этим правилом. */ h1 { font-size: clamp(42px, 11.5vw, 54px); line-height: 1.04; } .hero-text { font-size: 17px; } .hero-actions { align-items: stretch; flex-direction: column; gap: 12px; } .hero-actions, .editor-styles-wrapper .is-root-container .hero-actions { margin-top: 26px; } .hero-actions .button { width: 100%; } .hero-actions .hero-secondary-link, .hero-actions .phone-link { font-size: 13px; } .phone-link { align-self: flex-start; } .hero-facts { display: grid; } .hero-media { min-height: 330px; order: 2; } .hero-media figcaption, .visual-story figcaption { bottom: 10px; left: 10px; right: auto; } .project-peek { display: flex; flex-direction: column; } .project-peek-media { min-height: 250px; } .project-peek-copy { padding: 42px 23px 48px; } /* .section больше не переопределяется здесь: ширина (var(--wp--style--global--content-size)) и оба отступа (var(--wp--style--root--padding-left) и var(--wp--preset--spacing--60)) в базовом правиле выше уже фигурные (clamp) и сами уменьшаются на этой ширине — отдельное мобильное правило стало не нужно и было бы просто дублирующим тот же расчёт. */ .promise, .contact, .faq { display: block; } .promise-copy, .editor-styles-wrapper .is-root-container .promise-copy { margin-top: 20px; } .roltek, .editor-styles-wrapper .is-root-container > .roltek:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { display: block; padding: 34px 23px; } /* margin-bottom не переопределяется здесь по той же причине, что и у .section — см. выше: var(--wp--preset--spacing--70) в базовом правиле уже сам уменьшается на этой ширине. */ .roltek-logo { width: 164px; } .roltek-logo, .editor-styles-wrapper .is-root-container .roltek-logo { margin-bottom: 24px; } .roltek-copy h2 { font-size: 32px; } .roltek-link, .editor-styles-wrapper .is-root-container .roltek-link { margin-top: 22px; } .section-heading { align-items: start; display: block; } .section-heading > p { font-size: 15px; } .foundation-preview { display: block; padding: 24px 22px; } .foundation-preview-options { gap: 18px; grid-template-columns: 1fr; } .foundation-preview-options, .editor-styles-wrapper .is-root-container .foundation-preview-options { margin-top: 22px; } .foundation-preview-options p { border-left: 0; border-top: 1px solid var(--line-muted); padding: 14px 0 0; } .foundation-preview-note, .editor-styles-wrapper .is-root-container .foundation-preview-note { margin-top: 20px; } .package-grid { grid-template-columns: 1fr; } .case-grid { grid-template-columns: 1fr; } .case-card:last-child { grid-column: auto; } .package-card { padding: 28px 22px; } .card-kicker, .editor-styles-wrapper .is-root-container .card-kicker { margin-bottom: 28px; } .package-card h3 { font-size: 29px; } .price { font-size: 30px; } .service-grid { display: block; } .service-card, .service-card:not(:first-child) { border-bottom: 1px solid var(--line); border-right: 0; padding: 23px 0; } .service-card h3, .editor-styles-wrapper .is-root-container .service-card h3 { margin: 18px 0 8px; } .visual-story { display: flex; flex-direction: column; } .visual-story figure { min-height: 330px; } .visual-copy { padding: 64px 23px; } .measurement-guide { display: block; } .measurement-guide-collage { aspect-ratio: 4 / 3; flex: none; margin: 24px 0 0; min-height: 0; } .measurement-guide-copy, .editor-styles-wrapper .is-root-container .measurement-guide-copy { margin-top: 20px; } .measurement-guide-links { grid-template-columns: 1fr; } .measurement-guide-link { min-height: 0; } .measurement-guide-actions { align-items: stretch; flex-direction: column; } .measurement-guide-actions .button { width: 100%; } .measurement-guide-actions .inline-link { align-self: flex-start; } .steps { display: block; } .steps, .editor-styles-wrapper .is-root-container .steps { margin-top: 29px; } .step, .step:not(:first-child) { border-bottom: 1px solid var(--line); border-right: 0; padding: 22px 0; } .step h3, .editor-styles-wrapper .is-root-container .step h3 { margin: 18px 0 8px; } .faq-list, .editor-styles-wrapper .is-root-container .faq-list { margin-top: 42px; } .faq-list summary { font-size: 19px; } .contact-copy, .editor-styles-wrapper .is-root-container .contact-copy { margin-bottom: 40px; } .contact-list a { font-size: 22px; } .form-panel { padding: 24px 20px; } .form-success { min-height: 390px; } /* Боковой отступ здесь не переопределяется: max(var(--wp--style--root--padding-left), calc(...)) в базовом правиле уже сам уменьшается на этой ширине. Вертикальный (34px вместо 43px) — своя цифра подвала, не входит в шкалу интервалов раздела (п.3), поэтому остаётся отдельным числом. */ footer { display: flex; flex-direction: column; gap: 27px; padding-bottom: 34px; padding-top: 34px; } .footer-contacts a { align-items: center; display: inline-flex; min-height: 44px; } /* Списки ссылок в подвале — тот же ритм 38px, что и у «Памяток»: со строками 44px и промежутками 9px колонки растягивались и подвал выглядел рыхлым. */ .footer-links { gap: 0; } .footer-links a { align-items: center; display: flex; min-height: 38px; } /* Список «Памятки» длиннее соседних: строка 38px вместо 44px, иначе шесть ссылок растягивают подвал и он теряет собранность. Зона касания остаётся во всю ширину колонки. */ .footer-guides a { min-height: 38px; } /* min-height держит ту же переменную, что и отступ body ниже — реальная высота кнопки не должна расходиться со значением, под которое зарезервировано место в подвале. */ /* Два действия (п.1.4 ТЗ 22.09.2026: "Позвонить"/tel: и "Рассчитать"/#configurator) в ряд — .mobile-cta это сам блок wp-block-buttons, поэтому display:flex на нём уже раскладывает кнопки в строку; ниже только делим строку между ними поровну (было: одна кнопка на 100%). */ body .mobile-cta { background: var(--lime); bottom: 0; box-shadow: 0 -3px 18px var(--sticky-shadow); color: var(--ink); display: flex; font-size: 13px; font-weight: 800; left: 0; margin: 0; min-height: var(--mobile-cta-height); padding: 0; position: fixed; right: 0; text-align: center; width: auto; z-index: 10; } .mobile-cta .wp-block-button, .mobile-cta .wp-block-button__link { flex: 1; margin: 0; } .mobile-cta .wp-block-button__link { display: flex; align-items: center; justify-content: center; } .mobile-cta .wp-block-button:first-child .wp-block-button__link { background: var(--pine); color: var(--white); } /* Прогрессивное улучшение (см. assets/js/sticky-cta.js): без JS панель видна всегда, как раньше (её показывает общее правило body .mobile-cta выше). Скрипт выставляет на data-avtogates-sticky-cta="pending", пока hero-actions (кнопки первого экрана) ещё видны, и снимает атрибут, когда они уходят за пределы экрана — тогда снова действует базовое правило показа. Тот же приём (атрибут на ), что и у data-avtogates-configurator-visible ниже — одинаковая специфичность селектора, поэтому !important не нужен ни там, ни здесь. */ html[data-avtogates-sticky-cta="pending"] .mobile-cta { display: none; } /* Признак `data-avtogates-configurator-visible="true"` на публикует плагин avtogates-configurator (репозиторий gate-configurator), пока на странице виден хотя бы один смонтированный конфигуратор (IntersectionObserver по его корневому элементу). Тема не знает внутренних селекторов плагина — только этот нейтральный признак. Пока конфигуратор на экране, прячем свою закреплённую кнопку: у конфигуратора есть собственная кнопка действия, а две закреплённые снизу панели одновременно съедали полосу прокрутки разделов на телефоне (решение владельца 16.09.2026). Без плагина (признак не выставлен) кнопка ведёт себя как раньше — правило ниже просто не применяется. */ html[data-avtogates-configurator-visible="true"] .mobile-cta { display: none; } /* Пока посетитель вводит данные в форму заявки (поле в фокусе — на телефоне открыта клавиатура), закреплённая панель «Позвонить / Рассчитать» и плавающие кнопки не должны перекрывать поля и кнопку отправки: панель стоит у нижнего края видимой области и съедает почти всё, что клавиатура оставила от формы (WEB-2026-10-03-01). Признак — :focus внутри формы, JS не нужен. */ body:has(.avtogates-form-panel :is(input, select, textarea):focus) :is(.mobile-cta, .avtogates-floating-shortcuts) { display: none; } /* На телефоне блок должен оставаться над закреплённой кнопкой .mobile-cta: та же переменная высоты кнопки, что и у отступа подвала (--mobile-cta-height), плюс безопасная зона снизу и 16px собственного отступа блока. */ .avtogates-floating-shortcuts { bottom: calc(16px + var(--mobile-cta-height) + env(safe-area-inset-bottom, 0px)); right: 16px; } /* Тема 1.4.5 (UX-1.8): на телефоне плавающие кнопки не должны закрывать кнопки первого экрана и текст. «К конфигуратору» скрыта — в закреплённой панели есть «Рассчитать» с тем же переходом; «Наверх» не нужна, пока видны кнопки первого экрана (панель ещё скрыта: sticky-cta.js ставит data-avtogates-sticky-cta="pending"), и появляется вместе с панелью, оставаясь над ней. Без JS атрибута нет — «Наверх» стоит над панелью, как раньше. */ .avtogates-floating-shortcuts__link--configurator { display: none; } html[data-avtogates-sticky-cta="pending"] .avtogates-floating-shortcuts { display: none; } } /* ============================================================================================ Главная, тема 1.1.0 (решение владельца 09.10.2026: «делаем все сразу»). Телефонная страница сокращена с 26 110 px до ~9 000 px: быстрая заявка и конфигуратор сразу после первого экрана, длинное — в раскрывающиеся блоки, три работы вместо двенадцати, «Куда выезжаем» и форма одним блоком. Правила стоят после мобильного блока выше, чтобы при равной специфичности выигрывать у прежних. Часть прежних правил (.promise, .roltek, .service-*, .visual-story, .measurement-guide, .foundation-preview) осталась в файле: разделы убраны из главной, но до синхронизации записи на dev/production (tools/sync-home-structure.php) старая разметка ещё в БД. ============================================================================================ */ /* Первый экран: цена с пояснением. */ .hero-price { border: 1px solid var(--hero-divider); display: grid; gap: 4px; max-width: 560px; padding: 12px 14px; } .hero-price, .editor-styles-wrapper .is-root-container .hero-price { margin: 22px 0 0; } .hero-price-value { color: var(--lime); font-size: 26px; font-weight: 800; line-height: 1.15; } .hero-price-note { color: var(--hero-copy); font-size: 13px; line-height: 1.45; } .hero-price-value, .hero-price-note, .editor-styles-wrapper .is-root-container .hero-price-value, .editor-styles-wrapper .is-root-container .hero-price-note { margin: 0; } /* Строки доверия под ценой (тема 1.4.5): про договор и монтаж — чуть заметнее, условия замера и гарантия — отдельными короткими строками. */ .hero-price-trust { color: var(--white); font-weight: 700; } .hero-price-trust, .hero-price-terms { font-size: 12px; } .hero-price-trust, .editor-styles-wrapper .is-root-container .hero-price-trust { border-top: 1px solid var(--hero-divider); margin-top: 6px; padding-top: 8px; } /* Раскрывающиеся блоки (штатный «Подробности»,

): заголовок-кнопка не ниже 52 px, знак + / −. */ :is(.package-detail, .why-more, .step) > summary { align-items: center; cursor: pointer; display: flex; font-size: 15px; font-weight: 800; list-style: none; min-height: 52px; padding: 12px 44px 12px 2px; position: relative; } :is(.package-detail, .why-more, .step) > summary::-webkit-details-marker { display: none; } :is(.package-detail, .why-more, .step) > summary::after { content: "+"; font-size: 24px; font-weight: 400; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } :is(.package-detail, .why-more, .step)[open] > summary::after { content: "−"; } :is(.package-detail, .why-more) { border-bottom: 1px solid var(--line-soft); } /* Быстрая заявка сразу после конфигуратора. */ .quick-request, .editor-styles-wrapper .is-root-container > .quick-request:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { background: var(--pine); color: var(--white); } .quick-request .eyebrow { color: var(--lime); } .quick-request-text { color: var(--text-on-pine); font-size: 16px; line-height: 1.55; max-width: 560px; } .quick-request-text, .editor-styles-wrapper .is-root-container .quick-request-text { margin: 0 0 22px; } .quick-request-form .avtogates-form-panel { max-width: 620px; } /* Комплектации: компактные карточки, состав и условия — по нажатию. */ .package-card .card-kicker, .editor-styles-wrapper .is-root-container .package-card .card-kicker { margin-bottom: 16px; } .package-card .wp-block-buttons, .editor-styles-wrapper .is-root-container .package-card .wp-block-buttons { margin-top: 18px; } .package-details { border-top: 1px solid var(--line-soft); margin-top: 22px; } .package-details, .editor-styles-wrapper .is-root-container .package-details { margin-bottom: 0; } .package-detail > :not(summary) { max-width: 760px; } .package-detail ul { color: var(--eyebrow); line-height: 1.55; margin: 0 0 18px; padding-left: 20px; } .package-detail li + li { margin-top: 6px; } .package-detail p, .editor-styles-wrapper .is-root-container .package-detail p { margin: 0 0 12px; } .package-included-title { font-size: 20px; font-weight: 400; } .package-included-title, .editor-styles-wrapper .is-root-container .package-included-title { margin: 6px 0 8px; } .packages .foundation-preview-note, .editor-styles-wrapper .is-root-container .packages .foundation-preview-note { margin: 16px 0 0; } .packages-actions, .editor-styles-wrapper .is-root-container .packages-actions { margin-top: 20px; } /* Работы: карточка = фото-ссылка (просмотр крупно) + текст с отдельными ссылками; «Ещё N работ». */ .case-card[hidden], .case-more[hidden] { display: none; } .case-card { display: flex; flex-direction: column; } .case-photo { color: inherit; display: block; position: relative; } .case-photo img { display: block; } .case-photo-zoom { align-items: center; background: var(--white); bottom: 10px; color: var(--ink); display: flex; height: 36px; justify-content: center; position: absolute; right: 10px; width: 36px; } .case-card .case-copy { display: flex; flex: 1; flex-direction: column; } .case-card .case-facts { flex: 1; } .case-title-link { color: inherit; text-decoration: none; } .case-title-link:hover, .case-detail-link:hover { text-decoration: underline; } .case-more-row, .editor-styles-wrapper .is-root-container .case-more-row { margin: 24px 0 0; } .case-more { background: transparent; border: 1px solid var(--pine); color: var(--pine); font: 800 15px var(--font-body); min-height: 50px; padding: 0 28px; } .case-more:hover { background: var(--pine); color: var(--white); } /* «Один разговор вместо четырёх подрядчиков»: четыре факта, строка услуг, подробности по нажатию. */ .why-facts { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .why-fact { background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: 700; line-height: 1.35; padding: 12px; } .why-fact, .editor-styles-wrapper .is-root-container .why-fact { margin: 0; } /* Карточка дилера: логотип и ссылка в две сжимаемые колонки (minmax(0, …)) — иначе колонка по содержимому растягивала страницу шире экрана (dev, 375 px, тема 1.1.0). На телефоне карточка и третий факт занимают обе колонки сетки фактов; на компьютере — по одной ячейке. */ .why-dealer { align-items: center; display: grid; gap: 8px 12px; grid-column: 1 / -1; grid-template-columns: minmax(0, 84px) minmax(0, 1fr); } .why-facts > .why-fact:nth-child(3) { grid-column: 1 / -1; } .why-dealer .roltek-logo { min-width: 0; width: auto; } .why-dealer .roltek-logo, .why-dealer .roltek-logo figure, .editor-styles-wrapper .is-root-container .why-dealer .roltek-logo { margin: 0; } .why-dealer .roltek-link { font-size: 13px; justify-self: start; min-width: 0; white-space: normal; } .why-dealer .roltek-link, .editor-styles-wrapper .is-root-container .why-dealer .roltek-link { margin: 0; } .why-services { color: var(--muted); font-size: 13px; } .why-services, .editor-styles-wrapper .is-root-container .why-services { margin: 14px 0 6px; } .why-more { border-top: 1px solid var(--line-soft); } .why-more > :not(summary) { max-width: 760px; } .why-more p { color: var(--muted); line-height: 1.6; } .why-more p, .editor-styles-wrapper .is-root-container .why-more p { margin: 0 0 12px; } .why-service-title { font-size: 18px; } .why-service-title, .editor-styles-wrapper .is-root-container .why-service-title { margin: 14px 0 4px; } /* «От первого звонка до монтажа»: пять шагов списком, описание шага — по нажатию. Номер рисует счётчик CSS. На компьютере шаги остаются колонками, описание видно сразу (::details-content; в браузерах без него заголовок шага остаётся кнопкой). */ .steps { counter-reset: step; } .step > summary { font-family: var(--font-display); font-size: 19px; font-weight: 400; gap: 12px; line-height: 1.2; padding-left: 0; } .step > summary::before, .step-static::before { align-items: center; background: var(--pine); color: var(--white); content: counter(step); counter-increment: step; display: flex; flex: none; font: 700 13px/1 var(--font-body); height: 28px; justify-content: center; width: 28px; } .step > p, .editor-styles-wrapper .is-root-container .step > p { margin: 0 0 14px 40px; } .steps-hint { color: var(--muted); font-size: 13px; } .steps-hint, .editor-styles-wrapper .is-root-container .steps-hint { margin: -8px 0 12px; } @media (min-width: 701px) { .steps-hint { display: none; } .step > summary { align-items: flex-start; flex-direction: column; min-height: 0; padding: 0 0 8px; } .step > summary::after { display: none; } .step > p, .editor-styles-wrapper .is-root-container .step > p { margin: 0; } } @supports selector(::details-content) { @media (min-width: 701px) { .step::details-content { content-visibility: visible; display: block; } .step > summary { cursor: default; pointer-events: none; } } } /* Вопросы: пункт «Памятки для подготовки участка» раскрывается прямо в списке. */ .faq-guides-title { font-size: 20px; font-weight: 400; } .faq-guides-title, .editor-styles-wrapper .is-root-container .faq-guides-title { margin: 0 0 10px; } .faq-list .faq-guides .measurement-guide-link p, .editor-styles-wrapper .is-root-container .faq-list .faq-guides .measurement-guide-link p { color: inherit; margin: 0; } .faq-guides-note { border-top: 1px solid var(--visual-line); color: var(--visual-muted); font-size: 14px; padding-top: 12px; } .faq-list .faq-guides .measurement-guide-links { margin: 18px 50px 8px 0; } .faq-list .faq-guides .inline-link { margin-bottom: 18px; } /* «Куда выезжаем» + форма одним блоком. */ .coverage-zone { border-top: 1px solid var(--line); } .coverage-zone, .editor-styles-wrapper .is-root-container .coverage-zone { margin: 26px 0 0; padding-top: 20px; } .coverage-zone h3 { font-size: 24px; font-weight: 400; } .coverage-zone h3, .editor-styles-wrapper .is-root-container .coverage-zone h3 { margin: 0 0 12px; } .coverage-zone .eyebrow, .editor-styles-wrapper .is-root-container .coverage-zone .eyebrow { margin-bottom: 8px; } .contact-phones { gap: 10px; } .contact-phones, .editor-styles-wrapper .is-root-container .contact-phones { margin-top: 22px; } .contact-phones .wp-block-button__link { font-size: 15px; letter-spacing: 0; min-height: 48px; white-space: nowrap; } .contact-phones + .contact-list, .editor-styles-wrapper .is-root-container .contact-phones + .contact-list { margin-top: 14px; } /* Кнопки мессенджеров («WhatsApp» и «Заявка в Telegram») — вторым рядом под телефонами, тот же размер кнопок. */ .contact-messengers { gap: 10px; } .contact-messengers, .editor-styles-wrapper .is-root-container .contact-messengers { margin-top: 10px; } .contact-messengers .wp-block-button__link { font-size: 15px; letter-spacing: 0; min-height: 48px; white-space: nowrap; } .contact-messengers + .contact-list, .editor-styles-wrapper .is-root-container .contact-messengers + .contact-list { margin-top: 14px; } .contact-list a:last-child, .editor-styles-wrapper .is-root-container .contact-list a:last-child { margin-top: 0; } @media (min-width: 961px) { .why-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .why-facts > .why-fact:nth-child(3), .why-dealer { grid-column: auto; } } /* Просмотр фото на весь экран: «О работе» и «Хочу похожие» (карточки работ на главной). */ .project-lightbox [hidden] { display: none; } .project-lightbox-actions { bottom: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); left: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); position: absolute; right: 0; } .project-lightbox-title { color: #fff; font-size: 16px; font-weight: 700; grid-column: 1 / -1; margin: 0; } .project-lightbox-about, .project-lightbox-similar { align-items: center; display: flex; font-size: 14px; font-weight: 700; justify-content: center; min-height: 48px; text-decoration: none; } .project-lightbox-about { border: 1px solid rgba(255,255,255,.55); color: #fff; } .project-lightbox-similar { background: var(--lime); color: var(--ink); } .project-lightbox:has(.project-lightbox-actions:not([hidden])) .project-lightbox-counter { bottom: auto; left: 16px; top: 30px; transform: none; } .project-lightbox:has(.project-lightbox-actions:not([hidden])) figure img { max-height: calc(100vh - 220px); } .project-lightbox:has(.project-lightbox-actions:not([hidden])) figure figcaption { display: none; } @media (max-width: 700px) { /* --- Первый экран: заголовок, цена, две кнопки, три факта и одно фото ≈ 760 px. --- */ .hero-phones { display: none; } .hero .eyebrow { margin-bottom: 10px; } .hero h1 { font-size: clamp(30px, 8.8vw, 36px); margin-bottom: 12px; } .hero-text { font-size: 15px; line-height: 1.45; } .hero-text, .editor-styles-wrapper .is-root-container .hero-text { margin-bottom: 0; } .hero-price, .editor-styles-wrapper .is-root-container .hero-price { margin-top: 14px; } .hero-price-value { font-size: 22px; } .hero-actions, .editor-styles-wrapper .is-root-container .hero-actions { gap: 10px; margin-top: 14px; } .hero-actions .wp-block-button__link { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: 52px; text-align: center; width: 100%; } .hero-actions .hero-secondary-link .wp-block-button__link { border: 1px solid var(--hero-facts); min-height: 48px; } .hero-facts, .editor-styles-wrapper .is-root-container .hero-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 12px; } .hero-media { min-height: 200px; } .hero-media figcaption { font-size: 11px; } /* --- Ритм разделов: заголовки меньше, отступы между разделами уже. --- */ .section h2 { font-size: 26px; line-height: 1.15; } .section h2, .editor-styles-wrapper .is-root-container .section h2 { margin-bottom: 14px; } .section .eyebrow, .editor-styles-wrapper .is-root-container .section .eyebrow { margin-bottom: 8px; } .section-heading, .editor-styles-wrapper .is-root-container .section-heading { margin-bottom: 16px; } .cases, .editor-styles-wrapper .is-root-container > .cases:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { padding-top: var(--wp--preset--spacing--60, 104px); } .process, .editor-styles-wrapper .is-root-container > .process:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { padding-bottom: var(--wp--preset--spacing--60, 104px); } /* Раскрывающиеся пункты: единый размер подписи, верхняя граница списка. */ .faq-list, .editor-styles-wrapper .is-root-container .faq-list { margin-top: 18px; } .faq-list summary { padding: 14px 44px 14px 0; } .faq-list summary::after { top: 50%; transform: translateY(-50%); } .faq-list details p, .editor-styles-wrapper .is-root-container .faq-list details p { margin: -3px 0 16px; } .faq-list .faq-guides .measurement-guide-links { margin-right: 0; } .faq-heading > p { font-size: 15px; } /* --- Комплектации: две карточки в ряд. --- */ .package-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .package-card { padding: 12px; } .package-card .card-kicker, .editor-styles-wrapper .is-root-container .package-card .card-kicker { font-size: 10px; letter-spacing: .08em; margin-bottom: 8px; } .package-card h3 { font-size: 16px; line-height: 1.2; } .package-card h3, .editor-styles-wrapper .is-root-container .package-card h3 { margin-bottom: 8px; } .price-row { gap: 6px; } .price { font-size: 22px; } .without-auto { font-size: 10px; padding: 4px 6px; } .package-card .wp-block-buttons, .editor-styles-wrapper .is-root-container .package-card .wp-block-buttons { margin-top: 12px; } .package-card .wp-block-button, .package-card .wp-block-button__link { width: 100%; } .package-card .wp-block-button__link { align-items: center; box-sizing: border-box; display: flex; font-size: 12px; justify-content: center; line-height: 1.25; min-height: 44px; padding: 8px; text-align: center; } .price-note { font-size: 12px; line-height: 1.5; padding: 14px 16px; } .price-note, .editor-styles-wrapper .is-root-container .price-note { margin-top: 12px; } .packages-actions .wp-block-button, .packages-actions .wp-block-button__link { width: 100%; } .packages-actions .wp-block-button__link { box-sizing: border-box; display: flex; justify-content: center; min-height: 50px; } /* --- Работы: фото 16:10, название, проём и заполнение; «Ещё N работ» и «Обсудить похожий проект» во всю ширину. --- */ .case-grid { gap: 16px; } .case-card img, .case-image-placeholder { aspect-ratio: 16 / 10; } .case-card .case-copy { padding: 12px 14px 4px; } .case-meta, .editor-styles-wrapper .is-root-container .case-meta { margin-bottom: 4px; } .case-copy h3 { font-size: 18px; font-weight: 700; line-height: 1.2; margin-bottom: 8px; } .case-description { display: none; } .case-facts { gap: 4px 12px; margin-bottom: 0; padding-top: 8px; } .case-facts li:nth-child(n + 3) { display: none; } .case-detail-link { margin-top: 0; } .case-more, .cases > .wp-block-buttons .wp-block-button, .cases > .wp-block-buttons .wp-block-button__link { width: 100%; } .cases > .wp-block-buttons .wp-block-button__link { box-sizing: border-box; display: flex; justify-content: center; min-height: 52px; } .cases > .wp-block-buttons, .editor-styles-wrapper .is-root-container .cases > .wp-block-buttons { margin-top: 12px; } /* --- Быстрая заявка, «Один разговор…», шаги, «Куда выезжаем»: компактно. --- */ :is(.quick-request-form, .project-public-cta) .avtogates-form-panel { padding: 18px 16px; } .why-fact { font-size: 13px; padding: 10px; } .step, .step:not(:first-child) { padding: 0; } .step, .step:not(:first-child) { padding: 0; } .step, .step:not(:first-child) { padding: 0; } .step > summary { font-size: 17px; } .coverage-zone h3 { font-size: 22px; } .contact-phones { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-phones .wp-block-button, .contact-phones .wp-block-button__link { width: 100%; } .contact-messengers { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-messengers .wp-block-button, .contact-messengers .wp-block-button__link { box-sizing: border-box; display: flex; justify-content: center; width: 100%; } .contact-phones .wp-block-button__link { box-sizing: border-box; display: flex; font-size: 13px; justify-content: center; padding: 10px 6px; } .contact-copy, .editor-styles-wrapper .is-root-container .contact-copy { margin-bottom: 24px; } } /* ============================================================================================ Тема 1.2.0 (решения владельца 09.10.2026): на главной «Работы на участке» и «Производители»; страницы услуг (шаблон «Страница услуги или статья») и статья об автоматике. Каждая дорожка grid-template-columns здесь — minmax(0, …): колонка «по содержимому» или с фиксированными px не сжимается и выталкивает страницу шире экрана на телефоне (tests/home-structure-test.php проверяет это правило для всего блока стилей главной). ============================================================================================ */ /* Главная: «Работы на участке» — четыре карточки, вся карточка является ссылкой (растянутая ссылка заголовка). */ .works-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .work-card { background: var(--surface-card); display: flex; flex-direction: column; padding: 24px; position: relative; } .work-card:nth-child(even) { background: var(--surface-card-alt); } .work-card:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; } .work-card-title { font-size: 22px; font-weight: 400; line-height: 1.15; } .work-card-title, .editor-styles-wrapper .is-root-container .work-card-title { margin: 0 0 10px; } .work-card-title a { color: inherit; } .work-card-title a::after { content: ""; inset: 0; position: absolute; } .work-card:hover .work-card-title a { text-decoration: underline; text-underline-offset: 3px; } .work-card p:not(.work-card-title) { color: var(--ink-subtle); font-size: 15px; line-height: 1.5; } .work-card p:not(.work-card-title), .editor-styles-wrapper .is-root-container .work-card p:not(.work-card-title) { margin: 0; } .works-actions, .editor-styles-wrapper .is-root-container .works-actions { margin-top: 24px; } /* Главная: «Производители» — компактная панель с рядом логотипов (3 × 2 на телефоне, один ряд на компьютере). */ .brands.section, .editor-styles-wrapper .is-root-container > .brands.section:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { padding-bottom: 0; padding-top: 0; } .brands-panel { background: var(--white); border: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); padding: 20px 18px; } .brands-copy h2 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; } .brands-copy h2, .editor-styles-wrapper .is-root-container .brands-copy h2 { margin: 0 0 8px; } .brands-copy p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 680px; } .brands-copy p:not(.eyebrow), .editor-styles-wrapper .is-root-container .brands-copy p:not(.eyebrow) { margin: 0; } .brands-panel .inline-link { justify-self: start; } .brands-panel .inline-link, .editor-styles-wrapper .is-root-container .brands-panel .inline-link { margin: 0; } .brand-logos { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .brand-logo { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; } .brand-logo-frame { align-items: center; background: #fff; border: 1px solid var(--line); display: flex; height: 64px; justify-content: center; overflow: hidden; padding: 0 6px; } /* Одинаковые белые карточки; высота самого логотипа подобрана для оптического равенства (владелец 09.10.2026): --logo-h на телефоне, --logo-h-d на компьютере. Логотипы без изменения цветов и пропорций (object-fit: contain). */ .brand-logo--roltek { --logo-h: 16px; --logo-h-d: 22px; } .brand-logo--alutech { --logo-h: 22px; --logo-h-d: 24px; } .brand-logo--nice { --logo-h: 36px; --logo-h-d: 46px; } .brand-logo--came { --logo-h: 26px; --logo-h-d: 26px; } .brand-logo--doorhan { --logo-h: 14px; --logo-h-d: 24px; } .brand-logo--an-motors { --logo-h: 28px; --logo-h-d: 34px; } /* Тема 1.2.8: логотип в ряду — ссылка; наведение и фокус выделяют рамку (карточки остаются прежнего вида). */ .brand-logo-link { color: inherit; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; } .brand-logo-link:hover .brand-logo-frame, .brand-logo-link:focus-visible .brand-logo-frame { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); } .brand-logo-link:hover :is(.brand-logo-note, .brand-logo-caption), .brand-logo-link:focus-visible :is(.brand-logo-note, .brand-logo-caption) { text-decoration: underline; text-underline-offset: 3px; } /* Телефон: две колонки, карточка ~133 px (119 px внутри) — логотип выводится с заданной высотой, ширину ограничивает только сама карточка; от 701 px прежние 80 %. */ .brand-logo-frame img { display: block; height: var(--logo-h, 20px); max-width: 100%; object-fit: contain; width: auto; } /* Пока файла логотипа нет: название бренда обычным текстом в рамке того же размера (без имитации логотипа). */ .brand-logo-frame--text { color: var(--pine); font-size: 15px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; text-align: center; } .brand-logo-note { color: var(--pine); font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; text-align: center; } /* Тема 1.2.7: набор «автоматика» в статье — подпись-описание бренда мелким текстом под карточкой; карточка сохраняет свою высоту. */ .brand-logo-caption { color: var(--muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; text-align: center; } /* В колонке статьи общие правила списков (отступ слева, 17 px, интервал между пунктами) не должны действовать на сетку логотипов. */ .article-body .brand-logos { margin: 20px 0 18px; padding: 0; } .article-body .brand-logos li + li { margin-top: 0; } /* Страницы услуг и статья: первый экран. */ .service-hero { background: var(--pine); color: var(--white); } .service-hero-copy { margin: 0 auto; max-width: var(--wp--style--global--content-size, 1240px); padding: 44px var(--wp--style--root--padding-left, 28px) 48px; } .service-hero-copy h1 { max-width: 860px; } .service-hero-copy h1, .editor-styles-wrapper .is-root-container .service-hero-copy h1 { font-size: clamp(30px, 6vw, 52px); margin: 0 0 16px; } .service-lead { color: var(--hero-copy); font-size: 17px; line-height: 1.6; max-width: 720px; } .service-lead, .editor-styles-wrapper .is-root-container .service-lead { margin: 0; } .service-hero-actions, .editor-styles-wrapper .is-root-container .service-hero-actions { margin-top: 24px; } .service-hero-actions .wp-block-button, .service-hero-actions .wp-block-button__link { width: 100%; } .service-hero-actions .wp-block-button__link { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: 52px; text-align: center; } /* «Что входит / что делаем»: карточки в одну колонку на телефоне. */ .service-items { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } .service-item { background: var(--white); border: 1px solid var(--line); padding: 18px 18px 20px; } .service-item-title { font-size: 20px; font-weight: 400; line-height: 1.2; } .service-item-title, .editor-styles-wrapper .is-root-container .service-item-title { margin: 0 0 8px; } .service-item p:not(.service-item-title) { color: var(--muted); font-size: 16px; line-height: 1.55; } .service-item p:not(.service-item-title), .editor-styles-wrapper .is-root-container .service-item p:not(.service-item-title) { margin: 0; } /* «Как считаем стоимость». */ .service-cost.section, .editor-styles-wrapper .is-root-container > .service-cost.section:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { padding-bottom: 0; padding-top: 0; } .service-cost-box { background: var(--surface-soft); border-left: 4px solid var(--pine); padding: 22px 20px; } .service-cost-box h2 { font-size: clamp(24px, 3vw, 34px); } .service-cost-box h2, .editor-styles-wrapper .is-root-container .service-cost-box h2 { margin: 0 0 12px; } .service-cost-box p { font-size: 17px; line-height: 1.65; max-width: 760px; } .service-cost-box p, .editor-styles-wrapper .is-root-container .service-cost-box p { margin: 0 0 10px; } .service-cost-box p:last-child, .editor-styles-wrapper .is-root-container .service-cost-box p:last-child { margin-bottom: 0; } /* Шаги без пояснений (страницы услуг): статичная строка с номером вместо раскрывающегося блока. */ .step-static { align-items: center; display: flex; font-family: var(--font-display); font-size: 17px; gap: 12px; line-height: 1.2; min-height: 52px; } .step-static .step-title, .editor-styles-wrapper .is-root-container .step-static .step-title { font: inherit; margin: 0; } /* Название шага — цвет и размер заголовка шага главной (.step > summary), а не серый «.step p» (14 px, --muted). */ .step-static .step-title { color: var(--ink); } /* Форма внизу страницы услуги: тот же тёмный блок, что у быстрой заявки главной. */ .service-form h2 { font-size: clamp(26px, 3.2vw, 40px); } .service-form h2, .editor-styles-wrapper .is-root-container .service-form h2 { margin: 0 0 12px; } /* Статья: колонка для чтения (текст до ~760 px, крупнее обычного, свободный межстрочный интервал). */ .article-body { margin: 0 auto; max-width: 760px; padding: 40px var(--wp--style--root--padding-left, 28px) 8px; } .article-body h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; } .article-body h2, .editor-styles-wrapper .is-root-container .article-body h2 { margin: 36px 0 12px; } .article-body h2:first-child, .editor-styles-wrapper .is-root-container .article-body h2:first-child { margin-top: 0; } .article-body p, .article-body li { color: #36423b; font-size: 17px; line-height: 1.7; } .article-body p, .editor-styles-wrapper .is-root-container .article-body p { margin: 0 0 14px; } .article-body strong { color: var(--ink); } .article-body :is(ol, ul) { margin: 0 0 14px; padding-left: 26px; } .article-body li + li { margin-top: 8px; } .article-cta { margin: 0 auto; max-width: 760px; padding: 20px var(--wp--style--root--padding-left, 28px) 44px; } .article-cta-actions { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } .article-cta-actions .wp-block-button, .article-cta-actions .wp-block-button__link { width: 100%; } .article-cta-actions .wp-block-button__link { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: 52px; text-align: center; } @media (max-width: 960px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 701px) { .brands-panel { padding: 32px 36px; } .brand-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } .brand-logo-frame { height: 80px; } .brand-logo-frame { padding: 0 8px; } .brand-logo-frame img { height: var(--logo-h-d, 24px); max-width: 80%; } .brand-logos--automation { grid-template-columns: repeat(4, minmax(0, 1fr)); } .service-hero-copy { padding-bottom: 72px; padding-top: 72px; } .service-lead { font-size: 19px; } .service-hero-actions .wp-block-button, .service-hero-actions .wp-block-button__link { width: auto; } .service-item { padding: 22px 24px 24px; } .service-item-title { font-size: 22px; } .service-cost-box { padding: 28px 32px; } .step-static { align-items: flex-start; flex-direction: column; font-size: 19px; min-height: 0; padding-bottom: 8px; } .article-body { padding-top: 64px; } .article-body p, .article-body li { font-size: 18px; } .article-cta { padding-bottom: 64px; } .article-cta-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 961px) { .service-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .works-grid { gap: 10px; grid-template-columns: minmax(0, 1fr); } .work-card { padding: 16px; } .work-card-title { font-size: 19px; } .work-card-title, .editor-styles-wrapper .is-root-container .work-card-title { margin-bottom: 6px; } .works-actions .wp-block-button, .works-actions .wp-block-button__link { width: 100%; } .works-actions .wp-block-button__link { box-sizing: border-box; display: flex; justify-content: center; min-height: 52px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button, .project-gallery img { transition: none; } .button:hover { transform: none; } .project-gallery button:hover img, .project-gallery button:focus-visible img { transform: none; } } /* Обычная страница (шаблон page.html, например «Политика конфиденциальности») — у main не было собственных отступов и ограничения ширины, из-за чего текст на узких экранах доходил до края вьюпорта. Отдельный класс раскладки WordPress (is-layout-constrained у page.html, задан "layout":{"type":"constrained"}) отличает этот main от главной страницы: там у main "layout":{"type":"default"} → is-layout-flow, и полноширинные секции (.hero, .section и т.д.) сами задают себе ширину — трогать их через .site-main нельзя. */ .site-main.is-layout-constrained { margin: 0 auto; max-width: 800px; padding: 88px var(--wp--style--root--padding-left, 28px) 104px; } .site-main.is-layout-constrained h1 { max-width: none; } .site-main.is-layout-constrained h2 { font-size: clamp(26px, 3vw, 34px); margin: 48px 0 16px; } .site-main.is-layout-constrained h2:first-child { margin-top: 0; } .site-main.is-layout-constrained p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 16px; } .site-main.is-layout-constrained ul { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 16px; padding-left: 22px; } .site-main.is-layout-constrained li { margin-bottom: 6px; } @media (max-width: 700px) { /* Боковой отступ не переопределяется — см. комментарий у .section в этом же медиа-запросе. */ .site-main.is-layout-constrained { padding-bottom: 70px; padding-top: 54px; } } /* Expert guides. */ .expert-guide { background: var(--paper); } .guide-hero { background: var(--pine); color: var(--white); display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); min-height: 610px; } .guide-hero-copy { align-self: center; padding: 72px clamp(var(--wp--style--root--padding-left, 28px), 6.5vw, 112px); } .guide-hero-copy h1 { max-width: 680px; } .guide-hero-copy > p { color: #d7e0dc; font-size: 19px; line-height: 1.6; margin-bottom: 0; max-width: 570px; } .guide-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 20px; } .guide-hero-actions .button-secondary, .guide-next .button-secondary { border-color: #c9d7d0; color: inherit; margin: 0; } .guide-hero-actions .button-secondary:hover, .guide-next .button-secondary:hover { background: rgba(255,255,255,.09); } .guide-hero-media { margin: 0; min-height: 610px; overflow: hidden; position: relative; } .guide-hero-media::after { background: linear-gradient(90deg, rgba(21,59,51,.25), transparent 30%); content: ""; inset: 0; pointer-events: none; position: absolute; } .guide-hero-media img { height: 100%; object-fit: cover; width: 100%; } .guide-hero-media figcaption { background: rgba(16,44,39,.88); bottom: 18px; color: #f4f7f3; font-size: 12px; line-height: 1.4; padding: 8px 10px; position: absolute; right: 18px; z-index: 1; } /* Ширина 1120px — собственная «текстовая» полоса памятки, уже уже contentSize (1240px) и не связана с настройкой «Раскладка» редактора: контент памяток — длинный текст, для него специально уже, как у обычной страницы (.site-main.is-layout-constrained, 800px). Боковой отступ при этом общий — тот же var(--wp--style--root--padding-left). */ .guide-article { margin: 0 auto; max-width: 1120px; padding: 88px var(--wp--style--root--padding-left, 28px) 104px; } /* Секция памятки состоит из h2 и произвольного набора соседних блоков (p, ul, …) без общей обёртки — контент читается напрямую из БД, поэтому раскладка держится на прямом позиционировании детей, а не на предполагаемом div-контейнере. Заголовок всегда в первой колонке, весь остальной контент — во второй, сколько бы блоков и какого типа там не было. */ .guide-section { border-top: 1px solid var(--line); display: grid; column-gap: clamp(32px, 8vw, 112px); row-gap: 0; grid-template-columns: minmax(240px, .75fr) minmax(0, 1fr); padding: 44px 0; } .guide-section:last-child { border-bottom: 1px solid var(--line); } .guide-section > h2 { font-size: clamp(30px, 3.2vw, 44px); grid-column: 1; grid-row: 1 / span 20; margin: 0; max-width: 430px; } .guide-section > :not(h2) { color: #4e5c54; font-size: 17px; grid-column: 2; line-height: 1.7; margin: 0 0 1em; max-width: 680px; } .guide-section > :not(h2):last-child { margin-bottom: 0; } .guide-section ul { display: grid; gap: 10px; margin: 23px 0 0; padding: 0; } .guide-section li { border-bottom: 1px solid #d7d9d2; list-style: none; padding: 0 0 10px 25px; position: relative; } .guide-section li::before { color: var(--pine); content: "•"; font-size: 20px; left: 7px; position: absolute; top: -2px; } .guide-next { align-items: end; background: var(--pine-deep); color: #e7eee8; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); margin: 0 auto var(--wp--preset--spacing--70, 104px); max-width: 1120px; padding: 54px; } .guide-next h2 { color: var(--white); font-size: clamp(32px, 3.5vw, 48px); max-width: 660px; } .guide-next p { color: #c7d6ce; font-size: 15px; line-height: 1.6; margin-bottom: 9px; max-width: 690px; } .guide-next-actions { align-items: stretch; display: grid; gap: 12px; } .guide-next .button { width: 100%; } @media (max-width: 700px) { .guide-hero { display: flex; flex-direction: column; min-height: 0; } /* Боковой отступ не переопределяется — базовый clamp() выше уже сам сужается на этой ширине. */ .guide-hero-copy { padding-bottom: 44px; padding-top: 54px; } .guide-hero-copy > p { font-size: 17px; } .guide-hero-actions { align-items: stretch; display: grid; margin-bottom: 20px; } .guide-hero-actions .button { width: 100%; } .guide-hero-media { min-height: 320px; order: 2; } .guide-hero-media figcaption { bottom: 10px; left: 10px; right: auto; } .guide-article { padding-bottom: 70px; padding-top: 66px; } .guide-section { display: block; padding: 34px 0; } .guide-section > h2 { margin-bottom: 18px; } .guide-section > :not(h2) { font-size: 16px; } /* Нижний отступ не переопределяется: var(--wp--preset--spacing--70) в базовом правиле уже сам уменьшается на этой ширине до тех же 70px. */ /* Боковые поля и ширина «от края до края» — в общем правиле «Полноширинные тёмные секции на телефоне» ниже (после стилей страницы объекта). */ .guide-next { display: block; padding-bottom: 34px; padding-top: 34px; } .guide-next-actions { margin-top: 25px; } } /* Public portfolio detail page. */ .case-detail-link{align-items:center;color:var(--green,#153b33);display:inline-flex;font-size:.88rem;font-weight:800;min-height:44px;text-decoration:none} .project-public-page{background:#f5f2e9;min-height:100vh}.project-public-header{align-items:center;border-bottom:1px solid rgba(21,59,51,.16);display:flex;justify-content:space-between;margin:0 auto;max-width:1240px;padding:22px 28px}.project-public-header>a:last-child{color:var(--green,#153b33);font-weight:800}.project-public{margin:0 auto;max-width:1120px;padding:42px 28px 80px}.project-back{color:var(--green,#153b33);display:inline-block;font-size:.92rem;font-weight:800;margin-bottom:30px;text-decoration:none}.project-back:hover{text-decoration:underline}.project-public-intro{align-items:end;display:flex;gap:28px;justify-content:space-between;margin-bottom:30px}.project-public-intro>div{max-width:780px}.project-public-intro h1,.project-missing h1{font-family:"PT Serif",Georgia,serif;font-size:clamp(2.35rem,5vw,4.9rem);letter-spacing:-.04em;line-height:.98;margin:.4rem 0 1.1rem}.project-public-lead{font-size:1.16rem;line-height:1.65;margin:0;max-width:720px}.project-gallery{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin:30px 0 42px}.project-gallery button{background:#e6e9e2;border:0;cursor:zoom-in;min-height:220px;overflow:hidden;padding:0}.project-gallery button.is-cover{grid-column:1/-1;max-height:570px}.project-gallery img{display:block;height:100%;object-fit:cover;transition:transform .25s ease;width:100%}.project-gallery button:hover img,.project-gallery button:focus-visible img{transform:scale(1.025)}.project-gallery-empty{background:#ecefe8;color:#607066;margin:30px 0;padding:32px}.project-public-content{display:grid;gap:56px;grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr);margin:0 0 56px}.project-public-content h2,.project-public-cta h2{font-size:2.1rem;letter-spacing:-.025em;margin:0 0 18px}.project-public-content p{font-size:1.05rem;line-height:1.75;margin:0 0 1em;white-space:pre-line}.project-public-content aside{background:#edf1e9;height:max-content;padding:25px}.project-public-content aside h2{font-size:1rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.project-public-content ul{display:grid;gap:12px;margin:0;padding-left:20px}.project-public-content li{line-height:1.45}.project-public-cta{align-items:center;background:var(--green,#153b33);color:#fff;display:flex;gap:30px;justify-content:space-between;padding:32px}.project-public-cta>div{max-width:680px}.project-public-cta h2{margin:.35rem 0 .75rem}.project-public-cta p:not(.eyebrow){line-height:1.55;margin:0}.project-lightbox{align-items:center;background:rgba(7,16,13,.88);display:flex;inset:0;justify-content:center;padding:32px;position:fixed;z-index:50}.project-lightbox img{max-height:calc(100vh - 64px);max-width:min(1200px,100%);object-fit:contain}.project-lightbox-close{background:#fff;border:0;border-radius:50%;color:#153b33;cursor:pointer;font-size:2rem;height:44px;line-height:1;position:absolute;right:22px;top:20px;width:44px}.project-loading,.project-missing{margin:0 auto;max-width:760px;padding:100px 28px}.project-loading{color:#607066} @media(max-width:720px){.project-public-header{padding:16px 18px}.project-public-header .brand{font-size:.75rem}.project-public{--project-public-pad-x:18px;padding:28px var(--project-public-pad-x) 68px}.project-public-intro{align-items:flex-start;display:grid}.project-public-intro .button{width:100%}.project-gallery{grid-template-columns:1fr;margin-bottom:30px}.project-gallery button.is-cover{grid-column:auto;max-height:420px}.project-gallery button{min-height:0}.project-gallery img{aspect-ratio:1.3}.project-public-content{display:grid;gap:25px;grid-template-columns:1fr;margin-bottom:36px}.project-public-content h2,.project-public-cta h2{font-size:1.8rem}.project-public-cta{align-items:stretch;display:grid;padding:26px}.project-public-cta .button{width:100%}.project-lightbox{padding:18px}.project-lightbox-close{right:12px;top:12px}} .project-lightbox figure{align-items:center;display:flex;flex-direction:column;margin:0;max-width:min(1200px,100%)}.project-lightbox figure img{max-height:calc(100vh - 110px);max-width:100%;object-fit:contain}.project-lightbox figcaption{color:#fff;font-size:.88rem;margin-top:11px}.project-lightbox-nav{align-items:center;background:rgba(255,255,255,.94);border:0;border-radius:50%;color:#153b33;cursor:pointer;display:flex;font-size:3rem;height:54px;justify-content:center;line-height:1;padding:0 0 5px;position:absolute;top:50%;transform:translateY(-50%);width:54px}.project-lightbox-nav:hover,.project-lightbox-nav:focus-visible{background:#fff;outline:3px solid var(--lime)}.project-lightbox-prev{left:22px}.project-lightbox-next{right:22px}@media(max-width:720px){.project-lightbox figure img{max-height:calc(100vh - 140px)}.project-lightbox-nav{font-size:2.5rem;height:44px;width:44px}.project-lightbox-prev{left:8px}.project-lightbox-next{right:8px}} /* ============================================================================================ Правило владельца 10.10.2026 (хотфикс страницы объекта и памяток): «зелёный фон на мобильной версии не должен иметь отступов»: тёмные секции на телефоне идут от края до края, как .hero, .quick-request и .service-hero. Одно общее правило на все такие секции вне главной. ============================================================================================ */ @media (max-width: 700px) { /* --avtg-bleed — на сколько родитель отступает от края экрана с каждой стороны; секция расширяется на эту величину в обе стороны. Не 100vw и не overflow-x на body: 100vw на компьютере включает полосу прокрутки и даёт горизонтальный скролл, а проценты считаются от реальной ширины родителя. Не margin: у детей constrained-раскладки WordPress поля margin-inline: auto !important, переопределить их без нового !important нельзя, а сдвиг через position/left от полей не зависит. Если переменная не задана (памятка: main без отступов, секция и так от края до края), расширение равно нулю. Страница объекта: main — has-global-padding (поле темы --wp--style--root--padding-*), и ещё поле .project-public (--project-public-pad-x: 18px в @media (max-width: 720px) выше, на ≤700 px — 0, см. ниже). */ /* Боковое поле .project-public на телефоне — 0: контент страницы объекта стоит на тех же 23 px (root padding), что и на главной. Единица px обязательна: 0 без единицы недопустим внутри calc(). */ .project-public { --project-public-pad-x: 0px; --avtg-bleed: calc(var(--wp--style--root--padding-left, 23px) + var(--project-public-pad-x, 18px)); } .project-public .project-public-cta, .guide-next { left: calc(-1 * var(--avtg-bleed, 0px)); margin-inline: 0; max-width: none; padding-inline: var(--wp--style--root--padding-left, 23px); position: relative; width: calc(100% + 2 * var(--avtg-bleed, 0px)); } /* «Подберём решение под ваш участок»: WordPress выдаёт группе flex в строку (is-layout-flex, wp-container-… с justify-content: space-between), поэтому раньше форма вылезала за правый край. На телефоне — одна колонка, дети не шире секции. Селектор из двух классов перебивает одноклассовые правила раскладки WordPress без !important. */ .project-public .project-public-cta { align-items: stretch; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 24px; justify-content: flex-start; padding-block: 40px; } .project-public .project-public-cta > * { max-width: none; min-width: 0; width: 100%; } /* Форма — как «Быстрая заявка»: без внешней белой рамки, внутренний отступ 18/16 (общее правило у .quick-request-form выше). */ .project-public-cta .form-panel { background: none; box-shadow: none; padding: 0; } /* Сетки страницы объекта на телефоне не шире экрана. Колонка «1fr» — это minmax(auto, 1fr): её минимум — min-content детей, поэтому «Параметры объекта» (padding 36 px, два столбца фактов) раздували колонку до 346 px в секции 289 px и страница получала горизонтальную прокрутку. Здесь везде minmax(0, …), у детей min-width: 0, длинные значения переносятся. Правила с :has() — отдельными строками: специфичность выше обычных (правило про пустой «О проекте»), а браузер без :has() не должен терять из-за них обычные правила. */ .project-public-intro, .project-gallery, .project-public-content { grid-template-columns: minmax(0, 1fr); } .project-public-content:has(> div > h2:only-child) { grid-template-columns: minmax(0, 1fr); } .project-public-intro > *, .project-gallery > *, .project-public-content > * { min-width: 0; } .project-public-content .project-facts { padding: 20px; } .project-public-content:has(> div > h2:only-child) .project-facts { padding: 20px; } .project-public-content .project-facts-grid { gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-public-content:has(> div > h2:only-child) .project-facts-grid { gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-fact-row { min-width: 0; } .project-fact-row :is(dt, dd), .project-public-content p, .project-public-intro h1 { overflow-wrap: anywhere; } } .project-consultation-modal{align-items:center;background:rgba(7,16,13,.7);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:60}.project-consultation-modal>section{background:#fffdf8;box-shadow:0 24px 70px rgba(0,0,0,.28);max-height:calc(100vh - 48px);max-width:560px;overflow:auto;position:relative;width:100%}.project-consultation-modal form,.project-consultation-success{display:grid;gap:15px;padding:34px}.project-consultation-modal h2{font-size:2.2rem;letter-spacing:-.035em;line-height:1.05;margin:0}.project-consultation-copy{color:var(--muted);line-height:1.55;margin:-6px 0 3px}.project-consultation-modal label{display:grid;font-size:.86rem;font-weight:800;gap:6px}.project-consultation-modal input,.project-consultation-modal textarea{font:inherit;font-weight:400;width:100%}.project-consultation-modal textarea{resize:vertical}.project-consultation-modal .consent{align-items:flex-start;display:flex;font-size:.76rem;font-weight:400;line-height:1.42}.project-consultation-modal .consent input{margin:3px 0 0;width:auto}.project-consultation-modal .button{justify-content:center}.project-consultation-close{background:transparent;border:0;color:#153b33;cursor:pointer;font-size:2rem;line-height:1;padding:0;position:absolute;right:17px;top:13px}.project-consultation-phone{color:var(--green,#153b33);font-size:.88rem;font-weight:800;text-align:center}.project-consultation-success{text-align:center}.project-consultation-success .success-symbol{margin:0 auto}.project-consultation-success p{color:var(--muted);line-height:1.55;margin:0}.project-consultation-success .button{margin-top:4px}@media(max-width:720px){.project-consultation-modal{align-items:flex-end;padding:0}.project-consultation-modal>section{max-height:calc(100vh - 12px);max-width:none}.project-consultation-modal form,.project-consultation-success{padding:30px 22px}.project-consultation-modal h2{font-size:1.9rem}} /* ============================================================================================ Тема 1.2.2 (решения владельца 09.10.2026): заметная кнопка меню на телефоне, «Работы на участке» (нажимаемая карточка), колонка «Услуги» в подвале, правая колонка у формы страниц услуг. ============================================================================================ */ /* Работы на участке: вся карточка нажимается (растянутая ссылка заголовка), признак — «Подробнее →», состояния наведения и фокуса. */ .work-card { cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; } .work-card:hover { background: #dde3d3; box-shadow: inset 0 0 0 1px var(--pine); } .work-card:nth-child(even):hover { background: #d3dac8; } .work-card p.work-card-more { color: var(--pine); font-size: 15px; font-weight: 800; margin: auto 0 0; padding-top: 16px; } .work-card-more span { display: inline-block; transition: transform .15s ease; } .work-card:hover .work-card-more span, .work-card:focus-within .work-card-more span { transform: translateX(4px); } /* Подвал: колонка «Услуги» — тот же компонент, что «Памятки» (.footer-guides); на планшете логотип занимает строку, колонки под ним. */ @media (min-width: 701px) and (max-width: 960px) { footer { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } } /* Шапка на телефоне: заметная кнопка «Меню» справа (значок из трёх полос и подпись), телефон остаётся в шапке. Штатная кнопка core/navigation (overlayMenu: mobile) рисует иконку-svg внутри; значок и подпись задаёт CSS, поэтому правило работает и с шапкой, сохранённой в базе; aria-label «Открыть меню» остаётся. Порядок: логотип — телефон — «Меню». Граница 599 px — та же, где ядро WordPress переключает меню на оверлей (от 600 px в шапке обычная строка ссылок). */ @media (max-width: 599px) { .site-header { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: space-between; padding: 12px 14px; } .site-header > * { margin-block: 0; } .site-header .brand { flex: 0 1 auto; min-width: 0; order: 1; } .site-header .header-phone { margin-left: auto; order: 2; } .site-header > nav { flex: none; order: 3; } .site-header .wp-block-navigation__responsive-container-open { background: var(--pine); border: 1px solid var(--pine); color: var(--white); gap: 8px; min-height: 44px; padding: 0 10px 0 12px; } .site-header .wp-block-navigation__responsive-container-open svg { display: none; } .site-header .wp-block-navigation__responsive-container-open::before { background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; content: ""; flex: none; height: 14px; width: 18px; } .site-header .wp-block-navigation__responsive-container-open::after { content: "Меню"; font: 700 13px/1 var(--font-body); letter-spacing: .02em; } .site-header .wp-block-navigation__responsive-container-open:hover { background: var(--pine-deep); } .site-header .wp-block-navigation__responsive-container-open:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } } /* 360–400 px: логотип и телефон чуть компактнее, чтобы шапка (логотип, телефон, «Меню») помещалась в одну строку. */ @media (max-width: 400px) { .site-header .brand-mark { flex-basis: 30px; height: 22px; width: 30px; } .site-header .brand { font-size: 11px; gap: 6px; letter-spacing: .05em; } .site-header .header-phone { font-size: 12px; } .site-header .wp-block-navigation__responsive-container-open { padding: 0 9px 0 10px; } } @media (max-width: 340px) { .site-header .brand-word { display: none; } } /* Форма страницы услуги: справа (на телефоне под формой) колонка «Или позвоните» — телефоны кнопками и районы выезда. */ .service-form { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); } .service-form-aside { border-top: 1px solid var(--hero-divider); padding-top: 24px; } .service-form-aside .eyebrow, .editor-styles-wrapper .is-root-container .service-form-aside .eyebrow { margin: 0 0 14px; } .service-form-phones { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-form-phones .wp-block-button, .service-form-phones .wp-block-button__link { width: 100%; } .service-form-phones .wp-block-button__link { align-items: center; background: transparent; border: 1px solid rgba(255, 253, 248, .6); box-sizing: border-box; color: var(--white); display: flex; font-size: 13px; justify-content: center; letter-spacing: 0; min-height: 52px; padding: 10px 6px; white-space: nowrap; } /* Рамка кнопок-телефонов на тёмном блоке: стиль outline из theme.json рисует тёмную рамку, на тёмно-зелёном её не видно; явная светлая (контраст к фону около 5:1). Правило только внутри .service-form-phones — те же кнопки на светлом фоне главной не меняются. */ .service-form-phones .wp-block-button__link:hover, .service-form-phones .wp-block-button__link:focus-visible { background: rgba(255, 255, 255, .09); border-color: var(--white); } p.service-form-coverage { color: var(--text-on-pine); font-size: 15px; line-height: 1.5; margin: 16px 0 0; } @media (min-width: 961px) { .service-form { align-items: start; gap: 56px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .service-form-aside { border-left: 1px solid var(--hero-divider); border-top: 0; padding: 4px 0 4px 48px; } .service-form-phones { grid-template-columns: minmax(0, 1fr); } .service-form-phones .wp-block-button__link { font-size: 20px; justify-content: flex-start; min-height: 60px; padding: 12px 22px; } } /* Страницы услуг (тема 1.2.3): разделы с текстом, фото первого экрана и блок «Наши работы». */ .service-section.section, .service-works.section, .editor-styles-wrapper .is-root-container > :is(.service-section, .service-works).section:where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { padding-top: 0; } .service-section h2, .service-works h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; } .service-section-body { max-width: 760px; } .service-section-body p, .service-section-body li { color: #36423b; font-size: 17px; line-height: 1.65; } .service-section-body p, .editor-styles-wrapper .is-root-container .service-section-body p { margin: 0 0 14px; } .service-section-body :is(p, li):last-child { margin-bottom: 0; } .service-section-body strong { color: var(--ink); } .service-section-body .service-list { margin: 0 0 14px; padding-left: 24px; } .service-section-body li + li { margin-top: 8px; } /* Блоки «жирное начало + текст»: тонкая линия слева, как у блока стоимости, чтобы абзацы читались отдельными пунктами. */ .service-section-body .service-point { border-left: 3px solid var(--line-muted); padding-left: 14px; } /* Фото: подпись под фото — мелким текстом. Блок фото первого экрана и «Наши работы» выводит динамический блок avtogates/service-photos. */ .service-photo { margin: 0; } .service-photo img { display: block; height: auto; max-width: 100%; width: 100%; } .service-photo-caption { color: var(--meta); font-size: 12px; line-height: 1.4; margin: 8px 0 0; } /* Фото — ссылка на просмотр на весь экран (тот же просмотр, что у работ на главной): вся картинка нажимается, подпись остаётся под ней. */ .service-photo-zoom { cursor: zoom-in; display: block; } .service-photo-zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* Первый экран: на телефоне фото под текстом на всю ширину, подпись на тёмном фоне под ним. */ .service-hero-media { background: var(--pine); } .service-hero-media img { aspect-ratio: 4 / 3; object-fit: cover; } .service-hero-media .service-photo-caption { color: var(--hero-facts); padding: 10px var(--wp--style--root--padding-left, 28px) 16px; } /* Фото работ — кадр 3:2 (object-fit: cover): сетка из карточек одной высоты, без рваных рядов; файлы подготовлены в 3:2, поэтому обрезка минимальна, а в просмотре на весь экран открывается файл целиком. */ .service-works-item img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; } .service-works-grid { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } .service-photo--inline { margin: 24px 0 28px; } .service-photo--inline img { aspect-ratio: 16 / 10; object-fit: cover; } /* Ряд фото на телефоне (до 900 px) — горизонтальная лента; правила общие с карточками комплектов, см. раздел «Горизонтальная лента на телефоне» после .kit-grid. */ @media (min-width: 901px) { /* Колонки задаёт --works-cols: три по умолчанию, две у 2 и 4 фото, четыре у 7–8 (от 1100 px, см. ниже); неполный последний ряд центрируется. Те же числа — в avtogates_service_works_sizes(). */ .service-works-grid { --works-cols: 3; display: flex; flex-wrap: wrap; justify-content: center; } .service-works-grid:is(.has-2, .has-4) { --works-cols: 2; } .service-works-grid .service-works-item { flex: 0 0 calc((100% - (var(--works-cols) - 1) * 14px) / var(--works-cols)); min-width: 0; } .service-works-grid.has-1 { justify-content: flex-start; } .service-works-grid.has-1 .service-works-item { flex-basis: min(100%, 560px); } /* Первый экран с фото: текст слева на тёмном фоне, фото справа на всю высоту блока — как у первого экрана главной. */ .service-hero:has(> .service-hero-media) { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); margin-left: auto; margin-right: auto; max-width: var(--wp--style--global--wide-size, 1600px); min-height: 520px; } .service-hero:has(> .service-hero-media) .service-hero-copy { align-self: center; margin: 0; max-width: none; padding: 54px clamp(var(--wp--style--root--padding-left, 28px), 4vw, 72px); } .service-hero-media { overflow: hidden; position: relative; } .service-hero-media img { aspect-ratio: auto; height: 100%; inset: 0; position: absolute; } /* Ссылка занимает всю область фото первого экрана (картинка внутри неё тоже абсолютная), подпись лежит поверх. */ .service-hero-media .service-photo-zoom { inset: 0; position: absolute; } .service-hero-media .service-photo-zoom:focus-visible { outline-offset: -4px; } .service-hero-media .service-photo-caption { background: var(--caption-bg); bottom: 18px; color: rgba(255, 255, 255, .9); max-width: calc(100% - 36px); padding: 8px 10px; position: absolute; right: 18px; } } /* Семь–восемь фото: четыре колонки на широком экране (4 + 3 или 4 + 4), на 901–1099 px остаются три. */ @media (min-width: 1100px) { .service-works-grid:is(.has-7, .has-8) { --works-cols: 4; } } /* Тема 1.2.8: заголовок-ссылка «Автоматика» в раскрывающемся списке услуг главной (общее правило подчёркивает ссылки только в абзацах и списках). */ .why-service-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } /* Страница «Автоматика для откатных ворот» (тема 1.2.8): переключатель классов ворот и карточки комплектов без цен. */ .kits-intro { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 760px; } .kits-intro, .editor-styles-wrapper .is-root-container .kits-intro { margin: 0 0 20px; } /* Переключатель — три ссылки-якоря на секции классов; цель касания не меньше 48 px, на телефоне ссылки переносятся строками. */ .kit-switch { display: flex; flex-wrap: wrap; gap: 10px; } .kit-switch-item, .editor-styles-wrapper .is-root-container .kit-switch-item { margin: 0; } .kit-switch-item a { align-items: center; background: var(--white); border: 1px solid var(--line); color: var(--pine); display: inline-flex; font-size: 15px; font-weight: 700; min-height: 48px; padding: 10px 16px; text-decoration: none; } .kit-switch-item a:hover, .kit-switch-item a:focus-visible { background: var(--surface-soft); border-color: var(--pine); } .kit-class { margin-top: 40px; } .kit-class-title { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; } .kit-class-title, .editor-styles-wrapper .is-root-container .kit-class-title { margin: 0 0 16px; } .kit-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } .kit-card { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; padding: 18px; } /* Фото производителя (тема 1.2.9): белая область одной высоты у всех карточек, фото целиком (contain), под ним мелкая подпись; клик — просмотр на весь экран. */ .kit-photo { margin: 0 0 14px; } .kit-photo-zoom { align-items: center; background: #fff; border: 1px solid var(--line); cursor: zoom-in; display: flex; height: 180px; justify-content: center; } .kit-photo-zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .kit-photo img { display: block; height: 100%; object-fit: contain; width: 100%; } .kit-photo-caption { color: var(--meta); font-size: 12px; line-height: 1.4; margin: 6px 0 0; } .editor-styles-wrapper .is-root-container .kit-photo-caption { margin: 6px 0 0; } /* Фото в карточке дополнительного оборудования (тема 1.3.1): тот же блок и те же правила, область ниже, чем у комплектов (оборудование второстепенное), одинаковая у всех шести. */ .service-item .kit-photo-zoom { height: 140px; } /* Логотип в карточке — маленький, под фото и над названием модели, без рамки, по левому краю; высоту логотипа бренда (brand-logo--<бренд> из блока) уменьшает множитель .75. */ .kit-card .kit-brand { margin: 0 0 8px; } .kit-card .brand-logo-frame { background: transparent; border: 0; height: 32px; justify-content: flex-start; padding: 0; } .kit-card .brand-logo-frame img { height: calc(var(--logo-h, 20px) * .75); max-width: 100%; } .kit-title { font-size: 20px; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; } .kit-title, .editor-styles-wrapper .is-root-container .kit-title { margin: 0 0 4px; } .kit-limit { color: var(--pine); font-size: 15px; font-weight: 800; } .kit-limit, .editor-styles-wrapper .is-root-container .kit-limit { margin: 0 0 14px; } .kit-label, .editor-styles-wrapper .is-root-container .kit-label { margin: 0 0 6px; } .kit-list { color: var(--ink); font-size: 15px; line-height: 1.5; padding-left: 20px; } .kit-list, .editor-styles-wrapper .is-root-container .kit-list { margin: 0 0 14px; } .kit-list li + li { margin-top: 4px; } .kit-extras { color: var(--muted); font-size: 14px; line-height: 1.5; } .kit-extras strong { color: var(--ink); } .kit-extras, .editor-styles-wrapper .is-root-container .kit-extras { margin: 0 0 16px; } /* Кнопка прижата к низу карточки: при разной длине списков кнопки в ряду стоят на одной линии. */ .kit-actions, .editor-styles-wrapper .is-root-container .kit-actions { margin-top: auto; } .kit-actions .wp-block-button, .kit-actions .wp-block-button__link { width: 100%; } .kit-actions .wp-block-button__link { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: 48px; text-align: center; } @media (min-width: 701px) { .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-card { padding: 22px; } } @media (min-width: 1100px) { .kit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kit-card { padding: 18px; } } /* Дополнительное оборудование (тема 1.3.1): карточки с фото — две колонки с 701 px, три с 1100 px (шесть карточек — два ряда); до 700 px — лента (ниже). Правило стоит после общего .service-items, чтобы переопределить его две колонки с 961 px. */ @media (min-width: 701px) { .equipment-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .equipment-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Горизонтальная лента на телефоне (тема 1.3.0, 1.3.1) — одно правило для трёх мест: ряд фото «Наши работы» (до 900 px, кроме одного фото), карточки комплектов в каждом классе и карточки дополнительного оборудования (до 700 px). Листается пальцем без JS: scroll-snap, карточка 82 % ширины, следующая выглядывает; отступы с краёв — поля страницы. Область получает tabindex, role и подпись: у «Наших работ» их ставит avtogates_render_service_photos_block, у комплектов и оборудования — avtogates_kit_strip_attributes. Высота карточек комплектов в ряду одинакова (flex stretch), кнопка прижата к низу карточки (.kit-actions). Блок стоит после .kit-grid: порядок важен. */ @media (max-width: 900px) { .service-works-grid:not(.has-1), .kit-grid, .equipment-strip { --strip-gutter: var(--wp--style--root--padding-left, 28px); display: flex; gap: 12px; margin: 0 calc(-1 * var(--strip-gutter)); overflow-x: auto; overscroll-behavior-x: contain; padding: 0 var(--strip-gutter) 6px; scroll-padding-inline: var(--strip-gutter); scroll-snap-type: x mandatory; } .service-works-grid:not(.has-1) .service-works-item, .kit-grid > .kit-card, .equipment-strip > .service-item { flex: 0 0 82%; scroll-snap-align: start; } .service-works-grid:focus-visible, .kit-grid:focus-visible, .equipment-strip:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } } /* Комплекты и оборудование от 701 px — сетка (комплекты: две колонки, с 1100 px — четыре; оборудование: две и три); лента только до 700 px. */ @media (min-width: 701px) and (max-width: 900px) { .kit-grid, .equipment-strip { display: grid; margin: 0; overflow: visible; padding: 0; scroll-snap-type: none; } }