/** * Оживление интерфейса: плавные переходы и наведение. * * Отдельный файл, чтобы не трогать основной style.css — * так правки легко откатить и видно, что именно добавлено. * * В исходной вёрстке состояния :hover были описаны, но почти * без transition — поэтому подсветка срабатывала рывком. * Здесь добавлены плавность и недостающие состояния. */ /* ---------- Общая плавность ---------- */ .btn, .header__menu-item-link, .header__contact, .header__logo-wrapper, .footer__link, .models__card, .models__spec, .models__img, .equip-types__item, .using-benefit__item, .profit__slide, .profit__nav-btn, .modes__row, .niches__item, .niches__img, .niches__tag, .faq__item, .ac-trigger, .consultation__input, .consultation__contact, .consultation__social, .consultation__social-link, .consultation__label-radio, .hero__bullet, .video-block__active, .video-block__play, .modal__close-wrapper { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease; } /* Курсор-указатель там, где элемент кликабельный */ .ac-trigger, .video-block__play, .profit__nav-btn, .models__badge, .consultation__social-link[href] { cursor: pointer; } /* Иконка соцсети без ссылки не должна выглядеть кликабельной */ span.consultation__social-link { cursor: default; } /* ---------- Кнопки ---------- */ .btn:active { transform: translateY(1px); } /* ---------- Карточки моделей ---------- */ .models__img-wrapper { overflow: hidden; } .models__card:hover .models__img { transform: scale(1.04); } /* ---------- Направления применения ---------- */ .niches__item:hover { background: #241F45; } .niches__item:hover .niches__img { transform: scale(1.05); } .niches__tag:hover { background: var(--accent-dark); color: var(--text-bright); } /* ---------- Слайдер «Преимущества» ---------- */ /* Показываем, что слайдер можно тащить мышью */ .profit__swiper { cursor: grab; } .profit__swiper:active { cursor: grabbing; } .profit__nav-btn:active { transform: scale(0.94); } /* Неактивная стрелка не должна реагировать на курсор */ .profit__nav-btn.swiper-button-disabled { cursor: default; opacity: 0.35; } .profit__nav-btn.swiper-button-disabled:active { transform: none; } /* ---------- Аккордеон вопросов ---------- */ .ac .ac-trigger::after { transition: transform 0.3s ease; } /* ---------- Доступность с клавиатуры ---------- */ /* Видимая рамка при переходе по Tab — но не при клике мышью */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .ac-trigger:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } /* ---------- Уважение к системной настройке ---------- */ /* Если пользователь просил уменьшить анимацию — отключаем движение, оставляя только смену цвета. Это требование доступности. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════ ПЛАВНОЕ ПОЯВЛЕНИЕ ТЕКСТА И БЛОКОВ ПРИ ПРОКРУТКЕ Элементы скрыты только когда на висит класс .td-reveal — его ставит короткий скрипт в . Если JavaScript отключён или упал, класса не будет и весь текст виден сразу. ВАЖНО: список селекторов ниже должен совпадать с таким же списком в js/main.js (константа REVEAL_SELECTOR). ═══════════════════════════════════════════════════════════════ */ html.td-reveal .hero__title, html.td-reveal .hero__subtitle, html.td-reveal .hero__bullet, html.td-reveal .equip-types__title, html.td-reveal .equip-types__item, html.td-reveal .models__pretitle, html.td-reveal .models__title, html.td-reveal .models__subtitle, html.td-reveal .models__card, html.td-reveal .using-benefit__pretitle, html.td-reveal .using-benefit__title, html.td-reveal .using-benefit__subtitle, html.td-reveal .using-benefit__item, html.td-reveal .profit__pretitle, html.td-reveal .profit__title, html.td-reveal .profit__subtitle, html.td-reveal .modes__pretitle, html.td-reveal .modes__title, html.td-reveal .modes__table, html.td-reveal .niches__pretitle, html.td-reveal .niches__title, html.td-reveal .niches__subtitle, html.td-reveal .niches__btn, html.td-reveal .niches__item-content, html.td-reveal .niches__img-wrapper, html.td-reveal .faq__pretitle, html.td-reveal .faq__title, html.td-reveal .faq__subtitle, html.td-reveal .faq__item, html.td-reveal .ask__title, html.td-reveal .ask__subtitle, html.td-reveal .consultation__title, html.td-reveal .consultation__subtitle, html.td-reveal .consultation__form { opacity: 0; transform: translateY(20px); transition: opacity var(--rv-dur, 0.75s) cubic-bezier(0.22, 0.61, 0.36, 1), transform var(--rv-dur, 0.75s) cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--rv-i, 0) * 90ms); } /* Проявленное состояние — ставится наблюдателем при прокрутке */ html.td-reveal .is-revealed { opacity: 1; transform: none; } /* Уважаем системную настройку «уменьшить движение» */ @media (prefers-reduced-motion: reduce) { html.td-reveal [class] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════ ВОПРОСЫ И ОТВЕТЫ — как в макете ═══════════════════════════════════════════════════════════════ */ /* Раскрытый вопрос помечается фиолетовой полосой слева. Полоса прозрачная у всех, поэтому ширина блоков не скачет. */ .faq__item { border-left: 3px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease; } .faq__item.is-active { border-left-color: var(--accent-dark); } /* Списки и абзацы внутри ответа — админ может добавлять их из редактора */ .faq__text ul, .faq__text ol { margin: 12px 0 0; padding-left: 18px; } .faq__text li { margin-bottom: 6px; } .faq__text li::marker { color: var(--accent-dark); } .faq__text p { margin: 0 0 10px; } .faq__text p:last-child { margin-bottom: 0; } .faq__text strong { color: var(--text-dark); } /* ═══════════════════════════════════════════════════════════════ МОДЕЛЬ НЕ В НАЛИЧИИ — приглушаем карточку целиком Переключается в админке: «Модели принтеров» → галочка «В наличии» ═══════════════════════════════════════════════════════════════ */ .models__card--out-of-stock .models__img { filter: grayscale(0.85) brightness(0.8); } .models__card--out-of-stock .models__name, .models__card--out-of-stock .models__prename, .models__card--out-of-stock .models__subname { color: #8E88BF; } /* Главная кнопка перестаёт быть фиолетовой: заказывать пока нечего */ .models__card--out-of-stock .models__btn.btn-purple { background: transparent; color: #B9B3E0; box-shadow: inset 0 0 0 1px #3A3468; } .models__card--out-of-stock .models__btn.btn-purple:hover { background: rgba(118, 50, 185, 0.16); color: #FFFFFF; } /* Стрелка на приглушённой кнопке лишняя — она про действие */ .models__card--out-of-stock .models__btn.btn-purple .btn__icon { opacity: 0.45; } /* Кнопки не должны липнуть к строке про рассрочку. Отступ делаем внутренним: у кнопок стоит margin-top: auto, которое прижимает их к низу и держит обе карточки вровень — его трогать нельзя. */ .models__btns { padding-top: 28px; } /* Подпись про срок поставки вместо обещания отгрузки */ .models__note { margin-top: 16px; font-size: 13px; line-height: 18px; color: #8E88BF; } /* Наведение на приглушённую карточку не подсвечиваем акцентом */ .models__card--out-of-stock:hover { box-shadow: 0 0 0 1px #3A3468, 0 32px 48px -24px rgba(0, 0, 0, 0.35); } .models__card--out-of-stock:hover .models__img { transform: none; } /* ═══════════════════════════════════════════════════════════════ УСЛОВИЯ ПОКУПКИ НА КАРТОЧКЕ МОДЕЛИ Гарантия, лизинг, рассрочка. Настраиваются в админке: «Модели принтеров» → внутри модели → «Условия покупки». ═══════════════════════════════════════════════════════════════ */ .models__badges { display: flex; flex-direction: column; gap: 18px; /* Список возможностей выше уже даёт отступ снизу — здесь добавляем немного, иначе между блоками копится почти сто пикселей пустоты */ margin: 4px 0 0; padding: 28px 0 0; list-style: none; border-top: 1px solid #292449; } /* Условие читается как отдельная строка, а не как часть сплошного текста: значок сверху выровнен по первой строке, между строками больше воздуха */ .models__badge-row { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--text-bright); text-wrap: balance; } /* Самое выгодное условие выделяется зелёным — читается как выгода, а не как предупреждение */ .models__badge-row--accent { color: #3DD68C; } .models__badge-icon { flex: 0 0 auto; width: 28px; height: 28px; margin-top: -2px; background-repeat: no-repeat; background-position: center; background-size: contain; } /* Значки рисуем прямо в стилях — отдельные файлы не нужны, и цвет легко поменять вместе с текстом */ .models__badge-icon--medal { background-image: url('data:image/svg+xml,'); } .models__badge-icon--check { background-image: url('data:image/svg+xml,'); } .models__badge-icon--percent { background-image: url('data:image/svg+xml,'); } .models__badge-icon--bolt { background-image: url('data:image/svg+xml,'); } .models__badge-icon--shield { background-image: url('data:image/svg+xml,'); } /* У выделенного условия значок тоже зелёный */ .models__badge-row--accent .models__badge-icon--medal { background-image: url('data:image/svg+xml,'); } .models__badge-row--accent .models__badge-icon--check { background-image: url('data:image/svg+xml,'); } .models__badge-row--accent .models__badge-icon--percent { background-image: url('data:image/svg+xml,'); } .models__badge-row--accent .models__badge-icon--bolt { background-image: url('data:image/svg+xml,'); } .models__badge-row--accent .models__badge-icon--shield { background-image: url('data:image/svg+xml,'); } /* У модели не в наличии условия тоже приглушаем */ .models__card--out-of-stock .models__badges { opacity: 0.55; } /* Вторая кнопка в блоке «Остались вопросы» — запись на демо */ .ask__btn--demo { margin-left: 16px; } @media (max-width: 768px) { .ask__btn--demo { margin-left: 0; margin-top: 12px; } }