diff --git a/about/index.html b/about/index.html
index 68fce039e2..2e0fa26533 100644
--- a/about/index.html
+++ b/about/index.html
@@ -104,8 +104,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/ar/contact/index.html b/ar/contact/index.html
index 9a082159a0..233ba12ddb 100644
--- a/ar/contact/index.html
+++ b/ar/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ar" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ar" 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/ar/fdroid/index.html b/ar/fdroid/index.html
index a888276e18..1d1a30cb8b 100644
--- a/ar/fdroid/index.html
+++ b/ar/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ar" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ar" 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/ar/index.html b/ar/index.html
index 3017987061..8abe79f523 100644
--- a/ar/index.html
+++ b/ar/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ar" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ar" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>خارطة طريق SimpleX للإنترنت المجاني</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>التوسع إلى مجتمعات كبيرة</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>التوسع إلى مجتمعات كبيرة</p>
                             <p>الهروب من المنصات المركزية</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>مجتمعات وخوادم مستدامة</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>مجتمعات وخوادم مستدامة</p>
                             <p>إطلاق قسائم المجتمع</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>اجعل مجتمعاتك تنمو</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>اجعل مجتمعاتك تنمو</p>
                             <p>أدوات لتعزيز مجتمعاتك</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/ar/invitation/index.html b/ar/invitation/index.html
index bb27d50d98..d39ba40d20 100644
--- a/ar/invitation/index.html
+++ b/ar/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ar" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ar" 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/ar/messaging/index.html b/ar/messaging/index.html
index 1071565cd7..49df641fc8 100644
--- a/ar/messaging/index.html
+++ b/ar/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ar" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ar" 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/ar/old/index.html b/ar/old/index.html
index a66d3cf607..13ed13b247 100644
--- a/ar/old/index.html
+++ b/ar/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ar" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ar" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ar" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ar" 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/bg/contact/index.html b/bg/contact/index.html
index 8ff70954fb..40c8b83df2 100644
--- a/bg/contact/index.html
+++ b/bg/contact/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/bg" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/bg" 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/bg/fdroid/index.html b/bg/fdroid/index.html
index 97a8daf644..f8e34aa2d7 100644
--- a/bg/fdroid/index.html
+++ b/bg/fdroid/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/bg" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/bg" 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/bg/index.html b/bg/index.html
index f5aab22e38..0bbae9e06b 100644
--- a/bg/index.html
+++ b/bg/index.html
@@ -130,8 +130,8 @@
 
 
 <header id="navbar">
-    <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/bg" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/bg" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -351,6 +351,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -629,17 +635,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -827,19 +833,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/bg/invitation/index.html b/bg/invitation/index.html
index 527328dcaa..f9785bb005 100644
--- a/bg/invitation/index.html
+++ b/bg/invitation/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/bg" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/bg" 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/bg/messaging/index.html b/bg/messaging/index.html
index fad8ad05c4..4c645b78a2 100644
--- a/bg/messaging/index.html
+++ b/bg/messaging/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/bg" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/bg" 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/bg/old/index.html b/bg/old/index.html
index 30696c4e62..9792e9b98c 100644
--- a/bg/old/index.html
+++ b/bg/old/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/bg" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/bg" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/bg" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/bg" 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/blog/20201022-simplex-chat.html b/blog/20201022-simplex-chat.html
index fc37bc4e8f..a4323f2484 100644
--- a/blog/20201022-simplex-chat.html
+++ b/blog/20201022-simplex-chat.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20210512-simplex-chat-terminal-ui.html b/blog/20210512-simplex-chat-terminal-ui.html
index 78b7dfc1a9..163a5fee40 100644
--- a/blog/20210512-simplex-chat-terminal-ui.html
+++ b/blog/20210512-simplex-chat-terminal-ui.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20210914-simplex-chat-v0.4-released.html b/blog/20210914-simplex-chat-v0.4-released.html
index 9d3251bdf7..b4bb65abc6 100644
--- a/blog/20210914-simplex-chat-v0.4-released.html
+++ b/blog/20210914-simplex-chat-v0.4-released.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20211208-simplex-chat-v0.5-released.html b/blog/20211208-simplex-chat-v0.5-released.html
index d1872ca290..23915a0c68 100644
--- a/blog/20211208-simplex-chat-v0.5-released.html
+++ b/blog/20211208-simplex-chat-v0.5-released.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220112-simplex-chat-v1-released.html b/blog/20220112-simplex-chat-v1-released.html
index aba8945af3..19ecf277eb 100644
--- a/blog/20220112-simplex-chat-v1-released.html
+++ b/blog/20220112-simplex-chat-v1-released.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220214-simplex-chat-ios-public-beta.html b/blog/20220214-simplex-chat-ios-public-beta.html
index 695463e5e7..8d4ed257cd 100644
--- a/blog/20220214-simplex-chat-ios-public-beta.html
+++ b/blog/20220214-simplex-chat-ios-public-beta.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220308-simplex-chat-mobile-apps.html b/blog/20220308-simplex-chat-mobile-apps.html
index 7d329898b4..09830291c0 100644
--- a/blog/20220308-simplex-chat-mobile-apps.html
+++ b/blog/20220308-simplex-chat-mobile-apps.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220404-simplex-chat-instant-notifications.html b/blog/20220404-simplex-chat-instant-notifications.html
index b9c0924491..d7d824eb3a 100644
--- a/blog/20220404-simplex-chat-instant-notifications.html
+++ b/blog/20220404-simplex-chat-instant-notifications.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220511-simplex-chat-v2-images-files.html b/blog/20220511-simplex-chat-v2-images-files.html
index 9c372f3e6d..f029de426c 100644
--- a/blog/20220511-simplex-chat-v2-images-files.html
+++ b/blog/20220511-simplex-chat-v2-images-files.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220524-simplex-chat-better-privacy.html b/blog/20220524-simplex-chat-better-privacy.html
index 2bb50a2dc3..646f9003e7 100644
--- a/blog/20220524-simplex-chat-better-privacy.html
+++ b/blog/20220524-simplex-chat-better-privacy.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220604-simplex-chat-new-privacy-security-settings.html b/blog/20220604-simplex-chat-new-privacy-security-settings.html
index bc02a88b0a..4e9454b5ab 100644
--- a/blog/20220604-simplex-chat-new-privacy-security-settings.html
+++ b/blog/20220604-simplex-chat-new-privacy-security-settings.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements.html b/blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements.html
index b2f231844a..c7b4a1709d 100644
--- a/blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements.html
+++ b/blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220723-simplex-chat-v3.1-tor-groups-efficiency.html b/blog/20220723-simplex-chat-v3.1-tor-groups-efficiency.html
index 68b30a1f21..09b63847a8 100644
--- a/blog/20220723-simplex-chat-v3.1-tor-groups-efficiency.html
+++ b/blog/20220723-simplex-chat-v3.1-tor-groups-efficiency.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220808-simplex-chat-v3.1-chat-groups.html b/blog/20220808-simplex-chat-v3.1-chat-groups.html
index b6d9953843..027c40d5d7 100644
--- a/blog/20220808-simplex-chat-v3.1-chat-groups.html
+++ b/blog/20220808-simplex-chat-v3.1-chat-groups.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220901-simplex-chat-v3.2-incognito-mode.html b/blog/20220901-simplex-chat-v3.2-incognito-mode.html
index 198839d721..6178178af5 100644
--- a/blog/20220901-simplex-chat-v3.2-incognito-mode.html
+++ b/blog/20220901-simplex-chat-v3.2-incognito-mode.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20220928-simplex-chat-v4-encrypted-database.html b/blog/20220928-simplex-chat-v4-encrypted-database.html
index 2e33f7db2a..f62864b63f 100644
--- a/blog/20220928-simplex-chat-v4-encrypted-database.html
+++ b/blog/20220928-simplex-chat-v4-encrypted-database.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html b/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html
index 646b1d8cd1..2eaf83fc70 100644
--- a/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html
+++ b/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20221206-simplex-chat-v4.3-voice-messages.html b/blog/20221206-simplex-chat-v4.3-voice-messages.html
index 0c05e5128d..bc206aa7f0 100644
--- a/blog/20221206-simplex-chat-v4.3-voice-messages.html
+++ b/blog/20221206-simplex-chat-v4.3-voice-messages.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230103-simplex-chat-v4.4-disappearing-messages.html b/blog/20230103-simplex-chat-v4.4-disappearing-messages.html
index 4c826cc041..a05867c3ed 100644
--- a/blog/20230103-simplex-chat-v4.4-disappearing-messages.html
+++ b/blog/20230103-simplex-chat-v4.4-disappearing-messages.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230204-simplex-chat-v4-5-user-chat-profiles.html b/blog/20230204-simplex-chat-v4-5-user-chat-profiles.html
index fceb3b2a51..bb73295a87 100644
--- a/blog/20230204-simplex-chat-v4-5-user-chat-profiles.html
+++ b/blog/20230204-simplex-chat-v4-5-user-chat-profiles.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230301-simplex-file-transfer-protocol.html b/blog/20230301-simplex-file-transfer-protocol.html
index cf893f84e6..fbc7098c32 100644
--- a/blog/20230301-simplex-file-transfer-protocol.html
+++ b/blog/20230301-simplex-file-transfer-protocol.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230328-simplex-chat-v4-6-hidden-profiles.html b/blog/20230328-simplex-chat-v4-6-hidden-profiles.html
index b36c098983..f20256642b 100644
--- a/blog/20230328-simplex-chat-v4-6-hidden-profiles.html
+++ b/blog/20230328-simplex-chat-v4-6-hidden-profiles.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230422-simplex-chat-vision-funding-v5-videos-files-passcode.html b/blog/20230422-simplex-chat-vision-funding-v5-videos-files-passcode.html
index 75bc3474e8..ad4bf301a8 100644
--- a/blog/20230422-simplex-chat-vision-funding-v5-videos-files-passcode.html
+++ b/blog/20230422-simplex-chat-vision-funding-v5-videos-files-passcode.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230523-simplex-chat-v5-1-message-reactions-self-destruct-passcode.html b/blog/20230523-simplex-chat-v5-1-message-reactions-self-destruct-passcode.html
index 425716b0c0..94aeb21ee2 100644
--- a/blog/20230523-simplex-chat-v5-1-message-reactions-self-destruct-passcode.html
+++ b/blog/20230523-simplex-chat-v5-1-message-reactions-self-destruct-passcode.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230722-simplex-chat-v5-2-message-delivery-receipts.html b/blog/20230722-simplex-chat-v5-2-message-delivery-receipts.html
index 6b528a2f61..026ccc4466 100644
--- a/blog/20230722-simplex-chat-v5-2-message-delivery-receipts.html
+++ b/blog/20230722-simplex-chat-v5-2-message-delivery-receipts.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20230925-simplex-chat-v5-3-desktop-app-local-file-encryption-directory-service.html b/blog/20230925-simplex-chat-v5-3-desktop-app-local-file-encryption-directory-service.html
index f5135d9f30..98bdb54ec1 100644
--- a/blog/20230925-simplex-chat-v5-3-desktop-app-local-file-encryption-directory-service.html
+++ b/blog/20230925-simplex-chat-v5-3-desktop-app-local-file-encryption-directory-service.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20231125-simplex-chat-v5-4-link-mobile-desktop-quantum-resistant-better-groups.html b/blog/20231125-simplex-chat-v5-4-link-mobile-desktop-quantum-resistant-better-groups.html
index dd90b5cfc8..143b99a0c9 100644
--- a/blog/20231125-simplex-chat-v5-4-link-mobile-desktop-quantum-resistant-better-groups.html
+++ b/blog/20231125-simplex-chat-v5-4-link-mobile-desktop-quantum-resistant-better-groups.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240124-simplex-chat-infrastructure-costs-v5-5-simplex-ux-private-notes-group-history.html b/blog/20240124-simplex-chat-infrastructure-costs-v5-5-simplex-ux-private-notes-group-history.html
index 473ce41c1f..a334261926 100644
--- a/blog/20240124-simplex-chat-infrastructure-costs-v5-5-simplex-ux-private-notes-group-history.html
+++ b/blog/20240124-simplex-chat-infrastructure-costs-v5-5-simplex-ux-private-notes-group-history.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240314-simplex-chat-v5-6-quantum-resistance-signal-double-ratchet-algorithm.html b/blog/20240314-simplex-chat-v5-6-quantum-resistance-signal-double-ratchet-algorithm.html
index ce7b03b2d2..b9c484aa41 100644
--- a/blog/20240314-simplex-chat-v5-6-quantum-resistance-signal-double-ratchet-algorithm.html
+++ b/blog/20240314-simplex-chat-v5-6-quantum-resistance-signal-double-ratchet-algorithm.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240323-simplex-network-privacy-non-profit-v5-6-quantum-resistant-e2e-encryption-simple-migration.html b/blog/20240323-simplex-network-privacy-non-profit-v5-6-quantum-resistant-e2e-encryption-simple-migration.html
index f997b02db9..27af2db5e9 100644
--- a/blog/20240323-simplex-network-privacy-non-profit-v5-6-quantum-resistant-e2e-encryption-simple-migration.html
+++ b/blog/20240323-simplex-network-privacy-non-profit-v5-6-quantum-resistant-e2e-encryption-simple-migration.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240404-why-i-joined-simplex-chat-esraa-al-shafei.html b/blog/20240404-why-i-joined-simplex-chat-esraa-al-shafei.html
index 5bed1491aa..3ba89d02a1 100644
--- a/blog/20240404-why-i-joined-simplex-chat-esraa-al-shafei.html
+++ b/blog/20240404-why-i-joined-simplex-chat-esraa-al-shafei.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240416-dangers-of-metadata-in-messengers.html b/blog/20240416-dangers-of-metadata-in-messengers.html
index 66d45674b9..ab75f91e1c 100644
--- a/blog/20240416-dangers-of-metadata-in-messengers.html
+++ b/blog/20240416-dangers-of-metadata-in-messengers.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240426-simplex-legally-binding-transparency-v5-7-better-user-experience.html b/blog/20240426-simplex-legally-binding-transparency-v5-7-better-user-experience.html
index a1c55de91e..3e3d3a3b7a 100644
--- a/blog/20240426-simplex-legally-binding-transparency-v5-7-better-user-experience.html
+++ b/blog/20240426-simplex-legally-binding-transparency-v5-7-better-user-experience.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240516-simplex-redefining-privacy-hard-choices.html b/blog/20240516-simplex-redefining-privacy-hard-choices.html
index 74df1b3ab3..e5d20f043f 100644
--- a/blog/20240516-simplex-redefining-privacy-hard-choices.html
+++ b/blog/20240516-simplex-redefining-privacy-hard-choices.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240601-protecting-children-safety-requires-e2e-encryption.html b/blog/20240601-protecting-children-safety-requires-e2e-encryption.html
index 16734cdadb..d76ecb212b 100644
--- a/blog/20240601-protecting-children-safety-requires-e2e-encryption.html
+++ b/blog/20240601-protecting-children-safety-requires-e2e-encryption.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240604-simplex-chat-v5.8-private-message-routing-chat-themes.html b/blog/20240604-simplex-chat-v5.8-private-message-routing-chat-themes.html
index d79de10f6e..d25caf73d2 100644
--- a/blog/20240604-simplex-chat-v5.8-private-message-routing-chat-themes.html
+++ b/blog/20240604-simplex-chat-v5.8-private-message-routing-chat-themes.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240704-future-of-privacy-enforcing-privacy-standards.html b/blog/20240704-future-of-privacy-enforcing-privacy-standards.html
index a0de5679e5..ea3a5d3d45 100644
--- a/blog/20240704-future-of-privacy-enforcing-privacy-standards.html
+++ b/blog/20240704-future-of-privacy-enforcing-privacy-standards.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20240814-simplex-chat-vision-funding-v6-private-routing-new-user-experience.html b/blog/20240814-simplex-chat-vision-funding-v6-private-routing-new-user-experience.html
index 525ffa5539..704dd51ca5 100644
--- a/blog/20240814-simplex-chat-vision-funding-v6-private-routing-new-user-experience.html
+++ b/blog/20240814-simplex-chat-vision-funding-v6-private-routing-new-user-experience.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html b/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html
index 261918bc04..6cbb36c8b3 100644
--- a/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html
+++ b/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20241016-wired-attack-on-privacy.html b/blog/20241016-wired-attack-on-privacy.html
index 59e76871e0..c7dfb959ca 100644
--- a/blog/20241016-wired-attack-on-privacy.html
+++ b/blog/20241016-wired-attack-on-privacy.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20241125-servers-operated-by-flux-true-privacy-and-decentralization-for-all-users.html b/blog/20241125-servers-operated-by-flux-true-privacy-and-decentralization-for-all-users.html
index 63c82d4c86..fb63bb32f5 100644
--- a/blog/20241125-servers-operated-by-flux-true-privacy-and-decentralization-for-all-users.html
+++ b/blog/20241125-servers-operated-by-flux-true-privacy-and-decentralization-for-all-users.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20241210-simplex-network-v6-2-servers-by-flux-business-chats.html b/blog/20241210-simplex-network-v6-2-servers-by-flux-business-chats.html
index 8582eb0dbc..88908c6bdd 100644
--- a/blog/20241210-simplex-network-v6-2-servers-by-flux-business-chats.html
+++ b/blog/20241210-simplex-network-v6-2-servers-by-flux-business-chats.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20241218-oppose-digital-ids-they-break-law-lead-to-mass-scale-surveillance.html b/blog/20241218-oppose-digital-ids-they-break-law-lead-to-mass-scale-surveillance.html
index 60f2cf6343..6771df5080 100644
--- a/blog/20241218-oppose-digital-ids-they-break-law-lead-to-mass-scale-surveillance.html
+++ b/blog/20241218-oppose-digital-ids-they-break-law-lead-to-mass-scale-surveillance.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20250114-simplex-network-large-groups-privacy-preserving-content-moderation.html b/blog/20250114-simplex-network-large-groups-privacy-preserving-content-moderation.html
index d5a60587a2..8e4065cdcf 100644
--- a/blog/20250114-simplex-network-large-groups-privacy-preserving-content-moderation.html
+++ b/blog/20250114-simplex-network-large-groups-privacy-preserving-content-moderation.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20250308-simplex-chat-v6-3-new-user-experience-safety-in-public-groups.html b/blog/20250308-simplex-chat-v6-3-new-user-experience-safety-in-public-groups.html
index d373dad0e5..1ee680abec 100644
--- a/blog/20250308-simplex-chat-v6-3-new-user-experience-safety-in-public-groups.html
+++ b/blog/20250308-simplex-chat-v6-3-new-user-experience-safety-in-public-groups.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20250703-simplex-network-protocol-extension-for-securely-connecting-people.html b/blog/20250703-simplex-network-protocol-extension-for-securely-connecting-people.html
index a757cc1e8d..15a94167a7 100644
--- a/blog/20250703-simplex-network-protocol-extension-for-securely-connecting-people.html
+++ b/blog/20250703-simplex-network-protocol-extension-for-securely-connecting-people.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/20250729-simplex-chat-v6-4-1-welcome-contacts-protect-groups-app-security.html b/blog/20250729-simplex-chat-v6-4-1-welcome-contacts-protect-groups-app-security.html
index a13860e516..3b61c813c1 100644
--- a/blog/20250729-simplex-chat-v6-4-1-welcome-contacts-protect-groups-app-security.html
+++ b/blog/20250729-simplex-chat-v6-4-1-welcome-contacts-protect-groups-app-security.html
@@ -111,8 +111,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/blog/index.html b/blog/index.html
index 7c18d4eb98..4cc7f0b99a 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/contact/index.html b/contact/index.html
index 056bca9dec..98caeba8a4 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/cs/contact/index.html b/cs/contact/index.html
index 1e88bb988e..a7b6e01d4b 100644
--- a/cs/contact/index.html
+++ b/cs/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/cs/fdroid/index.html b/cs/fdroid/index.html
index c683a10160..2dcce77c35 100644
--- a/cs/fdroid/index.html
+++ b/cs/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/cs/index.html b/cs/index.html
index 4cd5ac195a..fbf176c870 100644
--- a/cs/index.html
+++ b/cs/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/cs/invitation/index.html b/cs/invitation/index.html
index 9e56ca67e6..7de297203a 100644
--- a/cs/invitation/index.html
+++ b/cs/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/cs/messaging/index.html b/cs/messaging/index.html
index d508f4cf18..61f3f1e4ad 100644
--- a/cs/messaging/index.html
+++ b/cs/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/cs/old/index.html b/cs/old/index.html
index 5c9a404fd6..4a1b111e56 100644
--- a/cs/old/index.html
+++ b/cs/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/css/design3-nav.css b/css/design3-nav.css
index 8a72c7fd17..e6558823fc 100644
--- a/css/design3-nav.css
+++ b/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/css/design3.css b/css/design3.css
index ad7f2b449a..b669c139cb 100644
--- a/css/design3.css
+++ b/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/css/tailwind.css b/css/tailwind.css
index 43dfbcc427..dbd2e014bf 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -646,6 +646,10 @@ video {
   z-index: 49;
 }
 
+.order-last {
+  order: 9999;
+}
+
 .float-right {
   float: right;
 }
@@ -2098,6 +2102,10 @@ video {
   outline-offset: 2px;
 }
 
+:is([dir="ltr"] .ltr\:order-first) {
+  order: -9999;
+}
+
 :is([dir="ltr"] .ltr\:mr-auto) {
   margin-right: auto;
 }
@@ -2116,6 +2124,10 @@ video {
   border-bottom-right-radius: 34px;
 }
 
+:is([dir="rtl"] .rtl\:order-last) {
+  order: 9999;
+}
+
 :is([dir="rtl"] .rtl\:ml-auto) {
   margin-left: auto;
 }
diff --git a/de/contact/index.html b/de/contact/index.html
index 634940700a..e5c751fb21 100644
--- a/de/contact/index.html
+++ b/de/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/de" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/de" 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/de/fdroid/index.html b/de/fdroid/index.html
index 49731769cc..e79acf31b7 100644
--- a/de/fdroid/index.html
+++ b/de/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/de" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/de" 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/de/index.html b/de/index.html
index da6efad2d4..4a2e022d6b 100644
--- a/de/index.html
+++ b/de/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/de" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/de" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX - Roadmap zum freien Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Skalierung auf große Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Skalierung auf große Communities</p>
                             <p>Ausstieg aus zentralisierten Plattformen</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Nachhaltige Communities &amp; Server</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Nachhaltige Communities &amp; Server</p>
                             <p>Einführung von Community-Gutscheinen</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Lassen Sie Ihre Communities wachsen</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Lassen Sie Ihre Communities wachsen</p>
                             <p>Tools zur Förderung Ihrer Communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/de/invitation/index.html b/de/invitation/index.html
index 4f38161762..b7d3b2d28e 100644
--- a/de/invitation/index.html
+++ b/de/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/de" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/de" 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/de/messaging/index.html b/de/messaging/index.html
index 02ab6b3c7d..f60176f39b 100644
--- a/de/messaging/index.html
+++ b/de/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/de" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/de" 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/de/old/index.html b/de/old/index.html
index 5449013591..7fbca3df6a 100644
--- a/de/old/index.html
+++ b/de/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/de" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/de" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/de" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/de" 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/directory/index.html b/directory/index.html
index b6fef3f142..2a625a5bd8 100644
--- a/directory/index.html
+++ b/directory/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/android.html b/docs/android.html
index 4f11505d35..b720cc634f 100644
--- a/docs/android.html
+++ b/docs/android.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/business.html b/docs/business.html
index 7e7ca7b97c..de7bba86ac 100644
--- a/docs/business.html
+++ b/docs/business.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/cli.html b/docs/cli.html
index 07212fb2cc..46e63538c0 100644
--- a/docs/cli.html
+++ b/docs/cli.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/code_of_conduct.html b/docs/code_of_conduct.html
index f0042d24c4..3b8bb03706 100644
--- a/docs/code_of_conduct.html
+++ b/docs/code_of_conduct.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/contributing.html b/docs/contributing.html
index 66ae3040d0..d690575003 100644
--- a/docs/contributing.html
+++ b/docs/contributing.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/directory.html b/docs/directory.html
index 781fadd349..c177e8a264 100644
--- a/docs/directory.html
+++ b/docs/directory.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/glossary.html b/docs/glossary.html
index 2eef8e78c8..4afa2abb14 100644
--- a/docs/glossary.html
+++ b/docs/glossary.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/app-settings.html b/docs/guide/app-settings.html
index 405f8c9bca..93e23f9615 100644
--- a/docs/guide/app-settings.html
+++ b/docs/guide/app-settings.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/audio-video-calls.html b/docs/guide/audio-video-calls.html
index db6f9a2255..d4270e9438 100644
--- a/docs/guide/audio-video-calls.html
+++ b/docs/guide/audio-video-calls.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/chat-profiles.html b/docs/guide/chat-profiles.html
index b989a12325..8b035b9063 100644
--- a/docs/guide/chat-profiles.html
+++ b/docs/guide/chat-profiles.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/making-connections.html b/docs/guide/making-connections.html
index 6da8fc06a5..22e7960c59 100644
--- a/docs/guide/making-connections.html
+++ b/docs/guide/making-connections.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/managing-data.html b/docs/guide/managing-data.html
index 0b1123e5ac..bb75fa5a09 100644
--- a/docs/guide/managing-data.html
+++ b/docs/guide/managing-data.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/privacy-security.html b/docs/guide/privacy-security.html
index 8bd75a50f6..bac8a7fc08 100644
--- a/docs/guide/privacy-security.html
+++ b/docs/guide/privacy-security.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/readme.html b/docs/guide/readme.html
index 7390598a44..735a6057ee 100644
--- a/docs/guide/readme.html
+++ b/docs/guide/readme.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/secret-groups.html b/docs/guide/secret-groups.html
index 42eaa8824f..b59d237c05 100644
--- a/docs/guide/secret-groups.html
+++ b/docs/guide/secret-groups.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/guide/send-messages.html b/docs/guide/send-messages.html
index fcec325376..e72baa7735 100644
--- a/docs/guide/send-messages.html
+++ b/docs/guide/send-messages.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/lang/cs/android.html b/docs/lang/cs/android.html
index 1b48b7207e..5b1276f03d 100644
--- a/docs/lang/cs/android.html
+++ b/docs/lang/cs/android.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/docs/lang/cs/cli.html b/docs/lang/cs/cli.html
index 7b8a8c22c6..fa501fe29a 100644
--- a/docs/lang/cs/cli.html
+++ b/docs/lang/cs/cli.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/docs/lang/cs/contributing.html b/docs/lang/cs/contributing.html
index f838ba32f2..be175fcc5e 100644
--- a/docs/lang/cs/contributing.html
+++ b/docs/lang/cs/contributing.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/docs/lang/cs/server.html b/docs/lang/cs/server.html
index 1f146d23ff..e36b43a713 100644
--- a/docs/lang/cs/server.html
+++ b/docs/lang/cs/server.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/docs/lang/cs/simplex.html b/docs/lang/cs/simplex.html
index 7e2637c752..a39f3ec0c8 100644
--- a/docs/lang/cs/simplex.html
+++ b/docs/lang/cs/simplex.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/docs/lang/cs/translations.html b/docs/lang/cs/translations.html
index 315a8a7ec5..8dfaa7d4a7 100644
--- a/docs/lang/cs/translations.html
+++ b/docs/lang/cs/translations.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/docs/lang/cs/webrtc.html b/docs/lang/cs/webrtc.html
index 8ffd9aea00..171622b3fc 100644
--- a/docs/lang/cs/webrtc.html
+++ b/docs/lang/cs/webrtc.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/cs" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/cs" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/cs" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/cs" 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/docs/lang/fr/android.html b/docs/lang/fr/android.html
index fea869a701..54b30836d6 100644
--- a/docs/lang/fr/android.html
+++ b/docs/lang/fr/android.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/docs/lang/fr/cli.html b/docs/lang/fr/cli.html
index 445458ce3a..4b972719d3 100644
--- a/docs/lang/fr/cli.html
+++ b/docs/lang/fr/cli.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/docs/lang/fr/contributing.html b/docs/lang/fr/contributing.html
index 436dc71af7..5c9c1f3164 100644
--- a/docs/lang/fr/contributing.html
+++ b/docs/lang/fr/contributing.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/docs/lang/fr/server.html b/docs/lang/fr/server.html
index b95863cbd9..7a999e97e5 100644
--- a/docs/lang/fr/server.html
+++ b/docs/lang/fr/server.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/docs/lang/fr/simplex.html b/docs/lang/fr/simplex.html
index 7b6707dc9f..7cc7c760ec 100644
--- a/docs/lang/fr/simplex.html
+++ b/docs/lang/fr/simplex.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/docs/lang/fr/translations.html b/docs/lang/fr/translations.html
index edd9b2f9c9..a538a55ac4 100644
--- a/docs/lang/fr/translations.html
+++ b/docs/lang/fr/translations.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/docs/lang/fr/webrtc.html b/docs/lang/fr/webrtc.html
index f6c0021db9..8b933c042d 100644
--- a/docs/lang/fr/webrtc.html
+++ b/docs/lang/fr/webrtc.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/docs/lang/pl/android.html b/docs/lang/pl/android.html
index 026acc4386..8391df8051 100644
--- a/docs/lang/pl/android.html
+++ b/docs/lang/pl/android.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/docs/lang/pl/cli.html b/docs/lang/pl/cli.html
index 927802df9b..4b508e76c1 100644
--- a/docs/lang/pl/cli.html
+++ b/docs/lang/pl/cli.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/docs/lang/pl/contributing.html b/docs/lang/pl/contributing.html
index 1b2003b481..e2b99d4e20 100644
--- a/docs/lang/pl/contributing.html
+++ b/docs/lang/pl/contributing.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/docs/lang/pl/server.html b/docs/lang/pl/server.html
index 43033b9bf6..30455bca89 100644
--- a/docs/lang/pl/server.html
+++ b/docs/lang/pl/server.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/docs/lang/pl/simplex.html b/docs/lang/pl/simplex.html
index face6670a5..1d9e11cebe 100644
--- a/docs/lang/pl/simplex.html
+++ b/docs/lang/pl/simplex.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/docs/lang/pl/translations.html b/docs/lang/pl/translations.html
index d59e5ef3a2..aef4f4880b 100644
--- a/docs/lang/pl/translations.html
+++ b/docs/lang/pl/translations.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/docs/lang/pl/webrtc.html b/docs/lang/pl/webrtc.html
index 905d0dd000..4428c40eed 100644
--- a/docs/lang/pl/webrtc.html
+++ b/docs/lang/pl/webrtc.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/docs/protocol/simplex-chat.html b/docs/protocol/simplex-chat.html
index 708e63aecf..5dfa1c7a2a 100644
--- a/docs/protocol/simplex-chat.html
+++ b/docs/protocol/simplex-chat.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/server.html b/docs/server.html
index 9f52912728..a93e7cc486 100644
--- a/docs/server.html
+++ b/docs/server.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/simplex.html b/docs/simplex.html
index d7885711dd..a608e37262 100644
--- a/docs/simplex.html
+++ b/docs/simplex.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/themes.html b/docs/themes.html
index 764de14920..e1eae63cc7 100644
--- a/docs/themes.html
+++ b/docs/themes.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/trademark.html b/docs/trademark.html
index 3bc0cdae2c..7d176a9d46 100644
--- a/docs/trademark.html
+++ b/docs/trademark.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/translations.html b/docs/translations.html
index aa9fc404db..37d8c79479 100644
--- a/docs/translations.html
+++ b/docs/translations.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/webrtc.html b/docs/webrtc.html
index d47ef2aa2d..b13ccd675a 100644
--- a/docs/webrtc.html
+++ b/docs/webrtc.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/docs/xftp-server.html b/docs/xftp-server.html
index 7e715ff8b1..2eceb24545 100644
--- a/docs/xftp-server.html
+++ b/docs/xftp-server.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/donate/index.html b/donate/index.html
index ccce30b2e8..f1029144e6 100644
--- a/donate/index.html
+++ b/donate/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/downloads/index.html b/downloads/index.html
index 8d225609bc..d37bea59d6 100644
--- a/downloads/index.html
+++ b/downloads/index.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/en/contact/index.html b/en/contact/index.html
index 056bca9dec..98caeba8a4 100644
--- a/en/contact/index.html
+++ b/en/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/en/fdroid/index.html b/en/fdroid/index.html
index cbe799ce19..7bc445226d 100644
--- a/en/fdroid/index.html
+++ b/en/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/en/index.html b/en/index.html
index e959ac61a6..0281c4a093 100644
--- a/en/index.html
+++ b/en/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/en/invitation/index.html b/en/invitation/index.html
index dcde7bb51b..b46defc21a 100644
--- a/en/invitation/index.html
+++ b/en/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/en/messaging/index.html b/en/messaging/index.html
index 44b6927e72..c0b3a9626e 100644
--- a/en/messaging/index.html
+++ b/en/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/en/old/index.html b/en/old/index.html
index 47203861db..a947106d00 100644
--- a/en/old/index.html
+++ b/en/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/es/contact/index.html b/es/contact/index.html
index 787d23503d..2756736316 100644
--- a/es/contact/index.html
+++ b/es/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/es" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/es" 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/es/fdroid/index.html b/es/fdroid/index.html
index 8b86b215a4..99b9287b57 100644
--- a/es/fdroid/index.html
+++ b/es/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/es" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/es" 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/es/index.html b/es/index.html
index d827562f19..a12b593ab0 100644
--- a/es/index.html
+++ b/es/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/es" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/es" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>Ruta SimpleX hacía el Internet Libre</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Escalar a Comunidades Grandes</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Escalar a Comunidades Grandes</p>
                             <p>Huir de plataformas centralizadas</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Comunidades y Servidores Sostenibles</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Comunidades y Servidores Sostenibles</p>
                             <p>Lanzamiento de Vales Comunitarios</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Haz Crecer Tus Comunidades</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Haz Crecer Tus Comunidades</p>
                             <p>Herramientas para la promoción</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/es/invitation/index.html b/es/invitation/index.html
index 7ea831f3b8..2a625d5524 100644
--- a/es/invitation/index.html
+++ b/es/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/es" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/es" 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/es/messaging/index.html b/es/messaging/index.html
index 7fa4c31682..4b0f470c3d 100644
--- a/es/messaging/index.html
+++ b/es/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/es" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/es" 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/es/old/index.html b/es/old/index.html
index 38afb9c5f9..b40f38a0c9 100644
--- a/es/old/index.html
+++ b/es/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/es" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/es" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/es" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/es" 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/fa/contact/index.html b/fa/contact/index.html
index 2d6642444d..b9d83b67e6 100644
--- a/fa/contact/index.html
+++ b/fa/contact/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fa" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fa" 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/fa/fdroid/index.html b/fa/fdroid/index.html
index 85bdbe8329..b0298c36e3 100644
--- a/fa/fdroid/index.html
+++ b/fa/fdroid/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fa" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fa" 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/fa/index.html b/fa/index.html
index 0b422a5ba2..52521c49d6 100644
--- a/fa/index.html
+++ b/fa/index.html
@@ -130,8 +130,8 @@
 
 
 <header id="navbar">
-    <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fa" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fa" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -351,6 +351,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -629,17 +635,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -827,19 +833,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/fa/invitation/index.html b/fa/invitation/index.html
index b927e3ab2a..7308b1cd90 100644
--- a/fa/invitation/index.html
+++ b/fa/invitation/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fa" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fa" 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/fa/messaging/index.html b/fa/messaging/index.html
index cdceda3542..7606a6ec9d 100644
--- a/fa/messaging/index.html
+++ b/fa/messaging/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fa" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fa" 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/fa/old/index.html b/fa/old/index.html
index b2ed49ef83..754dc74f30 100644
--- a/fa/old/index.html
+++ b/fa/old/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/fa" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fa" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fa" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fa" 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/faq/index.html b/faq/index.html
index 9a9552932d..98acc43ef0 100644
--- a/faq/index.html
+++ b/faq/index.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/fdroid/index.html b/fdroid/index.html
index cbe799ce19..7bc445226d 100644
--- a/fdroid/index.html
+++ b/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/fi/contact/index.html b/fi/contact/index.html
index a5d5f05f99..80dcd94e6b 100644
--- a/fi/contact/index.html
+++ b/fi/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fi" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fi" 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/fi/fdroid/index.html b/fi/fdroid/index.html
index 78ac4d6cda..91f1a3cd3c 100644
--- a/fi/fdroid/index.html
+++ b/fi/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fi" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fi" 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/fi/index.html b/fi/index.html
index a351905935..474d6bf182 100644
--- a/fi/index.html
+++ b/fi/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fi" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fi" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/fi/invitation/index.html b/fi/invitation/index.html
index 20a0e18fc8..443698473e 100644
--- a/fi/invitation/index.html
+++ b/fi/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fi" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fi" 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/fi/messaging/index.html b/fi/messaging/index.html
index 0c00ab698c..a803cb7bd2 100644
--- a/fi/messaging/index.html
+++ b/fi/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fi" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fi" 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/fi/old/index.html b/fi/old/index.html
index fdbfed1ac6..193db30243 100644
--- a/fi/old/index.html
+++ b/fi/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fi" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fi" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fi" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fi" 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/fr/contact/index.html b/fr/contact/index.html
index e458d77f69..3e51fa7eee 100644
--- a/fr/contact/index.html
+++ b/fr/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/fr/fdroid/index.html b/fr/fdroid/index.html
index 2b1dfc24ce..2b8df9d33d 100644
--- a/fr/fdroid/index.html
+++ b/fr/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/fr/index.html b/fr/index.html
index 0067154db6..2740e2f784 100644
--- a/fr/index.html
+++ b/fr/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/fr/invitation/index.html b/fr/invitation/index.html
index 88f1032d99..b2a7599204 100644
--- a/fr/invitation/index.html
+++ b/fr/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/fr/messaging/index.html b/fr/messaging/index.html
index bda96a2b21..5fd23c8b6b 100644
--- a/fr/messaging/index.html
+++ b/fr/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/fr/old/index.html b/fr/old/index.html
index 0d0240e2bf..d4c0f04a54 100644
--- a/fr/old/index.html
+++ b/fr/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/fr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/fr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/fr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/fr" 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/he/contact/index.html b/he/contact/index.html
index fdb2080c04..0270e0c453 100644
--- a/he/contact/index.html
+++ b/he/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/he" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/he" 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/he/fdroid/index.html b/he/fdroid/index.html
index e35543e385..ca8d985370 100644
--- a/he/fdroid/index.html
+++ b/he/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/he" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/he" 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/he/index.html b/he/index.html
index f392906c22..c5fad4698c 100644
--- a/he/index.html
+++ b/he/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/he" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/he" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/he/invitation/index.html b/he/invitation/index.html
index fb8c5b2f9f..fb6dddc2f9 100644
--- a/he/invitation/index.html
+++ b/he/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/he" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/he" 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/he/messaging/index.html b/he/messaging/index.html
index a54ddec5f1..2314e563e4 100644
--- a/he/messaging/index.html
+++ b/he/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/he" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/he" 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/he/old/index.html b/he/old/index.html
index 6dfac4615a..b36ed35ec5 100644
--- a/he/old/index.html
+++ b/he/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/he" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/he" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/he" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/he" 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/hu/contact/index.html b/hu/contact/index.html
index c69abc4a35..e17decb7f2 100644
--- a/hu/contact/index.html
+++ b/hu/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/hu" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/hu" 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/hu/fdroid/index.html b/hu/fdroid/index.html
index 4e7b6e7c6f..bec2f7ee22 100644
--- a/hu/fdroid/index.html
+++ b/hu/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/hu" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/hu" 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/hu/index.html b/hu/index.html
index 19ed2b220f..bdb324da5c 100644
--- a/hu/index.html
+++ b/hu/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/hu" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/hu" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>A SimpleX ütemterve a szabad internethez</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Skálázódás nagy közösségekre</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Skálázódás nagy közösségekre</p>
                             <p>Központosított platformok elhagyása</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Fenntartható közösségek és kiszolgálók</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Fenntartható közösségek és kiszolgálók</p>
                             <p>Közösségi utalványok elindítása</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Növelje közösségeit</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Növelje közösségeit</p>
                             <p>Eszközök a közösségei népszerűsítéséhez</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/hu/invitation/index.html b/hu/invitation/index.html
index 70396a5db9..eb4e2c5a87 100644
--- a/hu/invitation/index.html
+++ b/hu/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/hu" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/hu" 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/hu/messaging/index.html b/hu/messaging/index.html
index 96dc644ae3..0505dc5e1a 100644
--- a/hu/messaging/index.html
+++ b/hu/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/hu" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/hu" 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/hu/old/index.html b/hu/old/index.html
index 800c26e1dc..565114155b 100644
--- a/hu/old/index.html
+++ b/hu/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/hu" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/hu" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/hu" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/hu" 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/id/contact/index.html b/id/contact/index.html
index f83b880809..467e950a42 100644
--- a/id/contact/index.html
+++ b/id/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/id" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/id" 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/id/fdroid/index.html b/id/fdroid/index.html
index 9f3c9ee10a..92ad86c3e1 100644
--- a/id/fdroid/index.html
+++ b/id/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/id" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/id" 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/id/index.html b/id/index.html
index adff8d5715..597af2fad0 100644
--- a/id/index.html
+++ b/id/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/id" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/id" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap Menuju Internet Bebas</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Skala ke Komunitas Besar</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Skala ke Komunitas Besar</p>
                             <p>Menghindari platform terpusat</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Komunitas &amp; Server Berkelanjutan</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Komunitas &amp; Server Berkelanjutan</p>
                             <p>Perilisan Voucher Komunitas</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Buat Komunitas Anda Meningkat</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Buat Komunitas Anda Meningkat</p>
                             <p>Alat untuk promosikan komunitas Anda</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/id/invitation/index.html b/id/invitation/index.html
index 2a6f2bf5a4..c98b742802 100644
--- a/id/invitation/index.html
+++ b/id/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/id" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/id" 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/id/messaging/index.html b/id/messaging/index.html
index 6b9c02e572..ebdb9308db 100644
--- a/id/messaging/index.html
+++ b/id/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/id" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/id" 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/id/old/index.html b/id/old/index.html
index 3cc90b5637..2bec2a9e8b 100644
--- a/id/old/index.html
+++ b/id/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/id" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/id" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/id" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/id" 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/index.html b/index.html
index e959ac61a6..0281c4a093 100644
--- a/index.html
+++ b/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/invitation/index.html b/invitation/index.html
index dcde7bb51b..b46defc21a 100644
--- a/invitation/index.html
+++ b/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/it/contact/index.html b/it/contact/index.html
index 6b39bbf448..12299a796f 100644
--- a/it/contact/index.html
+++ b/it/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/it" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/it" 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/it/fdroid/index.html b/it/fdroid/index.html
index 315a10087c..d4117010c2 100644
--- a/it/fdroid/index.html
+++ b/it/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/it" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/it" 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/it/index.html b/it/index.html
index e230d8eb6e..5b3630c8fc 100644
--- a/it/index.html
+++ b/it/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/it" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/it" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>Tabella di marcia per un internet libero</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scalabilità per comunità numerose</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scalabilità per comunità numerose</p>
                             <p>Fuga da piattaforme centralizzate</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Comunità e server sostenibili</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Comunità e server sostenibili</p>
                             <p>Pubblicazione di buoni comunitari</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Fare crescere le tue comunità</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Fare crescere le tue comunità</p>
                             <p>Strumenti per promuovere le tue comunità</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/it/invitation/index.html b/it/invitation/index.html
index c04506ef41..5ce2108e4b 100644
--- a/it/invitation/index.html
+++ b/it/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/it" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/it" 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/it/messaging/index.html b/it/messaging/index.html
index e62b0f7533..f703dbf01b 100644
--- a/it/messaging/index.html
+++ b/it/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/it" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/it" 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/it/old/index.html b/it/old/index.html
index f451d441db..3db118e5a6 100644
--- a/it/old/index.html
+++ b/it/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/it" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/it" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/it" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/it" 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/ja/contact/index.html b/ja/contact/index.html
index 4c5cbacdd1..68fe53093f 100644
--- a/ja/contact/index.html
+++ b/ja/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ja" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ja" 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/ja/fdroid/index.html b/ja/fdroid/index.html
index ff99052df8..79c00517cf 100644
--- a/ja/fdroid/index.html
+++ b/ja/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ja" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ja" 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/ja/index.html b/ja/index.html
index 8917eff246..1a0c4018e3 100644
--- a/ja/index.html
+++ b/ja/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ja" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ja" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/ja/invitation/index.html b/ja/invitation/index.html
index 0882cb5647..7b287471ca 100644
--- a/ja/invitation/index.html
+++ b/ja/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ja" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ja" 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/ja/messaging/index.html b/ja/messaging/index.html
index b24cd1530c..90b379b67d 100644
--- a/ja/messaging/index.html
+++ b/ja/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ja" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ja" 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/ja/old/index.html b/ja/old/index.html
index f2b2d69d76..7981cb0472 100644
--- a/ja/old/index.html
+++ b/ja/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ja" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ja" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ja" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ja" 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/jobs/index.html b/jobs/index.html
index 4a943e6c22..ab7c6916b5 100644
--- a/jobs/index.html
+++ b/jobs/index.html
@@ -104,8 +104,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/messaging/index.html b/messaging/index.html
index 44b6927e72..c0b3a9626e 100644
--- a/messaging/index.html
+++ b/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/nl/contact/index.html b/nl/contact/index.html
index c7b76f21dc..e4a474f48d 100644
--- a/nl/contact/index.html
+++ b/nl/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/nl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/nl" 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/nl/fdroid/index.html b/nl/fdroid/index.html
index abba1aa1b6..d0b90c0a4f 100644
--- a/nl/fdroid/index.html
+++ b/nl/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/nl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/nl" 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/nl/index.html b/nl/index.html
index e006523e09..9b5e17b297 100644
--- a/nl/index.html
+++ b/nl/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/nl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/nl" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/nl/invitation/index.html b/nl/invitation/index.html
index 4494d883c7..dc2b5abfd0 100644
--- a/nl/invitation/index.html
+++ b/nl/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/nl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/nl" 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/nl/messaging/index.html b/nl/messaging/index.html
index 7fc811909b..0896a01afa 100644
--- a/nl/messaging/index.html
+++ b/nl/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/nl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/nl" 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/nl/old/index.html b/nl/old/index.html
index 018ef76773..f66f79febd 100644
--- a/nl/old/index.html
+++ b/nl/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/nl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/nl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/nl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/nl" 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/old/index.html b/old/index.html
index 846577abcc..e06402ec95 100644
--- a/old/index.html
+++ b/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/pl/contact/index.html b/pl/contact/index.html
index b32b160220..0feb0ef344 100644
--- a/pl/contact/index.html
+++ b/pl/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/pl/fdroid/index.html b/pl/fdroid/index.html
index 7c188e6e8e..e7817f2085 100644
--- a/pl/fdroid/index.html
+++ b/pl/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/pl/index.html b/pl/index.html
index 3debc6bcad..3df744ff17 100644
--- a/pl/index.html
+++ b/pl/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/pl/invitation/index.html b/pl/invitation/index.html
index b96f819d33..adf92a1d94 100644
--- a/pl/invitation/index.html
+++ b/pl/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/pl/messaging/index.html b/pl/messaging/index.html
index f32ec0bd14..5965fa4247 100644
--- a/pl/messaging/index.html
+++ b/pl/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/pl/old/index.html b/pl/old/index.html
index c360611ea2..de04545e1c 100644
--- a/pl/old/index.html
+++ b/pl/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pl" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pl" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pl" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pl" 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/privacy/index.html b/privacy/index.html
index bc7d05a445..64e7b4e9ba 100644
--- a/privacy/index.html
+++ b/privacy/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/pt_BR/contact/index.html b/pt_BR/contact/index.html
index 9b62695b08..5612edd1c2 100644
--- a/pt_BR/contact/index.html
+++ b/pt_BR/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pt_BR" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pt_BR" 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/pt_BR/fdroid/index.html b/pt_BR/fdroid/index.html
index 3113873989..609d865e8d 100644
--- a/pt_BR/fdroid/index.html
+++ b/pt_BR/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pt_BR" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pt_BR" 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/pt_BR/index.html b/pt_BR/index.html
index de0223e93a..7525ac820a 100644
--- a/pt_BR/index.html
+++ b/pt_BR/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pt_BR" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pt_BR" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/pt_BR/invitation/index.html b/pt_BR/invitation/index.html
index 5d7f1ecc58..02ea2fed64 100644
--- a/pt_BR/invitation/index.html
+++ b/pt_BR/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pt_BR" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pt_BR" 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/pt_BR/messaging/index.html b/pt_BR/messaging/index.html
index ab537e5a15..76a0a20df1 100644
--- a/pt_BR/messaging/index.html
+++ b/pt_BR/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pt_BR" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pt_BR" 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/pt_BR/old/index.html b/pt_BR/old/index.html
index 5fcff82664..4a79994026 100644
--- a/pt_BR/old/index.html
+++ b/pt_BR/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/pt_BR" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/pt_BR" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/pt_BR" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/pt_BR" 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/reproduce/index.html b/reproduce/index.html
index ae5569b1e8..8d0a7c9923 100644
--- a/reproduce/index.html
+++ b/reproduce/index.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/ro/contact/index.html b/ro/contact/index.html
index 34e0caa712..08d1d26ec9 100644
--- a/ro/contact/index.html
+++ b/ro/contact/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ro" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ro" 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/ro/fdroid/index.html b/ro/fdroid/index.html
index 74e15c0533..6bb199528d 100644
--- a/ro/fdroid/index.html
+++ b/ro/fdroid/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ro" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ro" 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/ro/index.html b/ro/index.html
index 9d7d3db09e..63cf63d8df 100644
--- a/ro/index.html
+++ b/ro/index.html
@@ -130,8 +130,8 @@
 
 
 <header id="navbar">
-    <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ro" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ro" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -351,6 +351,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -629,17 +635,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -827,19 +833,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/ro/invitation/index.html b/ro/invitation/index.html
index b261c5d8c2..1f07ad60be 100644
--- a/ro/invitation/index.html
+++ b/ro/invitation/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ro" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ro" 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/ro/messaging/index.html b/ro/messaging/index.html
index 736a788fea..f3fbcac57a 100644
--- a/ro/messaging/index.html
+++ b/ro/messaging/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ro" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ro" 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/ro/old/index.html b/ro/old/index.html
index d3a843ee7b..9444f0ffb2 100644
--- a/ro/old/index.html
+++ b/ro/old/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/ro" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ro" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ro" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ro" 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/ru/contact/index.html b/ru/contact/index.html
index d9b3b83f39..0060aaa823 100644
--- a/ru/contact/index.html
+++ b/ru/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ru" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ru" 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/ru/fdroid/index.html b/ru/fdroid/index.html
index 44c7918021..fe1916d26b 100644
--- a/ru/fdroid/index.html
+++ b/ru/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ru" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ru" 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/ru/index.html b/ru/index.html
index 25386735b5..91d84cc47d 100644
--- a/ru/index.html
+++ b/ru/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ru" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ru" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>Путь Сети SimpleX к Свободному Интернету</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Большие каналы и группы</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Большие каналы и группы</p>
                             <p>Чтобы Вы могли покинуть централизованные платформы</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Самодостаточные группы и серверы</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Самодостаточные группы и серверы</p>
                             <p>Запуск Ваучеров Групп</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Поддержка роста Ваших групп</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Поддержка роста Ваших групп</p>
                             <p>Инструменты для продвижения групп</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/ru/invitation/index.html b/ru/invitation/index.html
index e9b132b6c6..5056a0d8d5 100644
--- a/ru/invitation/index.html
+++ b/ru/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ru" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ru" 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/ru/messaging/index.html b/ru/messaging/index.html
index 1198374fe2..ba63f11a08 100644
--- a/ru/messaging/index.html
+++ b/ru/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ru" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ru" 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/ru/old/index.html b/ru/old/index.html
index 4c3d8ed8f2..50c46620b9 100644
--- a/ru/old/index.html
+++ b/ru/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/ru" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/ru" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/ru" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/ru" 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/security/index.html b/security/index.html
index 2c8df59763..4b458a79ce 100644
--- a/security/index.html
+++ b/security/index.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/tr/contact/index.html b/tr/contact/index.html
index 40c0bab56c..f01ae4fb33 100644
--- a/tr/contact/index.html
+++ b/tr/contact/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/tr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/tr" 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/tr/fdroid/index.html b/tr/fdroid/index.html
index 9485ead31f..5e697a2a97 100644
--- a/tr/fdroid/index.html
+++ b/tr/fdroid/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/tr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/tr" 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/tr/index.html b/tr/index.html
index a2446069e2..966cba59ae 100644
--- a/tr/index.html
+++ b/tr/index.html
@@ -130,8 +130,8 @@
 
 
 <header id="navbar">
-    <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/tr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/tr" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -351,6 +351,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -629,17 +635,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -827,19 +833,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/tr/invitation/index.html b/tr/invitation/index.html
index bfa2778b81..bd664068ff 100644
--- a/tr/invitation/index.html
+++ b/tr/invitation/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/tr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/tr" 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/tr/messaging/index.html b/tr/messaging/index.html
index b27fcf1a27..c1ef23bcdd 100644
--- a/tr/messaging/index.html
+++ b/tr/messaging/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/tr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/tr" 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/tr/old/index.html b/tr/old/index.html
index 26df3c1183..048000f38a 100644
--- a/tr/old/index.html
+++ b/tr/old/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/tr" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/tr" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/tr" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/tr" 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/transparency/index.html b/transparency/index.html
index cd2c4616c4..518315c9e8 100644
--- a/transparency/index.html
+++ b/transparency/index.html
@@ -105,8 +105,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/uk/contact/index.html b/uk/contact/index.html
index af7da36d82..63ebda359d 100644
--- a/uk/contact/index.html
+++ b/uk/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/uk" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/uk" 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/uk/fdroid/index.html b/uk/fdroid/index.html
index 4324c5d71b..36e494c12c 100644
--- a/uk/fdroid/index.html
+++ b/uk/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/uk" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/uk" 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/uk/index.html b/uk/index.html
index f86b22c8f8..28521e6aff 100644
--- a/uk/index.html
+++ b/uk/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/uk" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/uk" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/uk/invitation/index.html b/uk/invitation/index.html
index 12f4786339..edcf4facef 100644
--- a/uk/invitation/index.html
+++ b/uk/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/uk" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/uk" 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/uk/messaging/index.html b/uk/messaging/index.html
index ee0be6cb30..a1b8918672 100644
--- a/uk/messaging/index.html
+++ b/uk/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/uk" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/uk" 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/uk/old/index.html b/uk/old/index.html
index 428ce04e71..8c6a92606c 100644
--- a/uk/old/index.html
+++ b/uk/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/uk" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/uk" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/uk" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/uk" 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/vouchers/index.html b/vouchers/index.html
index 2f5fdc3ae7..e6becd399e 100644
--- a/vouchers/index.html
+++ b/vouchers/index.html
@@ -295,8 +295,8 @@
 
 
 <header id="navbar">
-    <a href="/" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/" 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/zh_Hans/contact/index.html b/zh_Hans/contact/index.html
index 02787745d8..2bf2dcbeed 100644
--- a/zh_Hans/contact/index.html
+++ b/zh_Hans/contact/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hans" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hans" 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/zh_Hans/fdroid/index.html b/zh_Hans/fdroid/index.html
index 3dbe4a7286..7292044569 100644
--- a/zh_Hans/fdroid/index.html
+++ b/zh_Hans/fdroid/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hans" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hans" 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/zh_Hans/index.html b/zh_Hans/index.html
index 41d7755988..1028e8cd16 100644
--- a/zh_Hans/index.html
+++ b/zh_Hans/index.html
@@ -134,8 +134,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hans" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hans" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -360,6 +360,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -638,17 +644,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -836,19 +842,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/zh_Hans/invitation/index.html b/zh_Hans/invitation/index.html
index c40f220c06..9e80087b1f 100644
--- a/zh_Hans/invitation/index.html
+++ b/zh_Hans/invitation/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hans" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hans" 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/zh_Hans/messaging/index.html b/zh_Hans/messaging/index.html
index f047d172be..98f716838b 100644
--- a/zh_Hans/messaging/index.html
+++ b/zh_Hans/messaging/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hans" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hans" 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/zh_Hans/old/index.html b/zh_Hans/old/index.html
index 8d5d7e52bc..1d21b52ff5 100644
--- a/zh_Hans/old/index.html
+++ b/zh_Hans/old/index.html
@@ -114,8 +114,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hans" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hans" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hans" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hans" 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/zh_Hant/contact/index.html b/zh_Hant/contact/index.html
index f16de1cc89..a56cd68610 100644
--- a/zh_Hant/contact/index.html
+++ b/zh_Hant/contact/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hant" 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/zh_Hant/fdroid/index.html b/zh_Hant/fdroid/index.html
index e7044393df..0bbb78cf17 100644
--- a/zh_Hant/fdroid/index.html
+++ b/zh_Hant/fdroid/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hant" 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/zh_Hant/index.html b/zh_Hant/index.html
index 511f848b51..972219ecf4 100644
--- a/zh_Hant/index.html
+++ b/zh_Hant/index.html
@@ -130,8 +130,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>
@@ -351,6 +351,12 @@
                         
                     
                         
+                            <li>
+                                <a href="/ar/">
+                                    <p>العربية</p>
+                                </a>
+                            </li>
+                        
                     
                         
                     
@@ -629,17 +635,17 @@ window.addEventListener('click',(e)=>{
                         <h2>SimpleX Roadmap to Free Internet</h2>
                         <div class="roadmap">
                             <p>2025 </p>
-                            <p class="title"><span>: </span>Scale to Large Communities</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Scale to Large Communities</p>
                             <p>Escaping centralized platforms</p>
                         </div>
                         <div class="roadmap">
                             <p>2026 </p>
-                            <p class="title"><span>: </span>Sustainable Communities &amp; Servers</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Sustainable Communities &amp; Servers</p>
                             <p>Launching Community Vouchers</p>
                         </div>
                         <div class="roadmap">
                             <p>2027 </p>
-                            <p class="title"><span>: </span>Make Your Communities Grow</p>
+                            <p class="title"><span class="ltr:order-first rtl:order-last">: </span>Make Your Communities Grow</p>
                             <p>Tools to promote your communities</p>
                         </div>
                     </div>
@@ -827,19 +833,19 @@ window.addEventListener('click',(e)=>{
     (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>
diff --git a/zh_Hant/invitation/index.html b/zh_Hant/invitation/index.html
index c2c3d4d532..4af491002f 100644
--- a/zh_Hant/invitation/index.html
+++ b/zh_Hant/invitation/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hant" 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/zh_Hant/messaging/index.html b/zh_Hant/messaging/index.html
index 8b948570f7..b992ae7894 100644
--- a/zh_Hant/messaging/index.html
+++ b/zh_Hant/messaging/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hant" 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/zh_Hant/old/index.html b/zh_Hant/old/index.html
index cea154d9be..04c9dfe460 100644
--- a/zh_Hant/old/index.html
+++ b/zh_Hant/old/index.html
@@ -110,8 +110,8 @@
 
 
 <header id="navbar">
-    <a href="/zh_Hant" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
-    <a href="/zh_Hant" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
+    <a href="/zh_Hant" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
 
     <nav id="menu">
         <ul>