:root {
/* ===== ШКАЛА ВНУТРЕННИХ ОТСТУПОВ ПЛАШЕК =====
ВАЖНО, КАК ЭТО СЮДА ПОПАЛО: 07.08.2026 эти шесть строк лежали в файле
ВНЕ всякого правила — сразу после закрытой скобки другого селектора.
Браузер их не видел, переменные не существовали, и пять мест на сайте
получали padding: 0 — текст упирался в кромку плашки. Заметнее всего
на блоке «Автор тура — это вы»: буквы стояли в 1 точке от края.
Пострадали: .tab (вкладки), .umra-author-band__body, .fam-assure__cta
и ещё два правила с var(--p-btn) и var(--p-label).
Держать их ТОЛЬКО здесь, в :root. Значения не выдуманы — это те,
что уже чаще всего встречались в файле. */
--p-label: 6px 14px; /* подпись-ярлык: 12px, ПРОПИСНЫЕ, pill */
--p-chip: 8px 16px; /* чип и плашка поверх видео: 13px, pill */
--p-btn: 14px 26px; /* кнопка и одиночный CTA-линк, высота 48px */
--p-row: 16px 20px; /* узкая строка-плашка внутри карточки */
--p-card: 32px 24px; /* обычная карточка */
--p-card-lg: 48px 32px; /* крупная панель */
--black: #282828;
--black-2:#1a1410;
--gold: #ceb282;
--gold-2: #b89865;
--brown: #806654;
--cream: #f5efe4;
--line: #ceb28233;
--font-h: 'Philosopher', 'Times New Roman', serif;
--font-b: 'Inter', system-ui, -apple-system, sans-serif;
/* --- ШАГ СЕТКИ (всё кратно 4). rem — только для размера шрифта, отступы — в px --- */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
/* --- ШИРИНЫ КОЛОНОК --- */
--w-wide: 1200px; /* широкие секции и подвал */
--w-mid: 880px; /* средние блоки */
--w-text: 680px; /* колонка чтения */
/* --- РАДИУСЫ (короткий набор) --- */
--r-xs: 4px;
--r-md: 16px; /* все карточки */
--r-lg: 24px; /* крупные панели: меню, чат, плашка cookies */
--r-pill: 999px;
/* --- ЛИНИИ (три ступени вместо 20 прозрачностей) --- */
--line-1: rgba(206, 178, 130, .12); /* едва заметный разделитель */
--line-2: rgba(206, 178, 130, .25); /* обычная рамка карточки */
--line-3: rgba(206, 178, 130, .50); /* акцент, активное состояние */
/* --- ТЕНИ (три ступени) --- */
--sh-1: 0 4px 12px rgba(0, 0, 0, .35);
--sh-2: 0 12px 36px rgba(0, 0, 0, .45);
--sh-3: 0 24px 64px rgba(0, 0, 0, .55);
/* Тёмный интерфейс: браузер рисует свои элементы (скроллбар, option) в тон */
color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Глобальная защита от орфанов: заголовки балансируем, параграфы — не оставляем сирот */
h1, h2, h3, h4, h5, h6,
.section-link, .umra-h2, .hero__eyebrow, .promo-panel__title,
.route-card__title, .ai-card__title, .faq-category__title,
.first-umra__bonus-title {
text-wrap: balance;
}
p, li, .umra-lead, .alula-intro-text {
text-wrap: pretty;
hanging-punctuation: first last;
}
body {
background: var(--black);
color: var(--cream);
font-family: var(--font-b);
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
overflow-x: hidden;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
/* =================== ПЛЁНОЧНОЕ ЗЕРНО ===================
Тонкая статичная текстура поверх всего кадра: убирает «пластиковую» плоскость и
полосы (banding) на тёмном фоне, добавляет тихую фильмовую фактуру. Без анимации —
ноль нагрузки на скролл. pointer-events:none — клики проходят насквозь. Нейтрально-
серый шум (saturate 0), чтобы не конфликтовать с золотом бренда. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
@media print { body::after { display: none; } }
/* Базовый размер: раньше на 480px он ПАДАЛ с 16px до 15px — сайт становился мельче
на большем экране. Теперь одна плавная шкала без скачка: 16px → 18px. */
html { font-size: clamp(15px, 1.8vw, 18px); }
/* НЕ ИСПОЛЬЗУЕТСЯ на 2026-07-27 — класса нет ни на одной из 100 страниц */
/* =================== PROMO PILL + DROPDOWN PANEL =================== */
.promo {
position: fixed; top: 1rem; left: 50%;
z-index: 49;
height: 50px; padding: 0 1.6rem;
border-radius: var(--r-pill);
background: rgba(40, 40, 40, .60);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
color: var(--gold);
font-family: var(--font-h);
font-style: italic;
font-weight: 400;
font-size: .92rem;
letter-spacing: .015em;
border: 1px solid rgba(206, 178, 130, .25);
cursor: pointer;
transform: translateX(-50%);
transition: background .25s, border-color .25s, color .25s;
display: inline-flex; align-items: center; justify-content: center;
white-space: nowrap;
}
/* Промо видно сразу — без анимации появления. Старый opacity-fade удалён,
так как в некоторых iframe-средах transition стопорился. */
.promo:hover, .promo[aria-expanded="true"] {
background: rgb(40, 40, 40);
border-color: var(--gold);
color: var(--cream);
}
@media (max-width: 480px) {
.promo {
font-size: .8rem;
height: 46px;
padding: 0 1rem;
max-width: calc(100vw - 140px);
overflow: hidden;
text-overflow: ellipsis;
}
}
.promo-panel {
position: fixed; top: 4.5rem; left: 50%;
z-index: 48;
width: min(320px, 88vw);
border-radius: var(--r-lg);
overflow: hidden;
background: rgb(26, 20, 16);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--line);
box-shadow: 0 24px 64px rgba(0,0,0,.55);
transform: translateX(-50%) translateY(-8px) scale(.96);
opacity: 0; pointer-events: none;
transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.promo-panel.promo-panel--open {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) scale(1) !important;
pointer-events: auto !important;
}
.promo-panel__img { width: 100%; height: 120px; object-fit: cover; display: block; }
.promo-panel__inner { padding: 1.1rem 1.25rem 1.25rem; text-align: center; }
.promo-panel__title { font-family: var(--font-h); font-size: 1.3rem; line-height: 1.2; color: var(--cream); margin: 0 0 .35rem; }
.promo-panel__sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 .4rem; }
.promo-panel__meta { font-size: .82rem; color: #b8ad97; margin: 0 0 .9rem; }
.promo-panel__btn { display: inline-block; padding: .7rem 1.4rem; background: var(--gold); color: var(--black); border-radius: var(--r-pill); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: all .2s; }
.promo-panel__btn:hover { background: var(--cream); transform: translateY(-1px); }
@media (min-width: 768px) {
.promo { font-size: 1rem; padding: 0 1.5rem; }
.promo-panel { width: 360px; top: 5rem; }
}
/* =================== NAV (lyag.ru style — minimal pill logo + dots) =================== */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
padding: 1rem calc(1.25rem + env(safe-area-inset-right, 0px))
1rem calc(1.25rem + env(safe-area-inset-left, 0px));
pointer-events: none;
}
/* Тёмный полупрозрачный «навес» под прозрачной шапкой, чтобы заголовки
секций не сливались с лого/точками, когда проезжают под навбаром. */
.nav::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: -34px;
z-index: -1;
pointer-events: none;
background: linear-gradient(to bottom,
rgba(26, 20, 16, .62),
rgba(26, 20, 16, .32) 55%,
rgba(26, 20, 16, 0));
}
.nav > * { pointer-events: auto; }
.nav__logo {
display: inline-flex; align-items: center; justify-content: center;
width: 50px; height: 50px;
background: rgba(40, 40, 40, .60);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: 50%;
text-decoration: none;
transition: all .3s ease;
}
.nav__logo:hover {
background: rgb(40, 40, 40);
border-color: var(--gold);
}
.nav__logo-icon {
width: 38px; height: 38px; display: block;
/* белый PNG → золотой брендовый #ceb282 через фильтр */
filter: brightness(0) saturate(100%)
invert(78%) sepia(15%) saturate(680%)
hue-rotate(2deg) brightness(96%) contrast(82%);
transition: filter .3s ease;
}
.nav__logo:hover .nav__logo-icon {
filter: brightness(0) saturate(100%)
invert(85%) sepia(18%) saturate(820%)
hue-rotate(2deg) brightness(102%) contrast(86%);
}
/* Brand menu button — золотой бренд-знак вместо обычной точки-кнопки */
.nav__menu-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .55rem;
height: 50px;
padding: 0 18px 0 14px;
background: rgba(40, 40, 40, .60);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-pill);
color: var(--gold);
cursor: pointer;
transition: all .3s ease;
font-family: var(--font-b);
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
}
.nav__menu-btn:hover {
background: rgb(40, 40, 40);
border-color: var(--gold);
color: var(--cream);
}
.nav__menu-rings {
display: inline-flex; align-items: center; justify-content: center;
color: var(--gold);
transition: transform .35s ease;
}
.nav__menu-btn:hover .nav__menu-rings { transform: scale(1.12); }
.nav__menu-label {
font-weight: 500;
}
@media (max-width: 480px) {
.nav__menu-label { display: none; }
.nav__menu-btn { padding: 0 12px; }
}
/* === NAV RIGHT GROUP: CTA + меню =============================== */
.nav__right {
display: inline-flex;
align-items: center;
gap: .5rem;
pointer-events: auto;
}
.nav__cta {
display: inline-flex;
align-items: center;
gap: .4rem;
/* Одна кнопка на весь сайт: высота 50, кегль 14, разрядка .12em, отступ 26px.
Было 13px / .16em / 18px — из-за этого главная кнопка сайта в шапке
выглядела мельче и «растянутее» всех остальных золотых кнопок.
Телефон не трогаем: на ≤720 и ≤480 ниже по файлу свои компактные правила. */
height: 50px;
padding: 0 26px;
background: var(--gold);
color: var(--black);
font-family: var(--font-b);
font-size: 14px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
border-radius: var(--r-pill);
transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s, box-shadow .25s;
border: 1px solid var(--gold, #ceb282);
box-shadow: 0 2px 12px rgba(206, 178, 130, .18);
}
.nav__cta:hover {
background: #e8d3a8;
border-color: #e8d3a8;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(206, 178, 130, .35);
}
.nav__cta-arrow {
font-size: 1.1em;
transition: transform .3s ease;
}
.nav__cta:hover .nav__cta-arrow { transform: translateX(3px); }
@media (max-width: 720px) {
.nav__cta {
padding: 0 12px;
height: 44px;
font-size: 12px;
letter-spacing: .1em;
gap: .25rem;
}
.nav__right { gap: .3rem; }
.promo { max-width: calc(100vw - 200px); }
}
@media (max-width: 480px) {
/* На малом экране убираем CTA-пилл из навбара — оставляем только logo | язык | menu.
Цель: чистый apple-style nav. CTA доступен через меню и chat-fab. */
.nav__cta { display: none; }
}
/* === NAV LANGUAGE SWITCHER — глобус + язык словом (всегда виден в шапке) === */
.nav__lang { position: relative; }
.nav__lang summary { list-style: none; }
.nav__lang summary::-webkit-details-marker { display: none; }
.nav__lang summary::marker { content: ""; }
.nav__lang-btn {
display: inline-flex; align-items: center; gap: .42rem;
height: 50px; padding: 0 11px 0 13px;
background: rgba(40, 40, 40, .60);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-pill);
color: var(--gold);
cursor: pointer;
white-space: nowrap;
-webkit-user-select: none; user-select: none;
font-family: var(--font-b);
font-size: .8rem; letter-spacing: .01em;
transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.nav__lang-btn:hover,
.nav__lang[open] .nav__lang-btn {
background: rgb(40, 40, 40);
border-color: var(--gold);
color: var(--cream);
}
.nav__lang-btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.nav__lang-globe { flex: none; }
.nav__lang-current { font-weight: 500; }
.nav__lang-chev { flex: none; opacity: .8; transition: transform .3s ease; }
.nav__lang[open] .nav__lang-chev { transform: rotate(180deg); }
.nav__lang-menu {
position: absolute; top: calc(100% + 8px); left: 0; right: auto;
min-width: 178px;
display: flex; flex-direction: column; gap: 4px;
padding: .4rem;
background: rgba(40, 40, 40, .97);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-md);
box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
z-index: 60;
animation: navLangIn .22s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes navLangIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.nav__lang-item {
display: flex; align-items: center; gap: .45rem;
padding: .58rem .7rem;
min-height: 44px;
border-radius: var(--r-md);
color: var(--cream);
text-decoration: none;
font-family: var(--font-b);
font-size: .92rem; letter-spacing: .005em; line-height: 1.1;
transition: background .2s ease, color .2s ease;
}
.nav__lang-item:hover { background: rgba(206, 178, 130, .12); color: var(--gold); }
.nav__lang-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.nav__lang-item--active { color: var(--gold); font-weight: 600; cursor: default; }
.nav__lang-check { flex: none; width: 1em; color: var(--gold); font-size: .82em; text-align: center; }
.nav__lang-item:not(.nav__lang-item--active) .nav__lang-check { visibility: hidden; }
@media (max-width: 720px) {
.nav__lang-btn { height: 44px; padding: 0 9px 0 11px; font-size: 13px; gap: .3rem; }
.nav__lang-globe { width: 16px; height: 16px; }
}
/* =================== SIDE MENU — brand-styled panel =================== */
.menu-panel {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(420px, 100vw);
z-index: 60;
background:
radial-gradient(ellipse at top right, rgba(206, 178, 130, .12) 0%, transparent 50%),
linear-gradient(180deg, rgba(40,40,40,.985) 0%, rgba(26,20,16,.985) 100%);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border-left: 1px solid rgba(206, 178, 130, .12);
box-shadow: -32px 0 80px rgba(0,0,0,.55);
transform: translateX(100%);
transition: transform .55s cubic-bezier(.2,.7,.2,1);
display: flex; flex-direction: column;
padding: 5.5rem 2.2rem 2rem;
overflow-y: auto;
overflow-x: hidden; /* декоративный круг в углу создавал лишнюю прокрутку вбок */
overscroll-behavior: contain;
}
/* Орбита-фон в углу панели (брендовый декор стр.24) */
.menu-panel::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 360px; height: 360px;
background-image:
radial-gradient(circle at center, transparent 40%, rgba(206,178,130,.08) 41%, rgba(206,178,130,.08) 42%, transparent 43%),
radial-gradient(circle at center, transparent 60%, rgba(206,178,130,.07) 61%, rgba(206,178,130,.07) 62%, transparent 63%),
radial-gradient(circle at center, transparent 80%, rgba(206,178,130,.05) 81%, rgba(206,178,130,.05) 82%, transparent 83%);
pointer-events: none;
z-index: 0;
}
.menu-panel > * { position: relative; z-index: 1; }
.menu-panel::-webkit-scrollbar { width: 3px; }
.menu-panel::-webkit-scrollbar-thumb { background: rgba(206, 178, 130, .35); border-radius: var(--r-xs); }
.menu-panel.open { transform: translateX(0); }
/* === MAIN NAV LIST in side menu — clean, tight, premium list === */
.menu-panel__nav {
list-style: none;
padding: 0;
margin: 0 0 .5rem;
border-top: 1px solid rgba(206,178,130,.12);
}
.menu-panel__nav li {
border-bottom: 1px solid rgba(206, 178, 130, .12);
}
.menu-panel__nav a {
font-family: var(--font-h);
font-size: 1.15rem;
font-weight: 400;
letter-spacing: .02em;
color: rgb(206, 178, 130);
padding: .85rem .25rem;
display: flex;
align-items: center;
gap: .65rem;
text-decoration: none;
transition: color .3s ease, padding-left .3s ease, background .3s ease;
position: relative;
}
.menu-panel__nav a::before {
content: '';
display: inline-block;
width: 0;
height: 1px;
background: var(--gold, #ceb282);
transition: width .35s ease;
}
.menu-panel__nav a:hover {
color: var(--cream, #f5efe4);
padding-left: .55rem;
background: linear-gradient(90deg, rgba(206, 178, 130, .12), transparent 50%);
}
.menu-panel__nav a:hover::before { width: 18px; }
@media (max-width: 640px) {
.menu-panel__nav a { font-size: 1.05rem; padding: .75rem .15rem; }
}
/* Section разделители — Inter caps gold metadata */
.menu-panel .panel-section {
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(206,178,130,.12);
}
.menu-panel .panel-section h5, .menu-panel .panel-section .panel-h {
font-family: var(--font-b);
font-size: 12px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
opacity: .75;
margin-bottom: .8rem;
}
.menu-panel .panel-section ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 0;
}
.menu-panel .panel-section li {
font-family: var(--font-b);
font-size: .82rem;
line-height: 1.5;
color: rgba(245, 239, 228, .78);
}
.menu-panel .panel-section li a {
color: rgba(245, 239, 228, .78);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all .25s;
display: inline-block;
padding: 7px 0; /* зона касания 33px вместо 19,7px */
}
.menu-panel .panel-section li a:hover {
color: var(--gold);
border-bottom-color: rgba(206, 178, 130, .50);
}
/* Pays row — мелкие плашки оплаты в брендовом стиле */
.menu-panel .panel-pays {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
gap: .65rem .55rem;
align-items: start;
}
.menu-panel .panel-pays .pay-item {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
text-align: center;
}
.menu-panel .panel-pays .pay-logo {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .35rem .5rem;
background: rgba(255,255,255,.92);
border-radius: var(--r-xs);
height: 30px;
width: 100%;
max-width: 70px;
box-sizing: border-box;
transition: transform .25s ease, background .25s ease;
}
.menu-panel .panel-pays .pay-logo svg {
display: block;
height: 16px;
width: auto;
max-width: 100%;
}
.menu-panel .panel-pays .pay-logo--mc svg,
.menu-panel .panel-pays .pay-logo--usdt svg,
.menu-panel .panel-pays .pay-logo--usd svg,
.menu-panel .panel-pays .pay-logo--eur svg {
height: 20px;
}
.menu-panel .panel-pays .pay-logo:hover {
transform: translateY(-1px);
background: #fff;
}
.menu-panel .panel-pays .pay-label {
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(206,178,130,.78);
white-space: nowrap;
}
/* Соц-профили — тонкий ряд gold line-иконок в side-menu (тихий люкс) */
.menu-panel .panel-socials {
display: flex;
gap: .55rem;
margin-top: 1rem;
}
.menu-panel .panel-socials .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border: 1px solid rgba(206, 178, 130, .25);
border-radius: 50%;
color: rgba(206,178,130,.78);
transition: color .25s ease, border-color .25s ease, transform .25s ease, background .25s ease;
}
.menu-panel .panel-socials .social-link svg { width: 19px; height: 19px; display: block; }
.menu-panel .panel-socials .social-link:hover {
color: var(--gold, #CEB282);
border-color: rgba(206, 178, 130, .50);
background: rgba(206, 178, 130, .12);
transform: translateY(-1px);
}
.menu-panel .panel-socials .social-link:focus-visible {
outline: 2px solid var(--gold, #CEB282);
outline-offset: 2px;
}
/* Юр.инфо — мелким Inter в подвале */
.menu-panel .panel-legal {
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(206,178,130,.12);
font-family: var(--font-b);
font-size: 12px;
line-height: 1.5;
color: rgba(245, 239, 228, .78);
letter-spacing: .02em;
}
.menu-panel .panel-legal strong {
display: block;
font-weight: 500;
color: var(--cream);
margin-bottom: .25rem;
letter-spacing: .04em;
}
/* Slogan в подвале — финальный brand-stamp */
.menu-panel .panel-slogan {
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(206, 178, 130, .12);
}
.menu-panel .panel-slogan__line {
font-family: var(--font-h);
font-style: italic;
font-size: 1.15rem;
color: var(--gold);
letter-spacing: .03em;
display: block;
}
.menu-panel .panel-slogan__coords {
display: block;
margin-top: .55rem;
font-family: var(--font-b);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(206, 178, 130, .78);
}
/* Закрытие крестиком — золотой круг с бордером */
.menu-close {
position: absolute; top: 1.5rem; right: 1.5rem;
width: 42px; height: 42px;
display: grid; place-items: center;
background: transparent;
border: 1px solid rgba(206, 178, 130, .25);
border-radius: 50%;
color: var(--gold);
font-size: 1rem;
cursor: pointer;
transition: all .25s;
z-index: 2;
}
.menu-close:hover {
background: rgba(206, 178, 130, .12);
border-color: var(--gold);
transform: rotate(90deg);
}
.menu-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.6);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
z-index: 55;
opacity: 0; pointer-events: none;
transition: opacity .45s;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }
/* =================== VIDEO SECTION (lyag.ru pattern) =================== */
/* Anchor-jump offset — фикс-навбар (~82px) не должен накрывать заголовок при переходе по якорю.
scroll-margin-top работает только в момент перехода к #якорю, обычную раскладку не меняет. */
[id] { scroll-margin-top: 92px; }
@media (min-width: 768px) { [id] { scroll-margin-top: 104px; } }
.vsec {
position: relative; width: 100%;
height: 100vh; height: 100dvh;
display: flex; align-items: center; justify-content: center;
overflow: hidden; isolation: isolate;
background: var(--black);
contain: paint;
transform: translate3d(0,0,0);
}
.vsec__bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
z-index: 0;
}
.vsec > :not(.vsec__bg):not(.vsec__overlay):not(.hero-aurora):not(.hero-spot):not(.live-circles) {
position: relative; z-index: 2;
}
.vsec__overlay { z-index: 1 !important; }
.vsec__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(40, 40, 40, .60) 0%, rgba(40,40,40,.35) 50%, rgba(40, 40, 40, .85) 100%);
z-index: -1;
}
/* Hero variant — centered, как у lyag.ru */
.vsec--hero { align-items: center; justify-content: center; padding: 0 1.25rem; text-align: center; }
@media (min-width: 768px) { .vsec--hero { padding: 0 3rem; } }
.hero__content { max-width: 900px; width: 100%; margin: 0 auto; position: relative; z-index: 2; }
.vsec--hero h1 {
font-family: var(--font-h); /* Philosopher по брендбуку стр. 23 */
font-weight: 400;
font-style: normal;
font-size: clamp(2rem, 6vw, 4.2rem);
line-height: 1.12;
letter-spacing: -.01em;
color: var(--cream);
text-shadow: 0 4px 36px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
margin: 0 auto;
max-width: min(94vw, 920px);
text-wrap: balance;
}
.vsec--hero h1 em { font-style: italic; color: var(--gold); font-weight: 400; }
.hero__sub {
display: block;
margin-top: 1.6rem;
font-family: var(--font-b);
font-style: normal;
font-weight: 400;
font-size: clamp(14px, 1.6vw, 16px);
letter-spacing: .02em;
color: rgba(245, 239, 228, .55);
text-transform: none;
line-height: 1.55;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: 14px 26px; border-radius: var(--r-pill); font-family: var(--font-b); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; transition: all .25s; border: 1px solid transparent; white-space: nowrap; text-decoration: none; }
/* На телефоне длинная надпись («оформить — ответим за 5 минут», «get a quote —
reply within 5 minutes») физически обрезалась: nowrap + overflow:hidden у блока.
Разрешаем перенос и слегка ужимаем кегль — текст перестаёт резаться. */
@media (max-width: 480px) {
/* Длинная подпись на телефоне резалась (nowrap + overflow у блока) — перенос оставляем.
А кегль и разрядку НЕ переопределяем вообще: пусть кнопка на телефоне будет ровно
такой же, как на компьютере — 14px / .12em / min-height 50px из базового .btn.
Так с телефона уходит отдельный «телефонный» кегль 13px и разрядка .08em,
и при этом НЕ появляется ни одного нового числа (48px и line-height 1.2 не нужны:
базовые 50px уже совпадают с .hero__btn).
Замер в браузере, 390px: «Подарить родителям Умру» — 300,6 x 52,7, одна строка;
чеченская «дӀахӀотта — 5 минотехь жоп лур ду» — 342 x 75,4, две строки;
горизонтальной прокрутки нет (scrollWidth = 390). */
.btn {
white-space: normal;
text-align: center;
padding: 14px 20px;
}
}
/* ДОПИСАТЬ В САМЫЙ КОНЕЦ style.css (обязательно в конец: правило
.umra-form-block button[type="submit"] на строке 1762 и правило на 5404
стоят ниже по файлу и при равной силе перебьют любое правило выше).
Кнопка отправки формы — это тот же .btn, но её отдельно уменьшили до .82rem
(12,3px) и раздули отступ до 14px 36px !important. Без этой строчки она
останется единственной кнопкой на телефоне не по стандарту.
Замер после правки, 390px: «Отправить заявку» 14px/.12em, одна строка;
самая длинная, чеченская, — 342 x 75,4, две строки, прокрутки нет. */
@media (max-width: 480px) {
.umra-form-block button[type="submit"],
.contact-form button[type="submit"] {
padding: 14px 20px !important;
font-size: 14px;
letter-spacing: .12em;
}
}
.btn--primary { background: var(--gold); color: var(--black); }
.btn--primary:hover { background: var(--cream); transform: translateY(-2px); }
/* Единственная второстепенная кнопка сайта: тонкая золотая обводка на тёмном стекле. */
.btn--ghost { border-color: var(--line-3); color: var(--gold); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(40, 40, 40, .35); }
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--black); transform: translateY(-2px); }
/* Section title — sans-serif bold, центр (как у lyag.ru «сертификат») */
.vsec:not(.vsec--hero) { align-items: center; justify-content: center; text-align: center; padding: 0 1.25rem; }
.section-link {
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
max-width: 92vw;
text-align: center;
position: relative; display: inline-block;
font-family: var(--font-h); /* Philosopher serif по брендбуку */
font-weight: 400;
font-size: clamp(2.6rem, 14vw, 8.4rem);
line-height: 1.04;
letter-spacing: -.015em;
color: rgb(245, 239, 228);
text-decoration: none;
text-shadow: 0 6px 40px rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.5);
padding-bottom: .12em;
}
/* Long-word fallback: shrink for words 10+ chars */
/* НЕ ИСПОЛЬЗУЕТСЯ на 2026-07-27 — класса нет ни на одной из 100 страниц */
.section-link[data-long="1"] { font-size: clamp(2.1rem, 11.5vw, 7.4rem); letter-spacing: -.02em; }
.section-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: var(--gold);
transform: scaleX(0);
transform-origin: center;
transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .2s;
}
.section-link:hover::after,
.section-link.in-view::after { transform: scaleX(0.7); }
.vsec__title-block { text-align: left; max-width: 1248px; width: 100%; padding: 0 24px; position: relative; z-index: 2; }
.vsec__eyebrow {
display: block; font-size: 12px; letter-spacing: .22em; color: var(--gold);
text-transform: uppercase; margin-bottom: 1.5rem;
}
/* Надзаголовок поверх видео — локальная тёмная «пилюля» под самой подписью.
Затемнять весь кадр ради двух слов не нужно; на тёмных секциях плашки нет. */
.vsec--detail .vsec__eyebrow,
.vsec--umra-hero .vsec__eyebrow {
display: inline-block;
width: fit-content;
background: rgba(26, 20, 16, .85);
padding: 6px 14px;
border-radius: var(--r-pill);
}
/* НЕ ИСПОЛЬЗУЕТСЯ на 2026-07-27 — класса нет ни на одной из 100 страниц */
.vsec__caption { display: block; margin-top: 1.25rem; font-size: .92rem; color: #f5efe4; max-width: 480px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* НЕ ИСПОЛЬЗУЕТСЯ на 2026-07-27 — класса нет ни на одной из 100 страниц */
/* Coords for hero */
.coords { position: absolute; font-size: 12px; letter-spacing: .25em; color: var(--gold-2); display: none; }
@media (min-width: 900px) {
.coords.left { display: block; top: 50%; left: 1.5rem; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.coords.right { display: block; top: 50%; right: 1.5rem; writing-mode: vertical-rl; transform: translateY(-50%); }
}
/* =================== FOOTER (compact) =================== */
footer { padding: 4rem 1.25rem 2rem; border-top: 1px solid var(--line); background: var(--black); }
@media (min-width: 768px) { footer { padding: 5rem 3rem 2.5rem; } }
.foot {
max-width: 1200px; margin: 0 auto;
display: grid; gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .foot { grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: start; } }
.foot__brand { font-family: var(--font-h); font-size: 1.5rem; color: var(--gold); line-height: 1.2; }
.foot__brand small { display: block; font-size: .75rem; color: var(--gold-2); letter-spacing: .2em; margin-top: .5rem; font-family: var(--font-b); text-transform: uppercase; }
.foot h4 { font-family: var(--font-h); font-size: .8rem; color: rgba(206, 178, 130, .78); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 400; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; color: #c9bda5; }
.foot ul a:hover { color: var(--gold); }
.foot__legal { max-width: 1200px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 12px; color: #9a917f; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 768px) { .foot__legal { flex-direction: row; justify-content: space-between; } }
.foot__legal a { color: var(--gold-2); }
.foot__legal a:hover { color: var(--gold); }
/* No-scroll when menu open */
.no-scroll { overflow: hidden; }
/* =================== CHAT WIDGET (fixed bottom-right) =================== */
.chat-fab {
position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 45;
display: flex; align-items: center; gap: .5rem;
padding: .9rem 1.25rem;
background: var(--gold); color: var(--black);
border-radius: var(--r-pill);
font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
box-shadow: 0 12px 36px rgba(0,0,0,.5);
transition: all .3s;
}
.chat-fab:hover { transform: translateY(-3px); background: var(--cream); box-shadow: 0 18px 48px rgba(0,0,0,.6); }
.chat-fab svg { width: 18px; height: 18px; fill: currentColor; }
.chat-fab__label { display: none; }
@media (min-width: 768px) { .chat-fab__label { display: inline; } .chat-fab { bottom: 2rem; right: 2rem; padding: 1.1rem 1.6rem; } }
/* =================== EXPANDED MENU PANEL =================== */
.panel-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.panel-section h5, .panel-section .panel-h { font-family: var(--font-h); font-size: 12px; color: rgba(206, 178, 130, .78); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; margin-bottom: .75rem; }
.panel-section ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.panel-section ul a { font-family: var(--font-b); font-size: .82rem; color: #b8ad97; padding: 0; border: 0; }
.panel-section ul a:hover { color: var(--gold); border: 0; }
.panel-pays { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; align-items: center; }
.panel-legal { font-size: 12px; color: rgba(245, 239, 228, .55); line-height: 1.5; margin-top: .75rem; }
.panel-legal strong { color: var(--gold-2); display: block; font-weight: 500; }
/* =================== DETAIL PAGE =================== */
/* Боковое поле задаёт только .vsec__title-block (24px). Раньше поле складывалось
дважды (секция 3rem + блок 3rem = 96px), и заголовок стоял на 54–81px правее текста
под ним. Теперь заголовок и колонка контента начинаются на одной линии. */
.vsec--detail { height: 70vh; height: 70dvh; align-items: flex-end; padding: 0 0 64px; }
/* 85vh вместо 75vh: полоса выше — вертикального кадра видно больше.
Потолка в пикселях нет намеренно: на большом мониторе он срезал бы кадр
сильнее, чем сейчас (замер 2560x1440: 23,7 % против 18,9 % с потолком). */
@media (min-width: 768px) { .vsec--detail { padding: 0 0 80px; height: 85vh; } }
.vsec--detail .section-link { color: var(--cream); }
.vsec--detail .section-link::after { display: none; }
.detail-content { background: var(--black); padding: 64px 24px 96px; }
@media (min-width: 768px) { .detail-content { padding: 96px 24px 128px; } }
.detail-inner { max-width: var(--w-mid); margin: 0 auto; }
.detail-lead { font-family: var(--font-h); font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: var(--gold); line-height: 1.5; margin-bottom: 2rem; font-style: italic; }
.detail-body p { font-size: 1.05rem; color: #f5efe4; margin-bottom: 1.25rem; line-height: 1.7; }
.detail-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
/* Tabs (как у lyag.ru внизу detail-страниц) */
.tabs { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem; }
/* было .5rem .9rem = 8/14.4px. По вертикали уже совпало с чипом,
по горизонтали — нет. Правим ТОЛЬКО отступ.
Шрифт и кегль оставляем: это решение про голос, а не про сетку. */
.tab { font-family: var(--font-h); font-size: 1rem; padding: var(--p-chip); border-radius: var(--r-pill); border: 1px solid rgba(206, 178, 130, .50); color: #a89b83; transition: all .25s; }
.tab:hover { color: var(--gold); border-color: var(--gold); }
.tab.active { background: var(--gold); color: var(--black); border-color: var(--gold); }
/* Package detail */
.pack-price { font-family: var(--font-h); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--cream); margin-bottom: 1.5rem; }
.pack-price small { font-size: .8rem; color: var(--gold-2); letter-spacing: .12em; font-family: var(--font-b); }
.pack-features { list-style: none; display: flex; flex-direction: column; gap: .75rem; font-size: 1rem; color: #f5efe4; margin: 2rem 0; }
.pack-features li { padding-left: 1.5rem; position: relative; }
.pack-features li::before { content: "○"; position: absolute; left: 0; color: var(--gold); font-size: 1.1rem; }
/* Package hub cards */
.pack-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 768px) { .pack-cards { grid-template-columns: repeat(3, 1fr); } }
.pack-card { display: block; padding: 32px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.03); transition: all .3s; } /* было border-radius: var(--r-pill) 0 var(--r-pill) 0 — единственная асимметричная форма на сайте: два угла срезаны «каплей» на 999px, два оставлены острыми. Ни у одной другой карточки такого нет, смысла форма не несёт — приводим к обычной карточке --r-md и отступу 32/24 */
.pack-card:hover { background: rgba(206, 178, 130, .12); border-color: var(--gold); transform: translateY(-3px); }
.pack-card__name { font-family: var(--font-h); font-size: 1.6rem; color: var(--gold); margin-bottom: .5rem; }
.pack-card__price { font-family: var(--font-h); font-size: 1.4rem; color: var(--cream); margin-bottom: 1rem; }
.pack-card__lead { font-size: .92rem; color: #b8ad97; margin-bottom: 1.5rem; min-height: 4.5rem; }
.pack-card__arrow { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
/* =================== SCROLLSMOOTHER WRAPPER =================== */
#smooth-wrapper { position: fixed; inset: 0; overflow: hidden; }
#smooth-content { will-change: transform; }
/* Нижний «воздух» под контентом на телефоне: фикс-панель «рассчитать» (высота ~56px
+ отступ 20px) больше не перекрывает последнюю строку футера / подпись карты /
карточку Telegram — страница доскролливается выше панели. */
@media (max-width: 480px) {
#smooth-content { padding-bottom: 96px; }
}
/* =================== DUAL HERO VIDEO (mobile/desktop) =================== */
.vsec__bg--mobile { display: block; }
.vsec__bg--desktop { display: none; }
@media (min-width: 768px) {
.vsec__bg--mobile { display: none; }
.vsec__bg--desktop { display: block; }
}
/* =================== CHAT WIDGET (inline expanding panel) =================== */
.cw { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 45; }
@media (min-width: 768px) { .cw { bottom: 2rem; right: 2rem; } }
.cw__bubble {
position: relative; width: 60px; height: 60px;
border: 0; border-radius: 50%; cursor: pointer;
background: var(--gold); color: var(--black);
box-shadow: 0 12px 36px rgba(0,0,0,.5);
display: grid; place-items: center;
transition: all .3s;
}
.cw__bubble:hover { transform: scale(1.08); background: var(--cream); box-shadow: 0 18px 48px rgba(0,0,0,.65); }
.cw__bubble svg { width: 26px; height: 26px; }
.cw__bubble-dot { display: none; }
.cw__panel {
position: absolute; bottom: 80px; right: 0;
width: min(360px, calc(100vw - 2.5rem));
background: rgb(26, 20, 16);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
overflow: hidden;
opacity: 0; transform: translateY(12px) scale(.96);
transition: opacity .25s, transform .25s;
pointer-events: none;
}
.cw__panel.open { opacity: 1; transform: none; pointer-events: auto; }
.cw__head {
display: flex; align-items: center; gap: .75rem;
padding: 1rem 1.1rem;
background: linear-gradient(135deg, var(--brown) 0%, #4a3d31 100%);
border-bottom: 1px solid var(--line);
}
.cw__avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--gold); color: var(--black);
display: grid; place-items: center;
font-family: var(--font-h); font-size: 1.2rem; font-weight: 700;
}
.cw__head-text { flex: 1; line-height: 1.2; }
.cw__head-text strong { display: block; font-family: var(--font-h); font-size: 1rem; color: var(--cream); font-weight: 700; }
.cw__head-text span { font-size: 12px; color: var(--gold); letter-spacing: .05em; }
.cw__close {
background: transparent; border: 0; color: var(--cream); cursor: pointer;
width: 40px; height: 40px; margin: -6px -6px -6px 0;
display: grid; place-items: center;
border-radius: 50%; font-size: 1.3rem; line-height: 1;
}
.cw__close:hover { background: rgba(255,255,255,.1); }
.cw__msg-stack { padding: 1.25rem 1.1rem .5rem; }
.cw__msg {
display: inline-block; max-width: 100%;
background: rgba(255,255,255,.05);
border: 1px solid var(--line);
padding: .75rem 1rem;
border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs); /* «хвостик» речевого пузыря — приём осознанный (общепринятый знак реплики), форму сохраняем один-в-один: 16/16/16/4. Но записываем токенами, чтобы два сырых значения (1rem и .25rem) ушли из системы радиусов */
font-size: .88rem; color: #f5efe4; line-height: 1.5;
}
.cw__meta { font-size: 12px; color: rgba(245, 239, 228, .55); letter-spacing: .04em; margin-top: .35rem; padding-left: .25rem; }
.cw__qr-grid { padding: .25rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.cw__qr {
display: block; padding: .65rem .9rem;
background: rgba(206, 178, 130, .12);
border: 1px solid var(--line);
color: var(--gold);
border-radius: var(--r-pill);
text-decoration: none;
font-size: .85rem;
transition: all .2s;
}
.cw__qr:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.cw__cta {
display: block; text-align: center; padding: .9rem;
background: var(--gold);
color: var(--black); text-decoration: none;
font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.cw__cta:hover { background: var(--cream); }
/* Hide old chat-fab if present */
.chat-fab { display: none !important; }
/* =================== SHARE BUTTON + TOAST =================== */
.nav__share {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; padding: 0;
border: 1px solid var(--line); border-radius: 50%;
color: var(--gold); background: transparent;
cursor: pointer; transition: all .25s;
margin-right: .5rem;
}
.nav__share:hover { background: var(--gold); color: var(--black); border-color: var(--gold); transform: scale(1.05); }
.share-toast {
position: fixed; bottom: 6rem; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--gold); color: var(--black);
padding: .75rem 1.5rem; border-radius: var(--r-pill);
font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
box-shadow: 0 12px 36px rgba(0,0,0,.5);
opacity: 0; pointer-events: none; z-index: 100;
transition: opacity .3s, transform .3s;
}
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* =================== ADMIN INSIDE SPA =================== */
.admin-spa { background: var(--black); padding: 5rem 1.25rem 5rem; min-height: 100vh; }
@media (min-width: 768px) { .admin-spa { padding: 6rem 3rem 5rem; } }
.admin-spa__toolbar {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line);
}
.admin-spa__toolbar h2 { font-family: var(--font-h); font-size: 1.5rem; color: var(--gold); }
.admin-spa__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.admin-spa__layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1400px; margin: 0 auto; }
@media (min-width: 1000px) { .admin-spa__layout { grid-template-columns: 280px 1fr; } }
.admin-spa__sidebar { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem; }
.admin-spa__sidebar h3 { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin: 1.25rem 0 .5rem; font-weight: 700; }
.admin-spa__sidebar h3:first-child { margin-top: 0; }
.admin-spa__sidebar nav a {
display: block; padding: .45rem .75rem; border-radius: 8px;
color: var(--cream); cursor: pointer; font-size: .85rem;
margin-bottom: 2px; transition: all .15s; text-decoration: none;
}
.admin-spa__sidebar nav a:hover { background: rgba(206, 178, 130, .12); color: var(--gold); }
.admin-spa__sidebar nav a.active { background: var(--gold); color: var(--black); font-weight: 500; }
.admin-spa__editor { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; min-height: 400px; }
.admin-spa__editor h2 { font-family: var(--font-h); font-size: 1.2rem; color: var(--gold); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.admin-spa__editor label { display: block; margin: 1rem 0 .35rem; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); font-weight: 500; }
.admin-spa__editor input,
.admin-spa__editor textarea {
width: 100%; background: rgba(0,0,0,.4); border: 1px solid var(--line);
color: var(--cream); padding: .6rem .85rem; border-radius: 8px;
font: inherit; font-size: .88rem; line-height: 1.5;
}
.admin-spa__editor input:focus, .admin-spa__editor textarea:focus { outline: none; border-color: var(--gold); }
.admin-spa__editor textarea { resize: vertical; min-height: 70px; font-family: inherit; }
.admin-spa__editor .list-item { background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 8px; padding: .85rem; margin-bottom: .6rem; }
.admin-spa__editor .list-row { display: flex; align-items: center; gap: .5rem; }
.admin-spa__editor .list-row textarea { flex: 1; min-height: 36px; }
.admin-spa__editor .icon-btn--danger {
padding: .35rem .6rem; background: transparent; border: 1px solid var(--line);
border-radius: var(--r-xs); color: var(--cream); cursor: pointer; font-size: .85rem;
}
.admin-spa__editor .icon-btn--danger:hover { border-color: #c25b5b; color: #c25b5b; }
.admin-spa__editor .info-banner {
background: linear-gradient(90deg, rgba(206,178,130,.12) 0%, transparent 100%);
border-left: 3px solid var(--gold); padding: .65rem 1rem; border-radius: var(--r-xs);
margin-bottom: 1.25rem; font-size: .82rem;
}
.admin-spa__editor .info-banner a { color: var(--gold); text-decoration: underline; }
.status { font-size: .8rem; padding: .4rem .75rem; border-radius: var(--r-xs); }
.status--ok { background: rgba(111,198,111,.15); color: #6fc66f; }
.status--unsaved { background: rgba(194,91,91,.15); color: #c25b5b; }
/* Scroll-reveal — сдержанное появление (тихий люкс). JS навешивает .revealed (IO + 8s fallback).
Скрытое состояние ТОЛЬКО под html.js → без JS контент виден сразу (no-JS safety). */
html.js .gsap-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
html.js .gsap-reveal:not(.revealed) { will-change: opacity, transform; }
html.js .gsap-reveal.revealed { opacity: 1; transform: none; }
/* Reduced-motion: всегда видно, без движения */
@media (prefers-reduced-motion: reduce) {
html.js .gsap-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Hero h1 — word-by-word blur-in (тихий люкс). Блок-h1 статичен (gsap-reveal
нейтрализован), движение несут отдельные слова .hw: out-of-focus → в фокус.
Каскад через --wi. Раскрытие триггерит .revealed (revealHero stagger). */
html.js .hero-title-words.gsap-reveal,
html.js .hero-title-words.gsap-reveal:not(.revealed) {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
html.js .hero-title-words .hw {
display: inline-block;
opacity: 0;
filter: blur(14px);
transform: translateY(6px);
transition: opacity .9s cubic-bezier(.22,.61,.36,1),
filter .9s cubic-bezier(.22,.61,.36,1),
transform .9s cubic-bezier(.22,.61,.36,1);
transition-delay: calc(var(--wi, 0) * 90ms);
will-change: opacity, filter, transform;
}
html.js .hero-title-words.revealed .hw {
opacity: 1;
filter: blur(0);
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js .hero-title-words .hw {
opacity: 1 !important;
filter: none !important;
transform: none !important;
transition: none !important;
}
}
/* Page-load veil (тихий люкс). Брендовый чёрный поднимается ОДИН раз за сессию
и передаёт эстафету hero blur-in: тёмное уходит — слова входят в фокус.
Чистая CSS-анимация самозавершается (forwards → opacity:0 + visibility:hidden
+ всегда pointer-events:none), поэтому НИКОГДА не блокирует пользователя и не
зависит от JS. Пропускается на повторных переходах (html.no-curtain, ставится
inline-скриптом из sessionStorage до первой отрисовки) и при reduced-motion. */
.curtain {
position: fixed;
inset: 0;
z-index: 10000;
background: #282828;
pointer-events: none;
animation: curtainLift .62s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes curtainLift {
0% { opacity: 1; }
14% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
html.no-curtain .curtain { display: none; }
@media (prefers-reduced-motion: reduce) {
.curtain { display: none; }
}
/* Spotlight-карточки (тихий люкс): мягкое золотое свечение следует за курсором.
.has-spot/.card-spot навешивает JS только на desktop-hover без reduced-motion.
Свечение лежит НАД фоном карточки, но ПОД контентом (isolation + z-index:-1),
поэтому текст остаётся чистым. pointer-events:none — клики проходят насквозь. */
.has-spot { isolation: isolate; }
.card-spot {
position: absolute;
inset: 0;
border-radius: inherit;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity .5s ease;
background: radial-gradient(220px circle at var(--spot-x, 50%) var(--spot-y, 50%),
rgba(206,178,130,.20), rgba(206,178,130,0) 60%);
}
.has-spot:hover .card-spot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .card-spot { display: none !important; } }
/* === Component C — «Живая фото-лента» (photo river): бесшовный CSS-marquee ===
Тихий люкс: медленный дрейф реальных кадров, мягкие края, пауза по наведению.
Без JS. Трек = два одинаковых набора; уезжает на -50% → петля без шва.
Расстояние между кадрами держим margin'ом на .river__item (НЕ gap), чтобы
половины совпадали ровно и стык был невидим. reduced-motion → стоп + скролл. */
.photo-river {
position: relative;
padding: clamp(2.4rem, 6vw, 4.5rem) 0;
background: #282828; /* фирменный чёрный — лента-«дыхание» между секциями */
overflow: hidden;
}
.photo-river .river {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.river__track {
display: flex;
width: max-content;
will-change: transform;
animation: river-drift 72s linear infinite;
}
.photo-river .river:hover .river__track { animation-play-state: paused; }
.river__item {
flex: 0 0 auto;
margin: 0 7px;
border-radius: var(--r-md);
overflow: hidden;
}
.river__item img {
display: block;
height: clamp(150px, 22vw, 230px);
width: auto;
border-radius: inherit;
box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
@keyframes river-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.river__track { animation: none; }
.photo-river .river { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.river__item--dup { display: none; }
}
/* =================== BOTTOM BAR (fixed, как у lyag.ru) =================== */
.bottom-bar {
position: fixed; left: 1.25rem; right: 1.25rem;
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
z-index: 48;
display: flex; align-items: center; gap: .75rem;
}
.bottom-bar__cta {
flex: 1; display: inline-flex; align-items: center; justify-content: center;
gap: .55rem;
height: 56px; padding: 0 1rem;
background: var(--gold);
color: var(--black);
border: 1px solid var(--gold);
border-radius: var(--r-pill);
font-family: var(--font-b);
font-size: 14px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: all .3s ease;
box-shadow: 0 12px 36px rgba(206,178,130,.22), 0 4px 12px rgba(0,0,0,.4);
}
.bottom-bar__cta::after {
content: '→';
font-size: 1.1em;
letter-spacing: 0;
transition: transform .3s ease;
}
.bottom-bar__cta:hover {
background: var(--cream);
border-color: var(--cream);
transform: translateY(-2px);
box-shadow: 0 18px 48px rgba(206,178,130,.32), 0 6px 16px rgba(0,0,0,.5);
}
.bottom-bar__cta:hover::after { transform: translateX(4px); }
/* Авто-скрытие плавающей кнопки «рассчитать»: на первом экране (hero) и около форм —
чтобы не дублировать hero-CTA и не перекрывать кнопку отправки формы. Чат остаётся. */
.bottom-bar--cta-hidden .bottom-bar__cta {
opacity: 0;
transform: translateY(180%);
pointer-events: none;
visibility: hidden;
}
.bottom-bar__chat {
width: 56px; height: 56px;
background: rgba(40,40,40,.85);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(206, 178, 130, .25);
color: var(--gold);
border-radius: 50%;
cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 12px 36px rgba(0,0,0,.45);
transition: all .3s ease;
flex-shrink: 0;
}
.bottom-bar__chat:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--black);
transform: translateY(-2px);
}
.bottom-bar__chat svg { width: 22px; height: 22px; }
/* Sticky «рассчитать» CTA видна только на телефонах (≤480) — там в навбаре CTA скрыта.
На бо́льших экранах CTA есть в шапке, поэтому нижняя панель сжимается до одной
чат-кнопки в углу (без дубля кнопки «рассчитать»). */
@media (min-width: 481px) {
.bottom-bar { left: auto; right: 1.25rem; width: auto; }
.bottom-bar__cta { display: none; }
}
@media (min-width: 768px) {
.bottom-bar { right: 2rem; bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.bottom-bar__chat { width: 60px; height: 60px; }
}
/* Chat panel — теперь раскрывается над bottom bar */
.cw__panel {
position: fixed; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
right: 1.25rem; left: 1.25rem;
z-index: 49;
max-width: 380px; margin: 0 auto;
/* На маленьком телефоне окно уезжало под шапку, и крестик «закрыть»
попадал под кнопку «меню». Ограничиваем высоту и даём свой скролл. */
max-height: calc(100dvh - 5.5rem - 96px);
overflow-y: auto;
overscroll-behavior: contain;
}
@media (min-width: 768px) { .cw__panel { right: 2rem; left: auto; bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); width: 380px; } }
/* Скрыть старый плавающий chat-fab (он теперь в bottom-bar) */
.cw { display: none !important; }
.chat-fab { display: none !important; }
/* =================== POSTER ken-burns: subtle zoom for motion feel until video loads =================== */
.vsec__bg {
animation: kenburns 20s ease-in-out infinite alternate;
transform-origin: center;
}
@keyframes kenburns {
0% { transform: scale(1.0); }
100% { transform: scale(1.03); }
}
/* Disable kenburns once video starts playing (JS adds .playing class) */
.vsec__bg.playing { animation: none; }
/* prefers-reduced-motion: в этом режиме фоновые ролики секций мы не будим вовсе
(JS: VID_POSTER_ONLY) — значит ken-burns остался бы ЕДИНСТВЕННЫМ движением
у человека, который попросил движения поменьше. Выключаем и его.
(На touch и ≤767px он и так уже выключен блоком ниже.) */
@media (prefers-reduced-motion: reduce) {
.vsec__bg { animation: none !important; }
}
/* На сенсорных устройствах (телефон/планшет) выключаем бесконечную анимацию
приближения фона. Если система блокирует автоплей видео (энергосбережение),
эта анимация иначе крутится на ВСЕХ фонах разом и постоянно нагружает
телефон → рывки при прокрутке. Видео даёт движение само, анимация не нужна. */
@media (hover: none), (max-width: 767px) {
.vsec__bg { animation: none !important; }
}
/* Убираем родную иконку «плэй» (iOS/Android), которая вылезает поверх фонового
видео, пока оно на паузе или ещё не запустилось (например при заблокированном
автоплее). Фоновые видео — декоративные, ими не управляют вручную, кнопка
не нужна. На видео-отзывы (.mph__video, #founderVid) это НЕ влияет. */
.vsec__bg::-webkit-media-controls,
.vsec__bg::-webkit-media-controls-enclosure,
.vsec__bg::-webkit-media-controls-panel,
.vsec__bg::-webkit-media-controls-start-playback-button,
.vsec__bg::-webkit-media-controls-play-button,
.vsec__bg::-webkit-media-controls-overlay-play-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ==== Contact form ==== */
.contact-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
max-width: 540px;
margin: 0 0 2rem;
}
.contact-form label {
display: flex;
flex-direction: column;
gap: .4rem;
}
.contact-form label > span {
font-size: .82rem;
letter-spacing: .02em;
text-transform: lowercase;
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
font-family: 'Inter', sans-serif;
font-size: 1rem;
padding: .85rem 1rem;
border-radius: var(--r-xs);
transition: border-color .2s;
width: 100%;
box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
}
.contact-form textarea { resize: vertical; min-height: 80px; }
.contact-form__consent {
flex-direction: row !important;
align-items: flex-start;
gap: .6rem !important;
font-size: .85rem;
}
.contact-form__consent input[type="checkbox"] {
margin-top: .2rem;
flex-shrink: 0;
}
.contact-form__consent a { text-decoration: underline; }
.contact-form button[type="submit"] {
align-self: flex-start;
margin-top: .5rem;
}
/* ==== FAQ accordion ==== */
.faq-list {
display: flex;
flex-direction: column;
gap: .6rem;
margin-top: 1.5rem;
}
.faq-item {
border-radius: var(--r-md);
padding: 0;
overflow: hidden;
transition: border-color .2s;
}
.faq-item > summary {
cursor: pointer;
padding: 1.1rem 1.4rem;
font-family: 'Philosopher', serif;
font-size: 1.15rem;
list-style: none;
position: relative;
padding-right: 3rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: '+';
position: absolute;
right: 1.4rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
transition: transform .2s;
}
.faq-item[open] > summary::after { content: '−'; }
.faq-item > p {
padding: 0 1.4rem 1.2rem;
line-height: 1.65;
margin: 0;
}
/* ==== Legal document (privacy) ==== */
.legal-doc h3, .legal-doc h2 {
font-family: 'Philosopher', serif;
font-size: 1.4rem;
margin-top: 2.2rem;
margin-bottom: .8rem;
}
.legal-doc p,
.legal-doc ul { line-height: 1.7; }
.legal-doc ul {
padding-left: 1.4rem;
margin: .6rem 0 1rem;
}
.legal-doc li { margin-bottom: .35rem; }
.legal-doc a { text-decoration: underline; }
/* ==== Dark-theme overrides для form/faq/legal ==== */
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(206, 178, 130, .50); /* было 1.77:1 — рамки почти не видно */
color: #f5efe4;
font-size: max(16px, 1rem); /* меньше 16px iOS зумит страницу */
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(240,232,212,0.62); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: var(--gold);
background: rgba(255,255,255,0.08);
}
.contact-form label > span { color: var(--gold); }
.contact-form__consent { color: #a89a80; }
.contact-form__consent a { color: var(--gold); }
.faq-item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
}
.faq-item[open] {
background: rgba(255,255,255,0.07);
border-color: var(--gold);
}
.faq-item > summary { color: #f5efe4; }
.faq-item > summary::after { color: var(--gold); }
.faq-item > p { color: #f5efe4; }
.legal-doc h3, .legal-doc h2 { color: var(--gold); }
.legal-doc p,
.legal-doc ul,
.legal-doc li { color: #f5efe4; }
.legal-doc strong { color: #f5efe4; }
.legal-doc a,
.detail-content a:not(.btn):not(.btn--primary):not(.btn--ghost):not(.detail-content__cta):not(.tab) {
color: var(--gold);
text-decoration: underline;
text-decoration-color: rgba(206,178,130,.45);
text-underline-offset: 3px;
}
.legal-doc a:hover,
.detail-content a:not(.btn):not(.btn--primary):not(.btn--ghost):hover {
text-decoration-color: var(--gold);
}
/* ==================== UMRA PAGE FUNNEL ==================== */
/* Hero hint под словом "умра" */
.umra-hero__hint {
margin-top: 1.5rem;
font-family: var(--font-b);
font-size: clamp(14px, 1.6vw, 16px);
color: rgb(245, 239, 228); /* было .65 — на среднем кадре видео 3.3 */
letter-spacing: .02em;
text-align: center;
font-style: normal;
max-width: 640px; /* было 97 знаков в строке при норме 80 */
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Общие блоки воронки */
.umra-block {
background: var(--black);
padding: 64px 24px;
border-bottom: 1px solid rgba(255,255,255,.04);
}
@media (min-width: 768px) {
.umra-block { padding: 96px 24px; }
}
/* ТЕЛЕФОН. У секций стояло 64 точки сверху и снизу, хотя единый вертикальный
ритм сайта (--sec-y, пункт 11 в конце файла) на этой ширине равен 44.
По нему уже живут .sx, .photo-river, .bento, .socials и подвал —
.umra-block просто остался в стороне. На каждом стыке двух секций
складывалось 64+64 = 128 точек пустоты, станет 88.
ЗАМЕР 390x844: solo 18 570 -> 18 090, /packages/ 17 388 -> 16 866,
women 17 851 -> 17 371, /destinations/al-ula/ 13 080 -> 12 640.
Ноутбук и планшет не затронуты: с 768 работает правило выше,
проверено на 1440 и 768 — высота страницы не изменилась ни на точку.
Записи в блоге не затронуты: у .blog-post__content .umra-block
свой отступ 28 и селектор специфичнее.
.tours-context тоже сохраняет свои 45 — его правило идёт ниже
по файлу (строка 1869); так и задумано, это отдельная узкая полоса. */
@media (max-width: 640px) {
.umra-block {
padding-top: var(--sec-y);
padding-bottom: var(--sec-y);
}
}
.umra-inner { max-width: var(--w-wide); margin: 0 auto; }
.umra-h2 {
font-family: var(--font-h); /* Philosopher по брендбуку */
font-weight: 400;
font-size: clamp(1.8rem, 4.5vw, 3rem);
color: var(--cream);
letter-spacing: -.005em;
line-height: 1.1;
margin-bottom: 2.5rem;
text-align: center;
text-wrap: balance;
}
.umra-lead {
font-family: var(--font-h);
font-style: italic;
font-size: clamp(1.05rem, 2.2vw, 1.4rem);
color: var(--gold);
line-height: 1.5;
max-width: 760px;
margin: 0 auto 1.5rem;
text-align: center;
}
/* ТЕЛЕФОН. Отступ 2.5rem = 37,5 точки под заголовком секции рассчитан на
крупный компьютерный кегль (корневой кегль на 390 равен 15px).
На телефоне заголовок уже уменьшен — clamp(26px, 4.4vw, 46px)
в конце файла даёт ровно 26, — а отступ под ним остался прежним,
и заголовок отрывается от собственного текста.
Ставим 24 под заголовком и 20 под курсивным подзаголовком —
обе величины уже есть на шкале отступов сайта.
Шрифт НЕ уменьшаем.
ЗАМЕР 390x844: solo -155 точек, women -155, /packages/ -123,
/destinations/al-ula/ -114.
Правила .umra-form-block .umra-h2 и .umra-segments .umra-h2
специфичнее и сохраняют свой отступ 1rem.
Ноутбук 1440 и планшет 768 — без изменений. */
@media (max-width: 640px) {
.umra-h2 { margin-bottom: 24px; }
.umra-lead { margin-bottom: 20px; }
}
/* Block 2: Stats */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.stat-card { text-align: center; padding: 1.5rem .5rem; }
.stat-card__big {
font-family: var(--font-b);
font-weight: 700;
font-size: clamp(1.8rem, 4.5vw, 3rem);
color: var(--gold);
letter-spacing: -.02em;
line-height: 1;
margin-bottom: .5rem;
}
.stat-card__label {
font-size: .85rem;
color: #a89a80;
letter-spacing: .03em;
}
/* Block 3: Segments */
.segments-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) { .segments-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .segments-grid { grid-template-columns: repeat(4, 1fr); } }
.segment-card {
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
transition: all .25s;
}
.segment-card:hover {
background: rgba(255,255,255,.07);
border-color: var(--gold);
transform: translateY(-3px);
}
.segment-card h3 {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.3rem;
color: var(--cream);
margin-bottom: .8rem;
}
.segment-card p {
color: #a89a80;
font-size: .95rem;
line-height: 1.55;
margin: 0;
}
/* Block 4: First Umra + Al-Ula */
.first-umra-wrap {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 900px) {
.first-umra-wrap { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}
.first-umra__text { color: #f5efe4; line-height: 1.7; }
.first-umra__text p { color: #f5efe4; margin-bottom: 1.2rem; }
.first-umra__bonus-title {
font-family: var(--font-h);
font-style: italic;
font-size: 1.5rem;
color: var(--gold);
margin: 1.5rem 0 .8rem;
}
.first-umra__img {
height: 320px;
background-size: cover;
background-position: center;
border-radius: var(--r-md);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
@media (min-width: 900px) { .first-umra__img { height: 460px; } }
/* Portrait photo variant: contain aspect via cover (not the stretch-fill 100% 100%) */
.first-umra__img--cover { background-size: cover !important; background-position: center !important; }
.first-umra-wrap:hover .first-umra__img--cover { transform: scale(1.05); }
/* Block 5: Tariffs */
.tariffs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) { .tariffs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tariffs-grid { grid-template-columns: repeat(4, 1fr); } }
.tariff-card {
position: relative;
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
transition: all .25s;
}
.tariff-card:hover { transform: translateY(-4px); border-color: rgba(206,178,130,.5); }
.tariff-card--recommended {
background: rgba(206, 178, 130, .12);
border-color: var(--gold);
}
.tariff-card__badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--gold);
color: var(--black);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
padding: .3rem .8rem;
border-radius: var(--r-pill);
white-space: nowrap;
}
.tariff-card__name {
font-family: var(--font-h);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.2;
color: var(--cream);
margin: 0 0 .3rem;
text-align: center;
}
.tariff-card__price {
font-family: var(--font-b);
font-weight: 700;
font-size: 1.4rem;
color: var(--gold);
margin-bottom: 1.5rem;
text-align: center;
letter-spacing: -.01em;
}
.tariff-card__features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
flex: 1;
}
.tariff-card__features li {
padding: .55rem 0 .55rem 1.5rem;
position: relative;
color: #f5efe4;
font-size: .9rem;
line-height: 1.55;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.tariff-card__features li::before {
content: '✓';
position: absolute;
left: 0;
top: .55rem;
color: var(--gold);
font-weight: bold;
}
.tariff-card__features li:last-child { border-bottom: none; }
.tariff-card__cta { width: 100%; justify-content: center; }
/* Block 6: How it works steps */
.steps-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }
.step-card {
position: relative;
padding: 32px 24px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
}
.step-card__n {
position: absolute;
top: -18px;
left: 1.5rem;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--gold);
color: var(--black);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
}
.step-card h3 {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.15rem;
color: var(--cream);
margin: .8rem 0 .6rem;
}
.step-card p {
color: #a89a80;
font-size: .9rem;
line-height: 1.55;
margin: 0;
}
/* Block 9: Form (uses .contact-form styles) — center form */
.umra-form-block .contact-form { max-width: 600px; margin: 2rem auto 0; }
.umra-form-block .umra-h2 { margin-bottom: 1rem; }
.umra-form-block .umra-lead { margin-bottom: 2rem; }
.umra-form-block .detail-cta { justify-content: center; }
.umra-form-block button[type="submit"] {
width: 100%;
padding: 1.1rem 1.6rem;
font-size: .82rem;
}
/* Hero umra — increase top padding for smaller hint */
.vsec--umra-hero .vsec__title-block { padding-top: 0; }
/* ==================== CERTIFICATE PAGE ==================== */
/* Box features list */
.box-features {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
}
.box-features li {
padding: .55rem 0 .55rem 1.8rem;
position: relative;
color: #f5efe4;
font-size: .98rem;
line-height: 1.5;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.box-features li::before {
content: '✦';
position: absolute;
left: 0;
top: .55rem;
color: var(--gold);
}
.box-features li:last-child { border-bottom: none; }
/* Nominals grid */
.nominals-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 600px) { .nominals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .nominals-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .nominals-grid { grid-template-columns: repeat(5, 1fr); } }
.nominal-card {
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r-md);
text-align: center;
transition: all .25s;
cursor: pointer;
}
.nominal-card:hover {
background: rgba(206, 178, 130, .12);
border-color: var(--gold);
transform: translateY(-3px);
}
.nominal-card__amount {
font-family: var(--font-b);
font-weight: 700;
font-size: 1.6rem;
color: var(--gold);
letter-spacing: -.01em;
margin-bottom: .8rem;
}
.nominal-card p {
color: #a89a80;
font-size: .88rem;
line-height: 1.5;
margin: 0;
}
/* ==================== TOURS PAGE ==================== */
/* Context block */
.tours-context { padding: 3rem 1.25rem; }
@media (min-width: 768px) { .tours-context { padding: 4rem 3rem; } }
.tours-context__text {
font-size: 1.05rem;
color: #f5efe4;
margin-bottom: .5rem;
}
.tours-context__sub {
font-size: .92rem;
color: rgba(196, 184, 160, .92);
margin: 0;
}
.tours-context__link {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 3px;
}
.tours-context__link:hover { color: var(--cream); }
/* Intents grid */
.intents-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) { .intents-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .intents-grid { grid-template-columns: repeat(4, 1fr); } }
.intent-card {
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
text-decoration: none;
display: block;
transition: all .25s;
}
.intent-card:hover {
background: rgba(206, 178, 130, .12);
border-color: var(--gold);
transform: translateY(-3px);
}
.intent-card__icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.intent-card h3 {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.15rem;
color: var(--cream);
margin-bottom: .6rem;
line-height: 1.3;
}
.intent-card p {
color: #a89a80;
font-size: .9rem;
line-height: 1.5;
margin: 0;
}
/* Tours section heading icon */
.tours-section__icon { display: inline-block; margin-right: .4rem; }
/* Route cards */
.routes-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) { .routes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .routes-grid { grid-template-columns: repeat(3, 1fr); } }
.route-card {
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
transition: all .25s;
}
.route-card:hover {
transform: translateY(-3px);
border-color: var(--gold);
background: rgba(255,255,255,.06);
}
.route-card__title {
font-family: var(--font-h);
font-weight: 600;
font-size: 1.4rem;
color: var(--cream);
margin: 0 0 .35rem;
letter-spacing: -.01em;
}
.route-card__subtitle {
font-family: var(--font-h);
font-style: italic;
color: var(--gold);
font-size: 1rem;
margin-bottom: 1.25rem;
}
.route-card__text {
color: #f5efe4;
font-size: .95rem;
line-height: 1.55;
margin: 0 0 1.5rem;
flex: 1;
}
.route-card__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.08);
}
.route-card__duration {
font-size: .85rem;
color: #a89a80;
}
.route-card__price {
font-family: var(--font-b);
font-weight: 700;
color: var(--gold);
font-size: 1rem;
}
.route-card__cta {
width: 100%;
justify-content: center;
}
/* Events grid */
.events-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
.event-item {
display: flex;
gap: 1rem;
/* отступ и радиус как у всех карточек сайта: 32/24 и токен --r-md.
Было: 1.5rem (24px по кругу) и радиус 8px — значение, которого нет
в наборе токенов --r-xs/--r-md/--r-lg/--r-pill, то есть случайность */
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
}
.event-item__icon {
font-size: 2rem;
flex-shrink: 0;
}
.event-item__body h4 {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.05rem;
color: var(--cream);
margin: 0 0 .35rem;
}
.event-item__body p {
color: #a89a80;
font-size: .88rem;
line-height: 1.55;
margin: 0;
}
.events-note {
margin-top: 2rem;
text-align: center;
color: #a89a80;
font-size: .95rem;
}
/* AI card */
.tours-ai { background: linear-gradient(180deg, var(--black) 0%, rgba(206, 178, 130, .12) 100%); }
.ai-card {
max-width: 720px;
margin: 0 auto;
padding: 48px 32px;
background: rgba(206, 178, 130, .12);
border: 1px solid var(--gold);
border-radius: var(--r-lg);
text-align: center;
}
@media (min-width: 768px) { .ai-card { padding: 48px 32px; } }
.ai-card__intro {
font-size: .92rem;
color: var(--gold);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.ai-card__title {
font-family: var(--font-h);
font-weight: 600;
font-size: clamp(1.6rem, 3.8vw, 2.4rem);
color: var(--cream);
margin: 0 0 1.25rem;
letter-spacing: -.015em;
line-height: 1.2;
}
.ai-card__text {
color: #f5efe4;
font-size: 1rem;
line-height: 1.6;
margin: 0 0 2rem;
}
/* Corporate cards */
.corp-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) { .corp-grid { grid-template-columns: repeat(2, 1fr); } }
.corp-card {
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
}
.corp-card__icon { font-size: 1.8rem; margin-bottom: .8rem; }
.corp-card h3 {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.2rem;
color: var(--cream);
margin-bottom: .6rem;
}
.corp-card p {
color: #a89a80;
font-size: .9rem;
line-height: 1.55;
margin: 0;
}
/* ==================== ALULA PAGE ==================== */
.alula-intro-text {
color: #f5efe4;
font-size: 1rem;
line-height: 1.7;
margin: 1.25rem auto 0;
max-width: 780px;
text-align: center;
}
/* Highlights grid */
.highlights-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 640px) { .highlights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .highlights-grid { grid-template-columns: repeat(3, 1fr); } }
.highlight-card {
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
transition: all .25s;
}
.highlight-card:hover {
background: rgba(206, 178, 130, .12);
border-color: var(--gold);
transform: translateY(-3px);
}
.highlight-card__icon {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.highlight-card h3 {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.2rem;
color: var(--cream);
margin-bottom: .7rem;
letter-spacing: -.005em;
}
.highlight-card p {
color: #a89a80;
font-size: .92rem;
line-height: 1.55;
margin: 0;
}
/* Programs grid */
.programs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) { .programs-grid { grid-template-columns: repeat(3, 1fr); } }
.program-card {
padding: 32px 24px;
background: rgba(206, 178, 130, .12);
border: 1px solid rgba(206,178,130,.25);
border-radius: var(--r-md);
text-align: center;
transition: all .25s;
}
.program-card:hover {
background: rgba(206, 178, 130, .12);
transform: translateY(-3px);
}
.program-card__days {
font-family: var(--font-b);
font-weight: 700;
font-size: 2rem;
color: var(--gold);
letter-spacing: -.02em;
margin-bottom: .5rem;
}
.program-card h3 {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.15rem;
color: var(--cream);
margin: 0 0 1rem;
}
.program-card p {
color: #a89a80;
font-size: .92rem;
line-height: 1.55;
margin: 0;
}
/* ==================== ABOUT PAGE ==================== */
.trust-list {
display: flex;
flex-direction: column;
gap: .5rem;
margin-top: 2rem;
}
.trust-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 16px 20px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: var(--r-md);
flex-wrap: wrap;
gap: .5rem;
}
.trust-row__label {
color: #a89a80;
font-size: .9rem;
letter-spacing: .02em;
}
.trust-row__value {
color: var(--cream);
font-family: var(--font-b);
font-weight: 500;
font-size: .95rem;
text-align: right;
}
/* ==================== CONTACT PAGE ==================== */
.channels-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) { .channels-grid { grid-template-columns: repeat(3, 1fr); } }
.channel-card {
display: block;
padding: 32px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r-md);
text-decoration: none;
transition: all .25s;
}
.channel-card:hover {
background: rgba(206, 178, 130, .12);
border-color: var(--gold);
transform: translateY(-3px);
}
.channel-card__icon {
font-size: 2.4rem;
margin-bottom: 1rem;
}
.channel-card__name {
font-family: var(--font-b);
font-weight: 600;
font-size: 1.2rem;
color: var(--cream);
margin-bottom: .4rem;
}
.channel-card__value {
font-family: var(--font-b);
font-weight: 700;
color: var(--gold);
font-size: 1.05rem;
letter-spacing: -.005em;
margin-bottom: .85rem;
}
.channel-card__note {
color: #a89a80;
font-size: .88rem;
line-height: 1.5;
margin: 0 0 1.25rem;
}
.channel-card__cta {
font-size: .8rem;
color: var(--gold);
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 600;
}
/* ==================== ПОЛОСА ОСНОВАТЕЛЯ ====================
Живой человек у точки конверсии: реальное фото + его слова + прямой WhatsApp.
«Тихий люкс»: матовая подложка, золотой волосок, фото-аватар с фокусом на лице. */
.founder-strip-block { padding-top: 0; }
.founder-strip {
display: flex;
align-items: center;
gap: clamp(1.1rem, 3vw, 2rem);
max-width: 660px;
margin: 0 auto;
padding: 48px 32px;
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-lg);
background: rgba(255, 255, 255, .035);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 18px 50px rgba(0, 0, 0, .30);
}
.founder-strip__photo {
flex: 0 0 auto;
width: clamp(118px, 22vw, 150px);
height: clamp(118px, 22vw, 150px);
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(206, 178, 130, .50);
box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.founder-strip__photo picture {
display: block;
width: 100%;
height: 100%;
}
.founder-strip__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transform: scale(1.5);
transform-origin: center 30%;
}
.founder-strip__body { min-width: 0; }
.founder-strip__line {
margin: 0 0 .85rem;
font-style: italic;
color: var(--cream);
opacity: .93;
line-height: 1.55;
font-size: clamp(15px, 1.8vw, 18px);
}
.founder-strip__sign {
margin: 0 0 1rem;
font-family: var(--font-h);
letter-spacing: .04em;
color: var(--gold);
font-size: .92rem;
}
.founder-strip__cta {
display: inline-flex;
align-items: center;
gap: .4rem;
/* Второстепенная кнопка (обводка) — та же система, что и главная:
Inter, 14px, ПРОПИСНЫЕ, разрядка .12em, высота 50, отступ 14px 26px.
Было: Philosopher .85rem строчными — читалось как ссылка, а не кнопка.
Рамка переведена на токен --line-3 (тот же цвет, что был вписан руками). */
justify-content: center;
min-height: 50px;
font-family: var(--font-b);
font-size: 14px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--line-3);
border-radius: var(--r-pill);
padding: 14px 26px;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.founder-strip__cta:hover {
background: var(--gold);
color: #1a1410;
border-color: var(--gold);
}
@media (max-width: 600px) {
.founder-strip { flex-direction: column; text-align: center; }
.founder-strip__cta { justify-content: center; }
}
/* ==================== FAQ PAGE ==================== */
.faq-category { margin-bottom: 3rem; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category__title {
font-family: var(--font-h);
font-weight: 600;
font-size: 1.35rem;
color: var(--cream);
margin-bottom: 1.25rem;
padding-bottom: .75rem;
border-bottom: 1px solid rgba(206,178,130,.25);
display: flex;
align-items: center;
gap: .6rem;
}
.faq-category__icon { font-size: 1.4rem; }
/* ==================== POST-EMOJI CLEANUP: typographic accents ==================== */
/* Скрываем пустые icon-span'ы где icon = "" */
.intent-card__icon:empty,
.segment-card__icon:empty,
.event-item__icon:empty,
.corp-card__icon:empty,
.highlight-card__icon:empty,
.channel-card__icon:empty,
.tour-cat__icon:empty {
display: none;
}
/* Acuminated typography for cards instead of icons */
.intent-card h3,
.corp-card h3,
.highlight-card h3 {
position: relative;
padding-top: .25rem;
}
.intent-card h3::before,
.corp-card h3::before,
.highlight-card h3::before {
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--gold);
margin-bottom: 1rem;
opacity: .7;
}
/* Event-item — без иконки, чуть другая раскладка */
.event-item {
display: block;
}
.event-item__body h4::before {
content: '';
display: inline-block;
width: 18px;
height: 1px;
background: var(--gold);
vertical-align: middle;
margin-right: .6rem;
opacity: .7;
}
/* Channel card — без иконки, акцент на ценности */
.channel-card__icon:empty + .channel-card__name,
.channel-card .channel-card__name:first-child {
margin-top: 0;
}
/* ====================================================================
БРЕНДБУК: «Центр притяжения» — фирменный декор-элемент (стр. 24)
==================================================================== */
/* Композиция «Центр притяжения» (брендбук стр. 24) — на весь hero, 16:9 */
.vsec--hero > .brand-orbit,
.vsec--detail > .brand-orbit,
.vsec--umra-hero > .brand-orbit {
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
opacity: 0;
animation: orbitFadeIn 2.4s ease 0.4s forwards;
}
@keyframes orbitFadeIn {
to { opacity: 1; }
}
/* Кольца дышат вокруг центра — масштаб через transform */
.brand-orbit__rings {
transform-origin: 800px 450px;
animation: ringsBreathe 9s ease-in-out 2s infinite;
}
@keyframes ringsBreathe {
0%, 100% { transform: scale(1); opacity: .8; }
50% { transform: scale(1.03); opacity: .95; }
}
/* Золотая точка-Мекка — мягкий пульс свечения */
.brand-orbit__halo {
transform-origin: 800px 450px;
animation: haloPulse 3.5s ease-in-out infinite;
}
@keyframes haloPulse {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
.vsec--hero > .brand-orbit,
.vsec--detail > .brand-orbit,
.vsec--umra-hero > .brand-orbit { animation: orbitFadeIn 1s ease forwards; }
.brand-orbit__halo { animation: none; opacity: .8; }
}
/* Затемнение/виньетку на главном hero убрали по просьбе клиента — видео в полную яркость.
Оставлен только короткий гас в самый низ ради бесшовного стыка со следующей секцией.
(Фолбэк для браузеров без :has — основной градиент ниже в правиле :has(+ .vsec--heart).) */
.vsec--hero .vsec__overlay {
background: linear-gradient(180deg,
rgba(40,40,40,0) 0%, rgba(40,40,40,0) 76%,
rgba(40,40,40,.55) 88%, rgba(40,40,40,1) 100%);
}
/* ЦЕНТР · ПРИТЯЖЕНИЯ — только на широких экранах (брендбук рассчитан на 16:9) */
@media (max-aspect-ratio: 13/10) {
.brand-orbit__side { display: none; }
}
@media (max-width: 720px) {
.brand-orbit__corner { display: none; }
}
@media (max-width: 720px) {
.brand-orbit { width: 130vmin; height: 130vmin; }
}
/* Координаты в углах hero — как на сертификатах брендбука */
.vsec--hero > .hero__meta,
.vsec--detail > .hero__meta,
.vsec--umra-hero > .hero__meta {
position: absolute !important;
z-index: 3;
display: flex;
flex-direction: column;
gap: .25rem;
font-family: var(--font-b);
font-weight: 500;
pointer-events: none;
/* Локальная тёмная «пилюля» под подписью: на светлых кадрах видео золото
раньше сливалось с фоном (1.07–3.96). Плашка даёт 5.3–6.3 и при этом не
затемняет сам ролик. */
background: rgba(26, 20, 16, .85);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
padding: 8px 12px;
border-radius: var(--r-xs);
}
.hero__meta-coord {
font-family: var(--font-b);
font-feature-settings: "tnum" 1, "lnum" 1;
font-size: 12px;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
opacity: .92;
white-space: nowrap;
text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.5);
}
.hero__meta-loc {
font-family: var(--font-h);
font-style: italic;
font-size: 13px;
font-weight: 400;
letter-spacing: .015em;
color: var(--gold);
white-space: nowrap;
text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.hero__meta--tl { top: 5.4rem; left: 1.2rem; align-items: flex-start; text-align: left; }
.hero__meta--tr { top: 5.4rem; right: 1.2rem; align-items: flex-end; text-align: right; }
@media (min-width: 720px) {
/* было наоборот: на большом экране подпись становилась МЕЛЬЧЕ (13,4px → 9,1px) */
.hero__meta-coord { font-size: 12px; }
.hero__meta-loc { font-size: 13px; }
.hero__meta--tl { top: 6.5rem; left: 2.2rem; }
.hero__meta--tr { top: 6.5rem; right: 2.2rem; }
}
@media (max-width: 480px) {
.hero__meta--tr { display: none; }
/* было 8,3px и 7,4px — физически нечитаемо */
.hero__meta-coord { font-size: 12px; letter-spacing: .16em; }
.hero__meta-loc { font-size: 12px; }
.vsec--hero > .hero__meta,
.vsec--detail > .hero__meta,
.vsec--umra-hero > .hero__meta { padding: 6px 10px; }
}
/* ============================================================
HERO — eyebrow слоган над H1, social-proof под H1
============================================================ */
/* НЕ ИСПОЛЬЗУЕТСЯ на 2026-07-27 — класса нет ни на одной из 100 страниц */
/* Eyebrow — элегантная курсивная подпись над H1 (Philosopher italic) */
.hero__eyebrow {
display: block;
margin: 0 auto 1.4rem;
font-family: var(--font-h);
font-style: italic;
font-size: .92rem;
letter-spacing: .04em;
color: var(--gold);
opacity: 0;
animation: eyebrowFadeIn 1.4s ease 0.3s forwards;
text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
@keyframes eyebrowFadeIn { to { opacity: .82; } }
@media (min-width: 720px) {
.hero__eyebrow {
font-size: 1.05rem;
margin-bottom: 1.8rem;
}
}
/* Scroll-hint — тонкая золотая линия + подпись внизу hero */
.hero__scroll-hint {
position: absolute;
bottom: 7.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: .65rem;
font-family: var(--font-b);
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: var(--gold);
opacity: 0;
animation: scrollHintIn 1.4s ease 2s forwards;
pointer-events: none;
}
.hero__scroll-line {
width: 1px;
height: 42px;
background: linear-gradient(to bottom, var(--gold), transparent);
position: relative;
overflow: hidden;
}
.hero__scroll-line::after {
content: '';
position: absolute;
top: -40%;
left: 0;
width: 100%;
height: 30%;
background: linear-gradient(to bottom, transparent, var(--cream), transparent);
animation: scrollLineDrop 2.2s ease-in-out infinite;
}
@keyframes scrollHintIn { to { opacity: .65; } }
@keyframes scrollLineDrop {
0% { transform: translateY(0); }
100% { transform: translateY(180%); }
}
@media (max-width: 720px) {
.hero__scroll-hint { display: none; }
}
/* Слоган в подвале side-menu */
.panel-slogan {
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(206, 178, 130, .12);
display: flex;
flex-direction: column;
gap: .55rem;
}
.panel-slogan__line {
font-family: var(--font-h);
font-size: 1.05rem;
color: var(--gold);
letter-spacing: .04em;
font-style: italic;
}
.panel-slogan__coords {
font-family: var(--font-b);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(206, 178, 130, .78);
}
/* ====================================================================
SUBTLE BG-DECOR — единственная система фоновых деталей
Очень тонко (opacity ≤ .08). Каждая страница свой акцент.
==================================================================== */
/* Базовый radial gold-glow в углу — для всех body-страниц */
body[class*="page-"]:not(.page-home) .detail-content::before,
body[class*="page-"]:not(.page-home) .umra-block:first-of-type::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top right,
rgba(206, 178, 130, .04) 0%,
transparent 55%);
pointer-events: none;
z-index: 0;
}
/* Body sections — relative positioning + content above decor */
.umra-block, .detail-content { position: relative; }
.umra-block > *, .detail-content > * { position: relative; z-index: 1; }
/* Per-page bg-watermark — низкий opacity, в углу, незаметно */
body.page-home { background-image: radial-gradient(ellipse at bottom left, rgba(206,178,130,.025), transparent 40%); background-attachment: fixed; }
body.page-about { background-image: radial-gradient(ellipse at top right, rgba(206,178,130,.025), transparent 40%); background-attachment: fixed; }
body.page-umrah { background-image: radial-gradient(ellipse at top left, rgba(206,178,130,.025), transparent 40%); background-attachment: fixed; }
body.page-alula { background-image: radial-gradient(ellipse at bottom right, rgba(206,178,130,.025), transparent 40%); background-attachment: fixed; }
body.page-certificate { background-image: radial-gradient(ellipse at top, rgba(206,178,130,.025), transparent 35%); background-attachment: fixed; }
body.page-packages { background-image: radial-gradient(ellipse at bottom, rgba(206,178,130,.025), transparent 35%); background-attachment: fixed; }
body.page-contact { background-image: radial-gradient(ellipse at center, rgba(206,178,130,.025), transparent 50%); background-attachment: fixed; }
body.page-faq { background-image: radial-gradient(ellipse at top right, rgba(206,178,130,.025), transparent 45%); background-attachment: fixed; }
body.page-legal { background-image: radial-gradient(ellipse at top right, rgba(206,178,130,.04), transparent 50%); background-attachment: fixed; }
/* На телефоне background-attachment: fixed заставляет браузер перерисовывать
фон на каждом кадре прокрутки → заметные рывки (jank). Эти фоны почти
прозрачны (opacity ~.025), поэтому на узких экранах отключаем fixed —
прокрутка становится плавной, а на вид ничего не меняется. */
@media (max-width: 767px) {
body.page-home, body.page-about, body.page-umrah, body.page-alula,
body.page-certificate, body.page-packages, body.page-contact,
body.page-faq, body.page-legal { background-attachment: scroll; }
}
/* Заголовок юр-страниц: длинное «конфиденциальности» при 40px не влезало в узкий
экран и уродливо ломалось. Опускаем нижнюю границу размера — слово помещается
на своей строке; на десктопе остаётся прежний потолок 5rem. !important нужен,
чтобы перебить инлайн-стиль в HTML. */
body.page-legal .vsec__title-block .section-link {
font-size: clamp(1.7rem, 7vw, 5rem) !important;
max-width: 100%;
overflow-wrap: anywhere;
}
/* Микро-акцент: золотая точка перед key-числами в stats (остаётся) */
.umra-stat__num::before,
.stat-card__num::before {
content: '';
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--gold);
vertical-align: super;
margin-right: .25em;
opacity: .6;
}
/* ====================================================================
PREMIUM HOVER-АНИМАЦИИ (только на устройствах с hover/cursor)
Тонкие премиум-эффекты на десктопе. На touch-устройствах НЕ применяются.
==================================================================== */
@media (hover: hover) and (pointer: fine) {
/* === КАРТОЧКИ — lift + gold-border-glow === */
.intent-card,
.value-card,
.route-card,
.pack-card,
.corp-card,
.tariff-card,
.nominal-card,
.step-card,
.stat-card,
.highlight-card,
.program-card,
.channel-card,
.ai-card,
.first-umra-wrap,
.segment-item {
transition: transform .4s cubic-bezier(.2,.7,.2,1),
box-shadow .4s ease,
border-color .35s ease,
background-color .35s ease !important;
will-change: transform;
}
.intent-card:hover,
.value-card:hover,
.route-card:hover,
.pack-card:hover,
.corp-card:hover,
.tariff-card:hover,
.nominal-card:hover,
.step-card:hover,
.stat-card:hover,
.highlight-card:hover,
.program-card:hover,
.channel-card:hover,
.first-umra-wrap:hover,
.segment-item:hover {
transform: translateY(-6px);
border-color: rgba(206, 178, 130, .50) !important;
box-shadow:
0 24px 60px rgba(0, 0, 0, .35),
0 0 0 1px rgba(206, 178, 130, .25),
0 0 32px -8px rgba(206, 178, 130, .25);
}
/* === Stat-числа: gold scale + glow === */
.umra-stat,
.stats-grid > * {
transition: transform .35s ease;
}
.umra-stat:hover .umra-stat__num,
.stat-card:hover .stat-card__num {
transform: scale(1.08);
text-shadow: 0 0 24px rgba(206,178,130,.45);
}
.umra-stat__num,
.stat-card__num {
display: inline-block;
transition: transform .4s cubic-bezier(.2,.7,.2,1), text-shadow .4s ease;
}
/* === Логотип в навбаре — медленное вращение === */
.nav__logo {
transition: background .3s ease, border-color .3s ease, transform .6s ease;
}
.nav__logo:hover {
transform: rotate(15deg);
}
.nav__logo-icon { transition: filter .4s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.nav__logo:hover .nav__logo-icon { transform: rotate(-15deg); }
/* === Меню-кнопка: иконка-гамбургер слегка увеличивается === */
.nav__menu-btn:hover .nav__menu-rings { transform: scale(1.12); }
/* === Ссылки в body — gold underline draw left→right === */
/* Эффект «дорисовки» линии оставлен только для художественных блоков.
В юридических текстах ссылка должна быть подчёркнута ВСЕГДА, а не только
под мышкой — иначе её отличает один цвет. */
.alula-intro-text a,
.umra-block p a {
position: relative;
text-decoration: none;
color: var(--gold);
background-image: linear-gradient(currentColor, currentColor);
background-size: 0 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .4s cubic-bezier(.2,.7,.2,1);
padding-bottom: 2px;
}
.alula-intro-text a:hover,
.umra-block p a:hover {
background-size: 100% 1px;
}
/* === Фото в Story-блоках — мягкий zoom внутри рамки === */
.first-umra__img {
overflow: hidden;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
background-size: 100% 100%;
}
.first-umra-wrap:hover .first-umra__img {
background-size: 108% 108%;
background-position: center;
}
/* === Section-link на главной — gold tone shift + scale === */
.section-link {
transition: color .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), text-shadow .4s ease;
}
.section-link:hover {
color: var(--gold);
transform: scale(1.02);
text-shadow: 0 0 32px rgba(206,178,130,.35), 0 6px 40px rgba(0,0,0,.75);
}
/* === Промо плашка — gentle pulse === */
@keyframes promoBreathe {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
.promo.promo--in:hover {
animation: promoBreathe 1.8s ease-in-out infinite;
}
/* === Бренд-декор в углу блока: при наведении на блок — становится ярче === */
.umra-block { transition: background-color .4s ease; }
.umra-block::after {
transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.umra-block:hover::after {
opacity: .85;
transform: scale(1.08);
}
.umra-block:nth-of-type(even):hover::after {
transform: scaleX(-1) scale(1.08);
}
/* === Hint в hero детальных — мягкое перелив на hover hero === */
.vsec--detail:hover .umra-hero__hint,
.vsec--umra-hero:hover .umra-hero__hint {
opacity: .95;
letter-spacing: .025em;
}
.umra-hero__hint {
transition: opacity .5s ease, letter-spacing .5s ease;
}
/* === Form input — gold-border focus glow ===
Было написано под класс .umra-form, которого нет ни на одной странице
(в разметке — .umra-form-block). Правило не работало ни разу; теперь
золотая подсветка полей включается на 52 формах. */
.umra-form-block input,
.umra-form-block textarea,
.umra-form-block select {
transition: border-color .3s ease, box-shadow .3s ease;
}
.umra-form-block input:focus,
.umra-form-block textarea:focus,
.umra-form-block select:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(206,178,130,.18), 0 0 24px -4px rgba(206,178,130,.35);
outline: none;
}
/* === Chat fab — gentle pulse при простоe (когда пользователь не двигает мышь) === */
@keyframes chatPulse {
0%, 100% { box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 0 rgba(206,178,130,.35); }
50% { box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 8px rgba(206,178,130,0); }
}
.bottom-bar__chat {
animation: chatPulse 3s ease-in-out infinite;
}
.bottom-bar__chat:hover {
animation: none;
transform: scale(1.08);
}
/* === Cursor-trailing glow для CTA pill === */
.bottom-bar__cta {
position: relative;
overflow: hidden;
}
.bottom-bar__cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
rgba(255,255,255,.35) 0%, transparent 40%);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.bottom-bar__cta:hover::before { opacity: 1; }
/* === FAQ details: smooth slide + accent при открытии === */
.faq-item {
transition: background .3s ease, border-color .3s ease;
}
.faq-item:hover {
background: rgba(206, 178, 130, .12);
border-color: rgba(206,178,130,.25);
}
.faq-item[open] {
border-color: rgba(206, 178, 130, .50);
background: rgba(206, 178, 130, .12);
}
.faq-item summary { transition: color .3s ease; cursor: pointer; }
.faq-item summary:hover { color: var(--gold); }
/* === Tabs (если есть) === */
.tab {
position: relative;
transition: color .3s ease;
}
.tab::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.tab:hover::after,
.tab.active::after { display: none; }
.tab:hover { color: var(--gold); }
}
/* === JS для cursor-trail glow на CTA === */
/* ====================================================================
ПАЛЬМА-ДЕКОР (брендовый gold #ceb282) — в углах разных блоков
Где-то с буквой G (тиснение), где-то только пальмовая крона
Opacity ≤ .12 — текст всегда читаемый
==================================================================== */
.umra-block { position: relative; overflow: hidden; }
.umra-block > * { position: relative; z-index: 1; }
/* REAL пальмы 1:1 из брендбука стр.80 (gold нативный, без CSS filter) */
:root {
--palm-full: url("/assets/decor/palm-full-real.png");
--palm-crown: url("/assets/decor/palm-crown-real.png");
}
/* === ЕДИНЫЙ БРЕНДБУК-ДЕКОР для всех страниц ===========================
2 чистых тайла из брендбука стр.80 "Фоны для сторис":
--bb-gpalm — G-палма (вертикальная)
--bb-circles — концентрические круги
Без чёрточек / пунктира / случайных штрихов (отфильтрованы при extract).
Применяется на .umra-block во всех page-классах + .faq-category. */
:root {
--bb-gpalm: url("/assets/decor/bb-stories-gpalm.png");
--bb-circles: url("/assets/decor/bb-stories-circles.png");
}
/* Универсальные шаблоны декора (применяются ниже через nth-of-type) */
.umra-block, .faq-category { position: relative; overflow: hidden; }
.umra-block > *, .faq-category > * { position: relative; z-index: 1; }
/* --- ROTATION: чередуем по nth-of-type, чтобы соседние блоки не повторялись --- */
/* нечётные блоки (1,3,5,7) — G-палма с разной стороны */
body.page-umrah .umra-block:nth-of-type(2)::after,
body.page-about .umra-block:nth-of-type(2)::after,
body.page-alula .umra-block:nth-of-type(2)::after,
body.page-certificate .umra-block:nth-of-type(2)::after,
body.page-packages .umra-block:nth-of-type(2)::after,
body.page-contact .umra-block:nth-of-type(2)::after,
body.page-faq .umra-block:nth-of-type(2)::after {
content: '';
position: absolute;
top: -40px; right: -100px;
width: 280px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-circles);
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
opacity: .22;
pointer-events: none;
z-index: 0;
}
body.page-umrah .umra-block:nth-of-type(3)::after,
body.page-about .umra-block:nth-of-type(3)::after,
body.page-alula .umra-block:nth-of-type(3)::after,
body.page-certificate .umra-block:nth-of-type(3)::after,
body.page-packages .umra-block:nth-of-type(3)::after,
body.page-contact .umra-block:nth-of-type(3)::after,
body.page-faq .umra-block:nth-of-type(3)::after {
content: '';
position: absolute;
top: -20px; left: -110px;
width: 260px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-gpalm);
background-size: contain;
background-repeat: no-repeat;
background-position: top left;
opacity: .18;
transform: scaleX(-1);
pointer-events: none;
z-index: 0;
}
body.page-umrah .umra-block:nth-of-type(4)::after,
body.page-about .umra-block:nth-of-type(4)::after,
body.page-alula .umra-block:nth-of-type(4)::after,
body.page-certificate .umra-block:nth-of-type(4)::after,
body.page-packages .umra-block:nth-of-type(4)::after,
body.page-contact .umra-block:nth-of-type(4)::after,
body.page-faq .umra-block:nth-of-type(4)::after {
content: '';
position: absolute;
bottom: -80px; right: -90px;
width: 300px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-circles);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
opacity: .2;
pointer-events: none;
z-index: 0;
}
body.page-umrah .umra-block:nth-of-type(5)::after,
body.page-about .umra-block:nth-of-type(5)::after,
body.page-alula .umra-block:nth-of-type(5)::after,
body.page-certificate .umra-block:nth-of-type(5)::after,
body.page-packages .umra-block:nth-of-type(5)::after,
body.page-contact .umra-block:nth-of-type(5)::after,
body.page-faq .umra-block:nth-of-type(5)::after {
content: '';
position: absolute;
top: -30px; right: -110px;
width: 280px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-gpalm);
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
opacity: .18;
pointer-events: none;
z-index: 0;
}
body.page-umrah .umra-block:nth-of-type(6)::after,
body.page-about .umra-block:nth-of-type(6)::after,
body.page-alula .umra-block:nth-of-type(6)::after,
body.page-certificate .umra-block:nth-of-type(6)::after,
body.page-packages .umra-block:nth-of-type(6)::after,
body.page-contact .umra-block:nth-of-type(6)::after,
body.page-faq .umra-block:nth-of-type(6)::after {
content: '';
position: absolute;
top: -40px; left: -100px;
width: 300px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-circles);
background-size: contain;
background-repeat: no-repeat;
background-position: top left;
opacity: .22;
transform: scaleX(-1);
pointer-events: none;
z-index: 0;
}
body.page-umrah .umra-block:nth-of-type(7)::after,
body.page-about .umra-block:nth-of-type(7)::after,
body.page-alula .umra-block:nth-of-type(7)::after,
body.page-certificate .umra-block:nth-of-type(7)::after,
body.page-packages .umra-block:nth-of-type(7)::after,
body.page-contact .umra-block:nth-of-type(7)::after,
body.page-faq .umra-block:nth-of-type(7)::after {
content: '';
position: absolute;
top: -20px; right: -120px;
width: 260px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-gpalm);
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
opacity: .16;
pointer-events: none;
z-index: 0;
}
body.page-umrah .umra-block:nth-of-type(8)::after,
body.page-about .umra-block:nth-of-type(8)::after,
body.page-alula .umra-block:nth-of-type(8)::after,
body.page-certificate .umra-block:nth-of-type(8)::after,
body.page-packages .umra-block:nth-of-type(8)::after,
body.page-contact .umra-block:nth-of-type(8)::after,
body.page-faq .umra-block:nth-of-type(8)::after {
content: '';
position: absolute;
bottom: -60px; left: -80px;
width: 240px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-circles);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom left;
opacity: .2;
pointer-events: none;
z-index: 0;
}
/* === Старые per-page custom-SVG декоры (минарет, кибла-компас, пальмы)
удалены — заменены универсальной системой brandbook-тайлов выше.
FAQ-category декоры — также через бренд-тайлы. */
body.page-faq .faq-category:nth-of-type(odd)::after {
content: '';
position: absolute;
top: -30px; right: -90px;
width: 220px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-circles);
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
opacity: .18;
pointer-events: none;
z-index: 0;
}
body.page-faq .faq-category:nth-of-type(even)::after {
content: '';
position: absolute;
bottom: -40px; left: -80px;
width: 200px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-gpalm);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom left;
opacity: .14;
transform: scaleX(-1);
pointer-events: none;
z-index: 0;
}
/* ====================================================================
HOVER-GLOW для названий мест и координат
==================================================================== */
.place-name {
display: inline-block;
position: relative;
color: inherit;
cursor: default;
transition: color .35s ease, text-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) {
.place-name:hover {
color: var(--gold);
text-shadow: 0 0 14px rgba(206,178,130,.55), 0 0 28px rgba(206,178,130,.25);
}
}
/* === КРОСС-ДЕВАЙС ПОЛИРОВКА ДЛЯ BRANDBOOK-ДЕКОРА ============
Чёткость текста > видимости фона на мобильных и планшетах.
iPhone (≤640px) — декор меньше и прозрачнее.
iPad portrait (641-900px) — средний размер.
MacBook + iPad landscape (>900px) — полный размер.
============================================================ */
/* iPhone — декор внутри блока (без отрицательных оффсетов!), пальмы видны целиком */
@media (max-width: 640px) {
/* Сбрасываем все right/left отрицательные позиции — вписываем декор внутрь */
body.page-umrah .umra-block::after,
body.page-about .umra-block::after,
body.page-alula .umra-block::after,
body.page-certificate .umra-block::after,
body.page-packages .umra-block::after,
body.page-contact .umra-block::after,
body.page-faq .umra-block::after,
body.page-faq .faq-category::after {
width: 150px !important;
opacity: .16 !important;
left: auto !important;
right: 12px !important;
top: 14px !important;
bottom: auto !important;
background-position: top right !important;
}
/* Чётные nth-of-type — слева, чтобы было разнообразие */
body.page-umrah .umra-block:nth-of-type(2)::after,
body.page-umrah .umra-block:nth-of-type(4)::after,
body.page-umrah .umra-block:nth-of-type(6)::after,
body.page-umrah .umra-block:nth-of-type(8)::after,
body.page-about .umra-block:nth-of-type(2)::after,
body.page-about .umra-block:nth-of-type(4)::after,
body.page-about .umra-block:nth-of-type(6)::after,
body.page-about .umra-block:nth-of-type(8)::after,
body.page-alula .umra-block:nth-of-type(2)::after,
body.page-alula .umra-block:nth-of-type(4)::after,
body.page-alula .umra-block:nth-of-type(6)::after,
body.page-alula .umra-block:nth-of-type(8)::after,
body.page-certificate .umra-block:nth-of-type(2)::after,
body.page-certificate .umra-block:nth-of-type(4)::after,
body.page-certificate .umra-block:nth-of-type(6)::after,
body.page-certificate .umra-block:nth-of-type(8)::after,
body.page-packages .umra-block:nth-of-type(2)::after,
body.page-packages .umra-block:nth-of-type(4)::after,
body.page-packages .umra-block:nth-of-type(6)::after,
body.page-packages .umra-block:nth-of-type(8)::after,
body.page-contact .umra-block:nth-of-type(2)::after,
body.page-contact .umra-block:nth-of-type(4)::after,
body.page-contact .umra-block:nth-of-type(6)::after,
body.page-contact .umra-block:nth-of-type(8)::after,
body.page-faq .umra-block:nth-of-type(2)::after,
body.page-faq .umra-block:nth-of-type(4)::after,
body.page-faq .umra-block:nth-of-type(6)::after,
body.page-faq .umra-block:nth-of-type(8)::after,
body.page-faq .faq-category:nth-of-type(even)::after {
right: auto !important;
left: 12px !important;
background-position: top left !important;
transform: translateZ(0) !important; /* убираем mirror на mobile, картинка целая */
}
}
/* iPad portrait + small tablets — декор тоже внутри блока */
@media (min-width: 641px) and (max-width: 900px) {
body.page-umrah .umra-block::after,
body.page-about .umra-block::after,
body.page-alula .umra-block::after,
body.page-certificate .umra-block::after,
body.page-packages .umra-block::after,
body.page-contact .umra-block::after,
body.page-faq .umra-block::after,
body.page-faq .faq-category::after {
width: 200px !important;
opacity: .17 !important;
right: 16px !important;
left: auto !important;
top: 20px !important;
bottom: auto !important;
background-position: top right !important;
}
body.page-umrah .umra-block:nth-of-type(2)::after,
body.page-umrah .umra-block:nth-of-type(4)::after,
body.page-umrah .umra-block:nth-of-type(6)::after,
body.page-umrah .umra-block:nth-of-type(8)::after,
body.page-about .umra-block:nth-of-type(2)::after,
body.page-about .umra-block:nth-of-type(4)::after,
body.page-about .umra-block:nth-of-type(6)::after,
body.page-about .umra-block:nth-of-type(8)::after,
body.page-alula .umra-block:nth-of-type(2)::after,
body.page-alula .umra-block:nth-of-type(4)::after,
body.page-alula .umra-block:nth-of-type(6)::after,
body.page-alula .umra-block:nth-of-type(8)::after,
body.page-certificate .umra-block:nth-of-type(2)::after,
body.page-certificate .umra-block:nth-of-type(4)::after,
body.page-certificate .umra-block:nth-of-type(6)::after,
body.page-certificate .umra-block:nth-of-type(8)::after,
body.page-packages .umra-block:nth-of-type(2)::after,
body.page-packages .umra-block:nth-of-type(4)::after,
body.page-packages .umra-block:nth-of-type(6)::after,
body.page-packages .umra-block:nth-of-type(8)::after,
body.page-contact .umra-block:nth-of-type(2)::after,
body.page-contact .umra-block:nth-of-type(4)::after,
body.page-contact .umra-block:nth-of-type(6)::after,
body.page-contact .umra-block:nth-of-type(8)::after,
body.page-faq .umra-block:nth-of-type(2)::after,
body.page-faq .umra-block:nth-of-type(4)::after,
body.page-faq .umra-block:nth-of-type(6)::after,
body.page-faq .umra-block:nth-of-type(8)::after,
body.page-faq .faq-category:nth-of-type(even)::after {
right: auto !important;
left: 16px !important;
background-position: top left !important;
transform: translateZ(0) !important;
}
}
/* Retina sharpness: запретить интерполяцию-блёр у PNG-тайлов */
.umra-block::after,
.faq-category::after {
image-rendering: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
}
/* mirror-overrides (нужно сохранить scaleX(-1) для отзеркаленных) */
body.page-umrah .umra-block:nth-of-type(3)::after,
body.page-about .umra-block:nth-of-type(3)::after,
body.page-alula .umra-block:nth-of-type(3)::after,
body.page-certificate .umra-block:nth-of-type(3)::after,
body.page-packages .umra-block:nth-of-type(3)::after,
body.page-contact .umra-block:nth-of-type(3)::after,
body.page-faq .umra-block:nth-of-type(3)::after,
body.page-umrah .umra-block:nth-of-type(6)::after,
body.page-about .umra-block:nth-of-type(6)::after,
body.page-alula .umra-block:nth-of-type(6)::after,
body.page-certificate .umra-block:nth-of-type(6)::after,
body.page-packages .umra-block:nth-of-type(6)::after,
body.page-contact .umra-block:nth-of-type(6)::after,
body.page-faq .umra-block:nth-of-type(6)::after,
body.page-faq .faq-category:nth-of-type(even)::after {
transform: scaleX(-1) translateZ(0);
}
/* === DETAIL / DESTINATION pages — лёгкий brand-фон + один tile ============ */
body.page-detail,
body.page-destination {
background-image: radial-gradient(ellipse at top right, rgba(206,178,130,.025), transparent 45%);
background-attachment: fixed;
}
/* Одна G-палма у text-section, чтобы был фирменный акцент */
body.page-detail .vsec--detail,
body.page-destination .vsec--detail {
position: relative;
overflow: hidden;
}
body.page-detail .vsec--detail::after,
body.page-destination .vsec--detail::after {
content: '';
position: absolute;
top: -40px; right: -110px;
width: 280px; aspect-ratio: 1321 / 2851;
background-image: var(--bb-gpalm);
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
opacity: .14;
pointer-events: none;
z-index: 0;
transform: translateZ(0);
}
@media (max-width: 640px) {
body.page-detail .vsec--detail::after,
body.page-destination .vsec--detail::after {
width: 140px !important;
opacity: .14 !important;
top: 14px !important;
right: 14px !important;
background-position: top right !important;
}
}
@media (min-width: 641px) and (max-width: 900px) {
body.page-detail .vsec--detail::after,
body.page-destination .vsec--detail::after {
width: 200px !important;
opacity: .15 !important;
top: 20px !important;
right: 20px !important;
background-position: top right !important;
}
}
/* === MOTION: palm-grow + decor parallax ============================ */
/* Декор ::after изначально скрыт через clip-path (snap to top),
при появлении блока в viewport JS добавляет .decor-in → clip-path opens,
палма «вырастает» снизу-вверх. Lazy + cross-device. */
.umra-block::after,
.faq-category::after,
.vsec--detail::after {
clip-path: inset(100% 0 0 0);
transition: clip-path 1100ms cubic-bezier(.22,1,.36,1);
/* parallax-vars */
transform: translate3d(0, var(--decor-y, 0px), 0);
}
.umra-block.decor-in::after,
.faq-category.decor-in::after,
.vsec--detail.decor-in::after {
clip-path: inset(0);
}
/* Сохраняем mirror-overrides для отзеркаленных блоков (с translateY parallax) */
body.page-umrah .umra-block:nth-of-type(3)::after,
body.page-about .umra-block:nth-of-type(3)::after,
body.page-alula .umra-block:nth-of-type(3)::after,
body.page-certificate .umra-block:nth-of-type(3)::after,
body.page-packages .umra-block:nth-of-type(3)::after,
body.page-contact .umra-block:nth-of-type(3)::after,
body.page-faq .umra-block:nth-of-type(3)::after,
body.page-umrah .umra-block:nth-of-type(6)::after,
body.page-about .umra-block:nth-of-type(6)::after,
body.page-alula .umra-block:nth-of-type(6)::after,
body.page-certificate .umra-block:nth-of-type(6)::after,
body.page-packages .umra-block:nth-of-type(6)::after,
body.page-contact .umra-block:nth-of-type(6)::after,
body.page-faq .umra-block:nth-of-type(6)::after,
body.page-faq .faq-category:nth-of-type(even)::after {
transform: scaleX(-1) translate3d(0, var(--decor-y, 0px), 0);
}
/* Reduced-motion: показываем декор сразу, без clip-path / parallax */
@media (prefers-reduced-motion: reduce) {
.umra-block::after,
.faq-category::after,
.vsec--detail::after {
clip-path: none !important;
transition: none !important;
transform: none !important;
}
}
/* Mobile: оставляем clip-path reveal, но парallax выключен (JS не запускает) */
/* Magnetic CTA — лёгкое подсвечивание при магните */
.bottom-bar__cta {
will-change: transform;
}
/* === BLOG / JOURNAL ============================================== */
/* INDEX — список карточек */
body.page-blog .vsec--blog-index {
min-height: 40vh;
padding: 100px 24px 40px;
}
body.page-blog .vsec--blog-index h1 {
font-family: 'Philosopher', serif;
font-size: clamp(48px, 8vw, 96px);
font-weight: 400;
color: var(--cream, #f5efe4);
margin: 0 0 16px;
letter-spacing: -.02em;
}
.blog-list {
max-width: 880px;
margin: 0 auto;
padding: 0 24px 120px;
display: flex;
flex-direction: column;
gap: 24px;
}
.blog-card {
display: block;
padding: 32px 24px;
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-md);
background: rgba(40, 40, 40, .35);
color: inherit;
text-decoration: none;
transition: border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease;
}
.blog-card:hover {
border-color: rgba(206, 178, 130, .50);
background: rgba(40, 40, 40, .60);
transform: translateY(-3px);
}
.blog-card__meta {
display: flex; gap: 10px;
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--gold, #ceb282);
margin-bottom: 14px;
}
.blog-card__title {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(22px, 3.4vw, 32px);
line-height: 1.2;
margin: 0 0 12px;
color: var(--cream, #f5efe4);
}
.blog-card__lead {
color: rgba(245, 239, 228, .78);
font-size: 16px;
line-height: 1.55;
margin: 0 0 14px;
}
.blog-card__date {
font-size: 13px;
color: rgba(206, 178, 130, .78);
letter-spacing: .04em;
}
/* POST — single article */
body.page-blog .vsec--blog-post {
padding: 110px 24px 50px !important;
min-height: auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.page-blog .vsec--blog-body {
height: auto !important;
min-height: auto !important;
display: block !important;
padding: 0 !important;
overflow: visible !important;
align-items: initial !important;
}
body.page-blog .vsec--blog-index {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center;
height: auto !important;
min-height: 50vh !important;
}
body.page-blog .vsec--blog-index .vsec__title-block {
text-align: center;
}
.blog-post__meta-row {
display: flex; justify-content: space-between; align-items: center;
width: 100%;
max-width: 760px; margin: 0 auto 28px;
padding: 0 8px;
flex-direction: row;
box-sizing: border-box;
}
.blog-post__back {
color: var(--gold, #ceb282);
text-decoration: none;
font-size: 14px;
letter-spacing: .04em;
transition: opacity .25s;
}
.blog-post__back:hover { opacity: .75; }
.blog-post__category {
font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
color: var(--gold, #ceb282);
/* было 6px 12px. По вертикали уже совпадает, по горизонтали — своя мера.
Общая мера ярлыка 6/14. */
padding: var(--p-label);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-pill);
}
body.page-blog .vsec--blog-post .vsec__title-block {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.blog-post__title {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(30px, 5vw, 52px);
line-height: 1.18;
letter-spacing: -.01em;
color: var(--cream, #f5efe4);
margin: 0 0 18px;
}
.blog-post__lead {
font-size: clamp(16px, 2.1vw, 20px);
line-height: 1.5;
color: rgba(245, 239, 228, .78);
margin: 0 0 22px;
font-style: italic;
}
.blog-post__meta {
display: flex; gap: 10px; justify-content: center;
color: rgba(206, 178, 130, .78);
font-size: 14px;
letter-spacing: .03em;
}
.blog-post__content {
max-width: 720px;
margin: 0 auto;
padding: 40px 24px 100px;
/* Текст статьи выключен влево. Раньше он наследовал text-align:center
от .vsec:not(.vsec--hero) (строка 761), и все 25 абзацев висели по
центру с рваными краями с обеих сторон. Итоговый призыв .blog-post__cta
остаётся по центру — у него свой text-align:center (строка 3630). */
text-align: left;
}
.blog-post__intro {
font-size: 18px;
line-height: 1.6;
color: rgba(245, 239, 228, .78);
border-left: 2px solid var(--gold, #ceb282);
padding-left: 22px;
margin: 0 0 48px;
font-style: italic;
}
.blog-post__content .umra-block {
padding: 28px 0;
background: none;
border: none;
border-bottom: 1px solid rgba(206, 178, 130, .12);
margin: 0;
}
.blog-post__content .umra-block:last-of-type { border-bottom: none; }
.blog-post__content .umra-block h2 {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(22px, 3.2vw, 28px);
color: var(--gold, #ceb282);
margin: 0 0 18px;
}
.blog-post__content .umra-block p {
font-size: 17px;
line-height: 1.65;
color: rgba(245, 239, 228, .78);
margin: 0 0 16px;
}
.blog-post__content .umra-block p:last-of-type { margin-bottom: 0; }
.blog-post__cta {
margin-top: 40px !important;
padding: 36px !important;
background: linear-gradient(135deg, rgba(206, 178, 130, .12), rgba(206, 178, 130, .12)) !important;
border: 1px solid rgba(206, 178, 130, .25) !important;
border-radius: var(--r-md);
border-bottom: 1px solid rgba(206, 178, 130, .25) !important;
text-align: center;
}
.blog-post__cta h2 {
font-size: clamp(24px, 3.4vw, 30px) !important;
color: var(--cream, #f5efe4) !important;
}
.blog-post__cta p {
margin-bottom: 24px !important;
}
.blog-post__cta .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(206, 178, 130, .35);
}
/* Mobile blog */
@media (max-width: 640px) {
.blog-card { padding: 24px; }
.blog-post__content { padding: 30px 20px 80px; }
.blog-post__intro { font-size: 16px; padding-left: 16px; }
.blog-post__content .umra-block p { font-size: 16px; }
.blog-post__cta { padding: 26px !important; }
}
/* === BACK-TO-TOP кнопка ============================================ */
.back-top {
position: fixed;
bottom: calc(88px + env(safe-area-inset-bottom, 0px)); right: 1.25rem;
z-index: 48;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(40, 40, 40, .85);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(206, 178, 130, .25);
color: var(--gold, #ceb282);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transform: translateY(20px) scale(.85);
pointer-events: none;
transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
}
.back-top.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.back-top:hover {
background: rgb(40, 40, 40);
border-color: var(--gold, #ceb282);
transform: translateY(-2px) scale(1);
}
.back-top svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
.back-top { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: 1.25rem; width: 44px; height: 44px; }
}
@media (min-width: 768px) {
.back-top { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); right: 2rem; }
}
/* === COOKIE banner ============================================== */
.cookie-banner {
position: fixed;
left: 50%;
bottom: calc(96px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%) translateY(120%);
z-index: 47;
max-width: 520px;
width: calc(100% - 40px);
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: rgba(40, 40, 40, .92);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s;
opacity: 0;
box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.cookie-banner.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.cookie-banner__text {
flex: 1;
margin: 0;
font-size: 13px;
line-height: 1.55;
color: rgba(245, 239, 228, .78);
}
.cookie-banner__text a {
color: var(--gold, #ceb282);
text-decoration: underline;
text-decoration-color: rgba(206, 178, 130, .35);
text-underline-offset: 3px;
}
.cookie-banner__btn {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 18px;
min-height: 44px;
background: var(--gold, #ceb282);
color: #282828;
border: none;
border-radius: var(--r-pill);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
transition: transform .25s, background .25s;
}
.cookie-banner__btn:hover {
background: #e8d3a8;
transform: translateY(-1px);
}
@media (max-width: 640px) {
/* Было: всё столбиком (высота ~203px) + bottom 90px — плашка накрывала золотую
кнопку первого экрана. Стало: текст строкой, кнопки в один ряд, плашка ниже. */
.cookie-banner {
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
padding: 14px 16px;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
text-align: center;
gap: 12px;
}
.cookie-banner__text { flex: 1 1 100%; }
.cookie-banner__btn,
.cookie-banner__manage { flex: 1 1 0; align-self: auto; margin-right: 0; min-height: 44px; }
/* Пока плашка на экране — прячем нижнюю панель и кнопку «наверх»,
чтобы они не наслаивались друг на друга. */
body:has(.cookie-banner.show) .bottom-bar,
body:has(.cookie-banner.show) .back-top { opacity: 0; pointer-events: none; }
body:has(.cookie-banner.show) .vsec--hero { padding-bottom: 140px; }
}
/* Machine-translation notice (Chechen) — stacks above the cookie banner */
.mt-banner { bottom: 168px; z-index: 46; border-color: rgba(206, 178, 130, .25); }
.mt-banner .cookie-banner__text { font-size: 13px; }
.mt-banner__sub {
display: block;
margin-top: 5px;
font-size: 12.5px;
line-height: 1.5;
color: rgba(245, 239, 228, .78);
}
.mt-banner__btn {
background: transparent;
color: rgb(206, 178, 130);
border: 1px solid rgba(206, 178, 130, .50);
}
.mt-banner__btn:hover { background: rgba(206, 178, 130, .12); color: #e8d3a8; }
@media (max-width: 640px) {
.mt-banner { bottom: 176px; }
}
/* === 404 page ================================================= */
body.page-404 {
min-height: 100vh;
display: flex;
/* Колонка, а не строка: chat_widget() приносит на 404 полный подвал,
и при flex-строке он вставал ВТОРОЙ КОЛОНКОЙ рядом с цифрой «404»
(1440px: 404 в 517px слева, подвал 923px справа; 375px: блок 404
уезжал за левый край, x=-22, кнопки обрезались). Аудит 2026-07-27. */
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background: linear-gradient(180deg, #282828 0%, #282828 100%);
}
body.page-404 main.error-404 {
flex: 1 0 auto;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 120px 24px 64px;
box-sizing: border-box;
}
body.page-404 .site-footer {
flex: 0 0 auto;
margin-top: 0;
}
.error-404 {
text-align: center;
padding: 100px 24px;
max-width: 600px;
position: relative;
}
.error-404__palm {
width: 96px;
margin: 0 auto 28px;
opacity: .85;
}
.error-404__palm img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,.3)); }
@media (max-width: 720px) {
.error-404__palm { width: 72px; margin-bottom: 22px; }
}
.error-404__code {
font-family: 'Philosopher', serif;
font-size: clamp(72px, 18vw, 168px);
font-weight: 400;
color: var(--gold, #ceb282);
line-height: 1;
margin: 0 0 16px;
letter-spacing: -.04em;
}
.error-404__title {
font-family: 'Philosopher', serif;
font-style: italic;
font-size: clamp(20px, 3.5vw, 28px);
color: var(--cream, #f5efe4);
margin: 0 0 14px;
font-weight: 400;
}
.error-404__sub {
font-size: 16px;
line-height: 1.55;
color: rgba(245, 239, 228, .55);
margin: 0 0 36px;
}
.error-404__actions {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.error-404__btn {
display: inline-flex;
align-items: center;
gap: 8px;
/* Общая кнопка: высота 50, отступ 14px 26px, кегль 14.
ВАЖНО: пара на 404 стояла уступом НЕ из-за высоты. Замер в браузере:
золотая 49 px, кнопка с обводкой 51 px — разницу давала рамка, которая
есть только у второй. Поэтому добавляем прозрачную рамку 1px — ровно так
же, как это сделано у общей .btn (строка 713). Теперь обе 52 px. */
min-height: 50px;
padding: 14px 26px;
border: 1px solid transparent;
background: var(--gold);
color: var(--black);
text-decoration: none;
border-radius: var(--r-pill);
font-family: var(--font-b);
font-size: 14px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 500;
transition: transform .25s, box-shadow .25s, background .25s;
}
.error-404__btn:hover {
transform: translateY(-2px);
background: #e8d3a8;
box-shadow: 0 10px 28px rgba(206, 178, 130, .35);
}
.error-404__btn--ghost {
background: rgba(40, 40, 40, .35);
color: var(--gold);
border: 1px solid var(--line-3);
}
.error-404__btn--ghost:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--black);
}
/* === HERO ACTIONS — парные кнопки (как у apple.com) ============== */
.hero__actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin: 28px 0 0;
}
.hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 50px;
padding: 14px 26px;
border-radius: var(--r-pill);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 14px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s, border-color .3s;
border: 1px solid transparent;
white-space: nowrap;
}
.hero__btn--primary {
background: var(--gold, #ceb282);
color: #282828;
box-shadow: 0 6px 20px rgba(206, 178, 130, .25);
}
.hero__btn--primary:hover {
background: #e8d3a8;
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(206, 178, 130, .4);
}
.hero__btn--ghost {
background: rgba(40, 40, 40, .35);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
color: var(--gold);
border-color: var(--line-3);
}
.hero__btn--ghost:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--black);
transform: translateY(-2px);
}
@media (max-width: 640px) {
/* Поле 32px ОСТАВЛЯЕМ. Первый экран собран по центру: заголовок, подзаголовок
и плашка-доказательство центрируются, никакой левой вертикали на этом экране нет —
значит «попасть в край карточек» тут нечему. Проверено двумя скриншотами 390px:
при padding:0 кнопки становятся 352,5px, золотая плашка почти упирается в края
и перевешивает весь кадр; при 288,5px сохраняется спокойная «пирамидка»
заголовок → строка → плашка 262px → кнопка 288px.
Зазор 10px → 12px: значение 10 уходит из системы, 12 уже есть в сетке квиза. */
.hero__actions {
margin-top: 22px;
gap: 12px;
flex-direction: column;
align-items: stretch;
padding: 0 32px;
}
/* Кнопка первого экрана = обычная кнопка сайта. Было 15px 22px и разрядка .09em —
третья геометрия на одном экране. Кегль, разрядку и высоту не переопределяем:
базовые 14px / .12em / min-height 50px уже совпадают с .btn.
Замер 390px: 288,5 x 52,7 — ровно та же высота, что у .btn (52,7). */
.hero__btn {
justify-content: center;
padding: 14px 20px;
}
}
/* === TELEGRAM NURTURE — мягкий захват «ещё не готовых» перед футером ===
Использует существующий контент-канал t.me/gosaudia. Тихий люкс: тёплый
near-black с золотым свечением сверху, одна gold-кнопка. */
.tg-nurture {
position: relative;
padding: clamp(56px, 8vw, 100px) 24px;
text-align: center;
background:
radial-gradient(120% 150% at 50% 0%, rgba(206, 178, 130, .12), rgba(206, 178, 130, .12) 58%),
#282828;
border-top: 1px solid rgba(206, 178, 130, .12);
overflow: hidden;
}
.tg-nurture__inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.tg-nurture__eyebrow {
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: rgba(206, 178, 130, .78); margin: 0 0 14px;
}
.tg-nurture__title {
font-family: var(--font-h, 'Philosopher', serif);
font-weight: 400; line-height: 1.12;
font-size: clamp(1.7rem, 4.4vw, 2.55rem);
color: var(--cream, #f5efe4); margin: 0 0 16px;
}
.tg-nurture__sub {
font-family: var(--font-b, 'Inter', sans-serif);
font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6;
color: rgba(245, 239, 228, .78); margin: 0 auto 30px; max-width: 30em;
}
.tg-nurture__btn {
display: inline-flex; align-items: center; gap: 10px;
/* Общий отступ кнопки — 14px 26px (было 28px по бокам). */
padding: 14px 26px; border-radius: var(--r-pill);
background: var(--gold, #ceb282); color: #282828;
font-family: var(--font-b, 'Inter', sans-serif);
min-height: 50px;
font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
text-decoration: none;
box-shadow: 0 6px 22px rgba(206,178,130,.22);
transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s;
}
.tg-nurture__btn:hover {
background: #e8d3a8; transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(206,178,130,.36);
}
.tg-nurture__btn-ic { display: inline-flex; width: 19px; height: 19px; }
.tg-nurture__btn-ic svg { width: 100%; height: 100%; }
@media (max-width: 640px) {
.tg-nurture { padding: 48px 20px; }
.tg-nurture__btn { width: 100%; max-width: 340px; justify-content: center; }
}
/* === FOOTER (Apple-уровень) ===================================== */
.site-footer {
background: #282828;
border-top: 1px solid rgba(206, 178, 130, .12);
padding: 64px 24px 32px;
margin-top: 80px;
color: rgba(245, 239, 228, .78);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 13px;
line-height: 1.6;
}
.site-footer__inner {
max-width: 1200px;
margin: 0 auto;
}
.site-footer__cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 40px 24px;
margin-bottom: 56px;
}
.site-footer__col h4 {
font-family: 'Philosopher', serif;
font-size: 14px;
font-weight: 400;
color: var(--gold, #ceb282);
margin: 0 0 16px;
letter-spacing: .02em;
text-transform: lowercase;
}
.site-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__col li {
margin: 0 0 4px;
}
.site-footer__col a {
color: rgba(245, 239, 228, .78);
text-decoration: none;
transition: color .25s;
font-size: 13px;
display: block;
padding: 6px 0;
overflow-wrap: anywhere;
}
.site-footer__col a:hover {
color: var(--gold, #ceb282);
}
.site-footer__bottom {
border-top: 1px solid rgba(206, 178, 130, .12);
padding-top: 24px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
color: rgba(245, 239, 228, .55);
}
.site-footer__legal strong { color: rgba(245, 239, 228, .78); font-weight: 500; }
@media (max-width: 900px) {
.site-footer__cols {
grid-template-columns: repeat(3, 1fr);
gap: 36px 24px;
}
}
@media (max-width: 640px) {
/* Нижняя плавающая панель (56px + 20px отступ) закрывала строку копирайта —
резервируем под неё место. */
.site-footer { padding: 48px 20px calc(96px + env(safe-area-inset-bottom, 0px)); margin-top: 60px; }
.site-footer__cols {
grid-template-columns: repeat(2, 1fr);
gap: 32px 20px;
margin-bottom: 40px;
}
.site-footer__bottom {
flex-direction: column;
text-align: center;
align-items: center;
gap: 12px;
}
}
@media (max-width: 400px) {
/* почта gosaudiatravel@gmail.com не влезала в две колонки на iPhone 12–15 */
.site-footer__cols { grid-template-columns: 1fr; }
}
/* === PROMO FOOTNOTE сноска про Аль-Уля ========================== */
/* НЕ ИСПОЛЬЗУЕТСЯ на 2026-07-27 (класса нет ни на одной странице) */
.promo-panel__footnote {
display: block;
margin-top: 8px;
font-size: 12px;
letter-spacing: .04em;
color: rgba(206, 178, 130, .55);
font-style: italic;
}
/* =========================================================
APPLE-INSPIRED ENHANCEMENTS — 12 PUNKTS
========================================================= */
/* === 4. SKIP-LINK + FOCUS RINGS (accessibility) === */
.skip-link {
position: absolute;
top: -40px; left: 16px;
z-index: 9999;
padding: 10px 18px;
background: var(--gold, #ceb282);
color: #282828;
font-weight: 500;
border-radius: var(--r-pill);
text-decoration: none;
font-size: 13px;
letter-spacing: .06em;
transition: top .25s ease;
}
.skip-link:focus { top: 16px; outline: none; }
/* Focus-visible: чёткие gold-rings, не скрытые ресетом */
*:focus-visible {
outline: 2px solid var(--gold, #ceb282);
outline-offset: 3px;
border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible {
outline-offset: 2px;
}
/* === 2,3,7. HERO POLISH: eyebrow-tag + sub + text-shadow === */
.hero__sub {
font-family: var(--font-b, 'Inter', sans-serif);
font-size: clamp(14px, 1.6vw, 16px);
font-weight: 400;
color: rgba(245, 239, 228, .78);
margin: 18px auto 0;
letter-spacing: .015em;
text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.vsec--hero h1 {
text-shadow: 0 4px 28px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.35);
}
.vsec--hero .hero__eyebrow {
text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
@media (max-width: 640px) {
.hero__eyebrow-tag { font-size: 12px; letter-spacing: .22em; margin-bottom: 14px; }
.hero__sub { font-size: 14px; }
}
/* === 5. FOOTNOTES в footer === */
/* У строки оплаты и у сносок было по своей тонкой линии — две одинаковые
черты подряд, а между ними всего одна короткая строка текста.
Оставляем одну (над оплатой): оплата и сноски читаются как один тихий
служебный блок. Граница блока не теряется — снизу его закрывает
собственная линия .site-footer__bottom. */
.site-footer__notes {
padding: 14px 0 20px;
font-size: 13px;
line-height: 1.55;
color: rgba(245, 239, 228, .55);
font-family: var(--font-b, 'Inter', sans-serif);
}
.site-footer__notes p {
margin: 0 0 8px;
}
.site-footer__notes p:last-child { margin-bottom: 0; }
/* === 5b. PAYMENT TRUST LINE в footer === */
.footer-pay {
display: flex;
flex-wrap: wrap;
align-items: center;
/* Было по центру: строка оплаты — единственный блок между колонками ссылок
и сносками, который не стоял на общей левой вертикали.
Ставим её на ту же левую линию, что соседи сверху и снизу. */
justify-content: flex-start;
gap: 6px 12px;
padding: 22px 0 4px;
border-top: 1px solid rgba(206, 178, 130, .12);
font-family: var(--font-b, 'Inter', sans-serif);
}
.footer-pay__lock {
display: inline-flex;
align-items: center;
color: var(--gold, #ceb282);
opacity: .8;
}
.footer-pay__txt {
font-size: 13px;
letter-spacing: .04em;
color: rgba(245, 239, 228, .55);
}
.footer-pay__methods {
font-size: 13px;
font-weight: 600;
letter-spacing: .03em;
color: rgba(206, 178, 130, .78);
}
/* === 10. LANG SWITCHER (placeholder EN) === */
.site-footer__lang {
display: inline-flex;
align-items: center;
gap: 8px;
/* На узких экранах 4 языка + разделители не влезали в строку и «Английский»
обрезался у правого края. Разрешаем переносить на вторую строку по центру. */
flex-wrap: wrap;
justify-content: center;
font-size: 13px;
color: rgba(245, 239, 228, .55);
}
.site-footer__lang-btn {
background: transparent;
border: none;
color: rgba(245, 239, 228, .55);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 13px;
letter-spacing: .08em;
cursor: pointer;
padding: 4px 6px;
border-radius: var(--r-xs);
transition: color .25s;
}
/* Текущий язык — не кнопка, а надпись (в шапке уже так). Убираем «руку». */
span.site-footer__lang-btn { cursor: default; }
.site-footer__lang-btn:hover:not(:disabled) {
color: var(--gold, #ceb282);
}
.site-footer__lang-btn--active {
color: var(--gold, #ceb282);
font-weight: 500;
}
@media (max-width: 640px) {
/* На телефоне языки переносятся на 2 строки — прячем точки-разделители
(иначе одна повисает в конце строки) и даём чуть больше воздуха. */
.site-footer__lang { gap: 8px 16px; }
.site-footer__lang > span[aria-hidden="true"] { display: none; }
}
/* === 6. ТОНКАЯ ЗОЛОТАЯ ЛИНИЯ между секциями (apple-style separator) === */
.vsec:not(.vsec--hero) + .vsec:not(.vsec--hero) {
position: relative;
}
.vsec:not(.vsec--hero) + .vsec:not(.vsec--hero)::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60vw;
max-width: 800px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(206, 178, 130, .35) 20%, rgba(206, 178, 130, .35) 50%, rgba(206, 178, 130, .35) 80%, transparent 100%);
pointer-events: none;
z-index: 5;
}
/* === 12. HOVER MEGA-PREVIEW: при наведении на меню — мини-tooltip preview === */
@media (hover: hover) and (pointer: fine) {
.nav__menu-btn {
position: relative;
}
.nav__menu-btn::after {
content: 'умра · туры · аль-уля · сертификат';
position: absolute;
top: calc(100% + 8px);
right: 0;
padding: 8px 14px;
background: rgba(40, 40, 40, .95);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-pill);
color: var(--gold, #ceb282);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
letter-spacing: .06em;
white-space: nowrap;
opacity: 0;
transform: translateY(-6px) scale(.9);
transform-origin: top right;
transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
text-transform: lowercase;
}
.nav__menu-btn:hover::after {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* === 11. PINNED-style тарифные карточки: scroll-triggered scale-up (мини-pin) === */
@media (hover: hover) and (pointer: fine) {
.tariff-card {
transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, border-color .4s;
}
.tariff-card:hover {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 20px 50px rgba(206, 178, 130, .12);
border-color: rgba(206, 178, 130, .5);
}
}
/* === Photo polishing: shadow ниже H1 на hero у service страниц === */
body.page-umrah h1,
body.page-about h1,
body.page-alula h1,
body.page-certificate h1,
body.page-packages h1 {
text-shadow: 0 4px 28px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3);
}
/* === 1,2. Price-block apple-style для разрешения hero (новый класс под H1) === */
.hero__price {
display: inline-block;
margin-top: 18px;
padding: 8px 18px;
background: rgba(40, 40, 40, .60);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-pill);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 13px;
color: var(--cream, #f5efe4);
letter-spacing: .03em;
}
.hero__price strong {
color: var(--gold, #ceb282);
font-weight: 500;
}
/* === 9. Lazy-image fade-in (для всех ![]()
) === */
img[loading="lazy"] {
opacity: 0;
transition: opacity .6s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"]:not([data-blur]) {
opacity: 1;
}
/* =========================================================
TRAVEL-SITES IMPROVEMENTS: quiz + map + pilgrim-utils
========================================================= */
/* === QUIZ section === */
/* === QUIZ SECTION — same dark background as the map block (география) === */
/* === HEART — верх воронки: 3 страха «думающего» → разрешение === */
.vsec--heart {
background: #282828;
padding: 96px 24px;
min-height: auto; height: auto;
display: flex !important; align-items: center; justify-content: center;
position: relative; z-index: 2; margin-top: -1px; margin-bottom: -1px;
}
@media (max-width: 720px) { .vsec--heart { padding: 64px 20px; } }
/* hero-видео без затемнения, только короткий гас в самый низ — без видимого стыка с heart.
ВАЖНО: селектор сужен до .vsec--hero. Раньше он ловил ЛЮБУЮ секцию перед .vsec--heart —
и на /services/umrah/ убивал штатное затемнение .vsec--detail, из-за чего слово «умра»
тонуло в кадре (контраст 1.2–2.4). */
.vsec--hero:has(+ .vsec--heart) .vsec__overlay {
background: linear-gradient(180deg,
rgba(40,40,40,0) 0%, rgba(40,40,40,0) 76%, rgba(40,40,40,.55) 88%, rgba(40,40,40,1) 100%) !important;
}
.heart { max-width: 1040px; width: 100%; text-align: center; position: relative; }
.heart__divider {
display: block; width: 1px; height: 78px; margin: 0 auto;
background: linear-gradient(180deg, transparent, rgba(206, 178, 130, .60), transparent);
pointer-events: none;
}
.heart__divider--top { margin-bottom: 46px; }
.heart__divider--bottom { margin-top: 4px; background: none; } /* линия открывает блок, но не закрывает его: снизу оставляем чистый воздух */
@media (max-width: 720px) {
.heart__divider { height: 58px; }
.heart__divider--top { margin-bottom: 34px; }
}
.heart__eyebrow {
font-family: var(--font-b); font-size: 12px; font-weight: 500;
letter-spacing: .22em; text-transform: uppercase;
color: rgba(206, 178, 130, .78); margin: 0 0 26px;
}
.heart__title {
font-family: var(--font-h); font-weight: 400;
font-size: clamp(28px, 5vw, 50px); line-height: 1.16;
color: var(--cream); margin: 0 0 60px; text-wrap: balance;
}
.heart__title em { font-style: italic; color: var(--gold); }
.heart__cards {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; text-align: left; margin: 0 0 56px;
}
@media (max-width: 860px) {
.heart__cards { grid-template-columns: 1fr; gap: 0; max-width: 480px; margin: 0 auto; }
}
.heart__card {
padding: 32px 24px; border: 1px solid var(--line); border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
@media (max-width: 860px) {
/* На телефоне три карточки превращаются в тихий список: без рамок, фона и
скруглений — только волосяная линия-разделитель МЕЖДУ пунктами. Так блок
перестаёт читаться «обрезанным по бокам» (раньше фоновый прямоугольник и
рамки доходили почти до краёв экрана и выглядели как обрезанная панель). */
.heart__card {
border: 0; border-radius: 0; background: none;
padding: 24px 0;
}
.heart__card + .heart__card { border-top: 1px solid var(--line); }
}
.heart__fear {
font-family: var(--font-h); font-style: italic;
font-size: clamp(16px, 2.1vw, 20px); line-height: 1.4;
color: var(--gold); margin: 0 0 15px;
}
.heart__answer {
font-family: var(--font-b); font-weight: 300;
font-size: 15px; line-height: 1.7; color: rgba(245, 239, 228, .78); margin: 0;
}
.heart__resolve {
font-family: var(--font-h); font-weight: 400;
font-size: clamp(22px, 3.4vw, 33px); line-height: 1.3;
color: var(--cream); margin: 0 auto; max-width: 780px; text-wrap: balance;
}
.heart__resolve em { font-style: italic; color: var(--gold); }
/* Кода «сердечного слоя»: тихий аккорд «после» + сигнатурная строка-компас
(наследие убранной pinned-истории — путь «от „когда-нибудь" к „я еду"»). */
.heart__after {
font-family: var(--font-h); font-weight: 400;
font-size: clamp(16px, 2.1vw, 20px); line-height: 1.5;
color: rgba(245, 239, 228, .78); margin: 22px auto 0; max-width: 640px;
text-wrap: balance;
}
.heart__after em { font-style: italic; color: var(--gold); }
.heart__arc {
font-family: var(--font-h); font-style: italic; font-weight: 400;
font-size: clamp(15px, 1.8vw, 18px); line-height: 1.4;
color: var(--gold); opacity: .92; margin: 26px 0 0; letter-spacing: .01em;
}
@media (max-width: 720px) {
/* На телефоне вторая фраза «after» лежит в . Раньше перенос рвал её так,
что одно слово «Это» висело в конце первой строки. Делаем отдельной
строкой — получается ровное двустишие: обычная фраза сверху, курсив снизу. */
.heart__after { margin-top: 20px; }
.heart__after em { display: block; margin-top: .14em; }
.heart__arc { margin-top: 26px; }
}
/* Короткий вариант сердца (на /умра/): один лид-абзац вместо трёх карточек */
.heart--brief .heart__title { margin: 0 0 30px; }
.heart__lead {
font-family: var(--font-b); font-weight: 300;
font-size: clamp(14px, 1.6vw, 16px); line-height: 1.75;
color: rgba(245, 239, 228, .78); margin: 0 auto 38px; max-width: 660px;
}
/* На странице УМРЫ под «сердцем» идёт блок сегментов (#282828) — единый фон, без стыка */
.page-umrah .vsec--heart {
background: var(--black);
}
.vsec--quiz {
background: #282828;
padding: 96px 24px;
min-height: auto;
height: auto;
display: flex !important;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
margin-top: -1px;
margin-bottom: -1px;
}
@media (max-width: 720px) {
.vsec--quiz { padding: 64px 20px; }
}
/* Make video section preceding quiz fade to solid #282828 at the seam — no visible step. */
.vsec:has(+ .vsec--quiz) .vsec__overlay {
background: linear-gradient(180deg,
rgba(40,40,40,.55) 0%,
rgba(40,40,40,.55) 55%,
rgba(40,40,40,1) 100%) !important;
}
/* === Animated gold underline on «4 ШАГА» (drawn on scroll-into-view) === */
.quiz__eyebrow-accent {
position: relative;
color: var(--gold, #ceb282);
}
.quiz__eyebrow-accent::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 1px;
background: linear-gradient(90deg, rgba(206, 178, 130, .12) 0%, var(--gold, #ceb282) 50%, rgba(206, 178, 130, .12) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.2s cubic-bezier(.65,.05,.36,1) .2s;
}
.quiz__eyebrow-accent.is-drawn::after,
.vsec--quiz.in-view .quiz__eyebrow-accent::after {
transform: scaleX(1);
}
.quiz {
max-width: 680px;
width: 100%;
text-align: center;
position: relative;
}
.quiz__eyebrow {
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(206, 178, 130, .78);
margin: 0 0 36px;
display: inline-flex;
align-items: center;
gap: .6em;
}
@media (max-width: 720px) {
.quiz__eyebrow { margin-bottom: 28px; }
}
/* Elegant gold gradient divider — vertical hairline at top + bottom of quiz block */
.quiz__divider {
display: block;
width: 1px;
height: 80px;
margin: 0 auto;
background: linear-gradient(180deg, transparent, rgba(206, 178, 130, .60), transparent);
pointer-events: none;
}
.quiz__divider--top {
margin-bottom: 56px;
}
.quiz__divider--bottom {
margin-top: 56px;
}
@media (max-width: 720px) {
.quiz__divider { height: 60px; }
.quiz__divider--top { margin-bottom: 40px; }
.quiz__divider--bottom { margin-top: 40px; }
}
.quiz__title {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(28px, 5vw, 48px);
line-height: 1.18;
margin: 0 0 44px;
color: var(--cream, #f5efe4);
}
.quiz__title em {
font-style: italic;
color: var(--gold, #ceb282);
}
.quiz__stage {
position: relative;
min-height: 280px;
/* Шаги лежат в ОДНОЙ ячейке грида друг над другом. Раньше шаги были
position:absolute и выпадали из потока — поэтому на телефоне 5-я кнопка
(«Пока не решил») вылезала за высоту сцены и обрезалась overflow:hidden.
Теперь сцена сама растёт под самый высокий шаг — ничего не режется. */
display: grid;
}
.quiz__step {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden; /* иначе 13 невидимых кнопок ловят Tab и читаются вслух */
transform: translateY(12px);
pointer-events: none;
transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.quiz__step--active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.quiz__q {
font-family: 'Philosopher', serif;
font-style: italic;
font-size: clamp(16px, 2.1vw, 20px);
color: var(--cream, #f5efe4);
margin: 0 0 28px;
}
.quiz__opts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.quiz__opt {
padding: 16px 22px;
background: rgba(40, 40, 40, .60);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-md);
color: var(--cream, #f5efe4);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 14px;
cursor: pointer;
text-align: center;
transition: all .3s cubic-bezier(.2,.7,.2,1);
}
.quiz__opt:hover {
background: rgba(206, 178, 130, .12);
border-color: var(--gold, #ceb282);
transform: translateY(-2px);
}
/* Нечётная последняя кнопка (5-я в 1-м вопросе, 3-я в 3-м) НЕ растягивается на всю ширину —
иначе получается «кривой хвост»: два ряда узких кнопок и одна широкая.
Оставляем ей ту же ширину, что у соседей (половина минус половина зазора 12px),
и ставим по центру ряда. Все кнопки одного размера — сетка читается спокойно. */
.quiz__opts > .quiz__opt:last-child:nth-child(odd) {
grid-column: 1 / -1;
width: calc(50% - 6px);
justify-self: center;
}
.quiz__result {
text-align: center;
}
.quiz__result-title {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(24px, 4vw, 32px);
color: var(--gold, #ceb282);
margin: 0 0 12px;
}
.quiz__result-text {
font-size: 16px;
line-height: 1.55;
color: rgba(245, 239, 228, .78);
margin: 0 0 14px;
}
.quiz__result-note {
font-size: 13px;
line-height: 1.5;
color: rgba(206, 178, 130, .78);
max-width: 440px;
margin: 0 auto 26px;
}
.quiz__result-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* Строка под сценой: «Шаг N из 4» ровно по центру — на одной вертикали с точками-индикаторами
ниже, подпись и точки читаются как один узел. Кнопка «назад» вынута из потока влево
(см. .quiz__back), поэтому она не сдвигает центр и не прыгает, когда появляется/исчезает. */
.quiz__nav {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 34px;
margin-bottom: 0;
}
.quiz__back {
/* Вне потока: висит у левого края строки и не влияет на центрирование подписи шага. */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 15px;
background: transparent;
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-pill, 999px);
color: var(--gold, #ceb282);
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
transition: background .25s, border-color .25s, transform .25s;
}
.quiz__back:hover {
background: rgba(206, 178, 130, .12);
border-color: var(--gold, #ceb282);
/* сохраняем вертикальное центрирование из .quiz__back, иначе кнопка прыгает вниз при наведении */
transform: translate(-2px, -50%);
}
.quiz__back[hidden] { display: none; }
.quiz__step-label {
/* было margin-left:auto — подпись прижималась к правому краю, а точки стояли по центру */
margin-left: 0;
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(206, 178, 130, .78);
}
.quiz__progress {
display: flex;
justify-content: center;
gap: 8px;
/* 10px вместо 18px: подпись «Шаг N из 4» и точки читаются как одна группа, а не два отдельных элемента */
margin-top: 10px;
}
.quiz__progress-step {
width: 34px; height: 4px;
background: rgba(206, 178, 130, .12);
border-radius: var(--r-xs);
transition: background .35s, box-shadow .35s;
}
.quiz__progress-step--active {
background: var(--gold, #ceb282);
box-shadow: 0 0 10px rgba(206, 178, 130, .45);
}
@media (max-width: 640px) {
.vsec--quiz { padding: 90px 20px 70px; }
.quiz__opts { grid-template-columns: 1fr; }
/* На телефоне колонка одна — «половинная» ширина последней кнопки не нужна,
и центрирование тоже: без stretch кнопка сожмётся по тексту и станет уже соседей. */
.quiz__opts > .quiz__opt:last-child:nth-child(odd) {
width: auto;
justify-self: stretch;
}
.quiz__stage { min-height: 360px; }
}
/* === INTERACTIVE MAP === */
.vsec--map {
background: #282828;
padding: 96px 24px;
min-height: auto;
height: auto;
display: flex !important;
align-items: center;
justify-content: center;
}
.map-block {
max-width: 1100px;
width: 100%;
text-align: center;
}
.map-block__eyebrow {
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(206, 178, 130, .78);
margin: 0 0 18px;
display: inline-flex;
align-items: center;
gap: 14px;
justify-content: center;
}
.map-block__eyebrow-line {
display: inline-block;
width: 36px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(206, 178, 130, .60), transparent);
}
/* Animated dashed flight routes — slowly shift dash offset (premium aviation map feel) */
.map-route {
stroke-dashoffset: 0;
animation: routeDash 3.5s linear infinite;
}
.map-route--slow { animation-duration: 7s; }
@keyframes routeDash {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -36; }
}
@media (prefers-reduced-motion: reduce) {
.map-route { animation: none; }
}
/* City labels: subtle group with coords */
.map-pin__label text:first-child { transition: fill .25s; }
.map-pin:hover .map-pin__label text:first-child,
.map-pin:focus .map-pin__label text:first-child { fill: #ceb282; }
.map-block__title {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(28px, 5vw, 48px);
margin: 0 0 50px;
color: var(--cream, #f5efe4);
}
.map-block__title em { font-style: italic; color: var(--gold, #ceb282); }
.map-block__wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
text-align: left;
}
.map-svg { width: 100%; max-width: 600px; height: auto; }
.map-pin { cursor: pointer; }
.map-pin { cursor: pointer; transition: opacity .25s; touch-action: manipulation; }
.map-pin circle { pointer-events: all; }
/* Подпись города тоже кликабельна — палец легко попадает по названию, не только по точке. */
.map-pin text { pointer-events: all; }
/* Увеличиваем «hit area» pins на мобильном через выделенный invisible halo */
@media (max-width: 800px) {
.map-pin circle:first-child { r: 28; opacity: .2; }
}
.map-pin:hover circle:first-child,
.map-pin--active circle:first-child {
fill: rgba(206, 178, 130, .45);
}
.map-pin:hover { filter: brightness(1.15); }
.map-block__info {
background: rgba(40, 40, 40, .5);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(206, 178, 130, .12);
border-radius: var(--r-md);
padding: 32px;
}
.map-block__city-name {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(24px, 3.5vw, 32px);
color: var(--gold, #ceb282);
margin: 0 0 14px;
}
.map-block__city-text {
font-size: 16px;
line-height: 1.6;
color: rgba(245, 239, 228, .78);
margin: 0 0 22px;
}
@media (max-width: 800px) {
.vsec--map { padding: 64px 20px; }
.map-block__wrap { grid-template-columns: 1fr; gap: 24px; }
.map-block__info { padding: 24px; }
}
/* === PILGRIM UTILITIES widget в footer === */
.pilgrim-utils {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 0 0 36px;
margin-bottom: 36px;
border-bottom: 1px solid rgba(206, 178, 130, .12);
}
.pilgrim-utils__item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: rgba(40, 40, 40, .60);
border: 1px solid rgba(206, 178, 130, .12);
border-radius: var(--r-md);
}
.pilgrim-utils__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center; justify-content: center;
width: 38px; height: 38px;
background: rgba(206, 178, 130, .12);
border-radius: 50%;
color: var(--gold, #ceb282);
}
.pilgrim-utils__label {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(245, 239, 228, .55);
margin-bottom: 2px;
}
.pilgrim-utils__val {
font-family: 'Philosopher', serif;
font-size: 16px;
color: var(--gold, #ceb282);
}
@media (max-width: 800px) {
.pilgrim-utils { grid-template-columns: 1fr; gap: 10px; padding-bottom: 24px; margin-bottom: 24px; }
}
/* === GDPR COOKIE — expanded with preferences === */
.cookie-banner__manage {
flex-shrink: 0;
background: transparent;
border: 1px solid rgba(206, 178, 130, .25);
color: var(--gold, #ceb282);
display: inline-flex; align-items: center; justify-content: center;
padding: 8px 14px;
min-height: 44px;
border-radius: var(--r-pill);
font-family: var(--font-b, 'Inter', sans-serif);
font-weight: 500;
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
margin-right: 8px;
transition: border-color .25s, color .25s;
}
.cookie-banner__manage:hover {
border-color: rgba(206, 178, 130, .50);
color: #e8d3a8;
}
@media (max-width: 640px) {
.cookie-banner__manage { align-self: stretch; margin-right: 0; }
}
/* НЕ ИСПОЛЬЗУЕТСЯ на 2026-07-27 — класса нет ни на одной из 100 страниц */
.cookie-prefs {
display: none;
margin-top: 14px;
padding: 14px;
background: rgba(0, 0, 0, .3);
border-radius: 8px;
font-size: 12px;
}
.cookie-prefs.open { display: block; }
.cookie-prefs label {
display: flex; align-items: center; gap: 8px;
padding: 6px 0;
color: rgba(245, 239, 228, .78);
}
.cookie-prefs label input[type=checkbox] { accent-color: var(--gold, #ceb282); }
/* === IMPROVED MAP STYLES =========================================== */
.map-svg-wrap {
position: relative;
display: flex;
justify-content: center;
}
/* Курсивный акцент внутри H2 оставляем там, где он несёт смысл:
.heart__title em и .quiz__title em — оба золотой курсив.
У карты акцент снимаем: после того как сам заголовок стал кремовым,
курсив на слове «География» отличается от строки только наклоном
и читается как случайность, а не как выделение.
Это правило перебивает и раннее .map-block__title em (строка ~4777,
золотой курсив), поэтому второго места править не нужно. */
.map-block__title em {
font-style: normal;
color: inherit;
}
/* Снят одиночный золотой заголовок карты.
Кремовый цвет для .map-block__title уже задан выше (строка ~4774),
а этот блок в конце файла только перебивал его золотом через !important.
Блок удаляем целиком — лишнее правило и лишний !important уходят,
заголовок карты становится таким же кремовым, как остальные пять H2,
и золото снова работает как редкий акцент. */
/* Pulse animation на main pins */
.map-pin__pulse {
transform-origin: center;
transform-box: fill-box;
animation: mapPulse 2.6s ease-in-out infinite;
}
.map-pin--primary .map-pin__pulse {
animation-duration: 2s;
}
@keyframes mapPulse {
0%, 100% { transform: scale(.85); opacity: .35; }
50% { transform: scale(1.25); opacity: .15; }
}
.map-pin {
cursor: pointer;
transition: filter .3s;
touch-action: manipulation;
}
.map-pin:hover { filter: brightness(1.25); }
.map-pin:hover .map-pin__pulse { animation-duration: 1.2s; }
.map-pin--active circle:nth-child(3) { fill: #e8d3a8 !important; }
/* Info panel — улучшенный */
.map-block__info {
background: linear-gradient(135deg, rgba(40, 40, 40,.85), rgba(40, 40, 40,.65));
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(206,178,130,.25);
border-radius: var(--r-lg);
padding: 36px 32px;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
position: relative;
overflow: hidden;
}
.map-block__info::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold,#ceb282), transparent);
opacity: .5;
}
.map-block__info-tag {
display: inline-block;
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(206, 178, 130, .78);
margin-bottom: 14px;
}
.map-block__city-name {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(26px, 4vw, 36px);
color: var(--gold, #ceb282);
margin: 0 0 16px;
line-height: 1.1;
}
.map-block__city-text {
font-size: 16px;
line-height: 1.65;
color: rgba(245, 239, 228, .78);
margin: 0 0 26px;
}
.map-block__city-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: rgba(206,178,130,.12);
border: 1px solid rgba(206, 178, 130, .25);
border-radius: var(--r-pill);
color: var(--gold, #ceb282);
text-decoration: none;
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 13px;
letter-spacing: .08em;
transition: all .3s;
}
.map-block__city-link:hover {
background: var(--gold, #ceb282);
color: #282828;
gap: 14px;
transform: translateY(-1px);
}
@media (max-width: 800px) {
.map-block__wrap {
grid-template-columns: 1fr;
gap: 32px;
}
.map-block__info {
padding: 28px 22px;
}
.map-pin text { font-size: 13px; }
}
/* Skip — separator line between section-link and footer (apple-style) */
.vsec--map + .site-footer,
.vsec--quiz + .site-footer {
margin-top: 0 !important;
}
/* === GO SAUDIA wordmark (brandbook логотип) ======================== */
.gs-wordmark {
display: inline-block;
height: 24px;
width: auto;
vertical-align: middle;
}
.gs-wordmark--lg { height: 60px; }
.gs-wordmark--xl { height: 96px; }
/* Footer brand-знак сверху */
.site-footer__brand {
text-align: center;
margin-bottom: 48px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(206, 178, 130, .12);
}
.site-footer__brand img {
height: 22px;
width: auto;
opacity: .85;
}
.site-footer__wordmark {
max-width: min(180px, 44vw);
}
@media (max-width: 720px) {
.site-footer__brand img { height: 18px; }
.site-footer__wordmark { max-width: min(150px, 40vw); }
}
/* === GS-NAME inline wordmark (только GO SAUDIA letters) ============== */
.gs-name {
display: inline-block;
height: 1.55em;
width: auto;
vertical-align: middle;
margin: 0 .15em;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.gs-name--single { height: 1.1em; margin-right: .35em; }
.hero__eyebrow-tag .gs-name {
height: 2em;
margin: 0 .2em -.4em 0;
}
.quiz__eyebrow .gs-name {
height: 1.1em;
margin-right: .35em;
}
/* === Hero single-line GOSAUDIA wordmark (brand moment over H1) === */
.hero__wordmark {
display: block;
width: min(260px, 46vw);
height: auto;
margin: 10px auto 14px;
filter: drop-shadow(0 2px 14px rgba(0,0,0,.32));
opacity: .94;
}
@media (max-width: 720px) {
.hero__wordmark { width: min(180px, 48vw); margin: 8px auto 12px; }
}
/* === About hero palm-G icon (signature mark) === */
.about-hero__gpalm {
display: block;
width: auto;
height: 86px;
margin: 0 auto 18px;
opacity: .9;
filter: drop-shadow(0 2px 12px rgba(0,0,0,.3));
}
@media (max-width: 720px) {
.about-hero__gpalm { height: 64px; margin-bottom: 12px; }
}
/* === Красивый переход к секции карты ========================== */
.map-block__divider {
width: 1px;
height: 80px;
margin: 0 auto 50px;
background: linear-gradient(180deg, transparent, rgba(206, 178, 130, .60), transparent);
}
/* padding-top: 120px !important убран — ритм секций теперь единый (96/64px) */
@media (max-width: 640px) {
.map-block__divider { height: 60px; margin-bottom: 36px; }
}
/* === SAUDI EMBLEM hint на карте — лёгкая анимация ============== */
.map-svg use[href="#saudiEmblem"] {
animation: emblemPulse 4s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes emblemPulse {
0%, 100% { opacity: .22; }
50% { opacity: .35; }
}
/* =================================================================
=== PREMIUM INTERACTIVE EFFECTS (hover + tap feedback) ==========
================================================================= */
/* --- 1. Shimmer sweep: золотой gradient проходит по фону кнопок при hover --- */
.hero__btn--primary,
.nav__cta,
.btn--primary,
.umra-cta__btn--primary,
.quiz__opt,
.error-404__btn,
button[type="submit"] {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero__btn--primary::before,
.nav__cta::before,
.btn--primary::before,
.umra-cta__btn--primary::before,
.error-404__btn::before,
button[type="submit"]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg,
transparent 0%,
transparent 35%,
rgba(255,255,255,.45) 50%,
transparent 65%,
transparent 100%);
transform: translateX(-110%);
transition: transform .8s cubic-bezier(.4,0,.2,1);
pointer-events: none;
z-index: 1;
}
.hero__btn--primary:hover::before,
.nav__cta:hover::before,
.btn--primary:hover::before,
.umra-cta__btn--primary:hover::before,
.error-404__btn:hover::before,
button[type="submit"]:hover::before {
transform: translateX(110%);
}
/* Контент остаётся выше shimmer */
.hero__btn > *,
.nav__cta > *,
.btn--primary > *,
.umra-cta__btn--primary > *,
.error-404__btn > *,
button[type="submit"] > * {
position: relative;
z-index: 2;
}
/* --- 2. Усиленный glow на CTA при hover --- */
.hero__btn--primary:hover {
box-shadow:
0 12px 36px rgba(206,178,130,.55),
0 0 0 1px rgba(255,255,255,.15) inset;
}
.nav__cta:hover {
box-shadow: 0 8px 24px rgba(206,178,130,.45);
}
/* --- 3. Section-links на главной: slide + extended underline на hover --- */
.section-link {
transition: transform .5s cubic-bezier(.2,.7,.2,1), color .35s;
}
@media (hover: hover) and (pointer: fine) {
.section-link:hover {
transform: translateX(10px);
color: var(--gold, #ceb282);
}
.section-link:hover::after {
transform: scaleX(1) !important;
background: var(--gold, #ceb282) !important;
}
}
/* --- 4. Quiz buttons: gold fill slide-in --- */
.quiz__opt {
position: relative;
background: rgba(40, 40, 40, .35);
color: var(--cream, #f5efe4);
transition: color .35s, border-color .35s, transform .25s;
}
.quiz__opt::after {
content: '';
position: absolute;
inset: 0;
background: var(--gold, #ceb282);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s cubic-bezier(.2,.7,.2,1);
z-index: 0;
}
.quiz__opt > * { position: relative; z-index: 2; }
.quiz__opt:hover {
color: #282828;
border-color: var(--gold, #ceb282);
transform: translateY(-1px);
}
.quiz__opt:hover::after { transform: scaleX(1); }
/* --- 5. Map pins: усиленный pulse + label gold on hover --- */
.map-pin { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.map-pin:hover { transform: scale(1.06); transform-origin: center; }
.map-pin:focus { outline: none; }
/* мышью кольца нет, клавиатурой — есть (тот же приём, что в карусели отзывов) */
.map-pin:focus-visible {
transform: scale(1.06); transform-origin: center;
outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r-xs);
}
.map-pin:hover .map-pin__halo {
animation: pinHaloPulse 1.4s ease-out infinite;
}
@keyframes pinHaloPulse {
0% { opacity: .8; transform: scale(1); }
100% { opacity: 0; transform: scale(1.8); }
}
.map-pin:hover .map-pin__label text:first-child { fill: var(--gold, #ceb282); }
/* --- 6. Tap ripple: волна расходится от точки касания (mobile feedback) --- */
@media (hover: none) {
.hero__btn,
.nav__cta,
.quiz__opt,
.btn--primary,
.btn--ghost,
.umra-cta__btn,
.error-404__btn,
.menu-panel > a,
button[type="submit"] {
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
}
.hero__btn:active::after,
.nav__cta:active::after,
.quiz__opt:active::after,
.btn--primary:active::after,
.btn--ghost:active::after,
.error-404__btn:active::after,
button[type="submit"]:active::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(206, 178, 130, .60) 0%, transparent 60%);
animation: tapRipple .55s cubic-bezier(.4,0,.6,1);
pointer-events: none;
z-index: 10;
}
}
@keyframes tapRipple {
0% { opacity: 1; transform: scale(.3); }
100% { opacity: 0; transform: scale(1.5); }
}
/* --- 7. Footer link: smoother hover + underline --- */
.site-footer__col li a,
.foot ul a {
position: relative;
transition: color .3s, padding-left .3s;
}
.site-footer__col li a::before,
.foot ul a::before {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 0;
height: 1px;
background: var(--gold, #ceb282);
transition: width .35s ease;
}
.site-footer__col li a:hover,
.foot ul a:hover {
color: var(--gold, #ceb282);
padding-left: 4px;
}
.site-footer__col li a:hover::before,
.foot ul a:hover::before { width: calc(100% - 4px); }
/* --- 8. Chat + scroll-to-top floating bubbles: glow on hover --- */
.cw__bubble:hover,
.scroll-top:hover {
box-shadow: 0 8px 30px rgba(206,178,130,.55);
transform: translateY(-3px) scale(1.05);
}
/* --- 8b. Отклик на нажатие на КОМПЬЮТЕРЕ: раньше эффект был только под @media (hover: none),
то есть мышкой кнопки никак не отзывались. --- */
.btn:active, .hero__btn:active, .nav__cta:active, .bottom-bar__cta:active,
.cookie-banner__btn:active, .cw__cta:active, .error-404__btn:active, .quiz__opt:active {
transform: translateY(1px) scale(.985);
transition-duration: .06s;
}
/* --- 9. Reduce motion safe --- */
@media (prefers-reduced-motion: reduce) {
.hero__btn--primary::before, .nav__cta::before, .btn--primary::before,
.quiz__opt::after, .map-pin .map-pin__halo,
.hero__btn:active::after, .quiz__opt:active::after {
animation: none !important;
transition: none !important;
}
.btn:active, .hero__btn:active, .nav__cta:active, .bottom-bar__cta:active,
.cookie-banner__btn:active, .cw__cta:active, .error-404__btn:active, .quiz__opt:active {
transform: none;
}
}
/* =================================================================
=== PREMIUM POLISH PASS — softer typography, unified bullets ===
================================================================= */
/* Stat-cards: reduce weight & gold intensity (was too shouty) */
.stat-card__big {
font-weight: 400 !important;
font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
color: rgba(206, 178, 130, .78) !important;
}
.stat-card__label {
font-size: .8rem;
letter-spacing: .02em; /* .14em разваливало строчный текст на буквы */
opacity: .85;
}
/* Recommended pill — тихий люкс: subtle gold highlight + quiet badge */
.tariff-card__badge {
display: inline-block !important;
background: rgba(206, 178, 130, .12) !important;
color: var(--gold) !important;
border: 1px solid rgba(206, 178, 130, .5) !important;
font-weight: 500 !important;
letter-spacing: .12em !important; /* было .16em. !important тут обязателен: без него это раннее правило (строка 5380) всё равно перебьёт общее правило ярлыков-подписей в конце файла */
}
.tariff-card--recommended {
background: rgba(206, 178, 130, .12) !important;
border-color: rgba(206, 178, 130, .5) !important;
}
/* Unify all card bullet lists to use ✦ — Aman style */
.tariff-card__features li::before,
.pack-card__feat-list li::before,
.umra-list li::before,
.alula-features li::before,
.intent-card__list li::before {
content: '✦' !important;
color: rgba(206, 178, 130, .55) !important;
font-size: .75em !important;
}
/* Правило с !important удалено: оно перебивало и обычные отступы .umra-block,
и блог (там .blog-post__content .umra-block должен быть 28px 0 — статья
разъезжалась на 198px, а золотая плашка «оставить заявку» раздувалась
с 36px до 99px). Базовые отступы теперь заданы выше: 64px/96px по 24px с боков. */
/* Form submit: natural width, not stretched */
.umra-form-block button[type="submit"],
.contact-form button[type="submit"] {
width: auto !important;
align-self: center !important;
/* было 14px 36px !important — самая широкая кнопка сайта, на 10px шире
всех остальных. Общая кнопочная мера. !important сохранён: он тут
нужен, чтобы перебить растягивание кнопки формы во всю ширину. */
padding: var(--p-btn) !important;
}
/* Contact form labels: sentence case (not lowercase) */
.contact-form label > span {
text-transform: none !important;
font-size: .82rem;
opacity: .85;
}
/* Подвал, сноски: каждая сноска — своей строкой.
Было: три сноски склеивались точками « · » в один абзац, знаки ¹ ² ³
тонули внутри текста и найти нужную было нельзя. Правило-склейку снимаем.
Кегль, интерлиньяж и отступы между сносками уже заданы выше в блоке
«=== 5. FOOTNOTES в footer ===» — здесь остаётся только висячий знак:
¹ ² ³ выходят на поля, перенос строки выравнивается по тексту, а не под цифру. */
.site-footer__notes p {
padding-left: 1.1em;
text-indent: -1.1em;
}
/* Hide pulsing chat-online dot (set above to display:none — backup) */
.cw__bubble-dot { display: none !important; }
/* Quiz title: drop italic emphasis on "поездку" — already simpler now */
.quiz__title em {
font-style: italic;
color: var(--gold, #ceb282);
font-weight: 400;
}
/* About page — value cards softer */
.value-card h3 {
font-weight: 400 !important;
font-size: 1.05rem !important;
}
/* === Tariff duration line + common features block === */
.tariff-card__duration {
font-family: var(--font-b, 'Inter', sans-serif);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(206, 178, 130, .92);
margin: -.4rem 0 .4rem;
}
.tariffs-common {
margin-top: 4rem;
padding: 2.2rem 2rem;
background: rgba(206, 178, 130, .12);
border: 1px solid rgba(206, 178, 130, .12);
border-radius: var(--r-md);
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.tariffs-common__title {
font-family: 'Philosopher', serif;
font-weight: 400;
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
color: var(--gold, #ceb282);
margin: 0 0 1.2rem;
text-align: center;
}
.tariffs-common__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .7rem 2rem;
}
.tariffs-common__list li {
position: relative;
padding-left: 1.4rem;
font-size: .9rem;
line-height: 1.55;
color: rgba(245, 239, 228, .78);
}
.tariffs-common__list li::before {
content: '✦';
position: absolute;
left: 0;
color: rgba(206, 178, 130, .55);
font-size: .85em;
}
@media (max-width: 720px) {
/* убрано отдельное «телефонное» значение 25.6/20.8px: карточки на телефоне
держат ту же меру 32/24, панель тоже. Остаётся только отступ сверху. */
.tariffs-common { margin-top: 2.8rem; }
.tariffs-common__list { grid-template-columns: 1fr; gap: .6rem; }
}
/* ====================================================================
SEGMENT-WORLD: УМРА ДЛЯ СЕМЬИ (/services/umrah/family/)
Визуально-интерактивная посадочная. Все компоненты mobile-first.
==================================================================== */
/* Page watermark */
body.page-fam { background-image: radial-gradient(ellipse at top left, rgba(206,178,130,.025), transparent 42%); background-attachment: fixed; }
/* --- Clickable segment card (на странице /umrah/) --- */
.segment-card--link { display: block; text-decoration: none; color: inherit; cursor: pointer; position: relative; }
.segment-card__enter {
position: absolute; top: 1.4rem; right: 1.4rem;
color: var(--gold); font-size: 1.2rem; line-height: 1;
opacity: 0; transform: translateX(-6px);
transition: opacity .25s, transform .25s;
}
.segment-card--link:hover .segment-card__enter,
.segment-card--link:focus-visible .segment-card__enter { opacity: 1; transform: translateX(0); }
.segment-card--link:hover { border-color: var(--gold); }
@media (hover: none) { .segment-card__enter { opacity: .65; transform: none; } }
/* ============================================================
Umra hub — визуальный роутер по «мирам» сегментов
============================================================ */
.segments-grid--worlds { grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 620px) { .segments-grid--worlds { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; } }
@media (min-width: 1000px) { .segments-grid--worlds { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.umra-segments .umra-h2 { margin-bottom: 1rem; }
.umra-segments__lead { max-width: 640px; margin-bottom: 2.4rem; }
.segment-card--visual { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,.035); }
.segment-card--visual .segment-card__media {
position: relative; aspect-ratio: 4 / 3; width: 100%;
background: linear-gradient(135deg, rgba(206, 178, 130, .12), rgba(255,255,255,.02));
background-size: cover; background-position: center;
border-bottom: 1px solid rgba(255,255,255,.07);
display: flex; align-items: center; justify-content: center;
}
.segment-card__media:not(.segment-card__media--filled)::before {
content: ""; position: absolute; inset: 12px;
border: 1px dashed rgba(206, 178, 130, .50); border-radius: 8px;
}
.segment-card__ph {
position: relative; z-index: 1; font-family: var(--font-b); font-size: .8rem;
letter-spacing: .02em; color: rgba(206, 178, 130, .78); text-align: center;
padding: 0 1rem; max-width: 92%;
}
.segment-card__media--filled .segment-card__ph { display: none; }
.segment-card--visual .segment-card__body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.segment-card--visual .segment-card__body h3 { margin-bottom: .5rem; }
.segment-card--visual .segment-card__body p { margin: 0 0 1.1rem; }
.segment-card__go {
margin-top: auto; font-family: var(--font-b); font-weight: 600; font-size: .9rem;
color: var(--gold); letter-spacing: .02em; opacity: .9;
transition: transform .25s, opacity .25s; display: inline-block;
}
.segment-card--link:hover .segment-card__go { transform: translateX(4px); opacity: 1; }
/* ТЕЛЕФОН: роутер «С кем вы едете?» — карточка-строка вместо башни.
БЫЛО: пять вертикальных карточек по 422–444 точки, весь блок 2952 =
3,5 экрана телефона (390×844). На экран влезал ОДИН формат из шести —
человек выбирает вслепую, пролистывая четыре экрана.
СТАЛО: фото узкой плашкой слева, название и описание справа —
блок 1422, на первом экране видно четыре формата из шести.
Ничего не спрятано и не сокращено: у каждой карточки остались
и фото, и название, и описание целиком.
Порог 619 выбран не наугад: с 620 начинается сетка в две колонки
(строка 5567) — её и всё, что выше, правило не трогает.
Ширина фото — clamp(96px, 29%, 168px). Работает нижняя граница: на узком
телефоне (320) 29 % дали бы меньше 80, а 96 держат кадр читаемым.
Верхняя граница до 620 не срабатывает и стоит запасом. */
@media (max-width: 619px) {
.umra-segments__lead { margin-bottom: 1.5rem; }
.segments-grid--worlds { gap: .7rem; }
.segment-card--visual { flex-direction: row; align-items: stretch; }
.segment-card--visual .segment-card__media {
aspect-ratio: auto; flex: 0 0 clamp(96px, 29%, 168px);
border-bottom: 0; border-right: 1px solid rgba(255,255,255,.07);
}
.segment-card--visual .segment-card__body { padding: .95rem 1.05rem; justify-content: center; }
/* 1.1rem = 16,5px. На 1.15rem «Женская мини-группа» переносится
на вторую строку и карточка растёт со 150 до 179. */
.segment-card--visual .segment-card__body h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.segment-card--visual .segment-card__body h3::after { content: " \2192"; color: var(--gold); font-weight: 400; }
.segment-card--visual .segment-card__body p { margin: 0; }
/* Отдельная строка «Войти в мир →» стоила 38 точек в каждой из пяти
карточек. Вся карточка и так ссылка, а золотая стрелка переехала
к названию — сигнал «сюда можно войти» остался, строка исчезла. */
.segment-card--visual .segment-card__go { display: none; }
}
/* «Автор / Вы» — отдельная полоса-дверь */
.umra-author-band {
display: grid; grid-template-columns: 1fr; margin-top: 1.6rem;
text-decoration: none; color: inherit; border-radius: var(--r-md); overflow: hidden;
border: 1px solid rgba(206, 178, 130, .50);
background: linear-gradient(135deg, rgba(206, 178, 130, .12), rgba(255,255,255,.02));
transition: border-color .25s, transform .25s;
}
.umra-author-band:hover { border-color: var(--gold); transform: translateY(-3px); }
@media (min-width: 800px) { .umra-author-band { grid-template-columns: 38% 1fr; } }
.umra-author-band__media {
position: relative; min-height: 210px;
background: linear-gradient(135deg, rgba(206, 178, 130, .12), rgba(255,255,255,.02));
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
}
.umra-author-band__media::before { content:""; position:absolute; inset:14px; border:1px dashed rgba(206,178,130,.5); border-radius: 8px; }
.umra-author-band__ph { position: relative; z-index:1; font-family: var(--font-b); font-size:.82rem; color: rgb(206, 178, 130); text-align:center; padding:0 1.2rem; }
/* было 2.1rem 1.9rem = 33.6/30.4px. Приводим к общей карточной мере. */
.umra-author-band__body { padding: var(--p-card); display:flex; flex-direction:column; justify-content:center; }
.umra-author-band__eyebrow { font-family: var(--font-b); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-2,#b89865); margin-bottom:.7rem; }
.umra-author-band__title { font-family: var(--font-h,'Philosopher',serif); font-weight: 400; font-size: clamp(1.5rem,1.1rem + 1.4vw,2.1rem); color: var(--cream); margin:0 0 .8rem; }
.umra-author-band__text { color:#c2b698; font-size:.98rem; line-height:1.6; margin:0 0 1.2rem; max-width:62ch; }
.umra-author-band__cta { font-family: var(--font-b); font-weight:600; color: var(--gold); letter-spacing:.02em; transition: transform .25s; display:inline-block; }
.umra-author-band:hover .umra-author-band__cta { transform: translateX(4px); }
/* Заглушка «мира сегмента» */
.seg-stub__photo {
position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); margin: 0 auto 2rem; max-width: 720px;
background: linear-gradient(135deg, rgba(206, 178, 130, .12), rgba(255,255,255,.02));
display:flex; align-items:center; justify-content:center;
}
.seg-stub__photo::before { content:""; position:absolute; inset:14px; border:1px dashed rgba(206, 178, 130, .50); border-radius: 8px; }
.seg-stub__ph-label { position:relative; z-index:1; font-family:var(--font-b); font-size:.85rem; color:rgb(206, 178, 130); }
.seg-stub__back { color: var(--gold); text-decoration: none; font-family: var(--font-b); font-size:.9rem; }
.seg-stub__back:hover { text-decoration: underline; }
/* Кнопка «назад ко всем форматам» в hero мира-сегмента (центр. pill, без коллизии с промо-плашкой) */
.world-back {
display: flex; width: -moz-fit-content; width: fit-content; margin: 0 auto .8rem;
align-items: center; justify-content: center; gap: .45rem;
min-height: 44px; padding: 0;
font-family: var(--font-b); font-size: .8rem; letter-spacing: .02em;
color: rgba(245, 239, 228, .85); text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.75);
transition: color .3s ease;
}
/* Было: тёмная пилюля с золотой рамкой и размытием — над заголовком стояли
ДВЕ плашки подряд (ссылка «назад» и надстрочник). «Назад» — это навигация,
а не подпись: снимаем фон, рамку и блюр, оставляем тихую строку.
ДВА УСЛОВИЯ, БЕЗ КОТОРЫХ ЭТО ЛОМАЕТСЯ:
1) пилюля давала ровно 44 px высоты — палец попадал. Без фона строка
сжимается до 23 px, поэтому область нажатия держим min-height:44px
(правило «пальцу нужно 44px» уже принято в файле, ~строка 6998).
2) читаемость на светлых кадрах видео теперь держит не фон, а .85 кремового
плюс двойная тень — тот же приём, которым уже спасли .hero__meta
(см. комментарий на строке 2471: без подложки контраст падал до 1,07). */
.world-back__arrow { font-size: 1.05em; line-height: 1; transition: transform .3s ease; }
.world-back:hover { color: var(--gold); }
.world-back:hover .world-back__arrow { transform: translateX(-3px); }
/* padding остался от пилюли: фона больше нет, держать ему нечего.
Высоту под палец теперь держит min-height:44px в базовом правиле,
поэтому здесь padding можно обнулить без потери области нажатия. */
@media (max-width: 600px) { .world-back { font-size: .78rem; padding: 0; margin-bottom: 1.1rem; } }
/* ============================================================
МЕДИА-ЗАГЛУШКИ: типизированные слоты под материалы клиента
.mph — фото / видео / скрин отзыва / youtube. Помечают «что и куда».
============================================================ */
.mph {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .55rem; text-align: center; padding: 1.4rem 1.1rem; border-radius: var(--r-md);
background: linear-gradient(135deg, rgba(206, 178, 130, .12), rgba(255,255,255,.02));
color: rgba(245,239,228,.78); overflow: hidden;
}
.mph::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(206, 178, 130, .50); border-radius: 8px; pointer-events: none; }
.mph--ar-16x9 { aspect-ratio: 16 / 9; }
.mph--ar-4x3 { aspect-ratio: 4 / 3; }
.mph--ar-portrait { aspect-ratio: 3 / 4; }
.mph__icon { width: 34px; height: 34px; color: var(--gold); opacity: .85; }
.mph__icon svg { width: 100%; height: 100%; display: block; }
.mph__label { position: relative; font-family: var(--font-b); font-weight: 600; font-size: .92rem; letter-spacing: .01em; color: rgb(245, 239, 228); }
.mph__spec { position: relative; font-family: var(--font-b); font-size: 12px; line-height: 1.35; max-width: 22ch; color: rgba(206, 178, 130, .78); }
/* Встраиваемая типизированная метка внутри готового медиа-контейнера (карточка сегмента / полоса автора / стаб) — единый язык «что и куда» */
.mph-inline { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 0 1rem; max-width: 94%; }
.mph-inline .mph__icon { width: 30px; height: 30px; }
.mph-inline .mph__label { font-size: .85rem; }
.mph-inline .mph__spec { font-size: 12px; }
/* Заполненные медиа-контейнеры — прячем пунктирную рамку-заглушку */
.umra-author-band__media--filled::before, .seg-stub__photo--filled::before, .mph--filled::before { content: none; }
.umra-author-band__media--filled, .seg-stub__photo--filled, .mph--filled { background-size: cover; background-position: center; }
.mph--filled { padding: 0; border: 1px solid rgba(206, 178, 130, .25); background-color: rgba(0,0,0,.2); }
/* Локальное видео-отзыв в ячейке (mp4 с постером, нативные controls) — заполняет ячейку без кадрирования рамки */
.mph--video { padding: 0; overflow: hidden; background-color: #000; }
.mph--video .mph__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; border-radius: inherit; }
/* Сетки блока отзывов */
.reviews__sub { opacity: .75; max-width: 56ch; margin: 0 auto 2rem; }
.reviews-videos { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 0 auto 1.4rem; max-width: 880px; }
@media (min-width: 720px) { .reviews-videos { grid-template-columns: 1fr 1fr; } }
/* Скрины переписок — justified-by-height: реальные пропорции скриншота, без кадрирования, читаемо */
.reviews-shots { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; max-width: 880px; margin: 0 auto; }
.reviews-shots .mph { height: 460px; width: auto; max-width: 100%; }
.reviews-shots .mph--filled { background-size: contain; background-repeat: no-repeat; background-color: #fff; }
@media (max-width: 719px) { .reviews-shots .mph { height: auto; width: 100%; max-width: 360px; } }
/* Живые фото из поездок — justified-gallery: смешанные ориентации на равной высоте */
.reviews-photos { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; max-width: 880px; margin: 1.3rem auto 0; }
.reviews-photos .mph { height: 320px; width: auto; max-width: 100%; }
@media (max-width: 719px) { .reviews-photos .mph { height: auto; width: 100%; max-width: 440px; } }
/* Слот видео-отзыва (YouTube) */
.yt-slot { position: relative; aspect-ratio: 16 / 9; border: 0; cursor: default; }
.yt-slot--empty { cursor: default; }
.yt-slot__play { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill); background: rgba(206, 178, 130, .12); border: 1px solid rgba(206, 178, 130, .50); color: var(--gold); }
.yt-slot__play svg { width: 22px; height: 22px; margin-left: 3px; }
.yt-slot--filled { cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
background-size: cover; background-position: center; border-radius: var(--r-md); overflow: hidden; }
.yt-slot--filled::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.yt-slot--filled .yt-slot__play { position: relative; z-index: 1; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.85);
color: #fff; transition: transform .3s ease, background .3s ease; }
.yt-slot--filled:hover .yt-slot__play { transform: scale(1.08); background: var(--gold); border-color: var(--gold); color: var(--black); }
.yt-slot__cap { position: relative; z-index: 1; font-family: var(--font-b); font-size: .85rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); padding: 0 1rem; }
/* YouTube лайтбокс — ролик играет прямо на сайте */
.yt-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 5vw; }
.yt-modal.is-open { display: flex; }
.yt-modal__backdrop { position: absolute; inset: 0; background: rgba(10,8,6,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.yt-modal__inner { position: relative; z-index: 1; width: min(960px, 92vw); }
.yt-modal__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-md); overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.6); border: 1px solid rgba(206, 178, 130, .25); background: #000; }
.yt-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-modal__close { position: absolute; top: -3rem; right: 0; width: 2.4rem; height: 2.4rem; border-radius: var(--r-pill); cursor: pointer;
background: rgba(255,255,255,.10); border: 1px solid rgba(206,178,130,.5); color: var(--cream); font-size: 1.5rem; line-height: 1;
display: flex; align-items: center; justify-content: center; transition: border-color .3s ease, background .3s ease, color .3s ease; }
.yt-modal__close:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,255,255,.16); }
/* --- Hero --- */
.vsec--fam-hero .vsec__eyebrow { margin: 0 auto 1rem; }
.fam-hero__cta { margin-top: 1.7rem; }
/* --- Block 2: PROOF (200+ семей) --- */
.fam-proof { text-align: center; }
.fam-proof__counter { margin-bottom: 3rem; }
.fam-proof__num {
font-family: var(--font-h); font-weight: 400;
font-size: clamp(3.6rem, 8vw, 4.6rem); line-height: .9;
letter-spacing: -.03em;
background: linear-gradient(180deg, #ecd9af 0%, #b89865 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--gold);
}
.fam-proof__num::before { display: none; }
/* Одометр (анимация прокрутки) заменяет число на отдельные по цифрам.
Они наследуют прозрачную заливку от градиентного числа, но своего фона не имеют
→ цифры становились невидимыми. Возвращаем тот же градиент на каждую цифру и «+». */
.fam-proof__num .odo-reel > span,
.fam-proof__num .odo-sep {
background: linear-gradient(180deg, #ecd9af 0%, #b89865 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.fam-proof__label { font-family: var(--font-h); font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--cream); margin: .5rem 0 0; }
.fam-proof__sub { color: #a89a80; max-width: 560px; margin: 1rem auto 0; line-height: 1.6; }
.fam-pillars { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .fam-pillars { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.fam-pillar { padding: 32px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); text-align: left; }
.fam-pillar__t { font-family: var(--font-b); font-weight: 600; font-size: 1.05rem; color: var(--cream); margin: 0 0 .4rem; }
.fam-pillar__d { color: #a89a80; font-size: .9rem; line-height: 1.5; margin: 0; }
/* ====================================================================
/umrah/ — блок «Что такое индивидуальная Умра» (другой продукт)
reframe-строка + 3 принципа (Ваш темп / состав / маршрут)
==================================================================== */
.umra-ind__reframe {
font-family: var(--font-h, 'Philosopher', serif);
font-size: clamp(1.3rem, 1rem + 1.5vw, 1.95rem);
line-height: 1.4;
color: var(--cream, #f5efe4);
max-width: 880px;
margin: 2.4rem auto 0;
padding-top: 1.8rem;
text-align: center;
position: relative;
text-wrap: balance;
}
.umra-ind__reframe::before {
content: "";
display: block;
width: 48px; height: 2px;
background: var(--gold, #ceb282);
margin: 0 auto 1.6rem;
}
.umra-ind__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.8rem; }
@media (min-width: 768px) { .umra-ind__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.umra-ind__card {
padding: 32px 24px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: var(--r-md);
text-align: left;
}
.umra-ind__card-t {
font-family: var(--font-b, 'Inter', sans-serif);
font-weight: 600;
font-size: 1.08rem;
color: var(--cream, #f5efe4);
margin: 0 0 .55rem;
display: flex;
align-items: center;
gap: .55rem;
}
.umra-ind__card-t::before {
content: "";
width: 22px; height: 2px;
background: var(--gold, #ceb282);
flex: 0 0 auto;
}
.umra-ind__card-d { color: #a89a80; font-size: .92rem; line-height: 1.6; margin: 0; }
/* --- Block 3: WHY INDIVIDUAL (compare) --- */
.fam-why { max-width: 940px; margin: 0 auto; border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); overflow: hidden; }
.fam-why__head, .fam-why__row { display: grid; grid-template-columns: .85fr 1.1fr 1.25fr; }
.fam-why__head { background: rgba(255,255,255,.035); }
.fam-why__h { padding: 1rem 1.2rem; font-family: var(--font-b); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.fam-why__h--group { color: #a89a80; }
.fam-why__h--ind { color: var(--gold); }
.fam-why__row { border-top: 1px solid rgba(255,255,255,.06); }
.fam-why__aspect { padding: 1.1rem 1.2rem; font-family: var(--font-b); font-weight: 600; color: var(--cream); font-size: .92rem; display: flex; align-items: center; }
.fam-why__cell { padding: 1.1rem 1.2rem; font-size: .9rem; line-height: 1.55; display: flex; flex-direction: column; justify-content: center; }
.fam-why__cell--group { color: #a89a80; border-left: 1px solid rgba(255,255,255,.06); }
.fam-why__cell--ind { color: #f5efe4; border-left: 1px solid rgba(206,178,130,.25); background: rgba(206, 178, 130, .12); }
.fam-why__lbl { display: none; }
.fam-why__note { max-width: 760px; margin: 2rem auto 0; text-align: center; color: #a89a80; font-style: italic; font-family: var(--font-h); font-size: clamp(16px, 2.1vw, 20px); line-height: 1.6; }
@media (max-width: 720px) {
.fam-why__head { display: none; }
.fam-why__row { grid-template-columns: 1fr; }
.fam-why__aspect { background: rgba(255,255,255,.04); font-size: 1rem; padding: .9rem 1.1rem; }
.fam-why__cell { border-left: none; }
.fam-why__cell--ind { border-top: 1px solid rgba(206, 178, 130, .25); }
.fam-why__lbl { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .25rem; }
.fam-why__cell--group .fam-why__lbl { color: #a89a80; }
.fam-why__cell--ind .fam-why__lbl { color: var(--gold); }
}
/* ТЕЛЕФОН: сравнение остаётся в два столбца — как на компьютере.
Подписи колонок стоят один раз шапкой сверху, а не по два раза в каждой строке.
Ниже 360 точек работает прежняя стопка — там столбцы были бы слишком узкими. */
@media (min-width: 360px) and (max-width: 720px) {
.fam-why__head { display: grid; }
.fam-why__head, .fam-why__row { grid-template-columns: .8fr 1.2fr; }
.fam-why__aspect--head { display: none; }
.fam-why__h { padding: .55rem .85rem; font-size: 13px; letter-spacing: .06em; }
.fam-why__h--ind { background: rgba(206, 178, 130, .12); border-left: 1px solid rgba(206, 178, 130, .25); }
.fam-why__aspect { grid-column: 1 / -1; padding: .55rem .85rem; font-size: .95rem; }
.fam-why__cell { padding: .75rem .85rem; justify-content: flex-start; }
.fam-why__cell--ind { border-top: none; border-left: 1px solid rgba(206, 178, 130, .25); }
.fam-why__lbl { display: none; }
}
/* --- Block 3b: TWO PATHS (опц., соло: лично vs мини-группа) --- */
.fam-paths { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 940px; margin: 0 auto; }
@media (min-width: 820px) { .fam-paths { grid-template-columns: repeat(2, 1fr); } }
.fam-path { position: relative; display: flex; flex-direction: column; padding: 32px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); transition: transform .25s, border-color .25s, background .25s; }
.fam-path:hover { transform: translateY(-4px); border-color: rgba(206, 178, 130, .50); background: rgba(206, 178, 130, .12); }
.fam-path__tag { display: inline-block; width: fit-content; font-family: var(--font-b); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(206, 178, 130, .25); border-radius: var(--r-pill); padding: .32rem .9rem; margin-bottom: 1.1rem; }
.fam-path__t { font-family: var(--font-h); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--cream); margin: 0 0 .5rem; }
.fam-path__lead { font-family: var(--font-h); font-style: italic; color: var(--gold); font-size: 1.02rem; line-height: 1.5; margin: 0 0 1.4rem; }
.fam-path__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.fam-path__list li { position: relative; padding-left: 1.75rem; color: #f5efe4; font-size: .94rem; line-height: 1.5; }
.fam-path__list li::before { content: ''; position: absolute; left: 0; top: .35rem; width: 17px; height: 17px; border-radius: 50%; background: rgba(206, 178, 130, .12); border: 1px solid var(--gold); }
.fam-path__list li::after { content: '✓'; position: absolute; left: 4px; top: .08rem; color: var(--gold); font-size: 12px; font-weight: 700; }
.fam-path__for { margin: auto 0 0; padding-top: 1.15rem; border-top: 1px solid rgba(206, 178, 130, .12); color: #a89a80; font-size: .9rem; line-height: 1.5; }
.fam-path__for strong { color: var(--gold); font-weight: 600; }
@media (max-width: 720px) { .fam-path { padding: 24px; } }
/* --- Block 3c: ASSURANCE (опц., напр. Умра без махрама) --- */
.fam-assure { max-width: 760px; margin: 0 auto; text-align: center; padding: 48px 32px; background: rgba(206, 178, 130, .12); border: 1px solid rgba(206, 178, 130, .25); border-radius: var(--r-lg); }
.fam-assure .fam-tag { display: inline-block; }
.fam-assure .umra-h2 { margin-top: .9rem; }
.fam-assure .umra-lead { margin-left: auto; margin-right: auto; max-width: 640px; }
.fam-assure__note { margin: 1.5rem auto 0; max-width: 600px; padding-top: 1.3rem; border-top: 1px solid rgba(206, 178, 130, .12); font-size: .92rem; line-height: 1.7; color: #a89a80; font-style: italic; }
/* было .72rem 1.5rem = 11.5/24px и высота «как получится». Это главный
призыв блока «мы рядом», по роли — кнопка: даём кнопочную меру 14/26
и общую высоту 48px, как у .btn. Начертание оставляем прежним
(Philosopher, строчные) — тон блока тихий, ПРОПИСНЫЕ здесь были бы громко. */
.fam-assure__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.7rem; min-height: 48px; padding: var(--p-btn); font-family: var(--font-h); font-size: .92rem; letter-spacing: .01em; color: var(--gold); border: 1px solid rgba(206, 178, 130, .50); border-radius: var(--r-pill); transition: background .25s, border-color .25s, transform .25s; }
.fam-assure__cta:hover { background: rgba(206, 178, 130, .12); border-color: var(--gold); transform: translateY(-2px); }
@media (max-width: 720px) { .fam-assure { padding: 32px 24px; } }
/* --- Block 4: PAINS → SOLUTIONS (flip cards) --- */
.fam-pains { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) { .fam-pains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .fam-pains { grid-template-columns: repeat(3, 1fr); } }
.fam-pain { perspective: 1300px; min-height: 215px; cursor: pointer; }
.fam-pain:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r-md); }
.fam-pain__inner { position: relative; width: 100%; min-height: 215px; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
/* фокус только подсвечивает; переворот — по hover и по нажатию (класс is-flipped),
иначе Enter «не давал ничего»: карточка уже была перевёрнута самим фокусом */
.fam-pain:hover .fam-pain__inner,
.fam-pain.is-flipped .fam-pain__inner { transform: rotateY(180deg); }
.fam-pain__face {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center;
padding: 24px; border-radius: var(--r-md); /* было 1.7rem 1.6rem (27/26) — единственные такие числа на сайте. Берём ровный средний шаг шкалы 24px, а не карточные 32/24: обе стороны карточки стоят position:absolute; inset:0 внутри жёсткой высоты 215px, и лишние 8px сверху выдавят длинный ответ за край */
-webkit-backface-visibility: hidden; backface-visibility: hidden;
border: 1px solid rgba(255,255,255,.08);
}
.fam-pain__front { background: rgba(255,255,255,.035); }
.fam-pain__back { background: linear-gradient(160deg, rgba(206, 178, 130, .12), rgba(184,152,101,.07)); border-color: rgba(206, 178, 130, .50); transform: rotateY(180deg); }
.fam-pain__mark { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(206,178,130,.5); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-size: 1.2rem; margin-bottom: 1rem; }
.fam-pain__worry { font-family: var(--font-b); font-weight: 600; font-size: 1.12rem; color: var(--cream); line-height: 1.35; margin: 0 0 .8rem; }
.fam-pain__hint { font-size: .76rem; letter-spacing: .05em; color: var(--gold); opacity: .85; text-transform: uppercase; }
.fam-pain__sol { color: #f5efe4; font-size: .96rem; line-height: 1.55; margin: 0; }
@media (prefers-reduced-motion: reduce) { .fam-pain__inner { transition: none; } }
/* --- Block 5: INCLUDED (checklist «пол безопасности») --- */
.fam-tag { display: block; width: fit-content; font-family: var(--font-b); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(206, 178, 130, .25); border-radius: var(--r-pill); padding: .35rem .9rem; margin: 0 auto 1.2rem; }
.fam-incl { list-style: none; padding: 0; margin: 0 auto; max-width: 980px; display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 680px) { .fam-incl { grid-template-columns: repeat(2, 1fr); gap: .55rem 2.2rem; } }
.fam-incl__item { position: relative; padding: .7rem 0 .7rem 2rem; color: #f5efe4; font-size: .96rem; line-height: 1.55; border-bottom: 1px solid rgba(255,255,255,.05); }
.fam-incl__item::before { content: ''; position: absolute; left: 0; top: .82rem; width: 18px; height: 18px; border-radius: 50%; background: rgba(206, 178, 130, .12); border: 1px solid var(--gold); }
.fam-incl__item::after { content: '✓'; position: absolute; left: 4px; top: .52rem; color: var(--gold); font-size: .8rem; font-weight: 700; }
/* --- Block 6: OPTIONS («потолок») --- */
.fam-options { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .fam-options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fam-options { grid-template-columns: repeat(4, 1fr); } }
.fam-option { position: relative; padding: 32px 24px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); text-align: left; transition: transform .25s, border-color .25s, background .25s; }
.fam-option:hover { transform: translateY(-4px); border-color: rgba(206, 178, 130, .50); background: rgba(206, 178, 130, .12); }
.fam-option__tag { display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: .8; margin-bottom: .7rem; }
.fam-option__t { font-family: var(--font-b); font-weight: 600; font-size: 1.15rem; color: var(--cream); margin: 0 0 .5rem; }
.fam-option__d { color: #a89a80; font-size: .9rem; line-height: 1.5; margin: 0; }
/* --- Block 7: LOCATIONS --- */
.fam-loc { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 820px) { .fam-loc { grid-template-columns: repeat(3, 1fr); } }
.fam-loc-card { padding: 32px 24px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); }
.fam-loc-card__city { font-family: var(--font-h); font-size: 1.5rem; color: var(--gold); margin: 0 0 1rem; }
.fam-loc-card__list { list-style: none; padding: 0; margin: 0; }
.fam-loc-card__list li { position: relative; padding: .5rem 0 .5rem 1.3rem; color: #f5efe4; font-size: .92rem; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,.04); }
.fam-loc-card__list li:last-child { border-bottom: none; }
.fam-loc-card__list li::before { content: '·'; position: absolute; left: .35rem; top: .35rem; color: var(--gold); font-size: 1.3rem; line-height: 1; }
/* --- Block 8: GUIDE (split) --- */
.fam-guide { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .fam-guide { grid-template-columns: 1.3fr .7fr; gap: 3.5rem; } }
.fam-guide__text { text-align: left; }
.fam-guide__text .fam-tag { margin-left: 0; }
.fam-guide__lead { font-family: var(--font-h); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--gold); line-height: 1.5; margin: 0 0 1.5rem; }
.fam-guide__points { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.fam-guide__points li { position: relative; padding: .6rem 0 .6rem 1.8rem; color: #f5efe4; font-size: .98rem; line-height: 1.5; }
.fam-guide__points li::before { content: ''; position: absolute; left: 0; top: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.fam-guide__opts-title { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #a89a80; margin-bottom: .7rem; }
.fam-guide__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fam-guide__chip { font-size: .82rem; color: #f5efe4; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill); padding: .4rem .9rem; }
.fam-guide__visual { aspect-ratio: 1 / 1; border-radius: var(--r-md); background: radial-gradient(circle at 32% 30%, rgba(206, 178, 130, .12), rgba(255,255,255,.02)); border: 1px solid rgba(206,178,130,.25); display: flex; align-items: center; justify-content: center; }
.fam-guide__glyph { font-family: var(--font-h); font-size: clamp(5rem, 18vw, 9rem); color: rgba(206, 178, 130, .55); line-height: 1; }
/* --- Block 9: REVIEWS (placeholder slots под реальные материалы) --- */
.fam-rev-slots { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 960px; margin: 0 auto; }
@media (min-width: 760px) { .fam-rev-slots { grid-template-columns: repeat(3, 1fr); } }
.fam-rev-slot { aspect-ratio: 4 / 5; border-radius: var(--r-md); border: 1px dashed rgba(206, 178, 130, .25); background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); position: relative; overflow: hidden; }
.fam-rev-slot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(206, 178, 130, .12) 50%, transparent 70%); transform: translateX(-100%); animation: famShimmer 2.8s linear infinite; }
@keyframes famShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .fam-rev-slot::after { animation: none; } }
/* --- Block 12: FORM back-link --- */
.fam-back { display: block; text-align: center; margin: 2rem auto 0; color: #a89a80; font-size: .9rem; text-decoration: none; transition: color .2s; }
.fam-back:hover { color: var(--gold); }
/* ── Телефон: зона нажатия у ссылки «назад ко всем форматам» ────────────────
Было 342x21,9 — по ширине во всю колонку, а по высоте вдвое ниже нормы 44.
Это единственный путь назад со всех ШЕСТИ форматных страниц
(solo · women · family · couples · parents · author), и каждая из них есть
на четырёх языках — чиним раз, лечится в 24 местах.
Ширину не трогаем, добавляем только высоту. Ссылка блочная, поэтому
отступ честно раздвигает строку, а не наползает невидимой зоной на соседей.
Замер живьём 390x844, /services/umrah/women/: 21,9 -> 45,9,
высота страницы 17 851 -> 17 875 (+24 точки, 0,13 %).
Кнопка «или WhatsApp» стоит выше на 30 точек — зазор не съеден.
Ровно 11px давали 43,9 — мимо нормы, поэтому 12.
Ноутбук 1440: ссылка 26,2 без изменений. */
@media (max-width: 720px) {
.fam-back { padding-block: 12px; }
}
/* ====================================================================
ТИХИЙ ЛЮКС · слой косметической полировки (ПИЛОТ — обсуждаемый)
Палитра не трогается — она уже точна по брендбуку (стр. 22).
Четыре рычага: воздух · спокойная типографика · кино-скрим · шёпот декора.
Слой автономен: снимается одним блоком, ничего не ломая.
==================================================================== */
/* 1. ВОЗДУХ В ЧТЕНИИ — тело чуть просторнее, тоньше межбуквенно (брендбук дышит) */
body { line-height: 1.62; letter-spacing: .006em; }
/* 2. ТИШИНА ЗАГОЛОВКА — hero скромнее по кеглю, мягче тень, тише eyebrow */
.vsec--hero h1 {
font-size: clamp(2.4rem, 6.4vw, 4.6rem);
letter-spacing: -.005em;
line-height: 1.16;
text-shadow: 0 2px 22px rgba(0,0,0,.4);
}
.vsec--hero .hero__eyebrow {
letter-spacing: .14em;
opacity: .9;
font-size: clamp(14px, 1.6vw, 16px);
}
.hero__sub { color: rgb(245, 239, 228); }
/* 2b. ЛОКАЛЬНАЯ ПОДЛОЖКА ПОД HERO-ТЕКСТ — читаемость на светлых кадрах видео.
Мягкое радиальное затемнение строго ЗА текстом (заголовок + подзаголовок).
Видео и нижний «шов» в #282828 не трогаем: это только за буквами, по центру.
z-index:-1 внутри .hero__content (она z-index:2) → выше видео, ниже текста. */
.vsec--hero .hero__content { isolation: isolate; }
.vsec--hero .hero__content::before {
content: "";
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 142%; height: 178%;
z-index: -1;
pointer-events: none;
background: radial-gradient(ellipse 62% 52% at 50% 50%,
rgba(26, 20, 16,.62) 0%,
rgba(26, 20, 16,.54) 45%,
rgba(26, 20, 16,.30) 70%,
rgba(26, 20, 16,0) 88%);
}
@media (max-width: 640px) {
.vsec--hero .hero__content::before {
width: 128%; height: 156%;
background: radial-gradient(ellipse 70% 50% at 50% 50%,
rgba(26, 20, 16,.58) 0%,
rgba(26, 20, 16,.44) 48%,
rgba(26, 20, 16,0) 84%);
}
}
/* 3. КИНО-СКРИМ — единое тёплое затемнение: видео сидят в палитре,
низ глубже для читаемости белого текста (особенно .vsec--detail, текст внизу) */
.vsec__overlay {
background:
linear-gradient(180deg, rgba(40, 40, 40, .60) 0%, rgba(40, 40, 40, .60) 45%, rgba(40, 40, 40, .85) 100%),
linear-gradient(0deg, rgba(128,102,84,.05), rgba(40,40,40,0) 55%);
}
/* ЗАМЕНИТЬ строки 5956–5960 (это последнее правило для .vsec--detail .vsec__overlay,
дописывать копию ниже не надо — будет два правила про одно и то же).
Смысл: затемнение уходит туда, где реально лежит текст. Замерено в браузере
на 1100x680: надстрочник 31-37% высоты кадра, заголовок 41-56%, строка 62-67%,
кнопка 73-83%. Раньше на всей этой полосе вуаль была почти открыта (.35),
поэтому буквы падали на лица. Верх кадра при этом дышит легче прежнего
(.35 -> .26). Низ оставляем на .85 — ровно как сейчас: это уже подогнанное
значение стыка с тёмной секцией под видео, трогать его незачем.
Цвета не новые: тот же #282828 и тот же тёплый подмес. */
.vsec--detail .vsec__overlay {
background:
linear-gradient(180deg,
rgba(40, 40, 40, .26) 0%,
rgba(40, 40, 40, .30) 28%,
rgba(40, 40, 40, .52) 52%,
rgba(40, 40, 40, .74) 76%,
rgba(40, 40, 40, .85) 100%),
linear-gradient(0deg, rgba(128,102,84,.06), rgba(40,40,40,0) 55%);
}
/* 3b. КИНО-СКРИМ НА ГЛАВНОМ HERO И НА ВИДЕО ПЕРЕД QUIZ.
У этих секций «шовный» градиент: низ обязан гаснуть РОВНО в #282828, чтобы
видео бесшовно перетекало в следующую сплошную секцию (heart / quiz) — поэтому
общий тёплый скрим их не достаёт (тот градиент с !important сильнее).
Здесь греем и осветляем ВЕРХ (уходит сероватый налёт под навбаром, пейзаж
Аль-Улы дышит), а низ оставляем точным #282828 ради бесшовного стыка. */
.vsec--hero:has(+ .vsec--heart) .vsec__overlay {
background: linear-gradient(180deg,
rgba(40,40,40,0) 0%,
rgba(40,40,40,0) 76%,
rgba(40,40,40,.55) 88%,
rgba(40,40,40,1) 100%) !important;
}
.vsec:has(+ .vsec--quiz) .vsec__overlay {
background: linear-gradient(180deg,
rgba(40,40,40,.46) 0%,
rgba(40,40,40,.56) 55%,
rgba(40,40,40,1) 100%) !important;
}
/* 4. ШЁПОТ ДЕКОРА — «Центр притяжения» затихает, пульс Мекки медленнее (тише = премиальнее) */
@keyframes orbitFadeIn { to { opacity: .62; } }
.brand-orbit__halo { animation-duration: 5s; }
/* 5. ДИСЦИПЛИНА ШИРИНЫ — длинная строка устаёт; держим комфортную меру чтения.
Сайт уже дисциплинирован (оферта 760px, блог 672px, лиды 760–780px) — правим
два выпавших места: ответы FAQ (были 100 знаков в строке) и сноски в подвале
(одна строка на 188 знаков). Карточки FAQ остаются на всю ширину — сужается
только текст внутри, как в книге. */
.faq-item > p { max-width: 41rem; }
.site-footer__notes { max-width: 560px; }
/* 6. СПОКОЙНЫЙ MOTION — тихий люкс не пульсирует, а дышит. Гасим амплитуду двух
самых заметных бесконечных циклов: точка-Мекка на каждом hero перестаёт
«толкаться» (scale 1.6 → 1.18, мягкое тление вместо удара; длительность 5s
уже задана выше), а кольцо у чат-кнопки шепчет — реже и тише. Карту не
трогаем: там пульс локален и уместен. И честно уважаем системное «меньше
движения» — для таких людей навязчивые циклы замирают. */
@keyframes haloPulse {
0%, 100% { opacity: .5; transform: scale(1); }
50% { opacity: .82; transform: scale(1.18); }
}
@keyframes chatPulse {
0%, 100% { box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 0 rgba(206,178,130,.24); }
50% { box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 6px rgba(206,178,130,0); }
}
.bottom-bar__chat { animation-duration: 4.8s; }
@media (prefers-reduced-motion: reduce) {
.bottom-bar__chat,
.map-pin__pulse,
.map-pin--primary .map-pin__pulse { animation: none !important; }
}
/* 7. МЕЛОЧИ, КОТОРЫЕ ЧИТАЮТСЯ КАК КЛАСС — выделение текста в брендовом золоте
(а не системный синий) и типографика без «висячих» одиночных слов в конце
абзаца. text-wrap:pretty там, где браузер умеет; иначе просто игнорится. */
::selection { background: rgba(206, 178, 130, .35); }
::-moz-selection { background: rgba(206, 178, 130, .35); }
p, li, .detail-lead, .umra-lead, .hero__sub, .heart__lead { text-wrap: pretty; }
/* 8. РОВНЫЙ РЯД ОТЗЫВОВ — кадры переписок и видео встают одной мерой ШИРИНЫ,
а не одной высотой. Раньше высота была фикс. 460px, и широкий «ландшафтный»
скрин раздувался на пол-ряда (а сверхширокий — на весь ряд), придавливая
вертикальные. Теперь ширина у всех одна, высота следует пропорции кадра:
ландшафт просто ниже, портрет выше — никто не доминирует. Контент не
кадрируется и без белых полей (aspect-ratio задан по самому кадру). Медиа
не трогаем — меняется только раскладка. Только десктоп: на мобильном ряд
и так одноколоночный (правило ниже 720px остаётся как было). */
@media (min-width: 720px) {
.reviews-shots .mph {
height: auto;
width: min(264px, calc((100% - 2rem) / 3));
max-width: 264px;
}
}
/* 9. ПРОМО-ПИЛЮЛЯ — ТИШЕ СПОРИТ С ЦЕНТРОМ. По центру сверху пилюля при скролле
иногда пересекается с центрированным заголовком/hero. Делаем стекло чуть
плотнее и добавляем мягкую кино-подложку (тихий тёмный ореол-тень): то, что
проходит вплотную под пилюлей, деликатно гаснет, и она ясно читается верхним
слоем. Десктоп-нюанс — на мобильном пилюля сжата и не конфликтует. */
@media (min-width: 768px) {
.promo {
background: rgba(40, 40, 40, .85);
box-shadow: 0 8px 30px rgba(26, 20, 16, .45), 0 0 22px 10px rgba(26, 20, 16, .26);
}
}
/* 10. HERO-ПРУФ — тихая строка доверия под подзаголовком. Маленькая капсула
с золотой волосяной обводкой и матовым стеклом: цифра-доказательство
(«5000+ паломников… · безвиз…») читается спокойно, не споря с заголовком
и кнопками. Лёгкая золотая точка слева — деликатный знак «факт». Капсула
появляется только если задан ключ hero_proof (сейчас — RU). */
.hero__proof {
display: flex;
align-items: center;
justify-content: center;
gap: .55em;
width: fit-content;
max-width: 92%;
margin: 16px auto 0;
padding: 7px 16px;
font-family: var(--font-b, 'Inter', sans-serif);
font-size: clamp(13px, 1.4vw, 14px);
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
color: rgb(206, 178, 130);
background: rgba(26, 20, 16, .85);
border: 1px solid rgba(206, 178, 130, .50);
border-radius: var(--r-pill, 6.25rem);
-webkit-backdrop-filter: blur(6px) saturate(120%);
backdrop-filter: blur(6px) saturate(120%);
text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.hero__proof::before {
content: "";
flex: 0 0 auto;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold, #ceb282);
box-shadow: 0 0 6px rgba(206, 178, 130, .6);
}
@media (max-width: 640px) {
.hero__proof {
/* Кегль, разрядка и отступ на мобильном больше не переопределяем: они
приходят из общих токенов ярлыка. Раньше здесь стояли padding 6px 13px,
font-size 12px и letter-spacing .05em — восьмой отступ и седьмая
разрядка семейства, которые после введения системы всё равно перестали
применяться: медиа-запрос не добавляет специфичности, а общее правило
стоит ниже по файлу. Оставляем только то, что действительно про
мобильный, — отступ сверху. */
margin-top: 12px;
}
}
/* 11. ВОЗДУХ на главном hero — рыхлее вертикальный ритм + тихий proof (только главная) */
.vsec--hero .hero__wordmark { margin-bottom: 26px; }
/* Один шаг ритма первого экрана — 24px: H1 → подзаголовок → плашка.
text-wrap: balance выравнивает две строки подзаголовка по длине,
чтобы вторая не свисала коротким хвостом под центром. */
.vsec--hero .hero__sub { margin-top: 24px; text-wrap: balance; }
/* Строка доверия на главной раньше шла совсем без плашки прямо по движущемуся
видео — на светлом кадре 1.48:1. Возвращаем тихий шильдик: тёмная «пилюля»
не спорит с кадром, но текст читается на любом кадре. */
.vsec--hero .hero__proof {
/* Кегль, разрядка, отступ и радиус — из общих токенов ярлыка (конец файла).
Здесь остаётся только то, что нужно ИМЕННО на видео-кадре главной:
ритм сверху, тёмная подложка, читаемость поверх движущейся картинки.
Было: padding 7px 16px и letter-spacing .06em — оба перебивали общее
правило, потому что этот селектор специфичнее (0,2,0 против 0,1,0).
Подложка, золотая обводка и тень НЕ трогаются — плашка остаётся
читаемой на светлом кадре видео (это её единственная задача). */
margin-top: 24px;
background: rgba(26, 20, 16, .85);
border: 1px solid rgba(206, 178, 130, .50);
box-shadow: none;
text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.vsec--hero .hero__actions { margin-top: 48px; }
@media (max-width: 640px) {
.vsec--hero .hero__wordmark { margin-bottom: 18px; }
.vsec--hero .hero__sub { margin-top: 18px; }
.vsec--hero .hero__proof { margin-top: 18px; }
.vsec--hero .hero__actions { margin-top: 36px; }
}
/* ==================== /ТИХИЙ ЛЮКС ==================== */
/* === Component #1 — «Scroll-expand вид» ====================================
Кинокадр, который вырастает из ~0.82 в полный размер на скролле (desktop scrub
через GSAP, см. JS). На touch / reduced-motion / без JS — статичный кадр.
Тихий люкс: мягкая тень, скрим под подпись, золотой кикер. */
.sx { position: relative; background: var(--black); padding: clamp(34px, 7vh, 86px) 0; overflow: hidden; }
.sx__frame {
position: relative; width: min(1180px, 92vw); margin: 0 auto;
aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
transform-origin: center center; will-change: transform;
box-shadow: var(--sh-1);
background: #1a1410;
}
.sx__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); }
.sx__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 20, 16, .76) 2%, rgba(26, 20, 16, .12) 42%, rgba(26, 20, 16, 0) 68%); pointer-events: none; }
.sx__caption { position: absolute; left: 0; right: 0; bottom: clamp(18px, 5vh, 54px); padding: 0 7%; text-align: center; }
.sx__kicker { margin: 0 0 .5rem; color: var(--gold); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.sx__title { margin: 0; font-family: var(--font-h); color: var(--cream); font-weight: 400; line-height: 1.12; font-size: clamp(1.55rem, 4.4vw, 3.3rem); text-shadow: 0 2px 22px rgba(0, 0, 0, .5); }
@media (max-width: 640px) {
.sx__frame { width: 92vw; aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.sx__caption { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.sx__frame { transform: none !important; }
}
/* === /Component #1 ========================================================= */
/* === Component #3 — Бенто-сетка доказательств ============================== */
/* Только одобренные факты. Тёмные карточки + золото (Philosopher) + фото Аль-Уля.
Reveal через общий .gsap-reveal (IO + 8s fallback); reduced-motion гасит движение. */
.bento { padding: 96px 24px; }
@media (max-width: 720px) { .bento { padding: 64px 20px; } }
.bento__head { max-width: 1180px; margin: 0 auto clamp(26px, 4vh, 46px); text-align: center; }
.bento__eyebrow { margin: 0 0 .55rem; color: var(--gold); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.bento__title { margin: 0; font-family: var(--font-h); color: var(--cream); font-weight: 400; line-height: 1.12; font-size: clamp(1.6rem, 4.2vw, 3rem); }
.bento__grid {
max-width: var(--w-wide); margin: 0 auto;
display: grid; gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(128px, auto);
grid-template-areas:
"big big photo"
"five now photo"
"visa visa photo";
}
.bento__cell--big { grid-area: big; }
.bento__cell--photo { grid-area: photo; }
.bento__cell--five { grid-area: five; }
.bento__cell--now { grid-area: now; }
.bento__cell--visa { grid-area: visa; }
.bento__cell {
position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end;
gap: .5rem; padding: 24px;
background: linear-gradient(155deg, #231d16 0%, #1a1410 78%);
border: 1px solid var(--line); border-radius: var(--r-md);
}
.bento__num { font-family: var(--font-h); font-weight: 400; color: var(--gold); line-height: .98; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: .005em; }
.bento__label { color: var(--cream); opacity: .82; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.35; max-width: 26ch; }
/* Big stat — крупнее + мягкое золотое свечение в углу (тепло, не кричаще) */
.bento__cell--big { justify-content: center; }
.bento__cell--big .bento__num { font-size: clamp(3rem, 7vw, 5rem); }
.bento__cell--big .bento__label { font-size: clamp(14px, 1.6vw, 16px); opacity: .9; }
/* Золотое пятно на плитке «5 000+».
БЫЛО: у градиента ОБЕ точки одного цвета и одной прозрачности — поэтому
он рисовался не пятном, а прямоугольником с жёсткой кромкой. На телефоне
это видно как светлый квадрат в правом верхнем углу карточки.
Мягкую версию когда-то добавили, но заперли в @media (min-width: 721px),
и на телефоне она не работала. Ставим мягкий градиент В ОСНОВУ — цвет тот
же, фирменное золото, просто с настоящим затуханием к краям. */
.bento__cell--big::after {
content: ""; position: absolute; top: -40%; right: -20%;
width: 60%; height: 110%;
background: radial-gradient(circle at 72% 34%, rgba(206, 178, 130, .10), rgba(206, 178, 130, 0) 70%);
pointer-events: none;
}
/* Visa — акцентная плитка: лёгкий золотой тон (差別化, но сдержанно) */
.bento__cell--visa {
background: linear-gradient(155deg, rgba(206, 178, 130, .12) 0%, rgba(184,152,101,.06) 70%, #1a1410 100%);
border-color: #ceb28255;
}
/* Photo — портретная колонка справа; фото = «тепло», реальные поездки */
.bento__cell--photo { padding: 0; border-color: #ceb28233; }
/* Фото вертикальное (720×1280) и стояло обычной картинкой в потоке: своей
собственной высотой оно и задавало высоту ВСЕЙ сетки — соседние плитки
растягивались до 199–236 px при содержимом на 108–150 px, отсюда и
«полкарточки пустует».
Вынимаем картинку из потока (absolute): колонка с фото просто заполняет
ту высоту, которую набрали плитки, а не диктует её. */
.bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bento__photo-cap {
position: absolute; left: 16px; bottom: 14px;
color: var(--cream); font-family: var(--font-h); font-size: 1.06rem; letter-spacing: .02em;
text-shadow: 0 2px 14px rgba(0,0,0,.7);
padding-left: 14px;
}
.bento__photo-cap::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.bento__cell--photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(26, 20, 16,.62) 0%, rgba(26, 20, 16,0) 42%);
pointer-events: none;
}
/* Мягкий каскад появления плиток */
.bento__cell.gsap-reveal { transition-delay: .04s; }
.bento__cell--photo.gsap-reveal { transition-delay: .12s; }
.bento__cell--five.gsap-reveal { transition-delay: .18s; }
.bento__cell--now.gsap-reveal { transition-delay: .24s; }
.bento__cell--visa.gsap-reveal { transition-delay: .30s; }
/* Hover только на десктопе (тонкий lift, золочение рамки) */
@media (hover: hover) and (pointer: fine) {
.bento__cell { transition: border-color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.bento__cell:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--sh-1); }
.bento__cell--photo:hover .bento__img { transform: scale(1.04); }
.bento__img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
}
/* Mobile — 2 колонки: big и visa во всю ширину, photo сверху-вниз модерат. */
@media (max-width: 720px) {
.bento__grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(112px, auto);
grid-template-areas:
"big big"
"photo photo"
"five now"
"visa visa";
}
.bento__cell--photo { aspect-ratio: 4 / 3; }
/* в рамку 4:3 попадает нижняя часть кадра — человек целиком, а не шляпа и плечи */
/* Работает только вместе с правкой position: absolute у .bento__img — до неё
эта строка была мёртвой. Раньше картинка не помещалась в рамку 4:3
(её реальная высота была 592 px при рамке 223) и обрезалась рамкой сверху:
в кадре оставалась только верхняя часть снимка, и человеку срезало шляпу.
Сама object-position при этом ни на что не влияла — рамка и снимок были
почти одной пропорции, двигать было нечего.
Теперь картинка ровно по рамке, и опорную точку опускаем почти к низу:
человек попадает в кадр целиком. */
.bento__cell--photo .bento__img { object-position: center 82%; }
.bento__cell--big { aspect-ratio: auto; min-height: 150px; }
}
@media (max-width: 380px) {
.bento__grid { grid-template-columns: 1fr; grid-template-areas: "big" "photo" "five" "now" "visa"; }
.bento__cell--photo { aspect-ratio: 3 / 2; }
}
/* Reduced-motion: hover-lift и зум фото отключаем (reveal уже статичен) */
@media (prefers-reduced-motion: reduce) {
.bento__cell, .bento__img { transition: none !important; transform: none !important; }
}
/* === /Component #3 ========================================================= */
/* === Component #4 — Оживший маршрут на карте =============================== */
/* Сплошные «трассы» прочерчиваются из городов в Мекку при скролле карты в кадр.
pathLength=1 нормализует длину пути → один dash на весь путь, сдвиг
stroke-dashoffset 1→0 = эффект «рисования». Дашевые .map-route остаются как
фоновая текстура (их лёгкий routeDash-флоу не трогаем). */
.map-trace {
fill: none;
stroke-dasharray: 1;
stroke-dashoffset: 1;
opacity: 0;
pointer-events: none;
}
.map-svg.is-drawn .map-trace {
opacity: 1;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1.7s cubic-bezier(.45, 0, .2, 1),
opacity .5s ease;
transition-delay: var(--draw-delay, 0s);
}
/* Бегущие огни: группа гаснет, пока карта не в кадре — оживает вместе с трассами.
Гейтим opacity на уровне ГРУППЫ (SMIL анимирует opacity самих кружков, поэтому
на них CSS-opacity был бы перебит — а на родителе перемножается корректно). */
.map-dots { opacity: 0; transition: opacity .6s ease .3s; }
.map-svg.is-drawn .map-dots { opacity: 1; }
.map-dot { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
/* Статичная карта: трассы показаны полностью без прорисовки, огни скрыты.
!important — иначе .map-svg.is-drawn .map-trace (выше по специфичности)
вернул бы 1.7s-переход и нарушил reduced-motion. */
.map-trace { opacity: 1 !important; stroke-dashoffset: 0 !important; transition: none !important; }
.map-dots { display: none !important; }
}
/* === /Component #4 ========================================================= */
/* === Component #5 — Reveal-галерея «живые моменты» (/about/) ================= */
.rgal { padding: clamp(2rem,6vw,4.5rem) 0; }
.rgal__head { text-align:center; max-width:760px; margin:0 auto clamp(1.5rem,4vw,2.6rem); padding:0 1.2rem; }
.rgal__eyebrow { font-family:var(--font-b); letter-spacing:.22em; text-transform:uppercase; font-size:12px; color:var(--gold); margin:0 0 .7rem; }
.rgal__title { font-family:var(--font-h); font-weight:400; font-size:clamp(1.55rem,3.8vw,2.5rem); line-height:1.14; color:var(--cream); margin:0; }
.rgal__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.55rem,1.3vw,.95rem); max-width:1160px; margin:0 auto; padding:0 clamp(1rem,3vw,2rem); }
.rgal__item { position:relative; margin:0; border-radius: var(--r-md); overflow:hidden; aspect-ratio:4/5; background:#1a1410; }
.rgal__item img { width:100%; height:100%; object-fit:cover; display:block; }
/* Скрытое состояние ТОЛЬКО под html.js → без JS кадры видны сразу. */
html.js .rgal__item { opacity:0; clip-path:inset(0 0 100% 0 round 16px); transition:clip-path .95s cubic-bezier(.22,.61,.36,1), opacity .8s ease; transition-delay:var(--d,0s); will-change:clip-path,opacity; }
html.js .rgal__item img { transform:scale(1.12); transition:transform 1.3s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0s); }
html.js .rgal.rgal--in .rgal__item { opacity:1; clip-path:inset(0 0 0 0 round 16px); }
html.js .rgal.rgal--in .rgal__item img { transform:scale(1); }
@media (hover:hover) {
.rgal__item::after { content:""; position:absolute; inset:0; border-radius: var(--r-md); box-shadow:inset 0 0 0 1px rgba(206,178,130,0); transition:box-shadow .4s ease; pointer-events:none; }
.rgal__item:hover::after { box-shadow:inset 0 0 0 1px rgba(206,178,130,.5); }
html.js .rgal.rgal--in .rgal__item:hover img { transform:scale(1.05); }
}
@media (max-width:880px) { .rgal__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .rgal__grid { gap:.5rem; } .rgal__item { aspect-ratio:3/4; } }
@media (prefers-reduced-motion: reduce) {
html.js .rgal__item { opacity:1 !important; clip-path:none !important; transition:none !important; }
html.js .rgal__item img { transform:none !important; transition:none !important; }
}
/* === /Component #5 ========================================================= */
/* === Component #2 — Карусель отзывов «реальные материалы» ===================
Фильмстрип: видео-ролики + скрины переписок + живые фото в одном горизонтальном
scroll-snap треке на общей высоте, ширина слайда — по натуральному соотношению.
Без JS — нативный горизонтальный скролл (стрелки/точки появляются только с html.js). */
.rev-car { position: relative; --rev-h: clamp(300px, 46vh, 470px); max-width: 1120px; margin: 0 auto; }
.rev-car__viewport { position: relative; overflow: hidden; }
.rev-car__viewport:focus { outline: none; }
.rev-car__viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.rev-car__track {
display: flex; gap: clamp(.6rem, 1.4vw, 1rem);
overflow-x: auto; overflow-y: hidden;
/* scroll-snap для нативного свайпа на touch. БЕЗ scroll-behavior:smooth —
он конфликтует с mandatory-snap в Chrome (программный плавный скролл
отменяется снап-контроллером). Плавность даём через GSAP-твин scrollLeft. */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
padding: 2px clamp(1rem, 6vw, 3.4rem);
}
.rev-car__track::-webkit-scrollbar { display: none; }
.rev-car__slide { flex: 0 0 auto; height: var(--rev-h); scroll-snap-align: center; }
.rev-car__slide .mph { height: 100%; width: auto; max-width: 88vw; min-width: 0; border-radius: var(--r-md); margin: 0; }
.rev-car__slide--review .mph--filled { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fff; }
.rev-car__slide--photo .mph--filled { background-size: cover; background-color: rgba(0,0,0,.2); }
.rev-car__slide .mph--video { background: #000; }
.rev-car__slide .mph--video .mph__video { object-fit: cover; }
/* Навигация — стрелки (только desktop/hover) + точки (с JS). Без JS / когда контент
влезает целиком (.rev-car--static) — скрыты, остаётся чистый нативный скролл. */
.rev-car__nav {
position: absolute; top: calc(var(--rev-h) / 2); transform: translateY(-50%);
width: 42px; height: 42px; border: 0; padding: 0; border-radius: 50%; z-index: 3;
display: none; align-items: center; justify-content: center; cursor: pointer;
color: var(--cream); background: rgba(20,18,15,.6); border: 1px solid rgba(206, 178, 130, .50);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease, transform .3s ease;
}
.rev-car__nav svg { width: 20px; height: 20px; }
.rev-car__nav--prev { left: clamp(.1rem, 1vw, .5rem); }
.rev-car__nav--next { right: clamp(.1rem, 1vw, .5rem); }
.rev-car__nav:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.rev-car__nav:disabled { opacity: .32; pointer-events: none; }
.rev-car__dots { display: none; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(1rem, 2.4vw, 1.5rem); }
/* Вид точки прежний (8px), но невидимая зона касания — 32x32: раньше это было
единственное место сайта, реально нарушавшее обязательный стандарт по пальцу. */
.rev-car__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(206, 178, 130, .35); transition: width .35s cubic-bezier(.22,.61,.36,1), background .35s ease; }
.rev-car__dot::after { content: ''; position: absolute; inset: -12px; }
.rev-car__dot.is-active { width: 24px; border-radius: var(--r-xs); background: var(--gold); }
html.js .rev-car__dots { display: flex; }
html.js .rev-car--static .rev-car__dots { display: none; }
@media (hover: hover) {
html.js .rev-car:not(.rev-car--static) .rev-car__nav { display: flex; }
html.js .rev-car:not(.rev-car--static) .rev-car__track { cursor: grab; }
html.js .rev-car .rev-car__track--grab { cursor: grabbing; }
.rev-car__dot:hover { background: rgba(206,178,130,.6); }
}
@media (max-width: 680px) { .rev-car { --rev-h: clamp(260px, 60vw, 400px); } }
@media (prefers-reduced-motion: reduce) {
.rev-car__track { scroll-behavior: auto; }
.rev-car__dot, .rev-car__nav { transition: none; }
}
/* === /Component #2 ========================================================= */
/* ============================================================================
MOTION MAX — 12 кинетических эффектов (vanilla GSAP/CSS, без либ).
Все эффекты desktop-hover / non-touch и уважают prefers-reduced-motion.
DOM-узлы инжектятся из JS (motion-max IIFE), здесь только стили.
============================================================================ */
/* --- (1) Hero: золотое «сияние» (aurora) поверх пустыни --------------------- */
.hero-aurora{
position:absolute; inset:-12%;
z-index:1; pointer-events:none;
mix-blend-mode:screen; opacity:0;
transition:opacity 1.6s ease;
will-change:opacity;
}
html.js .vsec--hero .hero-aurora{ opacity:.85; }
.hero-aurora::before,
.hero-aurora::after{
content:""; position:absolute; border-radius:50%;
filter:blur(64px); will-change:transform;
}
.hero-aurora::before{
width:62vw; height:62vw; left:4%; top:-14%;
background:radial-gradient(circle, rgba(206, 178, 130, .60), rgba(206, 178, 130, .12) 62%);
animation:auroraA 22s ease-in-out infinite;
}
.hero-aurora::after{
width:54vw; height:54vw; right:0%; top:8%;
background:radial-gradient(circle, rgba(184,152,101,.45), rgba(184,152,101,0) 64%);
animation:auroraB 28s ease-in-out infinite;
}
@keyframes auroraA{
0%,100%{ transform:translate3d(0,0,0) scale(1); }
33%{ transform:translate3d(8vw,6vh,0) scale(1.18); }
66%{ transform:translate3d(-5vw,3vh,0) scale(.92); }
}
@keyframes auroraB{
0%,100%{ transform:translate3d(0,0,0) scale(1.05); }
40%{ transform:translate3d(-7vw,5vh,0) scale(.9); }
70%{ transform:translate3d(4vw,-4vh,0) scale(1.2); }
}
/* --- (2) Hero: свет за курсором (desktop) ----------------------------------- */
.hero-spot{
position:absolute; top:0; left:0;
width:520px; height:520px;
z-index:1; pointer-events:none; border-radius:50%;
background:radial-gradient(circle, rgba(206, 178, 130, .35), rgba(206, 178, 130, .12) 60%);
mix-blend-mode:screen;
opacity:0; transition:opacity .6s ease;
will-change:transform, opacity;
}
.vsec--hero.spot-on .hero-spot{ opacity:1; }
/* --- (6) Живые «круги» — центр притяжения в hero --------------------------- */
.live-circles{
position:absolute; inset:0; z-index:1;
pointer-events:none; display:grid; place-items:center;
opacity:0; transition:opacity 1.8s ease; mix-blend-mode:screen;
}
html.js .vsec--hero .live-circles{ opacity:.45; }
.live-circles svg{ width:min(118vh,1040px); height:min(118vh,1040px); max-width:150vw; }
.live-circles .lc-ring{ fill:none; stroke:rgba(206,178,130,.55); transform-box:fill-box; transform-origin:center; }
.live-circles .lc-spin{ animation:lcSpin 64s linear infinite; transform-box:fill-box; transform-origin:center; }
.live-circles .lc-spin-rev{ animation:lcSpin 96s linear infinite reverse; transform-box:fill-box; transform-origin:center; }
.live-circles .lc-breathe{ animation:lcBreathe 9s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes lcSpin{ to{ transform:rotate(360deg); } }
@keyframes lcBreathe{ 0%,100%{ transform:scale(.96); } 50%{ transform:scale(1.04); } }
/* --- (4) Живой заголовок: золотой shimmer-проблеск по буквам ---------------- */
.hero-title-words{ position:relative; }
html.js .hero-title-words.is-shimmer::after{
content:""; position:absolute; inset:-4% -8%;
pointer-events:none; z-index:3;
background:linear-gradient(105deg,
rgba(255,245,224,0) 38%,
rgba(255,245,224,.55) 50%,
rgba(255,245,224,0) 62%);
mix-blend-mode:screen;
transform:translateX(-130%);
animation:hwShine 1.4s cubic-bezier(.4,0,.2,1);
}
@keyframes hwShine{ to{ transform:translateX(130%); } }
/* --- (8) 3D-наклон карточек + glare ----------------------------------------- */
.has-tilt{ will-change:transform; transform:perspective(900px); }
.card-glare{
position:absolute; inset:0; border-radius:inherit; z-index:0;
pointer-events:none; opacity:0; transition:opacity .4s ease;
background:radial-gradient(420px circle at var(--glx,50%) var(--gly,0%),
rgba(255,245,224,.22), rgba(255,245,224,0) 55%);
}
.has-tilt:hover .card-glare{ opacity:1; }
/* --- (10) Жидкий ripple на золотых CTA + магнитный hero CTA ----------------- */
.btn--primary, .hero__btn--primary, .bottom-bar__cta, .promo-panel__btn{
position:relative; overflow:hidden;
}
.cta-ripple{
position:absolute; border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
transform:translate(-50%,-50%) scale(0); opacity:.7;
animation:ctaRipple .6s ease-out forwards;
}
@keyframes ctaRipple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }
/* --- (9) Цифры-«одометр»: реальные числа прокатываются на появлении -------- */
.odo{ display:inline-flex; align-items:flex-end; line-height:inherit; }
.odo-d{ position:relative; display:inline-block; overflow:hidden; vertical-align:bottom; }
.odo-reel{ display:flex; flex-direction:column; transform:translateY(0); }
.odo.is-rolling .odo-reel{ transition:transform 1.2s cubic-bezier(.16,.84,.34,1); }
.odo-reel > span{ display:block; text-align:center; }
.odo-sep{ display:inline-block; }
@media (prefers-reduced-motion: reduce){ .odo.is-rolling .odo-reel{ transition:none !important; } }
/* --- (11) Плавающий док (macOS-style), только desktop ----------------------- */
.gs-dock{
position:fixed; left:50%; bottom:18px;
transform:translateX(-50%) translateY(150%);
z-index:46; display:none; align-items:flex-end; gap:6px;
padding:8px 12px; border-radius: var(--r-lg);
background:rgba(26,20,16,.6);
-webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
border:1px solid rgba(206, 178, 130, .25);
box-shadow:0 18px 50px rgba(0,0,0,.5);
opacity:0; transition:opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.gs-dock.is-in{ opacity:1; transform:translateX(-50%) translateY(0); }
.gs-dock__item{
position:relative; width:44px; height:44px; flex:0 0 auto;
display:grid; place-items:center; border-radius: var(--r-md); /* было «ничейные» 8px. 16px — это радиус дока (--r-lg = 24px) минус его внутреннее поле (8px), поэтому подсветка иконки при наведении точно повторяет форму панели, а не спорит с ней */
color:var(--gold); text-decoration:none;
transform-origin:bottom center;
transition:transform .16s cubic-bezier(.22,.61,.36,1), background .25s ease, color .25s ease;
}
.gs-dock__item:hover{ background:rgba(206, 178, 130, .12); color:var(--cream); }
.gs-dock__item svg{ width:21px; height:21px; }
.gs-dock__tip{
position:absolute; bottom:calc(100% + 12px); left:50%;
transform:translateX(-50%) translateY(6px);
white-space:nowrap; font-family:var(--font-b); font-size:12px;
letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
background:rgb(26, 20, 16); border:1px solid rgba(206, 178, 130, .25);
padding:.34rem .58rem; border-radius:8px; opacity:0; pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.gs-dock__item:hover .gs-dock__tip{ opacity:1; transform:translateX(-50%) translateY(0); }
/* Нижний док убран. Те же 7 ссылок (главная, умра, сертификат, путешествия,
аль-уля, о бренде, контакты) уже лежат в «МЕНЮ», где их 9 (плюс «журнал»
и «вопросы»). Панель 370×62 висела по центру нижнего края (535–905 по
горизонтали, 740–802 по вертикали при 1440×820) и ложилась на строки
текста — в статье журнала и на главной. Чтобы вернуть — снять комментарий.
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
html.js .gs-dock{ display:flex; }
}
*/
/* --- (12) Переходы между страницами — нативный View Transitions API -------- */
/* Браузер сам плавно «перелистывает» страницу при переходе по ссылке: старая
уходит, новая мягко въезжает, а на миг между ними проступает тёплый золотой
фон — в тон бренду. Браузеры без поддержки просто открывают страницу
мгновенно, без анимации (никаких поломок). */
@view-transition { navigation: auto; }
::view-transition {
background: radial-gradient(120% 80% at 50% 100%, rgba(206, 178, 130, .12), #282828 60%);
}
::view-transition-old(root){ animation: gsVtOut .30s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation: gsVtIn .46s cubic-bezier(.22,.61,.36,1) both; }
@keyframes gsVtOut{ to { opacity:0; transform:translateY(-1.2vh) scale(.992); } }
@keyframes gsVtIn { from { opacity:0; transform:translateY(1.8vh) scale(1.006); } }
@media (prefers-reduced-motion: reduce){
::view-transition-old(root),
::view-transition-new(root){ animation-duration:1ms; transform:none; }
}
/* gold tint на load-curtain — вход совпадает по тону с выходом-wipe */
.curtain::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(100% 70% at 50% 100%, rgba(206, 178, 130, .12), rgba(206, 178, 130, .12) 55%);
}
/* --- (7) Песчаные частицы (canvas, fixed-overlay) --------------------------- */
.sand-fx{
position:fixed; inset:0; z-index:9; pointer-events:none;
opacity:0; transition:opacity 1s ease; mix-blend-mode:screen;
}
.sand-fx.is-on{ opacity:1; }
/* --- (5) Само-прорисовка «пути к Мекке» — вертикальный rail (scroll) -------- */
.route-rail{
position:fixed; left:max(12px,1.2vw); top:15vh; bottom:15vh; width:2px;
z-index:30; pointer-events:none; display:none;
}
.route-rail .rr-track{
position:absolute; inset:0;
background:repeating-linear-gradient(to bottom, rgba(206, 178, 130, .35) 0 2px, transparent 2px 11px);
}
.route-rail .rr-fill{
position:absolute; left:0; top:0; width:100%; height:0;
background:linear-gradient(to bottom, rgba(206, 178, 130, .12), var(--gold));
box-shadow:0 0 6px rgba(206,178,130,.5);
}
.route-rail .rr-dot{
position:absolute; left:50%; top:0; width:8px; height:8px;
margin:-4px 0 0 -4px; border-radius:50%; background:var(--gold);
box-shadow:0 0 9px rgba(206,178,130,.85);
}
@media (hover:hover) and (pointer:fine) and (min-width:1100px){
html.js .route-rail{ display:block; }
}
/* --- Reduced-motion / touch fallbacks (отключают всё движение) -------------- */
@media (prefers-reduced-motion: reduce){
.hero-aurora, .hero-aurora::before, .hero-aurora::after,
.live-circles, .live-circles *{ animation:none !important; }
.hero-spot{ display:none !important; }
.hero-title-words.is-shimmer::after{ display:none !important; }
.gs-dock, .sand-fx, .route-rail, .card-glare{ display:none !important; }
.cta-ripple{ display:none !important; }
}
/* === /MOTION MAX =========================================================== */
/* === Соц-витрина «живые каналы» — Instagram / YouTube / Telegram =============
Тот же визуальный язык, что у бенто-сетки (тёмный градиент, gold-рамка, r16,
мягкий lift на hover). 3 карточки: IG — мини-сетка реальных кадров, YouTube —
постер + золотая кнопка play, Telegram — фирменная панель со значком. */
.socials { padding: 96px 24px; }
@media (max-width: 720px) { .socials { padding: 64px 20px; } }
.socials__head { max-width: 1180px; margin: 0 auto clamp(24px, 4vh, 44px); text-align: center; }
.socials__eyebrow { margin: 0 0 .55rem; color: var(--gold); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.socials__title { margin: 0 0 .6rem; font-family: var(--font-h); color: var(--cream); font-weight: 400; line-height: 1.12; font-size: clamp(1.6rem, 4.2vw, 3rem); }
.socials__sub { margin: 0 auto; max-width: 46ch; color: var(--cream); opacity: .72; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.5; }
.socials__grid {
max-width: var(--w-wide); margin: 0 auto;
display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr);
}
.scard {
display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
color: var(--cream);
background: linear-gradient(155deg, #231d16 0%, #1a1410 78%);
border: 1px solid var(--line); border-radius: var(--r-md);
}
.scard__media { position: relative; aspect-ratio: 4 / 3; flex: 1 0 auto; overflow: hidden; display: block; background: #1a1410; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* YouTube — кадр 16:9 целиком виден (object-fit:contain), пустоту по краям заполняет
размытая копия того же кадра. Заголовок ролика не обрезается при любой высоте карточки. */
.scard__media--video .scard__media-blur { position: absolute; inset: 0; object-fit: cover; transform: scale(1.12); filter: blur(22px) brightness(.5); }
.scard__media--video .scard__media-fit { position: absolute; inset: 0; object-fit: contain; }
/* Instagram — мини-сетка 2×2 (legacy, оставлено как запас) */
.scard__media--grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.scard__media--grid img { min-width: 0; min-height: 0; }
/* Instagram — мок «лицевой страницы» профиля: аватар (лого) + статистика + имя + кадры.
Цифры реальные, аватар — фирменный лого @gosaudia. Сидит на фоне-градиенте карточки. */
.igpf { display: flex; flex-direction: column; gap: 11px; padding: clamp(16px,2vw,22px) clamp(16px,1.8vw,22px) 13px; }
.igpf__handle { font-family: var(--font-h); font-size: 1.12rem; color: var(--cream); line-height: 1; }
.igpf__top { display: flex; align-items: center; gap: clamp(14px,2.4vw,22px); }
.igpf__avatar { flex: none; width: 62px; height: 62px; border-radius: 50%; padding: 2px;
background: var(--black); border: 1.5px solid var(--gold); }
.igpf__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.igpf__stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); }
.igpf__stat { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.igpf__stat b { font-family: var(--font-h); font-weight: 400; font-size: clamp(16px, 2.1vw, 20px); color: var(--cream); line-height: 1.05; }
.igpf__stat i { font-style: normal; font-size: 12px; color: var(--cream); opacity: .58; }
.igpf__id { display: flex; flex-direction: column; gap: 1px; }
.igpf__name { font-size: .92rem; color: var(--cream); opacity: .92; }
.igpf__cat { font-size: .82rem; color: var(--gold); opacity: .85; }
.igpf__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 3px; }
.igpf__thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--r-xs); transition: transform .5s cubic-bezier(.22,.61,.36,1); }
/* у IG-карточки нет фото-медиа, поэтому отделяем нижнюю плашку тонкой линией */
.scard--ig .scard__bar { border-top: 1px solid var(--line); }
/* YouTube — постер + золотая кнопка play */
.scard__media--video::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(26, 20, 16,.5) 0%, rgba(26, 20, 16,0) 52%);
}
.scard__play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 62px; height: 62px; border-radius: 50%; z-index: 1;
display: grid; place-items: center;
background: rgba(26, 20, 16,.5); border: 1.5px solid var(--gold); color: var(--gold);
transition: transform .3s ease, background .3s ease, color .3s ease;
}
.scard__play svg { margin-left: 3px; }
/* Telegram — фирменная панель с крупным значком */
.scard__media--brand {
display: grid; place-items: center;
background:
radial-gradient(120% 120% at 50% 0%, rgba(206, 178, 130, .12) 0%, rgba(206, 178, 130, .12) 60%),
linear-gradient(155deg, #231d16 0%, #1a1410 100%);
}
.scard__brand-icon { color: var(--gold); opacity: .92; }
.scard__brand-icon svg { width: 66px; height: 66px; display: block; }
/* Telegram — реальное фото поста + заголовок поверх (скрим для читаемости) */
.scard__media--post::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(26, 20, 16,.85) 0%, rgba(26, 20, 16,.40) 38%, rgba(26, 20, 16,0) 66%);
}
.scard__quote {
position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
font-family: var(--font-h); font-size: 1rem; line-height: 1.3;
color: var(--cream); text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
/* Нижняя плашка карточки: значок + название + строка + стрелка */
.scard__bar { display: flex; align-items: center; gap: .8rem; margin-top: auto; padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px); }
.scard__icon { color: var(--gold); flex: none; display: grid; place-items: center; }
.scard__icon svg { width: 24px; height: 24px; display: block; }
.scard__txt { display: flex; flex-direction: column; min-width: 0; }
.scard__name { font-family: var(--font-h); font-size: 1.12rem; color: var(--cream); line-height: 1.1; }
.scard__line { font-size: .84rem; color: var(--cream); opacity: .62; line-height: 1.3; margin-top: .12rem; }
.scard__arrow { margin-left: auto; color: var(--gold); opacity: .7; flex: none; transition: transform .3s ease, opacity .3s ease; }
/* Мягкий каскад появления */
.scard.gsap-reveal { transition-delay: .04s; }
.scard--yt.gsap-reveal { transition-delay: .12s; }
.scard--tg.gsap-reveal { transition-delay: .20s; }
/* Hover — только desktop (lift + золочение рамки, как у бенто) */
@media (hover: hover) and (pointer: fine) {
.scard { transition: border-color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.scard:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--sh-1); }
.scard:hover .scard__arrow { transform: translateX(4px); opacity: 1; }
.scard__media img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.scard--yt:hover .scard__media-fit, .scard--tg:hover .scard__media img { transform: scale(1.045); }
.scard--ig:hover .igpf__thumbs img { transform: scale(1.05); }
.scard--yt:hover .scard__play { background: var(--gold); color: #1a1410; transform: translate(-50%,-50%) scale(1.06); }
}
/* Mobile — одна колонка, чуть ниже медиа */
@media (max-width: 820px) {
.socials__grid { grid-template-columns: 1fr; gap: 13px; max-width: 460px; }
.scard__media { aspect-ratio: 16 / 10; }
/* IG-сетка — квадрат: 4 квадратных кадра ложатся без обрезки (как в ленте) */
.scard__media--grid { aspect-ratio: 1 / 1; }
}
/* ==================================================================
АВТОЗАПОЛНЕНИЕ И СПИСКИ В ТЁМНОЙ ТЕМЕ
Раньше после автозаполнения браузера поля становились светло-голубыми,
а раскрытый