as the band's first child with seeded inline vars. Surfaces: cobalt · mist · paper · ink. Modifiers: shapes · route · dust · grid · calm · fade-top · fade-bottom. Only transform / opacity / stroke-dashoffset animate. No blur filters (pre-soft radial gradients instead). Motion only with JS on + motion allowed, and only while the band is near the viewport (.fx-run from 11-fx.js). Reduced motion or no JS: the same elements, still, in a finished composition. Knobs on the band: --fx-o (intensity 0–1) · --fx-rt-h (route box height) · --fx-fade (seam fade length). */ :where([data-fx]){position:relative;isolation:isolate} .fx{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;contain:paint;opacity:var(--fx-o,1); /* defaults so nothing inherits stray values from the host */ --x:50%;--y:50%;--s:40;--d:30s;--dl:0s;--o:.4;--f:.45; /* the band's real side gutter: the page gutter, or the margin beside the 1240px .wrap on wide screens (resolved where used) */ --g:max(var(--gut,20px),(100% - 1240px)/2)} .fx i,.fx b,.fx s,.fx div,.fx svg{position:absolute;display:block;font-style:normal;text-decoration:none} /* seams: fade the layer out toward a neighbouring band of the same colour */ .fx-m-fade-top{-webkit-mask-image:linear-gradient(transparent,#000 var(--fx-fade,min(26%,280px)));mask-image:linear-gradient(transparent,#000 var(--fx-fade,min(26%,280px)))} .fx-m-fade-bottom{-webkit-mask-image:linear-gradient(#000 calc(100% - var(--fx-fade,min(26%,280px))),transparent);mask-image:linear-gradient(#000 calc(100% - var(--fx-fade,min(26%,280px))),transparent)} .fx-m-fade-top.fx-m-fade-bottom{-webkit-mask-image:linear-gradient(transparent,#000 var(--fx-fade,min(26%,280px)),#000 calc(100% - var(--fx-fade,min(26%,280px))),transparent);mask-image:linear-gradient(transparent,#000 var(--fx-fade,min(26%,280px)),#000 calc(100% - var(--fx-fade,min(26%,280px))),transparent)} /* ---------- 1. auras / tinted blobs: a wide orbit + slow breathing (pre-soft gradients) ---------- the orbit origin (50% + ox, 50% + oy of the blob, ox/oy = ±.24–.34) is placed on the seeded spot (--x, --y), so the blob circles the spot */ .fx-au{--w:clamp(300px,calc(var(--s)*1vmax),1150px);left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;border-radius:50%; margin:calc(var(--w)*(-.5 - var(--oy,.3))) 0 0 calc(var(--w)*(-.5 - var(--ox,.3)));transform-origin:calc(50% + var(--ox,.3)*100%) calc(50% + var(--oy,.3)*100%)} /* peak alphas are contrast budgets: with every peak stacked on one spot the site's own body text stays AA (cobalt: 86 % white lead 4.58:1 · mist: --muted 4.65:1 · paper: --muted 5.3:1 · ink: #B9C0DE lead 5.5:1). Cobalt: a faint static navy veil under the copy zone (left, mid-height), so a light aura passing behind white copy gives back only what the veil added; the rest of the band keeps its own brand cobalt. Card bands are mostly copy (the contact card's lead has 4.53:1 with no layer at all), so there the veil stays flat. */ .fx-cobalt{background:radial-gradient(ellipse 70% 80% at 28% 52%,rgba(7,11,82,.12),rgba(7,11,82,0) 70%)} .fx-cobalt.fx-card{background:rgba(7,11,82,.12)} .fx-cobalt .fx-au1{background:radial-gradient(closest-side,rgba(140,158,255,.13),rgba(140,158,255,.055) 48%,rgba(140,158,255,0))} .fx-cobalt .fx-au2{background:radial-gradient(closest-side,rgba(124,110,255,.09),rgba(124,110,255,.035) 50%,rgba(124,110,255,0))} .fx-ink .fx-au1{background:radial-gradient(closest-side,rgba(35,53,255,.35),rgba(35,53,255,.14) 50%,rgba(35,53,255,0))} .fx-ink .fx-au2{background:radial-gradient(closest-side,rgba(92,150,255,.12),rgba(92,150,255,.05) 50%,rgba(92,150,255,0))} /* light surfaces: same peaks, a steady fall-off with no plateau that ends at 85 %, so the drift shows as the blob travels */ .fx-mist .fx-au1{background:radial-gradient(closest-side,rgba(35,53,255,.08),rgba(35,53,255,.053) 30%,rgba(35,53,255,.018) 62%,rgba(35,53,255,0) 85%)} .fx-mist .fx-au2{background:radial-gradient(closest-side,rgba(64,170,255,.1),rgba(64,170,255,.066) 30%,rgba(64,170,255,.022) 62%,rgba(64,170,255,0) 85%)} .fx-mist .fx-au3{background:radial-gradient(closest-side,rgba(134,96,255,.06),rgba(134,96,255,.04) 30%,rgba(134,96,255,.013) 62%,rgba(134,96,255,0) 85%)} .fx-paper .fx-au1{background:radial-gradient(closest-side,rgba(35,53,255,.09),rgba(35,53,255,.06) 30%,rgba(35,53,255,.02) 62%,rgba(35,53,255,0) 85%)} /* ---------- 2. grid: lines on dark, fine dots on light, under a radial mask (static) ---------- */ .fx-gr{inset:0;-webkit-mask-image:radial-gradient(ellipse 72% 82% at var(--gx,70%) var(--gy,0%),#000,transparent 72%);mask-image:radial-gradient(ellipse 72% 82% at var(--gx,70%) var(--gy,0%),#000,transparent 72%)} .fx-cobalt .fx-gr,.fx-ink .fx-gr{background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 50% 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 50% 0/72px 72px} .fx-mist .fx-gr,.fx-paper .fx-gr{background:radial-gradient(circle,rgba(35,53,255,.2) 1.2px,transparent 1.7px) 50% 0/24px 24px} /* ---------- 3. light sweep: the outer window travels, the inner grid counter-travels (net zero), so only the light moves. Still (reduced motion / no JS): the window rests right of centre, away from the usual copy column. ---------- */ .fx-sw{inset:0;transform:translate3d(24%,0,0);-webkit-mask-image:linear-gradient(var(--sa,104deg),transparent 30%,#000 50%,transparent 70%);mask-image:linear-gradient(var(--sa,104deg),transparent 30%,#000 50%,transparent 70%)} .fx-sw>i{inset:0;transform:translate3d(-24%,0,0);-webkit-mask-image:radial-gradient(ellipse 95% 100% at var(--gx,70%) var(--gy,0%),#000 20%,transparent 82%);mask-image:radial-gradient(ellipse 95% 100% at var(--gx,70%) var(--gy,0%),#000 20%,transparent 82%)} .fx-cobalt .fx-sw>i,.fx-ink .fx-sw>i{background:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px) 50% 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px) 50% 0/72px 72px,rgba(255,255,255,.03)} .fx-mist .fx-sw>i,.fx-paper .fx-sw>i{background:radial-gradient(circle,rgba(35,53,255,.46) 1.2px,transparent 1.7px) 50% 0/24px 24px,rgba(35,53,255,.02)} /* ---------- 4. route: a ground line along the band's bottom edge (a flat box in the bottom padding, under the last row), a wide soft road + thin flowing dashes (screen-px dashes via non-scaling-stroke) + a stop dot in the right gutter. --fx-rt-h on the band sets the box height (match your bottom padding). ---------- */ .fx-rt{left:0;right:0;top:auto;bottom:0;height:var(--fx-rt-h,clamp(64px,7vw,110px))} .fx-card .fx-rt{height:var(--fx-rt-h,48px)} /* dark bands: the middle of the road stays faint, so it never reads through glass cards; the ends and the stop dot stay clear */ .fx-cobalt .fx-rt,.fx-ink .fx-rt{-webkit-mask-image:linear-gradient(90deg,#000 0 6%,rgba(0,0,0,.25) 14% 86%,#000 94%);mask-image:linear-gradient(90deg,#000 0 6%,rgba(0,0,0,.25) 14% 86%,#000 94%)} .fx-rt svg{inset:0;width:100%;height:100%;overflow:visible} .fx-rt path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round} .fx-rt-h{stroke-width:34px;stroke:rgba(255,255,255,.03)} .fx-rt-d{stroke-width:1.6px;stroke:rgba(255,255,255,.44);stroke-dasharray:10 14} .fx-pin{left:var(--px);top:var(--py);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.16)} .fx-pin b{inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);transform:scale(2.2);opacity:.3} .fx-mist .fx-rt-h,.fx-paper .fx-rt-h{stroke:rgba(35,53,255,.04)} .fx-mist .fx-rt-d,.fx-paper .fx-rt-d{stroke:rgba(35,53,255,.4)} .fx-mist .fx-pin,.fx-paper .fx-pin{background:var(--cobalt);box-shadow:0 0 0 3px #fff,0 0 0 8px rgba(35,53,255,.12)} .fx-mist .fx-pin b,.fx-paper .fx-pin b{box-shadow:inset 0 0 0 1.5px rgba(35,53,255,.5)} /* ---------- 5. levitating shapes (the hero family: orb, pearl, bubble, capsule, far sphere), kept to the band edges ---------- */ .fx-lv{left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;translate:-50% -50%} .fx-lv b{inset:0;border-radius:50%} .fx-lv-orb b{background: radial-gradient(circle at 34% 27%,rgba(255,255,255,.95) 0,rgba(255,255,255,.5) 7%,rgba(255,255,255,0) 23%), radial-gradient(circle at 70% 84%,rgba(150,168,255,.9) 0,rgba(150,168,255,0) 44%), radial-gradient(circle at 40% 36%,#6D7BFF 0,#3444FF 34%,#1624C8 68%,#0A1172 100%); box-shadow:0 20px 34px -16px rgba(2,4,40,.7)} .fx-lv-pearl b{background:radial-gradient(circle at 34% 28%,#fff 0,#F3F5FF 15%,#C8CFFF 47%,#8391F2 78%,#5968DC 100%);box-shadow:0 14px 24px -12px rgba(2,4,40,.6)} /* glass bubble (the hero recipe): fine rim, top-left highlight, a soft caustic at the bottom, soft shadow */ .fx-lv-bub b{background: radial-gradient(circle at 31% 25%,rgba(255,255,255,.92) 0,rgba(255,255,255,.24) 10%,rgba(255,255,255,0) 22%), radial-gradient(ellipse 46% 22% at 56% 86%,rgba(214,222,255,.5),rgba(214,222,255,0) 100%), radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 54%,rgba(190,202,255,.16) 76%,rgba(255,255,255,.5) 98%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 18px 30px -18px rgba(2,4,40,.5)} .fx-lv-pill{aspect-ratio:2.5/1;rotate:-28deg} .fx-lv-pill b{border-radius:999px;background: radial-gradient(ellipse 58% 38% at 42% 24%,rgba(255,255,255,.8),rgba(255,255,255,0) 72%), linear-gradient(180deg,#6573FF 0,#2B3CFF 46%,#111C9E 100%); box-shadow:inset 0 -5px 12px rgba(4,8,70,.45),0 18px 30px -14px rgba(2,4,40,.65)} /* far, out-of-focus sphere (the hero recipe: saturated cobalt light fading out with no plateau, never a grey disc; no filter) */ .fx-lv-far b{background:radial-gradient(circle at 40% 36%,rgba(122,142,255,.5) 0,rgba(84,104,255,.3) 22%,rgba(62,82,255,.13) 44%,rgba(62,82,255,.04) 60%,rgba(62,82,255,0) 70%)} /* light surfaces: softer shadows, glass tinted cobalt so it reads on white */ :is(.fx-mist,.fx-paper) .fx-lv-orb b{box-shadow:0 18px 30px -14px rgba(35,53,255,.45)} :is(.fx-mist,.fx-paper) .fx-lv-pearl b{background:radial-gradient(circle at 34% 28%,#fff 0,#F6F7FF 16%,#D5DBFF 50%,#A3AEF5 80%,#7F8CEB 100%);box-shadow:0 12px 22px -10px rgba(35,53,255,.35)} :is(.fx-mist,.fx-paper) .fx-lv-bub b{background: radial-gradient(circle at 31% 25%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 12%,rgba(255,255,255,0) 26%), radial-gradient(ellipse 46% 22% at 56% 86%,rgba(255,255,255,.55),rgba(255,255,255,0) 100%), radial-gradient(circle at 50% 50%,rgba(236,238,255,.35) 0,rgba(35,53,255,.04) 52%,rgba(35,53,255,.12) 76%,rgba(35,53,255,.3) 100%); box-shadow:inset 0 0 0 1px rgba(35,53,255,.14),0 14px 26px -14px rgba(35,53,255,.3)} :is(.fx-mist,.fx-paper) .fx-lv-pill b{box-shadow:inset 0 -5px 12px rgba(4,8,70,.35),0 16px 26px -14px rgba(35,53,255,.45)} /* card bands (the host is a

): shapes float in the middle of the card's side padding (--pad; set --fx-pad on the card to its own side padding) and fit inside it, so neither the card's radius nor its content ever cuts them */ .fx-card{--pad:var(--fx-pad,clamp(24px,3.2%,48px))} .fx-card .fx-lv{width:min(var(--s),52px,calc(var(--pad)*.8))} .fx-card .fx-lv-pill{width:min(var(--s),68px,calc(var(--pad)*.85))} /* below 1300px the gutter is too narrow for the big far sphere, so it steps out (as in the hero on phones) */ @media (max-width:1300px){.fx .fx-lv-far{display:none}} /* ---------- 6. paper / mist: tiny floating cobalt dots, always inside the real side gutter (--g × --f) ---------- */ .fx-dt{left:calc(var(--g)*var(--f) - var(--s)/2);top:var(--y);width:var(--s);aspect-ratio:1;border-radius:50%;background:var(--cobalt);opacity:var(--o)} .fx-dt.fx-r{left:auto;right:calc(var(--g)*var(--f) - var(--s)/2)} .fx-dt.fx-ring{background:none;box-shadow:inset 0 0 0 1.5px var(--cobalt)} /* ---------- 7. rising light dust ---------- */ .fx-du{inset:0} .fx-du i{left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;border-radius:50%;opacity:var(--o);background:radial-gradient(circle,#fff 0,rgba(255,255,255,.65) 38%,rgba(255,255,255,0) 72%)} :is(.fx-mist,.fx-paper) .fx-du i{background:radial-gradient(circle,rgba(35,53,255,.95) 0,rgba(35,53,255,.55) 40%,rgba(35,53,255,0) 72%)} /* still (reduced motion / no JS): a dust point would sit behind a glyph for good, so still dust shows only in the side gutters */ html:not(.js) .fx-du{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--g)*.6),transparent var(--g),transparent calc(100% - var(--g)),#000 calc(100% - var(--g)*.6));mask-image:linear-gradient(90deg,#000 calc(var(--g)*.6),transparent var(--g),transparent calc(100% - var(--g)),#000 calc(100% - var(--g)*.6))} @media (prefers-reduced-motion:reduce) and (max-width:760px){.fx .fx-du{display:none}} @media (prefers-reduced-motion:reduce){ .fx-du{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--g)*.6),transparent var(--g),transparent calc(100% - var(--g)),#000 calc(100% - var(--g)*.6));mask-image:linear-gradient(90deg,#000 calc(var(--g)*.6),transparent var(--g),transparent calc(100% - var(--g)),#000 calc(100% - var(--g)*.6))} } /* ---------- phones: fewer and smaller elements, nothing in the text column ---------- */ @media (max-width:760px){ .fx .fx-d{display:none} .fx-au{--w:clamp(260px,calc(var(--s)*.9vmax),760px)} /* the two shapes that stay sit fully inside the band, in its bottom padding (seeded --xm / --bm), never half cut at the edge */ .fx-lv{width:calc(var(--s)*.85);left:var(--xm,var(--x));top:auto;bottom:var(--bm,auto);translate:-50% 50%} .fx-card .fx-lv{display:none} /* the route: a flat ground line in the band's bottom padding, 12px off the edge; the stop dot sits on the curve at x 92 % (seeded --pym), so its ring stays whole, clear of the screen edge and of a rounded bottom corner */ .fx-rt{bottom:12px;height:var(--fx-rt-h,44px)} .fx-rt-h{stroke-width:22px} .fx-pin{left:92%;top:var(--pym,var(--py))} .fx-cobalt .fx-rt,.fx-ink .fx-rt{-webkit-mask-image:linear-gradient(90deg,#000 0 6%,rgba(0,0,0,.25) 14% 80%,#000 88%);mask-image:linear-gradient(90deg,#000 0 6%,rgba(0,0,0,.25) 14% 80%,#000 88%)} /* the grid and the lit grid of the sweep live in the top padding only (never behind headings and leads, and never a bottom strip stacked on the next band's top strip at a seam) */ .fx-gr,.fx-sw>i{-webkit-mask-image:linear-gradient(#000,transparent 72px);mask-image:linear-gradient(#000,transparent 72px)} /* the side gutter is only 20px here: gutter dots (and still dust, which is masked to the gutters) would sit next to the first letter of the copy, so they step out */ .fx .fx-dt,html:not(.js) .fx .fx-du{display:none} /* tall narrow bands: an upright light window, so it always leaves the band completely */ .fx-sw{-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%);mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%)} } /* ---------- motion: JS on + motion allowed; paused unless the band is near the viewport (.fx-run) ---------- */ @media (prefers-reduced-motion:no-preference){ html.js .fx-au{animation:fxOrbit var(--d) linear var(--dl) infinite,fxBreath var(--bd,18s) ease-in-out var(--bl,0s) infinite} html.js .fx-au.fx-rev{animation-direction:reverse,normal} /* the window and the counter-moving grid share one timing function, so their sum stays exactly zero */ html.js .fx-sw{animation:fxSweep var(--d) cubic-bezier(.4,0,.6,1) var(--dl) infinite} html.js .fx-sw>i{animation:fxSweepIn var(--d) cubic-bezier(.4,0,.6,1) var(--dl) infinite} /* 240 one-pixel steps: the dashes flow smoothly at ~10px/s but the SVG repaints ~10×/s instead of every frame */ html.js .fx-rt-d{animation:fxDash var(--d) steps(240) infinite} html.js .fx-rt.fx-rev .fx-rt-d{animation-direction:reverse} html.js .fx-pin b{animation:fxPulse var(--d) ease-out var(--dl) infinite} html.js .fx-lv b{animation:fxFloat var(--d) ease-in-out var(--dl) infinite} html.js .fx-dt{animation:fxBob var(--d) ease-in-out var(--dl) infinite alternate} html.js .fx-du i{animation:fxRise var(--d) linear var(--dl) infinite} html.js [data-fx]:not(.fx-run)>.fx *{animation-play-state:paused!important} } @keyframes fxOrbit{to{rotate:360deg}} @keyframes fxBreath{50%{scale:var(--bs,1.1)}} /* one pass in the first 45 % of the cycle, then a rest outside the band. ±120%: the slanted window is fully outside the band at both ends, even on tall bands, so the loop reset is never seen */ @keyframes fxSweep{0%{transform:translate3d(-120%,0,0)}45%,100%{transform:translate3d(120%,0,0)}} @keyframes fxSweepIn{0%{transform:translate3d(120%,0,0)}45%,100%{transform:translate3d(-120%,0,0)}} @keyframes fxDash{to{stroke-dashoffset:-240}} @keyframes fxPulse{0%,50%{opacity:0;transform:scale(1)}6%,56%{opacity:.7}36%,86%,100%{opacity:0;transform:scale(3)}} @keyframes fxFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(var(--mx,0px),var(--my,-14px),0) rotate(var(--mr,0deg))}} @keyframes fxBob{to{transform:translate3d(var(--dx,0px),var(--dy,-12px),0)}} @keyframes fxRise{0%{opacity:0;transform:translate3d(0,0,0)}16%,78%{opacity:var(--o)}100%{opacity:0;transform:translate3d(var(--dx,0px),var(--dy,-22vh),0)}} /* ==== 04-stage.css ==== */ /* WhiteWays · „Кино“ stage (owner: lead, 2026-09-27) One continuous dark stage under every page: a fixed backdrop whose colour grade changes scene by scene (html[data-tone] set by 12-stage.js), a static film grain, and the scene system: .scene > .scn-head + .scn-stage, with .sq children that play in sequence once the scene (or a [data-play] group) enters the screen. Sections below the hero have NO background of their own: the stage is the background. Contract: _tools/CINEMA-BRIEF.md */ @property --st-base{syntax:'';inherits:true;initial-value:#0B1478} @property --st-a{syntax:'';inherits:true;initial-value:#2E45FF} @property --st-b{syntax:'';inherits:true;initial-value:#5B7CFF} @property --st-ax{syntax:'';inherits:true;initial-value:18} @property --st-ay{syntax:'';inherits:true;initial-value:20} @property --st-bx{syntax:'';inherits:true;initial-value:82} @property --st-by{syntax:'';inherits:true;initial-value:78} :root{ --on:#fff; /* headings on the stage */ --on-2:#D3D9FA; /* body text on the stage (AA on every tone) */ --on-3:#A9B2E6; /* small labels, 16px+ only */ --hair:rgba(255,255,255,.12); --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.1); --sq-gap:.16s; } html{--st-base:#0B1478;--st-a:#2E45FF;--st-b:#5B7CFF;--st-ax:18;--st-ay:20;--st-bx:82;--st-by:78} /* perf 2026-09-30: the grade changes instantly on and glides only where it is drawn. A transition on made every element on the page restyle every frame for 2.4 s at each scene change (the main cause of the scroll lag). The fixed stage and the few chrome parts that take the grade (header capsule, back-to-top, rail, /uslugi nodes) run the same transition on their own small subtrees, so the look is unchanged. */ .stage{transition:--st-base 1.6s var(--ease),--st-a 1.6s var(--ease),--st-b 1.6s var(--ease),--st-ax 2.4s var(--ease),--st-ay 2.4s var(--ease),--st-bx 2.4s var(--ease),--st-by 2.4s var(--ease)} .us-node i{transition:--st-base 1.6s var(--ease)} /* colour grades, in story order (a scene picks one with data-tone) */ html[data-tone="cobalt"]{--st-base:#0B1478;--st-a:#2E45FF;--st-b:#5B7CFF;--st-ax:16;--st-ay:18;--st-bx:84;--st-by:80} html[data-tone="indigo"]{--st-base:#0C1060;--st-a:#3B35F0;--st-b:#7A5CFF;--st-ax:82;--st-ay:22;--st-bx:14;--st-by:76} html[data-tone="night"] {--st-base:#060A2E;--st-a:#1D2CD0;--st-b:#1560E8;--st-ax:24;--st-ay:70;--st-bx:80;--st-by:24} html[data-tone="ocean"] {--st-base:#041739;--st-a:#1560F0;--st-b:#1FA8EE;--st-ax:78;--st-ay:66;--st-bx:20;--st-by:26} html[data-tone="violet"]{--st-base:#130B45;--st-a:#5B3BF5;--st-b:#A94AE8;--st-ax:30;--st-ay:24;--st-bx:74;--st-by:74} html[data-tone="deep"] {--st-base:#040618;--st-a:#1A26B0;--st-b:#2335FF;--st-ax:50;--st-ay:88;--st-bx:88;--st-by:10} body{background:var(--st-base);color:var(--on)} .stage{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--st-base);contain:strict} .stage i{position:absolute;display:block;border-radius:50%;will-change:transform} .stage>div{position:absolute} .st-a,.st-b{width:110vmax;height:110vmax;left:-55vmax;top:-55vmax} .st-a{background:radial-gradient(closest-side,color-mix(in srgb,var(--st-a) 58%,transparent),color-mix(in srgb,var(--st-a) 18%,transparent) 55%,transparent 100%); transform:translate(calc(var(--st-ax) * 1vw),calc(var(--st-ay) * 1vh))} .st-b{width:90vmax;height:90vmax;left:-45vmax;top:-45vmax; background:radial-gradient(closest-side,color-mix(in srgb,var(--st-b) 42%,transparent),color-mix(in srgb,var(--st-b) 12%,transparent) 55%,transparent 100%); transform:translate(calc(var(--st-bx) * 1vw),calc(var(--st-by) * 1vh))} .st-drift{position:absolute;inset:-10%;animation:stDrift 48s ease-in-out infinite alternate} .st-drift.b{animation-duration:62s;animation-direction:alternate-reverse} @keyframes stDrift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3vw,-2vh,0) rotate(4deg)}100%{transform:translate3d(-2vw,3vh,0) rotate(-3deg)}} /* horizon light: a wide low glow that keeps the bottom of the screen from going flat */ .st-h{width:140vw;height:60vh;left:-20vw;bottom:-34vh;border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--st-a) 26%,transparent),transparent 100%)} .st-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(2,3,16,.55) 100%)} .st-grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,");background-size:160px 160px} /* ---------- scenes ---------- */ .scene{position:relative;padding-block:clamp(96px,11vw,176px);color:var(--on)} .scene.full{min-height:100vh;min-height:100svh;display:grid;align-content:center} .scene + .scene{padding-top:clamp(40px,6vw,96px)} .scn-head{max-width:860px;margin:0 auto clamp(44px,5.5vw,80px);text-align:center} .scn-head.l{margin-inline:0;text-align:left} .scn-kick{display:inline-flex;align-items:center;gap:14px;margin-bottom:24px;font:600 14px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--on-3)} .scn-kick b{display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:999px;font-weight:600;letter-spacing:0;color:#fff; background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .scn-title{font-size:clamp(38px,5.2vw,76px);line-height:1.02;letter-spacing:-.045em;font-weight:600;color:var(--on);text-wrap:balance} .scn-title em{font-style:normal;background:linear-gradient(95deg,#fff 10%,#AEB9FF 60%,#7F93FF);-webkit-background-clip:text;background-clip:text;color:transparent} .scn-line{margin:22px auto 0;max-width:46ch;font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--on-2);text-wrap:pretty} .scn-head.l .scn-line{margin-inline:0} .scn-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center} .scn-split.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} .scn-split.rev>.scn-head{order:2} .scn-split>.scn-head{margin:0;text-align:left} .scn-split>.scn-head .scn-line{margin-inline:0} .scn-stage{position:relative} .scn-foot{margin-top:clamp(36px,4vw,56px);display:flex;justify-content:center;gap:14px;flex-wrap:wrap} @media (max-width:900px){ .scn-split,.scn-split.rev{grid-template-columns:1fr;gap:40px} .scn-split.rev>.scn-head{order:0} } @media (max-width:760px){.scene{padding-block:84px}.scene + .scene{padding-top:24px}.scn-head{margin-bottom:36px}.scn-kick{margin-bottom:18px}} /* stage surfaces */ .gcard{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--hair);border-radius:28px; -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(222,231,255,.2),inset 0 -1px 0 rgba(5,9,35,.2),0 30px 80px -40px rgba(0,0,0,.6)} .scene .card{box-shadow:0 2px 6px rgba(0,0,0,.08),0 40px 90px -40px rgba(0,0,0,.7)} .btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0));color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px -14px #000} .btn-ghost:hover{background:rgba(255,255,255,.08)} .scene .lead,.scene p{color:inherit} .scene :focus-visible{outline-color:#fff} /* ---------- sequence: .sq plays when its scene (or its own [data-play] group) gets .play ---------- */ html.js .sq{opacity:0} html.js .play .sq{animation:sqUp .95s var(--ease) both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap))} html.js .play .scn-head .sq,html.js .play .scn-head>*{animation-duration:1.05s} html.js .play .sq.sq-pop{animation-name:sqPop;animation-timing-function:cubic-bezier(.3,1.5,.5,1)} html.js .play .sq.sq-fade{animation-name:sqFade} html.js .play .sq.sq-l{animation-name:sqL} html.js .play .sq.sq-r{animation-name:sqR} html.js .play .sq.sq-down{animation-name:sqDown} html.js .play .sq.sq-zoom{animation-name:sqZoom;animation-duration:1.6s} html.js .play .sq.sq-gy{animation-name:sqGy;transform-origin:50% 100%} html.js .play .sq.sq-gx{animation-name:sqGx;transform-origin:0 50%} html.js .play .sq.sq-title{animation-name:sqTitle;animation-duration:1.2s} html.js .sq.sq-draw{opacity:1;stroke-dasharray:1;stroke-dashoffset:1} html.js .play .sq.sq-draw{animation-name:sqDraw;animation-duration:1.8s;animation-timing-function:cubic-bezier(.45,0,.2,1)} html.js [data-play]:not(.play) .sq{animation:none!important} html.js [data-play]:not(.play) .sq.sq-draw{stroke-dashoffset:1} @keyframes sqUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} @keyframes sqDown{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}} @keyframes sqFade{from{opacity:0}to{opacity:1}} @keyframes sqPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} @keyframes sqL{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}} @keyframes sqR{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}} @keyframes sqZoom{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}} @keyframes sqGy{from{opacity:.001;transform:scaleY(0)}to{opacity:1;transform:none}} @keyframes sqGx{from{opacity:.001;transform:scaleX(0)}to{opacity:1;transform:none}} @keyframes sqTitle{from{opacity:0;transform:translateY(.45em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}} @keyframes sqDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} /* ---------- chapter rail (desktop): built by 12-stage.js from the page's .scene[data-chapter] ---------- */ .rail{position:fixed;left:clamp(14px,1.6vw,30px);top:50%;z-index:40;display:none;transform:translateY(-50%);opacity:0;transition:opacity .5s var(--ease),--st-base 1.6s var(--ease)} .rail.on{opacity:1} .rail ol{position:relative;display:flex;flex-direction:column;gap:22px;padding:6px 0} .rail ol::before,.rail ol::after{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;margin-left:-1px;border-radius:2px;background:rgba(255,255,255,.14)} .rail ol::after{background:linear-gradient(#fff,#9FB0FF);transform-origin:50% 0;transform:scaleY(var(--rp,0))} .rail a{position:relative;z-index:1;display:flex;align-items:center;gap:14px;height:12px;color:#fff} .rail a i{width:12px;height:12px;border-radius:50%;background:var(--st-base);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);transition:transform .4s var(--ease),background-color .4s,box-shadow .4s} .rail a.done i{background:#fff;box-shadow:none} .rail a.cur i{background:#fff;transform:scale(1.35);box-shadow:0 0 0 6px rgba(255,255,255,.14)} .rail a span{font:600 13px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease); padding:7px 10px;border-radius:10px;background:rgba(6,9,40,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .rail a:hover span,.rail a:focus-visible span,.rail a.cur span{opacity:1;transform:none} .rail a.cur span{opacity:.0} .rail:hover a.cur span{opacity:1} @media (min-width:1280px){.rail{display:block}} @media (prefers-reduced-motion:reduce){ .st-drift{animation:none} html.js .sq{opacity:1!important;animation:none!important;transform:none!important;clip-path:none!important} html.js .sq.sq-draw{stroke-dashoffset:0!important} } /* ==== 20-hero.css ==== */ /* ==== home hero (owner: hero agent) · one full screen: cobalt band, centred copy, 3D laptop with a live dashboard, cards on one route ==== The hero is exactly one screen tall (100svh). The copy takes what it needs, the scene (.hs) takes the rest and the scene box (.hs-in) scales to fit that space both ways, so the laptop is always whole and centred. Everything in the scene is sized in cqw of .hs-in, so the static route lines up with the cards at every size. The dashboard inside the screen sizes itself in cqw of the screen (.hs-view) and switches to a big-type variant when the screen is small (phones). The copy is plain HTML/CSS (visible at once, LCP). The scene and the background are aria-hidden; the intro is pure CSS with delays (--t) and only runs with JS on and motion allowed. 21-hero.js adds the live loop (a light travels the route card by card, the dashboard counts the visit and the reservation). Without JS or with reduced motion everything sits still in its final state. The background is a still picture (auras, rings, a floor grid with the dashed lane, light beams, points of light, glass shapes). The laptop stands still after its intro; a card moves only when the pointer comes close to it (21-hero.js). */ .hero{position:relative;isolation:isolate;overflow:clip;color:#fff;background:var(--night);display:flex;flex-direction:column;height:100vh;height:100svh;min-height:540px;padding:var(--hdr) 0 clamp(12px,2.4vh,32px)} /* 2026-09-27 „Кино“: the hero has no card edge any more; its background fades into the dark stage below (04-stage.css) */ .hero{background:transparent} .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;contain:paint;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent); background: radial-gradient(ellipse 55% 42% at 50% 66%,rgba(126,146,255,.46),transparent 70%), radial-gradient(ellipse 60% 45% at 30% 0%,rgba(98,118,255,.65),transparent 70%), linear-gradient(180deg,#2131F6 0%,#1826D2 34%,#0F1898 68%,#080D5C 100%)} .hb-aura{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none} .hb-a1{left:-22%;top:-38%;width:72vmax;background:radial-gradient(closest-side,rgba(132,150,255,.4),rgba(132,150,255,0))} .hb-a2{right:-26%;bottom:-44%;width:66vmax;background:radial-gradient(closest-side,rgba(92,196,255,.2),rgba(92,196,255,0))} .hb-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:72px 72px;background-position:50% 0;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.4) 34%,transparent 56%);mask-image:linear-gradient(#000,rgba(0,0,0,.4) 34%,transparent 56%)} .hb-glow{position:absolute;left:50%;top:48%;width:min(1200px,130vw);aspect-ratio:2/1;translate:-50% 0;background:radial-gradient(closest-side,rgba(160,176,255,.3),transparent);pointer-events:none} /* A still orbital contour ties the floating cards to the laptop. */ .hero-bg::after{content:"";position:absolute;left:50%;top:45%;width:94%;height:45%;border-radius:50%; transform:translateX(-50%) rotate(-9deg);border:1px solid rgba(190,211,255,.28); box-shadow:0 1px 0 rgba(255,255,255,.18),0 12px 36px -20px rgba(119,166,255,.8),inset 0 -14px 32px -28px #C9D9FF; mask-image:linear-gradient(120deg,transparent 8%,#000 30%,transparent 54%,#000 82%,transparent);pointer-events:none} @media (max-width:699px){.hero-bg::after{top:48%;width:132%;height:34%;opacity:.55}} /* rings of light centred behind the laptop: fine concentric lines that fade out toward the edges, one brighter ring */ .hb-halo{position:absolute;left:50%;top:64%;width:max(1500px,150vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%; background:repeating-radial-gradient(circle,rgba(200,210,255,0) 0 calc(4.2% - 1px),rgba(200,210,255,.13) calc(4.2% - 1px) 4.2%); -webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.55) 30%,transparent 62%);mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.55) 30%,transparent 62%)} .hb-ring{position:absolute;left:50%;top:64%;width:min(1180px,118vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(214,222,255,.3),0 0 60px -10px rgba(150,168,255,.45),inset 0 0 90px -30px rgba(150,168,255,.4); -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 38%,transparent 60%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 38%,transparent 60%)} /* the floor: a grid in perspective under the scene, and the brand's dashed lane running into it */ .hb-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:34%;transform:perspective(560px) rotateX(58deg);transform-origin:50% 100%; background-image:linear-gradient(rgba(210,218,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(210,218,255,.3) 1px,transparent 1px);background-size:96px 96px;background-position:50% 100%; -webkit-mask-image:radial-gradient(ellipse 60% 100% at 50% 100%,#000 30%,rgba(0,0,0,.5) 65%,transparent 95%);mask-image:radial-gradient(ellipse 60% 100% at 50% 100%,#000 30%,rgba(0,0,0,.5) 65%,transparent 95%)} .hb-lane{position:absolute;left:50%;top:0;bottom:0;width:10px;translate:-50% 0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.75) 0 38px,transparent 38px 76px);-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)} /* light beams: a fan of soft shafts hung from one point above the copy. The vertical mask keeps them faint behind the copy (text contrast unchanged) and full around the laptop. Pre-soft gradients, nothing moves. */ .hb-rays{position:absolute;left:0;right:0;top:-10%;height:112%;transform-origin:50% 0} .hb-rays i{position:absolute;left:50%;top:0;height:100%;width:var(--w);min-width:56px;translate:-50% 0;rotate:var(--r);transform-origin:50% 0;opacity:var(--o); background:linear-gradient(90deg,rgba(196,208,255,0),rgba(196,208,255,.17) 50%,rgba(196,208,255,0)); -webkit-mask-image:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.28) 32%,#000 56%,rgba(0,0,0,.45) 80%,transparent 97%);mask-image:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.28) 32%,#000 56%,rgba(0,0,0,.45) 80%,transparent 97%)} /* points of light */ .hb-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.65) 38%,rgba(255,255,255,0) 72%);opacity:var(--o)} /* ---------- holographic line drawings (still, inline SVG, 1px strokes at every size) ---------- Both sit beside the headline, never behind it, and end above the scene, never on a card. Width: the room left between the band edge and the headline (the headline is about 10.6 font-sizes wide). Height (--ah): the band from just under the nav to 28px above the top of the scene (copy padding + the two headline lines + the scene's top margin), so the cards below always keep clear of it. --asp is each drawing's width/height; a drawing limited by its width is centred in that band. */ .hb-art{--hf:clamp(34px,min(5.3vw,8vh),82px);--room:calc(50vw - 5.45*var(--hf) - 1.6vw); --ah:calc(clamp(14px,3.4vh,52px) + 2.08*var(--hf) + clamp(10px,2.6vh,34px) - 36px); --aw:clamp(0px,min(var(--room) - 28px,var(--ah)*var(--asp),460px),460px); position:absolute;top:calc(var(--hdr) + 8px + (var(--ah) - var(--aw)/var(--asp))/2);width:var(--aw);pointer-events:none} .hb-art-l{--asp:1.497;left:max(14px,(var(--room) - var(--aw))/2)} .hb-art-r{--asp:1.754;right:max(14px,(var(--room) - var(--aw))/2)} .hb-art svg{display:block;width:100%;height:auto;overflow:visible} .hb-art svg *{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} /* the leaders: one faint dashed line from each drawing down to its card (the real place to the map, the world to the post). Drawn once per layout by 21-hero.js, still. */ .hb-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .hb-lead path{fill:none;stroke:rgba(214,222,255,.5);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round} .hb-lead circle{fill:#fff;opacity:.85} .hb-lead .hl-o{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1} .hb-lead circle:not([cx]),.hb-lead path:not([d]){display:none} /* the bistro: lit faces in pale cobalt, edges in fine light lines, glass windows, the brand's dashed lane on the street */ .hb-iso path,.hb-iso circle{stroke:rgba(214,222,255,.62);stroke-width:1;fill:none} .hb-iso .ab-sh{stroke:none;fill:rgba(4,8,70,.22)} .hb-iso .ab-top{fill:rgba(201,210,255,.085)} .hb-iso .ab-l{fill:rgba(143,160,255,.09)} .hb-iso .ab-r{fill:rgba(14,23,143,.22)} .hb-iso .ab-road2{stroke:none;fill:url(#abFade);fill-opacity:.32} .hb-iso .ab-ed{stroke:url(#abFade)} .hb-iso .ab-lane2{stroke:url(#abFade);stroke-width:1.6} .hb-iso .ab-grid{stroke:rgba(214,222,255,.14)} .hb-iso .ab-road{fill:rgba(11,18,51,.2);stroke:rgba(214,222,255,.3)} .hb-iso .ab-lane{stroke:#fff;stroke-width:1.6;stroke-opacity:.85} .hb-iso .ab-in{stroke:rgba(214,222,255,.38)} .hb-iso .ab-win{fill:rgba(201,210,255,.3);stroke:rgba(255,255,255,.72)} .hb-iso .ab-door{fill:rgba(255,255,255,.5);stroke:#fff} .hb-iso .ab-aw{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.85)} .hb-iso .ab-e2{stroke:rgba(214,222,255,.5)} .hb-iso .ab-e{stroke:rgba(214,222,255,.7)} .hb-iso .ab-sign{fill:rgba(255,255,255,.2);stroke:#fff} .hb-iso .ab-sdot{fill:#fff;stroke:none} .hb-iso .ab-tab{fill:rgba(255,255,255,.28)} .hb-iso .ab-par{fill:rgba(201,210,255,.2);stroke:rgba(255,255,255,.7)} .hb-iso .ab-tree{fill:rgba(143,160,255,.16)} .hb-iso .ab-lamp{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:5} .hb-iso .ab-ring{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.8)} .hb-iso .ab-ring2{stroke:rgba(255,255,255,.34);stroke-dasharray:2 4} .hb-iso .ab-beam{stroke:rgba(255,255,255,.7);stroke-dasharray:1.5 3} .hb-iso .ab-pin{fill:#fff;stroke:none} .hb-iso .ab-pdot{fill:#2335FF;stroke:none} .hb-iso .ab-node{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:4} /* the globe: a fine wireframe, a few linked cities, two orbits carrying the service points (back halves fainter) */ .hb-globe path,.hb-globe ellipse,.hb-globe circle{fill:none;stroke-width:1} .hb-globe .gl-ball{stroke:rgba(255,255,255,.78)} .hb-globe .gl-lat,.hb-globe .gl-mer{stroke:rgba(214,222,255,.34)} .hb-globe .gl-eq{stroke:rgba(214,222,255,.5)} .hb-globe .gl-orb{stroke:rgba(255,255,255,.62)} .hb-globe .gl-orb2{stroke:rgba(214,222,255,.45);stroke-dasharray:2 5} .hb-globe .gl-back{stroke-opacity:.3} .hb-globe .gl-arc{stroke:rgba(255,255,255,.7)} .hb-globe .gl-city{fill:#fff;stroke:none} .hb-globe .gl-hub{fill:#fff;stroke:rgba(255,255,255,.35);stroke-width:6} .hb-globe .gl-node{fill:rgba(14,23,143,.55);stroke:rgba(255,255,255,.75)} .hb-globe .gl-ic{stroke:#fff} /* ---------- two glass drops at the band edges (still): clear glass, a fine rim and one highlight, no gloss colour ---------- */ .lv{position:absolute;z-index:0;display:block;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;pointer-events:none;opacity:.6} .lv b{position:absolute;inset:0;display:block;border-radius:50%; background: radial-gradient(circle at 31% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.22) 10%,rgba(255,255,255,0) 22%), radial-gradient(ellipse 46% 22% at 56% 86%,rgba(214,222,255,.4),rgba(214,222,255,0) 100%), radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 56%,rgba(201,210,255,.12) 78%,rgba(255,255,255,.4) 98%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 16px 26px -18px rgba(2,4,40,.45)} /* ---------- copy ---------- */ .hero-in{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(14px,3.4vh,52px)} /* the headline alone: two lines, the second in a light gradient (the same one as the scene titles below) */ .hero-h{font-size:clamp(34px,min(5.3vw,8vh),82px);line-height:1;letter-spacing:-.05em;font-weight:600;text-wrap:balance;filter:drop-shadow(0 .08em .5em rgba(4,8,70,.32))} .hero-l1{display:block} .hero-h em{display:block;padding-bottom:.08em;font-style:normal;background:linear-gradient(95deg,#fff 15%,#DDE2FF 55%,#B6C0FF 95%);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- scene: .hs fills the rest of the screen, .hs-in is the biggest box of ratio --ar that fits in it ---------- */ .hs{position:relative;z-index:1;flex:1 1 0;min-height:0;margin-top:clamp(10px,2.6vh,34px);container-type:size;display:grid;place-items:center;pointer-events:none;user-select:none} .hs-in{--ar:2.3;--side:140px;position:relative;width:min(100cqw - 2*var(--gut) - var(--side),calc(var(--ar)*100cqh),1800px);aspect-ratio:var(--ar);container-type:inline-size} /* laptop (still: no float, no tilt). --lw = its width; the deck and the front edge scale with it */ .hs-lap{--lw:52cqw;position:absolute;z-index:1;left:calc(50cqw - var(--lw)/2);top:2cqw;width:var(--lw);perspective:130cqw;perspective-origin:50% calc(100% - 1.25cqw)} .hs-light{position:absolute;left:-30%;right:-30%;top:-18%;bottom:-30%;z-index:-1;background:radial-gradient(closest-side,rgba(190,202,255,.55),rgba(120,140,255,.18) 55%,transparent);pointer-events:none} .hs-lid{position:relative;transform-origin:50% 100%;transform-style:preserve-3d} .hs-scr{position:relative;background:linear-gradient(180deg,#1A1F3A,#0A0D1F 40%);border-radius:1.4cqw 1.4cqw .35cqw .35cqw;padding:.85cqw .85cqw 1.25cqw; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(170,184,255,.22),0 0 6cqw -1cqw rgba(130,150,255,.5),0 4cqw 7cqw -3cqw rgba(0,0,30,.8);backface-visibility:hidden;-webkit-backface-visibility:hidden} .hs-scr::before{content:'';position:absolute;top:.28cqw;left:50%;width:.42cqw;height:.42cqw;margin-left:-.21cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4A5388,#1B2040 60%);box-shadow:0 0 0 .08cqw #2A3055} /* aluminium rim: the top edge catches the light, the sides fade */ .hs-scr::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.12) 12%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 80%,rgba(180,192,255,.22)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .hs-view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:.35cqw;background:#F5F7FC;container-type:inline-size} /* screen glass: one soft reflection from the upper left */ .hs-view::after{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.06) 26%,rgba(255,255,255,0) 44%);pointer-events:none} .hs-glare{position:absolute;inset:0;z-index:3;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.1) 56%,transparent 70%);opacity:0;pointer-events:none} .hs-dark{position:absolute;inset:0;z-index:5;background:#05081E;opacity:0;pointer-events:none} .hs-back{position:absolute;inset:0;border-radius:1.4cqw 1.4cqw .35cqw .35cqw;background:linear-gradient(180deg,#E9ECF4,#B9C0D2);transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden} .hs-back i{position:absolute;left:50%;top:50%;width:4cqw;height:4cqw;margin:-2cqw 0 0 -2cqw;border-radius:50%;background:rgba(255,255,255,.45)} /* keyboard deck: one plane (depth .62 of the width) tilted back 85deg in its own perspective, so the far edge sits at the hinge and the near edge comes out ~11% wider, like a laptop seen from a little above. Box height = what the tilted plane shows. */ .hs-dk{position:relative;container-type:inline-size;aspect-ratio:1/.0603} .hs-deck{position:absolute;left:0;top:0;width:100cqw;height:62cqw;transform-origin:50% 0;transform:perspective(600cqw) rotateX(85deg);border-radius:0 0 3cqw 3cqw; background:linear-gradient(180deg,#5C6488 0%,#A9B0C8 7%,#D5D9E5 40%,#EDEFF5 100%)} .hs-deck::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(120,140,255,.4),rgba(120,140,255,0) 35%)} .hs-keys{position:absolute;left:7.5%;right:7.5%;top:8%;height:44%;border-radius:1.2cqw;background-color:#151A2E;box-shadow:0 0 0 .35cqw #9FA7BF; background-image:linear-gradient(90deg,#3A4264 0 .35cqw,transparent .35cqw),linear-gradient(#3A4264 0 1.1cqw,transparent 1.1cqw);background-size:calc(100%/15) calc(100%/6)} .hs-pad{position:absolute;left:33%;right:33%;top:58%;height:34%;border-radius:1.6cqw;background:linear-gradient(180deg,#C7CCDB,#DADEE8);box-shadow:inset 0 0 0 .3cqw rgba(110,118,150,.35)} /* front edge: as wide as the deck's near edge */ .hs-base{position:relative;height:calc(var(--lw)*.022);margin-top:-1.5px;margin-inline:calc(var(--lw)*-.0575);background:linear-gradient(180deg,#FBFCFF 0%,#D2D6E3 40%,#8E95AB 100%);border-radius:0 0 1.4cqw 1.4cqw/0 0 1cqw 1cqw;box-shadow:inset 0 1px 0 #fff,0 1.4cqw 2.4cqw -1cqw rgba(0,0,30,.5)} .hs-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:38%;translate:-50% 0;background:#B3B9CA;border-radius:0 0 .8cqw .8cqw} .hs-base::after{content:'';position:absolute;left:calc(var(--lw)*.0575);right:calc(var(--lw)*.0575);bottom:100%;height:.75cqw;border-radius:.5cqw .5cqw 0 0;background:linear-gradient(180deg,#DCE0EA,#AAB1C4);opacity:0} /* the aluminium edge catches the same light that sweeps the screen glass (a beat after it) */ .hs-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none} .hs-shine i{position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0));opacity:0} /* soft shadow on the "road" under the floating laptop, and the screen's light spilling onto it */ .hs-floor{position:absolute;z-index:0;left:50%;top:39.6cqw;width:58cqw;height:2.2cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(2,4,46,.85),rgba(2,4,46,.35) 60%,rgba(2,4,46,0))} .hs-spill{position:absolute;z-index:0;left:50%;top:40.2cqw;width:84cqw;height:7cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(176,190,255,.3),rgba(130,148,255,.1) 55%,rgba(130,148,255,0));pointer-events:none} /* the platform: rings drawn in a 1000x120 box whose centre (500,50) sits under the laptop's front edge; --dw = its width */ .hs-dais{--dw:100cqw;position:absolute;z-index:0;left:calc(50cqw - var(--dw)/2);top:calc(var(--dy,39.4cqw) - var(--dw)*.05);width:var(--dw);height:calc(var(--dw)*.12);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 6px rgba(150,168,255,.35))} .hs-dais ellipse{fill:none} .hs-dais .hd-r1{stroke:url(#hdFade);stroke-width:2.2} .hs-dais .hd-r2{stroke:rgba(214,222,255,.5);stroke-width:3.2;stroke-dasharray:1.2 10} .hs-dais .hd-r3{stroke:url(#hdFade);stroke-width:1.4;opacity:.9} .hs-dais .hd-r4{stroke:url(#hdFade);stroke-width:1.2;opacity:.6} .hs-dais .hd-n{fill:#fff;opacity:.85} .hs-dais .hd-nb{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:7;paint-order:stroke;opacity:1} /* dashboard inside the screen (cqw = % of the screen width). Three tiles and two charts, set large enough to read: labels and headings never go under 13px on a laptop, small print that could not be read at that size is left out. */ .db{--rail:7.4cqw;position:absolute;inset:0;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);color:var(--ink);font-family:var(--f);text-align:left;line-height:1.25; background:radial-gradient(ellipse 60% 50% at 85% 0%,rgba(35,53,255,.07),transparent 70%),#F3F5FB} /* app rail: dark navy, the open section lit in cobalt */ .db-rail{display:flex;flex-direction:column;align-items:center;gap:1.9cqw;padding:1.7cqw 0 2cqw;background:linear-gradient(180deg,#131B52,#0B1233 70%);box-shadow:inset -1px 0 0 rgba(255,255,255,.06)} .db-rmk{width:4.2cqw;height:4.2cqw;margin-bottom:.8cqw;flex:none;border-radius:50%;box-shadow:0 0 0 .35cqw rgba(255,255,255,.1)} .db-rail i{display:grid;place-items:center;width:4.6cqw;height:4.6cqw;border-radius:1.3cqw;flex:none} .db-rail i svg{width:52%;height:52%;fill:none;stroke:rgba(214,220,255,.55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .db-rail .on{background:linear-gradient(180deg,#4453FF,#2335FF);box-shadow:0 .6cqw 1.6cqw -.4cqw rgba(35,53,255,.8),inset 0 1px 0 rgba(255,255,255,.3)} .db-rail .on svg{stroke:#fff} .db-rail b{flex:none} .db-me{margin-top:auto;width:3.8cqw;height:3.8cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFD9B8 0 28%,transparent 29%),radial-gradient(ellipse 60% 44% at 50% 100%,#FFD9B8 0 70%,transparent 71%),linear-gradient(160deg,#FF9F7A,#E0567A);box-shadow:0 0 0 .3cqw rgba(255,255,255,.18)} .db-main{display:flex;flex-direction:column;min-width:0;min-height:0} .db-bar{display:flex;align-items:center;gap:2cqw;height:7.4cqw;padding:0 3cqw;background:rgba(255,255,255,.92);border-bottom:1px solid #E6E9F2;flex:none} .db-brand{display:flex;align-items:center;gap:1.2cqw;font-size:max(13px,2.3cqw);font-weight:600;letter-spacing:-.02em;white-space:nowrap} .db-mk{display:none;width:max(18px,3.8cqw);height:max(18px,3.8cqw);flex:none} .db-tabs{display:flex;gap:.5cqw;margin-left:1cqw} .db-tabs i{font-style:normal;font-size:max(13px,1.9cqw);color:var(--muted);padding:.7cqw 1.5cqw;border-radius:99px} .db-tabs .on{background:var(--cobalt-tint);color:var(--cobalt);font-weight:600} .db-month{margin-left:auto;display:flex;align-items:center;gap:.9cqw;font-size:max(13px,1.9cqw);font-weight:500;padding:.8cqw 1.6cqw;border:1px solid #E1E5EF;border-radius:99px} .db-month svg{width:max(14px,2cqw);height:max(14px,2cqw);fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linecap:round} .db-body{flex:1;display:flex;flex-direction:column;gap:2cqw;padding:2.4cqw 3cqw 2.8cqw;min-height:0} .db-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw} .db-kpis li,.db-card{background:#fff;border-radius:1.6cqw;box-shadow:0 0 0 1px rgba(11,18,51,.04),0 .1cqw .3cqw rgba(11,18,51,.06),0 1cqw 2.4cqw -1.2cqw rgba(11,18,51,.2)} .db-kpis li{position:relative;padding:1.8cqw 2cqw 2cqw;overflow:hidden} /* a small trend line in the corner of every tile */ .db-sp{position:absolute;right:1.8cqw;bottom:2cqw;width:22%;height:3.4cqw;overflow:visible} .db-sp path{fill:none;stroke:var(--cobalt);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .db-sp .db-spf{fill:rgba(35,53,255,.1);stroke:none} .db-l{display:flex;align-items:center;gap:1cqw;font-size:max(13px,2.2cqw);color:var(--muted);white-space:nowrap} .db-ic{width:max(17px,3.1cqw);height:max(17px,3.1cqw);border-radius:.9cqw;background:var(--cobalt-tint);display:grid;place-items:center;flex:none} .db-ic svg{width:62%;height:62%;fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .db-v{display:flex;align-items:center;margin-top:1.2cqw;font-size:max(21px,5.2cqw);line-height:1;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap} .db-v small{font-size:.55em;font-weight:500;margin-right:.12em;color:var(--muted);letter-spacing:0} /* the reservations tile is the one that matters: cobalt, white type */ .db-kpis .db-g{background:linear-gradient(145deg,#4655FF 0%,#2335FF 48%,#1A22C4 100%);color:#fff;box-shadow:0 1.2cqw 2.6cqw -1cqw rgba(35,53,255,.6),inset 0 1px 0 rgba(255,255,255,.25)} .db-g .db-l{color:rgba(255,255,255,.82)} .db-g .db-ic{background:rgba(255,255,255,.18)}.db-g .db-ic svg{stroke:#fff} .db-g .db-sp path{stroke:#fff}.db-g .db-sp .db-spf{fill:rgba(255,255,255,.16)} .db-g .db-plus{background:#fff;color:var(--cobalt)} .db-g .db-ping{box-shadow:0 0 0 max(1.5px,.22cqw) #fff,0 0 0 max(4px,.9cqw) rgba(255,255,255,.25)} /* live bits: the tile ring and the +1 chip (shown by 21-hero.js when the route arrives) */ .db-ping{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 max(1.5px,.22cqw) var(--cobalt),0 0 0 max(4px,.9cqw) rgba(35,53,255,.13);opacity:0;pointer-events:none} .db-plus{margin-left:.35em;padding:.22em .5em;border-radius:99px;background:var(--cobalt-tint);color:var(--cobalt);font-style:normal;font-size:max(13px,.4em);font-weight:700;letter-spacing:0;line-height:1;opacity:0} .db-row{flex:1;display:grid;grid-template-columns:1.75fr 1fr;gap:2cqw;min-height:0} .db-card{display:flex;flex-direction:column;min-height:0;padding:1.9cqw 2.2cqw 1.7cqw} .db-h{display:flex;align-items:baseline;gap:1cqw;font-size:max(13px,2.1cqw);font-weight:600;letter-spacing:-.01em;white-space:nowrap} .db-hv{display:none;font-variant-numeric:tabular-nums} .db-plot{position:relative;flex:1;margin-top:1.4cqw} .db-grid{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,#E9ECF4 0 1px,transparent 1px 25%)} .db-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .db-svg{filter:drop-shadow(0 .7cqw .8cqw rgba(35,53,255,.28))} .db-line{fill:none;stroke:url(#hsLine);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0} .db-peak{position:absolute;left:100%;top:17.1%;width:1.3cqw;height:1.3cqw;margin:-.65cqw 0 0 -.65cqw;border-radius:50%;background:#6A45FF;box-shadow:0 0 0 .35cqw #fff,0 0 0 .8cqw rgba(35,53,255,.18)} .db-x{display:flex;justify-content:space-between;margin-top:1cqw;font-size:max(13px,1.6cqw);color:#8A91AB} .db-cols{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:.7cqw;margin-top:1.4cqw;min-height:0} .db-cols li{display:grid;grid-template-rows:1fr auto;justify-items:center;gap:.8cqw;min-height:0} .db-cols i{position:relative;font-style:normal;align-self:end;width:100%;height:var(--h);border-radius:99px 99px .5cqw .5cqw;background:var(--cobalt);transform-origin:50% 100%} .db-cols li:not(.hi) i{background:linear-gradient(180deg,#DCE1FC,#C4CBF4)} .db-cols .hi i{background:linear-gradient(180deg,#6A45FF,var(--cobalt));box-shadow:0 .8cqw 1.8cqw -.6cqw rgba(35,53,255,.7)} /* the busiest day carries its count */ .db-cv{position:absolute;left:50%;top:max(5px,.9cqw);translate:-50% 0;font-size:max(13px,1.7cqw);font-style:normal;letter-spacing:-.02em;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums} @container (max-width:599px){.db-cv{display:none}} .db-cols span{font-size:max(13px,1.6cqw);color:#8A91AB} /* the axis ticks only where they come out readable (big screens); the chart headings already say what is plotted */ @container (max-width:599px){.db-x,.db-cols span{display:none}} @container (max-width:659px){.db-tabs{display:none}} /* the notification that drops into the top bar (right side, centred in the bar, never over the numbers). Hidden at rest: only the live loop shows it for a few seconds, so the still picture (no JS, reduced motion) keeps the month readable. */ .db-toast{position:absolute;z-index:3;top:calc((7.4cqw - max(26px,5.2cqw))/2);right:2.4cqw;display:flex;align-items:center;gap:max(6px,1cqw);height:max(26px,5.2cqw);padding:0 max(11px,1.8cqw) 0 max(4px,.6cqw);border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(11,18,51,.07),0 1.2cqw 2.6cqw -1cqw rgba(11,18,51,.4);font-size:max(13px,1.9cqw);line-height:1;white-space:nowrap;opacity:0} .db-toast b{font-weight:600;letter-spacing:-.01em} .db-tx{color:var(--muted)} .db-tx::before{content:'· ';color:#A3A9BF} .db-tic{display:grid;place-items:center;width:max(19px,4cqw);height:max(19px,4cqw);border-radius:50%;background:var(--cobalt);flex:none} .db-tic svg{width:58%;height:58%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @container (max-width:539px){.db-tx{display:none}} /* big-type dashboard for small screens (phones): two tiles, one chart, nothing under 13px; the month stays as a compact chip */ @container (max-width:440px){ .db{--rail:0px;grid-template-columns:minmax(0,1fr)} .db-rail,.db-sp{display:none} .db-mk{display:block} .db-bar{height:30px;padding:0 10px;gap:8px} .db-brand{font-size:13px;gap:6px} .db-mk{width:18px;height:18px} .db-month{gap:5px;padding:0;border:0;font-size:13px;color:var(--ink)} .db-month svg{width:14px;height:14px} .db-tabs,.db-k1,.db-bars,.db-x,.db-tx{display:none} .db-body{gap:8px;padding:8px 10px 10px} .db-kpis{grid-template-columns:1fr 1fr;gap:8px} .db-kpis li,.db-card{border-radius:10px} .db-kpis li{padding:7px 9px 8px} .db-l{font-size:13px;gap:6px} .db-ic{width:18px;height:18px;border-radius:6px} .db-ic svg{width:12px;height:12px} .db-v{margin-top:4px;font-size:21px} .db-plus{font-size:14px} .db-row{grid-template-columns:1fr} .db-card{padding:7px 10px 8px} .db-h{font-size:14px;gap:8px} .db-hv{display:inline;font-size:15px;color:var(--ink)} .db-plot{margin-top:4px} .db-peak{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(35,53,255,.18)} .db-toast{top:3px;right:8px;height:24px;gap:6px;padding:0 10px 0 3px} .db-tic{width:18px;height:18px} } @container (max-width:300px){ /* icons go (tiles, brand mark, calendar); the month stays as plain text after the brand */ .db-ic,.db-mk,.db-month svg{display:none} .db-month{color:var(--muted)} .db-month::before{content:'·';color:#A3A9BF} .db-bar{height:26px} .db-kpis li{padding:5px 8px 6px} .db-v{margin-top:2px;font-size:18px} .db-body{gap:6px;padding:6px 8px 8px} .db-card{padding:5px 8px 6px} .db-toast{top:1px} } /* the very smallest screen (a 375x548 window): no room for the month beside the brand and the route */ @container (max-width:230px){.db-month{display:none}} /* route: every segment starts and ends under a card, so it always meets the card edge whatever the card height */ .hs-route{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;display:none;--sw:.13} .hs-route path{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:var(--sw);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0} .hs-route .rt-w{stroke-opacity:1;stroke-width:calc(var(--sw)*2.8)} .hs-route .rt-c{stroke:var(--cobalt);stroke-opacity:1} .rt-end{fill:var(--cobalt);stroke:#fff;stroke-width:calc(var(--sw)*1.6);transform-box:fill-box;transform-origin:center} .rt-d5{display:block} /* the travelling light: white core, a thin cobalt ring (so it reads on the white screen too), soft halo */ .rt-dot{--ds:max(9px,.8cqw);position:absolute;z-index:2;left:0;top:0;width:var(--ds);aspect-ratio:1;margin:calc(var(--ds)/-2) 0 0 calc(var(--ds)/-2);border-radius:50%;background:#fff;box-shadow:0 0 0 max(1.5px,.14cqw) rgba(35,53,255,.9),0 0 max(10px,1.1cqw) max(3px,.3cqw) rgba(220,228,255,.6);opacity:0;pointer-events:none;will-change:transform,opacity} .rt-dot2{--ds:max(6px,.55cqw);background:rgba(255,255,255,.8);box-shadow:0 0 max(8px,.8cqw) max(2px,.2cqw) rgba(220,228,255,.4)} .rt-dot3{--ds:max(4px,.38cqw);background:rgba(255,255,255,.6);box-shadow:0 0 max(6px,.6cqw) rgba(220,228,255,.3)} /* cards: solid white (the route runs under them and must never show through), a fine glass rim against the cobalt, deep soft shadow */ @property --kx{syntax:'';inherits:false;initial-value:0px} @property --ky{syntax:'';inherits:false;initial-value:0px} @property --krx{syntax:'';inherits:false;initial-value:0deg} @property --kry{syntax:'';inherits:false;initial-value:0deg} @property --kk{syntax:'';inherits:false;initial-value:1} /* still until the pointer comes close: 21-hero.js then draws that one card toward it (--kx/--ky), tilts it (--krx/--kry) and lifts it (--kk) */ .hc{position:absolute;z-index:3;transform:perspective(900px) translate3d(var(--kx,0px),var(--ky,0px),0) rotateX(var(--krx,0deg)) rotateY(var(--kry,0deg)) scale(var(--kk,1))} .hc.near{z-index:6} .hc-web.near{z-index:4} /* the phone stays in front of the browser card */ .hc .hc-a{transition:box-shadow .5s var(--ease)} .hc.near .hc-a{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,18,51,.05),0 0 0 var(--bz) rgba(255,255,255,.2),0 .3cqw .6cqw rgba(3,6,60,.14),0 3.2cqw 5.6cqw -1.6cqw rgba(3,6,60,.7),0 0 3.4cqw -.4cqw rgba(170,186,255,.6)} .hc-ph.near .hc-a{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.2),0 3.4cqw 5cqw -1.6cqw rgba(0,0,30,.8),0 0 3cqw -.6cqw rgba(170,186,255,.55)} /* one surface for all five: white with a faint cool fall-off, a hairline, and a frosted glass bezel (--bz) with a fine rim */ .hc-a{--bz:max(5px,.42cqw);position:relative;background:linear-gradient(180deg,#fff 40%,#F7F8FD);color:var(--ink);border-radius:max(12px,1.25cqw);padding:max(10px,.95cqw); box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,18,51,.05),0 0 0 var(--bz) rgba(255,255,255,.12),0 .15cqw .4cqw rgba(3,6,60,.12),0 2.2cqw 4.4cqw -1.6cqw rgba(3,6,60,.62); outline:1px solid rgba(255,255,255,.3);outline-offset:calc(var(--bz) - 1px);text-align:left} .hc-l{display:flex;align-items:center;gap:max(7px,.6cqw);font-size:max(13px,1.1cqw);font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap} /* the step chip: the number on a cobalt disc inside a ring of five segments, lit up to its step (1 of 5 ... 5 of 5). The white gaps fall on the segment ends, so every segment has clean ends and the unlit ones keep a visible track. */ .hc-n{--p:.2;position:relative;isolation:isolate;display:grid;place-items:center;width:max(25px,1.95cqw);height:max(25px,1.95cqw);border-radius:50%; background:repeating-conic-gradient(from -7deg,#fff 0 14deg,transparent 14deg 72deg),conic-gradient(var(--cobalt) calc(var(--p)*360deg),#C9D2FF 0);color:#fff;font-style:normal;font-size:max(13px,.95cqw);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;flex:none} .hc-n::before{content:'';position:absolute;z-index:-1;inset:max(3.5px,.27cqw);border-radius:50%;background:linear-gradient(160deg,#5463FF,#2335FF 55%,#1A22C4);box-shadow:0 0 0 max(1.5px,.11cqw) #fff,inset 0 1px 0 rgba(255,255,255,.35)} .hc-web .hc-n,.hc-ph .hc-n{--p:.4}.hc-chat .hc-n{--p:.6}.hc-cal .hc-n{--p:.8}.hc-post .hc-n{--p:1} /* the channel glyph at the right of every header, and the AI mark on the chat */ .hc-g{display:grid;margin-left:auto;width:max(16px,1.25cqw);height:max(16px,1.25cqw);flex:none} .hc-g svg{width:100%;height:100%;fill:none;stroke:#A0A8C8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .hc-ai{margin-left:auto;padding:max(3px,.25cqw) max(7px,.5cqw);border-radius:99px;background:linear-gradient(135deg,var(--cobalt-tint),#E4E8FF);color:var(--cobalt);font-size:max(14px,.9cqw);font-weight:700;letter-spacing:.02em;line-height:1.1;box-shadow:inset 0 0 0 1px rgba(35,53,255,.12)} .hc-n::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(35,53,255,.55);opacity:0} /* 1 map */ .hc-map{left:3.5cqw;top:2cqw;width:16.5cqw;z-index:3} .map{position:relative;margin-top:max(8px,.8cqw);border-radius:max(8px,.8cqw);overflow:hidden;aspect-ratio:5/3} .map svg{display:block;width:100%;height:100%} .map-pin{position:absolute;left:47%;top:30%;width:18%;aspect-ratio:1;translate:-50% -85%;color:var(--cobalt)} .map-pin svg{position:relative;width:100%;height:100%;fill:var(--cobalt);stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 .3cqw .4cqw rgba(11,18,51,.3))} .map-pin svg circle{fill:#fff;stroke:none} .map-ring{position:absolute;left:50%;top:92%;width:78%;aspect-ratio:2/1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(35,53,255,.3),rgba(35,53,255,0));box-shadow:0 0 0 1px rgba(35,53,255,.22)} .map svg .map-rt{fill:none;stroke:var(--cobalt);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0} .map{box-shadow:inset 0 0 0 1px rgba(11,18,51,.06)} .map-km{position:absolute;left:35%;top:56%;display:flex;align-items:center;gap:max(3px,.25cqw);padding:max(3px,.22cqw) max(8px,.55cqw) max(3px,.22cqw) max(5px,.38cqw);border-radius:99px;background:#fff;color:var(--ink);font-size:max(13px,.92cqw);font-weight:650;line-height:1.1;white-space:nowrap;box-shadow:0 0 0 1px rgba(11,18,51,.06),0 .35cqw .9cqw -.3cqw rgba(11,18,51,.4)} .map-km svg{width:max(13px,.95cqw);height:max(13px,.95cqw);fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .map-no{position:absolute;left:58%;top:6%;padding:.25em .55em;border-radius:99px;background:var(--cobalt);color:#fff;font-size:max(13px,1.05cqw);font-weight:700;line-height:1.1;box-shadow:0 .4cqw .9cqw -.3cqw rgba(11,18,51,.45);transform-origin:0 100%} /* 2 browser + phone */ .hc-web{left:0;top:19cqw;width:22.5cqw;z-index:4} .hc-ptab{display:none;position:absolute;z-index:2;right:calc(100% - 8px);bottom:12%;color:var(--ink);padding:max(6px,.45cqw) max(12px,.9cqw) max(6px,.45cqw) max(6px,.45cqw);border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 .8cqw 1.8cqw -.8cqw rgba(3,6,60,.5)} .bw{margin-top:max(8px,.7cqw);border-radius:max(8px,.7cqw);overflow:hidden;box-shadow:0 0 0 1px rgba(11,18,51,.07)} .bw-bar{display:flex;align-items:center;gap:max(4px,.35cqw);height:max(22px,1.9cqw);padding:0 max(8px,.8cqw);background:#EEF1F8} .bw-bar i{width:max(6px,.5cqw);height:max(6px,.5cqw);border-radius:50%;background:#C9D0E3} .bw-bar span{display:flex;align-items:center;gap:max(4px,.3cqw);flex:1;height:58%;margin-left:max(6px,.6cqw);max-width:54%;padding:0 max(6px,.45cqw);border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,18,51,.05)} .bw-bar span svg{width:max(9px,.7cqw);height:max(9px,.7cqw);fill:none;stroke:var(--cobalt);stroke-width:2.4;stroke-linecap:round;flex:none} .bw-bar span b{flex:1;height:max(3px,.24cqw);max-width:70%;border-radius:99px;background:#D9DEEC} .hc-web img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 0} .hc-ph{left:18cqw;top:26.5cqw;width:7.4cqw;z-index:5} .hc-ph .hc-a{padding:max(3px,.42cqw);border-radius:max(16px,1.5cqw);background:#0A0D1F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.12),0 2.4cqw 4cqw -1.6cqw rgba(0,0,30,.75)} .ph-v{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:max(13px,1.15cqw);background:#F6EFE3} .ph-v::before{content:'';position:absolute;z-index:2;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000} .ph-v::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,0) 38%);pointer-events:none} .ph-v img{width:100%;height:100%;object-fit:cover;object-position:top} /* 3 chat */ .hc-chat{left:79.5cqw;top:30.5cqw;width:17.5cqw;z-index:4} .ch-q{margin:max(8px,.8cqw) 0 0 auto;width:fit-content;max-width:90%;padding:max(6px,.5cqw) max(10px,.85cqw);border-radius:max(12px,1cqw) max(12px,1cqw) max(4px,.3cqw) max(12px,1cqw);background:var(--mist-2);font-size:max(13px,1.05cqw);line-height:1.3} .ch-a{position:relative;display:flex;align-items:flex-end;gap:max(6px,.5cqw);margin-top:max(6px,.55cqw);min-height:max(28px,2.4cqw)} .ch-av{display:grid;place-items:center;width:max(24px,1.9cqw);height:max(24px,1.9cqw);border-radius:50%;flex:none; background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 30%),linear-gradient(150deg,#8FA0FF,#2335FF 60%,#0E178F);box-shadow:0 .25cqw .6cqw -.15cqw rgba(35,53,255,.6),inset 0 0 0 1px rgba(255,255,255,.25)} .ch-av svg{width:60%;height:60%;fill:#fff} .ch-end{white-space:nowrap} .ch-ok{display:inline-grid;place-items:center;vertical-align:-.2em;margin-left:.4em;width:1.15em;height:1.15em;border-radius:50%;background:#fff} .ch-ok svg{width:78%;height:78%;fill:none;stroke:var(--cobalt);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round} .ch-r{box-shadow:0 .4cqw .9cqw -.4cqw rgba(35,53,255,.65);padding:max(6px,.5cqw) max(7px,.55cqw) max(6px,.5cqw) max(10px,.85cqw);border-radius:max(12px,1cqw) max(12px,1cqw) max(12px,1cqw) max(4px,.3cqw);background:linear-gradient(160deg,#4655FF,#2335FF 60%);color:#fff;font-size:max(13px,1.05cqw);line-height:1.3;transform-origin:0 100%} .ch-dots{position:absolute;left:calc(max(22px,1.8cqw) + max(6px,.5cqw));bottom:0;display:flex;gap:max(3px,.28cqw);padding:max(9px,.75cqw) max(10px,.85cqw);border-radius:max(12px,1cqw) max(12px,1cqw) max(12px,1cqw) max(4px,.3cqw);background:var(--mist-2);opacity:0} .ch-dots i{width:max(5px,.42cqw);height:max(5px,.42cqw);border-radius:50%;background:#8A91AB} /* 4 calendar */ .hc-cal{left:79.5cqw;top:17.5cqw;width:16cqw;z-index:3} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:max(2px,.18cqw);margin-top:max(8px,.8cqw);padding:max(3px,.25cqw);border-radius:max(9px,.75cqw);background:var(--mist)} .cal span{display:grid;place-items:center;height:max(22px,1.75cqw);border-radius:max(6px,.5cqw);font-size:max(14px,.85cqw);font-weight:600;color:#8A91AB;line-height:1} .cal .on{background:linear-gradient(160deg,#4655FF,#2335FF 60%);color:#fff;box-shadow:0 .3cqw .7cqw -.2cqw rgba(35,53,255,.6)} .cal-s{display:flex;gap:max(5px,.4cqw);margin-top:max(6px,.5cqw)} .cal-s span{position:relative;display:flex;align-items:center;justify-content:center;gap:max(3px,.2cqw);flex:1;height:max(24px,1.85cqw);border-radius:max(7px,.6cqw);box-shadow:inset 0 0 0 1px #E1E5F0;font-size:max(14px,.88cqw);font-weight:600;color:#6B7290;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap} .cal-s .cal-go{isolation:isolate;flex:1.3;color:#fff;box-shadow:0 .35cqw .8cqw -.3cqw rgba(35,53,255,.65)} .cal-go::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(160deg,#4655FF,#2335FF 60%);transform-origin:0 50%} .cal-go svg{width:max(12px,.95cqw);height:max(12px,.95cqw);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:none} @container (max-width:1499px){.cal-s .cal-3{display:none}} /* 5 post: the far card (smaller, a lighter shadow; no blur, it keeps the text crisp) */ .hc-post{left:82.5cqw;top:1cqw;width:12.5cqw;z-index:2} .hc-post .hc-a{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.3),0 1.4cqw 2.8cqw -1.4cqw rgba(3,6,60,.45)} .post-img{margin-top:max(8px,.7cqw);border-radius:max(8px,.7cqw);overflow:hidden;aspect-ratio:16/11} .post-img svg{display:block;width:100%;height:100%} .post-ft{display:flex;align-items:center;gap:max(8px,.7cqw);margin-top:max(7px,.6cqw)} .post-like{position:relative;display:grid;width:max(18px,1.45cqw);height:max(18px,1.45cqw)} .post-like svg{width:100%;height:100%;fill:var(--cobalt);stroke:var(--cobalt);stroke-width:1.6;stroke-linejoin:round} .post-c{width:max(18px,1.45cqw);height:max(18px,1.45cqw)} .post-bm{margin-left:auto} .post-img{position:relative} .post-av{position:absolute;left:max(5px,.45cqw);top:max(5px,.45cqw);width:max(16px,1.3cqw);height:max(16px,1.3cqw);border-radius:50%;box-shadow:0 0 0 max(1.5px,.12cqw) #fff,0 .2cqw .5cqw rgba(11,18,51,.3)} .post-av svg{display:block;width:100%;height:100%} .post-c svg{width:100%;height:100%;fill:none;stroke:#8A91AB;stroke-width:1.8;stroke-linejoin:round} .ht{position:absolute;left:15%;top:10%;width:70%;height:70%;opacity:0;background:var(--cobalt);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E") center/contain no-repeat} @container (max-width:1599px){.ch-x{display:none}} /* the far card is too narrow for its channel glyph on smaller boxes: the label keeps the room */ @container (max-width:1079px){.hc-post .hc-g{display:none}} @container (max-width:320px){.ch-av{display:none}.ch-dots{left:0}} /* the smallest phones: the phone's label shrinks to its number so it never covers the chart */ @container (max-width:300px){.hc-ptab{top:-7px;right:auto;bottom:auto;left:-7px;gap:0;padding:0;background:none;box-shadow:none;font-size:0}} /* short laptops (box under 1000px): the post and the calendar step up so the right column keeps its gaps */ @container (max-width:1000px){.hc-post{top:0}.hc-cal{top:16.5cqw}} /* ---------- small desktop scene (the box is under 900px wide): three cards ---------- */ @container (max-width:900px){ .hc-cal,.hc-post{display:none} .hc-map{left:1cqw;top:0;width:19cqw} .hc-web{left:0;top:19.5cqw;width:23cqw} .hc-ph{left:19cqw;top:27cqw;width:7cqw} .hc-chat{left:77.5cqw;top:13cqw;width:22.5cqw} .ch-q{max-width:none} .ch-x{display:none} .rt-d5{display:none}.rt-d3{display:block} .hs-route{--sw:.2} } /* ---------- intro, levitation and the live loop's resting states (JS on + motion allowed only) ---------- */ @media (prefers-reduced-motion:no-preference){ /* timeline: lid opens .2–1.3 s, screen on at 1.1 s, cards and route 1.4–4.35 s. 21-hero.js reads these animations: the counters start on the screen's power-on, the first live pass once the route and the cards are finished */ html.js .hs-in{animation:hsIn 1s var(--ease) .1s both} html.js .hs-lid{animation:hsLid 1.1s cubic-bezier(.45,.02,.12,1) .2s both} html.js .hs-base::after{animation:hsEdge .3s ease-in .25s both} html.js .hs-light{animation:hsFade 1.3s ease-out 1s both} html.js .hs-dark{animation:hsPower .8s ease-out 1.1s both} html.js .hs-glare{animation:hsGlare 1.2s cubic-bezier(.4,0,.2,1) 1.05s both,hsSheen 13s cubic-bezier(.4,0,.2,1) 8s infinite} html.js .hs-shine i{animation:hsShine 13s cubic-bezier(.4,0,.2,1) 8.35s infinite} html.js .db-line{animation:hsDraw 1.7s cubic-bezier(.5,0,.25,1) 1.5s both} html.js .db-fill{animation:hsFade 1.2s ease-out 2.3s both} html.js .db-peak{animation:hsPop .6s cubic-bezier(.3,1.6,.5,1) 3s both} html.js .db-cols i{animation:hsBar 1s var(--ease) calc(1.7s + var(--i)*80ms) both} html.js .hs-floor{animation:hsFade 1.1s ease-out .7s both} html.js .hs-spill{animation:hsFade 1.5s ease-out 1.2s both} html.js .hs-route path{animation:hsDraw var(--l) cubic-bezier(.45,0,.3,1) var(--t) both} html.js .rt-end{animation:hsPop .5s cubic-bezier(.3,1.6,.5,1) var(--t) both} html.js .hc-a{animation:hcIn .9s var(--ease) var(--t) both} html.js .map-pin{animation:hcDrop .7s cubic-bezier(.3,1.5,.5,1) calc(var(--t) + .35s) both} html.js .map svg .map-rt{animation:hsDraw .8s cubic-bezier(.45,0,.3,1) calc(var(--t) + .55s) both} html.js .map-km{animation:hsPop .5s cubic-bezier(.3,1.6,.5,1) calc(var(--t) + 1.15s) both} html.js .ch-ok{animation:hsPop .45s cubic-bezier(.3,1.7,.5,1) calc(var(--t) + 1.75s) both} html.js .map-ring{animation:hcRing 2.6s ease-out calc(var(--t) + .9s) infinite} html.js .map-no{animation:hsPop .55s cubic-bezier(.3,1.7,.5,1) calc(var(--t) + .8s) both} html.js .ch-dots{animation:chDots 1.15s linear calc(var(--t) + .35s) both} html.js .ch-dots i{animation:chBounce .6s ease-in-out calc(var(--t) + .35s) 3} html.js .ch-dots i:nth-child(2){animation-delay:calc(var(--t) + .5s)} html.js .ch-dots i:nth-child(3){animation-delay:calc(var(--t) + .65s)} html.js .ch-r{animation:hsPop .5s cubic-bezier(.3,1.4,.5,1) calc(var(--t) + 1.45s) both} html.js .cal-go::before{animation:calFill .6s var(--ease) calc(var(--t) + .5s) both} html.js .cal-go svg{animation:hsPop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--t) + .95s) both} html.js .post-like svg{animation:hsPop .5s cubic-bezier(.3,1.8,.5,1) calc(var(--t) + .4s) both} html.js .ht{animation:heartUp 1.5s cubic-bezier(.2,.6,.3,1) calc(var(--t) + .5s) both} html.js .ht:nth-of-type(2){--kx2:-70%;animation-delay:calc(var(--t) + .68s)} html.js .ht:nth-of-type(3){--kx2:80%;animation-delay:calc(var(--t) + .86s)} /* the leaders appear once their card has landed (map 1.4 s + .9 s, post 3.15 s + .9 s); never replayed after the intro */ html.js .hb-lead .hl-l{animation:hsFade .8s ease-out 2.3s both} html.js .hb-lead .hl-r{animation:hsFade .8s ease-out 4.05s both} .hero:has(.hs-done) .hb-lead *{animation:none!important} /* the intro plays once (21-hero.js sets .hs-done when every intro animation has finished). After that an element that comes back into the layout (a rotated tablet, a resized window) shows its final state at once instead of replaying its intro under the live loop. Only the intro timings go to 0; the loops keep their own timing and never restart. */ .hs-done :is(.hs-in,.hs-lid,.hs-light,.hs-dark,.db-line,.db-fill,.db-peak,.db-cols i,.hs-route path,.rt-end,.map-pin,.map-rt,.map-km,.ch-ok,.map-no,.ch-dots,.ch-dots i,.ch-r,.cal-go svg,.post-like svg,.ht,.hc-a,.hs-floor,.hs-spill), .hs-done .hs-base::after,.hs-done .cal-go::before{animation-delay:0s!important;animation-duration:0s!important} html.js .hs-done .hs-glare{animation-delay:0s,8s;animation-duration:0s,13s} /* off-screen: the loops pause (the scene's once the intro is done: a one-off intro always finishes, so a visitor who scrolls away early comes back to a finished screen, with the counters and the first light in step with it) */ .hs.hs-done.off *{animation-play-state:paused!important} } @keyframes hsIn{from{opacity:0;translate:0 4cqw}} @keyframes hsLid{from{transform:rotateX(-90deg)}} @keyframes hsEdge{from{opacity:1}} @keyframes hsFade{from{opacity:0}} @keyframes hsPower{0%{opacity:1}35%{opacity:.35}100%{opacity:0}} @keyframes hsGlare{0%{opacity:0;transform:translateX(-70%)}25%{opacity:1}100%{opacity:0;transform:translateX(70%)}} @keyframes hsSheen{0%{opacity:0;transform:translateX(-80%)}4%{opacity:.4}14%{opacity:0;transform:translateX(80%)}100%{opacity:0;transform:translateX(80%)}} @keyframes hsDraw{0%{stroke-dashoffset:1;opacity:0}.5%{opacity:1}100%{stroke-dashoffset:0}} @keyframes hsShine{0%{opacity:0;transform:translateX(-100%)}3%{opacity:.85}12%{opacity:0;transform:translateX(280%)}100%{opacity:0;transform:translateX(280%)}} @keyframes hsBar{from{transform:scaleY(0)}} @keyframes hsPop{from{opacity:0;transform:scale(.3)}} @keyframes hcIn{from{opacity:0;transform:translateY(2.2cqw) scale(.94)}} @keyframes hcDrop{from{opacity:0;transform:translateY(-60%)}} @keyframes hcRing{0%{opacity:.9;transform:scale(.3)}80%,100%{opacity:0;transform:scale(1.25)}} @keyframes chDots{0%{opacity:0}12%,86%{opacity:1}100%{opacity:0}} @keyframes chBounce{50%{transform:translateY(-45%)}} @keyframes calFill{from{transform:scaleX(0)}} @keyframes heartUp{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translate(var(--kx2,10%),-260%) scale(1)}} /* ---------- layouts ---------- */ /* phones, portrait tablets and short landscape screens: a taller scene; map and chat above the laptop, the phone at its lower right corner. Cards stay clear of the dashboard tiles. Two boxes: 1.1 (short screens) and .82 (tall phones, the scene area is taller than wide). The route reaches the screen from the chat card and crosses the top bar at its right end, so the month follows the brand on the left; the step numbers are left out here (in this arrangement 1-3-2 would read out of order), the labels and the route carry the story. */ @media (max-width:699px),(orientation:portrait) and (max-width:1100px),(orientation:landscape) and (max-height:500px){ .hs-in{--ar:1.1;--side:0px} .hs-lap{--lw:78cqw;top:32.5cqw} .hs-floor{top:88.9cqw;width:90cqw;height:4.2cqw} .hs-spill{top:89.1cqw;width:104cqw;height:7cqw} .hs-dais{--dw:150cqw;--dy:88.6cqw} /* the headline spans the band here: the line drawings beside it have no room */ .hb-art,.hb-lead{display:none} .hc-web,.hc-cal,.hc-post,.hc-n{display:none} .hc-map{left:0;top:0;width:38cqw} .hc-chat{left:54cqw;top:0;width:46cqw} .hc-ph{left:79cqw;top:53.5cqw;width:16.5cqw} .hc-ptab{display:flex} /* the notification drops in on the left, over the brand and the month, and only while live */ .db-toast{right:auto;left:calc(var(--rail,0px) + max(6px,2.2cqw))} .db-month{margin-left:0} /* the phone stands in front of the chart's right end: one full-width area chart, no bar chart for it to cut */ .db-bars{display:none} .db-row{grid-template-columns:1fr} .ch-q{max-width:none} .ch-x{display:none} .rt-d5,.rt-d3{display:none}.rt-m{display:block} .hs-route{--sw:.42} .hc-a{border-radius:14px} /* bigger story labels; the phone mockup stands over the chart's right end, so the curve (and its peak) ends left of it */ .hc-l{font-size:15px;font-weight:650} .hc-ptab{font-size:14px} .db-area .db-plot{margin-right:17cqw} .db-g .db-sp{display:none} /* the two glass drops move to the band edges beside the scene */ .lv-pearl{--x:-2.5%!important;--y:66%!important;--s:40px!important} .lv-bub{--x:91%!important;--y:54%!important} @container (max-aspect-ratio:1/1){ .hs-in{--ar:.82} .hs-lap{--lw:90cqw;top:42cqw} .hs-floor{top:106.9cqw;width:98cqw;height:5cqw} .hs-spill{top:107.2cqw;width:108cqw;height:9cqw} .hs-dais{--dw:172cqw;--dy:106.6cqw} .hc-map{width:42cqw} .hc-chat{left:52cqw;top:11cqw;width:48cqw} .hc-ph{left:76cqw;top:71.5cqw;width:21cqw} .rt-m{display:none}.rt-t{display:block} } /* the smallest boxes: a narrower chat card keeps the brand in the top bar readable; the phone's label (only its number there) goes */ @container (max-width:300px){.hc-chat{left:57cqw;width:43cqw}.hc-ptab{display:none}} } /* portrait tablets: a bigger headline, a thinner route, cards at the laptop's scale */ @media (orientation:portrait) and (min-width:561px) and (max-width:1100px){ .hero-h{font-size:clamp(40px,7vw,64px)} .hs-route{--sw:.3} .lv-pearl{--x:-1%!important} } @media (orientation:portrait) and (min-width:700px) and (max-width:1100px){.hc-map{width:34cqw}.hc-chat{left:60cqw;width:40cqw}} /* short landscape screens (phones turned sideways): copy on the left, the scene on the right at full height, no scrolling */ @media (orientation:landscape) and (max-height:500px){ .hero{min-height:0;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-rows:minmax(0,1fr);align-items:center} .hero-in{width:auto;margin:0;padding:0 0 0 var(--gut);align-items:flex-start;text-align:left} .hero-h{font-size:clamp(28px,4.8vw,46px);line-height:1.04} .hs{align-self:stretch;margin-top:0} /* no free band edge beside the copy here: the background layer alone carries the depth */ .lv{display:none} } /* keep the phone mockup clear of the floating AI button (shown from 761px) */ @media (orientation:landscape) and (max-height:500px) and (min-width:761px){ .hs{padding-right:76px} .hs-in{width:min(100cqw - var(--gut),calc(var(--ar)*100cqh))} } @media (max-width:560px){ .hero-in{padding-top:clamp(10px,2vh,24px)} .hero-h{font-size:clamp(32px,10.4vw,46px);line-height:1.02} .lv-bub{--x:88%!important;--y:calc(var(--hdr) + 236px)!important;--s:34px!important} .lv-pearl{--x:-5%!important;--y:calc(var(--hdr) + 290px)!important;--s:40px!important} } /* ==== 30-home.css ==== */ /* WhiteWays · home below the hero, shared rules only. Each scene has its own file: 31 services (ly-/hs-) · 32 work (hw-) · 33 how (rd-/hh-) · 34 month (mc-/hmo-) · 35 plan (pw-/hp-). The old „Кино“ scene rules (.hm-sv/-wk/-hw/-mo/-rp/-pl) were removed 2026-09-30; copy in _archive/2026-09-30-home-dead-code/. */ .hm-main svg .sq{transform-box:fill-box;transform-origin:50% 50%} .hm-main .scn-title{font-size:clamp(38px,4.6vw,64px)} /* ==== 31-home-services.css ==== */ /* WhiteWays · home #services „assemble“ (services team, HOME-WOW round 2026-09-30, brief docs/briefs/HOME-WOW-BRIEF.md §2). Six iso slabs (2D SVG) drop in apart, click together into one lit block, and the block grows into the poster object; the report bars grow out of its top. Every size is in design units: --u = one px of the 1240 x 620 desktop stage (scales with the stage width), .72px on phones, 1px on tablets. Geometry vars on .ly-stage: --lp exploded pitch, --lq shut pitch, --lb shut base (distance of the shut block above the box bottom), --lh box height, --sc final scale of the shut block, --spo / --spz the spine's exploded / shut length (share of the 390u desktop spine), --spb its breath stretch, --hw / --ho halo width / offset. Timing: --ts scales the whole sequence (1 on tall desktops, .62 on phones, tablets and short screens, so the click lands while the block is still in the middle of the screen for a visitor who keeps scrolling). Wrappers: .ly-box (the grow) > .ly-lay (drop-in, .sq) > .ly-z (the click) > .ly-b (the one calm loop, only while .live). Base state = the shut, grown block. Before the stage plays, the stack waits as a faint exploded ghost (never an empty field). */ .ly{padding-top:clamp(64px,6vw,88px)} .ly .scn-head{max-width:1080px;margin-bottom:clamp(12px,1.6vw,22px)} /* phones + tablets: a compact stack (46u pitch) so the shut block sits right above the legend */ .ly-stage{--u:.72px;--lp:46;--lq:14;--lb:56;--lh:412;--sc:1.2;--spo:.5897;--spz:.1795;--spb:1.4286;--hw:380;--ho:116; --ts:.62;--sq-gap:calc(.16s * var(--ts));--tdr:.5s;--tcl:.6s; position:relative;isolation:isolate;max-width:1240px;margin-inline:auto;container-type:inline-size;overflow-x:clip} /* Two quiet floor contours anchor the service stack without another card. */ .ly-stage::before,.ly-stage::after{content:"";position:absolute;z-index:-1;left:50%;top:calc(260 * var(--u)); width:84%;height:calc(260 * var(--u));translate:-50% 0;border:1px solid rgba(143,160,255,.2);border-radius:50%; background:radial-gradient(ellipse,rgba(35,53,255,.13),transparent 68%);pointer-events:none; mask-image:linear-gradient(180deg,transparent,#000 45%,#000 80%,transparent)} .ly-stage::after{top:calc(300 * var(--u));width:62%;height:calc(180 * var(--u));background:none;border-color:rgba(170,192,255,.3)} @media (max-width:1023px){ .ly-stage::before{top:calc(210 * var(--u));width:100%;height:calc(170 * var(--u))} .ly-stage::after{top:calc(245 * var(--u));width:74%;height:calc(110 * var(--u))} } /* ---------- the stack ---------- */ .ly-box{position:relative;width:calc(340 * var(--u));height:calc(var(--lh) * var(--u));margin-inline:auto; transform-origin:calc(170 * var(--u)) calc((var(--lh) - var(--lb) - 91 - 2.5 * var(--lq)) * var(--u));transform:scale(var(--sc))} .ly-lay{position:absolute;left:0;bottom:0;width:100%; --yo:calc(var(--i) * var(--lp) * -1 * var(--u)); --ys:calc((var(--lb) + var(--i) * var(--lq)) * -1 * var(--u)); transition:translate .6s var(--ease)} .ly-z{position:relative;transform:translateY(var(--ys));transition:opacity .3s} .ly-b{position:relative} .ly-slab{display:block;width:100%;height:auto;overflow:visible} .ly-face{fill:url(#ly-fg);stroke:#DFE3EE;stroke-width:1;vector-effect:non-scaling-stroke} .ly-rim{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke} /* rim light: the lit (left) side of every slab gets a pale edge along its lower rim, so the strata read as lit edges */ .ly-slab>g[clip-path] rect{stroke:#DDE3FF;stroke-width:1.6;vector-effect:non-scaling-stroke} .ly-bolt{fill:#fff;stroke:#2335FF;stroke-width:1.5} /* the Сб bar: the lit one. White top with a cobalt edge, brighter sides, a lavender glow */ .ly-sat{stroke:#2335FF;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke} .ly-bar-sat{filter:drop-shadow(0 0 6px rgba(143,160,255,.9))} /* contact shadow a slab casts on the slab below while the stack is apart; it fades as the gap closes */ .ly-shd{position:absolute;left:calc(35 * var(--u));top:calc((26 + var(--lp)) * var(--u));width:calc(270 * var(--u));height:calc(106 * var(--u)); border-radius:50%;background:radial-gradient(closest-side,rgba(11,18,51,.42),rgba(11,18,51,.18) 62%,rgba(11,18,51,0));opacity:0;pointer-events:none} /* spine + seam: drawn for the 572u desktop box, bottom-anchored (preserveAspectRatio xMidYMax slice), so the SVG box is exactly the stack box at every size and never reaches above it; paths are shifted by the shut base */ .ly-over{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--lh) * var(--u));overflow:visible;pointer-events:none} .ly-over path{fill:none;stroke-linecap:round} .ly-sp0{stroke:#2335FF;stroke-width:5} .ly-sp1{stroke:#fff;stroke-width:2.2} .ly-sp-z{transform-box:view-box;transform-origin:170px 562px;transform:translateY(calc(var(--lb) * -1px)) scaleY(var(--spz))} .ly-sp-b{transform-box:view-box;transform-origin:170px calc(562px - var(--lb) * 1px)} /* two seam outlines, one per block geometry (a: compact, b: desktop), drawn at the shut block's own coordinates */ .ly-seam{stroke:#fff;stroke-width:2.2;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))} .ly-seam-b{display:none} .ly-halo{position:absolute;left:calc((170 - var(--hw) / 2) * var(--u));top:calc((var(--lh) - var(--lb) - var(--ho)) * var(--u)); width:calc(var(--hw) * var(--u));height:calc(190 * var(--u));border-radius:50%; background:radial-gradient(closest-side,rgba(150,168,255,.62),rgba(60,84,255,.3) 55%,transparent 100%);pointer-events:none} /* the floor: a soft bright pool right under the shut block, the light the block stands in (380u on phones so the grown pool stays inside 360px; 440u from tablets up) */ .ly-floor{position:absolute;left:calc((170 - var(--fw,380) / 2) * var(--u));width:calc(var(--fw,380) * var(--u));top:calc((var(--lh) - var(--lb) - 40) * var(--u));height:calc(96 * var(--u)); border-radius:50%;background:radial-gradient(closest-side,rgba(226,231,255,.5),rgba(143,160,255,.2) 45%,rgba(60,84,255,0) 100%);pointer-events:none} /* cobalt light from the left: the lit sides of the strata catch it (phones: kept inside the box's gutter, so no rect passes the viewport's left edge at 360 or 641; desktop reaches further out) */ .ly-lit{position:absolute;left:calc(var(--ll,-25) * var(--u));width:calc(var(--lw,215) * var(--u));top:calc((var(--lh) - var(--lb) - 250) * var(--u));height:calc(240 * var(--u)); border-radius:50%;background:radial-gradient(closest-side,rgba(46,69,255,.55),rgba(46,69,255,.18) 55%,rgba(46,69,255,0));pointer-events:none} /* ---------- leaders (desktop only) ---------- */ .ly-leads{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .ly-leads path{fill:none;stroke:#C9D2FF;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke} .ly-la{opacity:0} .ly-lb{opacity:.75} .ly-lb>*{transition:opacity .3s} .ly-sk{transform-box:view-box} /* ---------- labels: one list; a 2-column legend on phones ---------- */ /* the right margin keeps every pill clear of the fixed back-to-top / assistant column (16px + 58px orb + air) */ /* subscription round (2026-10-01): the labels are outcomes (longer words), so phones use word-sized chips that grow to fill each row (no label wraps inside its chip at 360/390); the old 2-column grid is in _archive/2026-10-01-subscription/b1-home/ */ .ly-leg{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px calc(78px - var(--gut)) 0 0;padding:0} .ly-li{flex:1 1 auto;min-width:0} .ly-pill{display:flex;align-items:center;gap:8px;min-width:0;min-height:48px;height:100%;padding:6px 12px 6px 8px;border-radius:24px;color:#fff; font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;justify-content:center; background:linear-gradient(155deg,rgba(143,160,255,.16),rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(219,228,255,.26),inset 0 0 0 1px var(--hair),0 8px 20px -16px #000;transition:background-color .3s,box-shadow .3s} .ly-pill:hover,.ly-pill:focus-visible{background-color:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)} /* the swatch is a tile in the layer's side colour carrying the service icon, so the legend reads without the leaders */ .ly-sw{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--c);color:var(--g,#fff); box-shadow:0 0 0 1px rgba(255,255,255,.28)} .ly-sw .ic{width:14px;height:14px;stroke-width:2.2} /* phones: sequence in pairs in reading order (2026-10-01: Сайт · Магазин · Google · Реклама · AI асистент · Резервации · Видео и визия · Отчет); desktop places each label absolutely by --y / data-i, so the DOM order only changes phones */ .ly-li:nth-child(1) .ly-pill{--s:8} .ly-li:nth-child(2) .ly-pill,.ly-li:nth-child(3) .ly-pill{--s:8.7} .ly-li:nth-child(4) .ly-pill,.ly-li:nth-child(5) .ly-pill{--s:9.4} .ly-li:nth-child(6) .ly-pill,.ly-li:nth-child(7) .ly-pill{--s:10.1} .ly-li:nth-child(8) .ly-pill{--s:10.8} /* the foot button rides the stage: it waits for the stage's .play (not its own trigger line) and arrives right after the last legend pill (phones: .15s + 7.5 x .16s = 1.35s; Автоматизации lands at 1.22s), so a visitor who keeps scrolling never meets an empty band where the button will be */ .ly .scn-foot .sq{--s:7.5} /* phones: the button sits under the legend's column, so it keeps the same clear right gutter from the fixed buttons */ @media (max-width:640px){.ly .scn-foot{margin-right:calc(78px - var(--gut))}} html.js .ly:has(.ly-stage:not(.play)) .scn-foot .sq{animation:none!important} /* ---------- sequence (every delay is scaled by --ts) ---------- */ /* the stage plays on its own trigger (31-home-services.js adds .play; no [data-play], so 12-stage.js leaves it alone): until then every .sq inside holds, even though the scene itself already has .play */ html.js .ly-stage:not(.play) .sq{animation:none!important} @keyframes lyDrop{from{opacity:0;transform:translateY(calc(-60 * var(--u)))}to{opacity:1;transform:none}} @keyframes lyClick{from{transform:translateY(var(--yo))}to{transform:translateY(var(--ys))}} @keyframes lyGrow{from{transform:scale(1)}to{transform:scale(var(--sc))}} @keyframes lySpine{from{transform:translateY(0) scaleY(var(--spo))}to{transform:translateY(calc(var(--lb) * -1px)) scaleY(var(--spz))}} @keyframes lyShd{from{opacity:1}to{opacity:0}} @keyframes lyFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}} @keyframes lyHalo{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} @keyframes lyOut{from{opacity:.75}to{opacity:0}} @keyframes lyRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}} /* the one calm loop: the block eases open a little and back */ @keyframes lyBreath{to{transform:translateY(calc(var(--i) * -6 * var(--u)))}} @keyframes lySpB{to{transform:scaleY(var(--spb))}} @keyframes lySkew{to{transform:skewY(var(--sk))}} @keyframes lyGlow{to{opacity:.72}} /* the ghost: before .play the stack waits exploded at 14% (the slabs keep it until their own drop starts: fill forwards) */ @media (prefers-reduced-motion:no-preference){ html.js .ly-stage .ly-lay.sq{opacity:.14} html.js .ly-stage:not(.play) .ly-z{transform:translateY(var(--yo))} html.js .ly-stage:not(.play) .ly-box{transform:none} html.js .ly-stage:not(.play) :is(.ly-halo,.ly-floor,.ly-lit){opacity:0} } html.js .ly-stage.play .ly-lay.sq{animation-name:lyDrop;animation-duration:var(--tdr);animation-fill-mode:forwards} html.js .ly-stage.play .ly-z{animation:lyClick var(--tcl) cubic-bezier(.7,0,.2,1.15) calc(var(--d0) + 1.9s * var(--ts)) both} html.js .ly-stage.play .ly-box{animation:lyGrow var(--tcl) cubic-bezier(.7,0,.2,1.15) calc(var(--d0) + 1.9s * var(--ts)) both} html.js .ly-stage.play .ly-sp-z{animation:lySpine var(--tcl) cubic-bezier(.7,0,.2,1.15) calc(var(--d0) + 1.9s * var(--ts)) both} html.js .ly-stage.play .ly-shd{animation:lyShd .5s ease calc(var(--d0) + 1.9s * var(--ts)) both} html.js .ly-stage.play .ly-over .sq-draw{animation-duration:calc(.8s * var(--ts) + .1s)} html.js .ly-stage.play .ly-seam{animation:lyFlash .6s ease-out calc(var(--d0) + 2.45s * var(--ts)) both} html.js .ly-stage.play :is(.ly-floor,.ly-lit){animation:lyHalo 1s var(--ease) calc(var(--d0) + 2.45s * var(--ts)) both} html.js .ly-stage.play .ly-halo{animation:lyHalo 1s var(--ease) calc(var(--d0) + 2.45s * var(--ts)) both,lyGlow 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate; animation-play-state:running,paused} html.js .ly-stage.play .ly-bar{animation-delay:calc(var(--d0) + (2.6s + var(--k) * .085s) * var(--ts));animation-duration:.6s} .ly-ring{opacity:0} html.js .ly-stage.play .ly-ring{transform-box:fill-box;transform-origin:50% 50%;animation:lyRing 1s ease-out calc(var(--d0) + 1.15s * var(--ts)) both} /* set A fades as the collapse starts; set B draws from the seam flash on, so the lines hand over inside the click */ html.js .ly-stage.play .ly-la{animation:lyOut .45s ease calc(var(--d0) + 1.85s * var(--ts)) both} html.js .ly-stage.play .ly-la .sq-draw{animation-duration:.7s} html.js .ly-stage.play .ly-lb .sq-draw{animation-duration:.6s} html.js .ly-stage.play .ly-b{animation:lyBreath 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate both;animation-play-state:paused} html.js .ly-stage.play .ly-sp-b{animation:lySpB 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate both;animation-play-state:paused} html.js .ly-stage.play .ly-sk{animation:lySkew 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate both;animation-play-state:paused} html.js .ly.live .ly-stage.play .ly-b,html.js .ly.live .ly-stage.play .ly-sp-b,html.js .ly.live .ly-stage.play .ly-sk{animation-play-state:running} html.js .ly.live .ly-stage.play .ly-halo{animation-play-state:running} /* hover / focus on a label (desktop, set by 31-home-services.js): the layers above lift and go see-through, the hovered layer rises a little, and every set-B leader but the hovered one dims. The lift is capped so the top slab stays clear of the heading: the lift sits inside the 1.55x grown box, so 36u lift + 30u top breath = 102px at 1440, which keeps the tip under the heading at 1024-1920 */ .ly-lay.ly-up{translate:0 calc(-36 * var(--u))} .ly-lay.ly-up .ly-z{opacity:.4} .ly-lay.ly-hot{translate:0 calc(-8 * var(--u))} .ly-lay[data-i="5"].ly-hot{translate:0 calc(-18 * var(--u))} .ly-stage[data-hot] .ly-lb>*{opacity:.35} .ly-stage[data-hot="0"] .ly-lb>[data-i="0"],.ly-stage[data-hot="1"] .ly-lb>[data-i="1"],.ly-stage[data-hot="2"] .ly-lb>[data-i="2"], .ly-stage[data-hot="3"] .ly-lb>[data-i="3"],.ly-stage[data-hot="4"] .ly-lb>[data-i="4"],.ly-stage[data-hot="5"] .ly-lb>[data-i="5"]{opacity:1} /* ---------- tablets: the full-size compact stack; the legend is a centred row of chips (each chip as wide as its words, so Сайт and Магазин stay side by side and no chip is stretched), well clear of the FAB column ---------- */ @media (min-width:641px){ .ly-stage{--u:1px;--hw:460;--ll:-70;--lw:260;--fw:440} .ly-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:640px;margin:26px auto 0} .ly-li{flex:none} .ly-pill{justify-content:flex-start;padding:6px 16px 6px 10px;gap:10px} } /* ---------- desktop: the full 78u exploded stack, labels around it, joined by leader lines. The shut block is the poster: 22u strata pitch, 1.55 scale, centred in the stage ---------- */ @media (min-width:1024px){ .ly{padding-bottom:clamp(64px,6vw,104px)} .ly .scn-head{margin-bottom:clamp(28px,2.8vw,40px)} .ly .scn-foot{margin-top:clamp(18px,1.8vw,28px)} .ly-stage{--u:calc(100cqw / 1240);--lp:78;--lq:22;--lb:144;--lh:572;--sc:1.55;--ll:-110;--lw:300;--spo:1;--spz:.2821;--spb:1.2727;--hw:560;--ho:150; aspect-ratio:1240/620} .ly-box{position:absolute;left:calc(450 * var(--u));top:calc(24 * var(--u));margin:0} .ly-seam-a{display:none} .ly-seam-b{display:inline} .ly-leads{display:block} .ly-leg{display:block;max-width:none;margin:0} .ly-li{position:absolute;top:calc(var(--y) * var(--u) - 24px)} .ly-li.l{right:calc(940 * var(--u))} .ly-li.r{left:calc(940 * var(--u))} .ly-li.c{left:0;right:0;top:calc(552 * var(--u));display:flex;justify-content:center;pointer-events:none} .ly-li.c .ly-pill{pointer-events:auto} /* glass without backdrop blur: the stage behind is a soft gradient, so a blur adds nothing but a re-blur every frame */ .ly-pill{height:auto;padding:0 20px 0 12px;border-radius:999px;font-size:17px;white-space:nowrap;background:rgba(255,255,255,.09)} .ly-sw{width:26px;height:26px;border-radius:8px} .ly-sw .ic{width:16px;height:16px} /* Сайт | Магазин: two links drawn as one split pill */ .ly-li.sb{width:118px} .ly-li.sa{right:calc(940 * var(--u) + 118px)} .ly-li.sa .ly-pill{border-radius:999px 0 0 999px;padding-right:14px} .ly-li.sb .ly-pill{border-radius:0 999px 999px 0;padding-left:16px;box-shadow:inset 0 0 0 1px var(--hair),inset 1px 0 0 rgba(255,255,255,.28)} .ly-li.sb .ly-sw{display:none} /* labels fade in bottom → top with their leaders; the spine label arrives after the click */ .ly-li .ly-pill{--s:9} .ly-li[data-i="0"] .ly-pill{--s:5} .ly-li[data-i="1"] .ly-pill{--s:5.8} .ly-li[data-i="2"] .ly-pill{--s:6.6} .ly-li[data-i="3"] .ly-pill{--s:7.4} .ly-li[data-i="4"] .ly-pill{--s:8.2} .ly-li[data-i="sp"] .ly-pill{--s:15.6} html.js .ly-stage.play .ly-pill.sq{animation-name:sqFade;animation-duration:.6s} /* short desktops (compact timing): the button follows the spine label (.15s + 11 x .16s = 1.9s) */ .ly .scn-foot .sq{--s:11} } /* narrow desktops (1024–1279): „Обаждания | Поръчки“ no longer fits as one split pill left of the stack (the stage clips x), so the two pills stack: Обаждания on the slab's leader, Поръчки right under it */ @media (min-width:1024px) and (max-width:1279px){ .ly-li.sa{right:calc(940 * var(--u))} .ly-li.sb{width:auto;top:calc(var(--y) * var(--u) + 32px)} .ly-li.sa .ly-pill,.ly-li.sb .ly-pill{border-radius:999px;padding:0 20px 0 12px;box-shadow:inset 0 0 0 1px var(--hair)} .ly-li.sb .ly-sw{display:grid} } /* tall desktops play the full-length film; short screens keep the compact timing so the click happens in view */ @media (min-width:1024px) and (min-height:821px){ .ly-stage{--ts:1;--tdr:.8s;--tcl:.7s} .ly .scn-foot .sq{--s:17} } /* ---------- wide screens: the scene's wrap widens to 1400 and the stage fills it (--u follows the stage width) ---------- */ @media (min-width:1600px){ .ly>.wrap{width:min(100% - 2 * var(--gut),1400px)} .ly-stage{max-width:none} } /* ---------- reduced motion: the shut, grown, lit block with its bars; no breathing, no lift ---------- */ @media (prefers-reduced-motion:reduce){ .ly-box,.ly-z,.ly-b,.ly-sp-z,.ly-sp-b,.ly-sk,.ly-la,.ly-seam,.ly-ring,.ly-halo,.ly-shd,.ly-floor,.ly-lit{animation:none!important} html.js .ly-stage .ly-halo{opacity:1} .ly-lay{transition:none;translate:none!important} .ly-z{transition:none;opacity:1!important} } /* ==== 32-home-work.css ==== */ /* WhiteWays · home #work „screening room“ (work team, HOME-WOW round 2026-09-30, prefix hw-). A lit laptop + phone play the scroll clips of 9 projects: 4 live client sites first („На живо“, solid white mark), then 5 WhiteWays concepts („Концепции“, dashed outline mark). Story segments on top auto-advance (the scene's one loop, gated by .live; JS pauses bar + clip together on rail/link hover, keyboard focus and a hidden tab (.hold) and while the clip is still loading (.wait); a hand pick stops it for good). The tabs are the sites' own posters under two group marks. ≥1281px: devices | a 250px poster rail with names. ≤1280px: the rail becomes a filmstrip under the devices. ≤1000px: the filmstrip scrolls sideways and stops short of the fixed back-to-top / AI buttons. ≤720px: the laptop leaves, the phone is the screen and plays the -mob clips. The room keeps clear of the fixed button column on desktop (same rule as #how) and never reaches into a neighbour. */ .hw .scn-head{max-width:980px;margin-bottom:clamp(36px,4.4vw,64px)} .hw .scn-title em{white-space:nowrap} .hw-room{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(40px,4.4vw,64px);align-items:center;max-width:1180px;margin-inline:auto} /* the fixed back-to-top + AI buttons sit in the right 28px+54px column: the room stays out of it */ @media (min-width:1001px){.hw-room{max-width:min(1180px,100vw - 192px)}} .hw-dev{position:relative;min-width:0} /* ---- story segments: live = white fill, concept = lavender fill, a gap between the two groups ---- */ .hw-segs{display:flex;gap:6px;width:92%;margin:0 0 58px;padding:0;list-style:none} .hw-seg{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden} .hw-seg.c1{margin-left:14px} .hw-seg b{display:block;height:100%;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:0 50%} .hw-seg.cpt b{background:#8FA0FF} .hw-seg.done b{transform:none;opacity:.6} .hw-seg.cur b{transform:scaleX(.02)} .hw-room.run .hw-seg.cur b{animation:hwBar var(--dur,9s) linear forwards} .hw-room:not(.live) .hw-seg.cur b,.hw-room.hold .hw-seg.cur b,.hw-room.wait .hw-seg.cur b{animation-play-state:paused} /* a hand pick stops the loop for good: the picked project's segment shows full */ .hw-room.man .hw-seg.cur b{animation:none;transform:none} @keyframes hwBar{from{transform:scaleX(.02)}to{transform:scaleX(1)}} /* ---- the devices ---- */ .hw-set{position:relative;padding-bottom:3.2%;touch-action:pan-y} /* ambient light: a blurred still of the current site spills its colours onto the stage (static blur, opacity crossfade) */ .hw-amb{position:absolute;left:-4%;right:2%;top:-14%;bottom:-8%;pointer-events:none} .hw-amb i{position:absolute;inset:0;border-radius:44%;background:center/cover no-repeat;filter:blur(90px) saturate(1.5);opacity:0;transition:opacity 1.4s var(--ease)} .hw-amb i.on{opacity:.8} /* floor light under the laptop */ .hw-set::after{content:"";position:absolute;left:-4%;right:6%;bottom:-7%;height:18%;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(143,160,255,.34),rgba(143,160,255,0))} .hw-lap{position:relative;z-index:1;width:92%} .hw-lid{position:relative;padding:1.3% 1.3% 1.5%;border-radius:20px 20px 6px 6px;background:linear-gradient(#232A62,#0A0E2C); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 60px 120px -50px rgba(0,0,0,.85)} .hw-scr{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#0B1233} .hw-base{position:relative;height:clamp(10px,1.3vw,18px);margin:0 -5%;border-radius:2px 2px 26px 26px/2px 2px 100% 100%; background:linear-gradient(#E6EAF8,#9BA6D3 60%,#6A76AE);box-shadow:0 26px 40px -18px rgba(0,0,0,.7)} /* the screen's light on the desk: a blurred still of the current site, a fifth of the laptop's height, under the base */ .hw-rf{position:absolute;z-index:-1;left:4%;right:4%;top:100%;height:20%;margin-top:-2%;pointer-events:none} .hw-rf i{position:absolute;inset:0;border-radius:50%;background:center/cover no-repeat;filter:blur(28px) saturate(1.6);opacity:0;transform:scaleY(-1); transition:opacity 1.4s var(--ease)} .hw-rf i.on{opacity:.35} .hw-base::before{content:"";position:absolute;left:50%;top:0;width:13%;height:42%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#B6BFE6} .hw-ph{position:absolute;z-index:2;right:0;bottom:0;width:21%;padding:6px;border-radius:30px;background:#0A0E2C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 40px 70px -24px rgba(0,0,0,.85)} .hw-phs{position:relative;aspect-ratio:300/650;border-radius:24px;overflow:hidden;background:#0B1233} /* one layer per project, crossfaded */ .hw-s{position:absolute;inset:0;opacity:0;transform:scale(1.035);transition:opacity .9s var(--ease),transform 1.3s var(--ease)} .hw-s.on{opacity:1;transform:none} .hw-s video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:#0B1233} /* Arsenov Style has no clip (its page is too short to scroll): its still pushes in slowly for the 6 s of its step */ .hw-s.push video{transform-origin:50% 20%} .hw-room:is(.run,.man) .hw-s.push.on video{animation:hwPush 6s linear forwards} .hw-room:not(.live) .hw-s.push video,.hw-room.hold .hw-s.push video{animation-play-state:paused} @keyframes hwPush{from{transform:none}to{transform:scale(1.06)}} /* the badge above the lid (never on the site on screen): which kind is showing; the room's data-kind picks one */ .hw-bd{position:absolute;z-index:3;left:0;top:-44px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px; font:600 13px/1 var(--f);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(4px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .hw-bd.live{background:#fff;color:var(--ink);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)} .hw-bd.cpt{background:linear-gradient(rgba(143,160,255,.26),rgba(143,160,255,.26)),#0B1233;color:#fff; box-shadow:0 10px 24px -10px rgba(0,0,0,.6);outline:1.5px dashed #C9D1FF;outline-offset:-5px} .hw-room[data-kind="live"] .hw-bd.live,.hw-room[data-kind="cpt"] .hw-bd.cpt{opacity:1;transform:none} .hw-ph .hw-bd{display:none} /* ---- the marks (group labels, badges): solid = live, dashed outline = concept ---- */ .hw-mk{display:inline-flex;align-items:center;gap:7px;flex:none;height:26px;padding:0 11px;border-radius:999px; font:600 13px/1 var(--f);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap} .hw-mk.live,.hw-bd.live{--dot:var(--cobalt)} .hw-mk.live{background:#fff;color:var(--ink)} .hw-mk.cpt{color:#fff;background:rgba(143,160,255,.18);border:1.5px dashed #C9D1FF} .hw-mk.live i,.hw-bd.live i{width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 3px rgba(35,53,255,.2)} /* ---- caption under the devices: the project now on screen + its link ---- */ .hw-caps{display:grid;width:92%;margin-top:30px} .hw-cap{grid-area:1/1;display:flex;align-items:center;gap:14px 18px;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .6s} .hw-cap.on{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s} .hw-cn{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0 auto 0 0} .hw-cn b{font-size:clamp(21px,1.8vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:#fff} .hw-cn span{font-size:16px;line-height:1.35;color:var(--on-3)} .hw-go{flex:none;min-height:48px;padding:0 20px;font-size:16px} .hw-go .ic{width:17px;height:17px} .hw-go:hover .ic{transform:translate(2px,-2px)} /* ---- the rail: the sites' own posters, in two marked groups ---- */ .hw-rail{position:relative;display:flex;flex-direction:column;gap:26px;min-width:0} .hw-grp{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0} .hw-grp.cpt::before{content:"";position:absolute;left:0;right:0;top:-13px;border-top:1px solid var(--hair)} .hw-gl{margin:0 0 0 6px;align-self:flex-start} .hw-tl{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none} .hw-t button{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:5px 10px 5px 5px;border:0;border-radius:14px; background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background-color .35s,box-shadow .35s} .hw-th{position:relative;flex:none;display:block;width:64px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#141B4A; opacity:.55;transition:opacity .35s,transform .5s var(--ease)} .hw-th::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:box-shadow .35s} .hw-th picture,.hw-th img{display:block;width:100%;height:100%} .hw-th img{object-fit:cover;object-position:50% 0} .hw-t button b{font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.015em;opacity:.6;transition:opacity .35s} .hw-t button:hover{background:rgba(255,255,255,.05)} .hw-t button:hover b,.hw-t button:hover .hw-th{opacity:.95} .hw-t.cur button{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .hw-t.cur b,.hw-t.cur .hw-th{opacity:1} .hw-t.cur .hw-th::after{box-shadow:inset 0 0 0 2px #fff} .hw-t button:focus-visible{outline:2px solid #fff;outline-offset:2px} /* ---- ≤1280px: devices centred and big, the rail becomes a filmstrip of posters under them (names only for screen readers) ---- */ @media (max-width:1280px){ .hw-room{grid-template-columns:minmax(0,1fr);gap:34px} /* 780px wide at most (the 1281px side-rail laptop is 720px: the laptop never shrinks as the window grows); on short screens the whole room (devices + caption + filmstrip) still fits under the header */ .hw-dev,.hw-rail{width:min(100%,780px,max(560px,(100svh - 230px) * 1.25));margin-inline:auto} .hw-rail{flex-direction:row;gap:24px} .hw-grp{gap:10px} .hw-grp.live{flex:4 1 0} .hw-grp.cpt{flex:5 1 0} .hw-grp.cpt::before{left:-12px;right:auto;top:0;bottom:0;border-top:0;border-left:1px solid var(--hair)} .hw-gl{margin:0} .hw-tl{flex-direction:row;gap:8px;padding-top:4px} .hw-t{flex:1 1 0;min-width:0} .hw-t button{display:block;min-height:0;padding:0;border-radius:10px;background:none} .hw-t button:hover,.hw-t.cur button{background:none;box-shadow:none} .hw-t button b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hw-th{width:100%;min-height:46px;border-radius:10px} .hw-t.cur .hw-th{transform:translateY(-4px)} .hw-t button:focus-visible{outline-offset:3px;border-radius:10px} } /* ---- ≤1000px: the filmstrip scrolls sideways and ends before the fixed button column (right 92px, 80px on phones) ---- */ @media (max-width:1000px){ .hw-rail{width:auto;margin:0 calc(92px - var(--gut)) 0 calc(-1 * var(--gut));padding:0 28px 6px var(--gut);gap:24px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut) 28px;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)} .hw-rail::-webkit-scrollbar{display:none} .hw-grp{flex:none} .hw-grp.live,.hw-grp.cpt{flex:none} .hw-t{flex:none;width:104px;scroll-snap-align:start} .hw-tl{padding-top:6px} } /* ---- phones: the phone is the screen (-mob clips), laptop hidden; the tabs are small portrait posters ---- */ @media (max-width:720px){ .hw{--hw-pw:min(68vw,270px,max(210px,(100svh - 230px) * .46))} .hw-segs{width:var(--hw-pw);margin:0 auto 54px;gap:4px} .hw-seg.c1{margin-left:9px} .hw-set{width:var(--hw-pw);margin-inline:auto;padding-bottom:0} .hw-set::after{left:-20%;right:-20%;bottom:-6%;height:12%} .hw-amb{left:-22%;right:-22%;top:-4%;bottom:-2%} .hw-amb i{filter:blur(48px) saturate(1.35)} .hw-lap{display:none} .hw-ph{position:relative;width:100%;padding:7px;border-radius:40px} .hw-phs{border-radius:33px} .hw-ph .hw-bd{display:inline-flex;left:50%;top:-42px;translate:-50% 0} .hw-caps{width:auto;margin-top:26px} .hw-cap{flex-direction:column;justify-content:flex-start;text-align:center} .hw-cn{margin:0;align-items:center} .hw-go{max-width:100%} .hw-room{gap:30px} .hw-rail{margin-right:calc(80px - var(--gut))} .hw-t{width:48px} .hw-th{aspect-ratio:3/5;border-radius:9px} } @media (max-width:420px){ .hw .scn-title em{white-space:normal} } /* reduced motion: the first project, still, with its light; tabs switch without a fade (the stage handles .sq) */ @media (prefers-reduced-motion:reduce){ .hw-seg.cur b{animation:none!important;transform:none} .hw-s.push video{animation:none!important} .hw-s,.hw-cap,.hw-bd,.hw-amb i,.hw-rf i,.hw-th{transition:none} .hw-s,.hw-t.cur .hw-th{transform:none} } /* ==== 33-home-how.css ==== */ /* WhiteWays · home #how (night): the road you drive with your scroll (HOME-WOW round, 2026-09-30, prefix hh-). Spec: docs/briefs/HOME-WOW-BRIEF.md §3. One white road, 4 stops, each a lit vignette + a rubber stamp. No pin, no scroll lock (owner, 2026-09-30): the scene plays once when it reaches the screen, the page always scrolls freely. Desktop: the road paints across and the 4 stops light up in order (.sq timing on the [data-play] stage). ≤900px: the road runs down; every stop is its own [data-play] group and plays as it reaches the screen. The pinned, scroll-scrubbed version is in _archive/2026-09-30-how-no-pin/. Reduced motion: final picture (road painted, stops lit, stamps placed, no loop). The final state is the base state of every element; animations only run *from* the start state. Round 2 (critique): no negative margin into #work, frame clips x, stage keeps clear of the FAB column, stamps are inked rubber stamps (700, 4px ring, static ink-wear mask, own angle per stop), the one fact „1–3“ is set big, discs start as dark glass (navy shade), the disc thunks when its stamp lands. Subscription round (2026-10-01): stops are plan · short call · launch · numbers. Stop 1 carries the plan-card art, stop 2 the shop + magnifier, stop 4 a report card whose 7 bars (6·8·9·12·19·22·12, the report.html week) rise once. The calendar and its hop loop are gone (archived in _archive/2026-10-01-subscription/b1-home/). */ .hh-defs{position:absolute;width:0;height:0;overflow:hidden} /* Round 3: the discs take ~88% of their column (up to 280px, capped by 31vh so the frame still fits 1280×720), the stamps sit tighter on the disc so they never reach the next disc, the pin is 300vh (a slam spans ~2 wheel notches), the frame content is top-aligned (no dead air at the seams), the drawings break the disc rim (a foreground layer outside the circle). */ /* Round 4: the discs take ~95% of their column (up to 300px, capped by 33vh so the frame still fits 1280×640); the stamps only hang over the empty top corner of the next disc's box, never over its drawing. */ .hh{--col:calc(min(1180px,100vw - 220px) / 4);--vz:clamp(140px,min(calc(var(--col) * .95),33vh),300px); --sz:clamp(100px,calc(var(--vz) * .5),132px);--dg:34px;--fs:clamp(13px,calc(var(--sz) * .11),14px);--ls:.03em} .hh .hh-head{max-width:none} /* the stage keeps clear of the fixed back-to-top / assistant column on the right (28px + 54px + ≥24px air) */ .hh-stage{position:relative;max-width:1180px;margin-inline:auto} @media (min-width:901px){.hh-stage{max-width:min(1180px,100vw - 220px)} /* desktop: the promise on its own line under „Вие одобрявате.“ */ .hh .hh-head .scn-title em{display:block}} /* ---------- road (desktop) ---------- */ .hh-road{position:absolute;left:0;right:0;z-index:0;height:22px;top:calc(var(--sz) * .42 + var(--vz) + var(--dg) + 11px)} .hh-bed{position:absolute;inset:0;border-radius:11px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--hair); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .hh-bed::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;margin-top:-1px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 18px,transparent 18px 32px)} .hh-paint{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#fff; box-shadow:0 0 18px rgba(255,255,255,.55);transform-origin:0 50%} /* the headlight: as wide as the road, its dot sits on the right edge; it travels translateX(-100% → 0) with the paint tip */ .hh-lamp{position:absolute;inset:0;pointer-events:none} .hh-lamp::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.14),0 0 26px 7px rgba(170,190,255,.85)} /* ---------- stops ---------- */ .hh-stops{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:calc(var(--sz) * .42)} .hh-stop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center} .hh-seg{display:none} .hh-fig{order:0;position:relative;width:var(--vz);height:var(--vz)} .hh-viz{position:absolute;inset:0} /* the disc's drop shadow is a static layer under the art (no filter on the animated drawing) */ .hh-viz::before{content:"";position:absolute;inset:3%;border-radius:50%;box-shadow:0 18px 30px rgba(2,4,24,.55)} .hh-art{position:relative;display:block;width:100%;height:100%;overflow:visible} .hh-glow{position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(closest-side,rgba(46,69,255,.55),rgba(46,69,255,.16) 58%,transparent)} .hh-ring{position:absolute;inset:-4%;border-radius:50%;opacity:0;box-shadow:0 0 0 2.5px #fff,0 0 34px 6px rgba(160,178,255,.7),inset 0 0 26px rgba(160,178,255,.45)} /* unlit = dark glass: a navy shade over the disc that clears as the stop lights up (0 in the final picture) */ .hh-shade{position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none; background:radial-gradient(circle at 50% 32%,rgba(20,30,92,.72),rgba(6,10,40,.9) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .hh-dot{order:1;position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:var(--dg);border-radius:50%; background:#fff;color:var(--cobalt);font:700 16px/1 var(--f);font-variant-numeric:tabular-nums; box-shadow:0 0 0 7px rgba(255,255,255,.08),0 10px 26px -8px rgba(0,0,0,.6)} .hh-h{order:2;max-width:100%;margin-top:20px;font-size:clamp(19px,1.65vw,24px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance} /* ---------- the rubber stamp (real text) ---------- Outer 4px ring + inner hairline, 700 caps, a static ink-wear mask (tiny bare specks, not a stage texture). Each stop has its own angle and offset; the angle lives on the inner span so .sq may reset transforms. */ .hh-stamp{--s:var(--sz);position:absolute;z-index:3;right:calc(var(--s) * var(--ox,-.34));top:calc(var(--s) * var(--oy,-.3)); width:var(--s);height:var(--s);border-radius:50%;box-shadow:0 12px 30px -10px rgba(0,0,0,.65)} .hh-stop:nth-child(1){--rot:-14deg;--ox:-.2;--oy:-.3;--mp:0 0} .hh-stop:nth-child(2){--rot:-7deg;--ox:-.22;--oy:-.4;--mp:40% 70%} .hh-stop:nth-child(3){--rot:-11deg;--ox:-.14;--oy:-.38;--mp:80% 20%} .hh-stop:nth-child(4){--rot:-9deg;--ox:-.2;--oy:-.28;--mp:20% 90%} .hh-st{position:relative;display:grid;place-items:center;align-content:center;width:100%;height:100%;padding:0 4px;border-radius:50%; transform:rotate(var(--rot,-10deg));border:4px solid #fff;background:rgba(255,255,255,.08); font:700 var(--fs)/1.12 var(--f);letter-spacing:var(--ls);text-transform:uppercase;text-align:center;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;color:#fff; -webkit-mask:var(--hh-ink) var(--mp)/170% 170%;mask:var(--hh-ink) var(--mp)/170% 170%} .hh-st::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6)} .hh{--hh-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -16 12.4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")} /* the one fact: filled, 1.2× bigger, „1–3“ set big like the headline's em; worn specks show a pale underlay, not the dark stage */ .hh-stamp.is-fill{--s:calc(var(--sz) * 1.2);background:rgba(214,221,255,.72);box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 44px rgba(143,160,255,.55),0 14px 34px -10px rgba(0,0,0,.65)} .hh-stamp.is-fill .hh-st{background:#fff;color:var(--ink);gap:2px} .hh-stamp.is-fill .hh-st::before{border-color:rgba(11,18,51,.32)} .hh-n{display:block;font-size:calc(var(--s) * .26);line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#0B1233} .hh-u{display:block} /* drawings: pops scale around their own centre */ .hh svg .hh-badge,.hh svg .hh-tick{transform-box:fill-box;transform-origin:50% 50%} /* stop 4: the report bars grow up from the baseline */ .hh svg .hh-rise rect{transform-box:fill-box;transform-origin:50% 100%} /* one foreground object per disc breaks the rim (magnifier, pointer, flag, big tick): the picture steps out of its frame */ .hh-big circle{fill:#2335FF;stroke:#fff;stroke-width:4.5} .hh-big path{fill:none;stroke:#fff;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round} /* ---------- phones: the road runs down ---------- Row 1 (--row tall): dot on the road | disc | stamp beside the disc (it bites ~20% into the disc's right edge). Row 2 (--tr tall): the title, under the disc, one line. Nothing reaches the right-hand column of the fixed back-to-top / AI buttons (x ≥ 308 at 390), so no title or stamp scrolls under them. */ @media (max-width:900px){ .hh{--vz:136px;--sz:84px;--row:148px;--tr:30px;--pt:22px;--gap:22px;--fs:13px;--ls:0em} .hh-road{display:none} .hh-stops{grid-template-columns:minmax(0,1fr);gap:var(--gap);max-width:520px;margin-inline:auto;padding-top:0} .hh-stops::before{content:"";position:absolute;left:11px;top:0;bottom:calc(var(--tr) + var(--row) / 2 - 11px);width:22px;border-radius:11px; background:rgba(255,255,255,.07) repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 18px,transparent 18px 32px) no-repeat 50% 0 / 2px 100%; box-shadow:inset 0 0 0 1px var(--hair)} .hh-stop{display:grid;grid-template-columns:44px var(--vz) minmax(0,1fr);grid-template-rows:var(--row) var(--tr);column-gap:16px;align-items:center; padding-top:var(--pt);text-align:left} .hh-dot{grid-column:1;grid-row:1;margin:0;font-size:15px;box-shadow:0 0 0 6px rgba(255,255,255,.08),0 10px 26px -8px rgba(0,0,0,.6)} .hh-fig{grid-column:2;grid-row:1} .hh-h{grid-column:2 / span 2;grid-row:2;align-self:start;justify-self:start;max-width:none;margin:4px 0 0;font-size:20px;line-height:24px;white-space:nowrap} /* each segment runs from the previous dot's centre down to this dot's centre (every stop has the same height) */ .hh-seg{display:block;position:absolute;z-index:1;left:20px;width:4px;border-radius:2px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.5); bottom:calc(100% - var(--pt) - var(--row) / 2);height:calc(100% + var(--gap));transform-origin:50% 0} .hh-stop:first-child .hh-seg{height:calc(var(--pt) + var(--row) / 2)} /* the stamp: beside the disc, its left fifth over the disc's right edge, top level with the disc's top */ .hh-stop:nth-child(n){--ox:-.8;--oy:.02} .hh-stop:nth-child(2){--oy:.1} .hh-stop:nth-child(3){--ox:-.78;--oy:0} .hh-stop:nth-child(4){--oy:.06} .hh-stamp.is-fill{--s:calc(var(--sz) * 1.1)} /* phones: a 3px ring and a tighter hairline keep 13px caps clear of the rings */ .hh-st{padding:0 2px;border-width:3px} .hh-st::before{inset:3px;border-width:1px} } /* tablets (601–900px): the same downhill road with bigger discs, so the row is not a thin strip on the left */ @media (min-width:601px) and (max-width:900px){ .hh{--vz:160px;--sz:96px;--row:172px} .hh-st{padding:0 14px} } @media (max-width:380px){ .hh{--vz:112px;--sz:82px;--row:124px} .hh-stop{column-gap:12px} .hh-h{font-size:19px} } /* ---------- mode B / C: play once (.sq timing). Stop k starts at --t. ---------- */ .hh-stop{--t:.3s} @media (min-width:901px){.hh-stop{--t:calc(.5s + var(--k,0) * .6s)}} html.js .hh:not(.hh-a) .hh-stage.play .hh-paint.sq{animation:hhPaint 2.4s linear .2s both} html.js .hh:not(.hh-a) .hh-stage.play .hh-lamp.sq{animation:hhLamp 2.4s linear .2s both} html.js .hh:not(.hh-a) .hh-stop.play .hh-seg.sq{animation:hhSeg .7s var(--ease) 0s both} html.js .hh:not(.hh-a) .hh-stop.play .hh-dot.sq{animation:sqPop .7s cubic-bezier(.3,1.5,.5,1) var(--t) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-art.sq{animation:hhIn .9s cubic-bezier(.3,1.35,.5,1) calc(var(--t) + .05s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-glow.sq{animation:sqFade 1.2s var(--ease) calc(var(--t) + .1s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-ring{animation:hhIgnite 1.1s var(--ease) calc(var(--t) + .1s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-stamp.sq{animation:hhSlam .6s cubic-bezier(.5,0,.3,1) calc(var(--t) + .25s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-viz{animation:hhThunk .32s linear calc(var(--t) + .6s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-h.sq{animation:sqUp .9s var(--ease) calc(var(--t) + .15s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-mag{animation:hhMag 1.1s var(--ease) calc(var(--t) + .35s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-card{animation:hhCard .9s var(--ease) calc(var(--t) + .35s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-badge{animation:hhPopS .6s cubic-bezier(.3,1.6,.5,1) calc(var(--t) + .75s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-flag{animation:hhFlag .9s var(--ease) calc(var(--t) + .4s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-bars{animation:hhBars .8s var(--ease) calc(var(--t) + .3s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-tick{animation:hhPopS .5s cubic-bezier(.3,1.6,.5,1) calc(var(--t) + .4s + var(--j,0) * .14s) both} html.js .hh:not(.hh-a) .hh-stop.play .hh-rise rect{animation:hhRise .7s cubic-bezier(.3,1.25,.5,1) calc(var(--t) + .3s + var(--j,0) * .08s) both} @keyframes hhPaint{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:none}} /* the headlight fades in over the road bed's masked left end, so the dot never floats off the tip of the road */ @keyframes hhLamp{0%{opacity:0;transform:translateX(-100%)}6%{opacity:1}100%{opacity:1;transform:none}} @keyframes hhSeg{from{opacity:1;transform:scaleY(0)}to{opacity:1;transform:none}} @keyframes hhIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}} @keyframes hhIgnite{0%{opacity:0;transform:scale(.7)}1%{opacity:.85;transform:scale(.71)}100%{opacity:0;transform:scale(1.35)}} @keyframes hhSlam{0%{opacity:0;transform:scale(1.35) rotate(-8deg)}62%{opacity:1;transform:scale(.93) rotate(1deg)}82%{transform:scale(1.03)}100%{opacity:1;transform:none}} @keyframes hhThunk{0%,100%{transform:none}25%{transform:translate(0,3px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1px,1px)}} @keyframes hhMag{from{transform:translateX(-34px)}to{transform:none}} @keyframes hhCard{from{transform:translateY(10px)}to{transform:none}} @keyframes hhPopS{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}} @keyframes hhFlag{from{transform:translateY(18px)}to{transform:none}} @keyframes hhBars{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} @keyframes hhRise{from{transform:scaleY(0)}to{transform:none}} @media (prefers-reduced-motion:reduce){ .hh-ring{animation:none!important;opacity:0!important} .hh-shade{animation:none!important;opacity:0!important} .hh-viz,.hh-mag,.hh-card,.hh-badge,.hh-flag,.hh-bars,.hh-tick,.hh-rise rect{animation:none!important} } /* ==== 34-home-month.css ==== */ /* WhiteWays · home #month (ocean), HOME-WOW round 2026-09-30 (owner: month team). Prefix hmo-. A month of „your business“ (generic: no named example, no „Образец“ tag, owner 2026-09-30) arrives on a phone as toasts (P1); a light carries the newest one along a thin road into one poster number (P7). Numbers only from src/partials/report.html: 88 (онлайн заявки here), 142 обаждания и съобщения, Сб 22, bars 6·8·9·12·19·22·12. No yellow in this scene. One loop (the conveyor, 34-home-month.js), gated by the stage's .live. Two triggers: the phone rises with the stage's .play (12-stage.js); the cascade, the bridge and the number wait for .go, which 34-home-month.js sets once the phone's bottom (where the toasts land) is on screen. */ .hmo{overflow-x:clip} /* the phone halo may reach past a 360px screen: clip it, never scroll */ .hmo .scn-head{margin-bottom:clamp(40px,4.6vw,72px)} @media (min-width:901px){ .hmo .scn-head{max-width:1180px;text-align:left} .hmo .scn-title{max-width:760px} } .hmo-stage{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5.6vw,80px);align-items:center;max-width:1180px;margin-inline:auto} .hmo-defs{position:absolute;width:0;height:0;overflow:hidden} /* every .sq in the stage runs on its own time: --t from the stage's .play (plus --d0) */ html.js .hmo-stage.play .sq{animation-delay:calc(var(--d0,0s) + var(--t,0s))} /* the cascade and the number hold until .go (the landing zone is in view), so nobody misses them below the fold */ html.js .hmo-stage:not(.go) .hmo-feed .sq,html.js .hmo-stage:not(.go) .hmo-num .sq{animation:none!important} /* the number block is its own [data-play] group: on desktop it enters with the cascade (--ho 0), on phones it sits under the phone, so its beat starts when the visitor reaches it (--ho pulls the handover time forward) */ .hmo-num{--ho:0s} html.js .hmo-stage .hmo-num.play .sq{animation-duration:.7s;animation-delay:calc(var(--d0,0s) + var(--t,0s) - var(--ho))} /* ---------- the phone ---------- */ .hmo-dev{position:relative;isolation:isolate;justify-self:center} .hmo-halo{position:absolute;left:-40%;right:-40%;top:-12%;bottom:-12%;z-index:-1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(35,80,255,.8),rgba(21,96,240,.3) 52%,transparent 100%)} /* a soft pool of light on the floor under the phone */ .hmo-floor{position:absolute;left:-30%;right:-30%;bottom:-78px;height:130px;z-index:-1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(201,210,255,.42),rgba(95,116,255,.2) 45%,transparent 100%)} /* the trigger line for .go (read by 34-home-month.js): on desktop 40% up the phone, so the number beside it starts as soon as it is in view; on phones (max-width:900px) just above the phone's bottom edge */ .hmo-cue{position:absolute;left:50%;bottom:40%;width:1px;height:1px;pointer-events:none;visibility:hidden} /* desktop: the phone takes its height from the viewport, so its bottom (where the toasts land) stays on a 720px laptop */ .hmo-ph{--phh:clamp(500px,calc(100svh - 300px),610px);position:relative;height:var(--phh);width:clamp(284px,calc(var(--phh) * .49),300px); padding:10px;border-radius:46px;background:#0B1233; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 3px #0B1233,inset 0 0 0 4px rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.3),0 60px 110px -40px rgba(0,2,24,.9),0 0 90px -10px rgba(21,96,240,.45); --tilt:perspective(1400px) rotateY(10deg);transform:var(--tilt);transform-origin:50% 50%} html.js .hmo-stage.play .hmo-ph.sq{animation-name:hmoPh;animation-duration:1.1s} @keyframes hmoPh{from{opacity:0;transform:var(--tilt) translateY(40px) scale(.94)}to{opacity:1;transform:var(--tilt)}} /* the handover: as the light reaches the number, the phone steps back for a moment, then comes back live (one shot) */ html.js .hmo-stage.go .hmo-dev{animation:hmoDip 1.2s var(--ease);animation-delay:calc(var(--d0,0s) + 1.15s)} @keyframes hmoDip{0%{transform:none}25%,55%{transform:scale(.985)}100%{transform:none}} /* side keys */ .hmo-ph::before,.hmo-ph::after{content:"";position:absolute;width:3px;border-radius:2px;background:#1A2350} .hmo-ph::before{left:-3px;top:130px;height:56px;box-shadow:0 74px 0 #1A2350} .hmo-ph::after{right:-3px;top:170px;height:88px} .hmo-scr{position:relative;display:flex;flex-direction:column;height:100%;border-radius:36px;overflow:hidden; background:radial-gradient(120% 60% at 80% 0%,rgba(143,160,255,.35),transparent 60%),linear-gradient(180deg,#2335FF 0%,#1626C8 45%,#0E178F 100%)} /* glass glare across the screen (static) */ .hmo-scr::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(118deg,rgba(255,255,255,.13) 0 30%,rgba(255,255,255,0) 30.2%)} .hmo-isl{position:absolute;left:50%;top:10px;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#03061C} /* lock-screen header: a generic shop mark and „Вашият бизнес“, centred (fills the top of the screen) */ .hmo-top{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 14px 16px;text-align:center} .hmo-mk{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--cobalt); box-shadow:0 0 0 5px rgba(255,255,255,.1),0 10px 24px -8px rgba(2,6,40,.8)} .hmo-mk .ic{width:24px;height:24px;stroke-width:1.9} .hmo-top p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;min-width:0;color:#fff} .hmo-top b{font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em} /* the cascade: bottom-anchored, newest at the bottom, older ones leave through a soft top fade */ /* the feed starts 16px under the header; a card whose top would sit above that line fades out whole (.gone, set by 34-home-month.js), so no half card hangs under the name. The short mask only softens a card on its way out. */ .hmo-feed{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:16px 10px 14px; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px);mask-image:linear-gradient(180deg,transparent 0,#000 16px)} .hmo-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none} .hmo-t{transform-origin:50% 100%} .hmo-c{position:relative;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:18px;background:#fff;color:var(--ink); box-shadow:0 10px 22px -14px rgba(2,6,40,.6);transition:opacity .45s var(--ease)} .hmo-t.gone .hmo-c{opacity:0} /* older cards stay white and step back: a faint cobalt tint under softer content. The newest card is the one live card: full contrast and a crisp cobalt-tinted lift (opacity-only layers, so the swaps stay on the compositor) */ .hmo-c::before,.hmo-c::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)} .hmo-c::before{background:#EEF0FF} .hmo-c::after{box-shadow:0 20px 34px -14px rgba(6,12,110,.9),0 0 0 1.5px #fff,0 0 28px -4px rgba(143,160,255,.55)} .hmo-c>*{position:relative;transition:opacity .6s var(--ease)} .hmo-t:last-child .hmo-c::after{opacity:1} .hmo-c>i{position:relative;display:grid;place-items:center;flex:none;align-self:flex-start;width:40px;height:40px;border-radius:12px;background:#ECEEFF;color:var(--cobalt)} .hmo-c>i>.ic{width:22px;height:22px;stroke-width:1.9} /* the source mark (Maps pin, site globe, Google search, phone app) on the icon tile's corner */ .hmo-src{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 2px #fff} .hmo-src svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} /* title on top; source line and clock time under it; the answered chip on its own row */ .hmo-c p{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:baseline;min-width:0} .hmo-c b{grid-column:1/-1;display:block;font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)} .hmo-c p>span{display:block;margin-top:1px;font-size:14px;line-height:1.3;color:#525A78} .hmo-c time{font-size:13px;line-height:1.3;color:#7A82A3;font-variant-numeric:tabular-nums} .hmo-c .hmo-stars{display:flex;gap:2px;align-self:center;margin-top:3px} .hmo-stars .ic{width:14px;height:14px;fill:var(--cobalt);stroke:var(--cobalt);stroke-width:1.2} .hmo-c .hmo-ok{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 10px 3px 7px;border-radius:99px; background:var(--cobalt);color:#fff;font-size:13px;font-weight:600;line-height:1.3} .hmo-ok .ic{width:14px;height:14px;stroke-width:2.6} /* a toast lands: rises 24px with a tiny scale settle; the older ones step back */ html.js .hmo-stage.play .hmo-t.sq{animation-name:hmoIn;animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.25,1.12)} @keyframes hmoIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}} html.js .hmo-stage.go .hmo-old .hmo-c>*,html.js .hmo-stage.go .hmo-old .hmo-c::before{animation:hmoDim .5s var(--ease) forwards;animation-delay:calc(var(--d0,0s) + var(--t,0s) + .2s)} html.js .hmo-stage.go .hmo-old .hmo-c::before{animation-name:hmoTint} @keyframes hmoDim{to{opacity:.66}} @keyframes hmoTint{to{opacity:1}} /* the tape (JS, .abs): every card sits on the feed's bottom line and is shifted with `translate` (34-home-month.js), so the intro climb and the conveyor move layers only; the newest card is .now, the recycled pool cards wait hidden (.hmo-wait) */ .hmo-list.abs{position:relative;display:block;height:0} .hmo-list.abs>.hmo-t{position:absolute;left:0;right:0;bottom:0} .hmo-list.abs>.hmo-t.hmo-wait{visibility:hidden} .hmo-list.abs .hmo-t:not(.now) .hmo-c::after{opacity:0} .hmo-list.abs .hmo-t.now .hmo-c::after{opacity:1} .hmo-t.re .hmo-c,.hmo-t.re .hmo-c>*,.hmo-t.re .hmo-c::before,.hmo-t.re .hmo-c::after{transition:none} /* conveyor (JS): cards that are no longer the newest step back; a new card is solid (.45s) before its slide settles (.8s) */ .hmo-list.run .hmo-t:not(.now) .hmo-c>*{opacity:.66} .hmo-list.run .hmo-t:not(.now) .hmo-c::before{opacity:1} /* ---------- the bridge (desktop only): a thin white road from the newest toast to the number, one light runs it once ---------- */ .hmo-link{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none;display:none} .hmo-road{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.5} .hmo-link.done .hmo-road{stroke-dashoffset:0;opacity:0;transition:opacity 1.2s var(--ease)} .hmo-dot{position:absolute;left:0;top:0;z-index:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;pointer-events:none;opacity:0; box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 22px 6px rgba(143,160,255,.85)} .hmo-stage.bridge .hmo-link{display:block} /* ---------- the poster number ---------- */ .hmo-num{position:relative;z-index:1;display:grid;justify-items:start;min-width:0;padding:clamp(24px,3vw,44px);border-radius:32px; background:linear-gradient(145deg,rgba(117,146,255,.13),rgba(26,49,107,.08) 65%); box-shadow:inset 0 1px 0 rgba(211,227,255,.3),inset 0 0 0 1px rgba(154,186,255,.15),0 28px 70px -48px #000} .hmo-num::before{content:"";position:absolute;top:0;left:12%;width:46%;height:1px; background:linear-gradient(90deg,transparent,#CCDFFF,transparent);pointer-events:none} .hmo-hd{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 30px} .hmo-bw{position:relative;isolation:isolate;display:block} /* the handover beat: one soft light blooms behind the number as the light lands (one shot, no hard edge) */ .hmo-burst{position:absolute;left:50%;top:50%;z-index:-1;width:130%;aspect-ratio:1;margin:-65% 0 0 -65%;border-radius:50%;opacity:0;pointer-events:none; background:radial-gradient(closest-side,rgba(143,160,255,.4),rgba(143,160,255,.14) 50%,rgba(143,160,255,.04) 78%,transparent 100%)} html.js .hmo-stage .hmo-num.play .hmo-burst.sq{animation-name:hmoBurst;animation-duration:1.3s;animation-timing-function:cubic-bezier(.15,.7,.3,1)} @keyframes hmoBurst{0%{opacity:0;transform:scale(.35)}20%{opacity:1}100%{opacity:0;transform:scale(1.35)}} .hmo-big{display:block;min-width:2ch;font-size:clamp(150px,18vw,280px);font-weight:700;line-height:.85;letter-spacing:-.06em;color:#fff; font-variant-numeric:tabular-nums;text-shadow:0 4px 30px rgba(143,160,255,.22)} .hmo-cap{padding-bottom:12px} .hmo-cap b{display:block;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.015em;color:#fff} .hmo-cap span{display:block;margin-top:6px;font-size:18px;line-height:1.3;color:var(--on-3)} .hmo-week{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;width:min(480px,100%);margin-top:44px} .hmo-week::before{content:"";position:absolute;z-index:-1;inset:0 0 25px;border-bottom:1px solid rgba(169,195,255,.18); background:repeating-linear-gradient(to top,transparent 0 35px,rgba(169,195,255,.09) 35px 36px);pointer-events:none} .hmo-week span{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:150px} .hmo-week i{display:block;width:100%;height:calc(var(--h) * 110px);border-radius:6px;background:linear-gradient(180deg,#8FA0FF,#5F74FF); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 1px 0 0 rgba(255,255,255,.18),0 5px 14px -8px rgba(81,112,255,.7)} .hmo-week small{margin-top:10px;font-size:15px;line-height:1;color:var(--on-2)} .hmo-week .top i{background:linear-gradient(180deg,#fff,#DDE3FF);box-shadow:0 0 22px rgba(255,255,255,.55)} .hmo-week em{margin-bottom:8px;font-style:normal;font-size:16px;font-weight:600;line-height:1;color:#fff} .hmo-glow{position:absolute;left:calc(50% - 70px);bottom:0;z-index:-1;width:140px;height:170px;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(143,160,255,.12) 60%,transparent 100%)} .hmo-2nd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;width:min(480px,100%);margin-top:30px;padding-top:24px;border-top:1px solid var(--hair)} .hmo-2nd b{font-size:44px;font-weight:600;line-height:1;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums} .hmo-2nd span{font-size:18px;line-height:1.3;color:var(--on-2)} /* short laptop screens (720–820px tall): tighter head and a shorter number column, so the phone bottom stays in view */ @media (min-width:901px) and (max-height:820px){ .hmo .scn-head{margin-bottom:28px} .hmo-big{font-size:clamp(160px,17vw,230px)} .hmo-week{margin-top:30px} .hmo-week span{height:124px} .hmo-week i{height:calc(var(--h) * 90px)} .hmo-2nd{margin-top:22px;padding-top:18px} } /* ---------- phones: the phone is the visual, then the number under it ---------- */ @media (max-width:900px){ .hmo-stage{grid-template-columns:minmax(0,1fr);gap:56px;justify-items:center} .hmo-ph{width:280px;height:514px;--tilt:rotateY(0deg)} html.js .hmo-stage.play .hmo-dev{animation:none} .hmo-num{--ho:.5s;justify-items:center;width:100%;max-width:560px;padding:28px 20px;text-align:center;border-radius:26px} .hmo-hd{flex-direction:column;align-items:center;gap:14px} .hmo-big{font-size:clamp(120px,38vw,170px)} .hmo-cap{padding-bottom:0} .hmo-week{width:100%;max-width:480px;gap:10px;margin-top:36px} .hmo-week span{height:128px} .hmo-week i{height:calc(var(--h) * 90px)} /* 142 on top, its label under it, centred: nothing reaches the back-to-top / assistant column on the right */ .hmo-2nd{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:480px} .hmo-floor{bottom:-64px;height:110px} .hmo-cue{bottom:18px} } /* small phones: a tighter header keeps room for the toasts */ @media (max-width:390px){ .hmo-top{gap:8px;padding:44px 12px 10px} .hmo-mk{width:40px;height:40px} .hmo-top p{flex-direction:column;gap:6px} .hmo-cap b{font-size:22px} .hmo-2nd span{font-size:17px} } @media (max-width:380px){ .hmo-ph{width:264px;padding:9px;border-radius:42px} .hmo-scr{border-radius:33px} .hmo-feed{padding:0 8px 12px} .hmo-c{padding:11px 12px;gap:10px} .hmo-c>i{width:36px;height:36px} .hmo-week{gap:8px} } /* reduced motion: the static final state. Four whole toasts, the newest one live, the older ones stepped back, no mask */ @media (prefers-reduced-motion:reduce){ html.js .hmo-stage .hmo-dev,html.js .hmo-stage .hmo-old .hmo-c>*,html.js .hmo-stage .hmo-old .hmo-c::before{animation:none!important} html.js .hmo-stage .hmo-ph.sq{transform:var(--tilt)!important} .hmo-list .hmo-t:first-child{display:none} .hmo-feed{-webkit-mask-image:none;mask-image:none} .hmo-old .hmo-c>*{opacity:.66} .hmo-old .hmo-c::before{opacity:1} .hmo-burst,.hmo-link,.hmo-dot{display:none} } /* a tall desktop phone (viewport 900px+) has room for all five whole toasts */ @media (prefers-reduced-motion:reduce) and (min-width:901px) and (min-height:900px){.hmo-list .hmo-t:first-child{display:list-item}} /* ==== 35-home-plan.css ==== */ /* WhiteWays · home #plan (violet), HOME-WOW round 2026-09-30 (owner: plan team). Brief: docs/briefs/HOME-WOW-BRIEF.md §5. P11 kinetic mega title („Един план.“ wipes up, „Сайтът е включен.“ slides in with the scroll and gets a drawn check), P7 price bar (up-front money: Обичайно 900–2 000 € vs При нас 200 €) as the poster of the scene: thick bars drawn to scale on one 0–2 000 € axis, each value riding on its own bar. The range is wiped in from the axis (no stretching), shimmers once, then dims as the white 200 € nub lands with its glowing cap and the „сайтът е включен“ pin. Then the 3 plans as lit cards, each topped by a big layer stack (2 / 4 / 6 layers) on one shared baseline, so the row reads as one growing series. Prefix hp-. One loop: the Растеж halo breathes while .hp.live. Yellow: only the Растеж CTA. No backgrounds of our own, no data-fx. Round 2 (2026-09-30): --our is exactly 10% (honest scale), --on-3 only at 16px+, no scaleX stretch, 3 columns only ≥1181px, tablet = Растеж full width + Старт/Пълен in 2 columns, content kept clear of the fixed FAB column at 901–1300px. Pricing round (2026-09-30): 35 / 120 / 230, the title reads „От 35 €/мес. Сайтът е включен.“, plan buttons → checkout.html. */ .hp{overflow-x:clip;padding-bottom:clamp(56px,5.2vw,76px)} /* ---------- 1 · the mega title ---------- */ .hp .hp-head{max-width:none;margin-bottom:clamp(40px,4.6vw,68px)} .hm-main .hp-title{font-size:clamp(52px,8.4vw,128px);line-height:.96;letter-spacing:-.045em;font-weight:700;text-align:center;text-wrap:wrap} .hp-l1{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em} .hp-l1i{display:block} .hp-em{display:block;width:fit-content;max-width:100%;margin-inline:auto;padding-bottom:.06em} .hp-nw{white-space:nowrap} .hp-chk{display:inline-block;width:.6em;height:.6em;margin-left:.1em;vertical-align:-.02em;overflow:visible} .hp-chk path{fill:none;stroke:url(#hp-chk-g);stroke-width:7;stroke-linecap:round;stroke-linejoin:round} @keyframes hpUp{from{opacity:1;transform:translateY(110%)}to{opacity:1;transform:none}} /* a fixed-length slide (never past the viewport edge at 1440, where 22% of the em would be ≈ 240px) */ @keyframes hpSlide{from{opacity:0;transform:translateX(min(22%,7vw))}to{opacity:1;transform:none}} /* play-once (every browser): line 1 out of its mask, the em from the right, the check after it */ html.js .play .hp-l1i.sq{animation-name:hpUp;animation-duration:1.1s;animation-timing-function:cubic-bezier(.2,.8,.2,1)} html.js .play .hp-em.sq{animation-name:hpSlide;animation-duration:.8s} html.js .play .hp-chk .sq.sq-draw{animation-duration:.6s;animation-delay:calc(var(--d0,0s) + 1.25s)} /* scrubbed where supported: the em glides in with the scroll, the check draws right after it (reversible) */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .hp-title{view-timeline:--hpT block} html.js .hm-main .hp .hp-em.sq{animation:hpSlide linear both;animation-timeline:--hpT;animation-range:entry 30% cover 42%;animation-delay:0s} html.js .hm-main .hp .hp-chk .sq.sq-draw{animation:sqDraw linear both;animation-timeline:--hpT;animation-range:cover 42% cover 50%;animation-delay:0s} } } /* ---------- 2 · the price bar: the argument of the scene ---------- */ /* --th bar thickness · --vf value size · --lab label column · --our the 200 € bar = exactly 10% of the 0–2 000 € track --ex how far the wipe boxes reach past the bars, so the glow is never cut by the wipe's clip */ .hp-bar{--th:clamp(40px,3.4vw,48px);--vf:clamp(40px,3.5vw,52px);--lab:150px;--cg:28px;--ex:26px; max-width:1140px;margin:0 auto clamp(128px,11vw,168px);padding:clamp(28px,3vw,42px) clamp(28px,3.6vw,56px) clamp(24px,2.6vw,34px);border-radius:32px; background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(10,12,48,.34); box-shadow:inset 0 1px 0 rgba(218,224,255,.27),inset 0 0 0 1px rgba(166,179,255,.12),0 24px 70px -48px #000} .hp-cap{font:600 16px/1.2 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--on-3)} .hp-rows{display:grid;margin:0} .hp-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);column-gap:var(--cg);align-items:end} /* room above each bar: the range's value over its end, the pin over the white nub */ .hp-row-u{padding-top:calc(var(--vf) + 30px)} .hp-row-w{padding-top:clamp(92px,7.4vw,108px)} .hp-row dt{font-size:24px;font-weight:600;line-height:var(--th);color:#fff;white-space:nowrap} .hp-row dd{margin:0} /* the track: a faint rail from 0 to 2 000 €; the bars start square at the axis; ticks at 0 / 1 000 / 2 000 only outside it */ .hp-trk{--our:10%;position:relative;height:var(--th);border-radius:6px 999px 999px 6px; background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .hp-trk::before{content:"";position:absolute;inset:-10px 0;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.3) 0 2px,transparent 2px calc(50% - .5px),rgba(255,255,255,.22) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px) calc(100% - 1px),rgba(255,255,255,.22) calc(100% - 1px)); -webkit-mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px));mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px))} /* the range's wipe: the outer clips, the inner holds the bars still. Outer and inner have the same width and move by the same percentage in opposite directions, so the bars are revealed left to right and never stretch (transform only). The nub's box (.hp-ow) does not move: it clips at the axis while the pill slides out of it. */ .hp-u,.hp-ow{position:absolute;top:calc(var(--ex) * -1);bottom:calc(var(--ex) * -1);left:0;display:block;overflow:hidden} .hp-u{right:calc(var(--ex) * -1)} .hp-ow{width:calc(var(--our) + var(--ex))} .hp-ui{position:absolute;inset:0;display:block} .hp-ghost,.hp-rng{position:absolute;top:var(--ex);bottom:var(--ex);display:block} /* 0–900 €: hatched ghost; 900–2 000 €: the lavender range, square where it meets the ghost, round at 2 000 € */ .hp-ghost{left:0;width:calc((100% - var(--ex)) * .45);border-radius:6px 0 0 6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); background:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 5px,transparent 5px 12px)} .hp-rng{left:calc((100% - var(--ex)) * .45);right:var(--ex);overflow:hidden;border-radius:0 999px 999px 0;opacity:.5; background:linear-gradient(90deg,#8494FF,#A9B6FF);box-shadow:0 0 30px -6px rgba(143,160,255,.7),inset 0 1px 0 rgba(255,255,255,.35)} .hp-rng::after{content:"";position:absolute;inset:0 auto 0 0;width:40%;opacity:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)} /* При нас: a real bar from the axis to 200 € (10% of the track, to scale), with a glowing cap and the pin above its tip */ /* .hp-our fills its wipe box (same width, so the wipe is locked); the pill itself is its ::before */ .hp-our{position:absolute;inset:0;display:block} .hp-our::before{content:"";position:absolute;top:var(--ex);bottom:var(--ex);left:0;right:var(--ex);border-radius:6px 999px 999px 6px; background:linear-gradient(90deg,#DCE2FF,#fff);box-shadow:0 0 20px rgba(255,255,255,.55),0 0 46px rgba(201,210,255,.4)} .hp-tip{--tp:calc(var(--th) * 2.4);position:absolute;top:50%;left:calc(var(--our) - var(--th) * .22);width:var(--tp);height:var(--tp);margin:calc(var(--tp) / -2) 0 0 calc(var(--tp) / -2); border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,#fff 0 14%,rgba(236,240,255,.7) 28%,rgba(190,202,255,.3) 54%,rgba(169,184,255,.1) 76%,transparent)} /* the pin: 1.2× the old chip, its stem lands on the white nub */ .hp-site{position:absolute;bottom:calc(100% + 20px);left:calc(var(--our) - 36px);display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 13px; border-radius:14px;background:#fff;color:var(--ink);font-size:19px;font-weight:600;line-height:1;white-space:nowrap;transform-origin:27px 100%; box-shadow:0 14px 30px -10px rgba(0,0,0,.6),0 0 34px -6px rgba(255,255,255,.5)} .hp-site::after{content:"";position:absolute;left:26px;top:100%;width:2px;height:20px;border-radius:2px;background:linear-gradient(#fff,rgba(255,255,255,.55))} .hp-site .ic{width:26px;height:26px;stroke-width:1.9;color:var(--cobalt)} /* the values ride on their bars: the gap between them is the argument */ .hp-val{position:absolute;font-size:var(--vf);font-weight:600;line-height:1;letter-spacing:-.03em;color:#fff;white-space:nowrap} .hp-row-u .hp-val{right:0;bottom:calc(100% + 18px);color:var(--on-2)} .hp-row-w .hp-val{top:50%;left:calc(var(--our) + var(--th) * .95);translate:0 -50%;display:flex;align-items:baseline;gap:12px} .hp-row-w .hp-val b{font-size:calc(var(--vf) * 1.18);font-weight:700;letter-spacing:-.04em} .hp-val span{font-size:20px;font-weight:500;letter-spacing:0;color:var(--on-2)} .hp-axis{position:relative;height:22px;margin:18px 0 0 calc(var(--lab) + var(--cg))} .hp-axis span{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(calc(var(--x) * -100%));font-size:16px;line-height:22px;color:var(--on-3);white-space:nowrap} /* sequence (bar group, --d0 .2s, --sq-gap .16s): 0.4 the range wipes in (1.1s) · 1.4 its value · 1.55 one sheen · 1.96 the white nub wipes in · 2.2 the range dims · 2.36 the cap glows · 2.44 „200 €“ · 2.68 the pin */ @keyframes hpWo{from{opacity:1;transform:translateX(-100%)}to{opacity:1;transform:none}} @keyframes hpWi{from{transform:translateX(100%)}to{transform:none}} /* the nub: its clip box stays put with its left edge on the axis; the pill slides out of the axis, overshoots 2–3px, settles */ @keyframes hpShow{from{opacity:1}to{opacity:1}} @keyframes hpNub{0%{transform:translateX(-100%)}72%{transform:translateX(2.5%)}100%{transform:none}} @keyframes hpSheen{0%{opacity:0;transform:translateX(-100%)}25%{opacity:1}100%{opacity:0;transform:translateX(250%)}} @keyframes hpDim{from{opacity:1}to{opacity:.5}} @media (prefers-reduced-motion:no-preference){ html.js .play .hp-u.sq{animation-name:hpWo;animation-duration:1.1s;animation-timing-function:cubic-bezier(.55,0,.2,1)} html.js .play .hp-ow.sq{animation-name:hpShow;animation-duration:.6s} html.js .play .hp-ui{animation:hpWi 1.1s cubic-bezier(.55,0,.2,1) both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap))} html.js .play .hp-our{animation:hpNub .6s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap))} html.js [data-play]:not(.play) .hp-ui,html.js [data-play]:not(.play) .hp-our{animation:none} /* one-shot event: the range shimmers once after it has grown, then dims as the white bar lands (the contrast is the moment) */ html.js .play .hp-rng{animation:hpDim .7s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--d0,0s) + 12.5 * var(--sq-gap))} html.js .play .hp-rng::after{animation:hpSheen .75s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--d0,0s) + 8.4 * var(--sq-gap))} } /* ---------- 3 · the plans ---------- */ .hp-grid{--sk:clamp(128px,11vw,156px);position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,28px); align-items:stretch;max-width:1140px;margin-inline:auto} .hp-st{grid-area:1/1}.hp-gr{grid-area:1/2}.hp-fu{grid-area:1/3} .hp-halo{grid-area:1/2;align-self:stretch;position:relative;z-index:0;pointer-events:none} .hp-halo i{position:absolute;inset:-26% -46%;display:block;border-radius:50%;opacity:.8; background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(169,74,232,.42) 36%,rgba(120,70,240,.16) 64%,transparent 100%)} .hp-c{position:relative;z-index:1;display:flex;flex-direction:column;padding:clamp(28px,2.6vw,38px);border-radius:28px} .hp-c.gcard{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(10,12,48,.38)} .hp-c.hot{translate:0 -18px;padding-block:clamp(40px,3.4vw,52px);color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.08),0 40px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.6),0 0 80px -20px rgba(190,140,255,.55)} .hp-c h3{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2} /* the one-liner under the name: kept clear of the layer stack on the right */ .hp-sum{margin-top:8px;max-width:calc(100% - var(--sk) * .62);font-size:17px;line-height:1.35;color:var(--on-2);text-wrap:balance} .hp-c.hot .hp-sum{color:#4F587D} .hp-p{display:flex;align-items:baseline;gap:8px;margin-top:18px} .hp-p b{font-size:clamp(56px,5vw,72px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:proportional-nums} .hp-p span{font-size:18px;font-weight:500;color:var(--on-2);white-space:nowrap} /* the layer stack is the hero of each card: big, on the card's top-right, rising out of its top edge. Same box on every card, so the bottom layers share one baseline (Растеж's box is lowered by its 18px lift) and 2 → 4 → 6 reads as one series. */ .hp-stk{position:absolute;top:calc(var(--sk) * -.72);right:clamp(16px,1.6vw,24px);z-index:2;display:block;width:var(--sk);height:auto;overflow:visible;pointer-events:none; filter:drop-shadow(0 16px 20px rgba(5,6,40,.5))} .hp-c.hot .hp-stk{top:calc(var(--sk) * -.72 + 18px)} .hp-stk .hp-f{fill:#fff;stroke:rgba(11,18,51,.1);stroke-width:.8;stroke-linejoin:round} .hp-stk g{transition:translate .6s var(--ease)} .hp-c .hp-act{margin-top:10px;font-size:16px;color:var(--on-3)} .hp-c ul{display:grid;gap:13px;list-style:none;margin:24px 0 30px;padding:24px 0 0;border-top:1px solid var(--hair)} .hp-c li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.4;color:var(--on-2)} .hp-c li .ic{flex:none;width:20px;height:20px;margin-top:1px;stroke-width:2.3;color:#B4BEFF} .hp-c .btn{margin-top:auto} .hp-c.hot .hp-p span{color:#4F587D} .hp-c.hot .hp-act{color:#5E678C} .hp-c.hot ul{border-top-color:var(--line)} .hp-c.hot li{color:var(--ink)} .hp-c.hot li .ic{color:var(--cobalt)} .hp-c.hot .hp-stk{filter:drop-shadow(0 16px 18px rgba(35,53,255,.28))} /* the tag sits on the card's top edge, on the left (the stack owns the right) */ .hp-c .hp-tag{position:absolute;top:0;left:clamp(28px,2.6vw,38px);z-index:3;transform:translateY(-50%);padding:11px 18px;border-radius:999px;background:var(--cobalt);color:#fff; font-size:15px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(35,53,255,.8),inset 0 1px 0 rgba(255,255,255,.25)} .hp-foot{margin-top:clamp(36px,3.4vw,48px)} /* pricing round 2026-09-30: the plan buttons go to the checkout; the yearly gift and the free audit (the lighter path) live here as text */ .hp .hp-alt{flex-basis:100%;margin-top:6px;font-size:17px;line-height:1.5;color:var(--on-2);text-align:center;text-wrap:balance} .hp-alt a{display:inline-block;padding-block:8px;margin-block:-8px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45);transition:text-decoration-color .2s} .hp-alt a:hover{text-decoration-color:#fff} /* the one loop: the Растеж halo breathes while the scene is on screen */ @keyframes hpBreath{from{opacity:.6;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}} @media (prefers-reduced-motion:no-preference){ .hp-halo i{animation:hpBreath 6s ease-in-out infinite alternate;animation-play-state:paused} .hp.live .hp-halo i{animation-play-state:running} } /* hover: the stack opens up layer by layer (the P12 pointer light on the cards lives in 36-home-light.*); fine pointers only */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .hp-c:hover .hp-stk g:nth-child(2){translate:0 -2.5px} .hp-c:hover .hp-stk g:nth-child(3){translate:0 -5px} .hp-c:hover .hp-stk g:nth-child(4){translate:0 -7.5px} .hp-c:hover .hp-stk g:nth-child(5){translate:0 -10px} .hp-c:hover .hp-stk g:nth-child(6){translate:0 -12.5px} } /* ---------- 901–1300: keep the bar and the plans clear of the fixed back-to-top / AI column (right 24px + 62px orb) ---------- */ @media (min-width:901px) and (max-width:1300px){ .hp-bar,.hp-grid{max-width:min(1140px,100vw - 200px)} } @media (max-width:1100px){.hp-bar{--lab:124px;--cg:24px}} /* ---------- ≤1180: Растеж full width on top, Старт and Пълен as compact glass rows under it (2 columns, 1 on phones) ---------- */ @media (max-width:1180px){ .hp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .hp-gr,.hp-halo{grid-area:1/1/2/3}.hp-st{grid-area:2/1}.hp-fu{grid-area:2/2} .hp-halo i{inset:-18% -8% 10%} .hp-c.hot{translate:none;margin-bottom:4px} .hp-c.gcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h b" "p b" "s s";column-gap:14px;align-items:center;padding:20px 20px 20px 24px;border-radius:24px} .hp-c.gcard .hp-hd,.hp-c.gcard .hp-nm{display:contents} .hp-c.gcard .hp-stk,.hp-c.gcard .hp-act,.hp-c.gcard ul{display:none} .hp-c.gcard h3{grid-area:h;font-size:20px} .hp-c.gcard .hp-p{grid-area:p;margin-top:4px;gap:6px} .hp-c.gcard .hp-p b{font-size:32px;letter-spacing:-.03em} .hp-c.gcard .hp-p span{font-size:16px} .hp-c.hot .hp-sum{display:none} .hp-c.gcard .hp-sum{display:block;max-width:none;grid-area:s;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);font-size:16px;line-height:1.4;color:var(--on-2)} .hp-c.gcard .btn{grid-area:b;margin:0;width:auto;min-height:48px;padding:0 18px;font-size:16px} } /* tablet: the white Растеж card in two columns: name, price, stack and the yellow CTA left; the list right */ @media (min-width:761px) and (max-width:1180px){ .hp-grid{--sk:clamp(112px,14vw,160px)} .hp-c.hot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"hd ul" "act ul" "btn ul"; column-gap:clamp(32px,5vw,56px);padding:44px clamp(28px,4vw,44px) 36px} .hp-c.hot .hp-hd{grid-area:hd;position:relative} .hp-c.hot .hp-stk{top:auto;bottom:-6px;right:0} .hp-c.hot .hp-p b{font-size:clamp(56px,6.4vw,68px)} .hp-c.hot .hp-act{grid-area:act} .hp-c.hot ul{grid-area:ul;align-content:center;margin:0;padding:4px 0 4px clamp(28px,4vw,48px);border-top:0;border-left:1px solid var(--line)} .hp-c.hot .btn{grid-area:btn;align-self:end;margin-top:28px} } /* ---------- ≤900: the bar stacks each row: label on top, the bar under it, full width ---------- */ @media (max-width:900px){ .hp-bar{--lab:0px;--cg:0px;--th:28px;--vf:30px;--ex:20px;padding:24px 22px 20px;margin-bottom:clamp(96px,14vw,120px);border-radius:26px} .hp-row{grid-template-columns:minmax(0,1fr);row-gap:14px;align-items:start} .hp-row-u{padding-top:22px} .hp-row-w{padding-top:34px;row-gap:82px} .hp-row dt{font-size:20px;line-height:1.2} .hp-row-u .hp-val{bottom:calc(100% + 13px)} .hp-row-w .hp-val{left:calc(var(--our) + 26px);gap:8px} .hp-row-w .hp-val b{font-size:34px} .hp-val span{font-size:16px} .hp-tip{--tp:66px} .hp-site{bottom:calc(100% + 16px);left:calc(var(--our) - 30px);height:42px;gap:8px;padding:0 15px 0 11px;border-radius:12px;font-size:17px;transform-origin:22px 100%} .hp-site::after{left:21px;height:16px} .hp-site .ic{width:23px;height:23px} .hp-axis{margin:16px 0 0} .hp-foot{margin-top:32px} } /* ---------- phones: one column; Растеж is the full card, Старт and Пълен compact rows ---------- */ @media (max-width:760px){ .hp-bar{padding:22px 20px 18px;border-radius:24px} .hp-grid{grid-template-columns:1fr;gap:12px} .hp-gr,.hp-halo{grid-area:1/1}.hp-st{grid-area:2/1}.hp-fu{grid-area:3/1} .hp-halo i{inset:-12% -30% 30%} .hp-c.hot{margin-top:30px;padding:36px 24px 26px} /* keep the Растеж stack clear of the fixed back-to-top / assistant buttons on the right edge */ .hp-c.hot .hp-stk{top:-40px;right:64px;width:92px} .hp-c.hot .hp-p{margin-top:12px} .hp-c.hot ul{gap:10px;margin:18px 0 22px;padding-top:16px} .hp-c li{font-size:16px} .hp-c.gcard{padding:18px 18px 18px 22px} .hp-c.gcard h3{font-size:19px} .hp-c.gcard .hp-p b{font-size:30px} .hp-c.gcard .btn{padding:0 16px;font-size:15px} .hp-c .hp-tag{left:22px} } @media (max-width:380px){ .hp-bar{--vf:27px;padding-inline:18px} .hp-row dt{font-size:18px} .hp-row-w .hp-val{left:calc(var(--our) + 22px)} .hp-row-w .hp-val b{font-size:30px} .hp-c.gcard .btn{padding:0 13px} .hp-c.gcard{column-gap:10px;padding-left:18px} } /* phones: back-to-top steps away while a plan button sits under it (68-totop.js sets html.tt-away, CSS in 68-totop.css) */ /* reduced motion: the final picture, still (04-stage.css already drops every .sq animation) */ @media (prefers-reduced-motion:reduce){ .hp-halo i{animation:none;opacity:.8} html.js .hp-rng,html.js .play .hp-rng{animation:none;opacity:.5} .hp-rng::after{display:none} } /* ==== 36-home-light.css ==== */ /* WhiteWays · home P12 pointer light (integration round, 2026-09-30; idea: raw/orch/X5-home-inspiration.md P12). A soft radial light follows the pointer across the lit surfaces below the hero (.card = white, .gcard = glass), and the card's edge catches it. 36-home-light.js sets --lx/--ly (px) on the card under the pointer. Desktop only (hover + fine pointer), never with reduced motion. Subtle on purpose: at most 9% white inside, a thin 1px rim, no colour, no yellow. Without the JS nothing shows (the light only appears on :hover and sits at the top centre until the first move). */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ /* zero specificity: a card that already has its own position keeps it */ :where(.hm-main .scene) :where(.card,.gcard){position:relative} .hm-main .scene :is(.card,.gcard)::after, .hm-main .scene :is(.card,.gcard)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .5s var(--ease)} /* the pool of light */ .hm-main .scene .gcard::after{background:radial-gradient(300px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.09),transparent 70%)} .hm-main .scene .card::after{background:radial-gradient(300px circle at var(--lx,50%) var(--ly,0%),rgba(35,53,255,.06),transparent 70%)} /* the rim: the same light, masked to a 1px ring on the card's edge */ .hm-main .scene :is(.card,.gcard)::before{padding:1px; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .hm-main .scene .gcard::before{background:radial-gradient(220px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.5),transparent 72%)} .hm-main .scene .card::before{background:radial-gradient(220px circle at var(--lx,50%) var(--ly,0%),rgba(35,53,255,.34),transparent 72%)} .hm-main .scene :is(.card,.gcard):hover::after, .hm-main .scene :is(.card,.gcard):hover::before{opacity:1} } /* ==== 38-report.css ==== */ /* ---------- REPORT CARD (.rep-, 2026-10-01 subscription round): the product itself. A lit white app window on the dark „Кино“ stage with the one illustrative number set of the fictional Бистро Смокиня (report.html). Card only: the scene around it owns the heading. Include it inside a .scn-stage; it plays with the scene (.sq + .play from 12-stage.js), the numbers count up through [data-count] (10-motion.js) and the bars grow when the scene starts. ---------- */ .rep-dash{--rep-bar:44px;position:relative;container-type:inline-size;display:grid;gap:14px;width:100%;max-width:640px;margin-inline:auto; padding:calc(var(--rep-bar) + clamp(16px,2vw,24px)) clamp(16px,2vw,24px) clamp(16px,2vw,24px);border-radius:28px;overflow:hidden; background:#fff;color:var(--ink);text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14)} /* the app bar: three dots and the window name, like the other windows on the stage */ .rep-dash::before{content:"Отчет";position:absolute;left:0;right:0;top:0;height:var(--rep-bar);display:grid;place-items:center; font:600 14px/1 var(--f);letter-spacing:.02em;color:var(--muted);border-bottom:1px solid var(--line); background:radial-gradient(circle 5px at 22px 50%,#D8DCE8 98%,transparent) no-repeat,radial-gradient(circle 5px at 40px 50%,#D8DCE8 98%,transparent) no-repeat, radial-gradient(circle 5px at 58px 50%,#D8DCE8 98%,transparent) no-repeat,#F5F6FB} .rep-top{display:flex;align-items:center;gap:12px;min-width:0} .rep-logo{width:46px;height:46px;flex:none} .rep-top p{min-width:0} .rep-top p b{display:block;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em} .rep-top p small{display:block;margin-top:2px;font-size:15px;color:var(--muted)} .rep-from{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--mist);font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap} .rep-from i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff;font-style:normal;font-size:14px;font-weight:600} /* KPIs: 2×2 on a narrow card, one row of four on a wide one */ .rep-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px} .rep-kpi{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px;border-radius:18px;background:var(--mist)} .rep-kpi span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--cobalt);margin-bottom:8px} .rep-kpi span .ic{width:19px;height:19px} .rep-kpi small{font-size:15px;line-height:1.3;color:var(--muted)} .rep-kpi b{margin-top:auto;padding-top:6px;font-size:clamp(28px,2.4vw,36px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap} .rep-kpi.is-main{background:var(--cobalt);color:#fff} .rep-kpi.is-main span{background:rgba(255,255,255,.16);color:#fff} .rep-kpi.is-main small{color:rgba(255,255,255,.88)} .rep-row{display:grid;grid-template-columns:1fr;gap:10px} .rep-chart,.rep-learn,.rep-next{padding:16px;border-radius:18px;background:var(--mist);box-shadow:inset 0 0 0 1px rgba(11,18,51,.045),inset 0 1px 0 #fff} .rep-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px} .rep-h b{font-size:16px;font-weight:600;line-height:1.3} .rep-h small{font-size:15px;color:var(--muted);white-space:nowrap} .rep-bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:32px; background:repeating-linear-gradient(to top,transparent 0 29px,rgba(83,103,162,.1) 29px 30px);border-bottom:1px solid rgba(83,103,162,.14)} .rep-bars i{position:relative;flex:1;height:calc(var(--h) * 100%);border-radius:8px 8px 3px 3px;background:#C5CCF6;transform-origin:50% 100%} .rep-bars i.is-top{background:var(--cobalt)} .rep-bars em{position:absolute;left:50%;top:-23px;translate:-50% 0;font-style:normal;font-size:14px;font-weight:600;line-height:1;color:var(--muted)} .rep-bars i.is-top em{color:var(--cobalt)} .rep-days{display:flex;gap:8px;margin-top:8px} .rep-days span{flex:1;text-align:center;font-size:14px;color:var(--muted)} /* „what worked“: two winner tiles (channel, day), each with a small cup */ .rep-learn{display:flex;flex-direction:column} .rep-learn .rep-h{margin-bottom:2px} .rep-win{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px 10px 10px;border-radius:14px;background:#fff} .rep-win-i{position:relative;width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--cobalt-tint);color:var(--cobalt)} .rep-win-i>.ic{width:21px;height:21px} .rep-win p{flex:1;min-width:0} .rep-win b{display:block;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em} .rep-win small{display:block;margin-top:3px;font-size:14px;line-height:1.25;color:var(--muted);white-space:nowrap} /* the cup badge on the tile's corner */ .rep-cup{position:absolute;right:-7px;top:-7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E3F6EC;color:#127A4B;box-shadow:0 0 0 2px #fff} .rep-cup .ic{width:14px;height:14px;stroke-width:2.2} /* next month: our tasks + the one button the owner taps */ .rep-next-h{display:flex;align-items:center;justify-content:space-between;gap:12px} .rep-next-h .rep-h b{white-space:nowrap} .rep-ok{position:relative;display:inline-grid;flex:none;font-size:15px;font-weight:600;line-height:1} .rep-ok-a,.rep-ok-b{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 18px;border-radius:999px;color:#fff;white-space:nowrap} .rep-ok-a{background:var(--cobalt);opacity:0} .rep-ok-b{background:#127A4B;box-shadow:0 10px 22px -10px rgba(18,122,75,.8)} .rep-ok-b .ic{width:17px;height:17px;stroke-width:3} .rep-tap{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(11,18,51,.22);opacity:0;pointer-events:none} .rep-next ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .rep-next li{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;font-size:15px;font-weight:500} .rep-next li i{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--cobalt-tint);color:var(--cobalt)} .rep-next li .ic{width:15px;height:15px} /* the honesty caption under the card, on the dark stage */ .rep-cap{margin:22px auto 0;max-width:640px;text-align:center;font-size:16px;line-height:1.45;color:var(--on-3)} @container (min-width:560px){ .rep-kpis{grid-template-columns:repeat(4,minmax(0,1fr))} .rep-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} .rep-kpi b{font-size:clamp(26px,5.4cqi,34px)} } @container (max-width:380px){ .rep-from{font-size:0;gap:0;padding:4px} .rep-top p b{font-size:17px} .rep-kpi{padding:12px} .rep-kpi b{font-size:28px} .rep-bars{gap:6px} .rep-days{gap:6px} } /* the bars grow once the scene plays; a calm glow on the best day while the card is on screen (38-report.js sets .is-live) */ @media (prefers-reduced-motion:no-preference){ html.js .rep-bars i{transform:scaleY(.04);transition:transform 1s var(--ease);transition-delay:calc(var(--d0,0s) + .7s + var(--b,0) * 90ms)} html.js .play .rep-bars i{transform:none} html.js .rep-dash.is-live .rep-bars i.is-top{animation:repGlow 4s ease-in-out 2s infinite} /* one time, after the numbers: a tap, then „Одобрете“ turns into „Одобрено“ (without JS or motion the approved state just shows) */ html.js .rep-ok-a{opacity:1} html.js .rep-ok-b{opacity:0} html.js .play .rep-tap{animation:repTap .7s ease-out both;animation-delay:calc(var(--d0,0s) + 3.2s)} html.js .play .rep-ok-a{animation:repOff .3s ease both;animation-delay:calc(var(--d0,0s) + 3.45s)} html.js .play .rep-ok-b{animation:repOn .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--d0,0s) + 3.45s)} } @keyframes repGlow{0%,100%{box-shadow:0 0 0 0 rgba(35,53,255,0)}50%{box-shadow:0 0 0 6px rgba(35,53,255,.14)}} @keyframes repTap{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.9)}} @keyframes repOff{from{opacity:1}to{opacity:0;transform:scale(.92)}} @keyframes repOn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}} /* ==== 60-ceni.css ==== */ /* ceni.html · v5 „Кобалт Про“ (owner: ceni agent, prefix cn-) */ .cn-nw{white-space:nowrap} /* ---------- sub-hero: price anchor on the fictional Бистро Смокиня site (never on a real client's site) ---------- */ .cn-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .cn-hero .cn-hero-alt{margin-top:20px;font-size:17px;line-height:1.4;color:rgba(255,255,255,.84)} .cn-hero-alt a,.cn-plans .cn-alt a{display:inline-block;padding-block:8px;margin-block:-8px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45);transition:text-decoration-color .2s} .cn-hero-alt a:hover,.cn-plans .cn-alt a:hover{text-decoration-color:#fff} .cn-hv{position:relative;padding-bottom:4px} .cn-hv-site{position:relative;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -40px rgba(3,6,60,.75),0 0 0 1px rgba(255,255,255,.18)} .cn-bbar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#F7F8FC;border-bottom:1px solid var(--line)} .cn-bbar i{width:10px;height:10px;border-radius:50%;background:#D8DCE8} .cn-bbar span{margin-inline:auto;translate:-15px 0;font-size:13px;line-height:1;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 16px} .cn-hv-site img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top} /* 2026-10-01 minimal round: a one-off paper receipt (zigzag foot, one „Сайт“ line, „наведнъж“ stamp) against the monthly ink card (three ticks: site, work, report). No sentences: the two objects make the comparison. */ .cn-hv-cmp{position:relative;z-index:2;display:flex;align-items:stretch;margin:-64px clamp(10px,3vw,28px) 0;filter:drop-shadow(0 26px 30px rgba(3,6,60,.45))} .cn-hv-cmp>p{flex:1;min-width:0;display:flex;flex-direction:column;padding:18px 20px;border-radius:22px} .cn-hv-cmp .cn-hv-new{flex:1.25;padding-left:26px;padding-right:16px} .cn-hv-cmp small{display:block;font:600 13px/1.2 var(--f);letter-spacing:.05em;text-transform:uppercase} .cn-hv-cmp b{display:block;margin-top:8px;font-size:clamp(24px,2.3vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1.05;white-space:nowrap} .cn-hv-cmp b span{font-size:17px;font-weight:500;letter-spacing:0} .cn-hv-old{background:#fff;color:var(--muted);padding-bottom:26px!important;border-radius:22px 22px 0 0!important; -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x; mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x} .cn-hv-old b{color:var(--ink-2);margin-top:4px} .cn-rc-row{display:flex;align-items:center;gap:8px;margin-top:10px;padding-bottom:8px;border-bottom:1.5px dashed var(--line-2);font-size:14px;font-weight:600;color:var(--muted)} .cn-rc-row i{flex:1;height:0;border-bottom:2px dotted var(--line-2);translate:0 3px} .cn-hv-tag{align-self:flex-start;margin-top:10px;padding:5px 10px;border-radius:8px;font-size:13px;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-2);rotate:-4deg} .cn-hv-new{background:var(--ink);color:#fff} .cn-hv-new small,.cn-hv-new b span{color:rgba(255,255,255,.76)} .cn-hv-new b{color:#fff} .cn-hv-ok{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px} .cn-hv-ok>span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 4px;border-radius:999px;background:rgba(255,255,255,.1);font-size:14px;font-weight:600;line-height:1;color:#fff} .cn-hv-ok>span::before{content:'';width:17px;height:17px;border-radius:50%;flex:none;background:var(--cobalt) var(--chk) center/10px no-repeat} .cn-hv-arr{position:relative;z-index:3;align-self:center;width:46px;height:46px;flex:none;margin-inline:-14px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--cobalt);box-shadow:0 0 0 5px rgba(255,255,255,.35),var(--sh-1)} .cn-hv-arr .ic{stroke-width:2.2} .cn-hero{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E")} @media (max-width:560px){ .cn-hv-cmp{flex-direction:column;margin:-40px 10px 0} .cn-hv-arr{margin:-14px auto;rotate:90deg} .cn-hv-cmp>p{padding:16px 18px} .cn-hv-old{padding-bottom:24px!important} } /* ================= „Кино“ scenes below the sub-hero (2026-09-27): one dark stage, three scenes, cobalt → indigo → violet. Lit white = the object the eye lands on (Растеж, the table, the chat); glass = everything around it. 2026-10-01: the builder (#cn-build) and buy-out (#cn-terms) scenes and their CSS are archived in _archive/2026-10-01-subscription/b2-pricing/. Note: `.scene p{color:inherit}` (04-stage) outranks one-class rules on

, so p colours here use two classes. */ .cn-plans,.cn-compare,.cn-faq{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E")} @keyframes cnTick{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} /* ---------- 01 · plans ---------- */ .cn-cards{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:clamp(16px,1.8vw,26px);align-items:start;max-width:1160px;margin-inline:auto;padding-top:20px} .cn-halo{position:absolute;z-index:0;left:50%;top:50%;width:min(70%,760px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:.75; background:radial-gradient(closest-side,rgba(160,176,255,.5),rgba(91,124,255,.18) 55%,transparent 100%)} @keyframes cnHalo{from{transform:scale(.92);opacity:.55}to{transform:scale(1.06);opacity:.9}} @media (prefers-reduced-motion:no-preference){.cn-plans.live .cn-halo{animation:cnHalo 7s ease-in-out infinite alternate}} .cn-plan{position:relative;z-index:1;display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;padding:30px 30px 28px;border-radius:28px;color:var(--on)} .cn-plan.card{border:0;color:var(--ink);margin-block:-20px;padding-block:50px 48px;box-shadow:0 2px 6px rgba(0,0,0,.1),0 50px 110px -40px rgba(2,4,40,.9),0 0 80px -20px rgba(160,176,255,.45)} .cn-plan-n{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.15} .cn-plan .cn-plan-d{margin-top:8px;font-size:17px;line-height:1.4;color:var(--on-2);text-wrap:balance} .cn-plan .cn-plan-p{display:flex;align-items:baseline;gap:8px;margin-top:18px;white-space:nowrap} /* the note under the price: „или 1 200 € за година напред“; with the switch on year: the real 12 × monthly struck, and what it comes to */ .cn-plan .cn-plan-note{min-height:2.8em;margin-top:10px;font-size:16px;line-height:1.4;color:var(--on-2)} .cn-plan-note s{margin-right:6px;opacity:.75;text-decoration-thickness:2px} .cn-plans.is-year .cn-plan .cn-plan-note span{font-weight:600;color:#fff} .cn-plan.card .cn-plan-note{color:var(--muted)} .cn-plans.is-year .cn-plan.card .cn-plan-note span{color:var(--cobalt)} .cn-plan .cn-plan-go{margin-top:12px} .cn-plan-p b{font-size:clamp(64px,5.6vw,84px);line-height:.95;font-weight:600;letter-spacing:-.055em;font-variant-numeric:tabular-nums} .cn-plan-p .cn-per{font-size:19px;font-weight:500;color:var(--on-2)} .cn-plan-l{margin:22px 0 8px;align-self:start} .cn-plan-l li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--hair);font-size:17px;line-height:1.4;color:var(--on-2)} .cn-plan-l li::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14) var(--chk) center/13px no-repeat} .cn-plan.card .cn-plan-d,.cn-plan.card .cn-plan-p .cn-per{color:var(--muted)} /* the price lands, then a thin yellow line draws under it (money accent, not a sale sticker) */ .cn-num{position:relative;display:inline-block} .cn-ul{position:absolute;left:-2px;bottom:-9px;width:calc(100% + 4px);height:8px;overflow:visible;fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;pointer-events:none} .cn-ul path{vector-effect:non-scaling-stroke} html.js .cn-num.ul-free .cn-ul path{stroke-dasharray:none;stroke-dashoffset:0;animation:none;opacity:1} .cn-plan.card .cn-plan-l li{border-color:var(--line);color:var(--ink-2)} .cn-plan.card .cn-plan-l li::before{background-color:var(--cobalt)} .cn-plan.card :focus-visible{outline-color:var(--cobalt)} .cn-plans .cn-plan-badge{position:absolute;top:-15px;left:34px;padding:9px 14px;border-radius:999px;background:var(--cobalt);color:#fff;font:600 14px/1 var(--f);letter-spacing:0;text-transform:none;box-shadow:0 12px 26px -8px rgba(35,53,255,.75)} /* „Всичко в плана“: the full list per plan; the three open together (60-ceni.js) */ .cn-all{align-self:start;border-top:1px solid var(--hair)} .cn-plan.card .cn-all{border-color:var(--line)} .cn-all summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding-top:4px;font-size:17px;font-weight:600;cursor:pointer;list-style:none} .cn-all summary::-webkit-details-marker{display:none} .cn-all summary .ic{flex:none;width:36px;height:36px;padding:9px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:rotate .35s var(--ease)} .cn-plan.card .cn-all summary .ic{background:var(--cobalt-tint);color:var(--cobalt);box-shadow:none} .cn-all[open] summary .ic{rotate:45deg} .cn-all summary:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:12px} .cn-plan.card .cn-all summary:focus-visible{outline-color:var(--cobalt)} .cn-all-in{padding:0 0 8px} .cn-plan .cn-all-g{margin-top:14px;font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#C9D2FF} .cn-plan .cn-all-g:first-child{margin-top:4px} .cn-plan.card .cn-all-g{color:var(--cobalt)} .cn-plan .cn-all-x{color:var(--on-2)} .cn-plan.card .cn-all-x{color:var(--muted)} .cn-all-in li{position:relative;padding:5px 0 5px 20px;font-size:16px;line-height:1.4;color:var(--on-2)} .cn-all-in li::before{content:'';position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:50%;background:#8FA0FF} .cn-plan.card .cn-all-in li{color:var(--ink-2)} .cn-plan.card .cn-all-in li::before{background:var(--cobalt)} .cn-all-no li::before,.cn-plan.card .cn-all-no li::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.7} /* billing switch: two real radios, a white pill slides under the chosen one; the gift chip rides on the year side */ .cn-bill{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:min(100%,460px);margin:0 auto 44px;padding:6px;border-radius:999px; background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 20px 40px -24px rgba(0,0,0,.6)} .cn-bill-o{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;border-radius:999px; font-size:17px;font-weight:600;line-height:1.1;color:var(--on);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s} .cn-bill-o input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .cn-bill-o:has(input:checked){color:var(--ink)} .cn-bill-o:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px} .cn-bill-pill{position:absolute;z-index:0;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;background:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:translate .45s var(--ease)} .cn-bill:has(input[value="year"]:checked) .cn-bill-pill{translate:100% 0} .cn-bill-gift{position:absolute;z-index:2;top:0;right:18px;translate:0 -62%;padding:7px 12px;border-radius:999px;pointer-events:none; background:linear-gradient(135deg,#6C7BFF,#2335FF);color:#fff;font:600 14px/1 var(--f);font-style:normal;white-space:nowrap; box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 10px 22px -8px rgba(35,53,255,.9)} html:not(.js) .cn-bill{display:none} @media (max-width:560px){ .cn-bill-o{padding:0 8px;font-size:16px;white-space:nowrap} .cn-bill-gift{right:10px;font-size:13px;padding:6px 10px} } @media (prefers-reduced-motion:reduce){.cn-bill-pill{transition:none}} @media (prefers-reduced-motion:no-preference){ html.js .cn-plans .cn-plan-l li::before{opacity:0} html.js .cn-plans.play .cn-plan-l li::before{animation:cnTick .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(1.35s + var(--k,0) * .11s)} } .cn-dots{display:none;justify-content:center;gap:8px;margin-top:4px} .cn-dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.3);transition:width .35s var(--ease),background-color .35s} .cn-dots i.is-cur{width:28px;background:#fff} .cn-plans{padding-top:clamp(48px,5vw,88px)} .cn-plans .scn-head{max-width:1080px;margin-bottom:44px} .cn-plans .scn-title{font-size:clamp(38px,4.3vw,62px)} .cn-pfoot{flex-direction:column;align-items:center;gap:18px} /* the plan foot as three glass tokens: + 200 € once, 0 € today, the „Одобрено“ tap */ .cn-pfacts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .cn-pfacts li{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 20px 8px 8px;border-radius:999px;font-size:17px;font-weight:500;color:var(--on); background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .cn-pfacts b{font-weight:700} .cn-pf-i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;font-style:normal;font-size:19px;font-weight:700;color:var(--cobalt);background:#fff} .cn-okb{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:999px;flex:none;font-style:normal;font-size:15px;font-weight:600;color:#fff; background:linear-gradient(150deg,#4A5BFF,#2335FF);box-shadow:0 8px 20px -8px rgba(35,53,255,.9),inset 0 1px 0 rgba(255,255,255,.3)} .cn-okb .ic{width:18px;height:18px;padding:3px;border-radius:50%;background:#fff;color:var(--cobalt);stroke-width:3.4} .cn-plans .cn-alt{font-size:17px;line-height:1.5;color:var(--on-2);text-align:center} .cn-plans .cn-live-line{font-size:16px;line-height:1.5;color:var(--on-3);text-align:center} .cn-live-line a{color:var(--on);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;transition:text-decoration-color .2s} .cn-live-line a:hover{text-decoration-color:#fff} @media (max-width:980px){ .cn-cards{display:flex;gap:14px;max-width:none;margin-inline:calc(-1 * var(--gut));padding:30px var(--gut) 44px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:none} .cn-cards::-webkit-scrollbar{display:none} .cn-halo{display:none} .cn-plan{flex:0 0 min(84%,380px);display:flex;flex-direction:column;scroll-snap-align:center} .cn-plan.card{margin-block:0;padding-block:30px 28px;box-shadow:0 2px 6px rgba(0,0,0,.1),0 30px 50px -30px rgba(2,4,40,.9)} .cn-cards.is-js .cn-plan>*{transition:opacity .35s var(--ease)} .cn-cards.is-js .cn-plan:not(.is-cur)>*{opacity:.35} html.js .cn-dots{display:flex} } @media (max-width:560px){ .cn-plan,.cn-plan.card{padding:30px 24px 24px} .cn-plans .cn-plan-badge{left:24px} .cn-plan-l{margin:16px 0 22px} .cn-plan-l li{padding:8px 0;font-size:16px} .cn-pfacts{flex-direction:column;align-items:stretch;gap:10px;width:100%} .cn-pfacts li{font-size:16px;border-radius:28px} } /* ---------- 02 · comparison: one lit card ---------- */ .cn-cmp{max-width:1080px;margin-inline:auto;border:0;border-radius:28px;background:#fff;color:var(--ink);overflow:clip} .cn-cols{display:none} .cn-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:16px} .cn-tbl th,.cn-tbl td{padding:9px 26px;text-align:center;border-top:1px solid var(--line)} .cn-tbl thead th{position:sticky;top:var(--hdr);z-index:2;background:#fff;border-top:0;border-bottom:1px solid var(--line);padding:24px 26px 18px;vertical-align:bottom} .cn-tbl .cn-th-f{text-align:left;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .cn-th-n{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em} .cn-th-p{display:block;margin-top:4px;font-size:15px;color:var(--muted)} .cn-th-p b{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.03em} .cn-tbl thead .cn-c-hot{background:var(--cobalt);color:#fff} .cn-tbl thead .cn-c-hot .cn-th-p{color:rgba(255,255,255,.82)} .cn-tbl thead .cn-c-hot .cn-th-p b{color:#fff} .cn-tbl tbody th{text-align:left;font-weight:500;color:var(--ink-2)} .cn-tbl td[data-col="grow"]{background:#F5F6FF} .cn-tbl th[scope="col"]:not(.cn-th-f),.cn-tbl td{width:17%} .cn-grp th{padding:11px 26px 9px;background:var(--mist);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);text-align:left} .cn-grp th::before{content:'';display:inline-block;width:10px;height:10px;margin-right:12px;border-radius:50%;vertical-align:1px;background:var(--gdot,var(--line-2))} .cn-g2{--gdot:var(--cobalt)}.cn-g3{--gdot:var(--ink)}.cn-g4{--gdot:var(--cobalt-deep)} .cn-g1{--gdot:#8FA0FF} .cn-txt{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink-2)} .cn-y::before{content:'';display:inline-block;vertical-align:middle;width:24px;height:24px;border-radius:50%;background:var(--cobalt) var(--chk) center/14px no-repeat} .cn-n::before{content:'';display:inline-block;vertical-align:middle;width:14px;height:2px;border-radius:2px;background:var(--line-2)} .cn-add{font-weight:600;color:var(--ink-2);white-space:nowrap} .cn-in{white-space:nowrap} .cn-in span{display:inline-block;padding:7px 11px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font-size:15px;font-weight:600;line-height:1} .cn-tot th,.cn-tot td{padding-block:16px;font-size:18px;font-weight:600;color:var(--ink);background:var(--mist)} .cn-tot td[data-col="grow"]{background:var(--cobalt-tint);color:var(--cobalt)} @media (prefers-reduced-motion:no-preference){ html.js .cn-tbl tbody:not(.play) .cn-y::before{opacity:0} html.js .cn-tbl tbody.play .cn-y::before{animation:cnTick .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.45s + var(--r,0) * .09s)} html.js .cn-tbl tbody.play td[data-col="grow"].cn-y::before{animation-delay:calc(.53s + var(--r,0) * .09s)} html.js .cn-tbl tbody.play td[data-col="full"].cn-y::before{animation-delay:calc(.61s + var(--r,0) * .09s)} /* the first ticks wait until the card has settled */ html.js .cn-tbl .cn-tb1.play .cn-y::before{animation-delay:1.3s} html.js .cn-tbl .cn-tb1.play td[data-col="grow"].cn-y::before{animation-delay:1.38s} html.js .cn-tbl .cn-tb1.play td[data-col="full"].cn-y::before{animation-delay:1.46s} } /* the card rises in almost opaque (no washed slab over the stage) */ html.js .play .cn-cmp.sq{animation-name:cnRise;animation-duration:1s} @keyframes cnRise{0%{opacity:0;transform:translateY(40px)}25%{opacity:1}100%{opacity:1;transform:none}} /* one-off extras under the table: one chip row (video lengths, logo) instead of a footnote sentence */ .cn-xtra{align-items:center;gap:12px 14px} .cn-compare .cn-xtra-k{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-3)} .cn-xtra-l{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .cn-xtra-l li{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 8px;border-radius:999px;font-size:16px;font-weight:500;color:var(--on-2); background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .cn-xtra-l li b{font-weight:600;color:#fff} .cn-xtra-l .ic{width:32px;height:32px;padding:8px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff} .cn-xtra-a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;font-size:16px;font-weight:600;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);transition:background-color .2s} .cn-xtra-a:hover{background:rgba(255,255,255,.1)} .cn-xtra-a .ic{width:18px;height:18px} @media (max-width:560px){.cn-xtra{flex-direction:column}} @media (max-width:760px){ html.js .cn-cols{position:sticky;top:var(--hdr);z-index:3;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:15px;background:#fff;box-shadow:0 10px 20px -12px rgba(11,18,51,.35)} html.js .cn-cols::before{content:"";position:absolute;inset:10px;z-index:-1;border-radius:22px;background:var(--mist)} .cn-cols button{display:grid;justify-items:center;align-content:center;gap:3px;min-height:62px;padding:4px;border:0;border-radius:18px;background:transparent;font:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s,color .25s} .cn-cols b{font-size:17px;font-weight:600;line-height:1.1} .cn-cols span{font-size:14px;line-height:1.1;color:var(--muted)} .cn-cols button[aria-pressed="true"]{background:var(--cobalt);color:#fff;box-shadow:0 10px 22px -10px rgba(35,53,255,.8)} .cn-cols button[aria-pressed="true"] span{color:rgba(255,255,255,.85)} .cn-cols button:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px} html.js .cn-tbl thead{display:none} html.js .cn-tbl[data-cn-show="start"] [data-col]:not([data-col="start"]), html.js .cn-tbl[data-cn-show="grow"] [data-col]:not([data-col="grow"]), html.js .cn-tbl[data-cn-show="full"] [data-col]:not([data-col="full"]){display:none} .cn-tbl{font-size:15px} .cn-tbl th,.cn-tbl td{padding:11px 16px} .cn-tbl thead th{position:static;padding:14px} .cn-grp th{padding:12px 16px 10px;font-size:15px} .cn-tbl th[scope="col"]:not(.cn-th-f),.cn-tbl td{width:38%} .cn-tbl td[data-col="grow"]{background:none} .cn-tbl .cn-tot th,.cn-tbl .cn-tot td{font-size:16px;background:var(--cobalt-tint)} .cn-tbl .cn-tot td[data-col]{color:var(--cobalt)} } /* ---------- 03 · FAQ ---------- */ .cn-faq-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:start;max-width:1160px;margin-inline:auto} .cn-chat{border:0;border-radius:28px;background:#fff;color:var(--ink);overflow:hidden} .cn-chat-h{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)} .cn-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-weight:700;font-size:19px;color:#fff;background:linear-gradient(150deg,#3A4BFF,#1420B5)} .cn-chat-h b{display:block;font-size:17px;font-weight:600;line-height:1.3} .cn-chat-h span{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.35;color:var(--muted)} .cn-chat-on{width:8px;height:8px;border-radius:50%;flex:none;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)} .cn-chat-body{display:grid;gap:10px;padding:20px 18px;background:linear-gradient(180deg,#F6F7FC,#fff)} .cn-chat .cn-bub{max-width:88%;padding:12px 16px;border-radius:18px;font-size:16px;line-height:1.45} .cn-chat .cn-bub-me{justify-self:end;background:var(--cobalt);color:#fff;border-bottom-right-radius:6px} .cn-bub-slot{position:relative;display:grid} .cn-chat .cn-bub-nk{justify-self:start;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:6px} .cn-chat .cn-bub-typing{display:none} /* the approval bubble: our finished work arrives, the owner's „Одобрено“ lands on it */ .cn-chat .cn-bub-card{justify-self:start;width:min(88%,300px);padding:6px;border-radius:18px 18px 18px 6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 14px 26px -18px rgba(11,18,51,.45)} .cn-bc-img{position:relative;display:block;border-radius:13px;overflow:hidden} .cn-bc-img img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 30%} .cn-bc-new{position:absolute;left:8px;top:8px;padding:5px 9px;border-radius:999px;font-style:normal;font-size:13px;font-weight:600;line-height:1;color:var(--ink);background:#fff} .cn-bc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 6px 4px 8px} .cn-bc-row b{font-size:15px;font-weight:600;color:var(--ink)} .cn-bc-ok{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 8px;border-radius:999px;font-size:14px;font-weight:600;color:#fff;background:var(--cobalt);box-shadow:0 8px 18px -8px rgba(35,53,255,.85)} .cn-bc-ok .ic{width:18px;height:18px;padding:3px;border-radius:50%;background:#fff;color:var(--cobalt);stroke-width:3.4} .cn-chat-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;margin:4px 14px 14px;padding:6px 6px 6px 22px;border-radius:999px;background:var(--mist);font-size:17px;font-weight:600;color:var(--ink);transition:background-color .2s} .cn-chat-in:hover{background:var(--mist-2)} .cn-chat-in:focus-visible{outline-color:var(--cobalt)} .cn-chat-send{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cobalt);color:#fff;transition:transform .35s var(--ease)} .cn-chat-in:hover .cn-chat-send{transform:translateX(3px)} @media (prefers-reduced-motion:no-preference){ html.js .cn-chat .cn-bub-me,html.js .cn-chat .cn-bub-nk{opacity:0;transform:translateY(10px)} html.js .play .cn-chat .cn-bub-me{animation:cnBub .55s var(--ease) 1.25s forwards} html.js .play .cn-chat .cn-bub-nk{animation:cnBub .55s var(--ease) 2.75s forwards} html.js .cn-chat .cn-bub-card{opacity:0;transform:translateY(10px)} html.js .play .cn-chat .cn-bub-card{animation:cnBub .55s var(--ease) 3.6s forwards} html.js .cn-chat .cn-bc-ok{opacity:0;transform:scale(.6)} html.js .play .cn-chat .cn-bc-ok{animation:cnTick .5s cubic-bezier(.3,1.5,.5,1) 4.5s both} html.js .cn-chat .cn-bub-typing{display:inline-flex;position:absolute;left:0;top:0;align-items:center;gap:5px;padding:16px 18px;border-radius:18px 18px 18px 6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);opacity:0} html.js .cn-chat .cn-bub-typing i{display:block;width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.45} html.js .play .cn-chat .cn-bub-typing{animation:cnTyping 1.1s var(--ease) 1.7s forwards} html.js .play .cn-chat .cn-bub-typing i{animation:cnDot .3s ease-in-out 1.75s 4 alternate} html.js .play .cn-chat .cn-bub-typing i:nth-child(2){animation-delay:1.85s} html.js .play .cn-chat .cn-bub-typing i:nth-child(3){animation-delay:1.95s} } @keyframes cnBub{to{opacity:1;transform:none}} @keyframes cnTyping{0%{opacity:0;transform:translateY(8px)}20%,78%{opacity:1;transform:none}100%{opacity:0;transform:none}} @keyframes cnDot{to{opacity:1;transform:translateY(-4px)}} .cn-faq-list{display:grid;gap:12px;align-content:start} .cn-faq-list details{border-radius:24px;transition:background-color .3s,box-shadow .3s} .cn-faq-list details[open]{background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.05))} .cn-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:76px;padding:18px 20px 18px 28px;font-size:clamp(18px,1.4vw,20px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:#fff;cursor:pointer;list-style:none} .cn-faq-list summary::-webkit-details-marker{display:none} .cn-faq-list summary .ic{width:40px;height:40px;padding:10px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;transition:rotate .35s var(--ease),background-color .3s,color .3s} .cn-faq-list details[open] summary .ic{rotate:45deg;background:#fff;color:var(--cobalt);box-shadow:none} .cn-faq-list summary:focus-visible{outline:3px solid #fff;outline-offset:-3px;border-radius:24px} .cn-faq-list details p{padding:0 28px 26px;font-size:17px;line-height:1.6;color:var(--on-2);max-width:60ch} @media (min-width:901px){.cn-chat{position:sticky;top:calc(var(--hdr) + 28px)}} @media (max-width:900px){ .cn-faq-stage{grid-template-columns:minmax(0,1fr);max-width:640px} .cn-faq-list summary{padding-left:22px} .cn-faq-list details p{padding:0 22px 22px} } /* ==== 61-proekti.css ==== */ /* ---------- PROEKTI „Кино“ (.pr-) : fanned phones sub-hero (real sites only), then three scenes on the shared stage: #pr-live (the 4 live client sites: laptop + phone screening room), #pr-con (the 5 flagship concepts: a coverflow of screens) and #pr-gal (all 12 concepts: filter + lit thumbnails). Sequencing comes from 04-stage.css (.sq in [data-play] groups). The one loop per scene is the auto-advance of the room (progress bar per tab), gated by .live; clips are handled by 61-proekti.js. Honesty: live = green dot „На живо“ + the real domain; concept = hollow ring „Концепция“, on every item and in every state. ---------- */ /* ---------- device mockups (page-local names, so nothing collides with the home mockups) ---------- */ .pr-phone{position:relative;background:#0A0D1F;border-radius:17%/7.9%;padding:3.6%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 34px 60px -24px rgba(0,0,30,.75)} .pr-ph-view{position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:14%/6.5%;background:#000} .pr-ph-view::before{content:'';position:absolute;z-index:3;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000} .pr-ph-view::after,.pr-lap-view::after,.pr-cs-scr::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 34%)} .pr-ph-view img,.pr-lap-view img{width:100%;height:auto} .pr-lap{position:relative} .pr-lap-screen{position:relative;background:#0A0D1F;border-radius:18px 18px 4px 4px;padding:1.5% 1.5% 2.2%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.05),0 50px 90px -40px rgba(0,0,30,.85)} .pr-lap-view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0 0 5px 5px;background:#000} .pr-lap-base{position:relative;height:clamp(9px,1.3vw,16px);margin-inline:-6.5%;background:linear-gradient(180deg,#EEF0F6 0%,#C7CCDA 45%,#8E95AB 100%);border-radius:2px 2px 18px 18px/2px 2px 14px 14px;box-shadow:0 26px 40px -14px rgba(0,0,30,.6)} .pr-lap-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:38%;translate:-50% 0;background:#B3B9CA;border-radius:0 0 10px 10px} /* browser address bar: the real domain, with the lock of a secure site */ .pr-url{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#171B31;border-radius:6px 6px 0 0} .pr-url i{width:8px;height:8px;flex:none;border-radius:50%;background:#3B4263} .pr-url span{flex:1;display:flex;align-items:center;gap:6px;min-width:0;height:20px;margin:0 8% 0 5%;padding-left:12px;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.86);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden} .pr-url span b{font-weight:500} .pr-url svg{width:12px;height:12px;flex:none;fill:none;stroke:#34D27B;stroke-width:2.6;stroke-linecap:round} /* the fan's tall screenshot scrolls slowly inside the phone while the fan is on screen */ @media (prefers-reduced-motion:no-preference){ .pr-scr{animation:prScroll var(--dur,28s) ease-in-out 1.2s infinite alternate;animation-play-state:paused;will-change:transform} .pr-fan.play .pr-scr{animation-play-state:running} } @keyframes prScroll{0%,8%{transform:translateY(0)}30%,38%{transform:translateY(calc(var(--max) * .33))}62%,70%{transform:translateY(calc(var(--max) * .66))}92%,100%{transform:translateY(var(--max))}} @keyframes prBob{to{transform:translateY(-10px)}} /* ---------- sub-hero: three real sites fanned out, floating ---------- */ .pr-hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .pr-fan{position:relative;min-height:clamp(420px,40vw,580px)} .pr-fan::before{content:'';position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0));pointer-events:none} .pr-fan .pr-phone{position:absolute;top:50%;left:50%;width:clamp(150px,15.5vw,226px);translate:-50% -50%} .pr-fan-c{z-index:3} .pr-fan-l,.pr-fan-r{z-index:1;scale:.86;filter:saturate(.92)} .pr-fan .pr-fan-l{translate:-118% -45%;rotate:-11deg} .pr-fan .pr-fan-r{translate:18% -45%;rotate:11deg} .pr-fan-tag{position:absolute;z-index:4;left:50%;bottom:3%;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;box-shadow:0 20px 40px -16px rgba(0,0,40,.55)} .pr-fan-tag i{width:9px;height:9px;border-radius:50%;background:#34D27B;box-shadow:0 0 0 4px rgba(52,210,123,.22)} .pr-fan-tag span{color:var(--muted);font-weight:500} @media (prefers-reduced-motion:no-preference){ html.js .pr-fan-l{animation:prFanL 1.3s var(--ease) .35s both,prBob 7s ease-in-out 1.7s infinite alternate} html.js .pr-fan-r{animation:prFanR 1.3s var(--ease) .35s both,prBob 8s ease-in-out 2.6s infinite alternate} html.js .pr-fan-c{animation:prFanC 1.1s var(--ease) .15s both,prBob 6s ease-in-out 1.3s infinite alternate} html.js .pr-fan-tag{animation:prTag .9s var(--ease) 1.1s both} html.js .pr-fan:not(.play) .pr-phone{animation-play-state:running,paused} .pr-fan-tag i{animation:prLive 2.4s ease-in-out infinite} html.js .pr-fan:not(.play) .pr-fan-tag i{animation-play-state:paused} } @keyframes prFanL{from{translate:-50% -46%;rotate:0deg}} @keyframes prFanR{from{translate:-50% -46%;rotate:0deg}} @keyframes prFanC{from{opacity:0;translate:-50% -44%}} @keyframes prTag{from{opacity:0;translate:-50% 14px}} @keyframes prLive{50%{box-shadow:0 0 0 7px rgba(52,210,123,.08)}} /* ---------- the rooms (shared by #pr-live and #pr-con) ---------- */ .pr-sc{overflow-x:clip} /* the site's light and the side screens may spill past the viewport edge */ .pr-sc .scn-head{margin-bottom:clamp(30px,3.4vw,52px)} /* each site brings its own light onto the stage: two stacked layers, JS paints the new colour on the hidden one and they crossfade with opacity only (no colour transition, so the big gradient is painted once per change, never per frame) */ .pr-glow{position:absolute;inset:-20% -16% -16%;pointer-events:none} .pr-gl{position:absolute;inset:0;border-radius:50%;--c:transparent;opacity:0;transition:opacity 1.4s var(--ease); background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 62%,transparent) 48%,color-mix(in srgb,var(--c) 22%,transparent) 74%,transparent 100%)} .pr-gl.on{opacity:1} html.js .play .pr-glow.sq{animation-duration:1.8s} .pr-vf{position:absolute;inset:0;pointer-events:none;--c:rgba(255,255,255,.42);--k:30px; background: linear-gradient(var(--c),var(--c)) 0 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 0/2px var(--k), linear-gradient(var(--c),var(--c)) 100% 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px var(--k), linear-gradient(var(--c),var(--c)) 0 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px var(--k), linear-gradient(var(--c),var(--c)) 100% 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px var(--k); background-repeat:no-repeat} /* stills crossfade; the one clip fades in over its still once it really plays */ .pr-still{display:block;width:100%;height:100%;object-fit:cover;object-position:top} .pr-lap-view .pr-still,.pr-ph-view .pr-still{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .8s var(--ease)} .pr-lap-view .pr-still.on,.pr-ph-view .pr-still.on{opacity:1} .pr-vid{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:transparent;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)} .pr-vid.on{opacity:1} .pr-rviz>.pr-vid,.pr-cf>.pr-vid{display:none} /* parked until JS moves it into the chosen screen */ /* tabs: progress bar, name, badge + branch, the link */ .pr-tabs{display:flex;flex-direction:column;gap:6px} .pr-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:4px 0 8px} .pr-tb{display:flex;flex-direction:column;align-items:flex-start;gap:9px;width:100%;min-height:48px;padding:14px 0 6px;text-align:left;color:inherit;cursor:pointer;background:none;border:0;font:inherit} .pr-tb:focus-visible{outline-offset:4px;border-radius:12px} .pr-bar{position:relative;display:block;width:100%;height:3px;margin-bottom:8px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden} .pr-bar b{position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:0 50%} .pr-t.done .pr-bar b{transform:none;background:rgba(255,255,255,.5)} .pr-t.cur .pr-bar b{animation:prBar var(--t,9.4s) linear forwards;animation-play-state:paused} .pr-room.run.live:not(.hold) .pr-t.cur .pr-bar b{animation-play-state:running} @keyframes prBar{from{transform:scaleX(0)}to{transform:none}} .pr-tn{font-size:clamp(22px,1.9vw,28px);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--on);transition:color .4s} .pr-tm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .pr-br{font-size:16px;line-height:1.3;color:var(--on-3);transition:color .4s} .pr-t:not(.cur) .pr-tn{color:rgba(255,255,255,.6)} .pr-t:not(.cur) .pr-tb:hover .pr-tn{color:#fff} .pr-t.cur .pr-br{color:var(--on-2)} /* the honesty badge: live = filled green dot, concept = hollow ring; the words say it too */ .pr-bd{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 8px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap} .pr-bd::before{content:'';width:8px;height:8px;flex:none;border-radius:50%} .pr-bd.live{background:rgba(52,210,123,.14);color:#BDF5D5} .pr-bd.live::before{background:#34D27B} .pr-bd.cpt{background:rgba(201,210,255,.1);color:#DDE2FF;box-shadow:inset 0 0 0 1px rgba(201,210,255,.3)} .pr-bd.cpt::before{box-shadow:inset 0 0 0 2px #C9D2FF} /* live tabs: the laptop tag already says „На живо“; the per-tab badge stays for screen readers only */ #pr-live .pr-tb .pr-bd.live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .pr-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;font-size:16px;font-weight:600;color:#C9D2FF;text-decoration:underline;text-decoration-color:rgba(201,210,255,.35);text-underline-offset:5px;transition:color .3s,text-decoration-color .3s} .pr-go:hover{color:#fff;text-decoration-color:#fff} .pr-go .ic{width:17px;height:17px;transition:transform .3s var(--ease)} .pr-go:hover .ic{transform:translate(2px,-2px)} .pr-t:not(.cur) .pr-go{color:rgba(201,210,255,.7)} /* ---------- #pr-live: laptop + phone, tabs at the side ---------- */ .pr-room{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(40px,5vw,84px);align-items:center} .pr-rviz{position:relative;aspect-ratio:1.42} .pr-rviz .pr-lap{position:absolute;left:3%;top:4%;width:83%} .pr-rviz .pr-phone{position:absolute;z-index:3;right:0;bottom:9%;width:21%} /* the tag under the laptop repeats what is on screen: live dot, „На живо“, the domain */ .pr-tag{position:absolute;z-index:4;left:6%;bottom:0;display:inline-flex;align-items:center;gap:10px;max-width:70%;padding:11px 18px 11px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;line-height:1.1;white-space:nowrap;box-shadow:0 20px 40px -16px rgba(0,0,40,.55)} .scene .pr-tag{color:var(--ink)} .pr-tag i{width:9px;height:9px;flex:none;border-radius:50%;background:#34D27B;box-shadow:0 0 0 4px rgba(52,210,123,.22)} .pr-tag span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:500} /* ---------- #pr-con: a coverflow of screens, tabs in a row underneath ---------- */ .pr-cfr{grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px)} .pr-cf{position:relative;touch-action:pan-y} .pr-cf-row{position:relative;width:min(60%,720px);margin-inline:auto} .pr-cs{position:absolute;inset:0 0 auto;z-index:calc(10 - var(--a,0));--a:max(var(--p),calc(var(--p) * -1)); transform:translateX(calc(var(--p) * 74%)) scale(calc(1 - var(--a) * .2));opacity:calc(1 - var(--a) * .34); transition:transform .95s var(--ease),opacity .95s var(--ease);cursor:pointer} .pr-cs.on{position:relative;cursor:default} .pr-cs.warp{transition:none;opacity:0} .pr-cs-dev{position:relative;background:#0A0D1F;border-radius:16px;padding:0 0 1.2%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 60px 100px -46px rgba(0,0,30,.95)} .pr-cs:not(.on) .pr-cs-dev{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,30,.8)} .pr-cs-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#171B31;border-radius:16px 16px 0 0} .pr-cs-bar i{width:8px;height:8px;flex:none;border-radius:50%;background:#3B4263} .pr-cs-bar span{display:flex;align-items:center;gap:7px;height:20px;margin:0 auto;padding:0 14px 0 10px;border-radius:99px;background:rgba(255,255,255,.08);color:#DDE2FF;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1} .pr-cs-bar span::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px #C9D2FF} .pr-cs-scr{position:relative;aspect-ratio:16/10;margin:0 1.2%;overflow:hidden;border-radius:0 0 6px 6px;background:#000} .pr-cs-scr picture{display:contents} .pr-cs-scr .pr-still{position:absolute;inset:0} .pr-cs-bd{display:none} /* the side screens dim so the chosen one owns the light */ .pr-cs:not(.on) .pr-cs-scr::after{background:rgba(6,9,40,.38)} .pr-cs:not(.on):hover{opacity:calc(1 - var(--a) * .24)} .pr-cfr .pr-tabs{flex-direction:row;gap:clamp(16px,2vw,28px)} .pr-cfr .pr-t{flex:1 1 0;min-width:0} .pr-cfr .pr-tn{font-size:clamp(20px,1.6vw,24px)} /* desktop: a slightly smaller coverflow and a tighter head, so the names show together with the screens (1440x900 too) */ @media (min-width:1001px){ #pr-con .scn-head{margin-bottom:clamp(24px,2.2vw,34px)} .pr-cfr{gap:clamp(28px,2.6vw,40px)} .pr-cf-row{width:min(56%,660px)} } /* with the chapter rail on the left (≥1280), the side screens stay clear of it: their reach shrinks with the viewport, the next pair dims further and the far pair steps out, so the rail reads on the dark stage */ @media (min-width:1280px){ .pr-cs{transform:translateX(calc(var(--p) * min(74%, 50vw - 330px))) scale(calc(1 - var(--a) * .2));opacity:calc(1 - var(--a) * .45)} .pr-cs:not(.on):hover{opacity:calc(1 - var(--a) * .3)} .pr-cs.far,.pr-cs.far:hover{opacity:0;pointer-events:none} } @media (prefers-reduced-motion:reduce){ .pr-still,.pr-vid,.pr-cs,.pr-gl,.pr-cs-bd{transition:none!important} .pr-t.cur .pr-bar b{animation:none;transform:none} } /* ---------- #pr-gal: 12 concepts, filter by branch, lit thumbnails ---------- */ .pr-fbar{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto clamp(40px,4.5vw,64px)} .pr-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .pr-chip{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-size:16px;font-weight:600;color:var(--on-2);white-space:nowrap;cursor:pointer; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,color .3s,border-color .3s,transform .35s var(--ease)} .pr-chip:has(.pr-ci){padding-left:16px} .pr-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff} .pr-chip:focus-visible{border-radius:999px;outline-color:#fff} .pr-chip:active{transform:scale(.97)} .pr-chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 16px 34px -18px rgba(0,0,0,.7)} .pr-ci{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:#9FAEFF} .pr-chip[aria-pressed="true"] .pr-ci{color:var(--cobalt)} .pr-count{font-size:16px;font-weight:500;color:var(--on-3)} .pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px} .pr-g[hidden]{display:none} .pr-gc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;color:var(--on)} .pr-gc:focus-visible{border-radius:28px;outline-offset:6px} .pr-gstage{grid-column:1/-1;position:relative;display:block;aspect-ratio:4/3;border-radius:28px;overflow:hidden; --pa:.28;background:radial-gradient(ellipse 70% 60% at 45% 25%,rgba(143,160,255,var(--pa)),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)); border:1px solid var(--hair);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);transition:transform .6s var(--ease),box-shadow .6s var(--ease),--pa .6s var(--ease)} @property --pa{syntax:'';inherits:false;initial-value:.28} .pr-gwin{position:absolute;left:7%;top:12%;width:78%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(11,18,51,.08),0 22px 40px -18px rgba(11,18,51,.45);transition:translate .6s var(--ease)} .pr-gwin::before{content:'';display:block;height:clamp(12px,1.25vw,18px);background:radial-gradient(circle at 10px 50%,#D5D9E4 2.6px,transparent 3.2px),radial-gradient(circle at 20px 50%,#D5D9E4 2.6px,transparent 3.2px),radial-gradient(circle at 30px 50%,#D5D9E4 2.6px,transparent 3.2px),#EEF0F6;border-bottom:1px solid var(--line)} .pr-gwin img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top} .pr-gph{position:absolute;right:6%;top:30%;width:21%;padding:2.2%;background:#0A0D1F;border-radius:16%/7.4%;box-shadow:0 24px 40px -18px rgba(0,0,30,.6);transition:translate .6s var(--ease)} .pr-gph img{width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:13%/6%} /* every thumbnail says what it is */ .pr-gbd{position:absolute;z-index:2;left:5%;bottom:6%;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(10,13,40,.78);box-shadow:inset 0 0 0 1px rgba(201,210,255,.28); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#DDE2FF;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1} .pr-gbd::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px #C9D2FF} .pr-gc:hover .pr-gstage,.pr-gc:focus-visible .pr-gstage{--pa:.4;transform:translateY(-6px);box-shadow:0 50px 90px -40px rgba(0,0,0,.85)} .pr-gc:hover .pr-gwin{translate:0 -4px} .pr-gc:hover .pr-gph{translate:0 -12px} .pr-gt{display:flex;flex-direction:column;gap:5px;min-width:0;padding-left:6px} .pr-gt b{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--on)} /* the new-tab cue shows only when the tile is pointed at */ .pr-gt b::after{content:'\2197' / '';display:inline-block;margin-left:8px;font-weight:500;color:#AEB9FF;opacity:0;transform:translate(-4px,2px);transition:opacity .3s,transform .4s var(--ease)} .pr-gc:hover .pr-gt b::after,.pr-gc:focus-visible .pr-gt b::after{opacity:1;transform:none} .pr-gt span{font-size:16px;line-height:1.3;color:var(--on-3)} .pr-gal .scn-foot{margin-top:clamp(56px,6vw,88px)} /* ---------- responsive ---------- */ @media (max-width:1000px){ .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px} /* the rooms stack: visual first, then the tabs as a swipeable strip */ .pr-room{grid-template-columns:minmax(0,1fr);gap:34px} .pr-tabs,.pr-cfr .pr-tabs{position:relative;flex-direction:row;gap:14px;margin-inline:calc(var(--gut,20px) * -1);padding:0 var(--gut,20px) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut,20px);scrollbar-width:none} .pr-tabs::-webkit-scrollbar{display:none} .pr-t,.pr-cfr .pr-t{flex:0 0 min(42%,300px);scroll-snap-align:start;padding:2px 16px 8px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair)} .pr-t.cur{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)} .pr-cf-row{width:min(72%,620px)} } @media (max-width:900px){ .pr-fan{min-height:clamp(360px,90vw,480px);margin-top:12px} .pr-fan .pr-phone{width:clamp(130px,36vw,190px)} } /* phones: one big phone plays the -mob clip; the laptop and the browser chrome step aside */ @media (max-width:720px){ .pr-rviz{aspect-ratio:auto;display:flex;justify-content:center;padding:14px 0 70px} .pr-rviz .pr-lap{display:none} .pr-rviz .pr-phone{position:relative;right:auto;bottom:auto;width:min(52vw,212px)} .pr-vf{--k:20px} .pr-tag{left:50%;translate:-50% 0;max-width:calc(100% - 8px)} .pr-t,.pr-cfr .pr-t{flex-basis:min(76%,290px)} .pr-tn,.pr-cfr .pr-tn{font-size:22px} .pr-tb{gap:7px;padding-top:12px} .pr-bar{margin-bottom:5px} .pr-t{padding-bottom:4px} .pr-cf{padding:6px 0 4px} .pr-cf-row{width:min(52vw,212px)} .pr-cs{transform:translateX(calc(var(--p) * 88%)) scale(calc(1 - var(--a) * .18))} .pr-cs-dev{border-radius:17%/7.9%;padding:3.6%} .pr-cs-bar{display:none} .pr-cs-scr{aspect-ratio:9/19.5;margin:0;border-radius:14%/6.5%} .pr-cs-scr::before{content:'';position:absolute;z-index:3;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000} .pr-cs-bd{position:absolute;z-index:4;left:50%;bottom:-18px;translate:-50% 0;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 16px 30px -12px rgba(0,0,40,.6)} .pr-cs-bd::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--cobalt)} .pr-cs-bd{transition:opacity .5s var(--ease)} .pr-cs:not(.on) .pr-cs-bd{opacity:0} /* the side phones are cut by the viewport edge: only the chosen one wears the pill */ .pr-cfr{gap:44px} } @media (max-width:620px){ .pr-hero-act .btn{flex:1 1 100%} .pr-fbar{gap:14px} .pr-filter{gap:8px} .pr-chip,.pr-chip:has(.pr-ci){flex:1 1 auto;justify-content:center;min-height:46px;padding:0 13px;font-size:15px} .pr-ci{display:none} .pr-count{font-size:15px;color:var(--on-2)} .pr-grid{gap:28px 14px} .pr-gc{gap:12px} .pr-gc:focus-visible{border-radius:18px} .pr-gstage{border-radius:18px} /* on a phone the tiny phone overlay only adds clutter: the browser preview fills the stage instead */ .pr-gph{display:none} .pr-gwin{left:6%;top:9%;width:88%;border-radius:6px} .pr-gbd{left:6%;bottom:7%;height:26px;padding:0 10px 0 8px;gap:6px;font-size:13px;letter-spacing:.02em} .pr-gbd::before{width:7px;height:7px} .pr-gt{padding-left:2px;gap:3px} .pr-gt b{font-size:16px} .pr-gt span{font-size:14px;color:var(--on-2)} } /* ==== 62-uslugi.css ==== */ /* ---------- USLUGI (.us-) „Кино“ 2026-09-27: the orbit sub-hero, then 8 scenes on the shared dark stage (the last one is the monthly report card) (04-stage.css). Each scene: copy | ONE visual about the fictional Бистро Смокиня that plays as a tiny story (.sq sequence), one calm loop while the scene is on screen (.scene.live), the full service list in one collapsed

. Contract: _tools/CINEMA-BRIEF.md ---------- */ .us-sprite{position:absolute;width:0;height:0;overflow:hidden} /* ---------- hero: the 8 areas orbit the WhiteWays mark ---------- */ .us-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .us-orbit{position:relative;width:min(100%,540px);aspect-ratio:1;margin-inline:auto} .us-orbit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .us-orbit-lane{transform-box:fill-box;transform-origin:center} .us-orbit-core{position:absolute;z-index:1;left:50%;top:50%;width:24%;aspect-ratio:1;translate:-50% -50%;border-radius:28%;box-shadow:0 30px 60px -18px rgba(3,6,60,.65),0 0 0 14px rgba(255,255,255,.09),0 0 0 32px rgba(255,255,255,.045)} .us-orbit-core svg{display:block;width:100%;height:100%} .us-comet{position:absolute;inset:0;pointer-events:none;transform:rotate(22.5deg)} .us-comet i{position:absolute;left:50%;top:9%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.16),0 0 26px 8px rgba(150,170,255,.7)} .us-onode{position:absolute;z-index:2;left:var(--x);top:var(--y);translate:-50% -30px;display:grid;justify-items:center;gap:8px} .us-onode i{position:relative;width:60px;height:60px;border-radius:19px;display:grid;place-items:center;background:#fff;color:var(--cobalt);box-shadow:0 18px 40px -14px rgba(3,6,60,.6);transition:transform .35s var(--ease)} .us-onode i::after{content:"";position:absolute;inset:-7px;border-radius:25px;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 30px 4px rgba(170,186,255,.55);opacity:0} .us-onode .ic{width:27px;height:27px;stroke-width:1.9} .us-onode span{font-size:15px;font-weight:600;line-height:1;color:#fff;white-space:nowrap;padding:7px 12px;border-radius:999px;background:rgba(7,11,82,.32)} .us-onode:hover i{transform:translateY(-4px)} /* ---------- scene frame: copy .78fr | visual 1.22fr (the visual takes ~61 % of the grid) ---------- */ .us-sc{padding-bottom:64px} .us-sc .scn-split{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)} .us-sc .scn-split.rev{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)} .us-sc .scn-title{font-size:clamp(40px,4.3vw,64px)} /* 2026-10-01 minimal round: the plan note is a row of tokens, no sentence. ✓ chip = the plan that includes the scene's service, an icon chip = one extra part of it (its name is in sr-only + title and in the „Какво правим тук“ list), a price chip = the add-on */ .us-plan{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;padding-top:24px;border-top:1px solid var(--hair)} .us-chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 7px;border-radius:999px;background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:16px;font-weight:600;line-height:1;color:#fff;white-space:nowrap;transition:background-color .25s,box-shadow .25s} .us-chip .ic{width:32px;height:32px;flex:none;padding:7px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;stroke-width:2.2} .us-chip.is-in .ic{background:#fff;color:var(--cobalt);stroke-width:3} .us-chip a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px;transition:text-decoration-color .25s} .us-chip a:hover{text-decoration-color:#fff} .us-chip>i{font-style:normal;font-size:14px;font-weight:500;color:var(--on-3)} .us-chip .us-price{font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums} a.us-chip:hover{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)} /* the full service list: a quiet „+“ link under the plan note; on desktop it opens as a dark glass panel over the scene (no layout jump) */ .us-more{position:relative;z-index:20;margin-top:14px} .us-more summary{list-style:none;display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:17px;font-weight:600;line-height:1.3;color:var(--on-2);cursor:pointer;transition:color .25s} .us-more summary::-webkit-details-marker{display:none} .us-more summary .ic{width:28px;height:28px;flex:none;padding:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);stroke-width:2.4;transition:transform .35s var(--ease),background-color .25s} .us-more summary:hover{color:#fff} .us-more summary:hover .ic{background:rgba(255,255,255,.1)} .us-more[open] summary{color:#fff} .us-more[open] summary .ic{transform:rotate(45deg)} .us-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:10px;padding:12px 26px;border-radius:24px; background:linear-gradient(160deg,rgba(18,24,92,.97),rgba(8,12,52,.97));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 44px 100px -30px rgba(0,0,0,.85)} .us-list li{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid rgba(255,255,255,.07);font-size:16px;line-height:1.35;color:var(--on-2)} .us-list .ic{width:20px;height:20px;flex:none;color:#C9D2FF} @media (min-width:901px){ .us-list{position:absolute;left:0;top:100%;width:min(560px,calc(100% + 80px))} .us-sc .scn-split.rev .us-list{left:auto;right:0} } /* the one visual: a lit stage area with a soft spotlight; drawn line art sits behind the lit objects */ .us-vis{position:relative;isolation:isolate;width:100%;aspect-ratio:64/56} .us-vis::before{content:"";position:absolute;z-index:-2;inset:4% 0;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(168,184,255,.24),rgba(168,184,255,.07) 62%,transparent)} .us-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible} .us-art .sq,.us-map .sq,.us-wires .sq{transform-box:fill-box;transform-origin:center} /* drawn connectors between the lit objects (paths measured by 62-uslugi.js), one style: 2.5px round #C9D2FF + a white stop */ .us-wires{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;pointer-events:none} .us-wire{fill:none;stroke:#C9D2FF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .us-wire-dot{fill:#fff;stroke:#8FA0FF;stroke-width:3} html.js .play .us-wire.sq-draw{animation-duration:1.1s} .us-w-m{display:none} /* lit objects (white = where the eye lands), glass for the secondary parts */ .us-browser,.us-prod,.us-gcard,.us-post,.us-fcard,.us-chat,.us-cal,.us-kit,.us-toast,.us-route li.is-end{background:#fff;color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)} .us-toast{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;border-radius:20px} .us-toast i{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--cobalt);color:#fff} .us-toast i.is-y{background:#E4E8FF;color:var(--cobalt)} /* 2026-10-01 QA: was yellow, a 2nd yellow next to the header CTA */ .us-toast i .ic{width:21px;height:21px;stroke-width:2} .us-toast b{display:block;font-size:16px;font-weight:600;line-height:1.25;white-space:nowrap} .us-toast small{display:block;margin-top:2px;font-size:14px;line-height:1.3;color:var(--muted);white-space:nowrap} .us-glogo{display:block;width:44px;height:44px;flex:none} /* 01 web: the bistro site in the browser, the phone, the road from under the phone to the booking */ .us-browser{position:absolute;left:19%;right:0;top:8%;border-radius:20px;overflow:hidden} .us-bbar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#F5F6FB;border-bottom:1px solid var(--line)} .us-bbar i{width:10px;height:10px;border-radius:50%;background:#D8DCE8} .us-bbar span{margin-inline:auto;translate:-15px 0;padding:5px 16px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1;color:var(--muted)} .us-bview{aspect-ratio:16/10.2;overflow:hidden;background:#F6EFE3} .us-bview img{display:block;width:100%;height:auto} .us-phone{position:absolute;z-index:2;left:0;top:40%;width:21%;padding:6px;border-radius:32px;background:#0A0D1F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 40px 70px -26px rgba(0,0,0,.8)} .us-phone-v{aspect-ratio:9/19.5;overflow:hidden;border-radius:26px;background:#000} .us-phone-v img{display:block;width:100%;height:auto} .us-t-book{right:3%;bottom:4%} /* the call the heading promises: a wordless green call badge ringing on the phone's corner */ .us-ring{position:absolute;z-index:4;left:calc(21% - 34px);top:calc(40% - 24px);width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:#127A4B;color:#fff;box-shadow:0 0 0 7px rgba(31,164,99,.28),0 0 0 15px rgba(31,164,99,.12),0 18px 34px -12px rgba(0,0,0,.7)} .us-ring .ic{width:24px;height:24px;stroke-width:2.2} /* 02 shop: the product tile (a drawn bottle on cream), then the order walks its drawn route */ .us-v-shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(48px,5vw,72px);align-items:center;aspect-ratio:auto;min-height:clamp(480px,42vw,590px);padding-inline:1%} .us-prod{padding:12px 12px 16px;border-radius:28px;rotate:-2deg} .us-prod-img{aspect-ratio:1/1.18;border-radius:18px;overflow:hidden;background:#F6EFE3} .us-prod-img svg{display:block;width:100%;height:100%} .us-prod-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px 6px 0} .us-prod-row small{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C25B38} .us-prod-row b{display:block;margin-top:3px;font-size:17px;font-weight:600;line-height:1.25} .us-prod-row p>span{display:block;margin-top:4px;font-size:19px;font-weight:700} .us-cartbtn{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff;box-shadow:0 12px 24px -10px rgba(35,53,255,.7)} .us-cartbtn .ic{width:20px;height:20px} .us-route{position:relative} .us-route ol{position:relative;display:grid;gap:22px} .us-route li{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:10px 20px 10px 10px;border-radius:22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--hair)} .us-route li i{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:color-mix(in srgb,var(--st-base),#fff 16%)} .us-route li i .ic{width:20px;height:20px} .us-route li p{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px} .us-route li.is-end p{display:block} .us-route li b{display:block;font-size:16px;font-weight:600;line-height:1.25;color:#fff;white-space:nowrap} .us-route li small{display:block;font-size:14px;line-height:1.3;color:var(--on-2);white-space:nowrap;font-variant-numeric:tabular-nums} .us-route li.is-end{box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)} .us-route li.is-end i,html.js .us-route li i{background:var(--cobalt)} .us-route li.is-end b{color:var(--ink)} .us-route li.is-end small{color:var(--muted)} .us-rail{position:absolute;z-index:0;left:31px;top:33px;width:4px;height:calc(100% - 66px);overflow:visible} .us-rail line{fill:none;stroke-linecap:round} .us-rail .b{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:5 7} .us-rail .r{stroke:#C9D2FF;stroke-width:2.5} html.js .play .us-rail .r.sq-draw{animation-duration:1.1s} /* 03 google, the wide frame: the night map fills the width, the copy sits on it as a glass card */ .us-wide{position:relative} .us-v-google{aspect-ratio:16/10} .us-map{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible; -webkit-mask-image:radial-gradient(ellipse 56% 56% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 56% 56% at 50% 50%,#000 58%,transparent 100%)} .us-streets path{fill:none;stroke:rgba(201,210,255,.13);stroke-width:26;stroke-linecap:round} .us-streets path.sm{stroke:rgba(201,210,255,.08);stroke-width:12} .us-river{fill:none;stroke:rgba(31,168,238,.12);stroke-width:22;stroke-linecap:round} .us-dots-m circle{fill:rgba(201,210,255,.4)} .us-route-g{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round} html.js .play .us-route-g.sq-draw{animation-duration:1.1s} .us-you circle:first-child{fill:rgba(143,160,255,.3)} .us-you circle:last-child{fill:#8FA0FF;stroke:#fff;stroke-width:3} .us-pin-b path{fill:#fff} .us-pin-b circle{fill:var(--cobalt)} .us-pin-r{fill:rgba(255,255,255,.16);transform-box:fill-box;transform-origin:center} .us-gcard{position:absolute;z-index:3;left:0;bottom:5%;width:min(390px,62%);padding:14px;border-radius:28px} .us-gq{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:var(--mist);font-size:16px;color:var(--ink-2)} .us-gq .ic{width:18px;height:18px;color:var(--cobalt)} .us-gres{display:flex;align-items:center;gap:12px;padding:16px 6px 14px} .us-gres b{display:block;font-size:18px;font-weight:600;line-height:1.25} .us-gres small{display:block;font-size:14px;font-weight:500;color:#127A4B} .us-gacts{display:flex;gap:6px} .us-gacts span{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--cobalt)} .us-gacts .ic{width:16px;height:16px} .us-t-ai{right:1%;top:5%} @media (min-width:1101px){ .us-v-google{aspect-ratio:1240/640;min-height:600px} /* soft on all four sides: the map dissolves into the stage instead of ending in a cut */ .us-v-google .us-map{-webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 36%,#000 90%,transparent),linear-gradient(transparent,#000 15%,#000 85%,transparent); -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 2%,#000 36%,#000 90%,transparent),linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-composite:intersect} .us-v-google::before{inset:0 0 0 30%} .us-wide-h{position:absolute;z-index:5;left:0;top:50%;translate:0 -50%;width:min(540px,44%);margin:0;padding:38px 40px 26px;border-radius:28px; background:linear-gradient(160deg,rgba(20,28,104,.62),rgba(6,10,46,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 90px -40px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)} .us-wide-h .scn-title{font-size:clamp(38px,3.2vw,48px)} .us-wide-h .us-plan{margin-top:24px;padding-top:20px} .us-v-google .us-gcard{left:47%;bottom:7%;width:380px} .us-v-google .us-t-ai{right:2%;top:7%} } @media (max-width:1100px){.us-wide-h{margin-bottom:40px}} /* 04 ads: the sponsored post, a drawn line from its button to the campaign card, the bars narrow to the bookings */ /* a diagonal pair on the same height as the other visuals: the post high on the left, the campaign low on the right, the wire joins them level */ .us-v-ads{display:grid;grid-template-columns:minmax(0,310fr) minmax(0,340fr);gap:clamp(40px,4vw,56px);align-items:center;aspect-ratio:auto;min-height:clamp(480px,42vw,590px);padding:0 1%} .us-post{align-self:start;margin-top:3%;border-radius:28px;overflow:hidden;rotate:-2deg} .us-post-h{display:flex;align-items:center;gap:10px;padding:14px 16px} .us-post-h .us-glogo{width:38px;height:38px} .us-post-h b{display:block;font-size:16px;font-weight:600;line-height:1.2} .us-post-h small{display:block;font-size:13px;line-height:1.3;color:var(--muted)} .us-post-img{aspect-ratio:4/3.6;overflow:hidden} .us-post-img{background:#F6EFE3} .us-post-img img{display:block;width:100%;height:100%;object-fit:cover} .us-post-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px 16px;font-size:16px;font-weight:600} .us-post-f em{font-style:normal;font-size:14px;font-weight:600;color:#fff;background:var(--cobalt);padding:9px 14px;border-radius:12px} .us-fcard{align-self:end;margin-bottom:3%;padding:24px 24px 28px;border-radius:28px} .us-fun-h{display:grid;gap:4px;padding:0 0 16px;border-bottom:1px solid var(--line)} .us-fun-h b{font-size:18px;font-weight:600;line-height:1.25} .us-fun-h small{font-size:14px;line-height:1.3;color:var(--muted)} .us-fb{position:relative;padding-top:18px} .us-fb p{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .us-fb span{font-size:16px;font-weight:500;color:var(--muted)} .us-fb b{font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)} .us-fb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:6px;background:var(--mist)} .us-fb>i{position:relative;z-index:1;display:block;width:var(--w);height:12px;margin-top:10px;border-radius:6px;background:#AEB9FF} /* each funnel row: a small icon chip; the bookings row ends with a green tick (the number that counts) */ .us-fb p{align-items:center} .us-fb span{display:inline-flex;align-items:center;gap:10px} .us-fb-i{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--cobalt-tint);color:#5A67C9} .us-fb-i .ic{width:16px;height:16px;stroke-width:2.2} .us-fb.is-main .us-fb-i{background:var(--cobalt);color:#fff} .us-fb-ok{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:#127A4B;color:#fff} .us-fb-ok .ic{width:15px;height:15px;stroke-width:3} .us-fb.is-main span{font-weight:600;color:var(--ink)} .us-fb.is-main b{color:var(--cobalt)} .us-fb.is-main>i{background:var(--cobalt)} html.js .play .us-fb>i.sq-gx{animation-duration:1.1s} /* 05 ai: the moon, the chat that types and answers, the saved booking */ .us-v-ai{display:grid;place-items:center;aspect-ratio:auto;min-height:clamp(520px,44vw,610px)} .us-chat-w{position:relative;width:min(calc(100% - 48px),540px)} /* the night cue: a thin crescent and two stars just above the 23:41 in the chat header */ .us-night{position:absolute;z-index:-1;right:-44px;top:-86px;width:150px;height:110px;overflow:visible} .us-night .sq{transform-box:fill-box;transform-origin:center} .us-moon{fill:rgba(201,210,255,.06);stroke:#C9D2FF;stroke-width:2;stroke-linejoin:round} .us-stars circle{fill:#fff} .us-chat{width:100%;border-radius:28px;overflow:hidden} .us-chat-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)} .us-chat-h .us-glogo{width:42px;height:42px} .us-chat-h b{display:block;font-size:17px;font-weight:600;line-height:1.2} .us-chat-h small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)} .us-chat-h small i{width:7px;height:7px;border-radius:50%;background:#1FA463} .us-chat-h>span{margin-left:auto;font-size:14px;font-weight:600;color:var(--muted)} .us-chat-b{display:grid;gap:10px;padding:18px} .us-msg{position:relative;max-width:84%;padding:12px 16px;border-radius:20px;font-size:17px;line-height:1.4} .us-msg.me{justify-self:end;background:var(--cobalt);color:#fff;border-bottom-right-radius:6px} .us-msg.ai{justify-self:start;background:var(--mist);color:var(--ink);border-bottom-left-radius:6px} .us-tx{display:block} .us-dots{position:absolute;left:15px;top:50%;display:flex;gap:5px;translate:0 -50%;opacity:0} .us-dots i{width:7px;height:7px;border-radius:50%;background:#8A91AD} html.js .us-msg.ai .us-dots{opacity:1} html.js .us-msg.ai .us-tx{opacity:0} html.js .play .us-msg.ai .us-tx{animation:usIn .3s ease both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap) + .45s)} html.js .play .us-msg.ai .us-dots{animation:usOut .2s ease both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap) + .4s)} html.js .play .us-dots i{animation:usDot .8s ease-in-out 2} html.js .play .us-dots i:nth-child(2){animation-delay:.12s} html.js .play .us-dots i:nth-child(3){animation-delay:.24s} .us-chat-in{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 14px 14px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--mist);font-size:14px;color:var(--muted)} .us-chat-in i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff} .us-chat-in .ic{width:16px;height:16px} .us-t-done{right:-44px;bottom:-34px} .us-t-done i{background:#1FA463} /* 06 auto: booking → calendar → reminder along one drawn line; a wire drops from the calendar stop into the new 19:30 row, then the line runs on to the reminder stop and a second wire carries it down to the toast */ .us-v-auto{display:grid;align-content:center;gap:34px;aspect-ratio:auto;min-height:clamp(480px,42vw,590px);padding:0 4% 40px} .us-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr)} .us-flow-l{position:absolute;left:16.67%;width:66.66%;top:31px;height:4px;overflow:visible} .us-flow-l line{fill:none;stroke-linecap:round} .us-flow-l .b{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:5 7} .us-flow-l .r{stroke:#C9D2FF;stroke-width:2.5} html.js .play .us-flow-l .r.sq-draw{animation-duration:.6s} .us-wires-top{z-index:3} html.js .play .us-v-auto .us-wire.sq-draw{animation-duration:.7s} .us-node{position:relative;z-index:1;display:grid;justify-items:center;gap:12px} .us-node i{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;color:#fff;background:color-mix(in srgb,var(--st-base),#fff 15%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .us-node.is-on i{background:#fff;color:var(--cobalt);box-shadow:0 24px 44px -18px rgba(0,0,0,.7)} .us-node .ic{width:27px;height:27px} .us-node small{font-size:15px;font-weight:600;color:var(--on-2)} .us-cal{justify-self:start;width:68%;padding:20px;border-radius:28px} .us-cal-h{display:flex;align-items:baseline;gap:12px;padding:0 4px} .us-cal-h b{font-size:18px;font-weight:600} .us-cal-h small{font-size:14px;color:var(--muted)} .us-cal ul{display:grid;gap:8px;margin-top:14px} .us-cal li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:52px;padding:0 14px;border-radius:16px;background:var(--mist);font-size:16px;font-weight:500} .us-cal time{font-size:15px;font-weight:700;color:var(--cobalt);font-variant-numeric:tabular-nums} .us-cal em{font-style:normal;font-size:13px;font-weight:600;padding:5px 10px;border-radius:999px;background:#fff;color:var(--muted)} .us-cal li.is-new{background:var(--cobalt-tint);box-shadow:inset 0 0 0 1.5px rgba(35,53,255,.35)} .us-cal li.is-new em{background:var(--cobalt);color:#fff} .us-t-rem{right:4%;bottom:0} /* 07 brand: a diagonal cascade, kit top left, menu in the middle, reel on the right; drawn lines carry the kit to both */ .us-kit{position:absolute;z-index:3;left:0;top:1%;width:46%;padding:20px;border-radius:28px} .us-kit-logo{display:flex;align-items:center;gap:12px} .us-kit-logo svg{width:54px;height:54px;flex:none} .us-kit-logo b{display:block;font:600 28px/1 Georgia,"Times New Roman",serif;color:#1E3A2E} .us-kit-logo small{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C25B38} .us-sw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0} .us-sw li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--muted)} .us-sw i{width:30px;height:30px;flex:none;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(11,18,51,.1)} .us-kit-type{display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid var(--line)} .us-kit-type b{font:600 40px/1 Georgia,"Times New Roman",serif;color:#1E3A2E} .us-kit-type span{font-size:14px;line-height:1.3;color:var(--muted)} .us-menu{position:absolute;z-index:2;left:20%;top:58%;width:38%;padding:20px 22px 18px;border-radius:22px;background:#FFFCF6;color:#1E3A2E;rotate:-1.5deg; box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)} .us-menu-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1.5px solid rgba(30,58,46,.14);font:600 26px/1 Georgia,"Times New Roman",serif} .us-menu-h small{font:600 13px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#C25B38} .us-menu ul{display:grid;gap:9px;margin-top:13px} .us-menu li{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:500;line-height:1.25} .us-menu li::after{content:"";order:1;flex:1;border-bottom:1.5px dotted rgba(30,58,46,.3);translate:0 -3px} .us-menu li b{order:2;font-weight:700;white-space:nowrap} .us-menu-sw{display:flex;gap:6px;margin-top:14px} .us-menu-sw i{width:22px;height:8px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(30,58,46,.12)} .us-reel{position:absolute;z-index:1;right:0;top:12%;height:78%;aspect-ratio:9/16;border-radius:30px;overflow:hidden;rotate:2deg;background:#1E3A2E; box-shadow:0 2px 6px rgba(0,0,0,.1),0 44px 90px -40px rgba(0,0,0,.75)} .us-reel img{display:block;width:100%;height:100%;object-fit:cover} .us-reel-logo{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(246,239,227,.95);font:600 15px/1 Georgia,"Times New Roman",serif;color:#1E3A2E} .us-reel-logo svg{width:26px;height:26px} .us-reel-play{position:absolute;left:50%;top:44%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;display:grid;place-items:center;background:#C25B38;color:#F6EFE3;box-shadow:0 10px 30px rgba(0,0,0,.3)} .us-reel-play .ic{width:24px;height:24px} .us-reel-sub{position:absolute;left:12px;right:12px;bottom:32px;padding:8px 10px;border-radius:12px;background:#1E3A2E;text-align:center;font-size:15px;font-weight:600;line-height:1.2;color:#F6EFE3} .us-reel-bar{position:absolute;left:16px;right:16px;bottom:16px;height:4px;border-radius:4px;background:rgba(246,239,227,.45);overflow:hidden} .us-reel-bar i{display:block;width:100%;height:100%;border-radius:4px;background:#E6AE4C;transform-origin:left;transform:scaleX(.38)} /* 08 report, the finale: the monthly report card (38-report.css) under the shared soft spotlight (kept inside the column: no overflow at 390) */ .us-v-rep{aspect-ratio:auto;padding-block:8px} .us-v-rep::before{inset:-6% 0} /* ---------- loops: one calm loop per scene, only while the scene is on screen ---------- */ @media (prefers-reduced-motion:no-preference){ html.js .us-orbit-lane{animation:usSpin 90s linear infinite} html.js .us-comet{animation:usSpin 24s linear infinite;transform:none} html.js .us-onode{animation:usBob 6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.8s)} html.js .us-onode i::after{animation:usHit 24s ease-out infinite;animation-delay:calc(var(--k) * 3s - 24.2s)} html.js .us-orbit:not(.is-live) *,html.js .us-orbit:not(.is-live) *::after{animation-play-state:paused!important} html.js .us-sc.live .us-bview img{animation:usPage 16s cubic-bezier(.65,0,.35,1) infinite} html.js .us-sc.live .us-prod{animation:usFloat 7s ease-in-out infinite alternate} html.js .play .us-route li i{animation:usLit .5s ease both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap) + .5s)} html.js .us-sc.live .us-pin-r{animation:usPing 4s ease-out 2.4s infinite} html.js .us-sc.live .us-post-img img{animation:usZoom 16s ease-in-out infinite alternate} html.js .us-sc.live .us-reel-bar i{animation:usBar 9s linear infinite} html.js .us-more[open] .us-list{animation:usDrop .4s var(--ease)} } @keyframes usSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes usBob{from{transform:translateY(-3px)}to{transform:translateY(4px)}} @keyframes usHit{0%{opacity:0;transform:scale(.9)}2%{opacity:1;transform:scale(1)}10%,100%{opacity:0;transform:scale(1.22)}} /* two holds on real section tops of us-smokinya-tall (1000×2500): the hero at 0, the menu („Готвим със сезона“ + 4 dishes) at 617px */ @keyframes usPage{0%,40%{transform:translateY(0)}50%,90%{transform:translateY(-24.7%)}100%{transform:translateY(0)}} @keyframes usLit{from{background-color:color-mix(in srgb,var(--st-base),#fff 16%)}to{background-color:var(--cobalt)}} @keyframes usFloat{from{transform:translateY(-5px)}to{transform:translateY(6px)}} @keyframes usPing{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(2)}} @keyframes usZoom{from{transform:scale(1)}to{transform:scale(1.08)}} @keyframes usBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes usIn{from{opacity:0}to{opacity:1}} @keyframes usOut{from{opacity:1}to{opacity:0}} @keyframes usDot{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}} @keyframes usDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ html.js .us-msg.ai .us-tx{opacity:1!important;animation:none!important} html.js .us-msg.ai .us-dots{display:none} } /* ---------- responsive ---------- */ @media (max-width:1100px) and (min-width:901px){ .us-sc .scn-split,.us-sc .scn-split.rev{gap:40px} .us-v-shop{grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:44px} .us-route li p{display:block} .us-v-ads{gap:36px} .us-fcard{padding:20px 18px 22px} .us-fb b{font-size:30px} .us-fb span{font-size:15px} .us-toast{padding:10px 14px 10px 10px} .us-v-brand{aspect-ratio:1/1.04} .us-kit{width:52%;padding:16px} .us-sw{margin:12px 0;gap:8px} .us-menu{width:46%;left:14%;top:60%;padding:16px 16px 14px} .us-menu-h{font-size:22px} .us-menu li{font-size:14px} .us-reel{top:14%;height:70%} .us-post-f{padding:12px 12px 14px;font-size:14px} .us-post-f span{white-space:nowrap} .us-post-f em{padding:8px 10px;font-size:13px} .us-prod-row b{font-size:15px} } @media (max-width:900px){ .us-sc .scn-split,.us-sc .scn-split.rev{grid-template-columns:minmax(0,1fr)} .us-vis{max-width:680px;margin-inline:auto} .us-orbit{width:min(100%,470px)} } @media (max-width:600px){ /* hero ring becomes a 2x4 grid of labelled tiles: readable and tappable on a phone */ .us-orbit{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;aspect-ratio:auto} .us-orbit-svg,.us-orbit-core,.us-comet{display:none} .us-onode{position:relative;left:auto;top:auto;translate:none;justify-items:start;gap:10px;padding:12px;border-radius:20px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .us-onode i{width:42px;height:42px;border-radius:13px;box-shadow:0 10px 24px -12px rgba(3,6,60,.6)} .us-onode i::after{inset:-5px;border-radius:17px} .us-onode .ic{width:22px;height:22px} .us-onode span{padding:0;background:none;font-size:16px;line-height:1.2;white-space:normal} .us-sc{padding-bottom:40px} .us-sc .scn-title{font-size:clamp(36px,10vw,44px)} .us-plan{margin-top:24px;padding-top:20px;gap:8px} .us-chip{min-height:44px;font-size:15px;padding-right:16px} .us-more summary{font-size:16px} .us-list{grid-template-columns:1fr;padding:6px 20px;border-radius:22px} .us-toast{padding:10px 14px 10px 10px;gap:10px} .us-toast i{width:38px;height:38px;border-radius:12px} .us-toast b{font-size:15px} .us-toast small{font-size:13px} /* web on a phone: one device and one result (the browser would repeat the same page at a tiny scale) */ .us-v-web{aspect-ratio:auto;padding-bottom:30px} .us-browser{display:none} .us-phone{position:relative;left:auto;top:auto;width:60%;margin-inline:auto;padding:5px;border-radius:30px} .us-phone-v{border-radius:25px} .us-t-book{right:0;bottom:0} .us-ring{left:calc(80% - 34px);top:-20px;width:50px;height:50px} .us-v-shop,.us-v-ads{grid-template-columns:minmax(0,1fr);min-height:0;gap:22px;padding-inline:0} .us-prod{display:flex;align-items:center;gap:14px;padding:10px;border-radius:24px;rotate:0deg} .us-prod-img{width:96px;flex:none;aspect-ratio:1;border-radius:16px} .us-prod-row{flex:1;padding:0 4px 0 0} /* compact route: 3 stops, 44px rows, label and time on one line */ .us-route ol{gap:10px} .us-route .us-r-opt{display:none} .us-route li{gap:12px;min-height:44px;padding:6px 16px 6px 6px;border-radius:18px} .us-route li i{width:32px;height:32px} .us-route li i .ic{width:16px;height:16px} .us-route li p{display:flex;flex:1;align-items:baseline;justify-content:space-between;gap:10px} .us-route li small{font-size:13px;white-space:nowrap} .us-rail{left:20px;top:22px;height:calc(100% - 44px)} .us-v-google{display:grid;aspect-ratio:auto} .us-map{position:relative;inset:auto;height:auto;aspect-ratio:64/56; -webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 46%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 58% 56% at 50% 46%,#000 55%,transparent 100%)} .us-gcard{position:relative;left:auto;bottom:auto;width:100%;margin-top:-84px;border-radius:24px} .us-t-ai{display:none} /* ads on a phone: the post becomes one compact row (dish | name + button), a straight 40px wire drops from its button to the campaign */ .us-v-ads{gap:40px} .us-post{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"img h" "img f";align-items:center;align-self:auto;margin:0;rotate:0deg;border-radius:24px} .us-post-img{grid-area:img;aspect-ratio:1;margin:10px 0 10px 10px;border-radius:16px} .us-post-h{grid-area:h;align-self:end;padding:12px 14px 0} .us-post-h .us-glogo{display:none} .us-post-f{grid-area:f;align-self:start;flex-wrap:wrap;gap:8px 10px;padding:8px 12px 12px 14px;font-size:15px} .us-post-f span{white-space:nowrap} .us-post-f em{padding:8px 12px} .us-fcard{align-self:auto;margin:0;padding:20px} .us-fb b{font-size:34px} .us-w-d{display:none} .us-w-m{display:inline} .us-v-ai{min-height:0;padding:64px 0 44px} .us-chat-w{width:100%} .us-chat-b{padding:14px} .us-msg{font-size:15px} .us-t-done{right:0;bottom:-44px} .us-night{right:-6px;top:-76px;width:120px;height:88px} .us-v-auto{min-height:0;gap:26px;padding:0 0 64px} .us-node i{width:56px;height:56px;border-radius:18px} .us-node .ic{width:24px;height:24px} .us-flow-l{top:26px} .us-cal{width:100%;padding:14px;border-radius:24px} .us-cal-h{justify-content:space-between} .us-cal li{gap:10px;padding:0 12px;font-size:15px} .us-t-rem{right:0;bottom:0} /* brand on a phone: only the kit and the reel, side by side */ .us-v-brand{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;align-items:center;aspect-ratio:auto;padding-block:8px} .us-menu{display:none} .us-kit,.us-reel{position:relative;left:auto;right:auto;top:auto;width:auto} .us-kit{padding:14px;border-radius:22px} .us-kit-logo{gap:8px} .us-kit-logo svg{width:36px;height:36px} .us-kit-logo b{font-size:20px} .us-kit-logo small{letter-spacing:.04em;text-transform:none;font-size:14px} .us-sw{grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0} .us-sw li{font-size:0;gap:0} .us-sw i{width:100%;height:28px} .us-kit-type b{font-size:28px} .us-kit-type span{font-size:13px} .us-reel{height:auto;width:100%;border-radius:22px} .us-reel-logo{left:8px;top:8px;padding:3px 9px 3px 3px;font-size:13px} .us-reel-logo svg{width:22px;height:22px} .us-reel-sub{left:8px;right:8px;bottom:24px;padding:6px 6px;font-size:13px} .us-reel-bar{left:10px;right:10px;bottom:10px} .us-reel-play{width:46px;height:46px;margin:-23px 0 0 -23px} } @media (max-width:600px) and (prefers-reduced-motion:no-preference){ html.js .us-onode{animation:none} html.js .us-onode i::after{animation-duration:12s;animation-delay:calc(var(--k) * 1.5s - 12s)} } /* ==== 63-video.css ==== */ /* Video page (owner: video agent) · prefix vd- · sub-hero from v5 „Кобалт Про“, everything below it is the „Кино“ stage (2026-09-27) Sub-hero: the storyboard reel (63-video.js pause button). Scenes: film strip (process), four formats in sync, one lit price sheet. Loops run only under .scene.live; everything is still under reduced motion. */ .vd-defs{position:absolute;width:0;height:0;overflow:hidden} .vd-hero :focus-visible,.vd-addon :focus-visible{outline-color:#fff} .vd-board :focus-visible,.vd-rate :focus-visible{outline-color:var(--cobalt)} /* ---------- hero: storyboard reel in a phone ---------- */ .vd-y{color:var(--yellow);font-weight:600;white-space:nowrap} .vd-visual{position:relative;display:grid;place-items:center;padding-block:12px} .vd-stage{position:relative;width:clamp(220px,20vw,280px)} .vd-phone{position:relative;z-index:1;padding:9px;border-radius:44px;background:#0A0D1F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 44px 80px -30px rgba(0,0,30,.8)} .vd-screen{position:relative;isolation:isolate;aspect-ratio:9/19.5;overflow:hidden;border-radius:35px;background:#070B52} .vd-screen::before{content:'';position:absolute;z-index:6;top:2.2%;left:50%;width:30%;height:3.1%;translate:-50% 0;border-radius:99px;background:#000} .vd-f{position:absolute;inset:0;opacity:0} .vd-f1{opacity:1;z-index:1}.vd-f2{z-index:2}.vd-f3{z-index:3}.vd-f4{z-index:4} .vd-f>svg{position:absolute;inset:0;width:100%;height:100%;display:block} .vd-cap{position:absolute;left:50%;bottom:8.5%;translate:-50% 0;width:max-content;max-width:86%;padding:7px 12px;border-radius:10px;background:rgba(7,11,82,.78);color:#fff;font:600 15px/1.3 var(--f);text-align:center;text-wrap:balance} .vd-endc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-bottom:6%;text-align:center;color:#fff;background:repeating-radial-gradient(circle at 50% 44%,transparent 0 58px,rgba(255,255,255,.07) 58px 60px),radial-gradient(circle at 50% 44%,#4050FF,#2335FF 50%,#1B2AE0)} .vd-logo{width:68px;height:68px;margin-bottom:8px;filter:drop-shadow(0 12px 20px rgba(0,0,40,.35))} .vd-endc b{font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.02em} .vd-endc small{font-size:14px;color:rgba(255,255,255,.8)} .vd-endbtn{margin-top:18px;padding:11px 18px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:15px;font-weight:600} .vd-prog{position:absolute;z-index:5;top:7.2%;left:8%;right:8%;height:3px;border-radius:3px;background:rgba(255,255,255,.34);overflow:hidden;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 4px),transparent calc(25% - 4px) 25%);mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 4px),transparent calc(25% - 4px) 25%)} .vd-prog i{display:block;height:100%;background:#fff;transform:scaleX(.25);transform-origin:0 50%} .vd-board{position:absolute;z-index:2;right:calc(100% - 64px);top:15%;width:222px;padding:14px 14px 12px;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(11,18,51,.08),0 30px 60px -22px rgba(3,6,60,.6)} .vd-board-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .vd-board-h b{font-size:15px;font-weight:600} /* 44px tap target, 34px visible disc */ .vd-pp{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:50%;background:none;color:var(--cobalt);cursor:pointer} .vd-pp::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--cobalt-tint);transition:background-color .25s} .vd-pp:hover::before{background:#DDE1FF} .vd-pp .ic{position:relative;width:17px;height:17px;stroke-width:2.4} .vd-i-play{display:none;fill:currentColor} .vd-pp[aria-pressed="true"] .vd-i-pause{display:none} .vd-pp[aria-pressed="true"] .vd-i-play{display:block} .vd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .vd-thumbs li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)} .vd-thumbs svg{width:100%;aspect-ratio:9/15;border-radius:8px;display:block;box-shadow:0 0 0 1px var(--line)} .vd-t1 svg{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cobalt)} .vd-t1 span{color:var(--cobalt)} .vd-subs{position:absolute;z-index:2;right:-96px;bottom:21%;display:flex;align-items:center;gap:10px;width:max-content;padding:10px 16px 10px 10px;border-radius:18px;background:#fff;color:var(--ink);font-size:15px;line-height:1.2;box-shadow:0 2px 6px rgba(11,18,51,.08),0 30px 60px -22px rgba(3,6,60,.6)} .vd-subs b{font-weight:600} .vd-subs small{display:block;font-size:13px;font-weight:500;color:var(--muted)} .vd-subs span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--cobalt);color:#fff;font-size:15px} @media (prefers-reduced-motion:no-preference){ .vd-f{animation:vd-frame 12s linear infinite both;animation-delay:var(--d)} .vd-f1,.vd-t1 svg,.vd-t1 span{--d:0s} .vd-f2,.vd-t2 svg,.vd-t2 span{--d:-9s} .vd-f3,.vd-t3 svg,.vd-t3 span{--d:-6s} .vd-f4,.vd-t4 svg,.vd-t4 span{--d:-3s} .vd-f .vd-cap{animation:vd-cap 12s var(--ease) infinite both;animation-delay:var(--d)} .vd-prog i{animation:vd-prog 12s linear infinite} .vd-thumbs svg{animation:vd-thumb 12s linear infinite both;animation-delay:var(--d)} .vd-thumbs span{animation:vd-num 12s linear infinite both;animation-delay:var(--d)} /* the phone and the subtitle card levitate gently; the storyboard card with the pause button stays still */ .vd-phone{animation:vd-float 8s ease-in-out infinite alternate} .vd-subs{animation:vd-float 7s ease-in-out -2s infinite alternate} .is-paused .vd-f,.is-paused .vd-cap,.is-paused .vd-prog i,.is-paused .vd-thumbs svg,.is-paused .vd-thumbs span, .is-paused .vd-phone,.is-paused .vd-subs{animation-play-state:paused} } @media (prefers-reduced-motion:reduce){.vd-pp{display:none}} @keyframes vd-frame{0%{opacity:0;transform:scale(1.07)}4%{opacity:1}29%{opacity:1}29.5%,100%{opacity:0;transform:scale(1)}} @keyframes vd-cap{0%,6%{opacity:0;transform:translateY(8px)}11%,100%{opacity:1;transform:none}} @keyframes vd-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes vd-thumb{0%,24.6%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cobalt)}25%,100%{box-shadow:0 0 0 1px var(--line)}} @keyframes vd-num{0%,24.6%{color:var(--cobalt)}25%,100%{color:var(--muted)}} @keyframes vd-float{from{transform:translateY(-7px)}to{transform:translateY(7px)}} /* ================= below the sub-hero: „Кино“ scenes on the shared stage (2026-09-27) ================= */ /* ---------- 1. process: a real film strip, four frames that play in order ---------- */ .vd-strip{--fx:26px;--fy:46px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;column-gap:22px;padding:var(--fy) var(--fx) 0} /* the film base: a grid item behind the window row, sprocket holes top and bottom */ .vd-strip::before{content:"";grid-area:1/1/2/-1;margin:calc(var(--fy)*-1) calc(var(--fx)*-1);border-radius:18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Crect x='9' y='1' width='14' height='12' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") 10px 16px/32px 14px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Crect x='9' y='1' width='14' height='12' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") 10px calc(100% - 16px)/32px 14px repeat-x, linear-gradient(180deg,#111858,#080C36); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 70px 120px -60px rgba(0,0,0,.9)} .vd-shot{position:relative;z-index:1;display:grid;grid-row:1/3;grid-template-rows:subgrid} .vd-shot:nth-child(1){grid-column:1}.vd-shot:nth-child(2){grid-column:2}.vd-shot:nth-child(3){grid-column:3}.vd-shot:nth-child(4){grid-column:4} .vd-win{position:relative;isolation:isolate;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0B1233;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px -22px rgba(0,0,0,.8)} .vd-win>svg{display:block;width:100%;height:100%} .vd-win svg .sq{transform-box:fill-box;transform-origin:50% 50%} html.js .play .vd-win .vd-wave.sq{transform-origin:50% 50%} /* the projector gate: a soft light that moves frame to frame (the one loop of the scene) */ .vd-win::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0; box-shadow:inset 0 0 0 2.5px #fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%)} .vd-shot-c{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;column-gap:14px;padding-top:calc(var(--fy) + 24px)} .vd-no{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:600 15px/1 var(--f);color:#fff; background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .vd-no::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 8px rgba(255,255,255,.12);opacity:0} .vd-shot-c h3{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--on)} /* frame 1: the client's one job, an „Одобрено“ state on the storyboard sheet (HTML, so it never drops under 13px) */ .vd-ok{position:absolute;z-index:3;right:9.5%;bottom:11%;display:inline-flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:999px;background:var(--cobalt);color:#fff;font:600 13px/1 var(--f);white-space:nowrap;box-shadow:0 0 0 3px #fff,0 10px 20px -6px rgba(35,53,255,.75)} .vd-ok .ic{width:15px;height:15px;stroke-width:2.8} html.js .vd-strip::before{opacity:0} html.js .vd-strip.play::before{animation:vdFeed 1.4s var(--ease) .4s both} @keyframes vdFeed{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} /* desktop: the film runs off both screen edges, the frames stay on a 1320 column */ @media (min-width:1101px){ .vd-process{overflow-x:clip;padding-top:clamp(56px,5.5vw,96px)} .vd-process .scn-head,.vd-price .scn-head{margin-bottom:40px} .vd-price .scn-foot{margin-top:32px} .vd-strip{--fx:max(64px,calc(50vw - 660px));--fy:40px;width:100vw;margin-inline:calc(50% - 50vw);column-gap:14px} .vd-shot-c{padding-top:calc(var(--fy) + 14px)} .vd-strip::before{border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(255,255,255,.09),0 70px 120px -60px rgba(0,0,0,.9)} } @media (prefers-reduced-motion:no-preference){ .vd-win::after,.vd-no::before{animation:vdGate 10s linear infinite paused;animation-delay:calc(3.8s + var(--k,0) * 2.5s)} .vd-strip.live .vd-win::after,.vd-strip.live .vd-no::before{animation-play-state:running} } @keyframes vdGate{0%{opacity:0}4%{opacity:1}22%{opacity:1}26%,100%{opacity:0}} /* ---------- 2. formats: one clip, four frames playing in sync ---------- */ .vd-fmts{container-type:inline-size;display:flex;justify-content:center;align-items:flex-start;gap:40px} .vd-fmt{--fh:min(300px,calc((100cqw - 200px)/4.1403));display:grid;grid-template-rows:var(--fh) auto auto;justify-items:center;text-align:center} .vd-fr{position:relative;align-self:end;flex:none} .vd-fr-in{position:relative;isolation:isolate;width:calc(var(--fh)*var(--r));height:var(--fh);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -34px rgba(0,0,0,.85)} .vd-fs{position:absolute;inset:0;width:100%;height:100%;display:block} .vd-fs1{transform-origin:50% 60%} .vd-fs2{opacity:0} .vd-mute{position:absolute;z-index:2;right:8px;top:8px;width:26px;height:26px;padding:5px;border-radius:50%;background:rgba(7,11,82,.6);color:#fff;stroke-width:2.2} .vd-fcap{position:absolute;z-index:2;left:5%;right:5%;bottom:12%;display:grid;justify-items:center;align-items:end} .vd-fcap>span{grid-area:1/1;max-width:100%;padding:5px 9px;border-radius:7px;background:rgba(7,11,82,.84);color:#fff;font:600 13px/1.3 var(--f);text-align:center;text-wrap:balance} .vd-fcap>span+span{opacity:0} .vd-fmt:first-child .vd-fcap>span{font-size:15px;padding:6px 11px} .vd-fcap b{font-weight:inherit} .vd-sh{display:none} .vd-fr-r{margin-top:24px;font-size:32px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--on)} .vd-fr-w{margin-top:10px;white-space:nowrap;font-size:16px;line-height:1.45;color:var(--on-2)} @media (prefers-reduced-motion:no-preference){ .vd-fs1{animation:vd-fa 10s linear -1s infinite paused} .vd-fs2{animation:vd-fb 10s linear -1s infinite paused} .vd-fcap>span:first-child{animation:vd-c1 10s linear -1s infinite paused} .vd-fcap>span+span{animation:vd-c2 10s linear -1s infinite paused} .scene.live .vd-fs1,.scene.live .vd-fs2,.scene.live .vd-fcap>span{animation-play-state:running} } @keyframes vd-fa{0%{transform:scale(1)}50%{transform:scale(1.06)}51%,100%{transform:scale(1)}} @keyframes vd-fb{0%,46%{opacity:0;transform:scale(1.05)}50%{opacity:1}96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}} @keyframes vd-c1{0%,2%{opacity:0;transform:translateY(5px)}6%,44%{opacity:1;transform:none}47%,100%{opacity:0;transform:none}} @keyframes vd-c2{0%,50%{opacity:0;transform:translateY(5px)}54%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}} /* ---------- 3. price: one lit sheet, three lengths on a 30 s ruler ---------- */ .vd-rate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px;margin-inline:auto;padding:10px;color:var(--ink)} /* the sheet itself is lit almost at once (.2s), then settles; its contents fill in after */ html.js .play .vd-rate.sq{animation-name:vdLit;animation-duration:.9s} @keyframes vdLit{0%{opacity:0;transform:translateY(28px) scale(1.03)}22%{opacity:1}100%{opacity:1;transform:none}} .vd-tier{display:flex;flex-direction:column;padding:30px 34px 28px} .vd-tier+.vd-tier{border-left:1px solid var(--line)} .vd-dur{display:flex;align-items:baseline;gap:12px} .vd-dur b{font-size:clamp(64px,6vw,92px);line-height:.9;font-weight:600;letter-spacing:-.05em;color:var(--ink)} .vd-dur span{font-size:18px;font-weight:500;color:var(--muted)} .vd-ruler{position:relative;height:10px;margin-top:32px;border-radius:10px; background:#EDEFF8} .vd-ruler::before{content:"";position:absolute;inset:0;border-radius:inherit; background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 6 - 2px),#D5DAEC calc(100% / 6 - 2px) calc(100% / 6))} .vd-ruler i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--len) / 30 * 100%);border-radius:10px;background:linear-gradient(90deg,#8FA0FF,var(--cobalt))} /* the scale ends, under the first ruler only */ .vd-scale{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;justify-content:space-between;font:500 14px/1 var(--f);color:var(--muted)} .vd-tprice{margin-top:34px;font-size:clamp(34px,3.2vw,46px);line-height:1.1;font-weight:600;letter-spacing:-.04em;white-space:nowrap;color:var(--ink)} .vd-tprice span{padding-inline:2px;background:linear-gradient(transparent 64%,var(--yellow) 64% 90%,transparent 90%)} .vd-tier .btn{margin-top:24px} /* what every price holds: six icon tiles; under them the monthly videos of Растеж / Пълен as two plan pills */ .vd-incl{display:grid;justify-items:center;gap:16px;max-width:1120px;margin:36px auto 0;text-align:center} .vd-inc-k{font-size:16px;font-weight:500;line-height:1.3;color:var(--on-2)} .vd-inc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:100%} .vd-inc li{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 10px 18px;border-radius:20px;font-size:16px;font-weight:600;line-height:1.25;color:var(--on); background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)} .vd-inc-i{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;color:#DDE2FF;background:rgba(143,160,255,.18);box-shadow:inset 0 0 0 1px rgba(201,210,255,.2)} .vd-inc-i .ic{width:25px;height:25px;stroke-width:1.8} .vd-addon{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:8px;font-size:17px;font-weight:500;line-height:1.3;color:var(--on)} .vd-pl{padding:7px 13px;border-radius:999px;background:var(--cobalt);color:#fff;font-size:15px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .vd-addon-t{display:inline-flex;align-items:center;gap:8px;margin-left:6px} .vd-addon-t .ic{width:16px;height:16px;color:#C9D2FF} /* ---------- responsive ---------- */ @media (min-width:901px) and (max-width:1100px){ /* small laptops: the copy-to-stage gap is only 126–178px, so the storyboard card is narrower and overhangs 110px, not 158px */ .vd-board{width:190px;right:calc(100% - 80px)} } @media (max-width:1100px){ /* the film runs down: one column of frames, sprocket holes left and right, the captions on the film */ .vd-strip{--fx:44px;grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto;padding:24px var(--fx) 6px;border-radius:18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='32'%3E%3Crect x='1' y='9' width='12' height='14' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") 14px 10px/14px 32px repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='32'%3E%3Crect x='1' y='9' width='12' height='14' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") calc(100% - 14px) 10px/14px 32px repeat-y, linear-gradient(180deg,#111858,#080C36); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 70px 120px -60px rgba(0,0,0,.9)} .vd-strip::before{display:none} .vd-shot,.vd-shot:nth-child(n){grid-column:1;grid-row:auto;display:block} .vd-shot-c{padding:20px 2px 34px} .vd-shot:last-child .vd-shot-c{padding-bottom:22px} html.js .vd-strip{opacity:0} html.js .vd-strip.play{animation:vdFeedY 1.3s var(--ease) .4s both} } @media (min-width:701px) and (max-width:1100px){ /* tablets: each frame with its caption beside it, still one strip running down */ .vd-strip{max-width:880px;padding-block:28px 10px} .vd-shot,.vd-shot:nth-child(n){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:28px;align-items:center;padding-bottom:18px} .vd-shot-c{grid-template-columns:minmax(0,1fr);row-gap:12px} .vd-shot-c,.vd-shot:last-child .vd-shot-c{padding:0} } @keyframes vdFeedY{from{opacity:0;clip-path:inset(0 0 100% 0 round 18px)}to{opacity:1;clip-path:inset(0 0 0 0 round 18px)}} @media (max-width:900px){ .vd-visual{padding-block:24px 8px} /* price: the sheet stacks; length on the left, name + price on the right, ruler under both */ .vd-rate{grid-template-columns:1fr;padding:4px 0} .vd-tier+.vd-tier{border-left:0;border-top:1px solid var(--line)} .vd-tier{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dur price" "ruler ruler" "btn btn";column-gap:18px;padding:28px 26px 26px} .vd-dur{grid-area:dur;flex-direction:column;align-items:flex-start;gap:6px} .vd-dur b{font-size:60px} .vd-dur span{font-size:16px} .vd-tprice{grid-area:price;justify-self:end;align-self:center;margin-top:0;font-size:34px} .vd-ruler{grid-area:ruler;margin-top:24px} .vd-tier .btn{grid-area:btn;margin-top:24px} .vd-tier:first-child .btn{margin-top:40px} .vd-inc{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px} /* formats: one height for all four (the shapes differ only in width), rows paired by width: 9:16 + 16:9 fill row 1, 4:5 + 1:1 below. Each item is exactly as wide as its frame; the label under it wraps inside that width. */ .vd-fmts{flex-wrap:wrap;justify-content:center;gap:32px 14px;max-width:484px;margin-inline:auto} .vd-fmt{--fh:min(200px,calc((100cqw - 15px)/2.3403));width:calc(var(--fh)*var(--r));grid-template-rows:var(--fh) auto auto} .vd-fr-w{white-space:normal;text-wrap:balance} .vd-fmt:nth-child(2){order:1} .vd-fmt:nth-child(1){order:2} .vd-fmt:nth-child(3){order:3} .vd-fmt:nth-child(4){order:4} } @media (max-width:700px){ /* hero: phone on the right, the two cards stacked on its left edge, all inside the gutter */ .vd-visual{padding-block:20px 4px} .vd-stage{width:100%;max-width:360px} .vd-phone{width:190px;margin-left:auto;margin-right:max(0px,calc(50% - 160px));padding:7px;border-radius:36px} .vd-screen{border-radius:29px} .vd-cap{font-size:13px;padding:6px 10px} .vd-endc b{font-size:18px} .vd-endbtn{font-size:13px;padding:9px 14px} .vd-board{left:max(0px,calc(50% - 160px));right:auto;top:9%;width:160px;padding:10px 10px 9px;border-radius:18px} .vd-board-h{margin-bottom:8px} .vd-board-h b{font-size:13px} .vd-thumbs{gap:5px} .vd-thumbs svg{border-radius:6px} .vd-subs{left:calc(max(0px,calc(50% - 160px)) + 14px);right:auto;top:auto;bottom:14%;padding:8px 12px 8px 8px;font-size:14px;border-radius:14px;gap:8px} .vd-subs span{width:28px;height:28px;font-size:13px;border-radius:8px} /* process film on a phone: narrower holes margin so the frames stay big */ .vd-strip{--fx:36px} .vd-strip{background-position:10px 10px,calc(100% - 10px) 10px,0 0} .vd-shot-c h3{font-size:22px} /* small frames: captions stay on one line, low in the frame, so the picture stays visible */ .vd-fcap{bottom:7%;left:3%;right:3%} .vd-fmt:first-child .vd-fcap>span,.vd-fcap>span{font-size:13px;line-height:1.2;padding:3px 5px;white-space:nowrap} .vd-fmt:nth-child(2) .vd-fcap>span{padding-inline:3px} .vd-lg{display:none}.vd-sh{display:inline} .vd-mute{width:22px;height:22px;padding:4px;right:6px} .vd-fr-r{margin-top:16px;font-size:24px} .vd-fr-w{font-size:15px} .vd-tier{padding:20px 20px 18px} .vd-tier .btn{margin-top:18px;min-height:48px;font-size:15px} .vd-tier:first-child .btn{margin-top:32px} .vd-dur b{font-size:54px} .vd-tprice{font-size:30px} .vd-incl{margin-top:28px;gap:14px} .vd-inc{gap:8px} .vd-inc li{gap:10px;padding:16px 6px 14px;border-radius:16px;font-size:14px} .vd-inc-i{width:44px;height:44px;border-radius:13px} .vd-addon{font-size:16px} .vd-addon-t{flex-basis:100%;justify-content:center;margin-left:0} } @media (prefers-reduced-motion:reduce){ html.js .vd-strip,html.js .vd-strip::before{opacity:1;animation:none;clip-path:none} } /* ==== 64-instrumenti.css ==== */ /* Инструменти (.tl-) · „Кино“ round (2026-09-27). Owner: instrumenti page agent. Sub-hero: the preview of the three tools (unchanged). Below it three scenes on the dark stage (04-stage.css), each ONE lit object: a white card (.tl-tool) with the controls on the left and a navy result screen (.tl-screen) inset on the right. Parts arrive with the stage sequence (.sq); results animate in (bars grow, number counts, road draws). No loops below the hero. */ .page-instrumenti{--tl-scr:linear-gradient(165deg,#1A2466 0%,#0E1640 46%,#0B1233 100%);--tl-sk:#B9C2FF;--tl-s2:#D3D9FA} /* shared controls: the real radio sits invisibly on top of its label */ .tl-imp-opts label,.tl-yn label,.tl-goal-opts label,.tl-type{position:relative;cursor:pointer} .tl-imp-opts input,.tl-yn input,.tl-goal-opts input,.tl-type input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} :where(.page-instrumenti) fieldset{border:0;margin:0;padding:0;min-width:0} .tl-fine{font-size:15px;line-height:1.45;color:var(--muted)} .tl-defs{position:absolute;width:0;height:0;overflow:hidden} /* phone/tablet: sticky summary that keeps the result in sight while you type (hidden where the result sits beside the form) */ .tl-peek{display:none} /* ---------- sub-hero: preview of the three tools ---------- */ .tl-safe{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:10px 16px 10px 12px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:15px;line-height:1.3;color:rgba(255,255,255,.9)} .tl-safe .ic{width:18px;height:18px;color:#B9C2FF} .tl-pv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px} .tl-pv-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px 20px 22px;border-radius:24px;background:#fff;color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 30px 60px -26px rgba(3,6,60,.6);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .tl-pv-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff,0 40px 70px -26px rgba(3,6,60,.7)} .tl-pv-calc{grid-column:1/-1} .tl-pv-calc .tl-pv-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end} .tl-pv-head{display:flex;justify-content:space-between;align-items:center;gap:10px} .tl-pv-n{padding:6px 9px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font:600 13px/1 var(--f);letter-spacing:.04em} .tl-pv-go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mist);color:var(--ink);transition:background-color .3s,color .3s} .tl-pv-go .ic{width:17px;height:17px;stroke-width:2.1;transform:rotate(90deg)} .tl-pv-card:hover .tl-pv-go,.tl-pv-card:focus-visible .tl-pv-go{background:var(--cobalt);color:#fff} .tl-pv-t{margin-top:14px;font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.015em} .tl-pv-body{display:flex;flex-direction:column;flex:1} .tl-pv-out{margin-top:auto} .tl-pv-f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:18px;font-size:14px;line-height:1.2} .tl-pv-f em{font-style:normal;color:var(--muted)} .tl-pv-f>b{white-space:nowrap;padding:4px 8px;border-radius:8px;background:var(--mist);font-size:15px;font-weight:600} .tl-pv-x{display:inline-grid;justify-items:end} .tl-pv-x>span{grid-area:1/1} .tl-pv-b{opacity:0} .tl-pv-slide{position:relative;display:block;height:6px;margin:12px 11px 0;border-radius:6px;background:var(--mist-2)} .tl-pv-slide b{position:absolute;inset:0;border-radius:inherit;background:var(--cobalt);transform:scaleX(var(--p));transform-origin:0 50%} .tl-pv-slide i{position:absolute;inset:0;transform:translateX(calc(var(--p)*100%))} .tl-pv-slide i::after{content:'';position:absolute;left:0;top:50%;width:22px;height:22px;translate:-50% -50%;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 6px var(--cobalt),0 4px 12px rgba(35,53,255,.35)} .tl-pv-big{display:grid;justify-items:start;padding-top:14px;font-size:clamp(34px,3.4vw,48px);font-weight:600;line-height:1;letter-spacing:-.045em;white-space:nowrap} .tl-pv-sub{display:block;margin-top:6px;font-size:14px;color:var(--muted)} .tl-pv-bars{display:grid;gap:8px;margin-top:16px} .tl-pv-bars i{display:block;height:12px;border-radius:6px;background:var(--line-2);transform:scaleX(var(--v));transform-origin:0 50%} .tl-pv-bars i+i{background:linear-gradient(90deg,var(--cobalt),#7D8BFF)} .tl-pv-ring{position:relative;align-self:center;width:min(118px,100%);margin-top:14px} .tl-pv-ring svg{display:block;width:100%;height:auto} .tl-pv-ring path{fill:none;stroke-width:17} .tl-pv-ring .bg path{stroke:var(--mist-2)} .tl-pv-ring .on path{stroke:var(--cobalt)} .tl-pv-ring b{position:absolute;inset:0;display:grid;place-content:center;grid-auto-flow:column;align-items:baseline;font-size:34px;font-weight:600;letter-spacing:-.04em} .tl-pv-ring small{font-size:15px;color:var(--muted);letter-spacing:0} .tl-pv-road{display:block;width:100%;height:auto;margin-top:auto;padding-top:16px;overflow:visible} .tl-pv-road .bg{fill:none;stroke:var(--mist-2);stroke-width:12;stroke-linecap:round} .tl-pv-road .fg{fill:none;stroke:var(--cobalt);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 6} .tl-pv-road circle{fill:#fff;stroke:var(--cobalt);stroke-width:3.5} .tl-pv-road .pin{fill:var(--yellow);stroke:var(--ink);stroke-width:1.6;transform-box:fill-box;transform-origin:50% 100%} /* the card is solid almost at once (opaque in the first 40%), only its parts play in sequence */ html.js .play .tl-tool.sq.tl-card-in{animation:tlCardIn .6s var(--ease) both;animation-delay:var(--d0,0s)} @keyframes tlCardIn{0%{opacity:0;transform:translateY(22px)}40%{opacity:1}100%{opacity:1;transform:none}} /* tool scenes: a tighter head, so the card (the thing to use) is in the first screen */ .scene.tl-calc,.scene.tl-check,.scene.tl-route{padding-top:clamp(72px,7vw,120px);padding-bottom:clamp(72px,8vw,128px)} .tl-calc .scn-head,.tl-check .scn-head,.tl-route .scn-head{margin-bottom:clamp(32px,3.5vw,52px)} .tl-calc .scn-title,.tl-check .scn-title,.tl-route .scn-title{font-size:clamp(38px,4.4vw,64px)} /* ---------- the lit object: one white card per tool, a navy screen inset on its right (concentric radii 28 / 20) ---------- */ .tl-tool.card{position:relative;display:grid;align-items:stretch;padding:8px;border:0;border-radius:28px;color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.1),0 60px 120px -50px rgba(2,4,40,.95),0 0 110px -30px rgba(150,168,255,.42)} .tl-tool>form{padding:clamp(24px,3.2vw,48px) clamp(20px,3.2vw,48px)} .tl-screen{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;border-radius:20px;color:#fff;background:var(--tl-scr)} .tl-screen::before{content:'';position:absolute;z-index:-1;right:-25%;top:-35%;width:85%;aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(46,69,255,.5),rgba(46,69,255,.12) 60%,transparent)} .tl-screen::after{content:'';position:absolute;z-index:-1;left:-20%;bottom:-40%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(143,160,255,.14),transparent)} .tl-screen .tl-fine{margin-top:12px;text-align:center;color:var(--tl-sk)} .tl-act{margin-top:auto;padding-top:30px} .tl-cta{white-space:normal;text-align:center;line-height:1.2} /* ---------- 1 · calculator ---------- */ .tl-calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)} .tl-form{display:grid;gap:34px;align-content:start} /* the four numbers are the funnel: numbered stops on a dashed cobalt line */ .tl-fields{display:grid;gap:30px;counter-reset:tlf} .tl-field{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding-left:48px;counter-increment:tlf} .tl-field::before{content:counter(tlf);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--cobalt);color:var(--cobalt);font:600 14px/1 var(--f)} .tl-field:not(:last-child)::after{content:'';position:absolute;left:14px;top:35px;bottom:-26px;width:2px;background:repeating-linear-gradient(to bottom,rgba(35,53,255,.35) 0 5px,transparent 5px 10px)} /* title + hint on the left, the number box beside them, the slider across (phones re-flow below) */ .tl-field-top{display:contents} .tl-field-top>label:not(.tl-num){grid-column:1;grid-row:1;padding-top:3px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)} .tl-hint{grid-column:1;grid-row:2;margin-top:3px;font-size:15px;line-height:1.35;color:var(--muted)} .tl-field .tl-range{grid-column:1/-1;grid-row:3;margin-top:6px} /* the whole grey pill is a second label of the field: a tap anywhere on it (the unit too) puts the cursor in the number */ .tl-num{grid-column:2;grid-row:1/3;align-self:start;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:50px;padding:0 14px;border-radius:14px;background:var(--mist);cursor:text;transition:box-shadow .25s} .tl-num:focus-within{box-shadow:inset 0 0 0 2px var(--cobalt)} .tl-num input{align-self:stretch;width:5.4ch;min-height:50px;padding:0;border:0;background:transparent;color:var(--ink);font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.02em;text-align:right;-moz-appearance:textfield;appearance:textfield} .tl-num input:focus{outline:0} .tl-num input::-webkit-outer-spin-button,.tl-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .tl-num span{font-size:15px;font-weight:500;color:var(--muted)} /* 44px tall hit area, 8px visible track */ .tl-range{--p:50%;display:block;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y} .tl-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--cobalt) var(--p),var(--mist-2) var(--p))} .tl-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 7px var(--cobalt),0 4px 14px rgba(35,53,255,.38);transition:transform .2s var(--ease)} .tl-range:active::-webkit-slider-thumb{transform:scale(1.12)} .tl-range::-moz-range-track{height:8px;border-radius:8px;background:var(--mist-2)} .tl-range::-moz-range-progress{height:8px;border-radius:8px;background:var(--cobalt)} .tl-range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 7px var(--cobalt),0 4px 14px rgba(35,53,255,.38)} .tl-range:focus{outline:0} .tl-range:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 0 0 7px var(--cobalt),0 0 0 4px rgba(35,53,255,.25)} .tl-imp{padding-top:28px;border-top:1px solid var(--line)} .tl-imp legend{float:left;width:100%;padding:0;margin-bottom:14px;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)} .tl-imp-opts{clear:both;display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .tl-imp-opts span{display:grid;place-items:center;min-height:52px;padding:0 8px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font-size:17px;font-weight:600;white-space:nowrap;transition:background-color .25s,color .25s,box-shadow .25s} .tl-imp-opts label:hover span{box-shadow:inset 0 0 0 1.5px var(--ink)} .tl-imp-opts input:checked+span{background:var(--ink);color:#fff;box-shadow:none} .tl-imp-opts input:focus-visible+span,.tl-yn input:focus-visible+span,.tl-goal-opts input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:3px} /* result screen */ .tl-res{container-type:inline-size;padding:clamp(28px,3.4vw,52px)} .tl-res-k,.tl-score-k{font:600 14px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--tl-sk)} /* sized to its own length (--len = characters of the number, set by 64-instrumenti.js), so 7+ digit years still fit the screen */ .tl-big{display:flex;align-items:baseline;gap:12px;margin-top:18px;font-size:min(clamp(68px,8.4vw,132px),calc(100cqi / (.56 * var(--len,5) + .62)));font-weight:600;line-height:.92;letter-spacing:-.055em;white-space:nowrap;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff 30%,#C9D2FF);-webkit-background-clip:text;background-clip:text;color:transparent} .tl-big small{font-size:.4em;letter-spacing:-.02em;color:var(--tl-sk);-webkit-text-fill-color:var(--tl-sk)} .tl-per{margin-top:14px;font-size:18px;line-height:1.45;color:var(--tl-s2)} .tl-per span{font-weight:600;color:#C9D2FF;font-variant-numeric:tabular-nums} .tl-note{margin-top:12px;font-size:16px;line-height:1.45;color:var(--tl-sk)} /* the ONE chart: now vs with more visibility (why the money is lost) */ .tl-bars{display:grid;gap:20px;margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)} .tl-bar p{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:9px;font-size:16px} .tl-bar p span{color:var(--tl-sk)} .tl-bar p b{font-weight:600;font-variant-numeric:tabular-nums} .tl-track{height:14px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden} .tl-track i{display:block;width:calc(var(--v,0)*100%);height:100%;border-radius:inherit;transition:width .7s var(--ease)} .tl-bar-now i{background:#5A6399} .tl-bar-new i{background:linear-gradient(90deg,#2E45FF,#9AA8FF)} /* ---------- 2 · site check ---------- */ .tl-check-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} .tl-tool>.tl-qs{padding-block:clamp(14px,2vw,26px) clamp(10px,1.4vw,18px)} .tl-q fieldset{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 18px;padding:15px 0} .tl-q+.tl-q fieldset{border-top:1px solid var(--line)} .tl-q legend{float:left;display:flex;align-items:center;gap:14px;padding:0;font-size:17px;font-weight:500;line-height:1.35;color:var(--ink-2)} .tl-q-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mist);color:var(--muted);font:600 14px/1 var(--f);transition:background-color .3s,color .3s} .tl-q:has(input[value="1"]:checked) .tl-q-n{background:var(--cobalt);color:#fff} .tl-q:has(input[value="0"]:checked) .tl-q-n{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} .tl-yn{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--mist)} .tl-yn span{display:grid;place-items:center;min-width:62px;min-height:44px;padding:0 14px;border-radius:999px;font-size:16px;font-weight:600;color:var(--muted);transition:background-color .25s,color .25s,box-shadow .25s} .tl-yn label:hover span{color:var(--ink)} .tl-yn input[value="1"]:checked+span{background:var(--cobalt);color:#fff;box-shadow:0 6px 14px -6px rgba(35,53,255,.6)} .tl-yn input[value="0"]:checked+span{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} .tl-nojs{padding:14px 0 18px;font-size:15px;color:var(--muted)} html.js .tl-nojs{display:none} /* the score screen stretches beside the questions; its content stays in sight while you answer */ .tl-score-col{padding:clamp(28px,3vw,44px)} .tl-score{position:sticky;top:calc(var(--hdr) + 32px);text-align:center} .tl-score-k{margin-bottom:24px} .tl-ring{position:relative;width:min(260px,78%);margin-inline:auto} .tl-ring svg{display:block;width:100%;height:auto;overflow:visible} .tl-seg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:16;transition:stroke .45s var(--ease) calc(var(--k)*35ms)} /* the grade is shown by how many segments light up, #8FA0FF at the start of the ring to white at the end, never by hue */ .tl-seg.on{stroke:color-mix(in srgb,#fff calc(var(--k)*11%),#8FA0FF)} .tl-seg.hint{stroke:rgba(201,210,255,.55);transition-delay:0s} .tl-score-v{position:absolute;left:0;right:0;top:50%;translate:0 -50%;line-height:1} .tl-score-v b{font-size:clamp(68px,6.2vw,92px);font-weight:600;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums} .tl-score-v span{font-size:24px;font-weight:600;color:var(--tl-sk)} .tl-grade{margin-top:24px;font-size:clamp(22px,1.9vw,27px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance;transition:color .3s} .tl-count{margin-top:8px;font-size:16px;color:var(--tl-sk)} .tl-count a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-block:-8px;font-size:16px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .tl-count a .ic{width:16px;height:16px;stroke-width:2.2;transform:rotate(90deg)} .tl-score .tl-act{padding-top:30px} /* no answers yet: the button block is hidden (64-instrumenti.js), a small link under the line leads to question 1 */ .tl-count a[data-tl-first] .ic{transform:rotate(-90deg)} .tl-reset{margin-top:8px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;font-size:15px;font-weight:500;color:var(--tl-sk);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .tl-reset:hover{color:#fff} /* fix list: phones/tablets inside the score screen (dark), laptops under both columns inside the white card (light) */ .tl-fixes{margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);text-align:left} .tl-fixes-h{margin-bottom:12px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:#fff} .tl-fix-list{display:grid;gap:8px} .tl-fix{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.07);animation:tlIn .45s var(--ease) both} .tl-fix b{display:block;font-size:16px;font-weight:600;line-height:1.3} .tl-fix p{margin-top:2px;font-size:15px;line-height:1.4;color:var(--tl-s2)} /* plan tags: one quiet style everywhere, plain small text (the plan line / the plan card carries the message once) */ .tl-fix-p,.tl-step-p{flex:none;font:500 14px/1.3 var(--f);white-space:nowrap;color:var(--tl-sk)} .tl-fix-plan{margin-top:12px;font-size:15px;color:var(--tl-sk)} .tl-fix-plan b{color:#fff} .tl-fix-plan a,.tl-gp-act a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .tl-fix-plan a{color:#fff;font-weight:600} .tl-fixes-wide{grid-column:1/-1} .tl-fixes-wide .tl-fixes{margin:0;padding:clamp(26px,3vw,44px) clamp(20px,3.2vw,48px) clamp(20px,2.6vw,36px);border-top:1px solid var(--line)} .tl-fixes-wide .tl-fixes-h{margin-bottom:18px;font-size:clamp(22px,1.9vw,27px);letter-spacing:-.02em;color:var(--ink)} .tl-fixes-wide .tl-fix-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .tl-fixes-wide .tl-fix{padding:16px 18px;background:var(--mist)} .tl-fixes-wide .tl-fix p{color:var(--muted)} .tl-fixes-wide .tl-fix-p{color:var(--muted)} .tl-fixes-wide .tl-fix-plan{margin-top:14px;font-size:16px;color:var(--muted)} .tl-fixes-wide .tl-fix-plan b{color:var(--ink)} .tl-fixes-wide .tl-fix-plan a{color:var(--cobalt)} @keyframes tlIn{from{opacity:0;transform:translateY(8px)}} /* ---------- 3 · first steps (channel route) ---------- */ .tl-route-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .tl-leg{float:left;display:flex;align-items:center;gap:12px;width:100%;padding:0;margin-bottom:16px;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)} .tl-leg span{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--cobalt);color:var(--cobalt);font:600 14px/1 var(--f)} .tl-type-grid{clear:both;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .tl-type{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;isolation:isolate;background:#fff;box-shadow:var(--sh-1);transition:box-shadow .3s var(--ease),translate .3s var(--ease)} .tl-type::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--line);pointer-events:none;transition:box-shadow .3s var(--ease)} .tl-type:hover{translate:0 -3px} .tl-type-art{display:block;padding:14px 12px 0;background:linear-gradient(180deg,#F6F7FF,var(--cobalt-tint));transition:background-color .3s} .tl-type-art svg{display:block;width:100%;height:auto;aspect-ratio:4/3} .tl-type-t{display:block;padding:11px 6px 13px;font-size:16px;font-weight:600;line-height:1.2;text-align:center;color:var(--ink);transition:background-color .25s,color .25s} .tl-type:has(input:checked){box-shadow:0 16px 32px -16px rgba(35,53,255,.6)} .tl-type:has(input:checked)::after{box-shadow:inset 0 0 0 3px var(--cobalt)} .tl-type:has(input:checked) .tl-type-art{background:linear-gradient(180deg,#E6E9FF,#D5DBFF)} .tl-type:has(input:checked) .tl-type-t{background:var(--cobalt);color:#fff} .tl-type:has(input:checked)::before{content:'';position:absolute;right:10px;top:10px;z-index:1;width:26px;height:26px;border-radius:50%;background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat} .tl-type:has(input:focus-visible){outline:3px solid var(--cobalt);outline-offset:4px} .tl-goals{margin-top:32px} .tl-goal-opts{clear:both;display:grid;gap:8px} .tl-goal-opts span{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-size:17px;font-weight:600;line-height:1.3;transition:background-color .25s,box-shadow .25s} .tl-goal-opts span::before{content:'';flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-2);transition:box-shadow .25s} .tl-goal-opts label:hover span{box-shadow:inset 0 0 0 1.5px var(--ink)} .tl-goal-opts input:checked+span{background:var(--cobalt-tint);box-shadow:inset 0 0 0 2px var(--cobalt)} .tl-goal-opts input:checked+span::before{box-shadow:inset 0 0 0 6px var(--cobalt)} /* the road screen: start (your shop) → 3 numbered stops → the plan card at the pin */ .tl-map-col{padding:clamp(24px,3vw,44px) clamp(18px,3vw,44px)} .tl-map{position:relative;isolation:isolate} .tl-road{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;pointer-events:none} .tl-road-band{fill:none;stroke:rgba(255,255,255,.06);stroke-width:26;stroke-linecap:round;stroke-linejoin:round} .tl-road-track{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2;stroke-dasharray:6 9} .tl-road-line{fill:none;stroke:#C9D2FF;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease);filter:drop-shadow(0 0 6px rgba(143,160,255,.7))} .tl-start{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;line-height:1.3;color:var(--tl-s2)} .tl-start i{flex:none;width:20px;height:20px;margin-left:8px;border-radius:50%;background:#0B1233;box-shadow:inset 0 0 0 5px #C9D2FF,0 0 0 7px rgba(201,210,255,.12)} .tl-start-sh{flex:none;width:64px;height:48px;margin-left:10px;padding:5px 5px 0;border-radius:12px;background:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)} .tl-steps{display:grid;gap:14px;margin-top:22px} .tl-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:min(100% - 66px,440px);margin-left:66px;padding:16px 18px;border-radius:20px; background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .tl-step:nth-child(2){margin-left:auto} .tl-step-n{position:absolute;left:-52px;top:50%;translate:0 -50%;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#2335FF;color:#fff;font:600 16px/1 var(--f);box-shadow:0 0 0 6px rgba(46,69,255,.22),0 10px 26px -6px rgba(46,69,255,.9)} .tl-step-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(143,160,255,.16);color:#C9D2FF} .tl-step-ic .ic{width:24px;height:24px} .tl-step-p{padding:5px 11px;border-radius:999px;background:rgba(201,210,255,.13);box-shadow:inset 0 0 0 1px rgba(201,210,255,.22);font-weight:600;color:#DDE2FF} .tl-step-t{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#fff} .tl-steps.go .tl-step{animation:tlStep .6s var(--ease) both;animation-delay:calc(var(--i,0)*.2s + .2s)} .tl-steps.go+.tl-goalpin{animation:tlLand .75s cubic-bezier(.3,1.35,.5,1) .95s both} @keyframes tlStep{from{opacity:0;transform:translateY(14px)}} @keyframes tlLand{from{opacity:0;transform:translateY(16px) scale(.94)}} /* the result lands: a white plan card at the end of the road; the road comes straight down the left and ends at the pin on the card's left edge */ .tl-goalpin{position:relative;width:min(100% - 66px,380px);margin:18px 0 0 66px;padding:18px 22px 20px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 60px -20px rgba(160,176,255,.5)} .tl-pin{position:absolute;left:-50px;top:26px;width:32px;height:32px;border-radius:50% 50% 50% 0;background:var(--cobalt);box-shadow:inset 0 0 0 2px var(--ink);rotate:-45deg} /* 2026-10-01 QA: was yellow, a 2nd yellow next to the CTA */ .tl-pin::after{content:'';position:absolute;inset:10px;border-radius:50%;background:#fff} .tl-gp-k{font-size:14px;color:var(--muted)} .tl-gp-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.03em} .tl-gp-name b{font-weight:600;color:var(--cobalt);white-space:nowrap} .tl-gp-name small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0} .tl-gp-all{margin-top:8px;font-size:15px;line-height:1.4;color:var(--muted)} .tl-gp-act{margin-top:2px;margin-bottom:-10px;font-size:14px;color:var(--muted)} .tl-gp-act a{display:flex;width:fit-content;color:var(--ink);font-weight:600;white-space:nowrap} .tl-route-acts{padding-top:26px} /* ---------- motion ---------- */ /* sub-hero preview: the two values never overlap, the old one slides up and out, then the new one comes up from below */ @keyframes tlPvA{0%,30%{opacity:1;transform:none}35%{opacity:0;transform:translateY(-40%)}35.1%,83%{opacity:0;transform:translateY(40%)}88%,100%{opacity:1;transform:none}} @keyframes tlPvB{0%,35%{opacity:0;transform:translateY(40%)}40%,78%{opacity:1;transform:none}83%{opacity:0;transform:translateY(-40%)}83.1%,100%{opacity:0;transform:translateY(40%)}} @keyframes tlPvFill{0%,24%,90%,100%{transform:scaleX(var(--p))}42%,74%{transform:scaleX(var(--p2))}} @keyframes tlPvThumb{0%,24%,90%,100%{transform:translateX(calc(var(--p)*100%))}42%,74%{transform:translateX(calc(var(--p2)*100%))}} @keyframes tlPvBar{0%,28%,90%,100%{transform:scaleX(var(--v))}46%,76%{transform:scaleX(var(--v2))}} @keyframes tlDash{to{stroke-dashoffset:-13}} @keyframes tlBob{50%{transform:translateY(-4px)}} @keyframes tlSegIn{from{opacity:0}} @media (prefers-reduced-motion:no-preference){ /* sub-hero preview loops (paused while the hero is off screen) */ .tl-pv-x .tl-pv-a{animation:tlPvA 8s ease-in-out infinite} .tl-pv-x .tl-pv-b{animation:tlPvB 8s ease-in-out infinite} .tl-pv-slide b.tl-loop{animation:tlPvFill 8s cubic-bezier(.45,0,.2,1) infinite} .tl-pv-slide i.tl-loop{animation:tlPvThumb 8s cubic-bezier(.45,0,.2,1) infinite} .tl-pv-bars i.tl-loop{animation:tlPvBar 8s cubic-bezier(.45,0,.2,1) infinite} .tl-pv-road .fg{animation:tlDash 2.6s linear infinite} .tl-pv-road .pin{animation:tlBob 3.2s ease-in-out infinite} .tl-pv-ring .on path{animation:tlSegIn .5s var(--ease) both;animation-delay:calc(.7s + var(--k)*90ms)} html.js [data-tl-live]:not(.tl-live) .tl-loop{animation-play-state:paused} /* calculator scene: the two bars fill once the big number has counted up */ /* route scene: the stops and the plan card wait for the road (64-instrumenti.js adds .go) */ html.js .tl-steps:not(.go) .tl-step,html.js .tl-steps:not(.go)+.tl-goalpin{opacity:0} html.js .tl-calc:not(.play) .tl-track i{width:0} html.js .tl-calc.play .tl-track i{transition:width 1.1s var(--ease) 1.7s} html.js .tl-calc.play .tl-bar-new .tl-track i{transition-delay:1.95s} html.js .tl-calc.play.tl-in .tl-track i{transition:width .7s var(--ease)} } @media (prefers-reduced-motion:reduce){ .tl-fix,.tl-steps.go .tl-step,.tl-steps.go+.tl-goalpin,.tl-loop,.tl-pv-ring .on path{animation:none!important} .tl-track i,.tl-seg,.tl-road-line,.tl-pv-card,.tl-peek{transition:none} } /* ---------- responsive ---------- */ @media (max-width:980px){ .tl-calc-grid,.tl-check-grid,.tl-route-grid{grid-template-columns:minmax(0,1fr)} .tl-score{position:static} /* one slim line; it fades away while the result screen is in view (64-instrumenti.js adds .tl-peek-off) */ .tl-peek{position:sticky;top:calc(var(--hdr) + 8px);z-index:5;display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 4px 4px 16px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 18px 36px -16px rgba(11,18,51,.6); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s} .tl-peek.tl-peek-off{opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s} /* a focused field never sits under the header + the peek */ .tl-field,.tl-imp,.tl-q{scroll-margin-top:calc(var(--hdr) + 76px)} .tl-peek:focus-visible{outline-offset:3px} .tl-pk-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;line-height:1.15;white-space:nowrap;overflow:hidden} .tl-pk-k{font-size:14px;color:#B9C0DE;overflow:hidden;text-overflow:ellipsis} .tl-pk-txt b{flex:none;font-size:19px;font-weight:600;letter-spacing:-.02em;white-space:nowrap} .tl-pk-go{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.12);font-size:15px;font-weight:600} .tl-pk-go .ic{width:17px;height:17px;stroke-width:2.2;transform:rotate(90deg)} .tl-qs .tl-peek{margin-top:4px} .tl-form{gap:30px} } @media (max-width:600px){ .tl-tool.card{padding:6px;border-radius:26px} .tl-screen{border-radius:20px} .tl-tool>form{padding:22px 14px 26px} .tl-tool>.tl-qs{padding:12px 14px 6px} .tl-res,.tl-score-col,.tl-map-col{padding:28px 18px 22px} /* phones: title and number on one row, the hint and the slider get the full width */ .tl-field{column-gap:12px;padding-left:38px} .tl-field-top>label:not(.tl-num){align-self:center;padding-top:0;font-size:17px} .tl-num{grid-row:1;padding:0 12px} .tl-hint{grid-column:1/-1;margin-top:6px} .tl-field::before{top:11px;width:26px;height:26px;font-size:13px} .tl-field:not(:last-child)::after{left:12px;top:42px} .tl-num input{font-size:22px;width:5.3ch} .tl-cta{padding-inline:18px} .tl-imp-opts{grid-template-columns:repeat(2,1fr)} .tl-per{font-size:17px} /* phones: each fix gets the full tile width, the plan chip goes under the text */ .tl-fix{grid-template-columns:minmax(0,1fr);gap:8px} .tl-fix-p{justify-self:start;grid-row:2} .tl-q fieldset{gap:10px 12px} .tl-q legend{gap:10px;font-size:16px} .tl-q-n{width:28px;height:28px;font-size:13px} .tl-yn span{min-width:52px;padding:0 10px;font-size:16px} .tl-type-grid{gap:8px} .tl-type{border-radius:16px} .tl-type-art{padding:10px 8px 0} .tl-type-t{padding:9px 4px 10px;font-size:14px} .tl-type:has(input:checked)::before{right:6px;top:6px;width:22px;height:22px;background-size:14px} .tl-step{grid-template-columns:auto minmax(0,1fr);width:calc(100% - 48px);margin-left:48px;padding:14px;gap:4px 12px} .tl-step:nth-child(2){width:calc(100% - 62px);margin-left:62px} .tl-step-n{left:-44px;width:32px;height:32px;font-size:15px} .tl-step-ic{grid-row:span 2;align-self:start;width:40px;height:40px;border-radius:12px} .tl-step-p{grid-column:2;justify-self:start;margin-top:6px} .tl-start i{margin-left:6px} .tl-start-sh{width:52px;height:39px;margin-left:4px} .tl-goalpin{width:calc(100% - 48px);margin-left:48px} .tl-pin{left:-42px;top:22px} } @media (max-width:420px){ .tl-pk-go{width:44px;padding:0;justify-content:center} .tl-pk-go span{display:none} .tl-peek{gap:10px;padding-left:14px} /* narrow phones: a slimmer yes/no switch (still 48 x 44 per answer) leaves the question more width */ .tl-q fieldset{column-gap:10px} .tl-yn span{min-width:48px;padding:0 8px} } /* sub-hero on phones */ @media (max-width:760px){ /* hero on phones: the three tools as compact rows (small live demo, number, title, one line, arrow), so all three titles sit in the first screen above the phone action bar */ .tl-pv{grid-template-columns:minmax(0,1fr);gap:10px} .tl-pv-card{display:grid;grid-template-columns:56px minmax(0,1fr) 32px;grid-template-rows:auto auto auto;align-content:center;column-gap:14px;min-height:78px;padding:10px 12px 10px 10px;border-radius:20px} .tl-pv-calc{grid-column:auto} .tl-pv-head{display:contents} .tl-pv-n{grid-column:2;grid-row:1;justify-self:start;padding:0;background:none;font-size:13px;line-height:1.25} .tl-pv-go{grid-column:3;grid-row:1/4;align-self:center;width:32px;height:32px} .tl-pv-t{grid-column:2;grid-row:2;margin-top:1px;font-size:16px;line-height:1.25} .tl-pv-calc .tl-pv-body,.tl-pv-ring,.tl-pv-road{grid-column:1;grid-row:1/4;align-self:center;box-sizing:border-box;width:56px;height:56px;margin:0;border-radius:14px;background:var(--cobalt-tint)} .tl-pv-calc .tl-pv-body{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;gap:0;padding:0 10px} .tl-pv-in,.tl-pv-big,.tl-pv-sub{display:none} .tl-pv-out{width:100%;margin:0} .tl-pv-bars{margin:0;gap:6px} .tl-pv-bars i{height:9px;border-radius:5px} .tl-pv-ring{display:grid;place-items:center} .tl-pv-ring svg{width:46px} .tl-pv-ring b{font-size:18px} .tl-pv-ring small{display:none} .tl-pv-road{padding:20px 6px 22px} } /* ==== 65-za-nas.css ==== */ /* ---------- ЗА НАС (za-nas.html) · prefix .zn- · „Кино“ round 2026-09-27 ---------- Sub-hero + four scenes on the shared dark stage (04-stage.css): 01 #zn-why cobalt · 02 #zn-principles indigo · 03 #zn-founder night · 05 #zn-faq violet (04 #zn-nofit was removed 2026-10-01, archived in _archive/2026-10-01-subscription/b4-chrome/removed/) */ .zn-hero :focus-visible{outline-color:#fff} .zn-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-weight:700;font-size:19px;line-height:1;color:#fff;background:linear-gradient(150deg,#3A4BFF,#1420B5)} .zn-price{font-weight:600;color:var(--ink);background:linear-gradient(transparent 56%,var(--yellow) 56%);padding:0 3px;border-radius:2px;white-space:nowrap} /* a promise, not a price: a periwinkle marker instead of the yellow one (yellow is for prices and the main action) */ .zn-nofee{font-weight:600;color:var(--ink);background:linear-gradient(transparent 56%,#C9D2FF 56%);padding:0 3px;border-radius:2px;white-space:nowrap} /* ---------- hero: five suppliers -> one white road -> one person ---------- */ .zn-hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .zn-hv{position:relative;width:min(100%,560px);margin-inline:auto} .zn-hv-map{position:relative;container-type:inline-size} .zn-hv-svg{display:block;width:100%;height:auto;overflow:visible} .zn-tile{--ts:clamp(40px,11.07cqw,62px);position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:var(--ts);height:var(--ts);margin:calc(var(--ts)/-2) 0 0 calc(var(--ts)/-2)} .zn-tile i{display:grid;place-items:center;width:100%;height:100%;border-radius:29%;background:#fff;color:var(--cobalt);box-shadow:0 12px 22px -8px rgba(7,11,82,.5);transform:rotate(var(--r,0deg))} .zn-tile .ic{width:46%;height:46%;stroke-width:1.9} .zn-tile b{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);padding:6px 11px;border-radius:999px;background:rgba(7,11,82,.34);border:1px solid rgba(255,255,255,.24);font-size:14px;font-weight:600;line-height:1.1;letter-spacing:-.005em;color:#fff;white-space:nowrap} @container (max-width:460px){.zn-tile-r b{transform:translateX(-78%)}} .zn-hv-person{position:relative;display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:-4px auto 0;padding:12px 14px 12px 12px;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 34px 70px -28px rgba(7,11,82,.7)} .zn-hv-person p b{display:block;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em} .zn-hv-person p span{display:block;font-size:15px;line-height:1.35;color:var(--muted)} .zn-hv-ok{width:32px;height:32px;margin-left:10px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cobalt-tint);color:var(--cobalt)} .zn-hv-ok .ic{width:17px;height:17px;stroke-width:2.6} @keyframes zn-lane{to{stroke-dashoffset:-22}} @keyframes zn-float{0%,100%{translate:0 0}50%{translate:0 -7px}} @media (prefers-reduced-motion:no-preference){ html.js .zn-tile{animation:zn-float 7s ease-in-out var(--d,0s) infinite;animation-play-state:paused} html.js .zn-hv-lane{animation:zn-lane 1.6s linear infinite;animation-play-state:paused} html.js .zn-on .zn-tile,html.js .zn-on .zn-hv-lane{animation-play-state:running} } @media (max-width:640px){.zn-hero-act .btn{flex:1 1 auto}.zn-tile b{padding:5px 9px}} /* ======================= 01 · five paper bills, struck, one plan card lands ======================= */ /* sequence (from the moment the visual enters the screen): bills slide in 0.1–0.8 s, strike 1.6 s + k·0.08 s, 2.0 s the five bills collapse into one tight pile that slides toward the card and dims (the pile as a group, so overlaps stay solid), the plan card pops 2.1 s in front of the pile's edge, checks 2.3–2.5 s; one loop: 6 s shimmer on the price */ .zn-why .scn-split{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)} .zn-bl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,2.4vw,36px)} .zn-bl-st{position:relative;height:calc(4 * var(--bo) + var(--bh));--bo:64px;--bh:104px;--bt:40px;--bx:110px} .zn-bill{position:absolute;left:0;right:0;top:calc(var(--k) * var(--bo));height:var(--bh);display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:16px; background:#E9ECFA;color:var(--ink);rotate:var(--r,0deg);box-shadow:0 -12px 26px -16px rgba(4,8,50,.55),0 22px 40px -26px rgba(0,0,0,.6)} .zn-bill-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:#fff;color:var(--cobalt)} .zn-bill-ic .ic{width:21px;height:21px;stroke-width:2} .zn-bill b{flex:1;min-width:0;padding-top:9px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zn-bill-sum{flex:none;margin-top:6px;padding:6px 10px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.2;color:var(--cobalt);background:#fff} .zn-bill-x{position:absolute;left:62px;right:96px;top:31px;height:3px;border-radius:3px;background:#0B1233;transform-origin:0 50%} .zn-bl-one{position:relative;z-index:2;width:100%;max-width:340px;justify-self:end;padding:26px 26px 28px;border:0;color:var(--ink)} .zn-bl-k{margin-bottom:16px;font:600 15px/1.2 var(--f);letter-spacing:0;text-transform:none;color:var(--cobalt)} .zn-bl-who{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)} .zn-bl-who b{display:block;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em} .zn-bl-who span{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.35;color:var(--muted)} .zn-bl-plan{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 0 20px} .zn-bl-plan span{font-size:15px;font-weight:500;color:var(--muted)} .zn-bl-plan b{position:relative;display:inline-block;overflow:hidden;font-size:30px;line-height:1.1;letter-spacing:-.03em} .zn-bl-plan b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%)} .zn-bl-ones{display:grid;gap:11px} .zn-bl-ones li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em} .zn-bl-ones i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cobalt);color:#fff} .zn-bl-ones .ic{width:14px;height:14px;stroke-width:3} @keyframes znStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* collapse: each bill moves from top k·bo to a pile with k·bt offsets, centred where the stack was, then shifts toward the card */ @keyframes znStack{to{translate:var(--bx) calc((2 - var(--k)) * (var(--bo) - var(--bt)));scale:.9}} @keyframes znDim{to{opacity:.55}} @keyframes znShine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}} html.js .zn-bill-x{transform:scaleX(0)} html.js .zn-bl.play .zn-bill-x{animation:znStrike .4s var(--ease) calc(1.6s + var(--k) * .08s) both} html.js .zn-bl.play .zn-bill.sq{animation-name:sqL,znStack;animation-duration:.8s,.7s;animation-timing-function:var(--ease),var(--ease);animation-fill-mode:both,forwards; animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap)),2s} html.js .zn-bl.play .zn-bl-st{animation:znDim .7s var(--ease) 2s forwards} html.js .zn-bl.play.live .zn-bl-plan b::after{animation:znShine 6s ease-in-out 3.2s infinite} @media (max-width:1100px){ .zn-why .scn-split{grid-template-columns:1fr;gap:48px} .zn-bl{width:100%;max-width:760px} } @media (max-width:760px){ .zn-bl{grid-template-columns:1fr;gap:34px;width:100%;max-width:380px;margin-inline:auto} .zn-bl{gap:0} .zn-bl-st{--bo:44px;--bh:64px;--bt:44px;--bx:0px} .zn-bill{padding:12px 14px;align-items:center} .zn-bill b{padding-top:0} .zn-bill-sum{margin-top:0} .zn-bill-x{top:31px} /* phones keep the bills apart (bt = bo, the pile only shrinks), so every struck name stays readable; the card overlaps the last bill a little */ .zn-bl-one{justify-self:stretch;max-width:none;margin-top:-14px;padding:22px 22px 24px} .zn-bl-who{display:none} .zn-bl-plan{padding-top:4px} } /* ======================= 02 · six rules, six drawn medallions ======================= */ .zn-defs{position:absolute;width:0;height:0;overflow:hidden} .zn-pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(24px,3vw,48px);max-width:1000px;margin-inline:auto} .zn-md{display:grid;justify-items:center;align-content:start;gap:22px;text-align:center} .zn-md svg{display:block;width:clamp(112px,9vw,128px);height:auto;overflow:visible} .zn-pr-row{position:relative} .zn-pr-line{display:none} .zn-md svg .sq:not(.sq-draw){transform-box:fill-box;transform-origin:50% 50%} .zn-md svg .sq-gy{transform-origin:50% 100%} .zn-md-disc{fill:url(#zn-md-g)} .zn-md-ring{stroke:#C9D2FF;stroke-opacity:.55;stroke-width:1.5} .zn-md-t{font:700 30px/1 var(--f);fill:#2335FF} .zn-md-n{font:700 16px/1 var(--f);fill:#fff} .zn-md-ok circle{fill:#2335FF} .zn-md-ok path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .zn-md p{max-width:14ch;min-height:2lh;font-size:clamp(19px,1.45vw,21px);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:#fff;text-wrap:balance} @media (min-width:1200px){ .zn-pr{padding-bottom:clamp(40px,5vw,72px)} .zn-pr-grid{position:relative;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;max-width:none} .zn-pr .scn-head{margin-bottom:64px} .zn-pr .scn-foot{margin-top:56px} .zn-md svg{width:156px} /* one hairline from the first disc centre to the last, drawn left→right in 1.6 s (linear), so it reaches disc i at d0 + 2i·gap = its pop */ .zn-pr-line{display:block;position:absolute;left:calc((100% - 120px) / 12);top:76px;width:calc(100% * 5 / 6 + 20px);height:4px;overflow:visible} html.js .play .zn-pr-line .sq-draw{animation-duration:1.6s;animation-timing-function:linear} } @media (max-width:760px){ .zn-pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 14px} .zn-md{gap:16px} .zn-md svg{width:112px} .zn-md p{font-size:18px} } /* ======================= 03 · the founder: „Н“ monogram + one chat ======================= */ .zn-fd-act{margin-top:34px} .zn-fd-act .btn{gap:12px} .zn-fd-act .btn:hover .ic{transform:none} .zn-fd-vis{position:relative;width:100%;max-width:640px;margin-left:auto;container-type:inline-size} .zn-fd-mono{position:absolute;left:0;top:0;width:50cqw;aspect-ratio:1;container-type:inline-size} .zn-fd-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .zn-fd-disc{position:absolute;inset:17%;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 30% 24%,#6070FF 0%,#2335FF 42%,#111B9C 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 50px 100px -36px rgba(35,53,255,.95)} .zn-fd-disc span{font-size:33cqw;font-weight:600;line-height:1;color:#fff;transform:translateY(-2%);text-shadow:0 20px 40px rgba(7,11,82,.35)} .zn-fd-orbit{position:absolute;inset:0;animation:znSpin 96s linear infinite paused} .zn-fd-orb{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(42cqw) rotate(calc(-1*var(--a)))} .zn-fd-cr{position:absolute;left:-26px;top:-26px;width:52px;height:52px;animation:znSpin 96s linear infinite reverse paused} .zn-fd-cr i{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;background:#fff;color:var(--cobalt);box-shadow:0 16px 30px -12px rgba(0,0,0,.6)} .zn-fd-cr .ic{width:23px;height:23px;stroke-width:2} @keyframes znSpin{to{rotate:360deg}} .zn-fd.live .zn-fd-orbit,.zn-fd.live .zn-fd-cr{animation-play-state:running} .zn-fd-chat{position:relative;z-index:1;width:53cqw;margin:48cqw 0 0 auto;padding:0;overflow:hidden;border:0;color:var(--ink)} .zn-fd-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .zn-fd-h .zn-av{width:42px;height:42px;font-size:17px} .zn-fd-h b{display:block;font-size:16px;font-weight:600;line-height:1.3} .zn-fd-h span{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.35;color:var(--muted)} .zn-fd-on{width:8px;height:8px;border-radius:50%;flex:none;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)} .zn-fd-body{display:grid;gap:12px;padding:18px 16px 18px;background:linear-gradient(180deg,#F5F6FC,#fff)} .zn-fd-m{max-width:88%;padding:10px 14px 7px;border-radius:18px;font-size:16px;line-height:1.4;text-wrap:pretty} .zn-fd-m.in{justify-self:start;border-bottom-left-radius:6px;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)} .zn-fd-m.out{justify-self:end;border-bottom-right-radius:6px;background:var(--cobalt);color:#fff;box-shadow:0 18px 34px -20px rgba(35,53,255,.9)} .zn-fd-m time{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--muted)} .zn-fd-m.out time{color:rgba(255,255,255,.8)} /* 1 · our album: three flat photos of the autumn menu (one big, two stacked), one caption */ .zn-fd-att{max-width:78%;padding:6px 6px 7px} .zn-fd-pics{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:4px;aspect-ratio:16/10;border-radius:13px;overflow:hidden} .zn-fd-pic{display:block;width:100%;height:100%} .zn-fd-pic.p1{grid-row:1/3} .zn-fd-cap{padding:8px 8px 0;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)} .zn-fd-att time{padding-right:8px} /* 2 · your one tap: a big approve bubble with a tick, read ticks under it, one soft ring when it lands */ .zn-fd-ok{position:relative;padding:12px 16px 8px 12px;border-radius:22px;border-bottom-right-radius:6px} .zn-fd-ok p{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.01em} .zn-fd-okic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;color:var(--cobalt);font-style:normal} .zn-fd-okic .ic{width:16px;height:16px;stroke-width:3} .zn-fd-read{width:18px;height:10px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .zn-fd-ok::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--cobalt);opacity:0;pointer-events:none} /* 3 · our answer: live, with the two places it went */ .zn-fd-live{padding:11px 12px 7px 14px} .zn-fd-done{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)} .zn-fd-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)} .zn-fd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .zn-fd-chips i{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 9px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font-style:normal;font-size:14px;font-weight:600;line-height:1.2} .zn-fd-chips .ic{width:15px;height:15px;stroke-width:2.2} .zn-fd-chips .ck{width:14px;height:14px;stroke-width:3;color:#1FA463} .zn-fd-slot{position:relative;display:grid} .zn-fd-type{position:absolute;left:0;top:0;display:flex;gap:5px;padding:14px 16px;border-radius:18px 18px 18px 6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);opacity:0} .zn-fd-type i{width:7px;height:7px;border-radius:50%;background:var(--cobalt)} @keyframes znType{0%{opacity:0;transform:translateY(6px)}18%,82%{opacity:1;transform:none}100%{opacity:0}} @keyframes znDot{0%,100%{transform:none;opacity:.45}50%{transform:translateY(-4px);opacity:1}} @keyframes znTap{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.14,1.4)}} @media (prefers-reduced-motion:no-preference){ html.js .zn-fd.play .zn-fd-ok::after{animation:znTap .9s var(--ease) 2.25s both} html.js .zn-fd.play .zn-fd-type{animation:znType 1.15s var(--ease) 2.35s both} html.js .zn-fd.play .zn-fd-type i{animation:znDot .56s ease-in-out 2.45s 2} html.js .zn-fd.play .zn-fd-type i:nth-child(2){animation-delay:2.55s} html.js .zn-fd.play .zn-fd-type i:nth-child(3){animation-delay:2.65s} } /* the cluster sits 32px lower: orbit top in line with the kicker, chat bottom in the button zone (the 46px gap between them is kept) */ @media (min-width:761px){.zn-fd-mono{top:32px}.zn-fd-chat{margin-top:calc(48cqw + 32px)}} @media (max-width:900px){.zn-fd-vis{max-width:620px;margin-inline:auto}} @media (max-width:760px){ .zn-fd-act .btn{width:100%} .zn-fd-vis{max-width:420px} .zn-fd-mono{position:relative;width:280px;max-width:78cqw;margin-inline:auto} .zn-fd-orb:nth-child(4){display:none} .zn-fd-chat{width:100%;margin:28px 0 0} .zn-fd-cr{left:-22px;top:-22px;width:44px;height:44px} .zn-fd-cr i{border-radius:14px} .zn-fd-cr .ic{width:20px;height:20px} } /* ======================= 05 · FAQ on one glass panel ======================= */ .zn-fq-list{max-width:880px;margin-inline:auto;padding:8px} .zn-qa{border-top:1px solid var(--hair);border-radius:20px;transition:background-color .3s} .zn-qa:first-child,.zn-qa[open],.zn-qa[open]+.zn-qa{border-top-color:transparent} .zn-qa[open]{background:rgba(255,255,255,.06)} .zn-qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 18px 18px 26px;list-style:none;cursor:pointer;border-radius:20px; font-size:clamp(18px,1.4vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:#fff} .zn-qa summary::-webkit-details-marker{display:none} .zn-qa summary:focus-visible{outline:2px solid #fff;outline-offset:-2px} .zn-qa-ic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .35s var(--ease),background-color .3s} .zn-qa-ic::before,.zn-qa-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:#fff;transition:background-color .3s} .zn-qa-ic::after{transform:rotate(90deg)} .zn-qa summary:hover .zn-qa-ic{background:rgba(255,255,255,.18)} .zn-qa[open] .zn-qa-ic{transform:rotate(45deg);background:#fff} .zn-qa[open] .zn-qa-ic::before,.zn-qa[open] .zn-qa-ic::after{background:var(--cobalt)} .zn-qa p{max-width:64ch;padding:0 26px 24px;font-size:17px;line-height:1.6;color:var(--on-2)} .zn-qa p a{color:#fff;text-decoration:underline;text-underline-offset:3px} @supports (interpolate-size:allow-keywords){ .zn-fq-list{interpolate-size:allow-keywords} .zn-qa::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete} .zn-qa[open]::details-content{height:auto} } @media (max-width:760px){ .zn-fq-list{padding:4px} .zn-qa summary{min-height:64px;padding:16px 12px 16px 18px;gap:14px} .zn-qa p{padding:0 18px 20px} } /* reduced motion: final composition (the .sq system is handled by 04-stage.css) */ @media (prefers-reduced-motion:reduce){ .zn-fd-orbit,.zn-fd-cr,.zn-bl-plan b::after{animation:none!important} html.js .zn-bill-x,html.js .play .zn-bill-x{transform:none;animation:none} html.js .zn-bl-st{opacity:.55} html.js .zn-bill.sq{translate:var(--bx) calc((2 - var(--k)) * (var(--bo) - var(--bt)));scale:.9} } /* ==== 66-kontakt.css ==== */ /* ---------- КОНТАКТ (kontakt.html) · prefix .kt- ---------- „Кино“ 2026-09-27: the cobalt sub-hero, then two scenes on the dark stage (04-stage.css): #kt-book cobalt „Час“ (the booking card, step 1) · #contact deep (chrome, step 2) · #kt-next night „После“ (3 stops on one road + e-mail line) */ /* arrows that point to a section above or below */ .kt-up{transform:rotate(-90deg)} .btn:hover .kt-up{transform:translateY(-3px) rotate(-90deg)} .kt-down{transform:rotate(90deg)} .btn:hover .kt-down{transform:translateY(3px) rotate(90deg)} /* ---------- hero: the audit of the fictional Бистро Смокиня ---------- */ .kt-hero :focus-visible{outline-color:#fff} /* the longer headline sits on 2 lines at 1280/1440 instead of 3 with a lone „е“ */ .kt-hero .sub-title{font-size:clamp(40px,4.6vw,64px)} .kt-hv{display:flex;justify-content:center} .kt-hv-in{position:relative;width:min(100%,470px);padding:46px 0 42px} .kt-au{position:relative;padding:22px;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 44px 90px -40px rgba(4,8,60,.8),0 0 0 6px rgba(255,255,255,.12)} .kt-au-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)} .kt-au-mk{width:46px;height:46px;flex:none} .kt-au-top p{display:grid;gap:2px;flex:1;min-width:0} .kt-au-top b{font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em} .kt-au-top p span{font-size:14px;line-height:1.3;color:var(--muted)} .kt-au-st{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 12px 0 10px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font-size:14px;font-weight:600} .kt-au-st .ic{width:16px;height:16px;stroke-width:2.8} .kt-au-list{position:relative;display:grid;margin:4px 0 14px} .kt-au-list li{display:grid;grid-template-columns:40px minmax(0,1fr) 30px;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)} .kt-au-list li:nth-child(4){border-bottom:0} .kt-au-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mist);color:var(--ink-2)} .kt-au-ic .ic{width:20px;height:20px} .kt-au-list p{display:grid;gap:1px;min-width:0} .kt-au-list b{font-size:16px;font-weight:600;line-height:1.25} .kt-au-list p span{font-size:14px;line-height:1.3;color:var(--muted)} .kt-au-list em{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-weight:700;font-size:15px} .kt-au-list em .ic{width:16px;height:16px;stroke-width:2.8} .kt-au-list .no em{background:#FFF0E0;color:#A4520A} .kt-au-list .ok em{background:#E3F6EC;color:#127A4B} .kt-au-list .kt-au-scan{position:absolute;left:-22px;right:-22px;top:0;display:block;height:25%;padding:0;border:0;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(35,53,255,0),rgba(35,53,255,.1) 50%,rgba(35,53,255,0))} .kt-au-foot{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 16px;border-radius:18px;background:var(--cobalt);color:#fff} .kt-au-foot>b{min-width:30px;font-size:36px;font-weight:700;line-height:1;letter-spacing:-.04em;text-align:center} .kt-au-foot p{display:grid;gap:2px;flex:1;min-width:0} .kt-au-foot strong{font-size:16px;font-weight:600;line-height:1.25} .kt-au-foot span{font-size:14px;line-height:1.3;color:rgba(255,255,255,.82)} .kt-au-foot .ic{width:22px;height:22px} .kt-hv-tk,.kt-hv-re{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 24px 48px -20px rgba(4,8,60,.75)} .kt-hv-tk{top:0;right:-30px} .kt-hv-re{bottom:0;left:-34px} .kt-hv-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--cobalt);color:#fff} .kt-hv-av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-style:normal;font-weight:700;font-size:18px;color:#fff;background:linear-gradient(150deg,#3A4BFF,#1420B5)} .kt-hv-tk p,.kt-hv-re p{display:grid;gap:1px} .kt-hv-tk b,.kt-hv-re b{font-size:16px;font-weight:600;line-height:1.2} .kt-hv-tk p span,.kt-hv-re p span{font-size:14px;line-height:1.3;color:var(--muted)} /* ========================================================================================= #kt-book — the booking card: the one lit object on the cobalt stage ========================================================================================= */ .kt-bk{max-width:1120px;margin-inline:auto} /* a soft pool of light under the card, so it sits on the stage instead of floating on it */ .kt-bk::before{content:"";position:absolute;left:8%;right:8%;top:14%;bottom:-6%;z-index:-1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(120,146,255,.42),rgba(91,124,255,.14) 60%,transparent);filter:blur(24px)} /* the card lands as one solid object (a short rise, not the photo zoom), then its chips pop onto it */ html.js .play .kt-cal.sq{animation-name:kt-land;animation-duration:.9s} @keyframes kt-land{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}} .kt-cal{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);overflow:hidden;color:var(--ink);border:0} .kt-fs{margin:0;padding:0;border:0;min-width:0} .kt-fs legend{float:left;width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0;margin-bottom:18px;font:600 17px/26px var(--f);letter-spacing:0;text-transform:none;color:var(--ink-2)} .kt-fs legend + *{clear:both} .kt-month{font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--ink)} .kt-cal-days{padding:clamp(22px,3.2vw,44px)} .kt-dow,.kt-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .kt-dow{margin-bottom:10px;text-align:center;font:600 15px/1 var(--f);letter-spacing:0;text-transform:none;color:var(--muted)} .kt-d{position:relative;display:grid;place-items:center;height:clamp(54px,5vw,66px);border-radius:16px;line-height:1;color:var(--ink)} .kt-d > span{display:grid;justify-items:center;gap:3px} .kt-d b{font-size:clamp(18px,1.4vw,20px);font-weight:600;letter-spacing:-.01em} .kt-d small{font-size:13px;font-weight:600;color:var(--cobalt)} .kt-d.is-open{cursor:pointer;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .25s,background-color .25s,color .25s} .kt-d.is-open:hover{box-shadow:inset 0 0 0 1.5px var(--cobalt)} .kt-d input,.kt-t input,.kt-w input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .kt-d.is-open:has(input:checked){background:var(--cobalt);color:#fff;box-shadow:0 14px 28px -14px rgba(35,53,255,.9)} .kt-d.is-open:has(input:checked) small{color:#fff} .kt-d:has(input:focus-visible),.kt-t:has(input:focus-visible) span,.kt-w:has(input:focus-visible) span{outline:3px solid var(--cobalt);outline-offset:3px} .kt-d.is-na{color:#A3AAC2} .kt-d.is-hol{color:#6E7592;background:repeating-linear-gradient(135deg,var(--mist) 0 6px,#fff 6px 12px)} .kt-d.is-today::after{content:"";position:absolute;bottom:9px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--cobalt)} .kt-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto;padding-top:20px;font-size:14px;color:var(--muted)} .kt-legend span{display:inline-flex;align-items:center;gap:8px} .kt-legend span[hidden]{display:none} .kt-legend i{width:16px;height:16px;border-radius:5px} .kt-legend .lg-o{background:repeating-linear-gradient(135deg,var(--mist-2) 0 3px,#fff 3px 6px);box-shadow:inset 0 0 0 1px var(--line)} .kt-lg-note{margin-right:auto;font-size:15px} .kt-nojs{grid-column:1/-1;padding:18px;border-radius:16px;background:var(--mist);font-size:16px;color:var(--ink-2)} /* without JS the pickers cannot reach the form: show the note and the button only */ html:not(.js) .kt-dow,html:not(.js) .kt-legend,html:not(.js) .kt-cal-side,html:not(.js) .kt-ticket{display:none} html:not(.js) .kt-cal{grid-template-columns:minmax(0,1fr)} html:not(.js) .kt-grid{clear:both} html:not(.js) .kt-cal-foot{padding-top:0;border-top:0} html:not(.js) .kt-cal-days legend{display:none} .kt-cal-side{display:grid;align-content:start;gap:30px;padding:clamp(22px,3.2vw,44px);border-left:1px solid var(--line)} .kt-times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .kt-t,.kt-w{position:relative;display:block} .kt-t span{display:grid;place-items:center;height:50px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;transition:box-shadow .25s,background-color .25s,color .25s} .kt-t:hover span{box-shadow:inset 0 0 0 1.5px var(--cobalt)} .kt-t:has(input:checked) span{background:var(--cobalt);color:#fff;box-shadow:0 12px 24px -12px rgba(35,53,255,.9)} .kt-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .kt-w span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:16px;font-weight:600;line-height:1.1;transition:box-shadow .25s,background-color .25s,color .25s} .kt-w .ic{width:22px;height:22px;color:var(--cobalt)} .kt-w:hover span{box-shadow:inset 0 0 0 1.5px var(--cobalt)} .kt-w:has(input:checked) span{background:var(--cobalt-tint);color:var(--cobalt);box-shadow:inset 0 0 0 2px var(--cobalt)} .kt-ticket{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 20px 8px 8px;border-radius:999px;background:var(--mist);transition:background-color .3s,box-shadow .3s} .kt-ticket-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--cobalt);transition:background-color .3s,color .3s} .kt-ticket-ic .kt-ic-ok{display:none;stroke-width:2.6} .kt-sum{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink-2)} .kt-ticket.is-ok{background:var(--cobalt-tint)} .kt-ticket.is-ok .kt-sum{color:var(--ink)} .kt-ticket.is-ok .kt-ticket-ic{background:var(--cobalt);color:#fff} .kt-ticket.is-ok .kt-ic-cal{display:none} .kt-ticket.is-ok .kt-ic-ok{display:block;animation:kt-pop .5s var(--ease) both} .kt-ticket.is-miss{box-shadow:0 0 0 2px var(--cobalt),0 0 0 6px rgba(35,53,255,.16)} .kt-ticket.is-miss .kt-sum{color:var(--cobalt)} /* „continue“ with a group still empty: its legend turns cobalt and a soft ring marks its choices (66-kontakt.js, cleared on the next change) */ .kt-fs .kt-grid,.kt-fs .kt-times{outline:3px solid transparent;outline-offset:6px;border-radius:18px;transition:outline-color .3s} .kt-fs.is-miss .kt-grid,.kt-fs.is-miss .kt-times{outline-color:rgba(35,53,255,.35)} .kt-fs.is-miss legend{color:var(--cobalt)} /* summary + continue: one bar under both columns (the booking reads calendar, time, channel, then this) */ .kt-cal-foot{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:18px clamp(22px,3.2vw,44px);border-top:1px solid var(--line)} .kt-cal-foot .kt-ticket{flex:1;min-width:0} .kt-cal-foot .btn{flex:none;width:auto;min-width:min(100%,340px)} /* a short flash when the booking lands in the form */ @keyframes kt-flash{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}35%{box-shadow:0 0 0 8px rgba(255,255,255,.45)}} .kt-flash{animation:kt-flash 1.4s var(--ease) .5s} /* ========================================================================================= #kt-next — one white road left → right through 3 stops, a drawn vignette above each (on phones the road runs down) ========================================================================================= */ .kt-next .scn-head{max-width:1120px} /* the last scene before the footer: no dead gap under the e-mail line */ .kt-next{padding-bottom:clamp(56px,6vw,96px)} .kt-nx{--ah:clamp(190px,16vw,248px);--pm:26px;--sq-gap:.12s;position:relative;max-width:1180px;margin-inline:auto} .kt-nx-list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none} .kt-nx-i{display:flex;flex-direction:column;align-items:center;padding-inline:clamp(12px,2.2vw,32px);text-align:center} .kt-nx-viz{display:block;width:auto;height:var(--ah);aspect-ratio:4/3;max-width:100%;overflow:visible} .kt-nx-pin{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin:var(--pm) 0 20px;border-radius:50%; background:#fff;color:var(--cobalt);font:700 16px/1 var(--f);font-variant-numeric:tabular-nums;box-shadow:0 0 0 8px rgba(255,255,255,.08),0 12px 30px -8px rgba(0,0,0,.6)} .kt-nx-pin::after{content:"";position:absolute;inset:-8px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7);opacity:0} .kt-nx-i h3{font-size:clamp(21px,1.75vw,25px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance} .kt-nx-i p{max-width:26ch;margin-top:10px;font-size:17px;line-height:1.5;color:var(--on-2);text-wrap:pretty} /* the road: its middle (y 30 of 60) runs through the centre of the three pins, which sit at 1/6, 3/6, 5/6 of the width */ .kt-nx-road{position:absolute;left:0;top:calc(var(--ah) + var(--pm) + 24px);width:100%;height:auto;transform:translateY(-50%);overflow:visible;pointer-events:none} .kt-nx-road path{fill:none;stroke-linecap:round;stroke-linejoin:round} .kt-nx-bed{stroke:rgba(201,210,255,.13);stroke-width:20} .kt-nx-line{stroke:#fff;stroke-width:3} html.js .play .kt-nx-line.sq{animation-duration:1.8s;animation-timing-function:linear} /* where the road starts (the enquiry just sent) and where it lands (a flag after the last stop) */ .kt-nx-road .w{fill:#fff}.kt-nx-road .t{fill:#C9D2FF} .kt-nx-road .pole{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round} .kt-nx-road g{transform-box:fill-box;transform-origin:50% 50%} .kt-nx-road .kt-nx-flag{transform-origin:0 100%} /* vignettes: flat, drawn for the dark stage (white, #C9D2FF, #8FA0FF, cobalt, navy; .y is for the price tag, off until the owner confirms it) */ .kt-nx-viz .halo{fill:url(#kt-glow);stroke:none} .kt-nx-viz .floor{fill:#040618;opacity:.35} .kt-nx-viz .w{fill:#fff}.kt-nx-viz .t{fill:#C9D2FF}.kt-nx-viz .p{fill:#8FA0FF}.kt-nx-viz .c{fill:#2335FF}.kt-nx-viz .n{fill:#0B1233}.kt-nx-viz .y{fill:#FFD43B} .kt-nx-viz .o5{opacity:.5}.kt-nx-viz .o6{opacity:.6} .kt-nx-viz .st{stroke:#fff;stroke-width:3} .kt-nx-viz .hand,.kt-nx-viz .ck,.kt-nx-viz .ck-c,.kt-nx-viz .wave{fill:none;stroke-linecap:round;stroke-linejoin:round} .kt-nx-viz .hand{stroke:#fff;stroke-width:3} .kt-nx-viz .ck{stroke:#fff;stroke-width:2.6} .kt-nx-viz .ck-c{stroke:#2335FF;stroke-width:3} .kt-nx-viz .wave{stroke:#fff;stroke-width:3} .kt-nx-viz .tx{font:700 14px var(--f);text-anchor:middle;fill:#2335FF} .kt-nx-viz .n-tx{fill:#0B1233} .kt-nx-viz .tl{font:700 14px var(--f);fill:#0B1233;font-variant-numeric:tabular-nums} .kt-nx-viz .ok-tx{font:700 15px var(--f);fill:#fff;letter-spacing:-.01em} .kt-nx-viz .ph{fill:none;stroke:#2335FF;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round} /* the call follows the channel picked above (66-kontakt.js sets data-kt-call) */ .kt-nx-viz[data-kt-call="phone"] .kt-pip,.kt-nx-viz:not([data-kt-call="phone"]) .kt-ph{display:none} .kt-nx-viz g{transform-box:fill-box;transform-origin:50% 50%} /* the other way in: one plain line with the address and a small copy button (lands after the flag) */ .kt-nx-foot{--d0:2.1s;margin-top:clamp(48px,5vw,72px)} .kt-mrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:17px;line-height:1.4;color:var(--on-2);text-align:center} .kt-mail{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px;overflow-wrap:anywhere} .kt-mail:hover{text-decoration-color:#fff} .kt-copy{width:44px;min-height:44px;height:44px;padding:0;flex:none} .kt-copy .ic{width:19px;height:19px} .kt-copy:hover .ic{transform:none} .kt-copy .kt-ic-ok{display:none;stroke-width:2.6} .kt-copy.is-done .kt-ic-copy{display:none} .kt-copy.is-done .kt-ic-ok{display:block} /* toast for the copy button and the booking: a white lit pill on the dark stage */ .kt-toast{position:fixed;left:16px;right:16px;bottom:24px;z-index:95;width:fit-content;max-width:calc(100vw - 32px);margin-inline:auto;padding:14px 22px;border-radius:28px;background:#fff;color:var(--ink);font-size:16px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease)} .kt-toast.on{opacity:1;transform:none} .kt-toast:empty{display:none} /* the shared contact card is step 2 here: its audit chips would repeat the hero picture (02-chrome.css .ct-checks) */ .page-kontakt .ct-checks{display:none} /* ---------- motion (transform/opacity only; loops only while on screen, still with reduced motion) ---------- */ @media (prefers-reduced-motion:no-preference){ /* hero: the audit rows arrive, a soft scan runs down the list, the two chips float */ html.js .kt-au-list li:not(.kt-au-scan){animation:kt-row .8s var(--ease) both;animation-delay:calc(.55s + var(--i) * .14s)} html.js .kt-au-list em{animation:kt-pop .6s var(--ease) both;animation-delay:calc(.95s + var(--i) * .14s)} html.js .kt-au-list .kt-au-scan{animation:kt-scan 7s ease-in-out 1.8s infinite} html.js .kt-hv-tk{animation:kt-float 7s ease-in-out infinite alternate} html.js .kt-hv-re{animation:kt-float 8s ease-in-out -4s infinite alternate} /* next: the one calm loop, the three stops glow in turn (9 s) */ .kt-next.play.live .kt-nx-pin::after{animation:kt-ping 9s ease-out 3.4s infinite} .kt-next.play.live .kt-nx-i:nth-child(2) .kt-nx-pin::after{animation-delay:6.4s} .kt-next.play.live .kt-nx-i:nth-child(3) .kt-nx-pin::after{animation-delay:9.4s} } @keyframes kt-row{from{opacity:0;transform:translateX(-12px)}} @keyframes kt-pop{from{opacity:0;transform:scale(.4)}} @keyframes kt-scan{0%{opacity:0;transform:translateY(-100%)}8%{opacity:1}46%{opacity:1;transform:translateY(400%)}54%,100%{opacity:0;transform:translateY(400%)}} @keyframes kt-float{from{transform:translateY(0)}to{transform:translateY(-10px)}} @keyframes kt-ping{0%{opacity:0;transform:scale(.8)}6%{opacity:.8}26%,100%{opacity:0;transform:scale(1.55)}} @keyframes kt-ping-m{0%{opacity:0;transform:scale(.8)}6%{opacity:.8}26%,100%{opacity:0;transform:scale(1.3)}} @keyframes kt-growY{from{transform:scaleY(0)}to{transform:none}} @keyframes kt-repop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} @keyframes kt-rerise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes kt-refade{from{opacity:0}to{opacity:1}} /* ---------- layout ---------- */ @media (min-width:1001px){ /* the day grid fills the calendar column next to the time/channel column */ html.js .kt-cal-days{display:flex;flex-direction:column} html.js .kt-grid{flex:1;grid-auto-rows:minmax(72px,1fr)} html.js .kt-d{height:auto} } @media (max-width:1000px){ .kt-cal{grid-template-columns:minmax(0,1fr)} .kt-cal-side{border-left:0;border-top:1px solid var(--line)} .kt-cal-foot{flex-direction:column;align-items:stretch;padding-top:0;border-top:0} .kt-cal-foot .btn{width:100%;min-width:0} } @media (max-width:900px){ .kt-hv-in{padding:46px 0 40px} .kt-hv-tk{right:-12px} .kt-hv-re{left:-12px} } /* phones: the road runs down the left edge, each stop is pin | picture + title + line */ @media (max-width:760px){ .kt-nx{--ah:172px} .kt-nx-road{display:none} .kt-nx-list{gap:44px} .kt-nx-list{grid-template-columns:1fr} .kt-nx-i{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-items:start;padding:0;text-align:left} .kt-nx-pin{grid-column:1;grid-row:1;margin:0;width:46px;height:46px;font-size:15px;box-shadow:0 0 0 6px rgba(255,255,255,.08)} .kt-nx-viz{grid-column:2;grid-row:1;justify-self:start;margin:-6px 0 14px -10px} .kt-nx-i h3,.kt-nx-i p{grid-column:2} .kt-nx-i h3{font-size:21px} .kt-nx-i p{margin-top:6px;font-size:16px} /* each stop plays when it reaches the screen: its own clock starts at its pin (desktop keeps the one cascade) */ .kt-nx-i:nth-child(1){--d0:calc(-2.5 * var(--sq-gap) + .1s)} .kt-nx-i:nth-child(2){--d0:calc(-6.6 * var(--sq-gap) + .1s)} .kt-nx-i:nth-child(3){--d0:calc(-10.6 * var(--sq-gap) + .1s)} .kt-nx-foot{--d0:.1s} /* the ping ring stays inside the screen edge and lighter than the road */ .kt-nx-pin::after{inset:-6px} .kt-next.play.live .kt-nx-pin::after{animation-name:kt-ping-m} /* the road: one line from pin 01 to pin 03 (segments meet under the pins), on the same translucent bed as on desktop; each segment grows down from its stop once that stop plays */ .kt-nx-i:not(:last-child)::after{content:"";position:absolute;left:21.5px;top:23px;bottom:-67px;width:3px;border-radius:3px;background:linear-gradient(#fff,#C9D2FF); box-shadow:0 0 0 8.5px rgba(201,210,255,.13);transform-origin:50% 0} html.js .kt-nx-i[data-play]:not(.play)::after{transform:scaleY(0)} html.js .kt-nx-i.play::after{animation:kt-growY 1s var(--ease) both;animation-delay:.9s} /* the booking card unfolds: days first, the hours after a day, the channel and the button after an hour */ html.js .kt-cal-side{display:block;max-height:0;padding-block:0;opacity:0;visibility:hidden;overflow:hidden;border-top-color:transparent; transition:max-height .7s var(--ease),padding .6s var(--ease),opacity .45s,border-color .45s} html.js .kt-cal.kt-s1 .kt-cal-side{max-height:640px;padding-block:22px 4px;opacity:1;visibility:visible;border-top-color:var(--line)} html.js .kt-fs-way,html.js .kt-cal-foot{max-height:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .7s var(--ease),opacity .45s,margin .6s var(--ease),padding .6s var(--ease)} html.js .kt-cal-foot{padding-bottom:0} html.js .kt-cal.kt-s2 .kt-fs-way{max-height:260px;margin-top:26px;opacity:1;visibility:visible} html.js .kt-cal.kt-s2 .kt-cal-side{padding-bottom:22px} html.js .kt-cal.kt-s2 .kt-cal-foot{max-height:300px;padding-bottom:18px;opacity:1;visibility:visible} /* the chips pop again as their group unfolds */ html.js .play .kt-cal.kt-s1 .kt-t.sq.sq-pop{animation-name:kt-repop;animation-delay:calc(.12s + (var(--s) - 5) * .14s)} html.js .play .kt-cal.kt-s2 .kt-w.sq{animation-name:kt-rerise;animation-delay:calc(.1s + (var(--s) - 7.4) * .2s)} html.js .play .kt-cal.kt-s2 .kt-cal-foot.sq{animation-name:kt-refade;animation-delay:.5s} /* the fixed mobile bar sits at the bottom: keep the toast above it */ .kt-toast{bottom:calc(92px + env(safe-area-inset-bottom))} } @media (max-width:560px){ .kt-hv-in{padding:40px 0 52px} .kt-hv-tk{top:0;right:10px} .kt-hv-re{bottom:0;left:10px} .kt-au{padding:18px 16px 16px;border-radius:24px} .kt-au-top{gap:10px;padding-bottom:12px} .kt-au-mk{width:40px;height:40px} .kt-au-top b{font-size:17px} .kt-au-list li{grid-template-columns:36px minmax(0,1fr) 28px;gap:10px;padding:9px 0} .kt-au-ic{width:36px;height:36px;border-radius:11px} .kt-au-list em{width:28px;height:28px} .kt-au-list .kt-au-scan{left:-16px;right:-16px} .kt-au-foot{padding:12px 14px} .kt-au-foot>b{font-size:32px} .kt-hv-tk,.kt-hv-re{padding:8px 14px 8px 8px;border-radius:18px;gap:10px} .kt-hv-ic,.kt-hv-av{width:38px;height:38px} .kt-hv-tk b,.kt-hv-re b{font-size:15px} .kt-cal-days,.kt-cal-side{padding:22px 16px} .kt-cal-side{gap:26px} .kt-cal-foot{padding:0 16px 18px} .kt-dow,.kt-grid{gap:6px} .kt-d{height:54px;border-radius:14px} .kt-legend{gap:8px 16px} .kt-times{gap:6px} .kt-t span{height:48px} .kt-ways{gap:6px} .kt-w span{padding:12px 4px} .kt-ticket{padding:12px} } @media (max-width:420px){ /* the address and the copy button stay on one line under the label */ .kt-mrow{gap:4px 6px;font-size:16px} } @media (max-width:400px){ /* 360–400: the month and the long „continue“ button fit the card instead of widening it past its clip */ .kt-month{font-size:17px} .kt-cal-foot .btn{padding:0 18px;font-size:17px;line-height:1.2;white-space:normal;text-align:center} } @media (prefers-reduced-motion:reduce){ .kt-nx-i::after{animation:none!important;transform:none!important} } /* hero loops pause while their picture is off-screen (66-kontakt.js toggles .kt-play) */ [data-kt-live]:not(.kt-play) .kt-a,[data-kt-live]:not(.kt-play) .kt-a::before,[data-kt-live]:not(.kt-play) .kt-a::after{animation-play-state:paused} /* ==== 67-nf.css ==== */ /* 404 page (chrome agent, 2026-09-27 „Кино“): a road that stops in the hero, the pin and the number; below it one scene where the road carries on through four stops. Prefix .nf- */ .nf-vis{display:flex;justify-content:center} .nf-vis svg{width:min(100%,480px);height:auto;overflow:visible} /* one road language on the page: 12px periwinkle verge, 4px white line, cobalt dashes, white pin with a cobalt eye. Yellow stays on the button and the eyebrow dot only. */ .nf-halo{stroke:#8FA0FF;stroke-opacity:.3;stroke-width:12;stroke-linecap:round} .nf-road{stroke:#fff;stroke-width:4;stroke-linecap:round} .nf-dash{stroke:#2335FF;stroke-width:2.2;stroke-dasharray:8 14;stroke-linecap:round} .nf-ghost{stroke:#C9D2FF;stroke-opacity:.34;stroke-width:3;stroke-dasharray:2 11;stroke-linecap:round} .nf-cut{stroke:#C9D2FF;stroke-width:4;stroke-linecap:round} .nf-num{fill:#fff;font:700 132px/1 var(--f);letter-spacing:-.05em;opacity:.95} .nf-pin path{fill:#fff} .nf-pin circle{fill:var(--cobalt)} @media (prefers-reduced-motion:no-preference){ html.js .nf-dash{animation:nfDash 22s linear infinite} html.js .nf-pin{animation:nfBob 4.4s ease-in-out infinite} } @keyframes nfDash{to{stroke-dashoffset:-240}} @keyframes nfBob{50%{translate:0 -8px}} @media (max-width:760px){.nf-vis svg{width:min(100%,340px)}.nf-num{font-size:112px}} /* desktop: no empty band between the hero and the stops; the four stops start inside the first screen (1440x900) */ @media (min-width:901px){ .nf-hero{--sh-fade:clamp(120px,13vw,200px);padding-bottom:clamp(36px,3.6vw,56px)} .scene.nf-go{padding-top:clamp(56px,5.6vw,88px)} } /* ---------- the scene: one drawn road, four stops ---------- The road is the site's road (as in the contact scene and the footer): a soft periwinkle verge, a 3px white line and cobalt road-marking dashes. It draws in (clip wipe, so the dashes never stretch), a small white pin lands on each stop, then one light runs from the first stop to the last. --rc is the road's centre line, --x the stop's offset inside its card. */ .nf-go .nf-way{--road:12px;--rc:6px;--lane:48px;--x:56px;position:relative;padding-top:var(--lane)} .nf-line{position:absolute;left:0;right:0;top:0;height:var(--road);border-radius:var(--road); background:repeating-linear-gradient(90deg,#2335FF 0 9px,transparent 9px 20px) 0 50%/100% 2px no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 3px no-repeat,rgba(143,160,255,.3); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} html.js .play .nf-go .nf-line.sq,html.js .nf-go.play .nf-line.sq{animation-name:nfDrawX;animation-duration:1.4s;animation-timing-function:cubic-bezier(.45,0,.2,1)} @keyframes nfDrawX{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} @keyframes nfDrawY{from{opacity:1;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} /* the one loop: a small light travels from stop 1 to stop 4, slowly, only while the scene is on screen; hidden until it starts */ .nf-run{position:absolute;left:var(--x);right:calc((100% - 60px)/4 - var(--x));top:calc(var(--rc) - 1px);height:2px;pointer-events:none;container-type:size} .nf-run::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(35,53,255,.5),0 0 18px 4px rgba(170,184,255,.6);opacity:0} @media (prefers-reduced-motion:no-preference){ html.js .nf-go.play .nf-run::before{animation:nfRun 8s cubic-bezier(.45,0,.55,1) 3.2s infinite;animation-play-state:paused} html.js .nf-go.play.live .nf-run::before{animation-play-state:running} } @keyframes nfRunY{0%{opacity:0;transform:translateY(0)}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(100cqh)}} @keyframes nfRun{0%{opacity:0;transform:translateX(0)}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(100cqw)}} .nf-stops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .nf-stop{position:relative;display:grid;align-content:start;gap:6px;min-height:212px;padding:28px 28px 72px;color:#fff; background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.05));border-color:rgba(255,255,255,.18); transition:translate .45s var(--ease),background-color .3s,box-shadow .3s} .nf-stop:hover{translate:0 -4px;background-color:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 30px 80px -40px rgba(0,0,0,.6)} /* the stop: a small white pin whose tip sits on the road's centre line */ .nf-dot{position:absolute;left:calc(var(--x) - 11px);top:calc(var(--rc) - var(--lane) - 29px);width:22px;height:29px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 37'%3E%3Cpath d='M14 37C9.5 30 1 22.5 1 14a13 13 0 0 1 26 0c0 8.5-8.5 16-13 23z' fill='white'/%3E%3Ccircle cx='14' cy='14' r='5' fill='%232335FF'/%3E%3C/svg%3E"); filter:drop-shadow(0 6px 8px rgba(2,4,40,.45))} .nf-ic{display:grid;place-items:center;width:56px;height:56px;margin-bottom:18px;border-radius:18px;color:#C9D2FF;background:rgba(201,210,255,.12);box-shadow:inset 0 0 0 1px rgba(201,210,255,.26)} .nf-ic .ic{width:24px;height:24px;stroke-width:1.9} .nf-stop b{font-size:clamp(22px,1.9vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.15} .nf-sub{font-size:17px;line-height:1.4;color:var(--on-2)} /* the stops say it with small tokens, not lines: a price chip, four service icons, a live chip, an „Одобрено“ state */ .nf-chip{justify-self:start;display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-top:6px;padding:6px 12px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2;color:#fff;background:rgba(201,210,255,.14);box-shadow:inset 0 0 0 1px rgba(201,210,255,.24)} .nf-live i{width:9px;height:9px;flex:none;border-radius:50%;background:#34D27B;box-shadow:0 0 0 4px rgba(52,210,123,.22)} .nf-ok{background:var(--cobalt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 10px 22px -8px rgba(35,53,255,.9)} .nf-ok .ic{width:16px;height:16px;stroke-width:2.6} .nf-icons{display:flex;gap:6px;margin-top:6px} .nf-icons i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#DDE2FF;background:rgba(201,210,255,.12);box-shadow:inset 0 0 0 1px rgba(201,210,255,.2)} .nf-icons .ic{width:17px;height:17px;stroke-width:1.9} .nf-go-ar{position:absolute;right:26px;bottom:26px;width:24px;height:24px;color:#C9D2FF;transition:transform .35s var(--ease),color .3s} .nf-stop:hover .nf-go-ar{transform:translateX(4px);color:#fff} .nf-stop:focus-visible{outline:3px solid #fff;outline-offset:3px} /* phones and small tablets: the road runs down the left side, the stops hang off it as equal rows (so the run can end on stop 4) */ @media (max-width:900px){ .nf-go .nf-way{--lane:44px;--row:88px;padding-top:0;padding-left:var(--lane)} .nf-line{left:0;right:auto;top:0;bottom:0;width:var(--road);height:auto; background:repeating-linear-gradient(180deg,#2335FF 0 9px,transparent 9px 20px) 50% 0/2px 100% no-repeat,linear-gradient(#fff,#fff) 50% 0/3px 100% no-repeat,rgba(143,160,255,.3); -webkit-mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent)} html.js .play .nf-go .nf-line.sq,html.js .nf-go.play .nf-line.sq{animation-name:nfDrawY} .nf-run{left:calc(var(--rc) - 1px);right:auto;top:calc(var(--row)/2);bottom:calc(var(--row)/2);width:2px;height:auto} .nf-run::before{left:50%;top:0;margin:-5px 0 0 -5px} html.js .nf-go.play .nf-run::before{animation-name:nfRunY} .nf-stops{grid-template-columns:minmax(0,1fr);gap:14px} .nf-stop{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic t ar" "ic s ar";align-items:center;align-content:center;column-gap:16px;row-gap:2px;height:var(--row);min-height:0;padding:0 20px 0 16px;border-radius:22px} .nf-ic{grid-area:ic;margin:0;width:56px;height:56px;border-radius:16px} .nf-stop b{grid-area:t;align-self:end;font-size:21px} .nf-sub{grid-area:s;align-self:start;font-size:16px} .nf-chip{margin-top:4px;padding:4px 10px;font-size:14px} .nf-icons{margin-top:4px;gap:5px} .nf-icons i{width:28px;height:28px;border-radius:9px} .nf-icons .ic{width:15px;height:15px} .nf-go-ar{grid-area:ar;position:static} .nf-dot{left:calc(var(--rc) - var(--lane) - 11px);top:calc(50% - 29px)} } @media (prefers-reduced-motion:reduce){.nf-run{display:none}} /* ==== 68-totop.css ==== */ /* WhiteWays · back-to-top „Към началото“ (2026-09-29). Markup is injected by 68-totop.js. A small road runs up into the button: the ring is the page (dashed road marking = what is left, the lit arc = what you read, the white pin = where you are), the dashed centre line inside streams toward you on hover and races on the way up. The glow takes the stage's colour grade (--st-a/--st-b from 04-stage.css), so the button changes tone with every scene. It stacks above the AI orb, steps down into the orb's place while the orb steps aside, and hides while the chat is open. No yellow: yellow belongs to the main action and prices. Reduced motion: shown/hidden in place, nothing streams. */ .totop{--tt:54px;--tt-r:28px;--tt-b:104px;--tt-drop:80px;--p:0;--mx:0px;--my:0px; position:fixed;right:var(--tt-r);bottom:var(--tt-b);z-index:68;width:var(--tt);height:var(--tt);padding:0;border:0;border-radius:50%; background:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent; opacity:0;visibility:hidden;transform:translateY(22px) scale(.55);filter:blur(6px); transition:opacity .45s var(--ease),transform .6s var(--ease),filter .5s var(--ease),visibility 0s .6s,translate .5s var(--ease)} .totop.on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .45s var(--ease),transform .7s cubic-bezier(.3,1.5,.5,1),filter .5s var(--ease),visibility 0s,translate .5s var(--ease)} /* the chat panel opens right over this corner; the menu sheet covers everything */ html.ai-open .totop,html.menu-open .totop{opacity:0;visibility:hidden;transform:translateY(14px) scale(.8);transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s} .totop:focus-visible{outline-color:#fff;outline-offset:5px;border-radius:50%} /* everything that moves with the pointer lives in .tt-body, so the magnet never fights the show/hide transform */ .tt-body{position:absolute;inset:0;display:block;border-radius:50%;transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease),--st-a 1.6s var(--ease),--st-b 1.6s var(--ease); background:rgba(8,12,52,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px -14px rgba(4,6,40,.9)} .totop:active .tt-body{transform:translate(var(--mx),var(--my)) scale(.92);transition-duration:.15s} /* tone glow behind the button + the burst ring on press */ .tt-glow{position:absolute;inset:-14px;z-index:-1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,color-mix(in srgb,var(--st-a,#2E45FF) 70%,transparent),transparent);opacity:.8;transition:opacity .4s} .totop:hover .tt-glow,.totop:focus-visible .tt-glow{opacity:1} .tt-glow::after{content:"";position:absolute;inset:14px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 18px 2px var(--st-b,#5B7CFF);opacity:0} .totop.boom .tt-glow::after{animation:ttBoom .8s var(--ease)} @keyframes ttBoom{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}} /* ring: dashed road marking (the rest of the page) under the lit arc (what is read), pin at the head */ .tt-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .tt-ring circle{fill:none;stroke-linecap:round} .tt-track{stroke:rgba(255,255,255,.34);stroke-width:1.6;stroke-dasharray:1.6 2.6} .tt-prog{stroke:url(#tt-grad);stroke-width:2.6;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p)*100); transform:rotate(-90deg);transform-origin:32px 32px;filter:drop-shadow(0 0 3px rgba(159,176,255,.9))} .tt-head{transform:rotate(calc(var(--p)*360deg));transform-origin:32px 32px} .tt-head circle{fill:#fff;stroke:var(--cobalt);stroke-width:1.8;filter:drop-shadow(0 0 4px rgba(190,200,255,.95))} .tt-head{transition:opacity .3s} .totop.zero .tt-head{opacity:0} @media (prefers-reduced-motion:no-preference){.totop:hover .tt-track{animation:ttMarch 1.2s linear infinite}} @keyframes ttMarch{to{stroke-dashoffset:-8.4}} /* core: dark frosted glass, lit from the top-left in the scene's colours */ .tt-core{position:absolute;inset:5px;overflow:hidden;border-radius:50%;isolation:isolate; background:radial-gradient(110% 80% at 30% 8%,color-mix(in srgb,var(--st-b,#5B7CFF) 80%,#fff 8%) 0,transparent 62%), radial-gradient(circle at 50% 115%,var(--st-a,#2E45FF),transparent 72%),linear-gradient(160deg,#2B3CF0,#0D1580 70%); /* no backdrop-filter here: the opaque gradient covers it completely, so it only cost a blur pass on every scroll frame */ box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -8px 14px rgba(4,6,40,.45),0 0 22px -4px color-mix(in srgb,var(--st-b,#5B7CFF) 80%,transparent)} /* a slow light sweeps the glass on hover */ .tt-core::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none} @media (prefers-reduced-motion:no-preference){.totop:hover .tt-core::after,.totop:focus-visible .tt-core::after{animation:ttSheen 1.1s var(--ease)}} @keyframes ttSheen{to{transform:translateX(120%)}} /* the road: two edges and a dashed centre line, tilted back so it runs up into the distance */ .tt-road{position:absolute;left:50%;bottom:-6px;width:40px;height:44px;margin-left:-20px;opacity:.5; transform:perspective(46px) rotateX(46deg);transform-origin:50% 100%; -webkit-mask:linear-gradient(to top,#000 30%,transparent 92%);mask:linear-gradient(to top,#000 30%,transparent 92%);transition:opacity .4s} .tt-road::before{content:"";position:absolute;inset:0;border-inline:1.5px solid rgba(255,255,255,.8)} .tt-road::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2.5px;margin-left:-1.25px; background:repeating-linear-gradient(to bottom,#fff 0 6px,transparent 6px 12px)} .totop:hover .tt-road,.totop:focus-visible .tt-road{opacity:.8} .totop.fly .tt-road{opacity:1} @media (prefers-reduced-motion:no-preference){ .totop:hover .tt-road::after,.totop:focus-visible .tt-road::after{animation:ttLane .9s linear infinite} .totop.fly .tt-road::after{animation:ttLane .22s linear infinite} } @keyframes ttLane{from{background-position:0 0}to{background-position:0 12px}} /* arrow: bobs on hover, launches on press, the next one rises from below when the page arrives */ .tt-arr{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-12px 0 0 -11px;fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 2px 3px rgba(4,6,40,.6));transition:transform .45s var(--ease)} .totop:hover .tt-arr{transform:translateY(-3px)} @media (prefers-reduced-motion:no-preference){ .totop:hover:not(.fly) .tt-arr{animation:ttBob 1.1s var(--ease) infinite alternate} .totop.fly .tt-arr{animation:ttLaunch .5s cubic-bezier(.5,0,.75,0) forwards} .totop.land .tt-arr{animation:ttRise .6s var(--ease)} } @keyframes ttBob{from{transform:translateY(-1px)}to{transform:translateY(-5px)}} @keyframes ttLaunch{30%{transform:translateY(3px)}100%{transform:translateY(-34px);opacity:0}} @keyframes ttRise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}} /* hint: same frosted pill as the AI hint, with how far down the page you are */ .tt-hint{position:absolute;right:calc(100% + 14px);top:50%;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 12px 10px 18px;border-radius:999px; font-size:15px;font-weight:600;line-height:1;color:#fff;background:rgba(14,19,70,.62);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 14px 34px -14px rgba(0,0,0,.7); opacity:0;transform:translate(8px,-50%);transition:opacity .3s,transform .3s var(--ease);pointer-events:none} .tt-hint b{min-width:44px;padding:6px 8px;border-radius:999px;text-align:center;font-size:14px;font-weight:600;color:#DDE3FF;background:rgba(255,255,255,.12)} .totop:hover .tt-hint,.totop:focus-visible .tt-hint{opacity:1;transform:translate(0,-50%)} .totop.fly .tt-hint{opacity:0} @media (hover:none){.tt-hint{display:none}} /* tablets: while the AI orb steps aside for the form (00-core.js sets html.ai-aside / html.ai-open), this button drops into its place. Classes on , not body:has(): a :has() on re-checks on every DOM change on the page. */ @media (max-width:1100px){html.ai-aside:not(.ai-open) .totop{translate:0 var(--tt-drop)}} /* phones: smaller, over the smaller orb (16px offset + 58px orb + 14px air) */ @media (max-width:760px){.totop{--tt:48px;--tt-r:21px;--tt-b:calc(88px + env(safe-area-inset-bottom));--tt-drop:72px}} /* phones: while a plan button or a contact form control sits under the resting spot (html.tt-away, 68-totop.js), step out */ @media (max-width:760px){ html.tt-away .totop.on{opacity:0;visibility:hidden;transform:translateY(14px) scale(.8);transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s} } @media print{.totop{display:none}} /* ==== 69-checkout.css ==== */ /* WhiteWays · checkout (checkout.html, 2026-09-30). Markup: src/pages/checkout.html · behaviour: 69-checkout.js. One dark „Кино“ scene (night). The form is glass on the stage, the order summary is the one lit white card. Yellow only on the submit button (one per view). The progress road is the WhiteWays road marking: ≥1041px a vertical rail down the form's left edge, ≤1040px a 5-stop strip under the header. ≤760px: the summary becomes a bottom bar (total + the yellow) and a receipt sheet. Nothing under 13px. */ html:has(body.co-page){--co-hdr:72px;scroll-padding-top:calc(var(--co-hdr) + 20px)} .co-page [hidden]{display:none!important} .co-page .totop{display:none!important} /* distraction-free: the road strip / rail is the way around this page */ /* ---------- slim header ---------- */ .co-hdr{position:sticky;top:0;z-index:50;height:var(--co-hdr);color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),color-mix(in srgb,var(--st-base) 72%,rgba(4,6,26,.9)); -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 -1px 0 rgba(255,255,255,.09)} .co-hdr-in{display:flex;align-items:center;gap:18px;height:100%} .co-brand .logo{height:36px} .co-hdr-t{padding-left:18px;border-left:1px solid rgba(255,255,255,.2);font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2} .co-hdr-help{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:15px;color:var(--on-2)} .co-hdr-help i{width:9px;height:9px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 4px rgba(61,220,151,.18)} .co-back{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px 0 14px;border-radius:999px;font-size:16px;font-weight:600;color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26);transition:background-color .25s,box-shadow .25s} .co-back .ic{transform:rotate(180deg);transition:transform .35s var(--ease)} .co-back:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)} .co-back:hover .ic{transform:rotate(180deg) translateX(3px)} /* ---------- scene frame ---------- */ .co-scene{padding-block:clamp(36px,4.4vw,64px) clamp(64px,8vw,112px)} .co-head{margin-bottom:clamp(26px,3.4vw,44px);padding-left:58px} .co-title{font-size:clamp(38px,4.8vw,68px);line-height:1.02;letter-spacing:-.045em;font-weight:600;color:#fff;text-wrap:balance} .co-title em{font-style:normal;background:linear-gradient(95deg,#fff 10%,#AEB9FF 60%,#7F93FF);-webkit-background-clip:text;background-clip:text;color:transparent} .co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,410px);gap:clamp(32px,3.4vw,52px);align-items:start} @media (prefers-reduced-motion:no-preference){ html.js .co-form{opacity:0} html.js .co-scene.play .co-form{animation:coUp .9s var(--ease) .2s both} } @keyframes coUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes coIn{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}} /* ---------- steps + the road rail ---------- */ .co-steps{position:relative;display:grid;gap:20px;padding-left:58px} .co-rail{position:absolute;left:17px;top:46px;bottom:60px;width:2px;border-radius:2px; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.32) 0 9px,transparent 9px 18px)} .co-rail b{position:absolute;left:-1px;top:0;width:4px;height:0;border-radius:4px;background:linear-gradient(#fff,#9FB0FF); box-shadow:0 0 14px rgba(159,176,255,.7);transition:height .9s var(--ease)} .co-step{position:relative;margin:0;min-width:0;padding:30px clamp(20px,2.6vw,34px) clamp(24px,2.6vw,34px);border-radius:28px;container-type:inline-size;color:var(--on)} .co-step>*:not(legend){clear:both} .co-lg{float:left;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;width:100%;padding:0;margin:0 0 18px;font-size:clamp(22px,1.9vw,26px);line-height:1.25;font-weight:600;letter-spacing:-.025em;color:#fff} .co-lg small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--on-2)} .co-stop{position:absolute;left:-58px;top:28px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:15px;font-weight:600;color:#fff; background:var(--st-base);box-shadow:inset 0 0 0 2px rgba(255,255,255,.42);transition:background-color .4s,box-shadow .4s,color .4s,transform .45s cubic-bezier(.3,1.5,.5,1)} .is-cur .co-stop{background:var(--cobalt);box-shadow:inset 0 0 0 2px #fff,0 0 0 7px rgba(35,53,255,.3);transform:scale(1.08)} .is-done .co-stop{background:#fff;color:var(--cobalt);box-shadow:0 0 18px rgba(159,176,255,.55)} .is-done .co-stop b{display:none} .is-done .co-stop::after{content:"";width:16px;height:16px;background:var(--cobalt); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat} .co-sub{margin:26px 0 12px;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-2)} .co-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:16px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.08);font-size:15px;line-height:1.45;color:var(--on-2)} /* 2026-10-01 minimal round: the first-visit „Избрахме Растеж…“ line repeats the „Препоръчваме“ tag on the lit card */ .co-note[data-co-hello]{display:none!important} .co-link{padding:0;border:0;background:none;font:inherit;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;cursor:pointer;transition:text-decoration-color .2s} .co-link:hover{text-decoration-color:currentColor} .co-fine{margin-top:14px;font-size:15px;line-height:1.5;color:var(--on-2)} .co-form input[type="radio"],.co-form input[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .co-form label{-webkit-tap-highlight-color:transparent} /* ---------- 1. plan cards ---------- */ .co-plans{display:grid;gap:12px} .co-plan{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:14px;padding:16px 18px;border-radius:22px;cursor:pointer; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .3s,box-shadow .3s,color .3s,transform .45s var(--ease)} .co-plan:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .co-plan:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px} .co-plan-top{display:flex;align-items:center;gap:12px;min-width:0} .co-stk{width:36px;height:44px;flex:none;overflow:visible} .co-stk .f,.co-sstk .f{fill:#fff;stroke:rgba(11,18,51,.12);stroke-width:.8;stroke-linejoin:round} .co-plan-n{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2} .co-radio{display:none} .co-plan-p{grid-column:2;grid-row:1;display:flex;align-items:baseline;justify-content:flex-end;gap:5px;white-space:nowrap} .co-plan-p b{font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .co-per{font-size:15px;font-weight:500;color:var(--on-2)} .co-plan-y{grid-column:1/-1;justify-self:end;font-size:14px;color:var(--on-2)} .co-plan-y:empty{display:none} .co-plan-y s{margin-right:4px;opacity:.75} .co-plan-d,.co-plan-l{grid-column:1/-1;display:none} .co-plan-d{margin-top:8px;font-size:16px;line-height:1.45;color:var(--on-2)} .co-plan-l{gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)} .co-plan-l>span,.co-all-in li{position:relative;padding-left:24px;font-size:15px;line-height:1.4} .co-plan-l>span::before,.co-all-in li::before{content:"";position:absolute;left:0;top:.18em;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.14) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")} .co-plan-tag{position:absolute;top:-12px;right:18px;padding:6px 11px;border-radius:999px;background:linear-gradient(135deg,#4A5BFF,#2335FF);color:#fff;font-size:13px;font-weight:600;letter-spacing:.03em;box-shadow:0 8px 20px -8px rgba(35,53,255,.9)} /* chosen: the lit card */ .co-plan:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 0 0 2px #fff,0 22px 50px -24px rgba(0,0,0,.8)} .co-plan:has(input:checked) .co-plan-d,.co-plan:has(input:checked) .co-plan-l{display:grid} .co-plan:has(input:checked) .co-plan-d,.co-plan:has(input:checked) .co-per,.co-plan:has(input:checked) .co-plan-y{color:var(--muted)} .co-plan:has(input:checked) .co-plan-l{border-top-color:var(--line)} .co-plan:has(input:checked) .co-plan-l>span{color:var(--ink-2)} .co-plan:has(input:checked) .co-plan-l>span::before{background-color:var(--cobalt)} .co-plan:has(input:checked):has(input:focus-visible){outline-color:#fff} /* wide step: three cards in a row, everything visible */ @container (min-width:600px){ .co-plans{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} .co-plan{grid-template-columns:1fr;align-content:start;align-items:start;padding:20px 18px 20px} .co-plan-p{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:14px} .co-plan-p b{font-size:34px} .co-plan-y{grid-column:1;justify-self:start;margin-top:4px} .co-plan-d,.co-plan-l{display:grid} .co-plan{padding:20px 16px 18px} .co-plan-d{font-size:15px;line-height:1.4} .co-plan-l>span{font-size:14.5px} .co-radio{display:block;margin-left:auto;width:24px;height:24px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);transition:background-color .25s,box-shadow .25s} .co-plan:has(input:checked) .co-radio{box-shadow:none;background:var(--cobalt) center/13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")} .co-plan:has(input:checked){transform:translateY(-4px)} .co-plan-tag{left:18px;right:auto} } /* the full list of the chosen plan */ .co-all,.co-terms,.co-more{margin-top:14px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .25s} .co-all[open],.co-terms[open],.co-more[open]{background:rgba(255,255,255,.04)} .co-all summary,.co-terms summary,.co-more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 18px;font-size:16px;font-weight:600;cursor:pointer;border-radius:18px} .co-all summary::-webkit-details-marker,.co-terms summary::-webkit-details-marker,.co-more summary::-webkit-details-marker{display:none} .co-all summary .ic,.co-terms summary .ic,.co-more summary .ic{transition:transform .3s var(--ease)} .co-all[open] summary .ic,.co-terms[open] summary .ic,.co-more[open] summary .ic{transform:rotate(45deg)} .co-more summary small{margin-left:8px;font-size:15px;font-weight:400;color:var(--on-2)} .co-all-in{display:none;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px 28px;padding:6px 18px 22px} .co-form:has(input[name="plan"][value="start"]:checked) .co-all-in[data-for="start"], .co-form:has(input[name="plan"][value="grow"]:checked) .co-all-in[data-for="grow"], .co-form:has(input[name="plan"][value="full"]:checked) .co-all-in[data-for="full"]{display:grid} .co-all-in>div>p{margin-bottom:10px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-2)} .co-all-in ul{display:grid;gap:8px} .co-all-in li{color:#fff} /* ---------- 2. billing: segmented switch + the year strip ---------- */ .co-bill{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:6px;border-radius:999px;background:rgba(3,6,34,.5);box-shadow:inset 0 0 0 1px var(--hair)} .co-bill::before{content:"";position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;background:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.7);transition:transform .5s var(--ease)} .co-bill:has(input[value="year"]:checked)::before{transform:translateX(100%)} .co-bill label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;min-height:58px;padding:6px 14px;border-radius:999px;text-align:center;font-size:17px;font-weight:600;color:#fff;cursor:pointer;transition:color .3s} .co-bill label:has(input:checked){color:var(--ink)} .co-bill label:has(input:focus-visible){outline:3px solid #fff;outline-offset:2px} .co-gift{font-style:normal;white-space:nowrap;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.1;background:rgba(255,255,255,.14);color:#fff;transition:background-color .3s,color .3s} .co-bill label:has(input:checked) .co-gift{background:var(--cobalt);color:#fff} /* the billing sentence repeats the switch, the 12-month strip and its caption: kept for screen readers only */ .co-bill-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .co-year{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:16px} .co-year i{position:relative;display:grid;place-items:center;height:46px;border-radius:12px;font-style:normal;font-size:14px;font-weight:600;color:var(--on-2); background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair); transition:background-color .45s var(--ease),color .45s,box-shadow .45s,transform .55s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--m) * 32ms)} .co-year .z{display:none} .co-form[data-billing="year"] .co-year i{background:linear-gradient(160deg,#4152FF,#2335FF);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)} .co-form[data-billing="year"] .co-year i.gift{background:#fff;color:var(--cobalt);transform:translateY(-4px);box-shadow:0 12px 26px -12px rgba(255,255,255,.75)} .co-form[data-billing="year"] .co-year i.gift .n{display:none} .co-form[data-billing="year"] .co-year i.gift .z{display:block} .co-year-cap{margin-top:12px;font-size:15px;color:var(--on-2);font-variant-numeric:tabular-nums} .co-terms ul{display:grid;gap:10px;padding:2px 18px 14px} .co-terms li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--on-2)} .co-terms li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:#8FA0FF} .co-terms .co-link{display:inline-block;margin:0 18px 18px;font-size:15px} @container (max-width:520px){ .co-year{grid-template-columns:repeat(6,minmax(0,1fr))} .co-bill label{flex-direction:column;min-height:66px;border-radius:26px;font-size:16px} .co-bill,.co-bill::before{border-radius:30px} } /* ---------- 3. add-ons ---------- */ .co-skip{position:absolute;top:34px;right:clamp(20px,2.6vw,34px);font-size:15px} .co-adds{display:grid;gap:10px} .co-add{display:grid;grid-template-columns:44px minmax(0,1fr) auto 46px;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:20px;cursor:pointer; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .25s,box-shadow .25s,color .25s} .co-add:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)} .co-add:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px} .co-add-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;transition:background-color .25s} .co-add-ic .ic{width:22px;height:22px} .co-add-n{font-size:17px;font-weight:600;line-height:1.25} .co-add-d{display:block;margin-top:3px;font-size:15px;font-weight:500;line-height:1.35;color:var(--on-2)} .co-add-inc{display:none;margin-top:3px;font-size:15px;font-weight:500;color:#C9D2FF} .co-add-p{font-size:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} .co-sw{position:relative;width:46px;height:28px;border-radius:999px;background:rgba(255,255,255,.2);transition:background-color .25s} .co-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,18,51,.3);transition:transform .3s var(--ease)} .co-add:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 16px 36px -18px rgba(0,0,0,.7)} .co-add:has(input:checked) .co-add-d{color:var(--muted)} .co-add:has(input:checked) .co-add-ic{background:var(--cobalt)} .co-add:has(input:checked) .co-sw{background:var(--cobalt)} .co-add:has(input:checked) .co-sw::after{transform:translateX(18px)} .co-add.is-off{cursor:default;background:rgba(255,255,255,.03)} .co-add.is-off:hover{box-shadow:inset 0 0 0 1px var(--hair)} .co-add.is-off .co-add-d{display:none} .co-add.is-off .co-add-inc{display:block} .co-add.is-off .co-add-p{opacity:.55;text-decoration:line-through} .co-add.is-off .co-sw{background:rgba(255,255,255,.1)} .co-add.is-inc .co-add-ic{background:rgba(201,210,255,.2)} .co-add.is-inc .co-sw{background:rgba(201,210,255,.45)} .co-add.is-inc .co-sw::after{transform:translateX(18px)} .co-add.is-off:not(.is-inc) .co-add-n,.co-add.is-off:not(.is-inc) .co-add-ic{opacity:.7} .co-add-logo{margin-top:10px} .co-tip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;padding:12px 16px;border-radius:16px;background:rgba(35,53,255,.28);box-shadow:inset 0 0 0 1px rgba(159,176,255,.35);font-size:15px;line-height:1.45;color:#fff} .co-vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .co-vid{display:grid;gap:4px;justify-items:center;align-content:center;min-height:76px;padding:12px 8px;border-radius:18px;text-align:center;cursor:pointer; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .25s,box-shadow .25s,color .25s} .co-vid:hover{background:rgba(255,255,255,.09)} .co-vid:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px} .co-vid-n{font-size:16px;font-weight:600;line-height:1.2} .co-vid-p{font-size:15px;color:var(--on-2);white-space:nowrap} .co-vid:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 14px 30px -16px rgba(0,0,0,.7)} .co-vid:has(input:checked) .co-vid-p{color:var(--muted)} @container (max-width:520px){ .co-add{grid-template-columns:40px minmax(0,1fr) 46px;grid-template-areas:"ic n sw" "ic p sw";row-gap:2px;padding:12px 14px 12px 12px} .co-add-ic{grid-area:ic;width:40px;height:40px} .co-add-n{grid-area:n} .co-add-p{grid-area:p;font-size:15px} .co-sw{grid-area:sw} .co-vids{grid-template-columns:repeat(2,minmax(0,1fr))} .co-skip{position:static;display:inline-block;margin:-8px 0 12px} .co-more summary small{display:block;margin:2px 0 0} } /* ---------- 4. business ---------- */ .co-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px} .co-f-wide{grid-column:1/-1} .co-hint{margin-left:6px;font-size:15px;font-weight:400;color:var(--on-2)} .co-step .field input{font-size:18px} .co-site{margin:22px 0 0;padding:0;border:0;min-width:0} .co-site legend{padding:0;margin-bottom:10px;font-size:16px;font-weight:600;color:rgba(255,255,255,.92)} .co-sites{display:flex;flex-wrap:wrap;gap:10px} .co-sites label{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border-radius:999px;cursor:pointer;font-size:16px;font-weight:500; background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:background-color .2s,color .2s,box-shadow .2s} .co-sites label::before{content:"";width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.75;flex:none;transition:background-color .2s,box-shadow .2s} .co-sites label:hover{background:rgba(255,255,255,.14)} .co-sites label:has(:checked){background:#fff;color:var(--cobalt-2);box-shadow:none} .co-sites label:has(:checked)::before{background:var(--cobalt);box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px var(--cobalt);opacity:1} .co-sites label:has(:focus-visible){outline:3px solid #fff;outline-offset:2px} .co-site.bad .co-sites label{box-shadow:inset 0 0 0 2px #FFB9AB} .co-site .err{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;font-weight:500;line-height:1.35;color:#FFD2C8} .co-site .err::before{content:"!";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#FFB9AB;color:#0C148C;font-size:13px;font-weight:700;flex:none} .co-site-t{margin-top:10px;font-size:15px;color:var(--on-2)} .co-f-url{margin-top:16px} .co-more .co-fields,.co-more>.field{padding:4px 18px 18px} @container (max-width:520px){.co-fields{grid-template-columns:1fr}.co-hint{display:block;margin:2px 0 0}} /* narrow steps: the three „Имате ли сайт?“ answers as one even column instead of a ragged 2 + 1 wrap */ @container (max-width:560px){.co-sites{display:grid;grid-template-columns:minmax(0,1fr)}.co-sites label{width:100%}} /* ---------- 5. review ---------- */ .co-rev{display:grid} .co-rev>div{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding:14px 0;border-top:1px solid var(--hair)} .co-rev>div:first-child{border-top:0;padding-top:4px} .co-rev dt{font-size:15px;color:var(--on-2)} .co-rev dd{margin:0;font-size:17px;line-height:1.45;color:#fff} .co-rev .co-link{font-size:15px} .co-money{display:grid;gap:6px;margin-top:18px;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--hair)} .co-money p{font-size:16px;line-height:1.5;color:var(--on-2)} .co-money .co-money-0{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;color:#fff} .co-money-0 .ic{width:24px;height:24px;padding:4px;border-radius:50%;background:#3DDC97;color:#04301D;stroke-width:3} /* what happens next: a 5-stop road, one icon + one word + one fact per stop; the last stop is the lit „вие одобрявате“ */ .co-next3{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:22px} .co-next3::before{content:"";position:absolute;left:10%;right:10%;top:23px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 8px,transparent 8px 15px)} .co-next3 li{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;text-align:center} .co-next3 i{display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;border-radius:50%;background:var(--st-base);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)} .co-next3 .ic{width:22px;height:22px;color:#fff} .co-next3 b{font-size:16px;font-weight:600;line-height:1.25;color:#fff} .co-next3 small{font-size:14px;line-height:1.35;color:var(--on-2)} .co-next3 .co-n-ok i{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 10px 24px -8px rgba(159,176,255,.8)} .co-next3 .co-n-ok .ic{color:var(--cobalt);stroke-width:3} @container (max-width:560px){ .co-next3{grid-template-columns:minmax(0,1fr);gap:12px} .co-next3::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.35) 0 8px,transparent 8px 15px)} .co-next3 li{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;justify-items:start;column-gap:14px;row-gap:0;text-align:left} .co-next3 i{grid-row:1/3;margin:0} .co-next3 b{align-self:end} } /* desktop: the lit order card beside the form already shows „Днес 0 €“, the first payment and the monthly sum */ @media (min-width:761px){.co-money{display:none}} .co-err{margin-top:16px;padding:12px 16px;border-radius:14px;background:rgba(92,55,95,.45);box-shadow:inset 0 0 0 1.5px #FFB9AB;font-size:16px;font-weight:500;color:#FFE1DA} .co-priv{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;color:var(--on-2)} .co-priv .ic{width:18px;height:18px;opacity:.85} .co-alt{margin-top:10px;font-size:16px} .co-alt a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px} .co-alt a:hover{text-decoration-color:#fff} @container (max-width:520px){.co-rev>div{grid-template-columns:minmax(0,1fr) auto}.co-rev dt{grid-column:1/-1}} /* ---------- ORDER SUMMARY: the lit white card ---------- */ .co-sum{position:sticky;top:calc(var(--co-hdr) + 20px);display:flex;flex-direction:column;max-height:calc(100vh - var(--co-hdr) - 40px); border-radius:28px;background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08),0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.4)} @media (prefers-reduced-motion:no-preference){ html.js .co-sum{opacity:0} html.js .co-scene.play .co-sum{animation:coIn 1s var(--ease) .35s both} } .co-sum :focus-visible{outline-color:var(--cobalt)} .co-rc{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 26px 16px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} .co-rc-grab,.co-rc-x,.co-scrim{display:none} .co-rc-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .co-rc-t{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .co-rc-hero{display:flex;align-items:center;gap:14px;margin-top:6px;padding-bottom:14px;border-bottom:1.5px dashed var(--line-2)} .co-sstk{width:52px;height:72px;flex:none;overflow:visible;filter:drop-shadow(0 12px 14px rgba(35,53,255,.25))} .co-sstk g{transition:opacity .45s var(--ease),translate .6s cubic-bezier(.3,1.35,.5,1)} .co-sstk[data-n="2"] g[data-i="2"],.co-sstk[data-n="2"] g[data-i="3"],.co-sstk[data-n="2"] g[data-i="4"],.co-sstk[data-n="2"] g[data-i="5"], .co-sstk[data-n="4"] g[data-i="4"],.co-sstk[data-n="4"] g[data-i="5"]{opacity:0;translate:0 -18px} .co-sstk .co-acc{opacity:0;translate:0 calc(5.5px - var(--n) * 10px - 18px)} .co-sstk.acc .co-acc{opacity:1;translate:0 calc(5.5px - var(--n) * 10px)} .co-rc-who{min-width:0} .co-rc-plan{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px} .co-rc-plan b{font-size:28px;font-weight:600;letter-spacing:-.035em;line-height:1.1} .co-chip{padding:6px 12px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font-size:14px;font-weight:600;white-space:nowrap} .co-rc-term{margin-top:4px;font-size:15px;color:var(--muted)} /* „your name on the site“ */ .co-web{margin-top:16px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),0 12px 28px -18px rgba(11,18,51,.4)} .co-web.in{animation:coWeb .6s var(--ease)} @keyframes coWeb{from{opacity:0;transform:translateY(10px) scale(.97)}} .co-web-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--mist);border-bottom:1px solid var(--line)} .co-web-bar i{width:9px;height:9px;border-radius:50%;background:#D5DAE8} .co-web-bar span{margin-left:10px;padding:3px 12px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.3;color:var(--muted);max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .co-web-body{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px;background:linear-gradient(120deg,#fff 40%,var(--cobalt-tint))} .co-web-body b{font-size:19px;font-weight:600;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .co-web-body small{flex:none;font-size:13px;font-weight:600;color:var(--cobalt)} /* lines */ .co-lines{margin-top:8px} .co-lines li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)} .co-lines li:first-child{border-top:0} .co-ln{display:grid;min-width:0} .co-ln small{font-size:14px;color:var(--muted)} .co-lines b{font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .co-lines s{margin-right:6px;font-weight:500;color:var(--muted)} .co-lines li.in{animation:coLine .6s var(--ease)} .co-lines li.in::before{content:"";position:absolute;left:-30px;top:50%;width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--cobalt));animation:coRoad .6s var(--ease) forwards} .co-lines li.out{overflow:hidden;opacity:0;padding-block:0;border-top-color:transparent;transition:height .35s var(--ease),opacity .2s,padding .35s var(--ease)} @keyframes coLine{from{opacity:0;transform:translateX(-26px)}60%{opacity:1}to{opacity:1;transform:none}} @keyframes coRoad{from{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0);transform-origin:100% 50%}} /* totals */ .co-tot{display:grid;gap:2px;margin-top:4px;background:#fff} /* desktop: the totals stay in sight at the foot of the receipt while its lines scroll */ @media (min-width:761px){.co-tot{position:sticky;bottom:-16px;z-index:1;margin-inline:-26px;padding:6px 26px 16px;box-shadow:0 -14px 22px -18px rgba(11,18,51,.35)}} .co-tot>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0} .co-tot dt{font-size:16px;color:var(--muted)} .co-tot dd{margin:0;font-size:17px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums} .co-tot .co-tot-now{align-items:center;margin:4px 0 2px;padding:10px 16px;border-radius:16px;background:var(--mist)} .co-tot-now dt{font-weight:600;color:var(--ink)} .co-tot-now dd{display:grid;justify-items:end} .co-tot-now dd b{font-size:22px;letter-spacing:-.02em} .co-tot .co-tot-first{align-items:center;padding-top:10px} .co-tot-first dt{font-size:17px;font-weight:600;color:var(--ink)} .co-tot-first dd{font-size:24px;letter-spacing:-.02em} .co-tot-first dd b{font-size:clamp(38px,3.2vw,46px);font-weight:600;letter-spacing:-.05em;line-height:1} .co-num{position:relative;display:inline-block} .co-ul{position:absolute;left:-2px;bottom:-8px;width:calc(100% + 4px);height:8px;overflow:visible;fill:none;stroke:var(--cobalt);stroke-width:3;stroke-linecap:round;pointer-events:none} .co-ul path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0} .co-ul.go path{animation:coDraw .7s cubic-bezier(.45,0,.2,1)} @keyframes coDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .co-tot .co-tot-save{margin-top:4px;padding:10px 14px;border-radius:14px;background:var(--cobalt-tint)} .co-tot-save dt,.co-tot-save dd{color:var(--cobalt);font-weight:600} /* the one honest upsell: monthly → yearly */ .co-bump{margin-top:14px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,var(--cobalt-tint),#fff 80%);box-shadow:inset 0 0 0 1.5px rgba(35,53,255,.22)} .co-bump p{font-size:15px;line-height:1.5;color:var(--ink-2)} .co-bump b{color:var(--ink)} .co-bump s{color:var(--muted)} .co-bump-s{white-space:nowrap} .co-bump-b{display:inline-flex;align-items:center;min-height:46px;margin-top:10px;padding:0 20px;border:0;border-radius:999px;background:#fff;color:var(--cobalt);font:inherit;font-size:15px;font-weight:600;cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--cobalt);transition:background-color .25s,color .25s} .co-bump-b:hover{background:var(--cobalt);color:#fff} .co-trust{display:grid;gap:2px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)} .co-trust li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:15px;color:var(--ink-2)} .co-trust .ic{width:18px;height:18px;color:var(--cobalt)} .co-nojs{margin-top:12px;font-size:15px;color:var(--muted)} /* the action */ .co-cta{flex:none;padding:14px 26px 18px;border-top:1px solid var(--line);background:#fff} .co-mini{display:none} .co-go{width:100%} .co-go[aria-busy="true"]{opacity:.8;cursor:progress} .co-cta-note{margin-top:10px;font-size:15px;line-height:1.45;text-align:center;color:var(--ink-2);text-wrap:balance} /* desktop screens up to ~980px tall: a compact receipt, so the whole card (incl. „Сменете на годишно“ and the trust list) fits without inner scrolling at 1440×900 */ @media (min-width:761px) and (max-height:980px){ .co-sum{top:calc(var(--co-hdr) + 14px);max-height:calc(100vh - var(--co-hdr) - 28px)} .co-rc{padding:16px 24px 10px} .co-rc-hero{margin-top:2px;padding-bottom:10px;gap:12px} .co-sstk{width:40px;height:54px} .co-rc-plan b{font-size:24px} .co-rc-term{margin-top:2px;font-size:14px} .co-lines{margin-top:2px} .co-lines li{padding:7px 0} .co-tot{gap:0} .co-tot{padding-bottom:10px} .co-tot>div{padding:3px 0} .co-tot .co-tot-now{margin:2px 0;padding:7px 14px} .co-tot-now dd b{font-size:20px} .co-tot .co-tot-first{padding-top:6px} .co-tot-first dd b{font-size:36px} .co-tot .co-tot-save{margin-top:2px;padding:7px 14px} .co-bump{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 10px 10px 16px} .co-bump p{flex:1;min-width:0;font-size:14px;line-height:1.45} .co-bump-b{flex:none;min-height:44px;margin-top:0;padding:0 16px;font-size:14px} .co-trust{gap:0;margin-top:10px;padding-top:8px} .co-trust li{padding:3px 0;font-size:14px;line-height:1.35} .co-trust .ic{flex:none} .co-cta{padding:12px 24px 14px} .co-cta-note{margin-top:8px;font-size:14px} } /* ---------- AFTER SUBMIT ---------- */ .co-done{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3vw,40px);align-items:start} .co-done .co-ticket{position:relative;overflow:hidden;border:0;color:var(--ink)} .co-shop{position:relative;height:clamp(240px,24vw,320px);background:#070C3E;overflow:hidden} .co-shop svg{position:absolute;inset:0;width:100%;height:100%;display:block} .co-shop .sq{transform-box:fill-box;transform-origin:50% 50%} .co-shop .sq-down{transform-origin:50% 100%} html.js .play .co-shop .co-sroad{animation-duration:1.3s} .co-tk-body{position:relative;padding:28px 30px 30px} .co-tk-body::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 10px,transparent 10px 18px)} .co-ticket::before,.co-ticket::after{content:"";position:absolute;z-index:2;top:calc(clamp(240px,24vw,320px) - 14px);width:28px;height:28px;border-radius:50%;background:var(--st-base)} .co-ticket::before{left:-14px} .co-ticket::after{right:-14px} .co-tk-body .co-tk-k{margin:0;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .co-tk-body .co-tk-no{margin-top:4px;font-size:clamp(32px,3vw,42px);font-weight:600;letter-spacing:.01em;line-height:1.1;color:var(--cobalt);font-variant-numeric:tabular-nums} .co-done-t{margin-top:16px;font-size:clamp(26px,2.4vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.03em;outline:none} .co-tk-body>p{margin-top:10px;font-size:17px;line-height:1.55;color:var(--ink-2)} .co-done[data-mode="api"] .only-mail,.co-done:not([data-mode="api"]) .only-api{display:none!important} .co-tk-sum{display:grid;margin-top:18px;border-top:1px solid var(--line)} .co-tk-sum>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)} .co-tk-sum dt{font-size:15px;color:var(--muted)} .co-tk-sum dd{margin:0;font-size:16px;font-weight:600;text-align:right} .co-mail{display:grid;justify-items:start;gap:12px;margin-top:20px} .co-mail p{font-size:15px;color:var(--ink-2)} .co-mail a:not(.btn){color:var(--cobalt);font-weight:600;text-decoration:underline;text-underline-offset:3px} .co-ticket .co-link{color:var(--cobalt);text-decoration-color:rgba(35,53,255,.4);min-height:44px} .co-ticket :focus-visible{outline-color:var(--cobalt)} .co-mail-text{width:100%;padding:12px 14px;border:0;border-radius:14px;background:var(--mist);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font:inherit;font-size:15px;line-height:1.5;resize:vertical} .co-after{padding:clamp(24px,2.6vw,34px)} .co-after-t{font-size:clamp(24px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15} .co-tl{position:relative;display:grid;gap:18px;margin-top:22px} .co-tl::before{content:"";position:absolute;left:10px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.4) 0 8px,transparent 8px 16px)} .co-tl li{position:relative;display:grid;gap:2px;padding-left:40px} .co-tl li::before{content:"";position:absolute;left:3px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--st-base);box-shadow:inset 0 0 0 3px #fff} .co-tl li:first-child::before{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18)} .co-tl b{font-size:18px;font-weight:600;color:#fff} .co-tl span{font-size:16px;line-height:1.5;color:var(--on-2)} .co-after-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} /* ---------- footer ---------- */ .co-ftr{position:relative;padding:0 0 36px;font-size:15px;color:var(--on-2)} .co-ftr-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 28px;padding-top:20px;border-top:1px solid var(--hair)} .co-ftr a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:600} .co-ftr a:hover{color:#B9C2FF} /* ---------- tablets: two columns, the road as a strip under the header ---------- */ .co-road{display:none} @media (max-width:1040px){ .co-head{padding-left:0} .co-grid{grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:24px} .co-steps{padding-left:0} .co-rail{display:none} .co-stop{position:static;width:34px;height:34px;flex:none} .co-lg{margin-bottom:16px} .co-sum{top:calc(var(--co-hdr) + 72px);max-height:calc(100vh - var(--co-hdr) - 92px)} .co-rc{padding:22px 22px 14px} .co-cta{padding:14px 22px 18px} .co-rc-plan b{font-size:26px} html:has(body.co-page){scroll-padding-top:calc(var(--co-hdr) + 76px)} .co-road{display:block;position:sticky;top:var(--co-hdr);z-index:40;height:60px;margin:0 calc(-1 * var(--gut)) 18px;padding:0 var(--gut); background:color-mix(in srgb,var(--st-base) 70%,rgba(4,6,26,.86));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)} .co-road ol{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:100%} .co-road ol::before{content:"";position:absolute;left:10%;right:10%;top:20px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 8px,transparent 8px 15px)} .co-road-fill{position:absolute;top:20px;left:calc(var(--gut) + (100% - 2 * var(--gut)) * .1);height:3px;margin-top:-1.5px;border-radius:3px; width:calc((100% - 2 * var(--gut)) * .8 * var(--rp,0));background:linear-gradient(90deg,#9FB0FF,#fff);box-shadow:0 0 10px rgba(159,176,255,.7);transition:width .8s var(--ease)} .co-road a{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:6px;height:100%;padding-top:13px;font-size:13px;font-weight:500;color:var(--on-2)} .co-road a i{width:14px;height:14px;border-radius:50%;background:var(--st-base);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);transition:background-color .35s,box-shadow .35s,transform .4s var(--ease)} .co-road a.done i{background:#fff;box-shadow:none} .co-road a.cur i{background:var(--cobalt);box-shadow:inset 0 0 0 2px #fff,0 0 0 5px rgba(35,53,255,.4);transform:scale(1.15)} .co-road a.cur span{color:#fff;font-weight:600} .co-done{grid-template-columns:1fr} } /* ---------- phones: one column, a bottom bar with the total and the yellow, the receipt as a sheet ---------- */ @media (max-width:760px){ html:has(body.co-page){--co-hdr:62px} .co-page{padding-bottom:calc(88px + env(safe-area-inset-bottom))} .co-hdr-in{gap:12px} .co-brand .logo{height:30px} .co-hdr-t{padding-left:12px;font-size:16px} .co-back{min-height:44px;margin-left:auto;padding:0 16px 0 12px;font-size:15px} .co-back-l{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .co-scene{padding-block:26px 56px} .co-title{font-size:clamp(34px,10vw,46px)} .co-grid{grid-template-columns:1fr} .co-step{padding:24px 18px 22px;border-radius:24px} .co-skip{right:18px} .co-sum{position:static;display:block;max-height:none;background:none;box-shadow:none;border-radius:0;overflow:visible;color:var(--ink)} html.js .co-sum{opacity:1;animation:none!important} /* the bar */ .co-cta{position:fixed;left:0;right:0;bottom:0;z-index:72;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:0;color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),color-mix(in srgb,var(--st-base) 60%,rgba(4,6,26,.92)); -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -20px 40px -20px rgba(0,0,0,.7); transition:transform .35s var(--ease)} .co-cta :focus-visible{outline-color:#fff} html.co-kb .co-cta{transform:translateY(115%)} .co-mini{display:grid;gap:2px;justify-items:start;min-width:0;min-height:52px;padding:4px 0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer} .co-mini-k{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;color:var(--on-2)} .co-mini-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px} .co-mini-v b{font-size:21px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .co-mini-v small{font-size:13px;color:var(--on-2)} .co-mini::after{content:"";position:absolute;left:50%;top:6px;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:rgba(255,255,255,.3)} .co-go{width:auto;min-height:54px;padding:0 20px;font-size:16px} .co-go .ic{display:none} .co-cta-note{display:none} /* the sheet */ .co-rc{position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:86vh;max-height:86dvh;overflow:auto;padding:12px 20px calc(96px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0;background:#fff;color:var(--ink);box-shadow:0 -30px 60px -20px rgba(0,0,0,.6); transform:translateY(105%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s} html.co-open .co-rc{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s} .co-rc-grab{display:block;width:44px;height:5px;margin:0 auto 12px;border-radius:5px;background:var(--line-2)} .co-rc-x{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 16px;border:0;border-radius:999px;background:var(--mist);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer} .co-rc-x .ic{width:18px;height:18px} .co-scrim{display:block;position:fixed;inset:0;z-index:70;background:rgba(2,4,22,.6);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s} html.co-open .co-scrim{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s} html.co-sent .co-cta{display:none} .co-tk-body{padding:24px 20px 24px} .co-after{padding:24px 20px} .co-after-act .btn{flex:1 1 100%} } @media (max-width:420px){.co-hdr-t{display:none}} @media (max-width:900px){.co-hdr-help{display:none}.co-back{margin-left:auto}} @media (prefers-reduced-motion:reduce){ .co-lines li.in,.co-web.in,.co-ul.go path{animation:none} .co-year i,.co-sstk g,.co-rail b,.co-road-fill,.co-rc,.co-cta,.co-scrim{transition:none} }