/* Главная страница ДЕНТРО ЛАЙФ. * * Стили намеренно ограничены классом .dentro-home на : на остальных страницах * сайта живёт разметка конструктора со своими правилами, и общий сброс их сломал бы. * Здесь ничего не наследуется от конструктора — страница собрана заново. * * Шкала отступов 8/12/16/24/32/48/64, максимум содержимого 1240. * Радиус — три уровня токенами (--radius-sm/--radius/--radius-lg, см. ниже), * пилюли (кнопки-переключатели, теги) — 999px напрямую, без отдельного токена. * Тени — только --shadow/--shadow-hi (карточки) и --shadow-btn/--shadow-btn-hi * (primary-кнопка); ad hoc box-shadow новым компонентам не заводить. * Шрифт: 13 caption · 15 small · 16–17 body · 19–20 body-lg · 40 h2 · h1 — clamp. */ /* ── шрифт ─────────────────────────────────────────────────────────────────── Onest уже есть в проекте (три начертания). Больше ни одного шрифта страница не подключает: на старой главной их было 11 и они тянули 1.9 МБ. */ @font-face { font-family: 'Onest'; src: url('m-files.cdn1.cc/lpfile/7/d/3/7d3e9ab833acec98b4be138497ccb6c38fbf2uvngm.ttf') format('truetype'); font-weight: 250; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest'; src: url('m-files.cdn1.cc/lpfile/0/4/9/04995379b5b067826970aee7a1019596a6yj93er5q.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest'; src: url('m-files.cdn1.cc/lpfile/8/b/d/8bd28390b6c472054d0aed98eaee3349w9q81u2ea4.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } .dentro-home { --blue: #045273; --blue-2: #1c82ad; /* Светлый конец градиента взят чуть темнее фирменного #1c82ad: с ним белая надпись на кнопке даёт контраст 4.33 при норме 4.5. Разницу на глаз не видно, а требование п. 10 ТЗ выполняется. Сам #1c82ad остаётся в --blue-2 для рамок и акцентов. */ --grad: linear-gradient(135deg, #1a7ba3 0%, #045273 100%); --green: #00a900; /* иконки и галочки — декоративные элементы */ --green-text: #008a00; /* тот же акцент для текста: на белом даёт 4.53 */ --ink: #14303d; --muted: #5c7481; --line: #dfe9ee; --bg-soft: #f2f8fb; /* Три уровня радиуса — вместо разбегавшихся по файлу 10/11/13/15/18/26px: sm — мелкие элементы (иконки-бейджи, поля, кнопки в шапке/подвале), обычный --radius — карточки, lg — крупные медиа (hero-фото). */ --radius-sm: 12px; --radius: 16px; --radius-lg: 24px; --shadow: 0 2px 10px rgba(4, 82, 115, .06); --shadow-hi: 0 10px 28px rgba(4, 82, 115, .14); /* Тень primary-кнопки — отдельный токен: тот же принцип (default/hover), но с акцентным оттенком, а не общим --shadow/--shadow-hi карточек. */ --shadow-btn: 0 6px 18px rgba(28, 130, 173, .3); --shadow-btn-hi: 0 12px 26px rgba(28, 130, 173, .38); --transition: .2s ease; --wrap: 1240px; margin: 0; font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--ink); background: #fff; -webkit-text-size-adjust: 100%; /* пункт 9 ТЗ: горизонтальной прокрутки быть не должно ни на одной ширине */ overflow-x: hidden; } .dentro-home *, .dentro-home *::before, .dentro-home *::after { box-sizing: border-box; } .dentro-home img { max-width: 100%; height: auto; } .dentro-home :where(a) { color: var(--blue); } .dentro-home :focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; color: var(--blue); padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 700; } .skip-link:focus { left: 0; } /* ── типографика ─────────────────────────────────────────────────────────── */ .dentro-home h1, .dentro-home h2, .dentro-home h3 { margin: 0; font-weight: 700; line-height: 1.15; } /* Плавное масштабирование вместо трёх точек-разрывов (было 56/46/34px на разных ширинах) — тот же диапазон размеров, но без скачков между брейкпоинтами и без риска, что длинное ФИО врача не влезет в фиксированный 56px. */ .dentro-home h1 { font-size: clamp(34px, 2vw + 27px, 56px); letter-spacing: -.5px; } .dentro-home h2 { font-size: 40px; letter-spacing: -.3px; } .dentro-home h3 { font-size: 20px; line-height: 1.3; } .dentro-home p { margin: 0; } .sec { padding: 64px 0; } .sec--soft { background: var(--bg-soft); } .sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .sec__lead { color: var(--muted); font-size: 17px; margin-top: 8px; max-width: 640px; } /* ── кнопки ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px; border: 2px solid transparent; border-radius: var(--radius-sm); font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease, color .2s ease; } .btn--primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-btn); } .btn--primary:hover, .btn--primary:focus { transform: translateY(-2px); box-shadow: var(--shadow-btn-hi); color: #fff; } .btn--ghost { background: #fff; color: var(--blue); border-color: var(--blue-2); } .btn--ghost:hover, .btn--ghost:focus { background: var(--bg-soft); transform: translateY(-2px); } .btn--sm { min-height: 44px; padding: 8px 20px; font-size: 16px; } .btn svg { width: 20px; height: 20px; flex: 0 0 auto; } .link-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--blue); } .link-more:hover { color: var(--blue-2); } .link-more::after { content: '→'; transition: transform .2s ease; } .link-more:hover::after { transform: translateX(3px); } /* ── шапка ───────────────────────────────────────────────────────────────── */ .hdr { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); } /* Шапка — на всю ширину экрана: .wrap с max-width:1240px здесь не годится, на широких мониторах меню сжималось в узкую колонку по центру. */ .hdr__in { display: flex; align-items: center; gap: 24px; height: 80px; position: relative; max-width: none; padding: 0 40px; } .hdr__logo { flex: 0 0 auto; display: flex; align-items: center; } .hdr__logo img { display: block; width: 186px; height: 68px; object-fit: contain; } .nav { flex: 1 1 auto; } .nav__list { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; } .nav__item { position: static; } .nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; transition: background-color var(--transition), color var(--transition); background: none; border: 0; font-family: inherit; cursor: pointer; } .nav__link { white-space: nowrap; } .nav__link:hover, .nav__link[aria-expanded='true'] { background: var(--bg-soft); color: var(--blue); } .nav__arrow { width: 10px; height: 6px; transition: transform .2s ease; } .nav__link[aria-expanded='true'] .nav__arrow { transform: rotate(180deg); } .nav__drop { /* Привязка к .hdr__in, а не к пункту меню: раньше список шириной 920px центрировался по кнопке «Услуги и цены» и вылезал за левый край окна. max-height — чтобы на невысоких экранах низ списка не обрезался: там, где не помещается, появляется прокрутка внутри самого списка. */ position: absolute; left: 24px; right: 24px; top: calc(100% + 10px); max-width: 920px; margin: 0 auto; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hi); padding: 16px; z-index: 110; } .nav__drop[hidden] { display: none; } .nav__drop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; } .nav__drop-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); transition: background-color var(--transition); } .nav__drop-link:hover { background: var(--bg-soft); } .nav__drop-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-sm); background: #edf7fb; color: #087092; } .nav__drop-icon svg { width: 20px !important; height: 20px !important; flex: 0 0 20px; stroke-width: 1.8; } .nav__drop-icon img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; } .nav__drop-text { min-width: 0; } .nav__drop-name { display: block; font-weight: 700; font-size: 15px; } .nav__drop-note { display: block; font-size: 14px; color: var(--muted); } .nav__drop-all { display: block; margin-top: 8px; padding: 10px 12px; font-weight: 700; } .hdr__side { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; } .hdr__phone { text-decoration: none; color: var(--ink); display: block; } .hdr__phone-num { display: block; font-size: 19px; font-weight: 700; white-space: nowrap; } /* HOURS.1: новый график длиннее прежнего однострочного — компактный двухстрочный вариант (CLINIC.hoursCompactLine1/2, см. tools/page-chrome.js), каждая строка в своём display:block span, чтобы не зависеть от того, поместится ли фраза целиком в одну строку на разных экранах. */ .hdr__hours { display: block; font-size: 14px; color: var(--muted); } .hdr__hours-l1, .hdr__hours-l2 { display: block; white-space: nowrap; line-height: 1.3; } .hdr__burger, .hdr__call { display: none; } /* мобильная панель меню */ .mnav { position: fixed; inset: 0; z-index: 130; background: rgba(4, 48, 61, .45); padding: 0; border: 0; } .mnav[hidden] { display: none; } .mnav__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 92vw); background: #fff; overflow-y: auto; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; } .mnav__top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; } .mnav__close { width: 44px; height: 44px; border: 0; background: var(--bg-soft); border-radius: var(--radius-sm); font-size: 22px; line-height: 1; color: var(--blue); cursor: pointer; } .mnav__link { position: relative; display: block; padding: 14px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: 18px; font-weight: 700; } /* Не border-bottom: у элемента есть border-radius, и линия по краям гнулась бы вместе с ним. Псевдоэлемент через position:absolute границей не считается — остаётся ровным независимо от скругления самого пункта меню. */ .mnav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); } .mnav__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; } .mnav__toggle .nav__arrow { color: var(--muted); flex: 0 0 auto; } .mnav__toggle[aria-expanded='true'] .nav__arrow { transform: rotate(180deg); } .mnav__sub { padding: 4px 0 8px; } /* та же ловушка [hidden] vs display, что уже не раз встречалась на сайте — здесь на всякий случай явно, хотя у .mnav__sub своего display нет. */ .mnav__sub[hidden] { display: none; } .mnav__sub a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; text-decoration: none; color: var(--ink); font-size: 16px; } .mnav__sub-all { margin-top: 4px; border-top: 1px solid var(--line); font-weight: 700; color: var(--blue); } .mnav__foot { margin-top: 8px; display: grid; gap: 8px; } .mnav__badge { display: block; width: 180px; height: 70px; max-width: 100%; border: 0; margin-top: 4px; justify-self: center; overflow: hidden; } /* ── первый экран ────────────────────────────────────────────────────────── */ /* Светло-зелёный фон бейджа-эйбро — единственное новое цветовое пятно здесь; остальное берёт существующие --green/--green-text/--blue-*. --hero-wrap — локальный, более широкий контейнер только для hero и поиска главной (референс использует почти всю ширину экрана); глобальный --wrap (1240px), которым живёт весь остальной сайт, не меняется. */ .dentro-home { --green-soft: #e5f7e6; --hero-wrap: 1500px; } .hero { position: relative; overflow: hidden; padding: 60px 0 84px; background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); } /* Декоративные пятна — только CSS (radial-gradient), без растровых файлов; не кликабельны (aria-hidden + pointer-events:none) и не создают overflow (сами пятна шире контейнера, но у .hero есть overflow:hidden). */ .hero__blob { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(2px); } .hero__blob--a { top: -120px; left: -120px; width: 360px; height: 360px; background: radial-gradient(circle at 30% 30%, rgba(28, 130, 173, .10), rgba(28, 130, 173, 0) 70%); } .hero__blob--b { bottom: -160px; right: -140px; width: 420px; height: 420px; background: radial-gradient(circle at 60% 40%, rgba(0, 169, 0, .08), rgba(0, 169, 0, 0) 70%); } /* max-width переопределяет --wrap у совмещённого класса .wrap.hero__in — тот же приём (явное правило конкретно для hero), что и у .search .wrap ниже. HERO.3: колонки снова чисто пропорциональные (minmax(0,…)) — фиксированный пол в 640px (введённый в HERO.2) отбирал у фотографии слишком много места на 1151–1280px и сталкивал .hero__badge с .hero__locate (см. отдельное HERO.3-правило у .hero h1 ниже — двухстрочность H1 на 1440px теперь держится не шириной колонки, а чуть меньшим шрифтом в этом диапазоне). */ .hero__in { position: relative; z-index: 1; max-width: var(--hero-wrap); display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); gap: 40px; align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 16px; background: var(--green-soft); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--green-text); } .hero__eyebrow svg { width: 16px; height: 16px; flex: 0 0 auto; } /* H1 крупнее прежнего (было 34–56px) — по ТЗ ориентир 60–66px на desktop, но не ценой переносов/обрезания на 320px, поэтому верхняя граница clamp — 64px. Два внутри (см. build-home.js) держат ровно 2 смысловые строки на desktop — display:block заставляет вторую начаться с новой строки независимо от того, поместилась бы она следом по ширине колонки или нет. */ .hero h1 { font-size: clamp(34px, 2.6vw + 26px, 64px); } /* HERO.3: на ≥1151px колонка текста — чистый .84fr (без пола, см. выше), поэтому на 1440px она уже ~617px, а прежний clamp (2.6vw+26, потолок 64px в точке ~1462px) даёт там почти максимальные ~63.4px — строка «Медицинский центр» не помещается. Отдельная кривая только для десктопного диапазона растёт медленнее и достигает тех же 64px точно к 1680px (там всё как в HERO.1/2: 64px, колонка ≈644.6px) — на 1440px это даёт ~60px (ориентир ТЗ 59–61px), с этим шрифтом строка укладывается в ~617px с запасом. На ≤1150px (одна колонка на всю ширину hero) эта правка не действует — сохраняется прежний clamp. */ @media (min-width: 1151px) { .hero h1 { font-size: clamp(55px, 1.667vw + 36px, 64px); } } .hero__h1-l1, .hero__h1-l2 { display: block; } .hero__sub { margin-top: 18px; font-size: 20px; color: var(--muted); max-width: 560px; } .hero__btns { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; } .hero__btns .btn--primary svg:last-child { width: 18px; height: 18px; } .hero__points { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 0; margin: 36px 0 0; padding: 0; list-style: none; } .hero__point { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); padding-right: 14px; } /* Тонкий разделитель между преимуществами в один ряд — только когда есть сосед справа (:not(:last-child)), на мобильной колонке пропадает вместе с рядом. Плотнее прежних (24px/16px шрифт) — со вторым, длинным пунктом («Современное диагностическое оборудование») в одну строку на 1280–1920px иначе не помещаются оба пункта. На мобильной колонке (≤760px) размер шрифта и отступы возвращаются к комфортным, см. медиа-запрос ниже. */ .hero__point:not(:last-child) { border-right: 1px solid var(--line); margin-right: 14px; padding-right: 14px; } .hero__point-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--green-soft); } .hero__point-ico svg { width: 18px; height: 18px; color: var(--green-text); } .hero__media { position: relative; z-index: 1; } /* Фото входа в центр: кадр держим по фасаду. object-position подобран отдельно для десктопа и телефона — при разной высоте/пропорции блока «безопасная» точка съезжает. aspect-ratio (а не фиксированный height) — крупнее и шире прежнего (было 420px при узкой колонке), пропорция видимой области ~1.6, в границах 1.55–1.7 из ТЗ. */ .hero__media img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; object-position: 50% 38%; border-radius: var(--radius-lg); background: var(--bg-soft); } /* Короткая декоративная подпись поверх фото — не рекламное заявление, обычная атмосферная реплика; курсив системным/Onest без подключения нового шрифта. */ .hero__caption { position: absolute; top: 20px; right: 24px; z-index: 1; margin: 0; max-width: 190px; text-align: right; font-style: italic; font-weight: 500; font-size: 15px; line-height: 1.3; color: #fff; text-shadow: 0 1px 6px rgba(4, 48, 61, .45); } /* Один компактный floating-бейдж поверх фото — часы работы (те же реальные данные, что и в .hero__points), а не рекламный баннер. HOURS.1: текст режима работы теперь двухстрочный (CLINIC.hoursCompactLine1/2) — короче прежнего "Ежедневно с 8:00 до 20:00" по самой длинной из двух строк, поэтому ширина бейджа не увеличилась (см. таблицу метрик в отчёте): каждая строка — свой display:block span, .hero__badge-text держит их столбцом. */ .hero__badge { position: absolute; left: 20px; bottom: 20px; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-hi); font-size: 15px; font-weight: 700; color: var(--ink); } .hero__badge svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--green); } .hero__badge-text { display: flex; flex-direction: column; line-height: 1.3; } /* Карточка-локатор — второй floating-элемент, справа снизу поверх фото (полностью в границах .hero__media — никаких отрицательных отступов, чтобы не пересечься с карточкой поиска, которая своим отрицательным margin-top подтянута под низ hero). */ .hero__locate { position: absolute; right: 20px; bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: min(280px, calc(100% - 40px)); padding: 14px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-hi); text-decoration: none; color: var(--ink); transition: transform var(--transition), box-shadow var(--transition); } .hero__locate:hover, .hero__locate:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-hi), 0 0 0 2px var(--blue-2); } .hero__locate > svg:first-child { width: 22px; height: 22px; flex: 0 0 auto; color: var(--blue); } .hero__locate-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .hero__locate-t strong { font-size: 15px; font-weight: 700; } .hero__locate-t span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero__locate > svg:last-child { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue-2); } /* ── поиск ───────────────────────────────────────────────────────────────── */ /* Отрицательный margin-top визуально «подтягивает» карточку под hero (у которого снизу увеличенный padding, см. выше) — без наложения текста/фото, только сама белая карточка чуть заходит на нижнюю границу секции hero. */ /* .search .wrap — та же локальная широкая колонка, что и у hero (см. --hero-wrap выше), явным descendant-селектором сильнее одноклассового .wrap — глобальный .wrap и остальные секции сайта это не затрагивает. */ .search .wrap { max-width: var(--hero-wrap); } .search { padding: 0 0 32px; margin-top: -68px; position: relative; z-index: 2; } .search__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-hi); padding: 28px 32px; } .search__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; } .search__head-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-soft); color: var(--blue); } .search__head-ico svg { width: 24px; height: 24px; } /* .search__head-text — заголовок и helper как flex-соседи (не блок друг над другом): при достатке ширины помещаются в одну строку (иконка | заголовок | helper справа, как в референсе), а когда не помещаются — helper сам переносится на отдельную строку под заголовком. Ничего не скрывается. */ .search__head-text { flex: 1 1 auto; min-width: 0; align-self: center; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 24px; row-gap: 2px; } /* Явная специфичность (.dentro-home .search__title) — иначе размер молча перебивает более специфичное общее правило `.dentro-home h2` (40/36/28px). */ .dentro-home .search__title { font-size: 34px; font-weight: 700; margin: 0; line-height: 1.2; } .search__lead { font-size: 15px; color: var(--muted); margin: 0; } .search__row { display: flex; gap: 12px; align-items: stretch; } .search__field { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; } .search__icon { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; } .search__submit { flex: 0 0 auto; white-space: nowrap; } .search__suggests { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } .search__chip { min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--blue); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color var(--transition), border-color var(--transition); } .search__chip:hover, .search__chip:focus-visible { background: #fff; border-color: var(--blue-2); } .search__all { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 40px; padding: 8px 4px; text-decoration: none; color: var(--blue); font-weight: 700; font-size: 15px; white-space: nowrap; } .search__all svg:first-child { width: 18px; height: 18px; } .search__all svg:last-child { width: 16px; height: 16px; transition: transform var(--transition); } .search__all:hover svg:last-child { transform: translateX(3px); } .dentro-home .product-search__input { width: 100%; min-height: 52px; padding: 12px 16px 12px 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 16px; color: var(--ink); background: #fff; transition: border-color var(--transition), box-shadow var(--transition); } .dentro-home .product-search__input:focus { border-color: var(--blue-2); outline: none; box-shadow: 0 0 0 3px rgba(28, 130, 173, .15); } .dentro-home .product-search__input::placeholder { color: #90a6b1; } /* выпадающие результаты рисует assets/dentro-search.js — здесь только вид */ .dentro-home .dentro-sr { font-family: inherit; border-color: var(--line); border-radius: var(--radius-sm); } .dentro-home .dentro-sr__n { font-size: 16px; color: var(--ink); } .dentro-home .dentro-sr__p { color: var(--blue); } .dentro-home .dentro-sr__i--active { background: var(--bg-soft); } /* ── карточки услуг ──────────────────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .card:hover, .card:focus { transform: translateY(-3px); box-shadow: var(--shadow-hi); border-color: #c7dde8; } .card__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; } .card__icon svg { width: 24px; height: 24px; } .card__icon img { width: 34px; height: 34px; object-fit: contain; } .card__name { font-size: 18px; font-weight: 700; } .card__note { font-size: 15px; color: var(--muted); flex: 1 1 auto; } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .card__price { font-size: 17px; font-weight: 700; color: var(--blue); } .card__price:empty::before { content: ''; } .card__go { color: var(--blue-2); font-size: 20px; line-height: 1; } /* ── направления ─────────────────────────────────────────────────────────── */ .dirs-sec { padding-bottom: 72px; } .dirs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 32px; } .dirs-head__title { margin: 0; color: #12313f; font-size: clamp(34px, 3vw, 46px); font-weight: 700; line-height: 1.1; } .dirs-head__subtitle { margin: 8px 0 0; color: #5f747e; font-size: 18px; line-height: 1.4; } .dirs-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex: 0 0 auto; min-width: 230px; height: 52px; padding: 0 22px; border: 2px solid #087da7; border-radius: 999px; background: transparent; color: #08739a; font: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--transition); } .dirs-toggle:hover { background: #edf7fb; } .dirs-toggle__arrow { width: 18px !important; height: 18px !important; flex: 0 0 18px; transition: transform .2s ease; } .dirs-toggle[aria-expanded="true"] .dirs-toggle__arrow { transform: rotate(180deg); } .dirs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } /* Элементы CSS-грида по умолчанию не сжимаются меньше content-ширины (min-width:auto); min-width:0 возвращает грид-ячейке право сжиматься, чтобы длинные названия («Ультразвуковая диагностика» и т.п.) переносились, а не раздвигали колонку. */ .dirs > li { min-width: 0; } .dir { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 38px; align-items: center; gap: 16px; min-height: 108px; padding: 18px 16px; overflow: hidden; border: 1px solid #d6e5ec; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dir:hover, .dir:focus-visible { transform: translateY(-2px); border-color: #9fcfdf; box-shadow: var(--shadow-hi); } .dir__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: #edf7fb; color: #087092; } .dir__icon svg { width: 25px !important; height: 25px !important; flex: 0 0 25px; stroke-width: 1.8; } .dir__icon img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; } .dir__text { min-width: 0; } .dir__name { display: block; margin: 0; color: #102f3e; font-size: 16px; font-weight: 700; line-height: 1.25; } .dir__note { display: block; margin: 4px 0 0; color: #647984; font-size: 14px; line-height: 1.3; } .dir__go { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #eff7fa; color: #087aa2; transition: background .18s ease, color .18s ease, transform .18s ease; } .dir__go svg { width: 18px !important; height: 18px !important; flex: 0 0 18px; } .dir:hover .dir__go, .dir:focus-visible .dir__go { background: #087ca5; color: #fff; transform: translateX(2px); } /* появление дополнительных карточек — плавно, без прыжка и без огромного фиксированного max-height (карточек то 10 разных по числу, то 12) */ .dir--anim { animation: dirs-in .22s ease both; } @keyframes dirs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .dir, .dirs-toggle, .dirs-toggle__arrow, .dir__go { transition: none; } .dir--anim { animation: none; } } /* ── врачи ───────────────────────────────────────────────────────────────── */ .docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .doc { display: flex; flex-direction: column; background: #fff; border: 1px solid #d8e4ea; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease; } /* та же ловушка, что уже была у кнопки «Очистить», раскрытия длинных списков и кнопки «Показать ещё» на анализах: display:flex того же веса, что и [hidden] браузера по умолчанию, побеждает — карточку не скрывало вообще. */ .doc[hidden] { display: none !important; } .doc:hover { transform: translateY(-3px); box-shadow: var(--shadow-hi); } .doc__photo { display: block; } .doc__photo img { display: block; width: 100%; height: 256px; object-fit: cover; object-position: 50% 18%; background: var(--bg-soft); } .doc__body { display: flex; flex-direction: column; gap: 6px; padding: 20px; flex: 1 1 auto; } .doc__name { font-size: 20px; font-weight: 700; line-height: 1.25; color: #12313f; } .doc__name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; transition: color var(--transition); } .doc__name a:hover { color: var(--blue); } /* Врач с несколькими специальностями (например, «хирург, онколог, врач УЗИ») — * отдельный бейдж на каждую, а не одна длинная строка в одном бейдже. */ .doc__spec { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 8px; margin-top: 16px; } /* Спокойный secondary-стиль вместо яркого зелёного: специализация не должна спорить взглядом с именем врача. */ .doc__spec-badge { display: inline-flex; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 15px; line-height: 1.3; color: var(--muted); font-weight: 600; } .doc__meta { font-size: 15px; color: var(--muted); } /* Цена приёма — заполняет assets/dentro-doctor-price.js из прайса МИС, честной пары цен не нашлось — карточка эту строку просто не показывает (hidden). */ .doc__price { font-size: 15px; font-weight: 700; color: #12313f; } /* Одно главное действие — «Записаться». «Подробнее» рядом текстовой ссылкой, не вторым равнозначным по весу button'ом (п.8 ТЗ на полировку). */ .doc__btns { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 20px; } .doc__more { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--blue); text-decoration: none; transition: color var(--transition); } .doc__more:hover { color: var(--blue-2); } .doc__btns .btn--primary { flex: 1 1 auto; height: 52px; min-height: 52px; padding: 0 16px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 700; border: 2px solid transparent; background: linear-gradient(135deg, #1387ae 0%, #05617e 100%); box-shadow: var(--shadow-btn); color: #fff; } /* ── преимущества ────────────────────────────────────────────────────────── */ .whys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; } .why { display: flex; gap: 16px; align-items: flex-start; } .why__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-sm); background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .why__icon svg { width: 24px; height: 24px; } .why__name { font-weight: 700; font-size: 17px; } .why__note { font-size: 15px; color: var(--muted); } /* ── лицензия и документы ────────────────────────────────────────────────── */ .trust { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .trust__main { display: flex; align-items: center; gap: 16px; } .trust__icon { width: 48px; height: 48px; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; } .trust__icon svg { width: 26px; height: 26px; } .trust__label { font-size: 15px; color: var(--muted); } .trust__num { font-weight: 700; font-size: 17px; } .trust__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; } .trust__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; } /* ── отзывы ──────────────────────────────────────────────────────────────── */ .revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* margin: 0 обязателен: браузер по умолчанию даёт figure и blockquote поля 1em 40px, из-за них текст отзыва ужимался до 171px и переносился почти на каждом слове */ .rev { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .rev__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); flex: 1 1 auto; } .rev__who { display: flex; align-items: center; gap: 12px; } .rev__ava { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .rev__name { font-weight: 700; font-size: 16px; } .revs__more { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 32px; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .revs__more-title { font-weight: 700; } .revs__srcs { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; list-style: none; } .revs__srcs a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 700; background: #fff; transition: border-color var(--transition), color var(--transition); } .revs__srcs a:hover { border-color: var(--blue-2); color: var(--blue); } /* ── контакты ────────────────────────────────────────────────────────────── */ .cts { display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: start; } .cts__list { display: grid; gap: 20px; margin: 0 0 24px; } .cts__label, .cts__val { display: block; } .cts__row { display: flex; gap: 16px; align-items: flex-start; } .cts__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; } .cts__ico svg { width: 22px; height: 22px; } .cts__label { font-size: 14px; color: var(--muted); } .cts__val { font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; display: inline-block; } a.cts__val { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--transition); } a.cts__val:hover { color: var(--blue); } .cts__badge { display: block; margin-top: 4px; border: 0; } .cts__btns { display: flex; gap: 12px; flex-wrap: wrap; } .msgr { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; background: #fff; transition: border-color var(--transition), color var(--transition); } .msgr:hover { border-color: var(--blue-2); color: var(--blue); } .map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; min-height: 420px; box-shadow: var(--shadow); /* Карта Яндекса рисует содержимое через canvas/WebGL в отдельном композитном слое — на нём border-radius/overflow:hidden/clip-path на родителе часто не режет картинку (проверено: угол оставался острым при всех трёх). Белая рамка вокруг iframe решает это физически, а не рендер-трюком: острый угол iframe просто не достаёт до скруглённого края контейнера. */ padding: 6px; } .map iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 10px; } .map__stub { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; } /* ── форма обратного звонка ──────────────────────────────────────────────── */ .cbf { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .cbf__title { font-size: 20px; font-weight: 700; } .cbf__note { font-size: 15px; color: var(--muted); margin-top: 6px; } .cbf__grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: 16px; align-items: start; } .fld { display: flex; flex-direction: column; gap: 6px; } .fld label { font-size: 14px; color: var(--muted); } .fld input, .fld textarea { min-height: 48px; padding: 10px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 16px; color: var(--ink); background: #fff; width: 100%; } .fld textarea { min-height: 96px; resize: vertical; } .fld input:focus, .fld textarea:focus { border-color: var(--blue-2); outline: none; } .cbf__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--muted); } .cbf__consent input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; } .cbf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── подвал ──────────────────────────────────────────────────────────────── */ .ftr { background: var(--blue); color: #cfe3ec; padding: 40px 0 16px; font-size: 15px; line-height: 1.5; } .ftr a { color: #cfe3ec; text-decoration: none; transition: color var(--transition); } .ftr a:hover { color: #fff; text-decoration: underline; } .ftr__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 20px 32px; } .ftr__org { display: grid; gap: 12px; align-content: start; } .ftr__contacts { line-height: 1.7; } .ftr__contacts a { font-weight: 700; } .ftr__logo { background: #fff; border-radius: var(--radius-sm); padding: 10px 14px; display: inline-flex; } .ftr__logo img { width: 150px; height: 55px; object-fit: contain; display: block; } .ftr__legal { font-size: 13px; line-height: 1.55; color: #a9c6d4; } .ftr__ttl { color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 8px; } .ftr__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .ftr__list a { display: inline-flex; align-items: center; min-height: 30px; } .ftr__msgrs { display: flex; gap: 8px; flex-wrap: wrap; } .ftr__msgrs a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; transition: border-color var(--transition), background-color var(--transition); } .ftr__bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; line-height: 1.55; color: #a9c6d4; } /* ── плавающие элементы ──────────────────────────────────────────────────── */ .float-book { position: fixed; right: 24px; bottom: 96px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px; background: var(--grad); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 700; box-shadow: var(--shadow-hi); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .float-book--on { opacity: 1; visibility: visible; transform: none; } /* На десктопе кнопка «Записаться онлайн» есть в шапке, а плавающая перекрывала карточки врачей, отзывы и подвал. Оставляем её только на узких экранах, где шапка сворачивается и кнопки записи на виду нет. */ @media (min-width: 1151px) { .float-book { display: none; } } .float-book svg { width: 20px; height: 20px; } .chat-btn { position: fixed; right: 24px; bottom: 24px; z-index: 95; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; color: var(--blue); box-shadow: var(--shadow-hi); display: flex; align-items: center; justify-content: center; } .chat-btn svg { width: 26px; height: 26px; } .chat-badge { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #e0433f; border: 2px solid #fff; } /* ── окно чата с администратором ───────────────────────────────────────── Тот же принцип, что у .dentro-overlay (онлайн-запись): на десктопе — карточка у кнопки, на телефоне — во весь экран, чтобы не считать место под клавиатуру. */ .chat-panel { position: fixed; right: 24px; bottom: 96px; z-index: 150; width: 380px; max-width: calc(100vw - 32px); height: min(560px, calc(100vh - 140px)); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-hi); display: flex; flex-direction: column; overflow: hidden; } .chat-panel[hidden] { display: none; } .chat-panel__hdr { position: relative; padding: 14px 46px 14px 18px; background: var(--grad); color: #fff; } .chat-panel__title { display: block; font-weight: 700; font-size: 16px; } .chat-panel__sub { display: block; font-size: 12px; opacity: .85; margin-top: 2px; } .chat-panel__close { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chat-panel__close svg { width: 16px; height: 16px; } .chat-panel__body { flex: 1; overflow-y: auto; padding: 14px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 8px; } .chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; } .chat-msg--in { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: 4px; box-shadow: var(--shadow); } .chat-msg--out { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; } .chat-msg--sys { align-self: center; background: #fdecec; color: #8d2020; border-radius: 10px; font-size: 13px; text-align: center; } .chat-msg time { display: block; margin-top: 3px; font-size: 11px; opacity: .65; } .chat-panel__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; } .chat-panel__input { flex: 1; resize: none; max-height: 96px; border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; font: 14px/1.4 'Onest', Arial, Helvetica, sans-serif; color: var(--ink); } .chat-panel__send { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chat-panel__send svg { width: 20px; height: 20px; } .chat-panel__send:disabled { opacity: .5; cursor: default; } .chat-panel__legal { margin: 0; padding: 6px 14px 10px; font-size: 11px; line-height: 1.4; color: var(--muted); background: #fff; } .chat-panel__legal a { color: var(--muted); } /* нижняя панель — только на телефоне */ .tabbar { display: none; } /* ── адаптив ─────────────────────────────────────────────────────────────── */ @media (max-width: 1366px) { /* Раньше .hdr__in был ограничен .wrap (max-width:1240px), и в этот бюджет с семью пунктами меню (логотип 186 + меню ≈708 + правый блок 399 > 1192 доступных) переставало влезать уже на 1366px — приходилось сжимать gap и паддинги пунктов при ЛЮБОЙ ширине экрана. Теперь шапка растянута на весь экран (.hdr__in без max-width), и начиная с 1367px места достаточно для обычных отступов — сжатие оставлено только для действительно тесного диапазона 1151–1366px (ниже 1151px меню и так уходит в бургер). */ .hdr__in { gap: 16px; padding: 0 24px; } .hdr__logo img { width: 150px; height: 55px; } .nav__link { padding: 8px 8px; font-size: 15px; } .nav__list { gap: 0; } .hdr__hours { display: none; } .hdr__phone-num { font-size: 17px; } .hdr__side { gap: 12px; } .hdr__cta { padding: 8px 16px; font-size: 15px; } } @media (max-width: 1180px) { .dentro-home h2 { font-size: 36px; } .hdr__in { gap: 16px; } .nav__link { padding: 8px 9px; font-size: 15px; } .hdr__logo img { width: 150px; height: 55px; } .cards { grid-template-columns: repeat(2, 1fr); } } /* направления: 4 колонки на широком экране → 2 на планшете (768–1099) → 1 на телефоне, без промежуточной 3-колоночной ступени, которой требует остальная сетка сайта */ @media (max-width: 1099px) and (min-width: 768px) { .dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1150px) { .nav, .hdr__phone { display: none; } .hdr__side { margin-left: auto; gap: 8px; } .hdr__burger, .hdr__call { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; } .hdr__burger svg, .hdr__call svg { width: 24px; height: 24px; } .hdr__cta { display: none; } .hero { padding: 48px 0 72px; } .hero__in { grid-template-columns: 1fr; gap: 32px; } .hero__media img { aspect-ratio: 16 / 9; object-position: 50% 32%; } .hero__caption { display: none; } /* Один ряд из двух пунктов — desktop-специфичное требование (см. .hero__point выше); при одноколоночной раскладке (≤1150px) колонка и так на всю ширину hero, тесниться незачем — возвращаем комфортный размер шрифта/отступов. */ .hero__point { font-size: 16px; gap: 12px; padding-right: 24px; } .hero__point:not(:last-child) { border-right: 0; margin-right: 0; padding-right: 0; } .hero__point-ico { width: 40px; height: 40px; } .hero__point-ico svg { width: 22px; height: 22px; } .search { margin-top: -40px; } .dentro-home .search__title { font-size: 30px; } .docs { grid-template-columns: repeat(2, 1fr); } .revs { grid-template-columns: 1fr; } .cts { grid-template-columns: 1fr; } .whys { grid-template-columns: repeat(2, 1fr); } .ftr__grid { grid-template-columns: 1fr 1fr; } .cbf__grid { grid-template-columns: 1fr 1fr; } .cbf__grid .btn { grid-column: 1 / -1; } } @media (max-width: 760px) { .dentro-home { font-size: 16px; } .dentro-home h2 { font-size: 28px; } .wrap { padding: 0 16px; } .sec { padding: 40px 0; } .dirs-sec { padding: 48px 0; } .dirs-head { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 24px; } .dirs-toggle { min-width: 0; width: 100%; } .dirs { grid-template-columns: 1fr; gap: 12px; } .dir { min-height: 96px; } .hdr__in { height: 68px; } .hdr__logo img { width: 132px; height: 48px; } .hero { padding: 24px 0 56px; } .hero__blob { display: none; } .hero__eyebrow { font-size: 13px; padding: 6px 12px; } .hero__in { gap: 24px; } .hero__sub { font-size: 17px; margin-top: 12px; } .hero__btns { margin-top: 24px; flex-direction: column; } .hero__btns .btn { width: 100%; } .hero__points { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; } .hero__point { width: 100%; } .hero__media img { aspect-ratio: 4 / 3; border-radius: 18px; object-position: 50% 28%; } /* На узких экранах бейджу «часы» и карточке «адрес» не хватает ширины фото, чтобы стоять рядом по углам без наложения — переводим их в обычный поток под фото (не поверх), друг под другом на телефоне и в ряд начиная с 480px. */ .hero__media { display: flex; flex-direction: column; gap: 10px; } .hero__badge, .hero__locate { position: static; width: 100%; max-width: none; box-shadow: var(--shadow); } .hero__badge { padding: 10px 14px; font-size: 13px; gap: 8px; } .hero__badge svg { width: 18px; height: 18px; } .hero__locate { padding: 10px 12px; gap: 8px; } .hero__locate-t strong { font-size: 13px; } .hero__locate-t span { font-size: 11px; } .search { margin-top: -32px; padding: 0 0 24px; } .search__box { padding: 16px; } .search__head { gap: 12px; margin-bottom: 16px; } .search__head-ico { width: 40px; height: 40px; } .search__head-ico svg { width: 20px; height: 20px; } .dentro-home .search__title { font-size: 24px; margin: 0; } .search__row { flex-direction: column; } .search__submit { width: 100%; justify-content: center; } .search__all { margin-left: 0; width: 100%; justify-content: center; } .cards, .dirs, .docs, .whys { grid-template-columns: 1fr; } .doc__photo img { height: 240px; } .trust { padding: 20px; } .revs__more { padding: 16px; } .cbf__grid { grid-template-columns: 1fr; } .ftr__grid { grid-template-columns: 1fr; gap: 20px; } .ftr__list a { min-height: 44px; } .ftr__msgrs a { min-height: 44px; } .ftr { padding: 40px 0 16px; } .map iframe, .map { min-height: 300px; } .map iframe { height: 300px; } /* нижняя панель действий */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--blue); border-top: 1px solid rgba(255, 255, 255, .16); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(4, 82, 115, .1); } .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; border: 0; background: none; text-decoration: none; color: #fff; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; } .tabbar a svg, .tabbar button svg { width: 22px; height: 22px; color: #fff; } .tabbar a.tabbar--main { color: #fff; } .tabbar a:hover, .tabbar button:hover { background: rgba(255, 255, 255, .1); color: #fff; } .site-ui .tabbar a:focus-visible, .site-ui .tabbar button:focus-visible { outline: 2px solid #fff; outline-offset: -5px; } /* панель не должна перекрывать подвал */ .dentro-home { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } .float-book { display: none; } .chat-btn { bottom: calc(76px + env(safe-area-inset-bottom)); right: 16px; width: 52px; height: 52px; } /* во весь экран — снизу и так занята панель действий, карточке не хватило бы места */ .chat-panel { right: 0; bottom: 0; left: 0; top: 0; width: auto; max-width: none; height: auto; border-radius: 0; } .chat-panel__form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .dentro-home *, .dentro-home *::before, .dentro-home *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .card:hover, .doc:hover, .dir:hover, .btn:hover { transform: none; } }