:root{
/* Цвета */
--bg: #F8FAFC; /* светлый фон */
--surface: #FFFFFF; /* поверхности/карточки */
--ink: #0F172A; /* основной текст */
--muted: #475569; /* вторичный текст */
--border: #E2E8F0; /* границы/разделители */
--primary: #0284C7; /* акцент (синие CTA) */
--primary-2: #0EA5E9; /* градиент/hover к первичному */
--teal: #14B8A6; /* доверие/бейджи/ссылки */
--success: #16A34A;
--warning: #F59E0B;
--danger: #DC2626;
/* Радиусы */
--r-s: 10px;
--r-m: 16px;
--r-l: 20px;
--r-xl: 24px;
/* Тени */
--shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
--shadow-2: 0 6px 16px rgba(2,132,199,.12);
--shadow-3: 0 12px 28px rgba(2,132,199,.18);
/* Интервалы */
--space-1: 8px;
--space-2: 12px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
/* Анимации */
--ease: cubic-bezier(.22,.61,.36,1);
--dur-1: 120ms;
--dur-2: 180ms;
--dur-3: 260ms;
--text-max-width: 68ch;
}
/* Подключение шрифтов (можешь вынести в как ) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=PT+Serif:wght@400;700&display=swap');
*,
*::before,
*::after{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:17px;
line-height:1.6;
}
p{
margin:0 0 var(--space-2);
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:17px;
line-height:1.65;
max-width:var(--text-max-width);
text-align:left;
}
/* Базовые ссылки: teal + подчёркивание по hover */
a{
color:var(--teal);
text-decoration:none;
transition:color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
a:hover{
text-decoration:underline;
}
/* Меню в шапке — отдельно, чтобы не стало бирюзовым */
.header-nav a{
color:var(--muted);
text-decoration:none;
border-bottom:2px solid transparent;
}
.header-nav a:hover{
color:var(--ink);
border-color:var(--teal);
}
.num-accent,
.stat-number,
.badge-pd .score{
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight:700;
font-variant-numeric:tabular-nums; /* ровные столбцы */
font-feature-settings:"tnum" 1;
}
h1,
h2,
h3,
.eyebrow-serif{
font-family:"PT Serif","Georgia","Times New Roman",serif;
font-weight:700;
color:var(--ink);
margin:0 0 var(--space-2);
}
.quote-title,
.review-title{
font-size:20px;
line-height:1.35;
margin-bottom:8px;
}
/* Текст внутри цитат — остаётся Inter, чтобы не было много засечек */
.quote p,
.review-card p{
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:16px;
line-height:1.6;
}
h1{
font-size:44px;
line-height:1.15;
letter-spacing:0.01em;
}
h2{
font-size:32px;
line-height:1.25;
letter-spacing:0.008em;
}
h3{
font-size:24px;
line-height:1.3;
font-weight:600; /* подзаголовки 600 */
}
/* Центр — только для крупных заголовков/коротких подпунктов */
h1,
.hero h1,
.section-title--center{
text-align:center;
}
h2,
h3{
text-align:left;
}
.section-intro{
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:17px;
line-height:1.65;
max-width:var(--text-max-width);
}
ul,
ol{
margin:0 0 var(--space-2);
padding-left:1.4em;
max-width:var(--text-max-width);
}
li{
margin-bottom:4px;
}
li::marker{
/* на полтона темнее текста, без «чёрных плит» */
color:color-mix(in srgb, var(--ink) 90%, #000 10%);
}
/* Hero заголовок чуть крупнее на десктопе */
@media (min-width:1024px){
body{
font-size:18px;
}
p,
.section-intro{
font-size:18px;
line-height:1.7;
}
h1{
font-size:48px; /* +4px к базовому */
}
h2{
font-size:34px; /* +2px к базовому диапазону */
}
}
/* Hero фон с лёгким градиентом снизу */
.hero{
padding:var(--space-7) 0 var(--space-6);
background:
linear-gradient(180deg, rgba(2,132,199,0.04) 0%, rgba(2,132,199,0) 52%),
var(--bg);
}
/* Карточка специалиста/подсказка */
.hero-note{
background:#F0F9FF;
border:1px solid #CCE9FB;
border-radius:var(--r-l);
padding:14px 16px;
font-size:14px;
color:var(--muted);
}
/* Базовая кнопка */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 18px;
border-radius:var(--r-l);
border:1px solid transparent;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:all var(--dur-2) var(--ease);
white-space:nowrap;
}
/* Подзаголовки/мини-заголовки внутри карточек */
.card h3,
.card .card-title{
font-weight:600;
}
/* Primary CTA (главные) */
.btn-primary{
padding:14px 22px;
border-radius:var(--r-l);
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
color:#fff;
font-weight:700;
box-shadow:var(--shadow-2);
}
.btn-primary:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-3);
filter:saturate(1.05);
}
.btn-primary:active{
transform:translateY(0);
box-shadow:var(--shadow-2);
}
.btn-primary:disabled{
opacity:.55;
cursor:not-allowed;
box-shadow:none;
}
/* Secondary (вторичные) — + алиас для старого .btn-outline */
.btn-secondary,
.btn-outline{
padding:12px 20px;
border-radius:var(--r-l);
background:#E6F4FB;
color:#0B5D80;
border:1px solid #CDEBF8;
}
.btn-secondary:hover,
.btn-outline:hover{
background:#D9F0FA;
border-color:#BFE7F7;
}
/* Ghost (ссылко-кнопка) */
.btn-ghost{
padding:10px 14px;
border-radius:var(--r-s);
color:var(--primary);
border:1px solid var(--border);
background:transparent;
}
.btn-ghost:hover{
background:#F1F8FD;
}
/* Sticky шапка + тень при прокрутке */
header{
position:sticky;
top:0;
z-index:50;
background:rgba(248,250,252,0.96);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
transition:box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
header.header--scrolled{
box-shadow:0 4px 12px rgba(15,23,42,.06);
}
/* Фокус для клавиатуры */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
outline:3px solid rgba(2,132,199,.35);
outline-offset:2px;
}
/* Меньше анимаций для тех, у кого стоит системная настройка */
@media (prefers-reduced-motion: reduce){
*{
animation-duration:0.001ms !important;
animation-iteration-count:1 !important;
transition-duration:0.001ms !important;
scroll-behavior:auto !important;
}
}
/* Унифицированные карточки блоков */
.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-l);
padding:var(--space-5);
box-shadow:var(--shadow-1);
transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card:hover{
box-shadow:var(--shadow-2);
transform:translateY(-2px);
}
.spacer{
height:40px; /* увеличивай как нужно: 20–120px */
}
.spacer1{
height:20px; /* увеличивай как нужно: 20–120px */
}
/* Бейджи */
.badge{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:6px;
padding:6px 10px;
border-radius:999px;
font-weight:600;
font-size:12px;
background:#E6FFFB;
color:#0F766E;
border:1px solid #CFFAFE;
}
/* Проблемные карточки с индикатором слева (С чем приходят) */
.card.problem{
position:relative;
}
.card.problem::before{
content:"";
position:absolute;
left:-1px;
top:12px;
bottom:12px;
width:3px;
border-radius:3px;
background:#BAE6FD;
}
/* Шаги работы: номер-пилюля */
.step{
background:var(--surface);
border-radius:var(--r-l);
border:1px solid var(--border);
padding:var(--space-4);
box-shadow:var(--shadow-1);
}
.step .num{
width:32px;
height:32px;
border-radius:999px;
background:#E0F2FE;
color:#075985;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:14px;
margin-bottom:var(--space-2);
}
/* Рекомендуемая карточка (Первая консультация) */
.card.recommended{
border-color:#BFE7F7;
box-shadow:var(--shadow-2);
position:relative;
}
.card.recommended::after{
position:absolute;
top:14px;
right:14px;
background:#DCFCE7;
color:#7efab0;
border:1px solid #BBF7D0;
padding:4px 8px;
border-radius:999px;
font-size:12px;
font-weight:700;
}
/* FAQ (нижний) */
.faq-list{
margin-top: var(--space-4);
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-item{
border-radius: var(--r-l);
border: 1px solid var(--border);
padding: 12px 16px;
background: var(--surface);
}
.faq-item summary{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
font-weight: 500;
color: var(--ink);
}
.faq-item summary::-webkit-details-marker{
display: none;
}
.faq-item .q{
flex: 1;
}
.faq-item .plus{
display: inline-flex;
width: 20px;
justify-content: center;
font-size: 18px;
line-height: 1;
color: var(--muted);
}
.faq-item[open] .plus{
color: var(--primary);
}
.faq-item p{
margin-top: 8px;
font-size: 14px;
color: var(--muted);
}
.card.recommended::before{
content:"Рекомендуем";
position:absolute;
top:14px;
right:14px;
background:#DBEAFE; /* фон */
color:#1D4ED8; /* текст */
border:1px solid #BFDBFE; /* обводка */
padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; z-index:2;
}
/* Поля форм (экспресс, контакты и т.п.) */
.input{
height:48px;
padding:0 14px;
border-radius:var(--r-m);
border:1px solid var(--border);
background:#fff;
font-size:14px;
}
.textarea{
min-height:96px;
padding:10px 14px;
border-radius:var(--r-m);
border:1px solid var(--border);
background:#fff;
font-size:14px;
resize:vertical;
}
.input:focus,
.textarea:focus{
outline:none;
border-color:#93C5FD;
box-shadow:0 0 0 4px rgba(59,130,246,.15);
}
.helper{
font-size:12px;
color:var(--muted);
margin-top:6px;
}
/* Ошибки/успех форм */
.input.error,
.textarea.error{
border-color:var(--danger);
box-shadow:0 0 0 3px rgba(220,38,38,.15);
}
.error-text{
color:var(--danger);
font-size:12px;
margin-top:6px;
}
.success-banner{
background:#ECFDF5;
border:1px solid #A7F3D0;
color:#065F46;
border-radius:var(--r-m);
padding:12px 14px;
font-size:14px;
}
/* Экспресс-диагностика — выравнивание под новые поля */
.express{
background:#E0F2FE;
border-radius:var(--r-xl);
padding:var(--space-5);
border:1px solid #BAE6FD;
box-shadow:var(--shadow-1);
}
.express-form{
display:grid;
gap:var(--space-3);
}
.express .field label{
font-size:13px;
color:var(--muted);
}
/* Отзывы — «сливки» */
.quote,
.review-card{
border-radius:var(--r-l);
border:1px solid #D1FAE5;
background:#F9FFFE;
padding:var(--space-4);
}
.review-tag{
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--teal);
margin-bottom:4px;
}
/* Бейдж ПроДокторов справа */
.badge-pd{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 12px;
border-radius:999px;
background:#ECFEFF;
color:#0F766E;
font-size:13px;
border:1px solid #CFFAFE;
}
.badge-pd .score{
font-weight:700;
}
.mark{
background: linear-gradient(#fff 60%, #FFF1A6 60%);
}
/* Карточка с фото */
.hero-photo-main {
display: flex;
gap: 16px;
align-items: center;
}
.hero-photo-main img {
width: 220px;
height: 220px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 18px rgba(15, 23, 42, 0.20);
}
.hero-photo-meta {
font-size: 14px;
}
/* На мобильных фото и текст по центру, как раньше */
@media (max-width: 960px) {
.hero-photo-main {
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-photo-meta {
text-align: center;
}
}
/* Футер CTA чуть темнее */
.footer-cta {
background:#F1F5F9;
border-top:1px solid var(--border);
padding:var(--space-5) 24px var(--space-6);
}
/* Мобильный закреплённый CTA-бар (ниже фолда) */
.mobile-cta-bar {
position:fixed;
left:0;
right:0;
bottom:0;
z-index:70;
background:rgba(248,250,252,0.97);
box-shadow:var(--shadow-2);
padding:8px 16px;
display:none;
}
.mobile-cta-inner {
max-width:1200px;
margin:0 auto;
display:flex;
gap:8px;
}
/* Отступы секций */
section.hero {
padding-top:var(--space-7);
padding-bottom:var(--space-6);
}
main > section:not(.hero) {
padding:var(--space-15) 0;
}
/* === 1. БУРГЕР: ЗАМЕНИ СВОЙ СТАРЫЙ БЛОК НА ЭТОТ === */
/* (вместо "Бургер по умолчанию скрыт (покажем только на мобилке)") */
.burger {
display: none; /* по умолчанию скрыт, показываем через @media */
position: relative;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid var(--border);
background: #fff;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.burger-line {
width: 16px;
height: 2px;
border-radius: 999px;
background: var(--ink);
transition:
transform var(--dur-2) var(--ease),
opacity var(--dur-2) var(--ease);
}
.burger-line + .burger-line {
margin-top: 4px;
}
/* Анимация превращения в крестик */
body.nav-open .burger-line:nth-child(1) {
transform: translateY(3px) rotate(45deg);
}
body.nav-open .burger-line:nth-child(2) {
transform: translateY(-3px) rotate(-45deg);
}
/* === 2. МОБИЛЬНЫЙ ВАРИАНТ: КАК БЫЛО, ТОЛЬКО ВНУТРИ @media === */
/* этот блок ЗАМЕНИТЬ твой текущий кусок от "/* Мобильные стили * /" и "/* Мобильное выпадающее меню * /" до закрывающей скобки перед .container */
@media (max-width: 768px) {
.header-inner {
gap: 12px;
}
main {
display: block;
width: 100%;
}
/* Мобильное выпадающее меню (сверху) */
.header-nav {
position: fixed;
left: 0;
right: 0;
top: 72px;
background: rgba(248, 250, 252, 0.97);
border-bottom: 1px solid var(--border);
transform: translateY(-120%);
transition: transform var(--dur-2) var(--ease);
padding: 12px 24px 16px;
z-index: 60;
}
body.nav-open .header-nav {
transform: translateY(0);
}
.header-nav ul {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
/* Прячем CTA в шапке, оставляем только бургер */
.header-cta {
display: none;
}
.burger {
display: inline-flex;
}
/* Секции на мобилке чуть ближе, но не вплотную */
main > section {
padding: var(--space-10) 0;
}
/* Мобильный CTA-бар */
.mobile-cta-bar {
display: block;
left: 0;
right: 0;
bottom: 0;
padding: 10px 12px;
background: rgba(248,250,252,0.97);
box-shadow: var(--shadow-2);
}
.mobile-cta-inner {
display: flex;
gap: 8px;
width: 100%;
max-width: 100%;
margin: 0;
}
.mobile-cta-inner .btn {
flex: 1 1 0 !important;
min-width: 0;
width: auto;
padding: 6px 10px !important;
font-size: 14px;
height: 40px;
justify-content: center;
white-space: nowrap;
}
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 24px;
}
/* Шапка */
header{
position:sticky;
top:0;
z-index:50;
background:rgba(248,250,252,0.96);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
transition:box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
header.header--scrolled{
box-shadow:0 4px 12px rgba(15,23,42,.06);
}
/* Лэйаут шапки */
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:76px;
gap:32px;
}
/* Лого */
.logo{
font-family:"Manrope","Inter",system-ui,sans-serif;
font-weight:700;
font-size:20px;
letter-spacing:0.12em;
text-transform:uppercase;
white-space:nowrap;
}
/* Десктоп-меню */
.header-nav{
flex:1 1 auto;
}
.header-nav ul{
display:flex;
justify-content:center;
align-items:center;
gap:24px;
list-style:none;
margin:0;
padding:0;
}
/* Стильные пункты меню */
.header-nav a{
position:relative;
display:inline-flex;
align-items:center;
padding:6px 14px;
border-radius:999px;
font-size:15px;
font-weight:500;
color:var(--muted);
text-decoration:none;
transition:
color var(--dur-1) var(--ease),
background var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease);
}
/* Подчёркивание-акцент снизу */
.header-nav a::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:-4px;
height:2px;
border-radius:999px;
background:var(--primary);
transform:scaleX(0);
transform-origin:center;
transition:transform var(--dur-2) var(--ease);
}
/* Hover / фокус по наведению */
.header-nav a:hover{
color:var(--ink);
background:rgba(255,255,255,0.9);
box-shadow:var(--shadow-1);
}
.header-nav a:hover::after{
transform:scaleX(1);
}
/* Активный пункт (поставь класс is-active на нужный ) */
.header-nav a.is-active{
color:var(--ink);
background:var(--surface);
box-shadow:var(--shadow-2);
}
.header-nav a.is-active::after{
transform:scaleX(1);
}
/* CTA справа в шапке */
.header-cta{
display:flex;
align-items:center;
gap:12px;
font-size:14px;
white-space:nowrap;
}
.header-cta span{
color:var(--muted);
}
.hero-grid {
display: flex;
align-items: flex-start;
gap: var(--space-6);
}
.hero-grid > div {
flex: 1 1 0;
}
.hero-subtitle{
margin-top: 12px;
font-size: 16px;
line-height: 1.6;
color: var(--muted);
max-width: 620px;
}
.hero-actions{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0 12px;
}
.hero-actions .btn{
padding-inline: 20px;
}
.hero-microcopy{
font-size: 14px;
color: var(--muted);
max-width: 520px;
}
/* Быстрые доказательства рядом с фото */
.hero-proof-list{
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 16px;
font-size: 14px;
color: var(--muted);
}
.hero-proof-item{
display: flex;
align-items: flex-start;
gap: 6px;
max-width: 280px;
}
.hero-proof-dot{
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--teal);
margin-top: 7px;
flex-shrink: 0;
}
.hero-proof-item a{
color: var(--teal);
text-decoration: none;
}
.hero-proof-item a:hover{
text-decoration: underline;
}
.eyebrow{
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--teal);
font-weight: 600;
}
/* Карточки "С чем приходят" */
.cards-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.card-footer{
margin-top: 16px;
}
.hero-head .eyebrow{
text-align:center;
width:100%;
display:block;
}
.hero-stats{
margin-top: 16px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 32px;
}
.hero-stat-line{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 6px;
font-size: 15px;
color: var(--muted);
}
.hero-stat-number{
color: var(--ink);
}
.hero-stat-label{
font-weight: 500;
}
/* на мобильных в колонку */
@media (max-width: 640px){
.hero-stats{
flex-direction: column;
align-items: center;
gap: 4px;
}
.hero-stat-line{
font-size: 14px;
text-align: center;
}
}
.card-link{
font-size:14px;
background:#DBEAFE; /* светло-синий фон */
color:#1E3A8A; /* глубокий синий текст */
border:2px solid #BFDBFE; /* мягкая голубая рамка */
padding:6px 10px; /* <<< ДОБАВЛЕНО: увеличивает фон вокруг текста */
border-radius:20px;
text-decoration:none;
display:inline-block; /* чтобы корректно работал padding + border-radius */
}
.card-link:hover{
text-decoration: underline;
}
/* Форматы и стоимость */
.formats-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
/* Мини-FAQ под форматами */
.mini-faq{
margin-top: var(--space-4);
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
font-size: 14px;
color: var(--muted);
}
.mini-faq-item{
flex: 1 1 260px;
}
.price{
margin: 12px 0 16px;
font-weight: 600;
}
/* Экспресс-диагностика */
.consent{
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: var(--muted);
margin: 8px 0 12px;
}
.consent input[type="checkbox"]{
margin-top: 2px;
}
/* Отзывы */
.reviews-head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.review-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
.badge-pd{
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: #F1F5F9;
font-size: 12px;
color: var(--muted);
text-decoration: none;
}
.badge-pd .score{
font-weight: 600;
color: var(--ink);
}
.badge-pd:hover{
border-color: var(--teal);
}
/* Футер и контакты */
.footer-cta-inner{
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
align-items: center;
justify-content: space-between;
}
.footer-legal{
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 12px;
color: var(--muted);
}
.footer-legal a{
color: var(--muted);
text-decoration: underline;
}
.footer-legal a:hover{
color: var(--ink);
}
/* Плавающая кнопка WhatsApp */
.floating-whatsapp{
position: fixed;
right: 18px;
bottom: 88px;
z-index: 80;
width: 52px;
height: 52px;
border-radius: 999px;
background: #22C55E;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 10px 25px rgba(22, 163, 74, .4);
font-size: 22px;
}
.floating-whatsapp span{
line-height: 1;
}
.floating-whatsapp:hover{
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(22, 163, 74, .5);
}
/* Обёртка шагов */
.steps{
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-4);
}
/* Hero и сетки на мобильных */
@media (max-width: 1024px){
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
gap: var(--space-6);
align-items: flex-start;
}
/* Привязка блоков к областям грида */
.hero-head {
grid-area: head;
}
.hero-photo {
grid-area: photo;
}
.hero-body {
grid-area: body;
}
.cards-grid,
.formats-grid,
.review-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px){
body{
font-size:16px;
}
p,
.section-intro{
font-size:16px;
line-height:1.6;
}
h1{
font-size:32px;
line-height:1.2;
}
/* Поднять hero ближе к шапке */
.hero {
padding-top: 24px !important; /* Было var(--space-7) ≈ 64–72px */
}
.hero-grid{
display: flex;
flex-direction: column;
gap: 20px; /* чтобы остались аккуратные расстояния */
}
/* порядок блоков */
.hero-head{
order: 1;
}
.hero-photo{
order: 2;
}
.hero-note{
order: 3;
}
.hero-body{
order: 4;
margin-top: 8px; /* поджимаем ближе */
}
h2{
font-size:26px;
line-height:1.25;
}
h3{
font-size:20px;
line-height:1.3;
}
.hero{
padding-top: var(--space-6);
}
.sticky-cta{ position:fixed; bottom:12px; left:12px; right:12px; z-index:50; display:flex; gap:10px;
background:#fff; border:1px solid #E2E8F0; border-radius:16px; padding:10px; box-shadow:0 6px 16px rgba(2,132,199,.12);}
.sticky-cta .btn-primary{ flex:1; justify-content:center; }
}
.hero-grid {
grid-template-columns: 1fr;
grid-template-areas:
"head"
"photo"
"body";
}
.hero h1{
font-size: 28px;
line-height: 1.25;
}
.hero-actions{
flex-direction: column;
}
.hero-actions .btn{
width: 100%;
justify-content: center;
}
.hero-microcopy,
.hero-subtitle{
max-width: 100%;
}
.cards-grid,
.formats-grid,
.review-grid{
grid-template-columns: 1fr;
}
.footer-cta-inner{
flex-direction: column;
align-items: flex-start;
}
.floating-whatsapp{
right: 0;
left: 0;
bottom: 80px; /* над CTA-баром */
width: auto;
height: 56px;
border-radius: 14px;
margin: 0 12px; /* небольшой боковой отступ */
font-size: 20px;
display: flex;
justify-content: center;
}
}
.card{
position: relative; overflow: hidden;
background:#fff; border:1px solid #E2E8F0; border-radius:20px;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(2,132,199,.12); }
.card > *{ position: relative; z-index:1; }
.card::after{ content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none; }
/* 2) Сеточка-точки (намёк на структуру) */
.card.dots::after{
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in srgb, var(--tone, #BAE6FD) 28%, transparent) 1px,
transparent 1px);
background-size:14px 14px;
mask-image: radial-gradient(220px 220px at 0 0, #000 60%, transparent 61%);
}
/* секция с диагональю */
.section-hero{ position: relative; isolation: isolate; }
/* диагональный паттерн — ребёнок секции */
.section-hero::after{
content:"";
position:absolute; inset:0;
/* тут твой repeating-linear-gradient(...) */
z-index: 0; /* фон позади контента */
pointer-events: none; /* чтобы не перехватывал клики */
}
/* сам блок с фото и мета — выше фона */
.hero-photo{ position: relative; z-index: 1; }
/* 3) Лёгкие диагональные штрихи (энергия/динамика) */
.card.diag::after{
background-image: repeating-linear-gradient(
45deg,
color-mix(in srgb, var(--tone, #BAE6FD) 5%, transparent) 0 10px,
transparent 10px 20px
);
mask-image: linear-gradient(to top, transparent 40%, #000 75%);
opacity: 0.25; /* общая «приглушённость» */
}
/* 5) Волна снизу (про «постепенно/мягко») */
.card.wave::after{
background:
radial-gradient(120% 60% at 50% 120%,
color-mix(in srgb, var(--tone, #A7F3D0) 18%, transparent) 20%,
transparent 60%);
}
/* 6) «Пятно»-блоб (органичность/особенности) */
.card.blob::after{
background:
radial-gradient(260px 180px at 15% 20%,
color-mix(in srgb, var(--tone, #BBF7D0) 18%, transparent) 30%,
transparent 70%),
radial-gradient(200px 140px at 85% 100%,
color-mix(in srgb, var(--tone, #BBF7D0) 10%, transparent) 20%,
transparent 70%);
}
/* === Правильное поведение кнопок WhatsApp и CTA-бара === */
/* ДЕСКТОП — виден только плавающий WhatsApp */
@media (min-width: 769px) {
.floating-whatsapp {
display: flex !important;
}
.mobile-cta-bar {
display: none !important;
}
}
/* МОБИЛЬНЫЕ — показываем только 2 кнопки внизу */
@media (max-width: 768px) {
.floating-whatsapp {
display: none !important; /* скрываем плавающую кнопку */
}
.mobile-cta-bar {
display: block !important; /* показываем мобильный бар */
}
}
/* ДЕСКТОП: вернуть обычный круглый значок WhatsApp */
@media (min-width: 769px) {
.floating-whatsapp {
left: auto !important;
right: 18px !important;
bottom: 88px !important;
width: 52px !important;
height: 52px !important;
border-radius: 999px !important;
margin: 0 !important;
font-size: 22px !important;
display: flex !important;
justify-content: center;
}
}
/* ФИНАЛЬНАЯ ЛОГИКА КНОПОК */
/* ДЕСКТОП: только круглый значок WhatsApp, без мобильного бара */
@media (min-width: 769px) {
.floating-whatsapp{
display:flex !important;
position:fixed;
right:18px !important;
bottom:88px !important;
width:52px !important;
height:52px !important;
border-radius:999px !important;
margin:0 !important;
align-items:center;
justify-content:center;
font-size:22px !important;
}
.mobile-cta-bar{
display:none !important;
}
}
/* МОБИЛЬНЫЕ: только sticky-бар, кнопки ОДНА ПОД ДРУГОЙ */
/* Мобильный sticky-бар: 2 кнопки в ряд, не вылезают за экран */
/* Мобильный sticky-бар: 2 кнопки в ряд, НИЧЕГО не вылезает за экран */
@media (max-width: 768px) {
/* Стоп-оверфлоу на всей странице */
html,
body{
max-width:100%;
overflow-x:hidden; /* убираем горизонтальный скролл */
}
.mobile-cta-bar{
position:fixed;
left:0;
right:0;
bottom:0;
width:100%;
padding:8px 12px;
box-sizing:border-box; /* паддинги внутри 100% */
z-index:70;
}
.mobile-cta-inner{
display:flex;
flex-direction:row;
gap:8px;
width:100%;
max-width:100%;
margin:0;
}
.mobile-cta-inner .btn{
flex:1 1 0;
min-width:0; /* разрешаем ужиматься */
width:auto;
box-sizing:border-box;
white-space:normal; /* текст можно переносить */
text-align:center;
padding:8px 10px;
font-size:14px;
}
}
/* ПК: контент не тянется на всю ширину экрана */
@media (min-width: 1024px) {
/* общий контейнер страницы */
main{
max-width: 1200px; /* можешь поменять на 1000/1100, если хочешь уже колонку */
margin: 0 auto; /* центрируем */
box-sizing: border-box;
}
/* подстраховка для секций внутри main */
main > section{
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
/* подстраховка .container, если где-то она переопределилась */
.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
}
@media (max-width: 768px){
.card.recommended{
padding-top: 45px; /* было, условно, 20px — стало выше, текст ушёл вниз */
}
}
.reviews-badges{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end; /* на ПК обе кнопки вправо от заголовка */
}
/* опционально: на узких экранах можно растянуть/перенести в столбик */
@media (max-width:640px){
.reviews-badges{
justify-content:flex-start;
}
}
.review-grid {
display: grid;
gap: 24px;
}
.review-card {
position: relative;
padding: 20px 20px 28px;
border-radius: 16px;
background: #f7f7fb;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
.review-tag {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.03em;
opacity: 0.8;
}
.review-carousel {
position: relative;
overflow: hidden;
min-height: 80px;
}
.review-slide {
opacity: 0;
visibility: hidden;
transform: translateX(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.review-slide p {
margin: 0;
}
.review-slide.is-active {
position: relative;
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.review-nav {
position: absolute;
bottom: 0;
right: 0;
border: none;
background: #ffffff;
border-radius: 999px;
padding: 4px 8px;
cursor: pointer;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.review-nav.prev {
right: 40px;
}
.review-nav:focus-visible {
outline: 2px solid #444;
outline-offset: 2px;
}
/* сделай так — точки визуально уйдут НИЖЕ текста */
.review-carousel {
position: relative;
overflow: hidden;
min-height: 80px;
padding-bottom: 18px; /* добавили “пол” под текстом */
}
.review-dots {
display: flex;
gap: 6px;
position: absolute;
bottom: 0; /* вместо 4px → ближе к нижней границе блока */
left: 0;
}
.review-dot {
width: 6px;
height: 6px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.1);
padding: 0;
cursor: pointer;
}
.review-dot.is-active {
background: rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) {
.review-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Контейнер для фактов */
.hero-facts{
margin-top:16px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}
/* Базовый стиль */
.hero-fact{
padding:10px 18px;
border-radius:14px;
font-size:15px;
font-weight:600;
line-height:1.3;
display:inline-block;
text-align:center;
}
/* Жёлтая пилюля */
.hero-fact--yellow{
background:#FFF6C7;
color:#6B5700;
border:1px solid #F6E9A8;
}
/* Сиреневая пилюля */
.hero-fact--purple{
background:#F3E8FF; /* мягкий сиреневый фон */
color:#4B2E83; /* глубокий фиолетовый текст */
border:1px solid #E9D5FF; /* светлая сиреневая обводка */
}
/* Зелёная пилюля */
.hero-fact--green{
background:#E3FCE4;
color:#1C5E28;
border:1px solid #C5F5C6;
}
/* Адаптивность */
@media (max-width:640px){
.hero-fact{
font-size:14px;
padding:8px 14px;
}
}
/* Десктопное оформление */
.hero-title-strong{
font-size: 36px;
line-height: 1.2;
font-weight: 700;
text-align: center; /* центрирование */
font-family: "Merriweather", serif; /* академический шрифт */
color: var(--ink);
margin: 0 auto;
max-width: 720px; /* чтобы текст был аккуратнее */
}
/* Мобильная версия */
@media (max-width: 640px){
.hero-title-strong{
font-size: 24px;
line-height: 1.28;
text-align: center; /* оставить центрирование и на мобилке */
}
}
/* Только для ПК */
@media (min-width: 1024px) {
/* Текст "Записаться" рядом с плавающей кнопкой */
.floating-whatsapp::after {
content: "Записаться";
position: absolute;
right: 60px; /* положение текста */
top: 50%;
transform: translateY(-50%);
background: #25D366;
color: #fff;
padding: 8px 14px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
animation: whatsapp-blink 1.3s infinite ease-in-out;
}
/* Анимация привлекательного мигания */
@keyframes whatsapp-blink {
0%, 100% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
50% {
opacity: 0.55;
transform: translateY(-50%) scale(0.92);
}
}
}
/* Нужный фикс, чтобы текст появился справа от кнопки */
.floating-whatsapp {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 99999;
}
.action-with-note {
text-align: center;
}
.btn-note {
margin-top: 6px;
font-size: 12px;
color: #6B7280; /* мягкий серо-синий */
opacity: 0.9;
line-height: 1.35;
font-style: italic; /* ← НАКЛОННЫЙ шрифт */
}
.section-title--center,
h2.section-title--center {
text-align: center;
}
.section-blue {
background: linear-gradient(
180deg,
rgba(2,132,199,0.06) 0%,
rgba(2,132,199,0.03) 40%,
rgba(2,132,199,0.00) 100%
), #E0F2FE;
padding: var(--space-7) 0;
border-top: 1px solid #BAE6FD;
border-bottom: 1px solid #BAE6FD;
}
.section-energetic {
position: relative;
padding: var(--space-7) 0;
background: #E3FCE4; /* нежно-зелёный фон */
isolation: isolate;
}
.section-energetic::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(150% 80% at 50% 120%,
color-mix(in srgb, var(--success) 28%, transparent) 25%,
transparent 60%
);
opacity: 0.40; /* интенсивность волны */
}
.section-calm {
position: relative;
padding: var(--space-7) 0;
background:
linear-gradient(
180deg,
#F8FBFF 0%,
#F0F5FA 100%
);
isolation: isolate;
}
.section-white-shadow {
position: relative;
padding: var(--space-7) 0;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
/* Овальный «баннер» во футере с белым свечением */
.section-gray-pulse {
position: relative;
background: #F9FBFD;
border-radius: 64px; /* овал на десктопе */
padding: 24px 32px;
isolation: isolate;
overflow: visible; /* ВАЖНО: чтобы не резало текст! */
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}
/* Белое свечение по краям */
.section-gray-pulse::before {
content: "";
position: absolute;
inset: -32px; /* расширяем свечение вокруг овала */
border-radius: inherit;
z-index: -1;
background:
radial-gradient(
150% 130% at 50% -10%,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.60) 35%,
transparent 80%
),
radial-gradient(
150% 130% at 50% 110%,
rgba(255,255,255,0.90) 0%,
rgba(255,255,255,0.55) 35%,
transparent 80%
);
}
/* Внутри футера овал ведёт себя как 2 колонки */
.footer-cta-inner.section-gray-pulse {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* МОБИЛЬНАЯ ВЕРСИЯ: делаем прямоугольник, колонки в столбик */
@media (max-width: 768px) {
.footer-cta-inner.section-gray-pulse {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.section-gray-pulse {
border-radius: 18px; /* почти прямоугольник */
padding: 18px 16px;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}
.section-gray-pulse::before {
inset: -16px; /* свечение ближе, чтобы было видно на маленьком экране */
}
}
.cta-section {
margin: 60px 0;
}
.section-gray-pulse-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
width: 100%;
max-width: 420px;
}
/* Ссылка */
.doppsy-link {
position: relative;
display: inline-flex;
align-items: center;
color: #000;
font-weight: 500;
text-decoration: none !important;
cursor: pointer;
transition: transform 0.25s ease, text-shadow 0.25s ease;
z-index: 1;
}
/* Уменьшенная голубая пульсация */
.doppsy-link::before {
content: "";
position: absolute;
inset: -3px; /* ← уменьшенная ширина пульса */
border-radius: 999px;
background: radial-gradient(
circle,
rgba(0, 150, 199, 0.45) 0%,
rgba(0, 150, 199, 0.22) 40%,
rgba(0, 150, 199, 0.0) 80%
);
opacity: 0;
transform: scale(0.7);
z-index: -1;
animation: linkPulseBlue 1.8s ease-out infinite;
}
/* Анимация — голубая мягкая пульсация */
@keyframes linkPulseBlue {
0% {
opacity: 0;
transform: scale(0.7);
}
40% {
opacity: 0.55; /* заметно, но не агрессивно */
transform: scale(1.0);
}
70% {
opacity: 0.0;
transform: scale(1.25);
}
100% {
opacity: 0;
transform: scale(1.25);
}
}
/* Эффект наведения */
.doppsy-link:hover {
transform: scale(1.07);
text-shadow:
0 0 8px rgba(0, 150, 199, 0.6),
0 0 14px rgba(0, 150, 199, 0.35);
}
/* Подсветка при наведении — чуть ярче */
.doppsy-link:hover::before {
opacity: 0.7;
}
.hero-photo-meta,
.hero-note {
text-align: center;
}
.hero-note {
margin: 16px auto 0;
max-width: 420px; /* чтобы текст смотрелся аккуратнее */
}
/* Центровка текста во всех основных блоках */
/* Центруем текст в основных блоках/карточках */
.card p,
.step p,
.review-card p,
.mini-faq-item span,
.express > div p,
.cta-section p,
.hero-note,
.hero-photo-meta p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Центровка заголовков в карточках */
.card h2,
.card h3,
.card h4,
.card .card-title {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Центровка кнопок внутри карточек */
.card a.btn,
.card .btn,
.card .card-link {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Сетка для шагов */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
/* Каждая карточка шага */
.step {
background: #ffffff;
border-radius: 16px;
padding: 18px 20px 20px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
/* Кружок с номером шага */
.step .num {
width: 40px;
height: 40px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: #E0F2FE;
color: #0F172A;
font-weight: 600;
margin-bottom: 10px;
}
/* Заголовки и текст в шагах по центру */
.step h3 {
margin: 0 0 8px;
text-align: center;
}
.step p {
margin: 0;
text-align: center;
}
.section-energetic .steps + div {
text-align: center;
}
.section-energetic .steps + div .btn-primary {
display: inline-block;
}
/* Центровка блока "Не уверены, с чего начать?" */
#express .express > div {
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 580px; /* аккуратная ширина, чтобы не растягивался на всю строку */
}
#express .express > div h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#express .express > div p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* 1. Шапка на мобильных всегда прижата к верху и едет со скроллом */
@media (max-width: 768px) {
header {
position: sticky;
top: 0;
z-index: 60; /* выше контента и оверлея */
background: var(--bg, #ffffff); /* чтобы не просвечивал текст под шапкой */
}
}
/* 2. Пульсирующий бургер на мобильных */
@media (max-width: 768px) {
.burger {
position: relative;
animation: burgerPulse 1.9s ease-out infinite;
z-index: 61; /* чуть выше, чем header, на всякий случай */
}
@keyframes burgerPulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.55); /* голубой ореол вокруг */
}
60% {
transform: scale(1.08);
box-shadow: 0 0 0 10px rgba(2, 132, 199, 0); /* кольцо расходится и тает */
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
}
}
}
body.nav-open .burger {
animation: none;
}
/* Фиксированная шапка на мобильных */
@media (max-width: 768px) {
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 70; /* выше контента */
background: var(--bg, #ffffff); /* фон, чтобы текст под шапкой не просвечивал */
}
/* Чтобы контент не заезжал под шапку */
body {
padding-top: 64px; /* подгони при необходимости (50–80px) под реальную высоту шапки */
}
}
/* ==== КАРУСЕЛЬ СЕРТИФИКАТОВ (1 слайд за раз) ==== */
.carousel-wrapper {
position: relative;
width: 100%;
max-width: 520px; /* разумная ширина под сертификат */
margin: 40px auto;
overflow: hidden; /* всё лишнее прячем */
}
/* Лента слайдов */
.carousel-container {
display: flex;
flex-wrap: nowrap;
transform: translateX(0);
transition: transform 0.4s ease;
}
/* Один слайд = один сертификат */
.carousel-container img {
flex: 0 0 100%; /* каждый слайд занимает 100% ширины wrapper */
width: 100%;
height: auto;
max-height: 360px; /* разумная высота на десктопе */
object-fit: contain; /* ничего не режем */
border-radius: 10px;
background: #f3f4f6;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.carousel-container img:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
}
/* Стрелки управления */
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
background: rgba(255, 255, 255, 0.95);
border: none;
width: 40px;
height: 40px;
border-radius: 999px;
font-size: 20px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.carousel-button:hover {
background: #f3f4f6;
transform: translateY(-50%) scale(1.06);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.42);
}
.carousel-button.left {
left: 8px;
}
.carousel-button.right {
right: 8px;
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
.carousel-wrapper {
max-width: 100%;
margin: 24px auto 32px;
padding: 0 16px;
}
.carousel-container img {
max-height: 300px;
}
}
@media (max-width: 480px) {
.carousel-wrapper {
padding: 0 12px;
}
.carousel-container img {
max-height: 240px;
border-radius: 8px;
}
.carousel-button {
width: 34px;
height: 34px;
font-size: 18px;
}
}
/* ================================
HERO-ABOUT — герой ОБО МНЕ
================================ */
.hero-about {
padding: 60px 0 40px;
text-align: center;
background: transparent;
}
.hero-about .container {
max-width: 700px;
margin: 0 auto;
}
/* Центрируем всю сетку */
.hero-about .hero-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
/* Фото */
.hero-about .hero-photo-main img {
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto;
border: 4px solid #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
/* Имя */
.hero-about .hero-body h1 {
margin: 10px 0 0;
font-size: 28px;
font-weight: 700;
color: #111827;
line-height: 1.2;
}
/* Подпись */
.hero-about .hero-note p {
margin: 0;
font-size: 15px;
color: #475569;
}
.hero-about .hero-note a {
text-decoration: none;
font-weight: 600;
color: #0284C7;
}
.hero-about .hero-note a:hover {
text-decoration: underline;
}
/* Мобильный адаптив */
@media (max-width: 480px) {
.hero-about {
padding: 40px 0 20px;
}
.hero-about .hero-photo-main img {
width: 150px;
height: 150px;
}
.hero-about .hero-body h1 {
font-size: 22px;
}
}
html {
scroll-padding-top: 80px; /* высота твоей шапки */
}
.hero-diag.hero-diag--sunburst {
margin: 50px auto 40px;
padding: 0 16px;
}
.hero-diag-inner.hero-diag-inner--sunburst {
max-width: 1000px;
margin: 0 auto;
padding: 32px 28px 36px;
border-radius: 22px;
/* Красный → Оранжевый → Жёлтый */
background:
radial-gradient(circle at top left,
rgba(255, 76, 64, 0.95) 0%, /* яркий красный */
rgba(255, 140, 60, 0.95) 40%, /* тёплый оранжевый */
rgba(255, 200, 55, 0.95) 100% /* яркий солнечный жёлтый */
);
color: #fff9eb;
text-align: center;
box-shadow: 0 20px 45px rgba(0,0,0,0.35);
position: relative;
overflow: hidden;
}
/* Эффект солнечного свечения */
.hero-diag-inner.hero-diag-inner--sunburst::before {
content: "";
position: absolute;
inset: -45%;
background:
radial-gradient(circle at 0% 0%,
rgba(255, 255, 255, 0.35) 0%,
transparent 55%
),
radial-gradient(circle at 100% 0%,
rgba(255, 235, 140, 0.45) 0%,
transparent 55%
);
pointer-events: none;
z-index: 0;
}
/* Заголовок */
.hero-diag-title--sunburst {
position: relative;
z-index: 2;
font-size: 32px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 12px;
color: #fff8e1;
}
/* Текст */
.hero-diag-text--sunburst {
position: relative;
z-index: 2;
font-size: 18px;
max-width: 650px;
margin: 0 auto 20px;
color: #fffdf3;
}
/* Акцентная плашка */
.hero-diag-accent--sunburst {
position: relative;
z-index: 2;
display: inline-block;
padding: 12px 18px;
border-radius: 14px;
background: rgba(88, 28, 15, 0.55);
border: 1px solid rgba(255, 245, 180, 0.7);
font-size: 15px;
color: #fffbee;
overflow: visible;
}
/* Пульсация — огненное свечение */
.hero-diag-accent--sunburst::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 150, 50, 0.55) 55%,
rgba(255, 150, 50, 0) 100%
);
filter: blur(14px);
opacity: 0;
z-index: -1;
animation: sunburst-glow 2.6s ease-in-out infinite;
}
@keyframes sunburst-glow {
0% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.85;
transform: scale(1.16);
}
100% {
opacity: 0;
transform: scale(1);
}
}
/* Адаптив */
@media (max-width: 640px) {
.hero-diag-inner.hero-diag-inner--sunburst {
padding: 22px 18px 26px;
border-radius: 18px;
}
.hero-diag-title--sunburst {
font-size: 26px;
}
.hero-diag-text--sunburst {
font-size: 15px;
}
}
/* Затемнение фона при открытом мобильном меню */
.nav-overlay {
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: rgba(15, 23, 42, 0.35); /* тёмный полупрозрачный фон */
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-2) var(--ease);
z-index: 55; /* выше контента, но ниже шапки/меню */
}
/* Когда меню открыто (класс уже вешается на body из JS) */
body.nav-open .nav-overlay {
opacity: 1;
pointer-events: auto;
}