diff --git a/cabinet_service/templates/landing.html b/cabinet_service/templates/landing.html index 1320c39..e0f9e29 100644 --- a/cabinet_service/templates/landing.html +++ b/cabinet_service/templates/landing.html @@ -105,6 +105,44 @@ font-size: 18px; } .header-actions { display: flex; align-items: center; gap: 12px; } + + /* Бургер-меню (скрыто на десктопе) */ + .burger { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + width: 40px; + height: 40px; + background: transparent; + border: 1px solid var(--border); + border-radius: 8px; + cursor: pointer; + padding: 0; + } + .burger-line { + display: block; + width: 20px; + height: 2px; + background: var(--text); + border-radius: 2px; + transition: transform .2s ease, opacity .2s ease; + } + .burger.open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } + .burger.open .burger-line:nth-child(2) { opacity: 0; } + .burger.open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + + .mobile-menu { + display: none; + flex-direction: column; + gap: 10px; + padding: 12px 24px 16px; + background: var(--surface); + border-bottom: 1px solid var(--border); + } + .mobile-menu.open { display: flex; } + .mobile-menu-link { text-align: center; } .btn { display: inline-block; padding: 10px 20px; @@ -224,32 +262,21 @@ .hero h1 { font-size: 32px; } .hero p { font-size: 17px; } - /* Адаптивный хедер для мобильных */ + /* Адаптивный хедер для мобильных: бургер-меню */ .header { padding: 12px 0; } .header-inner { gap: 8px; } .brand { gap: 8px; font-size: 16px; } .brand-icon { width: 28px; height: 28px; font-size: 16px; } - .header-actions { gap: 6px; } - .header-actions .btn { padding: 8px 12px; font-size: 14px; } - /* Скрываем текст кнопки "Войти", оставляем компактную */ - .header-actions .btn-ghost:not(.theme-toggle) { - padding: 8px 10px; - } + .header-actions { gap: 8px; } .theme-toggle { padding: 8px 10px; } + + /* Скрываем кнопки "Войти" и "Регистрация" из хедера, показываем бургер */ + .header-login, .header-register { display: none; } + .burger { display: flex; } } @media (max-width: 400px) { - /* На очень узких экранах скрываем текст кнопки "Войти" */ - .header-actions .btn-ghost:not(.theme-toggle) span { display: none; } - .header-actions .btn-ghost:not(.theme-toggle) { - width: 36px; - padding: 8px 0; - text-align: center; - } - } - - @media (max-width: 360px) { - /* На самых узких экранах скрываем текст бренда, оставляем иконку */ + /* На очень узких экранах скрываем текст бренда */ .brand span:not(.brand-icon) { display: none; } .brand { gap: 0; } } @@ -264,10 +291,19 @@
+