/* ===================================================================== Muslim 313 — site styles THEME: light is the default. Dark is opt-in via the header toggle, which stamps data-theme="dark" on and persists in localStorage. To follow the operating system instead, see the commented block below. ===================================================================== */ :root { color-scheme: light; --green: #0c7c59; --green-dark: #0a6448; --green-light: #16a085; --gold: #b8860b; --bg: #f7faf8; --bg-alt: #eef4f1; --surface: #ffffff; --surface-2: #f3f7f5; --text: #16211c; --text-soft: #3d4d46; --muted: #64766d; --border: #dfe8e3; --shadow-sm: 0 1px 3px rgba(16,33,28,.06); --shadow: 0 4px 16px rgba(16,33,28,.07); --shadow-lg: 0 18px 40px rgba(16,33,28,.16); --radius: 16px; --maxw: 1200px; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1512; --bg-alt: #141c18; --surface: #18211d; --surface-2: #1e2823; --text: #e9f0ec; --text-soft: #c2d1c9; --muted: #93a89d; --border: #27342d; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 18px 40px rgba(0,0,0,.6); } /* To follow the OS instead of defaulting to light, uncomment this: @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... same tokens as [data-theme="dark"] ... } } */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* height:auto is required — the width/height HTML attributes on act as presentational hints, so without it the attribute height wins over aspect-ratio and the image renders stretched. */ img { max-width: 100%; height: auto; display: block; } a { color: var(--green); } .container { width: min(92%, var(--maxw)); margin-inline: auto; } .skip-link { position: absolute; left: -9999px; background: var(--green); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; z-index: 100; } .skip-link:focus { left: 0; top: 0; } :focus-visible { outline: 3px solid var(--green-light); outline-offset: 3px; border-radius: 4px; } /* ---- Bilingual labels ---------------------------------------------- */ /* Titles arrive as one "English Urdu" string and are split server-side; the two scripts are then rendered as separate, differently-styled lines. */ .t-ur { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; line-height: 1.95; display: block; direction: rtl; text-align: right; } .t-en { font-family: 'Poppins', sans-serif; display: block; direction: ltr; /* Inherits its container's alignment. Pinning this to `left` while the Urdu sits right is what opened a gap down the middle of every row — the two lines of one label must share an edge. */ text-align: inherit; } /* Two lines of one label: English on top aligned left, Urdu beneath aligned right. Each line takes the full width so the two opposite edges read as a deliberate pair rather than a wrap. */ .label-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; width: 100%; } .label-stack .t-en { text-align: left; } .label-stack .t-ur { text-align: right; } .label-stack .t-ur { font-size: 1.42rem; color: var(--text); } .label-stack .t-en { font-size: 1rem; color: var(--muted); font-weight: 500; letter-spacing: .01em; } .label-stack.solo .t-ur { font-size: 1.35rem; } .label-stack.solo .t-en { font-size: 1.06rem; color: var(--text); font-weight: 600; } /* ---- Buttons -------------------------------------------------------- */ .btn { display: inline-block; padding: 13px 26px; background: var(--green); color: #fff; text-decoration: none; border-radius: 30px; font-weight: 600; transition: background .18s ease, transform .18s ease; } .btn:hover { background: var(--green-dark); transform: translateY(-1px); } .btn-sm { padding: 9px 18px; font-size: .88rem; } .btn-ghost { background: transparent; color: var(--green); border: 1.5px solid var(--green); } .btn-ghost:hover { background: var(--green); color: #fff; } /* ---- Header --------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; } .brand img { border-radius: 10px; } .header-actions { display: flex; align-items: center; gap: 10px; } .site-nav { display: flex; align-items: center; gap: 20px; } .site-nav a { color: var(--text-soft); text-decoration: none; font-weight: 500; font-size: .93rem; } .site-nav a:hover { color: var(--green); } .site-nav a.btn { color: #fff; } /* Theme toggle */ .theme-toggle { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; padding: 0; transition: background .18s ease, color .18s ease, border-color .18s ease; } .theme-toggle:hover { background: var(--green); color: #fff; border-color: var(--green); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .i-moon { display: none; } :root[data-theme="dark"] .theme-toggle .i-moon { display: block; } :root[data-theme="dark"] .theme-toggle .i-sun { display: none; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; } /* ---- Hero ----------------------------------------------------------- */ .hero { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 66px 0; flex-wrap: wrap; } .hero-text { max-width: 560px; flex: 1 1 380px; } .hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.2; margin: 0 0 12px; } .hero .lead { font-size: 1.08rem; color: var(--text-soft); margin: 0 0 8px; } .hero p { color: var(--muted); } .logo-frame { width: 90px; height: 90px; border-radius: 24px; padding: 10px; background: linear-gradient(135deg, var(--green), var(--green-light)); box-shadow: 0 8px 22px rgba(12,124,89,.28); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; } .logo-frame img { width: 100%; border-radius: 16px; background: #fff; } .phone { width: 260px; padding: 10px; background: #111; border-radius: 36px; box-shadow: var(--shadow-lg); position: relative; } .phone::before { content: ""; width: 110px; height: 18px; background: #111; border-radius: 0 0 18px 18px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; } .phone img { width: 100%; aspect-ratio: 333 / 592; object-fit: cover; border-radius: 26px; } .phone-sm { width: 170px; padding: 7px; border-radius: 26px; } .phone-sm::before { width: 70px; height: 12px; } .phone-sm img { border-radius: 20px; } /* ---- Sections ------------------------------------------------------- */ .section { padding: 58px 0; } .section h2 { text-align: center; font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 10px; } .section .sub { text-align: center; color: var(--muted); margin: 0 0 38px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .card { background: var(--surface); padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .card h3 { margin: 0 0 8px; font-size: 1.05rem; } .card p { margin: 0; color: var(--muted); font-size: .92rem; } /* Module promo cards (Nisaab / Khutbaat) */ .module-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .module-card:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); } .module-card .mod-icon { width: 76px; height: 76px; object-fit: contain; } .module-card .t-ur { font-size: 1.4rem; text-align: start; } .module-card .t-en { font-size: .95rem; font-weight: 600; color: var(--text); } .screenshot-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } /* ---- Homepage library block ------------------------------------------ */ /* Sits second, directly under the hero: the library is the reason to visit the site rather than just install the app, so it leads the page. */ .library-focus { padding-top: 10px; } .lib-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; } .lib-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 16px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .lib-card:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); } .lc-head { display: flex; align-items: center; gap: 16px; } .lc-icon { width: 78px; height: 78px; flex: 0 0 78px; object-fit: contain; } .lc-names { min-width: 0; } .lc-ur { font-size: 1.7rem; line-height: 1.6; color: var(--text); text-align: left; } .lc-en { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } .lc-stat { margin: 4px 0 0; font-size: .84rem; font-weight: 600; color: var(--green); } .lc-desc { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.65; } .lc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .lc-links li + li { border-top: 1px solid var(--border); } .lc-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text-soft); } .lc-links a:hover { background: var(--surface-2); color: var(--green); } .lc-links .t-ur { font-size: 1rem; line-height: 1.7; text-align: right; flex: 1 1 auto; } .lc-n { flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--green); background: var(--bg); border: 1px solid var(--border); padding: 2px 8px; border-radius: 12px; } .lc-cta { margin-top: auto; align-self: flex-start; } .lib-search { max-width: 560px; margin: 30px auto 0; } .lib-search input { flex: 1 1 auto; font-size: .98rem; padding: 13px 20px; } .lib-search button { padding: 13px 26px; } @media (max-width: 520px) { .lib-card { padding: 20px 16px; } .lc-icon { width: 60px; height: 60px; flex-basis: 60px; } .lc-ur { font-size: 1.45rem; } } /* ---- 3D coverflow ----------------------------------------------------- */ /* Before JS runs the items are a plain horizontal scroller, so the section is usable with JavaScript disabled. .is-ready switches on the 3D positioning. */ .c3d { position: relative; margin-top: 8px; } .c3d-stage { display: flex; gap: 18px; overflow-x: auto; padding: 10px 4px 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .c3d-item { flex: 0 0 170px; scroll-snap-align: center; text-decoration: none; color: inherit; } .c3d-cover { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow); } .c3d-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .c3d-nocover { display: grid; place-items: center; } .c3d-nocover::after { content: "📕"; font-size: 2rem; opacity: .5; } .c3d-label { display: flex; flex-direction: column; gap: 0; margin-top: 10px; text-align: center; } .c3d-label .t-en { font-size: .82rem; font-weight: 600; color: var(--text); text-align: center; } .c3d-label .t-ur { font-size: .95rem; line-height: 1.7; text-align: center; color: var(--muted); } .c3d-nav { display: none; } .c3d-foot { text-align: center; margin-top: 16px; } /* ---- once JS takes over ---- */ .c3d.is-ready { perspective: 1400px; height: 430px; overflow: hidden; } .c3d.is-ready .c3d-stage { display: block; position: absolute; inset: 0; overflow: visible; transform-style: preserve-3d; padding: 0; } .c3d.is-ready .c3d-item { position: absolute; left: 50%; top: 18px; width: 210px; margin-left: -105px; transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, filter .55s ease; will-change: transform, opacity; } .c3d.is-ready .c3d-cover { box-shadow: 0 22px 45px rgba(0,0,0,.32); } :root[data-theme="dark"] .c3d.is-ready .c3d-cover { box-shadow: 0 22px 45px rgba(0,0,0,.65); } .c3d.is-ready .c3d-label { opacity: 0; transition: opacity .35s ease; pointer-events: none; } .c3d.is-ready .c3d-item.is-active .c3d-label { opacity: 1; } .c3d.is-ready .c3d-item:not(.is-active) { filter: brightness(.72) saturate(.85); cursor: pointer; } .c3d.is-ready .c3d-item.is-hidden { opacity: 0; pointer-events: none; } .c3d.is-ready .c3d-nav { display: grid; place-items: center; position: absolute; top: 42%; z-index: 20; width: 44px; height: 44px; padding: 0; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 50%; box-shadow: var(--shadow); transition: background .18s, color .18s, transform .18s; } .c3d.is-ready .c3d-nav:hover { background: var(--green); color: #fff; border-color: var(--green); transform: scale(1.06); } .c3d.is-ready .c3d-prev { left: 4px; } .c3d.is-ready .c3d-next { right: 4px; } .c3d-nav svg { width: 20px; height: 20px; } @media (max-width: 620px) { .c3d.is-ready { height: 380px; perspective: 1000px; } .c3d.is-ready .c3d-item { width: 160px; margin-left: -80px; } .c3d.is-ready .c3d-nav { width: 38px; height: 38px; } } /* Motion off: keep the layout, drop the animation. */ @media (prefers-reduced-motion: reduce) { .c3d.is-ready .c3d-item { transition: none; } } /* ---- CTA ------------------------------------------------------------ */ .cta { background: linear-gradient(135deg, var(--green), var(--green-light)); color: #fff; text-align: center; padding: 58px 24px; border-radius: 20px; margin: 50px auto; } .cta h2 { margin: 0 0 12px; color: #fff; } .cta p { margin: 0 0 8px; opacity: .93; } .cta .btn { background: #fff; color: var(--green); margin-top: 18px; } .cta .btn:hover { background: #eef7f3; } /* ---- App promo banner ------------------------------------------------ */ /* Sits above the breadcrumbs on every page. Ships with `hidden`, and JS reveals it unless it was previously dismissed — so a dismissed banner never flashes on screen. */ .app-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; margin: 18px 0 4px; padding: 16px 20px; border-radius: 18px; background: radial-gradient(120% 180% at 0% 0%, #16a085 0%, transparent 55%), radial-gradient(120% 180% at 100% 100%, #0a6448 0%, transparent 60%), linear-gradient(105deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; box-shadow: 0 10px 30px rgba(12,124,89,.26); isolation: isolate; } :root[data-theme="dark"] .app-banner { box-shadow: 0 10px 30px rgba(0,0,0,.5); } /* Slow diagonal sheen. */ .ab-glow { position: absolute; inset: -60% -20%; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%); animation: ab-sheen 6.5s ease-in-out infinite; } @keyframes ab-sheen { 0%, 72% { transform: translateX(-55%); } 100% { transform: translateX(55%); } } .ab-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; background: #fff; padding: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.2); } .ab-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; text-align: right; } .ab-ur { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; direction: rtl; text-align: right; line-height: 1.95; font-size: 1.22rem; font-weight: 600; color: #fff; } .ab-en { font-size: .93rem; color: rgba(255,255,255,.86); font-weight: 500; } .ab-cta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; background: #fff; color: var(--green); padding: 11px 20px; border-radius: 30px; font-weight: 700; font-size: .93rem; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .18s ease, box-shadow .18s ease; } .ab-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.26); } .ab-cta svg { width: 17px; height: 17px; } /* Sibling of the English label so the button's flex gap separates them — nesting it collapsed the space and the two ran together. */ .ab-cta-ur { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; font-size: 1.02rem; line-height: 1.7; /* Physical left/border — the logical `*-inline-start` properties resolve to the RIGHT on this element because it carries dir="rtl", which put the divider on the wrong side of the Urdu word. */ padding-left: 9px; margin-left: 1px; border-left: 1px solid rgba(12,124,89,.28); } .ab-close { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 50%; transition: background .18s ease; } .ab-close:hover { background: rgba(255,255,255,.3); } .ab-close svg { width: 15px; height: 15px; } @media (max-width: 780px) { .app-banner { flex-wrap: wrap; gap: 12px 14px; padding: 15px 16px; border-radius: 16px; } .ab-copy { flex: 1 1 100%; order: 2; } .ab-icon { order: 1; width: 42px; height: 42px; flex-basis: 42px; } .ab-close { order: 1; margin-inline-start: auto; } .ab-cta { order: 3; flex: 1 1 100%; justify-content: center; } .ab-ur { font-size: 1.12rem; } .ab-en { font-size: .87rem; } } /* ---- Library -------------------------------------------------------- */ /* row-reverse puts the module icon on the right, so the right-aligned Urdu heading sits next to it instead of across a gap. */ .page-head { display: flex; flex-direction: row-reverse; align-items: center; gap: 20px; padding: 26px 0 8px; flex-wrap: wrap; } .page-head .mod-icon { width: 68px; height: 68px; object-fit: contain; flex: 0 0 auto; } .page-head .heads { min-width: 0; flex: 1 1 320px; text-align: right; } .page-head .t-ur { font-size: clamp(1.5rem, 4.4vw, 2.15rem); margin: 0; text-align: right; } .page-head .t-en { font-size: clamp(1rem, 2.4vw, 1.18rem); color: var(--muted); font-weight: 600; margin: 0; } .page-head .t-en-h1 { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0; font-weight: 700; color: var(--text); } .bp-en-h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 16px; font-weight: 700; color: var(--text); } .page-head .count { color: var(--muted); font-size: .95rem; margin: 7px 0 0; text-align: right; } .crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .92rem; padding: 14px 0 0; color: var(--muted); } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--green); text-decoration: underline; } .crumbs .sep { opacity: .45; } .crumbs [aria-current] { color: var(--text-soft); font-weight: 600; } .crumbs .t-ur, .crumbs .t-en { display: inline; font-size: inherit; line-height: 1.6; } /* Board cards — the six syllabus boards at the Nisaab root */ .board-grid { display: grid; direction: rtl; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; padding: 26px 0 44px; } .board-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 20px; text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .board-card:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); } .board-card .logo { width: 96px; height: 96px; object-fit: contain; } .board-card .t-ur { font-size: 1.3rem; text-align: center; direction: rtl; } .board-card .t-en { font-size: .86rem; color: var(--muted); text-align: center; font-weight: 500; } .board-card .meta { font-size: .84rem; color: var(--green); font-weight: 700; margin-top: auto; padding-top: 8px; } /* Folder rows */ .folder-list { display: grid; gap: 10px; padding: 6px 0 44px; } .folder-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; background: var(--surface); border: 1px solid var(--border); /* Leading accent — a thick left border rather than a pseudo-element, so the row itself is free to stack its three lines. */ border-left: 4px solid var(--border); border-radius: 14px; padding: 15px 18px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .folder-row:hover { border-color: var(--green); transform: translateX(3px); box-shadow: var(--shadow); } .folder-row .label-stack { flex: 0 0 auto; } .folder-row .meta { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: .85rem; font-weight: 600; white-space: nowrap; align-self: flex-start; /* own line, under the English */ background: var(--surface-2); border: 1px solid var(--border); padding: 5px 12px; border-radius: 20px; transition: background .18s ease, color .18s ease, border-color .18s ease; } .folder-row:hover .meta { background: var(--green); color: #fff; border-color: var(--green); } /* Book cards */ /* RTL flow: the first card lands on the right, under the right-aligned heading, and a partial last row leaves its gap on the left instead of stranding it opposite the title. */ .book-grid { display: grid; direction: rtl; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 22px; padding: 6px 0 50px; } .book { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .book a.thumb { display: block; background: var(--surface-2); aspect-ratio: 3 / 4; overflow: hidden; } .book a.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } .book a.thumb:hover img { transform: scale(1.04); } .book .no-cover { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 2rem; background: var(--surface-2); } .book .body { padding: 12px 14px 15px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .book .title { margin: 0; overflow-wrap: anywhere; } .book .title .t-en { text-align: left; } .book .title .t-ur { text-align: right; } .book .title .t-ur { font-size: 1.2rem; line-height: 1.85; } .book .title .t-en { font-size: .86rem; color: var(--muted); font-weight: 500; } .book .title.solo .t-en { font-size: .96rem; color: var(--text); font-weight: 600; } .book .actions { margin-top: auto; display: flex; justify-content: flex-start; } .book .actions a { font-size: .78rem; padding: 7px 15px; border-radius: 20px; } .empty { text-align: center; color: var(--muted); padding: 60px 20px; } .notice { background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--green); border-radius: 10px; padding: 14px 18px; margin: 18px 0; color: var(--muted); font-size: .9rem; } /* ---- Book page ------------------------------------------------------- */ .book-page { padding: 8px 0 50px; } .bp-head { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; padding: 18px 0 26px; } .bp-cover { width: 190px; flex: 0 0 190px; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--surface-2); } .bp-meta { flex: 1 1 340px; min-width: 0; } .bp-meta h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 2px; text-align: right; } .bp-en { margin: 0 0 16px; color: var(--muted); font-weight: 600; font-size: 1.05rem; text-align: right; } .bp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0 0 22px; } .bp-facts > div { min-width: 0; } .bp-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; } .bp-facts dd { margin: 0; font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; } .bp-actions { display: flex; flex-wrap: wrap; gap: 10px; } .bp-actions .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .92rem; } .bp-size { font-weight: 400; opacity: .75; font-size: .82rem; } .bp-share-msg { margin: 10px 0 0; color: var(--green); font-size: .86rem; font-weight: 600; } .bp-viewer { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .bp-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .84rem; font-weight: 600; color: var(--muted); } .bp-viewer-bar a { color: var(--green); text-decoration: none; } .bp-frame { width: 100%; height: min(80vh, 900px); border: 0; display: block; background: var(--bg); } .bp-fallback { margin: 0; padding: 11px 16px; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--border); } .bp-about { margin-top: 34px; max-width: 780px; } .bp-about h2 { font-size: 1.15rem; margin: 0 0 10px; } .bp-about p { color: var(--text-soft); font-size: .92rem; line-height: 1.75; } .bp-tags { color: var(--muted) !important; font-size: .86rem !important; } .bp-source { font-size: .84rem !important; color: var(--muted) !important; } @media (max-width: 720px) { .bp-head { gap: 18px; } .bp-cover { width: 130px; flex-basis: 130px; } .bp-frame { height: 62vh; } .bp-actions .btn { flex: 1 1 100%; justify-content: center; } } /* ---- Search ----------------------------------------------------------- */ .search-form { display: flex; align-items: center; gap: 0; } .search-form input { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 24px 0 0 24px; padding: 9px 16px; min-width: 0; outline-offset: 2px; } .search-form input::placeholder { color: var(--muted); } .search-form button { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; cursor: pointer; background: var(--green); color: #fff; border: 1px solid var(--green); border-radius: 0 24px 24px 0; padding: 9px 16px; } .search-form button:hover { background: var(--green-dark); } .search-form button svg { width: 17px; height: 17px; } .search-form-sm { flex: 0 1 210px; margin-inline-start: 8px; } .search-form-sm input { width: 100%; font-size: .88rem; padding: 7px 14px; } .search-form-sm button { padding: 7px 12px; } .search-head { padding: 20px 0 8px; } .search-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 16px; } .search-form-lg { max-width: 620px; } .search-form-lg input { flex: 1 1 auto; font-size: 1rem; padding: 13px 20px; } .search-form-lg button { padding: 13px 26px; } .search-meta { color: var(--muted); font-size: .92rem; margin: 16px 0 10px; } .search-took { opacity: .6; font-size: .84rem; } .search-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .search-filters .sf { font-size: .84rem; font-weight: 600; text-decoration: none; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; } .search-filters .sf:hover { border-color: var(--green); color: var(--green); } .search-filters .sf.is-on { background: var(--green); border-color: var(--green); color: #fff; } .search-results { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .sr-link { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px; padding: 12px 16px; text-decoration: none; color: var(--text); transition: border-color .16s ease, transform .16s ease; } .sr-link:hover { border-color: var(--green); transform: translateX(3px); } .sr-thumb { flex: 0 0 46px; width: 46px; height: 62px; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: block; } .sr-thumb img { width: 100%; height: 100%; object-fit: cover; } .sr-thumb-none { display: grid; place-items: center; } .sr-thumb-none::after { content: "📄"; font-size: 1.1rem; opacity: .55; } .sr-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sr-kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--green); font-weight: 700; } .sr-title { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; } .sr-ur { font-size: 1.05rem; line-height: 1.8; text-align: left; } .sr-path { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; } .pager { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 30px 0 50px; font-size: .9rem; color: var(--muted); } .pager a { color: var(--green); font-weight: 600; text-decoration: none; } .pager a:hover { text-decoration: underline; } @media (max-width: 1080px) { .search-form-sm { flex-basis: 160px; } } @media (max-width: 860px) { .search-form-sm { order: 3; flex: 1 1 100%; margin: 8px 0 0; } .header-inner { flex-wrap: wrap; } } /* ---- Prose ---------------------------------------------------------- */ .prose { max-width: 760px; margin-inline: auto; padding: 20px 0 60px; } .prose h2 { text-align: start; font-size: 1.25rem; margin: 34px 0 10px; } .prose h3 { font-size: 1.05rem; margin: 24px 0 8px; } .prose p, .prose li { color: var(--text-soft); } .prose ul { padding-inline-start: 22px; } .prose li { margin-bottom: 6px; } .prose .updated { font-size: .85rem; color: var(--muted); font-style: italic; } .prose a { overflow-wrap: anywhere; } /* ---- Side menu -------------------------------------------------------- */ /* A flat list of top-level categories. No nesting, no expanding — depth is reached by clicking through, and the breadcrumbs track where you are. */ .lib-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; } .side-menu { position: sticky; top: 76px; } .side-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; } .side-head { padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .side-head .t-ur { font-size: 1.1rem; line-height: 1.8; color: var(--text); font-weight: 600; } .side-body { padding: 7px; max-height: min(66vh, 620px); overflow-y: auto; } .side-link { display: block; padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--text); transition: background .16s ease, box-shadow .16s ease; } .side-link + .side-link { border-top: 1px solid var(--border); border-radius: 0; } .side-link:hover { background: var(--surface-2); } .side-link.is-active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--green); } .side-link.is-active .t-ur { color: var(--green); } .side-link .t-ur { font-size: 1.02rem; line-height: 1.85; } /* Count sits inline after the label. Inside the RTL run it lands at the end of the phrase, which is the left-hand side visually. */ .sl-count { font-size: .78rem; font-weight: 600; color: var(--muted); font-family: 'Poppins', sans-serif; } .side-link.is-active .sl-count { color: var(--green); } /* ---- Contact form ---------------------------------------------------- */ .contact-form { display: grid; gap: 18px; margin: 24px 0 34px; max-width: 620px; } .cf-row { display: flex; flex-direction: column; gap: 6px; } .cf-row label { font-weight: 600; font-size: .92rem; color: var(--text); } .cf-row input, .cf-row select, .cf-row textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; width: 100%; resize: vertical; } .cf-row input:focus, .cf-row select:focus, .cf-row textarea:focus { border-color: var(--green); } .cf-row [aria-invalid="true"] { border-color: #c0392b; } .cf-hint { font-size: .82rem; color: var(--muted); } .cf-err { font-size: .82rem; color: #c0392b; font-weight: 600; } .contact-form .btn { justify-self: start; cursor: pointer; border: 0; } /* Honeypot: off-screen rather than display:none, which some bots detect. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .flash { border-radius: 12px; padding: 14px 18px; margin: 18px 0; font-size: .93rem; border: 1px solid; } .flash-ok { background: color-mix(in srgb, var(--green) 10%, transparent); border-color: var(--green); color: var(--text); } .flash-warn { background: color-mix(in srgb, #b8860b 12%, transparent); border-color: #b8860b; color: var(--text); } .flash-err { background: color-mix(in srgb, #c0392b 10%, transparent); border-color: #c0392b; color: var(--text); } /* ---- Footer --------------------------------------------------------- */ /* Right-aligned throughout, and every link carries both languages. */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 50px; padding: 46px 0 0; } .footer-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; } .footer-brand { display: flex; gap: 16px; align-items: flex-start; max-width: 320px; } .footer-brand img { border-radius: 14px; flex: 0 0 56px; } .fb-name { margin: 0 0 6px; font-weight: 700; font-size: 1rem; } .fb-tag { margin: 0 0 14px; color: var(--muted); font-size: .87rem; line-height: 1.6; } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; flex: 1 1 580px; } .fcol { text-align: right; } .fcol h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 0; } .fcol h3 .t-ur { font-size: 1rem; text-transform: none; letter-spacing: 0; line-height: 1.75; color: var(--text-soft); text-align: right; } .fcol a { display: flex; flex-direction: column; align-items: flex-end; gap: 0; color: var(--text-soft); text-decoration: none; overflow-wrap: anywhere; /* Each entry is two lines, so without a rule between them the column reads as one run-on block. */ padding: 9px 0; border-bottom: 1px solid var(--border); } .fcol a:first-of-type { border-top: 1px solid var(--border); } .fcol a:hover { background: var(--surface-2); } .fcol a .t-en { font-size: .78rem; color: var(--muted); text-align: right; } .fcol a .t-ur { font-size: 1rem; line-height: 1.75; text-align: right; } .fcol a:hover .t-en, .fcol a:hover .t-ur { color: var(--green); } .fcol .fmore { border-bottom: 0; } .fcol .fmore .t-en, .fcol .fmore .t-ur { color: var(--green); font-weight: 600; } .footer-note { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: .88rem; line-height: 2; font-family: 'Noto Nastaliq Urdu', serif; text-align: right; } .footer-note-en { font-family: 'Poppins', sans-serif; line-height: 1.7; font-size: .82rem; margin-top: 8px; padding-top: 0; border-top: 0; text-align: right; } .copyright { text-align: right; color: var(--muted); font-size: .84rem; padding: 24px 0; margin: 24px 0 0; border-top: 1px solid var(--border); } /* ---- Responsive ----------------------------------------------------- */ @media (max-width: 860px) { .nav-toggle { display: block; } .site-nav { position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 4%; display: none; box-shadow: var(--shadow); } .site-nav.open { display: flex; } .site-nav a { padding: 12px 2px; border-bottom: 1px solid var(--border); } .site-nav a.btn { text-align: center; margin: 12px 0; border-bottom: 0; } .hero { padding: 38px 0; gap: 28px; } .footer-links { gap: 30px; } .page-head .mod-icon { width: 54px; height: 54px; } } @media (max-width: 1040px) { /* Sidebar moves above the content and scrolls within itself. */ .lib-layout { grid-template-columns: minmax(0, 1fr); } .side-menu { position: static; order: -1; margin-bottom: 6px; } .side-body { max-height: 46vh; } } @media (max-width: 520px) { .folder-row { padding: 12px 14px; gap: 10px; } .label-stack .t-ur { font-size: .98rem; } .book-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; } .board-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .board-card { padding: 20px 14px; } .board-card .logo { width: 72px; height: 72px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }