/* ============================================================ BigTraffic — дизайн-токены Действующая палитра и шрифты сайта (бирюзовый + Montserrat, 21.09.2026). Единственный источник значений вида. Правило: в разметке НЕ пишем цвета и размеры числами — только переменные отсюда. Меняем стиль — правим этот файл. ============================================================ */ :root { /* --- Цвета --- */ --c-primary: #0F6E6E; /* основной цвет: кнопки, акценты */ --c-primary-soft: rgba(15, 110, 110, .1); /* подложка бейджа */ --c-error: #dc2626; /* ошибка в поле формы */ --c-hot: #E8730C; /* оранжевый акцент вне документов: аудит в меню и в блоке услуг (14.10.2026) */ --c-hot-soft: #FFF3E8; --c-primary-deep: #0C5A5A; /* тёмный основной: логотип, заголовки карточек */ --c-ink: #111827; /* основной текст, заголовки */ --c-ink-muted: #606976; /* подводки, описания */ --c-ink-soft: #333333; /* пункты выпадающего меню */ --c-price-muted: #5a6272; /* подписи в тарифах */ --c-price-off: #9aa1ae; /* выключенные пункты тарифа */ --c-dark: #14313A; /* тёмная карточка «Максимум» */ --c-dark-accent: #5EC5BE; /* галочки на тёмной карточке */ --c-dark-muted: #A3B0B9; --c-orange: #ff8a3d; /* бейдж «Всё включено» */ --c-green: #16a34a; /* галочки в тарифах */ --c-footer-title: #0C5A5A; --c-footer-link: #65758b; --c-accent-soft: rgba(230, 240, 255, .2); --c-bg: #f9fafb; /* фон страницы */ --c-surface: #ffffff; /* карточки, плашки */ --c-surface-glass: rgba(255, 255, 255, .8); --c-header-glass: rgba(255, 255, 255, .7); --c-border: #e3e7ed; --c-mist: rgba(226, 239, 238, .7); /* голубая дымка градиента */ --grad-hero: linear-gradient(to bottom right, var(--c-bg), var(--c-bg), var(--c-mist)); /* финальный призыв: голубая плашка — замер с сайта */ --grad-cta: linear-gradient(to bottom right, rgba(15, 110, 110, .08), rgba(226, 239, 238, .85)); /* --- Шрифты --- */ --font-display: Montserrat, "Segoe UI", Arial, sans-serif; --font-text: Montserrat, "Segoe UI", Arial, sans-serif; --font-read: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* читаемый текст: абзацы, подводки, ответы (с 15.10.2026) */ /* Заголовки: у оригинала плотный трекинг, без него текст «распухает» */ --h1-size: 52px; --h1-lh: 58px; --h1-tracking: -1.6px; --h1-weight: 700; /* у оригинала подключён файл Nunito-Bold = 700; 800 даёт заметно жирнее */ --h1-size-sm: 36px; /* < 768px */ --h1-lh-sm: 42px; --text-base: 16px; --text-base-lh: 24px; --text-sm: 14px; --text-sm-lh: 20px; --text-lg: 18px; --text-lg-lh: 28px; --text-xs: 12px; --text-xs-lh: 16px; --text-large: 20px; --text-large-lh: 28px; /* Заголовки секций */ --h2-size: 42px; --h2-lh: 48px; --h2-weight: 700; --h2-size-sm: 30px; --h2-lh-sm: 36px; --h3-size: 22px; --h3-lh: 28px; --display-size: 36px; /* крупный синий текст в карточке услуги */ --display-lh: 40px; --price-size: 40px; /* --- Сетка и ритм --- */ --container-max: 1280px; --container-pad: 144px; /* боковые поля > 1024px */ --container-pad-md: 96px; /* 640–1024px */ --container-pad-sm: 32px; /* < 640px */ --footer-max: 960px; --pricing-max: 1152px; --measure-h1: 980px; /* макс. ширина заголовка */ --measure-text: 672px; /* макс. ширина абзаца */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-10: 40px; --section-pad: 64px; --header-h: 66px; --header-max: 1200px; /* свой контейнер шапки — замер с сайта */ /* зазоры и кнопка в шапке — замеры с боевого сайта, поэтому числа некруглые */ --header-gap: 20px; /* меню → разделитель → телефон */ --header-gap-sm: 10px; /* телефон → Telegram */ --header-gap-lg: 30px; /* Telegram → кнопка */ --header-btn-size: 12.3px; /* размер текста кнопки в шапке */ /* --- Формы --- */ --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; --radius-xs: 4px; --radius-card: 20px; --radius-xl: 24px; /* --- Тени --- */ --shadow-card: 0 1px 2px rgba(0, 0, 0, .05); --shadow-price: 0 4px 20px rgba(26, 38, 74, .06); --shadow-price-hot: 0 8px 30px rgba(41, 130, 255, .16); --shadow-price-dark: 0 10px 34px rgba(35, 46, 107, .35); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .1); --shadow-glow: 0 0 20px rgba(41, 130, 255, .4), 0 0 40px rgba(41, 130, 255, .2), 0 0 60px rgba(41, 130, 255, .1); --shadow-glow-hover: 0 0 26px rgba(41, 130, 255, .55), 0 0 52px rgba(41, 130, 255, .25), 0 0 70px rgba(41, 130, 255, .12); --blur-glass: blur(12px); --transition: .15s ease; } /* ============================================================ Блог — отдельная палитра и ритм Снято замерами с bigtraffic.ru/blog/ и страниц статей (26.08.2026). У блога свой набор чернил и подводок — он темнее и синее главной, поэтому переменные отдельные, а не переиспользованные с лендинга. ============================================================ */ :root { --b-blue: #0F6E6E; /* активная пилюля, ссылки, акцент */ --b-blue-dark: #0C5A5A; /* заголовки карточек */ --b-blue-light: #E2EFEE; /* подложка тега категории в статье */ --b-ink: #121216; /* текст статьи и заголовки — почти чёрный, как у Дзена и Медузы (14.10.2026: был #1a1a2e, читался серым) */ --b-ink-secondary: #4b5563; /* описания, лид (14.10.2026: был #5f6b7a) */ --b-ink-muted: #8b95a5; /* мета: дата, время чтения */ --b-border: #e5e7eb; --b-surface: #ffffff; --b-surface-soft: #f8f9fb; --b-tag-bg: #e8f5f0; /* зелёная пилюля категории в ленте */ --b-tag-ink: #047857; --b-content-w: 700px; /* колонка текста статьи */ --b-layout-max: 1150px; /* оглавление + текст */ --b-sidebar-w: 200px; --b-layout-gap: 88px; --b-grid-max: 820px; /* лента статей (прежняя) */ --b-nav-w: 220px; /* колонка разделов слева от ленты */ --b-shell-gap: 40px; --b-feed-max: 860px; /* лента формата СМИ: одна колонка с крупной картинкой */ --b-hero-lead-max: 580px; --b-h1-size: 44px; /* h1 ленты и категории */ --b-article-h1: 42px; /* h1 статьи */ --b-h2-size: 26px; --b-h3-size: 20px; --b-body-size: 18px; --b-body-lh: 1.75; --b-card-title: 26px; --b-card-desc: 16.5px; --b-meta-size: 13px; } /* ============================================================ Исследования, статьи и кейсы в оформлении «документ» (research.css). Палитра, кегль и подложки этого типа страниц — только здесь. ============================================================ */ .r-full-page { --r-hot: #E8730C; --r-hot-soft: #FFF3E8; --r-deep: var(--b-blue-dark); --r-soft: var(--b-blue-light); --r-line: var(--b-border); --r-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --c-s1: #0C5A5A; --c-s2: #4F9E93; --c-s3: #A8CFC9; --c-s4: #E2EFEE; --c-s1-ink: #FFFFFF; --c-s2-ink: #FFFFFF; --c-s3-ink: #14313A; --c-s4-ink: #14313A; --r-page: #FFFFFF; --r-fs: 19px; /* текст на компьютере (засечка: 19, как у Medium) */ --r-lh: 1.6; --r-fw: 400; /* вес текста статей и исследований */ --r-fs-m: 18px; /* текст на телефоне */ --r-lh-m: 1.62; --r-white: #FFFFFF; --r-ink-deep: #14313A; /* рамка самой высокой доли на карте, тёмные подписи */ --r-deep-hover: #094646; /* кнопка призыва под курсором */ --r-tint-2: #F6F8F8; /* шапка таблицы, пустая ячейка карты */ --r-tint-3: #FAFCFB; /* строка таблицы под курсором */ --r-legend-2: #5F6B73; /* числа серого ряда в подписях колец */ --r-legend-3: #2F8A7E; /* числа третьего ряда в подписях колец */ --r-tint: #F3F7F6; --r-tint-line: #E3ECEA; --c-alice: #EA8E45; --c-google: #3E8581; --c-chatgpt: #4A626B; --c-gigachat: #55B67C; --c-deepseek: #84D0C9; --c-organic: #AFB9BF; --g-main: #3E8581; --g-minor: #B3BCC2; } .r-full-page .r-viz { --c-s1: #3E8581; --c-s2: #B3BCC2; --c-s3: #A5D3CD; --c-s4: #E6EBEA; --c-s2-ink: #1A1A2E; } .r-full-page .r-chart { --c-s1: #3E8581; --c-s2: #B3BCC2; --c-s3: #A5D3CD; --c-s4: #E6EBEA; --c-s2-ink: #1A1A2E; }