/* ========================================================================== Mebel.Mobilier — правила поверх Tailwind. Здесь лежит то, что не должно сломаться при правке разметки: привязка идёт к тегам и id, а не к utility-классам. Пересборка Tailwind этот файл не затрагивает — он подключается отдельно. ========================================================================== */ /* --- Якорные ссылки: не даём заголовку уехать под липкую шапку (высота 80px) --- */ section[id], [id]:target { scroll-margin-top: 6rem; } /* --- Модальное окно ---------------------------------------------------- */ /* Оверлей должен прокручиваться: на телефоне в горизонтальной ориентации карточка выше экрана, и без этого кнопка отправки недостижима. margin:auto по вертикали центрирует карточку, когда места хватает. */ #callback-modal { overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; } #callback-modal > #modal-card { margin-top: auto; margin-bottom: auto; } /* Блокировка прокрутки фона под модалкой. overflow:hidden на body в Safari iOS не работает — нужна фиксация. Класс ставит и снимает script.js, он же сохраняет и возвращает позицию. */ body.modal-open { position: fixed; width: 100%; overflow: hidden; } /* --- Лайтбокс портфолио ------------------------------------------------- Разметку строит script.js; здесь только курсор на фоне, чтобы было понятно, что клик мимо картинки закрывает просмотр. */ #lightbox { cursor: zoom-out; } #lightbox img, #lightbox button { cursor: default; } /* --- Мобильная панель действий ------------------------------------------ Панель зафиксирована внизу экрана, поэтому подвалу нужен отступ — иначе последние строки реквизитов оказываются под ней и их не прочитать. Брейкпоинт совпадает с md: в Tailwind (768px), где панель скрывается. */ @media (max-width: 767px) { body { padding-bottom: 4.75rem; } } /* Под модалкой и лайтбоксом панель не нужна: она перекрывала бы кнопку отправки формы и оставалась бы кликабельной поверх оверлея. */ body.modal-open #mobile-bar { display: none; } /* --- Вопросы и ответы --------------------------------------------------- На
/: работает без JavaScript и с клавиатуры. Привязка к тегам, а не к utility-классам, — правка разметки не сломает. */ .faq details { background: #fff; border: 1px solid #E7E5E4; border-radius: 1rem; padding: 0 1.25rem; transition: border-color 0.2s ease; } .faq details[open] { border-color: #D6D3D1; } .faq summary { list-style: none; cursor: pointer; padding: 1.125rem 2rem 1.125rem 0; position: relative; font-weight: 600; font-size: 0.9375rem; color: #1C1917; } /* Убираем стандартный треугольник в Safari/Chrome */ .faq summary::-webkit-details-marker { display: none; } /* Свой маркер: плюс, который поворачивается в крестик при раскрытии */ .faq summary::after { content: ''; position: absolute; right: 0.25rem; top: 50%; width: 0.75rem; height: 0.75rem; margin-top: -0.375rem; background: linear-gradient(#78716C, #78716C) center/100% 2px no-repeat, linear-gradient(#78716C, #78716C) center/2px 100% no-repeat; transition: transform 0.25s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: #8A6A12; } .faq details p { margin: 0; padding: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.65; color: #57534E; } /* --- Появление блоков при прокрутке ------------------------------------- Начальное состояние включается ТОЛЬКО когда script.js поставил js-reveal на . Без JavaScript класса нет, и блоки видны сразу — иначе посетитель с отключённым JS увидел бы пустую страницу. */ .js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } /* --- Доступность с клавиатуры ------------------------------------------ В разметке у бургера стоит focus:outline-none — возвращаем видимый индикатор фокуса, иначе навигация с клавиатуры вслепую. */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid #1C1917; outline-offset: 2px; border-radius: 4px; } /* --- Состояния формы ---------------------------------------------------- */ /* Кнопка на время отправки */ button[disabled] { opacity: 0.6; cursor: not-allowed; } /* Подсветка поля, не прошедшего проверку на сервере */ .field-invalid { border-color: #DC2626 !important; } /* Сообщение для посетителей с отключённым JavaScript */ .noscript-note { margin-top: 1rem; padding: 0.875rem 1.125rem; border: 1px solid #E7E5E4; border-radius: 1rem; background: #fff; font-size: 0.8125rem; line-height: 1.5; color: #57534E; text-align: left; } /* --- Уважение к системной настройке «меньше движения» ------------------- Отключает пульсацию точки в hero, зумы картинок и все переходы. Логика модалки не ломается: она завязана на таймеры, а не на события анимации. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } /* Обнуления длительности выше НЕДОСТАТОЧНО: сама opacity: 0 никуда не девается, и до срабатывания IntersectionObserver блок остаётся невидимым. Поэтому появление отключаем целиком. */ .js-reveal .reveal { opacity: 1 !important; transform: none !important; } } /* --- Печать ------------------------------------------------------------- */ @media print { header, #callback-modal, #lightbox, #mobile-bar, .noscript-note { display: none !important; } /* На печати ничего не скрываем и не смещаем */ .js-reveal .reveal { opacity: 1 !important; transform: none !important; } /* Ответы должны попасть на бумагу, даже если блок свёрнут */ .faq details p { display: block !important; } }