From 105a87fac6c439837eac0fd1773158c7e1727f07 Mon Sep 17 00:00:00 2001
From: Goudarz Jafari <me@goudarzjafari.com>
Date: Wed, 22 Apr 2026 18:31:09 +0330
Subject: [PATCH] feat(ui): add RTL support and Persian (fa) styles to CSS

---
 src/styles/landing.css | 44 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/styles/landing.css b/src/styles/landing.css
index 63c39211..a8f8cda8 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -276,6 +276,10 @@
       text-transform: uppercase;
       letter-spacing: 0.12em;
       opacity: 0.9;
+
+      [lang^="fa"] & {
+        letter-spacing: unset;
+      }
     }
 
     /* ===== SCROLL CUE ===== */
@@ -327,6 +331,10 @@
       border-image: linear-gradient(90deg, #d32f2f, transparent) 1;
       padding-bottom: 0.5rem;
       margin-bottom: 1.25rem;
+
+      [dir="rtl"] & {
+        border-image: linear-gradient(-90deg, #d32f2f, transparent) 1;
+      }
     }
 
     section h3 {
@@ -433,6 +441,11 @@
     [data-theme="dark"] .callout-trapdoor em,
     [data-theme="dark"] .callout-trapdoor i {
       color: #ffab91;
+
+      [dir="rtl"] & {
+        font-style: oblique -14deg;
+      }
+      
     }
 
     [data-theme="dark"] .callout-trapdoor strong {
@@ -461,6 +474,11 @@
       margin-bottom: 0.35rem;
       border-radius: 0.35rem;
       transition: background 0.15s;
+
+      [dir="rtl"] & {
+        padding: 0.5rem 3rem 0.5rem 0.75rem;
+        text-align: right;
+      }
     }
 
     .scare-steps li::before {
@@ -480,6 +498,15 @@
       font-size: 0.85rem;
     }
 
+    [lang^="fa"] .scare-steps li::before {
+      content: counter(scare, persian);
+    }
+
+    [dir="rtl"] .scare-steps li::before {
+      left: auto;
+      right: 0.5rem;
+    }
+
     [data-theme="dark"] .scare-steps li::before {
       background: rgba(239, 83, 80, 0.2);
       color: #ef5350;
@@ -566,6 +593,11 @@
       border-radius: 0.75rem;
       background: rgba(52, 152, 219, 0.04);
       border-left: 3px solid #3498db;
+
+      [dir="rtl"] & {
+        border-right: 3px solid #3498db;
+        border-left: unset;
+      }
     }
 
     [data-theme="dark"] .action-section .action-block {
@@ -937,11 +969,19 @@
       transition: transform 0.2s, opacity 0.2s;
       min-width: 1.5rem;
       text-align: right;
+
+      [dir="rtl"] & {
+        transform: scaleX(-1);
+      }
     }
 
     .cta-banner-link:hover .cta-banner-arrow {
       transform: translateX(4px);
       opacity: 1;
+
+      [dir="rtl"] & {
+        transform: scaleX(-1);
+      }
     }
 
     @media (max-width: 600px) {
@@ -1217,3 +1257,7 @@
     .footer-legal p {
       margin: 0.25rem 0;
     }
+
+    [dir="rtl"] em, [dir="rtl"] i {
+        font-style: oblique -14deg;
+    }