/* ========================================================================= TOKENS Концепція: технічне креслення, що оживає. Папір — холодний вівсяно-сірий (не кремовий), чорнило — глибоке синьо-чорне, акценти — хвоя і приглушене золото. Сигнальний червоний лише для "live". Шрифти self-hosted (assets/fonts): Unbounded — заголовки сайту, Onest — текст і інтерфейси, Cormorant Infant — лише світ Floritta всередині екранів, щоб магазин читався чужим сайтом зі своїм характером. ========================================================================= */ @font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap; src:url("/assets/fonts/unbounded-300-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap; src:url("/assets/fonts/unbounded-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122} @font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap; src:url("/assets/fonts/unbounded-700-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap; src:url("/assets/fonts/unbounded-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122} @font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap; src:url("/assets/fonts/onest-400-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap; src:url("/assets/fonts/onest-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122} @font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap; src:url("/assets/fonts/onest-600-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap; src:url("/assets/fonts/onest-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122} @font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap; src:url("/assets/fonts/onest-700-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap; src:url("/assets/fonts/onest-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122} @font-face{font-family:"Cormorant Infant";font-style:italic;font-weight:300;font-display:swap; src:url("/assets/fonts/cormorant-infant-300i-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F} @font-face{font-family:"Cormorant Infant";font-style:normal;font-weight:300;font-display:swap; src:url("/assets/fonts/cormorant-infant-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F} @font-face{font-family:"Cormorant Infant";font-style:normal;font-weight:600;font-display:swap; src:url("/assets/fonts/cormorant-infant-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F} :root{ --paper: #E8E9E3; --paper-sunk: #DCDED5; --paper-hi: #F1F2ED; --ink: #14181A; --ink-2: #4E5754; --ink-3: #838C88; --rule: #C3C7BC; --pine: #1E4D3F; --pine-soft: #E0E8E2; --amber: #B8801F; --live: #C1452E; --graphite: #1B1F21; --graphite-2: #2B3134; --glass: rgba(20,24,26,.06); --font-display: "Unbounded","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --font-body: "Onest","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --font-shop: "Cormorant Infant",Georgia,"Times New Roman",serif; --font-mono: ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace; --gut: clamp(18px, 4vw, 64px); --maxw: 1680px; --ease: cubic-bezier(.22,.61,.36,1); } @media (prefers-color-scheme: dark){ :root{ --paper:#111416; --paper-sunk:#0C0F10; --paper-hi:#191D1F; --ink:#E7E9E4; --ink-2:#9AA39F; --ink-3:#6B7470; --rule:#2A3033; --pine:#6FBFA2; --pine-soft:#16211D; --amber:#D9A340; --live:#E4654C; --graphite:#050708; --graphite-2:#171B1D; --glass:rgba(231,233,228,.07); } } :root[data-theme="dark"]{ --paper:#111416; --paper-sunk:#0C0F10; --paper-hi:#191D1F; --ink:#E7E9E4; --ink-2:#9AA39F; --ink-3:#6B7470; --rule:#2A3033; --pine:#6FBFA2; --pine-soft:#16211D; --amber:#D9A340; --live:#E4654C; --graphite:#050708; --graphite-2:#171B1D; --glass:rgba(231,233,228,.07); } :root[data-theme="light"]{ --paper:#E8E9E3; --paper-sunk:#DCDED5; --paper-hi:#F1F2ED; --ink:#14181A; --ink-2:#4E5754; --ink-3:#838C88; --rule:#C3C7BC; --pine:#1E4D3F; --pine-soft:#E0E8E2; --amber:#B8801F; --live:#C1452E; --graphite:#1B1F21; --graphite-2:#2B3134; --glass:rgba(20,24,26,.06); } /* ============================== BASE ============================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--pine); outline-offset:3px; border-radius:2px} /* width:100% обов'язково — .wrap лежить і всередині flex-колонки (.hero), де auto-марджини інакше стискають його до ширини контенту */ .wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)} .mono{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)} .rule{height:1px;background:var(--rule);border:0;margin:0} h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; line-height:1.04; text-wrap:balance; margin:0} p{margin:0} /* грануляція — вбиває "стерильність" згенерованого */ .grain{ position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.5; background-image:url("data:image/svg+xml;utf8,"); mix-blend-mode:multiply; } @media (prefers-color-scheme: dark){ .grain{mix-blend-mode:screen;opacity:.28} } :root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.28} :root[data-theme="light"] .grain{mix-blend-mode:multiply;opacity:.5} /* ============================== CHROME ============================== */ .topbar{ position:fixed; inset:0 0 auto 0; z-index:900; display:flex; align-items:center; gap:20px; padding:14px var(--gut); background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid transparent; transition:border-color .3s; } .topbar.stuck{border-bottom-color:var(--rule)} .brand{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:flex;gap:9px;align-items:center} .brand b{font-weight:600;letter-spacing:.04em} .dot-live{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 60%,transparent);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .topbar-sp{flex:1} .navlinks{display:flex;gap:22px} .navlinks a{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .2s} .navlinks a:hover{color:var(--ink)} .lang{display:flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden} .lang button{background:none;border:0;padding:5px 11px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;cursor:pointer;color:var(--ink-3)} .lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .progress{position:fixed;top:0;left:0;height:2px;background:var(--pine);z-index:901;width:0} /* ============================== PRELOADER ============================== */ /* прелоадера немає */ /* ============================== HERO: ЦИФЕРБЛАТ ============================== Праворуч — п'ять цілей по колу і стрілка з центру; фокус переводиться JS-ом через data-focus на секції. Ліворуч — назва й опис напряму, що міняються під фокус. Ціль у фокусі оживає власною мікроанімацією, решта пригашені. Кут цілі задає --a на кнопці; стрілка отримує той самий кут у --hand. */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-block:clamp(88px,12svh,120px) clamp(28px,5svh,48px);overflow:hidden} .hero-dial-grid{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,.95fr); gap:clamp(20px,4vw,64px);align-items:center} .eyebrow{display:flex;gap:12px;align-items:center;margin-bottom:22px} .eyebrow .ln{height:1px;width:56px;background:var(--ink);opacity:.4} .hd-h1{font-size:clamp(22px,2.6vw,34px);font-weight:300;color:var(--ink-2);letter-spacing:-.02em;margin-bottom:6px} .hd-h1 .lite{font-weight:300} /* назви: стос, видима одна; висота під найдовшу у два рядки */ .hd-titles{display:grid;font-size:clamp(26px,3.4vw,50px);line-height:1.04;margin-bottom:14px} .hd-t{grid-area:1/1;margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em; color:var(--pine);text-wrap:balance;max-width:12ch; opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none} .hero[data-focus="0"] .hd-t[data-i="0"],.hero[data-focus="1"] .hd-t[data-i="1"],.hero[data-focus="2"] .hd-t[data-i="2"], .hero[data-focus="3"] .hd-t[data-i="3"],.hero[data-focus="4"] .hd-t[data-i="4"]{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s} .hd-descs{display:grid;max-width:min(500px,100%);font-size:15px;line-height:1.6;color:var(--ink-2)} .hd-d{grid-area:1/1;margin:0;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .hero[data-focus="0"] .hd-d[data-i="0"],.hero[data-focus="1"] .hd-d[data-i="1"],.hero[data-focus="2"] .hd-d[data-i="2"], .hero[data-focus="3"] .hd-d[data-i="3"],.hero[data-focus="4"] .hd-d[data-i="4"]{opacity:1;transform:none;transition-delay:.2s} .hd-nav{display:flex;gap:10px;margin:22px 0 22px} .hd-dot{width:34px;height:6px;border:0;padding:0;background:none;cursor:pointer;display:block} .hd-dot i{display:block;height:2px;border-radius:99px;background:var(--rule);position:relative;overflow:hidden} .hd-dot i::after{content:"";position:absolute;inset:0;background:var(--pine);transform-origin:0 50%;transform:scaleX(0)} .hd-dot.on i::after{transform:scaleX(1);transition:transform var(--dwell,4s) linear} .hd-dot.done i::after{transform:scaleX(1)} .hero-meta{display:flex;gap:26px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--rule);max-width:520px} .hero-meta div{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .hero-meta b{color:var(--ink);font-weight:600} .scrollhint{position:absolute;bottom:34px;right:var(--gut);writing-mode:vertical-rl;font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px} .scrollhint::after{content:"";width:1px;height:52px;background:linear-gradient(var(--rule),transparent);animation:sh 2.2s infinite} @keyframes sh{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---- сам циферблат ---- */ .hd-dial{position:relative;width:min(100%,520px,68svh);aspect-ratio:1;margin-inline:auto; --R:36%; /* радіус розстановки цілей від центру */ --hand:-90deg} .hd-ring{position:absolute;inset:0;width:100%;height:100%} .hd-ring .r1{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:2 7} .hd-ring .r2{fill:none;stroke:var(--rule);stroke-width:1;opacity:.6} .hd-ring .ticks line{stroke:var(--ink-3);stroke-width:1.2;opacity:.5} @media (prefers-reduced-motion:no-preference){ .hd-ring .r1{animation:ringspin 90s linear infinite;transform-origin:50% 50%} } /* стрілка: вертикальний елемент від центру, повернутий на кут цілі (-90° = вгору) */ .hd-hand{position:absolute;left:50%;top:50%;width:0;height:0; rotate:calc(var(--hand) + 90deg); transition:rotate 1.1s cubic-bezier(.34,1.3,.5,1)} /* невеликий перехльост — як у справжньої стрілки */ /* довжина стрілки — 38.5% ширини циферблата; --dialW ставить JS через ResizeObserver */ .hd-dial{--handLen:calc(var(--dialW,520px) * .33)} .hd-hand i{position:absolute;left:-1.5px;bottom:0;width:3px;height:var(--handLen);border-radius:2px; background:linear-gradient(0deg,var(--ink) 0 70%,color-mix(in srgb,var(--ink) 40%,transparent));transform-origin:50% 100%; filter:drop-shadow(0 2px 3px rgba(20,24,26,.25))} .hd-hand b{position:absolute;left:-5px;bottom:calc(var(--handLen) - 5px);width:10px;height:10px;border-radius:50%;background:var(--pine); box-shadow:0 0 0 5px color-mix(in srgb,var(--pine) 22%,transparent)} .hd-center{position:absolute;left:50%;top:50%;translate:-50% -50%;width:12%;aspect-ratio:1;border-radius:50%; background:var(--paper);border:1px solid var(--rule);display:grid;place-items:center; box-shadow:0 10px 30px -14px rgba(20,24,26,.35)} .hd-center span{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)} .hd-center::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ink)} /* ціль: розставляємо по колу через translate у полярних координатах */ .hd-tg{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer; translate:calc(-50% + cos(var(--a)) * var(--R) * 5.06) calc(-50% + sin(var(--a)) * var(--R) * 5.06); display:grid;place-items:center; filter:saturate(.7) opacity(.72);transform:scale(.86); transition:filter .5s,transform .6s var(--ease)} .hd-tg.on{filter:none;transform:scale(1.22);z-index:2} .hd-tg:focus-visible{outline:2px solid var(--pine);outline-offset:6px;border-radius:50%} /* під ціллю в фокусі — м'яка підсвітка */ .hd-tg::before{content:"";position:absolute;inset:-14%;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--pine) 22%,transparent),transparent 68%); opacity:0;transition:opacity .5s} .hd-tg.on::before{opacity:1} /* — міні-ноутбук: кришка відкривається у фокусі, на екрані «сторінка» гортається — */ .mini-lap{width:92%;perspective:600px} .mini-lap .lid{transform-origin:50% 100%;transform:rotateX(-70deg);transition:transform .9s cubic-bezier(.34,1.2,.5,1); background:#F3F5F6;border:1px solid #C4CACD;border-radius:6px 6px 2px 2px;padding:3px} .hd-tg.on .mini-lap .lid{transform:rotateX(0)} .mini-lap .scr{aspect-ratio:16/10;background:#0F1417;border-radius:3px;overflow:hidden;position:relative;padding:14% 12%;display:flex;flex-direction:column;gap:9%} .mini-lap .scr i{display:block;height:8%;border-radius:2px;background:#6FBFA2;width:70%;opacity:.9} .mini-lap .scr i:nth-child(2){width:45%;background:#B8801F}.mini-lap .scr i:nth-child(3){width:58%;background:#3B6DF6} @media (prefers-reduced-motion:no-preference){.hd-tg.on .mini-lap .scr i{animation:lapscroll 2.4s ease-in-out infinite}} @keyframes lapscroll{0%,100%{transform:translateY(0)}50%{transform:translateY(-140%)}} .mini-lap .base{height:6px;background:linear-gradient(#DDE1E3,#B9C0C4);border-radius:0 0 4px 4px;margin-top:1px} /* — міні-телефон: у фокусі вилітає пуш — */ .mini-ph{width:50%;aspect-ratio:9/18;background:#1B1E20;border-radius:14%/7%;padding:5%;position:relative; box-shadow:inset 0 0 0 1px #3A424A} .mini-ph .scr{width:100%;height:100%;border-radius:10%/5%;background:linear-gradient(160deg,#243743,#0F1417);position:relative;overflow:hidden} .mini-ph .scr i{position:absolute;left:12%;right:12%;height:9%;border-radius:3px;background:#2E3B44} .mini-ph .scr i:first-child{top:22%}.mini-ph .scr i:last-child{top:38%;right:36%} .mini-ph .push{position:absolute;left:8%;right:8%;top:8%;background:#F1F2ED;border-radius:6px;padding:7% 8%;display:flex;gap:6%;align-items:center; transform:translateY(-140%);opacity:0;transition:transform .5s cubic-bezier(.34,1.3,.5,1),opacity .3s} .hd-tg.on .mini-ph .push{transform:none;opacity:1;transition-delay:.35s} .mini-ph .push b{width:16%;aspect-ratio:1;border-radius:3px;background:var(--pine)} .mini-ph .push span{flex:1;height:4px;border-radius:2px;background:#8C9590} /* — міні-ШІ: орб із кільцями, у фокусі пульсує і крутиться — */ .mini-ai{position:relative;width:70%;aspect-ratio:1;display:grid;place-items:center} .mini-ai i{width:44%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,#6FBFA2,#B8801F,#7C6BD6,#6FBFA2); box-shadow:0 0 18px color-mix(in srgb,#6FBFA2 55%,transparent)} .mini-ai span{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--pine) 40%,transparent)} .mini-ai .s2{inset:12%;border-color:color-mix(in srgb,#B8801F 45%,transparent)} .mini-ai .s3{inset:24%;border-color:color-mix(in srgb,#7C6BD6 45%,transparent)} @media (prefers-reduced-motion:no-preference){ .hd-tg.on .mini-ai i{animation:orbspin 3s linear infinite,orbpulse 1.6s ease-in-out infinite} .hd-tg.on .mini-ai .s1{animation:ringspin 8s linear infinite} .hd-tg.on .mini-ai .s2{animation:ringspin 6s linear infinite reverse} .hd-tg.on .mini-ai .s3{animation:ringspin 4s linear infinite} } .mini-ai span{border-style:dashed} @keyframes orbpulse{50%{transform:scale(1.12)}} /* — міні-Telegram: логотип, у фокусі вилітає літачок і крапка онлайн — */ .mini-tg{position:relative;width:66%;aspect-ratio:1;border-radius:50%;background:#2AABEE;display:grid;place-items:center; box-shadow:0 10px 24px -12px rgba(42,171,238,.8)} .mini-tg svg{width:56%;fill:#fff;translate:-4% 4%} .mini-tg .plane{position:absolute;right:-8%;top:-8%;width:26%;aspect-ratio:1;border-radius:50%;background:#2E8B57;border:2px solid var(--paper); scale:0;transition:scale .4s cubic-bezier(.34,1.5,.5,1)} .hd-tg.on .mini-tg .plane{scale:1;transition-delay:.3s} @media (prefers-reduced-motion:no-preference){.hd-tg.on .mini-tg{animation:tgbob 1.8s ease-in-out infinite}} @keyframes tgbob{50%{transform:translateY(-6%) rotate(-6deg)}} /* — міні-API: вузол із чотирма променями, у фокусі по променях біжать пакети — */ .mini-api{position:relative;width:86%;aspect-ratio:1;display:grid;place-items:center} .mini-api svg{position:absolute;inset:0;width:100%;height:100%} .mini-api svg path{fill:none;stroke:var(--rule);stroke-width:1.5} .mini-api b{position:relative;z-index:2;width:38%;aspect-ratio:1;border-radius:50%;background:var(--pine);color:#EDEEE9; display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em} .mini-api .n{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;background:var(--paper-hi);border:1.5px solid var(--rule)} .mini-api .n1{left:44%;top:0}.mini-api .n2{right:0;top:44%}.mini-api .n3{left:44%;bottom:0}.mini-api .n4{left:0;top:44%} .mini-api::after{content:"";position:absolute;width:8%;aspect-ratio:1;border-radius:50%;background:#B8801F; left:46%;top:46%;opacity:0} @media (prefers-reduced-motion:no-preference){ .hd-tg.on .mini-api::after{animation:apidot 1.6s linear infinite} .hd-tg.on .mini-api .n{animation:nodeblink 1.6s ease-in-out infinite} .hd-tg.on .mini-api .n2{animation-delay:.4s}.hd-tg.on .mini-api .n3{animation-delay:.8s}.hd-tg.on .mini-api .n4{animation-delay:1.2s} } @keyframes apidot{ 0%{opacity:1;transform:translate(0,0)}24%{transform:translate(0,-42%);opacity:1}25%{opacity:0;transform:translate(0,0)} 26%{opacity:1}49%{transform:translate(42%,0);opacity:1}50%{opacity:0;transform:translate(0,0)} 51%{opacity:1}74%{transform:translate(0,42%);opacity:1}75%{opacity:0;transform:translate(0,0)} 76%{opacity:1}99%{transform:translate(-42%,0);opacity:1}100%{opacity:0}} @keyframes nodeblink{50%{background:var(--pine);border-color:var(--pine)}} @media (max-width:1080px){ .hero-dial-grid{grid-template-columns:1fr;gap:26px} .hd-dial{width:min(100%,420px,60svh);order:-1} .hd-descs{max-width:none} } @media (max-width:720px){ .hero{padding-block:84px 24px} .hd-dial{width:min(100%,320px,50svh);--R:33%} /* менший радіус: цілі не мають вилазити за коло */ .hd-titles{font-size:clamp(26px,7.4vw,40px)} .hd-descs{font-size:14.5px} .hd-tg{width:24%;transform:scale(.9)} .hd-tg.on{transform:scale(1.06)} .hd-dial{overflow:visible;margin-inline:auto;--R:31%} } /* ============================== SECTION HEADS ============================== */ .sechead{display:flex;align-items:baseline;gap:18px;padding-block:74px 30px;border-top:1px solid var(--rule)} .sechead h2{font-size:clamp(24px,3.5vw,48px)} .sechead .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);flex:none} .sechead p{margin-left:auto;max-width:420px;color:var(--ink-2);font-size:15px} /* ============================== STAGE (pinned) ============================== */ /* Стенд — звичайний екран заввишки. Анімація не привʼязана до позиції скролу: вона запускається по тригеру і йде до кінця сама (див. frame() у main.js). */ .stage{position:relative} .stage-in{position:relative;display:grid;place-items:center;overflow:hidden;padding-block:clamp(44px,7svh,72px)} /* width:100% — place-items:center інакше стискає елемент до ширини контенту */ .stage-grid{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut); display:grid;grid-template-columns:minmax(280px,1fr) 1.25fr;gap:clamp(24px,4vw,80px);align-items:center} .stage[data-side="left"] .stage-grid{grid-template-columns:1.25fr minmax(280px,1fr)} .stage[data-side="left"] .stage-copy{order:2} .stage-copy{max-width:460px} .stage-copy .kick{display:flex;align-items:center;gap:10px;margin-bottom:18px} .stage-copy .kick i{width:26px;height:1px;background:var(--pine);display:block} .stage-copy .kick span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine)} .stage-copy h3{font-size:clamp(25px,2.9vw,42px);margin-bottom:16px} .stage-copy .lede{color:var(--ink-2);font-size:16px;margin-bottom:22px} .taglist{display:flex;flex-wrap:wrap;gap:7px} .taglist span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;padding:5px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2)} .stage-copy .out{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .stage.seen .stage-copy .out{opacity:1;transform:none} .stage.seen .stage-copy .out:nth-child(2){transition-delay:.06s} .stage.seen .stage-copy .out:nth-child(3){transition-delay:.12s} .stage.seen .stage-copy .out:nth-child(4){transition-delay:.18s} .stage-vis{position:relative;display:grid;place-items:center;min-height:52svh} /* ============================== DEVICES ============================== */ .screen{container-type:inline-size;position:relative;overflow:hidden;background:var(--graphite);isolation:isolate} .screen::after{ /* блік по склу */ content:"";position:absolute;inset:0;z-index:5;pointer-events:none; background:linear-gradient(104deg,rgba(255,255,255,.12) 0 22%,transparent 46%);opacity:.5} .scr{position:absolute;inset:0;font-size:2.7cqw;font-family:var(--font-body);color:#E9EBE7;overflow:hidden} /* pointer-events:none обов'язково: opacity:0 НЕ вимикає перехоплення кліків, а ця плівка лежить над усім вмістом екрана і з'їдала і кліки, і наведення */ .wake{position:absolute;inset:0;z-index:4;background:#050708;pointer-events:none; opacity:calc(1 - clamp(0,var(--s2,0)*7,1))} /* -- laptop -------------------------------------------------------------- Три шари: алюмінієвий кант → чорна рамка → скло. Дека — окремий елемент у 3D через rotateX; висота через aspect-ratio, тож усе масштабується однією шириною. Ширина обмежена і по svh. Головне правило металу тут — НИЗЬКИЙ контраст: справжній алюміній відрізняється від «намальованого» тим, що сусідні світла різняться на відсотки, а не в рази. Всі яскраві грані прибрані, глибина — з м'яких півтіней і одного делікатного канта. ------------------------------------------------------------------------- */ .laptop{ --alu-1:#EEF0F1; --alu-2:#DDE1E3; --alu-3:#C4CACD; --alu-4:#9FA6AA; --bezel:#101314; width:min(100%,700px,calc(112svh - 150px)); perspective:2200px; transform-style:preserve-3d; position:relative; } .laptop-lid{ transform-origin:50% 100%; transform:rotateX(calc(-88deg + var(--s1,0) * 88deg)); /* sin() дає легкий перехльост у кінці — кришка «доводиться», а не впирається. Рядок вище лишається фолбеком, якщо sin() не підтримується. */ transform:rotateX(calc(-88deg + var(--s1,0) * 88deg + sin(calc(var(--s1,0) * var(--s1,0) * var(--s1,0) * 180deg)) * 2.4deg)); transform-style:preserve-3d; } .lid-shell{ position:relative;padding:2px;border-radius:14px 14px 4px 4px; background:linear-gradient(184deg,#F5F7F8,var(--alu-2) 46%,var(--alu-3)); box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 1px rgba(44,50,54,.22), 0 30px 60px -30px rgba(20,24,26,.42); } .lid-shell::after{ /* ледь помітна фаска по торцю — головний «дорогий» штрих */ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45); } .lid-bezel{position:relative;padding:.85% .85% 1.4%;border-radius:12px 12px 3px 3px; background:linear-gradient(180deg,#0D1011,#141718); box-shadow:inset 0 0 0 1px rgba(0,0,0,.85)} .laptop-lid .screen{border-radius:4px;aspect-ratio:16/10; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .laptop-lid .screen::after{ /* скло: один широкий м'який відблиск, без смуг */ background:linear-gradient(107deg,rgba(255,255,255,.09) 0 16%,transparent 34%); opacity:.8} .lid-notch{ position:absolute;z-index:7;top:2px;left:50%;translate:-50% 0; width:9%;aspect-ratio:9/1.1;background:#0D1011;border-radius:0 0 5px 5px; display:flex;align-items:center;justify-content:center;gap:14%; } .lid-notch i{width:9%;aspect-ratio:1;border-radius:50%;background:#1E2427;display:block} .lid-notch b{ width:6.5%;aspect-ratio:1;border-radius:50%;background:#3ED598;display:block; opacity:clamp(0,calc((var(--s2,0) - .1) * 8),1); box-shadow:0 0 4px rgba(62,213,152,.8); } .laptop-base{position:relative;width:100%;aspect-ratio:780/110;transform-style:preserve-3d} .base-lip{ position:absolute;z-index:1;left:.6%;right:.6%;bottom:0;height:10px;border-radius:0 0 10px 10px; background:linear-gradient(180deg,var(--alu-1),var(--alu-2) 42%,var(--alu-3) 86%,#868D91); box-shadow:0 3px 5px -2px rgba(20,24,26,.26),inset 0 1px 0 rgba(255,255,255,.75); } .base-lip::after{ /* виїмка під палець */ content:"";position:absolute;left:50%;translate:-50% 0;top:0;width:11%;height:62%; border-radius:0 0 8px 8px;background:linear-gradient(180deg,#C7CDD0,#949CA0); box-shadow:inset 0 -1px 1px rgba(44,50,54,.25); } .base-hinge{ position:absolute;z-index:3;left:12%;right:12%;top:-1px;height:3px;border-radius:0 0 2px 2px; background:linear-gradient(180deg,#848B8F,#4A5054); } .base-deck{ position:absolute;z-index:2;inset:0 0 auto 0;width:100%;aspect-ratio:780/430; transform-origin:50% 0;transform:rotateX(78deg); border-radius:2px 2px 18px 18px; background: linear-gradient(90deg,var(--alu-3),var(--alu-2) 9% 91%,var(--alu-3)), linear-gradient(180deg,var(--alu-3),var(--alu-2) 30%,var(--alu-1)); box-shadow:inset 0 2px 4px -1px rgba(20,24,26,.32),inset 0 -1px 2px rgba(255,255,255,.55); } /* динаміки: дрібна тиха перфорація, ледь темніша за деку */ .base-deck::before,.base-deck::after{ content:"";position:absolute;top:10%;height:44%;width:3%;border-radius:3px;opacity:.55; background-image:radial-gradient(circle,#A6ADB1 26%,transparent 33%); background-size:3px 3px; } .base-deck::before{left:3%} .base-deck::after{right:3%} .kb{ /* клавіатура: темна панель, сітка клавіш — пошепки, не контуром */ position:absolute;left:10%;right:10%;top:8%;height:48%;border-radius:5px; background-color:#1B1E20; background-image: repeating-linear-gradient(90deg,transparent 0 6.55%,rgba(190,197,200,.22) 6.55% 6.95%), repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 3%,transparent 3% 15.8%,rgba(190,197,200,.22) 15.8% 16.5%); box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(120,128,132,.3),0 .5px 0 rgba(255,255,255,.45); } .pad{ position:absolute;left:32%;right:32%;bottom:6%;height:36%;border-radius:6px; background:linear-gradient(175deg,#D6DBDD,#C6CCCF); box-shadow:inset 0 0 0 .5px rgba(90,98,102,.45),inset 0 1px 1px rgba(255,255,255,.65); } .deck-glow{ /* відсвіт увімкненого екрана на деці */ position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(196,230,214,.4),transparent 44%); opacity:var(--s2,0);mix-blend-mode:screen; } .laptop-shadow{ /* контактна тінь + широка м'яка, обидві стримані */ height:30px;margin-top:2px;filter:blur(8px); background: radial-gradient(26% 50% at 50% 0,rgba(20,24,26,calc(.1 + var(--s1,0) * .16)),transparent 70%), radial-gradient(60% 100% at 50% 0,rgba(20,24,26,calc(.06 + var(--s1,0) * .1)),transparent 78%); } @media (prefers-reduced-motion:no-preference){ .laptop{animation:float 9s ease-in-out infinite} .laptop-lid .screen::after{animation:sheen 11s ease-in-out infinite} } @keyframes float{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-7px) rotate(.16deg)} } @keyframes sheen{ 0%,100%{transform:translateX(-5%)} 50%{transform:translateX(7%)} } /* -- monitor -- */ .monitor{width:min(100%,760px)} .monitor .screen{border:.7vw solid var(--graphite-2);border-radius:9px;aspect-ratio:16/9;box-shadow:0 34px 70px -30px rgba(0,0,0,.5)} .monitor-neck{width:64px;height:44px;margin:0 auto;background:linear-gradient(90deg,#232A2D,#3A4245,#232A2D)} .monitor-foot{width:34%;height:9px;margin:0 auto;border-radius:6px;background:linear-gradient(90deg,#1E2427,#3A4245,#1E2427)} /* -- phone --------------------------------------------------------------- Два шари: .phone-rise несе виїзд знизу від --s1, .phone — рідкі повороти. Рух — «рука, не штатив»: поворот у два дотики (трошки → пауза → ще трошки в той самий бік → пауза → назад), у паузах кут ледь дрейфує, бо жива рука не тримає позицію ідеально. Один цикл 21 с містить дві несхожі послідовності (вправо два кроки, вліво два кроки) з нерівними інтервалами — метроном не читається. Блік прив'язаний до КУТА, а не до часу: два промені (лівий для поворотів вправо, правий для поворотів вліво) їдуть склом пропорційно повороту і тримаються, поки апарат тримає кут — як справжній відблиск. Чохол — матовий силікон, лавандово-барвінковий: навмисно контрастний до вівсяного фону сторінки, щоб читався окремою річчю. ------------------------------------------------------------------------- */ .phone-wrap{position:relative;display:flex;justify-content:center;align-items:flex-end; width:100%;height:100%;overflow:hidden;padding-top:6%;perspective:1100px} .phone-shade{ /* єдине, що лишилось під телефоном: м'яка тінь на «столі» */ position:absolute;z-index:0;left:50%;bottom:-.4%;translate:-50% 0; width:min(46%,270px);height:4.2%;border-radius:50%;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(56,42,38,.34),transparent 70%); filter:blur(9px);opacity:var(--s1,0); } .phone-rise{ position:relative;z-index:1;width:min(54%,298px,34svh);transform-style:preserve-3d; transform:translateY(calc((1 - var(--s1,0)) * 58%)) rotate(calc((1 - var(--s1,0)) * 9deg)); transform-origin:50% 100%; } /* вібро на пуш: клас вішає main.js на пів секунди; на цей момент виїзд уже завершено (--s1=1), тож перекриття базового transform нічого не ламає */ .phone-rise.buzz{animation:buzz .5s linear} @keyframes buzz{ 0%,100%{transform:none} 12%,52%,88%{transform:translateX(-2.5px) rotate(-.45deg)} 32%,70%{transform:translateX(2.5px) rotate(.45deg)} } .phone{ position:relative;width:100%;padding:3% 3% 3.7%;isolation:isolate; border-radius:12%/5.6%; /* по-різному по осях — інакше кути овальні */ box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 calc(8px + var(--s1,0) * 12px) calc(14px + var(--s1,0) * 18px) -12px rgba(60,58,80,.38); } .phone::before{ /* чохол: лавандово-барвінковий матовий силікон */ content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit; background: radial-gradient(120% 90% at 30% 6%,rgba(255,255,255,.5),transparent 55%), linear-gradient(160deg,#C9CFF4,#A2ACEA 55%,#8A96E0); box-shadow:inset 0 2px 4px rgba(255,255,255,.75),inset 0 -3px 6px rgba(66,74,140,.4); } .phone .screen{border-radius:9.6%/4.5%;aspect-ratio:9/19.2;background:#0B0E0F; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)} .phone .scr{font-size:5.4cqw} /* «острівець» замість вирізу — видимий і на вимкненому екрані: це отвір у склі */ .phone-island{position:absolute;z-index:7;top:2.4%;left:50%;translate:-50% 0; width:26%;aspect-ratio:26/7.4;border-radius:99px;background:#07090A; display:flex;align-items:center;justify-content:flex-end;padding-right:7%} .phone-island i{width:14%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 36% 32%,#3B4A52,#0C1013 70%); box-shadow:0 0 0 1px rgba(255,255,255,.12)} /* скляні відблиски: перший промінь працює на повороти вправо, другий — вліво */ .phone-glare{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;border-radius:inherit} .phone-glare i{position:absolute;inset:-15% -45%;display:block;opacity:0; background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.06) 56%,transparent 62%)} .phone-glare i:first-child{transform:translateX(-70%)} .phone-glare i:last-child{transform:translateX(70%); background:linear-gradient(80deg,transparent 43%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.05) 56%,transparent 62%)} /* кнопки в колір чохла — визирають з-за рамки, живуть у системі координат .phone */ .phone-btn{position:absolute;z-index:-1;border-radius:1.5px; background:linear-gradient(180deg,#E6EAFB,#8894D9)} .phone-btn.pw{right:-1.3%;top:26%;width:1.5%;height:11%} .phone-btn.v1{left:-1.3%;top:20%;width:1.5%;height:6%} .phone-btn.v2{left:-1.3%;top:29%;width:1.5%;height:9%} @media (prefers-reduced-motion:no-preference){ /* тільки стенд додатків: у ботів .phone несе власний transform виїзду */ .phone-rise .phone{animation:phoneTurn 21s ease-in-out infinite} .phone-rise .phone-glare i:first-child{animation:glareR 21s ease-in-out infinite} .phone-rise .phone-glare i:last-child{animation:glareL 21s ease-in-out infinite} } /* таймлайн (21 с): спокій → вправо у два дотики з паузами → спокій → вліво у два дотики → довгий спокій. Інтервали навмисно нерівні. */ @keyframes phoneTurn{ 0%,14% {transform:rotateY(0)} 16.5% {transform:rotateY(5deg)} /* перший дотик */ 21% {transform:rotateY(5.6deg)} /* пауза з мікродрейфом */ 23.5% {transform:rotateY(9.2deg)} /* дотик у той самий бік */ 30% {transform:rotateY(8.6deg)} /* пауза, знову дрейф */ 34% {transform:rotateY(.6deg)} /* повернення */ 36%,52% {transform:rotateY(0)} 54% {transform:rotateY(-3.8deg)} 58% {transform:rotateY(-4.4deg)} 60.5% {transform:rotateY(-7.6deg)} 65% {transform:rotateY(-7deg)} 69% {transform:rotateY(-.4deg)} 71%,100% {transform:rotateY(0)} } /* блік = функція кута (x ≈ -70% + кут·8), ті самі відсотки, що в phoneTurn: з'являється рухом, висить на паузі, іде разом із поверненням */ @keyframes glareR{ 0%,14% {opacity:0;transform:translateX(-70%)} 16.5% {opacity:.5;transform:translateX(-30%)} 21% {opacity:.44;transform:translateX(-25%)} 23.5% {opacity:.55;transform:translateX(4%)} 30% {opacity:.48;transform:translateX(-1%)} 34% {opacity:0;transform:translateX(-65%)} 36%,100% {opacity:0;transform:translateX(-70%)} } @keyframes glareL{ 0%,52% {opacity:0;transform:translateX(70%)} 54% {opacity:.4;transform:translateX(40%)} 58% {opacity:.36;transform:translateX(35%)} 60.5% {opacity:.48;transform:translateX(9%)} 65% {opacity:.42;transform:translateX(14%)} 69% {opacity:0;transform:translateX(66%)} 71%,100% {opacity:0;transform:translateX(70%)} } /* телефон у стенді ботів лишається на старій, спокійній конструкції: там він другорядний і не має перетягувати увагу з термінала */ .botphone .phone{padding:3.4%;border-radius:13%/6%} .botphone .phone-notch{position:absolute;z-index:6;top:3.4%;left:50%;translate:-50% 0; width:33%;aspect-ratio:33/8;border-radius:99px;background:#0B0E0F} /* ============================== MINI-UI (вміст екранів) ============================== */ .ui{position:absolute;inset:0;display:flex;flex-direction:column} .ui-bar{display:flex;align-items:center;gap:.4em;padding:.55em .7em;background:#161B1D;border-bottom:1px solid #262D30;flex:none} .ui-bar i{width:.5em;height:.5em;border-radius:50%;background:#394245;display:block} .ui-bar .url{margin-left:.5em;flex:1;background:#0E1213;border-radius:.35em;padding:.22em .6em;font-family:var(--font-mono);font-size:.62em;color:#7E8A86;letter-spacing:.02em} .ui-body{flex:1;position:relative;overflow:hidden;background:#0E1213} .stg{position:absolute;inset:0 0 auto 0} /* ============================================================ 01 · FLORITTA — робочий магазин усередині ноутбука. Свій світ: власна палітра, свій курсор, свої сторінки. Мій сайт спокійний — цей навмисне гучний, щоб тягнув погляд. Каталог не лежить у розмітці: 24 товари × 11 вузлів букета генерує flMini() у main.js з масиву даних. На сторінку товару вузол букета клонується, тому картинка там буквально та сама. ============================================================ */ .fl{ --ink:#2A0E1C; --paper:#FFF7F3; --rose:#E02B63; --coral:#FF6A45; --plum:#7A1140; --leaf:#2F7D5B; --gold:#F2B33D; --mute:#8A6274; position:absolute;inset:0;background:var(--paper);color:var(--ink); font-family:var(--font-body);overflow:hidden; } /* поки миша над екраном — вона стає курсором магазину, мій ховається */ .laptop .screen{cursor:none} html.in-screen .cur{opacity:0} /* ---------- шапка ---------- */ .fl-head{position:absolute;z-index:6;inset:0 0 auto 0;background:var(--paper); box-shadow:0 .4em 1.1em -.7em rgba(42,14,28,.3)} .fl-util{display:flex;align-items:center;gap:1.1em;padding:.4em 1.1em;background:var(--ink);color:#FFEDE4; font-size:.46em;letter-spacing:.1em;text-transform:uppercase} .fl-util span:last-child{margin-left:auto} .fl-marq{overflow:hidden;background:var(--rose);color:#fff;padding:.4em 0} .fl-marq-in{display:flex;gap:1.5em;width:max-content;font-size:.48em;letter-spacing:.11em; text-transform:uppercase;white-space:nowrap;animation:marq 22s linear infinite} .fl-marq b{font-weight:400;opacity:.7} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .fl-nav{display:flex;align-items:center;gap:.9em;padding:.65em 1.1em} .fl-logo{font-family:var(--font-shop);font-size:1.2em;font-weight:600;letter-spacing:.26em;color:var(--plum)} .fl-nav a{font-size:.55em;letter-spacing:.05em;color:var(--mute);padding-bottom:.15em;border-bottom:1px solid transparent} .fl-nav a.on,.fl-nav a:hover{color:var(--rose);border-bottom-color:var(--rose)} .fl-cart{margin-left:auto;display:flex;align-items:center;gap:.4em;background:var(--ink);color:#fff; border-radius:99px;padding:.35em .75em;font-size:.5em;letter-spacing:.08em} .fl-cart b{background:var(--gold);color:var(--ink);border-radius:99px;padding:0 .45em;font-weight:700} /* ---------- сторінки ---------- */ .fl-body{position:absolute;inset:0;overflow:hidden} .fl-page{position:absolute;inset:0;opacity:0;pointer-events:none; transition:opacity .32s var(--ease),transform .32s var(--ease);transform:translateY(1em)} .fl-page.on{opacity:1;pointer-events:auto;transform:none} .fl-scroll{position:absolute;inset:0 0 auto 0;padding-top:5.1em;transform:translateY(var(--y,0px))} /* ---------- реальні фото магазину ---------- Кроп зроблено при збірці (sharp, position:"attention"), тому тут object-fit лише страхує від нецілих пропорцій. Розміри: картка 460×575, фото товару 760×1013, мініатюра 140², сцени окремо — усе під Retina на максимальному розмірі екрана ноутбука. background — на час завантаження, щоб картка не блимала білим. */ .fl-img,.fl-ph{display:block;width:100%;height:100%;object-fit:cover;background:#EFE3DC} .fl-hero .fl-ph,.fl-band .fl-ph{position:absolute;inset:0} /* затемнення під білий текст: раніше це був ::after самого .fl-ph, але тепер це , а в нього псевдоелементів немає */ .fl-hero::after,.fl-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(42,14,28,.16),rgba(42,14,28,.62))} /* ---------- секції ---------- */ .fl-sec{padding:1.5em 1.1em .3em} .fl-sec-h{display:flex;align-items:baseline;gap:.8em;margin-bottom:.9em} .fl-sec-h h2{font-family:var(--font-shop);font-size:1.6em;font-weight:600;letter-spacing:.08em; text-transform:uppercase;line-height:1.1} .fl-sec-h span{font-size:.5em;letter-spacing:.13em;text-transform:uppercase;color:var(--rose);margin-left:auto;white-space:nowrap} /* лічильник, а не посилання — тому не рожевий: усе рожеве в шапках секцій клікається */ .fl-sec-h span.count{color:var(--mute)} .fl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75em} .fl-card{background:#fff;border-radius:.4em;overflow:hidden;position:relative; box-shadow:0 .3em .9em -.45em rgba(42,14,28,.28); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .fl-card:hover{transform:translateY(-.3em);box-shadow:0 .8em 1.5em -.5em rgba(42,14,28,.4)} .fl-card .fl-img{aspect-ratio:4/5;height:auto} .fl-badge{position:absolute;z-index:2;top:.45em;left:.45em;display:flex;flex-direction:column;gap:.25em;align-items:flex-start} .fl-badge span{font-size:.4em;letter-spacing:.1em;text-transform:uppercase;padding:.35em .55em;border-radius:99px; background:rgba(255,255,255,.95);color:var(--plum);font-weight:700;line-height:1} .fl-badge span.sale{background:var(--rose);color:#fff} .fl-card .nm{font-size:.58em;font-weight:600;line-height:1.3;padding:.7em .7em .3em;min-height:2.6em} .fl-card .pr{display:flex;align-items:baseline;gap:.4em;padding:0 .7em .5em;font-size:.62em} .fl-card .pr b{color:var(--rose);font-weight:700} .fl-card .pr s{opacity:.4;font-size:.82em} .fl-card .acts{display:flex;gap:.3em;padding:0 .7em .7em} .fl-card .acts span{flex:1;text-align:center;font-size:.42em;letter-spacing:.07em;text-transform:uppercase; padding:.6em .3em;border-radius:99px;border:1px solid rgba(42,14,28,.2);white-space:nowrap} .fl-card .acts span.buy{background:var(--ink);color:#fff;border-color:var(--ink)} /* ---------- герой ---------- */ .fl-hero{position:relative;height:13em;display:flex;align-items:center;justify-content:center;text-align:center; color:#fff;overflow:hidden} .fl-hero .fl-ph{position:absolute;inset:0} .fl-hero-in{position:relative;z-index:2;padding:0 1.2em} .fl-hero h1{font-family:var(--font-shop);font-size:3.1em;font-weight:300;line-height:.98; letter-spacing:.06em;text-transform:uppercase;text-shadow:0 .06em .4em rgba(42,14,28,.5)} .fl-hero p{font-size:.6em;line-height:1.55;max-width:26em;margin:.9em auto 0;opacity:.94} .fl-hero .fl-row{display:flex;align-items:center;justify-content:center;gap:.7em;margin-top:1.2em} .fl-btn{background:var(--rose);color:#fff;font-size:.55em;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:.8em 1.6em;border-radius:99px;white-space:nowrap;box-shadow:0 .5em 1.1em -.4em rgba(224,43,99,.8)} .fl-btn.ghost{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);box-shadow:none} /* ---------- про магазин ---------- */ .fl-about{display:grid;grid-template-columns:1.15fr 1fr;gap:1.2em;align-items:center;padding:1.8em 1.1em} .fl-about h2{font-family:var(--font-shop);font-size:1.5em;font-weight:600;letter-spacing:.08em; text-transform:uppercase;margin-bottom:.6em} .fl-about p{font-size:.56em;line-height:1.75;color:var(--mute);margin-bottom:.6em} .fl-about .fl-ph{height:9.5em;border-radius:.4em} /* ---------- широка смуга ---------- */ .fl-band{position:relative;height:7.5em} .fl-band .fl-ph{position:absolute;inset:0} .fl-band div{position:absolute;z-index:2;left:1.2em;bottom:1.1em;color:#fff; font-family:var(--font-shop);font-weight:600;font-size:1.4em;letter-spacing:.07em;text-transform:uppercase} /* ---------- банер знижки ---------- */ .fl-promo{background:var(--ink);color:#fff;text-align:center;padding:2em 1.1em;margin-top:1.5em} .fl-promo b{display:block;font-family:var(--font-shop);font-size:2.1em;font-weight:300;letter-spacing:.1em; text-transform:uppercase;line-height:1.15} .fl-promo i{display:block;font-style:normal;font-size:.5em;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin-top:.8em} /* ---------- відгуки ---------- */ .fl-rev{display:grid;grid-template-columns:repeat(3,1fr);gap:.75em;padding:0 1.1em} .fl-rev article{background:#fff;border-radius:.4em;padding:.9em;box-shadow:0 .3em .9em -.5em rgba(42,14,28,.26)} .fl-stars{color:var(--gold);font-size:.6em;letter-spacing:.12em;margin-bottom:.5em} .fl-rev p{font-size:.52em;line-height:1.7;color:var(--mute)} .fl-rev .who{font-size:.44em;letter-spacing:.11em;text-transform:uppercase;margin-top:.7em;color:var(--plum);font-weight:700} /* ---------- часті питання ---------- */ .fl-faq{padding:0 1.1em} .fl-faq div{border-bottom:1px solid rgba(42,14,28,.12)} .fl-faq dt{display:flex;align-items:center;gap:.7em;padding:.85em 0;font-size:.56em;font-weight:600} .fl-faq dt::after{content:"+";margin-left:auto;color:var(--rose);font-size:1.2em;line-height:1} .fl-faq div.open dt::after{content:"–"} .fl-faq dd{max-height:0;overflow:hidden;font-size:.52em;line-height:1.7;color:var(--mute); transition:max-height .3s var(--ease),padding .3s var(--ease)} .fl-faq div.open dd{max-height:9em;padding-bottom:.9em} /* ---------- блог ---------- */ .fl-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:.75em;padding:0 1.1em} .fl-blog article{border-radius:.4em;overflow:hidden;background:#fff;box-shadow:0 .3em .9em -.5em rgba(42,14,28,.26)} .fl-blog .fl-ph{height:3.6em} .fl-blog b{display:block;font-size:.54em;font-weight:600;line-height:1.4;padding:.7em .7em .3em} .fl-blog i{display:block;font-style:normal;font-size:.44em;letter-spacing:.1em;text-transform:uppercase; color:var(--rose);padding:0 .7em .8em} /* ---------- instagram ---------- */ .fl-insta{padding:1.6em 1.1em .3em;text-align:center} .fl-insta b{font-family:var(--font-shop);font-weight:600;font-size:1.2em;letter-spacing:.16em} .fl-insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.35em;margin-top:.8em} .fl-insta-grid .fl-ph{aspect-ratio:1;height:auto;border-radius:.2em} /* ---------- футер ---------- */ .fl-foot{background:#fff;margin-top:1.6em;padding:1.8em 1.1em 1.4em;text-align:center; border-top:1px solid rgba(42,14,28,.1)} .fl-foot .fl-logo{font-size:1.4em;display:block;margin-bottom:.5em} .fl-foot h3{font-size:.5em;letter-spacing:.2em;text-transform:uppercase;color:var(--plum);margin-bottom:.6em} .fl-foot > p{font-size:.5em;line-height:1.8;color:var(--mute);max-width:34em;margin:0 auto} .fl-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;text-align:left;margin-top:1.6em; padding-top:1.2em;border-top:1px solid rgba(42,14,28,.1)} .fl-cols b{display:block;font-size:.44em;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.6em} .fl-cols span{display:block;font-size:.48em;line-height:2;color:var(--mute)} .fl-pay{display:flex;justify-content:center;gap:.4em;margin-top:1.4em} .fl-pay i{width:2.2em;height:1.4em;border-radius:.15em;background:#F0E9E4;border:1px solid rgba(42,14,28,.12); display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.4em; letter-spacing:.06em;color:var(--mute);font-weight:700} /* ---------- сторінка товару ---------- */ .fl-crumbs{font-size:.48em;letter-spacing:.06em;color:var(--mute);padding:1.4em 1.1em .6em} .fl-crumbs a{color:var(--rose)} .fl-prod{display:grid;grid-template-columns:1.05fr 1fr;gap:1.3em;padding:.4em 1.1em 1.6em} .fl-prod .fl-img{aspect-ratio:3/4;height:auto;border-radius:.4em} .fl-prod h1{font-family:var(--font-shop);font-size:2em;font-weight:600;line-height:1.05;margin:.15em 0 .5em} .fl-prod .price{display:flex;align-items:baseline;gap:.5em;font-size:1.05em;margin-bottom:.7em} .fl-prod .price b{color:var(--rose)} .fl-prod .price s{opacity:.4;font-size:.7em} .fl-prod p{font-size:.54em;line-height:1.75;color:var(--mute);margin-bottom:.9em} .fl-sizes{display:flex;gap:.4em;margin-bottom:1em} .fl-sizes span{font-size:.48em;padding:.55em .9em;border:1px solid rgba(42,14,28,.22);border-radius:99px} .fl-sizes span.on{background:var(--ink);color:#fff;border-color:var(--ink)} .fl-note{display:flex;gap:.5em;align-items:center;font-size:.46em;color:var(--leaf);margin-top:.8em;letter-spacing:.04em} .fl-thumbs{display:flex;gap:.35em;margin-top:.4em} /* min-width:0 + width:100% — без них flex-елемент не стискається нижче власної ширини картинки (140px), і ряд мініатюр розпирав сторінку */ .fl-thumbs img{flex:1;min-width:0;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:.25em; outline:1.5px solid transparent;outline-offset:-1.5px;transition:outline-color .2s} .fl-thumbs img.on{outline-color:var(--rose)} /* ---------- курсор магазину ---------- */ .fl-cur{position:absolute;z-index:9;left:0;top:0;width:1.5em;height:1.5em;margin:-.75em 0 0 -.75em; border-radius:50%;border:1px solid var(--rose);pointer-events:none;opacity:0; display:flex;align-items:center;justify-content:center;color:var(--rose); transition:opacity .18s,scale .18s var(--ease),background-color .18s} .fl-cur::after{content:"✿";font-size:.5em;line-height:1} .fl-cur.vis{opacity:1} .fl-cur.hot{scale:1.8;background:rgba(224,43,99,.16)} .fl-cur.tap{scale:.85} .fl-toast{position:absolute;z-index:8;left:50%;bottom:1em;translate:-50% 1.6em;opacity:0;pointer-events:none; background:var(--ink);color:#fff;font-size:.52em;padding:.65em 1.2em;border-radius:99px; transition:opacity .28s,translate .28s var(--ease);white-space:nowrap; box-shadow:0 .5em 1.2em -.4em rgba(42,14,28,.6)} .fl-toast.on{opacity:1;translate:-50% 0} .fl-hint{position:absolute;z-index:7;right:.7em;bottom:.7em;pointer-events:none;font-size:.46em;letter-spacing:.09em; text-transform:uppercase;background:rgba(42,14,28,.85);color:#FFD9E6;padding:.5em .85em;border-radius:99px; opacity:clamp(0,calc((var(--s3,0) - .3) * 3),1);transition:opacity .3s} .fl.touched .fl-hint{opacity:0} /* 02 — Floritta Partner: додаток продавця того самого магазину, що в ноутбуці. Вміст замовлення живий: buildPhoneOrder() у main.js кладе сюди кошик відвідувача або останній відкритий букет. Пуш і картка їдуть від --s2, кур'єр по мапі та «доставлено» — від --s3, тому сценарій скраблиться тим самим двигуном, що й решта стендів. */ .mapp{position:absolute;inset:0;background:#F4F6F3;color:#22302A;display:flex;flex-direction:column; padding:2.5em .55em .45em} .m-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 .2em .4em} .m-head b{font-size:.54em;letter-spacing:.14em;color:#1E4D3F} .m-head span{font-size:.5em;color:#7C8880} .m-push{position:absolute;left:.5em;right:.5em;top:2.3em;z-index:6; background:rgba(255,255,255,.97);border-radius:.7em;padding:.55em .65em; display:flex;gap:.55em;align-items:center;box-shadow:0 .7em 1.6em -.7em rgba(20,30,25,.45); --k:clamp(0,calc((var(--s2,0) - .05) * 9),1); --out:clamp(0,calc((var(--s2,0) - .55) * 7),1); opacity:calc(var(--k) * (1 - var(--out))); transform:translateY(calc((1 - var(--k)) * -2.6em - var(--out) * 2.6em))} .m-push .ic{width:1.6em;height:1.6em;border-radius:.45em;flex:none; background:linear-gradient(140deg,#E02B63,#8E0F3C);color:#fff;display:grid;place-items:center;font-size:.85em} .m-push .tx{min-width:0} .m-push b{display:block;font-size:.6em} .m-push span{display:block;font-size:.53em;color:#66736C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-card{background:#fff;border-radius:.75em;padding:.55em .6em;box-shadow:0 .5em 1.3em -.8em rgba(20,30,25,.4); --k:clamp(0,calc((var(--s2,0) - .22) * 6),1); opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 1.4em))} .m-ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5em} .m-ch b{font-size:.6em} .m-ch span{font-size:.48em;color:#E02B63;font-family:var(--font-mono)} .m-items{display:flex;flex-direction:column;gap:.4em} .m-it{display:flex;align-items:center;gap:.5em; --k:clamp(0,calc((var(--s2,0) - .3 - var(--d,0)) * 7),1); opacity:var(--k);transform:translateX(calc((1 - var(--k)) * .9em))} .m-it img{width:1.9em;height:1.9em;border-radius:.4em;object-fit:cover;flex:none} .m-it .nm{flex:1;min-width:0;font-size:.55em;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .m-it .qp{font-size:.55em;font-family:var(--font-mono);color:#41504A;white-space:nowrap} .m-total{display:flex;justify-content:space-between;border-top:1px dashed #D8DFD9;margin-top:.55em;padding-top:.5em} .m-total span{font-size:.55em;color:#66736C} .m-total b{font-size:.66em;color:#E02B63} /* кнопка «прийняти»: сама стискається і стає зеленою «Прийнято ✓» */ .m-accept{position:relative;margin-top:.6em;border-radius:99px;text-align:center;padding:.62em 0;overflow:hidden; --p:clamp(0,calc((var(--s2,0) - .62) * 8),1); background:color-mix(in srgb,#1E4D3F calc(var(--p) * 100%),#22302A); transform:scale(calc(1 - .05 * clamp(0,calc((var(--s2,0) - .58) * 16),1) * (1 - var(--p))))} .m-accept span{display:block;font-size:.55em;color:#fff;letter-spacing:.05em} .m-accept .a2{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--p)} .m-accept .a1{opacity:calc(1 - var(--p))} .m-status{display:flex;gap:.35em;margin:.45em 0 .4em} .m-status .st{flex:1;display:flex;flex-direction:column;gap:.3em;align-items:stretch;text-align:center} .m-status .st i{height:.28em;border-radius:99px;background:#DDE3DD;overflow:hidden;position:relative;display:block} .m-status .st i::after{content:"";position:absolute;inset:0;background:#1E4D3F;border-radius:inherit; transform-origin:0 50%;transform:scaleX(var(--f,0))} .m-status .st span{font-size:.43em;color:#66736C;white-space:nowrap} .m-status .k1 i::after{--f:clamp(0,calc((var(--s2,0) - .72) * 5),1)} .m-status .k2 i::after{--f:clamp(0,calc((var(--s3,0) - .16) * 4),1)} .m-status .k3 i::after{--f:clamp(0,calc((var(--s3,0) - .82) * 9),1)} /* мапа в стилі Google, портретна (viewBox 200×250 ≈ пропорції контейнера, тому спотворення розтягування ≤5%): річка з мостом, кільцева розв'язка, парк зі ставком і деревами, жовта магістраль, підписи. Рух НЕрівномірний: --gof (0..100) — кусочно-лінійна функція від --go з двома «світлофорами»: доїхав до перехрестя → постояв → рушив → постояв перед кільцевою → фінальний ривок. Лінія маршруту і фургончик сидять на одному --gof, тому розійтися не можуть. */ .m-map{position:relative;flex:1;min-height:6.4em;border-radius:.7em;overflow:hidden;background:#EDEAE2; --k:clamp(0,calc((var(--s2,0) - .78) * 6),1);opacity:var(--k); --go:clamp(0,calc((var(--s3,0) - .14) / .72),1); --gof:calc( 43 * clamp(0,calc(var(--go) / .3),1) + 14 * clamp(0,calc((var(--go) - .42) / .1),1) + 43 * clamp(0,calc((var(--go) - .62) / .38),1))} .m-map svg{position:absolute;inset:0;width:100%;height:100%} .gm-land{fill:#EDEAE2} .gm-river{fill:#A9D3E6} .gm-park{fill:#C9E6C9} .gm-pond{fill:#A9D3E6} .gm-tree circle{fill:#8FC48D} .gm-bld{fill:#E3E0D7} .gm-rd-c{fill:none;stroke:#D8D4C9;stroke-width:6;stroke-linecap:round} .gm-rd{fill:none;stroke:#fff;stroke-width:4.4;stroke-linecap:round} .gm-art{fill:none;stroke:#FBE7A3;stroke-width:4.4} .gm-rab-c{fill:none;stroke:#D8D4C9;stroke-width:6} .gm-rab{fill:none;stroke:#fff;stroke-width:4.4} .gm-rab-i{fill:#C9E6C9;stroke:#D8D4C9;stroke-width:1} .gm-lbl{fill:#9AA0A6;font-size:5.4px;font-family:var(--font-body);letter-spacing:.2px} .gm-lbl.riv{fill:#5D93AC;font-style:italic;font-size:4.8px} .mm-rc{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--gof) / 100)} .mm-r{fill:none;stroke:#4285F4;stroke-width:3;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--gof) / 100)} .gm-pin path{fill:#EA4335} .gm-pin circle{fill:#A52714} /* фургончик: ніс дивиться по ходу (offset-rotate:auto), на паузах далі похитується і пихкає — стоїть на світлофорі, а не завис */ .mm-car{offset-path:path("M10 204 L88 204 Q96 204 96 196 L96 110 A14 14 0 0 0 110 96 L148 96 Q156 96 156 88 L156 44 Q156 36 164 36 L172 36"); offset-distance:calc(var(--gof) * 1%);offset-rotate:auto} .mm-car .bob{transform-box:fill-box;transform-origin:center} .puff{fill:#C9CDD1;opacity:0} .puff.p2{fill:#D8DCDF} @media (prefers-reduced-motion:no-preference){ .mm-car .bob{animation:carWag .7s ease-in-out infinite} .puff{animation:puffout .9s ease-out infinite} .puff.p2{animation-delay:.42s} } @keyframes carWag{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}} @keyframes puffout{ 0%{opacity:.55;transform:translate(0,0) scale(.6)} 100%{opacity:0;transform:translate(-7px,-2px) scale(1.5)} } @supports not (offset-path:path("M0 0 L1 1")){.mm-car{display:none}} .m-done{position:absolute;left:11%;right:11%;bottom:8%;z-index:7; background:rgba(255,255,255,.97);border-radius:.8em;padding:.6em .8em; display:flex;gap:.6em;align-items:center;box-shadow:0 .8em 2em -.8em rgba(20,30,25,.5); --k:clamp(0,calc((var(--s3,0) - .86) * 9),1); opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 1em)) scale(calc(.94 + var(--k) * .06))} .m-done i{width:1.7em;height:1.7em;border-radius:50%;background:#1E4D3F;color:#fff; display:grid;place-items:center;font-style:normal;font-size:.85em;flex:none} .m-done b{display:block;font-size:.6em} .m-done span{display:block;font-size:.5em;color:#66736C} /* примітка у копі стенда: «в замовленні — ваші дії з ноутбука вище» */ .bindnote{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--pine);margin-top:10px} .bindnote[hidden]{display:none} /* компактний мобільний список — лишився тільки в прев'ю портфоліо (Kvit Delivery) */ .app{position:absolute;inset:0;background:#0E1213;display:flex;flex-direction:column;color:#E9EBE7} .app-top{padding:1.2em 1em .6em;flex:none} .app-top .hi{font-size:.7em;color:#7E8A86;letter-spacing:.05em} .app-top h4{font-size:1.35em;margin:.15em 0 0;font-family:var(--font-display);letter-spacing:-.03em} .app-list{flex:1;padding:.6em 1em;display:flex;flex-direction:column;gap:.5em;overflow:hidden} .app-row{display:flex;align-items:center;gap:.6em;background:#161B1D;border-radius:.6em;padding:.6em} .app-row .av{width:1.9em;height:1.9em;border-radius:.45em;background:linear-gradient(140deg,#1E4D3F,#0F2C24); flex:none;display:grid;place-items:center;font-size:.6em;color:#9FD3BF;font-weight:600} .app-row .tt{flex:1} .app-row .tt b{display:block;font-size:.68em;font-weight:600} .app-row .tt span{font-size:.58em;color:#7E8A86} .app-row .amt{font-family:var(--font-mono);font-size:.62em;color:#9FD3BF} /* 03 — кіно на три сцени (11.5 с): реальний сайт SEALMARKET гортається → свайп у його ж адмінку, де курсор-оператор відкриває замовлення і відвантажує його → свайп у аналітику складу, де клік по донату категорій висуває таблицю топів. Уся хореографія — фази на CSS-змінних; курсор їде між п'ятьма станціями сумою відрізків (--m1..--m5), кліки — дзвоноподібні пульси --k1..--k3. ЦЕЙ ФАЙЛ — ДЖЕРЕЛО ПРАВДИ для блоку .cx (копія лежить у style.css). */ .cx{position:absolute;inset:0;background:#0E1113;overflow:hidden;font-family:var(--font-body); --cxa:clamp(0,calc(var(--s2,0) / .72),1); --tab:clamp(0,calc((var(--s2,0) - .74) / .06),1); --cxb:min(clamp(0,calc((var(--s2,0) - .8) / .07),1),clamp(0,calc((.98 - var(--s2,0)) / .05),1)); --m1:clamp(0,calc(var(--s3,0) / .05),1); --k1:min(clamp(0,calc((var(--s3,0) - .05) * 30),1),clamp(0,calc((.095 - var(--s3,0)) * 30),1)); --dr:clamp(0,calc((var(--s3,0) - .065) / .05),1); --m2:clamp(0,calc((var(--s3,0) - .14) / .045),1); --k2:min(clamp(0,calc((var(--s3,0) - .19) * 30),1),clamp(0,calc((.235 - var(--s3,0)) * 30),1)); --fbtn:clamp(0,calc((var(--s3,0) - .195) * 10),1); --drc:clamp(0,calc((var(--s3,0) - .26) / .045),1); --m3:clamp(0,calc((var(--s3,0) - .26) / .06),1); --fl2:clamp(0,calc((var(--s3,0) - .29) * 10),1); --tac:clamp(0,calc((var(--s3,0) - .34) / .05),1); --cxc:clamp(0,calc((var(--s3,0) - .4) / .42),1); --m4:clamp(0,calc((var(--s3,0) - .52) / .045),1); --k3:min(clamp(0,calc((var(--s3,0) - .57) * 30),1),clamp(0,calc((.615 - var(--s3,0)) * 30),1)); --pn:clamp(0,calc((var(--s3,0) - .585) / .055),1); --m5:clamp(0,calc((var(--s3,0) - .74) / .06),1); --kk:calc(var(--k1) + var(--k2) + var(--k3))} .cx-scene{position:absolute;inset:0;display:flex;flex-direction:column;background:#F6F8FB} .cx-b{transform:translateX(calc((1 - var(--tab)) * 103%));box-shadow:-1.2em 0 2.4em rgba(10,14,18,.35)} .cx-c{transform:translateX(calc((1 - var(--tac)) * 103%));box-shadow:-1.2em 0 2.4em rgba(10,14,18,.35)} .cx-bar{flex:none;display:flex;align-items:center;gap:.35em;padding:.5em .8em;background:#E7EBF1} .cx-bar.dark{background:#1C2126} .cx-bar i{width:.5em;height:.5em;border-radius:50%;background:#C3CAD3;display:block} .cx-bar.dark i{background:#3A424A} .cx-bar .url{flex:1;margin-left:.4em;background:#fff;border-radius:.35em;padding:.28em .7em; font-family:var(--font-mono);font-size:.6em;color:#5A6572;letter-spacing:.02em} .cx-bar.dark .url{background:#12161A;color:#8B96A2} .cx-tag{font-size:.52em;font-weight:700;letter-spacing:.12em;text-transform:uppercase; background:#3B5BDB;color:#fff;border-radius:99px;padding:.3em .8em} /* сцена А: скріншот сайту; контейнер має flex:1 + overflow:hidden, інакше img розтягує його до власної висоти й хід прокрутки стає нулем */ .cx-view{flex:1;position:relative;overflow:hidden;background:#fff;min-height:0} .cx-view img{position:absolute;left:0;top:0;width:100%;height:auto;display:block; transform:translateY(calc(var(--cxa) * var(--travel,0px)))} /* сцена Б: адмінка SEALMARKET */ .cx-admin{flex:1;display:flex;min-height:0;position:relative;overflow:hidden} .cx-side{flex:none;width:9.5em;background:#fff;border-right:1px solid #E4E8EE;padding:.8em .7em; display:flex;flex-direction:column;gap:.15em} .cx-side b{font-family:var(--font-body);font-weight:700;font-size:.62em;color:#1C2126;letter-spacing:.06em;margin-bottom:.9em} .cx-side b em{font-style:normal;color:#3B5BDB} .cx-side span{font-size:.56em;color:#5A6572;padding:.5em .6em;border-radius:.4em;white-space:nowrap} .cx-side span.on{background:#EAF0FE;color:#3B5BDB;font-weight:600} .cx-main{flex:1;display:flex;flex-direction:column;min-width:0} .cx-kstrip{flex:none;display:flex;gap:1.2em;padding:.55em .9em;background:#fff;border-bottom:1px solid #E4E8EE;font-size:.55em;color:#5A6572} .cx-kstrip b{color:#1C2126} .cx-th,.cx-tr{display:grid;grid-template-columns:3em 1fr 2.2em 4.4em 5.6em;gap:.5em;align-items:center;padding:.42em .9em} .cx-th{flex:none;font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;text-transform:uppercase;color:#8B96A2;background:#EFF2F7;padding-block:.7em} .cx-list{flex:1;position:relative;overflow:hidden} .cx-rows{position:absolute;inset:0 0 auto 0;transform:translateY(calc(var(--cxb) * var(--travel,0px)))} .cx-tr{font-size:.6em;border-bottom:1px solid #EDF0F5;background:#fff} .cx-tr .no{font-family:var(--font-mono);color:#8B96A2;font-size:.9em} .cx-tr .cl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1C2126} .cx-tr .sm{font-variant-numeric:tabular-nums;color:#1C2126;text-align:right} .chip{position:relative;justify-self:start} .chip b{display:inline-block;font-size:.78em;font-weight:600;border-radius:99px;padding:.3em .7em;white-space:nowrap} .chip .n,.chip > b{background:#EAF0FE;color:#3B5BDB} .chip.ok > b{background:#E3F4E8;color:#2E8B57} .chip.pd > b{background:#E7F5F8;color:#1098AD} .chip.pr > b{background:#FDF1DF;color:#C07E1D} .chip .d{position:absolute;left:0;top:0;background:#E3F4E8;color:#2E8B57} .cx-tr .chip.flb{--f:var(--fbtn)} .cx-tr.fl2{--f:var(--fl2)} .cx-tr .chip.flb .n,.cx-tr.fl2 .n{opacity:calc(1 - var(--f,0));transform:translateY(calc(var(--f,0) * .5em));display:inline-block} .cx-tr .chip.flb .d,.cx-tr.fl2 .d{opacity:var(--f,0);transform:translateY(calc((1 - var(--f,0)) * -.5em)) scale(calc(.7 + var(--f,0) * .3))} .cx-tr.fl2{background:color-mix(in srgb,#EBF7EF calc(var(--fl2,0) * 100%),#fff)} .cx-dr{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:4;background:#fff; border-left:1px solid #E4E8EE;box-shadow:-1em 0 2em rgba(16,22,30,.18); display:flex;flex-direction:column;padding:.8em .9em;gap:.5em; transform:translateX(calc((1 - var(--dr) + var(--drc)) * 106%))} .cx-drh b{display:block;font-size:.66em;color:#1C2126} .cx-drh span{display:block;font-size:.52em;color:#8B96A2;margin-top:.2em} .cx-dri{flex:1;display:flex;flex-direction:column;gap:.35em;margin-top:.3em;min-height:0} .cx-dri div{display:grid;grid-template-columns:1fr 3.6em 4.4em;gap:.5em;font-size:.56em;padding:.35em 0;border-bottom:1px dashed #EDF0F5} .cx-dri span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1C2126} .cx-dri em{font-style:normal;color:#8B96A2;text-align:right} .cx-dri u{text-decoration:none;font-variant-numeric:tabular-nums;color:#1C2126;text-align:right} .cx-drt{display:flex;justify-content:space-between;font-size:.62em;padding-top:.2em} .cx-drt b{color:#3B5BDB} .cx-drbtn{position:relative;flex:none;text-align:center;border-radius:.5em;padding:.6em 0;overflow:hidden; background:color-mix(in srgb,#2E8B57 calc(var(--fbtn,0) * 100%),#3B5BDB)} .cx-drbtn b{display:block;font-size:.58em;color:#fff;font-weight:600;letter-spacing:.03em} .cx-drbtn .a2{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--fbtn,0)} .cx-drbtn .a1{opacity:calc(1 - var(--fbtn,0))} /* сцена В: аналітика */ .cx-an{flex:1;display:flex;flex-direction:column;padding:.7em .9em;gap:.55em;min-height:0} .cx-anh{display:flex;align-items:baseline;justify-content:space-between} .cx-anh h5{font-family:var(--font-display);font-weight:700;font-size:.74em;color:#1C2126;margin:0} .cx-anh .live{display:flex;align-items:center;gap:.4em;font-size:.52em;color:#2E8B57;font-weight:600} .cx-anh .live i{width:.55em;height:.55em;border-radius:50%;background:#2E8B57;box-shadow:0 0 0 .25em rgba(46,139,87,.16)} .cx-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em} .cx-kpi div{background:#fff;border-radius:.5em;padding:.5em .6em;border:1px solid #E4E8EE; opacity:clamp(0,calc((var(--cxc) - var(--d,0)) * 4),1); transform:translateY(calc((1 - clamp(0,calc((var(--cxc) - var(--d,0)) * 4),1)) * .8em))} .cx-kpi b{display:block;font-family:var(--font-display);font-weight:700;font-size:.68em;color:#1C2126;white-space:nowrap} .cx-kpi span{font-size:.48em;color:#8B96A2;letter-spacing:.04em;text-transform:uppercase} .cx-charts{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:.5em;min-height:0;position:relative;overflow:hidden} .cx-panel{background:#fff;border:1px solid #E4E8EE;border-radius:.5em;padding:.55em .65em;display:flex;flex-direction:column;min-height:0} .cx-panel .ph{font-size:.5em;letter-spacing:.08em;text-transform:uppercase;color:#8B96A2;margin-bottom:.4em} .cx-bars{flex:1;display:flex;align-items:flex-end;gap:.3em} .cx-bars i{flex:1;border-radius:.2em .2em 0 0;background:linear-gradient(180deg,#6E93F8,#3B5BDB); height:calc(var(--h,.5) * 100% * clamp(0,calc((var(--cxc) - var(--d,0)) * 2.4),1))} .cx-dwrap{flex:1;display:flex;align-items:center;gap:.7em;min-height:0} .cx-donut{position:relative;flex:none;width:5.2em;aspect-ratio:1;border-radius:50%; background:conic-gradient(from -90deg, #3B5BDB 0 calc(34% * var(--cxc,0)), #22B8CF calc(34% * var(--cxc,0)) calc(60% * var(--cxc,0)), #F59F00 calc(60% * var(--cxc,0)) calc(78% * var(--cxc,0)), #40C057 calc(78% * var(--cxc,0)) calc(90% * var(--cxc,0)), #9BA4B5 calc(90% * var(--cxc,0)) calc(100% * var(--cxc,0)), #EFF2F7 calc(100% * var(--cxc,0))); transform:scale(calc(1 + var(--k3) * .05))} .cx-donut i{position:absolute;inset:18%;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal} .cx-donut b{grid-area:1/1;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.6em;color:#1C2126;line-height:1.15} .cx-donut b u{display:block;text-decoration:none;font-family:var(--font-body);font-weight:400;font-size:.72em;color:#8B96A2;letter-spacing:.06em} .cx-donut .c0{opacity:calc(1 - var(--pn,0))} .cx-donut .c1{opacity:var(--pn,0);color:#3B5BDB} .cx-leg{display:flex;flex-direction:column;gap:.3em;min-width:0} .cx-leg span{display:flex;align-items:center;gap:.4em;font-size:.52em;color:#5A6572;white-space:nowrap} .cx-leg span::before{content:"";width:.6em;height:.6em;border-radius:.2em;background:var(--c);flex:none} .cx-pn{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:4;background:#fff; border:1px solid #E4E8EE;border-radius:.5em;box-shadow:-.9em 0 1.8em rgba(16,22,30,.16); padding:.6em .7em;display:flex;flex-direction:column;gap:.35em; transform:translateX(calc((1 - var(--pn,0)) * 108%))} .cx-pn .pnh{font-size:.56em;color:#1C2126;font-weight:700;margin-bottom:.2em} .cx-pn .pnr{display:grid;grid-template-columns:1fr 3.4em 4.2em;gap:.4em;font-size:.53em;padding:.3em 0;border-bottom:1px dashed #EDF0F5; opacity:clamp(0,calc((var(--pn,0) - .3 - var(--d,0)) * 4),1); transform:translateX(calc((1 - clamp(0,calc((var(--pn,0) - .3 - var(--d,0)) * 4),1)) * 1em))} .cx-pn .pnr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1C2126} .cx-pn .pnr em{font-style:normal;color:#8B96A2;text-align:right} .cx-pn .pnr u{text-decoration:none;color:#1C2126;text-align:right;font-variant-numeric:tabular-nums} .cx-note{flex:none;display:flex;align-items:center;gap:.6em;background:#1C2126;color:#E9EDF2;border-radius:.55em;padding:.6em .9em; opacity:clamp(0,calc((var(--cxc) - .74) * 5),1); transform:translateY(calc((1 - clamp(0,calc((var(--cxc) - .74) * 5),1)) * .8em))} .cx-note i{flex:none;width:.65em;height:.65em;border-radius:50%;background:#4ADE80;box-shadow:0 0 .5em rgba(74,222,128,.8)} .cx-note span{font-size:.58em;line-height:1.4} /* курсор-оператор: станції зняті з реальних прямокутників цілей */ .cx-cur{position:absolute;z-index:9;width:1em;height:1em;pointer-events:none; left:calc(68% - 13.4% * var(--m1) + 17.4% * var(--m2) - 34% * var(--m3) + 25% * var(--m4) - 33% * var(--m5)); top:calc(22% + 9.5% * var(--m1) + 59.5% * var(--m2) - 31% * var(--m3) + 6% * var(--m4) + 14% * var(--m5)); opacity:clamp(0,calc((var(--s2,0) - .975) * 40),1); transform:scale(calc(1 - var(--kk) * .22)); background:#1C2126;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 .1em .2em rgba(0,0,0,.35)); clip-path:polygon(0 0,0 76%,25% 58%,42% 96%,60% 88%,43% 51%,70% 45%)} .cx-cur::after{content:"";position:absolute;left:10%;top:10%;width:2.4em;height:2.4em;translate:-50% -50%; border:.12em solid rgba(59,91,219,.85);border-radius:50%; scale:calc(.5 + var(--kk) * 1.6);opacity:calc(var(--kk) * (1 - var(--kk)) * 4)} /* 03 CRM dashboard */ .crm{position:absolute;inset:0;background:#0B0E0F;display:grid;grid-template-columns:5.5em 1fr;color:#E9EBE7} .crm-side{background:#0E1213;border-right:1px solid #1C2225;padding:.8em .6em;display:flex;flex-direction:column;gap:.45em} .crm-side .lg{font-family:var(--font-mono);font-size:.55em;letter-spacing:.14em;color:#6FBFA2;margin-bottom:.5em} .crm-side i{height:.55em;border-radius:99px;background:#1C2225;display:block} .crm-side i.on{background:#1E4D3F} .crm-main{padding:.8em .9em;display:flex;flex-direction:column;gap:.7em;overflow:hidden} .crm-head{display:flex;align-items:center;gap:.5em} .crm-head h4{font-size:.85em;font-family:var(--font-display);letter-spacing:-.02em;margin:0} .crm-head .chips{margin-left:auto;display:flex;gap:.3em} .crm-head .chips b{font-family:var(--font-mono);font-size:.5em;letter-spacing:.08em;padding:.35em .6em;border-radius:99px;border:1px solid #262D30;color:#7E8A86;font-weight:400} .crm-head .chips b.on{background:#1E4D3F;border-color:#1E4D3F;color:#D7EDE4} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em} .kpi{background:#0E1213;border:1px solid #1C2225;border-radius:.5em;padding:.55em .6em} .kpi span{font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase} .kpi b{display:block;font-size:1.15em;font-family:var(--font-display);letter-spacing:-.03em;margin-top:.15em;font-variant-numeric:tabular-nums} .kpi u{text-decoration:none;font-family:var(--font-mono);font-size:.5em;color:#6FBFA2} .crm-charts{display:grid;grid-template-columns:1.35fr 1fr;gap:.5em;flex:none} .panel{background:#0E1213;border:1px solid #1C2225;border-radius:.5em;padding:.6em} .panel .ph{font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase;margin-bottom:.5em} .bars{display:flex;align-items:flex-end;gap:.32em;height:4.4em} .bars i{flex:1;border-radius:.15em .15em 0 0;background:linear-gradient(180deg,#6FBFA2,#1E4D3F); height:calc(var(--h) * clamp(0,calc(var(--s2,0)*1.35),1) * 1%)} .bars i:last-child{background:linear-gradient(180deg,#D9A340,#8A6414)} .spark{height:4.4em;width:100%} .spark path{fill:none;stroke:#6FBFA2;stroke-width:1.6;stroke-linecap:round; stroke-dasharray:200;stroke-dashoffset:calc(200 - clamp(0,calc(var(--s2,0)*1.3),1) * 200)} .spark .fill{fill:url(#sg);stroke:none;opacity:clamp(0,calc((var(--s2,0)-.4)*2.6),1)} .crm-table{background:#0E1213;border:1px solid #1C2225;border-radius:.5em;overflow:hidden;flex:1;min-height:0} .crm-tr{display:grid;grid-template-columns:1.4fr 1fr .7em 1fr;gap:.5em;align-items:center;padding:.42em .6em;border-bottom:1px solid #161B1D;font-size:.6em; opacity:clamp(0,calc((var(--s3,0) - var(--d)) * 9),1); transform:translateX(calc((1 - clamp(0,calc((var(--s3,0) - var(--d)) * 9),1)) * -.8em))} .crm-tr.hd{background:#111517;font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase;opacity:1;transform:none} .crm-tr .st{font-family:var(--font-mono);font-size:.85em;padding:.15em .5em;border-radius:99px;justify-self:start} .st.a{background:#12291F;color:#6FBFA2}.st.b{background:#2A2313;color:#D9A340}.st.c{background:#2A1815;color:#E4654C} .st.n{background:#3A1226;color:#FF9EC4} /* верхній рядок — замовлення відвідувача: підсвічений і з живою крапкою */ .crm-tr.bindrow{background:#10201A;box-shadow:inset 2px 0 0 #6FBFA2} .crm-tr.bindrow [data-adm-no]{color:#6FBFA2;font-family:var(--font-mono)} .crm-toast{position:absolute;right:.8em;bottom:.8em;z-index:7;background:#12291F;border:1px solid #1E4D3F;border-radius:.5em;padding:.5em .7em;display:flex;gap:.5em;align-items:center; opacity:clamp(0,calc((var(--s3,0) - .55)*7),1);transform:translateY(calc((1 - clamp(0,calc((var(--s3,0) - .55)*7),1)) * 1em))} .crm-toast b{font-size:.6em}.crm-toast span{font-size:.55em;color:#8FA69C} .crm-toast .d{width:.4em;height:.4em;border-radius:50%;background:#6FBFA2} /* 04 shop */ .shop{position:absolute;inset:0;background:#F1F2ED;color:#14181A;display:flex;flex-direction:column} .shop-top{display:flex;align-items:center;gap:.7em;padding:.6em .9em;border-bottom:1px solid #DCDED5;flex:none} .shop-top .lg{font-family:var(--font-display);font-size:.8em;font-weight:700;letter-spacing:-.02em} .shop-top nav{display:flex;gap:.7em;margin-left:.6em} .shop-top nav b{font-size:.58em;font-weight:500;color:#4E5754} .shop-cart{margin-left:auto;position:relative;width:1.5em;height:1.5em;border:1px solid #C3C7BC;border-radius:.35em;display:grid;place-items:center;font-size:.9em} .shop-cart u{position:absolute;top:-.35em;right:-.35em;background:#C1452E;color:#fff;font-family:var(--font-mono);font-size:.42em;min-width:1.5em;height:1.5em;border-radius:99px;display:grid;place-items:center;text-decoration:none; transform:scale(clamp(0,calc(var(--s3,0)*8),1))} .shop-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.55em;padding:.8em .9em;align-content:start} .pcard{background:#fff;border:1px solid #DCDED5;border-radius:.5em;overflow:hidden; opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 8),1); transform:translateY(calc((1 - clamp(0,calc((var(--s2,0) - var(--d)) * 8),1)) * .9em))} .pcard .im{height:3.6em;background:linear-gradient(140deg,#E0E8E2,#C9CDC3);position:relative;overflow:hidden} .pcard .im img{width:100%;height:100%;object-fit:cover;display:block} .pcard .im::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 40% 35%,rgba(255,255,255,.18),transparent)} .pcard.hot .im{transform:scale(calc(1 + clamp(0,calc((var(--s3,0)-.1)*3),1)*.08));transition:none} .pcard .in{padding:.45em .5em} .pcard .in b{display:block;font-size:.58em;font-weight:600} .pcard .in span{font-family:var(--font-mono);font-size:.55em;color:#1E4D3F} .fly{position:absolute;z-index:8;background:#1E4D3F;color:#EDEEE9;font-family:var(--font-mono);font-size:.55em;padding:.3em .55em;border-radius:99px; left:22%;top:46%; opacity:clamp(0,calc((var(--s3,0)-.1)*8),1) ; transform:translate(calc(clamp(0,calc((var(--s3,0)-.15)*1.6),1) * 240%), calc(clamp(0,calc((var(--s3,0)-.15)*1.6),1) * -270%)) scale(calc(1 - clamp(0,calc((var(--s3,0)-.15)*1.6),1)*.4))} /* 05 webinar */ .web{position:absolute;inset:0;background:#0B0E0F;display:grid;grid-template-columns:1fr 8.5em;color:#E9EBE7} .web-main{padding:.7em;display:flex;flex-direction:column;gap:.5em;min-width:0} .web-slide{flex:1;border-radius:.5em;background:linear-gradient(150deg,#16302A,#0E1213);border:1px solid #1C2225;position:relative;overflow:hidden;display:grid;place-items:center} .web-slide .sl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:1.2em;transition:none} .web-slide .sl h4{font-family:var(--font-display);font-size:1.4em;letter-spacing:-.03em;margin:0 0 .3em} .web-slide .sl p{font-size:.62em;color:#8FA69C} .web-slide .sl1{opacity:calc(1 - clamp(0,calc((var(--s3,0)-.3)*6),1))} .web-slide .sl2{opacity:clamp(0,calc((var(--s3,0)-.3)*6),1)} .web-slide .badge{position:absolute;top:.6em;left:.6em;display:flex;gap:.35em;align-items:center;background:rgba(193,69,46,.16);border:1px solid #C1452E;border-radius:99px;padding:.2em .5em} .web-slide .badge i{width:.32em;height:.32em;border-radius:50%;background:#E4654C} .web-slide .badge b{font-family:var(--font-mono);font-size:.5em;letter-spacing:.12em} .web-slide .cnt{position:absolute;top:.6em;right:.6em;font-family:var(--font-mono);font-size:.55em;color:#8FA69C;font-variant-numeric:tabular-nums} .web-tiles{display:flex;gap:.4em;height:2.9em;flex:none} .web-tile{flex:1;border-radius:.4em;background:linear-gradient(160deg,#1C2225,#0E1213);border:1px solid #1C2225;position:relative; opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 9),1);transform:scale(calc(.9 + clamp(0,calc((var(--s2,0) - var(--d)) * 9),1)*.1))} .web-tile b{position:absolute;left:.35em;bottom:.28em;font-size:.5em;color:#8FA69C} .web-tile .hand{position:absolute;right:.3em;top:.25em;font-size:.6em;opacity:clamp(0,calc((var(--s3,0)-.5)*8),1)} .web-tile.spk{border-color:#1E4D3F;box-shadow:0 0 0 1px #1E4D3F inset} .web-chat{border-left:1px solid #1C2225;background:#0E1213;padding:.6em .55em;display:flex;flex-direction:column;gap:.35em;overflow:hidden} .web-chat .ph{font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase;margin-bottom:.2em} .msg{font-size:.55em;line-height:1.35; opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 10),1); transform:translateY(calc((1 - clamp(0,calc((var(--s2,0) - var(--d)) * 10),1)) * .5em))} .msg b{color:#6FBFA2;font-weight:600} .msg.me b{color:#D9A340} /* 06 bots — телефон + термінал */ .botstage{position:relative;width:100%;display:flex;align-items:center;justify-content:center} /* min-width:0 — без нього flex-елемент не стискається нижче min-content, а рядки логів мають white-space:nowrap і розпирали стенд на мобільному */ .term{flex:1 1 auto;min-width:0;max-width:560px;border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:#0B0E0F;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);position:relative;z-index:1} .term-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#12171A;border-bottom:1px solid #1C2225} .term-bar i{width:8px;height:8px;border-radius:50%;background:#394245} .term-bar span{font-family:var(--font-mono);font-size:10px;color:#6B7470;margin-left:8px;letter-spacing:.08em} .term-body{padding:12px;font-family:var(--font-mono);font-size:11.5px;line-height:1.75;color:#8FA69C;min-height:230px} .term-body div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 12),1)} .term-body .ok{color:#6FBFA2}.term-body .wr{color:#D9A340}.term-body .mt{color:#4E5754} .term-caret{display:inline-block;width:7px;height:12px;background:#6FBFA2;vertical-align:-2px;animation:blink 1.05s steps(1) infinite} @keyframes blink{50%{opacity:0}} .botphone{flex:0 0 auto;width:clamp(150px,17vw,224px);margin-left:-6%;z-index:2;position:relative} .botphone .phone{width:100%;transform:translateY(calc((1 - var(--s1,0)) * 30%)) rotate(calc((1 - var(--s1,0)) * 6deg))} .tg{position:absolute;inset:0;background:#0E1213;display:flex;flex-direction:column;color:#E9EBE7} .tg-top{flex:none;padding:2.3em .8em .55em;background:#161B1D;border-bottom:1px solid #262D30;display:flex;align-items:center;gap:.5em} .tg-top .av{width:1.6em;height:1.6em;border-radius:50%;background:linear-gradient(140deg,#2AABEE,#1E7BB0);display:grid;place-items:center;font-size:.6em;font-weight:700;color:#fff} .tg-top b{font-size:.68em;display:block} .tg-top span{font-size:.52em;color:#6FBFA2} .tg-body{flex:1;padding:.6em;display:flex;flex-direction:column;gap:.4em;overflow:hidden} .bub{max-width:82%;font-size:.6em;line-height:1.4;padding:.5em .65em;border-radius:.8em; opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 10),1); transform:translateY(calc((1 - clamp(0,calc((var(--s2,0) - var(--d)) * 10),1)) * .6em))} .bub.in{background:#1C2225;border-bottom-left-radius:.2em;align-self:flex-start} .bub.out{background:#1E4D3F;border-bottom-right-radius:.2em;align-self:flex-end} .tg-kb{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.15em; opacity:clamp(0,calc((var(--s3,0) - .1) * 7),1)} .tg-kb b{flex:1;text-align:center;font-size:.55em;font-weight:500;background:#1C2225;border:1px solid #2B3234;border-radius:.4em;padding:.4em .3em} .tg-kb b.hi{background:#1E4D3F;border-color:#2F6E5A} .tg-in{flex:none;display:flex;gap:.4em;align-items:center;padding:.5em .6em 1em;border-top:1px solid #1C2225;background:#0B0E0F} .tg-in .f{flex:1;height:1.5em;border-radius:99px;background:#161B1D} .tg-in .s{width:1.5em;height:1.5em;border-radius:50%;background:#1E4D3F} /* ============================================================ 04 — AI-АСИСТЕНТ. Темна кінематографічна секція на весь екран (єдина темна серед стендів — навмисне), чат по центру, копірайт над ним. Він радить, викликає інструменти і сам оформлює замовлення. ============================================================ */ .stage-ai{background:#0F1417;color:#E9EDEB} .stage-ai .stage-in{overflow:hidden;position:relative} .stage-ai .stage-in::before{ /* м'яке сяйво позаду чату */ content:"";position:absolute;left:50%;top:38%;translate:-50% -50%;width:min(80vw,900px);aspect-ratio:1; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(111,191,162,.16),rgba(184,128,31,.06) 45%,transparent 68%);filter:blur(30px)} /* на широких — копірайт ліворуч, чат праворуч і трохи більший; на вузьких — стовпчик */ .stage-ai-in{position:relative;width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut); display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center} .stage-ai .stage-copy{max-width:520px} @media (max-width:1080px){ .stage-ai-in{grid-template-columns:1fr;text-align:center;justify-items:center;gap:26px} .stage-ai .stage-copy{max-width:640px} } .stage-ai .kick span{color:#6FBFA2} .stage-ai .kick i{background:#6FBFA2} .stage-ai h3{color:#F3F5F2} .stage-ai .lede{color:#B4BDB8} @media (max-width:1080px){.stage-ai .taglist{justify-content:center}} .stage-ai .taglist span{border-color:#2A3438;color:#B4BDB8} .stage-ai .stage-vis{width:100%;min-height:0} .ai{position:relative;width:100%;background:#151B1F;border:1px solid #243035;border-radius:18px;overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;text-align:left; --ap:var(--s2,0);--ap3:var(--s3,0)} .ai-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #243035;background:#182024} .ai-orb{position:relative;width:34px;height:34px;flex:none;border-radius:50%; background:conic-gradient(from 0deg,#6FBFA2,#B8801F,#6FBFA2)} .ai-orb i{position:absolute;inset:3px;border-radius:50%;background:#182024} .ai-orb::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#6FBFA2; box-shadow:0 0 12px rgba(111,191,162,.9)} @media (prefers-reduced-motion:no-preference){.ai-orb{animation:orbspin 4s linear infinite}} @keyframes orbspin{to{rotate:360deg}} .ai-head b{display:block;font-size:14px} .ai-head span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#8FA69C} .ai-head span u{width:6px;height:6px;border-radius:50%;background:#6FBFA2;text-decoration:none} .ai-head em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em; color:#B8801F;border:1px solid rgba(184,128,31,.4);border-radius:99px;padding:3px 9px} .ai-thread{padding:16px 16px 6px;display:flex;flex-direction:column;gap:10px} .ai-card img{height:92px} .ai-m{max-width:78%; --k:clamp(0,calc((var(--ap) - var(--t,0)) * 9),1); opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 10px))} .ai-m p{margin:0;font-size:14px;line-height:1.5} .ai-m.u{align-self:flex-end;background:#1E4D3F;color:#EAF3EE;border-radius:16px 16px 4px 16px;padding:10px 14px} .ai-m.a{align-self:flex-start;background:#1C2428;border:1px solid #243035;border-radius:16px 16px 16px 4px;padding:12px 14px; display:flex;flex-direction:column;gap:10px;max-width:86%} .ai-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 14px;background:#1C2428;border:1px solid #243035;border-radius:16px 16px 16px 4px; opacity:min(clamp(0,calc((var(--ap) - var(--a)) * 12),1),clamp(0,calc((var(--b) - var(--ap)) * 12),1)); height:34px;margin-top:calc(-34px * (1 - min(clamp(0,calc((var(--ap) - var(--a)) * 12),1),clamp(0,calc((var(--b) - var(--ap)) * 12),1))))} .ai-typing i{width:6px;height:6px;border-radius:50%;background:#8FA69C} @media (prefers-reduced-motion:no-preference){ .ai-typing i{animation:tdot 1s ease-in-out infinite} .ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s} } @keyframes tdot{50%{transform:translateY(-4px);opacity:.5}} .ai-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ai-card{background:#151B1F;border:1px solid #243035;border-radius:12px;overflow:hidden; --k:clamp(0,calc((var(--ap) - var(--t,0)) * 9),1);opacity:var(--k);transform:scale(calc(.96 + var(--k) * .04))} .ai-card img{width:100%;height:110px;object-fit:cover;display:block} .ai-card b{display:block;font-size:13px;padding:8px 10px 2px} .ai-card span{display:block;font-size:11.5px;color:#8FA69C;padding:0 10px 9px} .ai-card s{color:#C1452E;text-decoration:none} .ai-tip{--k:clamp(0,calc((var(--ap) - var(--t,0)) * 9),1);opacity:var(--k);color:#D8DED9} .ai-tip b{color:#9FD3BF} .ai-tools{display:flex;flex-direction:column;gap:6px} .ai-tools .tl{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;color:#8FA69C; --k:clamp(0,calc((var(--ap) - var(--t,0)) * 9),1);opacity:var(--k);transform:translateX(calc((1 - var(--k)) * -8px))} .ai-tools .tl i{font-style:normal;width:18px;height:18px;border-radius:5px;background:#243035;display:grid;place-items:center;font-size:11px;color:#B8801F} .ai-tools .tl span{color:#B4BDB8} .ai-tools .tl b{color:#9FD3BF;font-weight:500} .ai-order{background:#151B1F;border:1px solid #2F6E5A;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px; --k:clamp(0,calc((var(--ap) - var(--t,0)) * 9),1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 8px))} .ao-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px} .ao-h b{font-size:13.5px}.ao-h span{font-size:11px;color:#8FA69C} .ao-r{display:flex;justify-content:space-between;font-size:12.5px;color:#D8DED9;border-top:1px dashed #243035;padding-top:6px} .ao-r b{color:#EAF3EE;font-weight:500} .ao-pay{position:relative;margin-top:6px;border-radius:10px;text-align:center;padding:10px;overflow:hidden; --p:clamp(0,calc((var(--ap3) - .35) * 5),1); background:color-mix(in srgb,#2E8B57 calc(var(--p) * 100%),#B8801F); transform:scale(calc(1 - .04 * min(clamp(0,calc((var(--ap3) - .25) * 12),1),clamp(0,calc((.4 - var(--ap3)) * 12),1))))} .ao-pay b{display:block;font-size:13px;color:#0F1417;font-weight:700} .ao-pay .p2{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--p);color:#F3F5F2} .ao-pay .p1{opacity:calc(1 - var(--p))} .ai-input{display:flex;align-items:center;gap:10px;margin:8px 18px 16px;background:#182024;border:1px solid #243035;border-radius:99px;padding:10px 16px} .ai-input span{flex:1;font-size:13px;color:#6B7B74} .ai-input i{font-style:normal;color:#6FBFA2} /* ============================================================ 05 — TELEGRAM-ДОШКА. Світла, широка: заголовок зверху на всю ширину, під ним — телефон із ботом, який «врізається» у розсип карток екосистеми (канал, група, воронка, аналітика). Картки вилітають одна за одною з легким нахилом. ============================================================ */ .stage-tg .stage-in{overflow:hidden} .stage-tg-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut); display:flex;flex-direction:column;gap:30px} .stage-tg .stage-copy{max-width:720px} .stage-tg .stage-vis{width:100%} .tgw{position:relative;display:grid;grid-template-columns:clamp(150px,15vw,200px) 1fr;gap:clamp(16px,2.6vw,36px);align-items:center} .tgw-phone{position:relative;z-index:2} .tgw-phone .botphone{width:100%;margin:0} .tgw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} @media (min-width:1080px){.tgw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .tgc{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden; box-shadow:0 18px 40px -26px rgba(20,24,26,.4); --k:clamp(0,calc((var(--s2,0) - var(--d,0)) * 4),1); opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 22px)) rotate(calc((1 - var(--k)) * -1.5deg))} .tgc:nth-child(2n){transform:translateY(calc((1 - var(--k)) * 22px)) rotate(calc((1 - var(--k)) * 1.5deg))} .tgc-h{display:flex;align-items:center;gap:8px;padding:10px 12px} .tgc-h i{width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#E02B63,#8E0F3C);color:#fff; font-style:normal;font-weight:700;display:grid;place-items:center;font-size:12px;flex:none} .tgc-h i.g{background:linear-gradient(140deg,#2478B5,#154B73)} .tgc-h b{display:block;font-size:12.5px} .tgc-h u{text-decoration:none;color:#3B9EDB;font-size:11px} .tgc-h span{display:block;font-size:10.5px;color:var(--ink-3)} .tgc-h em{font-style:normal;color:#2E8B57} .tgc.post > img{width:100%;height:96px;object-fit:cover;display:block} .tgc.post p{font-size:11.5px;line-height:1.45;padding:8px 12px 4px;margin:0} .tgc.post p b{color:var(--pine)} .tgc-meta{display:flex;gap:10px;padding:4px 12px 10px;font-size:10.5px;color:var(--ink-3)} .tgc.group{padding-bottom:8px} .gm{margin:0 12px 6px;font-size:11.5px;line-height:1.35;background:var(--paper-hi);border-radius:8px;padding:6px 8px; --kk:clamp(0,calc((var(--s2,0) - .2 - var(--d,0)) * 4),1);opacity:var(--kk);transform:translateX(calc((1 - var(--kk)) * -8px))} .gm b{display:block;font-size:10.5px;color:#2478B5;margin-bottom:1px} .gm.adm{background:var(--pine-soft)}.gm.adm b{color:var(--pine)} .tgc.fun,.tgc.stat{background:var(--graphite);color:#E9EBE7;border-color:transparent;padding:12px 14px} .tgc .fh{display:block;font-size:11px;letter-spacing:.04em;margin-bottom:9px;color:#9FD3BF} .tgc.fun .fr{display:grid;grid-template-columns:58px 1fr auto;gap:8px;align-items:center;margin-bottom:6px} .tgc.fun .fr span{font-size:10px;color:#8FA69C} .tgc.fun .fr i{height:8px;border-radius:99px;background:#2B3134;overflow:hidden;position:relative;display:block} .tgc.fun .fr i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#6FBFA2;transform-origin:0 50%; transform:scaleX(calc(var(--w,.5) * clamp(0,calc((var(--s2,0) - .3 - var(--d,0)) * 3),1)))} .tgc.fun .fr.pay i::after{background:var(--amber)} .tgc.fun .fr em{font-style:normal;font-family:var(--font-mono);font-size:10px; opacity:clamp(0,calc((var(--s2,0) - .35 - var(--d,0)) * 3),1)} .tgc.stat .sk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px} .tgc.stat .sk b{display:block;font-family:var(--font-display);font-size:14px;font-weight:700} .tgc.stat .sk span{font-size:9.5px;color:#8FA69C;letter-spacing:.04em;text-transform:uppercase} .tgc.stat svg{width:100%;height:44px} .tgc.stat .f{fill:rgba(111,191,162,.16)} .tgc.stat .l{fill:none;stroke:#6FBFA2;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1; stroke-dashoffset:calc(1 - clamp(0,calc((var(--s2,0) - .45) * 2),1))} .tgw .botphone .phone{transform:translateY(calc((1 - var(--s1,0)) * 24%)) rotate(calc((1 - var(--s1,0)) * -5deg))} /* ============================================================ 06 — API-ПЛАНЕТАРІЙ. Хаб по центру великим, з кільцями-орбітами; вузли по колу з підказкою при наведенні; пакети даних біжать маршрутами кольором сервісу. Копірайт — знизу, двома колонками. ============================================================ */ .stage-api .stage-in{overflow:hidden} .stage-api-in{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut); display:flex;flex-direction:column-reverse;gap:26px;align-items:center} .stage-api .stage-copy{max-width:none;display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(18px,3vw,48px);align-items:start;width:100%} .stage-api .stage-copy .kick{grid-column:1/-1} .stage-api .stage-copy h3{grid-column:1} .stage-api .stage-copy .lede{grid-column:2;grid-row:2 / span 2;margin:0} .stage-api .stage-copy .taglist{grid-column:1} .stage-api .stage-vis{width:100%} .apix{display:grid;grid-template-columns:minmax(260px,420px) minmax(240px,1fr);gap:clamp(18px,3vw,44px);align-items:center;justify-content:center} .api-hub-big{position:relative;aspect-ratio:1;width:100%} .api-hub-big svg{position:absolute;inset:0;width:100%;height:100%} .api-ring{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:3 6;opacity:.7} .api-ring.r2{stroke-dasharray:2 5;opacity:.5} @media (prefers-reduced-motion:no-preference){ .api-ring{animation:ringspin 60s linear infinite;transform-origin:50% 50%} .api-ring.r2{animation-duration:40s;animation-direction:reverse} } @keyframes ringspin{to{transform:rotate(360deg)}} .api-ln path{fill:none;stroke:var(--rule);stroke-width:1.4;stroke-dasharray:1; stroke-dashoffset:calc(1 - clamp(0,calc(var(--s2,0) * 2),1))} .api-pk circle{fill:var(--c,var(--pine));opacity:0;offset-path:var(--p);offset-rotate:0deg; filter:drop-shadow(0 0 3px var(--c,var(--pine)))} @media (prefers-reduced-motion:no-preference){.api-pk circle{animation:apipk var(--t,3s) linear var(--dl,0s) infinite}} .stage:not(.seen) .api-pk circle{animation-play-state:paused} @keyframes apipk{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}} .api-hub-big .hubc{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2; width:clamp(96px,10vw,124px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center; background:var(--pine);color:#EDEEE9;font-family:var(--font-display);font-weight:700;font-size:13px;line-height:1.15;letter-spacing:.06em; box-shadow:0 0 0 8px color-mix(in srgb,var(--pine) 12%,transparent),0 0 0 16px color-mix(in srgb,var(--pine) 5%,transparent),0 24px 50px -22px rgba(20,40,32,.7)} .api-hub-big .hubc span{font-weight:300;font-size:10px;letter-spacing:.2em} .api-hub-big .hubc small{font-family:var(--font-mono);font-weight:400;font-size:8.5px;letter-spacing:.06em;color:#9FD3BF;margin-top:4px} .api-hub-big .nd{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;z-index:3;cursor:default; background:var(--paper-hi);border:1px solid var(--rule);border-radius:99px; font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;padding:6px 12px;white-space:nowrap; box-shadow:0 8px 18px -10px rgba(20,24,26,.35);transition:background .2s,border-color .2s,color .2s; --k:clamp(0,calc((var(--s2,0) - .15 - var(--d,0)) * 4),1);opacity:var(--k);scale:calc(.7 + var(--k) * .3)} .api-hub-big .nd:hover{background:var(--pine);border-color:var(--pine);color:#EDEEE9} .api-tip{position:absolute;left:50%;bottom:-6px;translate:-50% 100%;z-index:4;pointer-events:none; background:var(--ink);color:var(--paper);border-radius:10px;padding:8px 12px;max-width:300px; opacity:0;transition:opacity .2s;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)} .api-tip.on{opacity:1} .api-tip b{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:#9FD3BF;margin-bottom:2px} .api-tip span{font-size:12px;line-height:1.4} .api-log{background:var(--graphite);color:#E9EBE7;border-radius:14px;padding:14px 16px;font-family:var(--font-mono); box-shadow:0 20px 50px -28px rgba(20,24,26,.6)} .al-h{display:flex;align-items:center;gap:8px;font-size:11px;color:#8FA69C;letter-spacing:.06em;margin-bottom:10px} .al-h i{width:8px;height:8px;border-radius:50%;background:#6FBFA2;box-shadow:0 0 8px rgba(111,191,162,.8)} .al-h em{margin-left:auto;font-style:normal;color:#9FD3BF} .al-b div{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:baseline;font-size:11.5px;padding:5px 0;border-bottom:1px solid #262D30; --k:clamp(0,calc((var(--s2,0) - .2 - var(--d,0)) * 4),1);opacity:var(--k);transform:translateX(calc((1 - var(--k)) * -8px))} .al-b div:last-child{border-bottom:0} .al-b u{text-decoration:none;color:#6B7470} .al-b b{font-weight:600;border-radius:4px;padding:1px 6px;font-size:10.5px} .al-b b.ok{background:#12291F;color:#6FBFA2}.al-b b.wr{background:#2A2313;color:#D9A340} .al-b em{font-style:normal;color:#B4BDB8} /* ============================== PORTFOLIO ============================== */ .pf{position:relative} .pf-list{border-top:1px solid var(--rule)} .pf-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(12px,3vw,44px);align-items:center; padding:clamp(18px,2.6vw,34px) 0;border-bottom:1px solid var(--rule);text-decoration:none;position:relative;transition:padding-left .45s var(--ease)} .pf-item:hover{padding-left:22px} .pf-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pine-soft);z-index:-1;transition:width .45s var(--ease)} .pf-item:hover::before{width:100%} .pf-item .n{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em} .pf-item .t{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3.6vw,52px);letter-spacing:-.015em;line-height:1.06;transition:color .35s} .pf-item:hover .t{color:var(--pine)} .pf-item .k{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);letter-spacing:.08em;text-align:right;white-space:nowrap} .pf-item .y{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em} .pf-peek{position:fixed;z-index:850;width:320px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-3deg); transition:opacity .3s var(--ease),transform .45s var(--ease);will-change:transform} .pf-peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--rot,-2deg))} .pf-peek .shot{border-radius:6px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 30px 60px -24px rgba(0,0,0,.45); aspect-ratio:16/10;position:relative;background:var(--graphite);display:none} .pf-peek .shot.on{display:block} .pf-peek .cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;text-align:center} .shot .mini{position:absolute;inset:0;font-size:2.6cqw} .shot{container-type:inline-size} .pf-note{display:flex;gap:14px;align-items:center;padding-top:22px;color:var(--ink-3)} /* ============================== PROCESS ============================== */ .proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden} .proc article{background:var(--paper);padding:clamp(20px,2.4vw,34px)} .proc .st{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--pine);margin-bottom:16px;display:block} .proc h4{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;margin:0 0 8px} .proc p{font-size:14.5px;color:var(--ink-2)} /* ============================== STACK ============================== */ .stackwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3vw,54px)} .stackwall section h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule)} .stackwall ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px} .stackwall li{font-family:var(--font-body);font-size:clamp(17px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--ink-2);transition:color .2s,transform .2s;cursor:default} .stackwall li:hover{color:var(--pine);transform:translateY(-2px)} /* ============================== ABOUT ============================== */ .about{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:clamp(24px,4vw,72px);align-items:start} .photo{aspect-ratio:4/5;max-width:420px;border:1px solid var(--rule);border-radius:4px;background: repeating-linear-gradient(135deg,var(--paper-sunk) 0 10px,var(--paper) 10px 20px); display:grid;place-items:center;position:relative} .photo .ph-lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;background:var(--paper);padding:6px 10px;border:1px solid var(--rule)} .photo::before,.photo::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--ink-3);opacity:.5} .photo::before{top:8px;left:8px;border-right:0;border-bottom:0} .photo::after{bottom:8px;right:8px;border-left:0;border-top:0} .about-txt p{font-size:clamp(17px,1.55vw,21px);color:var(--ink);line-height:1.6;max-width:60ch} .about-txt p + p{margin-top:18px;color:var(--ink-2)} .facts{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px;padding-top:20px;border-top:1px solid var(--rule)} .facts div b{display:block;font-family:var(--font-display);font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .facts div span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} /* ============================== CONTACT ============================== */ .cta{padding-block:clamp(70px,9vw,140px) 60px;border-top:1px solid var(--rule)} .cta .big{display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(22px,5.6vw,88px);line-height:.92;text-decoration:none;color:var(--ink);word-break:break-word;transition:color .3s} .cta .big:hover{color:var(--pine)} .cta-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(34px,4vw,60px);align-items:start} .form{display:flex;flex-direction:column;gap:14px} .field{position:relative;border-bottom:1px solid var(--rule);padding-top:18px} .field label{position:absolute;top:18px;left:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);transition:.25s var(--ease);pointer-events:none} .field input,.field textarea{width:100%;background:none;border:0;padding:6px 0 10px;font-family:var(--font-body);font-size:16px;color:var(--ink);resize:vertical} .field input:focus,.field textarea:focus{outline:0} .field:focus-within{border-color:var(--pine)} .field:focus-within label,.field.filled label{top:0;font-size:9.5px;color:var(--pine)} .btn{align-self:flex-start;margin-top:8px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:99px; padding:13px 26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease);text-decoration:none;display:inline-block} .btn:hover{background:var(--pine);border-color:var(--pine);color:#fff} .btn.ghost{background:none;color:var(--ink)} .btn.ghost:hover{color:#fff} .formnote{font-size:13px;color:var(--ink-3);min-height:20px} .contacts{display:flex;flex-direction:column;gap:2px} .contacts a{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .3s var(--ease)} .contacts a:hover{padding-left:10px} .contacts a b{font-size:17px;font-weight:600} .contacts a span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;align-self:center} footer{padding-block:26px 34px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center} footer .sp{flex:1} footer button{background:none;border:1px dashed var(--rule);border-radius:99px;padding:6px 13px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;transition:.2s} footer button:hover{border-color:var(--pine);color:var(--pine);border-style:solid} /* ============================== CURSOR ============================== */ .cur{position:fixed;z-index:9990;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--ink);pointer-events:none; transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s;mix-blend-mode:difference;opacity:0} .cur.vis{opacity:1} .cur.big{width:48px;height:48px} @media (hover:none),(pointer:coarse){.cur{display:none}} /* ============================== DEV MODE ============================== */ .devgrid{position:fixed;inset:0;z-index:8000;pointer-events:none;display:none} html.dev .devgrid{display:block} .devgrid .cols{position:absolute;inset:0;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut); display:grid;grid-template-columns:repeat(12,1fr);gap:20px} .devgrid .cols i{background:color-mix(in srgb,var(--live) 9%,transparent);border-left:1px solid color-mix(in srgb,var(--live) 26%,transparent);border-right:1px solid color-mix(in srgb,var(--live) 26%,transparent)} .devgrid .rows{position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--ink) 7%,transparent) 0 1px,transparent 1px 80px)} .devbadge{position:fixed;right:10px;bottom:10px;z-index:8001;display:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em; background:var(--ink);color:var(--paper);padding:7px 11px;border-radius:4px;line-height:1.5} html.dev .devbadge{display:block} html.dev .stage-vis,html.dev .stage-copy,html.dev section > .wrap > *{outline:1px dashed color-mix(in srgb,var(--live) 45%,transparent)} html.dev .device-lbl{display:block} .device-lbl{display:none;position:absolute;top:-22px;left:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--live);text-transform:uppercase} /* ============================== RESPONSIVE ============================== */ @media (max-width:1080px){ .stage-grid{grid-template-columns:1fr;gap:26px;align-content:center} .stage[data-side="left"] .stage-grid{grid-template-columns:1fr} .stage[data-side="left"] .stage-copy{order:0} .stage-copy{max-width:none} .stage-copy h3{font-size:clamp(22px,5vw,34px)} .stage-vis{min-height:auto} .hero-grid{grid-template-columns:1fr} .hero-side{max-width:none} .about{grid-template-columns:1fr} .photo{max-width:340px} .cta-row{grid-template-columns:1fr} .sechead{flex-wrap:wrap} .sechead p{margin-left:0;flex-basis:100%} .laptop-lid .screen{border-width:6px;border-bottom-width:10px} .monitor .screen{border-width:5px} .botstage{flex-direction:column;align-items:center} .botphone{width:clamp(140px,30vw,190px);margin:-16% 0 0 22%} } @media (max-width:720px){ body{font-size:16px} .navlinks{display:none} .stage-in{align-items:center;padding-block:40px} .tgw{grid-template-columns:1fr} .tgw-phone{width:clamp(150px,44vw,190px);margin-inline:auto} .apix{grid-template-columns:1fr} .api-hub-big{max-width:360px;margin-inline:auto} .stage-api .stage-copy{grid-template-columns:1fr} .stage-api .stage-copy .lede{grid-column:1;grid-row:auto} .ai-thread{min-height:0} .ai-m{max-width:92%}.ai-m.a{max-width:96%} .ai-cards{grid-template-columns:1fr 1fr} .phone-rise{width:min(62%,240px)} /* ширину несе .phone-rise, а не .phone */ .scr{font-size:3.4cqw} .pf-item{grid-template-columns:auto 1fr;row-gap:6px} .pf-item .k{grid-column:2;text-align:left} .pf-item .y{grid-column:2;grid-row:1;justify-self:end} .pf-peek{display:none} .term-body{font-size:10px;min-height:180px} .facts{gap:20px} .scrollhint{display:none} } /* ============================== REDUCED MOTION ============================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .stage-in{min-height:auto;padding-block:60px} .hero-schema .s-stroke{stroke-dashoffset:0} }