/* ═══════════════════════════════════════════════════════════ landing.css — BookAR · единая дизайн-система сайта Используется: лендинг, контентные страницы (тарифы/оферта/ контакты/конфиденциальность) и AR-приложение (index.html). Две темы: • СВЕТЛАЯ — Lpalo (peach-paper + charcoal-ink + flat) • ТЁМНАЯ — AuthKit (frosted glass at midnight) Переключение: data-theme="dark" на , ключ book_theme. ═══════════════════════════════════════════════════════════ */ /* ── Токены: СВЕТЛАЯ тема (Lpalo) ── */ :root { --peach: #f6e0db; --ink: #000000; --snow: #ffffff; --accent: #ef724f; /* Ember Orange */ --accent-deep: #d85734; --accent-magenta: #981082; --accent-yellow: #e7db4c; --accent-mint: #ace2df; --accent-blue: #84bfff; --accent-lilac: #e69dff; --font-display: 'Alfa Slab One', ui-sans-serif, system-ui, sans-serif; --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif; --radius-pill: 47px; --radius-card: 40px; --radius-sm: 10px; --card-bg: var(--snow); --card-border-w: 2px; --card-border: var(--ink); --card-shadow: 0 24px 48px rgba(152, 16, 130, 0.08); --text-muted: rgba(0, 0, 0, 0.72); --text-helper: rgba(0, 0, 0, 0.5); --hairline: rgba(0, 0, 0, 0.12); --frost: rgba(255, 255, 255, 0.55); --frost-hover: rgba(255, 255, 255, 0.8); --mesh-a: rgba(239, 114, 79, 0.20); --mesh-b: rgba(132, 191, 255, 0.18); --mesh-c: rgba(230, 157, 255, 0.16); } /* ── Токены: ТЁМНАЯ тема (AuthKit) ── */ [data-theme="dark"] { --peach: #05060f; --ink: #d1e4fa; --snow: #0e1220; --accent: #663af3; --accent-deep: #7c5cff; --accent-magenta: #5b21b6; --accent-yellow: #232b3d; --accent-mint: #163b33; --accent-blue: #173252; --accent-lilac: #2a1e3f; --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --radius-pill: 14px; --radius-card: 16px; --radius-sm: 6px; --card-bg: rgba(14, 18, 32, 0.82); --card-border-w: 1px; --card-border: rgba(186, 215, 247, 0.12); --card-shadow: inset 0 1px 1px rgba(216, 236, 248, 0.12), inset 0 24px 48px rgba(168, 216, 245, 0.04), 0 16px 32px rgba(0, 0, 0, 0.3); --text-muted: #c7d3ea; --text-helper: #9da7ba; --hairline: rgba(186, 215, 247, 0.12); --frost: rgba(186, 214, 247, 0.06); --frost-hover: rgba(186, 214, 247, 0.12); --mesh-a: rgba(102, 58, 243, 0.22); --mesh-b: rgba(23, 50, 82, 0.30); --mesh-c: rgba(42, 30, 63, 0.28); } /* ── Сброс и база ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html, body { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; overflow-x: hidden; background-color: var(--peach); transition: background-color 0.35s ease; line-height: 1.6; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ── Фон: анимированный mesh (обе темы) ── */ .bg-mesh { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .bg-mesh::before, .bg-mesh::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.7; } .bg-mesh::before { width: 52vw; height: 52vw; top: -16vw; left: -10vw; background: var(--mesh-a); animation: driftA 22s ease-in-out infinite; } .bg-mesh::after { width: 46vw; height: 46vw; bottom: -14vw; right: -8vw; background: var(--mesh-b); animation: driftB 26s ease-in-out infinite; } @keyframes driftA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 4vw) scale(1.08); } } @keyframes driftB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5vw, -4vw) scale(1.1); } } /* Светлая: картинка поверх peach, полупрозрачная */ html:not([data-theme="dark"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url('/admin/image.webp'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.16; } /* Тёмная: halo + blueprint-сетка */ [data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1100px 480px at 50% -8%, rgba(124, 145, 182, 0.16), transparent 62%), linear-gradient(rgba(186, 215, 247, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 215, 247, 0.05) 1px, transparent 1px); background-size: auto, 80px 80px, 80px 80px; background-attachment: fixed; } /* ── Индикатор прогресса скролла ── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: linear-gradient(90deg, var(--accent), var(--accent-magenta)); transition: width 0.1s linear; } /* ── Навигация ── */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(18px, 4vw, 40px); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); background: color-mix(in srgb, var(--peach) 74%, transparent); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background 0.3s ease; } .nav.scrolled { border-bottom-color: var(--hairline); } .nav-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.5px; color: var(--ink); } .nav-brand .mark { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.18); } [data-theme="light"] .nav-brand .mark { color: var(--ink); } .nav-brand .mark svg { width: 20px; height: 20px; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { padding: 8px 15px; border-radius: var(--radius-pill); color: var(--ink); font-size: 14px; font-weight: 700; transition: background 0.15s, color 0.15s; white-space: nowrap; } .nav-links a:hover { background: var(--frost-hover); } .nav-cta { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.16); transition: transform 0.15s, background 0.15s; white-space: nowrap; } [data-theme="light"] .nav-cta { color: var(--ink); } .nav-cta:hover { background: var(--accent-deep); transform: translateY(-1px); } /* ── Переключатель темы ── */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--card-bg); border: var(--card-border-w) solid var(--card-border); border-radius: var(--radius-pill); box-shadow: var(--card-shadow); cursor: pointer; transition: background 0.15s, transform 0.12s; backdrop-filter: blur(12px); -webkit-tap-highlight-color: transparent; white-space: nowrap; } .theme-toggle:hover { background: var(--frost-hover); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle svg { flex-shrink: 0; } /* ── Контейнер ── */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); } /* ── Типографика ── */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; line-height: 1.06; letter-spacing: -0.5px; color: var(--ink); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] .display { background: linear-gradient(180deg, #eaf3fc 0%, #9cc4ef 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h1 { font-size: clamp(48px, 10vw, 128px); } h2 { font-size: clamp(34px, 5.4vw, 68px); } h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: 0; } .lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--text-muted); line-height: 1.65; max-width: 720px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--text-helper); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } /* ── Секции ── */ section { padding: clamp(72px, 10vw, 132px) 0; position: relative; } .section-head { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; } .section-head .eyebrow { margin-bottom: 16px; } .section-head h2 { margin-bottom: 20px; } .section-head .lead { margin: 0 auto; } /* ── Кнопки ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 14px 34px; border-radius: var(--radius-pill); border: var(--card-border-w) solid var(--card-border); font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.16s, transform 0.16s, box-shadow 0.16s; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: #fff; border: none; box-shadow: 0 12px 28px rgba(0,0,0,0.18); } [data-theme="light"] .btn-primary { color: var(--ink); } .btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); } .btn-ghost { background: var(--snow); color: var(--ink); } .btn-ghost:hover { background: var(--frost-hover); transform: translateY(-2px); } [data-theme="dark"] .btn-primary { box-shadow: inset 0 0 0 1px rgba(186,215,247,0.14), 0 8px 24px rgba(102,58,243,0.32); } [data-theme="dark"] .btn-ghost { background: var(--frost); border: none; box-shadow: inset 0 0 0 1px var(--card-border); } [data-theme="dark"] .btn-ghost:hover { background: var(--frost-hover); } /* Ripple */ .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.42); transform: scale(0); animation: ripple 0.62s ease-out; pointer-events: none; } [data-theme="dark"] .ripple { background: rgba(255,255,255,0.2); } @keyframes ripple { to { transform: scale(2.7); opacity: 0; } } /* ── HERO ── */ .hero { padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 88px); text-align: center; position: relative; } .hero .eyebrow { margin-bottom: 22px; } .hero h1 { margin-bottom: 24px; } .hero h1 .grad { display: inline-block; background: linear-gradient(115deg, var(--accent) 10%, var(--accent-magenta) 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .hero h1 .grad { background: linear-gradient(115deg, #9d7bff 0%, #63a4f7 100%); -webkit-background-clip: text; background-clip: text; } .hero .lead { margin: 0 auto 34px; max-width: 680px; } .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Продуктовая сцена */ .product-stage { margin-top: clamp(44px, 6vw, 76px); display: flex; justify-content: center; perspective: 1400px; } .phone { position: relative; width: min(320px, 84vw); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 10px; background: var(--card-bg); border: var(--card-border-w) solid var(--card-border); box-shadow: var(--card-shadow); transform: rotateX(6deg) rotateY(-4deg); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .phone:hover { transform: rotateX(2deg) rotateY(0deg); } .phone .notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 90px; height: 20px; border-radius: 12px; background: var(--ink); opacity: 0.14; z-index: 2; } .phone .screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: linear-gradient(170deg, var(--accent-blue) 0%, transparent 50%), linear-gradient(350deg, var(--accent-mint) 0%, transparent 55%), linear-gradient(20deg, var(--accent-lilac) 0%, transparent 60%), var(--snow); } .phone .page { position: absolute; inset: 16px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; overflow: hidden; } [data-theme="dark"] .phone .page { background: #10162a; } .phone .page svg { width: 100%; height: 100%; } .phone .scanline { position: absolute; left: 8%; right: 8%; height: 2px; top: 30%; background: var(--accent); opacity: 0; box-shadow: 0 0 16px 2px var(--accent); z-index: 3; } .phone.alive .scanline { opacity: 0.9; animation: scan 2.4s ease-in-out infinite; } @keyframes scan { 0% { top: 18%; } 50% { opacity: 0.35; } 100% { top: 82%; } } .phone .float-badge { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 14px; background: var(--card-bg); border: var(--card-border-w) solid var(--card-border); box-shadow: var(--card-shadow); font-size: 13px; font-weight: 700; color: var(--ink); backdrop-filter: blur(10px); animation: bob 3.4s ease-in-out infinite; } .phone .float-badge svg { width: 16px; height: 16px; } .phone .fb-1 { top: 12%; left: -18%; } .phone .fb-2 { bottom: 16%; right: -14%; animation-delay: 1.4s; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ── Лого-лента доверия ── */ .trust { padding: 28px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .trust .wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); } .trust-item { font-family: var(--font-display); font-size: clamp(14px, 1.6vw, 18px); color: var(--text-helper); opacity: 0.75; letter-spacing: 0.5px; } /* ── Демо (интерактивное оживление) ── */ .demo-stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 72px); align-items: center; } @media (max-width: 860px) { .demo-stage { grid-template-columns: 1fr; } } .live-book { position: relative; aspect-ratio: 4 / 5; max-width: 480px; margin: 0 auto; width: 100%; border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; } .live-book .scene { position: absolute; inset: 14px; border-radius: calc(var(--radius-card) - 8px); overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(165deg, var(--accent-blue) 0%, transparent 46%), linear-gradient(345deg, var(--accent-mint) 0%, transparent 50%), linear-gradient(20deg, var(--accent-lilac) 0%, transparent 58%), var(--snow); } .live-book .scene svg { width: 100%; height: 100%; } .live-book .scanline { position: absolute; left: 8%; right: 8%; height: 2px; top: 26%; background: var(--accent); opacity: 0; box-shadow: 0 0 16px 2px var(--accent); z-index: 3; } .live-book .tap-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-helper); z-index: 4; } .live-book.alive .scanline { opacity: 0.9; animation: scan 2s ease-in-out infinite; } .live-book.alive .scene .sun { animation: sunPulse 2.4s ease-in-out infinite; } .live-book.alive .scene .bird { animation: fly 3s ease-in-out infinite; } .live-book.alive .scene .wave { animation: waveMove 1.6s ease-in-out infinite; } @keyframes sunPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes fly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(22px, -16px); } } @keyframes waveMove { 0%,100% { transform: translateX(0); } 50% { transform: translateX(10px); } } .split-body .eyebrow { margin-bottom: 14px; } .split-body h2 { margin-bottom: 18px; } .split-body p { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 16px; } .split-body ul { list-style: none; } .split-body li { padding: 9px 0 9px 32px; position: relative; color: var(--text-muted); font-size: 16px; } .split-body li::before { content: ""; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/cover no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/cover no-repeat; } /* ── Шаги ── */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: clamp(26px, 3vw, 34px) 24px; border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); transition: transform 0.2s ease; } .step:hover { transform: translateY(-5px); } .step-num { font-family: var(--font-display); font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--accent); margin-bottom: 14px; -webkit-text-stroke: 1.5px var(--accent); -webkit-text-fill-color: transparent; } .step h3 { margin-bottom: 9px; } .step p { color: var(--text-muted); font-size: 15px; line-height: 1.6; } /* ── Карточки ── */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } } .card { padding: clamp(28px, 3vw, 36px) 26px; border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); transition: transform 0.22s ease, box-shadow 0.22s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px rgba(0,0,0,0.14); } .card .ico { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); margin-bottom: 18px; background: var(--accent-mint); border: var(--card-border-w) solid var(--card-border); color: var(--ink); } [data-theme="dark"] .card .ico { background: var(--accent-lilac); } .card .ico svg { width: 26px; height: 26px; } .card h3 { margin-bottom: 10px; } .card p { color: var(--text-muted); font-size: 15px; line-height: 1.62; } /* ── Split-секции ── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 64px); align-items: center; } .split.rev .split-media { order: 2; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.rev .split-media { order: 0; } } .split-media { border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 28px; transition: transform 0.3s ease; } .split-media:hover { transform: translateY(-4px); } .split-media svg { width: min(72%, 260px); height: auto; } /* ── Сравнение ── */ .compare-wrap { overflow-x: auto; border-radius: var(--radius-card); } .compare { width: 100%; min-width: 560px; border-collapse: collapse; border-radius: var(--radius-card); overflow: hidden; border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); } .compare th, .compare td { padding: clamp(16px, 2vw, 22px); text-align: left; border-bottom: 1px solid var(--hairline); font-size: 15px; } .compare thead th { font-family: var(--font-display); font-size: 17px; color: var(--ink); } .compare tbody th { color: var(--text-muted); font-weight: 500; } .compare tr:last-child td, .compare tr:last-child th { border-bottom: none; } .compare .bad { color: var(--text-helper); } .compare .good { color: var(--accent); font-weight: 700; white-space: nowrap; } [data-theme="dark"] .compare .good { color: #9d7bff; } /* ── Тарифы ── */ .pricing { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 18px); align-items: stretch; } @media (max-width: 1120px) { .pricing { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .pricing { grid-template-columns: 1fr; } } .plan { display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3vw, 32px) 22px; border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); text-align: center; transition: transform 0.2s ease; } .plan:hover { transform: translateY(-5px); } .plan.featured { background: var(--accent-mint); border-color: var(--accent); position: relative; } .plan.featured::before { content: "Популярный"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } [data-theme="light"] .plan.featured::before { color: var(--ink); } [data-theme="dark"] .plan.featured { background: var(--frost); border-color: rgba(102,58,243,0.6); box-shadow: inset 0 0 0 1px rgba(102,58,243,0.5), 0 8px 24px rgba(102,58,243,0.25); } .plan-name { font-family: var(--font-display); font-size: 21px; } .plan-price { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; } .plan-price small { font-family: var(--font-body); font-size: 13px; color: var(--text-helper); font-weight: 400; } .plan-desc { font-size: 13px; color: var(--text-muted); min-height: 38px; } .plan ul { list-style: none; text-align: left; font-size: 14px; color: var(--text-muted); margin-top: 4px; } .plan ul li { padding: 4px 0 4px 22px; position: relative; } .plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; } .plan .btn { margin-top: auto; width: 100%; } /* ── Отзывы ── */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } } .quote { padding: clamp(26px, 3vw, 32px) 26px; border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 16px; } .quote .stars { color: var(--accent); font-size: 15px; letter-spacing: 2px; } .quote p { font-size: 16px; line-height: 1.7; color: var(--ink); } .quote .who { margin-top: auto; display: flex; align-items: center; gap: 12px; } .quote .who .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--ink); font-size: 15px; } .quote .who .meta { font-size: 14px; color: var(--text-helper); font-weight: 700; } .quote .who .meta small { display: block; font-weight: 400; opacity: 0.7; } /* ── FAQ ── */ .faq { max-width: 780px; margin: 0 auto; } .faq details { border-radius: var(--radius-sm); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); margin-bottom: 14px; overflow: hidden; transition: border-color 0.2s ease; } .faq details[open] { border-color: var(--accent); } .faq summary { padding: 20px 24px; cursor: pointer; font-weight: 700; font-size: 16px; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .chev { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; transition: transform 0.25s ease; } [data-theme="light"] .faq summary .chev { color: var(--ink); } .faq details[open] summary .chev { transform: rotate(45deg); } .faq .faq-a { padding: 0 24px 20px; color: var(--text-muted); font-size: 15px; line-height: 1.7; } /* ── CTA ── */ .cta { text-align: center; padding: clamp(90px, 12vw, 150px) 0; position: relative; } .cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 340px at 50% 50%, var(--mesh-a), transparent 70%); pointer-events: none; } .cta h2 { margin-bottom: 20px; } .cta .lead { margin: 0 auto 34px; } /* ── Footer ── */ .footer { border-top: 1px solid var(--hairline); padding: clamp(44px, 6vw, 64px) 0 clamp(40px, 5vw, 56px); } .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36px; } .footer-brand { font-family: var(--font-display); font-size: 20px; color: var(--ink); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer p { color: var(--text-helper); font-size: 14px; max-width: 340px; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; } .footer-links a { padding: 8px 15px; border-radius: var(--radius-pill); background: var(--snow); border: var(--card-border-w) solid var(--card-border); color: var(--ink); font-size: 14px; font-weight: 700; transition: background 0.15s; } .footer-links a:hover { background: var(--frost-hover); } [data-theme="dark"] .footer-links a { background: var(--frost); border: none; box-shadow: inset 0 0 0 1px var(--card-border); } .footer-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hairline); text-align: center; font-size: 13px; color: var(--text-helper); } /* ── Что можно оживить (use cases) ── */ .uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 18px); } @media (max-width: 1000px) { .uc-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .uc-grid { grid-template-columns: 1fr; } } .uc { padding: 24px 18px; border-radius: var(--radius-sm); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .uc:hover { transform: translateY(-5px); box-shadow: 0 32px 60px rgba(0,0,0,0.14); } .uc .uc-ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); margin: 0 auto 12px; background: var(--accent-mint); border: var(--card-border-w) solid var(--card-border); color: var(--ink); } [data-theme="dark"] .uc .uc-ico { background: var(--accent-lilac); } .uc .uc-ico svg { width: 24px; height: 24px; } .uc h3 { font-size: 17px; margin-bottom: 6px; } .uc p { color: var(--text-muted); font-size: 13px; line-height: 1.55; } /* ── Для бизнеса ── */ .business-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); } @media (max-width: 760px) { .business-grid { grid-template-columns: 1fr; } } .biz-card { padding: clamp(28px, 3vw, 36px) 26px; border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); } .biz-card.wide { grid-column: 1 / -1; } .biz-card h3 { margin-bottom: 16px; } .biz-card ul { list-style: none; } .biz-card li { padding: 7px 0 7px 30px; position: relative; color: var(--text-muted); font-size: 15px; } .biz-card li::before { content: ""; position: absolute; left: 0; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/cover no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/cover no-repeat; } .biz-tags { display: flex; flex-wrap: wrap; gap: 10px; } .biz-tag { padding: 9px 16px; border-radius: var(--radius-pill); background: var(--snow); border: var(--card-border-w) solid var(--card-border); color: var(--ink); font-size: 14px; font-weight: 700; } [data-theme="dark"] .biz-tag { background: var(--frost); border: none; box-shadow: inset 0 0 0 1px var(--card-border); } /* ── Reveal при скролле ── */ /* ── Reveal при скролле ── */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ── Курсор-свечение ── */ .cursor-glow { position: fixed; top: 0; left: 0; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, var(--mesh-a), transparent 62%); will-change: transform; opacity: 0; transition: opacity 0.4s ease; } @media (hover: hover) { .cursor-glow { opacity: 1; } } /* ── Адаптивность ── */ @media (max-width: 560px) { .nav-links a { display: none; } section { padding: 60px 0; } .phone .fb-1 { left: -8%; } .phone .fb-2 { right: -6%; } } /* ═══════════════════════════════════════════════════════════ КОНТЕНТНЫЕ СТРАНИЦЫ (тарифы / оферта / контакты / конфиденциальность) + AR-приложение (index.html) ═══════════════════════════════════════════════════════════ */ /* ── Хедер страницы ── */ .page-hero { padding: clamp(44px, 7vw, 84px) 0 clamp(24px, 4vw, 44px); text-align: center; } .page-hero h1 { font-size: clamp(40px, 7vw, 76px); margin-bottom: 16px; } .page-hero .lead { margin: 0 auto; } /* ── Документ (prose): оферта / контакты / конфиденциальность ── */ .doc { max-width: 860px; margin: 0 auto; padding: clamp(30px, 4.5vw, 52px); border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); } .doc h2 { font-size: clamp(24px, 3vw, 32px); margin: 34px 0 14px; letter-spacing: -0.3px; } .doc h3 { margin: 22px 0 10px; } .doc p { color: var(--text-muted); font-size: 16px; line-height: 1.75; margin: 12px 0; } .doc ul, .doc ol { margin: 10px 0 10px 22px; color: var(--text-muted); font-size: 16px; line-height: 1.7; } .doc li { margin: 8px 0; } .doc strong { color: var(--ink); } .doc a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .doc .doc-updated { font-size: 14px; color: var(--text-helper); } .pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2vw, 22px); margin: clamp(28px, 4vw, 40px) 0; } .pkg-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3vw, 32px) 24px; border-radius: var(--radius-card); border: var(--card-border-w) solid var(--card-border); background: var(--card-bg); box-shadow: var(--card-shadow); text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .pkg-card:hover { transform: translateY(-5px); box-shadow: 0 32px 60px rgba(0,0,0,0.14); } .pkg-card.featured { background: var(--accent-mint); border-color: var(--accent); } [data-theme="dark"] .pkg-card.featured { background: var(--frost); border-color: rgba(102,58,243,0.6); box-shadow: inset 0 0 0 1px rgba(102,58,243,0.5), 0 8px 24px rgba(102,58,243,0.25); } .pkg-tagline { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-helper); } .pkg-name { font-family: var(--font-display); font-size: 22px; color: var(--ink); } .pkg-price { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; color: var(--ink); } .pkg-price small { font-family: var(--font-body); font-size: 13px; color: var(--text-helper); font-weight: 400; } .pkg-price-from { font-size: 15px; color: var(--text-helper); font-weight: 400; } .pkg-desc { font-size: 14px; color: var(--text-muted); min-height: 40px; } .free-label { font-family: var(--font-display); font-size: 30px; color: var(--ink); } .pkg-features { text-align: left; font-size: 14px; color: var(--text-muted); margin: 4px 0 0 4px; line-height: 1.6; list-style: none; } .pkg-features li { margin: 4px 0; position: relative; padding-left: 20px; } .pkg-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; } .addon-group { margin: 36px 0 8px; } .addon-group h3 { margin-bottom: 6px; } .addon-group .addon-group-desc { font-size: 15px; color: var(--text-muted); } .btn-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; margin-top: auto; border-radius: var(--radius-pill); background: var(--accent); color: #fff; border: none; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,0.16); transition: background 0.16s, transform 0.16s; position: relative; overflow: hidden; } [data-theme="light"] .btn-buy { color: var(--ink); } .btn-buy:hover:not(:disabled) { background: var(--accent-deep); transform: translateY(-2px); } .btn-buy:disabled { background: var(--frost); color: var(--text-helper); cursor: default; box-shadow: none; } [data-theme="dark"] .btn-buy { box-shadow: inset 0 0 0 1px rgba(186,215,247,0.14), 0 8px 24px rgba(102,58,243,0.32); } /* ── Реквизиты (contacts) ── */ .req-table { width: 100%; border-collapse: collapse; margin: 18px 0; } .req-table td { padding: 14px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; font-size: 15px; } .req-table td:first-child { color: var(--text-helper); white-space: nowrap; width: 42%; } .req-table td:last-child { color: var(--ink); font-weight: 600; } .req-table tr:last-child td { border-bottom: none; } /* ── Перекрёстная навигация + назад ── */ .site-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; } .site-nav a, .back-link { padding: 10px 18px; border-radius: var(--radius-pill); background: var(--snow); border: var(--card-border-w) solid var(--card-border); color: var(--ink); font-size: 14px; font-weight: 700; transition: background 0.15s, transform 0.12s; } .site-nav a:hover, .back-link:hover { background: var(--frost-hover); transform: translateY(-1px); } [data-theme="dark"] .site-nav a, [data-theme="dark"] .back-link { background: var(--frost); border: none; box-shadow: inset 0 0 0 1px var(--card-border); } .back-link { display: inline-flex; align-items: center; margin-top: 24px; } /* ── Полноэкранное AR-приложение (index.html) ── */ body.app { height: 100vh; overflow: hidden; } .app-theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 70; } .app-shell { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 32px); } .screen { display: none; width: 100%; max-width: 720px; } .screen.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .screen-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(16px, 2.5vw, 26px); padding: clamp(28px, 5vw, 52px); background: var(--card-bg); border: var(--card-border-w) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); backdrop-filter: blur(12px); } .logo-icon { width: clamp(64px, 9vw, 110px); height: clamp(64px, 9vw, 110px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-card); background: var(--accent-mint); border: var(--card-border-w) solid var(--card-border); color: var(--ink); } [data-theme="dark"] .logo-icon { background: var(--accent-lilac); } .logo-icon svg { width: 55%; height: 55%; } .app-title { font-family: var(--font-display); font-size: clamp(36px, 8vw, 76px); line-height: 1.08; letter-spacing: -0.5px; } [data-theme="dark"] .app-title { background: linear-gradient(180deg, #eaf3fc 0%, #9cc4ef 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tagline { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-helper); } .description { font-size: clamp(15px, 1.6vw, 19px); color: var(--text-muted); line-height: 1.6; } .instructions { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; } .instruction-text { font-size: 14px; font-weight: 700; color: var(--ink); } .instruction-sub { font-size: 12px; color: var(--text-helper); } .privacy-note { font-size: 12px; color: var(--text-helper); line-height: 1.5; } .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; } .site-footer-links a { padding: 7px 15px; border-radius: var(--radius-pill); background: var(--snow); border: var(--card-border-w) solid var(--card-border); color: var(--ink); font-size: 13px; font-weight: 700; transition: background 0.15s; } .site-footer-links a:hover { background: var(--frost-hover); } [data-theme="dark"] .site-footer-links a { background: var(--frost); border: none; box-shadow: inset 0 0 0 1px var(--card-border); } /* Спиннер + прогресс */ .spinner { width: 46px; height: 46px; border: 3px solid var(--card-border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .progress-bar { width: 100%; max-width: 280px; height: 8px; background: var(--frost); border-radius: var(--radius-pill); overflow: hidden; } .progress-fill { width: 0; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.3s ease; } .progress-text { font-size: 14px; font-weight: 700; color: var(--text-helper); } /* Экраны ошибок */ .error-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-card); background: var(--accent-yellow); border: var(--card-border-w) solid var(--card-border); font-size: 40px; margin: 0 auto; } .error-title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; } .error-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .help-details { width: 100%; max-width: 380px; text-align: left; margin-top: 8px; } .help-details summary { font-weight: 700; cursor: pointer; padding: 8px 0; color: var(--ink); } .help-content { font-size: 13px; color: var(--text-muted); padding: 8px 0; line-height: 1.6; } .help-content p { margin: 4px 0; } /* AR-экран */ #ar-screen { position: fixed; inset: 0; z-index: 60; max-width: none; padding: 0; background: #000; } .ar-frame { width: 100%; height: 100%; border: none; display: block; } /* ── Доступность ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bg-mesh::before, .bg-mesh::after, .phone .scanline, .live-book .scanline, .phone .float-badge, .live-book.alive .scene .sun, .live-book.alive .scene .bird, .live-book.alive .scene .wave, .spinner { animation: none; } .screen.active { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .btn, .card, .plan, .step, .pkg-card, .btn-buy, .site-nav a, .back-link { transition: none; } .cursor-glow { display: none; } }