/* СБОРКА 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% ширины экрана,
и отступ под текст считается точно.
Про 100px. Раньше здесь стояло 70px (и 62px на телефонах) — я считал
это высотой шапки. Замерил в браузере: .navbar фиксированная,
top: -20px, height: 114px, то есть её нижний край на 94px, причём
на всех размерах экрана одинаково. Кадр начинался на 62px и верхние
32px уходили под белую шапку — у людей срезало макушки. Ставим 100px:
94px шапка + 6px воздуха. */
@media only screen and (max-width: 991px) {
.slider .main-slider .swiper-slide .slide-image {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center 100px !important;
background-color: #ffffff;
}
/* подложка под текст больше не нужна — текст лежит на белом */
.slider .main-slider .swiper-slide .slide-image:after {
background: none;
opacity: 0;
}
/* освобождаем сверху место под шапку и под фото:
100px (шапка + воздух) + 56.25vw высота кадра + воздух */
.slider .main-slider .swiper-slide {
padding-top: calc(100px + 56.25vw + 18px) !important;
align-items: flex-start !important;
}
/* Текстовый блок компактнее. Сдвинув кадр вниз на 38px, мы столько же
отняли у текста, а на невысоких экранах кнопка и так почти упиралась
в нижний край слайда (у слайда «Здорова посмішка» вылезала на 6px).
Забираем воздух там, где его было с запасом: отбивка над заголовком
46px и отступ под абзацем 50px. */
.slider .main-slider .swiper-slide .container h1,
.slider .main-slider .swiper-slide .container h2 {
margin-top: 16px !important;
}
.slider .main-slider .swiper-slide .container p {
margin-bottom: 22px !important;
}
}
@media only screen and (max-width: 575px) {
.slider .main-slider .swiper-slide {
padding-top: calc(100px + 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;
}
.slider .main-slider .swiper-slide {
padding-top: calc(100px + 43.9vw + 12px) !important;
}
}
/* совсем маленькие экраны (320x568 и подобные): кадр ещё меньше,
заголовок на кегль ниже — иначе кнопка не помещается в 100vh */
@media only screen and (max-width: 380px) and (max-height: 640px) {
.slider .main-slider .swiper-slide .slide-image {
background-size: 58% auto !important;
}
.slider .main-slider .swiper-slide {
padding-top: calc(100px + 32.7vw + 10px) !important;
}
.slider .main-slider .swiper-slide .container h1,
.slider .main-slider .swiper-slide .container h2 {
font-size: 28px !important;
margin-top: 8px !important;
}
.slider .main-slider .swiper-slide .container p {
font-size: 15px !important;
margin-bottom: 14px !important;
}
}
/* --- 15.2a Первый слайд: фото команды ------------------------------
Кадры img/slide-team*.jpg собраны так, что врачи стоят справа, а слева
остаётся чистый фон студии — на десктопе заголовок и кнопка ложатся
на пустое поле, а не на лица.
На телефоне текст уходит ВНИЗ под фото (см. блок 15.2 выше), поэтому
там нужен другой кадр: тот же снимок, но люди по центру и крупнее.
Пропорция у обоих файлов одна и та же, 16:9 — иначе поедет расчёт
padding-top (70px шапка + 56.25vw кадр) из блока 15.2.
!important обязателен: адрес картинки лежит в inline-style самого
слайда, а inline-стиль перебивается только через !important. */
@media only screen and (max-width: 991px) {
.slider .main-slider .swiper-slide .slide-image.slide-team {
background-image: url(../img/slide-team-mobile.jpg) !important;
}
.slider .main-slider .swiper-slide .slide-image.slide-team2 {
background-image: url(../img/slide-team2-mobile.jpg) !important;
}
.slider .main-slider .swiper-slide .slide-image.slide-team3 {
background-image: url(../img/slide-team3-mobile.jpg) !important;
}
.slider .main-slider .swiper-slide .slide-image.slide-team4 {
background-image: url(../img/slide-team4-mobile.jpg) !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 Подвал на телефонах и планшетах ---------------------------
Что было видно на телефоне: подвал растягивался на два экрана и
распадался на несколько независимых кусков. Причины были две:
1) Посреди подвала стоит h6 «Стоматологія Danli-Dent» размером 26px —
ровно такое же название уже написано в логотипе на экран выше.
На мобильном этот заголовок читается как начало НОВОЙ секции,
поэтому казалось, что кнопка «Зателефонувати» и списки ссылок
лежат уже ПОСЛЕ подвала, а не внутри него.
2) У .footer .footer-menu li в style.css (≤767px) стоит
flex-direction: column — точка-маркер уезжала НАД текстом,
а пункты вытягивались в одну длинную центрированную ленту.
(Прошлая попытка чинилась через column-count — к flex-контейнеру
это свойство не применяется вообще, правило молча игнорировалось.
Поэтому колонки делаем самим флексом, через flex-basis.)
Что делаем: собираем подвал в один компактный блок —
логотип → контакты → соцсети → кнопка звонка → два аккуратных
списка в две колонки → копирайт. Кнопка «Зателефонувати» идёт
ДО списков ссылок, зона ссылок и копирайт отделены тонкой линией,
так что подвал читается как одно целое.
В самом низу файла — готовые переключатели, если вместо
«аккуратно» захочется «вообще без них». */
@media only screen and (max-width: 991px) {
/* --- общий ритм --- */
.footer {
padding: 30px 0 24px !important;
background-position: center bottom !important;
background-color: #ffffff;
}
.footer .logo {
margin-bottom: 14px !important;
}
.footer .logo img {
height: 58px !important;
margin-top: 0 !important;
}
/* --- контакты: убираем лишние и распорку .bosluk04,
они давали двойные отступы между строками --- */
.footer .footer-info {
margin-bottom: 16px !important;
font-size: 16px !important;
}
.footer .footer-info br,
.footer .bosluk04 {
display: none !important;
}
.footer .footer-info p {
margin: 0 0 8px !important;
}
.footer .footer-info a {
font-size: 16px !important;
}
/* --- соцсети --- */
.footer .footer-social {
margin-top: 0 !important;
margin-bottom: 20px !important;
justify-content: center !important;
gap: 8px;
}
.footer .footer-social li {
margin-right: 0 !important;
}
.footer .footer-social li a {
width: 56px !important;
}
/* --- дублирующий заголовок «Стоматологія Danli-Dent»:
на мобильном прячем, логотип с этим же названием стоит выше.
На десктопе он остаётся как был. --- */
.footer .row > div:nth-child(2) .widget-title {
display: none !important;
}
.footer .row > div:nth-child(2) br {
display: none !important;
}
p.footerp {
max-width: 480px;
margin: 0 auto 16px !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
/* --- кнопка «Зателефонувати»: компактная, по центру,
сразу после контактов и соцсетей --- */
.footer a.custom-button {
display: block !important;
width: 100% !important;
max-width: 320px;
height: 54px !important;
line-height: 52px !important;
margin: 0 auto !important;
padding: 0 18px !important;
font-size: 15px !important;
text-align: center !important;
}
/* --- зона ссылок отделена линией от контактной части --- */
.footer .row > div:nth-child(3) {
margin-top: 26px !important;
padding-top: 20px !important;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.footer .widget-title {
margin-top: 0 !important;
margin-bottom: 8px !important;
font-size: 18px !important;
text-align: left !important;
}
.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 {
display: flex !important;
flex-direction: row !important; /* точка остаётся рядом с текстом */
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
margin: 0 !important;
padding: 4px 10px 4px 0 !important;
list-style: none !important;
}
.footer ul.footer-menu > li:before {
content: "" !important;
display: block !important;
flex: 0 0 6px !important;
width: 6px !important;
height: 6px !important;
min-width: 6px !important;
border-radius: 50% !important;
background: #2cb4af !important;
margin: 0 8px 0 0 !important;
}
.footer ul.footer-menu > li a {
display: inline-block !important;
/* только px: у темы html { font-size: 30% } ниже 640px,
то есть база rem падает до 4.8px и 1.55rem даёт 7px */
font-size: 15px !important;
line-height: 1.35 !important;
text-align: left !important;
}
/* --- копирайт --- */
.footer .copyright {
margin-top: 24px !important;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-size: 13px;
line-height: 1.5;
text-align: center !important;
}
}
/* 576–991px: блоки «Послуги» и «Швидкі посилання» и так стоят рядом
(col-sm-6), поэтому пункты внутри каждого — в одну колонку,
иначе получилось бы четыре узких колонки и переносы слов. */
@media only screen and (min-width: 576px) and (max-width: 991px) {
.footer ul.footer-menu > li {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.footer .row > div:nth-child(4) {
margin-top: 26px !important;
padding-top: 20px !important;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
}
/* ≤575px: блоки идут друг под другом на всю ширину → пункты в две
колонки, чтобы подвал не вытягивался в длинную ленту. */
@media only screen and (max-width: 575px) {
.footer ul.footer-menu > li {
flex: 0 0 50% !important;
max-width: 50% !important;
}
.footer .row > div:nth-child(4) .widget-title {
margin-top: 20px !important;
}
}
/* На самых узких экранах чуть уменьшаем кегль, чтобы длинные пункты
вроде «Гігієна, відбілювання» помещались в половину ширины. */
@media only screen and (max-width: 385px) {
.footer ul.footer-menu > li a {
font-size: 13px !important;
}
.footer ul.footer-menu > li {
padding-right: 6px !important;
}
}
/* --- 15.4-alt. Переключатели «вообще без них» ------------------------
Если решишь, что на мобильном эти блоки в подвале не нужны, —
раскомментируй нужные строки, больше ничего править не надо.
@media only screen and (max-width: 991px) {
.footer .row > div:nth-child(4) { display: none !important; }
.footer .row > div:nth-child(3) { display: none !important; }
.footer a.custom-button { display: none !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;
}
/* --- 15.6 Блок отзывов на телефоне ----------------------------------
Нашёл при проверке мобильной версии. Две проблемы, обе из темы:
1) .person (имя автора) задан как font-size: 1.5rem. У темы ниже 640px
стоит html { font-size: 30% }, то есть база rem падает до 4.8px —
имя рендерилось кеглем 7.2px, читать невозможно. Везде ниже только
px, чтобы не зависеть от этой базы.
2) Аватар лежит в .testimonimg с position: absolute; top: -50%, то есть
подтянут вверх на 70px. На десктопе текст отзыва короткий и кружок
красиво заходит на нижний край карточки. На телефоне тот же текст
занимает 7 строк, и фото наезжало прямо на последнюю строку.
На мобильном разбираем абсолютное позиционирование и ставим
аватар с именем обычным потоком под текстом. */
@media only screen and (max-width: 991px) {
.testimonial-card .testimon-text {
padding: 1.6em 1.2em 0.8em !important;
font-size: 16px !important;
line-height: 1.6em !important;
}
.testimonial-card .testimonialimg {
height: auto !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding-bottom: 10px;
}
.testimonial-card .testimonimg {
position: static !important;
width: auto !important;
margin: 0 auto 8px !important;
}
.testimonial-card .testimonimg img {
width: 84px !important;
height: 84px !important;
border-radius: 50% !important;
object-fit: cover;
display: block;
}
.testimonial-card .person {
position: static !important;
transform: none !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
font-size: 15px !important;
text-align: center !important;
}
}
/* --- 15.7 Горизонтальный подёргивание при прокрутке на телефоне ------
Нашёл при проверке мобильной версии: во время прокрутки страница
на короткое время становится шире экрана (замер: 395px при экране 390),
и телефон разрешает мотнуть вбок. Google это видит как «контент шире
экрана».
Причина — анимации wow/animate.css вида fadeInRight и fadeInLeft:
элемент стартует со смещением по X за пределы экрана, а у html и body
overflow-x: visible, поэтому на время анимации появляется прокрутка.
Ставить body { overflow-x: hidden } не стал: body превращается
в отдельный контейнер прокрутки, а на странице услуг вся навигация
построена на якорях со scroll-behavior: smooth — легко сломать.
Вместо этого на мобильном убираем у этих анимаций горизонтальное
движение, оставляя обычное проявление. Визуально почти то же самое. */
@media only screen and (max-width: 991px) {
.wow.fadeInRight,
.wow.fadeInLeft,
.wow.slideInLeft,
.wow.slideInRight,
.wow.bounceInLeft,
.wow.bounceInRight,
/* bounceIn в пике увеличивает элемент до 1.05 — у блоков во всю ширину
это давало 1–5px вылета вправо и телефон разрешал мотнуть вбок */
.wow.bounceIn {
animation-name: fadeInUp !important;
}
}
/* Остаток бокового вылета на главной: у .reveal-effect есть псевдоэлемент
:before, который во время анимации reveal меняет left и width — на части
кадров сумма выходит за правый край на 2–6px. Он лежит внутри блока
с position: relative, поэтому обрезка по родителю ничего не портит. */
@media only screen and (max-width: 991px) {
.reveal-effect {
overflow: hidden;
}
}