/* ============================================================ iH4xz Onyx Theme — assets/css/rtl.css Arabic RTL Support — loaded only when is_rtl() is true. Font strategy: Body/UI → IBM Plex Sans Arabic (geometric, techy, matches Syne) Mono/UI → Cairo (clean angular Arabic, pairs with Space Mono) Fallback → system-ui Arabic stack Approach: RTL-first overrides. All LTR-specific directional properties (padding-left, border-left, text-align, margin-left, flex-direction, etc.) are flipped here. The base theme.css remains untouched — this file layers on top. ============================================================ */ /* ── Arabic Font Imports ── */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Cairo:wght@400;500;600;700;800;900&display=swap'); /* ── Arabic Font Variables ── */ :root { --font-arabic: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --font-arabic-mono: 'Cairo', 'IBM Plex Sans Arabic', monospace; --arabic-line-height: 1.9; /* Arabic needs more breathing room */ --arabic-letter-spacing: 0; /* Never apply letter-spacing to Arabic */ } /* ───────────────────────────────────────────── 1. HTML / BODY — Direction & Base Font ───────────────────────────────────────────── */ html[dir="rtl"], body.rtl { direction: rtl; unicode-bidi: embed; } /* When WP sets lang="ar" on , activate Arabic fonts everywhere */ :lang(ar), [dir="rtl"] body.ih4xz-theme, body.rtl.ih4xz-theme { font-family: var(--font-arabic); line-height: var(--arabic-line-height); letter-spacing: 0 !important; /* Arabic never uses letter-spacing */ text-align: right; word-spacing: 0.05em; } /* ───────────────────────────────────────────── 2. GLOBAL DIRECTION FLIPS ───────────────────────────────────────────── */ /* Any element with forced LTR mono font — swap to Arabic mono */ [dir="rtl"] .ih4xz-theme *, body.rtl.ih4xz-theme * { letter-spacing: 0 !important; /* Prevent letter-spacing breaking Arabic glyphs */ } /* Mono elements get Cairo (technical Arabic feel) */ [dir="rtl"] .ih4xz-theme .section-label, [dir="rtl"] .ih4xz-theme .archive-title, [dir="rtl"] .ih4xz-theme .hero-init, [dir="rtl"] .ih4xz-theme .hero-tagline, [dir="rtl"] .ih4xz-theme .post-meta, [dir="rtl"] .ih4xz-theme .nav-links a, [dir="rtl"] .ih4xz-theme .btn, [dir="rtl"] .ih4xz-theme .blog-date, [dir="rtl"] .ih4xz-theme .back-link, [dir="rtl"] .ih4xz-theme .badge, [dir="rtl"] .ih4xz-theme .project-status-badge, [dir="rtl"] .ih4xz-theme .sidebar-box-title, [dir="rtl"] .ih4xz-theme .section-label, [dir="rtl"] .ih4xz-theme .share-label, [dir="rtl"] .ih4xz-theme .post-password-eyebrow, [dir="rtl"] .ih4xz-theme .post-password-label, [dir="rtl"] .ih4xz-theme .post-password-hint, [dir="rtl"] .ih4xz-theme .copyright, [dir="rtl"] .ih4xz-theme .mono-empty, [dir="rtl"] .ih4xz-theme code, [dir="rtl"] .ih4xz-theme .tech-tag, [dir="rtl"] .ih4xz-theme .project-tech span, [dir="rtl"] .ih4xz-theme .changelog-box { font-family: var(--font-arabic-mono) !important; letter-spacing: 0 !important; } /* Headings & body text get IBM Plex Sans Arabic */ [dir="rtl"] .ih4xz-theme h1, [dir="rtl"] .ih4xz-theme h2, [dir="rtl"] .ih4xz-theme h3, [dir="rtl"] .ih4xz-theme h4, [dir="rtl"] .ih4xz-theme h5, [dir="rtl"] .ih4xz-theme h6, [dir="rtl"] .ih4xz-theme p, [dir="rtl"] .ih4xz-theme li, [dir="rtl"] .ih4xz-theme blockquote, [dir="rtl"] .ih4xz-theme .wp-content { font-family: var(--font-arabic) !important; letter-spacing: 0 !important; } /* ───────────────────────────────────────────── 3. NAVBAR ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .nav-inner { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .nav-links { flex-direction: row-reverse; } /* Logo flip — code tag goes to left side in RTL */ [dir="rtl"] .ih4xz-theme .logo { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .logo-code { margin-left: 0; margin-right: 2px; } /* Mobile nav — opens from right */ @media (max-width: 700px) { [dir="rtl"] .ih4xz-theme .nav-links { left: auto; right: 0; text-align: right; align-items: flex-end; } } /* ───────────────────────────────────────────── 4. HERO SECTION ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .hero { text-align: right; } [dir="rtl"] .ih4xz-theme .hero-title { /* Gradient text — direction stays the same visually */ display: block; /* block avoids inline bidi issues */ } [dir="rtl"] .ih4xz-theme .hero-glow { right: auto; left: -5%; /* Mirror the glow to the left side */ background: radial-gradient(circle, rgba(176,38,255,0.12), transparent 70%); } [dir="rtl"] .ih4xz-theme .btn-group { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .ih4xz-theme .btn { flex-direction: row-reverse; } /* ───────────────────────────────────────────── 5. SECTION LABELS & ARCHIVE TITLES ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .section-label, [dir="rtl"] .ih4xz-theme .archive-title { flex-direction: row-reverse; text-align: right; } /* The decorative line: was growing to the right, now grows to the left */ [dir="rtl"] .ih4xz-theme .section-label::after, [dir="rtl"] .ih4xz-theme .archive-title::after { background: linear-gradient(270deg, rgba(255,255,255,0.08), transparent); } /* ───────────────────────────────────────────── 6. PROJECT CARDS ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .project-card { text-align: right; } [dir="rtl"] .ih4xz-theme .project-card-header { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .project-links { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .project-tech { flex-direction: row-reverse; justify-content: flex-end; } /* ───────────────────────────────────────────── 7. BLOG ROWS (Archive & Home) ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .blog-row { direction: rtl; /* Flip the left accent border to right */ border-left: var(--border); border-right: 3px solid transparent; } [dir="rtl"] .ih4xz-theme .blog-row:hover { border-right-color: var(--accent-magenta); border-left-color: rgba(255,255,255,0.06); transform: translateX(-4px); /* slide left instead of right */ } [dir="rtl"] .ih4xz-theme .blog-row-content { text-align: right; } [dir="rtl"] .ih4xz-theme .blog-arrow { transform: scaleX(-1); /* flip arrow direction */ } [dir="rtl"] .ih4xz-theme .blog-row:hover .blog-arrow { transform: scaleX(-1) translateX(-3px); } /* ───────────────────────────────────────────── 8. SINGLE POST — Header & Meta ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .post-header { text-align: right; } [dir="rtl"] .ih4xz-theme .post-meta { flex-direction: row-reverse; text-align: right; justify-content: flex-end; } [dir="rtl"] .ih4xz-theme .meta-item { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .back-link { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .back-link:hover { gap: 0.8rem; } /* ───────────────────────────────────────────── 9. WP CONTENT TYPOGRAPHY (RTL) ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .wp-content { text-align: right; direction: rtl; line-height: var(--arabic-line-height); font-size: 1.1rem; /* Slightly larger — Arabic reads better slightly bigger */ } /* Headings */ [dir="rtl"] .ih4xz-theme .wp-content h2, [dir="rtl"] .ih4xz-theme .wp-content h3, [dir="rtl"] .ih4xz-theme .wp-content h4, [dir="rtl"] .ih4xz-theme .wp-content h5 { text-align: right; letter-spacing: 0; } /* Lists — flip bullet and padding */ [dir="rtl"] .ih4xz-theme .wp-content ul { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .ih4xz-theme .wp-content ul li::before { content: none; /* remove LTR ▸ pseudo */ } [dir="rtl"] .ih4xz-theme .wp-content ul li::after { content: ' ◂'; color: var(--accent-cyan); font-size: 0.8em; margin-right: -1.5rem; /* pull to the right gutter */ float: right; } [dir="rtl"] .ih4xz-theme .wp-content ol { padding-left: 0; padding-right: 1.5rem; } /* Blockquote — border moves to right side */ [dir="rtl"] .ih4xz-theme .wp-content blockquote { border-left: none; border-right: 4px solid var(--accent-purple); padding-left: 0; padding-right: 1.5rem; text-align: right; } /* Code blocks — keep LTR for actual code even in RTL context */ [dir="rtl"] .ih4xz-theme .wp-content pre, [dir="rtl"] .ih4xz-theme .wp-content pre code { direction: ltr; text-align: left; unicode-bidi: isolate; /* Flip the left accent border to right */ border-left: none; border-right: 3px solid var(--accent-cyan); } /* Inline code stays as-is (usually short, handles itself) */ [dir="rtl"] .ih4xz-theme .wp-content code { direction: ltr; unicode-bidi: isolate; display: inline-block; /* needed for dir isolation */ } /* Tables */ [dir="rtl"] .ih4xz-theme .wp-content th, [dir="rtl"] .ih4xz-theme .wp-content td { text-align: right; } /* ───────────────────────────────────────────── 10. SINGLE PROJECT — Layout & Sidebar ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .project-header-bar { text-align: right; } [dir="rtl"] .ih4xz-theme .project-header-titles { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .ih4xz-theme .project-badges { flex-direction: row-reverse; } /* Sidebar position: RTL mirrors left/right */ [dir="rtl"] .ih4xz-theme .project-layout--right { grid-template-columns: 280px 1fr; /* sidebar is now on the right = visually left in RTL */ } [dir="rtl"] .ih4xz-theme .project-layout--left { grid-template-columns: 1fr 280px; } /* Flip column order for RTL sidebar */ [dir="rtl"] .ih4xz-theme .project-layout--right .project-main-col { order: 2; } [dir="rtl"] .ih4xz-theme .project-layout--right .project-sidebar-col { order: 1; } [dir="rtl"] .ih4xz-theme .project-layout--left .project-main-col { order: 1; } [dir="rtl"] .ih4xz-theme .project-layout--left .project-sidebar-col { order: 2; } [dir="rtl"] .ih4xz-theme .sidebar-box-title { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .ih4xz-theme .tech-list { align-items: flex-end; } [dir="rtl"] .ih4xz-theme .sidebar-links { align-items: stretch; } [dir="rtl"] .ih4xz-theme .sidebar-btn { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .sidebar-private { flex-direction: row-reverse; } /* Changelog — code stays LTR */ [dir="rtl"] .ih4xz-theme .changelog-box { direction: ltr; text-align: left; unicode-bidi: isolate; border-left: none; border-right: 3px solid var(--accent-orange); } /* ───────────────────────────────────────────── 11. POST NAVIGATION (Prev/Next) ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .post-navigation { direction: rtl; } /* Swap prev/next semantics in RTL — prev is on the right */ [dir="rtl"] .ih4xz-theme .nav-prev { order: 2; } [dir="rtl"] .ih4xz-theme .nav-next { order: 1; } [dir="rtl"] .ih4xz-theme .nav-post-link { text-align: right; } [dir="rtl"] .ih4xz-theme .nav-post-next { text-align: left; } [dir="rtl"] .ih4xz-theme .nav-direction { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .nav-post-next .nav-direction { justify-content: flex-start; flex-direction: row-reverse; } /* ───────────────────────────────────────────── 12. SHARE BUTTONS ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .share-buttons { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .ih4xz-theme .share-btn { flex-direction: row-reverse; } /* ───────────────────────────────────────────── 13. RELATED POSTS ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .related-card { text-align: right; border-left: var(--border); border-right: 3px solid transparent; direction: rtl; } [dir="rtl"] .ih4xz-theme .related-card:hover { border-right-color: var(--accent-cyan); border-left-color: rgba(255,255,255,0.06); } /* ───────────────────────────────────────────── 14. COMMENTS ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .comments-area { direction: rtl; text-align: right; } [dir="rtl"] .ih4xz-theme .ih4xz-comment { text-align: right; } [dir="rtl"] .ih4xz-theme .comment-author.vcard { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .comment-metadata { text-align: right; } [dir="rtl"] .ih4xz-theme .comment-content { text-align: right; } /* Reply link to the left (inline-end in RTL) */ [dir="rtl"] .ih4xz-theme .comment-reply-link { margin-left: auto; margin-right: 0; } /* Comment form labels */ [dir="rtl"] .ih4xz-theme .comment-form label, [dir="rtl"] .ih4xz-theme #reply-title { text-align: right; display: block; } [dir="rtl"] .ih4xz-theme .comment-form input, [dir="rtl"] .ih4xz-theme .comment-form textarea { text-align: right; direction: rtl; } /* ───────────────────────────────────────────── 15. PASSWORD FORM ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .post-password-form-inner { text-align: right; direction: rtl; } [dir="rtl"] .ih4xz-theme .post-password-eyebrow { letter-spacing: 1px; /* Reduced — Arabic doesn't handle wide spacing */ } [dir="rtl"] .ih4xz-theme .post-password-input-row { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .post-password-form-inner input[type="password"], [dir="rtl"] .ih4xz-theme .post-password-input { text-align: right; direction: rtl; /* Swap border — fuse with button on the left side in RTL */ border-right: none; border-left: none; border-right: 1px solid rgba(255,255,255,0.1); } [dir="rtl"] .ih4xz-theme .post-password-form-inner input[type="password"]:focus, [dir="rtl"] .ih4xz-theme .post-password-input:focus { border-right-color: var(--accent-cyan); } [dir="rtl"] .ih4xz-theme .post-password-hint { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .ih4xz-theme .post-password-submit { flex-direction: row-reverse; } /* ───────────────────────────────────────────── 16. FOOTER ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .footer-inner { direction: rtl; } [dir="rtl"] .ih4xz-theme .social-links { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .copyright { direction: rtl; letter-spacing: 0; } /* ───────────────────────────────────────────── 17. SEARCH FORM ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .search-form { flex-direction: row-reverse; } [dir="rtl"] .ih4xz-theme .search-form .search-field { text-align: right; direction: rtl; border-right: var(--border); border-left: none; } /* ───────────────────────────────────────────── 18. PAGINATION ───────────────────────────────────────────── */ [dir="rtl"] .ih4xz-theme .pagination-wrap .nav-links { flex-direction: row-reverse; } /* ───────────────────────────────────────────── 19. MIXED CONTENT — Auto-detect Arabic text When a page is in LTR (e.g. English site) but a post/project is written in Arabic, this ensures inline Arabic text is rendered RTL correctly via unicode-bidi and text isolation. ───────────────────────────────────────────── */ .wp-content p:lang(ar), .wp-content h2:lang(ar), .wp-content h3:lang(ar), .wp-content li:lang(ar), .wp-content blockquote:lang(ar) { direction: rtl; text-align: right; font-family: var(--font-arabic); unicode-bidi: isolate; line-height: var(--arabic-line-height); } /* Automatic direction for Arabic unicode ranges (for mixed LTR/RTL content) */ .wp-content p, .wp-content li, .wp-content h2, .wp-content h3 { unicode-bidi: plaintext; /* browser auto-detects base direction per paragraph */ } /* ───────────────────────────────────────────── 20. GUTENBERG EDITOR — Block Editor RTL ───────────────────────────────────────────── */ /* Editor iframe body */ .editor-styles-wrapper[dir="rtl"], .block-editor-writing-flow[dir="rtl"] { direction: rtl; text-align: right; font-family: var(--font-arabic); line-height: var(--arabic-line-height); } /* Editor paragraph blocks */ .editor-styles-wrapper .wp-block-paragraph { font-family: var(--font-arabic); line-height: var(--arabic-line-height); unicode-bidi: plaintext; } /* Editor headings */ .editor-styles-wrapper .wp-block-heading, .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4 { font-family: var(--font-arabic); letter-spacing: 0; } /* Editor lists */ .editor-styles-wrapper[dir="rtl"] .wp-block-list ul, .editor-styles-wrapper[dir="rtl"] ul.wp-block-list { padding-right: 1.5rem; padding-left: 0; text-align: right; } /* Editor blockquote — RTL border flip */ .editor-styles-wrapper[dir="rtl"] .wp-block-quote { border-left: none; border-right: 4px solid var(--accent-purple); padding-left: 0; padding-right: 1.5rem; text-align: right; } /* Editor code blocks — always LTR */ .editor-styles-wrapper .wp-block-code, .editor-styles-wrapper .wp-block-preformatted { direction: ltr; text-align: left; unicode-bidi: isolate; } /* Editor table */ .editor-styles-wrapper[dir="rtl"] .wp-block-table th, .editor-styles-wrapper[dir="rtl"] .wp-block-table td { text-align: right; } /* Editor toolbar — ensure RTL toolbar doesn't break */ .editor-styles-wrapper[dir="rtl"] .block-editor-block-toolbar { direction: rtl; } /* ───────────────────────────────────────────── 21. WP ADMIN — RTL Admin Panel fixes (applies when WP backend is in Arabic) ───────────────────────────────────────────── */ .rtl #ih4xz-main-content .ih4xz-admin-wrap { direction: rtl; text-align: right; } .rtl .ih4xz-tabs { flex-direction: row-reverse; } .rtl .ih4xz-admin-header { flex-direction: row-reverse; } .rtl .ih4xz-grid { direction: rtl; } .rtl .ih4xz-field label { flex-direction: row-reverse; } .rtl .ih4xz-toggle { margin-left: 0; margin-right: auto; } .rtl .ih4xz-text-field label, .rtl .ih4xz-text-field input, .rtl .ih4xz-text-field textarea { text-align: right; direction: rtl; } .rtl .ih4xz-radio-group { flex-direction: row-reverse; } .rtl .ih4xz-section-title { flex-direction: row-reverse; } .rtl .ih4xz-submit-row { flex-direction: row-reverse; }