forked from UKSOURCE/hailearning.edu.vn
496 lines
10 KiB
CSS
496 lines
10 KiB
CSS
/* ========================================
|
|
MOBILE HEADER & MENU STYLES
|
|
Only applies to mobile & tablet (max-width: 991px)
|
|
Desktop layout remains unchanged
|
|
======================================== */
|
|
|
|
/* ========================================
|
|
1. MOBILE HEADER ADJUSTMENTS
|
|
======================================== */
|
|
|
|
@media (max-width: 991px) {
|
|
/* Make header sticky on mobile */
|
|
.header-1 {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 999;
|
|
background-color: var(--white);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Hide header top section on mobile */
|
|
.header-top-section {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile header adjustments */
|
|
.header-1 .header-main {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
/* Logo adjustments for mobile */
|
|
.header-1 .header-left .logo img {
|
|
max-height: 40px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Hide desktop menu on mobile */
|
|
.header-1 .mean__menu-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile header right section */
|
|
.header-1 .header-right .header-call-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
/* Hide "Apply now" button on mobile */
|
|
/* .header-1 .header-right .theme-btn {
|
|
display: none;
|
|
} */
|
|
|
|
/* Mobile search icon styling */
|
|
.mobile-search-icon {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 2px solid var(--theme);
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--theme);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mobile-search-icon:hover {
|
|
background-color: var(--theme);
|
|
color: var(--white);
|
|
}
|
|
|
|
/* Hide desktop search icon on mobile */
|
|
.desktop-search-icon {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Mobile hamburger icon styling */
|
|
.mobile-hamburger {
|
|
display: block !important;
|
|
}
|
|
|
|
.mobile-hamburger .sidebar__toggle {
|
|
font-size: 24px;
|
|
color: var(--header);
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Hide desktop hamburger on mobile */
|
|
.desktop-hamburger {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Ensure proper spacing */
|
|
.header-1 .container-fluid {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
/* Desktop: Show desktop icons, hide mobile icons */
|
|
@media (min-width: 992px) {
|
|
.mobile-search-icon,
|
|
.mobile-hamburger {
|
|
display: none !important;
|
|
}
|
|
|
|
.desktop-search-icon,
|
|
.desktop-hamburger {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
2. MOBILE SLIDE MENU
|
|
======================================== */
|
|
|
|
/* Mobile menu container */
|
|
.mobile-slide-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
max-width: 320px;
|
|
height: 100vh;
|
|
background-color: var(--white);
|
|
z-index: 99999;
|
|
transform: translateX(100%);
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
overflow-y: auto;
|
|
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.mobile-slide-menu.mobile-menu-open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Mobile menu header */
|
|
.mobile-menu-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.mobile-menu-logo img {
|
|
max-height: 35px;
|
|
width: auto;
|
|
}
|
|
|
|
/* Close button */
|
|
.mobile-menu-close {
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
background-color: var(--theme);
|
|
border: none;
|
|
color: var(--white);
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mobile-menu-close:hover {
|
|
background-color: #d32f2f;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* ========================================
|
|
3. MOBILE MENU NAVIGATION
|
|
======================================== */
|
|
|
|
.mobile-menu-nav {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.mobile-menu-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.mobile-menu-item {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.mobile-menu-item-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.mobile-menu-link {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--header);
|
|
text-decoration: none;
|
|
text-transform: capitalize;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.mobile-menu-link:hover {
|
|
color: var(--theme);
|
|
}
|
|
|
|
/* Plus/Minus toggle button */
|
|
.mobile-menu-toggle {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--theme);
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
flex-shrink: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.mobile-menu-toggle:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.mobile-menu-toggle i {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* ========================================
|
|
4. MOBILE SUBMENU (ACCORDION)
|
|
======================================== */
|
|
|
|
.mobile-submenu {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition:
|
|
max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 0.3s ease,
|
|
padding 0.3s ease;
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.mobile-submenu.mobile-submenu-open {
|
|
max-height: 1000px;
|
|
opacity: 1;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.mobile-submenu-item {
|
|
padding: 0;
|
|
}
|
|
|
|
.mobile-submenu-link {
|
|
display: block;
|
|
padding: 12px 20px 12px 40px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--header);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.mobile-submenu-link::before {
|
|
content: "→";
|
|
position: absolute;
|
|
left: 25px;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mobile-submenu-link:hover {
|
|
color: var(--theme);
|
|
padding-left: 45px;
|
|
}
|
|
|
|
.mobile-submenu-link:hover::before {
|
|
opacity: 1;
|
|
left: 30px;
|
|
}
|
|
|
|
/* ========================================
|
|
5. MOBILE MENU OVERLAY
|
|
======================================== */
|
|
|
|
.mobile-menu-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 99998;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity 0.3s ease,
|
|
visibility 0.3s ease;
|
|
}
|
|
|
|
.mobile-menu-overlay.mobile-overlay-open {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ========================================
|
|
6. RESPONSIVE ADJUSTMENTS
|
|
======================================== */
|
|
|
|
/* Tablet adjustments */
|
|
@media (max-width: 991px) and (min-width: 768px) {
|
|
.mobile-slide-menu {
|
|
max-width: 380px;
|
|
}
|
|
|
|
.mobile-menu-link {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
/* Small mobile devices */
|
|
@media (max-width: 480px) {
|
|
.mobile-slide-menu {
|
|
max-width: 280px;
|
|
}
|
|
|
|
.header-1 .container-fluid {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.mobile-menu-header {
|
|
padding: 15px;
|
|
}
|
|
|
|
.mobile-menu-close {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
7. PREVENT BODY SCROLL WHEN MENU OPEN
|
|
======================================== */
|
|
|
|
body.mobile-menu-active {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ========================================
|
|
8. SMOOTH ANIMATIONS
|
|
======================================== */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mobile-slide-menu,
|
|
.mobile-submenu,
|
|
.mobile-menu-overlay,
|
|
.mobile-menu-toggle i {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
9. DESKTOP - ENSURE NO MOBILE STYLES
|
|
======================================== */
|
|
|
|
@media (min-width: 992px) {
|
|
.mobile-slide-menu,
|
|
.mobile-menu-overlay {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
NESTED SUBMENU SUPPORT (Multi-level)
|
|
======================================== */
|
|
|
|
/* Increase max-height for nested submenus */
|
|
.mobile-submenu.mobile-submenu-open {
|
|
max-height: 2000px !important;
|
|
}
|
|
|
|
/* Level 1 submenu (first level) */
|
|
.mobile-submenu-level-1 {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.mobile-submenu-level-1 .mobile-menu-item-wrapper {
|
|
padding-left: 40px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.mobile-submenu-level-1 .mobile-menu-link {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Level 2 submenu (nested inside level 1) */
|
|
.mobile-submenu-level-2 {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.mobile-submenu-level-2 .mobile-menu-item-wrapper {
|
|
padding-left: 60px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.mobile-submenu-level-2 .mobile-menu-link {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Level 3 submenu (nested inside level 2) */
|
|
.mobile-submenu-level-3 {
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.mobile-submenu-level-3 .mobile-menu-item-wrapper {
|
|
padding-left: 80px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.mobile-submenu-level-3 .mobile-menu-link {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Adjust toggle button size for nested items */
|
|
.mobile-submenu .mobile-menu-toggle {
|
|
width: 26px;
|
|
height: 26px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Border for nested items */
|
|
.mobile-menu-level-1 {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.mobile-menu-level-2,
|
|
.mobile-menu-level-3 {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Adjust padding for nested menu items */
|
|
.mobile-menu-level-1 .mobile-menu-item-wrapper,
|
|
.mobile-menu-level-2 .mobile-menu-item-wrapper,
|
|
.mobile-menu-level-3 .mobile-menu-item-wrapper {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
/* ========================================
|
|
PREVENT MENU OVERLAP - HIDE OLD OFFCANVAS ON MOBILE
|
|
======================================== */
|
|
|
|
@media (max-width: 991px) {
|
|
/* Completely hide offcanvas menu on mobile */
|
|
.offcanvas__info,
|
|
.offcanvas__overlay,
|
|
.fix-area {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
z-index: -1 !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
/* Completely hide mobile menu on desktop */
|
|
.mobile-slide-menu,
|
|
.mobile-menu-overlay {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
z-index: -1 !important;
|
|
}
|
|
}
|