8

Profice WebSite/scripts/tech-onepager.js

@@ -21,8 +21,26 @@ document.addEventListener('DOMContentLoaded', function() {
         const nodes = systemGraphic.querySelectorAll('.node');
         const centralNode = systemGraphic.querySelector('.central-node');
         
-        // Draw connection lines
+        // Draw connection lines after layout is complete
-        drawConnections();
+        requestAnimationFrame(() => {
+            requestAnimationFrame(drawConnections);
+        });
+        
+        // Also redraw after a short delay for CSS transitions
+        setTimeout(drawConnections, 300);
+        setTimeout(drawConnections, 600);
+        
+        // Redraw on resize
+        let resizeTimeout;
+        window.addEventListener('resize', function() {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(drawConnections, 100);
+        });
+        
+        // Redraw on orientation change (mobile)
+        window.addEventListener('orientationchange', function() {
+            setTimeout(drawConnections, 300);
+        });
         
         // Initialize tooltip system
         initializeTooltips();
@@ -139,19 +157,30 @@ document.addEventListener('DOMContentLoaded', function() {
         const centralNode = systemGraphic.querySelector('.central-node');
         const otherNodes = systemGraphic.querySelectorAll('.node:not(.central-node)');
         
-        const centralRect = centralNode.getBoundingClientRect();
+        if (!centralNode || !systemGraphic) return;
-        const graphicRect = systemGraphic.getBoundingClientRect();
         
+        const graphicRect = systemGraphic.getBoundingClientRect();
+        const centralRect = centralNode.getBoundingClientRect();
+        
+        // Calculate center position relative to the graphic container
         const centerX = centralRect.left - graphicRect.left + centralRect.width / 2;
         const centerY = centralRect.top - graphicRect.top + centralRect.height / 2;
         
+        // Set SVG viewBox to match container
+        connections.setAttribute('viewBox', `0 0 ${graphicRect.width} ${graphicRect.height}`);
+        connections.style.width = '100%';
+        connections.style.height = '100%';
+        
         connections.innerHTML = '';
         
         otherNodes.forEach(node => {
             const nodeRect = node.getBoundingClientRect();
+            
+            // Calculate node center position relative to the graphic container
             const nodeX = nodeRect.left - graphicRect.left + nodeRect.width / 2;
             const nodeY = nodeRect.top - graphicRect.top + nodeRect.height / 2;
             
+            // Create dashed line for better visibility
             const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
             line.setAttribute('x1', centerX);
             line.setAttribute('y1', centerY);

Profice WebSite/style/design.css

@@ -1,10 +1,10 @@
 :root {
-    --primary-dark: #4F4747;
+    --primary-dark: #5a5252;
     --primary-light: #EBEBDE;
-    --primary-mid: #777764;
+    --primary-mid: #8a8a7a;
-    --accent-orange: #F57C00;
+    --accent-orange: #d4864a;
-    --accent-teal: #26A69A;
+    --accent-teal: #5a9e96;
-    --accent-green: #66BB6A;
+    --accent-green: #7fb882;
 }
 
 * {
@@ -1121,10 +1121,51 @@ body {
     
     .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;
+    }
+    
+    .menu-toggle {
+        width: 38px;
+        height: 38px;
+    }
+    
+    .top-banner.scrolled .menu-toggle {
+        width: 32px;
+        height: 32px;
+    }
+    
+    #cursorToggle {
+        width: 38px;
+        height: 38px;
+    }
+    
+    .top-banner.scrolled #cursorToggle {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .cursor-icon {
+        width: 32px;
+        height: 32px;
     }
     
     .opening-hours {
@@ -1132,6 +1173,36 @@ body {
     }
 }
 
+@media (max-width: 480px) {
+    .top-banner {
+        height: 60px;
+        padding: 5px 10px;
+    }
+    
+    .top-banner.scrolled {
+        height: 55px;
+    }
+    
+    .logo {
+        height: 35px;
+    }
+    
+    .top-banner.scrolled .logo {
+        height: 28px;
+    }
+    
+    .menu-toggle,
+    #cursorToggle {
+        width: 34px;
+        height: 34px;
+    }
+    
+    .cursor-icon {
+        width: 28px;
+        height: 28px;
+    }
+}
+
 /* Footer Banner Styles */
 .footer-banner {
     background: rgba(42, 42, 42, 0.85) !important;

Profice WebSite/style/tech-onepager.css

@@ -2224,15 +2224,36 @@
 
 @media (max-width: 768px) {
     .hero-section {
-        padding: 100px 20px 40px;
+        padding: 90px 15px 30px;
+        min-height: auto;
     }
     
     .hero-headline {
-        font-size: 2rem;
+        font-size: 1.6rem;
+        line-height: 1.3;
+        margin-bottom: 16px;
+    }
+    
+    .hero-subline {
+        font-size: 0.95rem;
+        padding: 12px 14px;
+        margin-bottom: 12px;
+    }
+    
+    .hero-proof {
+        font-size: 0.9rem;
+        padding: 10px 14px;
+        margin-bottom: 20px;
     }
     
     .hero-buttons {
         justify-content: center;
+        gap: 12px;
+    }
+    
+    .cta-btn {
+        padding: 12px 20px;
+        font-size: 0.95rem;
     }
     
     .systeme-section,
@@ -2240,11 +2261,11 @@
     .process-section,
     .results-section,
     .interaction-section {
-        padding: 60px 20px;
+        padding: 40px 15px;
     }
     
     .section-headline {
-        font-size: 2rem;
+        font-size: 1.6rem;
     }
     
     .systeme-grid {
@@ -2252,93 +2273,134 @@
     }
     
     .results-grid {
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-template-columns: 1fr;
     }
     
     .process-line {
         flex-direction: column;
-        gap: 20px;
+        gap: 15px;
     }
     
     .process-connector {
         width: 3px;
-        height: 60px;
+        height: 40px;
     }
     
     .hero-container {
         grid-template-columns: 1fr;
-        gap: 40px;
+        gap: 25px;
         text-align: center;
     }
     
+    /* Hero right (system graphic) comes AFTER hero left (text) on mobile */
     .hero-right {
-        height: 400px;
+        height: 320px;
-        margin-top: 40px;
+        margin-top: 10px;
+        order: 1;
+    }
+    
+    .hero-left {
+        order: 0;
     }
     
     .system-graphic {
-        transform: scale(0.9);
+        transform: scale(0.75);
-        width: 110%;
+        width: 130%;
-        margin-left: -5%;
+        margin-left: -15%;
     }
     
     .central-node {
-        min-width: 120px;
+        min-width: 100px;
-        max-width: 140px;
+        max-width: 120px;
-        padding: 8px 16px;
+        padding: 6px 12px;
-        border-radius: 20px;
+        border-radius: 16px;
     }
     
     .central-node .node-icon {
-        font-size: 1rem;
+        font-size: 0.9rem;
     }
     
     .central-node .node-label {
-        font-size: 0.75rem;
+        font-size: 0.65rem;
     }
     
     .node {
-        min-width: 90px;
+        min-width: 70px;
-        padding: 10px;
+        padding: 8px;
-        font-size: 0.8rem;
+        font-size: 0.7rem;
     }
     
     .node-icon {
-        font-size: 1.2rem;
+        font-size: 1rem;
     }
     
     .node-label {
-        font-size: 0.75rem;
+        font-size: 0.65rem;
     }
     
     /* Compact circular layout for mobile */
     .phone-node {
-        top: 10%;
+        top: 5%;
         left: 50%;
-        transform: translateX(-50%) scale(0.9);
+        transform: translateX(-50%) scale(0.85);
     }
     
     .chat-node {
-        top: 30%;
+        top: 25%;
-        right: 10%;
+        right: 5%;
-        transform: scale(0.9);
+        left: auto;
+        transform: scale(0.85);
     }
     
     .crm-node {
-        bottom: 30%;
+        bottom: 25%;
-        right: 10%;
+        right: 5%;
-        transform: scale(0.9);
+        left: auto;
+        transform: scale(0.85);
     }
     
     .ticket-node {
-        bottom: 10%;
+        bottom: 5%;
         left: 50%;
-        transform: translateX(-50%) scale(0.9);
+        transform: translateX(-50%) scale(0.85);
     }
     
     .team-node {
-        top: 30%;
+        top: 25%;
-        left: 10%;
+        left: 5%;
-        transform: scale(0.9);
+        right: auto;
+        transform: scale(0.85);
+    }
+}
+
+/* Extra small screens */
+@media (max-width: 480px) {
+    .hero-section {
+        padding: 80px 12px 25px;
+    }
+    
+    .hero-headline {
+        font-size: 1.4rem;
+    }
+    
+    .hero-subline,
+    .hero-proof {
+        font-size: 0.85rem;
+        padding: 10px 12px;
+    }
+    
+    .hero-right {
+        height: 280px;
+    }
+    
+    .system-graphic {
+        transform: scale(0.65);
+        width: 150%;
+        margin-left: -25%;
+    }
+    
+    .cta-btn {
+        padding: 10px 16px;
+        font-size: 0.9rem;
     }
 }