/* ============================================================================= «Зажигаем свет» · РЕДИЗАЙН «Тёплый свет» (направление 3a) ----------------------------------------------------------------------------- Слой поверх styles.css. Всё заскоплено на body.zx — снять класс zx с значит вернуть прежний вид (разметка лендинга при этом останется новой, полный откат — через static-backup-v3-preredesign / rollback-redesign.ps1). ЭКРАН СХЕМЫ ГРАВИРОВКИ (#screen-guide) НЕ ЗАТРАГИВАЕТСЯ НАМЕРЕННО: ни одного правила с #screen-guide здесь нет, а фон страницы и звёздное небо возвращаются к прежним, когда на висит класс is-guide. ========================================================================== */ body.zx{ /* поверхности */ --z-bg:#070a16; --z-surface:#0b1020; --z-panel:rgba(255,255,255,.03); --z-panel-2:rgba(255,255,255,.014); --z-line:rgba(255,255,255,.07); --z-line-2:rgba(255,255,255,.10); --z-line-3:rgba(255,255,255,.16); /* текст */ --z-title:#f2f0ea; --z-text:#eaeefb; --z-text-2:#c3cadd; --z-strong:#dfe4f1; --z-quote:#eee9dd; --z-muted:#9aa5c2; --z-muted-2:#8b96b6; --z-hint:#7b86a3; --z-faint:#6f7a99; /* акценты */ --z-gold:#c9a76e; --z-gold-2:#e9c489; --z-gold-3:#f6e3bd; --z-gold-d:#d9a95f; --z-gold-h:#eec98a; --z-cool:#9ed2ff; --z-cream:linear-gradient(180deg,#faf3e4,#eadfc7); --z-on-cream:#14192c; /* шрифты */ --z-serif:"Lora",Georgia,"Times New Roman",serif; --z-sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --z-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; /* сетка */ --z-pad:64px; --z-max:1312px; font-family:var(--z-sans); color:var(--z-text); line-height:1.6; background: radial-gradient(58% 42% at 70% 6%,rgba(70,138,214,.20),transparent 72%), linear-gradient(178deg,#0e1529 0%,#090e1e 34%,#070a16 62%,#0a0f1e 100%); background-attachment:fixed; } /* --- экран схемы гравировки: возвращаем прежнюю среду --- */ body.zx.is-guide{ font-family:var(--font-body); color:var(--ink); background: radial-gradient(1000px 640px at 84% -12%,rgba(79,159,230,.22),transparent 60%), radial-gradient(820px 560px at 6% 2%,rgba(143,212,255,.10),transparent 55%), radial-gradient(700px 520px at 50% 116%,rgba(240,201,142,.06),transparent 60%), linear-gradient(180deg,#0a1228 0%,#060b1a 58%,#04081a 100%); background-attachment:fixed; } body.zx #starfield{display:none} body.zx.is-guide #starfield{display:block} @media(max-width:900px){ body.zx{--z-pad:22px} } /* ============================== ТИПОГРАФИКА ============================== */ body.zx .z-h1{ font-family:var(--z-serif);font-weight:400; font-size:clamp(40px,5.2vw,70px);line-height:1.1;letter-spacing:-.012em;color:var(--z-title); } body.zx .z-h1 em{font-style:italic;color:var(--z-gold-3)} body.zx .z-h2{ font-family:var(--z-serif);font-weight:400; font-size:clamp(32px,3.6vw,46px);line-height:1.16;letter-spacing:-.008em;color:var(--z-title); } body.zx .z-h2 em{font-style:italic;color:var(--z-gold-3)} body.zx .z-h2-xl{font-size:clamp(32px,4vw,52px)} body.zx .z-h3{font-family:var(--z-serif);font-weight:400;font-size:22px;line-height:1.25;color:var(--z-title)} body.zx .z-eyebrow{ font-family:var(--z-mono);font-size:11px;font-weight:400; letter-spacing:.22em;text-transform:uppercase;color:var(--z-gold); } body.zx .z-lead{font-size:17px;line-height:1.7;color:var(--z-muted);text-wrap:pretty} body.zx .z-note{font-size:15px;line-height:1.7;color:var(--z-muted);text-wrap:pretty} body.zx .z-sec-note{font-size:16px;line-height:1.7;color:var(--z-muted);text-wrap:pretty} /* ================================ КНОПКИ ================================= */ body.zx .z-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--z-sans);font-size:16px;font-weight:600;line-height:1.2; padding:17px 32px;border-radius:12px;border:0;cursor:pointer;text-decoration:none; transition:transform .16s ease,filter .16s ease,background .16s ease,box-shadow .16s ease; -webkit-tap-highlight-color:transparent; } body.zx .z-btn-primary{ background:var(--z-cream);color:var(--z-on-cream); box-shadow:0 14px 34px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.9); } body.zx .z-btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)} body.zx .z-btn-primary:active{transform:translateY(0)} body.zx .z-btn-primary:disabled{opacity:.6;cursor:wait;transform:none} body.zx .z-btn-ghost{ background:rgba(255,255,255,.05);color:var(--z-title);font-size:14px;font-weight:500;padding:11px 22px;border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.06); } body.zx .z-btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff} body.zx .z-btn-wide{width:100%} body.zx .z-btn-lg{padding:18px 34px} body.zx .z-link{ background:none;border:0;padding:0;cursor:pointer;text-decoration:none; font-family:var(--z-sans);font-size:14px;font-weight:400;color:var(--z-muted);transition:color .15s; } body.zx .z-link:hover{color:var(--z-gold-h)} body.zx .z-link-gold{color:var(--z-gold)} body.zx a{text-decoration:none;color:inherit} body.zx .z-btn .spinner{ width:18px;height:18px;border:3px solid rgba(20,25,44,.25);border-top-color:var(--z-on-cream); border-radius:50%;animation:spin .7s linear infinite; } /* ============================== ЛОГОТИП ================================== */ /* фирменный знак «Зажигаем свет» (logo.svg) — как в прежнем дизайне */ body.zx .z-brand{display:inline-flex;align-items:center;cursor:pointer;text-decoration:none} body.zx .z-logo{ height:48px;width:auto;display:block; filter:drop-shadow(0 0 14px rgba(255,199,32,.22)); } body.zx .z-menu-top .z-logo{height:44px} body.zx .z-foot-brand .z-logo{height:64px} /* Логотип в шапке одного размера на ВСЕХ страницах сайта. Расходились: лендинг 48px, панель приложения 38px, схема гравировки 30px, магазин 48px (последний — в shop-redesign.css, там же выставлен тот же размер). Схему гравировки правим отсюда, а не из styles.css: при откате редизайна она вернётся к прежним 30px вместе со всем остальным. */ body.zx .z-nav .z-logo, body.zx .z-top .z-logo, body.zx #screen-guide .appbar-logo{height:40px} /* ================================ ШАПКА ================================== */ body.zx .z-nav{position:sticky;top:0;z-index:60;transition:background .2s,box-shadow .2s} body.zx .z-nav.scrolled{background:rgba(9,14,30,.82);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 1px 0 var(--z-line)} body.zx .z-nav-in{ max-width:var(--z-max);margin:0 auto;display:flex;align-items:center;gap:30px; padding:26px var(--z-pad); } body.zx .z-nav-links{display:flex;gap:30px;font-size:14.5px;color:var(--z-muted);margin-left:10px} body.zx .z-nav-links a{cursor:pointer;transition:color .15s} body.zx .z-nav-links a:hover{color:var(--z-gold-h)} body.zx .z-nav-act{display:flex;align-items:center;gap:22px;margin-left:auto} body.zx .z-burger{ display:none;margin-left:12px;flex:none;padding:10px;border-radius:9px;border:0;cursor:pointer; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); } body.zx .z-burger span{display:block;width:16px;height:1px;background:var(--z-title)} body.zx .z-burger span+span{margin-top:5px} /* кнопка «Получить схему» — вход по коду из комплекта; двустрочная, как раньше в брендовой шапке. Всегда видна (в т.ч. на мобиле, см. адаптив) — владелец ночника не должен искать её в бургер-меню. Обе строки по центру: при выключке влево более короткая верхняя строка оставляла рваный проём справа, и кнопка выглядела набранной не по своей форме. Радиус 12px, а не 10px как у обычной ghost: эта кнопка выше (два ряда текста), и на такой высоте меньший радиус читается как срезанный угол. */ body.zx .z-btn-code{padding:10px 18px;flex:none;border-radius:12px} body.zx .z-btn-code-txt{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center} body.zx .z-btn-code-txt b{font-weight:600;font-size:14px;line-height:1.2} /* Подпись держим на opacity, а не на отдельном токене: тогда она затемняется и светлеет вместе с основной строкой на :hover. */ body.zx .z-btn-code-txt i{font-style:normal;font-weight:400;font-size:11px;line-height:1.2;opacity:.72} body.zx .z-menu{ position:fixed;inset:0;z-index:70;display:none;flex-direction:column; padding:22px;background:linear-gradient(178deg,#0e1529,#070a16 66%); } body.zx .z-menu.on{display:flex} body.zx .z-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px} body.zx .z-menu-close{ background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); border:0;border-radius:9px;color:var(--z-title);font-size:20px;line-height:1;padding:8px 12px;cursor:pointer; } body.zx .z-menu-links{display:flex;flex-direction:column;gap:4px} body.zx .z-menu-links a{ font-family:var(--z-serif);font-size:26px;color:var(--z-title);padding:12px 0;cursor:pointer; box-shadow:inset 0 -1px 0 rgba(255,255,255,.06); } body.zx .z-menu-act{margin-top:auto;display:flex;flex-direction:column;gap:14px} body.zx .z-menu-act .z-btn{width:100%} /* ================================= ГЕРОЙ ================================= */ body.zx .z-hero{position:relative} /* Три ячейки: текст и CTA в левой колонке, фото — справа на всю высоту. На телефоне тот же порядок DOM даёт нужную последовательность: текст → фото → кнопка. */ body.zx .z-hero-in{ max-width:var(--z-max);margin:0 auto;display:grid; grid-template-columns:1fr 700px;grid-template-rows:auto auto; align-items:center;column-gap:40px;row-gap:32px;padding:70px var(--z-pad) 96px; } body.zx .z-hero-copy{grid-column:1;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:26px} body.zx .z-hero-art{grid-column:2;grid-row:1 / span 2;align-self:center} /* Кнопки в ряд, подпись под ними: раньше подпись стояла СБОКУ от единственной кнопки, со второй кнопкой такой ряд не помещался бы в текстовую колонку. */ body.zx .z-hero-cta{grid-column:1;grid-row:2;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px} body.zx .z-hero-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap} body.zx .z-hero-copy .z-lead{max-width:452px} body.zx .z-hero-note{font-size:13px;line-height:1.55;color:var(--z-hint);max-width:420px} /* Сноска «Попробовать бесплатно*» -> подпись под кнопками. В кнопке звёздочка поднята и приглушена, чтобы не спорить с надписью; в подписи — золотая, чтобы глаз связал её с кнопкой. line-height:0 не даёт sup растянуть строку кнопки. */ body.zx .z-btn .ast{font-size:.85em;line-height:0;opacity:.8;top:-.3em} body.zx .z-hero-note .ast{color:var(--z-gold-2);margin-right:3px} /* вторичная кнопка героя крупнее обычной ghost — стоит рядом с основной */ body.zx .z-hero-btns .z-btn-ghost{font-size:16px;font-weight:600;padding:17px 30px;border-radius:12px} body.zx .z-hero-art{position:relative} body.zx .z-shot{ position:relative;z-index:1;border-radius:20px;overflow:hidden;background:var(--z-surface); box-shadow:0 40px 120px -50px rgba(0,0,0,.9); } /* съёмка квадратная, а слоты широкие: держим кадр на подставке, а не на стене */ body.zx .z-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 78%} body.zx .z-hero-art .z-shot{aspect-ratio:7/6} body.zx .z-hero-art .z-shot img{object-position:50% 55%} body.zx .z-halo{ position:absolute;left:50%;top:52%;width:118%;height:112%;transform:translate(-50%,-50%); background:radial-gradient(50% 50% at 50% 50%,rgba(112,190,255,.26),rgba(70,140,220,.09) 56%,transparent 78%); filter:blur(30px);pointer-events:none;z-index:0; } /* ========================== ПОЛОСА ПРЕИМУЩЕСТВ =========================== */ body.zx .z-strip{border-top:1px solid var(--z-line);border-bottom:1px solid var(--z-line)} /* Равные колонки на всю ширину контейнера: пункты не жмутся влево, а разделители встают ровно на трети — иначе правая половина полосы пустует и строка кажется кривой. */ body.zx .z-strip-in{ max-width:var(--z-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr); align-items:center;padding:22px var(--z-pad);font-size:13.5px;color:var(--z-hint); } /* Пункт занимает всю колонку (чтобы разделители стояли ровно на третях), а текст внутри колонки — по центру: строка читается симметрично. */ body.zx .z-strip-in span{padding:2px 24px;line-height:1.5;text-align:center} body.zx .z-strip-in span+span{box-shadow:inset 1px 0 0 rgba(255,255,255,.12)} body.zx .z-strip-in b, body.zx .z-strip-track b{color:var(--z-strong);font-weight:500} /* мобильная лента — скрыта по умолчанию, включается в адаптиве (ниже) */ body.zx .z-strip-mobile{display:none} body.zx .z-strip-marquee{ overflow:hidden;touch-action:pan-y;cursor:grab; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } body.zx .z-strip-marquee.dragging{cursor:grabbing} body.zx .z-strip-track{display:flex;align-items:center;gap:0;will-change:transform;white-space:nowrap} /* Пункт = «Заголовок · пояснение» одним блоком (как на ПК), а не врозь. padding и gap равны — золотая точка-разделитель между ПУНКТАМИ попадает точно на середину зазора, а не липнет к следующему тексту. */ /* Только прямые потомки — иначе правило цепляет и вложенный .z-strip-txt, его отступы складываются с отступами точки и пара разъезжается. gap = padding*2: слева от точки складываются padding предыдущего пункта и padding текущего (12+12), справа — только gap (24). Так точка-разделитель встаёт ровно по центру промежутка между пунктами. */ body.zx .z-strip-track > span{ flex:none;display:flex;align-items:center;gap:24px;padding:0 12px;white-space:nowrap; position:relative;line-height:1.5; } /* золотая точка перед каждым ПУНКТОМ вместо вертикальных разделителей — те плохо читаются в бегущей строке */ body.zx .z-strip-track > span::before{ content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--z-gold); } /* заголовок и пояснение — плотная пара: расстояние внутри пункта (~15px) втрое меньше промежутка между пунктами (~53px), поэтому пара читается как одно целое */ body.zx .z-strip-txt{display:inline-flex;align-items:center;gap:0} /* связка ВНУТРИ пары — короткая линия, нарисованная CSS (а не символ тире: глиф на таком кегле почти не виден и читается как пустой зазор). Линия визуально СОЕДИНЯЕТ заголовок с пояснением, тогда как круглая точка между пунктами их разделяет — разные роли, разные формы, не спорят друг с другом. */ body.zx .z-strip-sep{ flex:none;width:8px;height:1px;border-radius:1px; background:var(--z-gold-2);opacity:.75;font-size:0;line-height:0;margin:0 7px; } /* =============================== СЕКЦИИ ================================== */ body.zx .z-sec{padding:96px 0} body.zx .z-sec-in{max-width:var(--z-max);margin:0 auto;padding:0 var(--z-pad)} body.zx .z-sec-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:44px} body.zx .z-sec-head .z-sec-note{max-width:420px;padding-bottom:6px} /* заголовок без подписи (например, «Отзывы») — без пустой второй колонки */ body.zx .z-sec-head.solo{grid-template-columns:1fr} /* в галерее заголовок однострочный, а подпись рядом — в 2 строки: align-items:end (общий по умолчанию — рассчитан на заголовки такой же высоты, как подпись) тут роняет короткий заголовок к самому низу и оставляет пустоту сверху — смотрится криво. Центрируем эту пару вместо этого. */ body.zx #gallery .z-sec-head{align-items:center} body.zx .z-steps{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)} /* три шага */ body.zx .z-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} body.zx .z-step{display:flex;flex-direction:column;gap:16px} body.zx .z-step .z-shot{aspect-ratio:1/1;height:auto;border-radius:16px} body.zx .z-step .z-shot img{object-position:50% 50%} body.zx .z-step p{font-size:15px;line-height:1.7;color:var(--z-muted);text-wrap:pretty} /* галерея-аккордеон: один кадр раскрыт, остальные узкими полосами. Снимки вертикальные 2:3, узкая полоса держит в кадре сам ночник (--x). */ body.zx .z-acc{display:flex;gap:14px;height:min(620px,72vh)} body.zx .z-acc-item{ position:relative;flex:1;min-width:0;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer; background:var(--z-surface);box-shadow:inset 0 0 0 1px var(--z-line); transition:flex-grow .7s cubic-bezier(.16,1,.3,1),box-shadow .6s; } body.zx .z-acc-item.on{flex-grow:2.6;box-shadow:0 50px 120px -60px rgba(var(--c),.95),inset 0 0 0 1px var(--z-line-2)} body.zx .z-acc-item img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--x) 55%; filter:brightness(.62) saturate(.8);transition:filter .6s; } body.zx .z-acc-item.on img{filter:none} body.zx .z-acc-cap{ position:absolute;left:0;right:0;bottom:0;padding:64px 24px 22px;text-align:left; font-family:var(--z-serif);font-size:22px;line-height:1.25;color:var(--z-title); background:linear-gradient(180deg,transparent,rgba(5,7,15,.85)); opacity:0;transform:translateY(10px);transition:opacity .4s .15s,transform .5s .15s; } body.zx .z-acc-item.on .z-acc-cap{opacity:1;transform:none} body.zx .z-acc-item:focus-visible{outline:2px solid var(--z-gold-2);outline-offset:3px} body.zx .z-acc-b{--c:90,196,255;--x:33%} body.zx .z-acc-p{--c:190,110,255;--x:30%} body.zx .z-acc-g{--c:70,226,130;--x:39%} body.zx .z-acc-l{--c:214,236,120;--x:34%} body.zx .z-acc-k{--c:233,196,137;--x:30%} @media(prefers-reduced-motion:reduce){ body.zx .z-acc-item,body.zx .z-acc-item img,body.zx .z-acc-cap{transition:none} } /* блок покупки */ body.zx .z-buy{background:linear-gradient(180deg,rgba(233,196,137,.05),rgba(233,196,137,.01))} body.zx .z-buy-in{display:grid;grid-template-columns:1fr 560px;gap:64px;align-items:center} body.zx .z-buy-copy{display:flex;flex-direction:column;gap:22px} body.zx .z-buy-copy .z-lead{max-width:520px} body.zx .z-list{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0;margin:0} body.zx .z-list li{ position:relative;padding-left:17px;font-size:15px;line-height:1.6;color:var(--z-text-2); } body.zx .z-list li::before{ content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--z-gold); } body.zx .z-buy-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px} body.zx .z-price-box{display:inline-flex;align-items:baseline;gap:14px} body.zx .z-price{font-family:var(--z-serif);font-size:34px;color:var(--z-title);line-height:1} body.zx .z-price-old{ font-family:var(--z-serif);font-size:22px;line-height:1;color:var(--z-hint); text-decoration:line-through;text-decoration-thickness:1px; text-decoration-color:rgba(240,169,160,.75); } body.zx .z-buy-in .z-shot{aspect-ratio:6/5} body.zx .z-buy-in .z-shot img{object-position:50% 40%} /* второй товар секции «Купить» — запасная акриловая пластина. Карточка намеренно другой формы, чем блок ночника: горизонтальная, ниже, спокойнее. Так видно, что это дополнение к основному товару, а не второй равный ему оффер, и глаз не выбирает между двумя одинаковыми предложениями. */ body.zx .z-buy-extra{margin-top:44px} body.zx .z-spare{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px; padding:26px 30px;border-radius:20px; background:var(--z-panel);box-shadow:inset 0 0 0 1px var(--z-line); } body.zx .z-spare-art{ position:relative;width:132px;height:132px;flex:none;border-radius:16px;overflow:hidden; background:var(--z-surface);box-shadow:inset 0 0 0 1px var(--z-line-2); display:flex;align-items:center;justify-content:center; } /* мягкое голубое свечение позади контура — тот же оттенок, что у рамки предпросмотра на экране примерки (.pvframe), чтобы иконка читалась как часть той же визуальной системы, а не отдельный значок */ body.zx .z-spare-art::before{ content:"";position:absolute;inset:0; background:radial-gradient(64% 64% at 50% 44%,rgba(112,190,255,.12),transparent 76%); pointer-events:none; } /* лёгкий диагональный блик — намёк на акриловую поверхность пластины */ body.zx .z-spare-art::after{ content:"";position:absolute;inset:0; background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.06) 50%,transparent 58%); pointer-events:none; } /* Сама пластина: полупрозрачная заливка «акрила» и тонкая светлая грань. Не неоновый контур — карточка построена на золоте и приглушённом синем, яркая линия в ней читалась бы как чертёж детали, а не как предмет. */ body.zx .z-spare-icon{position:relative;width:82%;height:82%} body.zx .z-spare-icon-plate{ stroke:rgba(255,255,255,.4);stroke-width:.8;stroke-linejoin:round; } body.zx .z-spare-copy{display:flex;flex-direction:column;gap:10px;min-width:0} body.zx .z-spare-lead{font-size:15.5px;line-height:1.65;color:var(--z-text-2);max-width:62ch;text-wrap:pretty} body.zx .z-spare-note{font-size:13.5px;line-height:1.6;color:var(--z-hint);max-width:62ch} body.zx .z-spare-act{display:flex;flex-direction:column;align-items:stretch;gap:14px;text-align:center} body.zx .z-spare-act .z-price{font-size:28px} body.zx .z-spare-act .z-btn{justify-content:center;white-space:nowrap} /* отзывы — бесшовная лента (авто-прокрутка, пауза при наведении, свайп); логика в app.js */ body.zx .z-say-marquee{ overflow:hidden;touch-action:pan-y;cursor:grab; margin-inline:calc(var(--z-pad) * -1);padding-inline:var(--z-pad); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } body.zx .z-say-marquee.dragging{cursor:grabbing} /* flex-start: раскрытый отзыв растёт один, а не тянет за собой всю ленту */ body.zx .z-say-track{display:flex;align-items:flex-start;gap:24px;will-change:transform} body.zx .z-quote{ flex:0 0 380px;max-width:380px; margin:0;padding:32px;border-radius:16px;background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:flex;flex-direction:column;gap:22px; -webkit-user-select:none;user-select:none; } body.zx .z-quote blockquote{-webkit-user-drag:none} body.zx .z-quote blockquote{ margin:0;font-family:var(--z-serif);font-size:19px;line-height:1.55;color:var(--z-quote); /* длинные отзывы обрезаем до 8 строк; min-height выравнивает высоту свёрнутых карточек */ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden; min-height:calc(1.55em * 8); } body.zx .z-quote.open blockquote{display:block;-webkit-line-clamp:unset;overflow:visible} body.zx .z-more{ align-self:flex-start;margin:-10px 0 0;padding:0;border:0;background:none;cursor:pointer; font:inherit;font-size:13.5px;color:var(--z-gold-3);visibility:hidden; } body.zx .z-quote.long .z-more,body.zx .z-quote.open .z-more{visibility:visible} body.zx .z-more:hover{text-decoration:underline} body.zx .z-quote figcaption{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--z-muted-2);margin-top:auto} body.zx .z-ava{ width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center; background:rgba(233,196,137,.12);color:var(--z-gold-3);font-size:15px; box-shadow:inset 0 0 0 1px rgba(233,196,137,.22); } /* вопросы */ body.zx .z-faq-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} body.zx .z-faq-list{display:flex;flex-direction:column} body.zx .z-qa{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} body.zx .z-qa>summary{ display:flex;align-items:flex-start;gap:18px;list-style:none;cursor:pointer; padding:24px 0;font-size:17px;font-weight:500;color:var(--z-title); transition:color .15s; } body.zx .z-qa>summary::-webkit-details-marker{display:none} body.zx .z-qa>summary:hover{color:var(--z-gold-h)} /* знак «+» из двух линий: вторая гасится, когда пункт раскрыт */ body.zx .z-qa>summary::after{ content:"";flex:none;margin-left:auto;position:relative;top:.45em; width:13px;height:13px; background: linear-gradient(var(--z-gold-2),var(--z-gold-2)) center/13px 1px no-repeat, linear-gradient(var(--z-gold-2),var(--z-gold-2)) center/1px 13px no-repeat; transition:transform .25s ease,background-size .25s ease; } body.zx .z-qa[open]>summary::after{ background-size:13px 1px,1px 0; transform:rotate(180deg); } body.zx .z-qa>p{ font-size:15px;line-height:1.7;color:var(--z-muted);text-wrap:pretty; padding:0 44px 24px 0;margin-top:-6px; } /* Ответы-перечни (цвета подсветки, питание). Списком, а не строкой через запятую: это характеристики, их сравнивают глазами, а не читают подряд. Маркер — золотая точка, как акценты во всём остальном оформлении. */ body.zx .z-qa>ul{ font-size:15px;line-height:1.7;color:var(--z-muted);text-wrap:pretty; list-style:none;margin:-6px 0 0;padding:0 44px 14px 17px; } body.zx .z-qa>ul>li{position:relative} body.zx .z-qa>ul>li+li{margin-top:7px} body.zx .z-qa>ul>li::before{ content:"";position:absolute;left:-17px;top:.62em; width:5px;height:5px;border-radius:50%;background:var(--z-gold-2);opacity:.8; } /* абзац-подводка перед списком и абзац после него не должны рвать ответ надвое: отступ между ними меньше, чем от ответа до следующего вопроса */ body.zx .z-qa>p.z-qa-lead{padding-bottom:9px} body.zx .z-qa>ul+p{margin-top:0} body.zx .z-qa>ul:last-child{padding-bottom:24px} body.zx .z-qa[open]>p,body.zx .z-qa[open]>ul{animation:zfaq .28s ease both} @keyframes zfaq{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* финальный призыв */ body.zx .z-final{position:relative;overflow:hidden;padding:110px 0} body.zx .z-final-in{ /* max-width шире, чем в 3a-макете: заголовок здесь длиннее («Посмотрите, как будет выглядеть Ваш фото-ночник» вместо короткого вопроса) и должен уместиться в две строки по смысловому разрыву, не по случайному переносу */ position:relative;max-width:1000px;margin:0 auto;padding:0 var(--z-pad); display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center; } body.zx .z-final .z-halo{width:900px;height:400px;top:38%;background:radial-gradient(50% 50% at 50% 50%,rgba(112,190,255,.18),transparent 72%)} body.zx .z-final .z-btn{margin-top:10px} /* заголовок финального призыва: разный перенос строк на десктопе и мобиле (не просто перенос по ширине — конкретная разбивка по смыслу для каждого) */ body.zx .z-fh-line{display:block} body.zx .z-fh-m{display:none} /* футер */ body.zx .z-foot{border-top:1px solid var(--z-line);font-size:14px;color:var(--z-hint)} body.zx .z-foot-in{ max-width:var(--z-max);margin:0 auto;padding:44px var(--z-pad) 20px; display:grid;grid-template-columns:1fr 1.3fr;gap:56px; } body.zx .z-foot-brand p{margin-top:12px;max-width:300px;line-height:1.7} body.zx .z-foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} body.zx .z-foot-col{display:flex;flex-direction:column;gap:10px} body.zx .z-foot-col a{cursor:pointer;transition:color .15s} body.zx .z-foot-col a:hover{color:var(--z-gold-h)} body.zx .z-foot-bottom{ max-width:var(--z-max);margin:0 auto;padding:18px var(--z-pad) 52px; display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--z-faint); } /* ====================== ОБЩЕЕ ДЛЯ ЭКРАНОВ ПРИЛОЖЕНИЯ ===================== */ body.zx #screen-gate.on, body.zx #screen-home.on, body.zx #screen-crop.on, body.zx #screen-preview.on{ display:flex;flex-direction:column;align-items:stretch;min-height:100dvh;padding:0; } body.zx .z-top{ display:flex;align-items:center;gap:26px;padding:20px 32px; box-shadow:inset 0 -1px 0 var(--z-line); } body.zx .z-top-end{margin-left:auto;display:flex;align-items:center;gap:20px} /* шаговый индикатор «Кадр — Свет — Заказ/Схема» */ body.zx .z-flow{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0} body.zx .z-flow li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--z-hint)} body.zx .z-flow li i{ width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center; font-style:normal;font-size:12px;font-weight:600;color:var(--z-hint); box-shadow:inset 0 0 0 1px var(--z-line-3); } body.zx .z-flow li.on{color:var(--z-title)} body.zx .z-flow li.on i{background:var(--z-gold-2);color:var(--z-on-cream);box-shadow:none} body.zx .z-flow li::after{content:"";width:26px;height:1px;background:var(--z-line-3);margin-left:1px} body.zx .z-flow li:last-child::after{display:none} /* =============================== ВХОД ПО КОДУ ============================ */ body.zx #screen-gate.on{ justify-content:center;align-items:center; background: radial-gradient(50% 46% at 50% 30%,rgba(70,138,214,.20),transparent 74%), linear-gradient(178deg,#0e1529,#070a16 66%); } body.zx .z-gate{ width:min(560px,100%);padding:40px 22px 60px;display:flex;flex-direction:column;align-items:center; text-align:center;gap:18px; } body.zx .z-gate-mark{ height:74px;width:auto;display:block;margin-bottom:6px; filter:drop-shadow(0 0 34px rgba(246,227,189,.42)); } body.zx .z-gate .z-h2{font-size:clamp(30px,6vw,40px)} body.zx .z-gate-lead{font-size:16px;max-width:44ch} body.zx .z-code{position:relative;margin-top:10px;width:100%;display:flex;justify-content:center} body.zx .z-code-cells{position:absolute;inset:0;display:flex;justify-content:center;gap:8px;pointer-events:none} body.zx .z-code-cells i{ width:56px;height:76px;border-radius:12px;background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } body.zx #screen-gate input[type=text]{ /* Ширина с запасом: letter-spacing добавляет отступ ПОСЛЕ каждого знака, включая последний, поэтому содержимому нужно (text-indent + 8 шагов) — это на (text-indent + один зазор) больше видимой строки ячеек. Без запаса на восьмом знаке содержимое переполняло поле, браузер прокручивал его к курсору и весь код съезжал влево. Отрицательный margin-right возвращает внешний размер к прежнему, поэтому flex-центрирование и положение знаков не меняются. */ position:relative;z-index:1;height:76px; width:calc(56px * 8 + 8px * 7 + (56px - 1ch) / 2 + 8px + 4px); margin-right:calc(-1 * ((56px - 1ch) / 2 + 8px + 4px)); background:transparent;border:0;outline:none;border-radius:12px; font-family:var(--z-mono);font-weight:400;font-size:26px;color:var(--z-title); text-align:left;text-transform:uppercase;caret-color:var(--z-gold-3); /* Шаг ячейки 64px = ширина 56 + зазор 8. Знак должен вставать в центр САМОЙ ячейки, поэтому в отступе участвует 56, а не 64 — иначе весь текст уезжает вправо на половину зазора (было ровно так). 1ch = ширина знака выбранного моноширинного шрифта: не зависит от того, загрузился ли JetBrains Mono. */ letter-spacing:calc(64px - 1ch); text-indent:calc((56px - 1ch) / 2); padding:0;transition:none; } body.zx #screen-gate input[type=text]::placeholder{color:rgba(255,255,255,.13)} /* Код набран полностью — прячем курсор: из-за letter-spacing он вставал правее последней ячейки и висел «в пустоте». Класс снимает app.js при удалении знака. */ body.zx #screen-gate input[type=text].is-full{caret-color:transparent} body.zx .z-code:focus-within .z-code-cells i:first-child{ background:rgba(246,227,189,.06);box-shadow:inset 0 0 0 1.5px rgba(246,227,189,.7); } /* ПЕРЕБИВКА СТАРЫХ ПРАВИЛ. styles.css, строка 81: #screen-gate input[type=text]:focus{ ... box-shadow:0 0 0 4px var(--accent-bg) } Это синее кольцо фокуса из прежнего дизайна. Поле растянуто на все восемь ячеек, поэтому кольцо обводило всю группу — тот самый лишний контур, который появлялся только при установке курсора. Подсветка активной ячейки и так есть (правило выше), второй индикатор не нужен. */ body.zx #screen-gate input[type=text]:focus{ background:transparent;border-color:transparent;box-shadow:none; } body.zx #screen-gate .msg{ margin-top:4px;min-height:1.2em;font-size:14px;color:var(--z-muted);text-align:center; } body.zx #screen-gate .msg.err{color:#f0a9a0} body.zx #screen-gate #enter{width:280px;max-width:100%;margin-top:4px} body.zx #screen-gate .spinner{ width:18px;height:18px;border:3px solid rgba(20,25,44,.25);border-top-color:var(--z-on-cream); border-radius:50%;animation:spin .7s linear infinite; } /* Информационная подпись: намеренно БЕЗ подчёркивания и без золотого оттенка, чтобы её не принимали за ссылку (в этом и была путаница). */ body.zx .z-gate-hint{font-size:13.5px;color:var(--z-faint);margin-top:2px} body.zx .z-gate-foot{ display:flex;flex-direction:column;align-items:center;gap:14px; margin-top:30px;padding-top:22px;width:100%; border-top:1px solid var(--z-line); /* отделяем действия от формы */ } /* Главный альтернативный путь — единственная заметная ссылка в подвале экрана */ body.zx #screen-gate .z-gate-buy{ font-size:15px;color:var(--z-gold);text-decoration:underline; text-underline-offset:4px;text-decoration-thickness:1px; transition:color .15s; } body.zx #screen-gate .z-gate-buy:hover{color:var(--z-gold-h)} /* Служебные ссылки — тише, но с подчёркиванием: это самый надёжный признак кликабельности, одного оттенка мало (см. правку «ссылки сливаются»). */ body.zx .z-gate-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center} body.zx #screen-gate .z-gate-links .z-link{ font-size:13.5px;color:var(--z-muted);text-decoration:underline; text-underline-offset:4px;text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.28);transition:color .15s; } body.zx #screen-gate .z-gate-links .z-link:hover{color:var(--z-gold-h);text-decoration-color:currentColor} body.zx .z-gate-links i{width:1px;height:13px;flex:none;background:var(--z-line-3)} /* ============================== ВАШИ РАБОТЫ ============================== */ body.zx .z-page{max-width:1040px;width:100%;margin:0 auto;padding:48px 40px 64px} body.zx .z-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:34px} body.zx .z-page-head .z-lead{max-width:46ch;margin-top:10px} body.zx .z-hist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px} body.zx .z-hist .histcard{ position:relative;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);cursor:pointer; transition:transform .18s ease,box-shadow .18s ease;animation:rise .45s ease both; } body.zx .z-hist .histcard:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(233,196,137,.28),0 20px 44px -28px rgba(0,0,0,.9)} body.zx .z-hist .thumb{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--z-surface)} body.zx .z-hist .meta{padding:14px 16px 18px;display:flex;flex-direction:column;gap:9px} body.zx .z-hist .date{font-size:13px;color:var(--z-hint)} body.zx .z-hist .pbar{height:3px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden} body.zx .z-hist .pbar i{display:block;height:100%;background:var(--z-gold-2);border-radius:99px;transition:width .35s ease} body.zx .z-hist .pct{font-size:13.5px;color:var(--z-text-2)} body.zx .z-hist .del{ position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:8px;cursor:pointer; background:rgba(10,14,27,.72);color:var(--z-muted);font-size:16px;line-height:1; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:0;transition:.15s; } body.zx .z-hist .histcard:hover .del{opacity:1} body.zx .z-hist .del:hover{color:#f0a9a0} body.zx .z-empty{ padding:60px 24px;text-align:center;border-radius:16px; box-shadow:inset 0 0 0 1px var(--z-line);background:var(--z-panel-2); } body.zx .z-empty p{font-size:16px;color:var(--z-muted);max-width:44ch;margin:0 auto} body.zx .z-empty .z-empty-ico{width:44px;height:44px;margin:0 auto 16px;color:var(--z-gold-2);opacity:.7} body.zx .z-empty .z-empty-ico svg{width:100%;height:100%;display:block} body.zx .z-page-foot{ display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; margin-top:40px;font-size:13.5px;color:var(--z-faint); } body.zx #screen-home .z-page-foot .z-link{font-size:13.5px;color:var(--z-faint)} body.zx #screen-home .z-page-foot .z-link:hover{color:#f0a9a0} body.zx .z-page-foot i{width:1px;height:13px;flex:none;background:var(--z-line-3)} /* ============================== КАДРИРОВАНИЕ ============================= */ body.zx .z-crop{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:stretch} /* пока фото не загружено, правой панели нет — колонку под неё не резервируем, иначе зона загрузки уезжает влево от центра экрана */ body.zx #screen-crop:not(.is-loaded) .z-crop{grid-template-columns:minmax(0,1fr)} body.zx .z-crop-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;gap:14px} body.zx #screen-crop .drop{ width:min(560px,100%);border:1px dashed var(--z-line-3);border-radius:16px; background:var(--z-panel-2);padding:64px 26px;text-align:center;cursor:pointer; transition:border-color .2s,background .2s;box-shadow:none; } body.zx #screen-crop .drop:hover,body.zx #screen-crop .drop.drag{ border-color:rgba(246,227,189,.5);background:rgba(233,196,137,.04);transform:none;box-shadow:none; } body.zx #screen-crop .drop .ico{ width:52px;height:52px;margin:0 auto 20px;border-radius:14px;background:rgba(233,196,137,.10); box-shadow:inset 0 0 0 1px rgba(233,196,137,.24);color:var(--z-gold-3); } body.zx #screen-crop .drop .ico::after{display:none} body.zx #screen-crop .drop .ico svg{width:24px;height:24px} body.zx #screen-crop .drop .ico svg path{stroke:var(--z-gold-3)} body.zx #screen-crop .drop h2{font-family:var(--z-serif);font-weight:400;font-size:24px;color:var(--z-title);margin-bottom:8px;letter-spacing:0} body.zx #screen-crop .drop p{font-size:15px;color:var(--z-muted)} body.zx #screen-crop .drop .hint{ margin-top:18px;font-family:var(--z-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--z-hint);background:none;padding:0; } body.zx #screen-crop .editor.on{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%} body.zx #screen-crop .vp{ width:min(520px,72vh,86vw);border-radius:14px; box-shadow:0 30px 80px -40px rgba(0,0,0,.9);background:var(--z-surface); } body.zx #screen-crop .vp .ring{ border-radius:14px;box-shadow:inset 0 0 0 1px rgba(246,227,189,.55); } body.zx #screen-crop .vp .grid{ opacity:1; background: linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(255,255,255,.14) calc(33.333% - .5px),rgba(255,255,255,.14) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.14) calc(66.666% - .5px),rgba(255,255,255,.14) calc(66.666% + .5px),transparent calc(66.666% + .5px)), linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(255,255,255,.14) calc(33.333% - .5px),rgba(255,255,255,.14) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.14) calc(66.666% - .5px),rgba(255,255,255,.14) calc(66.666% + .5px),transparent calc(66.666% + .5px)); } body.zx #screen-crop .vp .grid::before,body.zx #screen-crop .vp .grid::after{display:none} body.zx #screen-crop .tip{font-size:13.5px;color:var(--z-hint);margin-top:6px} body.zx .z-crop-panel{ display:none;flex-direction:column;gap:16px;padding:34px 32px 28px; background:var(--z-panel-2);box-shadow:inset 1px 0 0 var(--z-line); } body.zx #screen-crop.is-loaded .z-crop-panel{display:flex} body.zx .z-crop-panel .z-h3{font-family:var(--z-serif);font-size:26px} body.zx .z-panel-note{font-size:14.5px;line-height:1.65;color:var(--z-muted)} body.zx .z-slider{margin-top:10px} body.zx .z-slider-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px} body.zx .z-slider-head span{font-size:14.5px;color:var(--z-text-2)} /* минус/плюс по бокам ползунка — вместо словесных подписей (было «как есть / чуть ближе / ближе / крупно»), минимализм: только иконки, шаг фиксированный */ body.zx .z-zoom-row{display:flex;align-items:center;gap:14px} body.zx .z-zoom-btn{ flex:none;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center; border:0;border-radius:50%;cursor:pointer;color:var(--z-text-2); background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); transition:background .15s,color .15s; } body.zx .z-zoom-btn svg{width:14px;height:14px} body.zx .z-zoom-btn:hover{background:rgba(255,255,255,.09);color:var(--z-title)} body.zx .z-zoom-btn:active{background:rgba(255,255,255,.13)} body.zx .z-zoom-row input[type=range]{flex:1} body.zx #screen-crop input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:99px;cursor:pointer; background:linear-gradient(90deg,var(--z-gold-2) 0 var(--z-fill,0%),rgba(255,255,255,.10) var(--z-fill,0%) 100%); } body.zx #screen-crop input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#faf3e4;border:0; box-shadow:0 3px 8px rgba(0,0,0,.6);cursor:grab; } body.zx #screen-crop input[type=range]::-moz-range-thumb{ width:15px;height:15px;border-radius:50%;background:#faf3e4;border:0; box-shadow:0 3px 8px rgba(0,0,0,.6);cursor:grab; } body.zx .z-panel-act{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:26px} body.zx .z-panel-act .z-btn{width:100%} body.zx #screen-crop .crop-msg{font-size:14px;text-align:center;min-height:1.1em;color:var(--z-muted)} body.zx #screen-crop .crop-msg.err{color:#f0a9a0} body.zx #screen-crop .z-tips-link{ font-size:13.5px;color:var(--z-muted-2); text-decoration:underline;text-decoration-color:var(--z-line-3);text-underline-offset:4px; } /* --- подсказка «какое фото подойдёт» (#photoTips) --- Телефон — шторка снизу, шире 640px — карточка по центру. Картинки ночника остаются голубыми: это настоящий цвет точек, не акцент интерфейса. */ body.zx .z-tips{ /* 95 — выше полосы cookie (90): иначе на телефоне она закрывает кнопку шторки */ position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(5,8,18,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;transition:opacity .3s ease; } body.zx .z-tips.on{opacity:1} body.zx.z-tips-lock{overflow:hidden} body.zx .z-tips-sheet{ width:min(460px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:16px;padding:30px 28px 24px;border-radius:20px; background:linear-gradient(180deg,#111830,#0b1020); box-shadow:inset 0 0 0 1px var(--z-line-2),0 40px 90px -30px rgba(0,0,0,.9); transform:translateY(14px) scale(.98);transition:transform .42s cubic-bezier(.2,.8,.2,1); } body.zx .z-tips.on .z-tips-sheet{transform:none} /* индикатор шагов: заполненные полоски — пройденные и текущий совет */ body.zx .z-tips-dots{display:flex;gap:6px;margin-bottom:-2px} body.zx .z-tips-dots button{ flex:none;width:28px;height:4px;padding:0;border:0;border-radius:4px;cursor:pointer; background:rgba(255,255,255,.12);transition:background .3s,width .3s; } body.zx .z-tips-dots button.on{background:var(--z-gold-2)} body.zx .z-tips-dots button[aria-current]{width:44px} body.zx .z-tips-dots button:focus-visible{outline:2px solid var(--z-gold-2);outline-offset:4px} /* все шаги в одной ячейке сетки: высота шторки = самый высокий шаг, без скачков */ body.zx .z-tips-steps{display:grid} body.zx .z-tips-step{ grid-area:1/1;display:flex;flex-direction:column;gap:16px; opacity:0;visibility:hidden;transform:translateX(18px); transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s; } body.zx .z-tips-step.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)} body.zx .z-tips-title{ margin:0;font-family:var(--z-serif);font-weight:400;font-size:25px;line-height:1.3; color:var(--z-title);text-wrap:pretty;letter-spacing:-.005em; } body.zx .z-tips-title em{font-style:italic;color:var(--z-gold-3)} body.zx .z-tips-pair{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:10px} body.zx .z-tips-pair figure{margin:0;display:flex;flex-direction:column;gap:8px} body.zx .z-tips-pair figcaption{ font-family:var(--z-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--z-hint);text-align:center; } body.zx .z-tips-frame{ position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--z-surface); box-shadow:inset 0 0 0 1px var(--z-line-2); } body.zx .z-tips-frame.is-lamp{background:#04081a;box-shadow:0 0 0 1px rgba(31,208,252,.28),0 14px 34px -16px rgba(31,208,252,.45)} body.zx .z-tips-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease} body.zx .z-tips-step[data-s="bad"] .z-tips-frame .good, body.zx .z-tips-step[data-s="good"] .z-tips-frame .bad{opacity:0} body.zx .z-tips-arrow{width:22px;color:var(--z-gold)} body.zx .z-tips-seg{ position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px; background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--z-line); } body.zx .z-tips-seg button{ position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:9px 8px;border-radius:9px; font-family:var(--z-sans);font-size:14px;font-weight:500;color:var(--z-muted);transition:color .2s; } body.zx .z-tips-seg button[aria-pressed="true"]{color:var(--z-title)} body.zx .z-tips-seg button:focus-visible{outline:2px solid var(--z-gold-2);outline-offset:1px} body.zx .z-tips-knob{ position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px; background:rgba(233,196,137,.12);box-shadow:inset 0 0 0 1px rgba(233,196,137,.34); transition:transform .38s cubic-bezier(.2,.8,.2,1); } body.zx .z-tips-step[data-s="good"] .z-tips-knob{transform:translateX(100%)} body.zx .z-tips-act{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px} body.zx .z-tips-act .z-btn{width:100%} @media(max-width:640px){ body.zx .z-tips{align-items:flex-end;padding:0} body.zx .z-tips-sheet{ width:100%;max-height:calc(100% - 24px);border-radius:22px 22px 0 0; padding:28px 20px calc(18px + env(safe-area-inset-bottom,0px));gap:16px; transform:translateY(100%); } body.zx .z-tips-title{font-size:22px} body.zx .z-tips-pair{gap:8px;grid-template-columns:1fr 18px 1fr} body.zx .z-tips-arrow{width:18px} } @media(prefers-reduced-motion:reduce){ body.zx .z-tips,body.zx .z-tips-sheet,body.zx .z-tips-frame img,body.zx .z-tips-knob, body.zx .z-tips-step,body.zx .z-tips-step.on{transition:none} } /* ============================== ПРЕДПРОСМОТР ============================= */ /* Оттенки объявлены через @property, чтобы их можно было ПЛАВНО менять: обычную custom property браузер не интерполирует, и градиенты под ней переключались бы рывком — заметно рядом с плавным кроссфейдом самого фото. Где @property не поддержан, всё работает по-старому, просто без перехода. */ @property --z-tint-glow{syntax:"";inherits:true;initial-value:rgba(112,190,255,.24)} @property --z-tint-bg{syntax:"";inherits:true;initial-value:rgba(66,132,206,.22)} body.zx #screen-preview.on{ background: radial-gradient(60% 50% at 50% 40%,var(--z-tint-bg,rgba(66,132,206,.22)),transparent 72%), #05070f; transition:--z-tint-bg .42s ease; } body.zx .z-pv{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;padding:22px 32px 30px;text-align:center; } body.zx .z-pv-head{display:flex;flex-direction:column;gap:8px;align-items:center} body.zx .z-pv-head h1{font-family:var(--z-serif);font-weight:400;font-size:clamp(26px,3.4vw,34px);color:var(--z-title);line-height:1.2} body.zx .z-pv-head p{font-size:15px;color:var(--z-muted-2)} /* сцена не должна выталкивать кнопку за сгиб на ноутбуке */ body.zx .z-pv-stage{position:relative;width:min(600px,48vh,92vw)} body.zx .z-pv-stage .z-halo{ width:94%;height:80%;top:46%;filter:blur(28px); background:radial-gradient(50% 50% at 50% 50%,var(--z-tint-glow,rgba(112,190,255,.24)),transparent 74%); transition:--z-tint-glow .42s ease; } body.zx #screen-preview .pvbox{position:relative;z-index:1;border-radius:16px;overflow:hidden;box-shadow:0 40px 100px -50px rgba(0,0,0,.9)} body.zx #screen-preview .pvstage{border-radius:16px;overflow:hidden} body.zx #screen-preview .pvdots, body.zx #screen-preview .pvframe{filter:var(--z-tint-filter,none);transition:filter .28s ease} /* Верхний слой фона: лежит ровно на нижнем и обычно прозрачен. Скрипт кладёт в него уже загруженный кадр и добавляет .in — новый цвет проявляется, старый ещё виден под ним. Дальше тот же кадр уходит в нижний слой, и верхний гасится вхолостую. */ body.zx #screen-preview .pvbg-next{opacity:0;transition:opacity .38s ease;z-index:0} body.zx #screen-preview .pvbg-next.in{opacity:1} /* цвет подсветки — визуальная примерка (пульт из набора, 16 цветов) */ body.zx .z-tint{display:flex;flex-direction:column;align-items:center;gap:12px} body.zx .z-tint-label{font-size:14px;color:var(--z-muted-2)} body.zx .z-tint-row{display:flex;gap:12px} body.zx .z-sw{ width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;padding:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:box-shadow .18s ease,transform .18s ease; } body.zx .z-sw:hover{transform:translateY(-1px)} body.zx .z-sw.on{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 18px rgba(158,210,255,.6)} body.zx .z-sw-1{background:#9ed2ff} body.zx .z-sw-2{background:#f6e3bd} body.zx .z-sw-3{background:#f0a9a0} body.zx .z-sw-4{background:#c2a6f0} body.zx .z-sw-5{background:#9fe6c6} /* Белому кружку общая обводка не годится: светлая рамка на светлом не видна, а выбранное состояние (белое кольцо вплотную) слилось бы с самим кружком. Отсюда тёмный ободок в обычном состоянии и тёмный зазор между кружком и кольцом — в выбранном. */ body.zx .z-sw-6{background:#fff;box-shadow:inset 0 0 0 1px rgba(5,7,15,.28)} body.zx .z-sw-6.on{ box-shadow:0 0 0 2px #05070f,0 0 0 4px rgba(255,255,255,.85),0 0 18px rgba(226,238,255,.6); } /* Точки сервер рисует одним цветом — #1FD0FC, как на bg1.png. Остальные цвета получаются фильтром, и теперь фон под ними — НАСТОЯЩЕЕ фото в том же свете, а не тот же голубой кадр. Поэтому углы подобраны не на глаз: у каждого снимка замерен медианный оттенок сцены (по пикселям, которые не пересвечены и не в тени), взят его сдвиг ОТНОСИТЕЛЬНО bg1.png, и найден угол hue-rotate, дающий ровно такой же сдвиг у #1FD0FC. Отсчёт от bg1 важен: голубой остаётся эталоном (фильтра нет), а систематическая ошибка замера сокращается. Пересчитать — tools/tint_calc.py. */ body.zx #screen-preview[data-tint="1"]{--z-tint-filter:none;--z-tint-glow:rgba(112,190,255,.24);--z-tint-bg:rgba(66,132,206,.22)} body.zx #screen-preview[data-tint="2"]{--z-tint-filter:hue-rotate(204deg) brightness(.94);--z-tint-glow:rgba(255,221,116,.24);--z-tint-bg:rgba(207,173,70,.22)} body.zx #screen-preview[data-tint="3"]{--z-tint-filter:hue-rotate(165deg) saturate(.89) brightness(1.06);--z-tint-glow:rgba(255,156,128,.24);--z-tint-bg:rgba(207,109,82,.22)} body.zx #screen-preview[data-tint="4"]{--z-tint-filter:hue-rotate(69deg) brightness(1.10);--z-tint-glow:rgba(227,114,255,.24);--z-tint-bg:rgba(179,68,207,.22)} body.zx #screen-preview[data-tint="5"]{--z-tint-filter:hue-rotate(265deg) saturate(.90) brightness(1.20);--z-tint-glow:rgba(152,255,126,.24);--z-tint-bg:rgba(105,207,80,.22)} /* Белый: остальные цвета получаются поворотом оттенка, а белый — единственный, где оттенок нужно убрать совсем. saturate(0) из голубого даёт серый (яркость исходного цвета сохраняется), поэтому добавляем brightness — иначе свет выглядел бы не белым, а тусклым серым. Замер сцены bg1-2 даёт остаточную синеву (её набирает стена, а не лампа), поэтому здесь оставляем ручное значение. */ body.zx #screen-preview[data-tint="6"]{--z-tint-filter:saturate(0) brightness(1.45);--z-tint-glow:rgba(226,238,255,.26);--z-tint-bg:rgba(122,156,207,.22)} body.zx .z-pv-act{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap} body.zx #screen-preview .crop-msg{font-size:14px;min-height:1.1em;color:var(--z-muted)} body.zx #screen-preview .crop-msg.err{color:#f0a9a0} body.zx #screen-preview .lead{font-size:15px;color:var(--z-muted-2);max-width:56ch} /* =========================== ИНФО-СТРАНИЦЫ ============================== */ body.zx #screen-page.on{display:block;min-height:100dvh;padding:0} body.zx .z-doc{max-width:820px;margin:0 auto;padding:56px var(--z-pad) 90px} body.zx .z-doc .lpage-crumbs{font-size:13.5px;color:var(--z-hint);margin-bottom:22px} body.zx .z-doc .lpage-crumbs a{cursor:pointer} body.zx .z-doc .lpage-crumbs a:hover{color:var(--z-gold-h)} body.zx .z-doc h1{ font-family:var(--z-serif);font-weight:400;font-size:clamp(32px,4.4vw,48px);line-height:1.14; letter-spacing:-.008em;color:var(--z-title);margin-bottom:22px; } body.zx .z-doc h2{ font-family:var(--z-serif);font-weight:400;font-size:24px;color:var(--z-title); margin:38px 0 12px;padding-top:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } body.zx .z-doc p,body.zx .z-doc li{font-size:16px;line-height:1.75;color:var(--z-muted);text-wrap:pretty} body.zx .z-doc p+p{margin-top:12px} body.zx .z-doc ul,body.zx .z-doc ol{margin:12px 0 12px 20px;display:flex;flex-direction:column;gap:9px} body.zx .z-doc strong{color:var(--z-text-2);font-weight:500} body.zx .z-doc a{color:var(--z-gold)} body.zx .z-doc a:hover{color:var(--z-gold-h)} body.zx .z-doc .lpage-lead{font-size:17px;color:var(--z-text-2)} body.zx .z-doc .lpage-note{ margin-top:34px;padding-top:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08); font-size:13.5px;color:var(--z-faint); } /* ===================== ПЕРЕБИВКА СТАРЫХ ПРАВИЛ ========================== В styles.css кнопки экранов заданы через ID (#screen-gate button и т.п.) — это сильнее любых классов. Пересобираем компоненты с той же специфичностью. ====================================================================== */ body.zx #screen-gate .z-btn, body.zx #screen-home .z-btn, body.zx #screen-crop .z-btn, body.zx #screen-preview .z-btn, body.zx #screen-page .z-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;margin:0; font-family:var(--z-sans);font-size:16px;font-weight:600;line-height:1.2; padding:17px 32px;border-radius:12px;border:0;cursor:pointer;text-decoration:none; transition:transform .16s ease,filter .16s ease,background .16s ease; } body.zx #screen-gate .z-btn-primary, body.zx #screen-home .z-btn-primary, body.zx #screen-crop .z-btn-primary, body.zx #screen-preview .z-btn-primary, body.zx #screen-page .z-btn-primary{ background:var(--z-cream);color:var(--z-on-cream); box-shadow:0 14px 34px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.9); } body.zx #screen-gate .z-btn-primary:hover, body.zx #screen-home .z-btn-primary:hover, body.zx #screen-crop .z-btn-primary:hover, body.zx #screen-preview .z-btn-primary:hover, body.zx #screen-page .z-btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)} body.zx #screen-gate .z-btn-ghost, body.zx #screen-home .z-btn-ghost, body.zx #screen-crop .z-btn-ghost, body.zx #screen-preview .z-btn-ghost, body.zx #screen-page .z-btn-ghost{ background:rgba(255,255,255,.05);color:var(--z-title);font-size:14px;font-weight:500; padding:11px 22px;border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.06); } /* «Создать ночник» на экране предпросмотра — та же компактная двустрочная кнопка, что и в шапке лендинга, а не полноразмерная ghost-кнопка экрана */ body.zx #screen-preview .z-btn-code{padding:9px 16px} body.zx #screen-gate .z-link, body.zx #screen-home .z-link, body.zx #screen-crop .z-link, body.zx #screen-preview .z-link, body.zx #screen-page .z-link{ display:inline;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none; font-family:var(--z-sans);font-size:14px;font-weight:400;line-height:inherit; color:var(--z-muted);cursor:pointer;transition:color .15s; } body.zx #screen-gate .z-link:hover, body.zx #screen-home .z-link:hover, body.zx #screen-crop .z-link:hover, body.zx #screen-preview .z-link:hover, body.zx #screen-page .z-link:hover{color:var(--z-gold-h);filter:none} /* «< Изменить кадр» — стрелка назад делает действие понятным без чтения. Область по ID: правило .z-link выше задаёт display:inline и по специфичности бьёт обычный класс, поэтому перебиваем с тем же весом (см. «ПЕРЕБИВКА СТАРЫХ ПРАВИЛ»). */ body.zx #screen-preview .z-link-back{display:inline-flex;align-items:center;gap:6px} body.zx .z-link-back svg{width:14px;height:14px;flex:none} body.zx #screen-crop .z-crop-panel .z-btn, body.zx #screen-crop .z-crop-panel .z-btn-ghost{width:100%} body.zx #screen-home .z-page-head .z-btn{flex:none} /* ================================ ФОКУС ================================= */ body.zx :focus-visible{outline:2px solid var(--z-gold-3);outline-offset:3px;border-radius:6px} body.zx .z-code:focus-within{border-radius:12px} /* =============================== АДАПТИВ ================================ */ @media(max-width:1180px){ body.zx .z-hero-in{grid-template-columns:1fr 520px} body.zx .z-buy-in{grid-template-columns:1fr 440px;gap:44px} body.zx .z-nav-links{display:none} /* колонки полосы становятся уже — поджимаем текст и отступы, чтобы строки не ломались */ body.zx .z-strip-in{font-size:12.5px} body.zx .z-strip-in span{padding:2px 14px} } /* Планшетная пинч-зона (901–1180px): узкая текстовая колонка героя не вмещает «фото‑ночник» одним неразрывным словом при крупном кегле — уменьшаем заголовок и слегка сужаем фото, иначе строка вылезает за пределы страницы. На ≤900px герой уже одноколоночный (см. ниже), там это не нужно. */ @media(min-width:901px) and (max-width:1180px){ body.zx .z-hero-in{grid-template-columns:1fr 420px;gap:28px} body.zx .z-h1{font-size:clamp(32px,4.4vw,46px)} } @media(max-width:900px){ body.zx .z-nav-in{padding:14px var(--z-pad);gap:10px} body.zx .z-nav .z-logo, body.zx .z-top .z-logo, body.zx #screen-guide .appbar-logo{height:34px} body.zx .z-menu-top .z-logo{height:40px} body.zx .z-foot-brand .z-logo{height:54px} /* «Создать ночник» остаётся на виду и на мобиле — в бургер уходят только ссылки навигации по разделам, а не вход по коду набора */ body.zx .z-burger{display:block} body.zx .z-btn-code{padding:8px 12px} body.zx #screen-preview .z-btn-code{padding:7px 12px} body.zx .z-btn-code-txt b{font-size:12.5px} body.zx .z-btn-code-txt i{font-size:9.5px} /* порядок как в макете: заголовок → фото → кнопка (совпадает с порядком в DOM). align-items:stretch — сбрасываем «center» из десктопной grid-раскладки: в колонке center сжимает .z-hero-cta по содержимому (кнопка выходит уже фото над ней и всё смотрится перекошенным), stretch тянет её на всю ширину. */ body.zx .z-hero-in{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:26px var(--z-pad) 54px} body.zx .z-hero-copy{gap:16px} body.zx .z-hero-art{margin:22px 0 0} body.zx .z-hero-art .z-shot{aspect-ratio:13/10} body.zx .z-halo{width:min(420px,90vw);height:300px} /* align-self:stretch сбрасывает «align-self:start» из десктопного правила — иначе cta не тянется на всю ширину даже с align-items:stretch у родителя, кнопка выходит уже фото над ней. */ body.zx .z-hero-cta{margin-top:22px;flex-direction:column;align-items:stretch;align-self:stretch;gap:12px} body.zx .z-hero-btns{flex-direction:column;align-items:stretch;gap:12px} body.zx .z-hero-cta .z-btn{width:100%;padding:17px} body.zx .z-hero-btns .z-btn-ghost{padding:17px} body.zx .z-hero-note{max-width:none;text-align:center} /* полоса преимуществ — на мобиле бегущая строка вместо трёх колонок (те не умещаются по ширине и жмутся влево, см. правку) */ body.zx .z-strip-desktop{display:none} body.zx .z-strip-mobile{display:block} body.zx .z-strip-marquee{padding:16px 0;font-size:13.5px;color:var(--z-hint)} body.zx .z-sec{padding:56px 0} /* На десктопе секции разделяет широкий воздух (96px) и смена фона. На мобиле отступы вдвое меньше, а фоны соседних секций почти совпадают — граница пропадает, блоки сливаются в одно полотно. Возвращаем членение той же тонкой линией, что уже держит полосу преимуществ и подвал. */ body.zx .z-sec + .z-sec, body.zx .z-sec + .z-final{border-top:1px solid var(--z-line)} body.zx .z-sec-head{grid-template-columns:1fr;gap:12px;margin-bottom:26px} body.zx .z-sec-head .z-sec-note{max-width:none;padding-bottom:0} body.zx .z-steps-grid{grid-template-columns:1fr;gap:34px} /* на телефоне аккордеон становится лентой со свайпом, все подписи видны */ body.zx .z-acc{ height:auto;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; margin:0 calc(var(--z-pad)*-1);padding:0 var(--z-pad);scroll-padding:0 var(--z-pad); } body.zx .z-acc::-webkit-scrollbar{display:none} body.zx .z-acc-item,body.zx .z-acc-item.on{flex:0 0 72vw;aspect-ratio:2/3;scroll-snap-align:center;box-shadow:inset 0 0 0 1px var(--z-line)} body.zx .z-acc-item img{filter:none;object-position:50% 55%} /* подпись в одну строку: кегль растёт с шириной карточки (72vw), чтобы самая длинная, «Всё это с помощью одного набора», влезала и на 360px */ body.zx .z-acc-cap{opacity:1;transform:none;font-size:clamp(13px,3.8vw,19px);white-space:nowrap;padding:48px 14px 16px} body.zx .z-buy-in{grid-template-columns:1fr;gap:26px} body.zx .z-buy-in .z-shot{order:-1;aspect-ratio:13/10} body.zx .z-buy-row{gap:16px} body.zx .z-buy-row .z-btn{flex:1;min-width:180px;justify-content:center} /* Пластины на телефоне. Раньше карточка разворачивалась в колонку с картинкой во всю ширину (180px) и занимала до 91% экрана на 360×640 — дополнительный товар выглядел важнее самого ночника и выталкивал следующий блок. Теперь: миниатюра и заголовок с ценой в одну строку, текст под ними во всю ширину, кнопка внизу. `display:contents` на .z-spare-copy отдаёт заголовок и абзацы прямо в сетку карточки — иначе текст пришлось бы ужимать в узкую колонку рядом с миниатюрой, и он стал бы вдвое длиннее по высоте. */ body.zx .z-buy-extra{margin-top:28px} body.zx .z-spare{ grid-template-columns:64px minmax(0,1fr); grid-template-areas:"art head" "lead lead" "note note" "act act"; align-items:center;gap:12px 14px;padding:18px; } body.zx .z-spare-art{grid-area:art;width:64px;height:64px;border-radius:12px} body.zx .z-spare-copy{display:contents} body.zx .z-spare-copy .z-h3{grid-area:head;font-size:19px} body.zx .z-spare-lead{grid-area:lead;font-size:14.5px;line-height:1.55} body.zx .z-spare-note{grid-area:note;font-size:12.5px;line-height:1.5} body.zx .z-spare-act{ grid-area:act;flex-direction:row;align-items:center;justify-content:space-between; gap:14px;margin-top:2px; } body.zx .z-spare-act .z-price{font-size:24px;flex:none} /* На узком экране кнопка забирает всю оставшуюся ширину, на планшете — ограничена: растянутая на 800px кнопка у дополнительного товара весила бы больше, чем главная кнопка «Заказать ночник» выше. */ body.zx .z-spare-act .z-btn{flex:1;min-width:0;max-width:360px} body.zx .z-say-track{gap:14px} body.zx .z-quote{flex-basis:78vw;max-width:78vw;padding:24px} body.zx .z-quote blockquote{font-size:17px} body.zx .z-faq-in{grid-template-columns:1fr;gap:22px} body.zx .z-faq-list .z-qa-x{display:none} body.zx .z-final{padding:70px 0} body.zx .z-final .z-btn{width:100%} body.zx .z-fh-d{display:none} body.zx .z-fh-m{display:block} body.zx .z-foot-in{grid-template-columns:1fr;gap:30px;padding:34px var(--z-pad) 16px} body.zx .z-foot-cols{grid-template-columns:1fr 1fr;gap:24px} body.zx .z-foot-bottom{padding:14px var(--z-pad) 40px} /* приложение */ /* верхняя панель конструктора: на 390px помещаемся за счёт знака и коротких шагов */ body.zx .z-top{padding:13px 16px;gap:10px} body.zx .z-top .z-brand-name{display:none} body.zx .z-top-end{gap:12px} body.zx .z-flow{gap:6px} body.zx .z-flow li{gap:7px} body.zx .z-flow li span{display:none} body.zx .z-flow li.on span{display:inline} body.zx .z-flow li::after{width:14px} body.zx .z-crop{grid-template-columns:1fr} body.zx .z-crop-stage{padding:22px 20px} body.zx .z-crop-panel{ padding:20px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow:inset 0 1px 0 var(--z-line);gap:12px; } body.zx .z-crop-panel .z-h3{display:none} body.zx .z-panel-note{display:none} body.zx .z-panel-act{padding-top:12px;gap:10px} body.zx #screen-crop input[type=range]::-webkit-slider-thumb{width:19px;height:19px} body.zx #screen-crop input[type=range]::-moz-range-thumb{width:19px;height:19px} body.zx .z-page{padding:26px 20px 40px} body.zx .z-pv{padding:22px 20px 34px;gap:18px;justify-content:flex-start} body.zx .z-sw{width:34px;height:34px} body.zx .z-pv-act{flex-direction:column;gap:12px;width:100%} body.zx #screen-preview .z-pv-act .z-btn{width:100%} body.zx .z-code-cells i{width:38px;height:62px;border-radius:10px} body.zx #screen-gate input[type=text]{ height:62px;font-size:20px; width:calc(38px * 8 + 6px * 7 + (38px - 1ch) / 2 + 6px + 4px); margin-right:calc(-1 * ((38px - 1ch) / 2 + 6px + 4px)); letter-spacing:calc(44px - 1ch);text-indent:calc((38px - 1ch) / 2); } body.zx .z-code-cells{gap:6px} body.zx .z-gate{padding:26px 20px 44px} body.zx #screen-gate #enter{width:100%} body.zx .z-doc{padding:30px var(--z-pad) 56px} } @media(max-width:400px){ body.zx .z-code-cells i{width:34px;height:56px} body.zx #screen-gate input[type=text]{ height:56px;font-size:18px; width:calc(34px * 8 + 5px * 7 + (34px - 1ch) / 2 + 5px + 4px); margin-right:calc(-1 * ((34px - 1ch) / 2 + 5px + 4px)); letter-spacing:calc(39px - 1ch);text-indent:calc((34px - 1ch) / 2); } body.zx .z-code-cells{gap:5px} } @media(prefers-reduced-motion:reduce){ body.zx *,body.zx *::before,body.zx *::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ===== Информирование и реквизиты (юридический пакет) ===== Под кнопкой кадрирования — не чекбокс, а сноска: она информирует в момент отправки файла и фиксирует принятие соглашения нажатием кнопки. Мелкая и приглушённая: это служебный текст, он не должен спорить с кнопкой. */ body.zx .z-consent-note{ margin:10px 0 2px;font-size:12.5px;line-height:1.5;color:var(--z-muted); } body.zx .z-consent-note a{color:var(--z-cool);text-decoration:underline;text-underline-offset:2px} body.zx .z-consent-note a:hover{color:var(--z-gold-2)} body.zx .z-foot-req{max-width:70ch;line-height:1.6;text-align:right} body.zx .z-foot-req a{color:var(--z-muted);text-decoration:underline} @media (max-width:860px){ body.zx .z-foot-req{text-align:left} body.zx .z-consent-note{font-size:12px} }