From b5d755b946c9ea815e48a29ca02eed279f0003c7 Mon Sep 17 00:00:00 2001
From: Evgeny <evgeny@poberezkin.com>
Date: Tue, 28 Oct 2025 13:36:14 +0000
Subject: [PATCH] website: layout fixes, token button (#6415)

---
 website/langs/en.json             |   1 +
 website/src/_includes/navbar.html |  15 ++--
 website/src/css/design3-nav.css   |  91 +++++++++++++++++---
 website/src/css/design3.css       |  98 +++++++++------------
 website/src/css/style.css         | 137 ------------------------------
 website/src/directory.html        |   5 +-
 website/src/index.html            |  10 +--
 website/src/js/design3.js         |  10 ++-
 8 files changed, 142 insertions(+), 225 deletions(-)

diff --git a/website/langs/en.json b/website/langs/en.json
index bd62980a18..02f370f2cc 100644
--- a/website/langs/en.json
+++ b/website/langs/en.json
@@ -5,6 +5,7 @@
     "reference": "Reference",
     "blog": "Blog",
     "features": "Features",
+    "navbar-token": "Token",
     "why-simplex": "Why SimpleX",
     "simplex-privacy": "SimpleX privacy",
     "simplex-network": "SimpleX network",
diff --git a/website/src/_includes/navbar.html b/website/src/_includes/navbar.html
index 20039e282b..26bf01575a 100644
--- a/website/src/_includes/navbar.html
+++ b/website/src/_includes/navbar.html
@@ -7,8 +7,8 @@
 {% endfor %}
 
 <header id="navbar">
-    <a href="/{{ '' if lang == 'en' else lang }}" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo" /></a>
-    <a href="/{{ '' if lang == 'en' else lang }}" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo" /></a>
+    <a href="/{{ '' if lang == 'en' else lang }}" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/{{ '' if lang == 'en' else lang }}" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -111,6 +111,9 @@
     </nav>
 
     <div class="right-links">
+        <a class="box-btn token md:hidden" href="/token">
+            {{ 'navbar-token' | i18n({}, lang) }}
+        </a>
         <button href="#" class="theme-switch-btn">
             <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"/>
@@ -150,14 +153,10 @@
                                 <li>
                                     {% if language.flag %}
                                         <a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
-                                            <img src="{{ language.flag }}" alt="" srcset="">
                                             <p>{{ language.name }}</p>
                                         </a>
                                     {% else %}
                                         <a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
-                                            <div style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
-                                                <p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
-                                            </div>
                                             <p>{{ language.name }}</p>
                                         </a>
                                     {% endif %}
@@ -171,14 +170,10 @@
                             <li>
                                 {% if language.flag %}
                                     <a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
-                                        <img src="{{ language.flag }}" alt="" srcset="">
                                         <p>{{ language.name }}</p>
                                     </a>
                                 {% else %}
                                     <a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
-                                        <div style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
-                                            <p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
-                                        </div>
                                         <p>{{ language.name }}</p>
                                     </a>
                                 {% endif %}
diff --git a/website/src/css/design3-nav.css b/website/src/css/design3-nav.css
index 1e27141c9b..661fc56e4f 100644
--- a/website/src/css/design3-nav.css
+++ b/website/src/css/design3-nav.css
@@ -10,7 +10,7 @@ body.change-nav-color {
     --nav-color: #001796;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 960px) {
     .logo {
         background: rgba(255, 255, 255, 0.05);
         backdrop-filter: blur(10px);
@@ -70,14 +70,15 @@ header#navbar {
 header#navbar>a.logo {
     position: absolute;
     left: 0px;
-    padding-left: 16px;
+    padding-left: 30px;
+    padding-top: 2px;
     height: 100%;
     /* display: flex; */
     align-items: center;
 }
 
 header#navbar>a.logo img {
-    height: 32px;
+    height: 40px;
     width: auto;
 }
 
@@ -102,12 +103,24 @@ header#navbar ul {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: 49px;
+    gap: 60px;
     list-style: none;
 }
 
+@media screen and (max-width: 1279px) {
+    header#navbar ul {
+        gap: 48px;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    header#navbar ul {
+        gap: 40px;
+    }
+}
+
 header#navbar ul a {
-    font-family: "Manrope", "GT-Walsheim", sans-serif;
+    font-family: "Manrope", sans-serif;
     color: white;
     text-decoration: none;
     font-size: 16px;
@@ -121,6 +134,59 @@ header#navbar ul a {
     white-space: nowrap;
 }
 
+@media screen and (min-width: 960px) {
+    header#navbar ul .nav-link a,
+    header#navbar ul .nav-link-text {
+        font-size: 18px;
+    }
+
+    header#navbar ul .nav-link .sub-menu a {
+        font-size: 16px;
+    }
+}
+
+.box-btn {
+    height: 36px;
+    padding: 0 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 21px !important;
+    font-family: 'Manrope', sans-serif !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.25px !important;
+    border-radius: 6px !important;
+}
+
+.box-btn.btn-1 {
+    background-color: #639bd9;
+}
+
+.dark .box-btn.btn-1 {
+    background-color: #44547D;
+}
+
+.box-btn.token {
+    font-size: 18px !important;
+    font-weight: 500 !important;
+    background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
+    color: white;
+}
+
+.box-btn.gold-gradient,
+.dark .box-btn.token {
+    background: linear-gradient(90deg,
+            #ffb55d 0%,
+            #fff494 50%,
+            #fbffdd 100%);
+    color: black;
+}
+
+.change-nav-color .box-btn.token {
+    background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
+    color: white;
+}
+
 header#navbar ul a span {
     display: flex;
     height: 100%;
@@ -143,7 +209,7 @@ header#navbar ul a span svg {
     fill: #fff;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 960px) {
     header#navbar nav#menu>ul>li>a {
         color: var(--nav-color);
     }
@@ -245,7 +311,7 @@ header#navbar .nav-link:focus-within .sub-menu {
     fill: white;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 960px) {
     .flag-container>a {
         color: var(--nav-color) !important;
     }
@@ -256,7 +322,8 @@ header#navbar .nav-link:focus-within .sub-menu {
 }
 
 .flag-container>a p {
-    font-size: 17px;
+    font-size: 14px;
+    font-family: "Manrope", sans-serif;
     font-weight: 500;
     user-select: none;
     -webkit-user-select: none;
@@ -287,7 +354,7 @@ header#navbar button.theme-switch-btn {
 }
 
 header#navbar button.theme-switch-btn svg {
-    width: 18px;
+    width: 20px;
     height: auto;
 }
 
@@ -300,7 +367,7 @@ header#navbar button.theme-switch-btn svg path {
     fill: white;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 960px) {
     header#navbar button.theme-switch-btn svg path {
         fill: var(--nav-color) !important;
         transition: all 0.3s ease;
@@ -311,7 +378,7 @@ header#navbar button.theme-switch-btn svg path {
     position: absolute;
     top: 0;
     right: 0px;
-    padding-right: 16px;
+    padding-right: 20px;
     height: 54px;
     display: flex;
     align-items: center;
@@ -362,7 +429,7 @@ button#cross-btn {
     height: auto;
 }
 
-@media (max-width: 949px) {
+@media (max-width: 959px) {
     #mobile-header {
         position: fixed;
         top: 0;
diff --git a/website/src/css/design3.css b/website/src/css/design3.css
index d82e8e348c..6b63c769a9 100644
--- a/website/src/css/design3.css
+++ b/website/src/css/design3.css
@@ -171,7 +171,7 @@
             #fff6e0 90%);
 }
 
-@media screen and (max-width: 949px) {
+@media screen and (max-width: 959px) {
     :root {
         --bg-grad: linear-gradient(30deg,
                 #e8f3ff 0%,
@@ -226,7 +226,7 @@ body {
     background: #0a0f2b;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 960px) {
     html {
         overscroll-behavior: none;
     }
@@ -429,7 +429,7 @@ section.cover div.content p {
 .publications-btns {
     position: absolute;
     bottom: 24px;
-    left: 16px;
+    left: 30px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -438,7 +438,15 @@ section.cover div.content p {
 }
 
 .publications-btns img {
-    height: 36px;
+    width: 32px;
+}
+
+.publications-btns img.kuketz {
+    width: 38px;
+}
+
+.publications-btns img.whonix {
+    width: 30px;
 }
 
 .security-btns {
@@ -457,30 +465,6 @@ section.cover div.content p {
     height: 36px;
 }
 
-.box-btn {
-    height: 36px;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px !important;
-    font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
-    font-weight: 700 !important;
-    letter-spacing: -0.25px !important;
-    border-radius: 6px !important;
-}
-
-.box-btn.btn-1 {
-    background-color: #639bd9;
-}
-
-.box-btn.btn-2 {
-    background: linear-gradient(100deg,
-            #ffb55d 0%,
-            #fff494 50%,
-            #fbffdd 100%);
-}
-
 .security-audits {
     font-size: 14px !important;
     font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
@@ -490,7 +474,7 @@ section.cover div.content p {
     line-height: 1.2;
 }
 
-@media screen and (max-width: 1280px) {
+@media screen and (max-width: 1279px) {
     .publications-btns {
         display: none;
         visibility: hidden;
@@ -505,7 +489,7 @@ section.cover div.content p {
 .socials {
     position: absolute;
     bottom: 22px;
-    right: 16px;
+    right: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -529,27 +513,26 @@ section.cover div.content p {
     background-color: #000;
     border: #4f4f4f 1px solid;
     border-radius: 6px;
-    padding: 6px;
+    padding: 6px 10px;
 
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 10px;
 }
 
 .desktop-app-btn .btn-content p {
     margin: 0;
-    font-size: 10px !important;
+    font-size: 11px !important;
     font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
     font-weight: 300 !important;
     line-height: 1.2 !important;
     text-align: left;
     color: #fff;
-    width: 60px;
 }
 
 .desktop-app-btn .btn-content img {
-    height: 22px !important;
+    height: 24px !important;
     width: auto;
 }
 
@@ -557,10 +540,10 @@ section.cover div.content p {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 4px;
+    gap: 6px;
 }
 
-@media screen and (max-width: 949px) {
+@media screen and (max-width: 959px) {
 
     .publications-btns,
     .security-btns,
@@ -641,7 +624,7 @@ main .section-bg {
     background-image: url("/img/design_3/section-5-desktop.webp");
 }
 
-@media screen and (max-width: 949px) {
+@media screen and (max-width: 959px) {
     .page-2 {
         background-image: url("/img/design_3/section-2-mobile-light.webp");
         background-size: auto calc(var(--cover-bg-h) * 0.84);
@@ -853,7 +836,7 @@ main .section-bg {
     display: none;
 }
 
-@media (max-width: 949px) {
+@media (max-width: 959px) {
     section.cover div.content {
         gap: calc(var(--sec-vhu) * 2.5);
         transform: translateY(calc(var(--sec-vhu) * 5));
@@ -983,7 +966,7 @@ main .section-bg {
     border-radius: calc(var(--sec-vhu) * 1.8);
 }
 
-@media screen and (max-width: 949px) {
+@media screen and (max-width: 959px) {
     .page-6 .group-images {
         width: 100%;
         height: 10%;
@@ -1006,14 +989,6 @@ main .section-bg {
     <img class="pos" style="--c:3; --r:2; --w:2; --h:2" src="..." />
     places the image starting at column 3, row 2, spanning 2 columns × 2 rows.
 */
-.page-6 .group-images>a.simplex-image {
-    --c: 4;
-    --r: 3;
-    --w: 2;
-    --h: 2;
-    margin: 1.15rem;
-}
-
 .page-6 .group-images>a.group-image:nth-child(1) {
     --c: 2;
     --r: 1;
@@ -1196,14 +1171,15 @@ main .section-bg {
     --h: 1
 }
 
-@media screen and (max-width: 949px) {
-    .page-6 .group-images>a.simplex-image {
-        --c: 4;
-        --r: 4;
-        --w: 2;
-        --h: 2
-    }
+.page-6 .group-images>a.simplex-image {
+    --c: 4;
+    --r: 3;
+    --w: 2;
+    --h: 2;
+    margin: calc(var(--sec-vhu) * 2);
+}
 
+@media screen and (max-width: 959px) {
     .page-6 .group-images>a.group-image:nth-child(1) {
         --c: 3;
         --r: 1;
@@ -1385,6 +1361,14 @@ main .section-bg {
         --w: 1;
         --h: 1
     }
+
+    .page-6 .group-images>a.simplex-image {
+        --c: 4;
+        --r: 4;
+        --w: 2;
+        --h: 2;
+        margin: calc(var(--sec-vhu) * 1);
+    }
 }
 
 .page-6 .group-images a {
@@ -1399,7 +1383,7 @@ section.page.footer {
     min-height: fit-content;
 }
 
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 959px) {
     section.page.footer {
         height: 100lvh;
         min-height: 100lvh;
@@ -1434,7 +1418,7 @@ section.page.footer {
     }
 }
 
-@media (min-width: 950px) {
+@media (min-width: 960px) {
 
     .footer .container-md,
     .footer .container-sm,
diff --git a/website/src/css/style.css b/website/src/css/style.css
index 71c0212439..f0705419df 100644
--- a/website/src/css/style.css
+++ b/website/src/css/style.css
@@ -313,143 +313,6 @@ a{
   pointer-events: none;
 }
 
-/* .menu-link{
-  font-size: 16px;
-  line-height: 33.42px;
-  color: #0D0E12;
-}
-.dark .menu-link{
-  color: #fff;
-}
-
-.nav-link ul li a.active{
-  color: #0053D0;
-
-}
-.dark .nav-link ul li a.active{
-  color: #66D9E2;
-}
-
-@media (min-width:1024px) {
-  .nav-link-text,
-  .menu-link {
-    display: inline-block;
-    position: relative;
-    color: #0D0E12;
-  }
-
-  .nav-link-text::before,
-  .active .nav-link-text::before,
-  .menu-link::before {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 1px;
-    bottom: 0;
-    right: 0;
-    transition: width 0.25s ease-out;
-  }
-
-  .menu-link::before {
-    background-color: #0D0E12;
-  }
-  .dark .menu-link::before {
-    background-color: #fff;
-  }
-
-  .active .nav-link-text::before {
-    width: 100%;
-  }
-
-  .nav-link:hover .nav-link-text::before,
-  .menu-link:hover::before {
-    width: 100%;
-    left: 0;
-    right: auto;
-  }
-}
-
-
-.sub-menu {
-  visibility: hidden;
-  opacity: 0;
-  color: #505158;
-}
-
-.sub-menu .no-hover{
-  color: #505158 !important;
-}
-
-.dark .sub-menu,
-.dark .sub-menu .no-hover {
-  color: #fff !important;
-}
-
-.dark .sub-menu li:hover {
-  color: #66D9E2;
-}
-
-.sub-menu li:hover {
-  color: #0053D0;
-}
-
-.sub-menu {
-  transition: all .3s ease !important;
-}
-
-.nav-link span svg,
-header nav {
-  transition: all 0.5s ease;
-}
-
-.nav-link:hover span svg {
-  transform: rotate(180deg);
-}
-
-@media (min-width:1024px) {
-
-  .nav-link:hover .sub-menu,
-  .nav-link:focus-within .sub-menu {
-    visibility: visible;
-    opacity: 1;
-    margin-top: 0;
-  }
-}
-
-@media (max-width: 1024px) {
-  .sub-menu {
-    max-height: 0;
-    transform: translateY(-10px);
-    transition: all .7s ease !important;
-    overflow: hidden;
-  }
-
-  .active .sub-menu {
-    max-height: 1000px;
-    transform: translateY(0px);
-    opacity: 1;
-    visibility: visible;
-    margin-top: 0;
-  }
-
-  header nav {
-    visibility: hidden;
-    opacity: 0;
-    transform: translateX(100%);
-    overflow-y: auto;
-  }
-
-  header nav.open {
-    visibility: visible;
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  .flag-container .sub-menu{
-    max-height: fit-content;
-  }
-} */
-
 .lock-scroll {
   overflow: hidden;
 }
diff --git a/website/src/directory.html b/website/src/directory.html
index 4304fb0559..0e08e0b29b 100644
--- a/website/src/directory.html
+++ b/website/src/directory.html
@@ -9,7 +9,6 @@ active_directory: true
 {% set lang = page.url | getlang %}
 {% block js_scripts %}
 <script src="/js/flag-anchor.js"></script>
-<script async defer src="/js/directory.js"></script>
 {% endblock %}
 
 <style>
@@ -271,4 +270,6 @@ active_directory: true
     <div id="directory" style="height: 3000px;"></div>
     <div id="bottom-pagination" class="pagination"></div>
   </div>
-</section>
\ No newline at end of file
+</section>
+
+<script src="/js/directory.js"></script>
diff --git a/website/src/index.html b/website/src/index.html
index 7d298563ea..975a2dc2d3 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -81,7 +81,7 @@ active_home: true
                                     <img class="no-border" src="/img/design_3/socials/apple.png" alt="">
                                     <img class="no-border" src="/img/design_3/socials/windows.png" alt="">
                                 </div>
-                                <p>Download Desktop App</p>
+                                <p>Download<br>Desktop App</p>
                             </div>
                         </a>
                         <a class="apple-store-btn hidden" href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img src="/img/new/apple_store.svg"></a>
@@ -97,7 +97,7 @@ active_home: true
                         <a class="box-btn btn-1" title="{{ 'index-security-review-2022-title' | i18n({}, lang) }}" href="/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html">
                             2022
                         </a>
-                        <a class="box-btn btn-2" title="{{ 'index-security-review-2024-title' | i18n({}, lang) }}" href="/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html">
+                        <a class="box-btn gold-gradient" title="{{ 'index-security-review-2024-title' | i18n({}, lang) }}" href="/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html">
                             2024
                         </a>
                         <p class="security-audits">
@@ -109,13 +109,13 @@ active_home: true
                             <img src="/img/design_3/publications/privacy-guides.png" alt="Privacy Guides">
                         </a>
                         <a title="{{ 'index-publications-whonix-title' | i18n({}, lang) }}" href="https://www.whonix.org/wiki/Chat#Recommendation" target="_blank">
-                            <img src="/img/design_3/publications/whonix.png" alt="Whonix">
+                            <img src="/img/design_3/publications/whonix.png" alt="Whonix" class="whonix">
                         </a>
                         <a title="{{ 'index-publications-heise-title' | i18n({}, lang) }}" href="https://www.heise.de/suche/?q=simplex+chat&sort_by=date&rm=search" target="_blank">
                             <img src="/img/design_3/publications/heise.png" alt="Heise">
                         </a>
                         <a title="{{ 'index-publications-kuketz-title' | i18n({}, lang) }}" href="https://www.kuketz-blog.de/simplex-eindruecke-vom-messenger-ohne-identifier/" target="_blank">
-                            <img src="/img/design_3/publications/kuketz-blog.png" alt="Kuketz Blog">
+                            <img src="/img/design_3/publications/kuketz-blog.png" alt="Kuketz Blog" class="kuketz">
                         </a>
                         <a title="{{ 'index-publications-optout-title' | i18n({}, lang) }}" href="https://optoutpod.com/episodes/s3e02-simplexchat/" target="_blank">
                             <img src="/img/design_3/publications/optout.png" alt="Opt Out">
@@ -342,7 +342,7 @@ active_home: true
             scheduleUpdate(); // Initial update
         } else {
             // Fallback for older browsers
-            ['scroll','resize','load'].forEach(ev => 
+            ['scroll','resize','load'].forEach(ev =>
                 window.addEventListener(ev, scheduleUpdate, { passive: true })
             );
             scheduleUpdate();
diff --git a/website/src/js/design3.js b/website/src/js/design3.js
index 7fd551b155..bc725ac7ce 100644
--- a/website/src/js/design3.js
+++ b/website/src/js/design3.js
@@ -5,7 +5,13 @@ const isMobile = {
 };
 
 (function() {
-document.addEventListener('DOMContentLoaded', () => {
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializePage);
+} else {
+    initializePage();
+}
+
+function initializePage() {
     const googlePlayBtn = document.querySelector('.google-play-btn');
     const appleStoreBtn = document.querySelector('.apple-store-btn');
     const fDroidBtn = document.querySelector('.f-droid-btn');
@@ -35,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     showPromotedGroups();
-});
+}
 
 async function showPromotedGroups() {
     welcome();