/* ============================================================= GLOSS — landing page single-file CSS, vanilla, no Tailwind / no preprocessor themes: data-theme = light | dark accent: amber (фирменный жёлтый, единственный) ============================================================= */ /* ── reset ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; margin: 0; } input, textarea { font: inherit; color: inherit; } /* ── tokens ── */ :root { /* fonts */ --ff-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; /* shadows (общие) */ --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 32px -12px rgba(0,0,0,.18); --shadow-pop: 0 24px 64px -24px rgba(0,0,0,.35); /* timing */ --t-fast: .15s ease; --t-base: .3s cubic-bezier(.2, .8, .2, 1); --t-slow: .6s cubic-bezier(.2, .8, .2, 1); /* container */ --container: 1200px; } /* ── theme: dark (default) ── */ [data-theme="dark"] { --bg: #0a0a0b; --bg-elev: #111114; --surface: #15151a; --surface-2: #1c1c22; --surface-3: #25252d; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); --fg: #f5f5f7; --fg-muted: #a4a4ad; --fg-subtle: #6e6e76; --grid-color: rgba(255,255,255,.04); --shadow-pop: 0 24px 64px -24px rgba(0,0,0,.6); } /* ── theme: light ── */ [data-theme="light"] { --bg: #fbfbfc; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #f4f4f6; --surface-3: #ebebef; --border: rgba(10,10,11,.08); --border-strong: rgba(10,10,11,.16); --fg: #0a0a0b; --fg-muted: #5b5b62; --fg-subtle: #8a8a92; --grid-color: rgba(10,10,11,.05); } /* ── accent (единственный — фирменный жёлтый) ── */ :root { --accent: #ffb800; --accent-2: #ffd55a; --accent-soft: rgba(255, 184, 0, .14); --accent-fg: #1a1300; /* текст ПОВЕРХ accent-фона */ } /* ── base ── */ html { scroll-behavior: smooth; /* clip + max-width вместо hidden: предотвращает растягивание от внутренних широких элементов (scaled MacBook-mockups, абсолютов с отрицательным right). Без этого .container брал ширину от растянутого body и контент обрезался в мобильном viewport. */ overflow-x: clip; max-width: 100vw; } body { font-family: var(--ff-sans); font-size: 16px; line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; max-width: 100vw; transition: background-color var(--t-base), color var(--t-base); } /* типографика */ h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } p { margin: 0; } code { font-family: var(--ff-mono); font-size: .92em; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); } ::selection { background: var(--accent); color: var(--accent-fg); } .container { width: min(100% - 32px, var(--container)); margin: 0 auto; } /* ── decorative background ── */ .bg-grid { position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 30%, transparent 70%); pointer-events: none; } .bg-blob { position: fixed; z-index: -1; border-radius: 50%; filter: blur(110px); opacity: .55; pointer-events: none; transition: opacity var(--t-slow), background var(--t-base); } [data-theme="light"] .bg-blob { opacity: .35; } .bg-blob--1 { top: -120px; left: -120px; width: 480px; height: 480px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); animation: blobFloat1 18s ease-in-out infinite alternate; } .bg-blob--2 { top: 40%; right: -180px; width: 540px; height: 540px; background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%); animation: blobFloat2 22s ease-in-out infinite alternate; } /* ── Прогресс-бар скролла (вверху страницы) ── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1000; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent); transition: width .1s linear; pointer-events: none; } /* ── Плавающая CTA на мобильном ── */ .floating-cta { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 90; display: none; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 14px; box-shadow: 0 12px 32px -8px var(--accent), 0 0 0 6px var(--accent-soft); transform: translateY(120%); transition: transform var(--t-base); } .floating-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .floating-cta.is-visible { transform: translateY(0); } @media (max-width: 768px) { .floating-cta { display: inline-flex; } /* Резервируем место снизу, чтобы плавающая CTA не закрывала контент последней секции / футера. ~72px = высота кнопки + воздух. */ body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } } @keyframes blobFloat1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(80px, 60px) scale(1.1); } } @keyframes blobFloat2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 80px) scale(.95); } } /* ============================================================= NAV ============================================================= */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--t-base), background var(--t-base); } .nav.is-scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 94%, transparent); } /* Якорные ссылки (#modules, #how, #pricing) — заголовок должен оказаться под sticky nav, а не уехать под него. NAV_OFFSET в script.js = 80. */ section[id] { scroll-margin-top: 80px; } .nav__row { display: flex; align-items: center; gap: 24px; padding: 16px 0; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } .logo__mark { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-fg); font-family: var(--ff-sans); font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: 0; box-shadow: 0 4px 12px -4px var(--accent); user-select: none; } .logo__name { color: var(--fg); } .nav__links { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 500; color: var(--fg-muted); } .nav__links a { position: relative; padding: 6px 0; transition: color var(--t-fast); } .nav__links a:hover { color: var(--fg); } .nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); } .nav__links a:hover::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: 12px; } /* theme toggle */ .theme-btn { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); border: 1px solid var(--border); background: var(--surface); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); } .theme-btn:hover { background: var(--surface-2); color: var(--fg); } .theme-btn:active { transform: scale(.92); } .theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-btn .icon-moon { display: none; } .theme-btn .icon-sun { display: block; } [data-theme="light"] .theme-btn .icon-moon { display: block; } [data-theme="light"] .theme-btn .icon-sun { display: none; } /* burger */ .nav__burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; border-radius: 999px; border: 1px solid var(--border); } .nav__burger span { display: block; width: 18px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-fast); } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================= BUTTONS ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast), background var(--t-base), border-color var(--t-base), color var(--t-base), box-shadow var(--t-base); border: 1px solid transparent; } .btn:active { transform: scale(.97); } .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-base); } .btn:hover svg { transform: translateX(3px); } .btn--primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 8px 24px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.3); } .btn--primary:hover { box-shadow: 0 12px 36px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.4); transform: translateY(-1px); } /* Заблокированная кнопка (например, форма заявки без согласия на ПДн) */ .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; } .btn:disabled:hover { transform: none; box-shadow: none; } .btn:disabled:hover svg { transform: none; } .btn--primary:disabled:hover::after { transform: translateX(-100%); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--fg); } .btn--lg { padding: 16px 28px; font-size: 15px; } .btn--sm { padding: 9px 16px; font-size: 13px; } .btn--block { width: 100%; } /* ============================================================= SECTION HEADERS ============================================================= */ .section-head { max-width: 760px; margin-bottom: 64px; } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-block; padding: 6px 12px; margin-bottom: 18px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } [data-theme="light"] .eyebrow { color: #b88300; } .section-title { font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.025em; } .section-lead { margin-top: 18px; font-size: 17px; color: var(--fg-muted); max-width: 640px; } .section-head--center .section-lead { margin-left: auto; margin-right: auto; } .section-lead--muted { color: var(--fg-subtle); font-size: 15px; } .grad-text { background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 25%, var(--fg) 55%, var(--accent-2) 80%, var(--accent) 100%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: gradShimmer 9s ease-in-out infinite; } @keyframes gradShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================================= HERO ============================================================= */ .hero { position: relative; padding: 80px 0 120px; } .hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; } .hero__content { position: relative; z-index: 2; } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 28px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--fg-muted); } .badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulseDot 2s infinite; } @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 0 8px transparent; } } .hero__title { font-size: clamp(38px, 6vw, 76px); line-height: 1.05; letter-spacing: -0.035em; } .hero__sub { margin-top: 24px; font-size: 18px; line-height: 1.55; color: var(--fg-muted); max-width: 540px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero__free-month { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 16px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; font-size: 14px; color: var(--fg); } .hero__free-month strong { color: var(--accent); font-weight: 700; } .hero__free-month-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulseDot 2.2s ease-in-out infinite; flex-shrink: 0; } .hero__bullets { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; font-size: 14px; color: var(--fg-muted); } .hero__bullets li { display: inline-flex; align-items: center; gap: 8px; } .hero__bullets svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .hero__visual { position: relative; perspective: 1400px; min-height: 520px; } .hero__glow { position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity: .25; filter: blur(60px); z-index: 0; pointer-events: none; } /* trust row */ .hero__trust { margin-top: 72px; display: flex; flex-direction: column; gap: 36px; align-items: center; text-align: center; } .hero__trust-block { width: 100%; max-width: 720px; } .hero__trust-block + .hero__trust-block { padding-top: 28px; border-top: 1px solid var(--border); } .hero__trust-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin-bottom: 18px; } .hero__trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; font-weight: 600; font-size: 18px; color: var(--fg-subtle); opacity: .85; } .hero__trust-row--pills { gap: 8px; font-size: 14px; opacity: 1; } .trust-logo { transition: opacity var(--t-base), color var(--t-base); } .trust-logo:hover { opacity: 1; color: var(--fg); } .trust-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .trust-pill:hover { border-color: var(--accent); color: var(--fg); transform: translateY(-1px); } @media (max-width: 768px) { .hero__trust { gap: 32px; margin-top: 56px; } .hero__trust-row { gap: 16px; } } /* ============================================================= MOCKUPS — Admin ============================================================= */ .mock { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; transition: transform var(--t-base), box-shadow var(--t-base); will-change: transform; } .mock--admin { position: relative; z-index: 1; } .hero__visual .mock--admin { transform: rotate(-1.5deg) translateY(0); } .mock__chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); } .mock__dot:nth-child(1) { background: #ff5f57; } .mock__dot:nth-child(2) { background: #ffbd2e; } .mock__dot:nth-child(3) { background: #28c840; } .mock__url { margin-left: 12px; flex: 1; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-subtle); background: var(--surface); border-radius: 6px; padding: 4px 10px; border: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock__body { display: grid; grid-template-columns: 180px 1fr; height: 420px; } .mock__side { background: var(--surface-2); border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .mock__side-logo { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 700; } .mock__side-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .mock__side-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--fg-muted); cursor: default; } .mock__side-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .mock__side-item svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .mock__main { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .mock__topbar { display: flex; align-items: center; gap: 8px; } .mock__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .mock__topbar-spacer { flex: 1; } .mock__chip { padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); } .mock__chip--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; } .mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mock__kpi { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .mock__kpi-label { font-size: 11px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.04em; } .mock__kpi-value { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .mock__kpi-bar { display: block; margin-top: 4px; height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .mock__kpi-bar i { display: block; width: var(--w, 50%); height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; animation: barGrow 1.4s var(--t-base) forwards; } @keyframes barGrow { from { width: 0; } } .mock__list { display: flex; flex-direction: column; gap: 6px; overflow: hidden; } .mock__row { display: grid; grid-template-columns: 1.4fr 110px 100px 80px; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; align-items: center; } .mock__row-car { display: flex; flex-direction: column; gap: 2px; } .mock__plate { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; padding: 2px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; align-self: flex-start; white-space: nowrap; } .mock__row-model { font-size: 11.5px; color: var(--fg-muted); } .mock__row-time { font-family: var(--ff-mono); color: var(--fg-muted); font-size: 11px; } .mock__row-master { font-weight: 500; color: var(--fg); } .mock__status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; justify-self: start; } .mock__status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulseDot 2s infinite; } .mock__status--accept { background: rgba(120, 120, 130, .15); color: #999; } .mock__status--progress { background: var(--accent-soft); color: var(--accent); } .mock__status--qc { background: rgba(255, 184, 0, .14); color: #f5a800; } .mock__status--ready { background: rgba(40, 200, 60, .15); color: #28c840; } /* hero phone mockup overlay */ .mock--phone { width: 220px; border-radius: 36px; background: var(--surface); border: 1px solid var(--border-strong); padding: 12px 14px 18px; } .hero__visual .mock--phone { position: absolute; right: -20px; bottom: -40px; z-index: 2; transform: rotate(6deg); } .mock__phone-notch { width: 80px; height: 6px; background: var(--surface-3); border-radius: 999px; margin: 0 auto 14px; } .mock__phone-tg { background: var(--surface-2); border-radius: 16px; padding: 14px; border: 1px solid var(--border); } .mock__phone-tg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .mock__phone-tg-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; font-size: 14px; } .mock__phone-tg-name { font-size: 13px; font-weight: 600; } .mock__phone-tg-time { font-size: 10px; color: var(--fg-subtle); } .mock__phone-tg-msg { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.4; border-bottom-right-radius: 4px; } /* ============================================================= DEVICE FRAMES (devices.css обёртки) — реалистичные MacBook + iPhone ============================================================= */ /* MacBook Pro: 740×434 базовый размер. Скейлим контейнер через transform-scale, считаем место под scaled-размер. */ .device-wrap--macbook { /* CSS-переменная для скейла — переопределяется в hero/showcase/mobile */ --scale: 0.85; width: calc(740px * var(--scale)); height: calc(434px * var(--scale)); position: relative; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .35)); } .device-wrap--macbook .device { transform: scale(var(--scale)); transform-origin: top left; } .device-wrap--macbook .device-content { cursor: zoom-in; } /* iPhone 14 Pro: 428×868 базовый размер. */ .device-wrap--iphone { --scale: 0.42; width: calc(428px * var(--scale)); height: calc(868px * var(--scale)); position: relative; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45)); } .device-wrap--iphone .device { transform: scale(var(--scale)); transform-origin: top left; } .device-wrap--iphone .device-screen { cursor: zoom-in; } /* Hero: позиционирование MacBook (база) + iPhone (поверх правого нижнего угла) */ .hero__visual { position: relative; perspective: 1400px; min-height: 520px; } .hero__visual .device-wrap--macbook { --scale: 0.78; margin-left: auto; } .hero__visual .device-wrap--iphone { --scale: 0.36; position: absolute; right: -20px; bottom: -30px; z-index: 2; transform: rotate(4deg); } /* Showcase inline — center в карточке */ .device-wrap--inline { margin: 0 auto; } .showcase__card--big .device-wrap--macbook { --scale: 0.7; margin: 0 auto; } .showcase__card .device-wrap--iphone { --scale: 0.36; margin: 0 auto; } /* На узких экранах showcase MacBook (740 × 0.7 = 518px) выпирает за viewport и растягивает body → горизонтальный скролл. Скейлим под мобильную ширину с учётом padding showcase-карточки (на mobile уменьшаем padding до 20px). */ @media (max-width: 820px) { .showcase__card--big .device-wrap--macbook { --scale: 0.55; } } @media (max-width: 540px) { .showcase__card { padding: 20px; } .showcase__visual { min-height: 200px; } .showcase__card--big .device-wrap--macbook { --scale: 0.36; } .showcase__card .device-wrap--iphone { --scale: 0.30; } } /* Client-side секция — крупный iPhone */ .client-side__phone .device-wrap--iphone { --scale: 0.55; margin: 0 auto; } @media (max-width: 992px) { .client-side__phone .device-wrap--iphone { --scale: 0.5; } } @media (max-width: 540px) { .client-side__phone .device-wrap--iphone { --scale: 0.42; } } /* devices.css по умолчанию использует свой box-sizing — переопределяем для совместимости */ .device * { box-sizing: border-box; } /* ============================================================= REAL MOCKUPS — обёртка для скриншотов реального продукта (LEGACY, осталась для совместимости gallery, но в hero/showcase больше не используется) ============================================================= */ .real-mock { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); transition: transform var(--t-base), box-shadow var(--t-base); will-change: transform; } .real-mock--browser { width: 100%; max-width: 100%; } .hero__visual .real-mock--browser { transform: rotate(-1.5deg); } .real-mock__chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .real-mock__dot { width: 10px; height: 10px; border-radius: 50%; } .real-mock__dot:nth-child(1) { background: #ff5f57; } .real-mock__dot:nth-child(2) { background: #ffbd2e; } .real-mock__dot:nth-child(3) { background: #28c840; } .real-mock__url { margin-left: 12px; flex: 1; font-family: var(--ff-mono); font-size: 11.5px; color: var(--fg-subtle); background: var(--surface); border-radius: 6px; padding: 4px 10px; border: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .real-mock__img { display: block; width: 100%; height: auto; /* aspect-ratio задаётся автоматически из intrinsic размеров загруженного image — это даёт правильные пропорции для конкретного скрина */ /* fallback: если src 404 — показываем alt-текст в плейсхолдере */ font-style: italic; font-size: 13px; color: var(--fg-subtle); background: var(--surface-2); text-align: center; line-height: 1.5; min-height: 200px; padding: 40px 20px; word-break: break-word; } .real-mock--phone .real-mock__img { border-radius: 28px; background: #0a0a0b; min-height: 380px; padding: 60px 20px; } /* phone mockup wrapper — стилизация под iPhone: тонкая чёрная рамка ~10px, скруглённый corner, без своей "notch" (т.к. в реальном iOS-скрине уже есть статус-бар и dynamic island) */ .real-mock--phone { border-radius: 42px; background: #0a0a0b; border: 10px solid #1a1a1d; padding: 0; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), var(--shadow-pop); } /* hero phone — поверх десктопного админ-mockup, крупнее для читаемости */ .hero__visual .real-mock--phone { position: absolute; right: -20px; bottom: -40px; width: 260px; z-index: 2; transform: rotate(5deg); } /* showcase inline — фиксируем максимальные размеры */ .real-mock--inline { width: 100%; margin: 0 auto; } .real-mock--phone.real-mock--inline { position: static; transform: none; max-width: 240px; margin: 0 auto; } /* zoom hint */ .zoomable { cursor: zoom-in; transition: transform var(--t-base); } .zoomable:hover { transform: scale(1.01); } /* ============================================================= GALLERY — большая галерея с lightbox ============================================================= */ .gallery { padding: 80px 0; } .gallery__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .gallery__item { position: relative; margin: 0; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .gallery__item:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-card); } .gallery__item img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: top center; cursor: zoom-in; background: var(--surface-2); } .gallery__item figcaption { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--border); } .gallery__item figcaption b { font-size: 14px; font-weight: 600; } .gallery__item figcaption span { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; } /* широкая карточка — две колонки */ .gallery__item--wide { grid-column: span 4; } .gallery__item--wide img { height: 360px; object-position: top left; } /* остальные десктопные — по 2 колонки */ .gallery__item:not(.gallery__item--wide):not(.gallery__item--phone) { grid-column: span 2; } /* мобильные скрины */ .gallery__item--phone { grid-column: span 2; } .gallery__item--phone img { height: 420px; object-fit: contain; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); padding: 16px; } /* ============================================================= LIGHTBOX ============================================================= */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-base), visibility var(--t-base); } .lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .lightbox__img { max-width: 100%; max-height: 80vh; border-radius: var(--r-md); box-shadow: 0 32px 80px -16px rgba(0,0,0,.8); background: #fff; transform: scale(.96); transition: transform var(--t-base); } .lightbox.is-open .lightbox__img { transform: scale(1); } .lightbox__caption { font-size: 14px; color: rgba(255,255,255,.8); text-align: center; max-width: 600px; } .lightbox__close { position: fixed; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; transition: background var(--t-fast), transform var(--t-fast); } .lightbox__close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); } .lightbox__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* ============================================================= PAINS ============================================================= */ .pains { padding: 100px 0; } .pains__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .pain-card { padding: 28px 24px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); position: relative; overflow: hidden; } .pain-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-soft), transparent 50%); opacity: 0; transition: opacity var(--t-base); pointer-events: none; } .pain-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-card); } .pain-card:hover::before { opacity: 1; } .pain-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; } .pain-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pain-card h3 { font-size: 17px; margin-bottom: 8px; } .pain-card p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; } .pain-card__quote { margin-top: 16px; padding: 12px 14px; background: var(--accent-soft); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--fg-subtle); font-style: italic; line-height: 1.55; } /* ============================================================= BEFORE / AFTER ============================================================= */ .before-after { padding: 80px 0; } .before-after__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .ba-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-base), transform var(--t-base); } .ba-card:hover { border-color: var(--accent); transform: translateY(-3px); } .ba-card__before, .ba-card__after { padding: 22px 24px; } .ba-card__before { background: rgba(255, 80, 80, 0.045); border-bottom: 1px solid var(--border); flex: 1; } .ba-card__after { background: var(--accent-soft); flex: 1; } .ba-card__label { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } .ba-card__label--before { color: #ff7676; } .ba-card__label--after { color: var(--accent); } [data-theme="light"] .ba-card__label--before { color: #d94545; } [data-theme="light"] .ba-card__label--after { color: #b88300; } .ba-card__before p { font-size: 14px; color: var(--fg-muted); line-height: 1.6; } .ba-card__after p { font-size: 14px; color: var(--fg); font-weight: 500; line-height: 1.6; } @media (max-width: 820px) { .before-after__grid { grid-template-columns: 1fr; } } /* ============================================================= OVERVIEW ============================================================= */ .overview { padding: 80px 0; } .overview__inner { padding: 60px 32px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); position: relative; overflow: hidden; } .overview__inner::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%); pointer-events: none; } .overview__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; position: relative; } .overview__cell { text-align: center; padding: 20px; } .overview__num { display: block; font-size: clamp(36px, 4vw, 56px); font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: 8px; } .overview__label { font-size: 14px; color: var(--fg-muted); } /* ============================================================= MODULES ============================================================= */ .modules { padding: 100px 0; } .modules__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .module-card { position: relative; padding: 26px 22px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); overflow: hidden; will-change: transform; } .module-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft) 0%, transparent 50%); opacity: 0; transition: opacity var(--t-base); pointer-events: none; } .module-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-card); } .module-card:hover::before { opacity: 1; } .module-card--accent { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); border-color: var(--accent); grid-column: span 2; } .module-card--accent h3 { font-size: 18px; } .module-card--accent p { font-size: 14.5px; } @media (max-width: 992px) { .module-card--accent { grid-column: span 2; } } @media (max-width: 768px) { .module-card--accent { grid-column: span 1; } } .module-card__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--surface-2); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--border); } .module-card--accent .module-card__icon { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .module-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .module-card h3 { font-size: 16px; margin-bottom: 8px; } .module-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; } .module-card code { font-size: 11.5px; padding: 1px 6px; } .module-card__tag { display: inline-block; margin-top: 14px; padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 999px; background: var(--accent); color: var(--accent-fg); text-transform: uppercase; letter-spacing: 0.04em; } /* ============================================================= HOW IT WORKS ============================================================= */ .how { padding: 100px 0; } .how__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; counter-reset: step; } .how__steps::before { content: ''; position: absolute; top: 36px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px); } .how__step { position: relative; padding: 0 16px; text-align: center; } .how__num { width: 72px; height: 72px; margin: 0 auto 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 22px; font-weight: 700; color: var(--accent); position: relative; z-index: 1; transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .how__step:hover .how__num { transform: scale(1.05); border-color: var(--accent); box-shadow: 0 0 0 8px var(--accent-soft); } .how__step h3 { font-size: 18px; margin-bottom: 8px; } .how__step p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin-bottom: 12px; } .how__time { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--fg-subtle); border-radius: 999px; background: var(--surface); border: 1px solid var(--border); } /* ============================================================= SHOWCASE ============================================================= */ .showcase { padding: 100px 0; } .showcase__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; } .showcase__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 24px; transition: transform var(--t-base), border-color var(--t-base); } .showcase__card:hover { border-color: var(--accent); transform: translateY(-4px); } .showcase__visual { flex: 1; display: grid; place-items: center; min-height: 280px; } .showcase__caption h3 { font-size: 20px; margin-bottom: 8px; } .showcase__caption p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; } .mock--small .mock__body { height: auto; grid-template-columns: 1fr; padding: 18px; gap: 14px; } .mock__body--dashboard { display: flex; flex-direction: column; gap: 16px; } .mock__chart { position: relative; height: 140px; background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border); padding: 12px; overflow: hidden; } .mock__chart-grid { position: absolute; inset: 12px; background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% 28px; opacity: .5; } .mock__chart-line { width: 100%; height: 100%; position: relative; } .mock__stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .mock__stat { padding: 12px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .mock__stat span { font-size: 11px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.04em; } .mock__stat b { font-size: 16px; font-weight: 700; } /* phone big */ .mock--big { width: 240px; margin: 0 auto; } .mock__phone-content { background: var(--surface-2); border-radius: 18px; padding: 14px; min-height: 320px; display: flex; flex-direction: column; gap: 14px; } .mock__phone-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; color: var(--fg-muted); } .mock__phone-status { display: flex; gap: 3px; } .mock__phone-status i { width: 4px; height: 8px; background: var(--fg-muted); border-radius: 2px; } .mock__phone-status i:nth-child(1) { height: 5px; } .mock__phone-status i:nth-child(2) { height: 7px; } .mock__phone-card { background: var(--surface); border-radius: 14px; padding: 16px; border: 1px solid var(--border); flex: 1; } .mock__phone-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 700; } .mock__phone-title { font-size: 14px; margin: 6px 0 14px; letter-spacing: -0.01em; } .mock__phone-progress { margin-bottom: 14px; } .mock__phone-progress-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 6px; } .mock__phone-progress-bar i { display: block; height: 100%; width: var(--w, 70%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; animation: barGrow 1.4s var(--t-base) forwards; } .mock__phone-progress span { font-size: 11px; color: var(--fg-muted); } .mock__phone-steps { display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .mock__phone-steps li { display: flex; align-items: center; gap: 8px; color: var(--fg-subtle); } .mock__phone-steps li i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--surface-3); flex-shrink: 0; } .mock__phone-steps .is-done { color: var(--fg-muted); } .mock__phone-steps .is-done i { background: #28c840; border-color: #28c840; } .mock__phone-steps .is-active { color: var(--fg); font-weight: 600; } .mock__phone-steps .is-active i { background: var(--accent); border-color: var(--accent); animation: pulseDot 1.5s infinite; } .mock__phone-eta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); } /* TG mockup */ .mock--tg { width: 280px; background: var(--surface); padding: 16px; border-radius: var(--r-md); border: 1px solid var(--border-strong); } .mock__tg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .mock__tg-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; } .mock__tg-name { font-size: 14px; font-weight: 600; } .mock__tg-status { font-size: 11px; color: var(--accent); } .mock__tg-msgs { display: flex; flex-direction: column; gap: 8px; } .mock__tg-msg { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; max-width: 92%; align-self: flex-start; border: 1px solid var(--border); } .mock__tg-msg--photo .mock__tg-photo { display: block; width: 100%; height: 80px; border-radius: 8px; margin-bottom: 8px; background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface-3) 100%); position: relative; overflow: hidden; } .mock__tg-msg--photo .mock__tg-photo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, transparent 30%, rgba(0,0,0,.1) 100%); } /* ============================================================= TESTIMONIALS ============================================================= */ .testimonials { padding: 80px 0; } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .testimonial { margin: 0; padding: 28px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 20px; transition: transform var(--t-base), border-color var(--t-base); } .testimonial:hover { transform: translateY(-4px); border-color: var(--accent); } .testimonial blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg); position: relative; } .testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; } .testimonial__avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; } .testimonial__name { display: block; font-weight: 600; font-size: 14px; } .testimonial__role { display: block; font-size: 12px; color: var(--fg-subtle); } /* ============================================================= PRICING ============================================================= */ .pricing { padding: 100px 0; } .pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } /* Одиночный тариф — центрируем, ограничиваем ширину */ .pricing__grid--single { grid-template-columns: minmax(0, 720px); justify-content: center; } .price-card--solo { padding: 48px 48px 40px; } .price-card--solo .price-card__head h3 { font-size: 28px; } .price-card--solo .price-card__amount { font-size: 56px; } .price-card__list--two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .price-card__note { margin-top: 14px; font-size: 12.5px; color: var(--fg-subtle); text-align: center; } /* Лимиты команды (владельцы / админы / мастера) — отличают тарифы */ .price-card__limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 4px; padding: 14px 12px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 10px; list-style: none; } .price-card__limits li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--fg-muted); text-align: center; line-height: 1.2; } .price-card__limits li b { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; } .pricing__footnote { margin-top: 32px; max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; font-size: 13px; color: var(--fg-subtle); line-height: 1.65; } @media (max-width: 540px) { .price-card__list--two-cols { grid-template-columns: 1fr; } .price-card--solo { padding: 32px 24px 28px; } .price-card--solo .price-card__amount { font-size: 44px; } } .price-card { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 32px 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .price-card:hover { transform: translateY(-4px); border-color: var(--accent); } .price-card--featured { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); transform: translateY(-8px) scale(1.02); } .price-card--featured:hover { transform: translateY(-12px) scale(1.02); } .price-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; background: var(--accent); color: var(--accent-fg); } .price-card__head h3 { font-size: 22px; margin-bottom: 6px; } .price-card__head p { font-size: 13.5px; color: var(--fg-muted); } .price-card__price { display: flex; align-items: baseline; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .price-card__amount { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; } .price-card__period { font-size: 14px; color: var(--fg-muted); } .price-card__list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; margin-bottom: 12px; flex: 1; } .price-card__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--fg-muted); } .price-card__list li i { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); flex-shrink: 0; position: relative; margin-top: 2px; } .price-card__list li i::before { content: ''; position: absolute; inset: 4px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg) translate(-1px, -2px); transform-origin: bottom right; } /* ============================================================= FAQ ============================================================= */ .faq { padding: 100px 0; } .faq__list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-base); } .faq__item[open] { border-color: var(--accent); } .faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; user-select: none; transition: background var(--t-fast); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { background: var(--surface-2); } .faq__item summary svg { width: 18px; height: 18px; fill: none; stroke: var(--fg-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-base); flex-shrink: 0; } .faq__item[open] summary svg { transform: rotate(180deg); stroke: var(--accent); } .faq__item p { padding: 0 24px 24px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); } /* ============================================================= CTA ============================================================= */ .cta { padding: 100px 0 120px; } .cta__inner { position: relative; padding: 64px 48px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); overflow: hidden; text-align: center; } .cta__bg { position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, var(--accent-soft) 0%, transparent 50%), radial-gradient(circle at 80% 100%, var(--accent-soft) 0%, transparent 50%); opacity: .9; pointer-events: none; } .cta__title { position: relative; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.025em; } .cta__sub { position: relative; margin-top: 16px; font-size: 17px; color: var(--fg-muted); } .cta__form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 40px auto 0; } .cta__field { display: flex; flex-direction: column; gap: 6px; text-align: left; } .cta__field--full { grid-column: 1 / -1; } .cta__field span { font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; } .cta__field input { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elev); font-size: 15px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .cta__field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .cta__form .btn { grid-column: 1 / -1; margin-top: 8px; } .cta__legal { grid-column: 1 / -1; font-size: 12px; color: var(--fg-subtle); text-align: center; } .cta__legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .cta__consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 12.5px; line-height: 1.45; color: var(--fg-subtle); cursor: pointer; } .cta__consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; } .cta__consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ──── Cookie banner ──── */ .cookie-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140%); z-index: 200; width: min(94vw, 720px); display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); opacity: 0; transition: transform var(--t-base), opacity var(--t-base); } .cookie-banner.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .cookie-banner__text { flex: 1 1 auto; font-size: 13px; line-height: 1.5; color: var(--fg-muted); } .cookie-banner__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .cookie-banner__btn { flex: 0 0 auto; padding: 10px 22px; border: none; border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-fg); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast); } .cookie-banner__btn:hover { box-shadow: 0 8px 24px -8px var(--accent); transform: translateY(-1px); } @media (max-width: 600px) { .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; bottom: 12px; } .cookie-banner__btn { width: 100%; } } .cta__alt { position: relative; margin-top: 32px; font-size: 14px; color: var(--fg-muted); } .cta__alt a { font-weight: 600; color: var(--accent); } .cta__alt a:hover { text-decoration: underline; text-underline-offset: 4px; } /* ============================================================= FOOTER ============================================================= */ .footer { padding: 64px 0 32px; border-top: 1px solid var(--border); background: var(--bg-elev); } .footer__row { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding-bottom: 48px; } .footer__brand p { margin-top: 16px; font-size: 14px; color: var(--fg-muted); line-height: 1.6; } .footer__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .footer__links h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); margin-bottom: 14px; } .footer__links a { display: block; font-size: 14px; color: var(--fg-muted); padding: 4px 0; transition: color var(--t-fast); } .footer__links a:hover { color: var(--accent); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-subtle); } .footer__author { color: var(--fg-muted); } .footer__url { font-family: var(--ff-mono); } /* ============================================================= INLINE CTA — между MODULES и HOW ============================================================= */ .inline-cta { padding: 60px 0; } .inline-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 40px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border: 1px solid var(--accent); position: relative; overflow: hidden; } .inline-cta__inner::before { content: ''; position: absolute; top: -40%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity: .18; pointer-events: none; } .inline-cta__text { position: relative; } .inline-cta__text h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.02em; margin-bottom: 6px; } .inline-cta__text p { font-size: 15px; color: var(--fg-muted); line-height: 1.5; } @media (max-width: 768px) { .inline-cta__inner { flex-direction: column; align-items: stretch; padding: 28px 24px; } .inline-cta__inner .btn { width: 100%; justify-content: center; } } /* ============================================================= CLIENT-SIDE WOW — что видит клиент ============================================================= */ .client-side { padding: 100px 0; } .client-side__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; } .client-side__phone { position: relative; display: flex; justify-content: center; padding: 40px 20px; } .client-side__phone::before { content: ''; position: absolute; inset: 10% 5% 10% 5%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); filter: blur(40px); z-index: -1; } .client-side__content .eyebrow { margin-bottom: 12px; } .client-side__content .section-title { text-align: left; } .client-side__content .section-lead { margin-top: 18px; max-width: 560px; } .client-side__list { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; } .client-side__list li { display: flex; gap: 20px; align-items: flex-start; } .client-side__step { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-family: var(--ff-mono); font-weight: 700; font-size: 13px; border: 1px solid var(--accent); } .client-side__list b { display: block; font-size: 16px; margin-bottom: 4px; } .client-side__list p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; } @media (max-width: 992px) { .client-side__inner { grid-template-columns: 1fr; gap: 40px; } .client-side__content .section-title { text-align: center; } .client-side__content .section-lead { margin-left: auto; margin-right: auto; } .client-side__phone { order: -1; } } /* ============================================================= COMPARE TABLE — GLOSS vs альтернативы ============================================================= */ .compare { padding: 100px 0; } .compare__table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; } .compare__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; min-width: 720px; } .compare__table thead th { padding: 18px 16px; text-align: center; font-weight: 600; color: var(--fg-muted); font-size: 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .compare__table thead th:first-child { text-align: left; background: transparent; border: 0; } .compare__table thead th.compare__col--hl { color: var(--accent-fg); background: var(--accent); font-weight: 700; } .compare__table thead th:first-child + th { border-top-left-radius: var(--r-md); } .compare__table thead th:last-child { border-top-right-radius: var(--r-md); } .compare__table tbody td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border); } .compare__table tbody td:first-child { text-align: left; font-weight: 500; color: var(--fg); width: 38%; } .compare__table tbody tr:last-child td { border-bottom: 0; } .compare__table .compare__col--hl { background: var(--accent-soft); } .compare__table tbody tr:last-child td.compare__col--hl { border-bottom-right-radius: var(--r-md); } .compare__table tbody tr:first-child td.compare__col--hl { /* уже скруглено сверху thead */ } .compare__table i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 13px; } .compare__table i.v { background: var(--accent); color: var(--accent-fg); } .compare__table i.x { background: var(--surface-3); color: var(--fg-subtle); } .compare__table i.m { background: rgba(255,184,0,.18); color: var(--accent); } .compare__legend { margin-top: 16px; text-align: center; font-size: 13px; color: var(--fg-subtle); display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; } .compare__legend i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-weight: 700; font-size: 11px; margin-right: 6px; vertical-align: middle; } .compare__legend i.v { background: var(--accent); color: var(--accent-fg); } .compare__legend i.x { background: var(--surface-3); color: var(--fg-subtle); } .compare__legend i.m { background: rgba(255,184,0,.18); color: var(--accent); } /* На мобилке таблица разбирается в карточки: фича + список конкурентов с меткой и значком. GLOSS подсвечивается отдельной плашкой, чтобы вся ценность сравнения была видна без горизонтального скролла. */ @media (max-width: 540px) { .compare__table-wrap { background: transparent; border: 0; padding: 0; overflow: visible; } .compare__table { display: block; min-width: 0; font-size: 14px; } .compare__table thead { display: none; } .compare__table tbody { display: block; } .compare__table tbody tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; padding: 14px 14px 10px; } .compare__table tbody tr:last-child { margin-bottom: 0; } .compare__table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border: 0; text-align: left; width: auto; } .compare__table tbody td:first-child { font-weight: 600; color: var(--fg); font-size: 14.5px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); display: block; } .compare__table tbody td:not(:first-child)::before { color: var(--fg-muted); font-size: 13px; font-weight: 500; margin-right: 12px; } .compare__table tbody td:nth-child(2)::before { content: 'Тетрадь и чаты'; } .compare__table tbody td:nth-child(3)::before { content: 'Excel + WhatsApp'; } .compare__table tbody td:nth-child(4)::before { content: 'Универсальная CRM'; } .compare__table tbody td.compare__col--hl { background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 6px; } .compare__table tbody td.compare__col--hl::before { content: 'GLOSS'; color: var(--accent); font-weight: 700; } /* Закругления у заголовка/подвала больше не нужны — карточный layout */ .compare__table tbody tr:last-child td.compare__col--hl { border-radius: var(--r-sm); } } /* ============================================================= ROI CALCULATOR ============================================================= */ .roi { padding: 100px 0; } .roi__card { max-width: 880px; margin: 0 auto; padding: 40px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; } .roi__card::before { content: ''; position: absolute; top: -60%; left: -10%; width: 480px; height: 480px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%); pointer-events: none; z-index: 0; } .roi__inputs, .roi__result, .roi__hint { position: relative; z-index: 1; } .roi__inputs { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: end; } @media (max-width: 820px) { .roi__inputs { grid-template-columns: 1fr; gap: 20px; } } .roi__field-label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); margin-bottom: 12px; } .roi__select { width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--surface); color: var(--fg); border: 1px solid var(--border); font-family: inherit; font-size: 15px; outline: none; transition: border-color var(--t-base); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; } .roi__select:focus, .roi__select:hover { border-color: var(--accent); } .roi__slider-row { display: flex; align-items: center; gap: 24px; } .roi__slider-row input[type="range"] { flex: 1; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 999px; background: var(--surface-3); outline: none; } .roi__slider-row input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 4px var(--accent-soft); cursor: pointer; transition: transform var(--t-fast); } .roi__slider-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); } .roi__slider-row input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 4px var(--accent-soft); cursor: pointer; } .roi__output { min-width: 120px; text-align: right; font-size: 22px; font-weight: 700; font-family: var(--ff-mono); color: var(--accent); } .roi__result { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; padding: 28px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); } .roi__metric { display: flex; flex-direction: column; align-items: center; text-align: center; } .roi__metric-label { font-size: 13px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .roi__metric-value { font-size: clamp(40px, 6vw, 64px); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--ff-mono); } .roi__metric-suffix { font-size: 14px; color: var(--fg-muted); margin-top: 6px; } .roi__hint { margin-top: 24px; text-align: center; font-size: 14px; color: var(--fg-muted); font-style: italic; } @media (max-width: 768px) { .roi__card { padding: 28px 20px; } .roi__result { grid-template-columns: 1fr; gap: 24px; padding: 20px; } .roi__slider-row { flex-direction: column; align-items: stretch; gap: 16px; } .roi__output { text-align: center; } } /* ============================================================= CASE STUDY ============================================================= */ .case { padding: 80px 0; } .case-card { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--t-base); } .case-card:hover { border-color: var(--accent); } .case-card__quote-wrap { display: flex; flex-direction: column; } .case-card__quote { position: relative; padding-left: 24px; margin: 0 0 24px; font-size: 19px; line-height: 1.6; font-weight: 300; color: var(--fg); font-style: normal; } .case-card__quote::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); } .case-card__author { display: flex; align-items: center; gap: 14px; margin-top: auto; } .case-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; } .case-card__author-name h5 { font-size: 15px; font-weight: 600; margin: 0 0 2px; } .case-card__author-name p { font-size: 13px; color: var(--fg-subtle); } .case-card__results { display: flex; flex-direction: column; gap: 14px; } .case-result { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; transition: border-color var(--t-base); } .case-result:hover { border-color: var(--accent); } .case-result__arrow { color: var(--accent); font-size: 18px; font-weight: 700; margin-top: 1px; flex-shrink: 0; } .case-result__before { font-size: 12px; color: var(--fg-subtle); margin-bottom: 4px; } .case-result__after { font-size: 14px; color: var(--fg); font-weight: 500; } @media (max-width: 820px) { .case-card { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; } } /* ============================================================= TRIAL ============================================================= */ .trial { padding: 80px 0; } .trial-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 60px 52px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-lg); overflow: hidden; } .trial-card__bg { position: absolute; right: -120px; top: -120px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); pointer-events: none; } .trial-card__intro, .trial-card__steps { position: relative; z-index: 1; } .trial-card__intro .eyebrow { margin-bottom: 14px; } .trial-card__intro .section-title { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 16px; } .trial-card__lead { font-size: 15px; line-height: 1.7; color: var(--fg-muted); margin-bottom: 28px; max-width: 460px; } .trial-card__steps { list-style: none; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; } .trial-step { display: flex; align-items: flex-start; gap: 16px; } .trial-step__num { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; } .trial-step h5 { font-size: 15px; font-weight: 600; margin: 0 0 4px; } .trial-step p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; margin: 0; } @media (max-width: 820px) { .trial-card { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; } .trial-card__bg { width: 280px; height: 280px; right: -100px; top: -100px; } } /* ============================================================= SECURITY ============================================================= */ .security { padding: 100px 0; } .security__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .security-card { padding: 26px 22px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--t-base), transform var(--t-base); } .security-card:hover { border-color: var(--accent); transform: translateY(-3px); } .security-card__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--accent); } .security-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .security-card h3 { font-size: 16px; margin-bottom: 8px; } .security-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; } @media (max-width: 992px) { .security__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .security__grid { grid-template-columns: 1fr; } } /* ============================================================= REVEAL ANIMATIONS ============================================================= */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--t-base), transform .8s var(--t-base); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================= ВАУ-АНИМАЦИИ ============================================================= */ /* 1. Hero devices float — MacBook и iPhone слегка покачиваются */ .hero__visual .device-wrap--macbook { animation: floatY 6s ease-in-out infinite; } .hero__visual .device-wrap--iphone { /* iPhone в hero повёрнут на 4° — анимация сохраняет rotate */ animation: iphoneFloat 7.5s ease-in-out infinite; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes iphoneFloat { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-10px); } } /* 2. CTA primary: блик света при hover + сдвиг стрелки */ .btn--primary { position: relative; overflow: hidden; } .btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s ease; pointer-events: none; } .btn--primary:hover::after { transform: translateX(100%); } .btn svg { transition: transform .25s ease; } .btn:hover svg { transform: translateX(4px); } /* 3. Логотип: G-бейдж на hover слегка крутится и пульсирует */ .logo:hover .logo__mark { transform: rotate(-8deg) scale(1.08); } .logo__mark { transition: transform .35s cubic-bezier(.5, 1.6, .5, 1), box-shadow var(--t-base); } .logo:hover .logo__mark { box-shadow: 0 6px 18px -4px var(--accent), 0 0 0 6px var(--accent-soft); } /* 4. ROI: «pop» при изменении значения слайдера */ .roi__metric-value { transition: transform .25s cubic-bezier(.5, 1.5, .5, 1); } .roi__metric-value.is-pop { transform: scale(1.08); } /* 5. Compare: строки таблицы стаггерятся при появлении */ .compare__table tbody tr { opacity: 0; transform: translateX(-12px); transition: opacity .55s ease, transform .55s ease; } .compare__table-wrap.is-visible tbody tr { opacity: 1; transform: translateX(0); } .compare__table-wrap.is-visible tbody tr:nth-child(1) { transition-delay: .00s; } .compare__table-wrap.is-visible tbody tr:nth-child(2) { transition-delay: .05s; } .compare__table-wrap.is-visible tbody tr:nth-child(3) { transition-delay: .10s; } .compare__table-wrap.is-visible tbody tr:nth-child(4) { transition-delay: .15s; } .compare__table-wrap.is-visible tbody tr:nth-child(5) { transition-delay: .20s; } .compare__table-wrap.is-visible tbody tr:nth-child(6) { transition-delay: .25s; } .compare__table-wrap.is-visible tbody tr:nth-child(7) { transition-delay: .30s; } .compare__table-wrap.is-visible tbody tr:nth-child(8) { transition-delay: .35s; } .compare__table-wrap.is-visible tbody tr:nth-child(9) { transition-delay: .40s; } /* 6. Floating CTA: bounce при появлении */ .floating-cta { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); } /* 7. Hero badge: лёгкое «дыхание» glow вокруг плашки */ .badge { animation: badgeBreath 4.5s ease-in-out infinite; } @keyframes badgeBreath { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 28px -6px var(--accent-soft); } } /* 8. Marquee бесшовная лента типов студий */ .trust-marquee { width: 100%; overflow: hidden; position: relative; /* Размытие на краях — ленте не нужны жёсткие края */ -webkit-mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent); } .trust-marquee__track { display: inline-flex; gap: 8px; width: max-content; animation: marquee 30s linear infinite; will-change: transform; } .trust-marquee:hover .trust-marquee__track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 9. SVG-иконки модулей: «прорисовываются» при появлении карточки */ .module-card svg path, .module-card svg circle, .module-card svg rect, .module-card svg ellipse { stroke-dasharray: var(--draw-len, 200); stroke-dashoffset: var(--draw-len, 200); transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); } .module-card.is-visible svg path, .module-card.is-visible svg circle, .module-card.is-visible svg rect, .module-card.is-visible svg ellipse { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .bg-blob, .badge__dot, .badge, .mock__status i, .mock__phone-steps .is-active i, .grad-text, .hero__visual .device-wrap--macbook, .hero__visual .device-wrap--iphone, .trust-marquee__track { animation: none; } .hero__visual .device-wrap--iphone { transform: rotate(4deg); } .btn--primary::after { display: none; } .compare__table tbody tr { opacity: 1; transform: none; } /* SVG draw-on отключаем — иконки сразу видны */ .module-card svg path, .module-card svg circle, .module-card svg rect, .module-card svg ellipse { stroke-dasharray: none; stroke-dashoffset: 0; } } /* ============================================================= RESPONSIVE ============================================================= */ /* large laptop */ @media (max-width: 1100px) { .hero__inner { grid-template-columns: 1fr; } /* На мобильных/планшетах сначала заголовок и CTA, потом скрины — это даёт более быстрое «понимание» страницы при первом скролле. */ .hero__visual { min-height: 360px; margin-top: 24px; width: 100%; max-width: 100%; overflow: visible; } .hero__visual .device-wrap--macbook { --scale: 0.55; margin: 0 auto; } .hero__visual .device-wrap--iphone { --scale: 0.32; /* Привязываем iPhone к правому краю MacBook (макс ~407px при scale 0.55): центр контейнера + половина MacBook ≈ позиция справа от него. */ right: calc(50% - 220px); bottom: -20px; } .pains__grid, .modules__grid { grid-template-columns: repeat(2, 1fr); } .overview__grid { grid-template-columns: repeat(2, 1fr); } .showcase__grid { grid-template-columns: 1fr 1fr; } .showcase__card--big { grid-column: 1 / -1; } .footer__row { grid-template-columns: 1fr; } /* Три блока ссылок не помещались в repeat(3, 1fr) — «Юридическое» с длинными «Договор-оферта»/«Политика ПДн» уезжало за правый край. На узких экранах ставим один столбец, блоки идут друг под другом. */ .footer__links { grid-template-columns: 1fr; gap: 28px; } .gallery__grid { grid-template-columns: repeat(4, 1fr); } .gallery__item--wide { grid-column: span 4; } } /* tablet */ @media (max-width: 820px) { .nav__links { display: none; } .nav__actions .btn { display: none; } .nav__burger { display: flex; } .nav.is-menu-open .nav__links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 16px; background: var(--bg-elev); border-bottom: 1px solid var(--border); } .nav.is-menu-open .nav__links a { width: 100%; padding: 14px 8px; } .nav.is-menu-open .nav__actions .btn { display: inline-flex; } .hero { padding: 60px 0 80px; } .hero__title { font-size: clamp(34px, 8vw, 52px); } .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { width: 100%; } .pains, .overview, .modules, .how, .showcase, .testimonials, .pricing, .faq, .cta, .inline-cta, .client-side, .compare, .roi, .security { padding: 60px 0; } .how__steps { grid-template-columns: 1fr; gap: 32px; } .how__steps::before { display: none; } .how__step { text-align: left; display: grid; grid-template-columns: 72px 1fr; gap: 16px 20px; } .how__step h3, .how__step p, .how__time { grid-column: 2; } .how__num { margin: 0; } .testimonials__grid { grid-template-columns: 1fr; } .pricing__grid { grid-template-columns: 1fr; } .price-card--featured { transform: none; } .price-card--featured:hover { transform: translateY(-4px); } .cta__inner { padding: 40px 24px; } .cta__form { grid-template-columns: 1fr; } } /* tablet — gallery */ @media (max-width: 820px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } .gallery__item, .gallery__item--wide, .gallery__item--phone { grid-column: span 2; } .gallery__item--wide img { height: 240px; } } /* mobile */ @media (max-width: 540px) { .pains__grid, .modules__grid, .overview__grid, .showcase__grid, .gallery__grid { grid-template-columns: 1fr; } .hero { padding: 40px 0 60px; } .hero__visual { min-height: 280px; margin-top: 16px; } .hero__visual .device-wrap--macbook { --scale: 0.42; } .hero__visual .device-wrap--iphone { --scale: 0.26; /* MacBook ~311px при scale 0.42; ставим iPhone у правого края MacBook */ right: calc(50% - 165px); bottom: -16px; } .hero__trust { margin-top: 48px; gap: 24px; } .hero__bullets { gap: 12px 18px; margin-top: 24px; } .section-head { margin-bottom: 40px; } .gallery__item img { height: 200px; } .gallery__item--phone img { height: 320px; } .overview__inner { padding: 40px 24px; } .lightbox { padding: 16px; } } /* ───────────────────────────────────────────── Legal document (agreement.html и аналоги) ───────────────────────────────────────────── */ :root { --doc-border: rgba(255, 255, 255, .08); --doc-border-soft: rgba(255, 255, 255, .05); --doc-stripe: rgba(255, 255, 255, .015); } [data-theme="light"] { --doc-border: rgba(0, 0, 0, .08); --doc-border-soft: rgba(0, 0, 0, .05); --doc-stripe: rgba(0, 0, 0, .02); } .doc { padding: 140px 0 100px; } .doc__wrap { max-width: 880px; } /* ── Шапка документа ─────────────────────────── */ .doc__head { padding-bottom: 48px; margin-bottom: 16px; border-bottom: 1px solid var(--doc-border); } .doc__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; margin: 24px 0 20px; } .doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--fg-muted); font-size: 13px; margin: 0 0 28px; font-family: 'JetBrains Mono', ui-monospace, monospace; } .doc__meta em { font-style: normal; padding: 3px 8px; border-radius: 5px; background: var(--accent-soft); color: var(--fg); font-family: inherit; font-size: 12px; font-weight: 500; } .doc__lead { font-size: 18px; line-height: 1.7; color: var(--fg); margin: 0 0 32px; max-width: 70ch; } /* ── Содержание ──────────────────────────────── */ .doc__toc { background: var(--bg-elev); border: 1px solid var(--doc-border); border-radius: 16px; padding: 28px 32px; margin-top: 32px; } .doc__toc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-muted); margin: 0 0 20px; font-weight: 700; } .doc__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 2px; counter-reset: tocCounter; list-style: none; padding: 0; margin: 0; } .doc__toc li { counter-increment: tocCounter; } .doc__toc a { display: flex; align-items: baseline; gap: 14px; padding: 10px 14px; border-radius: 8px; color: var(--fg-muted); text-decoration: none; font-size: 14px; line-height: 1.4; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .doc__toc a::before { content: counter(tocCounter, decimal-leading-zero); flex: 0 0 auto; min-width: 22px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--accent); opacity: .6; letter-spacing: 0; } .doc__toc a:hover { background: var(--accent-soft); color: var(--fg); transform: translateX(2px); } .doc__toc a:hover::before { opacity: 1; } /* ── Разделы ─────────────────────────────────── */ .doc__section { padding: 56px 0 16px; scroll-margin-top: 100px; } .doc__section + .doc__section { border-top: 1px solid var(--doc-border-soft); } .doc__section h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 28px; padding-left: 18px; border-left: 3px solid var(--accent); color: var(--fg); } .doc__section h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin: 32px 0 14px; color: var(--fg); font-weight: 700; } .doc__section > p { margin: 0 0 16px; line-height: 1.75; color: var(--fg); font-size: 15.5px; } /* ── Нумерованные списки внутри разделов ─────── */ .doc__ol { counter-reset: docItem; list-style: none; padding: 0; margin: 16px 0 18px; } .doc__ol > li { counter-increment: docItem; position: relative; padding: 4px 0 4px 44px; margin-bottom: 14px; line-height: 1.75; font-size: 15.5px; color: var(--fg); } .doc__ol > li::before { content: counter(docItem) "."; position: absolute; left: 0; top: 4px; width: 32px; text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; color: var(--accent); line-height: 1.75; } /* Вложенные подпункты: lower-alpha без счётчика, более лёгкий вид */ .doc__ol ol { list-style: lower-alpha; padding-left: 22px; margin: 10px 0 4px; } .doc__ol ol > li { margin-bottom: 6px; line-height: 1.7; color: var(--fg-muted); } .doc__ol ol > li::marker { color: var(--accent); font-weight: 600; } /* ── Термины (dl) — две колонки на десктопе ──── */ .doc__dl { display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: 0; margin: 16px 0 8px; background: var(--bg-elev); border: 1px solid var(--doc-border); border-radius: 14px; overflow: hidden; } .doc__dl dt, .doc__dl dd { padding: 16px 22px; border-bottom: 1px solid var(--doc-border-soft); line-height: 1.6; } .doc__dl dt { font-weight: 600; color: var(--fg); font-size: 14px; background: var(--doc-stripe); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -0.01em; } .doc__dl dd { margin: 0; color: var(--fg); font-size: 15px; } /* Убираем нижнюю границу у последней пары dt+dd */ .doc__dl > dt:nth-last-of-type(1), .doc__dl > dd:nth-last-of-type(1) { border-bottom: none; } /* ── Ссылки ──────────────────────────────────── */ .doc__link { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; } .doc__link:hover { border-bottom-color: var(--accent); } /* ── Inline-код и заглушки ───────────────────── */ .doc code { font-family: 'JetBrains Mono', ui-monospace, monospace; background: var(--bg-elev); border: 1px solid var(--doc-border); padding: 1px 7px; border-radius: 5px; font-size: 13px; color: var(--fg); } .doc em { font-style: italic; background: var(--accent-soft); padding: 2px 8px; border-radius: 5px; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; color: var(--fg); font-weight: 500; } /* ── Таблицы (реквизиты, контакты) ───────────── */ .doc__table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; background: var(--bg-elev); border-radius: 14px; overflow: hidden; border: 1px solid var(--doc-border); font-size: 14.5px; } .doc__table th, .doc__table td { padding: 14px 20px; text-align: left; vertical-align: top; line-height: 1.5; } .doc__table tbody tr { border-bottom: 1px solid var(--doc-border-soft); } .doc__table tbody tr:last-child { border-bottom: none; } .doc__table tbody tr:nth-child(odd) { background: var(--doc-stripe); } .doc__table th { font-weight: 600; color: var(--fg-muted); width: 42%; } .doc__table td { color: var(--fg); word-break: break-word; } /* ── Note / callout ──────────────────────────── */ .doc__note { display: flex; align-items: flex-start; gap: 12px; margin: 28px 0 0; padding: 16px 20px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; font-size: 13.5px; color: var(--fg); line-height: 1.6; } .doc__note::before { content: '⚠'; flex: 0 0 auto; font-size: 16px; line-height: 1.55; color: var(--accent); } /* ── Адаптив ─────────────────────────────────── */ @media (max-width: 880px) { .doc { padding: 100px 0 64px; } .doc__head { padding-bottom: 32px; } .doc__title { margin-top: 16px; } .doc__lead { font-size: 16px; } .doc__toc { padding: 22px 20px; } .doc__toc ol { grid-template-columns: 1fr; } .doc__section { padding: 40px 0 8px; } .doc__section h2 { padding-left: 14px; margin-bottom: 20px; } .doc__dl { grid-template-columns: 1fr; border-radius: 12px; } .doc__dl dt { border-bottom: none; padding-bottom: 8px; } .doc__dl dd { padding-top: 4px; } .doc__dl > dt + dd { border-bottom: 1px solid var(--doc-border-soft); } .doc__dl > dt:nth-last-of-type(1) + dd { border-bottom: none; } .doc__table { font-size: 13.5px; } .doc__table th, .doc__table td { padding: 12px 14px; } .doc__table th { width: 46%; } .doc__ol > li { padding-left: 38px; font-size: 15px; } } @media (max-width: 480px) { .doc__title { font-size: 28px; } .doc__toc { padding: 18px 16px; } .doc__toc a { padding: 8px 10px; font-size: 13.5px; } .doc__section h2 { font-size: 21px; } }