/* ============================================================ МЕРИДИАН — медицинский центр Дизайн-система: тёплая бумага, хвойный зелёный, латунь. Ориентир — научно-медицинское издание, а не лендинг. ============================================================ */ /* Шрифты подключены -ом в каждой страницы. @import внутри CSS заставлял браузер сперва скачать и разобрать style.css и только потом узнать о шрифтах — лишний круг до первого текста. */ :root { /* --- ФОНЫ --- Референс строится на белом с холодной подложкой. Берём ту же схему, но подложку уводим в наш хвойный, а не в лавандовый. */ --paper: #F3F6F4; /* подложка страницы */ --paper-2: #E9EFEB; /* тонированная секция */ --paper-3: #DDE6E1; --card: #FFFFFF; /* карточка — чистый белый, как в референсе */ --ink: #0F1F1A; --ink-2: #33453E; --ink-3: #5C6862; /* 4.75:1 в худшем случае — проверено */ /* --- фирменные --- */ --forest: #10574A; /* основная кнопка и заливки: светлее прежнего, иначе на белом читается как чёрный провал */ --forest-dp:#0C3B33; /* глубокий — тёмные секции */ --forest-lo:#1B5448; --brass: #8A5F22; /* текстовый акцент */ --brass-br: #C9963F; /* вторая кнопка, роль «кораллового» в референсе */ --brass-sf: #F4E4C6; /* мягкая латунная плашка под иконку */ --mint: #DCEBE4; /* мягкая зелёная плашка под иконку */ --clay: #A83E27; /* сигнальный */ /* --- градиенты: у референса ими залиты крупные панели --- */ --grad-brand: linear-gradient(135deg, #146455 0%, #10574A 45%, #0C3B33 100%); --grad-soft: linear-gradient(135deg, #E8F2ED 0%, #DCEBE4 55%, #E9E3D4 100%); /* --- текст на хвойном фоне --- Раньше подписи задавались как rgba(255,255,255,.45….5) прямо в разметке: 3.84:1 и 4.38:1 — обе ниже AA. Свели к двум токенам выше порога. */ --on-dark: rgba(255,255,255,.88); --on-dark-2: rgba(255,255,255,.68); /* 6.9:1 на --forest */ --rule: #DCE4DF; --rule-2: #C4D2CA; /* --- ФОРМА --- Главное отличие референса: скругления крупные, кнопки — пилюли. Раньше здесь было 2px «печатной» остроты. */ --r-sm: 10px; --r: 16px; /* карточка */ --r-md: 20px; --r-lg: 28px; /* крупная панель, снимок */ --r-pill: 999px; /* кнопки и чипы */ /* --- тени: мягкие и цветные в тон, а не серые --- */ --sh-1: 0 1px 2px rgba(16,87,74,.05); --sh-2: 0 4px 18px rgba(16,87,74,.07); --sh-3: 0 18px 44px rgba(12,59,51,.13); --sh-card: 0 2px 4px rgba(16,87,74,.04), 0 12px 28px rgba(16,87,74,.06); /* --- движение --- */ --e: cubic-bezier(.2,.7,.3,1); --e-soft: cubic-bezier(.4,0,.2,1); /* использовалась в app.js, но объявлена нигде не была — из-за чего animation-shorthand становился невалидным и анимация не проигрывалась */ --e-out: cubic-bezier(.16,1,.3,1); --t: .3s var(--e); --t-fast: .18s var(--e); --t-slow: .7s var(--e); /* --- сетка --- */ --nav-h: 72px; --pad: clamp(18px, 4.4vw, 56px); --maxw: 1280px; --gutter: clamp(20px, 2.6vw, 40px); --z-nav: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; } /* ============================================================ База ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17.5px; font-weight: 400; line-height: 1.58; -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-top: var(--nav-h); /* распорка под fixed-шапку */ } body.no-scroll { overflow: hidden; } /* якорные переходы не должны заезжать под шапку */ :target, [id] { scroll-margin-top: calc(var(--nav-h) + 16px); } /* бумажное зерно — убирает ощущение «плоского вектора» */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } input, select, textarea { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } /* figure и blockquote несли браузерные margin: 17.5px 40px — из-за них каждый снимок и каждая цитата стояли на 40px правее собственной подписи, а «выходящий в край» герой не доходил до края. Сброшен только p. */ p, figure, blockquote, figcaption, dl, dd { margin: 0; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; line-height: 1.08; letter-spacing: -.014em; } ::selection { background: var(--forest); color: var(--paper); } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--paper-2); } ::-webkit-scrollbar-thumb { background: var(--rule-2); border: 4px solid var(--paper-2); } ::-webkit-scrollbar-thumb:hover { background: var(--forest); } /* ============================================================ Каркас ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .wrap--tight { max-width: 900px; } .section { padding-block: clamp(44px, 5.4vw, 84px); position: relative; } .section--sm { padding-block: clamp(30px, 3.6vw, 52px); } .section--tint { background: var(--paper-2); } .section--dark { background: var(--forest); color: #DDE5E0; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper); } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } .rule--dark { background: rgba(255,255,255,.15); } .grid { display: grid; gap: var(--gutter); } .g2 { grid-template-columns: repeat(2,1fr); } .g3 { grid-template-columns: repeat(3,1fr); } .g4 { grid-template-columns: repeat(4,1fr); } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .wrapflex { flex-wrap: wrap; } .gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px} .gap-24{gap:24px}.gap-32{gap:32px}.gap-40{gap:40px} .mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px} .mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:36px}.mt-56{margin-top:44px} .center{text-align:center}.mx-auto{margin-inline:auto}.push{margin-left:auto} /* Подпись раздела уходит на поле, как колонцифра в книге. Была сложена стопкой над заголовком — то самое «ушко», по которому лендинг узнаётся с одного взгляда. Класс .ed (editorial) обещал именно поле. */ .ed { display: block; } .ed__label { display: block; margin-bottom: 14px; } @media (min-width: 1100px) { /* :has — только когда подпись реально есть. Без него единственный ребёнок .ed попадал в узкую 132px колонку подписи, и контент на «Врачах» и «Направлениях» схлопывался в столбик. */ .ed:has(> .ed__label) { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: var(--gutter); } .ed__label { margin-bottom: 0; padding-top: .5em; /* садимся на первую строку заголовка */ border-top: 1px solid var(--rule); align-self: start; } .section--dark .ed__label { border-top-color: rgba(255,255,255,.18); } } /* ============================================================ Типографика ============================================================ */ .display { font-size: clamp(2.6rem, 6.4vw, 5.1rem); font-weight: 300; line-height: 1.02; letter-spacing: -.028em; } .display em { font-style: normal; font-weight: 700; color: var(--brass); } .h1 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); font-weight: 300; letter-spacing: -.022em; } .h2 { font-size: clamp(1.75rem, 3.5vw, 2.7rem); font-weight: 300; letter-spacing: -.02em; } .h3 { font-size: clamp(1.22rem, 2vw, 1.55rem); font-weight: 400; } .h4 { font-size: 1.08rem; font-weight: 500; font-family: 'Manrope', system-ui, sans-serif; letter-spacing: -.005em; } .lead { font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.62; color: var(--ink-2); max-width: 64ch; } .muted { color: var(--ink-3); } .small { font-size: 0.96rem; } .tiny { font-size: 0.87rem; } /* моно-лейбл раздела */ .label { font-family: 'Manrope', system-ui, sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--brass); } .label--ink { color: var(--ink-3); } .label--paper { color: var(--brass-br); } .label--num { display: flex; align-items: baseline; gap: 10px; } .label--num i { font-style: normal; color: var(--rule-2); } .mono { font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } /* заголовок секции */ .shead { max-width: 640px; } .shead .h2 { margin-top: 16px; } .shead .lead { margin-top: 18px; } .shead--center { margin-inline: auto; text-align: center; } .shead--center .lead { margin-inline: auto; } .headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* ============================================================ Кнопки ============================================================ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 0 28px; border-radius: var(--r-pill); background: var(--forest); color: #fff; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.98rem; font-weight: 500; letter-spacing: 0; overflow: hidden; isolation: isolate; white-space: nowrap; transition: color var(--t-fast), transform var(--t-fast), box-shadow var(--t); touch-action: manipulation; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brass); transform: translateY(100%); transition: transform .42s var(--e); } .btn:hover::before { transform: translateY(0); } .btn:hover { box-shadow: var(--sh-2); } .btn:active { transform: translateY(1px); } .btn--lg { min-height: 58px; padding: 0 34px; font-size: 1rem; } .btn--sm { min-height: 44px; padding: 0 20px; font-size: .9rem; } /* было 42 — ниже порога касания */ .btn--block { width: 100%; } .btn--line { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2), var(--sh-1); } .btn--line:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--brass), var(--sh-2); } .btn--line::before { background: var(--brass); } .btn--brass { background: var(--brass); } .btn--brass::before { background: var(--forest); } .btn--paper { background: var(--paper); color: var(--forest); } .btn--paper::before { background: var(--brass-br); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* текстовая ссылка со «стрелкой-линией» */ .alink { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.92rem; font-weight: 500; letter-spacing: 0; color: var(--brass); transition: color var(--t-fast); } /* та же растущая линия, но через scaleX вместо width: тот же кадр, без пересчёта раскладки */ .alink i { display: block; width: 44px; height: 1px; background: currentColor; transform: scaleX(.636); transform-origin: left center; transition: transform var(--t); } .alink:hover { color: var(--forest); } .alink:hover i { transform: scaleX(1); } .alink--paper { color: var(--brass-br); } .alink--paper:hover { color: var(--paper); } /* ============================================================ Логотип: знак-меридиан ============================================================ */ /* flex:none не давал знаку сжиматься, из-за чего шапка требовала 437px и на любом телефоне выталкивала бургер за экран. Теперь логотип уступает. */ .logo { display: flex; align-items: center; gap: 13px; flex: 0 1 auto; min-width: 0; } .logo__mark { width: 34px; height: 34px; flex: none; color: var(--forest); transition: transform .6s var(--e); } .logo:hover .logo__mark { transform: rotate(180deg); } .logo__mark circle, .logo__mark ellipse, .logo__mark path { vector-effect: non-scaling-stroke; } .logo__txt { display: flex; flex-direction: column; line-height: 1; min-width: 0; overflow: hidden; } .logo__name { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.32rem; font-weight: 400; letter-spacing: .1em; text-indent: .1em; white-space: nowrap; } .logo__sub { font-family: 'Manrope', system-ui, sans-serif; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; text-indent: .14em; } .logo--paper .logo__mark { color: var(--brass-br); } .logo--paper .logo__name { color: var(--paper); } .logo--paper .logo__sub { color: rgba(255,255,255,.45); } /* Верхняя служебная полоса .utility удалена: 14 строк стилей с display:none и без единого элемента в разметке на всех шести страницах. */ /* ============================================================ Навигация ============================================================ */ /* fixed + распорка в body вместо sticky. При sticky шапка занимала место в потоке, и её сжатие 72→62px во время прокрутки утаскивало вверх весь контент под ней — заметный подскок. Теперь высота меняется вне потока, распорка остаётся постоянной. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; background: rgba(243,246,244,.86); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--rule); /* высоту не анимируем: в референсе полоса постоянной высоты, а height — layout-свойство, оно пересчитывало раскладку шапки на каждом кадре. На прокрутке меняются только фон, тень и граница — это композитинг. */ transition: background var(--t), box-shadow var(--t), border-color var(--t); } .nav.is-stuck { background: rgba(255,255,255,.94); box-shadow: var(--sh-2); border-bottom-color: transparent; } .nav__in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; gap: 20px; } .nav__links { display: flex; align-items: center; gap: 30px; margin-left: auto; } .nav__link { position: relative; font-size: 0.96rem; font-weight: 400; color: var(--ink-2); padding-block: 6px; transition: color var(--t-fast); } .nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--e); } .nav__link:hover { color: var(--ink); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; } .nav__link.is-active { color: var(--ink); } .nav__side { display: flex; align-items: center; gap: 18px; flex: none; margin-left: auto; padding-left: 16px; } .nav__tel { display: flex; flex-direction: column; line-height: 1.2; text-align: right; } .nav__tel b { font-family: 'Manrope', system-ui, sans-serif; font-size: 0.98rem; font-weight: 500; letter-spacing: -.01em; } .nav__tel span { font-size: 0.84rem; color: var(--ink-3); } .burger { display: none; width: 44px; height: 44px; place-items: center; } .burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: background var(--t-fast); } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--ink); transition: transform var(--t), top var(--t-fast); } .burger span::before { top: -7px; } .burger span::after { top: 7px; } .burger.is-open span { background: transparent; } .burger.is-open span::before { top: 0; transform: rotate(45deg); } .burger.is-open span::after { top: 0; transform: rotate(-45deg); } /* visibility, а не только opacity: иначе Tab уходит в невидимое меню. Дублирует inert из app.js намеренно — работает даже если скрипт не выполнился. */ .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: rgba(18,33,28,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t), visibility var(--t); } .drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(370px, 92vw); background: var(--paper); padding: 26px var(--pad) calc(26px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s var(--e); overflow-y: auto; } .drawer.is-open .drawer__panel { transform: none; } .drawer__link { padding: 18px 0; border-bottom: 1px solid var(--rule); font-family: 'Manrope', system-ui, sans-serif; font-size: 1.5rem; font-weight: 300; display: flex; align-items: baseline; gap: 14px; transition: color var(--t-fast), transform var(--t-fast); } .drawer__link:hover { color: var(--brass); transform: translateX(8px); } /* ============================================================ Фотография — единая арт-дирекция Все снимки проходят через одну тонировку под палитру дома, поэтому не читаются как случайный сток. ============================================================ */ .ph { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-3); /* подложка, если картинка не загрузилась */ display: block; } .ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); display: block; filter: saturate(.97) contrast(1.02); transform: scale(1.02); transition: transform 1.4s var(--e-soft), filter var(--t-slow); } /* тёплая тонировка в цвет дома */ .ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(155deg, rgba(16,58,49,.34) 0%, rgba(138,95,34,.12) 48%, rgba(16,58,49,.30) 100%); mix-blend-mode: multiply; opacity: .12; transition: opacity var(--t-slow); } .ph--soft::after { opacity: .34; } .ph--deep::after { opacity: .8; } a.ph:hover img, .ph--zoom:hover img { transform: scale(1.06); } a.ph:hover::after { opacity: .42; } /* мягкая тень-«свет» под крупными снимками */ .ph--lift { box-shadow: 0 30px 70px rgba(18,33,28,.22), 0 4px 14px rgba(18,33,28,.08); } /* подпись к фото */ .phcap { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.88rem; letter-spacing: 0; color: var(--ink-3); } .phcap i { display: block; width: 20px; height: 1px; background: var(--rule-2); position: relative; top: -4px; flex: none; } /* Снимок виден ВСЕГДА — ни скрипты, ни анимация не могут оставить пустое место. Селектор намеренно специфичнее, чем html.js [data-reveal] ниже по файлу. */ html .ph[data-reveal], html.js .ph[data-reveal] { opacity: 1; transform: none; clip-path: none; } html.js .ph[data-reveal] img { transform: scale(1.05); } html.js .ph[data-reveal].is-in img { transform: scale(1); } /* ============================================================ Герой ============================================================ */ .hero { position: relative; padding-block: clamp(20px, 2.6vw, 38px) 0; overflow: hidden; } /* знак-меридиан крупно, как графическая подложка первого экрана */ .hero__arc { position: absolute; z-index: 0; pointer-events: none; left: clamp(-260px, -16vw, -120px); top: clamp(-180px, -12vw, -90px); width: min(660px, 54vw); aspect-ratio: 1; opacity: .85; } .hero__arc svg { width: 100%; height: 100%; animation: meridianSpin 90s linear infinite; } .hero__arc :is(circle, ellipse, path) { stroke: var(--brass); stroke-opacity: .22; fill: none; } @keyframes meridianSpin { to { transform: rotate(360deg); } } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr); gap: clamp(24px, 3.2vw, 48px); align-items: center; } .hero__title { margin-top: 24px; font-size: clamp(2.3rem, 4.4vw, 3.9rem); } .hero__lead { margin-top: 26px; max-width: 44ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } /* правая колонка уходит в край экрана */ .hero__art { position: relative; margin-right: calc((100vw - min(100vw, var(--maxw))) / -2 - var(--pad)); } .hero__photo { height: clamp(420px, 47vw, 600px); } /* карточка расписания, наезжающая на снимок */ /* .slots объявлен ниже и тоже задаёт position — поэтому повышаем специфичность */ .slots.hero__card { position: absolute; left: clamp(-40px, -3vw, -20px); bottom: clamp(-24px, -2vw, -14px); width: min(370px, 84%); z-index: 2; } @media (max-width: 1180px) { .slots.hero__card { left: 16px; bottom: 16px; width: min(340px, calc(100% - 32px)); } } @media (max-width: 900px) { .hero__art { margin-right: calc(-1 * var(--pad)); margin-left: calc(-1 * var(--pad)); } .hero__photo { height: clamp(340px, 62vw, 460px); } /* снимок уходит в край намеренно, а карточка — нет: без этого её рамку срезало краем экрана и она вставала на свою третью левую границу */ .slots.hero__card { position: static; width: auto; margin: 0 var(--pad); } } /* широкая полоса-атмосфера */ .band { position: relative; margin-inline: calc((100vw - min(100vw, var(--maxw))) / -2 - var(--pad)); height: clamp(300px, 44vw, 520px); } /* затемнение снизу, чтобы подпись читалась на любом кадре */ .band::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(12,26,22,.92) 0%, rgba(12,26,22,.74) 24%, rgba(12,26,22,.40) 46%, rgba(12,26,22,.12) 62%, transparent 76%); } .band__cap { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 2; width: 100%; max-width: var(--maxw); padding: 0 var(--pad) clamp(26px,3vw,44px); color: var(--paper); text-shadow: 0 1px 24px rgba(12,26,22,.55); } .band__cap .label { color: var(--gold-3, #E8CFA0); } /* Полоса с бегущей кардиограммой убрана: чистая декорация без информационной работы и самый узнаваемый штамп медицинского веба. Заодно минус одна из трёх бесконечных анимаций на первом экране. */ /* показатели под героем */ .figures { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); } .figures > div { padding: 26px 0 30px; padding-right: 20px; border-right: 1px solid var(--rule); } .figures > div:last-child { border-right: 0; } .figures > div:not(:first-child) { padding-left: clamp(14px, 2vw, 30px); } .figures b { display: block; font-family: 'Manrope', system-ui, sans-serif; font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .figures > div > span { display: block; margin-top: 12px; font-size: 0.98rem; color: var(--ink-3); max-width: 22ch; } @media (max-width: 760px) { .figures { grid-template-columns: 1fr 1fr; } .figures > div:nth-child(2n) { border-right: 0; } .figures > div:nth-child(n+3) { border-top: 1px solid var(--rule); } } /* ============================================================ Панель «свободные окна» — главный объект героя ============================================================ */ .slots { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-3); position: relative; } .slots__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--rule); font-family: 'Manrope', system-ui, sans-serif; font-size: 0.94rem; font-weight: 500; } .slots__head b { color: var(--brass); font-weight: 500; font-family: 'Manrope', system-ui, sans-serif; } .slots__row { padding: 16px 22px; border-bottom: 1px solid var(--rule); } .slots__row:last-of-type { border-bottom: 0; } .slots__spec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .slots__spec b { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.16rem; font-weight: 400; } .slots__spec span { font-size: 0.86rem; color: var(--ink-3); font-family: 'Manrope', system-ui, sans-serif; } .slots__doc { font-size: 0.92rem; color: var(--ink-3); margin-top: 2px; } .slots__times { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .slots__t { font-family: 'Manrope', system-ui, sans-serif; font-size: 0.9rem; padding: 6px 11px; border: 1px solid var(--rule-2); color: var(--ink); transition: all var(--t-fast); background: transparent; } .slots__t { min-height: 44px; display: inline-flex; align-items: center; } .slots__t:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); } /* было --rule-2 (1.7:1) — занятые часы буквально не читались. Это не просто «выключено», а сведения о занятости: должны быть разборчивы. */ .slots__t.busy { color: #868D86; border-color: var(--rule); pointer-events: none; text-decoration: line-through; } .slots__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; background: var(--paper-2); border-top: 1px solid var(--rule); } .livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); position: relative; flex: none; } .livedot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2s var(--e) infinite; } @keyframes ping { 0% { transform: scale(1); opacity: .6 } 100% { transform: scale(3.4); opacity: 0 } } /* ============================================================ Полоса доверия ============================================================ */ .trust { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.14); } .trust > div { padding: 26px clamp(14px,2vw,28px) 28px; border-right: 1px solid rgba(255,255,255,.14); } .trust > div:last-child { border-right: 0; } .trust > div:first-child { padding-left: 0; } .trust b { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.93rem; color: var(--paper); letter-spacing: .04em; } .trust span { display: block; margin-top: 8px; font-size: 0.87rem; color: rgba(255,255,255,.5); } @media (max-width: 760px) { .trust { grid-template-columns: 1fr 1fr; } .trust > div { padding-left: clamp(14px,2vw,28px); } .trust > div:first-child { padding-left: clamp(14px,2vw,28px); } .trust > div:nth-child(2n) { border-right: 0; } .trust > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); } } /* ============================================================ Направления — редакционный список, не карточки ============================================================ */ /* ============================================================ Направления — сетка карточек (было: редакционные строки). Разметка не менялась: те же пять детей .dir__in раскладываются по областям, поэтому все ссылки и якоря на месте. ============================================================ */ .dirs { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; } .dir { position: relative; display: block; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sh-card); transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .dir__in { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "no no" "name name" "desc desc" "meta go"; /* описание забирает свободную высоту, поэтому цена и стрелка стоят по нижнему краю у всех карточек ряда, а не пляшут по длине текста */ grid-template-rows: auto auto 1fr auto; gap: 0; padding: clamp(20px, 1.7vw, 26px); height: 100%; } /* номер направления превращается в кружок-бейдж, как иконка у референса */ .dir__no { grid-area: no; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--forest); font-size: .88rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; transition: background var(--t), color var(--t); } .dir__name { grid-area: name; margin-top: 18px; font-size: clamp(1.08rem, 1.25vw, 1.22rem); font-weight: 600; letter-spacing: -.012em; line-height: 1.25; } .dir__desc { grid-area: desc; margin-top: 8px; margin-bottom: 20px; font-size: .92rem; color: var(--ink-3); line-height: 1.5; } .dir__meta { grid-area: meta; align-self: end; font-size: .86rem; color: var(--ink-3); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .dir__meta b { display: inline; color: var(--ink); font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; } /* круглая кнопка со стрелкой в углу карточки */ .dir__go { grid-area: go; align-self: end; justify-self: end; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--forest); transition: background var(--t), color var(--t), transform var(--t); } .dir__go svg { width: 17px; height: 17px; } .dir:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--rule-2); } .dir:hover .dir__go { background: var(--forest); color: #fff; transform: translateX(2px); } .dir:hover .dir__no { background: var(--brass-sf); color: var(--brass); } /* одна карточка в наборе — залитая фирменным градиентом, как у референса */ .dirs .dir:nth-child(5) { background: var(--grad-brand); border-color: transparent; } .dirs .dir:nth-child(5) .dir__name { color: #fff; } .dirs .dir:nth-child(5) .dir__desc { color: rgba(255,255,255,.78); } .dirs .dir:nth-child(5) .dir__meta { color: rgba(255,255,255,.72); } .dirs .dir:nth-child(5) .dir__meta b { color: #fff; } .dirs .dir:nth-child(5) .dir__no { background: rgba(255,255,255,.16); color: #fff; } .dirs .dir:nth-child(5) .dir__go { background: #fff; color: var(--forest); } @media (max-width: 1080px) { .dirs { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 620px) { .dirs { grid-template-columns: 1fr; } } /* ============================================================ Именная табличка врача (без фотографии — место под неё) ============================================================ */ .plate { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-card); background: var(--card); border: 1px solid var(--rule); display: flex; flex-direction: column; transition: border-color var(--t), transform var(--t), box-shadow var(--t); } .plate:hover { border-color: var(--rule-2); transform: translateY(-3px); box-shadow: var(--sh-2); } .plate__face { position: relative; aspect-ratio: 1/1.04; display: grid; place-items: center; background: var(--pl, var(--paper-2)); border-bottom: 1px solid var(--rule); overflow: hidden; } .plate__face::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(18,33,28,.045) 0 1px, transparent 1px 8px); opacity: .55; } .plate__face::after { content: ''; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(18,33,28,.14); border-radius: 50%; } .plate__mono { position: relative; font-family: 'Manrope', system-ui, sans-serif; font-weight: 300; font-size: clamp(3rem, 5vw, 3.9rem); line-height: 1; letter-spacing: .02em; color: var(--forest); } /* вариант с фотографией вместо монограммы */ .plate__face--ph { background: var(--forest); } .plate__face--ph::before { display: none; } .plate__face--ph::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; transform: none; border: 0; border-radius: 0; /* только лёгкая тонировка сверху — без затемнения нижнего края, иначе под каждым портретом появляется зелёная полоса */ background: linear-gradient(172deg, rgba(16,58,49,.12) 0%, rgba(138,95,34,.04) 60%, rgba(138,95,34,.02) 100%); mix-blend-mode: multiply; opacity: .8; pointer-events: none; } .plate__face--ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(.86) contrast(1.04); transition: transform 1.1s var(--e-soft); } .plate:hover .plate__face--ph img { transform: scale(1.045); } .plate__badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0; background: var(--forest); color: var(--paper); padding: 5px 9px; } .plate__badge--brass { background: var(--brass); } .plate__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .plate__name { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.3rem; font-weight: 400; line-height: 1.24; } .plate__spec { font-size: 0.93rem; color: var(--ink-3); margin-top: 6px; } .plate__data { margin-top: 14px; border-top: 1px solid var(--rule); } .plate__data div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; } .plate__data div:last-child { border-bottom: 0; } .plate__data span { color: var(--ink-3); } .plate__data b { font-weight: 500; font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; } .plate__act { margin-top: auto; padding-top: 16px; } /* ============================================================ Этапы приёма — таймлайн на линии ЭКГ ============================================================ */ .flow { position: relative; } .flow__line { position: absolute; left: 0; right: 0; top: 44px; height: 1px; background: var(--rule); } .flow__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gutter); position: relative; } .flow__node { position: relative; padding-top: 0; } .flow__dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule-2); position: relative; top: 38px; margin-bottom: 58px; transition: all var(--t); } .flow__node:hover .flow__dot { background: var(--brass); border-color: var(--brass); transform: scale(1.4); } .flow__no { font-size: 0.9rem; font-weight: 600; color: var(--brass); } .flow__t { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.3rem; font-weight: 400; margin-top: 12px; } .flow__d { font-size: 0.98rem; color: var(--ink-3); margin-top: 10px; line-height: 1.55; } @media (max-width: 860px) { .flow__line { display: none; } .flow__grid { grid-template-columns: 1fr; } .flow__dot { top: 0; margin-bottom: 14px; } } /* ============================================================ Цитаты-отзывы ============================================================ */ .quote { border-top: 1px solid var(--rule); padding-top: 30px; } .quote__txt { font-family: 'Manrope', system-ui, sans-serif; font-weight: 300; font-size: clamp(1.18rem, 1.9vw, 1.52rem); line-height: 1.48; letter-spacing: -.01em; } .quote__by { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .quote__ini { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--rule-2); font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; color: var(--forest); } .quote__meta b { display: block; font-size: 0.97rem; font-weight: 500; } .quote__meta span { font-size: 0.88rem; color: var(--ink-3); } /* ============================================================ Таблица прайса ============================================================ */ /* колонка «Стоимость» на телефоне уезжает за правый край, и ничто на это не намекало: добавляем затухание у края и подсказку под таблицей */ .tablewrap { overflow-x: auto; border-top: 1px solid var(--rule); background: linear-gradient(to right, var(--paper) 30%, rgba(244,242,236,0)) left / 36px 100% no-repeat, linear-gradient(to left, var(--paper) 30%, rgba(244,242,236,0)) right / 36px 100% no-repeat; background-attachment: local, local; } .tablewrap:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .tablehint { display: none; margin-top: 10px; } @media (max-width: 700px) { .tablehint { display: block; } } table.pt { width: 100%; border-collapse: collapse; min-width: 580px; } table.pt th { text-align: left; padding: 14px 16px 14px 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.88rem; letter-spacing: 0; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--rule-2); } table.pt td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; } table.pt tbody tr { transition: background var(--t-fast); } table.pt tbody tr:hover { background: var(--card); } table.pt th:last-child, table.pt td:last-child { text-align: right; padding-right: 0; } .price { font-family: 'Manrope', system-ui, sans-serif; font-size: 0.95rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } .price--free { color: var(--brass); } /* ============================================================ Аккордеон ============================================================ */ .acc { border-top: 1px solid var(--rule); } .acc__item { border-bottom: 1px solid var(--rule); } .acc__btn { width: 100%; display: flex; align-items: flex-start; gap: 22px; padding: 24px 0; text-align: left; font-family: 'Manrope', system-ui, sans-serif; font-size: clamp(1.08rem,1.6vw,1.28rem); font-weight: 400; transition: color var(--t-fast); } .acc__btn:hover { color: var(--brass); } .acc__btn > span:not(.acc__ico):not(.acc__no) { flex: 1 1 auto; min-width: 0; } .acc__no { display: none; } .acc__ico { width: 16px; height: 16px; flex: none; position: relative; margin-top: 8px; } .acc__ico::before, .acc__ico::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--brass); transition: transform var(--t); } .acc__ico::before { width: 14px; height: 1px; transform: translate(-50%,-50%); } .acc__ico::after { width: 1px; height: 14px; transform: translate(-50%,-50%); } .acc__item.is-open .acc__ico::after { transform: translate(-50%,-50%) rotate(90deg); } .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e); } .acc__item.is-open .acc__body { grid-template-rows: 1fr; } .acc__inner { overflow: hidden; } .acc__inner > div { padding: 0 0 26px 44px; color: var(--ink-3); max-width: 74ch; } @media (max-width: 620px) { .acc__inner > div { padding-left: 0; } } /* ============================================================ Формы ============================================================ */ .field { display: flex; flex-direction: column; gap: 8px; } .field > label { font-family: 'Manrope', system-ui, sans-serif; font-size: 0.88rem; font-weight: 500; color: var(--ink-2); } .field > label .req { color: var(--clay); } .control { width: 100%; min-height: 50px; padding: 13px 14px; background: var(--card); color: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--r-sm); font-size: 0.98rem; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .control::placeholder { color: #A9A79C; } .control:hover { border-color: var(--ink-3); } .control:focus { outline: none; border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); } textarea.control { min-height: 116px; resize: vertical; line-height: 1.6; } select.control { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7A73' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .field.has-error .control { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); } .field__err { display: none; font-size: 0.88rem; font-weight: 500; color: var(--clay); } .field.has-error .field__err { display: block; } .field__hint { font-size: 0.86rem; color: var(--ink-3); } .check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; position: relative; } /* поле было 0×0 и opacity:0 — браузеру некуда было повесить подсказку валидации, поэтому отправка обрывалась вообще без сообщения. Даём реальную площадь. */ .check input { position: absolute; left: 0; top: 3px; width: 19px; height: 19px; margin: 0; opacity: .001; } .check.has-error .check__box { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); } .check.has-error .check__text { color: var(--clay); } .check__box { width: 19px; height: 19px; flex: none; margin-top: 3px; border: 1px solid var(--rule-2); background: var(--card); display: grid; place-items: center; transition: all var(--t-fast); } .check__box svg { width: 11px; height: 11px; color: var(--paper); opacity: 0; transition: opacity var(--t-fast); } .check input:checked + .check__box { background: var(--forest); border-color: var(--forest); } .check input:checked + .check__box svg { opacity: 1; } .check input:focus-visible + .check__box { outline: 2px solid var(--brass); outline-offset: 2px; } .check__text { font-size: 0.94rem; color: var(--ink-3); line-height: 1.55; } /* выбор варианта */ .opts { display: grid; gap: 10px; } .opt { position: relative; cursor: pointer; } .opt input { position: absolute; opacity: 0; width: 0; height: 0; } .opt__b { display: flex; align-items: center; gap: 16px; padding: 16px 18px; min-height: 66px; background: var(--card); border: 1px solid var(--rule); transition: all var(--t-fast); } .opt:hover .opt__b { border-color: var(--rule-2); } .opt input:checked + .opt__b { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); } .opt__no { display: none; } .opt input:checked + .opt__b .opt__no { color: var(--brass); } .opt__b b { display: block; font-size: 0.96rem; font-weight: 500; } .opt__b small { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.88rem; color: var(--ink-3); margin-top: 3px; } .opt__mark { margin-left: auto; width: 16px; height: 16px; border: 1px solid var(--rule-2); flex: none; display: grid; place-items: center; transition: all var(--t-fast); } .opt__mark::after { content: ''; width: 8px; height: 8px; background: var(--forest); transform: scale(0); transition: transform var(--t-fast); } .opt input:checked + .opt__b .opt__mark { border-color: var(--forest); } .opt input:checked + .opt__b .opt__mark::after { transform: scale(1); } /* дни и время в записи */ .days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; } .day { position: relative; flex: none; cursor: pointer; } .day input { position: absolute; opacity: 0; width: 0; height: 0; } .day span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 84px; background: var(--card); border: 1px solid var(--rule); transition: all var(--t-fast); line-height: 1.2; } .day span b { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.5rem; font-weight: 400; } .day span small { font-size: 0.82rem; color: var(--ink-3); margin-top: 4px; } .day span:hover { border-color: var(--rule-2); } .day input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--paper); } .day input:checked + span small { color: rgba(255,255,255,.6); } .times { display: grid; grid-template-columns: repeat(auto-fill,minmax(92px,1fr)); gap: 8px; } .time { position: relative; cursor: pointer; } .time input { position: absolute; opacity: 0; width: 0; height: 0; } .time span { display: grid; place-items: center; height: 46px; background: var(--card); border: 1px solid var(--rule); font-family: 'Manrope', system-ui, sans-serif; font-size: 0.96rem; transition: all var(--t-fast); } .time span:hover { border-color: var(--forest); } .time input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--paper); } .time.busy span { color: #868D86; border-color: var(--rule); pointer-events: none; text-decoration: line-through; } /* выбранное время должно читаться не только цветом заливки */ .time input:checked + span::before { content: '✓'; margin-right: 7px; font-size: .82em; } /* ============================================================ Шаги ============================================================ */ .steps { display: flex; align-items: center; margin-bottom: 34px; } .stp { display: flex; align-items: center; gap: 12px; flex: none; } .stp__n { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--rule-2); font-family: 'Manrope', system-ui, sans-serif; font-size: 0.84rem; color: var(--ink-3); transition: all var(--t); } .stp__l { font-size: 0.92rem; font-weight: 500; color: var(--ink-3); transition: color var(--t); } .stp.is-active .stp__n { background: var(--forest); border-color: var(--forest); color: var(--paper); } .stp.is-active .stp__l { color: var(--ink); } .stp.is-done .stp__n { background: var(--brass); border-color: var(--brass); color: var(--paper); } .stp__line { flex: 1; min-width: 20px; height: 1px; background: var(--rule-2); margin: 0 14px; position: relative; overflow: hidden; } .stp__line::after { content: ''; position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e); } .stp__line.is-done::after { transform: scaleX(1); } .step-panel { display: none; animation: panelIn .42s var(--e) both; } .step-panel.is-active { display: block; } @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } } /* ============================================================ Карточка-документ (сводка, реквизиты, врезки) ============================================================ */ .doc { border-radius: var(--r); box-shadow: var(--sh-card); background: var(--card); border: 1px solid var(--rule); padding: clamp(20px,2.4vw,28px); } .doc--tint { background: var(--paper-2); } .doc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); font-family: 'Manrope', system-ui, sans-serif; font-size: 0.92rem; font-weight: 600; color: var(--ink-3); } .kv { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dotted var(--rule-2); } .kv:last-child { border-bottom: 0; } .kv > span { font-size: 0.94rem; color: var(--ink-3); } .kv > b { font-size: 0.96rem; font-weight: 500; text-align: right; } /* ============================================================ Появление при прокрутке ============================================================ */ /* Прячем только когда скрипты точно живы: класс js ставит app.js. Без него страница показывается целиком, без пустых блоков. */ /* Ход был .8s на 20px — на длинной странице это читается как «оживление ради оживления». Короче, ближе, с экспоненциальным выходом: движение замечаешь, но не ждёшь его. */ html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--e-out), transform .55s var(--e-out); transition-delay: var(--d, 0ms); } [data-reveal] { transition: opacity .5s var(--e-out), transform .55s var(--e-out); } html.js [data-reveal="left"] { transform: translateX(-24px); } html.js [data-reveal="right"] { transform: translateX(24px); } html.js [data-reveal="fade"] { transform: none; } /* На узком экране боковой выезд тянет страницу вправо: элемент до появления стоит на 24px правее и добавляет горизонтальную прокрутку. Оставляем только вертикальное движение. */ @media (max-width: 900px) { html.js [data-reveal="left"], html.js [data-reveal="right"] { transform: translateY(12px); } } /* показанное состояние обязано быть специфичнее скрытого — иначе блок залипает пустым */ html.js [data-reveal].is-in, html [data-reveal].is-in { opacity: 1; transform: none; } /* строчная маска для заголовков */ .lm { display: block; overflow: hidden; } html.js .lm > span { transform: translateY(104%); } .lm > span { display: block; transition: transform 1s var(--e); transition-delay: var(--d,0ms); } html.js .lm.is-in > span, html.js .is-in .lm > span, html .lm.is-in > span { transform: none; } /* ============================================================ Модалка, тосты ============================================================ */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; background: rgba(18,33,28,.55); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t), visibility var(--t); } .modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .modal__panel :focus-visible, .drawer :focus-visible { outline-offset: 2px; } .modal__panel { position: relative; width: min(560px,100%); max-height: 88dvh; overflow-y: auto; background: var(--paper); border: 1px solid var(--rule-2); padding: clamp(26px,4vw,44px); box-shadow: var(--sh-3); transform: translateY(20px); transition: transform .5s var(--e); } .modal.is-open .modal__panel { transform: none; } .modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-3); transition: all var(--t-fast); } .modal__close:hover { color: var(--clay); transform: rotate(90deg); } .toasts { position: fixed; z-index: var(--z-toast); bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--forest); color: var(--paper); font-size: 0.94rem; box-shadow: var(--sh-3); pointer-events: auto; animation: toastIn .45s var(--e) both; } .toast.is-out { animation: toastOut .28s ease-in both; } .toast svg { width: 17px; height: 17px; flex: none; color: var(--brass-br); } @keyframes toastIn { from { opacity: 0; transform: translateY(14px); } } @keyframes toastOut { to { opacity: 0; transform: translateY(8px); } } /* ============================================================ Шапка внутренних страниц ============================================================ */ .phead { padding-block: clamp(34px,4.6vw,66px) clamp(24px,3vw,40px); border-bottom: 1px solid var(--rule); } .crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.88rem; letter-spacing: 0; color: var(--ink-3); } .crumbs a:hover { color: var(--brass); } .crumbs i { width: 16px; height: 1px; background: var(--rule-2); display: block; } /* ============================================================ Чипы-фильтры ============================================================ */ .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--rule); font-family: 'Manrope', system-ui, sans-serif; font-size: 0.94rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); transition: all var(--t-fast); cursor: pointer; white-space: nowrap; } .chip:hover { color: var(--ink); border-color: var(--rule-2); } .chip.is-active { background: var(--forest); border-color: var(--forest); color: var(--paper); } /* ============================================================ Подвал ============================================================ */ .footer { background: var(--forest); color: rgba(255,255,255,.6); padding-block: clamp(50px,7vw,86px) 26px; } .footer h4 { font-family: 'Manrope', system-ui, sans-serif; font-size: 0.96rem; font-weight: 600; color: var(--brass-br); margin-bottom: 18px; } .footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 44px 32px; } /* самостоятельные ссылки-пункты доводим до пальца: были ~20px по высоте */ .footer li a { font-size: 0.96rem; display: inline-flex; align-items: center; min-height: 44px; transition: color var(--t-fast); } .footer li a:hover { color: var(--paper); } .footer .stack.gap-12 { gap: 0; } .footer__bottom { margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 16px; font-size: 0.86rem; color: var(--on-dark-2); } .footer__legal { display: flex; flex-wrap: wrap; gap: 10px 24px; } .footer__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.28); padding-block: 4px; transition: color var(--t-fast), text-decoration-color var(--t-fast); } .footer__legal a:hover { color: var(--paper); text-decoration-color: var(--brass-br); } /* ст. 24 ФЗ «О рекламе»: предупреждение должно быть читаемым. Раньше оно стояло 0.86rem в rgba(255,255,255,.45) — 3.8:1. */ /* .warnline — усиленный вид ниже, в блоке о cookie и предупреждениях */ .soc { display: flex; gap: 10px; } .soc a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); transition: all var(--t-fast); } .soc a:hover { border-color: var(--brass-br); color: var(--brass-br); } .soc svg { width: 17px; height: 17px; } /* ============================================================ Прочее ============================================================ */ .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; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 999; background: var(--forest); color: var(--paper); padding: 12px 20px; font-family: 'Manrope', system-ui, sans-serif; font-size: 0.94rem; font-weight: 500; transition: top var(--t-fast); } .skip-link:focus { top: 0; } .spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); border-top-color: #fff; display: inline-block; animation: sp .7s linear infinite; vertical-align: -2px; } @keyframes sp { to { transform: rotate(360deg); } } .empty { display: grid; place-items: center; gap: 14px; padding: clamp(40px,6vw,80px) 20px; text-align: center; } /* ============================================================ Уведомление о файлах cookie ============================================================ */ .cookiebar { position: fixed; z-index: var(--z-toast); left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--rule-2); box-shadow: 0 -10px 40px rgba(18,33,28,.10); padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom)); transform: translateY(101%); transition: transform .5s var(--e-out); } .cookiebar.is-in { transform: none; } .cookiebar__in { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; } .cookiebar__act { display: flex; flex-wrap: wrap; gap: 10px; } .cookiebar p { flex: 1 1 420px; font-size: .92rem; color: var(--ink-2); max-width: 78ch; } .cookiebar a { color: var(--brass); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 560px) { .cookiebar__act { width: 100%; } .cookiebar .btn { flex: 1 1 auto; } } /* ============================================================ Адаптив ============================================================ */ @media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr; } .g4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 900px) { .nav__links { display: none; } .nav__tel { display: none; } .burger { display: grid; } .hero__grid { grid-template-columns: 1fr; gap: 36px; } .g3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { :root { --nav-h: 62px; } .g2, .g3, .g4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .steps { overflow-x: auto; padding-bottom: 6px; } .stp__l { display: none; } .toasts { left: 14px; right: 14px; transform: none; } .toast { justify-content: center; } /* ужимаем шапку по ширине телефона: подпись под названием уходит, знак и кнопка становятся компактнее — бургер обязан остаться на экране */ .nav__in { gap: 10px; } .nav__side { gap: 8px; padding-left: 8px; } .logo { gap: 9px; } .logo__sub { display: none; } .logo__mark{ width: 30px; height: 30px; } .logo__name{ font-size: 1.14rem; letter-spacing: .05em; text-indent: .05em; } .nav__side .btn--sm { padding: 0 13px; font-size: .84rem; } } /* самые узкие экраны: кнопка записи уступает место бургеру — в самой шторке первым же пунктом идёт «Записаться на приём» */ @media (max-width: 400px) { .nav__side .btn--sm { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .lm > span { transform: none !important; } /* исключение: спиннер отправки — единственная анимация, которая здесь несёт смысл. Замороженное кольцо на 1,1 с читается как «форма зависла». */ .spin { animation-duration: .9s !important; animation-iteration-count: infinite !important; } .livedot::after { display: none; } } @media print { .nav, .footer, .drawer, .toasts, .modal, .skip-link { display: none !important; } body { background: #fff; } body::after { display: none; } /* пациенты печатают именно подготовку к анализам и прайс — свёрнутый аккордеон выводил одни заголовки без единой строки инструкции */ .acc__body { grid-template-rows: 1fr !important; } .acc__inner { overflow: visible !important; } .acc__ico { display: none; } .tablewrap { overflow: visible !important; background: none !important; } table.pt { min-width: 0 !important; } a[href^="http"]::after, a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: .8em; } [data-reveal], .lm > span { opacity: 1 !important; transform: none !important; } } /* Длинная ссылка в тексте согласия не переносилась и вылезала за правый край на узком экране, обрезая концовку строки. */ .check__text { min-width: 0; overflow-wrap: anywhere; } .check { max-width: 100%; } /* карточка свободных окон на телефоне не должна выходить за вьюпорт */ @media (max-width: 900px) { .slots.hero__card { max-width: 100%; } } /* ============================================================ Карточка врача — по образцу Neo Cardio: высокий портрет на мягкой подложке, круглая кнопка в углу, матовая панель с именем, наезжающая на низ снимка. ============================================================ */ .plate { background: transparent; border: 0; box-shadow: none; overflow: visible; } .plate__face { aspect-ratio: 3/4; border: 0; border-radius: var(--r-lg); background: var(--grad-soft); box-shadow: var(--sh-card); overflow: hidden; } .plate__face--ph { background: var(--grad-soft); } .plate__face--ph::after { display: none; } /* зелёная плёнка поверх лица — убрать */ .plate__face--ph img { object-position: center 12%; filter: none; } /* значок специализации переезжает в правый верхний угол и становится круглым */ .plate__badge { top: 14px; right: 14px; left: auto; border-radius: var(--r-pill); padding: 7px 14px; background: rgba(255,255,255,.9); color: var(--forest); backdrop-filter: blur(8px); font-weight: 600; font-size: .74rem; box-shadow: var(--sh-1); } .plate__badge--brass { background: var(--brass-br); color: #fff; } /* матовая панель наезжает на снимок снизу */ .plate__body { position: relative; z-index: 2; margin: -58px 12px 0; padding: 16px 18px 18px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(140%); border-radius: var(--r); box-shadow: var(--sh-card); } .plate__name { font-size: 1.06rem; font-weight: 700; line-height: 1.22; } .plate__spec { font-size: .86rem; margin-top: 4px; } .plate__data { margin-top: 12px; border-top: 1px solid var(--rule); } .plate__data div { padding: 6px 0; font-size: .84rem; } .plate__act { padding-top: 12px; } .plate:hover .plate__face--ph img { transform: scale(1.04); } @media (max-width: 620px) { .plate__body { margin: -48px 10px 0; } } /* Предупреждение о противопоказаниях: ст. 24 ФЗ «О рекламе» требует, чтобы оно было заметным, а не строкой в подвале на 0.9rem. */ .warnline { color: #fff; font-size: 1rem; line-height: 1.5; font-weight: 500; border: 1px solid rgba(255,255,255,.34); border-radius: var(--r-sm, 10px); padding: 14px 18px; display: block; text-align: center; } .medwarn { display: block; margin-top: clamp(20px, 2.6vw, 30px); padding: 15px 20px; background: var(--card); border: 1px solid var(--rule-2); border-left: 3px solid var(--brass-br); border-radius: var(--r-sm, 10px); font-size: .95rem; line-height: 1.5; color: var(--ink-2); font-weight: 500; } /* Таблица со справочными данными: значение длиной в несколько строк по правому краю не читается — даём ему свою колонку и левый край. */ .doc--wide .kv { display: grid; grid-template-columns: minmax(150px, 250px) minmax(0, 1fr); gap: 10px 28px; } .doc--wide .kv > b { text-align: left; font-weight: 400; color: var(--ink-2); } .doc--wide .kv > b b, .doc--wide .kv > b strong { font-weight: 500; color: var(--ink); } @media (max-width: 640px) { .doc--wide .kv { grid-template-columns: 1fr; gap: 4px; } }