/* =========================================================================
style.css — самостоятельная светлая тема для статической версии сайта
Подключить на КАЖДОЙ странице в :
(путь поправить под то, куда вы положите файл на хостинге)
========================================================================= */
/* ---------- 1. Reset / базовые настройки ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
margin: 0;
font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #3a4446;
background-color: #f7f9f8;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: #4f9a63; text-decoration: none; }
a:hover, a:focus{ color: #e08a3e; }
ul, ol{ padding-left: 1.2em; }
h1, h2, h3, h4, h5, h6{
font-weight: 700;
line-height: 1.25;
color: #2c3638;
margin: 0 0 0.6em;
}
h1{ font-size: 40px; }
h2{ font-size: 32px; }
h3{ font-size: 24px; }
h4{ font-size: 20px; }
h5{ font-size: 17px; }
h6{
font-size: 14px;
letter-spacing: .06em;
text-transform: uppercase;
color: #e08a3e;
margin-bottom: 1.2em;
}
p{ margin: 0 0 1em; }
blockquote{
margin: 1.5em 0;
padding: 1em 1.5em;
border-left: 4px solid #4f9a63;
background: #ffffff;
color: #5c6b6e;
font-style: italic;
}
/* ---------- 2. Универсальный контейнер (аналог .grid-container) ---------- */
.grid-container,
.site,
.inside-header,
.inside-navigation,
.inside-article,
.inside-page-header,
.entry-content,
.site-footer{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
/* ---------- 3. Шапка сайта / логотип ---------- */
.site-header{
background-color: #ffffff;
border-bottom: 1px solid #ececec;
}
.inside-header{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 16px;
padding-bottom: 16px;
}
.site-logo img,
.header-image{
max-height: 60px;
width: auto;
}
.site-description{ color: #8a9497; font-size: 14px; }
/* ---------- 4. Меню (десктоп + мобильное сворачивание) ---------- */
.main-navigation{
background-color: #ffffff;
}
.main-navigation .inside-navigation{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 8px;
padding-bottom: 8px;
}
/* список пунктов меню — горизонтально на десктопе */
.main-navigation ul.menu,
.main-navigation .main-nav ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.main-navigation .menu-item{ position: relative; }
.main-navigation .menu-item > a{
display: block;
padding: 12px 18px;
color: #4a5658;
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
letter-spacing: .03em;
transition: color .15s ease, background-color .15s ease;
}
.main-navigation .menu-item > a:hover,
.main-navigation .menu-item.current-menu-item > a{
color: #4f9a63;
background-color: #f2f7f3;
border-radius: 6px;
}
/* выпадающие подменю (если есть дочерние пункты) */
.main-navigation ul ul{
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: #ffffff;
border: 1px solid #ececec;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
display: none;
z-index: 50;
}
.main-navigation .menu-item:hover > ul{ display: block; }
.main-navigation ul ul .menu-item > a{ padding: 10px 16px; }
/* кнопка "Contacter le coach" / .gb-button в меню */
.main-navigation .menu-bar-items{ display: flex; align-items: center; gap: 12px; }
/* кнопка-гамбургер */
.menu-toggle{
display: none;
align-items: center;
gap: 8px;
background: none;
border: 1px solid #dfe4e2;
border-radius: 6px;
padding: 8px 12px;
color: #3a4446;
cursor: pointer;
font-size: 14px;
}
.menu-toggle svg{ width: 20px; height: 20px; fill: currentColor; }
.menu-toggle .mobile-menu-control-wrapper svg:nth-child(2),
.menu-toggle svg + svg{ display: none; } /* иконка "крестик" скрыта пока меню закрыто */
.main-navigation.toggled .menu-toggle svg:first-child{ display: none; }
.main-navigation.toggled .menu-toggle svg:last-child{ display: inline-block; }
/* мобильная адаптация — меню сворачивается в список, JS темы (menu.min.js)
переключает класс .toggled на