/* Theme Name: Kadence Child — Terra GPS Theme URI: https://terra-gps.com.ua/ Description: Дочерняя тема Kadence для Terra GPS. Правки: SVG-логотип в шапке, favicon-набор, фирменные цвета, OG-теги. Author: Terra GPS Template: kadence Version: 1.5.1 Text Domain: kadence-child Requires at least: 6.3 Requires PHP: 7.4 */ /* * ВАЖНО: при добавлении или переименовании файлов в patterns/ поднимайте * Version выше. WordPress кэширует список паттернов в site-transient * wp_theme_files_patterns-, а ключ кэша включает версию темы * (wp-includes/class-wp-theme.php, get_pattern_cache). Без смены версии * новые паттерны не появятся в редакторе — они просто не будут * зарегистрированы, без всяких ошибок. */ /* ------------------------------------------------------------------------- * Фирменные цвета Terra GPS — по гайду корпоративного стиля v2.0. * * Значения гайда взяты из исходного вектора логотипа. Коды версии 1.0 * (#2B1550, #9B1B6E) были сняты со сжатого PNG и признаны неверными. * * Основные цвета продублированы в палитре Kadence — оттуда генерируются * --global-paletteN для блоков: * palette1 = Deep Purple palette2 = Magenta palette3 = Ink * palette4 = Ink Soft palette5 = Line palette6 = Magenta Light * palette8 = Lavender Mist palette10 = Plum * Переменные ниже — для ручных правок в этом файле, чтобы не копировать хексы. * ---------------------------------------------------------------------- */ :root { /* бренд */ --tg-purple: #270D46; /* Deep Purple: заголовки, шапка, футер, тёмные секции */ --tg-magenta: #8E155C; /* Magenta: кнопки, ссылки, акценты — только на светлом */ --tg-plum: #4F0644; /* Plum: hover кнопок, правый край градиента знака */ --tg-magenta-light: #E344A2; /* акцент и ссылки только на тёмном фоне */ --tg-mist: #F3EDF8; /* фон чередующихся секций, подложки, карточки */ /* текст */ --tg-ink: #3F3550; /* основной текст */ --tg-ink-soft: #6A6079; /* второстепенный текст, подписи, подсказки полей */ --tg-line: #E3DAEC; /* границы */ /* служебные */ --tg-ok: #1E7A4C; /* форма отправлена, действие выполнено */ --tg-err: #B3243B; /* ошибка валидации, недоступное состояние */ } /* SVG-логотип: не даём ему растягиваться по высоте на узких экранах. */ .site-branding a.brand img.svg-logo-image { height: auto; } /* ------------------------------------------------------------------------- * Обводка фокуса — требование гайда для клавиатурной навигации: * 3px Magenta Light с отступом 2px. * * Селектор начинается с body.hide-focus-outline не для красоты. Kadence * добавляет этот класс body БЕЗУСЛОВНО (inc/components/base_support/ * component.php:836) и гасит им любой фокус правилом * :where(html:not(.no-js)) .hide-focus-outline *:focus { outline: 0 } * специфичностью (0,2,0). Наш прежний селектор имел (0,1,0) и проигрывал — * обводки не было вовсе. С body.hide-focus-outline получается (0,2,1). * * Правило темы включается только после того, как JS снимет с класс * no-js, поэтому в исходном HTML проблема незаметна — видна лишь в браузере. * * :focus-visible, а не :focus — обводка только при навигации с клавиатуры. * ---------------------------------------------------------------------- */ body.hide-focus-outline :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--tg-magenta-light); outline-offset: 2px; /* Гасим возможную обводку темы, чтобы не накладывались две. */ box-shadow: none; } /* На светлом фоне маджента-лайт контрастит слабее — там берём основную. */ body.hide-focus-outline .site-container :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--tg-magenta); } /* Шапка и футер тёмные — возвращаем светлый акцент. */ body.hide-focus-outline #masthead :where(a, button, input, select, summary, [tabindex]):focus-visible, body.hide-focus-outline #colophon :where(a, button, input, select, summary, [tabindex]):focus-visible { outline-color: var(--tg-magenta-light); } /* ========================================================================= * ТИПОГРАФИКА — брендгайд v2.0, раздел 4 * * Размеры заданы через clamp(): минимум, плавный рост, максимум. Отдельная * мобильная шкала не нужна. В настройках темы размеры H1–H3 и основного * текста намеренно очищены, иначе Kadence вывел бы фиксированные px и * перебил эти правила. * * Семейства и начертания (Onest 800/700/600, Inter 400), интерлиньяж и * letter-spacing задаются в настройках темы — здесь только шкала. * ====================================================================== */ :root { --tg-step-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); /* 36 → 60 px */ --tg-step-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); /* 28 → 40 px */ --tg-step-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* 20 → 24 px */ --tg-step-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 → 17 px */ /* геометрия */ --tg-r-control: 8px; /* кнопки и поля */ --tg-r-card: 12px; /* карточки и блоки */ --tg-shadow: 0 4px 24px rgba(39, 13, 70, 0.1); --tg-section-gap: clamp(40px, 5vw, 72px); /* прототип: .section { padding: 72px 0 } */ --tg-measure: 65ch; /* 60–75 символов в строке */ } /* Размеры в настройках темы очищены, поэтому шкала ниже работает без * конфликтов. Раньше H2 был исключением: eyebrow «Офіційний партнер Wialon» * был свёрстан как h2 без своего размера и раздувался шкалой до 40px. * Теперь он переведён на

, а секционные названия стали настоящими * заголовками — шкала попадает туда, куда её задумывал гайд. */ h1, .entry-title { font-size: var(--tg-step-h1); } h2 { font-size: var(--tg-step-h2); } h3 { font-size: var(--tg-step-h3); } body { font-size: var(--tg-step-body); } /* Длина строки. Только для элементов верхнего уровня: внутри колонок и * карточек ширину задаёт сама сетка, и там ограничение мешало бы. */ .entry-content > p, .entry-content > ul, .entry-content > ol { max-width: var(--tg-measure); } /* Ограничение ширины сужает блок, а выключка внутри него остаётся — из-за * этого центрированный текст уезжал влево. Возвращаем блок в центр. */ .entry-content > .has-text-align-center { margin-inline: auto; } .entry-content > .has-text-align-right { margin-inline-start: auto; } /* ========================================================================= * ЦЕНТРОВАННАЯ КОЛОНКА КОНТЕНТА — брендгайд v2.0: max-width 1120px, по центру * * Тема стоит в режиме page_layout = fullwidth, из-за чего Kadence обнуляет * контейнер правилом в global.min.css: * .content-width-fullwidth .content-container.site-container{max-width:none;padding:0} * Поэтому выставленные в настройках 1120px сами по себе ни на что не влияли, * и контент шёл от края до края экрана. * * Режим fullwidth менять не нужно — он и даёт фоны секций во всю ширину, как * в прототипе. Не хватало только внутреннего отступа, сдвигающего содержимое * в центр. Считаем его от ширины контента, поэтому смена ширины остаётся * одной настройкой в Customizer. * * Новые секции на нативных alignfull-рядах с inheritMaxWidth получают ширину * от Kadence сами и в этом правиле не нуждаются: селекторы намеренно * ограничены верхним уровнем entry-content. * ====================================================================== */ .content-width-fullwidth .entry-content > .wp-block-kadence-column > .kt-inside-inner-col, .content-width-fullwidth .entry-content > .kb-row-layout-wrap > .kt-row-column-wrap { /* max() не даёт отступу стать меньше штатного отступа от края экрана. */ padding-inline: max( var(--global-content-edge-padding, 1.5rem), (100% - var(--global-content-width, 1120px)) / 2 ); } /* Заголовки, лежащие в entry-content напрямую, а не внутри секции. */ .content-width-fullwidth .entry-content > :is(h1, h2, h3, h4, h5, h6) { max-width: var(--global-content-width, 1120px); margin-inline: auto; padding-inline: var(--global-content-edge-padding, 1.5rem); } /* Абзацы верхнего уровня уже ограничены мерой строки (--tg-measure = 65ch), * что уже 1120px. Им нужно только центрирование, оно задано выше. */ /* ========================================================================= * ГЕОМЕТРИЯ — брендгайд v2.0, раздел 5 * ====================================================================== */ /* Кнопки и поля: 8px. */ .wp-block-button__link, .kb-button, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], select, textarea { border-radius: var(--tg-r-control); } /* Карточки: радиус и тень. * * Раньше здесь был список из 12 селекторов вида .kadence-column20_* — он * существовал потому, что колонка с фоном и колонка вёрстки в Kadence * размечены одинаково, и общее правило рисовало бы тень вокруг прозрачных * колонок. Список был привязан к блокам страницы 20 и требовал ручного * пополнения. * * После перевода всех секций на паттерны он не нужен: карточки несут класс. */ /* Обход для радиуса hero удалён 2026-08-08: hero пересобран на паттерн * kadence-child/hero, блоков 20_9881ee-52 и 20_8b76a7-db больше нет, и * borderRadius 80/40px ушёл вместе с их атрибутами. Именно так и надо было * лечить с самого начала — правкой атрибутов, а не CSS-переопределением. */ /* Отступ между секциями. * * Kadence Blocks берёт эти переменные как значение по умолчанию для рядов: * padding: var(--global-kb-row-default-top, var(--global-kb-spacing-sm, 1.5rem)). * Определяя их, мы влияем только на ряды без собственных отступов — ряды, * где отступы выставлены руками в блоке, сохраняют свои значения. */ :root { --global-kb-row-default-top: var(--tg-section-gap); --global-kb-row-default-bottom: var(--tg-section-gap); } /* ========================================================================= * Eyebrow (надзаголовок) — брендгайд v2.0 * * Гайд: «Регістр — речення з великої літери. CAPS — лише для надзаголовків * (eyebrow)», размер Small = 0.8125rem (13px). Регистр задаём через * text-transform, а не в тексте: в разметке слова остаются читаемыми, * и скринридер прочитает их нормально, а не по буквам. * * Трекинг 0.08em гайдом не задан — прописная гарнитура без него читается * тесно; значение подобрано под CAPS. * ====================================================================== */ .tg-eyebrow { font-family: var(--global-heading-font-family, "Onest", sans-serif); font-size: 0.75rem; /* 12px */ font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.1em; /* Гайд: Magenta — «кнопки, посилання, акценти, лише на світлому фоні». * Надзаголовок ровно этот случай. На тёмных секциях ниже подменяется * на Magenta Light: обычная маджента на Deep Purple даёт 2.3:1. */ color: var(--global-palette2); margin-block: 0 10px; } /* ========================================================================= * КОМПОНЕНТЫ СЕКЦИЙ — основа для паттернов * * Паттерны собираются на ядровых блоках: у Kadence есть theme.json v2 с * layout.contentSize, поэтому core/group с align:full и * layout:{"type":"constrained"} даёт фон во всю ширину и центрованное * содержимое без рукописной разметки kadence/rowlayout. * * Цвета в паттернах задаются слагами палитры (theme-palette1…15), которые в * theme.json ссылаются на --global-paletteN. Инлайновых hex в разметке нет. * Отступы и геометрия — здесь, в классах. * ====================================================================== */ /* Секция: вертикальный ритм и отступ от края экрана на узких вьюпортах. * На широких экранах внутренний contentSize уже держит колонку 1120px, * и этот боковой отступ ни на что не влияет. */ .tg-section { padding-block: var(--tg-section-gap); padding-inline: var(--global-content-edge-padding, 1.5rem); } /* Шапка секции: eyebrow + заголовок + подзаголовок, по центру. * 640px — из прототипа: подзаголовок в узкой колонке читается лучше. */ .tg-section-head { max-width: 40rem; margin-inline: auto; margin-block-end: 2.75rem; text-align: center; } .tg-section-head > * { margin-inline: auto; } /* Фон вариантов секции держим в классе, а не в атрибутах блока: цвет * фирменный и меняться по прихоти не должен, а разметка паттернов остаётся * минимальной — без has-background-классов и риска расхождения при валидации. */ .tg-section--alt { background-color: var(--global-palette8); } /* ------------------------------------------------------------------------- * Тёмная секция. Гайд, раздел «Темна тема»: основной текст #FFFFFF, * второстепенный #D9CEE6, акценты и ссылки #E344A2. Маджента-текст на * Deep Purple запрещена — контраст 2.0:1. * ---------------------------------------------------------------------- */ .tg-section--dark { background-color: var(--global-palette1); --tg-text-on-dark: #ffffff; --tg-text-on-dark-soft: #d9cee6; color: var(--tg-text-on-dark); } .tg-section--dark :is(h1, h2, h3, h4, h5, h6) { color: var(--tg-text-on-dark); } .tg-section--dark :is(p, li) { color: var(--tg-text-on-dark-soft); } .tg-section--dark a:not(.wp-block-button__link) { color: var(--tg-magenta-light); } /* Eyebrow на тёмном: основная маджента там нечитаема. */ .tg-section--dark .tg-eyebrow { color: var(--tg-magenta-light); } /* ------------------------------------------------------------------------- * Карточка. Заменяет привязанный к блокам страницы 20 список селекторов: * достаточно поставить класс. * ---------------------------------------------------------------------- */ .tg-card { border-radius: var(--tg-r-card); box-shadow: var(--tg-shadow); padding: 1.75rem; background-color: var(--global-palette9, #fff); height: 100%; } /* Выделенная карточка — средний тариф в сегментах. */ .tg-card--featured { outline: 2px solid var(--global-palette2); outline-offset: -2px; } /* Карточка на тёмном фоне: белая подложка там не нужна. */ .tg-section--dark .tg-card { background-color: rgba(255, 255, 255, 0.06); box-shadow: none; } /* Плашка-метка: «Найпопулярніше». */ .tg-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; background-color: var(--global-palette2); color: var(--global-palette9, #fff); font-family: var(--global-heading-font-family, "Onest", sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Список возможностей внутри карточки — без маркеров, с галочками. */ .tg-list { list-style: none; padding-inline-start: 0; margin-block: 1rem; } .tg-list > li { position: relative; padding-inline-start: 1.5rem; margin-block-end: 0.5rem; } .tg-list > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.45em; width: 0.6em; height: 0.35em; border-inline-start: 2px solid var(--global-palette2); border-block-end: 2px solid var(--global-palette2); transform: rotate(-45deg); } .tg-section--dark .tg-list > li::before { border-color: var(--tg-magenta-light); } /* ------------------------------------------------------------------------- * Метрики кейсов: крупное число + подпись. * ---------------------------------------------------------------------- */ .tg-metrics { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 1rem; } .tg-metric-val { font-family: var(--global-heading-font-family, "Onest", sans-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--global-palette2); } .tg-metric-label { font-size: 0.8125rem; color: var(--global-palette4); } /* Метка кейса: «Транспортна компанія · 35 авто». */ .tg-tag { font-size: 0.8125rem; color: var(--global-palette4); margin-block-end: 0.5rem; } /* ------------------------------------------------------------------------- * FAQ на нативном

— раскрытие без JavaScript, доступно с клавиатуры * и индексируется поисковиками. * ---------------------------------------------------------------------- */ .tg-faq-item > summary { cursor: pointer; font-family: var(--global-heading-font-family, "Onest", sans-serif); font-weight: 600; color: var(--global-palette1); list-style: none; } .tg-faq-item > summary::-webkit-details-marker { display: none; } /* Свой маркер: плюс, который превращается в минус. */ .tg-faq-item > summary::after { content: "+"; float: inline-end; margin-inline-start: 1rem; color: var(--global-palette2); font-size: 1.25em; line-height: 1; } .tg-faq-item[open] > summary::after { content: "\2212"; } .tg-faq-item > summary + * { margin-block-start: 0.75rem; } /* ------------------------------------------------------------------------- * Модели оборудования — набор чипов. * ---------------------------------------------------------------------- */ .tg-models { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1rem; padding-inline-start: 0; list-style: none; } .tg-models > li { padding: 0.25rem 0.625rem; border: 1px solid var(--global-palette5); border-radius: var(--tg-r-control); font-size: 0.8125rem; } .tg-section--dark .tg-models > li { border-color: rgba(255, 255, 255, 0.25); } /* ========================================================================= * ФУТЕР — колонки по прототипу * * Заголовки колонок делаем абзацем с классом, а не

/

: виджеты футера * выводятся на КАЖДОЙ странице, и настоящие заголовки ломали бы иерархию * документа — на пустых страницах появились бы h2 без h1. * ====================================================================== */ .tg-footer-title { font-family: var(--global-heading-font-family, "Onest", sans-serif); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-magenta-light); margin-block-end: 0.75rem; } /* Список ссылок в колонке футера — без маркеров. */ .tg-footer-links { list-style: none; padding-inline-start: 0; margin-block: 0; } .tg-footer-links > li { margin-block-end: 0.4rem; } /* Футер тёмный: применяем те же правила, что и к тёмным секциям. */ #colophon .widget-area { color: #ffffff; } #colophon .widget-area p:not(.tg-footer-title) { color: #d9cee6; } /* ========================================================================= * HERO * * Вертикальный ритм задаём отступами, а не фиксированной высотой: в прежней * вёрстке стоял minHeight 500px с центрированием, из-за чего отступы сверху и * снизу получались случайными и разными на разных экранах. * Сами значения — ниже, в правках визуальной приёмки: 64px сверху, 56px снизу. * ====================================================================== */ /* H1 в hero живёт в колонке 55% ширины (~600px), а не во всю ширину страницы. * Поэтому верхняя граница шкалы гайда (60px) здесь даёт четыре строки заголовка. * Ограничиваем максимум 48px: нижняя граница и характер шкалы сохранены. * Если нужно строго по гайду — убрать это правило, вернётся clamp(36→60px). */ .tg-hero h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); margin-block-end: 1rem; } /* Подзаголовок: размер основного текста и ограничение длины строки. * Раньше было 18px без ограничения — около 90 символов в строке. */ .tg-hero-lead { max-width: 34rem; margin-block-end: 2rem; } /* Плашка «Офіційний партнер Wialon». Полупрозрачная маджента на тёмном: * сам текст берёт Magenta Light, обычная маджента на Deep Purple нечитаема. */ .tg-hero-badge { display: inline-block; max-width: 26rem; padding: 0.375rem 0.875rem; margin-block-end: 1.25rem; border-radius: 999px; background-color: rgba(142, 21, 92, 0.3); color: var(--tg-magenta-light); font-family: var(--global-heading-font-family, "Onest", sans-serif); font-size: 0.875rem; font-weight: 600; line-height: 1.4; } /* Кнопки выключены влево — по тексту, а не по центру колонки. */ .tg-hero .wp-block-buttons { gap: 0.75rem; } /* Скриншот кабинета. */ .tg-hero-media img { border-radius: var(--tg-r-card); height: auto; } /* ========================================================================= * ПРАВКИ ПО ВИЗУАЛЬНОЙ ПРИЁМКЕ HERO (2026-08-08) * * Значения взяты из прототипа, а не подобраны на глаз. * ====================================================================== */ /* Отступы hero: прототип задаёт 64px сверху и 56px снизу. * Общий --tg-section-gap давал до 88px с каждой стороны — заметно больше. */ .tg-hero { padding-block: 64px 56px; } /* Бейдж → H1. Зазор задаёт только бейдж; у H1 верхний отступ снимаем, * иначе к 20px бейджа прибавлялся отступ заголовка от темы. */ .tg-hero-badge { margin-block: 0 20px; /* Рамка из прототипа — без неё плашка выглядит размытой на тёмном. */ border: 1px solid rgba(227, 68, 162, 0.4); font-size: 0.75rem; /* 12px, как в прототипе */ padding: 0.375rem 1rem; } /* H1: прототип 40px, интерлиньяж 1.22, отступ снизу 18px. * Нижняя граница clamp оставлена для узких экранов (прототип там даёт 28px). */ .tg-hero h1 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); /* 28 → 40px */ line-height: 1.22; margin-block: 0 18px; } /* Акцент в заголовке. * * В прототипе это var(--magenta) = #9B1B6E, но на Deep Purple такая маджента * даёт контраст 2.0:1 — гайд её на тёмном фоне прямо запрещает. Берём * Magenta Light: 4.6:1, то самое значение из таблицы контраста гайда. */ .tg-hero h1 span { color: var(--tg-magenta-light); } .tg-hero-lead { margin-block: 0 30px; } /* После кнопок лишнего отступа быть не должно: низ секции задан padding-bottom. */ .tg-hero .wp-block-buttons { gap: 14px; margin-block-end: 0; } /* ------------------------------------------------------------------------- * Секции идут вплотную * * У Kadence контентная область белая (.content-bg → palette9), а между * блоками верхнего уровня стоят вертикальные отступы. В этих щелях белый фон * и просвечивал полосой между тёмным hero и лавандовой статистикой. * * В прототипе секции стыкуются без зазоров, а воздух создаётся их внутренними * отступами. Приводим к той же модели. Заголовки и абзацы, лежащие в * entry-content напрямую, свои отступы сохраняют — они часть секции, а не * секция сама по себе. * ---------------------------------------------------------------------- */ /* Секции с собственным фоном — вплотную: у каждой есть padding-block. */ .entry-content > .wp-block-group.tg-section { margin-block: 0; } /* Отдельно — стык hero с тем, что идёт следом (сейчас это лавандовая * статистика). Именно в этой щели просвечивал белый. * * Селектор по соседству, а не по классу конкретного блока: переживёт * пересборку статистики на паттерн. */ .entry-content > .tg-hero + * { margin-block-start: 0; } /* * Остальные блоки верхнего уровня свои отступы сохраняют. Обнулять их всем * подряд нельзя: у колонки с eyebrow «Можливості системи» и у одного из рядов * возможностей внутренних отступов нет вовсе, и они прижались бы вплотную. * Эти щели не видны — там фон контентной области белый с обеих сторон. */ /* ========================================================================= * СТАТИСТИКА, ПАРТНЁРЫ, ВОЗМОЖНОСТИ * ====================================================================== */ /* Полоса статистики низкая: в прототипе .stats { padding: 36px 0 }. */ .tg-stats { padding-block: 36px; } .tg-stat-num { font-family: var(--global-heading-font-family, "Onest", sans-serif); font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); /* 28 → 36px */ font-weight: 800; line-height: 1.1; color: var(--global-palette1); margin-block: 0 0.25rem; } .tg-stat-label { font-size: 0.9375rem; color: var(--global-palette4); margin-block: 0; } /* Партнёры: логотипы одной высоты, чтобы ряд не «прыгал». */ .tg-partners .tg-partner-logo img { height: 48px; width: auto; } .tg-partner-name { font-family: var(--global-heading-font-family, "Onest", sans-serif); font-size: 1.25rem; font-weight: 600; color: var(--global-palette1); margin-block: 0.75rem 0.25rem; } .tg-partner-sub { font-size: 1rem; color: var(--global-palette2); margin-block: 0; } /* Eyebrow «Технологічні партнери» по центру секции. */ .tg-partners > .tg-eyebrow { margin-block-end: 1.5rem; } /* Заголовок карточки не должен тянуть размер H3 из общей шкалы: * внутри карточки он подпись, а не секционный заголовок. */ .tg-card h3 { font-size: 1.125rem; margin-block: 0 0.5rem; } .tg-card p:last-child { margin-block-end: 0; } /* На тёмной секции иконки должны быть белыми (гайд, раздел «Темна тема»). */ .tg-section--dark .tg-feature-icon { color: var(--tg-text-on-dark, #ffffff); } /* ========================================================================= * ОФОРМЛЕНИЕ СЕКЦИЙ ПО ПРОТОТИПУ (правки приёмки 2026-08-08) * * Ключевое расхождение, которое исправляется здесь: в прототипе карточки * держатся на РАМКАХ, а не на тенях, а карточки возможностей — лавандовые. * Цвета берутся из палитры бренда, а не прототипные коды версии 1.0. * ====================================================================== */ /* Партнёры: узкая полоса с разделителем снизу. Прототип: 36px + border-bottom. */ .tg-partners { padding-block: 36px; border-block-end: 1px solid var(--global-palette5); } .tg-partners > .tg-eyebrow { margin-block-end: 1.25rem; } /* Надёжность: прототип задаёт 64px, а не общие 72px. */ .tg-reliability { padding-block: 64px; } /* ------------------------------------------------------------------------- * Карточки возможностей: лавандовая подложка, рамки нет, тени нет. * Прототип: .feat-card { background: lavender; border-radius: 14px; * padding: 26px 22px }, h3 16px, p 13.5px/1.6. * ---------------------------------------------------------------------- */ .tg-features .tg-card { background-color: var(--global-palette8); box-shadow: none; border-radius: 14px; padding: 26px 22px; } .tg-features .tg-card h3 { font-size: 1rem; /* 16px */ /* По центру — вслед за иконкой: карточка читается как единый блок. * Описание оставлено по левому краю: длинный текст по центру читается хуже. */ text-align: center; } .tg-features .tg-card p { font-size: 0.84375rem; /* 13.5px */ line-height: 1.6; } /* Иконка возможностей: 46px и по центру карточки — чтобы восемь блоков * читались как набор. В прототипе иконки были выключены влево и 46px; * центрирование — решение заказчика. */ .tg-feature-icon { width: 46px; height: 46px; margin: 0 auto 16px; line-height: 0; color: var(--global-palette2); } .tg-feature-icon svg { width: 100%; height: 100%; } /* ------------------------------------------------------------------------- * Сегменты: белая карточка с рамкой, выделенная — маджентовой рамкой. * ---------------------------------------------------------------------- */ .tg-segments .tg-card { background-color: var(--global-palette9); border: 1.5px solid var(--global-palette5); border-radius: 16px; padding: 28px 24px; box-shadow: none; } .tg-segments .tg-card--featured { border: 2px solid var(--global-palette2); outline: none; } /* Метка «Найпопулярніше»: лавандовая подложка, текст Plum. */ .tg-segments .tg-badge { background-color: var(--global-palette8); color: var(--global-palette10); font-size: 0.6875rem; /* 11px */ font-weight: 700; padding: 4px 12px; border-radius: 20px; } /* CTA сегмента — полноширинная мягкая кнопка, а не текстовая ссылка. */ .tg-segments .tg-cta { margin-block: 22px 0; } .tg-segments .tg-cta a { display: block; text-align: center; padding: 11px; border-radius: var(--tg-r-control); background-color: var(--global-palette8); color: var(--global-palette2); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .tg-segments .tg-cta a:hover { background-color: var(--global-palette2); color: var(--global-palette9); } /* ------------------------------------------------------------------------- * Кейсы: белая карточка с рамкой, без тени. * ---------------------------------------------------------------------- */ .tg-cases .tg-card { background-color: var(--global-palette9); border: 1px solid var(--global-palette5); border-radius: 14px; padding: 26px; box-shadow: none; } /* ------------------------------------------------------------------------- * FAQ: белые карточки с рамкой и зазором, а не список с линиями. * Прототип: .faq-list { max-width: 760px; gap: 10px }, * .faq-item { background: #fff; border: 1px solid Line; radius: 10px; padding: 18px 22px } * ---------------------------------------------------------------------- */ .tg-faq-list { max-width: 47.5rem; /* 760px */ margin-inline: auto; display: flex; flex-direction: column; gap: 10px; } .tg-faq-item { background-color: var(--global-palette9); border: 1px solid var(--global-palette5); border-radius: 10px; padding: 18px 22px; /* линия-разделитель из прежней версии больше не нужна */ border-block-end: 1px solid var(--global-palette5); } /* ------------------------------------------------------------------------- * Оборудование на тёмном: полупрозрачная подложка с тонкой рамкой. * ---------------------------------------------------------------------- */ .tg-equipment .tg-card { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 26px; box-shadow: none; } /* ------------------------------------------------------------------------- * Иконки в секции надёжности. * Прототип: большая 56px слева и по 34px у каждого механизма. * ---------------------------------------------------------------------- */ .tg-reliability-icon { width: 56px; height: 56px; border-radius: 14px; background-color: rgba(227, 68, 162, 0.2); border: 1px solid rgba(227, 68, 162, 0.4); color: var(--tg-magenta-light); display: flex; align-items: center; justify-content: center; margin-block-end: 20px; } .tg-reliability-icon svg { width: 26px; height: 26px; } .tg-rf-item { display: flex; gap: 14px; margin-block-end: 22px; } .tg-rf-item:last-child { margin-block-end: 0; } .tg-rf-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.06); color: var(--tg-magenta-light); display: flex; align-items: center; justify-content: center; } .tg-rf-icon svg { width: 18px; height: 18px; } .tg-rf-item h3 { font-size: 0.9375rem; /* 15px, как в прототипе */ margin-block: 0 4px; } .tg-rf-item p { margin-block: 0; } /* ========================================================================= * ВРЕМЕННО СКРЫТО по просьбе заказчика 2026-08-08 * * Карточка «Teltonika Networks» в секции «Обладнання». Скрыта именно через * CSS, а не удалением из контента: разметка и список моделей остаются на * месте, вернуть — снять это правило. * * Селектор позиционный, потому что в разметке нет класса, за который можно * зацепиться: Teltonika — ПЕРВАЯ из двух колонок секции. Появится третий * производитель или изменится порядок — правило нужно перепроверить. * * Ширины у колонок не заданы (flex-basis: 0, flex-grow: 1), поэтому Bitrek * автоматически занимает всё освободившееся место. * ====================================================================== */ .tg-equipment .wp-block-columns > .wp-block-column:first-child { display: none; } /* ========================================================================= * ОТСТУПЫ КОМПОНЕНТОВ — перебиваем вертикальный ритм Kadence * * У темы есть правило (assets/css/content.min.css): * .single-content p { margin-top: 0; margin-bottom: var(--global-md-spacing) } * где --global-md-spacing = 2rem (32px). Специфичность (0,1,1). * * Мои компонентные правила вида .tg-eyebrow имеют (0,1,0) и ПРОИГРЫВАЛИ — * то есть заданные отступы молча не применялись, у всех абзацев оставалось * 32px снизу. Отсюда и «огромный зазор» между плашкой и H1 в hero, и между * надзаголовком и H2, и между названием партнёра и подписью. * * Префикс .entry-content даёт (0,2,0) и перебивает (0,1,1): классы * entry-content и single-content висят на одном и том же элементе. * * ВАЖНО: любое новое правило отступа для абзаца внутри контента нужно писать * с этим префиксом, иначе оно снова окажется бесполезным. * ====================================================================== */ /* Надзаголовок: прототип задаёт 10px до заголовка. */ .entry-content .tg-eyebrow { margin-block: 0 10px; } /* Шапка секции: прототип — .section-head h2 { margin-bottom: 10px }. */ .entry-content .tg-section-head h2 { margin-block: 0 10px; } .entry-content .tg-section-head p:last-child { margin-block-end: 0; } /* Hero: плашка 20px до заголовка, подзаголовок 30px до кнопок — из прототипа. */ .entry-content .tg-hero-badge { margin-block: 0 20px; } .entry-content .tg-hero-lead { margin-block: 0 30px; } /* Статистика: число и подпись — одна пара, а не два абзаца с воздухом. */ .entry-content .tg-stat-num { margin-block: 0 0.25rem; } .entry-content .tg-stat-label { margin-block: 0; } /* Партнёры: прототип — .partner-sub { margin-top: 2px }. */ .entry-content .tg-partner-name { margin-block: 0.75rem 0.25rem; } .entry-content .tg-partner-sub { margin-block: 0; } /* Метрики кейсов: значение и подпись вплотную. */ .entry-content .tg-metric-val, .entry-content .tg-metric-label { margin-block: 0; } /* Метка кейса и объём в карточке сегмента. */ .entry-content .tg-tag { margin-block: 0 0.5rem; } /* Метрики выравниваем по верху. У ядра WordPress flex-раскладка группы идёт * с align-items: center, из-за чего блоки метрик разной высоты вставали * ступенькой. */ .entry-content .tg-metrics { align-items: flex-start; } /* ========================================================================= * ССЫЛКИ В ВИДЖЕТАХ ФУТЕРА * * Настройка темы footer_html_link_color красит только строку копирайта * (.footer-html a). Ссылки внутри виджетов брали цвет по умолчанию — * тёмный, рассчитанный на светлый фон, и на тёмном футере были почти не * видны. Гайд, раздел «Темна тема»: акцент и ссылки — #E344A2. * ====================================================================== */ #colophon .widget-area a { color: var(--tg-magenta-light); } #colophon .widget-area a:hover, #colophon .widget-area a:focus-visible { color: #ffffff; }