diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7077003 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +.claude/ +wordpress/ +node_modules/ +*.log diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..f71833a --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,50 @@ +services: + db: + image: mysql:8.0 + restart: unless-stopped + environment: + MYSQL_ROOT_PASSWORD: rootpass + MYSQL_DATABASE: bitwms + MYSQL_USER: bitwms + MYSQL_PASSWORD: bitwms + volumes: + - db_data:/var/lib/mysql + ports: + - "3306:3306" + + wordpress: + image: wordpress:php8.2-apache + restart: unless-stopped + depends_on: + - db + ports: + - "8080:80" + environment: + WORDPRESS_DB_HOST: db:3306 + WORDPRESS_DB_NAME: bitwms + WORDPRESS_DB_USER: bitwms + WORDPRESS_DB_PASSWORD: bitwms + WORDPRESS_LOCALE: ru_RU + volumes: + - wp_data:/var/www/html + - ./wp-content/themes/bitwms-child:/var/www/html/wp-content/themes/bitwms-child + + wpcli: + image: wordpress:cli + depends_on: + - db + - wordpress + environment: + WORDPRESS_DB_HOST: db:3306 + WORDPRESS_DB_NAME: bitwms + WORDPRESS_DB_USER: bitwms + WORDPRESS_DB_PASSWORD: bitwms + volumes: + - wp_data:/var/www/html + - ./wp-content/themes/bitwms-child:/var/www/html/wp-content/themes/bitwms-child + entrypoint: wp + command: "--info" + +volumes: + db_data: + wp_data: diff --git a/docs/Презентация_портала_БИТ_WMS.docx b/docs/Презентация_портала_БИТ_WMS.docx new file mode 100644 index 0000000..42b309b Binary files /dev/null and b/docs/Презентация_портала_БИТ_WMS.docx differ diff --git a/docs/Презентация_портала_БИТ_WMS.md b/docs/Презентация_портала_БИТ_WMS.md new file mode 100644 index 0000000..2f4a7b3 --- /dev/null +++ b/docs/Презентация_портала_БИТ_WMS.md @@ -0,0 +1,323 @@ +# Экспертный портал БИТ.WMS + +## Презентация проекта + +--- + +## 1. О проекте + +**БИТ.WMS** — экспертный информационный портал по складской логистике и автоматизации склада от компании «Первый Бит». + +Портал сочетает два направления: +- **Экспертный контент** — статьи, вебинары, курсы, кейсы и материалы по складской логистике +- **Продвижение решений** — продуктовая страница БИТ.WMS с демонстрацией возможностей и формами захвата лидов + +**Позиционирование:** «Мы — эксперты в складской логистике. Знаем всё о складе и автоматизации». Подход pull-продаж: привлечение клиентов через ценный контент, а не прямую рекламу. + +--- + +## 2. Цели и задачи + +### Главная цель +Генерация лидов, звонков и подписок по направлению продажи и внедрения WMS-решений. + +### Задачи портала + +| Задача | Как решается | +|--------|-------------| +| Привлечение целевой аудитории | SEO-оптимизированный экспертный контент (статьи, вебинары, материалы) | +| Демонстрация экспертности | Кейсы внедрения, записи вебинаров, обучающие курсы | +| Захват контактов | Формы обратной связи, подписка на рассылку, gated-контент (скачивание за email) | +| Продажа продукта БИТ.WMS | Продуктовая страница с функциями, преимуществами и формой демо | +| Вовлечение и удержание | Онлайн-консультант (JivoSite), callback-виджет, попапы, email-рассылка | +| Аналитика эффективности | Яндекс.Метрика, Google Analytics, CallTouch — отслеживание всех точек контакта | + +### KPI сайта + +- Количество лидов через web-формы +- Количество подписок на рассылку +- Количество звонков с сайта (CallTouch) +- Обращения через callback-виджет +- Диалоги в онлайн-консультанте +- Конверсия трафика в лиды +- Стоимость лида + +--- + +## 3. Целевая аудитория + +| Сегмент | Потребность | +|---------|-------------| +| Руководители складов | Оптимизация процессов, снижение ошибок, ускорение работы | +| IT-директора и сотрудники IT-отделов | Выбор и внедрение WMS-системы, интеграция с существующими решениями | +| Директора предприятий | ROI от автоматизации, стратегические решения | +| Предприниматели (МСБ) | Масштабирование бизнеса, автоматизация складского учёта | +| Финансовые менеджеры | Расчёт окупаемости, оптимизация затрат | + +### Ценностное предложение +- **Экспертность** — глубокое знание отрасли, проверенные решения +- **Комплексность** — единое окно для всех задач складской логистики +- **Прозрачность** — открытый опыт, кейсы, ценовая политика + +--- + +## 4. Структура сайта + +``` +Главная страница +│ +├── БИТ.WMS (продуктовая страница) +│ ├── Функции системы +│ ├── Заказать демо (форма) +│ └── Анкета для детального запроса +│ +├── Кейсы +│ ├── Архив кейсов (карточки с фильтрацией) +│ └── Детальная страница кейса +│ +├── Статьи +│ ├── Архив статей +│ └── Детальная страница статьи +│ +├── Вебинары +│ ├── Архив вебинаров +│ └── Детальная страница (анонс / запись) +│ +├── Курсы +│ ├── Архив курсов +│ └── Детальная страница курса +│ +├── Мероприятия +│ ├── Архив мероприятий +│ └── Детальная страница мероприятия +│ +├── Материалы (скачиваемые) +│ └── Архив материалов (PDF, видео, чек-листы) +│ +├── Новости +│ ├── Архив новостей +│ └── Детальная страница новости +│ +└── Контакты +``` + +--- + +## 5. Состав блоков по страницам + +### 5.1. Главная страница + +| Блок | Назначение | +|------|-----------| +| **Герой** | Крупный заголовок с экспертным посылом, подзаголовок, две CTA-кнопки («Заказать демо» и «Смотреть кейсы»), KPI-цифры (200+ проектов, 15+ лет, 50+ экспертов) | +| **Фильтр по рубрикам** | Горизонтальная полоса тегов: Все, Статьи, Кейсы, Вебинары, Курсы, Мероприятия, Материалы. Фильтрация без перезагрузки страницы (AJAX) | +| **Лента контента** | Карточки контента в сетке 3 колонки. Каждая карточка: изображение, бейдж типа, заголовок, описание, дата. Кнопка «Показать ещё» | +| **Промо БИТ.WMS** | Краткий блок продукта на сером фоне: 4 преимущества (быстро, собственная разработка, проверено, прозрачно) + CTA-кнопки | +| **Подписка на рассылку** | Поле email + кнопка «Подписаться». Интеграция с Unisender | +| **Наши клиенты** | Логотипы компаний-клиентов в горизонтальной строке | + +### 5.2. Страница продукта БИТ.WMS + +| Блок | Назначение | +|------|-----------| +| **Герой продукта** | H1 «БИТ.WMS», подзаголовок, описание, CTA: «Заказать демо» + «Скачать презентацию» (за email) | +| **Функции** | Сетка из 6 карточек: Приёмка, Размещение, Хранение, Отбор, Отгрузка, Инвентаризация. Каждая: описание + результат внедрения | +| **Почему Первый Бит** | 4 блока: Быстро, Просто, Качественно, Открыто — с пояснениями | +| **Кейсы внедрения** | 3 последних кейса + ссылка «Все кейсы» | +| **Другие решения** | Карточки: 1C:WMS, Клеверенс, 1C:TMS — «Возможно, вам будет интересно» | +| **Форма «Заказать демо»** | Поля: имя, компания, телефон, email, комментарий. Согласие на обработку данных | +| **Ссылка на анкету** | Детальная анкета для расчёта: отрасль, размер склада, количество SKU, задачи | + +### 5.3. Архивные страницы (Кейсы, Статьи, Вебинары, Курсы, Мероприятия, Материалы) + +| Блок | Назначение | +|------|-----------| +| **Заголовок раздела** | H1 с названием раздела | +| **Фильтры** | По рубрикам/тегам, по дате | +| **Сетка карточек** | 3 колонки. Карточка: изображение, бейдж типа, заголовок, описание, дата | +| **Пагинация** | Переход между страницами | + +### 5.4. Детальная страница кейса + +| Блок | Назначение | +|------|-----------| +| **Заголовок + мета** | Название проекта, клиент, отрасль | +| **Задача** | Описание задачи клиента | +| **Решение** | Что было внедрено | +| **Результат** | Измеримые результаты | +| **Галерея** | Скриншоты, фото склада | +| **Цитата клиента** | Отзыв (если есть) | +| **CTA** | «Хотите такой же результат? Закажите консультацию» | +| **Похожие кейсы** | 3 карточки других кейсов | + +### 5.5. Детальная страница вебинара + +| Блок | Назначение | +|------|-----------| +| **Анонс** (предстоящий) | Дата, спикер, программа, кнопка «Зарегистрироваться» | +| **Запись** (прошедший) | Видеозапись (embed), презентация для скачивания (gated) | +| **Похожие вебинары** | 3 карточки | + +### 5.6. Детальная страница курса + +| Блок | Назначение | +|------|-----------| +| **Описание курса** | Программа, длительность, формат, стоимость | +| **CTA** | Кнопка «Записаться на курс» | +| **Похожие курсы** | 3 карточки | + +### 5.7. Детальная страница статьи / новости + +| Блок | Назначение | +|------|-----------| +| **Заголовок + мета** | Название, дата, автор | +| **Основной текст** | Контент статьи | +| **Боковая колонка** | Связанные материалы + форма подписки | +| **Шеринг** | VK, Telegram, копировать ссылку | +| **Читайте также** | 3 карточки похожих статей | + +### 5.8. Страница контактов + +| Блок | Назначение | +|------|-----------| +| **Контактная информация** | Екатеринбург ПЦ: адрес, телефон, email | +| **Форма обратной связи** | Имя, email, сообщение, согласие | + +--- + +## 6. Навигация + +### Фиксированная боковая панель (левая) + +Всегда видна на экране. В свёрнутом виде — иконки (70px), при наведении раскрывается с подписями (250px). + +| Пункт | Иконка | +|-------|--------| +| БИТ.WMS | Склад | +| Кейсы | Папка | +| Статьи | Документ | +| Вебинары | Камера | +| Курсы | Шапочка | +| Мероприятия | Календарь | +| Материалы | Скачивание | +| Новости | Колокольчик | +| Контакты | Телефон | + +Внизу панели: ссылки на Telegram и VK. + +На мобильных устройствах панель скрывается и вызывается через гамбургер-меню. + +### Верхний хедер + +Тонкая полоса (60px) над контентом: +- Слева: логотип «первыйБит» + слоган «Экспертный портал по складской логистике» +- Справа: телефон + кнопка «Заказать демо» + поиск + +### Футер + +4 колонки: +- Логотип + контакты Екатеринбург ПЦ +- Ссылки на разделы сайта +- Ссылки на продукты +- Форма подписки на рассылку +- Юридические ссылки (политика конфиденциальности, согласие на обработку данных) + +--- + +## 7. Лидогенерация + +### Точки захвата лидов + +| Инструмент | Описание | Расположение | +|-----------|----------|-------------| +| **Форма «Заказать демо»** | Имя, компания, телефон, email | Страница БИТ.WMS, модальное окно из хедера | +| **Форма «Консультация»** | Имя, телефон, email, вопрос | Контакты, детальные страницы кейсов | +| **Форма «Регистрация»** | Имя, email, телефон | Вебинары, курсы, мероприятия | +| **Gated-контент** | Имя, email → скачивание файла | Материалы (PDF, чек-листы, видео) | +| **Подписка на рассылку** | Email | Главная, боковая колонка статей, футер | +| **Онлайн-консультант** | JivoSite — чат | Все страницы (автоприглашение через 30 сек) | +| **Callback-виджет** | «Перезвоните мне» | Все страницы | +| **Попап exit-intent** | Подписка / скачивание чек-листа | Все страницы (при уходе) | +| **Попап по таймеру** | Предложение демо | Страница БИТ.WMS (через 60 сек) | + +### Воронка + +``` +Посетитель + │ + ├── Читает статью / смотрит вебинар + │ │ + │ ├── Подписывается на рассылку + │ ├── Скачивает материал (gated → email) + │ └── Переходит на страницу БИТ.WMS + │ │ + │ ├── Заказывает демо (форма) + │ ├── Звонит (CallTouch) + │ ├── Пишет в чат (JivoSite) + │ └── Заказывает обратный звонок (callback) + │ + └── ЛИД → Екатеринбург ПЦ → Распределение по ЦК WMS +``` + +--- + +## 8. Продукты на портале + +| Продукт | Роль | Представление | +|---------|------|--------------| +| **БИТ.WMS** | Основной | Полноценная продуктовая страница с демо-формой | +| 1C:WMS Логистика | Вторичный | Краткая карточка в блоке «Возможно, вам будет интересно» | +| Клеверенс | Вторичный | Краткая карточка | +| 1C:TMS | Вторичный | Краткая карточка | + +--- + +## 9. Визуальный стиль + +Строго по брендбуку «Первый Бит»: + +| Элемент | Значение | +|---------|----------| +| Основной фон | Белый (#FFFFFF), много воздуха | +| Корпоративный цвет | Розовый/маджента (#E50071) — кнопки, акценты | +| Текст и заголовки | Чёрный (#000000) | +| Дополнительный фон | Светло-серый (#EBEBEB) | +| Шрифт заголовков | Suisse Int'l Bold | +| Шрифт текста | Suisse Int'l Book | +| Принципы | Минимализм. Без градиентов, теней, диагоналей, стоковых фото | + +--- + +## 10. Технологии + +| Компонент | Решение | +|-----------|---------| +| CMS | WordPress 6.x | +| Тема | GeneratePress Premium + дочерняя тема | +| Блоки | GenerateBlocks Pro | +| Кастомные поля | ACF Pro | +| Формы | Contact Form 7 | +| SEO | Yoast SEO | +| Рассылка | Unisender | +| Чат | JivoSite | +| Попапы | Popup Maker | +| Аналитика | Яндекс.Метрика, Google Analytics 4, CallTouch | + +--- + +## 11. Каналы продвижения + +- Медийная реклама +- Реклама в социальных сетях +- Email-рассылки (Unisender) +- SEO-продвижение +- Контентный маркетинг (статьи, вебинары, материалы) + +--- + +## 12. Контакты и распределение лидов + +- **Основной контакт:** Екатеринбург Проектный центр +- **Распределение:** Екатеринбург ПЦ распределяет лиды по территориально ближайшим Центрам компетенций WMS +- **Email:** wms@1bit.ru +- **Телефон:** +7 (343) 200-00-00 diff --git a/mockup/5-признаков-того-что-вашему-складу-нужн/index.html b/mockup/5-признаков-того-что-вашему-складу-нужн/index.html new file mode 100644 index 0000000..d5e4101 --- /dev/null +++ b/mockup/5-признаков-того-что-вашему-складу-нужн/index.html @@ -0,0 +1,684 @@ + + +
+ + + + + + + + + +Укажите ваши данные для получения доступа к материалу
+ + + +Комплексное решение для управления складом
++ БИТ.WMS — профессиональная система управления складом от Первого Бита. + Автоматизируйте все процессы склада: от приёмки до отгрузки, + сократите ошибки и повысьте эффективность команды. +
+ ++ Автоматическая идентификация товаров по штрихкоду или RFID, проверка + по накладной, фиксация расхождений в режиме реального времени. +
+Сокращение времени приёмки до 40%
++ Интеллектуальный подбор ячейки с учётом типа товара, условий хранения + и топологии склада. ABC-зонирование и адресное хранение. +
+Оптимальное использование площади склада
++ Контроль сроков годности, учёт партий и серийных номеров. + Управление остатками онлайн без ручных пересчётов. +
+Актуальные остатки 24/7 без задержек
++ Маршрутизация обходов, поддержка волновой сборки и мультиордерного + отбора. Голосовое подтверждение и работа с ТСД. +
+Производительность отбора выше на 30%
++ Автоматическая комплектация заказов, контроль весогабаритных характеристик, + формирование отгрузочных документов и интеграция с перевозчиками. +
+Ноль ошибок при отгрузке
++ Циклическая и сплошная инвентаризация без остановки работы склада. + Автоматическое формирование ведомостей и актов расхождений. +
+Инвентаризация без остановки склада
++ Запускаем проекты за недели, а не месяцы. Проверенная + методология внедрения и готовые отраслевые конфигурации. +
++ Интуитивный интерфейс, обучение персонала за 1–2 дня, + подробная документация на русском языке. +
++ 200+ успешных внедрений, 15+ лет экспертизы, собственная команда + разработки и поддержки без передачи на аутсорс. +
++ Прозрачное ценообразование, фиксированные сроки и бюджет, + доступ к исходному коду и регулярные обновления. +
+Переход от ручного учёта к автоматизированному
+ + +Сокращение времени отбора заказов на 35%
+ + +Внедрение БИТ.WMS на складе площадью 5000 м²
+ + ++ Типовое решение на базе 1С:Предприятие для автоматизации + складских процессов в малом и среднем бизнесе. +
+ + Подробнее + ++ Мобильная автоматизация складских операций: маркировка, инвентаризация + и управление через мобильные устройства и ТСД. +
+ + Подробнее + ++ Система управления транспортной логистикой: планирование маршрутов, + контроль доставки и взаиморасчёты с перевозчиками. +
+ + Подробнее + ++ Оставьте заявку, и наш эксперт свяжется с вами в течение рабочего дня, + чтобы провести персональную демонстрацию системы. + Вы также можете заполнить подробную + анкету + для подготовки индивидуального предложения. +
+ + +Укажите ваши данные для получения доступа к материалу
+ + + +Методика расчёта окупаемости
+Чек-лист для руководителя склада
+Добро пожаловать в WordPress. Это ваша первая запись. Отредактируйте или удалите ее, затем начинайте создавать!
+Укажите ваши данные для получения доступа к материалу
+ + + +Переход от ручного учёта к автоматизированному
+ + +Сокращение времени отбора заказов на 35%
+ + +Внедрение БИТ.WMS на складе площадью 5000 м²
+ + +Укажите ваши данные для получения доступа к материалу
+ + + +Методика расчёта окупаемости
+Чек-лист для руководителя склада
+Укажите ваши данные для получения доступа к материалу
+ + + +Добро пожаловать в WordPress. Это ваша первая запись. Отредактируйте или удалите ее, затем начинайте создавать!
+Укажите ваши данные для получения доступа к материалу
+ + + +Укажите ваши данные для получения доступа к материалу
+ + + +Укажите ваши данные для получения доступа к материалу
+ + + +Укажите ваши данные для получения доступа к материалу
+ + + +Экспертный портал от Первого Бита — кейсы, вебинары, курсы и материалы для руководителей складов
+ +Скачайте PDF с пошаговым планом
+ + +Ежегодная конференция по складской логистике
+ + +Полный курс для складских менеджеров
+ + +Методика расчёта окупаемости
+ + +Чек-лист для руководителя склада
+ + +Живая демонстрация возможностей системы
+ + +Знаем бизнес-задачи склада, запускаем проект за недели, а не месяцы
+БИТ.WMS — продукт Первого Бита, гибко адаптируется под ваши процессы
+200+ проектов внедрения, 15+ лет экспертизы в складской логистике
+Открытая ценовая политика, понятные сроки и этапы
++ Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности +
+ +Укажите ваши данные для получения доступа к материалу
+ + + +Укажите ваши данные для получения доступа к материалу
+ + + +Укажите ваши данные для получения доступа к материалу
+ + + +Укажите ваши данные для получения доступа к материалу
+ + + +Укажите ваши данные для получения доступа к материалу
+ + + +Материалы не найдены.
'; + } + + // Show/hide load-more button. + if ( loadMoreBtn ) { + if ( hasMore ) { + loadMoreBtn.style.display = ''; + loadMoreBtn.disabled = false; + loadMoreBtn.textContent = 'Загрузить ещё'; + } else { + loadMoreBtn.style.display = 'none'; + } + } + } ) + .catch( function ( err ) { + console.error( 'bitwms filter error:', err ); + if ( loadMoreBtn ) { + loadMoreBtn.disabled = false; + loadMoreBtn.textContent = 'Загрузить ещё'; + } + } ) + .finally( function () { + isLoading = false; + } ); + } + } ); +} )(); diff --git a/mockup/wp-content/themes/bitwms-child/js/gated-content.js?ver=1.0.0 b/mockup/wp-content/themes/bitwms-child/js/gated-content.js?ver=1.0.0 new file mode 100644 index 0000000..7f0e5c4 --- /dev/null +++ b/mockup/wp-content/themes/bitwms-child/js/gated-content.js?ver=1.0.0 @@ -0,0 +1,38 @@ +document.addEventListener('DOMContentLoaded', function () { + var modal = document.getElementById('gated-modal'); + if (!modal) return; + + var overlay = modal.querySelector('.gated-modal__overlay'); + var closeBtn = modal.querySelector('.gated-modal__close'); + + // Open modal on [data-gated] click + document.addEventListener('click', function (e) { + var trigger = e.target.closest('[data-gated]'); + if (!trigger) return; + e.preventDefault(); + var materialId = trigger.dataset.gated; + var downloadUrl = trigger.dataset.downloadUrl; + // Set hidden field + store download URL + var hiddenField = modal.querySelector('input[name="material-id"]'); + if (hiddenField) hiddenField.value = materialId; + modal.dataset.downloadUrl = downloadUrl || ''; + modal.classList.add('gated-modal--open'); + document.body.style.overflow = 'hidden'; + }); + + function closeModal() { + modal.classList.remove('gated-modal--open'); + document.body.style.overflow = ''; + } + + if (closeBtn) closeBtn.addEventListener('click', closeModal); + if (overlay) overlay.addEventListener('click', closeModal); + + // After CF7 successful submit — trigger download + document.addEventListener('wpcf7mailsent', function () { + if (modal.classList.contains('gated-modal--open') && modal.dataset.downloadUrl) { + window.open(modal.dataset.downloadUrl, '_blank'); + closeModal(); + } + }); +}); diff --git a/mockup/wp-content/themes/bitwms-child/js/sidebar-nav.js?ver=1.0.0 b/mockup/wp-content/themes/bitwms-child/js/sidebar-nav.js?ver=1.0.0 new file mode 100644 index 0000000..917a54e --- /dev/null +++ b/mockup/wp-content/themes/bitwms-child/js/sidebar-nav.js?ver=1.0.0 @@ -0,0 +1,71 @@ +/** + * БИТ.WMS Child Theme — js/sidebar-nav.js + * + * Sidebar navigation toggle behaviour. + * Placeholder for Task 3 — full sidebar implementation will extend this file. + * + * Behaviour: + * - Clicking the hamburger button toggles `.sidebar-nav--open` on the sidebar. + * - Simultaneously toggles `.sidebar-overlay` on to show the dim overlay. + * - Clicking the overlay closes the sidebar. + */ + +document.addEventListener( 'DOMContentLoaded', function () { + 'use strict'; + + // Guard: abort if there is no sidebar on this page. + var sidebar = document.querySelector( '.sidebar-nav' ); + if ( ! sidebar ) { + return; + } + + var hamburger = document.querySelector( '.sidebar-nav__toggle' ); + var body = document.body; + + /** + * Open the sidebar and show the overlay. + */ + function openSidebar() { + sidebar.classList.add( 'sidebar-nav--open' ); + body.classList.add( 'sidebar-overlay' ); + } + + /** + * Close the sidebar and hide the overlay. + */ + function closeSidebar() { + sidebar.classList.remove( 'sidebar-nav--open' ); + body.classList.remove( 'sidebar-overlay' ); + } + + /** + * Toggle sidebar state. + */ + function toggleSidebar() { + if ( sidebar.classList.contains( 'sidebar-nav--open' ) ) { + closeSidebar(); + } else { + openSidebar(); + } + } + + // Attach toggle to hamburger button (if present). + if ( hamburger ) { + hamburger.addEventListener( 'click', function ( e ) { + e.preventDefault(); + toggleSidebar(); + } ); + } + + // Close sidebar when the overlay (body::after pseudo-element area) is clicked. + // We detect clicks on that land outside the sidebar itself. + body.addEventListener( 'click', function ( e ) { + if ( + body.classList.contains( 'sidebar-overlay' ) && + ! sidebar.contains( e.target ) && + ( ! hamburger || ! hamburger.contains( e.target ) ) + ) { + closeSidebar(); + } + } ); +} ); diff --git a/mockup/wp-content/themes/bitwms-child/style.css?ver=1.0.0.css b/mockup/wp-content/themes/bitwms-child/style.css?ver=1.0.0.css new file mode 100644 index 0000000..cd60de8 --- /dev/null +++ b/mockup/wp-content/themes/bitwms-child/style.css?ver=1.0.0.css @@ -0,0 +1,1718 @@ +/* +Theme Name: БИТ.WMS Child +Theme URI: https://bitwms.ru/ +Description: GeneratePress child theme for the БИТ.WMS expert portal. Brandbook styles: corporate pink #E50071, minimalist layout, Suisse Int'l typography. +Author: БИТ.WMS +Author URI: https://bitwms.ru/ +Template: generatepress +Version: 1.0.0 +License: GNU General Public License v2 or later +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Text Domain: bitwms-child +*/ + +/* ========================================================================== + @font-face — Suisse Int'l (woff2 files go into fonts/ directory) + Fallback to Arial until font files are deployed. + ========================================================================== */ + +@font-face { + font-family: 'Suisse Intl'; + src: url('http://localhost:8080/wp-content/themes/bitwms-child/fonts/SuisseIntl-Book.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Suisse Intl'; + src: url('http://localhost:8080/wp-content/themes/bitwms-child/fonts/SuisseIntl-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* ========================================================================== + CSS Custom Properties — brandbook tokens + ========================================================================== */ + +:root { + /* --- Colors --- */ + --color-white: #FFFFFF; + --color-primary: #E50071; /* Pantone 213 C, RGB 229 0 113 — primary corporate */ + --color-black: #000000; + --color-gray-light: #EBEBEB; /* RGB 235 235 235 — secondary */ + --color-gray-text: #666666; + + /* --- Typography --- */ + --font-family-base: 'Suisse Intl', Arial, sans-serif; + --font-heading: var(--font-family-base); + --font-body: var(--font-family-base); + --font-weight-book: 400; + --font-weight-bold: 700; + + --font-size-base: 16px; + --line-height-base: 1.6; + + /* --- Layout dimensions --- */ + --sidebar-width-collapsed: 70px; + --sidebar-width-expanded: 250px; + --content-max-width: 1200px; + --header-height: 60px; + + /* --- Spacing scale --- */ + --space-xs: 4px; + --space-sm: 8px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 40px; + --space-2xl: 64px; + + /* --- Transition --- */ + --transition-base: 0.2s ease; +} + +/* ========================================================================== + Global reset / base + ========================================================================== */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-size: var(--font-size-base); + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + padding: 0; + font-family: var(--font-family-base); + font-weight: var(--font-weight-book); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--color-black); + background-color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ========================================================================== + Headings + ========================================================================== */ + +h1, +h2, +h3, +h4 { + font-family: var(--font-family-base); + font-weight: var(--font-weight-bold); + color: var(--color-black); + line-height: 1.2; + margin-top: 0; + margin-bottom: var(--space-md); +} + +h1 { + font-size: 2.5rem; /* 40px */ +} + +h2 { + font-size: 2rem; /* 32px */ +} + +h3 { + font-size: 1.5rem; /* 24px */ +} + +h4 { + font-size: 1.125rem; /* 18px */ +} + +/* ========================================================================== + Links + ========================================================================== */ + +a { + color: var(--color-primary); + text-decoration: none; + transition: color var(--transition-base); +} + +a:hover, +a:focus { + color: var(--color-black); + text-decoration: underline; +} + +a:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* ========================================================================== + Paragraphs & lists + ========================================================================== */ + +p { + margin-top: 0; + margin-bottom: var(--space-md); +} + +ul, +ol { + margin-top: 0; + margin-bottom: var(--space-md); + padding-left: var(--space-lg); +} + +/* ========================================================================== + Container utility + ========================================================================== */ + +.container { + width: 100%; + max-width: var(--content-max-width); + margin-right: auto; + margin-left: auto; + padding-right: var(--space-lg); + padding-left: var(--space-lg); +} + +/* ========================================================================== + Buttons + ========================================================================== */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: 12px var(--space-lg); + font-family: var(--font-family-base); + font-weight: var(--font-weight-bold); + font-size: 1rem; + line-height: 1; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + border: 2px solid transparent; + border-radius: 0; /* brandbook: no rounded corners */ + transition: + background-color var(--transition-base), + color var(--transition-base), + border-color var(--transition-base); + -webkit-user-select: none; + user-select: none; + appearance: none; +} + +.btn:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* Primary — corporate pink fill */ +.btn-primary { + background-color: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-white); +} + +.btn-primary:hover, +.btn-primary:focus { + background-color: var(--color-black); + border-color: var(--color-black); + color: var(--color-white); + text-decoration: none; +} + +/* Outline — transparent with black border */ +.btn-outline { + background-color: transparent; + border-color: var(--color-black); + color: var(--color-black); +} + +.btn-outline:hover, +.btn-outline:focus { + background-color: var(--color-black); + color: var(--color-white); + text-decoration: none; +} + +/* Small modifier */ +.btn-sm { + padding: 8px var(--space-md); + font-size: 0.875rem; /* 14px */ +} + +/* ========================================================================== + Badge utility + ========================================================================== */ + +.badge { + display: inline-block; + padding: 2px var(--space-sm); + font-family: var(--font-family-base); + font-weight: var(--font-weight-book); + font-size: 0.75rem; /* 12px */ + line-height: 1.4; + color: var(--color-black); + background-color: var(--color-gray-light); + border-radius: 0; + white-space: nowrap; + vertical-align: middle; +} + +/* ========================================================================== + Sidebar overlay (used by sidebar-nav.js) + ========================================================================== */ + +body.sidebar-overlay::after { + content: ''; + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.4); + z-index: 199; +} + +/* ========================================================================== + Sidebar navigation + ========================================================================== */ + +/* Base sidebar */ +.sidebar-nav { + position: fixed; + top: 0; + left: 0; + width: var(--sidebar-width-collapsed); + height: 100vh; + background: var(--color-white); + border-right: 1px solid var(--color-gray-light); + z-index: 1000; + display: flex; + flex-direction: column; + transition: width 0.25s ease; + overflow: hidden; +} + +.sidebar-nav:hover { + width: var(--sidebar-width-expanded); +} + +/* Logo area */ +.sidebar-nav__logo { + display: flex; + align-items: center; + justify-content: center; + min-height: 60px; + border-bottom: 1px solid var(--color-gray-light); + flex-shrink: 0; +} + +.sidebar-nav__logo a { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} + +/* Menu / navigation area */ +.sidebar-nav__menu { + flex: 1; + overflow-y: auto; + overflow-x: hidden; +} + +.sidebar-nav__list { + list-style: none; + margin: 0; + padding: 0; +} + +/* Individual links */ +.sidebar-nav__link { + display: flex; + align-items: center; + gap: 16px; + padding: 12px 23px; + color: var(--color-black); + text-decoration: none; + white-space: nowrap; + transition: + background-color var(--transition-base), + color var(--transition-base); +} + +.sidebar-nav__link:hover, +.sidebar-nav__link:focus { + background-color: var(--color-gray-light); + color: var(--color-black); + text-decoration: none; +} + +/* Active item */ +.sidebar-nav__item--active .sidebar-nav__link { + color: var(--color-primary); + font-weight: var(--font-weight-bold); +} + +/* Icon */ +.sidebar-nav__icon { + flex-shrink: 0; + width: 24px; + height: 24px; +} + +/* Label — hidden when collapsed, visible when sidebar hovered */ +.sidebar-nav__label { + opacity: 0; + transition: opacity 0.2s ease; + font-size: 0.9375rem; /* 15px */ +} + +.sidebar-nav:hover .sidebar-nav__label { + opacity: 1; +} + +/* Social links at the bottom */ +.sidebar-nav__social { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 16px; + border-top: 1px solid var(--color-gray-light); + flex-shrink: 0; +} + +.sidebar-nav__social-link { + display: flex; + align-items: center; + justify-content: center; + color: var(--color-black); + opacity: 0.6; + transition: opacity var(--transition-base); + text-decoration: none; +} + +.sidebar-nav__social-link:hover, +.sidebar-nav__social-link:focus { + opacity: 1; + text-decoration: none; + color: var(--color-black); +} + +/* Content shift on desktop — push main content right of the sidebar */ +.site-content, +.site-header, +.site-footer { + margin-left: var(--sidebar-width-collapsed); +} + +/* Hamburger / toggle button */ +.sidebar-nav__toggle { + display: none; + position: fixed; + top: 12px; + left: 12px; + z-index: 1100; + flex-direction: column; + gap: 4px; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; + background: var(--color-white); + border: 1px solid var(--color-gray-light); + cursor: pointer; + appearance: none; + -webkit-appearance: none; +} + +.sidebar-nav__toggle:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +.sidebar-nav__toggle-bar { + display: block; + width: 24px; + height: 2px; + background-color: var(--color-black); + transition: transform 0.2s ease, opacity 0.2s ease; +} + +/* Mobile styles */ +@media (max-width: 767px) { + /* Hide sidebar off-screen by default */ + .sidebar-nav { + transform: translateX(-100%); + transition: transform 0.25s ease, width 0.25s ease; + width: var(--sidebar-width-expanded); + } + + /* Show sidebar when open */ + .sidebar-nav--open { + transform: translateX(0); + } + + /* Always show labels on mobile when open */ + .sidebar-nav .sidebar-nav__label { + opacity: 1; + } + + /* Show hamburger button on mobile */ + .sidebar-nav__toggle { + display: flex; + } + + /* Remove content margin on mobile */ + .site-content, + .site-header, + .site-footer { + margin-left: 0; + } +} + +/* ========================================================================== + Top header bar + ========================================================================== */ + +.top-header { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--header-height); + padding: 0 32px; + background: var(--color-white); + border-bottom: 1px solid var(--color-gray-light); + + /* Positioned to the right of the collapsed sidebar */ + position: fixed; + top: 0; + left: var(--sidebar-width-collapsed); + right: 0; + z-index: 900; +} + +.top-header__left { + display: flex; + align-items: center; + gap: 16px; +} + +.top-header__logo { + display: flex; + align-items: center; + text-decoration: none; +} + +.top-header__logo img { + height: 30px; + width: auto; +} + +.top-header__tagline { + font-size: 0.875rem; + color: var(--color-gray-text); +} + +.top-header__right { + display: flex; + align-items: center; + gap: 24px; +} + +.top-header__phone { + font-weight: 700; + color: var(--color-black); + text-decoration: none; + font-size: 0.875rem; +} + +.top-header__phone:hover, +.top-header__phone:focus { + color: var(--color-primary); + text-decoration: none; +} + +.top-header__search { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; + color: var(--color-black); + padding: 4px; + transition: color var(--transition-base); +} + +.top-header__search:hover, +.top-header__search:focus { + color: var(--color-primary); +} + +.top-header__search:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* Offset main content below the fixed top header */ +.site-content, +.site-header, +.site-footer { + margin-top: var(--header-height); +} + +@media (max-width: 767px) { + .top-header { + left: 0; + padding: 0 16px 0 56px; /* leave room for hamburger button */ + } + + .top-header__tagline { + display: none; + } + + .top-header__phone { + display: none; + } +} + +/* ========================================================================== + Hero section + ========================================================================== */ + +.hero { padding: 80px 0 60px; } +.hero__title { font-size: 3.5rem; line-height: 1.1; margin: 0 0 24px; max-width: 700px; } +.hero__subtitle { font-size: 1.25rem; line-height: 1.6; color: var(--color-gray-text); margin: 0 0 40px; max-width: 600px; } +.hero__actions { display: flex; gap: 16px; margin-bottom: 60px; } +.hero__stats { display: flex; gap: 48px; } +.hero__stat { display: flex; flex-direction: column; gap: 4px; } +.hero__stat-number { font-family: var(--font-heading); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--color-primary); } +.hero__stat-label { font-size: 0.875rem; color: var(--color-gray-text); } + +@media (max-width: 767px) { + .hero { padding: 40px 0 32px; } + .hero__title { font-size: 2rem; } + .hero__subtitle { font-size: 1rem; } + .hero__actions { flex-direction: column; margin-bottom: 40px; } + .hero__stats { flex-direction: column; gap: 24px; } +} + +/* ========================================================================== + Promo WMS section + ========================================================================== */ + +.promo-wms { + padding: 80px 0; + background: var(--color-gray-light); +} + +.promo-wms__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; + margin-bottom: 48px; +} + +.promo-wms__icon { + font-size: 2rem; + display: block; + margin-bottom: 12px; +} + +.promo-wms__actions { + display: flex; + gap: 16px; +} + +@media (max-width: 767px) { + .promo-wms { padding: 40px 0; } + .promo-wms__grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; } + .promo-wms__actions { flex-direction: column; } +} + +/* ========================================================================== + Subscribe section + ========================================================================== */ + +.subscribe-section { + padding: 80px 0; +} + +.subscribe-section__form { + display: flex; + gap: 12px; + max-width: 500px; + margin-bottom: 12px; +} + +.subscribe-section__input { + flex: 1; + padding: 12px 16px; + font-size: 1rem; + border: 2px solid var(--color-gray-light); + border-radius: 0; +} + +.subscribe-section__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.subscribe-section__note { + font-size: 0.75rem; + color: var(--color-gray-text); +} + +@media (max-width: 767px) { + .subscribe-section { padding: 40px 0; } + .subscribe-section__form { flex-direction: column; max-width: 100%; } + .subscribe-section__input { width: 100%; } +} + +/* ========================================================================== + Clients section + ========================================================================== */ + +.clients-section { + padding: 60px 0 80px; + border-top: 1px solid var(--color-gray-light); +} + +.clients-section__grid { + display: flex; + flex-wrap: wrap; + gap: 32px; + align-items: center; +} + +.clients-section__item img { + max-height: 40px; + filter: grayscale(100%); + opacity: 0.6; + transition: filter var(--transition-base), opacity var(--transition-base); +} + +.clients-section__item img:hover { + filter: grayscale(0%); + opacity: 1; +} + +.clients-section__placeholder { + display: inline-block; + padding: 12px 24px; + background: var(--color-gray-light); + font-size: 0.875rem; + color: var(--color-gray-text); +} + +@media (max-width: 767px) { + .clients-section { padding: 40px 0 48px; } + .clients-section__grid { gap: 16px; } +} + +/* ========================================================================== + Task 9: Content feed — filter bar + content grid (AJAX) + ========================================================================== */ + +/* --- Filter bar --- */ +.filter-bar { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 32px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-gray-light); +} + +.filter-bar__btn { + padding: 8px 20px; + font-size: 0.875rem; + background: none; + border: 1px solid var(--color-gray-light); + cursor: pointer; + color: var(--color-black); +} + +.filter-bar__btn:hover { + border-color: var(--color-black); +} + +.filter-bar__btn--active { + background: var(--color-black); + color: var(--color-white); + border-color: var(--color-black); + font-weight: 700; +} + +/* --- Content grid --- */ +.content-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-bottom: 32px; +} + +.content-card__link { + display: block; + text-decoration: none; + color: inherit; +} + +.content-card__link:hover .content-card__title { + color: var(--color-primary); +} + +.content-card__image { + aspect-ratio: 16 / 10; + overflow: hidden; + margin-bottom: 16px; + background: var(--color-gray-light); +} + +.content-card__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.content-card__placeholder { + width: 100%; + height: 100%; +} + +.content-card__title { + font-size: 1.125rem; + margin: 0 0 8px; + line-height: 1.3; +} + +.content-card__excerpt { + font-size: 0.875rem; + color: var(--color-gray-text); + margin: 0 0 12px; +} + +.content-card__meta { + font-size: 0.75rem; + color: var(--color-gray-text); +} + +.content-feed__more { + text-align: center; + margin-bottom: 60px; +} + +/* --- Responsive breakpoints --- */ +@media (max-width: 1024px) { + .content-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .content-grid { + grid-template-columns: 1fr; + } +} + +/* ========================================================================== + Archive pages — CPT archive-*.php + ========================================================================== */ + +.archive-page { + padding: 60px 0; +} + +.archive-page__title { + margin: 0 0 32px; +} + +/* ========================================================================== + Single CPT pages — single-case, single-webinar, single-course, single-event + ========================================================================== */ + +.single-case, +.single-webinar, +.single-course, +.single-event { + padding: 60px 0; +} + +/* --- Case meta bar --- */ +.single-case__meta { + display: flex; + gap: 24px; + margin-bottom: 40px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-gray-light); +} + +/* --- Case / webinar / course / event content sections --- */ +.single-case__section, +.single-webinar__section, +.single-course__section, +.single-event__section { + margin-bottom: 40px; +} + +.single-case__section h2, +.single-webinar__section h2, +.single-course__section h2, +.single-event__section h2 { + font-size: 1.5rem; + margin: 0 0 16px; +} + +/* --- Webinar / course / event meta bars --- */ +.single-webinar__meta, +.single-course__meta, +.single-event__meta { + display: flex; + flex-wrap: wrap; + gap: 24px; + margin-bottom: 40px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-gray-light); +} + +/* --- Gallery grid (case) --- */ +.gallery-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + margin-bottom: 40px; +} + +.gallery-grid img { + width: 100%; + height: auto; + display: block; +} + +/* --- Blockquote (case) --- */ +.single-case__quote { + border-left: 4px solid var(--color-primary); + padding: 24px 32px; + margin: 40px 0; + background: var(--color-gray-light); + font-style: italic; + font-size: 1.125rem; +} + +/* --- CTA blocks --- */ +.single-case__cta, +.single-webinar__cta, +.single-course__cta, +.single-event__cta { + padding: 40px 0; + border-top: 1px solid var(--color-gray-light); +} + +/* --- Related posts section --- */ +.related-posts { + padding: 60px 0 0; + border-top: 1px solid var(--color-gray-light); +} + +/* --- Webinar video embed --- */ +.single-webinar__video { + margin-bottom: 40px; +} + +.single-webinar__video iframe { + width: 100%; + aspect-ratio: 16 / 9; + border: 0; +} + +/* --- Presentation download --- */ +.single-webinar__presentation { + margin-top: 24px; +} + +/* ========================================================================== + Pagination — the_posts_pagination() + ========================================================================== */ + +.nav-links { + display: flex; + gap: 8px; + justify-content: center; + margin-top: 32px; +} + +.page-numbers { + padding: 8px 16px; + border: 1px solid var(--color-gray-light); + text-decoration: none; + color: var(--color-black); + transition: background 0.2s, color 0.2s; +} + +.page-numbers:hover { + background: var(--color-gray-light); +} + +.page-numbers.current { + background: var(--color-black); + color: var(--color-white); + border-color: var(--color-black); +} + +/* ========================================================================== + Responsive — CPT templates + ========================================================================== */ + +@media (max-width: 1024px) { + .gallery-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .single-case__meta, + .single-webinar__meta, + .single-course__meta, + .single-event__meta { + flex-direction: column; + gap: 12px; + } + + .gallery-grid { + grid-template-columns: 1fr; + } + + .single-case__quote { + padding: 16px 20px; + font-size: 1rem; + } +} + +/* ========================================================================== + Contacts page + ========================================================================== */ + +.page-contacts { + padding: 60px 0; +} + +.page-contacts__title { + margin-bottom: 0; +} + +.contacts-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + margin-top: 32px; +} + +.contacts-list { + list-style: none; + margin: 24px 0 0; + padding: 0; +} + +.contacts-list__item { + margin-bottom: 16px; + font-size: 1rem; + line-height: 1.5; +} + +.contacts-list__item address { + display: inline; + font-style: normal; +} + +.contacts-list__item a { + color: var(--color-primary); + text-decoration: none; +} + +.contacts-list__item a:hover { + text-decoration: underline; +} + +/* Contact form */ + +.contact-form__field { + margin-bottom: 20px; +} + +.contact-form__label { + display: block; + font-size: 0.875rem; + font-weight: var(--font-weight-bold); + margin-bottom: 6px; +} + +.contact-form__required { + color: var(--color-primary); + margin-left: 2px; +} + +.contact-form__input, +.contact-form__textarea { + display: block; + width: 100%; + padding: 10px 14px; + font-family: var(--font-family-base); + font-size: 1rem; + line-height: 1.5; + color: var(--color-black); + background: var(--color-white); + border: 2px solid var(--color-gray-light); + border-radius: 4px; + transition: border-color var(--transition-base); + box-sizing: border-box; +} + +.contact-form__input:focus, +.contact-form__textarea:focus { + outline: none; + border-color: var(--color-primary); +} + +.contact-form__textarea { + resize: vertical; + min-height: 120px; +} + +.contact-form__field--checkbox { + display: flex; + align-items: flex-start; + gap: 10px; +} + +.contact-form__checkbox-label { + display: flex; + align-items: flex-start; + gap: 10px; + font-size: 0.875rem; + line-height: 1.5; + cursor: pointer; +} + +.contact-form__checkbox { + flex-shrink: 0; + margin-top: 3px; + width: 16px; + height: 16px; + accent-color: var(--color-primary); + cursor: pointer; +} + +.contact-form__checkbox-label a { + color: var(--color-primary); + text-decoration: underline; +} + +.contact-form__submit { + margin-top: 8px; +} + +@media (max-width: 767px) { + .contacts-grid { + grid-template-columns: 1fr; + gap: 40px; + } +} + +/* ========================================================================== + Custom footer + ========================================================================== */ + +.custom-footer { + border-top: 1px solid var(--color-gray-light); + padding: 48px 0 24px; + background: var(--color-white); +} + +.custom-footer__grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1.5fr; + gap: 32px; + margin-bottom: 32px; +} + +/* Col 1 — brand */ + +.custom-footer__logo-link { + display: inline-block; + margin-bottom: 20px; +} + +.custom-footer__logo { + display: block; + max-width: 140px; + height: auto; +} + +.custom-footer__address { + font-style: normal; + font-size: 0.875rem; + line-height: 1.6; + color: var(--color-gray-text); +} + +.custom-footer__address p { + margin: 0 0 6px; +} + +.custom-footer__address a { + color: var(--color-gray-text); + text-decoration: none; +} + +.custom-footer__address a:hover { + color: var(--color-primary); +} + +/* Col headings */ + +.custom-footer__col h4 { + font-size: 0.875rem; + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0 0 16px; + color: var(--color-black); +} + +/* Col nav lists */ + +.custom-footer__col ul { + list-style: none; + margin: 0; + padding: 0; +} + +.custom-footer__col ul li { + font-size: 0.875rem; + margin-bottom: 10px; +} + +.custom-footer__col a { + color: var(--color-gray-text); + text-decoration: none; + transition: color var(--transition-base); +} + +.custom-footer__col a:hover { + color: var(--color-primary); +} + +/* Col 4 — subscribe */ + +.custom-footer__subscribe-desc { + font-size: 0.875rem; + color: var(--color-gray-text); + margin: 0 0 12px; + line-height: 1.5; +} + +.footer-subscribe { + display: flex; + gap: 8px; + align-items: stretch; +} + +.footer-subscribe__input { + flex: 1; + min-width: 0; + padding: 8px 12px; + font-family: var(--font-family-base); + font-size: 0.875rem; + color: var(--color-black); + background: var(--color-white); + border: 2px solid var(--color-gray-light); + border-radius: 4px; + transition: border-color var(--transition-base); + box-sizing: border-box; +} + +.footer-subscribe__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.footer-subscribe__btn, +.btn--sm { + padding: 8px 16px; + font-size: 0.875rem; + white-space: nowrap; + flex-shrink: 0; +} + +/* Bottom bar */ + +.custom-footer__bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 24px; + border-top: 1px solid var(--color-gray-light); + font-size: 0.75rem; + color: var(--color-gray-text); +} + +.custom-footer__bottom p { + margin: 0; +} + +.custom-footer__legal { + display: flex; + gap: 24px; +} + +.custom-footer__legal a { + color: var(--color-gray-text); + text-decoration: none; + transition: color var(--transition-base); +} + +.custom-footer__legal a:hover { + color: var(--color-primary); +} + +/* Footer responsive */ + +@media (max-width: 1024px) { + .custom-footer__grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 767px) { + .custom-footer__grid { + grid-template-columns: 1fr; + gap: 32px; + } + + .custom-footer__bottom { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + + .custom-footer__legal { + flex-direction: column; + gap: 8px; + } + + .footer-subscribe { + flex-direction: column; + } + + .footer-subscribe__btn { + width: 100%; + } +} + +/* ========================================================================== + Task 10: БИТ.WMS product page + ========================================================================== */ + +/* ------------------------------------------------------------------ + 1. Hero + ------------------------------------------------------------------ */ + +.bitwms-hero { + padding: 80px 0 60px; +} + +.bitwms-hero h1 { + font-size: 4rem; + line-height: 1.1; + margin-bottom: var(--space-md); +} + +.bitwms-hero__subtitle { + font-size: 1.5rem; + font-weight: var(--font-weight-bold); + color: var(--color-gray-text); + margin-bottom: var(--space-lg); +} + +.bitwms-hero__description { + font-size: 1.125rem; + max-width: 680px; + color: var(--color-gray-text); + margin-bottom: var(--space-xl); +} + +.bitwms-hero__actions { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +@media (max-width: 767px) { + .bitwms-hero { + padding: 48px 0 40px; + } + + .bitwms-hero h1 { + font-size: 2.5rem; + } + + .bitwms-hero__subtitle { + font-size: 1.125rem; + } + + .bitwms-hero__description { + font-size: 1rem; + } + + .bitwms-hero__actions { + flex-direction: column; + } + + .bitwms-hero__actions .btn { + width: 100%; + text-align: center; + } +} + +/* ------------------------------------------------------------------ + 2. Features + ------------------------------------------------------------------ */ + +.bitwms-features { + padding: 80px 0; + background: var(--color-gray-light); +} + +.bitwms-features h2 { + margin-bottom: 48px; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.feature-card { + background: var(--color-white); + padding: 32px; + display: flex; + flex-direction: column; +} + +.feature-card h3 { + font-size: 1.25rem; + margin-bottom: var(--space-md); +} + +.feature-card p { + font-size: 0.9375rem; + color: var(--color-gray-text); + flex: 1; +} + +.feature-card__result { + color: var(--color-primary); + font-weight: var(--font-weight-bold); + font-size: 0.875rem; + margin-bottom: 0; +} + +@media (max-width: 1024px) { + .features-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .bitwms-features { + padding: 48px 0; + } + + .features-grid { + grid-template-columns: 1fr; + } +} + +/* ------------------------------------------------------------------ + 3. Why us + ------------------------------------------------------------------ */ + +.bitwms-why { + padding: 80px 0; +} + +.bitwms-why h2 { + margin-bottom: 48px; +} + +.why-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 32px; +} + +.why-grid__item h3 { + font-size: 1.25rem; + margin-bottom: var(--space-md); + position: relative; + padding-bottom: 16px; +} + +.why-grid__item h3::after { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 32px; + height: 2px; + background: var(--color-primary); +} + +.why-grid__item p { + font-size: 0.9375rem; + color: var(--color-gray-text); +} + +@media (max-width: 1024px) { + .why-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .bitwms-why { + padding: 48px 0; + } + + .why-grid { + grid-template-columns: 1fr; + gap: 24px; + } +} + +/* ------------------------------------------------------------------ + 4. Cases + ------------------------------------------------------------------ */ + +.bitwms-cases { + padding: 60px 0; + border-top: 1px solid var(--color-gray-light); +} + +.bitwms-cases h2 { + margin-bottom: 40px; +} + +.bitwms-cases__more { + margin-top: 40px; + text-align: center; +} + +@media (max-width: 767px) { + .bitwms-cases { + padding: 40px 0; + } +} + +/* ------------------------------------------------------------------ + 5. Other solutions + ------------------------------------------------------------------ */ + +.bitwms-other { + padding: 60px 0; + background: var(--color-gray-light); +} + +.bitwms-other h2 { + margin-bottom: 40px; +} + +.other-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.other-card { + background: var(--color-white); + padding: 32px; + display: flex; + flex-direction: column; +} + +.other-card__title { + font-size: 1.25rem; + margin-bottom: var(--space-md); +} + +.other-card__description { + font-size: 0.9375rem; + color: var(--color-gray-text); + flex: 1; + margin-bottom: var(--space-lg); +} + +@media (max-width: 1024px) { + .other-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .bitwms-other { + padding: 40px 0; + } + + .other-grid { + grid-template-columns: 1fr; + } +} + +/* ------------------------------------------------------------------ + 6. Demo form + ------------------------------------------------------------------ */ + +.bitwms-demo { + padding: 80px 0; +} + +.bitwms-demo h2 { + margin-bottom: var(--space-md); +} + +.bitwms-demo__description { + font-size: 1.0625rem; + color: var(--color-gray-text); + max-width: 600px; + margin-bottom: 40px; +} + +.demo-form { + max-width: 600px; +} + +.demo-form__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 20px; +} + +.demo-form__field { + display: flex; + flex-direction: column; + gap: 6px; +} + +.demo-form__field--full { + margin-bottom: 20px; +} + +.demo-form__label { + font-size: 0.875rem; + font-weight: var(--font-weight-bold); + color: var(--color-black); +} + +.demo-form__required { + color: var(--color-primary); +} + +.demo-form__input { + width: 100%; + padding: 12px 16px; + font-family: var(--font-family-base); + font-size: 1rem; + color: var(--color-black); + background: var(--color-white); + border: 2px solid var(--color-gray-light); + border-radius: 0; + transition: border-color var(--transition-base); + appearance: none; + -webkit-appearance: none; +} + +.demo-form__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.demo-form__input::placeholder { + color: var(--color-gray-text); + opacity: 1; +} + +.demo-form__textarea { + resize: vertical; + min-height: 120px; +} + +.demo-form__consent { + margin-bottom: 24px; +} + +.demo-form__consent-label { + display: flex; + align-items: flex-start; + gap: 10px; + font-size: 0.875rem; + color: var(--color-gray-text); + cursor: pointer; +} + +.demo-form__checkbox { + flex-shrink: 0; + width: 18px; + height: 18px; + margin-top: 2px; + border: 2px solid var(--color-gray-light); + accent-color: var(--color-primary); + cursor: pointer; +} + +.demo-form__submit { + padding: 14px 40px; +} + +@media (max-width: 767px) { + .bitwms-demo { + padding: 48px 0; + } + + .demo-form__grid { + grid-template-columns: 1fr; + } + + .demo-form { + max-width: 100%; + } + + .demo-form__submit { + width: 100%; + } +} + +/* ========================================================================== + Gated Content Modal + ========================================================================== */ + +.gated-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; } +.gated-modal--open { display: flex; } +.gated-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } +.gated-modal__content { position: relative; background: var(--color-white); padding: 48px; max-width: 480px; width: 90%; z-index: 1; } +.gated-modal__close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-gray-text); } +.gated-form input[type="text"], .gated-form input[type="email"] { width: 100%; padding: 12px 16px; border: 2px solid var(--color-gray-light); border-radius: 0; margin-bottom: 12px; font-size: 1rem; box-sizing: border-box; } +.gated-form input:focus { outline: none; border-color: var(--color-primary); } diff --git a/mockup/wp-content/themes/bitwms-child/style.css?ver=1775163287.css b/mockup/wp-content/themes/bitwms-child/style.css?ver=1775163287.css new file mode 100644 index 0000000..cd60de8 --- /dev/null +++ b/mockup/wp-content/themes/bitwms-child/style.css?ver=1775163287.css @@ -0,0 +1,1718 @@ +/* +Theme Name: БИТ.WMS Child +Theme URI: https://bitwms.ru/ +Description: GeneratePress child theme for the БИТ.WMS expert portal. Brandbook styles: corporate pink #E50071, minimalist layout, Suisse Int'l typography. +Author: БИТ.WMS +Author URI: https://bitwms.ru/ +Template: generatepress +Version: 1.0.0 +License: GNU General Public License v2 or later +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Text Domain: bitwms-child +*/ + +/* ========================================================================== + @font-face — Suisse Int'l (woff2 files go into fonts/ directory) + Fallback to Arial until font files are deployed. + ========================================================================== */ + +@font-face { + font-family: 'Suisse Intl'; + src: url('http://localhost:8080/wp-content/themes/bitwms-child/fonts/SuisseIntl-Book.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Suisse Intl'; + src: url('http://localhost:8080/wp-content/themes/bitwms-child/fonts/SuisseIntl-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* ========================================================================== + CSS Custom Properties — brandbook tokens + ========================================================================== */ + +:root { + /* --- Colors --- */ + --color-white: #FFFFFF; + --color-primary: #E50071; /* Pantone 213 C, RGB 229 0 113 — primary corporate */ + --color-black: #000000; + --color-gray-light: #EBEBEB; /* RGB 235 235 235 — secondary */ + --color-gray-text: #666666; + + /* --- Typography --- */ + --font-family-base: 'Suisse Intl', Arial, sans-serif; + --font-heading: var(--font-family-base); + --font-body: var(--font-family-base); + --font-weight-book: 400; + --font-weight-bold: 700; + + --font-size-base: 16px; + --line-height-base: 1.6; + + /* --- Layout dimensions --- */ + --sidebar-width-collapsed: 70px; + --sidebar-width-expanded: 250px; + --content-max-width: 1200px; + --header-height: 60px; + + /* --- Spacing scale --- */ + --space-xs: 4px; + --space-sm: 8px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 40px; + --space-2xl: 64px; + + /* --- Transition --- */ + --transition-base: 0.2s ease; +} + +/* ========================================================================== + Global reset / base + ========================================================================== */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-size: var(--font-size-base); + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + padding: 0; + font-family: var(--font-family-base); + font-weight: var(--font-weight-book); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--color-black); + background-color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ========================================================================== + Headings + ========================================================================== */ + +h1, +h2, +h3, +h4 { + font-family: var(--font-family-base); + font-weight: var(--font-weight-bold); + color: var(--color-black); + line-height: 1.2; + margin-top: 0; + margin-bottom: var(--space-md); +} + +h1 { + font-size: 2.5rem; /* 40px */ +} + +h2 { + font-size: 2rem; /* 32px */ +} + +h3 { + font-size: 1.5rem; /* 24px */ +} + +h4 { + font-size: 1.125rem; /* 18px */ +} + +/* ========================================================================== + Links + ========================================================================== */ + +a { + color: var(--color-primary); + text-decoration: none; + transition: color var(--transition-base); +} + +a:hover, +a:focus { + color: var(--color-black); + text-decoration: underline; +} + +a:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* ========================================================================== + Paragraphs & lists + ========================================================================== */ + +p { + margin-top: 0; + margin-bottom: var(--space-md); +} + +ul, +ol { + margin-top: 0; + margin-bottom: var(--space-md); + padding-left: var(--space-lg); +} + +/* ========================================================================== + Container utility + ========================================================================== */ + +.container { + width: 100%; + max-width: var(--content-max-width); + margin-right: auto; + margin-left: auto; + padding-right: var(--space-lg); + padding-left: var(--space-lg); +} + +/* ========================================================================== + Buttons + ========================================================================== */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: 12px var(--space-lg); + font-family: var(--font-family-base); + font-weight: var(--font-weight-bold); + font-size: 1rem; + line-height: 1; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + border: 2px solid transparent; + border-radius: 0; /* brandbook: no rounded corners */ + transition: + background-color var(--transition-base), + color var(--transition-base), + border-color var(--transition-base); + -webkit-user-select: none; + user-select: none; + appearance: none; +} + +.btn:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* Primary — corporate pink fill */ +.btn-primary { + background-color: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-white); +} + +.btn-primary:hover, +.btn-primary:focus { + background-color: var(--color-black); + border-color: var(--color-black); + color: var(--color-white); + text-decoration: none; +} + +/* Outline — transparent with black border */ +.btn-outline { + background-color: transparent; + border-color: var(--color-black); + color: var(--color-black); +} + +.btn-outline:hover, +.btn-outline:focus { + background-color: var(--color-black); + color: var(--color-white); + text-decoration: none; +} + +/* Small modifier */ +.btn-sm { + padding: 8px var(--space-md); + font-size: 0.875rem; /* 14px */ +} + +/* ========================================================================== + Badge utility + ========================================================================== */ + +.badge { + display: inline-block; + padding: 2px var(--space-sm); + font-family: var(--font-family-base); + font-weight: var(--font-weight-book); + font-size: 0.75rem; /* 12px */ + line-height: 1.4; + color: var(--color-black); + background-color: var(--color-gray-light); + border-radius: 0; + white-space: nowrap; + vertical-align: middle; +} + +/* ========================================================================== + Sidebar overlay (used by sidebar-nav.js) + ========================================================================== */ + +body.sidebar-overlay::after { + content: ''; + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.4); + z-index: 199; +} + +/* ========================================================================== + Sidebar navigation + ========================================================================== */ + +/* Base sidebar */ +.sidebar-nav { + position: fixed; + top: 0; + left: 0; + width: var(--sidebar-width-collapsed); + height: 100vh; + background: var(--color-white); + border-right: 1px solid var(--color-gray-light); + z-index: 1000; + display: flex; + flex-direction: column; + transition: width 0.25s ease; + overflow: hidden; +} + +.sidebar-nav:hover { + width: var(--sidebar-width-expanded); +} + +/* Logo area */ +.sidebar-nav__logo { + display: flex; + align-items: center; + justify-content: center; + min-height: 60px; + border-bottom: 1px solid var(--color-gray-light); + flex-shrink: 0; +} + +.sidebar-nav__logo a { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} + +/* Menu / navigation area */ +.sidebar-nav__menu { + flex: 1; + overflow-y: auto; + overflow-x: hidden; +} + +.sidebar-nav__list { + list-style: none; + margin: 0; + padding: 0; +} + +/* Individual links */ +.sidebar-nav__link { + display: flex; + align-items: center; + gap: 16px; + padding: 12px 23px; + color: var(--color-black); + text-decoration: none; + white-space: nowrap; + transition: + background-color var(--transition-base), + color var(--transition-base); +} + +.sidebar-nav__link:hover, +.sidebar-nav__link:focus { + background-color: var(--color-gray-light); + color: var(--color-black); + text-decoration: none; +} + +/* Active item */ +.sidebar-nav__item--active .sidebar-nav__link { + color: var(--color-primary); + font-weight: var(--font-weight-bold); +} + +/* Icon */ +.sidebar-nav__icon { + flex-shrink: 0; + width: 24px; + height: 24px; +} + +/* Label — hidden when collapsed, visible when sidebar hovered */ +.sidebar-nav__label { + opacity: 0; + transition: opacity 0.2s ease; + font-size: 0.9375rem; /* 15px */ +} + +.sidebar-nav:hover .sidebar-nav__label { + opacity: 1; +} + +/* Social links at the bottom */ +.sidebar-nav__social { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 16px; + border-top: 1px solid var(--color-gray-light); + flex-shrink: 0; +} + +.sidebar-nav__social-link { + display: flex; + align-items: center; + justify-content: center; + color: var(--color-black); + opacity: 0.6; + transition: opacity var(--transition-base); + text-decoration: none; +} + +.sidebar-nav__social-link:hover, +.sidebar-nav__social-link:focus { + opacity: 1; + text-decoration: none; + color: var(--color-black); +} + +/* Content shift on desktop — push main content right of the sidebar */ +.site-content, +.site-header, +.site-footer { + margin-left: var(--sidebar-width-collapsed); +} + +/* Hamburger / toggle button */ +.sidebar-nav__toggle { + display: none; + position: fixed; + top: 12px; + left: 12px; + z-index: 1100; + flex-direction: column; + gap: 4px; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; + background: var(--color-white); + border: 1px solid var(--color-gray-light); + cursor: pointer; + appearance: none; + -webkit-appearance: none; +} + +.sidebar-nav__toggle:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +.sidebar-nav__toggle-bar { + display: block; + width: 24px; + height: 2px; + background-color: var(--color-black); + transition: transform 0.2s ease, opacity 0.2s ease; +} + +/* Mobile styles */ +@media (max-width: 767px) { + /* Hide sidebar off-screen by default */ + .sidebar-nav { + transform: translateX(-100%); + transition: transform 0.25s ease, width 0.25s ease; + width: var(--sidebar-width-expanded); + } + + /* Show sidebar when open */ + .sidebar-nav--open { + transform: translateX(0); + } + + /* Always show labels on mobile when open */ + .sidebar-nav .sidebar-nav__label { + opacity: 1; + } + + /* Show hamburger button on mobile */ + .sidebar-nav__toggle { + display: flex; + } + + /* Remove content margin on mobile */ + .site-content, + .site-header, + .site-footer { + margin-left: 0; + } +} + +/* ========================================================================== + Top header bar + ========================================================================== */ + +.top-header { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--header-height); + padding: 0 32px; + background: var(--color-white); + border-bottom: 1px solid var(--color-gray-light); + + /* Positioned to the right of the collapsed sidebar */ + position: fixed; + top: 0; + left: var(--sidebar-width-collapsed); + right: 0; + z-index: 900; +} + +.top-header__left { + display: flex; + align-items: center; + gap: 16px; +} + +.top-header__logo { + display: flex; + align-items: center; + text-decoration: none; +} + +.top-header__logo img { + height: 30px; + width: auto; +} + +.top-header__tagline { + font-size: 0.875rem; + color: var(--color-gray-text); +} + +.top-header__right { + display: flex; + align-items: center; + gap: 24px; +} + +.top-header__phone { + font-weight: 700; + color: var(--color-black); + text-decoration: none; + font-size: 0.875rem; +} + +.top-header__phone:hover, +.top-header__phone:focus { + color: var(--color-primary); + text-decoration: none; +} + +.top-header__search { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; + color: var(--color-black); + padding: 4px; + transition: color var(--transition-base); +} + +.top-header__search:hover, +.top-header__search:focus { + color: var(--color-primary); +} + +.top-header__search:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* Offset main content below the fixed top header */ +.site-content, +.site-header, +.site-footer { + margin-top: var(--header-height); +} + +@media (max-width: 767px) { + .top-header { + left: 0; + padding: 0 16px 0 56px; /* leave room for hamburger button */ + } + + .top-header__tagline { + display: none; + } + + .top-header__phone { + display: none; + } +} + +/* ========================================================================== + Hero section + ========================================================================== */ + +.hero { padding: 80px 0 60px; } +.hero__title { font-size: 3.5rem; line-height: 1.1; margin: 0 0 24px; max-width: 700px; } +.hero__subtitle { font-size: 1.25rem; line-height: 1.6; color: var(--color-gray-text); margin: 0 0 40px; max-width: 600px; } +.hero__actions { display: flex; gap: 16px; margin-bottom: 60px; } +.hero__stats { display: flex; gap: 48px; } +.hero__stat { display: flex; flex-direction: column; gap: 4px; } +.hero__stat-number { font-family: var(--font-heading); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--color-primary); } +.hero__stat-label { font-size: 0.875rem; color: var(--color-gray-text); } + +@media (max-width: 767px) { + .hero { padding: 40px 0 32px; } + .hero__title { font-size: 2rem; } + .hero__subtitle { font-size: 1rem; } + .hero__actions { flex-direction: column; margin-bottom: 40px; } + .hero__stats { flex-direction: column; gap: 24px; } +} + +/* ========================================================================== + Promo WMS section + ========================================================================== */ + +.promo-wms { + padding: 80px 0; + background: var(--color-gray-light); +} + +.promo-wms__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; + margin-bottom: 48px; +} + +.promo-wms__icon { + font-size: 2rem; + display: block; + margin-bottom: 12px; +} + +.promo-wms__actions { + display: flex; + gap: 16px; +} + +@media (max-width: 767px) { + .promo-wms { padding: 40px 0; } + .promo-wms__grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; } + .promo-wms__actions { flex-direction: column; } +} + +/* ========================================================================== + Subscribe section + ========================================================================== */ + +.subscribe-section { + padding: 80px 0; +} + +.subscribe-section__form { + display: flex; + gap: 12px; + max-width: 500px; + margin-bottom: 12px; +} + +.subscribe-section__input { + flex: 1; + padding: 12px 16px; + font-size: 1rem; + border: 2px solid var(--color-gray-light); + border-radius: 0; +} + +.subscribe-section__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.subscribe-section__note { + font-size: 0.75rem; + color: var(--color-gray-text); +} + +@media (max-width: 767px) { + .subscribe-section { padding: 40px 0; } + .subscribe-section__form { flex-direction: column; max-width: 100%; } + .subscribe-section__input { width: 100%; } +} + +/* ========================================================================== + Clients section + ========================================================================== */ + +.clients-section { + padding: 60px 0 80px; + border-top: 1px solid var(--color-gray-light); +} + +.clients-section__grid { + display: flex; + flex-wrap: wrap; + gap: 32px; + align-items: center; +} + +.clients-section__item img { + max-height: 40px; + filter: grayscale(100%); + opacity: 0.6; + transition: filter var(--transition-base), opacity var(--transition-base); +} + +.clients-section__item img:hover { + filter: grayscale(0%); + opacity: 1; +} + +.clients-section__placeholder { + display: inline-block; + padding: 12px 24px; + background: var(--color-gray-light); + font-size: 0.875rem; + color: var(--color-gray-text); +} + +@media (max-width: 767px) { + .clients-section { padding: 40px 0 48px; } + .clients-section__grid { gap: 16px; } +} + +/* ========================================================================== + Task 9: Content feed — filter bar + content grid (AJAX) + ========================================================================== */ + +/* --- Filter bar --- */ +.filter-bar { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 32px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-gray-light); +} + +.filter-bar__btn { + padding: 8px 20px; + font-size: 0.875rem; + background: none; + border: 1px solid var(--color-gray-light); + cursor: pointer; + color: var(--color-black); +} + +.filter-bar__btn:hover { + border-color: var(--color-black); +} + +.filter-bar__btn--active { + background: var(--color-black); + color: var(--color-white); + border-color: var(--color-black); + font-weight: 700; +} + +/* --- Content grid --- */ +.content-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-bottom: 32px; +} + +.content-card__link { + display: block; + text-decoration: none; + color: inherit; +} + +.content-card__link:hover .content-card__title { + color: var(--color-primary); +} + +.content-card__image { + aspect-ratio: 16 / 10; + overflow: hidden; + margin-bottom: 16px; + background: var(--color-gray-light); +} + +.content-card__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.content-card__placeholder { + width: 100%; + height: 100%; +} + +.content-card__title { + font-size: 1.125rem; + margin: 0 0 8px; + line-height: 1.3; +} + +.content-card__excerpt { + font-size: 0.875rem; + color: var(--color-gray-text); + margin: 0 0 12px; +} + +.content-card__meta { + font-size: 0.75rem; + color: var(--color-gray-text); +} + +.content-feed__more { + text-align: center; + margin-bottom: 60px; +} + +/* --- Responsive breakpoints --- */ +@media (max-width: 1024px) { + .content-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .content-grid { + grid-template-columns: 1fr; + } +} + +/* ========================================================================== + Archive pages — CPT archive-*.php + ========================================================================== */ + +.archive-page { + padding: 60px 0; +} + +.archive-page__title { + margin: 0 0 32px; +} + +/* ========================================================================== + Single CPT pages — single-case, single-webinar, single-course, single-event + ========================================================================== */ + +.single-case, +.single-webinar, +.single-course, +.single-event { + padding: 60px 0; +} + +/* --- Case meta bar --- */ +.single-case__meta { + display: flex; + gap: 24px; + margin-bottom: 40px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-gray-light); +} + +/* --- Case / webinar / course / event content sections --- */ +.single-case__section, +.single-webinar__section, +.single-course__section, +.single-event__section { + margin-bottom: 40px; +} + +.single-case__section h2, +.single-webinar__section h2, +.single-course__section h2, +.single-event__section h2 { + font-size: 1.5rem; + margin: 0 0 16px; +} + +/* --- Webinar / course / event meta bars --- */ +.single-webinar__meta, +.single-course__meta, +.single-event__meta { + display: flex; + flex-wrap: wrap; + gap: 24px; + margin-bottom: 40px; + padding-bottom: 24px; + border-bottom: 1px solid var(--color-gray-light); +} + +/* --- Gallery grid (case) --- */ +.gallery-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + margin-bottom: 40px; +} + +.gallery-grid img { + width: 100%; + height: auto; + display: block; +} + +/* --- Blockquote (case) --- */ +.single-case__quote { + border-left: 4px solid var(--color-primary); + padding: 24px 32px; + margin: 40px 0; + background: var(--color-gray-light); + font-style: italic; + font-size: 1.125rem; +} + +/* --- CTA blocks --- */ +.single-case__cta, +.single-webinar__cta, +.single-course__cta, +.single-event__cta { + padding: 40px 0; + border-top: 1px solid var(--color-gray-light); +} + +/* --- Related posts section --- */ +.related-posts { + padding: 60px 0 0; + border-top: 1px solid var(--color-gray-light); +} + +/* --- Webinar video embed --- */ +.single-webinar__video { + margin-bottom: 40px; +} + +.single-webinar__video iframe { + width: 100%; + aspect-ratio: 16 / 9; + border: 0; +} + +/* --- Presentation download --- */ +.single-webinar__presentation { + margin-top: 24px; +} + +/* ========================================================================== + Pagination — the_posts_pagination() + ========================================================================== */ + +.nav-links { + display: flex; + gap: 8px; + justify-content: center; + margin-top: 32px; +} + +.page-numbers { + padding: 8px 16px; + border: 1px solid var(--color-gray-light); + text-decoration: none; + color: var(--color-black); + transition: background 0.2s, color 0.2s; +} + +.page-numbers:hover { + background: var(--color-gray-light); +} + +.page-numbers.current { + background: var(--color-black); + color: var(--color-white); + border-color: var(--color-black); +} + +/* ========================================================================== + Responsive — CPT templates + ========================================================================== */ + +@media (max-width: 1024px) { + .gallery-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .single-case__meta, + .single-webinar__meta, + .single-course__meta, + .single-event__meta { + flex-direction: column; + gap: 12px; + } + + .gallery-grid { + grid-template-columns: 1fr; + } + + .single-case__quote { + padding: 16px 20px; + font-size: 1rem; + } +} + +/* ========================================================================== + Contacts page + ========================================================================== */ + +.page-contacts { + padding: 60px 0; +} + +.page-contacts__title { + margin-bottom: 0; +} + +.contacts-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + margin-top: 32px; +} + +.contacts-list { + list-style: none; + margin: 24px 0 0; + padding: 0; +} + +.contacts-list__item { + margin-bottom: 16px; + font-size: 1rem; + line-height: 1.5; +} + +.contacts-list__item address { + display: inline; + font-style: normal; +} + +.contacts-list__item a { + color: var(--color-primary); + text-decoration: none; +} + +.contacts-list__item a:hover { + text-decoration: underline; +} + +/* Contact form */ + +.contact-form__field { + margin-bottom: 20px; +} + +.contact-form__label { + display: block; + font-size: 0.875rem; + font-weight: var(--font-weight-bold); + margin-bottom: 6px; +} + +.contact-form__required { + color: var(--color-primary); + margin-left: 2px; +} + +.contact-form__input, +.contact-form__textarea { + display: block; + width: 100%; + padding: 10px 14px; + font-family: var(--font-family-base); + font-size: 1rem; + line-height: 1.5; + color: var(--color-black); + background: var(--color-white); + border: 2px solid var(--color-gray-light); + border-radius: 4px; + transition: border-color var(--transition-base); + box-sizing: border-box; +} + +.contact-form__input:focus, +.contact-form__textarea:focus { + outline: none; + border-color: var(--color-primary); +} + +.contact-form__textarea { + resize: vertical; + min-height: 120px; +} + +.contact-form__field--checkbox { + display: flex; + align-items: flex-start; + gap: 10px; +} + +.contact-form__checkbox-label { + display: flex; + align-items: flex-start; + gap: 10px; + font-size: 0.875rem; + line-height: 1.5; + cursor: pointer; +} + +.contact-form__checkbox { + flex-shrink: 0; + margin-top: 3px; + width: 16px; + height: 16px; + accent-color: var(--color-primary); + cursor: pointer; +} + +.contact-form__checkbox-label a { + color: var(--color-primary); + text-decoration: underline; +} + +.contact-form__submit { + margin-top: 8px; +} + +@media (max-width: 767px) { + .contacts-grid { + grid-template-columns: 1fr; + gap: 40px; + } +} + +/* ========================================================================== + Custom footer + ========================================================================== */ + +.custom-footer { + border-top: 1px solid var(--color-gray-light); + padding: 48px 0 24px; + background: var(--color-white); +} + +.custom-footer__grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1.5fr; + gap: 32px; + margin-bottom: 32px; +} + +/* Col 1 — brand */ + +.custom-footer__logo-link { + display: inline-block; + margin-bottom: 20px; +} + +.custom-footer__logo { + display: block; + max-width: 140px; + height: auto; +} + +.custom-footer__address { + font-style: normal; + font-size: 0.875rem; + line-height: 1.6; + color: var(--color-gray-text); +} + +.custom-footer__address p { + margin: 0 0 6px; +} + +.custom-footer__address a { + color: var(--color-gray-text); + text-decoration: none; +} + +.custom-footer__address a:hover { + color: var(--color-primary); +} + +/* Col headings */ + +.custom-footer__col h4 { + font-size: 0.875rem; + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 0 0 16px; + color: var(--color-black); +} + +/* Col nav lists */ + +.custom-footer__col ul { + list-style: none; + margin: 0; + padding: 0; +} + +.custom-footer__col ul li { + font-size: 0.875rem; + margin-bottom: 10px; +} + +.custom-footer__col a { + color: var(--color-gray-text); + text-decoration: none; + transition: color var(--transition-base); +} + +.custom-footer__col a:hover { + color: var(--color-primary); +} + +/* Col 4 — subscribe */ + +.custom-footer__subscribe-desc { + font-size: 0.875rem; + color: var(--color-gray-text); + margin: 0 0 12px; + line-height: 1.5; +} + +.footer-subscribe { + display: flex; + gap: 8px; + align-items: stretch; +} + +.footer-subscribe__input { + flex: 1; + min-width: 0; + padding: 8px 12px; + font-family: var(--font-family-base); + font-size: 0.875rem; + color: var(--color-black); + background: var(--color-white); + border: 2px solid var(--color-gray-light); + border-radius: 4px; + transition: border-color var(--transition-base); + box-sizing: border-box; +} + +.footer-subscribe__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.footer-subscribe__btn, +.btn--sm { + padding: 8px 16px; + font-size: 0.875rem; + white-space: nowrap; + flex-shrink: 0; +} + +/* Bottom bar */ + +.custom-footer__bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 24px; + border-top: 1px solid var(--color-gray-light); + font-size: 0.75rem; + color: var(--color-gray-text); +} + +.custom-footer__bottom p { + margin: 0; +} + +.custom-footer__legal { + display: flex; + gap: 24px; +} + +.custom-footer__legal a { + color: var(--color-gray-text); + text-decoration: none; + transition: color var(--transition-base); +} + +.custom-footer__legal a:hover { + color: var(--color-primary); +} + +/* Footer responsive */ + +@media (max-width: 1024px) { + .custom-footer__grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 767px) { + .custom-footer__grid { + grid-template-columns: 1fr; + gap: 32px; + } + + .custom-footer__bottom { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + + .custom-footer__legal { + flex-direction: column; + gap: 8px; + } + + .footer-subscribe { + flex-direction: column; + } + + .footer-subscribe__btn { + width: 100%; + } +} + +/* ========================================================================== + Task 10: БИТ.WMS product page + ========================================================================== */ + +/* ------------------------------------------------------------------ + 1. Hero + ------------------------------------------------------------------ */ + +.bitwms-hero { + padding: 80px 0 60px; +} + +.bitwms-hero h1 { + font-size: 4rem; + line-height: 1.1; + margin-bottom: var(--space-md); +} + +.bitwms-hero__subtitle { + font-size: 1.5rem; + font-weight: var(--font-weight-bold); + color: var(--color-gray-text); + margin-bottom: var(--space-lg); +} + +.bitwms-hero__description { + font-size: 1.125rem; + max-width: 680px; + color: var(--color-gray-text); + margin-bottom: var(--space-xl); +} + +.bitwms-hero__actions { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +@media (max-width: 767px) { + .bitwms-hero { + padding: 48px 0 40px; + } + + .bitwms-hero h1 { + font-size: 2.5rem; + } + + .bitwms-hero__subtitle { + font-size: 1.125rem; + } + + .bitwms-hero__description { + font-size: 1rem; + } + + .bitwms-hero__actions { + flex-direction: column; + } + + .bitwms-hero__actions .btn { + width: 100%; + text-align: center; + } +} + +/* ------------------------------------------------------------------ + 2. Features + ------------------------------------------------------------------ */ + +.bitwms-features { + padding: 80px 0; + background: var(--color-gray-light); +} + +.bitwms-features h2 { + margin-bottom: 48px; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.feature-card { + background: var(--color-white); + padding: 32px; + display: flex; + flex-direction: column; +} + +.feature-card h3 { + font-size: 1.25rem; + margin-bottom: var(--space-md); +} + +.feature-card p { + font-size: 0.9375rem; + color: var(--color-gray-text); + flex: 1; +} + +.feature-card__result { + color: var(--color-primary); + font-weight: var(--font-weight-bold); + font-size: 0.875rem; + margin-bottom: 0; +} + +@media (max-width: 1024px) { + .features-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .bitwms-features { + padding: 48px 0; + } + + .features-grid { + grid-template-columns: 1fr; + } +} + +/* ------------------------------------------------------------------ + 3. Why us + ------------------------------------------------------------------ */ + +.bitwms-why { + padding: 80px 0; +} + +.bitwms-why h2 { + margin-bottom: 48px; +} + +.why-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 32px; +} + +.why-grid__item h3 { + font-size: 1.25rem; + margin-bottom: var(--space-md); + position: relative; + padding-bottom: 16px; +} + +.why-grid__item h3::after { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 32px; + height: 2px; + background: var(--color-primary); +} + +.why-grid__item p { + font-size: 0.9375rem; + color: var(--color-gray-text); +} + +@media (max-width: 1024px) { + .why-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .bitwms-why { + padding: 48px 0; + } + + .why-grid { + grid-template-columns: 1fr; + gap: 24px; + } +} + +/* ------------------------------------------------------------------ + 4. Cases + ------------------------------------------------------------------ */ + +.bitwms-cases { + padding: 60px 0; + border-top: 1px solid var(--color-gray-light); +} + +.bitwms-cases h2 { + margin-bottom: 40px; +} + +.bitwms-cases__more { + margin-top: 40px; + text-align: center; +} + +@media (max-width: 767px) { + .bitwms-cases { + padding: 40px 0; + } +} + +/* ------------------------------------------------------------------ + 5. Other solutions + ------------------------------------------------------------------ */ + +.bitwms-other { + padding: 60px 0; + background: var(--color-gray-light); +} + +.bitwms-other h2 { + margin-bottom: 40px; +} + +.other-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.other-card { + background: var(--color-white); + padding: 32px; + display: flex; + flex-direction: column; +} + +.other-card__title { + font-size: 1.25rem; + margin-bottom: var(--space-md); +} + +.other-card__description { + font-size: 0.9375rem; + color: var(--color-gray-text); + flex: 1; + margin-bottom: var(--space-lg); +} + +@media (max-width: 1024px) { + .other-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .bitwms-other { + padding: 40px 0; + } + + .other-grid { + grid-template-columns: 1fr; + } +} + +/* ------------------------------------------------------------------ + 6. Demo form + ------------------------------------------------------------------ */ + +.bitwms-demo { + padding: 80px 0; +} + +.bitwms-demo h2 { + margin-bottom: var(--space-md); +} + +.bitwms-demo__description { + font-size: 1.0625rem; + color: var(--color-gray-text); + max-width: 600px; + margin-bottom: 40px; +} + +.demo-form { + max-width: 600px; +} + +.demo-form__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 20px; +} + +.demo-form__field { + display: flex; + flex-direction: column; + gap: 6px; +} + +.demo-form__field--full { + margin-bottom: 20px; +} + +.demo-form__label { + font-size: 0.875rem; + font-weight: var(--font-weight-bold); + color: var(--color-black); +} + +.demo-form__required { + color: var(--color-primary); +} + +.demo-form__input { + width: 100%; + padding: 12px 16px; + font-family: var(--font-family-base); + font-size: 1rem; + color: var(--color-black); + background: var(--color-white); + border: 2px solid var(--color-gray-light); + border-radius: 0; + transition: border-color var(--transition-base); + appearance: none; + -webkit-appearance: none; +} + +.demo-form__input:focus { + outline: none; + border-color: var(--color-primary); +} + +.demo-form__input::placeholder { + color: var(--color-gray-text); + opacity: 1; +} + +.demo-form__textarea { + resize: vertical; + min-height: 120px; +} + +.demo-form__consent { + margin-bottom: 24px; +} + +.demo-form__consent-label { + display: flex; + align-items: flex-start; + gap: 10px; + font-size: 0.875rem; + color: var(--color-gray-text); + cursor: pointer; +} + +.demo-form__checkbox { + flex-shrink: 0; + width: 18px; + height: 18px; + margin-top: 2px; + border: 2px solid var(--color-gray-light); + accent-color: var(--color-primary); + cursor: pointer; +} + +.demo-form__submit { + padding: 14px 40px; +} + +@media (max-width: 767px) { + .bitwms-demo { + padding: 48px 0; + } + + .demo-form__grid { + grid-template-columns: 1fr; + } + + .demo-form { + max-width: 100%; + } + + .demo-form__submit { + width: 100%; + } +} + +/* ========================================================================== + Gated Content Modal + ========================================================================== */ + +.gated-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; } +.gated-modal--open { display: flex; } +.gated-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } +.gated-modal__content { position: relative; background: var(--color-white); padding: 48px; max-width: 480px; width: 90%; z-index: 1; } +.gated-modal__close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-gray-text); } +.gated-form input[type="text"], .gated-form input[type="email"] { width: 100%; padding: 12px 16px; border: 2px solid var(--color-gray-light); border-radius: 0; margin-bottom: 12px; font-size: 1rem; box-sizing: border-box; } +.gated-form input:focus { outline: none; border-color: var(--color-primary); } diff --git a/mockup/wp-content/themes/generatepress/assets/css/components/comments.min.css?ver=3.6.1.css b/mockup/wp-content/themes/generatepress/assets/css/components/comments.min.css?ver=3.6.1.css new file mode 100644 index 0000000..17a40ba --- /dev/null +++ b/mockup/wp-content/themes/generatepress/assets/css/components/comments.min.css?ver=3.6.1.css @@ -0,0 +1 @@ +.comment-content a{word-wrap:break-word}.bypostauthor{display:block}.comment,.comment-list{list-style-type:none;padding:0;margin:0}.comment-author-info{display:inline-block;vertical-align:middle}.comment-meta .avatar{float:left;margin-right:10px;border-radius:50%}.comment-author cite{font-style:normal;font-weight:700}.entry-meta.comment-metadata{margin-top:0}.comment-content{margin-top:1.5em}.comment-respond{margin-top:0}.comment-form>.form-submit{margin-bottom:0}.comment-form input,.comment-form-comment{margin-bottom:10px}.comment-form-comment textarea{resize:vertical}.comment-form #author,.comment-form #email,.comment-form #url{display:block}.comment-metadata .edit-link:before{display:none}.comment-body{padding:30px 0}.comment-content{padding:30px;border:1px solid rgba(0,0,0,.05)}.depth-1.parent>.children{border-bottom:1px solid rgba(0,0,0,.05)}.comment .children{padding-left:30px;margin-top:-30px;border-left:1px solid rgba(0,0,0,.05)}.pingback .comment-body,.trackback .comment-body{border-bottom:1px solid rgba(0,0,0,.05)}.pingback .edit-link{font-size:13px}.comment-content p:last-child{margin-bottom:0}.comment-list>.comment:first-child{padding-top:0;margin-top:0;border-top:0}ol.comment-list{margin-bottom:1.5em}.comment-form-cookies-consent{display:flex;align-items:center}.comment-form-cookies-consent input{margin-right:.5em;margin-bottom:0}.one-container .comments-area{margin-top:1.5em}.comment-content .reply{font-size:85%}#cancel-comment-reply-link{padding-left:10px} \ No newline at end of file diff --git a/mockup/wp-content/themes/generatepress/assets/css/main.min.css?ver=3.6.1.css b/mockup/wp-content/themes/generatepress/assets/css/main.min.css?ver=3.6.1.css new file mode 100644 index 0000000..828afee --- /dev/null +++ b/mockup/wp-content/themes/generatepress/assets/css/main.min.css?ver=3.6.1.css @@ -0,0 +1 @@ +blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}progress{vertical-align:baseline}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}body,button,input,select,textarea{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;text-transform:none;font-size:17px;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}pre{background:rgba(0,0,0,.05);font-family:inherit;font-size:inherit;line-height:normal;margin-bottom:1.5em;padding:20px;overflow:auto;max-width:100%}blockquote{border-left:5px solid rgba(0,0,0,.05);padding:20px;font-size:1.2em;font-style:italic;margin:0 0 1.5em;position:relative}blockquote p:last-child{margin:0}table,td,th{border:1px solid rgba(0,0,0,.1)}table{border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}td,th{padding:8px}th{border-width:0 1px 1px 0}td{border-width:0 1px 1px 0}hr{background-color:rgba(0,0,0,.1);border:0;height:1px;margin-bottom:40px;margin-top:40px}fieldset{padding:0;border:0;min-width:inherit}fieldset legend{padding:0;margin-bottom:1.5em}h1{font-size:42px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h2{font-size:35px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h3{font-size:29px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h4{font-size:24px}h5{font-size:20px}h4,h5,h6{margin-bottom:20px}ol,ul{margin:0 0 1.5em 3em}ul{list-style:disc}ol{list-style:decimal}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}dt{font-weight:700}dd{margin:0 1.5em 1.5em}b,strong{font-weight:700}cite,dfn,em,i{font-style:italic}address{margin:0 0 1.5em}code,kbd,tt,var{font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{text-decoration:none}sub,sup{font-size:75%;height:0;line-height:0;position:relative;vertical-align:baseline}sup{bottom:1ex}sub{top:.5ex}small{font-size:75%}big{font-size:125%}figure{margin:0}table{margin:0 0 1.5em;width:100%}th{font-weight:700}img{height:auto;max-width:100%}button,input[type=button],input[type=reset],input[type=submit]{background:#55555e;color:#fff;border:1px solid transparent;cursor:pointer;-webkit-appearance:button;padding:10px 20px}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid;border-radius:0;padding:10px 15px;max-width:100%}textarea{width:100%}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.button,.wp-block-button .wp-block-button__link{padding:10px 20px;display:inline-block}.wp-block-button .wp-block-button__link{font-size:inherit;line-height:inherit}.using-mouse :focus{outline:0}.using-mouse ::-moz-focus-inner{border:0}.alignleft{float:left;margin-right:1.5em}.alignright{float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin:0 auto}.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail{max-width:100%;height:auto}.no-sidebar .entry-content .alignfull{margin-left:calc(-100vw / 2 + 100% / 2);margin-right:calc(-100vw / 2 + 100% / 2);max-width:100vw;width:auto}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#primary[tabindex="-1"]:focus{outline:0}.main-navigation{z-index:100;padding:0;clear:both;display:block}.main-navigation a{display:block;text-decoration:none;font-weight:400;text-transform:none;font-size:15px}.main-navigation ul{list-style:none;margin:0;padding-left:0}.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}.inside-navigation{position:relative}.main-navigation .inside-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.main-navigation .main-nav>ul{display:flex;flex-wrap:wrap;align-items:center}.main-navigation li{position:relative}.main-navigation .menu-bar-items{display:flex;align-items:center;font-size:15px}.main-navigation .menu-bar-items a{color:inherit}.main-navigation .menu-bar-item{position:relative}.main-navigation .menu-bar-item.search-item{z-index:20}.main-navigation .menu-bar-item>a{padding-left:20px;padding-right:20px;line-height:60px}.sidebar .main-navigation .main-nav{flex-basis:100%}.sidebar .main-navigation .main-nav>ul{flex-direction:column}.sidebar .main-navigation .menu-bar-items{margin:0 auto}.sidebar .main-navigation .menu-bar-items .search-item{order:10}.nav-align-center .inside-navigation{justify-content:center}.nav-align-center .main-nav>ul{justify-content:center}.nav-align-right .inside-navigation{justify-content:flex-end}.main-navigation ul ul{display:block;box-shadow:1px 1px 0 rgba(0,0,0,.1);float:left;position:absolute;left:-99999px;opacity:0;z-index:99999;width:200px;text-align:left;top:auto;transition:opacity 80ms linear;transition-delay:0s;pointer-events:none;height:0;overflow:hidden}.main-navigation ul ul a{display:block}.main-navigation ul ul li{width:100%}.main-navigation .main-nav ul ul li a{line-height:normal;padding:10px 20px;font-size:14px}.main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:0;position:relative}.main-navigation.sub-menu-left ul ul{box-shadow:-1px 1px 0 rgba(0,0,0,.1)}.main-navigation.sub-menu-left .sub-menu{right:0}.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{left:auto;opacity:1;transition-delay:150ms;pointer-events:auto;height:auto;overflow:visible}.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{left:100%;top:0}.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover>ul,.main-navigation.sub-menu-left:not(.toggled) ul ul li:hover>ul{right:100%;left:auto}.nav-float-right .main-navigation ul ul ul{top:0}.menu-item-has-children .dropdown-menu-toggle{display:inline-block;height:100%;clear:both;padding-right:20px;padding-left:10px}.menu-item-has-children ul .dropdown-menu-toggle{padding-top:10px;padding-bottom:10px;margin-top:-10px}.sidebar .menu-item-has-children .dropdown-menu-toggle,nav ul ul .menu-item-has-children .dropdown-menu-toggle{float:right}.widget-area .main-navigation li{float:none;display:block;width:100%;padding:0;margin:0}.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}.sidebar .main-navigation.sub-menu-left ul li.sfHover ul,.sidebar .main-navigation.sub-menu-left ul li:hover ul{top:0;right:100%}.site-main .comment-navigation,.site-main .post-navigation,.site-main .posts-navigation{margin:0 0 2em;overflow:hidden}.site-main .post-navigation{margin-bottom:0}.paging-navigation .nav-next,.paging-navigation .nav-previous{display:none}.paging-navigation .nav-links>*{padding:0 5px}.paging-navigation .nav-links .current{font-weight:700}.nav-links>:first-child{padding-left:0}.site-header{position:relative}.inside-header{padding:20px 40px}.main-title{margin:0;font-size:25px;line-height:1.2em;word-wrap:break-word;font-weight:700;text-transform:none}.site-description{margin:0;line-height:1.5;font-weight:400;text-transform:none;font-size:15px}.site-logo{display:inline-block;max-width:100%}.site-header .header-image{vertical-align:middle}.inside-header{display:flex;align-items:center}.header-widget{margin-left:auto}.header-widget p:last-child{margin-bottom:0}.nav-float-right .header-widget{margin-left:20px}.nav-float-right #site-navigation{margin-left:auto}.nav-float-left #site-navigation{margin-right:auto;order:-10}.nav-float-left .header-widget{margin-left:0;margin-right:20px;order:-15}.header-aligned-center:not([class*=nav-float-]) .inside-header{justify-content:center;flex-direction:column;text-align:center}.header-aligned-center:not([class*=nav-float-]) .header-widget{margin-left:auto;margin-right:auto}.header-aligned-center:not([class*=nav-float-]) .inside-header>:not(:first-child){margin-top:1em}.header-aligned-right:not([class*=nav-float-]) .inside-header{justify-content:flex-end}.header-aligned-right:not([class*=nav-float-]) .header-widget{margin-right:auto;margin-left:0;order:-10}.site-branding-container{display:inline-flex;align-items:center;text-align:left;flex-shrink:0}.site-branding-container .site-logo{margin-right:1em}.sticky{display:block}.entry-header .gp-icon,.posted-on .updated{display:none}.byline,.entry-header .cat-links,.entry-header .comments-link,.entry-header .tags-links,.group-blog .byline,.single .byline{display:inline}footer.entry-meta .byline,footer.entry-meta .posted-on{display:block}.entry-content:not(:first-child),.entry-summary:not(:first-child),.page-content:not(:first-child){margin-top:2em}.page-links{clear:both;margin:0 0 1.5em}.archive .format-aside .entry-header,.archive .format-status .entry-header,.archive .format-status .entry-meta,.archive .format-status .entry-title,.blog .format-aside .entry-header,.blog .format-status .entry-header,.blog .format-status .entry-meta,.blog .format-status .entry-title{display:none}.archive .format-aside .entry-content,.archive .format-status .entry-content,.blog .format-aside .entry-content,.blog .format-status .entry-content{margin-top:0}.archive .format-status .entry-content p:last-child,.blog .format-status .entry-content p:last-child{margin-bottom:0}.entry-header,.site-content{word-wrap:break-word}.entry-title{margin-bottom:0}.author .page-header .page-title{display:flex;align-items:center}.author .page-header .avatar{margin-right:20px}.page-header .author-info>:last-child,.page-header>:last-child{margin-bottom:0}.entry-meta{font-size:85%;margin-top:.5em;line-height:1.5}footer.entry-meta{margin-top:2em}.cat-links,.comments-link,.tags-links{display:block}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}.wp-caption{margin-bottom:1.5em;max-width:100%;position:relative}.wp-caption img[class*=wp-image-]{display:block;margin:0 auto 0;max-width:100%}.wp-caption .wp-caption-text{font-size:75%;padding-top:5px;opacity:.8}.wp-caption img{position:relative;vertical-align:bottom}.wp-block-image figcaption{font-size:13px;text-align:center}.wp-block-gallery,ul.blocks-gallery-grid{margin-left:0}.wp-block-gallery .blocks-gallery-image figcaption,.wp-block-gallery .blocks-gallery-item figcaption{background:rgba(255,255,255,.7);color:#000;padding:10px;box-sizing:border-box}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;text-align:center;vertical-align:top;width:100%}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block}.site-main .gallery{margin-bottom:1.5em}.gallery-item img{vertical-align:bottom}.gallery-icon{padding:5px}embed,iframe,object{max-width:100%}.wp-block-post-template{margin-left:0}.widget-area .widget{padding:40px}.widget select{max-width:100%}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{margin-bottom:30px;font-size:20px;line-height:1.5;font-weight:400;text-transform:none}.widget ol,.widget ul{margin:0}.widget .search-field{width:100%}.widget .search-form{display:flex}.widget .search-form button.search-submit{font-size:15px}.footer-widgets .widget{margin-bottom:30px}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{list-style-type:none;position:relative;margin-bottom:.5em}.widget ul li ul{margin-left:1em;margin-top:.5em}.wp-calendar-table{table-layout:fixed}.site-content{display:flex}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.both-left .inside-left-sidebar,.both-right .inside-left-sidebar{margin-right:10px}.both-left .inside-right-sidebar,.both-right .inside-right-sidebar{margin-left:10px}.one-container.both-right .site-main,.one-container.right-sidebar .site-main{margin-right:40px}.one-container.both-left .site-main,.one-container.left-sidebar .site-main{margin-left:40px}.one-container.both-sidebars .site-main{margin:0 40px 0 40px}.one-container.archive .post:not(:last-child):not(.is-loop-template-item),.one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:40px}.one-container .site-content{padding:40px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.no-sidebar .site-main{margin-left:0;margin-right:0}.separate-containers.both-right .site-main,.separate-containers.right-sidebar .site-main{margin-left:0}.separate-containers.both-left .site-main,.separate-containers.left-sidebar .site-main{margin-right:0}.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar{margin-top:20px;margin-bottom:20px}.inside-page-header{padding:40px}.widget-area .main-navigation{margin-bottom:20px}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.full-width-content .container.grid-container{max-width:100%}.full-width-content.no-sidebar.separate-containers .site-main{margin:0}.full-width-content.one-container .site-content,.full-width-content.separate-containers .inside-article{padding:0}.full-width-content .entry-content .alignwide{margin-left:0;width:auto;max-width:unset}.contained-content.one-container .site-content,.contained-content.separate-containers .inside-article{padding:0}.sidebar .grid-container{max-width:100%;width:100%}.both-left .is-left-sidebar,.both-sidebars .is-left-sidebar,.left-sidebar .sidebar{order:-10}.both-left .is-right-sidebar{order:-5}.both-right .is-left-sidebar{order:5}.both-right .is-right-sidebar,.both-sidebars .is-right-sidebar{order:10}.inside-site-info{display:flex;align-items:center;justify-content:center;padding:20px 40px}.site-info{text-align:center;font-size:15px}.post-image:not(:first-child){margin-top:2em}.featured-image{line-height:0}.separate-containers .featured-image{margin-top:20px}.separate-containers .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.one-container .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.gp-icon{display:inline-flex;align-self:center}.gp-icon svg{height:1em;width:1em;top:.125em;position:relative;fill:currentColor}.close-search .icon-search svg:first-child,.icon-menu-bars svg:nth-child(2),.icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:first-child{display:none}.close-search .icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:nth-child(2){display:block}.entry-meta .gp-icon{margin-right:.6em;opacity:.7}nav.toggled .icon-arrow-left svg{transform:rotate(-90deg)}nav.toggled .icon-arrow-right svg{transform:rotate(90deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg{transform:rotate(180deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-left svg{transform:rotate(-270deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-right svg{transform:rotate(270deg)}.container.grid-container{width:auto}.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}.menu-toggle{padding:0 20px;line-height:60px;margin:0;font-weight:400;text-transform:none;font-size:15px;cursor:pointer}.menu-toggle .mobile-menu{padding-left:3px}.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}.menu-toggle .mobile-menu:empty{display:none}button.menu-toggle{background-color:transparent;flex-grow:1;border:0;text-align:center}button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:transparent}.has-menu-bar-items button.menu-toggle{flex-grow:0}nav.toggled ul ul.sub-menu{width:100%}.toggled .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}.main-navigation.toggled .main-nav{flex-basis:100%;order:3}.main-navigation.toggled .main-nav>ul{display:block}.main-navigation.toggled .main-nav li{width:100%;text-align:left}.main-navigation.toggled .main-nav ul ul{transition:0s;visibility:hidden;box-shadow:none;border-bottom:1px solid rgba(0,0,0,.05)}.main-navigation.toggled .main-nav ul ul li:last-child>ul{border-bottom:0}.main-navigation.toggled .main-nav ul ul.toggled-on{position:relative;top:0;left:auto!important;right:auto!important;width:100%;pointer-events:auto;height:auto;opacity:1;display:block;visibility:visible;float:none}.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{float:right}.mobile-menu-control-wrapper{display:none;margin-left:auto;align-items:center}.has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search .nav-search-active{position:relative}.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input{outline:auto}.nav-float-left .mobile-menu-control-wrapper{order:-10;margin-left:0;margin-right:auto;flex-direction:row-reverse}@media (max-width:768px){.hide-on-mobile{display:none!important}a,body,button,input,select,textarea{transition:all 0s ease-in-out}.inside-header{flex-direction:column;text-align:center}.site-header .header-widget{margin-top:1.5em;margin-left:auto;margin-right:auto;text-align:center}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}.is-left-sidebar.sidebar,.is-right-sidebar.sidebar{width:auto;order:initial}.is-left-sidebar+.is-right-sidebar .inside-right-sidebar{margin-top:0}.both-left .inside-left-sidebar,.both-left .inside-right-sidebar,.both-right .inside-left-sidebar,.both-right .inside-right-sidebar{margin-right:0;margin-left:0}#main{margin-left:0;margin-right:0}body:not(.no-sidebar) #main{margin-bottom:0}.alignleft,.alignright{float:none;display:block;margin-left:auto;margin-right:auto}.comment .children{padding-left:10px;margin-left:0}.entry-meta{font-size:inherit}.entry-meta a{line-height:1.8em}}@media (min-width:769px) and (max-width:1024px){.hide-on-tablet{display:none!important}}@media (min-width:1025px){.hide-on-desktop{display:none!important}} \ No newline at end of file diff --git a/mockup/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.6.1 b/mockup/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.6.1 new file mode 100644 index 0000000..a7aa927 --- /dev/null +++ b/mockup/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.6.1 @@ -0,0 +1 @@ +(()=>{var e=document.querySelectorAll(".main-nav .sub-menu, .main-nav .children");if(e&&e.forEach(function(e){var t,n=e.closest("li"),s=n.querySelector('.dropdown-menu-toggle[role="button"]');e.id||(t=n.id||"menu-item-"+Math.floor(1e5*Math.random()),e.id=t+"-sub-menu"),(s=s||n.querySelector('a[role="button"]'))&&s.setAttribute("aria-controls",e.id)}),"querySelector"in document&&"addEventListener"in window){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;if(document.documentElement.contains(this))do{if(t.matches(e))return t}while(null!==(t=t.parentElement));return null});var o=function(t){return Array.prototype.filter.call(t.parentNode.children,function(e){return e!==t})},t=document.querySelectorAll(".menu-toggle"),n=document.querySelectorAll("nav .dropdown-menu-toggle"),s=document.querySelectorAll("nav .main-nav ul a"),l=document.querySelector(".mobile-menu-control-wrapper"),c=document.body,u=document.documentElement,d=function(e){if(e&&c.classList.contains("dropdown-hover")){var t=e.querySelectorAll("li.menu-item-has-children");for(h=0;h