diff --git a/Frontend/index.html b/Frontend/index.html
index 01f3eb9..2704020 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -29,29 +29,40 @@
+
diff --git a/Frontend/script.js b/Frontend/script.js
index 1c044ca..71f4518 100644
--- a/Frontend/script.js
+++ b/Frontend/script.js
@@ -263,3 +263,53 @@ if (scrollTopBtn) {
});
});
}
+
+(function () {
+ const navToggle = document.querySelector('.mobile-nav-toggle');
+ const mobileMenu = document.getElementById('mobile-menu');
+ const overlay = document.querySelector('.mobile-nav-overlay');
+ const menuLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
+
+ if (!navToggle || !mobileMenu || !overlay) {
+ return;
+ }
+
+ const closeMenu = () => {
+ navToggle.setAttribute('aria-expanded', 'false');
+ navToggle.setAttribute('aria-label', 'Open navigation menu');
+ mobileMenu.classList.remove('open');
+ mobileMenu.setAttribute('aria-hidden', 'true');
+ overlay.classList.remove('show');
+ document.body.classList.remove('mobile-nav-open');
+ };
+
+ const openMenu = () => {
+ navToggle.setAttribute('aria-expanded', 'true');
+ navToggle.setAttribute('aria-label', 'Close navigation menu');
+ mobileMenu.classList.add('open');
+ mobileMenu.setAttribute('aria-hidden', 'false');
+ overlay.classList.add('show');
+ document.body.classList.add('mobile-nav-open');
+ };
+
+ navToggle.addEventListener('click', () => {
+ const isOpen = navToggle.getAttribute('aria-expanded') === 'true';
+ if (isOpen) {
+ closeMenu();
+ } else {
+ openMenu();
+ }
+ });
+
+ overlay.addEventListener('click', closeMenu);
+
+ menuLinks.forEach(link => {
+ link.addEventListener('click', closeMenu);
+ });
+
+ window.addEventListener('keydown', event => {
+ if (event.key === 'Escape' && mobileMenu.classList.contains('open')) {
+ closeMenu();
+ }
+ });
+})();
diff --git a/Frontend/style.css b/Frontend/style.css
index ddf221e..3e0b94c 100644
--- a/Frontend/style.css
+++ b/Frontend/style.css
@@ -133,16 +133,19 @@ body::before {
z-index: 1;
width: min(1240px, calc(100% - 32px));
margin: 0 auto;
- padding: 24px 0 32px;
+ padding: 96px 0 32px;
}
.navbar {
display: flex;
align-items: center;
- position:fixed;
- z-index: 2;
justify-content: space-between;
- gap: 20px;
+ position: fixed;
+ top: 16px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 1000;
+ gap: 16px;
padding: 16px 22px;
flex-wrap: wrap;
border: 1px solid rgba(255, 255, 255, 0.12);
@@ -150,10 +153,94 @@ body::before {
background: var(--panel-strong);
backdrop-filter: blur(18px);
box-shadow: var(--shadow);
- margin-bottom: 28px;
- width: calc(100% - 32px);
- max-width: 1200px; /* caps it on large screens */
- margin: 0 auto;
+ width: min(100% - 32px, 1200px);
+ margin: 0 auto;
+}
+
+.navbar .brand-marks {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+}
+
+.nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.mobile-nav-toggle {
+ display: none;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ background: var(--panel);
+ color: var(--text);
+ width: 44px;
+ height: 44px;
+ border-radius: 14px;
+ cursor: pointer;
+ font-size: 1.2rem;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.mobile-nav-toggle:hover,
+.mobile-nav-toggle:focus-visible {
+ transform: scale(1.04);
+ outline: none;
+}
+
+.mobile-nav-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(15, 23, 42, 0.55);
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.25s ease;
+ z-index: 990;
+}
+
+.mobile-nav-overlay.show {
+ opacity: 1;
+ visibility: visible;
+}
+
+.nav-links {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ flex-wrap: nowrap;
+}
+
+.nav-links a,
+.footer-links a {
+ color: var(--muted);
+ text-decoration: none;
+ font-weight: 500;
+ transition:
+ color 0.2s ease,
+ transform 0.2s ease;
+}
+
+.nav-links a:hover,
+.footer-links a:hover,
+.contact-links a:hover {
+ color: white;
+ transform: translateY(-1px);
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
}
body.light-mode .navbar {
@@ -558,8 +645,8 @@ body.light-mode .navbar {
}
.hero-copy h1 {
- font-size: clamp(2.6rem, 5vw, 5rem);
- line-height: 0.98;
+ font-size: clamp(2.2rem, 6.5vw, 4.8rem);
+ line-height: 1.03;
letter-spacing: -0.02em;
max-width: 10.5ch;
}
@@ -567,8 +654,8 @@ body.light-mode .navbar {
.hero-copy p {
margin-top: 18px;
max-width: 58ch;
- font-size: 1.05rem;
- line-height: 1.8;
+ font-size: clamp(1rem, 2.2vw, 1.1rem);
+ line-height: 1.85;
color: var(--muted);
}
@@ -1100,7 +1187,7 @@ body.light-mode .navbar {
}
.page-shell {
width: min(100% - 20px, 1240px);
- padding-top: 14px;
+ padding-top: 96px;
}
.navbar,
@@ -1211,86 +1298,177 @@ body.light-mode .navbar {
color: #1a202c;
}
-@media (max-width: 480px) {
+@media (max-width: 820px) {
.button-group {
flex-direction: column;
width: 100%;
}
-.navbar{
-
- display:flex;
- position: fixed;
- align-items: center;
- align-content: center;
- justify-content: center;
- }
- .hero-copy{
+
+ .hero-copy {
margin-top: 30vh;
}
- .hero-actions
- {
+
+ .hero-actions {
display: flex;
- justify-content:space-around;
+ justify-content: space-around;
}
+
.btn-primary,
.btn-secondary {
text-align: center;
justify-content: center;
}
-/* Capability cards — same white-alpha issue */
-[data-theme="light"] .capability-card {
- background: #ffffff;
- border-color: rgba(0, 0, 0, 0.09);
-}
-[data-theme="light"] .capability-card:hover {
- background: #f1f5f9;
-}
+ .navbar {
+ padding: 14px 16px;
+ }
-/* Contact links (#dbeafe pale blue → readable dark blue) */
-[data-theme="light"] .contact-links a {
- color: #0369a1;
-}
-[data-theme="light"] .contact-links a:hover {
- color: #075985;
-}
+ .hero-copy h1 {
+ font-size: clamp(2rem, 10vw, 3.4rem);
+ max-width: 100%;
+ }
-/* Chatbot panel — dark glassy bg → white */
-[data-theme="light"] .chatbot-panel {
- background: rgba(255, 255, 255, 0.97);
- border-color: rgba(0, 0, 0, 0.1);
-}
+ .hero-stats {
+ grid-template-columns: 1fr;
+ }
-/* Bot message bubble (#dbeafe pale blue → dark text) */
-[data-theme="light"] .bot-message {
- background: rgba(56, 189, 248, 0.1);
- border-color: rgba(56, 189, 248, 0.25);
- color: #0c4a6e;
-}
+ .hero-actions {
+ width: 100%;
+ }
-/* User message bubble (#dcfce7 pale green → dark text) */
-[data-theme="light"] .user-message {
- background: rgba(34, 197, 94, 0.1);
- border-color: rgba(34, 197, 94, 0.25);
- color: #14532d;
-}
+ .nav-links {
+ width: 100%;
+ }
-/* Chatbot status text (#fcd34d yellow → dark amber) */
-[data-theme="light"] .chatbot-status {
- color: #92400e;
-}
+ .nav-actions {
+ gap: 10px;
+ }
-/* Feature box */
-[data-theme="light"] .feature-box {
- background: rgba(0, 0, 0, 0.04);
- color: var(--text);
-}
+ .hero-strip {
+ padding: 10px 0 0;
+ }
-/* Nav link hover — ensure white text doesn't appear on light bg */
-[data-theme="light"] .nav-links a:hover,
-[data-theme="light"] .footer-links a:hover {
- color: #0369a1;
-}
+ .mobile-nav-toggle {
+ display: inline-flex;
+ }
+
+ .nav-links {
+ position: absolute;
+ top: calc(100% + 12px);
+ left: 16px;
+ right: 16px;
+ width: auto;
+ flex-direction: column;
+ gap: 10px;
+ padding: 18px;
+ border-radius: 20px;
+ background: var(--panel);
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-10px);
+ transition: opacity 0.25s ease, transform 0.25s ease;
+ z-index: 1001;
+ }
+
+ .nav-links.open {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+ }
+
+ .nav-links a {
+ display: block;
+ padding: 14px 16px;
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.04);
+ color: var(--text);
+ }
+
+ .nav-links a:hover,
+ .nav-links a:focus-visible {
+ color: white;
+ background: rgba(255, 255, 255, 0.08);
+ transform: none;
+ }
+
+ .nav-actions {
+ width: 100%;
+ justify-content: flex-end;
+ }
+
+ .theme-toggle {
+ width: 44px;
+ height: 44px;
+ }
+
+ .nav-cta {
+ padding: 12px 16px;
+ }
+
+ .mobile-nav-overlay.show {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ [data-theme="light"] .nav-links a:hover {
+ color: #0369a1;
+ }
+
+ /* Capability cards — same white-alpha issue */
+ [data-theme="light"] .capability-card {
+ background: #ffffff;
+ border-color: rgba(0, 0, 0, 0.09);
+ }
+ [data-theme="light"] .capability-card:hover {
+ background: #f1f5f9;
+ }
+
+ /* Contact links (#dbeafe pale blue → readable dark blue) */
+ [data-theme="light"] .contact-links a {
+ color: #0369a1;
+ }
+ [data-theme="light"] .contact-links a:hover {
+ color: #075985;
+ }
+
+ /* Chatbot panel — dark glassy bg → white */
+ [data-theme="light"] .chatbot-panel {
+ background: rgba(255, 255, 255, 0.97);
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+
+ /* Bot message bubble (#dbeafe pale blue → dark text) */
+ [data-theme="light"] .bot-message {
+ background: rgba(56, 189, 248, 0.1);
+ border-color: rgba(56, 189, 248, 0.25);
+ color: #0c4a6e;
+ }
+
+ /* User message bubble (#dcfce7 pale green → dark text) */
+ [data-theme="light"] .user-message {
+ background: rgba(34, 197, 94, 0.1);
+ border-color: rgba(34, 197, 94, 0.25);
+ color: #14532d;
+ }
+
+ /* Chatbot status text (#fcd34d yellow → dark amber) */
+ [data-theme="light"] .chatbot-status {
+ color: #92400e;
+ }
+
+ /* Feature box */
+ [data-theme="light"] .feature-box {
+ background: rgba(0, 0, 0, 0.04);
+ color: var(--text);
+ }
+
+ /* Nav link hover — ensure white text doesn't appear on light bg */
+ [data-theme="light"] .nav-links a:hover,
+ [data-theme="light"] .footer-links a:hover {
+ color: #0369a1;
+ }
}
/* Scroll to Top Button */