website: desktop layout for section 2 3 4 5 (#6317)

* desktop layout for section 2 3 4 5

* improve mobile layout

* resolve navbar issues

* delete unwanted svg

* cover layout

* update section 5 for mobile

* section 5 desktop

website/src/css/design3.css

@@ -217,6 +217,11 @@
     --vh: 1svh;
 
     --nav-color: #ffffff;
+
+    --imgW: min(100vw, 100vh);
+    --imgH: min(100vh, 100vw);
+    --imgGutter: 0px;
+    /* set per section via JS: half of leftover space around contained image */
 }
 
 body.change-nav-color {
@@ -310,8 +315,15 @@ section .content {
 
 /* --- COVER --- */
 section.cover {
+    /* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
+    --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
+    --cover-bg-h: calc(min((1800 / 1920) * 100vw, (1800 / 1080) * 100vh));
+    --cover-safe-w: calc(var(--cover-bg-w) * 0.6);
+    /* 1920/3200 */
+    --cover-safe-h: calc(var(--cover-bg-h) * 0.6);
+    /* 1080/1800 */
     background-image: url("/img/design_3/cover.jpg");
-    background-size: cover;
+    background-size: var(--cover-bg-w) var(--cover-bg-h);
     background-position: center;
     background-repeat: no-repeat;
 
@@ -319,6 +331,9 @@ section.cover {
     justify-content: center;
     align-items: center;
     text-align: center;
+
+    --svw: calc(var(--cover-safe-w) / 100);
+    --svh: calc(var(--cover-safe-h) / 100);
 }
 
 section.cover div.content {
@@ -326,13 +341,14 @@ section.cover div.content {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: clamp(20px, 4vw, 40px);
+    gap: calc(var(--svh) * 3.5);
+    max-width: var(--cover-safe-w);
 }
 
 .cover .content h1 {
     font-family: "Manrope", "GT-Walsheim", sans-serif;
     font-weight: 800;
-    font-size: clamp(3rem, 12vw, 12rem);
+    font-size: calc(var(--svw) * 11.4);
     line-height: 0.9;
     letter-spacing: -0.025em;
     color: #ffffff;
@@ -341,34 +357,34 @@ section.cover div.content {
 .cover .content h2 {
     font-family: "GT-Walsheim", "Manrope", sans-serif;
     font-weight: 400;
-    font-size: clamp(1.5rem, 3vw, 2.84rem);
+    font-size: calc(var(--svw) * 2.7);
     letter-spacing: -0.025em;
 }
 
 .cover .content p {
     font-family: "Manrope", "GT-Walsheim", sans-serif;
     font-weight: 200;
-    font-size: clamp(1rem, 2.25vw, 1.67rem);
+    font-size: calc(var(--svw) * 1.6);
     align-items: center;
     color: #ffffff;
 }
 
 .cover .socials {
     position: absolute;
-    width: 100vw;
-    bottom: 32px;
-    padding: 0 4vw;
+    width: var(--cover-safe-w);
+    bottom: calc(((100vh - var(--cover-safe-h))/2) + (var(--svh) * 4.5));
+    padding: 0 calc(var(--svw) * 5.5);
 
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 10px;
+    gap: calc(var(--svw) * 0.6);
     flex-wrap: wrap;
 }
 
 .cover .socials a img {
     width: auto;
-    height: 40px;
+    height: calc(var(--svh) * 4.2);
     border: #4f4f4f 1px solid;
     border-radius: 8px;
 }
@@ -403,9 +419,8 @@ main .section-bg {
 
 main section .image {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    background-size: cover;
+    inset: 0;
+    background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
 }
@@ -435,9 +450,10 @@ main section .image {
     justify-content: center;
     align-items: flex-start;
     gap: 2.3vh;
-    margin-right: 6.25vw;
-    margin-left: 6.25vw;
+    margin-right: max(var(--imgGutter, 0px), 6.25vw);
+    margin-left: max(var(--imgGutter, 0px), 6.25vw);
     width: fit-content;
+    z-index: 1;
 }
 
 .text-container h2 {
@@ -457,7 +473,7 @@ main section .image {
 }
 
 .text-container p span {
-    font-weight: 400;
+    font-weight: 500;
 }
 
 .text-container a {
@@ -504,6 +520,68 @@ main section .image {
     max-width: 26.5vw;
 }
 
+/* Desktop: tie text widths to contained image width rather than viewport */
+@media (min-width: 768px) {
+
+    .text-container {
+        max-width: var(--imgW);
+    }
+
+    /* Base proportions (converted from previous vw values) */
+    .text-container h2 {
+        max-width: calc(var(--imgW) * 0.24);
+    }
+
+    .text-container p {
+        max-width: calc(var(--imgW) * 0.205);
+    }
+
+    .text-container a {
+        max-width: calc(var(--imgW) * 0.13);
+    }
+
+    /* Per-page refinements matching your earlier vw overrides */
+    .page-2 .text-container h2 {
+        max-width: calc(var(--imgW) * 0.24) !important;
+    }
+
+    .page-2 .text-container p {
+        max-width: calc(var(--imgW) * 0.205) !important;
+    }
+
+    .page-3 .text-container h2 {
+        max-width: calc(var(--imgW) * 0.30) !important;
+    }
+
+    .page-3 .text-container p {
+        max-width: calc(var(--imgW) * 0.285) !important;
+    }
+
+    .page-4 .text-container h2 {
+        max-width: calc(var(--imgW) * 0.28) !important;
+    }
+
+    .page-4 .text-container p,
+    .page-4 .text-container a {
+        max-width: calc(var(--imgW) * 0.265) !important;
+    }
+}
+
+.text-container h2 {
+    /* was: font-size: 4.6vw; */
+    font-size: clamp(28px, calc(var(--imgH) * var(--h2k, 0.046)), 120px);
+}
+
+.text-container p {
+    /* was: font-size: 1.45vw; */
+    font-size: clamp(14px, calc(var(--imgH) * var(--pk, 0.0145)), 28px);
+}
+
+.text-container a {
+    /* was: font-size: 1.45vw; */
+    font-size: clamp(14px, calc(var(--imgH) * var(--pk, 0.0145)), 28px);
+}
+
 .roadmap>p:first-child {
     font-weight: 500;
     color: #64fdff;
@@ -521,6 +599,10 @@ main section .image {
     max-width: 30vw;
 }
 
+.roadmap p.title span {
+    display: none;
+}
+
 @media (max-width: 767px) {
     section {
         min-height: 100svh;
@@ -530,6 +612,30 @@ main section .image {
         gap: 35px;
     }
 
+    /* cover */
+    /* --- COVER --- */
+    section.cover {
+        background-image: url("/img/design_3/cover-mobile.jpg");
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+
+    section.cover div.content {
+        gap: 30px;
+    }
+
+    .cover .socials {
+        width: 100vw;
+        bottom: 32px;
+        gap: 10px;
+        justify-content: center;
+    }
+
+    .cover .socials a img {
+        height: 40px;
+    }
+
     .cover .content h1 {
         font-size: 30vw;
     }
@@ -543,27 +649,27 @@ main section .image {
         max-width: 62.5vw;
     }
 
-    .cover .socials {
-        justify-content: center;
-    }
-
     /* --- MAIN SECTIONS --- */
     .page-2 .image {
-        background-image: url("/img/design_3/section2-mobile-bg.webp");
+        background-image: url("/img/design_3/section-2-mobile.webp");
+        background-size: cover;
+        height: 75%;
+        background-position: top;
     }
 
     .page-3 .image {
         background-image: url("/img/design_3/section-3-mobile.webp");
+        background-position: top;
     }
 
     .page-4 .image {
         background-image: url("/img/design_3/section-4-mobile.webp");
-        height: 55%;
+        background-position: top;
     }
 
     .page-6 .image {
         background-image: url("/img/design_3/section-6-mobile.webp");
-        height: 48%;
+        background-position: top;
     }
 
     .page-3 .text-container,
@@ -571,12 +677,20 @@ main section .image {
         margin-left: 0;
     }
 
+    .text-container p {
+        font-weight: 300;
+    }
+
+    .text-container p span {
+        font-weight: 700;
+    }
+
     .text-container {
         justify-content: flex-end;
         align-items: flex-start;
         gap: 1.25rem;
-        margin-right: 8vw !important;
-        margin-left: 8vw !important;
+        margin-right: 7vw !important;
+        margin-left: 7vw !important;
         padding-bottom: 8vw;
         max-width: 75vw;
     }
@@ -584,7 +698,7 @@ main section .image {
     .text-container h2 {
         font-family: "GT-Walsheim", "Manrope", sans-serif;
         font-weight: 400;
-        font-size: 9.25vw;
+        font-size: 12vw;
         letter-spacing: -0.025em;
         max-width: 75vw !important;
         line-height: 1.05;
@@ -609,7 +723,7 @@ main section .image {
     }
 
     .page-2 .text-container h2 {
-        max-width: 75vw !important;
+        max-width: 63vw !important;
     }
 
     .page-3 .text-container {
@@ -642,6 +756,31 @@ main section .image {
     .page-4 .text-container a {
         max-width: 80vw !important;
     }
+
+    .roadmap {
+        width: 85vw !important;
+    }
+
+    .roadmap>p:first-child {
+        float: left;
+    }
+
+    .roadmap p.title span {
+        display: inline;
+    }
+
+    .roadmap p.title {
+        color: #64fdff;
+    }
+
+    .roadmap>p {
+        font-weight: 400;
+        max-width: 90vw !important;
+    }
+
+    .page-6 .text-container {
+        max-width: fit-content !important;
+    }
 }
 
 /* NavBar */
@@ -852,11 +991,23 @@ header#navbar button.theme-switch-btn {
     border: none;
 }
 
-header#navbar button.theme-switch-btn img {
+header#navbar button.theme-switch-btn svg {
     width: 18px;
     height: auto;
 }
 
+header#navbar button.theme-switch-btn svg path {
+    fill: white;
+    transition: all 0.3s ease;
+}
+
+@media screen and (min-width: 768px) {
+    header#navbar button.theme-switch-btn svg path {
+        fill: var(--nav-color);
+        transition: all 0.3s ease;
+    }
+}
+
 .right-links {
     position: absolute;
     right: 16px;

website/src/img/design_3/sun.svg

@@ -1,11 +0,0 @@
-<svg width="469" height="469" viewBox="0 0 469 469" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M225.768 1.44594C220.301 3.84594 214.701 10.6459 213.768 15.9793C213.234 18.3793 213.101 31.7126 213.368 45.7126L213.768 71.1793L217.634 76.1126C226.701 88.1126 242.968 87.5793 252.301 75.0459C254.968 71.5793 255.101 69.5793 255.101 42.2459C255.101 14.9126 254.968 12.9126 252.301 9.44594C250.834 7.44594 248.034 4.51261 246.168 3.17928C241.768 -0.154057 231.101 -1.08739 225.768 1.44594Z" fill="white"/>
-<path d="M72.9687 65.3128C63.7687 71.5794 60.1687 81.4461 63.7687 91.1794C65.502 95.4461 98.702 129.446 104.035 132.379C106.035 133.446 110.569 134.246 114.035 134.246C126.035 134.246 134.435 125.846 134.435 113.846C134.435 110.379 133.635 105.846 132.569 103.846C129.635 98.5128 95.6353 65.3128 91.3687 63.5794C85.102 61.3128 77.902 61.9794 72.9687 65.3128Z" fill="white"/>
-<path d="M377.102 63.7128C373.102 65.3128 338.969 98.7794 336.302 103.846C335.236 105.846 334.436 110.379 334.436 113.846C334.436 125.846 342.836 134.246 354.836 134.246C358.302 134.246 362.836 133.446 364.836 132.379C370.169 129.446 403.369 95.4461 405.102 91.1794C408.702 81.4461 405.102 71.5794 395.902 65.3128C391.102 61.9794 383.102 61.3128 377.102 63.7128Z" fill="white"/>
-<path d="M211.635 108.246C185.635 113.179 163.502 125.046 144.302 144.112C117.902 170.512 104.968 203.579 106.835 240.246C109.768 297.712 149.102 344.912 205.902 359.179C218.568 362.379 250.302 362.379 262.968 359.179C310.435 347.312 345.768 312.646 358.702 265.046C362.435 251.446 362.835 219.446 359.368 205.712C347.368 158.112 312.302 122.379 265.235 110.112C251.768 106.512 225.502 105.579 211.635 108.246Z" fill="white"/>
-<path d="M12.4349 214.779C-0.498477 220.379 -4.09848 237.579 5.23486 248.246C11.2349 255.046 15.6349 255.846 45.3682 255.313C74.0349 254.913 75.1015 254.646 81.6349 245.713C85.9015 239.979 85.5015 228.113 80.8349 221.979C74.4349 213.713 71.2349 212.913 42.1682 212.913C23.7682 213.046 15.2349 213.579 12.4349 214.779Z" fill="white"/>
-<path d="M396.035 215.179C393.635 216.379 390.035 219.445 388.035 221.979C383.368 228.112 382.968 239.979 387.235 245.712C394.035 254.779 394.301 254.912 426.435 254.912C458.568 254.912 458.835 254.779 465.635 245.712C469.501 240.512 469.501 227.979 465.635 222.779C458.968 213.845 458.301 213.579 428.035 213.179C404.435 212.912 399.768 213.179 396.035 215.179Z" fill="white"/>
-<path d="M103.101 336.779C96.7013 340.779 65.368 373.179 63.768 377.313C57.368 394.513 74.168 411.313 91.368 404.913C95.6347 403.179 129.635 369.979 132.568 364.646C135.368 359.446 134.968 349.046 131.768 343.846C126.168 334.646 112.035 331.179 103.101 336.779Z" fill="white"/>
-<path d="M344.035 336.912C341.635 338.379 338.569 341.445 337.102 343.845C333.902 349.045 333.502 359.445 336.302 364.645C339.235 369.979 373.235 403.179 377.502 404.912C387.235 408.512 397.102 404.912 403.369 395.712C406.702 390.779 407.369 383.579 405.102 377.312C403.369 373.045 370.169 339.045 364.835 336.112C359.635 333.312 349.235 333.712 344.035 336.912Z" fill="white"/>
-<path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z" fill="white"/>
-</svg>

website/src/index.html

@@ -116,7 +116,18 @@
 
         <div class="right-links">
             <button href="#" class="theme-switch-btn">
-                <img src="/img/design_3/sun.svg"  alt="" srcset="" class="sun">
+                <svg class="sun" width="469" height="469" viewBox="0 0 469 469" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M225.768 1.44594C220.301 3.84594 214.701 10.6459 213.768 15.9793C213.234 18.3793 213.101 31.7126 213.368 45.7126L213.768 71.1793L217.634 76.1126C226.701 88.1126 242.968 87.5793 252.301 75.0459C254.968 71.5793 255.101 69.5793 255.101 42.2459C255.101 14.9126 254.968 12.9126 252.301 9.44594C250.834 7.44594 248.034 4.51261 246.168 3.17928C241.768 -0.154057 231.101 -1.08739 225.768 1.44594Z"/>
+                <path d="M72.9687 65.3128C63.7687 71.5794 60.1687 81.4461 63.7687 91.1794C65.502 95.4461 98.702 129.446 104.035 132.379C106.035 133.446 110.569 134.246 114.035 134.246C126.035 134.246 134.435 125.846 134.435 113.846C134.435 110.379 133.635 105.846 132.569 103.846C129.635 98.5128 95.6353 65.3128 91.3687 63.5794C85.102 61.3128 77.902 61.9794 72.9687 65.3128Z"/>
+                <path d="M377.102 63.7128C373.102 65.3128 338.969 98.7794 336.302 103.846C335.236 105.846 334.436 110.379 334.436 113.846C334.436 125.846 342.836 134.246 354.836 134.246C358.302 134.246 362.836 133.446 364.836 132.379C370.169 129.446 403.369 95.4461 405.102 91.1794C408.702 81.4461 405.102 71.5794 395.902 65.3128C391.102 61.9794 383.102 61.3128 377.102 63.7128Z"/>
+                <path d="M211.635 108.246C185.635 113.179 163.502 125.046 144.302 144.112C117.902 170.512 104.968 203.579 106.835 240.246C109.768 297.712 149.102 344.912 205.902 359.179C218.568 362.379 250.302 362.379 262.968 359.179C310.435 347.312 345.768 312.646 358.702 265.046C362.435 251.446 362.835 219.446 359.368 205.712C347.368 158.112 312.302 122.379 265.235 110.112C251.768 106.512 225.502 105.579 211.635 108.246Z"/>
+                <path d="M12.4349 214.779C-0.498477 220.379 -4.09848 237.579 5.23486 248.246C11.2349 255.046 15.6349 255.846 45.3682 255.313C74.0349 254.913 75.1015 254.646 81.6349 245.713C85.9015 239.979 85.5015 228.113 80.8349 221.979C74.4349 213.713 71.2349 212.913 42.1682 212.913C23.7682 213.046 15.2349 213.579 12.4349 214.779Z"/>
+                <path d="M396.035 215.179C393.635 216.379 390.035 219.445 388.035 221.979C383.368 228.112 382.968 239.979 387.235 245.712C394.035 254.779 394.301 254.912 426.435 254.912C458.568 254.912 458.835 254.779 465.635 245.712C469.501 240.512 469.501 227.979 465.635 222.779C458.968 213.845 458.301 213.579 428.035 213.179C404.435 212.912 399.768 213.179 396.035 215.179Z"/>
+                <path d="M103.101 336.779C96.7013 340.779 65.368 373.179 63.768 377.313C57.368 394.513 74.168 411.313 91.368 404.913C95.6347 403.179 129.635 369.979 132.568 364.646C135.368 359.446 134.968 349.046 131.768 343.846C126.168 334.646 112.035 331.179 103.101 336.779Z"/>
+                <path d="M344.035 336.912C341.635 338.379 338.569 341.445 337.102 343.845C333.902 349.045 333.502 359.445 336.302 364.645C339.235 369.979 373.235 403.179 377.502 404.912C387.235 408.512 397.102 404.912 403.369 395.712C406.702 390.779 407.369 383.579 405.102 377.312C403.369 373.045 370.169 339.045 364.835 336.112C359.635 333.312 349.235 333.712 344.035 336.912Z"/>
+                <path d="M225.368 385.712C222.968 387.046 219.368 390.112 217.368 392.646L213.768 397.312V426.379C213.768 458.246 213.901 458.779 222.968 465.446C228.168 469.312 240.701 469.312 245.901 465.446C254.834 458.779 255.101 457.979 255.501 428.246C256.034 397.579 255.234 394.379 246.834 387.979C241.101 383.579 231.634 382.512 225.368 385.712Z"/>
+                </svg>
+
                 <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
             </button>
 
@@ -227,18 +238,18 @@
                 <div class="text-container">
                     <h2>SimpleX Roadmap to Free Internet</h2>
                     <div class="roadmap">
-                        <p>2025</p>
-                        <p>Scale to Large Communities</p>
+                        <p>2025 </p>
+                        <p class="title"><span>: </span>Scale to Large Communities</p>
                         <p>Escaping centralized platforms</p>
                     </div>
                     <div class="roadmap">
-                        <p>2026</p>
-                        <p>Sustainable Communities & Servers</p>
+                        <p>2026 </p>
+                        <p class="title"><span>: </span>Sustainable Communities & Servers</p>
                         <p>Launching Community Vouchers</p>
                     </div>
                     <div class="roadmap">
-                        <p>2027</p>
-                        <p>Make Your Communities Grow</p>
+                        <p>2027 </p>
+                        <p class="title"><span>: </span>Make Your Communities Grow</p>
                         <p>Tools to promote your communities</p>
                     </div>
                 </div>
@@ -269,10 +280,10 @@
         const io = new IntersectionObserver((entries) => {
             for (const e of entries) {
             // if cover is mostly visible, keep white nav; else switch to #001796
-            const onCover = e.isIntersecting && e.intersectionRatio >= 0.55;
+            const onCover = e.isIntersecting && e.intersectionRatio >= 0.02;
             document.body.classList.toggle('change-nav-color', !onCover);
             }
-        }, { threshold: [0, 0.55, 1] });
+        }, { threshold: [0, 0.02, 1] });
         io.observe(cover);
     })();
     
@@ -300,6 +311,71 @@
         // }
     });
     </script>
+    <script>
+    (function imageBasedTypographyBG(){
+    // Desktop only to avoid clashing with mobile font rules
+    const mql = window.matchMedia('(min-width: 768px)');
+
+    function urlFromBG(el){
+        const bg = getComputedStyle(el).backgroundImage; // url("...") or none
+        if (!bg || bg === 'none') return null;
+        const m = bg.match(/url\((['"]?)(.*?)\1\)/);
+        return m ? m[2] : null;
+    }
+
+    const sizeCache = new Map();
+    function getImgSize(url){
+        return new Promise(resolve => {
+        if (sizeCache.has(url)) return resolve(sizeCache.get(url));
+        const im = new Image();
+        im.onload = () => {
+            const out = { w: im.naturalWidth || 1, h: im.naturalHeight || 1 };
+            sizeCache.set(url, out);
+            resolve(out);
+        };
+        im.onerror = () => resolve({ w: 1, h: 1 });
+        im.src = url;
+        });
+    }
+
+    async function setVars(){
+        if (!mql.matches) return; // desktop only
+        const secs = document.querySelectorAll('main section');
+        for (const sec of secs) {
+        const imgBox = sec.querySelector('.image');
+        const tc     = sec.querySelector('.text-container');
+        if (!imgBox || !tc) continue;
+
+        const url = urlFromBG(imgBox);
+        if (!url) continue; // no background set
+
+        const { w: iw, h: ih } = await getImgSize(url);
+        const ratio = iw / ih;             // image aspect ratio (width/height)
+
+        const cw = sec.clientWidth;        // section width
+        const ch = sec.clientHeight;       // section height
+
+        // Background-size: contain geometry
+        const drawnW = Math.min(cw, ch * ratio);
+        const drawnH = drawnW / ratio;     // equivalently Math.min(ch, cw / ratio)
+
+        // Expose to CSS on this section's text container
+        tc.style.setProperty('--imgW', drawnW + 'px');
+        tc.style.setProperty('--imgH', drawnH + 'px');
+        const gutter = Math.max(0, (cw - drawnW) / 2);
+        tc.style.setProperty('--imgGutter', gutter + 'px');
+
+        // Convert old width-based constants to height-based using current ratio
+        tc.style.setProperty('--h2k', (0.046  * ratio).toFixed(6));  // for h2
+        tc.style.setProperty('--pk',  (0.0145 * ratio).toFixed(6));  // for p, a
+        }
+    }
+
+    window.addEventListener('load', setVars);
+    window.addEventListener('resize', setVars);
+    window.addEventListener('orientationchange', setVars);
+    })();
+    </script>
 </body>
 
 </html>