Блоки
Шапка и навигация
История версий
v1.3 — 24.03.2026
- Подменю: выпадающие списки при hover для Клиника, Заболевания, Вопрос-ответ, ЛОР операции
- Hover-эффект: бежевый фон #f5f0e6 при наведении на пункт меню
- Пункты меню подчёркнуты (underline), без разделителей между ними
- Убрана рамка между шапкой и меню (border-top)
- Все пункты меню чёрного цвета #000 (было: первый #0089c3)
- Уменьшен padding пунктов (px-2.5 вместо px-4) — все помещаются в ширину экрана
v1.2 — 24.03.2026
- Убрана рамка и тень вокруг шапки (как на реальном сайте)
- Структура: 3 столбца (логотип | ссылки вертикально | телефон+кнопка) вместо горизонтального ряда
- Логотип: реальный logo-main.png вместо кружка, размер h-20 (было h-12)
- Кнопка: bb-btn-md (было bb-btn-sm)
- Анатомия шапки: обновлена — 2 зоны вместо 3
v1.1 — 24.03.2026
- Адрес: «Б. Цитная, 3» заменён на «К. Цеткин, 9»
- Ссылки: обновлены на «Клиника лечения кашля и аллергии» и «Центр диагностики и реабилитации»
- Телефон: размер 25px (было ~14px)
- Меню: font-size 18px (было 14px), цвет ссылок #000 (было #53514e)
- Цвет ссылки адреса: #52b4bd (было #0089c3)
- «ЛОР операции» без дефиса (было «ЛОР-операции»)
Точное воспроизведение шапки с perm.oclinica.ru/lor. Три зоны: топ-бар, логотип, главное меню.
Живой пример
Анатомия шапки
1. Верхняя панель
Три столбца: логотип (logo-main.png) | три ссылки вертикально с 📍 (К. Цеткин 9, Клиника кашля, Центр диагностики) | телефон 25px + кнопка «Заказать звонок» (pill)
Фон: #fff · Без рамок · Ссылки: #52b4bd, подчёркнутые
2. Главное меню
8 горизонтальных пунктов: Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР операции | Сурдология | Цены | Контакты
Фон: #fff · border-top · 18px · Активный: #0089c3, остальные: #000
Пункты главного меню
Порядок фиксирован. Все пункты чёрные (#000), подчёркнуты. Hover — бежевый фон #f5f0e6. ▾ — выпадающее подменю при наведении.
Цвета и токены
Фон шапки
#ffffff
—
Пункты меню
#000000
—
Hover фон меню
#f5f0e6
bb-nav-item:hover
Ссылки адресов
#52b4bd
—
Кнопка «Заказать»
#e9e4d4
bb-btn-pill
Подменю фон
#ffffff
—
Подменю hover
#f5f0e6
bb-nav-sub-item:hover
Телефон
#000000
25px, bold
LLMLLM-спецификация
Зоны шапки
| Зона | Фон | Содержимое |
|---|---|---|
| Верхняя панель | #fff, без рамок | Логотип (logo-main.png) | 3 ссылки вертикально с 📍 (#52b4bd) | Телефон 25px + кнопка pill |
| Главное меню | #fff, border-top | 8 пунктов 18px: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР операции / Сурдология / Цены / Контакты |
Цвета
| Элемент | Цвет | Токен |
|---|---|---|
| Фон шапки | #ffffff | — |
| Ссылки меню (default) | #000000 | — |
| Активный пункт / hover | #0089c3 | --brand-053m |
| Кнопка «Заказать звонок» | #e9e4d4 / border #d5cfbd | bb-btn-pill |
| Телефон | #111827, font-weight bold | — |
Правила