/*
* The Persian edition's stylesheet, injected into after overrides.css
* and only on /fa/ (see src/transform.js). The vendor bundle is never edited,
* and neither is overrides.css - everything here is additive, on top of both.
*
* Two jobs: swap in a Persian typeface everywhere the page sets Latin type
* (without touching a single selector - see "The typeface" below), and turn
* RTL on for the blocks that are actual reading text - prose, the menu, the
* form, the footer - while leaving the decorative, geometry-driven pieces
* (the vertical three-column type, the giant counters) in the layout they
* were built for. That split is deliberate: those two are composed as shapes
* on the page, not as sentences, and mirroring them would fight the
* choreography rather than read more naturally in Persian.
*/
/* --- The typeface ---------------------------------------------------------
* Vazirmatn, self-hosted at /fonts/vazirmatn-arabic.woff2 - the same single
* file Google Fonts serves for every declared weight of its Arabic-script
* subset, because that subset is one variable font: the weight number in
* each @font-face below just names a fixed point on its own wght axis, the
* same trick used to pin a variable font to several fixed-weight aliases.
*
* Its unicode-range is Arabic-script only (Persian letters, ZWNJ, the Arabic
* decimal point and a handful of related punctuation) - deliberately not
* "latin" - so a Latin word inside Persian copy (Python, MBA, AI/ML) keeps
* falling through to whichever Gotham/Helvetica cut the element already
* asks for. That is also why not one selector below names a font-family:
* the bundle's own --font-* custom properties are redeclared once, with the
* Persian face appended as a second choice, and every element that already
* reads `font-family:var(--font-gotham-book)` (etc.) picks it up for free.
*/
@font-face {
font-family: 'VazirmatnThin';
font-weight: 100;
font-style: normal;
font-display: swap;
src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'VazirmatnLight';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'VazirmatnBook';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'VazirmatnMedium';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'VazirmatnBold';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
U+FE70-FE74, U+FE76-FEFC;
}
:root {
--font-gotham-thin: 'GothamThin', 'VazirmatnLight';
--font-gotham-con-thin: 'GothamConThin', 'VazirmatnLight';
--font-gotham-light: 'GothamLight', 'VazirmatnLight';
--font-gotham-book: 'GothamBook', 'VazirmatnBook';
--font-gotham-medium: 'GothamMedium', 'VazirmatnMedium';
--font-helvetica-thin: 'HelveticaNeueThin', 'VazirmatnThin';
--font-helvetica-light: 'HelveticaNeueLight', 'VazirmatnLight';
--font-helvetica-bold: 'HelveticaNeueBold', 'VazirmatnBold';
}
/* --- Line and letter metrics -----------------------------------------
* The bundle's negative tracking (down to -2rem on the biggest display type)
* is tuned to Latin capitals; on Persian it collides adjoining letters'
* connecting strokes into each other. Zeroed globally, then given back in
* the few places below that still need a little air.
*
* Line-height follows the same logic in the other direction: Persian's
* ascenders and descenders (ب ی گ) sit taller than Latin's, so the bundle's
* 100%-set headings and its book-weight running text both need more room,
* or a line's own diacritics-adjacent strokes touch the line above it.
*/
body {
letter-spacing: normal;
}
.b1-light,
.b1-bold,
.bd-thin,
.item-title,
.sect-4-item-title,
.form-contact-item-title,
p {
letter-spacing: normal;
line-height: 1.7;
}
h1,
h2,
.h1-thin,
.h1-book,
.h2-thin,
.title-thin,
.l1-bold {
letter-spacing: normal;
line-height: 1.25;
}
/* --- RTL, block by block --------------------------------------------------
* `` already flips the document's own default (paragraphs,
* unstyled block flow), so most of the page needs nothing here at all. What
* follows targets only the handful of elements the bundle gives an explicit
* `text-align` or a flex layout that reads left-to-right regardless of `dir` -
* a fixed value like that never flips on its own.
*/
.bio-sect .sect-2-descr,
.bio-sect .sect-2-text-info,
.chapter-2 .left,
.form-contact,
.form-box,
.sect-4-info,
.menu .nav {
direction: rtl;
text-align: right;
}
/* The menu's chapter counter ("01", "02"...) and its item name sit side by
* side; RTL flow alone is enough once the row itself is free to reverse. */
.menu .nav .item {
flex-direction: row-reverse;
}
/* --- The header's own RTL bug --------------------------------------------
* `.header` is `display:flex`, and flipping its `flex-direction:row` under
* `dir="rtl"` already re-paints its three children - logo, "Get in Touch",
* the burger - in mirrored order for free, which is exactly what a `dir`
* flip is for. What it cannot fix is `.header-btn{margin-left:auto}`: a
* *physical* margin, not a logical one, so it keeps absorbing free space on
* the same physical side regardless of `dir`. In the English layout that
* margin is what glues the button to the burger, leaving the logo alone on
* the far side; mirrored, the same physical rule glues the button to the
* logo instead and leaves the burger stranded - which is the pill visually
* overlapping the monogram on this page. Restated in logical terms (`auto`
* on the inline-start margin) it self-corrects under RTL exactly as the
* bundle's own three-item spacing intends.
*/
.header-btn {
margin-left: 0 !important;
margin-inline-start: auto !important;
}
/* --- The hero name label's own RTL bug ------------------------------------
* `.hero .content` is the same story one level down: a flex row of
* [name, headline, role list] that mirrors correctly under `dir="rtl"`
* (name moves from the near side to the far side, same as any other flex
* child), except the bundle sets its spacing with `.subtitle{margin-left:
* 12.6875rem;margin-right:1.25rem}` - physical again, so the 203px gap it
* reserves stays on the name's physical left in both layouts. In English
* that gap sits between the name and the edge of the section, harmless; in
* the mirrored layout the name is now the *rightmost* item, so the same gap
* lands on its inner side instead, and the 20px gap that used to do that job
* (`margin-right`) ends up on the outer side - close enough to the header's
* logo, independently mirrored to the same corner, that the two overlap.
* Same fix as the button above: state both margins in logical terms and the
* layout mirrors the way the bundle's own three-column row already does.
*/
.hero .subtitle {
margin-left: 0 !important;
margin-right: 0 !important;
margin-inline-start: 12.6875rem !important;
margin-inline-end: 1.25rem !important;
}
/* --- The contact form's floating labels ---------------------------------
* "Name" / "Email" / "Message" float above their field on focus or once
* filled in - a transform the bundle drives from `.label{left:0;
* position:absolute}`, again a physical offset `.form-box`'s own
* `direction:rtl` (below) cannot touch. Anchored to the left in both
* layouts, it sits over the *start* of the field in English and the far end
* of it - away from the now-right-aligned Persian text starting to fill the
* field - in Persian. Mirrored the same way as the rest of this file.
*/
.form-box .label {
left: auto;
right: 0;
}
/* --- LTR islands -----------------------------------------------------
* The phone number and the email address keep their own left-to-right run
* inside RTL text, or the digits and the dots reorder around the strongest-
* directionality character the way plain `dir="rtl"` always does with an
* untagged number. `unicode-bidi: isolate` keeps that run from also dragging
* surrounding Persian words out of order. One pair of selectors reaches every
* occurrence - menu, "get in touch" panel, footer - because all three wrap
* the number and address in the same `` / ``
* (the bundle's own inconsistent casing is why mailto needs the `i` flag).
*/
a[href^="tel:"],
a[href^="mailto:" i] {
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
/* --- The social labels: a deeper case of the same thing -------------------
* The link labels in the contact block - Instagram, Telegram, LinkedIn -
* share the phone number's hover-reveal component, which turns out to split
* its text into one `display:inline-block` per character (for a per-letter
* reveal that never actually triggers here - the block is always visible).
* Bidi has no script information for an anonymous inline-block; it treats a
* run of them as neutral, order-them-by-context atoms, the same way it
* treats a row of images. In a `dir="rtl"` container that reads the *boxes*
* right to left - correct for Telegram's Persian label, where each atom is
* one Persian letter and reading it backwards is reading it forwards, but
* wrong for a Latin word, where it prints every letter in the right place
* and every word in the wrong order: "Instagram" as "margatsnI".
*
* Forcing `ltr` back onto the label restores normal order for the Latin
* ones; Telegram's own link is carved back out to `rtl` so its Persian label
* keeps reading correctly. `unicode-bidi: isolate` on both sides keeps each
* label a self-contained run regardless of which direction its neighbours
* end up in.
*/
.item.socials .link-text,
.form-contact-socials .link-text,
.sect-4-socials .link-text {
direction: ltr;
unicode-bidi: isolate;
}
.item.socials a[href^="https://t.me/"] .link-text,
.form-contact-socials a[href^="https://t.me/"] .link-text,
.sect-4-socials a[href^="https://t.me/"] .link-text {
direction: rtl;
}
/* The CONNECT section's own giant background watermark - the same
* per-character split as everything above, on a word ("connect", set in
* caps by `text-transform`) that is not in src/content.js at all: it comes
* from the bundle's own section data rather than static markup, so there is
* no find-string here to translate. Left in English, and given the same fix
* as the social labels so it reads forward instead of "TCENNOC".
*/
.sect-4-name {
direction: ltr;
unicode-bidi: isolate;
}
/* --- The language switch -----------------------------------------------
* Shared markup (public/overrides/fixes.js adds the same element on both
* locales); this half only needs to mirror it to the left edge, next to
* where "Get in Touch" would otherwise sit, since the header itself is now
* RTL and the toolbar's own items already reversed with it.
*/
#lang-switch {
order: -1;
}
/* --- Below 1024px: the same split, re-measured for the metrics above ---
* overrides.css re-sizes several of these same elements for longer English
* words; here it is Persian's taller line-height that needs the room back,
* not extra width, so only line-height moves.
*/
@media (max-width: 1023px) {
.b1-light,
.b1-bold,
.bd-thin {
line-height: 1.6;
}
h1,
h2,
.h1-thin,
.h2-thin,
.title-thin {
line-height: 1.2;
}
/* The Socials block, in both the footer and the "get in touch" panel, is
* pulled out of normal flow and pinned beside the Phone/Email/Based-in
* column with `left:50%;margin-left:4rem` - a physical offset, so on this
* page it stays anchored to the visual left no matter what `direction`
* says. That was never a problem in English, where the column it floats
* beside is itself left-aligned and stays clear of it. Once that column's
* text turns right-aligned (the RTL rule for `.form-contact`/`.sect-4-info`
* above), its lines reach toward the same physical spot the socials block
* already occupies, and the two overlap. Mirrored to `right`, Socials
* moves to the same side its own text now reads from, beside a column
* that recedes to the left instead of reaching into it.
*/
.sect-4-socials,
.form-contact-socials {
left: auto;
right: 50%;
margin-left: 0;
margin-right: 4rem;
}
}