/* ========================================================================== LTR overrides — loaded ONLY by the English (/en) templates. The shared stylesheet is written for the Persian RTL layout and uses physical offsets in places. Rather than refactor those shared rules (which would touch the live Persian pages), this file re-states just the direction-sensitive ones inside `[dir="ltr"]`, so it can only ever affect a document that opted in via . ========================================================================== */ [dir="ltr"] { direction: ltr; text-align: left; } /* `body` carries an explicit `direction: rtl` in style.css, so it does not inherit the value above and has to be re-stated rather than left alone. */ [dir="ltr"] body { direction: ltr; text-align: left; /* The Persian webfont has no Latin design; fall back to a neutral stack. */ font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; } /* Same reasoning for other elements that pin direction explicitly. */ [dir="ltr"] .container, [dir="ltr"] main, [dir="ltr"] header, [dir="ltr"] footer, [dir="ltr"] nav, [dir="ltr"] section, [dir="ltr"] .logo { direction: ltr; } [dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4 { text-align: left; letter-spacing: -0.01em; } /* Header: logo leads on the left, nav follows, actions sit at the end. */ [dir="ltr"] .header-inner { flex-direction: row; } /* Icon-before-text arrows point the reading direction. */ [dir="ltr"] .fa-arrow-left::before { content: "\f061"; /* fa-arrow-right */ } /* Lists and cards that were right-aligned for Persian. */ [dir="ltr"] .en-card, [dir="ltr"] .en-section, [dir="ltr"] .en-hero-content { text-align: left; } /* Phone / email strings stay LTR in both languages; make sure the shared dir="ltr" spans do not pick up Persian-specific alignment. */ [dir="ltr"] [dir="ltr"] { text-align: left; } /* ── English page scaffolding ───────────────────────────────────────────── */ .en-hero { position: relative; padding: clamp(96px, 14vh, 168px) 0 clamp(56px, 8vh, 96px); background: linear-gradient(to right, rgba(6, 6, 8, 0.94) 0%, rgba(6, 6, 8, 0.72) 60%, rgba(6, 6, 8, 0.55) 100%), url("../img/home/hero-1.png") center / cover no-repeat; overflow: hidden; } .en-hero-content { max-width: min(760px, 92%); } .en-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; margin-bottom: 20px; border: 1px solid var(--border-gold, rgba(212, 175, 55, 0.38)); border-radius: 999px; background: rgba(212, 175, 55, 0.1); color: var(--gold-light, #e8c76a); font-size: 0.78rem; font-weight: 600; } .en-hero h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.18; margin: 0 0 18px; } .en-hero h1 .gold-hl { color: var(--gold-light, #e8c76a); } .en-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.85; color: var(--text-secondary, #c9c9c9); max-width: 62ch; margin: 0 0 30px; } .en-section { padding: clamp(48px, 7vw, 92px) 0; } .en-section-head { max-width: 68ch; margin-bottom: clamp(28px, 4vw, 48px); } .en-section-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.3; margin: 0 0 14px; } .en-section-head p { color: var(--text-secondary, #c9c9c9); line-height: 1.9; margin: 0; } .en-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(16px, 2vw, 26px); } .en-card { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09)); border-radius: 18px; background: rgba(255, 255, 255, 0.032); transition: border-color 0.3s ease, transform 0.3s ease; } .en-card:hover { border-color: var(--border-gold, rgba(212, 175, 55, 0.38)); transform: translateY(-3px); } .en-card h3 { font-size: 1.1rem; margin: 0 0 10px; color: var(--gold-light, #e8c76a); } .en-card p { margin: 0; color: var(--text-secondary, #c9c9c9); line-height: 1.85; font-size: 0.95rem; } .en-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 13px; background: rgba(212, 175, 55, 0.12); color: var(--gold-light, #e8c76a); font-size: 1.15rem; } .en-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Definition-style spec rows (used on About). */ .en-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09)); } .en-facts > div { display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09)); } .en-facts dt { color: var(--gold-light, #e8c76a); font-weight: 600; font-size: 0.93rem; } .en-facts dd { margin: 0; color: var(--text-secondary, #c9c9c9); line-height: 1.8; font-size: 0.95rem; } /* `.lang-switch` lives in ui.css because the Persian header uses it too. */ @media (max-width: 860px) { .en-facts > div { grid-template-columns: 1fr; gap: 6px; } } /* Mobile header: LTR convention puts the brand first and the menu trigger last. The shared markup lists the hamburger first (correct for RTL), so the English pages reorder visually instead of duplicating the markup. */ @media (max-width: 991px) { [dir="ltr"] .header-inner { justify-content: space-between; } /* style.css pushes the logo to the right edge with `margin-left: auto` so it trails the hamburger in RTL. LTR wants the opposite, so the auto margin is released and the brand simply leads the row. */ [dir="ltr"] .header-inner .logo { order: 1; margin-left: 0; } [dir="ltr"] .header-inner .header-end { order: 2; } [dir="ltr"] .header-inner .hamburger { order: 3; } } /* Active-item marker sits on the reading-start edge. */ [dir="ltr"] .mobile-nav-body > a.active { border-right: none; border-left: 3px solid var(--gold, #c9a227); } @media (max-width: 768px) { .en-hero { padding-top: clamp(72px, 12vh, 112px); background-position: center center; } .en-hero-content { max-width: 100%; } .en-actions .btn { width: min(100%, 320px); justify-content: center; } }