/* * File: public/css/Quran/quran-read.css * Description: Styles for the Quran reading display, optimized for all screen sizes. */ /* ========================================================================== Font-Face ========================================================================== */ /* New font from the user's request, now self-hosted */ @font-face { font-family: 'Hanafi'; src: url('../../data/fonts/Indo-Pak-Font.ttf'); /* Corrected path */ font-display: swap; } /* ========================================================================== Base Styles & Layout ========================================================================== */ /* Base styles for ayah display, designed for desktop/tablet */ .ayah-container { display: flex; align-items: center; justify-content: flex-end; /* Align container content to the right */ margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; flex-wrap: wrap; gap: 15px; /* Add a gap between the ayah number and content */ } /* Styles for smaller screens (mobile) */ @media (max-width: 640px) { .ayah-container { flex-direction: column-reverse; /* Stack number on top of text */ align-items: flex-end; /* Align everything to the right */ } } .ayah-content { display: flex; flex-direction: column; flex-grow: 1; text-align: right; gap: 5px; /* Space between Arabic and English sections */ } .ayah-metadata { flex-shrink: 0; } /* ========================================================================== Ayah Text & Typography ========================================================================== */ .ayah-number { /* Removed font-weight and color properties */ font-size: 1.1em; } .arabic-text { font-family: 'Hanafi', serif; font-size: 2.5em; direction: rtl; text-align: right; /* ✅ changed */ line-height: 1.8; /* ✅ increased for readability */ letter-spacing: normal; word-spacing: 0; /* ✅ ensure no extra word spacing */ flex-grow: 1; white-space: normal; /* ✅ allow normal wrapping */ } /* English text container to hold transliteration and translation */ .english-text { display: flex; flex-direction: column; text-align: left; /* Align English text to the left for readability */ } .transliteration-text { font-style: italic; font-size: 1.1em; color: #555; margin-bottom: 2px; } .translation-text { font-size: 1em; color: #333; } /* ========================================================================== Utility & Tab Styles ========================================================================== */ .error-checkbox { margin-left: auto; flex-shrink: 0; align-self: center; display: flex; flex-direction: column; align-items: center; } .tab-btn-active { font-weight: bold; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .ayah-highlighted { background-color: #fff3cd; /* soft yellow background (light mode) */ border-radius: 6px; padding: 6px; transition: background-color 0.3s ease, color 0.3s ease; } /* Dark mode variant */ @media (prefers-color-scheme: dark) { .ayah-highlighted { background-color: #3a3a1a; /* muted golden highlight */ color: #f1f1c1; /* light text for readability */ } } /* If you use a `.dark` class toggle on */ .dark .ayah-highlighted { background-color: #3a3a1a; color: #f1f1c1; }