html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* ===== Лендинг «Фазенда Горьковская» ===== */
html {
scroll-behavior: smooth;
/* Горизонтальная ось страницы заперта наглухо. Reveal-блоки в стартовом положении
уезжают на 100vw вправо; от растягивания страницы их держит overflow-x: clip на
секции, но clip поддерживается только с Safari 16 — в более ранних он игнорируется,
и страница становилась шире экрана. Пока показ был одноразовым, это почти не
проявлялось; с повторным показом блоки регулярно возвращаются в стартовое положение
(например, когда раскрытие аккордеона меняет высоту страницы) — и страницу дёргало вбок.
overflow-x на html пробрасывается на вьюпорт: отдельный скроллер не создаётся,
вертикальная прокрутка, якоря и position: fixed работают как прежде. */
overflow-x: hidden;
/* Двойной тап больше не масштабирует страницу. Ловилось это на счётчиках гостей и услуг:
два быстрых нажатия по «+» или «−» — обычное дело, а браузер понимает их как жест зума
и дёргает весь экран. В остальных местах сайта пары быстрых тапов по одной точке просто
не случается, поэтому там проблема и не проявлялась.
manipulation оставляет прокрутку и пинч двумя пальцами, убирая только двойной тап.
Свойство не наследуется, но ограничение предка распространяется на потомков, поэтому
правила на html достаточно; элементы со своим touch-action (лента полноэкранного
просмотра — pan-x, увеличенный кадр — none) продолжают работать как задумано. */
touch-action: manipulation;
}
/* Карусель домов: горизонтальная прокрутка без видимого скроллбара */
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Градиентная обводка карточек домов: белая (#FFFFFF) в левом-верхнем углу,
затухает к правому-нижнему и сливается с фоном секции.
Рисуется псевдоэлементом + маской — это единственный способ дать
градиентную рамку на скруглённом блоке (border-image не уважает border-radius). */
.card-edge {
position: relative;
--edge-r: 14px; /* базовый радиус скругления карточки (rounded-[14px]) */
--edge-bg: rgb(46 58 36); /* цвет фона секции, в который затухает обводка (forest) */
--edge-hi-pos: 0%; /* позиция стопа белого блика на градиенте */
}
.card-edge::before {
content: "";
position: absolute;
inset: -1.5px; /* кольцо выходит за край карточки → outside-обводка */
border-radius: calc(var(--edge-r) + 1.5px); /* = скругление карточки + смещение, концентрично */
padding: 1.5px; /* толщина обводки */
/* Сплошное затухание по диагонали 225°: от полупрозрачного белого в правом-верхнем
углу (0%) к цвету фона секции в левом-нижнем (100%). */
background: linear-gradient(225deg, #ffffffa3 var(--edge-hi-pos), var(--edge-bg) 100%);
/* Маска оставляет видимой только рамку (кольцо), вырезая внутреннюю область */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ── Лендинг: плавное появление блоков по мере прокрутки (js/landing.js) ──
Элементы с [data-reveal] стартуют невидимыми и всплывают, когда IntersectionObserver
вешает .is-revealed. Скрытые стартовые состояния включаются только классом
has-reveal на (его ставит инлайн-скрипт в App.razor) — без JS контент виден сразу.
Показ не одноразовый: уехавший из вида блок сбрасывается и появляется снова (landing.js). */
html.has-reveal [data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s ease-out, transform .8s cubic-bezier(.22, .61, .36, 1);
/* --rd — сдвиг старта блока. Нужен там, где несколько соседних блоков попадают
в экран разом (низ футера, верх страницы дома): каждому свой сдвиг, и показ
читается как последовательность, а не как одна вспышка. По умолчанию 0.
Для блоков с каскадом (data-reveal="items") та же переменная сдвигает и детей —
смысл один: «когда блок начинает появляться». */
transition-delay: var(--rd, 0ms);
}
html.has-reveal [data-reveal="fade"] { transform: none; } /* контейнеры-обёртки: без сдвига */
/* Варианты "right"/"left": блок влетает из-за края экрана — длинный путь (100vw),
кривая с сильным торможением в конце даёт ощущение инерции. Сам [data-reveal]
здесь остаётся статичным (IntersectionObserver считает пересечение по
трансформированному боксу — унесённый за экран элемент «не виден» и никогда
не сработал бы), едет вложенный [data-reveal-slide]. Секции с такими блоками
нужен overflow-x-clip, иначе стартовое положение растянет страницу вширь.
Вариант "items" — контейнер только триггер: сам не движется, едут дочерние
[data-reveal-item] (первый экран, где анимация задана порядком, а не блоком). */
html.has-reveal [data-reveal="right"],
html.has-reveal [data-reveal="left"],
html.has-reveal [data-reveal="items"] {
opacity: 1;
transform: none;
transition: none;
}
html.has-reveal [data-reveal="right"] [data-reveal-slide],
html.has-reveal [data-reveal="left"] [data-reveal-slide] {
opacity: 0;
transition: opacity .55s ease-out, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
html.has-reveal [data-reveal="right"] [data-reveal-slide] { transform: translateX(100vw); }
html.has-reveal [data-reveal="left"] [data-reveal-slide] { transform: translateX(-100vw); }
html.has-reveal [data-reveal="right"].is-revealed [data-reveal-slide],
html.has-reveal [data-reveal="left"].is-revealed [data-reveal-slide] {
opacity: 1;
transform: none;
}
html.has-reveal [data-reveal].is-revealed {
opacity: 1;
transform: none;
}
/* Разделительная линия «прорастает» слева направо после появления блока. */
html.has-reveal [data-reveal] [data-reveal-rule] {
transform: scaleX(0);
transform-origin: left center;
transition: transform .9s cubic-bezier(.65, 0, .35, 1) .35s;
}
html.has-reveal [data-reveal].is-revealed [data-reveal-rule] { transform: scaleX(1); }
/* Каскад дочерних элементов: каждый следующий (--i из разметки) чуть позже
предыдущего. По умолчанию всплытие снизу; вариант "right" — выезд справа
(фото карусели).
Тайминг настраивается на контейнере: --rd — пауза до первого элемента,
--rs — шаг между соседями. Одинаковый --i у двух элементов = выходят вместе. */
html.has-reveal [data-reveal] [data-reveal-item] {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s ease-out, transform .6s cubic-bezier(.22, .61, .36, 1);
transition-delay: calc(var(--rd, 150ms) + var(--i, 0) * var(--rs, 90ms));
}
html.has-reveal [data-reveal] [data-reveal-item="right"] { transform: translateX(56px); }
html.has-reveal [data-reveal] [data-reveal-item="left"] { transform: translateX(-56px); }
/* Вариант "scale" — проявление с лёгким увеличением (акцент на кнопке-CTA). */
html.has-reveal [data-reveal] [data-reveal-item="scale"] { transform: scale(.88); }
/* Вариант "fade" — каскад только прозрачностью, без сдвига. Обязателен для элементов
внутри scroll-snap-контейнеров (фото карусели): transform на snap-элементах
заставляет браузер пересчитывать snap-геометрию на каждом кадре → дёрганье. */
html.has-reveal [data-reveal] [data-reveal-item="fade"] { transform: none; }
html.has-reveal [data-reveal].is-revealed [data-reveal-item] {
opacity: 1;
transform: none;
}
/* Пользователь просил поменьше движения — показываем всё сразу и без анимаций. */
@media (prefers-reduced-motion: reduce) {
html.has-reveal [data-reveal],
html.has-reveal [data-reveal] [data-reveal-slide],
html.has-reveal [data-reveal] [data-reveal-item],
html.has-reveal [data-reveal] [data-reveal-rule] {
opacity: 1;
transform: none;
transition: none;
}
}
/* ── Меню-бургер: пункты выходят лесенкой ──
Состояние берём прямо у чекбокса-переключателя (#site-nav-toggle) — панель меню его
следующий сосед, поэтому JS не нужен, как и всему меню. Задержка растёт по --i из разметки.
При закрытии правило с задержкой перестаёт действовать, и пункты гаснут разом вместе
с панелью — закрытие должно быть мгновенным, лесенка нужна только на открытии. */
[data-nav-item] {
opacity: 0;
transform: translateY(14px);
transition: opacity .3s ease-out, transform .35s cubic-bezier(.22, .61, .36, 1);
}
#site-nav-toggle:checked ~ [data-nav-panel] [data-nav-item] {
opacity: 1;
transform: none;
transition-delay: calc(120ms + var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
[data-nav-item] { opacity: 1; transform: none; transition: none; }
#site-nav-toggle:checked ~ [data-nav-panel] [data-nav-item] { transition-delay: 0s; }
}
/* ── Подсказка о свайпе: стрелки по фактическому положению ленты (js/swipe-hint.js) ──
Скрипт вешает на подсказку can-left/can-right (куда ещё можно листать) и is-idle
(лента помещается целиком — листать нечего). Стрелки гасим прозрачностью, из потока
не убираем: иначе текст подсказки прыгал бы вбок при каждом свайпе.
Пока скрипт не отработал (или JS выключен) — видны обе стрелки. */
[data-swipe-arrow] { transition: opacity .25s ease; }
[data-swipe-hint][data-swipe-bound] [data-swipe-arrow] { opacity: 0; }
[data-swipe-hint].can-left [data-swipe-arrow="left"],
[data-swipe-hint].can-right [data-swipe-arrow="right"] { opacity: 1; }
[data-swipe-hint].is-idle { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
[data-swipe-arrow] { transition: none; }
}
/* ── Первый экран: «живой» кадр, когда видео не пускают ──
Класс is-video-blocked ставит js/hero-video.js на секцию после отказа video.play()
(энергосбережение iOS запрещает автозапуск). Проявляется запасной [data-hero-fallback]
— тот же снимок, что и poster, — и очень медленно ходит зумом туда-обратно: экран не
выглядит застывшей картинкой, но внимания на себя не тянет. Секция с overflow-hidden,
поэтому увеличенный кадр не растянет страницу.
Анимируем именно ![]()
, а НЕ