diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html index c037094..1089b2d 100644 --- a/Profice WebSite/index.html +++ b/Profice WebSite/index.html @@ -57,15 +57,15 @@ - - - + + + - - - - + + + + @@ -111,9 +111,24 @@ + + +
+ +
+
@@ -555,13 +570,13 @@ - - - - - - - + + + + + + + diff --git a/Profice WebSite/scripts/hex-background.js b/Profice WebSite/scripts/hex-background.js index 980f138..9c46a8a 100644 --- a/Profice WebSite/scripts/hex-background.js +++ b/Profice WebSite/scripts/hex-background.js @@ -103,6 +103,9 @@ // Initialize function init() { + // Skip animation on mobile/touch devices for performance + if (window.innerWidth <= 768 || ('ontouchstart' in window)) return; + canvas = document.getElementById('hexCanvas'); if (!canvas) return; diff --git a/Profice WebSite/scripts/script.js b/Profice WebSite/scripts/script.js index 286b121..776de49 100644 --- a/Profice WebSite/scripts/script.js +++ b/Profice WebSite/scripts/script.js @@ -6,7 +6,51 @@ */ document.addEventListener("DOMContentLoaded", function() { - + + // ========================================== + // MOBILE HAMBURGER MENU + // ========================================== + + function initHamburgerMenu() { + const hamburgerBtn = document.getElementById('hamburgerBtn'); + const mobileNavOverlay = document.getElementById('mobileNavOverlay'); + if (!hamburgerBtn || !mobileNavOverlay) return; + + function openNav() { + mobileNavOverlay.style.display = 'flex'; + requestAnimationFrame(() => { + mobileNavOverlay.classList.add('open'); + }); + hamburgerBtn.classList.add('open'); + document.body.style.overflow = 'hidden'; + } + + function closeNav() { + mobileNavOverlay.classList.remove('open'); + hamburgerBtn.classList.remove('open'); + document.body.style.overflow = ''; + setTimeout(() => { + if (!mobileNavOverlay.classList.contains('open')) { + mobileNavOverlay.style.display = 'none'; + } + }, 300); + } + + hamburgerBtn.addEventListener('click', () => { + if (mobileNavOverlay.classList.contains('open')) { + closeNav(); + } else { + openNav(); + } + }); + + mobileNavOverlay.querySelectorAll('.mobile-nav-link').forEach(link => { + link.addEventListener('click', closeNav); + }); + } + + initHamburgerMenu(); + // ========================================== // SOUND VISUALIZATION ANIMATION // ========================================== diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css index 914a842..92752da 100644 --- a/Profice WebSite/style/design.css +++ b/Profice WebSite/style/design.css @@ -1134,49 +1134,127 @@ body { } } +/* Hamburger Button */ +.hamburger-btn { + display: none; + flex-direction: column; + justify-content: space-between; + width: 40px; + height: 30px; + background: transparent; + border: none; + cursor: pointer; + padding: 0; + flex-shrink: 0; +} + +.hamburger-btn span { + display: block; + width: 100%; + height: 3px; + background: var(--primary-light); + border-radius: 3px; + transition: all 0.3s ease; + transform-origin: left center; +} + +.hamburger-btn.open span:nth-child(1) { + transform: rotate(45deg) translate(1px, -1px); +} +.hamburger-btn.open span:nth-child(2) { + opacity: 0; + transform: scaleX(0); +} +.hamburger-btn.open span:nth-child(3) { + transform: rotate(-45deg) translate(1px, 1px); +} + +/* Mobile Nav Overlay */ +.mobile-nav-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(90, 82, 82, 0.97); + z-index: 1002; + flex-direction: column; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.mobile-nav-overlay.open { + opacity: 1; +} + +.mobile-nav-menu { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.mobile-nav-link { + color: var(--primary-light); + text-decoration: none; + font-size: 1.6rem; + font-weight: 600; + transition: color 0.2s ease; +} + +.mobile-nav-link:hover { + color: var(--accent-teal); +} + /* Navigation responsive */ @media (max-width: 768px) { .main-nav { display: none; } - + + .hamburger-btn { + display: flex; + } + + #cursorToggle { + display: none; + } + .top-banner { justify-content: space-between; height: 70px; padding: 5px 15px; } - + .top-banner.scrolled { height: 60px; padding: 5px 12px; } - + .banner-left { flex: 1; gap: 10px; } - + .logo { height: 40px; } - + .top-banner.scrolled .logo { height: 32px; } - - .top-banner.scrolled #cursorToggle { - width: 32px; - height: 32px; - } - - .cursor-icon { - width: 32px; - height: 32px; - } - + .opening-hours { display: none; } + + .container { + padding-left: 15px; + padding-right: 15px; + } } @media (max-width: 480px) { @@ -1184,28 +1262,18 @@ body { height: 60px; padding: 5px 10px; } - + .top-banner.scrolled { height: 55px; } - + .logo { height: 35px; } - + .top-banner.scrolled .logo { height: 28px; } - - #cursorToggle { - width: 34px; - height: 34px; - } - - .cursor-icon { - width: 26px; - height: 26px; - } } /* Footer Banner Styles */ @@ -2068,10 +2136,17 @@ body { } @media (max-width: 768px) { + .problems-section, + .fit-section, + .pricing-section { + padding-left: 15px; + padding-right: 15px; + } + .problems-grid { grid-template-columns: 1fr; } - + .problems-headline { font-size: 1.8rem; } diff --git a/Profice WebSite/style/tech-onepager.css b/Profice WebSite/style/tech-onepager.css index 1496904..f479955 100644 --- a/Profice WebSite/style/tech-onepager.css +++ b/Profice WebSite/style/tech-onepager.css @@ -2495,30 +2495,36 @@ padding: 90px 15px 30px; min-height: auto; } - + .hero-headline { font-size: 1.6rem; line-height: 1.3; margin-bottom: 16px; } - + .hero-subline { + display: block; font-size: 0.95rem; padding: 12px 14px; margin-bottom: 12px; + width: 100%; + box-sizing: border-box; } - + .hero-proof { + display: block; font-size: 0.9rem; padding: 10px 14px; margin-bottom: 20px; + width: 100%; + box-sizing: border-box; } - + .hero-buttons { justify-content: center; gap: 12px; } - + .cta-btn { padding: 12px 20px; font-size: 0.95rem;