/* ============================================================ lang.css — Language / Direction Styles New Style Group --------------------------------------------------------------- PURPOSE: Handle ONLY RTL ↔ LTR layout differences. Never touch colours, typography sizes, or visual design. ============================================================ */ /* ──────────────────────────────────────────────── 1. LANGUAGE TOGGLE BUTTON Inserted by lang.js into the navbar ──────────────────────────────────────────────── */ .lang-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; min-width: 80px; background: transparent; color: var(--color-text-inverse, #fff); border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: var(--border-radius-sm, 8px); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: var(--transition-fast, all 0.2s ease); white-space: nowrap; /* Sit between nav-links and nav-toggle */ order: 10; flex-shrink: 0; } .lang-btn:hover, .lang-btn:focus-visible { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.9); outline: none; } /* When navbar has scrolled / is on a light background */ .navbar.scrolled .lang-btn, [data-theme="light"] .navbar.scrolled .lang-btn { color: var(--color-primary, #2c3e50); border-color: var(--color-primary, #2c3e50); } .navbar.scrolled .lang-btn:hover { background: var(--color-primary, #2c3e50); color: #fff; } /* ──────────────────────────────────────────────── 2. SMOOTH DIRECTION TRANSITION Applied on so the entire page transitions ──────────────────────────────────────────────── */ html { transition: direction 0s; /* direction itself can't be animated, but child props can */ } /* Give text elements a subtle reflow transition */ [data-translate] { transition: opacity 0.15s ease; } html[data-lang] [data-translate] { opacity: 1; } /* ──────────────────────────────────────────────── 3. FLOATING ACTIONS POSITION In RTL the floating panel is on the LEFT (default). In LTR we move it to the RIGHT. ──────────────────────────────────────────────── */ html[dir="ltr"] .floating-actions { left: auto; right: 25px; } @media (max-width: 768px) { html[dir="ltr"] .floating-actions { left: auto; right: 15px; } } @media (max-width: 480px) { html[dir="ltr"] .floating-actions { left: auto; right: 50%; transform: translateX(50%); } } /* ──────────────────────────────────────────────── 4. SETTINGS PANEL In RTL: slides in from the right (default). In LTR: slides in from the left. ──────────────────────────────────────────────── */ html[dir="ltr"] .settings-panel { right: auto; left: 0; border-radius: 0 var(--border-radius, 16px) var(--border-radius, 16px) 0; } html[dir="ltr"] .settings-panel.open { transform: translateX(0); } /* Override the RTL default translate for LTR */ html[dir="ltr"] .settings-panel:not(.open) { transform: translateX(-100%); } /* ──────────────────────────────────────────────── 5. CONTACT POPUP HEADER BORDER The left border decoration should become a right border in LTR. ──────────────────────────────────────────────── */ html[dir="ltr"] .settings-header, html[dir="ltr"] .popup-header { border-left: none; border-right: 3px solid var(--color-secondary, #3498db); } html[dir="ltr"] .contact-hours, html[dir="ltr"] .contact-details p { text-align: left; } /* ──────────────────────────────────────────────── 6. FOOTER LINKS ALIGNMENT ──────────────────────────────────────────────── */ html[dir="ltr"] .footer-links ul { padding-right: 0; padding-left: 0; } html[dir="ltr"] .footer-links ul li::before { /* If there are list-style arrows or bullets — flip them */ content: "›"; } /* ──────────────────────────────────────────────── 7. SECTION BADGE / DECORATIVE LINES In RTL the badge has a left pseudo-element (default). In LTR we mirror it to the right. ──────────────────────────────────────────────── */ html[dir="ltr"] .section-badge::before { left: auto; right: -10px; } html[dir="ltr"] .section-badge::after { right: auto; left: -10px; } /* ──────────────────────────────────────────────── 8. HERO ARROW BUTTON In LTR the arrow points right, not left. lang.js toggles .fa-arrow-left ↔ .fa-arrow-right. This just ensures spacing stays correct. ──────────────────────────────────────────────── */ html[dir="ltr"] .btn-icon { flex-direction: row; /* icon on the right */ } html[dir="ltr"] .btn-icon i { margin-left: 8px; margin-right: 0; } html[dir="rtl"] .btn-icon i { margin-right: 8px; margin-left: 0; } html[dir="ltr"] .card-link i { margin-left: 8px; margin-right: 0; } html[dir="rtl"] .card-link i { margin-right: 8px; margin-left: 0; } /* ──────────────────────────────────────────────── 9. INPUT / SELECT ALIGNMENT (settings panel) ──────────────────────────────────────────────── */ html[dir="ltr"] .setting-item label { text-align: left; } html[dir="ltr"] select { text-align-last: left; } /* ──────────────────────────────────────────────── 10. FONT FAMILY OVERRIDE FOR ENGLISH Swap from the Arabic web-font stack to a Latin stack. ──────────────────────────────────────────────── */ html[dir="ltr"], html[lang="en"] { font-family: 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif; } html[dir="rtl"], html[lang="ar"] { font-family: 'Tajawal', 'Amiri', 'El Messiri', sans-serif; } /* ──────────────────────────────────────────────── 11. ABOUT-SECTION TEXT ALIGNMENT ──────────────────────────────────────────────── */ html[dir="ltr"] .about-text { text-align: left; } html[dir="ltr"] .about-features { justify-content: flex-start; } /* ──────────────────────────────────────────────── 12. COPYRIGHT / FOOTER BOTTOM ──────────────────────────────────────────────── */ html[dir="ltr"] .footer-bottom { flex-direction: row-reverse; /* social icons on left in LTR */ } html[dir="ltr"] .copyright { text-align: right; } /* ──────────────────────────────────────────────── 13. LANGUAGE BUTTON INSIDE DARK / SCROLLED NAVBAR ──────────────────────────────────────────────── */ [data-theme="dark"] .lang-btn { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.35); } [data-theme="dark"] .lang-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); }