/* ============================================================ * ИскраБот — компонентные стили для лендингов (дизайн-система v1) * Извлечено из creatives/landing-main-v2/ на 2026-05-13. * * Подключается ПОСЛЕ tailwind.css. Использует: * - DM Sans (Google Fonts, preconnect + link в ) * - токены см. _shared/tokens.md * - паттерны см. _shared/PATTERNS.md * * Если правишь — синхронизируй landing-main-v2/index.html. * ============================================================ */ /* -------- БРЕНД-ПЕРЕМЕННЫЕ -------- */ :root { --iskra-orange-50: #fff7ed; --iskra-orange-100: #ffedd5; --iskra-orange-200: #fed7aa; --iskra-orange-400: #fb923c; --iskra-orange-500: #ea580c; /* основной акцент */ --iskra-orange-600: #c2410c; /* hover */ --iskra-orange-700: #9a3412; --iskra-ink: #0f172a; /* основной текст / заголовки */ --iskra-text: #334155; /* body */ --iskra-muted: #475569; /* lead, второстепенный текст */ --iskra-faint: #64748b; /* мелкий серый */ --iskra-hint: #94a3b8; /* очень мягкий */ --iskra-border: #e5e7eb; --iskra-border-strong: #cbd5e1; --iskra-bg-soft: #f9fafb; --iskra-bg-card: #ffffff; --iskra-shadow-card: 0 1px 3px rgba(15,23,42,0.04); --iskra-shadow-hero: 0 24px 60px -20px rgba(15,23,42,0.18), 0 6px 18px rgba(15,23,42,0.06); --iskra-shadow-glow: 0 10px 30px -8px rgba(234,88,12,0.55), 0 4px 12px rgba(0,0,0,0.18); --iskra-radius-sm: 10px; --iskra-radius-md: 16px; --iskra-radius-lg: 22px; --iskra-radius-pill: 999px; } /* -------- ТИПОГРАФИКА -------- */ html { scroll-behavior: smooth; } body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; color: var(--iskra-ink); } h1, h2, h3 { font-family: 'DM Sans', sans-serif; letter-spacing: -0.02em; } .lead { font-size: 18px; line-height: 1.6; color: var(--iskra-muted); } /* -------- LAYOUT-УТИЛИТЫ (то, чего нет в purged Tailwind) -------- */ /* Если будете расширять — добавьте сюда + соответствующий класс в HTML морды */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-10 { gap: 2.5rem; } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:col-span-3 { grid-column: span 3 / span 3; } .md\:flex-col { flex-direction: column; } .md\:overflow-visible { overflow: visible; } .md\:text-\[60px\] { font-size: 60px; } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .h-48 { height: 12rem; } .object-cover { object-fit: cover; } .max-w-5xl { max-width: 64rem; } .pb-12 { padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .mt-2 { margin-top: .5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-12 { margin-bottom: 3rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .w-full { width: 100%; } .overflow-hidden { overflow: hidden; } .flex-1 { flex: 1 1 0%; } .bg-gray-50 { background-color: var(--iskra-bg-soft); } .text-\[22px\] { font-size: 22px; } .border-gray-200 { border-color: var(--iskra-border); } .border-gray-300 { border-color: #d1d5db; } .border-gray-400 { border-color: #9ca3af; } .hover\:border-gray-500:hover { border-color: #6b7280; } .hover\:border-gray-700:hover { border-color: #374151; } .hover\:text-gray-700:hover { color: #374151; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .overflow-x-auto { overflow-x: auto; } .space-y-2 > * + * { margin-top: .5rem; } .space-y-3 > * + * { margin-top: .75rem; } .scroll-mt-24 { scroll-margin-top: 6rem; } /* -------- HERO ILLUSTRATION (большая картинка с overlay + arrow) -------- */ .hero-illu { position: relative; border-radius: var(--iskra-radius-lg); overflow: hidden; border: 1px solid var(--iskra-border); box-shadow: var(--iskra-shadow-hero); } .hero-illu img { display: block; width: 100%; height: auto; } .hero-illu__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.35) 40%, rgba(15,23,42,0.15) 75%, rgba(15,23,42,0.05) 100%); display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; } .hero-illu__title { color: #ffffff; font-weight: 800; font-size: clamp(32px, 5.5vw, 64px); line-height: 1.05; text-align: center; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,0.35); } .hero-illu__arrow { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: 56px; height: 56px; border-radius: var(--iskra-radius-pill); background: var(--iskra-orange-500); box-shadow: var(--iskra-shadow-glow); display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease, background 0.18s ease; animation: heroArrowBounce 1.8s ease-in-out infinite; } .hero-illu__arrow:hover { background: var(--iskra-orange-600); transform: translateX(-50%) translateY(2px); animation: none; } .hero-illu__arrow:active { transform: translateX(-50%) translateY(4px) scale(0.92); transition: transform 0.12s ease; animation: none; } @keyframes heroArrowBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } @media (max-width: 639px) { .hero-illu__overlay { padding-top: 24px; } .hero-illu__arrow { width: 48px; height: 48px; bottom: 16px; } } /* -------- HEADER (мобильно-десктопные утилиты для кнопки регистрации) -------- */ .mobile-only { display: inline; } .desktop-only { display: none; } @media (min-width: 640px) { .mobile-only { display: none; } .desktop-only { display: inline; } } @media (max-width: 639px) { .header-register { padding-left: 12px; padding-right: 12px; font-size: 13px; } } /* -------- ROLE TABS (горизонтальные pills + панели) -------- */ .role-tabs-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; } @media (max-width: 767px) { .role-tabs-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .role-tabs-bar::-webkit-scrollbar { display: none; } } .role-tab { padding: 8px 16px; border-radius: var(--iskra-radius-pill); border: 1px solid var(--iskra-border); background: #fff; text-align: left; font-size: 14.5px; color: var(--iskra-muted); cursor: pointer; flex-shrink: 0; transition: all 0.15s; white-space: nowrap; } .role-tab:hover { background: #f1f5f9; color: var(--iskra-ink); border-color: var(--iskra-border-strong); } .role-tab--active, .role-tab--active:hover { background: var(--iskra-orange-50); border-color: var(--iskra-orange-200); color: var(--iskra-orange-600); font-weight: 600; } .role-panel { display: none; } .role-panel--active { display: block; } /* -------- TASK LIST (список задач с галочками) -------- */ .task-list { display: grid; grid-template-columns: 1fr; gap: 6px 32px; padding: 24px 28px; margin: 0; list-style: none; background: var(--iskra-bg-card); border: 1px solid var(--iskra-border); border-radius: var(--iskra-radius-md); box-shadow: var(--iskra-shadow-card); } @media (min-width: 768px) { .task-list { grid-template-columns: 1fr 1fr; padding: 28px 32px; } } .task-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--iskra-text); line-height: 1.4; padding: 3px 0; } .task-list li::before { content: '✓'; color: var(--iskra-orange-500); font-weight: 700; flex-shrink: 0; font-size: 16px; line-height: 1.35; } /* -------- PRICING (3 карточки: B2C / B2B / Enterprise) -------- */ .pricing-footer { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; } .pricing-footer--b2c { background: linear-gradient(135deg, var(--iskra-orange-50) 0%, var(--iskra-orange-100) 100%); color: var(--iskra-orange-600); } .pricing-footer--b2b { background: linear-gradient(135deg, var(--iskra-orange-400) 0%, var(--iskra-orange-500) 100%); color: #ffffff; } .pricing-footer--enterprise { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); color: #ffffff; } .pricing-amount { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } .pricing-period { font-size: 14px; opacity: 0.78; margin-top: 2px; } .pricing-cta { display: block; text-align: center; padding: 12px 20px; border-radius: var(--iskra-radius-pill); font-weight: 600; font-size: 15px; transition: transform 0.15s ease, opacity 0.15s ease; } .pricing-cta:active { transform: scale(0.98); } .pricing-cta--b2c { background: var(--iskra-orange-500); color: #ffffff; } .pricing-cta--b2c:hover { background: var(--iskra-orange-600); } .pricing-cta--b2b { background: #ffffff; color: var(--iskra-orange-600); } .pricing-cta--b2b:hover { background: var(--iskra-orange-50); } .pricing-cta--enterprise { background: #ffffff; color: var(--iskra-ink); } .pricing-cta--enterprise:hover { background: #f1f5f9; } /* -------- FAQ (details/summary аккордеон) -------- */ .faq-item { border-bottom: 1px solid var(--iskra-border); padding: 18px 0; } .faq-item summary { cursor: pointer; font-weight: 600; font-size: 17px; color: var(--iskra-ink); list-style: none; padding-right: 24px; position: relative; } .faq-item summary::after { content: '+'; position: absolute; right: 0; font-size: 22px; color: var(--iskra-hint); font-weight: 400; } .faq-item[open] summary::after { content: '−'; } .faq-item p { margin-top: 12px; color: var(--iskra-muted); line-height: 1.65; font-size: 15.5px; } /* -------- FOOTER (4 колонки) -------- */ .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } } .footer-col-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--iskra-ink); margin-bottom: 16px; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-list li { margin-bottom: 8px; font-size: 14px; color: var(--iskra-muted); line-height: 1.5; } .footer-list a { color: var(--iskra-muted); text-decoration: none; transition: color 0.15s; } .footer-list a:hover { color: var(--iskra-ink); }