/* * Persian (fa) layer — Kalameh webfont + RTL overrides. * Loaded only on /fa/ pages (when has dir="rtl" / class "lang-fa"). * The Farsi-Numerals build of Kalameh renders Latin digits as Persian numerals. */ @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 100; font-display: swap; src: url('/font/KalamehWebFaNum-Thin.woff2') format('woff2'), url('/font/KalamehWebFaNum-Thin.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 200; font-display: swap; src: url('/font/KalamehWebFaNum-ExtraLight.woff2') format('woff2'), url('/font/KalamehWebFaNum-ExtraLight.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 300; font-display: swap; src: url('/font/KalamehWebFaNum-Light.woff2') format('woff2'), url('/font/KalamehWebFaNum-Light.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 400; font-display: swap; src: url('/font/KalamehWebFaNum-Regular.woff2') format('woff2'), url('/font/KalamehWebFaNum-Regular.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 500; font-display: swap; src: url('/font/KalamehWebFaNum-Medium.woff2') format('woff2'), url('/font/KalamehWebFaNum-Medium.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 600; font-display: swap; src: url('/font/KalamehWebFaNum-SemiBold.woff2') format('woff2'), url('/font/KalamehWebFaNum-SemiBold.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 700; font-display: swap; src: url('/font/KalamehWebFaNum-Bold.woff2') format('woff2'), url('/font/KalamehWebFaNum-Bold.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 800; font-display: swap; src: url('/font/KalamehWebFaNum-ExtraBold.woff2') format('woff2'), url('/font/KalamehWebFaNum-ExtraBold.woff') format('woff'); } @font-face { font-family: 'KalamehWeb'; font-style: normal; font-weight: 900; font-display: swap; src: url('/font/KalamehWebFaNum-Black.woff2') format('woff2'), url('/font/KalamehWebFaNum-Black.woff') format('woff'); } /* ---- Persian typography ---- */ .lang-fa, .lang-fa body, .lang-fa input, .lang-fa textarea, .lang-fa select, .lang-fa button, .lang-fa .theme-btn, .lang-fa h1, .lang-fa h2, .lang-fa h3, .lang-fa h4, .lang-fa h5, .lang-fa h6, .lang-fa p, .lang-fa a, .lang-fa span, .lang-fa li, .lang-fa em, .lang-fa blockquote { font-family: 'KalamehWeb', 'Inter', 'Segoe UI', Tahoma, sans-serif !important; font-style: normal !important; } /* `em` accents (e.g. the footer CTA word) are styled Playfair-italic for English — that Latin face can't render Persian, so reset to upright Kalameh. */ .lang-fa em { font-style: normal; } .lang-fa .footer-big-text em { font-size: 1em; } .lang-fa body { direction: rtl; text-align: right; } /* Latin brand names / inline-English keep a sensible LTR run inside RTL text */ .lang-fa .ltr, .lang-fa [lang="en"] { direction: ltr; unicode-bidi: isolate; } /* Persian script is taller and connected: kill the Latin negative tracking (which cramps joined letters) and give headings room to breathe. */ .lang-fa h1, .lang-fa h2, .lang-fa h3, .lang-fa h4, .lang-fa h5, .lang-fa h6, .lang-fa .section-heading, .lang-fa .cap-title, .lang-fa .rec-head h2 { letter-spacing: normal !important; } /* Hero headline: the tight 1.08 line-height made the gradient line collide with the line above in Persian — loosen it and add a little gap. */ .lang-fa .hero-area h1 { line-height: 1.55 !important; } .lang-fa .hero-area h1 .grad { line-height: 1.7; padding-bottom: .04em; } /* Footer: the theme hard-codes `text-align: left`, which left this RTL footer's headings/links hugging the wrong edge of their columns. */ .lang-fa .footer-area, .lang-fa .footer-big-text { text-align: right; } /* hover marker + indent live on the physical left — flip them to the right */ .lang-fa .footer-area .footer-grid .footer-menu li a::before { left: auto; right: 0; } .lang-fa .footer-area .footer-grid .footer-menu li a:hover { padding-left: 0; padding-right: 16px; } /* ---- RTL flips for utility/layout bits that are physically biased ---- */ .lang-fa .skip-link { left: auto; right: 6px; } /* Header / nav */ .lang-fa .navbar .sub-menu { text-align: right; } .lang-fa .menu-item-has-children > a .iconoir-nav-arrow-down { margin-right: 4px; margin-left: 0; } /* Generic: reflect common margin helpers used in this codebase. Most layout uses flexbox + bootstrap grid, which follow `direction` automatically, so we only correct text alignment + a few icon offsets. */ .lang-fa .section-heading, .lang-fa .footer-bottom, .lang-fa .copyright { text-align: center; } /* Badge marking case-study links that open in English */ .lang-fa .en-badge { display: inline-flex; align-items: center; font-family: 'Inter', sans-serif !important; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; opacity: .85; direction: ltr; margin-inline-start: 8px; vertical-align: middle; } /* Language toggle: keep both EN/فا labels visually LTR-stable in RTL context */ .lang-fa .lang-toggle { direction: ltr; } /* ---- Translated-articles section (fa-only pages) ---- */ .lang-fa .trans-figure { margin: 24px 0; } .lang-fa .trans-figure img { width: 100%; height: auto; border-radius: 20px; } .lang-fa .trans-figure figcaption { margin-top: 8px; font-size: 12px; opacity: .6; text-align: center; } .lang-fa .trans-source-box { margin-top: 40px; padding: 24px; border-radius: 20px; } .lang-fa .trans-source-box h3 { margin-bottom: 12px; } .lang-fa .trans-source-box p { font-size: 14px; line-height: 1.9; } .lang-fa .trans-source-box a:not(.theme-btn) { text-decoration: underline; color: inherit; } .lang-fa .translator-card { text-align: center; } .lang-fa .translator-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; display: block; border: 2px solid rgba(255, 255, 255, .18); } .lang-fa .translator-card p { font-size: 14px; line-height: 1.9; } .lang-fa .trans-note { font-size: 13px; line-height: 2; opacity: .8; border: 1px dashed rgba(255, 255, 255, .28); border-radius: 14px; padding: 12px 18px; margin: 18px 0 6px; } .lang-fa .trans-nav { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; } .lang-fa .trans-nav a { display: block; flex: 1; min-width: 220px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); color: inherit; transition: background .25s ease, border-color .25s ease; } .lang-fa .trans-nav a span { display: block; font-size: 12px; opacity: .6; margin-bottom: 6px; } .lang-fa .trans-nav a:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .3); } /* Translations listing: search box + empty state (filter/sort reuse .apps-* ) */ .lang-fa .tr-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lang-fa .tr-search { font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; min-width: 210px; transition: border-color .25s ease; } .lang-fa .tr-search:focus { outline: none; border-color: var(--brand); } .lang-fa .tr-search::placeholder { color: var(--text-3); } .lang-fa .tr-empty { text-align: center; padding: 40px 24px; border-radius: 20px; margin-top: 8px; } .lang-fa .tr-empty p { margin-bottom: 16px; } /* ============================================================ FA home page: translations promo card Two columns on desktop -- the pitch (big count, title, text, CTA) beside a 2x2 grid of facts. Everything aligns to the inline start, so it reads correctly right-to-left instead of inheriting the centred / left-aligned capability-area defaults. ============================================================ */ .lang-fa .translations-area .cap-block.tr-promo { padding: 40px; } .lang-fa .tr-promo-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; } /* ---- left column: the pitch ---- */ .lang-fa .tr-promo-main { text-align: start; } .lang-fa .tr-stat { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .lang-fa .tr-stat-num { font-size: clamp(52px, 7vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.03em; background: linear-gradient(120deg, var(--brand-3), var(--brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lang-fa .tr-stat-label { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text-3); padding-bottom: 4px; } .lang-fa .tr-promo-title { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; line-height: 1.6; letter-spacing: -.02em; color: var(--text); margin: 0 0 14px; } .lang-fa .tr-promo-title .grad { background: linear-gradient(120deg, var(--brand-3), var(--brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lang-fa .tr-promo-text { font-size: 15.5px; line-height: 2; color: var(--text-2); margin: 0 0 26px; max-width: 46ch; } .lang-fa .tr-promo-btn { margin: 0; } /* ---- right column: the facts ---- */ .lang-fa .tr-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; } .lang-fa .tr-fact { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); text-align: start; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .lang-fa .tr-fact-ico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(70, 71, 174, 0.2), rgba(170, 204, 214, 0.15)); border: 1px solid var(--border); color: var(--brand-2); transition: color .4s var(--ease), transform .4s var(--ease); } .lang-fa .tr-fact-ico svg { width: 23px; height: 23px; } .lang-fa .tr-fact-txt { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.7; color: var(--text-3); } .lang-fa .tr-fact-txt b { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; } .lang-fa .tr-fact:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: 0 18px 40px -20px var(--brand-glow); } .lang-fa .tr-fact:hover .tr-fact-ico { color: var(--brand-3); transform: scale(1.06); } /* ---- responsive ---- */ @media (max-width: 991px) { .lang-fa .tr-promo-grid { grid-template-columns: 1fr; gap: 34px; } } @media (max-width: 575px) { .lang-fa .translations-area .cap-block.tr-promo { padding: 28px 20px; } .lang-fa .tr-facts { grid-template-columns: 1fr; } .lang-fa .tr-fact { flex-direction: row; align-items: center; padding: 16px; } .lang-fa .tr-promo-text { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .lang-fa .tr-fact, .lang-fa .tr-fact-ico { transition: none; } .lang-fa .tr-fact:hover { transform: none; } .lang-fa .tr-fact:hover .tr-fact-ico { transform: none; } } /* Topic-cluster cross-links, generated by build.mjs from scripts/clusters.json */ .lang-fa .trans-cluster { margin-top: 32px; padding: 24px; border-radius: 20px; display: block; } .lang-fa .trans-cluster h3 { margin-bottom: 6px; } .lang-fa .trans-cluster-group { margin-top: 18px; } .lang-fa .trans-cluster-group h4 { font-size: 13px; letter-spacing: .04em; opacity: .55; margin-bottom: 10px; font-weight: 500; } .lang-fa .trans-cluster-group a { display: inline-block; margin: 0 0 8px 8px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; line-height: 1.6; border: 1px solid rgba(255, 255, 255, .14); color: inherit; transition: background .25s ease, border-color .25s ease; } .lang-fa .trans-cluster-group a:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .32); } .notion-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 16px; font-size: 14px; line-height: 1.7; color: #b9b4c7; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .notion-note i { flex-shrink: 0; color: #8b7cff; font-size: 18px; } .pwa-install-prompt[hidden] { display: none !important; } /* English: bottom-right */ .pwa-install-prompt--en { right: 24px; left: auto; direction: ltr; } /* Persian: bottom-left */ .pwa-install-prompt--fa { right: auto; left: 24px; direction: rtl; } /* Main install button */ .pwa-install-action { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 5px 6px 5px 5px; color: inherit; background: transparent; border: 0; border-radius: 12px; font: inherit; text-align: left; cursor: pointer; transition: background-color 180ms ease; } .pwa-install-action:hover { background: rgba(255, 255, 255, 0.06); } .pwa-install-action:focus-visible, .pwa-install-dismiss:focus-visible { outline: 2px solid #9eeaf1; outline-offset: 2px; } /* RTL: correct text alignment */ .pwa-install-prompt--fa .pwa-install-action { padding: 5px 5px 5px 6px; text-align: right; } /* Icon */ .pwa-install-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; color: #101016; background: #a6edf3; border-radius: 11px; } .pwa-install-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Content */ .pwa-install-content { display: flex; flex-direction: column; gap: 2px; min-width: 150px; } .pwa-install-title { color: #fff; font-size: 13px; font-weight: 650; line-height: 1.35; } .pwa-install-subtitle { color: rgba(255, 255, 255, 0.5); font-size: 11px; font-weight: 400; line-height: 1.4; } /* Close button */ .pwa-install-dismiss { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; margin: 0; color: rgba(255, 255, 255, 0.45); background: transparent; border: 0; border-radius: 8px; font-family: inherit; font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer; transition: color 180ms ease, background-color 180ms ease; } .pwa-install-dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } .pwa-install-prompt { flex-wrap: nowrap; } .pwa-install-action { flex: 1 1 auto; min-width: 0; } .pwa-install-dismiss { flex-shrink: 0; } @media (max-width: 576px) { .pwa-install-prompt--en { right: 14px; } .pwa-install-prompt--fa { left: 14px; } .pwa-install-prompt { bottom: 14px; border-radius: 14px; } .pwa-install-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; } .pwa-install-content { min-width: auto; } }