/* Основные стили страницы и контейнера таблицы */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px; /* Базовый размер шрифта для предсказуемости */
background-color: #f4f4f4; /* Цвет всего фона сайта */
margin: 0; /* Отступы внешние */
padding: 0 20px; /* Отступы внутренний */
color: #333; /* Цвет шрифта */
/* ДОБАВЛЕНО: Отключаем авто-изменение размера шрифта на мобильных */
-webkit-text-size-adjust: 100%; /* Для Chrome, Safari, Edge */
-moz-text-size-adjust: 100%; /* Для Firefox */
-ms-text-size-adjust: 100%; /* Для IE */
text-size-adjust: 100%; /* Стандартное свойство */
}
/***************************************************************************************************************************************/
/*** Шапка сайта ***********************************************************************************************************************/
/***************************************************************************************************************************************/
.header {
border: 0px solid #7aa2f7; /* Видимая граница толщиной 0px */
max-width: 1000px; /* Ширина блока максимальная*/
margin: 0 auto; /* Убираем внешние отступы (снаружи блока) */
padding: 10px 0px; /* Внутренние отступы: сверху/снизу и слева/справа по 20px */
display: flex; /* Используем flex-контейнер для выравнивания содержимого */
justify-content: center; /* Центрируем содержимое по горизонтали */
align-items: center; /* Центрируем содержимое по вертикали */
}
.header h1 {
/* border: 1px solid #7aa2f7; /* Видимая граница толщиной */
margin: 0; /* Убираем внешние отступы */
padding: 0; /* Убираем внутренние отступы */
font-size: 24px; /* Размер шрифта заголовка h1 */
color: #333333; /* Цвет текста заголовка — фирменный синий */
}
.header h1 a {
margin: 0; /* Убираем внешние отступы */
padding: 0; /* Убираем внутренние отступы */
text-decoration: none; /* Убираем подчёркивание у ссылки */
color: inherit; /* Наследуем цвет от родителя (h1) */
font-weight: bold; /* Жирным делаем*/
}
.header p {
/* border: 1px solid #7aa2f7; /* Видимая граница толщиной */
margin: 10px 10px 0px 10px; /* Убираем внешние отступы */
padding: 0px; /* Убираем внутренние отступы */
color: #333333; /* Цвет текста — светло-синий, читаемый на тёмном фоне */
font-size: 16px; /* Размер шрифта */
font-weight: bold; /* Жирный текст */
font-style: italic; /* Курсив */
}
/***************************************************************************************************************************************/
/* Меню ********************************************************************************************************************************/
/***************************************************************************************************************************************/
/* --- 1. Фирменные цвета и шрифты в переменных --- */
:root {
--primary-bg: #FFFFFF; /* Основной фон меню */
--accent-color: #009879; /* Акцентный цвет при наведении Черты с низу Зеленый*/
--text-color: #333333; /* Основной цвет текста при отображении (серый) */
--text-hover-color: #009879; /* Цвет текста при наведении */
--border-radius: 8px; /* Скругление углов */
--main-font: 'Montserrat', sans-serif; /* Фирменный шрифт */
}
/* --- Подключаем шрифт из Google Fonts (это нужно добавить в вашего HTML) --- */
/*
*/
/* --- 2. Основной контейнер меню --- */
.main-nav {
font-family: "Segoe UI", sans-serif; /* Имя шрифта */
max-width: 1000px;
width: 95%; /* Даем немного воздуха по бокам */
margin: 0px auto 20px auto; /* сверху 0px а с низу 20px */
background-color: var(--primary-bg);
border-radius: var(--border-radius);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Придаем объем */
/* font-family: var(--main-font); */
overflow: hidden; /* Скрываем все, что выходит за скругленные углы */
}
/* --- 3. Список навигации (Flexbox) --- */
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center; /* Элементы по центру */
}
.main-nav li {
margin: 0;
}
/* --- 4. Ссылки меню - самое интересное! --- */
.main-nav a {
display: block;
position: relative; /* Нужно для позиционирования псевдо-элемента "after" */
padding: 20px 25px;
color: var(--text-color);
text-decoration: none;
font-size: 16px;
font-weight: 700; /* Делаем шрифт чуть жирнее */
transition: color 0.3s ease; /* Плавный переход только для цвета текста */
}
/* --- 5. Эффект подчеркивания при наведении --- */
.main-nav a::after {
content: '';
position: absolute;
bottom: 10px; /* Располагаем линию ниже текста */
left: 50%; /* Начинаем из центра */
transform: translateX(-50%); /* Точно центрируем */
width: 0; /* Изначально линия невидима */
height: 2px;
background-color: var(--accent-color);
transition: width 0.4s ease; /* Анимируем появление линии */
}
.main-nav a:hover {
color: var(--text-hover-color);
}
.main-nav a:hover::after {
width: 60%; /* При наведении линия расширяется */
}
/* --- 6. Стиль для активной (текущей) страницы --- */
/* Добавьте класс .active к ссылке текущей страницы в HTML, например: Главная */
.main-nav a.active {
color: var(--accent-color);
}
.main-nav a.active::after {
width: 60%; /* Активная ссылка всегда подчеркнута */
}
/***************************************************************************************************************************************/
/* Конец Меню **************************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/* Конец шапки сайта *******************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/* Таблица № 01 ************************************************************************************************************************/
/***************************************************************************************************************************************/
.table-container01 { /* Контейнер, оборачивающий таблицу */
border: 0px solid red; /* Временная граница для отладки, визуально не отображается */
width: 100%; /* Растягивается на всю доступную ширину */
max-width: 1000px; /* Ограничение максимальной ширины таблицы */
margin: 0 auto; /* Центрирование по горизонтали (авто отступы слева и справа) */
overflow-x: auto; /* Горизонтальная прокрутка при переполнении */
border-radius: 8px; /* Скругление углов контейнера */
overflow: hidden; /* Обрезает содержимое, выходящее за границы (вместе с border-radius) */
/* 3D-эффект ************************************************************************************************************************/
box-shadow: /* Тень для имитации глубины (нижняя и верхняя стороны) */
10px 10px 20px rgba(0, 0, 0, 0.3), /* Тень вправо-вниз: темная, создаёт рельеф */
-5px -5px 10px rgba(255, 255, 255, 0.5); /* Тень влево-вверх: светлая, создаёт эффект подъёма */
/* background: linear-gradient(145deg, #ffffff, #e6e6e6); /* Светлый градиент подложки для мягкого объёмного вида */
/* transform: perspective(1000px) rotateX(40deg) rotateY(0deg); /* Небольшой наклон по X и Y с перспективой, создаёт лёгкий 3D эффект */
/************************************************************************************************************************************/
}
/* .table-container01:hover { /* При наведении курсора на элемент с классом .table-container01 */
/* transform: scale(1.2); /* Увеличивает элемент на 10% (масштаб 1.2x) */
/* transition: 1s; /* Плавно применяет все изменяющиеся свойства (в данном случае — transform) в течение 1 секунды */
/* } /*
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/* Настройка внутренностей таблиц всех *************************************************************************************************/
/***************************************************************************************************************************************/
/* Стили для адаптивной таблицы (ЗЕЛЕНАЯ ТЕМА) */
.styled-table { /* Стили для таблицы с классом styled-table */
border-collapse: collapse; /* Убираем двойные границы между ячейками */
width: 100%; /* Занимает всю доступную ширину контейнера */
font-size: 16px; /* Размер шрифта чуть меньше обычного, в относительных единицах */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* Тень вокруг таблицы для объёмного эффекта */
}
.styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
font-weight: bold;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
background-color: #ffffff;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.styled-table tbody tr:hover {
background-color: #f0f0f0;
color: #009879;
cursor: pointer;
}
.styled-table a {
color: #009879;
text-decoration: none;
font-weight: bold;
}
.styled-table a:hover {
text-decoration: underline;
}
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
.text-center {
text-align: center;
}
/***************************************************************************************************************************************/
/* footer ******************************************************************************************************************************/
/***************************************************************************************************************************************/
.footer h2 {
margin: 50px; /* Отступ внешний */
max-width: 1000px; /* Максимальная ширина блока — не шире 1000px */
overflow-x: auto; /* Включает горизонтальную прокрутку, если содержимое выходит за пределы блока по ширине */
border-radius: 8px; /* Скругляет углы блока на 8 пикселей */
overflow: hidden; /* Обрезает всё содержимое, выходящее за границы блока (и по вертикали, и по горизонтали) */
text-align: center; /* центрируем текст */
border: 2px solid transparent; /* толщина границы невидемой */
margin: 20px auto; /* отступы внешние 20px верхи низе а центрировать по горизонтали */
padding: 20px 40px; /* отступы внутренние */
font-size: 28px; /* размер шрифта */
color: #121212; /* цвет шрифта */
background-color: #FFFFFF; /* цвет фона изначальный */
transition:
border-color 1s ease, /* Плавное изменение цвета границы за 2 секунды с функцией сглаживания "ease" */
background-color 1s ease 0.1s, /* Плавное изменение цвета фона за 2 секунды, но с задержкой в 0.5 секунды */
color 1s ease 0.1s; /* Плавное изменение цвета текста за 2 секунды, с задержкой в 1 секунду */
box-shadow:
10px 10px 20px rgba(0, 0, 0, 0.3), /* Тень вниз и вправо: смещение по X — 10px, по Y — 10px, размытие — 20px, полупрозрачный чёрный цвет. Создаёт эффект глубины. */
-5px -5px 10px rgba(255, 255, 255, 0.5); /* Тень вверх и влево: смещение по X — -5px, по Y — -5px, размытие — 10px, полупрозрачный белый цвет. Добавляет световой контур и объём. */
}
.footer {
border: 0px solid #7aa2f7; /* Видимая граница толщиной 0px */
max-width: 1000px; /* Ширина блока максимальная*/
margin: 20px auto; /* Убираем внешние отступы (снаружи блока) */
padding: 10px 0px; /* Внутренние отступы: сверху/снизу и слева/справа по 20px */
display: flex; /* Используем flex-контейнер для выравнивания содержимого */
justify-content: center; /* Центрируем содержимое по горизонтали */
align-items: center; /* Центрируем содержимое по вертикали */
}
.footer h2:hover { /* при наведении */
margin: 0; /* Убираем внешние отступы */
padding: 0; /* Убираем внутренние отступы */
border-color: #000000; /* цвет границы */
background-color: #121212; /* цвет фона */
color: #FFFFFF; /* цвет шрифта */
}
.footer p {
border: 0px solid #7aa2f7; /* Видимая граница толщиной */
margin: 0 auto; /* Убираем внешние отступы */
padding: 0px; /* Убираем внутренние отступы */
color: #333333; /* Цвет текста — светло-синий, читаемый на тёмном фоне */
font-size: 16px; /* Размер шрифта */
font-weight: bold; /* Жирный текст */
font-style: italic; /* Курсив */
}
/* 
/* .logo {
/* border: 2px solid #000000; */ /* ширина границы и цвет */
/* border-radius: 10px; */ /* радиус 10px */
/* background-color: #121212; */ /* цвет фона */
/* width: 192px; */ /* ширина 192 */
/* height: 192px; */ /* высота 192 */
}
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/