/* EVERHEAT_WP_PATCH */
/* ══════════════════════════════════════════════════════════════════════════
ШРИФТ ЛОКАЛЬНО
Було: Google Fonts CDN - зовнішній хост на кожній сторінці, який блокує
перший рендер тексту. Стало: три файли в assets/fonts/.
Три, а не чотири: font-weight:600 вжито в CSS 38 разів, але накреслення
600 в Ubuntu НЕ ІСНУЄ - браузер малює його тим самим файлом, що й 700
(виміряно: 190.96px проти 190.96px). Начертання 300 не вживається жодного
разу. Кирилиця не потрібна: сайт англійською, а кириличні імена авторів
відгуків домальовує системний фолбек.
font-display:swap - текст видно одразу системним шрифтом, підміна після
завантаження. Без цього перший екран порожній до кінця завантаження.
══════════════════════════════════════════════════════════════════════════ */
@font-face{
font-family:'Ubuntu'; font-style:normal; font-weight:400; font-display:swap;
src:url('../fonts/ubuntu-400.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Ubuntu'; font-style:normal; font-weight:500; font-display:swap;
src:url('../fonts/ubuntu-500.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Ubuntu'; font-style:normal; font-weight:700; font-display:swap;
src:url('../fonts/ubuntu-700.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* =========================================================
DESIGN TOKENS - синій домінуючий (бренд/довіра), помаранчевий лише для CTA.
========================================================== */
:root{
--color-blue: #1E77D6;
--color-blue-dark: #14528F;
--color-blue-light: #E8F2FC;
--color-orange: #F5821F;
/* Зірки рейтингу: помаранчевий бренду на білому дає 2.59:1, світлий - 1.12:1.
Глибший бурштин тримає 4.9:1 на білому і 4.6:1 на сірій секції. */
--color-star: #B35709;
--color-orange-dark: #D3660B;
--color-orange-light: #FEF0E2;
--color-bg: #FFFFFF;
--color-surface: #F7F8FA;
--color-border: #E4E7EC;
--color-border-interactive: #7C8794;
--color-text: #2B2E33;
--color-text-secondary: #5B6068;
--color-text-muted: #9AA0A8;
--color-success: #2E9E5B;
--color-success-bg: #F2FBF6;
--color-success-text: #1F7A44;
--color-error: #E14B4B;
--color-error-bg: #FEF3F3;
--color-error-text: #C93A3A;
/* Warning (розд. 4 Частини C). Раніше службові плашки позичали CTA-помаранчевий,
а бриф лишає помаранчевий ТІЛЬКИ для CTA - тепер у них власний токен. */
--color-warning: #F0B429;
--color-warning-bg: #FEF8E7;
--color-urgent: #C1391F;
--color-urgent-bg: #FBEAE6;
--color-urgent-text: #FFFFFF;
--color-cta-text: #2B2E33;
--color-focus-ring: #14528F;
--color-focus-ring-on-blue: #FFFFFF;
/* Висота хедера - змінна: від неї відштовхується позиція мобільного меню,
і на вузьких екранах вона менша. */
/* Шари інтерфейсу зібрані в одному місці: розкидані по файлу числа
(59, 60, 65, 70, 200, 9999) з часом починають конфліктувати. */
--z-nav-panel: 59;
--z-header: 60;
--z-back-to-top: 65;
--z-sticky-form: 70;
--z-skip-link: 61;
--z-modal: 200;
--z-devbar: 9999;
--header-h: 78px;
--radius-button: 10px;
--radius-card: 16px;
--shadow-card: 0 2px 12px rgba(43, 46, 51, 0.08);
--shadow-card-hover: 0 4px 20px rgba(43, 46, 51, 0.12);
--overlay-photo: linear-gradient(180deg, rgba(20,82,143,0.55) 0%, rgba(20,82,143,0.75) 100%);
--font-body: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--container-w: 1180px;
/* МІРА ТЕКСТУ - одна ширина колонки для читання на весь сайт.
У пікселях, а НЕ в ch: ch відносний до font-size блоку, тому одна й та сама
декларація 68ch давала 552px на юридичних сторінках, 595px у SEO-блоці і
614px у /about/ - три різні ширини тексту з одного правила.
620px дає 65-76 символів у рядку на всіх трьох кеглях сайту (стеля
WCAG 1.4.8 - 80). Блоки, які самі є .container, беруть
calc(var(--measure) + 48px): у них border-box і padding 0 24px. */
--measure: 620px;
}
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-bg);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--color-blue); text-decoration: none; }
a:hover{ color: var(--color-blue-dark); }
:focus-visible{ outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
/* Було мертве правило: клас .on-blue не застосовувався в розмітці жодного разу,
тож
усі посилання в синіх блоках отримували темно-синю рамку на синьому (1.77:1).
Тепер селектор перелічує реальні сині контейнери. */
.section--blue :focus-visible,
.calc-panel :focus-visible,
.site-footer :focus-visible,
.emergency-box :focus-visible,
.on-blue :focus-visible{ outline-color: var(--color-focus-ring-on-blue); }
h1,h2,h3{ font-weight:700; color: var(--color-text); margin:0 0 .5em; line-height:1.2; }
h1{ font-size: clamp(2rem, 4vw, 2.85rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; color: var(--color-text); }
.container{ max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
/* ⚠️ 48px, А НЕ 72px, І ЦЕ ПРО ПРОМІЖОК, А НЕ ПРО САМЕ ЧИСЛО.
Секції стикаються впритул, тож між двома сусідніми виходить подвійний
відступ. Було 72 + 72 = 144px порожнечі між блоками на десктопі -
власник це й помітив. Стало 48 + 48 = 96px, число обрав власник.
Якщо колись правити - правити треба з тим, що видиме значення це
подвоєне. */
.section{ padding: 48px 0; }
.section--surface{ background: var(--color-surface); }
.section--blue{ background: var(--color-blue-dark); color:#fff; }
.section--blue h2, .section--blue p{ color:#fff; }
/* --color-blue на сірій секції дає 4.24:1 - нижче 4.5 для 15px. Темніший блакитний 7.0:1. */
.eyebrow{ color: var(--color-blue-dark); font-weight:600; font-size:.95rem; margin-bottom:.4em; }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding: 14px 26px; border-radius: var(--radius-button);
font-weight:600; font-size:1rem; border:1px solid transparent; cursor:pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background: var(--color-orange); color: var(--color-cta-text); }
.btn-primary:hover{ background: var(--color-orange-dark); color: var(--color-cta-text); }
.btn-secondary{ background:#fff; color: var(--color-blue); border-color: var(--color-blue); }
.btn-secondary:hover{ background: var(--color-blue-light); color: var(--color-blue-dark); }
/* ---------- Header ---------- */
/* Обхід блоків (WCAG 2.4.1): у шапці 15+ керувальних елементів, і без цього
посилання клавіатурний користувач проходив їх на кожній сторінці заново. */
.skip-link{
position:absolute; left:10px; top:-64px; z-index: var(--z-skip-link);
background: var(--color-blue-dark); color:#fff; padding:12px 20px;
border-radius:0 0 8px 8px; font-weight:700; transition: top .15s ease;
}
.skip-link:focus{ top:0; color:#fff; }
.site-header{
position: sticky; top:0; z-index: var(--z-header);
background:#fff; border-bottom:1px solid var(--color-border);
}
.site-header .container{
display:flex; align-items:center; justify-content:space-between;
height: var(--header-h); gap: 24px;
/* Ширший за загальні 1180px: логотип + меню + телефон + дві кнопки разом
займають ~1290px і в 1180 не вміщались - вище 1400px рядок вилазив за
контейнер. Хедер - повноширинна смуга, ширший внутрішній ліміт тут доречний. */
max-width: 1360px;
}
.logo{
display:flex; align-items:center; gap:10px;
font-weight:700; font-size:1.25rem; color: var(--color-blue-dark);
white-space: nowrap;
}
.logo-mark{
width:38px; height:38px; border-radius:9px; background: var(--color-blue);
color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
flex:none;
}
.primary-nav{ display:flex; align-items:center; gap: 28px; }
.primary-nav ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.primary-nav a{ color: var(--color-text); font-weight:500; font-size:.97rem; }
.primary-nav a:hover{ color: var(--color-blue); }
/* Було мертве правило: CSS чекав .is-current, а роутер ставив .is-active. */
/* Синій на blue-light дає 3.97:1 - той самий випадок, що спека фіксує для hover
вторинної кнопки. Blue-dark дає 7.04:1 і на білому, і на blue-light. */
.primary-nav a.is-active{ color: var(--color-blue-dark); font-weight:700; }
.primary-nav > ul > li > a.is-active{ box-shadow: inset 0 -2px 0 var(--color-orange); }
/* Стрілка - окрема кнопка поруч із назвою, тому пункт має бути flex і не переноситись:
інакше на середніх ширинах каретка з'їжджала під «Services»/«Products» другим рядком. */
.has-dropdown{ position:relative; display:flex; align-items:center; gap:2px; }
/* Пункти з підменю мають display:flex (через кнопку-стрілку), а звичайні -
list-item, тому їхній текст лягав на 2px нижче: у flex він центрується,
у list-item сидить на базовій лінії. Вирівнюємо всі пункти однаково. */
/* Тільки для горизонтального меню. У мобільній колонці align-items:center
стискає кожен пункт до ширини тексту й центрує його - саме через це
мобільне меню виглядало кривим. Нижче, у медіа-запиті, повертаємо stretch. */
.primary-nav > ul{ align-items:center; }
.primary-nav > ul > li{ white-space:nowrap; display:flex; align-items:center; }
.dropdown{
position:absolute; top: 100%; left:0; background:#fff; border:1px solid var(--color-border);
border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding:10px;
min-width: 230px; display:none; margin-top:10px;
}
/* Місток через 10px відступу: без нього курсор на шляху до випадайки виходив
за межі :hover і меню закривалось на півдорозі. */
.has-dropdown::after{ content:''; position:absolute; top:100%; left:0; right:0; height:12px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown{ display:block; }
/* Кнопка-стрілка: випадайка має відкриватись і кліком/тапом, а не лише наведенням - інакше на сенсорному екрані 10 підсторінок недосяжні з меню взагалі. */
.submenu-toggle{
background:none; border:none; cursor:pointer; padding:6px; margin-left:2px;
color: var(--color-text-secondary); line-height:0;
}
.submenu-toggle svg{ transition: transform .18s; }
.has-dropdown.open > .submenu-toggle svg{ transform: rotate(180deg); }
.dropdown a{ display:block; padding:9px 12px; border-radius:8px; font-size:.92rem; }
.dropdown a:hover{ background: var(--color-blue-light); }
.header-cta{ display:flex; align-items:center; gap:16px; }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:600; color: var(--color-text); white-space:nowrap; }
.header-phone svg{ flex:none; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
/* Кнопка калькулятора в хедері: компактніша за основний CTA, щоб три елементи
(телефон + 2 кнопки) вміщались поруч. Порядок згортання на вузьких екранах:
спочатку ховається текст телефону, потім сама кнопка калькулятора - телефон і головний CTA лишаються видимими завжди (вимога розд. 1 Частини II). */
/* Мін. тап-зона 44×44 (бриф розд. 1) - раніше було 41px заввишки. */
.btn-calc{ white-space:nowrap; padding:11px 14px; font-size:.86rem; min-height:44px;
display:inline-flex; align-items:center; }
/* Головний CTA хедера не ламається на два рядки лише там, де для цього є місце.
Нижче 1240px повертаємо звичайну поведінку - інакше рядок хедера переповнюється. */
/* Короткий підпис за замовчуванням прихований. Це правило мусить стояти ВИЩЕ
за медіа-запити, що його вмикають - специфічність однакова, тож інакше
виграє те, що нижче у файлі, і кнопка лишається порожньою. */
.cta-short{ display:none; }
/* Кнопка хедера не переноситься НІКОЛИ. Раніше nowrap діяв лише від 1241px, і в
діапазоні 961–1240 «Book Free Assessment» ламався на два рядки, розпирав хедер
по висоті й притискався до самого краю екрана. */
.header-cta .btn{ white-space:nowrap; }
/* Короткий підпис вмикається там, де довгий уже не вміщається поруч із розгорнутим
меню: логотип 232 + меню 453 + відступи 96 = 781px фіксовано, і нижче ~1120px
на CTA лишається замало місця. */
/* Пороги перераховані після того, як у меню зʼявились "Pricing" і "About" з
підменю: смуга меню виросла з 453px до 567px, тобто кожен крок згортання
мусить починатись приблизно на 130px раніше. Виміряно, не на око. */
@media (max-width: 1250px){
.cta-long{ display:none; }
.cta-short{ display:inline; }
.primary-nav ul{ gap:18px; }
.site-header .container{ gap:16px; }
.header-cta{ gap:12px; }
}
/* Найвужча смуга, де меню ще розгорнуте (961–1000px): бракувало ще ~13px,
тому тут підтискається сам логотип. Нижче 961 меню вже згортається в бургер. */
@media (max-width: 1140px){
.logo{ font-size:1.08rem; gap:8px; }
.logo-mark{ width:32px; height:32px; }
.primary-nav ul{ gap:15px; }
}
/* Найвужча смуга, де меню ще розгорнуте: 961-1010px. Виміряно на 961px:
логотип 199 + меню 522 + CTA 207 + відступи 80 = 1008 при доступних 961,
тобто бракує 47px. Знімаємо їх із трьох місць одразу, а не з одного. */
@media (max-width: 1010px){
.primary-nav ul{ gap:10px; }
.primary-nav a{ font-size:.93rem; }
.site-header .container{ gap:10px; padding-left:16px; padding-right:16px; }
.logo{ font-size:1rem; }
}
/* Порядок згортання перевірено вимірюванням, а не на око:
≥1241px - видно все; 1241–961px - меню ще розгорнуте і забирає ширину, тому кнопка
калькулятора ховається; 960–821px - меню згорнулось у бургер, місце звільнилось,
кнопка повертається; ≤820px - ховається знову, лишаються телефон і головний CTA. */
/* Номер телефону текстом ховається раніше, ніж було: три елементи + повне меню
не вміщаються навіть у 1400px (виміряно). Сама іконка-дзвінок лишається клікабельною
на всіх ширинах, тож вимога "телефон видно без скролу" виконана. */
.header-phone .phone-short{ display:none; font-weight:600; }
@media (max-width: 1480px){
.header-phone .phone-text{ display:none; }
.header-phone .phone-short{ display:inline; }
}
@media (max-width: 1370px){ .btn-calc{ display:none; } }
@media (max-width: 960px){ .btn-calc{ display:inline-flex; } }
@media (max-width: 820px){ .btn-calc{ display:none; } }
/* У горизонтальному меню цей дубль не потрібен - там працює .btn-calc у хедері. */
.nav-calc{ display:none; }
/* ═══ Вузькі екрани ═══
Хедер не міг стиснутись нижче ~573px (логотип 232 + CTA 269 + відступи),
тому на телефоні 375px уся сторінка рендерилась завширшки 549px і з'їжджала
горизонтально. Тепер скорочуються всі три складові по черзі. */
@media (max-width: 640px){
:root{ --header-h: 64px; }
.site-header .container{ gap: 12px; }
.container{ padding-left:16px; padding-right:16px; }
.logo{ font-size:1rem; gap:8px; }
.logo-mark{ width:32px; height:32px; border-radius:8px; }
.header-cta{ gap:10px; }
.header-cta .btn{ padding:10px 12px; font-size:.86rem; }
.cta-long{ display:none; }
.cta-short{ display:inline; }
}
/* Середній крок скорочення логотипа. Він БУВ передбачений розміткою
( Solutions), але правила для нього так і
не написали, тому логотип стрибав із повних 187px одразу в саму літеру.
Наслідок: у смузі 421-439px хедер вимагав 438px і давав 13px горизонтального
скролу. Перевірки ловили лише 375 і 1280, тобто рівно повз цю смугу. */
@media (max-width: 520px){
.logo-full{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
}
@media (max-width: 420px){
/* Лишається значок бренду - назва не вміщається поруч із телефоном і CTA,
а бриф вимагає, щоб саме телефон і CTA були видні без скролу. */
.logo-name{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
}
/* ═══ Мобільна ергономіка ═══ */
@media (max-width: 640px){
/* iOS Safari робить примусовий зум при фокусі на полі з розміром < 16px - сторінка стрибає, і повернути масштаб можна лише вручну. Було 12.8–15.4px. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:16px !important; }
/* Тап-зони 44×44 (бриф розд. 1): бургер був 36×36, CTA хедера 43px заввишки */
.nav-toggle{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.header-cta .btn{ min-height:44px; padding:11px 12px; }
}
/* ═══ Мобільне меню ═══
Було: JS просто знімав display:none з горизонтального flex-списку, і 6 пунктів
втискались у рядок хедера, розпираючи сторінку. Тепер це повноекранна панель
під хедером, вертикальна, з великими рядками (бриф: «велике мобільне меню
без дрібного тексту») і підменю, що розкриваються тапом. */
/* ⚠️ ПОРЯДОК МАЄ ЗНАЧЕННЯ. Рядок із хрестиком і телефонний рядок існують
лише в бургер-режимі. Це правило мусить стояти ДО медіазапиту: у нього та
сама специфічність (0,1,0), що й у .nav-head усередині @media, а при
однаковій специфічності виграє те, що нижче. Поставлене після, воно
перемагало, і хрестик мав нульовий розмір - саме це я й отримав при
першій спробі (виміряно: closeRect 0×0). */
/* ⚠️ Селектор із > ul > li, а не просто .nav-call: правило
`.primary-nav > ul > li{ display:flex }` має специфічність (0,1,2) і
перебивало (0,1,0). Виміряно: на 1280px телефон друкувався в хедері
ДРУГИЙ раз, поруч із тим, що вже є. */
.nav-head,
.primary-nav > ul > li.nav-call{ display:none; }
@media (max-width: 960px){
.nav-calc{ display:flex; align-items:center; justify-content:center;
margin: 4px 16px 10px; min-height:52px; font-size:1rem; }
}
@media (max-width: 960px){
/* ⚠️ ПАНЕЛЬ НА ВЕСЬ ЕКРАН, top:0, І ВИЩЕ ХЕДЕРА. ВИМІРЯНО 15.09.
Було top:var(--header-h) і z-index 59, тобто панель лишала зверху
смугу 64px під хедер. Але блокування прокрутки ставить overflow:hidden
на , а це ВИМИКАЄ position:sticky у .site-header: на прокрученій
сторінці хедер повертався на статичне місце (виміряно: top -1200px при
scrollY 1200), у тій смузі проступав контент сторінки, а кнопка-бургер
зникала з екрана разом із хедером. Закрити меню ставало нічим.
Панель тепер накриває хедер цілком і має власний рядок із хрестиком.
z-index 80: вище хедера (60), кнопки «вгору» (65) і липкої форми (70),
нижче модалок (200). */
.primary-nav{
display:none; position:fixed; top:0; left:0; right:0; bottom:auto;
max-height: 100vh; max-height: 100dvh;
background:#fff; z-index:80; overflow-y:auto; padding:0 0 12px;
box-shadow: 0 18px 40px rgba(16,26,38,.18);
}
.primary-nav.open{ display:block; }
/* ⚠️ ЗАТЕМНЕННЯ ПІД ПАНЕЛЛЮ - НЕ ПРИКРАСА.
Панель тепер заввишки рівно зі вмістом, а не на весь екран: раніше під
останнім пунктом лишалось 346px порожнього білого (виміряно на 375×812),
і панель читалась як обірвана сторінка. Тепер видно, що це накладка, а
тап по затемненню закриває меню: обробник кліку поза .primary-nav уже є.
Псевдоелемент, а не окремий
: розмітку чіпати не треба. */
body.nav-open::after{
content:''; position:fixed; inset:0; z-index:79;
background: rgba(16,26,38,.45);
}
/* ⚠️ ЦЕЙ РЯДОК ОБОВʼЯЗКОВИЙ, І ОСЬ ЧОМУ.
.primary-nav лежить усередині .site-header, а той має z-index 60,
тобто СТВОРЮЄ власний контекст накладання. Через це z-index:80 панелі
рахується всередині того контексту, а не в кореневому: назовні вся
шапка разом із панеллю лишається на позначці 60. Затемнення на 79
опинялось ПОВЕРХ панелі, і вона теж сіріла - видно було одразу:
помаранчева кнопка «Calculate Cost» ставала брудно-коричневою.
Піднімаємо весь контекст шапки над затемненням на час, поки меню
відкрите. Модалки (200) і далі вище. */
body.nav-open .site-header{ z-index: 90; }
/* Рядок панелі: підпис ліворуч, хрестик праворуч. Висота така сама, як у
хедера, щоб хрестик опинився рівно там, де щойно був бургер. */
.nav-head{
display:flex; align-items:center; justify-content:space-between;
height: var(--header-h); padding:0 12px 0 20px;
border-bottom:1px solid var(--color-border);
position:sticky; top:0; background:#fff; z-index:1;
}
.nav-head-label{
font-size:.78rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color: var(--color-text-secondary);
}
.nav-close{
width:44px; height:44px; display:flex; align-items:center; justify-content:center;
background:none; border:0; padding:0; cursor:pointer; color: var(--color-text);
border-radius:10px;
}
.nav-close:hover{ background: var(--color-surface); }
/* Телефон у кінці меню: заповнює порожнечу під списком і дає дію, якої
в бургер-режимі немає (іконка телефону в хедері лишається без підпису). */
.primary-nav > ul > li.nav-call{ display:block; }
/* ⚠️ Селектор із > ul > li, а не просто .nav-call: правило
`.primary-nav > ul > li > a{ font-weight:600 }` нижче має специфічність
(0,1,3) і перебивало (0,1,1) - телефон малювався такою самою
вагою, як решта пунктів. З Ubuntu це було непомітно (файла 600 не було,
600 і 700 малювались однаково), а варіативний Plex Sans розрізняє їх.
Виміряно на 375px: computed font-weight був 600 замість 700. */
.primary-nav > ul > li.nav-call > a{
display:flex; align-items:center; gap:10px; min-height:56px; padding:0 20px;
font-size:1.06rem; font-weight:700; color: var(--color-blue-dark);
}
.nav-call svg{ flex:none; }
/* Меню - панель z-index 59, а всі закріплені внизу віджети мають 65-70,
тобто лежали ПОВЕРХ нього і з'їдали останні пункти списку: на сторінках
калькулятора смуга ціни (75px) накривала «Contact», а на решті сторінок
це робила кнопка «вгору». Поки меню відкрите, воно єдине на екрані. */
body.nav-open .calc-panel,
body.nav-open .sticky-form,
body.nav-open .back-to-top{ display:none !important; }
/* ⚠️ Банер згоди має z-index 200 (--z-modal), тобто лежав ПОВЕРХ панелі
і з'їдав нижні пункти меню. Ховаємо його на час, поки меню відкрите:
згода не скасовується, банер повертається одразу після закриття. */
body.nav-open .consent-bar{ display:none !important; }
/* Запас знизу: останній пункт не має впиратись у край екрана. */
.primary-nav{ padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.primary-nav ul{ flex-direction:column; gap:0; width:100%; align-items:stretch; }
.primary-nav > ul > li{ border-bottom:1px solid var(--color-border); }
.primary-nav > ul > li > a{
display:flex; align-items:center; min-height:56px; padding:0 20px;
font-size:1.06rem; font-weight:600;
/* flex:1 обов'язковий: без нього посилання займає лише ширину тексту,
і підсвітка активного пункту обривається посеред рядка. */
flex:1;
}
.primary-nav > ul > li > a.is-active{ box-shadow:none; background: var(--color-blue-light); }
.has-dropdown{ display:flex; flex-wrap:wrap; align-items:center; position:static; }
.has-dropdown > a{ flex:1; }
.has-dropdown::after{ content:none; }
.submenu-toggle{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
/* На тачі наведення не має відкривати нічого - тільки явний тап по стрілці */
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ display:none; }
.has-dropdown.open .dropdown{ display:block; }
.dropdown{
position:static; width:100%; margin:0; padding:0 0 8px;
border:none; box-shadow:none; border-radius:0; background: var(--color-surface);
}
.dropdown a{ padding:14px 20px 14px 34px; font-size:1rem; min-height:48px; display:flex; align-items:center; }
.header-phone span.phone-text{ display:none; }
.nav-toggle{ display:flex; }
}
/* ---------- Breadcrumbs (services) ---------- */
.breadcrumbs{ padding: 18px 0 0; font-size:.85rem; color: var(--color-text-secondary); }
/* Хлібні крихти теж клікабельні: 15px заввишки замало для пальця. */
.breadcrumbs a{ display:inline-flex; align-items:center; min-height:44px; }
.breadcrumbs a{ color: var(--color-text-secondary); }
.breadcrumbs span[aria-current]{ color: var(--color-text); font-weight:500; }
/* ---------- Hero (Home) ---------- */
.hero{ padding: 64px 0 56px; }
.hero .container{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero-badges{ display:flex; flex-wrap:wrap; gap: 10px 22px; margin: 22px 0 30px; }
.hero-badge{ display:flex; align-items:center; gap:7px; font-size:.92rem; color: var(--color-text-secondary); font-weight:500; }
.hero-badge b{ color: var(--color-text); }
/* Продажний заголовок героя - візуально на місці колишнього h1, але не h1 семантично */
.hero-title{ font-size: clamp(2rem, 4vw, 2.85rem); font-weight:700; color: var(--color-text);
margin:0 0 .5em; line-height:1.2; }
.hero-sub{ font-size:1.08rem; color: var(--color-text-secondary); max-width: 46ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 6px; }
/* Заглушка замість реального фото об'єкта/техніків - TODO замінити на фото */
.photo-slot{
position:relative; border-radius: var(--radius-card); overflow:hidden;
/* Розд. 10.4 забороняє градієнти на фонах секцій - рівна заливка Blue Light. */
background: var(--color-blue-light);
border: 1.5px dashed var(--color-border-interactive);
display:flex; align-items:center; justify-content:center; text-align:center;
color: var(--color-blue-dark); min-height: 280px; padding: 24px;
}
.photo-slot .ps-inner{ max-width: 240px; }
.photo-slot svg{ margin: 0 auto 12px; display:block; }
.photo-slot .ps-label{ font-size:.85rem; font-weight:600; color: var(--color-blue-dark); }
/* Graphite-300 спека дозволяє лише для placeholder/disabled, а це читабельний
підпис: на blue-light він давав 2.33:1. */
.photo-slot .ps-note{ font-size:.78rem; color: var(--color-text-secondary); margin-top:4px; }
.hero .photo-slot{ min-height: 380px; }
@media (max-width: 900px){
.hero .container{ grid-template-columns: 1fr; }
/* Було order:-1 - на телефоні сторінка відкривалась порожнім пунктирним
прямокутником, а заголовок ішов аж під ним. Текст має бути першим:
спершу обіцянка й CTA, потім ілюстрація. Якщо клієнт захоче фото першим
після появи реальних знімків - повернути order:-1 одним рядком. */
.hero .photo-slot{ min-height: 200px; }
}
/* ---------- Services hero (Services, текстовий) ---------- */
/* Клас висить на тому ж елементі, що й .container (class="services-hero container").
Шорткат padding:44px 0 8px обнуляв бічні відступи контейнера, і на 375px
заголовок та підзаголовок упирались у краї екрана. Тільки вертикальні. */
.services-hero{ padding-top: 44px; padding-bottom: 8px; text-align:center; }
.services-hero .eyebrow{ justify-content:center; }
.services-hero h2{ max-width: 760px; margin:0 auto .35em; }
.services-hero .hero-sub{ max-width: 620px; margin: 0 auto 26px; font-size:1.08rem; color: var(--color-text-secondary); }
.services-hero .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* ---------- Services cards ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.card-grid.card-grid--5 > :nth-child(4),
.card-grid.card-grid--5 > :nth-child(5){ grid-column: span 1; }
/* Картки читались як плаский список: без межі, що реагує, і без явного напрямку руху.
Тепер верхній акцент і підйом на hover - але без градієнтів і кольорових тіней (розд. 10.4). */
.service-card{
position:relative; overflow:hidden;
background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
padding: 26px; box-shadow: var(--shadow-card);
display:flex; flex-direction:column;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-icon{
width:46px; height:46px; border-radius:10px; background: var(--color-blue-light);
display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.service-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px;
background: var(--color-blue); opacity:0; transition: opacity .18s; }
.service-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card-hover);
border-color: var(--color-blue-light); }
.service-card:hover::before{ opacity:1; }
.service-card .card-link{ margin-top:auto; padding-top:10px; font-weight:600;
display:inline-flex; align-items:center; min-height:44px; }
.service-card h3{ margin-bottom:8px; }
.service-card p{ color: var(--color-text-secondary); font-size:.95rem; margin-bottom:16px; flex:1; }
.service-card .card-link{ font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:6px; }
@media (max-width: 900px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }
.section-head{ max-width: 640px; margin: 0 auto 8px; text-align:center; }
.section-head + .card-grid, .section-head + .process-list, .section-head + .reviews-grid,
.section-head + .price-table-wrap, .section-head + .faq-list{ margin-top: 44px; }
.section-cta{ text-align:center; margin-top: 44px; }
/* .section-cta задає text-align:center, але .hero-actions - це flex, і на його
дочірні елементи text-align не впливає взагалі. Тому пара кнопок у такому
блоці стояла ліворуч. Центруємо саме по осі flex. */
.section-cta.hero-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
/* ---------- Why different ---------- */
.why-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.why-item{ padding: 0 4px; }
.why-item .why-num{
display:inline-flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:50%; background: var(--color-blue);
color:#fff; font-weight:700; font-size:.95rem; margin-bottom:16px;
}
/* Заголовок другої групи ("Equipment We Install", "Services For This Equipment")
стояв ліворуч, тоді як усі інші .section-head центровані. Джерело - у
.related-sub просто не було text-align. */
/* text-align:center стояв на всьому блоці й протікав у КАРТКИ: текст усередині
них ставав центрованим, тоді як у сусідній сітці лишався ліворуч. Тому
центруємо тільки заголовок, а не контейнер. */
.related-sub{ margin-top:26px; padding-top:22px; border-top:1px solid var(--color-border); }
.related-sub > .eyebrow{ justify-content:center; text-align:center; }
/* ---------- Слайдери (Swiper): спільні правила ----------
Усі слайдери сайту керуються однаково: крапки під слайдами і пара круглих
стрілок під ними. Різниця лише в тому, ДЕ слайдер існує (див. JS). */
.reviews-swiper, .ms-swiper{ padding-bottom: 42px; }
.reviews-swiper .swiper-slide, .ms-track > .swiper-slide{ height:auto; display:flex; }
.reviews-swiper .swiper-slide > .review-card, .ms-track > .swiper-slide > *{ width:100%; }
/* Коли сітка стає треком слайдера, її власні grid-властивості мусять бути
повністю знешкоджені. Інакше:
· justify-content:center (потрібний для центрування карток у сітці)
центрує ВЕСЬ ряд слайдів усередині вузького контейнера, і перші слайди
їдуть у мінус - на 375px вони починались з -809px;
· gap додається ПОВЕРХ spaceBetween Swiper'а, тож відстані між картками
у різних слайдерах виходили різні.
Це і був той самий "кожен слайдер працює по-своєму". */
.ms-swiper .ms-track{
display:flex; justify-content:flex-start; align-items:stretch;
gap:0; grid-template-columns:none; margin:0;
}
/* Крапка 8-10px - менше за мінімальні 24px (WCAG 2.5.8). Саму крапку не
збільшуємо, але даємо їй прозору зону 24x24 і розводимо центри рівно на 24px,
щоб сусідні зони не накладались. */
.swiper{ --swiper-pagination-bullet-size: 10px; --swiper-pagination-bullet-horizontal-gap: 7px; }
.swiper-pagination-bullet{ position:relative; background: var(--color-text-secondary); opacity:.4; }
.swiper-pagination-bullet-active{ background: var(--color-orange); opacity:1; }
.section--blue .swiper-pagination-bullet{ background:#fff; }
.section--blue .swiper-pagination-bullet-active{ background: var(--color-orange); }
.swiper-pagination-bullet::after{ content:''; position:absolute; left:50%; top:50%;
width:24px; height:24px; transform:translate(-50%,-50%); }
.slider-nav{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:4px; }
/* Пагінація перенесена в цей ряд із середини слайдера (див. sliders.js).
Swiper за замовчуванням ставить їй position:absolute і bottom - у новому
місці це поклало б крапки поверх стрілок. Повертаємо в потік.
⚠️ СЕЛЕКТОР НАВМИСНО З ДВОМА КЛАСАМИ, І ЦЕ НЕ ПРИКРАСА.
swiper.min.css підключається ПІСЛЯ main.css (див. inc/enqueue.php:
стиль слайдера вантажиться у своїй гілці, нижче за основний). Його
правило .swiper-pagination-bullets.swiper-pagination-horizontal має
специфічність 0,2,0 - рівно таку саму, як .slider-nav .swiper-pagination.
При нічиї виграє той, хто нижче, тобто Swiper: width:100% лишався в силі,
блок розтягувався на всю ширину ряду, і крапки з'їжджали вліво, до
стрілки «назад». Виглядало як зламане вирівнювання, хоча правило було
на місці. Додатковий клас піднімає нас до 0,3,0 і знімає нічию. */
.slider-nav .swiper-pagination.swiper-pagination-bullets{
position:static; width:auto; transform:none; margin:0;
display:flex; align-items:center;
}
/* Слайд один - гортати нічого. Swiper вішає -lock, але display:flex вище
перебив би його: тому та сама специфічність і нижче за нього. */
.slider-nav .swiper-pagination.swiper-pagination-lock{ display:none; }
/* display:flex перебиває дефолтне display:none атрибута hidden - повертаємо. */
.slider-nav[hidden]{ display:none; }
.slider-nav button{
width:44px; height:44px; border-radius:50%; cursor:pointer;
background:#fff; border:1px solid var(--color-border); color: var(--color-blue-dark);
display:flex; align-items:center; justify-content:center; font: inherit;
}
.slider-nav button:hover{ background: var(--color-blue-light); }
.slider-nav button[disabled]{ opacity:.4; cursor:default; }
.slider-nav button::before{ content:''; width:9px; height:9px; border-top:2px solid currentColor;
border-right:2px solid currentColor; }
.slider-nav .sw-prev::before{ transform: rotate(-135deg); margin-left:3px; }
.slider-nav .sw-next::before{ transform: rotate(45deg); margin-right:3px; }
.section--blue .slider-nav button{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color:#fff; }
.section--blue .slider-nav button:hover{ background: rgba(255,255,255,.22); }
/* ---------- Компактні посилання між сторінками ----------
Раніше тут стояли картки з фото-заглушкою 16:9. Для навігаційного посилання
це порожній синій прямокутник на пів екрана, під яким ніколи не буде фото:
"All prices" не фотографують. Тепер це рядок з іконкою, назвою призначення
і підписом - той самий патерн, що працює в картках профілів на /about/. */
.link-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap:12px; margin-top:36px; }
.link-card{ display:flex; align-items:center; gap:13px; padding:14px 16px; min-height:68px;
background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
box-shadow: var(--shadow-card); color: var(--color-text);
transition: border-color .15s ease, box-shadow .15s ease; }
.link-card:hover{ border-color: var(--color-blue); box-shadow: var(--shadow-card-hover); color: var(--color-text); }
.lc-ico{ flex:none; width:38px; height:38px; border-radius:10px; background: var(--color-blue-light);
display:flex; align-items:center; justify-content:center; color: var(--color-blue-dark); }
.lc-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lc-text b{ font-size:.95rem; }
.lc-text span{ font-size:.8rem; color: var(--color-text-secondary); }
.link-card .pc-arrow{ flex:none; margin-left:auto; color: var(--color-blue-dark); }
/* ---------- Кейси портфоліо ----------
Було: заголовок і одне речення. Стало: система, ситуація, що зробили,
результат і дослівна цитата. Підписи полів залишені текстом, а не іконками:
саме їх читає ШІ, коли його питають, що компанія робить і як. */
.case-card .gallery-body{ display:flex; flex-direction:column; }
.case-system{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
color: var(--color-blue-dark); margin-bottom:6px; }
.case-facts{ margin:12px 0 0; }
.case-facts dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
color: var(--color-text-secondary); margin-top:10px; }
.case-facts dt:first-child{ margin-top:0; }
.case-facts dd{ margin:3px 0 0; font-size:.88rem; line-height:1.55; color: var(--color-text); }
.case-quote{ margin:16px 0 0; padding:12px 14px; border-left:3px solid var(--color-blue-light);
background: var(--color-surface); border-radius:0 8px 8px 0; }
.case-quote p{ margin:0; font-size:.85rem; line-height:1.6; color: var(--color-text-secondary); font-style:italic; }
.case-card .gallery-src{ margin-top:14px; }
/* ---------- «Читати далі»: однакова висота блоків ----------
Довжина відгуків від 61 до 956 символів, тому картки в сітці розʼїжджались
на 268px по висоті. Текст обрізається по рядках, кнопку додає JS і лише там,
де текст СПРАВДІ не вміщається: інакше в короткій картці зʼявиться "Read more",
який нічого не розкриває. */
.clamped{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.clamped[data-clamp="4"]{ -webkit-line-clamp:4; }
.clamped[data-clamp="5"]{ -webkit-line-clamp:5; }
.clamped[data-clamp="6"]{ -webkit-line-clamp:6; }
.clamped.is-open{ display:block; -webkit-line-clamp:none; overflow:visible; }
.read-more{ background:none; border:none; padding:6px 0 0; margin:0; font:inherit;
font-size:.85rem; font-weight:700; color: var(--color-blue-dark);
cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:32px; }
.read-more:hover{ text-decoration:underline; }
.read-more::after{ content:''; width:7px; height:7px; border-right:2px solid currentColor;
border-bottom:2px solid currentColor; transform: rotate(45deg); margin-top:-3px; }
.read-more[aria-expanded="true"]::after{ transform: rotate(-135deg); margin-top:2px; }
/* ---------- Зона обслуговування (/locations/) ---------- */
.loc-list{ list-style:none; padding:0; margin:34px 0 0; display:grid;
grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:10px; }
.loc-list li{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-button);
padding:12px 16px; font-size:.92rem; min-height:44px; display:flex; align-items:center; }
.loc-list--county li{ background: var(--color-blue-dark); color:#fff; font-weight:700; border-color: var(--color-blue-dark); }
/* ---------- Сторінка людини: /about/team/ ---------- */
/* 1fr віддавав тексту 926px, а .hero-sub має max-width:46ch - абзац стояв
стрічкою в 448px, і праворуч зяяла порожнеча на пів екрана. Обмежуємо саму
колонку: рядок лишається читабельним, блок перестає бути перекошеним. */
/* Клас висить на тому ж елементі, що й .container. Шорткат з бічними 20px
перебивав відступи контейнера (24px на десктопі, 16px на мобільному), і герой
стояв не в одну лінію з рештою секцій сторінки. Тільки вертикальні. */
.person-hero{ display:grid; grid-template-columns: 180px minmax(0, 620px); gap:40px;
align-items:start; padding-top: 34px; padding-bottom: 44px; }
.person-photo{ aspect-ratio:1; border-radius: var(--radius-card); background: var(--color-blue-light);
border:1.5px dashed var(--color-border-interactive); color: var(--color-blue-dark);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
font-size:.8rem; font-weight:600; }
.person-role{ font-size:1.02rem; font-weight:600; color: var(--color-blue-dark); margin:2px 0 12px; }
/* margin-bottom було 0, а .hero-actions має margin-top:6px - між чипами і
кнопками лишалось 6px проти 17px над чипами. Виглядало злиплим. */
.person-tags{ list-style:none; padding:0; margin:18px 0 24px; display:flex; flex-wrap:wrap; gap:8px; }
.person-tags li{ display:flex; }
/* Чипи були просто текстом. Це категорії робіт із відгуків, тобто найточніший
місток від людини до сторінки послуги чи товару - і для читача, і для
внутрішньої перелінковки. Висота 30px, вище мінімальних 24px для дотику. */
.person-tags a{ display:inline-flex; align-items:center; background: var(--color-blue-light);
color: var(--color-blue-dark); border-radius:999px; padding:7px 14px;
font-size:.82rem; font-weight:600; text-decoration:none;
border:1px solid transparent; transition: background .15s, border-color .15s; }
.person-tags a:hover{ background:#fff; border-color: var(--color-border-interactive); }
.person-quotes{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:18px; margin-top:40px; }
.person-quote{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
padding:22px; box-shadow: var(--shadow-card); color: var(--color-text); }
.person-quote p{ font-size:.92rem; color: var(--color-text-secondary); margin:10px 0 14px; line-height:1.65; }
.person-quote .author{ font-weight:600; font-size:.9rem; }
.person-quote .meta{ font-size:.78rem; color: var(--color-text-secondary); }
@media (max-width: 700px){
.person-hero{ grid-template-columns: 1fr; gap:22px; }
.person-photo{ max-width:160px; }
}
/* ---------- Ліцензія та сертифікати (/licensing/) ---------- */
.cred-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px; margin-top:40px; }
.cred-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
padding:24px; box-shadow: var(--shadow-card); }
.cred-card--primary{ background: var(--color-blue-dark); color:#fff; border-color: var(--color-blue-dark); }
.cred-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
color: var(--color-blue-dark); margin-bottom:8px; }
.cred-card--primary .cred-label{ color: rgba(255,255,255,.82); }
.cred-value{ font-size:1.5rem; font-weight:700; letter-spacing:.02em; margin-bottom:10px; color: var(--color-text); }
.cred-value--sm{ font-size:1.08rem; line-height:1.35; }
.cred-card--primary .cred-value{ color:#fff; }
.cred-card p{ font-size:.9rem; color: var(--color-text-secondary); margin:0 0 16px; line-height:1.6; }
.cred-card--primary p{ color: rgba(255,255,255,.85); }
.cred-card--primary .btn-secondary{ background:transparent; color:#fff; border-color: rgba(255,255,255,.45); }
.cred-card--primary .btn-secondary:hover{ background: rgba(255,255,255,.12); color:#fff; }
.cred-docs{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-top:26px; }
.cred-doc-slot{ aspect-ratio: 4 / 3; border:1.5px dashed var(--color-border-interactive);
border-radius: var(--radius-card); background: var(--color-blue-light);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
color: var(--color-blue-dark); font-size:.82rem; font-weight:600; text-align:center; padding:14px; }
/* margin auto по горизонталі обов'язковий: нижче цей абзац дістає max-width,
а без auto центрований текст опиняється в коробці, притиснутій ліворуч. */
.cred-note{ margin:18px auto 0; text-align:center; font-size:.85rem; color: var(--color-text-secondary); }
/* ---------- Картки зовнішніх профілів (About) ---------- */
.profile-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:14px; margin-top:36px; }
.profile-card{ display:flex; align-items:center; gap:14px; padding:16px 18px; min-height:72px;
background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
box-shadow: var(--shadow-card); color: var(--color-text);
transition: border-color .15s ease, box-shadow .15s ease; }
.profile-card:hover{ border-color: var(--color-blue); box-shadow: var(--shadow-card-hover); color: var(--color-text); }
.pc-ico{ flex:none; width:40px; height:40px; border-radius:10px; background: var(--color-blue-light);
display:flex; align-items:center; justify-content:center; color: var(--color-blue-dark); font-size:1.15rem; }
.pc-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pc-text b{ font-size:.98rem; }
.pc-text span{ font-size:.82rem; color: var(--color-text-secondary); }
.pc-arrow{ flex:none; margin-left:auto; color: var(--color-blue-dark); }
/* ---------- Розбивка робіт за тегами Google (Portfolio) ---------- */
.tagstat{ max-width:760px; margin:40px auto 0; list-style:none; padding:0;
display:flex; flex-direction:column; gap:8px; }
.tagstat li{ display:grid; grid-template-columns: minmax(150px,1fr) 40px minmax(0,2fr);
align-items:center; gap:16px; }
.tagstat .ts-name{ font-weight:600; font-size:.95rem; color: var(--color-text); }
.tagstat a.ts-name{ color: var(--color-blue-dark); display:inline-block; padding:5px 0; }
.tagstat a.ts-name:hover{ text-decoration:underline; }
.tagstat .ts-bar{ height:10px; border-radius:6px; background: var(--color-blue-light); }
.tagstat .ts-bar > span{ display:block; height:100%; border-radius:6px; background: var(--color-blue); }
.tagstat .ts-num{ text-align:right; font-weight:700; color: var(--color-blue-dark);
font-variant-numeric: tabular-nums; }
/* Теми з профілю Google. Свідомо НЕ смужки: розбивка вище вже смужки, а два
однакові на вигляд блоки підряд читаються як повтор. */
.topic-sub .eyebrow{ text-align:center; }
.topic-intro{ max-width:760px; margin:0 auto 18px; text-align:center;
font-size:.9rem; color: var(--color-text-secondary); }
.topic-cloud{ list-style:none; padding:0; margin:0 auto; max-width:760px;
display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.topic-pill{ display:inline-flex; align-items:center; gap:8px;
background: var(--color-blue-light); color: var(--color-blue-dark);
border-radius:999px; padding:8px 8px 8px 16px; font-size:.9rem; font-weight:600; }
.topic-pill .tp-num{ background:#fff; border-radius:999px; min-width:26px; height:26px;
display:inline-flex; align-items:center; justify-content:center;
font-size:.8rem; font-variant-numeric: tabular-nums; }
.tagstat-note{ max-width:760px; margin:20px auto 0; text-align:center;
font-size:.85rem; color: var(--color-text-secondary); }
@media (max-width:560px){
/* Смужка йде окремим рядком: на 375px три колонки лишали їй ~60px і вона
переставала щось показувати. */
.tagstat li{ grid-template-columns: 1fr 40px; gap:4px 16px; }
.tagstat .ts-name{ grid-column:1; grid-row:1; }
.tagstat .ts-num{ grid-column:2; grid-row:1; text-align:right; }
.tagstat .ts-bar{ grid-column:1 / -1; grid-row:2; margin-bottom:8px; }
}
/* ---------- Архів відгуків (Portfolio) ---------- */
.reviews-archive{ max-width:900px; margin:0 auto; }
.reviews-archive > summary{ cursor:pointer; list-style:none; text-align:center;
background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-button);
padding:14px 20px; font-weight:700; color: var(--color-blue-dark); min-height:44px; }
.reviews-archive > summary::-webkit-details-marker{ display:none; }
.reviews-archive > summary:hover{ background: var(--color-blue-light); }
.ra-list{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
/* color задано явно: картка біла, але всередині .section--blue успадкований колір
тексту - білий, і ім'я автора ставало білим по білому. */
.ra-item{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
padding:18px 20px; color: var(--color-text); }
.ra-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin-bottom:6px; }
.ra-meta{ color: var(--color-text-secondary); font-size:.84rem; }
.ra-item p{ margin:0; color: var(--color-text-secondary); font-size:.94rem; line-height:1.65; }
/* Архів живе всередині синьої секції відгуків на головній. Картки й розкривачка
самі білі, тож перефарбовувати треба лише підпис під ними. */
/* Кнопка "Read all 83 written reviews" тулилась ліворуч: у .reviews-all не було
нічого, крім верхнього відступу. */
.reviews-all{ margin-top:34px; text-align:center; }
.section--blue .reviews-all .team-note{ color: rgba(255,255,255,.85); }
.section--blue .reviews-all .team-note a{ color:#fff; text-decoration:underline; }
/* ---------- Блок обладнання на Home ---------- */
.equip-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:14px; }
/* Було: рядок із крихітним прев'ю 46px. Назви різної довжини ("Ductless
Mini-Splits" у два рядки, "Repair & Maintenance" без ціни) збивали вирівнювання,
і ціни стояли на різній висоті. Тепер вертикальна картка: смуга під фото
однакова в усіх, ціна притиснута до низу через margin-top:auto - вирівнювання
не залежить від довжини назви. */
.equip-card{ display:flex; flex-direction:column; gap:0;
background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
padding:0; overflow:hidden;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.equip-card:hover{ border-color: var(--color-blue-light); box-shadow: var(--shadow-card-hover);
transform: translateY(-2px); }
.equip-card b{ font-size:1rem; color: var(--color-text); }
.equip-price{ font-size:.88rem; color: var(--color-text-secondary); }
.equip-price span{ color: var(--color-blue-dark); font-weight:700; font-size:1.12rem; }
/* ---------- Прев'ю фото в картках ----------
Картки ведуть на сторінки, де в героєві стоїть фото-плейсхолдер, а самі
показували лише іконку - зв'язок між карткою і сторінкою не читався, і не
було видно, куди піде реальне фото. Тепер іконка стала гліфом усередині
того самого плейсхолдера, тільки компактного. Підпис називає конкретний
кадр, а не абстрактне "фото". */
.card-shot{
aspect-ratio: 16 / 10; margin: -26px -26px 18px; border-radius: var(--radius-card) var(--radius-card) 0 0;
background: var(--color-blue-light); border-bottom: 1.5px dashed var(--color-border-interactive);
display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
}
.card-shot .cs-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--color-blue-dark); }
.card-shot .cs-label{ font-size:.78rem; font-weight:600; color: var(--color-blue-dark); }
.card-shot svg{ opacity:.85; }
.equip-shot{
aspect-ratio: 16 / 9; flex:none;
background: var(--color-blue-light); border-bottom:1.5px dashed var(--color-border-interactive);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
color: var(--color-blue-dark); text-align:center; padding:10px;
}
.equip-shot .es-label{ font-size:.72rem; font-weight:600; }
.equip-body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; flex:1; }
.equip-price{ margin-top:auto; }
/* Суміжні сторінки: те саме прев'ю, тільки компактне - блок лишається
навігаційним хвостом, а не другою вітриною. */
.rc-shot{
aspect-ratio: 16 / 9; flex:none;
background: var(--color-blue-light); border-bottom:1.5px dashed var(--color-border-interactive);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
color: var(--color-blue-dark); text-align:center; padding:10px;
}
.rc-shot .rcs-label{ font-size:.72rem; font-weight:600; }
/* Картка називала сторінку, але не казала, ЩО там роблять. Для людини це зайвий
клік навмання, для ШІ - контекст, якого нема. Додаємо рядок під назвою. */
/* text-align задаємо явно, щоб центрування будь-якого предка не протікало
всередину картки: усі картки на сайті мусять виглядати однаково. */
.rc-name{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
min-height:48px; padding:12px 16px; text-align:left; }
.rc-what{ font-weight:500; font-size:.8rem; line-height:1.4; color: var(--color-text-secondary); }
/* Дві однакові за тлом секції підряд зливались в одну суцільну смугу, і межі
між блоками не було видно. Розділювач малюємо ТІЛЬКИ там, де тло не
змінюється: де чергування є, зайва лінія не потрібна. */
.section:not(.section--surface):not(.section--blue) + .section:not(.section--surface):not(.section--blue),
.section--surface + .section--surface{
border-top: 1px solid var(--color-border);
}
/* ---------- Команда (розд. 4.14: «команда» - окремий блок у порядку сторінки) ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
/* Одна картка в auto-fit розтягувалась на всю ширину контейнера (1132px на
десктопі) навколо 64px аватара. Так буває на сторінках Eric і Yaroslav:
у відгуках вони згадані в парі тільки з Владом. Обмежуємо саме цей випадок,
решту сіток не чіпаємо. Браузер без :has() покаже те, що було. */
.team-grid:has(> .team-card:only-child){
grid-template-columns: minmax(220px, 360px); justify-content:center;
}
.team-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
padding:24px; text-align:center; }
.team-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
background: var(--color-blue-light); color: var(--color-blue-dark);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:1.4rem; }
.team-card--owner .team-avatar{ background: var(--color-blue); color:#fff; }
.team-card h3{ margin:0 0 2px; font-size:1.05rem; }
/* Ті самі стилі для не-заголовкового варіанта: у блоках перелінковки картка
людини - це посилання, а не розділ сторінки, тож семантично там
.
Вигляд не змінюється. */
.team-card .team-name{ margin:0 0 2px; font-size:1.05rem; font-weight:700;
line-height:1.3; color: var(--color-text); }
.team-card .team-name a{ display:inline-block; padding:3px 6px; margin:-3px -6px;
border-radius:8px; }
/* Заголовок конверсійного блоку - не розділ документа, а рядок пропозиції. */
.calc-cta .cta-title{ color:#fff; margin:0 0 6px; font-size:1.25rem;
font-weight:700; line-height:1.3; }
/* Назва в картці вибору гілки: це підпис кнопки. */
.branch-card .branch-title{ display:block; font-size:1.02rem; font-weight:700;
line-height:1.3; margin:0 0 4px; color: var(--color-text); }
/* Імʼя-посилання мало 19px висоти - менше за мінімальні 24px для цілі дотику
(WCAG 2.5.8). Картка велика, тож добираємо висоту паддингом самого посилання,
а не розміром шрифту: вигляд не змінюється, площа дотику стає 25px. */
.team-card h3 a{ display:inline-block; padding:3px 6px; margin:-3px -6px; border-radius:8px; }
.team-role{ display:block; margin-bottom:10px; font-size:.82rem; letter-spacing:.08em;
text-transform:uppercase; color: var(--color-blue-dark); font-weight:700; }
.team-card p{ margin:0; font-size:.92rem; color: var(--color-text-secondary); }
/* Посилання в примітках лежать на off-white тлі, де --color-blue дає 4.24:1. */
.team-note a{ color: var(--color-blue-dark); }
/* Кнопка виходу на повний склад команди: сітка вже має свій нижній відступ,
тому .section-cta зі своїми 44px тут завеликий. */
.team-cta{ margin-top:18px; }
.team-note{ max-width:760px; margin:26px auto 0; text-align:center;
font-size:.92rem; color: var(--color-text-secondary); }
/* Заголовок для структури документа, невидимий візуально (де видимий був би
дослівним повтором H1). Не cloaking: текст той самий, що й сенс секції. */
.success-box{ text-align:center; }
.success-icon{ width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
background: var(--color-success-bg); color: var(--color-success-text);
display:flex; align-items:center; justify-content:center; }
.success-box .btn-secondary{ display:inline-flex; }
.req{ color: var(--color-error-text); }
/* Було правило .opt для підпису «(optional)» біля міток полів. Його замінив
.lbl-opt (див. нижче), але саме правило лишилось у файлі і продовжувало
діяти на чіпи-опції калькулятора: текст ставав другорядним сірим замість
основного, а font-weight падав до 400. Два конфліктні .opt на один елемент.
Правило видалено, у розмітці воно більше нікому не належить. */
.field-error{ display:block; margin-top:6px; color: var(--color-error-text); font-size:.85rem; }
.field input[aria-invalid="true"]{ border-color: var(--color-error); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.license-note{ display:block; margin-top:6px; font-weight:400; font-size:.84rem;
color: var(--color-text-secondary); }
.license-strip{
margin-top: 48px; display:flex; align-items:center; justify-content:center; gap:10px;
padding: 16px 20px; background: var(--color-blue-light); border-radius: var(--radius-card);
font-size:.92rem; color: var(--color-blue-dark); font-weight:600; text-align:center; flex-wrap:wrap;
}
@media (max-width: 900px){ .why-grid{ grid-template-columns: 1fr; } }
/* ---------- Process ---------- */
.process-list{ margin-top: 44px; display:flex; flex-direction:column; }
/* ДОВЖИНА РЯДКА. Виміряно на 1280px: абзаци кроків процесу йшли по 1054px
завширшки, тобто 120-124 символи в рядку; відповіді FAQ - 107-112; текст
SEO-блоку - 97-110. Комфортна норма - 45-80 символів (WCAG 1.4.8 ставить
стелю 80 для AAA): довший рядок змушує око шукати початок наступного.
Обмежуємо саме МІРУ тексту, а не контейнери: сітки, таблиці й картки
лишаються на повну ширину.
⚠️ ВИПРАВЛЕНО 14.09.2026. Обмеження стояло на КОЖНОМУ АБЗАЦІ, а не на
колонці. Заголовки, списки й таблиці поруч лишались на повну ширину блоку,
тому права межа тексту стрибала всередині однієї секції:
.seo-copy h2 - 772px, абзац - 595px (порожнеча 177px справа)
.prose h2 - 780px, абзац - 614px (166px)
юридичні h2 - 780px, абзац - 552px (228px)
.process-item заголовок - 1054px, абзац - 614px (440px)
Візуально блок читався як зсунутий ліворуч. Плюс .cred-note мав
text-align:center при margin:18px 0 0, тобто центрований текст усередині
коробки, притиснутої до лівого краю.
Тепер міра стоїть на БОКСІ і береться з токена --measure. */
.process-item > div{ max-width: var(--measure); }
/* .cred-note - підпис під таблицею, кегль .85rem. На повній мірі 620px це
81 символ, тобто на один більше за стелю WCAG 1.4.8. Тому подвійне
обмеження: не ширше за колонку і не довше за 72 символи. */
.cred-note{ max-width: min(var(--measure), 72ch); }
/* Відповідь FAQ має власний padding 0 22px, а бокс border-box. */
.faq-item .faq-answer{ max-width: calc(var(--measure) + 44px); }
.process-item{ display:grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid var(--color-border); }
.process-item:first-child{ border-top:none; }
.process-num{
width:44px; height:44px; border-radius:50%; border:2px solid var(--color-blue-dark);
color: var(--color-blue-dark); display:flex; align-items:center; justify-content:center;
font-weight:700;
}
.process-item h3{ margin-bottom:4px; }
.process-item p{ color: var(--color-text-secondary); margin-bottom:0; }
/* ---------- Price list (Services) ---------- */
.price-table-wrap{ overflow-x:auto; border:1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
table.price-table{ width:100%; border-collapse:collapse; min-width: 560px; background:#fff; }
table.price-table th, table.price-table td{ padding: 14px 20px; text-align:left; font-size:.95rem; border-bottom:1px solid var(--color-border); }
table.price-table th{ background: var(--color-blue-light); color: var(--color-blue-dark); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
table.price-table tbody tr:last-child td{ border-bottom:none; }
table.price-table tbody tr:hover{ background: var(--color-surface); }
table.price-table td.price-cell{ font-weight:700; color: var(--color-blue-dark); white-space:nowrap; }
/* Посилання, яке само по собі заповнює комірку або абзац, не підпадає під
виняток «inline у реченні» (WCAG 2.5.8): 17px висоти замало. Паддинг
компенсується відʼємним margin, тож сітка й висота рядків не їдуть. */
table.price-table td a,
.contact-channels .channel p > a:only-child{
display:inline-block; padding:4px 6px; margin:-4px -6px; border-radius:6px;
}
.price-note{ text-align:center; margin-top:18px; font-size:.9rem; color: var(--color-text-secondary); }
.addons-toggle-wrap{ margin-top: 30px; }
/* На off-white тлі --color-blue дає 4.24:1 - трохи нижче порога. */
.addons-summary{ cursor:pointer; font-weight:600; color: var(--color-blue-dark); font-size:.95rem; list-style:none;
min-height:24px; display:flex; align-items:center; gap:5px; }
.addons-summary::-webkit-details-marker{ display:none; }
.addons-summary::before{ content:'+'; }
details[open] .addons-summary::before{ content:'–'; }
.addons-list{ list-style:none; margin: 18px 0 0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.addons-list li{ display:flex; justify-content:space-between; gap:16px; padding: 10px 0; border-bottom:1px dashed var(--color-border); font-size:.92rem; color: var(--color-text-secondary); }
.addons-list li b{ color: var(--color-text); font-weight:700; white-space:nowrap; }
@media (max-width:700px){ .addons-list{ grid-template-columns: 1fr; } }
/* ---------- Reviews ---------- */
/* Було: flex + space-between + align-items:flex-end. Три наслідки, усі видимі:
(1) .section-head несе margin:0 auto + text-align:center, тож заголовок
центрувався всередині свого 640px боксу, а сам бокс стояв ліворуч -
H2 опинявся на 147px лівіше центру контейнера, на відміну від решти секцій;
(2) flex-end вирівнює краї БОКСІВ, а .section-head має margin-bottom:8px,
тож рядок рейтингу сідав на 8px нижче заголовка і прилипав до карток;
(3) власного відступу знизу блок не мав узагалі.
Стало: центрована колонка, як усі інші .section-head на сайті. */
.reviews-top{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:30px; }
.reviews-top .section-head{ margin-bottom:0; }
.reviews-top .eyebrow{ color: var(--color-orange-light); }
/* «5.0 ·» було голим текстовим вузлом між двома flex-елементами: анонімний
елемент діставав gap з обох боків, тож навколо оцінки зяяли широкі проміжки,
а роздільник висів у повітрі. Тепер кожна частина - окремий елемент. */
.rating-line{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:.95rem; }
.rating-line .stars{ font-size:1rem; }
/* .7, а не .5: на .5 крапка давала 3.26:1 на синьому тлі. */
.rating-line .rl-dot{ opacity:.7; font-weight:400; }
.rating-line a{ color:#fff; text-decoration:underline; text-underline-offset:3px;
display:inline-block; padding:3px 4px; margin:-3px -4px; border-radius:6px; }
.rating-line a:hover{ text-decoration-thickness:2px; }
/* ══════════════ СТОРІНКА ВІДГУКІВ ══════════════ */
.rating-line--light{ justify-content:center; color: var(--color-text); }
.rating-line--light .stars{ color: var(--color-star); }
.rating-line--light a{ color: var(--color-blue-dark); }
.rv-filters{ display:flex; flex-direction:column; gap:16px; margin-bottom:30px;
padding:22px; background: var(--color-blue-light); border-radius: var(--radius-card); }
.rv-row{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.rv-row--end{ justify-content:space-between; align-items:center; }
.rv-label{ flex:none; min-width:130px; padding-top:7px; font-size:.8rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color: var(--color-blue-dark); }
.rv-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rv-chip{ display:inline-flex; align-items:center; gap:7px; background:#fff;
border:1px solid var(--color-border); border-radius:999px; padding:7px 14px;
font: inherit; font-size:.85rem; font-weight:600; color: var(--color-text);
cursor:pointer; transition: background .15s, border-color .15s, color .15s; }
.rv-chip:hover{ border-color: var(--color-border-interactive); }
.rv-chip[aria-pressed="true"]{ background: var(--color-blue-dark); border-color: var(--color-blue-dark); color:#fff; }
.rv-count{ font-size:.78rem; opacity:.72; font-variant-numeric: tabular-nums; }
.rv-chip[disabled]{ opacity:.4; cursor:not-allowed; }
.rv-status{ margin:0; font-size:.9rem; color: var(--color-text-secondary); }
/* ⚠️ ВИПРАВЛЕНО 14.09.2026. Було minmax(320px,1fr). На екрані 320px контейнер
віддає 288px (16px падінгу з боків), а колонка вимагала 320px - картка
вилазила на 336px і всі 7 сторінок відгуків отримували горизонтальний скрол
саме на пороговій ширині WCAG 1.4.10. min(320px,100%) знімає вимогу, коли
місця менше за картку; на всіх ширинах від 336px поведінка не змінюється. */
.rv-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(320px,100%),1fr)); gap:18px; }
.rv-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card);
padding:22px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; }
.rv-card p{ font-size:.92rem; color: var(--color-text-secondary); margin:10px 0 14px; line-height:1.65; }
.rv-foot{ margin-top:auto; }
.rv-foot b{ display:block; font-size:.9rem; }
.rv-meta{ font-size:.78rem; color: var(--color-text-secondary); }
.rv-empty{ text-align:center; padding:40px 0; color: var(--color-text-secondary); }
.link-btn--dark{ color: var(--color-blue-dark); }
/* ══════════════ ПОКРОКОВИЙ РЕЖИМ КАЛЬКУЛЯТОРА ══════════════
Крок ховаємо СВОЇМ класом, а не атрибутом hidden: hidden на .calc-q вже
використовує applyVisibility() движка, і два господарі одного атрибута
неминуче почали б перетирати один одного. */
.wiz-step-off{ display:none !important; }
.wiz-bar{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
/* Підпис до кроку вибору гілки: без нього три картки виглядали як банер, а не
як питання. Формат той самий, що в