/* ========================================================================== Сайт-визитка медицинского центра — стили Чистый CSS, mobile-first. Палитра: премиальная белая, акцент — глубокий ультрамарин (по логотипу). Режимы доступности (классы на ): .a11y-large-font — увеличенный шрифт .a11y-contrast — высокая контрастность .a11y-no-anim — отключение анимаций ========================================================================== */ /* -------------------------------------------------------------------------- 1. Токены и сброс -------------------------------------------------------------------------- */ :root { /* Дизайн-токены (T33) */ --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem; --fs-body-sm: 0.9375rem; --fs-body: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-display: clamp(2.15rem, 1.5rem + 2.6vw, 3.3rem); --fs-h1: clamp(1.65rem, 1.35rem + 1.2vw, 2.35rem); --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); --fs-h3: clamp(1.35rem, 1.2rem + 0.9vw, 1.9rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 700ms; --bg: #fdfdff; --surface: #ffffff; --surface-2: #f2f4fb; --text: #131a36; --text-muted: #5d6584; --border: #e3e7f3; --border-strong: #c8d0e8; --accent: #2b3aa5; --accent-strong: #24308c; --accent-soft: #e3e8fa; --accent-softer: #eef1fc; --header-bg: rgba(253, 253, 255, 0.92); --footer-bg: #131b4d; --footer-text: #eaedfb; --footer-muted: #9aa3c8; --panel-bg: #131b4d; --panel-text: #eaedfb; --panel-muted: #a8b0d4; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Prata', 'Georgia', 'Times New Roman', serif; --radius-s: 12px; --radius-m: 18px; --radius-l: 28px; --radius-pill: 999px; --shadow-s: 0 1px 2px rgba(19, 26, 54, 0.05), 0 2px 10px rgba(19, 26, 54, 0.05); --shadow-m: 0 8px 28px rgba(19, 26, 54, 0.09); --shadow-l: 0 18px 50px rgba(19, 26, 54, 0.14); --ring: 0 0 0 3px rgba(43, 58, 165, 0.25); --header-h: 4.5rem; --container: 75rem; /* 1200px */ } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, select, textarea { font: inherit; color: inherit; } a { color: var(--accent-strong); text-decoration: none; transition: color var(--dur-base) var(--ease-out); } a:hover { color: var(--text); } ul[class], ol[class], nav ul, nav ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--accent-soft); color: var(--text); } [id] { scroll-margin-top: calc(var(--header-h) + 1rem); } /* Каркас страницы: прижимает подвал к низу при коротком контенте */ .site { position: relative; z-index: 2; min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } .skip-link { position: absolute; left: -100vw; top: 0; z-index: 100; background: var(--text); color: #fff; padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-s) 0; } .skip-link:focus { left: 0; } /* -------------------------------------------------------------------------- 2. Типографика -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display); letter-spacing: 0; } h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); letter-spacing: 0; margin-bottom: var(--space-3); } h3 { font-size: var(--fs-lg); font-weight: 700; } p { text-wrap: pretty; } .lead { font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem); color: var(--text-muted); max-width: 44rem; } .eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-strong); margin-bottom: var(--space-4); } .small { font-size: var(--fs-md); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Сетка и секции -------------------------------------------------------------------------- */ .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .section { padding-block: clamp(3.25rem, 7vw, 5.5rem); } .section--alt { background: var(--surface-2); } .section-head { max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { color: var(--text-muted); } .section-action { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; } /* -------------------------------------------------------------------------- 4. Кнопки, чипы, бейджи -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-body-sm); line-height: 1.2; cursor: pointer; text-align: center; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .btn svg { flex: none; } .btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(43, 58, 165, 0.28); } .btn--primary:hover { background: var(--accent-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(43, 58, 165, 0.34); } .btn--outline { border-color: var(--border-strong); color: var(--text); background: transparent; } .btn--outline:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-softer); transform: translateY(-1px); } .btn--light { background: #fff; color: var(--accent-strong); } .btn--light:hover { background: var(--accent-softer); color: var(--accent-strong); transform: translateY(-1px); } .btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-body); } .btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-md); } .btn--block { width: 100%; } .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; } .chip--ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); } /* -------------------------------------------------------------------------- 5. Шапка -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-s); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); position: relative; } .logo { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); font-weight: 800; font-size: var(--fs-body); line-height: 1.2; } .logo:hover { color: var(--accent-strong); } .logo-mark { flex: none; } /* В подвале по умолчанию — белая версия логотипа (тёмный фон), цветная скрыта до контрастного режима */ .logo-mark--color { display: none; } .logo-text { max-width: 15rem; } .header-actions { display: flex; align-items: center; gap: var(--space-2); } .header-phone { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--fs-body-sm); white-space: nowrap; } .header-phone svg { color: var(--accent-strong); } .header-cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; position: relative; } .nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ''; display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--text); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .nav-toggle::before, .nav-toggle::after { position: absolute; left: 50%; translate: -50% 0; } .nav-toggle::before { top: 16px; } .nav-toggle span { position: absolute; top: 22px; left: 50%; translate: -50% 0; } .nav-toggle::after { top: 28px; } .nav-open .nav-toggle::before { transform: translateY(6px) rotate(45deg); } .nav-open .nav-toggle span { opacity: 0; } .nav-open .nav-toggle::after { transform: translateY(-6px) rotate(-45deg); } /* Навигация */ .site-nav { display: none; position: absolute; top: 100%; left: -1.25rem; right: -1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-m); padding: var(--space-4) var(--space-4) var(--space-5); } .nav-open .site-nav { display: block; animation: navDrop var(--dur-base) var(--ease-out); } @keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .site-nav ul { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); } .site-nav ul a { display: block; padding: var(--space-3) var(--space-3); border-radius: var(--radius-s); color: var(--text); font-weight: 700; font-size: var(--fs-body); } .site-nav ul a:hover { background: var(--accent-softer); color: var(--accent-strong); } .site-nav ul a[aria-current='page'] { background: var(--accent-soft); color: var(--accent-strong); } .nav-phone { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; margin-bottom: var(--space-4); } .nav-cta { width: 100%; } /* -------------------------------------------------------------------------- 6. Мобильная панель быстрых действий («Позвонить» / «Записаться») -------------------------------------------------------------------------- */ .mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-2) var(--space-4) calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(19, 26, 54, 0.08); } .bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.9rem; border-radius: var(--radius-pill); font-weight: 800; font-size: var(--fs-body-sm); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out); } .bar-btn:active { transform: scale(0.97); } .bar-call { border: 1px solid var(--border-strong); color: var(--text); } .bar-book { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(43, 58, 165, 0.3); } /* Компенсация высоты фиксированной панели */ body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); } @media (min-width: 900px) { body { padding-bottom: 0; } .mobile-cta-bar { display: none; } } /* -------------------------------------------------------------------------- 7. Плавающие виджеты: доступность, мессенджер -------------------------------------------------------------------------- */ .a11y-fab, .messenger-fab { position: fixed; z-index: 46; width: 3rem; height: 3rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .a11y-fab { left: 0.9rem; bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-m); } .messenger-fab { right: 0.9rem; bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(43, 58, 165, 0.32); border: none; } .messenger-fab[hidden] { display: none; } .a11y-fab:hover, .messenger-fab:hover { transform: translateY(-2px); } @media (min-width: 900px) { .a11y-fab { left: 1.25rem; bottom: 1.25rem; } .messenger-fab { right: 1.25rem; bottom: 1.25rem; } } /* Панель доступности */ .a11y-panel { position: fixed; z-index: 65; left: 0.9rem; bottom: calc(8.2rem + env(safe-area-inset-bottom, 0px)); width: min(19.5rem, calc(100vw - 1.8rem)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-l); padding: var(--space-4) var(--space-4) var(--space-4); } .a11y-panel[hidden] { display: none; } .a11y-panel-title { font-size: var(--fs-body); margin-bottom: var(--space-4); } .a11y-switch { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; cursor: pointer; font-size: var(--fs-body-sm); font-weight: 600; } .a11y-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .a11y-switch-track { flex: none; width: 2.6rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--border-strong); position: relative; transition: background var(--dur-base) var(--ease-out); } .a11y-switch-thumb { position: absolute; top: 0.19rem; left: 0.19rem; width: 1.12rem; height: 1.12rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-s); transition: transform var(--dur-base) var(--ease-out); } .a11y-switch input:checked + .a11y-switch-track { background: var(--accent); } .a11y-switch input:checked + .a11y-switch-track .a11y-switch-thumb { transform: translateX(1.1rem); } .a11y-switch input:focus-visible + .a11y-switch-track { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .a11y-reset { margin-top: var(--space-3); width: 100%; padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: transparent; font-size: var(--fs-md); font-weight: 700; color: var(--text-muted); cursor: pointer; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .a11y-reset:hover { color: var(--accent-strong); border-color: var(--accent); } @media (min-width: 900px) { .a11y-panel { left: 1.25rem; bottom: 4.8rem; } } /* -------------------------------------------------------------------------- 8. Cookie-баннер -------------------------------------------------------------------------- */ .cookie-banner { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(8.6rem + env(safe-area-inset-bottom, 0px)); width: min(34rem, calc(100vw - 1.8rem)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-l); padding: var(--space-4) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); } .cookie-banner[hidden] { display: none; } .cookie-text { flex: 1 1 16rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); } .cookie-text a { text-decoration: underline; } .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; } .cookie-actions .btn { min-height: 44px; } /* -------------------------------------------------------------------------- Быстрые маршруты (T26) -------------------------------------------------------------------------- */ .routes-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 480px) { .routes-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .routes-grid { grid-template-columns: repeat(5, 1fr); } } .route-card { display: flex; flex-direction: column; gap: var(--space-2); min-height: 44px; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); color: inherit; text-decoration: none; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .route-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-m); } .route-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .route-card h3 { font-size: var(--fs-body); margin: 0; } .route-card p { margin: 0; color: var(--text-muted); font-size: var(--fs-md); } .route-note { color: var(--text-muted); font-size: var(--fs-xs); } /* Полоса фактов доверия (T27) */ .trust-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-5); } .trust-facts li { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-weight: 600; font-size: var(--fs-md); } /* Страница врача /doctors/ (T30) */ .doctor-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; } .doctor-grid .doctor-photo { width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-m); } .doctor-bio { max-width: 70ch; } @media (min-width: 768px) { .doctor-grid { grid-template-columns: 320px 1fr; } } /* Прайс-лист /prices (T28) */ .price-filter { display: flex; flex-direction: column; gap: var(--space-1); max-width: 28rem; margin-bottom: var(--space-4); } .price-filter label { font-weight: 600; font-size: var(--fs-md); } .price-filter-empty { color: var(--text-muted); font-size: var(--fs-md); } .price-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0 var(--space-6); } .price-table th, .price-table td { text-align: left; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; } .price-table th { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .price-name { display: block; font-weight: 600; } .price-table .price-desc { display: block; color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); } .price-value { white-space: nowrap; font-weight: 600; } .price-dur { white-space: nowrap; color: var(--text-muted); } tr[hidden] { display: none; } @media (max-width: 640px) { .price-table thead { display: none; } .price-table tr { display: block; border-bottom: 1px solid var(--border); padding: var(--space-2) 0; } .price-table td { display: block; border: none; padding: var(--space-1) 0; } } @media print { .site-header, .site-footer, .mobile-cta-bar, .cookie-banner, .messenger-fab, .a11y-fab, .price-filter, .toc-chips, .news-nav { display: none !important; } .price-table { font-size: 11pt; } } @media (min-width: 900px) { .cookie-banner { bottom: 1.25rem; } } /* -------------------------------------------------------------------------- 9. Первый экран -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } .scene-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60rem 34rem at 78% 0%, rgba(43, 58, 165, 0.09), transparent 62%), radial-gradient(46rem 30rem at 4% 100%, rgba(43, 58, 165, 0.05), transparent 64%); } .hero-sphere { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.33; -webkit-mask-image: radial-gradient(ellipse 74% 84% at 60% 48%, #000 44%, transparent 100%); mask-image: radial-gradient(ellipse 74% 84% at 60% 48%, #000 44%, transparent 100%); } html.a11y-contrast .hero-sphere { opacity: 0.27; } @media (max-width: 560px) { .hero-sphere { opacity: 0.24; } } .hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-6); padding-block: clamp(2.5rem, 6vw, 4.75rem); } .hero-badge { margin-bottom: var(--space-4); } .hero h1 { margin-bottom: var(--space-4); } .hero-slogan { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.3; color: var(--accent-strong); margin-bottom: var(--space-4); max-width: 30rem; } .hero-lead { color: var(--text-muted); font-size: var(--fs-body); max-width: 32rem; margin-bottom: var(--space-5); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); } .hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-md); color: var(--text-muted); } .hero-trust li { display: inline-flex; align-items: center; gap: var(--space-2); } .hero-trust svg { color: var(--accent-strong); flex: none; } .hero-media { position: relative; } .hero-blob { position: absolute; top: -12%; right: -15%; width: 112%; aspect-ratio: 1 / 1; z-index: 0; background: linear-gradient(160deg, var(--accent-soft) 0%, var(--accent-softer) 100%); border-radius: 53% 47% 62% 38% / 55% 48% 52% 45%; animation: blobFloat 16s ease-in-out infinite alternate; transform-origin: center; } .hero-photo { position: relative; z-index: 1; width: 100%; height: auto; border-radius: var(--radius-l); box-shadow: var(--shadow-l); } @keyframes blobFloat { from { transform: translate(0, 0) scale(1) rotate(0deg); } to { transform: translate(-2.5%, 3%) scale(1.05) rotate(3deg); } } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.04fr 0.96fr; align-items: center; gap: var(--space-7); } } /* F14: на мобильном CTA-кнопки — сразу после прямого ответа, маркетинговый лид скрыт (разметка сохраняется для десктопа). */ @media (max-width: 640px) { .hero-grid > :first-child { display: flex; flex-direction: column; } .hero-badge { order: 1; } .hero h1 { order: 2; } .hero-lead--answer { order: 3; } .hero-actions { order: 4; } .hero-slogan { order: 5; } .hero-lead:not(.hero-lead--answer) { order: 6; display: none; } .hero-trust { order: 7; } } /* -------------------------------------------------------------------------- 10. Карточки: направления, врачи, программы, отзывы, шаги, преимущества -------------------------------------------------------------------------- */ .card-grid { display: grid; gap: var(--space-4); } @media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* Направления */ .dir-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-5) var(--space-5) var(--space-5); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .dir-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent); } .icon-box { width: 3rem; height: 3rem; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; } .dir-card p { font-size: var(--fs-body-sm); color: var(--text-muted); flex: 1 0 auto; } .card-link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-body-sm); color: var(--accent-strong); } .card-link svg { transition: transform var(--dur-base) var(--ease-out); } .dir-card:hover .card-link svg { transform: translateX(3px); } /* Врачи */ .doctor-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent); } .doctor-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .doctor-body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .doctor-body .chip { align-self: flex-start; } .doctor-meta { font-size: var(--fs-md); color: var(--text-muted); flex: 1; } .doctor-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-1); } .doctor-price { font-weight: 800; white-space: nowrap; } .doctor-price small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); } /* Преимущества */ .feature { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; } .feature h3 { margin-bottom: var(--space-1); } .feature p { font-size: var(--fs-body-sm); color: var(--text-muted); } /* Программы */ .program-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-5) var(--space-5); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent); } .program-badge { position: absolute; top: 1.35rem; right: 1.35rem; } .program-card p { font-size: var(--fs-body-sm); color: var(--text-muted); } .program-price { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--accent-strong); } .program-price small { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); display: block; letter-spacing: 0; } .program-card .btn { margin-top: auto; } .check-list { display: grid; gap: var(--space-2); } .check-list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--text-muted); } .check-list svg { flex: none; margin-top: var(--space-1); color: var(--accent); } /* Шаги */ .step-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-1); } .step-num { width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-display); font-size: var(--fs-lg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-1); } .step-card p { font-size: var(--fs-body-sm); color: var(--text-muted); } /* Отзывы */ .review-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-5) var(--space-5); } .review-stars { display: inline-flex; gap: var(--space-1); color: #c8860a; } .review-card blockquote { font-size: var(--fs-body-sm); color: var(--text); flex: 1; } .review-author { font-weight: 800; font-size: var(--fs-body-sm); } .review-role { font-size: var(--fs-sm); color: var(--text-muted); } /* Статистика */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); } .stat-num { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--accent-strong); line-height: 1.15; } .stat-label { font-size: var(--fs-sm); color: var(--text-muted); } /* Блок «Клиника» — фото */ .clinic-grid { display: grid; gap: var(--space-5); align-items: center; } .clinic-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .clinic-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-s); } @media (min-width: 1024px) { .clinic-grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-7); } } /* Слово руководителя */ .director-grid { display: grid; gap: var(--space-6); align-items: center; } .director-photo { position: relative; width: 100%; max-width: 26rem; margin-inline: auto; } .director-photo::before { content: ""; position: absolute; inset: 12% -6% -4% 12%; background: linear-gradient(160deg, var(--accent-soft) 0%, var(--accent-softer) 100%); border-radius: var(--radius-l); transform: rotate(2.5deg); } .director-photo img { position: relative; width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow-m); } .director-badge { position: absolute; right: var(--space-4); bottom: var(--space-4); display: grid; gap: 2px; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow-m); padding: var(--space-2) var(--space-3); } .director-badge strong { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); line-height: 1.2; color: var(--accent-strong); } .director-badge span { font-size: var(--fs-sm); color: var(--text-muted); } .director-quote { position: relative; max-width: 44rem; margin-top: var(--space-2); } .director-quote::before { content: "\00AB"; display: block; font-family: var(--font-display); font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1; color: var(--accent); opacity: 0.22; } .director-quote p { color: var(--text-muted); } .director-quote p + p { margin-top: var(--space-3); } .director-sign { display: grid; gap: var(--space-1); margin-top: var(--space-5); padding-left: var(--space-4); border-left: 3px solid var(--accent); } .director-sign strong { font-weight: 800; font-size: var(--fs-md); } .director-sign span { font-size: var(--fs-sm); color: var(--text-muted); } @media (min-width: 1024px) { .director-grid { grid-template-columns: minmax(0, 30rem) 1fr; gap: var(--space-8); } .director-photo { margin-inline: 0; } } /* -------------------------------------------------------------------------- 11. FAQ-аккордеон -------------------------------------------------------------------------- */ .faq { max-width: 50rem; margin-inline: auto; display: grid; gap: var(--space-3); } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); transition: border-color var(--dur-base) var(--ease-out); } .faq-item[open] { border-color: var(--accent); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-4); cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-body); } .faq-item summary::-webkit-details-marker { display: none; } .faq-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--accent); color: #fff; } .faq-answer { padding: 0 var(--space-4) var(--space-4); color: var(--text-muted); font-size: var(--fs-body-sm); max-width: 46rem; } /* -------------------------------------------------------------------------- 12. Формы и блок записи -------------------------------------------------------------------------- */ .booking-panel { background: var(--panel-bg); color: var(--panel-text); border-radius: var(--radius-l); padding: clamp(1.6rem, 4.5vw, 3rem); display: grid; gap: var(--space-5); } .booking-panel h2 { color: var(--panel-text); } .booking-panel > div > p { color: var(--panel-muted); margin-bottom: var(--space-5); max-width: 34rem; } .booking-grid { display: grid; gap: var(--space-5); } @media (min-width: 1024px) { .booking-panel { grid-template-columns: 1.05fr 0.95fr; align-items: start; } } .form-card { background: var(--surface); color: var(--text); border-radius: var(--radius-m); padding: var(--space-5) var(--space-4); } @media (min-width: 640px) { .form-card { padding: var(--space-5) var(--space-5); } } .form-grid { display: grid; gap: var(--space-4); } .field { display: grid; gap: var(--space-2); } .field label { font-size: var(--fs-md); font-weight: 700; } .input, .select, .textarea { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--surface); font-size: var(--fs-body); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .textarea { min-height: 7rem; resize: vertical; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6f69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: var(--space-7); } .consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); } .consent input { margin-top: var(--space-1); width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; } .consent a { text-decoration: underline; } .form-status { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-body-sm); font-weight: 600; } .form-status[hidden] { display: none; } .booking-contacts { display: grid; gap: var(--space-4); align-content: start; } .booking-contact-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-m); padding: var(--space-5) var(--space-5) var(--space-5); display: grid; gap: var(--space-3); color: #ffffff; } .booking-contact-card ul { display: grid; gap: var(--space-3); } .booking-contact-card li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body-sm); } .booking-contact-card svg { flex: none; margin-top: var(--space-1); color: currentColor; } .booking-contact-card a { color: var(--panel-text); font-weight: 700; } .booking-contact-card a:hover { color: #fff; text-decoration: underline; } .booking-contact-card .big-phone { font-size: var(--fs-xl); } .booking-contact-card .muted { color: var(--panel-muted); font-size: var(--fs-md); } /* -------------------------------------------------------------------------- 13. Карта -------------------------------------------------------------------------- */ .map-box { border-radius: var(--radius-m); overflow: hidden; background: var(--accent-softer); border: 1px solid var(--border); min-height: 14rem; display: grid; place-items: center; text-align: center; padding: clamp(1rem, 4vw, 1.5rem); overflow-wrap: anywhere; } .map-box--inner { display: grid; gap: var(--space-2); justify-items: center; } .map-box svg { color: var(--accent-strong); } .map-box p { font-size: var(--fs-body-sm); color: var(--text-muted); max-width: 24rem; overflow-wrap: anywhere; } .map-embed { width: 100%; height: 100%; min-height: 14rem; border: 0; display: block; } .map-frame { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--border); min-height: 16rem; height: clamp(16rem, 40vw, 26rem); } /* -------------------------------------------------------------------------- 14. CTA-панель (внутренние страницы) -------------------------------------------------------------------------- */ .cta-panel { background: var(--panel-bg); color: var(--panel-text); border-radius: var(--radius-l); padding: clamp(2rem, 5vw, 3rem); text-align: center; display: grid; justify-items: center; gap: var(--space-4); } .cta-panel h2 { color: var(--panel-text); margin-bottom: 0; } .cta-panel p { color: var(--panel-muted); max-width: 36rem; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); } .cta-panel .btn--outline, .booking-panel .btn--outline { color: #ffffff; border-color: #ffffff; } /* -------------------------------------------------------------------------- 15. Внутренние страницы: page-hero, хлебные крошки -------------------------------------------------------------------------- */ .page-hero { background: linear-gradient(180deg, var(--accent-softer) 0%, var(--bg) 100%); padding-block: clamp(1.75rem, 4.5vw, 3.25rem); } .page-hero h1 { margin-bottom: var(--space-3); overflow-wrap: anywhere; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); } .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-1); } .breadcrumbs li + li::before { content: '·'; color: var(--border-strong); } .breadcrumbs a { color: var(--text-muted); } .breadcrumbs a:hover { color: var(--accent-strong); } .breadcrumbs [aria-current='page'] { color: var(--accent-strong); font-weight: 700; } /* -------------------------------------------------------------------------- 16. Страница услуг: строки прайса -------------------------------------------------------------------------- */ .price-group { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } .price-group > p { color: var(--text-muted); max-width: 44rem; margin-bottom: var(--space-5); } .price-list { display: grid; gap: var(--space-3); } .price-row { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-4) var(--space-4); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .price-row:hover { border-color: var(--accent); box-shadow: var(--shadow-s); } .price-row h3 { font-size: var(--fs-body); margin-bottom: var(--space-1); } .price-row .price-desc { font-size: var(--fs-body-sm); color: var(--text-muted); } .price-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .price-row .btn { justify-self: start; } @media (min-width: 760px) { .price-row { grid-template-columns: 1fr auto auto; align-items: center; } .price-row .btn { justify-self: end; } } .toc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .toc-chips a { display: inline-flex; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--fs-md); font-weight: 700; color: var(--text); background: var(--surface); transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .toc-chips a:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-softer); } /* -------------------------------------------------------------------------- 17. Инфо-страницы услуг: секции, список, примечание -------------------------------------------------------------------------- */ .content-section { max-width: 50rem; } .content-section h2 { margin-bottom: var(--space-4); } .content-section p { color: var(--text-muted); margin-bottom: var(--space-4); } .content-section .check-list { margin-block: var(--space-4); } .content-section .check-list li { font-size: var(--fs-body-sm); } .steps-list { counter-reset: step; display: grid; gap: var(--space-4); margin-block: var(--space-4); } .steps-list li { position: relative; padding-left: var(--space-7); min-height: 2.6rem; display: grid; align-content: center; gap: var(--space-1); } .steps-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-display); display: grid; place-items: center; } .steps-list strong { display: block; } .steps-list span { font-size: var(--fs-body-sm); color: var(--text-muted); } .accent-note { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; background: var(--accent-softer); border: 1px solid var(--accent-soft); border-radius: var(--radius-m); padding: var(--space-4) var(--space-4); margin-block: var(--space-4); } .accent-note svg { color: var(--accent-strong); flex: none; margin-top: var(--space-1); } .accent-note p { margin: 0; font-size: var(--fs-body-sm); } .disclaimer { font-size: var(--fs-sm); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-5); } /* Плейсхолдер-заметка (юридические заготовки и пр.) */ .placeholder-note { border: 1.5px dashed var(--accent); background: var(--accent-softer); border-radius: var(--radius-m); padding: var(--space-4) var(--space-4); font-size: var(--fs-body-sm); color: var(--text-muted); } .placeholder-note strong { color: var(--accent-strong); text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: 0.1em; display: block; margin-bottom: var(--space-2); } .placeholder-note p + p { margin-top: var(--space-2); } .legal-toc { display: grid; gap: var(--space-2); } .legal-toc a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-body-sm); } .def-list { display: grid; gap: var(--space-3); } .def-list div { display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-4); } @media (min-width: 640px) { .def-list div { grid-template-columns: 15rem 1fr; } } .def-list dt { font-weight: 700; font-size: var(--fs-body-sm); } .def-list dd { color: var(--text-muted); font-size: var(--fs-body-sm); } /* 404 */ .error-page { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); } .error-code { font-family: var(--font-display); font-size: clamp(4.5rem, 12vw, 8rem); color: var(--accent-strong); line-height: 1; margin-bottom: var(--space-4); } .error-page .lead { margin-inline: auto; margin-bottom: var(--space-6); } .error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } /* -------------------------------------------------------------------------- 18. Анимации появления при скролле -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: none; } /* Без JS контент должен быть видимым */ html.no-js .reveal { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 19. Скроллбары -------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* -------------------------------------------------------------------------- 20. Системная забота о движении -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ========================================================================== РЕЖИМЫ ДОСТУПНОСТИ ========================================================================== */ /* Увеличенный шрифт */ html.a11y-large-font { font-size: 125%; } /* Отключение анимаций */ html.a11y-no-anim { scroll-behavior: auto; } html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after { animation: none !important; transition: none !important; } html.a11y-no-anim .reveal { opacity: 1; transform: none; } /* Высокая контрастность */ html.a11y-contrast { --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --text: #000000; --text-muted: #1c1c1c; --border: #000000; --border-strong: #000000; --accent: #000000; --accent-strong: #000000; --accent-soft: #ffffff; --accent-softer: #ffffff; --header-bg: rgba(255, 255, 255, 1); --footer-bg: #ffffff; --footer-text: #000000; --footer-muted: #1c1c1c; --panel-bg: #ffffff; --panel-text: #000000; --panel-muted: #1c1c1c; --shadow-s: none; --shadow-m: none; --shadow-l: none; } html.a11y-contrast body { background: #fff; color: #000; } html.a11y-contrast a:not(.btn):not(.bar-btn) { color: #000; text-decoration: underline; } html.a11y-contrast a:not(.btn):not(.bar-btn):hover { color: #000; text-decoration: none; background: #ffff00; } html.a11y-contrast .btn--primary, html.a11y-contrast .btn--light, html.a11y-contrast .bar-book { background: #000; color: #fff; border: 2px solid #000; box-shadow: none; } html.a11y-contrast .btn--outline, html.a11y-contrast .bar-call { background: #fff; color: #000; border: 2px solid #000; } html.a11y-contrast .btn:hover, html.a11y-contrast .bar-btn:hover { transform: none; } html.a11y-contrast .site-header, html.a11y-contrast .site-nav, html.a11y-contrast .mobile-cta-bar, html.a11y-contrast .a11y-panel, html.a11y-contrast .cookie-banner, html.a11y-contrast .form-card { background: #fff; border-color: #000; box-shadow: none; } html.a11y-contrast .site-footer, html.a11y-contrast .booking-panel, html.a11y-contrast .cta-panel { background: #fff; color: #000; border-top: 2px solid #000; } html.a11y-contrast .booking-panel h2, html.a11y-contrast .cta-panel h2, html.a11y-contrast .booking-contact-card a, html.a11y-contrast .footer-title, html.a11y-contrast .site-footer a, html.a11y-contrast .footer-desc, html.a11y-contrast .footer-disclaimer, html.a11y-contrast .site-footer li, html.a11y-contrast .footer-bottom { color: #000; } html.a11y-contrast .site-footer a:hover, html.a11y-contrast .booking-contact-card a:hover { color: #000; background: #ffff00; text-decoration: underline; } html.a11y-contrast .site-footer { border-bottom: 2px solid #000; } html.a11y-contrast .hero-slogan, html.a11y-contrast .stat-num, html.a11y-contrast .eyebrow, html.a11y-contrast .program-price, html.a11y-contrast .error-code, html.a11y-contrast .step-num, html.a11y-contrast .review-stars, html.a11y-contrast .icon-box, html.a11y-contrast .card-link, html.a11y-contrast .faq-icon, html.a11y-contrast .header-phone svg, html.a11y-contrast .hero-trust svg, html.a11y-contrast .check-list svg, html.a11y-contrast .booking-contact-card svg, html.a11y-contrast .form-status, html.a11y-contrast .accent-note svg, html.a11y-contrast .messenger-fab, html.a11y-contrast .a11y-switch input:checked + .a11y-switch-track { background: #fff; color: #000; } html.a11y-contrast .icon-box, html.a11y-contrast .step-num, html.a11y-contrast .faq-icon, html.a11y-contrast .hero-blob, html.a11y-contrast .director-photo::before, html.a11y-contrast .director-badge, html.a11y-contrast .messenger-fab { border: 2px solid #000; background: #fff; } html.a11y-contrast .director-quote::before { color: #000; opacity: 1; } html.a11y-contrast .director-badge strong { color: #000; } html.a11y-contrast .messenger-fab { color: #000; } html.a11y-contrast .chip { background: #fff; color: #000; border: 1.5px solid #000; } html.a11y-contrast .dir-card, html.a11y-contrast .doctor-card, html.a11y-contrast .program-card, html.a11y-contrast .review-card, html.a11y-contrast .faq-item, html.a11y-contrast .price-row, html.a11y-contrast .booking-contact-card, html.a11y-contrast .map-box, html.a11y-contrast .placeholder-note, html.a11y-contrast .accent-note, html.a11y-contrast .page-hero { background: #fff; border-color: #000; } html.a11y-contrast .page-hero { border-bottom: 2px solid #000; } html.a11y-contrast .dir-card p, html.a11y-contrast .feature p, html.a11y-contrast .program-card p, html.a11y-contrast .doctor-meta, html.a11y-contrast .faq-answer, html.a11y-contrast .price-desc, html.a11y-contrast .stat-label, html.a11y-contrast .content-section p, html.a11y-contrast .steps-list span, html.a11y-contrast .lead, html.a11y-contrast .section-head p, html.a11y-contrast .hero-lead, html.a11y-contrast .hero-trust, html.a11y-contrast .consent, html.a11y-contrast .map-box p, html.a11y-contrast .check-list li, html.a11y-contrast .review-role, html.a11y-contrast .director-quote p, html.a11y-contrast .director-sign span, html.a11y-contrast .director-badge span, html.a11y-contrast .cta-panel p, html.a11y-contrast .booking-panel > div > p, html.a11y-contrast .doctor-price small, html.a11y-contrast .program-price small { color: #000; } html.a11y-contrast .input, html.a11y-contrast .select, html.a11y-contrast .textarea { background: #fff; color: #000; border: 2px solid #000; } html.a11y-contrast .section--alt, html.a11y-contrast .hero { background: #fff; } html.a11y-contrast .hero-blob { display: none; } html.a11y-contrast .doctor-card:hover, html.a11y-contrast .dir-card:hover, html.a11y-contrast .program-card:hover, html.a11y-contrast .price-row:hover, html.a11y-contrast .faq-item[open] { transform: none; border-color: #000; box-shadow: none; } html.a11y-contrast .nav-toggle { background: #fff; border: 2px solid #000; } html.a11y-contrast .nav-toggle span, html.a11y-contrast .nav-toggle::before, html.a11y-contrast .nav-toggle::after { background: #000; } html.a11y-contrast .site-nav ul a[aria-current='page'] { background: #000; color: #fff; text-decoration: none; } html.a11y-contrast .logo { color: #000; } /* Растровый логотип: в контрастном режиме обесцвечиваем; в подвале (белый фон) показываем цветную версию */ html.a11y-contrast .logo-mark { filter: grayscale(1) contrast(1.4); } html.a11y-contrast .logo-mark--white { display: none; } html.a11y-contrast .logo-mark--color { display: block; } html.a11y-contrast .select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } html.a11y-contrast .review-stars svg { fill: #000; color: #000; } html.a11y-contrast .a11y-switch-track { background: #fff; border: 2px solid #000; } html.a11y-contrast .a11y-switch-thumb { background: #000; } html.a11y-contrast .a11y-switch input:checked + .a11y-switch-track { background: #000; } html.a11y-contrast .a11y-switch input:checked + .a11y-switch-track .a11y-switch-thumb { background: #fff; } html.a11y-contrast .footer-license, html.a11y-contrast .footer-map-link, html.a11y-contrast .footer-legal-links a { color: #000; text-decoration: underline; } html.a11y-contrast .footer-contacts { color: #000000; } html.a11y-contrast { --ring: 0 0 0 3px rgba(0, 0, 0, 0.25); } html.a11y-contrast .footer-bottom { border-top-color: rgba(0, 0, 0, 0.25); } /* -------------------------------------------------------------------------- 21. Подвал -------------------------------------------------------------------------- */ .site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: auto; position: relative; z-index: 1; } .footer-grid { display: grid; gap: var(--space-6); padding-top: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.25fr 0.85fr 0.95fr 1.1fr; } } .footer-brand { display: grid; gap: var(--space-4); justify-items: start; } .footer-desc { color: var(--footer-muted); font-size: var(--fs-body-sm); max-width: 20rem; } .footer-license { font-size: var(--fs-sm); font-weight: 700; color: var(--footer-text); text-decoration: underline; text-underline-offset: 3px; } .footer-license:hover { color: #fff; } .footer-title { font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.13em; color: var(--footer-muted); margin-bottom: var(--space-4); } .footer-col ul { display: grid; gap: var(--space-2); } .footer-col ul a { color: var(--footer-text); font-size: var(--fs-body-sm); opacity: 0.88; } .footer-col ul a:hover { color: #fff; opacity: 1; text-decoration: underline; } .footer-contacts ul { gap: var(--space-3); } .footer-contacts li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--footer-text); opacity: 0.88; } .footer-contacts li a { color: var(--footer-text); } .footer-contacts li a:hover { color: #fff; text-decoration: underline; } .footer-contacts svg { flex: none; margin-top: var(--space-1); color: currentColor; } .footer-maps { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); color: var(--footer-muted); } .footer-map-link { color: var(--footer-text); text-decoration: underline; text-underline-offset: 3px; } .footer-map-link:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: clamp(2rem, 4vw, 3rem); padding: var(--space-5) 0 calc(1.5rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); font-size: var(--fs-sm); color: var(--footer-muted); } .footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); } .footer-legal-links a { color: var(--footer-muted); text-decoration: underline; text-underline-offset: 3px; } .footer-legal-links a:hover { color: var(--footer-text); } /* -------------------------------------------------------------------------- 22. Навигация на десктопе -------------------------------------------------------------------------- */ .phone-num { display: none; } @media (min-width: 900px) { .phone-num { display: inline; } .header-cta { display: inline-flex; } .nav-toggle { display: none; } .site-nav { position: static; display: flex; align-items: center; gap: var(--space-5); background: transparent; border: 0; box-shadow: none; padding: 0; left: auto; right: auto; } .site-nav ul { display: flex; gap: var(--space-5); margin-bottom: 0; } .site-nav ul a { padding: var(--space-1) 0; font-size: var(--fs-body-sm); border-radius: 0; } .site-nav ul a:hover { background: transparent; } .site-nav ul a[aria-current='page'] { background: transparent; color: var(--accent-strong); box-shadow: inset 0 -2px 0 var(--accent); } .nav-phone { display: none; } /* Кнопка из мобильного меню не нужна на десктопе — есть header-cta */ .nav-cta { display: none; } } /* Узкий десктоп (900–1099px): пункты меню не переносятся, номер телефона сворачивается в иконку, чтобы «О клинике» не ломалась на две строки */ @media (min-width: 900px) and (max-width: 1099px) { .site-nav ul a { white-space: nowrap; } .header-phone .phone-num { display: none; } .header-phone svg { width: 22px; height: 22px; } } @media (min-width: 1100px) { .site-nav ul a { white-space: nowrap; } } /* -------------------------------------------------------------------------- 27. Премиум-полировка и 3D-микровзаимодействия (v2, палитра логотипа) -------------------------------------------------------------------------- */ /* --- Первый экран: 3D-сцена --- */ .hero-media { perspective: 1300px; } .hero-3d { position: relative; transform-style: preserve-3d; transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transition: transform var(--dur-slow) var(--ease-out)-out; will-change: transform; } .hero-3d .hero-photo { box-shadow: 0 24px 60px rgba(19, 26, 54, 0.22), 0 6px 18px rgba(19, 26, 54, 0.12); } .hero-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 14px; box-shadow: 0 12px 30px rgba(19, 26, 54, 0.16); font-weight: 700; font-size: var(--fs-body-sm); color: var(--text); transform: translateZ(56px); animation: chipFloat 6.5s ease-in-out infinite; } .hero-chip svg { color: var(--accent); flex: none; } .hero-chip small { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; } .hero-chip--1 { top: 7%; left: max(-0.75rem, -3vw); } .hero-chip--2 { bottom: 9%; right: max(-0.75rem, -3vw); animation-delay: -3.2s; } @keyframes chipFloat { 0%, 100% { transform: translateZ(56px) translateY(0); } 50% { transform: translateZ(56px) translateY(-11px); } } /* Вращающаяся печать с текстом по кругу */ .stamp { position: absolute; z-index: 3; top: -1.4rem; right: 1.2rem; width: 104px; height: 104px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 50%; box-shadow: var(--shadow-m); } .stamp-ring { position: absolute; inset: 0; animation: stampSpin 28s linear infinite; } .stamp-core { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; } @keyframes stampSpin { to { transform: rotate(360deg); } } /* --- Tilt-карточки --- */ .tilt { transform-style: preserve-3d; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); will-change: transform; } @media (hover: hover) and (pointer: fine) { .tilt:hover { transform: perspective(850px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)) translateY(-5px); box-shadow: var(--shadow-l); } } /* --- Премиальные кнопки: градиент ультрамарина и мягкое свечение --- */ .btn--primary { background: linear-gradient(135deg, #3240bd 0%, #24308c 100%); box-shadow: 0 8px 22px rgba(43, 58, 165, 0.3); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(43, 58, 165, 0.38); } .btn--primary:active { transform: translateY(0); } .btn--primary[hidden] { display: none; } /* --- Секции: мягкая дымка вместо плоской заливки --- */ .section--alt { background: linear-gradient(180deg, var(--surface-2) 0%, var(--accent-softer) 55%, var(--surface-2) 100%); } /* --- Панель записи: глубокий премиум-градиент --- */ .booking-panel { background: linear-gradient(140deg, #131b4d 0%, #1d2870 55%, #24308c 100%); } /* --- Контрастный режим: делаем декор плоским и читаемым --- */ html.a11y-contrast .hero-chip, html.a11y-contrast .stamp { background: #fff; border: 2px solid #1c1c1c; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.a11y-contrast .hero-3d { transform: none; } /* --- Отключение анимаций (ГОСТ) и reduce-motion --- */ html.a11y-no-anim .hero-chip, html.a11y-no-anim .stamp-ring { animation: none; } html.a11y-no-anim .hero-3d { transform: none; } @media (prefers-reduced-motion: reduce) { .hero-chip, .stamp-ring { animation: none; } .hero-3d { transform: none; } } /* --- Мобильные: компактнее декор, мягче наклон --- */ @media (max-width: 640px) { .hero-3d { transform: rotateY(0deg) rotateX(0deg); } .stamp { width: 84px; height: 84px; top: -0.9rem; right: 0.6rem; } .stamp-core { width: 38px; height: 38px; } .hero-chip { font-size: var(--fs-sm); padding: var(--space-2) var(--space-3); } } /* Встроенная Яндекс-карта в блоке контактов */ .map-box--embed { padding: 0; } .map-box--embed iframe { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 16rem; border: 0; display: block; } /* ========================================================================== Этап 2: новости/акции + динамика (public-api.js) Карусель, модал новости, чипы акций, виджет свободного времени, образование врача одной строкой, состояние ошибки форм. ========================================================================== */ /* --- Секция «Новости и акции»: фон как у .section--alt --- */ .section--news { background: linear-gradient(180deg, var(--surface-2) 0%, var(--accent-softer) 55%, var(--surface-2) 100%); } /* --- Шапка секции + кнопки карусели --- */ .news-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .news-top .section-head { margin-bottom: 0; flex: 1 1 auto; } .news-nav { display: flex; gap: var(--space-2); flex: none; padding-bottom: var(--space-1); } .news-nav-btn { width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .news-nav-btn:hover { border-color: var(--accent); background: var(--accent-softer); } .news-nav-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; } /* --- Трек карусели: горизонтальный scroll-snap, свайп на мобильном --- */ .news-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-4); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) 0; scrollbar-width: none; } .news-track::-webkit-scrollbar { display: none; } .news-card { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent); } } @media (min-width: 640px) { .news-card { flex-basis: calc((100% - 1.1rem) / 2); } } @media (min-width: 1024px) { .news-card { flex-basis: calc((100% - 2.2rem) / 3); } } /* --- Обложка карточки: фото или градиентная заглушка --- */ .news-cover { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; } .news-cover img { width: 100%; height: 100%; object-fit: cover; } .news-cover--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-softer) 60%, var(--surface-2) 100%); color: var(--accent); } /* --- Тело карточки --- */ .news-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4); flex: 1; } .news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .news-date { font-size: var(--fs-sm); color: var(--text-muted); } .news-chip--promo { background: var(--accent); color: #fff; } .news-title { font-size: var(--fs-body); line-height: 1.4; } .news-excerpt { font-size: var(--fs-body-sm); color: var(--text-muted); flex: 1 0 auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-more { margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } .news-more svg { transition: transform var(--dur-base) var(--ease-out); } .news-card:hover .news-more svg { transform: translateX(3px); } /* --- Модал полной новости --- */ .news-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .news-modal[hidden] { display: none; } .news-modal__backdrop { position: absolute; inset: 0; background: rgba(19, 26, 54, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .news-modal__dialog { position: relative; z-index: 1; width: min(46rem, 100%); max-height: min(88dvh, 52rem); overflow-y: auto; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-l); } .news-modal__close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .news-modal__close:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-softer); } .news-modal__cover { aspect-ratio: 21 / 9; background: var(--surface-2); overflow: hidden; } .news-modal__cover img { width: 100%; height: 100%; object-fit: cover; } .news-modal__cover--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-softer) 60%, var(--surface-2) 100%); color: var(--accent); } .news-modal__body { padding: var(--space-5) var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .news-modal__title { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.3; } .news-loading { color: var(--text-muted); font-size: var(--fs-body-sm); } /* Типографика HTML-контента новости (санитизируется на backend) */ .news-modal__content { color: var(--text); font-size: var(--fs-body-sm); } .news-modal__content p { margin-block: var(--space-3); } .news-modal__content h2, .news-modal__content h3, .news-modal__content h4 { margin-block: var(--space-4) var(--space-2); } .news-modal__content ul, .news-modal__content ol { margin-block: var(--space-3); padding-left: var(--space-5); } .news-modal__content li { margin-block: var(--space-1); } .news-modal__content a { color: var(--accent-strong); font-weight: 600; } .news-modal__content img { border-radius: var(--radius-s); } .news-modal__content blockquote { border-left: 3px solid var(--accent); padding-left: var(--space-4); color: var(--text-muted); margin-block: var(--space-3); } .news-modal__content table { width: 100%; border-collapse: collapse; margin-block: var(--space-3); } .news-modal__content th, .news-modal__content td { border: 1px solid var(--border); padding: var(--space-2) var(--space-2); text-align: left; } /* --- Врачи: образование одной строкой (полный текст — в title) --- */ .doctor-edu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* --- Формы: состояние ошибки отправки --- */ .form-status--error { background: #fdecec; color: #b3261e; } /* --- Контакты: выбор даты (date-strip) и времени (time-grid) --- */ .field-label { font-size: var(--fs-md); font-weight: 700; } .booking-disclaimer { margin-top: var(--space-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); } .date-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); } .date-cell { display: grid; gap: var(--space-1); justify-items: center; padding: var(--space-2) var(--space-1); min-height: 3.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .date-cell__dow { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); white-space: nowrap; } .date-cell__num { font-size: var(--fs-md); font-weight: 800; white-space: nowrap; } .date-cell:hover { border-color: var(--accent); background: var(--accent-softer); } .date-cell[aria-pressed="true"], .date-cell--selected { background: var(--accent); border-color: var(--accent); color: #fff; } .date-cell[aria-pressed="true"] .date-cell__dow, .date-cell--selected .date-cell__dow { color: rgba(255, 255, 255, 0.85); } .date-cell--disabled, .date-cell[aria-disabled="true"] { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; opacity: 0.55; } .date-cell--disabled:hover, .date-cell[aria-disabled="true"]:hover { border-color: var(--border); background: var(--surface-2); } .time-grid__title { font-size: var(--fs-body); margin-bottom: var(--space-2); } .time-grid { display: grid; gap: var(--space-3); } .time-grid__group { display: grid; gap: var(--space-2); } .time-grid__heading { font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .time-grid__cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-2); } .time-cell { padding: var(--space-2) var(--space-2); min-height: 2.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: var(--fs-body-sm); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .time-cell:hover { border-color: var(--accent); background: var(--accent-softer); color: var(--accent-strong); } .time-cell[aria-pressed="true"], .time-cell--selected { background: var(--accent); border-color: var(--accent); color: #fff; } .time-grid__empty { font-size: var(--fs-body-sm); color: var(--text-muted); } .booking-selected { font-size: var(--fs-body-sm); font-weight: 700; color: var(--accent-strong); } .booking-selected[hidden] { display: none; } @media (max-width: 480px) { .date-strip { gap: var(--space-1); } .date-cell { padding: var(--space-2) var(--space-1); min-height: 2.9rem; } .date-cell__dow { font-size: var(--fs-xs); } .date-cell__num { font-size: var(--fs-xs); } } @media (max-width: 480px) { .booking-panel { padding-inline: var(--space-4); } .booking-panel .form-card { padding-inline: var(--space-3); } } /* --- Мобильная вёрстка карусели --- */ @media (max-width: 640px) { .news-top { flex-wrap: wrap; align-items: center; } .news-nav-btn { width: 2.5rem; height: 2.5rem; } } /* --- Контрастный режим (ГОСТ) --- */ html.a11y-contrast .news-modal__backdrop { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } html.a11y-contrast .news-modal__dialog, html.a11y-contrast .news-card, html.a11y-contrast .news-cover, html.a11y-contrast .news-modal__cover { border: 2px solid #000; box-shadow: none; } html.a11y-contrast .news-chip--promo { background: #000; color: #fff; border: 2px solid #000; } html.a11y-contrast .date-cell[aria-pressed="true"], html.a11y-contrast .date-cell--selected, html.a11y-contrast .time-cell[aria-pressed="true"], html.a11y-contrast .time-cell--selected { background: #000; border: 2px solid #000; color: #fff; } html.a11y-contrast .form-status--error { background: #fff; border: 2px solid #000; color: #000; } /* --- Отключение анимаций (ГОСТ) --- */ html.a11y-no-anim .news-track { scroll-behavior: auto; } html.a11y-no-anim .news-card, html.a11y-no-anim .news-nav-btn, html.a11y-no-anim .news-more svg, html.a11y-no-anim .date-cell, html.a11y-no-anim .time-cell { transform: none; } /* -------------------------------------------------------------------------- T34: touch targets, типографика, container queries -------------------------------------------------------------------------- */ .btn { min-height: 48px; } .btn--sm { min-height: 44px; } a.chip, button.chip { min-height: 44px; } .a11y-switch, .a11y-reset { min-height: 44px; } h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; } /* -------------------------------------------------------------------------- Аудит 21.09.2026: тап-зоны ≥44px без изменения визуала (padding расширяет область нажатия, отрицательный margin сохраняет ритм) -------------------------------------------------------------------------- */ .breadcrumbs a { padding: 0.75rem 0.25rem; margin: -0.75rem -0.25rem; } .footer-col a, .footer-legal-links a, .footer-map-link { padding: 0.75rem 0.25rem; margin: -0.75rem -0.25rem; } .toc-chips a { padding-block: 0.8125rem; } p a:not([class]), li a:not([class]) { padding: 0.75rem 0.125rem; margin: -0.75rem -0.125rem; } .header-phone { padding: 0.875rem; margin: -0.875rem; } .card-link, .nav-phone, .footer-license { padding: 0.625rem 0.25rem; margin: -0.625rem -0.25rem; } .logo { padding-block: 0.25rem; margin-block: -0.25rem; } /* Чекбоксы согласия: 16px — без iOS-зума при фокусе */ input[type='checkbox'] { font-size: 16px; } /* Печать-штамп на hero: на узких экранах скрываем (декор с 7px-текстом) */ @media (max-width: 599px) { .stamp { display: none; } } /* Декор-рамка фото директора: на мобильных меньше вылет за контейнер (было причиной горизонтального скролла 4–13px) */ @media (max-width: 899px) { .director-photo::before { inset: 12% -2% -4% 12%; } } /* Cookie-баннер на мобильных: компактнее, кнопки в ряд */ @media (max-width: 899px) { .cookie-banner { bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)); padding: var(--space-3); gap: var(--space-2); } .cookie-text { line-height: 1.45; } .cookie-actions { width: 100%; margin-left: 0; } .cookie-actions .btn { flex: 1 1 auto; } } /* Честная заглушка отзывов (до наполнения через /admin) */ .reviews-note { grid-column: 1 / -1; padding: var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-m); color: var(--text-muted); font-size: var(--fs-body-sm); line-height: 1.6; text-align: center; }