/* Atlantis — Farsi / RTL layer. Active only when . Removing this file and the language toggle fully reverts the site to LTR English. */ /* Yekan Bakh is a licensed typeface: drop the woff2 files into /atlantis/assets/fonts/fa/ (YekanBakh-Thin/Light/Regular/Medium/SemiBold/ Bold/ExtraBold/Black.woff2) and they take priority automatically. Vazirmatn ships as the open fallback in all nine weights so Farsi mode always renders with a proper Persian face. */ @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh Thin"), url("/atlantis/assets/fonts/fa/YekanBakh-Thin.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-100.woff2") format("woff2"); font-weight: 100; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh ExtraLight"), url("/atlantis/assets/fonts/fa/YekanBakh-ExtraLight.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-200.woff2") format("woff2"); font-weight: 200; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh Light"), url("/atlantis/assets/fonts/fa/YekanBakh-Light.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-300.woff2") format("woff2"); font-weight: 300; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh"), url("/atlantis/assets/fonts/fa/YekanBakh-Regular.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh Medium"), url("/atlantis/assets/fonts/fa/YekanBakh-Medium.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh SemiBold"), url("/atlantis/assets/fonts/fa/YekanBakh-SemiBold.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh Bold"), url("/atlantis/assets/fonts/fa/YekanBakh-Bold.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh ExtraBold"), url("/atlantis/assets/fonts/fa/YekanBakh-ExtraBold.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-800.woff2") format("woff2"); font-weight: 800; font-display: swap; } @font-face { font-family: "Yekan Bakh"; src: local("Yekan Bakh Black"), url("/atlantis/assets/fonts/fa/YekanBakh-Black.woff2") format("woff2"), url("/atlantis/assets/fonts/fa/vazirmatn-900.woff2") format("woff2"); font-weight: 900; font-display: swap; } /* Vazirmatn exposed directly too, for numerals and mono-ish UI bits. */ @font-face { font-family: "Vazirmatn"; src: url("/atlantis/assets/fonts/fa/vazirmatn-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("/atlantis/assets/fonts/fa/vazirmatn-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } /* ---------- Typography ---------- */ .at-fa { --at-fa-font: "Yekan Bakh", "Vazirmatn", "IRANSans", Tahoma, sans-serif; } .at-fa body, .at-fa button, .at-fa input, .at-fa textarea, .at-fa select, .at-fa label, .at-fa th, .at-fa td, .at-fa blockquote, .at-fa .at-btn, .at-fa .btn, .at-fa h1, .at-fa h2, .at-fa h3, .at-fa h4, .at-fa h5, .at-fa h6, .at-fa [class*="fz-"], .at-fa [class*="title"], .at-fa .display-1, .at-fa .display-2, .at-fa .display-3, .at-fa .display-4 { font-family: var(--at-fa-font) !important; font-feature-settings: "ss01" 1, "ss02" 1; } .at-fa body { direction: rtl; text-align: right; letter-spacing: 0 !important; word-spacing: 0.02em; } /* Persian text has taller ascenders/descenders than the Latin display face. */ .at-fa h1, .at-fa h2, .at-fa h3, .at-fa .display-1, .at-fa .display-2, .at-fa .display-3 { line-height: 1.42 !important; letter-spacing: 0 !important; word-spacing: 0.04em; } .at-fa h4, .at-fa h5, .at-fa h6 { line-height: 1.6 !important; letter-spacing: 0 !important; } /* Very large display sizes read heavy in Persian — pull them back a notch. */ .at-fa .fz-150, .at-fa .fz-140, .at-fa .fz-130 { font-size: clamp(38px, 7.2vw, 104px) !important; } .at-fa .fz-120, .at-fa .fz-110, .at-fa .fz-100 { font-size: clamp(32px, 5.6vw, 80px) !important; } .at-fa .fz-90, .at-fa .fz-80 { font-size: clamp(28px, 4.4vw, 62px) !important; } .at-fa p, .at-fa li, .at-fa .text-md, .at-fa .text-lg, .at-fa [class*="fz-font"] { line-height: 2.05; } /* Uppercase tricks are meaningless in Persian and break shaping. */ .at-fa .text-uppercase, .at-fa [class*="eyebrow"], .at-fa .btn, .at-fa .at-btn { text-transform: none !important; } /* Farsi glyphs are wider: give pills and buttons a little more breathing room. */ .at-fa .at-btn, .at-fa .btn { letter-spacing: 0 !important; padding-inline: 1.6em; } /* ---------- Direction-aware layout ---------- */ .at-fa .text-start { text-align: right !important; } .at-fa .text-end { text-align: left !important; } .at-fa .me-auto { margin-right: 0 !important; margin-left: auto !important; } .at-fa .ms-auto { margin-left: 0 !important; margin-right: auto !important; } .at-fa .offcanvas-end, .at-fa .offcanvas-start { direction: rtl; } .at-fa .at-offcanvas, .at-fa .at-offcanvas-2-wrapper, .at-fa .at-search-form-toggle { direction: rtl; text-align: right; } .at-fa .at-main-menu ul, .at-fa .at-offcanvas-menu ul, .at-fa .at-categories-list, .at-fa .at-offcanvas-social__grid { direction: rtl; } /* Bootstrap float/offset helpers used by the template. */ .at-fa .float-start { float: right !important; } .at-fa .float-end { float: left !important; } .at-fa .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } .at-fa .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } /* Arrow glyphs inside buttons point the other way in RTL. */ .at-fa .btn svg, .at-fa .at-btn svg, .at-fa .btn i, .at-fa .at-btn i { transform: scaleX(-1); } .at-fa .btn svg[class*="star"], .at-fa .at-btn svg[class*="star"], .at-fa .at-lang-toggle svg { transform: none; } /* Form controls */ .at-fa input, .at-fa textarea, .at-fa select { text-align: right; direction: rtl; } .at-fa input[type="email"], .at-fa input[type="tel"], .at-fa input[type="url"] { direction: ltr; text-align: right; } /* Latin-only decorations stay LTR so they don't reflow mid-sentence. */ .at-fa .h8-big-title, .at-fa .h8-meta-text, .at-fa .carouselTicker, .at-fa .carouselTicker__list, .at-fa [class*="marquee"], .at-fa .odometer, .at-fa .swiper, .at-fa time, .at-fa a[href^="mailto"], .at-fa a[href^="tel"] { direction: ltr; unicode-bidi: isolate; } .at-fa .carouselTicker, .at-fa [class*="marquee"] { text-align: left; } /* ---------- Language toggle ---------- */ .at-lang-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: transform 0.25s ease, opacity 0.25s ease; opacity: 0.85; } .at-lang-toggle:hover { opacity: 1; transform: translateY(-2px); } .at-lang-toggle > span { display: inline-flex; align-items: center; gap: 6px; } .at-lang-toggle button { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; line-height: 1; cursor: pointer; transition: opacity 0.2s ease; } .at-lang-toggle__sep { opacity: 0.4; } .at-lang-toggle__on { font-weight: 700; opacity: 1; } .at-lang-toggle__off { opacity: 0.5; } .at-lang-toggle__off:hover { opacity: 0.85; } .at-fa .at-lang-toggle { font-family: var(--at-fa-font) !important; } @media (max-width: 991.98px) { .at-lang-toggle { padding: 6px 11px; font-size: 12px; } } /* The template's split-text plugin turns headings into one inline box per letter. Under RTL those boxes get laid out right-to-left, which reverses Latin headings ("We build" -> "dliub eW"). Keep any split heading LTR; translated Farsi copy is never split, so nothing Persian is affected. */ .at-fa .at-word-span, .at-fa .at-letter-span, .at-fa .h8-word, .at-fa :is(h1, h2, h3, h4, h5, h6, p, span, div, a):has(> .at-word-span), .at-fa :is(h1, h2, h3, h4, h5, h6, p, span, div, a):has(> .at-letter-span) { direction: ltr; unicode-bidi: isolate; } .at-fa :is(h1, h2, h3, h4, h5, h6, p):has(> .at-word-span) { text-align: right; } /* Bracketed / numeric Latin fragments (phone numbers, dates, coordinates). */ .at-fa .at-loader__word, .at-fa .at-loader__count, .at-fa [class*="phone"], .at-fa [class*="number"], .at-fa [class*="counter"] { direction: ltr; unicode-bidi: isolate; } /* GSAP SplitText output: .split-line wraps one inline-block per word/char. */ .at-fa .split-line, .at-fa [class*="reveal-text"], .at-fa [class*="char-anim"], .at-fa [class*="word-anim"], .at-fa [class*="title-anim"], .at-fa [class*="text-anim"], .at-fa [class*="scale-anim"], .at-fa [class*="scramble"], .at-fa :is(h1, h2, h3, h4, h5, h6, p, div, span):has(> .split-line) { direction: ltr; unicode-bidi: isolate; } .at-fa .split-line { text-align: right !important; } /* ---------- Farsi-only spacing / rhythm fixes ---------- */ /* Wide Persian words overflow tight service cards and pricing rows. */ .at-fa .at-service-card, .at-fa [class*="card"] h3, .at-fa [class*="card"] h4 { word-break: normal; overflow-wrap: anywhere; } /* Persian never uses letter-spaced small caps. */ .at-fa [class*="ls-"], .at-fa [style*="letter-spacing"] { letter-spacing: 0 !important; } /* Lists get their markers on the correct side. */ .at-fa ul, .at-fa ol { padding-right: 1.2rem; padding-left: 0; } .at-fa .at-main-menu ul, .at-fa .at-offcanvas-social__grid, .at-fa .at-categories-list, .at-fa footer ul { padding-right: 0; } /* Quotes / testimonials read better slightly larger in Persian. */ .at-fa blockquote, .at-fa [class*="testimonial"] p { line-height: 2.15; } /* Any element whose text was actually translated flows RTL again — this wins over the LTR guards above that protect untranslated Latin/split markup. */ .at-fa .at-fa-rtl, .at-fa .at-fa-rtl * { direction: rtl !important; unicode-bidi: plaintext !important; } .at-fa :is(h1, h2, h3, h4, h5, h6, p, li, span, div, a).at-fa-rtl { text-align: right !important; } .at-fa .carouselTicker .at-fa-rtl, .at-fa [class*="marquee"] .at-fa-rtl { text-align: center !important; } /* Flattened split headings: the per-letter animation is gone, so give them a simple fade-up instead and make sure nothing is left hidden by GSAP. */ .at-fa .at-fa-flat { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; animation: atFaRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes atFaRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .at-fa .at-fa-flat { animation: none; } } /* ---------- Persian face everywhere (menus, nav, small UI, marquees) ---------- */ .at-fa body, .at-fa a, .at-fa span, .at-fa li, .at-fa p, .at-fa div, .at-fa strong, .at-fa em, .at-fa small, .at-fa figcaption, .at-fa .at-main-menu ul li a, .at-fa .at-main-menu ul li ul li a, .at-fa .at-offcanvas-menu a, .at-fa .at-offcanvas a, .at-fa .at-offcanvas span, .at-fa .at-categories-item, .at-fa .at-footer-copyright, .at-fa .at-footer-widget a, .at-fa .alt-footer-link-item a, .at-fa .at-hero-social a, .at-fa .hamburger-open-btn span, .at-fa .at-select, .at-fa option, .at-fa .filter-btn, .at-fa .at-btn span, .at-fa .btn span, .at-fa [class*="fz-font"], .at-fa [class*="label"], .at-fa .split-line, .at-fa .word, .at-fa .char { font-family: var(--at-fa-font) !important; } /* Icon fonts and SVG glyph helpers must keep their own face. */ .at-fa i, .at-fa i::before, .at-fa [class^="fa-"], .at-fa [class*=" fa-"], .at-fa [class^="icon-"], .at-fa [class*=" icon-"] { font-family: inherit; } .at-fa i[class*="fa-"], .at-fa i[class*="fa-"]::before { font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "fontawesome" !important; } /* The Persian option in the language switcher always renders in Yekan Bakh, even while the site is in English or German. */ .at-lang-toggle button[lang="fa"] { font-family: "Yekan Bakh", "Vazirmatn", "IRANSans", Tahoma, sans-serif !important; font-size: 1.08em; font-weight: 600; letter-spacing: 0; } /* ---------- RTL fixes for absolutely centred badge labels ---------- */ /* Bootstrap's .start-50 flips to `right: 50%` under dir=rtl, which throws the "Let's Talk" label off the badge. Pin these overlays to the true centre. */ [dir="rtl"] .at-btn.p-relative > .position-absolute.start-50, .at-fa .at-btn.p-relative > .position-absolute.start-50 { inset-inline-start: auto !important; right: auto !important; left: 50% !important; text-align: center; } .at-fa .at-btn.bg-transparent.p-relative { flex: 0 0 auto; } /* ---------- Persian hero wordmark ---------- */ .at-fa .sec-1-home-2 .at-title-anim > h1 { font-size: clamp(40px, 9vw, 118px) !important; line-height: 1.15 !important; white-space: nowrap; }