/* ============================================================
PLAZER — общий слой оформления.
Подключается на всех страницах из /inc/header.php ПОСЛЕДНИМ,
поэтому уточняет существующие страничные стили, не заменяя их.
Дизайн приведён к шаблону plazer: палитра, шрифт Exo 2,
ритм секций, кнопки и карточки. Разметка страниц не менялась.
============================================================ */
/* Шрифт подключается отдельным в /inc/header.php —
так он начинает грузиться параллельно, а не после этого файла. */
/* Skip-link: перша фокусована ланка на сторінці, веде одразу до .
Поза фокусом ховається за екран — не займає місця і не видно оком,
але лишається доступною для клавіатури й скрінрідерів. */
.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 10001;
padding: 10px 16px;
background: var(--theme-color);
color: #fff;
border-radius: var(--radius);
text-decoration: none;
font-weight: 600;
transition: top 0.2s;
}
.skip-link:focus {
top: 8px;
}
/* Банер згоди на cookie (GA4). Показує/ховає common.js —
тут лише вигляд, [hidden] керує видимістю.
Явний display:none для [hidden] обов'язковий: специфічність
.cookie-banner{display:flex} дорівнює браузерному [hidden]{display:none},
а авторські стилі завжди перебивають user-agent — без цього рядка
банер лишався б видимим навіть після встановлення hidden. */
.cookie-banner[hidden] {
display: none;
}
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 9500;
max-width: 640px;
margin: 0 auto;
padding: 18px 20px;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: var(--white-color);
box-shadow: 0 12px 32px rgba(8, 40, 50, .18);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 20px;
}
.cookie-banner__text {
margin: 0;
flex: 1 1 260px;
font-size: 14px;
line-height: 1.5;
color: var(--body-color);
}
.cookie-banner__text a {
color: var(--theme-text);
text-decoration: underline;
}
.cookie-banner__actions {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
@media (max-width: 480px) {
.cookie-banner { flex-direction: column; align-items: stretch; }
/* flex: 1 1 260px в .cookie-banner__text — это ширина для десктопной
горизонтальной раскладки; в колонке та же величина растягивает блок
текста по высоте. Сбрасываем на размер по контенту. */
.cookie-banner__text { flex: 0 0 auto; }
.cookie-banner__actions { flex-wrap: wrap; }
.cookie-banner__actions .btn { flex: 1 1 auto; }
}
/* Поява карток/статистики при прокрутці (assets/js/common.js додає клас
.reveal і знімає прихованість через IntersectionObserver). Прихованість
діє лише під .js-reveal на — його ставить сам скрипт, тож без
JS чи якщо він не встиг спрацювати, контент завжди видимий одразу. */
.js-reveal .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .5s ease, transform .5s ease;
}
.js-reveal .reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
1. ПАЛИТРА И ПЕРЕМЕННЫЕ (значения из шаблона)
============================================================ */
:root {
/* Основной цвет — «морская волна».
Оттенки подобраны по контрасту: белый текст на --theme-color даёт 4.5:1,
а --theme-text на белом — 5.6:1, то есть проходят стандарт доступности. */
--theme-color: #0b8299; /* основной: кнопки, заливки, активные состояния */
--theme-dark: #08657a; /* наведение и нажатие */
--theme-bright: #0e9cb8; /* светлее — иконки и декор */
--theme-text: #0a7285; /* мелкий акцентный текст на белом */
--theme-color2: #145e75; /* глубокий морской для второстепенных акцентов */
--title-color: #080809; /* заголовки */
--body-color: #54595f; /* основной текст */
--smoke-color: #f5f5f5; /* нейтральная светлая заливка */
--smoke-color2: #eef7fa; /* холодный голубоватый фон секций */
--border-color: #e6ecef;
--white-color: #fff;
/* прежние переменные сайта — переопределены, чтобы старые правила
подхватили новый цвет без правки шести таблиц стилей */
--accent: #0b8299;
--accent-2: #0b8299;
--title-font: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
--body-font: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
--main-container: 1224px;
--section-space: 60px;
--radius: 8px; /* было 4px — плоские скругления читались как шаблон 2018 года */
--radius-lg: 14px; /* карточки, панели (about-qms, equip-mini) */
/* Типографічна шкала на clamp(): розмір росте плавно між в'юпортами,
тому частина ручних медіа-запитів під заголовки (900px/520px і т.п.)
стає непотрібною — самі значення вже адаптивні. */
--step-1: clamp(1.0625rem, .95rem + .4vw, 1.25rem); /* 17 → 20px */
--step-2: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); /* 20 → 26px — .about-col h3 */
--step-3: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem); /* 26 → 36px — h2 секций */
--step-4: clamp(2rem, 1.55rem + 2.1vw, 3rem); /* 32 → 48px — h1 сторінки */
}
/* ============================================================
2. ТИПОГРАФИКА
============================================================ */
html, body {
font-family: var(--body-font);
font-size: 16px;
line-height: 26px;
color: var(--body-color);
-webkit-font-smoothing: antialiased;
}
/* Шапка стала sticky (блок 3) — без цього перехід на #about,
#contact-form і подібні якорі ховав би початок блока під нею. */
html { scroll-padding-top: 112px; }
h1, h2, h3, h4, h5, h6,
.tech-title, .home-title, .card-title, .tc-title,
.equip-title, .equip-mini__title, .doc-card__title, .dev-card__title {
font-family: var(--title-font);
color: var(--title-color);
font-weight: 600;
line-height: 1.25;
}
p { line-height: 1.65; }
/* Значок ® рядом с названием.
Раньше стояло line-height: 0 и vertical-align: text-top — из-за этого
значок задирало к верху строки, и на переносе он повисал далеко от
слова PLAZER. Теперь смещаем его относительным позиционированием:
высоту строки это не меняет, а значок остаётся вплотную к букве R. */
.reg,
h1 .reg, h2 .reg, h3 .reg {
font-size: .48em;
line-height: 1;
vertical-align: baseline;
position: relative;
top: -0.55em;
margin-left: .02em;
font-weight: 600;
opacity: .85;
}
a { color: inherit; }
a:hover { color: var(--theme-color); }
::selection { background: var(--theme-color); color: #fff; }
/* ============================================================
3. ШАПКА
============================================================ */
.header {
/* sticky лишає .header точкою відліку для шторки каталогу (nav-mega
позиціонується absolute; top:100% відносно неї) так само, як
раніше давав relative — це не ламається. z-index і фон обов'язкові:
інакше контент сторінки при скролі проступав би крізь шапку. */
position: sticky;
top: 0;
z-index: 500;
background: var(--white-color);
border-bottom: 1px solid var(--border-color);
/* Висота смуги задана окремо і не залежить від знака.
Раніше шапка просто обтягувала логотип: зменшуєш знак —
осідає вся смуга, і знак виглядає загубленим. Тепер смуга
тримає свою висоту, а знак стоїть у ній із запасом повітря. */
min-height: 96px;
box-sizing: border-box;
transition: min-height .2s ease, box-shadow .2s ease;
}
/* Компактний режим після невеликої прокрутки — клас додає common.js.
96px → 64px. Логотип зменшуємо тільки там, де він і без того великий
(від 1281px, де стоїть 96/42px) — нижче цієї межі логотип уже й так
стиснутий під довге меню (24-36px, розраховано під польську мову,
див. коментар біля .main-nav), і флет-значення тут зламало б той
розрахунок. */
body.is-scrolled .header { min-height: 64px; box-shadow: 0 4px 16px rgba(8, 40, 50, .08); }
@media (min-width: 1281px) {
body.is-scrolled .header .logo img { height: 40px; }
}
.main-nav a {
font-family: var(--body-font);
font-weight: 600;
color: var(--title-color);
letter-spacing: .01em;
position: relative;
}
.main-nav a:hover { color: var(--theme-color); }
/* Підкреслення "виростає" зліва направо при наведенні/фокусі —
right від 100% до 0 замість width, щоб не смикало сусідні пункти. */
.main-nav a::after {
content: '';
position: absolute;
left: 0;
right: 100%;
bottom: -4px;
height: 2px;
background: var(--theme-color);
transition: right .25s ease;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
right: 0;
}
@media (prefers-reduced-motion: reduce) {
.main-nav a::after { transition: none; }
}
/* ------------------------------------------------------------
Меню всегда в ОДНУ строку — от 1025px и выше.
Ниже 1025px работает бургер, как и раньше.
Пунктов семь, самый длинный набор — польский. Чтобы строка не
переносилась, на каждом шаге согласованно уменьшаются: боковой
отступ шапки, логотип, размер шрифта и промежутки, а начиная
с 1500px кнопка «Зв’язатись з нами» сжимается до иконки.
Значения подобраны расчётом ширины строки для uk/en/pl.
------------------------------------------------------------ */
/* Элементы шапки не сжимаются: иначе flex ужал бы меню и текст полез бы
друг на друга вместо честного переноса. Ширины рассчитаны так, что
всё помещается вплоть до 1025px. */
.header > .logo,
.header > .main-nav,
.header > #langSwitch {
flex: none;
}
.main-nav > ul {
flex-wrap: nowrap; /* переносов быть не должно */
justify-content: flex-end;
column-gap: 32px;
}
.main-nav a {
white-space: nowrap;
font-size: 16px;
}
/* ------------------------------------------------------------
КНОПКА «ЗВ’ЯЗАТИСЬ З НАМИ» — один вид на всіх сторінках.
У страничных таблиц стилей своё описание этой кнопки, и в разных
файлах оно разное: где-то padding 12/24 и высота 44, где-то 12/20,
где-то без высоты вообще. Часть из них написана как
«.cta-header .btn-contact», а это специфичнее одиночного класса —
поэтому общий слой их не перебивал и кнопка гуляла от страницы
к странице. Ниже селекторы такой же силы, файл грузится последним,
значит выигрывает он.
------------------------------------------------------------ */
.btn-contact,
.cta-header .btn-contact,
#langSwitch .btn-contact,
header .btn-contact {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
height: 48px;
min-width: 150px;
padding: 0 26px;
border: 0;
border-radius: var(--radius);
background: var(--theme-color);
color: var(--white-color);
font-family: var(--body-font);
font-size: 14px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: .02em;
white-space: nowrap;
cursor: pointer;
transition: background-color .25s;
}
.btn-contact:hover,
.cta-header .btn-contact:hover,
#langSwitch .btn-contact:hover,
header .btn-contact:hover {
background: var(--theme-dark);
color: var(--white-color);
}
/* ------------------------------------------------------------
ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА — тоже один вид на всех страницах.
Та же история, что и с кнопкой: в каждой страничной таблице своё
описание. На «Послугах», например, стояли padding 0 40px 0 12px
и своя стрелка через appearance: none, на остальных — padding 0 12px
и системная стрелка, которая к тому же в разных ОС выглядит по-разному.
Здесь описываем всё целиком, включая собственную стрелку.
------------------------------------------------------------ */
.lang-select,
.cta-header .lang-select,
#langSwitch .lang-select {
box-sizing: border-box;
height: 48px;
padding: 0 38px 0 14px;
border: 1px solid #e2e6ee;
border-radius: var(--radius);
background-color: #fff;
color: var(--title-color);
font-family: var(--body-font);
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
outline: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3l5 5 5-5' stroke='%23080809' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
}
.lang-select:focus-visible {
border-color: var(--theme-color);
box-shadow: 0 0 0 3px rgba(11, 130, 153, .15);
}
.lang-switch { display: flex; align-items: center; margin: 0; }
/* иконка в кнопке нужна только в компактном режиме */
.btn-contact__icon { display: none; flex: none; }
/* ------------------------------------------------------------
ПОИСК ПО САЙТУ
------------------------------------------------------------ */
/* Иконка в шапке. Ниже 1280px прячем: там семь пунктов меню и так
держатся в одну строку впритык. Поиск в этом случае доступен
из мобильного меню и из подвала. */
.site-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 48px;
flex: none;
color: var(--title-color);
transition: color .2s;
}
.site-search-btn:hover { color: var(--theme-color); }
@media (max-width: 1280px) {
.site-search-btn { display: none; }
}
/* Поле поиска на странице результатов */
.site-search {
display: flex;
gap: 10px;
max-width: 620px;
margin: 0 0 12px;
}
.site-search input[type="search"] {
flex: 1;
min-width: 0;
box-sizing: border-box;
height: 48px;
padding: 0 16px;
border: 1px solid #e2e6ee;
border-radius: var(--radius);
font-family: var(--body-font);
font-size: 16px;
color: var(--title-color);
background: #fff;
}
.site-search input[type="search"]:focus {
outline: none;
border-color: var(--theme-color);
box-shadow: 0 0 0 3px rgba(11, 130, 153, .15);
}
@media (max-width: 480px) {
.site-search { flex-direction: column; }
.site-search .btn { width: 100%; }
}
/* Пункт поиска в мобильном меню */
.mobile-menu__search { font-weight: 600; }
/* ------------------------------------------------------------
СРАВНЕНИЕ ОБОРУДОВАНИЯ
------------------------------------------------------------ */
.btn-compare.is-active {
background: var(--theme-color);
border-color: var(--theme-color);
color: #fff;
}
/* Плавающая панель снизу: сколько позиций выбрано и переход к таблице */
.compare-bar {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 9000;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--border-color);
box-shadow: 0 12px 34px rgba(8, 14, 28, .18);
max-width: calc(100vw - 32px);
}
.compare-bar__count { font-size: 14px; color: var(--body-color); white-space: nowrap; }
.compare-bar__count strong { color: var(--title-color); }
.compare-bar .btn { height: 40px; padding: 0 18px; font-size: 13px; }
@media (max-width: 520px) {
.compare-bar { flex-direction: column; gap: 10px; left: 16px; right: 16px; transform: none; max-width: none; }
.compare-bar .btn { width: 100%; }
}
/* Таблица сравнения */
.cmp-actions { display: flex; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
width: 100%;
border-collapse: collapse;
min-width: 560px;
font-size: 15px;
}
.cmp-table th,
.cmp-table td {
border: 1px solid var(--border-color);
padding: 12px 14px;
vertical-align: top;
text-align: left;
}
/* первый столбец — названия параметров, держим его читаемым */
.cmp-table tbody th {
width: 30%;
min-width: 180px;
background: var(--smoke-color2);
font-weight: 600;
color: var(--title-color);
}
.cmp-table thead th { background: #fff; vertical-align: top; }
.cmp-table thead th[scope="row"] { background: var(--smoke-color2); }
.cmp-head { display: block; }
.cmp-head__media {
display: block;
width: 100%;
max-width: 180px;
aspect-ratio: 4 / 3;
background: var(--smoke-color2);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 10px;
}
.cmp-head__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.cmp-head__title {
display: block;
font-family: var(--title-font);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--title-color);
}
.cmp-head:hover .cmp-head__title { color: var(--theme-text); }
.cmp-head__type {
display: block;
margin-top: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--theme-text);
}
.cmp-remove {
margin-top: 10px;
padding: 0;
border: 0;
background: none;
color: #8a9099;
font: inherit;
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
.cmp-remove:hover { color: var(--title-color); }
.cmp-none { color: #b9c0c8; }
.cmp-note { margin-top: 16px; font-size: 13px; color: #8a9099; }
/* ≤1700px */
@media (max-width: 1700px) {
.logo img { height: 96px; }
.main-nav > ul { column-gap: 24px; }
.main-nav a { font-size: 15px; }
}
/* ≤1500px — кнопка становится компактной, только иконка */
@media (max-width: 1500px) {
.logo img { height: 84px; }
.main-nav > ul { column-gap: 20px; }
.main-nav a { font-size: 15px; }
/* селекторы повторяют базовый блок — иначе он перебьёт компактный режим */
.btn-contact,
.cta-header .btn-contact,
#langSwitch .btn-contact,
header .btn-contact {
min-width: 0;
width: 48px;
height: 48px;
padding: 0;
}
.btn-contact__icon { display: block; }
/* текст остаётся для скринридеров, но не занимает места */
.btn-contact__text {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
/* ≤1280px */
@media (max-width: 1280px) {
.logo img { height: 72px; }
.main-nav > ul { column-gap: 16px; }
.main-nav a { font-size: 14px; }
}
/* ≤1150px — самый плотный режим перед бургером.
Здесь строка из семи пунктов на польском доходила до предела:
при 1025px расчётная ширина шапки превышала экран, и меню
переносилось на вторую строку. Чтобы этого не было, на этом шаге
дополнительно: шрифт мельче, промежутки уже, переключатель языка
компактнее, а иконка поиска убирается — она есть и в мобильном
меню, и в подвале, поэтому ничего не теряется. */
@media (max-width: 1150px) {
.main-nav > ul { column-gap: 6px; }
/* Было 11.5px — мельче подписей в подвале. Подняли до предела,
при котором строка на польском (самые длинные пункты) ещё не
переносится на 1025px — см. комментарий выше. Больше 12.5px
здесь безопасно не поднять без переноса строки. */
.main-nav a { font-size: 12.5px; }
.site-search-btn { display: none; }
.lang-select,
.cta-header .lang-select,
#langSwitch .lang-select {
padding: 0 26px 0 8px;
background-position: right 7px center;
font-size: 13px;
}
}
/* Ниже 1024px — бургер (правила в основном CSS), кнопка снова с текстом */
@media (max-width: 1024px) {
.btn-contact,
.cta-header .btn-contact,
#langSwitch .btn-contact,
header .btn-contact {
width: auto;
height: 48px;
min-width: 150px;
padding: 0 26px;
}
.btn-contact__icon { display: none; }
.btn-contact__text {
position: static;
width: auto; height: auto;
margin: 0;
overflow: visible;
clip: auto;
clip-path: none;
}
}
/* Мобильное меню: длинные пункты переносим по словам */
.mobile-menu__list a {
white-space: normal;
line-height: 1.35;
font-family: var(--body-font);
font-weight: 600;
}
/* Переключатель языка описан выше, в блоке шапки */
/* ============================================================
4. КНОПКИ (стиль шаблона: UPPERCASE, 14/700, радиус 4)
============================================================ */
/* Кнопка в шапке описана выше отдельным блоком — здесь только обычные .btn */
.btn,
.doc-card__actions .btn,
.dev-card__attach .btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-family: var(--body-font);
font-size: 14px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: .02em;
border-radius: var(--radius);
height: 48px; /* одна высота у всех кнопок сайта */
min-height: 0;
padding: 0 26px;
transition: background-color .25s, color .25s, box-shadow .25s, transform .2s ease;
}
.btn {
border: 1px solid var(--border-color);
background: var(--white-color);
color: var(--title-color);
}
.btn:hover {
background: var(--title-color);
border-color: var(--title-color);
color: var(--white-color);
box-shadow: none;
transform: translateY(-1px);
}
.btn-primary,
.mobile-menu__cta {
background: var(--theme-color);
border: 0;
color: var(--white-color);
min-width: 150px;
}
.mobile-menu__cta { height: 48px; }
.btn-primary:hover,
.mobile-menu__cta:hover {
background: var(--theme-dark);
color: var(--white-color);
filter: none;
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.btn:hover,
.btn-primary:hover,
.mobile-menu__cta:hover { transform: none; }
}
.btn-ghost {
background: transparent;
border: 1px solid var(--border-color);
}
/* ============================================================
5. РИТМ СЕКЦІЙ — див. блок 21, там зібрано все разом
============================================================ */
.home-section .home-title,
.tech-title {
font-size: var(--step-3);
letter-spacing: -0.01em;
font-weight: 600;
color: var(--title-color);
}
/* Заголовок-«надзаголовок» (Інновації в Hero) — как .sub-title шаблона.
Здесь и ниже для мелкого текста берётся --theme-text: он темнее
и читается на белом с запасом по контрасту. */
/* ------------------------------------------------------------
Банер на головній: фото цеху на всю ширину вікна.
Висота йде за пропорціями знімка (2000×841), тож на екранах
до ~1800 px він видно повністю. Ширше смуга зайняла б майже
весь екран, тому висота обмежена 760 px; підрізається при цьому
низ кадру (підлога), а рука робота лишається в кадрі.
------------------------------------------------------------ */
.hero-photo {
position: relative;
display: block;
line-height: 0; /* прибирає щілину під картинкою */
background: var(--smoke-color2);
overflow: hidden; /* ховає краї фото під час zoom-анімації нижче */
}
.hero-photo img {
display: block;
width: 100%;
height: auto;
max-height: 760px;
object-fit: cover;
object-position: center top;
animation: hero-zoom 6s ease-out both;
}
/* Легкий Ken Burns на вході: фото повільно "здувається" з 1.06 до 1.
Разова анімація при завантаженні, без прив'язки до скролу —
так дешевше й без ризику джанку на scroll-обробнику. */
@keyframes hero-zoom {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero-photo img { animation: none; }
}
/* Плавний перехід від фото до блоку «Про нас»: низ знімка розчиняється
в кольорі секції під ним (--smoke-color2 — той самий фон, що й
у .about, тому стик непомітний). Відсоток, а не фіксовані пікселі,
щоб пропорція розтяжки не «стрибала» на вузьких екранах, де висота
картинки менша. */
.hero-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 72%, var(--smoke-color2) 100%);
pointer-events: none;
}
/* На вузьких екранах height:auto (пропорційно до фото 2000×841) давав
лише ~158px висоти — банер ставав тонкою смужкою, на якій не видно,
що на фото. Задаємо мінімальну висоту й даємо картинці її заповнити;
fallback на vh для браузерів без підтримки svh. */
@media (max-width: 640px) {
.hero-photo { height: 42vh; height: 42svh; }
.hero-photo img {
height: 100%;
max-height: none;
}
}
/* Заголовок сторінки — перший рядок блоку «Про нас». Раніше тут стояв
h2 із розміром 36px (style.css); лишаємо той самий вигляд, змінився
лише рівень заголовка. */
.about-intro .about-title {
font-family: var(--title-font);
font-size: var(--step-4);
letter-spacing: -0.01em;
font-weight: 600;
line-height: 1.15;
margin: 0 0 16px;
color: var(--title-color);
}
/* Ручні брейкпоінти під .about-title (900px/520px) прибрані:
clamp() у --step-4 уже дає плавний розмір на всіх ширинах. */
/* Чередование фона: секция с этим классом идёт на холодной заливке,
как секции шаблона на --smoke-color2. Отступы — в блоке 21. */
.home-section--tint { background: var(--smoke-color2); }
/* Цифры «20+ / 50+ / 100+».
font-size задає style.css (40px) — тут лише виправляємо line-height:
успадкований від body 26px був нижчим за саму цифру, вона «вилазила»
за межі власного рядка. */
.stat-value {
color: var(--theme-color);
font-family: var(--title-font);
font-weight: 700;
line-height: 1.05;
}
.stat-label { color: var(--title-color); font-weight: 600; }
.stat-desc { color: var(--body-color); }
/* Блок «Про нас» на холодной заливке */
.about { background: var(--smoke-color2); }
.about-motto { color: var(--title-color); }
.about-subtitle, .about-text p { color: var(--body-color); }
/* На великих екранах (>1600px) .about-text (flex-basis 50%, style.css)
розтягувалась ширше за комфортну довжину рядка. Текст не скорочували —
лише обмежили ширину абзацу. */
.about-text p { max-width: 68ch; }
/* Блок «Міжнародна співпраця та кадри» йшов у тому самому суцільному
потоці, що й перший .about-content — тонка лінія зверху відділяє
його як окрему тему, не змінюючи жодного слова тексту. */
.about-content--rev {
padding-top: 40px;
border-top: 1px solid var(--border-color);
}
.map-section h2 { font-size: 30px; }
/* ============================================================
6. КАРТОЧКИ
============================================================ */
.card,
.equip-mini,
.tech-card,
.doc-card,
.dev-card,
.office-card {
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: var(--white-color);
transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card:hover,
.equip-mini:hover,
.tech-card:hover,
.doc-card:hover,
.dev-card:hover,
.office-card:hover {
box-shadow: 0 10px 30px rgba(8, 14, 28, .08);
transform: translateY(-2px);
border-color: var(--theme-color);
}
.card-title a:hover,
.tc-title a:hover,
.equip-mini__title a:hover {
color: var(--theme-text);
}
.card-meta,
.tc-type,
.equip-mini__meta,
.doc-card__meta {
color: var(--theme-text);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
}
.card-desc,
.tc-desc {
color: var(--body-color);
}
/* ------------------------------------------------------------
ИЗОБРАЖЕНИЯ В КАРТОЧКАХ ПОКАЗЫВАЮТСЯ ЦЕЛИКОМ
Раньше стояло object-fit: cover — картинка заполняла блок и всё
лишнее обрезалось. Для фотостудийных снимков это нормально, но у нас
в каталоге вперемешку вертикальные снимки приборов, широкие схемы и
инфографика: у них срезало половину кадра.
Теперь contain — изображение вписывается целиком, а свободное место
заполняет светлая подложка. Пропорции блоков подобраны так, чтобы
пустых полей оставалось поменьше.
------------------------------------------------------------ */
.card-media,
.tc-media,
.equip-mini__media {
overflow: hidden;
aspect-ratio: 4 / 3; /* вместо 16/9: ближе к пропорциям снимков */
background: var(--smoke-color2);
}
.card-media img,
.tc-media img,
.equip-mini__media img {
width: 100%;
height: 100%;
object-fit: contain; /* показываем кадр целиком */
padding: 10px; /* чтобы картинка не липла к краям */
transition: transform .4s ease;
}
/* Лёгкий зум при наведении — приём из шаблона */
.card:hover .card-media img,
.tech-card:hover .tc-media img,
.equip-mini:hover .equip-mini__media img {
transform: scale(1.04);
}
/* ============================================================
7. ФИЛЬТРЫ И ПАГИНАЦИЯ
============================================================ */
.tech-filters input,
.tech-filters select {
font-family: var(--body-font);
border-radius: var(--radius);
border: 1px solid #e2e6ee;
}
.tech-filters input:focus,
.tech-filters select:focus {
border-color: var(--theme-color);
box-shadow: 0 0 0 3px rgba(250, 132, 43, .15);
outline: none;
}
.results-meta { color: var(--body-color); }
.page-link {
font-family: var(--body-font);
font-weight: 600;
border-radius: var(--radius);
}
.page-link.active,
.page-link:hover {
background: var(--theme-color);
border-color: var(--theme-color);
color: var(--white-color);
}
/* ============================================================
8. ПОДВАЛ
============================================================ */
/* Тло підвала — темний відтінок фірмового бірюзового. Він чітко
відділяє кінець сторінки й не сперечається з холодними заливками
секцій вище.
Кольори тексту задані явно всім елементам: у style.css у підвала
свій набір правил, і те, чому не задали колір, ставало невидимим. */
:root {
--footer-bg: #0c3f4c; /* тло підвала */
--footer-bg-alt: #093642; /* нижня смуга */
--footer-text: #cfe3e9; /* звичайний текст і посилання */
--footer-title: #ffffff; /* заголовки колонок */
--footer-line: rgba(255, 255, 255, .14);
}
/* display: block — у style.css підвал був flex-рядком із трьох секцій.
Тепер колонки розкладає .footer__inner, а сама секція лише тримає поля. */
.footer {
display: block;
background: var(--footer-bg);
color: var(--footer-text);
padding-top: 48px;
padding-bottom: 48px;
}
/* Колонки: контакти, представництво, розділи. Ширина колонок однакова,
але навігація підтискається — у неї короткі рядки. */
.footer__inner {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr);
gap: 32px 48px;
max-width: var(--main-container);
margin: 0 auto;
}
.footer__section { min-width: 0; }
.footer__title {
font-family: var(--title-font);
font-size: 17px;
font-weight: 600;
margin: 0 0 14px;
color: var(--footer-title);
}
.footer__name {
margin: 0 0 6px;
font-weight: 600;
color: var(--footer-title);
}
.footer__addr {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.5;
color: var(--footer-text);
}
.footer__contacts {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: var(--footer-text);
}
/* display:inline-block + padding зверху/знизу розширює зону дотику
до ~24px (WCAG 2.5.8) — виміряно було 18px. Від'ємний margin
компенсує додану висоту, тож видимий міжрядковий інтервал не міняється. */
.footer a {
display: inline-block;
padding-block: 4px;
margin-block: -4px;
color: var(--footer-text);
}
.footer a:hover { color: var(--footer-title); text-decoration: underline; }
/* Перелік розділів */
.footer__nav {
margin: 0;
padding: 0;
list-style: none;
font-size: 15px;
line-height: 1.9;
}
/* ---- нижня смуга ---- */
.footer-bottom {
background: var(--footer-bg-alt);
color: var(--footer-text);
border-top: 1px solid var(--footer-line);
}
.footer-bottom a { color: var(--footer-text); }
.footer-bottom__links a {
font-weight: 500;
display: inline-block;
padding-block: 4px;
margin-block: -4px;
}
.footer-bottom__links a:hover { color: var(--footer-title); text-decoration: underline; }
.footer-bottom__info p { margin: 0; }
/* Значки соцмереж. Поки адреси немає, значок приглушений і не клікається:
ряд уже видно, але «мертвого» посилання на # немає. */
.footer-bottom__socials { align-items: center; }
.footer-bottom__socials .social-link {
display: inline-flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border: 1px solid var(--footer-line);
border-radius: 50%;
transition: background-color .2s, border-color .2s, opacity .2s;
}
/* значки намальовані фірмовим бірюзовим — на темному тлі освітлюємо.
У style.css у них стояв grayscale(60%), а при наведенні filter: none —
на темному тлі значок ставав майже невидимим. */
.footer-bottom__socials img,
.footer-bottom__socials img:hover {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
}
.footer-bottom__socials a.social-link:hover {
background: var(--theme-color);
border-color: var(--theme-color);
}
.footer-bottom__socials .social-link--soon {
opacity: .45;
cursor: default;
}
@media (max-width: 900px) {
.footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (max-width: 560px) {
.footer__inner { grid-template-columns: 1fr; gap: 24px; }
}
/* ============================================================
9. ПРЕДСТАВНИЦТВА (страница «Контакти»)
============================================================ */
/* Один ряд сторінки «Контакти»: головний офіс — форма — представництво.
Картки вужчі за форму: у них лише адреса, телефон і пошта. */
.contacts-layout {
display: grid;
grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(230px, 280px);
align-items: start;
gap: 24px;
margin: 0 0 48px;
}
.contacts-layout .contact-form-section { margin: 0; }
.contacts-layout .contact-form { max-width: none; padding: 24px 28px 28px; }
/* Картки в цьому ряду виглядають так само, як панель форми:
та сама заливка, рамка й скруглення. Інакше поруч із великою
формою вони читалися як два порожні прямокутники. */
.contacts-layout .office-card {
padding: 24px;
background: var(--smoke-color2);
}
/* Верхній рядок картки — дрібний підпис ролі. Такий самий відступ
зверху, як у заголовка форми, щоб три колонки почалися однаково. */
.contacts-layout .office-card__role,
.contacts-layout .contact-form > h2 { margin-top: 0; }
.contacts-layout .contact-form > h2 { margin-bottom: 6px; }
.contacts-layout .contact-form-lead { margin: 0 0 20px; }
/* Назва представництва під країною */
.office-card__name {
margin: 4px 0 0;
font-size: 15px;
font-weight: 600;
color: var(--title-color);
}
/* Планшет: форма займає всю ширину, картки стають поруч над нею.
Порядок у розмітці лишається логічним для читачів з екранного диктора. */
@media (max-width: 1100px) {
.contacts-layout { grid-template-columns: 1fr 1fr; }
.contacts-layout > .office-card:first-child { grid-column: 1; grid-row: 1; }
.contacts-layout > .office-card:last-child { grid-column: 2; grid-row: 1; }
.contacts-layout > .contact-form-section { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
.contacts-layout { grid-template-columns: 1fr; }
.contacts-layout > .office-card:first-child,
.contacts-layout > .office-card:last-child,
.contacts-layout > .contact-form-section { grid-column: auto; grid-row: auto; }
}
.office-card {
display: flex;
flex-direction: column;
padding: 24px;
}
/* Назва країни, під нею дрібний підпис ролі. У головного офісу країни
немає — підпис ролі стає першим рядком картки. */
.office-card__country {
font-family: var(--title-font);
font-size: 20px;
font-weight: 600;
margin: 0 0 2px;
color: var(--title-color);
}
.office-card__role {
margin: 0 0 14px;
font-size: 12px;
font-weight: 600;
color: var(--theme-text);
text-transform: uppercase;
letter-spacing: .03em;
}
/* Підпис над значенням, а не збоку: у вузькій колонці значенню
дістається вся ширина, і адреса з поштою не переносяться посеред слова. */
.office-card dl { margin: 0; font-size: 15px; }
/* Якщо між підписом ролі й контактами стоїть назва — трохи більший відступ */
.office-card__name + dl { margin-top: 14px; }
.office-card dt {
color: #8a9099;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
}
.office-card dd {
margin: 2px 0 0;
color: var(--title-color);
line-height: 1.5;
}
.office-card dd + dt { margin-top: 14px; }
.office-card dd a:hover { color: var(--theme-color); }
.office-card .is-tbd { color: #a8adb5; font-style: italic; }
/* ============================================================
10. СТРАНИЦА «СЕРТИФІКАТИ ТА ПАТЕНТИ»
============================================================ */
.page-lead {
max-width: 720px;
margin: -8px 0 40px;
color: var(--body-color);
font-size: 17px;
line-height: 1.7;
}
.docs-group { margin: 0 0 var(--section-space); }
.docs-group__title {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
margin: 0 0 20px;
}
.docs-group__title::before {
content: "";
width: 10px;
height: 10px;
border-radius: 2px;
background: var(--theme-color);
flex-shrink: 0;
}
.docs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
}
.doc-card {
display: flex;
flex-direction: column;
overflow: hidden;
}
.doc-card__media {
position: relative;
display: block;
aspect-ratio: 3 / 4;
background: var(--smoke-color2);
overflow: hidden;
}
/* Скан документа показываем целиком — обрезать сертификат нельзя */
.doc-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
padding: 8px;
transition: transform .4s ease;
}
/* Той самий легкий зум при наведенні, що й у карток обладнання/технологій */
.doc-card:hover .doc-card__media img {
transform: scale(1.04);
}
.doc-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--smoke-color2);
color: #9aa6bb;
font-family: var(--title-font);
font-size: 34px;
font-weight: 700;
letter-spacing: .08em;
}
.doc-card__badge {
position: absolute;
top: 10px;
right: 10px;
padding: 4px 10px;
border-radius: var(--radius);
background: var(--theme-color);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.doc-card__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
flex: 1;
}
.doc-card__title { font-size: 17px; margin: 0; }
.doc-card__desc { font-size: 14px; color: var(--body-color); line-height: 1.55; margin: 0; }
.doc-card__actions { margin-top: auto; padding-top: 14px; }
.doc-card__actions .btn { width: 100%; }
/* Скан кликабельный — показываем это лупой в углу */
a.doc-card__media { cursor: zoom-in; }
.doc-card__zoom {
position: absolute;
left: 10px;
bottom: 10px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: rgba(255, 255, 255, .92);
color: var(--theme-color);
box-shadow: 0 2px 8px rgba(8, 14, 28, .15);
opacity: 0;
transform: translateY(4px);
transition: opacity .2s, transform .2s;
}
a.doc-card__media:hover .doc-card__zoom,
a.doc-card__media:focus-visible .doc-card__zoom {
opacity: 1;
transform: translateY(0);
}
/* Даты выдачи и окончания */
.doc-card__dates {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
margin: 2px 0 4px;
}
.doc-card__dates div { display: flex; flex-direction: column; }
.doc-card__dates dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
color: #8a9099;
}
.doc-card__dates dd {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--title-color);
}
/* Карточка сертификата шире обычной: скан вертикальный, ему нужно место */
.docs-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* ------------------------------------------------------------
Просмотр скана в полный размер
------------------------------------------------------------ */
.docbox {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 32px 16px;
background: rgba(8, 14, 28, .88);
z-index: 10001;
}
.docbox.is-open { display: flex; }
.docbox__figure {
margin: 0;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.docbox__img {
max-width: min(900px, 100%);
max-height: calc(100vh - 120px);
width: auto;
height: auto;
border-radius: 6px;
background: #fff;
box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.docbox__caption {
color: #fff;
font-size: 14px;
text-align: center;
max-width: 640px;
}
.docbox__close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: background-color .2s;
}
.docbox__close:hover { background: rgba(255, 255, 255, .26); }
@media (max-width: 640px) {
.docbox { padding: 16px 8px; }
.docbox__img { max-height: calc(100vh - 100px); }
}
/* ------------------------------------------------------------
Страница товара: главное медиа и превью — тоже целиком
------------------------------------------------------------ */
.equip-media {
aspect-ratio: 4 / 3; /* вместо 16/9: вертикальные снимки приборов помещаются */
background: var(--smoke-color2);
}
/* Фото вписываем целиком, видео и YouTube оставляем во всю ширину:
у них своё соотношение сторон и обрезать там нечего. */
.equip-media img {
object-fit: contain !important; /* перебивает inline-стиль из скрипта галереи */
padding: 12px;
}
.equip-media video,
.equip-media iframe {
object-fit: contain;
}
.equip-thumbs .thumb img {
object-fit: contain;
padding: 4px;
background: #fff;
}
/* Сторінкова .thumb (Pages/Product_page/style.css) без стану наведення —
курсор pointer є, а візуального відгуку немає. */
.equip-thumbs .thumb {
transition: border-color .2s, transform .15s, box-shadow .2s;
}
.equip-thumbs .thumb:hover {
border-color: var(--theme-color);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(8, 14, 28, .12);
}
@media (prefers-reduced-motion: reduce) {
.equip-thumbs .thumb:hover { transform: none; }
}
/* ------------------------------------------------------------
ХЛЕБНЫЕ КРОШКИ — единый блок на всех страницах
------------------------------------------------------------ */
.crumbs {
margin: 0 0 20px;
font-size: 13px;
color: #8a9099;
}
.crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: 6px; }
/* разделитель рисуем через CSS, чтобы он не попадал в копируемый текст */
.crumbs li + li::before {
content: "";
width: 5px;
height: 5px;
border-top: 1px solid #c3cbd3;
border-right: 1px solid #c3cbd3;
transform: rotate(45deg);
flex: none;
}
/* Увеличиваем зону нажатия без изменения видимого размера строки крошек:
паддинг растягивает кликабельную область, отрицательный margin
компенсирует её в раскладке (WCAG 2.5.5). */
.crumbs a,
.crumbs [aria-current="page"] {
display: inline-block;
padding: 8px 4px;
margin: -8px -4px;
}
.crumbs a { color: #6b7280; }
.crumbs a:hover { color: var(--theme-text); }
.crumbs [aria-current="page"] { color: var(--title-color); font-weight: 600; }
/* Крошки на карточках товара, технологии и услуги собираются отдельно
(частично скриптом), поэтому приводим их к тому же виду. */
.equip-breadcrumbs,
.tech-breadcrumbs {
margin: 0 0 20px !important;
font-size: 13px;
color: #8a9099;
}
.equip-breadcrumbs a,
.tech-breadcrumbs a {
color: #6b7280;
display: inline-block;
padding: 8px 4px;
margin: -8px -4px;
}
.equip-breadcrumbs a:hover,
.tech-breadcrumbs a:hover { color: var(--theme-text); }
.equip-breadcrumbs span,
.tech-breadcrumbs span { color: var(--title-color); font-weight: 600; }
/* ------------------------------------------------------------
«Реалізується на обладнанні» — блок на странице технологии
------------------------------------------------------------ */
.tech-equipment {
margin: 32px 0;
}
.tech-equipment h2 {
font-size: 20px;
margin: 0 0 14px;
}
.tech-equipment__card {
display: flex;
align-items: center;
gap: 18px;
max-width: 560px;
padding: 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: #fff;
transition: box-shadow .25s, transform .25s;
}
.tech-equipment__card:hover {
box-shadow: 0 10px 26px rgba(8, 14, 28, .08);
transform: translateY(-2px);
}
.tech-equipment__media {
flex: none;
width: 120px;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
background: var(--smoke-color2);
overflow: hidden;
}
.tech-equipment__media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
display: block;
}
.tech-equipment__body {
display: flex;
flex-direction: column;
gap: 6px;
}
.tech-equipment__title {
font-family: var(--title-font);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
color: var(--title-color);
}
.tech-equipment__more {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--theme-text);
}
@media (max-width: 520px) {
.tech-equipment__card { flex-direction: column; align-items: flex-start; }
.tech-equipment__media { width: 100%; }
}
/* ------------------------------------------------------------
Связи «комплекс ↔ підсистеми» на странице товара
------------------------------------------------------------ */
.equip-parent {
margin: 0 0 18px;
padding: 10px 14px;
border-left: 3px solid var(--theme-color);
background: var(--smoke-color2);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 14px;
color: var(--body-color);
}
.equip-parent a {
color: var(--theme-text);
font-weight: 600;
}
.equip-parts {
margin: var(--section-space) 0 0;
}
.equip-parts h2 {
font-size: 24px;
margin: 0 0 20px;
}
.equip-parts__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.equip-part {
display: flex;
flex-direction: column;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: box-shadow .25s, transform .25s;
}
.equip-part:hover {
box-shadow: 0 10px 26px rgba(8, 14, 28, .08);
transform: translateY(-2px);
}
.equip-part__media {
display: block;
aspect-ratio: 4 / 3;
background: var(--smoke-color2);
overflow: hidden;
}
.equip-part__media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
padding: 8px;
transition: transform .4s ease;
}
.equip-part:hover .equip-part__media img { transform: scale(1.05); }
.equip-part__title {
padding: 12px 14px 14px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--title-color);
}
.equip-part:hover .equip-part__title { color: var(--theme-text); }
/* ============================================================
11. СТРАНИЦА «ПЕРСПЕКТИВНІ РОЗРОБКИ»
============================================================ */
.dev-list {
display: flex;
flex-direction: column;
gap: 24px;
margin: 0 0 var(--section-space);
}
.dev-card {
display: grid;
grid-template-columns: 320px 1fr;
overflow: hidden;
}
.dev-card__media {
background: var(--smoke-color2);
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
/* В разработках попадаются широкие схемы и скриншоты — показываем целиком */
.dev-card__media img {
width: 100%;
height: 100%;
max-height: 320px;
object-fit: contain;
display: block;
padding: 12px;
transition: transform .4s ease;
}
.dev-card:hover .dev-card__media img {
transform: scale(1.04);
}
.dev-card__media-empty {
color: #9aa6bb;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
text-align: center;
padding: 16px;
}
.dev-card__body { padding: 28px; }
.dev-card__title { font-size: 22px; margin: 0 0 10px; }
.dev-card__status {
display: inline-block;
margin: 0 0 14px;
padding: 4px 12px;
border-radius: var(--radius);
background: var(--smoke-color2);
color: var(--theme-color2);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
}
.dev-card__desc { margin: 0 0 16px; color: var(--body-color); line-height: 1.7; }
.dev-card__attach {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
font-size: 13px;
color: var(--body-color);
}
.dev-card__attach span {
padding: 6px 12px;
border: 1px dashed #d7dce5;
border-radius: var(--radius);
}
@media (max-width: 720px) {
.dev-card { grid-template-columns: 1fr; }
.dev-card__media { min-height: 180px; }
.dev-card__body { padding: 20px; }
}
.dev-cta {
padding: 40px;
border-radius: 8px;
background: var(--smoke-color2);
margin: 0 0 var(--section-space);
}
.dev-cta h2 { margin: 0 0 10px; font-size: 24px; }
.dev-cta p { margin: 0 0 20px; color: var(--body-color); max-width: 620px; }
/* ============================================================
12. ПУСТОЕ СОСТОЯНИЕ РАЗДЕЛА
============================================================ */
.section-empty {
padding: 32px;
border: 1px dashed #d7dce5;
border-radius: 8px;
background: var(--smoke-color2);
color: var(--body-color);
text-align: center;
}
/* ------------------------------------------------------------
«Розділ у розробці» — когда в разделе ещё нет записей.
Используется и на страницах разделов, и в витринах на главной.
------------------------------------------------------------ */
.section-wip {
grid-column: 1 / -1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 48px 32px;
border: 1px dashed #cfe0e8;
border-radius: 10px;
background: var(--smoke-color2);
}
.section-wip__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: var(--theme-color);
box-shadow: 0 2px 10px rgba(11, 130, 153, .12);
margin-bottom: 4px;
}
.section-wip__title {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--title-color);
}
.section-wip__text {
margin: 0;
max-width: 520px;
color: var(--body-color);
line-height: 1.6;
}
.section-wip .btn { margin-top: 10px; }
/* В витринах на главной блок занимает всю ширину ряда */
.cards-grid .section-wip { margin: 0; }
@media (max-width: 640px) {
.section-wip { padding: 32px 20px; }
}
/* ============================================================
13. ФОРМА ОБРАТНОЙ СВЯЗИ
============================================================ */
.contact-form {
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--smoke-color2);
}
.contact-form-section h2 { font-size: 30px; }
.contact-form-lead { color: var(--body-color); }
.cf-field input,
.cf-field textarea {
font-family: var(--body-font);
border-radius: var(--radius);
border-color: #e2e6ee;
}
.cf-field input:focus,
.cf-field textarea:focus {
border-color: var(--theme-color);
box-shadow: 0 0 0 3px rgba(250, 132, 43, .15);
}
/* Подпись поля: текст и звёздочка в одной строке.
Без этой обёртки flex-колонка .cf-field выносила «*» на отдельную строку
и поля в соседних колонках расходились по высоте. */
.cf-label {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-size: 14px;
font-weight: 500;
color: var(--title-color);
line-height: 1.3;
}
.cf-req {
color: var(--theme-color);
font-weight: 700;
font-size: 15px;
line-height: 1;
}
/* ------------------------------------------------------------
Ошибка в форме подсвечивает конкретное поле.
Раньше на любую проблему выводилось общее «Заповніть обов’язкові
поля» — при неверном e-mail это сбивало с толку, ведь обязательные
поля были заполнены.
------------------------------------------------------------ */
.cf-field--error input,
.cf-field--error textarea {
border-color: #d14343;
background: #fff7f7;
}
.cf-field--error input:focus,
.cf-field--error textarea:focus {
border-color: #d14343;
box-shadow: 0 0 0 3px rgba(209, 67, 67, .15);
}
.cf-field--error .cf-label { color: #b93030; }
.cf-error {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: #b93030;
}
/* Пояснение к звёздочке над формой */
.cf-hint {
margin: 0 0 18px;
font-size: 13px;
color: #8a9099;
}
/* Позиция, с карточки которой пришли на форму */
.cf-about {
margin: 0 0 18px;
padding: 12px 16px;
border-left: 3px solid var(--theme-color);
border-radius: 0 var(--radius) var(--radius) 0;
background: #fff;
font-size: 14px;
color: var(--body-color);
}
.cf-about strong { color: var(--title-color); }
.cf-consent a { color: var(--theme-text); }
/* Поля в строке выравниваются по низу, чтобы инпуты стояли на одной линии */
.cf-row { align-items: end; }
/* ============================================================
14. МОДАЛКА КОНТАКТОВ
============================================================ */
.modal__dialog { border-radius: 8px; }
.modal__title { font-family: var(--title-font); font-weight: 600; }
.modal__phones a:hover { color: var(--theme-color); }
/* ============================================================
15. ПРАВОВЫЕ СТРАНИЦЫ
============================================================ */
.legal-body h2 { font-family: var(--title-font); }
.legal-body a { color: var(--theme-text); }
.legal-note {
border-left-color: var(--theme-color);
background: var(--smoke-color2);
}
.legal-table th { background: var(--smoke-color2); }
/* ============================================================
17. РОЗГОРНУТИЙ ОПИС ПОЗИЦІЇ (файли з /Content/Word/)
============================================================
Тут живуть таблиці характеристик і фотографії з підписами.
Правила описують саме вміст документа, тому обмежені .word-body —
решту сторінки вони не зачіпають. */
.equip-doc { margin-top: 40px; }
.word-body h2 {
margin: 34px 0 14px;
font-family: var(--title-font);
font-size: 22px;
font-weight: 600;
color: var(--title-color);
}
.word-body h2:first-child { margin-top: 0; }
.word-body p { margin: 0 0 14px; }
/* На сторінці товару є сторінковий скидання "ul,ol,menu{list-style:none}"
(Pages/Product_page/style.css) — тут повертаємо маркери явно, інакше
список виглядає суцільним текстом без крапок і цифр. */
.word-body ul,
.word-body ol { margin: 0 0 18px; padding-left: 22px; }
.word-body ul { list-style: disc; }
.word-body ol { list-style: decimal; }
.word-body li { margin-bottom: 8px; line-height: 1.6; }
.word-body li::marker { color: var(--theme-color); font-weight: 600; }
.word-body sub,
.word-body sup { font-size: .75em; }
/* Страхувальне правило: усе, що алгоритм нормалізації (inc/wordhtml.php)
з якоїсь причини не розпізнав і не обгорнув у doc-figure, все одно не
ламає верстку — просто лишається без спецоформлення. */
.word-body img:not(.doc-figure img):not(.doc-figure-row img) { max-width: 100%; height: auto; }
/* --- таблиці характеристик --- */
.doc-table {
width: 100%;
margin: 0 0 24px;
border-collapse: collapse;
font-size: 15px;
}
.doc-table th,
.doc-table td {
padding: 10px 14px;
border: 1px solid var(--border-color);
text-align: left;
vertical-align: top;
line-height: 1.5;
}
.doc-table thead th {
background: var(--smoke-color2);
font-weight: 600;
color: var(--title-color);
/* Липка шапка: під час прокрутки довгої таблиці заголовки колонок
лишаються видимими під стрічкою сайту (96px/64px — те саме, що
.header і body.is-scrolled .header). */
position: sticky;
top: 96px;
z-index: 2;
}
body.is-scrolled .doc-table thead th { top: 64px; }
/* Друга колонка — значення: вужча й не переноситься без потреби */
.doc-table td:last-child,
.doc-table th:last-child { width: 34%; }
.doc-table tbody tr:nth-child(even) td { background: #fafbfc; }
.doc-table tbody tr {
transition: background-color .15s;
}
.doc-table tbody tr:hover td { background: var(--smoke-color2); }
/* --- фотографії з підписом --- */
.doc-figure {
margin: 0 0 26px;
padding: 0;
}
.doc-figure img {
max-width: 100%;
height: auto;
border-radius: 6px;
background: #fff;
}
/* JS (common.js) обгортає кожен ![]()
у .doc-figure/.doc-figure-row у
— клік відкриває фото більшим
у тому самому .docbox, що й на сторінці сертифікатів. Без JS картинка
лишається звичайною — усі властивості нижче дублюються на "голий" img,
поки JS його не обгорнув. */
/* text-align: у doc-figure-row картинка вужча за свою колонку (img тут
лише з max-height, без width:100%) — без цього вона лишається зліва,
хоча сама обгортка (max-width/margin:auto вище) вже по центру. */
.doc-figure__zoom { position: relative; display: block; text-align: center; cursor: zoom-in; }
.doc-figure__zoom-badge {
position: absolute;
right: 10px;
bottom: 10px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: rgba(255, 255, 255, .92);
color: var(--theme-color);
box-shadow: 0 2px 8px rgba(8, 14, 28, .15);
opacity: 0;
transform: translateY(4px);
transition: opacity .2s, transform .2s;
pointer-events: none;
}
.doc-figure__zoom:hover .doc-figure__zoom-badge,
.doc-figure__zoom:focus-visible .doc-figure__zoom-badge {
opacity: 1;
transform: translateY(0);
}
/* Одиночне фото (без сусідів у ряд) не мусить розтягуватись на всю
ширину тексту й лізти впритул до країв — обмежуємо і центруємо.
> img — те саме для сторінок без JS, де обгортки ще немає. */
.doc-figure:not(.doc-figure--2):not(.doc-figure--3):not(.doc-figure--4) > img,
.doc-figure:not(.doc-figure--2):not(.doc-figure--3):not(.doc-figure--4) .doc-figure__zoom {
display: block;
max-width: min(100%, 640px);
margin-left: auto;
margin-right: auto;
}
.doc-figure:not(.doc-figure--2):not(.doc-figure--3):not(.doc-figure--4) figcaption {
max-width: min(100%, 640px);
margin-left: auto;
margin-right: auto;
}
/* Кілька знімків в один ряд — як у вихідному документі */
.doc-figure--2,
.doc-figure--3,
.doc-figure--4 {
display: grid;
gap: 12px;
align-items: end;
}
.doc-figure--2 { grid-template-columns: repeat(2, 1fr); }
.doc-figure--3 { grid-template-columns: repeat(3, 1fr); }
.doc-figure--4 { grid-template-columns: repeat(4, 1fr); }
.doc-figure--2 img,
.doc-figure--3 img,
.doc-figure--4 img {
width: 100%;
/* contain, а не cover: техніку не можна обрізати */
object-fit: contain;
max-height: 260px;
}
/* Два знімки поруч, але кожен зі своїм підписом — як у документі,
де підпис стоїть під кожним фото окремо. */
.doc-figure-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 20px;
align-items: end;
margin: 0 0 26px;
}
.doc-figure-row .doc-figure { margin: 0; }
.doc-figure-row img { max-height: 320px; object-fit: contain; }
@media (max-width: 720px) {
.doc-figure-row { grid-template-columns: 1fr; }
}
.doc-figure figcaption {
grid-column: 1 / -1;
margin-top: 10px;
font-size: 13.5px;
line-height: 1.5;
color: #7a8189;
text-align: center;
}
.doc-note {
margin: 18px 0 10px;
font-weight: 600;
color: var(--title-color);
}
@media (max-width: 720px) {
.doc-figure--3,
.doc-figure--4 { grid-template-columns: repeat(2, 1fr); }
.doc-figure--2 { grid-template-columns: 1fr; }
.doc-table { font-size: 14px; }
.doc-table th,
.doc-table td { padding: 8px 10px; }
}
/* ============================================================
18. НАПРЯМКИ КАТАЛОГУ: меню в шапці, плитки, дерево
============================================================
Розділи каталогу показуються в трьох місцях, і всі три беруть
дані з однієї таблиці: випадаюче меню в шапці, плитки на вході
в каталог і дерево в бічній колонці.
Напрямок, у якому ще немає позицій, скрізь виглядає однаково:
сірий текст і позначка «в розробці», без посилання. Клієнт бачить
усю лінійку обладнання, але не потрапляє на порожню сторінку. */
/* ------------------------------------------------------------
18.1 Випадаюче меню в шапці — дві панелі
------------------------------------------------------------
Ліворуч перелік напрямків, праворуч — розділи того напрямку,
на який наведено. Так само влаштовані меню у великих каталогах:
не доводиться показувати одразу все дерево, і довгі назви
поміщаються без дрібного шрифту.
------------------------------------------------------------ */
/* ------------------------------------------------------------
Скидання правил горизонтального меню всередині шторки.
У трьох таблицях стилів є правило «.main-nav ul { display: flex }».
Воно писалося для рядка з семи пунктів, але діє на будь-який
список усередині меню — зокрема на списки в шторці. Через це
розділи ставали в рядок і наїжджали один на одного.
Селектори нижче специфічніші за «.main-nav ul», а файл
підключається останнім, тому виграють саме вони.
------------------------------------------------------------ */
.main-nav .nav-mega ul {
display: block;
gap: 0;
column-gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav .nav-mega li { margin: 0; }
.main-nav .nav-mega a {
white-space: normal;
font-weight: 400;
letter-spacing: 0;
}
/* Пункт «Обладнання» навмисно лишається static.
Шторка позиціюється абсолютно і шукає найближчого предка
з position, відмінним від static. Якби він був тут, шторка
рахувала б ширину від самого пункта — виходила б вузька смужка
завширшки з надпис. Точка відліку має бути шапка. */
.main-nav .has-mega { position: static; }
/* Стрілка біля пункту. Кнопка потрібна лише як значок —
з клавіатури працює саме посилання, тому tabindex="-1". */
.mega-toggle {
display: inline-flex;
align-items: center;
margin-left: 5px;
padding: 0;
border: 0;
background: none;
color: currentColor;
cursor: pointer;
vertical-align: middle;
transition: transform .2s;
}
.has-mega.is-open .mega-toggle { transform: rotate(180deg); }
/* Заголовок шторки: за якою назвою в меню вона відкрилась —
"Обладнання"/"Технології" тощо. Без нього, коли пунктів із власною
шторкою декілька, незрозуміло, куди саме потрапив клієнт. Спан на
обидві колонки: auto-flow сітки .nav-mega сам відводить йому рядок 1,
а .nav-mega__aside/.nav-mega__body йдуть у рядок 2. */
.nav-mega__title {
grid-column: 1 / -1;
padding: 14px 20px 10px;
border-bottom: 1px solid var(--border-color);
font-family: var(--title-font);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--theme-color);
}
.nav-mega {
/* Прив'язана до шапки, а не до пункта меню. Раніше шторка
центрувалася під словом «Обладнання», а воно стоїть ліворуч —
на широкій шторці ліва частина йшла за межі екрана. */
position: absolute;
top: 100%;
left: 24px;
right: 24px;
z-index: 60;
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
max-width: 1180px;
margin-top: 10px;
border: 1px solid var(--border-color);
border-top: 3px solid var(--theme-color);
border-radius: 10px;
background: #fff;
box-shadow: 0 20px 44px rgba(8, 40, 50, .15);
overflow: hidden;
/* Закрите положення: не видно і не ловить кліки */
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .18s, transform .18s, visibility .18s;
}
/* Невидимий місток між пунктом меню і шторкою: без нього
вона закривалася б, поки курсор перетинає відступ */
.nav-mega::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
/* Прямокутник-підсвітка навколо пункту, поки його шторка відкрита —
без цього при кількох пунктах із власним nav-mega незрозуміло,
якому саме належить панель, що з'явилась. Padding+від'ємний margin
однакового розміру: власна ширина пункту в потоці не змінюється,
тому однорядкове меню (див. коментар вище про uk/en/pl) не ламається. */
.main-nav .has-mega {
padding: 6px 8px;
margin: -6px -8px;
border-radius: var(--radius);
transition: background-color .2s;
}
.main-nav .has-mega:hover,
.main-nav .has-mega.is-open {
background: var(--smoke-color2);
}
.main-nav .has-mega:hover > a,
.main-nav .has-mega.is-open > a {
color: var(--theme-color);
}
/* Фон і так достатній сигнал — підкреслення тут зайве, дублює ефект. */
.main-nav .has-mega:hover > a::after,
.main-nav .has-mega.is-open > a::after {
right: 100%;
}
.has-mega:hover > .nav-mega,
.has-mega.is-open > .nav-mega {
/* !important навмисно: на живому сайті базове .nav-mega{opacity:0}
чомусь перемагало це правило попри однакову специфічність і більш
пізню позицію в каскаді — причину з'ясувати віддалено не вдалося.
!important прибирає будь-яку залежність від порядку каскаду. */
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0);
}
@media (hover: none) {
.has-mega:hover > .nav-mega { opacity: 0; visibility: hidden; }
.has-mega.is-open > .nav-mega { opacity: 1 !important; visibility: visible !important; }
}
/* --- ліва колонка: напрямки --- */
.nav-mega__aside {
padding: 12px 0;
background: #fafbfc;
border-right: 1px solid var(--border-color);
}
.nav-mega__roots { margin: 0; padding: 0; list-style: none; }
.nav-mega__root {
display: grid;
grid-template-columns: minmax(0, 1fr) 14px;
align-items: center;
gap: 10px;
padding: 11px 16px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--title-color);
text-decoration: none;
white-space: normal; /* довгі назви переносяться */
transition: background .15s, color .15s;
}
.nav-mega__root-arrow { color: #b3bac1; display: flex; }
.nav-mega__root:hover,
.nav-mega__root.is-active {
background: var(--smoke-color2);
color: var(--theme-color);
}
.nav-mega__root.is-active .nav-mega__root-arrow { color: var(--theme-color); }
/* Напрямок без позицій — приглушений, але посилання лишається:
сторінка розділу розповідає, що саме готується */
.nav-mega__root--empty { color: #8a9099; }
/* --- права частина: розділи напрямку --- */
.nav-mega__body { padding: 20px 24px; min-width: 0; }
/* Поки скрипт не увімкнув перемикання, панелі просто йдуть
одна за одною — меню працює і без JavaScript */
.nav-mega.is-switchable .nav-mega__panel { display: none; }
.nav-mega.is-switchable .nav-mega__panel.is-active { display: block; }
.nav-mega__cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 4px 26px;
}
.nav-mega__col { min-width: 0; }
.nav-mega__col-title {
display: block;
margin-bottom: 8px;
font-family: var(--title-font);
font-size: 14.5px;
font-weight: 700;
line-height: 1.35;
color: var(--title-color);
text-decoration: none;
white-space: normal;
}
a.nav-mega__col-title:hover { color: var(--theme-color); }
.nav-mega__col-title--empty { color: #9aa2ab; font-weight: 600; }
.nav-mega__list { margin: 0 0 18px; padding: 0; list-style: none; }
.nav-mega__list a,
.nav-mega__empty {
display: block;
padding: 4px 0;
font-size: 13.5px;
font-weight: 400;
line-height: 1.4;
white-space: normal;
text-decoration: none;
}
.nav-mega__list a { color: var(--body-color); }
.nav-mega__list a:hover { color: var(--theme-color); }
.nav-mega__empty { color: #a7aeb6; }
/* Напрямок, у якого ще немає розділів */
.nav-mega__lonely { max-width: 420px; }
.nav-mega__descr {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.55;
color: var(--body-color);
}
/* ------------------------------------------------------------
18.2 Сторінка каталогу: бічна колонка і список
------------------------------------------------------------
Розкладка як у товарних каталогах: ліворуч розділи й фільтри,
праворуч одразу позиції. Плитки напрямків із входу прибрано —
через них доводилося зробити зайвий клік, перш ніж побачити
обладнання. Напрямки лишилися в шторці меню і в дереві ліворуч.
------------------------------------------------------------ */
/* Сторінка ширша за звичайну: бічна колонка не має тиснути список */
.catalog-page {
max-width: 1560px;
margin: 0 auto;
padding: 24px 24px 48px;
}
.catalog-layout {
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
/* Шапка стала «липкою» (блок 3) — відступ тепер має враховувати її
висоту, інакше верх колонки заїжджав би під неї. Компактний режим
шапки (.is-scrolled) стискає її до 64px, тому запас невеликий. */
.catalog-side { position: sticky; top: calc(96px + 16px); }
body.is-scrolled .catalog-side { top: calc(64px + 16px); }
.side-box {
padding: 18px 16px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: #fff;
}
.side-box + .side-box { margin-top: 16px; }
.side-box__title {
margin: 0 0 12px;
font-family: var(--title-font);
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--theme-text);
}
/* --- фільтр за типом --- */
.side-filter { margin: 0; padding: 0; list-style: none; }
.side-filter__row {
display: grid;
grid-template-columns: 16px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 6px 4px;
border-radius: 6px;
font-size: 14px;
line-height: 1.35;
cursor: pointer;
transition: background .15s;
}
.side-filter__row:hover { background: var(--smoke-color2); }
.side-filter__row input { width: 16px; height: 16px; margin: 0; accent-color: var(--theme-color); }
.side-filter__name { color: var(--title-color); }
.side-filter__count {
font-size: 12px;
color: #8a9099;
}
/* --- панель над списком --- */
.catalog-bar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 18px;
padding: 0 0 16px;
border-bottom: 1px solid var(--border-color);
}
.catalog-bar__search { flex: 1 1 260px; min-width: 200px; }
.catalog-bar__search input {
box-sizing: border-box;
width: 100%;
height: 42px;
padding: 0 14px;
border: 1px solid #e2e6ee;
border-radius: var(--radius);
font-family: var(--body-font);
font-size: 14px;
outline: 0;
}
.catalog-bar__search input:focus-visible {
border-color: var(--theme-color);
box-shadow: 0 0 0 3px rgba(11, 130, 153, .15);
}
.catalog-bar__sort {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--body-color);
white-space: nowrap;
}
.catalog-bar__sort .lang-select { height: 42px; font-weight: 400; font-size: 13.5px; }
.catalog-bar__view {
display: inline-flex;
border: 1px solid #e2e6ee;
border-radius: var(--radius);
overflow: hidden;
}
.view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 0;
background: #fff;
color: #8a9099;
cursor: pointer;
transition: background .15s, color .15s;
}
.view-btn + .view-btn { border-left: 1px solid #e2e6ee; }
.view-btn:hover { background: var(--smoke-color2); }
.view-btn.is-active { background: var(--theme-color); color: #fff; }
.catalog-bar .btn-ghost { height: 42px; }
/* Заголовок для екранних читачів: підпис поля пошуку лишається
в розмітці, але на екрані місця не займає */
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- вигляд «рядками» --- */
.grid--list { grid-template-columns: 1fr !important; }
.grid--list .card {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 20px;
grid-column: 1 / -1 !important;
}
/* width:100% обов'язковий: без нього aspect-ratio (4/3) на .card-media
рахує ширину від висоти (height:100%) і картка "вилазить" за межі
220px-колонки замість того, щоб у неї вписатись. */
.grid--list .card-media { width: 100%; height: 100%; min-height: 160px; }
.grid--list .card-body { padding: 16px 18px 16px 0; }
@media (max-width: 720px) {
.grid--list .card { grid-template-columns: 1fr; }
.grid--list .card-body { padding: 14px 16px; }
}
/* --- дерево напрямків у бічній колонці --- */
.cat-groups,
.cat-subs { margin: 0; padding: 0; list-style: none; }
.cat-group + .cat-group { margin-top: 2px; }
.cat-subs {
margin: 2px 0 8px 10px;
padding-left: 10px;
border-left: 1px solid var(--border-color);
}
.cat-link {
display: block;
padding: 6px 8px;
border-radius: 6px;
font-size: 13.5px;
line-height: 1.35;
color: var(--title-color);
text-decoration: none;
transition: background .15s, color .15s;
}
.cat-link--group { font-weight: 600; }
.cat-link--sub,
.cat-link--empty { font-size: 13px; font-weight: 400; }
a.cat-link:hover { background: var(--smoke-color2); color: var(--theme-color); }
a.cat-link.is-active { background: var(--theme-color); color: #fff; }
a.cat-link.is-active .cat-count { background: rgba(255, 255, 255, .25); color: #fff; }
.cat-count {
display: inline-block;
min-width: 17px;
margin-left: 4px;
padding: 0 5px;
border-radius: 9px;
background: var(--smoke-color2);
font-size: 11.5px;
font-weight: 600;
text-align: center;
color: #6b7480;
}
/* Напрямок, якого ще немає в каталозі: не посилання, приглушений */
.cat-link--empty { color: #9aa2ab; cursor: default; }
.cat-wip {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
border-radius: 9px;
background: #f4f6f8;
border: 1px solid var(--border-color);
font-size: 10.5px;
font-style: normal;
letter-spacing: .02em;
color: #8a9099;
white-space: nowrap;
}
/* Підзаголовок напрямку під заголовком сторінки */
.cat-lead {
margin: -6px 0 20px;
font-size: 16px;
color: var(--body-color);
}
@media (max-width: 1024px) {
.catalog-layout { grid-template-columns: 1fr; gap: 20px; }
.catalog-side { position: static; }
.side-box + .side-box { margin-top: 12px; }
}
@media (max-width: 520px) {
.catalog-page { padding: 20px 14px 40px; }
.catalog-bar { gap: 10px; }
.catalog-bar__sort span { display: none; }
}
/* Кнопка-гамбургер: у постраничних style.css задано 40×32px — менше
мінімального розміру дотику (44×44, WCAG 2.5.5). site.css підключається
останнім, тому це правило перебиває всі дублікати без правки восьми
файлів. Іконка (три риски) лишається того ж розміру — росте лише
клікабельна область навколо неї. */
/* header .nav-toggle{...} у постраничних style.css — специфічність
(елемент + клас) вища за просто .nav-toggle, тому порядок підключення
тут не рятує: селектор мусить бути щонайменше такий самий специфічний. */
header .nav-toggle { width: 44px; height: 44px; }
/* ------------------------------------------------------------
18.4 Мобільне меню: екрани розділів
Меню працює як у застосунку: обрав розділ — відкрився наступний
список, кнопка «‹» повертає на крок назад. Раніше всі напрямки
виводилися одним плоским списком, а рівні глибші за перший були
недоступні взагалі.
Панель суцільна, у колір підвала: текст поверх напівпрозорого
затемнення з розмиттям читався погано.
------------------------------------------------------------ */
.mobile-menu__panel {
background: var(--footer-bg);
color: #fff;
padding: 12px 0 20px;
}
.mobile-menu__top {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 52px 12px;
margin-bottom: 4px;
border-bottom: 1px solid var(--footer-line);
}
.mobile-menu__title {
font-family: var(--title-font);
font-size: 17px;
font-weight: 600;
line-height: 1.25;
color: #fff;
text-align: center;
}
.mobile-menu__home {
color: #fff;
text-decoration: none;
letter-spacing: .04em;
}
.mobile-menu__back,
.mobile-menu__close {
position: absolute;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; /* палець потрапляє без прицілювання */
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}
.mobile-menu__back { left: 4px; }
.mobile-menu__close { right: 4px; font-size: 28px; line-height: 1; }
.mobile-menu__back[hidden] { display: none; }
/* Список екрана */
.mobile-menu__nav { flex: 1 1 auto; overflow-y: auto; }
.mobile-menu__list {
display: block;
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: 4px 0;
text-align: left;
list-style: none;
}
.mm-item {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--footer-line);
}
.mm-link {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
padding: 14px 20px;
font-family: var(--body-font);
font-size: 16px;
font-weight: 500;
line-height: 1.35;
color: #fff;
text-decoration: none;
}
.mobile-menu__list a.mm-link { color: #fff; font-size: 16px; font-weight: 500; }
.mm-link:active { background: rgba(255, 255, 255, .08); }
/* Розділ без позицій: показуємо, але переходити нікуди */
.mm-link--plain { color: #9fb8c1; }
.mm-item--empty .mm-link { color: #9fb8c1; }
/* «Усе обладнання» — перший рядок екрана розділу */
.mm-item--all .mm-link { font-weight: 600; color: var(--theme-bright); }
/* Кнопка «углиб»: окрема зона, щоб тап по назві вів у каталог,
а тап по стрілці відкривав список підрозділів */
.mm-into {
flex: none;
width: 56px;
border: 0;
border-left: 1px solid var(--footer-line);
background: transparent;
color: #cfe3e9;
cursor: pointer;
}
.mm-into:active { background: rgba(255, 255, 255, .08); }
.mm-item--cta {
border-bottom: 0;
padding: 18px 20px 0;
}
.mm-item--cta .mobile-menu__cta {
display: flex;
width: 100%;
margin: 0;
background: var(--theme-color);
}
/* ------------------------------------------------------------
18.5 Вузькі екрани
------------------------------------------------------------ */
@media (max-width: 1024px) {
/* Тут працює бургер, випадаюче меню не потрібне */
.nav-mega, .mega-toggle { display: none; }
}
@media (max-width: 900px) {
.cat-layout { grid-template-columns: 1fr; gap: 20px; }
.cat-side { position: static; padding: 16px; }
.cat-subs { margin-left: 8px; padding-left: 8px; }
.cat-tiles { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 520px) {
.cat-tile { padding: 18px; gap: 13px; }
.cat-tile__icon { width: 46px; height: 46px; }
.cat-tile__title { font-size: 15px; }
.cat-tile__descr { font-size: 13.5px; }
}
/* ============================================================
19. ФІРМОВИЙ ЗНАК У ШАПЦІ
============================================================
Знак векторний — лишається чітким на будь-якому розмірі.
Пропорції 2,6 : 1 (овал плюс значок ® праворуч), тож за висотою
він завжди буде нижчим за колишній майже квадратний знак.
Розміри підібрані за шириною: 64 px висоти дають близько 166 px
завширшки — практично стільки ж, скільки займав старий помаранчевий.
Висота смуги задана окремо (див. .header вище), тому знак стоїть
у ній із полями, а не розпирає шапку. */
/* Новий файл обрізаний по краях, тож при тій самій висоті знак виглядав
помітно більшим за попередній. Висоти зменшені на чверть — знак у
шапці такого ж розміру, як був. Смуга шапки при цьому не змінилася. */
.logo img { height: 48px; width: auto; display: block; transition: height .2s ease; }
@media (max-width: 1500px) { .logo img { height: 42px; } }
@media (max-width: 1280px) { .logo img { height: 36px; } }
/* У цьому діапазоні меню й так стоїть упритул — тримаємо знак такої
ширини, як був зі старим файлом (близько 85 px). */
@media (max-width: 1150px) { .logo img { height: 24px; } }
/* Нижче 1025px працює бургер — місця більше */
@media (max-width: 1024px) { .logo img { height: 40px; } }
@media (max-width: 520px) { .logo img { height: 32px; } }
/* ============================================================
20. РОЗДІЛ «ПРО НАС»
============================================================
Текст став значно повнішим: до двох блоків із фото додалися
два списки — компетенції й технологічні напрями — і блок
про якість. Правила нижче лише розкладають нові частини,
наявний вигляд секції не змінюється. */
/* Другий блок «текст + фото» — фото ліворуч, щоб сторінка
не виглядала як два однакові поверхи */
.about-content--rev { direction: rtl; }
.about-content--rev > * { direction: ltr; }
.about-content + .about-cols,
.about-cols + .about-content,
.about-content + .about-qms { margin-top: 46px; }
.about-content h3,
.about-qms h3,
.about-col h3 {
margin: 0 0 16px;
font-family: var(--title-font);
font-size: var(--step-2);
font-weight: 600;
color: var(--title-color);
}
/* --- дві колонки зі списками --- */
.about-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
.about-col {
padding: 26px 28px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: #fff;
}
.about-list { margin: 0; padding: 0; list-style: none; }
.about-list li {
position: relative;
margin-bottom: 14px;
padding-left: 26px;
font-size: 15px;
line-height: 1.6;
}
.about-list li:last-child { margin-bottom: 0; }
/* Маркер — крапка фірмового кольору замість стандартного диска */
.about-list li::before {
content: '';
position: absolute;
top: .62em;
left: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--theme-color);
}
/* --- блок про якість --- */
.about-qms {
padding: 30px 32px;
border-radius: var(--radius-lg);
/* Було --smoke-color2 — той самий колір, що й у батьківської .about,
тож заливка й скруглення фактично не було видно: панель зі
згадкою ISO 9001 зливалася зі сторінкою. Білий фон + рамка
відокремлюють її від решти тексту. */
background: var(--white-color);
border: 1px solid var(--border-color);
}
.about-qms p { margin: 0 0 14px; }
.about-qms .btn { margin-top: 8px; }
@media (max-width: 900px) {
.about-cols { grid-template-columns: 1fr; gap: 18px; }
.about-col { padding: 20px; }
.about-qms { padding: 22px; }
/* На вузькому екрані порядок «фото — текст» плутає: повертаємо звичайний */
.about-content--rev { direction: ltr; }
.about-content + .about-cols,
.about-cols + .about-content,
.about-content + .about-qms { margin-top: 32px; }
}
/* ============================================================
22. ПОЗИЦІЯ, ОПИС ЯКОЇ ЩЕ ГОТУЄТЬСЯ
============================================================
Назва і розділ уже відомі, а опис, характеристики й фото —
ще ні. Картка лишається в каталозі, але приглушена й із
позначкою: клієнт бачить, що обладнання є в лінійці, і може
запитати подробиці. */
.card--wip { background: #fcfdfd; }
.card--wip .card-media { opacity: .55; }
.card--wip .card-title a { color: #6b7480; }
.card-wip {
display: inline-block;
margin-top: 6px;
padding: 2px 9px;
border-radius: 10px;
background: #f4f6f8;
border: 1px solid var(--border-color);
font-size: 11.5px;
letter-spacing: .02em;
color: #8a9099;
}
/* Блок на сторінці такої позиції */
.equip-wip {
margin: 4px 0 18px;
padding: 16px 18px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--smoke-color2);
}
.equip-wip .cat-wip { margin: 0 0 8px; }
.equip-wip p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body-color); }
/* ============================================================
21. РИТМ СТОРІНКИ
============================================================
Один блок на весь вертикальний і горизонтальний ритм.
Раніше відступи задавалися в трьох місцях — style.css, ритм секцій
і окремі правила — і накладалися один на одний. Через це між
деякими блоками з'являлася дірка у сотню пікселів, а інші злипалися.
Шкала проста і кратна восьми:
40 px — між великими блоками сторінки;
24 px — від заголовка секції до її вмісту;
16 px — усередині блоку.
Секції з холодною заливкою (--tint) мають однакові поля згори
і знизу: інакше видно, що заливка «з'їхала» відносно вмісту.
------------------------------------------------------------ */
:root {
/* Було фіксовано 40px на всіх ширинах (і окремо 32px/24px у двох
медіа-запитах нижче). clamp() дає той самий діапазон плавно,
без стрибків на брейкпоінтах — і сторінка нарешті дихає, а не
тримає всі секції на однаковій із них відстані. */
--section-space: clamp(2.25rem, 1.75rem + 2vw, 4rem); /* about/stat/map — текстові блоки */
--section-space-lg: clamp(3rem, 2rem + 3vw, 5.5rem); /* home-section — вітрини товарів/технологій */
--gutter: clamp(1rem, .5rem + 2vw, 2rem); /* було 32px / 20px / 14px трьома правилами */
}
/* --- поля з боків: логотип і вміст сторінки по одній лінії --- */
.header,
.about,
.map-section,
.footer,
.home-section { padding-left: var(--gutter); padding-right: var(--gutter); }
/* Банер на головній — єдиний блок без бічних полів: знімок іде
від краю до краю вікна. */
.hero-photo { padding: 0; }
/* --- відступи згори і знизу ---
Вітрини («Наше обладнання» тощо) отримують трохи більше повітря
згори, ніж текстові блоки — так з'являється відчутна різниця між
«читаю» і «вибираю». */
.home-section {
padding-top: var(--section-space-lg);
padding-bottom: var(--section-space-lg);
}
.stat,
.about,
.map-section {
padding-top: var(--section-space);
padding-bottom: var(--section-space);
}
/* Заголовок секції. У style.css у нього margin: 48px 0 24px — ці 48 px
додавалися до відступу самої секції й давали подвійний провал. */
.home-section .home-title,
.home-section .tech-title {
margin-top: 0;
margin-bottom: 24px;
}
/* Стрічка карток має власні поля знизу — вирівнюємо */
.gallery-wrap > .hsnap { padding-bottom: 8px; }
/* Дві сусідні секції з однаковим тлом не мають подвійного відступу:
між ними достатньо одного. */
.home-section + .home-section { padding-top: 0; }
.home-section--tint + .home-section,
.home-section + .home-section--tint { padding-top: var(--section-space-lg); }
@media (max-width: 1150px) {
.header { padding-left: 12px; padding-right: 12px; }
}
/* Брейкпоінти на 900px і 520px під --section-space/бічні поля прибрані:
clamp() вище вже дає ті самі значення плавно на будь-якій ширині. */
/* ============================================================
23. ФОКУС І РУХ (доступність)
============================================================
У файлі вже 40+ правил :hover, але лише кілька :focus-visible —
з клавіатури по сайту незручно ходити: незрозуміло, де фокус.
Один спільний контур на все замість точкового патчингу. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.equip-mini:focus-within,
.card:focus-within,
.tech-card:focus-within,
.doc-card:focus-within {
outline: 2px solid var(--theme-color);
outline-offset: 2px;
border-radius: var(--radius);
}
/* prefers-reduced-motion не зустрічався в CSS жодного разу. Без цього
блоку hover-підйом карток, zoom зображень і майбутні анімації стають
проблемою доступності для людей із вестибулярними порушеннями. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}