/* =========================================================
🧹 Скидання стилів і базовий шрифт (GLOBAL RESET)
========================================================= */
* {
margin: 0; /* Прибирає стандартні зовнішні відступи браузера */
padding: 0; /* Прибирає стандартні внутрішні відступи */
box-sizing: border-box; /* Розміри елементів включають padding і border */
font-family: "Segoe UI", Arial, sans-serif; /* Основний шрифт сайту */
}
/* =========================================================
🌐 Загальні налаштування сторінки (BODY)
========================================================= */
body {
height: 100vh; /* Висота сторінки = висота вікна браузера */
color: #e8f1ff; /* Основний колір тексту */
overflow: hidden; /* ❗ Скрол на body вимкнений свідомо */
}
/* =========================================================
📜 Скрол основного контенту (MAIN SCROLL AREA)
========================================================= */
.main {
overflow-y: auto; /* Вертикальний скрол тільки для контенту */
height: 100%; /* Займає всю доступну висоту */
}
/* ⚠️ ВАЖЛИВО:
Скрол винесений з body у .main.
Це правильне рішення для SPA-подібного інтерфейсу.
Якщо випадково повернути scroll у body — поламається логіка верстки.
*/
/* =========================================================
🖼️ Розмитий фоновий малюнок (BACKGROUND IMAGE)
========================================================= */
body::before {
content: ""; /* Обовʼязково для псевдоелемента */
position: fixed; /* Фон зафіксований, не рухається при скролі */
inset: -20px; /* Вихід за межі екрану, щоб blur не обрізався */
background: url("/assets/img/bg.jpg") center / cover no-repeat;
/* center — по центру
cover — заповнює екран
no-repeat — без повторів */
filter: blur(10px); /* Рівень розмиття фону */
opacity: 0.9; /* Прозорість фону */
z-index: -2; /* Нижче всього контенту */
}
/* =========================================================
🌑 Темне затемнення поверх фону (BACKGROUND OVERLAY)
========================================================= */
body::after {
content: ""; /* Обовʼязково для псевдоелемента */
position: fixed; /* Фіксований шар */
inset: 0; /* Покриває весь екран */
background: linear-gradient(
180deg,
rgba(2,8,22,0.6), /* Верхній рівень затемнення */
rgba(2,8,22,0.7) /* Нижній рівень затемнення */
);
z-index: -1; /* Вище картинки, але нижче UI */
}
/* =========================================================
🧱 Головний контейнер інтерфейсу (APP CONTAINER)
========================================================= */
.app {
height: 100%; /* Заповнює всю висоту body */
display: flex; /* Flex-контейнер */
justify-content: center; /* Центрує інтерфейс по горизонталі */
}
/* =========================================================
📐 Обмеження ширини інтерфейсу (UI WRAPPER)
========================================================= */
.ui-wrapper {
width: 100%; /* Адаптація під ширину екрану */
max-width: 1600px; /* Максимальна ширина сайту */
display: flex; /* Ліве меню + основний контент */
}
/* ⚠️ ПОМІТКА:
.ui-wrapper використовується як базовий контейнер
для позиціонування внутрішніх елементів.
Далі в файлі він може ДОПОВНЮВАТИСЯ іншими властивостями (position).
*/
/* =========================================================
📂 Ліве меню навігації сайту (LEFT NAVIGATION)
========================================================= */
.left-nav {
width: 240px; /* Фіксована ширина лівого меню */
padding: 20px 20px; /* Внутрішні відступи */
display: flex;
flex-direction: column; /* Елементи розташовані зверху вниз */
gap: 20px; /* Відстань між блоками меню */
}
/* =========================================================
🪪 Логотип у лівому меню (LEFT LOGO)
========================================================= */
.left-logo {
font-weight: 900; /* Дуже жирний текст для акценту */
font-size: 33px; /* Розмір логотипа */
letter-spacing: 1px; /* Легке розрідження літер */
color: #5ec1ff; /* Основний синій колір "UA" */
}
/* Червона цифра 5 у логотипі */
.left-logo span {
color: #ff4545; /* Акцентний червоний колір */
}
/* =========================================================
📑 Контейнер кнопок навігації (LEFT MENU)
========================================================= */
.left-menu { /* Основний контейнер лівого меню з кнопками */
display: flex; /* Вмикає flex-контейнер для гнучкого розташування елементів */
flex-direction: column; /* Кнопки розташовані вертикально */
gap: 14px; /* Відстань між кнопками */
}
/* =========================================================
🔘 Кнопка навігації (NAV BUTTON)
========================================================= */
.nav-btn {
background: rgba(255,255,255,0.08); /* Напівпрозорий фон кнопки */
border: none; /* Без рамки */
padding: 18px 18px; /* Розміри клікабельної області */
border-radius: 14px; /* Закруглення кутів */
color: #e8f1ff; /* Колір тексту */
font-size: 17px; /* Розмір тексту */
text-align: left; /* Текст вирівняний вліво */
cursor: pointer; /* Курсор "рука" */
text-decoration: none; /* Прибирає підкреслення у */
display: block; /* Працює як повноцінна кнопка */
}
/* Активний пункт меню */
.nav-btn.active {
background: rgba(80,160,255,0.35); /* Підсвічування активної сторінки */
}
/* Hover-ефект кнопки */
.nav-btn:hover {
background: rgba(80,160,255,0.25); /* Підсвічування при наведенні */
}
/* ⚠️ ПОМІТКА:
.nav-btn використовується і як , і як