/* ========================================================================== NUQT — the design system One source of truth for the web app. The Android app mirrors these exact tokens in ui/design/. Spec: NUQT-Android/Docs/NUQT_UI_MASTERPIECE_PLAN.md Public API, both set on : data-ground = "day" | "night" | "lamp" the reading surface data-letter = "modern" | "carved" the Latin lettering ========================================================================== */ /* --- faces ---------------------------------------------------------------- */ @font-face{font-family:"Newsreader";src:url("../fonts/newsreader.woff2") format("woff2"); font-weight:400 500;font-style:normal;font-display:swap} @font-face{font-family:"Marcellus";src:url("../fonts/marcellus.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans.woff2") format("woff2"); font-weight:400 600;font-style:normal;font-display:swap} @font-face{font-family:"Uthman";src:url("../fonts/UthmanTN1B-Regular.ttf") format("truetype"); font-display:block} @font-face{font-family:"AmiriQuran";src:url("../fonts/AmiriQuran-Regular.ttf") format("truetype"); font-display:block} @font-face{font-family:"Scheherazade";src:url("../fonts/ScheherazadeNew-Regular.ttf") format("truetype"); font-display:block} /* ========================================================================== 1. PIGMENTS — the four materials of Qur'anic illumination. A colour outside this set is a bug, not a choice. ========================================================================== */ :root{ --ink-raw:#17130E; /* iron-gall — warm near-black, never #000 */ --gold-lo:#8A6420; --gold:#D4A544; --gold-hi:#F7E9C2; --lapis:#1E3A6E; --vermilion:#A8322A; --mihrab:#0A5D4B; /* gold is NEVER flat — always the three-tone leaf at 20deg */ --leaf:linear-gradient(112deg,var(--gold-lo) 0%,var(--gold) 42%, var(--gold-hi) 53%,var(--gold) 64%,var(--gold-lo) 100%); /* --- shape ------------------------------------------------------------- */ --r-xs:4px; --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px; /* --- space ------------------------------------------------------------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --folio:clamp(20px,4vw,32px); --measure:66ch; /* --- motion ------------------------------------------------------------ */ --t-quick:120ms; --t-standard:260ms; --t-expressive:420ms; --t-ceremonial:700ms; --ease:cubic-bezier(.20,0,0,1); --ease-emph:cubic-bezier(.05,.70,.10,1); /* --- lettering (switched by data-letter) ------------------------------- */ --display:"Newsreader",Georgia,"Times New Roman",serif; --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:ui-monospace,"Cascadia Code",Consolas,monospace; --mushaf:"Uthman","AmiriQuran","Scheherazade",serif; } :root[data-letter="carved"]{ --display:"Marcellus",Georgia,"Times New Roman",serif; } /* ========================================================================== 2. THE THREE GROUNDS Each is a designed surface with its own ink and its own gold — not a colour swap. Day is the default and must be the more beautiful one. ========================================================================== */ :root,:root[data-ground="day"]{ --bg:#EFE6D2; /* vellum — the app is never white */ --surface:#F7F1E3; /* a real value step above the ground */ --surface-2:#FBF7EC; --ink:#17130E; --ink-soft:#6B6252; --ink-faint:#9A9080; --gold-ui:#B4862E; /* gold, legible as text on vellum */ --rule:rgba(23,19,14,.14); --grain:.055; --hi-inset:rgba(255,255,255,.62); --sh-1:0 1px 2px rgba(42,31,14,.06),0 1px 1px rgba(42,31,14,.04); --sh-2:0 2px 6px rgba(42,31,14,.08),0 1px 2px rgba(42,31,14,.05); --sh-3:0 8px 24px rgba(42,31,14,.11),0 2px 6px rgba(42,31,14,.06); } :root[data-ground="night"]{ --bg:#0B1512; --surface:#12201B; --surface-2:#172A23; --ink:#E8E2D4; /* warm off-white — pure white shimmers at night */ --ink-soft:rgba(232,226,212,.62); --ink-faint:rgba(232,226,212,.4); --gold-ui:#C9A24E; --rule:rgba(232,226,212,.14); --grain:0; --hi-inset:rgba(255,255,255,.06); --sh-1:0 1px 2px rgba(0,0,0,.34); --sh-2:0 2px 8px rgba(0,0,0,.4); --sh-3:0 10px 28px rgba(0,0,0,.48); } :root[data-ground="lamp"]{ --bg:#241C14; /* sepia — for late reading, no blue light */ --surface:#2E241A; --surface-2:#382C20; --ink:#E6D3AC; --ink-soft:rgba(230,211,172,.66); --ink-faint:rgba(230,211,172,.42); --gold-ui:#C9A24E; --rule:rgba(230,211,172,.16); --grain:0; --hi-inset:rgba(255,235,190,.07); --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 2px 8px rgba(0,0,0,.36); --sh-3:0 10px 28px rgba(0,0,0,.44); } /* Follow the system only until the reader chooses for themselves. */ @media (prefers-color-scheme:dark){ :root:not([data-ground="day"]):not([data-ground="lamp"]){ --bg:#0B1512; --surface:#12201B; --surface-2:#172A23; --ink:#E8E2D4; --ink-soft:rgba(232,226,212,.62); --ink-faint:rgba(232,226,212,.4); --gold-ui:#C9A24E; --rule:rgba(232,226,212,.14); --grain:0; --hi-inset:rgba(255,255,255,.06); --sh-1:0 1px 2px rgba(0,0,0,.34); --sh-2:0 2px 8px rgba(0,0,0,.4); --sh-3:0 10px 28px rgba(0,0,0,.48); } } /* ========================================================================== 3. GROUND + GRAIN ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background var(--t-standard) var(--ease),color var(--t-standard) var(--ease); } /* vellum grain — the cheapest luxury in the system. Day only. */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain); background-image: radial-gradient(circle at 12% 18%,var(--gold-lo) 0 1px,transparent 1px), radial-gradient(circle at 63% 44%,var(--ink-raw) 0 1px,transparent 1px), radial-gradient(circle at 34% 77%,var(--gold-lo) 0 1px,transparent 1px); background-size:37px 37px,53px 53px,71px 71px; transition:opacity var(--t-standard) var(--ease); } /* ========================================================================== 4. TYPE — one weight for every large size. Hierarchy is size and colour, never bold. Arabic never shares metrics with Latin. ========================================================================== */ .d-lg{font:400 clamp(38px,6vw,61px)/1.06 var(--display);letter-spacing:-.022em;text-wrap:balance;margin:0} .d-md{font:400 clamp(31px,4.4vw,49px)/1.08 var(--display);letter-spacing:-.020em;text-wrap:balance;margin:0} .d-sm{font:400 clamp(26px,3.4vw,39px)/1.10 var(--display);letter-spacing:-.018em;text-wrap:balance;margin:0} .h-lg{font:500 31px/1.18 var(--display);letter-spacing:-.015em;margin:0} .h-md{font:500 25px/1.22 var(--display);letter-spacing:-.012em;margin:0} .h-sm{font:500 20px/1.30 var(--display);letter-spacing:-.008em;margin:0} .t-lg{font:600 20px/1.30 var(--ui);letter-spacing:-.005em;margin:0} .t-md{font:600 16px/1.38 var(--ui);margin:0} .b-lg{font:400 16px/1.55 var(--ui);margin:0} .b-md{font:400 14px/1.52 var(--ui);margin:0} .label{font:600 12px/1.30 var(--ui);letter-spacing:.10em;text-transform:uppercase; color:var(--gold-ui);margin:0} .caption{font:400 11px/1.45 var(--ui);letter-spacing:.02em;color:var(--ink-soft);margin:0} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .soft{color:var(--ink-soft)} .measure{max-width:var(--measure)} /* Arabic — leading locked at the mushaf ratio, user-scalable size. */ .ar{ font-family:var(--mushaf); direction:rtl; line-height:1.9; font-size:var(--ar-size,32px); } .ar-lg{--ar-size:clamp(30px,5vw,44px)} .ar-sm{--ar-size:20px} /* gold as text */ .gold-text{ background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent; } /* ========================================================================== 5. SURFACES — light, not outlines. Every raised surface gets a top inner highlight and a WARM shadow. A black shadow is a rejection. ========================================================================== */ .card{ position:relative; background:var(--surface); border-radius:var(--r-md); padding:var(--s-4); box-shadow:var(--sh-2),inset 0 1px 0 var(--hi-inset); transition:box-shadow var(--t-standard) var(--ease),transform var(--t-standard) var(--ease); } .card--flat{box-shadow:none;background:transparent} a.card,button.card{display:block;text-align:inherit;border:0;width:100%;cursor:pointer;color:inherit; font:inherit} a.card:hover,button.card:hover{box-shadow:var(--sh-3),inset 0 1px 0 var(--hi-inset); transform:translateY(-1px)} /* The jadwal — a ruled frame whose rule stops short of every corner. Drawn with four gradient edges, so it stays true gold leaf. */ .card--jadwal::after{ content:"";position:absolute;inset:5px;border-radius:calc(var(--r-md) - 5px); pointer-events:none; background: linear-gradient(90deg,transparent 0 14px,var(--gold) 14px calc(100% - 14px),transparent calc(100% - 14px)) top/100% 1.4px no-repeat, linear-gradient(90deg,transparent 0 14px,var(--gold) 14px calc(100% - 14px),transparent calc(100% - 14px)) bottom/100% 1.4px no-repeat, linear-gradient(180deg,transparent 0 14px,var(--gold) 14px calc(100% - 14px),transparent calc(100% - 14px)) left/1.4px 100% no-repeat, linear-gradient(180deg,transparent 0 14px,var(--gold) 14px calc(100% - 14px),transparent calc(100% - 14px)) right/1.4px 100% no-repeat; opacity:.72; } /* The specular sweep — light travelling over leaf. Permitted on the hero, a completed verse, a finished juz and a streak. Nowhere else. */ .sweepable{position:relative;overflow:hidden} .sweepable::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(112deg,transparent 38%,rgba(247,233,194,.17) 48%,transparent 58%); transform:translateX(-115%); } .sweepable:hover::before,.sweepable:focus-visible::before{ animation:nuqt-sweep var(--t-ceremonial) var(--ease) 1; } @keyframes nuqt-sweep{ to{ transform:translateX(115%) } } /* ========================================================================== 6. LAYOUT ========================================================================== */ .wrap{max-width:1080px;margin:0 auto;padding-inline:var(--folio);position:relative;z-index:1} .stack{display:flex;flex-direction:column} .stack-2{gap:var(--s-2)} .stack-3{gap:var(--s-3)} .stack-4{gap:var(--s-4)} .stack-5{gap:var(--s-5)} .stack-6{gap:var(--s-6)} .stack-7{gap:var(--s-7)} .row{display:flex;align-items:center;gap:var(--s-3)} .grid{display:grid;gap:var(--s-4)} .grid-auto{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} /* Side-scrolling rows fade at the edge — never sliced by the viewport. */ .rail{ display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory; padding-block:var(--s-1); -webkit-mask-image:linear-gradient(90deg,#000 0 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 0 88%,transparent 100%); } .rail>*{scroll-snap-align:start;flex:0 0 auto} .rail::-webkit-scrollbar{height:0} /* ========================================================================== 7. CONTROLS ========================================================================== */ .btn{ font:600 14px/1 var(--ui);letter-spacing:.01em; padding:13px 20px;border-radius:var(--r-pill);border:0;cursor:pointer; min-height:48px;display:inline-flex;align-items:center;gap:var(--s-2); background:var(--mihrab);color:#F7F1E3; transition:filter var(--t-quick) var(--ease),transform var(--t-quick) var(--ease); } .btn:hover{filter:brightness(1.12)} .btn:active{transform:scale(.985)} .btn--quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)} .btn--gold{background:var(--leaf);color:#17130E} .seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill); background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)} .seg button{ font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase; padding:10px 15px;border-radius:var(--r-pill);border:0;background:transparent; color:var(--ink-soft);cursor:pointer;min-height:40px; transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease); } .seg button[aria-pressed="true"]{background:var(--mihrab);color:#F7F1E3} :root[data-ground="night"] .seg button[aria-pressed="true"], :root[data-ground="lamp"] .seg button[aria-pressed="true"]{background:var(--gold-ui);color:#17130E} /* ========================================================================== 8. THE READING SURFACE ========================================================================== */ .ayah{ padding:var(--s-4) 0;border-bottom:1px solid var(--rule); transition:background var(--t-standard) var(--ease); } .ayah:last-child{border-bottom:0} .ayah[data-playing="true"]{background:linear-gradient(90deg, rgba(212,165,68,.14),rgba(212,165,68,.04) 60%,transparent)} /* a word you can touch to hear */ .w{ cursor:pointer;border-radius:var(--r-xs);padding:0 2px; transition:color var(--t-quick) var(--ease),background var(--t-quick) var(--ease); } .w:hover{color:var(--gold-ui)} .w[data-active="true"]{color:var(--gold-ui);background:rgba(212,165,68,.13)} /* Tajweed is a fine pigment underline and a tint — never a block of highlighter. */ .tj{border-bottom:1.5px solid currentColor;padding-bottom:1px} .tj--izhar{color:var(--lapis)} .tj--idgham{color:var(--vermilion)} .tj--ikhfa{color:var(--mihrab)} .tj--qalqalah{color:var(--gold-ui)} .tj--madd{color:#0D6E63} .tj--iqlab{color:#7A3E9D} :focus-visible{outline:2px solid var(--gold-ui);outline-offset:3px;border-radius:var(--r-xs)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} }