/* ============================================================
Esleya — v3: финальная сборка (подключать после styles.css)
hero-кинокадр · портрет-исходник · теги стиля · режимы сборки ·
«и для него» · 6 «мелочей»
============================================================ */
/* ---------- hero: текст + пара в одной сетке ----------
Пара живёт в правой колонке контейнера, поэтому НИКОГДА не наезжает
на текст — ни на одной ширине и ни при каком масштабе. Правый край
колонки совпадает с правым краем шапки, поэтому мужчина стоит
под кнопками сторов. */
.hero--cine{position:relative; overflow:hidden; padding-bottom:0}
.cine-glow{position:absolute; inset:0; pointer-events:none;
background:radial-gradient(120% 80% at 15% -10%, rgba(215,123,192,.14), transparent 55%)}
.hero--cine .wrap.hero-grid{position:relative; z-index:2; display:grid; gap:clamp(8px,2vw,40px);
align-items:end}
.hero--cine .hero-copy{max-width:34ch; align-self:center; padding-bottom:clamp(24px,5vw,60px)}
.cine-media{position:relative; display:flex; justify-content:flex-end; align-items:flex-end;
min-width:0; padding-bottom:30px; box-sizing:border-box}
.cine-media img.pair{display:block; width:100%; height:auto; object-fit:contain}
[data-theme="light"] .cine-media img.pair{filter:contrast(.9); opacity:.95}
.cine-chip{position:absolute; left:49%; transform:translateX(-50%); bottom:4px; z-index:3;
font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
color:#F3E3C0; background:rgba(20,14,29,.72); padding:6px 14px; border-radius:999px}
/* в светлой теме плашка светлая и почти прозрачная — не выбивается из фона */
[data-theme="light"] .cine-chip{color:#5A506B; background:rgba(255,255,255,.6);
border:1px solid rgba(58,45,74,.1); backdrop-filter:blur(6px)}
@media (min-width:1200px){
/* широкие экраны: колонка 418px — центр головы (0.6552 ширины обрезанного
файла от его правого края) ложится на ось центра кнопки «Скачать в App Store»,
которая отстоит от КОНТЕНТНОГО правого края на 273.7px */
.hero--cine .wrap.hero-grid{grid-template-columns:minmax(0,1fr) 433px}
}
@media (min-width:901px){
/* две колонки: текст слева, пара справа; кадр поднимается под шапку */
.hero--cine .wrap.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,clamp(340px,42vw,490px))}
.cine-media{margin-top:calc(-1 * (var(--bar-h) + 28px) + 34px)}
.cine-media img.pair{max-height:calc(100vh - 96px)}
}
@media (max-width:900px){
/* одна колонка: сначала текст, потом пара во всю ширину */
.hero--cine{margin-top:0; padding-top:14px; padding-bottom:0}
.hero--cine .wrap.hero-grid{grid-template-columns:1fr}
.hero--cine .hero-copy{max-width:none; padding-bottom:0}
.cine-media{justify-content:center; margin-top:2px; padding-bottom:26px}
.cine-media img.pair{width:min(100%,460px); aspect-ratio:825/1300;
object-fit:cover; object-position:center bottom}
.cine-chip{position:absolute; left:50%; transform:translateX(-50%); bottom:4px}
header.bar--over{background:linear-gradient(to bottom, var(--glass), transparent)}
}
/* ---------- портрет-исходник в секции «под повод» ----------
Портрет — «заготовка», поэтому подан как карточка в золотой обводке:
визуально отличается от кадров приложения (те в корпусе телефона). */
/* два равных кадра: слева портрет-заготовка, справа образ под повод.
Телефона здесь нет — трансформация читается сама, выравнивание точное. */
.chain:has(.ins) .ins{display:flex; flex-direction:column; align-items:center; gap:12px}
.thumb--portrait{width:clamp(190px,20vw,270px); aspect-ratio:3/4;
overflow:hidden; border-radius:16px; border:1px solid var(--border);
background:linear-gradient(170deg,#2B1D36,#17111D)}
[data-theme="light"] .thumb--portrait{background:linear-gradient(170deg,#EFEAF6,#E3DCEE)}
/* правый кадр — результат: золотая линия читается и подсвечена тёплым нимбом */
.ins--out .thumb--portrait{border-color:rgba(227,184,92,.55);
box-shadow:0 0 0 1px rgba(227,184,92,.14), 0 18px 44px -22px rgba(227,184,92,.35)}
[data-theme="light"] .ins--out .thumb--portrait{border-color:rgba(180,133,38,.5);
box-shadow:0 0 0 1px rgba(180,133,38,.1), 0 18px 40px -24px rgba(120,84,20,.3)}
.ins--out .thumb--portrait img{position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:0; transition:opacity .8s ease}
.ins--out .thumb--portrait img.is-on{opacity:1}
.ins--out .thumb--portrait{position:relative}
.thumb--portrait img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.chain .ins-cap{text-align:center; line-height:1.5}
/* .chain внутри .split-vis узкая (≈400px) — на десктопе даём этим двум
секциям всю ширину строки и запрещаем перенос, чтобы исходник/режимы
стояли рядом с телефоном, как в утверждённом макете. */
@media (min-width:901px){
.split-vis:has(.ins), .split-vis:has(.modes--v),
.split-vis:has(.stylemix){width:100%}
.chain:has(.ins), .chain:has(.modes--v){flex-wrap:nowrap; justify-content:center;
align-items:center; gap:clamp(18px,2.4vw,34px)}
.chain:has(.ins) .frame--lg, .chain:has(.modes--v) .frame--lg{width:clamp(210px,17vw,260px); flex:0 0 auto}
.chain:has(.ins) .ins, .chain:has(.modes--v) .modes--v{flex:0 0 auto}
/* Портрет привязан к рамке телефона В ПРОЦЕНТАХ, а не отступом в px:
фото образа внутри скриншота занимает 20%…77% высоты экрана, поэтому
совпадение сохраняется на любом соотношении сторон. */
.chain:has(.ins){align-items:flex-start; justify-content:center}
.split-vis .modes--v{width:clamp(190px,15vw,240px)}
}
/* ---------- «мой стиль»: слева твои фото (статичны), справа чипы + образ.
Меняется только правая половина, и чип стоит прямо над образом —
взгляду не нужно прыгать между колонками. ---------- */
.stylemix{display:flex; flex-direction:column; gap:16px; max-width:none; margin:28px 0 0}
.stylemix .trio{display:flex; gap:10px; justify-content:flex-start; width:100%}
/* ширина считается от колонки, а не от вьюпорта — четыре кадра всегда влезают
и остаются одинаковыми (без flex-сжатия по-разному) */
.stylemix .trio{align-items:flex-start}
.stylemix .trio img{flex:0 0 auto; min-width:0; align-self:flex-start; height:auto;
width:min(122px, calc((100% - 30px) / 4)); aspect-ratio:3/4; object-fit:cover;
border-radius:12px; border:1px solid var(--border-strong); box-shadow:var(--shadow-soft)}
.stylepick{display:flex; flex-direction:column; gap:14px; align-items:center; width:100%}
/* четыре чипа раскладываются 2+2, чтобы четвёртый не висел один */
.stylepick .tags.tags--pick{display:grid; grid-template-columns:repeat(2,minmax(0,max-content));
justify-content:center; gap:8px}
/* чипы — управляемые, поэтому у них есть состояние наведения, фокус и
заметный активный вид: золотая обводка + золотой текст, а не только заливка */
.tags--pick .tag{cursor:pointer; font-family:inherit; appearance:none;
padding:9px 16px; letter-spacing:.01em;
transition:border-color .35s, background-color .35s, color .35s, transform .35s}
.tags--pick .tag:hover{border-color:var(--gold-line); transform:translateY(-1px)}
.tags--pick .tag:focus-visible{outline:2px solid var(--gold-line); outline-offset:2px}
.tags--pick .tag.tag--on{border-color:var(--gold-line); color:var(--gold-line);
background:rgba(227,184,92,.14); font-weight:600}
.tags--pick .tag.tag--on:hover{transform:none}
/* образ — крупной карточкой без рамки телефона.
Ширина считается по той же формуле, что кадры в блоке выше (--fw),
поэтому размер совпадает на любой ширине экрана. */
.stylepick{--fw:clamp(190px,20vw,270px)}
.stylelook{position:relative; margin:0; width:var(--fw); max-width:100%; aspect-ratio:3/4;
border-radius:16px; overflow:hidden; border:1px solid var(--border-strong);
box-shadow:var(--shadow-soft)}
.stylelook-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity 1s ease}
.stylelook-img.is-on{opacity:1}
.stylelook-cap{font-size:.8rem; color:var(--soft); line-height:1.5; text-align:center}
@media (max-width:900px){
.stylemix{margin:22px auto 0; align-items:center}
.stylemix-cap{text-align:center}
.stylemix .trio{justify-content:center; flex-wrap:nowrap}
.stylemix .trio img{width:min(84px, calc((100% - 30px) / 4))}
/* на телефоне кадр один в ряду, поэтому он шире, чем половинные кадры
блока выше: в половину ширины образ читался бы мелко */
.stylelook{width:min(100%,min(300px,72vw))}
}
.stylemix-cap{font-size:.8rem; color:var(--soft); line-height:1.5}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:.82rem; color:var(--text); border:1px solid var(--border);
background:var(--surface); padding:7px 14px; border-radius:999px;
transition:border-color .5s, background-color .5s}
.tag--on{border-color:var(--gold-line); background:rgba(227,184,92,.12)}
@media (min-width:900px){
/* на десктопе стоит рядом с телефоном */
.split .split-vis:has(.stylemix){flex-direction:row; align-items:center; gap:36px}
}
/* ---------- «и для него»: слоты под мужские кадры ---------- */
.him-grid{display:flex; gap:16px; justify-content:center}
.slot-card{width:clamp(150px,22vw,190px); aspect-ratio:3/4; border-radius:16px;
border:1px dashed var(--border-strong); display:flex; align-items:center; justify-content:center; padding:16px;
background:repeating-linear-gradient(45deg, rgba(128,118,145,.08), rgba(128,118,145,.08) 12px, transparent 12px, transparent 24px)}
.slot-card--dn{margin-top:22px}
.slot-card span{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem;
color:var(--soft); text-align:center; line-height:1.7}
/* ---------- режимы сборки в «гардеробе» ---------- */
.split-vis .modes--v{grid-template-columns:1fr; width:min(260px,100%); margin-bottom:0; flex:0 0 auto}
@media (max-width:600px){
/* в свайп-ленте режимы идут карточкой перед телефоном */
.chain .modes--v{flex:0 0 auto; scroll-snap-align:center}
}
/* ---------- hero уходит под шапку ----------
Шапка sticky, поэтому кадр поднимаем отрицательным отступом
и возвращаем воздух паддингом — картинка идёт до самого верха. */
/* Затемнение под шапкой брали числом (#130F1A — женский фон). В мужском виде
подложка уходит в холодный индиго (свечение body), а шапка оставалась
тёплой и перекрывала его — под ней была видна горизонтальная граница.
Тон шапки в мужском = --surface (#181B27), чтобы стыка не было. */
header.bar--over{background:linear-gradient(to bottom,
rgba(var(--scrim-rgb),.78) 0%, rgba(var(--scrim-rgb),.4) 60%, transparent)}
[data-theme="light"] header.bar--over{
background:
linear-gradient(to bottom, rgba(var(--tint-rgb),.045), transparent 70%),
linear-gradient(to bottom, rgba(var(--bar-light-a),.92) 0%, rgba(var(--bar-light-b),.55) 62%, transparent);
backdrop-filter:blur(16px)}
[data-theme="light"] header.bar--over .ghost{background:rgba(247,244,239,.7)}
/* кнопки в шапке: стеклянные, в одном языке со всей шапкой; высота = сторам.
Вид у Web-версии второстепенный (это верно по иерархии), но моторика та же,
что у сторов: тот же подъём, та же длительность, только тень тише. */
.bar-cta .web-btn{height:38px; box-sizing:border-box; padding:0 16px; display:inline-flex; align-items:center;
transition:transform .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s}
/* мягкая тень в покое — как у сторов, только тише (кнопка второстепенная) */
.bar-cta .web-btn{box-shadow:0 8px 20px -12px rgba(20,14,29,.5)}
[data-theme="light"] .bar-cta .web-btn{box-shadow:0 8px 20px -12px rgba(58,45,74,.28)}
.bar-cta .web-btn:hover{transform:translateY(-2px);
box-shadow:0 10px 22px -10px rgba(20,14,29,.55)}
[data-theme="light"] .bar-cta .web-btn:hover{box-shadow:0 10px 22px -12px rgba(58,45,74,.4)}
.bar-cta .web-btn:focus-visible{outline:3px solid var(--gold2); outline-offset:3px}
.bar-cta .btn-store{height:38px; box-sizing:border-box; display:inline-flex; align-items:center}
header.bar--over .ghost{background:rgba(255,255,255,.07); backdrop-filter:blur(12px);
border:1px solid rgba(243,239,231,.22); color:#F3EEF8}
header.bar--over .ghost:hover{background:rgba(255,255,255,.14); border-color:rgba(243,239,231,.4)}
[data-theme="light"] header.bar--over .ghost{background:rgba(255,255,255,.45); backdrop-filter:blur(12px);
border-color:rgba(58,45,74,.18); color:#2A2038}
[data-theme="light"] header.bar--over .ghost:hover{background:rgba(255,255,255,.7); border-color:rgba(58,45,74,.32)}
/* переключатель темы: тихая утилита в правом краю, отделена от CTA */
.bar-sep{width:1px; height:22px; margin:0 4px 0 8px; flex:0 0 auto;
background:rgba(243,239,231,.18)}
[data-theme="light"] .bar-sep{background:rgba(58,45,74,.16)}
.bar-cta .theme-btn{order:0; opacity:.75; width:36px; height:36px; padding:0; flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center; line-height:0;
background:none; border:none; box-shadow:none; border-radius:50%;
color:#CBBFDA; transition:opacity .2s, background-color .2s, color .2s}
.bar-cta .theme-btn svg{flex:0 0 auto}
.bar-cta .theme-btn .ic-sun{display:none}
.bar-cta .theme-btn .ic-moon{display:block}
:root[data-theme="dark"] .bar-cta .theme-btn .ic-moon{display:none}
:root[data-theme="dark"] .bar-cta .theme-btn .ic-sun{display:block}
.bar-cta .theme-btn:hover{opacity:1; background:rgba(255,255,255,.1); color:#fff}
[data-theme="light"] .bar-cta .theme-btn{color:#5A506B}
[data-theme="light"] .bar-cta .theme-btn:hover{background:rgba(58,45,74,.08); color:#140E1D}
:root{--bar-h:72px}
@media (max-width:860px){ :root{--bar-h:66px} }
/* ---------- переключатель темы ---------- */
.bar-cta .theme-btn svg{width:18px; height:18px}
@media (max-width:900px){
.bar-cta{gap:8px}
/* на мобильных кнопка темы — тихая утилита: без подложки и рамки,
отделена зазором от круглых кнопок входа, поэтому не путается с ними */
.bar-cta .theme-btn{display:inline-flex; align-items:center; justify-content:center;
opacity:.7; width:30px; height:38px; flex:0 0 auto; border-radius:0;
margin-left:6px; background:none; border:none; box-shadow:none}
.bar-cta .theme-btn svg{width:20px; height:20px}
.bar-cta .theme-btn:hover,.bar-cta .theme-btn:active{background:none; opacity:1}
[data-theme="light"] .bar-cta .theme-btn{background:none; border:none}
[data-theme="light"] .bar-cta .theme-btn:hover{background:none}
}
/* ---------- свечение искр логотипа в светлой теме: золото вместо розового ---------- */
[data-theme="light"] .wm-tw{
background:radial-gradient(circle, rgba(243,227,192,.95) 0%, rgba(227,184,92,.5) 40%, transparent 70%)}
/* переход между первым и вторым экраном: обе секции ведут тонировку от нуля,
поэтому на стыке альфа совпадает и шва нет.
Оттенок берётся из переменной, а не вписан числом: иначе при переключении
на «ему» герой становится индиго, а секция под ним остаётся розовой. */
:root{--tint-rgb:215,123,192} /* женский орхид #D77BC0 */
:root.for-he{--tint-rgb:124,138,210} /* мужской индиго #7C8AD2 */
:root.for-he[data-theme="light"]{--tint-rgb:78,92,168} /* он же в светлой #4E5CA8 */
/* Тон затемнения под шапкой: должен совпадать с фоном под ней, иначе виден стык */
:root{--scrim-rgb:19,15,26} /* #130F1A — женский фон */
:root.for-he{--scrim-rgb:24,27,39} /* #181B27 — мужской, тот же тон, что --surface */
/* Тон вуали раскрытого кадра. Он же уходит в шапку и в фон корня, чтобы
полоса статус-бара и низ под панелью Safari были ровно того же цвета.
У мужского вида свой, холодный — иначе поверх индиго ложится тёплый
женский чёрный и это видно (Алексей, 23.08). */
/* Светлая шапка: у женского вида лиловая, у мужского — холодная. Раньше
тона стояли числом, и в мужском светлом виде шапка отдавала розовым
(Алексей, 23.08). */
:root{--bar-light-a:246,243,250; --bar-light-b:240,234,247}
:root.for-he{--bar-light-a:244,246,251; --bar-light-b:234,238,248}
:root{--veil-rgb:10,6,15}
:root.for-he{--veil-rgb:13,15,23}
:root[data-theme="light"]{--veil-rgb:248,246,252}
:root.for-he[data-theme="light"]{--veil-rgb:246,247,252}
.hero--cine{background:linear-gradient(180deg, transparent 55%, rgba(var(--tint-rgb),.03) 100%)}
.hero--cine + .split{background:linear-gradient(180deg,
rgba(var(--tint-rgb),.03) 0%, rgba(var(--tint-rgb),.06) 42%, transparent 100%)}
/* «Первые 5 образов бесплатно» — по центру относительно блока кнопок */
.hero--cine .cta-row .micro{width:fit-content; margin-left:auto; margin-right:auto;
max-width:100%; text-align:center}
.hero--cine .cta-row{display:inline-flex; flex-direction:column; align-items:stretch; width:auto}
/* «Куда собираешься? <повод>»: само слово-повод стоит по центру ПРАВОГО кадра —
так видно, что образ относится именно к этому поводу. */
/* Фраза остаётся цельной и центрируется по паре кадров: повод стоит сразу за
вопросом, а вся строка стоит по центру кадров — связь читается без разрыва. */
/* Правая колонка строки геометрически совпадает с правым кадром (та же ширина,
правый край на правом крае кадра), слово-повод центрируется в ней —
значит одна вертикаль проходит через центр повода и центр картинки. */
/* ---------- «для неё / для него»: глобальный переключатель в шапке ----------
Язык бутика: капс с разрядкой (как надзаголовки), стеклянная капсула в одной
пластике с кнопками шапки, золотая «шайба» скользит под активным словом. */
.bar .wrap{justify-content:flex-start}
.bar .brand{flex:0 0 auto}
.bar .who-toggle{margin-left:clamp(12px,2.4vw,26px)}
.bar-cta{margin-left:auto}
.who-toggle{position:relative; display:grid; grid-template-columns:1fr 1fr;
padding:3px; border:1px solid var(--border); border-radius:999px;
background:var(--surface); height:38px; box-sizing:border-box; isolation:isolate}
.who-toggle::before{content:""; position:absolute; z-index:0; top:3px; bottom:3px;
left:3px; width:calc(50% - 3px); border-radius:999px;
background:rgba(227,184,92,.16); border:1px solid var(--gold-line);
box-sizing:border-box; transition:transform .4s cubic-bezier(.4,0,.2,1)}
/* активная половинка: «для него» слева, «для неё» справа */
.who-toggle::before{transform:translateX(100%)}
.who-toggle--he::before{transform:none}
.who{position:relative; z-index:1; font-size:.68rem; text-transform:uppercase;
letter-spacing:.09em; color:var(--soft); border:0; background:transparent;
padding:0 14px; border-radius:999px; cursor:pointer; font-family:inherit;
font-weight:600; appearance:none; white-space:nowrap; line-height:1;
display:inline-flex; align-items:center; justify-content:center;
transition:color .3s}
.who:hover{color:var(--text)}
.who:focus-visible{outline:2px solid var(--gold-line); outline-offset:2px}
.who--on, .who--on:hover{color:var(--gold-line)}
/* поверх тёмного hero — то же стекло, что у соседних кнопок */
:root[data-theme="dark"] header.bar--over .who-toggle{background:rgba(255,255,255,.07);
backdrop-filter:blur(12px); border-color:rgba(243,239,231,.22)}
:root[data-theme="dark"] header.bar--over .who{color:rgba(243,238,248,.72)}
:root[data-theme="dark"] header.bar--over .who:hover{color:#F3EEF8}
:root[data-theme="dark"] header.bar--over .who--on,
:root[data-theme="dark"] header.bar--over .who--on:hover{color:var(--gold-line)}
.who-short{display:none}
@media (max-width:900px){
/* одна высота с круглыми кнопками сторов — ряд читается как один уровень */
.who-toggle{height:38px; padding:3px}
.who-toggle::before{top:3px; bottom:3px; left:3px; width:calc(50% - 3px)}
.who{font-size:.62rem; padding:0 10px; letter-spacing:.07em}
.bar .who-toggle{margin-left:10px}
}
/* на телефоне шапка не должна выезжать: переключатель сокращается до
«ЕЙ / ЕМУ», вход в веб-версию уходит (он продублирован в подвале) */
@media (max-width:620px){
.who-long{display:none}
.who-short{display:inline}
.who{padding:0 11px; letter-spacing:.08em}
/* Web-версия остаётся, но иконкой-глобусом (текст не влезает) */
.bar-cta .web-btn{width:38px; height:38px; padding:0; border-radius:50%; justify-content:center}
.bar-cta .web-btn .web-btn__txt{display:none}
.bar-cta .web-btn .web-btn__ic{display:block; width:18px; height:18px; margin:0}
.bar .who-toggle{margin-left:10px}
.bar .wrap{gap:8px}
}
@media (max-width:400px){
/* Вход остаётся и на самых узких экранах — раньше прятался совсем, и
на телефоне в шапке не было входа (Алексей, 28.08); теснота решается
сжатием ниже, а не пропажей кнопки. */
.bar-cta .web-btn{width:34px; height:34px}
}
@media (max-width:400px){
/* узкие телефоны (320–400): всё сжимается, но ничего не пропадает */
.who{padding:0 6px; font-size:.58rem; letter-spacing:.05em}
.bar .who-toggle{margin-left:6px}
.bar .wrap{gap:6px; padding-left:14px; padding-right:14px}
.bar-cta{gap:5px}
.bar-cta .btn-store{width:34px; height:34px; padding:0; justify-content:center}
.who-toggle{height:34px; padding:2px}
.who-toggle::before{top:2px; bottom:2px; left:2px}
.bar-cta .theme-btn{width:26px; margin-left:2px}
.bar .brand img.wm{height:20px}
}
/* Строка над кадрами и сама пара кадров построены на ОДНОЙ сетке:
две колонки шириной --fw с зазором --fg. Поэтому центр повода всегда
стоит над центром правого кадра — на любой ширине экрана. */
.split-vis:has(.ins--out){--fw:clamp(190px,20vw,270px); --fg:clamp(18px,2.4vw,34px)}
.split-vis:has(.ins--out) .ask,
.split-vis .chain:has(.ins){display:grid; width:100%; min-width:0;
grid-template-columns:var(--fw) var(--fw); gap:var(--fg);
justify-content:center; padding-inline:0; margin-inline:0; overflow:visible}
.split-vis .chain:has(.ins) .ins{width:100%; min-width:0; max-width:none; flex:none}
.split-vis .chain:has(.ins) .thumb--portrait{width:100%}
.split-vis:has(.ins--out) .ask{align-items:baseline}
.split-vis:has(.ins--out) .ask .ask-slot{grid-column:2; justify-self:center;
position:relative; display:block; width:max-content; min-width:0; height:auto;
text-align:center}
/* все слова лежат в одной ячейке грида — ширина слота равна самому длинному
поводу и не меняется, поэтому «Куда собираешься?» стоит статично */
.split-vis:has(.ins--out) .ask .ask-stack{display:grid; position:relative}
.split-vis:has(.ins--out) .ask .ask-word{position:static; grid-area:1/1;
justify-content:center}
.split-vis:has(.ins--out) .ask .ask-q{white-space:nowrap; position:absolute;
right:100%; top:0; margin-right:.3em}
@media (max-width:900px){
.split-vis:has(.ins--out){--fw:min(190px, calc((100% - 12px) / 2)); --fg:12px}
}
/* ---------- узкие экраны: пара кадров всегда влезает ---------- */
@media (max-width:700px){
}
/* ---------- узкие экраны: ленты не растягивают страницу ----------
.split-vis — flex-колонка, поэтому .chain как flex-элемент брал ширину
по содержимому и свайп-лента не включалась. Прибиваем к ширине колонки. */
@media (max-width:700px){
/* .wrap — grid: колонка по умолчанию auto (min-content), поэтому лента распирала
секцию. minmax(0,1fr) разрешает содержимому сжиматься и включает свайп. */
.split .wrap{grid-template-columns:minmax(0,1fr)}
.split .wrap > *{min-width:0}
.split-vis{width:100%; min-width:0; align-items:stretch}
.split-vis > .chain{width:100%; min-width:0; max-width:100%}
.split-vis > .ask{align-self:stretch; width:100%}
}
/* ---------- воздух в заголовках секций: надзаголовок → h2 → абзац ---------- */
.sec-head .eyebrow{margin-bottom:16px}
.sec-head h2{margin-top:0; margin-bottom:20px}
.sec-head p{margin-top:0; line-height:1.65}
.sec-head p + p{margin-top:12px}
/* в блоке «Мой стиль» трио отодвинуто от абзаца чуть сильнее */
.stylemix{margin-top:34px}
/* десктопный разброс карточек трио (раньше был инлайном на img) */
.stylemix .trio img:nth-child(1){transform:rotate(-4deg)}
.stylemix .trio img:nth-child(2){transform:rotate(2.5deg); margin-top:12px}
.stylemix .trio img:nth-child(3){transform:rotate(-2deg); margin-top:4px}
.stylemix .trio img:nth-child(4){transform:rotate(3deg); margin-top:10px}
/* ---------- мобильная подача блока «Мой стиль» ----------
Твои фото собираются в один веер (перекрываются, лёгкий разворот) —
это читается как ОДНА пачка снимков, а не четыре карточки в ряд.
Дальше вертикальный «поток» вниз: пачка → стиль → что получилось. */
@media (max-width:900px){
.stylemix{margin:22px auto 0; gap:12px; align-items:center}
.stylemix .trio{display:flex; justify-content:center; align-items:flex-start;
gap:0; padding-top:6px}
.stylemix .trio img{width:clamp(84px,26vw,104px);
border-radius:14px; border-width:1.5px;
box-shadow:0 10px 26px rgba(0,0,0,.34);
transform-origin:50% 50%; position:relative}
.stylemix .trio img + img{margin-left:-24px}
.stylemix .trio img:nth-child(1){transform:rotate(-9deg) translateY(6px); z-index:1; margin-top:0}
.stylemix .trio img:nth-child(2){transform:rotate(-3deg); z-index:2; margin-top:0}
.stylemix .trio img:nth-child(3){transform:rotate(3deg); z-index:3; margin-top:0}
.stylemix .trio img:nth-child(4){transform:rotate(9deg) translateY(6px); z-index:4; margin-top:0}
.stylemix-cap{text-align:center; max-width:44ch; margin:8px auto 0}
/* связка держится плотностью: пачка → чипы → образ идут одной группой,
без лишней графики между ними */
.stylemix{margin:22px auto 0; gap:10px}
.stylemix-cap{margin-top:6px}
/* пачка фото центрируется по странице, а не по колонке текста —
тогда она стоит ровно над чипами и кадром */
.sec-head:has(.stylemix){max-width:none}
/* кнопки сторов и подпись под ними — по центру экрана */
.hero--cine .cta-row{display:flex; width:fit-content; margin-inline:auto}
.hero--cine .cta-row .micro{text-align:center}
.split-vis--style .stylepick{margin-top:18px; gap:10px}
/* чипы = панель управления кадром: ширина ровно как у фото, две равные
колонки, вплотную над снимком — видно, что они переключают именно его */
.split-vis--style .stylepick{--lookw:min(100%, min(300px, 72vw))}
.stylepick .tags.tags--pick{width:var(--lookw); grid-template-columns:1fr 1fr; gap:8px}
.stylepick .stylelook{width:var(--lookw)}
.tags--pick .tag{width:100%; text-align:center; padding:10px 8px}
.stylelook-cap{margin-top:2px}
.split-vis--style .stylepick .tags.tags--pick{gap:8px}
.split-vis--style .stylelook-cap{text-align:center; max-width:28ch; margin:0 auto}
}
/* на десктопе колонки выровнены по низу: подписи под кадрами оказываются
на одной строке и читаются как продолжение друг друга */
@media (min-width:901px){
/* колонки растягиваются на общую высоту: заголовок и чипы начинаются с одной
линии сверху, а пачка фото прижата к низу — подписи встают в один ряд */
.split:has(.split-vis--style) .wrap{align-items:stretch}
.split:has(.split-vis--style) .sec-head{display:flex; flex-direction:column}
.split:has(.split-vis--style) .stylemix{margin-top:auto}
.split-vis--style{align-content:end}
/* кадр образа фиксированного размера, не тянется за шириной экрана */
.stylepick{--fw:270px}
/* карточки чуть крупнее — колонка становится плотнее по массе */
.stylemix .trio{gap:8px}
.stylemix .trio img{width:min(132px, calc((100% - 24px) / 4))}
}
/* кадрирование мужского портрета вшито в сам файл (3:4), поэтому при
переключении пола ничего не «прыгает»: object-position одинаковый */
/* светлая тема: контрастные подписи переключателя (золото на белом не читается) */
[data-theme="light"] .who,
[data-theme="light"] header.bar--over .who{color:#6A5E7A}
[data-theme="light"] .who:hover,
[data-theme="light"] header.bar--over .who:hover{color:#241A31}
[data-theme="light"] .who--on, [data-theme="light"] .who--on:hover,
[data-theme="light"] header.bar--over .who--on,
[data-theme="light"] header.bar--over .who--on:hover{color:#8A6412}
[data-theme="light"] .who-toggle::before{background:rgba(180,133,38,.12);
border-color:rgba(180,133,38,.55)}
[data-theme="light"] .who-toggle,
[data-theme="light"] header.bar--over .who-toggle{background:rgba(255,255,255,.6);
backdrop-filter:blur(12px); border-color:rgba(58,45,74,.16)}
/* Совсем узкие экраны (≤380): обе кнопки ОСТАЮТСЯ — одиночная капсула
с ⇄ читалась как баг, а «ЕЙ|ЕМУ» короткие и влезают, если ужать
паддинги (Алексей, 28.08, второй заход). */
@media (max-width:380px){
.who{padding:0 7px; font-size:.56rem; letter-spacing:.04em}
.bar-sep{margin:0 2px 0 4px}
.bar .who-toggle{margin-left:6px}
.bar .wrap{gap:5px}
.bar-cta{gap:4px}
}
.who-swapic{display:none}
/* ---------- hero: подсветка активного персонажа ----------
Пара — один кадр, поэтому подсвечиваем мягким световым пятном (soft-light),
без жёстких краёв: активная фигура читается светлее и насыщеннее.
Кликом по фигуре можно переключить пол — только на десктопе (на телефоне
для этого есть переключатель в шапке). */
.cine-lit{position:absolute; top:0; bottom:0; width:52%; z-index:1;
pointer-events:none; opacity:0; mix-blend-mode:soft-light;
transition:opacity .55s ease;
background:radial-gradient(58% 62% at 50% 52%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%)}
.cine-lit--he{left:0}
.cine-lit--she{right:0}
.cine-media.is-he .cine-lit--he{opacity:.62}
.cine-media.is-she .cine-lit--she{opacity:.62}
/* затемнение: включается только на время наведения на другую фигуру —
тогда «обмен» читается сразу: один гаснет, другой светлеет */
.cine-shade{position:absolute; top:0; bottom:0; width:52%; z-index:1;
pointer-events:none; opacity:0; transition:opacity .4s ease;
background:radial-gradient(58% 62% at 50% 52%, rgba(12,8,18,.5), rgba(12,8,18,0) 74%)}
.cine-shade--he{left:0}
.cine-shade--she{right:0}
[data-theme="light"] .cine-shade{
background:radial-gradient(58% 62% at 50% 52%, rgba(58,45,74,.3), rgba(58,45,74,0) 74%)}
.cine-hit{position:absolute; top:6%; bottom:8%; width:48%; z-index:2;
border:0; background:transparent; padding:0; cursor:pointer; display:block}
/* подсказка появляется на неактивной фигуре — иначе действие неочевидно */
/* подсказка выглядит как активная капсула из шапки — тот же язык,
поэтому сразу понятно, что это переключение вида */
.cine-tip{position:absolute; left:50%; top:6%; transform:translate(-50%,-6px);
font-family:inherit; font-size:.68rem; font-weight:600; letter-spacing:.09em;
text-transform:uppercase; white-space:nowrap; line-height:1;
color:var(--gold-line); background:rgba(227,184,92,.14);
border:1px solid var(--gold-line); backdrop-filter:blur(12px);
padding:9px 15px; border-radius:999px; opacity:0; pointer-events:none;
transition:opacity .28s ease, transform .28s ease}
[data-theme="light"] .cine-tip{color:#8A6412; background:rgba(255,255,255,.72);
border-color:rgba(180,133,38,.55)}
.cine-hit--he{left:1%}
.cine-hit--she{right:1%}
@media (min-width:901px) and (hover:hover){
/* наведение на неактивную фигуру: только курсор и лёгкое просветление */
.cine-media.is-she:has(.cine-hit--he:hover) .cine-lit--he,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-lit--she{opacity:.3}
/* подсказку показываем только у неактивной фигуры */
.cine-media.is-she .cine-hit--he:hover .cine-tip,
.cine-media.is-he .cine-hit--she:hover .cine-tip{opacity:1; transform:translate(-50%,0)}
/* наведение = предпросмотр обмена: активная фигура гаснет, целевая светлеет */
.cine-media.is-she:has(.cine-hit--he:hover) .cine-lit--she,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-lit--he{opacity:0}
.cine-media.is-she:has(.cine-hit--he:hover) .cine-shade--she,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-shade--he{opacity:.75}
.cine-media.is-she:has(.cine-hit--he:hover) .cine-lit--he,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-lit--she{opacity:.55}
}
[data-theme="light"] .cine-lit{
background:radial-gradient(58% 62% at 50% 52%, rgba(255,255,255,.62), rgba(255,255,255,0) 72%)}
/* ---------- hero: две отдельные фигуры вместо общего кадра ----------
Стоят вплотную (плечо мужчины за рукой девушки), выровнены по низу.
Подсветка теперь точная: активная фигура светлее и с тёплым ореолом,
вторая приглушена — при наведении показывается предпросмотр обмена. */
.cine-stage{position:relative; width:max-content; margin-inline:auto;
display:flex; align-items:flex-end; justify-content:center; gap:0}
.cine-fig{display:block; width:auto; height:100%; flex:0 0 auto; opacity:1;
transition:filter .55s ease}
/* фигуры обрезаны по контуру, поэтому стоят действительно вплотную */
/* мужчина впереди и заметно выше девушки (реальные пропорции пары) */
/* Геометрия пары зафиксирована в долях от размера фигур, поэтому наложение
и вертикальный сдвиг одинаковы на всех разрешениях (локоть парня попадает
в изгиб руки девушки). Не менять по отдельности — только парой. */
.cine-fig--he{margin-right:calc(var(--fh) * -0.082); z-index:2; height:100%;
margin-bottom:calc(var(--fh) * 0.0128)}
/* по референсу: девушка ≈92% роста мужчины и стоит на полшага позади,
поэтому её линия пола чуть выше */
.cine-fig--she{z-index:1; height:95%; margin-bottom:calc(var(--fh) * 0.021)}
/* активный / приглушённый */
/* Выделение работает НЕ яркостью (гашение читалось как «отключено»), а фокусом:
активная фигура резкая и с тёплым ореолом, вторая — чуть мягче, как в глубине
кадра. Яркость и размер обеих не меняются. */
/* цвет выделения принадлежит фигуре: она — орхидея, он — индиго */
.cine-fig--she{--sel:215,123,192}
.cine-fig--he{--sel:124,138,210}
[data-theme="light"] .cine-fig--she{--sel:180,78,152}
[data-theme="light"] .cine-fig--he{--sel:78,92,168}
.cine-media.is-she .cine-fig--she,
.cine-media.is-he .cine-fig--he{
filter:drop-shadow(0 0 30px rgba(var(--sel), .34)) drop-shadow(0 18px 30px rgba(0,0,0,.32))}
[data-theme="light"] .cine-media.is-she .cine-fig--she,
[data-theme="light"] .cine-media.is-he .cine-fig--he{
filter:drop-shadow(0 0 24px rgba(var(--sel), .45)) drop-shadow(0 12px 28px rgba(58,45,74,.3))}
/* неактивную фигуру не портим: она просто стоит без света и на полшага позади */
.cine-media.is-she .cine-fig--he,
.cine-media.is-he .cine-fig--she{filter:none}
/* старые слои общего кадра больше не участвуют */
.cine-stage .cine-lit, .cine-stage .cine-shade{display:none}
.cine-tip{display:none}
/* A. световое пятно на полу под активной фигурой — язык подиума, никого не гасим */
/* пятно не должно доходить до низа сцены: секция обрезает всё ниже, и тогда
видна горизонтальная кромка. Центр поднят, затухание кончается внутри. */
.cine-pool{position:absolute; bottom:0; width:88%; height:64%; z-index:0;
pointer-events:none; opacity:0; transition:opacity .55s ease;
background:radial-gradient(46% 40% at 50% 52%, rgba(227,184,92,.26), rgba(227,184,92,.12) 38%, rgba(227,184,92,.04) 62%, rgba(227,184,92,0) 82%)}
.cine-pool--he{left:-4%}
.cine-pool--she{right:-4%}
.cine-media.is-he .cine-pool--he{opacity:1}
.cine-media.is-she .cine-pool--she{opacity:1}
[data-theme="light"] .cine-pool{
background:
radial-gradient(42% 36% at 50% 50%, rgba(168,118,26,.5), rgba(168,118,26,.22) 40%, rgba(168,118,26,0) 78%),
radial-gradient(58% 52% at 50% 46%, rgba(126,74,150,.16), rgba(126,74,150,0) 76%)}
/* в светлой теме золото по светлому фону читается слабее, поэтому активную
фигуру дополнительно отделяем мягкой тенью-ореолом */
/* цвет фигур в светлой теме не трогаем — работает только свет за ними */
/* C. постоянные чипы под фигурами: видно состояние, видно что кликабельно,
и на мобильном это нормальная зона тапа */
/* чипы стоят парой по центру под фигурами — на любой ширине не наезжают друг
на друга (позиционирование по центру каждой фигуры их сталкивало) */
/* капсула-переключатель под парой: та же пластика, что у «для него / для неё»
в шапке — золотая шайба скользит под активной половинкой. --mid ставит
скрипт: центр капсулы = середина между фигурами. */
/* верх капсулы ровно на линии пола: обувь не перекрывается.
--pw ставит скрипт: ширина = двойное расстояние между центрами фигур,
тогда центр каждой половинки капсулы = центр «своей» фигуры. */
.cine-picks{position:absolute; left:var(--mid,50%); bottom:-40px;
width:var(--pw,auto); box-shadow:none; overflow:hidden;
transform:translateX(-50%); z-index:10;
display:grid; grid-template-columns:1fr 1fr; padding:3px;
border:1px solid var(--border); border-radius:999px; background:var(--surface);
box-sizing:border-box; isolation:isolate}
.cine-picks::before{content:""; position:absolute; z-index:0; top:3px; bottom:3px;
left:3px; width:calc(50% - 3px); border-radius:999px;
background:rgba(227,184,92,.16); border:1px solid var(--gold-line);
box-sizing:border-box; transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cine-media.is-she .cine-picks::before{transform:translateX(100%)}
[data-theme="light"] .cine-picks{background:rgba(255,255,255,.6);
backdrop-filter:blur(12px); border-color:rgba(58,45,74,.16)}
[data-theme="light"] .cine-picks::before{background:rgba(180,133,38,.12);
border-color:rgba(180,133,38,.55)}
:root[data-theme="dark"] .cine-picks{background:rgba(255,255,255,.07);
backdrop-filter:blur(12px); border-color:rgba(243,239,231,.22)}
.cine-pick{position:relative; z-index:1; box-shadow:none; font-family:inherit; font-size:.64rem;
font-weight:600; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
line-height:1; cursor:pointer; padding:9px 13px; border:0; background:transparent;
color:var(--soft); transition:color .3s ease}
.cine-pick:hover{color:var(--text)}
.cine-media.is-he .cine-pick--he,
.cine-media.is-she .cine-pick--she{color:var(--gold-line)}
[data-theme="light"] .cine-pick{color:#6B6178}
[data-theme="light"] .cine-media.is-he .cine-pick--he,
[data-theme="light"] .cine-media.is-she .cine-pick--she{color:#8A6412}
.cine-pick:focus-visible{outline:2px solid var(--gold2); outline-offset:3px}
[data-theme="light"] .cine-pick{color:#6B6178; background:transparent; border:0}
[data-theme="light"] .cine-media.is-he .cine-pick--he,
[data-theme="light"] .cine-media.is-she .cine-pick--she{color:#8A6412}
@media (hover:hover){
/* предпросмотр: наводишь на неактивную — её чип и свет подхватываются */
.cine-media.is-she:has(.cine-hit--he:hover) .cine-pick--he,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-pick--she,
.cine-pick:hover{color:var(--gold-line)}
.cine-media.is-she:has(.cine-hit--he:hover) .cine-pool--he,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-pool--she{opacity:.4}
/* в светлой теме золото по светлому фону слабее, а платье внизу шире пятна:
на предпросмотре даём почти полный свет и растягиваем пятно по подолу */
/* в светлой теме золото по светлому фону слабее — поднимаем только плотность,
ширину пятна не трогаем (её задаёт скрипт по размеру фигуры) */
[data-theme="light"] .cine-media.is-she:has(.cine-hit--he:hover) .cine-pool--he,
[data-theme="light"] .cine-media.is-he:has(.cine-hit--she:hover) .cine-pool--she{
opacity:1; --poolA:.5}
/* ореол цели в светлой теме плотнее — по светлому фону слабый не читается */
[data-theme="light"] .cine-media.is-she:has(.cine-hit--he:hover) .cine-fig--he,
[data-theme="light"] .cine-media.is-he:has(.cine-hit--she:hover) .cine-fig--she{
filter:drop-shadow(0 0 26px rgba(var(--sel), .55))
drop-shadow(0 12px 28px rgba(58,45,74,.28))}
}
@media (max-width:620px){
.cine-pick{font-size:.6rem; padding:8px 11px; letter-spacing:.08em}
.cine-picks{bottom:-38px}
}
/* хиты по фигурам */
/* сцена сжата по паре, поэтому половины совпадают с фигурами */
.cine-stage .cine-hit{top:2%; bottom:0; width:50%}
.cine-stage .cine-hit--he{left:0}
.cine-stage .cine-hit--she{right:0}
@media (min-width:901px) and (hover:hover){
/* предпросмотр обмена: цели дают полный свет, активную гасим */
.cine-media.is-she:has(.cine-hit--he:hover) .cine-fig--he,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-fig--she{
filter:drop-shadow(0 0 30px rgba(var(--sel), .34))}
.cine-media.is-she:has(.cine-hit--he:hover) .cine-fig--she,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-fig--he{filter:none}
}
@media (min-width:901px){
/* Высота сцены задаёт масштаб пары; пара приподнята над подписью.
Нижняя граница обязательна: без неё на низком окне (ноутбук с
открытой консолью, половина экрана) пара съёживалась в фигурки
сантиметрового роста — высота окна не должна решать, каким показать
главный кадр (Алексей, 21.08). Ниже 380px не опускаемся: страница
в этом случае просто прокручивается. */
.cine-stage{--fh:clamp(380px, calc(100vh - var(--bar-h) - 222px), 447px);
max-width:none; height:var(--fh); margin-bottom:40px}
}
@media (max-width:900px){
/* Та же нижняя граница, что на широком экране: 44vh на низком окне
(телефон в альбомной ориентации, узкое окно на ноутбуке) давал пару
ростом в пару сантиметров. Ниже 300px не ужимаемся — дальше
прокрутка (Алексей, 21.08). */
.cine-stage{--fh:clamp(300px, 44vh, 360px); width:auto; height:var(--fh);
margin:0 auto 38px}
}
/* ---------- мужской вид: индиго-графит вместо орхидеи ----------
Золото, логотип и искры не трогаем (брендбук). Меняется только вторичный
акцент и температура фона: сливовый уходит в глубокое индиго. */
:root.for-he[data-theme="dark"]{
--orchid:#7C8AD2; --orchid-deep:#3E4A88; --orchid-soft:rgba(124,138,210,.16);
--surface:#181B27; --surface-2:#202534; --glass:rgba(34,40,58,.55);
/* Фон страницы (а с ним шапка и подвал) тоже холодный: раньше он оставался
женским сливовым #130F1A, и индиго-карточки лежали на тёплом
фиолетовом (Алексей, 23.08). */
--bg1:#1A1E2A; --bg2:#12151F}
:root.for-he[data-theme="light"]{
--orchid:#4E5CA8; --orchid-deep:#374280; --orchid-soft:rgba(78,92,168,.12);
--surface-2:#F8F9FD;
/* Фон страницы тоже холодный — иначе индиго-акценты лежат на лиловом. */
--bg1:#F5F6FC; --bg2:#E9ECF7}
/* фоновое свечение первого экрана — в тон индиго */
:root.for-he .cine-glow{
background:radial-gradient(120% 80% at 15% -10%, rgba(124,138,210,.16), transparent 55%)}
:root.for-he[data-theme="light"] .cine-glow{
background:radial-gradient(120% 80% at 15% -10%, rgba(78,92,168,.14), transparent 55%)}
/* тонировка секций уже идёт через --orchid-soft (индиго в мужском виде),
поэтому дополнительный filter не нужен — он ломал fixed-позиционирование */
/* свет на полу под фигурой — чуть холоднее золота, но остаётся тёплым */
:root.for-he .cine-pool{
background:radial-gradient(46% 40% at 50% 52%, rgba(214,190,140,.24), rgba(214,190,140,.11) 38%, rgba(214,190,140,.04) 62%, rgba(214,190,140,0) 82%)}
/* подпись стоит по центру самой пары, а не колонки: сцена сдвигается скриптом,
поэтому плашка живёт внутри сцены и едет вместе с фигурами */
.cine-stage{overflow:visible}
.cine-media .cine-chip{left:50%; transform:translateX(-50%)}
.cine-stage > .cine-chip{position:absolute; left:50%; bottom:-98px; transform:translateX(-50%)}
/* Шапка сужается ТОЛЬКО в одну сторону — пять состояний, каждое уже прошлого:
1) ≥1051 полные кнопки «Скачать в / App Store» + «Web-версия» текстом
2) 621–1050 сторы и Web-версия — круглыми иконками
3) 401–620 + короткие подписи переключателя ЕМУ / ЕЙ
4) ≤400 глобус уходит (он есть в подвале)
Раньше на 861–900px подписи сторов возвращались, и меню становилось ШИРЕ,
чем на 901–1050 — это состояние убрано. */
@media (min-width:381px) and (max-width:620px){
.bar-cta .web-btn{width:38px; padding:0; border-radius:50%; justify-content:center}
.bar-cta .web-btn .web-btn__txt{display:none}
.bar-cta .web-btn .web-btn__ic{display:block; width:18px; height:18px; margin:0}
.bar-cta{gap:8px}
}
/* самые узкие экраны: круги мельче, чтобы шапка не вызывала горизонтальный скролл */
@media (max-width:380px){
.bar-cta .btn-store{width:34px; height:34px; padding:0; justify-content:center; border-radius:50%}
.bar-cta .btn-store .bt{display:none}
.bar-cta .web-btn .web-btn__txt{display:none}
}
/* copy всегда над сценой: сдвиг пары не должен мешать выделять текст и жать CTA */
.hero--cine .hero-copy{position:relative; z-index:5}
/* Средние десктопы (901–1240): места по высоте меньше, поэтому пара уменьшена —
голова парня не подрезается шапкой. Геометрия пары не меняется. */
/* активная фигура делает полшага вперёд — читается как выход на свет,
без искажения картинки (размытие убрали совсем) */
/* световой луч сверху убран — читался как «фонтан» над головой */
.cine-beam{display:none}
@media (hover:hover) and (min-width:901px){
.cine-media.is-she:has(.cine-hit--he:hover) .cine-beam--he,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-beam--she{opacity:.6}
.cine-media.is-she:has(.cine-hit--he:hover) .cine-beam--she,
.cine-media.is-he:has(.cine-hit--she:hover) .cine-beam--he{opacity:0}
}
/* ---------- «Оживи образ»: телефоны убраны — видео без интерфейса, поэтому
корпус ничего не доказывал. Два живых кадра в языке остальных карточек:
те же радиусы, рамки и тени, что у кадров поводов и стилей. ---------- */
.alive-duo{display:flex; gap:clamp(14px,2vw,24px); justify-content:center; align-items:center}
.alive-card{margin:0; position:relative; width:clamp(190px,20vw,260px); aspect-ratio:9/16;
border-radius:18px; overflow:hidden; border:1px solid var(--border-strong);
box-shadow:var(--shadow-soft); background:var(--surface-2)}
.alive-card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* второй кадр чуть меньше и ниже — пара дышит, а не стоит строем */
.alive-card--b{width:clamp(160px,16.5vw,215px); margin-top:clamp(28px,4vw,56px)}
@media (max-width:900px){
.alive-duo{gap:12px}
.alive-card{width:min(46vw,240px)}
.alive-card--b{width:min(38vw,200px); margin-top:24px}
}
/* капсула-переключатель под парой убрана совсем: переключатель в шапке —
единственный орган управления, тап/клик по фигурам — бонус для тех, кто найдёт */
.cine-picks{display:none}
/* подсказка первого визита: тихая строка под парой. Исчезает навсегда после
первого выбора «для него/для неё» (в любом месте) — выбор хранится. */
.cine-hint{position:absolute; left:50%; bottom:-34px; transform:translateX(-50%);
z-index:3; white-space:nowrap; font-size:.72rem; letter-spacing:.06em;
color:var(--soft); opacity:.9; transition:opacity .5s ease; pointer-events:none}
.cine-hint::before{content:"✦"; color:var(--gold2); margin-right:.55em; font-size:.62rem}
.cine-hint.is-off{opacity:0}
@media (max-width:620px){
.cine-hint{font-size:.64rem; bottom:-28px}
}
/* раскрытые описания в «И ещё» — это основной текст блока, поэтому в светлой
теме он идёт цветом --muted (5.5:1), а не --soft (3.6:1, ниже нормы) */
[data-theme="light"] .more-item span{color:var(--muted)}
.more-item span{line-height:1.55}
/* ---------- шапка: кнопки сторов убраны (они есть в первом экране и в финале).
Слева логотип с воздухом, справа — только то, что меняет вид сайта:
«для него/для неё», Web-версия и тема. ---------- */
.bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,40px)}
.bar-cta{display:flex; align-items:center; gap:clamp(10px,1.4vw,18px)}
.bar-cta .who-toggle{margin:0}
/* выравнивание пары в hero по кнопке App Store больше не нужно — кнопки в шапке нет */
/* ширину переключателя задаёт скрипт: она равна двойному расстоянию между
центрами фигур, поэтому центр каждой половинки приходится ровно на фигуру */
/* Ширина капсулы одна на весь сайт. На главной скрипт подгоняет её под
пару фигур (--who-w), на остальных страницах фигур нет — и без общего
значения переключатель выходил заметно уже, чем на главной
(Алексей, 23.08). */
.bar .who-toggle{width:var(--who-w,232px); display:grid; grid-template-columns:1fr 1fr}
@media (max-width:900px){
/* На телефоне подписи короткие («ЕМУ/ЕЙ»), капсула живёт по содержимому. */
.bar .who-toggle{width:var(--who-w,auto)}
}
.bar .who{padding:0 10px; min-width:0}
/* разделитель нужен всюду, где рядом стоят настройки и кнопка входа —
и на узких тоже: без него «ЕЙ/ЕМУ» слипается с кружком входа
(Алексей, 30.08). Поля на ≤380 ужаты выше (.bar-sep в 380-медиа). */
.bar-sep{display:block}
/* иконка входа в web-версию: фиксированный размер во всех состояниях кнопки */
.bar-cta .web-btn .web-btn__ic{width:18px; height:18px; flex:0 0 auto}
/* на узких экранах пара стоит слишком близко к подписи под кнопками */
@media (max-width:900px){
.hero--cine .cine-stage{margin-top:clamp(18px,4vw,34px)}
}
/* подпись к паре: доказательство, что кадры собраны продуктом. Форма — как
подпись к фотографии: мелкие прописные с разрядкой, без плашки и рамки. */
.cine-credit{position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
z-index:3; white-space:nowrap; font-size:.7rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--soft); pointer-events:none}
/* в светлой теме мелкие прописные цветом --soft не проходят по читаемости */
[data-theme="light"] .cine-credit{color:var(--muted)}
@media (max-width:620px){
.cine-credit{font-size:.64rem; letter-spacing:.1em; bottom:-24px}
}
.cine-hint{display:none}
/* «именно на тебе» уходит отдельной строкой только на десктопе, где абзац
набран узкой мерой; на узких экранах перенос выглядит случайным */
@media (max-width:900px){
/* вместо переноса — обычный пробел, иначе слова склеиваются */
.hero--cine .hero-copy .lead br{display:none}
.hero--cine .hero-copy .lead .emph::before{content:" "}
}
/* ---------- тап по фигурам: без тёмной рамки-вспышки на телефоне ---------- */
.cine-hit, .cine-pick, .who, .theme-btn, .web-btn, .btn-store, .tag,
.wordmark, .wordmark img, .ins, .thumb--portrait, .more-item, .alive-card{
-webkit-tap-highlight-color:transparent}
.cine-hit{outline:0; background:transparent; border:0; appearance:none;
-webkit-appearance:none}
.cine-hit:focus{outline:0}
.cine-hit:focus-visible{outline:2px solid var(--gold2); outline-offset:-6px}
.cine-hit:active{background:transparent}
/* ---------- смена вида «для него / для неё»: цвет перетекает, а не прыгает.
Фон страницы — градиент на переменных, он не анимируется, поэтому мужской
фон лежит отдельным слоем и плавно проявляется поверх женского. ---------- */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
opacity:0; transition:opacity .5s ease;
background:
radial-gradient(120% 80% at 80% -10%, rgba(124,138,210,.16), transparent 60%),
linear-gradient(165deg, #181B27, #0F111A)}
[data-theme="light"] body::before{
background:
radial-gradient(120% 80% at 80% -10%, rgba(78,92,168,.12), transparent 60%),
linear-gradient(165deg, #F3F4FB, #E5E9F4)}
:root.for-he body::before{opacity:1}
/* акценты (кнопки, надзаголовки, рамки, свечение) перетекают той же длительностью */
.btn-store, .ghost, .web-btn, .theme-btn, .who-toggle, .who, .eyebrow, .tag,
.more-item, .alive-card, .frame, .stylelook, .thumb, .free-pill, .price, .cine-glow{
transition:background-color .5s ease, color .5s ease, border-color .5s ease,
box-shadow .5s ease, background-image .5s ease, filter .5s ease}
/* если автозапуск запрещён — карточка кликабельна и показывает кнопку play */
.alive-card{cursor:default}
.alive-card.needs-tap{cursor:pointer}
.alive-card.needs-tap::after{content:""; position:absolute; left:50%; top:50%;
width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
background:rgba(20,14,29,.55) url("data:image/svg+xml;utf8,") center/22px no-repeat;
backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3)}
/* смена образа под повод: растворение с микро-зумом вместо мгновенной подмены */
.thumb--portrait{position:relative; overflow:hidden}
/* только растворение, без зума: кадр вписан в рамку, любое движение масштаба
читается как рывок */
.occ-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity .7s ease}
.occ-shot.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
.occ-shot{transition:opacity .01s linear}
}
/* единая плавность для всех перетекающих кадров сайта (в т.ч. будущих блоков) */
.shot.rot, .fade-swap{transition:opacity .7s ease}
/* карточки «И ещё» всплывают по мере прокрутки: каждая наблюдается отдельно,
поэтому движение видно, даже если блок уже частично на экране. Соседние в
одном ряду разводятся микро-задержкой, чтобы читалась волна. */
.more.reveal{opacity:1; transform:none; transition:none}
.more .more-item.reveal{opacity:0; transform:translateY(24px);
transition:opacity .55s ease, transform .55s cubic-bezier(.22,.68,.3,1)}
.js .more .more-item.reveal.in{opacity:1; transform:none}
.js .more .more-item.reveal:nth-child(3n+2){transition-delay:.09s}
.js .more .more-item.reveal:nth-child(3n){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
.more .more-item.reveal{opacity:1; transform:none; transition:none}
}
/* блок с кадрами не «всплывает» пустой рамкой: пока изображения не готовы,
контейнер держит свой фон, а появление идёт вместе с картинкой */
.thumb--portrait, .stylelook, .alive-card, .stylemix .trio img{background:var(--surface-2)}
.stylemix .trio img, .thumb--portrait img, .stylelook-img{
transition:opacity .7s ease}
/* ---------- магнитные кнопки сторов: капсула тянется к курсору ---------- */
.btn-store{will-change:transform}
/* дышащий свет под активной фигурой: медленная пульсация, амплитуда ~8% */
@keyframes cine-breath{
0%,100%{transform:scale(.94); filter:brightness(.82) saturate(.95)}
50%{transform:scale(1.14); filter:brightness(1.28) saturate(1.1)}
}
@media (prefers-reduced-motion:no-preference){
.cine-media.is-he .cine-pool--he,
.cine-media.is-she .cine-pool--she{
animation:cine-breath 4.5s ease-in-out infinite; transform-origin:50% 62%}
}
/* золотая нить прогресса чтения под шапкой */
/* нить по нижней кромке шапки: полупрозрачная, с длинным мягким растворением
слева — читается как отсвет, а не как индикатор */
.readbar{position:fixed; left:0; top:var(--bar-bottom,70px); height:2px; z-index:60;
margin-top:-2px; width:0; pointer-events:none; opacity:.38;
background:linear-gradient(90deg, rgba(227,184,92,0), rgba(227,184,92,.45) 55%, rgba(240,208,140,.85));
box-shadow:0 0 12px rgba(227,184,92,.28); filter:blur(.3px)}
[data-theme="light"] .readbar{opacity:.34;
background:linear-gradient(90deg, rgba(168,118,26,0), rgba(180,133,38,.4) 55%, rgba(150,104,16,.75));
box-shadow:0 0 10px rgba(168,118,26,.22)}
/* пасхалка: разлёт искр от логотипа */
.spark-burst{position:fixed; inset:0; z-index:200; pointer-events:none}
.spark-burst i{position:absolute; width:var(--sz,7px); height:var(--sz,7px);
margin:calc(var(--sz,7px) / -2) 0 0 calc(var(--sz,7px) / -2);
background:var(--gold2);
clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
filter:drop-shadow(0 0 6px rgba(227,184,92,.8));
animation:spark-fly 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spark-fly{
0%{transform:translate(0,0) scale(.3) rotate(0deg); opacity:0}
14%{opacity:1}
70%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg); opacity:.95}
100%{transform:translate(calc(var(--dx) * .82), calc(var(--dy) * .82 + 26px)) scale(.4) rotate(220deg); opacity:0}
}
/* постер видео кадрируется по ширине, а не растягивается: у постеров 3:4,
у карточки 9:16 — иначе фигура вытягивается по высоте */
.alive-card video{object-fit:cover; object-position:50% 30%}
/* оживление кадров на десктопе: при наведении карточка чуть подрастает вместе
с рамкой (2%), тень становится глубже — ощущение живого объекта, без рывка */
@media (hover:hover) and (min-width:901px){
.ins--out .thumb--portrait,
.ins .thumb--portrait,
.stylelook,
.alive-card{
transition:transform .45s cubic-bezier(.22,.68,.3,1), box-shadow .45s ease;
will-change:transform}
.ins--out .thumb--portrait:hover,
.ins .thumb--portrait:hover,
.stylelook:hover,
.alive-card:hover{
transform:scale(1.022);
box-shadow:0 26px 54px -28px rgba(20,12,32,.6), var(--shadow-soft)}
[data-theme="light"] .ins--out .thumb--portrait:hover,
[data-theme="light"] .ins .thumb--portrait:hover,
[data-theme="light"] .stylelook:hover,
[data-theme="light"] .alive-card:hover{
box-shadow:0 24px 48px -28px rgba(58,45,74,.4), var(--shadow-soft)}
}
@media (prefers-reduced-motion:reduce){
.ins--out .thumb--portrait, .ins .thumb--portrait, .stylelook, .alive-card{
transition:none}
.ins--out .thumb--portrait:hover, .ins .thumb--portrait:hover,
.stylelook:hover, .alive-card:hover{transform:none}
}
/* трио «твои фото»: при наведении карточка вырастает почти до размера кадра
справа, чтобы образ можно было разглядеть. Наклон снимается — фото
встаёт ровно, поднимается над соседями и получает глубокую тень. */
@media (hover:hover) and (min-width:901px){
.stylemix .trio{position:relative}
.stylemix .trio img{
position:relative; z-index:1;
/* z-index возвращается только ПОСЛЕ доводки: пока карточка уменьшается,
она остаётся верхним слоем и соседние её не перекрывают */
transition:transform .5s cubic-bezier(.22,.68,.3,1), box-shadow .5s ease,
border-color .5s ease, filter .5s ease;
transform-origin:50% 50%; will-change:transform}
.stylemix .trio:hover img:not(:hover){filter:saturate(.85) brightness(.94)}
/* контур тонкий и вплотную к кадру: рисуем его рамкой самого изображения,
а не тенью-обводкой — она отставала от края на масштабе */
.stylemix .trio img:hover{
transform:scale(1.75) rotate(0deg) !important;
z-index:9;
border-color:rgba(227,184,92,.55);
box-shadow:0 34px 70px -30px rgba(20,12,32,.75)}
[data-theme="light"] .stylemix .trio img:hover{
border-color:rgba(180,133,38,.45);
box-shadow:0 30px 60px -30px rgba(58,45,74,.45)}
}
@media (prefers-reduced-motion:reduce){
.stylemix .trio img{transition:none}
.stylemix .trio img:hover{transform:none !important}
}
/* наведение на фигуру — едва заметный «шаг вперёд»: рост на 1.2% от низа,
так читается, что фигуру можно выбрать. Размеры пары при этом не меняются
(масштаб визуальный, геометрия наложения та же). */
@media (hover:hover) and (min-width:901px){
.cine-fig{transform-origin:50% 100%;
transition:filter .55s ease, transform .5s cubic-bezier(.22,.68,.3,1)}
.cine-media:has(.cine-hit--he:hover) .cine-fig--he,
.cine-media:has(.cine-hit--she:hover) .cine-fig--she{transform:scale(1.003)}
}
@media (prefers-reduced-motion:reduce){
.cine-fig{transition:filter .55s ease}
.cine-media:has(.cine-hit--he:hover) .cine-fig--he,
.cine-media:has(.cine-hit--she:hover) .cine-fig--she{transform:none}
}
/* карточки «Мелочи»: тот же язык отклика, что у кадров — лёгкий рост и тень */
@media (hover:hover) and (min-width:901px){
.more .more-item{
transition:opacity .55s ease, transform .45s cubic-bezier(.22,.68,.3,1)}
.js .more .more-item.reveal.in:hover{transform:scale(1.018)}
}
@media (prefers-reduced-motion:reduce){
.js .more .more-item.reveal.in:hover{transform:none}
}
/* ---------- мобильные: тап по кадру приближает его прямо в рамке ----------
Никаких модалок: карточка растёт на месте, соседняя чуть уходит, любое
следующее действие (тап, скролл, тап по второй) возвращает всё назад. */
@media (max-width:900px){
.chain:has(.ins) .ins{transition:flex-basis .45s cubic-bezier(.22,.68,.3,1),
max-width .45s cubic-bezier(.22,.68,.3,1), opacity .35s ease}
.chain:has(.ins) .thumb--portrait{
transition:transform .62s cubic-bezier(.32,.72,.24,1), box-shadow .55s ease;
transform-origin:50% 50%; cursor:zoom-in}
/* сдвиг к центру ленты ставит скрипт: --zx считается по фактическому
положению кадра, поэтому увеличенное фото не упирается в край экрана */
.chain:has(.ins) .ins.is-zoom .thumb--portrait{
transform:translate(var(--zx,0px), var(--zy,0px)) scale(var(--zs,1.42));
z-index:8; cursor:zoom-out;
box-shadow:0 26px 60px -26px rgba(20,12,32,.7)}
.chain:has(.ins) .ins{position:relative; z-index:1}
/* уходящий кадр остаётся выше соседа, пока едет обратно */
.chain:has(.ins) .ins.is-zoom{z-index:9}
.chain:has(.ins) .ins.was-zoom{z-index:8}
.chain:has(.ins.is-zoom) .ins:not(.is-zoom){opacity:.35}
.chain:has(.ins).has-zoom{overflow:visible}
/* подпись под увеличенным кадром растёт вместе с ним и остаётся читаемой,
чтобы было видно, к какому поводу относится образ */
.chain:has(.ins) .ins-cap{transition:opacity .3s ease, transform .45s cubic-bezier(.22,.68,.3,1)}
.chain:has(.ins.is-zoom) .ins:not(.is-zoom) .ins-cap{opacity:0}
/* подпись едет вместе с кадром и отступает ниже его увеличенного края:
сдвиг считается от прироста высоты кадра (42% × половина высоты) */
.chain:has(.ins) .ins.is-zoom .ins-cap{
transform:translate(var(--zx,0px), var(--zcap,26px)) scale(1.15);
position:relative; z-index:9}
/* строка «Куда собираешься? …» тоже подрастает — иначе непонятно, к чему кадр */
.split-vis:has(.ins--out) .ask{transition:transform .45s cubic-bezier(.22,.68,.3,1)}
/* строка с поводом поднимается над увеличенным кадром и остаётся сверху:
кадр растёт вверх на 21% высоты, поэтому строка отходит на столько же */
.split-vis:has(.ins--out) .ask{position:relative; z-index:11;
transition:transform .45s cubic-bezier(.22,.68,.3,1), opacity .3s ease}
.split-vis:has(.ins--out.is-zoom) .ask{
transform:translateY(calc(var(--zask,150px) * -1)) scale(1.12)}
/* состояние читаем прямо из DOM, без классов от скрипта:
левый кадр (портрет) — повод к нему не относится, прячем и уводим вниз;
правый (образ) — строка едет вверх вместе с кадром и лежит поверх него */
.split-vis:has(.ins:not(.ins--out).is-zoom) .ask{opacity:0; pointer-events:none; z-index:1}
.split-vis:has(.ins--out.is-zoom) .ask{z-index:12}
/* пока кадр уезжает обратно, он остаётся верхним слоем — строка повода
не должна проступать поверх него */
.split-vis:has(.ins.was-zoom) .ask{z-index:1}
.chain:has(.ins) .ins.was-zoom .thumb--portrait{z-index:9; position:relative}
/* затемняющая вуаль: фокус на раскрытом кадре, остальная страница уходит */
.zoom-veil{position:fixed; inset:0; z-index:6; pointer-events:none;
background:rgba(var(--veil-rgb),.94);
opacity:0; transition:opacity .4s ease}
[data-theme="light"] .zoom-veil{background:rgba(var(--veil-rgb),.97)}
.zoom-veil.is-on{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.chain:has(.ins) .ins.is-zoom .thumb--portrait{transform:none}
}
/* ---------- ручное листание поводов ---------- */
.ins--out{touch-action:pan-y}
/* рамка неподвижна всегда: двигаются только кадры внутри неё */
.ins--out .thumb--portrait{touch-action:pan-y}
/* точки лежат ВНУТРИ кадра по нижнему краю — подписи не сдвигаются */
.occ-dots{position:absolute; left:0; right:0; bottom:6px; z-index:5;
display:flex; gap:6px; justify-content:center; pointer-events:auto}
.occ-dot{width:5px; height:5px; padding:0; border:0; border-radius:50%;
background:rgba(255,255,255,.42); cursor:pointer; appearance:none;
box-shadow:0 1px 3px rgba(0,0,0,.35);
transition:background-color .35s ease, transform .35s ease}
.occ-dot.is-on{background:var(--gold2); transform:scale(1.25);
box-shadow:0 0 6px rgba(227,184,92,.6)}
/* шевроны листания: тонкая золотая линия на стеклянной капсуле — в языке
бренда, без чёрных подложек и жирных стрелок */
.occ-arrow{position:absolute; top:50%; margin-top:-19px; width:38px; height:38px;
display:none; align-items:center; justify-content:center; z-index:6;
padding:0; cursor:pointer; opacity:0;
color:var(--gold2); background:rgba(20,14,29,.34);
border:1px solid rgba(227,184,92,.34); border-radius:50%;
backdrop-filter:blur(8px);
transition:opacity .3s ease, transform .3s ease, background-color .3s ease,
border-color .3s ease}
[data-theme="light"] .occ-arrow{color:#9A6D14; background:rgba(255,255,255,.5);
border-color:rgba(180,133,38,.4)}
.occ-arrow svg{width:19px; height:19px; fill:none; stroke:currentColor;
stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.occ-arrow--prev{left:8px}
.occ-arrow--next{right:8px}
/* на телефонах листание только свайпом и точками */
@media (max-width:900px), (hover:none){
.occ-arrow{display:none !important}
}
@media (hover:hover) and (min-width:901px){
.occ-arrow{display:flex}
.ins--out .thumb--portrait:hover .occ-arrow{opacity:1}
.occ-arrow:hover{background:rgba(20,14,29,.5); border-color:var(--gold-line)}
[data-theme="light"] .occ-arrow:hover{background:rgba(255,255,255,.72);
border-color:rgba(180,133,38,.6)}
.occ-arrow--prev:hover{transform:translateX(-2px)}
.occ-arrow--next:hover{transform:translateX(2px)}
}
/* во время жеста кадры двигаются inline-стилями из скрипта — CSS только
гарантирует, что они лежат друг на друге и не обрезаются рамкой */
.ins--out .thumb--portrait{overflow:hidden}
/* размер раскрытия задаёт скрипт (--zs); держим запас 13% */
/* в раскрытом виде жест целиком принадлежит карточке: иначе iOS перехватывает
его под прокрутку и присылает отмену ещё до первого движения */
/* в раскрытом виде вертикаль остаётся у страницы: тем же движением кадр
сворачивается И страница продолжает прокручиваться, без второго жеста.
Горизонталь по-прежнему наша — ею листаются образы. */
.ins.is-zoom, .ins.is-zoom .thumb--portrait{touch-action:pan-y}
/* горизонтальный жест по кадру принадлежит нам, страница вбок не едет */
.chain:has(.ins){overscroll-behavior-x:none}
.ins--out{overscroll-behavior-x:none}
/* кадры листаются с просветом, как в фотоальбоме: за краем видна подложка */
.ins--out .thumb--portrait{background:var(--surface-2)}
/* страница не должна ездить вбок от жеста по кадру (iOS-овская
горизонтальная «резинка» выглядела как сдвиг самой рамки) */
/* overflow-x:hidden здесь ломает липкую шапку (html/body становятся
скролл-контейнером) — от «резинки» достаточно overscroll-behavior */
html, body{overscroll-behavior-x:none}
.chain:has(.ins){touch-action:pan-y}
/* на телефоне точки ниже: на некоторых кадрах они попадали на обувь */
@media (max-width:900px){
.occ-dots{bottom:4px}
.occ-dot{width:4px; height:4px}
}
/* мужской портрет уже скадрирован в 3:4 с воздухом под ногами */
/* в раскрытом виде на телефоне показываем шевроны — листание без жестов */
@media (max-width:900px){
/* шевроны в раскрытом виде: размер задаём в обратном масштабе к --zs,
иначе увеличение кадра раздувает их вместе с фото */
.ins--out.is-zoom .occ-arrow{display:flex !important; opacity:.95;
width:42px; height:42px; margin-top:-21px;
transform:scale(calc(1 / var(--zs, 1.6)))}
.ins--out.is-zoom .occ-arrow svg{width:21px; height:21px}
.ins--out.is-zoom .occ-arrow--prev{left:2px}
.ins--out.is-zoom .occ-arrow--next{right:2px}
}
/* невидимая зона попадания вокруг шеврона: промах на пару пикселей больше
не считается тапом по кадру и не сворачивает его */
.occ-arrow::after{content:""; position:absolute; inset:-14px; border-radius:50%}
@media (max-width:900px){
.ins--out.is-zoom .occ-arrow::after{inset:-18px}
}
/* ---------- мобильные: пачка раскрывается сеткой 2×2 в рабочей зоне ---------- */
@media (max-width:900px){
.stylemix .trio{position:relative; cursor:zoom-in}
.stylemix .trio img{transition:transform .5s cubic-bezier(.32,.72,.24,1),
box-shadow .5s ease, opacity .35s ease}
/* сетку рисует только transform: раскладка не меняется, поэтому
ни ширина, ни наложение не «доводятся» в последнем кадре */
/* блок с карточками поднимается над вуалью (она лежит на уровне страницы,
z-index 400), поэтому затемняется всё остальное, включая заголовки */
.stylemix.has-grid{position:relative; z-index:401}
/* образ стиля: в обычном виде блок чуть уже экрана, чтобы тапу было куда
увеличивать; при раскрытии он занимает всю рабочую зону */
.stylepick{max-width:86%; margin-inline:auto}
.stylepick .stylelook{cursor:zoom-in}
.stylepick.is-zoom{position:relative; z-index:401}
.stylepick.is-zoom .stylelook{cursor:zoom-out}
.stylepick.is-zoom .stylelook,
.stylepick.is-zoom .tag{will-change:transform;
backface-visibility:hidden; -webkit-backface-visibility:hidden}
.stylemix.has-grid .trio{position:relative; z-index:2; cursor:zoom-out}
.stylemix.has-grid .trio img{will-change:transform;
backface-visibility:hidden; -webkit-backface-visibility:hidden}
.stylemix.has-grid .stylemix-cap{position:relative; z-index:2}
.stylemix .zoom-veil{z-index:6}
}
/* ---------- мобильные: «Мелочи» как аккордеон ----------
Видны шесть коротких заголовков — блок читается за один экран, а описание
раскрывается по тапу. Тексты не тронуты. */
@media (max-width:900px){
.more{display:flex; flex-direction:column; gap:0}
/* ритм списку задают золотые номера в наборной антикве, а заголовки
становятся спокойнее по весу — строки перестают сливаться в одну массу */
.more{counter-reset:more}
.more .more-item{position:relative; counter-increment:more;
padding:17px 46px 17px 46px;
border:0; border-bottom:1px solid var(--border); border-radius:0;
background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.more .more-item:first-child{border-top:1px solid var(--border)}
.more .more-item::before{content:counter(more,decimal-leading-zero);
position:absolute; left:14px; top:19px;
font-family:var(--font-display); font-size:.82rem; letter-spacing:.02em;
color:var(--gold2); opacity:.85}
[data-theme="light"] .more .more-item::before{color:#B4852A}
.more .more-item b{display:block; font-size:1rem; line-height:1.35;
font-weight:500; letter-spacing:-.005em;
transition:color .3s ease}
.more .more-item.is-open b{color:var(--gold-line); font-weight:600}
[data-theme="light"] .more .more-item.is-open b{color:#8A6412}
/* подложка активного пункта — аккуратная плашка внутри своей строки:
отрицательные отступы сдвигали номер и текст, поэтому их не используем */
.more .more-item.is-open{background:var(--orchid-soft); border-radius:14px;
border-bottom-color:transparent}
/* линия над раскрытым пунктом убирается — иначе прямой отрезок спорит
со скруглением плашки */
.more .more-item:has(+ .more-item.is-open){border-bottom-color:transparent}
.more .more-item.is-open + .more-item{border-top:0}
.more .more-item.is-open::before{opacity:1}
/* раскрытие меняет высоту МГНОВЕННО (плавно идёт только проявление текста):
тогда итоговая раскладка известна в том же кадре и компенсация прокрутки
держит нажатую строку на месте — страница не прыгает */
.more .more-item span{display:block; overflow:hidden;
height:0; opacity:0; margin-top:0; transition:opacity .22s ease}
.more .more-item.is-open span{height:auto; opacity:1; margin-top:8px;
transition:opacity .3s ease .04s}
/* знак раскрытия: тонкий шеврон в брендовом золоте */
.more .more-item::after{content:""; position:absolute; right:18px; top:22px;
width:8px; height:8px; border-right:1.5px solid var(--gold2);
border-bottom:1.5px solid var(--gold2); transform:rotate(45deg);
transition:transform .35s ease, opacity .3s ease; opacity:.75}
[data-theme="light"] .more .more-item::after{border-color:#B4852A}
.more .more-item.is-open::after{transform:rotate(225deg); opacity:1}
/* каскад появления в списке не нужен — он мешает читать заголовки */
.more .more-item.reveal{opacity:1; transform:none; transition:none}
}
/* мерцание при тапе: гасим системную подсветку и подсветку выделения */
.wordmark, .wordmark *{-webkit-tap-highlight-color:transparent;
-webkit-touch-callout:none; user-select:none}
.wordmark:focus{outline:0}
.wordmark:focus-visible{outline:2px solid var(--gold2); outline-offset:4px}
/* кнопка «наверх» всегда над вуалью и раскрытыми кадрами (z-index 400/401) */
.to-top{z-index:420}
@media (max-width:900px){
/* видео: тап увеличивает по центру рабочей зоны */
.alive-card{cursor:zoom-in}
.alive-card.is-zoom{position:relative; z-index:401; cursor:zoom-out;
will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden}
/* второй кадр на время раскрытия уходит: иначе он перекрывал увеличенный */
.alive-duo:has(.alive-card.is-zoom:not(.closing)) .alive-card:not(.is-zoom){opacity:0}
.alive-duo .alive-card{transition:opacity .3s ease}
}
/* системная кнопка запуска у видео (Safari показывает её, пока автозапуск
не подхватился) — не нужна: видео всегда играет само */
.alive-vid::-webkit-media-controls,
.alive-vid::-webkit-media-controls-panel,
.alive-vid::-webkit-media-controls-start-playback-button,
.alive-vid::-webkit-media-controls-play-button,
.alive-vid::-webkit-media-controls-overlay-play-button{
display:none !important; -webkit-appearance:none; opacity:0}
.alive-vid{pointer-events:none}
.alive-card{pointer-events:auto}
@media (max-width:900px){
/* один закон на весь сайт: при раскрытии кадра затемняется вся страница,
включая шапку, а раскрытый кадр (со своей строкой и подписью) — сверху */
.split-vis:has(.ins.is-zoom){position:relative; z-index:401}
/* соседний кадр на время раскрытия уходит: иначе он остаётся незатемнённым
(подъём слоя поднимает весь блок целиком) */
/* в раскрытом виде соседний кадр полностью выключен: не виден и не ловит
тапы (opacity задаём с !important — у .ins есть своя анимация появления) */
.chain:has(.ins.is-zoom) .ins:not(.is-zoom){opacity:0 !important; pointer-events:none}
.chain .ins{transition:opacity .3s ease}
.alive-duo:has(.alive-card.is-zoom:not(.closing)) .alive-card:not(.is-zoom){opacity:0 !important; pointer-events:none}
.split-vis:has(.ins.was-zoom){position:relative; z-index:auto}
.bar{z-index:60}
}
@media (max-width:900px){
/* строка повода при сворачивании уходит ПОД соседний кадр: во время возврата
она не должна ехать поверх кадров */
.split-vis:has(.ins.was-zoom) .ask{z-index:0}
.chain.has-zoom .ins.is-zoom,
.chain .ins.was-zoom{position:relative; z-index:5}
}
@media (max-width:900px){
/* пока кадр раскрыт, кнопка прокрутки скрыта: она мешает просмотру */
body:has(.zoom-veil.is-on) .to-top{opacity:0 !important; visibility:hidden; pointer-events:none}
/* подвал: два столбца ссылок рядом, логотип того же размера, что в шапке */
/* Бренд и три колонки — одна сетка 2×2: слева логотип с подписью,
справа «Сервис», ниже «Связь» и «Документы». Раньше колонок было две
и они жили отдельным блоком, отчего подвал выглядел несимметрично
(Алексей, 23.08). */
footer .f-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 20px}
footer .f-cols{display:contents}
/* логотип в подвале того же размера, что в шапке (в базовых стилях он 42px) */
footer .wordmark .wm{height:32px}
}
/* логотип в подвале того же размера, что в шапке (в базовых стилях он был 42px) */
footer .wordmark .wm{height:38px}
@media (max-width:520px){ footer .wordmark .wm{height:32px} }
/* ---------- «Мой стиль» на телефоне: навигация внутри кадра ----------
Чипы над кадром рвали связь с блоком выше, поэтому на мобильных листание
идёт шевронами и точками, а название стиля лежит в углу самого кадра. */
.look-badge, .look-dots, .look-arrow{display:none}
@media (max-width:900px){
.stylepick .tags.tags--pick{display:none}
.stylelook{position:relative}
.look-badge{display:inline-block; position:absolute; left:10px; bottom:10px; z-index:6;
padding:6px 12px; border-radius:999px; font-size:.76rem; letter-spacing:.02em;
color:#F6F1EA; background:rgba(20,14,29,.5); backdrop-filter:blur(6px);
border:1px solid rgba(227,184,92,.34); pointer-events:none}
[data-theme="light"] .look-badge{color:#2E2438; background:rgba(255,255,255,.62);
border-color:rgba(180,133,38,.34)}
.look-dots{display:flex; position:absolute; left:0; right:0; bottom:6px; z-index:6;
gap:6px; justify-content:center}
.look-dot{width:4px; height:4px; padding:0; border:0; border-radius:50%;
background:rgba(255,255,255,.42); box-shadow:0 1px 3px rgba(0,0,0,.35);
appearance:none; cursor:pointer; transition:background-color .3s ease, transform .3s ease}
.look-dot.is-on{background:var(--gold2); transform:scale(1.5)}
[data-theme="light"] .look-dot{background:rgba(58,45,74,.3)}
[data-theme="light"] .look-dot.is-on{background:#B4852A}
.look-arrow{display:flex; position:absolute; top:50%; margin-top:-19px; z-index:6;
width:38px; height:38px; align-items:center; justify-content:center;
padding:0; cursor:pointer; border-radius:50%;
color:var(--gold2); background:rgba(20,14,29,.34);
border:1px solid rgba(227,184,92,.3); backdrop-filter:blur(4px)}
[data-theme="light"] .look-arrow{color:#9A6D14; background:rgba(255,255,255,.5);
border-color:rgba(180,133,38,.4)}
.look-arrow svg{width:19px; height:19px; fill:none; stroke:currentColor;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.look-arrow--prev{left:8px}
.look-arrow--next{right:8px}
}
@media (max-width:900px){
/* подпись стиля компактнее и приподнята над обувью */
/* название стиля стоит НАД кадром тонкой строкой: фото не перекрывается,
логика та же, что у «твоих фото» */
.look-badge{position:static; left:auto; right:auto; bottom:auto; top:auto;
transform:none; padding:0 0 6px; border:0; background:none; text-align:center;
backdrop-filter:none; color:var(--soft); font-size:.72rem;
letter-spacing:.04em; white-space:nowrap}
[data-theme="light"] .look-badge{background:none; border:0; color:var(--muted)}
/* в раскрытом виде подпись не растёт вместе с кадром */
.stylepick.is-zoom .look-badge{transform:scale(calc(1 / var(--ps, 1.2)));
transform-origin:50% 100%}
}
@media (max-width:900px){
/* в раскрытом виде размер шевронов НЕ растёт вместе с кадром: как в блоке
выше, они уменьшаются обратно масштабу увеличения */
.stylepick.is-zoom .look-arrow{width:42px; height:42px; margin-top:-21px;
transform:scale(calc(1 / var(--ps, 1.2)))}
.stylepick.is-zoom .look-arrow svg{width:21px; height:21px}
.stylepick.is-zoom .look-arrow--prev{left:2px}
.stylepick.is-zoom .look-arrow--next{right:2px}
/* зона попадания вокруг шеврона — как в блоке с поводами */
.look-arrow::after{content:""; position:absolute; inset:-14px; border-radius:50%}
.stylepick.is-zoom .look-arrow::after{inset:-18px}
.ins--out.is-zoom .occ-arrow{transform:scale(calc(1 / var(--zs, 1.6)))}
}
@media (max-width:900px){
/* в свёрнутом виде листание свайпом и точками, шевроны появляются только
при раскрытии — та же логика, что в блоке с поводами */
.stylepick:not(.is-zoom) .look-arrow{display:none !important}
}
/* подпись стиля у «твоих фото»: тот же чип, что на кадре образа, но лежит
отдельным слоем над увеличенной карточкой */
.trio-tag{position:fixed; z-index:1; transform:translate(-100%, -100%);
padding:5px 11px; border-radius:999px; font-size:.7rem; letter-spacing:.02em;
white-space:nowrap;
color:#F6F1EA; background:rgba(20,14,29,.5); backdrop-filter:blur(6px);
border:1px solid rgba(227,184,92,.34); pointer-events:none;
opacity:0; visibility:hidden;
transition:opacity .5s cubic-bezier(.3,.75,.25,1)}
.trio-tag.is-on{opacity:1; visibility:visible}
[data-theme="light"] .trio-tag{color:#2E2438; background:rgba(255,255,255,.62);
border-color:rgba(180,133,38,.34)}
@media (max-width:900px){
/* при сворачивании шевроны исчезают сразу, а не в конце полёта */
.stylepick.closing .look-arrow{display:none !important}
}
/* подвал: обёртка колонок держит два столбца на любой ширине, а сама сетка
подвала состоит из двух частей — бренд и колонки */
@media (min-width:901px){
footer .f-grid{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
footer .f-cols{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 28px}
}
/* на телефоне подпись стиля — тонкая строка над кадром, без капсулы:
маленькие кадры она бы перекрывала наполовину */
.trio-tag--over{transform:translate(-50%, -100%);
padding:0; border:0; background:none; backdrop-filter:none;
color:var(--text); font-size:.78rem; letter-spacing:.04em;
text-shadow:0 1px 8px rgba(0,0,0,.5)}
[data-theme="light"] .trio-tag--over{background:none; border:0; color:var(--text);
text-shadow:0 1px 8px rgba(255,255,255,.6)}
@media (hover:hover) and (min-width:901px){
/* на десктопе подпись — капсула в стиле чипов над кадром */
.trio-tag--over{padding:9px 16px; border-radius:999px; font-size:.86rem;
letter-spacing:.01em; color:var(--gold-line);
background:linear-gradient(rgba(227,184,92,.14), rgba(227,184,92,.14)), #1C1727;
border:1px solid var(--gold-line)}
[data-theme="light"] .trio-tag--over{color:#8A6412;
background:linear-gradient(rgba(227,184,92,.14), rgba(227,184,92,.14)), #FFFFFF;
border-color:rgba(180,133,38,.55)}
}
@media (min-width:901px){
footer .f-grid{grid-template-columns:minmax(0,auto) minmax(0,max-content);
justify-content:space-between; align-items:start; gap:clamp(48px,8vw,120px)}
footer .f-cols{grid-template-columns:repeat(3, max-content);
gap:0 clamp(40px,5vw,72px)}
}
/* смена пола: все кадры и видео перетекают одной длительностью — 0.5с,
как движение капсулы переключателя в шапке */
.stylemix .trio img.who-swap{
transition:transform .5s cubic-bezier(.22,.68,.3,1), box-shadow .5s ease,
border-color .5s ease, filter .5s ease}
.who-swap.who-fade{opacity:0 !important}
@media (max-width:900px){
/* мерцание в конце сворачивания: Safari сбрасывал слой композитинга, когда
will-change снимался вместе с классом раскрытия. Держим слой постоянно. */
.ins .thumb--portrait, .stylelook, .stylepick, .alive-card, .stylemix .trio img{
will-change:transform; backface-visibility:hidden;
-webkit-backface-visibility:hidden; transform-style:flat}
.ins .thumb--portrait img, .stylelook-img, .alive-vid{
backface-visibility:hidden; -webkit-backface-visibility:hidden}
}
/* шапка выше слоя перетекания на ЛЮБОЙ ширине: в базовых стилях у неё был
z-index 20, поэтому на десктопе кадр перекрывал меню */
header.bar{z-index:60}
@media (max-width:900px){
/* рамку не меняем: постер просто заполняет её целиком (лёгкое увеличение
~3%), поэтому пустой полосы снизу не остаётся */
.alive-card video{object-fit:cover; object-position:50% 50%}
}
.thumb--portrait, .stylelook, .alive-card, .stylemix .trio img{background:transparent}
.thumb--portrait img, .stylelook-img, .alive-vid, .stylemix .trio img{background-color:transparent}
/* ---------- блок «Из чего собрать»: компактная развилка из трёх режимов,
формулировки — слово в слово из приложения ---------- */
.src-sec{padding:clamp(48px,7vw,84px) 0}
.src-sec .sec-head--center{text-align:center; margin-left:auto; margin-right:auto;
margin-bottom:30px}
.src-sec .sec-head--center p{margin-left:auto; margin-right:auto}
.modes--row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px; max-width:860px; margin:0 auto}
.src-note{max-width:52ch; margin:22px auto 0; text-align:center;
font-size:.9rem; line-height:1.6; color:var(--soft)}
@media (max-width:700px){
.modes--row{grid-template-columns:1fr; max-width:420px}
}
/* скрин гардероба свой для каждой темы */
.shot--light{display:none}
[data-theme="light"] .shot--dark{display:none}
[data-theme="light"] .shot--light{display:block}
/* ---------- корпус телефона: iPhone 16 Pro ----------
Dynamic Island вместо старой шторки (плавающая капсула, не приклеена к
верхнему краю), рамка тоньше. Затемнение низа экрана убрано. */
.frame{padding:5px; border-radius:40px}
.frame::before{top:2.1%; width:27%; height:3.4%; min-height:14px;
background:#08060C; border-radius:999px}
.scr{border-radius:35px}
.scr:has(.shot)::after{display:none}
/* на реальном скрине статус-бар и остров уже нарисованы — свой не дублируем */
.frame:has(.shot)::before{display:none}
.scr:has(.shot){align-items:stretch; justify-content:stretch}
.scr .shot{position:static; inset:auto; object-fit:cover; object-position:50% 0}
/* карточки выбора источника: кликабельные, с ясным активным состоянием */
.src-sec .mode{appearance:none; font-family:inherit; text-align:left; cursor:pointer;
display:flex; flex-direction:column; gap:6px;
transition:border-color .3s ease, background-color .3s ease, transform .3s ease}
.src-sec .mode:hover{transform:translateY(-2px)}
.src-note{transition:opacity .2s ease; min-height:3.2em}
/* пояснение под карточками теперь несёт смысл (меняется по клику) — значит
это основной текст, а не подпись: в светлой теме контрастнее */
[data-theme="light"] .src-note{color:var(--muted)}
/* лента гардероба — короткое видео вместо статичного скрина.
Правила скрытия по теме держим на той же специфичности, иначе размер
перебивает их и в кадре оказываются оба ролика сразу. */
.scr video.shot{width:100%; height:100%; object-fit:cover}
.scr video.shot--light{display:none}
.scr video.shot--dark{display:block}
[data-theme="light"] .scr video.shot--dark{display:none}
[data-theme="light"] .scr video.shot--light{display:block}
@media (hover:hover) and (min-width:901px){
/* корпус телефона с лентой гардероба реагирует так же, как карточки:
лёгкое увеличение целиком, вместе с видео внутри */
.split--wide .frame{transition:transform .45s cubic-bezier(.22,.68,.3,1),
box-shadow .45s ease}
.split--wide .frame:hover{transform:scale(1.022);
box-shadow:0 32px 64px -28px rgba(20,12,32,.6),
inset 0 0 0 1px rgba(255,255,255,.06)}
}
@media (max-width:900px){
/* телефон с лентой гардероба стоит по центру и раскрывается тапом */
.split--wide:not(.tint) .chain{justify-content:center}
.split--wide .frame{margin-inline:auto; cursor:zoom-in;
will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.split--wide .frame.is-zoom{position:relative; z-index:401; cursor:zoom-out}
}
/* пояснение внутри карточки: на десктопе его роль играет общая строка снизу,
на мобильных — раскрывается прямо в активной карточке */
.mode-note{display:none}
@media (max-width:700px){
.src-sec .src-note{display:none}
.src-sec .mode{transition:border-color .3s ease, background-color .3s ease}
.mode-note{display:block; overflow:hidden; max-height:0; opacity:0; margin-top:0;
font-size:.85rem; line-height:1.55; color:var(--soft);
transition:max-height .35s cubic-bezier(.3,.75,.25,1), opacity .3s ease,
margin-top .35s ease}
/* тонкая линия отделяет короткую подпись интерфейса от нашего пояснения */
.mode-note{border-top:1px solid transparent; padding-top:0}
.mode--on .mode-note{max-height:8em; opacity:1; margin-top:10px;
padding-top:10px; border-top-color:var(--border)}
}
@media (max-width:700px){
/* Типографика карточек режима — только на мобильных: там пояснение живёт
внутри карточки, и три уровня нужно развести по набору. */
.src-sec .mode > b{font-size:1.02rem; font-weight:600; letter-spacing:-.005em;
transition:color .3s ease}
.src-sec .mode > span:not(.mode-note){font-size:.68rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--soft); opacity:.75;
transition:color .3s ease, opacity .3s ease}
.src-sec .mode--on > b{color:var(--gold-line)}
.src-sec .mode--on > span:not(.mode-note){opacity:1}
[data-theme="light"] .src-sec .mode--on > b{color:#8A6412}
.src-sec .mode-note{font-size:.9rem; line-height:1.6; color:var(--muted)}
/* на мобильных карточки не «ездят» при касании — это десктопный приём */
.src-sec .mode{transform:none !important}
.src-sec .mode:hover{transform:none !important}
/* раскрыт один режим, переключает только пользователь — автосмены нет */
.src-sec .mode{cursor:pointer}
}
/* лента гардероба: служебных кнопок в кадре нет, поэтому притушение низа
здесь лишнее, а сам корпус центрируем в колонке на любой ширине */
.split--wide .frame .scr::after{display:none}
.split--wide:not(.tint) .chain{justify-content:center; width:100%}
.split--wide .frame{margin-inline:auto}
@media (max-width:600px){
/* лента гардероба — единственный кадр в ряду, поэтому горизонтальная
свайп-лента ему не нужна: корпус центрируется, ничего не притушено */
.split--wide:not(.tint) .chain{flex-wrap:nowrap; overflow-x:visible;
justify-content:center; margin-inline:0;
padding-inline:clamp(16px,4vw,40px)}
.split--wide:not(.tint) .chain .frame--lg{width:min(244px,66vw); margin-inline:auto}
.split--wide .frame .scr::after{display:none}
}
/* женский светлый портрет — отдельным слоём поверх базового: смена темы
мгновенная, без подмены src (обе картинки уже в DOM и раскодированы) */
.thumb--portrait{position:relative}
.portrait-light, .portrait-light-he{position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:0; pointer-events:none; transition:none !important}
[data-theme="light"]:not(.for-he) .thumb--portrait .portrait-light{opacity:1}
[data-theme="light"].for-he .thumb--portrait .portrait-light-he{opacity:1}
/* ---------- подсветка пары — в фирменных цветах, а не золотом ----------
Женская фигура подсвечивается орхидеей (цвет кнопки Google Play),
мужская — индиго (цвет кнопки App Store в мужском виде). Так подсветка
сама называет, кто выбран, и остаётся внутри палитры бренда. */
.cine-pool--she{--pool:215,123,192; --poolA:.30}
.cine-pool--he{--pool:124,138,210; --poolA:.32}
[data-theme="light"] .cine-pool--she{--pool:180,78,152; --poolA:.40}
[data-theme="light"] .cine-pool--he{--pool:78,92,168; --poolA:.40}
.cine-pool, :root.for-he .cine-pool, [data-theme="light"] .cine-pool{
background:radial-gradient(46% 40% at 50% 52%,
rgba(var(--pool), var(--poolA)),
rgba(var(--pool), calc(var(--poolA) * .45)) 38%,
rgba(var(--pool), calc(var(--poolA) * .15)) 62%,
rgba(var(--pool), 0) 82%)}
/* Подвижная плашка переключателя получает лёгкий подтон текущего вида:
связь с фигурой появляется, а золотая рамка и роль элемента сохраняются. */
.who-toggle::before{
background:rgba(227,184,92,.16), rgba(215,123,192,0);
background:linear-gradient(rgba(215,123,192,.16), rgba(215,123,192,.16)),
rgba(227,184,92,.1);
transition:transform .4s cubic-bezier(.4,0,.2,1), background .5s ease}
:root.for-he .who-toggle::before{
background:linear-gradient(rgba(124,138,210,.18), rgba(124,138,210,.18)),
rgba(227,184,92,.1)}
[data-theme="light"] .who-toggle::before{
background:linear-gradient(rgba(180,78,152,.12), rgba(180,78,152,.12)),
rgba(180,133,38,.1)}
:root.for-he[data-theme="light"] .who-toggle::before{
background:linear-gradient(rgba(78,92,168,.14), rgba(78,92,168,.14)),
rgba(180,133,38,.1)}
@media (max-width:900px){
/* нить лежит ПОД кромкой шапки, а не поверх неё — иначе на телефоне её
закрывает фон шапки */
.readbar{margin-top:-1px; height:2px; opacity:.55}
[data-theme="light"] .readbar{opacity:.5}
}
/* нить прижата к нижней кромке шапки */
.readbar{margin-top:0}
@media (max-width:900px){ .readbar{margin-top:0} }
@media (max-width:900px){
/* уезжающий кадр идёт ПОД шапкой (у неё z-index 60), но выше соседей */
.split-vis:has(.ins.was-zoom){position:relative; z-index:50}
.chain:has(.ins) .ins.was-zoom{z-index:8}
}
/* на телефоне подпись стиля лежит ПОД карточкой */
.trio-tag--under{transform:translate(-50%, 0)}
@media (max-width:900px){
/* порядок в блоке образа: строка «…и дальше образы собираются в нём» —
сверху, название стиля — под кадром */
.stylepick{display:flex; flex-direction:column}
.stylepick .stylelook-cap{order:-1; margin:0 auto 10px}
.stylepick .stylelook{order:0}
.stylepick .look-badge{order:1; padding:8px 0 0}
.stylepick.is-zoom .look-badge{transform-origin:50% 0}
}
@media (max-width:900px){
.split-vis--style .stylelook-cap{max-width:34ch}
.stylepick .look-badge{white-space:nowrap}
}
@media (max-width:900px){
.stylemix.has-grid .stylemix-cap{max-width:44ch; margin-inline:auto}
/* название стиля под кадром — тем же шрифтом и цветом, что подписи стилей
у пачки: смысл один, значит и вид один */
.stylepick .look-badge{color:var(--text); font-size:.78rem; letter-spacing:.04em;
text-shadow:0 1px 8px rgba(0,0,0,.5)}
[data-theme="light"] .stylepick .look-badge{color:var(--text);
text-shadow:0 1px 8px rgba(255,255,255,.6)}
}
/* кнопка «наверх»: в светлой теме — тёмное золото на светлом стекле */
[data-theme="light"] .to-top{
background:linear-gradient(120deg, #FFFFFF, #F3EFF8);
color:#8A6412; border:1px solid rgba(180,133,38,.45)}
[data-theme="light"] .to-top svg{stroke:#8A6412}
/* карточка с ценой оживает при наведении — как остальные блоки */
@media (hover:hover) and (min-width:901px){
.price{transition:opacity .55s ease, transform .45s cubic-bezier(.22,.68,.3,1),
box-shadow .45s ease}
.js .price.reveal.in:hover{transform:scale(1.016)}
.price:hover{box-shadow:0 26px 60px -30px rgba(20,12,32,.55)}
[data-theme="light"] .price:hover{box-shadow:0 26px 60px -30px rgba(58,45,74,.3)}
}
/* подсказка для встроенного браузера соцсетей: тонкая полоса снизу,
закрывается крестиком и сама через 9 секунд */
.inapp-tip{position:fixed; left:12px; right:12px; bottom:12px; z-index:430;
display:flex; align-items:center; gap:10px; padding:11px 12px 11px 16px;
border-radius:14px; font-size:.86rem; line-height:1.35;
color:#F6F1EA; background:rgba(24,17,34,.92);
border:1px solid var(--gold-line); box-shadow:0 18px 44px -22px rgba(0,0,0,.6);
opacity:0; transform:translateY(12px);
transition:opacity .35s ease, transform .35s cubic-bezier(.22,.68,.3,1)}
.inapp-tip.is-on{opacity:1; transform:none}
.inapp-tip span{flex:1 1 auto}
.inapp-tip button{flex:0 0 auto; width:28px; height:28px; padding:0;
border:0; border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
color:var(--gold2); background:rgba(227,184,92,.14)}
[data-theme="light"] .inapp-tip{color:#2E2438; background:rgba(255,255,255,.96);
border-color:rgba(180,133,38,.5)}
[data-theme="light"] .inapp-tip button{color:#8A6412; background:rgba(180,133,38,.12)}
/* мерцание искр логотипа в мужском виде — индиго вместо розового */
:root.for-he .wm-tw{
background:radial-gradient(circle, rgba(214,222,255,.5) 0%, rgba(124,138,210,.26) 40%, transparent 66%)}
:root.for-he[data-theme="light"] .wm-tw{
background:radial-gradient(circle, rgba(230,235,255,.95) 0%, rgba(78,92,168,.5) 40%, transparent 70%)}
/* ---------- Примерочная: телефон с видео + карточка итогового образа ---------- */
@media (max-width:900px){
}
/* примерочная: кадр результата стоит рядом с телефоном тем же размером,
что кадры образов в блоке поводов, — не во всю колонку */
/* специфичность выше грид-правил .chain:has(.ins), иначе ширину диктует колонка */
@media (max-width:900px){
}
/* примерочная: телефон и кадр результата стоят в одной строке */
@media (min-width:901px){
}
@media (max-width:900px){
}
/* Примерочная: правый кадр «дышит» в такт общему метроному — пока в телефоне
идёт подбор, он приглушён, в момент сборки вспыхивает в фокус. Так виден
результат процесса, а не постоянная картинка рядом. */
@media (prefers-reduced-motion:reduce){
}
/* подпись под телефоном: левая половина пары «процесс → результат» */
.split-vis .chain .ins--try{display:flex; flex-direction:column; align-items:center;
gap:14px; flex:0 0 auto; width:auto}
.ins--try .ins-cap{text-align:center}
/* после нажатия «Собрать образ» телефон уходит в тень — внимание уводится
на готовый образ справа */
.ins--try .frame, .ins--try .ins-cap{transition:filter .9s ease, opacity .9s ease}
.ins--try.is-done .ins-cap{opacity:.35}
/* пока образ собирается — подпись размыта, а поверх кадра крутится кольцо */
@media (prefers-reduced-motion:reduce){
}
/* состояние ожидания: подпись в языке блока вместо абстрактного индикатора */
/* оживающие точки: одинаковый ритм у обеих подписей блока */
@keyframes cap-dots{0%,60%,100%{opacity:.22} 30%{opacity:1}}
@media (prefers-reduced-motion:reduce){
.ins-cap .dot{animation:none; opacity:.6}
}
@media (min-width:901px){
/* кадр результата встаёт вровень с экраном телефона — размер задаёт скрипт */
}
/* Примерочная: готовый образ проявляется ПРЯМО в экране телефона, всё
остальное — интерфейс, корпус, подписи — уходит в размытие. */
.ins--try{display:flex; flex-direction:column; align-items:center; gap:14px}
.ins--try .scr{position:relative}
.ins--try .frame{transition:transform .45s cubic-bezier(.22,.68,.3,1),
box-shadow .8s ease}
.ins--try.is-done .frame{box-shadow:0 34px 80px -34px rgba(20,12,32,.7),
0 0 44px rgba(227,184,92,.14)}
[data-theme="light"] .ins--try.is-done .frame{
box-shadow:0 34px 80px -34px rgba(58,45,74,.36), 0 0 40px rgba(180,133,38,.18)}
/* подписи сменяют друг друга на одном месте */
.ins--try{position:relative}
.ins--try .ins-cap{transition:opacity .5s ease}
.ins--try .ins-cap--done{position:absolute; left:0; right:0; bottom:0;
text-align:center; opacity:0}
.ins--try.is-done .ins-cap:not(.ins-cap--done){opacity:0}
.ins--try.is-done .ins-cap--done{opacity:1}
:root.for-he[data-theme="light"] .wm-tw{
background:radial-gradient(circle, rgba(120,134,196,.34) 0%, rgba(78,92,168,.18) 40%, transparent 64%)}
@media (max-width:900px){
/* примерочная: телефон обёрнут в .ins--try, и подъёма одного корпуса мало —
над вуалью поднимаем всю обёртку, как поднимается сам frame у гардероба */
.ins--try:has(.frame.is-zoom){position:relative; z-index:401}
/* правила блока «портрет → образ» сюда не относятся: .ins--try не участвует
в его сетке и гашении соседей */
.chain:has(.ins--try){display:flex; grid-template-columns:none; justify-content:center}
}
@media (max-width:900px){
/* в момент сворачивания кадр уходит ПОД шапку (у неё z-index 60) — то же
правило, что в блоках поводов и стилей */
.alive-card.is-zoom.closing, .split--wide .frame.is-zoom.closing{z-index:40}
.ins--try:has(.frame.is-zoom.closing){z-index:40}
}
/* системная кнопка play на видео не показывается нигде (iOS рисует её на
поставленном на паузу ролике) */
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button{display:none !important;
-webkit-appearance:none; opacity:0}
@media (max-width:900px){
/* сосед всегда в нижнем слое, уезжающий кадр — выше него, но ниже шапки */
.alive-duo .alive-card{z-index:1}
.alive-duo .alive-card.is-zoom{z-index:401}
.alive-duo .alive-card.is-zoom.closing{z-index:40}
}
/* ========================================================================
Правки 17.08.2026
======================================================================== */
/* Верх двух кадров держим на одной линии. Базовое .chain центрирует блоки
по вертикали, а перекрыто это только на десктопе (min-width:901px) —
на мобильном подпись разной высоты сдвигала сами кадры. */
.split-vis .chain:has(.ins){align-items:start}
/* На мобильном две подписи делят строку пополам (≈166px каждая), и фраза
«по твоему портрету стилист / рисует тебя в образах» при .78rem в две
строки не влезает. При .74rem первая строка выходит ровно 166px —
впритык, и субпиксельное округление всё равно рвёт её на третью.
.72rem даёт ~5px запаса. */
@media (max-width:900px){
.split-vis .chain:has(.ins) .ins-cap{font-size:.72rem}
}
/* Кнопка «наверх»: в base.css отступ снизу clamp(14px,3vw,28px) — на телефоне
это 14px, кнопка почти упирается в нижнюю панель браузера и выглядит
подрезанной. Поднимаем и добавляем безопасную зону iOS. Правило общее для
index/offer/privacy — .to-top есть на всех трёх страницах. */
.to-top{bottom:calc(clamp(30px,5vw,42px) + env(safe-area-inset-bottom, 0px))}
/* iOS Safari некорректно перерисовывает background-attachment:fixed после
смены размера окна (панель браузера свернулась/развернулась, полноэкранный
режим): фон остаётся от прежнего размера, и тона перестают совпадать —
под шапкой появляется полоса другого оттенка.
Мужской вид эту проблему уже обходит слоем body::before с position:fixed.
Делаем женскому так же: сам body красим плоско, а градиент выносим в такой
же фиксированный слой. z-index -2 — под мужским слоем (-1), но над
собственным фоном body, поэтому порядок наложения сохраняется.
ВАЖНО про высоту слоя: inset:0 даёт ровно высоту вьюпорта, а область под
нижней панелью Safari в неё не попадает — там проступала плоская заливка
body другого тона, и это читалось как полупрозрачная плёнка внизу.
100lvh — «большой» вьюпорт, как если бы панели браузера были скрыты,
поэтому слой закрывает и её. 100vh оставлен запасным вариантом. */
body{background:var(--bg2); background-attachment:initial}
body::after{
content:""; position:fixed; left:0; right:0; top:0;
height:100vh;
height:100lvh;
z-index:-2; pointer-events:none;
background:
radial-gradient(120% 80% at 80% -10%, var(--orchid-soft), transparent 60%),
linear-gradient(165deg, var(--bg1), var(--bg2));
}
/* Вуаль зума гасилась только через opacity, оставаясь position:fixed во всей
области экрана. Элемент продолжал участвовать в отрисовке, и iOS оставлял
его композитный слой — после закрытия внизу страницы виднелся фон вуали
вместо фона сайта. Убираем её из отрисовки совсем (visibility:hidden).
Направления НАМЕРЕННО разные (решение заказчика, проверено на телефоне):
раскрытие — плавное затемнение с задержкой 0.14с, ложится на середину
полёта кадра (~0.6с); сворачивание — МГНОВЕННОЕ, безо всякого перехода:
фон возвращается в цвет сайта в сам момент касания, и нижняя панель
Safari (она красится под пиксели страницы) тоже сразу. */
.zoom-veil{visibility:hidden; opacity:0; transition:none}
.zoom-veil.is-on{visibility:visible;
transition:opacity .3s ease .14s, visibility 0s}
/* Капсула «Первые 5 образов бесплатно» — на месте выпиленных кнопок сторов
(18.08.2026, вернутся по команде): тот же стиль, ховер и магнитная
анимация (класс btn-store), ведёт в приложение как «Войти». Одна строка
покрупнее — держит высоту героя, которую раньше давали две кнопки. */
.btn-store--cta{padding:15px 26px 15px 20px}
.btn-store--cta svg{width:20px; height:20px}
.btn-store--cta .bt b{font-size:1.02rem; letter-spacing:.015em; white-space:nowrap}
@media (max-width:400px){
.btn-store--cta{padding:14px 18px 14px 15px; gap:9px}
.btn-store--cta .bt b{font-size:.93rem}
}
/* ---------- намёк, что кадры живые (мобильные) ----------
Человек со стороны не догадывался, что по фото можно тапнуть, и половина
лендинга оставалась незамеченной (Алексей, 21.08). Значок «развернуть» в
углу мозолил глаза, разовый жест по въезду в экран проходил мимо (палец
ещё внизу, человек листает) и дёргался слишком резко.
Итог: кадры дышат ВСЕГДА — ровный масштаб в такт метроному сайта (3.6 с),
один ритм на все блоки. Амплитуда отмерена по зазору между соседними
кадрами: 12 px при ширине ~166. Предел, где кадры почти сходятся, — ~6%;
берём 2.8%. Медленнее и мельче было незаметно, кадр читался как
неподвижный (Алексей, 21.08). */
@media (max-width:900px){
@keyframes framePulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.028)}
}
/* Особый случай — ТОЛЬКО кадры поводов: там зум трансформирует сам
.thumb--portrait, и дыхание на нём дралось с раскрытием за одно
свойство transform (кадр не увеличивался или прыгал). Поэтому здесь
дышит картинка ВНУТРИ рамки. Остальные блоки раскрывались нормально
и остались как были — дышат сами (Алексей, 21.08). */
.ins .thumb--portrait img,
.stylemix .trio,
.stylepick .stylelook,
.split--wide .frame,
.alive-card{animation:framePulse 3.6s ease-in-out infinite}
/* Пара кадров дышит В ПРОТИВОФАЗЕ: один растёт — второй возвращается.
Перекличка живее синхронного вдоха, и зазор между ними держится
ровным вместо того, чтобы схлопываться разом (Алексей, 21.08). */
.chain .ins:nth-child(even) .thumb--portrait img,
.alive-duo .alive-card:nth-child(even){animation-delay:-1.8s}
/* Кадр раскрывают — дыхание уходит: анимация перебивает инлайновый
transform зума, и раскрытый кадр начал бы пульсировать вместе с ним.
Соседей внутри раскрытого блока тоже гасим, чтобы не мельтешили. */
/* Раскрытый кадр не тащит за собой тень: она масштабируется вместе с
корпусом телефона и превращается в тёмное пятно под ним, которого в
полноэкранном виде быть не должно (Алексей, 21.08). Внутреннюю кромку
оставляем — она рисует край корпуса. */
.split--wide .frame.is-zoom, .split--wide .frame.is-zoom.closing,
.ins--try.is-done .frame.is-zoom{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.alive-card.is-zoom, .alive-card.is-zoom.closing{box-shadow:none}
/* Раскрытый кадр показывают крупно — дышать там незачем. */
.ins.is-zoom .thumb--portrait img, .ins.closing .thumb--portrait img,
.stylepick.is-zoom .stylelook, .stylepick.closing .stylelook,
.has-grid .trio,
.frame.is-zoom, .frame.closing,
.alive-card.is-zoom, .alive-card.closing,
.has-zoom .trio, .has-zoom .stylelook,
.has-zoom .thumb--portrait img,
.has-zoom .frame, .has-zoom .alive-card{animation:none}
}
@media (prefers-reduced-motion:reduce){
.ins .thumb--portrait img, .stylemix .trio, .stylepick .stylelook,
.split--wide .frame, .alive-card{animation:none}
}
/* ---------- первый экран: пара живая и на телефоне ----------
На широком экране пара отзывается на курсор — свет переходит на ту
фигуру, к которой тянешься. На телефоне курсора нет, и кадр стоял
мёртвым: ничего не движется, и ничто не говорит, что фигуры можно
переключать (Алексей, 21.08).
Импульс — ТОЛЬКО свет и ТОЛЬКО на самой фигуре: одно свойство, один
элемент, одна анимация. Пробовали добавлять к нему шаг вперёд
(transform) и пятно под ногами (opacity на соседнем слое) — и то и
другое браузер считает на видеокарте, а filter на процессоре, в разных
тактах. Свет из-за этого загорался и гас не в такт с ростом фигуры, и
починить это, оставив оба свойства, нельзя (Алексей, 21.08).
Играет только до первого выбора (класс .cine-invite ставит скрипт, пока
в localStorage нет esleya-who): смысл импульса — сказать, что фигуры
переключаются. Выбрал один раз — пара стоит спокойно. Первая вспышка
через секунду после загрузки (отрицательная задержка): ждать шесть
секунд на первом экране никто не станет. */
@media (max-width:900px){
/* Две тени: ближняя плотная держит контур, дальняя широкая даёт зарево. */
@keyframes cineGlow{
0%,58%,100%{filter:drop-shadow(0 0 16px rgba(var(--sel), 0))
drop-shadow(0 0 46px rgba(var(--sel), 0))}
74%,84%{filter:drop-shadow(0 0 16px rgba(var(--sel), .6))
drop-shadow(0 0 46px rgba(var(--sel), .45))}
}
/* Свой transition на filter (для наведения на десктопе) спорит с
покадровой анимацией — на телефоне выключаем. */
.cine-media.cine-invite.is-she .cine-fig--he,
.cine-media.cine-invite.is-he .cine-fig--she{
transition:none; will-change:filter;
animation:cineGlow 5.4s ease-in-out -3.2s infinite}
}
@media (prefers-reduced-motion:reduce){
.cine-fig{animation:none !important}
}
/* ---------- раскрытый кадр: панели Safari одного цвета ----------
Safari красит свои панели по пикселям страницы у соответствующего края
(meta theme-color мы не задаём принципиально — фиксированный цвет даёт
«плёнку» внизу). Низ при раскрытии попадает на вуаль и темнеет сам, а
вверху лежит шапка со своим фоном — статус-бар оставался светлым и не
совпадал с низом (Алексей, 21.08). На время раскрытия шапка принимает
цвет вуали: обе панели становятся одинаковыми, а раскрытый кадр всё
равно идёт выше неё. */
@media (max-width:900px){
/* !important — у шапки несколько фонов по темам и состоянию bar--over;
здесь нужен ровно один цвет, тот же, что у вуали. */
/* Фон пишем раздельно: шорткат background с !important до шапки не
доезжает — у неё свой градиент под bar--over. */
body:has(.zoom-veil.is-on) header.bar{
background-image:none !important;
background-color:rgba(var(--veil-rgb),.94) !important;
border-bottom-color:transparent;
backdrop-filter:none; -webkit-backdrop-filter:none;
transition:background .3s ease .14s, border-color .3s ease .14s}
[data-theme="light"] body:has(.zoom-veil.is-on) header.bar{
background-color:rgba(var(--veil-rgb),.97) !important}
/* Области ЗА вьюпортом — под вырезом и за нижней панелью Safari — берут
фон корня, а он наследует фон страницы. Он светлее (или теплее) вуали,
и сверху с низом оставалась полоса чужого тона: красим корень тем же
тоном на время раскрытия. */
:root:has(.zoom-veil.is-on){background-color:rgb(var(--veil-rgb))}
/* Сворачивание мгновенное, как у самой вуали (решение Алексея). */
body:has(.zoom-veil:not(.is-on)) header.bar{transition:none}
/* Содержимое шапки на время раскрытия уходит: оно не относится к
раскрытому кадру и мешало бы читать его верх. */
body:has(.zoom-veil.is-on) header.bar > *{opacity:0;
transition:opacity .25s ease .14s}
}
/* ---------- кнопка поддержки: живой человек в одном тапе ----------
Если приложение вообще не открывается или что-то не работает, написать
некуда — на сайте не было ни одного адреса живой поддержки (Алексей,
22.08). Кнопка ведёт в тот же бот, что принимает обращения из
приложения. Видна всегда, а не по прокрутке: беда случается на первом
же экране. Цвет берёт из токенов темы — своей палитры не заводит, чтобы
не спорить с кнопкой «наверх» под ней. */
.support-fab{position:fixed; right:clamp(14px,3vw,28px); z-index:30;
/* Отступ считаем от ТОГО ЖЕ значения, что у кнопки «наверх» (site.css
переопределяет базовый): иначе при прокрутке кнопки наезжали друг на
друга (Алексей, 22.08). 46 — высота кнопки, 14 — воздух между ними. */
bottom:calc(clamp(30px,5vw,42px) + 60px + env(safe-area-inset-bottom, 0px));
width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
background:var(--surface); border:1px solid var(--border-strong);
box-shadow:var(--shadow-soft); backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
transition:transform .3s ease, border-color .3s ease, background .3s ease;
-webkit-tap-highlight-color:transparent}
:root[data-theme="dark"] .support-fab{background:rgba(255,255,255,.07)}
[data-theme="light"] .support-fab{background:rgba(255,255,255,.72)}
.support-fab:hover{transform:translateY(-2px); border-color:var(--gold-line)}
.support-fab:focus-visible{outline:3px solid var(--gold2); outline-offset:3px}
.support-fab svg{width:19px; height:19px; fill:none; stroke:var(--soft);
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
transition:stroke .3s ease; margin-right:1px}
.support-fab:hover svg{stroke:var(--gold-line)}
/* Своя подсказка вместо системной: браузерная всплывала где придётся и
через раз (Алексей, 22.08). Появляется слева от кнопки, не ловит мышь. */
.support-fab::after{content:"Написать в поддержку"; position:absolute;
right:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(6px);
white-space:nowrap; font-size:.78rem; letter-spacing:.01em;
color:var(--ink); background:var(--surface);
border:1px solid var(--border-strong); border-radius:999px;
padding:7px 13px; box-shadow:var(--shadow-soft);
opacity:0; pointer-events:none;
transition:opacity .22s ease, transform .22s ease}
:root[data-theme="dark"] .support-fab::after{background:rgba(28,22,38,.92)}
[data-theme="light"] .support-fab::after{background:rgba(255,255,255,.94)}
.support-fab:hover::after{opacity:1; transform:translateY(-50%) translateX(0)}
/* На телефоне подсказку не показываем: наведения нет, а по тапу человек и
так уходит в бот. */
@media (max-width:900px){ .support-fab::after{display:none} }
/* ---------- подвал: «Статьи» выпадашкой ----------
Пять статей столбиком раздували подвал, а отдельной колонкой ломали его
сетку — «Документы» слипались с «Продуктом» (Алексей, 23.08). Теперь это
ОДИН пункт внутри «Продукта», а список всплывает поверх подвала и ничего
не двигает. Ссылки остаются в разметке: поиску всё видно, скрывает их
только оформление. */
.f-pop{position:relative}
.f-pop summary{
list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; gap:6px;
color:var(--muted); font-size:.92rem; transition:color .2s ease}
.f-pop summary::-webkit-details-marker{display:none}
.f-pop summary:hover{color:var(--text)}
.f-pop summary svg{width:13px; height:13px; fill:none; stroke:currentColor;
stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
transition:transform .22s ease}
.f-pop details[open] summary svg{transform:rotate(180deg)}
/* Список всплывает ВВЕРХ: подвал стоит у нижнего края, вниз ему некуда. */
.f-pop details[open] > ul{
position:absolute; left:-14px; bottom:calc(100% + 10px); z-index:40;
min-width:232px; padding:12px 14px; gap:10px;
background:var(--surface-2); border:1px solid var(--border-strong);
border-radius:14px; box-shadow:0 22px 44px -24px rgba(10,6,20,.65);
animation:f-pop-in .16s ease-out}
[data-theme="light"] .f-pop details[open] > ul{
box-shadow:0 20px 40px -24px rgba(58,45,74,.35)}
@keyframes f-pop-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
/* Статей восемнадцать, и целиком они не помещаются ни на телефоне, ни на
невысоком мониторе. Раскрывать их в поток нельзя — подвал разъезжается
(Алексей, 23.08), поэтому список остаётся всплывашкой и прокручивается
ВНУТРИ себя. Чтобы прокрутка читалась, нижний край растворяется: видно,
что под ним есть ещё пункты. */
.f-pop details[open] > ul{max-height:min(52vh, 360px); overflow-y:auto;
-webkit-overflow-scrolling:touch; overscroll-behavior:contain;
scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent)}
.f-pop details[open] > ul::-webkit-scrollbar{width:4px}
.f-pop details[open] > ul::-webkit-scrollbar-thumb{
background:var(--border-strong); border-radius:4px}
/* Хвост маски съедал бы последний пункт — добавляем ему место под собой. */
.f-pop details[open] > ul{padding-bottom:30px}
@media (max-width:520px){
/* На узком экране всплывашка прижата к левому краю колонки, а ширину
диктует самый длинный заголовок: «Что надеть на свидание» в две строки
читалось как два пункта. */
.f-pop details[open] > ul{left:0; right:auto; min-width:0;
width:max-content; max-width:min(86vw, 320px)}
.f-pop details[open] > ul a{white-space:nowrap}
}
/* ---------- подвал: магазины ----------
Место для App Store, Google Play и RuStore — ПОД подписью бренда слева,
где сейчас пусто, а не строками в колонках: это кнопки, а не пункты
меню, и в текстовом списке они выглядели бы как ещё три ссылки среди
документов. Так подвал не вырастет по высоте, когда они появятся
(Алексей, 23.08). Разметка: