/* ===================================================== Luminary Scholars – RTL (Right-to-Left) Stylesheet Version: 1.0 Author: Ky Nguyen / ASFBVN This stylesheet flips the layout for RTL languages (Arabic, Hebrew, Farsi, Urdu, etc.) Usage: Add dir="rtl" to tag and include this stylesheet AFTER style.css ===================================================== */ /* ── 1. BASE RTL OVERRIDES ── */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="rtl"] body { text-align: right; } /* ── 2. NAVIGATION ── */ [dir="rtl"] .nav-inner { flex-direction: row-reverse; } [dir="rtl"] .nav-links { flex-direction: row-reverse; } [dir="rtl"] .nav-links a { direction: rtl; } [dir="rtl"] .logo { flex-direction: row-reverse; } [dir="rtl"] .hamburger { order: -1; } /* Mobile nav */ @media (max-width: 768px) { [dir="rtl"] .nav-links { flex-direction: column; text-align: right; } } /* ── 3. HERO SECTION ── */ [dir="rtl"] .hero-inner { direction: rtl; } [dir="rtl"] .hero-badge { flex-direction: row-reverse; } [dir="rtl"] .hero-benefits li { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .hero-cta { flex-direction: row-reverse; } [dir="rtl"] .hero-sub { text-align: right; } /* Hero floating badges – mirror positions */ [dir="rtl"] .badge-students { left: auto; right: -20px; } [dir="rtl"] .badge-rate { right: auto; left: -20px; } [dir="rtl"] .badge-success { left: auto; right: 10px; } /* Hero gradient overlay – mirror radials */ [dir="rtl"] .hero-gradient-overlay { background: radial-gradient(ellipse at 80% 50%, rgba(124, 58, 237, 0.15) 0%, transparent 60%), radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, 0.05) 0%, transparent 40%); } @media (max-width: 768px) { [dir="rtl"] .badge-students { right: -5px; left: auto; } [dir="rtl"] .badge-rate { left: -5px; right: auto; } [dir="rtl"] .badge-success { right: 5px; left: auto; } [dir="rtl"] .hero-cta { flex-direction: row-reverse; justify-content: center; } [dir="rtl"] .hero-benefits { text-align: right; } } /* ── 4. SECTION HEADERS ── */ [dir="rtl"] .section-header { text-align: center; } [dir="rtl"] .section-label { flex-direction: row-reverse; } [dir="rtl"] .section-desc { text-align: center; } /* ── 5. ABOUT SECTION ── */ [dir="rtl"] .about-inner { direction: rtl; } [dir="rtl"] .about-content p { text-align: right; } [dir="rtl"] .about-img-badge { left: auto; right: 24px; flex-direction: row-reverse; } [dir="rtl"] .about-highlights { direction: rtl; } [dir="rtl"] .highlight-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .hl-info { align-items: flex-end; } /* ── 6. FEATURES / WHY CHOOSE US ── */ [dir="rtl"] .features-grid { direction: rtl; } [dir="rtl"] .feature-item { text-align: center; } [dir="rtl"] .feature-item::before { background: linear-gradient(270deg, transparent, var(--primary-500), transparent); } /* ── 7. SUCCESS STORIES / RESULTS ── */ [dir="rtl"] .results-grid { direction: rtl; } [dir="rtl"] .result-subject-tag { left: auto; right: 14px; } [dir="rtl"] .score-change { flex-direction: row-reverse; } [dir="rtl"] .score-change svg { transform: scaleX(-1); } [dir="rtl"] .result-body { text-align: right; } [dir="rtl"] .result-meta { flex-direction: row-reverse; } /* ── 8. SUBJECTS GRID ── */ [dir="rtl"] .subjects-grid { direction: rtl; } [dir="rtl"] .subject-card { text-align: center; } /* ── 9. METHOD / APPROACH ── */ [dir="rtl"] .method-grid { direction: rtl; } [dir="rtl"] .method-card { text-align: right; } [dir="rtl"] .step-connector svg { transform: scaleX(-1); } /* ── 10. TESTIMONIALS ── */ [dir="rtl"] .testimonial-track { flex-direction: row-reverse; } [dir="rtl"] .testi-quote { padding-left: 0; padding-right: 20px; text-align: right; } [dir="rtl"] .testi-quote::before { left: auto; right: 0; } [dir="rtl"] .testi-author { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .carousel-controls { flex-direction: row-reverse; } [dir="rtl"] .carousel-btn svg { transform: scaleX(-1); } /* ── 11. PRICING ── */ [dir="rtl"] .pricing-grid { direction: rtl; } [dir="rtl"] .pricing-features li { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .pricing-note { flex-direction: row-reverse; text-align: right; } /* ── 12. HOW IT WORKS ── */ [dir="rtl"] .howto-steps { flex-direction: row-reverse; } [dir="rtl"] .step-card { text-align: center; } @media (max-width: 768px) { [dir="rtl"] .howto-steps { flex-direction: column; } } /* ── 13. CONTACT SECTION ── */ [dir="rtl"] .contact-inner { direction: rtl; } [dir="rtl"] .contact-info p { text-align: right; } [dir="rtl"] .contact-method { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .contact-method:hover { transform: translateX(-6px); } [dir="rtl"] .contact-form h3 { flex-direction: row-reverse; } [dir="rtl"] .form-group { text-align: right; } [dir="rtl"] .form-group input, [dir="rtl"] .form-group select, [dir="rtl"] .form-group textarea { text-align: right; direction: rtl; } [dir="rtl"] .form-group select { background-position: left 14px center; padding-left: 42px; padding-right: 18px; } [dir="rtl"] .form-error { text-align: right; } /* ── 14. FOOTER ── */ [dir="rtl"] .footer-inner { direction: rtl; } [dir="rtl"] .footer-brand { text-align: right; } [dir="rtl"] .footer-brand .logo { justify-content: flex-end; } [dir="rtl"] .footer-social { flex-direction: row-reverse; } [dir="rtl"] .footer-links a { text-align: right; } [dir="rtl"] .footer-links a:hover { padding-left: 0; padding-right: 4px; } [dir="rtl"] .footer-contact p { flex-direction: row-reverse; text-align: right; } /* ── 15. FLOATING BUTTONS ── */ [dir="rtl"] .float-buttons { right: auto; left: 22px; } [dir="rtl"] .float-label { right: auto; left: 66px; } [dir="rtl"] .float-label::after { right: auto; left: -6px; border-left-color: transparent; border-right-color: var(--gray-900); } /* ── 16. STATS BAR ── */ [dir="rtl"] .stats-inner { direction: rtl; } /* ── 17. BUTTONS ── */ [dir="rtl"] .btn { flex-direction: row-reverse; } /* ── 18. ANIMATIONS ── */ [dir="rtl"] .reveal-left { transform: translateX(40px); } [dir="rtl"] .reveal-right { transform: translateX(-40px); } /* ── 19. SCROLL HINT ── */ [dir="rtl"] .scroll-hint { /* centered – no change needed */ } /* ── 20. RTL TOGGLE BUTTON ── */ .rtl-toggle { position: fixed; top: 100px; right: 0; z-index: 1001; background: linear-gradient(135deg, var(--primary-600), var(--primary-400)); color: var(--white); border: none; padding: 10px 14px; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; cursor: pointer; border-radius: 8px 0 0 8px; box-shadow: -4px 4px 16px rgba(124, 58, 237, 0.3); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); letter-spacing: 0.06em; writing-mode: vertical-rl; text-orientation: mixed; } .rtl-toggle:hover { padding: 10px 18px; box-shadow: -6px 6px 24px rgba(124, 58, 237, 0.45); } [dir="rtl"] .rtl-toggle { right: auto; left: 0; border-radius: 0 8px 8px 0; box-shadow: 4px 4px 16px rgba(124, 58, 237, 0.3); } [dir="rtl"] .rtl-toggle:hover { box-shadow: 6px 6px 24px rgba(124, 58, 237, 0.45); }