/* СБОРКА 20260730-2 — если видите эту строку, файл свежий */ /* ============================================================ fixes.css — точечные правки поверх style.css. Подключается последним. Не нужен какой-то блок — удалите его, не нужен весь файл — уберите из . ============================================================ */ /* 1. Прелоадер. .container45 — белый оверлей на весь экран поверх всего контента. Снимался по window.load, то есть после загрузки всех картинок, плюс сверху секунда на transition. Оба тормоза убраны: снятие перенесено на DOMContentLoaded (js/scripts.js), а переход укорочен здесь. */ .container45 { transition: opacity .3s ease, visibility .3s ease !important; animation: danli-loader-failsafe .3s ease 3s forwards; } .part { transition: opacity .3s ease !important; } /* Страховка: весь код в scripts.js лежит в одном файле, и если что-то упадёт до строки, снимающей оверлей (например, не загрузится jQuery), страница останется белой навсегда. Через 3 секунды оверлей уйдёт сам. */ @keyframes danli-loader-failsafe { to { opacity: 0; visibility: hidden; } } /* 2. Видимый фокус с клавиатуры. В style.css шесть раз повторено * { outline: none !important } — навигация табом становится невидимой. Возвращаем обводку только для клавиатуры, по клику мышью всё выглядит как раньше. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #2cb4af !important; outline-offset: 2px; } /* 3. Уважаем системную настройку «уменьшить движение». */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* страховку прелоадера НЕ отключаем — иначе при упавшем JS и включённой настройке «меньше движения» страница осталась бы белой. Правило * выше и так делает её мгновенной, задержку в 3 с оно не трогает. */ } /* 4. Картинкам проставлены width/height, чтобы браузер заранее резервировал место под них. Но атрибут height — это ещё и presentational hint, который зафиксирует высоту в пикселях там, где вёрстка ждёт резиновую картинку. Нейтрализуем его через :where() — у этой обёртки специфичность НОЛЬ, поэтому правило перебивает только сам атрибут и проигрывает любому настоящему CSS-правилу (.doctor-detail-photo img, .navbar .logo a img, .navbar-messengers img, .member-image img и прочим). */ :where(img[width][height]) { height: auto; } /* 5. Телефоны в плитке контактов сделаны отдельными ссылками tel:, чтобы на мобильном каждый номер звонился сам по себе. Выглядеть они должны ровно как обычный текст плитки. */ .ozellik-kutu-iletisim--yazi a { color: inherit; text-decoration: none; } .ozellik-kutu-iletisim--yazi a:hover { text-decoration: underline; } /* 6. Якорные переходы. .navbar имеет position:fixed, поэтому переход по #karies, #implantatsiya, #FAQ и т.д. уводил заголовок под шапку — визуально казалось, что страница проскроллилась на середину текста. В style.css такое уже лечили для #contact-form (scroll-margin-top: 100px), но на остальные якоря правило не распространили. */ .service-detail-block, #FAQ { scroll-margin-top: 120px; } @media (max-width: 991px) { .service-detail-block, #FAQ { scroll-margin-top: 90px; } } /* 7. Две кнопки в попапе обратного звонка. Обе inline-block подряд слипались в два одинаковых пилюльных блока без отступа. Разводим их флексом и разделяем по смыслу: отправка формы — залитая, звонок — контурная. */ .form-popup__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 10px; } .form-popup__actions .custom-button { font-family: inherit; font-size: 16px; font-weight: 600; padding: 0 32px; margin: 0; cursor: pointer; white-space: nowrap; } .custom-button--outline { background: transparent; color: #2cb4af; border: 1px solid #2cb4af; } .custom-button--outline:hover { background: #2cb4af; color: #fff; border-color: #2cb4af; } @media (max-width: 575px) { .form-popup__actions { flex-direction: column; gap: 10px; } .form-popup__actions .custom-button { width: 100%; padding: 0 14px; } } /* 8. Если JavaScript не отработал. В style.css у .wow.fade прописан opacity: 0 — элемент проявляется только когда wow.js повесит класс .animated. Значит при отключённом или не загрузившемся JS весь этот контент остаётся невидимым навсегда. В каждой страницы стоит однострочный скрипт, который вешает класс js на . Он выполняется до отрисовки, поэтому мигания нет, а при выключенном JS сюда просто никто не приходит и контент виден. */ html:not(.js) .wow, html:not(.js) .wow.fade { opacity: 1 !important; visibility: visible !important; animation: none !important; } html:not(.js) .container45 { display: none !important; } /* 9. Кастомный курсор двигается трансформом в каждом кадре — выносим его на отдельный слой, чтобы браузер не перерисовывал из-за него остальную страницу. */ #pointer-dot, #pointer-ring { will-change: transform; } /* 10. Тайминги появления. Было: animation-duration 1s на каждый reveal, плюс data-wow-delay от 0.3 до 1.0 с. То есть элемент становился полностью видимым через 1.3–2.0 с после попадания в кадр — и всё это ради движения на 20px. Секунда на два сантиметра читается как подвисание, а не как анимация. Задержки в разметке уменьшены вдвое (шаг стаггера в ряду сохранён), здесь укорочена сама анимация и задана кривая только с торможением — так движение выглядит собранным, а не плавающим. Откатить: удалить этот блок и вернуть data-wow-delay прежние значения (они были ровно вдвое больше). */ .animated { -webkit-animation-duration: .55s; animation-duration: .55s; -webkit-animation-timing-function: cubic-bezier(.22, .61, .36, 1); animation-timing-function: cubic-bezier(.22, .61, .36, 1); } /* .wow.fade — не анимация из animate.css, а собственный transition по прозрачности. У него были свои 0.5s + 0.2s задержки. */ .wow.fade { transition: opacity .35s cubic-bezier(.22, .61, .36, 1); transition-delay: .08s; } /* ============================================================ 11. Живость иконок. Концепция прежняя: те же глифы, те же бирюзовые квадраты, те же размеры. Добавлена только реакция на наведение. Кривые те же, что у остальных анимаций сайта. Всё это отключается блоком prefers-reduced-motion выше. ============================================================ */ /* --- квадратные плитки: счётчики на главной и блоки контактов --- */ .icon { transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease; } .content-section .col-lg-3:hover > .icon, .ozellik-kutu-iletisim:hover > .icon { transform: translateY(-6px) scale(1.05); box-shadow: 0 14px 26px rgba(44, 180, 175, .32); } /* --- мессенджеры в шапке --- */ .navbar-messengers a img { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); } .navbar-messengers a:hover img { transform: scale(1.12); } /* --- трубка в кнопке звонка в шапке --- */ .navbar-button a .iconp { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .navbar-button a:hover .iconp { transform: scale(1.15) rotate(-10deg); } /* --- кнопка «наверх» --- */ #top { transition: transform .3s cubic-bezier(.22, .61, .36, 1); } #top:hover { transform: translateY(-5px); } /* ============================================================ 12. Шапка при прокрутке. Пока страница вверху — шапка как была. Стоит отлистать — появляется мягкая тень и отделяет её от контента. Класс вешает js/scripts.js. ============================================================ */ .navbar { transition: box-shadow .3s ease, background-color .3s ease; } .navbar.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .10); } /* ============================================================ 13. Кнопки звонка — лёгкая пульсация, чтобы притягивали взгляд. Сознательно НЕ делаю это постоянным дёрганьем: анимация длинная, основную часть времени кнопка стоит спокойно, а короткий импульс проходит раз в несколько секунд. При наведении импульс выключается, чтобы не спорить с hover-состоянием. Гасится блоком prefers-reduced-motion выше. ============================================================ */ /* мягкая волна от кнопки: один импульс за 4.5 с, остальное время покой */ @keyframes danli-call-pulse { 0% { box-shadow: 0 0 0 0 rgba(44, 180, 175, .45); } 12% { box-shadow: 0 0 0 13px rgba(44, 180, 175, 0); } 100% { box-shadow: 0 0 0 0 rgba(44, 180, 175, 0); } } /* трубка коротко «звонит»: покой, потом полсекунды дрожи */ @keyframes danli-call-ring { 0%, 80%, 100% { transform: rotate(0deg); } 82% { transform: rotate(-13deg); } 84% { transform: rotate(11deg); } 86% { transform: rotate(-8deg); } 88% { transform: rotate(6deg); } 90% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } } a.custom-button[href^="tel:"] { animation: danli-call-pulse 4.5s ease-out infinite; } a.custom-button[href^="tel:"]:hover { animation: none; } /* трубка в кнопке звонка в шапке */ .navbar-button a .iconp { animation: danli-call-ring 5s ease-in-out infinite; } .navbar-button a:hover .iconp { animation: none; } /* контурная кнопка в попапе — волна в её же цвете */ .custom-button--outline[href^="tel:"] { animation: danli-call-pulse 4.5s ease-out infinite; } /* на мобильных импульс убираем: там кнопки крупные, занимают заметную часть экрана, и постоянное движение раздражает */ @media (max-width: 767px) { a.custom-button[href^="tel:"], .custom-button--outline[href^="tel:"] { animation: none; } } /* ============================================================ 14. Пустота под футером. img.absoluteimg2 (img/section-bg.png, декоративная фигура за секцией «Коли варто звернутися») в style.css описана так: position: absolute; width: 90%; height: auto; margin-top: -875px; Натуральный размер картинки 635x504, но width: 90% растягивает её по ширине секции. На экране 1920px это 1728x1372, на 2560px — 2304x1829. С учётом margin-top: -875px она вылезает вниз на 500-950px, прокручивая документ далеко за футер. Чем шире монитор, тем больше пустоты. Ограничиваем ширину так, чтобы высота никогда не превышала 875px и картинка физически не могла выйти за свою же точку привязки: 875px * 635/504 = 1102px по ширине. Фигура остаётся крупной и декоративной, но документ больше не тянет. ============================================================ */ img.absoluteimg2 { max-width: 1100px; /* она чисто декоративная (alt=""), перехватывать клики ей незачем */ pointer-events: none; } /* ============================================================ 15. МОБИЛЬНАЯ ВЕРСИЯ. Всё ниже — только внутри медиазапросов max-width. Десктоп не затрагивается ни одним правилом. ============================================================ */ /* --- 15.1 Боковое меню (бургер) ------------------------------------ В style.css уже есть .side-widget.active { left: 0; z-index: 8888 }, осталось добавить плавность и кнопку закрытия (её в разметке не было). */ .side-widget { transition: left .32s cubic-bezier(.22, .61, .36, 1); } .side-widget__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); cursor: pointer; z-index: 3; transition: background .25s ease, transform .25s ease; } .side-widget__close:hover { background: rgba(44, 180, 175, .18); transform: rotate(90deg); } .side-widget__close span { position: absolute; left: 11px; top: 19px; width: 18px; height: 2px; border-radius: 2px; background: #1a1a1a; } .side-widget__close span:first-child { transform: rotate(45deg); } .side-widget__close span:last-child { transform: rotate(-45deg); } @media (max-width: 575px) { /* панель шириной 400px на телефоне шире экрана — оставляем полоску, чтобы было куда нажать мимо меню */ .side-widget { width: 88vw !important; max-width: 360px; } } /* --- 15.2 Первый экран: фото целиком + читаемый текст --------------- Было background-size: cover. На портретном экране ландшафтное фото 1920x1080 масштабируется по высоте, и края срезаются — часть команды уходит за кадр. Переводим на contain: фото видно полностью, лежит сразу под шапкой, а текст встаёт под ним. Все четыре слайда 16:9, поэтому высота картинки = 56.25% ширины экрана, и отступ под текст считается точно. */ @media only screen and (max-width: 991px) { .slider .main-slider .swiper-slide .slide-image { background-size: contain !important; background-repeat: no-repeat !important; /* 70px — высота фиксированной шапки, чтобы фото из-под неё вышло */ background-position: center 70px !important; background-color: #ffffff; } /* подложка под текст больше не нужна — текст лежит на белом */ .slider .main-slider .swiper-slide .slide-image:after { background: none; opacity: 0; } /* освобождаем сверху место под шапку и под фото: 70px шапка + 56.25vw высота кадра + воздух */ .slider .main-slider .swiper-slide { padding-top: calc(70px + 56.25vw + 18px) !important; align-items: flex-start !important; } } @media only screen and (max-width: 575px) { .slider .main-slider .swiper-slide .slide-image { background-position: center 62px !important; } .slider .main-slider .swiper-slide { padding-top: calc(62px + 56.25vw + 14px) !important; } } /* на невысоких экранах кадр чуть уменьшаем, иначе текст не влезает под фото в пределах 100vh слайда */ @media only screen and (max-width: 991px) and (max-height: 680px) { .slider .main-slider .swiper-slide .slide-image { background-size: 78% auto !important; background-position: center 62px !important; } .slider .main-slider .swiper-slide { padding-top: calc(62px + 43.9vw + 12px) !important; } } /* --- 15.3 Видео «Як ми працюємо» в строку ------------------------- Было grid-template-columns: 1fr, то есть три ролика друг под другом и очень длинная секция. Делаем горизонтальную ленту с прилипанием: листается слева направо, следующий ролик выглядывает из-за края. */ @media (max-width: 991px) { .clinic-video-grid { display: flex !important; grid-template-columns: none !important; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 0 12px; scrollbar-width: thin; } .clinic-video-grid::-webkit-scrollbar { height: 4px; } .clinic-video-grid::-webkit-scrollbar-thumb { background: rgba(44, 180, 175, .5); border-radius: 4px; } .clinic-video-card { flex: 0 0 76%; scroll-snap-align: center; } .clinic-video-card video { height: 250px !important; } } @media (max-width: 575px) { .clinic-video-card { flex: 0 0 82%; } .clinic-video-card video { height: 220px !important; } } /* --- 15.4 Подвал --------------------------------------------------- Списки «Послуги» и «Швидкі посилання» шли одной длинной колонкой: подвал растягивался на два экрана и визуально распадался на куски. Почему предыдущая попытка не сработала: у .footer .footer-menu стоит display: flex, а к flex-контейнеру column-count не применяется вообще — правило было молча проигнорировано. Поэтому колонки делаем самим флексом, через flex-basis, а не width (у flex-элементов это надёжнее). Работает до 991px: выше 1199px колонки подвала и так становятся на 100% ширины, поэтому одна длинная лента получалась на всём диапазоне телефонов и планшетов. */ @media only screen and (max-width: 991px) { .footer ul.footer-menu { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .footer ul.footer-menu > li { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; display: flex !important; flex-wrap: nowrap !important; /* точка остаётся рядом с текстом */ flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; padding: 5px 10px 5px 0 !important; list-style: none !important; } .footer ul.footer-menu > li:before { content: "" !important; flex: 0 0 7px !important; width: 7px !important; height: 7px !important; min-width: 7px !important; border-radius: 50% !important; background: #2cb4af !important; margin: 0 8px 0 0 !important; display: block !important; } .footer ul.footer-menu > li a { display: inline-block !important; font-size: 1.45rem !important; line-height: 1.3 !important; text-align: left !important; } /* заголовки блоков и общий ритм */ .footer .widget-title { margin-top: 24px !important; margin-bottom: 10px !important; font-size: 19px !important; text-align: left !important; } .footer .row > [class*="col-"]:first-child .widget-title { margin-top: 0 !important; } .footer .copyright { margin-top: 22px !important; font-size: 1.3rem; line-height: 1.5; } .footer a.custom-button { display: block; text-align: center; padding: 0 18px; } .footer { background-position: center bottom !important; background-color: #ffffff; } } /* на самых узких экранах чуть уменьшаем кегль, чтобы длинные пункты вроде «Гігієна, відбілювання» помещались в половину ширины одной строкой */ @media only screen and (max-width: 385px) { .footer ul.footer-menu > li a { font-size: 1.3rem !important; } .footer ul.footer-menu > li { padding-right: 6px !important; } } /* --- 15.5 Бургер на широких мониторах ------------------------------- .navbar .hamburger-menu { display: none } в style.css стоит только внутри @media (min-width: 1300px) and (max-width: 2000px). На мониторе шире 2000px бургер появлялся снова — а список меню внутри панели (.side-widget .show-mobile) виден только до 991px, поэтому панель открывалась пустой. Прячем бургер везде, где есть основное горизонтальное меню (.navbar .site-menu скрывается на 991px, значит выше оно есть). */ @media only screen and (min-width: 992px) { .navbar .hamburger-menu { display: none !important; } } /* страховка: если панель всё-таки открылась на широком экране, она не должна быть пустой */ .side-widget.active .show-mobile { display: flex !important; }