/* * RU: Стили публичного сайта CallMetric (страницы «Описание» и «Подписка»). * Отдельный файл поверх theme.css, а не правки в нём: панель и сайт живут разной * жизнью — у панели плотная рабочая сетка на весь день, у сайта воздух и один экран * решения. Смешав их в одном файле, мы получили бы правки маркетинга, ломающие рабочий * интерфейс. Токены (цвет, радиусы, шрифты) при этом общие — иначе сайт и продукт * выглядели бы как два разных бренда. * EN: Public site styles for CallMetric (the "About" and "Subscription" pages). * A separate file layered on top of theme.css rather than edits inside it: the panel and * the site have different lives — the panel needs a dense all-day working grid, the site * needs air and a single decision screen. Merging them would let marketing tweaks break the * working UI. The tokens (color, radii, fonts) stay shared — otherwise site and product * would read as two different brands. */ /* ── Ширина и ритм / Width and rhythm ───────────────────────────────────────── */ /* RU: 1120px — строка в ~90 знаков на основном кегле: длиннее глаз теряет начало строки. EN: 1120px keeps the measure near 90 characters at body size; longer and the eye loses the line start. */ .site { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .site-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; } /* RU: Вертикальный ритм задаётся одной переменной: разделы должны дышать одинаково, иначе страница читается как склейка из кусков, сделанных в разные дни. EN: One variable drives the vertical rhythm: sections must breathe identically, otherwise the page reads as a collage assembled on different days. */ :root { --sec: 96px; } @media (max-width: 760px) { :root { --sec: 64px; } } .sec { padding: var(--sec) 0; } .sec + .sec { padding-top: 0; } /* ── Шапка: одна на всех страницах / Header: identical on every page ─────────── */ /* * RU: Липкая шапка с полупрозрачной подложкой. Меню вынесено наверх по требованию: * публичные страницы читают сверху вниз, боковая колонка панели тут только отняла бы * ширину у текста. Тот же макет обязан стоять на каждой странице — иначе переход * между страницами читается как переход на другой сайт. * EN: A sticky header on a translucent ground. The menu lives on top by requirement: public * pages are read top-down and the panel's side rail would only steal width from the text. * The same markup must appear on every page — otherwise moving between pages reads as * landing on a different website. */ .site-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line); } .site-head-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 28px; } .site-nav { display: flex; gap: 4px; margin-left: 8px; } .site-nav a { padding: 8px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; } .site-nav a:hover { background: var(--surface-2); color: var(--ink); } /* RU: Активный пункт помечается фоном, а не подчёркиванием: подчёркивание в меню читается как ссылка «ещё не посещённая», а нам нужно «вы здесь». EN: The active item is marked by a background rather than an underline: an underline in a menu reads as "unvisited link", while we need "you are here". */ .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; } .site-head .spacer { flex: 1; } /* RU: Бургер показывается только на узком экране; на широком он был бы лишним кликом. EN: The burger appears only on narrow screens; on wide ones it would be one click too many. */ .burger { display: none; } @media (max-width: 900px) { .burger { display: inline-flex; } .site-head-in { gap: 12px; position: relative; } /* RU: Вторая кнопка «Войти» уходит: на узкой шапке два призыва рядом сминают друг друга, а вход есть в раскрытом меню. EN: The secondary "Log in" button goes away: two calls to action crush each other in a narrow header, and login is available inside the opened menu. */ .head-cta-secondary { display: none; } /* RU: Меню становится панелью под шапкой во всю ширину — на телефоне пункты нужны крупные и в столбик, горизонтальный ряд там нечитаем. EN: The menu becomes a full-width panel under the header — on a phone the items must be large and stacked; a horizontal row is unreadable there. */ .site-nav { flex-direction: column; gap: 2px; margin-left: 0; position: absolute; top: 64px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px 16px; box-shadow: var(--shadow); } .site-nav a { padding: 12px; font-size: 15px; } /* RU: Скрытие — атрибутом, а не классом: hidden убирает пункты и из дерева доступности, поэтому скринридер не читает закрытое меню. EN: Hiding is done by the attribute, not a class: hidden also removes the items from the accessibility tree, so a screen reader does not read a closed menu. */ .site-nav[hidden] { display: none; } } /* RU: На широком экране меню видно всегда, даже если в разметке стоит hidden и скрипт не выполнился. Разметка помечена hidden ради телефонов — без этого меню на телефоне успевало мигнуть развёрнутым до запуска скрипта; здесь мы возвращаем его силой CSS, чтобы отказ скрипта не оставил десктоп вообще без навигации. EN: On wide screens the menu is always visible, even when the markup carries hidden and the script never ran. The markup is marked hidden for phones — without it the menu flashed open before the script started; here CSS forcibly restores it so a script failure cannot leave the desktop with no navigation at all. */ @media (min-width: 901px) { .site-nav[hidden] { display: flex; } .site-nav .nav-login { display: none; } } /* ── Первый экран / Hero ────────────────────────────────────────────────────── */ .hero { padding: 88px 0 var(--sec); background: radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 29%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } } /* RU: 52px и отрицательный трекинг — заголовочный кегль Manrope собирается плотнее, на дефолтном трекинге крупный текст выглядит рыхлым. EN: 52px with negative tracking — Manrope sets tighter at display sizes; at default tracking large text looks loose. */ .h-display { font: 800 52px/1.06 var(--f-display); letter-spacing: -.035em; margin: 0 0 20px; } .h-sec { font: 800 34px/1.15 var(--f-display); letter-spacing: -.03em; margin: 0 0 14px; } .h-sub { font: 700 20px/1.3 var(--f-display); letter-spacing: -.02em; margin: 0 0 10px; } @media (max-width: 760px) { .h-display { font-size: 36px; } .h-sec { font-size: 26px; } } .lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; } .sec-lede { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; margin: 0 0 32px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 7px 12px; border-radius: var(--r-pill); margin-bottom: 20px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .btn.lg { padding: 13px 22px; font-size: 15px; border-radius: var(--r); font-weight: 600; } /* RU: Строка под кнопками снимает главный страх («сейчас попросят карту») там, где он возникает — у самой кнопки, а не в FAQ внизу страницы. EN: The line under the buttons defuses the main fear ("they will ask for a card now") exactly where it arises — at the button, not in an FAQ at the bottom. */ .cta-note { font-size: 13px; color: var(--ink-3); margin-top: 14px; } /* ── Карточки и сетки / Cards and grids ─────────────────────────────────────── */ .cards { display: grid; gap: 18px; } .cards.c2 { grid-template-columns: repeat(2, 1fr); } .cards.c3 { grid-template-columns: repeat(3, 1fr); } .cards.c4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .cards.c3, .cards.c4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .cards.c2, .cards.c3, .cards.c4 { grid-template-columns: 1fr; } } .pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; } .pane h3 { margin: 0 0 8px; font: 700 17px/1.25 var(--f-display); letter-spacing: -.02em; } .pane p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); } /* RU: Номер шага крупной моноширинной цифрой: три шага должны читаться как последовательность, а не как три независимые карточки. EN: A large monospaced step number: the three steps must read as a sequence, not as three independent cards. */ .step-num { font: 700 13px/1 var(--f-mono); color: var(--accent); margin-bottom: 14px; } /* ── Блок «проблема»: числа как аргумент / The problem block: numbers as argument ── */ /* * RU: Тёмная плашка на светлой странице — единственная инверсия на весь сайт. Она отделяет * «что не так сейчас» от «что мы предлагаем»; вторая такая же инверсия ниже сделала бы * обе незаметными. * EN: A dark slab on a light page — the only inversion on the whole site. It separates "what is * wrong today" from "what we offer"; a second identical inversion below would make both invisible. */ .slab { background: #131a24; color: #e8ecf2; border-radius: 24px; padding: 56px 48px; } .slab .h-sec { color: #fff; } .slab p { color: #a3aebf; } @media (max-width: 760px) { .slab { padding: 36px 24px; border-radius: 18px; } } .figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; } @media (max-width: 700px) { .figures { grid-template-columns: 1fr; gap: 22px; } } .figure-n { font: 800 44px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .figure-t { font-size: 14px; line-height: 1.5; margin-top: 8px; color: #a3aebf; } /* ── Список с галочками / Checklist ─────────────────────────────────────────── */ .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; } .checks li svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ok); } /* RU: Пункт «этого нет» помечается тем же списком, но серой чертой: смешивать «есть» и «нет» разными списками — значит прятать вторую половину правды. EN: A "not included" item uses the same list with a grey dash: splitting "have" and "have not" into different lists would hide the second half of the truth. */ .checks li.no svg { color: var(--ink-3); } .checks li.no { color: var(--ink-3); } /* ── Примеры-истории / Story examples ───────────────────────────────────────── */ /* * RU: История подаётся как цитата с подписью «что было / что увидели / что сделали». * Абстрактную выгоду («повысьте конверсию») читатель пролистывает; конкретную сцену — нет. * EN: A story is presented as a quote with a "what happened / what we saw / what we did" caption. * Readers skim abstract benefits ("increase conversion"); a concrete scene they do not. */ .story { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; } .story-q { font: 500 17px/1.5 var(--f-body); color: var(--ink); margin: 0 0 10px; } .story-a { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; } .story-tag { font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } /* ── Превью продукта / Product preview ──────────────────────────────────────── */ /* * RU: Кусок настоящего интерфейса на первом экране. Приём взят у лендингов Gong и Linear и * работает по простой причине: обещание «мы покажем, где вы теряете клиентов» проверяется * глазом за секунду, а текстом — за три абзаца, которых никто не прочтёт. * EN: A slice of the real interface in the hero. Borrowed from the Gong and Linear landing pages; * it works for a simple reason: the promise "we show where you lose clients" is verified by * eye in a second, and by text in three paragraphs nobody reads. */ .preview { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: calc(var(--r-lg) + 2px); box-shadow: var(--shadow-lg); overflow: hidden; } .preview-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .preview-body { padding: 18px; display: grid; gap: 14px; } /* ── Сравнение и FAQ / Comparison table and FAQ ─────────────────────────────── */ .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tbl th, .tbl td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); } .tbl th { font: 600 12px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } .tbl td.c, .tbl th.c { text-align: center; } .tbl tbody tr:hover { background: var(--surface-2); } .faq { display: grid; gap: 0; } .faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { font: 700 16px/1.35 var(--f-display); letter-spacing: -.01em; margin: 0 0 8px; } .faq-a { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 68ch; } /* ── Подвал / Footer ────────────────────────────────────────────────────────── */ .site-foot { border-top: 1px solid var(--line); margin-top: var(--sec); padding: 40px 0 56px; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; } @media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } } .foot-col h4 { font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } .foot-col a { display: block; color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 5px 0; } .foot-col a:hover { color: var(--accent); } /* RU: 152-ФЗ обязывает показывать оператора и основание обработки. Это не украшение подвала, а условие законного приёма платежей и записей разговоров. EN: Russian data-protection law requires naming the operator and the legal basis. This is not footer decoration but a condition for lawfully taking payments and call recordings. */ .foot-legal { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--ink-3); } /* ── Находка разбора в превью / A finding inside the hero preview ───────────── */ /* * RU: Собственный класс, а не `.brief-item` из панели: тот — сетка «14px + текст» под * маркер и реплику, и три ребёнка в ней сминаются в колонку шириной 14 пикселей. * Классы панели описывают её конкретную разметку, и брать их напоказ — это чинить * сайт каждый раз, когда меняется панель. * EN: A class of its own rather than the panel's `.brief-item`: that one is a "14px + text" * grid for a marker and an utterance, and three children in it collapse into a 14-pixel * column. Panel classes describe the panel's own markup, and borrowing them for display * means repairing the site every time the panel changes. */ .finding { background: var(--bad-bg); border-radius: var(--r); padding: 13px 14px; } .finding-head { font: 600 11.5px/1 var(--f-mono); color: var(--bad); margin-bottom: 8px; letter-spacing: .03em; } .finding-q { font-size: 13.5px; line-height: 1.5; font-style: italic; color: var(--ink); margin: 0; } /* RU: «Как надо было» на зелёной подложке: замечание без альтернативы не учит. EN: "What to say instead" on a green ground: a criticism without an alternative teaches nothing. */ .finding-fix { margin-top: 9px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--ok-bg); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); } .finding-fix b { color: var(--ok); } /* ── Кнопки-ссылки / Anchor buttons ─────────────────────────────────────────── */ /* * RU: В панели `.btn` — всегда