/* ========================================================================== meOpera.com — RTL (Right-to-Left) Overrides Arabic language support: [dir="rtl"] attribute on or section ========================================================================== */ /* -------------------------------------------------------------------------- Global Direction -------------------------------------------------------------------------- */ [dir="rtl"] { text-align: right; direction: rtl; } /* -------------------------------------------------------------------------- Navbar -------------------------------------------------------------------------- */ [dir="rtl"] .navbar-inner { flex-direction: row-reverse; } [dir="rtl"] .navbar-nav { flex-direction: row-reverse; } [dir="rtl"] .lang-dropdown { right: auto; left: 0; } [dir="rtl"] .lang-switcher-toggle .lang-chevron { margin-left: 0; margin-right: 2px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ [dir="rtl"] .hero-text { text-align: right; } [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-actions { justify-content: flex-start; } [dir="rtl"] .elite-hero { justify-content: flex-end; } [dir="rtl"] .elite-hero-content { text-align: right; } [dir="rtl"] .elite-hero-actions { justify-content: flex-start; flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Breadcrumbs -------------------------------------------------------------------------- */ [dir="rtl"] .breadcrumbs { direction: rtl; flex-direction: row-reverse; } [dir="rtl"] .breadcrumb-sep::before { content: '\\'; } /* -------------------------------------------------------------------------- FAQ Accordion -------------------------------------------------------------------------- */ [dir="rtl"] .faq-item { border-left: none; border-right: 3px solid transparent; padding-left: 0; padding-right: 0; } [dir="rtl"] .faq-item.open { border-left: none; border-right: 3px solid var(--color-red); } [dir="rtl"] .faq-question { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .faq-question-text { text-align: right; } [dir="rtl"] .faq-answer-inner { text-align: right; } /* -------------------------------------------------------------------------- Elite Bio -------------------------------------------------------------------------- */ [dir="rtl"] .elite-bio-main { border-left: none; border-right: 4px solid var(--elite-red); padding-left: 0; padding-right: 48px; } [dir="rtl"] .elite-bio-inner { direction: rtl; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ [dir="rtl"] .card-artist { direction: rtl; } [dir="rtl"] .card-artist-meta { flex-direction: row-reverse; } [dir="rtl"] .card-artist-tags { flex-direction: row-reverse; } [dir="rtl"] .card-artist-elite { direction: rtl; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ [dir="rtl"] .footer-inner { direction: rtl; } [dir="rtl"] .footer-bottom { flex-direction: row-reverse; } [dir="rtl"] .footer-social { flex-direction: row-reverse; } [dir="rtl"] .footer-links { text-align: right; } [dir="rtl"] .footer-legal-links { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ [dir="rtl"] .btn-primary, [dir="rtl"] .btn-secondary, [dir="rtl"] .btn-outline, [dir="rtl"] .btn-outline-blue, [dir="rtl"] .btn-elite-outline { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Mobile Overlay -------------------------------------------------------------------------- */ [dir="rtl"] .mobile-overlay-nav { direction: rtl; } [dir="rtl"] .mobile-overlay-nav a { text-align: right; } [dir="rtl"] .mobile-overlay-langs { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Social Proof Strip -------------------------------------------------------------------------- */ [dir="rtl"] .social-proof-inner { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------- */ [dir="rtl"] .testimonial-block::before { left: auto; right: 32px; content: '\201D'; } [dir="rtl"] .testimonial-block::after { right: auto; left: 32px; content: '\201C'; } [dir="rtl"] .testimonial-text { text-align: right; } [dir="rtl"] .testimonial-author { flex-direction: row-reverse; } [dir="rtl"] .testimonial-author-info { text-align: right; } [dir="rtl"] .testimonial-stars { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Pricing Card -------------------------------------------------------------------------- */ [dir="rtl"] .pricing-card { direction: rtl; } [dir="rtl"] .pricing-badge { right: auto; left: 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } [dir="rtl"] .pricing-benefits li { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .pricing-benefits li::before { margin-top: 1px; } /* -------------------------------------------------------------------------- Section Headers -------------------------------------------------------------------------- */ [dir="rtl"] .section-header { text-align: right; } [dir="rtl"] .section-subtitle { margin-left: 0; margin-right: 0; } /* -------------------------------------------------------------------------- Elite Career -------------------------------------------------------------------------- */ [dir="rtl"] .elite-career-inner { direction: rtl; } [dir="rtl"] .elite-career-item { grid-template-columns: 1fr 100px; } [dir="rtl"] .elite-career-year { order: 2; text-align: left; } [dir="rtl"] .elite-career-details { order: 1; text-align: right; } [dir="rtl"] .elite-career-item + .elite-career-item::before { left: 0; right: 100px; background: linear-gradient(to left, var(--elite-red), transparent); } /* -------------------------------------------------------------------------- Elite Upcoming Performances -------------------------------------------------------------------------- */ [dir="rtl"] .elite-upcoming-inner { direction: rtl; } [dir="rtl"] .elite-upcoming-item { grid-template-columns: auto 1fr 120px; } [dir="rtl"] .elite-upcoming-details { text-align: right; } /* -------------------------------------------------------------------------- Elite Repertoire Table -------------------------------------------------------------------------- */ [dir="rtl"] .elite-repertoire table { direction: rtl; } [dir="rtl"] .elite-repertoire thead th, [dir="rtl"] .elite-repertoire tbody td { text-align: right; } /* -------------------------------------------------------------------------- Filter Bar -------------------------------------------------------------------------- */ [dir="rtl"] .filter-bar { flex-direction: row-reverse; } [dir="rtl"] .filter-select { background-position: left 12px center; padding-right: 16px; padding-left: 34px; } /* -------------------------------------------------------------------------- Form Elements -------------------------------------------------------------------------- */ [dir="rtl"] .form-group { text-align: right; } [dir="rtl"] .form-input, [dir="rtl"] .form-textarea, [dir="rtl"] .form-select { text-align: right; direction: rtl; } /* -------------------------------------------------------------------------- Alert -------------------------------------------------------------------------- */ [dir="rtl"] .alert { flex-direction: row-reverse; border-left: none; border-right: 4px solid transparent; } [dir="rtl"] .alert-info { border-right-color: var(--color-blue); } [dir="rtl"] .alert-success { border-right-color: #16a34a; } [dir="rtl"] .alert-warning { border-right-color: #ca8a04; } [dir="rtl"] .alert-error { border-right-color: var(--color-red); } /* -------------------------------------------------------------------------- Blockquote -------------------------------------------------------------------------- */ [dir="rtl"] blockquote { border-left: none; border-right: 3px solid var(--color-red); padding-left: 0; padding-right: var(--space-lg); } /* -------------------------------------------------------------------------- Hover Underline (reverses direction) -------------------------------------------------------------------------- */ [dir="rtl"] .hover-underline::after { transform-origin: right center; } /* -------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------- */ [dir="rtl"] .pagination { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Lang Switcher Dropdown (RTL position) -------------------------------------------------------------------------- */ [dir="rtl"] .lang-dropdown { right: auto; left: 0; } [dir="rtl"] .lang-dropdown a { flex-direction: row-reverse; } /* -------------------------------------------------------------------------- Elite Press Quotes -------------------------------------------------------------------------- */ [dir="rtl"] .elite-press-item::before { left: auto; right: 20px; content: '\201D'; } [dir="rtl"] .elite-press-quote { text-align: right; } /* -------------------------------------------------------------------------- Sticky CTA Mobile -------------------------------------------------------------------------- */ [dir="rtl"] .sticky-cta-mobile { direction: rtl; } /* -------------------------------------------------------------------------- Arabic Typography Adjustments -------------------------------------------------------------------------- */ [dir="rtl"] body { font-family: 'Libre Baskerville', 'Cairo', 'Amiri', Arial, sans-serif; line-height: 1.8; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: 'Cormorant Garamond', 'Amiri', serif; letter-spacing: 0; } [dir="rtl"] .font-ui, [dir="rtl"] .navbar-nav a, [dir="rtl"] .btn-primary, [dir="rtl"] .btn-secondary, [dir="rtl"] .btn-outline, [dir="rtl"] .btn-outline-blue, [dir="rtl"] .section-eyebrow, [dir="rtl"] .breadcrumbs { font-family: 'Montserrat', 'Cairo', sans-serif; letter-spacing: 0; }