/* ============================================================ SaaSpartout — RTL baseline (caricato solo sulle pagine /ar/). L'attributo dir="rtl" sull' fa gia' il grosso del lavoro (direzione del testo, allineamenti di default). Qui sistemiamo solo cio' che non si specchia da solo. Da rifinire visivamente dopo aver visto le pagine arabe renderizzate. ============================================================ */ [dir="rtl"] body { direction: rtl; text-align: right; } /* === Stop allo scroll orizzontale in RTL (robusto) === Cause comuni: elementi full-bleed o con width:100vw (100vw INCLUDE la barra di scorrimento -> sforano di ~15px), decorazioni posizionate che si specchiano a destra. overflow-x: clip taglia senza creare un contenitore scrollabile (piu' affidabile di hidden) e mantiene lo scroll verticale. */ html[dir="rtl"] { overflow-x: clip !important; } html[dir="rtl"] body { overflow-x: clip !important; max-width: 100%; position: relative; } /* NB: NIENTE max-width forzato sui contenitori interni (.sp-container ecc.): sovrascriverebbe il max-width di design + margin auto e farebbe espandere il contenuto da bordo a bordo, rompendo il layout centrato come in inglese. Lo scroll orizzontale e' gia' gestito da overflow-x:clip su html/body sopra. */ /* Nessun elemento deve sforare a destra: contenimento dei box con decorazioni. */ [dir="rtl"] .sp-ai-cta { overflow: hidden; } /* Contenitori principali dei template SaaSpartout */ [dir="rtl"] .sp-tool-page, [dir="rtl"] .sp-single, [dir="rtl"] .sp-marketplace, [dir="rtl"] .sp-partner-page, [dir="rtl"] .sp-tool-card, [dir="rtl"] article { text-align: right; } /* Liste: rientro sul lato corretto */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.25em; padding-left: 0; } /* Breadcrumb: separatori e flusso da destra */ [dir="rtl"] .sp-breadcrumb, [dir="rtl"] .sp-breadcrumbs { direction: rtl; } /* Numeri, prezzi e codici restano in lettura LTR anche dentro testo RTL */ [dir="rtl"] .sp-price, [dir="rtl"] code, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; } /* ============================================================ Skip-link: l'implementazione del tema lo nasconde con un offset negativo a SINISTRA (es. left:-9999px). In RTL quell'offset si specchia a DESTRA e crea una barra di scorrimento orizzontale. Lo nascondiamo col pattern accessibile standard (1px + clip), neutro rispetto alla direzione, e lo ripristiniamo al :focus. ============================================================ */ [dir="rtl"] .sp-skip-link, [dir="rtl"] .skip-link, [dir="rtl"] a.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; inset-inline-start: 0; left: auto; right: auto; } [dir="rtl"] .sp-skip-link:focus, [dir="rtl"] .skip-link:focus, [dir="rtl"] a.screen-reader-text:focus { position: fixed !important; width: auto; height: auto; margin: 0; padding: .75em 1.25em; clip: auto; clip-path: none; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 100000; background: #f97316; color: #0A0A0A; border-radius: 8px; font-weight: 700; }