/* =========================================================================== tal4biz.com — foglio di ribaltamento per l'arabo Caricato SOLO dalle pagine /ar/, subito dopo style.css. Perche' un file separato invece di convertire style.css a proprieta' logiche: la conversione avrebbe toccato il foglio di stile di tutte le lingue, con un collaudo da rifare su tutto il sito. Questo file non modifica una riga del CSS esistente, quindi le altre sei lingue non corrono alcun rischio. Il prezzo da pagare: se in futuro style.css introduce nuove proprieta' direzionali (left, right, margin-left, text-align, translateX), vanno rispecchiate anche qui. L'elenco delle regole ribaltate e' commentato voce per voce proprio per rendere il confronto rapido. ========================================================================= */ /* --- 1. Tipografia araba ------------------------------------------------- Inter e Outfit non hanno glifi arabi. Noto Sans Arabic entra subito dopo, cosi' marchi, sigle e numeri latini dentro il testo arabo restano resi con i font del marchio. I font di sistema chiudono la catena. */ html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea{ font-family:'Inter','Noto Sans Arabic','Segoe UI','Geeza Pro',Tahoma,sans-serif; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ font-family:'Outfit','Noto Sans Arabic','Segoe UI','Geeza Pro',Tahoma,sans-serif; } /* La crenatura spezza le legature dell'arabo, che e' una scrittura corsiva: le lettere devono restare unite. Va azzerata ovunque il latino la usi. text-transform:uppercase non ha effetto sull'arabo, ma si azzera comunque per non lasciare regole che ingannano chi legge il CSS. */ html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] .eyebrow, html[lang="ar"] .hero-tagline span, html[lang="ar"] .hero-stat .lbl, html[lang="ar"] .highlight-callout, html[lang="ar"] .view-card .view-head .idx, html[lang="ar"] .gap-feature-content .label, html[lang="ar"] .converge-tile .tile-num, html[lang="ar"] .footer-col h3{ letter-spacing:0; } /* L'arabo ha ascendenti e discendenti piu' lunghi del latino e nessuno spazio interparola visibile: con l'interlinea tarata sul latino le righe si toccano. */ html[lang="ar"] body{line-height:1.9;} html[lang="ar"] h1, html[lang="ar"] h2{line-height:1.45;} /* --- 2. Direzione di base ------------------------------------------------ */ html[lang="ar"] body{direction:rtl;text-align:right;} html[lang="ar"] .container{direction:rtl;} /* Contenuti che restano in lettura sinistra-destra anche in una pagina RTL: indirizzi email, numeri di telefono, URL e codici. Forzarli e' necessario, altrimenti l'algoritmo bidirezionale sposta la punteggiatura finale all'inizio e un indirizzo email risulta illeggibile. */ html[lang="ar"] [dir="ltr"], html[lang="ar"] a[href^="mailto:"], html[lang="ar"] code{direction:ltr;unicode-bidi:isolate;display:inline-block;} /* --- 3. Elementi posizionati in assoluto --------------------------------- Ogni voce corrisponde a una regola di style.css con left o right fissi. */ /* .skip-link { left:0 } */ html[lang="ar"] .skip-link{left:auto;right:0;} /* .back-to-top { right:24px } */ html[lang="ar"] .back-to-top{right:auto;left:24px;} /* .main-nav a::after { left:0 } — sottolineatura della voce attiva */ html[lang="ar"] .main-nav a::after{left:auto;right:0;} /* .menu-toggle span::before/::after { left:0 } */ html[lang="ar"] .menu-toggle span::before, html[lang="ar"] .menu-toggle span::after{left:auto;right:0;} /* .card-list li::before { left:0 } — pallino dell'elenco */ html[lang="ar"] .card-list li{padding-left:0;padding-right:1.6rem;} html[lang="ar"] .card-list li::before{left:auto;right:0;} /* .highlight-callout::before { left:16px } */ html[lang="ar"] .highlight-callout::before{left:auto;right:16px;} html[lang="ar"] .highlight-callout{border-left:none;border-right:4px solid var(--yellow-500);} /* .lang-menu { right:0 } — il menu a tendina si apre dall'altro lato */ html[lang="ar"] .lang-menu{right:auto;left:0;} /* .lang-switcher { margin-left } */ html[lang="ar"] .lang-switcher{margin-left:0;margin-right:0.5rem;} /* .converge-center { left:50% } resta invariato: e' un centraggio, non un lato */ /* --- 4. Frecce ----------------------------------------------------------- Il markup contiene 32 frecce → scritte a mano nel testo. In una pagina RTL devono puntare a sinistra, cioe' nel verso di lettura. Si ribaltano con una trasformazione invece di sostituire il carattere in 12 pagine: cosi' il testo resta uguale a quello delle altre lingue e non c'e' un secondo punto da tenere allineato. */ html[lang="ar"] .arrow{display:inline-block;transform:scaleX(-1);} html[lang="ar"] .btn:hover .arrow{transform:scaleX(-1) translateX(3px);} html[lang="ar"] .card:hover .card-link .arrow{transform:scaleX(-1) translateX(4px);} /* --- 5. Moduli ----------------------------------------------------------- I campi di testo seguono la direzione della pagina. Email, telefono e URL no: il loro contenuto e' latino, e vanno allineati a destra come gli altri campi ma scritti da sinistra. */ html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select{text-align:right;} html[lang="ar"] input[type="email"], html[lang="ar"] input[type="tel"], html[lang="ar"] input[type="number"]{direction:ltr;text-align:right;} html[lang="ar"] input::placeholder, html[lang="ar"] textarea::placeholder{text-align:right;} html[lang="ar"] input[type="email"]::placeholder, html[lang="ar"] input[type="tel"]::placeholder{direction:rtl;text-align:right;} /* Il segnaposto del campo "ruolo" resta in inglese in tutte le lingue (CEO, CFO, HR Director…): sono le sigle che il pubblico d'affari usa. In un campo RTL i puntini di sospensione finali, che sono neutri, migrano all'inizio e si legge "…CEO, CFO, HR Director". Il solo segnaposto torna quindi in lettura sinistra-destra; il testo digitato dall'utente resta RTL, perche' la direzione del campo non cambia. */ html[lang="ar"] #ruolo::placeholder{direction:ltr;text-align:right;} /* La casella di consenso e' un