/* ==========================================================================
СИТИ ДЕНТАЛ · дизайн-система «Эксперт-досье», ревизия 2
Вход — вопрос врача, а не самопрезентация. Один акцент — шалфей.
========================================================================== */
/* ---------- 0. Токены ---------- */
:root {
/* палитра (согласована, не менять) */
--bg: #FFFFFF;
--bg-soft: #FBFCFC;
--ink: #1D2224;
--text: #5B6367;
--text-strong: #2e3538; /* основной читаемый текст услуг/статей: темнее --text, мягче --ink */
--accent: #5D7D6D;
--accent-dark: #43604F;
--accent-light: #E3EAE6;
--accent-mist: #F1F5F2;
/* производные */
--line: #E7EAEA;
--ph-bg: #EDEDEB;
--ph-text: #9A9C97;
--shadow-soft: 0 2px 6px rgba(29, 34, 36, .04);
--shadow-lift: 0 14px 34px -12px rgba(29, 34, 36, .16);
/* типографика */
--font-body: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
/* editorial-сериф: Georgia (Win/mac) → локальные аналоги (Linux).
DejaVu Serif раньше Liberation Serif намеренно: Liberation — клон Times,
а именно «дефолтный Times» и убивает вид; DejaVu ближе к Georgia по духу. */
--font-display: Georgia, "Century Schoolbook L", "DejaVu Serif", "Liberation Serif", "Noto Serif", serif;
/* сетка и ритм */
--container: 1160px;
--gutter: clamp(20px, 4vw, 40px);
--section-y: clamp(64px, 9vw, 120px);
--radius: 14px;
--radius-lg: 20px;
--ease: cubic-bezier(.22, .8, .3, 1);
}
/* ---------- 1. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
overflow-x: hidden; /* важно: именно на html */
scroll-behavior: smooth;
scroll-padding-top: 88px; /* якоря не ныряют под фикс-шапку */
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: hidden;
padding-top: 74px; /* компенсация фиксированной шапки */
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); font-weight: 500; line-height: 1.18; margin: 0 0 .5em; }
/* крупные кегли (40px+) — легче и плотнее: намеренный editorial-сериф */
h1, h2 { font-weight: 400; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; display: block; }
b, strong { color: var(--ink); font-weight: 600; }
small { font-size: .82em; }
button { font: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 880px; }
.section { padding: var(--section-y) 0; }
/* секции-«карты»: мягкий фон, большое скругление, объём */
.section--soft {
position: relative;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: clamp(24px, 3vw, 36px);
margin: 0 clamp(8px, 1.4vw, 24px);
box-shadow: 0 24px 60px -44px rgba(29, 34, 36, .22);
overflow: hidden; /* фолбэк */
overflow: clip; /* clip, а не hidden: фокус/скролл-чейнинг не сдвинет секцию */
}
/* деликатные декоративные формы в фоне карт-секций */
.section--soft::before {
content: "";
position: absolute; top: -140px; right: -120px;
width: 380px; height: 380px; border-radius: 50%;
background: var(--accent-mist);
}
.section--soft::after {
content: "";
position: absolute; bottom: -170px; left: -110px;
width: 330px; height: 330px; border-radius: 50%;
border: 1.5px solid var(--accent-light);
}
.section--soft > .container { position: relative; z-index: 1; }
/* ---------- 2. Атомы: кикер, заголовки, кнопки, бейджи, ссылки ---------- */
.kicker {
color: var(--accent);
font-size: 13.5px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
margin: 0 0 14px;
}
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-title { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.section-lead { font-size: 19px; }
.section-more { margin-top: clamp(28px, 4vw, 44px); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 13px 26px;
border-radius: 999px;
border: 1.5px solid transparent;
font-weight: 600; font-size: 16px; line-height: 1.2;
cursor: pointer; white-space: nowrap;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(67, 96, 79, .5); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn--lg { padding: 16px 32px; font-size: 17px; }
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 999px;
background: var(--accent-mist); color: var(--ink);
font-size: 14px; line-height: 1.4;
}
.badge b { font-weight: 650; }
.badge--rating { border: 1px solid var(--accent-light); }
.badge--time { background: var(--accent-light); color: var(--accent-dark); font-weight: 600; font-size: 13px; }
.link-arrow { font-weight: 600; font-size: 17px; }
.link-arrow::after { content: "→"; margin-left: 8px; transition: margin .25s var(--ease); }
.link-arrow:hover::after { margin-left: 13px; }
.avatar {
width: 44px; height: 44px; flex: 0 0 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--accent-light); color: var(--accent-dark);
font-weight: 650; font-size: 18px;
}
/* ---------- 3. Фото-заглушки (.ph) — заменяются на ![]()
без перевёрстки ---------- */
.ph {
position: relative;
width: 100%;
background: linear-gradient(150deg, #F0F0EE 0%, var(--ph-bg) 55%, #E6E6E3 100%);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex; align-items: flex-end;
box-shadow: 0 18px 40px -26px rgba(29, 34, 36, .28);
}
.ph::before {
content: "";
position: absolute; inset: 0; margin: auto;
width: 44px; height: 36px;
border: 2px solid #D2D3CF; border-radius: 8px;
background:
radial-gradient(circle at 30% 35%, #D2D3CF 4.5px, transparent 5px),
linear-gradient(to top right, transparent 46%, #D2D3CF 47%, #D2D3CF 53%, transparent 54%);
}
/* едва заметная служебная подпись в углу — не плашка */
.ph__label {
position: absolute; z-index: 1;
left: 14px; bottom: 12px;
margin: 0; padding: 0;
background: none;
color: var(--ph-text);
font-size: 10px; line-height: 1.4;
letter-spacing: .12em; text-transform: uppercase;
opacity: .75;
}
.ph--round { border-radius: 50%; }
.ph--round .ph__label { margin: 0 auto 16%; }
.ph--portrait { border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--accent-mist) 0%, var(--ph-bg) 60%, #E6E6E3 100%); }
/* ---------- 4. Header ---------- */
.header {
/* fixed, а не sticky: overflow-x:hidden на html/body ломает sticky.
без backdrop-filter: он делает header containing block'ом для fixed-шторки меню */
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: #fff;
border-bottom: 1px solid transparent;
transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* тонкая линия + тень появляются только после начала скролла (JS: scrollY > 40) */
.header.is-scrolled {
border-bottom-color: var(--line);
box-shadow: 0 10px 30px -18px rgba(29, 34, 36, .18);
}
.header__in { display: flex; align-items: center; gap: 24px; min-height: 74px; }
.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__mark { width: 36px; height: 36px; color: var(--accent); flex: 0 0 auto; }
.logo__text { font-family: var(--font-display); font-size: 20px; line-height: 1.05; display: flex; flex-direction: column; }
.logo__text small { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav__link { color: var(--ink); font-size: 15.5px; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav__link:hover { color: var(--accent-dark); border-bottom-color: var(--accent-light); }
.nav__extra { display: none; }
/* пункт с выпадашкой */
.nav__item { position: relative; }
.nav__toggle {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; border-bottom: 2px solid transparent;
cursor: pointer; padding: 6px 0;
}
.nav__caret { width: 11px; height: 11px; flex: 0 0 auto; transition: transform .25s var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
.nav__drop {
position: absolute; top: calc(100% + 12px); left: -14px; z-index: 70;
min-width: 236px;
display: flex; flex-direction: column; gap: 2px;
background: #fff;
border: 1px solid var(--line); border-radius: 14px;
padding: 10px;
box-shadow: 0 26px 54px -22px rgba(29, 34, 36, .3);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
/* невидимый «мостик» между пунктом и панелью — ховер не рвётся */
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__item.is-open > .nav__drop {
opacity: 1; visibility: visible; transform: none;
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav__drop a {
display: block; padding: 9px 12px;
border-radius: 9px;
color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.35;
}
.nav__drop a:hover { background: var(--accent-mist); color: var(--accent-dark); }
/* «Дети» — капсула */
.nav__link--pill {
background: var(--accent-light); color: var(--accent-dark);
padding: 7px 18px; border-radius: 999px; border-bottom: 0;
font-weight: 600;
transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__link--pill:hover { background: var(--accent); color: #fff; border-bottom-color: transparent; }
.header__phone { color: var(--ink); font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.header__phone:hover { color: var(--accent-dark); }
.header__cta { padding: 10px 22px; font-size: 15px; }
.burger { display: none; }
/* ---------- 4a. Шапка поверх hero: прозрачное состояние до скролла ---------- */
.header:not(.is-scrolled) { background: transparent; }
.header:not(.is-scrolled) .logo,
.header:not(.is-scrolled) .logo:hover { color: #fff; }
.header:not(.is-scrolled) .logo__mark { color: #fff; }
.header:not(.is-scrolled) .logo__text small { color: rgba(255, 255, 255, .72); }
.header:not(.is-scrolled) .nav__link { color: #fff; }
.header:not(.is-scrolled) .nav__link:hover { color: var(--accent-light); border-bottom-color: rgba(255, 255, 255, .35); }
.header:not(.is-scrolled) .nav__link--pill { background: rgba(255, 255, 255, .14); color: #fff; border: 0; }
.header:not(.is-scrolled) .nav__link--pill:hover { background: var(--accent-light); color: var(--accent-dark); }
.header:not(.is-scrolled) .header__phone { color: #fff; }
.header:not(.is-scrolled) .header__phone:hover { color: var(--accent-light); }
.header:not(.is-scrolled) .header__cta {
background: transparent; color: #fff;
border-color: rgba(255, 255, 255, .8);
}
.header:not(.is-scrolled) .header__cta:hover { background: #fff; color: var(--ink); box-shadow: none; }
.header:not(.is-scrolled) .burger span { background: #fff; }
/* открытая мобильная шторка — всегда на белом: возвращаем тёмные цвета */
.header:not(.is-scrolled) .nav.is-open .nav__link { color: var(--ink); }
.header:not(.is-scrolled) .nav.is-open .nav__link--pill { background: var(--accent-light); color: var(--accent-dark); }
/* ---------- 5. Hero — фото-фон, текст поверх ---------- */
.hero {
position: relative;
min-height: 85vh;
margin-top: -74px; /* фото заезжает под прозрачную шапку */
display: flex; align-items: center;
overflow: hidden;
color: #fff;
}
.hero__bg {
position: absolute; inset: 0;
border-radius: 0; box-shadow: none;
/* осмысленный фон-фолбэк: глубокий графитово-шалфейный градиент.
Слот data-photo сохранён — фото ляжет поверх без перевёрстки. */
background: linear-gradient(115deg, #242B2E 0%, #2E3739 45%, #3B4644 78%, #46524D 100%);
}
/* деликатный паттерн: тонкие концентрические дуги в шалфее, правый край */
.hero__bg::before {
content: "";
position: absolute; inset: auto;
width: auto; height: auto; margin: 0;
border: 0; border-radius: 0;
top: -40%; right: -22%; bottom: -40%; left: 30%;
background: repeating-radial-gradient(
circle at 78% 46%,
transparent 0,
transparent 76px,
rgba(158, 189, 172, .07) 76px,
rgba(158, 189, 172, .07) 78px
);
}
/* мягкое световое пятно за текстом */
.hero__bg::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 75% at 22% 42%, rgba(93, 125, 109, .28) 0%, rgba(93, 125, 109, .10) 45%, transparent 72%);
}
.hero__bg .ph__label { display: none; }
.hero__shade {
position: absolute; inset: 0;
/* контент hero стоит справа — темним правую часть кадра, вывеска слева дышит */
background:
linear-gradient(270deg, rgba(29, 34, 36, .84) 0%, rgba(29, 34, 36, .62) 42%, rgba(29, 34, 36, .22) 74%, rgba(29, 34, 36, .05) 100%),
linear-gradient(0deg, rgba(29, 34, 36, .5) 0%, rgba(29, 34, 36, 0) 40%),
linear-gradient(180deg, rgba(29, 34, 36, .35) 0%, rgba(29, 34, 36, 0) 22%);
}
.hero__in {
position: relative; z-index: 1;
width: 100%;
padding-top: calc(clamp(56px, 8vw, 110px) + 74px); /* +74px — компенсация заезда под шапку */
padding-bottom: clamp(56px, 8vw, 110px);
}
.hero__content { max-width: 640px; }
.hero__kicker {
color: var(--accent-light); font-size: 13px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
margin-bottom: clamp(16px, 2.4vw, 28px);
}
.hero__title {
color: #fff;
font-size: clamp(38px, 4.8vw, 68px);
letter-spacing: -.015em;
margin: 0 0 18px;
text-shadow: 0 2px 24px rgba(29, 34, 36, .35);
}
.hero__lead { color: rgba(255, 255, 255, .88); font-size: clamp(16px, 1.4vw, 19px); max-width: 520px; margin-bottom: clamp(24px, 3vw, 36px); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--accent-mist); color: var(--ink); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(29, 34, 36, .45); }
.hero__note { margin-top: clamp(18px, 2.4vw, 26px); font-size: 15px; color: rgba(255, 255, 255, .75); }
.hero__note a { color: #fff; font-weight: 600; white-space: nowrap; }
.hero__note a:hover { color: var(--accent-light); }
/* метрика-чип поверх фото, справа-снизу */
.hero__chip {
/* сдвинут левее угла: справа-снизу живёт плавающая кнопка (.fab) */
position: absolute; right: calc(var(--gutter) + 76px); bottom: clamp(24px, 4vw, 48px);
display: flex; align-items: center; gap: 14px;
background: #fff; color: var(--ink);
border-radius: 16px;
padding: 14px 22px;
box-shadow: 0 18px 44px -18px rgba(29, 34, 36, .45);
}
.hero__chip-num {
font-family: var(--font-display);
font-size: 34px; line-height: 1;
color: var(--accent-dark);
font-variant-numeric: tabular-nums;
}
.hero__chip-text { font-size: 13px; line-height: 1.35; color: var(--text); }
/* ---------- 5c. Услуги — бенто с офферами ---------- */
.serv {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"big big a b"
"big big c d"
"e e f f";
gap: clamp(14px, 1.6vw, 20px);
perspective: 1400px;
}
.serv__tile {
position: relative; display: flex; flex-direction: column;
border-radius: 20px;
background: var(--bg);
border: 1px solid var(--line);
padding: clamp(20px, 2.2vw, 30px);
overflow: hidden;
box-shadow: 0 14px 38px -24px rgba(29, 34, 36, .28), 0 2px 6px rgba(29, 34, 36, .04);
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
transform-style: preserve-3d;
will-change: transform;
}
.serv__tile:hover { box-shadow: 0 30px 60px -26px rgba(29, 34, 36, .32), 0 2px 6px rgba(29, 34, 36, .05); }
.serv__tile:nth-child(2) { grid-area: a; }
.serv__tile:nth-child(3) { grid-area: b; }
.serv__tile:nth-child(4) { grid-area: c; }
.serv__tile:nth-child(5) { grid-area: d; }
.serv__tile:nth-child(6) { grid-area: e; }
.serv__tile:nth-child(7) { grid-area: f; }
.serv__title {
font-size: clamp(21px, 1.9vw, 26px);
line-height: 1.22;
margin: 0 0 10px;
}
.serv__text { font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.serv__link { margin-top: auto; font-weight: 600; font-size: 15px; color: var(--accent-dark); }
.serv__link::after { content: "→"; margin-left: 7px; display: inline-block; transition: transform .25s var(--ease); }
.serv__tile:hover .serv__link::after { transform: translateX(4px); }
/* большая плитка с фото */
.serv__tile--big { grid-area: big; padding: 0; }
.serv__ph { flex: 1 1 auto; min-height: 240px; border-radius: 0; box-shadow: none; }
.serv__big-body { padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.serv__title--big { font-size: clamp(24px, 2.2vw, 30px); margin: 0; }
/* чередование «кожи» плиток: графит / шалфей / дымка / белая */
.serv__tile--ink { background: var(--ink); border-color: var(--ink); }
.serv__tile--ink .serv__title { color: #fff; }
.serv__tile--ink .serv__text { color: rgba(255, 255, 255, .78); }
.serv__tile--ink .serv__link { color: var(--accent-light); }
.serv__tile--accent { background: var(--accent); border-color: var(--accent); }
.serv__tile--accent .serv__title { color: #fff; }
.serv__tile--accent .serv__text { color: rgba(255, 255, 255, .88); }
.serv__tile--accent .serv__link { color: #fff; }
.serv__tile--mist { background: var(--accent-mist); border-color: var(--accent-light); }
.serv__tile--light { background: var(--accent-light); border-color: transparent; }
.serv__tile--wide { flex-direction: column; justify-content: center; }
/* ---------- 5a. Лента фактов (marquee) ---------- */
.marquee {
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-soft);
padding: 15px 0;
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee-run 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
display: flex; align-items: center; gap: 34px;
padding-right: 34px;
white-space: nowrap;
font-family: var(--font-display);
font-size: 16.5px; color: var(--ink);
}
.marquee__dot { color: var(--accent); font-weight: 700; }
@keyframes marquee-run { to { transform: translateX(-50%); } }
/* ---------- 6. Карточки (.card) и сетки ---------- */
.cards-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
display: block;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(20px, 2.4vw, 28px);
box-shadow: var(--shadow-soft);
}
.card__title { font-size: 21px; margin-bottom: 10px; }
.card__text { font-size: 15.5px; color: var(--text); margin-bottom: 18px; }
/* карточки «какие случаи решаем» на страницах услуг — читаемый основной текст */
.card--symptom .card__text { font-size: 16px; line-height: 1.65; color: var(--text-strong); }
.card__link { color: var(--accent); font-weight: 600; font-size: 15px; }
.card__link::after { content: "→"; margin-left: 7px; display: inline-block; transition: transform .25s var(--ease); }
/* симптомная карточка: спокойный ховер — подъём, тень, шалфейная рамка */
.card--symptom { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card--symptom:hover {
transform: translateY(-5px);
border-color: var(--accent);
box-shadow: var(--shadow-lift);
}
.card--symptom:hover .card__link { color: var(--accent-dark); }
.card--symptom:hover .card__link::after { transform: translateX(4px); }
.card--flat { background: transparent; border: 0; box-shadow: none; padding: 0; }
.card__icon {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 16px;
background: var(--accent-light); color: var(--accent-dark);
margin-bottom: 18px;
}
.card__icon svg { width: 30px; height: 30px; }
/* подложки иконок нарочно разные — не «штамп» */
.card__icon--mist { background: var(--accent-mist); border: 1px solid var(--accent-light); border-radius: 50%; }
.card__icon--light { background: var(--accent-light); border-radius: 16px; }
.card__icon--outline { background: var(--bg); border: 1.5px solid var(--accent-light); border-radius: 16px; color: var(--accent); }
/* стоп-сигнал: пасхалка */
.card__icon--stop { cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.card__icon--stop:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); }
.card__hint { font-size: 13px; color: var(--accent-dark); opacity: .75; margin-top: 10px; }
html.is-paused *, html.is-paused *::before, html.is-paused *::after {
animation-play-state: paused !important;
transition-duration: 0s !important;
}
/* ---------- 7. Основатель: фото + карточка-цитата внахлёст ---------- */
.founder {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.founder__text .section-title { font-size: clamp(26px, 3vw, 38px); line-height: 1.28; }
.founder__media { position: relative; padding: 0 0 clamp(48px, 6vw, 72px) 0; }
.founder__photo {
width: min(78%, 460px);
margin-left: auto;
}
.founder__photo .ph__label { top: 12px; bottom: auto; } /* подпись сверху — не под карточкой */
.founder__card {
position: absolute; left: 0; bottom: 0;
max-width: min(62%, 420px);
margin: 0;
background: var(--accent-dark); color: #fff;
border-radius: 20px;
padding: clamp(20px, 2.4vw, 30px);
box-shadow: 0 26px 54px -22px rgba(29, 34, 36, .45);
}
.founder__card p {
font-family: var(--font-display);
font-size: clamp(15.5px, 1.3vw, 17.5px);
line-height: 1.55;
color: #fff;
margin: 0 0 14px;
}
.founder__card footer { font-size: 14.5px; font-weight: 600; color: var(--accent-light); line-height: 1.4; }
.founder__card footer small { font-weight: 400; color: rgba(255, 255, 255, .72); }
/* ---------- 8. Цифры — компактная полоса карточек (.stat-card) ---------- */
.section--stats { padding: clamp(20px, 3vw, 36px) 0; }
.stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(12px, 1.6vw, 20px);
}
.stat-card {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 20px 22px;
box-shadow: var(--shadow-soft);
}
.stat-card__num {
display: block;
font-family: var(--font-display);
font-size: clamp(32px, 3vw, 42px);
letter-spacing: -.015em;
color: var(--ink); line-height: 1.1;
font-variant-numeric: tabular-nums;
margin-bottom: 6px;
}
.stat-card__text { display: block; font-size: 13.5px; line-height: 1.5; }
/* ---------- 8a. Технологии (.tech) ---------- */
.section--tech { padding-top: clamp(36px, 5vw, 64px); }
.tech__top {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(24px, 4vw, 64px);
align-items: center;
margin-bottom: clamp(28px, 4vw, 44px);
}
.tech__top .section-head { margin-bottom: 0; }
.tech__manifest {
background: var(--ink);
border-radius: 20px;
padding: clamp(24px, 2.8vw, 34px);
box-shadow: 0 26px 54px -28px rgba(29, 34, 36, .5);
}
.tech__manifest p {
font-family: var(--font-display);
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.5;
color: #fff;
margin: 0;
}
.tech-card {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(20px, 2.4vw, 28px);
box-shadow: var(--shadow-soft);
}
.tech-card__text { font-size: 15px; line-height: 1.6; margin: 0; }
/* ---------- 9. Врачи — сетка портретных карточек (.team-card) ---------- */
.team-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 24px);
}
.team-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 12px 12px 20px;
box-shadow: var(--shadow-soft);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.team-card:hover {
transform: translateY(-6px);
border-color: var(--accent-light);
box-shadow: var(--shadow-lift);
}
.team-card__photo { border-radius: 16px; }
.team-card__photo .ph__label { display: none; }
.team-card__body { padding: 16px 8px 0; }
.team-card__name { font-size: clamp(19px, 1.6vw, 22px); margin: 0 0 4px; }
.team-card__role { font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; }
.team-card__quote {
font-size: 13.5px; line-height: 1.55; color: var(--ink);
padding-left: 12px; border-left: 3px solid var(--accent-light);
margin: 0;
transition: border-color .25s var(--ease);
}
.team-card:hover .team-card__quote { border-left-color: var(--accent); }
/* карточка врача — целиком ссылка на персональную страницу */
a.team-card { display: block; color: inherit; cursor: pointer; }
.team-card__more {
display: inline-block; margin-top: 12px; padding: 0 8px 0 0;
font-size: 13.5px; font-weight: 600; color: var(--accent-dark);
}
.team-card__more::after { content: "→"; margin-left: 6px; transition: margin .25s var(--ease); }
.team-card:hover .team-card__more::after { margin-left: 11px; }
/* ---------- 10. Триаж — фирменная сцена «честного плана» ---------- */
.triage__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.triage__col {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(20px, 2.4vw, 28px);
box-shadow: var(--shadow-soft);
border-top: 3px solid var(--line);
}
.triage__col-title {
font-family: var(--font-body); font-size: 14px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.triage__col--urgent { border-top-color: var(--ink); }
.triage__col--urgent .triage__col-title { color: var(--ink); }
.triage__col--wait { border-top-color: var(--accent); }
.triage__col--wait .triage__col-title { color: var(--accent-dark); }
.triage__col--skip { background: var(--accent-mist); border-color: var(--accent-light); border-top-color: var(--accent); }
.triage__col--skip .triage__col-title { color: var(--accent-dark); border-bottom-color: var(--accent-light); }
.triage-card {
background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
padding: 14px 16px; margin-bottom: 12px;
font-size: 15px; line-height: 1.5; color: var(--ink);
box-shadow: var(--shadow-soft);
}
.triage-card:last-child { margin-bottom: 0; }
.triage-card__meta { display: block; margin-top: 5px; font-size: 13px; color: var(--text); }
.triage__col--skip .triage-card { border-color: var(--accent-light); }
.triage__col--skip .triage-card__meta { color: var(--accent-dark); }
.triage__note { margin-top: 26px; font-size: 15px; color: var(--text); text-align: center; }
/* карточки заметно, но спокойно раскладываются по стопкам */
/* каскад ужат: суммарно ≤400мс, чтобы при быстром скролле карточки не висели пустыми */
.triage.is-in .triage-card { animation: triage-drop .25s var(--ease) both; }
.triage.is-in .triage__col:nth-child(1) .triage-card:nth-of-type(1) { animation-delay: 0s; }
.triage.is-in .triage__col:nth-child(1) .triage-card:nth-of-type(2) { animation-delay: .03s; }
.triage.is-in .triage__col:nth-child(2) .triage-card:nth-of-type(1) { animation-delay: .06s; }
.triage.is-in .triage__col:nth-child(2) .triage-card:nth-of-type(2) { animation-delay: .09s; }
.triage.is-in .triage__col:nth-child(3) .triage-card:nth-of-type(1) { animation-delay: .12s; }
.triage.is-in .triage__col:nth-child(3) .triage-card:nth-of-type(2) { animation-delay: .15s; }
/* блок уже проскроллен мимо — карточки сразу в финальном состоянии */
.triage.is-in.is-past .triage-card { animation-duration: 0s; animation-delay: 0s; }
.triage:not(.is-in) .triage-card { opacity: 0; }
@keyframes triage-drop {
0% { opacity: 0; transform: translateY(-30px) scale(.97); }
60% { opacity: 1; transform: translateY(3px) scale(1); }
100% { opacity: 1; transform: none; }
}
/* ---------- 11. Таймлайн первого визита (.visit) ---------- */
.visit__track { position: relative; }
.visit__line {
position: absolute; left: 0; right: 0; top: 21px; height: 3px;
background: var(--line); border-radius: 3px; overflow: hidden;
}
.visit__line-fill {
display: block; height: 100%; width: 0%;
background: var(--accent);
transition: width .5s linear;
}
.visit__steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.visit__step { position: relative; padding-top: 64px; }
.visit__dot {
position: absolute; top: 0; left: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--bg); border: 2px solid var(--line);
color: var(--text); font-weight: 650; font-size: 17px;
font-family: var(--font-display);
transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.visit__step.is-active .visit__dot {
background: var(--accent); border-color: var(--accent); color: #fff;
box-shadow: 0 0 0 6px var(--accent-mist);
}
.visit__step-title { font-size: 21px; margin: 14px 0 6px; }
.visit__step-text { font-size: 15px; }
/* ---------- 12. Отзывы: editorial-цитата + компактные карточки + рейтинги ---------- */
.review-feature {
background: var(--ink);
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 72px);
margin-bottom: clamp(18px, 2.4vw, 28px);
box-shadow: 0 26px 54px -28px rgba(29, 34, 36, .5);
}
.review-feature__text {
font-family: var(--font-display);
font-size: clamp(20px, 2.4vw, 29px);
line-height: 1.45;
letter-spacing: -.01em;
color: #fff;
margin: 0 0 clamp(20px, 3vw, 30px);
max-width: 21em;
}
.review-feature__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.review-feature__name { font-weight: 600; color: #fff; font-size: 15.5px; }
.avatar--onink { background: rgba(255, 255, 255, .14); color: var(--accent-light); }
.badge--source {
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .18);
color: var(--accent-light);
font-weight: 600; font-size: 13px;
}
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ratings { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ratings--after { margin-top: clamp(20px, 2.6vw, 28px); }
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.review__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review__name { font-weight: 600; color: var(--ink); font-size: 15.5px; line-height: 1.3; }
.review__meta { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.review__text { font-size: 15px; line-height: 1.66; }
/* ---------- 12a. Карусель отзывов (архитектура под ~20 карточек) ---------- */
.rev-carousel { position: relative; }
.rev-carousel__track {
display: flex; gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4px 2px 8px; /* воздух под тени карточек */
outline: none;
}
.rev-carousel__track::-webkit-scrollbar { display: none; }
.rev-carousel__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.rev-carousel__slide {
flex: 0 0 calc((100% - 40px) / 3); /* ~3 карточки на десктопе */
scroll-snap-align: start;
display: flex; flex-direction: column;
margin: 0;
}
.rev-carousel__nav { display: flex; gap: 12px; margin-top: 20px; }
.rev-carousel__btn {
width: 46px; height: 46px;
border: 0; border-radius: 50%;
background: var(--accent); color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
.rev-carousel__btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.rev-carousel__btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.rev-carousel__btn:disabled { opacity: .35; cursor: default; background: var(--accent); transform: none; }
.rev-carousel__btn svg { width: 18px; height: 18px; }
/* подвал секции отзывов: пилюли площадок + кнопка «Оставить отзыв» */
.rev-foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 16px 24px;
margin-top: clamp(20px, 2.6vw, 28px);
}
.rev-foot .ratings { margin-top: 0; align-items: center; }
.rev-foot__label { width: 100%; font-size: 13.5px; color: var(--text); }
.badge--link { color: var(--ink); transition: border-color .25s var(--ease), background .25s var(--ease); }
.badge--link:hover { border-color: var(--accent); background: var(--accent-light); color: var(--ink); }
/* ---------- 13. История пациента + шторка до/после (.ba) ---------- */
.story {
display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
gap: clamp(32px, 5vw, 72px); align-items: center;
}
.story__quote { margin: 26px 0 0; padding: 22px 26px; background: var(--accent-mist); border-radius: var(--radius); border-left: 3px solid var(--accent); }
.story__quote p { font-size: 16.5px; color: var(--ink); margin-bottom: 10px; }
.story__quote footer { font-size: 14.5px; color: var(--accent-dark); font-weight: 600; }
.ba { position: relative; }
.ba__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.ba__after, .ba__before { border-radius: 0; }
.ba .ph__label { display: none; } /* роли слоёв подписаны тегами До/После */
.ba__before {
position: absolute; inset: 0;
clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0);
background: linear-gradient(150deg, #E9E7E2 0%, #E2E0DB 60%, #DAD8D2 100%);
}
.ba__handle {
position: absolute; top: 0; bottom: 0; left: var(--ba, 50%);
width: 2px; margin-left: -1px;
background: #fff; box-shadow: 0 0 0 .5px rgba(29,34,36,.15);
}
.ba__grip {
position: absolute; top: 50%; left: 50%;
width: 40px; height: 40px; transform: translate(-50%, -50%);
border-radius: 50%; background: #fff;
box-shadow: 0 4px 14px rgba(29,34,36,.22);
}
.ba__grip::before {
content: "◂ ▸"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--accent-dark); font-size: 12px; letter-spacing: 1px;
}
.ba__range {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: ew-resize; margin: 0;
touch-action: none;
}
.ba__tags { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: none; }
.ba__tags span {
background: rgba(255,255,255,.85); border-radius: 8px;
padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--ink);
}
/* ---------- 14. Прайс (.price-table) ---------- */
.price-table { border-top: 1px solid var(--line); }
.price-row {
display: flex; align-items: baseline; gap: 16px;
padding: 20px 14px;
border-bottom: 1px solid var(--line);
border-radius: 10px;
transition: background .25s var(--ease);
}
.price-row:hover { background: var(--accent-mist); }
.price-row__name { color: var(--ink); font-size: 17px; }
.price-row__name small { display: block; color: var(--text); font-size: 13.5px; margin-top: 3px; }
.price-row__dots { flex: 1; border-bottom: 1.5px dotted var(--line); transform: translateY(-4px); min-width: 30px; }
.price-row:hover .price-row__dots { border-color: var(--accent-light); }
.price-row__value { font-weight: 650; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prices__note { margin-top: 26px; font-size: 15.5px; max-width: 640px; }
/* ---------- 15. Жизнь клиники — живая сетка-галерея (.life) ---------- */
.interior__line { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.5; color: var(--ink); max-width: 640px; }
.life {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: clamp(12px, 1.6vw, 18px);
}
.life__item {
position: relative;
border-radius: 16px;
overflow: hidden;
height: clamp(180px, 24vw, 340px);
box-shadow: 0 18px 40px -26px rgba(29, 34, 36, .28);
}
.life__item .ph {
position: absolute; inset: 0;
height: 100%;
border-radius: 0; box-shadow: none;
transition: transform .8s var(--ease);
}
.life__item:hover .ph { transform: scale(1.045); }
/* верхний ряд ~60/40 — крупнее, нижний — три слота */
.life__item--a { grid-column: span 6; height: clamp(240px, 30vw, 420px); }
.life__item--b { grid-column: span 4; height: clamp(240px, 30vw, 420px); }
.life__item--c { grid-column: span 4; }
.life__item--d { grid-column: span 3; }
.life__item--e { grid-column: span 3; }
/* ---------- 16. Форма и контакты ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); }
.contact .section-title { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 30px; }
.form { position: relative; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__field { display: block; margin-bottom: 18px; }
.form__label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.form__label em { display: block; font-style: normal; font-weight: 400; color: var(--text); font-size: 13px; margin-top: 2px; }
.form__input {
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--line); border-radius: 12px;
background: var(--bg); color: var(--ink);
font: inherit; font-size: 16px;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form__input::placeholder { color: #A6ACAF; }
.form__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-mist); }
.form__input--area { resize: vertical; min-height: 88px; }
.form__input--select {
appearance: none; -webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 49%, var(--text) 51%),
linear-gradient(135deg, var(--text) 49%, transparent 51%);
background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
background-size: 5.5px 5.5px;
background-repeat: no-repeat;
padding-right: 42px;
cursor: pointer;
}
.form__input.is-error { border-color: #B4635A; }
.form__submit { margin-top: 6px; min-width: 220px; }
.form__success[hidden] { display: none; }
.form__success {
display: flex; gap: 16px; align-items: flex-start;
margin-top: 22px; padding: 20px 24px;
background: var(--accent-mist); border: 1px solid var(--accent-light); border-radius: var(--radius);
color: var(--text);
}
.form__success svg { width: 40px; height: 40px; flex: 0 0 40px; color: var(--accent); }
.form__success p { font-size: 15px; }
.form.is-sent .form__row, .form.is-sent .form__field, .form.is-sent .form__submit { display: none; }
.contact__list { margin: 0 0 30px; }
.contact__item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact__item:first-child { padding-top: 0; }
.contact__item dt { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.contact__item dd { margin: 0; color: var(--ink); font-size: 16.5px; }
.contact__item dd small { color: var(--text); }
.contact__phone { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.contact__phone:hover { color: var(--accent-dark); }
.guarantee { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; }
.guarantee__title { font-size: 20px; }
.guarantee p { font-size: 14.5px; }
/* ---------- 17. Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 44px 0; }
.footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.logo--footer .logo__text { font-size: 18px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__nav a { color: var(--text); font-size: 14.5px; }
.footer__nav a:hover { color: var(--accent-dark); }
.footer__note { margin-left: auto; font-size: 13px; color: var(--text); text-align: right; }
/* ---------- 17a. Плавающая кнопка-веер (.fab) ---------- */
/* скрим-подложка: гасит контент (включая чип 4.9 и marquee), но лежит ниже пилюль */
.fab-scrim {
position: fixed; inset: 0;
z-index: 80; /* контент/шапка ниже, .fab (90) выше */
background: rgba(29, 34, 36, .35);
opacity: 0; visibility: hidden;
cursor: pointer;
transition: opacity .3s var(--ease), visibility 0s .3s;
}
.fab-scrim.is-visible {
opacity: 1; visibility: visible;
transition: opacity .3s var(--ease);
}
.fab {
position: fixed;
right: clamp(16px, 2.6vw, 28px);
bottom: clamp(16px, 2.6vw, 28px);
z-index: 90; /* над контентом и шапкой, под модалкой */
display: flex; flex-direction: column; align-items: flex-end;
gap: 12px;
}
.fab__btn {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--accent); color: #fff;
border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 16px 34px -12px rgba(67, 96, 79, .6);
transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab__btn:hover { background: var(--accent-dark); transform: translateY(-2px); }
.fab__btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.fab__icon { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.fab.is-open .fab__icon { transform: rotate(45deg); } /* плюс становится крестиком */
.fab__menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab__action {
visibility: hidden; opacity: 0;
transform: translateY(10px);
pointer-events: none;
display: inline-flex; align-items: center; gap: 12px;
background: #fff; color: var(--ink);
border: 1px solid var(--line); border-radius: 999px;
padding: 7px 22px 7px 7px;
font-weight: 600; font-size: 15px; line-height: 1.2;
white-space: nowrap; cursor: pointer;
box-shadow: 0 16px 38px -18px rgba(29, 34, 36, .4);
transition: opacity .3s var(--ease), transform .3s var(--ease),
border-color .25s var(--ease), color .25s var(--ease), visibility 0s .3s;
}
.fab.is-open .fab__action {
visibility: visible; opacity: 1; transform: none; pointer-events: auto;
transition: opacity .3s var(--ease), transform .3s var(--ease),
border-color .25s var(--ease), color .25s var(--ease);
}
/* stagger: нижняя пилюля (ближе к кнопке) раскрывается первой */
.fab.is-open .fab__action:nth-child(4) { transition-delay: 0s; }
.fab.is-open .fab__action:nth-child(3) { transition-delay: .07s; }
.fab.is-open .fab__action:nth-child(2) { transition-delay: .14s; }
.fab.is-open .fab__action:nth-child(1) { transition-delay: .21s; }
.fab__action:hover { border-color: var(--accent); color: var(--accent-dark); }
.fab__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* круглый значок слева в пилюле */
.fab__action-ico {
width: 38px; height: 38px; flex: 0 0 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--accent); color: #fff;
transition: background .25s var(--ease);
}
.fab__action-ico svg { width: 20px; height: 20px; }
.fab__action:hover .fab__action-ico { background: var(--accent-dark); }
/* ---------- 17b. Модалка записи (.modal) ---------- */
.modal {
position: fixed; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: 20px;
visibility: hidden;
transition: visibility 0s .35s;
}
.modal.is-open { visibility: visible; transition: none; }
.modal__overlay {
position: absolute; inset: 0;
background: rgba(29, 34, 36, .55);
opacity: 0;
transition: opacity .3s var(--ease);
cursor: pointer;
}
.modal.is-open .modal__overlay { opacity: 1; }
.modal__card {
position: relative;
width: 100%; max-width: 420px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: #fff;
border-radius: 20px;
padding: clamp(24px, 4vw, 32px);
box-shadow: 0 34px 90px -24px rgba(29, 34, 36, .5);
opacity: 0; transform: translateY(16px) scale(.98);
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.modal.is-open .modal__card { opacity: 1; transform: none; }
.modal__close {
position: absolute; top: 14px; right: 14px;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-soft); color: var(--text);
border: 1px solid var(--line); border-radius: 50%;
cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.modal__close:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-mist); }
.modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal__close svg { width: 18px; height: 18px; }
.modal__title { font-size: 26px; margin: 0 36px 6px 0; }
.modal__sub { font-size: 14.5px; margin-bottom: 20px; }
.modal__agree {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13.5px; line-height: 1.5; color: var(--text);
margin: 2px 0 16px;
cursor: pointer;
}
.modal__check {
width: 18px; height: 18px; flex: 0 0 18px;
margin: 2px 0 0;
accent-color: var(--accent);
cursor: pointer;
}
.modal__check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal__submit { width: 100%; }
.modal__submit:disabled {
opacity: .45; cursor: not-allowed;
transform: none; box-shadow: none;
background: var(--accent);
}
.modal__success[hidden] { display: none; }
.modal__success { display: flex; gap: 14px; align-items: flex-start; color: var(--text); }
.modal__success svg { width: 40px; height: 40px; flex: 0 0 40px; color: var(--accent); }
.modal__success p { font-size: 15px; margin: 0; }
body.modal-lock { overflow: hidden; }
/* ---------- 18. Появление при скролле (.reveal) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal--d1 { transition-delay: .05s; }
.reveal--d2 { transition-delay: .1s; }
.reveal--d3 { transition-delay: .15s; }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- 19. Адаптив ---------- */
/* узкий десктоп: телефон в шапке прячем, чтобы меню не переносилось */
@media (min-width: 1025px) and (max-width: 1140px) {
.header__phone { display: none; }
}
@media (max-width: 1024px) {
.nav { display: none; }
.burger {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
flex: 0 0 44px; width: 44px; height: 44px; padding: 10px;
margin-left: 4px;
background: none; border: 0; cursor: pointer;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header__phone { margin-left: auto; }
/* мобильное меню-шторка */
.nav.is-open {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
position: fixed; top: 74px; left: 0; right: 0; bottom: 0; z-index: 49;
background: var(--bg);
padding: 28px var(--gutter) 40px;
overflow-y: auto;
animation: nav-in .35s var(--ease);
}
.nav.is-open .nav__link { font-size: 22px; font-family: var(--font-display); padding: 10px 0; border: 0; }
.nav.is-open .nav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 26px; }
.nav__phone { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
/* дропдауны в шторке — аккордеоны */
.nav.is-open .nav__item { width: 100%; }
.nav.is-open .nav__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.nav.is-open .nav__caret { width: 15px; height: 15px; color: var(--accent); }
.nav.is-open .nav__drop {
position: static; min-width: 0;
display: none;
opacity: 1; visibility: visible; transform: none;
background: transparent; border: 0; box-shadow: none;
padding: 0 0 8px 4px;
transition: none;
}
.nav.is-open .nav__drop::before { display: none; }
.nav.is-open .nav__item.is-open .nav__drop { display: flex; }
.nav.is-open .nav__drop a { font-size: 17px; font-family: var(--font-body); padding: 9px 10px; color: var(--text); }
.nav.is-open .nav__link--pill {
font-family: var(--font-body); font-size: 18px; font-weight: 600;
padding: 10px 24px; margin-top: 10px; align-self: flex-start;
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
body.nav-lock { overflow: hidden; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.rev-carousel__slide { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 880px) {
.hero { min-height: 74vh; }
.serv {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"big big"
"a b"
"c d"
"e e"
"f f";
}
.serv__ph { min-height: 220px; }
.founder { grid-template-columns: 1fr; }
.founder__photo { width: 100%; margin: 0; }
.founder__media { padding-bottom: 0; }
.founder__card {
position: relative; z-index: 1; /* карточка гарантированно поверх фото */
max-width: none;
margin-top: -24px; /* лёгкий нахлёст — начало цитаты не прячется */
width: calc(100% - clamp(16px, 6vw, 48px));
}
.cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
.story { grid-template-columns: 1fr; }
.contact { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.tech__top { grid-template-columns: 1fr; gap: 24px; }
.life { grid-template-columns: 1fr 1fr; }
.life__item--a { grid-column: 1 / -1; height: clamp(220px, 44vw, 360px); }
.life__item--b, .life__item--c, .life__item--d, .life__item--e { grid-column: auto; height: clamp(150px, 30vw, 250px); }
.triage__cols { grid-template-columns: 1fr; }
.visit__line { display: none; }
.visit__steps { grid-template-columns: 1fr; gap: 0; }
.visit__step { padding: 0 0 30px 62px; }
.visit__step::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 2px; background: var(--line); }
.visit__step:last-child::before { display: none; }
.visit__step.is-active::before { background: var(--accent); }
.visit__step .badge--time { margin-bottom: 4px; }
.visit__step-title { margin-top: 0; }
.footer__note { margin-left: 0; text-align: left; }
}
@media (max-width: 640px) {
body { font-size: 16px; }
.cards-grid--3, .cards-grid--2 { grid-template-columns: 1fr; }
.header__phone { display: none; }
/* бургер целиком в кадре на 390px: суммарная ширина строки ужата,
логотип может ужиматься, кнопки не переносятся */
.header__in { gap: 8px; }
.header__cta { margin-left: auto; padding: 8px 13px; font-size: 13.5px; flex-shrink: 0; }
.logo { min-width: 0; flex-shrink: 1; }
.logo__text { font-size: 17px; white-space: nowrap; }
.logo__text small { display: none; }
.burger { margin-left: 0; flex: 0 0 44px; }
.hero { min-height: 0; }
.hero__in { padding-top: calc(48px + 74px); padding-bottom: 64px; }
.hero__actions .btn { width: 100%; }
.serv { grid-template-columns: 1fr; grid-template-areas: "big" "a" "b" "c" "d" "e" "f"; }
.serv__ph { min-height: 190px; }
.marquee__group { font-size: 14px; gap: 22px; padding-right: 22px; }
.team-card { padding: 8px 8px 16px; }
.team-card__body { padding: 12px 6px 0; }
/* ряды одной высоты, контент по центру — без пустых низов */
.stats-grid { align-items: stretch; }
.stat-card {
padding: 16px 16px;
min-height: 124px;
display: flex; flex-direction: column; justify-content: center;
}
.stat-card__num { font-size: 30px; }
.form__row { grid-template-columns: 1fr; gap: 0; }
/* модалка — шторкой снизу на весь экран */
.modal { padding: 0; align-items: flex-end; }
.modal__card {
max-width: none;
max-height: 94vh;
border-radius: 20px 20px 0 0;
opacity: 1;
transform: translateY(100%);
padding-bottom: 30px;
}
.modal.is-open .modal__card { transform: none; }
.form__submit { width: 100%; }
.card__hint { display: none; } /* пасхалка — только для десктопного ховера */
/* карусель: ~1.2 карточки в кадре, свайп нативный */
.rev-carousel__slide { flex-basis: 82%; }
.rev-foot { flex-direction: column; align-items: flex-start; }
.rev-foot .btn { width: 100%; }
}
@media (max-width: 480px) {
.team-grid { grid-template-columns: 1fr; }
.team-card__photo { aspect-ratio: 4/4.5 !important; } /* портрет чуть ниже на узком экране */
}
/* ---------- 20. Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001s !important;
animation-delay: 0s !important;
transition-duration: .001s !important;
transition-delay: 0s !important; /* глушит и stagger веера, и задержки reveal */
}
.reveal, .triage:not(.is-in) .triage-card { opacity: 1; transform: none; }
.modal { transition: none; }
.life__item:hover .ph { transform: none; }
/* лента — статичная строка */
.marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
.marquee__group { white-space: normal; flex-wrap: wrap; justify-content: center; padding-right: 0; }
.marquee__group[aria-hidden] { display: none; }
}
/* ==========================================================================
КАРТА КОМПОНЕНТОВ (для сборки остальных ~50 страниц)
--------------------------------------------------------------------------
Токены :root — палитра, шрифты, ритм (--section-y, --gutter).
Каркас .container / .container--narrow, .section, .section--soft
(чередование белого и bg-soft задаёт ритм страницы).
Атомы .kicker, .section-head + .section-title + .section-lead,
.btn (--primary/--ghost/--lg), .badge (--rating/--time),
.link-arrow, .avatar.
Вход-вопрос .ask — фирменный hero: вопрос + симптомные карточки как
навигация; переносится на лендинги услуг («Что беспокоит
в улыбке?» и т.п.).
Фото .ph (+ data-photo, aspect-ratio инлайном) — заглушка,
заменяется на ![]()
без перевёрстки; варианты --portrait,
--round.
Карточки .cards-grid (--3) + .card (--symptom: ховер-подъём;
--flat: без рамки, с .card__icon).
Манифест .manifesto — полноширинная цитата с крупной кавычкой,
шаблон «цитаты врача» для внутренних страниц.
Цифры .stats-grid + .stat-card — компактная полоса опорных
фактов (js-count докручивает data-count).
Врач .team-card — портретная карточка (фото 3:4 + имя/роль +
цитата), сетка .team-grid 4/2/1.
Технологии .tech__top (заголовок + тёмный манифест) + .tech-card.
Галерея .life + .life__item (--a..--e) — живая сетка фото
с ховер-зумом, слоты data-photo="life-*".
Окошки .fab (кнопка-веер: пилюли .fab__action, stagger) и
.modal (запись: чекбокс-согласие, success, Esc/подложка).
Триаж .triage + .triage__col (--urgent/--wait/--skip) +
.triage-card — фирменная сцена «честного плана».
Таймлайн .visit__track + .visit__step (+ .is-active, #visitFill)
— шаблон «шагов» для страниц услуг.
Отзыв .review (на базе .card) + .ratings.
До/после .ba (шторка на input range + clip-path) — для кейсов.
Прайс .price-table + .price-row (ховер --accent-mist).
Форма .form (+ .is-sent), .form__input, .form__success.
Контакты .contact__list, .guarantee.
Скролл-въезд .reveal (+ --d1..--d3) — вешается на любой блок.
Пауза html.is-paused — стоп-сигнал останавливает мир на секунду.
========================================================================== */
/* История пациента: факты вместо до/после (вердикт владельца 13.08) */
.story-facts { display: grid; gap: 12px; }
.story-fact {
background: var(--bg-soft); border: 1px solid rgba(29,34,36,.06);
border-radius: 16px; padding: 18px 22px;
display: flex; align-items: baseline; gap: 16px;
}
.story-fact b {
font-family: var(--font-serif, Georgia, serif); font-weight: 400;
font-size: 30px; color: var(--ink); white-space: nowrap;
font-variant-numeric: tabular-nums; letter-spacing: -.015em;
min-width: 128px;
}
.story-fact span { font-size: 14.5px; color: var(--text); line-height: 1.5; }
.story-fact--accent { background: var(--accent-mist); border-color: rgba(93,125,109,.18); }
.story-fact--accent b { color: var(--accent-dark); }
@media (max-width: 640px) {
.story-fact { padding: 14px 16px; gap: 12px; }
.story-fact b { font-size: 24px; min-width: 96px; }
}
/* Фото в слотах: подмена заглушек (position/overflow уже заданы базовым .ph;
переопределять position здесь НЕЛЬЗЯ — ломает absolute у .hero__bg) */
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Фото загружено: фолбэк-слои hero уходят, снимок виден, шейд читает текст */
.hero__bg:has(> img)::before,
.hero__bg:has(> img)::after { display: none; }
.hero__bg > img { z-index: 0; }
.hero__shade { z-index: 1; }
.hero__in { position: relative; z-index: 2; }
/* Портреты: не резать головы */
.ph > img { object-position: center top; }
[data-photo="hero-interior"] > img,
[data-photo="service-hero"] > img,
[data-photo="life-cabinet"] > img,
[data-photo="life-detail"] > img { object-position: center center; }
/* Мобильный кроп hero: уводим обрезанную вывеску из-за текста */
@media (max-width: 640px) {
[data-photo="hero-interior"] > img { object-position: 22% center; }
}
/* Hero: контент справа (вердикт 13.08 — не мешать вывеске на стойке) */
.hero__in { display: flex; justify-content: flex-end; }
.hero__content { max-width: 640px; }
@media (max-width: 880px) { .hero__in { justify-content: flex-start; } }
/* ==========================================================================
Пакет правок 13.08: логотип-знак, мега-меню «Услуги», редизайн отзывов
========================================================================== */
/* ---------- Логотип: растровый знак, две версии (шалфей / белая) ---------- */
.logo__pic { position: relative; width: 48px; height: 40px; flex: 0 0 auto; display: block; }
.logo__img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: contain;
transition: opacity .3s var(--ease);
}
.logo__img--white { opacity: 0; }
.header:not(.is-scrolled) .logo__img--color { opacity: 0; }
.header:not(.is-scrolled) .logo__img--white { opacity: 1; }
.logo--footer .logo__pic { width: 41px; height: 34px; }
/* ---------- Мега-меню «Услуги» (только десктоп) ---------- */
.mega {
position: fixed; left: 0; right: 0; top: 74px; z-index: 70;
background: #fff;
border-top: 1px solid var(--line);
border-radius: 0 0 16px 16px;
box-shadow: 0 40px 80px -32px rgba(29, 34, 36, .38);
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.nav__item.is-open > .mega {
opacity: 1; visibility: visible; transform: none;
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mega__in {
display: grid;
grid-template-columns: 252px minmax(0, 1fr) 264px;
gap: clamp(24px, 3vw, 44px);
align-items: start;
padding-top: 28px; padding-bottom: 32px;
}
/* левая колонка: категории капсулами */
.mega__cats { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mega__cat {
display: block; text-align: left;
background: #fff; color: var(--ink);
border: 1.5px solid var(--line); border-radius: 999px;
padding: 9px 18px;
font-size: 14.5px; font-weight: 600; line-height: 1.3;
cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mega__cat:hover { background: var(--accent-mist); border-color: var(--accent-light); color: var(--accent-dark); }
.mega__cat.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mega__cat--all { color: var(--accent-dark); border-style: dashed; }
.mega__cat--all:hover { background: var(--accent-mist); color: var(--accent-dark); }
/* средняя зона: подпункты активной категории */
.mega__panes { min-height: 96px; }
.mega__pane { display: none; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.mega__pane.is-active { display: flex; }
.mega__pane a {
display: inline-block;
background: var(--bg-soft); color: var(--ink);
border: 1px solid var(--line); border-radius: 999px;
padding: 9px 18px;
font-size: 14.5px; font-weight: 500; line-height: 1.35;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mega__pane a:hover { background: var(--accent-mist); border-color: var(--accent-light); color: var(--accent-dark); }
/* правая колонка: промо-карточка детского приёма */
.mega__promo {
display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
background: var(--accent-mist);
border-radius: 16px;
padding: 12px 12px 16px;
}
.mega__promo-ph { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.mega__promo-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.mega__promo:hover .mega__promo-ph img { transform: scale(1.04); }
.mega__promo-title { font-family: var(--font-display); font-size: 19px; line-height: 1.25; color: var(--ink); padding: 0 4px; }
.mega__promo-btn { padding: 10px 22px; font-size: 14.5px; }
/* десктоп: узкий дропдаун услуг не нужен — его заменяет мега-панель */
@media (min-width: 1025px) {
.nav__item .nav__drop--m { display: none; }
}
/* мобила: мега-панель не рендерим, работает аккордеон в шторке */
@media (max-width: 1024px) {
.mega { display: none; }
}
/* ---------- Отзывы: карточки-«кожа» (mist / белая с рамкой) ---------- */
.rev-carousel__track { align-items: stretch; }
.rev-card {
display: flex; flex-direction: column;
border-radius: 16px;
padding: clamp(20px, 2vw, 26px);
margin: 0;
}
.rev-card--mist { background: var(--accent-mist); border: 1px solid transparent; }
.rev-card--frame { background: #fff; border: 1.5px solid var(--accent-light); }
.rev-card__text {
font-size: 15px; line-height: 1.66; color: var(--text);
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 6;
line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rev-card.is-expanded .rev-card__text {
display: block;
-webkit-line-clamp: none;
line-clamp: none;
overflow: visible;
}
/* раскрытая карточка живёт своей высотой — может быть выше соседей:
пока есть раскрытая, ряд переходит на flex-start, соседи не растягиваются */
.rev-carousel__track.has-expanded { align-items: flex-start; }
.rev-card.is-expanded { align-self: flex-start; }
.rev-card__more {
align-self: flex-start;
background: none; border: 0; padding: 0;
margin: -6px 0 12px;
color: var(--accent-dark); font-weight: 600; font-size: 14px;
cursor: pointer;
border-bottom: 1px solid var(--accent-light);
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.rev-card__more:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rev-card__meta {
margin-top: auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;
padding-top: 14px;
border-top: 1px solid rgba(93, 125, 109, .18);
font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.rev-card--frame .rev-card__meta { border-top-color: var(--line); }
.rev-card__meta b { display: block; font-weight: 600; color: var(--ink); }
.rev-card__foot {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-top: 12px;
}
.rev-card__name { font-weight: 650; color: var(--ink); font-size: 15.5px; }
.rev-card__date { font-size: 12.5px; color: var(--text); white-space: nowrap; }
@media (max-width: 640px) {
.rev-card__meta { grid-template-columns: 1fr; }
}
/* ==========================================================================
Страница «Без страха» (/bez-straha/)
========================================================================== */
/* активный пункт меню */
.nav__link[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent-dark); }
.header:not(.is-scrolled) .nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--accent-light); }
.header:not(.is-scrolled) .nav.is-open .nav__link[aria-current="page"] { color: var(--accent-dark); }
/* hero страницы: спокойный сплит — слова слева, фото-карта справа */
.hero--page { min-height: 0; }
.hero--page .hero__in {
padding-top: calc(clamp(48px, 6vw, 88px) + 74px);
padding-bottom: clamp(48px, 6vw, 88px);
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.hero__lead--page { max-width: 560px; }
.hero__media .ph {
aspect-ratio: 4 / 3.1;
border-radius: var(--radius-lg);
box-shadow: 0 34px 74px -30px rgba(0, 0, 0, .55);
}
/* лейбл слота читается и на тёмном hero — фон-заглушка светлая, оставляем как есть */
/* обещание: крупный editorial-абзац после hero */
.section--promise { padding-bottom: 0; }
.promise { max-width: 860px; }
.promise p {
font-family: var(--font-display);
font-size: clamp(20px, 2.4vw, 27px);
line-height: 1.55;
color: var(--ink);
letter-spacing: -.005em;
}
/* итог под таймлайном визита */
.visit__total {
margin-top: clamp(28px, 4vw, 48px);
max-width: 620px;
background: var(--accent-mist);
border: 1px solid var(--accent-light);
border-radius: var(--radius-lg);
padding: 20px 26px;
}
.visit__total p { font-size: 16.5px; color: var(--text); }
/* фото-полоса перед панелями седации/наркоза */
.duo-media {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(12px, 1.6vw, 18px);
margin-bottom: clamp(20px, 2.6vw, 32px);
}
.duo-media .ph { height: clamp(200px, 24vw, 320px); }
/* седация и наркоз: две панели с честной разницей */
.duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(18px, 2.4vw, 28px);
align-items: stretch;
}
.duo__panel {
display: flex; flex-direction: column;
border-radius: var(--radius-lg);
padding: clamp(26px, 3.2vw, 44px);
}
.duo__panel--mist { background: var(--accent-mist); border: 1px solid var(--accent-light); }
.duo__panel--ink { background: var(--ink); box-shadow: 0 26px 54px -28px rgba(29, 34, 36, .5); }
.duo__title { font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 18px; }
.duo__panel--ink .duo__title { color: #fff; }
.duo__body p { font-size: 15.5px; line-height: 1.66; margin-bottom: 16px; }
.duo__panel--ink .duo__body p { color: rgba(255, 255, 255, .78); }
.duo__panel--ink .duo__body b { color: #fff; }
.duo__price {
margin-top: auto;
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding-top: 20px;
border-top: 1px dashed rgba(93, 125, 109, .4);
}
.duo__panel--ink .duo__price { border-top-color: rgba(255, 255, 255, .22); }
.duo__price-label {
font-size: 12.5px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: var(--accent-dark);
}
.duo__panel--ink .duo__price-label { color: var(--accent-light); }
.duo__price b {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(18px, 1.8vw, 22px); color: var(--ink);
font-variant-numeric: tabular-nums;
}
.duo__panel--ink .duo__price b { color: #fff; }
.duo__price-note { margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
/* «не были 5+ лет» — тёмная сцена, эмоциональное ядро страницы */
.longtime {
position: relative;
background: var(--ink);
border-radius: clamp(24px, 3vw, 36px);
margin: 0 clamp(8px, 1.4vw, 24px);
padding: clamp(64px, 9vw, 120px) 0;
overflow: hidden; /* фолбэк */
overflow: clip;
box-shadow: 0 30px 70px -40px rgba(29, 34, 36, .55);
}
/* те же тихие дуги, что в hero главной — родство сцен */
.longtime::before {
content: "";
position: absolute; top: -30%; right: -18%; bottom: -30%; left: 34%;
background: repeating-radial-gradient(
circle at 80% 44%,
transparent 0,
transparent 76px,
rgba(158, 189, 172, .06) 76px,
rgba(158, 189, 172, .06) 78px
);
pointer-events: none;
}
.longtime__in { position: relative; z-index: 1; max-width: 800px; }
.longtime__lead {
font-family: var(--font-display); font-style: italic;
font-size: clamp(16px, 1.6vw, 19px);
color: var(--accent-light);
margin-bottom: 18px;
}
.longtime__title {
color: #fff;
font-size: clamp(30px, 4.2vw, 54px);
letter-spacing: -.015em;
margin-bottom: clamp(22px, 3vw, 34px);
}
.longtime__body p {
color: rgba(255, 255, 255, .78);
font-size: clamp(16.5px, 1.6vw, 19px);
line-height: 1.72;
margin-bottom: 18px;
}
.longtime__body b { color: #fff; }
.longtime__body em { font-style: italic; color: var(--accent-light); }
.longtime__cta {
margin-top: clamp(26px, 3.4vw, 40px);
display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap;
}
.longtime__hint { font-size: 14.5px; color: rgba(255, 255, 255, .62); max-width: 300px; line-height: 1.5; }
/* FAQ — аккордеон на , без JS */
.faq { max-width: 880px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 22px 4px;
cursor: pointer;
transition: color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.35;
color: var(--ink);
transition: color .25s var(--ease);
}
.faq__item summary:hover .faq__q { color: var(--accent-dark); }
.faq__ico {
position: relative;
flex: 0 0 32px; width: 32px; height: 32px;
border-radius: 50%;
border: 1.5px solid var(--accent-light);
color: var(--accent);
transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.faq__ico::before, .faq__ico::after {
content: "";
position: absolute; top: 50%; left: 50%;
background: currentColor; border-radius: 1px;
}
.faq__ico::before { width: 13px; height: 1.6px; transform: translate(-50%, -50%); }
.faq__ico::after { width: 1.6px; height: 13px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__ico {
background: var(--accent); border-color: var(--accent); color: #fff;
transform: rotate(45deg);
}
.faq__a { padding: 0 56px 26px 4px; max-width: 760px; }
.faq__a p { font-size: 17.5px; line-height: 1.7; color: var(--text-strong); }
/* адаптив страницы */
@media (max-width: 880px) {
.hero__grid { grid-template-columns: 1fr; gap: 28px; }
.hero__media .ph { aspect-ratio: 16 / 10; }
.duo-media { grid-template-columns: 1fr; }
.duo-media .ph { height: clamp(180px, 40vw, 280px); }
.duo-media .ph:last-child { height: clamp(150px, 32vw, 220px); }
.duo { grid-template-columns: 1fr; }
.visit__total { max-width: none; }
}
@media (max-width: 640px) {
.longtime { margin: 0; border-radius: 0; }
.longtime__cta .btn { width: 100%; }
.faq__item summary { padding: 18px 2px; }
.faq__a { padding-right: 40px; }
}
/* ==========================================================================
Страница Врачи (/vrachi/)
========================================================================== */
/* шапка на светлом hero: без «прозрачного» белого состояния — сразу на белом */
.header--onlight:not(.is-scrolled) { background: #fff; }
.header--onlight:not(.is-scrolled) .logo,
.header--onlight:not(.is-scrolled) .logo:hover { color: var(--ink); }
.header--onlight:not(.is-scrolled) .logo__text small { color: var(--text); }
.header--onlight:not(.is-scrolled) .logo__img--color { opacity: 1; }
.header--onlight:not(.is-scrolled) .logo__img--white { opacity: 0; }
.header--onlight:not(.is-scrolled) .nav__link { color: var(--ink); }
.header--onlight:not(.is-scrolled) .nav__link:hover { color: var(--accent-dark); border-bottom-color: var(--accent-light); }
.header--onlight:not(.is-scrolled) .nav__link--pill { background: var(--accent-light); color: var(--accent-dark); }
.header--onlight:not(.is-scrolled) .nav__link--pill:hover { background: var(--accent); color: #fff; }
.header--onlight:not(.is-scrolled) .header__phone { color: var(--ink); }
.header--onlight:not(.is-scrolled) .header__phone:hover { color: var(--accent-dark); }
.header--onlight:not(.is-scrolled) .header__cta { background: var(--accent); color: #fff; border-color: transparent; }
.header--onlight:not(.is-scrolled) .header__cta:hover { background: var(--accent-dark); color: #fff; }
.header--onlight:not(.is-scrolled) .burger span { background: var(--ink); }
.header--onlight:not(.is-scrolled) .nav__link[aria-current="page"] { color: var(--accent-dark); border-bottom-color: var(--accent); }
/* активный пункт «О нас» (страница живёт внутри его дропдауна) */
.nav__toggle.is-current { border-bottom-color: var(--accent); color: var(--accent-dark); }
.header--onlight:not(.is-scrolled) .nav__toggle.is-current { color: var(--accent-dark); }
.nav.is-open .nav__toggle.is-current { color: var(--accent-dark); }
.nav__drop a[aria-current="page"] { background: var(--accent-mist); color: var(--accent-dark); }
/* --- hero: спокойный светлый --- */
.dochero {
position: relative;
background: linear-gradient(180deg, var(--accent-mist) 0%, var(--bg-soft) 72%, var(--bg) 100%);
border-bottom: 1px solid var(--line);
overflow: hidden; /* фолбэк */
overflow: clip;
}
/* тихие фирменные дуги — родство с hero главной, но в светлом */
.dochero::before {
content: "";
position: absolute; top: -46%; right: -20%; bottom: -46%; left: 40%;
background: repeating-radial-gradient(
circle at 78% 46%,
transparent 0,
transparent 76px,
rgba(93, 125, 109, .08) 76px,
rgba(93, 125, 109, .08) 78px
);
pointer-events: none;
}
.dochero__in {
position: relative; z-index: 1;
padding-top: clamp(44px, 6vw, 84px);
padding-bottom: clamp(36px, 5vw, 64px);
}
.dochero__head { max-width: 780px; }
.dochero__title {
font-size: clamp(40px, 5.4vw, 72px);
letter-spacing: -.015em;
margin: 0 0 18px;
}
.dochero__lead { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.7; max-width: 720px; }
/* мини-полоса аватаров-якорей */
.docnav {
display: flex; flex-wrap: wrap; gap: 12px 14px;
margin-top: clamp(28px, 3.6vw, 44px);
}
.docnav__item {
display: inline-flex; align-items: center; gap: 12px;
background: #fff;
border: 1px solid var(--line); border-radius: 999px;
padding: 7px 20px 7px 8px;
box-shadow: var(--shadow-soft);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.docnav__item:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.docnav__ava {
width: 46px; height: 46px; flex: 0 0 46px;
border-radius: 50%; overflow: hidden;
background: var(--accent-light);
display: block;
}
.docnav__ava img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.docnav__who { display: flex; flex-direction: column; line-height: 1.25; }
.docnav__who b { font-weight: 650; color: var(--ink); font-size: 15px; }
.docnav__who small { font-size: 11.5px; color: var(--text); letter-spacing: .02em; }
.docnav__item:hover .docnav__who b { color: var(--accent-dark); }
/* --- досье-блок: фото + текст, чередование --- */
.dossier {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(28px, 4.5vw, 72px);
align-items: start;
}
/* sticky на сайте не работает (overflow-x:hidden на html/body — см. комментарий у .header),
поэтому фото центрируем по высоте текста — блок не заканчивается пустой колонкой */
.dossier__media { align-self: center; }
.dossier__photo { width: 100%; }
.dossier__photo .ph__label { display: none; }
.badge--days { align-items: baseline; }
/* фото справа: только порядок колонок, в DOM фото первым — на мобиле само встаёт сверху */
.dossier--flip .dossier__media { order: 2; }
.dossier--flip .dossier__body { order: 1; }
.dossier__num {
font-size: 12.5px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--accent);
margin: 0 0 12px;
}
.dossier__name { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.015em; margin: 0 0 8px; }
.dossier__role { font-size: 16.5px; font-weight: 600; color: var(--ink); margin: 0 0 clamp(22px, 2.8vw, 32px); }
.dossier__sec { margin-bottom: clamp(18px, 2.4vw, 26px); }
.dossier__sec-title {
font-family: var(--font-body);
font-size: 13px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: var(--accent-dark);
margin: 0 0 10px; padding-bottom: 8px;
border-bottom: 1px solid var(--accent-light);
}
.dossier__sec p { font-size: 15.5px; line-height: 1.7; margin-bottom: 12px; }
.dossier__quote {
margin: clamp(20px, 2.6vw, 28px) 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--accent);
}
.dossier__quote p {
font-family: var(--font-display);
font-size: clamp(17px, 1.7vw, 20px);
line-height: 1.55;
color: var(--ink);
margin: 0;
}
.dossier__foot {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
padding-top: clamp(16px, 2vw, 22px);
border-top: 1px dashed var(--accent-light);
}
.badge--days { background: var(--accent-light); color: var(--accent-dark); font-weight: 500; padding: 8px 16px; }
.badge--days b { color: var(--accent-dark); font-weight: 700; }
/* Ольховская — расширенный блок: крупнее фото и имя, бейдж на снимке */
.dossier--founder { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.dossier--founder .dossier__name { font-size: clamp(34px, 4.2vw, 54px); }
.dossier__photo--tall { box-shadow: 0 30px 64px -28px rgba(29, 34, 36, .4); }
.dossier__flag {
position: absolute; z-index: 1;
top: 16px; left: 16px;
background: var(--accent-dark); color: #fff;
border-radius: 999px;
padding: 7px 18px;
font-size: 13px; font-weight: 650; letter-spacing: .04em;
box-shadow: 0 10px 24px -10px rgba(29, 34, 36, .45);
}
/* --- манифест-факт внизу --- */
.docfact {
position: relative;
background: var(--ink);
border-radius: clamp(24px, 3vw, 36px);
margin: 0 clamp(8px, 1.4vw, 24px) clamp(40px, 6vw, 80px);
padding: clamp(56px, 8vw, 104px) 0;
overflow: hidden; /* фолбэк */
overflow: clip;
box-shadow: 0 30px 70px -40px rgba(29, 34, 36, .55);
}
.docfact::before {
content: "";
position: absolute; top: -30%; right: -18%; bottom: -30%; left: 34%;
background: repeating-radial-gradient(
circle at 80% 44%,
transparent 0,
transparent 76px,
rgba(158, 189, 172, .06) 76px,
rgba(158, 189, 172, .06) 78px
);
pointer-events: none;
}
.docfact__in { position: relative; z-index: 1; max-width: 860px; }
.docfact__kicker {
font-size: 13px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: var(--accent-light);
margin: 0 0 18px;
}
.docfact__line {
font-family: var(--font-display);
font-size: clamp(26px, 3.6vw, 44px);
line-height: 1.35;
letter-spacing: -.012em;
color: #fff;
margin: 0 0 clamp(26px, 3.4vw, 40px);
}
.docfact__cta { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.docfact__hint { font-size: 14.5px; color: rgba(255, 255, 255, .62); line-height: 1.5; max-width: 320px; }
.docfact__hint a { color: #fff; font-weight: 600; white-space: nowrap; }
.docfact__hint a:hover { color: var(--accent-light); }
/* --- адаптив страницы --- */
@media (max-width: 880px) {
.dossier, .dossier--founder { grid-template-columns: 1fr; gap: 24px; }
/* фото всегда над текстом */
.dossier--flip .dossier__media { order: 0; }
.dossier--flip .dossier__body { order: 0; }
.dossier__media { position: static; }
.dossier__photo { max-width: 440px; }
.dossier__photo[style] { aspect-ratio: 4 / 4.4 !important; } /* портрет чуть ниже — меньше «простыни» фото */
.docnav { gap: 10px; }
}
@media (max-width: 640px) {
.docnav__item { padding: 6px 16px 6px 7px; }
.docnav__ava { width: 40px; height: 40px; flex-basis: 40px; }
.docnav__who small { display: none; }
.dossier__photo { max-width: none; }
.dossier__foot .btn { width: 100%; }
.badge--days { width: 100%; justify-content: flex-start; }
.docfact { margin-left: 0; margin-right: 0; border-radius: 0; }
.docfact__cta .btn { width: 100%; }
}
/* ==========================================================================
Витрина команды (/vrachi/) — 4 крупные карточки → персональные страницы
========================================================================== */
.vgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 28px);
}
.vcard {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius, 20px);
overflow: hidden; /* фолбэк */
overflow: clip;
box-shadow: var(--shadow-soft);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.vcard:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.vcard__photo {
position: relative;
display: block;
aspect-ratio: 3 / 4; /* минимум; при высоком тексте колонка растягивается, фото кропится */
background: var(--accent-light);
}
.vcard__photo img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
transition: transform .5s var(--ease);
}
.vcard:hover .vcard__photo img { transform: scale(1.035); }
.vcard__flag {
position: absolute; z-index: 1;
top: 12px; left: 12px;
background: var(--accent-dark); color: #fff;
border-radius: 999px;
padding: 6px 14px;
font-size: 12px; font-weight: 650; letter-spacing: .04em;
box-shadow: 0 10px 24px -10px rgba(29, 34, 36, .45);
}
.vcard__body {
display: flex; flex-direction: column;
padding: clamp(18px, 2.4vw, 30px);
min-width: 0;
}
.vcard__name {
font-family: var(--font-display);
font-size: clamp(21px, 2vw, 27px);
line-height: 1.2;
letter-spacing: -.012em;
color: var(--ink);
margin-bottom: 8px;
transition: color .25s var(--ease);
}
.vcard:hover .vcard__name { color: var(--accent-dark); }
.vcard__role {
font-size: 14px; font-weight: 600;
color: var(--text);
line-height: 1.45;
margin-bottom: 14px;
}
.vcard__fact {
position: relative;
font-size: 14.5px; line-height: 1.55;
color: var(--ink);
padding-left: 14px;
margin-bottom: 18px;
}
.vcard__fact::before {
content: "";
position: absolute; left: 0; top: 4px; bottom: 4px;
width: 3px; border-radius: 2px;
background: var(--accent);
}
.vcard__btn { margin-top: auto; align-self: flex-start; }
.vcard:hover .vcard__btn { border-color: var(--accent); color: var(--accent-dark); }
@media (max-width: 960px) {
.vgrid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 520px) {
.vcard { grid-template-columns: 1fr; }
.vcard__photo { height: auto; aspect-ratio: 3 / 3.2; }
.vcard__btn { align-self: stretch; text-align: center; }
}
/* ==========================================================================
Персональная страница врача (/vrachi/<имя>/)
========================================================================== */
/* --- hero: портрет + имя, светлый градиент как на витрине --- */
.dphero {
position: relative;
background: linear-gradient(180deg, var(--accent-mist) 0%, var(--bg-soft) 72%, var(--bg) 100%);
border-bottom: 1px solid var(--line);
overflow: hidden; /* фолбэк */
overflow: clip;
}
.dphero::before {
content: "";
position: absolute; top: -46%; right: -20%; bottom: -46%; left: 40%;
background: repeating-radial-gradient(
circle at 78% 46%,
transparent 0,
transparent 76px,
rgba(93, 125, 109, .08) 76px,
rgba(93, 125, 109, .08) 78px
);
pointer-events: none;
}
.dphero__in {
position: relative; z-index: 1;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(28px, 4.5vw, 72px);
align-items: center;
padding-top: clamp(36px, 5vw, 64px);
padding-bottom: clamp(36px, 5vw, 64px);
}
.dphero__media { position: relative; }
.dphero__photo {
position: relative;
border-radius: var(--radius, 20px);
overflow: hidden;
box-shadow: 0 30px 64px -28px rgba(29, 34, 36, .4);
background: var(--accent-light);
}
.dphero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dphero__back {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600;
color: var(--accent-dark);
margin-bottom: 18px;
}
.dphero__back:hover { color: var(--accent); }
.dphero__title {
font-size: clamp(34px, 4.6vw, 60px);
letter-spacing: -.015em;
margin: 0 0 12px;
}
.dphero__role {
font-size: clamp(16px, 1.5vw, 18.5px);
font-weight: 600; color: var(--ink);
line-height: 1.5;
margin: 0 0 clamp(20px, 2.6vw, 28px);
}
.dphero__actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
}
/* --- тело досье: те же .dossier__sec / .dossier__quote, но в одну колонку --- */
.dpbody__in { max-width: 780px; }
/* --- отзывы о враче: карточки как в карусели главной, но статичной сеткой --- */
.dprev__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 2vw, 24px);
align-items: start;
margin-bottom: clamp(24px, 3vw, 36px);
}
.dprev__foot { display: flex; justify-content: center; }
/* --- направления: капсулы-ссылки на услуги --- */
.dpdirs__list {
display: flex; flex-wrap: wrap;
gap: 12px 14px;
}
.dpdir {
display: inline-flex; align-items: center; gap: 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 13px 24px;
font-size: 15px; font-weight: 600;
color: var(--ink);
box-shadow: var(--shadow-soft);
transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dpdir::after {
content: "→";
color: var(--accent);
font-weight: 400;
transition: transform .25s var(--ease);
}
.dpdir:hover {
border-color: var(--accent);
color: var(--accent-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.dpdir:hover::after { transform: translateX(3px); }
/* --- финал: ссылка «вся команда» в тёмном манифесте --- */
.docfact__team {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14.5px; font-weight: 600;
color: rgba(255, 255, 255, .72);
}
.docfact__team:hover { color: #fff; }
/* --- адаптив --- */
@media (max-width: 880px) {
.dphero__in { grid-template-columns: 1fr; gap: 24px; }
.dphero__photo { max-width: 440px; aspect-ratio: 4 / 4.4; }
.dprev__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.dphero__photo { max-width: none; }
.dphero__actions .btn { width: 100%; }
.dphero__actions .badge--days { width: 100%; justify-content: flex-start; }
.dpdir { width: 100%; justify-content: space-between; }
}
/* ==========================================================================
ШАБЛОН УСЛУГИ (/implantacia/ и остальные SEO-лендинги услуг)
Тираж: страницы собирает site/gen_pages.py. Компоненты:
.crumbs (крошки, общие для услуг и статей) · .svc-hero (светлый hero
+ карточка-якорь) · .pagetoc (оглавление по H2) · .svc-expert (карточка
врача-эксперта) · .honest (блок честности) · .svc-related (смежные
услуги капсулами). Шаги/цены/FAQ переиспользуют .visit / .price-table
/ .faq с главной и «Без страха».
========================================================================== */
/* --- хлебные крошки --- */
.crumbs {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
list-style: none; margin: 0 0 clamp(16px, 2.2vw, 24px); padding: 0;
font-size: 13.5px; color: var(--text);
}
.crumbs a { color: var(--text); }
.crumbs a:hover { color: var(--accent-dark); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "›"; color: var(--accent); opacity: .7; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
/* --- hero услуги: светлый сплит, H1 + вводка слева, карточка-якорь справа --- */
.svc-hero {
position: relative;
background: linear-gradient(180deg, var(--accent-mist) 0%, var(--bg-soft) 72%, var(--bg) 100%);
border-bottom: 1px solid var(--line);
overflow: hidden; /* фолбэк */
overflow: clip;
}
.svc-hero::before { /* тихие фирменные дуги — родство с hero главной */
content: "";
position: absolute; top: -46%; right: -20%; bottom: -46%; left: 44%;
background: repeating-radial-gradient(
circle at 78% 46%,
transparent 0, transparent 76px,
rgba(93, 125, 109, .08) 76px, rgba(93, 125, 109, .08) 78px
);
pointer-events: none;
}
.svc-hero__in {
position: relative; z-index: 1;
padding-top: clamp(28px, 4vw, 48px);
padding-bottom: clamp(36px, 5vw, 64px);
}
.svc-hero__grid {
display: grid;
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
gap: clamp(28px, 4.5vw, 64px);
align-items: start;
}
.svc-hero__title {
font-size: clamp(28px, 3.6vw, 46px);
letter-spacing: -.015em;
margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.svc-hero__lead {
font-size: clamp(17.5px, 1.6vw, 20px);
line-height: 1.7; color: var(--ink);
margin-bottom: 16px;
}
.svc-hero__text p { font-size: 17.5px; line-height: 1.7; color: var(--text-strong); margin-bottom: 14px; }
/* манифест-фраза прямо в hero (гарантии): первый экран отвечает сразу */
.svc-hero__text .svc-hero__manifest {
font-family: var(--font-display);
font-size: clamp(23px, 2.6vw, 34px);
line-height: 1.35;
letter-spacing: -.01em;
color: var(--ink);
max-width: 21em;
margin: 6px 0 0;
}
/* карточка-якорь: цена «под ключ», запись и переход к таблице цен */
.svc-hero__card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(22px, 2.4vw, 30px);
box-shadow: 0 26px 54px -26px rgba(29, 34, 36, .3);
}
.svc-hero__card-label {
font-size: 12.5px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: var(--accent-dark);
margin: 0 0 6px;
}
.svc-hero__price {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 34px);
color: var(--ink); line-height: 1.15;
font-variant-numeric: tabular-nums;
margin: 0 0 4px;
}
.svc-hero__price-note { font-size: 13.5px; color: var(--text); margin: 0 0 18px; }
.svc-hero__card .btn { width: 100%; margin-bottom: 10px; white-space: normal; }
.svc-hero__card .btn:last-of-type { margin-bottom: 0; }
.svc-hero__perks {
margin: 16px 0 0; padding: 14px 0 0;
border-top: 1px dashed var(--accent-light);
font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.svc-hero__perks b { color: var(--accent-dark); font-weight: 650; }
/* --- оглавление страницы: полоса капсул под hero (десктоп),
свёрнутый на мобиле; JS страницы снимает open < 881px --- */
.pagetoc { border-bottom: 1px solid var(--line); background: var(--bg); }
.pagetoc summary {
list-style: none;
display: none; /* десктоп: полоса всегда раскрыта, summary спрятан */
align-items: center; justify-content: space-between; gap: 16px;
padding: 14px 0;
font-size: 14.5px; font-weight: 600; color: var(--ink);
cursor: pointer;
}
.pagetoc summary::-webkit-details-marker { display: none; }
.pagetoc__caret { color: var(--accent); transition: transform .25s var(--ease); }
.pagetoc[open] .pagetoc__caret { transform: rotate(180deg); }
.pagetoc__list {
display: flex; flex-wrap: wrap; gap: 8px 10px;
padding: 14px 0 16px;
}
.pagetoc__list a {
display: inline-block;
background: var(--bg-soft); color: var(--ink);
border: 1px solid var(--line); border-radius: 999px;
padding: 7px 16px;
font-size: 13.5px; font-weight: 500; line-height: 1.35;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pagetoc__list a:hover { background: var(--accent-mist); border-color: var(--accent-light); color: var(--accent-dark); }
@media (max-width: 880px) {
.pagetoc summary { display: flex; padding: 14px var(--gutter); }
.pagetoc__list { padding-top: 0; }
}
/* мобила: строка прайса складывается — имя сверху, цена под ним, точки прячем */
@media (max-width: 640px) {
.price-table--stack .price-row { flex-wrap: wrap; gap: 4px 12px; }
.price-table--stack .price-row__dots { display: none; }
.price-table--stack .price-row__name { flex: 1 1 100%; }
.price-table--stack .price-row__value { white-space: normal; }
}
/* --- таймлайн на 5 шагов (базовый .visit свёрстан под 4) --- */
@media (min-width: 881px) {
.visit__steps--5 { grid-template-columns: repeat(5, 1fr); gap: 22px; }
.visit__steps--5 .visit__step-title { font-size: 18.5px; }
.visit__steps--5 .visit__step-text { font-size: 14px; }
}
/* --- карточка врача-эксперта: «кто оперирует / кто лечит» --- */
.svc-expert {
display: grid;
grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
gap: clamp(24px, 3.6vw, 52px);
align-items: start;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(22px, 3vw, 40px);
box-shadow: var(--shadow-soft);
}
.svc-expert__media { position: relative; }
.svc-expert__photo {
display: block; width: 100%; aspect-ratio: 3 / 3.6;
border-radius: 16px; overflow: hidden;
background: var(--accent-light);
box-shadow: 0 22px 48px -24px rgba(29, 34, 36, .38);
}
.svc-expert__photo img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
transition: transform .5s var(--ease);
}
.svc-expert__photo:hover img { transform: scale(1.03); }
/* опорная цифра врача — на карточке под портретом */
.svc-expert__stat {
position: absolute; z-index: 1;
left: 14px; right: 14px; bottom: -22px;
background: var(--accent-dark); color: #fff;
border-radius: 14px;
padding: 12px 18px;
display: flex; align-items: baseline; gap: 12px;
box-shadow: 0 16px 34px -14px rgba(29, 34, 36, .5);
}
.svc-expert__stat b {
font-family: var(--font-display); font-weight: 400;
font-size: 27px; color: #fff;
font-variant-numeric: tabular-nums; letter-spacing: -.01em;
white-space: nowrap;
}
.svc-expert__stat span { font-size: 12px; line-height: 1.35; color: var(--accent-light); }
.svc-expert__name {
font-size: clamp(24px, 2.4vw, 30px);
margin: 0 0 6px;
}
.svc-expert__name a { color: var(--ink); border-bottom: 1.5px solid var(--accent-light); transition: color .25s var(--ease), border-color .25s var(--ease); }
.svc-expert__name a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }
.svc-expert__role { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0 0 18px; }
.svc-expert__body p { font-size: 17.5px; line-height: 1.7; color: var(--text-strong); margin-bottom: 14px; }
.svc-expert__quote {
margin: clamp(18px, 2.2vw, 24px) 0 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--accent);
}
.svc-expert__quote p {
font-family: var(--font-display);
font-size: clamp(16.5px, 1.6vw, 19px);
line-height: 1.55; color: var(--ink);
margin: 0;
}
@media (max-width: 880px) {
.svc-expert { grid-template-columns: 1fr; }
.svc-expert__media { max-width: 340px; margin-bottom: 26px; }
}
/* --- блок честности: «когда услуга не нужна» — фирменная фишка --- */
.honest {
position: relative;
background: var(--accent-mist);
border: 1.5px solid var(--accent);
border-radius: var(--radius-lg);
padding: clamp(26px, 3.6vw, 48px) clamp(22px, 3.6vw, 52px);
box-shadow: 0 0 0 7px var(--accent-mist), 0 24px 56px -32px rgba(67, 96, 79, .4);
}
.honest__kicker {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent-dark); color: #fff;
border-radius: 999px;
padding: 6px 16px;
font-size: 12.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
margin: 0 0 16px;
}
.honest__title { font-size: clamp(24px, 3vw, 34px); margin: 0 0 14px; }
.honest__intro { font-size: 16.5px; line-height: 1.7; max-width: 760px; margin-bottom: clamp(20px, 2.6vw, 28px); }
.honest__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.8vw, 22px);
}
.honest__item {
background: #fff;
border: 1px solid var(--accent-light);
border-radius: 14px;
padding: 20px 22px;
}
.honest__item h3 {
font-family: var(--font-body);
font-size: 15.5px; font-weight: 650; line-height: 1.45;
color: var(--ink);
margin: 0 0 10px;
}
.honest__item p { font-size: 16px; line-height: 1.65; color: var(--text-strong); margin: 0; }
@media (max-width: 880px) {
.honest__grid { grid-template-columns: 1fr; }
.honest { box-shadow: none; }
}
/* --- смежные услуги: капсулы (переиспользуют .dpdir со страниц врачей) --- */
.svc-related__list { display: flex; flex-wrap: wrap; gap: 12px 14px; }
@media (max-width: 640px) {
.svc-hero__grid { grid-template-columns: 1fr; gap: 24px; }
.svc-related__list .dpdir { width: 100%; justify-content: space-between; }
}
@media (min-width: 641px) and (max-width: 880px) {
.svc-hero__grid { grid-template-columns: 1fr; gap: 28px; }
.svc-hero__card { max-width: 480px; }
}
/* ==========================================================================
ШАБЛОН СТАТЬИ (/stati/<слаг>/)
Тираж: собирает site/gen_pages.py. Узкая читабельная колонка ~720px,
H1 серифом, плашка «Проверено врачом» (E-E-A-T), выделенный блок
.art-callout, мягкий CTA .art-cta и «Читайте также» капсулами.
========================================================================== */
.art { max-width: 720px; margin: 0 auto; }
.art-head { padding-top: clamp(28px, 4vw, 48px); }
.art-title {
font-size: clamp(28px, 3.8vw, 42px);
letter-spacing: -.015em;
margin: 0 0 clamp(18px, 2.6vw, 26px);
}
/* плашка доверия: мини-аватар врача + «Проверено врачом» + дата */
.art-verify {
display: flex; align-items: center; gap: 14px;
background: var(--accent-mist);
border: 1px solid var(--accent-light);
border-radius: 999px;
padding: 8px 22px 8px 8px;
margin-bottom: clamp(28px, 4vw, 40px);
width: fit-content;
}
.art-verify__ava {
width: 46px; height: 46px; flex: 0 0 46px;
border-radius: 50%; overflow: hidden;
background: var(--accent-light);
}
.art-verify__ava img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.art-verify__who { display: flex; flex-direction: column; line-height: 1.35; }
.art-verify__who b { font-size: 14px; font-weight: 650; color: var(--ink); }
.art-verify__who b a { color: var(--ink); border-bottom: 1px solid var(--accent-light); }
.art-verify__who b a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }
.art-verify__who small { font-size: 12.5px; color: var(--text); }
.art-verify__check { color: var(--accent-dark); flex: 0 0 auto; }
.art-verify__check svg { width: 17px; height: 17px; display: block; }
/* тело статьи */
.art-body { padding-bottom: clamp(20px, 3vw, 32px); }
.art-body p { font-size: 18px; line-height: 1.7; color: var(--text-strong); margin-bottom: 1.15em; }
.art-body h2 {
font-size: clamp(23px, 2.6vw, 29px);
letter-spacing: -.012em;
margin: clamp(34px, 4.6vw, 52px) 0 .6em;
}
.art-body ul { margin: 0 0 1.15em; padding-left: 2px; list-style: none; }
.art-body ul li {
position: relative;
padding-left: 24px; margin-bottom: 12px;
font-size: 17.5px; line-height: 1.7; color: var(--text-strong);
}
.art-body ul li::before {
content: "";
position: absolute; left: 2px; top: .62em;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent-light);
box-shadow: inset 0 0 0 2px var(--accent);
}
.art-body a { border-bottom: 1px solid var(--accent-light); }
.art-body a:hover { border-bottom-color: var(--accent); }
/* акцентная панель «Когда пора к врачу» */
.art-callout {
background: var(--accent-mist);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
margin: clamp(30px, 4vw, 44px) 0;
}
.art-callout h2 { margin-top: 0; font-size: clamp(21px, 2.2vw, 25px); }
.art-callout p { font-size: 17.5px; margin-bottom: 1em; }
.art-callout > :last-child { margin-bottom: 0; }
/* мягкий CTA после текста */
.art-cta {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(24px, 3.4vw, 36px);
box-shadow: var(--shadow-soft);
margin: clamp(28px, 4vw, 40px) 0 0;
}
.art-cta p { font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
.art-cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.art-cta__phone { font-family: var(--font-display); font-size: 20px; color: var(--ink); white-space: nowrap; }
.art-cta__phone:hover { color: var(--accent-dark); }
/* «Читайте также» — капсулы на другие статьи */
.art-more { padding-top: clamp(36px, 5vw, 56px); }
.art-more__title { font-size: clamp(22px, 2.4vw, 27px); margin: 0 0 18px; }
.art-more__list { display: flex; flex-direction: column; gap: 10px; }
.art-more__item {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 15px 20px;
font-size: 15.5px; font-weight: 600; color: var(--ink);
box-shadow: var(--shadow-soft);
transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.art-more__item::after {
content: "→";
color: var(--accent); font-weight: 400;
transition: transform .25s var(--ease);
}
.art-more__item:hover {
border-color: var(--accent); color: var(--accent-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.art-more__item:hover::after { transform: translateX(3px); }
@media (max-width: 640px) {
.art-cta__row .btn { width: 100%; }
}
/* --- тираж услуг: таймлайны на 3 и 6 шагов (доп. к .visit__steps--5) --- */
@media (min-width: 881px) {
.visit__steps--3 { grid-template-columns: repeat(3, 1fr); }
.visit__steps--6 { grid-template-columns: repeat(3, 1fr); row-gap: 54px; }
}
/* ==========================================================================
Сервисные страницы: /ceny/ /otzyvy/ /garantii/ /o-klinike/ /kontakty/
+ хабы /uslugi/ и /stati/. Переиспользуют .svc-hero, .price-table,
.honest, .card--symptom, .rev-card, .art-callout, .art-cta, .art-verify.
========================================================================== */
/* hero без карточки-якоря: текст на всю сетку */
.svc-hero__grid--single { grid-template-columns: 1fr; }
.svc-hero__grid--single .svc-hero__text { max-width: 860px; }
/* фото вместо карточки-якоря в hero (о клинике) */
.svcp-heroph { padding: 0; overflow: hidden; margin: 0; }
.svcp-heroph img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
/* --- прайс с группировкой по направлению (/ceny/) --- */
.price-group {
display: flex; align-items: center; gap: 14px;
padding: 26px 14px 10px;
font-family: var(--font-display);
font-size: 18px; color: var(--accent-dark);
}
.price-group::after { content: ""; flex: 1; border-bottom: 1px solid var(--accent-light); }
.price-group:first-child { padding-top: 6px; }
/* --- карточки «Три правила цен» --- */
.svcp-rule { position: relative; padding-top: 30px; }
.svcp-rule__num {
position: absolute; top: 18px; right: 22px;
font-family: var(--font-display); font-size: 52px; line-height: 1;
color: var(--accent-light); opacity: .55;
}
/* --- панели рассрочка/вычет --- */
.svcp-panels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
.svcp-panel {
background: var(--accent-mist);
border-left: 3px solid var(--accent);
border-radius: 0 16px 16px 0;
padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.6vw, 34px);
}
.svcp-panel h2, .svcp-panel h3 { margin: 0 0 12px; font-size: clamp(20px, 2.1vw, 24px); }
.svcp-panel p { font-size: 16px; line-height: 1.7; color: var(--text-strong); margin: 0; }
/* --- рейтинги площадок (/otzyvy/) --- */
.svcp-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.svcp-rate {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
background: #fff; border: 1.5px solid var(--accent-light); border-radius: 16px;
padding: clamp(18px, 2.2vw, 26px);
box-shadow: var(--shadow-soft);
}
.svcp-rate__where { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.svcp-rate__num {
font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 52px); line-height: 1.05;
color: var(--accent-dark);
}
.svcp-rate__cnt { font-size: 14px; color: var(--text); }
/* --- сетка отзывов (/otzyvy/) --- */
.svcp-reviews {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.8vw, 22px);
align-items: start;
margin-bottom: clamp(24px, 3vw, 36px);
}
.svcp-reviews .rev-card { height: 100%; }
@media (max-width: 1100px) { .svcp-reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .svcp-reviews { grid-template-columns: 1fr; } }
/* --- манифест гарантии --- */
.svcp-manifesto-sec { padding-top: 0; }
.svcp-manifesto {
border-left: 3px solid var(--accent);
padding: clamp(6px, 1vw, 10px) 0 clamp(6px, 1vw, 10px) clamp(22px, 3vw, 40px);
max-width: 900px;
}
.svcp-manifesto__big {
font-family: var(--font-display);
font-size: clamp(26px, 3.6vw, 42px); line-height: 1.25;
color: var(--ink); margin: 0 0 14px;
}
.svcp-manifesto__note { font-size: 17px; line-height: 1.7; color: var(--text-strong); max-width: 640px; }
/* --- чек-лист с галочками (гарантии, контакты) --- */
.svcp-check { list-style: none; padding: 0; margin: 0; max-width: 760px; display: grid; gap: 12px; }
.svcp-check li {
display: flex; gap: 14px; align-items: flex-start;
background: #fff; border: 1px solid var(--line); border-radius: 14px;
padding: 16px 20px;
font-size: 16px; line-height: 1.6; color: var(--text-strong);
box-shadow: var(--shadow-soft);
}
.svcp-check svg { width: 24px; height: 24px; flex: none; color: var(--accent); margin-top: 1px; }
/* --- «История про 11 имплантов»: фирменная тёмная секция-жемчужина --- */
.svcp-story {
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: clamp(24px, 3.4vw, 52px);
background: var(--accent-dark); color: #E9EFEA;
border-radius: 22px;
padding: clamp(28px, 4vw, 52px);
box-shadow: var(--shadow-lift);
}
.svcp-story__figure { align-self: center; text-align: left; }
.svcp-story__figure b {
display: block; font-family: var(--font-display); font-weight: 400;
font-size: clamp(96px, 12vw, 170px); line-height: .95; color: #fff;
}
.svcp-story__figure span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.55; color: rgba(233, 239, 234, .82); max-width: 240px; }
.svcp-story__kicker { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 239, 234, .7); margin: 0 0 10px; }
.svcp-story__body h2 { color: #fff; font-size: clamp(23px, 2.6vw, 30px); margin: 0 0 16px; }
.svcp-story__body p { font-size: 16.5px; line-height: 1.75; color: rgba(233, 239, 234, .92); margin: 0 0 1em; }
.svcp-story__body p:last-child { margin-bottom: 0; }
.svcp-story__body a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.svcp-story__body a:hover { color: var(--accent-light); }
.svcp-story__body strong, .svcp-story__body b { color: #fff; }
/* --- текст + фото (о клинике) --- */
.svcp-media {
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(24px, 3.4vw, 56px); align-items: center;
}
.svcp-media--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.svcp-media--flip .svcp-media__text { order: 2; }
.svcp-media--flip .svcp-media__ph { order: 1; }
.svcp-media__text p { font-size: 16.5px; line-height: 1.75; color: var(--text-strong); margin-bottom: 1em; }
.svcp-media__text p:last-child { margin-bottom: 0; }
.svcp-media__ph { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lift); }
.svcp-media__ph img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
/* --- крупные контакты в hero (/kontakty/) --- */
.svcp-contact { margin: 6px 0 0; display: grid; gap: 18px; }
.svcp-contact dt { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.svcp-contact dd { margin: 0; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.55; color: var(--text-strong); max-width: 560px; }
.svcp-contact__phone {
font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 38px);
color: var(--ink); white-space: nowrap;
}
.svcp-contact__phone:hover { color: var(--accent-dark); }
/* --- панель-схема «как дойти» вместо карты --- */
.svcp-map {
background: var(--accent-mist);
border: 1.5px solid var(--accent-light);
border-radius: 20px;
padding: clamp(22px, 2.6vw, 30px);
align-self: start;
}
.svcp-map__title { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); color: var(--ink); margin: 0 0 20px; }
.svcp-map__stop { display: flex; gap: 14px; align-items: flex-start; }
.svcp-map__stop b { display: block; font-size: 16px; color: var(--ink); }
.svcp-map__stop small { display: block; font-size: 13.5px; line-height: 1.5; color: var(--text); margin-top: 2px; }
.svcp-map__dot {
flex: none; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--accent-dark); color: #fff;
font-weight: 650; font-size: 13px;
}
.svcp-map__dot--metro { background: #fff; color: var(--accent-dark); border: 2px solid var(--accent-dark); font-family: var(--font-display); font-size: 18px; }
.svcp-map__leg {
margin: 6px 0 6px 19px;
border-left: 2px dotted var(--accent);
padding: 14px 0 14px 33px;
font-size: 13.5px; color: var(--text);
}
.svcp-map__addr {
margin: 20px 0 0; padding-top: 16px;
border-top: 1px solid var(--accent-light);
font-family: var(--font-display);
font-size: 16px; line-height: 1.45; color: var(--ink);
}
.svcp-map__addr small {
display: block; margin-top: 4px;
font-family: var(--font-body, inherit);
font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.svcp-map__note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
/* --- хаб услуг: 6 направлений карточками-секциями --- */
.svcp-dirs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.2vw, 28px); align-items: start; }
.svcp-dir {
background: #fff; border: 1px solid var(--line); border-radius: 20px;
padding: clamp(22px, 2.8vw, 34px);
box-shadow: var(--shadow-soft);
display: flex; flex-direction: column;
}
.svcp-dir__title { font-size: clamp(21px, 2.2vw, 26px); margin: 0 0 12px; }
.svcp-dir__title a { color: var(--ink); }
.svcp-dir__title a:hover { color: var(--accent-dark); }
.svcp-dir__text { font-size: 16px; line-height: 1.7; color: var(--text-strong); margin: 0 0 12px; }
.svcp-dir__incl { font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0 0 16px; }
.svcp-dir__prices { margin-bottom: 18px; }
.svcp-dir__prices .price-row { padding: 12px 8px; }
.svcp-dir__prices .price-row__name { font-size: 15.5px; }
.svcp-dir__prices .price-row__value { font-size: 15.5px; }
.svcp-dir__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.svcp-dir__links .btn { flex: none; }
/* --- хаб статей: карточки с плашкой рецензента --- */
.svcp-arts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); align-items: stretch; }
.svcp-art {
background: #fff; border: 1px solid var(--line); border-radius: 18px;
padding: clamp(22px, 2.6vw, 30px);
box-shadow: var(--shadow-soft);
display: flex; flex-direction: column;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svcp-art:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--accent-light); }
.svcp-art__title { font-size: clamp(19px, 2vw, 23px); line-height: 1.35; margin: 0 0 12px; }
.svcp-art__title a { color: var(--ink); }
.svcp-art__title a:hover { color: var(--accent-dark); }
.svcp-art__text { font-size: 15.5px; line-height: 1.7; color: var(--text-strong); margin: 0 0 18px; }
.svcp-art__verify { margin-top: auto; margin-bottom: 0; }
/* --- адаптив сервисных страниц --- */
@media (max-width: 980px) {
.svcp-dirs, .svcp-arts { grid-template-columns: 1fr; }
.svcp-story { grid-template-columns: 1fr; gap: 20px; }
.svcp-story__figure span { max-width: none; }
}
@media (max-width: 760px) {
.svcp-panels { grid-template-columns: 1fr; }
.svcp-rates { grid-template-columns: 1fr; }
.svcp-media, .svcp-media--flip { grid-template-columns: 1fr; }
.svcp-media--flip .svcp-media__text { order: 1; }
.svcp-media--flip .svcp-media__ph { order: 2; }
.svcp-media__ph img { min-height: 200px; }
.svcp-rule__num { font-size: 40px; top: 14px; right: 16px; }
.svcp-heroph { max-width: 480px; }
.svcp-heroph img { min-height: 200px; }
}
/* ---------- SEO-примечание перед футером ---------- */
.seo-note { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 26px 0 30px; }
.seo-note p { max-width: 880px; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text); opacity: .85; }
.seo-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(93,125,109,.5); }
.seo-note a:hover { color: var(--accent-dark); }
/* ==========================================================================
Конверсионный пакет (08.2026): плашки под H1, каскадная CTA, цитата-полоса,
таблица систем имплантов, кейс «Истории лечения» (на базе .story-facts).
========================================================================== */
/* --- плашки-цифры под H1 --- */
.statbar { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 16px 0 20px; }
.statbar__chip {
display: inline-flex; align-items: baseline; gap: 7px;
background: #fff; border: 1px solid var(--accent-light); border-radius: 999px;
padding: 7px 15px;
font-size: 13.5px; line-height: 1.35; color: var(--text-strong);
box-shadow: var(--shadow-soft);
}
.statbar__chip b {
font-family: var(--font-display); font-weight: 400;
font-size: 15.5px; color: var(--accent-dark); white-space: nowrap;
}
/* --- каскадная CTA: компактная полоса после блока шагов --- */
.midcta-sec { padding: clamp(10px, 1.6vw, 20px) 0; }
.midcta {
display: flex; align-items: center; justify-content: space-between;
gap: 16px 28px; flex-wrap: wrap;
background: var(--accent-mist);
border: 1px solid var(--accent-light); border-left: 3px solid var(--accent);
border-radius: 0 16px 16px 0;
padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 30px);
}
.midcta__text { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text-strong); max-width: 720px; }
.midcta__note { display: block; margin-top: 4px; font-size: 14px; color: var(--text); }
.midcta .btn { flex: none; }
@media (max-width: 640px) { .midcta .btn { width: 100%; } }
/* --- вторая цитата врача: узкая полоса, сериф, шалфейная черта --- */
.pullquote-sec { padding: clamp(14px, 2vw, 26px) 0; }
.pullquote {
max-width: 780px; margin: 0;
border-left: 3px solid var(--accent);
padding: 8px 0 8px clamp(20px, 3vw, 34px);
display: flex; gap: 18px; align-items: flex-start;
}
.pullquote__ava {
flex: none; width: 52px; height: 52px; border-radius: 50%;
overflow: hidden; box-shadow: var(--shadow-soft); margin-top: 4px;
}
.pullquote__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pullquote__q { margin: 0 0 8px; }
.pullquote__q p {
font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 23px);
line-height: 1.45; color: var(--ink); margin: 0;
}
.pullquote__who { font-size: 14px; color: var(--text); }
.pullquote__who a { color: var(--accent-dark); font-weight: 600; }
@media (max-width: 640px) {
.pullquote { gap: 14px; }
.pullquote__ava { width: 42px; height: 42px; }
}
/* --- сравнение систем имплантов (хаб /implantacia/) --- */
.compare-wrap {
overflow-x: auto;
background: #fff; border: 1px solid var(--line); border-radius: 18px;
box-shadow: var(--shadow-soft);
}
.compare { width: 100%; min-width: 920px; border-collapse: collapse; }
.compare th {
background: var(--accent-mist);
font-family: var(--font-display); font-weight: 400;
font-size: 15px; color: var(--accent-dark); text-align: left;
padding: 14px 18px; border-bottom: 1px solid var(--accent-light);
}
.compare td {
padding: 16px 18px; font-size: 15px; line-height: 1.6;
color: var(--text-strong); border-bottom: 1px solid var(--line);
vertical-align: top;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child {
font-family: var(--font-display); font-size: 16.5px; white-space: nowrap;
}
.compare td:first-child a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(93,125,109,.45); }
.compare td:first-child a:hover { color: var(--accent-dark); }
.compare td:last-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
.compare__foot { margin-top: 14px; font-size: 14.5px; color: var(--text); }
.compare__foot a { color: var(--accent-dark); }
/* --- кейс «Истории лечения» --- */
.svc-case { max-width: 860px; }
.svc-case__who { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 16px; }
.svc-case__who b {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(20px, 2.2vw, 24px); color: var(--ink);
}
.svc-case__who span { font-size: 14.5px; color: var(--text); }
.svc-case__doc { margin: 16px 0 0; font-size: 14.5px; color: var(--text); }
.svc-case__doc a { color: var(--accent-dark); font-weight: 600; }