/* Базовый reset/типографика нового дизайна. Аналог общих стилей, подключаемых в HostCMS через Core_Page::instance()->prependCss(...) на уровне корневого макета. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Атрибут hidden должен скрывать элемент даже если компонент задаёт display:flex/grid (иначе .service-card/.room-card { display:flex } перебивает браузерное [hidden]). */ [hidden] { display: none !important; } body { background: var(--bg, #FFFFF1); color: var(--text, #254D32); font-family: var(--font-body, system-ui, sans-serif); font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3 { margin: 0; font-family: var(--font-head, inherit); line-height: 1.1; } button { font: inherit; cursor: pointer; } .container { width: min(100% - 48px, var(--container, 1600px)); margin-inline: auto; } /* ---------- Переходы по якорям (#features, #stay, #leisure, …) ---------- scroll-behavior: цель доезжает анимированно, а не прыжком — в том числе по клику в якорь-меню главной (.anchornav) и по «Заказать звонок» → #callback. scroll-padding-top: шапка .site-header — sticky (бегущая строка + навбар), поэтому без отступа блок встаёт вплотную к верху окна и наполовину уходит ПОД шапку. --header-h ставит app.js по фактической высоте шапки (она разная на брейкпоинтах); значение во fallback — примерная высота на десктопе, на случай если JS не выполнился. +16px — воздух между шапкой и заголовком. */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 118px) + 16px); } /* ============================================================ Плавный переход между страницами — View Transitions API (MPA). Правило живёт в base.css → грузится на каждой странице, значит опт-ин стоит и на уходящей, и на приходящей странице (условие кросс-документного перехода). Браузер держит снапшот старой страницы, пока новая не готова отрисовать первый кадр, и делает кросс-фейд — этим частично скрывается «мигание» при загрузке. Неподдерживающие браузеры (Safari < 18.2, Firefox без флага) просто переходят как раньше — без анимации и без ошибок. */ @view-transition { navigation: auto; } /* Шапка не мигает в кросс-фейде: снимается отдельным снапшотом и остаётся на месте, пока «тело» страницы плавно сменяется. Имя должно быть уникальным на странице — header ровно один. */ .site-header { view-transition-name: site-header; } /* Небольшая длительность — переход остаётся быстрым, не мешает клику. */ ::view-transition-group(root) { animation-duration: .22s; } /* Уважаем системную настройку «уменьшить движение». */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } /* Прыжок вместо анимации — отступ под шапку при этом сохраняется. */ html { scroll-behavior: auto; } } /* ============================================================ Заставка-оверлей + «оседание» контента (approach B). Пока страница догружает шрифты и фото — область контента накрыта кремовой заставкой; по window.load она тает, а секции
всплывают снизу с лёгким сдвигом («оседание»). Прячет pop-in фото, которого кросс-фейд из A (до первого кадра) не закрывает. CSS живёт в base.css (render-blocking, в ) — заставка успевает примениться до первой отрисовки, без вспышки контента. */ #page-loader { position: fixed; inset: 0; z-index: 40; /* НИЖЕ sticky-шапки (.site-header z-index:50) */ display: grid; place-items: center; background: var(--bg, #FFFFF1); opacity: 0; visibility: hidden; /* по умолчанию скрыт — если JS отключён */ transition: opacity .34s ease, visibility 0s linear .34s; } .page-loader__mark { font-family: var(--font-head, inherit); font-size: clamp(28px, 6vw, 56px); font-weight: 800; letter-spacing: .04em; color: var(--text, #254D32); opacity: .85; } /* Заставка видна только при работающем JS (класс .js ставит inline-скрипт в ). Переход на первом кадре не играет (transition не запускается на начальном рендере) — заставка сразу накрывает, без вспышки. Снятие и страховка от «застревания» — в том же inline-скрипте (см. header.php). */ .js #page-loader { opacity: 1; visibility: visible; } #page-loader.is-hidden { opacity: 0; visibility: hidden; } /* JS: по load / таймауту / bfcache */ /* «Оседание» контента после снятия заставки делает не этот файл, а сквозная анимация появления (assets/css/reveal.css + assets/js/reveal.js): она ждёт класса .is-ready на и проявляет блоки первого экрана волной, а то, что ниже, — по мере прокрутки. Раньше здесь всплывали секции целиком (@keyframes pl-rise) — правило убрано, чтобы блок не анимировался дважды. Если JS не сработал, контент просто виден: скрывает только reveal. */ /* «Уменьшить движение»: заставка тает быстрее, анимации появления не будет вовсе (reveal.js в этом режиме не размечает страницу). */ @media (prefers-reduced-motion: reduce) { #page-loader.is-hidden { transition: opacity .2s ease, visibility 0s linear .2s; } }