html, body {
background: var(--bg);
color: var(--primary);
font-family: var(--font-base);
font-weight: 400;
letter-spacing: -0.02em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
/* =========================================
HEADER — переменные темы переключаются на is-pinned
========================================= */
.site-header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
height: var(--header-h);
display: flex;
align-items: center;
justify-content: center;
padding: 0 30px;
background: transparent;
border-bottom: 1px solid transparent;
/* === ТЁМНАЯ ТЕМА (по умолчанию — над hero) === */
--hd-text: #FFFFFF;
--hd-text-mute: rgba(255, 255, 255, 0.7);
--hd-pill-bg: transparent;
--hd-pill-border: rgba(255, 255, 255, 0.22);
--hd-pill-shadow: 0 4px 18px -8px rgba(0, 0, 0, 0.25);
--hd-active-bg: #FFFFFF;
--hd-active-text: #0B0B0B;
--hd-arr-bg: #FFFFFF;
--hd-arr-color: #0B0B0B;
transition:
box-shadow 0.45s var(--ease),
border-color 0.45s var(--ease),
background 0.45s var(--ease);
}
/* === СВЕТЛАЯ ТЕМА (когда хедер над контентом) === */
.site-header.is-pinned {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--line);
box-shadow: 0 8px 28px -18px rgba(11, 11, 11, 0.18);
--hd-text: #0B0B0B;
--hd-text-mute: #7F7F7F;
--hd-pill-bg: #F6F6F6;
--hd-pill-border: transparent;
--hd-pill-shadow: none;
--hd-active-bg: #0B0B0B;
--hd-active-text: #FFFFFF;
--hd-arr-bg: #0B0B0B;
--hd-arr-color: #FFFFFF;
}
.header-inner {
width: 100%;
max-width: 1380px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
}
/* === Логотип === */
.logo {
display: inline-flex;
align-items: center;
height: 28px;
color: var(--hd-text);
flex-shrink: 0;
transition: color 0.45s var(--ease);
}
.logo svg {
height: 100%;
width: auto;
}
.logo svg path { fill: currentColor; }
/* === Навигация === */
.nav {
justify-self: center;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px;
background: var(--hd-pill-bg);
border: 1px solid var(--hd-pill-border);
border-radius: 100px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: var(--hd-pill-shadow);
transition:
background 0.45s var(--ease),
border-color 0.45s var(--ease),
box-shadow 0.45s var(--ease);
}
.nav a {
display: inline-flex;
align-items: center;
padding: 12px 18px;
border-radius: 100px;
font-family: var(--font-base);
font-size: 14px;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.01em;
color: var(--hd-text-mute);
text-decoration: none;
white-space: nowrap;
transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.nav a:hover {
color: var(--hd-text);
}
.nav a.is-active {
background: var(--hd-active-bg);
color: var(--hd-active-text);
}
/* === CTA-кнопка в хедере === */
.header-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 18px;
background: var(--hd-pill-bg);
border: 1px solid var(--hd-pill-border);
border-radius: 100px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: var(--hd-pill-shadow);
font-family: var(--font-cta);
font-weight: 400;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.01em;
color: var(--hd-text);
text-decoration: none;
cursor: pointer;
transition:
background 0.45s var(--ease),
border-color 0.45s var(--ease),
color 0.45s var(--ease),
box-shadow 0.45s var(--ease);
flex-shrink: 0;
}
.header-cta .arr {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--hd-arr-bg);
color: var(--hd-arr-color);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 0.45s var(--ease),
color 0.45s var(--ease),
transform 0.5s var(--ease);
}
.header-cta:hover {
background: var(--accent);
border-color: var(--accent);
color: #FFF;
}
.header-cta:hover .arr {
background: #FFF;
color: var(--accent);
transform: rotate(-45deg);
}
/* Мобильная иконка-меню (по умолчанию скрыта) */
.menu-btn {
display: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--primary);
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.menu-btn:active { transform: scale(0.94); }
.menu-btn svg { width: 18px; height: 18px; }
/* =========================================
HERO
========================================= */
.hero {
position: relative;
height: 100vh;
min-height: 640px;
margin-top: calc(var(--header-h) * -1);
overflow: hidden;
background: var(--primary);
isolation: isolate;
}
/* фото фоном */
.hero-media {
position: absolute;
inset: 0;
background-image: url("https://static.tildacdn.com/tild6138-6232-4164-a530-653564633164/79ca92cba04d497f9261.png");
background-size: cover;
background-position: center;
z-index: -2;
}
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.55) 100%),
radial-gradient(70% 60% at 18% 80%, rgba(0, 0, 0, 0.5) 0%, transparent 70%),
rgba(0, 0, 0, 0.12);
}
/* Контент Hero */
.hero-inner {
position: relative;
height: 100%;
max-width: 1380px;
margin: 0 auto;
padding: calc(var(--header-h) + 24px) 30px 56px;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.85fr);
gap: 40px;
align-items: end;
color: #FFF;
}
/* Левая колонка */
.hero-left {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 760px;
padding-bottom: 8px;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 14px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 100px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-family: var(--font-base);
font-size: 14px;
font-weight: 500;
color: #FFF;
width: max-content;
}
.hero-pill svg { opacity: 0.9; }
.hero-title {
font-family: var(--font-base);
font-weight: 600;
font-size: 52px;
line-height: 0.98;
letter-spacing: -0.025em;
color: #FFF;
}
.hero-title .accent {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
font-size: 55px;
color: rgba(255, 255, 255, 0.78);
letter-spacing: -0.01em;
}
.hero-lead {
max-width: 520px;
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.015em;
color: rgba(255, 255, 255, 0.78);
}
.hero-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
/* CTA primary — белая поверх фото */
.cta-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 18px;
background: #FFF;
border-radius: 100px;
font-family: var(--font-cta);
font-weight: 400;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.01em;
color: var(--primary);
text-decoration: none;
cursor: pointer;
transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.cta-primary .arr {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--primary);
color: #FFF;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.5s var(--ease);
}
.cta-primary:hover {
background: var(--accent);
color: #FFF;
}
.cta-primary:hover .arr {
background: #FFF;
color: var(--accent);
transform: rotate(-45deg);
}
/* CTA glass */
.cta-glass {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 18px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 100px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-family: var(--font-cta);
font-weight: 400;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.01em;
color: #FFF;
text-decoration: none;
cursor: pointer;
transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.cta-glass .arr {
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.4s var(--ease), transform 0.5s var(--ease);
}
.cta-glass:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.35);
}
.cta-glass:hover .arr {
transform: rotate(-45deg);
}
/* =========================================
ВИДЖЕТ — Telegram-бот для записи (glass)
========================================= */
.hero-widget {
position: relative;
align-self: end;
width: 100%;
max-width: 360px;
justify-self: end;
padding: 22px 22px 14px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 24px;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
color: #FFF;
box-shadow:
0 24px 60px -24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
display: flex;
flex-direction: column;
gap: 16px;
}
.tg-head {
display: flex;
align-items: center;
gap: 12px;
}
.tg-avatar {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: #229ED9;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFF;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.tg-avatar svg { width: 20px; height: 20px; }
.tg-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.tg-meta .name {
font-family: var(--font-base);
font-weight: 500;
font-size: 14px;
letter-spacing: -0.01em;
color: #FFF;
}
.tg-meta .handle {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
letter-spacing: -0.01em;
}
/* Бейдж скидки в шапке */
.tg-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tg-badge .pct {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 0 10px;
background: rgba(106, 162, 54, 0.22);
border: 1px solid rgba(232, 240, 222, 0.35);
color: #DCEAC8;
border-radius: 100px;
font-family: var(--font-italic);
font-style: italic;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
}
.tg-title {
font-family: var(--font-base);
font-weight: 600;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.02em;
color: #FFF;
}
.tg-title em {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
}
.tg-sub {
font-size: 13.5px;
line-height: 1.45;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.75);
}
/* CTA — Telegram (на стекле — белая) */
.tg-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 8px 8px 18px;
background: #FFFFFF;
color: var(--primary);
border-radius: 100px;
text-decoration: none;
font-family: var(--font-cta);
font-weight: 500;
font-size: 14px;
letter-spacing: -0.005em;
margin-top: 4px;
transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.tg-cta:hover { background: var(--accent); color: #FFF; }
.tg-cta:hover .tg-cta-arr { background: #FFF; color: var(--accent); transform: rotate(-45deg); }
.tg-cta-arr {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--primary);
color: #FFF;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.demo-inner {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.demo-inner h2 {
font-size: 48px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 0.95;
}
.demo-inner h2 em {
font-family: var(--font-italic);
font-weight: 400;
color: var(--secondary);
}
.demo-inner p {
margin-top: 20px;
color: var(--secondary);
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
/* =========================================
АДАПТИВ
========================================= */
@media (max-width: 1024px) {
.hero-inner {
grid-template-columns: 1fr;
gap: 28px;
align-items: end;
}
.hero-widget {
max-width: 100%;
justify-self: stretch;
}
.nav {
display: none;
}
}
/* =========================================
МОБИЛЬНАЯ ВЕРСИЯ
========================================= */
@media (max-width: 640px) {
:root {
--header-h: 60px;
}
/* HEADER — плавающая «таблетка» с отступом 10px от краёв */
.site-header {
position: fixed;
top: var(--edge);
left: var(--edge);
right: var(--edge);
width: auto;
height: var(--header-h);
padding: 0 8px 0 20px;
border-radius: 100px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
color: #FFF;
justify-content: flex-start;
border-bottom: none;
}
.site-header.is-pinned {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(0, 0, 0, 0.06);
color: var(--primary);
box-shadow: 0 10px 28px -16px rgba(11, 11, 11, 0.18);
}
.header-inner {
grid-template-columns: 1fr auto;
gap: 12px;
}
.logo {
height: 22px;
color: currentColor;
}
.header-cta { display: none; }
.menu-btn {
display: inline-flex;
background: rgba(255, 255, 255, 0.95);
color: var(--primary);
}
.site-header.is-pinned .menu-btn {
background: var(--primary);
color: #FFF;
}
/* HERO — фото на весь экран, без скруглений и отступов */
.hero {
margin: 0;
height: 100vh;
min-height: 100vh;
border-radius: 0;
margin-top: 0;
}
.hero-media::after {
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.38) 0%,
rgba(0, 0, 0, 0.10) 24%,
rgba(0, 0, 0, 0) 48%,
rgba(0, 0, 0, 0.55) 82%,
rgba(0, 0, 0, 0.78) 100%),
radial-gradient(85% 60% at 20% 100%, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
}
/* Сетка hero-inner — flex колонкой, отступы по бокам по 18px */
.hero-inner {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: calc(var(--header-h) + var(--edge) + 16px) 18px 18px;
gap: 16px;
}
/* Виджет — внизу, под текстом */
.hero-widget {
order: 2;
width: 100%;
max-width: 100%;
align-self: stretch;
padding: 16px;
border-radius: 20px;
gap: 16px;
box-shadow:
0 18px 40px -20px rgba(0, 0, 0, 0.5),
inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
}
/* На мобильной версии прячем подзаголовок и tg-cta */
.hero-widget .tg-sub,
.hero-widget .tg-cta { display: none; }
.tg-avatar { width: 36px; height: 36px; }
.tg-avatar svg { width: 18px; height: 18px; }
.tg-meta .name { font-size: 13px; }
.tg-meta .handle { font-size: 11.5px; }
.tg-badge .pct { height: 24px; padding: 0 9px; font-size: 13px; }
.tg-title { font-size: 18px; line-height: 1.18; }
/* Левая колонка — теперь сверху */
.hero-left {
order: 1;
gap: 16px;
padding-bottom: 0;
max-width: 100%;
}
.hero-pill {
padding: 8px 14px 8px 12px;
font-size: 12.5px;
gap: 8px;
}
.hero-title {
font-size: 32px;
line-height: 1.0;
}
.hero-title .accent { font-size: 34px; }
.hero-lead {
max-width: 100%;
font-size: 13.5px;
line-height: 1.4;
}
.hero-actions {
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.cta-primary,
.cta-glass {
width: 100%;
justify-content: space-between;
padding: 8px 8px 8px 18px;
}
}
/* === очень узкие экраны (≤360px) === */
@media (max-width: 360px) {
.hero-title { font-size: 28px; }
.hero-title .accent { font-size: 30px; }
.tg-title { font-size: 17px; }
.hero-inner { padding: calc(var(--header-h) + var(--edge) + 14px) 14px 14px; }
}
/* =========================================
БУРГЕР-МЕНЮ (drawer)
========================================= */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(11, 11, 11, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.menu-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.drawer {
position: fixed;
top: 0;
right: 0;
z-index: 101;
width: 86vw;
max-width: 380px;
height: 100vh;
height: 100dvh;
background: #FFFFFF;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.5s var(--ease);
overflow: hidden;
}
.drawer.is-open { transform: translateX(0); }
/* === Шапка drawer === */
.drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 22px 20px;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.drawer-logo {
display: inline-flex;
align-items: center;
color: var(--primary);
}
.drawer-logo svg path { fill: currentColor; }
.drawer-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--line);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.drawer-close:hover { background: #F6F6F6; border-color: #E5E5E5; }
.drawer-close:active { transform: scale(0.94); }
/* === Навигация === */
.drawer-nav {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 16px 12px;
overflow-y: auto;
}
.drawer-nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-radius: 14px;
font-family: var(--font-base);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.015em;
color: var(--primary);
text-decoration: none;
transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.drawer-nav a svg {
color: var(--tertiary);
flex-shrink: 0;
transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.drawer-nav a:hover { background: #FAFAFA; }
.drawer-nav a:hover svg { color: var(--secondary); transform: translateX(2px); }
.drawer-nav a.is-active {
background: var(--accent);
color: #FFFFFF;
}
.drawer-nav a.is-active svg { color: #FFFFFF; }
/* === Футер drawer === */
.drawer-foot {
flex-shrink: 0;
padding: 18px 22px 22px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 14px;
}
.drawer-addr {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--secondary);
}
.drawer-phone {
font-family: var(--font-base);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.025em;
color: var(--primary);
text-decoration: none;
margin-top: -2px;
}
.drawer-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.drawer-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 7px 7px 18px;
border-radius: 100px;
font-family: var(--font-cta);
font-weight: 500;
font-size: 14px;
letter-spacing: -0.005em;
text-decoration: none;
transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.drawer-cta .arr {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.drawer-cta--ghost {
background: transparent;
border: 1px solid var(--line);
color: var(--primary);
}
.drawer-cta--ghost .arr { background: #F0F0F0; color: var(--primary); }
.drawer-cta--ghost:hover { background: var(--primary); border-color: var(--primary); color: #FFF; }
.drawer-cta--ghost:hover .arr { background: #FFF; color: var(--primary); transform: rotate(-45deg); }
.drawer-cta--dark {
background: var(--primary);
color: #FFFFFF;
}
.drawer-cta--dark .arr { background: #FFFFFF; color: var(--primary); }
.drawer-cta--dark:hover { background: var(--accent); }
.drawer-cta--dark:hover .arr { color: var(--accent); transform: rotate(-45deg); }
.drawer-socials {
display: flex;
align-items: center;
gap: 14px;
margin-top: 6px;
}
.drawer-socials .soc {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--secondary);
border: 1px solid var(--line);
transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.drawer-socials .soc svg { width: 18px; height: 18px; }
.drawer-socials .soc:hover {
color: var(--primary);
border-color: #DCDCDC;
background: #FAFAFA;
}
body.menu-locked { overflow: hidden; }
Метро Чёрная речка
Спокойное местокому это нужно
Отдельный кабинет в Приморском районе. Один мастер, одна программа — собирается под вас. SPA-ритуалы от 30 минут с натуральными маслами, скрабами и массажем лица.