/** * Musical Beings Lab - RTL (Right-to-Left) Support * For Hebrew and Arabic languages * * DESIGN PRINCIPLE: Layout stays the same for all languages. * Only text direction and alignment change for RTL. * Nav stays on left, controls stay in same positions. * * Include this file AFTER main stylesheets. * The i18n system automatically sets dir="rtl" on when needed. */ /* ============================================ TEXT ALIGNMENT ============================================ */ /* Default text alignment for RTL */ [dir="rtl"] { text-align: right; } [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* Centered text stays centered */ [dir="rtl"] .text-center, [dir="rtl"] [style*="text-align: center"] { text-align: center; } /* ============================================ GAME CARDS & CONTENT ============================================ */ /* Game cards - align content to right */ [dir="rtl"] .game-card { text-align: right; } /* Footer stays centered */ [dir="rtl"] .footer { text-align: center; } /* Tooltip text alignment */ [dir="rtl"] .tooltip, [dir="rtl"] .tembo-tooltip { text-align: right; } /* Kit detail info */ [dir="rtl"] .kit-detail-info { text-align: right; } /* ============================================ MUSIC GRIDS - STAY LTR ============================================ IMPORTANT: Music grids stay LTR! Musical notation is universally left-to-right */ [dir="rtl"] .sequencer-grid, [dir="rtl"] .beat-grid, [dir="rtl"] .grid-container, [dir="rtl"] #grid, [dir="rtl"] .memory-grid { direction: ltr; } /* Playhead animation stays LTR */ [dir="rtl"] .playhead { direction: ltr; } /* ============================================ KIT LIBRARY (Tembo) ============================================ */ /* Library grid - keep visual order consistent */ [dir="rtl"] .library-grid { direction: ltr; } /* Sample list - sample names in English */ [dir="rtl"] .kit-detail-samples { direction: ltr; } /* Slot picker grid - A-H slots stay in order */ [dir="rtl"] .slot-picker-grid { direction: ltr; } /* ============================================ SIMON GAME ============================================ */ /* Keep initials LTR (Latin characters) */ [dir="rtl"] .initials-slots { direction: ltr; } /* ============================================ WORDLE / LEVEL GRIDS ============================================ */ /* Level grid - keep visual order */ [dir="rtl"] .level-grid, [dir="rtl"] .game-level-grid { direction: ltr; } /* Feedback row - keep aligned with grid */ [dir="rtl"] .feedback-row { direction: ltr; } /* ============================================ KEYBOARD SHORTCUTS ============================================ */ /* Keep shortcut keys LTR */ [dir="rtl"] .shortcut-key { direction: ltr; } /* ============================================ FORM ELEMENTS ============================================ */ /* Input fields text alignment */ [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] textarea { text-align: right; } /* Keep number/code inputs LTR */ [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] .code-input { direction: ltr; text-align: left; } /* ============================================ DROPDOWN TEXT ALIGNMENT ============================================ */ /* Dropdown options text alignment */ [dir="rtl"] .lang-option, [dir="rtl"] .dropdown-option { text-align: right; } /* ============================================ MARGINS AUTO SWAP ============================================ */ [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } /* ============================================ PRINT STYLES ============================================ */ @media print { [dir="rtl"] { direction: rtl; } }