/* ============================================================================ site/inner.css — «живые панели» внутренних страниц. Главная уже ПОКАЗЫВАЕТ продукт (фильм и настоящие экраны). Внутренние страницы до сих пор рассказывали списками. Этот файл даёт каждому крупному утверждению работающий фрагмент интерфейса: чат торга, склад с остатками, отчёт смены, табель, карту столов, карточку блюда, скрытие контакта, ленту заказов поставщика. Правила движения — те же, что на всём сайте: • сцена играет ОДИН раз, когда доехала до экрана, и замирает в финале (класс .vz-on ставит inner.js); ничего не мигает и не бежит по кругу; • без JS класса .js на нет — панели стоят СРАЗУ в конечном виде, страница закончена, а не сломана; • при prefers-reduced-motion переходы выключены, .vz-on ставится сразу. Словарь панелей продолжает show.css с главной (тёмное стекло, строки, чипы, крупные числа) — сайт читается как одна рука. ========================================================================== */ /* ─────────────────────────── панель-основа ─────────────────────────── */ .mviz{ margin:0; position:relative; width:100% } .vz-panel{ border-radius:22px; padding:clamp(16px,1.5vw,24px); background:linear-gradient(165deg, rgba(23,37,30,.95), rgba(12,20,16,.92)); border:var(--hair); box-shadow:var(--bevel), 0 30px 60px -26px rgba(0,0,0,.62); display:grid; gap:10px; color:var(--ink); transition:transform .22s var(--e-micro); } .mviz:hover .vz-panel{ transform:translate3d(0,-3px,0) } /* тёмная панель на светлой «бумаге» — как экран, положенный на стол */ .paper .vz-panel{ border-color:rgba(255,255,255,.12); box-shadow:var(--bevel), 0 36px 70px -30px rgba(13,26,21,.55); } /* подпись экрана: панель — не декорация, а конкретное место в программе */ .vz-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); padding-bottom:2px; } .vz-head .ic{ width:14px; height:14px; color:var(--acc-lit) } .vz-live{ display:inline-flex; align-items:center; gap:6px } .vz-head .vz-chip{ text-transform:none; letter-spacing:.01em } /* ─────────────────────────── атомы панелей ─────────────────────────── */ .vz-sub{ color:var(--muted); font-size:12.5px; line-height:1.3 } .vz-sub.is-r{ text-align:right } .vz-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-weight:600; font-size:12.5px; letter-spacing:.01em; white-space:nowrap; background:rgba(63,211,162,.13); color:var(--acc-lit); border:1px solid rgba(63,211,162,.28); } .vz-chip.is-gold{ background:var(--gold-soft); color:var(--gold); border-color:var(--gold-edge); } .vz-chip.is-dim{ background:rgba(255,255,255,.06); color:var(--muted); border-color:rgba(255,255,255,.1); } .vz-ava{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 11px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing:.02em; background:linear-gradient(150deg, rgba(63,211,162,.3), rgba(21,128,96,.4)); border:1px solid rgba(63,211,162,.35); color:var(--acc-lit); } /* строка-плитка внутри панели (заказ, автозаказ, бронь) */ .vz-row{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); font-size:14px; } .vz-row .ic{ width:18px; height:18px; color:var(--acc-lit); flex:0 0 auto } .vz-row b{ font-weight:600; display:block; line-height:1.25 } .vz-row > div{ min-width:0 } .vz-row .vz-chip{ margin-left:auto } /* полоса остатка / отчёта */ .vz-bar{ position:relative; flex:1 1 auto; height:8px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; min-width:40px; } .vz-bar i{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, var(--acc-d), var(--acc-lit)); transform:scaleX(var(--w,0)); transform-origin:left; transition:transform .7s var(--e-reveal); } .is-low .vz-bar i,.vz-bar.is-gold i{ background:linear-gradient(90deg, var(--gold-d), var(--gold)); } /* ═══════════════════════ СЦЕНА: ЧАТ (закупки, скрытие контакта) ═══════ */ .vz-chat{ display:grid; gap:9px } .vz-msg{ display:flex; gap:9px; align-items:flex-end; max-width:92% } .vz-msg.is-me{ margin-left:auto; flex-direction:row-reverse } .vz-bub{ padding:9px 13px; border-radius:16px 16px 16px 5px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); font-size:14px; line-height:1.35; display:grid; gap:3px; min-width:0; } .vz-msg.is-me .vz-bub{ border-radius:16px 16px 5px 16px; background:rgba(29,158,117,.2); border-color:rgba(63,211,162,.24); } .vz-bub b{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-lit) } /* телефон, который площадка закрывает плашкой */ .vz-red{ position:relative; display:inline-block; white-space:nowrap; font-weight:600 } /* без JS плашка стоит сразу: номер не должен быть виден ни в каком состоянии */ .vz-red i{ position:absolute; inset:-2px -5px; z-index:2; border-radius:7px; background:linear-gradient(100deg, var(--acc-d), var(--acc)); box-shadow:0 3px 10px -3px rgba(29,158,117,.55); transform-origin:left; transition:transform .55s var(--e-reveal); } /* засечки «замазано» на самой плашке */ .vz-red i::after{ content:""; position:absolute; inset:4px 7px; background:repeating-linear-gradient(100deg, rgba(6,20,15,.5) 0 7px, transparent 7px 14px); border-radius:3px; opacity:.65; } .vz-sys{ display:flex; align-items:center; gap:8px; justify-content:center; font-size:12.5px; font-weight:600; color:var(--acc-lit); padding:7px 10px; border-radius:12px; background:rgba(29,158,117,.1); border:1px dashed rgba(63,211,162,.3); } .vz-sys .ic{ width:15px; height:15px } /* ═══════════════════════ СЦЕНА: СКЛАД ═══════════════════════ */ .vz-srow{ display:grid; grid-template-columns:minmax(84px,auto) 1fr auto; gap:12px; align-items:center; font-size:14px; } .vz-srow b{ font-weight:600; white-space:nowrap } .vz-srow .vz-sub{ white-space:nowrap; text-align:right } .vz-srow.is-low .vz-sub{ color:var(--gold) } /* ═══════════════════════ СЦЕНА: СЕБЕСТОИМОСТЬ ═══════════════════════ */ .vz-dish{ display:flex; align-items:center; justify-content:space-between; gap:10px } .vz-dish b{ font-weight:700; font-size:15.5px; letter-spacing:-.01em } .vz-irow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted); padding-bottom:8px; border-bottom:1px dashed rgba(255,255,255,.09); } .vz-irow .num{ color:var(--ink); font-size:14.5px } .vz-total{ display:flex; align-items:baseline; gap:8px; padding-top:2px; font-size:14px; color:var(--muted); } .vz-total .num{ margin-left:auto; font-size:clamp(22px,1.8vw,28px); font-weight:700; color:var(--ink); letter-spacing:-.02em; } /* ═══════════════════════ СЦЕНА: ДЕНЬГИ СМЕНЫ ═══════════════════════ */ .vz-mrow{ display:grid; grid-template-columns:minmax(96px,auto) 1fr minmax(92px,auto); gap:12px; align-items:center; font-size:13.5px; color:var(--muted); } .vz-mrow .num{ text-align:right; color:var(--ink); font-size:14.5px; white-space:nowrap } .vz-mrow.is-profit{ color:var(--ink); font-weight:600 } .vz-mrow.is-profit .num{ color:var(--acc-lit); font-size:16px } .vz-mrow.is-profit .vz-bar{ height:10px } .vz-note{ display:flex; gap:9px; align-items:flex-start; padding:10px 12px; border-radius:13px; margin-top:2px; background:var(--acc-soft); border:1px solid var(--acc-edge); font-size:13px; line-height:1.4; color:var(--muted); } .vz-note .ic{ width:16px; height:16px; margin-top:1px; color:var(--acc-lit); flex:0 0 auto } /* ═══════════════════════ СЦЕНА: КАРТА ЗАЛА ═══════════════════════ */ /* Та же подложка-пятно, что на главной: см. site/lqip.css. */ .vz-zal{ position:relative; overflow:hidden; border-radius:15px; border:1px solid rgba(255,255,255,.1); background:var(--bg) var(--lqip, none) top center / cover no-repeat; } .vz-zal img{ width:100%; height:auto; display:block } .vz-dot{ position:absolute; z-index:2; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--paper-ink); box-shadow:0 0 0 2.4px rgba(255,255,255,.85), 0 2px 6px rgba(0,0,0,.3); } .vz-dot.is-staff{ background:transparent; box-shadow:inset 0 0 0 2.4px var(--acc), 0 0 0 2.4px rgba(255,255,255,.85), 0 2px 6px rgba(0,0,0,.28); } .vz-badge{ position:absolute; z-index:3; transform:translate(-50%,-130%); display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:rgba(10,17,14,.9); border:1px solid rgba(255,255,255,.15); box-shadow:0 12px 26px -12px rgba(0,0,0,.6); font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; } .vz-badge i{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:0 0 auto } .vz-mapfoot{ display:flex; gap:8px; flex-wrap:wrap } /* ═══════════════════════ СЦЕНА: ТАБЕЛЬ ═══════════════════════ */ .vz-trow{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); font-size:13.5px; } .vz-trow b{ font-weight:600; display:block; line-height:1.25; font-size:14px } .vz-trow > div{ min-width:0 } .vz-time{ margin-left:auto; white-space:nowrap; font-size:13px; color:var(--muted); font-family:"Space Grotesk", Manrope, sans-serif; font-variant-numeric:tabular-nums; } .vz-time.is-open{ color:var(--acc-lit); font-weight:600 } /* ═══════════════════════ СЦЕНА: БРОНЬ (карта столов) ═══════════════════════ */ .vz-book svg{ width:100%; height:auto; display:block; border-radius:15px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08) } .vz-book .bt{ fill:rgba(234,243,239,.06); stroke:rgba(234,243,239,.32); stroke-width:1.5; transition:fill .45s var(--e-micro), stroke .45s var(--e-micro); } .vz-book .bt.is-busy{ transition-duration:.5s } .vz-on .vz-book .bt.is-busy, html:not(.js) .vz-book .bt.is-busy{ fill:rgba(63,211,162,.26); stroke:rgba(63,211,162,.8) } .vz-book .bt-ring{ fill:none; stroke:var(--gold); stroke-width:2; transform-box:fill-box; transform-origin:center; transition:transform .5s var(--e-reveal), opacity .4s var(--e-micro); } .js .vz-book .bt-ring{ transform:scale(.6); opacity:0 } .vz.vz-on .vz-book .bt-ring{ transform:scale(1); opacity:1; transition-delay:.75s } .vz-book .bt-lab{ fill:rgba(234,243,239,.5); font:600 10px/1 "Space Grotesk", Manrope, sans-serif; } /* ═══════════════════════ СЦЕНА: КАРТОЧКА БЛЮДА ═══════════════════════ */ .vz-dhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px } .vz-dhead b{ font-weight:700; font-size:16px; letter-spacing:-.01em; display:block } .vz-kcal{ text-align:right; white-space:nowrap } .vz-kcal .num{ font-size:clamp(22px,1.8vw,28px); font-weight:700; letter-spacing:-.02em } .vz-kcal span{ color:var(--muted); font-size:12.5px } .vz-bju{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px } .vz-bju > span{ display:grid; gap:1px; justify-items:center; padding:8px 6px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:13.5px; } .vz-bju i{ font-style:normal; font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase } .vz-alg{ display:flex; flex-wrap:wrap; gap:7px; align-items:center } /* аллерген гостя: чип «кунжут» сам перекрашивается в предупреждение */ .vz-chip.to-warn{ transition:background-color .45s var(--e-micro), color .45s var(--e-micro), border-color .45s var(--e-micro) } .vz-on .vz-chip.to-warn, html:not(.js) .vz-chip.to-warn{ background:var(--gold-soft); color:var(--gold); border-color:var(--gold-edge); transition-delay:1.05s; } .vz-warnline{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--gold); } .vz-warnline .ic{ width:15px; height:15px; flex:0 0 auto } .vz-qr{ display:flex; align-items:center; gap:8px; color:var(--dim); font-size:12.5px } .vz-qr .ic{ width:16px; height:16px } /* ═══════════════════ ПОЯВЛЕНИЕ СЦЕН (одноразовый каскад) ═══════════════════ Скрытые состояния живут под .js — без скрипта страница стоит в финале. */ .vz-msg,.vz-row,.vz-sys,.vz-srow,.vz-irow,.vz-dish,.vz-total,.vz-mrow,.vz-note, .vz-trow,.vz-mapfoot .vz-chip,.vz-dhead,.vz-bju > span,.vz-alg .vz-chip, .vz-warnline,.vz-qr,.vz-dot,.vz-badge{ transition:opacity .5s var(--e-reveal), transform .5s var(--e-reveal); } .js .vz .vz-msg{ opacity:0; transform:translate3d(0,14px,0) scale(.97) } .js .vz .vz-row,.js .vz .vz-sys,.js .vz .vz-note, .js .vz .vz-trow,.js .vz .vz-warnline{ opacity:0; transform:translate3d(0,12px,0) } .js .vz .vz-srow,.js .vz .vz-irow,.js .vz .vz-mrow{ opacity:0; transform:translate3d(-12px,0,0) } .js .vz .vz-dish,.js .vz .vz-total,.js .vz .vz-dhead,.js .vz .vz-qr{ opacity:0 } .js .vz .vz-bju > span{ opacity:0; transform:translate3d(0,8px,0) } .js .vz .vz-alg .vz-chip,.js .vz .vz-mapfoot .vz-chip{ opacity:0; transform:translate3d(0,-10px,0) scale(.92) } .js .vz .vz-bar i{ transform:scaleX(0) } .js .vz .vz-red i{ transform:scaleX(0) } .js .vz .vz-dot{ transform:scale(0); transition:transform .4s cubic-bezier(.34,1.56,.64,1) } .js .vz .vz-badge{ opacity:0; transform:translate(-50%,-130%) scale(.9) } .vz.vz-on .vz-msg,.vz.vz-on .vz-row,.vz.vz-on .vz-sys,.vz.vz-on .vz-note, .vz.vz-on .vz-trow,.vz.vz-on .vz-warnline,.vz.vz-on .vz-srow,.vz.vz-on .vz-irow, .vz.vz-on .vz-mrow,.vz.vz-on .vz-dish,.vz.vz-on .vz-total,.vz.vz-on .vz-dhead, .vz.vz-on .vz-qr,.vz.vz-on .vz-bju > span,.vz.vz-on .vz-alg .vz-chip, .vz.vz-on .vz-mapfoot .vz-chip{ opacity:1; transform:none } .vz.vz-on .vz-bar i{ transform:scaleX(var(--w,0)) } .vz.vz-on .vz-red i{ transform:scaleX(1) } .vz.vz-on .vz-dot{ transform:scale(1) } .vz.vz-on .vz-badge{ opacity:1; transform:translate(-50%,-130%) scale(1) } /* лесенки задержек: у каждой сцены свой темп */ .vz-on[data-vz="buy"] .vz-msg:nth-child(1){ transition-delay:.08s } .vz-on[data-vz="buy"] .vz-msg:nth-child(2){ transition-delay:.34s } .vz-on[data-vz="buy"] .vz-msg:nth-child(3){ transition-delay:.6s } .vz-on[data-vz="buy"] .vz-row{ transition-delay:.92s } .vz-on[data-vz="buy"] .vz-row .vz-chip{ transition:opacity .4s var(--e-reveal) 1.25s } .js .vz[data-vz="buy"] .vz-row .vz-chip{ opacity:0 } .vz.vz-on[data-vz="buy"] .vz-row .vz-chip{ opacity:1 } .vz-on[data-vz="stock"] .vz-srow:nth-child(2){ transition-delay:.08s } .vz-on[data-vz="stock"] .vz-srow:nth-child(3){ transition-delay:.2s } .vz-on[data-vz="stock"] .vz-srow:nth-child(4){ transition-delay:.32s } .vz-on[data-vz="stock"] .vz-srow:nth-child(2) .vz-bar i{ transition-delay:.28s } .vz-on[data-vz="stock"] .vz-srow:nth-child(3) .vz-bar i{ transition-delay:.4s } .vz-on[data-vz="stock"] .vz-srow:nth-child(4) .vz-bar i{ transition-delay:.52s } .vz-on[data-vz="stock"] .vz-row{ transition-delay:1.05s } .vz-on[data-vz="cost"] .vz-dish{ transition-delay:.05s } .vz-on[data-vz="cost"] .vz-irow:nth-child(2){ transition-delay:.18s } .vz-on[data-vz="cost"] .vz-irow:nth-child(3){ transition-delay:.3s } .vz-on[data-vz="cost"] .vz-irow:nth-child(4){ transition-delay:.42s } .vz-on[data-vz="cost"] .vz-total{ transition-delay:.6s } .js .vz[data-vz="cost"] .vz-dish .vz-chip{ opacity:0; transform:scale(.9) } .vz.vz-on[data-vz="cost"] .vz-dish .vz-chip{ opacity:1; transform:none; transition:opacity .4s var(--e-reveal) 1.5s, transform .4s var(--e-reveal) 1.5s } .vz-on[data-vz="money"] .vz-mrow:nth-child(2){ transition-delay:.06s } .vz-on[data-vz="money"] .vz-mrow:nth-child(3){ transition-delay:.18s } .vz-on[data-vz="money"] .vz-mrow:nth-child(4){ transition-delay:.3s } .vz-on[data-vz="money"] .vz-mrow:nth-child(5){ transition-delay:.46s } .vz-on[data-vz="money"] .vz-mrow:nth-child(2) .vz-bar i{ transition-delay:.22s } .vz-on[data-vz="money"] .vz-mrow:nth-child(3) .vz-bar i{ transition-delay:.34s } .vz-on[data-vz="money"] .vz-mrow:nth-child(4) .vz-bar i{ transition-delay:.46s } .vz-on[data-vz="money"] .vz-mrow:nth-child(5) .vz-bar i{ transition-delay:.62s } .vz-on[data-vz="money"] .vz-note{ transition-delay:1.2s } .vz-on[data-vz="hall"] .vz-dot:nth-of-type(1){ transition-delay:.15s } .vz-on[data-vz="hall"] .vz-dot:nth-of-type(2){ transition-delay:.27s } .vz-on[data-vz="hall"] .vz-dot:nth-of-type(3){ transition-delay:.39s } .vz-on[data-vz="hall"] .vz-dot:nth-of-type(4){ transition-delay:.51s } .vz-on[data-vz="hall"] .vz-dot:nth-of-type(5){ transition-delay:.63s } .vz-on[data-vz="hall"] .vz-badge{ transition-delay:.85s } .vz-on[data-vz="hall"] .vz-mapfoot .vz-chip:nth-child(1){ transition-delay:1.05s } .vz-on[data-vz="hall"] .vz-mapfoot .vz-chip:nth-child(2){ transition-delay:1.18s } .vz-on[data-vz="staff"] .vz-trow:nth-child(2){ transition-delay:.08s } .vz-on[data-vz="staff"] .vz-trow:nth-child(3){ transition-delay:.22s } .vz-on[data-vz="staff"] .vz-trow:nth-child(4){ transition-delay:.36s } .js .vz[data-vz="staff"] .vz-time{ opacity:0; transform:scale(.94) } .vz.vz-on[data-vz="staff"] .vz-time{ opacity:1; transform:none } .vz-on[data-vz="staff"] .vz-trow:nth-child(2) .vz-time{ transition-delay:.5s } .vz-on[data-vz="staff"] .vz-trow:nth-child(3) .vz-time{ transition-delay:.64s } .vz-on[data-vz="staff"] .vz-trow:nth-child(4) .vz-time{ transition-delay:.78s } .vz-on[data-vz="book"] .bt.t1{ transition-delay:.12s } .vz-on[data-vz="book"] .bt.t2{ transition-delay:.26s } .vz-on[data-vz="book"] .bt.t3{ transition-delay:.4s } .vz-on[data-vz="book"] .vz-row{ transition-delay:.95s } .js .vz[data-vz="book"] .vz-row .vz-chip{ opacity:0; transform:scale(.88) } .vz.vz-on[data-vz="book"] .vz-row .vz-chip{ opacity:1; transform:none; transition:opacity .4s var(--e-reveal) 1.3s, transform .4s var(--e-reveal) 1.3s } .vz-on[data-vz="guest"] .vz-dhead{ transition-delay:.05s } .vz-on[data-vz="guest"] .vz-bju > span:nth-child(1){ transition-delay:.2s } .vz-on[data-vz="guest"] .vz-bju > span:nth-child(2){ transition-delay:.3s } .vz-on[data-vz="guest"] .vz-bju > span:nth-child(3){ transition-delay:.4s } .vz-on[data-vz="guest"] .vz-alg .vz-chip:nth-child(1){ transition-delay:.58s } .vz-on[data-vz="guest"] .vz-alg .vz-chip:nth-child(2){ transition-delay:.7s } .vz-on[data-vz="guest"] .vz-warnline{ transition-delay:1.15s } .vz-on[data-vz="guest"] .vz-qr{ transition-delay:1.35s } .vz-on[data-vz="redact"] .vz-msg:nth-child(1){ transition-delay:.08s } .vz-on[data-vz="redact"] .vz-red i{ transition-delay:.75s } .vz-on[data-vz="redact"] .vz-sys{ transition-delay:1.15s } .vz-on[data-vz="redact"] .vz-msg.is-me{ transition-delay:1.5s } /* ═══════════════ МОДУЛИ: текст слева, живой экран справа ═══════════════ */ @media (min-width:1080px){ .page-modules .mrow-in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(36px,5vw,96px); } .page-modules .mlist{ grid-template-columns:1fr; margin-top:24px; max-width:46ch } .page-modules .mviz{ max-width:560px; justify-self:end } /* чётные модули — экран слева: разворот дышит, а не марширует */ .page-modules .mrow:nth-of-type(even) .mviz{ order:-1; justify-self:start } } @media (max-width:1079px){ .page-modules .mviz{ margin-top:28px; max-width:560px } } /* ═══════════════ «КАК УСТРОЕНО»: дорисовки схем ═══════════════ */ /* панель «связь внутри» не тянется на всю колонку — экрану идёт ширина экрана */ @media (min-width:940px){ .page-how .mviz{ max-width:560px; justify-self:end } } /* провода «одной камеры» рисуются один раз, когда схема доехала */ .js .vz .flow-wires path{ stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset 1.1s var(--e-reveal) .15s; } .vz.vz-on .flow-wires path{ stroke-dashoffset:0 } .flow-src,.flow-card{ transition:opacity .5s var(--e-reveal), transform .5s var(--e-reveal) } .js .vz .flow-src{ opacity:0; transform:translate3d(-14px,0,0) } .js .vz .flow-card{ opacity:0; transform:translate3d(14px,0,0) } .vz.vz-on .flow-src,.vz.vz-on .flow-card{ opacity:1; transform:none } .vz-on .flow-card:nth-child(1){ transition-delay:.5s } .vz-on .flow-card:nth-child(2){ transition-delay:.66s } .vz-on .flow-card:nth-child(3){ transition-delay:.82s } /* приватность: кадры находятся, наружу уходят только числа */ .pf,.privbox-tag{ transition:opacity .45s var(--e-micro), transform .45s var(--e-reveal) } .js .vz .pf{ opacity:0; transform:scale(.7) } .vz.vz-on .pf{ opacity:1; transform:none } .vz-on .pf-a{ transition-delay:.15s } .vz-on .pf-b{ transition-delay:.33s } .vz-on .pf-c{ transition-delay:.51s } .privbox-wire{ transform-origin:top; transition:transform .5s var(--e-reveal) .75s } .js .vz .privbox-wire{ transform:scaleY(0) } .vz.vz-on .privbox-wire{ transform:scaleY(1) } .privbox-nums .num{ transition:opacity .45s var(--e-reveal), transform .45s var(--e-reveal) } .js .vz .privbox-nums .num{ opacity:0; transform:translate3d(0,-10px,0) } .vz.vz-on .privbox-nums .num{ opacity:1; transform:none } .vz-on .privbox-nums .num:nth-child(1){ transition-delay:1.05s } .vz-on .privbox-nums .num:nth-child(2){ transition-delay:1.18s } .vz-on .privbox-nums .num:nth-child(3){ transition-delay:1.31s } /* цепочка «кто отвечает» загорается по очереди */ .chain-i{ transition:opacity .5s var(--e-reveal), transform .5s var(--e-reveal) } .js .vz .chain-i{ opacity:0; transform:translate3d(0,14px,0) } .vz.vz-on .chain-i{ opacity:1; transform:none } .vz-on .chain-i:nth-child(2){ transition-delay:.22s } .vz-on .chain-i:nth-child(3){ transition-delay:.44s } /* ═══════════════ ПОСТАВЩИКУ: лента заказов и калькулятор ═══════════════ */ .page-suppliers .tiles-2{ margin-top:0 } @media (min-width:900px){ .page-suppliers .tiles-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } } .vz-feed{ align-self:center } .vz-frow{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); font-size:13.5px; } .vz-frow b{ font-weight:600; display:block; line-height:1.25; font-size:14px } .vz-frow > div{ min-width:0 } /* статус заказа перещёлкивается: старый уезжает вверх, новый встаёт */ .vz-st{ margin-left:auto; position:relative; display:inline-grid; text-align:right } .vz-st span{ grid-area:1/1; white-space:nowrap; justify-self:end; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; transition:opacity .4s var(--e-micro), transform .4s var(--e-micro); } .vz-st .st-a{ background:rgba(255,255,255,.07); color:var(--muted); border:1px solid rgba(255,255,255,.1) } .vz-st .st-b{ background:rgba(63,211,162,.13); color:var(--acc-lit); border:1px solid rgba(63,211,162,.28) } .vz-st .st-b.is-way{ background:var(--acc-soft); color:var(--acc-lit); border-color:var(--acc-edge) } .js .vz .vz-st .st-b{ opacity:0; transform:translate3d(0,9px,0) } .vz.vz-on .vz-st .st-a, html:not(.js) .vz-st .st-a{ opacity:0; transform:translate3d(0,-9px,0) } .vz.vz-on .vz-st .st-b{ opacity:1; transform:none } .vz-frow{ transition:opacity .5s var(--e-reveal), transform .5s var(--e-reveal) } .js .vz .vz-frow{ opacity:0; transform:translate3d(0,12px,0) } .vz.vz-on .vz-frow{ opacity:1; transform:none } .vz-on[data-vz="feed"] .vz-frow:nth-child(2){ transition-delay:.08s } .vz-on[data-vz="feed"] .vz-frow:nth-child(3){ transition-delay:.2s } .vz-on[data-vz="feed"] .vz-frow:nth-child(4){ transition-delay:.32s } .vz-on[data-vz="feed"] .vz-frow:nth-child(2) .vz-st span{ transition-delay:.75s } .vz-on[data-vz="feed"] .vz-frow:nth-child(3) .vz-st span{ transition-delay:.95s } .vz-on[data-vz="feed"] .vz-frow:nth-child(4) .vz-st span{ transition-delay:1.15s } .vz-fsum{ display:flex; align-items:baseline; gap:8px; padding-top:4px; font-size:13px; color:var(--muted); transition:opacity .5s var(--e-reveal) 1.4s; } .js .vz .vz-fsum{ opacity:0 } .vz.vz-on .vz-fsum{ opacity:1 } .vz-fsum .num{ margin-left:auto; font-size:19px; font-weight:700; color:var(--ink) } /* ═══════════════ КАК НАЧАТЬ: виньетки шагов ═══════════════ */ .step-viz{ margin-top:18px; display:grid; gap:9px } /* шаг 1: код входа набирается */ .vz-otp{ display:flex; gap:8px; align-items:center } .vz-otp b{ width:40px; height:48px; display:grid; place-items:center; border-radius:12px; font:600 20px/1 "Space Grotesk", Manrope, sans-serif; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--ink); transition:opacity .35s var(--e-reveal), transform .45s cubic-bezier(.34,1.56,.64,1); } .vz-otp .ic{ width:20px; height:20px; color:var(--acc-lit); margin-left:4px; transition:opacity .35s var(--e-micro), transform .4s var(--e-reveal) } .js .vz .vz-otp b{ opacity:0; transform:translate3d(0,10px,0) scale(.8) } .vz.vz-on .vz-otp b{ opacity:1; transform:none } .js .vz .vz-otp .ic{ opacity:0; transform:scale(.5) } .vz.vz-on .vz-otp .ic{ opacity:1; transform:none } .vz-on[data-vz="otp"] .vz-otp b:nth-child(2){ transition-delay:.14s } .vz-on[data-vz="otp"] .vz-otp b:nth-child(3){ transition-delay:.28s } .vz-on[data-vz="otp"] .vz-otp b:nth-child(4){ transition-delay:.42s } .vz-on[data-vz="otp"] .vz-otp .ic{ transition-delay:.68s } /* шаг 2: файл разбирается в строки каталога */ .vz-filechip{ display:inline-flex; align-items:center; gap:8px; justify-self:start; padding:7px 12px; border-radius:11px; font-size:13px; font-weight:600; background:var(--acc-soft); border:1px solid var(--acc-edge); color:var(--acc-lit); transition:opacity .4s var(--e-reveal), transform .4s var(--e-reveal); } .vz-filechip .ic{ width:15px; height:15px } .vz-frows{ display:grid; gap:6px } .vz-frows > span{ display:flex; justify-content:space-between; gap:10px; padding:7px 11px; border-radius:10px; font-size:12.5px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:var(--muted); transition:opacity .4s var(--e-reveal), transform .4s var(--e-reveal); } .vz-frows .num{ color:var(--ink) } .js .vz .vz-filechip{ opacity:0; transform:translate3d(-10px,0,0) } .vz.vz-on .vz-filechip{ opacity:1; transform:none } .js .vz .vz-frows > span{ opacity:0; transform:translate3d(10px,0,0) } .vz.vz-on .vz-frows > span{ opacity:1; transform:none } .vz-on[data-vz="file"] .vz-frows > span:nth-child(1){ transition-delay:.3s } .vz-on[data-vz="file"] .vz-frows > span:nth-child(2){ transition-delay:.44s } .vz-on[data-vz="file"] .vz-frows > span:nth-child(3){ transition-delay:.58s } /* шаг 3: камера видит зал */ .vz-cam svg{ width:100%; height:auto; display:block } .vz-cam .c-body{ fill:none; stroke:rgba(234,243,239,.5); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round } .vz-cam .c-cone{ fill:rgba(63,211,162,.12); stroke:rgba(63,211,162,.35); stroke-width:1; transition:opacity .6s var(--e-micro) .25s } .vz-cam .c-dot{ fill:var(--acc-lit); stroke:rgba(255,255,255,.8); stroke-width:1.6; transform-box:fill-box; transform-origin:center; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s var(--e-micro) } .vz-cam .c-lab{ fill:var(--acc-lit); font:600 11px/1 Manrope, sans-serif; transition:opacity .4s var(--e-micro) .95s } .js .vz .vz-cam .c-cone{ opacity:0 } .vz.vz-on .vz-cam .c-cone{ opacity:1 } .js .vz .vz-cam .c-dot{ opacity:0; transform:scale(0) } .vz.vz-on .vz-cam .c-dot{ opacity:1; transform:scale(1) } .vz-on[data-vz="cam"] .c-dot.d1{ transition-delay:.55s } .vz-on[data-vz="cam"] .c-dot.d2{ transition-delay:.7s } .js .vz .vz-cam .c-lab{ opacity:0 } .vz.vz-on .vz-cam .c-lab{ opacity:1 } /* ═══════════════ ВОПРОСЫ: ответ раскрывается, а не выпрыгивает ═══════════════ */ @supports (interpolate-size: allow-keywords){ .page-start{ interpolate-size:allow-keywords } } .faq-i::details-content{ opacity:0; block-size:0; overflow:clip; transition:block-size .34s var(--e-reveal), opacity .26s var(--e-micro), content-visibility .34s allow-discrete; } .faq-i[open]::details-content{ opacity:1; block-size:auto } /* ═══════════════ ИНДЕКС МОДУЛЯ: контурная цифра-анкер ═══════════════ Маленькое «01» рядом с иконкой стало типографским якорем разворота. Это статика: вес страницы делает шрифт, а не анимация. */ @supports ((-webkit-text-stroke:1px red) or (text-stroke:1px red)){ .page-modules .mrow-n b,.page-how .mrow-n b{ font-family:var(--disp); font-weight:700; font-size:clamp(34px,3.2vw,52px); line-height:.9; letter-spacing:0; color:transparent; -webkit-text-stroke:1.3px rgba(234,243,239,.30); } .paper .mrow-n b{ -webkit-text-stroke-color:rgba(13,26,21,.28) } .warm .mrow-n b{ -webkit-text-stroke-color:rgba(36,28,11,.26) } } /* число паспорта, набранное счётчиком: единица измерения — отдельным словом */ .pass-n b{ font:inherit } .pass-u{ font-size:.62em; font-weight:600; letter-spacing:0 } /* ═══════════════ узкий экран ═══════════════ */ @media (max-width:640px){ .vz-srow{ grid-template-columns:minmax(72px,auto) 1fr auto; gap:9px; font-size:13px } .vz-mrow{ grid-template-columns:minmax(76px,auto) 1fr auto; gap:9px; font-size:12.5px } .vz-mrow .num{ font-size:13px } .vz-bju{ gap:6px } .vz-otp b{ width:36px; height:44px; font-size:18px } } /* ═══════════════ меньше движения ═══════════════ */ @media (prefers-reduced-motion: reduce){ .mviz .vz-panel{ transition:none } .vz *,.vz .flow-wires path,.vz .privbox-wire{ transition:none !important } }