/* ============================================================ Global Voices — Arabic and right-to-left Two jobs. The toggle button itself, and the corrections the page needs once is set. Most of the layout mirrors on its own: flex, grid and margins all follow the document direction. What does NOT follow are values pinned with left/right and anything moved with translateX — those are listed below, each with the thing it fixes. Every rule here is scoped to [dir="rtl"] or .gv-ar, so the English site renders byte-identically to before this file existed. ============================================================ */ /* ---------- the toggle ---------- */ .lang-toggle { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-weight: 800; font-size: 0.92rem; line-height: 1; padding: 0.62rem 0.95rem; border-radius: 999px; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; white-space: nowrap; } .lang-toggle:hover { background: rgba(255, 138, 30, 0.18); border-color: rgba(255, 138, 30, 0.55); } .lang-toggle:active { transform: translateY(1px); } .lang-toggle:focus-visible { outline: 2px solid var(--orange, #ff8a1e); outline-offset: 2px; } /* On a phone the nav collapses behind the burger, but the language switch should stay reachable without opening a menu — it is how a visitor who cannot read the menu gets the menu translated. */ @media (max-width: 900px) { .lang-toggle { padding: 0.5rem 0.7rem; font-size: 0.85rem; } } /* ---------- Arabic typography ---------- */ body.gv-ar { font-family: "Cairo", "Noto Kufi Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; letter-spacing: 0; /* tracking set for Latin harms Arabic */ } /* Arabic has no capitals, so uppercasing does nothing but it also costs nothing to switch off; the wide letter-spacing those labels carry does real damage to joined script. */ body.gv-ar [class*="eyebrow"], body.gv-ar [class*="kicker"], body.gv-ar [class*="label"], body.gv-ar .nav__tagline, body.gv-ar .band__item span, body.gv-ar .section-sub { text-transform: none; letter-spacing: 0; } /* Arabic ascenders and descenders need more room than Latin. */ body.gv-ar p, body.gv-ar li, body.gv-ar .lead, body.gv-ar .card p { line-height: 1.9; } body.gv-ar h1, body.gv-ar h2, body.gv-ar h3, body.gv-ar h4 { line-height: 1.55; } /* ---------- direction corrections ---------- */ /* Latin fragments inside Arabic sentences — brand names, CEFR codes, dates — keep their own direction so "B1 - Intermediate" does not come out reversed inside a right-to-left line. */ [dir="rtl"] .nav__title, [dir="rtl"] .lang-toggle { direction: ltr; unicode-bidi: isolate; } /* Text that was deliberately left-aligned stays aligned to the reading edge rather than jumping to the wrong side. */ [dir="rtl"] .hero__copy, [dir="rtl"] .orb__copy, [dir="rtl"] .section-head, [dir="rtl"] .reader__body { text-align: right; } /* Anything centred stays centred. */ [dir="rtl"] .section-title, [dir="rtl"] .section-sub { text-align: center; } /* Lists: the bullet belongs on the right. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.4em; padding-left: 0; } /* The 3D Earth and its pins are positioned in pixels by js/earth3d.js from a projection, not by CSS direction. Forcing the canvas back to ltr keeps those coordinates meaning what they meant when they were computed. */ [dir="rtl"] .orb__stage, [dir="rtl"] .orb__stage * { direction: ltr; } [dir="rtl"] .orb__stage .goal-rail, [dir="rtl"] .orb__stage .goal-rail * { direction: rtl; } /* Carousels move with translateX, which does not mirror. Keeping their track ltr means "next" still means next. */ [dir="rtl"] .wa-track, [dir="rtl"] .act-track, [dir="rtl"] [class*="track"] { direction: ltr; } [dir="rtl"] [class*="track"] > * { direction: rtl; } /* Form controls: the caret and placeholder follow the text. */ [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { text-align: right; } /* Except the ones that hold Latin data, where right-aligning an email or a phone number reads badly. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: left; } /* The AI guide places its own launcher and knows nothing about the document's direction; leaving it ltr keeps it bottom-right in both languages, which is where it was designed to sit. */ [dir="rtl"] elevenlabs-convai { direction: ltr; } /* ---------- room for one more button ---------- The nav held eight links across one row with almost nothing to spare. Adding the language toggle pushed it onto two rows — in English as well as Arabic, since the button is there either way. Rather than drop a link or shrink the logo, the links give back a few pixels of horizontal padding. Only above the breakpoint where the nav is a row at all; below it the menu is behind the burger and has all the room it needs. */ @media (min-width: 901px) { .nav__link { padding-left: 1rem; padding-right: 1rem; } .nav__links { gap: 0.3rem; } } /* ============================================================ Readability of Arabic The English design leans on light weights and small, wide-tracked labels. That works for Latin capitals — simple shapes, generous counters. Arabic at the same size and weight is thin and tiring: finer strokes, more of them per word, and diacritics that are the first thing to disappear. So the Arabic side gets three things: a larger base size, more weight everywhere, and more contrast against the dark ground. All of it scoped to the Arabic document — the English site keeps the design it was drawn with. Order matters: broad rules first, specific ones after, so a named element wins without having to out-specify anything. ============================================================ */ /* Everything sized in rem scales from here. 6.5% is enough to feel easier without reflowing the layout — verified for horizontal overflow from 320px to 1440px. */ :root[dir="rtl"] { font-size: 106.5%; } body.gv-ar { -webkit-font-smoothing: antialiased; --muted: #ccd7ee; /* was #8ea0c2 — too faint for Arabic */ font-weight: 600; } /* ---------- broad: everything that reads as text ---------- */ body.gv-ar p, body.gv-ar li, body.gv-ar dd, body.gv-ar dt, body.gv-ar td, body.gv-ar th, body.gv-ar span, body.gv-ar time, body.gv-ar option, body.gv-ar a, body.gv-ar label, body.gv-ar button, body.gv-ar summary, body.gv-ar figcaption, body.gv-ar blockquote, body.gv-ar input, body.gv-ar select, body.gv-ar textarea { font-weight: 600; } body.gv-ar strong, body.gv-ar b, body.gv-ar em, body.gv-ar .nav__link, body.gv-ar .btn, body.gv-ar [class*="btn"], body.gv-ar [class*="cta"] { font-weight: 800; } /* Small print: card subtitles, chips, tags, meta lines, notes, hints, labels — the 12–14px band where Arabic at a light weight stops being comfortable. */ body.gv-ar [class*="__sub"], body.gv-ar [class*="__meta"], body.gv-ar [class*="__tag"], body.gv-ar [class*="__chip"], body.gv-ar [class*="__note"], body.gv-ar [class*="__hint"], body.gv-ar [class*="__label"], body.gv-ar small { font-weight: 700; } /* The muted greys carry most of the small text; on a dark ground Arabic needs the extra contrast to stay legible. */ body.gv-ar p, body.gv-ar li, body.gv-ar small { color: #ccd7ee; } /* ---------- specific: the places measured as too light ---------- */ /* The eyebrow above the hero — the smallest text on the site. */ body.gv-ar .orb__eyebrow, body.gv-ar [class*="eyebrow"], body.gv-ar [class*="kicker"], body.gv-ar [class*="__stamp"] { font-size: 0.9rem; font-weight: 800; letter-spacing: 0; } /* The globe's caption and its pause control. */ body.gv-ar .orb__hint, body.gv-ar .orb__hint span, body.gv-ar .orb__motion { font-size: 0.94rem; font-weight: 700; color: #ccd7ee; } /* Hero and lead paragraphs. */ body.gv-ar .orb__text, body.gv-ar .turn__head p, body.gv-ar .lead-split__body p { font-weight: 600; color: #ccd7ee; } /* The goal rail: the theme list above it, and the chip labels. */ body.gv-ar .grail__head p { font-size: 0.96rem; font-weight: 700; color: #ccd7ee; } body.gv-ar .grail__name { font-size: 0.96rem; font-weight: 800; } /* The four facts under the hero: date, time, level, outcome. */ body.gv-ar .band__item span { font-size: 0.94rem; font-weight: 700; color: #ccd7ee; } body.gv-ar .band__item strong { font-weight: 900; } /* Dr. Abir's role line and her credential list. Both sit inside .lead-split__body, so they name the parent rather than raising weight blindly to beat the paragraph rule above. */ body.gv-ar .lead-split__body .lead-split__role { font-weight: 800; } body.gv-ar .lead-split__body .lead-split__quote { font-weight: 700; color: #dbe4f7; } body.gv-ar .lead-split__body .lead-split__facts li { font-size: 0.94rem; font-weight: 800; color: #ccd7ee; } /* The invitation panel and its limited-slots note. */ body.gv-ar .invite__panel .invite__list li { font-weight: 600; } body.gv-ar .invite__panel .invite__note { font-size: 0.94rem; font-weight: 800; } /* Session cards, blog cards and the reader: the long-form reading. */ body.gv-ar .reader__body p, body.gv-ar .modal p, body.gv-ar .session-card p { font-weight: 600; color: #ccd7ee; } /* ---------- the last small text, and narrow screens ---------- Measured, not guessed: these were the elements still rendering under 13px once everything else had been raised. Badges, chips, status pills and column headings — all the places a design puts its smallest type. */ body.gv-ar .nav__tagline, body.gv-ar .pf-card__status, body.gv-ar .pf-card__tags li, body.gv-ar .pf-skill h3, body.gv-ar .xp-card__badge, body.gv-ar .cred-col__title, body.gv-ar .act__stage, body.gv-ar .act__dok, body.gv-ar .blog__modlink button, body.gv-ar .mod__signout, body.gv-ar .regs__hint, body.gv-ar .field em { font-size: 0.85rem; font-weight: 700; } /* ---------- the last small text, and narrow screens ---------- Measured, not guessed: these were the elements still rendering under 13px once everything else had been raised. Badges, chips, status pills and column headings — all the places a design puts its smallest type. */ body.gv-ar .nav__tagline, body.gv-ar .pf-card__status, body.gv-ar .pf-card__tags li, body.gv-ar .pf-skill h3, body.gv-ar .xp-card__badge, body.gv-ar .cred-col__title, body.gv-ar .act__stage, body.gv-ar .act__dok, body.gv-ar .blog__modlink button, body.gv-ar .mod__signout, body.gv-ar .regs__hint, body.gv-ar .field em { font-size: 0.85rem; font-weight: 700; } /* Long Latin words inside Arabic sentences — "Instructional", "International" — cannot break, so they set a floor on how narrow their box can be. With the larger Arabic type that pushed the experience cards past a 320px screen. Two things are needed, and only one of them is obvious. overflow-wrap lets such a word break visually, but it does NOT reduce the box's intrinsic minimum width — so on its own the card still refused to shrink and simply hung off the edge. Flex and grid children default to min-width:auto, which means "never narrower than my content"; setting it to 0 is what actually lets them fit. Both are needed together. */ body.gv-ar { overflow-wrap: break-word; } body.gv-ar .xp-card, body.gv-ar .xp-card__top, body.gv-ar .xp-card__top > *, body.gv-ar .card > *, body.gv-ar [class*="__grid"] > *, body.gv-ar [class*="__row"] > * { min-width: 0; } /* On the narrowest phones the padding itself is the constraint: 2rem of card padding around 1.8rem of inner padding leaves too little room once the base size goes up. */ /* ============================================================ Direction: the values that do not mirror on their own Flex, grid, and logical properties follow the document direction for free. These do not — every one is a value pinned to a physical side, written when the site was left-to-right only. Left unfixed they are not subtle: the footer's Quick Links sat at the far left of a 289px column while their heading sat at the right, which reads as the links having vanished. Each rule below names the file and line it corrects, so the next person can see this list is a survey rather than a patch — `grep -n "text-align:\s*left" css/` finds all of them. ============================================================ */ /* text-align: left → the reading edge. styles.css:1272 .footer__links · styles.css:1120 .accordion__btn blog.css:51 topic chips · home3d.css:352 goal-rail chips pages.css:251, profile.css:471 link buttons register.css:158 registrations table */ [dir="rtl"] .footer__links button, [dir="rtl"] .footer__links a, [dir="rtl"] .accordion__btn, [dir="rtl"] .blog__chip, [dir="rtl"] .grail__chip, [dir="rtl"] .post__go, [dir="rtl"] .cred-item__cert, [dir="rtl"] .regs__table th, [dir="rtl"] .regs__table td { text-align: right; } /* blog.css:202 — the reader's footer pushes its button to the far side of the panel. In Arabic the far side is the left. */ [dir="rtl"] .reader__foot { text-align: left; } /* styles.css:1314 — the contact column holds an Arabic label beside a Latin email and phone number. plaintext lets each line take the direction of its own first letter, so the address stays readable left-to-right while the label sits right. */ [dir="rtl"] .footer__contact a > span:last-child, [dir="rtl"] .footer__contact div > span:last-child { text-align: start; unicode-bidi: plaintext; } /* margin-left/right: auto pushes an element to one end of a flex row. blog.css:318 .mod__signout · styles.css:1141 accordion chevron */ [dir="rtl"] .mod__signout, [dir="rtl"] .accordion__chev { margin-left: 0; margin-right: auto; } /* Bullet and marker indents. styles.css:1291 footer bullets · home3d.css:523 · pages.css:325 ibpyp.css:143, :367 · and the list indents in styles.css */ [dir="rtl"] .footer__program li::before { margin-right: 0; margin-left: 0.6rem; } [dir="rtl"] .pkg__list span, [dir="rtl"] .xp-card ul, [dir="rtl"] .ib-cred-cols ul, [dir="rtl"] .ib-card ul, [dir="rtl"] .accordion__panel ul { padding-left: 0; padding-right: 1.2rem; } /* The footer's own faint grey is the one --muted did not cover, and it is what the Quick Links are painted in. */ body.gv-ar { --ink-faint: #c3cfe8; } body.gv-ar .footer, body.gv-ar .footer__links button, body.gv-ar .footer__links a, body.gv-ar .footer__program li { color: #c3cfe8; } /* home3d.css:493 — the "your instructor" stamp is positioned with left: clamp(...), so it deliberately hangs a few pixels off the edge of the photo. Absolute offsets are physical, not logical, so in Arabic it kept hanging off the left while the photo moved to the right. Mirrored, it belongs on the other side. */ [dir="rtl"] .lead-split__stamp { left: auto; right: clamp(-0.5rem, -1vw, 0rem); } /* ---------- switching languages is not an animation ---------- Several components carry `transition: color 0.2s` for their hover state. Flipping the language changes text, direction and colour on every element at once, and elements caught mid-transition can hold their old computed colour indefinitely — the footer links kept the pre-switch grey while a freshly inserted button in the same place took the new one, which is the tell. A language switch should be instant anyway: transitions here are for hover, not for repainting the whole page. js/i18n.js adds this class around the swap and removes it on the next frame. */ html.gv-switching *, html.gv-switching *::before, html.gv-switching *::after { transition: none !important; animation-duration: 0s !important; } /* And on the elements whose colour Arabic actually overrides, drop the colour transition altogether. Suppressing it during the swap was not enough: these buttons were left with a CSSTransition on `color` stuck in state "running", holding the pre-switch grey for good — a clone of the same button inserted beside it painted the new colour correctly, which is how the stuck transition showed itself. With no transition to get stuck, the cascade's value is what renders. Hover still changes colour; it just does so at once, which for a text link nobody notices. */ body.gv-ar .footer__links button, body.gv-ar .footer__links a, body.gv-ar .footer__program li, body.gv-ar .footer { transition: none; } /* ---------- the orange panels ---------- The Arabic layer paints body copy in a light grey for contrast on the dark page, which is not what these panels want either. They are white and heavy, matching css/readability.css, which the Arabic colour rule would otherwise override. */ body.gv-ar .banner, body.gv-ar .banner p, body.gv-ar .banner li, body.gv-ar .banner strong, body.gv-ar .banner__title, body.gv-ar .banner__points li, body.gv-ar .competencies, body.gv-ar .competencies p, body.gv-ar .competencies__title, body.gv-ar .competency, body.gv-ar .competency span { color: #fff; font-weight: 800; } body.gv-ar .banner__title, body.gv-ar .competencies__title { font-weight: 900; }