/* Official King Fahd Complex Warsh script font (uthmanic_warsh_v21) - the same typeface family the printed Madinah Warsh mushaf's text was set in, and the one this app's Quran text was originally encoded for. */ @font-face { font-family: "UthmanicWarsh"; src: url("fonts/UthmanicWarshV21.ttf") format("truetype"); font-display: swap; } :root { --bg: #faf7f0; --sidebar-bg: #ffffff; --ink: #2b2620; --muted: #8a8070; --accent: #8a6d3b; --border: #e8e0d0; --page-bg: #fffdf6; --control-bg: #ffffff; --control-hover: #f3ede0; --active-bg: #efe4c8; --shadow: rgba(0, 0, 0, 0.12); --backdrop: rgba(0, 0, 0, 0.25); --debug-bg: rgba(30, 28, 24, 0.88); --debug-ink: #e8e2d4; --wrong: #c0392b; --uncertain: #b8860b; --record-live: #b23b3b; } /* Set on by the inline script in (to decide before first paint) and by the toggle in app.js. Phones default to this; desktop defaults to the light palette above. */ [data-theme="dark"] { --bg: #171511; --sidebar-bg: #201c17; --ink: #ece6d8; --muted: #a89f8c; --accent: #d1a44e; --border: #3a352b; --page-bg: #211d17; --control-bg: #2a251e; --control-hover: #37311f; --active-bg: #423823; --shadow: rgba(0, 0, 0, 0.5); --backdrop: rgba(0, 0, 0, 0.6); --debug-bg: rgba(0, 0, 0, 0.75); --debug-ink: #e8e2d4; --wrong: #e0705a; --uncertain: #dcaa4c; --record-live: #c0392b; } * { box-sizing: border-box; } body { margin: 0; font-family: "Scheherazade New", "Amiri", serif; background: var(--bg); color: var(--ink); } .app { position: relative; display: flex; height: 100vh; overflow: hidden; } .sidebar { position: absolute; inset-inline-start: 0; top: 0; height: 100%; width: 280px; z-index: 20; background: var(--sidebar-bg); border-left: 1px solid var(--border); box-shadow: 4px 0 16px var(--shadow); display: flex; flex-direction: column; overflow: hidden; transform: translateX(0); transition: transform 0.2s ease; } .app.sidebar-collapsed .sidebar { /* Slides fully off-canvas rather than shrinking, so it floats over the reader instead of taking up layout space when expanded. */ transform: translateX(100%); border-left: none; box-shadow: none; } .sidebar-backdrop { position: absolute; inset: 0; z-index: 15; background: var(--backdrop); opacity: 1; transition: opacity 0.2s ease; } .app.sidebar-collapsed .sidebar-backdrop { opacity: 0; pointer-events: none; } .sidebar-toggle { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--control-bg); color: var(--accent); font-size: 17px; cursor: pointer; /* Must stay above the overlay sidebar (z-index 20), since it sits at the same edge of the screen and needs to remain clickable while open. */ z-index: 30; } .sidebar-toggle:hover { background: var(--control-hover); } .sidebar-header { padding: 16px; /* Extra room on the toggle's side so the always-on-top ☰ button (which shares this corner with the sidebar, since it must stay clickable while the sidebar is open) never sits on top of the title or search box. RTL text starts at inline-start, same corner the toggle occupies, so it's inline-start padding that needs to grow, not inline-end. */ padding-inline-start: 56px; border-bottom: 1px solid var(--border); } .sidebar-header h1 { margin: 0 0 10px; font-size: 20px; font-family: "Segoe UI", Tahoma, sans-serif; } #surah-search { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px; } .surah-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .surah-list li { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); font-size: 18px; } .surah-list li:hover { background: var(--control-hover); } .surah-list li.active { background: var(--active-bg); font-weight: 700; } .surah-number { font-family: "Segoe UI", Tahoma, sans-serif; font-size: 12px; color: var(--muted); width: 24px; text-align: center; flex-shrink: 0; } .reader { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; /* anchors the absolutely-positioned debug panel */ } .reader-header { padding: 20px 40px; /* Every child here is absolutely positioned (so they can sit at fixed corner offsets), which means none of them contribute to this element's height - it was resting on padding alone (~40px), too short for the 52px mic button to fit centered without poking out the top. */ min-height: 72px; border-bottom: 1px solid var(--border); text-align: center; position: relative; } /* Left-side header icon cluster: mic (biggest, outermost/leftmost per request), peek, debug, theme - each further inward. All live in the header rather than over the page content, same idea as the sidebar/debug toggles that were already there. */ .record-toggle { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--control-bg); color: var(--accent); font-size: 22px; box-shadow: 0 2px 8px var(--shadow); cursor: pointer; } .record-toggle.recording { background: var(--record-live); color: #fff; } .peek-toggle { position: absolute; inset-inline-end: 72px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--control-bg); font-size: 16px; cursor: pointer; opacity: 0.55; } .peek-toggle.active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .debug-toggle { position: absolute; inset-inline-end: 116px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--control-bg); font-size: 16px; cursor: pointer; opacity: 0.55; } .debug-toggle.active { opacity: 1; border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.25); } .theme-toggle { position: absolute; inset-inline-end: 160px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--control-bg); font-size: 16px; cursor: pointer; } .debug-panel { position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 10; background: var(--debug-bg); color: var(--debug-ink); font-family: "Consolas", "Menlo", monospace; font-size: 12px; direction: ltr; text-align: left; padding: 8px 12px; border-radius: 6px; white-space: pre; } .trust-meter { position: absolute; inset-inline-start: 60px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 13px; color: var(--muted); } .trust-bar { width: 70px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; } .trust-bar-fill { height: 100%; width: 0%; background: var(--muted); transition: width 0.2s ease, background-color 0.3s ease; } #trust-value { transition: color 0.3s ease; } .page-area { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; overflow: hidden; } .page-frame { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); height: 100%; max-height: 880px; background: var(--page-bg); border: 2px solid var(--accent); border-radius: 6px; outline: 1px solid var(--border); outline-offset: 6px; box-shadow: 0 2px 14px var(--shadow); } .page-content { flex: 1; overflow-y: auto; padding: 28px 34px 8px; font-family: "UthmanicWarsh", "Scheherazade New", "Amiri", serif; font-size: 26px; line-height: 2.2; text-align: justify; /* the final line of the flowing text is almost always shorter than the page width - center it instead of leaving it ragged against the margin */ text-align-last: center; } .page-number { text-align: center; padding: 6px 0 10px; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 14px; color: var(--muted); } .page-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--control-bg); color: var(--accent); font-size: 26px; line-height: 1; cursor: pointer; flex-shrink: 0; } .page-nav:hover:not(:disabled) { background: var(--control-hover); } .page-nav:disabled { opacity: 0.3; cursor: default; } .surah-header { text-align: center; font-size: 30px; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; margin: 10px 30px; padding: 2px 0; } .ayah { display: inline; } .ayah-number { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 4px; border: 1px solid var(--accent); border-radius: 50%; font-size: 15px; font-family: "Segoe UI", Tahoma, sans-serif; color: var(--accent); vertical-align: middle; } .provisional { opacity: 0.5; } /* not-yet-reached text during a live recitation, so the reciter can't read ahead - fully hidden rather than blurred (a blur was still readable with enough effort), but keeps its layout space so text doesn't jump around as it's revealed. */ .unrevealed { visibility: hidden; user-select: none; } /* debug mode: corrector internals overlaid on the text */ .debug-win-edge { background: #1a73e8; color: #fff !important; border-radius: 3px; } .debug-win-range { background: rgba(26, 115, 232, 0.12); } /* per-letter correctness states, from the correction model's 1/-1/0 (/2 = not yet judged) codes */ .state-1 { color: inherit; } .state--1 { color: var(--wrong); text-decoration: underline wavy var(--wrong); } .state-0 { color: var(--uncertain); } .state-2 { color: inherit; } /* On a phone, the flanking prev/next circles plus all the page-frame's decorative padding/outline together ate about half the screen width, leaving the mushaf text squeezed into a narrow column. Below this width, the nav buttons become a floating overlay instead of taking flex-row space, and the frame's decoration shrinks, so the text column uses nearly the full screen. Desktop layout above this breakpoint is untouched. */ @media (max-width: 700px) { .page-area { padding: 6px; gap: 0; position: relative; } .page-frame { width: 100%; border-width: 1px; outline: none; } .page-content { padding: 18px 10px 6px; font-size: 22px; } .page-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 18px; background: var(--control-bg); opacity: 0.9; z-index: 5; } #prev-page { inset-inline-start: 10px; } #next-page { inset-inline-end: 10px; } /* Without the old surah-name title (removed) and the old text-label record button (now a floating FAB below the page), the header only holds three small icon-sized controls, which fit its fixed corner offsets fine even on a narrow phone - no layout change needed here. */ .trust-meter { font-size: 11px; gap: 4px; } .trust-bar { width: 44px; } }