/* SunLife — дизайн-система «Тёплый бирюзовый» (редизайн визуального слоя, вариант B из ревью 07.07.2026). Сохраняет структуру и разметку системы «По неделям» (маршрут по неделям как сигнатура сайта) — меняются только токены цвета, типографика и отделка (тени/интервалы/микро-движение). Почему этот вариант: мостик к исходному брифу CLAUDE.md (тёплый бирюзовый вместо плоского #1DBDCB, тот же дух) + попутно чинит реальный баг — шрифт Newsreader не содержит кириллицы вообще (проверено напрямую через fonts.googleapis.com/css2, не только по локальной базе шрифтов), поэтому все заголовки на проде до этого момента рендерились в fallback-serif браузера, а не в заявленном шрифте. Cormorant Garamond и Inter ниже — оба подтверждены с кириллическим подмножеством тем же способом. ЧЕСТНОСТЬ СИГНАТУРЫ: лента недель подсвечивает узел ВХОДА в маршрут (первый приём) тёплым акцентом terracotta-deep, а не фиктивное «сейчас» — на публичном сайте у анонimного посетителя нет текущей недели. ПРОВЕРЕННЫЙ КОНТРАСТ (WCAG, расчёт через относительную яркость): ink/ivory 13.2:1, teal-deep/ivory 9.2:1, muted/ivory 6.1:1, terracotta-deep/ivory 4.65:1, white/terracotta-deep 5.0:1, teal-mid/ivory 4.6:1, ink/teal-soft 4.9:1 — teal-soft и terracotta (не -deep) держатся только как декоративные заливки/точки, НЕ как цвет текста (там контраст 2.7–3.0:1, недостаточно для AA). СТРУКТУРНОЕ ПРАВИЛО (унаследовано, актуально и здесь): .wrap задаёт ТОЛЬКО горизонтальный max-width/padding и всегда живёт на своём собственном элементе — никогда вместе с классом, задающим вертикальный padding секции, на одном узле (иначе при равной специфичности одна из пар отступов обнуляется целиком). */ /* Шрифты подключаются -ом в (build_site.py, HEAD_TEMPLATE). */ :root{ --teal-deep:#0E4B49; /* тёмные панели, заголовки, основной CTA-фон */ --teal-mid:#3F7A73; /* читаемый текстовый тил — mono-метки недель, ссылки */ --teal-soft:#5FA39C; /* ТОЛЬКО декоративно: точки, тонкие бордеры, бейджи (текст поверх — ink, не белый) */ --terracotta:#C97B5A; /* ТОЛЬКО декоративно: заливки, бейджи (не текст) */ --terracotta-deep:#A85A3D;/* весь текст/кнопки тёплого акцента: узел входа, eyebrow, CTA */ --paper:#FDFBF7; /* основной фон страниц — доминирующий белый/off-white (осветление 18.08.2026) */ --ivory:#FAF6EF; /* больше не фон секций (header/.trust ушли на --paper 19.08.2026) — сейчас используется только как цвет текста на тёмных заливках (.cta-panel, .btn-ghost-dark) */ --surface:#F1E9DF; /* карточки, чередующиеся секции */ --card:#FFFFFF; --ink:#1B2E2C; --muted:#4F615F; --line:#DDE6E1; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:rgba(168,90,61,0.15);} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}} body{ background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; } .skip-link{ position:absolute;top:-48px;left:12px;z-index:100; background:var(--teal-deep);color:#FFFFFF; padding:12px 18px;border-radius:8px;font-size:14px;font-weight:600; transition:top .15s ease-out; } .skip-link:focus{top:12px;} @media (prefers-reduced-motion: reduce){.skip-link{transition:none;}} h1,h2,h3,.display{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--teal-deep); letter-spacing:0; } /* Трекинг размер-специфичен (крупный текст читается свободнее — стягиваем; h3 и мельче остаются на общем letter-spacing:0 из правила выше). */ h1{letter-spacing:-0.02em;} h2{letter-spacing:-0.01em;} h1 em, h2 em, h3 em{font-style:italic;font-weight:500;color:var(--terracotta-deep);} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} :focus-visible{outline:3px solid var(--terracotta-deep);outline-offset:3px;border-radius:3px;} .wrap{max-width:1180px;margin:0 auto;padding-left:44px;padding-right:44px;} @media (max-width:700px){.wrap{padding-left:22px;padding-right:22px;}} .mono{font-family:'IBM Plex Mono',monospace;} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500; letter-spacing:0.1em;text-transform:uppercase;color:var(--terracotta-deep); } /* Тёплая точка дышит только в hero главной (узел входа в маршрут) — иначе на странице цен/врачей было бы больше десятка одновременно мигающих точек, и сигнатура превращается в фоновый шум вместо смыслового акцента. */ .honey-dot{width:7px;height:7px;border-radius:50%;background:var(--terracotta-deep);flex-shrink:0;} .honey-dot.live{animation:dot-breathe 2.4s ease-in-out infinite;} @keyframes dot-breathe{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.6;transform:scale(0.8);box-shadow:0 0 0 6px rgba(168,90,61,0.16);} } @media (prefers-reduced-motion: reduce){.honey-dot.live{animation:none;}} /* ===== HEADER / NAV ===== */ /* Без backdrop-filter здесь намеренно: он создаёт новый containing block для position:fixed потомков (CSS spec), поэтому мобильное меню (nav.main-nav, fixed) якорилось не к вьюпорту, а к header — реальный баг, найден и подтверждён при проверке мобильной раскладки (высота меню схлопывалась до ~32px вместо всего экрана). Сплошной фон header ниже — исправление, а не косметика. */ header{ position:sticky;top:0;z-index:60; background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow .2s ease; } header.scrolled{box-shadow:0 2px 10px rgba(14,75,73,0.08);} @media (prefers-reduced-motion: reduce){header{transition:none;}} .header-row{ display:flex;align-items:center;justify-content:space-between; padding:14px 44px;max-width:1180px;margin:0 auto;gap:16px; } @media (max-width:700px){.header-row{padding:14px 22px;}} .brand{display:flex;align-items:center;gap:11px;} .brand-mark{ width:38px;height:38px;border-radius:50%;background:var(--teal-deep); display:flex;align-items:center;justify-content:center;flex-shrink:0; overflow:hidden; } .brand-mark img{width:100%;height:100%;object-fit:cover;} .brand-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--teal-deep);} nav.main-nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:500;color:var(--ink);} nav.main-nav > a{padding:6px 0;position:relative;transition:color .15s;} nav.main-nav > a:hover, nav.main-nav > a.active{color:var(--teal-deep);} nav.main-nav > a:active{background:var(--surface);color:var(--teal-deep);} nav.main-nav > a.active::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--terracotta-deep); } @media (prefers-reduced-motion: reduce){nav.main-nav > a{transition:none;}} .nav-dropdown{position:relative;} .nav-dropdown > button{ font:inherit;color:inherit;background:none;border:none;cursor:pointer; display:flex;align-items:center;gap:5px;padding:6px 0; } .nav-dropdown > button:hover{color:var(--teal-deep);} .nav-dropdown .chevron{font-size:10px;transition:transform .15s;} .nav-dropdown-menu{ position:absolute;top:100%;left:-16px;margin-top:8px; background:var(--card);border:1px solid var(--line);border-radius:10px; box-shadow:0 24px 48px -28px rgba(14,75,73,0.24); padding:6px;min-width:230px; opacity:0;pointer-events:none;transform:translateY(-4px); transition:opacity .18s ease-out, transform .18s ease-out; } @media (prefers-reduced-motion: reduce){.nav-dropdown-menu{transition:opacity .01s;}} .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1;pointer-events:auto;transform:translateY(0); } .nav-dropdown-menu a{ display:block;padding:10px 12px;border-radius:6px;font-size:14px;color:var(--ink); transition:background .15s, color .15s; } .nav-dropdown-menu a:hover{background:var(--surface);color:var(--teal-deep);} .nav-dropdown-menu a:active{background:var(--surface);color:var(--teal-deep);transform:scale(0.97);} @media (prefers-reduced-motion: reduce){.nav-dropdown-menu a:active{transform:none;}} .nav-cta{ background:var(--terracotta-deep);color:#FFFFFF; padding:10px 20px;border-radius:9px;font-size:14px;font-weight:700;white-space:nowrap; transition:background .15s, transform .15s; touch-action:manipulation; } .nav-cta:hover{background:#8C4A31;transform:translateY(-1px);} @media (prefers-reduced-motion: reduce){.nav-cta{transition:background .15s;}.nav-cta:hover{transform:none;}} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:11px;} .nav-toggle span{display:block;width:22px;height:2px;background:var(--teal-deep);margin:5px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease;} .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle.active span:nth-child(2){opacity:0;} .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media (prefers-reduced-motion: reduce){.nav-toggle span{transition:none;}} @media (max-width:860px){ nav.main-nav{ position:fixed;top:65px;left:0;right:0;bottom:0; background:var(--paper); flex-direction:column;align-items:stretch;gap:0; padding:16px 24px;overflow-y:auto;overscroll-behavior:contain; transform:translateX(100%);transition:transform .2s ease; } @media (prefers-reduced-motion: reduce){nav.main-nav{transition:none;}} nav.main-nav.open{transform:translateX(0);} nav.main-nav > a{padding:14px 4px;border-bottom:1px solid var(--line);} nav.main-nav > a.active::after{display:none;} .nav-dropdown{width:100%;} .nav-dropdown > button{width:100%;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--line);} .nav-dropdown-menu{ position:static;opacity:1;pointer-events:auto;transform:none; box-shadow:none;border:none;border-radius:0;margin-top:0;padding:0 0 0 12px; display:none; } .nav-dropdown.open .nav-dropdown-menu{display:block;} .nav-dropdown.open .chevron{transform:rotate(180deg);} .nav-cta{margin-top:16px;text-align:center;} .nav-toggle{display:block;} } /* ===== HOME HERO ===== */ .hero{padding:64px 0 60px;} /* min-width:0 на .hero-inner: баг подтверждён 25-26.07.2026 (18px scrollWidth-оверфлоу на мобильном) на прежней flex-разметке (.hero-3d-wrap) — текстовая колонка без явного min-width упиралась в дефолтный flex-item min-width:auto (= min-content) на длинном lead-тексте. 26.08.2026 контейнер сменился на CSS Grid (.hero-grid, фото вместо 3D-сцены) — у grid-item тот же дефолт (min-width:auto на треке), тот же риск переполнения на длинном тексте, поэтому min-width:0 оставлен как есть, не убирать при будущих правках .hero-grid. */ .hero-inner{max-width:640px;min-width:0;} .hero h1{font-size:clamp(36px,5.2vw,54px);line-height:1.08;margin-bottom:20px;} .hero p.lead{font-size:17.5px;color:var(--muted);margin-bottom:22px;} /* --- Фото вместо 3D-сцены «Созвездие направлений» (26.08.2026). Фото — ВРЕМЕННОЕ: Higgsfield Soul-модель, обученная на реальных фото Дюсембаевой Айгуль Жапаровны, + доводка фона seedream_v4_5, использование в hero согласовано с ней самой. Заменить на кадр с профессиональной фотосессии, когда она состоится — см. CLAUDE.md. */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;} .hero-photo-wrap{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/3;} .hero-photo-wrap picture,.hero-photo-wrap img{display:block;width:100%;height:100%;} .hero-photo-wrap img{object-fit:cover;object-position:64% 20%;} .hero-photo-wrap::before{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(to right, var(--paper) 0%, transparent 35%); } .hero-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin:0 0 30px;} .hero-feature{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;} .hero-feature svg{width:22px;height:22px;color:var(--teal-deep);flex-shrink:0;} .hero-feature span{font-size:12.5px;line-height:1.35;color:var(--muted);} .hero .cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} @media (max-width:700px){ .hero .cta-row{flex-direction:column;align-items:stretch;} .hero .cta-row .btn{width:100%;text-align:center;white-space:normal;} } @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;gap:32px;} .hero-photo-wrap{order:2;aspect-ratio:16/10;border-radius:16px;} .hero-photo-wrap::before{content:none;} .hero-inner{order:1;} } .btn{ display:inline-block;border-radius:9px;font-family:'Inter',sans-serif; font-weight:700;font-size:15px;padding:14px 26px;white-space:nowrap; transition:background .15s, border-color .15s, transform .15s; touch-action:manipulation; } @media (prefers-reduced-motion: reduce){.btn{transition:background .15s, border-color .15s;}} .btn-primary{background:var(--terracotta-deep);color:#FFFFFF;border:1.5px solid var(--terracotta-deep);} .btn-primary:hover{background:#8C4A31;border-color:#8C4A31;transform:translateY(-1px);} .btn-primary:active{background:#773F2A;border-color:#773F2A;transform:scale(0.97);} .btn-secondary{background:transparent;color:var(--teal-deep);border:1.5px solid var(--teal-soft);} .btn-secondary:hover{border-color:var(--teal-deep);} .btn-secondary:active{background:var(--surface);border-color:var(--teal-deep);transform:scale(0.97);} .btn-ghost-dark{background:transparent;color:var(--ivory);border:1.5px solid rgba(250,246,239,0.4);} .btn-ghost-dark:hover{border-color:var(--terracotta-deep);color:var(--terracotta-deep);} @media (prefers-reduced-motion: reduce){.btn-primary:hover, .nav-cta:hover{transform:none;}.btn-primary:active, .btn-secondary:active{transform:none;}} /* ===== PAGE HERO (подстраницы) ===== */ .section-pad{padding-top:56px;padding-bottom:56px;} .page-hero-sec{padding-top:52px;padding-bottom:0;} .page-hero-sec .eyebrow{margin-bottom:16px;} .page-hero-sec h1{font-size:clamp(30px,4.2vw,44px);line-height:1.12;max-width:720px;margin-bottom:14px;} .page-hero-sec p.lead{font-size:16.5px;color:var(--muted);max-width:600px;margin-bottom:8px;} /* ===== DIRECTIONS PICKER (главная) — карточки направлений; ядро аудитории (беременность/профосмотры) отмечено полосой + бейджем, не сплошной тёмной заливкой (осветление 18.08.2026) ===== */ .picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} @media (max-width:900px){.picker-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.picker-grid{grid-template-columns:1fr;}} .picker-card{ background:var(--card);border:1px solid var(--line);border-radius:14px; padding:22px 20px;transition:border-color .15s, transform .15s, box-shadow .15s; } .picker-card:hover{border-color:var(--teal-soft);transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(14,75,73,0.3);} .picker-card:active{border-color:var(--teal-deep);transform:scale(0.98);} @media (prefers-reduced-motion: reduce){.picker-card{transition:border-color .15s;}.picker-card:hover{transform:none;}.picker-card:active{transform:none;}} .picker-card .eyebrow{margin-bottom:10px;} .picker-card h3{font-size:20px;margin-bottom:7px;} .picker-card p{font-size:13px;color:var(--muted);} .picker-card.core{background:var(--surface);border-top:4px solid var(--teal-deep);padding-top:19px;} .picker-card.core .eyebrow{background:var(--terracotta-deep);color:#FFFFFF;padding:4px 10px;border-radius:20px;} .picker-card.core:hover{border-color:var(--terracotta-deep);} .picker-card.core:active{border-color:var(--terracotta-deep);} /* ===== SECTIONS / CARDS ===== */ .section-head{margin-bottom:32px;max-width:640px;} .section-head h2{font-size:32px;margin-bottom:12px;} .section-head p{color:var(--muted);font-size:15.5px;} .card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} @media (max-width:700px){.card-grid{grid-template-columns:1fr;}} .info-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;} .info-card h3{font-size:20px;margin-bottom:10px;} .info-card p{font-size:15px;color:var(--muted);} .info-card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:10px;} .info-card li{font-size:14.5px;padding-left:18px;position:relative;color:var(--ink);} .info-card li::before{content:'—';position:absolute;left:0;color:var(--terracotta-deep);} .note-sub{margin-top:12px;font-size:13px;color:var(--muted);} /* .info-card-accent — НЕ базовый .info-card: сознательно узкий модификатор ТОЛЬКО для 2 карточек в секции «Почему один центр» на главной (19.08.2026), остальные 46 инстансов .info-card на других 8 страницах остаются на var(--surface) как прежде, см. переписку с Медетом по Шагу 0. */ .info-card.info-card-accent{background:var(--card);border-top:4px solid var(--teal-deep);padding-top:23px;} /* ===== МАРШРУТ-ТАЙМЛАЙН (страницы направлений) ===== badge.week — mono-бейдж с номером недели: terracotta-deep фон для узла входа (первый приём), teal-soft фон для последующих сроков (текст — ink, не белый: контраст белого на teal-soft недостаточен). badge.step — те же роли, но без номеров недель, для направлений без сроков — просто «Шаг N». */ .route-timeline{display:flex;flex-direction:column;} .route-step{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line);} .route-step:first-child{border-top:none;} .badge{ flex-shrink:0;width:64px;height:32px;border-radius:8px; display:flex;align-items:center;justify-content:center; font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600; white-space:nowrap; } .badge.entry{background:var(--terracotta-deep);color:#FFFFFF;} .badge.upcoming{background:var(--teal-soft);color:var(--ink);} .route-step h3{font-size:18px;margin-bottom:5px;} .route-step p{font-size:14.5px;color:var(--muted);max-width:56ch;} .route-note{ margin-top:18px;padding:14px 18px;background:var(--surface);border-radius:10px; font-size:13.5px;color:var(--muted);max-width:64ch; } /* ===== ОТЗЫВЫ (2ГИС, главная) — добавлено 18.08.2026, цифры проверены вживую реальным браузером на профиле firmId 70000001098584764 (Е-251,6), не web_search ===== */ .reviews-panel{ background:var(--card);border:1px solid var(--line);border-radius:16px; padding:28px 32px;display:flex;align-items:center;gap:28px;flex-wrap:wrap; } .reviews-score{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;} .reviews-score-num{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:44px;line-height:1;color:var(--teal-deep);} .reviews-stars{color:var(--terracotta-deep);font-size:15px;letter-spacing:2px;} .reviews-lead{font-size:15.5px;color:var(--ink);margin-bottom:6px;} .reviews-link{font-size:14px;font-weight:600;color:var(--terracotta-deep);} .reviews-link:hover{color:var(--teal-deep);} /* ===== БОЛЬШОЙ CTA-БЛОК ===== */ .cta-panel{ background:var(--teal-deep);color:var(--ivory);border-radius:16px; padding:42px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; } .cta-panel h3{color:var(--ivory);font-size:25px;margin-bottom:6px;} .cta-panel p{color:rgba(250,246,239,0.72);font-size:14.5px;} /* ===== ВРАЧИ — фото сверху + плашка специализации; .doctor-mono — фолбэк без фото (сейчас только Мукашева), растянут на ту же 3:4 зону ===== */ .doctor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media (max-width:860px){.doctor-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:600px){.doctor-grid{grid-template-columns:1fr;}} .doctor-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;transition:box-shadow .15s;} .doctor-card:hover{box-shadow:0 16px 32px -26px rgba(14,75,73,0.28);} .doctor-photo-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;border-top-left-radius:14px;border-top-right-radius:14px;} .doctor-photo{width:100%;height:100%;object-fit:cover;object-position:center 14%;display:block;} .doctor-mono{ width:100%;height:100%; background:var(--surface); display:flex;align-items:center;justify-content:center; font-family:'Cormorant Garamond',serif;font-weight:500;font-size:56px;color:var(--teal-deep); } .doctor-tag-pill{ position:absolute;left:14px;bottom:14px; background:var(--teal-deep);color:#fff; font-family:'Inter',sans-serif;font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.04em; padding:6px 12px;border-radius:999px; } .doctor-body{padding:22px;} .doctor-body h3{font-size:17px;margin-bottom:3px;} .doctor-card p{font-size:14px;color:var(--muted);} .doctor-card .doctor-spec{font-size:12.5px;font-weight:600;color:var(--teal-mid);margin-bottom:6px;} .doctor-note{margin-top:12px;font-size:11.5px;color:var(--muted);opacity:0.85;} .doctor-details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;} .doctor-details summary{ list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center; font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--teal-deep); } .doctor-details summary::-webkit-details-marker{display:none;} .doctor-details summary .plus{ flex-shrink:0;width:18px;height:18px;font-family:'IBM Plex Mono',monospace; display:flex;align-items:center;justify-content:center;color:var(--terracotta-deep);font-size:14px; transition:transform .18s ease-out; } .doctor-details[open] summary .plus{transform:rotate(45deg);} @media (prefers-reduced-motion: reduce){.doctor-details summary .plus{transition:none;}} .doctor-about{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--muted);} .doctor-about li{margin-bottom:6px;} .doctor-about li:last-child{margin-bottom:0;} /* ===== ЦЕНЫ — «маршрут формируем», не «уточняется» ===== */ /* .table-scroll: баг подтверждён 25-26.07.2026 — .price-table без overflow-обёртки растягивала весь документ на мобильном (profosmotry.html 202px, ceny.html 13px, scrollWidth>clientWidth). Обёртка даёт таблице свой локальный горизонтальный скролл вместо растягивания страницы; на desktop таблица уже помещается в .wrap, обёртка визуально ничего не меняет. price-block (отступ между блоками) перенесён на обёртку — сама .price-table больше этот класс не носит, см. build_site.py. */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} .price-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;} .price-table caption{ text-align:left;font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500; padding:18px 22px 6px;color:var(--teal-deep); } .price-table th{ text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);padding:10px 22px;border-bottom:1px solid var(--line); } .price-table td{padding:14px 22px;border-bottom:1px solid var(--line);font-size:14.5px;} .price-table tr:last-child td{border-bottom:none;} .price-table td.price{white-space:nowrap;font-weight:600;color:var(--teal-deep);} .price-was{text-decoration:line-through;color:var(--muted);font-weight:400;font-size:13px;margin-right:7px;} .price-now{color:var(--teal-deep);font-weight:600;} .price-table caption .price-note{ display:block;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400; color:var(--muted);margin-top:2px; } .price-table td .price-composition{ display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:400; color:var(--muted);margin-top:4px;line-height:1.5; } .forming-tag{ display:inline-flex;align-items:center;gap:7px; font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600; color:var(--terracotta-deep); } .price-block + .price-block{margin-top:24px;} .forming-card{ margin-top:28px;background:var(--surface);border-radius:14px;padding:26px 28px; display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; } .forming-card h3{font-size:19px;margin-bottom:6px;} .forming-card p{font-size:14px;color:var(--muted);max-width:48ch;} /* ===== FAQ ===== */ .faq-list{display:flex;flex-direction:column;gap:10px;} .faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;} .faq-item summary{ list-style:none;cursor:pointer;padding:18px 22px; display:flex;justify-content:space-between;align-items:center;gap:16px; font-weight:600;font-size:15.5px;color:var(--teal-deep); } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary .plus{ flex-shrink:0;width:22px;height:22px;font-family:'IBM Plex Mono',monospace; display:flex;align-items:center;justify-content:center;color:var(--terracotta-deep);font-size:16px; transition:transform .18s ease-out; } .faq-item[open] summary .plus{transform:rotate(45deg);} @media (prefers-reduced-motion: reduce){.faq-item summary .plus{transition:none;}} .faq-item .faq-answer{padding:0 22px 20px;font-size:14.5px;color:var(--muted);max-width:64ch;} /* ===== КОНТАКТЫ ===== */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;} @media (max-width:800px){.contact-grid{grid-template-columns:1fr;}} .contact-list{display:flex;flex-direction:column;gap:20px;} .contact-item strong{ display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase; letter-spacing:.05em;color:var(--terracotta-deep);margin-bottom:5px;font-weight:500; } .contact-item span{font-size:15px;color:var(--ink);} .map-block{display:flex;flex-direction:column;gap:10px;} .map-embed{ width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:14px;border:1px solid var(--line); background:var(--card); } .map-embed iframe{width:100%;height:100%;border:0;} .map-fallback-link{align-self:flex-start;font-size:13.5px;color:var(--terracotta-deep);font-weight:600;} .contact-cta{margin-top:8px;align-self:flex-start;} /* ===== TRUST STRIP ===== */ .trust{padding-top:36px;padding-bottom:36px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .trust-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;} .trust-item{font-size:13px;color:var(--muted);} .trust-item strong{ color:var(--teal-deep);display:block;font-family:'IBM Plex Mono',monospace; font-size:13px;font-weight:500;margin-bottom:3px;text-transform:uppercase;letter-spacing:.03em; } /* ===== HERO 3D-СЦЕНЫ — чистый CSS (perspective/transform3d), без JS/canvas. Общая инфраструктура (.hero-scene / .scene-stage / fallback) переиспользуется двумя сценами (беременность/профосмотры) — вариант-классы .hero-scene-{name} задают только раскладку своих граней и keyframes. Главная больше не входит в их число — «Созвездие направлений» (.hero-scene-constellation) убрана 26.08.2026 вместе с заменой hero на фото, см. .hero-grid ниже; общая инфраструктура оставлена нетронутой, т.к. её всё ещё используют /беременность/профосмотры. */ .hero-scene{width:220px;height:220px;flex-shrink:0;perspective:900px;margin:0 auto;} .hero-scene .scene-stage{width:100%;height:100%;position:relative;transform-style:preserve-3d;} @media (max-width:700px){.hero-scene{width:150px;height:150px;}} @media (prefers-reduced-motion: reduce){ .hero-scene .scene-stage,.hero-scene .tile{animation:none !important;} } @supports not (transform-style: preserve-3d){ .hero-scene .scene-stage{transform-style:flat;} .hero-scene [class*="facet"],.hero-scene [class*="arc"],.hero-scene .tile{transform:none !important;} } /* --- page-hero (подстраниц) c 3D-сценой — раскладка текст+сцена --- */ .page-hero-3d-wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;} .page-hero-3d-text{flex:1;min-width:280px;} .page-hero-sec.has-scene{padding-bottom:8px;} /* --- page-hero (подстраниц) c тематическим фото интерьера — та же раскладка text+visual, что у .page-hero-3d-wrap, но визуал крупнее декоративного 220px .hero-scene: полноценная фото-панель, соразмерная текстовой колонке. Портретный исходник (сцены интерьеров сняты вертикально) — контейнер 3:4, не 4:3 как у .hero-photo-wrap на главной (тот источник альбомный), иначе object-fit:cover обрезал бы верх/низ комнаты. */ .page-hero-photo-wrap{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:3/4;flex:1;min-width:280px;max-width:420px;} .page-hero-photo-wrap img{width:100%;height:100%;object-fit:cover;display:block; animation:hero-photo-kenburns 22s ease-in-out infinite alternate;} @keyframes hero-photo-kenburns{0%{transform:scale(1);}100%{transform:scale(1.08);}} @media (prefers-reduced-motion: reduce){.page-hero-photo-wrap img{animation:none;}} @media (max-width:860px){ .page-hero-photo-wrap{width:100%;max-width:none;aspect-ratio:16/10;order:2;} .page-hero-3d-wrap .page-hero-3d-text{order:1;} } /* --- Ведение беременности: «Разворачивающиеся дуги» --- */ .hero-scene-arcs .scene-stage{animation:arcs-unfold 30s ease-in-out infinite;} .hero-scene-arcs .arc{ position:absolute;top:50%;left:50%;border-radius:50%; border:3px solid transparent; } .hero-scene-arcs .arc-1{ width:110px;height:110px;margin:-55px 0 0 -55px; transform:rotateZ(-30deg) translateZ(24px); border-top-color:var(--terracotta-deep);border-left-color:var(--terracotta-deep); } .hero-scene-arcs .arc-2{ width:160px;height:160px;margin:-80px 0 0 -80px; transform:rotateZ(20deg) translateZ(0px); border-top-color:var(--teal-mid);border-left-color:var(--teal-mid); } .hero-scene-arcs .arc-3{ width:210px;height:210px;margin:-105px 0 0 -105px; transform:rotateZ(70deg) translateZ(-24px); border-top-color:var(--teal-soft);border-left-color:var(--teal-soft); } .hero-scene-arcs .arc-core{ position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px; top:50%;left:50%;border-radius:50%; background:var(--terracotta-deep);box-shadow:0 0 0 7px rgba(168,90,61,0.16); } @keyframes arcs-unfold{ 0%,100%{transform:rotateX(4deg) scale(0.94);} 50%{transform:rotateX(-4deg) scale(1.05);} } @media (max-width:700px){ .hero-scene-arcs .arc-3{display:none;} .hero-scene-arcs .scene-stage{animation-duration:18s;} } /* --- Профосмотры: «Выравнивающаяся сетка» --- */ .hero-scene-grid .grid-stage{ display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr); gap:8px;width:180px;height:180px; transform:rotateX(52deg) rotateZ(-45deg); } .hero-scene-grid .tile{ border-radius:6px;background:var(--teal-mid); animation:grid-settle 5s ease-in-out infinite; animation-delay:var(--d,0s); } .hero-scene-grid .tile:nth-child(3n+1){background:var(--teal-deep);} .hero-scene-grid .tile:nth-child(3n+2){background:var(--terracotta-deep);} @keyframes grid-settle{ 0%,100%{transform:translateZ(0px);} 50%{transform:translateZ(26px);} } @media (max-width:700px){ .hero-scene-grid .grid-stage{width:130px;height:130px;grid-template-rows:repeat(2,1fr);} .hero-scene-grid .tile:nth-child(n+7){display:none;} .hero-scene-grid .tile{animation-duration:3.5s;} } /* ===== FOOTER ===== */ footer{padding:32px 0;} .footer-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;} .footer-col h4{ font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);margin-bottom:10px;font-weight:500; } .footer-col a, .footer-col span{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px;} .footer-col a{transition:color .15s;} .footer-col a:hover{color:var(--teal-deep);} .footer-bottom{ margin-top:24px;padding-top:20px;border-top:1px solid var(--line); font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; } /* ===== DEMO/PLACEHOLDER MARKERS (убрать перед публикацией) ===== */ .data-pending{ display:inline-flex;align-items:center;gap:7px; font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600; color:var(--terracotta-deep);background:rgba(168,90,61,0.1); padding:3px 9px;border-radius:100px;margin-left:8px;vertical-align:middle; } .data-pending::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--terracotta-deep);flex-shrink:0;}