From 9468136cfc257f24faa0b67ae3aaf0f71e658434 Mon Sep 17 00:00:00 2001 From: Bhuvanesh S Date: Wed, 3 Jun 2026 15:27:42 +0530 Subject: [PATCH 1/5] [UX] Improve accessibility and mobile navigation experience --- 404.html | 1 + about.html | 1 + css/style.css | 254 +++++++++++++++++++++++++++++++++++++++++++ dashboard.html | 1 + faq.html | 1 + favorites.html | 1 + index.html | 1 + js/accessibility.js | 171 +++++++++++++++++++++++++++-- login.html | 1 + menu.html | 1 + orders.html | 9 +- profile.html | 1 + recommendations.html | 1 + signup.html | 1 + 14 files changed, 428 insertions(+), 17 deletions(-) diff --git a/404.html b/404.html index de5481d..73c1cbc 100644 --- a/404.html +++ b/404.html @@ -46,5 +46,6 @@

+ diff --git a/about.html b/about.html index cdb7529..be1e065 100644 --- a/about.html +++ b/about.html @@ -195,5 +195,6 @@

Contact Us

+ diff --git a/css/style.css b/css/style.css index 832a43c..240e746 100644 --- a/css/style.css +++ b/css/style.css @@ -3508,7 +3508,232 @@ body.dark .hero-content p { } } +/* ===== COMPREHENSIVE ACCESSIBILITY & MOBILE RESPONSIVE NAV ===== */ + +/* Skip link styling */ +.skip-link { + position: absolute; + top: -60px; + left: 10px; + background: #bf360c; + color: white; + padding: 10px 20px; + z-index: 10000; + transition: top 0.2s ease; + font-weight: 700; + text-decoration: none; + border-radius: 0 0 8px 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); +} + +.skip-link:focus { + top: 0; + outline: 3px solid white; + outline-offset: -3px; +} + +/* Scroll lock when mobile drawer is open */ +body.nav-menu-open { + overflow: hidden; +} + +/* Hamburger toggle button */ +.mobile-nav-toggle { + display: none; + background: transparent; + border: none; + cursor: pointer; + padding: 0.5rem; + z-index: 1200; + flex-direction: column; + justify-content: space-between; + width: 32px; + height: 24px; +} + +.mobile-nav-toggle .hamburger-bar { + display: block; + width: 100%; + height: 3px; + background-color: white; + border-radius: 2px; + transition: transform 0.3s ease, opacity 0.3s ease; +} + +/* High-Contrast Focus Ring Overrides */ +header button:focus-visible, +header a:focus-visible, +header input:focus-visible { + outline: 3px solid #ffffff !important; + outline-offset: 2px !important; + box-shadow: 0 0 0 5px rgba(255, 87, 34, 0.5) !important; +} + +body.keyboard-nav header button:focus, +body.keyboard-nav header a:focus, +body.keyboard-nav header input:focus { + outline: 3px solid #ffffff !important; + outline-offset: 2px !important; + box-shadow: 0 0 0 5px rgba(255, 87, 34, 0.5) !important; +} + +/* Mobile responsive navigation styles */ +@media (max-width: 1024px) { + .mobile-nav-toggle { + display: flex; + } + + .header-inner { + padding: 0.8rem 1.5rem !important; + display: flex !important; + flex-direction: row !important; + justify-content: space-between !important; + align-items: center !important; + width: 100% !important; + gap: 0 !important; + } + + .logo { + margin-right: 0 !important; + font-size: 1.6rem !important; + } + + nav { + position: fixed; + top: 0; + right: -100%; + width: 290px; + height: 100vh; + background: #ff5722; + box-shadow: -8px 0 25px rgba(0, 0, 0, 0.15); + flex-direction: column; + align-items: flex-start !important; + justify-content: flex-start !important; + padding: 5.5rem 1.8rem 2rem !important; + gap: 1.2rem !important; + transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); + z-index: 1100; + overflow-y: auto; + } + + nav.nav-open { + right: 0; + } + + nav a { + width: 100%; + padding: 0.75rem 1rem !important; + font-size: 1.05rem; + border-radius: 8px; + display: block; + text-align: left; + background: rgba(255, 255, 255, 0.05); + transition: background 0.2s ease; + box-shadow: none !important; + } + + nav a:hover, + nav a.active { + background: #e64a19 !important; + } + + /* Cart button inline layout inside drawer */ + .cart-btn-modern { + width: 100% !important; + justify-content: flex-start !important; + padding: 0.75rem 1rem !important; + background: rgba(255, 255, 255, 0.1) !important; + border-radius: 8px !important; + } + + /* Mobile search bar alignment */ + .search-bar { + margin-left: 0 !important; + width: 100% !important; + display: flex !important; + justify-content: flex-start !important; + margin-top: 0.5rem !important; + } + + .search-bar input { + width: 100% !important; + max-width: none !important; + } + + .theme-toggle { + margin-left: 0 !important; + margin-top: 0.5rem; + align-self: flex-start; + } + + .auth-nav-item { + width: 100%; + margin-left: 0 !important; + margin-top: 0.5rem; + } + + .login-btn-nav { + display: block !important; + text-align: center !important; + width: 100%; + } + + /* Dropdown accordions */ + .dropdown { + width: 100%; + } + + .dropdown-menu { + position: static !important; + opacity: 1 !important; + visibility: visible !important; + transform: none !important; + box-shadow: none !important; + padding-left: 1rem !important; + padding-top: 0.5rem !important; + display: none; + background: transparent !important; + border-radius: 0 !important; + border-left: 2px solid rgba(255, 255, 255, 0.2); + } + + .dropdown.open .dropdown-menu { + display: block !important; + } + + .dropdown-toggle::after { + margin-left: auto; + transition: transform 0.3s ease; + } + + .dropdown.open .dropdown-toggle::after { + transform: rotate(180deg); + } + + /* Hamburger transition to cross button */ + .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) { + transform: translateY(10.5px) rotate(45deg); + } + + .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { + opacity: 0; + } + + .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) { + transform: translateY(-10.5px) rotate(-45deg); + } +} + +/* Reduced Motion preferences */ @media (prefers-reduced-motion: reduce) { + * { + animation-delay: 0s !important; + animation-duration: 0s !important; + animation-iteration-count: 1 !important; + transition-duration: 0s !important; + scroll-behavior: auto !important; + } + .hero-bg-video, .hero-badge, .hero-content h1, @@ -3519,5 +3744,34 @@ body.dark .hero-content p { animation: none !important; transition: none !important; } + + .card:hover { + animation: none !important; + transform: translateY(-4px) !important; + } + + .card img { + transition: none !important; + transform: none !important; + } + + .filter-btn.active { + animation: none !important; + } + + .skeleton { + animation: none !important; + background: #f0e0d0 !important; + } + + .cart-item { + animation: none !important; + } + + .floating-food { + animation: none !important; + display: none !important; + } } + diff --git a/dashboard.html b/dashboard.html index dbb5b04..db6db5f 100644 --- a/dashboard.html +++ b/dashboard.html @@ -70,5 +70,6 @@

Dashboard - Coming Soon

+ diff --git a/faq.html b/faq.html index 6477932..499fabd 100644 --- a/faq.html +++ b/faq.html @@ -475,6 +475,7 @@

Contact Us

+ + \ No newline at end of file diff --git a/index.html b/index.html index 08cc12c..a85b46d 100644 --- a/index.html +++ b/index.html @@ -952,6 +952,7 @@

+ diff --git a/js/accessibility.js b/js/accessibility.js index c523d6a..fe93114 100644 --- a/js/accessibility.js +++ b/js/accessibility.js @@ -1,8 +1,17 @@ -// ===== Accessibility Enhancements ===== -// Screen reader support, keyboard navigation, and ARIA improvements +// ===== Accessibility & Responsive Navigation Enhancements ===== +// Screen reader support, keyboard navigation, dynamic mobile navigation, and ARIA improvements // Setup skip links for keyboard navigation function setupSkipLinks() { + let mainContent = document.getElementById('main-content') || document.querySelector('main') || document.querySelector('section'); + if (mainContent) { + if (!mainContent.id) { + mainContent.id = 'main-content'; + } + mainContent.setAttribute('tabindex', '-1'); + mainContent.style.outline = 'none'; + } + const skipLink = document.createElement('a'); skipLink.href = '#main-content'; skipLink.className = 'skip-link'; @@ -10,7 +19,120 @@ function setupSkipLinks() { document.body.insertBefore(skipLink, document.body.firstChild); } -// Enhance dropdown keyboard navigation +// Setup mobile hamburger navigation and accessibility controls +function setupMobileNavigation() { + const headerInner = document.querySelector('.header-inner'); + const nav = document.querySelector('nav'); + if (!headerInner || !nav) return; + + if (document.getElementById('mobile-nav-toggle')) return; + + const toggleBtn = document.createElement('button'); + toggleBtn.id = 'mobile-nav-toggle'; + toggleBtn.className = 'mobile-nav-toggle'; + toggleBtn.setAttribute('aria-label', 'Open navigation menu'); + toggleBtn.setAttribute('aria-expanded', 'false'); + toggleBtn.setAttribute('aria-controls', 'primary-navigation'); + + toggleBtn.innerHTML = ` + + + + `; + + if (!nav.id) { + nav.id = 'primary-navigation'; + } + + headerInner.insertBefore(toggleBtn, nav); + + toggleBtn.addEventListener('click', () => { + const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true'; + const nextState = !isExpanded; + toggleBtn.setAttribute('aria-expanded', String(nextState)); + toggleBtn.setAttribute('aria-label', nextState ? 'Close navigation menu' : 'Open navigation menu'); + nav.classList.toggle('nav-open', nextState); + document.body.classList.toggle('nav-menu-open', nextState); + + if (nextState) { + const firstLink = nav.querySelector('a'); + if (firstLink) setTimeout(() => firstLink.focus(), 100); + } else { + toggleBtn.focus(); + } + }); + + const navLinks = nav.querySelectorAll('a:not(.dropdown-toggle)'); + navLinks.forEach(link => { + link.addEventListener('click', () => { + toggleBtn.setAttribute('aria-expanded', 'false'); + toggleBtn.setAttribute('aria-label', 'Open navigation menu'); + nav.classList.remove('nav-open'); + document.body.classList.remove('nav-menu-open'); + }); + }); + + // Dropdown accordions for mobile menu + const dropdowns = nav.querySelectorAll('.dropdown'); + dropdowns.forEach(dropdown => { + const toggle = dropdown.querySelector('.dropdown-toggle'); + if (!toggle) return; + + toggle.addEventListener('click', (e) => { + if (window.innerWidth <= 1024) { + e.preventDefault(); + e.stopPropagation(); + const isOpen = dropdown.classList.contains('open'); + + dropdowns.forEach(d => { + if (d !== dropdown) { + d.classList.remove('open'); + const dToggle = d.querySelector('.dropdown-toggle'); + if (dToggle) dToggle.setAttribute('aria-expanded', 'false'); + } + }); + + dropdown.classList.toggle('open', !isOpen); + toggle.setAttribute('aria-expanded', String(!isOpen)); + } + }); + }); + + // Trap focus and close drawer on Escape + nav.addEventListener('keydown', (e) => { + if (!nav.classList.contains('nav-open')) return; + + if (e.key === 'Escape') { + e.preventDefault(); + toggleBtn.setAttribute('aria-expanded', 'false'); + toggleBtn.setAttribute('aria-label', 'Open navigation menu'); + nav.classList.remove('nav-open'); + document.body.classList.remove('nav-menu-open'); + toggleBtn.focus(); + } + + if (e.key === 'Tab') { + const focusable = nav.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex="0"]'); + if (focusable.length === 0) return; + const first = focusable[0]; + const last = focusable[focusable.length - 1]; + + if (e.shiftKey) { + if (document.activeElement === first) { + last.focus(); + e.preventDefault(); + } + } else { + if (document.activeElement === last) { + first.focus(); + e.preventDefault(); + } + } + } + }); +} + +// Enhance dropdown keyboard navigation for desktop function setupDropdownKeyboardNav() { const dropdowns = document.querySelectorAll('.dropdown'); @@ -86,6 +208,7 @@ function setupSearchKeyboardNav() { e.preventDefault(); selectedIndex = Math.min(selectedIndex + 1, items.length - 1); if (selectedIndex >= 0) { + items.forEach(el => el.classList.remove('focused')); items[selectedIndex].classList.add('focused'); items[selectedIndex].scrollIntoView({ block: 'nearest' }); } @@ -102,8 +225,8 @@ function setupSearchKeyboardNav() { searchInput.focus(); } } else if (e.key === 'Enter') { - e.preventDefault(); if (selectedIndex >= 0) { + e.preventDefault(); items[selectedIndex].click(); } } else if (e.key === 'Escape') { @@ -113,7 +236,6 @@ function setupSearchKeyboardNav() { } }); - const originalShowSuggestions = searchInput._showSuggestions; searchInput.addEventListener('input', () => { selectedIndex = -1; }); @@ -144,9 +266,7 @@ function setupFormAccessibility() { if (contactForm) { const inputs = contactForm.querySelectorAll('input, textarea'); inputs.forEach(input => { - const label = contactForm.querySelector(`label[for="${input.id}"]`); const errorMsg = contactForm.querySelector(`#error-${input.id}`); - if (errorMsg) { input.setAttribute('aria-describedby', `error-${input.id}`); } @@ -175,21 +295,53 @@ function setupFilterButtonAccessibility() { }); } -// Setup cart sidebar keyboard accessibility +// Setup cart sidebar keyboard accessibility and focus trapping function setupCartSidebarKeyboardNav() { const cartSidebar = document.getElementById('cart-sidebar'); const cartCloseBtn = document.getElementById('cart-close'); if (!cartSidebar) return; - // Trap focus within sidebar when open cartSidebar.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.preventDefault(); cartSidebar.setAttribute('aria-hidden', 'true'); cartSidebar.classList.remove('open'); + const cartOpenBtn = document.getElementById('cart-open-btn'); + if (cartOpenBtn) cartOpenBtn.focus(); } + + if (e.key === 'Tab') { + const focusable = cartSidebar.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex="0"]'); + if (focusable.length === 0) return; + const first = focusable[0]; + const last = focusable[focusable.length - 1]; + + if (e.shiftKey) { + if (document.activeElement === first) { + last.focus(); + e.preventDefault(); + } + } else { + if (document.activeElement === last) { + first.focus(); + e.preventDefault(); + } + } + } + }); + + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.attributeName === 'class') { + const isOpen = cartSidebar.classList.contains('open'); + if (isOpen && cartCloseBtn) { + setTimeout(() => cartCloseBtn.focus(), 50); + } + } + }); }); + observer.observe(cartSidebar, { attributes: true }); } // Enhance checkbox and radio accessibility @@ -244,6 +396,7 @@ function setupFocusVisibility() { // Initialize all accessibility enhancements function initializeAccessibility() { setupSkipLinks(); + setupMobileNavigation(); setupDropdownKeyboardNav(); setupSearchKeyboardNav(); setupCardKeyboardNav(); diff --git a/login.html b/login.html index 5b71d66..a8614e7 100644 --- a/login.html +++ b/login.html @@ -83,5 +83,6 @@

Welcome Back

+ diff --git a/menu.html b/menu.html index 94d9f3d..fb1c5dd 100644 --- a/menu.html +++ b/menu.html @@ -216,5 +216,6 @@

Contact Us

+ diff --git a/orders.html b/orders.html index 932d146..dd35b25 100644 --- a/orders.html +++ b/orders.html @@ -407,18 +407,11 @@

Have a promo cod - - - - - - - - + + diff --git a/recommendations.html b/recommendations.html index 2a0b0dd..c2206e2 100644 --- a/recommendations.html +++ b/recommendations.html @@ -336,6 +336,7 @@

+ + From d46780770438c6e460f4c5bb230ac7cf10fa815b Mon Sep 17 00:00:00 2001 From: Bhuvanesh S Date: Wed, 3 Jun 2026 15:49:24 +0530 Subject: [PATCH 2/5] [UX] Improve accessibility and responsive mobile navigation --- css/style.css | 91 ++++++++++++++++++++++++++- js/accessibility.js | 150 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 237 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 240e746..9a53d08 100644 --- a/css/style.css +++ b/css/style.css @@ -3560,13 +3560,34 @@ body.nav-menu-open { transition: transform 0.3s ease, opacity 0.3s ease; } -/* High-Contrast Focus Ring Overrides */ +/* High-Contrast & Premium Glowing Focus Outlines */ +button:focus-visible, +a:focus-visible, +input:focus-visible, +textarea:focus-visible, +select:focus-visible { + outline: 3px solid #ff5722 !important; + outline-offset: 2px !important; + box-shadow: 0 0 12px rgba(255, 87, 34, 0.6) !important; + border-radius: 4px; +} + header button:focus-visible, header a:focus-visible, header input:focus-visible { outline: 3px solid #ffffff !important; outline-offset: 2px !important; - box-shadow: 0 0 0 5px rgba(255, 87, 34, 0.5) !important; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; +} + +body.keyboard-nav button:focus, +body.keyboard-nav a:focus, +body.keyboard-nav input:focus, +body.keyboard-nav textarea:focus, +body.keyboard-nav select:focus { + outline: 3px solid #ff5722 !important; + outline-offset: 2px !important; + box-shadow: 0 0 12px rgba(255, 87, 34, 0.6) !important; } body.keyboard-nav header button:focus, @@ -3574,7 +3595,30 @@ body.keyboard-nav header a:focus, body.keyboard-nav header input:focus { outline: 3px solid #ffffff !important; outline-offset: 2px !important; - box-shadow: 0 0 0 5px rgba(255, 87, 34, 0.5) !important; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; +} + +/* Card & Interactive Element Keyboard Focus Indicator Refinements */ +.card:focus-visible, +.team-member:focus-visible, +.testimonial:focus-visible { + outline: 3px solid #ff5722 !important; + outline-offset: 4px !important; + box-shadow: 0 0 15px rgba(255, 87, 34, 0.5) !important; +} + +/* Visual validation error states */ +input.input-error, +textarea.input-error { + border-color: #c0392b !important; + box-shadow: 0 0 10px rgba(192, 57, 43, 0.25) !important; +} + +input.input-error:focus, +textarea.input-error:focus { + border-color: #c0392b !important; + box-shadow: 0 0 12px rgba(192, 57, 43, 0.4) !important; + outline: none !important; } /* Mobile responsive navigation styles */ @@ -3724,6 +3768,46 @@ body.keyboard-nav header input:focus { } } +/* Spacing and Responsive Layout Polish */ +@media (max-width: 768px) { + /* About Page Section Polish */ + .about-page { + padding-top: 3.5rem !important; + padding-bottom: 4rem !important; + } + + .about-desc-large { + font-size: 1.05rem !important; + margin-bottom: 2.5rem !important; + line-height: 1.7 !important; + } + + /* Testimonials layout adjustments */ + section.testimonials { + padding: 3.5rem 1rem 5rem !important; + } + + .testimonial { + max-width: 100% !important; + margin-bottom: 1rem; + } + + .testimonial-cards { + gap: 1.5rem !important; + } + + /* Team members layout */ + .team { + gap: 1.5rem !important; + } + + .team-member { + max-width: 100% !important; + height: auto !important; + min-height: 300px; + } +} + /* Reduced Motion preferences */ @media (prefers-reduced-motion: reduce) { * { @@ -3774,4 +3858,5 @@ body.keyboard-nav header input:focus { } } + diff --git a/js/accessibility.js b/js/accessibility.js index fe93114..687f287 100644 --- a/js/accessibility.js +++ b/js/accessibility.js @@ -1,5 +1,5 @@ // ===== Accessibility & Responsive Navigation Enhancements ===== -// Screen reader support, keyboard navigation, dynamic mobile navigation, and ARIA improvements +// Screen reader support, keyboard navigation, dynamic mobile navigation, validation feedback, and ARIA improvements // Setup skip links for keyboard navigation function setupSkipLinks() { @@ -12,6 +12,9 @@ function setupSkipLinks() { mainContent.style.outline = 'none'; } + // Check if skip link already exists + if (document.querySelector('.skip-link')) return; + const skipLink = document.createElement('a'); skipLink.href = '#main-content'; skipLink.className = 'skip-link'; @@ -258,10 +261,89 @@ function setupCardKeyboardNav() { }); } +// Field validation helper for ARIA updates +function validateField(input, errorMsg) { + let isValid = true; + let message = ''; + const value = input.value.trim(); + + if (input.required && !value) { + isValid = false; + message = `${input.previousElementSibling ? input.previousElementSibling.textContent.trim() : 'Field'} is required.`; + } else if (input.type === 'email' && value) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(value)) { + isValid = false; + message = 'Please enter a valid email address.'; + } + } else if (input.tagName === 'TEXTAREA' && value && value.length < 10) { + isValid = false; + message = 'Message must be at least 10 characters.'; + } + + if (!isValid) { + input.setAttribute('aria-invalid', 'true'); + input.classList.add('input-error'); + if (errorMsg) { + errorMsg.textContent = message; + errorMsg.style.display = 'block'; + } + } else { + input.setAttribute('aria-invalid', 'false'); + input.classList.remove('input-error'); + if (errorMsg) { + errorMsg.textContent = ''; + } + } + + return isValid; +} + +// Auth fields validation validation +function validateAuthField(input, errorMsg) { + let isValid = true; + let message = ''; + const value = input.value.trim(); + + if (input.required && !value) { + isValid = false; + message = 'This field is required.'; + } else if (input.type === 'email' && value) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(value)) { + isValid = false; + message = 'Please enter a valid email address.'; + } + } else if (input.type === 'password' && value && value.length < 6) { + isValid = false; + message = 'Password must be at least 6 characters.'; + } else if (input.type === 'tel' && value && !/^\d{10}$/.test(value)) { + isValid = false; + message = 'Please enter a valid 10-digit phone number.'; + } + + if (!isValid) { + input.setAttribute('aria-invalid', 'true'); + input.classList.add('input-error'); + if (errorMsg) { + errorMsg.textContent = message; + } + } else { + input.setAttribute('aria-invalid', 'false'); + input.classList.remove('input-error'); + if (errorMsg) { + errorMsg.textContent = ''; + } + } + return isValid; +} + // Enhance form accessibility with proper labels and error associations function setupFormAccessibility() { const contactForm = document.getElementById('contact-form'); const newsLetterForm = document.getElementById('newsletter-form'); + const loginForm = document.getElementById('login-form'); + const signupForm = document.getElementById('signup-form'); if (contactForm) { const inputs = contactForm.querySelectorAll('input, textarea'); @@ -270,6 +352,72 @@ function setupFormAccessibility() { if (errorMsg) { input.setAttribute('aria-describedby', `error-${input.id}`); } + + input.addEventListener('blur', () => { + validateField(input, errorMsg); + }); + + input.addEventListener('input', () => { + input.removeAttribute('aria-invalid'); + input.classList.remove('input-error'); + if (errorMsg) errorMsg.textContent = ''; + }); + }); + + contactForm.addEventListener('submit', (e) => { + let isFormValid = true; + inputs.forEach(input => { + const errorMsg = contactForm.querySelector(`#error-${input.id}`); + const isValid = validateField(input, errorMsg); + if (!isValid) isFormValid = false; + }); + + if (!isFormValid) { + e.preventDefault(); + e.stopPropagation(); + const firstInvalid = contactForm.querySelector('[aria-invalid="true"]'); + if (firstInvalid) firstInvalid.focus(); + } + }); + } + + if (loginForm) { + const inputs = loginForm.querySelectorAll('input'); + inputs.forEach(input => { + const errorMsg = loginForm.querySelector(`#${input.id}-error`); + if (errorMsg) { + input.setAttribute('aria-describedby', `${input.id}-error`); + } + + input.addEventListener('input', () => { + input.removeAttribute('aria-invalid'); + input.classList.remove('input-error'); + if (errorMsg) errorMsg.textContent = ''; + }); + + input.addEventListener('blur', () => { + validateAuthField(input, errorMsg); + }); + }); + } + + if (signupForm) { + const inputs = signupForm.querySelectorAll('input'); + inputs.forEach(input => { + const errorMsg = signupForm.querySelector(`#${input.id}-error`); + if (errorMsg) { + input.setAttribute('aria-describedby', `${input.id}-error`); + } + + input.addEventListener('input', () => { + input.removeAttribute('aria-invalid'); + input.classList.remove('input-error'); + if (errorMsg) errorMsg.textContent = ''; + }); + + input.addEventListener('blur', () => { + validateAuthField(input, errorMsg); + }); }); } From 3ac3c56a0f93822d59b65313a79565b4f161e9a3 Mon Sep 17 00:00:00 2001 From: Bhuvanesh S Date: Wed, 3 Jun 2026 16:26:58 +0530 Subject: [PATCH 3/5] [UX] Improve accessibility and responsive navigation experience --- css/style.css | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 9a53d08..d875bbc 100644 --- a/css/style.css +++ b/css/style.css @@ -3803,8 +3803,26 @@ textarea.input-error:focus { .team-member { max-width: 100% !important; - height: auto !important; - min-height: 300px; + height: 320px !important; + } + + /* Increase tap target sizes for filter and social icons on mobile */ + .filter-btn { + padding: 0.8rem 2rem !important; + } + + .footer-social-icons a { + width: 44px !important; + height: 44px !important; + font-size: 1.25rem !important; + } + + footer .social-icons a { + display: inline-flex !important; + min-width: 44px !important; + min-height: 44px !important; + align-items: center !important; + justify-content: center !important; } } From dfb1ccb2a1516e67e5e1f7639e87ebca26832320 Mon Sep 17 00:00:00 2001 From: Bhuvanesh S Date: Wed, 3 Jun 2026 16:55:21 +0530 Subject: [PATCH 4/5] [UX] Refactor responsive navigation and improve frontend accessibility --- css/style.css | 1599 ++++++++++++++++++++++++------------------------ data/menu.json | 16 - js/main.js | 5 - 3 files changed, 797 insertions(+), 823 deletions(-) diff --git a/css/style.css b/css/style.css index d875bbc..1d931ea 100644 --- a/css/style.css +++ b/css/style.css @@ -2436,8 +2436,6 @@ mark.highlight { box-shadow: 0 6px 20px rgba(191, 54, 12, 0.4); transform: translateY(-1px); } - newFeatures - .price-section { display: flex; align-items: center; @@ -2852,12 +2850,9 @@ body.dark .cart-badge { } ::-webkit-scrollbar-thumb:hover { background: #e64a19; - newFeatures /*Accessibility Styles */ } /* ===== Accessibility Styles ===== */ -main - /* Skip link - visible on focus */ .skip-link { position: absolute; @@ -3026,7 +3021,7 @@ button:disabled { /* Hover effect for disabled button */ .add-btn:disabled:hover { transform: none !important; - opacity: 0.6; main + opacity: 0.6; } #voice-search-btn { border: none; @@ -3081,800 +3076,800 @@ button:disabled { background: #e64a19; transform: scale(1.05); } -.combo-item-right { - display: flex; - align-items: center; - gap: 10px; -} -} - -/* ===== Cinematic Video Hero ===== */ -.hero { - position: relative; - width: 100%; - min-height: calc(100vh - var(--header-height, 90px)); - height: calc(100vh - var(--header-height, 90px)); - padding: 0 8%; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 0; - flex-wrap: nowrap; - overflow: hidden; - margin-bottom: 0; - background: #130a06; - text-align: left; -} - -.hero-video-stage, -.hero-bg-video, -.hero-overlay { - position: absolute; - inset: 0; -} - -.hero-video-stage { - z-index: 1; - background: #130a06; - overflow: hidden; -} - -.hero-video, -.hero-bg-video { - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0; - transform: scale(1.04); - transition: opacity 1.25s ease, transform 7s ease; - will-change: opacity, transform; -} - -.hero-bg-video.active { - opacity: 1; - transform: scale(1); -} - -.hero-overlay { - z-index: 2; - background: linear-gradient( - 90deg, - rgba(0, 0, 0, 0.70) 0%, - rgba(0, 0, 0, 0.45) 45%, - rgba(0, 0, 0, 0.20) 100% - ); -} - -.hero-content { - position: relative; - z-index: 3; - flex: 0 0 min(650px, 52vw); - max-width: 650px; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - margin: 0; - text-align: left; - color: #ffffff; -} - -.hero-badge, -.hero-secondary-btn, -.hero-stat-card { - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.22); - backdrop-filter: blur(18px); - -webkit-backdrop-filter: blur(18px); - box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); -} - -.hero-badge { - display: inline-flex; - align-items: center; - gap: 0.55rem; - width: fit-content; - margin-bottom: 1.4rem; - padding: 0.62rem 1rem; - border-radius: 999px; - color: rgba(255, 255, 255, 0.94); - font-size: 0.95rem; - font-weight: 700; - animation: heroFadeUp 0.75s ease both; -} - -.hero-title, -.hero-content h1 { - margin: 0 0 1.35rem; - color: #ffffff; - font-size: clamp(2.75rem, 4.4vw, 4.75rem); - font-weight: 800; - line-height: 1.05; - text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52); - letter-spacing: 0; - animation: heroFadeUp 0.85s ease 0.08s both; -} - -.hero-content p { - max-width: 550px; - margin: 0; - color: rgba(255, 255, 255, 0.85); - font-size: 1.1rem; - font-weight: 500; - line-height: 1.8; - text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); - animation: heroFadeUp 0.85s ease 0.2s both; -} - -.hero-actions { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 20px; - flex-wrap: wrap; - margin-top: 30px; - animation: heroFadeUp 0.85s ease 0.4s both; -} - -.hero-primary-btn, -.hero-secondary-btn { - min-width: 154px; - min-height: 54px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 999px; - padding: 0.95rem 1.65rem; - font-size: 1rem; - font-weight: 800; - line-height: 1; - transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; -} - -.hero-primary-btn { - background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%); - color: #ffffff; - box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38); -} - -.hero-primary-btn:hover, -.hero-primary-btn:focus-visible { - background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%); - transform: translate3d(0, -3px, 0); - box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5); -} - -.hero-secondary-btn { - color: #ffffff; - border-color: rgba(255, 255, 255, 0.46); -} - -.hero-secondary-btn:hover, -.hero-secondary-btn:focus-visible { - transform: translate3d(0, -3px, 0); - border-color: rgba(255, 255, 255, 0.75); - box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); -} - -.hero-stats { - position: absolute; - z-index: 3; - top: 50%; - right: 8%; - width: 300px; - min-width: 0; - height: 370px; - transform: translateY(-50%); - pointer-events: none; -} - -.hero-stat-card { - position: absolute; - width: 230px; - min-width: 0; - display: flex; - align-items: center; - gap: 0.8rem; - padding: 0.95rem 1.05rem; - border-radius: 18px; - color: #ffffff; - animation: heroFloat 5.5s ease-in-out infinite; - will-change: transform; -} - -.hero-stat-card strong { - display: block; - color: #ffffff; - font-size: 1.1rem; - line-height: 1.1; -} - -.hero-stat-card span:last-child { - color: rgba(255, 255, 255, 0.78); - font-size: 0.9rem; - font-weight: 700; -} - -.hero-stat-icon { - width: 42px; - height: 42px; - display: inline-flex; - align-items: center; - justify-content: center; - flex: 0 0 42px; - border-radius: 50%; - background: rgba(255, 122, 31, 0.2); -} - -.hero-stat-rating { - top: 0; - right: 0; -} - -.hero-stat-delivery { - top: 130px; - right: 58px; - animation-delay: 0.8s; -} - -.hero-stat-orders { - top: 260px; - right: 0; - animation-delay: 1.6s; -} - -.hero-scroll-indicator { - position: absolute; - z-index: 3; - left: 50%; - bottom: 2rem; - width: 28px; - height: 46px; - display: inline-flex; - justify-content: center; - border: 1.5px solid rgba(255, 255, 255, 0.72); - border-radius: 999px; - transform: translateX(-50%); -} - -.hero-scroll-indicator span { - width: 5px; - height: 5px; - margin-top: 9px; - border-radius: 50%; - background: #ffffff; - animation: heroScrollDot 1.6s ease-in-out infinite; -} - -body.dark .hero { - background: #130a06; - color: #ffffff; -} - -body.dark .hero-content h1, -body.dark .hero-content p { - color: #ffffff; -} - -body.dark .hero-content p { - color: rgba(255, 255, 255, 0.85); -} - -.specials, -.menu, -.specials-section, -.menu-section { - position: relative; - z-index: 5; -} - -@keyframes heroFadeUp { - from { - opacity: 0; - transform: translate3d(0, 26px, 0); - } - - to { - opacity: 1; - transform: translate3d(0, 0, 0); - } -} - -@keyframes heroFloat { - 0%, - 100% { - transform: translate3d(0, 0, 0); - } - - 50% { - transform: translate3d(0, -14px, 0); - } -} - -@keyframes heroScrollDot { - 0% { - opacity: 0; - transform: translateY(0); - } - - 35% { - opacity: 1; - } - - 100% { - opacity: 0; - transform: translateY(20px); - } -} - -@media (max-width: 1024px) { - .hero { - padding: 0 6%; - } - - .hero-stats { - right: 4%; - opacity: 0.92; - } -} - -@media (max-width: 768px) { - .hero { - min-height: calc(100vh - var(--header-height, 90px)); - height: auto; - padding: 3.5rem 1.25rem 4.5rem; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; - } - - .hero-overlay { - background: linear-gradient( - 180deg, - rgba(0, 0, 0, 0.62) 0%, - rgba(0, 0, 0, 0.46) 48%, - rgba(0, 0, 0, 0.66) 100% - ); - } - - .hero-content { - max-width: 100%; - height: auto; - margin: 0 auto; - } - - .hero-badge, - .hero-actions { - margin-left: auto; - margin-right: auto; - } - - .hero-title, - .hero-content h1 { - font-size: clamp(2.45rem, 11vw, 3.65rem); - line-height: 1.05; - } - - .hero-content p { - margin-left: auto; - margin-right: auto; - font-size: 1.02rem; - line-height: 1.7; - } - - .hero-actions { - flex-direction: column; - width: min(100%, 360px); - } - - .hero-primary-btn, - .hero-secondary-btn { - width: 100%; - } - - .hero-stats { - position: relative; - top: auto; - right: auto; - width: min(100%, 360px); - min-width: 0; - margin: 2.2rem auto 0; - transform: none; - display: grid; - gap: 0.7rem; - } - - .hero-stat-card { - position: static; - min-width: 0; - width: 100%; - justify-content: flex-start; - border-radius: 16px; - animation-duration: 4.8s; - } -} - -@media (max-width: 480px) { - .hero { - padding-left: 1rem; - padding-right: 1rem; - } - - .hero-badge { - font-size: 0.82rem; - padding: 0.55rem 0.82rem; - } -} - -/* ===== COMPREHENSIVE ACCESSIBILITY & MOBILE RESPONSIVE NAV ===== */ - -/* Skip link styling */ -.skip-link { - position: absolute; - top: -60px; - left: 10px; - background: #bf360c; - color: white; - padding: 10px 20px; - z-index: 10000; - transition: top 0.2s ease; - font-weight: 700; - text-decoration: none; - border-radius: 0 0 8px 8px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); -} - -.skip-link:focus { - top: 0; - outline: 3px solid white; - outline-offset: -3px; -} - -/* Scroll lock when mobile drawer is open */ -body.nav-menu-open { - overflow: hidden; -} - -/* Hamburger toggle button */ -.mobile-nav-toggle { - display: none; - background: transparent; - border: none; - cursor: pointer; - padding: 0.5rem; - z-index: 1200; - flex-direction: column; - justify-content: space-between; - width: 32px; - height: 24px; -} - -.mobile-nav-toggle .hamburger-bar { - display: block; - width: 100%; - height: 3px; - background-color: white; - border-radius: 2px; - transition: transform 0.3s ease, opacity 0.3s ease; -} - -/* High-Contrast & Premium Glowing Focus Outlines */ -button:focus-visible, -a:focus-visible, -input:focus-visible, -textarea:focus-visible, -select:focus-visible { - outline: 3px solid #ff5722 !important; - outline-offset: 2px !important; - box-shadow: 0 0 12px rgba(255, 87, 34, 0.6) !important; - border-radius: 4px; -} - -header button:focus-visible, -header a:focus-visible, -header input:focus-visible { - outline: 3px solid #ffffff !important; - outline-offset: 2px !important; - box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; -} - -body.keyboard-nav button:focus, -body.keyboard-nav a:focus, -body.keyboard-nav input:focus, -body.keyboard-nav textarea:focus, -body.keyboard-nav select:focus { - outline: 3px solid #ff5722 !important; - outline-offset: 2px !important; - box-shadow: 0 0 12px rgba(255, 87, 34, 0.6) !important; -} - -body.keyboard-nav header button:focus, -body.keyboard-nav header a:focus, -body.keyboard-nav header input:focus { - outline: 3px solid #ffffff !important; - outline-offset: 2px !important; - box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; -} - -/* Card & Interactive Element Keyboard Focus Indicator Refinements */ -.card:focus-visible, -.team-member:focus-visible, -.testimonial:focus-visible { - outline: 3px solid #ff5722 !important; - outline-offset: 4px !important; - box-shadow: 0 0 15px rgba(255, 87, 34, 0.5) !important; -} - -/* Visual validation error states */ -input.input-error, -textarea.input-error { - border-color: #c0392b !important; - box-shadow: 0 0 10px rgba(192, 57, 43, 0.25) !important; -} - -input.input-error:focus, -textarea.input-error:focus { - border-color: #c0392b !important; - box-shadow: 0 0 12px rgba(192, 57, 43, 0.4) !important; - outline: none !important; -} - -/* Mobile responsive navigation styles */ -@media (max-width: 1024px) { - .mobile-nav-toggle { - display: flex; - } - - .header-inner { - padding: 0.8rem 1.5rem !important; - display: flex !important; - flex-direction: row !important; - justify-content: space-between !important; - align-items: center !important; - width: 100% !important; - gap: 0 !important; - } - - .logo { - margin-right: 0 !important; - font-size: 1.6rem !important; - } - - nav { - position: fixed; - top: 0; - right: -100%; - width: 290px; - height: 100vh; - background: #ff5722; - box-shadow: -8px 0 25px rgba(0, 0, 0, 0.15); - flex-direction: column; - align-items: flex-start !important; - justify-content: flex-start !important; - padding: 5.5rem 1.8rem 2rem !important; - gap: 1.2rem !important; - transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); - z-index: 1100; - overflow-y: auto; - } - - nav.nav-open { - right: 0; - } - - nav a { - width: 100%; - padding: 0.75rem 1rem !important; - font-size: 1.05rem; - border-radius: 8px; - display: block; - text-align: left; - background: rgba(255, 255, 255, 0.05); - transition: background 0.2s ease; - box-shadow: none !important; - } - - nav a:hover, - nav a.active { - background: #e64a19 !important; - } - - /* Cart button inline layout inside drawer */ - .cart-btn-modern { - width: 100% !important; - justify-content: flex-start !important; - padding: 0.75rem 1rem !important; - background: rgba(255, 255, 255, 0.1) !important; - border-radius: 8px !important; - } - - /* Mobile search bar alignment */ - .search-bar { - margin-left: 0 !important; - width: 100% !important; - display: flex !important; - justify-content: flex-start !important; - margin-top: 0.5rem !important; - } - - .search-bar input { - width: 100% !important; - max-width: none !important; - } - - .theme-toggle { - margin-left: 0 !important; - margin-top: 0.5rem; - align-self: flex-start; - } - - .auth-nav-item { - width: 100%; - margin-left: 0 !important; - margin-top: 0.5rem; - } - - .login-btn-nav { - display: block !important; - text-align: center !important; - width: 100%; - } - - /* Dropdown accordions */ - .dropdown { - width: 100%; - } - - .dropdown-menu { - position: static !important; - opacity: 1 !important; - visibility: visible !important; - transform: none !important; - box-shadow: none !important; - padding-left: 1rem !important; - padding-top: 0.5rem !important; - display: none; - background: transparent !important; - border-radius: 0 !important; - border-left: 2px solid rgba(255, 255, 255, 0.2); - } - - .dropdown.open .dropdown-menu { - display: block !important; - } - - .dropdown-toggle::after { - margin-left: auto; - transition: transform 0.3s ease; - } - - .dropdown.open .dropdown-toggle::after { - transform: rotate(180deg); - } - - /* Hamburger transition to cross button */ - .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) { - transform: translateY(10.5px) rotate(45deg); - } - - .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { - opacity: 0; - } - - .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) { - transform: translateY(-10.5px) rotate(-45deg); - } -} - -/* Spacing and Responsive Layout Polish */ -@media (max-width: 768px) { - /* About Page Section Polish */ - .about-page { - padding-top: 3.5rem !important; - padding-bottom: 4rem !important; - } - - .about-desc-large { - font-size: 1.05rem !important; - margin-bottom: 2.5rem !important; - line-height: 1.7 !important; - } - - /* Testimonials layout adjustments */ - section.testimonials { - padding: 3.5rem 1rem 5rem !important; - } - - .testimonial { - max-width: 100% !important; - margin-bottom: 1rem; - } - - .testimonial-cards { - gap: 1.5rem !important; - } - - /* Team members layout */ - .team { - gap: 1.5rem !important; - } - - .team-member { - max-width: 100% !important; - height: 320px !important; - } - - /* Increase tap target sizes for filter and social icons on mobile */ - .filter-btn { - padding: 0.8rem 2rem !important; - } - - .footer-social-icons a { - width: 44px !important; - height: 44px !important; - font-size: 1.25rem !important; - } - - footer .social-icons a { - display: inline-flex !important; - min-width: 44px !important; - min-height: 44px !important; - align-items: center !important; - justify-content: center !important; - } -} - -/* Reduced Motion preferences */ -@media (prefers-reduced-motion: reduce) { - * { - animation-delay: 0s !important; - animation-duration: 0s !important; - animation-iteration-count: 1 !important; - transition-duration: 0s !important; - scroll-behavior: auto !important; - } - - .hero-bg-video, - .hero-badge, - .hero-content h1, - .hero-content p, - .hero-actions, - .hero-stat-card, - .hero-scroll-indicator span { - animation: none !important; - transition: none !important; - } - - .card:hover { - animation: none !important; - transform: translateY(-4px) !important; - } - - .card img { - transition: none !important; - transform: none !important; - } - - .filter-btn.active { - animation: none !important; - } - - .skeleton { - animation: none !important; - background: #f0e0d0 !important; - } - - .cart-item { - animation: none !important; - } - - .floating-food { - animation: none !important; - display: none !important; - } -} - - +.combo-item-right { + display: flex; + align-items: center; + gap: 10px; +} +} + +/* ===== Cinematic Video Hero ===== */ +.hero { + position: relative; + width: 100%; + min-height: calc(100vh - var(--header-height, 90px)); + height: calc(100vh - var(--header-height, 90px)); + padding: 0 8%; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0; + flex-wrap: nowrap; + overflow: hidden; + margin-bottom: 0; + background: #130a06; + text-align: left; +} + +.hero-video-stage, +.hero-bg-video, +.hero-overlay { + position: absolute; + inset: 0; +} + +.hero-video-stage { + z-index: 1; + background: #130a06; + overflow: hidden; +} + +.hero-video, +.hero-bg-video { + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0; + transform: scale(1.04); + transition: opacity 1.25s ease, transform 7s ease; + will-change: opacity, transform; +} + +.hero-bg-video.active { + opacity: 1; + transform: scale(1); +} + +.hero-overlay { + z-index: 2; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0.70) 0%, + rgba(0, 0, 0, 0.45) 45%, + rgba(0, 0, 0, 0.20) 100% + ); +} + +.hero-content { + position: relative; + z-index: 3; + flex: 0 0 min(650px, 52vw); + max-width: 650px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin: 0; + text-align: left; + color: #ffffff; +} + +.hero-badge, +.hero-secondary-btn, +.hero-stat-card { + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.22); + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.55rem; + width: fit-content; + margin-bottom: 1.4rem; + padding: 0.62rem 1rem; + border-radius: 999px; + color: rgba(255, 255, 255, 0.94); + font-size: 0.95rem; + font-weight: 700; + animation: heroFadeUp 0.75s ease both; +} + +.hero-title, +.hero-content h1 { + margin: 0 0 1.35rem; + color: #ffffff; + font-size: clamp(2.75rem, 4.4vw, 4.75rem); + font-weight: 800; + line-height: 1.05; + text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52); + letter-spacing: 0; + animation: heroFadeUp 0.85s ease 0.08s both; +} + +.hero-content p { + max-width: 550px; + margin: 0; + color: rgba(255, 255, 255, 0.85); + font-size: 1.1rem; + font-weight: 500; + line-height: 1.8; + text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); + animation: heroFadeUp 0.85s ease 0.2s both; +} + +.hero-actions { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 20px; + flex-wrap: wrap; + margin-top: 30px; + animation: heroFadeUp 0.85s ease 0.4s both; +} + +.hero-primary-btn, +.hero-secondary-btn { + min-width: 154px; + min-height: 54px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + padding: 0.95rem 1.65rem; + font-size: 1rem; + font-weight: 800; + line-height: 1; + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; +} + +.hero-primary-btn { + background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%); + color: #ffffff; + box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38); +} + +.hero-primary-btn:hover, +.hero-primary-btn:focus-visible { + background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%); + transform: translate3d(0, -3px, 0); + box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5); +} + +.hero-secondary-btn { + color: #ffffff; + border-color: rgba(255, 255, 255, 0.46); +} + +.hero-secondary-btn:hover, +.hero-secondary-btn:focus-visible { + transform: translate3d(0, -3px, 0); + border-color: rgba(255, 255, 255, 0.75); + box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); +} + +.hero-stats { + position: absolute; + z-index: 3; + top: 50%; + right: 8%; + width: 300px; + min-width: 0; + height: 370px; + transform: translateY(-50%); + pointer-events: none; +} + +.hero-stat-card { + position: absolute; + width: 230px; + min-width: 0; + display: flex; + align-items: center; + gap: 0.8rem; + padding: 0.95rem 1.05rem; + border-radius: 18px; + color: #ffffff; + animation: heroFloat 5.5s ease-in-out infinite; + will-change: transform; +} + +.hero-stat-card strong { + display: block; + color: #ffffff; + font-size: 1.1rem; + line-height: 1.1; +} + +.hero-stat-card span:last-child { + color: rgba(255, 255, 255, 0.78); + font-size: 0.9rem; + font-weight: 700; +} + +.hero-stat-icon { + width: 42px; + height: 42px; + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 42px; + border-radius: 50%; + background: rgba(255, 122, 31, 0.2); +} + +.hero-stat-rating { + top: 0; + right: 0; +} + +.hero-stat-delivery { + top: 130px; + right: 58px; + animation-delay: 0.8s; +} + +.hero-stat-orders { + top: 260px; + right: 0; + animation-delay: 1.6s; +} + +.hero-scroll-indicator { + position: absolute; + z-index: 3; + left: 50%; + bottom: 2rem; + width: 28px; + height: 46px; + display: inline-flex; + justify-content: center; + border: 1.5px solid rgba(255, 255, 255, 0.72); + border-radius: 999px; + transform: translateX(-50%); +} + +.hero-scroll-indicator span { + width: 5px; + height: 5px; + margin-top: 9px; + border-radius: 50%; + background: #ffffff; + animation: heroScrollDot 1.6s ease-in-out infinite; +} + +body.dark .hero { + background: #130a06; + color: #ffffff; +} + +body.dark .hero-content h1, +body.dark .hero-content p { + color: #ffffff; +} + +body.dark .hero-content p { + color: rgba(255, 255, 255, 0.85); +} + +.specials, +.menu, +.specials-section, +.menu-section { + position: relative; + z-index: 5; +} + +@keyframes heroFadeUp { + from { + opacity: 0; + transform: translate3d(0, 26px, 0); + } + + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +@keyframes heroFloat { + 0%, + 100% { + transform: translate3d(0, 0, 0); + } + + 50% { + transform: translate3d(0, -14px, 0); + } +} + +@keyframes heroScrollDot { + 0% { + opacity: 0; + transform: translateY(0); + } + + 35% { + opacity: 1; + } + + 100% { + opacity: 0; + transform: translateY(20px); + } +} + +@media (max-width: 1024px) { + .hero { + padding: 0 6%; + } + + .hero-stats { + right: 4%; + opacity: 0.92; + } +} + +@media (max-width: 768px) { + .hero { + min-height: calc(100vh - var(--header-height, 90px)); + height: auto; + padding: 3.5rem 1.25rem 4.5rem; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } + + .hero-overlay { + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.62) 0%, + rgba(0, 0, 0, 0.46) 48%, + rgba(0, 0, 0, 0.66) 100% + ); + } + + .hero-content { + max-width: 100%; + height: auto; + margin: 0 auto; + } + + .hero-badge, + .hero-actions { + margin-left: auto; + margin-right: auto; + } + + .hero-title, + .hero-content h1 { + font-size: clamp(2.45rem, 11vw, 3.65rem); + line-height: 1.05; + } + + .hero-content p { + margin-left: auto; + margin-right: auto; + font-size: 1.02rem; + line-height: 1.7; + } + + .hero-actions { + flex-direction: column; + width: min(100%, 360px); + } + + .hero-primary-btn, + .hero-secondary-btn { + width: 100%; + } + + .hero-stats { + position: relative; + top: auto; + right: auto; + width: min(100%, 360px); + min-width: 0; + margin: 2.2rem auto 0; + transform: none; + display: grid; + gap: 0.7rem; + } + + .hero-stat-card { + position: static; + min-width: 0; + width: 100%; + justify-content: flex-start; + border-radius: 16px; + animation-duration: 4.8s; + } +} + +@media (max-width: 480px) { + .hero { + padding-left: 1rem; + padding-right: 1rem; + } + + .hero-badge { + font-size: 0.82rem; + padding: 0.55rem 0.82rem; + } +} + +/* ===== COMPREHENSIVE ACCESSIBILITY & MOBILE RESPONSIVE NAV ===== */ + +/* Skip link styling */ +.skip-link { + position: absolute; + top: -60px; + left: 10px; + background: #bf360c; + color: white; + padding: 10px 20px; + z-index: 10000; + transition: top 0.2s ease; + font-weight: 700; + text-decoration: none; + border-radius: 0 0 8px 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); +} + +.skip-link:focus { + top: 0; + outline: 3px solid white; + outline-offset: -3px; +} + +/* Scroll lock when mobile drawer is open */ +body.nav-menu-open { + overflow: hidden; +} + +/* Hamburger toggle button */ +.mobile-nav-toggle { + display: none; + background: transparent; + border: none; + cursor: pointer; + padding: 0.5rem; + z-index: 1200; + flex-direction: column; + justify-content: space-between; + width: 32px; + height: 24px; +} + +.mobile-nav-toggle .hamburger-bar { + display: block; + width: 100%; + height: 3px; + background-color: white; + border-radius: 2px; + transition: transform 0.3s ease, opacity 0.3s ease; +} + +/* High-Contrast & Premium Glowing Focus Outlines */ +button:focus-visible, +a:focus-visible, +input:focus-visible, +textarea:focus-visible, +select:focus-visible { + outline: 3px solid #ff5722 !important; + outline-offset: 2px !important; + box-shadow: 0 0 12px rgba(255, 87, 34, 0.6) !important; + border-radius: 4px; +} + +header button:focus-visible, +header a:focus-visible, +header input:focus-visible { + outline: 3px solid #ffffff !important; + outline-offset: 2px !important; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; +} + +body.keyboard-nav button:focus, +body.keyboard-nav a:focus, +body.keyboard-nav input:focus, +body.keyboard-nav textarea:focus, +body.keyboard-nav select:focus { + outline: 3px solid #ff5722 !important; + outline-offset: 2px !important; + box-shadow: 0 0 12px rgba(255, 87, 34, 0.6) !important; +} + +body.keyboard-nav header button:focus, +body.keyboard-nav header a:focus, +body.keyboard-nav header input:focus { + outline: 3px solid #ffffff !important; + outline-offset: 2px !important; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; +} + +/* Card & Interactive Element Keyboard Focus Indicator Refinements */ +.card:focus-visible, +.team-member:focus-visible, +.testimonial:focus-visible { + outline: 3px solid #ff5722 !important; + outline-offset: 4px !important; + box-shadow: 0 0 15px rgba(255, 87, 34, 0.5) !important; +} + +/* Visual validation error states */ +input.input-error, +textarea.input-error { + border-color: #c0392b !important; + box-shadow: 0 0 10px rgba(192, 57, 43, 0.25) !important; +} + +input.input-error:focus, +textarea.input-error:focus { + border-color: #c0392b !important; + box-shadow: 0 0 12px rgba(192, 57, 43, 0.4) !important; + outline: none !important; +} + +/* Mobile responsive navigation styles */ +@media (max-width: 1024px) { + .mobile-nav-toggle { + display: flex; + } + + .header-inner { + padding: 0.8rem 1.5rem !important; + display: flex !important; + flex-direction: row !important; + justify-content: space-between !important; + align-items: center !important; + width: 100% !important; + gap: 0 !important; + } + + .logo { + margin-right: 0 !important; + font-size: 1.6rem !important; + } + + nav { + position: fixed; + top: 0; + right: -100%; + width: 290px; + height: 100vh; + background: #ff5722; + box-shadow: -8px 0 25px rgba(0, 0, 0, 0.15); + flex-direction: column; + align-items: flex-start !important; + justify-content: flex-start !important; + padding: 5.5rem 1.8rem 2rem !important; + gap: 1.2rem !important; + transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); + z-index: 1100; + overflow-y: auto; + } + + nav.nav-open { + right: 0; + } + + nav a { + width: 100%; + padding: 0.75rem 1rem !important; + font-size: 1.05rem; + border-radius: 8px; + display: block; + text-align: left; + background: rgba(255, 255, 255, 0.05); + transition: background 0.2s ease; + box-shadow: none !important; + } + + nav a:hover, + nav a.active { + background: #e64a19 !important; + } + + /* Cart button inline layout inside drawer */ + .cart-btn-modern { + width: 100% !important; + justify-content: flex-start !important; + padding: 0.75rem 1rem !important; + background: rgba(255, 255, 255, 0.1) !important; + border-radius: 8px !important; + } + + /* Mobile search bar alignment */ + .search-bar { + margin-left: 0 !important; + width: 100% !important; + display: flex !important; + justify-content: flex-start !important; + margin-top: 0.5rem !important; + } + + .search-bar input { + width: 100% !important; + max-width: none !important; + } + + .theme-toggle { + margin-left: 0 !important; + margin-top: 0.5rem; + align-self: flex-start; + } + + .auth-nav-item { + width: 100%; + margin-left: 0 !important; + margin-top: 0.5rem; + } + + .login-btn-nav { + display: block !important; + text-align: center !important; + width: 100%; + } + + /* Dropdown accordions */ + .dropdown { + width: 100%; + } + + .dropdown-menu { + position: static !important; + opacity: 1 !important; + visibility: visible !important; + transform: none !important; + box-shadow: none !important; + padding-left: 1rem !important; + padding-top: 0.5rem !important; + display: none; + background: transparent !important; + border-radius: 0 !important; + border-left: 2px solid rgba(255, 255, 255, 0.2); + } + + .dropdown.open .dropdown-menu { + display: block !important; + } + + .dropdown-toggle::after { + margin-left: auto; + transition: transform 0.3s ease; + } + + .dropdown.open .dropdown-toggle::after { + transform: rotate(180deg); + } + + /* Hamburger transition to cross button */ + .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) { + transform: translateY(10.5px) rotate(45deg); + } + + .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { + opacity: 0; + } + + .mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) { + transform: translateY(-10.5px) rotate(-45deg); + } +} + +/* Spacing and Responsive Layout Polish */ +@media (max-width: 768px) { + /* About Page Section Polish */ + .about-page { + padding-top: 3.5rem !important; + padding-bottom: 4rem !important; + } + + .about-desc-large { + font-size: 1.05rem !important; + margin-bottom: 2.5rem !important; + line-height: 1.7 !important; + } + + /* Testimonials layout adjustments */ + section.testimonials { + padding: 3.5rem 1rem 5rem !important; + } + + .testimonial { + max-width: 100% !important; + margin-bottom: 1rem; + } + + .testimonial-cards { + gap: 1.5rem !important; + } + + /* Team members layout */ + .team { + gap: 1.5rem !important; + } + + .team-member { + max-width: 100% !important; + height: 320px !important; + } + + /* Increase tap target sizes for filter and social icons on mobile */ + .filter-btn { + padding: 0.8rem 2rem !important; + } + + .footer-social-icons a { + width: 44px !important; + height: 44px !important; + font-size: 1.25rem !important; + } + + footer .social-icons a { + display: inline-flex !important; + min-width: 44px !important; + min-height: 44px !important; + align-items: center !important; + justify-content: center !important; + } +} + +/* Reduced Motion preferences */ +@media (prefers-reduced-motion: reduce) { + * { + animation-delay: 0s !important; + animation-duration: 0s !important; + animation-iteration-count: 1 !important; + transition-duration: 0s !important; + scroll-behavior: auto !important; + } + + .hero-bg-video, + .hero-badge, + .hero-content h1, + .hero-content p, + .hero-actions, + .hero-stat-card, + .hero-scroll-indicator span { + animation: none !important; + transition: none !important; + } + + .card:hover { + animation: none !important; + transform: translateY(-4px) !important; + } + + .card img { + transition: none !important; + transform: none !important; + } + + .filter-btn.active { + animation: none !important; + } + + .skeleton { + animation: none !important; + background: #f0e0d0 !important; + } + + .cart-item { + animation: none !important; + } + + .floating-food { + animation: none !important; + display: none !important; + } +} + + diff --git a/data/menu.json b/data/menu.json index 8044c14..56ac001 100644 --- a/data/menu.json +++ b/data/menu.json @@ -6,11 +6,9 @@ "price": 20, "image": "img/Aloo Samosa.png", "category": "Snacks", -newFeatures "price": 30, "originalPrice": 50, "spice": "Medium", - main "rating": 4.8, "spice": "Medium", "dietary": ["vegan"], @@ -35,12 +33,10 @@ newFeatures "price": 30, "image": "img/paani puri.png", "category": "Chaat", - newFeatures "price": 50, "originalPrice": 70, "rating": 4.9, -main "spice": "High", "dietary": ["vegan"], "available": true @@ -158,16 +154,11 @@ main "name": "Jalebi", "description": "Golden coiled sweet treat soaked in sugar syrup", "price": 20, -newFeatures -newFeatures "originalPrice": 35, "spice": "Low", - "image": "img/7.avif", "image": "img/jalebi.png", -main "category": "Snacks", - main "rating": 4.7, "spice": "Low", "dietary": ["vegan"], @@ -178,16 +169,11 @@ main "name": "Idli with Sambar", "description": "Fluffy steamed rice cakes served with spiced lentil vegetable stew", "price": 35, -newFeatures -newFeatures "originalPrice": 50, - "image": "img/8.avif", "image": "img/Idli with Sambar.png", - main "category": "Chaat", "rating": 4.8, - main "spice": "Medium", "dietary": ["vegan", "gluten-free"], "available": true @@ -223,12 +209,10 @@ newFeatures "price": 28, "image": "img/Sev Tameta.png", "category": "Chaat", -newFeatures "price": 45, "originalPrice": 70, "rating": 4.7, - main "spice": "High", "dietary": ["vegan"], "available": true diff --git a/js/main.js b/js/main.js index 0db96c1..c98740b 100644 --- a/js/main.js +++ b/js/main.js @@ -326,7 +326,6 @@ function createCard(item, highlightQuery = "") {
-newFeatures
₹${item.originalPrice} @@ -356,7 +355,6 @@ newFeatures
-main `; const addBtn = card.querySelector(".add-btn"); @@ -415,7 +413,6 @@ function renderRecentlyViewed() { recentItems.forEach(item => recentlyViewedContainer.appendChild(createCard(item))); } - newFeatures // Unified Interactive Filter Engine ===== function renderFavorites() { const favoritesContainer = document.getElementById("favorites-container"); @@ -952,7 +949,6 @@ window.reorderOrder = function (orderId) { sidebar.classList.add("open"); } }; - newFeatures // Cart Operations @@ -962,7 +958,6 @@ window.reorderOrder = function (orderId) { // ===== Toast Notification ===== -main function showToast(message) { const toast = document.getElementById("toast-notification"); if (!toast) return; From eb2d84efdce397f94caf9f099ea9b99080b0a292 Mon Sep 17 00:00:00 2001 From: Bhuvanesh S Date: Wed, 3 Jun 2026 17:41:38 +0530 Subject: [PATCH 5/5] [UX] Improve frontend quality, accessibility and responsive UX --- cart.html | 8 +-- css/style.css | 118 +++++++++++++++++++++++++++++++++---------- index.html | 4 ++ js/accessibility.js | 55 ++++++++++++-------- recommendations.html | 8 +-- 5 files changed, 137 insertions(+), 56 deletions(-) diff --git a/cart.html b/cart.html index 47fb467..60b2dc5 100644 --- a/cart.html +++ b/cart.html @@ -134,10 +134,10 @@

Your Cart

diff --git a/css/style.css b/css/style.css index 1d931ea..2f7b2b2 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,28 @@ +:root { + /* Premium Spacing Scale */ + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4.5rem; + --space-xxl: 6.5rem; + + /* Standardized Section Rhythm */ + --section-padding: var(--space-xxl) var(--space-sm); + --section-padding-tablet: var(--space-xl) var(--space-sm); + --section-padding-mobile: var(--space-lg) var(--space-sm); +} + +@media (max-width: 1024px) { + :root { + --section-padding: var(--section-padding-tablet); + } +} +@media (max-width: 768px) { + :root { + --section-padding: var(--section-padding-mobile); + } +} @font-face { font-family: 'Poppins'; @@ -670,7 +695,7 @@ /* ===== Hero Section ===== */ .hero { background: rgb(255, 228, 205); - padding: 5rem 1rem 6rem; + padding: var(--space-xl) var(--space-sm) var(--space-xxl); display: flex; justify-content: center; align-items: center; @@ -706,13 +731,17 @@ border-radius: 50px; box-shadow: 0 8px 25px rgb(255 87 34 / 0.4); border: none; - transition: background 0.3s ease, color 0.3s ease; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; } .btn-primary:hover { background: #ff6333; color: #fff; box-shadow: 0 10px 30px rgb(230 74 25 / 0.6); + transform: translateY(-2px); + } + .btn-primary:active { + transform: translateY(0) scale(0.97); } .hero-image { flex: 1 1 400px; @@ -731,7 +760,7 @@ section.specials, section.menu, section.recently-viewed { - padding: 4rem 1rem 5rem; + padding: var(--section-padding); background: #fff3e0; } .section-title { @@ -745,17 +774,17 @@ .cards { display: flex; flex-wrap: wrap; - gap: 2rem; + gap: var(--space-md); justify-content: center; } .menu-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - gap: 2rem; + gap: var(--space-md); justify-content: center; justify-items: center; width: 100%; - margin-top: 2rem; + margin-top: var(--space-md); } .card { background: white; @@ -765,21 +794,32 @@ display: flex; flex-direction: column; align-items: center; - padding: 1rem 1rem 1.8rem; - transition: transform 0.3s ease, box-shadow 0.3s ease; + padding: var(--space-sm) var(--space-sm) var(--space-md); + transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, box-shadow; user-select: none; cursor: default; } .card:hover { - transform: translateY(-8px); - box-shadow: 0 15px 35px rgb(0 0 0 / 0.2); + transform: translateY(-8px) scale(1.02); + box-shadow: 0 16px 40px rgba(255, 87, 34, 0.18); } - .add-btn{ - background-color: green; - padding: 3px 8px; - border-radius: 15px; + .add-btn { + background-color: #2e7d32; + padding: 6px 16px; + border-radius: 30px; color: white; border: none; + font-weight: 600; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + } + .add-btn:hover { + background-color: #1b5e20; + transform: scale(1.05); + box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3); + } + .add-btn:active { + transform: scale(0.95); } .card img { border-radius: 15px; @@ -844,13 +884,17 @@ border-radius: 50px; font-weight: 600; font-size: 1rem; - transition: all 0.3s ease; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .filter-btn.active, .filter-btn:hover { background: #ff5722; color: white; box-shadow: 0 6px 20px rgb(255 87 34 / 0.6); + transform: translateY(-1px); + } + .filter-btn:active { + transform: translateY(0) scale(0.97); } /* ===== Cart Sidebar ===== */ @@ -998,7 +1042,7 @@ /* ===== About Section ===== */ section.about { - padding: 5rem 1rem 7rem; + padding: var(--section-padding); background: white; color: #3e3e3e; user-select: text; @@ -1113,7 +1157,7 @@ /* ===== Contact Section ===== */ section.contact { - padding: 5rem 1rem 7rem; + padding: var(--section-padding); background: white; color: #3e3e3e; user-select: text; @@ -1202,17 +1246,22 @@ border-radius: 50px; border: none; box-shadow: 0 8px 25px rgb(255 87 34 / 0.7); - transition: background 0.3s ease; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; width: 100%; } .btn-submit:hover { background: #e64a19; + transform: translateY(-2px); + box-shadow: 0 10px 30px rgb(230 74 25 / 0.8); + } + .btn-submit:active { + transform: translateY(0) scale(0.97); } /* ===== Testimonials ===== */ section.testimonials { - padding: 5rem 1rem 7rem; + padding: var(--section-padding); background: #fff3e0; color: #3e2723; user-select: none; @@ -2957,14 +3006,7 @@ select:focus-visible { } } -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} + /* Dark mode support for better contrast */ @media (prefers-color-scheme: dark) { @@ -3616,6 +3658,28 @@ textarea.input-error:focus { outline: none !important; } +/* Navigation Drawer Backdrop Overlay */ +.nav-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + z-index: 1050; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1); + will-change: opacity, visibility; +} + +.nav-overlay.active { + opacity: 1; + visibility: visible; +} + /* Mobile responsive navigation styles */ @media (max-width: 1024px) { .mobile-nav-toggle { diff --git a/index.html b/index.html index a85b46d..dc6720e 100644 --- a/index.html +++ b/index.html @@ -896,6 +896,7 @@

@@ -903,6 +904,7 @@

@@ -910,6 +912,7 @@

@@ -917,6 +920,7 @@

diff --git a/js/accessibility.js b/js/accessibility.js index 687f287..1567c71 100644 --- a/js/accessibility.js +++ b/js/accessibility.js @@ -49,30 +49,47 @@ function setupMobileNavigation() { headerInner.insertBefore(toggleBtn, nav); + // Create backdrop overlay element + let overlay = document.querySelector('.nav-overlay'); + if (!overlay) { + overlay = document.createElement('div'); + overlay.className = 'nav-overlay'; + document.body.appendChild(overlay); + } + + function closeMenu() { + toggleBtn.setAttribute('aria-expanded', 'false'); + toggleBtn.setAttribute('aria-label', 'Open navigation menu'); + nav.classList.remove('nav-open'); + document.body.classList.remove('nav-menu-open'); + overlay.classList.remove('active'); + toggleBtn.focus(); + } + + function openMenu() { + toggleBtn.setAttribute('aria-expanded', 'true'); + toggleBtn.setAttribute('aria-label', 'Close navigation menu'); + nav.classList.add('nav-open'); + document.body.classList.add('nav-menu-open'); + overlay.classList.add('active'); + const firstLink = nav.querySelector('a'); + if (firstLink) setTimeout(() => firstLink.focus(), 100); + } + toggleBtn.addEventListener('click', () => { const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true'; - const nextState = !isExpanded; - toggleBtn.setAttribute('aria-expanded', String(nextState)); - toggleBtn.setAttribute('aria-label', nextState ? 'Close navigation menu' : 'Open navigation menu'); - nav.classList.toggle('nav-open', nextState); - document.body.classList.toggle('nav-menu-open', nextState); - - if (nextState) { - const firstLink = nav.querySelector('a'); - if (firstLink) setTimeout(() => firstLink.focus(), 100); + if (isExpanded) { + closeMenu(); } else { - toggleBtn.focus(); + openMenu(); } }); + overlay.addEventListener('click', closeMenu); + const navLinks = nav.querySelectorAll('a:not(.dropdown-toggle)'); navLinks.forEach(link => { - link.addEventListener('click', () => { - toggleBtn.setAttribute('aria-expanded', 'false'); - toggleBtn.setAttribute('aria-label', 'Open navigation menu'); - nav.classList.remove('nav-open'); - document.body.classList.remove('nav-menu-open'); - }); + link.addEventListener('click', closeMenu); }); // Dropdown accordions for mobile menu @@ -107,11 +124,7 @@ function setupMobileNavigation() { if (e.key === 'Escape') { e.preventDefault(); - toggleBtn.setAttribute('aria-expanded', 'false'); - toggleBtn.setAttribute('aria-label', 'Open navigation menu'); - nav.classList.remove('nav-open'); - document.body.classList.remove('nav-menu-open'); - toggleBtn.focus(); + closeMenu(); } if (e.key === 'Tab') { diff --git a/recommendations.html b/recommendations.html index c2206e2..0eebbb2 100644 --- a/recommendations.html +++ b/recommendations.html @@ -309,19 +309,19 @@