/* ========================================================================== tracee-rtl.css Right-to-left layer for the Arabic edition of the site (/ar/). Loaded AFTER tracee.css and only on pages carrying . Every rule is scoped to [dir="rtl"], so this file is inert on the EN and FR pages even if it is ever loaded there by accident. Scope of the flips, in order: 1. Typography: Arabic face, numerals, letter-spacing reset 2. Document chrome: skip link, scroll progress, section dot nav 3. Layout edges: borders, paddings, auto margins 4. List bullets and arrow glyphs 5. Motion: marquee, hover nudges, reveal transforms 6. Forms and cards 7. Mobile overrides Note on letter-spacing: the EN design leans on wide tracking for its uppercase eyebrows and labels. Arabic script is cursive and letter-spacing breaks the joins between glyphs, so tracking is reset to normal wherever Arabic text renders. text-transform: uppercase is likewise a no-op in Arabic and is cleared so it does not affect any Latin run inside the text. ========================================================================== */ /* ============== 0. Headliner (Arabic display face) ============== */ /* Supplied by the client as Headliner Medium and Bold, converted from OTF to WOFF2 (roughly 85 KB per weight). It covers the Arabic block with a full GSUB 'arab' script, so joining and contextual forms shape correctly, plus a Latin set close in spirit to Poppins. It is a display face: strong at headline sizes, too tight in the counters for long paragraphs at 14 to 16px. So it carries the display layer of the Arabic pages (headlines, card titles, nav, buttons, labels) and IBM Plex Sans Arabic carries the reading layer (body copy, ledes, list items, FAQ answers, glossary definitions, form fields). Display face for the voice, text face for the reading. */ @font-face { font-family: 'Headliner'; src: url('/assets/fonts/headliner-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Headliner'; src: url('/assets/fonts/headliner-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ============== 1. Typography ============== */ /* Reading layer. IBM Plex Sans Arabic leads: it carries the Arabic script and holds up in long paragraphs at 14 to 16px, which is where most of the words on these pages live. Poppins follows so any Latin run the Arabic face does not cover still lands on the brand face. The display layer below overrides this for headings. SVG is excluded throughout because its font-family lives in presentation attributes that drive the diagrams. */ [dir="rtl"] body, [dir="rtl"] body *:not(svg):not(svg *) { font-family: 'IBM Plex Sans Arabic', 'Poppins', 'Noto Sans Arabic', sans-serif !important; } /* Display layer: Headliner first, so Arabic headings and UI labels render in it, and the Latin runs inside them do too (it ships a Latin set). IBM Plex Sans Arabic stays in the stack as the fallback while Headliner loads, or if it fails to load at all. The descendant selector is not decoration. The blanket reading rule above matches every element directly and carries !important, so a heading built as

...

, which is how every headline on this site is built, would lose: a direct match beats an inherited one at equal importance. Listing the descendants gives the display face a direct match of its own. SVG is excluded so the inline diagrams keep their own metrics. */ [dir="rtl"] :is( .display-headline, .hero-headline, .h1, .h2, .h3, h1, h2, h3, h4, .nav-link, .cta-pill, .cta-primary, .cta-ghost, .skip-link, .eyebrow, .caption, .practice-title, .practice-number, .practice-claim, .award-title, .award-eyebrow, .award-extension-eyebrow, .award-extension-btn, .report-title, .report-cta, .report-meta, .briefing-title, .briefing-cta, .briefing-meta, .offer-num, .offer-title, .process-num, .process-title, .engagement-meta, .founder-name, .founder-block-label, .card-name, .card-role, .founder-stat, .trusted-eyebrow, .footer-col-title, .footer-registry-label, .footer-registry-btn, .section-nav-dot::after, .g-term h3, .g-cat-chip, .b-tag, .form-row label, .r-title, .label, summary, button, .btn ), [dir="rtl"] :is( .display-headline, .hero-headline, .h1, .h2, .h3, h1, h2, h3, h4, .nav-link, .cta-pill, .cta-primary, .cta-ghost, .skip-link, .eyebrow, .caption, .practice-title, .practice-number, .practice-claim, .award-title, .award-eyebrow, .award-extension-eyebrow, .award-extension-btn, .report-title, .report-cta, .report-meta, .briefing-title, .briefing-cta, .briefing-meta, .offer-num, .offer-title, .process-num, .process-title, .engagement-meta, .founder-name, .founder-block-label, .card-name, .card-role, .founder-stat, .trusted-eyebrow, .footer-col-title, .footer-registry-label, .footer-registry-btn, .g-term h3, .g-cat-chip, .b-tag, .form-row label, .r-title, .label, summary, button, .btn ) *:not(svg):not(svg *) { font-family: 'Headliner', 'IBM Plex Sans Arabic', 'Poppins', sans-serif !important; } /* Headliner runs tight by design. Give the long Arabic headlines a little more leading than the Latin display sizes use, so the diacritics do not collide. */ [dir="rtl"] .display-headline, [dir="rtl"] .hero-headline, [dir="rtl"] .h1 { line-height: 1.22; } [dir="rtl"] .h2, [dir="rtl"] .h3 { line-height: 1.28; } /* Cursive script: no tracking, no case transform. Applied to the label-style components that carry wide tracking in the LTR sheet. */ [dir="rtl"] .eyebrow, [dir="rtl"] .caption, [dir="rtl"] .nav-link, [dir="rtl"] .cta-pill, [dir="rtl"] .cta-primary, [dir="rtl"] .cta-ghost, [dir="rtl"] .skip-link, [dir="rtl"] .award-eyebrow, [dir="rtl"] .award-extension-eyebrow, [dir="rtl"] .practice-number, [dir="rtl"] .offer-num, [dir="rtl"] .process-num, [dir="rtl"] .process-title, [dir="rtl"] .report-meta, [dir="rtl"] .report-cta, [dir="rtl"] .briefing-meta, [dir="rtl"] .briefing-cta, [dir="rtl"] .trusted-eyebrow, [dir="rtl"] .footer-col-title, [dir="rtl"] .footer-registry-label, [dir="rtl"] .footer-registry-btn, [dir="rtl"] .section-nav-dot::after, [dir="rtl"] .form-row label, [dir="rtl"] .g-cat-chip, [dir="rtl"] .b-tag, [dir="rtl"] .award-extension-btn { letter-spacing: normal; text-transform: none; } /* Arabic reads better with slightly more line height at body sizes. */ [dir="rtl"] p, [dir="rtl"] .lede, [dir="rtl"] li, [dir="rtl"] .faq-answer, [dir="rtl"] .practice-claim, [dir="rtl"] .award-desc, [dir="rtl"] .briefing-summary, [dir="rtl"] .report-summary, [dir="rtl"] .g-term p { line-height: 1.85; } /* Headline stacks keep their tight leading but lose the tracking. */ [dir="rtl"] .display-headline, [dir="rtl"] .h2, [dir="rtl"] .h3 { letter-spacing: normal; line-height: 1.3; } /* Latin-only runs inside Arabic prose: force LTR so brand names, tickers and regulation shorthands (MiCA, USDC, GENIUS Act, 12-24) render in order. */ [dir="rtl"] .ltr, [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Email addresses and URLs must not be reordered by the bidi algorithm. */ [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="http"] { unicode-bidi: isolate; } /* ============== 2. Document chrome ============== */ [dir="rtl"] .skip-link { left: auto; right: 8px; } /* Progress bar fills from the right edge in RTL. */ [dir="rtl"] .scroll-progress { left: auto; right: 0; transform-origin: 100% 50%; } /* Section dot nav moves to the left edge, labels flip to its right. */ [dir="rtl"] .section-nav { right: auto; left: 24px; } [dir="rtl"] .section-nav-dot::after { right: auto; left: 22px; transform: translateY(-50%) translateX(-8px); } [dir="rtl"] .section-nav-dot:hover::after, [dir="rtl"] .section-nav-dot.active::after { transform: translateY(-50%) translateX(0); } /* Language switcher sits inboard of the CTA pill on both sides. */ [dir="rtl"] .lang-switch { margin-right: 0; margin-left: 8px; } /* ============== 3. Layout edges ============== */ /* Offer columns: the neutral hairline divider moves to the other edge so the first column still opens flush with the container. */ [dir="rtl"] .offer-col { border-left: none; border-right: 1px solid var(--phantom); } [dir="rtl"] .offer-col:first-child { padding-left: 40px; padding-right: 0; border-right: none; } [dir="rtl"] .offer-col:last-child { padding-right: 40px; padding-left: 0; } [dir="rtl"] .process-node { align-items: flex-start; padding-right: 0; padding-left: 20px; } /* Practice / engagement cards: the decorative SVG is pinned to the card's right edge, which is where the Arabic title and claim now begin. Left unflipped it sits underneath the text. Moving it to the left edge restores the LTR relationship, where the art sits opposite the copy. */ [dir="rtl"] .practice-visual { right: auto; left: 28px; } /* Long-form prose lists (legal, privacy, booked, founder bio). */ [dir="rtl"] .report-prose li { padding-left: 0; padding-right: 22px; } [dir="rtl"] .report-prose li::before { left: auto; right: 0; } /* Auto-margin pushes reverse direction. */ [dir="rtl"] .footer-crumb .right { margin-left: 0; margin-right: auto; } [dir="rtl"] .report-toc-list .toc-page { margin-left: 0; margin-right: auto; } /* Decorative radial glows anchored to a corner. */ [dir="rtl"] .calendly-card::before, [dir="rtl"] .practice-card::before { right: auto; left: -120px; } /* Founder block: corner brackets, quote and social row all mirror. */ [dir="rtl"] .founder-photo-deco.tl { left: auto; right: -10px; border-right: 2px solid var(--lime); border-left: none; border-bottom: none; } [dir="rtl"] .founder-photo-deco.br { right: auto; left: -10px; border-left: 2px solid var(--lime); border-right: none; border-top: none; } [dir="rtl"] .founder-photo-dot { right: auto; left: -10px; } [dir="rtl"] .founder-quote { text-align: left; margin-left: 0; margin-right: auto; } [dir="rtl"] .founder-social { justify-content: flex-start; } /* ============== 4. List bullets and arrow glyphs ============== */ /* Round-dot lists: indent and marker both move to the right edge. */ [dir="rtl"] .format-list li, [dir="rtl"] .practice-bullets li { padding-left: 0; padding-right: 22px; } [dir="rtl"] .format-list li::before, [dir="rtl"] .practice-bullets li::before { left: auto; right: 0; } /* Arrow lists: indent flips and the glyph itself reverses, because an arrow pointing right reads as "backwards" in a right-to-left column. */ [dir="rtl"] .b-arrow-list li { padding-left: 0; padding-right: 28px; } [dir="rtl"] .b-arrow-list li::before { content: '\2190'; left: auto; right: 0; } /* Inline external-link arrow points up-left in RTL. */ [dir="rtl"] .external-arrow { display: inline-block; transform: scaleX(-1); } /* Breadcrumb separators point the reading direction. */ [dir="rtl"] .footer-crumb .sep { transform: scaleX(-1); display: inline-block; } /* ============== 5. Motion ============== */ /* Logo marquee scrolls toward the right in RTL so it tracks the reading eye. Done with its own keyframes rather than animation-direction: reverse. Reverse starts the track at translateX(-50%), which parks the first set of logos far off the left edge on the opening frame; they are loading="lazy", so the browser never pulls them and the rail renders half empty until it has scrolled a full cycle. Starting at 0 and travelling to +50% gives the same rightward motion with every logo inside the layout from the first frame. In RTL the flex track already lays its items out right to left, so +50% is the direction that reveals the duplicated second set. */ @keyframes marquee-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } [dir="rtl"] .marquee-track { animation-name: marquee-scroll-rtl; } /* Hover nudges on card CTAs move toward the reading edge. */ [dir="rtl"] .report-card:hover .report-cta::after, [dir="rtl"] .briefing-card:hover .briefing-cta::after { transform: translateX(-4px); } [dir="rtl"] .report-cta::after, [dir="rtl"] .briefing-cta::after, [dir="rtl"] .cta-ghost::after { transform: scaleX(-1); display: inline-block; } /* The practice-card corner arrow is a glyph, not an icon font. */ [dir="rtl"] .practice-arrow { display: inline-block; transform: scaleX(-1); } /* ============== 6. Forms and cards ============== */ [dir="rtl"] .form-row input, [dir="rtl"] .form-row textarea, [dir="rtl"] .form-row select { text-align: right; direction: rtl; } /* Email and URL inputs stay LTR: the value is Latin even on an Arabic page. */ [dir="rtl"] .form-row input[type="email"], [dir="rtl"] .form-row input[type="url"], [dir="rtl"] .form-row input[type="tel"] { text-align: left; direction: ltr; } /* Honeypot: keep it off the opposite edge so it stays off-canvas in RTL too. */ [dir="rtl"] .hp-field { left: auto; right: -9999px; } /* Glossary cards and their category chips. */ [dir="rtl"] .g-term, [dir="rtl"] .g-term p, [dir="rtl"] .g-term h3 { text-align: right; } /* ============== 7. Mobile ============== */ @media (max-width: 1080px) { [dir="rtl"] .offer-col, [dir="rtl"] .offer-col:first-child, [dir="rtl"] .offer-col:last-child { border-right: none; border-left: none; padding-right: 0; padding-left: 0; } [dir="rtl"] .founder-quote { text-align: right; margin-right: 0; } [dir="rtl"] .footer-crumb .right { margin-right: 0; } [dir="rtl"] .b-arrow-list li { padding-right: 22px; padding-left: 0; } /* Mobile process rail: the vertical line, the node dots and the indent that clears them all sit on the left in LTR. */ [dir="rtl"] .process-track::before { left: auto; right: 7px; } [dir="rtl"] .process-nodes { padding-left: 0; padding-right: 32px; } [dir="rtl"] .process-node::before { left: auto; right: -32px; } [dir="rtl"] .process-node { padding-left: 0; } }