/* Arabic / RTL. Loaded only when is_rtl().
Noto Kufi replaces both faces — Cormorant has no Arabic cut, and forcing one
breaks the line. There is no italic in Kufi, so the brand's italic emphasis
becomes a brass colour change instead. */
/* Redefine the FONT TOKENS rather than listing selectors.
This block used to enumerate the elements that should switch to Kufi. That
list can never be complete: anything styled with var(--ui) or var(--display)
and not named here kept a Latin-only face, and the browser then substituted
a system font per element. Measured on /ar/ before this change: Kufi on 37
elements, Jost on 20 (buttons, .meta, .eyebrow, .link-arrow) and Cormorant
on 11 (.premise, .row__title, .stair__h, em) — four different typefaces on
one page, which is what "the font changes in different places" was.
Pointing the tokens themselves at Kufi means every consumer switches,
including any element added later. Latin runs inside Arabic pages (the
wordmark, emails, ICF, WhatsApp) still render correctly because Kufi
carries a Latin cut, and the stack falls back for anything it lacks. */
:root {
--display: 'Noto Kufi Arabic', system-ui, sans-serif;
--ui: 'Noto Kufi Arabic', system-ui, sans-serif;
/* Small type has to grow in Arabic.
`--meta` caps at 11.5px and `--btn` at 12.5px. Those work in Latin because
the labels are UPPERCASE with 0.2-0.3em tracking, which gives small text a
wide, deliberate shape. Arabic has no capitals, so `text-transform` does
nothing and rtl.css already cuts the tracking to 0.05em -- the same value
then renders as cramped lowercase-height script instead of a label.
Raising the tokens lifts every consumer at once: .eyebrow, .meta,
.nav__link, .hero__spine-label, .link-arrow, .btn and the field labels. */
--meta: clamp(13px, 0.2vw + 10.4px, 15px);
--btn: clamp(14px, 0.2vw + 11.4px, 16px);
}
/* The footer column headings are `.meta`, which is styled as fine print. In
Arabic they need to read as headings: the token bump above sizes them, and
this adds the weight and colour that separate a heading from its list. */
.footer .footer__col .meta {
font-size: clamp(15px, 0.24vw + 12px, 17px);
font-weight: 500;
color: var(--ivory);
letter-spacing: 0;
margin-bottom: 4px;
}
/* The primary button carries the most weight of any label on the page. */
.btn--primary { font-size: clamp(15px, 0.22vw + 12.2px, 17px); }
/* Vertical spine label: it sits in a fixed-width rail, so it grows less than
the rest or it collides with the hero copy. */
.hero__spine-label { font-size: clamp(13px, 0.2vw + 10.4px, 15px); }
body,
h1, h2, h3, h4,
.wordmark__first, .wordmark__last,
.h-hero, .h-page, .h-sec, .h-sub,
.quote__text, .pullquote, .band__text,
.numeral, .faq__q-text, .overlay__link-name {
font-family: var(--arabic);
letter-spacing: 0; /* Latin tracking must not carry over */
line-height: 1.7;
}
/* `ch` is the width of the font's "0" glyph, so a ch cap means a DIFFERENT
pixel width in Kufi than in Cormorant. `.head-split__title { max-width:
15ch }` measured 444px in English but 548px in Arabic — 104px wider — which
pushed the lede column across and made the two-column head visibly
asymmetric against its English mirror.
Re-tuned so the rendered column widths match. If a display face is ever
changed, re-measure rather than assuming these still hold. */
.head-split__title { max-width: 12ch; }
@media (max-width: 860px) {
.head-split__title { max-width: 13ch; }
}
/* Kufi runs visually larger, so every display size drops one step. */
.h-hero { font-size: clamp(32px, 4.4vw, 60px); }
.h-page { font-size: clamp(34px, 4.6vw, 64px); }
.h-sec { font-size: clamp(28px, 3.6vw, 46px); }
.h-sub { font-size: clamp(22px, 2.6vw, 32px); }
.quote__text, .pullquote { font-size: clamp(22px, 2.6vw, 34px); }
/* No italic: emphasis is carried by colour alone. */
em, .em, .wordmark__last, .quote__text, .pullquote { font-style: normal; }
/* The eyebrow/meta tracking is a Latin device; keep a little, not 0.3em. */
.eyebrow, .meta, .btn, .nav__link, .link-arrow,
.field__label, .overlay__link-index { letter-spacing: 0.05em; }
/* Button wipes must travel with the reading direction. */
.btn { background-position: 0 0; }
.btn:hover, .btn:focus-visible { background-position: 100% 0; }
.btn--primary { background-image: linear-gradient(to left, var(--brass) 50%, var(--green) 50%); }
.btn--secondary { background-image: linear-gradient(to left, var(--green) 50%, transparent 50%); }
/* The outline button's gradient is declared in base.css at
`.on-green a.btn--outline` (0,2,1) rather than bare `.btn--outline`,
because `.on-green a` had to be out-specified to stop the label turning
ivory on an ivory wipe in English.
That fix silently outranked the RTL override here, which was a bare
`.btn--outline` (0,1,0). The Arabic button kept the English `to right`
gradient while `.btn { background-position: 0 0 }` above put the wipe at
its start position -- so the ivory half covered the button AT REST and
the ivory label vanished into it. `--primary` and `--secondary` were
unaffected: nothing out-specifies those.
The selector below must therefore stay in step with base.css. If the
button's colour rule there ever changes specificity again, change it
here too or Arabic silently reverts to the English wipe direction. */
.btn--outline,
a.btn--outline,
.on-green a.btn--outline {
background-image: linear-gradient(to left, var(--ivory) 50%, transparent 50%);
}
/* The hero portrait swaps sides in Arabic — but `direction: rtl` on the flex
container ALREADY reverses the visual order of the children.
This block used to add `order: 2 / 1` on top of that. The two cancelled out
and the hero rendered text-left / media-right in BOTH languages, i.e. not
mirrored at all. Measured: .hero__type mid 508, .hero__media mid 1308,
identical in EN and AR.
Nothing is needed here for desktop. On mobile the hero stacks, and the
reversal would put the photo above the headline, so the reading order is
pinned back with explicit `order`. */
@media (max-width: 860px) {
.hero__type { order: 1; }
.hero__media { order: 2; }
}
.bleed-left {
padding-left: var(--gutter);
padding-right: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
}
/* Mirror the directional details. */
.photo-caption { left: auto; right: clamp(20px, 3vw, 40px); }
/* Border and padding still need mirroring — they are physical here so that the
brass rule sits on the reading-start edge.
The margins are NOT re-declared: the base rule now uses margin-inline, which
flips on its own. Re-declaring `margin-left: auto` set the auto on the side
RTL had already moved it to, so the quote collapsed against the start edge.
Same reason .row__meta and .fee__link are no longer overridden here. */
.pullquote {
border-left: 0;
border-right: 2px solid var(--brass);
padding-left: 0;
padding-right: clamp(20px, 3vw, 34px);
}
.stair__step:nth-child(2) { margin-left: 0; margin-right: clamp(0px, 9vw, 150px); }
.stair__step:nth-child(3) { margin-left: 0; margin-right: clamp(0px, 18vw, 300px); }
/* Typographic arrows point the other way. */
.link-arrow .arrow { display: inline-block; transform: scaleX(-1); }
/* The rotator control (2026-09-28).
The progress rule needs nothing: it is built on `inset-inline-start`, so it
fills from the right on its own. These two DO need handling.
1. The arrows are direction, not decoration -- "previous" must point right
in RTL. The glyph is mirrored with scaleX(-1), the same treatment
.link-arrow already uses.
The row itself needs NOTHING. RTL reverses the flex main axis on its
own, so prev (first in source) is already placed rightmost, which is
where "previous" belongs. Adding row-reverse here was a double flip and
measurably put prev on the LEFT at x=1142 against next at x=1178.
2. The counter is "01 / 20": two Latin numerals around a slash. Left to the
bidi algorithm the run reverses to "20 / 01" -- it reads as a different
position entirely, which is worse than a cosmetic fault. Forcing the
element LTR keeps the pair in the order it was written, while the block
itself still sits on the right where RTL puts it. */
.rotator__btn .arrow { display: inline-block; transform: scaleX(-1); }
.rotator__count { direction: ltr; }
/* ---- RTL section pass, 2026-09-27 ---------------------------------------
Found by viewing /ar/ rather than by reading the CSS. */
/* The wordmark is a person's name. RTL reversed the flex children and it read
"Hamdy Marwa". A name keeps its order in any direction. */
.wordmark { direction: ltr; }
/* The × belongs on the OUTSIDE edge of the close control — left in RTL, the
mirror of its position in LTR.
`flex-direction: row` is not enough: RTL flips the main axis, so the first
item is placed rightmost and the glyph ends up inside, against the label.
row-reverse puts it back on the outside. */
.overlay__close { flex-direction: row-reverse; }
/* The arrow is a child of .link-arrow and RTL put it before the label while
the label itself stayed after it. Send the whole control LTR internally and
mirror the glyph, so the arrow sits after the text and points left. */
.link-arrow { direction: rtl; }
.link-arrow .arrow { margin-right: 6px; margin-left: 0; }
/* Mixed-direction runs.
A Latin string inside an RTL block is laid out right-to-left as a whole, so
its trailing full stop jumps to the left edge (".yourself") and a leading
numeral falls to the end ("THE PREMISE — 01"). `isolate` gives each element
its own bidi context so the run keeps its internal order, while the element
itself still sits on the right where RTL puts it.
Harmless once the copy is Arabic — Arabic needs no isolation — but correct
for the mixed state during the build, and for the strings that stay Latin
permanently (dates, numerals, the domain). */
.hero__title, .hero__lede, .premise, .premise--sub,
.band__text, .pullquote, .quote__text, .lede, .prose p,
.h-sec, .h-page, .h-sub, .h-hero,
.row__title, .row__desc, .row__meta,
.faq__q-text, .faq__body p,
.fee__value, .practice__row span, .field__label,
.footer__base span, .footer__col a, .stat__d,
.cred__text, .cred__year {
unicode-bidi: isolate;
}
/* The section eyebrows are "01 — The premise": a numeral, an em dash, then
Latin. Isolating the element is not enough because the numeral and the words
are separate runs inside it — plaintext makes the element take its direction
from its own first strong character, which keeps "01" leading. */
.eyebrow, .overlay__link-index, .stair__n, .row__n, .numeral {
unicode-bidi: plaintext;
}
/* `plaintext` has a side effect on a numeral that stands alone.
It takes the element's direction from its FIRST STRONG CHARACTER. In an
eyebrow like "01 — The premise" that is what we want. But ``
on the Process and Services pages contains nothing but "01", and a Latin
digit is a weak/LTR character — so the whole paragraph resolves LTR and the
digit lands at the LEFT edge of its column while the Arabic heading and body
beneath it are right-aligned. Measured: a 336px column on Process, with the
numeral at the far side from everything it labels.
Only the standalone block numerals need this; `.stair__n` and `.row__n` sit
in flex rows where the box is glyph-width and alignment has nothing to move. */
p.numeral {
text-align: right;
}
/* The copyright is "© 2026 marwahamdy.com" — all Latin and numeric, so it runs
LTR rather than reordering to "marwahamdy.com 2026 ©". Only the first span
in .footer__base; the second is real prose and stays RTL. */
.footer__base span:first-child {
direction: ltr;
unicode-bidi: isolate;
}
/* Email addresses, phone numbers and URLs are Latin/numeric by nature and must
not be reordered.
CRITICAL: a space-separated phone number renders as THREE bidi runs, so RTL
reverses the groups — "0104 490 9099" displayed as "9099 490 0104", a wrong
number. Caught on the Arabic contact page. The selectors below cover all
three places it appears: the fact rail, the practice card link, and the
sentence under the form.
Any new phone or account number needs `dir="ltr"` or a class listed here. */
.practice__row a[href^="mailto"],
.practice__row a[href^="tel"],
a[href^="mailto"],
a[href^="tel"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* wa.me links are the exception: the HREF is a number but the TEXT may not be.
These used to be in the block above with `direction: ltr`, which was right
while the footer link read "0104 490 9099". Once it was translated to
"واتساب" the forced LTR made `text-align: start` resolve to the LEFT, so the
link sat on the opposite side from every other item in its column.
`plaintext` takes the direction from the content instead of forcing it, so a
number is still protected from bidi group-reversal and an Arabic label still
reads right-to-left. Do not put these back under `direction: ltr`. */
.practice__row a[href*="wa.me"],
a[href*="wa.me"] { unicode-bidi: plaintext; display: inline-block; }
/* The WhatsApp number in the fact rail is a plain
with no link. */
.factline__item dd { unicode-bidi: plaintext; }
/* At 320px the Arabic page scrolled 5px sideways and every top-level element
sat at left:15 instead of left:0.
`overflow-x: hidden` lives on `body` (base.css). In LTR that clips an
over-wide child on the right and the page looks fine. In RTL the same
overflow escapes to the LEFT, which `overflow-x` on the body does not
contain -- the body itself gets pushed inward instead, so the whole page
shifts right by the overflow amount.
The trigger is `.hero__type { min-width: 300px }`: at 320px the content box
is 305px, and 300px plus the column gap no longer fits.
Two-part fix, both RTL-only so English keeps its current behaviour:
clip at the document element, where RTL overflow is actually contained,
and relax the hero minimum below 360px so nothing needs clipping. */
@media (max-width: 360px) {
html { overflow-x: hidden; }
.hero__type { min-width: 0; }
}
/* ---- The premise section, resized on Osama's screenshot 2026-09-28 -------
Arabic only. Three changes he asked for by eye:
01 — الفكرة 13.5px -> 17px (bigger)
the statement 46px -> 40px (smaller)
the paragraph 23px -> 20px (smaller)
The eyebrow is styled directly rather than by raising `--meta`. That token
feeds NINE consumers -- the footer headings, nav links, field labels,
.overlay__link-index and more -- and lifting it to resize an eyebrow would
move all of them.
Applied to EVERY .eyebrow, not just this section's. Sizing one alone left
"01 — الفكرة" visibly larger than "02 — انواع الجلسات" right below it, and
section eyebrows are one series: they have to match. (Osama confirmed.)
The statement only drops 6px. It is the section's whole reason to exist and
has to stay the heaviest thing in it; taking it to the sub's size would
flatten the hierarchy. At 40/20 the ratio is still 2:1, exactly what it was
at 46/23, so the two keep their relationship -- both just sit lower. */
.eyebrow {
font-size: clamp(15px, 0.24vw + 12px, 17px);
}
/* Above 860px only. layout.css already drops these two to 22-28px / 15-18px
on mobile, where the statement is stacked and the measure is released --
and rtl.css loads AFTER layout.css, so an unscoped rule here would win over
that media query and put the desktop sizes back on a phone. */
@media (min-width: 861px) {
.premise {
font-size: clamp(26px, 2.9vw, 40px);
}
.premise--sub {
font-size: clamp(16px, 1.3vw, 20px);
}
}
/* ---- The services offer card, 2026-09-28 --------------------------------
Arabic only. Measured before touching it, and the numbers showed the fault:
FIVE elements sat between 13.5px and 14.6px -- title aside, everything in
the card was within about a pixel of everything else, so nothing led.
Worse, the description was 14.6px/300 against its own labels at 13.5px/400:
the actual copy rendered LIGHTER than the words labelling it. In Kufi,
which has no italic and carries emphasis through weight, that inverts the
hierarchy outright.
The fix separates the levels by size AND weight rather than size alone:
title 32px 300 -> 500 (Kufi at 300 reads thin for a heading)
subtitle 13.5 400 -> 16px (a format line, not fine print)
description 14.6 300 -> 18px/400 (the main copy; must outrank labels)
split label 13.5 400 -> 14px/600 (small, but a LABEL via weight)
split body 14.6 300 -> 16px/400
fee value 14.6 300 -> 17px/500 (it is an answer; give it weight)
Scoped through `.offer`, which exists only on the services page. `.body`
and `.h-sub` are shared with about/contact/process, so styling them bare
would reach pages this request never mentioned. */
.offer .h-sub {
font-weight: 500;
}
/* the format line under the title */
.offer__body > .meta {
font-size: clamp(14px, 0.2vw + 11.4px, 16px);
color: var(--brass-deep);
}
/* the card's main paragraph */
.offer__body > .body {
font-size: clamp(16px, 0.35vw + 12.5px, 18px);
font-weight: 400;
line-height: 1.85;
}
/* "مناسبة لمين" / "محتوي" -- kept small, separated by weight not size.
500, not 600: Kufi is enqueued at 300/400/500 only, so 600 would be a
browser-synthesised fake bold -- a smeared outline, not a real cut. 500
against 400 body copy is enough separation and costs no extra download. */
.offer__split .meta {
font-size: clamp(13px, 0.15vw + 11px, 14px);
font-weight: 500;
color: var(--green);
}
.offer__split .body {
font-size: clamp(15px, 0.25vw + 12px, 16px);
font-weight: 400;
line-height: 1.8;
}
.offer .fee__value {
font-size: clamp(15px, 0.3vw + 12px, 17px);
font-weight: 500;
color: var(--green);
}
.offer .fee__label {
font-weight: 500;
}
/* On the green card every colour set above has to be restated for the dark
ground -- the weights carry over, the inks do not.
The subtitle was the real fault (Osama spotted it 2026-09-28): I set it to
`--brass-deep` unconditionally in the pass above, and that is a dark brass
drawn for a LIGHT ground. Measured on the green card it came to **2.44:1**,
well under the 4.5 AA needs, against 5.95:1 for the same line on ivory.
`--brass-light` measures **7.37:1** there and is the token the theme
already uses for brass on green (.on-green .link-arrow). It keeps the line
reading as brass -- its role on the ivory card -- instead of flattening it
to plain ivory, which would lose the distinction from the description. */
.on-green .offer__body > .meta { color: var(--brass-light); }
.on-green .offer__split .meta,
.on-green .offer .fee__value { color: var(--ivory); }
/* ------------------------------------------------------------ booking ---- */
/* Most of booking.css needs nothing here: it was written with logical
properties (padding-inline-start, border-inline-start, text-align: end), so
it mirrors on its own. These are the cases logical properties cannot reach. */
/* The day strip scrolls horizontally. In RTL it must start at the right-hand
end — the earliest date — or the visitor opens the calendar already
scrolled to the far future. */
.bk-days { direction: rtl; }
/* Times, dates and the reference are numeric and must not be bidi-reordered.
"10:00" is safe as one run, but the reference MH-2481 mixes Latin letters
with digits and a hyphen, which is exactly the three-run shape that
reversed the WhatsApp number on the contact page. */
.bk-slot,
.bk-day__n,
.bk-ref__value,
.bk-send__to { unicode-bidi: plaintext; }
/* The payment destination is an InstaPay handle or a wallet number — always
Latin/numeric, and already carries dir="ltr" in the markup. This backs it
up for the case where a handle is pasted without the attribute. */
.bk-send__to { direction: ltr; text-align: start; }
/* The step connector is a plain width, so it mirrors with flex direction —
but the small negative offset on the couples legend is physical. */
.bk-couples__legend { margin-inline-start: -8px; margin-inline-end: 0; }
/* Arabic has no capitals, so the uppercase tracking that shapes these labels
in Latin only cramps them here. Same treatment the rest of rtl.css gives
.eyebrow and .meta. */
.bk-steps__label,
.bk-card__n,
.bk-card__len,
.bk-card__price,
.bk-day__wd,
.bk-day__mo,
.bk-drop__sub,
.bk-ref__label,
.bk-ref__pill,
.bk-send__label,
.bk-summary__row dt,
.bk-summary__total-label { letter-spacing: 0.05em; }
/* Arabic has no capitals, so the 10px hardcoded on these labels renders as
cramped script rather than as the wide, deliberate shape uppercase Latin
gives at the same size. rtl.css already raises --meta for exactly this
reason (13-15px); these three were written as literals and so missed it.
Only the LABELS move. The date numeral stays at its display size, and the
slot times stay as they are — digits are the same shape in both scripts. */
.bk-day__wd,
.bk-day__mo,
.bk-steps__n { font-size: 12px; }
/* The step bead grows with its numeral so the digit is not clipped. */
.bk-steps__n { width: 26px; height: 26px; }