/* * Небольшие дополнения к вёрстке, которых требует WordPress-интеграция: * состояние отправки формы и сообщение об ошибке. * main.css не трогаем, чтобы он оставался копией исходной вёрстки. */ .form__error { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--pink); } .form.is-sending .form__submit { opacity: .6; pointer-events: none; } /* * Телефон и кнопка «Заказать звонок» внутри бургер-меню. * * На десктопе и планшете блок скрыт: там шапка показывает телефон и кнопку * сама и специально поднята над оверлеем меню (z-index: 55 в main.css). * До 767px шапка прячет .header__call и .phone__text — вот там блок и нужен. */ .nav__side { display: none; } @media (max-width: 767px) { /* .nav — грид с place-items: center; собираем строки к центру и разводим их. */ .nav { align-content: center; row-gap: 34px; } .nav__side { display: flex; flex-direction: column; align-items: center; gap: 22px; } /* Возвращаем номер, скрытый в шапке правилом .phone__text { display: none } */ .nav__side .phone__text { display: block; text-align: left; } .nav__side .phone__icon { width: 40px; height: 40px; border-radius: 50%; } .nav__side .nav__call { min-width: 220px; padding: 0 34px; } } /* * Подпись разработчика в нижней строке подвала. * Живёт внутри того же

, что и копирайт, — структура flex-строки * .footer__bottom не меняется, на мобильных уходит на свою строку. */ .footer__author { display: inline-block; margin-left: calc(20 * var(--u)); } .footer__bottom .footer__author a { position: relative; color: rgba(255, 255, 255, .82); transition: color .2s var(--ease); } /* Подчёркивание выезжает слева направо при наведении. */ .footer__bottom .footer__author a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .28s var(--ease); } .footer__bottom .footer__author a:hover { color: var(--orange-light); } .footer__bottom .footer__author a:hover::after { transform: scaleX(1); transform-origin: left center; } @media (max-width: 767px) { .footer__author { display: block; margin-left: 0; margin-top: 6px; } } @media (prefers-reduced-motion: reduce) { .footer__bottom .footer__author a::after { transition: none; } } /* * Стрелки карусели видеообзоров — та же группа кнопок, что и в .usecases. * В вёрстке их не было, карусель листалась только свайпом и клавишами. */ /* В вёрстке было пять карточек и правила .vcard[data-pos] только для -2…2. Шестая карточка до запуска JS встала бы по центру поверх третьей — прячем её; дальше позицию и прозрачность задаёт main.js инлайн-стилями. */ .vcard[data-pos='3'] { opacity: 0; } .videos__nav { display: flex; gap: calc(10 * var(--u)); } /* .round-btn — белый круг без рамки: в .usecases он читается на сером фоне секции, а .videos белая. Рамка и зазор сняты с макета (Frame 1618872445): кольцо 1px #f0f0f0, диаметр кнопки 80px, расстояние между кнопками 10px. */ .videos__nav .round-btn { border: 1px solid #f0f0f0; } /* При наведении рамка убирается — форму кнопки держит тень из .round-btn:hover. Гасим цветом, а не border: 0, чтобы кнопка не дёрнулась на 1px. */ .videos__nav .round-btn:hover { border-color: transparent; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Появление блоков при скролле. * * Начальное (спрятанное) состояние применяется только когда на висит * класс js-reveal — его ставит main.js. Без JS и при prefers-reduced-motion * класса нет, и страница отображается обычным образом, ничего не пропадает. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; } /* * Незаполненное согласие в форме: красная рамка с подсветкой и красный текст. * Ставится на .consent, а не на сам чекбокс — он визуально скрыт, * видимый квадратик рисует .consent__mark. */ .consent.is-error { color: var(--pink); } .consent.is-error a { color: var(--pink); } .consent.is-error .consent__mark { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 21, 80, .2); } /* * Успешное состояние модалки. Заменяет собой форму: заголовок, подпись * и поля прячутся, окно остаётся открытым до закрытия крестиком. */ .modal__success { padding: 6px 0 2px; text-align: center; } .modal__success-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; color: #7fd68b; background: rgba(127, 214, 139, .12); border: 1px solid rgba(127, 214, 139, .38); animation: successPop .45s var(--ease) both; } .modal__success-icon svg { width: 36px; height: 36px; } .modal__success-title { margin: 24px 0 0; font-family: 'Soyuz Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.05; } .modal__success-number { display: inline-block; margin: 16px auto 0; padding: 8px 22px; font-family: 'Soyuz Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; color: #ffb38b; background: rgba(255, 122, 0, .12); border: 1px solid rgba(255, 122, 0, .35); border-radius: 999px; letter-spacing: .02em; } .modal__success-text { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); } .modal__success-note { margin: 22px 0 0; font-size: 13px; color: var(--muted-2); } @keyframes successPop { from { opacity: 0; transform: scale(.82); } } @media (max-width: 767px) { .modal__success-icon { width: 64px; height: 64px; } .modal__success-icon svg { width: 30px; height: 30px; } .modal__success-title { font-size: 30px; } .modal__success-number { font-size: 18px; padding: 6px 16px; margin-top: 12px; } } @media (prefers-reduced-motion: reduce) { .modal__success-icon { animation: none; } } /* * Пропорции снимка в секции характеристик на мобильном. * * В main.css там стоит aspect-ratio: 4 / 5 — вертикальный кадр. Меняем на * 4 / 2 (то же самое, что 2 / 1, как на планшете): кадр становится * широкой панорамой и занимает меньше высоты экрана. * * Правка здесь, а не в main.css: он держится копией исходной вёрстки, * и этот файл грузится после него. */ @media (max-width: 767px) { .details__shot { aspect-ratio: 4 / 2; } }