Доступно с

HVACool

HVACool — специализированная тема для компаний, занимающихся бытовыми системами отопления, вентиляции и кондиционирования. Она создана с учётом того, что на такие сайты редко заходят из праздного любопытства. Кому-то жарко, холодно или тревожит утечка — и действовать нужно быстро. Тема держит критически важную информацию на виду, обеспечивает мгновенную навигацию и не отвлекает от главного.

Фиксированные столбцы, важная информация — на первом месте

Трёхколоночная структура закрепляет фирменную идентичность компании или фирменные элементы компании (логотип, навигацию, призыв к действию) в левой боковой панели, а контактные данные — в правой. Благодаря этому информация, необходимая клиенту в экстренной ситуации, — номер телефона, ссылка на запись, адрес — всегда остаётся на виду, независимо от того, в каком месте страницы находится посетитель. Центральный столбец (60 % ширины) отведён под содержимое: заголовки, описания услуг и новости.

Скруглённые углы и единый акцентный цвет для всего оформления

Палитра строится на продуманном контрасте: почти чёрный фон, светлые поверхности для содержимого и единственный кислотно-зелёный цвет, зарезервированный для элементов, требующих немедленного внимания, — блока логотипа, основных призывов к действию, значков и состояний при наведении. Тема включает четыре варианта палитры: акцентный цвет сочетается в них с более тёплыми, холодными или нейтральными базовыми тонами, чтобы можно было менять характер оформления.

Типографика полностью построена на семействе Google Sans — Display (72 pt) для заголовков и Text (24 pt) для основного текста. Это создаёт цельный визуальный образ и снижает нагрузку на сайт, поскольку для всех начертаний и сценариев используется одно семейство шрифтов.

Осмысленная анимация и чистая техническая основа

Лёгкие анимации и эффекты при наведении добавляют характер, не конкурируя с содержимым. Эти детали подчёркивают готовность темы к действию, сигнализируя об интерактивности в нужный момент. Пользовательские стили кнопок заданы в theme.json и подключаются через functions.php, поэтому они доступны в стандартных настройках кнопок без необходимости писать пользовательские CSS. В целом CSS-код компактный, хорошо структурированный и снабжён комментариями.

Анимация главного раздела

На главной странице HVACool посетителей встречает короткая анимация: аватар мастера появляется с эффектом всплытия, текст в речевых пузырях набирается посимвольно, а кнопки призыва к действию плавно проявляются в завершение. Эти анимации можно повторно использовать на собственных блоках — без написания кода.

Как это работает

Анимации управляются тремя CSS-классами. Добавьте их к любому блоку на главной странице через Настройки блока → Дополнительно → Дополнительные CSS-классы:

• anim-avatar — игривое появление с масштабированием и отскоком. Используется для изображения мастера, но подходит для блока Изображение или любого блока изображений.
• anim-pill — фирменный эффект раскрытия текста. Если первый текстовый элемент блока — абзац, текст набирается посимвольно. Если это заголовок, он не набирается посимвольно, а выезжает снизу и плавно проявляется: при посимвольной анимации многострочного заголовка на экране на долю секунды оставался бы пустой пузырь полной высоты.
• anim-buttons — мягкое проявление снизу для строки с призывом к действию, рассчитанное на появление после завершения анимации пузырей.

Последовательность всегда воспроизводится по порядку: появление аватара → каждый блок anim-pill анимируется друг за другом (в порядке расположения на странице) → плавное проявление кнопок. Анимация запускается, когда раздел появляется в области видимости.

Полезно знать

• Только на главной странице. Скрипт, управляющий последовательностью, загружается только на главной странице. Добавление классов к блокам на других страницах не запустит анимацию — это сделано намеренно, чтобы остальной сайт оставался быстрым. (Разработчики могут снять ограничение is_front_page() в functions.php, чтобы изменить это поведение.)
• Доступность встроена. Посетители, у которых в системных настройках включён режим «уменьшения движения», сразу видят содержимое без анимации. Посетители без JavaScript тоже видят всё — ничего не остаётся скрытым.
• Комбинируйте свободно. Можно использовать один, два или все три класса. Можно использовать несколько блоков anim-pill: они будут анимироваться в том порядке, в котором появляются на странице.