/* Start:/local/templates/arkhyz_royal/template_styles.css?179139994642582*/
/* ==========================================================================
Arkhyz Royal Resort & SPA — template_styles.css
Подключается Битриксом автоматически через $APPLICATION->ShowHead()
Брейкпоинты макета: 393 / 834 / 1440 / 1920
Mobile First: базовые стили = 393, расширение через min-width:
52.125em = 834px
90em = 1440px
120em = 1920px
Промежуточные размеры шрифтов и отступов считаются через clamp()
от 393px (24.5625rem) до 1920px (120rem).
========================================================================== */
/* ==========================================================================
1. Шрифт: Manrope Variable (один файл на все начертания 200–800)
Файлы лежат в корне сайта: /fonts/manrope-400|500|600.woff2.
========================================================================== */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/manrope-400.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/manrope-500.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/manrope-600.woff2") format("woff2");
}
/* ==========================================================================
2. Reset
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
line-height: 1.5;
}
img,
picture,
video,
svg {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul[class],
ol[class] {
padding: 0;
list-style: none;
}
/* ==========================================================================
3. Токены (из Figma: стили текста + Selection colors)
========================================================================== */
:root {
/* --- Цвета: основа --- */
--color-bg: #f3f2ef; /* фон страницы */
--color-surface: #ffffff; /* карточки, поля */
--color-text: #1b1810; /* основной текст */
--color-text-inverse: #ffffff; /* текст на фото и тёмном фоне */
/* --- Цвета: акцент (золото) --- */
--color-accent: #b49464;
--color-accent-hover: #9c7d4f; /* в макете нет, подобран темнее на ~10% */
/* --- Цвета: зелёная гамма (тёмные секции) --- */
--color-green-900: #0d150b;
--color-green-800: #384435; /* фон тёмных панелей (СПА, услуги) */
--color-green-700: #455042;
/* --- Цвета: нейтральные бежевые/серые --- */
--color-neutral-100: #f1f1f1;
--color-neutral-200: #ece9e4;
--color-neutral-300: #e0dcd6;
--color-neutral-400: #d3cdc3;
--color-neutral-500: #d9d9d9;
/* --- Цвета: прозрачности --- */
--color-border: rgb(27 24 16 / 0.2); /* 1B1810 / 20% */
--color-white-15: rgb(255 255 255 / 0.15);
--color-white-35: rgb(255 255 255 / 0.35);
--color-white-55: rgb(255 255 255 / 0.55);
/* --- Шрифт --- */
--font-base: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--tracking-tight: -0.03em; /* letter-spacing -3% у всех заголовков */
/* --- Типографика: fluid 393 → 1920 ---
Значения 1920 из Figma (стили *desc).
Мобильные значения — предварительные, уточним по макету 393. */
--fs-display: clamp(2.0625rem, 0.781rem + 5.215vw, 3.5rem); /* 33 → 56 до 834, дальше см. медиа ниже */
--fs-lead: clamp(1.25rem, 0.928rem + 1.31vw, 2.5rem); /* 20 → 40 Body2 desc, крупный абзац */
--fs-h2: clamp(1.5rem, 1.307rem + 0.786vw, 2.25rem); /* 24 → 36 H2 desc */
--fs-h3: clamp(1.25rem, 1.121rem + 0.524vw, 1.75rem); /* 20 → 28 FAQ desc, заголовки карточек */
--fs-accent: clamp(1.0625rem, 0.998rem + 0.262vw, 1.3125rem); /* 17 → 21 H3 desc gold */
--fs-body: clamp(0.9375rem, 0.889rem + 0.196vw, 1.125rem); /* 15 → 18 Body desc */
--fs-small: 0.875rem; /* 14 подписи, метки */
--lh-heading: 1.2;
--lh-lead: 1.32;
--lh-body: 1.53;
/* --- Отступы --- */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2.5rem;
--space-xl: 4rem;
--section-gap: clamp(3.75rem, 2.785rem + 3.929vw, 7.5rem); /* 60 → 120 между секциями */
/* --- Сетка ---
Контент 1700px + поля 110px = 1920.
Широкие панели (тёмные секции, фото-баннеры) стоят с отступом 25px от края. */
--container-width: 106.25rem; /* 1700px */
--container-gutter: clamp(1rem, -0.512rem + 6.156vw, 6.875rem); /* 16 → 110 */
--panel-inset: clamp(0.5rem, 1.3vw, 1.5625rem); /* 8 → 25 */
/* --- Скругления (уточним по первым блокам) --- */
--radius-s: 0.5rem;
--radius-m: 1rem;
--radius-l: 1.25rem;
--radius-xl: 2rem;
--radius-pill: 62.5rem;
/* --- Кнопки (высота 44 → 51 и 48 → 65, текст 13 → 16) --- */
--button-height: clamp(2.75rem, 2.6375rem + 0.458vw, 3.1875rem);
--button-height-l: clamp(3rem, 2.725rem + 1.113vw, 4.0625rem);
--fs-button: clamp(0.8125rem, 0.764rem + 0.196vw, 1rem);
/* --- Анимации --- */
--transition-fast: 0.35s ease; /* плавно: отель премиум-класса */
--transition-smooth: 0.9s cubic-bezier(0.33, 0, 0.2, 1); /* появление блоков, крупные движения */
--transition-slide: 0.9s cubic-bezier(0.65, 0, 0.35, 1);
/* --- Состояния и формы --- */
--color-error: #a4322a;
--radius-panel: 1.5625rem;
--radius-field: 1.25rem;
}
/* Крупный заголовок растёт быстро до планшета и медленно дальше:
393 → 33px, 834 → 56px, 1440 → 64px, 1920 → 72px */
@media (min-width: 52.125em) {
:root {
--fs-display: clamp(3.5rem, 2.732rem + 1.473vw, 4.5rem);
}
}
/* ==========================================================================
4. Base
========================================================================== */
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-base);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
font-weight: 500;
line-height: var(--lh-heading);
letter-spacing: var(--tracking-tight);
}
a {
color: inherit;
text-decoration: none;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
/* ==========================================================================
5. Утилиты
========================================================================== */
/* Контентная ширина: 1700px + боковые поля */
.container {
width: 100%;
max-width: calc(var(--container-width) + var(--container-gutter) * 2);
margin-inline: auto;
padding-inline: var(--container-gutter);
}
/* Широкая панель почти во всю ширину (тёмные секции, баннеры) */
.panel {
margin-inline: var(--panel-inset);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Блок: skip-link
========================================================================== */
.skip-link {
position: absolute;
top: var(--space-s);
left: var(--space-s);
z-index: 1000;
padding: var(--space-xs) var(--space-s);
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-text-inverse);
background-color: var(--color-text);
border-radius: var(--radius-pill);
transform: translateY(-200%);
transition: transform var(--transition-fast);
}
.skip-link:focus-visible {
transform: translateY(0);
}
/* ==========================================================================
Блок: page
========================================================================== */
.page {
overflow-x: clip;
}
/* Открыто меню или окно: страница под ним не прокручивается */
.page--locked {
padding-inline-end: var(--scrollbar-width, 0);
overflow: hidden;
}
/* Ширину пропавшего скроллбара JS кладёт в --scrollbar-width, чтобы ничего не прыгало */
.page--locked .site-header {
inset-inline-end: var(--scrollbar-width, 0);
}
.page__main {
display: flex;
flex-direction: column;
gap: var(--section-gap);
padding-block-end: var(--section-gap);
}
/* ==========================================================================
Блоки сайта — добавляются ниже в порядке появления на странице
========================================================================== */
/* ==========================================================================
Блок: icon (иконки из спрайта в header.php: )
========================================================================== */
.icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
}
/* ==========================================================================
Блок: button (общий для всего сайта)
Цвета задаются переменными --button-*, у каждого модификатора своя пара
«обычное / при наведении» из макета. Родитель может переопределить
переменные (см. site-header--sticky), не трогая сам блок.
Модификаторы: --light, --accent, --outline, --outline-light, --close,
--l (крупная), --icon (круглая, только иконка)
========================================================================== */
.button {
--button-bg: transparent;
--button-color: inherit;
--button-border: transparent;
--button-icon-bg: var(--color-accent);
--button-icon-color: var(--color-text);
--button-bg-hover: var(--button-bg);
--button-color-hover: var(--button-color);
--button-border-hover: var(--button-border);
--button-icon-bg-hover: var(--button-icon-bg);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.9375rem;
min-height: var(--button-height);
padding-inline: 1.5rem;
border: 1px solid var(--button-border);
font-family: inherit;
font-size: var(--fs-button);
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--button-color);
background-color: var(--button-bg);
border-radius: var(--radius-pill);
cursor: pointer;
transition:
color var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast);
}
.button:disabled {
opacity: 0.6;
cursor: progress;
}
/* Кружок со стрелкой внутри кнопки */
.button__icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 2rem;
height: 2rem;
color: var(--button-icon-color);
background-color: var(--button-icon-bg);
border-radius: 50%;
transition: background-color var(--transition-fast);
}
/* Иконка в круглой кнопке без текста */
.button__glyph {
width: 1.5rem;
height: 1.5rem;
}
@media (hover: hover) {
.button:hover:not(:disabled) {
color: var(--button-color-hover);
background-color: var(--button-bg-hover);
border-color: var(--button-border-hover);
}
.button:hover:not(:disabled) .button__icon {
background-color: var(--button-icon-bg-hover);
}
}
/* Белая заливка → золотая */
.button--light {
--button-bg: var(--color-surface);
--button-color: var(--color-text);
--button-bg-hover: var(--color-accent);
--button-color-hover: var(--color-text-inverse);
--button-icon-bg-hover: var(--color-surface);
}
/* Золотая заливка → почти чёрная */
.button--accent {
--button-bg: var(--color-accent);
--button-color: var(--color-text);
--button-icon-bg: var(--color-surface);
--button-bg-hover: var(--color-text);
--button-color-hover: var(--color-text-inverse);
--button-icon-bg-hover: var(--color-accent);
}
/* Золотая обводка (светлый фон) → золотая заливка */
.button--outline {
--button-border: var(--color-accent);
--button-color: var(--color-text);
--button-bg-hover: var(--color-accent);
--button-border-hover: var(--color-accent);
--button-icon-bg-hover: var(--color-surface);
}
/* Белая обводка (на фото и тёмном фоне) → золотая заливка */
.button--outline-light {
--button-border: var(--color-text-inverse);
--button-color: var(--color-text-inverse);
--button-bg-hover: var(--color-accent);
--button-border-hover: var(--color-accent);
--button-icon-bg-hover: var(--color-surface);
}
/* Кнопка закрытия: золотой круг с белым крестиком */
.button--close {
--button-bg: var(--color-accent);
--button-color: var(--color-text-inverse);
--button-bg-hover: var(--color-text);
}
/* Подпись обычным регистром (по умолчанию капслок) */
.button--sentence {
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
/* Крупная кнопка */
.button--l {
min-height: var(--button-height-l);
padding-inline: 2rem 1rem;
}
/* Круглая кнопка-иконка */
.button--icon {
width: var(--button-height);
padding: 0;
}
.button--close.button--icon {
width: var(--button-close-size, var(--button-height));
min-height: var(--button-close-size, var(--button-height));
}
/* ==========================================================================
Блок: site-header
Всегда fixed. Вверху страницы прозрачная, белый текст поверх фото.
После прокрутки (JS ставит site-header--sticky) превращается в
«плавающую» полупрозрачную плашку с тёмным текстом.
========================================================================== */
.site-header {
--header-top: clamp(1rem, 0.6rem + 1.572vw, 2.5rem);
--logo-width: clamp(8.375rem, 6.15rem + 9.07vw, 10.875rem); /* 134 → 174px на 393 → 834 */
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 20;
padding-block-start: var(--header-top);
color: var(--color-text-inverse);
}
.site-header--sticky {
--header-top: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
color: var(--color-text);
}
.site-header__inner {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
max-width: calc(var(--container-width) + var(--container-gutter) * 2);
margin-inline: auto;
padding-inline: var(--container-gutter);
}
/* Фон плашки: появляется через opacity, чтобы не анимировать раскладку */
.site-header__inner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-white-55);
border-radius: var(--radius-pill);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
opacity: 0;
transition: opacity 0.3s ease;
}
.site-header--sticky .site-header__inner {
max-width: none;
margin-inline: var(--panel-inset);
padding-block: 0.375rem;
padding-inline: 1.5rem;
animation: site-header-in 0.4s ease-out;
}
.site-header--sticky .site-header__inner::before {
opacity: 1;
}
@keyframes site-header-in {
from {
transform: translateY(-130%);
}
}
.site-header__logo {
display: block;
flex-shrink: 0;
}
.site-header__logo-image {
width: var(--logo-width);
}
/* На плашке логотип чуть меньше */
.site-header--sticky .site-header__logo-image {
width: calc(var(--logo-width) * 0.72);
}
/* Светлый логотип вверху страницы, тёмный на плашке */
.site-header__logo-image--dark,
.site-header--sticky .site-header__logo-image--light {
display: none;
}
.site-header--sticky .site-header__logo-image--dark {
display: block;
}
.site-header__actions {
display: flex;
align-items: center;
gap: 0.4375rem;
}
.site-header__phone {
display: none;
margin-inline-end: clamp(0.5rem, 0.2rem + 0.8vw, 1.1875rem);
font-size: clamp(1rem, 0.871rem + 0.524vw, 1.5rem);
font-weight: 500;
line-height: 1.32;
letter-spacing: var(--tracking-tight);
white-space: nowrap;
}
/* На экранах уже 360px кнопка не помещается;
форма бронирования и так стоит на первом экране */
.site-header__book {
display: none;
}
@media (min-width: 22.5em) {
.site-header__book {
display: inline-flex;
}
}
@media (min-width: 52.125em) {
.site-header {
--logo-width: clamp(10.875rem, 2.875rem + 15.35vw, 16.6875rem); /* 174 → 267px на 834 → 1440 */
}
.site-header__phone {
display: block;
}
}
/* Кнопки на плашке: золотая «Забронировать» и тёмная обводка у бургера */
.site-header--sticky .site-header__book {
--button-bg: var(--color-accent);
--button-color: var(--color-text-inverse);
--button-border: var(--color-accent);
--button-bg-hover: var(--color-text);
--button-border-hover: var(--color-text);
}
.site-header--sticky .site-header__burger {
--button-color: var(--color-text);
--button-border: var(--color-text);
--button-bg-hover: var(--color-accent);
--button-color-hover: var(--color-text);
--button-border-hover: var(--color-accent);
}
/* ==========================================================================
Блок: phone-link (ссылка-телефон из включаемой области)
========================================================================== */
.phone-link {
transition: opacity var(--transition-fast);
}
.phone-link:hover {
opacity: 0.75;
}
/* ==========================================================================
Блок: rating-badge (рейтинг в Яндексе)
Плашку целиком (рамка, фон, иконка, «5,0», подпись) рисует
images/rating.svg, CSS добавляет только blur под ней. Размеры в em: плашка масштабируется одним font-size
(9px → 16px = 80 → 142px по ширине).
========================================================================== */
.rating-badge {
display: block;
width: 8.875em;
font-size: clamp(0.5625rem, 0.45rem + 0.458vw, 1rem);
border-radius: 1.125em;
overflow: hidden;
-webkit-backdrop-filter: blur(11.5px);
backdrop-filter: blur(11.5px);
}
.rating-badge__image {
display: block;
width: 100%;
height: auto;
}
/* ==========================================================================
Блок: hero (первый экран главной)
Mobile: фото сверху, форма бронирования на зелёной плашке заходит на фото.
От 834: фото на весь экран, форма в строку внизу, точки справа вертикально.
========================================================================== */
.hero {
--hero-radius: 1.5625rem;
--hero-overlap: 3.5625rem;
position: relative;
display: grid;
grid-template-rows: 1fr auto auto;
isolation: isolate;
color: var(--color-text-inverse);
}
.hero__media {
position: relative;
grid-row: 1 / 3;
grid-column: 1;
min-height: clamp(34.375rem, 28.75rem + 22.9vw, 56.25rem);
overflow: hidden;
background-color: var(--color-green-900);
border-end-start-radius: var(--hero-radius);
border-end-end-radius: var(--hero-radius);
}
/* Затемнение снизу для читаемости текста */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(180deg, rgb(27 24 16 / 0.09) 0%, rgb(0 0 0 / 0.81) 100%);
pointer-events: none;
}
.hero__body {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
grid-row: 1;
grid-column: 1;
z-index: 2;
gap: clamp(2.125rem, 5.27rem - 2.62vw, 4.625rem);
padding-block: 8rem 1.5rem;
}
.hero__title {
max-width: 13.75em;
font-size: var(--fs-display);
}
.hero__pagination {
display: flex;
justify-content: center;
grid-row: 2;
grid-column: 1;
z-index: 2;
padding-block: 1.5rem calc(var(--hero-overlap) + 1.5rem);
}
.hero__booking {
grid-row: 3;
grid-column: 1;
z-index: 3;
margin-block-start: calc(var(--hero-overlap) * -1);
}
@media (min-width: 52.125em) {
.hero__media {
grid-row: 1 / 4;
}
.hero__body {
padding-block-end: clamp(2rem, 1.3rem + 0.8vw, 2.875rem);
}
.hero__pagination {
position: absolute;
grid-area: 1 / 1 / -1 / -1; /* иначе absolute позиционируется от своей ячейки сетки */
top: 50%;
right: clamp(1.5rem, -1.75rem + 6.72vw, 6.3125rem);
padding: 0;
transform: translateY(-50%);
}
.hero__booking {
margin-block-start: 0;
padding-block-end: clamp(2.5rem, 1.6rem + 1.7vw, 4.125rem);
}
}
/* ==========================================================================
Блок: hero-slider (смена фото первого экрана)
Mobile листает слева направо, от 834 снизу вверх.
Индекс слайда JS кладёт в --slider-index.
========================================================================== */
.hero-slider {
--slider-index: 0;
position: absolute;
inset: 0;
}
.hero-slider__track {
display: flex;
height: 100%;
transform: translate3d(calc(var(--slider-index) * -100%), 0, 0);
transition: transform var(--transition-slide);
}
.hero-slider__slide {
flex: 0 0 100%;
height: 100%;
}
.hero-slider__image {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 52.125em) {
.hero-slider__track {
flex-direction: column;
transform: translate3d(0, calc(var(--slider-index) * -100%), 0);
}
}
/* ==========================================================================
Блок: slider-dots (точки-переключатели, активная вытянута в тире)
========================================================================== */
.slider-dots {
display: flex;
align-items: center;
}
.slider-dots__button {
display: grid;
place-items: center;
min-width: 1.5rem;
min-height: 1.5rem;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.slider-dots__button::before {
content: "";
width: 0.4375rem;
height: 0.4375rem;
background-color: var(--color-text-inverse);
border-radius: var(--radius-pill);
transition:
width var(--transition-fast),
height var(--transition-fast),
background-color var(--transition-fast);
}
.slider-dots__button--active::before {
width: 2.25rem;
background-color: var(--color-accent);
}
/* Вертикальная раскладка: точки столбиком, тире вертикальное */
@media (min-width: 52.125em) {
.slider-dots--vertical {
flex-direction: column;
}
.slider-dots--vertical .slider-dots__button--active::before {
width: 0.4375rem;
height: 1.5rem;
}
}
/* ==========================================================================
Блок: booking-form (макет формы бронирования)
Временная разметка: сюда встанет виджет сервиса бронирования,
эти же стили потом перенесём на его классы.
========================================================================== */
.booking-form {
display: grid;
gap: var(--space-xs);
padding: 1.5rem 1.5rem 1.25rem;
color: var(--color-text-inverse);
background-color: var(--color-green-800);
border-radius: var(--radius-l);
}
.booking-form__field {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: var(--space-s);
width: 100%;
min-height: 3.625rem;
padding: 0 0 0.375rem 0.875rem;
border: 0;
border-bottom: 1px solid var(--color-text-inverse);
text-align: start;
color: inherit;
background: none;
cursor: pointer;
}
.booking-form__label {
grid-column: 1;
min-width: 0;
font-size: 0.875rem;
line-height: 1.52;
}
.booking-form__value {
grid-column: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1rem;
font-weight: 500;
line-height: 1.52;
}
.booking-form__icon {
grid-column: 2;
grid-row: 1 / 3;
width: 1.5625rem;
height: 1.5625rem;
}
.booking-form__submit {
width: 100%;
margin-block-start: var(--space-m);
}
@media (min-width: 52.125em) {
.booking-form {
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
align-items: end;
gap: 1.375rem;
padding: 0;
background-color: transparent;
border-radius: 0;
}
.booking-form__submit {
width: auto;
margin-block-start: 0;
}
}
/* ==========================================================================
Блок: site-menu (выезжающее меню справа,