/* Start:/bitrix/templates/brono.one/template_styles.css?178723226613329*/ .bx-core-popup-menu-item .adm-menu-brono, .bx-core-popup-menu-item-opened .adm-menu-brono { background: rgba(0, 0, 0, 0) url(/bitrix/images/brono.one/global-menu-brono.png) no-repeat scroll; background-position: center center; background-size: contain; height: 20px; width: 20px; left: 8px; top: 2px; } .bx-core-popup-menu-item:hover .adm-menu-brono, .bx-core-popup-menu-item-opened .adm-menu-brono { background: rgba(0, 0, 0, 0) url(/bitrix/images/brono.one/global-menu-brono-hover.png) no-repeat scroll; background-position: center center; background-size: contain; } .hover-up { transition: transform .3s ease } .hover-up:hover { transform: translateY(-3%); will-change: transform } .hover-down { transition: transform .3s ease } .hover-down:hover { transform: translateY(3%); will-change: transform } .hover-scale, .hover-scale:hover { transition: transform .3s ease } .hover-scale:hover { transform: scale(1.1); will-change: transform } .hover-rotate-end, .hover-rotate-end:hover { transition: transform .3s ease } .hover-rotate-end:hover { transform: rotate(4deg); will-change: transform } .hover-rotate-start { transition: transform .3s ease } .hover-rotate-start:hover { transform: rotate(-4deg); transition: transform .3s ease; will-change: transform } /* DROPDOWN */ .dropdown-item { border-radius: 6px; /* чуть скругляем */ transition: background .15s; /* плавный эффект */ } .dropdown-item:hover { background: rgba(0, 0, 0, 0.05); /*background: rgba(255, 255, 255, 0.08); !* светлый оттенок для dark-theme *!*/ } /* =========================== */ /* FAVORITE /* =========================== */ .favorite-toggle { --fav-size: 16px; --fav-hover-scale: 1.12; --fav-press-scale: 0.92; border: 0; background: transparent; padding: 0; line-height: 0; cursor: pointer; display: inline-grid; place-items: center; border-radius: 999px; outline: none; /* smooth overall feel */ transition: transform 160ms cubic-bezier(.2,.8,.2,1); } .favorite-toggle:focus-visible { outline: 2px solid rgba(13, 110, 253, 0.35); outline-offset: 3px; } /* Stack two icons in one place */ .favorite-toggle .favorite-item { grid-area: 1 / 1; width: var(--fav-size); height: var(--fav-size); display: inline-grid; place-items: center; transform-origin: 50% 50%; will-change: transform, opacity, filter; transition: opacity 120ms ease, transform 180ms cubic-bezier(.2,.8,.2,1), filter 180ms ease; } /* SVG sizing */ .favorite-toggle svg { width: 100%; height: 100%; display: block; } /* State: only active icon is visible */ .favorite-toggle .favorite-item { opacity: 0; transform: scale(0.88); } .favorite-toggle .favorite-item.is-active { opacity: 1; transform: scale(1); } /* Hover: subtle lift + glow (applies to both, but visible only for active) */ .favorite-toggle:hover .favorite-item.is-active { transform: scale(var(--fav-hover-scale)); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12)); } /* Press: quick “tap” feel */ .favorite-toggle:active .favorite-item.is-active { transform: scale(var(--fav-press-scale)); filter: none; } /* Click animation when state toggles (JS adds .is-bumped) */ .favorite-toggle.is-bumped .favorite-item.is-active { animation: fav-bump 260ms cubic-bezier(.2,.9,.2,1); } @keyframes fav-bump { 0% { transform: scale(0.92); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } /* Optional: loading state */ .favorite-toggle.is-loading { cursor: progress; opacity: 0.75; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .favorite-toggle, .favorite-toggle .favorite-item { transition: none; } .favorite-toggle.is-bumped .favorite-item.is-active { animation: none; } } /* ====================================================================== */ /* Мобильные устройства и режим приложения */ /* */ /* Блок собран из правил, каждое из которых чинит конкретную поломку на */ /* телефоне, а не «улучшает адаптивность вообще». Рядом с каждым — */ /* что именно ломается без него. */ /* ====================================================================== */ :root { /* Безопасные отступы одним именем: в вёрстке они нужны в десятке мест, а env() внутри calc() читается плохо. */ --br-safe-top: env(safe-area-inset-top, 0px); --br-safe-right: env(safe-area-inset-right, 0px); --br-safe-bottom: env(safe-area-inset-bottom, 0px); --br-safe-left: env(safe-area-inset-left, 0px); } html { /* iOS увеличивает шрифт при повороте в альбомную ориентацию, если этого не запретить. Именно шрифт, а не масштаб страницы: вёрстка остаётся прежней, а текст в ней внезапно крупнее. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* Серый прямоугольник поверх всего, по чему тапнули, — наследие Android. Состояния нажатия рисует Bootstrap, дублировать их системной подсветкой незачем. */ -webkit-tap-highlight-color: transparent; } /* Прокрутка внутри страницы не должна уводить за собой всю страницу: без этого свайп в конце списка тянет за собой фон, а в установленном приложении вызывает «потянуть для обновления» посреди формы. */ .layout-scroll, [data-scroll="content"] { overscroll-behavior-y: contain; } /* Высота экрана. 100vh на мобильных считается от экрана без учёта адресной строки, поэтому блок «на весь экран» оказывается выше видимой области ровно на её высоту. dvh считает по факту; vh остаётся запасным для браузеров постарше. */ .min-vh-100 { min-height: 100vh; min-height: 100dvh; } /* Цели касания. 44 CSS-пикселя — минимум, ниже которого промахи становятся заметны. Правило не трогает кнопки внутри текста и таблиц: там своя плотность, и растягивать их значит сломать строку. */ @media (pointer: coarse) { .btn, .nav-link, .form-control, .form-select, .dropdown-item { min-height: 44px; } .btn-sm { min-height: 38px; } } /* Поля ввода. Safari на iOS увеличивает страницу при фокусе в поле, если его шрифт меньше 16 px, и обратно уже не возвращает. Единственное лекарство — не опускаться ниже 16 px на устройствах с касанием. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select { font-size: max(16px, 1rem); } } /* Убирает задержку распознавания двойного тапа на элементах, которым масштабирование по двойному тапу не нужно. */ .btn, .nav-link, a[role="button"], [data-brono-pwa-install] { touch-action: manipulation; } /* Прокрутка к якорю не должна прятать цель под липкой шапкой. */ html { scroll-padding-top: calc(4rem + var(--br-safe-top)); } /* ---------------------------------------------------------------------- */ /* Режим приложения */ /* ---------------------------------------------------------------------- */ /* Открытое с домашнего экрана приложение живёт под строкой состояния: apple-mobile-web-app-status-bar-style=black-translucent отдаёт странице всю высоту экрана, включая вырез. Отступы приходится вернуть самим. */ html[data-brono-display="standalone"] body { padding-top: var(--br-safe-top); padding-bottom: var(--br-safe-bottom); } html[data-brono-display="standalone"] .layout__footer { padding-bottom: var(--br-safe-bottom); } /* В приложении нет адресной строки, а вместе с ней — привычного способа уйти назад. Кнопку для этого показывает вёрстка, а не браузер. Правило одно и оно только прячет. Показывать нечем и не нужно: когда селектор не совпал, элемент отображается так, как его сверстали. Пара правил «спрятать / показать» здесь не работает вовсе — утилиты Bootstrap объявлены через !important, поэтому display: none без !important они бьют, а display: revert !important в ответ ломает d-flex на самом элементе. */ html:not([data-brono-display="standalone"]) [data-brono-only="standalone"] { display: none !important; } html[data-brono-display="standalone"] [data-brono-only="browser"] { display: none !important; } /* Установка предлагается только там, где она возможна: кнопку показывает pwa.js, а не медиазапрос. */ html[data-brono-display="standalone"] [data-brono-pwa-install] { display: none !important; } /* ---------------------------------------------------------------------- */ /* Состояние сети */ /* ---------------------------------------------------------------------- */ /* Полоса «нет сети». Атрибут ставит pwa.js; вёрстке остаётся показать. Прячем тем же способом, что и блоки режима показа, — одним правилом. */ html:not([data-brono-online="no"]) [data-brono-only="offline"] { display: none !important; } html[data-brono-online="no"] [data-brono-only="online"] { display: none !important; } /* «Эта страница — сохранённая копия». Вопрос отдельный от наличия сети: недоступен может быть один сервер, и тогда navigator.onLine отвечает «сеть есть», а страница всё равно пришла из кеша. Отвечает здесь service worker, pwa.js переносит его ответ в атрибут. */ html:not([data-brono-page="cached"]) [data-brono-only="cached"] { display: none !important; } /* ---------------------------------------------------------------------- */ /* Плашки PWA */ /* ---------------------------------------------------------------------- */ /* Встроенные сообщения pwa.js: предложение обновиться и подсказка для iOS. Тема может перехватить событие и нарисовать своё — тогда этот блок не появится вовсе. */ .brono-pwa-plate { position: fixed; z-index: 1080; left: calc(0.75rem + var(--br-safe-left)); right: calc(0.75rem + var(--br-safe-right)); bottom: calc(0.75rem + var(--br-safe-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 32rem; margin-inline: auto; padding: 0.75rem 0.875rem; border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15)); border-radius: 0.75rem; background: var(--bs-body-bg, #fff); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15); } .brono-pwa-plate__text { flex: 1 1 12rem; font-size: 0.9375rem; } @media (prefers-reduced-motion: no-preference) { .brono-pwa-plate { animation: brono-pwa-plate-in 200ms ease-out; } } @keyframes brono-pwa-plate-in { from { opacity: 0; transform: translateY(0.5rem); } } /* End */ /* /bitrix/templates/brono.one/template_styles.css?178723226613329 */