/* base.css — защищённые пользовательские стили (не удаляются при full_replace) */ /* Запрет авто-масштабирования текста на iOS/Android (font boosting): сохраняет пропорции font-size/line-height при повороте и зумме страницы. -webkit- вариант уже есть в webflow-CSS; здесь дублируем стандартное свойство text-size-adjust для актуальных браузеров (защищено от full_replace). */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Скрываем Webflow-бейдж, даже если JS создаст элемент */ .w-webflow-badge, a[href*="webflow.com?utm_campaign=brandjs"], a[href*="webflow.com"] img[src*="webflow-badge"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* SVG-лого: анимация бегущего градиента (shimmer) */ .svg_logo path { fill: url(#shimmer); } /* ========================================================================= Плавный fade-переход между страницами (modules/page-transition.js) - html.js-page-fade body: страница стартует прозрачной (скрипт в ставит класс до первой отрисовки — без белого мигания при навигации); - .page-visible: страница проявилась (fade-in 300 мс); - при клике по внутренней ссылке класс снимается — body гаснет (fade-out 300 мс). Стили оверлея с логотипом инъектирует сам модуль (самодостаточность). ========================================================================= */ html.js-page-fade body { opacity: 0; transition: opacity 0.3s ease; } html.js-page-fade.page-visible body { opacity: 1; } /* ========================================================================= Canvas-секвенции (GSAP Scroll) ========================================================================= */ /* Основные размеры и позиционирование .start_sequence_wrap задаются в miramar-dev.webflow.shared.98f698e30.css (height:100vh; position:absolute; inset:0% 0% auto). Здесь — только дополнения, не переопределяющие webflow-стили. */ .sequence_wrap { /* overflow уже задан в webflow-стилях, дублируем для надёжности */ overflow: hidden; } /* Canvas внутри секвенции — основные стили задаются инлайново в JS (sequenceCanvas.js), здесь только резервные. */ .sequence_wrap canvas { display: block; /* Поднимаем canvas на отдельный GPU-слой */ will-change: transform; image-rendering: auto; } /* ========================================================================= Третья секвенция (floor) — мобильные стили, аналогичные .floor_image На десктопе canvas заполняет контейнер (width:100%; height:100%; inset:0). На мобильных — выходит за границы (170vw), центрирован, с aspect-ratio 16/9. ========================================================================= */ @media screen and (max-width: 991px) { #sequence-canvas_02 canvas { width: 170vw !important; min-width: 170vw; height: auto !important; aspect-ratio: 16 / 9; /* Сбрасываем inset:0 — иначе top/bottom растянут canvas на всю высоту контейнера */ inset: auto !important; /* Центрируем canvas в контейнере (как .floor_image внутри flex-контейнера) */ left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } } /* ========================================================================= Scroll Lock — блокировка скролла на время загрузки Компенсация ширины скроллбара (padding-right) задаётся динамически в JS, чтобы избежать рывка контента при исчезновении скроллбара. ========================================================================= */ html.scroll-locked { overflow: hidden !important; } html.scroll-locked body { overflow: hidden !important; } /* Блокируем touch-скролл на мобильных */ html.scroll-locked, html.scroll-locked body { touch-action: none; overscroll-behavior: none; } /* ========================================================================= Velvet3D Canvas — бархатное 3D-полотно (Three.js) ========================================================================= */ .velvet3d_global { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .velvet3d_global canvas { display: block; width: 100%; height: 100%; /* Выносим WebGL-канвас на отдельный GPU-слой */ will-change: transform; } /* Совместимость со старыми контейнерами частиц (теперь тоже velvet3d) */ .particles_-anvas canvas { display: block; width: 100%; height: 100%; } /* ========================================================================= ОПТИМИЗАЦИЯ GPU — СНИЖЕНИЕ НАГРУЗКИ НА GPU И RAM ========================================================================= */ /* --- 2. .blure_layer_wrap — уменьшаем backdrop-filter + аппаратное ускорение --- */ .blure_layer_wrap { /* Предварительно выносим на GPU — избегаем пересоздания слоя при скролле */ will-change: transform, filter; /* Изолируем перерасчёт layout внутри этого элемента */ contain: layout style paint; } /* --- 3. Все 100vh sticky-контейнеры — предвыделение GPU-слоя + изоляция --- */ .stiky_wrap, .apart_sti-ky, .gallery_sticky, .floor_sticky, .location_sticky, .profit_sticky, .partners_sticky, .build_sticky, .slider_wrap, .preview_card._04 { will-change: transform; /* Изоляция layout: изменения внутри не trigger'ят перерасчёт всей страницы */ contain: layout style; } /* --- 4. content-visibility: auto — браузер пропускает рендер невидимых sticky-секций --- */ /* Не применяем к .stiky_wrap (первая секция, всегда видна при загрузке) */ .apart_sti-ky, .gallery_sticky, .floor_sticky, .location_sticky, .profit_sticky, .partners_sticky, .build_sticky { content-visibility: auto; /* Подсказка браузеру о размере — скроллбар не дёргается */ contain-intrinsic-size: auto 100vh; } .ma_photo_wrap { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer / Edge Legacy */ } .ma_photo_wrap::-webkit-scrollbar { display: none; /* Chrome / Safari / Opera */ } /* ========================================================================= Overlay Scrollbar — кастомный скроллбар поверх контента (JS) ========================================================================= Нативный скроллбар скрыт во всех браузерах. Кастомный скроллбар (position: fixed) создаётся и управляется модулем overlayScrollbar.js. Он не резервирует место во вьюпорте — полностью накладывается на контент. ========================================================================= */ /* --- Скрываем нативный скроллбар во всех браузерах --- */ html { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / Edge Legacy */ } html::-webkit-scrollbar { display: none; /* Chrome / Safari / Opera */ } /* --- Кастомный скроллбар — position: fixed, не резервирует место --- */ .custom-scrollbar { position: fixed; top: 0; right: 0; width: 6px; height: 100%; z-index: 9999; pointer-events: none; } .custom-scrollbar__track { width: 100%; height: 100%; position: relative; } .custom-scrollbar__thumb { position: absolute; top: 0; left: 0; width: 100%; min-height: 40px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 255, 255, 0.05); background-clip: padding-box; pointer-events: auto; cursor: pointer; transition: background 0.2s, width 0.15s, border-radius 0.15s; } .custom-scrollbar__thumb:hover { background: rgba(255, 255, 255, 0.55); width: 8px; border-radius: 4px; } .custom-scrollbar__thumb.is-dragging { background: rgba(255, 255, 255, 0.7); width: 8px; border-radius: 4px; transition: none; } /* Скрываем кастомный скроллбар, когда страница заблокирована */ html.scroll-locked .custom-scrollbar { display: none; } /* ========================================================================= Navbar Progressive Blur — нарастающий снизу вверх backdrop-blur без чёткой границы снизу ========================================================================= */ /* --- Стеклянный слой с progressive blur --- */ .navbar_glass { position: absolute; inset: 0; z-index: 0; /* Максимальное размытие фона (20–24 px) */ backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); /* Альфа-маска: blur плавно затухает книзу без резких границ */ mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 100% ); /* Лёгкий градиент прозрачности и оттенка поверх стекла для глубины */ background: linear-gradient( to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.11) 30%, rgba(0, 0, 0, 0.04) 60%, transparent 100% ); pointer-events: none; } /* --- Очень слабый шум (1–2% opacity) — убирает «цифровую» стерильность стекла --- */ .navbar_glass::after { content: ''; position: absolute; inset: 0; /* SVG-шум через data-URI: fractalNoise с мелкими октавами */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; /* 1.5% непрозрачности — едва заметно, но достаточно чтобы убрать ощущение «идеально гладкого» стекла */ opacity: 0.015; /* Та же маска, что и у стеклянного слоя — шум тоже затухает книзу */ mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.85) 25%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 100% ); pointer-events: none; } /* Контент navbar должен быть поверх стекла и шума */ .nav_wrap { position: relative; z-index: 1; } /* ========================================================================= SVG hover-анимация (modules/svg-hover-animation.js) Интерактивные path и полноэкранный оверлей-маска (затемнение всего SVG, кроме path под курсором). Живут в base.css (защищённая зона), чтобы не теряться при full_replace Webflow-CSS. ========================================================================= */ /* Интерактивные path-корпуса: изначально прозрачны, реагируют на курсор */ .path_gen { color: #fff0; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; transition: fill .35s, opacity .35s; } .path_gen:focus, .path_gen:focus-visible, .path_gen:active, .path_flat:focus, .path_flat:focus-visible, .path_flat:active { outline: none; stroke: none; } /* Интерактивные этажи корпуса: общий модуль владеет состоянием, base.css — только визуальным переходом. */ .corpus_svg .path_floor { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; transition: fill .25s ease, opacity .25s ease; } .corpus_svg .path_floor:hover, .corpus_svg .path_floor.is-active, .corpus_svg .path_floor.is-hovered, .corpus_svg .path_floor.is-selected, .corpus_svg .path_floor:focus-visible { fill: rgba(255, 255, 255, .22); } .corpus_svg .path_floor_inactive, .corpus_svg [data-floor-disabled="true"] { cursor: default; pointer-events: none; } /* Затемнённые (неактивные) path */ .path_gen.is-dimmed { opacity: .65; } /* Активный path при наведении */ [data-svg-hover] .is-active { opacity: 1; } /* Градиент-слой активного path (клонируется модулем в SVG) */ .svg-hover-gradient { pointer-events: none; transition: opacity .3s ease; } /* Полноэкранный оверлей затемнения — «маска» с дыркой под активный path */ .svg-hover-overlay { pointer-events: none; transition: opacity .3s ease; } a, .arrow_appart_right, .arrow_appart_left, .pin_content_wrap, .path_flat, .location_button, .burger_wrap, .menu_button, .close_cross_menu, .close_cross, .button { -webkit-tap-highlight-color: transparent; } /* ===== Miramar runtime: скрытие CTA этажа до выбора квартиры + снятие обводки полигонов ===== */ section.floor_plan_section[data-floor-plan] .apart_mob[hidden], section.floor_plan_section[data-floor-plan] .apart_mob:not(.is-visible) { display: none !important; } [data-floor-plan] svg [data-apartment-id], [data-floor-plan] svg [data-apartment-id]:hover, [data-floor-plan] svg [data-apartment-id]:focus, [data-floor-plan] svg [data-apartment-id]:focus-visible, [data-floor-plan] svg [data-apartment-id]:active { outline: none !important; stroke: none !important; filter: none; } /* floor: данные квартиры (flat_data_preview_car) на десктопе скрыты, пока нет hover/фокуса на SVG-полигоне квартиры. Webflow-класс .flat_data_preview_car { display:flex } перебивает нативный [hidden], поэтому скрытие закреплено здесь, в защищённом base.css, через runtime-состояние .is-visible (добавляется/снимается в floor.blade.php). На мобильных (тах/выбор по тапу) блок не скрываем. */ @media (min-width: 992px) { section.floor_plan_section[data-floor-plan] .flat_data_preview_car[data-apartment-preview]:not(.is-visible) { display: none !important; } }