/* ===== Базовые сбросы и переменные ===== Цвета вынесены в CSS-переменные (:root) — это позволяет переключать тему страницы одной строкой: достаточно заменить значения переменных под селектором [data-theme="dark"]. Никаких жёстко зашитых цветов в правилах ниже нет (где они были — переведены на переменные). */ :root { /* Бренд/акценты */ --primary: #2563eb; --primary-dark: #1d4ed8; /* фон активной ссылки, hover кнопки */ /* Поверхности и текст (светлая тема) */ --bg: #f1f5f9; /* фон страницы */ --card: #ffffff; /* фон карточек/таблиц/навбара */ --text: #0f172a; /* основной текст */ --muted: #64748b; /* приглушённый текст */ --border: #e2e8f0; /* рамки */ --success: #16a34a; --danger: #dc2626; --warning: #d97706; /* Мягкие подложки (шапка таблицы, фильтры, бейджи, алерты). В светлой теме — пастельные, в тёмной — приглушённые через rgba, чтобы гармонировать с тёмным фоном. */ --subtle-bg: #f8fafc; /* шапка таблицы, hover строк, фильтры, транскрипт */ --ok-bg: #dcfce7; /* бейдж/алерт «успех» */ --warn-bg: #fef3c7; /* бейдж/алерт «в работе/ожидание» */ --danger-bg: #fee2e2; /* бейдж/алерт «ошибка» */ --info-bg: #dbeafe; /* бейдж/алерт «входящий/инфо» */ --purple-bg: #ede9fe; /* бейдж «исходящий» */ --purple-text: #6d28d9; /* текст на фиолетовом бейдже */ --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,0.04); /* тень навбара */ --focus-ring: rgba(37,99,235,0.15); /* свечение фокуса инпутов */ color-scheme: light; /* нативные контролы (dropdown , полосы прокрутки) рисуются светлыми — CSS-переменными их не стилизовать */ } /* ===== Тёмная тема ===== Включается атрибутом data-theme="dark" на (его ставит инлайн-скрипт в base.html до отрисовки страницы и переключает кнопка из main.js). Меняем только значения переменных — сами правила ниже остаются прежними. */ [data-theme="dark"] { --primary: #3b82f6; /* чуть светлее для контраста на тёмном */ --primary-dark: #2563eb; /* hover в тёмной — наоборот темнее базового */ --bg: #0f172a; /* тёмный фон страницы (slate-900) */ --card: #1e293b; /* карточки/таблицы (slate-800) */ --text: #e2e8f0; /* светлый текст (slate-200) */ --muted: #94a3b8; /* приглушённый (slate-400) */ --border: #334155; /* рамки (slate-700) */ --success: #4ade80; /* ярче для читаемости */ --danger: #f87171; --warning: #fbbf24; /* Мягкие подложки — полупрозрачные версии акцентных цветов, поверх тёмной карточки смотрятся естественно и не «горят». */ --subtle-bg: rgba(148, 163, 184, 0.12); --ok-bg: rgba(74, 222, 128, 0.15); --warn-bg: rgba(251, 191, 36, 0.15); --danger-bg: rgba(248, 113, 113, 0.15); --info-bg: rgba(59, 130, 246, 0.15); --purple-bg: rgba(167, 139, 250, 0.15); --purple-text: #c4b5fd; --shadow: 0 1px 3px rgba(0,0,0,0.4); --focus-ring: rgba(59, 130, 246, 0.3); color-scheme: dark; /* нативные контролы рисуются тёмными: выпадающий список , полосы прокрутки, placeholder */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; } main.container { flex: 1; padding-top: 30px; padding-bottom: 40px; } /* ===== Навигация ===== */ .navbar { background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 50; } .nav-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 60px; } /* Правая группа навбара: кнопка темы + бургер + ссылки. Обёрнута, чтобы space-between прижимал бренд влево, а всю группу — вправо. */ .nav-right { display: flex; align-items: center; gap: 8px; } .brand { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--primary); text-decoration: none; } .brand-mark { width: 24px; height: 24px; flex-shrink: 0; } /* Базовый класс inline-SVG-иконок (набор Lucide в _icons.html): размер наследует font-size, цвет — currentColor, поэтому одинаков в светлой/тёмной теме и на любой ОС (эмодзи раньше рендерились по-разному). */ .ic { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; } .nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .nav-links a { color: var(--text); text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: background .15s; } .nav-links a:hover { background: var(--bg); } .nav-links a.active { background: var(--primary); color: #fff; } .nav-links a.btn-logout { color: var(--danger); } /* Кнопка переключателя темы (иконки moon/sun из SVG-спрайта). Рисуется всегда — и для гостей, и для залогиненных любого пола. */ .theme-toggle { background: none; border: 1px solid var(--border); cursor: pointer; width: 38px; height: 38px; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, transform .1s; flex-shrink: 0; } .theme-toggle:hover { background: var(--bg); border-color: var(--primary); } .theme-toggle:active { transform: scale(0.92); } /* ===== Панель статистики в шапке (баланс/минуты) ===== */ .nav-stats { max-width: 1100px; margin: 0 auto; padding: 8px 20px; border-top: 1px solid var(--border); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 13px; } .nav-stats .ns-item { display: flex; align-items: center; gap: 4px; } .nav-stats .ns-label { color: var(--muted); } .nav-stats .ns-val { font-weight: 600; } .nav-stats .ns-balance.neg { color: var(--danger); } /* ===== Карточки ===== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .card h1, .card h2 { margin-bottom: 16px; } /* ===== Формы ===== */ .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; background: var(--card); color: var(--text); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .form-group textarea { min-height: 120px; resize: vertical; } /* ===== Кнопки ===== */ .btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, opacity .15s; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); } .btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); } .btn-danger { background: var(--danger); color: #fff; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ===== Таблицы ===== */ .table-wrap { overflow-x: auto; } /* Компактный режим таблицы («Все звонки», админ): уже паддинги ячеек — 11 колонок помещаются на ноутбучном экране без прокрутки вбок. */ .t-compact th, .t-compact td { padding: 10px 8px; } table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; } th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; } th { background: var(--subtle-bg); font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; } tr:hover td { background: var(--subtle-bg); } /* ===== Бейджи статусов ===== */ .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .badge-completed { background: var(--ok-bg); color: var(--success); } .badge-processing, .badge-pending { background: var(--warn-bg); color: var(--warning); } .badge-error { background: var(--danger-bg); color: var(--danger); } /* Нейтральный вердикт «Недозвон» — звонки <45с, балл не отражает вину менеджера */ .badge-noanswer { background: var(--subtle-bg); color: var(--muted); } /* Метка «невиновности» (fault из ШАГА 2.5): низкий балл не по вине менеджера (клиент завершил сразу / техсбой / не продажный) — приглушённая, с пунктиром */ .badge-innocent { background: var(--subtle-bg); color: var(--muted); border: 1px dashed var(--border); } /* Шаг 4: блок ручного решения директора «менеджер не виновен» на карточке */ .fault-toggle { border: 1px dashed var(--border); border-radius: 8px; background: var(--subtle-bg); } .fault-toggle-label { display: flex; gap: 10px; align-items: center; cursor: pointer; } .fault-toggle-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } /* Бейджи направления звонка (Битрикс24 CALL_TYPE: вх/исх/обратный) */ .badge-dir-in { background: var(--info-bg); color: var(--primary-dark); } .badge-dir-out { background: var(--purple-bg); color: var(--purple-text); } /* ===== Панель фильтров списков звонков ===== */ .filters-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 16px; background: var(--subtle-bg); border-radius: var(--radius); margin-bottom: 16px; } .filters-bar .fg { display: flex; flex-direction: column; gap: 4px; } .filters-bar .fg > label { font-size: 12px; font-weight: 600; color: var(--muted); } .filters-bar .fg input, .filters-bar .fg select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--card); color: var(--text); } .filters-bar .fg input:focus, .filters-bar .fg select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } /* Кнопки «Применить»/«Сбросить» прижаты к правому краю панели фильтров (как было до добавления новых фильтров/сортировок); при переносе строки на узких экранах блок тоже уходит вправо. */ .filters-bar .fg-actions { display: flex; gap: 8px; margin-left: auto; } /* Футер лендинга (ссылка на политику конфиденциальности). */ .landing-footer { padding: 24px 0 32px; text-align: center; color: var(--muted); font-size: 14px; border-top: 1px solid var(--border, #e5e7eb); } .landing-footer a { color: inherit; text-decoration: underline; } /* Страница «Политика конфиденциальности»: читаемые списки и отступы в карточке. */ .privacy-content h3 { margin: 22px 0 8px; } .privacy-content ul, .privacy-content ol { margin: 8px 0 8px 22px; } .privacy-content li { margin: 4px 0; } .privacy-content p { margin: 8px 0; } .privacy-content .text-muted { font-size: 13px; } /* ===== Сообщения ===== */ .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .alert-error { background: var(--danger-bg); color: var(--danger); } .alert-success { background: var(--ok-bg); color: var(--success); } .alert-info { background: var(--info-bg); color: var(--primary-dark); } /* ===== Утилиты ===== */ .text-muted { color: var(--muted); } .text-center { text-align: center; } .mt-20 { margin-top: 20px; } .mb-20 { margin-bottom: 20px; } .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } } /* Карточка звонка: колонки НЕ растягиваются на высоту соседа (слева плеер + транскрипт, справа анализ — высоты разные; растяжение давало «пустую» левую половину экрана). */ .call-layout { align-items: start; } /* ===== Блок транскрипта/анализа ===== */ .transcript { background: var(--subtle-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; white-space: pre-wrap; max-height: 400px; overflow-y: auto; font-size: 14px; } /* Цветовые акценты меток говорящего в транскрипте (renderTranscript, call_detail.js). Менеджер — фирменный цвет, клиент — синий, нейтральный «Спикер N»/«Разговор» — приглушённый. */ .spk-manager { font-weight: 700; color: var(--primary); } .spk-client { font-weight: 700; color: #2563eb; } .spk-neutral { font-weight: 700; color: var(--muted); } .analysis-block { background: var(--subtle-bg); border-left: 3px solid var(--primary); padding: 14px 18px; border-radius: 6px; margin-bottom: 12px; } .analysis-block h4 { margin-bottom: 6px; color: var(--primary-dark); } .score-big { font-size: 42px; font-weight: 800; color: var(--primary); } .stat-card { text-align: center; } .stat-card .num { font-size: 32px; font-weight: 800; } .stat-card .label { color: var(--muted); font-size: 13px; } /* ===== Спиннер ===== */ .spinner { border: 3px solid var(--border); border-top: 3px solid var(--primary); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== Авторизация (центр) ===== */ .auth-wrap { max-width: 420px; margin: 40px auto; } .auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .auth-tabs a { flex: 1; text-align: center; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: 600; background: var(--bg); color: var(--text); } .auth-tabs a.active { background: var(--primary); color: #fff; } /* ===== Бургер-меню ===== */ .nav-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text); padding: 4px 8px; line-height: 1; } /* ===== Футер ===== */ .footer { background: var(--card); border-top: 1px solid var(--border); padding: 18px 0; margin-top: auto; } .footer p { color: var(--muted); font-size: 13px; text-align: center; } /* ===== Лендинг: hero ===== */ .hero { background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%); color: #fff; padding: 70px 20px 80px; text-align: center; } .hero-inner { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } .hero-copy { text-align: left; } .hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 20px; font-size: 13px; margin-bottom: 20px; } .hero-title { font-size: 40px; font-weight: 800; line-height: 1.15; margin-bottom: 18px; } .hero-subtitle { font-size: 18px; opacity: .92; max-width: 640px; margin: 0 0 28px; } .hero-cta { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 18px; } .btn-lg { padding: 14px 28px; font-size: 16px; } /* Плашка-бейдж под кнопками (интеграции) — тот же стиль, что и бейдж над заголовком. */ .hero-integrations { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; } .hero-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.15); padding: 5px 12px; border-radius: 20px; font-size: 13px; opacity: .95; } .hero-pill .ic { width: 14px; height: 14px; } /* Primary на градиенте — единая схема с финальным CTA: белая с синим текстом и мягкой тенью (синяя #2563eb на градиенте, начинающемся с того же цвета, теряла силуэт). Вторичная — «призрачная»: полупрозрачная с белой рамкой, чтобы не сливаться с белой primary. */ .hero .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 8px 24px rgba(0,0,0,.25); } .hero .btn-primary:hover { background: #f1f5f9; } .hero .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.45); } .hero .btn-secondary:hover { background: rgba(255,255,255,.22); } /* Мокап «анализ звонка» справа от hero: демо-карточка в стилистике реального отчёта — вердикт-бейдж, балл, критерии с цветовой шкалой как в продукте (>=80% зелёный, 50–79 янтарный, <50 красный) и «волна» аудио. Чистый CSS, без внешних картинок. */ .hero-demo { min-width: 0; } .hd-card { background: var(--card); color: var(--text); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 24px 48px rgba(15,23,42,.35); text-align: left; } .hd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .hd-title { font-size: 12px; font-weight: 600; color: var(--muted); } .hd-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .hd-badge.ok { background: var(--ok-bg); color: var(--success); } .hd-score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .hd-score-num { font-size: 36px; font-weight: 800; line-height: 1; color: var(--primary); } .hd-score-num span { font-size: 15px; font-weight: 600; color: var(--muted); } .hd-score-label { font-size: 11px; line-height: 1.3; color: var(--muted); } .hd-crits { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .hd-crit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; } .hd-crit:not(:last-child) { border-bottom: 1px dashed var(--border); padding-bottom: 8px; } .hd-crit b { font-weight: 700; white-space: nowrap; } .hd-crit b.ok { color: var(--success); } .hd-crit b.mid { color: var(--warning); } .hd-crit b.bad { color: var(--danger); } .hd-wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-bottom: 12px; } .hd-wave span { flex: 1; min-width: 2px; border-radius: 2px; background: var(--primary); opacity: .55; height: 30%; animation: hd-wave 1.2s ease-in-out infinite alternate; } .hd-wave span:nth-child(2n) { animation-duration: .9s; animation-delay: .15s; } .hd-wave span:nth-child(3n) { animation-duration: 1.5s; animation-delay: .3s; } .hd-wave span:nth-child(5n) { animation-delay: .45s; } @keyframes hd-wave { to { height: 100%; } } .hd-foot { font-size: 11px; color: var(--muted); text-align: center; } @media (prefers-reduced-motion: reduce) { .hd-wave span { animation: none; height: 60%; } } /* ===== Лендинг: секции ===== */ .landing-section { padding: 56px 0; } .landing-alt { background: var(--subtle-bg); } .section-title { font-size: 30px; font-weight: 800; text-align: center; margin-bottom: 10px; } .section-subtitle { text-align: center; color: var(--muted); font-size: 16px; margin-bottom: 36px; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.10); border-color: var(--primary); } .feature-icon { color: var(--primary); margin-bottom: 14px; width: 46px; height: 46px; border-radius: 12px; background: var(--info-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-icon .ic { width: 24px; height: 24px; } .feature-card h3 { margin-bottom: 8px; } .feature-card p { color: var(--muted); font-size: 15px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; } .step { text-align: center; } .step-num { width: 48px; height: 48px; line-height: 48px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 20px; font-weight: 800; margin: 0 auto 14px; position: relative; } .step h3 { margin-bottom: 8px; } .step p { color: var(--muted); font-size: 15px; } /* Линия-коннектор между шагами «Как работает»: при трёх равных колонках центры кружков 1-го и 3-го шагов — 1/6 и 5/6 ширины. Кружки (position:relative, непрозрачный фон) лежат поверх линии. Скрывается на планшете/мобиле, где шаги в один столбец. */ .steps::before { content: ""; position: absolute; top: 23px; left: 16.66%; right: 16.66%; height: 2px; background: var(--border); } .benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: 0 auto; } .benefit { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; } .benefit-check { background: var(--success); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .benefit-check .ic { width: 14px; height: 14px; } /* Пунктов нечётное число (сейчас 5): последний растягиваем на обе колонки, чтобы справа не оставалось пустой «дыры». */ .benefit:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Появление секций лендинга при прокрутке (fade-in). Прячем контент только при включённом JS — класс .has-js ставит инлайн-скрипт лендинга до отрисовки; без скрипта всё видно сразу. */ .has-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .has-js .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js .reveal { opacity: 1; transform: none; transition: none; } } /* Планшет (~900px): hero — в одну колонку (мокап под текстом, по центру), тройки карточек (фичи, шаги) — в столбец, линия между шагами не нужна. */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 36px; max-width: 800px; } .hero-copy { text-align: center; } .hero-subtitle { margin: 0 auto 28px; } .hero-cta, .hero-integrations { justify-content: center; } .hero-demo { max-width: 400px; margin: 0 auto; width: 100%; } .features, .steps { grid-template-columns: 1fr; } .steps::before { display: none; } } /* ===== Лендинг: тарифы ===== */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; align-items: start; } .price-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; text-align: center; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .price-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.10); border-color: var(--primary); } .price-popular { border: 2px solid var(--primary); } .price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 20px; white-space: nowrap; } .price-card h3 { margin-bottom: 8px; } .price { font-size: 28px; font-weight: 800; margin-bottom: 16px; } .price span { font-size: 14px; font-weight: 500; color: var(--muted); } .price-features { list-style: none; text-align: left; } .price-features li { padding: 6px 0; color: var(--muted); font-size: 15px; } .price-features li { position: relative; padding-left: 24px; } /* Галочка — inline-SVG через mask: цвет наследует var(--success) и выглядит одинаково на любой ОС. */ .price-features li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; background: var(--success); -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") no-repeat center / contain; 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") no-repeat center / contain; } .pricing-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 24px; } .price-btn { display: block; width: 100%; margin-top: 16px; } .cta-section { background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%); color: #fff; padding: 50px 0; text-align: center; } .cta-section h2 { font-size: 26px; margin-bottom: 8px; } .cta-section p { opacity: .9; margin-bottom: 22px; } .cta-section .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 8px 24px rgba(0,0,0,.25); } .cta-section .btn-primary:hover { background: #f1f5f9; } /* ===== Адаптивность (до 768px) ===== */ @media (max-width: 768px) { .nav-toggle { display: inline-block; } .nav-container { position: relative; } .nav-links { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 10px 20px; box-shadow: 0 4px 12px rgba(0,0,0,.08); z-index: 60; } .nav-links.open { display: flex; } .nav-links a { width: 100%; } .features, .steps, .pricing, .benefits, .grid-2 { grid-template-columns: 1fr; } .hero-title { font-size: 30px; } .hero-subtitle { font-size: 16px; } .section-title { font-size: 24px; } .btn-lg { padding: 12px 22px; font-size: 15px; } .btn { min-height: 44px; } main.container { padding-top: 16px; } .hero { padding: 48px 16px 56px; } .landing-section { padding: 40px 0; } .flex-between { flex-direction: column; align-items: stretch; } } /* ===== Дашборд статистики звонков ===== */ .mt-30 { margin-top: 30px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } } .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } } .dash-card h3 { font-size: 16px; margin-bottom: 14px; color: var(--text); } .dash-card h3.dash-h { margin-bottom: 14px; } .dash-chart { min-height: 120px; } .dash-empty { color: var(--muted); font-size: 14px; padding: 24px 0; text-align: center; } .dash-svg, .donut-svg { width: 100%; height: auto; display: block; } /* Срез по периодам (день / неделя / месяц) */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } } .period-card { text-align: left; padding: 16px; } .period-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text); } .period-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; } .period-row + .period-row { border-top: 1px solid var(--border, #e5e7eb); } /* Горизонтальные бары (менеджеры / направления) */ .bars { display: flex; flex-direction: column; gap: 10px; } .bar-row { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; } @media (max-width: 520px) { .bar-row { grid-template-columns: 110px 1fr 36px; } } .bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .bar-track { background: var(--bg); border-radius: 6px; height: 16px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 6px; min-width: 2px; transition: width .4s ease; } .bar-value { text-align: right; font-weight: 600; color: var(--muted); } /* Пончик (вердикты) + легенда */ .donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; } .donut-wrap .donut-svg { max-width: 170px; flex-shrink: 0; } .legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; } .legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .legend-text { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ===== Анализ менеджеров: слабые стороны по чек-листу ===== */ /* Решётка карточек менеджеров (по 2 в ряд, на узком — 1). */ .mq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 900px) { .mq-grid { grid-template-columns: 1fr; } } .mq-card { padding: 14px 16px; } /* Шапка переносится (имя + мета-строка «12 зв. · ср. балл …»), а не распирает карточку шире колонки — иначе карточки «выпирали» за грид. */ .mq-card .mq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 10px; } .mq-card .mq-name { font-weight: 700; font-size: 15px; min-width: 0; } .mq-card .mq-meta { font-size: 12px; color: var(--muted); white-space: normal; } .mq-crits { display: flex; flex-direction: column; gap: 6px; } /* Строка критерия: полное название (переносится) + «avg/max · %» справа. Мини-полосы убраны (по фидбеку: инфы 0, тянули карточки в длину). */ .mq-crit { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; } .mq-crit-label { flex: 1 1 auto; min-width: 0; font-size: 13px; } .mq-crit-val { flex: 0 0 auto; white-space: nowrap; font-size: 12px; color: var(--muted); } /* Разбивка по менеджерам (клик по столбцу/бару): ячейка значения шире, чтобы влезало «931 · 51.4%». */ .bars.breakdown-bars .bar-row { grid-template-columns: 160px 1fr 92px; } @media (max-width: 520px) { .bars.breakdown-bars .bar-row { grid-template-columns: 110px 1fr 70px; } } /* Кликабельные бары топ-компаний (admin/stats): клик → разбивка по менеджерам. */ .bar-row.is-clickable { cursor: pointer; } .bar-row.is-clickable:hover .bar-fill { opacity: .82; } .bar-row.is-clickable.active .bar-label { font-weight: 700; color: var(--primary); } /* ===== Динамика менеджеров (график по бакетам день/неделя/месяц) ===== */ /* Блок внутри карточки «Анализ менеджеров» (my/stats, admin/stats). */ .mq-dyn-card { margin-top: 18px; padding: 14px 16px; background: var(--subtle-bg); border: 1px solid var(--border); border-radius: 10px; } .mq-dyn-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 6px; } .mq-dyn-controls .fg-mq { display: flex; flex-direction: column; gap: 4px; } .mq-dyn-controls label { font-size: 12px; color: var(--muted); } .mq-dyn-controls select, .mq-dyn-controls input[type=date] { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 13px; } .mq-dyn-mgrs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; max-height: 120px; overflow-y: auto; } .mq-dyn-mgrs label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--text); } .mq-dyn-mgrs .dyn-chk { margin: 0; } .mq-dyn-actions { font-size: 12px; margin: 0 0 8px; } .mq-dyn-actions a { color: var(--primary); cursor: pointer; margin-right: 12px; user-select: none; } .dyn-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; } .dyn-legend-item { display: inline-flex; align-items: center; gap: 5px; } .dyn-legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dyn-svg { width: 100%; height: auto; display: block; } .dyn-pt { cursor: help; } .dyn-range { font-size: 12px; color: var(--muted); margin: 6px 0 0; } .dyn-empty { font-size: 13px; color: var(--muted); padding: 18px 0; text-align: center; } @media (max-width: 640px) { .dyn-svg { font-size: 9px; } } /* ===== «Звонки компании» (my/calls) на мобильном: таблица → карточки ===== Работает при ширине <=768px, десктоп не меняется. thead прячется, каждая tr становится карточкой: шапка (ID · дата · вердикт справа), менеджер, строка бейджей (статус · оценка · тип · направление · длительность). Тап по карточке открывает звонок (клик-делегирование в my/calls.html), кнопка «Открыть» на мобильном скрыта. Панель фильтров сворачивается в кнопку «Фильтры». Скоуп только .calls-table — админ-таблицы не задеты. */ #filters_toggle { display: none; } @media (max-width: 768px) { /* Панель фильтров: свёрнута по умолчанию, раскрывается классом .open. */ #filters_toggle { display: inline-block; margin-bottom: 12px; } .filters-bar { display: none; } .filters-bar.open { display: flex; } /* Таблица → стопка карточек. */ .calls-table { display: block; background: transparent; overflow: visible; } .calls-table thead { display: none; } .calls-table tbody { display: block; } .calls-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .calls-table td { display: inline-flex; align-items: center; gap: 6px; border: none; padding: 0; font-size: 14px; white-space: nowrap; } .calls-table td.c-id { color: var(--muted); font-size: 13px; } .calls-table td.c-date { color: var(--muted); font-size: 13px; } .calls-table td.c-verdict { margin-left: auto; } .calls-table td.c-manager { width: 100%; font-weight: 600; white-space: normal; } .calls-table td.c-score { color: var(--text); } .calls-table td.c-open { display: none; } } /* ===== Мобильная версия админки (<=768px): таблицы → карточки ===== Универсальный механизм в духе .calls-table (my/calls): таблице добавляется класс .m-cards, ячейкам — классы mc-*: mc-head — жирная строка-заголовок карточки (на всю ширину); mc-sub — серая строка-подпись под заголовком (на всю ширину, с переносом); mc-right — прижать содержимое к правому краю текущей строки карточки; mc-mut — приглушённая ячейка (id, даты); mc-wrap — разрешить перенос строк внутри ячейки; mc-open-link — ссылка «Открыть» (скрыта на мобильном: тап по карточке открывает звонок); mc-actions — блок кнопок на всю ширину внизу карточки (кнопки растягиваются). Атрибут data-label у td рисует подпись «Метка: значение» — только на мобильном. Десктоп не меняется: все правила внутри @media. */ @media (max-width: 768px) { .m-cards { display: block; background: transparent; overflow: visible; } .m-cards thead { display: none; } .m-cards tbody { display: block; } .m-cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); } .m-cards tr:hover td { background: transparent; } .m-cards td { display: inline-flex; align-items: center; gap: 6px; border: none; padding: 0; font-size: 14px; white-space: nowrap; } .m-cards td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; } .m-cards td.mc-head { width: 100%; font-weight: 600; white-space: normal; } .m-cards td.mc-sub { width: 100%; color: var(--muted); font-size: 13px; white-space: normal; } .m-cards td.mc-right { margin-left: auto; } .m-cards td.mc-mut { color: var(--muted); font-size: 13px; } .m-cards td.mc-wrap { white-space: normal; } /* Ссылка «Открыть» скрыта (тап по карточке открывает звонок), а ячейка действий остаётся видимой — в ней кнопка «↻ Заново» для error-звонков. */ .m-cards .mc-open-link { display: none; } .m-cards td.mc-actions { width: 100%; margin-top: 4px; } .m-cards td.mc-actions .btn { flex: 1; margin-left: 0 !important; } } /* Ячейка с несколькими кнопками действий в одной колонке таблицы («Открыть» + «↻ Заново»): кнопки в ряд с зазором, без слипания. */ .cell-acts { display: inline-flex; align-items: center; gap: 6px; } /* ===== Поиск по транскриптам (№10): сниппет-строка под строкой звонка ===== */ .fts-row td { padding-top: 0; padding-bottom: 10px; } .fts-snippet { font-size: 13px; line-height: 1.5; color: var(--muted, #8a93a5); } .fts-snippet mark { background: #ffe08a; color: inherit; padding: 0 2px; border-radius: 3px; } /* ===== Мобильная версия (<=768px): страница не «гуляет» по ширине ===== Причина горизонтального скролла на /my/stats: селекты тулбаров блоков («Менеджер», критерии чек-листа) с длинными значениями (ФИО целиком) не сжимались ниже min-content и распирали flex-строку .month-bar / .mq-dyn-controls шире экрана. Чиним: контролам разрешено сжиматься и ограничена ширина, длинный текст в закрытом селекте обрезается многоточием (полный — виден при раскрытии), body не скроллится вбок (страховка и от будущих «распирателей»). Десктоп не меняется: всё внутри @media. */ @media (max-width: 768px) { body { overflow-x: hidden; } .month-bar, .mq-dyn-controls, .filters-bar { max-width: 100%; } /* Лейбл «Менеджер:» + селект переносятся по строкам, а не едут вбок. */ .month-bar label, .mq-dyn-controls .fg-mq { flex-wrap: wrap; min-width: 0; max-width: 100%; } .month-bar select, .month-bar input[type=month], .month-bar input[type=date], .mq-dyn-controls select, .mq-dyn-controls input[type=date] { max-width: 100%; min-width: 0; } /* Длинные ФИО в закрытом селекте — с многоточием. */ select { text-overflow: ellipsis; } /* Имя менеджера в «Загрузке»: обычно 170px, на узких экранах сжимается с многоточием (ellipsis уже задан в .ml-name), а не вылезает вбок. */ .ml-name { flex: 0 1 170px; min-width: 0; } }