/* * flekk-design-system v1.0 * ДНК бренда flekk — единая для всей экосистемы. * Источник правды: flekk.ru (Downloads/flekk.html) + flekk-id/app/globals.css * * Подключение: * Выбор продукта: * (без data-product используется нейтральный брендовый синий) */ /* ============ 1. ПРИМИТИВЫ — не использовать в вёрстке напрямую ============ */ :root { /* Палитра бренда */ --fk-blue: #2563EB; --fk-blue-dark: #1D4ED8; --fk-blue-light: #60A5FA; --fk-sky: #0EA5E9; --fk-sky-dark: #0284C7; --fk-indigo: #6366F1; --fk-indigo-dark: #4F46E5; /* Нейтральные (slate) */ --fk-ink: #0F172A; /* основной текст */ --fk-ink-2: #334155; --fk-muted: #64748B; /* вторичный текст */ --fk-faint: #94A3B8; /* подписи, футер */ --fk-line: #E5E7EB; /* бордеры */ --fk-bg: #F7F8FC; /* фон страницы (светлый) */ --fk-surface: #FFFFFF; /* карточки */ /* Тёмная зона (hero, футер, id-секции) */ --fk-dark-0: #0B1020; --fk-dark-1: #1E1B4B; --fk-dark-2: #312E81; --fk-on-dark: #FFFFFF; --fk-on-dark-muted: #CBD5E1; /* Статусы */ --fk-ok: #15803D; --fk-ok-bg: #DCFCE7; --fk-warn: #B45309; --fk-warn-bg: #FEF3C7; --fk-info: #1D4ED8; --fk-info-bg: #EFF6FF; --fk-err: #DC2626; /* Форма */ --fk-radius: 18px; /* карточки */ --fk-radius-md: 14px; /* плитки, строки */ --fk-radius-sm: 12px; /* кнопки, инпуты */ --fk-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --fk-shadow-lg: 0 24px 60px rgba(15,23,42,.12); --fk-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* ============ 2. СЕМАНТИКА — то, что используется в вёрстке ============ */ /* Акцент по умолчанию = брендовый синий (нейтральный flekk / Flekk ID) */ --accent: var(--fk-blue); --accent-dark: var(--fk-blue-dark); --accent-glow: rgba(37, 99, 235, .35); /* тень под primary-кнопкой */ --text: var(--fk-ink); --text-muted: var(--fk-muted); --border: var(--fk-line); --radius: var(--fk-radius); /* Совместимость со старым кодом flekk.ru / flekk-id */ --primary: var(--accent); --primary-dark: var(--accent-dark); } /* ============ 3. АКЦЕНТЫ ПРОДУКТОВ (как в блоке «Три продукта») ============ */ /* Только основная линейка Hub / Чек / CRM. Vibe и Abyss — отдельные инструменты, в общую систему НЕ входят. */ [data-product="hub"] { --accent: var(--fk-sky); --accent-dark: var(--fk-sky-dark); --accent-glow: rgba(14, 165, 233, .35); } [data-product="chek"] { --accent: var(--fk-blue); --accent-dark: var(--fk-blue-dark); --accent-glow: rgba(37, 99, 235, .35); } [data-product="crm"] { --accent: var(--fk-indigo); --accent-dark: var(--fk-indigo-dark); --accent-glow: rgba(99, 102, 241, .35); } /* id, flekk.ru, klimontov — нейтральный брендовый синий (дефолт) */ /* ============ 4. БАЗА ============ */ .fk-body { font-family: var(--fk-font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--fk-bg); -webkit-font-smoothing: antialiased; } /* Тёмный градиентный фон (hero / страницы входа) */ .fk-dark { background: linear-gradient(180deg, var(--fk-dark-0) 0%, var(--fk-dark-1) 60%, var(--fk-dark-2) 100%); color: var(--fk-on-dark); } /* Радиальные «свечения» поверх тёмного фона */ .fk-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px circle at 15% 20%, rgba(99,102,241,.35), transparent 60%), radial-gradient(700px circle at 85% 80%, rgba(6,182,212,.25), transparent 60%), radial-gradient(500px circle at 50% 100%, rgba(124,58,237,.3), transparent 60%); } /* Логотип: flekk + цветная точка */ .fk-logo { font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--text); text-decoration: none; } .fk-logo span { color: var(--accent); } .fk-dark .fk-logo { color: var(--fk-on-dark); } .fk-dark .fk-logo span { color: var(--fk-blue-light); } /* ============ 5. КОМПОНЕНТЫ ============ */ .fk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--fk-radius-sm); font-weight: 600; font-size: 15px; font-family: inherit; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all .15s ease; } .fk-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px var(--accent-glow); } .fk-btn-primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); } .fk-btn-outline { background: var(--fk-surface); color: var(--text); border-color: var(--border); } .fk-btn-outline:hover { border-color: var(--fk-faint); background: #F8FAFC; } .fk-btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); } .fk-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; } .fk-btn-block { width: 100%; } .fk-card { background: var(--fk-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--fk-shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .fk-card-hover:hover { transform: translateY(-4px); box-shadow: var(--fk-shadow-lg); } .fk-input { width: 100%; padding: 12px 14px; border-radius: var(--fk-radius-sm); border: 1px solid var(--border); font-size: 15px; font-family: inherit; outline: none; transition: border-color .15s ease; box-sizing: border-box; } .fk-input:focus { border-color: var(--accent); } .fk-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; } .fk-status { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; letter-spacing: .02em; } .fk-status-live { background: var(--fk-ok-bg); color: var(--fk-ok); } .fk-status-beta { background: var(--fk-info-bg); color: var(--fk-info); } .fk-status-soon { background: var(--fk-warn-bg); color: var(--fk-warn); } .fk-badge { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--fk-on-dark-muted); } .fk-link { color: var(--accent); text-decoration: none; font-weight: 500; transition: color .15s ease; } .fk-link:hover { color: var(--accent-dark); } /* Иконка продукта — градиент от акцента в темноту, как на карточках flekk.ru */ .fk-prod-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--fk-radius-sm); font-size: 20px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); } /* Заголовки секций */ .fk-h1 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .fk-h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .fk-h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }