/* Everything that is about the language rather than about a screen. The rest of the panel's CSS is direction-agnostic now: physical left/right rules were rewritten as inline-start/inline-end, so setting dir="ltr" on mirrors the whole layout on its own. What is left here is the handful of things a logical property cannot say (a transform, an inset shadow, a corner radius) plus the two controls that only exist because the site has two languages. */ /* ---- the switch ------------------------------------------------------------------------------ */ /* Two words in a pill, never an icon. Somebody hunting for English on a page they cannot read has to be able to see the word, not press a globe to find out what it does. */ .lang-toggle { display:inline-flex; align-items:center; } .lang-toggle-option { border:1px solid #2f2a49; border-radius:9px; padding:6px 11px; background:#141126; color:#a9a5bd; font-size:12.5px; font-weight:700; line-height:1.6; transition:.18s; } .lang-toggle-option:hover { color:#fff; border-color:#544a86; background:#1c1836; } /* Both buttons are always in the markup and the direction of the document decides which one is a real offer. That is what lets the server render this string without knowing what language the request asked for: it stamps dir on and the stylesheet does the rest. */ /* Scoped to the document element on purpose. The pill itself carries dir="ltr" so its two labels never reorder, and a bare [dir="ltr"] descendant selector would therefore match inside the pill and hide the wrong button on a right-to-left page. */ :root[dir="rtl"] .lang-only-en,:root[dir="ltr"] .lang-only-fa { display:none; } /* The public pages and the two customer panels are light, so the pill has to be readable on white as well as on the panel's near-black. */ .brand-body .lang-toggle-option,.reseller-body .lang-toggle-option,.public-shell .lang-toggle-option,.landing .lang-toggle-option { border-color:#dfe3ec; background:#f6f7fb; color:#6b7280; } .brand-body .lang-toggle-option:hover,.reseller-body .lang-toggle-option:hover,.public-shell .lang-toggle-option:hover,.landing .lang-toggle-option:hover { color:#111827; border-color:#c8cede; background:#fff; } /* ---- the offer ------------------------------------------------------------------------------- */ /* Shown once, to a visitor whose IP is not Iranian, and never again whichever button they press. Bottom of the screen and off to one side: it is an aside about the page, and a visitor who ignores it must still be able to read everything underneath it. */ .lang-offer { position:fixed; z-index:2147483000; bottom:18px; inset-inline-end:18px; width:min(330px,calc(100vw - 32px)); padding:17px 18px 15px; border:1px solid #3b3363; border-radius:16px; background:linear-gradient(160deg,#1d1938,#141126); box-shadow:0 24px 60px #00000075; color:#e9e6f8; font-family:'Segoe UI',Roboto,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; animation:lang-offer-in .28s cubic-bezier(.2,.8,.3,1); } @keyframes lang-offer-in { from { opacity:0; transform:translateY(14px); } } @media (prefers-reduced-motion:reduce) { .lang-offer { animation:none; } } .lang-offer strong { display:block; font-size:15px; font-weight:700; letter-spacing:-.1px; } .lang-offer p { margin:7px 0 13px; color:#a9a5bd; font-size:12.5px; line-height:1.65; } .lang-offer-actions { display:flex; gap:8px; } .lang-offer-yes { flex:1; border:1px solid transparent; border-radius:9px; padding:9px 12px; background:linear-gradient(135deg,#8566ff,#6745ef); color:#fff; font-size:13px; font-weight:700; box-shadow:0 8px 16px #4c2ec04d; } .lang-offer-yes:hover { background:#9278ff; } .lang-offer-no { border:1px solid #3b3363; border-radius:9px; padding:9px 12px; background:transparent; color:#a9a5bd; font-size:13px; } .lang-offer-no:hover { color:#e9e6f8; border-color:#544a86; } .lang-offer-close { position:absolute; top:8px; inset-inline-end:9px; width:24px; height:24px; border:0; border-radius:7px; background:transparent; color:#6f6a89; font-size:19px; line-height:1; } .lang-offer-close:hover { color:#e9e6f8; background:#ffffff10; } /* The card is white-on-dark everywhere, including on the light customer panels, because it is not part of any of them: it is the site talking to a stranger about the site. */ /* ---- what a logical property cannot mirror --------------------------------------------------- */ [dir="ltr"] .landing-cta:hover span,[dir="ltr"] .bot-cta:hover .bot-cta-go,[dir="ltr"] .brands-door:hover .brands-door-go { transform:translateX(4px); } [dir="ltr"] .bp-toggle.on>span { transform:translateX(22px); } /* The drawers. Each is pinned to a logical edge already, so only the direction it hides in is left. */ @media (max-width:760px) { [dir="ltr"] .sidebar { transform:translateX(-105%); box-shadow:16px 0 45px #0008; } [dir="ltr"] .menu-open .sidebar { transform:translateX(0); } } [dir="ltr"] .notify-drawer { transform:translateX(108%); } [dir="ltr"] .notify-drawer.open { transform:translateX(0); } /* The bar down the start edge of an active menu row: an inset shadow's offset is physical, so the sign has to flip. */ [dir="ltr"] .nav-link.active,[dir="ltr"] .nav-link:hover { box-shadow:inset 3px 0 var(--purple); } [dir="ltr"] .nav-staff .nav-link.active,[dir="ltr"] .nav-staff .nav-link:hover { box-shadow:inset 3px 0 #57a3ff; } [dir="ltr"] .nav-logout:hover { box-shadow:inset 3px 0 #ff5e87; } [dir="ltr"] .comment-row.member { box-shadow:inset 3px 0 #48cc9b; } [dir="ltr"] .user-row.focused { box-shadow:inset 3px 0 #7657ec; } [dir="ltr"] .health-table tr.health-bad td:first-child,[dir="ltr"] .health-table tr.health-bad { box-shadow:inset 3px 0 0 #ff5e87; } [dir="ltr"] .health-table tr.health-warn td:first-child,[dir="ltr"] .health-table tr.health-warn { box-shadow:inset 3px 0 0 #ffc765; } [dir="ltr"] .health-table tr.health-good td:first-child,[dir="ltr"] .health-table tr.health-good { box-shadow:inset 3px 0 0 #3ddc97; } @media (max-width:760px) { [dir="ltr"] .health-table tr.health-bad td:first-child,[dir="ltr"] .health-table tr.health-warn td:first-child,[dir="ltr"] .health-table tr.health-good td:first-child { box-shadow:none; } } [dir="ltr"] .guard-quote { border-radius:12px 0 0 12px; } /* The logo stays on the left in both languages. The Persian header already reverses its row to put it there, and reversing it again in English would move it somewhere neither language expects. */ [dir="ltr"] .topbar { flex-direction:row; } /* Latin text at Persian line-heights reads airy but not wrong, so the type stays as it is: Vazirmatn ships proper Latin cuts and they are already on this origin, which keeps English pages from pulling a second font family down the wire. */