/* ============================================================================
AQUATEC — cassiopeia_aquatec template CSS
Stage 4 / Session 4 — закомментированная версия для администраторов
Сайт: aquatec.in.ua — Joomla 6, child template на основе Cassiopeia
----------------------------------------------------------------------------
ВНИМАНИЕ: этот файл — единая точка правки всего дизайна сайта.
Здесь стили для главной, всех внутренних страниц, статей, форм.
============================================================================
ОГЛАВЛЕНИЕ (используй Ctrl+F с этими маркерами):
[01] TOKENS — переменные цветов, шрифты, размеры
[02] RESET + BASE — сброс браузерных дефолтов, базовая типографика
[03] HEADER — шапка сайта (sticky, прозрачная на главной)
[04] LOGO — переключение белый/синий логотип
[05] TOP-NAV — горизонтальное меню в шапке
[06] DROPDOWN — выпадающие подменю в шапке
[07] HEADER-ACTIONS — телефон, переключатель языка, бургер
[08] HERO — главный экран с видеофоном
[09] MOBILE-OVERLAY — мобильное меню (выезжает на ширину экрана)
[10] FOOTER — подвал сайта (5 колонок + контакты)
[11] MAIN — основная область контента (между header и footer)
[12] BREAKPOINTS — адаптив (медиа-запросы)
[13] FOOTER-FAILSAFE — резервные правила футера (для нестандартных классов)
[14] INNER-PAGES — внутренние страницы (не главная)
[15] LOGO-IMAGES — переключение логотипов white/blue
[16] INNER-BACKGROUND — серый фон внутренних страниц
[17] DROPDOWN-OVERRIDES — финальные override для dropdown
[18] GLASS-HEADER — frosted glass эффект при скролле (2026 style)
============================================================================ */
/* ============================================================================
[01] TOKENS — CSS-переменные (палитра, шрифт, размеры)
----------------------------------------------------------------------------
Правишь здесь — меняется на всём сайте. Это центр управления дизайном.
============================================================================ */
:root {
/* --- Палитра бренда AQUATEC --- */
--aq-blue: #00aeee; /* основной голубой бренда (логотип, ссылки, акценты) */
--aq-blue-dark: #0288c2; /* тёмный синий (резерв, для hover-вариантов и градиентов) */
--aq-orange: #f58025; /* оранжевый CTA-кнопок (Hero "Детальніше" и др.) */
--aq-green: #01b1b0; /* зелёный (резерв для иконок/badges) */
/* --- Нейтральные --- */
--aq-grey: #76777b; /* серый фон футера */
--aq-text: #1b2935; /* основной цвет текста */
--aq-overlay: #ffffff; /* фон мобильного меню (выбран белый, как на проде) */
/* --- Типографика --- */
--aq-font: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
/* --- Layout --- */
--aq-container: 1366px; /* максимальная ширина центрального контейнера сайта */
--aq-header-h: 80px; /* высота шапки в обычном состоянии (вверху страницы) */
--aq-header-h-scrolled: 60px; /* высота шапки после скролла (компактный режим) */
}
/* ============================================================================
[02] RESET + BASE — сброс браузерных дефолтов и базовая типографика
============================================================================ */
/* Универсальный box-sizing — все элементы считают padding+border в свою width */
*, *::before, *::after { box-sizing: border-box; }
/* Убираем дефолтные margin/padding у html и body */
html, body { margin: 0; padding: 0; }
/* Базовый стиль с классом .aquatec-site (добавляется в шаблоне index.php) */
body.aquatec-site {
font-family: var(--aq-font);
font-size: 16px;
line-height: 1.55;
color: var(--aq-text);
background: #fff;
-webkit-font-smoothing: antialiased; /* плавный шрифт на Mac/iOS */
-moz-osx-font-smoothing: grayscale; /* плавный шрифт на macOS */
}
/* --- Сброс встроенных стилей у часто используемых тегов --- */
a { color: inherit; text-decoration: none; } /* ссылки без подчёркивания, наследуют цвет */
img, svg { max-width: 100%; display: block; } /* изображения не вылезают за ширину родителя */
ul { list-style: none; padding: 0; margin: 0; } /* списки без точек/нумерации */
button { /* кнопки выглядят как обычный текст */
background: none; border: 0; padding: 0;
font: inherit; color: inherit; cursor: pointer;
}
/* --- Bootstrap-совместимая скрывалка для screen readers ---
Cassiopeia добавляет Більше про: ...
в каждый пункт меню для accessibility. Без этого правила текст виден глазами.
*/
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Универсальный центральный контейнер с боковыми отступами */
.container { max-width: var(--aq-container); margin: 0 auto; padding: 0 24px; }
/* ============================================================================
[03] HEADER — шапка сайта (sticky)
----------------------------------------------------------------------------
На главной странице header стартует прозрачным (виден поверх видео hero).
При скролле >50px добавляется класс .scrolled → header становится белым
полупрозрачным с эффектом стекла (см. секцию [18]).
На внутренних страницах header сразу белый (см. секцию [14]).
============================================================================ */
/* Контейнер шапки — прилипает к верху экрана при скролле */
.site-header {
position: sticky; /* прилипает при скролле */
top: 0; /* к верхнему краю окна */
z-index: 100; /* поверх контента */
width: 100%;
background: transparent; /* стартовое состояние — прозрачное */
transition: background-color 0.25s ease, /* плавные переходы при изменении */
box-shadow 0.25s ease,
border-color 0.25s ease;
border-bottom: 1px solid transparent;
}
/* Внутренний контейнер шапки (горизонтальная раскладка) */
.site-header__inner {
max-width: var(--aq-container);
margin: 0 auto;
padding: 0 24px;
height: var(--aq-header-h); /* высота 80px */
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: height 0.25s ease;
}
/* --- Состояние при скролле: класс .scrolled добавляет JS (см. aquatec.js) --- */
.site-header.scrolled {
background: #ffffff; /* белый фон (переопределяется в [18] glass-effect) */
box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* лёгкая тень */
}
.site-header.scrolled .site-header__inner {
height: var(--aq-header-h-scrolled); /* шапка ужимается до 60px */
}
/* ============================================================================
[04] LOGO — текстовый логотип (на текущем сайте используются IMG, не текст)
----------------------------------------------------------------------------
Это остатки старой схемы с текстовым лого AQUATEC. Сейчас активны
IMG-варианты (см. секцию [15]). Правила здесь оставлены для совместимости.
============================================================================ */
/* Контейнер логотипа (link) */
.site-logo {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
color: #fff; /* белый цвет — на прозрачном header */
transition: color 0.25s ease;
}
/* Бренд (большой текст AQUATEC) — НЕ ИСПОЛЬЗУЕТСЯ, скрыт ниже в [15] */
.site-logo__brand {
font-size: 28px;
font-weight: 800;
letter-spacing: 0.5px;
transition: font-size 0.25s ease;
}
/* Страна (мелкий текст УКРАЇНА) — НЕ ИСПОЛЬЗУЕТСЯ, скрыт ниже в [15] */
.site-logo__country {
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 2px;
opacity: 0.9;
}
/* При скролле — текстовый логотип становится синим */
.site-header.scrolled .site-logo { color: var(--aq-blue); }
.site-header.scrolled .site-logo__brand { font-size: 22px; }
/* ============================================================================
[05] TOP-NAV — горизонтальное меню в шапке (Головна, Про нас, и т.д.)
----------------------------------------------------------------------------
Источник данных: модуль Joomla "Main Menu (UA)" или "Main Menu" (RU),
позиция aquatec-main-menu, тип mod_menu.
Пункты меню редактируются в админке: Menus → Main Menu UA / Main Menu RU.
============================================================================ */
.site-nav { display: flex; align-items: center; }
/* Горизонтальный список пунктов меню */
.site-nav .mod-menu {
display: flex;
gap: 28px; /* промежуток между пунктами */
align-items: center;
}
/* Каждый пункт меню — relative для абсолютного позиционирования подменю */
.site-nav .mod-menu > li { position: relative; }
/* Стиль ссылки пункта меню */
.site-nav .mod-menu > li > a {
display: inline-block;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #fff; /* белый на прозрачном header */
padding: 8px 0;
transition: color 0.2s ease;
white-space: nowrap;
}
/* Подсветка активного / hover пункта меню */
.site-nav .mod-menu > li > a:hover,
.site-nav .mod-menu > li.current > a,
.site-nav .mod-menu > li.active > a { color: var(--aq-blue); }
/* При скролле header → текст пунктов меню становится тёмным */
.site-header.scrolled .site-nav .mod-menu > li > a { color: var(--aq-header-scrolled-text); }
.site-header.scrolled .site-nav .mod-menu > li > a:hover,
.site-header.scrolled .site-nav .mod-menu > li.current > a,
.site-header.scrolled .site-nav .mod-menu > li.active > a { color: var(--aq-blue); }
/* Скрываем "chevron"-кнопку, которую Joomla автоматически добавляет к пунктам с подменю.
У нас подменю открываются по hover (см. ниже [06]), поэтому кнопка не нужна. */
.site-nav .mod-menu .mod-menu__toggle-sub { display: none; }
/* ============================================================================
[06] DROPDOWN — выпадающие подменю в горизонтальной шапке
----------------------------------------------------------------------------
Открываются по hover на родительский пункт меню.
Joomla генерирует подменю как