/* ============================================================
КЛУБНЫЙ ДОМ — luxury landing
Палитра, типографика, секции, анимации
============================================================ */
/* Скрыто визуально, доступно для скринридеров и поисковых роботов —
для единственного h1 на странице, когда дизайн не предусматривает
отдельный видимый заголовок (напр. hero-слайдер главной). */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Палитра бренда Aurum Fort (см. последние страницы макета):
золото #C09A50 ~10% · зелёный #4E6046 ~30% · крем #F6F1E7 ~60% · мягкий чёрный #34302A */
:root {
--graphite: #34302a;
--graphite-2: #3e3830;
--ink: #34302a;
--gold: #c09a50;
--gold-2: #9a7a3c;
--cream: #f6f1e7;
--cream-2: #f6f5f4;
/* исторические имена --navy/--navy-deep сохранены: на них завязаны 40+ правил.
Заказчик (правки от 21.07.2026, п. 7 и далее) перевёл все заголовки на фирменный синий. */
--navy: #1c4e89;
--navy-deep: #34302a;
--brand-green: #4e6046;
--beige: #d2cdca;
--grey: #8b8b8b;
--grey-light: #e7e7e7;
--white: #fff;
--serif: "Tenor Sans", system-ui, sans-serif;
--serif-soft: "Tenor Sans", system-ui, sans-serif;
--sans: "Tenor Sans", system-ui, sans-serif;
--body: "Montserrat", system-ui, sans-serif;
--marble: #f3f0eb;
--marble-bg: url("/assets/img/marble-bg.webp");
--container: 1280px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- ГРУЗИНСКАЯ ВЕРСИЯ (lang="ka") ----------
Tenor Sans и Montserrat не содержат грузинских глифов, поэтому под
грузинский подключена элегантная пара Noto Georgian: антиква с засечками
(Noto Serif Georgian) в роли display/serif — вместо Tenor Sans — и
гуманистический гротеск (Noto Sans Georgian) для основного текста —
вместо Montserrat. Переключение языка ставит lang="ka" на
(js/i18n.js), и эти переопределения меняют только шрифтовые переменные,
не трогая палитру, ритм и раскладку. Русский (lang="ru") — дефолт выше. */
html[lang="ka"] {
--serif: "Noto Serif Georgian", "Tenor Sans", system-ui, serif;
--serif-soft: "Noto Serif Georgian", "Tenor Sans", system-ui, serif;
--sans: "Noto Serif Georgian", "Tenor Sans", system-ui, serif;
--body: "Noto Sans Georgian", "Montserrat", system-ui, sans-serif;
}
/* В грузинском нет заглавных букв — uppercase не даёт эффекта, но широкий
трекинг на дисплейных начертаниях делает буквы разреженными и рыхлыми.
Поджимаем межбуквенный интервал у крупных грузинских заголовков. */
html[lang="ka"] .h2,
html[lang="ka"] .authors__title,
html[lang="ka"] .hero__slide-text,
html[lang="ka"] .arch-statement__title,
html[lang="ka"] .chapter-next__title {
letter-spacing: 0.005em;
}
/* Мелкие грузинские лейблы с большим трекингом читаются тяжело — смягчаем. */
html[lang="ka"] .eyebrow,
html[lang="ka"] .ph__label,
html[lang="ka"] .master__role,
html[lang="ka"] .author__role,
html[lang="ka"] .overlay-menu__primary a i {
letter-spacing: 0.14em;
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x только на body в iOS Safari не удерживает страницу — дублируем на html */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
font-family: var(--body);
color: var(--graphite);
background: var(--white);
line-height: 1.6;
font-weight: 300;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* `overflow-x: hidden` makes the root a scroll container in modern engines
and breaks descendants with position: sticky. `clip` keeps horizontal
bleed contained without disabling the sticky building sequence. */
@supports (overflow: clip) {
html,
body { overflow-x: clip; }
}
p { font-family: var(--body); font-weight: 300; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--gold); color: #fff; }
/* ---------- TYPOGRAPHY HELPERS ---------- */
.h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(2rem, 4.5vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.01em;
}
.eyebrow {
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-2);
font-weight: 600;
margin-bottom: 1.2rem;
}
.eyebrow--light { color: var(--gold); }
.lead {
font-size: clamp(1rem, 1.4vw, 1.18rem);
color: var(--grey);
max-width: 56ch;
margin-top: 1.4rem;
}
.lead--center { margin-left: auto; margin-right: auto; text-align: center; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
/* Страховка от горизонтального вылезания заголовков на узких экранах:
uppercase + serif + длинное слово («ПРОСТРАНСТВО», «ИНФРАСТРУКТУРА») на
~375-390px может быть шире контейнера — без переноса браузер не сжимает
слово и даёт горизонтальный скролл страницы. */
h1, h2, h3 { max-width: 100%; overflow-wrap: break-word; }
.section { padding: clamp(72px, 11vw, 160px) 0; position: relative; }
.section--dark { background: var(--graphite); color: var(--white); }
.section--dark .lead, .section--dark .grey { color: #9aa0a6; }
.section--cream { background: var(--cream); }
.section-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 6vw, 80px); }
/* ---------- ЗАГЛУШКА ПОД НЕДОСТАЮЩИЙ МАТЕРИАЛ ----------
Ставится там, где по макету нужен рендер/фото/видео, которых заказчик ещё не передал.
Заменить на ![]()
/