/*
Theme Name: Lavanda WP
Theme URI: https://l-lavanda.ru/
Author: L.Lavanda
Description: WordPress theme for L.Lavanda on Timber and ACF Pro.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: lavanda-wp
*/
/* ==========================================================================
Лаванда — Studio site, главная страница
Использует токены из ../project/colors_and_type.css
========================================================================== */
/* Inlined colors_and_type.css from design-system, was @import. */
/* ==========================================================================
Лаванда — Colors & Typography
Пространство красоты и здоровья
========================================================================== */
/* Webfonts ---------------------------------------------------------------- */
/* Note: Playfair Display + Manrope loaded from Google Fonts. If you have the
.ttf files locally, drop them in fonts/ and uncomment the @font-face below. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Manrope:wght@200..800&display=swap');
/* @font-face {
font-family: 'Playfair Display';
src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 200 800;
font-style: normal;
font-display: swap;
} */
:root {
/* ------------------------------------------------------------------------
COLOR — Brand
The mark's lavender is the single saturated color in the system.
Everything else is warm, neutral, calm.
------------------------------------------------------------------------ */
--lav-500: #9B7BA8; /* primary brand lavender (from logo mark) */
--lav-600: #836492; /* hover / pressed */
--lav-700: #6B4F7A; /* deep accent */
--lav-400: #B499BF; /* lighter accent */
--lav-300: #CDB7D4; /* surfaces, chips */
--lav-200: #E2D2E6; /* tinted bg */
--lav-100: #F1E8F3; /* whisper-tint surface */
--lav-50: #F8F3F9; /* page tint */
/* ------------------------------------------------------------------------
COLOR — Wellness palette (sampled from interior moodboard)
Use sparingly as accents; they are the supporting cast.
------------------------------------------------------------------------ */
--dusty-lavender: #9B8998; /* muted mauve */
--blush: #D0BFB1; /* warm sand-blush */
--sand: #DFD6CE; /* light beige */
--taupe: #C7BAB1; /* mid taupe */
--sage: #8D8878; /* muted olive-sage */
/* ------------------------------------------------------------------------
COLOR — Neutrals (warm, never cool grey)
Background → ink scale. Ink is dark warm graphite, not pure black.
------------------------------------------------------------------------ */
--bg: #FBF8F5; /* page — warm cream */
--surface: #FFFFFF; /* cards */
--surface-2: #F5F0EB; /* alt surface (sections) */
--surface-3: #ECE5DC; /* divider band / muted card */
--ink-900: #2A2429; /* headings — warm graphite */
--ink-700: #4A4348; /* body */
--ink-500: #7A7177; /* secondary text */
--ink-400: #9C9499; /* tertiary / placeholder */
--ink-300: #C9C2C6; /* disabled */
--ink-200: #E5DFE2; /* hairline divider */
--ink-100: #F0EAEC; /* faintest */
/* ------------------------------------------------------------------------
COLOR — Semantic
------------------------------------------------------------------------ */
--fg: var(--ink-900);
--fg-muted: var(--ink-700);
--fg-subtle: var(--ink-500);
--fg-on-lav: #FFFFFF;
--fg-link: var(--lav-600);
--border: var(--ink-200);
--border-strong: var(--ink-300);
--accent: var(--lav-500);
--accent-hover: var(--lav-600);
--accent-soft: var(--lav-100);
--success: #6E8F6A; /* sage-leaning */
--warning: #C99A5B; /* warm amber */
--danger: #B6655B; /* terracotta — never a bright red */
--info: var(--lav-500);
/* ------------------------------------------------------------------------
TYPE — Families
Playfair Display (serif, with character) for headlines.
Manrope (geometric humanist sans) for everything else.
------------------------------------------------------------------------ */
--font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
--font-sans: 'Manrope', -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* ------------------------------------------------------------------------
TYPE — Scale (1.250 major-third on a 16px base)
------------------------------------------------------------------------ */
--fs-12: 0.75rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-32: 2rem;
--fs-40: 2.5rem;
--fs-56: 3.5rem;
--fs-72: 4.5rem;
--fs-96: 6rem;
/* ------------------------------------------------------------------------
SPACING — 4px baseline
------------------------------------------------------------------------ */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
/* ------------------------------------------------------------------------
RADII — Soft, generous. Pills for chips / buttons.
------------------------------------------------------------------------ */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-2xl: 40px;
--r-pill: 999px;
/* ------------------------------------------------------------------------
SHADOWS — Whisper-soft, warm-tinted, never harsh.
------------------------------------------------------------------------ */
--sh-1: 0 1px 2px rgba(60, 40, 55, 0.04), 0 1px 1px rgba(60, 40, 55, 0.03);
--sh-2: 0 4px 12px rgba(60, 40, 55, 0.06), 0 1px 2px rgba(60, 40, 55, 0.04);
--sh-3: 0 12px 32px rgba(60, 40, 55, 0.08), 0 2px 4px rgba(60, 40, 55, 0.04);
--sh-4: 0 24px 60px rgba(60, 40, 55, 0.12), 0 4px 10px rgba(60, 40, 55, 0.06);
--sh-lav: 0 8px 24px rgba(155, 123, 168, 0.22);
/* ------------------------------------------------------------------------
MOTION
------------------------------------------------------------------------ */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 140ms;
--dur: 220ms;
--dur-slow: 420ms;
}
/* ==========================================================================
SEMANTIC TYPOGRAPHY
Russian-friendly tracking and leading. Headlines lean into Playfair's
high contrast — keep them airy with letter-spacing -0.01em.
========================================================================== */
body {
font-family: var(--font-sans);
font-size: var(--fs-16);
line-height: 1.55;
color: var(--fg);
background: var(--bg);
font-feature-settings: 'ss01', 'cv11';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.display-1, h1.display {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(var(--fs-56), 7vw, var(--fs-96));
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--fg);
}
h1, .h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-56);
line-height: 1.08;
letter-spacing: -0.012em;
color: var(--fg);
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-40);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--fg);
}
h3, .h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-32);
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--fg);
}
h4, .h4 {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-20);
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--fg);
}
h5, .h5 {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-16);
line-height: 1.4;
color: var(--fg);
}
p, .body {
font-family: var(--font-sans);
font-size: var(--fs-16);
line-height: 1.6;
color: var(--fg-muted);
text-wrap: pretty;
}
.lead {
font-family: var(--font-sans);
font-size: var(--fs-20);
line-height: 1.55;
font-weight: 400;
color: var(--fg-muted);
}
.small, small {
font-family: var(--font-sans);
font-size: var(--fs-14);
line-height: 1.5;
color: var(--fg-subtle);
}
.eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-12);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--fg-subtle);
}
.serif-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
}
a {
color: var(--fg-link);
text-decoration: none;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--lav-700); text-decoration: underline; }
code, kbd, .mono {
font-family: var(--font-mono);
font-size: 0.92em;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Якорный переход (адресная строка, back/forward, загрузка с #hash) — не
прячем заголовок под sticky-шапку.
PR-2.7: scroll-behavior: smooth включён нативно — это страховка для ссылок
с absolute href типа "/#cabinets" из site-header.twig, которые JS-handler
не ловит (он матчит только href^="#"). JS-плавный скролл (smoothScrollTo)
всё равно работает быстрее и с offset под sticky-шапку, но native fallback
гарантирует, что прокрутка плавная везде. prefers-reduced-motion → off. */
html {
scroll-padding-top: 96px;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
background: var(--bg);
color: var(--fg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Grain texture — единый SVG turbulence, baked в data-URL. Используется
как ::after-overlay поверх крупных цветовых полей (CTA, hero-card,
потенциально section--alt). Ноль HTTP-запросов, ~400 байт inline. */
:root {
--grain-bg: url("data:image/svg+xml;utf8,");
}
/* Audience zones ---------------------------------------------------------
Две зоны = одна бренд-система с двумя настройками. Клиент — мягкая,
светлая, лавандовая палитра. Мастер — собранная, графит-доминирующая,
с лавандой только как deep accent. Все значения берутся из токенов
colors_and_type.css — никаких ad-hoc хексов. */
:root {
/* CLIENT (default): мягкая, светлая, уходовая.
База — крем + soft-lavender акценты. */
--zone-500: var(--lav-500); /* primary — мид-лаванда #9B7BA8 */
--zone-600: var(--lav-600);
--zone-700: var(--lav-700); /* deep accent #6B4F7A */
--zone-eyebrow: var(--lav-600);
--zone-italic: var(--lav-600);
--zone-surface-alt: var(--surface-2); /* фон section--alt #F5F0EB */
--zone-page-bg: var(--bg); /* основной фон страницы #FBF8F5 */
/* Hero-card / dark-toned cards — токены содержимого */
--zone-card-bg: var(--surface-2); /* светлый песочный hero */
--zone-card-fg: var(--ink-900); /* graphite текст на светлом */
--zone-card-fg-muted: var(--ink-700);
--zone-card-eyebrow: var(--lav-600);
--zone-card-italic: var(--lav-600);
--zone-cta-grad: linear-gradient(135deg, var(--lav-700) 0%, var(--lav-500) 100%);
--zone-tint: var(--lav-100); /* активная вкладка-пилюля */
--zone-ring: var(--lav-300); /* фокус-кольцо */
--zone-soft-bg: var(--lav-50);
--zone-soft-hover: var(--lav-100);
--zone-toggle-thumb: var(--lav-500); /* лавандовая пилюля в toggle */
--zone-toggle-track: var(--surface-3); /* фон контейнера toggle */
}
[data-audience="master"] {
/* MASTER: профессиональная зона. База — Песок + графитовый hero +
deep-lavender акценты. Принципиальные отличия от client:
1) body bg → Песок #F5F0EB (вместо крема)
2) hero-card bg → ГРАФИТ #2A2429 + кремовый текст
3) активный таб toggle → графит #2A2429
4) main CTA «Снять кабинет» → lav-700 #6B4F7A flat */
--zone-500: var(--lav-700); /* CTA primary deep mauve */
--zone-600: var(--ink-900); /* CTA hover → graphite */
--zone-700: var(--ink-900);
--zone-eyebrow: var(--ink-700);
--zone-italic: var(--lav-700);
--zone-surface-alt: var(--sand); /* #DFD6CE — interior beige (брандбук) */
--zone-page-bg: var(--surface-2); /* Песок вместо крема */
/* Hero-card / dark-toned cards: ГРАФИТ + КРЕМОВЫЙ текст */
--zone-card-bg: var(--ink-900); /* #2A2429 — графит */
--zone-card-fg: var(--bg); /* #FBF8F5 — крем */
--zone-card-fg-muted: rgba(251, 248, 245, 0.72);
--zone-card-eyebrow: var(--lav-300); /* #CDB7D4 — нежная лаванда на тёмном */
--zone-card-italic: var(--lav-300); /* italic-акцент в light-lavender */
--zone-cta-grad: linear-gradient(135deg, var(--ink-900) 0%, var(--lav-700) 100%);
--zone-tint: var(--surface-3);
--zone-ring: var(--lav-400);
--zone-soft-bg: var(--ink-100);
--zone-soft-hover: var(--surface-3);
--zone-toggle-thumb: var(--ink-900); /* графитовая пилюля в toggle */
--zone-toggle-track: var(--surface-3); /* sand-track */
}
/* Различие фона страницы по аудиенции — главный визуальный сигнал
«вы в другой зоне». Tone shift: cream → sand. */
body {
background: var(--zone-page-bg);
transition: background 600ms var(--ease-out);
}
img { display: block; max-width: 100%; }
button { font-family: inherit; }
/* Скрытый для глаз заголовок, доступный screen-reader-у. Используется
там, где нужен семантический h2/h3 для иерархии, но визуально его
быть не должно (KPI-сетка, JS-рендерящиеся карточки и т. п.). */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Common ----------------------------------------------------------------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.eyebrow {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--zone-eyebrow);
transition: color var(--dur-slow) var(--ease-out);
}
.eyebrow.muted { color: var(--ink-500); }
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
.serif-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--zone-italic);
transition: color var(--dur-slow) var(--ease-out);
}
[data-audience="master"] .serif-italic--on-dark { color: #fff; }
/* Buttons ---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 14px/1 var(--font-sans);
padding: 14px 22px;
border-radius: var(--r-pill);
border: 0;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
transform 100ms var(--ease-out);
}
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:focus-visible,
a.btn:active,
a.btn:visited { text-decoration: none; }
/* Magnetic hover (tactile, premium) --------------------------------------
Кнопка едва-едва тянется к курсору (≤5px), стрелка-иконка мягко уходит
вправо на ~3px. Эффект включается только на устройствах с реальным hover
и при отсутствии prefers-reduced-motion (включается через JS добавлением
data-magnetic). На активных кнопках возврат в 0,0 происходит за 320ms
ease-out — плавный, не «резиновый». */
.btn--primary,
.btn--on-dark {
transform: translate(var(--mag-x, 0), var(--mag-y, 0));
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
box-shadow var(--dur-slow) var(--ease-out),
transform 320ms var(--ease-out);
}
.btn--primary:active,
.btn--on-dark:active {
transform: translate(var(--mag-x, 0), var(--mag-y, 0)) scale(0.98);
}
.btn--primary:hover,
.btn--on-dark:hover { box-shadow: var(--sh-3); }
.btn .icon { transition: transform 320ms var(--ease-out); }
.btn--primary:hover > .icon,
.btn--on-dark:hover > .icon { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--zone-ring); }
.btn--sm { font-size: 13px; padding: 10px 16px; }
.btn--lg { font-size: 15px; padding: 16px 28px; }
.btn--primary { background: var(--zone-500); color: #fff; box-shadow: var(--sh-lav); }
.btn--primary:hover { background: var(--zone-600); }
.btn--secondary {
background: #fff;
color: var(--ink-900);
box-shadow: var(--sh-1);
border: 1px solid var(--border);
}
.btn--secondary:hover { background: var(--zone-soft-bg); }
.btn--ghost { background: transparent; color: var(--ink-900); }
.btn--ghost:hover { background: var(--zone-soft-hover); }
.btn--on-dark {
background: #fff;
color: var(--ink-900);
box-shadow: var(--sh-2);
}
.btn--on-dark:hover { background: var(--surface-2); }
.btn .icon { width: 16px; height: 16px; }
.btn--sm .icon { width: 14px; height: 14px; }
/* Smooth audience switch -------------------------------------------------
Сценарий переключения (~860ms полного цикла):
0–220ms нижние секции, header-CTA и меню уходят в opacity 0
220ms JS свапает data-audience — токены цвета стартуют 600ms transition
220–360ms «дыхательная пауза»: контент скрыт, цвета перетекают
360–860ms нижние секции и header-контент возвращаются в opacity 1
0–600ms hero одновременно крестфейдится (.hero.is-client ↔ .hero.is-master)
Hero-stack НЕ участвует в body-dip — у него свой 600ms crossfade, иначе
получалось двойное затухание. Внутренний crossfade и внешняя пауза
на нижних модулях идут параллельно. */
body > section,
.site-footer {
transition: opacity 540ms var(--ease-out) 140ms; /* fade-IN: 140ms задержка */
}
body.is-switching > section,
body.is-switching > .site-footer {
opacity: 0;
transition: opacity 220ms var(--ease-out); /* fade-OUT: без задержки */
}
@media (prefers-reduced-motion: reduce) {
body > section,
.site-footer { transition: none; }
body.is-switching > section,
body.is-switching > .site-footer { opacity: 1; }
}
/* Audience toggle behaviour --------------------------------------------- */
.is-client { display: none; }
.is-master { display: none; }
[data-audience="client"] .is-client { display: revert; }
[data-audience="master"] .is-master { display: revert; }
[data-audience="client"] .is-client.flex,
[data-audience="master"] .is-master.flex { display: flex; }
[data-audience="client"] .is-client.grid,
[data-audience="master"] .is-master.grid { display: grid; }
[data-audience="client"] .is-client.block,
[data-audience="master"] .is-master.block { display: block; }
/* Higher-specificity hides for elements whose base class sets a non-default
display (e.g. .cards-grid → grid, .legend → flex). Without these, the
later .cards-grid {display:grid} rule beats the bare .is-master selector
(equal specificity, later wins) and the wrong-audience grid stays visible. */
.cards-grid.is-client,
.cards-grid.is-master,
.legend.is-client,
.legend.is-master { display: none; }
/* Header ----------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid transparent;
transition: background var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
background: transparent;
}
.site-header.is-scrolled {
background: rgba(251, 248, 245, 0.78);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom-color: var(--border);
}
.header-inner {
display: flex;
align-items: center;
/* Без justify-content: space-between — оно перераспределяет промежутки между
ВСЕМИ детьми, поэтому тогглер «гуляет» при смене аудитории (когда меняется
количество nav-ссылок и ширина CTA-кнопки). Вместо этого фиксируем
[brand][toggle] слева и через margin-left:auto на .site-nav уезжаем с
[nav][CTA][menu] вправо. Расширяется только промежуток ПОСЛЕ тогглера. */
gap: 24px;
padding: 14px 28px;
max-width: 1240px;
margin: 0 auto;
}
.brand-lockup {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.brand-lockup__full {
display: block;
height: 40px;
width: auto;
flex-shrink: 0;
}
.brand-lockup__mark {
display: none;
height: 40px;
width: 40px;
flex-shrink: 0;
}
.header-inner > * { flex-shrink: 0; }
.audience-toggle {
display: inline-grid;
grid-template-columns: 1fr 1fr;
position: relative;
padding: 4px;
background: var(--surface-3);
border-radius: var(--r-pill);
border: 1px solid var(--border);
/* Фиксируем ширину контейнера — иначе font-weight: 600 у активной кнопки
меняет intrinsic width грид-ячейки и segmented control «дышит» при
переключении. С 1fr 1fr внутри обе кнопки получают равные 50/50 доли. */
width: 224px;
}
.audience-toggle button {
min-width: 0; /* позволяет ужаться внутри 1fr-ячейки независимо от веса шрифта */
text-align: center;
}
.audience-toggle::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 4px);
height: calc(100% - 8px);
background: var(--zone-toggle-thumb);
border-radius: var(--r-pill);
/* Позиция плашки управляется CSS-переменной --toggle-pos:
0% — под левой кнопкой (Гостям / client)
100% — под правой (Мастерам / master)
По умолчанию — следует body[data-audience]. JS может перебить
--toggle-pos через inline style для drag-tracking (палец → плашка). */
transform: translateX(var(--toggle-pos, 0%));
transition: transform 480ms var(--ease-out),
background 500ms var(--ease-out);
z-index: 0;
}
body[data-audience="master"] .audience-toggle {
--toggle-pos: 100%;
}
/* Во время touch-drag-а гасим transform-transition, чтобы плашка
двигалась МГНОВЕННО за пальцем, а не отставала по 480ms. */
.audience-toggle.is-dragging::before {
transition: background 500ms var(--ease-out);
}
.audience-toggle button {
position: relative;
z-index: 1;
padding: 8px 18px;
border-radius: var(--r-pill);
border: 0;
cursor: pointer;
background: transparent;
color: var(--ink-700);
font: 500 13px/1 var(--font-sans);
transition: color 380ms var(--ease-out);
}
.audience-toggle button[aria-pressed="true"] {
color: #fff;
font-weight: 600;
}
/* Mobile audience-toggle (внутри .site-nav, виден только когда burger открыт).
Десктоп-вариант (.audience-toggle--header) скрывается на ≤720px. */
.audience-toggle--mobile { display: none; }
/* Кабинет — вторичная кнопка-вход в master cabinet. На активной странице
(cabinet.html) подсвечивается мягкой лавандовой обводкой. */
.header-cabinet { position: relative; }
.header-cabinet.is-active {
background: var(--lav-50);
border-color: var(--lav-300);
color: var(--lav-700);
}
.site-nav {
display: flex;
gap: 26px;
transition: opacity 320ms var(--ease-out) 140ms;
/* Push nav (и всё, что за ним: CTA, menu-toggle) к правому краю.
Тогглер слева остаётся приклеен к брендингу — его позиция стабильна
при любой смене содержимого справа. */
margin-left: auto;
}
body.is-switching .site-nav {
opacity: 0;
transition: opacity 200ms var(--ease-out);
}
/* Header CTA-кнопка тоже crossfades — её текст «Записаться» ↔ «Снять
кабинет», ширина не должна прыгать (поэтому min-width). */
.header-inner > .btn--primary {
min-width: 132px;
justify-content: center;
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
box-shadow var(--dur-slow) var(--ease-out),
transform 320ms var(--ease-out),
opacity 320ms var(--ease-out) 140ms;
}
body.is-switching .header-inner > .btn--primary {
opacity: 0;
transition-duration: 200ms;
transition-delay: 0s;
}
.site-nav a {
font: 500 14px/1 var(--font-sans);
color: var(--ink-700);
text-decoration: none;
position: relative;
padding-bottom: 4px;
opacity: 0.78;
transition: color var(--dur) var(--ease-out),
opacity var(--dur) var(--ease-out);
}
.site-nav a:hover { color: var(--zone-600); text-decoration: none; opacity: 1; }
/* Активное состояние при скролле — мягкое: opacity 1, темнее текст и
тонкая лавандовая линия снизу с лёгким растягиванием. */
.site-nav a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--zone-500);
opacity: 0;
transform: scaleX(0.4);
transform-origin: center;
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out),
background var(--dur-slow) var(--ease-out);
}
.site-nav a.is-active {
color: var(--ink-900);
opacity: 1;
}
.site-nav a.is-active::after {
opacity: 1;
transform: scaleX(1);
}
.menu-toggle { display: none; }
/* Hero ------------------------------------------------------------------- */
.hero-stack {
display: grid;
grid-template-areas: "hero";
margin-top: -68px;
padding-top: 88px;
}
.hero-stack > .hero {
grid-area: hero;
margin-top: 0;
padding-top: 0;
transition: opacity 600ms var(--ease-out),
transform 600ms var(--ease-out);
}
.hero-stack > .hero.is-client,
.hero-stack > .hero.is-master {
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
}
.hero-stack > .hero > .hero-grid { flex: 1; }
[data-audience="client"] .hero-stack > .hero.is-client,
[data-audience="master"] .hero-stack > .hero.is-master {
opacity: 1;
transform: none;
pointer-events: auto;
}
.hero {
position: relative;
margin-top: -68px;
padding-top: 88px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 32px;
align-items: stretch;
min-height: 720px;
padding: 40px 28px 0;
max-width: 1240px;
margin: 0 auto;
width: 100%;
}
[data-audience="master"] .hero-grid { grid-template-columns: 1fr 1fr; }
.hero-card {
background: var(--zone-card-bg);
color: var(--zone-card-fg);
border-radius: var(--r-2xl);
padding: 64px 56px;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
overflow: visible;
transition: background 600ms var(--ease-out), color 600ms var(--ease-out);
}
.hero-card .hero-search,
.hero-card .hero-actions { margin-top: auto; }
.hero-card h1,
.hero-card .hero-card-h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(40px, 5vw, 56px);
line-height: 1.02;
letter-spacing: -0.018em;
color: var(--zone-card-fg);
margin: 18px 0;
text-wrap: balance;
transition: color 600ms var(--ease-out);
}
.hero-card p {
font: 400 16px/1.6 var(--font-sans);
color: var(--zone-card-fg-muted);
margin: 0 0 28px;
max-width: 480px;
transition: color 600ms var(--ease-out);
}
/* Eyebrow и serif-italic внутри hero-card берут card-токены, чтобы
на graphite-фоне (master) сохранялся достаточный контраст. */
.hero-card .eyebrow { color: var(--zone-card-eyebrow); }
.hero-card .serif-italic { color: var(--zone-card-italic); }
/* На графитовом master-hero ghost-кнопка (Локации) должна быть кремовой,
иначе её текст #2A2429 сливается с #2A2429-фоном. */
[data-audience="master"] .hero-card .btn--ghost {
color: var(--zone-card-fg);
border: 1px solid rgba(251, 248, 245, 0.18);
}
[data-audience="master"] .hero-card .btn--ghost:hover {
background: rgba(251, 248, 245, 0.08);
color: var(--zone-card-fg);
}
/* Hero — client search */
.hero-search {
display: grid;
/* Колонки сбалансированы 1:1 — оба плейсхолдера читаются одинаково.
min на селектах гарантирует место под «Выберите услугу/город» с
шевроном; auto-кнопка подстраивается под текст «Найти мастера». */
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto;
gap: 4px;
padding: 6px;
background: #fff;
border-radius: var(--r-pill);
box-shadow: var(--sh-2);
align-items: center;
margin-bottom: 32px; /* запас под абсолютные .select__error без layout shift */
width: 100%;
max-width: 600px;
}
.hero-search > .select { min-width: 0; }
.hero-search > .btn {
min-width: 150px;
justify-content: center;
gap: 8px;
padding: 11px 16px;
white-space: nowrap;
}
.hero-search select {
border: 0;
background: transparent;
font: 500 14px/1 var(--font-sans);
padding: 12px 16px;
color: var(--ink-900);
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.hero-search select + select {
border-left: 1px solid var(--border);
}
.hero-stats {
display: flex;
gap: 28px;
padding-top: 20px;
border-top: 1px solid var(--border);
max-width: 560px;
}
.hero-stats dt { /* big number */
font: 500 24px/1 var(--font-display);
color: var(--ink-900);
margin: 0;
}
.hero-stats dd {
font: 500 11px/1.4 var(--font-sans);
color: var(--ink-500);
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 5px 0 0;
}
/* Hero — client collage */
.hero-collage {
display: grid;
grid-template-rows: 1.4fr 1fr;
gap: 12px;
}
.hero-collage-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.hero-photo {
border-radius: var(--r-2xl);
overflow: hidden;
background: var(--surface-3) center/cover no-repeat;
min-height: 200px;
}
/* Parallax — деликатное смещение фоновой картинки (5–15px) у крупных
визуальных блоков. JS пишет --py при скролле; здесь только применяем.
На мобильной версии и при reduce-motion — выключено через media-queries. */
[data-parallax] {
background-position: center calc(50% + var(--py, 0px));
will-change: background-position;
}
@media (max-width: 720px) {
[data-parallax] { background-position: center; }
}
@media (prefers-reduced-motion: reduce) {
[data-parallax] { background-position: center; }
}
.hero-collage-row .hero-photo { border-radius: var(--r-xl); }
/* Hero — master CTA stack */
.hero-actions {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 28px;
flex-wrap: wrap;
}
.referral-pill {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 18px 12px 14px;
background: #fff;
border-radius: var(--r-pill);
align-self: flex-start;
box-shadow: var(--sh-1);
width: max-content;
max-width: 100%;
}
.referral-pill .badge {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--lav-500);
color: #fff;
display: inline-flex;
align-items: center; justify-content: center;
font: 600 13px/1 var(--font-sans);
}
.referral-pill span:last-child {
font: 600 13px/1.3 var(--font-sans);
color: var(--ink-900);
}
/* Section spacing --------------------------------------------------------
Ритм страницы: альтернация alt ↔ bg даёт чёткие смысловые границы.
Client view: cabinets(alt) → ritual(bg) → masters(alt) → about(bg) → CTA.
Master view: cabinets(alt) → ritual(bg) → about(bg) → CTA — здесь два
bare-секции подряд, поэтому добавляем мягкий decorative-разделитель на
входе #about только в master-зоне. */
.section {
padding: 120px 28px;
position: relative;
}
.section--alt {
background: var(--zone-surface-alt);
transition: background 600ms var(--ease-out);
}
.section--bg { background: var(--bg); }
/* Soft section-divider — тонкая лавандовая линия с fade на краях. Только
там, где альтернация фонов не создаёт собственный визуальный break. */
[data-audience="master"] #about::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: clamp(160px, 28vw, 280px);
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--ink-300) 50%,
transparent);
opacity: 0.55;
pointer-events: none;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 40px;
}
.section-head h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(34px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -0.012em;
margin: 12px 0 0;
max-width: 720px;
color: var(--ink-900);
}
.section-head__meta {
font: 500 13px/1.5 var(--font-mono);
color: var(--ink-500);
text-align: right;
margin: 0;
}
.section-head__meta strong {
color: var(--ink-700);
font-weight: 500;
}
/* Services --------------------------------------------------------------- */
.chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
font: 600 13px/1 var(--font-sans);
padding: 8px 14px;
border-radius: var(--r-pill);
border: 1px solid var(--border);
background: #fff;
color: var(--ink-700);
cursor: pointer;
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.chip[aria-pressed="true"] {
background: var(--zone-500);
border-color: var(--zone-500);
color: #fff;
}
.chip:hover:not([aria-pressed="true"]) { border-color: var(--lav-300); }
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: #fff;
border-radius: var(--r-xl);
padding: 18px;
box-shadow: var(--sh-2);
display: flex;
flex-direction: column;
gap: 12px;
cursor: pointer;
text-align: left;
border: 0;
font: inherit;
color: inherit;
transition: box-shadow var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out);
}
.service-card:hover { box-shadow: var(--sh-3); transform: translateY(-1px); }
.service-card .photo {
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
background: var(--surface-3) center/cover no-repeat;
}
.service-card h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
margin: 0;
color: var(--ink-900);
line-height: 1.25;
}
.service-card p {
font: 400 14px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.service-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.service-card__price {
font-family: var(--font-display);
font-size: 22px;
color: var(--ink-900);
}
/* Cabinets / rooms ------------------------------------------------------- */
.tabs {
display: flex;
gap: 6px;
margin-bottom: 32px;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
}
.tab {
background: none;
border: 0;
cursor: pointer;
padding: 14px 20px;
font: 500 15px/1 var(--font-sans);
color: var(--ink-500);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--dur) var(--ease-out);
display: flex;
align-items: center;
gap: 8px;
}
.tab[aria-selected="true"] {
color: var(--ink-900);
border-bottom-color: var(--zone-500);
font-weight: 600;
}
.tab {
transition: color var(--dur) var(--ease-out),
border-bottom-color var(--dur-slow) var(--ease-out);
}
.tab .count {
font: 500 11px/1 var(--font-mono);
color: var(--ink-500);
transition: color var(--dur-slow) var(--ease-out),
background var(--dur-slow) var(--ease-out);
}
.tab[aria-selected="true"] .count {
color: var(--zone-600);
background: var(--zone-tint);
padding: 3px 7px;
border-radius: var(--r-pill);
transition: background var(--dur-slow) var(--ease-out),
color var(--dur-slow) var(--ease-out);
}
.legend {
display: flex;
gap: 24px;
margin-bottom: 28px;
flex-wrap: wrap;
font: 400 13px/1 var(--font-sans);
color: var(--ink-700);
}
.legend > span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.room-card {
background: #fff;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--sh-2);
display: flex;
flex-direction: column;
transition: box-shadow 320ms var(--ease-out),
transform 320ms var(--ease-out);
}
.room-card:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.room-card.is-busy { opacity: 0.78; }
.room-card.is-busy:hover { transform: none; box-shadow: var(--sh-2); }
.room-card.is-busy:hover .photo { transform: none; }
.room-card .photo {
aspect-ratio: 4 / 3;
background: var(--surface-3) center/cover no-repeat;
position: relative;
transition: transform 480ms var(--ease-out);
}
.room-card:hover .photo { transform: scale(1.02); }
.room-card.is-busy .photo { filter: grayscale(0.4); }
.status-pill {
/* default: inline pill. Контексты-оверлеи (room-card__media,
drawer-gallery__main, similar-card__photo) включают
position: absolute собственными правилами ниже. */
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #fff;
border-radius: var(--r-pill);
font: 500 12px/1 var(--font-sans);
box-shadow: var(--sh-1);
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
/* Семантика брендбука: success / warning / danger.
Терракотовый «занят» — тёплый, не агрессивный red. */
.status-pill.is-free { color: var(--success); }
.status-pill.is-free .dot { background: var(--success); }
.status-pill.is-busy { color: var(--danger); }
.status-pill.is-busy .dot { background: var(--danger); }
.status-pill.is-soon { color: var(--warning); }
.status-pill.is-soon .dot { background: var(--warning); }
.status-pill em {
color: var(--ink-500);
font-style: normal;
font-weight: 400;
}
.room-card__body {
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.room-card__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.room-card__head h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
margin: 0;
color: var(--ink-900);
letter-spacing: -0.01em;
}
.room-card__size {
font: 500 12px/1 var(--font-mono);
color: var(--ink-500);
}
.room-card__meta {
font: 400 13px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.room-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.room-card__price {
font-family: var(--font-display);
font-size: 20px;
color: var(--lav-700); /* deep mauve акцент — ключевой параметр кабинета */
}
.room-card__price .per {
font: 400 12px/1 var(--font-sans);
color: var(--ink-500);
margin-left: 6px;
}
/* City service card (CLIENT view of #cabinets) --------------------------- */
.city-card {
background: #fff;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--sh-2);
display: flex;
flex-direction: column;
border: 0;
padding: 0;
text-align: left;
text-decoration: none;
cursor: pointer;
font-family: inherit;
color: inherit;
transition: box-shadow 320ms var(--ease-out),
transform 320ms var(--ease-out);
}
.city-card:hover,
.city-card:focus,
.city-card:focus-visible,
.city-card:active,
.city-card:visited { text-decoration: none; }
.city-card:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.city-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--zone-ring); }
.city-card .photo {
aspect-ratio: 4 / 3;
background: var(--surface-3) center/cover no-repeat;
position: relative;
transition: transform 480ms var(--ease-out);
}
.city-card:hover .photo { transform: scale(1.02); }
.city-card__badge {
position: absolute;
top: 14px;
left: 14px;
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: #fff;
color: var(--lav-700);
border-radius: var(--r-pill);
font: 500 12px/1 var(--font-sans);
box-shadow: var(--sh-1);
}
.city-card__body {
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.city-card__body h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink-900);
}
.city-card__meta {
font: 400 13px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.city-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
gap: 12px 16px;
}
.city-card__price {
font-family: var(--font-display);
font-size: 20px;
color: var(--ink-900);
white-space: nowrap;
}
.city-card__price .dur {
font: 400 12px/1 var(--font-sans);
color: var(--ink-500);
margin-left: 2px;
white-space: nowrap;
}
.city-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-shrink: 0;
padding: 10px 18px;
min-height: 40px;
background: var(--lav-500);
color: #fff;
font: 600 13px/1 var(--font-sans);
border-radius: var(--r-pill);
white-space: nowrap;
text-decoration: none;
transition: background var(--dur) var(--ease-out);
}
.city-card__cta svg {
width: 16px;
height: 16px;
transition: transform 320ms var(--ease-out);
}
.city-card:hover .city-card__cta { background: var(--lav-700); }
.city-card:hover .city-card__cta svg { transform: translateX(3px); }
@media (max-width: 540px) {
.city-card__cta { width: 100%; }
}
/* Back-to-top floating button ------------------------------------------- */
.to-top {
position: fixed;
right: 28px;
bottom: 28px;
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--lav-500);
color: #fff;
cursor: pointer;
box-shadow: var(--sh-lav), 0 1px 2px rgba(60, 40, 55, 0.08);
/* Скрыто по умолчанию: чуть смещено вниз и невидимо.
При .is-visible — мягко всплывает. */
opacity: 0;
transform: translateY(8px) scale(0.96);
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out),
background var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out);
z-index: 40;
}
.to-top.is-visible {
opacity: 1;
transform: translate(var(--mag-x, 0), var(--mag-y, 0));
pointer-events: auto;
}
.to-top:hover {
background: var(--lav-600);
box-shadow: 0 12px 28px rgba(107, 79, 122, 0.28), 0 2px 4px rgba(60, 40, 55, 0.08);
}
.to-top.is-visible:active { transform: translate(var(--mag-x, 0), var(--mag-y, 0)) scale(0.96); }
.to-top:focus-visible {
outline: none;
box-shadow: var(--sh-lav), 0 0 0 2px var(--bg), 0 0 0 4px var(--lav-300);
}
@media (prefers-reduced-motion: reduce) {
.to-top { transition: opacity var(--dur) linear; transform: none; }
.to-top.is-visible { transform: none; }
.to-top:hover { transform: none; }
}
@media (max-width: 720px) {
.to-top {
right: 16px;
bottom: 16px;
width: 56px;
height: 56px;
}
}
/* Ritual block ----------------------------------------------------------- */
.ritual-grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.ritual-photo {
aspect-ratio: 4 / 5;
border-radius: var(--r-2xl);
background: var(--surface-3) center/cover no-repeat;
}
.ritual-text h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(40px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -0.015em;
margin: 14px 0 28px;
color: var(--ink-900);
}
.ritual-text p {
font: 400 18px/1.6 var(--font-sans);
color: var(--ink-700);
margin: 0 0 18px;
max-width: 480px;
}
.ritual-text p + p { font-size: 16px; margin-bottom: 32px; }
/* Masters ---------------------------------------------------------------- */
.masters-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.master {
display: flex;
flex-direction: column;
gap: 14px;
cursor: pointer;
transition: transform 320ms var(--ease-out);
}
.master:hover { transform: translateY(-4px); }
.master .photo {
aspect-ratio: 3 / 4;
border-radius: var(--r-xl);
background: var(--surface-3) center top / cover no-repeat;
overflow: hidden;
transition: transform 480ms var(--ease-out),
box-shadow 320ms var(--ease-out);
}
.master:hover .photo {
transform: scale(1.02);
box-shadow: var(--sh-3);
}
.master:hover h3 { color: var(--zone-700); }
.master h3 { transition: color var(--dur) var(--ease-out); }
.master h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 4px;
color: var(--ink-900);
}
.master p {
font: 500 13px/1.4 var(--font-sans);
color: var(--ink-700);
margin: 0 0 4px;
}
.master p.exp {
font-weight: 400;
font-size: 12px;
color: var(--ink-500);
}
/* Why us ----------------------------------------------------------------- */
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border);
}
.why-grid.is-client, .why-grid.is-master { display: none; }
[data-audience="client"] .why-grid.is-client { display: grid; }
[data-audience="master"] .why-grid.is-master { display: grid; }
.why-grid > div {
padding: 40px 28px 32px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.why-grid > div:last-child { border-right: 0; }
.why-grid h4 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
margin: 24px 0 10px;
color: var(--ink-900);
}
.why-grid p {
font: 400 14px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.why-grid svg {
color: var(--zone-500);
transition: color var(--dur-slow) var(--ease-out);
}
/* Booking CTA ------------------------------------------------------------ */
.cta {
background: var(--zone-cta-grad);
border-radius: var(--r-2xl);
padding: 80px 64px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
transition: background 600ms var(--ease-out);
}
.cta h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(36px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -0.015em;
margin: 16px auto 20px;
max-width: 720px;
color: var(--bg);
}
.cta p {
font: 400 18px/1.65 var(--font-sans);
color: rgba(229, 223, 226, 0.88);
margin: 0 auto 36px;
max-width: 480px;
}
/* Italic-акцент в тёмной CTA — нежная лаванда из брендбука,
создаёт перелив на тёмно-фиолетовом градиенте без белой плоскости. */
.cta .serif-italic { color: var(--lav-300); }
/* Inertial silk — client zone only --------------------------------------- */
/* Three cursor-driven layers with different spring coefficients + */
/* always-on ambient mesh + grain. Cursor layers' opacity is gated by */
/* --cta-presence (0..1), driven by JS distance-from-block calculation, */
/* so the surface reacts even when the cursor is just NEAR the block. */
@property --cta-mx { syntax: ''; inherits: true; initial-value: 50%; }
@property --cta-my { syntax: ''; inherits: true; initial-value: 50%; }
@property --cta-cx { syntax: ''; inherits: true; initial-value: 50%; }
@property --cta-cy { syntax: ''; inherits: true; initial-value: 50%; }
@property --cta-tx { syntax: ''; inherits: true; initial-value: 50%; }
@property --cta-ty { syntax: ''; inherits: true; initial-value: 50%; }
@property --cta-presence { syntax: ''; inherits: true; initial-value: 0; }
@property --drift-a { syntax: ''; inherits: true; initial-value: 0%; }
@property --drift-b { syntax: ''; inherits: true; initial-value: 0%; }
.cta { isolation: isolate; }
.cta > * { position: relative; z-index: 1; }
/* Always-on ambient drift — surface keeps "breathing" even idle.
Шёлк работает в обеих зонах: над кремовым CTA (client) и над глубоким
тауп-мовэ градиентом (master). Цвета бликов нейтральные кремово-сиреневые,
через mix-blend-mode: screen они светлят то, что под ними. */
.cta {
animation: ctaSilkDrift 24s ease-in-out infinite;
}
.cta::before,
.cta::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
/* Six radial gradients composited into one paint, screen-blended.
Cursor layers (1-3) fade in/out with --cta-presence — set by JS based
on distance from the block (block + 320px halo around it).
Ambient layers (4-6) are constant; their positions slowly drift
through `ctaSilkDrift`. */
.cta::before {
background:
/* (1) Primary — fast spring, brightest. The "hot spot." */
radial-gradient(
ellipse 85% 105% at var(--cta-mx) var(--cta-my),
rgba(241, 232, 243, calc(0.42 * var(--cta-presence, 0))) 0%,
rgba(241, 232, 243, calc(0.25 * var(--cta-presence, 0))) 18%,
rgba(205, 183, 212, calc(0.10 * var(--cta-presence, 0))) 45%,
transparent 75%),
/* (2) Trail — slow spring, large ellipse → silk smear from past
cursor positions to current. This is the "wave" / "satin fold." */
radial-gradient(
ellipse 110% 130% at var(--cta-tx) var(--cta-ty),
rgba(241, 232, 243, calc(0.20 * var(--cta-presence, 0))) 0%,
rgba(205, 183, 212, calc(0.08 * var(--cta-presence, 0))) 40%,
transparent 75%),
/* (3) Counter — moves to inverse position with slow spring.
Push-pull energy: cursor "pushes" light to opposite corner. */
radial-gradient(
ellipse 90% 110% at var(--cta-cx) var(--cta-cy),
rgba(205, 183, 212, calc(0.22 * var(--cta-presence, 0))) 0%,
transparent 70%),
/* (4) Ambient mesh — top-left blob */
radial-gradient(
ellipse 60% 50% at calc(15% + var(--drift-a)) calc(25% + var(--drift-b)),
rgba(205, 183, 212, 0.20) 0%,
transparent 60%),
/* (5) Ambient mesh — bottom-right blob */
radial-gradient(
ellipse 60% 50% at calc(85% - var(--drift-a)) calc(70% - var(--drift-b)),
rgba(180, 153, 191, 0.18) 0%,
transparent 60%),
/* (6) Ambient mesh — bottom edge soft band */
radial-gradient(
ellipse 90% 50% at 50% calc(115% + var(--drift-b)),
rgba(241, 232, 243, 0.12) 0%,
transparent 65%);
mix-blend-mode: screen;
}
/* Master CTA: переработанный профиль шёлка под глубокий тауп-мовэ фон.
Логика — переливы воды или песка в пустыне: тонкие лавандовые блики,
мягкий soft-light blend (без пересвета), приглушённые амплитуды.
Cursor-слои всё так же реагируют на курсор через --cta-mx/cy/tx/ty,
но цвета подбираются из master-палитры, чтобы сохранить базовый цвет. */
[data-audience="master"] .cta::before {
background:
/* (1) Primary — мягкое «лунное» пятно у курсора, тёплый лавандовый блик */
radial-gradient(
ellipse 80% 100% at var(--cta-mx) var(--cta-my),
rgba(225, 210, 240, calc(0.22 * var(--cta-presence, 0))) 0%,
rgba(190, 165, 215, calc(0.12 * var(--cta-presence, 0))) 40%,
transparent 75%),
/* (2) Trail — медленный шлейф, эффект «складка шёлка / волна на песке» */
radial-gradient(
ellipse 130% 115% at var(--cta-tx) var(--cta-ty),
rgba(205, 180, 225, calc(0.14 * var(--cta-presence, 0))) 0%,
rgba(160, 130, 185, calc(0.06 * var(--cta-presence, 0))) 45%,
transparent 75%),
/* (3) Counter — теневая контр-точка в инверсной позиции, глубже и теплее */
radial-gradient(
ellipse 90% 110% at var(--cta-cx) var(--cta-cy),
rgba(155, 130, 175, calc(0.14 * var(--cta-presence, 0))) 0%,
transparent 70%),
/* (4) Ambient — верхний-левый блик «гребень дюны» */
radial-gradient(
ellipse 70% 55% at calc(18% + var(--drift-a)) calc(28% + var(--drift-b)),
rgba(210, 185, 230, 0.14) 0%,
transparent 60%),
/* (5) Ambient — нижний-правый блик «отражение в воде» */
radial-gradient(
ellipse 60% 50% at calc(82% - var(--drift-a)) calc(72% - var(--drift-b)),
rgba(160, 130, 190, 0.10) 0%,
transparent 60%),
/* (6) Ambient — нижний мягкий лак «горизонт», самый прохладный */
radial-gradient(
ellipse 110% 45% at 50% calc(118% + var(--drift-b)),
rgba(225, 210, 245, 0.07) 0%,
transparent 65%);
mix-blend-mode: soft-light;
}
/* Grain — tactile silk texture над шёлком (поверх ::before).
Над master-фоном делаем фактуру тоньше: глубокий цвет уже сам по себе
премиальный, не нужно её подчёркивать. */
.cta::after {
background-image: var(--grain-bg);
background-size: 200px 200px;
opacity: 0.06;
mix-blend-mode: soft-light;
}
[data-audience="master"] .cta::after {
background-size: 180px 180px;
opacity: 0.035;
}
/* Hero-card grain: тонкая фактура и в client (тёплый крем), и в master
(глубокий тауп). Opacity 3.5% — буквально на грани заметности; убирает
ощущение «CSS-плашки» без визуального шума. */
.hero-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background-image: var(--grain-bg);
background-size: 180px 180px;
opacity: 0.035;
mix-blend-mode: soft-light;
}
@keyframes ctaSilkDrift {
0% { --drift-a: -12%; --drift-b: -8%; }
33% { --drift-a: 10%; --drift-b: -10%; }
66% { --drift-a: -8%; --drift-b: 12%; }
100% { --drift-a: -12%; --drift-b: -8%; }
}
/* Touch / hover-less devices: drive cursor positions automatically.
--cta-presence is set to 0.7 so cursor layers stay softly visible. */
@media (hover: none) {
.cta {
animation: ctaSilkDrift 24s ease-in-out infinite,
ctaCursorAuto 22s ease-in-out infinite;
}
}
@keyframes ctaCursorAuto {
0%, 100% {
--cta-presence: 0.7;
--cta-mx: 30%; --cta-my: 32%;
--cta-cx: 70%; --cta-cy: 68%;
--cta-tx: 38%; --cta-ty: 38%;
}
33% {
--cta-presence: 0.7;
--cta-mx: 70%; --cta-my: 28%;
--cta-cx: 30%; --cta-cy: 72%;
--cta-tx: 60%; --cta-ty: 35%;
}
66% {
--cta-presence: 0.7;
--cta-mx: 58%; --cta-my: 72%;
--cta-cx: 42%; --cta-cy: 28%;
--cta-tx: 55%; --cta-ty: 65%;
}
}
@media (prefers-reduced-motion: reduce) {
[data-audience="client"] .cta { animation: none; }
}
/* Footer ----------------------------------------------------------------- */
.site-footer {
background: var(--ink-900);
color: rgba(229, 223, 226, 0.78);
padding: 80px 28px 32px;
}
.footer-inner { max-width: 1240px; margin: 0 auto; }
/* Top: brand + locations */
.footer-top {
display: grid;
grid-template-columns: 1fr 1.7fr;
gap: 64px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(229, 223, 226, 0.12);
}
/* Brand block */
.footer-brand .footer-logo {
height: 56px;
width: auto;
display: block;
margin-bottom: 20px;
}
.footer-brand p {
font: 400 14px/1.6 var(--font-sans);
color: rgba(229, 223, 226, 0.7);
max-width: 320px;
margin: 0 0 24px;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.footer-nav a {
font: 500 13px/1 var(--font-sans);
color: #fff;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.footer-nav a:hover {
color: var(--lav-300);
border-bottom-color: var(--lav-300);
}
/* Locations grid */
.footer-locations h5 {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(229, 223, 226, 0.5);
margin: 0 0 24px;
}
.locations-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px 32px;
}
.location {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
transition: transform 280ms var(--ease-out);
}
.location:hover { transform: translateY(-3px); }
.location h6 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.005em;
color: #fff;
margin: 0 0 4px;
transition: color var(--dur) var(--ease-out);
}
.location:hover h6 { color: var(--lav-200); }
.location p {
font: 400 13px/1.5 var(--font-sans);
color: rgba(229, 223, 226, 0.72);
margin: 0;
}
.location a {
font: 500 14px/1.4 var(--font-sans);
color: #fff;
text-decoration: none;
border-bottom: 1px solid transparent;
margin-top: 2px;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.location a:hover {
color: var(--lav-300);
border-bottom-color: var(--lav-300);
}
/* Contact band */
.footer-contact {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
padding: 28px 0;
border-bottom: 1px solid rgba(229, 223, 226, 0.12);
}
.footer-contact__channels {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 24px;
}
.footer-contact__channels h5 {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(229, 223, 226, 0.5);
margin: 0;
}
.footer-contact__channels a {
font: 500 14px/1 var(--font-sans);
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(229, 223, 226, 0.18);
padding-bottom: 2px;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.footer-contact__channels a:hover {
color: var(--lav-300);
border-bottom-color: var(--lav-300);
}
/* Bottom row */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 24px;
font: 400 12px/1.4 var(--font-sans);
color: rgba(229, 223, 226, 0.5);
gap: 16px;
}
.footer-copy, .footer-legal { flex-shrink: 0; }
/* Credit-line — отдельной строкой ниже всех. Ненавязчивая, центр. */
.footer-credit {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(229, 223, 226, 0.08);
text-align: center;
font: 400 11px/1.4 var(--font-sans);
letter-spacing: 0.04em;
color: rgba(229, 223, 226, 0.32);
}
.footer-credit a {
color: rgba(229, 223, 226, 0.55);
text-decoration: none;
border-bottom: 1px solid rgba(229, 223, 226, 0.18);
transition: color 200ms ease, border-color 200ms ease;
}
.footer-credit a:hover {
color: var(--lav-300);
border-bottom-color: var(--lav-300);
}
/* Social icons */
.footer-social {
display: flex;
gap: 4px;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: rgba(229, 223, 226, 0.65);
background: transparent;
text-decoration: none;
transition: color var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.footer-social a:hover,
.footer-social a:focus-visible {
color: var(--lav-300);
background: rgba(229, 223, 226, 0.06);
outline: none;
}
.footer-social svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Card entrance — soft stagger on render --------------------------------- */
@keyframes cardEnter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.service-card,
.room-card {
animation: cardEnter 420ms var(--ease-out) backwards;
animation-delay: calc(var(--i, 0) * 50ms);
}
/* Booking modal ---------------------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(42, 36, 41, 0.45);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 320ms var(--ease-out),
visibility 0s linear 320ms;
}
.modal[aria-hidden="false"] {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 320ms var(--ease-out),
visibility 0s linear 0s;
}
.modal__panel {
background: var(--surface);
border-radius: var(--r-xl);
box-shadow: var(--sh-4);
width: 100%;
max-width: 520px;
padding: 36px;
position: relative;
transform: translateY(12px) scale(0.985);
transition: transform 380ms var(--ease-out);
}
.modal[aria-hidden="false"] .modal__panel { transform: none; }
.modal__panel h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 32px;
letter-spacing: -0.01em;
margin: 12px 0 8px;
color: var(--ink-900);
}
.modal__panel p { font: 400 15px/1.6 var(--font-sans); color: var(--ink-700); margin: 0 0 20px; }
.modal__close {
position: absolute;
top: 16px; right: 16px;
background: var(--surface-2);
border: 0;
width: 36px; height: 36px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-700);
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.modal__close:hover { background: var(--surface-3); color: var(--ink-900); }
/* Modal views — crossfade between form and success state. Form-view сидит
в потоке (определяет высоту панели), success-view стоит абсолютно поверх,
панель не «прыгает» при свопе. */
.modal__view {
transition: opacity 280ms var(--ease-out),
transform 280ms var(--ease-out);
}
.modal__view--success {
position: absolute;
inset: 36px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
}
.modal__panel.is-success .modal__view--form {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}
.modal__panel.is-success .modal__view--success {
opacity: 1;
transform: none;
pointer-events: auto;
}
.modal__view--success h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 18px 0 10px;
max-width: 380px;
}
.modal__view--success p {
font: 400 15px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0;
max-width: 360px;
}
.modal__success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--zone-tint);
color: var(--zone-600);
box-shadow: 0 0 0 8px var(--zone-soft-bg);
transform: scale(0.85);
opacity: 0;
transition: opacity 320ms var(--ease-out) 120ms,
transform 480ms var(--ease-out) 120ms;
}
.modal__panel.is-success .modal__success-icon {
transform: scale(1);
opacity: 1;
}
.field {
display: flex;
flex-direction: column;
gap: 12px; /* было 6 — больше воздуха между лейблом и инпутом, чтобы
error-плашка справа не прилипала к input-полю */
margin-bottom: 14px;
position: relative;
}
/* Form validation — заметная плашка-пилюля справа от лейбла. Absolute-
позиционирование, чтобы появление ошибки не сдвигало layout: панель не
«прыгает» по высоте при submit. Цвет — blush (тёплый sand-clay), не
красный/оранжевый. */
/* Селектор .field .field__error (специфичность 0,0,2,0) обязательно нужен,
чтобы перебить общий .field span (0,0,1,1) — иначе текст плашки сделает
uppercase + ink-700 как у label-надписи. */
.field .field__error {
position: absolute;
/* top: -8 + height 19 = bottom y=11 (на уровне label-baseline);
до input (y=23+ при field gap 12) — 12px чистого воздуха. */
top: -8px;
right: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 11px/1 var(--font-sans);
letter-spacing: 0.02em;
text-transform: none;
color: var(--ink-900);
background: var(--blush);
padding: 4px 11px 4px 10px;
border-radius: var(--r-pill);
white-space: nowrap;
max-width: calc(100% - 60px);
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transform: translateY(-3px);
pointer-events: none;
box-shadow: 0 2px 6px rgba(60, 40, 55, 0.08);
transition: opacity 240ms var(--ease-out),
transform 240ms var(--ease-out);
}
.field .field__error::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink-900);
flex-shrink: 0;
}
.field--invalid .field__error {
opacity: 1;
transform: none;
pointer-events: auto;
}
.field--invalid input,
.field--invalid select,
.field--invalid .select__trigger {
border-color: var(--blush);
box-shadow: 0 0 0 3px rgba(208, 191, 177, 0.22);
}
.field--invalid input:focus,
.field--invalid select:focus,
.field--invalid .select.is-open > .select__trigger,
.field--invalid .select__trigger:focus-visible {
border-color: var(--blush);
box-shadow: 0 0 0 3px rgba(208, 191, 177, 0.32);
}
.field.is-client, .field.is-master { display: none; }
[data-audience="client"] .field.is-client { display: flex; }
[data-audience="master"] .field.is-master { display: flex; }
.field span {
font: 600 11px/1 var(--font-sans);
color: var(--ink-700);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.field input, .field select {
/* line-height 1.4 — кириллические выносные не обрезаются в инпутах
модалки записи. */
font: 400 15px/1.4 var(--font-sans);
padding: 12px 16px;
border-radius: var(--r-md);
border: 1px solid var(--border);
background: #fff;
color: var(--ink-900);
outline: none;
transition: border-color var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out);
}
.field input:focus, .field select:focus {
border-color: var(--lav-400);
box-shadow: 0 0 0 3px var(--lav-100);
}
/* Custom select / dropdown ----------------------------------------------- */
.select { position: relative; width: 100%; display: block; }
.select__native {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}
.select__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
/* line-height 1.4 — кириллические выносные («у», «р», «д») должны
полностью помещаться в line-box, иначе обрезаются overflow:hidden у
.select__value. */
font: 400 15px/1.4 var(--font-sans);
padding: 12px 16px;
border-radius: var(--r-md);
border: 1px solid var(--border);
background: #fff;
color: var(--ink-900);
cursor: pointer;
text-align: left;
gap: 12px;
transition: border-color var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.select__trigger:hover { border-color: var(--lav-300); }
.select__trigger:focus-visible {
outline: none;
border-color: var(--lav-400);
box-shadow: 0 0 0 3px var(--lav-100);
}
.select.is-open > .select__trigger {
border-color: var(--lav-400);
box-shadow: 0 0 0 3px var(--lav-100);
}
.select__value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.select__chevron {
color: var(--ink-500);
display: inline-flex;
flex-shrink: 0;
transition: transform var(--dur) var(--ease-out);
}
.select.is-open .select__chevron { transform: rotate(180deg); }
.select__menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 60;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-3);
padding: 6px;
max-height: 320px;
overflow-y: auto;
opacity: 0;
transform: translateY(-6px);
transform-origin: top center;
visibility: hidden;
pointer-events: none;
transition: opacity 220ms var(--ease-out),
transform 220ms var(--ease-out),
visibility 0s linear 220ms;
}
.select.is-open > .select__menu {
opacity: 1;
transform: none;
visibility: visible;
pointer-events: auto;
transition: opacity 220ms var(--ease-out),
transform 220ms var(--ease-out),
visibility 0s;
}
.select__option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
font: 500 14px/1.4 var(--font-sans);
padding: 10px 12px;
border-radius: var(--r-sm);
border: 0;
background: transparent;
color: var(--ink-900);
cursor: pointer;
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.select__option + .select__option { margin-top: 2px; }
.select__option:hover,
.select__option:focus-visible {
background: var(--zone-soft-bg);
color: var(--ink-900);
outline: none;
}
/* Аккуратное выделение выбранного пункта: лавандовый/тауповый тинт +
жирнее шрифт + точка-индикатор справа. Никакой агрессивной заливки. */
.select__option[aria-selected="true"] {
background: var(--zone-tint);
color: var(--zone-600);
font-weight: 600;
}
.select__option[aria-selected="true"]::after {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--zone-500);
flex-shrink: 0;
margin-left: 12px;
}
.select__option[aria-selected="true"]:hover,
.select__option[aria-selected="true"]:focus-visible {
background: var(--zone-soft-hover);
color: var(--zone-700);
}
/* Hero-search context: borderless trigger inside the white pill */
.hero-search .select__trigger {
border: 0;
background: transparent;
/* line-height 1.4 — нижние выносные кириллицы («у», «р») не обрезаются. */
font: 500 13px/1.4 var(--font-sans);
padding: 10px 10px;
border-radius: var(--r-pill);
box-shadow: none;
min-width: 0;
gap: 6px;
}
.hero-search .select__value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
}
.hero-search .select + .select .select__trigger {
border-radius: var(--r-pill);
position: relative;
}
.hero-search .select + .select::before {
/* Разделитель ставим ровно в центр grid-gap (gap=4px → -2px от правого
select). Иначе линия прижимается к pill левого селекта (0px воздуха),
а правый pill начинается через 4px — визуально асимметрично при hover. */
content: '';
position: absolute;
left: -2px;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--border);
pointer-events: none;
}
.hero-search .select__trigger:hover,
.hero-search .select__trigger:focus-visible,
.hero-search .select.is-open > .select__trigger {
background: var(--lav-50);
box-shadow: none;
border-color: transparent;
}
.hero-search .select__menu {
top: calc(100% + 14px);
left: -4px;
right: -4px;
}
/* Hero-search валидация: подсказка появляется ПОД конкретным полем,
абсолютным позиционированием — не двигает форму, hero-stats и
границу hero-блока. Тон мягкий, в стиле сайта (без системного red). */
.hero-search .select { position: relative; }
.hero-search .select.is-invalid > .select__trigger {
background: rgba(255, 245, 248, 0.6);
border: 1px solid rgba(150, 85, 100, 0.45);
color: var(--ink-900);
}
.hero-search .select.is-invalid > .select__trigger .select__value {
color: #9A5E6F;
}
.hero-search .select__error {
position: absolute;
left: 4px;
top: calc(100% + 6px);
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 12px/1.3 var(--font-sans);
color: #9A5E6F;
pointer-events: none;
white-space: nowrap;
opacity: 0;
transition: opacity 220ms var(--ease-out);
}
.hero-search .select__error svg { width: 14px; height: 14px; flex-shrink: 0; }
.hero-search .select.is-invalid > .select__error { opacity: 1; }
/* Reveal on enter --------------------------------------------------------
Используем @keyframes (а не transition), чтобы reveal-анимация не
конфликтовала с собственными transition-правилами карточек (hover-подъём
через transform, и т.д.). После завершения animation-fill-mode: both
оставляет элемент в финальном состоянии и больше не вмешивается в его
transform. Stagger управляется --i (передаётся inline-стилем при рендере). */
/* PR-2.7 fix: анимация запускается на page load, не ждёт JS-IntersectionObserver.
Старая модель (.reveal opacity:0 → JS добавляет .is-visible) на проде давала
белую страницу: scripts.js падает с TypeError в renderMastersPage() на главной
(там нет #pageTitle), но что важнее — observer сам по себе не успевает к first
paint, и hero-card на 100vh остаётся opacity:0. Теперь reveal играется сразу,
stagger через --i сохраняется. .is-visible оставлен как no-op для обратной
совместимости с динамически вставляемыми карточками — JS всё ещё может его
добавлять, повторно анимация не запустится (animation-fill-mode: both). */
.reveal {
animation: reveal 640ms var(--ease-out) calc(var(--i, 0) * 80ms) both;
}
@keyframes reveal {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { animation: none; opacity: 1; }
}
/* Responsive ------------------------------------------------------------- */
@media (max-width: 1080px) {
.hero-grid, [data-audience="master"] .hero-grid { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
.hero-card { padding: 48px 36px; }
.cards-grid { grid-template-columns: repeat(2, 1fr); }
.masters-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.footer-top { grid-template-columns: 1fr; gap: 40px; }
.ritual-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
.container { padding: 14px 20px; }
.header-inner {
padding: 12px 16px;
gap: 8px 12px;
flex-wrap: wrap;
}
.section { padding: 80px 20px; }
.hero-grid { padding: 24px 20px 0; }
.brand-lockup__full { display: none; }
.brand-lockup__mark { display: block; }
/* Десктоп-toggle прячется, мобильный (внутри .site-nav burger-меню) показывается. */
.audience-toggle--header { display: none; }
.site-nav .audience-toggle--mobile {
display: inline-grid;
width: 100%;
margin-bottom: 4px;
}
.audience-toggle button { padding: 7px 16px; font-size: 12px; }
/* Header-cabinet на мобиле: иконка-only, без текста.
Пользователь сохраняет доступ в личный кабинет, но кнопка не съедает
место под burger и main CTA. aria-label="Кабинет мастера" остаётся для SR. */
.header-cabinet {
font-size: 0;
padding: 8px 10px;
gap: 0;
min-width: 0;
}
.header-cabinet .icon { width: 18px; height: 18px; }
.site-header .btn--primary.btn--sm {
padding: 9px 14px;
font-size: 12px;
}
.site-nav { display: none; }
.menu-toggle {
display: inline-flex;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: 10px;
cursor: pointer;
}
.hero-card { padding: 40px 28px; }
.hero-search {
grid-template-columns: 1fr;
gap: 0;
padding: 6px;
border-radius: var(--r-xl);
max-width: 100%;
}
.hero-search > .btn { min-width: 0; width: 100%; }
.hero-search .select__trigger {
padding: 14px 14px;
border-radius: var(--r-lg);
}
.hero-search .select + .select::before {
left: 14px;
right: 14px;
top: 0;
bottom: auto;
width: auto;
height: 1px;
}
.hero-search .select__menu {
left: 0;
right: 0;
top: calc(100% + 8px);
}
.hero-search > .btn {
width: 100%;
justify-content: center;
border-radius: var(--r-lg);
padding: 14px 18px;
margin-top: 4px;
font-size: 14px;
}
.hero-stats { gap: 18px; flex-wrap: wrap; }
.section-head { flex-direction: column; align-items: flex-start; }
.section-head__meta { text-align: left; }
.cards-grid { grid-template-columns: 1fr; }
.masters-grid { grid-template-columns: 1fr 1fr; }
.why-grid { grid-template-columns: 1fr; }
.why-grid > div { border-right: 0; }
.site-footer { padding: 60px 20px 24px; }
.footer-top { gap: 32px; padding-bottom: 32px; }
.locations-grid { grid-template-columns: 1fr; gap: 20px; }
.footer-contact { flex-direction: column; align-items: flex-start; padding: 24px 0; }
.footer-contact__channels { width: 100%; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
.cta { padding: 56px 28px; }
.ritual-grid { gap: 32px; }
}
/* =========================================================================
Legal block — consent checkbox, document modal, cookie banner.
Кастомный чекбокс (не системный), молочно-лавандовый custom-error,
шире и скроллируемый doc-modal, ненавязчивый cookie-баннер снизу-слева.
========================================================================= */
/* Consent block ---------------------------------------------------------- */
.consent-block {
margin: 16px 0 8px;
}
.field-consent {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
user-select: none;
}
.field-consent input[type="checkbox"] {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.field-consent__box {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 6px;
border: 1.5px solid var(--ink-300);
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
transition: border-color 200ms var(--ease-out),
background 200ms var(--ease-out),
box-shadow 200ms var(--ease-out);
}
.field-consent__box svg {
width: 14px;
height: 14px;
color: #fff;
opacity: 0;
transform: scale(0.6);
transition: opacity 200ms var(--ease-out),
transform 240ms var(--ease-out);
}
.field-consent input:checked + .field-consent__box {
background: var(--zone-500);
border-color: var(--zone-500);
}
.field-consent input:checked + .field-consent__box svg {
opacity: 1;
transform: scale(1);
}
.field-consent input:focus-visible + .field-consent__box {
box-shadow: 0 0 0 3px var(--zone-tint);
}
.field-consent:hover .field-consent__box {
border-color: var(--zone-ring);
}
.field-consent__text {
font: 400 12px/1.55 var(--font-sans);
color: var(--ink-700);
}
.field-consent__text a {
color: var(--zone-600);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.field-consent__text a:hover {
color: var(--zone-700);
border-bottom-color: var(--zone-ring);
}
/* Custom error для чекбокса согласия — отдельный стиль (не pill, как у
обычных полей): молочный фон, лавандовый акцент, мягкое скругление. */
.consent-error {
margin-top: 10px;
padding: 10px 14px;
background: var(--lav-50);
border: 1px solid var(--lav-200);
border-radius: var(--r-md);
font: 500 12px/1.45 var(--font-sans);
color: var(--lav-700);
box-shadow: 0 2px 8px rgba(155, 123, 168, 0.08);
opacity: 0;
max-height: 0;
overflow: hidden;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 240ms var(--ease-out),
max-height 240ms var(--ease-out),
transform 240ms var(--ease-out),
margin-top 240ms var(--ease-out);
}
.consent-block.is-invalid .consent-error {
opacity: 1;
max-height: 80px;
transform: none;
pointer-events: auto;
}
.consent-block.is-invalid .field-consent__box {
border-color: var(--blush);
box-shadow: 0 0 0 3px rgba(208, 191, 177, 0.18);
}
/* Document modal --------------------------------------------------------- */
.modal--doc { z-index: 110; } /* поверх booking modal (z-index 100) */
.modal__panel--doc {
max-width: 640px;
max-height: calc(100vh - 64px);
display: flex;
flex-direction: column;
padding: 36px 36px 32px;
}
.doc-eyebrow { color: var(--zone-eyebrow); margin-bottom: 8px; }
.doc-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(24px, 3vw, 30px);
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0 0 20px;
padding-right: 36px; /* не наезжает на кнопку закрытия */
}
.doc-body {
overflow-y: auto;
padding-right: 8px;
font: 400 14px/1.65 var(--font-sans);
color: var(--ink-700);
flex: 1;
}
.doc-body h4 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-900);
margin: 22px 0 8px;
}
.doc-body h4:first-child { margin-top: 0; }
.doc-body p { margin: 0 0 12px; }
.doc-body ul { margin: 6px 0 14px; padding-left: 20px; }
.doc-body ul li { margin-bottom: 4px; }
.doc-body em {
display: inline-block;
margin-top: 8px;
padding: 8px 12px;
background: var(--surface-2);
border-radius: var(--r-sm);
font-style: normal;
font-size: 13px;
color: var(--ink-700);
border-left: 2px solid var(--lav-300);
}
.doc-body a { color: var(--zone-600); text-decoration: none; border-bottom: 1px solid var(--zone-ring); }
.doc-body a:hover { color: var(--zone-700); }
/* ============================================================
Правовые страницы /privacy /consent /terms /offer /cookies.
Подключаются через legal-page.twig. Типографика наследует
токены сайта (--font-display / --font-sans / --ink-* / --lav-*).
============================================================ */
.lav-doc-page {
max-width: 760px;
margin: 48px auto 72px;
padding: 0 24px;
}
.lav-doc__head {
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--ink-100, rgba(0,0,0,0.08));
}
.lav-doc__eyebrow {
display: inline-block;
font: 600 12px/1 var(--font-sans);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--zone-eyebrow, var(--lav-500));
margin-bottom: 12px;
}
.lav-doc__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(28px, 4vw, 40px);
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0 0 12px;
line-height: 1.15;
}
.lav-doc__date {
font: 400 14px/1.5 var(--font-sans);
color: var(--ink-500);
margin: 0;
}
.lav-doc__body {
font: 400 15px/1.7 var(--font-sans);
color: var(--ink-700);
}
.lav-doc__lead {
font-size: 16px;
color: var(--ink-800, var(--ink-900));
margin: 0 0 24px;
}
.lav-doc__body h2 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-900);
margin: 32px 0 12px;
}
.lav-doc__body h2:first-child { margin-top: 0; }
.lav-doc__body p { margin: 0 0 14px; }
.lav-doc__body a {
color: var(--zone-600, var(--lav-600));
text-decoration: none;
border-bottom: 1px solid var(--zone-ring, var(--lav-300));
transition: color var(--dur) var(--ease-out);
}
.lav-doc__body a:hover { color: var(--zone-700, var(--lav-700)); }
.lav-doc__list { margin: 6px 0 18px; padding-left: 22px; }
.lav-doc__list li { margin-bottom: 8px; }
.lav-doc__list--unstyled { list-style: none; padding-left: 0; }
.lav-doc__list--alpha { list-style: lower-alpha; }
.lav-doc__list--inner { margin-top: 8px; }
.lav-doc__notice {
margin: 18px 0;
padding: 14px 16px;
background: var(--surface-2, rgba(155, 123, 168, 0.08));
border-left: 2px solid var(--lav-300, #c9b5d6);
border-radius: var(--r-sm, 8px);
font-size: 14px;
color: var(--ink-700);
}
.lav-doc__requisites {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--ink-100, rgba(0,0,0,0.08));
}
.lav-doc-req__title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-900);
margin: 0 0 16px;
}
.lav-doc-req__list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 24px;
margin: 0;
font: 400 14px/1.55 var(--font-sans);
}
.lav-doc-req__list dt { color: var(--ink-500); font-weight: 400; }
.lav-doc-req__list dd { color: var(--ink-800, var(--ink-900)); margin: 0; }
.lav-doc-req__list a {
color: var(--zone-600, var(--lav-600));
text-decoration: none;
border-bottom: 1px solid var(--zone-ring, var(--lav-300));
}
@media (max-width: 600px) {
.lav-doc-page { margin: 24px auto 48px; padding: 0 16px; }
.lav-doc-req__list { grid-template-columns: 1fr; gap: 2px 0; }
.lav-doc-req__list dt { margin-top: 10px; }
}
/* Соблюдаем дизайн footer — ссылки на юр-документы спокойные и компактные */
.footer-legal { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer-legal a {
color: rgba(229, 223, 226, 0.62);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.footer-legal a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.3); }
.footer-legal > span[aria-hidden] { color: rgba(229, 223, 226, 0.3); }
/* Cookie banner ---------------------------------------------------------- */
.cookie-banner {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 90;
max-width: 420px;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--sh-3), 0 0 0 1px var(--border);
opacity: 0;
transform: translateY(12px);
transition: opacity 320ms var(--ease-out),
transform 320ms var(--ease-out);
}
.cookie-banner.is-shown {
opacity: 1;
transform: none;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
font: 400 12px/1.5 var(--font-sans);
color: var(--ink-700);
flex: 1;
}
.cookie-banner__text a {
color: var(--zone-600);
text-decoration: none;
border-bottom: 1px solid var(--zone-ring);
white-space: nowrap;
}
.cookie-banner__text a:hover { color: var(--zone-700); }
.cookie-banner > .btn {
flex-shrink: 0;
align-self: stretch;
}
@media (max-width: 720px) {
.cookie-banner {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
padding: 14px;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.cookie-banner > .btn { width: 100%; justify-content: center; }
.modal__panel--doc { padding: 28px 24px 24px; max-height: calc(100vh - 32px); }
.footer-legal { font-size: 11px; }
.field-consent__text { font-size: 12px; }
}
/* =========================================================================
Masters listing page (masters.html) — page head, category nav, filters,
master cards, cross-sell, booking-context plate.
========================================================================= */
/* Page head -------------------------------------------------------------- */
.masters-page__head {
padding: 140px 28px 56px;
position: relative;
/* учёт sticky-шапки 68px минус 88px hero-padding в индексе — здесь шапка
прозрачная, поэтому верхний padding щедрый, чтобы заголовок дышал */
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 8px;
font: 500 12px/1.4 var(--font-mono);
color: var(--ink-500);
margin-bottom: 16px;
}
.breadcrumb a {
color: var(--ink-700);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.breadcrumb a:hover { color: var(--zone-700); border-bottom-color: var(--zone-ring); }
.masters-page__head h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(40px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--ink-900);
margin: 12px 0 16px;
max-width: 760px;
}
.masters-page__subtitle {
font: 400 17px/1.6 var(--font-sans);
color: var(--ink-700);
margin: 0 0 24px;
max-width: 580px;
}
.masters-page__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip-pill {
display: inline-flex;
align-items: center;
font: 500 12px/1 var(--font-sans);
color: var(--ink-700);
background: var(--surface);
padding: 8px 14px;
border-radius: var(--r-pill);
border: 1px solid var(--border);
}
.chip-pill--count { background: var(--zone-tint); color: var(--zone-700); border-color: transparent; }
.chip-pill--count strong { font-weight: 600; }
/* Category nav ----------------------------------------------------------- */
.cat-nav-wrap {
position: sticky;
top: 68px;
z-index: 30;
background: rgba(251, 248, 245, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
padding: 0 28px;
}
.cat-nav {
display: flex;
gap: 4px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 14px 0;
scrollbar-width: none;
max-width: 1240px;
margin: 0 auto;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav__item {
flex-shrink: 0;
background: transparent;
border: 0;
padding: 10px 18px;
font: 500 14px/1 var(--font-sans);
color: var(--ink-700);
border-radius: var(--r-pill);
cursor: pointer;
white-space: nowrap;
transition: background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.cat-nav__item:hover { background: var(--zone-soft-hover); }
.cat-nav__item.is-active {
background: var(--zone-500);
color: #fff;
font-weight: 600;
}
/* List + filters --------------------------------------------------------- */
.masters-page__list { padding: 56px 28px 80px; }
.masters-filters {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: end;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.masters-filters__group { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.masters-filters__group label {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
}
.masters-filters > .btn { margin-left: auto; }
.masters-list { display: flex; flex-direction: column; gap: 28px; }
/* Master card ----------------------------------------------------------- */
.master-card {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
align-items: stretch;
min-height: 400px;
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
overflow: hidden;
transition: box-shadow 320ms var(--ease-out),
transform 320ms var(--ease-out);
}
.master-card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.master-card__photo {
background: var(--surface-3) center/cover no-repeat;
position: relative;
width: 100%;
height: 100%;
min-height: 400px;
}
.master-card__badge {
position: absolute;
top: 16px; left: 16px;
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: #fff;
color: var(--lav-700);
border-radius: var(--r-pill);
font: 500 12px/1 var(--font-sans);
box-shadow: var(--sh-1);
}
.master-card__body {
padding: 32px 36px;
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.master-card__head h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 6px 0 4px;
}
.master-card__addr {
font: 400 13px/1.5 var(--font-sans);
color: var(--ink-500);
margin: 0;
}
.master-card__bio {
font: 400 15px/1.6 var(--font-sans);
color: var(--ink-700);
margin: 0;
font-style: italic;
max-width: 580px;
}
.master-card__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.master-card__col h4 {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
margin: 0 0 10px;
}
.master-card__techs,
.master-card__prices {
list-style: none;
padding: 0;
margin: 0;
font: 400 14px/1.55 var(--font-sans);
color: var(--ink-700);
}
.master-card__techs li {
position: relative;
padding-left: 14px;
margin-bottom: 4px;
}
.master-card__techs li::before {
content: '·';
position: absolute;
left: 0;
color: var(--zone-500);
}
.master-card__prices li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed var(--border);
}
.master-card__prices li:last-child { border-bottom: 0; }
.master-card__prices .price {
font-family: var(--font-display);
color: var(--ink-900);
white-space: nowrap;
}
.master-card__offers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.offer {
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--lav-50);
border-left: 2px solid var(--lav-400);
}
.offer--package {
background: var(--surface-2);
border-left-color: var(--blush);
}
.offer h4 {
font: 600 10px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-700);
margin: 0 0 6px;
}
.offer p {
font: 500 13px/1.45 var(--font-sans);
color: var(--ink-900);
margin: 0;
}
.master-card__cta {
align-self: flex-start;
min-width: 280px;
justify-content: center;
}
/* Empty state ------------------------------------------------------------ */
.masters-empty {
text-align: center;
padding: 80px 24px 40px;
border: 1px dashed var(--border);
border-radius: var(--r-xl);
}
.masters-empty h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(24px, 3vw, 32px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 12px 0 12px;
}
.masters-empty p {
font: 400 15px/1.6 var(--font-sans);
color: var(--ink-700);
margin: 0 auto 24px;
max-width: 460px;
}
/* Related (cross-sell) --------------------------------------------------- */
.masters-page__related { padding: 96px 28px; }
.related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 28px;
}
.related-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--sh-2);
text-decoration: none;
color: inherit;
transition: box-shadow 320ms var(--ease-out),
transform 320ms var(--ease-out);
}
.related-card:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.related-card .photo {
aspect-ratio: 4 / 3;
background: var(--surface-3) center/cover no-repeat;
transition: transform 480ms var(--ease-out);
}
.related-card:hover .photo { transform: scale(1.02); }
.related-card__body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.related-card__body h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 20px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0;
}
.related-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 12px/1 var(--font-sans);
color: var(--zone-600);
transition: color var(--dur) var(--ease-out),
transform 320ms var(--ease-out);
}
.related-card__cta svg { transition: transform 320ms var(--ease-out); }
.related-card:hover .related-card__cta svg { transform: translateX(3px); }
.related-card:hover .related-card__cta { color: var(--zone-700); }
/* Booking-context plate (master pre-select) ----------------------------- */
.booking-context {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
margin-bottom: 16px;
background: var(--zone-tint);
border-radius: var(--r-md);
border-left: 2px solid var(--zone-500);
}
.booking-context__label {
font: 600 10px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--zone-700);
}
.booking-context__master {
font: 600 16px/1.2 var(--font-sans);
color: var(--ink-900);
}
.booking-context__meta {
font: 400 13px/1.4 var(--font-sans);
color: var(--ink-700);
}
/* Responsive ------------------------------------------------------------- */
@media (max-width: 960px) {
.master-card { grid-template-columns: 1fr; min-height: 0; }
.master-card__photo { width: 100%; aspect-ratio: 4 / 3; height: auto; min-height: 0; }
.master-card__body { padding: 24px 24px 28px; }
.master-card__cols { grid-template-columns: 1fr; gap: 18px; padding-top: 14px; }
.master-card__offers { grid-template-columns: 1fr; }
.master-card__cta { width: 100%; min-width: 0; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.masters-page__head { padding: 100px 20px 36px; }
.masters-page__head h1 { font-size: 36px; }
.masters-page__list { padding: 40px 20px 60px; }
.masters-page__related { padding: 56px 20px; }
.related-grid { grid-template-columns: 1fr; gap: 14px; }
.master-card__body { padding: 20px 20px 24px; gap: 16px; }
.masters-filters { gap: 10px; }
.masters-filters__group { min-width: 140px; flex: 1; }
.masters-filters > .btn { margin-left: 0; width: 100%; }
.cat-nav-wrap { padding: 0 16px; }
.cat-nav { padding: 10px 0; }
.cat-nav__item { padding: 8px 14px; font-size: 13px; }
}
/* =========================================================================
Master cabinet page (cabinet.html) — dashboard, KPI, referral, leaderboard,
stats, profile preview, quick actions.
========================================================================= */
/* Section spacing on cabinet -------------------------------------------- */
.cab-section { padding: 96px 28px; position: relative; }
.cab-section .container { padding: 0 28px; }
.cab-section + .cab-section { padding-top: 96px; }
/* Greeting --------------------------------------------------------------- */
.cab-greeting { padding-top: 140px; }
.cab-greeting h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.02;
letter-spacing: -0.018em;
margin: 12px 0 12px;
color: var(--ink-900);
}
.cab-greeting__sub {
font: 400 17px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0 0 56px;
max-width: 560px;
}
/* KPI grid -------------------------------------------------------------- */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.kpi-card {
background: var(--bg); /* кремовая база — #FBF8F5 */
border: 1px solid var(--sand); /* интерьерный sand-border #DFD6CE */
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 220px;
}
.kpi-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.kpi-card__label {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
}
.kpi-card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 4px 0 0;
line-height: 1.15;
}
.kpi-card__big {
font-size: 36px !important;
line-height: 1 !important;
letter-spacing: -0.02em;
margin-top: 6px !important;
}
.kpi-card__big .kpi-card__unit {
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
color: var(--ink-700);
letter-spacing: 0;
}
.kpi-card__meta {
font: 400 13px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.kpi-card__hint {
font: 400 12px/1.45 var(--font-sans);
color: var(--ink-500);
margin: auto 0 0;
}
.kpi-card__rows {
display: flex;
flex-direction: column;
gap: 6px;
margin: auto 0 0;
padding-top: 10px;
border-top: 1px solid var(--sand); /* sand-разделитель — #DFD6CE */
}
.kpi-card__rows > div { display: flex; justify-content: space-between; gap: 8px; }
.kpi-card__rows dt { font: 400 12px/1.4 var(--font-sans); color: var(--ink-500); margin: 0; }
.kpi-card__rows dd {
font: 600 12px/1.4 var(--font-sans);
color: var(--ink-900);
margin: 0;
font-family: var(--font-mono);
}
.kpi-card__split {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
font: 500 13px/1.4 var(--font-sans);
color: var(--ink-700);
}
.kpi-card__split li { display: flex; align-items: center; gap: 8px; }
.kpi-card__split--multi {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
font-size: 12px;
}
/* Status tags + dots --------------------------------------------------- */
.status-tag {
display: inline-flex;
align-items: center;
align-self: flex-start; /* во flex-column-родителе по умолчанию stretch — берём по контенту */
width: fit-content;
max-width: 100%;
gap: 6px;
padding: 5px 11px;
border-radius: var(--r-pill);
font: 600 11px/1 var(--font-sans);
letter-spacing: 0.02em;
white-space: nowrap;
flex-shrink: 0;
cursor: default;
}
.status-tag--paid { background: rgba(110, 143, 106, 0.15); color: #5C7A58; }
.status-tag--pending { background: var(--lav-100); color: var(--lav-700); }
.status-tag--check { background: rgba(208, 191, 177, 0.4); color: #6F5A4A; }
.status-tag--cancel { background: rgba(182, 101, 91, 0.14); color: #9A4F46; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot--paid { background: #6E8F6A; }
.dot--pending { background: var(--lav-500); }
.dot--cancel { background: #B6655B; }
/* Rental block ---------------------------------------------------------- */
.rental-block {
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
overflow: hidden;
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
}
.rental-block__photo {
background: var(--surface-3) center/cover no-repeat;
min-height: 100%;
aspect-ratio: 4 / 5;
}
.rental-block__body {
padding: 32px 36px;
display: flex;
flex-direction: column;
gap: 24px;
}
.rental-block__rows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 28px;
margin: 0;
}
.rental-block__rows > div { display: flex; flex-direction: column; gap: 4px; }
.rental-block__rows dt {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-500);
}
.rental-block__rows dd {
font: 500 16px/1.3 var(--font-sans);
color: var(--ink-900);
margin: 0;
}
.rental-block__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Referral grid (promo + rules) ---------------------------------------- */
.referral-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 20px;
margin-bottom: 40px;
}
.promo-card {
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
padding: 28px 30px;
display: flex;
flex-direction: column;
gap: 16px;
}
.promo-card__label {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
}
.promo-card__code-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.promo-card__code {
font-family: var(--font-display);
font-weight: 500;
font-size: 36px;
letter-spacing: 0.04em;
color: var(--ink-900);
background: var(--zone-tint);
padding: 10px 22px;
border-radius: var(--r-md);
flex: 1 1 auto;
text-align: center;
}
.promo-card__hint {
font: 400 13px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.promo-card__hint strong { color: var(--zone-700); }
.rules-card {
background: var(--surface-2);
border-radius: var(--r-xl);
padding: 28px 30px;
border-left: 3px solid var(--lav-300);
}
.rules-card h4 {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-700);
margin: 0 0 14px;
}
.rules-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
font: 400 13px/1.5 var(--font-sans);
color: var(--ink-700);
}
.rules-card li {
position: relative;
padding-left: 16px;
}
.rules-card li::before {
content: '·';
position: absolute;
left: 0;
top: 0;
color: var(--lav-500);
font-weight: 600;
}
.rules-card strong { color: var(--ink-900); }
/* How it works infographic --------------------------------------------- */
.how-it-works {
background: #fff;
border-radius: var(--r-xl);
padding: 36px 36px 32px;
box-shadow: var(--sh-1);
margin-bottom: 28px;
}
.how-it-works h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0 0 28px;
}
.how-it-works__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
position: relative;
}
.how-it-works__steps li {
position: relative;
padding: 0 14px 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.how-it-works__steps li:not(:last-child)::after {
content: '';
position: absolute;
top: 16px;
right: 0;
width: calc(100% - 56px);
height: 1px;
background: linear-gradient(90deg, var(--lav-300), transparent);
}
.how-it-works__num {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--zone-tint);
color: var(--zone-700);
display: inline-flex;
align-items: center;
justify-content: center;
font: 600 14px/1 var(--font-sans);
flex-shrink: 0;
}
.how-it-works__steps p {
font: 500 13px/1.45 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
/* Motivational hint ---------------------------------------------------- */
.cab-hint {
margin: 24px 0 0;
padding: 14px 18px;
background: var(--lav-50);
border-left: 2px solid var(--lav-400);
border-radius: var(--r-md);
font: 500 13px/1.55 var(--font-sans);
color: var(--ink-700);
}
/* Invitee grid ---------------------------------------------------------- */
.invitee-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.invitee-card {
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
padding: 22px;
display: flex;
align-items: flex-start;
gap: 18px;
transition: box-shadow 320ms var(--ease-out),
transform 320ms var(--ease-out);
}
.invitee-card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.invitee-card__avatar {
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--zone-500);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font: 600 22px/1 var(--font-display);
}
.invitee-card__avatar--photo {
background: var(--surface-3) center top / cover no-repeat;
color: transparent;
}
.invitee-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.invitee-card__body h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.005em;
color: var(--ink-900);
margin: 0;
}
.invitee-card__meta {
font: 400 13px/1.4 var(--font-sans);
color: var(--ink-500);
margin: 0 0 6px;
}
.invitee-card__bonus {
margin: 6px 0 0;
font: 600 13px/1.4 var(--font-sans);
color: var(--zone-700);
}
.invitee-card__bonus--muted {
color: var(--ink-500);
font-weight: 400;
}
/* Leaderboard ----------------------------------------------------------- */
.leaderboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.leaderboard__row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: 18px 24px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
}
.leaderboard__row--mine {
background: var(--zone-tint);
box-shadow: 0 0 0 1.5px var(--zone-500);
}
.leaderboard__rank {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
color: var(--ink-500);
width: 32px;
text-align: center;
}
.leaderboard__row--mine .leaderboard__rank { color: var(--zone-700); }
.leaderboard__person { display: flex; align-items: center; gap: 14px; }
.leaderboard__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--ink-300);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font: 600 16px/1 var(--font-display);
flex-shrink: 0;
}
.leaderboard__avatar--photo { background: var(--surface-3) center top / cover no-repeat; color: transparent; }
.leaderboard__person h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 17px;
color: var(--ink-900);
margin: 0 0 2px;
letter-spacing: -0.005em;
}
.leaderboard__person p {
font: 400 12px/1.4 var(--font-sans);
color: var(--ink-500);
margin: 0;
}
.leaderboard__you {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border-radius: var(--r-pill);
background: var(--zone-500);
color: #fff;
font: 600 10px/1 var(--font-sans);
vertical-align: 1px;
}
.leaderboard__stats { display: flex; gap: 24px; }
.leaderboard__stats > div { text-align: center; }
.leaderboard__stats strong {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
color: var(--ink-900);
line-height: 1;
}
.leaderboard__stats span {
display: block;
font: 500 10px/1.4 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-500);
margin-top: 4px;
}
/* Leads stats ----------------------------------------------------------- */
.leads-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.leads-card {
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
padding: 26px 28px;
}
.leads-card h3 {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
margin: 0 0 18px;
}
.leads-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.leads-list li {
display: flex;
align-items: center;
gap: 8px;
font: 500 14px/1.4 var(--font-sans);
color: var(--ink-700);
padding: 8px 0;
border-bottom: 1px dashed var(--border);
}
.leads-list li:last-child { border-bottom: 0; }
.leads-list li > span:first-child:not(.dot) { flex: 1; }
.leads-list li .dot { flex-shrink: 0; }
.leads-list li .dot + * { flex: 1; }
.leads-list li strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
color: var(--ink-900);
}
.leads-bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.leads-bars li {
display: grid;
grid-template-columns: 130px 1fr auto;
align-items: center;
gap: 12px;
}
.leads-bars__name {
font: 500 13px/1.3 var(--font-sans);
color: var(--ink-700);
}
.leads-bars__bar {
height: 6px;
border-radius: var(--r-pill);
background: var(--lav-100);
overflow: hidden;
display: block;
}
.leads-bars__bar > span {
display: block;
height: 100%;
width: var(--w, 0%);
background: linear-gradient(90deg, var(--lav-500), var(--lav-400));
border-radius: var(--r-pill);
}
.leads-bars__count {
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: var(--ink-900);
}
/* Offers list ---------------------------------------------------------- */
.offers-list { display: flex; flex-direction: column; gap: 12px; }
.offer-row {
display: flex;
align-items: center;
gap: 24px;
padding: 22px 26px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
}
.offer-row > div:first-child { flex: 1; }
.offer-row h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.005em;
color: var(--ink-900);
margin: 0 0 4px;
}
.offer-row p {
font: 400 13px/1.45 var(--font-sans);
color: var(--ink-500);
margin: 0;
}
.offer-row__meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.offer-row__date { font: 400 12px/1 var(--font-mono); color: var(--ink-500); }
/* Profile preview ------------------------------------------------------ */
.profile-preview {
display: grid;
grid-template-columns: minmax(280px, 320px) 1fr;
gap: 36px;
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
overflow: hidden;
}
.profile-preview__photo {
background: var(--surface-3) center top / cover no-repeat;
aspect-ratio: 3 / 4;
min-height: 100%;
}
.profile-preview__body { padding: 32px 36px 32px 0; }
.profile-preview__body h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 6px 0 4px;
}
.profile-preview__addr {
font: 400 13px/1.5 var(--font-sans);
color: var(--ink-500);
margin: 0 0 14px;
}
.profile-preview__bio {
font: 400 15px/1.6 var(--font-sans);
color: var(--ink-700);
font-style: italic;
margin: 0 0 20px;
max-width: 560px;
}
.profile-preview__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.profile-preview__cols h5 {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
margin: 0 0 10px;
}
.profile-preview__cols ul {
list-style: none;
padding: 0;
margin: 0;
font: 400 14px/1.55 var(--font-sans);
color: var(--ink-700);
}
.profile-preview__cols li { padding: 4px 0; }
.profile-preview__prices li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); }
.profile-preview__prices li:last-child { border-bottom: 0; }
.profile-preview__prices li > span:last-child { font-family: var(--font-display); color: var(--ink-900); }
/* Quick actions -------------------------------------------------------- */
.quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.quick-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 22px 24px;
cursor: pointer;
font-family: inherit;
text-align: left;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
transform 320ms var(--ease-out);
}
.quick-card:hover {
border-color: var(--zone-ring);
box-shadow: var(--sh-2);
transform: translateY(-2px);
}
.quick-card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 17px;
letter-spacing: -0.005em;
color: var(--ink-900);
margin: 0;
}
.quick-card p {
font: 400 13px/1.45 var(--font-sans);
color: var(--ink-500);
margin: 0;
}
/* Toast (copied confirmation) ------------------------------------------ */
.toast {
position: fixed;
left: 50%;
bottom: 32px;
transform: translate(-50%, 12px);
z-index: 120;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: var(--ink-900);
color: #fff;
border-radius: var(--r-pill);
font: 500 14px/1 var(--font-sans);
box-shadow: var(--sh-3);
opacity: 0;
pointer-events: none;
transition: opacity 280ms var(--ease-out),
transform 280ms var(--ease-out);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: #6E8F6A; }
/* Cabinet — Messages, Reminders, Support ------------------------------- */
.msg-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.msg-item {
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
padding: 22px 26px;
border-left: 3px solid var(--border);
}
.msg-item--unread { border-left-color: var(--lav-500); }
.msg-item__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.msg-item__from {
font: 600 12px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
}
.msg-item__date {
font: 400 12px/1 var(--font-mono);
color: var(--ink-500);
}
.msg-item__badge {
font: 600 11px/1 var(--font-sans);
padding: 4px 8px;
border-radius: var(--r-pill);
background: var(--lav-100);
color: var(--lav-700);
letter-spacing: 0.04em;
}
.msg-item h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0 0 6px;
}
.msg-item p {
font: 400 14px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.rem-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.rem-card {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
padding: 22px 24px;
}
.rem-card__icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--lav-50);
color: var(--lav-700);
}
.rem-card__label {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
}
.rem-card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 6px 0 6px;
}
.rem-card p {
font: 400 13px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
.support-form {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 720px;
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
padding: 28px 32px;
}
.support-form .btn {
align-self: flex-start;
min-width: 200px;
justify-content: center;
}
.support-form__msg {
font: 500 14px/1.5 var(--font-sans);
color: var(--lav-700);
background: var(--lav-50);
padding: 12px 16px;
border-radius: var(--r-md);
margin: 0;
}
.support-form__msg[hidden] { display: none; }
@media (max-width: 720px) {
.msg-item { padding: 18px 20px; }
.rem-grid { grid-template-columns: 1fr; }
.rem-card { padding: 18px 20px; }
.support-form { padding: 22px 20px; }
.support-form .btn { width: 100%; }
}
/* Cabinet responsive --------------------------------------------------- */
@media (max-width: 1080px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
.referral-grid { grid-template-columns: 1fr; }
.how-it-works__steps { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
.how-it-works__steps li::after { display: none; }
.leads-grid { grid-template-columns: 1fr; }
.quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.cab-section { padding: 64px 20px; }
.cab-greeting { padding-top: 100px; }
.cab-greeting h1 { font-size: 36px; }
.kpi-grid { grid-template-columns: 1fr; }
.rental-block { grid-template-columns: 1fr; }
.rental-block__photo { aspect-ratio: 16 / 10; }
.rental-block__body { padding: 24px; }
.rental-block__rows { grid-template-columns: 1fr; }
.promo-card__code { font-size: 28px; }
.how-it-works__steps { grid-template-columns: 1fr; }
.leaderboard__row { grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; }
.leaderboard__stats { grid-column: 1 / -1; justify-content: flex-start; gap: 18px; }
.leads-bars li { grid-template-columns: 100px 1fr auto; gap: 10px; }
.offer-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.offer-row__meta { width: 100%; justify-content: space-between; }
.profile-preview { grid-template-columns: 1fr; }
.profile-preview__photo { aspect-ratio: 16 / 10; min-height: 0; }
.profile-preview__body { padding: 24px; }
.profile-preview__cols { grid-template-columns: 1fr; gap: 18px; }
.quick-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
Auth modal (вход в кабинет мастера) — 3 view: login → recovery → sent.
Login сидит в потоке, остальные absolute поверх. Свопы через классы
.is-recovery / .is-sent на .modal__panel--auth.
========================================================================= */
.modal__panel--auth { max-width: 460px; }
/* Auth-модал — это вход в МАСТЕРСКУЮ зону, поэтому primary-кнопка
и italic-акцент берут master-палитру независимо от текущей audience
страницы (модалку открывают и из client-режима тоже). */
.modal__panel--auth .btn--primary {
background: var(--lav-700);
}
.modal__panel--auth .btn--primary:hover {
background: var(--lav-500);
}
.modal__panel--auth .serif-italic {
color: var(--lav-700);
}
/* .modal__view--auth-login — default-view в потоке, определяет высоту
панели; отдельный rule не нужен. Recovery и Sent абсолютно поверх. */
.modal__view--auth-recovery,
.modal__view--auth-sent {
position: absolute;
inset: 36px;
display: flex;
flex-direction: column;
justify-content: flex-start;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
}
.modal__view--auth-sent {
align-items: center;
text-align: center;
justify-content: center;
}
/* Login → Recovery */
.modal__panel--auth.is-recovery .modal__view--auth-login {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}
.modal__panel--auth.is-recovery .modal__view--auth-recovery {
opacity: 1;
transform: none;
pointer-events: auto;
}
/* Recovery → Sent */
.modal__panel--auth.is-sent .modal__view--auth-login,
.modal__panel--auth.is-sent .modal__view--auth-recovery {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}
.modal__panel--auth.is-sent .modal__view--auth-sent {
opacity: 1;
transform: none;
pointer-events: auto;
}
.modal__view--auth-sent h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 18px 0 10px;
max-width: 380px;
}
.modal__view--auth-sent p {
font: 400 15px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0;
max-width: 360px;
}
/* Auth «забыли пароль» / «вернуться» — текстовая кнопка-ссылка */
.auth-row {
display: flex;
justify-content: flex-end;
margin: -2px 0 8px;
}
.auth-link {
background: transparent;
border: 0;
padding: 4px 0;
cursor: pointer;
font: 500 12px/1.4 var(--font-sans);
color: var(--zone-600);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.auth-link:hover {
color: var(--zone-700);
border-bottom-color: var(--zone-ring);
}
.auth-link--centered {
align-self: center;
margin: 12px auto 0;
}
/* =========================================================================
Cabinet rental — secondary button on cards, drawer modal, similar,
fallback / empty / waitlist blocks.
========================================================================= */
/* Room card actions row (Забронировать + Посмотреть) ------------------- */
.room-card__media {
display: block;
width: 100%;
position: relative; /* anchor для .status-pill — иначе при absolute-позиционировании pill уезжает в угол страницы */
border: 0;
padding: 0;
background: none;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
}
.room-card__media .photo {
display: block;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.room-card__media .status-pill {
position: absolute;
top: 14px;
left: 14px;
}
.room-card__price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.room-card__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.room-card__actions > .btn { flex: 1 1 auto; justify-content: center; }
.room-card.is-busy .room-card__media { cursor: pointer; } /* всё равно можно посмотреть */
/* Fallback block (Не нашли подходящий?) — только для master-аудитории --- */
.rooms-fallback { display: none; }
[data-audience="master"] .rooms-fallback {
display: grid;
margin-top: 36px;
padding: 32px 36px;
background: #fff;
border-radius: var(--r-xl);
box-shadow: var(--sh-1);
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
border: 1px dashed var(--border-strong);
}
.rooms-fallback[hidden] { display: none; }
.rooms-fallback__body { max-width: 540px; }
.rooms-fallback h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 8px 0 8px;
}
.rooms-fallback p {
font: 400 14px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0;
}
/* Empty state (нет кабинетов в городе) --------------------------------- */
.rooms-empty {
text-align: center;
padding: 56px 28px 36px;
background: var(--surface-2);
border-radius: var(--r-xl);
border: 1px dashed var(--border);
margin-bottom: 28px;
}
.rooms-empty[hidden] { display: none; }
.rooms-empty h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 12px auto;
max-width: 520px;
}
.rooms-empty p {
font: 400 14px/1.55 var(--font-sans);
color: var(--ink-700);
margin: 0 auto 22px;
max-width: 420px;
}
/* Drawer modal --------------------------------------------------------- */
.modal--drawer { z-index: 105; } /* ниже doc/auth, выше booking */
.modal__panel--drawer {
max-width: 920px;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
padding: 36px 36px 32px;
}
.drawer-body {
overflow-y: auto;
padding-right: 4px;
}
.drawer-eyebrow { color: var(--zone-eyebrow); margin-bottom: 8px; }
.drawer-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 38px);
line-height: 1.05;
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 0 0 24px;
padding-right: 36px;
}
/* Drawer gallery */
.drawer-gallery {
display: grid;
grid-template-columns: 1fr 200px;
grid-template-rows: 1fr;
gap: 12px;
margin-bottom: 28px;
}
.drawer-gallery__main {
border-radius: var(--r-lg);
background: var(--surface-3) center/cover no-repeat;
aspect-ratio: 16 / 10;
position: relative;
transition: background-image 320ms var(--ease-out);
}
.drawer-gallery__main .status-pill {
position: absolute;
top: 16px;
left: 16px;
}
.drawer-gallery__thumbs {
display: flex;
flex-direction: column;
gap: 12px;
}
.drawer-gallery__thumb {
flex: 1;
border: 0;
border-radius: var(--r-md);
background: var(--surface-3) center/cover no-repeat;
cursor: pointer;
transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
min-height: 70px;
}
.drawer-gallery__thumb:hover {
transform: scale(1.02);
box-shadow: var(--sh-2);
}
/* Drawer info + side */
.drawer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--border);
margin-bottom: 28px;
}
.drawer-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
margin: 0;
}
.drawer-info > div { display: flex; flex-direction: column; gap: 4px; }
.drawer-info dt {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-500);
}
.drawer-info dd {
font: 500 16px/1.3 var(--font-sans);
color: var(--ink-900);
margin: 0;
}
.drawer-side {
display: flex;
flex-direction: column;
gap: 18px;
background: var(--surface-2);
border-radius: var(--r-lg);
padding: 22px 24px;
}
.drawer-bio {
font: 400 14px/1.6 var(--font-sans);
color: var(--ink-700);
margin: 0;
font-style: italic;
}
.drawer-cta { width: 100%; justify-content: center; }
/* Tariff selector inside drawer ----------------------------------------- */
.drawer-tariff {
margin-top: 28px;
padding: 28px;
background: #fff;
border-radius: var(--r-xl);
border: 1px solid var(--border);
}
.drawer-tariff__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 8px 0 8px;
}
.drawer-tariff__sub {
font: 400 14px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0 0 24px;
max-width: 580px;
}
.tariff-layout {
display: grid;
grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.tariff-layout__main { min-width: 0; }
.tariff-layout__aside {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.tariff-tabs {
position: relative;
display: flex;
gap: 0;
padding: 6px;
background: var(--surface-2);
border-radius: var(--r-pill);
margin-bottom: 20px;
}
.tariff-indicator {
position: absolute;
top: 6px;
bottom: 6px;
left: 6px;
width: calc((100% - 12px) / 4);
background: #fff;
border-radius: var(--r-pill);
box-shadow: var(--sh-1);
transform: translateX(0);
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
pointer-events: none;
z-index: 0;
}
.tariff-tab {
position: relative;
z-index: 1;
flex: 1 1 0;
min-width: 0;
background: transparent;
border: 0;
padding: 10px 12px;
font: 600 13px/1 var(--font-sans);
color: var(--ink-700);
border-radius: var(--r-pill);
cursor: pointer;
transition: color 220ms var(--ease-out);
white-space: nowrap;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.tariff-tab svg { flex-shrink: 0; opacity: 0.85; }
.tariff-tab:hover { color: var(--ink-900); }
.tariff-tab.is-active { color: var(--ink-900); }
.tariff-tab.is-active svg { opacity: 1; color: var(--lav-700); }
.tariff-pane { display: none; }
.tariff-pane.is-active { display: block; }
.tariff-pane__lead {
font: 400 14px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0 0 14px;
}
.tariff-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.tariff-options--single { grid-template-columns: 1fr; }
.tariff-option {
text-align: left;
background: var(--surface-2);
border: 1.5px solid transparent;
border-radius: var(--r-lg);
padding: 18px 20px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 100%;
transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform 240ms var(--ease-out);
}
.tariff-option:hover { background: var(--lav-50); }
.tariff-option.is-active {
background: var(--lav-50);
border-color: var(--lav-500);
}
.tariff-option--large {
padding: 24px 26px;
gap: 12px;
}
.tariff-option__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.tariff-option__name {
font: 600 13px/1 var(--font-sans);
color: var(--ink-900);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tariff-option__bonus {
font: 600 11px/1 var(--font-sans);
color: #5C7A58;
background: rgba(110, 143, 106, 0.16);
padding: 5px 10px;
border-radius: var(--r-pill);
letter-spacing: 0.02em;
white-space: nowrap;
}
.tariff-option__price {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.tariff-option__price strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 26px;
letter-spacing: -0.012em;
color: var(--ink-900);
}
.tariff-option--large .tariff-option__price strong { font-size: 30px; }
.tariff-option__old {
font: 400 13px/1 var(--font-sans);
color: var(--ink-500);
text-decoration: line-through;
}
.tariff-option__per {
font: 500 12px/1.4 var(--font-mono);
color: var(--ink-700);
}
.tariff-option__save {
font: 600 12px/1 var(--font-sans);
color: #5C7A58;
background: rgba(110, 143, 106, 0.16);
padding: 5px 10px;
border-radius: var(--r-pill);
align-self: flex-start;
width: fit-content;
}
.tariff-option__benefits {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 16px;
}
.tariff-option__benefits li {
font: 400 13px/1.4 var(--font-sans);
color: var(--ink-700);
position: relative;
padding-left: 18px;
}
.tariff-option__benefits li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--lav-300);
}
/* Информационная плашка под пакетами часов */
.tariff-info {
display: grid;
grid-template-columns: 24px 1fr;
gap: 10px;
align-items: start;
margin-top: 14px;
padding: 12px 14px;
background: var(--lav-50);
border-radius: var(--r-md);
}
.tariff-info svg { color: var(--lav-700); margin-top: 1px; }
.tariff-info p {
margin: 0;
font: 500 13px/1.5 var(--font-sans);
color: var(--lav-700);
}
.tariff-promo {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: end;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.tariff-promo__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.tariff-promo__field span {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-700);
}
.tariff-promo__field input {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 10px 12px;
font: 500 14px/1.4 var(--font-sans);
background: #fff;
color: var(--ink-900);
outline: none;
transition: border-color var(--dur) var(--ease-out);
}
.tariff-promo__field input:focus { border-color: var(--lav-500); }
.tariff-promo__msg {
grid-column: 1 / -1;
font: 500 13px/1.4 var(--font-sans);
margin: 0;
padding: 8px 12px;
border-radius: var(--r-md);
}
.tariff-promo__msg[hidden] { display: none; }
.tariff-promo__msg.is-success { background: var(--lav-50); color: var(--lav-700); }
.tariff-promo__msg.is-error { background: rgba(208, 191, 177, 0.18); color: #6F5A4A; }
.tariff-summary {
margin: 0;
padding: 22px 24px;
background: #fff;
border-radius: var(--r-xl);
border: 1px solid var(--border);
box-shadow: var(--sh-1);
}
.tariff-summary > .eyebrow {
margin-bottom: 4px;
}
.tariff-summary h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0 0 14px;
text-transform: none;
}
.tariff-summary__rows {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.tariff-summary__rows > div {
display: flex;
justify-content: space-between;
gap: 12px;
font: 400 14px/1.4 var(--font-sans);
color: var(--ink-700);
}
.tariff-summary__rows dt { margin: 0; }
.tariff-summary__rows dd { margin: 0; color: var(--ink-900); font-weight: 500; }
.tariff-summary__row--strike dd { text-decoration: line-through; color: var(--ink-500); font-weight: 400; }
.tariff-summary__row--save dd { color: #5C7A58; font-weight: 600; }
.tariff-summary__row--total {
border-top: 1px solid var(--border);
padding-top: 8px;
margin-top: 4px;
}
.tariff-summary__row--total dt { font-weight: 600; color: var(--ink-900); }
.tariff-summary__row--total dd {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
color: var(--ink-900);
}
.tariff-summary .drawer-cta {
margin-top: 16px;
width: 100%;
justify-content: center;
}
.tariff-note {
font: 400 12px/1.5 var(--font-sans);
color: var(--ink-500);
margin: 14px 0 0;
}
.tariff-note--abo {
margin-top: 12px;
padding: 10px 14px;
background: var(--lav-50);
border-radius: var(--r-md);
color: var(--lav-700);
}
.drawer-busy-cta { margin-top: 24px; }
@media (max-width: 1080px) {
.tariff-layout { grid-template-columns: 1fr; gap: 24px; }
.tariff-layout__aside { position: static; top: auto; }
}
@media (max-width: 720px) {
.drawer-tariff { padding: 22px 18px; }
.tariff-tabs { padding: 4px; }
.tariff-indicator { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); }
.tariff-tab { padding: 8px 6px; font-size: 12px; gap: 4px; }
.tariff-tab svg { width: 14px; height: 14px; }
.tariff-options { grid-template-columns: 1fr; }
.tariff-option__benefits { grid-template-columns: 1fr; }
.tariff-summary { padding: 20px; }
.tariff-promo { grid-template-columns: 1fr; align-items: stretch; }
}
/* Room card: «от» prefix + formats sub-line ----------------------------- */
.room-card__price .from {
font: 500 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-500);
margin-right: 4px;
vertical-align: 2px;
}
.room-card__formats {
display: block;
font: 400 12px/1.4 var(--font-sans);
color: var(--ink-500);
margin-top: 4px;
}
/* Cabinet detail page (cabinet-detail.html) ---------------------------- */
.cabinet-page {
max-width: 1080px;
margin: 0 auto;
padding: 100px 28px 80px;
}
.cabinet-page__back {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 13px/1 var(--font-sans);
color: var(--ink-700);
text-decoration: none;
margin-bottom: 24px;
padding: 8px 14px 8px 10px;
border-radius: var(--r-pill);
background: var(--surface-2);
transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.cabinet-page__back:hover { background: var(--lav-50); color: var(--lav-700); }
.cabinet-page__hero {
margin-bottom: 36px;
}
.cabinet-page__hero h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(36px, 5vw, 52px);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--ink-900);
margin: 10px 0 12px;
}
.cabinet-page__hero-meta {
font: 400 16px/1.5 var(--font-sans);
color: var(--ink-700);
margin: 0 0 18px;
}
.cabinet-page__empty {
text-align: center;
padding: 120px 28px 80px;
}
.cabinet-page__empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px; height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--lav-50);
color: var(--lav-700);
}
.cabinet-page__empty h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(28px, 4vw, 40px);
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 12px 0 16px;
}
.cabinet-page__empty p {
font: 400 15px/1.55 var(--font-sans);
color: var(--ink-700);
max-width: 460px;
margin: 0 auto 24px;
}
@media (max-width: 720px) {
.cabinet-page { padding: 80px 18px 56px; }
.cabinet-page__hero h1 { font-size: 32px; }
}
/* Waitlist modal — расширенная форма ----------------------------------- */
.modal__panel--waitlist {
max-width: 640px;
max-height: calc(100vh - 48px);
}
.modal__panel--waitlist .modal__view--form {
overflow-y: auto;
padding-right: 4px;
}
.waitlist-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
margin-bottom: 6px;
}
.waitlist-grid__full { grid-column: 1 / -1; }
/* Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
.modal__panel--drawer { padding: 28px 24px 24px; max-width: 100%; max-height: 100vh; border-radius: 0; }
.drawer-gallery { grid-template-columns: 1fr; }
.drawer-gallery__thumbs { flex-direction: row; }
.drawer-gallery__thumb { min-height: 60px; }
.drawer-grid { grid-template-columns: 1fr; gap: 20px; }
.drawer-info { grid-template-columns: 1fr 1fr; }
/* Поднимаем специфичность до уровня master-правила выше, иначе оно
перебивает grid-template-columns и кнопка остаётся «auto»-ширины. */
[data-audience="master"] .rooms-fallback {
grid-template-columns: 1fr;
padding: 24px;
gap: 18px;
text-align: left;
}
.rooms-fallback > .btn { width: 100%; justify-content: center; }
.rooms-fallback h3 { font-size: 20px; }
.rooms-fallback p { font-size: 13px; }
.modal__panel--waitlist { padding: 28px 24px 24px; }
.waitlist-grid { grid-template-columns: 1fr; }
.waitlist-grid__full { grid-column: 1; }
}
@media (max-width: 540px) {
.drawer-info { grid-template-columns: 1fr; }
.room-card__actions > .btn { flex: 1 1 100%; }
}
/* ============================================================
3D Tilt cards (PR-2.7 v2)
See ТЗ · Hover 3D Tilt для карточек · v2 (2026)
Работает только на desktop с точным указателем и без reduced-motion.
На тач/мобильном/при уменьшенном движении трансформ выключается полностью,
остаётся только усиление тени по hover.
HTML:
.tilt-card__inner может быть совмещён с другим классом (.hero-photo,
.master-card__image и т.п.) — он только добавляет transform/transition,
border-radius/overflow/bg отдаются классу-«скину».
============================================================ */
:root {
/* Spring linear() — visualDuration ~600ms, bounce 0.05 (почти без overshoot).
Сгенерировано через kvin.me/css-springs. Chrome 113+, Firefox 112+, Safari 17.4+.
Старые браузеры падают на --tilt-easing-fallback. */
--lavanda-spring-soft: linear(
0, 0.0027, 0.0106 1.05%, 0.042 2.13%, 0.0934 3.21%,
0.1647 4.33%, 0.2546, 0.3617 6.78%, 0.4831 8.15%,
0.6121 9.65%, 0.7395, 0.8557 13.16%, 0.9067, 0.9509,
0.9866 19.19%, 1.0049, 1.0182 22.05%, 1.0273, 1.0322 25.25%,
1.0337 26.6%, 1.0322 28.13%, 1.0258 30.96%, 1.0173 33.42%,
1.0001 38.18%, 0.9941 40.83%, 0.9907 43.65%, 0.9905 46.81%,
0.9947 51.74%, 0.9999 56.47%, 1.0029 61.97%, 1.0028 70.52%,
1.0007 89.04%, 1
);
--tilt-easing-fallback: cubic-bezier(0.22, 1, 0.36, 1);
/* Warm-tinted shadows (бренд-правило: никаких серых/пурпурных). */
--shadow-card-rest: 0 2px 8px rgba(74, 67, 72, 0.04);
--shadow-card-hover:
0 24px 48px -16px rgba(74, 67, 72, 0.12),
0 8px 16px -8px rgba(74, 67, 72, 0.06),
0 2px 4px rgba(74, 67, 72, 0.04);
}
.tilt-card {
perspective: 1800px;
transform-style: preserve-3d;
/* Без этого .tilt-card не растягивается на ячейку grid'а, и .hero-photo
внутри схлопывается до min-height:200px. flex column + height:100% +
flex:1 на inner — гарантируют, что обёртка прозрачна по размерам. */
display: flex;
flex-direction: column;
height: 100%;
}
.tilt-card__inner {
/* Наследует overflow/border-radius от класса-«скина» (например, .hero-photo).
Сами не задаём — иначе перекроем существующие радиусы. */
position: relative;
flex: 1 1 auto;
transform:
rotateX(var(--tilt-x, 0deg))
rotateY(var(--tilt-y, 0deg))
translateZ(var(--tilt-z, 0px))
scale(var(--tilt-scale, 1));
transform-style: preserve-3d;
/* Возврат в покой: spring linear() с fallback. Свойство transition
для transform во время tracking перебивается классом .is-tracking. */
transition:
transform 700ms var(--tilt-easing-fallback),
transform 700ms var(--lavanda-spring-soft),
box-shadow 700ms var(--lavanda-spring-soft);
}
/* Во время tracking — никакого transition на transform, плавность даёт JS lerp. */
.tilt-card.is-tracking .tilt-card__inner {
transition: box-shadow 300ms ease-out;
box-shadow: var(--shadow-card-hover);
}
/* Glare — мягкий тёплый блик, центр следует за курсором. */
.tilt-card__glare {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
opacity: 0;
background: radial-gradient(
circle at var(--glare-x, 50%) var(--glare-y, 50%),
rgba(255, 248, 240, 0.12) 0%,
rgba(255, 248, 240, 0.06) 30%,
transparent 70%
);
mix-blend-mode: soft-light;
transition: opacity 400ms ease-out;
z-index: 1;
}
.tilt-card.is-tracking .tilt-card__glare { opacity: 1; }
/* Полное отключение на тач/мобильном (нет hover/coarse pointer). */
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
.tilt-card__inner {
transform: none !important;
transition: box-shadow 300ms ease;
}
.tilt-card__glare { display: none; }
}
/* Reduced-motion — tilt и glare выключены, только усиление тени по hover. */
@media (prefers-reduced-motion: reduce) {
.tilt-card__inner {
transform: none !important;
transition: box-shadow 300ms ease;
}
.tilt-card__glare { display: none; }
.tilt-card:hover .tilt-card__inner,
.tilt-card.is-tracking .tilt-card__inner {
box-shadow: var(--shadow-card-hover);
}
}
/* ============================================================
Music Player «Звук пространства» (PR-2.7)
Реализация по дизайн-системе project/Music Player.html.
Двухколоночный layout: слева — обложка + album-info, справа — now-playing
карта с прогрессом и controls + track-list.
============================================================ */
.lav-music {
padding: 80px 0 88px;
background: var(--bg);
}
/* Container — стандартная сетка сайта (1240px, padding 28px), такой же
как .container в других секциях. Заголовок и лид сидят по той же сетке,
что и остальной контент. PR-2.7: после жалобы на «заголовок сжался». */
.lav-music__inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 28px;
}
.lav-music__eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--ink-500);
margin: 0 0 16px;
}
/* Заголовок — стандартный размер .section-head h2 (clamp(34, 4vw, 48px)),
тот же что у «Четыре причины остановиться» / «Тихие мастера». */
.lav-music__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(34px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 12px 0 0;
max-width: 720px;
}
.lav-music__title em {
font-style: italic;
color: var(--lav-600);
}
.lav-music__sub {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.55;
color: var(--ink-700);
margin: 14px 0 40px;
max-width: 56ch;
}
/* ============ Two-column grid ============ */
.lav-music__grid {
display: grid;
grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr);
gap: 40px;
align-items: start;
}
/* ============ COVER ============ */
.lav-music__cover {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 28px;
overflow: hidden;
box-shadow:
0 30px 60px rgba(60, 40, 55, 0.12),
0 8px 16px rgba(60, 40, 55, 0.06);
background:
radial-gradient(120% 90% at 30% 18%, #F1E8F3 0%, #E8DAE8 28%, #DFD0D6 55%, #C9B4B7 100%);
transition:
box-shadow 600ms ease-out,
transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lav-music__cover:hover {
box-shadow:
0 36px 72px rgba(60, 40, 55, 0.16),
0 12px 24px rgba(155, 123, 168, 0.10);
transform: translateY(-2px);
}
/* Silk shimmer — диагональная полоса света медленно скользит по обложке.
На hover подсвечивается и зацикленно проходит из угла в угол.
mix-blend-mode: soft-light — блик не выжигает фон, ложится тёплым
warm-white отражением. Когда трек играет — shimmer запускается
ленивым 9-секундным циклом даже без hover. */
.lav-music__cover::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 0%,
transparent 32%,
rgba(255, 248, 240, 0.16) 44%,
rgba(255, 255, 255, 0.30) 50%,
rgba(255, 248, 240, 0.16) 56%,
transparent 68%,
transparent 100%
);
background-size: 240% 240%;
background-position: 100% 100%;
mix-blend-mode: soft-light;
opacity: 0;
transition: opacity 700ms ease;
z-index: 3;
}
.lav-music__cover:hover::after {
opacity: 1;
animation: lav-music-silk 4.5s ease-in-out infinite;
}
@keyframes lav-music-silk {
0% { background-position: 100% 100%; }
50% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
/* Когда трек играет — shimmer ленивым 9-секундным циклом без hover. */
.lav-music.is-playing .lav-music__cover::after {
opacity: 0.55;
animation: lav-music-silk 9s ease-in-out infinite;
}
.lav-music.is-playing .lav-music__cover:hover::after {
opacity: 1;
animation: lav-music-silk 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.lav-music__cover::after { animation: none !important; opacity: 0 !important; }
.lav-music__cover:hover { transform: none; }
}
.lav-music__cover-wash {
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 78% 82%, rgba(155, 123, 168, 0.32), transparent 70%),
radial-gradient(70% 60% at 18% 90%, rgba(208, 191, 177, 0.45), transparent 70%);
mix-blend-mode: multiply;
}
.lav-music__cover-grain {
position: absolute;
inset: 0;
opacity: 0.18;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
.lav-music__cover-meta {
position: absolute;
top: 22px;
left: 24px;
right: 24px;
display: flex;
justify-content: space-between;
align-items: flex-start;
color: rgba(42, 36, 41, 0.78);
font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Официальный logo-mark.png в углу обложки. Не перекрашиваем — у самого PNG
уже есть круглый mauve-фон. Жёсткие границы, чтобы не растягивался WP-CSS. */
.lav-music__cover-mark {
width: 28px !important;
height: 28px !important;
max-width: 28px;
max-height: 28px;
border-radius: 50%;
display: block;
object-fit: cover;
flex: 0 0 auto;
}
.lav-music__cover-center {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-52%);
text-align: center;
padding: 0 40px;
}
.lav-music__cover-title {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(48px, 6vw, 76px);
line-height: 0.92;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0;
padding-right: 0.08em;
}
.lav-music__cover-sub {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(42, 36, 41, 0.6);
margin: 14px 0 0;
}
.lav-music__cover-sub::before,
.lav-music__cover-sub::after {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: rgba(42, 36, 41, 0.3);
vertical-align: middle;
margin: 0 14px;
}
.lav-music__cover-foot {
position: absolute;
left: 24px;
right: 24px;
bottom: 22px;
display: flex;
justify-content: space-between;
align-items: flex-end;
font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(42, 36, 41, 0.7);
}
.lav-music__cover-side {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 18px;
letter-spacing: 0;
color: rgba(42, 36, 41, 0.85);
text-transform: none;
}
/* ============ ALBUM INFO under cover ============ */
.lav-music__album { padding-top: 22px; }
.lav-music__album h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 0 0 12px;
}
.lav-music__album h3 em {
font-style: italic;
font-weight: 400;
color: var(--lav-600);
}
.lav-music__album p {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-700);
margin: 0 0 10px;
text-wrap: pretty;
}
.lav-music__album-italic {
font-family: var(--font-display) !important;
font-style: italic;
font-weight: 400;
font-size: 15px !important;
color: var(--ink-700);
margin-top: 12px !important;
line-height: 1.5 !important;
}
.lav-music__meta-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-500);
flex-wrap: wrap;
}
.lav-music__dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-300, #d3cdc7);
}
/* ============ NOW PLAYING CARD ============ */
.lav-music__now {
background: var(--surface, #fff);
border-radius: 22px;
padding: 24px 28px 22px;
box-shadow:
0 12px 32px rgba(60, 40, 55, 0.08),
0 2px 4px rgba(60, 40, 55, 0.04);
border: 1px solid rgba(229, 223, 226, 0.7);
}
.lav-music__now-eyebrow {
font-family: var(--font-sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--lav-600);
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
}
.lav-music__live {
display: inline-flex;
align-items: end;
gap: 2px;
height: 11px;
}
.lav-music__live i {
display: inline-block;
width: 2px;
background: var(--lav-500);
border-radius: 1px;
animation: lav-music-eq 1.1s ease-in-out infinite;
}
.lav-music__live i:nth-child(1) { height: 6px; animation-delay: 0s; }
.lav-music__live i:nth-child(2) { height: 10px; animation-delay: 0.18s; }
.lav-music__live i:nth-child(3) { height: 7px; animation-delay: 0.36s; }
@keyframes lav-music-eq {
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}
.lav-music__live.paused i {
animation-play-state: paused;
transform: scaleY(0.5);
}
@media (prefers-reduced-motion: reduce) {
.lav-music__live i { animation: none; transform: scaleY(0.5); }
}
.lav-music__now-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.1;
letter-spacing: -0.012em;
color: var(--ink-900);
margin: 0 0 18px;
}
/* ============ Progress ============ */
.lav-music__progress-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.lav-music__time {
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
color: var(--ink-700);
font-variant-numeric: tabular-nums;
min-width: 36px;
}
.lav-music__time--right {
text-align: right;
color: var(--ink-500);
}
.lav-music__progress {
flex: 1;
height: 16px;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
}
.lav-music__progress:focus-visible {
outline: 2px solid var(--lav-300);
outline-offset: 4px;
border-radius: 4px;
}
.lav-music__progress-track {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #E8DFD7;
border-radius: 1px;
}
.lav-music__progress-fill {
position: absolute;
left: 0;
height: 2px;
width: 0;
background: var(--lav-500);
border-radius: 1px;
transition: width 80ms linear;
}
.lav-music__progress-knob {
position: absolute;
left: 0;
width: 12px;
height: 12px;
background: var(--lav-500);
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 2px 6px rgba(155, 123, 168, 0.4);
transition: left 80ms linear, transform 140ms ease-out;
}
.lav-music__progress:hover .lav-music__progress-knob {
transform: translateX(-50%) scale(1.15);
}
/* ============ Controls ============ */
.lav-music__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
position: relative;
}
.lav-music__controls-center {
display: flex;
align-items: center;
gap: 24px;
}
.lav-music__ctrl {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-700);
width: 38px;
height: 38px;
border-radius: 50%;
transition: color 200ms ease-out, background 200ms ease-out;
}
.lav-music__ctrl:hover {
color: var(--ink-900);
background: var(--lav-100);
}
.lav-music__ctrl:focus-visible {
outline: 2px solid var(--lav-300);
outline-offset: 2px;
}
.lav-music__ctrl svg {
width: 18px;
height: 18px;
}
.lav-music__ctrl--small {
width: 32px;
height: 32px;
}
.lav-music__ctrl--small svg {
width: 16px;
height: 16px;
}
.lav-music__ctrl--play {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--lav-500);
color: var(--bg);
box-shadow:
0 8px 22px rgba(155, 123, 168, 0.32),
0 1px 2px rgba(60, 40, 55, 0.1);
transition: background 200ms ease-out, transform 100ms ease-out, box-shadow 200ms ease-out;
}
.lav-music__ctrl--play:hover {
background: var(--lav-600);
color: var(--bg);
}
.lav-music__ctrl--play:active { transform: scale(0.97); }
.lav-music__ctrl--play svg {
width: 22px;
height: 22px;
}
.lav-music__controls-center {
gap: 18px !important;
}
.lav-music__icon-pause { display: none; }
.lav-music.is-playing .lav-music__icon-play { display: none; }
.lav-music.is-playing .lav-music__icon-pause { display: block; }
/* ============ Volume ============ */
.lav-music__volume {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 12px;
color: var(--ink-500);
}
.lav-music__volume > svg {
width: 18px;
height: 18px;
}
.lav-music__vol-track {
width: 80px;
height: 14px;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
}
.lav-music__vol-track::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #E8DFD7;
border-radius: 1px;
}
.lav-music__vol-fill {
position: absolute;
left: 0;
height: 2px;
width: 80%;
background: var(--lav-500);
border-radius: 1px;
}
.lav-music__vol-track:focus-visible {
outline: 2px solid var(--lav-300);
outline-offset: 4px;
border-radius: 4px;
}
/* ============ Loop / Shuffle button (active state) ============ */
.lav-music__ctrl[data-loop].is-active,
.lav-music__ctrl[data-shuffle].is-active {
background: var(--lav-100);
color: var(--lav-700);
}
/* ============ Track list ============ */
.lav-music__list {
margin-top: 18px;
background: var(--surface, #fff);
border-radius: 22px;
padding: 8px 12px;
border: 1px solid rgba(229, 223, 226, 0.7);
}
.lav-music__list-head {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
padding: 10px 14px 8px;
border-bottom: 1px solid #EEE6DD;
font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-400, #908884);
}
.lav-music__row {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #EEE6DD;
border-radius: 10px;
cursor: pointer;
transition: background 200ms ease-out, color 200ms ease-out;
position: relative;
}
.lav-music__row:last-child { border-bottom: none; }
.lav-music__row-num {
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
color: var(--lav-600);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.lav-music__row-num .num-text,
.lav-music__row-num .play-icon,
.lav-music__row-num .eq {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 140ms ease-out;
}
.lav-music__row-num .play-icon,
.lav-music__row-num .eq { opacity: 0; }
.lav-music__row-num .play-icon svg {
width: 14px;
height: 14px;
color: var(--lav-600);
}
.lav-music__row:hover { background: var(--lav-100); }
.lav-music__row:hover .lav-music__row-num .num-text { opacity: 0; }
.lav-music__row:hover .lav-music__row-num .play-icon { opacity: 1; }
.lav-music__row.is-active { background: var(--lav-100); }
.lav-music__row.is-active .lav-music__row-num .num-text,
.lav-music__row.is-active .lav-music__row-num .play-icon { opacity: 0; }
.lav-music__row.is-active .lav-music__row-num .eq { opacity: 1; }
.lav-music__row.is-active .lav-music__row-title { color: var(--lav-600); }
.lav-music__row.is-active:hover .lav-music__row-num .play-icon { opacity: 0; }
.lav-music__row-title {
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
line-height: 1.4;
color: var(--ink-900);
transition: color 200ms ease-out;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lav-music__row-dur {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
color: var(--ink-500);
font-variant-numeric: tabular-nums;
}
.lav-music__eq-bars {
display: inline-flex;
align-items: end;
gap: 2px;
height: 14px;
}
.lav-music__eq-bars i {
display: inline-block;
width: 2.5px;
background: var(--lav-500);
border-radius: 1px;
animation: lav-music-eq 1.1s ease-in-out infinite;
}
.lav-music__eq-bars i:nth-child(1) { height: 8px; animation-delay: 0s; }
.lav-music__eq-bars i:nth-child(2) { height: 13px; animation-delay: 0.18s; }
.lav-music__eq-bars i:nth-child(3) { height: 9px; animation-delay: 0.36s; }
.lav-music:not(.is-playing) .lav-music__eq-bars i {
animation-play-state: paused;
transform: scaleY(0.45);
}
/* ============ Mobile ============ */
@media (max-width: 1024px) {
.lav-music__grid { grid-template-columns: minmax(280px, 0.7fr) 1fr; gap: 40px; }
.lav-music__now-title { font-size: 36px; }
}
@media (max-width: 768px) {
.lav-music { padding: 56px 0 72px; }
.lav-music__inner { padding: 0 20px; }
.lav-music__grid { grid-template-columns: 1fr; gap: 32px; }
.lav-music__cover-title { font-size: 80px; }
.lav-music__now { padding: 28px 24px 24px; }
.lav-music__now-title { font-size: 30px; }
.lav-music__volume { display: none; }
.lav-music__list-head,
.lav-music__row { padding-left: 14px; padding-right: 14px; }
.lav-music__sub { margin-bottom: 40px; }
}
/* ==========================================================================
Cabinets Catalog v2 (PR-2 visual prototype)
Город → Точка → Кабинет. Активируется через
LAVANDA_FEATURE_CABINETS_CATALOG_V2; рендер в:
templates/components/location-card.twig
templates/components/cabinet-row.twig
templates/views/location-single.twig
========================================================================== */
/* Location group head (на /rent/ и на главной #cabinets) */
.loc-group { margin-bottom: 64px; }
.loc-group:last-child { margin-bottom: 0; }
.loc-group__title,
.loc-group-head h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -0.012em;
margin: 0 0 24px;
color: var(--ink-900);
}
.loc-group-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.loc-group-head p { color: var(--ink-500); font-size: 14px; margin: 0; }
/* Location grid */
.loc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 24px;
}
@media (max-width: 720px) {
.loc-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* Location card */
.loc-card {
background: var(--surface, #fff);
border-radius: var(--r-xl, 18px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px -16px rgba(0,0,0,.08);
transition: transform .35s ease, box-shadow .35s ease;
}
.loc-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 40px -20px rgba(0,0,0,.12); }
.loc-card--coming_soon { background: linear-gradient(180deg, #f4eff7 0%, #fff 65%); }
.loc-card--closed { opacity: 0.7; }
.loc-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
background: #ECE5DA;
overflow: hidden;
}
.loc-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.loc-card:hover .loc-card__media img { transform: scale(1.03); }
.loc-card__media-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: rgba(123, 95, 138, .35);
}
.loc-card__media-placeholder svg { width: 56px; height: 56px; }
.loc-card__badge {
position: absolute;
top: 16px; left: 16px;
background: rgba(255,255,255,.95);
color: var(--ink-900);
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
backdrop-filter: blur(8px);
text-transform: uppercase;
}
.loc-card__badge--coming_soon { background: var(--lav-500, #7B5F8A); color: #fff; }
.loc-card__badge--working { background: #5C8B6A; color: #fff; }
.loc-card__badge--closed { background: #9A8F8A; color: #fff; }
.loc-card__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.loc-card__title {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
line-height: 1.25;
letter-spacing: -0.005em;
}
.loc-card__title a { color: var(--ink-900); text-decoration: none; }
.loc-card__title a:hover { color: var(--lav-600, #6B4F7A); }
.loc-card__facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 16px;
margin: 0;
padding: 12px 0;
border-top: 1px solid rgba(0,0,0,.06);
border-bottom: 1px solid rgba(0,0,0,.06);
}
.loc-card__facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.loc-card__facts dt {
margin: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-500, #786C66);
}
.loc-card__facts dd {
margin: 0;
font-size: 15px;
color: var(--ink-900);
font-weight: 500;
}
.loc-card__free { color: #5C8B6A; font-size: 13px; font-weight: 400; }
.loc-card__muted { color: var(--ink-500, #786C66); font-weight: 400; font-style: italic; font-size: 13px; }
.loc-card__landmark {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--ink-700, #5E5650);
}
.loc-card__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: auto;
}
/* Location single — hero */
.loc-hero {
padding: 40px 0 56px;
background: #ECE5DA;
}
.loc-hero--coming_soon { background: linear-gradient(180deg, #E7DCEC 0%, #ECE5DA 100%); }
.loc-hero__inner { display: flex; flex-direction: column; gap: 28px; }
.loc-hero__crumbs {
font-size: 13px;
color: var(--ink-500, #786C66);
}
.loc-hero__crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.15); }
.loc-hero__crumbs a:hover { color: var(--lav-600, #6B4F7A); border-color: currentColor; }
.loc-hero__head { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.loc-hero__title-block { flex: 1 1 360px; }
.loc-hero__title-block .eyebrow { color: var(--ink-500); margin-bottom: 12px; }
.loc-hero__title-block h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(30px, 4.5vw, 48px);
line-height: 1.05;
letter-spacing: -0.015em;
margin: 0 0 16px;
color: var(--ink-900);
}
.loc-hero__facts {
flex: 0 1 380px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
margin: 0;
padding: 20px;
background: rgba(255,255,255,.6);
border-radius: 14px;
backdrop-filter: blur(8px);
}
.loc-hero__facts > div { display: flex; flex-direction: column; }
.loc-hero__facts dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-500);
margin-bottom: 4px;
}
.loc-hero__facts dd { margin: 0; font-size: 16px; color: var(--ink-900); font-weight: 500; }
.loc-hero__facts a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.2); }
.loc-hero__landmark { font-size: 15px; color: var(--ink-700); margin: 0; max-width: 640px; }
/* Waitlist для coming_soon */
.loc-waitlist {
padding: 64px 0;
background: #1B1A1F;
color: #F6F1E7;
}
.loc-waitlist__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 880px) { .loc-waitlist__inner { grid-template-columns: 1fr; gap: 32px; } }
.loc-waitlist__copy .eyebrow { color: rgba(246,241,231,.6); margin-bottom: 14px; }
.loc-waitlist__copy h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(26px, 3.5vw, 36px);
line-height: 1.1;
margin: 0 0 16px;
color: #F6F1E7;
}
.loc-waitlist__copy p { color: rgba(246,241,231,.75); margin: 0; max-width: 480px; }
.loc-waitlist__form { display: flex; flex-direction: column; gap: 14px; }
.loc-waitlist__form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(246,241,231,.6); }
.loc-waitlist__form input[type=text],
.loc-waitlist__form input[type=tel],
.loc-waitlist__form input[type=email] {
background: rgba(246,241,231,.08);
border: 1px solid rgba(246,241,231,.18);
border-radius: 8px;
padding: 12px 14px;
color: #F6F1E7;
font-size: 15px;
text-transform: none;
letter-spacing: 0;
}
.loc-waitlist__form input:focus { outline: none; border-color: var(--lav-400, #9B7BA8); }
.loc-waitlist__consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: rgba(246,241,231,.7) !important; }
.loc-waitlist__consent input { margin-top: 3px; }
.loc-waitlist__consent a { color: inherit; text-decoration: underline; }
/* Included / Conditions */
.loc-included, .loc-conditions { padding: 64px 0; }
.loc-included .eyebrow { color: var(--ink-500); margin-bottom: 8px; }
.loc-included h2, .loc-conditions h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(26px, 3.5vw, 36px);
line-height: 1.15;
margin: 0 0 32px;
color: var(--ink-900);
}
.loc-included__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.loc-included__grid li {
background: #F6F1E7;
padding: 16px 18px;
border-radius: 12px;
font-size: 15px;
line-height: 1.45;
color: var(--ink-700);
}
.loc-included__grid strong { color: var(--ink-900); display: block; margin-bottom: 2px; }
.loc-conditions { background: #F6F1E7; }
.loc-conditions__grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
align-items: start;
}
@media (max-width: 720px) { .loc-conditions__grid { grid-template-columns: 1fr; } }
.loc-conditions__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.loc-conditions__list li {
padding-left: 26px;
position: relative;
font-size: 16px;
line-height: 1.5;
color: var(--ink-700);
}
.loc-conditions__list li::before {
content: ""; position: absolute;
left: 0; top: 9px;
width: 14px; height: 2px;
background: var(--lav-500, #7B5F8A);
}
/* Cabinets table inside location-single */
.loc-cabinets { padding: 56px 0 96px; }
.loc-cabinets__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.loc-cabinets__head .eyebrow { color: var(--ink-500); margin-bottom: 8px; }
.loc-cabinets__head h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.15;
margin: 0;
color: var(--ink-900);
}
.loc-cabinets__hint { font-size: 13px; color: var(--ink-500); margin: 0; max-width: 360px; line-height: 1.5; }
.loc-cabinets__table-wrap { overflow-x: auto; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff; }
.loc-cabinets__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.loc-cabinets__table thead { background: #F6F1E7; }
.loc-cabinets__table thead th {
text-align: left;
padding: 12px 16px;
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-500);
border-bottom: 1px solid rgba(0,0,0,.08);
position: sticky;
top: 0;
background: #F6F1E7;
}
.cab-row { border-bottom: 1px solid rgba(0,0,0,.04); transition: background .15s; }
.cab-row:hover { background: rgba(155, 123, 168, .03); }
.cab-row td { padding: 14px 16px; vertical-align: middle; color: var(--ink-900); }
.cab-row__num { font-weight: 500; font-size: 15px; }
.cab-row__muted { color: var(--ink-500); font-style: italic; }
.cab-row__price { font-weight: 500; white-space: nowrap; }
.cab-row__price-ask {
background: none;
border: 1px dashed var(--lav-500, #7B5F8A);
color: var(--lav-600, #6B4F7A);
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
}
.cab-row__price-ask:hover { background: var(--lav-500, #7B5F8A); color: #fff; }
.cab-row__actions { white-space: nowrap; display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.cab-row__more { font-size: 13px; color: var(--ink-500); text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.2); }
.cab-row__more:hover { color: var(--lav-600, #6B4F7A); }
.cab-status {
display: inline-block;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
}
.cab-status--free { background: #E2EDDF; color: #3D6447; }
.cab-status--busy { background: #ECE5DA; color: #786C66; }
.cab-status--soon { background: #F0E4F2; color: #6B4F7A; }
.btn--xs { padding: 5px 10px; font-size: 12px; }
/* Mobile-friendly table — стек в карточки */
@media (max-width: 720px) {
.loc-cabinets__table thead { display: none; }
.loc-cabinets__table, .loc-cabinets__table tbody, .cab-row, .cab-row td { display: block; width: 100%; box-sizing: border-box; }
.cab-row {
padding: 14px 16px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
margin-bottom: 12px;
background: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.cab-row td { padding: 0; border: none; }
.cab-row td::before {
content: attr(data-label);
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-500);
margin-bottom: 2px;
}
.cab-row__status, .cab-row__actions { grid-column: 1 / -1; }
.cab-row__actions { justify-content: flex-start; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,.08); }
.cab-row__actions::before { display: none; }
}
/* Empty-state inline вариант */
.rooms-empty--inline { padding: 24px; background: #F6F1E7; border-radius: 12px; }
.rooms-empty--inline p { margin: 0; color: var(--ink-700); }
/* Location-single hero badge (inline-вариант, без position:absolute, чтобы не лип к корню document). */
.loc-hero__badge {
display: inline-block;
margin-top: 8px;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.loc-hero__badge--working { background: #5C8B6A; color: #fff; }
.loc-hero__badge--coming_soon{ background: var(--lav-500, #7B5F8A); color: #fff; }
.loc-hero__badge--closed { background: #9A8F8A; color: #fff; }
/* ==========================================================================
Cabinets Tabs Layout (PR-3)
Двухуровневые табы: Город → Адрес. Под флагом cabinets_tabs_enabled.
Шаблон: templates/components/cabinets-tabs.twig
JS: assets/js/cabinets-tabs.js
========================================================================== */
.cabinets-tabs { display: flex; flex-direction: column; gap: 24px; }
/* Уровень 1: города — крупный underline-стиль */
.cabinets-tabs__cities {
display: flex;
gap: 4px;
border-bottom: 1px solid rgba(0, 0, 0, .08);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin: 0 -28px;
padding: 0 28px;
}
.cabinets-tabs__cities::-webkit-scrollbar { display: none; }
.cabinets-tabs__city-tab {
flex-shrink: 0;
scroll-snap-align: start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 4px 16px;
margin: 0 16px 0 0;
background: none;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
font-family: inherit;
font-size: 19px;
font-weight: 500;
color: var(--ink-500, #786C66);
transition: color .2s ease, border-color .2s ease;
margin-bottom: -1px;
letter-spacing: -0.005em;
}
.cabinets-tabs__city-tab:hover { color: var(--ink-900, #1B1A1F); }
.cabinets-tabs__city-tab:focus-visible {
outline: 2px solid var(--lav-500, #7B5F8A);
outline-offset: 4px;
border-radius: 4px;
}
.cabinets-tabs__city-tab.is-active {
color: var(--ink-900, #1B1A1F);
border-bottom-color: var(--lav-500, #7B5F8A);
}
.cabinets-tabs__city-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: rgba(0, 0, 0, .06);
color: var(--ink-700, #5E5650);
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
}
.cabinets-tabs__city-tab.is-active .cabinets-tabs__city-count {
background: var(--lav-500, #7B5F8A);
color: #fff;
}
/* Уровень 2: адреса — pill-стиль */
.cabinets-tabs__locations {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin: 0 -28px;
padding: 8px 28px 4px;
}
.cabinets-tabs__locations::-webkit-scrollbar { display: none; }
.cabinets-tabs__location-tab {
flex-shrink: 0;
scroll-snap-align: start;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #fff;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 999px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--ink-700, #5E5650);
transition: background .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
line-height: 1.4;
}
.cabinets-tabs__location-tab:hover {
border-color: var(--lav-400, #9B7BA8);
color: var(--ink-900, #1B1A1F);
}
.cabinets-tabs__location-tab:focus-visible {
outline: 2px solid var(--lav-500, #7B5F8A);
outline-offset: 2px;
}
.cabinets-tabs__location-tab.is-active {
background: var(--lav-500, #7B5F8A);
border-color: var(--lav-500, #7B5F8A);
color: #fff;
}
.cabinets-tabs__location-tab--coming_soon { color: var(--ink-500, #786C66); }
.cabinets-tabs__location-tab--coming_soon.is-active { background: var(--ink-500, #786C66); border-color: var(--ink-500, #786C66); }
.cabinets-tabs__pill {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: 999px;
background: rgba(123, 95, 138, .12);
color: var(--lav-600, #6B4F7A);
font-weight: 500;
}
.cabinets-tabs__location-tab.is-active .cabinets-tabs__pill {
background: rgba(255, 255, 255, .2);
color: #fff;
}
.cabinets-tabs__pill--draft { background: rgba(0, 0, 0, .08); color: var(--ink-500, #786C66); }
/* Панели и кросс-фейд */
.cabinets-tabs__city-panel { display: flex; flex-direction: column; gap: 16px; }
.cabinets-tabs__panels { position: relative; }
.cabinets-tabs__loc-panel { animation: cab-tabs-fade-in .18s ease-out; }
.cabinets-tabs__city-panel.is-fading-in { animation: cab-tabs-fade-in .18s ease-out; }
@keyframes cab-tabs-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* В одиночной location-панели карточка точки занимает всю ширину контейнера —
без grid'а, без визуальной «одиночки в сетке». */
.cabinets-tabs__loc-panel .loc-card {
max-width: 880px;
}
/* Мобайл: всё компактнее */
@media (max-width: 720px) {
.cabinets-tabs__city-tab { font-size: 17px; padding: 12px 4px 14px; }
.cabinets-tabs__cities, .cabinets-tabs__locations {
margin: 0 -20px;
padding: 0 20px;
}
.cabinets-tabs__locations { padding-top: 8px; padding-bottom: 4px; }
}
/* Sticky-поведение городских табов на десктопе (опционально) */
@media (min-width: 900px) {
.cabinets-tabs__cities {
position: sticky;
top: calc(var(--header-h, 72px) + 8px);
z-index: 2;
background: inherit;
backdrop-filter: blur(8px);
}
}
/* Перебиваем .cabinets-tabs__city-panel { display: flex } — иначе hidden-секции
рендерятся (специфичность [hidden] = .class равная, побеждает последний). */
.cabinets-tabs__city-panel[hidden],
.cabinets-tabs__loc-panel[hidden] {
display: none !important;
}
/* ==========================================================================
Location-single — двухколоночная раскладка (PR-4)
Под флагом LAVANDA_FEATURE_LOCATION_PAGE_TWO_COLUMN.
Шаблон: templates/views/location-single.twig (loc_two_col_enabled),
components/location-aside.twig, cabinets-table.twig, cabinets-grouped.twig,
cabinets-empty.twig.
========================================================================== */
.loc-page { padding: 24px 0 96px; background: #F6F1E7; min-height: 80vh; }
.loc-page--coming_soon { background: linear-gradient(180deg, #ECE5DA 0%, #F6F1E7 280px); }
.loc-page__crumbs { font-size: 13px; color: var(--ink-500, #786C66); margin-bottom: 20px; }
.loc-page__crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.15); }
.loc-page__crumbs a:hover { color: var(--lav-600, #6B4F7A); border-color: currentColor; }
/* Компактный hero */
.loc-page__header { margin-bottom: 24px; }
.loc-page__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); margin: 0 0 8px; }
.loc-page__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: var(--ink-900);
}
.loc-page__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.loc-page__landmark { font-size: 14px; color: var(--ink-700); }
/* Мобильный аккордеон «О точке» — на десктопе скрыт */
.loc-page__aside-collapsible { display: none; }
.loc-page__aside-collapsible > summary {
cursor: pointer;
padding: 12px 16px;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
font-weight: 500;
list-style: none;
margin-bottom: 16px;
}
.loc-page__aside-collapsible > summary::-webkit-details-marker { display: none; }
.loc-page__aside-collapsible-body { margin: -8px 0 16px; }
/* Grid */
.loc-page__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 32px;
align-items: start;
}
@media (max-width: 1023px) and (min-width: 768px) {
.loc-page__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
}
@media (max-width: 767px) {
.loc-page__grid { grid-template-columns: 1fr; gap: 16px; }
.loc-page__aside-collapsible { display: block; }
.loc-page__grid > .loc-aside { display: none; } /* aside в svele, дублирует collapsible */
}
/* Aside (sticky на десктопе) */
.loc-aside {
background: #fff;
border-radius: 16px;
overflow: hidden;
padding-bottom: 18px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 28px -20px rgba(0,0,0,.12);
position: sticky;
top: 88px;
}
@media (max-width: 767px) {
.loc-aside { position: static; box-shadow: none; }
}
.loc-aside__media {
aspect-ratio: 16 / 11;
background: #ECE5DA;
overflow: hidden;
position: relative;
}
.loc-aside__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-aside__media-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: rgba(123, 95, 138, .35);
}
.loc-aside__media-placeholder svg { width: 64px; height: 64px; }
.loc-aside__summary {
margin: 0;
padding: 18px 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.loc-aside__summary > div { display: flex; flex-direction: column; gap: 2px; }
.loc-aside__cabinets-row { grid-column: 1 / -1; flex-direction: row !important; align-items: baseline; justify-content: space-between; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.06); margin-top: 2px; }
.loc-aside__summary dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); }
.loc-aside__summary dd { margin: 0; font-size: 15px; color: var(--ink-900); font-weight: 500; }
.loc-aside__summary a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.2); }
.loc-aside__free { color: #5C8B6A; font-weight: 500; }
.loc-aside__block { padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,.06); }
.loc-aside__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: 10px; }
.loc-aside__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.loc-aside__list li {
font-size: 13px;
color: var(--ink-700);
padding-left: 16px;
position: relative;
line-height: 1.45;
}
.loc-aside__list li::before {
content: ""; position: absolute;
left: 0; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--lav-500, #7B5F8A);
opacity: .6;
}
.loc-aside__cta { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.btn--block { width: 100%; justify-content: center; text-align: center; }
/* Левая колонка — controls */
.loc-page__main { display: flex; flex-direction: column; gap: 16px; }
.cabinets-controls {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.cabinets-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fff;
border: 1px solid rgba(0,0,0,.12);
border-radius: 999px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--ink-700, #5E5650);
transition: background .15s ease, color .15s ease, border-color .15s ease;
line-height: 1.3;
}
.chip:hover { border-color: var(--lav-400, #9B7BA8); color: var(--ink-900); }
.chip.is-active {
background: var(--ink-900, #1B1A1F);
color: #fff;
border-color: var(--ink-900);
}
.chip__count {
background: rgba(255,255,255,.18);
color: inherit;
padding: 1px 6px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.chip:not(.is-active) .chip__count { background: rgba(0,0,0,.06); }
.cabinets-view { display: inline-flex; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; padding: 2px; }
.seg {
padding: 6px 12px;
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--ink-700);
transition: background .15s, color .15s;
}
.seg.is-active { background: var(--ink-900); color: #fff; }
/* Cabinets table (PR-4) */
.cab-table-wrap { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; }
.cab-table__common { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid rgba(0,0,0,.06); background: #FAF6EE; }
.cab-table__chip { font-size: 12px; padding: 4px 10px; background: rgba(123, 95, 138, .1); color: var(--lav-700, #553A66); border-radius: 999px; }
.cab-table-scroll { overflow-x: auto; }
.cab-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cab-table thead { background: #F6F1E7; position: sticky; top: 0; z-index: 1; }
.cab-table thead th {
text-align: left;
padding: 10px 14px;
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-500);
border-bottom: 1px solid rgba(0,0,0,.06);
white-space: nowrap;
}
.cab-table__col-action { width: 36px; }
.cab-table__row { border-bottom: 1px solid rgba(0,0,0,.04); transition: background .15s; min-height: 44px; }
.cab-table__row:last-child { border-bottom: 0; }
.cab-table__row:hover { background: rgba(155, 123, 168, .03); }
.cab-table__row td { padding: 10px 14px; vertical-align: middle; }
.cab-table__num { font-weight: 500; font-size: 14px; white-space: nowrap; }
.cab-table__muted { color: var(--ink-500); font-style: italic; font-size: 13px; }
.cab-table__more {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 999px;
color: var(--ink-700);
transition: background .15s, color .15s;
}
.cab-table__more:hover { background: var(--lav-500, #7B5F8A); color: #fff; }
.cab-table__price-cta {
padding: 14px 16px;
border-top: 1px solid rgba(0,0,0,.06);
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: #FAF6EE;
}
.cab-table__price-cta p { margin: 0; color: var(--ink-700); font-size: 14px; }
/* Cabinets grouped (Marriott-style) */
.cab-grouped { display: flex; flex-direction: column; gap: 12px; }
.cab-grouped__item { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; }
.cab-grouped__summary {
cursor: pointer;
padding: 16px 20px;
display: grid;
grid-template-columns: 1fr auto 24px;
gap: 14px;
align-items: center;
list-style: none;
}
.cab-grouped__summary::-webkit-details-marker { display: none; }
.cab-grouped__title { font-weight: 500; font-size: 15px; color: var(--ink-900); }
.cab-grouped__meta { font-size: 13px; color: var(--ink-500); white-space: nowrap; }
.cab-grouped__chevron { transition: transform .2s; color: var(--ink-500); }
.cab-grouped__item[open] .cab-grouped__chevron { transform: rotate(180deg); }
.cab-grouped__body { border-top: 1px solid rgba(0,0,0,.06); }
.cab-grouped__body .cab-table-wrap { border: 0; border-radius: 0; }
/* Cabinets empty-state */
.cab-empty {
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
padding: 32px 28px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
@media (max-width: 720px) { .cab-empty { grid-template-columns: 1fr; padding: 24px 20px; } }
.cab-empty__head h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(20px, 2.3vw, 26px);
line-height: 1.2;
margin: 0 0 8px;
color: var(--ink-900);
}
.cab-empty__head p { margin: 0; color: var(--ink-700); font-size: 14px; line-height: 1.5; }
/* Mobile sticky CTA */
.loc-page__mobile-cta {
display: none;
position: fixed;
left: 12px; right: 12px;
bottom: 12px;
z-index: 50;
background: #fff;
border-radius: 12px;
padding: 10px;
box-shadow: 0 10px 32px -8px rgba(0,0,0,.25);
transition: transform .25s, opacity .25s;
}
.loc-page__mobile-cta.is-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .loc-page__mobile-cta { display: block; } }
/* Mobile: таблица в карточки */
@media (max-width: 720px) {
.cab-table thead { display: none; }
.cab-table, .cab-table tbody, .cab-table__row { display: block; width: 100%; }
.cab-table__row {
padding: 12px 14px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
margin: 8px 8px;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 12px;
align-items: center;
}
.cab-table__row td { padding: 0; border: none; }
.cab-table__action { grid-row: 1 / -1; grid-column: 2; }
}