/* * ITSkillsCenter Pro — RTL Stylesheet v3.0 * Applied automatically when Arabic (ar) is the active language. * Selector strategy: [dir="rtl"] on cascades to all children. * * IMPORTANT: Do NOT use flex-direction: row-reverse in RTL. * direction: rtl (inherited from ) already reverses flex * layout for flex-direction: row. Adding row-reverse cancels the reversal. */ /* ── Arabic Typography ───────────────────────────────────────────────────── */ [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] span, [dir="rtl"] a, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] label { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .blog-header__title, [dir="rtl"] .article-header__title, [dir="rtl"] .error-404__msg, [dir="rtl"] .footer-brand span { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight: 700; letter-spacing: 0; } /* ── Base Layout ─────────────────────────────────────────────────────────── */ [dir="rtl"] { text-align: right; } /* ── Site Header (logo moves to right naturally via direction: rtl) ───── */ /* No row-reverse needed — direction: rtl handles the flip automatically */ /* ── Nav CTA button ──────────────────────────────────────────────────────── */ /* Natural RTL flow handles icon+text order */ /* ── Lang Switcher dropdown position ────────────────────────────────────── */ [dir="rtl"] .lang-switcher__dropdown { right: auto; left: 0; } [dir="rtl"] .lang-switcher__option.active::after { margin-left: 0; margin-right: auto; } /* ── Mobile nav — slide from left in RTL ─────────────────────────────────── */ [dir="rtl"] .mobile-nav { left: 0; right: auto; transform: translateX(-100%); } [dir="rtl"] .mobile-nav.open { transform: translateX(0); } /* ── Search overlay ──────────────────────────────────────────────────────── */ [dir="rtl"] .search-overlay__input { text-align: right; } [dir="rtl"] .search-overlay__close { right: auto; left: clamp(1.5rem, 5vw, 3rem); } /* ── Hero section ───────────────────────────────────────────────────────── */ [dir="rtl"] .hero__content { text-align: right; } [dir="rtl"] .hero__actions { justify-content: flex-start; } /* Mobile: keep buttons right-aligned in RTL */ @media (max-width: 768px) { [dir="rtl"] .hero__actions { align-items: flex-start; } } [dir="rtl"] .scroll-indicator { direction: rtl; } /* ── Story section (services, formations, etc.) ─────────────────────────── */ [dir="rtl"] .story-section__content { text-align: right; } /* Push title & desc to the right (they have max-width < 100%) */ [dir="rtl"] .story-section__title { margin-left: auto; margin-right: 0; } [dir="rtl"] .story-section__desc { margin-left: auto; margin-right: 0; } /* ── Story cards (services & formations) ────────────────────────────────── */ [dir="rtl"] .story-card { text-align: right; } [dir="rtl"] .story-card__modules { padding-right: 1.2rem; padding-left: 0; } [dir="rtl"] .story-card:hover .story-card__modules li:hover { transform: translateX(-4px); } /* ── Blog header label lines ─────────────────────────────────────────────── */ /* Override inline margin-right / margin-left on label-line spans */ [dir="rtl"] .blog-header__label .story-section__label-line { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } /* ── Blog categories filter ──────────────────────────────────────────────── */ [dir="rtl"] .blog-categories { direction: rtl; } /* ── Blog card ───────────────────────────────────────────────────────────── */ [dir="rtl"] .blog-card__content { text-align: right; } [dir="rtl"] .blog-card__read-more svg { transform: scaleX(-1); } /* ── Article header ──────────────────────────────────────────────────────── */ [dir="rtl"] .article-header__meta { justify-content: flex-end; } /* ── Article content body — RTL for post content ─────────────────────────── */ [dir="rtl"] .article-content { text-align: right; direction: rtl; } [dir="rtl"] .article-content blockquote { border-left: none; border-right: 3px solid var(--color-accent, #3b82f6); padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .article-content ul, [dir="rtl"] .article-content ol { padding-left: 0; padding-right: 2rem; } /* Keep code blocks LTR */ [dir="rtl"] .article-content pre, [dir="rtl"] .article-content code { direction: ltr; text-align: left; } [dir="rtl"] .article-content table { direction: rtl; } /* ── Article navigation ──────────────────────────────────────────────────── */ [dir="rtl"] .article-nav__item:last-child { text-align: left; } [dir="rtl"] .article-nav__item:first-child { text-align: right; } /* ── Article tags ────────────────────────────────────────────────────────── */ [dir="rtl"] .article-tags__list { justify-content: flex-end; } /* ── Counters grid ──────────────────────────────────────────────────────── */ [dir="rtl"] .counters-grid { direction: rtl; } /* ── Projects showcase ──────────────────────────────────────────────────── */ [dir="rtl"] .project-card__info { text-align: right; } [dir="rtl"] .project-card__tech { justify-content: flex-start; direction: rtl; } [dir="rtl"] .project-card__visit-btn svg { transform: scaleX(-1); } /* ── Shop categories ────────────────────────────────────────────────────── */ [dir="rtl"] .shop-categories { direction: rtl; } /* ── Shop showcase cards ────────────────────────────────────────────────── */ [dir="rtl"] .shop-showcase { direction: rtl; } [dir="rtl"] .shop-showcase__card { text-align: right; } [dir="rtl"] .shop-products-grid { direction: rtl; } [dir="rtl"] .shop-product-card__info { text-align: right; } [dir="rtl"] .shop-product-card__btn svg { transform: scaleX(-1); } /* ── Contact section — keep centered ───────────────────────────────────── */ [dir="rtl"] .contact-section__content { text-align: center; } [dir="rtl"] .contact-grid { direction: rtl; } [dir="rtl"] .contact-grid__item { text-align: right; } /* ── Footer grid ─────────────────────────────────────────────────────────── */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-col ul { padding-right: 0; padding-left: 0; text-align: right; } [dir="rtl"] .footer-brand__desc { text-align: right; } /* ── Trust marquee — reverse animation direction ────────────────────────── */ [dir="rtl"] .trust-marquee { animation-direction: reverse; } /* ── Scroll-reveal: don't flip transforms ────────────────────────────────── */ [dir="rtl"] [data-reveal] { direction: rtl; } /* ── WooCommerce ─────────────────────────────────────────────────────────── */ [dir="rtl"] .woo-wrapper { direction: rtl; } [dir="rtl"] .woocommerce-breadcrumb { text-align: right; } [dir="rtl"] .woocommerce-result-count, [dir="rtl"] .woocommerce-ordering { float: none; text-align: right; } /* ── Error 404 ───────────────────────────────────────────────────────────── */ [dir="rtl"] .error-404 { text-align: center; } [dir="rtl"] .error-404__search-input { text-align: right; } /* ── Ad banners ──────────────────────────────────────────────────────────── */ [dir="rtl"] .blog-ad__inner { text-align: right; } [dir="rtl"] .blog-ad--card__inner { text-align: right; } /* ── Sidebar & pagination ────────────────────────────────────────────────── */ [dir="rtl"] .nav-links { direction: rtl; } /* ── Skip link ───────────────────────────────────────────────────────────── */ [dir="rtl"] .skip-link { left: auto; right: 0; } /* ── Input placeholders ──────────────────────────────────────────────────── */ [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } /* ── Loader text ─────────────────────────────────────────────────────────── */ [dir="rtl"] .loader-text { direction: rtl; } /* ── Scroll-progress stays LTR (visual indicator, not text) ─────────────── */ [dir="rtl"] #scroll-progress { direction: ltr; } /* ── Buttons with arrows — flip SVG direction ───────────────────────────── */ [dir="rtl"] .btn svg { transform: scaleX(-1); } /* ── Comments ────────────────────────────────────────────────────────────── */ [dir="rtl"] .comment-item__body { text-align: right; } /* ── Related posts container ─────────────────────────────────────────────── */ [dir="rtl"] .related-posts-container { text-align: right; } [dir="rtl"] .blog-grid { direction: rtl; } /* ── Copy protection toast ──────────────────────────────────────────────── */ [dir="rtl"] .copy-toast { direction: rtl; } /* ── Pagination container ───────────────────────────────────────────────── */ [dir="rtl"] .pagination-container { direction: rtl; } /* ── Archive / Blog empty state ─────────────────────────────────────────── */ [dir="rtl"] .empty-state { text-align: right; } /* ── Mobile bottom nav ───────────────────────────────────────────────────── */ [dir="rtl"] .mobile-bottom-nav__list { direction: rtl; }