194 lines
6.6 KiB
CSS
194 lines
6.6 KiB
CSS
/* ============================================
|
||
КАСТОМНЫЙ CSS ДЛЯ ПРОЕКТА "ТЕХНОМИР"
|
||
Борисов Иван Сергеевич, РПО 23/1, 2026
|
||
============================================ */
|
||
|
||
/* === CSS-ПЕРЕМЕННЫЕ ДЛЯ ТЁМЫ === */
|
||
/* здесь задаём цвета для светлой и тёмной темы */
|
||
/* потом эти переменные используем в коде через var(--имя-переменной) */
|
||
:root {
|
||
/* акцентный цвет — синий */
|
||
--color-primary: #2563eb;
|
||
/* фон страницы — белый для светлой темы */
|
||
--bg-body: #f8f9fa;
|
||
/* фон карточек */
|
||
--bg-card: #ffffff;
|
||
/* цвет текста */
|
||
--text-color: #212529;
|
||
/* цвет мутного/второстепенного текста */
|
||
--text-muted: #6c757d;
|
||
/* тень карточек */
|
||
--shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||
/* тень карточки при наведении */
|
||
--shadow-card-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||
/* цвет бордера карточки */
|
||
--border-card: #dee2e6;
|
||
}
|
||
|
||
/* тёмная тема — меняем цвета при data-theme="dark" на body */
|
||
[data-theme="dark"] {
|
||
--bg-body: #1a1d23;
|
||
--bg-card: #2b2f38;
|
||
--text-color: #e4e6ea;
|
||
--text-muted: #adb5bd;
|
||
--shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
|
||
--shadow-card-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
|
||
--border-card: #444950;
|
||
}
|
||
|
||
/* === ОСНОВНЫЕ СТИЛИ === */
|
||
|
||
/* базовый размер шрифта — 14px на мобильных */
|
||
html {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* на экранах от 768px и шире — увеличиваем до 16px */
|
||
@media (min-width: 768px) {
|
||
html {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
/* чтобы footer всегда был внизу даже на пустых страницах */
|
||
html {
|
||
position: relative;
|
||
min-height: 100%;
|
||
}
|
||
|
||
/* body с отступом снизу чтобы footer не налезал на контент */
|
||
body {
|
||
margin-bottom: 80px;
|
||
/* подставляем цвет фона из переменной темы */
|
||
background-color: var(--bg-body);
|
||
/* подставляем цвет текста */
|
||
color: var(--text-color);
|
||
/* плавный переход при смене темы — 0.3 секунды */
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
/* === СТИЛИ НАВБАРА === */
|
||
|
||
/* при тёмной теме навбар чуть темнее */
|
||
[data-theme="dark"] .navbar {
|
||
background-color: #1e2128 !important;
|
||
}
|
||
|
||
/* === ГЛАВНЫЙ БАННЕР (HERO) === */
|
||
|
||
/* секция-баннер на главной странице */
|
||
.hero-section {
|
||
/* градиентный фон — от акцентного цвета к фиолетовому */
|
||
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
|
||
/* скруглённые углы */
|
||
border-radius: 0.75rem !important;
|
||
}
|
||
|
||
/* === КАРТОЧКИ ПРЕИМУЩЕСТВ === */
|
||
|
||
/* общие стили для карточек с преимуществами */
|
||
.advantage-card {
|
||
/* меняем фон карточки на нашу переменную */
|
||
background-color: var(--bg-card);
|
||
/* меняем цвет текста */
|
||
color: var(--text-color);
|
||
/* плавный переход при смене темы */
|
||
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
/* эффект при наведении мыши — карточка немного поднимается и тень увеличивается */
|
||
.advantage-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-card-hover);
|
||
}
|
||
|
||
/* === КАРТОЧКИ ТОВАРОВ В КАТАЛОГЕ === */
|
||
|
||
/* общие стили для карточки товара */
|
||
.product-card {
|
||
/* фон из переменной темы */
|
||
background-color: var(--bg-card);
|
||
/* цвет текста */
|
||
color: var(--text-color);
|
||
/* бордер */
|
||
border: 1px solid var(--border-card);
|
||
/* плавный переход для hover-эффекта */
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
|
||
}
|
||
|
||
/* при наведении — карточка поднимается и тень становится больше */
|
||
.product-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: var(--shadow-card-hover);
|
||
}
|
||
|
||
/* заглушка-картинка в карточке товара (серый фон с эмодзи) */
|
||
.placeholder-img {
|
||
/* высота заглушки */
|
||
height: 180px;
|
||
/* фон — светлый серый */
|
||
background-color: #e9ecef;
|
||
/* нижняя граница */
|
||
border-bottom: 1px solid #dee2e6;
|
||
}
|
||
|
||
/* в тёмной теме заглушка чуть темнее */
|
||
[data-theme="dark"] .placeholder-img {
|
||
background-color: #343a40;
|
||
border-bottom-color: #495057;
|
||
}
|
||
|
||
/* === ФОРМА КОНТАКТОВ === */
|
||
|
||
/* стилизация полей ввода в тёмной теме */
|
||
[data-theme="dark"] .form-control {
|
||
background-color: #343a40;
|
||
border-color: #495057;
|
||
color: #e4e6ea;
|
||
}
|
||
|
||
/* активное поле ввода — акцентная рамка */
|
||
[data-theme="dark"] .form-control:focus {
|
||
background-color: #3a3f49;
|
||
border-color: var(--color-primary);
|
||
color: #e4e6ea;
|
||
}
|
||
|
||
/* стилизация таблицы в тёмной теме */
|
||
[data-theme="dark"] .table {
|
||
color: #e4e6ea;
|
||
--bs-table-bg: transparent;
|
||
--bs-table-striped-bg: rgba(255, 255, 255, 0.03);
|
||
--bs-table-hover-bg: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
/* === FOOTER === */
|
||
|
||
/* footer привязан к низу страницы */
|
||
.footer {
|
||
/* скрепляем footer с низом */
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
/* высота строки = высота отступа body */
|
||
line-height: 60px;
|
||
}
|
||
|
||
/* === КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ === */
|
||
|
||
/* кнопка темы — небольшая, с иконкой */
|
||
#themeToggle {
|
||
/* размер шрифта */
|
||
font-size: 1.1rem;
|
||
/* убираем обводку при фокусе */
|
||
outline: none;
|
||
}
|
||
|
||
/* === УВЕДОМЛЕНИЕ ОБ УСПЕХЕ === */
|
||
/* стилизуем alert-success для тёмной темы */
|
||
[data-theme="dark"] .alert-success {
|
||
background-color: rgba(25, 135, 84, 0.2);
|
||
border-color: rgba(25, 135, 84, 0.4);
|
||
color: #75b798;
|
||
}
|