diff --git a/Profice WebSite/scripts/tech-onepager.js b/Profice WebSite/scripts/tech-onepager.js index 7b70e10..2a6c6a4 100644 --- a/Profice WebSite/scripts/tech-onepager.js +++ b/Profice WebSite/scripts/tech-onepager.js @@ -562,8 +562,10 @@ document.addEventListener('DOMContentLoaded', function() { // ===== SMOOTH SCROLL FOR INTERNAL LINKS ===== document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { + const href = this.getAttribute('href'); + if (!href || href === '#') return; e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); + const target = document.querySelector(href); if (target) { target.scrollIntoView({ behavior: 'smooth', diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css index 2e3b8d1..b2e7a05 100644 --- a/Profice WebSite/style/design.css +++ b/Profice WebSite/style/design.css @@ -55,6 +55,13 @@ --widget-shadow: 0 4px 20px rgba(90, 82, 82, 0.1); } +/* Cookiebot Banner - Force to bottom of screen */ +#CybotCookiebotDialog { + top: auto !important; + bottom: 0 !important; + position: fixed !important; +} + * { margin: 0; padding: 0; @@ -655,7 +662,7 @@ body { } .logo { - height: 100px; + height: 40px; width: auto; } } @@ -1744,11 +1751,65 @@ body { .demo-widgets-grid { grid-template-columns: 1fr; gap: 30px; - padding: 0 20px; + padding: 0 15px; } .demo-widget { - padding: 30px; + padding: 25px; + min-height: auto; + } + + .demo-section-title { + font-size: 1.8rem; + } + + .demo-section-subtitle { + font-size: 0.95rem; + margin-bottom: 30px; + padding: 0 10px; + } + + .ki-demo-section { + padding: 20px 0 40px 0; + margin-top: -20px; + } + + .demo-icon-circle { + width: 60px; + height: 60px; + } + + .demo-icon-circle img { + width: 36px !important; + height: 36px !important; + } + + .sound-visualization { + margin-top: 40px; + height: 60px; + } +} + +@media (max-width: 480px) { + .demo-widgets-grid { + padding: 0 10px; + gap: 20px; + } + + .demo-widget { + padding: 20px; + } + + .demo-section-title { + font-size: 1.5rem; + } + + .pricing-box { + padding: 30px 20px; + } + + .pricing-value { + font-size: 2.2rem; } } diff --git a/Profice WebSite/style/tech-onepager.css b/Profice WebSite/style/tech-onepager.css index a34db9f..08d6447 100644 --- a/Profice WebSite/style/tech-onepager.css +++ b/Profice WebSite/style/tech-onepager.css @@ -160,8 +160,8 @@ border-radius: 8px; padding: 4px; min-width: 40px; - width: 40px; - height: 120px; + width: auto; + height: auto; text-align: center; backdrop-filter: blur(15px); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); @@ -2376,16 +2376,76 @@ } } -@media (max-width: 1024px) { +/* Non-16:9 wide screens and landscape tablets (1024-1366px) */ +@media (max-width: 1366px) and (min-width: 1025px) { .hero-container { - grid-template-columns: 1fr; - gap: 60px; - text-align: center; + max-width: 1100px; + gap: 40px; } .hero-right { - height: 400px; + height: 420px; + } + + .hero-headline { + font-size: clamp(2rem, 3.5vw, 3rem); + } + + .hero-subline, + .hero-proof { + font-size: 1.1rem; + } + + .node { + min-width: 80px; + padding: 8px; + } + + .central-node { + min-width: 130px; + max-width: 150px; + } +} + +/* 4:3 and portrait-ish aspect ratio handling */ +@media (max-aspect-ratio: 4/3) and (min-width: 769px) { + .hero-section { + min-height: auto; + padding-top: 100px; + padding-bottom: 40px; + } + + .hero-container { + gap: 30px; + } + + .hero-right { + height: 380px; + } +} + +@media (max-width: 1024px) { + .hero-container { + grid-template-columns: 1fr; + gap: 40px; + text-align: center; + } + + .hero-left { + max-width: 100%; + } + + .hero-right { + height: 380px; order: -1; + max-width: 600px; + margin: 0 auto; + width: 100%; + } + + .system-graphic { + max-width: 100%; + overflow: visible; } .system-details { @@ -2475,9 +2535,11 @@ /* Hero right (system graphic) comes AFTER hero left (text) on mobile */ .hero-right { - height: 320px; + height: 350px; margin-top: 10px; order: 1; + max-width: 100%; + overflow: hidden; } .hero-left { @@ -2485,14 +2547,15 @@ } .system-graphic { - transform: scale(0.85); - width: 120%; - margin-left: -10%; + transform: scale(0.75); + transform-origin: center center; + width: 100%; + margin-left: 0; } .central-node { - min-width: 120px; - max-width: 140px; + min-width: 110px; + max-width: 130px; padding: 8px 14px; border-radius: 18px; } @@ -2506,49 +2569,56 @@ } .node { - min-width: 85px; - padding: 10px; + min-width: 70px; + padding: 8px; font-size: 0.8rem; } .node-icon { - font-size: 1.3rem; + font-size: 1.2rem; + } + + .node .node-icon img { + width: 36px !important; + height: 36px !important; } .node-label { - font-size: 0.75rem; + font-size: 0.7rem; } - /* Compact circular layout for mobile */ + /* Compact circular layout for mobile - adjusted spacing */ .phone-node { - top: 5%; + top: 2%; left: 50%; transform: translateX(-50%); } .chat-node { - top: 25%; - right: 5%; + top: 20%; + right: 2%; left: auto; transform: none; } .crm-node { - bottom: 25%; - right: 5%; + bottom: 20%; + right: 2%; + top: auto; left: auto; transform: none; } .ticket-node { - bottom: 5%; + bottom: 2%; left: 50%; + top: auto; transform: translateX(-50%); } .team-node { - top: 25%; - left: 5%; + top: 20%; + left: 2%; right: auto; transform: none; } @@ -2557,11 +2627,11 @@ /* Extra small screens */ @media (max-width: 480px) { .hero-section { - padding: 80px 12px 25px; + padding: 80px 10px 20px; } .hero-headline { - font-size: 1.4rem; + font-size: 1.3rem; } .hero-subline, @@ -2572,35 +2642,50 @@ .hero-right { height: 300px; + overflow: hidden; } .system-graphic { - transform: scale(0.8); - width: 130%; - margin-left: -15%; + transform: scale(0.65); + transform-origin: center center; + width: 100%; + margin-left: 0; } .central-node { - min-width: 110px; - max-width: 130px; - padding: 7px 12px; + min-width: 100px; + max-width: 120px; + padding: 6px 10px; } .node { - min-width: 75px; - padding: 8px; + min-width: 65px; + padding: 6px; + } + + .node .node-icon img { + width: 30px !important; + height: 30px !important; } .node-icon { - font-size: 1.2rem; + font-size: 1rem; } .node-label { - font-size: 0.7rem; + font-size: 0.65rem; } .cta-btn { padding: 10px 16px; font-size: 0.9rem; } + + .data-card { + padding: 20px; + } + + .card-metric { + font-size: 2.2rem; + } }