/* ============================================================
VISION TEAM GLOBAL — CORE.CSS · версия 2
Единое ядро оформления. Подключается первым.
Что изменилось против первой версии:
· типографика Vollkorn + Rubik (иврит подхватывается сам)
· кнопки в форме листа и растущей ветви
· бургер превращается в росток, меню растёт снизу вверх
· ствол страницы: растёт по мере прокрутки, распускает
лист посередине и приносит плод в конце
· живые эффекты: дыхание света, свечение под курсором,
параллакс, мягкие переходы между секциями
Философия форм: прямое → растущее, симметричное → живое.
============================================================ */
/* ------------------------------------------------------------
1. ТОКЕНЫ
------------------------------------------------------------ */
:root {
/* ТЁПЛАЯ ОСНОВА. Прежние значения были насыщенно-синими:
R−B от −22 до −41. Замер референсных карточек показал, что
в них тени почти нейтральные, а тепло живёт в полутонах.
Отсюда «холодное тёмное» на старой основе.
Контраст при переходе падает на сотые доли: золото
8.08 → 7.89, белый 19.39 → 18.94.
Откат — в комментариях справа. */
--navy-abyss: #0D1116; /* было #040E1A */
--navy: #101519; /* было #071525 */
--navy-raised:#171A1F; /* было #0D1E35 */
--navy-lift: #1E2227; /* было #112240 */
--navy-deep: #090C10; /* было #020C16 */
--gold: #C9A24B;
--gold-light: #E8C97A;
--gold-deep: #8A6E33;
--white: #FFFFFF;
--mist: #D8E0EA;
--muted: #97A6B8;
--faint: #6E7F93;
--gold-04: rgba(201,162,75,0.04);
--gold-08: rgba(201,162,75,0.08);
--gold-15: rgba(201,162,75,0.15);
--gold-25: rgba(201,162,75,0.25);
--gold-45: rgba(201,162,75,0.45);
/* Vollkorn — вариативный, тёплый, с живым рисунком засечек.
Rubik — единственная вариативная гарнитура с характером,
которая держит латиницу, кириллицу и иврит в одном рисунке.
Frank Ruhl Libre подхватывает ивритские заголовки. */
--font-display: 'Vollkorn', 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
--font-body: 'Rubik', 'Assistant', 'Helvetica Neue', Arial, sans-serif;
--fs-display: clamp(2.9rem, 6.6vw, 5.6rem);
--fs-h2: clamp(2.1rem, 4.6vw, 3.6rem);
--fs-h3: clamp(1.15rem, 1.9vw, 1.4rem);
--fs-lead: clamp(1.05rem, 1.4vw, 1.18rem);
--fs-body: 1.02rem;
--fs-small: 0.9rem;
--fs-label: 0.64rem;
--lh-tight: 1.14; /* воздуха между строк заголовка больше */
--lh-head: 1.22;
--lh-body: 1.8;
--space-section: clamp(4.5rem, 10vw, 10.5rem);
--space-block: clamp(2rem, 4vw, 3.5rem);
--gutter: clamp(1.25rem, 4vw, 3rem);
--container: 1180px;
--container-wide: 1360px;
--container-narrow: 780px;
--radius-sm: 7px;
--radius: 16px 14px 17px 15px;
--radius-lg: 26px 23px 27px 24px;
--radius-leaf: 3px 20px 3px 20px;
/* Форма карточки — тот же лист, что у кнопок, только крупнее.
Единая на всех страницах: раньше форм было пять. */
--radius-card: 4px 30px 4px 30px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur: 0.45s;
--nav-h: 68px;
}
/* ------------------------------------------------------------
2. RESET И БАЗА
------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-block-start: calc(var(--nav-h) + 1rem);
-webkit-text-size-adjust: 100%;
}
body {
background: var(--navy-abyss);
color: var(--mist);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400; /* 300 читался тяжело, особенно на телефоне */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: var(--radius-sm); }
.skip-link {
position: absolute; inset-inline-start: 1rem; top: -100px;
z-index: 200; background: var(--gold); color: var(--navy-abyss);
padding: 0.75rem 1.25rem; font-weight: 600; font-size: var(--fs-small);
transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------
3. ТИПОГРАФИКА
------------------------------------------------------------ */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 450; /* 600 давил массой, 400 тонковат на тёмном */
color: var(--white);
line-height: var(--lh-head);
text-wrap: balance;
}
h1, .t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.005em; }
h2, .t-h2 { font-size: var(--fs-h2); letter-spacing: -0.002em; }
h3, .t-h3 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
h1 em, h2 em, .t-display em, .t-h2 em { color: var(--gold); font-style: italic; font-weight: 550; }
p { max-width: 62ch; }
p + p { margin-block-start: 1.1em; }
/* Цвет через переменную, а не жёстким значением: иначе подмена
токенов в светлой зоне до него не доходит и текст остаётся
светлым на кремовом — 1.18 при норме 4.5. */
.t-lead { font-size: var(--fs-lead); line-height: 1.72; color: var(--mist); font-weight: 400; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--mist); }
.t-small { font-size: var(--fs-small); line-height: 1.7; color: var(--mist); }
.t-muted { color: var(--muted); }
.eyebrow {
display: inline-flex; align-items: center; gap: 0.75rem;
font-size: var(--fs-label); font-weight: 500;
letter-spacing: 0.26em; text-transform: uppercase;
color: var(--gold); margin-block-end: 1rem;
}
.eyebrow::before {
content: ''; display: block; inline-size: 26px; block-size: 1px;
background: linear-gradient(to right, transparent, var(--gold)); flex-shrink: 0;
}
.eyebrow--center { justify-content: center; }
.quote {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
font-style: italic; line-height: 1.45;
color: var(--gold-light);
border-inline-start: 2px solid var(--gold);
padding-inline-start: 1.5rem;
margin-block: 2rem; max-width: 34ch;
}
/* ------------------------------------------------------------
4. СЕТКА И СЕКЦИИ
------------------------------------------------------------ */
.section { padding-block: var(--space-section); padding-inline: var(--gutter); position: relative; }
.section--navy { background: var(--navy); }
.section--abyss { background: var(--navy-abyss); }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
/* Мягкий переход между секциями вместо резкой границы */
.section::before {
content: '';
position: absolute; inset-inline: 0; inset-block-start: 0;
block-size: 140px;
background: linear-gradient(to bottom, rgba(2,10,20,0.45), transparent);
pointer-events: none; opacity: 0.7; z-index: 0;
}
.section--seamless::before { display: none; }
.section > * { position: relative; z-index: 1; }
.container { max-width: var(--container); margin-inline: auto; width: 100%; }
.container--wide { max-width: var(--container-wide); }
.container--narrow{ max-width: var(--container-narrow); }
.stack > * + * { margin-block-start: var(--space-block); }
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--text-side { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.grid--side-text { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
/* ------------------------------------------------------------
5. ОРГАНИКА
------------------------------------------------------------ */
/* 5.1 Разделитель-ветвь. Три стадии сверху вниз по странице:
росток → ветвь с листьями → ветвь с плодами. */
/* Разделитель-ветвь оставлен в системе, но из потока страниц убран:
дерево теперь живёт сбоку. Использовать точечно и осознанно. */
.branch { display: flex; justify-content: center; margin-block: clamp(2rem, 4vw, 3rem); pointer-events: none; }
.branch--start { justify-content: flex-start; }
.branch svg { inline-size: clamp(88px, 11vw, 140px); block-size: auto; overflow: visible; }
.branch .stem, .branch .branch-twig {
fill: none; stroke: var(--gold); stroke-linecap: round;
}
.branch .stem { stroke-width: 1.8; opacity: 0.85; }
.branch .branch-twig { stroke-width: 1.3; opacity: 0.62; }
.branch .leaf { fill: var(--gold); stroke: none; opacity: 0.9; transform-box: fill-box; transform-origin: center; }
.branch .fruit { fill: var(--gold-light); stroke: none; opacity: 1; }
.js-motion .branch .stem, .js-motion .branch .branch-twig {
stroke-dasharray: var(--len, 220); stroke-dashoffset: var(--len, 220);
}
.js-motion .branch.is-visible .stem,
.js-motion .branch.is-visible .branch-twig {
transition: stroke-dashoffset 1.5s var(--ease); stroke-dashoffset: 0;
}
.js-motion .branch.is-visible .branch-twig { transition-delay: 0.45s; }
.js-motion .branch .leaf, .js-motion .branch .fruit { opacity: 0; transform: scale(0.2); }
.js-motion .branch.is-visible .leaf {
opacity: 0.9; transform: scale(1);
transition: opacity 0.8s var(--ease), transform 0.9s cubic-bezier(.34,1.4,.64,1);
}
.js-motion .branch.is-visible .fruit {
opacity: 1; transform: scale(1);
transition: opacity 0.9s var(--ease) 0.4s, transform 1s cubic-bezier(.34,1.56,.64,1) 0.4s;
}
.js-motion .branch.is-visible .leaf:nth-of-type(1) { transition-delay: 0.75s; }
.js-motion .branch.is-visible .leaf:nth-of-type(2) { transition-delay: 0.92s; }
.js-motion .branch.is-visible .leaf:nth-of-type(3) { transition-delay: 1.09s; }
.js-motion .branch.is-visible .leaf:nth-of-type(4) { transition-delay: 1.26s; }
.js-motion .branch.is-visible .leaf:nth-of-type(5) { transition-delay: 1.43s; }
.js-motion .branch.is-visible .leaf:nth-of-type(6) { transition-delay: 1.60s; }
/* 5.2 Дерево страницы. Живёт сбоку, не занимая места в потоке.
Ствол растёт по мере прокрутки, ветви отходят на своих
отметках, затем распускаются листья и наливаются плоды.
Заодно работает индикатором прогресса. */
.spine {
position: fixed;
inset-block-start: 50%;
/* Растущее дерево стоит у края экрана — так решено владельцем.
Сдвигаются не оно, а боковые ветви секций (раздел 21):
они подходят ближе к колонке и больше не спорят с деревом. */
inset-inline-start: clamp(6px, 1.6vw, 26px);
transform: translateY(-50%);
z-index: 20; pointer-events: none;
inline-size: clamp(30px, 4vw, 58px);
}
.spine svg { inline-size: 100%; block-size: auto; overflow: visible; }
.spine .t-stem, .spine .t-branch {
fill: none; stroke: var(--gold); stroke-linecap: round;
}
.spine .t-stem { stroke-width: 1.7; opacity: 0.9; }
.spine .t-branch { stroke-width: 1.2; opacity: 0; transition: opacity 0.7s var(--ease); }
.spine .t-branch.is-grown { opacity: 0.62; }
.spine .t-leaf {
fill: var(--gold); stroke: none; opacity: 0;
transform-box: fill-box; transform-origin: center; transform: scale(0.2);
transition: opacity 0.7s var(--ease), transform 0.8s cubic-bezier(.34,1.4,.64,1);
}
.spine .t-leaf.is-grown { opacity: 0.85; transform: scale(1); }
.spine .t-fruit {
fill: var(--gold-light); stroke: none; opacity: 0;
transform-box: fill-box; transform-origin: center; transform: scale(0.2);
transition: opacity 0.8s var(--ease), transform 0.9s cubic-bezier(.34,1.56,.64,1);
}
.spine .t-fruit.is-grown { opacity: 1; transform: scale(1); }
/* Земля у основания: лёгкий свет, как в знаке VTG */
.spine .t-ground { fill: var(--gold); opacity: 0.16; }
/* На телефоне остаётся только ствол у самого края */
@media (max-width: 640px) {
/* Было 16 px голого ствола у самого края: дерево формально
стояло, фактически его не было видно. Ветви и листья гасились
целиком. Возвращаем их — они и есть рост, ради которого
дерево на сайте. Ширина поднята до 26 px, ствол отодвинут
от кромки. Проверено check-overlap: с текстом не пересекается
ни на одной из семи страниц. */
.spine { inline-size: 26px; inset-inline-start: 4px; opacity: 0.7; }
.spine .t-branch { display: block; stroke-width: 1.6; }
.spine .t-leaf { display: block; }
.spine .t-fruit { display: none; }
}
/* 5.3 Короткий акцент под заголовком */
.rule {
inline-size: 48px; block-size: 2px;
background: linear-gradient(to right, var(--gold), var(--gold-deep));
border-radius: 2px; margin-block-end: 1.75rem;
transform-origin: left center;
}
.rule--center { margin-inline: auto; }
/* 5.4 Фон из корней */
.roots-bg { position: relative; isolation: isolate; }
.roots-bg::after {
content: ''; position: absolute; inset: 0; z-index: -1;
background: url('../img/roots.svg') center / clamp(520px, 60vw, 900px) no-repeat;
opacity: 0.045; pointer-events: none;
}
.roots-bg--tile::after { background-repeat: repeat; background-size: 620px; opacity: 0.03; }
/* 5.5 Растущий список */
.growth { position: relative; padding-inline-start: 2.75rem; }
.growth::before {
content: ''; position: absolute;
inset-block: 0.6rem 1.2rem; inset-inline-start: 7px;
inline-size: 1px;
background: linear-gradient(to top, var(--gold-deep), var(--gold), var(--gold-25));
transform-origin: bottom center;
}
.js-motion .growth::before { transform: scaleY(0); }
.js-motion .growth.is-visible::before { transform: scaleY(1); transition: transform 1.6s var(--ease); }
.growth-item { position: relative; padding-block: clamp(1.1rem, 2vw, 1.6rem); }
.growth-item + .growth-item { border-block-start: 1px solid var(--gold-08); }
.growth-item::before {
content: ''; position: absolute;
inset-block-start: calc(clamp(1.1rem, 2vw, 1.6rem) + 0.55em);
inset-inline-start: -2.75rem; margin-inline-start: 2px;
inline-size: 10px; block-size: 10px;
border-radius: 0 100% 0 100%;
transform: rotate(-35deg);
background: var(--gold);
box-shadow: 0 0 0 4px rgba(201,162,75,0.09);
}
.growth-item::after {
content: ''; position: absolute;
inset-block-start: calc(clamp(1.1rem, 2vw, 1.6rem) + 0.55em + 4px);
inset-inline-start: -1.9rem;
inline-size: 15px; block-size: 1px;
background: linear-gradient(to right, var(--gold), transparent);
}
.growth-num { font-family: var(--font-display); font-size: 0.95rem; color: var(--gold); letter-spacing: 0.1em; opacity: 0.65; display: block; margin-block-end: 0.25rem; }
.growth-title { font-size: 1.05rem; font-weight: 500; color: var(--white); margin-block-end: 0.4rem; }
.growth-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.7; max-width: 58ch; }
/* ------------------------------------------------------------
6. КНОПКИ
Главный призыв — форма листа. Второстепенное — растущая ветвь.
------------------------------------------------------------ */
.btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
min-block-size: 52px;
padding: 0.95rem 2.2rem;
font-family: var(--font-body);
font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.13em; text-transform: uppercase; text-align: center;
border-radius: var(--radius-leaf);
overflow: hidden;
transition: border-radius 0.55s var(--ease), background 0.4s var(--ease),
color 0.4s var(--ease), border-color 0.4s var(--ease),
transform 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
/* Блик-прожилка проходит по листу при наведении */
.btn::after {
content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 100%;
background: linear-gradient(105deg, transparent 46%, rgba(255,255,255,0.26) 50%, transparent 54%);
transform: translateX(-120%);
transition: transform 0.85s var(--ease);
pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn-gold { background: var(--gold); color: var(--navy-abyss); }
.btn-gold:hover {
background: var(--gold-light);
border-radius: 20px 3px 20px 3px;
transform: translateY(-2px);
box-shadow: 0 12px 34px rgba(201,162,75,0.28);
}
.btn-outline { border: 1px solid var(--gold-45); color: var(--gold-light); }
.btn-outline:hover {
border-color: var(--gold); background: rgba(201,162,75,0.07);
border-radius: 20px 3px 20px 3px; transform: translateY(-2px);
}
/* Ветвь: текст и растущая под ним линия с листом на конце */
.btn-ghost {
position: relative;
display: inline-flex; align-items: center; gap: 0.6rem;
min-block-size: 52px;
padding: 0.9rem 0.6rem 1rem 0.2rem;
font-family: var(--font-body);
font-size: 0.92rem; font-weight: 400; letter-spacing: 0.01em;
text-transform: none; color: var(--gold-light);
border-radius: 0; overflow: visible;
transition: color var(--dur) var(--ease);
}
.btn-ghost::after { display: none; }
.btn-ghost::before {
content: ''; position: absolute;
inset-block-end: 8px; inset-inline-start: 0;
inline-size: 100%; block-size: 1px;
background: linear-gradient(to right, var(--gold), var(--gold-deep));
transform: scaleX(0.42); transform-origin: left center;
transition: transform 0.7s var(--ease);
}
.btn-ghost:hover { color: var(--white); }
.btn-ghost:hover::before { transform: scaleX(1); }
.btn-ghost .leaf-tip {
position: absolute; inset-block-end: 5px; inset-inline-end: -3px;
inline-size: 9px; block-size: 9px;
border-radius: 0 100% 0 100%;
background: var(--gold);
transform: rotate(-35deg) scale(0.3);
opacity: 0;
transition: opacity 0.45s var(--ease) 0.4s, transform 0.5s cubic-bezier(.34,1.56,.64,1) 0.4s;
}
.btn-ghost:hover .leaf-tip { opacity: 1; transform: rotate(-35deg) scale(1); }
.btn .arrow, .btn-ghost .arrow { transition: transform 0.5s var(--ease); display: inline-block; }
.btn:hover .arrow, .btn-ghost:hover .arrow { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.btn-row--center { justify-content: center; }
/* ------------------------------------------------------------
7. КАРТОЧКИ
------------------------------------------------------------ */
.card {
position: relative;
background: var(--navy-raised);
border: 1px solid var(--gold-15);
border-radius: var(--radius);
padding: clamp(1.5rem, 2.6vw, 2.25rem);
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
overflow: hidden;
}
/* Мягкое свечение следует за курсором */
.card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(201,162,75,0.10), transparent 62%);
opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card:hover { transform: translateY(-4px); border-color: var(--gold-45); box-shadow: 0 16px 46px rgba(0,0,0,0.45); }
.card--rooted { border-inline-start: 2px solid var(--gold); }
.card--lift { background: linear-gradient(150deg, var(--navy-raised), var(--navy-lift)); border-color: var(--gold-25); }
.card-title { font-size: 1.05rem; font-weight: 500; color: var(--white); margin-block-end: 0.5rem; }
.card-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.7; }
.card-icon svg {
inline-size: 30px; block-size: 30px;
stroke: var(--gold); fill: none; stroke-width: 1.4;
stroke-linecap: round; stroke-linejoin: round;
margin-block-end: 1rem; opacity: 0.9;
}
.tag { display: inline-block; font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--gold-25); border-radius: var(--radius-sm); padding: 0.25rem 0.7rem; }
.badge { display: inline-block; background: var(--gold); color: var(--navy-abyss); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 2px 10px 2px 10px; }
.badge--outline { background: none; border: 1px solid var(--gold); color: var(--gold); }
/* ------------------------------------------------------------
7b. ЛЕНТА — набор карточек, который на узком экране
едет вбок вместо того, чтобы вытягиваться в столбик.
Ничего не прячет: край следующей карточки всегда виден.
------------------------------------------------------------ */
/* Шапка ленты: заголовок слева, подсказка о листании справа.
Подсказка стоит ДО ленты — внизу она читалась как обрывок. */
.rail-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
margin-block-end: 1.5rem;
}
.rail-swipe {
display: none; align-items: center; gap: 0.45rem;
font-family: var(--font-display); font-style: italic;
font-size: 0.85rem; letter-spacing: 0.04em; text-transform: none;
color: var(--muted); white-space: nowrap;
padding-block-end: 0.35rem;
}
.rail-swipe .arrow { color: var(--gold); animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge {
0%, 72%, 100% { transform: translateX(0); }
82% { transform: translateX(5px); }
}
/* Полоса под лентой показывает, где человек находится */
.rail-progress { display: none; block-size: 2px; background: var(--gold-08); border-radius: 2px; margin-block-start: 1.1rem; }
.rail-progress i {
display: block; block-size: 100%; border-radius: 2px;
inline-size: var(--seg, 33%);
background: linear-gradient(to right, var(--gold), var(--gold-deep));
transform: translateX(var(--pos, 0%));
transition: transform 0.12s linear;
}
@media (max-width: 900px) {
.rail.rail { /* двойной класс — чтобы перевесить стили страницы */
display: grid;
grid-template-columns: none; /* сбрасываем явные колонки страницы */
grid-template-rows: none;
grid-auto-flow: column;
/* ширина в единицах экрана: проценты давали карточкам
разный размер внутри прокручиваемого контейнера */
grid-auto-columns: min(82vw, 330px);
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-block: 0.5rem 0.25rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-inline: contain;
}
.rail.rail::-webkit-scrollbar { display: none; }
.rail.rail > * { scroll-snap-align: start; inline-size: auto; }
.rail-swipe, .rail-progress { display: flex; }
.rail-progress { display: block; }
/* каскад появления в ленте не нужен: карточки вне экрана */
.js-motion .rail.reveal-group > * { opacity: 1; transform: none; transition: none; }
}
/* ------------------------------------------------------------
7c. ПРОГРАММА — широкий блок для предложения, которое
стоит особняком и не сравнивается с остальными в ряду.
------------------------------------------------------------ */
.program {
position: relative;
display: grid; grid-template-columns: 1.5fr 0.9fr;
gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: center;
background: linear-gradient(150deg, var(--navy-raised), var(--navy-lift));
border: 1px solid var(--gold-25);
border-radius: var(--radius-lg);
padding: clamp(1.75rem, 4vw, 3.25rem);
overflow: hidden;
}
.program::before {
content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.program-aside {
border-inline-start: 1px solid var(--gold-15);
padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
}
.program-price { font-family: var(--font-display); font-size: clamp(2.6rem, 4.4vw, 3.6rem); font-weight: 400; color: var(--white); line-height: 1; }
.program-kicker { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-block: 0.6rem 1.5rem; }
.program-outcome { font-size: 0.95rem; line-height: 1.6; color: var(--gold-light); padding-block-start: 1.25rem; border-block-start: 1px solid var(--gold-15); margin-block-start: 1.5rem; }
.program-outcome { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }
.program-outcome span { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-block-end: 0.5rem; }
@media (max-width: 900px) {
.program { grid-template-columns: 1fr; }
.program-aside { border-inline-start: none; padding-inline-start: 0; border-block-start: 1px solid var(--gold-15); padding-block-start: 1.75rem; }
}
/* ------------------------------------------------------------
7c2. ПАКЕТЫ — КАРТОЧКИ-ЗАКЛАДКИ
Все варианты видны сразу, без прокрутки вбок.
Нажатие раскрывает описание. Без скрипта видны все
описания подряд — контент не теряется.
------------------------------------------------------------ */
.packs { margin-block-start: 2.5rem; }
.pack-tabs {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.pack-tab {
position: relative; text-align: start;
display: flex; flex-direction: column; gap: 0.4rem;
padding: clamp(0.9rem, 1.8vw, 1.25rem);
background: var(--navy-raised);
border: 1px solid var(--gold-15);
border-radius: var(--radius);
cursor: pointer;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.pack-tab:hover { border-color: var(--gold-45); transform: translateY(-2px); }
.pack-tab__name {
font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold);
}
.pack-tab__price {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; color: var(--white);
}
.pack-tab__gist { font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
/* ── ПАРА ЦЕН: БАЗОВАЯ И ЛЬГОТНАЯ ──
Льгота была видна только после нажатия на закладку: человек
читал $4 990 и уходил, не узнав про $2 900. Теперь обе цены
стоят рядом на самой закладке.
Порядок неизменен — базовая первой, льготная после.
Базовая набрана мелко и приглушённо: это условие входа,
а не крикливая скидка. Причина стоит под ценой словами,
без таймеров и «осталось N мест» — ограничение настоящее,
ему не нужна подпорка. */
.pack-price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pack-price__base {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(0.95rem, 1.4vw, 1.15rem); line-height: 1;
color: var(--muted); opacity: 0.75;
text-decoration-thickness: 1px;
text-decoration-color: var(--gold-45);
}
.pack-price__why {
font-size: 0.74rem; letter-spacing: 0.01em;
color: var(--gold-light); line-height: 1.4;
}
.zone-light .pack-price__why { color: #7D5F1E; }
.pack-aside__prices { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pack-aside__base {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1;
color: var(--muted); opacity: 0.75;
text-decoration-thickness: 1px; text-decoration-color: var(--gold-45);
}
/* Строчными, а не капителью: под ценой уже стоит капительная
подпись пакета, две заглавные строки подряд читались плитой.
И по смыслу это условие, а не ярлык скидки. */
.pack-aside__offer {
font-size: 0.8rem; letter-spacing: 0.01em;
color: var(--gold-light); margin-block-start: 0.5rem; line-height: 1.5;
}
.zone-light .pack-aside__offer { color: #7D5F1E; }
/* Основной вариант выделен всегда, ещё до нажатия */
.pack-tab--main {
background: linear-gradient(155deg, var(--navy-raised), var(--navy-lift));
border-color: var(--gold);
}
.pack-tab--main::after {
content: 'Основной'; position: absolute;
inset-block-start: -0.65rem; inset-inline-start: clamp(0.9rem, 1.8vw, 1.25rem);
background: var(--gold); color: var(--navy-abyss);
font-size: 0.54rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
padding: 0.25rem 0.6rem; border-radius: 2px 8px 2px 8px;
}
/* Выбранная закладка: золотая почка снизу указывает на описание */
.pack-tab[aria-selected="true"] {
border-color: var(--gold);
background: linear-gradient(155deg, var(--navy-lift), var(--navy-raised));
}
.pack-tab[aria-selected="true"]::before {
content: ''; position: absolute;
inset-block-end: -5px; inset-inline-start: 50%;
inline-size: 9px; block-size: 9px;
background: var(--gold); border-radius: 0 100% 0 100%;
transform: translateX(-50%) rotate(-35deg);
}
.pack-panel {
margin-block-start: 1.75rem;
background: linear-gradient(150deg, var(--navy-raised), var(--navy-lift));
border: 1px solid var(--gold-25);
border-radius: var(--radius-lg);
padding: clamp(1.6rem, 3.2vw, 2.5rem);
display: grid; grid-template-columns: 1.5fr 0.9fr;
gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.pack-panel + .pack-panel { margin-block-start: 1rem; }
.pack-body p { font-size: 0.98rem; line-height: 1.8; color: var(--mist); max-width: 56ch; }
.pack-body p + p { margin-block-start: 0.9rem; }
.pack-aside {
border-inline-start: 1px solid var(--gold-15);
padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);
}
.pack-aside__price { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 400; color: var(--white); line-height: 1; }
.pack-aside__kicker { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-block: 0.5rem 1.35rem; }
.pack-aside .btn { inline-size: 100%; }
.pack-outcome {
font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
line-height: 1.5; color: var(--gold-light);
margin-block-start: 1.35rem; padding-block-start: 1.15rem;
border-block-start: 1px solid var(--gold-15);
}
.pack-outcome span {
display: block; font-family: var(--font-body); font-style: normal;
font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--muted); margin-block-end: 0.45rem;
}
/* Скрываем невыбранные описания только после того,
как скрипт подтвердил работоспособность */
.packs.is-ready .pack-panel[hidden] { display: none; }
@media (max-width: 760px) {
.pack-tabs { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.pack-tab--main::after { inset-block-start: -0.6rem; font-size: 0.5rem; }
.pack-panel { grid-template-columns: 1fr; }
.pack-aside { border-inline-start: none; padding-inline-start: 0;
border-block-start: 1px solid var(--gold-15); padding-block-start: 1.5rem; }
}
/* ------------------------------------------------------------
7c3. БЛОК СООБЩЕСТВА
Пока нет реальных снимков встреч — работает графика.
Когда снимки появятся, достаточно добавить секции класс
.bg-meeting и два слоя: графика уйдёт, кадр встанет на её место.
------------------------------------------------------------ */
.community { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.community-art { position: relative; }
.community-art img { inline-size: 100%; block-size: auto; }
/* Побеги прорастают снизу вверх при появлении блока */
.js-motion .community-art .shoot,
.js-motion .community-art .bud { opacity: 0; }
.community-art.is-visible .shoot { animation: shoot-grow 1.4s var(--ease) forwards; }
.community-art.is-visible .bud { animation: bud-open 0.7s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes shoot-grow { from { opacity: 0; } to { opacity: 0.8; } }
@keyframes bud-open { from { opacity: 0; } to { opacity: 0.95; } }
.community-note {
font-family: var(--font-display); font-style: italic;
font-size: 1rem; color: var(--muted);
text-align: center; margin-block-start: 1rem;
}
/* Что здесь происходит: три строки на растущей линии */
.community-list { margin-block-start: 2rem; }
/* Когда появятся реальные кадры встреч — включается этот класс,
графика скрывается, подложка занимает её место */
/* Кадр 1600×914, а секция на десктопе почти квадратная: при cover
в кадр попадала только тёмная середина, подложка пропадала.
Сдвигаем точку кадрирования на световое пятно у пола и поднимаем
плотность. Вуаль развёрнута: у стандартной тонкий край справа,
а текст стоит именно справа. */
.bg-meeting > .bg-img {
background-image: url('../img/bg-meeting.jpg?v=5');
opacity: 0.95; background-position: 36% 58%;
}
.bg-meeting > .bg-veil {
background: linear-gradient(280deg,
rgba(13,17,22,0.9) 0%, rgba(13,17,22,0.62) 55%, rgba(13,17,22,0.3) 100%);
}
/* Дерево пряталось, потому что в этом блоке стояла фотография
встречи и вдвоём они спорили. В светлой версии кадра нет —
дерево возвращается и заполняет левую половину, которая иначе
пустует. В тёмной версии правило продолжает работать. */
.bg-meeting .community-art { display: none; }
.bg-meeting .community { grid-template-columns: 1fr; }
.zone-light .bg-meeting .community-art { display: block; }
.zone-light .bg-meeting .community { grid-template-columns: 1fr 1fr; }
/* На узком экране две колонки по 157 px не читаются: складываем
в одну, дерево сверху и меньше. */
@media (max-width: 900px) {
.zone-light .bg-meeting .community { grid-template-columns: 1fr; }
.zone-light .bg-meeting .community-art { max-inline-size: 320px; margin-inline: auto; }
}
/* На кадре свет лежит слева, тень — справа: замерено по пикселям,
левая половина 36 из 255, правая 22. Текст уходит в тень.
При включении иврита проверить: в RTL сторона зеркалится,
а кадр — нет, может потребоваться отражение самого кадра. */
.bg-meeting .community-text {
max-inline-size: 46rem;
margin-inline-start: auto;
}
@media (max-width: 900px) {
.community { grid-template-columns: 1fr; }
.community-art { max-inline-size: 460px; margin-inline: auto; }
}
/* Ссылка на первоисточник: состав и описание у производителя */
.source-link {
position: relative;
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.78rem; color: var(--gold);
padding-block: 0.55rem;
transition: color var(--dur) var(--ease);
}
.source-link::before {
content: ''; position: absolute;
inset-block-end: 4px; inset-inline-start: 0;
inline-size: 100%; block-size: 1px;
background: linear-gradient(to right, var(--gold-45), transparent);
transform: scaleX(0.5); transform-origin: left center;
transition: transform 0.6s var(--ease);
}
.source-link:hover { color: var(--gold-light); }
.source-link:hover::before { transform: scaleX(1); }
[dir="rtl"] .source-link::before { transform-origin: right center; }
/* ------------------------------------------------------------
7d. БЛОК ЧАСТЫХ ВОПРОСОВ
------------------------------------------------------------ */
/* Сетка сама подстраивается под число вопросов */
.know { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.know-item { border-block-start: 1px solid var(--gold-25); padding-block-start: 1.25rem; }
.know-q { font-size: 0.98rem; font-weight: 600; color: var(--white); margin-block-end: 0.6rem; }
.know-a { font-size: 0.9rem; line-height: 1.75; color: var(--muted); }
/* ------------------------------------------------------------
8. ШАПКА
------------------------------------------------------------ */
.nav {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
block-size: var(--nav-h);
padding-inline: var(--gutter);
background: rgba(13, 17, 22, 0.9);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border-block-end: 1px solid var(--gold-15);
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-scrolled { background: rgba(13, 17, 22, 0.985); border-color: var(--gold-25); }
.nav-logo { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; min-inline-size: 0; }
.nav-logo img { inline-size: 30px; block-size: auto; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; min-inline-size: 0; }
.nav-logo-name { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; color: var(--gold); white-space: nowrap; }
.nav-logo-sub { font-size: 0.52rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--faint); white-space: nowrap; margin-block-start: 3px; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
/* Меню: серифом и золотом. Отличает шапку VTG от делового
сансерифа второго сайта и держит книжную интонацию бренда.
Подчёркивание не линия, а растущая ветвь: тонкая жила
вырастает от начала слова и оставляет узелок на конце. */
.nav-links a {
position: relative;
font-family: var(--font-display);
font-size: 1rem; font-weight: 450; letter-spacing: 0.015em;
color: var(--gold); padding-block: 0.6rem; /* 45% золота давало контраст 2.4:1 — ниже нормы */
transition: color var(--dur) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-light); }
.nav-links a::after {
content: ''; position: absolute; inset-block-end: 2px; inset-inline-start: 0;
inline-size: 100%; block-size: 1px;
background: linear-gradient(to right, var(--gold), var(--gold-45));
transform: scaleX(0); transform-origin: left center;
transition: transform 0.5s var(--ease);
}
.nav-links a::before {
content: ''; position: absolute; inset-block-end: 0px;
inset-inline-end: -1px; inline-size: 4px; block-size: 4px;
border-radius: 50%; background: var(--gold);
opacity: 0; transform: scale(0.4);
transition: opacity 0.45s var(--ease) 0.18s, transform 0.45s var(--ease) 0.18s;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:hover::before,
.nav-links a[aria-current="page"]::before { opacity: 1; transform: scale(1); }
/* Меню проявляется снизу вверх, одно звено за другим — как росток */
.nav-links a { animation: nav-grow 0.7s var(--ease) both; }
.nav-links a:nth-child(1) { animation-delay: 0.10s; }
.nav-links a:nth-child(2) { animation-delay: 0.18s; }
.nav-links a:nth-child(3) { animation-delay: 0.26s; }
.nav-links a:nth-child(4) { animation-delay: 0.34s; }
@keyframes nav-grow { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.nav-right { display: flex; align-items: center; gap: 0.8rem; min-inline-size: 0; }
.nav-cta {
background: var(--gold); color: var(--navy-abyss);
font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
padding: 0.75rem 1.3rem; min-block-size: 42px;
display: inline-flex; align-items: center; white-space: nowrap;
border-radius: 2px 14px 2px 14px;
transition: background var(--dur) var(--ease), border-radius 0.5s var(--ease);
}
.nav-cta:hover { background: var(--gold-light); border-radius: 14px 2px 14px 2px; }
.nav-cta-short { display: none; }
/* ------------------------------------------------------------
8b. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ
Три языка подряд, у активного под буквами золотой лист.
Логические свойства зеркалят его в ивритской версии.
------------------------------------------------------------ */
.lang {
display: inline-flex; align-items: center; gap: 0.1rem;
padding-inline-end: 0.7rem; margin-inline-end: 0.1rem;
border-inline-end: 1px solid var(--gold-15);
}
.lang a {
position: relative;
font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em;
color: var(--faint);
padding: 0.6rem 0.45rem 0.75rem;
min-inline-size: 30px; text-align: center;
transition: color var(--dur) var(--ease);
}
.lang a:hover { color: var(--gold-light); }
.lang a[aria-current="true"] { color: var(--gold); }
/* Точка-плод под активной меткой снята: она конфликтовала
с разделителями (те тоже ::before) и висела крупинкой
под строкой. Активный язык виден цветом и насыщенностью. */
.lang [lang="he"] { font-size: 0.78rem; }
/* ── ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ · вариант А ──
Три метки в строку, разделённые золотой точкой: РУС · עב · EN.
Ни глобуса, ни выпадающего списка — только типографика.
Активный тёмным золотом, остальные приглушены. При наведении
под меткой прорастает волосяная линия снизу вверх, как
у остальных ссылок сайта.
Область касания 44 px по высоте: переключатель нажимают
один раз, и промахнуться при этом нельзя.
ВНИМАНИЕ: пока папок /en/ и /he/ нет, ссылки ведут в 404.
Строка ниже возвращает скрытие на время, если понадобится:
.lang { display: none !important; } */
.lang { display: inline-flex; }
.lang a {
min-block-size: 44px; display: inline-flex; align-items: center;
justify-content: center; padding-block: 0; padding-inline: 0.5rem;
font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
}
/* Разделитель — золотая точка между метками, а не рамка */
.lang a + a::before {
content: ''; position: absolute; inset-inline-start: -1px; inset-block-start: 50%;
inline-size: 3px; block-size: 3px; border-radius: 50%;
background: var(--gold-45); transform: translateY(-50%);
}
/* Волосяная линия прорастает снизу вверх */
.lang a::after {
content: ''; position: absolute; inset-block-end: 8px;
inset-inline-start: 0.5rem; inline-size: calc(100% - 1rem);
block-size: 1px; background: var(--gold); transform: scaleY(0);
transform-origin: bottom; opacity: 0;
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.lang a:hover::after, .lang a:focus-visible::after { transform: scaleY(1); opacity: 0.7; }
.zone-light .lang a { color: #4A5A72; }
.zone-light .lang a:hover { color: #0A1A33; }
.zone-light .lang a[aria-current="true"] { color: #7D5F1E; font-weight: 500; }
.lang [lang="he"] { font-size: 0.82rem; letter-spacing: 0; }
@media (max-width: 900px) {
/* В шапке телефона места нет: переключатель живёт в меню,
метки крупнее и шире, чтобы попадать пальцем. */
.nav-actions > .lang { display: none; }
.nav-mobile .lang { display: flex; gap: 0.25rem; margin-block-start: 1.5rem;
padding-block-start: 1.25rem; border-block-start: 1px solid var(--gold-15);
border-inline-end: none; padding-inline-end: 0; }
.nav-mobile .lang a { font-size: 0.82rem; padding-inline: 0.9rem; min-block-size: 48px; }
}
/* ------------------------------------------------------------
8c. КНОПКА МЕНЮ — две ветви и почка
Две линии вместо трёх, рядом золотая почка листа.
В открытом виде почка сворачивается, линии сходятся
в обычный крестик: бренд виден, понятность не страдает.
------------------------------------------------------------ */
.nav-burger {
display: none; position: relative;
inline-size: 48px; block-size: 48px;
flex-direction: column; align-items: flex-end; justify-content: center; gap: 9px;
flex-shrink: 0;
}
.nav-burger span {
display: block; block-size: 1.6px;
background: var(--gold); border-radius: 2px;
transition: transform 0.45s var(--ease), inline-size 0.4s var(--ease);
}
.nav-burger span:nth-child(1) { inline-size: 24px; }
.nav-burger span:nth-child(2) { inline-size: 15px; }
.nav-burger .bud {
position: absolute; inset-inline-start: 6px; inset-block-end: 11px;
inline-size: 8px; block-size: 8px;
background: var(--gold-light);
border-radius: 0 100% 0 100%;
transform: rotate(-35deg);
transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.35s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { inline-size: 22px; transform: translateY(5.3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { inline-size: 22px; transform: translateY(-5.3px) rotate(-45deg); }
.nav-burger[aria-expanded="true"] .bud { opacity: 0; transform: rotate(-35deg) scale(0.3); }
[dir="rtl"] .nav-burger .bud { inset-inline-start: auto; inset-inline-end: 6px; transform: rotate(35deg); }
[dir="rtl"] .nav-burger[aria-expanded="true"] .bud { transform: rotate(35deg) scale(0.3); }
/* ------------------------------------------------------------
8d. МОБИЛЬНОЕ МЕНЮ — РАСТЁТ СНИЗУ ВВЕРХ
------------------------------------------------------------ */
.nav-mobile {
position: fixed;
inset-block-start: var(--nav-h); inset-block-end: 0; inset-inline: 0;
z-index: 99;
background: linear-gradient(180deg, rgba(13,17,22,0.985), rgba(16,21,25,0.99));
backdrop-filter: blur(22px);
padding: clamp(1.25rem, 5vw, 2.25rem) var(--gutter) 1.75rem;
display: none; flex-direction: column; overflow-y: auto;
}
.nav-mobile::after {
content: ''; position: absolute; inset: 0; z-index: -1;
background: url('../img/roots.svg') center bottom / 135% no-repeat;
opacity: 0.06; pointer-events: none;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile-list { position: relative; padding-inline-start: 2.25rem; }
.nav-mobile-list::before {
content: ''; position: absolute;
inset-block: 1rem 1.2rem; inset-inline-start: 6px;
inline-size: 1px;
background: linear-gradient(to top, var(--gold), var(--gold-25));
transform: scaleY(0); transform-origin: bottom center;
transition: transform 0.9s var(--ease);
}
.nav-mobile.is-open .nav-mobile-list::before { transform: scaleY(1); }
.nav-mobile-list a {
position: relative; display: flex; align-items: center;
min-block-size: 56px;
font-size: 1.15rem; font-weight: 400; color: var(--mist);
border-block-end: 1px solid var(--gold-08);
opacity: 0; transform: translateY(16px);
transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.3s var(--ease);
}
.nav-mobile-list a:last-of-type { border-block-end: none; }
.nav-mobile-list a::before {
content: ''; position: absolute;
inset-inline-start: -2.25rem; margin-inline-start: 2px;
inline-size: 9px; block-size: 9px;
background: var(--gold); border-radius: 0 100% 0 100%;
transform: rotate(-35deg); opacity: 0.85;
}
.nav-mobile-list a::after {
content: ''; position: absolute; inset-inline-start: -1.5rem;
inline-size: 14px; block-size: 1px;
background: linear-gradient(to right, var(--gold), transparent);
}
.nav-mobile-list a:hover, .nav-mobile-list a:focus-visible { color: var(--gold-light); }
.nav-mobile.is-open .nav-mobile-list a { opacity: 1; transform: none; }
.nav-mobile.is-open .nav-mobile-list a:nth-child(1) { transition-delay: 0.34s; }
.nav-mobile.is-open .nav-mobile-list a:nth-child(2) { transition-delay: 0.27s; }
.nav-mobile.is-open .nav-mobile-list a:nth-child(3) { transition-delay: 0.20s; }
.nav-mobile.is-open .nav-mobile-list a:nth-child(4) { transition-delay: 0.13s; }
.nav-mobile.is-open .nav-mobile-list a:nth-child(5) { transition-delay: 0.06s; }
.nav-mobile-foot {
margin-block-start: auto; padding-block-start: 1.75rem;
display: flex; flex-direction: column; gap: 1rem;
opacity: 0; transform: translateY(14px);
transition: opacity 0.6s var(--ease) 0.4s, transform 0.7s var(--ease) 0.4s;
}
.nav-mobile.is-open .nav-mobile-foot { opacity: 1; transform: none; }
.nav-mobile-foot .btn { inline-size: 100%; }
.nav-mobile-foot .lang {
justify-content: center; gap: 0.75rem;
border-inline-end: none; padding-inline-end: 0; margin-inline-end: 0;
border-block-start: 1px solid var(--gold-08);
padding-block-start: 1rem;
}
.nav-mobile-foot .lang a { font-size: 0.85rem; padding: 0.85rem 1rem; min-inline-size: 54px; }
body.is-locked { overflow: hidden; }
/* ------------------------------------------------------------
9. ПОДВАЛ
------------------------------------------------------------ */
.footer {
background: var(--navy-deep);
border-block-start: 1px solid var(--gold-15);
padding-block: clamp(2.75rem, 5vw, 4rem);
padding-inline: var(--gutter);
}
.footer-inner {
max-width: var(--container); margin-inline: auto;
display: grid; gap: clamp(1.75rem, 4vw, 3rem);
grid-template-columns: 1.4fr 1fr 1fr;
}
/* Полный логотип с подписью выше знака по пропорции (0.77),
поэтому ширина уменьшена — иначе подвал распухает. */
.footer-logo { inline-size: clamp(112px, 12vw, 144px); block-size: auto; opacity: 0.95; }
.footer-name { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); margin-block-end: 0.5rem; }
.footer-tag { font-size: 0.64rem; letter-spacing: 0.14em; color: var(--muted); }
.footer-note { font-size: var(--fs-small); color: var(--muted); margin-block-start: 1rem; max-width: 34ch; }
.footer-col-title { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--gold); margin-block-end: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.15rem; }
.footer-links a { font-size: var(--fs-small); color: var(--muted); padding-block: 0.5rem; transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: var(--gold); }
.footer-bottom {
max-width: var(--container); margin-inline: auto;
margin-block-start: clamp(2rem, 4vw, 3rem);
padding-block-start: 1.5rem;
border-block-start: 1px solid var(--gold-08);
display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
font-size: 0.75rem; color: var(--faint);
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--gold); }
/* ------------------------------------------------------------
10. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
Контент виден по умолчанию. Прячем только после того,
как скрипт подтвердил работоспособность.
------------------------------------------------------------ */
.reveal { opacity: 1; transform: none; }
.js-motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.js-motion .reveal.is-visible { opacity: 1; transform: none; }
.js-motion .reveal-group > * { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.js-motion .reveal-group.is-visible > * { opacity: 1; transform: none; }
.js-motion .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.js-motion .reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
.js-motion .reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.js-motion .reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.27s; }
.js-motion .reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.36s; }
.js-motion .reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.45s; }
.hero-rise > * { animation: rise 0.9s var(--ease) both; }
.hero-rise > *:nth-child(1) { animation-delay: 0.05s; }
.hero-rise > *:nth-child(2) { animation-delay: 0.16s; }
.hero-rise > *:nth-child(3) { animation-delay: 0.27s; }
.hero-rise > *:nth-child(4) { animation-delay: 0.38s; }
.hero-rise > *:nth-child(5) { animation-delay: 0.49s; }
.hero-rise > *:nth-child(6) { animation-delay: 0.60s; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.js-motion .reveal, .js-motion .reveal-group > * { opacity: 1 !important; transform: none !important; }
.js-motion .branch .stem, .js-motion .branch .branch-twig { stroke-dashoffset: 0 !important; }
.js-motion .branch .leaf, .js-motion .branch .fruit { opacity: .9 !important; transform: none !important; }
.js-motion .growth::before { transform: scaleY(1) !important; }
.hero-aura { animation: none !important; }
.nav-links a { animation: none !important; }
.card::after, .program::after, .whom-item::after, .entry::after,
.level::after, .review::after, .mark::after, .product::after,
.gain::after, .next-step::after, .fit-col::after,
.post-card::after { animation: none !important; }
.sprout::before, .sprout::after { transition: none !important; }
}
/* ------------------------------------------------------------
11. ПЕРВЫЙ ЭКРАН
------------------------------------------------------------ */
.hero {
position: relative;
min-block-size: 100svh;
display: flex; align-items: center;
padding-block: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)) clamp(3rem, 7vw, 5rem);
padding-inline: var(--gutter);
overflow: hidden;
}
.hero::before { display: none; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 22%; }
.hero-veil {
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(ellipse 120% 90% at 50% 0%, rgba(13,30,53,0.55), transparent 70%),
linear-gradient(180deg, rgba(13,17,22,0.5) 0%, rgba(13,17,22,0.85) 60%, rgba(13,17,22,0.97) 100%);
}
/* Подложка первого экрана. Пока фотографии нет — работает
сгенерированная «глубина». Когда придёт кадр Иерусалима,
достаточно поменять адрес в одной строке. */
/* Первый экран Deep Identity: рассеянные точки, собранные одной
нитью света. Кадр почти чёрный (99.5 % тёмных пикселей),
поэтому плотность высокая — гасить тут нечего.
На телефоне свой вертикальный кадр: широкий обрезался втрое,
и нить света уходила за край. */
.hero-bg {
position: absolute; inset: 0; z-index: 0;
background: url('../img/bg-hero.jpg?v=2') 64% 66% / cover no-repeat;
opacity: 1;
}
@media (max-width: 760px) {
.hero-bg {
background-image: url('../img/bg-hero-tall.jpg?v=1');
background-position: center bottom;
}
}
/* Виньетка: края темнее центра, взгляд собирается к тексту */
.hero-vignette {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 40%, rgba(2,10,20,0.75) 100%);
}
/* Медленное дыхание золотого света */
.hero-aura {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 62% 42%, rgba(201,162,75,0.13), transparent 62%);
animation: breathe 15s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
/* ------------------------------------------------------------
14. ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ
Композиция, а не палитра. Текст уходит вниз, верхняя треть
отдана свету: рассвет должен попасть в кадр, а не стоять
за строками. Виньетка ослаблена — она душила подложку
по краям сильнее, чем нужно на узком экране.
------------------------------------------------------------ */
@media (max-width: 760px) {
.hero { align-items: flex-end; }
.hero-vignette {
background: radial-gradient(ellipse 120% 62% at 50% 62%,
transparent 30%, rgba(2,10,20,0.52) 100%);
}
.hero-aura {
background: radial-gradient(ellipse 78% 34% at 50% 26%,
rgba(201,162,75,0.22), transparent 66%);
}
}
.hero-content { position: relative; z-index: 2; max-width: 44rem; width: 100%; }
.hero-content > * { max-width: 100%; }
/* Строка бренда на первом экране */
.hero-brand { display: flex; align-items: center; gap: 0.9rem; margin-block-end: 1.75rem; }
.hero-brand img { inline-size: 44px; block-size: auto; }
.hero-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero-brand-name {
font-family: var(--font-body);
font-size: clamp(0.82rem, 1.4vw, 1rem); font-weight: 500;
letter-spacing: 0.26em; color: var(--gold); white-space: nowrap;
}
.hero-brand-sub {
font-family: var(--font-display); font-style: italic;
font-size: clamp(0.78rem, 1.2vw, 0.92rem); letter-spacing: 0.01em;
color: var(--muted); margin-block-start: 4px;
}
/* На телефоне шапка прилипшая, и знак с названием оказывались
дважды в пределах одного экрана — читалось как дубль.
Оставляем только подпись, заголовок за счёт этого поднимается. */
/* Знак и название живут в шапке. В первом экране от бренд-строки
остаётся только подпись — иначе логотип виден дважды
в пределах одного экрана. Правило общее, не только для телефона. */
.hero-brand img,
.hero-brand-name { display: none; }
.hero-brand { margin-block-end: 1.1rem; }
.hero-brand-sub { margin-block-start: 0; }
/* ------------------------------------------------------------
11b. МЕСТА ПОД ФОТО И ВИДЕО
------------------------------------------------------------ */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--navy-raised); }
.media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media--wide { aspect-ratio: 16 / 10; }
.media-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
min-block-size: 220px;
border: 1px dashed var(--gold-25); border-radius: var(--radius);
background: linear-gradient(150deg, var(--navy-raised), var(--navy));
color: var(--faint); text-align: center; padding: 1.5rem;
}
.media-placeholder__label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.media-placeholder__file { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--muted); }
.media-placeholder__hint { font-size: 0.72rem; max-width: 34ch; line-height: 1.6; }
.video-facade {
position: relative; aspect-ratio: 16 / 9;
border-radius: var(--radius); overflow: hidden; cursor: pointer;
background: var(--navy-raised); border: 1px solid var(--gold-15);
}
.video-facade--vertical { aspect-ratio: 9 / 16; max-inline-size: 320px; }
.video-facade img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.video-facade iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
/* Свой плеер: видео с нашего домена вместо внешнего кадра */
.video-facade video {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%;
object-fit: cover; background: var(--navy-abyss);
display: block;
}
/* ЛОГИЧЕСКОЕ СВОЙСТВО ЗДЕСЬ ВРЕДИТ. 20.08.2026 на иврите
кнопка воспроизведения оказалась слева от центра, а не в центре:
inset-inline-start в RTL превращается в right, а transform
физический и всегда двигает влево. Две системы координат
складывались, и кнопка уезжала на свою ширину.
Центр кадра одинаков в любом направлении письма — здесь нужны
физические left и top. */
.video-facade__play {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
inline-size: 68px; block-size: 68px; border-radius: 50%;
background: rgba(13,17,22,0.7); border: 1px solid var(--gold);
display: flex; align-items: center; justify-content: center;
transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.video-facade:hover .video-facade__play { background: var(--gold); transform: translate(-50%,-50%) scale(1.06); }
.video-facade__play svg { inline-size: 22px; block-size: 22px; fill: var(--gold); stroke: none; margin-inline-start: 3px; }
.video-facade:hover .video-facade__play svg { fill: var(--navy-abyss); }
.video-facade.is-playing .video-facade__play { display: none; }
/* ------------------------------------------------------------
11d. РАМКА ТЕЛЕФОНА
Приём с предыдущей версии сайта: вертикальное видео
в корпусе телефона. Внутри — обычный facade, плеер
грузится по нажатию.
------------------------------------------------------------ */
.phone-frame {
position: relative;
inline-size: clamp(240px, 30vw, 310px);
aspect-ratio: 9 / 19;
margin-inline: auto;
padding: 12px;
border-radius: 40px;
background: linear-gradient(160deg, #1b2740, #070f1c 60%);
box-shadow:
0 0 0 1px var(--gold-25),
0 26px 70px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.07);
flex-shrink: 0;
}
/* Динамик над экраном */
.phone-frame::before {
content: '';
position: absolute; inset-block-start: 20px; inset-inline-start: 50%;
transform: translateX(-50%);
inline-size: 78px; block-size: 5px;
background: #050c16; border-radius: 4px; z-index: 3;
}
.phone-screen {
position: relative; inline-size: 100%; block-size: 100%;
border-radius: 30px; overflow: hidden; background: var(--navy-abyss);
}
.phone-screen .video-facade {
inline-size: 100%; block-size: 100%;
aspect-ratio: auto; max-inline-size: none;
border: none; border-radius: 0;
}
/* Корпус под вертикальное видео 9:16.
Раньше пропорция 9/15.4 стояла на самом корпусе и подбиралась
на глаз с поправкой на 12 px рамки. Поправка верна только при
одной ширине: корпус тянется clamp'ом от 240 до 310 px, и на
узком экране кадр начинало резать по бокам, на широком —
сверху и снизу.
Пропорция перенесена на экран, где ей и место. Высота корпуса
считается от содержимого, и обрезки нет ни при какой ширине. */
.phone-frame--9x16 { aspect-ratio: auto; }
.phone-frame--9x16 .phone-screen { aspect-ratio: 9 / 16; block-size: auto; }
/* ТЕЛЕФОН ВНУТРИ ТЕЛЕФОНА · только для монитора.
20.08.2026 на боевой проверке с iPhone: корпус 240 px на экране
390 px, внутри экран 216 px. Ролик 1080 px показывался в пятую
часть натуральной величины — вплавленный в кадр текст не читался,
а строка «VISION TEAM GLOBAL» в концовке выглядела обрезанной.
Рамка — украшение для монитора, где она стоит рядом с текстом
и места не отнимает. На узком экране она отнимает половину
ширины у того единственного, ради чего блок существует.
Поэтому на телефоне корпус снимается, кадр занимает всю колонку. */
@media (max-width: 900px) {
.phone-frame {
inline-size: 100%; max-inline-size: 420px;
padding: 0; border-radius: var(--radius-card);
background: none;
box-shadow: 0 0 0 1px var(--gold-25), 0 18px 44px rgba(0,0,0,0.28);
}
.phone-frame::before { display: none; }
.phone-screen { border-radius: var(--radius-card); }
.phone-screen .video-facade__play { inline-size: 72px; block-size: 72px; }
.phone-screen .video-facade__play svg { inline-size: 26px; block-size: 26px; }
}
.phone-screen .video-facade__play { inline-size: 58px; block-size: 58px; }
/* Параллакс: элемент чуть отстаёт при прокрутке */
.parallax { will-change: transform; }
/* ------------------------------------------------------------
11c. АТМОСФЕРНЫЕ ПОДЛОЖКИ
Кладутся внутрь секции первым элементом:
------------------------------------------------------------ */
.bg-layer { position: relative; isolation: isolate; overflow: hidden; }
.bg-layer > .bg-img {
position: absolute; inset: 0; z-index: -2;
background-position: center; background-size: cover; background-repeat: no-repeat;
}
.bg-layer > .bg-veil {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(100deg, rgba(13,17,22,0.88) 0%, rgba(13,17,22,0.55) 58%, rgba(13,17,22,0.25) 100%);
}
/* Текстура зерна из проекта убрана: светлый слой с режимом
наложения дважды давал белую пелену там, где режим
не поддерживается. Атмосферу дают подложки и градиенты. */
.bg-depth > .bg-img { background-image: url('../img/bg-depth.jpg?v=2'); opacity: 0.85; background-position: 64% 40%; }
.bg-rings > .bg-img {
background-image: url('../img/bg-rings.jpg?v=2'); opacity: 0.5;
background-size: clamp(520px, 68vw, 880px); background-position: center right;
}
/* Фотографические подложки. Прозрачность подобрана так,
чтобы текст поверх сохранял контраст выше нормы. */
.bg-path > .bg-img {
background-image: url('../img/bg-path.jpg?v=2');
opacity: 0.62; background-position: center 65%;
}
.bg-jerusalem > .bg-img {
background-image: url('../img/bg-jerusalem.jpg');
opacity: 0.4; background-position: center 55%;
}
.bg-window > .bg-img {
background-image: url('../img/bg-window.jpg?v=3');
opacity: 0.8; background-position: center; /* кадр и так почти чёрный */
}
.bg-dawn > .bg-img {
background-image: url('../img/bg-dawn.jpg?v=4');
opacity: 0.68; background-position: center 38%;
}
.bg-clearing > .bg-img {
background-image: url('../img/bg-clearing.jpg?v=2');
opacity: 0.8; background-position: 62% center;
}
/* Утро на странице здоровья. Кадр заменён 07.08.2026: прежний
был почти чёрным слева, новый снят под этот экран — левая
половина намеренно пустая, там стоит заголовок. Точка
кадрирования держит стакан и базилик в поле зрения. */
.bg-morning > .bg-img {
background-image: url('../img/bg-morning.jpg?v=3');
opacity: 0.72; background-position: 78% 60%;
}
/* Под светлым кадром вуаль плотнее: там есть яркое небо */
.bg-clearing > .bg-veil {
background:
radial-gradient(ellipse 95% 75% at 50% 28%, rgba(13,17,22,0.30), rgba(13,17,22,0.80) 78%),
linear-gradient(180deg, rgba(13,17,22,0.42), rgba(13,17,22,0.88));
}
/* Фотографии Ильи всегда остаются отдельным кадром.
Текст поверх лица читается плохо — проверено на практике,
экономия высоты того не стоит. */
.media--bg-mobile { position: relative; }
/* Фотография как подложка блока, а не как отдельная колонка */
.bg-photo > .bg-img { background-size: cover; background-position: center 20%; opacity: 0.42; }
.bg-photo > .bg-veil {
background: linear-gradient(100deg, rgba(13,17,22,0.95) 0%, rgba(13,17,22,0.82) 46%, rgba(13,17,22,0.4) 100%);
}
[dir="rtl"] .bg-layer > .bg-veil { background: linear-gradient(260deg, rgba(13,17,22,0.88) 0%, rgba(13,17,22,0.55) 58%, rgba(13,17,22,0.25) 100%); }
/* ------------------------------------------------------------
12. RTL — ИВРИТ
------------------------------------------------------------ */
[dir="rtl"] .branch svg, [dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow, [dir="rtl"] .btn-ghost:hover .arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .rule { transform-origin: right center; }
[dir="rtl"] .eyebrow::before { background: linear-gradient(to left, transparent, var(--gold)); }
[dir="rtl"] .growth-item::after, [dir="rtl"] .nav-mobile-list a::after { background: linear-gradient(to left, var(--gold), transparent); }
[dir="rtl"] .growth-item::before, [dir="rtl"] .nav-mobile-list a::before { transform: rotate(35deg); }
[dir="rtl"] .spine-node--leaf { transform: translateX(50%) rotate(35deg); }
[dir="rtl"] .spine-node--seed, [dir="rtl"] .spine-node--fruit { transform: translateX(50%); }
[dir="rtl"] .btn-ghost::before { transform-origin: right center; }
[dir="rtl"] .btn-ghost .leaf-tip { transform: rotate(35deg) scale(0.3); }
[dir="rtl"] .btn-ghost:hover .leaf-tip { transform: rotate(35deg) scale(1); }
[dir="rtl"] .nav-links a::after { transform-origin: right center; }
[dir="rtl"] .hero-veil { background: linear-gradient(255deg, rgba(13,17,22,0.94) 0%, rgba(16,21,25,0.82) 46%, rgba(13,30,53,0.55) 100%); }
[dir="rtl"] .hero-aura { background: radial-gradient(ellipse 60% 50% at 38% 42%, rgba(201,162,75,0.13), transparent 62%); }
[dir="rtl"] .btn { border-radius: 20px 3px 20px 3px; }
[dir="rtl"] .btn-gold:hover, [dir="rtl"] .btn-outline:hover { border-radius: 3px 20px 3px 20px; }
[dir="rtl"] .nav-cta { border-radius: 14px 2px 14px 2px; }
[dir="rtl"] .nav-cta:hover { border-radius: 2px 14px 2px 14px; }
/* ------------------------------------------------------------
13. АДАПТИВ
------------------------------------------------------------ */
@media (max-width: 1100px) {
.grid--text-side, .grid--side-text { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.nav-links { display: none; }
.nav-burger { display: flex; }
.nav-cta { display: inline-flex; }
.nav-right > .lang { display: none; }
.nav-logo-sub { display: none; }
}
/* Первый экран на узком экране: сначала текст, затем портрет.
Пробовали портрет фоном — текст поверх лица не читался. */
@media (max-width: 900px) {
.hero--split .hero-portrait { max-inline-size: 420px; margin-inline: auto; }
}
@media (max-width: 640px) {
:root { --nav-h: 62px; --gutter: 1.35rem; }
.grid--2, .grid--3 { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; }
.btn { inline-size: 100%; }
.btn-ghost { inline-size: auto; }
.btn-row { flex-direction: column; align-items: stretch; }
.nav-logo-name { font-size: 0.58rem; letter-spacing: 0.15em; }
.nav-logo img { inline-size: 26px; }
.nav-cta { font-size: 0.6rem; padding: 0.7rem 0.95rem; letter-spacing: 0.09em; }
.nav-cta-full { display: none; }
.nav-cta-short { display: inline; }
.quote { padding-inline-start: 1.1rem; }
.growth { padding-inline-start: 2.25rem; }
.growth-item::before { inset-inline-start: -2.25rem; }
.growth-item::after { inset-inline-start: -1.55rem; inline-size: 12px; }
.hero-brand img { inline-size: 34px; }
}
@media (max-width: 380px) {
:root { --gutter: 1rem; }
.nav-logo-name { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
.hero { min-block-size: auto; padding-block: calc(var(--nav-h) + 2.5rem) 3rem; }
}
@media print {
.nav, .nav-mobile, .spine, .hero-media, .hero-veil, .hero-aura { display: none !important; }
body { background: #fff; color: #000; }
}
/* ------------------------------------------------------------
13. ПОДЛОЖКИ НА ТЕЛЕФОНЕ
На узком экране cover увеличивает кадр в два-три раза, в поле
зрения остаётся тёмный фрагмент, и подложка пропадала.
Замер на 390 px: светлая четверть падала до 30–90 из 255.
Здесь плотность поднята для каждой подложки отдельно.
Контраст текста проверен после правки, минимум 7.7:1.
------------------------------------------------------------ */
@media (max-width: 760px) {
.bg-dawn > .bg-img { opacity: 0.95; background-position: center 30%; }
.bg-depth > .bg-img { opacity: 1; background-position: 66% 34%; }
.bg-rings > .bg-img { opacity: 0.72; }
.bg-path > .bg-img { opacity: 0.92; background-position: 64% 52%; }
.bg-jerusalem > .bg-img { opacity: 0.75; }
.bg-window > .bg-img { opacity: 0.95; }
.bg-clearing > .bg-img { opacity: 0.95; background-position: 66% center; }
.bg-meeting > .bg-img { opacity: 1; background-position: 34% 56%; }
.bg-morning > .bg-img { opacity: 0.86; }
/* Вуали на телефоне тоньше: кадр и так режется */
.bg-layer > .bg-veil { opacity: 0.7; } /* на телефоне было темно */
}
/* ------------------------------------------------------------
15. ЕДИНАЯ ПОВЕРХНОСТЬ КАРТОЧКИ
Одна форма и одна кайма на всех семи страницах. До этого
карточки жили в постраничных стилях и разошлись: пять разных
скруглений и три разных рамки.
Кайма собрана на псевдоэлементе ::after с маской по контуру —
он свободен у всех перечисленных классов, проверено. Свет
по кайме идёт медленно, 9 секунд, и гаснет при отключённом
движении: это украшение, а не носитель смысла.
------------------------------------------------------------ */
.card, .program, .pack-panel,
.whom-item, .entry,
.level, .gate, .aside-note, .review,
.mark, .product, .disclaimer,
.gain, .next-step, .fit-col,
.post-card, .posts-empty {
border-radius: var(--radius-card);
position: relative;
}
.card::after, .program::after, .pack-panel::after,
.whom-item::after, .entry::after,
.level::after, .gate::after, .aside-note::after, .review::after,
.mark::after, .product::after, .disclaimer::after,
.gain::after, .next-step::after, .fit-col::after,
.post-card::after, .posts-empty::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: linear-gradient(115deg,
transparent 22%,
rgba(201,162,75,0.10) 38%,
rgba(232,201,122,0.55) 50%,
rgba(201,162,75,0.10) 62%,
transparent 78%);
background-size: 260% 100%;
background-position: 130% 0;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: edge-light 9s linear infinite;
opacity: 0.75;
}
@keyframes edge-light {
from { background-position: 130% 0; }
to { background-position: -130% 0; }
}
/* При наведении кайма ярче, карточка чуть поднимается */
.card:hover::after, .program:hover::after, .whom-item:hover::after,
.entry:hover::after, .level:hover::after, .review:hover::after,
.mark:hover::after, .product:hover::after,
.gain:hover::after, .next-step:hover::after, .fit-col:hover::after,
.post-card:hover::after { opacity: 1; }
/* ------------------------------------------------------------
16. РОСТОК ВМЕСТО СТРЕЛКИ ПЕРЕХОДА
Символ ↗ на iOS отрисовывался как эмодзи в синей рамке —
чужой элемент посреди золотой ссылки. Здесь он заменён
ростком, нарисованным стилями: стебель тянется вверх-вправо,
на конце распускается лист. При наведении стебель вырастает
до конца и лист раскрывается — снизу вверх, как в меню.
------------------------------------------------------------ */
.sprout {
position: relative;
display: inline-block;
inline-size: 12px; block-size: 12px;
margin-inline-start: 0.15rem;
vertical-align: -1px;
flex-shrink: 0;
}
/* Стебель */
.sprout::before {
content: '';
position: absolute; inset-block-end: 0; inset-inline-start: 1px;
inline-size: 1px; block-size: 10px;
background: linear-gradient(to top, currentColor, currentColor);
transform-origin: bottom center;
transform: rotate(-32deg) scaleY(0.72);
transition: transform 0.5s var(--ease);
opacity: 0.9;
}
/* Лист на конце стебля */
.sprout::after {
content: '';
position: absolute; inset-block-start: 1px; inset-inline-start: 5px;
inline-size: 7px; block-size: 4px;
border-radius: 0 100% 0 100%;
background: currentColor;
transform-origin: left center;
transform: rotate(-14deg) scale(0.75);
transition: transform 0.5s var(--ease) 0.08s, opacity 0.5s var(--ease);
opacity: 0.75;
}
a:hover > .sprout::before,
a:focus-visible > .sprout::before { transform: rotate(-32deg) scaleY(1); }
a:hover > .sprout::after,
a:focus-visible > .sprout::after { transform: rotate(-8deg) scale(1); opacity: 1; }
[dir="rtl"] .sprout::before { transform: rotate(32deg) scaleY(0.72); }
[dir="rtl"] .sprout::after { inset-inline-start: auto; inset-inline-end: 5px; transform: rotate(14deg) scale(0.75); }
/* Подпись студии в подвале: знак KC и строка авторства.
Знак взят без словесной части — название уже стоит текстом
рядом, второй раз его повторять незачем. */
.footer-credit { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-kc { inline-size: 26px; block-size: auto; opacity: 0.85; flex-shrink: 0; }
/* ЗНАК ИДЁТ ЗА ИМЕНЕМ, А НЕ ЗА НАЧАЛОМ СТРОКИ.
20.08.2026 владелец сказал, что на иврите знак «перевёрнут
не в ту сторону». Ни файл, ни стили его не зеркалят — он просто
вставал у правого края, потому что в письме справа налево
правый край и есть начало строки. Формально верно, а читается
как ошибка: знак отрывается от имени, к которому относится,
и повисает у края.
Зеркалить нельзя ни при каких условиях: это буквенный знак,
отражённое «KC» читается как другие буквы.
Поэтому в RTL знак переставляется в конец строки — туда, где
стоит Kerpelev Consulting. В обоих языках он теперь рядом
с именем, а не сам по себе. */
[dir="rtl"] .footer-kc { order: 2; }
.footer-credit a { color: var(--gold); }
.footer-credit a:hover { color: var(--gold-light); }
@media (max-width: 640px) {
.footer-credit { gap: 0.4rem; }
.footer-kc { inline-size: 22px; }
}
/* ══════════════════════════════════════════════════════════════
17. СВЕТЛАЯ ЗОНА
Схема сайта: тёмный верх (шапка, первый экран) → светлая
середина → тёмный подвал.
Механика — подмена токенов, а не правка 329 обращений к цветам.
Внутри .zone-light переопределяются те же переменные, поэтому
каждое существующее var(--navy-raised) становится белым,
а var(--white) — navy. Разметка страниц почти не меняется.
Исключение из подмены — золото: оно остаётся тем же цветом,
но по гайду в светлой зоне выходит из текста в декор.
Поэтому места, где золото было ТЕКСТОМ, перечислены отдельно
и переводятся на navy. Проверено арифметикой: золото на кости
даёт 2.2, navy — 15.6.
══════════════════════════════════════════════════════════════ */
.zone-light {
/* Поверхности */
--navy-abyss: #F5F2F0; /* тёплая кость — фон зоны */
--navy: #F5F2F0;
--navy-deep: #EDE7DF; /* песок — вложенные поверхности */
--navy-raised: #FFFFFF; /* карточки */
--navy-lift: #FFFFFF;
/* Текст: инверсия */
--white: #0A1A33; /* основной текст — navy, 15.6 */
--mist: #2C3A50; /* вторичный, 10.8 */
--muted: #4A5A72; /* третичный, 6.6 */
--faint: #6B7A90; /* подписи, 4.5 — нижняя граница нормы */
/* Золото прозрачностями: на светлом нужна большая плотность */
--gold-04: rgba(201,162,75,0.10);
--gold-08: rgba(201,162,75,0.16);
--gold-15: rgba(201,162,75,0.28);
--gold-25: rgba(201,162,75,0.42);
--gold-45: rgba(10,26,51,0.14); /* границы: navy читается, золото нет */
/* Светлое золото #E8C97A на кости даёт 1.44, на белой карточке 1.61.
Это токен ТЕКСТОВОГО золота, поэтому переопределяем его целиком —
чинятся все места разом, включая постраничные стили.
Декоративные применения возвращены ниже явными значениями. */
--gold-light: #7D5F1E;
background: #F5F2F0;
color: #0A1A33;
position: relative;
}
/* Подложки в светлой зоне не нужны: по гайду там кремовая
поверхность и настоящее фото в раскладке. Тёмный кадр под
navy-текстом сделал бы текст нечитаемым.
ВНИМАНИЕ: класс bg-layer стоит НА САМИХ СЕКЦИЯХ, а не на
отдельном слое. Скрывать .bg-layer нельзя — исчезнет секция
целиком. Гасим только вложенные слои кадра и вуали. */
.zone-light .bg-img,
.zone-light .bg-veil { display: none !important; }
/* Сама секция остаётся, но её фон становится прозрачным,
чтобы проступала кремовая поверхность зоны */
.zone-light .bg-layer { background: transparent !important; }
/* Тонкая текстура корней рассчитана на тёмное.
ВНИМАНИЕ, та же ловушка, что с bg-layer: класс roots-bg стоит
НА СЕКЦИЯХ. display:none скрывал секцию целиком — на блоге,
где секция одна, страница обнулялась до подвала.
Гасим только псевдоэлемент с текстурой. */
.zone-light .roots-bg::after { display: none !important; }
/* ── Золото, которое было ТЕКСТОМ → navy ── */
.zone-light .eyebrow,
.zone-light .footer-col-title,
.zone-light .growth-num,
.zone-light .track-num,
.zone-light .stat-num,
.zone-light .level-price,
.zone-light .product-cat,
.zone-light .fit-title,
.zone-light .disclaimer-title,
.zone-light .mark-num { color: #6B4E12; }
/* Ссылки в тексте: тёмное золото проходит норму на кости — 5.0 */
.zone-light a:not(.btn):not(.btn-gold):not(.btn-outline):not(.btn-ghost) { color: #7D5F1E; }
.zone-light a:not(.btn):not(.btn-gold):not(.btn-outline):not(.btn-ghost):hover { color: #5C4210; }
/* Курсивный акцент в заголовке — тёмное золото, кегль крупный */
.zone-light h1 em, .zone-light h2 em,
.zone-light .t-display em, .zone-light .t-h2 em { color: #7D5F1E; }
/* Цитата: рамка золотом (декор), текст navy */
.zone-light .quote { color: #0A1A33; border-inline-start-color: var(--gold); }
/* ── Карточки: тень вместо бегущей каймы ──
Кайма состоит из светлой полосы на тёмном и на светлом
не видна физически. Замена: белая поверхность, мягкая тень,
золотая кромка сверху. */
.zone-light .card, .zone-light .program, .zone-light .pack-panel,
.zone-light .whom-item, .zone-light .entry,
.zone-light .level, .zone-light .gate, .zone-light .aside-note,
.zone-light .review, .zone-light .mark, .zone-light .product,
.zone-light .disclaimer, .zone-light .gain, .zone-light .next-step,
.zone-light .fit-col, .zone-light .post-card, .zone-light .posts-empty {
background: #FFFFFF;
border: 1px solid rgba(10,26,51,0.08);
border-block-start: 2px solid var(--gold);
box-shadow: 0 1px 2px rgba(10,26,51,0.04), 0 12px 28px -14px rgba(10,26,51,0.16);
}
.zone-light .card::after, .zone-light .program::after,
.zone-light .pack-panel::after, .zone-light .whom-item::after,
.zone-light .entry::after, .zone-light .level::after,
.zone-light .gate::after, .zone-light .aside-note::after,
.zone-light .review::after, .zone-light .mark::after,
.zone-light .product::after, .zone-light .disclaimer::after,
.zone-light .gain::after, .zone-light .next-step::after,
.zone-light .fit-col::after, .zone-light .post-card::after,
.zone-light .posts-empty::after { display: none; }
.zone-light .card:hover, .zone-light .whom-item:hover,
.zone-light .entry:hover, .zone-light .product:hover,
.zone-light .gain:hover, .zone-light .next-step:hover,
.zone-light .post-card:hover {
box-shadow: 0 2px 4px rgba(10,26,51,0.05), 0 20px 40px -18px rgba(10,26,51,0.22);
}
/* ── Кнопки ──
Золотая переносится без правок: тёмный текст на золотом
читается на любом фоне. Призрачная и обводочная давали 2.2 —
переведены на navy. */
.zone-light .btn-outline,
.zone-light .btn-ghost {
color: #0A1A33;
border-color: rgba(10,26,51,0.35);
background: none;
}
.zone-light .btn-outline:hover,
.zone-light .btn-ghost:hover {
border-color: #0A1A33;
background: rgba(10,26,51,0.05);
}
.zone-light .btn-ghost .arrow { color: #0A1A33; }
/* ── Иконки в кругах: кольцо → заливка ──
Кольцо золотом на кости различимо на 9.9 % площади,
залитый круг — на 76.3 %. */
.zone-light .ico-circle,
.zone-light .step-circle {
background: var(--gold);
border-color: var(--gold);
color: #0A1A33;
}
/* ── Разделители и линии ── */
.zone-light .rule { background: var(--gold); opacity: 1; }
.zone-light hr,
.zone-light .divider { border-color: rgba(10,26,51,0.12); }
/* Аватары отзывов: здесь кольцо золотом уместно, площадь мала
по замыслу — так и записано в гайде */
.zone-light .review-avatar { border-color: var(--gold-25); background: #EDE7DF; }
/* ── Границы зоны: корни ──
Крупный элемент, один раз на переход. Верхний повёрнут:
корни растут из тёмного в светлое. */
.zone-edge {
position: relative; block-size: 0;
display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 3;
}
.zone-edge svg { display: block; inline-size: min(300px, 62vw); height: auto; color: var(--gold); }
.zone-edge--in { transform: translateY(-1px); }
.zone-edge--in svg { transform: rotate(180deg); }
.zone-edge--out { transform: translateY(1px); }
/* Плавный переход тона на стыке, чтобы не было реза */
.zone-light::before,
.zone-light::after {
content: ''; position: absolute; inset-inline: 0;
block-size: clamp(48px, 9vw, 96px); pointer-events: none;
}
/* Растяжка идёт через ТЁПЛЫЕ остановки. Прямая растяжка
от #0D1116 к прозрачному давала серую полосу: середина
между тёмным и кремовым — rgb(129,129,131), R−B минус два.
Именно там, где глаз задерживается на стыке, тепло гасло.
Промежуточные тона держат R−B от +13 до +52. */
/* Верхняя растяжка удалена: тёмной зоны над светлой больше нет,
и эта полоса читалась как серый шов прямо под шапкой.
Осталась только нижняя — переход в тёмный подвал. */
.zone-light::before { display: none; }
.zone-light::after { inset-block-end: 0;
background: linear-gradient(to top,
#0D1116 0%, #1C160F 18%, #2E2418 38%, #4A3A26 58%,
#7A6446 76%, #B8A585 90%, #F5F2F0 100%); }
/* Первая и последняя секции внутри зоны отступают от растяжек */
/* Отступ первой секции считается ОТ ВЫСОТЫ ШАПКИ: зона теперь
начинается от верха страницы, а шапка закреплена и занимает
62 px. Прежнее значение clamp(4rem,10vw,7rem) давало на 320 px
всего 64 px, и первая строка стояла в 8 px от кромки шапки.
Это правило идёт последним в файле и перебивало точечные
заплатки — поэтому чиним здесь, а не рядом. */
.zone-light > section:first-child {
padding-block-start: calc(var(--nav-h) + clamp(1.75rem, 6vw, 3.5rem));
}
.zone-light > section:last-child { padding-block-end: clamp(4rem, 10vw, 7rem); }
/* ── Правки, найденные сплошным замером контраста ──
1. Тёмный текст на золотой кнопке. Он был задан как
var(--navy-abyss), а в светлой зоне эта переменная стала
кремовой — кремовый на золоте дал 2.15. Возвращаем navy
явным значением: 7.2 на золоте.
2. Светлое золото #E8C97A как текст: на кости 1.44,
на белой карточке 1.61. Переводим на тёмное золото
#7D5F1E — 5.3 на кости, 5.9 на белом. Это не второй цвет
бренда, а то же золото в тёмной части своего диапазона,
и применяется только там, где золото ОБЯЗАНО быть текстом. */
.zone-light .btn-gold,
.zone-light .badge,
.zone-light .skip-link,
.zone-light .nav-cta,
.zone-light .level-cta .btn-gold { color: #0A1A33 !important; }
.zone-light .creed-line--gold,
.zone-light .gain-note,
.zone-light .next-prices,
.zone-light .growth-desc,
.zone-light .program-outcome,
.zone-light .value-head,
.zone-light .btn-outline,
.zone-light .source-link,
.zone-light .review-link,
.zone-light .lead-accent { color: #7D5F1E !important; }
/* Декоративные применения светлого золота, которым подмена
не нужна: заливки, плоды на ветви, обводка фокуса. */
.zone-light .btn-gold:hover,
.zone-light .nav-cta:hover { background: #E8C97A; }
.zone-light .branch .fruit,
.zone-light .spine .t-fruit { fill: #C9A24B; }
.zone-light :focus-visible { outline-color: #7D5F1E; }
/* Остатки золота как текста, найденные вторым проходом замера.
Курсивный акцент в любом заголовке светлой зоны — тёмное золото. */
.zone-light em,
.zone-light .product-line,
.zone-light .pack-tab__name,
.zone-light .feature-price,
.zone-light .pack-outcome,
.zone-light .t-small.t-gold,
.zone-light .price-note { color: #7D5F1E; }
/* Центральная фраза: её em задан отдельным правилом ниже
в каскаде, поэтому перебивал общий .zone-light em. */
.zone-light .creed-text em,
.zone-light .creed-line em,
.zone-light .t-display em { color: #7D5F1E; }
/* ── ШАПКА НАД СВЕТЛОЙ ЗОНОЙ ──
Переменные CSS наследуются по дереву документа, а не по тому,
что визуально лежит под чем. Шапка — сосед .zone-light,
поэтому подмена токенов до неё не доходит, и position: fixed
держит её тёмной плашкой над кремовым.
Решение: наблюдатель ставит класс, когда под шапкой светлая
зона. Без скрипта шапка остаётся тёмной и читаемой — контент
от этого не страдает. */
.nav, .nav--on-light {
background: rgba(245, 242, 240, 0.92) !important;
border-block-end-color: rgba(10, 26, 51, 0.12) !important;
}
.nav .nav-logo-name { color: #6B4E12; }
.nav .nav-logo-sub { color: #4A5A72; }
.nav .nav-links a { color: #7D5F1E; }
.nav .nav-links a:hover,
.nav .nav-links a[aria-current="page"] { color: #0A1A33; }
.nav .nav-links a::after { background: linear-gradient(to right, #7D5F1E, rgba(125,95,30,0.4)); }
.nav .nav-links a::before { background: #7D5F1E; }
.nav .nav-cta { background: #0A1A33; color: #F5F2F0; }
.nav .nav-cta:hover { background: #16294A; }
.nav .nav-burger span { background: #0A1A33; }
.nav .nav-burger .bud { background: var(--gold); }
.nav .lang { border-inline-end-color: rgba(10,26,51,0.15); }
/* 4A5A72 вместо 6B7A90: на кремовой шапке прежний давал 3.32
при норме 4.5. Метки языков — обычный текст, не декор. */
.nav .lang a { color: #4A5A72; }
.nav .lang a[aria-current="true"] { color: #7D5F1E; }
.nav .lang a[aria-current="true"]::after { background: #7D5F1E; }
/* ── Листок бургера ──
Был на 27 px ниже линий при их центровке — читался как
отдельный обрезанный овал слева от бургера. Поднят к концу
нижней линии: теперь бутон на ветке, а не мусор рядом. */
.nav-burger .bud {
inset-inline-start: auto; inset-inline-end: 1px;
inset-block-end: 13px;
inline-size: 7px; block-size: 7px;
}
/* Подпись под названием в шапке: цвет --faint давал 3.95
на новой тёплой основе. Прежняя основа была темнее, поэтому
проходило. Переведено на --muted — 5.9. */
.nav-logo-sub { color: var(--muted); } /* без !important: иначе перебивает светлый вариант шапки */
/* ── Тёплые карточки и тени в светлой зоне ──
Кремовое поле #F5F2F0 совпадает с эталоном Light Premium
(карточка владельца: R−B +5.6 против +5.0) — его не трогаем.
А вот два элемента были холоднее поля:
карточка #FFFFFF давала R−B 0, тень через navy — минус 41.
Тёплая тень с R−B +30 и тёплый белый +4 согласуют их с полем. */
.zone-light .card, .zone-light .program, .zone-light .pack-panel,
.zone-light .whom-item, .zone-light .entry,
.zone-light .level, .zone-light .gate, .zone-light .aside-note,
.zone-light .review, .zone-light .mark, .zone-light .product,
.zone-light .disclaimer, .zone-light .gain, .zone-light .next-step,
.zone-light .fit-col, .zone-light .post-card, .zone-light .posts-empty {
background: #FFFDFB;
border-color: rgba(74, 58, 38, 0.12);
box-shadow: 0 1px 2px rgba(74, 58, 38, 0.05),
0 12px 28px -14px rgba(74, 58, 38, 0.20);
}
.zone-light .card:hover, .zone-light .whom-item:hover,
.zone-light .entry:hover, .zone-light .product:hover,
.zone-light .gain:hover, .zone-light .next-step:hover,
.zone-light .post-card:hover {
box-shadow: 0 2px 4px rgba(74, 58, 38, 0.06),
0 20px 40px -18px rgba(74, 58, 38, 0.26);
}
.zone-light { --navy-raised: #FFFDFB; --navy-lift: #FFFDFB; }
/* ── Переключение шапки между режимами: без плавного фона ──
Плавный переход фона с кремового на тёмный проходит через
серое rgb(55,58,61) — та же ловушка интерполяции в sRGB,
что была на стыках зон. На этом сером золотое меню даёт 4.12
вместо 7.8, то есть полсекунды текст читается хуже нормы.
Проверка контраста поймала это в момент перехода.
Решение: на границе зоны фон и цвета меняются мгновенно.
Граница — это и есть место смены режима, плавность там
не нужна, а серую середину она создаёт неизбежно. */
.nav { transition: border-color var(--dur) var(--ease); }
.nav, .nav--on-light,
.nav .nav-logo-name, .nav .nav-logo-sub,
.nav .nav-links a, .nav .nav-cta,
.nav .nav-burger span { transition-property: border-color; }
/* Шапка стала светлой постоянно: тёмной зоны сверху больше нет,
значит нет и границы режимов — вместе с ней исчез дефект
серой середины перехода, найденный на этапе 39.
Наблюдатель в скрипте отключён, класс .nav--on-light больше
не нужен, но правила оставлены совместимыми. */
/* Остатки золота как текста после осветления верха. Эти элементы
раньше жили только в тёмной зоне, поэтому в списке не значились. */
.zone-light .fact-num,
.zone-light .free-badge__word,
.zone-light .free-badge,
.zone-light .hero-claim,
.zone-light .creed-sign,
.zone-light .lead-gold,
.zone-light .t-gold { color: #7D5F1E; }
.zone-light a { color: #7D5F1E; }
.zone-light a.btn-gold, .zone-light a.nav-cta { color: #0A1A33; }
.zone-light .footer a, .zone-light .nav a { color: inherit; }
/* ══════════════════════════════════════════════════════════════
18. ШВЫ МЕЖДУ БЛОКАМИ В СВЕТЛОЙ ЗОНЕ
После осветления верха все секции стали одного кремового
цвета, и страница читалась одной полосой на 12 экранов.
А единственные видимые переходы давала растяжка, которая
шла через серое.
Решение из двух частей:
1. Поверхности чередуются кость / песок. Классы секций
section--navy и section--abyss уже идут через одну
в разметке — используем это, не меняя разметку.
2. На стыке — волосяная золотая линия и ветвь по центру.
Ветвь нарисована в стилях, файлов не требует.
══════════════════════════════════════════════════════════════ */
/* Чередование по ПОРЯДКУ, а не по классу: классы section--navy
и section--abyss в разметке идут не строго через одну, поэтому
местами получалось два песочных блока подряд и шов пропадал.
Порядковый селектор даёт строгое чередование на любой странице. */
.zone-light > section:nth-child(odd) { background: #F5F2F0 !important; }
.zone-light > section:nth-child(even) { background: #EDE7DF !important; }
/* Шов: волосяная линия плюс ветвь. Ставится сверху каждой
секции, кроме первой — там шва быть не должно. */
.zone-light > section + section {
position: relative;
border-block-start: 1px solid rgba(201,162,75,0.22);
}
/* Ветвь на каждом шве убрана: восемь одинаковых элементов
на страницу читались как повтор без развития. Стыки оставлены
чистыми — их держат чередование поверхностей и волосяная линия.
Развитая графика лозы придёт отдельным этапом после публикации. */
/* Прежнее правило прозрачности для bg-layer из раздела 17
перебивается порядковым чередованием выше — оно идёт позже
в каскаде и тоже несёт !important. */
@media (max-width: 620px) {
}
/* ── Кнопка у карточки продукта ──
Была текстовой ссылкой и кнопкой не читалась. Обводка navy,
не золото: золотая обводка на светлом даёт 2.2.
Компактная и второстепенная — главное действие блока
это большая золотая кнопка ниже. */
.btn-product {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-body); font-size: 0.66rem; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.7rem 1.1rem; border-radius: var(--radius-leaf);
border: 1px solid var(--gold-45); color: var(--gold);
text-decoration: none; margin-block-start: auto;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-product:hover { background: var(--gold-08); border-color: var(--gold); }
.zone-light .btn-product {
border-color: rgba(10,26,51,0.35); color: #0A1A33;
}
.zone-light .btn-product:hover { background: rgba(10,26,51,0.05); border-color: #0A1A33; }
/* ── Штатная растяжка секций гасится в светлой зоне ──
Правило .section::before рисует тёмную полосу 140 px сверху
каждой секции — рассчитано на тёмный сайт. На кремовом фоне
это давало серую муть на каждом стыке: именно её владелец
видел как «из светлого в серое». Отдельные веера и ветви
были лишь заметной частью, а фон портила эта растяжка.
В светлой зоне гасим её целиком. */
.zone-light .section::before { display: none !important; }
/* ══════════════════════════════════════════════════════════════
19. ИСКЛЮЧЕНИЕ: КАДР В ПЕРВОМ ЭКРАНЕ
Правило светлой зоны гасит слой кадра во всех секциях.
Здесь единственное исключение — первый экран.
Штатная тёмная растяжка сюда не приходит: у первого экрана
класс .hero, а не .section, и его ::before отключён отдельным
правилом в ядре. Проверено до реализации.
Вуаль ПЕРЕВЁРНУТА: не тёмная поверх светлого кадра, а КРЕМОВАЯ
поверх тёмного. Иначе navy-текст на тёмном кадре нечитаем —
прямой контраст 1.37 при норме 4.5.
══════════════════════════════════════════════════════════════ */
/* Только первый экран ГЛАВНОЙ. На внутренних страницах кадры
холодные по тону (bg-morning 1.20, bg-jerusalem 0.85) и спорят
с композицией: вход там держит типографика и числа, не фото. */
/* Кадр в первом экране отменён владельцем: ни один из шести
старых не подошёл, новый не берём. Правую половину держат
растущая линия и портрет. */
.zone-light .hero--home .bg-img,
.zone-light .hero--home .bg-veil { display: none !important; }
.zone-light .hero--home > .bg-img {
background-image: url('../img/bg-dawn.jpg?v=4');
background-position: center 38%;
opacity: 1;
}
/* Кремовая вуаль: плотнее слева, где стоит текст, тоньше справа,
чтобы кадр читался хотя бы половиной. */
.zone-light .hero--home > .bg-veil {
background:
linear-gradient(100deg, rgba(245,242,240,0.93) 0%, rgba(245,242,240,0.86) 42%,
rgba(245,242,240,0.62) 72%, rgba(245,242,240,0.5) 100%),
linear-gradient(to bottom, rgba(245,242,240,0.35), rgba(245,242,240,0) 45%, rgba(245,242,240,0.95) 100%);
}
/* На телефоне свой вертикальный кадр — широкий обрезается втрое */
@media (max-width: 760px) {
/* bg-hero-tall — абстрактные искры, кадр Deep Identity: на телефоне
он не совпадал с рассветом на мониторе. До появления
вертикального рассвета используем тот же широкий кадр,
сдвинув точку кадрирования к светлой части. */
.zone-light .hero--home > .bg-img {
background-image: url('../img/bg-dawn.jpg?v=4');
background-position: 72% 42%;
}
/* На телефоне текст лежит поверх всей ширины кадра, поэтому
вуаль плотнее: при 0.82 контраст падал до 4.24 при норме 4.5. */
.zone-light .hero--home > .bg-veil {
background:
linear-gradient(to bottom, rgba(245,242,240,0.94) 0%, rgba(245,242,240,0.9) 48%,
rgba(245,242,240,0.8) 72%, rgba(245,242,240,0.96) 100%);
}
}
/* Переход к кремовой зоне ниже: кадр уже растворён вуалью,
отдельная растяжка не нужна и дала бы серую полосу. */
.zone-light .hero { background: #F5F2F0 !important; }
/* ── Зазор под закреплённой шапкой ──
На узком экране первая строка первого экрана стояла в 3–4 px
от кромки шапки на Deep Identity, воркшопе и странице об Илье:
читалось как наезд. На главной зазор 79 px, там правка не нужна.
Правило общее, чтобы не ловить это по одной странице. */
@media (max-width: 900px) {
/* Шапка закреплена и занимает 62 px. Первый отступ давал 40 —
не хватало, и подпись уезжала ПОД шапку на 20 px.
Считаем от высоты шапки плюс воздух. */
}
/* Главная на очень узком экране: текст прижат к низу (решение
этапа 8), но на 320 px его верх всё равно доходил до шапки —
зазор 4 px. Своё правило, потому что схема выравнивания там иная. */
/* ══════════════════════════════════════════════════════════════
20. РИТМ СВЕТЛОЙ СЕРЕДИНЫ
Общая причина пустоты справа: внутри широкого контейнера
стоят две узкие колонки одна под другой, обе прижаты влево.
Правая половина экрана пустовала на 49–57 %.
Приёмы РАЗНЫЕ, а не один на всех:
· пара «шапка + список» → две колонки, шапка липкая
· одиночная мысль → карточка с крупным акцентом
· длинный довод → текст в две колонки набора
══════════════════════════════════════════════════════════════ */
/* ── Приём 1: шапка слева, содержимое справа ──
Шапка липкая: при длинном списке заголовок остаётся в поле
зрения, и связь между вопросом и шагами не теряется. */
@media (min-width: 1000px) {
.zone-light .container > .container--narrow:first-child:not(:only-child) {
grid-area: шапка;
}
.zone-light .container > .container--narrow:last-child:not(:only-child) {
grid-area: тело;
}
.zone-light .container:has(> .container--narrow + .container--narrow) {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
grid-template-areas: "шапка тело";
gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: start;
}
.zone-light .container:has(> .container--narrow + .container--narrow)
> .container--narrow:first-child {
position: sticky; inset-block-start: calc(var(--nav-h) + 2.5rem);
}
/* Список справа перестаёт быть узким: он теперь в своей колонке */
.zone-light .container:has(> .container--narrow + .container--narrow)
> .container--narrow:last-child { max-width: none; }
}
/* ── Приём 2: одиночная мысль в рамке ──
Секция «Читать можно молча» несла одну фразу на весь экран.
Рамка слева и крупный кегль делают её высказыванием,
а не потерянным абзацем. */
.zone-light .entry--single {
border-inline-start: 2px solid var(--gold);
padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
max-width: 46ch;
}
.zone-light .entry--single .entry-title {
font-family: var(--font-display); font-weight: 450;
font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25;
}
/* ── Приём 3: длинный довод в две колонки набора ──
Только там, где абзацев много: две колонки коротких абзацев
читаются хуже одной. */
@media (min-width: 1100px) {
.zone-light .text-two-col {
columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem);
}
.zone-light .text-two-col > p { break-inside: avoid; margin-block-start: 0; }
.zone-light .text-two-col > p + p { margin-block-start: 1.1rem; }
}
/* ── Приём 4: одна колонка со всем содержимым делится надвое ──
На Deep Identity две секции устроены иначе: не пара колонок,
а одна узкая с заголовком и доводами подряд. Прижата влево
стилем в разметке, отсюда пустота 49 и 53 %.
Делим средствами сетки, без правки разметки: шапка блока
(надглавие, заголовок, линия) слева, доводы справа.
grid-auto-flow: dense позволяет доводам занять правый столбец
с первой строки, а не после шапки. */
@media (min-width: 1000px) {
.zone-light .container > .container--narrow:only-child > .reveal:has(> h2 + .rule) {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
grid-auto-flow: row dense;
column-gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: start;
}
.zone-light .container > .container--narrow:only-child > .reveal:has(> h2 + .rule) > .eyebrow,
.zone-light .container > .container--narrow:only-child > .reveal:has(> h2 + .rule) > h2,
.zone-light .container > .container--narrow:only-child > .reveal:has(> h2 + .rule) > .rule {
grid-column: 1;
}
.zone-light .container > .container--narrow:only-child > .reveal:has(> h2 + .rule) > :not(.eyebrow):not(h2):not(.rule) {
grid-column: 2;
}
/* Узкая колонка больше не ограничивает ширину: она стала сеткой */
.zone-light .container > .container--narrow:only-child:has(> .reveal > h2 + .rule) {
max-width: none;
}
}
/* ══════════════════════════════════════════════════════════════
21. ЛОЗА И ВЕТВИ
Линейная графика на полях светлой зоны. Прогрессия сверху
вниз: тонкая линия → одно ответвление → три листа →
переплетение → намёк на гроздь. Пять РАЗНЫХ элементов,
стороны чередуются.
Смысл: корни, рост, плод. Не орнамент и не виноград буквально.
Всё в стилях, файлов не требует, вес — доли килобайта.
На узком экране скрыто: там нет полей, графика лезла бы
под текст.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
.zone-light > section { position: relative; }
.zone-light > section::after {
content: ''; position: absolute;
inset-block-start: 12%;
inline-size: clamp(48px, 6vw, 110px);
block-size: min(76%, 340px);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
pointer-events: none;
opacity: 0;
transform: translateY(14px);
transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
z-index: 0;
}
.zone-light > section.is-visible::after,
html:not(.js-motion) .zone-light > section::after { opacity: 1; transform: none; }
.zone-light > section:nth-child(2)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%22220%22%20viewBox%3D%220%200%2060%20220%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M30%20220%20C30%20170%2030%20120%2030%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M30%2060%20C34%2054%2040%2052%2046%2053%20C44%2060%2037%2064%2030%2060Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
inset-inline-start: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
.zone-light > section:nth-child(3)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%22260%22%20viewBox%3D%220%200%2072%20260%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M36%20260%20C36%20200%2034%20150%2036%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M36%2090%20C30%2084%2024%2080%2016%2079%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M16%2079%20C12%2073%2012%2066%2016%2061%20C22%2066%2022%2074%2016%2079Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M36%20150%20C42%20145%2048%20142%2056%20141%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M56%20141%20C60%20135%2060%20128%2056%20123%20C50%20128%2050%20136%2056%20141Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
inset-inline-end: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
.zone-light > section:nth-child(4)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%22260%22%20viewBox%3D%220%200%2072%20260%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M36%20260%20C36%20200%2034%20150%2036%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M36%2090%20C30%2084%2024%2080%2016%2079%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M16%2079%20C12%2073%2012%2066%2016%2061%20C22%2066%2022%2074%2016%2079Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M36%20150%20C42%20145%2048%20142%2056%20141%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M56%20141%20C60%20135%2060%20128%2056%20123%20C50%20128%2050%20136%2056%20141Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
inset-inline-start: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
.zone-light > section:nth-child(5)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2286%22%20height%3D%22300%22%20viewBox%3D%220%200%2086%20300%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M43%20300%20C41%20240%2045%20180%2043%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.1%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M43%2070%20C36%2063%2028%2058%2018%2056%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M18%2056%20C13%2050%2013%2042%2018%2037%20C25%2042%2025%2051%2018%2056Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M43%20150%20C51%20144%2060%20140%2070%20139%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M70%20139%20C75%20133%2075%20125%2070%20120%20C63%20125%2063%20134%2070%20139Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M43%20225%20C36%20220%2030%20217%2022%20216%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M22%20216%20C18%20211%2018%20205%2022%20201%20C27%20205%2027%20212%2022%20216Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.45%22%2F%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%22110%22%20r%3D%221.6%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E");
inset-inline-end: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
.zone-light > section:nth-child(6)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2286%22%20height%3D%22300%22%20viewBox%3D%220%200%2086%20300%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M43%20300%20C41%20240%2045%20180%2043%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.1%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M43%2070%20C36%2063%2028%2058%2018%2056%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M18%2056%20C13%2050%2013%2042%2018%2037%20C25%2042%2025%2051%2018%2056Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M43%20150%20C51%20144%2060%20140%2070%20139%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M70%20139%20C75%20133%2075%20125%2070%20120%20C63%20125%2063%20134%2070%20139Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M43%20225%20C36%20220%2030%20217%2022%20216%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M22%20216%20C18%20211%2018%20205%2022%20201%20C27%20205%2027%20212%2022%20216Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.45%22%2F%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%22110%22%20r%3D%221.6%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E");
inset-inline-start: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
.zone-light > section:nth-child(7)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22320%22%20viewBox%3D%220%200%20100%20320%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M50%20320%20C46%20250%2054%20180%2050%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.2%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M50%2040%20C58%2060%2042%2080%2050%20100%20C58%20120%2042%20140%2050%20160%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M50%2060%20C40%2054%2030%2050%2018%2049%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M18%2049%20C13%2043%2013%2035%2018%2030%20C25%2035%2025%2044%2018%2049Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M50%20130%20C60%20124%2072%20120%2084%20119%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M84%20119%20C89%20113%2089%20105%2084%20100%20C77%20105%2077%20114%2084%20119Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M50%20200%20C40%20195%2032%20192%2022%20191%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M22%20191%20C17%20186%2017%20179%2022%20174%20C28%20179%2028%20187%2022%20191Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.48%22%2F%3E%3Cpath%20d%3D%22M50%20255%20C58%20251%2066%20249%2074%20249%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.28%22%2F%3E%3C%2Fsvg%3E");
inset-inline-end: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
.zone-light > section:nth-child(8)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22340%22%20viewBox%3D%220%200%20110%20340%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M55%20340%20C50%20260%2060%20180%2055%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.3%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M55%2030%20C64%2055%2046%2080%2055%20105%20C64%20130%2046%20155%2055%20180%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M55%2050%20C44%2044%2033%2040%2020%2039%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M20%2039%20C15%2033%2015%2025%2020%2020%20C27%2025%2027%2034%2020%2039Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M55%20120%20C66%20114%2078%20110%2090%20109%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M90%20109%20C95%20103%2095%2095%2090%2090%20C83%2095%2083%20104%2090%20109Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cg%20fill%3D%22%23C9A24B%22%20opacity%3D%22.45%22%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%22238%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22238%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2268%22%20cy%3D%22238%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22252%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22252%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22266%22%20r%3D%222.8%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M55%20210%20C52%20220%2054%20228%2055%20232%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M68%20226%20C74%20220%2080%20218%2086%20219%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.3%22%2F%3E%3C%2Fsvg%3E");
inset-inline-start: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
.zone-light > section:nth-child(9)::after {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22340%22%20viewBox%3D%220%200%20110%20340%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M55%20340%20C50%20260%2060%20180%2055%204%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.3%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M55%2030%20C64%2055%2046%2080%2055%20105%20C64%20130%2046%20155%2055%20180%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M55%2050%20C44%2044%2033%2040%2020%2039%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M20%2039%20C15%2033%2015%2025%2020%2020%20C27%2025%2027%2034%2020%2039Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M55%20120%20C66%20114%2078%20110%2090%20109%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.8%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M90%20109%20C95%20103%2095%2095%2090%2090%20C83%2095%2083%20104%2090%20109Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Cg%20fill%3D%22%23C9A24B%22%20opacity%3D%22.45%22%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%22238%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22238%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2268%22%20cy%3D%22238%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22252%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22252%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22266%22%20r%3D%222.8%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M55%20210%20C52%20220%2054%20228%2055%20232%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M68%20226%20C74%20220%2080%20218%2086%20219%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.7%22%20opacity%3D%22.3%22%2F%3E%3C%2Fsvg%3E");
inset-inline-end: max(clamp(6px, 2.2vw, 34px), calc(50vw - var(--container) / 2 - 9rem));
}
}
@media (prefers-reduced-motion: reduce) {
.zone-light > section::after { transition: none !important; transform: none !important; opacity: 1; }
}
/* ══════════════════════════════════════════════════════════════
22. HOVER-ЛИСТЬЯ
При наведении на блок из-за его края выходит лист. Сторона
разная у разных блоков: снизу, сверху, слева, справа —
чтобы это не читалось одним повторённым приёмом.
Только там, где есть курсор: hover: hover и pointer: fine.
На телефоне графика не грузится вовсе — правило внутри
медиа-запроса, браузер не запрашивает фон.
Раскладка не сдвигается: лист лежит абсолютно, вне потока,
родитель уже position: relative.
══════════════════════════════════════════════════════════════ */
/* Плюс ограничение по ширине: лист выходит за край блока на 16 px,
и на узком окне это давало горизонтальную прокрутку. На телефоне
листьев нет по hover/pointer, но узкое окно на мониторе с мышью
тоже бывает — там полей для листа нет. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
.zone-light .card, .zone-light .whom-item, .zone-light .entry,
.zone-light .level, .zone-light .product, .zone-light .gain,
.zone-light .mark, .zone-light .next-step, .zone-light .fit-col,
.zone-light .review { position: relative; }
.zone-light .card::before, .zone-light .whom-item::before,
.zone-light .entry::before, .zone-light .level::before,
.zone-light .product::before, .zone-light .gain::before,
.zone-light .mark::before, .zone-light .next-step::before,
.zone-light .fit-col::before, .zone-light .review::before {
content: ''; position: absolute;
inline-size: 40px; block-size: 28px;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2228%22%20viewBox%3D%220%200%2040%2028%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%2026%20C10%2024%2016%2020%2020%2014%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M20%2014%20C26%206%2034%203%2039%204%20C37%2013%2029%2019%2020%2014Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M23%2012%20C28%2010%2033%208%2037%206%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.5%22%20opacity%3D%22.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
opacity: 0; pointer-events: none; z-index: 2;
transition: opacity .5s var(--ease), transform .55s cubic-bezier(.2,.7,.3,1);
}
/* Снизу справа */
.zone-light .card::before, .zone-light .gain::before {
inset-block-end: -10px; inset-inline-end: 14px;
transform: translateY(10px) rotate(6deg) scale(.8); transform-origin: bottom right;
}
/* Сверху справа */
.zone-light .whom-item::before, .zone-light .mark::before {
inset-block-start: -12px; inset-inline-end: 16px;
transform: translateY(-10px) rotate(-160deg) scale(.8); transform-origin: top right;
}
/* Слева по центру */
.zone-light .level::before {
inset-block-start: 22px; inset-inline-start: -16px;
transform: translateX(-10px) rotate(160deg) scale(.8); transform-origin: left center;
}
/* ── ЛИСТ У БЛОКОВ «КОМУ ПОДОЙДЁТ» ──
Прежде он висел на 16 px ЛЕВЕЕ блока и после появления
оставался снаружи: читалось как съехавший элемент.
Теперь лист привязан к нижнему углу ВНУТРИ блока —
низ выбран потому, что сверху у этих блоков заголовок,
и лист спорил бы с ним за внимание.
Стороны разведены: у левой колонки лист в левом углу,
у правой — в правом, зеркально. Так пара блоков читается
как раскрывшийся разворот, а не как повторённый приём. */
.zone-light .fit-col--yes::before {
inset-block-end: 12px; inset-inline-start: 14px;
transform: translateY(10px) rotate(174deg) scale(.8); transform-origin: bottom left;
}
.zone-light .fit-col--no::before {
inset-block-end: 12px; inset-inline-end: 14px;
transform: translateY(10px) rotate(6deg) scale(.8); transform-origin: bottom right;
}
.zone-light .fit-col--yes:hover::before { transform: rotate(180deg); }
.zone-light .fit-col--no:hover::before { transform: rotate(0deg); }
/* Справа по центру */
.zone-light .product::before, .zone-light .review::before {
inset-block-start: 26px; inset-inline-end: -16px;
transform: translateX(10px) rotate(-8deg) scale(.8); transform-origin: right center;
}
/* Снизу слева */
.zone-light .entry::before, .zone-light .next-step::before {
inset-block-end: -10px; inset-inline-start: 18px;
transform: translateY(10px) rotate(174deg) scale(.8); transform-origin: bottom left;
}
.zone-light .card:hover::before, .zone-light .whom-item:hover::before,
.zone-light .entry:hover::before, .zone-light .level:hover::before,
.zone-light .product:hover::before, .zone-light .gain:hover::before,
.zone-light .mark:hover::before, .zone-light .next-step:hover::before,
.zone-light .fit-col:hover::before, .zone-light .review:hover::before {
opacity: 1;
}
.zone-light .review:hover::before { transform: none; }
/* Возврат к исходному повороту при раскрытии */
.zone-light .whom-item:hover::before, .zone-light .mark:hover::before { transform: rotate(-166deg); }
.zone-light .level:hover::before { transform: rotate(166deg); }
.zone-light .entry:hover::before, .zone-light .next-step:hover::before { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
.zone-light .card::before, .zone-light .whom-item::before,
.zone-light .entry::before, .zone-light .level::before,
.zone-light .product::before, .zone-light .gain::before,
.zone-light .mark::before, .zone-light .next-step::before,
.zone-light .fit-col::before, .zone-light .review::before {
transition: none !important; display: none;
}
}
/* Свечение первого экрана анимировано и в отдельной фазе выходило
за правый край на 5 px, давая горизонтальную прокрутку
на телефоне. Обрезаем по границе секции: свечение декоративно,
потерять его край не жалко. */
.hero { overflow-x: clip; }
@supports not (overflow: clip) { .hero { overflow-x: hidden; } }
/* ══════════════════════════════════════════════════════════════
23. ТЕЛЕФОН: ОБЛАСТЬ КАСАНИЯ И КЕГЛЬ
Найдено сплошной проверкой на узкой ширине.
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Кегль набора. 13.4 px в описаниях продукции и 13.6 в оговорках
на телефоне читаются тяжело: поднимаем до 15. Надглавия
капителью 10.2 px оставляем — это метки, не набор, и они
набраны с разрядкой, которая держит разборчивость. */
.product-desc, .disclaimer-text p, .t-small { font-size: 0.94rem; line-height: 1.65; }
/* Надглавия капителью были 10.2 px. Это метки, а не набор,
но для аудитории 45+ на телефоне это мелко даже для метки.
Поднимаем до 11.7 и слегка убираем разрядку, чтобы строка
не стала длиннее и не переносилась. */
.eyebrow { font-size: 0.73rem; letter-spacing: 0.14em; }
/* Метки капителью: порог 11 px. Ниже — не читаются
на телефоне даже с разрядкой. */
.hero-facts__cap, .feature-entry__cap, .feature-levels__cap { font-size: 0.74rem; letter-spacing: 0.13em; }
.creed-sign, .hero-scroll { font-size: 0.82rem; letter-spacing: 0.1em; }
.feature-entry__note, .pack-aside__offer { font-size: 0.9rem; }
/* Область касания меньше 40 px. Увеличиваем полем, не кеглем:
раскладка не меняется, а палец попадает. */
.nav-logo { padding-block: 0.5rem; }
.review-link, .source-link, .t-gold, .footer-credit a,
.footer-links a, .btn-ghost { padding-block: 0.7rem; display: inline-block; }
.btn, .btn-gold, .btn-outline { padding-block: 1.05rem; }
}
/* ══════════════════════════════════════════════════════════════
24. ПЕРВЫЙ ЭКРАН ГЛАВНОЙ: ЛИНИЯ И ПОРТРЕТ
Кадр отменён. Правую половину держат растущая линия
и портрет; определение VTG перенесено во вторую секцию —
это справка, а не вход.
Линия в полный рост экрана: корень внизу, ствол, три
ветвления снизу вверх с убыванием, почка на вершине.
Это НАЧАЛО системы лозы, что идёт ниже по странице:
там она ветвится дальше и уплотняется к подвалу.
══════════════════════════════════════════════════════════════ */
.hero-grid {
position: relative; z-index: 2;
max-width: var(--container); margin-inline: auto; inline-size: 100%;
display: grid; grid-template-columns: 1fr;
gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
@media (min-width: 1000px) {
.hero-grid { grid-template-columns: 1.06fr 0.94fr; gap: clamp(2rem, 5vw, 4.5rem); }
}
.hero-side { position: relative; display: flex; justify-content: center; align-items: flex-end; }
/* ── Линия ── */
.hero-vine {
position: absolute; inset-block: 0; inset-inline-start: -2%;
inline-size: clamp(150px, 30vw, 320px);
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20900%22%20fill%3D%22none%22%20preserveAspectRatio%3D%22xMidYMax%20meet%22%3E%3Cpath%20d%3D%22M100%20900%20C92%20862%2078%20840%2056%20824%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.1%22%20opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M100%20900%20C108%20862%20122%20840%20144%20824%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.1%22%20opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M100%20900%20C97%20866%2095%20846%2092%20830%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.9%22%20opacity%3D%22.22%22%2F%3E%3Cpath%20d%3D%22M100%20880%20C104%20720%2092%20560%20100%20400%20C107%20268%2096%20150%20100%2024%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.7%22%20opacity%3D%22.62%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M99%20636%20C82%20618%2062%20606%2038%20600%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.1%22%20opacity%3D%22.42%22%2F%3E%3Cpath%20d%3D%22M38%20600%20C29%20588%2029%20570%2038%20558%20C50%20570%2050%20589%2038%20600Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M101%20430%20C120%20414%20142%20404%20166%20400%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%221.1%22%20opacity%3D%22.42%22%2F%3E%3Cpath%20d%3D%22M166%20400%20C176%20388%20176%20370%20166%20358%20C154%20370%20154%20389%20166%20400Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M99%20214%20C86%20202%2072%20194%2054%20191%22%20stroke%3D%22%23C9A24B%22%20stroke-width%3D%22.9%22%20opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M54%20191%20C46%20182%2046%20169%2054%20160%20C63%20169%2063%20183%2054%20191Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22636%22%20r%3D%222.6%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22430%22%20r%3D%222.4%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22214%22%20r%3D%222%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.42%22%2F%3E%3Cpath%20d%3D%22M100%2024%20C94%2016%2094%206%20100%200%20C107%206%20107%2016%20100%2024Z%22%20fill%3D%22%23C9A24B%22%20opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E") center bottom / contain no-repeat;
pointer-events: none; z-index: 0;
/* Прорастание: линия проявляется снизу вверх за 1.6 с.
Маска движется, сам рисунок не трогается. */
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 var(--рост, 100%), transparent calc(var(--рост, 100%) + 6%));
mask-image: linear-gradient(to top, #000 0%, #000 var(--рост, 100%), transparent calc(var(--рост, 100%) + 6%));
--рост: 100%;
}
.js-motion .hero-vine { --рост: 0%; animation: vine-grow 1.8s cubic-bezier(.25,.7,.3,1) .35s forwards; }
@property --рост { syntax: ''; inherits: false; initial-value: 0%; }
@keyframes vine-grow { to { --рост: 100%; } }
/* Запас на случай, если браузер не поддерживает анимацию
пользовательского свойства: линия просто видна целиком. */
@supports not (background: paint(x)) {
.js-motion .hero-vine { --рост: 100%; animation: none; }
}
/* ── Портрет ── */
.hero-portrait {
position: relative; z-index: 1;
inline-size: min(100%, 340px);
line-height: 0; /* пустая полоса под снимком */
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: 0 2px 4px rgba(74,58,38,0.06), 0 26px 52px -22px rgba(74,58,38,0.28);
border-block-start: 2px solid var(--gold);
}
.hero-portrait img { display: block; inline-size: 100%; block-size: auto; }
/* На телефоне портрет ниже текста и меньше: экран и так плотный */
/* ── Телефон: линия не веточкой сбоку, а фоном за текстом ──
Тонкая линия у края читалась как случайный прутик: полей
на узком экране нет, и ей негде стоять. Здесь она уходит
ЗА текст, крупная и очень слабая — её чувствуешь, а не
разглядываешь. Портрет уменьшен и прижат вправо, чтобы
первый экран не превращался в два. */
@media (max-width: 999px) {
.hero--home { position: relative; }
.hero-side {
position: absolute; inset: 0; z-index: 0;
display: block; padding: 0; min-block-size: 0;
pointer-events: none;
}
.hero-vine {
position: absolute; inset-block: 4% 0; inset-inline-start: 50%;
transform: translateX(-50%);
inline-size: min(150%, 620px); block-size: 96%;
opacity: 0.5; background-position: center bottom;
}
.hero-portrait { display: none; }
.hero-content { position: relative; z-index: 1; }
/* ПОЛОМКА 07.08.2026 И ЕЁ ПРИЧИНА.
Правило выше делает .hero-side абсолютным на всю площадь
первого экрана: оно писалось, когда внутри лежала ТОЛЬКО
лоза, которой положено быть за текстом. Когда в правую
колонку встала карточка доказательств, она унаследовала
абсолютность и легла поверх заголовка — текст на тексте.
Для первого экрана с ростком возвращаем колонку в поток:
в разметке она идёт после текста, значит встанет под ним. */
.hero--sprout .hero-side {
position: static; inset: auto; pointer-events: auto;
z-index: 1; padding: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-vine { --рост: 100% !important; animation: none !important; }
}
/* Первый экран должен помещаться в окно 900 px вместе с кнопками.
Замер до правки: низ кнопок 983 при окне 900. Поджимаем
отступы и межстрочие заголовка, содержание не трогаем. */
@media (min-width: 1000px) and (max-height: 1000px) {
.zone-light > .hero--home { padding-block: calc(var(--nav-h) + 1.75rem) 2rem; }
.hero--home h1 { font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1.04; }
.hero--home .hero-claim { font-size: 1.02rem; line-height: 1.55; margin-block-start: 1.1rem; }
.hero--home .btn-row { margin-block-start: 1.5rem !important; }
.hero--home .hero-brand { margin-block-end: 0.7rem; }
.hero--home .hero-scroll { display: none; }
.hero-portrait { inline-size: min(100%, 300px); }
}
/* Линия занимает всю высоту стороны, а не половину: она должна
читаться как ствол во весь экран, а не как росчерк. */
.hero-side { min-block-size: min(60vh, 520px); align-items: center; }
.hero-vine { inset-block: 0; }
/* Свечение и виньетка первого экрана рассчитаны на тёмный фон:
на кремовом они дают серую муть по краям. Гасим в светлой зоне —
та же ловушка, что была со штатной растяжкой секций. */
.zone-light .hero-aura,
.zone-light .hero-vignette { display: none !important; }
/* Линия уходила под портрет и читалась тонкой полоской.
Ставим её слева от портрета, в своей полосе. */
@media (min-width: 1000px) {
.hero-side { display: grid; grid-template-columns: minmax(140px, 0.42fr) 1fr;
gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; }
.hero-vine { position: relative; inset: auto; inline-size: 100%;
block-size: 100%; min-block-size: min(58vh, 500px);
background-position: center center; }
.hero-portrait { inline-size: 100%; max-inline-size: 320px; }
}
/* ── Вариант B: манифест главным героем ──
Центральная фраза набирается крупно и занимает место
заголовка. Прежний заголовок становится подзаголовком.
Портрета нет, экран держат кегль и линия. */
.hero-manifest {
font-family: var(--font-display); font-weight: 450;
font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.1;
letter-spacing: -0.005em; max-width: 20ch;
}
.hero-manifest em { font-style: italic; }
.hero-sub {
font-family: var(--font-display); font-style: italic;
font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.5;
color: var(--muted); margin-block-start: 1.25rem; max-width: 34ch;
}
/* Без портрета линия занимает всю правую половину и становится
единственным событием — значит должна быть крупнее. */
.hero--manifest .hero-side { grid-template-columns: 1fr; justify-items: center; }
.hero--manifest .hero-vine { max-inline-size: 340px; min-block-size: min(64vh, 560px); }
/* ── Уровни участия в блоке главного продукта ──
Встали вместо портрета: блок про программу, а не про человека,
и портрет там был третьим на странице. Цены идут по возрастанию,
базовая первой. */
.feature-levels { max-inline-size: 26rem; }
.feature-levels__cap {
font-family: var(--font-body); font-size: 0.62rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold); margin-block-end: 1.2rem;
}
.zone-light .feature-levels__cap { color: #7D5F1E; }
.feature-levels__list { list-style: none; counter-reset: none; }
.feature-levels__list li {
display: grid; grid-template-columns: 1fr auto;
gap: 0.15rem 1rem; align-items: baseline;
padding-block: clamp(0.85rem, 2vw, 1.15rem);
border-block-start: 1px solid rgba(201,162,75,0.26);
}
.feature-levels__list li:last-child { border-block-end: 1px solid rgba(201,162,75,0.26); }
.feature-levels__name {
font-family: var(--font-display); font-weight: 450;
font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--white);
}
.zone-light .feature-levels__name { color: #0A1A33; }
.feature-levels__price {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--gold);
justify-self: end; white-space: nowrap;
}
.zone-light .feature-levels__price { color: #7D5F1E; }
.feature-levels__note {
grid-column: 1 / -1; font-size: 0.82rem; line-height: 1.5;
color: var(--muted);
}
/* ── Дерево сообщества на светлом ──
Тонкие золотые линии на кремовом рассыпались в набор точек:
на тёмном фоне они читались, на светлом теряют опору.
Ставим на песочную подложку — графика становится предметом,
а не случайными штрихами. Плюс укрупняем и уплотняем линии. */
.zone-light .community-art {
background: #EDE7DF;
border-radius: var(--radius-card);
border-block-start: 2px solid var(--gold);
padding: clamp(0.6rem, 1.4vw, 1rem) clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.8rem, 1.8vw, 1.2rem);
box-shadow: 0 1px 2px rgba(74,58,38,0.05), 0 16px 34px -18px rgba(74,58,38,0.22);
}
/* Секция чередования красит фон — карточка должна быть заметно
плотнее своей секции, иначе подложка не читается */
.zone-light > section:nth-child(even) .community-art { background: #F5F2F0; }
.zone-light .community-art img {
/* Графика была мелкой внутри крупной карточки. Растягиваем
на всю её ширину и уплотняем линии: тонкое золото на кремовом
теряется, а здесь оно несёт смысл, не декор. */
/* В самой графике верхняя треть намеренно пуста — «место
для роста». В карточке это читалось просто дырой, поэтому
кадрируем по низу: побеги заполняют плашку. */
/* Обрезка срезала крону. Дерево показывается целиком. */
filter: saturate(1.25) contrast(1.2);
inline-size: 100%; max-inline-size: none; block-size: auto;
}
.zone-light .community-note {
margin-block-start: clamp(0.75rem, 2vw, 1.25rem);
font-family: var(--font-display); font-style: italic;
font-size: 0.95rem; color: #6B4E12; text-align: center;
}
/* ══════════════════════════════════════════════════════════════
25. ВАРИАНТ C: КАДР С РОСТКОМ В ПЕРВОМ ЭКРАНЕ
Кадр светлый сам по себе — вуаль почти не нужна, только
лёгкая, чтобы текст держался с запасом. Проверено: в зоне
текста контраст navy 15.8 на вертикали и 13.7 на горизонтали,
в худшей точке 15.3 и 9.3.
Линия и портрет в первом экране выключены: росток и есть
рост, три события на одном экране спорили бы. Лоза
на остальных секциях остаётся — росток становится её началом.
══════════════════════════════════════════════════════════════ */
/* Весомость: правило .zone-light .hero--home .bg-img гасит фон
и стоит выше по счёту селекторов. Повторяем его цепочку. */
.zone-light .hero--sprout .bg-img,
.zone-light .hero--sprout .bg-veil { display: block !important; }
/* Гасим и линию, и портрет: правило на .hero-side не срабатывало,
потому что в светлой зоне у них свои правила выше по счёту.
Росток и есть рост — три события на одном экране спорят. */
/* Гасим линию и портрет: росток в фоне и есть рост, три события
на одном экране спорили бы. Сама правая колонка ОСТАЁТСЯ —
с 07.08.2026 в ней стоят доказательства, а не изображение. */
.hero--sprout .hero-vine,
.hero--sprout .hero-portrait { display: none !important; }
.zone-light .hero--sprout > .bg-img {
background-image: url('../img/bg-sprout.jpg?v=1');
background-position: center 62%;
opacity: 1;
}
.zone-light .hero--sprout > .bg-veil {
background: linear-gradient(100deg,
rgba(245,242,240,0.72) 0%, rgba(245,242,240,0.58) 46%,
rgba(245,242,240,0.24) 78%, rgba(245,242,240,0.14) 100%);
}
@media (max-width: 900px) {
/* Росток на телефоне выходил ровно под главной кнопкой и был
срезан ею пополам. Сдвигаем кадр вправо и ниже: побег
встаёт правее кнопки, в свободном поле, а не за ней.
Плюс сама кнопка не растягивается на всю ширину, чтобы
справа осталось место побегу. */
/* ── Телефон: кадр полосой ПОД текстом, а не фоном за ним ──
На вертикальном кадре росток стоит по центру, а на узком
экране центр всегда занят текстом и кнопкой. Три попытки
сдвинуть кадр не помогли: он лез то под цитату, то под
кнопку. Решение другое — кадр перестаёт быть фоном
и становится нижней полосой. Текст выше, растение ниже,
пересечения нет вовсе. */
.zone-light .hero--sprout > .bg-img {
background-image: url('../img/bg-sprout-tall.jpg?v=1');
/* Кадрируем по ростку: он в нижней трети вертикального снимка */
background-position: center 78%;
background-size: cover;
inset-block-start: auto;
block-size: clamp(210px, 30vh, 260px);
}
.zone-light .hero--sprout > .bg-veil {
inset-block-start: auto;
block-size: clamp(240px, 42vh, 340px);
/* Растворяем только верхнюю кромку полосы, сам кадр
оставляем в силе: прежняя вуаль гасила его целиком. */
background: linear-gradient(to bottom,
#F5F2F0 0%, rgba(245,242,240,0.55) 10%, rgba(245,242,240,0) 26%);
}
/* Поле снизу оставалось от того времени, когда под текстом
лежала полоса фонового ростка: под неё держали 226–280 px.
Теперь росток стоит отдельным кадром ВЫШЕ карточки, а поле
осталось и давало 244 px пустоты после фразы Григория.
Ставим обычный отступ секции. */
.zone-light .hero--sprout { padding-block-end: clamp(3.25rem, 9vw, 5rem); }
.zone-light .hero--sprout .btn-row { margin-block-start: 1.25rem !important; }
.hero--sprout h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.08; }
.hero--sprout .hero-claim { font-size: 0.95rem; line-height: 1.5; margin-block-start: 0.9rem; }
.hero--sprout .hero-brand { margin-block-end: 0.5rem; }
.zone-light .hero--sprout > .bg-veil {
background: linear-gradient(to bottom,
rgba(245,242,240,0.7) 0%, rgba(245,242,240,0.62) 52%,
rgba(245,242,240,0.3) 80%, rgba(245,242,240,0.2) 100%);
}
}
/* Правая половина занята доказательствами (с 07.08.2026).
Прежде она была пуста, и плотность первого экрана
составляла 6.6 % — худшее значение на сайте. */
/* Правая половина снова свободна: доказательства переехали
полосой под первый экран (09.08.2026). Карточка закрывала
росток — главный образ страницы, ради которого этот кадр
и снимался. Текст занимает левую часть, справа дышит кадр. */
@media (min-width: 1000px) {
.hero--sprout .hero-grid { grid-template-columns: 1fr; }
.hero--sprout .hero-content { max-inline-size: 44rem; }
.hero--sprout .hero-side { display: none; }
}
/* ── Дерево перед подвалом ──
Стоит в светлой зоне вплотную к тёмному подвалу: крона
в кремовом, корни уходят в тёмное. Завершение оси страницы. */
.tree-footer {
background: #F5F2F0;
padding-block: clamp(2rem, 5vw, 3.5rem) 0;
line-height: 0;
overflow: hidden;
}
.tree-footer img {
display: block;
inline-size: min(100%, 1600px);
block-size: auto;
margin-inline: auto;
opacity: 0;
transform: translateY(18px);
transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.tree-footer.is-visible img,
html:not(.js-motion) .tree-footer img { opacity: 1; transform: none; }
/* На телефоне дерево обрезалось по краям. Показываем целиком:
ширина по экрану, высота своя — лучше меньше, но всё дерево,
чем крупный обрубок. */
@media (max-width: 760px) {
/* overflow: visible давал горизонтальную прокрутку 31 px:
дерево шире экрана на 16 %. Обрезаем по родителю. */
.tree-footer { overflow: hidden; padding-block-start: clamp(1.5rem, 5vw, 2.5rem); }
.tree-footer img { inline-size: 116%; max-inline-size: none; margin-inline-start: -8%; }
}
@media (prefers-reduced-motion: reduce) {
.tree-footer img { opacity: 1 !important; transform: none !important; transition: none; }
}
/* ══════════════════════════════════════════════════════════════
26. ИЗОБРАЖЕНИЯ В БЛОКАХ
Снимок стоит РЯДОМ с текстом, а не под ним: фон за текстом
всегда компромисс, а здесь кадр работает в полную силу.
══════════════════════════════════════════════════════════════ */
.block-media {
border-radius: var(--radius-card);
overflow: hidden;
line-height: 0;
border-block-start: 2px solid var(--gold);
box-shadow: 0 1px 2px rgba(74,58,38,0.05), 0 18px 38px -20px rgba(74,58,38,0.24);
}
.block-media img { inline-size: 100%; block-size: auto; display: block; }
.block-media figcaption {
display: block; line-height: 1.5;
padding: 0.85rem 1.1rem 1rem;
font-family: var(--font-display); font-style: italic;
font-size: 0.9rem; color: #6B4E12; background: #FFFDFB;
}
/* Пара «текст и снимок» на широком экране */
.media-pair { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) {
.media-pair { grid-template-columns: 1.05fr 0.95fr; }
.media-pair--right .block-media { order: 2; }
}
/* Снимок во всю ширину блока — там, где он сам событие */
.block-media--wide { max-inline-size: 100%; margin-block-start: clamp(1.75rem, 4vw, 2.75rem); }
/* ── Подложки светлой темы ──
ВАЖНО: псевдоэлементы ::before и ::after у секций уже заняты
штатными правилами, а в светлой зоне ::before ещё и погашен.
Поэтому подложка вешается на ФОН САМОЙ СЕКЦИИ: сначала вуаль
градиентом, под ней кадр. Порядок в background именно такой —
первый слой рисуется поверх.
Обе подложки имеют ноль тёмных пикселей, поэтому вуаль лёгкая:
она держит запас по контрасту, а не спасает читаемость. */
.zone-light .soft-bg--plaster {
background:
linear-gradient(rgba(245,242,240,0.30), rgba(245,242,240,0.30)),
url('../img/bg-plaster.jpg?v=2') center / cover no-repeat !important;
}
.zone-light .soft-bg--curtain {
background:
linear-gradient(100deg, rgba(245,242,240,0.6) 0%, rgba(245,242,240,0.34) 56%,
rgba(245,242,240,0.1) 100%),
url('../img/bg-curtain.jpg?v=1') right center / cover no-repeat !important;
}
/* На секции с подложкой лоза не нужна: два фоновых события спорят */
.zone-light .soft-bg::after { display: none !important; }
/* Дерево стоит последним в светлой зоне, но растяжка зоны в
подвал накрывала его целиком — крона уходила в тёмное.
Поднимаем дерево над растяжкой: крона в кремовом, корни
в тёмном, как и задумано. */
.tree-footer { background: transparent; padding-block-end: 0; position: relative; z-index: 4; }
/* Растяжка ниже: она должна начинаться от корней, а не от кроны */
.zone-light::after { block-size: clamp(36px, 5vw, 64px); }
/* ── Собственные слои первого экрана Deep Identity ──
У этой страницы свои .hero-bg и .hero-veil, а не общие
.bg-img и .bg-veil. Правило светлой зоны их не касалось,
и страница осталась ТЁМНОЙ: тёмный кадр и вуаль поверх
кремовой секции. Проверка контраста этого не поймала —
она считает цвета из стилей, а не то, что нарисовано.
Гасим здесь, как погасили общие слои. */
.zone-light .hero-bg,
.zone-light .hero-veil { display: none !important; }
/* Короткое упоминание вместо прайс-листа на главной */
.feature-entry {
max-inline-size: 24rem;
border-inline-start: 2px solid var(--gold);
padding-inline-start: clamp(1.25rem, 3vw, 2rem);
}
.feature-entry__cap {
font-family: var(--font-body); font-size: 0.62rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: #7D5F1E; margin-block-end: 1rem;
}
.feature-entry__lead {
font-family: var(--font-display); font-size: clamp(1.15rem, 2.1vw, 1.5rem);
line-height: 1.4; color: #0A1A33;
}
.feature-entry__price {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.6rem, 3vw, 2.2rem); color: #7D5F1E;
margin-block-start: 1.1rem;
}
.feature-entry__note {
font-size: 0.86rem; line-height: 1.6; color: var(--muted);
margin-block-start: 0.75rem;
}
/* Льготная цена рядом с базовой. Базовая крупная и первая,
льгота мельче и после — человек должен видеть, что это
именно льгота, а не обычная цена. */
.pack-aside__offer {
font-size: 0.84rem; line-height: 1.5; color: var(--muted);
margin-block-start: 0.35rem;
}
.pack-aside__offer b { font-weight: 500; color: #7D5F1E; }
/* Кегль меток на телефоне. Прежние правила стояли в общем блоке
max-width: 900 и перебивались более весомыми объявлениями.
Здесь они последние в файле, поэтому выигрывают. */
@media (max-width: 900px) {
.zone-light .hero-scroll,
.zone-light .creed-sign { font-size: 0.82rem; letter-spacing: 0.1em; }
.zone-light .feature-entry__cap,
.zone-light .hero-facts__cap,
.zone-light .feature-levels__cap { font-size: 0.74rem; letter-spacing: 0.13em; }
.zone-light .feature-entry__note,
.zone-light .pack-aside__offer,
.zone-light .disclaimer-text p { font-size: 0.92rem; line-height: 1.62; }
}
/* ------------------------------------------------------------
ССЫЛКА В СТРОКЕ С НОРМАЛЬНОЙ ОБЛАСТЬЮ КАСАНИЯ
Строчная ссылка внутри абзаца даёт 16–19 px высоты касания
при норме 44. Кегль при этом не меняется: растягивается
сам элемент. На мониторе не нужно — там мышь.
------------------------------------------------------------ */
@media (max-width: 900px) {
.link-touch { display: inline-flex; align-items: center; min-block-size: 44px; }
}
/* ------------------------------------------------------------
БЛОК «ШАПКА СЛЕВА, ДОВОДЫ СПРАВА»
Явная разбивка на два столбца вместо раскладки плоского
списка детей средствами сетки. Разница принципиальная:
там строки делились между заголовком и абзацами, и высокий
заголовок раздувал строку, оставляя справа провал.
Здесь у каждой колонки свой поток.
------------------------------------------------------------ */
.split-body { display: grid; gap: 1.1rem; max-width: 62ch; }
.split-body .quote { margin-block: 0.4rem; }
@media (min-width: 1000px) {
.split {
display: grid; grid-template-columns: 0.82fr 1.18fr;
column-gap: clamp(2.5rem, 6vw, 5.5rem);
align-items: start;
}
/* Узкая колонка не должна дополнительно поджимать сетку */
.container--narrow:has(> .split) { max-width: none; }
}
/* ------------------------------------------------------------
ТОЧКИ-УКАЗАТЕЛИ ПОД ЛЕНТОЙ
Правила были только в постраничных стилях страницы здоровья
и жили внутри медиазапроса до 900 px. Ленте на главной они
нужны на всех ширинах, поэтому переезжают в ядро.
Ставит их модуль initSwipes; без скрипта лента всё равно
прокручивается, теряются только точки.
------------------------------------------------------------ */
.swipe-dots { display: flex; gap: 0.45rem; justify-content: center;
margin-block-start: 0.9rem; }
.swipe-dots[hidden] { display: none; }
.swipe-dots i {
inline-size: 6px; block-size: 6px; border-radius: 50%;
background: rgba(10,26,51,0.18);
transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.swipe-dots i.is-on { background: var(--gold); transform: scale(1.35); }
/* ------------------------------------------------------------
БЛОК «КОМУ ПОДОЙДЁТ, А КОМУ НЕТ»
Две колонки: слева причины идти, справа причины не идти.
Честный отказ работает на доверие сильнее уговоров, поэтому
блок стоит на воркшопе и на Deep Identity — до цены.
------------------------------------------------------------ */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
/* Кадр — третий элемент сетки: без этого он падал в левую колонку
и справа оставалось пустое поле в половину экрана.
Та же ошибка, что была в блоке истории на странице здоровья. */
.fit > .block-media { grid-column: 1 / -1; }
.fit-col { padding: clamp(1.5rem, 2.6vw, 2rem); border-radius: var(--radius-card); }
.fit-col--yes { background: rgba(201,162,75,0.06); border: 1px solid var(--gold-25); }
.fit-col--no { background: rgba(13,30,53,0.5); border: 1px solid var(--gold-08); }
.fit-title { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-block-end: 1.25rem; }
.fit-col--no .fit-title { color: var(--muted); }
.fit-list { display: flex; flex-direction: column; gap: 0.9rem; }
.fit-list li { position: relative; padding-inline-start: 1.5rem; font-size: 0.95rem; line-height: 1.7; color: var(--mist); }
.fit-list li::before {
content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em;
inline-size: 8px; block-size: 8px; border-radius: 0 100% 0 100%;
transform: rotate(-35deg); background: var(--gold);
}
.fit-col--no .fit-list li { color: var(--muted); }
.fit-col--no .fit-list li::before { background: none; border: 1px solid var(--gold-45); }
@media (max-width: 720px) { .fit { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------
УВЕДОМЛЕНИЕ О COOKIE
Появляется только если счётчик включён: нет cookie — нет
и разговора о согласии. Скрыто атрибутом hidden в разметке,
показывается скриптом. Значит без JavaScript баннера нет —
и счётчика тоже, а страница читается полностью.
Полоса внизу, не окно поверх экрана: она не закрывает
содержимое и не требует нажатия, чтобы читать дальше.
------------------------------------------------------------ */
.cookie {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
padding: clamp(0.9rem, 2vw, 1.1rem) var(--gutter);
background: rgba(13,17,22,0.94);
border-block-start: 1px solid var(--gold-25);
backdrop-filter: blur(6px);
}
.cookie[hidden] { display: none; }
.cookie-text {
flex: 1 1 22rem; margin: 0;
font-size: 0.84rem; line-height: 1.6; color: #D8E0EA; max-width: 70ch;
}
.cookie-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.cookie-row .btn { padding-block: 0.7rem; }
.cookie-row .btn-ghost { color: #D8E0EA; }
@media (max-width: 620px) {
.cookie { gap: 0.8rem; padding-block: 1rem; }
.cookie-text { font-size: 0.88rem; flex-basis: 100%; }
.cookie-row { inline-size: 100%; }
.cookie-row .btn, .cookie-row .btn-ghost { flex: 1 1 auto; text-align: center; justify-content: center; }
}
/* ------------------------------------------------------------
РОСТОК НА ТЕЛЕФОНЕ — ОДИН РАЗ
На узком экране кадр ростка стоит отдельным изображением
над карточкой доказательств. Фоновый слой при этом оставался
включённым, и росток появлялся ДВАЖДЫ: сверху кадром, ниже
фоном под текстом. Прежняя попытка приглушить его через
opacity не срабатывала — правило светлой зоны включает
этот слой с !important, и оно специфичнее.
Гасим полностью и тоже с !important: другого способа
перебить !important нет.
------------------------------------------------------------ */
@media (max-width: 900px) {
.zone-light .hero--sprout > .bg-img,
.zone-light .hero--sprout > .bg-veil,
.hero--sprout > .bg-img,
.hero--sprout > .bg-veil { display: none !important; }
}
/* ------------------------------------------------------------
КОМПАКТНЫЙ ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ДЛЯ ТЕЛЕФОНА
Стоит в шапке рядом с кнопкой меню. Прежде переключатель
жил ВНУТРИ меню, и о самой возможности сменить язык человек
узнавал только открыв меню — лишнее нажатие и потерянная
возможность.
Сделан на : раскрывается и закрывается без скрипта,
закроется и на второе касание, и клавишей.
На мониторе не нужен — там три метки стоят в строку.
------------------------------------------------------------ */
.lang-mini { display: none; position: relative; }
.lang-mini > summary {
display: inline-flex; align-items: center; gap: 0.4rem;
min-block-size: 44px; min-inline-size: 44px;
padding-inline: 0.7rem;
font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
color: #4A5A72; cursor: pointer; list-style: none;
border: 1px solid rgba(74,58,38,0.16); border-radius: var(--radius-sm);
}
.lang-mini > summary::-webkit-details-marker { display: none; }
/* Почка вместо треугольника: раскрывается, как ветвь */
.lang-mini > summary .bud {
inline-size: 7px; block-size: 7px; background: var(--gold);
border-radius: 0 100% 0 100%; transform: rotate(-35deg);
transition: transform var(--dur) var(--ease);
}
.lang-mini[open] > summary .bud { transform: rotate(145deg); }
.lang-mini[open] > summary { color: #0A1A33; border-color: var(--gold-45); }
.lang-mini__list {
position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.5rem);
z-index: 40; min-inline-size: 11rem;
display: flex; flex-direction: column;
background: #FFFDFB; border: 1px solid rgba(74,58,38,0.14);
border-block-start: 2px solid var(--gold);
border-radius: var(--radius-card);
box-shadow: 0 1px 2px rgba(74,58,38,0.06), 0 18px 40px -18px rgba(74,58,38,0.3);
overflow: hidden;
}
.lang-mini__list a {
min-block-size: 48px; display: flex; align-items: center;
padding-inline: 1rem; font-size: 0.92rem; color: #0A1A33;
}
.lang-mini__list a + a { border-block-start: 1px solid rgba(74,58,38,0.1); }
.lang-mini__list a[aria-current="true"] { color: #7D5F1E; font-weight: 600;
background: rgba(201,162,75,0.08); }
@media (max-width: 900px) {
.lang-mini { display: block; }
/* Переключатель нужен в ДВУХ местах, и это не дубль:
в шапке — для тех, кто меняет язык сразу; в меню — для тех,
кто просматривает страницы и решает по ходу. Разные моменты
решения, разные места. */
}
/* ------------------------------------------------------------
ЧИСЛА В ЗЕРКАЛЬНОЙ ВЁРСТКЕ
Найдено 08.08.2026 на еврейской версии: «300 000» показывалось
как «000 300». Причина не в шрифте и не в разметке — при
направлении письма справа налево браузер переставляет группы
разрядов, разделённые пробелом, потому что считает их
отдельными словами.
Лечится изоляцией: у числовых элементов своё направление
письма, независимое от страницы. Цены, доли, годы, объёмы —
всё, где цифры стоят группами или с символами $ и %.
------------------------------------------------------------ */
[dir="rtl"] .fact-num,
[dir="rtl"] .hero-facts__num,
[dir="rtl"] .pm-num,
[dir="rtl"] .pack-tab__price,
[dir="rtl"] .pack-price__base,
[dir="rtl"] .pack-aside__price,
[dir="rtl"] .pack-aside__base,
[dir="rtl"] .level-price,
[dir="rtl"] .mark-num,
[dir="rtl"] .prod-meta,
[dir="rtl"] .track-num,
[dir="rtl"] .pgroup-num {
direction: ltr; unicode-bidi: isolate; text-align: start;
}
/* ------------------------------------------------------------
ШАПКА НА УЗКОМ ЭКРАНЕ: ВСЁ ДОЛЖНО ПОМЕСТИТЬСЯ
Найдено 09.08.2026 на живом сайте: кнопка меню уезжала
за правый край, на иврите — за левый. В строке стояли
логотип со слоганом, призыв, переключатель языка и бургер;
на 390 px их суммарная ширина превышала окно на 15–51 px.
Ни одна из шести проверок этого не видела: страница
не переполнялась, элемент просто срезался краем окна.
Поэтому написана седьмая — check-fit.py.
Лечим по порядку важности: сначала ужимаем необязательное
(слоган под логотипом, поля призыва), и только потом
уменьшаем сами органы управления. Кнопка меню и переключатель
сохраняют область касания не меньше 44 px.
------------------------------------------------------------ */
@media (max-width: 460px) {
.nav .container { gap: 0.4rem; }
.nav-right { gap: 0.35rem; min-inline-size: 0; }
/* Слоган под названием — первое, чем можно пожертвовать */
.nav-logo-sub { display: none; }
.nav-logo-name { font-size: 0.62rem; letter-spacing: 0.14em; }
.nav-logo img { inline-size: 30px; }
.nav-logo { gap: 0.5rem; min-inline-size: 0; }
/* Призыв ужимается полями, но остаётся нажимаемым */
.nav-cta { padding-inline: 0.7rem; font-size: 0.62rem; letter-spacing: 0.1em; }
/* Переключатель: метка без почки, площадь касания сохранена */
.lang-mini > summary { padding-inline: 0.45rem; font-size: 0.68rem; gap: 0.25rem; }
.lang-mini > summary .bud { inline-size: 5px; block-size: 5px; }
.nav-burger { inline-size: 44px; block-size: 44px; flex: none; }
}
@media (max-width: 430px) {
/* Название рядом со знаком занимает 169 px — больше, чем призыв
и оба органа управления вместе. На узком экране остаётся знак:
он и есть логотип, а слово написано в первом же экране. */
.nav-logo-text { display: none; }
.nav-cta { font-size: 0.6rem; padding-inline: 0.6rem; }
}
/* ------------------------------------------------------------
ЭЛЕМЕНТЫ СЕТКИ НЕ ДОЛЖНЫ РАСПИРАТЬ СЕТКУ
На 320 px колонка первого экрана здоровья имела ширину 288,
а её содержимое — 354: элемент сетки по умолчанию получает
min-width: auto и растягивается по самому длинному слову,
вытаскивая за собой заголовок, абзацы и кнопки за край окна.
Найдено проверкой check-fit.py 09.08.2026.
Ставим min-inline-size: 0 — тогда содержимое переносится,
а не расталкивает колонку.
------------------------------------------------------------ */
.hero-grid > *, .health-grid > *, .story-grid > *,
.about-grid > *, .split > *, .tracks > * { min-inline-size: 0; }
.hero-content, .hero-rise { max-inline-size: 100%; }
/* Длинные слова и адреса переносятся, а не режут макет */
h1, h2, h3, p, li, .btn, .btn-ghost { overflow-wrap: break-word; }
/* Плашки технологий: длинное слово microSolve+® распирало ячейку
на 320 px и выносило блок за край. */
.mark, .mark-num { min-inline-size: 0; overflow-wrap: anywhere; }