/* H01 · «Три питання власника»: перенесено з hero-scene-2026-10-26 (26.10.2026). Усі селектори під #H01. */ /* H01 v2 «Три питання власника» — ізольований прототип. Токени й типографіка — як у Warm Workbook (desktop-mockup/warm.css). */ #H01{ --sans:Manrope,Arial,sans-serif;--serif:Georgia,'Times New Roman',serif;--hand:'Shantell Sans',Georgia,serif; --chalk:#2c4a3c;--ease-out:cubic-bezier(.16,1,.3,1);--ease-draw:cubic-bezier(.65,0,.35,1);--ease-pop:cubic-bezier(.34,1.4,.64,1); --frame-w:780px;--frame-ar:1320/936;--band-t:90px;--band-b:70px; } #H01 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} #H01 .chalk-defs{position:absolute;width:0;height:0;overflow:hidden} #H01 h1{font-family:var(--serif);font-weight:600;letter-spacing:-.035em;font-size:clamp(36px,3.2vw,46px);line-height:1.12;margin:0 0 24px} /* шапка, як у макеті */ /* ---------- hero ---------- */ #H01{padding:44px 0 36px;overflow:hidden;position:relative} #H01 .hero-grid{display:grid;grid-template-columns:clamp(460px,40vw,612px) minmax(0,1fr);gap:28px;align-items:start} #H01 .tag{margin:0 0 26px;font:600 12px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green)} #H01 .lead{font:17px/1.7 var(--sans);margin:0;max-width:760px} #H01 .actions{display:flex;flex-direction:column;align-items:flex-start;gap:21px;margin:30px 0 34px} #H01 .hero-link{font:650 15px var(--sans);text-decoration:underline;text-decoration-color:#7fa493;text-underline-offset:6px;display:flex;align-items:center;gap:16px} #H01 .assurances{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 15px;font-size:12px;line-height:1.5;max-width:420px} #H01 .assurances span{display:flex;align-items:flex-start;gap:7px} #H01 .assurances .ui-icon{width:17px;height:17px;margin-top:1px} /* ---------- сцена ---------- */ #H01 .stage{position:relative;width:var(--frame-w);height:calc(var(--band-t) + 30px + var(--frame-w) * 936 / 1320 + var(--band-b));margin-top:0} #H01 .brand-art{position:absolute;width:720px;max-width:none;right:-330px;top:-270px;opacity:.14;z-index:0;pointer-events:none} #H01 .frame{position:relative;margin:0;background:#fff;border:1px solid #deddd5;border-radius:12px;box-shadow:0 24px 60px -24px rgba(64,52,28,.28),0 2px 6px rgba(64,52,28,.06);overflow:hidden;z-index:1} #H01 .frame-main{position:absolute;left:0;top:var(--band-t);width:var(--frame-w)} #H01 .frame-bar{display:flex;gap:6px;align-items:center;height:30px;padding:0 14px;background:#f2f0e8;border-bottom:1px solid var(--line)} #H01 .frame-bar i{width:9px;height:9px;border-radius:50%;background:#d4d1c4} /* «камера»: --S/--H — розмір файлу, --x/--y/--w — вікно в пікселях файлу */ #H01 .cam{position:relative;overflow:hidden;aspect-ratio:var(--frame-ar);background:#fff} #H01 .cam img{position:absolute;left:0;top:0;max-width:none;height:auto;width:calc(100% * var(--S) / var(--w));transform:translate(calc(-100% * var(--x) / var(--S)),calc(-100% * var(--y) / var(--H)))} #H01 .zm{position:absolute;right:14px;bottom:12px;font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(23,35,30,.78);padding:8px 10px 8px 28px;border-radius:999px;opacity:0;transform:translateY(4px);pointer-events:none} #H01 .zm::before{content:"";position:absolute;left:10px;top:7px;width:11px;height:11px;border:2px solid #fff;border-radius:50%} #H01 .zm::after{content:"";position:absolute;left:19px;top:16px;width:6px;height:2px;background:#fff;transform:rotate(45deg)} #H01.is-js [data-zoom]{cursor:zoom-in} #H01 [data-zoom]:hover .zm{opacity:1;transform:none} #H01.is-motion .zm{transition:opacity .25s,transform .25s} /* ---------- кільця-відповіді на екрані ---------- «Активне» питання n = наведення/фокус на ньому або на його записці; якщо курсора/фокуса на сцені немає — зафіксоване (aria-pressed). Наведення завжди важливіше за зафіксований стан: решта згасає. Esc (JS) ставить на сцену клас .dismissed — усе спокійне. */ #H01 .spot{position:absolute;border-radius:8px;pointer-events:none;box-shadow:0 0 0 2px var(--green),0 0 0 6px rgba(7,137,88,.14);opacity:.75} #H01 .spot-1{left:.5%;top:11.7%;width:36.4%;height:23.5%} #H01 .spot-2{left:.5%;top:37.2%;width:99%;height:7.4%} #H01 .spot-3{inset:0;border-radius:10px;box-shadow:inset 0 0 0 2px var(--green)} /* притемнення навколо кільця — окремий шар: змінюється лише opacity, а не box-shadow на пів-екрана */ #H01 .spot-1::after,#H01 .spot-2::after{content:"";position:absolute;inset:-2px;border-radius:10px;box-shadow:0 0 0 9999px rgba(238,234,222,.5);opacity:0} /* вуаль — папером (fog), не тінню */ #H01 .frame-queue{position:absolute;right:80px;bottom:calc(var(--band-b) - 14px);width:390px;z-index:3;box-shadow:0 30px 60px -20px rgba(64,52,28,.42),0 2px 6px rgba(64,52,28,.08)} #H01 .frame-queue .cam{aspect-ratio:650/400} #H01 .frame-main .cam::after{content:"";position:absolute;inset:0;background:rgba(238,234,222,.5);opacity:0;pointer-events:none;z-index:1} #H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q:is(:hover,:focus-visible)),:has(.note:is(:hover,:focus-within)),:has(.q[aria-pressed="true"])) .spot{opacity:0} #H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .spot-1,#H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .spot-2,#H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3{opacity:1} #H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .spot-1::after,#H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .spot-2::after,#H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3::after{opacity:1} #H01:is(:not(.is-motion),.ink-on) .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3{box-shadow:inset 0 0 0 3px var(--green)} #H01 .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .frame-main .cam::after{opacity:1} #H01 .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .frame-queue{transform:translateY(-4px)} #H01.is-motion .frame-main .cam::after,#H01.is-motion .spot::after{transition:opacity .3s} #H01.is-motion .spot{transition:opacity .3s,box-shadow .3s} #H01.is-motion .frame-queue{transition:transform .3s var(--ease-out);will-change:transform} /* ---------- питання крейдою ---------- Реагує лише підпис-«пігулка» і лінія стрілки: порожній прямокутник кнопки не перехоплює наведення й кліки по кадру (лайтбокс). */ #H01 .q{--on:0;position:absolute;background:none;border:0;z-index:4;display:flex;flex-direction:column;align-items:flex-start;color:var(--chalk);text-align:left;white-space:nowrap;border-radius:8px;padding:2px 4px;pointer-events:none} #H01 .q:focus-visible{outline:none} #H01 .q:focus-visible .q-t{outline:3px solid var(--green);outline-offset:4px;box-shadow:0 0 0 2px #fff} #H01 .q .q-t{pointer-events:auto;font:600 19px/24px var(--hand);filter:url(#h01-chalk-text);padding:3px 11px;border-radius:999px;border:1.5px dashed rgba(44,74,60,.5);background:rgba(245,242,233,.55)} #H01 .q .q-arrow{overflow:visible;filter:url(#h01-chalk);pointer-events:none} #H01 .q .q-arrow path{fill:none;stroke:var(--chalk);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke} /* довжини контурів у user units (getTotalLength, вгору до цілого +1; те саме рахує JS для «чорнила»): dash дорівнює довжині шляху, а не «300 з запасом», тож лінія малюється рівномірно на весь час анімації, а не за перші 20–45 % (раніше короткі стрілки й наконечники з'являлися майже миттєво) */ #H01 .q1 .m,#H01 .q1 .u:first-child{--d:136}#H01 .q1 .h,#H01 .q1 .u:nth-child(3){--d:31} #H01 .q2 .m,#H01 .q2 .u:first-child{--d:270}#H01 .q2 .h,#H01 .q2 .u:nth-child(3){--d:35} #H01 .q3 .m,#H01 .q3 .u:first-child{--d:68}#H01 .q3 .h,#H01 .q3 .u:nth-child(3){--d:26} /* підкладка стрілки кольором паперу, щоб штрих не губився на інтерфейсі */ #H01 .q .q-arrow path.u{stroke:#f5f2e9;stroke-width:6;opacity:.85} #H01 .q1{transform:rotate(-1.2deg)}#H01 .q2{transform:rotate(.8deg)}#H01 .q3{transform:rotate(-.6deg)} /* активне питання: підпис, а без JS-«чорнила» і стрілка, стають зеленими */ #H01 .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .q1 .q-t,#H01 .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .q2 .q-t,#H01 .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .q3 .q-t{border-color:var(--green);border-style:solid;background:#fff;color:var(--green)} #H01:not(.ink-on) .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .q1 .q-arrow path,#H01:not(.ink-on) .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .q2 .q-arrow path,#H01:not(.ink-on) .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .q3 .q-arrow path{stroke:var(--green)} #H01 .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .q1,#H01 .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .q2,#H01 .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .q3{--on:1} #H01.is-motion .q .q-t{transition:border-color .25s,background-color .25s,color .25s} #H01.is-motion:not(.ink-on) .q .q-arrow path{transition:stroke .25s} #H01 .q1{left:0;top:10px} #H01 .q1 .q-arrow{width:40px;height:136px;margin:-2px 0 0 140px} #H01 .q2{left:336px;top:10px} #H01 .q2 .q-arrow{width:30px;height:276px;margin:-2px 0 0 221px} /* стрілка йде проміжком між картками показників */ #H01 .q3{left:234px;bottom:2px;flex-direction:row;align-items:flex-end;gap:10px} #H01 .q3 .q-arrow{width:70px;height:40px;margin:0 0 6px} /* «чорнило»: після вступу (лише html.motion) JS додає поверх крейдяної стрілки зелений клон контуру. Активне питання дорисовує його stroke-dashoffset-ом (лінія, потім наконечник), неактивне стирає (наконечник, потім лінія); крейдяна стрілка під ним лишається, тож нічого не зникає й не смикається. --t — тривалість лінії (с), --on — 0/1 (ставиться на .q). */ #H01 .q .q-arrow .ink path{stroke:var(--green);stroke-dasharray:calc(var(--d)*1px) 999px;stroke-dashoffset:calc((1 - var(--on)) * (var(--d)*1px + 4px))} #H01.is-motion .ink .i-m{transition:stroke-dashoffset calc((.55 + .45 * var(--on)) * var(--t) * 1s) var(--ease-draw) calc((1 - var(--on)) * .14s)} #H01.is-motion .ink .i-h{transition:stroke-dashoffset .22s ease-out calc(var(--on) * var(--t) * 1s)} /* ---------- хореографія появи (лише html.motion) ---------- кадр, питання 1, стрілка, наконечник, кільце, питання 2, ... Кінцевий стан — звичайні стилі, анімація задає лише «від» (fill-mode backwards), тому вона не перекриває :has-підсвічування, а скасована анімація залишає сцену у фінальному вигляді. --lt — поява підпису, --at — початок лінії, --dm — її тривалість (≈300 px/с); наконечник стартує, коли лінія дійшла. Кільця — 1,5 / 2,95 / 3,65 с. */ #H01.is-motion .frame-main,#H01.is-motion .frame-queue{animation:rise .7s var(--ease-out) backwards} #H01.is-motion .frame-queue{animation-delay:.25s} #H01 .q1{--lt:.5;--at:.85;--dm:.45} #H01 .q2{--lt:1.5;--at:1.85;--dm:.9} #H01 .q3{--lt:2.7;--at:3.05;--dm:.4} #H01.is-motion .q{animation:fade .5s var(--ease-out) backwards;animation-delay:calc(var(--lt) * 1s)} #H01.is-motion .q .q-arrow path{stroke-dasharray:calc(var(--d)*1px) 999px} #H01.is-motion .q .q-arrow .m{animation:draw calc(var(--dm) * 1s) var(--ease-draw) backwards;animation-delay:calc(var(--at) * 1s)} #H01.is-motion .q .q-arrow .h{animation:draw .22s ease-out backwards;animation-delay:calc((var(--at) + var(--dm) + .02) * 1s)} #H01.is-motion .spot{animation:spot .4s var(--ease-out) backwards} #H01.is-motion .spot-1{animation-delay:1.5s}#H01.is-motion .spot-2{animation-delay:2.95s}#H01.is-motion .spot-3{animation-delay:3.65s} @keyframes rise{from{opacity:0;transform:translateY(24px)}} @keyframes fade{from{opacity:0;transform:translateY(6px)}} @keyframes draw{from{stroke-dashoffset:calc(var(--d)*1px + 4px)}} @keyframes spot{from{opacity:0}} /* записка першого питання (відкрите за замовчуванням) з'являється разом із кільцем 1, а не до кадру */ #H01.is-motion .note-1{animation:note-in .4s var(--ease-out) 1.6s backwards} @keyframes note-in{from{opacity:0;transform:translateY(8px)}} /* ---------- відповідь-записка ---------- Одне місце для всіх трьох: лівий низ кадру, над графіком. Наведення/фокус на питанні показує записку одразу; зафіксована (aria-pressed) з'являється з паузою .3 с. Зникає теж з паузою (opacity .3 с, visibility .58 с): поки курсор летить з питання на записку, вона ще не погасла, а зафіксована ще не вилізла; навівшись на записку, її тримають (A). Активна записка завжди над іншими. */ #H01 .note{position:absolute;left:-58px;bottom:calc(var(--band-b) + 28px);width:332px;z-index:5;background:#e5eee3;border:1px solid #86a58b;border-radius:10px;padding:15px 17px 14px;box-shadow:0 22px 44px -16px rgba(24,52,43,.35),0 2px 6px rgba(24,52,43,.1);font:13px/1.5 var(--sans);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .28s var(--ease-out) .3s,visibility 0s linear .58s} #H01.is-motion .note{transition:opacity .35s var(--ease-out) .3s,transform .5s var(--ease-pop) .3s,visibility 0s linear .58s;will-change:opacity,transform} #H01 .note b{display:block;font:600 16px/1.3 var(--serif);letter-spacing:-.01em;margin-bottom:6px;color:#18553a} #H01 .note span{display:block;color:#3f4a42} #H01 .note a{display:inline-block;margin-top:9px;font:650 13px/1.3 var(--sans);color:#18553a;text-decoration:underline;text-decoration-color:#86a58b;text-underline-offset:4px} #H01 .note a:hover{color:var(--green)} #H01 .hint{position:absolute;left:2px;bottom:30px;margin:0;font:12px/1.35 var(--sans);color:var(--muted);z-index:4} #H01 .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .note-1,#H01 .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .note-2,#H01 .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .note-3{opacity:1;visibility:visible;transform:none;z-index:6} #H01 .stage:not(.dismissed):not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"]) .note-1,#H01 .stage:not(.dismissed):not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"]) .note-2,#H01 .stage:not(.dismissed):not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"]) .note-3{transition-delay:.3s,.3s,.3s} #H01 .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within))) .note-1,#H01 .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within))) .note-2,#H01 .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within))) .note-3{transition-delay:0s,0s,0s} #H01 .stage.dismissed .note{opacity:0;visibility:hidden;transition-delay:0s} #H01 .m-rows{display:none} #H01 .legal{margin:26px 0 0;font-size:12px;line-height:1.6;color:var(--muted)} /* ---------- лайтбокс (лише з JS) ---------- */ #H01 .h01-lb{border:0;padding:0;border-radius:12px;max-width:min(1320px,calc(100vw - 48px));max-height:calc(100vh - 48px);background:#fff;box-shadow:0 60px 120px -30px rgba(0,0,0,.5);overflow:hidden} #H01 .h01-lb::backdrop{background:rgba(23,35,30,.7);backdrop-filter:blur(3px)} #H01 .h01-lb-h{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0;padding:16px 22px;border-bottom:1px solid var(--line)} #H01 .h01-lb-h h2{margin:0;font:600 18px/1.3 var(--serif)} #H01 .h01-lb-x{width:36px;height:36px;border-radius:50%;background:var(--fog);font-size:24px;line-height:36px;color:var(--ink)} #H01 .h01-lb-sc{overflow:auto;max-height:calc(100vh - 130px);background:#f0efe8} #H01 .h01-lb-sc img{width:100%;height:auto} /* піднятий фрагмент «Продажі → Передачі в навчання 7»: лише на питанні 2 */ #H01 .frame-sales{position:absolute;left:270px;top:316px;width:420px;z-index:3;opacity:0;visibility:hidden;transform:translateY(6px);box-shadow:0 30px 60px -20px rgba(64,52,28,.42),0 2px 6px rgba(64,52,28,.08)} #H01 .frame-sales .cam{aspect-ratio:760/82} #H01 .frame-sales::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 3px var(--green);pointer-events:none} #H01 .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .frame-sales{opacity:1;visibility:visible;transform:none} #H01.is-motion .frame-sales{transition:opacity .3s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear .3s} /* картка черги притемнюється, коли відповідь — на головному кадрі (питання 1 або 2); яскрава лише на питанні 3 */ #H01 .frame-queue::after{content:"";position:absolute;inset:0;border-radius:12px;background:rgba(238,234,222,.5);opacity:0;pointer-events:none;z-index:2} #H01 .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .frame-queue::after,#H01 .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .frame-queue::after{opacity:1} #H01.is-motion .frame-queue::after{transition:opacity .3s} /* ---------- помітна зміна питання (власник 26.10: «не помітив, коли переключилось») ---------- */ #H01 .q .q-t{position:relative;display:inline-block} /* лінія-прогрес під активним питанням, поки йде відлік автоперемикання */ #H01 .stage.auto .q[aria-pressed="true"] .q-t::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;background:var(--green);opacity:.7;transform-origin:left;animation:fill var(--step,5500ms) linear forwards} @keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* «стрибок» відповіді, коли питання стає активним (після вступу) */ #H01.ink-on .q[aria-pressed="true"] .q-t{animation:tagpop .5s var(--ease-pop)} @keyframes tagpop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}} #H01.ink-on .stage:not(.dismissed):is(:has(.q1:is(:hover,:focus-visible)),:has(.note-1:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q1[aria-pressed="true"])) .spot-1,#H01.ink-on .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .spot-2{animation:ringpop .6s var(--ease-pop)} @keyframes ringpop{0%{transform:scale(1.08);opacity:.4}100%{transform:none;opacity:1}} #H01.ink-on .stage:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .frame-queue{animation:cardpop .6s var(--ease-pop)} #H01.ink-on .stage:not(.dismissed):is(:has(.q2:is(:hover,:focus-visible)),:has(.note-2:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q2[aria-pressed="true"])) .frame-sales{animation:cardpop .6s var(--ease-pop)} @keyframes cardpop{0%{transform:translateY(10px) scale(.985)}100%{transform:none}} /* ================= три екрани: А панель власника · Б звіт про рекламу · В картка учня ================= */ #H01 .stages{position:relative;width:var(--frame-w);height:calc(var(--band-t) + 30px + var(--frame-w) * 936 / 1320 + var(--band-b))} #H01 .stages .stage{position:absolute;left:0;top:0;margin:0} #H01 .scr{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} #H01 .stage-b,#H01 .stage-c,#H01 .stage-d{opacity:0;visibility:hidden;transform:translateX(36px);pointer-events:none} #H01 .stages:has(#h01-scr-b:checked,#h01-scr-c:checked,#h01-scr-d:checked) .stage-a,#H01 .stages:has(#h01-scr-b:checked,#h01-scr-c:checked) .stage-d,#H01 .stages:has(#h01-scr-c:checked) .stage-b{opacity:0;visibility:hidden;transform:translateX(-36px);pointer-events:none} #H01 .stages:has(#h01-scr-b:checked) .stage-b,#H01 .stages:has(#h01-scr-c:checked) .stage-c,#H01 .stages:has(#h01-scr-d:checked) .stage-d{opacity:1;visibility:visible;transform:none;pointer-events:auto} #H01.is-motion .stage{transition:opacity .55s var(--ease-out),transform .6s var(--ease-out),visibility 0s linear .55s} #H01.is-motion .stages:has(#h01-scr-b:checked) .stage-b,#H01.is-motion .stages:has(#h01-scr-c:checked) .stage-c,#H01.is-motion .stages:has(#h01-scr-d:checked) .stage-d,#H01.is-motion .stages:not(:has(#h01-scr-b:checked,#h01-scr-c:checked,#h01-scr-d:checked)) .stage-a{transition-delay:.1s,.1s,0s} /* вкладки екранів під підказкою */ #H01 .scr-tabs{position:absolute;left:2px;bottom:6px;z-index:6;display:flex;gap:12px;font:600 12px/1.3 var(--sans);color:var(--muted);white-space:nowrap} #H01 .scr-tab{cursor:pointer;padding-bottom:3px;border-bottom:2px solid transparent} #H01 .scr-tab:hover{color:var(--ink)} #H01 .stages:not(:has(#h01-scr-b:checked,#h01-scr-c:checked,#h01-scr-d:checked)) .scr-tab-a,#H01 .stages:has(#h01-scr-b:checked) .scr-tab-b,#H01 .stages:has(#h01-scr-c:checked) .scr-tab-c,#H01 .stages:has(#h01-scr-d:checked) .scr-tab-d{color:var(--ink);border-color:var(--green)} #H01 #h01-scr-a:focus-visible~.scr-tabs .scr-tab-a,#H01 #h01-scr-b:focus-visible~.scr-tabs .scr-tab-b,#H01 #h01-scr-c:focus-visible~.scr-tabs .scr-tab-c,#H01 #h01-scr-d:focus-visible~.scr-tabs .scr-tab-d{outline:2px solid var(--green);outline-offset:3px;border-radius:4px} /* екрани Б і В: кадр без бічної панелі має пропорцію 2750/1685 — кадр нижчий, нижня смуга більша */ #H01 .stage-b .frame-main .cam,#H01 .stage-c .frame-main .cam{aspect-ratio:2750/1685} #H01 .stage-b .frame-main .cam::after,#H01 .stage-c .frame-main .cam::after,#H01 .stage-d .frame-main .cam::after{display:none} #H01 .stage-b .spot-3,#H01 .stage-c .spot-3,#H01 .stage-d .spot-3{inset:auto;border-radius:8px;box-shadow:0 0 0 2px var(--green),0 0 0 6px rgba(7,137,88,.14)} #H01 .stage-b .spot-3::after,#H01 .stage-c .spot-3::after,#H01 .stage-d .spot-3::after{content:"";position:absolute;inset:-2px;border-radius:10px;box-shadow:0 0 0 9999px rgba(238,234,222,.5);opacity:0} #H01 .stage-b .note,#H01 .stage-c .note,#H01 .stage-d .note{left:-70px;width:300px;bottom:calc(var(--band-b) + 100px)} /* --- Б: звіт про рекламу --- */ #H01 .stage-b .q1{left:0;top:10px;transform:rotate(-.8deg)} #H01 .stage-b .q1 .q-arrow{width:30px;height:250px;margin:-2px 0 0 60px} #H01 .stage-b .q3{left:400px;top:10px;bottom:auto;flex-direction:column;align-items:flex-start;transform:rotate(.6deg)} #H01 .stage-b .q3 .q-arrow{width:30px;height:250px;margin:-2px 0 0 120px} #H01 .stage-b .q2{left:250px;bottom:56px;top:auto;flex-direction:row;align-items:flex-end;gap:10px;transform:rotate(-.6deg)} #H01 .stage-b .q2 .q-arrow{width:70px;height:60px;margin:0 0 4px} #H01 .stage-b .q1 .m,#H01 .stage-b .q1 .u:first-child,#H01 .stage-b .q3 .m,#H01 .stage-b .q3 .u:first-child{--d:240}#H01 .stage-b .q1 .h,#H01 .stage-b .q1 .u:nth-child(3),#H01 .stage-b .q3 .h,#H01 .stage-b .q3 .u:nth-child(3){--d:35} #H01 .stage-b .q2 .m,#H01 .stage-b .q2 .u:first-child{--d:80}#H01 .stage-b .q2 .h,#H01 .stage-b .q2 .u:nth-child(3){--d:26} #H01 .stage-b .spot-1{left:1.6%;top:37.3%;width:96.9%;height:13.2%} #H01 .stage-b .spot-2{left:1.6%;top:72.6%;width:96.9%;height:23.1%} #H01 .stage-b .spot-3{left:59.7%;top:37.3%;width:18.3%;height:13.2%} #H01:is(:not(.is-motion),.ink-on) .stage-b:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3::after{opacity:1} #H01.ink-on .stage-b:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3{animation:ringpop .6s var(--ease-pop)} /* --- В: картка учня --- */ #H01 .stage-c .q1{left:0;top:10px;transform:rotate(-.8deg)} #H01 .stage-c .q1 .q-arrow{width:30px;height:280px;margin:-2px 0 0 300px} #H01 .stage-c .q2{left:380px;top:10px;transform:rotate(.6deg)} #H01 .stage-c .q2 .q-arrow{width:40px;height:110px;margin:-2px 0 0 200px} #H01 .stage-c .q3{left:250px;bottom:56px;transform:rotate(-.6deg)} #H01 .stage-c .q3 .q-arrow{width:70px;height:60px;margin:0 0 4px} #H01 .stage-c .q1 .m,#H01 .stage-c .q1 .u:first-child{--d:270}#H01 .stage-c .q1 .h,#H01 .stage-c .q1 .u:nth-child(3){--d:35} #H01 .stage-c .q2 .m,#H01 .stage-c .q2 .u:first-child{--d:106}#H01 .stage-c .q2 .h,#H01 .stage-c .q2 .u:nth-child(3){--d:31} #H01 .stage-c .q3 .m,#H01 .stage-c .q3 .u:first-child{--d:80}#H01 .stage-c .q3 .h,#H01 .stage-c .q3 .u:nth-child(3){--d:26} #H01 .stage-c .spot-1{left:37.7%;top:43.1%;width:60.8%;height:14.2%} #H01 .stage-c .spot-2{left:67.5%;top:7.2%;width:24.1%;height:7.4%} #H01 .stage-c .spot-3{left:37.7%;top:81.2%;width:60.8%;height:7.7%} #H01:is(:not(.is-motion),.ink-on) .stage-c:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3::after{opacity:1} #H01.ink-on .stage-c:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3{animation:ringpop .6s var(--ease-pop)} /* --- Г: P&L (таблиця 1605×994: статті + 08 / 09 / Всього) --- */ #H01 .stage-d .frame-main{width:736px} /* до краю вікна: колонка «Всього» має бути видима цілком */ #H01 .stage-d .frame-main .cam{aspect-ratio:1605/994} #H01 .stage-d .q1{left:0;top:10px;transform:rotate(-.8deg)} #H01 .stage-d .q1 .q-arrow{width:30px;height:150px;margin:-2px 0 0 120px} #H01 .stage-d .q2{left:400px;top:10px;transform:rotate(.6deg)} #H01 .stage-d .q2 .q-arrow{width:30px;height:210px;margin:-2px 0 0 60px} #H01 .stage-d .q3{left:250px;bottom:52px;transform:rotate(-.6deg)} #H01 .stage-d .q3 .q-arrow{width:70px;height:60px;margin:0 0 4px} #H01 .stage-d .q1 .m,#H01 .stage-d .q1 .u:first-child{--d:140}#H01 .stage-d .q1 .h,#H01 .stage-d .q1 .u:nth-child(3){--d:35} #H01 .stage-d .q2 .m,#H01 .stage-d .q2 .u:first-child{--d:200}#H01 .stage-d .q2 .h,#H01 .stage-d .q2 .u:nth-child(3){--d:35} #H01 .stage-d .q3 .m,#H01 .stage-d .q3 .u:first-child{--d:80}#H01 .stage-d .q3 .h,#H01 .stage-d .q3 .u:nth-child(3){--d:26} #H01 .stage-d .spot-1{left:.5%;top:14.4%;width:99%;height:7.6%} #H01 .stage-d .spot-2{left:.5%;top:26.4%;width:99%;height:40.6%} #H01 .stage-d .spot-3{left:.5%;top:86.8%;width:99%;height:12.7%} #H01:is(:not(.is-motion),.ink-on) .stage-d:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3::after{opacity:1} #H01.ink-on .stage-d:not(.dismissed):is(:has(.q3:is(:hover,:focus-visible)),:has(.note-3:is(:hover,:focus-within)),:not(:has(.q:is(:hover,:focus-visible),.note:is(:hover,:focus-within))):has(.q3[aria-pressed="true"])) .spot-3{animation:ringpop .6s var(--ease-pop)} /* ===================== адаптив (перенесення в макет, 26.10.2026) ===================== */ /* 901–1200: та сама геометрія сцени, зменшена zoom-ом; колонка тексту вужча */ @media (max-width:1200px){ #H01 h1{font-size:34px} #H01 .hero-grid{grid-template-columns:400px minmax(0,1fr);gap:24px} #H01 .stages{zoom:.74} } @media (max-width:1050px){ #H01 h1{font-size:32px} #H01 .hero-grid{grid-template-columns:360px minmax(0,1fr)} #H01 .stages{zoom:.64} } @media (max-width:1000px){ #H01 .hero-grid{grid-template-columns:340px minmax(0,1fr)} #H01 .stages{zoom:.58} } /* ≤900: одна колонка; сцена — вкладки екранів, кадр, список питань, записка під натиснутим питанням */ @media (max-width:900px){ #H01.hero{padding:32px 0 28px} #H01 h1{font-size:40px;line-height:1.1} #H01 .hero-grid{grid-template-columns:1fr;gap:26px} #H01 .lead{font-size:16px;line-height:1.7} #H01 .actions{margin:24px 0 22px;gap:16px} #H01 .assurances{font-size:12px;gap:10px 14px} #H01 .stages{zoom:1;width:100%;height:auto;display:flex;flex-direction:column} #H01 .brand-art,#H01 .hint,#H01 .frame-queue,#H01 .frame-sales{display:none} #H01 .scr-tabs{order:-1;position:static;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;font-size:13px} #H01 .stages .stage{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none;display:none;flex-direction:column;pointer-events:auto;opacity:1;visibility:visible} #H01 .stages:not(:has(.scr:checked:not(#h01-scr-a))) .stage-a, #H01 .stages:has(#h01-scr-d:checked) .stage-d, #H01 .stages:has(#h01-scr-b:checked) .stage-b, #H01 .stages:has(#h01-scr-c:checked) .stage-c{display:flex;opacity:1;visibility:visible;transform:none} #H01 .frame-main,#H01 .stage-d .frame-main{position:relative;left:auto;top:auto;order:-1;width:100%;margin:0 0 14px} /* панель власника на вузькому — уся ширина кадру, щоб було видно й чергу уваги */ #H01 .stage-a .frame-main .cam img{--w:2000 !important} #H01 .stage-a .frame-main .cam{aspect-ratio:2000/936} #H01 .stage-a .spot-1{left:.3%;top:11.7%;width:24%;height:23.5%} #H01 .stage-a .spot-2{left:.3%;top:37.2%;width:99.4%;height:7.4%} #H01 .stage-a .spot-3m{display:block;left:66%;top:46.6%;width:32.6%;height:43.5%} #H01 .q{position:static;display:block;width:100%;text-align:left;transform:none;padding:6px 0;z-index:auto} #H01 .q .q-t{display:inline-block;font-size:17px;line-height:22px;white-space:normal;padding:4px 12px} #H01 .q .q-arrow{display:none} #H01 .note{position:static;left:auto;bottom:auto;width:100%;margin:4px 0 10px;transform:none;display:none;opacity:1;visibility:visible;box-shadow:none} #H01 .stage:has(.q1[aria-pressed="true"]) .note-1,#H01 .stage:has(.q2[aria-pressed="true"]) .note-2,#H01 .stage:has(.q3[aria-pressed="true"]) .note-3{display:block;opacity:1;visibility:visible;transform:none} #H01 .stage .note{transition:none} #H01 .legal{margin-top:18px} #H01 .h01-lb{max-width:calc(100vw - 16px)} } @media (max-width:540px){ #H01 h1{font-size:32px} #H01 .assurances{grid-template-columns:repeat(2,1fr)} #H01 .scr-tabs{font-size:12px} #H01 .q .q-t{font-size:16px} } #H01 .stage-a .spot-3m{display:none} /* ===================== приймання 44 (26.10.2026) ===================== */ /* P1-1: JS (scene.js, fitStage) підганяє zoom сцени під вільне місце праворуч від колонки тексту (не більше 1), тож кадр і колонки «Всього» не обрізаються; нижче правила — запасні значення без JS. */ /* P2-1: вкладки екранів — зона нажатия ≈44 px (на десктопі без зміни розкладки: псевдоелемент) */ #H01 .scr-tab{position:relative} #H01 .scr-tab::after{content:"";position:absolute;inset:-14px -8px -10px} /* P2-8: посилання в записках — зона ≈44 px без зміни висоти записки */ #H01 .note a{display:inline-block;padding:13px 0;margin:-13px 0} /* P2-2/P2-3: підказка «Натисніть, щоб збільшити» і масштаб у повноекранному перегляді (телефон) */ #H01 .zoom-hint,#H01 .h01-lb-zoom,#H01 .h01-lb-tip{display:none} @media (max-width:900px){ #H01 .scr-tabs{gap:0 6px} #H01 .scr-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-bottom:0;position:relative;font-size:14px} #H01 .scr-tab::after{inset:auto 8px 6px;height:2px;background:transparent} #H01 .stages:not(:has(#h01-scr-b:checked,#h01-scr-c:checked,#h01-scr-d:checked)) .scr-tab-a::after,#H01 .stages:has(#h01-scr-b:checked) .scr-tab-b::after,#H01 .stages:has(#h01-scr-c:checked) .scr-tab-c::after,#H01 .stages:has(#h01-scr-d:checked) .scr-tab-d::after{background:var(--green)} #H01 .note a{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0} #H01 .zoom-hint{display:inline-flex;align-items:center;gap:8px;order:-1;min-height:44px;margin:0 0 8px;padding:0 4px;border:0;background:none;font:650 14px/1.3 var(--sans);color:var(--green);text-align:left;cursor:pointer} #H01 .zoom-hint svg{flex:0 0 auto;width:20px;height:20px} #H01 .h01-lb{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)} #H01 .h01-lb-h{padding:6px 8px 6px 14px;gap:8px} #H01 .h01-lb-h h2{font-size:15px;flex:1} #H01 .h01-lb-x{width:44px;height:44px;line-height:44px;flex:0 0 44px} #H01 .h01-lb-zoom{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font:650 14px var(--sans);color:var(--ink);cursor:pointer;flex:0 0 auto} #H01 .h01-lb-tip{display:block;margin:0;padding:8px 14px;font:13px/1.4 var(--sans);color:var(--muted);border-bottom:1px solid var(--line)} #H01 .h01-lb-sc{max-height:calc(100dvh - 140px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain} #H01 .h01-lb-sc img{display:block} #H01 .h01-lb-sc.is-native{touch-action:pan-x pan-y} #H01 .h01-lb-sc.is-native img{width:var(--native-w);max-width:none} } /* P3-4 (приймання 44): записка екрана «P&L» не закриває підписи рядків і підсумки — вона під кадром. Екрану P&L дано додаткову висоту (+110 px) під запискою; висота обгортки .stages однакова для всіх екранів, тож сторінка не «стрибає» при перемиканні. */ @media (min-width:901px){ #H01{--extra-d:110px} #H01 .stages{height:calc(var(--band-t) + 30px + var(--frame-w) * 936 / 1320 + var(--band-b) + var(--extra-d))} #H01 .stage-d{height:calc(var(--band-t) + 30px + var(--frame-w) * 936 / 1320 + var(--band-b) + var(--extra-d))} #H01 .stage-d .note{left:0;bottom:auto;top:calc(var(--band-t) + 30px + 736px * 994 / 1605 + 18px);width:340px} #H01 .stage-d .q3{left:372px;bottom:calc(52px + var(--extra-d))} }