/* ============================================================ Niyat Library — shared component styles. Base tokens (--bg, --cream, --emerald, --gold, --line, --serif, --sans, --bg-card, --bg-deep, --bg-elevated, --line-strong) come from /assets/styles.css — link that FIRST, then this file. Arabic display uses "Amiri" (load via Google Fonts in ): --cream = primary ink, --cream-dim = secondary, --cream-muted = tertiary. ============================================================ */ :root{ --arabic:"Amiri","Scheherazade New",var(--serif); --lib-container:1080px; } .lib-wrap{max-width:var(--lib-container);margin:0 auto;padding:0 24px;} .eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;} .lib-display{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,50px);line-height:1.08;letter-spacing:-.02em;color:var(--emerald);text-wrap:balance;} .lib-sec{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--emerald);letter-spacing:-.01em;} .lib-lead{font-size:18px;color:var(--cream-dim);max-width:62ch;line-height:1.6;} .gold-rule{display:inline-block;width:38px;height:2px;background:var(--gold);} /* ---- HUB ---- */ .hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} @media(max-width:720px){.hub-grid{grid-template-columns:1fr}} .hub-card{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:18px;padding:30px;text-decoration:none;color:inherit;overflow:hidden;transition:.22s;display:flex;flex-direction:column;gap:12px;min-height:210px;} .hub-card:hover{border-color:var(--gold-soft);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(13,40,24,.4);} .hub-card .k{font-family:var(--serif);font-size:15px;color:var(--gold);} .hub-card h3{font-family:var(--serif);font-weight:500;font-size:28px;color:var(--emerald);letter-spacing:-.01em;} .hub-card p{font-size:15px;color:var(--cream-dim);} .hub-card .go{margin-top:auto;font-size:14px;font-weight:600;color:var(--emerald);display:inline-flex;align-items:center;gap:7px;} .hub-card .arname{position:absolute;top:22px;right:26px;font-family:var(--arabic);font-size:34px;color:var(--line-strong);opacity:.5;} .stat-row{display:flex;gap:34px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);} .stat b{font-family:var(--serif);font-size:30px;color:var(--emerald);font-weight:500;display:block;line-height:1;} .stat span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-muted);} .chip-row{display:flex;flex-wrap:wrap;gap:10px;} .chip{font-size:13.5px;color:var(--cream-dim);background:var(--bg-elevated);border:1px solid var(--line);padding:8px 15px;border-radius:100px;text-decoration:none;transition:.16s;} .chip:hover{border-color:var(--gold-soft);color:var(--emerald);} .lib-banner{background:var(--emerald);color:var(--bg);border-radius:16px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .lib-banner p{font-family:var(--serif);font-size:19px;max-width:46ch;} .lib-banner a{background:var(--gold);color:#1a1206;font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px;text-decoration:none;white-space:nowrap;} /* ---- QURAN READER ---- */ .reader-head{padding:36px 0 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;} .reader-head .arabic-title{font-family:var(--arabic);font-size:40px;color:var(--emerald);line-height:1;} .reader-head .rmeta{font-size:13.5px;color:var(--cream-muted);margin-top:8px;} .reader-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .rc{font-size:13px;font-weight:600;color:var(--cream-dim);border:1px solid var(--line-strong);background:var(--bg-card);padding:8px 13px;border-radius:9px;cursor:pointer;transition:.16s;display:inline-flex;gap:7px;align-items:center;font-family:var(--sans);} .rc:hover{border-color:var(--gold-soft);color:var(--emerald);} .rc[aria-pressed="true"]{background:var(--emerald);color:var(--bg);border-color:var(--emerald);} .rc.play[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1206;} .bism{text-align:center;font-family:var(--arabic);font-size:30px;color:var(--gold);padding:34px 0 26px;} /* NOTE: reader verse rows use .q-ayah (NOT .ayah) — /assets/styles.css already defines .ayah as the homepage "featured verse" hero with a dark olive-photo background; reusing that name leaks the dark bg onto every verse. Keep namespaced. */ .q-ayah{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:18px;transition:background .3s;border-radius:12px;scroll-margin-top:80px;background:none;} .q-ayah.reciting{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 12%,transparent),transparent);} .q-ayah .num{width:34px;height:34px;border:1px solid var(--gold-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--gold);font-family:var(--sans);flex-shrink:0;} .ar{font-family:var(--arabic);font-size:32px;line-height:2.05;text-align:right;direction:rtl;color:var(--cream);} .ar .w{cursor:pointer;padding:0 2px;border-radius:5px;transition:.15s;} .ar .w:hover{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--emerald);} .ar .w.lit{background:color-mix(in srgb,var(--gold) 28%,transparent);} .wbw{display:none;flex-wrap:wrap;gap:14px 20px;direction:rtl;margin-top:10px;} .wbw.on{display:flex;} .wbw .wu{text-align:center;direction:rtl;} .wbw .wu .a{font-family:var(--arabic);font-size:24px;color:var(--cream);display:block;} .wbw .wu .t{font-size:11.5px;color:var(--gold);font-style:italic;direction:ltr;display:block;margin-top:2px;} .wbw .wu .g{font-size:12px;color:var(--cream-muted);direction:ltr;display:block;} .tr{font-size:17px;color:var(--cream-dim);margin-top:14px;font-family:var(--serif);line-height:1.7;max-width:60ch;} .verse-tools{margin-top:12px;display:flex;gap:16px;flex-wrap:wrap;} .verse-tools button,.verse-tools a{font-size:12px;color:var(--cream-muted);background:none;border:none;cursor:pointer;display:inline-flex;gap:5px;align-items:center;letter-spacing:.02em;text-decoration:none;} .verse-tools button:hover,.verse-tools a:hover{color:var(--gold);} /* surah index list */ .surah-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;} .surah-item{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:inherit;transition:.16s;} .surah-item:hover{border-color:var(--gold-soft);} .surah-item .idx{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold);border:1px solid var(--gold-soft);border-radius:8px;font-family:var(--sans);} .surah-item .nm{font-weight:600;color:var(--emerald);} .surah-item .sub{font-size:12.5px;color:var(--cream-muted);} .surah-item .arn{margin-left:auto;font-family:var(--arabic);font-size:22px;color:var(--cream-dim);} /* ---- DUA LIBRARY ---- */ .lib-search{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--line-strong);border-radius:12px;padding:12px 16px;max-width:440px;} .lib-search input{border:none;background:none;font-family:var(--sans);font-size:15px;color:var(--cream);width:100%;outline:none;} .filters{display:flex;gap:8px;flex-wrap:wrap;} .fbtn{font-size:13px;font-weight:500;color:var(--cream-dim);background:var(--bg-elevated);border:1px solid var(--line);padding:7px 14px;border-radius:100px;cursor:pointer;transition:.16s;font-family:var(--sans);} .fbtn[aria-pressed="true"]{background:var(--emerald);color:var(--bg);border-color:var(--emerald);} .dua-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} @media(max-width:720px){.dua-grid{grid-template-columns:1fr}} .dua-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:24px;transition:.2s;text-decoration:none;color:inherit;display:block;} .dua-card:hover{border-color:var(--gold-soft);box-shadow:0 14px 30px -20px rgba(13,40,24,.35);} .dua-card .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;} .dua-card h3{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--emerald);margin:8px 0 12px;letter-spacing:-.01em;} .dua-card .darab{font-family:var(--arabic);font-size:23px;line-height:1.9;margin:0;direction:rtl;text-align:right;color:var(--cream);} .dua-card .tl{font-size:13px;font-style:italic;color:var(--gold);margin-top:8px;} .dua-card .en{font-size:14.5px;color:var(--cream-dim);margin-top:8px;font-family:var(--serif);} .dua-card .src{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--cream-muted);display:flex;align-items:center;gap:7px;} .src .seal{color:var(--gold);}