/* ============================================================
Салон массажа «Тишина» — общая дизайн-система
Шрифты (подключаются в каждой страницы ОДИНАКОВО):
============================================================ */
:root {
--brand: #2F4739;
--brand-hover: #24382C;
--on-brand: #FFFFFF;
--accent: #C0794A;
--accent-hover: #A8653A;
--on-accent: #FFFFFF;
--bg: #FAF6F0;
--surface: #FFFFFF;
--text: #1E241F;
--muted: #6B7169;
--border: #E5DED4;
--brand-deep: color-mix(in srgb, var(--brand) 88%, #000);
--brand-soft: color-mix(in srgb, var(--brand) 8%, var(--bg));
--accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
--cream-deep: color-mix(in srgb, var(--bg) 82%, var(--border));
--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Manrope", "Segoe UI", Arial, sans-serif;
--radius: 20px;
--radius-sm: 12px;
--shadow-soft: 0 10px 34px rgba(30, 36, 31, .07);
--shadow-lift: 0 22px 60px rgba(30, 36, 31, .14);
--shadow-glow: 0 10px 28px rgba(30, 36, 31, .22);
--container: 1280px;
--gutter: clamp(18px, 4vw, 44px);
--ease: cubic-bezier(.22, .61, .21, 1);
}
/* ---------- База ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.12;
color: var(--text);
margin: 0 0 .5em;
}
h1 { font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.01em; }
h3 { font-size: clamp(21px, 2.2vw, 26px); }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
::selection { background: var(--accent); color: var(--on-accent); }
/* ---------- МЕРЫ (единственные ширины на сайте) ---------- */
/* Контейнер — во всю рабочую колонку, центрирован, с полями */
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Широкая мера — весь контент секции */
.measure-wide {
max-width: var(--container);
margin-inline: auto;
}
/* Текстовая мера — узкая колонка под чтение (абзацы, FAQ, статьи) */
.measure-text {
max-width: 46rem;
}
/* Центрированная текстовая мера — заголовки по центру */
.measure-text-center {
max-width: 46rem;
margin-inline: auto;
text-align: center;
}
/* Узкая колонка по центру (FAQ, мини-статья) */
.measure-center {
max-width: 46rem;
margin-inline: auto;
}
/* ---------- Секции ---------- */
.section {
padding-block: clamp(56px, 8vw, 110px);
}
.section-tight {
padding-block: clamp(40px, 5vw, 70px);
}
.section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.section-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.section-kicker::before {
content: "";
width: 34px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.section-head.center { text-align: center; }
.section-head.center .section-kicker::after {
content: "";
width: 34px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.lead {
font-size: clamp(18px, 2vw, 21px);
line-height: 1.6;
color: var(--muted);
}
/* ---------- Полосы ---------- */
/* Тёмная полоса во всю ширину экрана */
.band-dark {
background:
radial-gradient(900px 480px at 85% -10%, rgba(192, 121, 74, .22), transparent 60%),
linear-gradient(160deg, var(--brand-deep), var(--brand) 55%, color-mix(in srgb, var(--brand) 70%, #1b2a20));
color: color-mix(in srgb, var(--on-brand) 88%, var(--bg));
}
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-brand); }
.band-dark .lead, .band-dark p { color: color-mix(in srgb, var(--on-brand) 78%, var(--bg)); }
.band-dark a { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.band-dark a:hover { color: var(--accent); }
.band-dark .section-kicker { color: color-mix(in srgb, var(--accent) 78%, #fff); }
/* Мягкая светлая полоса */
.band-soft {
background:
radial-gradient(700px 380px at 8% 0%, rgba(192, 121, 74, .09), transparent 60%),
var(--cream-deep);
}
/* ---------- Кнопки ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 30px;
border-radius: 14px;
border: 2px solid transparent;
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-accent {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: var(--on-accent);
box-shadow: var(--shadow-glow);
}
.btn-accent:hover {
color: var(--on-accent);
background: linear-gradient(135deg, var(--accent-hover), var(--accent-hover));
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(30, 36, 31, .28);
}
.btn-brand {
background: var(--brand);
color: var(--on-brand);
}
.btn-brand:hover {
background: var(--brand-hover);
color: var(--on-brand);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(30, 36, 31, .3);
}
.btn-ghost {
border-color: color-mix(in srgb, var(--brand) 40%, transparent);
color: var(--brand);
background: transparent;
}
.btn-ghost:hover {
background: var(--brand);
color: var(--on-brand);
border-color: var(--brand);
}
.btn-ghost-light {
border-color: rgba(255, 255, 255, .45);
color: var(--on-brand);
background: transparent;
}
.btn-ghost-light:hover {
background: rgba(255, 255, 255, .12);
color: var(--on-brand);
border-color: rgba(255, 255, 255, .8);
}
.btn-lg { padding: 18px 38px; font-size: 17px; }
/* ---------- Шапка ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--bg) 82%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.header-inner {
display: flex;
align-items: center;
gap: 22px;
padding-block: 14px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
}
.logo-mark {
width: 44px;
height: 44px;
border-radius: 50%;
background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--brand) 55%, #fff), var(--brand) 62%);
display: grid;
place-items: center;
color: var(--on-brand);
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
box-shadow: 0 6px 18px rgba(30, 36, 31, .25);
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-name {
font-family: var(--font-display);
font-size: 25px;
font-weight: 700;
color: var(--text);
}
.logo-sub {
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
.main-nav { flex: 1; }
.nav-list {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item { position: relative; }
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 13px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
color: var(--text);
text-decoration: none;
transition: background .2s, color .2s;
white-space: nowrap;
}
.nav-link:hover, .nav-item:focus-within > .nav-link, .nav-item:hover > .nav-link {
background: var(--brand-soft);
color: var(--brand);
}
.nav-caret {
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform .25s var(--ease);
opacity: .6;
}
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret {
transform: rotate(225deg) translate(-1px, -1px);
}
/* Выпадающий список */
.nav-drop {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(10px);
min-width: 320px;
max-height: min(70vh, 560px);
overflow: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
padding: 14px;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover > .nav-drop,
.nav-item:focus-within > .nav-drop {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-drop.cols-2 {
columns: 2;
column-gap: 8px;
min-width: 560px;
}
.nav-drop li { break-inside: avoid; }
.nav-drop a {
display: block;
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: 14.5px;
font-weight: 500;
color: var(--text);
text-decoration: none;
transition: background .18s, color .18s;
}
.nav-drop a:hover { background: var(--accent-soft); color: var(--accent-hover); }
.nav-drop .drop-all a {
font-weight: 700;
color: var(--brand);
}
.header-contacts {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.header-phone {
font-size: 17px;
font-weight: 800;
color: var(--brand);
text-decoration: none;
white-space: nowrap;
}
.header-phone:hover { color: var(--accent); }
.header-phone small {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--muted);
letter-spacing: .04em;
}
.header-cta { padding: 12px 22px; font-size: 15px; }
/* Бургер */
.nav-toggle {
display: none;
width: 46px;
height: 46px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
padding: 0;
place-items: center;
gap: 5px;
flex-direction: column;
flex-shrink: 0;
}
.nav-toggle span {
display: block;
width: 20px;
height: 2px;
background: var(--brand);
border-radius: 2px;
transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Мобильная навигация: раскрывается под шапкой */
@media (max-width: 1120px) {
.main-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-lift);
max-height: calc(100vh - 74px);
overflow: auto;
display: none;
}
.main-nav.is-open { display: block; }
.nav-list {
flex-direction: column;
align-items: stretch;
padding: 16px var(--gutter) 28px;
gap: 2px;
}
.nav-link { width: 100%; justify-content: space-between; padding: 12px 14px; }
.nav-drop {
position: static;
transform: none;
opacity: 1;
visibility: visible;
max-height: 0;
overflow: hidden;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0 0 0 16px;
min-width: 0;
columns: 1 !important;
transition: max-height .3s var(--ease);
}
.nav-item.is-open > .nav-drop { max-height: 1200px; }
.nav-item.is-open > .nav-link .nav-caret { transform: rotate(225deg) translate(-1px, -1px); }
.header-contacts .header-cta { display: none; }
.nav-toggle { display: grid; }
}
@media (max-width: 640px) {
.header-phone small { display: none; }
.logo-sub { display: none; }
/* Тач-зоны не мельче 44px */
.header-phone { display: inline-flex; align-items: center; min-height: 44px; }
.footer-phone { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-line .v a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
.sitemap-group a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.faq a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ---------- Первый экран ---------- */
.hero {
position: relative;
overflow: hidden;
background:
radial-gradient(1000px 520px at 88% -18%, rgba(192, 121, 74, .16), transparent 62%),
radial-gradient(760px 480px at -12% 30%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%),
var(--bg);
}
.hero-inner {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
padding-block: clamp(48px, 7vw, 96px);
}
.hero h1 em {
font-style: italic;
color: var(--accent);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.hero-note {
margin-top: 20px;
font-size: 14.5px;
color: var(--muted);
display: flex;
align-items: center;
gap: 10px;
}
.hero-note::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 5px rgba(192, 121, 74, .18);
flex-shrink: 0;
}
.hero-figure { position: relative; }
.hero-photo {
border-radius: 32px;
overflow: hidden;
box-shadow: var(--shadow-lift);
aspect-ratio: 4 / 5;
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform 1.2s var(--ease);
}
.hero-figure:hover .hero-photo img { transform: scale(1.07); }
.hero-badge {
position: absolute;
left: -28px;
bottom: 34px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
padding: 18px 24px;
max-width: 250px;
}
.hero-badge strong {
display: block;
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
color: var(--accent);
line-height: 1;
white-space: nowrap;
}
.hero-badge span {
display: block;
margin-top: 6px;
font-size: 13.5px;
font-weight: 600;
color: var(--muted);
line-height: 1.4;
}
.hero-stamp {
position: absolute;
top: -22px;
right: -10px;
width: 108px;
height: 108px;
border-radius: 50%;
background: var(--brand);
color: var(--on-brand);
display: grid;
place-items: center;
text-align: center;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
line-height: 1.25;
padding: 12px;
box-shadow: 0 14px 34px rgba(30, 36, 31, .32);
transform: rotate(8deg);
}
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-photo { aspect-ratio: 16 / 11; }
.hero-badge { left: 12px; bottom: 12px; }
.hero-stamp { top: -14px; right: 6px; width: 92px; height: 92px; font-size: 13px; }
}
/* ---------- Сетка карточек услуг ---------- */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
.card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
}
.card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow-soft);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
color: var(--text);
overflow: hidden;
}
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.card h3 { margin-bottom: 2px; }
.card p { color: var(--muted); font-size: 15.5px; margin: 0; }
.card-more {
margin-top: auto;
padding-top: 12px;
font-size: 14px;
font-weight: 700;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 8px;
}
.card-more::after {
content: "→";
transition: transform .25s var(--ease);
}
.card:hover .card-more::after { transform: translateX(5px); }
/* Карточка с фото сверху */
.card-photo { padding: 0; }
.card-photo .card-img {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.card-photo .card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease);
}
.card-photo:hover .card-img img { transform: scale(1.06); }
.card-photo .card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* Иконка-номер */
.card-num {
font-family: var(--font-display);
font-size: 44px;
font-weight: 700;
line-height: 1;
color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
/* ---------- Разворот: текст + фото пополам ---------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.split.flip > .split-media { order: 2; }
.split-top { align-items: start; }
@media (max-width: 880px) {
.split { grid-template-columns: 1fr; }
.split.flip > .split-media { order: 0; }
}
.split-media {
border-radius: 28px;
overflow: hidden;
box-shadow: var(--shadow-lift);
}
.split-media img {
width: 100%;
height: 100%;
min-height: 340px;
object-fit: cover;
display: block;
transition: transform 1s var(--ease);
}
.split-media:hover img { transform: scale(1.04); }
/* Список с галочками */
.check-list {
list-style: none;
margin: 22px 0 0;
padding: 0;
display: grid;
gap: 13px;
}
.check-list li {
position: relative;
padding-left: 38px;
font-size: 16.5px;
}
.check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-hover);
font-size: 13px;
font-weight: 800;
display: grid;
place-items: center;
}
.band-dark .check-list li::before {
background: rgba(255, 255, 255, .14);
color: color-mix(in srgb, var(--accent) 65%, #fff);
}
/* ---------- Цифры ---------- */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 860px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
text-align: center;
padding: 26px 14px;
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px solid var(--border);
}
.band-dark .stat {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .16);
}
.stat-value {
font-family: var(--font-display);
font-size: clamp(38px, 4vw, 54px);
font-weight: 700;
line-height: 1;
color: var(--accent);
white-space: nowrap;
}
.band-dark .stat-value { color: color-mix(in srgb, var(--accent) 62%, #fff); }
.stat-label {
margin-top: 10px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
}
.band-dark .stat-label { color: color-mix(in srgb, var(--on-brand) 72%, var(--bg)); }
/* ---------- Этапы / шаги ---------- */
.steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
counter-reset: step;
}
.step {
position: relative;
display: grid;
grid-template-columns: 96px 1fr;
gap: 26px;
padding: 30px 0;
border-bottom: 1px solid var(--border);
counter-increment: step;
align-items: start;
}
.step:last-child { border-bottom: none; }
.step::before {
content: counter(step, decimal-leading-zero);
font-family: var(--font-display);
font-size: 58px;
font-weight: 700;
line-height: 1;
color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); }
@media (max-width: 620px) {
.step { grid-template-columns: 1fr; gap: 8px; }
.step::before { font-size: 42px; }
}
/* ---------- Цены ---------- */
.price-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
@media (max-width: 980px) { .price-grid, .price-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .price-grid, .price-grid.cols-2 { grid-template-columns: 1fr; } }
.price-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 28px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
gap: 6px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.price-card.featured {
border: 2px solid var(--accent);
background:
radial-gradient(400px 200px at 90% -10%, rgba(192, 121, 74, .12), transparent 60%),
var(--surface);
}
.price-flag {
position: absolute;
top: -14px;
right: 24px;
background: var(--accent);
color: var(--on-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 8px;
box-shadow: var(--shadow-glow);
}
.price-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.price-desc { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; }
.price-value {
font-family: var(--font-display);
font-size: 42px;
font-weight: 700;
color: var(--brand);
line-height: 1;
white-space: nowrap;
margin-top: auto;
}
.price-value small {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--muted);
}
/* Таблица цен */
.price-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid var(--border);
}
.price-table th, .price-table td {
padding: 16px 22px;
text-align: left;
border-bottom: 1px solid var(--border);
font-size: 16px;
}
.price-table th {
font-size: 13px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
background: var(--brand-soft);
}
.price-table tr:last-child td { border-bottom: none; }
.price-table td:last-child, .price-table th:last-child {
text-align: right;
font-weight: 700;
white-space: nowrap;
color: var(--brand);
}
/* ---------- Отзывы ---------- */
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 980px) { .review-grid, .review-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .review-grid, .review-grid.cols-2 { grid-template-columns: 1fr; } }
.review-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.review {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
gap: 14px;
}
.review-stars {
color: var(--accent);
font-size: 17px;
letter-spacing: 3px;
}
.review-stars .off { color: var(--border); }
.review p {
margin: 0;
font-size: 15.5px;
color: var(--text);
}
.review-meta {
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
padding-top: 6px;
}
.review-ava {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--accent)));
color: var(--on-brand);
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
flex-shrink: 0;
}
.review-name { font-weight: 700; font-size: 15px; }
.review-date { font-size: 13px; color: var(--muted); }
/* ---------- Форма записи ---------- */
.booking {
position: relative;
border-radius: 32px;
overflow: hidden;
background:
radial-gradient(800px 420px at 90% -20%, rgba(192, 121, 74, .25), transparent 60%),
linear-gradient(150deg, var(--brand-deep), var(--brand));
color: var(--on-brand);
padding: clamp(36px, 5vw, 64px);
box-shadow: var(--shadow-lift);
}
.booking-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
@media (max-width: 880px) { .booking-grid { grid-template-columns: 1fr; } }
.booking h2 { color: var(--on-brand); margin-bottom: 12px; }
.booking p { color: color-mix(in srgb, var(--on-brand) 80%, var(--bg)); }
.booking-phone {
display: inline-block;
margin-top: 14px;
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 38px);
font-weight: 700;
color: var(--on-brand);
text-decoration: none;
white-space: nowrap;
}
.booking-phone:hover { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.form {
background: rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--radius);
padding: 30px;
display: grid;
gap: 16px;
}
.form-row { display: grid; gap: 8px; }
.form label {
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-brand) 75%, var(--bg));
}
.form input, .form select, .form textarea {
width: 100%;
padding: 14px 18px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .95);
font-family: var(--font-body);
font-size: 16px;
color: var(--text);
transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(192, 121, 74, .25);
}
.form-note {
font-size: 13px;
color: color-mix(in srgb, var(--on-brand) 65%, var(--bg));
margin: 0;
}
/* Светлая форма (на светлом фоне) */
.form.form-light {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-soft);
}
.form.form-light label { color: var(--muted); }
.form.form-light input, .form.form-light select, .form.form-light textarea {
background: var(--bg);
border-color: var(--border);
}
/* ---------- FAQ ---------- */
.faq { padding-block: clamp(48px, 6vw, 84px); }
.faq details {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 12px;
overflow: hidden;
transition: box-shadow .25s, border-color .25s;
}
.faq details[open] {
border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
box-shadow: var(--shadow-soft);
}
.faq summary {
list-style: none;
cursor: pointer;
padding: 20px 26px;
font-size: 17.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--accent);
flex-shrink: 0;
transition: transform .3s var(--ease);
line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-hover); }
.faq details > div {
padding: 0 26px 22px;
color: var(--muted);
font-size: 16px;
}
.faq details > div p:last-child { margin-bottom: 0; }
/* ---------- Мини-статья ---------- */
.mini-article {
padding-block: clamp(48px, 6vw, 84px);
}
.mini-article h2 { margin-bottom: 14px; }
.mini-article .lead { color: var(--text); }
.mini-article details {
margin-top: 6px;
}
.mini-article summary {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-weight: 700;
color: var(--accent);
padding: 12px 24px;
border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
border-radius: 14px;
list-style: none;
transition: background .25s, color .25s;
margin: 10px 0 22px;
}
.mini-article summary::-webkit-details-marker { display: none; }
.mini-article summary:hover { background: var(--accent); color: var(--on-accent); }
.mini-article details[open] summary { display: none; }
.mini-article details div {
padding-top: 8px;
color: var(--text);
}
.mini-article h3 { margin-top: 1.4em; }
/* ---------- Чипы / облако ссылок ---------- */
.chip-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.chip {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface);
font-size: 14.5px;
font-weight: 600;
color: var(--text);
text-decoration: none;
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.chip:hover {
background: var(--brand);
border-color: var(--brand);
color: var(--on-brand);
transform: translateY(-2px);
}
/* ---------- Контакты / карта ---------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(28px, 4vw, 56px);
align-items: stretch;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 34px;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-line { display: grid; gap: 4px; }
.contact-line .k {
font-size: 12.5px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.contact-line .v {
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.contact-line .v a { color: var(--brand); text-decoration: none; }
.contact-line .v a:hover { color: var(--accent); }
.map-frame {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid var(--border);
min-height: 380px;
}
.map-frame iframe {
width: 100%;
height: 100%;
min-height: 380px;
border: 0;
display: block;
}
/* ---------- CTA-полоса ---------- */
.cta-band {
text-align: center;
padding: clamp(40px, 6vw, 72px) var(--gutter);
border-radius: 32px;
background:
radial-gradient(600px 300px at 50% -40%, rgba(192, 121, 74, .3), transparent 65%),
linear-gradient(150deg, var(--brand-deep), var(--brand));
color: var(--on-brand);
box-shadow: var(--shadow-lift);
}
.cta-band h2 { color: var(--on-brand); }
.cta-band p { color: color-mix(in srgb, var(--on-brand) 80%, var(--bg)); max-width: 44rem; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; }
/* ---------- Хлебные крошки ---------- */
.breadcrumbs {
font-size: 14px;
color: var(--muted);
padding-block: 18px 0;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin-inline: 6px; }
/* ---------- Подвал ---------- */
.site-footer {
background: linear-gradient(170deg, var(--brand-deep), color-mix(in srgb, var(--brand) 70%, #14201a));
color: color-mix(in srgb, var(--on-brand) 82%, var(--bg));
margin-top: clamp(60px, 8vw, 110px);
}
.footer-top {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 34px;
padding-block: clamp(44px, 6vw, 72px) 40px;
}
@media (max-width: 1080px) { .footer-top { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .logo-name { color: var(--on-brand); }
.footer-brand .logo-sub { color: color-mix(in srgb, var(--on-brand) 60%, var(--bg)); }
.footer-brand p {
margin-top: 16px;
font-size: 14.5px;
color: color-mix(in srgb, var(--on-brand) 68%, var(--bg));
max-width: 30ch;
}
.footer-phone {
display: inline-block;
margin-top: 14px;
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--on-brand);
text-decoration: none;
white-space: nowrap;
}
.footer-phone:hover { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.footer-col h3 {
font-family: var(--font-body);
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--accent) 55%, #fff);
margin: 0 0 16px;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.footer-col a {
font-size: 14.5px;
color: color-mix(in srgb, var(--on-brand) 78%, var(--bg));
text-decoration: none;
transition: color .2s;
}
.footer-col a:hover { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .12);
padding-block: 22px;
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
align-items: center;
justify-content: space-between;
font-size: 13.5px;
color: color-mix(in srgb, var(--on-brand) 60%, var(--bg));
}
.footer-bottom a { color: inherit; }
/* ---------- Карта сайта ---------- */
.sitemap-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 980px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-group {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow-soft);
}
.sitemap-group h2 {
font-size: 24px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 2px solid var(--accent-soft);
}
.sitemap-group ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 7px;
}
.sitemap-group a {
font-size: 15px;
text-decoration: none;
color: var(--text);
}
.sitemap-group a:hover { color: var(--accent); }
/* ---------- Анимация появления (управляется скриптом) ---------- */
.js-anim .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js-anim .reveal.is-in {
opacity: 1;
transform: none;
}
.js-anim .reveal[data-delay="1"] { transition-delay: .1s; }
.js-anim .reveal[data-delay="2"] { transition-delay: .2s; }
.js-anim .reveal[data-delay="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
.js-anim .reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ---------- Мелкие утилиты ---------- */
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: 34px; }
.chips-center { justify-content: center; }
.contact-actions { margin-top: auto; }
.review-cta {
justify-content: center;
align-items: flex-start;
background: var(--brand-soft);
border-style: dashed;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}