8

2026-02-06 16:01:26 +01:00
parent 40c67c99f3
commit 1f0f9abc2e
3 changed files with 208 additions and 46 deletions
--- a/WebSite/scripts/tech-onepager.js
+++ b/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
-        drawConnections();
+        // Draw connection lines after layout is complete
+        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();
-        const graphicRect = systemGraphic.getBoundingClientRect();
+        if (!centralNode || !systemGraphic) return;
        
+        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);
--- a/WebSite/style/design.css
+++ b/WebSite/style/design.css
@@ -1,10 +1,10 @@
 :root {
-    --primary-dark: #4F4747;
+    --primary-dark: #5a5252;
    --primary-light: #EBEBDE;
-    --primary-mid: #777764;
-    --accent-orange: #F57C00;
-    --accent-teal: #26A69A;
-    --accent-green: #66BB6A;
+    --primary-mid: #8a8a7a;
+    --accent-orange: #d4864a;
+    --accent-teal: #5a9e96;
+    --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;
--- a/WebSite/style/tech-onepager.css
+++ b/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;
-        margin-top: 40px;
+        height: 320px;
+        margin-top: 10px;
+        order: 1;
+    }
+    
+    .hero-left {
+        order: 0;
    }
    
    .system-graphic {
-        transform: scale(0.9);
-        width: 110%;
-        margin-left: -5%;
+        transform: scale(0.75);
+        width: 130%;
+        margin-left: -15%;
    }
    
    .central-node {
-        min-width: 120px;
-        max-width: 140px;
-        padding: 8px 16px;
-        border-radius: 20px;
+        min-width: 100px;
+        max-width: 120px;
+        padding: 6px 12px;
+        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;
-        padding: 10px;
-        font-size: 0.8rem;
+        min-width: 70px;
+        padding: 8px;
+        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%;
-        right: 10%;
-        transform: scale(0.9);
+        top: 25%;
+        right: 5%;
+        left: auto;
+        transform: scale(0.85);
    }
    
    .crm-node {
-        bottom: 30%;
-        right: 10%;
-        transform: scale(0.9);
+        bottom: 25%;
+        right: 5%;
+        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%;
-        left: 10%;
-        transform: scale(0.9);
+        top: 25%;
+        left: 5%;
+        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;
    }
 }