/* ========================================================================== AGAMI — Foglio RTL per la lingua araba. Caricato SOLO per «ar» (html[dir="rtl"], body.rtl) e DOPO agami.css, quindi qui si correggono anche i valori cablati nei partial senza toccarli. Il layout usa proprietà logiche ovunque: qui vive solo la TIPOGRAFIA araba. Tutto è agganciato a `body.rtl` (mai `:root`, che appartiene a 00-tokens): i token ridefiniti su vengono ereditati da tutto il documento e battono per specificità i blocchi `[dir="rtl"] …` dei partial. Sezioni: 1 · Contenimento 2 · Le due voci arabe (token di famiglia, peso, tracking) 3 · Interlinea dei titoli con line-height cablato 4 · Etichette: mai tracking, mai maiuscoletto sull'arabo 5 · Niente corsivo (non esiste in arabo) 6 · Frammenti latini dentro colonne RTL (indirizzi, sigle, date) 7 · Correzioni di layout specifiche dell'arabo ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Contenimento clip: nessuno scroll orizzontale senza creare uno scroll container (a differenza di hidden) e senza mascherare regressioni. -------------------------------------------------------------------------- */ body.rtl { overflow-x: clip; } /* -------------------------------------------------------------------------- 2 · Le DUE voci arabe — la gerarchia che in latino fanno tre famiglie In LTR: Cormorant Garamond (display) · Lora (editoriale) · Inter (UI). In arabo il corsivo e il maiuscoletto non esistono, quindi la gerarchia può nascere solo da FAMIGLIA + peso + corpo. Noto Sans Arabic da solo dava una pagina monovoce; qui si affianca Noto Naskh Arabic (SIL OFL, self-hosted in static/css/font-arabic.css) come voce display/editoriale: --display Noto Naskh Arabic ← titoli manifesto (ruolo di Cormorant) --serif Noto Naskh Arabic ← occhielli editoriali, lead, h3 --sans Noto Sans Arabic ← interfaccia, corpo, etichette I run LATINI dentro il testo arabo (AGAMI, Research Center, Journal, indirizzi, «Call for Papers») sono fuori dagli unicode-range arabi: gli stack li instradano esplicitamente sulle famiglie latine giuste — Inter per l'interfaccia, Cormorant/Lora per i titoli — invece di lasciarli cadere a caso. Inter è precaricato anche in RTL (base.html). -------------------------------------------------------------------------- */ body.rtl { --display: "Noto Naskh Arabic", "Cormorant Garamond", "Noto Sans Arabic", Georgia, serif; --serif: "Noto Naskh Arabic", "Lora", "Noto Sans Arabic", Georgia, serif; --sans: "Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* L'arabo non si spazia MAI: azzerare il token spegne il tracking in tutti i componenti che lo usano, presenti e futuri (niente whitelist da aggiornare). I pochi valori cablati sono corretti al § 4. */ --ls-label: 0; } /* Titoli: il naskh regge il corpo grande senza diventare un blocco, quindi il peso scende da 700 a 600 e il contrasto lo dà la famiglia, non il nero. */ body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl .hero-headline, body.rtl .page-hero h1, body.rtl .jm__title, body.rtl .editorial-quote, body.rtl .immersive-sec__title, body.rtl .media-panel__title, body.rtl .cta-band h2 { font-weight: 600; letter-spacing: 0; } body.rtl .num-display { font-weight: 600; letter-spacing: 0; } /* -------------------------------------------------------------------------- 3 · Interlinea I token --lh-* sono già alzati alla radice (00-tokens): restano i blocchi con line-height CABLATO, dove il token non arriva. La line box naturale dell'arabo è ≈1.20em (hamza di أ sopra, discendenti di ي ج ط sotto): sotto 1.25 le righe si toccano. Misurato prima: .hero-headline 1.02 (7 px di sovrapposizione a 390), .jm__title 0.98, page-hero ILE 1.14. -------------------------------------------------------------------------- */ body.rtl .hero-headline { line-height: 1.3; } body.rtl .page-ile .page-hero h1 { line-height: 1.3; } body.rtl .editorial-quote { line-height: 1.38; } body.rtl .rc-spine__title { line-height: 1.35; } body.rtl .ev-card__title, body.rtl .ev-card--featured .ev-card__title { line-height: 1.45; } body.rtl h3, body.rtl h4 { line-height: 1.45; } body.rtl blockquote, body.rtl .lead { line-height: 1.75; } body.rtl .kicker, body.rtl .overline { line-height: 1.6; } body.rtl .btn { line-height: 1.35; } /* Testata rivista: 100 px con interlinea 0.98 è illeggibile in arabo (e in latino qui arriva Cormorant, che a 80 px ha già presenza da manifesto). */ body.rtl .jm__title { font-size: clamp(2.75rem, 1.9rem + 4.2vw, 5rem); line-height: 1.26; } /* -------------------------------------------------------------------------- 4 · Etichette L'arabo non ha maiuscole: `text-transform: uppercase` è inerte sull'arabo ma stira i run latini dentro le etichette, e il tracking spezza le legature. Il token è già a 0 (§ 2); qui i valori cablati nei partial. -------------------------------------------------------------------------- */ body.rtl .kicker, body.rtl .overline, body.rtl .badge, body.rtl .chip, body.rtl .tag, body.rtl .filter-chip, body.rtl .sector-pill, body.rtl .footer-title, body.rtl .breadcrumb, body.rtl .card__month, body.rtl .btn, body.rtl .nav-link, body.rtl .tabs__tab, body.rtl .section-nav a, body.rtl .trust-strip__item, body.rtl .cookie-pref-state, body.rtl .founder-figure__role, body.rtl .portrait-feature__role, body.rtl .conversion-panel__trust, body.rtl .ev-card__datebadge .my, body.rtl .ev-card__panel-my, body.rtl .search-result__cat, body.rtl .event-info__k, body.rtl .carousel__counter, body.rtl .person-card .person-role, body.rtl .origins__attrib, body.rtl .origins__place, body.rtl blockquote cite, body.rtl blockquote footer { letter-spacing: 0; text-transform: none; } /* Rete di sicurezza sui nomi-pattern delle etichette: un componente nuovo che cabli il tracking non può più far regredire l'arabo. */ body.rtl :where([class*="__kicker"], [class*="__eyebrow"], [class*="__label"], [class$="-label"], [class*="__overline"]) { letter-spacing: 0; text-transform: none; } /* Eccezione: lockup interamente LATINO (titolo inglese della rivista). Il maiuscoletto spaziato è la sua forma, anche sulla pagina araba. */ body.rtl .jm__eng { letter-spacing: .04em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 5 · Corsivo Non esiste in arabo: l'obliquo è sintetico e deforma le legature. (jm__*, cfp-theme, ile-*note, page-hero-sub e dropdown-featured hanno già il reset nei rispettivi partial.) -------------------------------------------------------------------------- */ body.rtl .lead, body.rtl .section-lead, body.rtl blockquote, body.rtl .hero-sub, body.rtl .page-hero-sub, body.rtl .footer-tagline, body.rtl .pub-subtitle, body.rtl .pull-quote, body.rtl .pull-quote p, body.rtl .figure-caption, body.rtl .media-frame__caption, body.rtl cite, body.rtl .home-founder__lead, body.rtl .editorial-break__line, body.rtl .ev-card__panel-my--tba { font-style: normal; } /* Capolettera: in arabo le lettere sono legate, niente drop cap */ body.rtl .prose--lead h2 + p::first-letter { float: none; font: inherit; padding: 0; margin: 0; color: inherit; } /* -------------------------------------------------------------------------- 6 · Frammenti latini dentro colonne RTL Un indirizzo o una sigla latina allineata a destra dentro un blocco arabo diventa bandiera a sinistra e sposta la punteggiatura finale all'inizio dell'ultima riga (misurato: «Via Sandrigo n. 29, 36061 Bassano / del Grappa (VI)» nel footer, «.con la prima edizione» su /ar/eventi/). `unicode-bidi: plaintext` fa quello che farebbe dir="auto": la direzione di ogni paragrafo la decide il suo primo carattere forte, e l'allineamento la segue (verificato in Chromium: il paragrafo italiano passa da bandiera a destra con il punto finale in testa all'ultima riga, a bandiera a sinistra con il punto al suo posto). Nessuna modifica al markup. Elenco MIRATO, non globale: su un testo che comincia con una parola latina ma prosegue in arabo plaintext lo ribalterebbe a sinistra, peggiorando la lettura. Per questo `.ev-card__title` è ESCLUSO: i titoli degli eventi iniziano spesso con un marchio latino («PASSERELLES: AGAMI في مسار…») e devono restare a base RTL. Qui stanno solo i contenitori che ospitano prosa/dati interamente latini (indirizzi, sigle, temi non ancora tradotti). AGGIORNAMENTO (QA live 31/08/2026): `plaintext` risolve l'ordine interno ma sposta anche l'ALLINEAMENTO. Rendendo LTR il paragrafo, `text-align: start` diventa «sinistra»: misurato sul footer arabo, «AGAMI – Dialogo Giuridico Interculturale APS» finiva con l'inchiostro a x 38–362 dentro una colonna larga 38–1402, cioè a bandiera sinistra sotto righe arabe allineate a destra. La lista si divide quindi in due casi distinti. Caso A — frammenti BREVI di dati (nome legale, indirizzi, sigle): devono restare al bordo d'inizio della colonna RTL, con l'ordine interno latino corretto. È esattamente ciò che fa `isolate`: isola la sequenza latina dal contesto bidi SENZA cambiare la direzione del paragrafo che la contiene. (Verificato in Chromium: inchiostro a x 1078–1402, a filo con l'arabo.) */ body.rtl .footer-contact__text, body.rtl .footer-legal-identity .footer-legal-name, body.rtl .footer-legal-identity .footer-legal-line > span, body.rtl .ev-card__place, body.rtl .contact-card__sedi dd, body.rtl .inst-data dd, body.rtl address { unicode-bidi: isolate; } /* Caso B — PROSA lunga non ancora tradotta (interi paragrafi italiani). Qui `plaintext` resta la scelta giusta: allineata a destra, la prosa italiana sarebbe a bandiera sinistra con il punto finale in testa all'ultima riga. È una toppa di leggibilità, non una soluzione: la soluzione è tradurre (vedi AGENT_rtl.md P1-1, /ar/eventi/). */ body.rtl .ev-card__summary, body.rtl .forum-card__text, body.rtl .forum-band__text, body.rtl .jm__sub, body.rtl .jm__issue-theme, body.rtl .jr-issues__theme, body.rtl .cfp-theme, body.rtl .pub-subtitle { unicode-bidi: plaintext; } /* -------------------------------------------------------------------------- 7 · Layout -------------------------------------------------------------------------- */ /* Titoli lunghi nelle testate: mai overflow orizzontale */ body.rtl .hero h1, body.rtl .page-hero h1 { word-break: break-word; overflow-wrap: break-word; } /* Il FAB «torna su» è fisso su inset-inline-end: in RTL cade in basso a sinistra, esattamente sopra l'ultimo link della riga legale (misurato: copre «الأسئلة المتكررة»). Riserva la corsia del bottone. NB: in LTR il difetto è identico su «FAQ» → va risolto in 70-footer.css. */ body.rtl .footer-bottom { padding-inline-end: 4rem; } /* Navigazione: il mirror di `.nav-item--align-end > .dropdown` non serve più — 30-header-nav.css ancora i dropdown con inset-inline-start/-end, quindi la classe semantica si specchia da sola in RTL. */