@media screen and (max-width: 1023px) {
/* Main Mobile Menu Wrapper */
.site-menu { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; background: #000; overflow: hidden; } .js-menu-is-active .site-menu { display: block; } .mobile-menu-container { display: flex; flex-direction: column; height: 100vh; background: #000; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin: 0 !important; overflow: hidden; } .site-header { z-index: 100000 !important; /* Above the site-menu */ } .mobile-menu-main { display: flex; flex-direction: row-reverse; /* Put progress bar (second in HTML) on the left */ justify-content: flex-end; align-items: flex-start; padding: 28px 40px 40px 40px; gap: 30px; } .mobile-menu-links { display: flex; flex-direction: column; gap: 12px; opacity: 1; transition: opacity 0.2s ease; } .mobile-menu-links a { color: #ffffff; text-decoration: none !important; text-decoration-line: none !important; border: none !important; border-bottom: none !important; background: none !important; box-shadow: none !important; outline: none !important; font-size: 42px; font-weight: 800; font-family: 'Inter', -apple-system, sans-serif; line-height: 1.1; letter-spacing: -0.03em; transition: color 0.2s ease-in-out; /* Smooth but fast color change */ position: relative; display: inline-block; } body html .site-menu .mobile-menu-links a:hover, body html .site-menu .mobile-menu-links a.is-active { color: #ef6c26 !important; }
/* Sub-Menu specific resets */
.mobile-menu-links.is-submenu a { font-size: 23px; margin-left: 10px; margin-bottom: 0px; }
/* Progress Bar */
.mobile-menu-progress-container { width: 4px; height: 205px; background: #333; position: relative; margin-top: 10px; border-radius: 0; overflow: hidden; } .mobile-menu-progress-bar { position: absolute; bottom: 0; /* Progress fills from bottom or is it from top? The screenshot shows orange at bottom. */ left: 0; width: 100%; height: 0%; background: #ef6c26; }
/* Ken Burns & Slider */
.mobile-menu-slider { width: 100%; flex-grow: 1; background: #000; position: relative; overflow: hidden; } .mobile-menu-slider-track { width: 100%; height: 100%; position: relative; } .mobile-menu-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Truly smooth transition */ height: 100%; } .mobile-menu-slide.is-active { opacity: 1; z-index: 5; } .mobile-menu-slide-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .mobile-menu-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-ken-burns { animation: kenBurnsMobile 4s ease-in-out infinite alternate; /* Faster Burns */ transform-origin: center; } @keyframes kenBurnsMobile { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } .mobile-menu-slide-label { position: absolute; bottom: 25px; left: 20px; background: rgba(20, 20, 20, 0.85); padding: 10px 20px; border-radius: 8px; color: #ffffff !important; font-size: 15px; font-weight: 600; text-decoration: none !important; z-index: 10; display: inline-block; transition: background 0.2s ease; } body html .site-menu .mobile-menu-slide-label:hover { background: #ef6c26 !important; /* Box turns orange on hover */ color: #fff !important; }
/* Nav Buttons */
.mobile-menu-nav-wrapper { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; z-index: 100001; } 
.mobile-menu-nav-btn { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: all 0.3s ease; } 
.mobile-menu-nav-btn svg { width: 24px; height: 24px; stroke: #fff; transition: all 0.3s ease; } 
.mobile-menu-nav-btn--prev { background: rgba(0,0,0,0.6) !important; } 
.mobile-menu-nav-btn--next { background: rgba(0,0,0,0.9) !important; } 

/* Header specific overrides from grafik.png description */
body#site .menu-toggle__button--open svg { color: #ef6c26 !important; /* Orange hamburger icon */ } body#site .moon-star { color: #ffffff !important; /* White stars on the moon */ } .mobile-menu-back-link { font-size: 24px; color: #ef6c26 !important; margin-bottom: 20px; display: flex; align-items: center; text-decoration: none !important; font-weight: 800; } .mobile-menu-back-icon { margin-right: 8px; } }