/* Собственные правила главной: экраны, герой, сетки. Выделено из блока стилей внутри home.html: там сто восемьдесят строк лежали вперемешку, и ни переиспользовать, ни прочитать это было нельзя. Файлы подключаются в том же порядке, в каком правила шли в блоке, чтобы каскад не изменился. */ /* overflow:clip, а не hidden, и это не вкусовщина. Элемент с hidden - прокручиваемый контейнер (пусть и без полос), и анимации, привязанные к положению в окне (drift.css), цепляются к ближайшему такому предку вместо окна: кадр всегда «целиком в нём», и параллакс стоит на нуле. Так и вышло при первой проверке: translate не сдвинулся ни на пиксель. clip обрезает так же, но контейнером не считается. Строка с hidden оставлена первой для браузеров, которые clip не знают. */ .home-block{position:relative;padding:clamp(80px,9vw,132px) 0;border-bottom:1px solid var(--line);overflow:hidden;overflow:clip} .zones-home-block{overflow:visible} .home-block:nth-of-type(even){background:color-mix(in srgb,var(--surface) 32%,var(--bg))} /* Ссылка «Подробнее» со стрелкой. Стрелка отодвигается при наведении - мелкий отклик, который показывает, что элемент живой. */ .card-more,.ritual-more{display:inline-flex;align-items:center;gap:8px; margin-top:var(--gap-2);color:var(--accent);text-decoration:none; font:600 var(--step--1)/1 var(--ui);letter-spacing:.08em; text-transform:uppercase} .card-more span,.ritual-more span{transition:transform var(--dur-1) var(--ease)} .ritual-more{margin-top:var(--gap-1);color:var(--gold)} @media (hover:hover){ .card-more:hover span,.ritual-more:hover span{transform:translateX(4px)} } .legacy-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #hero{color:var(--cream)} /* Заголовок героя лежит прямо на кадре - нижнюю вуаль клиент убрал, и правильно: плёнка во весь экран съедала картинку. Осветление текста задачу НЕ решает, и это видно по расчёту: на тёмной стене нынешний кремовый даёт 13.9:1, а на пламени свечи - 2.02:1, и даже чистый белый там вытягивает только до 2.43:1. Яркость добавляет контраст ровно там, где его и так хватало. Работает подложка, и она сделана ЛОКАЛЬНОЙ: мягкое пятно затемнения под самим текстовым столбцом, а не плёнка на весь кадр. Кадр справа остаётся чистым, а буквы получают опору при любом кадре. Тень у букв - второй слой той же защиты: она ловит светлые крапины, которые проходят между растяжкой градиента и штрихом буквы. */ /* Затемнение под текстом идёт ОТ ЛЕВОГО КРАЯ ЭКРАНА и гаснет вправо. Первая версия была эллипсом в коробке размером с текстовый столбец. Градиент доходил до прозрачности только к 80% радиуса, а коробка обрезала его раньше - по её границам появлялись прямые линии, и пятно читалось как наклеенный квадрат. Чинить это размытием краёв значит лечить следствие. Здесь обрезать нечего: слева, сверху и снизу затемнение совпадает с краями экрана, а справа само сходит в прозрачность. Видимых границ нет ни одной. Ширина 100vw при сдвиге на половину: блок лежит внутри центрирующей обёртки, и без этого приёма он не достал бы до края экрана. */ #hero .media-over::before{content:'';position:absolute;z-index:-1; left:calc(50% - 50vw);top:0;bottom:0;width:100vw; pointer-events:none; /* Точки перехода подобраны расчётом, а не на глаз. Самый светлый участок кадра - ядро пламени свечи; чтобы тёплый белый заголовок держал на нём норму 4.5:1, затемнение под ним должно быть не меньше 48 процентов, а с запасом - 64. Текст занимает левые 46 процентов ширины, поэтому до этой отметки затемнение не опускается ниже 56, и только дальше сходит в прозрачность. Первая растяжка была слабее и к правому краю текста давала 2.99:1 на том же ядре пламени - меньше нормы. */ background:linear-gradient(to right, color-mix(in srgb,var(--deep) 76%,transparent) 0%, color-mix(in srgb,var(--deep) 70%,transparent) 26%, color-mix(in srgb,var(--deep) 56%,transparent) 46%, color-mix(in srgb,var(--deep) 22%,transparent) 62%, transparent 78%)} #hero .prose{position:relative;z-index:1} #hero h1{color:var(--cream-bright); text-shadow:0 2px 18px rgba(15,18,25,.55),0 1px 3px rgba(15,18,25,.4)} #hero .lbl{text-shadow:0 1px 10px rgba(15,18,25,.6)} #hero .prose,#hero .prose p{color:var(--text-muted); text-shadow:0 1px 12px rgba(15,18,25,.55)} @media (hover:hover){ /* У кино-кадров и сцен выгоды наплыва по наведению больше нет: они дышат постоянно (drift.css), и рывок сверху был бы лишним. */ /* Приближения при наведении больше нет - ни у плиток ритуалов, ни у карточек каталога (клиент 15.09: «эффект приближения убрать, пусть будет один эффект, максимально плавный»). Эффект карточки - в catalog.css, у плитки ритуала остаётся подсветка кнопки. */ } @media(max-width:760px){ .split{grid-template-columns:1fr}.home-block{padding:var(--gap-5) 0} .rituals{grid-template-columns:1fr}.ritual,.ritual:first-child,.ritual:nth-child(2){grid-column:auto;min-height:330px} .catalog-grid,.benefits{grid-template-columns:1fr} .catalog-card{min-height:440px} .home-block.cinema-section,.cinema-section.is-reverse{display:flex;flex-direction:column;min-height:0} .cinema-section.is-reverse .cinema-media{order:0}.cinema-section.is-reverse .cinema-copy{order:1} .cinema-media{width:100%;min-height:clamp(320px,108vw,440px)} .cinema-copy,.is-reverse .cinema-copy{padding:var(--gap-5) var(--gap-3)} .benefits-heading{margin-bottom:var(--gap-4)} .benefits-cinema{grid-template-columns:1fr;min-height:0} .benefit-scene{min-height:440px;border-right:0;padding:var(--gap-3)} .reviews-head{grid-template-columns:1fr} .review-mosaic{grid-template-columns:1fr}.review-tile,.review-tile.is-feature,.review-tile.is-photo{grid-column:auto;grid-row:auto;min-height:360px} } /* Отзывы и «После ритуала» не выделяются: ленты отзывов движутся, и случайное выделение при нажатии рвёт их синими полосами. Просьба клиента 15.09.2026. Во всём сайте выделение текста не выключено: адреса, телефоны и цены люди копируют. */ #reviews,.benefits-block{-webkit-user-select:none;user-select:none}