/* Шрифт самохостится (#330). Файлы собираются `bash scripts/build-fonts.sh`, хеш в имени -- потому что Caddy отдаёт на них Cache-Control: immutable на год, и без хеша правка дошла бы до вернувшегося посетителя через год. Лендинг переехал с Inter на Manrope, которым набран кабинет: человек уходил с сайта в личный кабинет и попадал в другую типографику. Заодно Inter в 3.6 раза тяжелее (135.4 КБ против 37.6 КБ подмножествами). */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin.c271e50b.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-cyrillic.9a334b6d.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } body { font-family: 'Manrope', system-ui, sans-serif; background: #f8fafc; overflow-x: hidden; } /* Иконка вместо иконочного шрифта (#331). Размер задан в em, а не в пикселях, сознательно: шрифтом размером управлял font-size через утилиты Tailwind (text-xl, text-4xl, text-sm), и вся разметка уже написана в этих терминах. 1em сохраняет ровно это поведение -- иконка наследует кегль от родителя, и ни один из тридцати одного класса размера править не пришлось. fill: currentColor -- то же самое для цвета: иконка наследует цвет текста, как это делал глиф шрифта. Поэтому text-emerald-600 и group-hover:text-white на местах использования продолжают работать. */ .material-icon { width: 1em; height: 1em; fill: currentColor; display: inline-block; flex-shrink: 0; vertical-align: -0.125em; } /* Спрайт с описаниями иконок вклеен в начало и не должен рисоваться. Класс, а не style="display:none": CSP лендинга -- style-src 'self' без 'unsafe-inline', и атрибут style= ею блокируется. Со скрытием через атрибут вверху страницы развернулась бы стена из семидесяти иконок, причём увидели бы это только на проде: локально, без заголовков безопасности, атрибут применяется. */ .icon-sprite { display: none; } .glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 10px 20px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.8); } .typing-cursor::after { content: '|'; animation: blink 1s infinite; color: #10b981; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .chart-bar { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .cluster-pulse { animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .message-pop { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: translateY(20px) scale(0.9); } @keyframes popIn { to { opacity: 1; transform: translateY(0) scale(1); } } .mint-gradient { background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%); } .scenario-indicator { transition: all 0.3s ease; } .scenario-indicator.active { background: #10b981; width: 24px; } .cluster-node { transition: all 0.5s ease; } .cluster-node:hover { transform: scale(1.1); } .demo-window { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; } .challenge-problem-badge { padding: 0.65rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(248, 113, 113, 0.18); box-shadow: 0 14px 28px -22px rgba(239, 68, 68, 0.55); font-size: 0.83rem; letter-spacing: 0.08em; transform-origin: center; animation: challengeBadgeFloat 3.8s ease-in-out infinite; } .challenge-problem-badge .material-symbols-outlined { font-size: 1.35rem; animation: challengeBadgeIconPulse 3.8s ease-in-out infinite; } @keyframes challengeBadgeFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.03); } } @keyframes challengeBadgeIconPulse { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.08); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .challenge-problem-badge, .challenge-problem-badge .material-symbols-outlined { animation: none; } } /* Better diagonal layout with less overlap */ .windows-container { position: relative; height: 720px; width: 100%; } .window-pos-1 { position: absolute; top: 0; right: 0px; width: 520px; z-index: 30; } .window-pos-2 { position: absolute; top: 320px; right: 350px; width: 400px; z-index: 20; } .window-pos-3 { position: absolute; top: 380px; right: 10px; width: 320px; z-index: 10; } .pipeline-demo { position: relative; padding: 1.25rem; border-radius: 1.5rem; background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 35%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 20px 45px -30px rgba(15, 23, 42, 0.3); } .pipeline-demo__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .pipeline-demo__eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #0f766e; } .pipeline-demo__status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(16, 185, 129, 0.14); font-size: 0.75rem; font-weight: 600; color: #0f172a; box-shadow: 0 12px 30px -24px rgba(15, 23, 42, 0.45); } .pipeline-demo__status-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); animation: pipelinePulse 1.8s ease-in-out infinite; } .pipeline-demo__steps { display: flex; flex-direction: column; gap: 0.75rem; position: relative; } .pipeline-demo__steps::before { content: ''; position: absolute; left: 0.95rem; top: 1.4rem; bottom: 1.4rem; width: 2px; background: linear-gradient(180deg, rgba(16, 185, 129, 0.3), rgba(203, 213, 225, 0.2)); } .pipeline-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.85rem; align-items: start; padding: 0.85rem 0.9rem 0.85rem 0; opacity: 0.48; transform: translateX(0); transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease; filter: saturate(0.75); } .pipeline-step__bullet { position: relative; z-index: 1; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 0.8rem; font-weight: 800; border: 1px solid rgba(148, 163, 184, 0.18); transition: all 0.35s ease; } .pipeline-step__title { font-size: 0.92rem; line-height: 1.3; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem; } .pipeline-step__meta { font-size: 0.75rem; line-height: 1.45; color: #64748b; margin: 0; } .pipeline-step.is-active { opacity: 1; transform: translateX(6px); filter: saturate(1); } .pipeline-step.is-active .pipeline-step__bullet { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); color: white; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12), 0 16px 30px -18px rgba(16, 185, 129, 0.8); } .pipeline-step.is-complete { opacity: 0.82; } .pipeline-step.is-complete .pipeline-step__bullet { background: #d1fae5; color: #047857; } .pipeline-profiles { margin-top: 0.7rem; padding: 0.75rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 32px -28px rgba(15, 23, 42, 0.45); } .pipeline-profiles__table-wrap { overflow-x: auto; } .pipeline-profiles__table { width: 100%; border-collapse: collapse; font-size: 0.65rem; color: #334155; min-width: 860px; } .pipeline-profiles__table th, .pipeline-profiles__table td { padding: 0.36rem 0.4rem; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(226, 232, 240, 0.9); } .pipeline-profiles__table th { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0f766e; } .pipeline-profiles__table tbody tr:last-child td { border-bottom: none; } .pipeline-demo__progress { margin-top: 1.1rem; height: 0.45rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; } .pipeline-demo__progress-bar { height: 100%; width: 25%; border-radius: inherit; background: linear-gradient(90deg, #6ee7b7 0%, #10b981 100%); transition: width 0.45s ease; } .audience-demo { position: relative; display: flex; flex-direction: column; gap: 0.9rem; } .audience-demo__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .audience-demo__query, .audience-demo__result { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #f8fafc; border: 1px solid rgba(148, 163, 184, 0.18); color: #0f172a; } .audience-demo__result { background: #ecfdf5; color: #047857; } .audience-demo__result-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #10b981; } .audience-demo__cards { display: flex; flex-direction: column; gap: 0.75rem; } .audience-card { padding: 0.9rem; border-radius: 1.25rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 22px 38px -34px rgba(15, 23, 42, 0.5); display: flex; flex-direction: column; gap: 0.7rem; min-height: 0; } .audience-card__top { display: flex; align-items: center; gap: 0.65rem; } .audience-card__avatar { width: 2.8rem; height: 2.8rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: white; flex-shrink: 0; } .audience-card--fintech .audience-card__avatar { background: linear-gradient(135deg, #059669 0%, #10b981 100%); } .audience-card--medical .audience-card__avatar { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); } .audience-card--investor .audience-card__avatar { background: linear-gradient(135deg, #0f172a 0%, #334155 100%); } .audience-card__name { margin: 0 0 0.12rem; font-size: 0.88rem; line-height: 1.2; font-weight: 800; color: #0f172a; } .audience-card__role { margin: 0; font-size: 0.68rem; line-height: 1.35; color: #64748b; } .audience-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .audience-card__tags span { padding: 0.24rem 0.48rem; border-radius: 999px; background: #f1f5f9; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; color: #334155; } .audience-card__desc { margin: 0; font-size: 0.69rem; line-height: 1.45; color: #475569; } .audience-card__quote { margin-top: auto; padding: 0.65rem 0.7rem; border-radius: 0.9rem; background: rgba(240, 253, 244, 0.8); border: 1px solid rgba(16, 185, 129, 0.12); font-size: 0.68rem; line-height: 1.45; color: #065f46; } @keyframes pipelinePulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } @media (max-width: 640px) { .pipeline-demo { padding: 1rem; } .pipeline-demo__header { flex-direction: column; align-items: flex-start; } .pipeline-step { grid-template-columns: 1.8rem minmax(0, 1fr); gap: 0.75rem; } .pipeline-demo__steps::before { left: 0.85rem; } .audience-demo__header { flex-direction: column; align-items: flex-start; } .audience-demo__cards { display: flex; flex-direction: column; } } /* Honeypot-поле формы демо-доступа. Было inline-стилем в index.html; вынесено на Шаге 5, потому что CSP со строгим style-src не пропускает атрибут style. */ .hp-field { position: absolute; left: -9999px; } /* Таблицы юридических документов. Были блоком