From c9193fb702bfc83cd642bb9ceac3a86f5d3859d9 Mon Sep 17 00:00:00 2001
From: "M. Sarmad Qadeer" <MSarmadQadeer@gmail.com>
Date: Sat, 17 Jan 2026 14:50:50 +0500
Subject: [PATCH] website: fixes (#6454)

* add rtl support

* enable arabic language

* fix colors for navbar on RTL language and when scrolling to footer

---------

Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>
---
 website/src/_data/languages.json  |  1 +
 website/src/_includes/navbar.html |  4 +-
 website/src/css/design3-nav.css   | 97 ++++++++++++++++++++++++++++---
 website/src/css/design3.css       | 56 ++++++++++++++++--
 website/src/index.html            | 18 +++---
 5 files changed, 150 insertions(+), 26 deletions(-)

diff --git a/website/src/_data/languages.json b/website/src/_data/languages.json
index 0736597953..362e8c4120 100644
--- a/website/src/_data/languages.json
+++ b/website/src/_data/languages.json
@@ -14,6 +14,7 @@
             "textColor": "white",
             "iconBg": "green",
             "enabled": true,
+            "home": true,
             "rtl": true
         },
         {
diff --git a/website/src/_includes/navbar.html b/website/src/_includes/navbar.html
index 2a75a2769b..003c069d9c 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 logo-light 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 logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
diff --git a/website/src/css/design3-nav.css b/website/src/css/design3-nav.css
index 8a72c7fd17..e6558823fc 100644
--- a/website/src/css/design3-nav.css
+++ b/website/src/css/design3-nav.css
@@ -15,9 +15,17 @@ body.change-nav-color {
         background: rgba(255, 255, 255, 0.05);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+    }
+
+    [dir="ltr"] .logo {
         border-bottom-right-radius: 12px;
         padding-right: 24px;
-        transition: all 0.3s ease;
+    }
+
+    [dir="rtl"] .logo {
+        border-bottom-left-radius: 12px;
+        padding-left: 24px;
     }
 
     .dark .logo {
@@ -42,9 +50,17 @@ body.change-nav-color {
         background: rgba(255, 255, 255, 0.05);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+    }
+
+    [dir="ltr"] .right-links {
         border-bottom-left-radius: 12px;
         padding-left: 24px;
-        transition: all 0.3s ease;
+    }
+
+    [dir="rtl"] .right-links {
+        border-bottom-right-radius: 12px;
+        padding-right: 24px;
     }
 
     .dark .right-links {
@@ -69,14 +85,46 @@ header#navbar {
 
 header#navbar>a.logo {
     position: absolute;
-    left: 0px;
-    padding-left: 30px;
     padding-top: 2px;
     height: 100%;
     /* display: flex; */
     align-items: center;
 }
 
+[dir="ltr"] header#navbar>a.logo {
+    left: 0px;
+    padding-left: 30px;
+}
+
+[dir="rtl"] header#navbar>a.logo {
+    right: 0px;
+    padding-right: 30px;
+}
+
+header#navbar>a.logo.logo-light {
+    display: flex;
+}
+
+header#navbar>a.logo.logo-dark {
+    display: none;
+}
+
+.dark header#navbar>a.logo.logo-light {
+    display: none;
+}
+
+.dark header#navbar>a.logo.logo-dark {
+    display: flex;
+}
+
+[dir="rtl"].dark .change-nav-color header#navbar>a.logo.logo-light {
+    display: flex;
+}
+
+[dir="rtl"].dark .change-nav-color header#navbar>a.logo.logo-dark {
+    display: none;
+}
+
 header#navbar>a.logo img {
     height: 40px;
     width: auto;
@@ -183,7 +231,7 @@ header#navbar ul a {
     color: black;
 }
 
-.change-nav-color .box-btn.token {
+.dark .change-nav-color .box-btn.token {
     background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
     color: white;
 }
@@ -219,9 +267,13 @@ header#navbar ul a span svg {
         fill: var(--nav-color);
     }
 
-    header#navbar nav#menu li.nav-link:hover span svg {
+    [dir="ltr"] header#navbar nav#menu li.nav-link:hover span svg {
         transform: rotate(180deg);
     }
+
+    [dir="rtl"] header#navbar nav#menu li.nav-link:hover span svg {
+        transform: rotate(-180deg);
+    }
 }
 
 header#navbar ul.sub-menu {
@@ -348,6 +400,11 @@ header#navbar .nav-link:focus-within .sub-menu {
     right: 0;
 }
 
+[dir="rtl"] .flag-container .sub-menu {
+    left: 0;
+    right: auto;
+}
+
 header#navbar button.theme-switch-btn {
     display: flex;
     align-items: center;
@@ -380,14 +437,22 @@ header#navbar button.theme-switch-btn svg path {
 .right-links {
     position: absolute;
     top: 0;
-    right: 0px;
-    padding-right: 20px;
     height: 54px;
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }
 
+[dir="ltr"] .right-links {
+    right: 0px;
+    padding-right: 20px;
+}
+
+[dir="rtl"] .right-links {
+    left: 0px;
+    padding-left: 20px;
+}
+
 button#cross-btn {
     background-color: transparent;
     border: none;
@@ -454,9 +519,16 @@ button#cross-btn {
         visibility: hidden;
         opacity: 0;
         transition: all .3s ease;
+    }
+
+    [dir="ltr"] header#navbar {
         transform: translateX(-100%);
     }
 
+    [dir="rtl"] header#navbar {
+        transform: translateX(100%);
+    }
+
     .dark header#navbar {
         background: #0a0f2b;
     }
@@ -494,13 +566,20 @@ button#cross-btn {
     header#navbar nav#menu {
         position: fixed !important;
         top: 54px;
-        left: 0;
         width: 100%;
         height: calc(100% - 54px);
         overflow: auto;
         padding: 0.5rem 0;
     }
 
+    [dir="ltr"] header#navbar nav#menu {
+        left: 0;
+    }
+
+    [dir="rtl"] header#navbar nav#menu {
+        right: 0;
+    }
+
     header#navbar nav#menu .nav-link {
         width: 100%;
     }
diff --git a/website/src/css/design3.css b/website/src/css/design3.css
index ad7f2b449a..b669c139cb 100644
--- a/website/src/css/design3.css
+++ b/website/src/css/design3.css
@@ -433,7 +433,6 @@ section.cover div.content p {
 .publications-btns {
     position: absolute;
     bottom: 24px;
-    left: 30px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -441,6 +440,14 @@ section.cover div.content p {
     gap: 12px;
 }
 
+[dir="ltr"] .publications-btns {
+    left: 30px;
+}
+
+[dir="rtl"] .publications-btns {
+    right: 30px;
+}
+
 .publications-btns img {
     width: 32px;
 }
@@ -456,8 +463,6 @@ section.cover div.content p {
 .security-btns {
     position: absolute;
     bottom: 24px;
-    left: 0;
-    transform: translateX(calc((100vw / 2) - 50%));
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -465,6 +470,16 @@ section.cover div.content p {
     gap: 12px;
 }
 
+[dir="ltr"] .security-btns {
+    left: 0;
+    transform: translateX(calc((100vw / 2) - 50%));
+}
+
+[dir="rtl"] .security-btns {
+    right: 0;
+    transform: translateX(calc(-1 * ((100vw / 2) - 50%)));
+}
+
 .security-btns img {
     height: 36px;
 }
@@ -473,27 +488,38 @@ section.cover div.content p {
     font-size: 14px !important;
     font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
     font-weight: 300 !important;
-    text-align: left;
     color: white;
     line-height: 1.2;
 }
 
+[dir="ltr"] .security-audits {
+    text-align: left;
+}
+
+[dir="rtl"] .security-audits {
+    text-align: right;
+}
+
 @media screen and (max-width: 1279px) {
     .publications-btns {
         display: none;
         visibility: hidden;
     }
 
-    .security-btns {
+    [dir="ltr"] .security-btns {
         transform: translateX(0);
         left: 16px;
     }
+
+    [dir="rtl"] .security-btns {
+        transform: translateX(0);
+        right: 16px;
+    }
 }
 
 .socials {
     position: absolute;
     bottom: 22px;
-    right: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -501,6 +527,14 @@ section.cover div.content p {
     flex-wrap: wrap;
 }
 
+[dir="ltr"] .socials {
+    right: 30px;
+}
+
+[dir="rtl"] .socials {
+    left: 30px;
+}
+
 .socials a img {
     width: auto;
     height: 40px;
@@ -783,6 +817,12 @@ main .section-bg {
     margin-left: auto;
 }
 
+[dir="rtl"] .page-2 .text-container,
+[dir="rtl"] .page-5 .text-container,
+[dir="rtl"] .page-6 .text-container {
+    margin-right: auto;
+}
+
 .page-4 .text-container h2 {
     max-width: calc(var(--sec-vwu)*26) !important;
 }
@@ -929,6 +969,10 @@ main .section-bg {
         float: left;
     }
 
+    [dir="rtl"] .roadmap>p:first-child {
+        float: right;
+    }
+
     .roadmap p.title span {
         display: inline;
     }
diff --git a/website/src/index.html b/website/src/index.html
index c044d5d17a..110b91164e 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -166,17 +166,17 @@ active_home: true
                         <h2>{{ "index-roadmap-h2" | i18n({}, lang) }}</h2>
                         <div class="roadmap">
                             <p>{{ "index-roadmap-2025" | i18n({}, lang) }} </p>
-                            <p class="title"><span>: </span>{{ "index-roadmap-2025-title" | i18n({}, lang) }}</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>{{ "index-roadmap-2025-title" | i18n({}, lang) }}</p>
                             <p>{{ "index-roadmap-2025-desc" | i18n({}, lang) }}</p>
                         </div>
                         <div class="roadmap">
                             <p>{{ "index-roadmap-2026" | i18n({}, lang) }} </p>
-                            <p class="title"><span>: </span>{{ "index-roadmap-2026-title" | i18n({}, lang) }}</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>{{ "index-roadmap-2026-title" | i18n({}, lang) }}</p>
                             <p>{{ "index-roadmap-2026-desc" | i18n({}, lang) }}</p>
                         </div>
                         <div class="roadmap">
                             <p>{{ "index-roadmap-2027" | i18n({}, lang) }} </p>
-                            <p class="title"><span>: </span>{{ "index-roadmap-2027-title" | i18n({}, lang) }}</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>{{ "index-roadmap-2027-title" | i18n({}, lang) }}</p>
                             <p>{{ "index-roadmap-2027-desc" | i18n({}, lang) }}</p>
                         </div>
                     </div>
@@ -235,19 +235,19 @@ active_home: true
     (function navColorOnScroll(){
         const header = document.querySelector('header#navbar');
         const cover = document.querySelector('.page-1.cover');
-        if (!header || !cover || !('IntersectionObserver' in window)) {
+        const footer = document.querySelector('.footer.page');
+        if (!header || !cover || !footer || !('IntersectionObserver' in window)) {
             window.addEventListener('load', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10));
             window.addEventListener('scroll', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10));
             return;
         }
         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.02;
-            document.body.classList.toggle('change-nav-color', !onCover);
-            }
+            // if cover or footer is mostly visible, keep white nav; else switch to #001796
+            const onObserved = entries.some((e) => e.isIntersecting && e.intersectionRatio >= 0.02);
+            document.body.classList.toggle('change-nav-color', !onObserved);
         }, { threshold: [0, 0.02, 1] });
         io.observe(cover);
+        io.observe(footer);
     })();
     </script>
     <script>