:root { --bg: #f7f5f0; --surface: #ffffff; --border: #e5e0d5; --text: #2b2620; --muted: #7a7364; --primary: #1f6f5c; --primary-dark: #175647; --accent: #b98b2a; --accent-light: #d6ab5c; --danger: #b04a3d; --warn: #c08a2e; --good: #2f7d4f; --radius: 12px; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); } /* The default theme follows the phone's own light/dark setting, which is why a fresh install can open dark. A reader who prefers otherwise pins it from the settings, and that choice arrives as data-scheme on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-scheme="light"]), :root[data-theme="default"]:not([data-scheme="light"]) { --bg: #16150f; --surface: #201e17; --border: #35311f; --text: #ece7d9; --muted: #9a917c; --primary: #3fae91; --primary-dark: #2f8a72; --accent: #d6ab5c; --accent-light: #e8c78a; /* The semantic three, brightened for a dark ground like the named dark themes already do - left at their light-theme values they were a dark red and a dark green sitting on a dark surface. */ --danger: #e0705f; --warn: #e0b45c; --good: #6fbf8a; --shadow: 0 1px 3px rgba(0,0,0,0.4); } } :root:not([data-theme])[data-scheme="dark"], :root[data-theme="default"][data-scheme="dark"] { --bg: #16150f; --surface: #201e17; --border: #35311f; --text: #ece7d9; --muted: #9a917c; --primary: #3fae91; --primary-dark: #2f8a72; --accent: #d6ab5c; --accent-light: #e8c78a; --danger: #e0705f; --warn: #e0b45c; --good: #6fbf8a; --shadow: 0 1px 3px rgba(0,0,0,0.4); } /* Explicit calming themes - chosen deliberately, so they hold regardless of the system's light/dark preference (unlike the default theme above). */ :root[data-theme="sepia"] { --bg: #f4ecd8; --surface: #fbf3e3; --border: #e3d5b8; --text: #4a3b28; --muted: #8a7859; --primary: #8a5a2c; --primary-dark: #6e4720; --accent: #b9862f; --accent-light: #d1a55c; --danger: #a1483a; --warn: #b98b2a; --good: #5c7a4a; --shadow: 0 1px 3px rgba(0,0,0,0.08); } :root[data-theme="night"] { --bg: #0f1520; --surface: #182333; --border: #2a3a52; --text: #dbe6f5; --muted: #8fa3bf; --primary: #5b8fd6; --primary-dark: #3f6cad; --accent: #d6ab5c; --accent-light: #e8c78a; --danger: #e07a6c; --warn: #e0b45c; --good: #6fbf8a; --shadow: 0 1px 3px rgba(0,0,0,0.5); } :root[data-theme="forest"] { --bg: #0e1912; --surface: #152318; --border: #28402e; --text: #e3ede5; --muted: #93ab98; --primary: #4caf7d; --primary-dark: #3a8d63; --accent: #c9a24a; --accent-light: #ddbf72; --danger: #e08670; --warn: #d9ad5c; --good: #7fd19d; --shadow: 0 1px 3px rgba(0,0,0,0.5); } /* A rich maroon-and-gold "embroidered Mushaf cover" palette - the priciest theme, deliberately more ornate than the calmer color-only themes above. */ :root[data-theme="embroidered"] { --bg: #1a0e0f; --surface: #2b1416; --border: #4a2226; --text: #f3e3c8; --muted: #b89a7a; --primary: #8c1f2b; --primary-dark: #6e1620; --accent: #d4af37; --accent-light: #e8cd6f; --danger: #e0574a; --warn: #e0b45c; --good: #6fbf8a; --shadow: 0 1px 3px rgba(0,0,0,0.5); } /* ثلث الليل - the last third of the night. --------------------------------------------------------------------- Not a dark palette but a lit room, and the lighting is the feature. Two kinds of light, which is what makes it read as a place rather than a colour scheme: a cold crescent high on the right, and warm lanterns hung low on chains. The cold and the warm arguing with each other is the whole effect - a uniformly dark screen has no light in it at all. Four layers, and which layer a thing lives on is the design: body::before the sky, the arch, and the lanterns themselves - all BEHIND the cards html::after the falloff: everything multiplied by how much light actually reaches it body::after moon, stars and the glow pools, added on top The lanterns hang behind the content on purpose. Hung in front they would sit across the text - which is what they do in every illustration of this idea - and there is no gap between the cards wide enough to thread them through. Behind, they glow through the dark glass the cards are made of, so they light the card they hang over and never cover a letter of it. */ :root[data-theme="lastthird"] { /* The sky is cold and the lamps are warm, so the surfaces sit between: indigo-black grounds, brass for anything interactive, and text that is warm off-white rather than blue-white - which is the other half of not being أزرق ليلي. */ --bg: #05060e; --surface: #0c0e19; --border: #262433; --text: #cbc6bd; --muted: #938d83; --primary: #b99a5e; --primary-dark: #94794a; --accent: #e8c98a; --accent-light: #f5e2b8; --danger: #bb7566; --warn: #c2a266; --good: #78a58b; --shadow: 0 1px 3px rgba(0,0,0,0.8); } /* The wallpaper stands down: this theme brings its own sky, and a green mushaf tile over a night sky is two skies at once. (:root[data-bg=...] is (0,2,0) and comes later in the file, so the element takes this to (0,2,1) rather than reaching for !important.) */ html:root[data-theme="lastthird"] { background-image: none; } /* ---- the sky, and the lanterns hanging in it ---- */ :root[data-theme="lastthird"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-image: /* One lamp, hung from the middle of the arch on a wire that runs all the way down to the middle of the screen. The wire and the lamp are separate layers on purpose: the lamp is a fixed size, and the wire has to stretch from the top of the viewport to wherever the middle of it lands - which no single drawing can do, because scaling one SVG scales the lamp along with its chain. */ linear-gradient(rgba(201,168,106,0.55), rgba(201,168,106,0.55)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'%3E%3Cdefs%3E%3ClinearGradient id='gl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe0a4' stop-opacity='0.45'/%3E%3Cstop offset='0.5' stop-color='%23ffc266' stop-opacity='0.9'/%3E%3Cstop offset='1' stop-color='%23ff9d3c' stop-opacity='0.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='40' cy='7' r='5' fill='none' stroke='%23c9a86a' stroke-width='2.2'/%3E%3Cpath d='M40 13l20 15H20Z' fill='%23c9a86a'/%3E%3Crect x='17' y='28' width='46' height='6' rx='3' fill='%23d9b878'/%3E%3Cpath d='M22 34h36l5 44H17Z' fill='url(%23gl)'/%3E%3Cellipse cx='40' cy='58' rx='11' ry='18' fill='%23ffd894' fill-opacity='0.45'/%3E%3Cellipse cx='40' cy='58' rx='6.5' ry='12' fill='%23fff5da' fill-opacity='0.97'/%3E%3Cpath d='M22 34L17 78M58 34l5 44M40 34v44' stroke='%23a8894f' stroke-opacity='0.9' stroke-width='1.8' fill='none'/%3E%3Crect x='14' y='78' width='52' height='7' rx='3.5' fill='%23d9b878'/%3E%3Cpath d='M40 85v6' stroke='%23a8894f' stroke-width='2.4'/%3E%3Ccircle cx='40' cy='94' r='4' fill='%23c9a86a'/%3E%3C/svg%3E"), /* The arch, above the sky and below the lamp. It has to sit in this same stack: the sky gradient below is opaque, so an arch on a lower layer was painted over and invisible. */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='320' viewBox='0 0 400 320' preserveAspectRatio='none'%3E%3Cpath d='M0 0h400v320h-30V160c0-72-76-118-170-118S30 88 30 160v160H0Z' fill='%23090a14'/%3E%3C/svg%3E"), /* the moon's own halo, and the sky */ radial-gradient(circle 200px at 86% 13%, rgba(216,202,164,0.15), rgba(216,202,164,0.04) 44%, transparent 72%), radial-gradient(ellipse 160% 90% at 50% 0%, #101430, #070914 52%, #05060e 100%); background-position: 50% 0, 50% 50%, top center, 0 0, 0 0; /* The wire runs from the very top of the screen. It used to start at the arch's peak so it met the curve drawn there; that curve is gone, so a wire starting in mid-air would just look cut. It still stops 48px short of centre, where the lamp's hook ring lands once the lamp is centred, so the two meet instead of the wire running down through the glass. */ background-size: 2px calc(50% - 48px), 84px 105px, 100% 320px, 100% 100%, 100% 100%; } /* ---- the falloff ---- */ /* A page cannot turn the phone's brightness down - nothing on the web can - but it can multiply the whole interface by how much light reaches it. White means untouched, and each light source punches its own bright spot through: `lighten` keeps whichever source reaches a given pixel most, so the moon and the lamp light the room together rather than the last one in the list winning. The floor is 0.72 because past that the ayah text stops being readable, which is where the simulation has to give way. */ :root[data-theme="lastthird"]::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; mix-blend-mode: multiply; background-image: radial-gradient(circle 210px at 86% 12%, #ffffff, #cfd0d4 55%, #b7b9bf 100%), radial-gradient(circle 230px at 50% 50%, #ffffff, #cfcabf 55%, #b7b9bf 100%), linear-gradient(#b7b9bf, #b7b9bf); background-blend-mode: lighten, lighten, normal; } /* ---- the light that reaches the front ---- */ /* Moon, stars and the lamps' glow, added rather than painted: `screen` only ever brightens, and the sky behind is black, so nothing outside the light itself is touched. This layer is exempt from the falloff below it - these are the sources the falloff is measured from. The glows are diffuse light and not objects, so they pass over text without hiding it; the lantern bodies stay behind the cards where they belong. */ :root[data-theme="lastthird"] body::after { content: ""; position: fixed; inset: 0; z-index: 9999; mix-blend-mode: screen; pointer-events: none; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='120' height='120' fill='white'/%3E%3Ccircle cx='74' cy='48' r='40' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='58' cy='58' r='40' fill='%23efe4bd' fill-opacity='0.62' mask='url(%23m)'/%3E%3C/svg%3E"), radial-gradient(circle 30px at 50% 50%, rgba(255,238,196,0.72), rgba(255,214,138,0.30) 60%, transparent 88%), radial-gradient(circle 120px at 50% 50%, rgba(255,196,110,0.26), rgba(255,196,110,0.06) 45%, transparent 74%), radial-gradient(circle at 12% 16%, rgba(238,234,214,0.85) 1.3px, transparent 1.6px), radial-gradient(circle at 33% 7%, rgba(238,234,214,0.55) 1px, transparent 1.3px), radial-gradient(circle at 58% 22%, rgba(238,234,214,0.7) 1.2px, transparent 1.5px), radial-gradient(circle at 22% 38%, rgba(238,234,214,0.45) 1px, transparent 1.3px), radial-gradient(circle at 91% 34%, rgba(238,234,214,0.6) 1.1px, transparent 1.4px), radial-gradient(circle at 46% 52%, rgba(238,234,214,0.35) 1px, transparent 1.3px), radial-gradient(circle at 72% 67%, rgba(238,234,214,0.5) 1.1px, transparent 1.4px), radial-gradient(circle at 8% 74%, rgba(238,234,214,0.4) 1px, transparent 1.3px), radial-gradient(circle at 37% 88%, rgba(238,234,214,0.3) 1px, transparent 1.3px), radial-gradient(circle at 86% 92%, rgba(238,234,214,0.45) 1.1px, transparent 1.4px); background-position: 88% 11%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-size: 92px 92px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; /* Not a blink - flames and stars breathe. One composited opacity change per frame for the whole layer. */ animation: nightBreath 7s ease-in-out infinite alternate; } @keyframes nightBreath { from { opacity: 0.82; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { :root[data-theme="lastthird"] body::after { animation: none; opacity: 1; } } /* ---- the surfaces ---- */ /* Dark glass, and this is the idea working or not working: the lanterns and the moon live behind the content, and on a phone the content is nearly the whole screen - opaque cards would bury every one of them and leave a two-centimetre strip of sky at the top. Letting the night through is what makes the lamps light anything. */ :root[data-theme="lastthird"] .panel, :root[data-theme="lastthird"] .stat-card, :root[data-theme="lastthird"] .settings-group { background: color-mix(in srgb, var(--surface) 58%, transparent); } :root[data-theme="lastthird"] .panel, :root[data-theme="lastthird"] .challenge-card { box-shadow: inset 0 1px 0 rgba(232,201,138,0.10), 0 1px 2px rgba(0,0,0,0.6); } /* backdrop-filter goes on .tabs and NEVER on .app-header: any value but none makes an element a containing block for its fixed descendants, and on phones .tabs is `position: fixed; bottom: 0` *inside* the header - so blurring the header re-anchored the whole tab bar to the header's 55px box and parked it at the top of the screen. */ :root[data-theme="lastthird"] .app-header { background: color-mix(in srgb, var(--bg) 80%, transparent); } :root[data-theme="lastthird"] .tabs { background: color-mix(in srgb, var(--surface) 74%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* The challenge card is painted in --primary to match whatever theme is on. Here that made it the brightest thing on a black page. */ :root[data-theme="lastthird"] .challenge-card { /* Its own gradient goes at the BACK of the same stack rather than in a `background` shorthand, which would reset background-image and take the lamp and its pool with it. */ background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='64' viewBox='0 0 24 64'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe0a4' stop-opacity='0.55'/%3E%3Cstop offset='0.5' stop-color='%23ffc266' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23ff9d3c' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 0v26' stroke='%23c9a86a' stroke-opacity='0.6' stroke-width='1.3' fill='none'/%3E%3Cpath d='M12 28l6 6H6Z' fill='%23c9a86a'/%3E%3Crect x='4.5' y='34' width='15' height='2.6' rx='1.3' fill='%23d9b878'/%3E%3Cpath d='M6.5 36.6h11l1.6 19H4.9Z' fill='url(%23f)'/%3E%3Cellipse cx='12' cy='45' rx='3.1' ry='5.6' fill='%23fff3d2' fill-opacity='0.95'/%3E%3Cpath d='M6.5 36.6L4.9 55.6M17.5 36.6l1.6 19' stroke='%23a8894f' stroke-opacity='0.9' stroke-width='1.1' fill='none'/%3E%3Crect x='3.4' y='55.6' width='17.2' height='3' rx='1.5' fill='%23d9b878'/%3E%3Ccircle cx='12' cy='61' r='1.7' fill='%23c9a86a'/%3E%3C/svg%3E"), radial-gradient(ellipse 62% 48% at 16% 0%, rgba(255,198,116,0.17), rgba(255,198,116,0.05) 45%, transparent 78%), linear-gradient(150deg, rgba(20,18,30,0.6), rgba(9,10,18,0.6)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: left 14px top 0, 0 0, 0 0; background-size: 20px 46px, auto, auto; border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent); color: var(--text); } :root[data-theme="lastthird"] .challenge-card.done { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='64' viewBox='0 0 24 64'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe0a4' stop-opacity='0.55'/%3E%3Cstop offset='0.5' stop-color='%23ffc266' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23ff9d3c' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 0v26' stroke='%23c9a86a' stroke-opacity='0.6' stroke-width='1.3' fill='none'/%3E%3Cpath d='M12 28l6 6H6Z' fill='%23c9a86a'/%3E%3Crect x='4.5' y='34' width='15' height='2.6' rx='1.3' fill='%23d9b878'/%3E%3Cpath d='M6.5 36.6h11l1.6 19H4.9Z' fill='url(%23f)'/%3E%3Cellipse cx='12' cy='45' rx='3.1' ry='5.6' fill='%23fff3d2' fill-opacity='0.95'/%3E%3Cpath d='M6.5 36.6L4.9 55.6M17.5 36.6l1.6 19' stroke='%23a8894f' stroke-opacity='0.9' stroke-width='1.1' fill='none'/%3E%3Crect x='3.4' y='55.6' width='17.2' height='3' rx='1.5' fill='%23d9b878'/%3E%3Ccircle cx='12' cy='61' r='1.7' fill='%23c9a86a'/%3E%3C/svg%3E"), radial-gradient(ellipse 62% 48% at 16% 0%, rgba(255,198,116,0.17), rgba(255,198,116,0.05) 45%, transparent 78%), linear-gradient(150deg, rgba(16,26,22,0.6), rgba(7,13,11,0.6)); border-color: color-mix(in srgb, var(--good) 40%, transparent); } :root[data-theme="lastthird"] .challenge-card h2, :root[data-theme="lastthird"] .challenge-card p { color: var(--text); } :root[data-theme="lastthird"] .challenge-card .btn.accent, :root[data-theme="lastthird"] .btn.accent { /* Nothing man-made out-shines the lamps in this room. */ background: color-mix(in srgb, var(--accent) 60%, #0c0e19); color: #100c04; border-color: transparent; } /* ---- a lantern inside every card ---- */ /* Each card carries its own lamp, hung in its top-left corner, and is lit from under it. Two separate things, deliberately: ::before the lamp itself - inside the card, but on the negative layer of the card's own stacking context, so it is painted over the card's face and under every word on it; the card's own background-image - a warm pool spilling down from the top edge. A background image paints BEHIND the text, which is why the light passes through the card and lights it rather than washing over what is written on it. A screen- blended overlay would have lifted the dark card more than the pale text and quietly cut the contrast; this cannot. The glass the cards are made of is what lets the light look like it came from the lamp and not from inside the card. */ :root[data-theme="lastthird"] .panel, :root[data-theme="lastthird"] .stat-card, :root[data-theme="lastthird"] .challenge-card { /* The lamp is a background layer, not a ::before, and that is not a stylistic choice. A background paints behind the element's text by definition - which is the whole requirement - and it needs no stacking context to do it. The ::before version needed `isolation: isolate` on the card to sit under the text, and isolation traps a position:fixed DESCENDANT in the card's stacking context: the typing field pins itself above the keyboard at z-index 45 to clear the tab bar at 40, and once trapped it no longer outranked the bar at all - it was painted under the footer, which is exactly what got reported. No stacking context, no trap. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='64' viewBox='0 0 24 64'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe0a4' stop-opacity='0.55'/%3E%3Cstop offset='0.5' stop-color='%23ffc266' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23ff9d3c' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 0v26' stroke='%23c9a86a' stroke-opacity='0.6' stroke-width='1.3' fill='none'/%3E%3Cpath d='M12 28l6 6H6Z' fill='%23c9a86a'/%3E%3Crect x='4.5' y='34' width='15' height='2.6' rx='1.3' fill='%23d9b878'/%3E%3Cpath d='M6.5 36.6h11l1.6 19H4.9Z' fill='url(%23f)'/%3E%3Cellipse cx='12' cy='45' rx='3.1' ry='5.6' fill='%23fff3d2' fill-opacity='0.95'/%3E%3Cpath d='M6.5 36.6L4.9 55.6M17.5 36.6l1.6 19' stroke='%23a8894f' stroke-opacity='0.9' stroke-width='1.1' fill='none'/%3E%3Crect x='3.4' y='55.6' width='17.2' height='3' rx='1.5' fill='%23d9b878'/%3E%3Ccircle cx='12' cy='61' r='1.7' fill='%23c9a86a'/%3E%3C/svg%3E"), radial-gradient(ellipse 62% 48% at 16% 0%, rgba(255,198,116,0.17), rgba(255,198,116,0.05) 45%, transparent 78%); background-repeat: no-repeat, no-repeat; /* physical left - the app is RTL, so this is the corner an Arabic line ends at, the emptiest part of a card's first row */ background-position: left 14px top 0, 0 0; background-size: 20px 46px, auto; } /* The ayah is the one thing in the app the lamps are actually for, so its pool is warmer and reaches further down the panel. Its ::before/::after are the corner marks, so the lamp hangs off the panel around it. */ :root[data-theme="lastthird"] .ayah-display { background-image: radial-gradient(ellipse 72% 60% at 16% 0%, rgba(255,198,116,0.18), rgba(255,198,116,0.05) 48%, transparent 80%); } /* The ayah panel is what the lamps are for. The gold mushaf watermark is drawn for a lit page; on near-black it stops being a watermark and starts being a picture behind the ayah. */ :root[data-theme="lastthird"] .ayah-display { background-color: rgba(8,10,20,0.7); background-image: none; box-shadow: 0 0 42px rgba(232,201,138,0.10) inset; outline-color: color-mix(in srgb, var(--accent) 34%, transparent); } :root[data-theme="lastthird"] .ayah-display::before, :root[data-theme="lastthird"] .ayah-display::after { border-color: color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0.6; } /* The pull-to-reload badge. Parked above the top edge and brought down by the thumb; it is the only moving part of the gesture, which is why the page itself never moves. */ .pull-refresh { position: fixed; top: -44px; left: 50%; transform: translateX(-50%); z-index: 9990; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.18); color: var(--muted); opacity: 0; pointer-events: none; transition: opacity .15s ease, color .15s ease, border-color .15s ease; } .pull-refresh svg { width: 19px; height: 19px; } .pull-refresh.visible { opacity: 1; } /* Far enough: let go and it reloads. */ .pull-refresh.ready { color: var(--primary); border-color: var(--primary); } .pull-refresh.spinning svg { animation: pullSpin .9s linear infinite; } @keyframes pullSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pull-refresh.spinning svg { animation: none; } } .points-note { margin: 2px 0 0; font-size: 0.78rem; text-align: center; } .points-note.hidden { display: none; } /* Completing the ayah the reciter stopped in the middle of. */ .listen-finish, .listen-write-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; } .listen-finish.hidden, .listen-write-row.hidden { display: none; } .listen-write-row textarea { flex: 1 1 180px; min-width: 0; font-family: var(--ayah-font-family, 'Amiri', serif); font-size: 1.05rem; line-height: 1.9; text-align: center; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); /* The height is set from the content in JS; without these the browser's own resize handle and scrollbar fight it every keystroke. */ resize: none; overflow-y: hidden; outline: none; } .listen-write-row textarea:focus { border-color: var(--primary); } /* Above the keyboard rather than under it, the way the typing round in الحفظ already works: the row leaves the flow while the field has focus, so what is being written stays on screen. Only on a phone - on a desktop there is no keyboard to be covered by. */ @media (max-width: 820px) { .listen-write-row.keyboard-active { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,0.12); margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; align-items: flex-end; } } /* The seam, shown rather than hidden: the reciter's half is set back and the person's half is forward, so where one stopped and the other carried on is legible at a glance instead of being a guess. Colour alone was not enough - muted against text is a shade apart on a light ground and invisible at a glance - so the half that was recalled also carries a line under it. */ .word.seam-reciter { color: var(--muted); opacity: 0.62; } .word.seam-you { color: var(--text); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 2px; } /* And the join itself is drawn, not implied. The first word the person supplied carries a bar on the edge facing the reciter's half - inline-start, so it lands on the right in this RTL text and stays there if the line wraps. A width the underlines don't have and a colour the text doesn't, because "where did he stop?" is the one thing this screen has to answer. */ .word.seam-start { border-inline-start: 3px solid var(--accent); border-radius: 2px; padding-inline-start: 10px; margin-inline-start: 7px; /* Taller than the glyphs so it reads as a rule between the two halves and not as an ornament on the word it happens to be attached to. The negative block margin gives that height back, so the line spacing of the ayah is the same with the bar as without it. */ padding-block: 4px; margin-block: -4px; } /* Neither recited nor written: no claim either way. */ .word.seam-untouched { color: var(--muted); opacity: 0.45; } /* Owed: a word the writing left open - never written, or written wrong. It is covered and has to be answered before the grading row opens, so the tile carries only which of the two it is, never the word itself. The .masked rules give it its cover; these two only tint it. */ .word.masked.seam-owed-wrong { background: color-mix(in srgb, var(--danger) 14%, transparent); border-bottom-color: color-mix(in srgb, var(--danger) 55%, transparent); } .word.seam-wrong { color: var(--danger); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--danger) 70%, transparent); text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 5px; } /* التفسير, on the reading box rather than in the row of buttons under it. It belongs to the ayah, and as an icon on the frame's left edge it stops competing with the controls that belong to the drill. Physical left: the app is RTL, so this is the far end of every line of text. */ .ayah-side-btn { position: absolute; top: 8px; left: 8px; z-index: 2; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--primary); cursor: pointer; padding: 0; } .ayah-side-btn svg { width: 17px; height: 17px; } @media (hover: hover) { .ayah-side-btn:hover { background: var(--surface); } } /* The two readings of one ayah, side by side in the same sheet. */ .gloss-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .gloss-tabs .btn { flex: 1; padding: 7px 10px; font-size: 0.85rem; } .gloss-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .gloss-preamble { margin: 0 0 10px; } .gloss-source { margin: 12px 0 0; font-size: 0.76rem; text-align: left; } /* The footer follows the route: it belongs under the dashboard, not under every tab. */ .app-footer.hidden { display: none; } /* The address lives in the button's href, not printed under it: a raw URL set as body text is something to read and re-type rather than something to press. */ .contact-link { display: block; margin-top: 8px; text-align: center; text-decoration: none; } /* The completion screen. Quiet rather than confetti-loud: finishing the Qur'an is not a level-up. */ .khatm-panel { text-align: center; } .khatm-panel.hidden { display: none; } .khatm-mark { font-size: 2.6rem; color: var(--accent); line-height: 1; margin-bottom: 6px; } .khatm-panel h2 { font-size: 1.5rem; margin-bottom: 8px; } .khatm-lead { font-size: 1.05rem; margin: 0 0 6px; } .khatm-since { margin: 0 0 14px; font-size: 0.85rem; } .khatm-hadith { font-family: var(--ayah-font-family, 'Amiri', serif); font-size: 1.2rem; line-height: 1.9; color: var(--primary); margin: 0 0 10px; } .khatm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } * { box-sizing: border-box; } /* No grey/blue flash box over a button when it's tapped - the browser's default tap highlight, which has nothing to do with this app's colours. The property inherits, so setting it once covers everything. */ html { -webkit-tap-highlight-color: transparent; } /* No scrollbar track drawn down the side of a sheet. On the page a visible bar is a useful affordance; inside a modal it is a hairline against the sheet's own edge, and it was reading as a stray border - most of all in settings, where the sheet is tall and the bar ran its whole height. The content still scrolls; only the furniture is gone. */ .settings-panel, .info-modal, .voice-modal, .modal-sheet, .info-modal-body, #info-modal-body, .mushaf-reader { scrollbar-width: none; -ms-overflow-style: none; } .settings-panel::-webkit-scrollbar, .info-modal::-webkit-scrollbar, .voice-modal::-webkit-scrollbar, .modal-sheet::-webkit-scrollbar, .info-modal-body::-webkit-scrollbar, #info-modal-body::-webkit-scrollbar, .mushaf-reader::-webkit-scrollbar { width: 0; height: 0; } /* No zooming - the meta viewport says so, and this says it again to the touch handler, which is what actually stops a two-finger pinch and the double-tap zoom on Android. Panning is left alone (pan-x pan-y), so the page, the ayah panels and the reader all still scroll and swipe. Text size belongs to the setting in الإعدادات, which scales the whole interface together instead of leaving half of it off the screen. */ html { touch-action: pan-x pan-y; } html, body { margin: 0; color: var(--text); font-family: 'Tajawal', system-ui, sans-serif; min-height: 100%; } /* What made the bottom bar look like it drifted away from the content was the page bouncing under the finger, not where anything was laid out: an overscroll carries the fixed bar with it, and lets go of it somewhere else. Stopping the bounce keeps the bar on the edge where it belongs - vertically only, so the browser's own back-swipe is untouched. The credit line, meanwhile, goes back to sitting right under the content: pinning it to the bottom of the screen opened a gulf between it and a short tab. */ html, body { overscroll-behavior-y: none; } /* Everything in this file is sized in rem, so one step here lifts the whole interface together - labels, chips, buttons and the ayah text - instead of a dozen scattered bumps that would drift apart. Arabic needs a little more height than Latin at the same nominal size to stay comfortable, and at 16px the smaller labels were reading cramped. */ html { font-size: 17px; } /* Nothing in this app is meant to scroll sideways - the strips that do (the wird week, the learn mode switch) scroll inside themselves. `clip` rather than `hidden` on purpose: `hidden` would turn the root into a scroll container and break the sticky header on wide screens. */ html { overflow-x: clip; } /* The pattern belongs on the ROOT element, not on body. body's box is only as tall as its content, so a background painted there stopped partway down the page and left the rest bare (visible on short tabs like the review one). A background on the root paints the whole canvas however tall the viewport is; body stays transparent so it doesn't cover it. */ html { background-color: var(--bg); } body { background-color: transparent; } /* The pattern belongs to the page, not to the paper on it: pinned to the viewport, so the cards slide over a sky that stays where it is instead of the whole thing moving as one sheet. */ html { background-attachment: fixed; } /* ---------- The page holds still while a modal is open ---------- A modal is a room, not a layer of paint: scrolling inside one used to run out of content and hand the gesture on to the page underneath, so closing the modal revealed a tab scrolled somewhere else entirely. Two halves to stopping that, and both are needed: the page behind stops scrolling at all (below), and each modal's own scroller refuses to pass a gesture on once it reaches its end (overscroll-behavior, further down). The scroll position is kept, not reset - overflow:hidden freezes the document where it stands, and it resumes there when the modal closes. scrollbar-gutter keeps the desktop scrollbar's width reserved, so the page doesn't jump sideways the moment it stops scrolling. */ html { scrollbar-gutter: stable; } html.modal-open, html.modal-open body { overflow: hidden; } /* Subtle Islamic geometric pattern (8-point star tiling) behind everything - the default background choice (see BACKGROUNDS in app.js); the other purchasable patterns below replace it via [data-bg] on the root. */ /* No full-size gradient layer in front of the tile: a first layer sized `auto` covers the whole page opaquely and hid the pattern entirely (the reason "زخرفة ذهبية" looked like it did nothing at all). */ /* An open mushaf, tiled - the app's own motif, the same drawing the ayah panel carries as a watermark. It replaces the eight-point star these two backgrounds used to share. */ :root:not([data-bg]), :root[data-bg="default"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%231f6f5c' stroke-opacity='0.13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 55C68 45 50 42 33 45v66c17-3 35 0 47 10 12-10 30-13 47-10V45c-17-3-35 0-47 10Z'/%3E%3Cpath d='M80 55v66'/%3E%3Cpath d='M45 64h22M45 84h18M93 64h22M93 84h18'/%3E%3Ccircle cx='80' cy='80' r='70'/%3E%3C/g%3E%3C/svg%3E"); background-size: 60px 60px; } /* These three are meant to actually read as a pattern in the narrow gaps between opaque panel cards (not the whole page), so - unlike the default above - they use noticeably higher contrast and smaller, denser tiles; the first attempt at this was too subtle to see there. */ :root[data-bg="geometric-gold"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23b98b2a' stroke-opacity='0.45' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 55C68 45 50 42 33 45v66c17-3 35 0 47 10 12-10 30-13 47-10V45c-17-3-35 0-47 10Z'/%3E%3Cpath d='M80 55v66'/%3E%3Cpath d='M45 64h22M45 84h18M93 64h22M93 84h18'/%3E%3Ccircle cx='80' cy='80' r='70'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 56px; } :root[data-bg="waves"] { background-image: repeating-linear-gradient(135deg, rgba(31,111,92,0.16) 0px, rgba(31,111,92,0.16) 3px, transparent 3px, transparent 16px), repeating-linear-gradient(45deg, rgba(31,111,92,0.13) 0px, rgba(31,111,92,0.13) 3px, transparent 3px, transparent 22px); } /* Interlaced arabesque: two crossing lattices at 60 degrees, which is what makes the woven look without drawing a single knot by hand. */ :root[data-bg="arabesque"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%231f6f5c' stroke-opacity='0.3' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M40 6 62 18v24L40 54 18 42V18Z'/%3E%3Cpath d='M40 18 51 24v12l-11 6-11-6V24Z'/%3E%3Cpath d='M40 6v12M62 18 51 24M62 42 51 36M40 54V42M18 42l11-6M18 18l11 6'/%3E%3C/g%3E%3Cg fill='%23b98b2a' fill-opacity='0.3'%3E%3Ccircle cx='40' cy='30' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); background-size: 80px 80px; } /* Palm fronds: a leaf drawn once - midrib and ribs either side - and tiled in alternating rows so it reads as fronds rather than as a stamp. */ :root[data-bg="lanterns"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23b98b2a' stroke-opacity='0.34' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M44 14v6'/%3E%3Cpath d='M38 20h12l-2 4H40Z'/%3E%3Cpath d='M40 24h8l4 14-8 12-8-12Z'/%3E%3Cpath d='M40 24 36 38M48 24l4 14M36 38h16'/%3E%3Cpath d='M44 50v6'/%3E%3Cpath d='M41 56h6'/%3E%3C/g%3E%3Cg fill='%23b98b2a' fill-opacity='0.22'%3E%3Cpath d='M40 26h8l3 11-7 10-7-10Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 88px 88px; } :root[data-bg="stars-scatter"] { background-image: radial-gradient(circle at 10% 20%, rgba(185,139,42,0.55) 1.8px, transparent 1.8px), radial-gradient(circle at 70% 60%, rgba(185,139,42,0.45) 1.4px, transparent 1.4px), radial-gradient(circle at 40% 80%, rgba(185,139,42,0.5) 1.6px, transparent 1.6px), radial-gradient(circle at 90% 15%, rgba(185,139,42,0.4) 1.4px, transparent 1.4px), radial-gradient(circle at 25% 45%, rgba(185,139,42,0.35) 1.4px, transparent 1.4px); background-size: 70px 70px, 46px 46px, 60px 60px, 50px 50px, 36px 36px; } h1, h2 { font-family: 'Tajawal', sans-serif; margin: 0; } /* viewport-fit=cover lets the page reach the very top of the screen, which is what puts the app's own colour behind the status bar instead of a white band - but the header then has to keep its own contents out from under the clock and the notch. Hence the top inset here (zero on everything that doesn't have one), and the side insets for landscape, where the notch eats into one edge. */ .app-header { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); padding: max(12px, calc(env(safe-area-inset-top, 0px) + 2px)) calc(20px + env(safe-area-inset-right, 0px)) 12px calc(20px + env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .brand { display: flex; align-items: center; gap: 8px; } .brand-icon { font-size: 1.5rem; } /* Room above the letters for the vowels: at a tight line height the shadda and damma on the بّ ride into the header's edge. */ /* The app's name in the same hand as the ayat it carries - it is the one word on the page that should look like the book. */ .brand h1 { font-family: var(--ayah-font-family, 'Amiri', serif); font-size: 1.45rem; line-height: 1.6; color: var(--primary); } .tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 999px; padding: 4px; } .tab-btn { display: flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 0.85rem; color: var(--muted); transition: all .15s ease; white-space: nowrap; } .tab-icon { position: relative; display: inline-flex; line-height: 1; } .tab-icon svg { width: 18px; height: 18px; } .tab-btn.active, :root[data-route="dashboard"] .tab-btn[data-tab="dashboard"], :root[data-route="learn"] .tab-btn[data-tab="learn"], :root[data-route="browse"] .tab-btn[data-tab="browse"], :root[data-route="review"] .tab-btn[data-tab="review"] { background: var(--primary); color: white; } .icon-only-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: var(--bg); color: var(--muted); border-radius: 50%; cursor: pointer; transition: all .15s ease; } .icon-only-btn svg { width: 19px; height: 19px; } @media (hover: hover) { .icon-only-btn:hover { color: var(--primary); background: var(--border); } } /* The header scrolls away on phones (it isn't sticky there - see the media query below), which used to take settings with it. This is the same gear held at the same spot it occupies in the header, so it reads as staying put rather than as a new button appearing; it fades and lifts back out when the header itself comes back into view. Sits above the fullscreen reader (z-index 400) so it's reachable there too, and is hidden while any modal that should own the screen is open. */ .settings-fab { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 410; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); opacity: 0; transform: translateY(-10px) scale(0.9); pointer-events: none; transition: opacity .22s ease, transform .22s ease, top .22s ease, left .22s ease; } .settings-fab.visible { opacity: 1; transform: none; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .settings-fab { transition: opacity .01s linear; } } .header-left { display: flex; align-items: center; gap: 8px; } .header-points-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 0.8rem; font-weight: 700; line-height: 1; color: var(--primary); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; white-space: nowrap; } /* One coin, wherever the total is reported - the header badge and the settings row. */ .coin-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; color: #eab308; } .coin-icon svg { width: 15px; height: 15px; } /* A couple of px down: digit glyphs sit slightly high within their own line box compared to the icon's true visual center, so the two read as misaligned even though both are flex-centered on the same row. */ .header-points-badge #header-points-value { line-height: 1; position: relative; top: 2px; } /* Bottom app-style navigation on phones/tablets: easier to reach with a thumb, and it keeps the brand header from competing with four tab pills for width. */ @media (max-width: 820px) { .app-header { justify-content: flex-start; /* max(), not a sum: the status bar is already a gap above the header's contents, so adding the header's own padding on top of it pushed everything a whole extra row down on an iPhone. Two pixels of clearance under the clock is enough; where there is no inset the 10px stands. */ padding: max(10px, calc(env(safe-area-inset-top, 0px) + 2px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px)); position: relative; } /* Centred on the row, not on the box: the box now includes the status bar, and half of that would drop this cluster below the title beside it. */ .header-left { position: absolute; left: calc(14px + env(safe-area-inset-left, 0px)); top: calc(50% + max(0px, calc(env(safe-area-inset-top, 0px) + 2px - 10px)) / 2); transform: translateY(-50%); } .tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; box-shadow: 0 -2px 12px rgba(0,0,0,0.06); } .tab-btn { flex: 1; flex-direction: column; gap: 3px; padding: 5px 2px 6px; font-size: 0.72rem; border-radius: 12px; color: color-mix(in srgb, var(--muted) 70%, var(--text)); } .tab-icon svg { width: 23px; height: 23px; } /* The open tab is marked by a pill behind its icon, not by painting the whole cell: a solid block a quarter of the screen wide is the loudest thing on the page, and it marks the part of it nobody is looking at. The label carries the colour instead, mixed toward the theme's text so it reads on the bar in every theme - the maroon theme's own maroon is invisible on the maroon theme's own surface. */ .tabs .tab-btn.active, :root[data-route="dashboard"] .tabs .tab-btn[data-tab="dashboard"], :root[data-route="learn"] .tabs .tab-btn[data-tab="learn"], :root[data-route="browse"] .tabs .tab-btn[data-tab="browse"], :root[data-route="review"] .tabs .tab-btn[data-tab="review"] { background: transparent; color: color-mix(in srgb, var(--primary) 55%, var(--text)); font-weight: 700; } .tabs .tab-icon { padding: 4px 16px; border-radius: 999px; transition: background-color .18s ease; } /* The icon box is padded out to make the pill, so the due badge is pulled back in by that padding - otherwise it floats at the pill's corner instead of sitting on the glyph. */ .tabs .tab-badge { inset-inline-end: 6px; top: -2px; } .tabs .tab-btn.active .tab-icon, :root[data-route="dashboard"] .tabs .tab-btn[data-tab="dashboard"] .tab-icon, :root[data-route="learn"] .tabs .tab-btn[data-tab="learn"] .tab-icon, :root[data-route="browse"] .tabs .tab-btn[data-tab="browse"] .tab-icon, :root[data-route="review"] .tabs .tab-btn[data-tab="review"] .tab-icon { background: color-mix(in srgb, var(--primary) 55%, var(--surface)); } /* The clearance over the fixed bar is main#app's padding-bottom, set in the media block near the end of this file - after the `padding` shorthand below, so it is not overridden. */ } main#app { max-width: 880px; margin: 0 auto; padding: 20px; /* The tab on its way out is positioned against this while it slides. */ position: relative; } /* The open tab is stamped on by the inline script in the document head so the right panel is in the very first paint, and switchTab keeps the .active class in step for the code that reads it. Both are listed: before the app's script has run there is only the attribute. */ .tab-panel { display: none; } .tab-panel.active, :root[data-route="dashboard"] #tab-dashboard, :root[data-route="learn"] #tab-learn, :root[data-route="browse"] #tab-browse, :root[data-route="review"] #tab-review { display: block; animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* A swiped tab travels: the one arriving comes the whole way in from the edge the finger pulled it from, and the one leaving goes out the other side at the same time - two pages sliding past each other, not one page appearing where the last one was. The leaving page is taken out of the flow for those few frames so the two can overlap without the page growing. Anyone who has asked for less motion gets neither. */ @keyframes slideInFromLeft { from { transform: translateX(-100%); opacity: 0.35; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInFromRight { from { transform: translateX(100%); opacity: 0.35; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutToRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0.35; } } @keyframes slideOutToLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0.35; } } /* !important because the rule that reveals a tab is written against its id (:root[data-route="learn"] #tab-learn) so the right panel is painted before any script runs - and an id beats any number of classes, so its fadeIn was quietly winning over this and the arriving page never moved. */ .tab-panel.active.slide-from-left { animation: slideInFromLeft .28s cubic-bezier(.22,.61,.36,1) !important; } .tab-panel.active.slide-from-right { animation: slideInFromRight .28s cubic-bezier(.22,.61,.36,1) !important; } /* Still on screen, no longer in the flow: same box it occupied a frame ago (main's padding is 20px, so the inset matches it). */ .tab-panel.leaving { display: block; position: absolute; top: 20px; inset-inline: 20px; pointer-events: none; } .tab-panel.leaving.leave-to-right { animation: slideOutToRight .28s cubic-bezier(.22,.61,.36,1) forwards; } .tab-panel.leaving.leave-to-left { animation: slideOutToLeft .28s cubic-bezier(.22,.61,.36,1) forwards; } @media (prefers-reduced-motion: reduce) { .tab-panel.active, .tab-panel.active.slide-from-left, .tab-panel.active.slide-from-right { animation: none !important; } .tab-panel.leaving { display: none; } } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow); } /* ---------- Ornament that follows the chosen background/theme ---------- Extends the vocabulary the ayah box already uses (an inset gold hairline and gold corner brackets) out to the cards, so picking a decorative background or the embroidered theme changes the app's whole frame rather than only what shows between the cards. Deliberately escalating: the plain choices stay bare, a decorative background adds one hairline, and the embroidered theme - the ornate one by definition - also gets the corners, like a Mushaf cover. Nothing here is louder than a hairline. */ :root[data-bg="geometric-gold"] .panel, :root[data-bg="stars-scatter"] .panel, :root[data-theme="embroidered"] .panel { outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: -6px; } :root[data-theme="embroidered"] .panel { position: relative; } :root[data-theme="embroidered"] .panel::before, :root[data-theme="embroidered"] .panel::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid var(--accent); opacity: 0.5; pointer-events: none; } :root[data-theme="embroidered"] .panel::before { top: 9px; right: 9px; border-left: none; border-bottom: none; } :root[data-theme="embroidered"] .panel::after { bottom: 9px; left: 9px; border-right: none; border-top: none; } :root[data-theme="embroidered"] .app-header { border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .panel h2 { font-size: 1.05rem; margin-bottom: 4px; } .muted { color: var(--muted); font-size: 0.85rem; } .ornament { text-align: center; color: var(--accent); font-size: 1.3rem; opacity: 0.6; margin: 4px 0 18px; } /* ---------- Daily challenge card ---------- */ .challenge-card { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: var(--radius); padding: 20px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; /* Shadow in the theme's own colour, not the default theme's green - it was casting a teal shadow under a maroon card. */ box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); position: relative; overflow: hidden; } .challenge-card::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 14px 14px; pointer-events: none; } .challenge-text h2 { font-size: 1.1rem; margin-bottom: 6px; } .challenge-text p { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.85rem; max-width: 480px; } .btn.accent { background: var(--accent); border-color: var(--accent); color: #201e17; font-weight: 700; white-space: nowrap; } @media (hover: hover) { .btn.accent:hover { background: var(--accent-light); } } /* Second action on the challenge card's dark green: readable there without competing with the gold primary next to it. */ /* Two equal columns rather than a wrapping row: at the labels' old length the second button dropped to its own line and the pair read as one primary action with an afterthought under it. */ .challenge-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .challenge-actions .btn { padding-inline: 10px; white-space: nowrap; } .btn.challenge-secondary { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45); color: #fff; white-space: nowrap; } @media (hover: hover) { .btn.challenge-secondary:hover { background: rgba(255,255,255,0.24); } } /* Finished for today. It was a fixed green, which wore the wrong colour in every theme but the default one - and the card already says it is done in words. So it keeps the theme's own gradient and turns it round instead: the same card, settled. */ .challenge-card.done { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); } /* First run. Someone who has memorized nothing was being shown the whole dashboard - four zeros, an empty plan, an empty progress bar, an empty Mushaf map, a 0/5 ring, a commitment form - about seven screens of it, with the one button that actually starts anything sitting at the very bottom. Until there is a single ayah, every card that only means something once there is data is out of the way, and the starting card is first instead of last. The moment an ayah exists they all come back. */ :root[data-first-run="true"] .needs-data { display: none !important; } #onboarding-panel { display: none; } /* Both routes to the same thing: the attribute so it is there in the first frame, the class because renderDashboard is the authority once it runs. */ #onboarding-panel.show, :root[data-first-run="true"] #onboarding-panel { display: block; text-align: center; } /* It is the first thing on the screen now, so it carries the weight the stats grid used to. */ .onboarding-panel h2 { font-size: 1.35rem; margin-bottom: 6px; } .onboarding-panel .onboarding-start { width: 100%; margin-top: 14px; padding-block: 13px; font-size: 1.05rem; } .onboarding-alt { margin-top: 12px; font-size: 0.85rem; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } @media (max-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow); transition: transform .15s ease; } @media (hover: hover) { .stat-card:hover { transform: translateY(-2px); } } .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--primary); } .stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; } /* Second line on a stat card: the part of the number that isn't being asked of today (a deferred review backlog) or the honest weekly count behind a forgiven streak. */ .stat-note { margin-top: 6px; font-size: 0.72rem; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 999px; padding: 2px 8px; display: inline-block; } .plan-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .plan-surah-group { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; } .plan-surah-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 700; user-select: none; } .plan-surah-summary::-webkit-details-marker { display: none; } .plan-surah-summary::before { content: "◀"; font-size: 0.7rem; color: var(--accent); transition: transform .2s ease; order: 2; margin-inline-start: auto; } .plan-surah-group[open] .plan-surah-summary::before { transform: rotate(-90deg); } .plan-surah-name { color: var(--primary); } .plan-surah-meta { font-size: 0.78rem; font-weight: 400; color: var(--muted); display: flex; align-items: center; gap: 6px; } .plan-surah-items { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; } .plan-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); transition: transform .15s ease, border-color .15s ease; } @media (hover: hover) { .plan-item.due-now:hover { transform: translateY(-1px); } } .plan-item .ref { font-weight: 700; } .plan-item.due-now { cursor: pointer; border-color: var(--primary); } .plan-item .btn-review-now { flex-shrink: 0; font-size: 0.75rem; padding: 7px 12px; background: var(--primary); color: #fff; border-color: var(--primary); } /* The ayah on its own line, the ✕ beside it; everything that describes the ayah on the line below. */ .plan-item-text { display: flex; align-items: center; gap: 8px; } .plan-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } .plan-item-meta .ref { margin-inline-end: auto; } .plan-item .snippet { font-family: var(--ayah-font-family, 'Amiri', serif); font-size: 1.1rem; line-height: 2; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } /* Tinted from the theme's own surface, never a fixed pale colour: a badge painted #f6dede keeps that colour under a dark theme, and the text on it does not. */ /* The label keeps its hue but is pulled toward the theme's own text colour, which is what makes it land on the right side of the surface it sits on in every theme: an amber that reads on cream is invisible on maroon, and the theme's maroon primary is invisible on the maroon theme's own surface. */ .badge.due { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: color-mix(in srgb, var(--danger) 50%, var(--text)); } .badge.new { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: color-mix(in srgb, var(--primary) 50%, var(--text)); } .badge.scheduled { background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: color-mix(in srgb, var(--good) 50%, var(--text)); } .badge.temp { background: var(--border); color: var(--muted); } .icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--muted); } @media (hover: hover) { .icon-btn:hover { color: var(--danger); } } .surah-progress-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .surah-progress-row { display: flex; align-items: center; gap: 10px; } .surah-progress-row .name { width: 140px; flex-shrink: 0; font-size: 0.9rem; } .progress-bar { flex: 1; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: var(--primary); width: 0%; transition: width .3s ease; } .surah-progress-row .pct { width: 48px; text-align: end; font-size: 0.8rem; color: var(--muted); } .add-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin-top: 12px; } .add-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); } .add-form input, .add-form select { font-family: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.95rem; } .add-form input[type=number] { width: 90px; } .add-form label.grow { flex: 1; min-width: 200px; } .add-form input[type=text] { min-width: 160px; } /* Searchable surah combobox - replaces a native