ПРОДАЖИО Company profile

Позиционирование

Кто мы, для кого и чем отличаемся. Этот блок задаёт смысл, вокруг которого строятся все тексты и интерфейс.

Способы связи

Строки-контакты (.cm) с цветными иконками каналов. При наведении - сдвиг вправо. Действующие контакты компании:

Telegram@maxkazankin → WhatsApp@kazankin → MAX+7 (925) 855-53-66 → Позвонить+7 (925) 855-53-66 → Электронная почтаmax@prodazhio.ru →

Реквизиты и профиль компании

Юридические данные и официальные страницы ПРОДАЖИО во внешних сервисах.

Дата последнего обновления: 6 июля 2026 г.

Бренд

Логотип, фавикон и фото эксперта. Знак - растущие столбцы со стрелкой вверх (рост продаж). Словесная марка всегда пишется заглавными: ПРОДАЖИО.

Основной · на белом
/assets/prodazhio_logo.webp

На фоне страницы · бежевый

На тёмном · знак в белой плашке

Охранное поле вокруг логотипа - не меньше высоты буквы «П» из марки. Не растягивать, не менять цвета знака, не разворачивать. В сайдбаре - до 130px, кликабелен и ведёт на главную.

Favicon / apple-touch
/assets/prodazhio_fav.webp

В мобильном топбаре · 36×36

Максим Казанкин · основатель
/assets/prodazhio_max.webp · 3:4

Официальный партнёр amoCRM

С бейджем · паттерн .expert-photo + .ep-badge

Фото - студийный портрет в деловом стиле на светлом фоне, кадрирование 3:4. Используется в блоке эксперта на главной и в /demo.

Цвета

Палитра «Нейтраль»: тёплый бежевый фон, графитовые чернила и единственный акцент - фирменный жёлтый. Цвет используется сдержанно: жёлтый - только для акцентов и подсветки, графит - для контраста.

Типографика

Три семейства: Montserrat для заголовков, Inter для текста, JetBrains Mono для надзаголовков, меток и тегов. Заголовки - плотные (-0.02em), с балансировкой переноса строк.

Токены

Скругления, отступы и параметры макета вынесены в CSS-переменные - меняются в одном месте (:root).

Шрифты и поля заданы через clamp(min, Xvw, max), но vw считает всю ширину вьюпорта - вместе с сайдбаром 260px. На узких десктопах (~1000px) полезная ширина контента меньше вьюпорта, поэтому «резиновый» шрифт оказывается великоват и экран не влезает по высоте; на широких (1600px+), наоборот, остаётся лишний воздух. Решение - один множитель --scale в :root: на него умножены все ключевые размеры (calc(clamp(...) * var(--scale))), а брейкпойнты меняют только его значение.

Секции листаются по высоте (scroll-snap), поэтому высота экрана - главный ограничитель: на невысоких ноутбуках контент не влезает при любой ширине. Поэтому поверх ширины действует более сильное ужатие по высоте (правила ниже по каскаду перекрывают ширинные):

Плотные секции (блог, FAQ) на узком/низком десктопе дополнительно ужимаются по полям, отступам и размеру карточек, чтобы строки помещались по высоте. На мобильном (≤960px) множитель = 1: там своя вёрстка и брейкпойнты.

Макет и навигация

Каркас сайта: фиксированный сайдбар слева + «большое окно» со скруглением, внутри которого экраны листаются по вертикали (scroll-snap). На мобильном сайдбар прячется в топбар с выезжающим меню.

Кнопки

Три варианта. Primary (графит) - основное действие; Yellow - максимальный акцент на тёмном фоне; Ghost - вторичное действие. Высота едина, скругление 6px, ховер - подъём.

Бейджи и теги

Мелкие моноширинные метки для категорий, статусов и подтверждений. Жёлтый - для подтверждений и тегов, нейтральный вариант - для фильтров.

Карточки

Единая основа: белый фон, граница --card-border, скругление 10px, подъём при наведении. Тёмные варианты (метрики, акцентная «потеря») задают ритм и контраст.

Блок эксперта

Составной паттерн «о ком кейс»: список опыта с жёлтыми маркерами (.xp-list / .xp-item) и лента логотипов (.logo-strip). Логотипы - чёрно-белые по умолчанию, цветные при наведении.

grayscale(1) opacity(.5) → grayscale(0) opacity(1) на :hover · .logo-tile добавляет скругление тёмному тайлу

Статьи (лонгриды)

Правила вёрстки блога: узкая колонка для читабельности, обложка в герое, оглавление, типографика тела, CTA и блок «ещё статьи». Страница использует body.blog-page - обычная прокрутка.

Принципы