/* ========================================================================== kc-inner.css — общий слой внутренних страниц (новости, акция, статья). Собран из web/export/index.html: блоки «Reveal animations» и «AI FAB / Assistant modal». Главная страница этот файл НЕ подключает — она остаётся самодостаточной, чтобы её перевыгрузка из билдера ничего здесь не ломала. ========================================================================== */ /* ============ Reveal animations ============ */ /* Shared easing — same curve the cascade already used, now applied everywhere for a consistent, product-grade feel. --rv-ease/--rv-dur are tunable knobs. "Lively" preset: a touch longer, a touch more travel, with a soft blur and a more pronounced stagger so blocks read clearly as they enter the viewport. */ :root{ --rv-ease: cubic-bezier(.22,.61,.36,1); --rv-dur: .8s; /* base entry duration */ --rv-shift: 40px; /* base vertical travel */ --rv-blur: 8px; /* entry blur, cleared on .is-in */ --rv-stagger: 90ms; /* per-child cascade delay */ } .reveal{ opacity:0; transform: translateY(var(--rv-shift)); filter: blur(var(--rv-blur)); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease), filter var(--rv-dur) var(--rv-ease); will-change: opacity, transform } .reveal.is-in{ opacity:1; transform:none; filter:none } /* Variants — only change the *character* of entry, not the design. */ .reveal--scale{ transform: translateY(calc(var(--rv-shift) * .5)) scale(.94) } /* big media / case photos */ .reveal--scale.is-in{ transform:none } .reveal--left{ transform: translateX(calc(var(--rv-shift) * -1.2)) } /* left column of 2-col blocks */ .reveal--right{ transform: translateX(calc(var(--rv-shift) * 1.2)) } /* right column */ .reveal--left.is-in, .reveal--right.is-in{ transform:none } .reveal--fade{ transform:none } /* pure fade (+blur), no shift */ .reveal--blur{ transform:none; filter: blur(14px) } /* stronger blur-in, no shift */ .reveal--blur.is-in{ filter:none } /* Cascade: children stagger in. Delay is driven by --i (set in JS) so it works for ANY number of children; nth-child below is a no-JS fallback up to 12. */ .reveal-cascade > *{ opacity:0; transform: translateY(var(--rv-shift)); filter: blur(var(--rv-blur)); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease), filter var(--rv-dur) var(--rv-ease) } .reveal-cascade.is-in > *{ opacity:1; transform:none; filter:none; transition-delay: calc(var(--i, 0) * var(--rv-stagger)) } .reveal-cascade.is-in > *:nth-child(1){ --i:0 } .reveal-cascade.is-in > *:nth-child(2){ --i:1 } .reveal-cascade.is-in > *:nth-child(3){ --i:2 } .reveal-cascade.is-in > *:nth-child(4){ --i:3 } .reveal-cascade.is-in > *:nth-child(5){ --i:4 } .reveal-cascade.is-in > *:nth-child(6){ --i:5 } .reveal-cascade.is-in > *:nth-child(7){ --i:6 } .reveal-cascade.is-in > *:nth-child(8){ --i:7 } .reveal-cascade.is-in > *:nth-child(9){ --i:8 } .reveal-cascade.is-in > *:nth-child(10){ --i:9 } .reveal-cascade.is-in > *:nth-child(11){ --i:10 } .reveal-cascade.is-in > *:nth-child(12){ --i:11 } /* Hero load-in: first screen animates on page load, not on scroll, so the above-the-fold frame is never empty. Driven by .is-loaded on . --hi (set in JS) sequences the inner pieces: title → tag → stats. */ .hero-load{ opacity:0; transform: translateY(26px); filter: blur(6px); transition: opacity .85s var(--rv-ease), transform .85s var(--rv-ease), filter .85s var(--rv-ease); transition-delay: calc(var(--hi, 0) * 140ms) } body.is-loaded .hero-load{ opacity:1; transform:none; filter:none } /* Stagger the words of the H1 itself for a stronger first impression. */ .hero-content h1 .hl-word{ display:inline-block; opacity:0; transform: translateY(.5em) rotate(2deg); transition: opacity .7s var(--rv-ease), transform .7s var(--rv-ease); transition-delay: calc(.15s + var(--w, 0) * 90ms) } body.is-loaded .hero-content h1 .hl-word{ opacity:1; transform:none } /* Hero stat cards — "glass develops": each tile floats up out of blur with a subtle scale, staggered left→right, then a light sheen sweeps along the top edge line. The cascade base (opacity/translateY/blur) comes from .reveal-cascade; here we add the scale and a longer, glassier feel. */ .hero-stats.reveal-cascade > .hs{ opacity:0; transform: translateY(34px) scale(.94); filter: blur(14px); transition: opacity .85s var(--rv-ease), transform .85s var(--rv-ease), filter .85s var(--rv-ease); /* Stagger lives HERE: this rule's `transition` shorthand resets transition-delay, so it must be re-declared or the cards would all appear at once. --hs-stagger is a bit larger than the generic cascade so the one-by-one rhythm is obvious. --hs-start offsets the whole group so the cards arrive AFTER the hero text. */ transition-delay: calc(var(--hs-start, .35s) + var(--i, 0) * var(--hs-stagger, 160ms)); } .hero-stats.reveal-cascade.is-in > .hs{ opacity:1; transform:none; filter:none; transition-delay: calc(var(--hs-start, .35s) + var(--i, 0) * var(--hs-stagger, 160ms)); } /* Sheen: a bright, narrow highlight sweeps once along the top edge on reveal. Lives on .hs::after (a dedicated layer) so the static hairline (.hs::before) is untouched. Hidden by default; only runs when the cascade reveals. */ .hs::after{ content:""; position:absolute; top:0; left:0; width:40%; height:2px; background: linear-gradient(90deg, transparent, rgba(120,200,255,0.9), rgba(255,255,255,0.95), transparent); transform: translateX(-160%); opacity:0; pointer-events:none; } .hero-stats.reveal-cascade.is-in > .hs::after{ animation: hsSheen 1.05s var(--rv-ease) both; /* Sheen sweeps just as each card settles in — same start offset + stagger as the card reveal above, plus a small lead so the highlight reads on the glass. */ animation-delay: calc(var(--hs-start, .35s) + .45s + var(--i, 0) * var(--hs-stagger, 160ms)); } @keyframes hsSheen{ 0% { transform: translateX(-160%); opacity:0 } 30% { opacity:1 } 100% { transform: translateX(360%); opacity:0 } } /* Parallax: backgrounds drift slower than scroll. --py is updated in JS from the element's position; translateZ(0) keeps it on the compositor. */ .parallax{ will-change: transform; transform: translate3d(0, var(--py, 0px), 0) } @media (prefers-reduced-motion: reduce){ .reveal, .reveal--scale, .reveal--left, .reveal--right, .reveal--fade, .reveal--blur, .reveal-cascade > *, .hero-load, .hero-content h1 .hl-word, .hero-stats.reveal-cascade > .hs{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } .hs::after{ display:none !important } /* no sheen sweep */ .parallax{ transform:none !important } } /* Названия разделов (eyebrow) — скрыты */ .section-head .t-eyebrow{ display:none } /* ============ AI FAB \u2014 \u043a\u0440\u0443\u0433\u043b\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0421\u0442\u0435\u043f\u0430\u043d\u044b\u0447\u0430 ============ */ /* ============ AI FAB — кнопка «ИИ-консультант» с морфинг-иконкой ============ */ .ai-fab{ position:fixed; right:28px; bottom:28px; z-index:60; width:66px; height:66px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; overflow:visible; border:0; padding:0; /* Базовый «жидкий» фон — синие + голубые блобы, медленно дышат */ background: radial-gradient(circle at 30% 28%, #6FD3FF 0%, transparent 55%), radial-gradient(circle at 72% 70%, #1E7AE6 0%, transparent 60%), radial-gradient(circle at 50% 50%, #0A2A52 0%, #051a36 100%); background-size: 180% 180%, 200% 200%, 100% 100%; box-shadow: 0 12px 28px -8px rgba(0,40,80,.55), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 16px rgba(0,30,70,.4); animation: stpBlobShift 7s ease-in-out infinite; transition: transform .2s ease, filter .2s ease; } /* Вращающееся «сияние» по периметру — основа Siri-свечения */ .ai-fab::before{ content:""; position:absolute; inset:-6px; border-radius:50%; background: conic-gradient(from 0deg, #00E5FF 0%, #3FA9FF 18%, #1E5BC6 35%, transparent 50%, #6FD3FF 65%, #2A8FFF 82%, #00E5FF 100%); filter: blur(10px); opacity:.85; z-index:-1; animation: stpSpin 4.5s linear infinite; pointer-events:none; } /* Внешний мягкий ореол — дышит и пульсирует */ .ai-fab::after{ content:""; position:absolute; inset:-18px; border-radius:50%; background: radial-gradient(circle, rgba(64,170,255,.55) 0%, rgba(0,120,220,.25) 35%, transparent 65%); filter: blur(14px); z-index:-2; pointer-events:none; animation: stpHaloPulse 3.2s ease-in-out infinite; } .ai-fab > *{ position:relative; z-index:1 } .ai-fab:hover{ transform: translateY(-2px) scale(1.05); filter: brightness(1.08) } .ai-fab:hover::after{ animation-duration: 1.8s } .ai-fab:hover::before{ animation-duration: 2.5s; opacity:1 } .ai-fab:active{ transform: translateY(0) scale(.97) } @keyframes stpSpin{ to{ transform: rotate(360deg) } } @keyframes stpHaloPulse{ 0%,100%{ transform: scale(1); opacity:.7 } 50%{ transform: scale(1.18); opacity:1 } } @keyframes stpBlobShift{ 0%,100%{ background-position: 0% 0%, 100% 100%, 0 0 } 50%{ background-position: 100% 60%, 0% 30%, 0 0 } } .ai-fab .fab-label{ display:none } .ai-fab .fab-ico{ width:32px; height:32px; flex-shrink:0; display:inline-flex } .ai-fab .fab-ico svg{ width:32px; height:32px; overflow:visible } .ai-fab .fab-ico path:first-child{ will-change:d; fill:#fff; animation: fab-morph 2s ease-in-out infinite } .ai-fab .fab-ico path:not(:first-child){ display:none } @keyframes fab-morph{ 0%{ d: path("M10,20 C10,17.24 11.12,14.74 12.93,12.93 L12.93,12.93 C14.74,11.12 17.24,10 20,10 L80,10 C82.76,10 85.26,11.12 87.07,12.93 L87.07,12.93 C88.88,14.74 90,17.24 90,20 L90,80 C90,82.76 88.88,85.26 87.07,87.07 L87.07,87.07 C85.26,88.88 82.76,90 80,90 L20,90 C17.24,90 14.74,88.88 12.93,87.07 L12.93,87.07 C11.12,85.26 10,82.76 10,80Z M68,50 C68,45.02 65.98,40.52 62.72,37.27 L62.72,37.27 C59.47,34.01 54.97,32 50,32 L50,32 C45.02,32 40.52,34.01 37.27,37.27 L37.27,37.27 C34.01,40.52 32,45.02 32,50 L32,50 C32,54.97 34.01,59.47 37.27,62.72 L37.27,62.72 C40.52,65.98 45.02,68 50,68 L50,68 C54.97,68 59.47,65.98 62.72,62.72 L62.72,62.72 C65.98,59.47 68,54.97 68,50Z") } 10%{ d: path("M10,20 C10,17.24 11.12,14.74 12.93,12.93 L12.93,12.93 C14.74,11.12 17.24,10 20,10 L80,10 C82.76,10 85.26,11.12 87.07,12.93 L87.07,12.93 C88.88,14.74 90,17.24 90,20 L90,80 C90,82.76 88.88,85.26 87.07,87.07 L87.07,87.07 C85.26,88.88 82.76,90 80,90 L20,90 C17.24,90 14.74,88.88 12.93,87.07 L12.93,87.07 C11.12,85.26 10,82.76 10,80Z M68,50 C68,45.02 65.98,40.52 62.72,37.27 L62.72,37.27 C59.47,34.01 54.97,32 50,32 L50,32 C45.02,32 40.52,34.01 37.27,37.27 L37.27,37.27 C34.01,40.52 32,45.02 32,50 L32,50 C32,54.97 34.01,59.47 37.27,62.72 L37.27,62.72 C40.52,65.98 45.02,68 50,68 L50,68 C54.97,68 59.47,65.98 62.72,62.72 L62.72,62.72 C65.98,59.47 68,54.97 68,50Z") } 33%{ d: path("M10,37.57 C10,34.92 11.05,32.37 12.92,30.5 L30.5,12.92 C32.37,11.05 34.92,10 37.57,10 L62.42,10 C65.07,10 67.62,11.05 69.49,12.92 L87.07,30.5 C88.94,32.37 90,34.92 90,37.57 L90,62.42 C90,65.07 88.94,67.62 87.07,69.49 L69.49,87.07 C67.62,88.94 65.07,90 62.42,90 L37.57,90 C34.92,90 32.37,88.94 30.5,87.07 L12.92,69.49 C11.05,67.62 10,65.07 10,62.42Z M68,50 C68,49.12 67.66,48.24 66.99,47.57 L52.42,33 C51.75,32.33 50.87,32 50,32 L50,32 C49.12,32 48.24,32.33 47.57,33 L33,47.57 C32.33,48.24 32,49.12 32,50 L32,50 C32,50.87 32.33,51.75 33,52.42 L47.57,66.99 C48.24,67.66 49.12,68 50,68 L50,68 C50.87,68 51.75,67.66 52.42,66.99 L66.99,52.42 C67.66,51.75 68,50.87 68,50Z") } 43%{ d: path("M10,37.57 C10,34.92 11.05,32.37 12.92,30.5 L30.5,12.92 C32.37,11.05 34.92,10 37.57,10 L62.42,10 C65.07,10 67.62,11.05 69.49,12.92 L87.07,30.5 C88.94,32.37 90,34.92 90,37.57 L90,62.42 C90,65.07 88.94,67.62 87.07,69.49 L69.49,87.07 C67.62,88.94 65.07,90 62.42,90 L37.57,90 C34.92,90 32.37,88.94 30.5,87.07 L12.92,69.49 C11.05,67.62 10,65.07 10,62.42Z M68,50 C68,49.12 67.66,48.24 66.99,47.57 L52.42,33 C51.75,32.33 50.87,32 50,32 L50,32 C49.12,32 48.24,32.33 47.57,33 L33,47.57 C32.33,48.24 32,49.12 32,50 L32,50 C32,50.87 32.33,51.75 33,52.42 L47.57,66.99 C48.24,67.66 49.12,68 50,68 L50,68 C50.87,68 51.75,67.66 52.42,66.99 L66.99,52.42 C67.66,51.75 68,50.87 68,50Z") } 66%{ d: path("M10,50 C10,38.95 14.48,28.95 21.72,21.72 L21.72,21.72 C28.95,14.48 38.95,10 50,10 L50,10 C61.05,10 71.05,14.48 78.28,21.72 L78.28,21.72 C85.52,28.95 90,38.95 90,50 L90,50 C90,61.05 85.52,71.05 78.28,78.28 L78.28,78.28 C71.05,85.52 61.05,90 50,90 L50,90 C38.95,90 28.95,85.52 21.72,78.28 L21.72,78.28 C14.48,71.05 10,61.05 10,50Z M63.72,39.7 C63.72,38.75 63.34,37.9 62.71,37.28 L62.71,37.28 C62.09,36.65 61.24,36.27 60.29,36.27 L39.7,36.27 C38.75,36.27 37.9,36.65 37.28,37.28 L37.28,37.28 C36.65,37.9 36.27,38.75 36.27,39.7 L36.27,60.29 C36.27,61.24 36.65,62.09 37.28,62.71 L37.28,62.71 C37.9,63.34 38.75,63.72 39.7,63.72 L60.29,63.72 C61.24,63.72 62.09,63.34 62.71,62.71 L62.71,62.71 C63.34,62.09 63.72,61.24 63.72,60.29Z") } 76%{ d: path("M10,50 C10,38.95 14.48,28.95 21.72,21.72 L21.72,21.72 C28.95,14.48 38.95,10 50,10 L50,10 C61.05,10 71.05,14.48 78.28,21.72 L78.28,21.72 C85.52,28.95 90,38.95 90,50 L90,50 C90,61.05 85.52,71.05 78.28,78.28 L78.28,78.28 C71.05,85.52 61.05,90 50,90 L50,90 C38.95,90 28.95,85.52 21.72,78.28 L21.72,78.28 C14.48,71.05 10,61.05 10,50Z M63.72,39.7 C63.72,38.75 63.34,37.9 62.71,37.28 L62.71,37.28 C62.09,36.65 61.24,36.27 60.29,36.27 L39.7,36.27 C38.75,36.27 37.9,36.65 37.28,37.28 L37.28,37.28 C36.65,37.9 36.27,38.75 36.27,39.7 L36.27,60.29 C36.27,61.24 36.65,62.09 37.28,62.71 L37.28,62.71 C37.9,63.34 38.75,63.72 39.7,63.72 L60.29,63.72 C61.24,63.72 62.09,63.34 62.71,62.71 L62.71,62.71 C63.34,62.09 63.72,61.24 63.72,60.29Z") } 100%{ d: path("M10,20 C10,17.24 11.12,14.74 12.93,12.93 L12.93,12.93 C14.74,11.12 17.24,10 20,10 L80,10 C82.76,10 85.26,11.12 87.07,12.93 L87.07,12.93 C88.88,14.74 90,17.24 90,20 L90,80 C90,82.76 88.88,85.26 87.07,87.07 L87.07,87.07 C85.26,88.88 82.76,90 80,90 L20,90 C17.24,90 14.74,88.88 12.93,87.07 L12.93,87.07 C11.12,85.26 10,82.76 10,80Z M68,50 C68,45.02 65.98,40.52 62.72,37.27 L62.72,37.27 C59.47,34.01 54.97,32 50,32 L50,32 C45.02,32 40.52,34.01 37.27,37.27 L37.27,37.27 C34.01,40.52 32,45.02 32,50 L32,50 C32,54.97 34.01,59.47 37.27,62.72 L37.27,62.72 C40.52,65.98 45.02,68 50,68 L50,68 C54.97,68 59.47,65.98 62.72,62.72 L62.72,62.72 C65.98,59.47 68,54.97 68,50Z") } } @media (prefers-reduced-motion: reduce){ .ai-fab, .ai-fab::before, .ai-fab::after{ animation:none !important } .ai-fab .fab-ico path{ animation:none !important } } /* ============================================================ АННА — ИИ-консультант (минимал, светлая тема, полэкрана справа) ============================================================ */ :root{ --stp-bg: #FFFFFF; --stp-bg-soft: #F7F7F8; --stp-line: #ECECF1; --stp-text: #1B1D22; --stp-text-2: #6B6F76; --stp-text-3: #9CA0A8; --stp-accent: var(--acc); --stp-bubble-me: #F2F4F7; --stp-orange: #E5482E; } /* Backdrop */ .ai-modal-backdrop{ position:fixed; inset:0; z-index:70; background:rgba(15,20,30,.32); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition: opacity .25s ease; } .ai-modal-backdrop.is-open{ opacity:1; pointer-events:auto } /* Panel — плавающая карта на полэкрана со скруглениями */ .ai-modal{ position:fixed; right:24px; top:24px; bottom:24px; width:min(560px, 50vw); max-width:calc(100vw - 48px); z-index:71; background: var(--stp-bg); color: var(--stp-text); display:flex; flex-direction:column; border-radius:24px; border:1px solid var(--stp-line); box-shadow:0 30px 80px -24px rgba(15,20,30,.5); transform:translateX(16px); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .3s cubic-bezier(.22,.61,.36,1); overflow:hidden; } .ai-modal.is-open{ transform:translateX(0); opacity:1; pointer-events:auto } @media (max-width: 900px){ .ai-modal{ inset:0; width:100vw; max-width:100vw; border-radius:0; border:0 } } /* Тёмная тема модального окна */ .ai-modal.theme-dark{ --stp-bg: #161A21; --stp-bg-soft: #1E232C; --stp-line: #2A303B; --stp-text: #ECEEF2; --stp-text-2: rgba(236,238,242,.66); --stp-text-3: rgba(236,238,242,.44); --stp-bubble-me: #272D38; } /* Header */ .ai-modal .stp-head{ flex-shrink:0; display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--stp-bg); } .ai-modal .stp-head .stp-avatar{ width:38px; height:38px; border-radius:50%; overflow:hidden; background: var(--stp-accent); display:flex; align-items:flex-end; justify-content:center; color:#fff; flex-shrink:0; } .ai-modal .stp-head .stp-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; } .ai-modal .stp-head .stp-meta{ flex:1; min-width:0 } .ai-modal .stp-head h3{ margin:0; font-family:var(--font); font-weight:600; font-size:15px; color:var(--stp-text); line-height:1.2; } .ai-modal .stp-head .stp-sub{ font-size:12px; color:var(--stp-text-3); margin-top:2px; display:flex; align-items:center; gap:6px; } .ai-modal .stp-head .stp-sub::before{ content:""; width:6px;height:6px;border-radius:50%; background:#22C55E; } .ai-modal .stp-head .stp-icon-btn{ width:32px;height:32px; border-radius:8px; background:transparent; border:0; color:var(--stp-text-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; } .ai-modal .stp-head .stp-icon-btn:hover{ background:var(--stp-bg-soft); color:var(--stp-text); } .ai-modal .stp-head .stp-icon-btn svg{width:16px;height:16px} /* Иконка переключателя темы */ .ai-modal #stpTheme .ic-sun{ display:none } .ai-modal #stpTheme .ic-moon{ display:block } .ai-modal.theme-dark #stpTheme .ic-sun{ display:block } .ai-modal.theme-dark #stpTheme .ic-moon{ display:none } /* Body */ .ai-modal .stp-body{ flex:1; min-height:0; overflow-y:auto; padding:20px 24px 32px; display:flex; flex-direction:column; gap:16px; scrollbar-width:thin; scrollbar-color: rgba(0,0,0,.12) transparent; background:var(--stp-bg); } .ai-modal .stp-body::-webkit-scrollbar{ width:6px } .ai-modal .stp-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:3px } .ai-modal:not(.has-msgs) .stp-body{ justify-content:center } .ai-modal.has-msgs .stp-input-zone{ margin-top:auto } .ai-modal .stp-msgs{ display:flex; flex-direction:column; gap:14px } .ai-modal .stp-msgs:empty{ display:none } .ai-modal .stp-input-zone{ display:flex; flex-direction:column; gap:18px; flex-shrink:0; position:relative; } /* Hero — маскот Анны слева + текст справа */ .ai-modal .stp-hero{ text-align:left; padding:16px 8px 12px; display:flex; flex-direction:row; align-items:center; gap:18px; justify-content:center; } .ai-modal .stp-hero-mascot{ width:132px; height:132px; flex-shrink:0; display:block; border-radius:50%; object-fit:cover; object-position:center top; background: #EAECEF; } .ai-modal.theme-dark .stp-hero-mascot{ background:#2A313D } /* Переключатель консультанта Анна ⇄ Сергей */ .ai-modal .stp-hero-ava{ position:relative; flex-shrink:0; } .ai-modal .stp-hero-switch{ position:absolute; left:-4px; bottom:-4px; width:40px; height:40px; border-radius:50%; border:3px solid var(--stp-bg); padding:0; background:var(--stp-accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.28); transition: transform .15s ease, filter .15s ease; } .ai-modal .stp-hero-switch:hover{ transform:scale(1.07); filter:brightness(1.06) } .ai-modal .stp-hero-switch:active{ transform:scale(.96) } .ai-modal .stp-hero-switch svg{ width:18px; height:18px; } @keyframes heroAvaSwap{ 0%{ transform:scale(.86); opacity:0; filter:blur(2px) } 55%{ transform:scale(1.05) } 100%{ transform:none; opacity:1; filter:none } } @keyframes heroTextSwap{ 0%{ transform:translateY(7px); opacity:0 } 100%{ transform:none; opacity:1 } } @keyframes heroSwitchSpin{ to{ transform:rotate(360deg) } } .ai-modal .stp-hero-ava.swap-anim > .stp-hero-mascot{ animation:heroAvaSwap .4s cubic-bezier(.34,1.4,.5,1) } .ai-modal .stp-hero-text.swap-anim{ animation:heroTextSwap .38s ease both } .ai-modal .stp-hero-switch.spin svg{ animation:heroSwitchSpin .45s ease } @media (prefers-reduced-motion: reduce){ .ai-modal .stp-hero-ava.swap-anim > .stp-hero-mascot, .ai-modal .stp-hero-text.swap-anim, .ai-modal .stp-hero-switch.spin svg{ animation:none !important } } .ai-modal .stp-hero-text{ display:flex; flex-direction:column; gap:8px; max-width:300px; } .ai-modal .stp-hero h2{ font-family:var(--font); font-weight:600; font-size:22px; letter-spacing:-.01em; color:var(--stp-text); margin:0; line-height:1.15; } .ai-modal .stp-hero p{ font-size:14px; line-height:1.5; color:var(--stp-text-2); margin:0; } /* Сообщения */ .ai-modal .stp-msg{ display:flex; max-width:92%; animation: stpMsgIn .2s ease; } @keyframes stpMsgIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } } .ai-modal .stp-msg.me{ align-self:flex-end } .ai-modal .stp-msg.bot{ align-self:flex-start; gap:10px; max-width:100% } .ai-modal .stp-msg.bot .stp-msg-avatar{ width:28px;height:28px; flex-shrink:0; border-radius:50%; overflow:hidden; background: var(--stp-accent); display:flex; align-items:flex-end; justify-content:center; color:#fff; margin-top:2px; } .ai-modal .stp-msg-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; } .ai-modal .stp-msg .stp-bubble{ padding:10px 14px; border-radius:18px; font-size:14.5px; line-height:1.5; word-wrap:break-word; color:var(--stp-text); } .ai-modal .stp-msg.bot .stp-bubble{ background:transparent; border:0; padding:4px 0; color:var(--stp-text); } .ai-modal .stp-msg.me .stp-bubble{ background: var(--stp-bubble-me); color: var(--stp-text); border:0; box-shadow:none; } .ai-modal .stp-msg .stp-bubble b{font-weight:600;color:inherit} .ai-modal .stp-msg .stp-attach-thumb{ width:140px; height:100px; border-radius:10px; object-fit:cover; display:block; margin-top:6px; border:1px solid var(--stp-line); } .ai-modal .stp-msg .stp-voice-pill{ display:inline-flex; align-items:center; gap:10px; background: var(--stp-bubble-me); border:0; padding:8px 14px 8px 10px; border-radius:999px; font-size:13px; color:var(--stp-text); } .ai-modal .stp-msg .stp-voice-pill svg{width:16px;height:16px} .ai-modal .stp-msg .stp-voice-bars{ display:inline-flex; gap:2px; align-items:center; height:14px; } .ai-modal .stp-msg .stp-voice-bars i{ display:block; width:2px; background: var(--stp-text-2); border-radius:1px; } /* Typing */ .ai-modal .stp-typing{ align-self:flex-start; display:flex; align-items:flex-start; gap:10px; } .ai-modal .stp-typing .stp-msg-avatar{ width:28px;height:28px; border-radius:50%; overflow:hidden; background: var(--stp-accent); display:flex; align-items:flex-end; justify-content:center; color:#fff; flex-shrink:0; margin-top:2px; } .ai-modal .stp-typing .dots{ background:transparent; border:0; padding:10px 0; display:inline-flex; gap:5px; } .ai-modal .stp-typing .dots i{ width:6px;height:6px;border-radius:50%; background: var(--stp-text-3); animation: stpDot 1.2s ease-in-out infinite; } .ai-modal .stp-typing .dots i:nth-child(2){ animation-delay:.15s } .ai-modal .stp-typing .dots i:nth-child(3){ animation-delay:.3s } @keyframes stpDot{ 0%,80%,100%{ transform:translateY(0); opacity:.35 } 40%{ transform:translateY(-4px); opacity:1 } } /* Плитки-специалисты — сетка 2×2 (две строки) */ .ai-modal .stp-tiles{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:0; } .ai-modal .stp-tile{ min-width:0; background:#F2F3F5; border:0; border-radius:16px; padding:13px 16px; display:flex; flex-direction:row; align-items:center; gap:11px; cursor:pointer; transition: background .15s, transform .15s; text-align:left; color:var(--stp-text); font-family:var(--font); } .ai-modal .stp-tile:hover{ background:#E9EBEE } .ai-modal.theme-dark .stp-tile{ background:#222833 } .ai-modal.theme-dark .stp-tile:hover{ background:#2A313D } .ai-modal.theme-dark .stp-icon-action:hover{ background:rgba(255,255,255,.08) } .ai-modal .stp-tile:active{ transform: translateY(1px) } .ai-modal .stp-tile .tile-ava{ width:46px;height:46px; flex-shrink:0; border-radius:50%; overflow:hidden; background: var(--stp-bg-soft); display:flex; align-items:flex-end; justify-content:center; } .ai-modal .stp-tile .tile-ava img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; } .ai-modal .stp-tile .tile-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; } .ai-modal .stp-tile .tile-name{ font-size:14px; font-weight:600; line-height:1.15; color:var(--stp-text); } .ai-modal .stp-tile .tile-role{ font-size:14px; font-weight:500; line-height:1.25; color:var(--stp-text); white-space:nowrap; } /* Инпут */ .ai-modal .stp-input-wrap{ position:relative; background: var(--stp-bg-soft); border:1px solid var(--stp-line); border-radius:24px; padding:6px 6px 6px 14px; display:flex; flex-direction:column; gap:4px; transition: border-color .15s, background .15s, box-shadow .15s; } .ai-modal .stp-input-wrap::after{ content:""; position:absolute; left:8%; right:8%; bottom:-22px; height:32px; border-radius:50%; background: radial-gradient(ellipse at center top, rgba(64,170,255,.28) 0%, rgba(120,180,255,.18) 35%, rgba(180,210,255,.08) 60%, transparent 100%); filter: blur(10px); pointer-events:none; z-index:-1; } .ai-modal .stp-input-wrap:hover{ border-color: rgba(63,155,224,.5); } .ai-modal .stp-input-wrap:focus-within{ border-color: #3f9be0; background: var(--stp-bg); box-shadow: 0 0 0 3px rgba(63,155,224,.18); } .ai-modal .stp-input-wrap:focus-within::after{ background: radial-gradient(ellipse at center top, rgba(64,170,255,.42) 0%, rgba(120,180,255,.25) 35%, rgba(180,210,255,.1) 60%, transparent 100%); } .ai-modal .stp-input-row{ display:flex; align-items:center; gap:8px } .ai-modal .stp-textarea{ flex:1; background:transparent; border:0; color: var(--stp-text); font-family:var(--font); font-size:15px; line-height:1.45; padding:10px 0; resize:none; outline:none; min-height:24px; max-height:140px; overflow-y:auto; } .ai-modal .stp-textarea::placeholder{ color: var(--stp-text-3) } .ai-modal .stp-actions{ display:flex; gap:2px; align-items:center; padding:2px 0; } .ai-modal .stp-icon-action{ width:34px;height:34px; border-radius:50%; background:transparent; border:0; color: var(--stp-text-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; flex-shrink:0; } .ai-modal .stp-icon-action:hover{ background: rgba(0,0,0,.05); color: var(--stp-text); } .ai-modal .stp-icon-action svg{width:18px;height:18px} .ai-modal .stp-mic.is-recording{ background:var(--stp-orange); color:#fff; animation: stpMicPulse 1.2s ease-in-out infinite; } @keyframes stpMicPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(229,72,46,.4) } 50% { box-shadow:0 0 0 6px rgba(229,72,46,0) } } .ai-modal .stp-send{ position:relative; width:36px;height:36px; border-radius:50%; border:0; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; background: #3f9be0; box-shadow: none; transition: transform .15s ease, filter .15s, opacity .15s; } .ai-modal .stp-send:hover{ transform:scale(1.06); filter: brightness(1.05); } .ai-modal .stp-send:active{ transform:scale(.96) } .ai-modal .stp-send:disabled{ opacity:.45; cursor:not-allowed; transform:none; filter: saturate(.6); box-shadow:none; } .ai-modal .stp-send svg{ width:18px;height:18px } /* Вложения */ .ai-modal .stp-attachments{ display:flex; gap:6px; flex-wrap:wrap; padding:4px 0 0; } .ai-modal .stp-attachments:empty{ display:none } .ai-modal .stp-att-chip{ position:relative; width:48px; height:48px; border-radius:8px; overflow:hidden; border:1px solid var(--stp-line); background: var(--stp-bg-soft); } .ai-modal .stp-att-chip img{ width:100%; height:100%; object-fit:cover } .ai-modal .stp-att-chip .att-remove{ position:absolute; top:2px; right:2px; width:16px;height:16px; border-radius:50%; background:rgba(0,0,0,.7); border:0; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .ai-modal .stp-att-chip .att-remove svg{ width:9px;height:9px } /* Оверлей записи */ .ai-modal .stp-rec-overlay{ display:none; align-items:center; gap:10px; background:rgba(229,72,46,.08); border:1px solid rgba(229,72,46,.2); border-radius:14px; padding:8px 12px; margin-bottom:8px; color: var(--stp-text); font-size:13px; } .ai-modal .stp-rec-overlay.is-active{ display:flex } .ai-modal .stp-rec-overlay .rec-dot{ width:8px;height:8px; border-radius:50%; background:var(--stp-orange); animation: stpRecDot 1s ease-in-out infinite; } @keyframes stpRecDot{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } } .ai-modal .stp-rec-overlay .rec-time{ font-variant-numeric:tabular-nums; color: var(--stp-text); font-weight:600; } .ai-modal .stp-rec-overlay .rec-cancel{ margin-left:auto; background:transparent; border:0; color: var(--stp-text-2); font-size:12px; cursor:pointer; padding:4px 8px; } .ai-modal .stp-rec-overlay .rec-cancel:hover{ color: var(--stp-text) } /* ========================================================================== Приведение шапки и подвала к главной странице. Выгрузка билдера пришла со своей, чуть иной версией общего «хрома»: шапка на 5px ниже, логотип на 2px меньше, из-за чего меню и кнопка магазина съезжали на 4px влево, у телефона не было колоночной раскладки, а иконки соцсетей в подвале были 44px вместо 52px. Здесь значения возвращены к тем, что заданы в index.html. Блок идёт последним в kc-inner.css, а сам файл подключается после инлайнового