/* glavnaya — сквозная главная: герой-оригами «Бумага» (из g9_origami/geroy.css, без изменений вида) + плёнка сцен, переход «0%» и сцена «Условия» (из v4_svod/v4.css, коммит 314f860). Режим плёнки (.film-on ставит kino.js): одна сцена на экран, смена — одним щелчком колеса / свайпом / клавишей. Без JS и при prefers-reduced-motion — обычная лента: все сцены подряд, в конце подвал. */ :root { --bg: #F6F8FC; /* фон чертежа (v2) */ --bg-2: #F5F7FC; --ink: #0D1324; --soft: #4B556B; /* контраст 7,4 на белом */ --mute: #6A7387; /* служебные подписи: 4,8 */ --hair: #DDE3EE; --blue: #3B7BF6; /* фирменный — только кнопки, логотип, акцент заголовка */ --blue-d: #2C64D8; --blue-l: #EEF4FF; /* цвета событий (частицы и подписи; тёмные варианты — для текста, контраст ≥ 4,5) */ --c-ord: #F2674F; --c-ord-d: #C2412D; --c-pay: #1DAA62; --c-pay-d: #0E7A43; --c-cli: #8A63F2; --c-cli-d: #6440D8; --c-bok: #E4A321; --c-bok-d: #9A6400; --grid: rgba(59, 123, 246, .075); --grid2: rgba(59, 123, 246, .035); --f-big: 'Unbounded', 'Onest', system-ui, sans-serif; --f-cifry: 'Onest', system-ui, sans-serif; /* цены: у Unbounded ноль — плоский овал, Юре кажется «срезанным» (08.10) */ --f-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --gut: 64px; --head: 68px; --fs: min(7.6vw, 11.2vh, 112px); --ease: cubic-bezier(.16, 1, .3, 1); --ease2: cubic-bezier(.65, 0, .2, 1); /* цвета сцены «Условия» (v4) */ --green: #16A34A; --green-d: #15803D; --green-l: #E8F7EE; --coral: #FF6B4A; --coral-d: #C73E22; --coral-l: #FFEEE8; --yellow: #FFD84D; --violet: #7C5CFA; --violet-d: #6246D8; --violet-l: #F0ECFF; --blue-l2: #EAF1FF; --grad-money: linear-gradient(100deg, #15803D 0%, #16A34A 30%, #22B07A 55%, #3B7BF6 100%); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; background-color: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid2) 1px, transparent 1px), linear-gradient(90deg, var(--grid2) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; } a { color: inherit; } p, h1, h2, ul { margin: 0; padding: 0; } .wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); } .mono { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } /* ---------- шапка (v1) ---------- */ .top { position: fixed; left: 0; right: 0; top: 0; z-index: 20; height: var(--head); background: rgba(255, 255, 255, .92); border-bottom: 1px solid rgba(221, 227, 238, .7); } .top-in { height: 100%; display: flex; align-items: center; } .logo { font: 600 22px/1 var(--f-big); letter-spacing: -.03em; text-decoration: none; margin-right: 48px; } .logo .dot, .title .dot { color: var(--blue); } .nav { display: flex; flex: 1; } .nav a { font-size: 15px; color: var(--soft); text-decoration: none; padding: 12px 14px; white-space: nowrap; } @media (max-width: 1320px) { .logo { margin-right: 28px; } .nav a { padding: 12px 10px; } } .nav a:hover { color: var(--ink); } .top-act { display: flex; align-items: center; margin-left: auto; } .login { font-size: 15px; color: var(--ink); text-decoration: none; padding: 12px 16px; margin-right: 6px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 16px/1 var(--f-text); text-decoration: none; transition: background .3s var(--ease), transform .3s var(--ease); } .btn:hover { background: var(--blue-d); } .btn:active { transform: scale(.98); } .btn-s { min-height: 44px; padding: 0 20px; font-size: 15px; } .btn .short { display: none; } /* ---------- герой ---------- */ .hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; } .hero-in { position: relative; z-index: 3; padding-top: calc(var(--head) + 4.2vh); transform-origin: 50% 0; } .kicker { margin-bottom: 2.4vh; min-height: 1.2em; } .title { font: 340 var(--fs)/0.98 var(--f-big); letter-spacing: -.045em; margin: 0; } .title .ln { display: block; position: relative; padding-bottom: .02em; } .title .in { display: inline-block; white-space: nowrap; } .title .acc { color: var(--blue); } .under-cv { position: absolute; left: 0; bottom: -.08em; height: .2em; width: 10px; pointer-events: none; } .hero-foot { margin-top: 3.2vh; max-width: 600px; } .sub { font-size: 18px; line-height: 1.55; color: var(--soft); } .cta { display: flex; align-items: center; margin-top: 3vh; } .link { margin-left: 26px; font-weight: 500; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--hair); } .link:hover { border-color: var(--ink); } .trust { margin-top: 2.6vh; font-size: 11px; } .trust span + span::before { content: '/'; margin: 0 .9em; color: var(--blue); } /* скрытие «до появления» — только с JS; без JS и при reduce всё видно */ .js .title .in { transform: translateY(108%); } .js .title .ln { clip-path: inset(-12% -100vw -18% -100vw); } .js #kicker, .js .hero-foot { opacity: 0; } .shown .title .in, .shown #kicker, .shown .hero-foot { transform: none !important; opacity: 1 !important; } /* ---------- фон: пол в перспективе (v2); точка схода — под листом (--vx ставит JS) ---------- */ .floor { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 40%; max-height: 380px; overflow: hidden; perspective: 520px; perspective-origin: var(--vx, 50%) 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70%); mask-image: linear-gradient(to bottom, transparent 0, #000 70%); pointer-events: none; } .floor-plane { position: absolute; left: -60%; right: -60%; top: 0; height: 240%; transform-origin: 50% 0; transform: rotateX(72deg); overflow: hidden; } /* сетка медленно уходит вдаль — к листу */ .floor-plane::before { content: ''; position: absolute; left: 0; right: 0; top: -80px; bottom: 0; background-image: linear-gradient(rgba(59, 123, 246, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 123, 246, .2) 1px, transparent 1px); background-size: 80px 80px; animation: floorRun 7s linear infinite; } @keyframes floorRun { from { transform: translate3d(0, 80px, 0); } to { transform: translate3d(0, 0, 0); } } .hero.off .floor-plane::before { animation-play-state: paused; } /* ---------- оригами: холст на весь герой под текстом; место формы считает JS по свободному месту справа ---------- */ .scena { position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; } .scena canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .hero.ori .floor { display: none; } /* подпись формы: моно, перебор букв (текст ставит JS) */ .ori-cap { position: absolute; left: 0; top: 0; margin: 0; display: flex; align-items: center; white-space: pre; font-size: 13px; letter-spacing: .16em; color: var(--ink); } .ori-cap::before { content: ''; flex: none; width: 22px; height: 1px; background: var(--blue); margin-right: 12px; } .ori-cap:empty { display: none; } /* ================= ПЛАНШЕТ / ТЕЛЕФОН ================= */ @media (max-width: 1100px) { :root { --gut: 32px; } .nav { display: none; } .hero { height: auto; min-height: 0; padding-bottom: 44px; } /* оригами — под текстом, в потоке, во всю ширину (пол от края до края); высоту ставит JS по ширине */ .scena { position: relative; left: auto; top: auto; right: auto; bottom: auto; height: 62vw; max-height: 560px; margin: 8px 0 0; } } @media (max-width: 720px) { :root { --gut: 16px; --head: 58px; --fs: min(10.6vw, 8vh, 56px); } body { font-size: 16px; } .logo { font-size: 20px; margin-right: 0; } .login { padding: 12px 10px; margin-right: 2px; } .btn .long { display: none; } .btn .short { display: inline; } .btn-s { padding: 0 18px; } .kicker { font-size: 11px; margin-bottom: 14px; } .title { letter-spacing: -.05em; } .hero-foot { margin-top: 18px; } .sub { font-size: 15px; line-height: 1.5; } .cta { margin-top: 16px; } .cta .btn { flex: none; padding: 0 22px; font-size: 15px; white-space: nowrap; } .link { margin-left: 18px; font-size: 15px; } .trust { display: none; } .scena { margin-top: 4px; } .ori-cap { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .js .title .in, .js #kicker, .js .hero-foot { transform: none !important; opacity: 1 !important; } .floor-plane::before { animation: none; } * { transition: none !important; } } /* ===================================================================================== ПЛЁНКА СЦЕН + ПЕРЕХОД «0%» + СЦЕНА «УСЛОВИЯ» — из v4_svod/v4.css (314f860) ===================================================================================== */ .film { position: relative; } .stage { position: relative; } .layer { position: relative; } .hud, .zero, .g-grid, .pol { display: none; } /* ---------- сцена 2: условия (v1/v4) ---------- */ .facts { padding: 120px 0 100px; position: relative; z-index: 1; } .facts-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } .facts-head .kicker { order: 2; margin: 0 0 10px; color: var(--blue-d); } .h2 { position: relative; font: 460 clamp(30px, 3.6vw, 52px)/1.1 var(--f-big); letter-spacing: -.04em; max-width: 16em; } .h2 .mk { background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-position: 0 86%; background-size: 100% 38%; padding: 0 .06em; margin: 0 -.06em; } .caret { display: none; } .grid { position: relative; display: flex; flex-wrap: wrap; } .grid-cv { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); pointer-events: none; z-index: 1; } .cell { width: 50%; padding: 24px 24px 28px 0; position: relative; --c: var(--green-d); --cl: var(--green-l); } .cell.c2 { --c: var(--blue-d); --cl: var(--blue-l2); } .cell.c3 { --c: var(--coral-d); --cl: var(--coral-l); } .cell.c4 { --c: var(--violet-d); --cl: var(--violet-l); } .cell.c1, .cell.c3 { padding-left: 28px; } .cell.c2, .cell.c4 { padding-left: 44px; } .cell > * { position: relative; } .tint { position: absolute !important; left: 8px; right: 8px; top: 8px; bottom: 8px; border-radius: 16px; background: var(--cl); opacity: .75; } .lab { color: var(--c); } .num { font: 650 min(5.4vw, 12vh, 132px)/1 var(--f-big); letter-spacing: -.05em; margin: 10px 0 12px; white-space: nowrap; color: var(--c); } .num small { font-size: .42em; font-weight: 500; letter-spacing: -.02em; color: var(--soft); } .num .sc, .num .n0 { display: inline-block; position: relative; } .n0 { color: var(--green-d); background-image: var(--grad-money); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .04em; } .cur-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .06em; margin: 0 -.04em; } .num .fl { display: inline-block; } .txt { font-size: 17px; color: var(--soft); max-width: 420px; } /* калькулятор «Сколько вы оставите себе» (логика — lp3/js/v3.js боевого лендинга; считает kino.js) — справа от плиток */ .facts-body { display: flex; align-items: stretch; } .facts-body .grid { flex: 1 1 58%; min-width: 0; align-content: stretch; } .calc { --c: var(--blue-d); flex: 0 0 40%; min-width: 0; margin: 8px 0 8px 2%; padding: 22px 26px 18px; display: flex; flex-direction: column; position: relative; z-index: 2; border-radius: 16px; background: rgba(255, 255, 255, .92); border: 1px solid var(--hair); } .calc-head .lab { margin: 0 0 6px; } .calc-h { font: 500 clamp(20px, 1.55vw, 40px)/1.15 var(--f-big); letter-spacing: -.035em; margin: 0 0 14px; } .calc-in { display: grid; row-gap: 10px; margin-bottom: 12px; } .rng-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 4px; cursor: pointer; } .rng-l { font-size: 15px; color: var(--soft); } .rng-o { font: 600 clamp(18px, 1.25vw, 32px)/1 var(--f-big); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; } .rng { grid-column: 1 / -1; width: 100%; height: 26px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: none; --p: 10%; } /* touch-action: тянуть ползунок пальцем — не свайп сцены */ .rng:focus { outline: none; } .rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) var(--p), var(--hair) var(--p)); } .rng::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 1px 4px rgba(13, 19, 36, .18); transition: transform .2s var(--ease); } .rng:active::-webkit-slider-thumb { transform: scale(1.12); } .rng:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(59, 123, 246, .25); } .rng::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hair); } .rng::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--blue); } .rng::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 1px 4px rgba(13, 19, 36, .18); } .calc-row { display: flex; align-items: baseline; font-size: 15px; line-height: 1.35; color: var(--soft); padding: 4px 0; } .calc-row i { flex: 1; min-width: 12px; margin: 0 10px; border-bottom: 1px dotted #BFC9DC; transform: translateY(-4px); } .calc-row b { font: 600 clamp(15px, 1.05vw, 26px)/1.2 var(--f-big); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; } .calc-row.c-zero b { color: var(--green-d); } .calc-net { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hair); } .calc-net span { display: block; font-size: 14px; color: var(--soft); } .calc-net b { display: block; font: 650 min(2.3vw, 5vh, 64px)/1.12 var(--f-big); letter-spacing: -.04em; white-space: nowrap; padding: 2px .06em 4px 0; color: var(--green-d); background-image: var(--grad-money); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .calc-pair { display: flex; margin-top: 10px; } .calc-mini { flex: 1 1 0; min-width: 0; border-radius: 12px; padding: 9px 12px 10px; background: var(--violet-l); } .calc-mini + .calc-mini { margin-left: 10px; background: var(--coral-l); } .calc-mini span { display: block; font-size: 13px; line-height: 1.35; color: var(--soft); } .calc-mini b { display: block; margin-top: 4px; font: 600 clamp(15px, 1.1vw, 28px)/1.15 var(--f-big); letter-spacing: -.02em; white-space: nowrap; } .c-rep b { color: var(--violet-d); } .c-pay b { color: var(--coral-d); } .calc-note { margin-top: auto; padding-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--mute); } /* ================= РЕЖИМ ПЛЁНКИ ================= */ .film-on .film { height: 100vh; } .film-on .stage { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg); } .film-on .layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .film-on .hero { height: auto; min-height: 0; z-index: 2; } .film-on .g-grid { display: block; position: absolute; left: 0; right: 0; top: -120px; bottom: -120px; z-index: 0; will-change: transform; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid2) 1px, transparent 1px), linear-gradient(90deg, var(--grid2) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; } /* пол плёнки: свой холст, линии рисует kino.js по модели перспективы (точка схода, наклон, клетка, маска) — в герое он совпадает с полом холста оригами, в «Условиях» — как пол v4 */ .film-on .pol { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; } .pol canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .film-on .facts { padding: var(--head) 0 44px; display: flex; align-items: center; visibility: hidden; } .film-on .facts-in { width: 100%; transform-origin: 50% 50%; } .film-on .caret { display: inline-block; width: .06em; height: .9em; margin-left: .04em; vertical-align: -.08em; background: var(--blue); } .film-on .ty .tc { visibility: hidden; } .film-on .ty .tc.on { visibility: inherit; } /* не visible: иначе буквы «Условий» невидимо лежат поверх кабинета и забирают нажатия */ /* разрез строки заголовка героя на половины (ставит kino.js): верх и низ — две копии с обрезкой, едут в разные стороны */ .split .in.a { -webkit-clip-path: inset(-20% -3% 49% -3%); clip-path: inset(-20% -3% 49% -3%); } .split .in.b { position: absolute; left: 0; top: 0; -webkit-clip-path: inset(51% -3% -20% -3%); clip-path: inset(51% -3% -20% -3%); } /* копия строки для разреза — только картинка: при копировании заголовок не двоится («Так выглядитТак выглядит») */ /* в копии нет текстовых узлов (kino.js ghostCopy): буквы — из data-t, в DOM и поиске заголовок один раз */ .in.b [data-t]::before { content: attr(data-t); } .in.b, .zero { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .film-on .title .ln.split { -webkit-clip-path: none; clip-path: none; } /* служебная полоса: сцена, путь по сценам (засечки — границы сцен), таймкод */ .film-on .hud { display: flex; align-items: center; position: absolute; left: var(--gut); right: var(--gut); bottom: 18px; z-index: 6; font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; color: var(--mute); pointer-events: none; } .hud-bar { flex: 1; height: 1px; background: var(--hair); margin: 0 18px; position: relative; } .hud-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, var(--blue), var(--green) 50%, var(--violet)); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } /* свой слой сразу: иначе первая смена шкалы пересобирает слои (подвисание ~200 мс) */ .hud-bar b { position: absolute; top: -3px; width: 1px; height: 7px; background: var(--mute); opacity: .55; } .hud-tc { font-variant-numeric: tabular-nums; } @media (min-width: 1500px) { .film-on .hud { left: calc(50% - 656px); right: calc(50% - 656px); } } /* гигантское «0%» */ .film-on .zero { display: block; pointer-events: none; z-index: 3; } .zero-box { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; will-change: transform; } .zero-in { position: absolute; left: 0; top: 0; line-height: 1; white-space: nowrap; transform: translate(-50%, -50%); will-change: transform, opacity; } .z { display: block; font-family: var(--f-big); font-weight: 200; letter-spacing: -.05em; } .z-out { color: transparent; -webkit-text-stroke: 2px var(--ink); } .z-fill { position: absolute; left: 0; top: 0; color: var(--green-d); background-image: var(--grad-money); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); padding-right: .04em; } .zero-cap { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; font-size: 12px; color: var(--green-d); } @media (max-width: 1100px) { .film-on .hero { bottom: auto; } .facts-body { display: block; } .num { font-size: min(7vw, 9vh, 96px); } .calc { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 28px; align-items: start; } .calc-head, .calc-in { grid-column: 1; } .calc-out { grid-column: 2; grid-row: 1 / span 3; } .calc-note { grid-column: 1; margin-top: 0; } .calc-net b { font-size: min(3.6vw, 34px); } } @media (max-width: 720px) { .facts { padding: 80px 0 60px; } .facts-head { display: block; margin-bottom: 18px; } .facts-head .kicker { margin-bottom: 10px; } .h2 { font-size: 27px; } .cell, .cell.c1, .cell.c2, .cell.c3, .cell.c4 { width: 50%; padding: 11px 9px 12px 11px; } .tint { left: 2px; right: 2px; top: 3px; bottom: 3px; border-radius: 12px; } .lab { font-size: 10px; margin-bottom: 2px; } .num { font-size: min(8vw, 34px); margin: 4px 0 6px; } .txt { font-size: 12.5px; line-height: 1.38; } .calc { display: block; margin-top: 10px; padding: 12px 14px 10px; border-radius: 12px; } .calc-head .lab { display: none; } .calc-h { font-size: 17px; margin: 0 0 6px; } .calc-in { display: flex; margin-bottom: 4px; } .rng-row { flex: 1 1 0; min-width: 0; row-gap: 0; } .rng-row + .rng-row { margin-left: 16px; } .rng-l { font-size: 12.5px; } .rng-o { font-size: 15px; } .rng { height: 30px; } .calc-row { font-size: 12.5px; padding: 1px 0; } .calc-row i { margin: 0 6px; } .calc-row b { font-size: 13px; } .calc-net { margin-top: 4px; padding-top: 5px; } .calc-net span { font-size: 12px; } .calc-net b { font-size: min(6.2vw, 26px); } .calc-pair { margin-top: 6px; } .calc-mini { padding: 6px 9px 7px; border-radius: 10px; } .calc-mini + .calc-mini { margin-left: 6px; } .calc-mini span { font-size: 10.5px; } .calc-mini b { font-size: 13px; margin-top: 2px; } .calc-note { font-size: 10.5px; line-height: 1.35; padding-top: 6px; } .film-on .hud { bottom: 12px; font-size: 9.5px; } .hud-bar { margin: 0 10px; } .z-out { -webkit-text-stroke-width: 1.5px; } .zero-cap { font-size: 11px; padding: 0 24px; } } /* ---------- «Условия» на больших мониторах (Юра: «используй пространство», смотрит на ~2460 px): сцена не колонкой 1440 посреди пустоты, а на ~90% ширины; заголовок, цифры, подписи и отступы растут по vw/vh. До 1500 px всё как было. Если по высоте не влезет — kino.js сам ужмёт блок (G.fitF). ---------- */ @media (min-width: 1500px) { .facts .wrap { max-width: none; padding: 0 5vw; } .facts-head { margin-bottom: 3.4vh; } .facts .mono { font-size: clamp(12px, .62vw, 16px); } .h2 { font-size: min(3.6vw, 6.4vh, 104px); max-width: 18em; } .cell { padding: 2.6vh 1.6vw 3vh 0; } .cell.c1, .cell.c3 { padding-left: 1.6vw; } .cell.c2, .cell.c4 { padding-left: 2.4vw; } .tint { left: .5vw; right: .5vw; top: .5vw; bottom: .5vw; border-radius: clamp(16px, 1vw, 26px); } .num { font-size: min(5.4vw, 13vh, 200px); margin: .08em 0 .1em; } .txt { font-size: clamp(17px, .95vw, 26px); max-width: 26em; } .calc { padding: 2.4vh 1.5vw 2vh; border-radius: clamp(16px, 1vw, 26px); } .calc-h { margin-bottom: 1.6vh; } .calc-in { row-gap: 1.3vh; margin-bottom: 1.4vh; } .rng-l, .calc-row { font-size: clamp(15px, .82vw, 22px); } .rng { height: clamp(26px, 1.5vw, 38px); } .rng::-webkit-slider-thumb { width: clamp(22px, 1.2vw, 32px); height: clamp(22px, 1.2vw, 32px); margin-top: calc(2px - clamp(11px, .6vw, 16px)); } .calc-row { padding: .5vh 0; } .calc-net { margin-top: 1vh; padding-top: 1.2vh; } .calc-net span { font-size: clamp(14px, .75vw, 20px); } .calc-pair { margin-top: 1.3vh; } .calc-mini { padding: 1.1vh .8vw 1.2vh; } .calc-mini span { font-size: clamp(13px, .7vw, 18px); } .calc-note { font-size: clamp(12.5px, .62vw, 17px); padding-top: 1.2vh; } } /* ===================================================================================== СЦЕНА 2 — НАСТОЯЩИЕ ВИТРИНЫ (08.10, Юра: «предпросмотр наших демок моб и ПК, и пространство надо использовать»). Слева заголовок, дело и переключатель, справа два окна ОДНОЙ витрины: монитор (?vid=pc) и телефон (?vid=mob). Размеры и место окон считает kino.js (layoutVit) по свободному месту блока .vit-stage; окна создаёт тоже он. Без JS — ссылки-карточки на все восемь демо. ===================================================================================== */ .vit { position: relative; z-index: 2; padding: 110px 0 80px; } .vit-in { display: flex; align-items: center; } .vit-side { flex: 0 0 31%; min-width: 0; padding-right: 2.6vw; position: relative; z-index: 2; } .vit-side .kicker { color: var(--blue-d); margin: 0 0 2.2vh; } .vit-h { font: 460 min(2.75vw, 5.6vh, 100px)/1.08 var(--f-big); letter-spacing: -.04em; max-width: none; } .vit-h .vl { display: block; position: relative; padding-bottom: .03em; } .vit-h .in { display: inline-block; white-space: nowrap; } .vit-h .acc { color: var(--blue); } /* жалюзи (вход сцены): маску-полосы ставит kino.js, здесь — шаг планок */ .vit-h .vl.bl { -webkit-mask-size: 100% .2em; mask-size: 100% .2em; -webkit-mask-repeat: repeat; mask-repeat: repeat; } .vit-sub { margin-top: 2.2vh; font-size: clamp(16px, .95vw, 24px); line-height: 1.5; color: var(--soft); max-width: 25em; } .vit-case { margin-top: 3.6vh; } .vit-no { color: var(--mute); } .vit-name { position: relative; height: 1.22em; margin-top: .9vh; font: 600 min(2.05vw, 4.2vh, 76px)/1.22 var(--f-big); letter-spacing: -.035em; color: var(--ink); } /* смена дела — «склейка-вжик»: прежнее название уезжает влево со скосом и смазом, новое влетает справа */ .vit-name .nm { position: absolute; left: 0; top: 0; white-space: nowrap; transform-origin: 0 60%; transition: transform .6s var(--ease), opacity .45s var(--ease), filter .5s var(--ease); } .vit-name .nm.in-r { transform: translate3d(1.1em, 0, 0) skewX(-18deg); opacity: 0; -webkit-filter: blur(6px); filter: blur(6px); transition: none; } .vit-name .nm.out-l { transform: translate3d(-1.1em, 0, 0) skewX(18deg); opacity: 0; -webkit-filter: blur(6px); filter: blur(6px); } .vit-cn { min-width: 0; } .vit-chips { display: flex; flex-wrap: wrap; margin: 2.2vh -4px 0; } .vit-chip { position: relative; margin: 4px; height: clamp(36px, 2.1vw, 50px); padding: 0 clamp(12px, .8vw, 18px) 0 clamp(26px, 1.6vw, 34px); border-radius: 999px; cursor: pointer; border: 1px solid var(--hair); background: rgba(255, 255, 255, .9); color: var(--soft); font: 500 clamp(14px, .78vw, 20px)/1 var(--f-text); white-space: nowrap; overflow: hidden; transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); -webkit-tap-highlight-color: transparent; } .vit-chip::before { content: ''; position: absolute; left: clamp(12px, .75vw, 16px); top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--t); } .vit-chip:hover { color: var(--ink); border-color: #C5CEDD; } .vit-chip.on { color: var(--ink); border-color: var(--t); background: var(--tl); } .vit-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* полоска до следующего дела (авто-перебор идёт, пока человек не выбрал сам) */ .vit-chip::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--t); transform: scaleX(0); transform-origin: 0 50%; } .vit-chip.on.run::after { -webkit-animation: vitRun 8s linear forwards; animation: vitRun 8s linear forwards; } @-webkit-keyframes vitRun { from { -webkit-transform: scaleX(0); } to { -webkit-transform: scaleX(1); } } @keyframes vitRun { from { transform: scaleX(0); } to { transform: scaleX(1); } } .vit-open-d { margin-top: 3vh; } .vit-open-m { display: none; } .vit-list { display: none; } /* окна */ .vit-stage { flex: 1 1 auto; min-width: 0; position: relative; height: clamp(420px, 44vw, 780px); } .vt { position: absolute; left: 0; top: 0; width: 600px; height: 380px; } .vt-pc { -webkit-transform-origin: 0 0; transform-origin: 0 0; z-index: 1; } .vt-ph { z-index: 2; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .vt-body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; border: 1px solid #D3DAE6; border-radius: 12px; box-shadow: 0 50px 90px -46px rgba(13, 19, 36, .38), 0 2px 10px rgba(13, 19, 36, .06); } .vt-pc .vt-body { display: flex; flex-direction: column; } .vt-bar { flex: none; position: relative; height: 34px; display: flex; align-items: center; padding: 0 .9em; background: #F3F6FB; border-bottom: 1px solid var(--hair); font-size: 12px; } .vt-bar i { flex: none; width: .78em; height: .78em; border-radius: 50%; margin-right: .5em; background: #FF6B4A; } .vt-bar i + i { background: #FFD84D; } .vt-bar i + i + i { background: #16A34A; } .vt-url { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 56%; height: 64%; padding: 0 1.4em; display: flex; align-items: center; border-radius: 999px; background: #fff; border: 1px solid var(--hair); font: 500 1em/1 var(--f-mono); letter-spacing: .02em; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vt-url { display: none !important; } /* Юра 08.10: «скрой адрес страницы» — на всех демо-витринах */ .vt-scr { position: relative; overflow: hidden; background: var(--bg-2); } .vt-pc .vt-scr { flex: 1 1 auto; } .vt-ph .vt-body { border-radius: 40px; border-color: #C9D1DF; background: #fff; } .vt-ph .vt-scr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 30px; -webkit-clip-path: inset(0 round 30px); clip-path: inset(0 round 30px); } /* скругление поверх iframe в Safari */ .vt-if { position: absolute; left: 0; top: 0; border: 0; display: block; -webkit-transform-origin: 0 0; transform-origin: 0 0; background: #fff; opacity: 0; transition: opacity .7s var(--ease); } .vt-scr.ok .vt-if { opacity: 1; } /* заглушка, пока витрина грузится: название дела и скелет страницы */ .vt-sk { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 7% 7% 0; transition: opacity .5s var(--ease); } .vt-scr.ok .vt-sk { opacity: 0; } .vt-sk-n { font: 600 clamp(15px, 1.5vw, 40px)/1.15 var(--f-big); letter-spacing: -.03em; color: var(--ink); } .vt-sk-l { margin-top: .8em; font-size: clamp(10px, .6vw, 14px); color: var(--blue-d); } .vt-sk-l::after { content: ''; display: inline-block; width: 1.6em; height: 1px; margin-left: .8em; vertical-align: middle; background: var(--blue); -webkit-animation: vtDash 1.2s ease-in-out infinite; animation: vtDash 1.2s ease-in-out infinite; } @-webkit-keyframes vtDash { 50% { -webkit-transform: scaleX(.2); } } @keyframes vtDash { 50% { transform: scaleX(.2); } } .vt-sk-g { display: flex; flex-wrap: wrap; margin: 6% -1.5% 0; } .vt-sk-g i { flex: 0 0 30.33%; margin: 1.5%; height: 9vw; max-height: 220px; border-radius: 10px; background: #E9EEF6; -webkit-animation: vtSk 1.6s ease-in-out infinite; animation: vtSk 1.6s ease-in-out infinite; } .vt-ph .vt-sk { padding: 18% 9% 0; } .vt-ph .vt-sk-n { font-size: clamp(13px, .95vw, 24px); } .vt-ph .vt-sk-g i { flex-basis: 97%; height: 4.6vw; max-height: 110px; } /* заглушка «грузим» — плоские плитки дышат прозрачностью (это делает видеокарта без перерисовки). Было: бегущий блик градиентом (background-position) + круглая маска телефона radial-gradient — первая отрисовка слоя витрин с ними стоила 370–430 мс одним кадром (замер 08.10, Chrome, первая загрузка); плитки + clip-path — 50–70 мс */ @-webkit-keyframes vtSk { 50% { opacity: .5; } } @keyframes vtSk { 50% { opacity: .5; } } .vt-glint { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0)); } /* лист, который поднимается из пола и становится экраном (только переход; в покое не виден) */ .vt-paper { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; display: none; } .vt-pf { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 4px; opacity: 0; background-color: #fff; background-image: linear-gradient(rgba(59, 123, 246, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 123, 246, .16) 1px, transparent 1px); background-size: 12.5% 20%, 12.5% 20%; background-position: -1px -1px; } .vt-paper svg { position: absolute; left: 0; top: 0; overflow: visible; } .vt-paper rect { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; } .vt-lab { position: absolute; left: 0; top: 0; font-size: 10.5px; letter-spacing: .12em; white-space: nowrap; color: var(--mute); } .vt-lab::before { content: ''; display: inline-block; width: 18px; height: 1px; margin-right: 9px; vertical-align: middle; background: var(--blue); } /* фокус-окно: по умолчанию прозрачная крышка над витриной — колесо и палец листают сайт; нажали — окно активно (рамка + подпись), крышка снята, листается витрина (kino.js, VT: on / off) */ .vt-lid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vt-lid:focus { outline: none; } .vt-lid:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; } .vt-win.act .vt-lid { display: none; } .vt-win .vt-body { transition: box-shadow .25s var(--ease); } .vt-win.act .vt-body { box-shadow: 0 0 0 2px var(--blue), 0 50px 90px -46px rgba(13, 19, 36, .38), 0 2px 10px rgba(13, 19, 36, .06); } .vt-hint { position: absolute; left: 50%; bottom: 10px; z-index: 3; max-width: 92%; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(13, 19, 36, .78); color: #fff; font-size: 11px; letter-spacing: .06em; opacity: 0; -webkit-transform: translate(-50%, 6px); transform: translate(-50%, 6px); transition: opacity .25s var(--ease), transform .25s var(--ease); } .vt-hint .h-act, .vt-hint .h-tap { display: none; } .vt-win:hover .vt-hint, .vt-lid:focus-visible + .vt-hint, .vt-win.act .vt-hint { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .vt-win.act .vt-hint { background: var(--blue); } .vt-win.act .vt-hint .h-idle { display: none; } .vt-win.act .vt-hint .h-act { display: inline; } .vt-ph .vt-hint { font-size: 10px; padding: 5px 10px; letter-spacing: .04em; bottom: 14px; width: -webkit-max-content; width: max-content; max-width: 86%; white-space: normal; text-align: center; line-height: 1.35; border-radius: 12px; } .vt-ph .vt-hint .h-w { display: none; } /* узкое окно: «Листайте · Esc — выйти» */ /* палец: подсказку «нажмите» видно сразу (наведения нет), выход — нажатием рядом, Esc нет */ @media (hover: none) { .vt-hint { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .vt-hint .h-key { display: none; } .vt-hint .h-tap { display: inline; } } @media (min-width: 1500px) { .vt-hint { font-size: clamp(11px, .55vw, 14px); } } @media (max-width: 720px) { .vt-hint, .vt-ph .vt-hint { bottom: 8px; font-size: 9px; padding: 4px 8px; letter-spacing: .03em; width: -webkit-max-content; width: max-content; max-width: 86%; white-space: normal; text-align: center; line-height: 1.3; border-radius: 10px; } .vt-hint .h-w { display: none; } /* монитор на телефоне наполовину под окном-телефоном — подпись к левому краю */ .vt-pc .vt-hint, .vt-pc.vt-win:hover .vt-hint, .vt-pc.vt-win.act .vt-hint { left: 8px; max-width: 52%; -webkit-transform: none; transform: none; } } /* без JS: окна не показываем — ссылки на демо */ html:not(.js) .vit-in { display: block; } html:not(.js) .vit-side { padding: 0; } html:not(.js) .vit-stage, html:not(.js) .vit-case, html:not(.js) .vit-chips, html:not(.js) .vit-open { display: none; } html:not(.js) .vit-list { display: flex; flex-wrap: wrap; list-style: none; margin: 28px -6px 0; padding: 0; } .vit-list li { flex: 0 0 25%; padding: 6px; } .vit-list a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 14px; background: rgba(255, 255, 255, .9); text-decoration: none; } .vit-list b { display: block; font: 600 17px/1.2 var(--f-big); letter-spacing: -.03em; } .vit-list span { display: block; margin-top: 6px; font-size: 15px; color: var(--soft); } /* режим плёнки */ .film-on .vit { padding: var(--head) 0 46px; display: flex; visibility: hidden; } .film-on .vit-in { width: 100%; height: 100%; padding-top: 2.4vh; padding-bottom: 1.6vh; } .film-on .vit-stage { height: auto; -webkit-align-self: stretch; align-self: stretch; } .film-on .vt-paper { display: block; } @media (min-width: 1500px) { .vit .wrap { max-width: none; padding: 0 5vw; } .vit .mono { font-size: clamp(12px, .62vw, 16px); } .vit .vt-lab { font-size: clamp(10.5px, .55vw, 14px); } } @media (max-width: 1100px) { .vit-in { flex-direction: column; align-items: stretch; } .vit-side { flex: none; padding-right: 0; } .vit-h { font-size: min(4.4vw, 5vh, 48px); } .vit-h .vl { display: inline-block; } .vit-h .vl { margin-right: .28em; } .vit-sub { margin-top: 10px; } .vit-case { margin-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; } .vit-name { font-size: min(3.4vw, 34px); } .vit-open-d { display: none; } .vit-open-m { display: inline-flex; flex: none; margin-left: 16px; } .vit-chips { margin-top: 10px; } .vit-stage { flex: 1 1 auto; min-height: 0; height: 62vw; margin-top: 12px; } .vit-list li { flex-basis: 50%; } /* в плёнке экран один: текст сцены компактный, место — окнам */ .film-on .vit-sub { display: none; } .film-on .vit-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 8px calc(-1 * var(--gut)) 0; padding: 0 calc(var(--gut) - 4px); } .film-on .vit-chips::-webkit-scrollbar { display: none; } .film-on .vit-chip { flex: none; } } @media (max-width: 720px) { .vit { padding: 80px 0 50px; } .vit-side .kicker { margin-bottom: 10px; } .vit-h { font-size: min(6.9vw, 4vh, 30px); } .vit-h .vl { display: block; } .vit-h .vl { margin-right: 0; } .vit-sub { display: none; } .vit-case { margin-top: 10px; } .vit-name { font-size: min(5.2vw, 22px); margin-top: 2px; } .vit-no { font-size: 10.5px; } .vit-open-m { min-height: 44px; padding: 0 16px; font-size: 15px; } /* дела — лентой вбок внутри своей полосы (страница вбок не едет) */ .vit-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 8px calc(-1 * var(--gut)) 0; padding: 0 calc(var(--gut) - 4px); } .vit-chips::-webkit-scrollbar { display: none; } .vit-chip { flex: none; height: 44px; font-size: 15px; } .vit-stage { height: 128vw; margin-top: 10px; } .vt-lab { display: none; } .vit-list li { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .vt-sk-g i, .vt-sk-l::after { -webkit-animation: none; animation: none; } .vit-chip.on.run::after { -webkit-animation: none; animation: none; } } /* ===================================================================================== СЦЕНА 4 — КАБИНЕТ И ЕГО ВОЗМОЖНОСТИ (08.10, Юра: «збс»). Большой кабинет владельца — HTML-макет в духе настоящего cabinet.html (светлый, бело-синий, меню-вкладки слева, рабочая область). Все размеры внутри окна — в em: kino.js ставит окну font-size по его месту на экране (на 1440 ≈ 16 px, на 2560 ≈ 26 px), окно растёт целиком. Режим плёнки (.film-on) — окно на весь экран, одна вкладка видна, мини-демо проигрываются (.kab-live .go). Без JS и при «уменьшить движение» — обычный блок: все вкладки списком, демо в готовом (конечном) виде. ===================================================================================== */ .kab { position: relative; z-index: 1; padding: 100px 0 80px; } .kab-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; } .kab-ht { min-width: 0; } .kab-head .kicker { color: var(--blue-d); margin: 0 0 1.4vh; } .kab-h { font: 460 min(2.75vw, 5.2vh, 100px)/1.1 var(--f-big); letter-spacing: -.04em; max-width: none; } .kab-h .acc { color: var(--blue); } .kab-h .kw { display: inline-block; white-space: nowrap; } .kab-h .kc { display: inline-block; } .kab-sub { flex: 0 1 27em; margin: 0 0 .2em 3vw; font-size: clamp(15px, .9vw, 22px); line-height: 1.5; color: var(--soft); } /* окно кабинета */ .kb { position: relative; font-size: 16px; line-height: 1.4; color: var(--ink); background: #fff; border: 1px solid #D3DAE6; border-radius: 1em; overflow: hidden; box-shadow: 0 50px 90px -46px rgba(13, 19, 36, .38), 0 2px 10px rgba(13, 19, 36, .06); } .kb .mono { font-size: .66em; letter-spacing: .1em; } .kb-bar { display: flex; align-items: center; height: 3.4em; padding: 0 1.3em; border-bottom: 1px solid var(--hair); background: #fff; } .kb-logo { flex: 0 0 calc(13.7em / 1.2); font: 600 1.2em/1 var(--f-big); letter-spacing: -.03em; white-space: nowrap; } .kb-logo .dot { color: var(--blue); } .kb-logo small { margin-left: .9em; font-size: .46em; vertical-align: .25em; } .kb-shop { display: flex; align-items: center; height: 2.4em; padding: 0 .8em 0 .45em; border: 1px solid var(--hair); border-radius: .7em; background: #F7F9FD; font-size: .9em; white-space: nowrap; } .kb-shop-i { position: relative; flex: none; width: 1.55em; height: 1.55em; margin-right: .6em; border-radius: .45em; background: var(--blue-l2); } .kb-shop-i::after { content: ''; position: absolute; left: 28%; right: 28%; top: 34%; bottom: 26%; border: 1.5px solid var(--blue); border-top-width: 3px; border-radius: 2px; } .kb-shop em { font-style: normal; margin-left: .9em; padding: .35em .55em; border-radius: .4em; background: var(--coral-l); color: var(--coral-d); } .kb .kb-shop em { font-size: .6em; } .kb-bar-r { display: flex; align-items: center; margin-left: auto; } .kb .kb-pill { margin-right: 1.4em; padding: .7em 1.1em; border-radius: 999px; background: var(--blue-l2); color: var(--blue-d); font-size: .62em; white-space: nowrap; } .kb-ava { display: flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border-radius: 50%; font: 600 .85em/1 var(--f-big); font-style: normal; color: #fff; background: linear-gradient(135deg, #3B7BF6, #7C5CFA); } .kb-row { display: flex; } .kb-side { flex: 0 0 15em; display: flex; flex-direction: column; padding: 1.1em .8em 1em; border-right: 1px solid var(--hair); background: linear-gradient(160deg, #F3F8FF, #FBFDFF); } .kb-side-h { padding: 0 .95em .75em; } .kb-tabs { display: flex; flex-direction: column; } .kb-tab { position: relative; display: flex; align-items: center; height: 2.95em; margin: 0 0 .22em; padding: 0 .85em; border: 0; border-radius: .72em; background: transparent; color: var(--soft); font: 500 .96em/1 var(--f-text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); } .kb-tab svg { flex: none; width: 1.38em; height: 1.38em; margin-right: .75em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color .35s var(--ease); } .kb-tab span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb-tab em { flex: none; margin-left: .5em; font-style: normal; color: var(--mute); } .kb .kb-tab em { font-size: .6em; letter-spacing: .06em; } .kb-tab:hover { color: var(--ink); background: rgba(59, 123, 246, .06); } .kb-tab.on { color: var(--ink); background: #fff; box-shadow: 0 1px 0 rgba(13, 19, 36, .03), 0 8px 20px -12px rgba(13, 19, 36, .3); } .kb-tab.on svg { color: var(--td); } .kb-tab::before { content: ''; position: absolute; left: 0; top: .72em; bottom: .72em; width: 3px; border-radius: 2px; background: var(--t); transform: scaleY(0); transition: transform .35s var(--ease); } .kb-tab.on::before { transform: none; } /* полоска до следующей вкладки (авто-перебор идёт, пока человек не нажал сам) */ .kb-tab::after { content: ''; position: absolute; left: .85em; right: .85em; bottom: .32em; height: 2px; border-radius: 1px; background: var(--t); opacity: .75; transform: scaleX(0); transform-origin: 0 50%; } .kb-tab.on.run::after { -webkit-animation: kbRun var(--kdur, 3.6s) linear forwards; animation: kbRun var(--kdur, 3.6s) linear forwards; } .kb-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @-webkit-keyframes kbRun { from { -webkit-transform: scaleX(0); } to { -webkit-transform: scaleX(1); } } @keyframes kbRun { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* «Условия» сцены 3 уходят сюда, в карточку внизу меню (как карточка тарифа в настоящем кабинете) */ .kb-plan { margin-top: auto; padding: .95em 1em 1em; border: 1px solid var(--hair); border-radius: .8em; background: #fff; } .kb-plan .mono { color: var(--green-d); } .kb-plan b { display: block; margin-top: .35em; padding-right: .05em; font: 650 1.3em/1.1 var(--f-big); letter-spacing: -.035em; color: var(--green-d); background-image: var(--grad-money); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .kb-plan small { display: block; margin-top: .4em; font-size: .78em; line-height: 1.35; color: var(--soft); } /* рабочая область и вкладки */ .kb-main { position: relative; flex: 1 1 auto; min-width: 0; background: #fff; } .kb-pane { display: flex; flex-direction: column; } .kb-crumb { color: var(--mute); } .kb-tr { display: flex; align-items: center; flex-wrap: wrap; margin-top: .4em; } .kb-pt { position: relative; margin: 0 .55em 0 0; padding: 0 .06em .05em 0; overflow: hidden; font: 500 2.05em/1.12 var(--f-big); letter-spacing: -.035em; } .kb-pt::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--t); -webkit-transform: translate3d(-101%, 0, 0); transform: translate3d(-101%, 0, 0); } .kb .kb-tar { padding: .6em 1em; border-radius: 999px; background: var(--tl); color: var(--td); font-size: .62em; letter-spacing: .06em; white-space: nowrap; } .kb-pd { margin-top: .55em; max-width: 44em; font-size: 1.02em; line-height: 1.5; color: var(--soft); } .kb-pb { display: flex; margin-top: 1.2em; } .kb-demo { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; border: 1px solid var(--hair); border-radius: 1em; background: #FBFCFE; } .kb .kb-ex { position: absolute; right: 1em; top: .85em; z-index: 6; font-size: .56em; color: var(--mute); } .kb-facts { flex: 0 0 16.5em; align-self: flex-start; margin: 0 0 0 1.6em; padding: 0; list-style: none; } .kb-facts li { position: relative; padding: .72em 0 .72em 1.3em; border-top: 1px solid var(--hair); font-size: .9em; line-height: 1.45; color: var(--soft); } .kb-facts li:last-child { border-bottom: 1px solid var(--hair); } .kb-facts li::before { content: ''; position: absolute; left: 0; top: 1.28em; width: .5em; height: .5em; border-radius: 50%; background: var(--t); } /* --- 1 · доставка: как вкладка «Доставка» кабинета (js2/tab-delivery.js) — настройки, зоны списком, доставки по статусам --- */ .d-dost { display: flex; } .dd-set { flex: 1 1 54%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.2em 1.4em; } .dd-ord { flex: 1 1 46%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.2em 1.4em; border-left: 1px solid var(--hair); background: #fff; } .kb .dd-h { color: var(--mute); margin-bottom: .7em; } .kb .dd-h2 { margin: 1.1em 0 .55em; } .dd-chk { display: flex; align-items: center; font-weight: 500; } .dd-chk i { flex: none; width: 1.3em; height: 1.3em; margin-right: .6em; border-radius: .35em; background: var(--coral) no-repeat 50% 50%; background-size: 78% 78%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .dd-f2 { display: flex; margin-top: .8em; } .dd-fl { flex: 1 1 0; min-width: 0; padding: .5em .75em .55em; border: 1px solid var(--hair); border-radius: .6em; background: #fff; } .dd-fl + .dd-fl { margin-left: .6em; } .dd-fl small { display: block; font-size: .72em; line-height: 1.3; color: var(--mute); } .dd-fl b { display: block; margin-top: .25em; font: 600 1.05em/1.2 var(--f-big); letter-spacing: -.02em; white-space: nowrap; } .dd-hot { border-color: var(--coral); } .dd-zn { display: flex; align-items: baseline; padding: .55em .8em; margin-bottom: .4em; border: 1px solid var(--hair); border-radius: .6em; background: #fff; } .dd-zn span { flex: 1 1 auto; } .dd-zn b { font: 600 1em/1.2 var(--f-big); letter-spacing: -.02em; } .dd-add { align-self: flex-start; margin-top: .2em; padding: .45em .85em; border: 1px dashed var(--coral); border-radius: .6em; color: var(--coral-d); font-weight: 600; font-size: .86em; } .dd-card { padding: .95em 1.05em 1em; border: 1px solid var(--hair); border-radius: .9em; background: #FBFCFE; } .dd-ch { display: flex; align-items: baseline; justify-content: space-between; } .dd-ch b { font: 600 1.02em/1.2 var(--f-big); letter-spacing: -.02em; } .dd-ch span { font-weight: 600; } .dd-cm { margin-top: .3em; font-size: .8em; color: var(--soft); } .dd-st { margin: .8em 0 0; padding: 0; list-style: none; } .dd-st li { position: relative; padding: .28em 0 .28em 1.7em; font-size: .9em; color: var(--ink); } .dd-st li::before { content: ''; position: absolute; left: .2em; top: .62em; width: .75em; height: .75em; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 .22em var(--coral-l); } .dd-st li + li::after { content: ''; position: absolute; left: .55em; top: -.42em; width: 2px; height: .9em; background: var(--coral); opacity: .55; } .dd-st .dd-fin { font-weight: 600; color: var(--green-d); } .dd-st .dd-fin::before { background: var(--green); box-shadow: 0 0 0 .22em var(--green-l); } .dd-cour { margin-top: .8em; padding: .6em .85em; border-radius: .7em; background: var(--coral-l); font-size: .86em; color: var(--soft); } .kb .dd-cour .mono { display: block; margin-bottom: .15em; color: var(--coral-d); } /* --- 2 · сотрудники: роли и права --- */ .d-team { display: flex; flex-direction: column; justify-content: center; padding: 1.2em 1.6em; } .dt-h, .dt-r { display: flex; align-items: center; } .dt-h > span, .dt-r > span { flex: 0 0 30%; min-width: 0; } .dt-h b, .dt-r b { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; } .kb .dt-h b { padding-bottom: .9em; font-size: .58em; color: var(--mute); text-align: center; } .dt-r { height: 3.3em; border-top: 1px solid var(--hair); } .dt-r > span { display: flex; align-items: center; font-weight: 500; white-space: nowrap; } .dt-r > span i { flex: none; display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; margin-right: .7em; border-radius: 50%; background: var(--violet-l); color: var(--violet-d); font: 600 .78em/1 var(--f-big); font-style: normal; } .ck::before { content: ''; display: block; width: 1.4em; height: 1.4em; border-radius: .38em; border: 1.5px solid #CBD3E1; background: #fff no-repeat 50% 50%; background-size: 0 0; } .ck.on::before { border-color: var(--violet); background-color: var(--violet); background-size: 78% 78%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .dt-note { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 1.2em; padding: .8em 1em; border-radius: .7em; background: var(--violet-l); } .dt-note b { margin-right: .8em; font: 600 .98em/1.3 var(--f-big); letter-spacing: -.02em; color: var(--violet-d); } .dt-note span { font-size: .88em; color: var(--soft); } /* --- 3 · чат команды --- */ .d-chat { display: flex; } .dc-list { flex: 0 0 30%; min-width: 0; padding: 1em .7em; border-right: 1px solid var(--hair); background: #fff; } .dc-list p { display: flex; align-items: center; padding: .55em .6em; margin-bottom: .2em; border-radius: .6em; font-size: .9em; color: var(--soft); white-space: nowrap; } .dc-list p.on { background: var(--blue-l2); color: var(--ink); font-weight: 500; } .dc-list i { flex: none; display: flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; margin-right: .65em; border-radius: 50%; background: #EEF1F6; color: var(--soft); font: 600 .8em/1 var(--f-big); font-style: normal; } .dc-list p.on i { background: var(--blue); color: #fff; } .dc-th { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2em 1.4em 1.3em; background: #F6F8FC; } .dc-m { max-width: 80%; margin-top: .65em; padding: .6em .9em .7em; border-radius: 1em; font-size: .95em; line-height: 1.4; } .dc-m small { display: block; margin-bottom: .2em; } .kb .dc-m small { font-size: .62em; } .dc-m.in { align-self: flex-start; background: #fff; border: 1px solid var(--hair); border-bottom-left-radius: .3em; } .dc-m.out { align-self: flex-end; min-width: 9em; background: var(--blue); color: #fff; border-bottom-right-radius: .3em; } .dc-m.out small { color: rgba(255, 255, 255, .78); } .dc-dots { position: absolute; right: 1.4em; bottom: 1.3em; display: flex; padding: .75em .9em; border-radius: 1em; background: #fff; border: 1px solid var(--hair); opacity: 0; } .dc-dots i { width: .45em; height: .45em; margin: 0 .14em; border-radius: 50%; background: var(--blue); -webkit-animation: dcDot .9s ease-in-out infinite; animation: dcDot .9s ease-in-out infinite; } .dc-dots i + i { -webkit-animation-delay: .15s; animation-delay: .15s; } .dc-dots i + i + i { -webkit-animation-delay: .3s; animation-delay: .3s; } @-webkit-keyframes dcDot { 50% { opacity: .25; } } @keyframes dcDot { 50% { opacity: .25; } } .ty-on::after { content: ''; display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: currentColor; } /* --- 4 · отзывы --- */ .d-otz { display: flex; align-items: center; padding: 1.4em 1.6em; } .do-card { flex: 1 1 58%; min-width: 0; padding: 1.3em 1.4em; border: 1px solid var(--hair); border-radius: 1em; background: #fff; box-shadow: 0 1.4em 2.6em -1.8em rgba(13, 19, 36, .3); } .do-who { display: flex; align-items: center; } .do-who i { flex: none; display: flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; margin-right: .75em; border-radius: 50%; background: #FFF6D6; color: #9A6400; font: 600 .9em/1 var(--f-big); font-style: normal; } .do-who span { font-weight: 600; } .do-who small { display: block; margin-top: .2em; font-weight: 500; } .do-st { display: flex; margin: .9em 0 .65em; } .do-st i { position: relative; width: 1.7em; height: 1.7em; margin-right: .25em; background: #E6EAF1; -webkit-clip-path: polygon(50% 3%, 62% 36%, 97% 37%, 69% 59%, 79% 94%, 50% 73%, 21% 94%, 31% 59%, 3% 37%, 38% 36%); clip-path: polygon(50% 3%, 62% 36%, 97% 37%, 69% 59%, 79% 94%, 50% 73%, 21% 94%, 31% 59%, 3% 37%, 38% 36%); } .do-st i::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #FFC21A; } .do-tx { font-size: 1.02em; line-height: 1.5; } .do-act { display: flex; flex-wrap: wrap; margin-top: 1em; } .do-act span { margin: 0 .45em .3em 0; padding: .45em .8em; border: 1px solid var(--hair); border-radius: 999px; font-size: .78em; color: var(--soft); white-space: nowrap; } .do-act .do-ok { border-color: transparent; background: var(--green-l); color: var(--green-d); font-weight: 600; } .do-sum { flex: 0 0 34%; min-width: 0; margin-left: 1.8em; } .do-big b { display: block; font: 650 3.4em/1 var(--f-big); letter-spacing: -.045em; } .do-big small { display: block; margin: .5em 0 .9em; } .do-bar { display: flex; align-items: center; margin-top: .5em; font-size: .8em; color: var(--mute); } .do-bar span { flex: 0 0 1em; font-family: var(--f-mono); } .do-bar > i { flex: 1 1 auto; height: .55em; margin-left: .5em; border-radius: .3em; background: #EEF1F6; overflow: hidden; } .do-bar > i > i { display: block; height: 100%; border-radius: .3em; background: #FFC21A; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } /* --- 5 · купоны и баллы --- */ .d-kup { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; padding: 1.4em 1.6em 5.4em; } .dk-seg { flex: 0 0 10.5em; padding: 1em 1.05em; border: 1px solid var(--hair); border-radius: .9em; background: #fff; } .dk-seg .mono, .dk-cup .mono { display: block; } .dk-seg b { display: block; margin-top: .4em; font: 600 .98em/1.2 var(--f-big); letter-spacing: -.02em; } .dk-seg small { display: block; margin-top: .3em; font-size: .82em; color: var(--soft); } .dk-ar { position: relative; flex: 0 0 2.2em; height: 2px; margin: 0 .55em; background: var(--green); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .dk-ar::after { content: ''; position: absolute; right: -1px; top: -.3em; width: .55em; height: .55em; border: 2px solid var(--green); border-width: 2px 2px 0 0; transform: rotate(45deg); } .dk-cup { position: relative; flex: 0 0 11.5em; padding: 1em 1.15em 1.05em; border: 1.5px dashed var(--green); border-radius: .9em; background: var(--green-l); } .dk-cup .mono { color: var(--green-d); } .dk-cup b { display: block; margin: .15em 0 .25em; font: 650 2.4em/1 var(--f-big); letter-spacing: -.05em; color: var(--green-d); } .dk-cup code { display: inline-block; padding: .35em .55em; border-radius: .4em; background: #fff; font: 600 .82em/1 var(--f-mono); letter-spacing: .08em; } .dk-cup small { display: block; margin-top: .55em; font-size: .76em; color: var(--soft); } .dk-push { flex: 0 0 12.5em; padding: .9em 1em 1em; border: 1px solid var(--hair); border-radius: 1em; background: #fff; box-shadow: 0 1.2em 2.4em -1.3em rgba(13, 19, 36, .4); } .dk-push .mono, .dz-toast .mono { display: flex; align-items: center; color: var(--blue-d); } .dk-push .mono i, .dz-toast .mono i { width: .9em; height: .9em; margin-right: .6em; border-radius: .3em; background: var(--blue); } .dk-push b { display: block; margin-top: .45em; font-weight: 600; } .dk-push small { display: block; margin-top: .2em; font-size: .8em; color: var(--soft); } .dk-pts { position: absolute; left: 1.6em; right: 1.6em; bottom: 1.3em; display: flex; align-items: center; justify-content: space-between; padding: .7em 1.1em; border: 1px solid var(--hair); border-radius: .8em; background: #fff; } .dk-pts span { font-size: .92em; color: var(--soft); } .dk-pts b { font: 650 1.45em/1 var(--f-big); letter-spacing: -.03em; color: var(--green-d); } .dk-pts b span { font-size: 1em; color: inherit; } /* --- 6 · промокоды --- */ .d-promo { display: flex; align-items: center; justify-content: center; padding: 1.4em; } .dp-card { width: 100%; max-width: 25em; padding: 1.2em 1.4em 1.3em; border: 1px solid var(--hair); border-radius: 1em; background: #fff; box-shadow: 0 1.4em 2.6em -1.8em rgba(13, 19, 36, .3); } .dp-h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: .7em; border-bottom: 1px solid var(--hair); } .dp-h b { font: 600 1.05em/1.2 var(--f-big); letter-spacing: -.02em; } .dp-l { display: flex; align-items: baseline; padding: .42em 0; font-size: .92em; color: var(--soft); } .dp-l i { flex: 1 1 auto; min-width: 1em; margin: 0 .6em; border-bottom: 1px dotted #BFC9DC; transform: translateY(-.25em); } .dp-l b { color: var(--ink); font-weight: 600; white-space: nowrap; } .dp-f { display: flex; margin: .65em 0 .4em; } .dp-in { flex: 1 1 auto; min-width: 0; padding: .4em .75em .45em; border: 1.5px solid var(--coral); border-radius: .6em; } .dp-in small { display: block; } .kb .dp-in small { font-size: .56em; } .dp-in b { display: block; min-height: 1.3em; margin-top: .1em; font: 600 1em/1.3 var(--f-mono); letter-spacing: .1em; } .dp-btn { flex: none; display: flex; align-items: center; margin-left: .5em; padding: 0 1.1em; border-radius: .6em; background: var(--blue); color: #fff; font-weight: 600; font-size: .9em; } .dp-disc b { color: var(--coral-d); } .dp-tot { display: flex; align-items: baseline; margin-top: .55em; padding-top: .7em; border-top: 1px solid var(--hair); } .dp-tot > span { flex: 1 1 auto; font-weight: 600; } .dp-tot s { margin-right: .7em; font-size: .92em; color: var(--coral-d); } .dp-tot b { font: 650 1.75em/1 var(--f-big); letter-spacing: -.04em; white-space: nowrap; } .dp-stamp { position: absolute; right: 7%; top: 14%; padding: .08em .25em .12em; border: .08em solid var(--coral); border-radius: .18em; color: var(--coral); font: 700 2.5em/1 var(--f-big); letter-spacing: -.04em; transform: rotate(-8deg); opacity: .92; } /* --- 7 · запись --- */ .d-zap { display: flex; flex-direction: column; justify-content: center; padding: 1.3em 1.6em; } .dz-days { display: flex; } .dz-days span { flex: 1 1 0; margin-right: .45em; padding: .55em 0; border: 1px solid var(--hair); border-radius: .6em; background: #fff; text-align: center; font-size: .86em; color: var(--soft); } .dz-days span:last-child { margin-right: 0; } .dz-days .on { border-color: var(--violet); background: var(--violet); color: #fff; font-weight: 600; } .dz-g { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: .5em; gap: .5em; margin-top: .9em; } .dz-g span { position: relative; height: 2.55em; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--hair); border-radius: .6em; background: #fff; font: 500 .9em/1 var(--f-mono); } .dz-g .x { border-color: #EDF0F5; background: #F3F5F9; color: #AEB6C5; text-decoration: line-through; } .dz-g .pk { border-color: var(--violet); color: #fff; } .dz-g .pk i { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--violet); } .dz-g .pk b, .dz-g .pk em { position: relative; } .dz-g .pk b { font-weight: 600; } .dz-g .pk em { margin-left: .5em; font-style: normal; font-size: .72em; opacity: .85; } .dz-toast { align-self: flex-end; width: 15em; margin-top: 1.1em; padding: .9em 1em 1em; border: 1px solid var(--hair); border-radius: 1em; background: #fff; box-shadow: 0 1.2em 2.4em -1.3em rgba(13, 19, 36, .4); } .dz-toast b { display: block; margin-top: .45em; font-weight: 600; } .dz-toast small { display: block; margin-top: .2em; font-size: .8em; color: var(--soft); } /* --- 8 · аналитика --- */ .d-an { display: flex; flex-direction: column; padding: 1.3em 1.5em 1.2em; } .da-k { display: flex; } .da-k p { flex: 1 1 0; min-width: 0; margin-right: .6em; padding: .75em .95em .8em; border: 1px solid var(--hair); border-radius: .8em; background: #fff; } .da-k p:last-child { margin-right: 0; } .da-k small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .da-k b { display: block; margin-top: .35em; font: 650 1.4em/1.05 var(--f-big); letter-spacing: -.035em; white-space: nowrap; } .da-k p:first-child b { color: var(--green-d); } .da-ch { flex: 1 1 auto; min-height: 6em; display: flex; align-items: flex-end; margin-top: 1.1em; padding: 0 .3em; border-bottom: 1px solid #CBD3E1; background-image: linear-gradient(to top, var(--hair) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 100%; } .da-ch i { flex: 1 1 0; height: var(--h); margin: 0 .22em; border-radius: .3em .3em 0 0; background: linear-gradient(to top, #16A34A, #22B07A); opacity: .9; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .da-ch i:last-child { background: linear-gradient(to top, #2C64D8, #3B7BF6); opacity: 1; } /* ---------- обычная лента (без JS, «уменьшить движение»): все вкладки списком ---------- */ .kab .wrap { max-width: 1440px; } .kb-side { display: none; } .kb-main { display: flex; flex-wrap: wrap; padding: .8em; } .kb-pane { flex: 0 0 50%; min-width: 0; padding: 1.2em 1.2em 1.6em; } .kb-pb { display: block; } .kb-demo { height: 21em; } .kb-facts { margin: 1em 0 0; } .kb-pane .kb-crumb { display: none; } /* ---------- живой режим (плёнка): окно на весь экран, одна вкладка ---------- */ .film-on .kab { z-index: 0; padding: var(--head) 0 46px; display: flex; visibility: hidden; } .film-on .kab-in { width: 100%; height: 100%; display: flex; flex-direction: column; padding-top: 2.2vh; padding-bottom: 1.2vh; } .film-on .kab-head { flex: none; margin-bottom: 2.2vh; } .film-on .kab-h { white-space: nowrap; } .film-on .kb { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; -webkit-transform-origin: 0 0; transform-origin: 0 0; will-change: transform, opacity; } .film-on .kb-bar { flex: none; } .film-on .kb-row { flex: 1 1 auto; min-height: 0; } .film-on .kb-side { display: flex; } .film-on .kb-main { display: block; padding: 0; } .film-on .kb-pane { position: absolute; left: 2em; right: 2em; top: 1.5em; bottom: 1.6em; padding: 0; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s linear .3s; } .film-on .kb-pane.on { visibility: inherit; opacity: 1; transition: opacity .45s var(--ease); } .film-on .kb-pane .kb-crumb { display: block; } .film-on .kb-ph { flex: none; } .film-on .kb-pb { flex: 1 1 auto; min-height: 0; display: flex; } .film-on .kb-demo { height: auto; } .film-on .kb-facts { margin: 0 0 0 1.6em; } @media (min-width: 1500px) { .kab .wrap { max-width: none; padding: 0 5vw; } .kab .kicker { font-size: clamp(12px, .62vw, 16px); } } /* проигрывание мини-демо: .kab-live (плёнка) + .go у вкладки. Готовый вид — без анимаций, у каждого элемента свой ключ --an, задержка --d и длительность --du (из разметки) */ .kab-live .kb-pane.go .an { -webkit-animation: var(--an) var(--du, .7s) var(--ease) var(--d, 0s) both; animation: var(--an) var(--du, .7s) var(--ease) var(--d, 0s) both; } .kab-live .kb-pane.go .kb-crumb { -webkit-animation: kFade .5s var(--ease) both; animation: kFade .5s var(--ease) both; } .kab-live .kb-pane.go .kb-pt { -webkit-animation: kWipeT .72s linear both; animation: kWipeT .72s linear both; } .kab-live .kb-pane.go .kb-pt::after { -webkit-animation: kWipe .72s var(--ease2) both; animation: kWipe .72s var(--ease2) both; } .kab-live .kb-pane.go .kb-tar { -webkit-animation: kPop .5s var(--ease) .4s both; animation: kPop .5s var(--ease) .4s both; } .kab-live .kb-pane.go .kb-pd { -webkit-animation: kUp .6s var(--ease) .3s both; animation: kUp .6s var(--ease) .3s both; } .kab-live .kb-pane.go .kb-facts li { -webkit-animation: kUp .6s var(--ease) .45s both; animation: kUp .6s var(--ease) .45s both; } .kab-live .kb-pane.go .kb-facts li:nth-child(2) { -webkit-animation-delay: .53s; animation-delay: .53s; } .kab-live .kb-pane.go .kb-facts li:nth-child(3) { -webkit-animation-delay: .61s; animation-delay: .61s; } .kab-live .kb-pane.go .kb-facts li:nth-child(4) { -webkit-animation-delay: .69s; animation-delay: .69s; } .kab-live .kb-pane.go .ck.on::before { -webkit-animation: kCk .45s var(--ease) var(--d, 0s) both; animation: kCk .45s var(--ease) var(--d, 0s) both; } .kab-live .kb-pane.go .do-st i::after { -webkit-animation: kStar .55s var(--ease) var(--d, 0s) both; animation: kStar .55s var(--ease) var(--d, 0s) both; } .kab-live .kb-pane.go .dz-g .pk { -webkit-animation: kInk .3s linear .95s both; animation: kInk .3s linear .95s both; } @-webkit-keyframes kFade { from { opacity: 0; } } @keyframes kFade { from { opacity: 0; } } @-webkit-keyframes kUp { from { opacity: 0; -webkit-transform: translate3d(0, .9em, 0); } } @keyframes kUp { from { opacity: 0; transform: translate3d(0, .9em, 0); } } @-webkit-keyframes kPop { 0% { opacity: 0; -webkit-transform: scale(.5); } 60% { opacity: 1; -webkit-transform: scale(1.07); } 100% { -webkit-transform: none; } } @keyframes kPop { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.07); } 100% { transform: none; } } @-webkit-keyframes kGrow { from { opacity: 0; -webkit-transform: scale(.12); } } @keyframes kGrow { from { opacity: 0; transform: scale(.12); } } @-webkit-keyframes kBarX { from { -webkit-transform: scaleX(0); } } @keyframes kBarX { from { transform: scaleX(0); } } @-webkit-keyframes kBarY { from { -webkit-transform: scaleY(0); } } @keyframes kBarY { from { transform: scaleY(0); } } @-webkit-keyframes kMsg { from { opacity: 0; -webkit-transform: translate3d(0, .9em, 0) scale(.94); } } @keyframes kMsg { from { opacity: 0; transform: translate3d(0, .9em, 0) scale(.94); } } @-webkit-keyframes kDots { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes kDots { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes kStar { 0% { opacity: 0; -webkit-transform: scale(.2) rotate(-40deg); } 60% { opacity: 1; -webkit-transform: scale(1.2); } 100% { -webkit-transform: none; } } @keyframes kStar { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 60% { opacity: 1; transform: scale(1.2); } 100% { transform: none; } } @-webkit-keyframes kPrint { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); -webkit-transform: translate3d(0, -.8em, 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @keyframes kPrint { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transform: translate3d(0, -.8em, 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @-webkit-keyframes kPush { 0% { opacity: 0; -webkit-transform: translate3d(1.8em, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(-.15em, 0, 0); } 100% { -webkit-transform: none; } } @keyframes kPush { 0% { opacity: 0; transform: translate3d(1.8em, 0, 0); } 70% { opacity: 1; transform: translate3d(-.15em, 0, 0); } 100% { transform: none; } } @-webkit-keyframes kPress { 40% { -webkit-transform: scale(.9); background: #2C64D8; } } @keyframes kPress { 40% { transform: scale(.9); background: #2C64D8; } } @-webkit-keyframes kStamp { 0% { opacity: 0; -webkit-transform: scale(2.3) rotate(-16deg); } 60% { opacity: .92; -webkit-transform: scale(.94) rotate(-8deg); } 100% { opacity: .92; -webkit-transform: rotate(-8deg); } } @keyframes kStamp { 0% { opacity: 0; transform: scale(2.3) rotate(-16deg); } 60% { opacity: .92; transform: scale(.94) rotate(-8deg); } 100% { opacity: .92; transform: rotate(-8deg); } } @-webkit-keyframes kBook { from { opacity: 0; -webkit-transform: scale(0); } } @keyframes kBook { from { opacity: 0; transform: scale(0); } } @-webkit-keyframes kInk { from { color: #0D1324; border-color: #DDE3EE; } } @keyframes kInk { from { color: #0D1324; border-color: #DDE3EE; } } @-webkit-keyframes kCk { 0% { border-color: #CBD3E1; background-color: #fff; background-size: 0 0; -webkit-transform: scale(.7); } 60% { -webkit-transform: scale(1.15); } 100% { -webkit-transform: none; } } @keyframes kCk { 0% { border-color: #CBD3E1; background-color: #fff; background-size: 0 0; transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: none; } } /* смена вкладки: заголовок вкладки закрывает и открывает цветная плашка-шторка (вытеснение) */ @-webkit-keyframes kWipe { 0% { -webkit-transform: translate3d(-101%, 0, 0); } 45%, 55% { -webkit-transform: none; } 100% { -webkit-transform: translate3d(101%, 0, 0); } } @keyframes kWipe { 0% { transform: translate3d(-101%, 0, 0); } 45%, 55% { transform: none; } 100% { transform: translate3d(101%, 0, 0); } } @-webkit-keyframes kWipeT { 0%, 49% { color: transparent; } 50%, 100% { color: #0D1324; } } @keyframes kWipeT { 0%, 49% { color: transparent; } 50%, 100% { color: #0D1324; } } /* ---------- планшет и телефон: вкладки — лентой сверху, демо под ними ---------- */ @media (max-width: 1100px) { .kab-head { display: block; } .kab-sub { margin: 10px 0 0; max-width: 40em; } .kb-pane { flex-basis: 100%; } .film-on .kab-h { white-space: normal; font-size: min(4.4vw, 5vh, 48px); } .film-on .kab-sub { display: none; } .film-on .kb-row { flex-direction: column; } .film-on .kb-side { flex: none; flex-direction: row; padding: .55em .6em; border-right: 0; border-bottom: 1px solid var(--hair); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .film-on .kb-side::-webkit-scrollbar { display: none; } .film-on .kb-side-h, .film-on .kb-plan { display: none; } .film-on .kb-tabs { flex-direction: row; } .film-on .kb-tab { flex: none; height: 2.75em; margin: 0 .3em 0 0; padding: 0 .9em; } .film-on .kb-tab em { display: none; } .film-on .kb-tab::before { left: .9em; right: .9em; top: auto; bottom: 0; width: auto; height: 3px; transform: scaleX(0); } .film-on .kb-tab.on::before { transform: none; } .film-on .kb-tab::after { display: none; } .film-on .kb-pane { left: 1.1em; right: 1.1em; top: 1em; bottom: 1.1em; } .film-on .kb-facts { display: none; } .kb-pt { font-size: 1.6em; } .kb-pd { font-size: 1em; } .kb-pb { margin-top: .9em; } } @media (max-width: 720px) { .kab { padding: 80px 0 50px; } .kab-h { font-size: min(6.9vw, 4vh, 30px); } .film-on .kab-h { font-size: min(6.9vw, 4vh, 30px); } .kab-head .kicker { margin-bottom: 8px; } .film-on .kab-head { margin-bottom: 12px; } .kb { border-radius: .9em; } .kb-bar { height: 3em; padding: 0 .9em; } .kb-logo { flex: 1 1 auto; } .kb-shop { display: none; } .kb .kb-pill { margin-right: .8em; } .kb-ava { width: 2em; height: 2em; } .kb-pane { padding: .8em .6em 1.2em; } .kb-tr { margin-top: .25em; } .kb-pt { font-size: 1.45em; margin-right: .5em; } .kb .kb-tar { font-size: .58em; padding: .5em .8em; margin-top: .3em; white-space: normal; } .kb-pd { font-size: .95em; line-height: 1.45; margin-top: .45em; } .kb-demo { height: 23em; } .kb .kb-ex { right: .7em; top: .6em; } /* доставка: настройки сверху (суммы, зоны в ряд), доставка по статусам под ними */ .d-dost { flex-direction: column; } .dd-set { flex: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: .8em .8em .5em; } .dd-set .dd-h, .dd-chk, .dd-add { display: none; } .dd-f2 { flex: 0 0 100%; margin: 0 0 .5em; } .dd-zn { flex: 0 0 48.5%; margin: 0; padding: .45em .7em; font-size: .9em; } .dd-ord { flex: 1 1 auto; justify-content: flex-start; padding: .6em .8em .8em; border-left: 0; border-top: 1px solid var(--hair); } .dd-ord .dd-h, .dd-cm, .dd-cour { display: none; } .dd-card { padding: .7em .85em .75em; } .dd-st { margin-top: .45em; } .dd-st li { padding: .16em 0 .16em 1.6em; font-size: .84em; } .dd-st li::before { top: .5em; } /* сотрудники: подписи прав — вертикально */ .d-team { padding: .8em .8em; } .dt-h > span, .dt-r > span { flex-basis: 36%; } .kb .dt-h b { height: 6.4em; padding-bottom: .5em; align-items: flex-end; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; } .dt-r { height: 2.9em; } .dt-r > span { font-size: .86em; } .dt-r > span i { width: 1.9em; height: 1.9em; margin-right: .5em; } .ck::before { width: 1.3em; height: 1.3em; } .dt-note { margin-top: .8em; padding: .6em .75em; } .dt-note b { font-size: .86em; } .dt-note span { font-size: .8em; } /* чат: только переписка */ .dc-list { display: none; } .dc-th { padding: .9em .9em 1em; } .dc-m { max-width: 88%; font-size: .9em; } .dc-dots { right: .9em; bottom: 1em; } /* отзывы: только карточка */ .d-otz { padding: 1em; } .do-sum { display: none; } .do-card { padding: 1em 1.05em; } /* купоны: сегмент и купон рядом, push под ними */ .d-kup { padding: 1em .8em 4.4em; } .dk-seg { flex: 0 0 47%; margin-right: 3%; padding: .8em .8em; } .dk-cup { flex: 0 0 50%; padding: .8em .85em; } .dk-cup b { font-size: 2em; } .dk-ar { display: none; } .dk-push { flex: 0 0 100%; margin-top: .8em; padding: .75em .9em; } .dk-pts { left: .8em; right: .8em; bottom: .8em; padding: .55em .85em; } .dk-pts span { font-size: .82em; } /* промокоды */ .d-promo { padding: .9em; } .dp-card { padding: .95em 1em 1em; } .dp-stamp { right: 4%; top: 3%; font-size: 1.7em; } /* запись */ .d-zap { padding: .9em .8em; } .dz-days span { margin-right: .3em; font-size: .78em; } .dz-g { grid-gap: .4em; gap: .4em; } .dz-g span { height: 2.4em; font-size: .8em; } .dz-g .pk em { display: none; } .dz-toast { width: 100%; margin-top: .8em; padding: .7em .9em; } /* аналитика: показатели 2 × 2 */ .d-an { padding: .9em .8em; } .da-k { flex-wrap: wrap; } .da-k p { flex: 0 0 48.5%; margin: 0 0 .45em; padding: .55em .7em; } .da-k p:nth-child(odd) { margin-right: 3%; } .da-k b { font-size: 1.15em; } .da-ch { margin-top: .5em; min-height: 4em; } .da-ch i { margin: 0 .12em; } } @media (prefers-reduced-motion: reduce) { .dc-dots i { -webkit-animation: none; animation: none; } } /* правки по сверке с кодом кабинета (08.10) */ .dt-own { flex: 5 1 0; min-width: 0; padding-left: .2em; font-style: normal; font-size: .84em; color: var(--soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb .da-cap { margin-top: 1em; color: var(--mute); } .d-an .da-ch { margin-top: .5em; } @-webkit-keyframes kStep { 0% { opacity: .25; } 45% { opacity: 1; } } @keyframes kStep { 0% { opacity: .25; } 45% { opacity: 1; } } @media (max-width: 720px) { .dt-own { white-space: normal; font-size: .76em; line-height: 1.3; text-align: left; padding-left: .4em; } .kb .da-cap { margin-top: .3em; } } /* телефон: рабочая область тесная — без «хлебных крошек», крупнее описание, роли без кружков, штамп скидки только на ПК */ @media (max-width: 720px) { .film-on .kb-pane .kb-crumb { display: none; } .film-on .kb-tr { margin-top: 0; } .kb-pd { font-size: 1em; } .dt-r > span i { display: none; } .dt-h > span, .dt-r > span { flex-basis: 34%; } .dt-r > span { font-size: .82em; } .d-team { padding-top: 1.7em; } .d-kup { padding-top: 1.8em; } .dp-stamp { display: none; } .dd-st li { padding-top: .1em; padding-bottom: .1em; } } @media (max-width: 720px) { .d-team { padding-top: 1.3em; padding-bottom: .6em; } .dt-r { height: 2.65em; } .dt-note { margin-top: .6em; } } @media (max-width: 720px) { .kb .dt-h b { height: 7.4em; } .d-team { padding-top: .9em; } } /* обычная лента: карточки уже — штамп и стрелки купонов не помещаются */ html:not(.film-on) .dp-stamp, html:not(.film-on) .dk-ar { display: none; } html:not(.film-on) .dk-cup { margin-left: .8em; } html:not(.film-on) .dk-push { margin-top: .8em; } html:not(.film-on) .kb-demo.d-kup { height: auto; min-height: 21em; } /* ===================================================================================== СЦЕНА 4 — ПЕСОЧНИЦА (08.10, Юра: «надо кабинет кликабельным сделать»). Во вкладках всё нажимается и вводится, всё в памяти страницы (kino.js, блок «ПЕСОЧНИЦА»). Вид вкладок прежний — добавлены только поля, кнопки, наведение и фокус. Без JS элементы .kb-js спрятаны (они бы ничего не делали). ===================================================================================== */ html:not(.js) .kb-js { display: none !important; } .kb-main [role="button"], .kb-main [role="checkbox"], .dd-chk, .dd-add, .dd-zx, .dd-next, .dc-send, .dk-go, .dp-btn, .kb-sel { cursor: pointer; -webkit-tap-highlight-color: transparent; } .kb-main [aria-disabled="true"] { cursor: default; } .kb-main [role="button"]:focus-visible, .kb-main button:focus-visible, .kb-main [role="checkbox"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .kb-main input, .kb-main select { margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; outline: 0; -webkit-appearance: none; appearance: none; } .kb-main input::-webkit-input-placeholder { color: var(--mute); opacity: 1; } .kb-main input::placeholder { color: var(--mute); opacity: 1; } .kb-main input:disabled { color: inherit; -webkit-text-fill-color: currentColor; opacity: 1; } /* выбор поверх подписи (роль, сегмент, скидка, процент): настоящий select прозрачный, виден текст и уголок */ .kb-sel { position: relative; display: inline-block; } .kb-sel select { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; font-size: 16px; } .kb-sel.sel > b::after, .kb-sel.sel > em::after, .dt-role.sel .dt-rn::after { content: ''; display: inline-block; width: .34em; height: .34em; margin: 0 .1em 0 .4em; border: solid currentColor; border-width: 0 .1em .1em 0; vertical-align: .28em; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: .55; } .kb-sel:focus-within, .dt-role:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: .3em; } .kb-sel:hover > b, .kb-sel:hover > em { opacity: .8; } /* 1 · доставка */ .dd-chk { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; } .dd-chk i { transition: background-color .2s, box-shadow .2s; } .dd-chk[aria-checked="false"] i { background-color: #fff; background-size: 0 0; box-shadow: inset 0 0 0 1.5px #CBD3E1; } .dd-chk:hover i { box-shadow: 0 0 0 .22em var(--coral-l); } .dd-chk[aria-checked="false"]:hover i { box-shadow: inset 0 0 0 1.5px var(--coral); } .d-dost .dd-f2, .d-dost .dd-zns, .d-dost .dd-add, .d-dost .dd-h2 { transition: opacity .3s var(--ease); } .d-dost.dd-off .dd-f2, .d-dost.dd-off .dd-zns, .d-dost.dd-off .dd-add, .d-dost.dd-off .dd-h2 { opacity: .38; } .dd-fl { display: block; cursor: text; transition: border-color .2s, box-shadow .2s; } .dd-fl:hover { border-color: #C5CEDD; } .dd-fl:focus-within, .dd-zn:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .3); } .dd-hot:hover { border-color: var(--coral); } .dd-num { width: 4ch; padding: 0; } .dd-zns { max-height: 8.9em; margin: 0 -.25em; padding: 0 .25em .05em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .dd-zn { align-items: center; transition: border-color .2s, box-shadow .2s; } .dd-zn:hover { border-color: #C5CEDD; } .dd-zi { flex: 1 1 auto; min-width: 0; padding: 0; } .dd-zn b { flex: none; } .dd-zx { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 1.55em; height: 1.55em; margin: 0 -.35em 0 .45em; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mute); font: 400 1.15em/1 var(--f-text); transition: background .2s, color .2s; } .dd-zx:hover { background: var(--coral-l); color: var(--coral-d); } .dd-zx:disabled, .dd-add:disabled { cursor: default; } .dd-add { background: none; font-family: inherit; line-height: inherit; transition: background .2s; } .dd-add:not(:disabled):hover { background: var(--coral-l); } .dd-st li { transition: color .3s; } .dd-st li::before, .dd-st li + li::after { transition: background .3s, box-shadow .3s; } .dd-st li.todo { color: var(--mute); } .dd-st li.todo::before { background: #D5DBE6; box-shadow: 0 0 0 .22em #F1F3F7; } .dd-st li.todo::after { background: #D5DBE6; } .dd-st li.cur { font-weight: 600; } .dd-next { display: block; width: 100%; margin-top: .75em; padding: .6em .8em; border: 0; border-radius: .6em; background: var(--coral); color: #fff; font: 600 .86em/1.25 var(--f-text); transition: background .2s; } .dd-next:hover { background: var(--coral-d); } .dd-next.re { background: #fff; color: var(--coral-d); box-shadow: inset 0 0 0 1px var(--coral); } .dd-next.re:hover { background: var(--coral-l); } /* 2 · сотрудники */ .dt-r .ck { align-self: stretch; align-items: center; } .dt-r .ck:hover::before { border-color: var(--violet); box-shadow: 0 0 0 .2em var(--violet-l); } .dt-r .ck:focus-visible { outline-offset: -2px; border-radius: .4em; } .dt-r.own .ck { display: none; } .dt-r:not(.own) .dt-own { display: none; } .dt-role { position: relative; cursor: pointer; } .dt-role select { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; font-size: 16px; } .dt-role:hover .dt-rn { color: var(--violet-d); } /* 3 · чат */ .dc-list p { transition: background .2s, color .2s; } .dc-list p:not(.on):hover { background: #F3F6FB; color: var(--ink); } .dc-list p:focus-visible { outline-offset: -2px; } .dc-feed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 -.4em; padding: 0 .4em .1em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .dc-feed[hidden] { display: none; } .dc-feed > :first-child { margin-top: auto; } .dc-form { flex: none; display: flex; align-items: center; margin-top: .8em; padding: .25em .25em .25em .95em; border: 1px solid var(--hair); border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; } .dc-form:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 123, 246, .3); } .dc-in { flex: 1 1 auto; min-width: 0; padding: .45em 0; font-size: .92em; } .dc-send { flex: none; margin-left: .5em; padding: .55em 1.05em; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: 600 .84em/1.2 var(--f-text); transition: background .2s; } .dc-send:hover { background: var(--blue-d); } html.js .dc-dots { bottom: 4.4em; } /* 4 · отзывы */ .do-card .do-st, .do-card .do-tx, .do-card .do-who { transition: opacity .3s var(--ease); } .do-card.hid .do-st, .do-card.hid .do-tx, .do-card.hid .do-who { opacity: .4; } .do-act span { transition: background .2s, color .2s, border-color .2s; } .do-act span:not(.do-ok):not(.do-off):hover { border-color: #C5CEDD; color: var(--ink); } .do-act .do-ok:hover { background: #D6F0E0; } .do-act .do-off { border-color: transparent; background: #E9EDF3; color: var(--ink); font-weight: 600; } /* 5 · купоны и баллы */ .dk-seg .kb-sel, .dk-cup .kb-sel { display: block; } .dk-pp em { font-style: normal; font-weight: 600; color: var(--green-d); } .dk-go { display: block; width: 100%; margin-top: .65em; padding: .55em .8em; border: 0; border-radius: .6em; background: var(--green); color: #fff; font: 600 .84em/1.25 var(--f-text); transition: background .2s; } .dk-go:hover { background: var(--green-d); } .dk-go.ok { background: #fff; color: var(--green-d); box-shadow: inset 0 0 0 1px var(--green); } /* 6 · промокоды */ .dp-in { display: block; cursor: text; transition: border-color .2s, box-shadow .2s; } .dp-in:focus-within { box-shadow: 0 0 0 3px rgba(255, 107, 74, .3); } .dp-in input { display: block; width: 100%; min-height: 1.3em; margin-top: .1em; padding: 0; font: 600 1em/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; } .dp-btn { border: 0; font-family: inherit; transition: background .2s; } .dp-btn:hover { background: var(--blue-d); } .dp-disc.err span { color: var(--coral-d); } .dp-disc.err i, .dp-disc.err b { display: none; } /* 7 · запись */ .dz-days span, .dz-g span { transition: background .2s, border-color .2s, color .2s; } .dz-days span:not(.on):hover { border-color: var(--violet); color: var(--violet-d); } .dz-g span:not(.x):not(.pk):hover { border-color: var(--violet); background: var(--violet-l); color: var(--violet-d); } .dz-g .x { cursor: not-allowed; } .kab-live .kb-pane.go .dz-g .pk.nw { -webkit-animation-delay: .12s; animation-delay: .12s; } /* 8 · аналитика: период */ .da-hd { display: flex; align-items: center; justify-content: space-between; margin-top: 1em; } .kb .da-hd .da-cap { margin: 0; } .da-per { display: flex; flex: none; margin-left: .8em; padding: .18em; border-radius: 999px; background: #EEF1F6; } .da-per span { padding: .38em .85em; border-radius: 999px; font-size: .78em; line-height: 1.2; color: var(--soft); white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; } .da-per span:not(.on):hover { color: var(--ink); } .da-per .on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(13, 19, 36, .12); } /* короткие подписи сумм и подпись статуса — только на телефоне */ .dd-sh, .dd-now { display: none; } /* «Кому»: выбор — по всей карточке сегмента */ .dk-seg { position: relative; transition: border-color .2s, box-shadow .2s; } .dk-seg .kb-sel { position: static; } .dk-seg:hover { border-color: #C5CEDD; } .dk-seg .kb-sel:focus-within { outline: 0; } .dk-seg:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22, 163, 74, .3); } /* прозрачный select не меньше 44 × 44 px — палец попадает и в короткую подпись («5%») */ .kb-sel select, .dt-role select { left: 50%; top: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .dk-seg .kb-sel select { left: 0; top: 0; min-width: 0; min-height: 0; -webkit-transform: none; transform: none; } /* телефон: поля 16 px (iOS не увеличивает страницу при вводе), зоны касания не меньше 44 px */ @media (max-width: 720px) { .kb-main input, .kb-main select { font-size: 16px; } .dt-r > .dt-role { align-self: stretch; } /* мелкие кнопки — невидимая зона касания 44 px вокруг (без overflow: hidden у самих кнопок) */ .dd-zx, .dd-add, .do-act span, .da-per span, .dk-go, .dc-list p { position: relative; } .dd-zx::after, .dd-add::after, .do-act span::after, .da-per span::after, .dk-go::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* доставка: [галочка · + зона] / суммы / зоны лентой вбок / заказ — статусы полосой и кнопка */ .dd-set { flex-wrap: wrap; align-items: center; padding: .35em .8em .5em; } .dd-chk { display: flex; flex: 0 0 100%; min-height: 44px; font-size: .92em; } .dd-f2 { margin: 0 0 .45em; } .dd-zns { flex: 1 1 60%; min-width: 0; display: flex; max-height: none; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .dd-zns::-webkit-scrollbar { display: none; } .dd-zn { flex: 0 0 82%; min-width: 0; min-height: 44px; margin: 0 .4em 0 0; } /* одна зона целиком, следующая выглядывает — лента вбок */ .dd-zi { width: 1px; align-self: stretch; } /* поле названия — во всю высоту строки зоны */ .dd-add { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 0 0 0 .1em; padding: 0; overflow: hidden; font-size: 1.3em; font-weight: 500; } .dd-add .dd-lg { display: none; } .dd-zx { margin-right: -.45em; } .dd-fl { padding: .4em .7em .45em; } .dd-lg { display: none; } .dd-sh { display: inline; } .dd-card { display: flex; flex-wrap: wrap; align-items: center; } .dd-ch { flex: 0 0 100%; } .dd-st { order: 1; flex: 1 1 40%; min-width: 0; display: flex; margin-top: .5em; } .dd-st li { flex: 1 1 0; height: 6px; margin-right: 4px; padding: 0; border-radius: 3px; background: var(--coral); font-size: 0; } .dd-st li:last-child { margin-right: 0; } .dd-now { order: 2; display: block; flex: none; margin: .5em 0 0 .7em; font-size: .84em; font-weight: 600; line-height: 1.2; color: var(--coral-d); } .dd-now.dd-nf { color: var(--green-d); } .dd-next { order: 3; } .dd-st li::before, .dd-st li + li::after { display: none; } .dd-st li.todo { background: #E1E6EE; } .dd-st .dd-fin { background: var(--green); } .dd-st .dd-fin.todo { background: #E1E6EE; } .dd-next { min-height: 44px; margin-top: .55em; } .dd-ord { padding: .5em .8em .6em; } .dd-card { padding: .6em .8em .7em; } /* чат: список чатов — лентой над перепиской */ .d-chat { flex-direction: column; } .dc-list { display: flex; flex: none; padding: .35em .5em; border-right: 0; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; } .dc-list::-webkit-scrollbar { display: none; } .dc-list p { flex: none; min-height: 44px; margin: 0 .3em 0 0; padding: 0 .75em 0 .4em; font-size: .86em; } .dc-th { flex: 1 1 auto; min-height: 0; } .dc-form { padding: 0 0 0 .9em; } .dc-send { min-height: 44px; } .dc-in { align-self: stretch; } /* поле сообщения — во всю высоту формы */ .dc-list { padding-top: 1.15em; } /* купоны: под кнопкой «Выдать» карточка выросла — пояснения купона и push убраны, чтобы не залезать на баллы */ .dk-cup small, .dk-push small { display: none; } .dk-go { margin-top: .5em; } html.js .dc-dots { bottom: 4.6em; } /* промокод: поле и кнопка по 44 px */ .dp-in { min-height: 44px; } .dp-btn { min-height: 44px; } /* запись: дни и время — по 44 px в высоту, плашка — в одну строку */ .dz-days span { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; } .dz-g span { height: 40px; } .dz-toast { margin-top: .6em; padding: .55em .8em; } .dz-toast b { margin-top: .25em; } .dz-toast small { display: none; } } .dk-cup .kb-sel > b { white-space: nowrap; } .dk-cup .kb-sel.sel > b::after { width: .2em; height: .2em; margin-left: .22em; border-width: 0 .06em .06em 0; vertical-align: .32em; } /* ===================================================================================== СЦЕНА 5 «КОНСТРУКТОР» — scena5_konstruktor/scena.css целиком (08.10, шаг 3 сборки) ===================================================================================== */ /* scena5_konstruktor/scena.css — СЦЕНА 5 «КОНСТРУКТОР ЛЕНДИНГА» (для главной: вставить целиком в glavnaya.css). Всё внутри сцены — в em от кегля слоя #kon: в режиме плёнки кегль ставит scena.js по размеру окна (1440 ≈ 16 px, 1920 ≈ 20 px, 2560 ≈ 25 px), и сцена растёт целиком — на больших мониторах ~90% ширины. Мини-сайт (.kn-page) — в «виртуальных» пикселях конструктора (ПК 1000, телефон 375), масштаб — transform. Без JS и при «уменьшить движение» — обычный блок ленты, всё видно сразу. */ .kon { --kv: #6246D8; --kvl: #F0ECFF; --khair: #DDE3EE; --kink: #0D1324; --ksoft: #4B556B; --kmute: #6A7387; --kblue: #3B7BF6; position: relative; z-index: 1; padding: 110px 0 80px; font-size: 16px; color: var(--kink); } .kon .wrap { position: relative; } .kon button { font-family: inherit; color: inherit; } /* ---------- заголовок ---------- */ .kn-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.3em; } .kn-ht { min-width: 0; } .kn-kick { font-size: .74em; color: var(--kv); margin-bottom: .7em; } .kn-h2 { position: relative; margin: 0; font: 460 3em/1.08 var(--f-big, 'Unbounded', sans-serif); letter-spacing: -.04em; } .kn-w { display: inline-block; } /* вторая фраза заголовка сцены 5 не рвётся (Юра 11.10: «Нужен лендинг? Соберите его из блоков.»): если строки не хватает — перенос после «лендинг?», а не одинокое «блоков.» (1440); на телефоне — обычный перенос, иначе не влезет */ @media (min-width: 721px) { .kn-nw { white-space: nowrap; } } .kn-acc { background-image: linear-gradient(100deg, #6246D8 0%, #7C5CFA 45%, #FF6B4A 100%); -webkit-background-clip: text; background-clip: text; color: #6246D8; -webkit-text-fill-color: transparent; padding-right: .04em; } .kn-sub { flex: none; max-width: 21em; margin: 0 0 .25em 2em; font-size: 1.05em; line-height: 1.5; color: var(--ksoft); } /* рамка выделения редактора (заголовок, вход, блок): синяя линия + маркеры + бирка */ .kn-tsel, .kn-bsel, .kn-drag { position: absolute; left: 0; top: 0; display: none; pointer-events: none; border: 1.5px solid var(--kblue); } .kn-tsel .h, .kn-bsel .h, .kn-drag .h { position: absolute; width: .5em; height: .5em; margin: -.25em 0 0 -.25em; background: #fff; border: 1.5px solid var(--kblue); } .kn-tsel .h { width: .14em; height: .14em; margin: -.07em 0 0 -.07em; border-width: .03em; } .kh1 { left: 0; top: 0; } .kh2 { left: 100%; top: 0; } .kh3 { left: 0; top: 100%; } .kh4 { left: 100%; top: 100%; } .kh5 { left: 0; top: 50%; } .kh6 { left: 100%; top: 50%; } .kh7 { left: 50%; top: 0; } .kh8 { left: 50%; top: 100%; } .kn-tag { position: absolute; left: -1.5px; bottom: 100%; white-space: nowrap; font: 500 .68em/1 var(--f-mono, monospace); font-style: normal; letter-spacing: .06em; text-transform: uppercase; background: var(--kblue); color: #fff; padding: .45em .6em .4em; border-radius: .3em .3em .3em 0; } .kn-tsel { border-width: .025em; } .kn-tsel .kn-tag { font-size: .17em; } .kn-tsel.rt .kn-tag { left: auto; right: -1.5px; } .kn-tsel.dn .kn-tag { bottom: auto; top: 100%; border-radius: 0 .3em .3em .3em; } /* слово на второй строке — бирка под ним, не на первой строке */ .kn-drag { background: rgba(59, 123, 246, .05); } .kn-drag .kn-tag { left: auto; right: -1.5px; bottom: auto; top: 100%; margin-top: .5em; border-radius: .3em; } .kn-bsel .kn-tag { bottom: auto; top: 0; border-radius: 0 0 .3em 0; } /* ---------- тело: блоки | страница | страницы и тарифы ---------- */ .kn-body { display: grid; grid-template-columns: 15.5em minmax(0, 1fr) 15.5em; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "lib box side" "ctl box side"; column-gap: 1.4em; row-gap: .8em; height: 40em; } .kn-card { background: rgba(255, 255, 255, .92); border: 1px solid var(--khair); border-radius: .9em; padding: .85em .8em .8em; min-width: 0; } .kn-libc { grid-area: lib; display: flex; flex-direction: column; min-height: 0; } .kn-ctl { grid-area: ctl; } .kn-box { grid-area: box; position: relative; min-width: 0; min-height: 0; } .kn-side { grid-area: side; display: flex; flex-direction: column; min-height: 0; } .kn-ph { font-size: .68em; color: var(--kmute); margin: 0 0 .9em .25em; display: flex; align-items: baseline; flex-wrap: wrap; } .kn-ph b { color: var(--kink); font-weight: 600; margin-left: .45em; } .kn-hint { flex-basis: 100%; margin-top: .45em; text-transform: none; letter-spacing: 0; font: 400 1.25em/1.3 var(--f-text, sans-serif); color: var(--kmute); } .kn-lib { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .kn-it { position: relative; display: flex; align-items: center; width: 100%; height: var(--ih, 2.6em); margin: 0 0 .2em; padding: 0 .55em 0 .4em; border: 1px solid transparent; border-radius: .65em; background: transparent; font-size: .95em; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .25s, border-color .25s, box-shadow .25s; flex: 1 1 auto; min-height: var(--ih, 2.6em); max-height: 3.6em; } /* растут, заполняя карточку */ .kn-it:hover { background: #F4F6FB; } .kn-it:focus-visible, .kn-s:focus-visible, .kn-btn:focus-visible, .kn-dev button:focus-visible, .kn-pm:focus-visible { outline: 2px solid var(--kblue); outline-offset: 2px; } .kn-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 1.85em; height: 1.85em; margin-right: .7em; border-radius: .5em; background: var(--cl); color: var(--c); } .kn-ico svg, .kn-btn svg, .kn-dev svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .kn-it span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kn-it em { flex: none; position: relative; width: 1.45em; height: 1.45em; border-radius: 50%; border: 1px solid #CDD5E4; transition: background-color .25s, border-color .25s; } .kn-it em::before, .kn-it em::after { content: ''; position: absolute; left: 50%; top: 50%; width: .62em; height: 1.5px; margin: -.75px 0 0 -.31em; background: var(--kmute); transition: transform .3s; } .kn-it em::after { transform: rotate(90deg); } .kn-it[aria-pressed="true"] { background: var(--cl); } .kn-it[aria-pressed="true"] em { background: var(--c); border-color: var(--c); } .kn-it[aria-pressed="true"] em::before { background: #fff; width: .34em; margin: .04em 0 0 -.33em; transform: rotate(45deg); } .kn-it[aria-pressed="true"] em::after { background: #fff; width: .6em; margin: -.1em 0 0 -.14em; transform: rotate(-50deg); } .kn-press { box-shadow: 0 0 0 .3em rgba(59, 123, 246, .22) !important; } /* тема и вид */ .kn-thl { margin-bottom: .7em; } .kn-sw { display: flex; margin: 0 0 .75em; } .kn-s { flex: none; width: 2.35em; height: 2.35em; margin-right: .45em; padding: 0; border-radius: 50%; border: 2px solid #fff; cursor: pointer; background: linear-gradient(135deg, var(--a) 0 52%, var(--b) 52% 100%); box-shadow: 0 0 0 1px var(--khair); transition: box-shadow .25s, transform .25s; } .kn-s.on { box-shadow: 0 0 0 2px var(--kink); } .kn-row { display: flex; flex-direction: column; } .kn-btn { display: flex; align-items: center; justify-content: center; height: 2.5em; margin-bottom: .5em; padding: 0 1em; border: 1px solid var(--khair); border-radius: 999px; background: #fff; font-size: .9em; font-weight: 600; cursor: pointer; white-space: nowrap; } .kn-btn svg { margin-right: .5em; } .kn-btn:hover { border-color: #B9C4DA; } .kn-dev { display: flex; padding: .2em; border-radius: .75em; background: #EDF1F7; } .kn-dev button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: 0; height: 2.35em; padding: 0 .4em; border: 0; border-radius: .6em; background: transparent; font-size: .86em; font-weight: 500; color: var(--ksoft); cursor: pointer; white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; } .kn-dev button svg { margin-right: .4em; flex: none; } .kn-dev button.on { background: #fff; color: var(--kink); box-shadow: 0 1px 3px rgba(13, 19, 36, .12); } /* страницы и тарифы (факты: _istochnik/index.txt) */ .kn-cnt { display: flex; align-items: center; margin: 0 0 .2em; } .kn-pm { flex: none; width: 2.3em; height: 2.3em; padding: 0; border-radius: 50%; border: 1px solid var(--khair); background: #fff; font: 500 1.2em/1 var(--f-text, sans-serif); cursor: pointer; } .kn-pm:hover { border-color: #B9C4DA; } .kn-pm:disabled { opacity: .4; cursor: default; } .kn-n { flex: 1; text-align: center; font-size: .95em; color: var(--ksoft); white-space: nowrap; } .kn-n b { font: 500 2.2em/1 var(--f-big, sans-serif); letter-spacing: -.04em; color: var(--kink); vertical-align: -.12em; margin-right: .1em; font-variant-numeric: tabular-nums; } .kn-now { display: none; } .kn-btn .sh, .kn-sub .sh { display: none; } .kn-tar { position: relative; list-style: none; margin: .7em 0 .6em; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .kn-tar li { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n p" "l l"; align-items: baseline; padding: .5em .7em .5em .85em; margin-bottom: .15em; border-radius: .6em; transition: opacity .35s; flex: 1 1 auto; max-height: 6em; align-content: center; } .kn-tar li b { grid-area: n; font-weight: 600; font-size: .98em; } .kn-tar li em { grid-area: p; justify-self: end; font: 500 .7em/1 var(--f-mono, monospace); font-style: normal; letter-spacing: .04em; color: var(--kmute); white-space: nowrap; } .kn-tar li span { grid-area: l; font-size: .82em; color: var(--ksoft); margin-top: .1em; } .kn-tar li.no { opacity: .42; } .kn-tar li.on em { color: #15803D; } .kn-tar-m { position: absolute; z-index: 0; left: 0; right: 0; top: 0; border-radius: .6em; background: #E8F7EE; box-shadow: inset 3px 0 0 #16A34A; transition: transform .55s var(--ease, ease), height .55s var(--ease, ease); } .kn-note { font-size: .8em; color: var(--ksoft); padding: 0 .3em; } .kn-feat { list-style: none; margin: auto 0 0; padding: .8em .3em 0; border-top: 1px solid var(--khair); } .kn-feat li { position: relative; padding-left: 1.4em; font-size: .84em; line-height: 1.35; margin-bottom: .45em; color: var(--ksoft); } .kn-feat li::before { content: ''; position: absolute; left: .15em; top: .32em; width: .55em; height: .3em; border-left: 1.6px solid #16A34A; border-bottom: 1.6px solid #16A34A; transform: rotate(-45deg); } /* ---------- окно-страница ---------- */ .kn-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; border-radius: .9em; background: #fff; border: 1px solid #D3DAE8; box-shadow: 0 1.6em 3.2em -1.8em rgba(13, 19, 36, .3), 0 .15em .5em rgba(13, 19, 36, .05); transition: background-color .5s; } .kn-frame.is-mob { background: #E9EEF6; } .kn-chrome { position: absolute; left: 0; right: 0; top: 0; height: 2.5em; display: flex; align-items: center; padding: 0 .9em; border-bottom: 1px solid #E3E8F1; background: #F7F9FC; transition: opacity .35s; } .kn-chrome > i { flex: none; width: .62em; height: .62em; margin-right: .42em; border-radius: 50%; background: #DCE2EC; } .kn-addr { flex: 0 1 24em; min-width: 0; margin: 0 auto; height: 1.65em; display: flex; align-items: center; justify-content: center; border-radius: 99px; background: #fff; border: 1px solid #E3E8F1; font-size: .68em; letter-spacing: .02em; text-transform: none; color: var(--ksoft); white-space: nowrap; overflow: hidden; padding: 0 .8em; } .kn-addr em { font-style: normal; margin-left: .8em; padding: .15em .5em; border-radius: .3em; background: #FFF6D6; color: #9A6400; text-transform: uppercase; letter-spacing: .08em; font-size: .9em; } .kn-notch { position: absolute; left: 50%; top: .62em; width: 5em; height: .95em; margin-left: -2.5em; border-radius: 99px; background: var(--kink); opacity: 0; transition: opacity .35s; } .kn-frame.is-mob .kn-chrome { opacity: 0; } .kn-frame.is-mob .kn-notch { opacity: 1; } .kn-view { position: absolute; left: 0; right: 0; top: 2.5em; bottom: 0; overflow: hidden; background: var(--tb); } .kn-frame.is-mob .kn-view { border-radius: 1.4em; } .kn-page { position: absolute; left: 0; top: 0; width: 1000px; transform-origin: 0 0; } .kn-sb { position: absolute; right: .3em; top: 0; width: .24em; border-radius: 99px; background: rgba(13, 19, 36, .2); opacity: 0; transition: opacity .4s; } .kn-scan { position: absolute; left: 0; top: 0; height: 2px; display: none; pointer-events: none; background: var(--sc, #3B7BF6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 1.2em var(--sc, #3B7BF6); } .kn-scan em { position: absolute; right: .8em; bottom: .55em; font-style: normal; font-size: .66em; white-space: nowrap; padding: .4em .6em; border-radius: .3em; background: #fff; color: var(--kink); border: 1px solid var(--khair); } /* вид «Телефон» на широком экране: слева та же страница в окне ПК, над окнами — ширины */ .kn-snapw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 50%; } .kn-snapin { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; will-change: opacity; } .kn-snap { transform-origin: 100% 50%; will-change: transform; } /* свой слой: конец проявления и пролёт блока над окном не перерисовывают его */ .kn-snap .kn-page { width: 1000px; } .kn-vlab { position: absolute; top: 0; margin: 0; display: flex; align-items: center; font-size: .68em; color: var(--kmute); white-space: nowrap; overflow: hidden; } .kn-vlab b { font-weight: 600; color: var(--kink); margin-right: .45em; } .kn-vlab + .kn-vlab { justify-content: center; } /* курсор демонстрации и «летящий» блок */ .kn-ptr, .kn-ghost { position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 8; } .kn-ptr { width: 1.45em; height: 1.45em; margin: -.15em 0 0 -.2em; transform-origin: 20% 15%; } .kn-ptr svg { width: 100%; height: 100%; fill: var(--kink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(13, 19, 36, .25)); } .kn-ghost { border-radius: .5em; outline: 1.5px solid var(--gc, #3B7BF6); background: var(--tb, #fff); box-shadow: 0 1.2em 2.4em -1em rgba(13, 19, 36, .35); overflow: hidden; } /* настоящий блок в миниатюре (элементы в виртуальных px, масштаб — scena.js) + бирка редактора цвета блока */ .kn-gpage { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .kn-ghost > span { position: absolute; z-index: 2; left: 0; top: 0; padding: .4em .6em .35em; border-radius: 0 0 .35em 0; background: var(--gc, #3B7BF6); color: #fff; font: 500 .62em/1 var(--f-mono, monospace); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .kn-ghost > span::before { content: '+ '; } /* ---------- мини-сайт: темы (палитры и шрифты — из lending_konstruktor/lk/temy.js) ---------- */ .th-nebo { --tb: #FFFFFF; --ts: #F1F5FC; --tp: #E4ECFA; --tt: #1B2440; --tm: #5A647D; --tl: #E2E8F3; --ta: #2C64D8; --to: #FFFFFF; --t2: #F0A92E; --fz: 'Onest', system-ui, sans-serif; --ft: 'Onest', system-ui, sans-serif; --fw: 650; --ls: -.03em; } .th-moloko { --tb: #FFFDF8; --ts: #F7F2E8; --tp: #EFE6D5; --tt: #2B251D; --tm: #6B6254; --tl: #E9E1D2; --ta: #33569E; --to: #FFFFFF; --t2: #D98B3A; --fz: 'Lora', Georgia, serif; --ft: 'Manrope', system-ui, sans-serif; --fw: 600; --ls: -.01em; } .th-shalfey { --tb: #F8FAF5; --ts: #EDF2E7; --tp: #DFE8D6; --tt: #1F2A1D; --tm: #56634F; --tl: #DCE4D3; --ta: #3B7046; --to: #FFFFFF; --t2: #D58A5A; --fz: 'Manrope', system-ui, sans-serif; --ft: 'Manrope', system-ui, sans-serif; --fw: 700; --ls: -.035em; } .th-pastel { --tb: #FCFAFF; --ts: #F3EEFF; --tp: #E9E1FF; --tt: #231B3A; --tm: #625A7E; --tl: #EAE4F8; --ta: #7B5CFF; --to: #FFFFFF; --t2: #FF8FB1; --fz: 'Comfortaa', system-ui, sans-serif; --ft: 'Onest', system-ui, sans-serif; --fw: 700; --ls: -.03em; } .th-zakat { --tb: #FFF8F3; --ts: #FFEDE2; --tp: #FFDCC8; --tt: #2A160E; --tm: #6E4D3F; --tl: #F6E0D3; --ta: #F0582B; --to: #FFFFFF; --t2: #7A4CF0; --fz: 'Unbounded', 'Onest', sans-serif; --ft: 'Onest', system-ui, sans-serif; --fw: 500; --ls: -.045em; } .kn-e { position: absolute; left: 0; top: 0; color: var(--tt); font-family: var(--ft); line-height: 1.3; transform-origin: 50% 0; transition: color .5s, background-color .5s, border-color .5s; } .kn-e * { transition: color .5s, background-color .5s, border-color .5s; } .e-bg { background: var(--tb); } .e-bg.e-surf { background: var(--ts); } .e-bg.e-plate { background: var(--tp); } .e-bar { border-bottom: 1px solid var(--tl); } .e-logo { display: flex; align-items: center; font-family: var(--fz); font-weight: var(--fw); letter-spacing: var(--ls); white-space: nowrap; } .e-logo i { font-style: normal; color: var(--ta); } .e-menu { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; overflow: hidden; color: var(--tm); } .e-menu span { margin-left: 1.7em; } .e-menu span.on { color: var(--tt); font-weight: 600; } .e-burger { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; } .e-burger i { display: block; width: 1.4em; height: .14em; margin: .16em 0; border-radius: .1em; background: var(--tt); } .e-btn, .kn-e .ib { display: flex; align-items: center; justify-content: center; border-radius: .7em; background: var(--ta); color: var(--to); font-weight: 600; white-space: nowrap; } .e-btn2 { display: flex; align-items: center; justify-content: center; border-radius: .7em; border: 1.5px solid var(--tt); color: var(--tt); font-weight: 600; white-space: nowrap; } .e-chip { display: flex; align-items: center; justify-content: center; border-radius: 99px; background: var(--tp); color: var(--ta); font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .e-h1 { font-family: var(--fz); font-weight: var(--fw); letter-spacing: var(--ls); line-height: 1.06; } .e-h2 { font-family: var(--fz); font-weight: var(--fw); letter-spacing: var(--ls); line-height: 1.12; white-space: nowrap; } .e-p { color: var(--tm); line-height: 1.45; } .e-link { display: flex; align-items: center; justify-content: flex-end; color: var(--ta); font-weight: 600; white-space: nowrap; } .e-art { border-radius: 1.4em; background: var(--tp); overflow: hidden; } .e-art i { position: absolute; display: block; } .e-art .a1 { left: 7%; top: 11%; width: 56%; height: 78%; border-radius: 1.2em; background: var(--ta); opacity: .9; } .e-art .a2 { left: 50%; top: 14%; width: 30%; height: 36%; border-radius: 50%; background: var(--t2); } .e-art .a3 { right: 7%; bottom: 11%; width: 44%; height: 34%; border-radius: .9em; background: var(--tb); box-shadow: 0 .8em 1.6em -.8em rgba(0, 0, 0, .25); } .e-art .a3 b { position: absolute; left: 10%; top: 22%; width: 60%; height: 12%; border-radius: .3em; background: var(--tl); } .e-art .a3 u { position: absolute; left: 10%; top: 48%; width: 38%; height: 12%; border-radius: .3em; background: var(--tl); } .e-art .a3 s { position: absolute; right: 10%; bottom: 18%; width: 30%; height: 22%; border-radius: .4em; background: var(--ta); } .e-card { display: flex; flex-direction: column; padding: .55em; border-radius: .9em; background: var(--tb); border: 1px solid var(--tl); } .e-card .ci { position: relative; flex: 1; border-radius: .6em; background: var(--tp); overflow: hidden; } .e-card .ci b { position: absolute; left: 26%; top: 22%; width: 48%; height: 56%; background: var(--ta); opacity: .22; border-radius: 50%; } .e-c2 .ci b { border-radius: .6em; transform: rotate(12deg); background: var(--t2); opacity: .45; } .e-c3 .ci b { border-radius: 50% 50% .4em .4em; } .e-c4 .ci b { background: transparent; border: 1em solid var(--t2); opacity: .5; } .e-card .cn { margin: .55em .2em 0; font-weight: 500; white-space: nowrap; } .e-card .cp { margin: .1em .2em .1em; font-weight: 700; color: var(--ta); white-space: nowrap; } .e-card .ad { position: absolute; right: .9em; bottom: .9em; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--ta); color: var(--to); display: flex; align-items: center; justify-content: center; font-weight: 600; } .sk { display: block; height: .5em; margin-top: .55em; border-radius: .25em; background: var(--tl); width: 88%; } .sk.s2 { width: 64%; } .sk.s3 { width: 42%; } .sk.s4 { width: 5em; margin: 0; } .e-feat { padding: 1em 1.1em; border-radius: .9em; background: var(--tb); border: 1px solid var(--tl); } .e-feat .fi { display: flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; border-radius: .7em; background: var(--tp); color: var(--ta); } .e-feat .fi svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .e-feat b { display: block; margin: .7em 0 0; font-weight: 600; white-space: nowrap; } .e-mobfeat { display: flex; align-items: flex-start; } .e-rev { padding: 1em 1.1em; border-radius: .9em; background: var(--ts); } .e-rev .st { color: var(--t2); letter-spacing: .12em; font-size: 1.05em; } .e-rev .au { display: flex; align-items: center; margin-top: .9em; } .e-rev .au i { width: 1.9em; height: 1.9em; margin-right: .6em; border-radius: 50%; background: var(--tp); } .e-days { display: flex; } .e-days span { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: .45em; border-radius: .7em; background: var(--tb); border: 1px solid var(--tl); color: var(--tm); font-size: .9em; line-height: 1.2; } .e-days span:last-child { margin-right: 0; } .e-days span b { color: var(--tt); font-size: 1.15em; } .e-days span.on { background: var(--ta); border-color: var(--ta); color: var(--to); } .e-days span.on b { color: var(--to); } .e-slots { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; grid-gap: .5em; } .e-slots span { display: flex; align-items: center; justify-content: center; border-radius: .6em; border: 1px solid var(--tl); background: var(--tb); font-weight: 500; } .e-slots span.on { border-color: var(--ta); color: var(--ta); background: var(--tp); font-weight: 700; } .e-pick { display: flex; flex-direction: column; padding: 1.2em 1.3em; border-radius: 1em; background: var(--tb); border: 1px solid var(--tl); } .e-pick small { color: var(--tm); font-size: .85em; } .e-pick b { margin-top: .2em; font-family: var(--fz); font-weight: var(--fw); letter-spacing: var(--ls); font-size: 1.6em; } .e-pick .ib { margin-top: auto; height: 3em; } .e-in { display: flex; align-items: center; padding: 0 1em; border-radius: .7em; background: var(--tb); border: 1px solid var(--tl); color: var(--tm); } .e-map { border-radius: 1em; background: var(--tp); overflow: hidden; background-image: linear-gradient(var(--tl) 1px, transparent 1px), linear-gradient(90deg, var(--tl) 1px, transparent 1px); background-size: 2.4em 2.4em; } .e-map i { position: absolute; display: block; background: var(--tb); } .e-map .r1 { left: -10%; right: -10%; top: 58%; height: .9em; transform: rotate(-8deg); } .e-map .r2 { top: -10%; bottom: -10%; left: 38%; width: .9em; transform: rotate(14deg); } .e-map .pin { left: 44%; top: 30%; width: 2.2em; height: 2.2em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ta); } .e-map .pin::after { content: ''; position: absolute; left: 50%; top: 50%; width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border-radius: 50%; background: var(--to); } .e-info p { margin: 0 0 .8em; } .e-info small { display: block; color: var(--tm); font-size: .78em; letter-spacing: .06em; text-transform: uppercase; } .e-info .sk { margin-top: .4em; } .e-fcols { display: flex; } .e-fcols span { flex: 1 1 0; margin-right: 2em; } .e-fcols span .sk { margin-top: 0; margin-bottom: .55em; background: var(--tl); } .e-znak { display: flex; align-items: center; justify-content: center; border-radius: 99px; border: 1px solid var(--tl); background: var(--tb); color: var(--tm); white-space: nowrap; } .e-znak b { margin-left: .35em; color: var(--tt); font-family: 'Unbounded', sans-serif; font-weight: 600; letter-spacing: -.03em; } .e-znak b i { font-style: normal; color: #3B7BF6; } .e-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px dashed #C3CDE0; border-radius: 1em; color: var(--tm); } .e-empty b { display: flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; margin-bottom: .6em; border-radius: 50%; background: var(--tp); color: var(--ta); font-size: 1.4em; font-weight: 500; } .e-empty .m { display: none; } .kn-page.is-mob .e-empty .p { display: none; } .kn-page.is-mob .e-empty .m { display: inline; } /* без JS — статичный пример собранной страницы (обычная вёрстка, ПК) */ .kn-static { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: var(--tb); color: var(--tt); font-family: var(--ft); font-size: 13px; } .js .kn-static { display: none; } .s-bar { display: flex; align-items: center; height: 46px; padding: 0 22px; border-bottom: 1px solid var(--tl); } .s-bar b { font-weight: 650; font-size: 15px; } .s-bar b i { font-style: normal; color: var(--ta); } .s-bar span { margin-left: auto; color: var(--tm); } .s-bar u, .s-ht u { text-decoration: none; margin-left: 18px; padding: 8px 14px; border-radius: 8px; background: var(--ta); color: var(--to); font-weight: 600; } .s-hero { display: flex; align-items: center; padding: 28px 22px; background: var(--ts); } .s-ht { flex: 1; } .s-ht u { display: inline-block; margin: 14px 0 0; } .s-chip { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--tp); color: var(--ta); font-weight: 600; font-size: 11px; } .s-h1 { font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1.05; margin: 10px 0 8px; } .s-p { color: var(--tm); } .s-art { flex: 0 0 38%; height: 170px; margin-left: 20px; border-radius: 16px; background: var(--tp); position: relative; overflow: hidden; } .s-art i { position: absolute; left: 10%; top: 12%; width: 55%; height: 76%; border-radius: 12px; background: var(--ta); opacity: .9; } .s-cat { padding: 22px; } .s-h2 { font-size: 20px; font-weight: 650; margin-bottom: 12px; } .s-row { display: flex; } .s-row i { flex: 1; height: 120px; margin-right: 12px; border-radius: 12px; background: var(--tp); } .s-row i:last-child { margin-right: 0; } /* ================= РЕЖИМ ПЛЁНКИ (.film-on): сцена на весь экран ================= */ .film-on .kon { padding: var(--head, 68px) 0 46px; display: flex; visibility: hidden; z-index: 2; } .film-on .kon-in { width: 100%; height: 100%; display: flex; flex-direction: column; padding-top: 2.1vh; padding-bottom: .6vh; } .film-on .kn-head { flex: none; } .film-on .kn-body { flex: 1 1 0; min-height: 0; height: auto; } .kon.kn-live .kn-tsel, .kon.kn-live .kn-drag, .kon.kn-live .kn-bsel, .kon.kn-live .kn-ptr, .kon.kn-live .kn-ghost, .kon.kn-live .kn-scan { display: block; } .kon.kn-live .kn-ghost { display: block; } .kon.kn-live .kn-tsel, .kon.kn-live .kn-drag, .kon.kn-live .kn-bsel, .kon.kn-live .kn-ptr, .kon.kn-live .kn-ghost, .kon.kn-live .kn-scan { opacity: 0; } .kon.kn-live .kn-sb { display: block; } .kn-sb { display: none; } @media (min-width: 1500px) { .film-on .kon .wrap { max-width: none; padding: 0 5vw; } } /* ================= ПЛАНШЕТ ================= */ @media (max-width: 1100px) { .kon { --ih: 2.3em; } .kn-body { grid-template-columns: 15em minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "lib box" "ctl box" "side box"; height: 44em; } .kn-hint { display: none; } .kn-side .kn-ph, .kn-tar, .kn-note, .kn-feat { display: none; } .kn-now { display: block; margin-top: .3em; font-size: .84em; text-align: center; color: #15803D; font-weight: 600; } .kn-sub { max-width: 17em; } } /* ================= ТЕЛЕФОН ================= */ @media (max-width: 720px) { .kon { padding: 80px 0 50px; } .kn-head { display: block; margin-bottom: 12px; } .kn-kick { font-size: 11px; margin-bottom: 10px; } .kn-h2 { font-size: min(7.6vw, 30px); letter-spacing: -.045em; } .kn-sub { margin: 10px 0 0; font-size: 15px; max-width: none; } .kn-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 470px auto auto auto; grid-template-areas: "box" "lib" "ctl" "side"; row-gap: 8px; height: auto; } .kn-card { padding: 0; border: 0; background: none; border-radius: 0; } .kn-libc .kn-ph, .kn-thl, .kn-sw { display: none; } .kn-lib { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * var(--gut, 16px)); padding: 0 var(--gut, 16px); } .kn-lib::-webkit-scrollbar { display: none; } .kn-it { flex: none; width: auto; height: 44px; margin: 0 6px 0 0; padding: 0 12px 0 6px; font-size: 15px; background: #fff; border-color: var(--khair); } .kn-it span { overflow: visible; } .kn-ico { width: 30px; height: 30px; margin-right: 8px; } .kn-it em { width: 20px; height: 20px; margin-left: 10px; } .kn-row { flex-direction: row; } .kn-btn { flex: 1 1 0; min-width: 0; height: 48px; margin: 0 8px 0 0; padding: 0 10px; font-size: 15px; } .kn-btn span { overflow: hidden; text-overflow: ellipsis; } .kn-dev { flex: 1.45 1 0; min-width: 0; } .kn-dev button { height: 44px; font-size: 15px; padding: 0 6px; } .kn-dev button svg { display: none; } .kn-side { flex-direction: row; align-items: center; } .kn-cnt { flex: none; margin: 0; } .kn-pm { width: 44px; height: 44px; font-size: 20px; } .kn-n { flex: none; min-width: 6.8em; font-size: 15px; } .kn-n b { font-size: 26px; } .kn-now { flex: 1; min-width: 0; margin: 0 0 0 8px; text-align: right; font-size: 13px; white-space: nowrap; } .kn-now .nl { display: none; } .film-on .kon { padding-bottom: 36px; } .film-on .kon-in { padding-top: 10px; padding-bottom: 4px; } .film-on .kn-sub { margin-top: 6px; font-size: 14px; line-height: 1.35; } .film-on .kn-sub .lg { display: none; } .film-on .kn-sub .sh { display: inline; } .film-on .kn-body { grid-template-rows: minmax(0, 1fr) auto auto auto; } .kn-tsel .kn-tag { font-size: .3em; } } @media (max-width: 380px) { .kn-btn .lg { display: none; } .kn-btn .sh { display: inline; } .kn-now .pm { display: none; } } @media (prefers-reduced-motion: reduce) { .kn-e, .kn-e *, .kn-it, .kn-tar-m, .kn-frame, .kn-chrome, .kn-notch { transition: none !important; } } /* ===================================================================================== ШАГ 4 СБОРКИ (08.10): сцены 6–8 из прототипов без изменений вида — их scena.css целиком ниже. Скрытая подпись (.sr) — была в обвязке прототипов (proto.css), нужна таблице сравнения тарифов. ===================================================================================== */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ===================== СЦЕНА 6 «ПРЕИМУЩЕСТВА» — scena_preim/scena.css (копия целиком) ===================== */ /* scena_preim/scena.css — СЦЕНА 06 «ПРЕИМУЩЕСТВА» (переносится в главную как есть; все классы с приставкой p6-). Опирается на переменные и классы главной: --ink --soft --mute --hair --blue --green-d --violet … --f-big --f-text --f-mono, .wrap .mono .kicker .layer и режим плёнки .film-on (ставит kino.js / proto.js на ). Всё внутри сцены — в em от кегля сцены: его подбирает scena.js по месту (fit), без JS — clamp ниже. Без JS и при «уменьшить движение» — обычный блок ленты, домен показан подключённым, всё видно сразу. */ .p6 { --p6fs: clamp(15px, min(1.06vw, 1.9vh), 28px); font-size: var(--p6fs); position: relative; z-index: 1; padding: 100px 0 72px; } .p6 .mono { font-size: max(12px, .7em); } .p6-in { position: relative; } .p6 code { font: 600 1em/1 var(--f-mono); color: var(--ink); } html:not(.js) .p6-jsonly { display: none !important; } /* без JS поле не работает — и не обещаем интерактив */ /* ---------- шапка: кикер, заголовок (мозаика → резкость), пояснение ---------- */ .p6-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5em; } .p6-ht { min-width: 0; } .p6-kick { color: var(--blue-d); margin: 0 0 .9em; } .p6-h { position: relative; font: 460 3.1em/1.1 var(--f-big); letter-spacing: -.04em; margin: 0; } .p6-ln { display: block; white-space: nowrap; } .p6-h .acc { color: var(--violet-d); } .p6-mos { display: none; position: absolute; left: 0; top: 0; pointer-events: none; } .p6-lead { flex: 0 1 25em; margin: 0 0 .35em 3vw; font-size: max(15px, 1em); line-height: 1.5; color: var(--soft); } /* ---------- домен: кабинет + браузер ---------- */ .p6-dom { display: flex; align-items: stretch; } .p6-cab { flex: 0 0 47%; min-width: 0; background: #fff; border: 1px solid var(--hair); padding: 1em 1.25em 1.05em; position: relative; } .p6-cab-top { display: flex; align-items: center; min-height: 1.9em; margin-bottom: .55em; } .p6-cab-top .mono { color: var(--ink); margin-right: auto; } .p6-demo { margin-left: .8em; padding: .15em .5em; border: 1px solid var(--hair); color: var(--mute) !important; } .p6-pill { display: none; align-items: center; font-size: max(12.5px, .78em); font-weight: 600; padding: .22em .7em; border: 1px solid; white-space: nowrap; } .p6-pill i { width: .45em; height: .45em; border-radius: 50%; background: currentColor; margin-right: .45em; } .p6-pill-wait { color: #9A5B06; border-color: #EBD6B4; background: #FBF3E8; } .p6-pill-ok { color: var(--green-d); border-color: #BFE3CF; background: var(--green-l); } .st-1 .p6-pill-wait, .st-2 .p6-pill-wait, .st-3 .p6-pill-wait { display: inline-flex; } .st-3 .p6-pill-wait i { -webkit-animation: p6Blink 1s ease-in-out infinite; animation: p6Blink 1s ease-in-out infinite; } .st-4 .p6-pill-ok, .p6:not(.p6-js) .p6-pill-ok { display: inline-flex; } .p6-form { position: relative; min-height: 5.1em; } .p6-f1 { display: none; } .st-1 .p6-f0, .st-2 .p6-f0, .st-3 .p6-f0, .st-4 .p6-f0 { display: none; } .st-1 .p6-f1, .st-2 .p6-f1, .st-3 .p6-f1, .st-4 .p6-f1 { display: block; } .p6-lab { display: block; font-size: max(13px, .82em); color: var(--soft); margin-bottom: .35em; } .p6-dname { font-size: max(13px, .82em); color: var(--soft); margin: 0 0 .35em; line-height: 1.5; } .p6-dname b { font: 600 1.18em/1.2 var(--f-mono); color: var(--ink); word-break: break-all; } .p6-row { display: flex; align-items: stretch; flex-wrap: wrap; } .p6-inp { flex: 1 1 12em; min-width: 0; height: max(44px, 2.8em); padding: 0 .8em; border: 1.5px solid var(--ink); border-radius: 0; background: #fff; font: 500 max(16px, 1.02em)/1 var(--f-mono); color: var(--ink); -webkit-appearance: none; appearance: none; margin: 0 .6em 0 0; } .p6-inp::placeholder { color: #A3ACBE; opacity: 1; } .p6-inp:focus { outline: 3px solid rgba(124, 92, 250, .35); outline-offset: 0; border-color: var(--violet-d); } .p6-inp.is-type { border-color: var(--violet-d); } .p6-btn { flex: 0 0 auto; height: max(44px, 2.8em); padding: 0 1.2em; border: 0; border-radius: 999px; background: var(--blue); color: #fff; cursor: pointer; font: 600 max(14px, .92em)/1 var(--f-text); white-space: nowrap; transition: background .25s var(--ease), transform .25s var(--ease), opacity .25s; margin: 0 .6em 0 0; } .p6-btn:last-child { margin-right: 0; } .p6-btn:hover { background: var(--blue-d); } .p6-btn:focus-visible { outline: 3px solid rgba(59, 123, 246, .45); outline-offset: 2px; } .p6-btn.is-press { transform: scale(.94); background: var(--blue-d); } .p6-btn[disabled] { opacity: .45; cursor: default; } .p6-del { background: #fff; color: #B4432F; border: 1.5px solid #B4432F; } .p6-del:hover { background: #FBEFED; } .p6-c1 { display: none; } .st-3 .p6-c0 { display: none; } .st-3 .p6-c1 { display: inline; } .st-4 #p6Check { display: none; } .st-2 #p6Check:not([disabled]) { box-shadow: 0 0 0 0 rgba(59, 123, 246, .5); -webkit-animation: p6Ping 1.6s var(--ease) infinite; animation: p6Ping 1.6s var(--ease) infinite; } .p6-msg { min-height: 3em; margin: .55em 0 .6em; font-size: max(13px, .84em); line-height: 1.5; color: var(--soft); } .p6-msg b { color: var(--ink); } .p6-msg.is-warn { color: #6B4A0E; } .p6-msg.is-err { color: #A6473A; } /* запись для регистратора — как таблица шага 4 в кабинете */ .p6-rec { border: 1px solid var(--hair); background: var(--bg); position: relative; } .p6-rec-h { display: flex; justify-content: space-between; padding: .55em .8em .45em; border-bottom: 1px solid var(--hair); color: var(--soft) !important; margin: 0; } .p6-rec-ok { color: var(--green-d); opacity: 0; transition: opacity .4s; } .st-2 .p6-rec-ok, .st-3 .p6-rec-ok, .st-4 .p6-rec-ok, .p6:not(.p6-js) .p6-rec-ok { opacity: 1; } .p6-tab { margin: 0; font-size: max(13px, .84em); } .p6-tab > div { display: flex; align-items: center; padding: .38em .8em; border-top: 1px solid var(--hair); } .p6-tab > div:first-child { border-top: 0; } .p6-tab dt { flex: 0 0 13em; color: var(--soft); } .p6-tab dd { margin: 0; min-width: 0; color: var(--ink); } .p6-tab code { font-size: 1.12em; } #p6RName { display: inline-block; padding: .12em .3em; margin: -.12em 0; background: var(--yellow); transition: background .3s; word-break: break-all; } #p6RName.is-ph { background: transparent; color: var(--mute); } .p6-rnote { color: var(--mute); } .p6-www { margin: 0; padding: .4em .8em .5em; border-top: 1px dashed var(--hair); font-size: max(12.5px, .8em); color: var(--soft); } .p6-www.is-off { visibility: hidden; } html:not(.js) .p6-www.is-off { display: none; } .st-2 .p6-rec, .st-3 .p6-rec { border-color: #BFE3CF; } .p6-rec.is-flash { -webkit-animation: p6Flash 1.1s var(--ease); animation: p6Flash 1.1s var(--ease); } /* шаги подключения: линия с четырьмя узлами */ .p6-steps { list-style: none; display: flex; margin: .95em 0 0; padding: 0; counter-reset: s; } .p6-steps li { flex: 1 1 0; min-width: 0; position: relative; padding: 1.35em .4em 0 0; font-size: max(12.5px, .78em); line-height: 1.35; color: var(--mute); transition: color .4s; } .p6-steps li::before { content: ''; position: absolute; left: 0; right: 0; top: .5em; height: 2px; background: var(--hair); } .p6-steps li::after { content: ''; position: absolute; left: 0; top: .5em; height: 2px; width: 100%; background: var(--green); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; transition: transform .7s var(--ease); } .p6-steps li:last-child::before, .p6-steps li:last-child::after { right: auto; width: 1.1em; } .p6-steps b { position: absolute; left: 0; top: 0; width: 1.05em; height: 1.05em; border-radius: 50%; border: 2px solid var(--hair); background: #fff; z-index: 1; transition: border-color .3s, background .3s; } .p6-steps b::after { content: ''; position: absolute; left: .26em; top: .12em; width: .25em; height: .48em; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0); transition: transform .35s var(--ease) .1s; } .p6-steps span { display: block; padding-right: .3em; } .p6-steps small { display: block; font-size: 1em; color: var(--mute); } .p6-steps li.is-done { color: var(--ink); } .p6-steps li.is-done b { border-color: var(--green); background: var(--green); } .p6-steps li.is-done b::after { -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } .p6-steps li.is-done::after { -webkit-transform: scaleX(1); transform: scaleX(1); } .p6-steps li.is-now { color: var(--ink); } .p6-steps li.is-now b { border-color: var(--violet); -webkit-animation: p6Ring 1.2s var(--ease) infinite; animation: p6Ring 1.2s var(--ease) infinite; } .p6:not(.p6-js) .p6-steps li { color: var(--ink); } .p6:not(.p6-js) .p6-steps b { border-color: var(--green); background: var(--green); } .p6-plan { margin: .85em 0 0; font-size: max(12.5px, .78em); line-height: 1.45; color: var(--soft); } /* браузер покупателя */ .p6-br { flex: 1 1 auto; min-width: 0; margin-left: 1.3em; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); box-shadow: 0 1.6em 3em -2em rgba(13, 19, 36, .28); position: relative; overflow: hidden; } .p6-br-bar { display: flex; align-items: center; padding: .6em .8em; background: #F1F4FA; border-bottom: 1px solid var(--hair); } .p6-br-dots { display: flex; margin-right: .9em; } .p6-br-dots i { width: .62em; height: .62em; border-radius: 50%; background: #D5DBE7; margin-right: .35em; } .p6-url { position: relative; flex: 1 1 auto; min-width: 0; height: 2.35em; display: flex; align-items: center; padding: 0 .9em; background: #fff; border-radius: 999px; border: 1px solid var(--hair); overflow: hidden; transition: border-color .4s, box-shadow .4s; } .p6-lock { flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-right: .55em; color: var(--mute); transition: color .4s; } .p6-lock svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; } .p6-spin { display: none; flex: 0 0 auto; width: 1em; height: 1em; margin-right: .55em; border: 2px solid var(--hair); border-top-color: var(--violet); border-radius: 50%; -webkit-animation: p6Spin .8s linear infinite; animation: p6Spin .8s linear infinite; } .st-3 .p6-spin { display: block; } .st-3 .p6-lock { display: none; } .p6-u { font: 500 max(13px, .92em)/1 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); } .p6-u-old { color: var(--soft); } .p6-u-new { position: absolute; left: 2.5em; right: .9em; color: var(--ink); font-weight: 600; opacity: 0; -webkit-transform: translateY(110%); transform: translateY(110%); } .st-3 .p6-u-old, .st-4 .p6-u-old, .p6:not(.p6-js) .p6-u-old { opacity: 0; -webkit-transform: translateY(-110%); transform: translateY(-110%); } .p6-u-path { color: var(--soft); font-weight: 500; } .st-3 .p6-u-new, .st-4 .p6-u-new, .p6:not(.p6-js) .p6-u-new { opacity: 1; -webkit-transform: none; transform: none; } .st-4 .p6-lock, .p6:not(.p6-js) .p6-lock { color: var(--green-d); } .st-4 .p6-url, .p6:not(.p6-js) .p6-url { border-color: #BFE3CF; box-shadow: 0 0 0 3px var(--green-l); } .st-4 .p6-lock { -webkit-animation: p6Lock .7s var(--ease); animation: p6Lock .7s var(--ease); } .p6-br-load { height: 2px; position: relative; overflow: hidden; } .p6-br-load i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, var(--violet), var(--green)); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .st-4 .p6-br-load i { -webkit-animation: p6Load 1.1s var(--ease) both; animation: p6Load 1.1s var(--ease) both; } /* страница-пример: только каркас, без товаров */ .p6-page { position: relative; flex: 1 1 auto; min-height: 9em; padding: 1em 1.2em; overflow: hidden; } .p6-pg-top { display: flex; align-items: center; padding-bottom: .8em; border-bottom: 1px solid var(--hair); } .p6-pg-logo { font: 600 1.05em/1 var(--f-big); letter-spacing: -.03em; color: var(--ink); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p6-pg-nav { display: flex; margin: 0 auto 0 1.4em; } .p6-pg-nav i { width: 3.2em; height: .5em; border-radius: 99px; background: #E4E9F2; margin-right: .8em; } .p6-pg-cart { font-size: .78em; font-weight: 600; padding: .45em .9em; border-radius: 99px; background: var(--ink); color: #fff; } .p6-pg-hero { padding: 1.1em 0 .9em; } .p6-pg-hero i { display: block; height: .95em; border-radius: 99px; background: #DCE2EE; margin-bottom: .55em; } .p6-pg-hero .w60 { width: 58%; height: 1.25em; background: #CBD3E2; } .p6-pg-hero .w40 { width: 38%; } .p6-pg-btn { display: inline-block; margin-top: .3em; font-size: .78em; font-weight: 600; padding: .5em 1.1em; border-radius: 99px; background: var(--violet); color: #fff; } .p6-pg-grid { display: flex; flex-wrap: wrap; margin: 0 -.35em; } .p6-pg-grid i { flex: 0 0 auto; width: calc(33.333% - .7em); margin: 0 .35em .7em; height: 4.4em; background: linear-gradient(180deg, #EEF1F7 0 62%, #fff 62%); border: 1px solid #E6EAF2; } .p6-pg-tag { position: absolute; right: 1.2em; bottom: .8em; padding: .15em .5em; background: #fff; border: 1px solid var(--hair); color: var(--mute) !important; } .st-4 .p6-page { -webkit-animation: p6Page .9s var(--ease) .25s both; animation: p6Page .9s var(--ease) .25s both; } .p6-br-note { margin: 0; padding: .7em 1.2em .8em; border-top: 1px solid var(--hair); font-size: max(12.5px, .8em); line-height: 1.45; color: var(--soft); background: #FBFCFE; } .p6-br-note .mono { color: var(--coral-d); margin-right: .6em; } /* ---------- пять преимуществ ---------- */ .p6-plus { list-style: none; display: flex; margin: 1.35em 0 0; padding: 0; } .p6-p { flex: 1 1 0; min-width: 0; margin-left: .9em; padding: .85em 1em 1em; background: rgba(255, 255, 255, .86); border: 1px solid var(--hair); position: relative; cursor: default; outline: none; transition: border-color .35s, background .35s, box-shadow .35s; } .p6-p:first-child { margin-left: 0; } .p6-p::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--pc, var(--violet)); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; transition: transform .6s var(--ease); } .p6-p.on { border-color: #CDD5E3; background: #fff; box-shadow: 0 1.2em 2.4em -1.8em rgba(13, 19, 36, .35); } .p6-p.on::before { -webkit-transform: none; transform: none; } .p6-p:focus-visible { box-shadow: 0 0 0 3px rgba(124, 92, 250, .35); } .p6-p[data-p="0"] { --pc: var(--coral); } .p6-p[data-p="1"] { --pc: var(--violet); } .p6-p[data-p="2"] { --pc: var(--green); } .p6-p[data-p="3"] { --pc: var(--green-d); } .p6-p[data-p="4"] { --pc: #E0A800; } .p6-p h3 { font: 500 1.08em/1.2 var(--f-big); letter-spacing: -.03em; margin: .6em 0 .3em; } .p6-p p { font-size: max(13px, .84em); line-height: 1.45; color: var(--soft); } .p6-p-chek .v1 { display: none; } html:not(.js) .p6-p-chek .v1 { display: block; margin-top: .3em; } .p6-p-chek.is-v1 .v0 { display: none; } .p6-p-chek.is-v1 .v1 { display: block; } .p6-ill { position: relative; height: 3em; display: flex; align-items: center; overflow: hidden; } /* 0 · без приложения: телефон, QR, полоса скана → экран витрины */ .p6-ill-app .ph { position: relative; width: 1.9em; height: 2.9em; border: 2px solid var(--ink); border-radius: .45em; overflow: hidden; background: #fff; } .p6-ill-app .qr { position: absolute; left: .28em; right: .28em; top: .6em; height: 1.2em; background: linear-gradient(90deg, var(--ink) 30%, transparent 30% 45%, var(--ink) 45% 55%, transparent 55% 70%, var(--ink) 70%) 0 0 / 100% 33% no-repeat, linear-gradient(90deg, transparent 15%, var(--ink) 15% 40%, transparent 40% 60%, var(--ink) 60% 85%, transparent 85%) 0 50% / 100% 33% no-repeat, linear-gradient(90deg, var(--ink) 25%, transparent 25% 50%, var(--ink) 50% 62%, transparent 62% 75%, var(--ink) 75%) 0 100% / 100% 33% no-repeat; } .p6-ill-app .scan { position: absolute; left: 0; right: 0; top: .5em; height: 2px; background: var(--coral); opacity: 0; } .p6-ill-app .scr { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: .55em .3em; background: #fff; opacity: 0; } .p6-ill-app .scr i { display: block; height: .32em; border-radius: 99px; background: var(--coral-l); margin-bottom: .3em; } .p6-ill-app .scr i:first-child { background: var(--coral); width: 70%; } .p6-ill-app .nfc { position: relative; width: 2em; height: 2em; margin-left: .7em; } .p6-ill-app .nfc i { position: absolute; left: 0; top: 50%; width: 1.4em; height: 1.4em; margin-top: -.7em; border: 2px solid var(--coral); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: .35; } .p6-ill-app .nfc i + i { left: .45em; width: 2.2em; height: 2.2em; margin-top: -1.1em; } .on .p6-ill-app .scan { -webkit-animation: p6Scan 2.4s var(--ease) infinite; animation: p6Scan 2.4s var(--ease) infinite; } .on .p6-ill-app .scr { -webkit-animation: p6Scr 2.4s var(--ease) infinite; animation: p6Scr 2.4s var(--ease) infinite; } .on .p6-ill-app .nfc i { -webkit-animation: p6Wave 1.2s ease-out infinite; animation: p6Wave 1.2s ease-out infinite; } .on .p6-ill-app .nfc i + i { -webkit-animation-delay: .2s; animation-delay: .2s; } /* 1 · одна витрина: четыре входа сходятся в одну */ .p6-ill-all { flex-direction: column; align-items: stretch; justify-content: space-between; } .p6-ill-all .ch { display: flex; justify-content: space-between; } .p6-ill-all .ch i { font: 500 max(11px, .66em)/1 var(--f-mono); font-style: normal; letter-spacing: .04em; padding: .35em .45em; border: 1px solid var(--hair); background: #fff; color: var(--soft); transition: all .3s; } .p6-ill-all .ln { position: relative; height: .8em; } .p6-ill-all .one { align-self: center; font: 600 max(11px, .66em)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: .45em .8em; background: var(--violet-l); color: var(--violet-d); border: 1px solid #D9D0FF; } .p6-ill-all .ln::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 50%; border: 2px solid rgba(124, 92, 250, .25); border-top: 0; } .p6-ill-all .ln::after { content: ''; position: absolute; left: 50%; top: 50%; bottom: 0; width: 2px; margin-left: -1px; background: rgba(124, 92, 250, .25); } .on .p6-ill-all .ch i { -webkit-animation: p6Chip 4s var(--ease) infinite; animation: p6Chip 4s var(--ease) infinite; } /* 5 каналов × 0,8 с (добавлен MAX) */ .on .p6-ill-all .ch i:nth-child(2) { -webkit-animation-delay: .8s; animation-delay: .8s; } .on .p6-ill-all .ch i:nth-child(3) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .on .p6-ill-all .ch i:nth-child(4) { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .on .p6-ill-all .ch i:nth-child(5) { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; } .on .p6-ill-all .one { -webkit-animation: p6One .8s var(--ease) infinite; animation: p6One .8s var(--ease) infinite; } /* 2 · чек сам: переключатель + чек печатается */ .p6-ill-chek { justify-content: space-between; } .p6-ill-chek .tg { display: flex; border: 1.5px solid var(--ink); } .p6-ill-chek .tg button { min-height: max(32px, 2.1em); padding: 0 .6em; border: 0; background: #fff; font: 600 max(12px, .72em)/1 var(--f-text); color: var(--soft); cursor: pointer; white-space: nowrap; } .p6-ill-chek .tg button.on { background: var(--green-d); color: #fff; } .p6-ill-chek .tg button:focus-visible { outline: 3px solid rgba(22, 163, 74, .4); outline-offset: 1px; } .p6-ill-chek .rc { position: relative; flex: 0 0 auto; width: 2.3em; height: 2.9em; margin-left: .6em; background: #fff; border: 1px solid var(--hair); border-bottom: 0; padding: .45em .35em 0; -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - .3em) no-repeat, radial-gradient(circle at 50% 100%, transparent .18em, #000 .2em) bottom / .45em .3em repeat-x; mask: linear-gradient(#000, #000) top / 100% calc(100% - .3em) no-repeat, radial-gradient(circle at 50% 100%, transparent .18em, #000 .2em) bottom / .45em .3em repeat-x; } .p6-ill-chek .rc i { display: block; height: .26em; background: #D5DBE7; margin-bottom: .32em; border-radius: 99px; } .p6-ill-chek .rc i.s { width: 60%; background: var(--green); } .on .p6-ill-chek .rc { -webkit-animation: p6Print 2.6s var(--ease) infinite; animation: p6Print 2.6s var(--ease) infinite; } /* 3 · эквайринг: лента банков + скрытый ключ */ .p6-ill-bank { flex-direction: column; align-items: stretch; justify-content: center; } .p6-ill-bank .tk { position: relative; overflow: hidden; height: 1.7em; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .p6-ill-bank .tk-in { position: absolute; left: 0; top: 0; display: flex; white-space: nowrap; } .p6-ill-bank .tk-in i { font: 600 max(12px, .74em)/1 var(--f-text); font-style: normal; padding: .45em .7em; margin-right: .45em; border: 1px solid var(--hair); background: #fff; color: var(--ink); } .on .p6-ill-bank .tk-in { -webkit-animation: p6Tick 9s linear infinite; animation: p6Tick 9s linear infinite; } .p6-ill-bank .key { display: flex; align-items: center; margin-top: .45em; color: var(--green-d); } .p6-ill-bank .key svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; margin-right: .45em; } .p6-ill-bank .dots { font: 600 max(12px, .74em)/1 var(--f-mono); letter-spacing: .08em; } .on .p6-ill-bank .dots { -webkit-animation: p6Blink 2s ease-in-out infinite; animation: p6Blink 2s ease-in-out infinite; } /* 4 · рядом с кассой: интеграции синхронизируются с кассой */ .p6-ill-kassa { justify-content: space-between; } .p6-ill-kassa .ig { display: flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; max-width: 11em; margin: -.12em .5em -.12em -.12em; } .p6-ill-kassa .ig i { font: 500 max(11px, .66em)/1 var(--f-mono); font-style: normal; padding: .25em .35em; margin: .12em; border: 1px solid var(--hair); background: #fff; color: var(--soft); } .p6-ill-kassa .ks { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; text-align: center; } .p6-ill-kassa .ks em { font: 600 max(11px, .66em)/1 var(--f-mono); font-style: normal; padding: .3em .5em; background: var(--yellow); color: var(--ink); } .p6-ill-kassa .ks b { font: 600 max(11px, .66em)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: .5em .5em; border: 1.5px solid var(--ink); border-top: 0; background: #fff; } .on .p6-ill-kassa .ks em { -webkit-animation: p6Lay 2.4s var(--ease) infinite; animation: p6Lay 2.4s var(--ease) infinite; } .on .p6-ill-kassa .ig i { -webkit-animation: p6Chip2 2.4s var(--ease) infinite; animation: p6Chip2 2.4s var(--ease) infinite; } .on .p6-ill-kassa .ig i:nth-child(2) { -webkit-animation-delay: .6s; animation-delay: .6s; } .on .p6-ill-kassa .ig i:nth-child(3) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .on .p6-ill-kassa .ig i:nth-child(4) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } /* мини-демо идут только в живой сцене (класс p6-live), в ленте без плёнки — тоже, пока блок на экране */ .p6:not(.p6-live) .p6-p * { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; } @-webkit-keyframes p6Scan { 0% { opacity: 0; top: .4em; } 10% { opacity: 1; } 45% { opacity: 1; top: 2em; } 50%, 100% { opacity: 0; top: 2em; } } @keyframes p6Scan { 0% { opacity: 0; top: .4em; } 10% { opacity: 1; } 45% { opacity: 1; top: 2em; } 50%, 100% { opacity: 0; top: 2em; } } @-webkit-keyframes p6Scr { 0%, 48% { opacity: 0; -webkit-transform: translateY(30%); transform: translateY(30%); } 58%, 92% { opacity: 1; -webkit-transform: none; transform: none; } 100% { opacity: 0; } } @keyframes p6Scr { 0%, 48% { opacity: 0; -webkit-transform: translateY(30%); transform: translateY(30%); } 58%, 92% { opacity: 1; -webkit-transform: none; transform: none; } 100% { opacity: 0; } } @-webkit-keyframes p6Wave { 0% { opacity: .15; } 40% { opacity: 1; } 100% { opacity: .15; } } @keyframes p6Wave { 0% { opacity: .15; } 40% { opacity: 1; } 100% { opacity: .15; } } @-webkit-keyframes p6Chip { 0%, 30%, 100% { background: #fff; color: var(--soft); border-color: var(--hair); } 6%, 22% { background: var(--violet); color: #fff; border-color: var(--violet); } } @keyframes p6Chip { 0%, 30%, 100% { background: #fff; color: var(--soft); border-color: var(--hair); } 6%, 22% { background: var(--violet); color: #fff; border-color: var(--violet); } } @-webkit-keyframes p6One { 0%, 100% { -webkit-transform: none; transform: none; } 30% { -webkit-transform: scale(1.06); transform: scale(1.06); } } @keyframes p6One { 0%, 100% { -webkit-transform: none; transform: none; } 30% { -webkit-transform: scale(1.06); transform: scale(1.06); } } @-webkit-keyframes p6Print { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 35%, 85% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes p6Print { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 35%, 85% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes p6Tick { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes p6Tick { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes p6Chip2 { 0%, 40%, 100% { border-color: var(--hair); color: var(--soft); } 10%, 28% { border-color: #E0A800; color: var(--ink); } } @keyframes p6Chip2 { 0%, 40%, 100% { border-color: var(--hair); color: var(--soft); } 10%, 28% { border-color: #E0A800; color: var(--ink); } } @-webkit-keyframes p6Lay { 0%, 100% { -webkit-transform: none; transform: none; } 30% { -webkit-transform: translateY(-.35em); transform: translateY(-.35em); } } @keyframes p6Lay { 0%, 100% { -webkit-transform: none; transform: none; } 30% { -webkit-transform: translateY(-.35em); transform: translateY(-.35em); } } @-webkit-keyframes p6Spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes p6Spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes p6Blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes p6Blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @-webkit-keyframes p6Ping { 0% { box-shadow: 0 0 0 0 rgba(59, 123, 246, .45); } 100% { box-shadow: 0 0 0 .7em rgba(59, 123, 246, 0); } } @keyframes p6Ping { 0% { box-shadow: 0 0 0 0 rgba(59, 123, 246, .45); } 100% { box-shadow: 0 0 0 .7em rgba(59, 123, 246, 0); } } @-webkit-keyframes p6Ring { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 250, .45); } 100% { box-shadow: 0 0 0 .5em rgba(124, 92, 250, 0); } } @keyframes p6Ring { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 250, .45); } 100% { box-shadow: 0 0 0 .5em rgba(124, 92, 250, 0); } } @-webkit-keyframes p6Flash { 0% { background: var(--green-l); } 100% { background: var(--bg); } } @keyframes p6Flash { 0% { background: var(--green-l); } 100% { background: var(--bg); } } @-webkit-keyframes p6Lock { 0% { -webkit-transform: scale(.4); transform: scale(.4); } 60% { -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { -webkit-transform: none; transform: none; } } @keyframes p6Lock { 0% { -webkit-transform: scale(.4); transform: scale(.4); } 60% { -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes p6Load { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); opacity: 1; } 80% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 0; } } @keyframes p6Load { 0% { -webkit-transform: scaleX(0); transform: scaleX(0); opacity: 1; } 80% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 0; } } @-webkit-keyframes p6Page { 0% { opacity: .25; } 100% { opacity: 1; } } @keyframes p6Page { 0% { opacity: .25; } 100% { opacity: 1; } } /* ================= РЕЖИМ ПЛЁНКИ ================= */ .film-on .p6 { padding: var(--head) 0 46px; display: flex; align-items: center; visibility: hidden; z-index: 2; } .film-on .p6-in { width: 100%; -webkit-transform-origin: 50% 40%; transform-origin: 50% 40%; } .film-on .p6-mos { display: block; } .film-on .p6-cab, .film-on .p6-br, .film-on .p6-p { will-change: transform, opacity; } .film-on .p6.p6-tall { align-items: stretch; } .film-on .p6-tall .p6-in { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: .8em; } /* большие мониторы: сцена на ~90% ширины, как «Условия», «Кабинет» и «Тарифы» */ @media (min-width: 1500px) { .p6 .wrap { max-width: none; padding: 0 5vw; } } /* ================= ПЛАНШЕТ ================= */ @media (max-width: 1100px) { .p6-head { display: block; } .p6-lead { margin: .9em 0 0; max-width: 40em; } .p6-plus { flex-wrap: wrap; margin-right: -.9em; } .p6-p { flex: 1 1 30%; margin: 0 .9em .9em 0; } .p6-p:first-child { margin-left: 0; } } /* ================= ТЕЛЕФОН ================= Всё в em от кегля сцены: 16 px, не ужимается (текст ≥ 15 px по BRIEF). Не влезло по высоте — сцена листается внутри. */ @media (max-width: 720px) { .p6 { padding: 80px 0 56px; } .p6 .mono { font-size: max(12px, .75em); } .p6-head { margin-bottom: 1.1em; } .p6-kick { margin-bottom: .7em; } .p6-h { font-size: 1.85em; font-size: min(1.85em, 7.4vw); letter-spacing: -.045em; } .p6-lead { font-size: 15px; } .p6-dom { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } .p6-br { margin: 0 0 1em; box-shadow: 0 1em 2em -1.6em rgba(13, 19, 36, .3); } .p6-pg-hero, .p6-pg-grid { display: none; } .p6-pg-top { border-bottom: 0; padding-bottom: 0; } .p6-page { min-height: 0; padding: .8em .9em; } .p6-pg-hero { padding: .8em 0 .6em; } .p6-pg-grid i { height: 3em; } .p6-pg-grid i:nth-child(n+4) { display: none; } .p6-pg-nav, .p6-pg-cart { display: none; } .p6-pg-logo { max-width: 60%; margin-right: auto; } .p6-br-note { font-size: 15px; padding: .7em .9em; } .p6-br-note .mono { display: block; margin: 0 0 .2em; } .p6-cab { padding: .9em .9em 1em; } .p6-cab-top { flex-wrap: wrap; } .p6-pill { font-size: 13px; } .p6-lab, .p6-dname { font-size: 15px; } .p6-row .p6-inp { flex: 1 1 100%; margin: 0 0 .6em; } .p6-btn { font-size: 15px; margin-bottom: .5em; } .p6-msg { font-size: 15px; min-height: 0; } .p6-tab { font-size: 15px; } .p6-tab > div { padding: .45em .8em; } .p6-tab dt { flex: 0 0 44%; padding-right: .6em; } .p6-rec-h { display: block; } .p6-rec-ok { display: block; } .p6-tab dt { font-size: 15px; } .p6-www, .p6-plan { font-size: 15px; } .p6-steps { flex-wrap: wrap; } .p6-steps li { flex: 1 1 50%; font-size: 15px; padding-bottom: .7em; } .p6-steps li:nth-child(2)::before, .p6-steps li:nth-child(2)::after { right: auto; width: 1.1em; } .p6-plus { display: block; margin: 1.2em 0 0; } .p6-p { margin: 0 0 .7em; padding: .8em .9em .9em; } .p6-p h3 { font-size: 1.12em; } .p6-p p { font-size: 15px; } .p6-ill-chek .tg button { min-height: 44px; font-size: 15px; padding: 0 .7em; } .p6-ill-chek { height: auto; min-height: 3em; } .p6-ill-all .ch i, .p6-ill-kassa .ig i { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .p6 *, .p6 *::before, .p6 *::after { -webkit-animation: none !important; animation: none !important; transition: none !important; } } /* ===================== СЦЕНА 7 «ТАРИФЫ» — scena6_tarify/scena.css (копия целиком) ===================== */ /* scena6_tarify/scena.css — СЦЕНА 6 «ТАРИФЫ» (переносится в главную как есть; все классы с приставкой t6-). Опирается на переменные и классы главной: --ink --soft --mute --hair --blue --green-d … --f-big --f-text --f-mono, .wrap .mono .kicker .btn .layer и режим плёнки .film-on (ставит kino.js / proto.js на ). Всё внутри сцены — в em от кегля сцены: его подбирает scena.js по месту (fit), без JS — clamp ниже. Без JS и при «уменьшить движение» — обычный блок ленты: бланк, четыре карточки, сравнение раскрывается (details). */ .t6 { --t6fs: clamp(15px, min(1.06vw, 1.9vh), 28px); font-size: var(--t6fs); position: relative; z-index: 1; padding: 100px 0 72px; } .t6 .mono { font-size: max(12px, .7em); } .t6-in { position: relative; } /* ---------- шапка сцены: кикер, заголовок «негатив-плашкой», пояснение, «Сравнить все» ---------- */ .t6-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.1em; } .t6-ht { min-width: 0; } .t6-kick { color: var(--blue-d); margin: 0 0 .9em; } .t6-h { font: 460 3.25em/1.08 var(--f-big); letter-spacing: -.04em; margin: 0; } .t6-ln { display: block; position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 100%; white-space: nowrap; } .t6-tx { display: inline-block; } .t6-h .acc { color: var(--green-d); } /* плашка: чёрная полоса бланка с вывороткой текста (белый по чёрному); двигает scena.js клипом */ /* синий — «синька», негатив чертежа: тёмных плашек на светлом сайте нет (BRIEF) */ .t6-bar { display: none; position: absolute; left: -.16em; right: -.16em; top: .03em; bottom: -.02em; background: var(--blue); pointer-events: none; } .t6-neg { position: absolute; left: .16em; top: -.03em; color: #fff; white-space: nowrap; } .t6-neg::before { content: attr(data-t); } /* выворотка — только картинка: текст из data-t, в DOM заголовок один раз */ .t6-hs { flex: 0 1 25em; margin: 0 0 .3em 3vw; } .t6-sub { font-size: max(15px, 1em); line-height: 1.5; color: var(--soft); } .t6-jsonly { display: none; } .js .t6-jsonly { display: inline; } /* без JS бланк не работает — и не обещаем, что «тариф выдвинется» */ /* «Сравнить все»: details — без JS раскрывается сама; в плёнке панель ложится поверх бланка и карточек */ .t6-cmp { margin-top: 1em; } .t6-cmp-btn { display: -webkit-inline-box; display: inline-flex; align-items: center; min-height: max(44px, 2.8em); padding: 0 1.35em; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; font: 600 max(15px, .95em)/1 var(--f-text); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; transition: background .3s var(--ease), color .3s var(--ease); } .t6-cmp-btn::-webkit-details-marker { display: none; } .t6-cmp-btn::marker { content: ''; } .t6-cmp-btn::after { content: ''; width: .5em; height: .5em; margin-left: .7em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; -webkit-transform: translateY(-.15em) rotate(45deg); transform: translateY(-.15em) rotate(45deg); } .t6-cmp-btn:hover { background: var(--blue-l); } .t6-cmp-btn:focus-visible { outline: 3px solid rgba(59, 123, 246, .45); outline-offset: 2px; } .t6-cmp-c { display: none; } .t6-cmp[open] .t6-cmp-o { display: none; } .t6-cmp[open] .t6-cmp-c { display: inline; } .t6-cmp[open] .t6-cmp-btn::after { -webkit-transform: translateY(.15em) rotate(-135deg); transform: translateY(.15em) rotate(-135deg); } .t6-cmp-panel { margin-top: 1em; background: #fff; border: 1px solid var(--ink); padding: 1em 1.3em 1.1em; } .t6-cmp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5em; } .t6-cmp-head .mono { color: var(--ink); } .t6-swipe { display: none; color: var(--mute); } .t6-cmp-x { display: none; min-height: 44px; padding: 0 .9em; border: 0; background: none; font: 500 max(14px, .85em)/1 var(--f-text); color: var(--soft); cursor: pointer; } .t6-cmp-x span { font-size: 1.4em; margin-left: .3em; vertical-align: -.08em; } .t6-cmp-x:hover { color: var(--ink); } .t6-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; } .t6-tab { width: 100%; border-collapse: collapse; font-size: max(14px, .84em); line-height: 1.3; } .t6-tab th, .t6-tab td { padding: .46em .7em; border-bottom: 1px solid var(--hair); text-align: center; } .t6-tab tbody th { text-align: left; font-weight: 400; color: var(--soft); white-space: nowrap; } .t6-tab thead th { font: 500 1.05em/1.2 var(--f-big); letter-spacing: -.03em; border-bottom: 1.5px solid var(--ink); } .t6-tab td { color: var(--ink); } .t6-tab tbody tr:first-child td { font: 700 1.05em/1.2 var(--f-cifry); letter-spacing: -.03em; white-space: nowrap; } .t6-tab .yes { color: var(--green-d); font-weight: 700; } .t6-tab .no { color: var(--mute); } .t6-tab .is-p { background: #F0ECFF; background: var(--ptl, #F0ECFF); } .t6-tab tr > :first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; background: #fff; } /* при прокрутке вбок подписи строк на месте */ .t6-tab thead .is-p { color: var(--ptd, #6246D8); } /* ---------- тело: бланк слева, тарифы справа ---------- */ .t6-body { display: flex; align-items: stretch; } /* БЛАНК */ .t6-form { position: relative; flex: 0 0 41%; min-width: 0; margin: 0 2.2% 0 0; padding: 0 1.4em 1.15em; background: #fff; border: 1px solid #C9D2E3; display: none; flex-direction: column; } .js .t6-form { display: flex; } /* без JS галочки мертвы — бланк не показываем, остаются карточки и таблица */ .t6-crop { position: absolute; width: .85em; height: .85em; border: 0 solid var(--ink); pointer-events: none; } .t6-crop.c-tl { left: -.55em; top: -.55em; border-left-width: 1.5px; border-top-width: 1.5px; } .t6-crop.c-tr { right: -.55em; top: -.55em; border-right-width: 1.5px; border-top-width: 1.5px; } .t6-crop.c-bl { left: -.55em; bottom: -.55em; border-left-width: 1.5px; border-bottom-width: 1.5px; } .t6-crop.c-br { right: -.55em; bottom: -.55em; border-right-width: 1.5px; border-bottom-width: 1.5px; } /* шапка бланка — тонкая печатная: текст и линия, без тёмной заливки */ .t6-fband { display: flex; align-items: center; justify-content: space-between; margin: 0 -1.4em; padding: .95em 1.4em .75em; color: var(--ink); border-bottom: 2px solid var(--ink); font: 600 max(12px, .72em)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .t6-fb-r { color: var(--mute); } .t6-fq { display: flex; align-items: center; justify-content: space-between; margin: 1em 0 .35em; } .t6-q { color: var(--ink); } .t6-demo { color: var(--coral-d); border: 1px solid currentColor; border-radius: 4px; padding: .3em .55em; opacity: 0; transition: opacity .4s var(--ease); } .t6.is-demo .t6-demo { opacity: 1; } .t6-checks { list-style: none; display: flex; flex-wrap: wrap; margin: 0 -.7em; } .t6-checks li { width: 50%; padding: 0 .7em; } .t6-ck { position: relative; display: flex; align-items: center; min-height: 2.6em; border-bottom: 1px dashed #D3DAE7; cursor: pointer; --lt: #9A6400; --ll: #FFF6D6; -webkit-tap-highlight-color: transparent; } .t6-ck[data-lv="2"] { --lt: #6246D8; --ll: #F0ECFF; } .t6-ck[data-lv="3"] { --lt: #C73E22; --ll: #FFEEE8; } .t6-ck input { position: absolute; left: 0; top: 50%; width: 1.25em; height: 1.25em; margin: -.625em 0 0; opacity: 0; cursor: pointer; } .t6-box { flex: none; width: 1.25em; height: 1.25em; margin-right: .75em; overflow: visible; } .t6-box .bx { fill: #fff; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; transition: fill .3s var(--ease); } .t6-box .tk { fill: none; stroke: var(--lt); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .38s var(--ease); } .t6-ck input:checked + .t6-box .bx { fill: var(--ll); } .t6-ck input:checked + .t6-box .tk { stroke-dashoffset: 0; } .t6-ck input:focus-visible + .t6-box .bx { stroke: var(--blue); stroke-width: 2.4; } .t6-cl { flex: 1 1 auto; min-width: 0; font-size: max(15px, .98em); line-height: 1.25; padding: .38em 0; color: #2A3247; transition: color .3s; } .t6-short { display: none; } .t6-ck input:checked ~ .t6-cl { color: var(--ink); font-weight: 500; } .t6-lv { flex: none; margin-left: .7em; color: var(--lt); font-size: max(12px, .7em) !important; } .t6-ck:hover .t6-box .bx { stroke-width: 2; } /* итог бланка: тариф и цена барабаном */ .t6-res { display: none; margin-top: auto; padding-top: 1em; border-top: 1.5px solid var(--ink); align-items: flex-end; justify-content: space-between; } .js .t6-res { display: flex; } .t6-rl { min-width: 0; } .t6-rrow { display: flex; align-items: baseline; flex-wrap: wrap; margin-top: .4em; } .t6-rname { display: inline-block; font: 500 2.1em/1.05 var(--f-big); letter-spacing: -.04em; color: var(--rt, #15803D); margin-right: .45em; } .t6-rp { font: 700 2.2em/1.05 var(--f-cifry); letter-spacing: -.035em; white-space: nowrap; } .t6-run { font: 500 max(13px, .4em)/1 var(--f-text); color: var(--soft); letter-spacing: 0; } .t6-alt { font-size: max(14px, .86em); line-height: 1.4; color: var(--soft); margin-top: .45em; min-height: 1.4em; } .t6-alt b { color: #9A6400; font-weight: 600; } .t6-alt .t6-alt-sum { color: var(--ink); white-space: nowrap; } .t6-go { flex: none; margin-left: 1em; min-height: max(44px, 2.9em); padding: 0 1.4em; font-size: max(15px, .95em); white-space: nowrap; } /* барабан цифр (строит scena.js; без JS — обычный текст) */ .t6-odo.on { display: inline-block; white-space: nowrap; vertical-align: top; } .od-s { display: inline-block; overflow: hidden; height: 1.08em; vertical-align: top; width: .62em; /* ширина цифры Onest (было .8 под Unbounded) */ transition: width .5s var(--ease); } .od-s.off { width: 0; } .od-c { display: block; will-change: transform; } .od-c i { display: block; height: 1.08em; line-height: 1.08em; font-style: normal; text-align: center; font-variant-numeric: tabular-nums; } .od-c i::before { content: attr(data-d); } /* цифры барабана — картинкой: в тексте страницы цена, а не «0123456789…» */ .od-g { display: inline-block; width: .24em; transition: width .5s var(--ease); } .od-g.off { width: 0; } .od-anim .od-c { transition: transform .95s cubic-bezier(.2, .75, .15, 1); } /* ТАРИФЫ */ .t6-plans { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .t6-tabs { display: none; } .t6-cards { flex: 1 1 auto; display: flex; margin: 0 -.45em; } .t6-card { position: relative; flex: 1 1 0; min-width: 0; padding: 0 .45em; display: flex; } .t6-cin { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); border-radius: .7em; padding: 1.15em 1.05em 1.05em; transition: transform .6s var(--ease), border-color .4s var(--ease), box-shadow .6s var(--ease), opacity .5s var(--ease); } .t6-cin::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: .34em; border-radius: .7em .7em 0 0; background: var(--t); -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; transition: transform .5s var(--ease); } .t6-tag { color: var(--td); letter-spacing: .06em; } .t6-hot .t6-tag { -webkit-align-self: flex-start; align-self: flex-start; background: var(--tl); border-radius: 4px; padding: .3em .55em; margin: -.3em 0 -.3em -.1em; } .t6-pick { position: absolute; left: -1px; top: -2.05em; display: none; padding: .42em .65em; border-radius: 5px 5px 5px 0; background: var(--td); color: #fff !important; white-space: nowrap; opacity: 0; -webkit-transform: translateY(.6em); transform: translateY(.6em); transition: opacity .3s var(--ease), transform .5s cubic-bezier(.3, 1.5, .5, 1); } .t6-pick::before { content: '✓ '; } .t6-cn { font: 500 1.5em/1.1 var(--f-big); letter-spacing: -.035em; margin: .55em 0 .12em; } .t6-for { font-size: max(13px, .82em); color: var(--soft); } .t6-pr { font: 700 1.9em/1.08 var(--f-cifry); letter-spacing: -.035em; margin: .5em 0 .55em; white-space: nowrap; } .t6-pr small { font: 500 max(12px, .4em)/1 var(--f-text); color: var(--soft); letter-spacing: 0; } .t6-fl { flex: 1 1 auto; list-style: none; border-top: 1px solid var(--hair); padding-top: .5em; margin-bottom: .95em; } .t6-fl li { position: relative; padding: .26em 0 .26em 1.1em; font-size: max(13.5px, .85em); line-height: 1.3; color: #2A3247; transition: color .3s; } .t6-fl li::before { content: ''; position: absolute; left: 0; top: .78em; width: .42em; height: .42em; border-radius: 50%; background: #C9D2E3; transition: background .3s, box-shadow .3s; } .t6-fl li.on { color: var(--ink); font-weight: 500; } .t6-fl li.on::before { background: var(--t); box-shadow: 0 0 0 .2em var(--tl); } .t6-cb { width: 100%; min-height: max(44px, 2.75em); padding: 0 .8em; font-size: max(14px, .88em); white-space: nowrap; } /* выбор (scena.js ставит .t6-sel на сцену, .is-pick — на подходящую карточку) */ .t6-sel .t6-pick { display: block; } .t6-cin > * { transition: opacity .5s var(--ease); } .t6-sel .t6-card:not(.is-pick) .t6-cin > * { opacity: .78; } /* контраст текста ≥ 4,5:1 */ /* тускнеет содержимое, лист остаётся непрозрачным */ .t6-sel .t6-card:not(.is-pick) .t6-cin > .t6-cb { opacity: 1; } .t6-sel .t6-card:not(.is-pick) .t6-cin > .t6-pick { opacity: 0; } .t6-sel .t6-card:not(.is-pick) .t6-cb { background: transparent; color: var(--blue-d); box-shadow: inset 0 0 0 1.5px var(--blue); } .t6-sel .t6-card:not(.is-pick) .t6-cb:hover { background: var(--blue-l); } .t6-card.is-pick { z-index: 5; } .t6-card.is-pick .t6-cin { -webkit-transform: translateY(-.85em); transform: translateY(-.85em); border-color: var(--t); box-shadow: 0 1.6em 2.6em -1.5em rgba(13, 19, 36, .32); } .t6-card.is-pick .t6-cin::before { -webkit-transform: scaleY(1); transform: scaleY(1); } .t6-card.is-pick .t6-pick { opacity: 1; -webkit-transform: none; transform: none; } .t6-hot.is-pick .t6-tag { visibility: hidden; } /* «Бизнес» выбран: над ним «✓ Подходит», второй ярлык «Популярный» — лишний шум */ .t6-add { margin-top: 1.25em; font-size: max(12.5px, .78em); line-height: 1.5; color: var(--soft); } .t6-add b { color: var(--green-d); font-weight: 600; } .t6-add-cmp { display: none; } .t6-zero-m { display: none; } /* ================= РЕЖИМ ПЛЁНКИ ================= */ .film-on .t6 { padding: var(--head) 0 46px; display: flex; align-items: center; visibility: hidden; z-index: 2; } .film-on .t6-in { width: 100%; -webkit-transform-origin: 50% 40%; transform-origin: 50% 40%; } /* не влезло по высоте (телефон, низкий ноутбук 1366×625) — сцена листается внутри, как p6-tall */ .film-on .t6.t6-tall { align-items: stretch; } .film-on .t6-tall .t6-in { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: .6em; } .film-on .t6-bar { display: block; -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); } .film-on .t6-card, .film-on .t6-form, .film-on .t6-fband, .film-on .t6-cards { will-change: transform; } /* сравнение — панель поверх тела сцены (место ставит scena.js), листается внутри */ .film-on .t6-cmp-panel { position: absolute; z-index: 8; margin: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 2em 4em -2em rgba(13, 19, 36, .3); padding: .9em 1.4em 1em; } .film-on .t6-cmp-x { display: inline-block; } .film-on .t6-add-cmp { display: block; margin-top: .9em; } .film-on .t6-cmp-on .t6-cards { visibility: hidden; } /* под панелью: и ярлык «Подходит» не выглядывает над ней */ .film-on .t6-tw { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; } .film-on .t6-cmp[open] .t6-cmp-panel { -webkit-animation: t6Unroll .55s var(--ease) both; animation: t6Unroll .55s var(--ease) both; } .film-on .t6-cmp[open] .t6-tab tr { -webkit-animation: t6Row .5s var(--ease) both; animation: t6Row .5s var(--ease) both; -webkit-animation-delay: calc(var(--i, 0) * 28ms + 120ms); animation-delay: calc(var(--i, 0) * 28ms + 120ms); } @-webkit-keyframes t6Unroll { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @keyframes t6Unroll { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @-webkit-keyframes t6Row { from { opacity: 0; -webkit-transform: translateY(-.5em); transform: translateY(-.5em); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes t6Row { from { opacity: 0; -webkit-transform: translateY(-.5em); transform: translateY(-.5em); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* большие мониторы: сцена на ~90% ширины, как «Условия» и «Кабинет» */ @media (min-width: 1500px) { .t6 .wrap { max-width: none; padding: 0 5vw; } } /* ================= ПЛАНШЕТ ================= */ @media (max-width: 1100px) { .t6-head { display: block; } .t6-hs { margin: 1em 0 0; max-width: 40em; } .t6-body { display: block; } .t6-form { margin: 0 0 3em; } .t6-checks li { width: 33.333%; } } /* ================= ТЕЛЕФОН ================= Всё в em от кегля сцены: 16 px, не ужимается (текст ≥ 15 px по BRIEF). Не влезло по высоте — сцена листается внутри. */ @media (max-width: 720px) { .t6 { padding: 80px 0 56px; } .t6 .mono { font-size: max(12px, .75em); } .t6-head { position: relative; margin-bottom: 1.1em; } .t6-kick { margin-bottom: .7em; } .t6-h { font-size: 1.95em; letter-spacing: -.045em; } .t6-hs { margin-top: .9em; } .t6-sub { font-size: .94em; } .t6-form { padding: 0 .95em .55em; margin-bottom: 1.4em; } .t6-crop { display: none; } .t6-fband { margin: 0 -.95em; padding: .8em .95em .6em; font-size: max(12px, .75em); } .t6-fq { margin: .6em 0 .1em; } .t6-checks { margin: 0 -.35em; } .t6-checks li { width: 50%; padding: 0 .35em; } .t6-ck { min-height: max(40px, 2.75em); } .t6-box { width: 1.15em; height: 1.15em; margin-right: .55em; } .t6-cl { font-size: max(15px, .94em); line-height: 1.2; padding: .3em 0; } .t6-full { display: none; } .t6-short { display: inline; } .t6-lv { display: none; } .t6-res { border-top: 1.5px solid var(--ink); margin-top: .5em; padding-top: .5em; } .t6-res .t6-q, .t6-go, .t6-rrow { display: none; } /* имя и цена — на вкладке с галочкой (цена докатывается) */ .t6-alt { font-size: max(15px, .94em); margin-top: 0; min-height: 2.8em; } /* две строки всегда: высота сцены не прыгает от подсказки */ .t6-cards { display: block; margin: 0; } .t6-card { padding: 0; margin-bottom: 1em; } .t6-cin { display: block; padding: .85em .95em .9em; border-radius: .75em; } .t6-cin::before { border-radius: .75em .75em 0 0; } .t6-cn { font-size: 1.35em; margin: .35em 0 .1em; } .t6-for { font-size: max(15px, .94em); } .t6-pr { font-size: 1.35em; margin: .2em 0 0; } .t6-fl { margin: .6em 0 .75em; padding-top: .4em; } .t6-fl li { font-size: max(15px, .94em); padding: .16em 0 .16em 1.05em; } .t6-fl li::before { top: .62em; } .t6-pick { display: none !important; } .t6-hot.is-pick .t6-tag { visibility: visible; } /* на телефоне ярлыка «Подходит» нет — «Популярный» остаётся */ .t6-card.is-pick .t6-cin { -webkit-transform: none; transform: none; box-shadow: none; } .t6-cb { min-height: max(44px, 2.75em); font-size: .94em; } .t6-add { font-size: max(15px, .94em); } .t6-tab { font-size: max(15px, .94em); min-width: 36em; } .t6-tab th, .t6-tab td { padding: .45em .5em; } .t6-tab tbody th { white-space: normal; width: 8.5em; min-width: 8.5em; } /* узкая липкая колонка подписей — рядом целиком видна колонка тарифа */ .t6-swipe { display: inline; } .t6-cmp-l { display: none; } .t6-cmp-x { white-space: nowrap; padding: 0 0 0 .6em; } /* с JS: вкладки-заголовки (имя и цена) + одна карточка без своей шапки; подходящая вкладка — с галочкой */ .t6-js .t6-tabs { display: flex; flex-wrap: wrap; margin: 0 0 .1em; } .t6-js .t6-card { display: none; margin: 0; } .t6-js .t6-card.is-show { display: block; } .t6-js .t6-card.is-show .t6-cin > * { opacity: 1; } .t6-js .t6-card.is-show:not(.is-pick) .t6-cb { background: var(--blue); color: #fff; box-shadow: none; } .t6-js .t6-cn, .t6-js .t6-pr { display: none; } .t6-js .t6-tag { display: inline-block; margin-right: .6em; } .t6-js .t6-hot .t6-tag { margin: -.3em .6em -.3em -.1em; } .t6-js .t6-for { display: inline; } .t6-js .t6-fl { margin-top: .5em; } .t6-tb { flex: 0 0 calc(50% - .25em); min-width: 0; min-height: 48px; margin: 0 0 .5em; padding: .2em .8em; border: 1px solid var(--hair); border-radius: .65em; background: #fff; display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: var(--ink); cursor: pointer; font-family: var(--f-text); transition: background .3s, border-color .3s; } .t6-tb:nth-child(2n) { margin-left: .5em; } .t6-tb b { font: 700 max(15px, .98em)/1.15 var(--f-cifry); letter-spacing: -.03em; white-space: nowrap; } .t6-tb > span { font: 500 max(15px, .94em)/1.2 var(--f-text); color: var(--soft); margin-left: .4em; white-space: nowrap; } .t6-tb .od-s { width: .6em; } /* на телефоне и так узко */ .t6-tb .od-g { width: .28em; } .t6-tb .od-s.off, .t6-tb .od-g.off { width: 0; } .t6-tb.is-pick { border-color: var(--t); background: var(--tl); } .t6-tb.is-pick b::before { content: '✓ '; color: var(--td); } .t6-tb.is-show { box-shadow: inset 0 0 0 1.5px var(--ink); border-color: var(--ink); } .t6-tb:focus-visible { outline: 3px solid rgba(59, 123, 246, .45); outline-offset: 1px; } .film-on .t6 { padding: var(--head) 0 34px; } .film-on .t6-head { margin-bottom: .8em; } .film-on .t6-hs { margin-top: .8em; } .film-on .t6-cmp { margin-top: .75em; } .film-on .t6-cmp-btn { min-height: 44px; padding: 0 1.1em; font-size: max(15px, .94em); } .film-on .t6-fq { margin: .7em 0 .2em; flex-wrap: wrap; } .film-on .t6-fq .t6-q { margin-right: .6em; } .film-on .t6-demo { display: none; } /* узко: ярлык примера стоит вместо вопроса, пока идёт пример */ .film-on .t6.is-demo .t6-demo { display: inline-block; } .film-on .t6.is-demo .t6-fq .t6-q { display: none; } .film-on .t6-fb-r { display: none; } .film-on .t6-form { margin-bottom: .7em; } .film-on .t6-add-main { display: none; } .film-on .t6-add-cmp { display: block; margin-top: .8em; } .film-on .t6-zero-m { display: block; margin-top: .6em; font-size: max(15px, .94em); line-height: 1.45; color: var(--soft); } .film-on .t6-zero-m b { color: var(--green-d); font-weight: 600; } .film-on .t6-cmp-panel { padding: .6em .8em .8em; } } @media (prefers-reduced-motion: reduce) { .t6-cin, .t6-pick, .od-s, .od-g, .t6-box .tk { transition: none !important; } .od-anim .od-c { transition: none !important; } } /* ===================== СЦЕНА 8 «ЗАПУСК» + ПОДВАЛ — scena7_final/scena.css (копия целиком) ===================== */ /* scena7_final/scena.css — СЦЕНА 7 «ЗАПУСК» (финал + заявка) и ПОДВАЛ. Классы с приставкой fin- (сцена) и ff- (подвал) — в главной не заняты. Переменные (--ink, --hair, --blue, --green-d…, --f-big, --gut, --head, --ease) — общие с glavnaya.css. Режим плёнки (.film-on ставит плёнка): сцена — слой на весь экран, вход рисует scena.js (enter(k)). Без JS и при «уменьшить движение» — обычный блок ленты, всё видно сразу, слой букв заголовка не создаётся. */ /* ---------- сцена: раскладка ---------- */ .fin { position: relative; z-index: 2; padding: 120px 0 100px; } .fin-fit { display: flex; align-items: center; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .fin-l { flex: 1 1 auto; min-width: 0; padding-right: 4.4vw; } .fin-r { flex: 0 0 30vw; max-width: 460px; min-width: 340px; } .fin-kick { display: flex; align-items: center; color: var(--blue-d); margin-bottom: 3.2vh; } .fin-kick-l { display: block; flex: none; width: 28px; height: 1px; background: var(--blue); margin-right: 12px; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } /* заголовок: тонкий Unbounded; кегль подгоняет scena.js по ширине колонки (здесь — запасной) */ .fin-tw { display: inline-block; max-width: 100%; } .fin-h { font: 360 min(7.2vw, 13vh, 190px)/.98 var(--f-big); letter-spacing: -.05em; margin: 0; } .fin-ln { display: block; position: relative; white-space: nowrap; padding-bottom: .03em; } .fin-t { display: inline-block; position: relative; z-index: 2; } .fin-acc .fin-t { color: var(--green-d); background-image: var(--grad-money); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .05em; margin-right: -.05em; } /* слой букв входа «засечки → буквы» (создаёт scena.js только в режиме плёнки): буквы — ::before из data-c, поэтому в тексте h2 повторов нет; места букв, высоту строки и кусок градиента ставит scena.js. В покое слой скрыт. */ .fin-ov { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 3; visibility: hidden; pointer-events: none; } .fin-L { position: absolute; display: block; white-space: pre; will-change: transform, opacity; } .fin-L::before { content: attr(data-c); display: block; height: 100%; } .fin-acc .fin-L::before { color: var(--green-d); background-image: var(--grad-money); background-repeat: no-repeat; background-size: var(--bw, 100%) var(--bh, 100%); background-position: var(--bx, 0) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* измерительная линейка под строкой и её засечки по концам */ .fin-rule { position: absolute; left: 0; height: 1px; background: #A9B4C8; opacity: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; will-change: transform, opacity; } .fin-tk { position: absolute; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; will-change: transform, opacity; } .fin-acc .fin-tk { background: var(--green-d); } .fin-rs { position: absolute; left: 0; width: 1px; height: 13px; margin-top: -6px; background: #8E99B0; opacity: 0; will-change: transform, opacity; } /* размерная линия под заголовком: ширина — по самой длинной строке */ .fin-dim { display: flex; align-items: center; margin-top: 2.2vh; } .fin-dim i { flex: 1 1 0; height: 1px; background: #BFC9DC; position: relative; } .fin-dim-a { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .fin-dim-b { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .fin-dim-a::before, .fin-dim-b::after { content: ''; position: absolute; top: -5px; width: 1px; height: 11px; background: #8E99B0; } .fin-dim-a::before { left: 0; } .fin-dim-b::after { right: 0; } .fin-dim .mono { flex: none; padding: 0 14px; color: var(--green-d); } .fin-sub { margin-top: 3vh; font-size: 20px; line-height: 1.5; color: var(--soft); max-width: 30em; } .fin-w { display: inline-block; } .fin-cta { margin-top: 3.6vh; display: flex; align-items: center; } .fin-go { min-height: 60px; padding: 0 30px 0 32px; font-size: 17px; } .fin-go svg { width: 20px; height: 20px; margin-left: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .fin-go-t { white-space: nowrap; } /* ---------- форма обратного звонка ---------- */ .fin-card { display: block; padding: 30px 30px 24px; border-radius: 20px; background: rgba(255, 255, 255, .95); border: 1px solid var(--hair); box-shadow: 0 34px 70px -46px rgba(13, 19, 36, .32); } .fin-row { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .fin-card-h { font: 500 21px/1.22 var(--f-big); letter-spacing: -.03em; margin: 0 0 20px; } .fin-f { display: block; margin-bottom: 14px; } .fin-f span { display: block; font-size: 15px; color: var(--soft); margin-bottom: 6px; } .fin-f input { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid #CDD5E3; border-radius: 12px; background: #fff; color: var(--ink); font: 400 17px/1 var(--f-text); -webkit-appearance: none; appearance: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .fin-f input::placeholder { color: #9AA4B8; } .fin-f input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(59, 123, 246, .15); } .fin-f input[aria-invalid="true"] { border-color: var(--coral-d); box-shadow: 0 0 0 4px rgba(199, 62, 34, .1); } /* согласие: родной флажок прозрачен поверх своего квадрата (нажимается и с клавиатуры) */ .fin-ok { display: flex; align-items: flex-start; position: relative; margin: 4px 0 18px; font-size: 14px; line-height: 1.45; color: var(--soft); cursor: pointer; } .fin-ok input { position: absolute; left: -10px; top: -11px; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; } .fin-ok i { flex: none; position: relative; width: 22px; height: 22px; margin: 0 12px 0 0; border: 1.5px solid #AEB8CB; border-radius: 6px; background: #fff; transition: background .2s var(--ease), border-color .2s var(--ease); } .fin-ok i::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease); } .fin-ok input:checked + i { background: var(--ink); border-color: var(--ink); } .fin-ok input:checked + i::after { transform: rotate(45deg) scale(1); } .fin-ok input:focus-visible + i { box-shadow: 0 0 0 4px rgba(59, 123, 246, .25); } .fin-ok a { color: var(--ink); padding: 10px 0; margin: -10px 0; } /* выше цель касания, строка не растёт */ .fin-send { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 16px/1 var(--f-text); cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); } .fin-send:hover { background: #24304D; } .fin-send:active { transform: scale(.98); } .fin-send:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(59, 123, 246, .3); } .fin-send:disabled { opacity: .6; cursor: default; } .fin-status { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--mute); min-height: 2.9em; } .fin-status[data-s="err"] { color: var(--coral-d); } .fin-status[data-s="ok"] { color: var(--green-d); } /* ---------- режим плёнки ---------- */ .film-on .fin { padding: var(--head) 0 46px; display: flex; align-items: center; visibility: hidden; } .film-on .fin-in { width: 100%; } .film-on .fin-go { will-change: clip-path; } .film-on .fin-t { will-change: opacity; } /* живой текст строки держится своим слоем: подмена слой букв → текст без перерисовки */ /* большие мониторы (Юра смотрит на ~2460 px): сцена на ~90% ширины, всё растёт по vw */ @media (min-width: 1500px) { .fin .wrap { max-width: none; padding: 0 5vw; } .fin-r { flex-basis: 30vw; max-width: none; } .fin .mono { font-size: clamp(12px, .62vw, 16px); } .fin-kick-l { width: 2vw; } .fin-sub { font-size: clamp(20px, 1.2vw, 30px); } .fin-go { min-height: clamp(60px, 3.3vw, 84px); padding: 0 1.8vw 0 1.9vw; font-size: clamp(17px, .95vw, 24px); } .fin-go svg { width: clamp(20px, 1.1vw, 28px); height: clamp(20px, 1.1vw, 28px); } .fin-card { padding: 1.8vw 1.8vw 1.4vw; border-radius: clamp(20px, 1.1vw, 28px); } .fin-card-h { font-size: clamp(21px, 1.3vw, 34px); margin-bottom: 1.2vw; } .fin-f { margin-bottom: .85vw; } .fin-f span { font-size: clamp(15px, .8vw, 20px); } .fin-f input { height: clamp(52px, 3vw, 76px); font-size: clamp(17px, .95vw, 24px); padding: 0 1vw; border-radius: clamp(12px, .7vw, 18px); } .fin-ok { font-size: clamp(14px, .76vw, 19px); } .fin-send { min-height: clamp(54px, 3.1vw, 78px); font-size: clamp(16px, .9vw, 23px); } .fin-status { font-size: clamp(14px, .72vw, 18px); } } /* планшет: колонкой — заголовок, потом форма */ @media (max-width: 1100px) { .fin-fit { display: block; } .fin-l { padding-right: 0; } .fin-r { min-width: 0; max-width: 560px; margin-top: 4vh; } } @media (max-width: 720px) { .fin { padding: 80px 0 60px; } .film-on .fin { padding-top: calc(var(--head) + 14px); } .fin-kick { margin-bottom: 12px; font-size: 11px; } .fin-kick-l { width: 20px; margin-right: 10px; } .fin-h { font-size: min(12.4vw, 8.4vh); letter-spacing: -.055em; } .fin-dim { margin-top: 8px; } .fin-dim .mono { font-size: 10px; padding: 0 8px; } .fin-sub { margin-top: 12px; font-size: 15px; } .fin-cta { margin-top: 14px; } .fin-go { min-height: 50px; padding: 0 20px 0 22px; font-size: 15px; } .fin-go svg { width: 18px; height: 18px; margin-left: 10px; } .fin-r { margin-top: 18px; } .fin-card { padding: 16px 16px 10px; border-radius: 16px; } .fin-card-h { font-size: 16px; margin-bottom: 10px; } .fin-f { margin-bottom: 8px; } .fin-f span { font-size: 15px; margin-bottom: 4px; } .fin-f input { height: 46px; font-size: 16px; padding: 0 12px; border-radius: 10px; } .fin-ok { font-size: 15px; margin: 2px 0 10px; line-height: 1.38; } .fin-send { min-height: 48px; font-size: 15px; } .fin-status { font-size: 15px; margin-top: 8px; min-height: 2.8em; line-height: 1.38; } } /* ===================================================================================== ПОДВАЛ — спокойный, строгий: девиз, колонки ссылок, правовые ссылки, реквизиты. Без движения. ===================================================================================== */ .ff { position: relative; z-index: 2; background: #fff; border-top: 1px solid var(--hair); } .ff-in { padding-top: 76px; padding-bottom: 36px; } .ff-top { display: flex; align-items: flex-start; padding-bottom: 52px; border-bottom: 1px solid var(--hair); } .ff-logo { flex: 0 0 25%; font: 600 26px/1 var(--f-big); letter-spacing: -.03em; padding-top: .55em; } .ff-logo .dot { color: var(--blue); } .ff-mot { flex: 1 1 auto; min-width: 0; } .ff-motto { font: 300 clamp(30px, 3.6vw, 64px)/1.05 var(--f-big); letter-spacing: -.045em; max-width: 12.5em; } .ff-lead { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--soft); max-width: 34em; } .ff-cols { display: flex; padding: 44px 0 40px; border-bottom: 1px solid var(--hair); } .ff-c { flex: 1 1 0; min-width: 0; padding-right: 24px; } .ff-c0 { flex: 0 0 25%; } .ff-c h3 { margin: 0 0 12px; } .ff-c a { display: block; width: -webkit-fit-content; width: fit-content; max-width: 100%; padding: 6px 0; font-size: 15px; line-height: 1.45; color: var(--soft); text-decoration: none; } .ff-c a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .ff-big { font: 600 18px/1.35 var(--f-text); color: var(--ink); max-width: 15em; } .ff-mute { margin-top: 8px; font-size: 15px; color: var(--mute); max-width: 17em; } .ff-soc { margin-top: 20px; } .ff .ff-soc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; margin: 0 8px 8px 0; border: 1px solid var(--hair); border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .25s var(--ease); } .ff .ff-soc a:hover { border-color: var(--blue); } .ff-legal { display: flex; flex-wrap: wrap; padding: 22px 0 10px; } .ff-legal a { margin-right: 28px; padding: 6px 0; font-size: 15px; color: var(--soft); text-decoration: none; } .ff-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .ff-copy { display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 8px; font-size: 14px; line-height: 1.6; color: var(--mute); } .ff-copy span { margin-right: 24px; } .ff-copy span:last-child { margin-right: 0; } .ff-copy .ff-acc { color: var(--green-d); font-weight: 500; } @media (min-width: 1500px) { .ff .wrap { max-width: none; padding-left: 5vw; padding-right: 5vw; } .ff-in { padding-top: 5vw; } .ff-logo { font-size: clamp(26px, 1.4vw, 36px); } .ff-lead, .ff-big { font-size: clamp(17px, .95vw, 24px); } .ff-c a, .ff-mute, .ff-soc a { font-size: clamp(15px, .82vw, 21px); } .ff .mono { font-size: clamp(12px, .62vw, 16px); } .ff-legal a { font-size: clamp(15px, .76vw, 19px); } .ff-copy { font-size: clamp(14px, .7vw, 18px); } } @media (max-width: 1100px) { .ff-top { display: block; } .ff-logo { padding: 0 0 22px; } .ff-cols { flex-wrap: wrap; } .ff-c0 { flex: 0 0 100%; margin-bottom: 32px; } } @media (max-width: 720px) { .ff-in { padding-top: 48px; padding-bottom: 28px; } .ff-top { padding-bottom: 32px; } .ff-motto { font-size: 30px; } .ff-lead { font-size: 15px; margin-top: 14px; } .ff-cols { padding: 28px 0 22px; } .ff-c { flex: 0 0 50%; padding-right: 12px; margin-bottom: 20px; } .ff-c0 { flex-basis: 100%; } .ff-c a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; } .ff-legal { display: block; padding: 14px 0 8px; } .ff-legal a { display: flex; align-items: center; width: -webkit-fit-content; width: fit-content; min-height: 44px; padding: 8px 0; margin: 0; font-size: 15px; } .ff-copy { display: block; font-size: 14px; } .ff .mono { font-size: 13px; } .ff-copy span { display: block; margin: 0 0 4px; } } @media (max-width: 380px) { .ff-c { flex-basis: 100%; } } /* ===================== ФОКУС-ОКНО (общее, kino.js FOCUS): мини-сайт конструктора, ленты кабинета, таблица тарифов. Без нажатия колесо и палец над окном листают сайт; нажатие — окно активно: рамка + подпись над ним ===================== */ .nf-act { outline: 2px solid var(--blue) !important; outline-offset: -2px; } .nf-hint.mono { position: fixed; z-index: 30; left: 0; top: 0; max-width: 92vw; margin: 0; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(13, 19, 36, .78); color: #fff; font-size: 11px; letter-spacing: .06em; opacity: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); transition: opacity .25s var(--ease); } .nf-hint.mono.on { background: var(--blue); } /* Юра 08.10: «нижнюю строку прогресса тоже убрать» — HUD-полоса (сцена · шкала · таймкод) скрыта на всех сценах */ .hud { display: none !important; } /* Дополнения тарифов — бирки-ценники вместо строки (Юра 08.10: «не строкой, типа вот ещё») */ .t6-add { color: var(--ink); } .t6-dl { display: block; font-size: max(11px, .62em); letter-spacing: .08em; color: var(--mute); margin-bottom: .55em; } .t6-dops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .t6-dop { position: relative; display: flex; align-items: center; margin: 0 .5em .5em 0; padding: .42em .8em .42em 1.5em; background: #fff; border: 1px solid var(--hair); border-radius: .5em .9em .9em .5em; font-size: max(12.5px, .8em); line-height: 1.2; box-shadow: 0 1px 0 rgba(15, 23, 42, .04); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; } .t6-dop:hover { transform: translateY(-2px) rotate(-.6deg); border-color: var(--blue); box-shadow: 0 6px 16px -10px rgba(59, 123, 246, .55); } .t6-dop-h { position: absolute; left: .62em; top: 50%; width: .42em; height: .42em; margin-top: -.21em; border-radius: 50%; border: 1.5px solid var(--hair); background: var(--bg, #F6F8FC); } .t6-dop span { color: var(--soft); margin-right: .6em; } .t6-dop b { font: 700 1.05em/1 var(--f-cifry); color: var(--ink); white-space: nowrap; } .t6-dop b small { font: 500 .78em/1 var(--f-cifry); color: var(--mute); } .t6-nol { display: flex; align-items: center; margin: .35em 0 0; font-size: max(12.5px, .8em); line-height: 1.35; color: var(--soft); } .t6-nol i { flex: none; font: 700 1em/1 var(--f-cifry); font-style: normal; color: #fff; background: var(--green-d); border-radius: 2em; padding: .38em .7em; margin-right: .7em; } .t6-nol b { color: var(--green-d); font-weight: 600; } @media (max-width: 720px) { .t6-dop { font-size: 14px; } .t6-nol { font-size: 14px; } .t6-dl { font-size: 11px; } } /* ===================================================================================== ЗАМЕТКА — пояснение сцены (Юра 08.10: вариант 2 «Заметка» кастинга пояснений, kasting_poyasn/?v=2). Вместо серых абзацев справа от заголовков (витрины, кабинет, конструктор, преимущества, тарифы): бумажная карточка на синей кнопке-булавке, наклон 1,3–1,6° (--zr), шапка «Пометка · Сц. 0N», 2–3 строки, ключевое слово — маркер цвета сцены (--c / --cd / --cl). Без пунктирной выноски (Юра: «пунктирная штука не нужна»). Обёртка .zm — прежний элемент сцены (#vitSub, #kabSub, #knSub, #p6Lead, #t6Zm): его вход/уход по-прежнему ведут скрипты сцен (прозрачность + сдвиг), наклон и булавка — у внутренней .zm-card. В плёнке карточка приходит и прикалывается, когда сцена встала (kino.js afterScene → .zm-in); без плёнки (без JS, «уменьшить движение») — сразу на месте. «Пример, никуда не отправляется» убран — вместо него штамп ДЕМО (.dst) в шапке окон кабинета, конструктора, домена. ===================================================================================== */ .zm { color: var(--ink); } .zm-card { position: relative; max-width: 24em; padding: .85em 1.15em .8em; background: #FFFEFA; border: 1px solid #ECE8DC; border-radius: 3px; font-size: clamp(15px, .98vw, 25px); line-height: 1.45; text-align: left; box-shadow: 0 1px 1px rgba(13, 19, 36, .06), 0 12px 26px -10px rgba(13, 19, 36, .22); -webkit-transform: rotate(var(--zr, 1.6deg)); transform: rotate(var(--zr, 1.6deg)); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .zm-h { display: flex; justify-content: space-between; margin: 0 0 .45em; padding-bottom: .35em; border-bottom: 1px solid #E4DFD0; font: 600 max(11px, .6em)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .zm-l { margin: 0; font: 500 1em/1.45 var(--f-text); color: var(--ink); } .zm-l + .zm-l { margin-top: .1em; } .zm-card > .zm-l:last-child { color: var(--soft); } /* маркер — полоса от 52 % до 92 % высоты строки: одноцветный «градиент» размером 40 % (раньше — градиент с жёсткими переходами на всю высоту; вид тот же, но его перерисовка в каждом кадре проявления стоила 160–300 мс на кадр) */ .zm mark { background: linear-gradient(var(--cl), var(--cl)) no-repeat; background-position: 0 86.667%; background-size: 100% 40%; color: var(--cd); font-weight: 600; padding: 0 .1em; margin: 0 -.1em; } .zm-pin { position: absolute; left: 50%; top: -.47em; width: 1.07em; height: 1.07em; margin-left: -.535em; border-radius: 50%; /* в em: на 2560 булавка растёт вместе с текстом (на 15 px — те же 16 px) */ background: radial-gradient(circle at 35% 32%, #fff 0 16%, var(--c) 30%, var(--cd) 100%); box-shadow: 0 3px 5px rgba(13, 19, 36, .28); } .zm-pin::after { content: ''; position: absolute; left: 50%; top: .93em; width: 2px; height: .33em; margin-left: -1px; background: rgba(13, 19, 36, .18); border-radius: 1px; } html:not(.js) .zm-js { display: none; } /* без JS окна не нажимаются — и не обещаем */ /* шапки сцен: карточка выше прежнего абзаца — встаёт по низу заголовка, булавке — место сверху */ .vit-sub.zm { max-width: none; margin-top: 3.2vh; } .kab-sub.zm, .kn-sub.zm, .p6-lead.zm, .t6-sub.zm { padding-top: 12px; } .kn-sub.zm { max-width: 25em; } /* домен: строки длинные — карточка шире, в 3 строки, иначе шапка сцены росла и «Преимущества» на 1440×900 уходили в прокрутку */ .p6-lead.zm { flex: 0 1 37em; } .p6-lead.zm .zm-card { max-width: 36em; } /* тарифы: то же — карточка в 2 строки, «Сравнить все» под ней */ .t6-hs:not(:empty) { flex-basis: 31em; } .t6-sub.zm .zm-card { max-width: 30em; } .t6-hs .t6-cmp { margin-top: .9em; } /* приход в плёнке: карточка опускается на место, булавка прикалывает её (карточка чуть проседает), маркер проводится */ .film-on .zm-card { opacity: 0; } .film-on .zm-card .zm-pin { opacity: 0; } .film-on .zm-card mark { background-size: 0% 40%; } .film-on .zm-card.zm-in { opacity: 1; -webkit-animation: zmIn 1.15s cubic-bezier(.3, 1.1, .45, 1) both; animation: zmIn 1.15s cubic-bezier(.3, 1.1, .45, 1) both; } .film-on .zm-in .zm-pin { opacity: 1; -webkit-animation: zmPin .36s cubic-bezier(.3, 1.6, .5, 1) .5s both; animation: zmPin .36s cubic-bezier(.3, 1.6, .5, 1) .5s both; } .film-on .zm-in mark { background-size: 100% 40%; transition: background-size .7s var(--ease) .95s; } /* ПОДГОТОВКА ШЕЙДЕРОВ. Первая отрисовка градиента нового вида стоит видеокарте 150–300 мс (готовит программу) — и попадает туда, где градиент впервые появился: булавка заметки (радиальный) — кадр 170 мс, когда заметка прикалывается в сцене 2; полосатый линейный (с жёсткими переходами, как в кабинете) — серия кадров по 200 мс в начале перехода 3 → 4. Крошечная невидимая пара (.gpu-w — ставит скрипт в index.html) рисуется сразу при загрузке, пока и так идёт загрузка, и через 2,5 с убирается. Замер 08.10, Chrome 150, CPU×1 */ .gpu-w { position: fixed; left: 0; top: 0; width: 16px; height: 16px; opacity: .01; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff 0 16%, #3B7BF6 30%, #2C64D8 100%); box-shadow: 0 3px 5px rgba(13, 19, 36, .28); } .gpu-w::after { content: ''; position: absolute; left: 20px; top: 0; width: 40px; height: 16px; background: linear-gradient(transparent 52%, #E3EDFF 52%, #E3EDFF 92%, transparent 92%) no-repeat; background-size: 60% 100%; } @-webkit-keyframes zmIn { 0% { opacity: 0; -webkit-transform: translateY(-14px) rotate(calc(var(--zr, 1.6deg) - 3deg)); } 45% { opacity: 1; -webkit-transform: translateY(-3px) rotate(calc(var(--zr, 1.6deg) - .6deg)); } 62% { -webkit-transform: translateY(2px) rotate(calc(var(--zr, 1.6deg) * .55)); } 100% { opacity: 1; -webkit-transform: rotate(var(--zr, 1.6deg)); } } @keyframes zmIn { 0% { opacity: 0; transform: translateY(-14px) rotate(calc(var(--zr, 1.6deg) - 3deg)); } 45% { opacity: 1; transform: translateY(-3px) rotate(calc(var(--zr, 1.6deg) - .6deg)); } 62% { transform: translateY(2px) rotate(calc(var(--zr, 1.6deg) * .55)); } 100% { opacity: 1; transform: rotate(var(--zr, 1.6deg)); } } @-webkit-keyframes zmPin { 0% { opacity: 0; -webkit-transform: translateY(-12px) scale(1.5); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes zmPin { 0% { opacity: 0; transform: translateY(-12px) scale(1.5); } 100% { opacity: 1; transform: none; } } /* штамп ДЕМО в шапке окна (кабинет, конструктор, домен) — не закрывает цифры, ярлыки «пример» в этих окнах убраны */ .dst { display: inline-block; flex: none; padding: .32em .62em .26em; border: 2px solid var(--coral-d); border-radius: 6px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--coral-d); background: rgba(255, 255, 255, .9); font: 700 max(11px, .62em)/1 var(--f-mono); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--coral-d); white-space: nowrap; -webkit-transform: rotate(-7deg); transform: rotate(-7deg); pointer-events: none; -webkit-user-select: none; user-select: none; } .kb-dst { margin-left: 1.6em; font-size: max(11px, .72em); } .kn-dst { margin: 0 .2em 0 .8em; font-size: max(11px, .78em); } .kn-chrome .kn-addr { margin: 0 0 0 auto; } .kn-chrome .kn-dst { margin-right: auto; } .p6-dst { margin-left: .8em; font-size: max(11px, .72em); } .kb .kb-ex { display: none; } @media (min-width: 1500px) { .vit-sub.zm { margin-top: 3.6vh; } .kab-sub.zm, .kn-sub.zm, .p6-lead.zm, .t6-sub.zm { padding-top: 26px; } /* булавка не уходит под шапку */ } /* планшет и телефон: карточка под заголовком во всю ширину (раньше абзацы тут прятались) */ @media (max-width: 1100px) { .film-on .vit-sub.zm, .film-on .kab-sub.zm { display: block; } .vit-sub.zm, .kab-sub.zm, .kn-sub.zm, .p6-lead.zm, .t6-sub.zm { max-width: none; margin-left: 0; margin-right: 0; } .zm-card { max-width: 40em; } .vit-sub.zm { margin-top: 14px; } } @media (max-width: 720px) { .vit-sub.zm { display: block; } .zm-card { max-width: none; padding: .8em 1em .75em; font-size: 15px; line-height: 1.42; } .zm-h { margin-bottom: .4em; padding-bottom: .3em; font-size: 10.5px; } .zm-l { line-height: 1.42; } .vit-sub.zm, .kab-sub.zm, .kn-sub.zm, .p6-lead.zm, .t6-sub.zm { margin-top: 8px; padding-top: 8px; } .film-on .kn-sub.zm { font-size: inherit; line-height: inherit; } .kb-dst { margin-left: .5em; padding: .28em .45em .22em; font-size: max(10px, .6em); letter-spacing: .2em; text-indent: .2em; } /* узкая шапка кабинета: тариф и аватар не выталкивает */ .kb .kb-bar .kb-pill { margin-right: .45em; } } @media (prefers-reduced-motion: reduce) { .zm-card, .zm-pin, .zm mark { -webkit-animation: none !important; animation: none !important; transition: none !important; } } /* ========================================================================================================== ОБЛЕГЧЁННЫЙ РЕЖИМ (lite.js → , слабый компьютер: < 40 к/с в первые 2 с или слабое железо и < 55 к/с). Вид и смысл сцен те же; убрано то, что дорого перерисовывать в каждом кадре перехода: размытие, большие мягкие тени окон (монитор витрин и кабинет едут под matrix3d / scale — тень растрировалась заново). Мелкие анимации иллюстраций (transform / opacity) не трогаем — они дешёвые. Призма (geroy.js) — 30 к/с, без размытой тени. ========================================================================================================== */ .lite .vit-name .nm.in-r, .lite .vit-name .nm.out-l { -webkit-filter: none; filter: none; } .lite .vt-body, .lite .kb { box-shadow: 0 2px 10px rgba(13, 19, 36, .08); } .lite .fin-card { box-shadow: 0 2px 10px rgba(13, 19, 36, .06); } /* подпись «Сайт работает в облегчённом режиме. Обычный вид →» — один раз, бумажная полоска у левого края над шкалой таймкода (справа внизу — билет cookie); на телефоне — под шапкой. Сама уходит через 12 с, есть «×» */ .lite-hint { position: fixed; z-index: 60; left: var(--gut); bottom: 44px; max-width: calc(100vw - 2 * var(--gut)); margin: 0; display: flex; align-items: center; padding: 9px 8px 9px 14px; background: #fff; border: 1px solid var(--hair); border-left: 3px solid var(--blue); border-radius: 6px; box-shadow: 0 2px 10px rgba(13, 19, 36, .08); font: 500 13px/1.35 var(--f-text); color: var(--soft); opacity: 0; -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); transition: opacity .45s ease, transform .45s ease; } .lite-hint.on { opacity: 1; -webkit-transform: none; transform: none; } .lite-hint a { margin-left: .35em; color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; } .lite-hint a:hover { text-decoration: underline; } .lite-hint a:focus-visible, .lite-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .lite-x { flex: none; width: 28px; height: 28px; margin-left: 8px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--mute); font: 400 18px/28px var(--f-text); cursor: pointer; } .lite-x:hover { color: var(--ink); background: #F3F6FB; } @media (max-width: 720px) { .lite-hint { left: 16px; right: 16px; bottom: auto; top: calc(var(--head, 58px) + 8px); max-width: none; font-size: 13px; } .lite-x { width: 44px; height: 44px; margin: -8px -6px -8px 4px; line-height: 44px; } } @media (prefers-reduced-motion: reduce) { .lite-hint { transition: none; } } /* подсказка прокрутки в герое (Юра 09.10): по центру внизу первого экрана — мышка с катящимся колёсиком (вариант 1) или «перо» — линия, прочерчивающаяся вниз (вариант 2, ?podskazka=2); подпись моно, шеврон покачивается. Телефон: палец скользит вверх, «Листайте вверх», строкой между кнопками и магазином (место ставит kino.js). Только transform / opacity / stroke-dashoffset — дёшево и в облегчённом режиме */ .skh { position: absolute; z-index: 6; left: 50%; bottom: 24px; display: none; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; margin: 0; padding: 8px 14px 6px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; opacity: 0; -webkit-transform: translate3d(-50%, 8px, 0); transform: translate3d(-50%, 8px, 0); transition: opacity .6s ease, transform .6s ease; -webkit-tap-highlight-color: transparent; } .skh.on { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .skh.gone { opacity: 0; pointer-events: none; transition-duration: .3s; } .skh:focus { outline: none; } .skh:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .skh svg { display: block; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .skh-t { margin-top: 10px; font-size: 12px; letter-spacing: .14em; color: var(--soft); white-space: nowrap; } .skh:hover .skh-t { color: var(--blue); } .skh-chev { width: 14px; height: 9px; margin-top: 6px; } .skh-chev path { stroke: var(--blue); } .skh.on .skh-chev { -webkit-animation: skBob 1.9s ease-in-out infinite; animation: skBob 1.9s ease-in-out infinite; } /* вариант 1 — мышка: колёсико катится вниз и тает, снова появляется наверху */ .skh-mouse { width: 28px; height: 43px; } .skh-mid { stroke-width: 1.2; opacity: .45; } .skh-wheel { fill: var(--blue); stroke: none; } .skh.on .skh-wheel { -webkit-animation: skWheel 1.9s cubic-bezier(.45, 0, .3, 1) infinite; animation: skWheel 1.9s cubic-bezier(.45, 0, .3, 1) infinite; } /* вариант 2 — перо: линия прочерчивается сверху вниз, наконечник проявляется, всё вместе уходит вниз и тает */ .skh .skh-pen, .skh .skh-finger, .skh .skh-mob { display: none; } .skh-pen { width: 18px; height: 62px; } .skh-pen-l { stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 48; stroke-dashoffset: 48; } .skh-pen-a { stroke: var(--blue); stroke-width: 1.7; opacity: 0; } .skh.v2 .skh-mouse, .skh.v2 .skh-chev { display: none; } .skh.v2 .skh-pen { display: block; } .skh.v2.on .skh-pen-l { -webkit-animation: skPenL 2.2s cubic-bezier(.5, 0, .3, 1) infinite; animation: skPenL 2.2s cubic-bezier(.5, 0, .3, 1) infinite; } .skh.v2.on .skh-pen-a { -webkit-animation: skPenA 2.2s ease infinite; animation: skPenA 2.2s ease infinite; } .skh.v2 .skh-t { margin-top: 6px; } @-webkit-keyframes skWheel { 0% { -webkit-transform: translateY(-2px); opacity: 0; } 18% { opacity: 1; } 62% { -webkit-transform: translateY(10px); opacity: 1; } 84%, 100% { -webkit-transform: translateY(13px); opacity: 0; } } @keyframes skWheel { 0% { transform: translateY(-2px); opacity: 0; } 18% { opacity: 1; } 62% { transform: translateY(10px); opacity: 1; } 84%, 100% { transform: translateY(13px); opacity: 0; } } @-webkit-keyframes skBob { 0%, 100% { -webkit-transform: translateY(-2px); opacity: .5; } 50% { -webkit-transform: translateY(3px); opacity: 1; } } @keyframes skBob { 0%, 100% { transform: translateY(-2px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } } @-webkit-keyframes skPenL { 0% { stroke-dashoffset: 48; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -48; opacity: 0; } } @keyframes skPenL { 0% { stroke-dashoffset: 48; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -48; opacity: 0; } } @-webkit-keyframes skPenA { 0%, 45% { opacity: 0; -webkit-transform: translateY(-6px); } 60%, 80% { opacity: 1; -webkit-transform: none; } 100% { opacity: 0; -webkit-transform: translateY(6px); } } @keyframes skPenA { 0%, 45% { opacity: 0; transform: translateY(-6px); } 60%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } } /* большие мониторы — крупнее, чтобы подсказку было видно издалека */ @media (min-width: 1700px) { .skh-mouse { width: 32px; height: 49px; } .skh-pen { width: 20px; height: 70px; } .skh-t { font-size: 13px; } .skh-chev { width: 16px; height: 10px; } } /* телефон: строкой — палец скользит вверх по дорожке, «Листайте вверх» */ @media (max-width: 720px) { /* бумажная плашка-капсула сразу под кнопками: призма во время сборки бывает выше магазина — надпись остаётся читаемой */ .skh { -webkit-flex-direction: row; flex-direction: row; bottom: auto; top: 0; padding: 5px 14px 5px 10px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 255, 255, .94); } .skh .skh-mouse, .skh .skh-pc, .skh .skh-chev, .skh.v2 .skh-pen { display: none; } .skh .skh-finger { display: block; width: 15px; height: 30px; } .skh.v2 .skh-finger { display: none; } .skh.v2 .skh-pen { display: block; width: 14px; height: 32px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .skh .skh-mob { display: inline; } .skh-t { margin: 0 0 0 10px; } .skh.v2 .skh-t { margin: 0 0 0 8px; } .skh-track { stroke-width: 1.2; opacity: .35; } .skh-tip { fill: rgba(59, 123, 246, .16); stroke: var(--blue); stroke-width: 1.4; } .skh.on .skh-tip { -webkit-animation: skTip 1.9s cubic-bezier(.45, 0, .3, 1) infinite; animation: skTip 1.9s cubic-bezier(.45, 0, .3, 1) infinite; } } @-webkit-keyframes skTip { 0% { -webkit-transform: translateY(2px); opacity: 0; } 18% { opacity: 1; } 65% { -webkit-transform: translateY(-22px); opacity: 1; } 85%, 100% { -webkit-transform: translateY(-26px); opacity: 0; } } @keyframes skTip { 0% { transform: translateY(2px); opacity: 0; } 18% { opacity: 1; } 65% { transform: translateY(-22px); opacity: 1; } 85%, 100% { transform: translateY(-26px); opacity: 0; } } /* «уменьшить движение»: подсказка неподвижна — колёсико и палец на середине пути, линия-перо прочерчена */ @media (prefers-reduced-motion: reduce) { .skh, .skh.on { transition: none; } .skh.on .skh-wheel, .skh.on .skh-chev, .skh.v2.on .skh-pen-l, .skh.v2.on .skh-pen-a, .skh.on .skh-tip { -webkit-animation: none; animation: none; } .skh-wheel { -webkit-transform: translateY(6px); transform: translateY(6px); } .skh-tip { -webkit-transform: translateY(-12px); transform: translateY(-12px); } .skh-pen-l { stroke-dashoffset: 0; } .skh-pen-a { opacity: 1; } } /* Баг Юры 08.10: после возврата «Запуск» → «Тарифы» анимация ухода оставляет стили на бланке, и при «Сравнить все» бланк и строка дополнений оказывались поверх таблицы. В режиме сравнения прячем их, как карточки. */ .film-on .t6-cmp-on .t6-form, .film-on .t6-cmp-on .t6-add-main { visibility: hidden !important; }