Описание задачи

Проработка мобильной и планшетной верстки (адаптива), оптимизация контрастности фонов и текстов, а также устранение визуальных дефектов отображения в светлой и тёмной темах.

Основные выявленные проблемы:

1. Критический баг с картами на мобильных (<768px): В style.css была установлена жесткая замена фона .card, .navbar и .user-top-bar на rgba(15, 23, 42, 0.95) на мобильных экранах. В светлой теме это приводило к отображению темно-синего фона с темным текстом, из-за чего текст становился нечитаемым.
2. Мобильное навигационное меню (<992px): Выпадающие списки .dropdown-menu имели принудительный прозрачно-белый фон rgba(255, 255, 255, 0.05), из-за чего в светлой теме текст сливался с белым фоном, а в темной не имел чётких границ и визуального выделения.
3. Неоптимальные тени и цвета в category-bl.css и hero.css: Использование устаревших жестко закодированных цветных теней (красных/желтых text-shadow) и фиксированных шрифтов 2.2rem !important, которые ломали верстку на смартфонах шириной 320px–480px.
4. Низкий контраст второстепенного текста (--color-text-muted, --color-text-dim): При солнечном свете или сниженной яркости экрана телефона приглушенные тексты становились сложночитаемыми.
5. Отступы и Bento-сетки: Большие отступы карт padding: 1.75rem скрадывали полезную ширину экрана на смартфонах.

Предлагаемые изменения

Design Tokens & Базовые цвета (root.css)

[MODIFY] root.css

• Улучшить контрастность переменных --color-text-muted (#cbd5e1 в тёмной теме, #475569 в светлой) и --color-text-dim (#94a3b8 в тёмной).
• Скорректировать стеклянные токены --color-glass и --color-glass-border для более чистого слоистого UI на мобильных экранах.

Глобальные стили & Адаптивные исправления (style.css)

[MODIFY] style.css

• Исправление бага мобильных карт: Заменить принудительный тёмный фон rgba(15, 23, 42, 0.95) на семантическую переменную темы var(--color-dark-surface). Теперь в светлой теме карточки остаются светлыми, а в тёмной — тёмными.
• Оформление мобильного бургер-меню (<992px):
  • Настроить выпадающие меню .navbar-collapse .dropdown-menu с плавным фоном на основе переменных темы, выразительной плашкой акцента при наведении/клике и скругленными углами.
  • Добавить аккуратный внутренний padding (padding: 1rem 1.25rem) для развернутого гамбургер-меню, чтобы пункты не прилипали к краю экрана.
• Адаптивные карточки и Bento-сетки (<768px и <576px):
  • Сделать отступы card-body флюидными: clamp(1rem, 4vw, 1.5rem).
  • Оптимизировать сетку бенто (bento-grid-portfolio, bento-grid-news, bento-grid-reviews) для мобильных устройств, снизив отступы между карточками для максимизации полезного пространства.
• Сенсорные зоны (Touch Targets): Обеспечить минимальную высоту 44px для всех кнопок и полей ввода на смартфонах.

Стили Шапки & Мобильной Навигации (header.css)

[MODIFY] header.css

• Скорректировать стили .premium-header и .action-btn для мобильных экранов: четкие границы, адаптивный размер аватара и иконок.
• Добавить стилизацию активного состояния для кнопки гамбургера (.navbar-toggler).

Блок Героя / Промо-секция (hero.css)

[MODIFY] hero.css

• Заменить устаревшие желтые тени text-shadow: 0 2px 10px rgba(226, 202, 105, 0.795) на глубокие аккуратные нейтральные тени 0 2px 12px rgba(0, 0, 0, 0.6).
• Сделать размер заголовка .title-hero, .sl_1, .sl_2 полностью адаптивным через clamp() для комфортного чтения без переноса одиночных букв.

Карточки Категорий (category-bl.css)

[MODIFY] category-bl.css

• Убрать разноцветные тени (красные hsla(0, 100%, 50%, 0.364), зеленые rgba(183, 219, 4, 0.214)).
• Заменить жесткий размер шрифта 2.2rem !important на адаптивный clamp(1.2rem, 3.5vw, 1.75rem).
• Применить темы-зависимые переменные цвета текста вместо принудительного белого var(--color-white) !important, чтобы в светлой теме карточки выглядели элегантно и контрастно.

Стили Портфолио & Прайсов (portfolio.css)

[MODIFY] portfolio.css

• Улучшить мобильное отображение заголовков, изображений проектов (ограничение высоты на смартфонах) и мета-блоков portfolio-meta-detail.

План проверки (Verification Plan)

Автоматическая проверка

• Синтаксическая валидация CSS и запуск Django системных проверок: python mysite/manage.py check

Ручная проверка верстки (Mobile / Tablet / Desktop)

1. Проверка разрешения 360px - 480px (Мобильные смартфоны):
   • Проверить открытие бургер-меню в шапке сайта. Меню должно иметь четкий контрастный фон в тёмной и светлой теме, кнопки вложенных списков читаемые и удобные для нажатия пальцем.
   • Проверить карточки новостей, услуг, отзывов и категорий на главной странице. Отсутствие перекрытия текста темным фоном в светлой теме.
2. Проверка разрешения 768px - 991px (Планшеты):
   • Проверить bento-сетку (2 колонки) и карточки портфолио.
   • Проверить контрастность заголовков и второстепенного текста.
3. Переключение Тем (Dark / Light mode):
   • Переключить тему с помощью кнопки на шапке сайта, убедиться в безупречном контрасте фона и текста во всех разделах.