@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: optional; src: url("../fonts/NunitoSans-Variable.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: optional; src: url("../fonts/CormorantGaramond-Variable.woff2") format("woff2"); } @font-face { font-family: "Scheherazade New"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ScheherazadeNew-Regular.woff2") format("woff2"); } @font-face { font-family: "IndoPak Nastaleeq"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/indopak-nastaleeq.woff2") format("woff2"); } :root { color-scheme: light; --blue: #1558a6; --blue-deep: #0b3b72; --blue-bright: #2876cf; --canvas: #f7f9fc; --canvas-raised: #eef4fa; --surface: #fff; --surface-soft: #f1f6fb; --surface-strong: #e4eef8; --ink: #10243a; --ink-soft: #30465d; --muted: #5a6c7f; --line: #d4dee9; --line-strong: #aebdcc; --warm: #b47725; --focus: #ffb000; --focus-guard: #10243a; --success: #28704d; --warning: #8a5b12; --danger: #a63838; --on-accent: #fff; --shadow-soft: 0 1.25rem 4rem rgb(32 66 103 / 8%); --shadow-small: 0 .65rem 1.8rem rgb(32 66 103 / 8%); --font-interface: "Nunito Sans", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif; --font-display: "Cormorant Garamond", georgia, serif; --font-arabic-uthmani: "Scheherazade New", "Noto Naskh Arabic", serif; --font-arabic-indopak: "IndoPak Nastaleeq", "Scheherazade New", serif; --font-arabic-devotional: "Scheherazade New", "Noto Naskh Arabic", serif; --font-arabic: var(--font-arabic-uthmani); --reading: 48rem; --wide: 76rem; --full: 92rem; --radius-small: .38rem; --radius: .7rem; --radius-large: 1.35rem; --space-1: .35rem; --space-2: .65rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.25rem; --space-6: 3.25rem; --space-7: clamp(4rem, 9vw, 7.5rem); --site-header-height: 5rem; } :root[data-theme="dark"] { color-scheme: dark; --blue: #78b9ff; --blue-deep: #a8d1ff; --blue-bright: #4d9ff3; --canvas: #0f1724; --canvas-raised: #0c1e30; --surface: #10263a; --surface-soft: #122c43; --surface-strong: #183750; --ink: #f1f6fb; --ink-soft: #d2e0eb; --muted: #aebfd0; --line: #29445d; --line-strong: #49657c; --warm: #e3b468; --focus: #ffd166; --focus-guard: #081522; --success: #83d3aa; --warning: #f0c476; --danger: #ff9a9a; --on-accent: #081522; --shadow-soft: 0 1.25rem 4rem rgb(0 0 0 / 24%); --shadow-small: 0 .65rem 1.8rem rgb(0 0 0 / 22%); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --blue: #78b9ff; --blue-deep: #a8d1ff; --blue-bright: #4d9ff3; --canvas: #0f1724; --canvas-raised: #0c1e30; --surface: #10263a; --surface-soft: #122c43; --surface-strong: #183750; --ink: #f1f6fb; --ink-soft: #d2e0eb; --muted: #aebfd0; --line: #29445d; --line-strong: #49657c; --warm: #e3b468; --focus: #ffd166; --focus-guard: #081522; --success: #83d3aa; --warning: #f0c476; --danger: #ff9a9a; --on-accent: #081522; --shadow-soft: 0 1.25rem 4rem rgb(0 0 0 / 24%); --shadow-small: 0 .65rem 1.8rem rgb(0 0 0 / 22%); } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--site-header-height) + 1rem); text-size-adjust: 100%; } body { min-width: 0; margin: 0; overflow-x: clip; background: var(--canvas); color: var(--ink); font-family: var(--font-interface); font-size: clamp(1rem, .97rem + .12vw, 1.075rem); line-height: 1.7; -webkit-font-smoothing: antialiased; } body.has-open-menu { overflow: hidden; } .js [data-appearance-toggle][hidden] { display: inline-flex !important; visibility: hidden; } .is-changing-theme *, .is-changing-theme *::before, .is-changing-theme *::after { transition: none !important; } main:focus-visible { outline: .2rem solid var(--focus); outline-offset: -.45rem; box-shadow: inset 0 0 0 .2rem var(--focus-guard); } ::selection { background: color-mix(in srgb, var(--blue) 28%, transparent); color: var(--ink); } h1, h2, h3, h4, h5, h6 { max-width: 26ch; margin-block: 0 .55em; color: var(--ink); font-family: var(--font-display); font-weight: 650; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; } h1 { font-size: clamp(2.65rem, 6.6vw, 5.7rem); } h2 { font-size: clamp(2rem, 4.2vw, 3.45rem); } h3 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); } h4 { font-size: clamp(1.25rem, 2vw, 1.55rem); } p, ul, ol, blockquote, figure, table { margin-block: 0 1.25em; } a { color: var(--blue-deep); text-decoration-color: color-mix(in srgb, currentcolor 50%, transparent); text-decoration-thickness: .075em; text-underline-offset: .2em; } a:hover { color: var(--blue); text-decoration-color: currentcolor; } a, button, input, select, textarea, summary { touch-action: manipulation; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: .2rem solid var(--focus); outline-offset: .2rem; box-shadow: 0 0 0 .18rem var(--focus-guard); } button, input, select, textarea { max-width: 100%; color: inherit; font: inherit; } input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea { min-height: 3rem; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--surface); } textarea { min-height: 9rem; resize: vertical; } button, .button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1.15rem; border: 1px solid transparent; border-radius: var(--radius-small); background: var(--blue-deep); color: var(--on-accent); cursor: pointer; font: inherit; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; } button:hover, .button:hover { border-color: var(--blue); background: var(--blue); color: var(--on-accent); } button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .58; } .button--secondary { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); background: var(--surface); color: var(--blue-deep); } .button--quiet { border-color: var(--line); background: transparent; color: var(--ink); } .button--quiet:hover, .button--secondary:hover { border-color: var(--blue); background: var(--surface-soft); color: var(--blue-deep); } img, svg, video, canvas, audio { max-width: 100%; } img, video { height: auto; } audio { width: 100%; } hr { height: 1px; margin-block: var(--space-5); border: 0; background: var(--line); } blockquote { margin-inline: 0; padding: .35rem 0 .35rem var(--space-4); border-inline-start: .22rem solid var(--blue); color: var(--ink-soft); font-size: 1.08em; } code, kbd, pre { font-family: ui-monospace, sfmono-regular, consolas, monospace; } pre { max-width: 100%; padding: var(--space-3); overflow: auto; border: 1px solid var(--line); background: var(--surface); } table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; white-space: nowrap; } th, td { padding: .75rem 1rem; border-block-end: 1px solid var(--line); text-align: start; } th { background: var(--surface-soft); font-weight: 800; } [hidden] { display: none !important; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; margin: -1px; white-space: nowrap; } .screen-reader-text:focus { z-index: 100000; top: .75rem; left: .75rem; width: auto; height: auto; padding: .75rem 1rem; clip-path: none; background: var(--surface); color: var(--ink); white-space: normal; } .skip-link { position: fixed; z-index: 10000; inset-block-start: .75rem; inset-inline-start: .75rem; padding: .7rem 1rem; border-radius: var(--radius-small); background: var(--ink); color: var(--surface); font-weight: 800; transform: translateY(-180%); transition: none; } .skip-link:focus { transform: none; } .wide-width, .reading-width { width: min(calc(100% - clamp(2rem, 6vw, 5rem)), var(--wide)); margin-inline: auto; } .reading-width { max-width: var(--reading); } .site-main { min-height: 60vh; } .flow > * + * { margin-block-start: 1.25em; } .flow > :where(h2, h3, h4) { margin-block-start: 1.7em; } .flow > :where(h2, h3, h4) + * { margin-block-start: .6em; } .flow > :where(ul, ol) { padding-inline-start: 1.4rem; } .flow :where(li + li) { margin-block-start: .45rem; } .flow :where(img, figure) { border-radius: var(--radius); } :where([lang="ar"], [dir="rtl"]) { font-family: var(--font-arabic); font-synthesis: none; font-kerning: normal; letter-spacing: 0; overflow-wrap: normal; word-break: normal; } .eyebrow { margin-block-end: .75rem; color: var(--blue-deep); font-size: .77rem; font-weight: 900; letter-spacing: .145em; line-height: 1.35; text-transform: uppercase; } .lede { max-width: 42rem; color: var(--ink-soft); font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.65; } .action-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: var(--space-4); } .text-action { display: inline-flex; align-items: center; gap: .4rem; color: var(--blue-deep); font-weight: 850; text-decoration: none; } .text-action:hover span[aria-hidden="true"] { transform: translateX(.2rem); } .section-block { padding-block: var(--space-7); } .section-band { position: relative; padding-block: var(--space-7); border-block: 1px solid var(--line); background: var(--canvas-raised); } .section-heading { max-width: 42rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); } .section-heading p:last-child { color: var(--muted); font-size: 1.08rem; } .notice, .empty-state, .quiet-panel { max-width: var(--reading); padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--line); border-inline-start: .25rem solid var(--blue); border-radius: var(--radius-small); background: var(--surface); } .empty-state { margin-block: var(--space-5); } .empty-state h2, .quiet-panel h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .empty-state > :last-child, .quiet-panel > :last-child, .notice > :last-child { margin-block-end: 0; } .site-header { position: sticky; z-index: 1000; inset-block-start: 0; border-block-end: 1px solid color-mix(in srgb, var(--line) 88%, transparent); background: color-mix(in srgb, var(--canvas) 91%, transparent); box-shadow: 0 .35rem 1.4rem rgb(26 58 90 / 4%); backdrop-filter: blur(1rem) saturate(130%); } body.admin-bar { --mushna-admin-bar-offset: 32px; --mushna-skip-admin-offset: 32px; } .admin-bar .site-header { inset-block-start: var(--mushna-admin-bar-offset); } .admin-bar .skip-link { inset-block-start: calc(.75rem + var(--mushna-skip-admin-offset)); } .site-header__inner { display: flex; min-height: var(--site-header-height); align-items: center; gap: clamp(.8rem, 2vw, 1.5rem); } .brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .6rem; color: var(--ink); font-family: var(--font-display); font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; line-height: 1; text-decoration: none; } .brand:hover { color: var(--blue-deep); } .brand__mark { width: 2.1rem; height: 2.1rem; color: var(--blue-deep); } .primary-nav { min-width: 0; margin-inline: auto; } .primary-nav ul { display: flex; align-items: center; justify-content: center; gap: clamp(.2rem, .7vw, .65rem); margin: 0; padding: 0; list-style: none; } .primary-nav a { position: relative; display: flex; min-height: 2.75rem; align-items: center; gap: .35rem; padding: .55rem clamp(.45rem, .75vw, .7rem); border-radius: var(--radius-small); color: var(--ink-soft); font-size: .91rem; font-weight: 760; text-decoration: none; white-space: nowrap; } .primary-nav a::after { position: absolute; inset-block-end: .25rem; inset-inline: .7rem; height: .12rem; border-radius: 1rem; background: var(--blue); content: ""; opacity: 0; transform: scaleX(.3); } .primary-nav a:hover, .primary-nav a[aria-current="page"] { background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue-deep); } .primary-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); } .nav-review-label { padding: .1rem .35rem; border: 1px solid var(--warning); border-radius: 999px; color: var(--warning); font-size: .61rem; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; } .site-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .45rem; } .appearance-toggle, .nav-toggle { min-height: 2.75rem; padding: .55rem .7rem; border-color: var(--line); background: var(--surface); color: var(--ink); font-size: .82rem; box-shadow: none; } .appearance-toggle:hover, .nav-toggle:hover { border-color: var(--blue); background: var(--surface-soft); color: var(--blue-deep); } .nav-toggle__icon { display: grid; width: 1.15rem; gap: .2rem; } .nav-toggle__icon span { display: block; height: .1rem; border-radius: 1rem; background: currentcolor; } .site-header[data-nav-open="true"] .nav-toggle__icon span:nth-child(1) { transform: translateY(.3rem) rotate(45deg); } .site-header[data-nav-open="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; } .site-header[data-nav-open="true"] .nav-toggle__icon span:nth-child(3) { transform: translateY(-.3rem) rotate(-45deg); } .site-footer { border-block-start: 1px solid var(--line); background: var(--canvas-raised); } .footer-dedication { display: flex; max-width: var(--reading); align-items: flex-start; gap: 1rem; padding-block: var(--space-5); color: var(--ink-soft); text-align: center; } .footer-dedication svg { flex: 0 0 auto; margin-block-start: .25rem; color: var(--warm); } .footer-dedication p { margin: 0; } .site-footer__inner { display: grid; grid-template-columns: minmax(14rem, 1.65fr) repeat(3, minmax(8rem, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(3.5rem, 8vw, 6rem); } .site-footer h2 { margin-block-end: 1rem; font-family: var(--font-interface); font-size: .84rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; } .footer-identity h2 { color: var(--blue-deep); font-family: var(--font-display); font-size: 2rem; letter-spacing: -.02em; text-transform: none; } .footer-identity p, .footer-app p { max-width: 26rem; color: var(--muted); } .footer-nav ul { margin: 0; padding: 0; list-style: none; } .footer-nav li + li { margin-block-start: .55rem; } .footer-nav a { color: var(--ink-soft); text-decoration: none; } .footer-nav a:hover { color: var(--blue-deep); text-decoration: underline; } .site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-block-start: 1px solid var(--line); color: var(--muted); } .site-footer__legal p { margin: 0; } .home-hero { position: relative; isolation: isolate; overflow: hidden; border-block-end: 1px solid var(--line); background: radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 32rem), linear-gradient(145deg, var(--canvas), var(--surface-soft)); } .home-hero::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(30deg, transparent 48%, color-mix(in srgb, var(--blue) 6%, transparent) 49%, color-mix(in srgb, var(--blue) 6%, transparent) 51%, transparent 52%), linear-gradient(150deg, transparent 48%, color-mix(in srgb, var(--blue) 6%, transparent) 49%, color-mix(in srgb, var(--blue) 6%, transparent) 51%, transparent 52%); background-position: 0 0, 1.5rem 0; background-size: 3rem 5.2rem; content: ""; mask-image: linear-gradient(90deg, transparent 45%, #000); opacity: .5; } .home-hero__inner { display: grid; min-height: min(49rem, calc(100svh - var(--site-header-height))); grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); padding-block: clamp(4rem, 10vw, 8rem); } .home-hero__content { max-width: 49rem; } .home-hero h1 { max-width: 15ch; } .home-hero__visual { display: grid; min-height: clamp(18rem, 36vw, 31rem); place-items: center; } .homepage-hero-image { width: 100%; max-height: 36rem; border-radius: 48% 48% var(--radius-large) var(--radius-large); box-shadow: var(--shadow-soft); object-fit: cover; } .home-hero__motif { position: relative; width: min(27rem, 78vw); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line)); border-radius: 50%; box-shadow: 0 0 0 2rem color-mix(in srgb, var(--blue) 3%, transparent), var(--shadow-soft); } .home-hero__motif::before, .home-hero__motif::after, .home-hero__motif span { position: absolute; inset: 20%; border: 1px solid color-mix(in srgb, var(--blue) 37%, var(--line)); content: ""; transform: rotate(45deg); } .home-hero__motif::after { inset: 31%; border-radius: 50%; transform: none; } .home-hero__motif span:nth-child(1) { inset: 10% 42%; border-radius: 999px; transform: rotate(30deg); } .home-hero__motif span:nth-child(2) { inset: 42% 10%; border-radius: 999px; transform: rotate(30deg); } .home-hero__motif span:nth-child(3) { inset: 37%; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--blue) 18%, transparent); transform: none; } .destination-list, .featured-reading, .learning-families, .collection-rows, .knowledge-list, .article-list, .related-list, .post-list, .error-links { margin: 0; padding: 0; list-style: none; } .destination-list, .featured-reading, .collection-rows, .knowledge-list, .article-list, .post-list { border-block-start: 1px solid var(--line); } .destination-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 2rem; align-items: center; gap: clamp(.75rem, 3vw, 2rem); min-height: 8rem; padding: 1rem .25rem; border-block-end: 1px solid var(--line); color: var(--ink); text-decoration: none; } .destination-row:hover { padding-inline: 1rem; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent); } .destination-row strong, .destination-row small { display: block; } .destination-row strong { font-family: var(--font-display); font-size: clamp(1.65rem, 3.2vw, 2.5rem); line-height: 1.15; } .destination-row small { max-width: 42rem; margin-block-start: .25rem; color: var(--muted); font-size: .98rem; } .destination-row__number, .featured-reading__index, .collection-rows__number, .article-row__number, .knowledge-row__order { color: var(--blue-deep); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .07em; } .destination-row__arrow, .knowledge-row__arrow { color: var(--blue-deep); font-size: 1.35rem; text-align: end; } .home-learning__layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(20rem, 1.22fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; } .learning-families { border-block-start: 1px solid var(--line); } .learning-families a, .featured-reading a { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.5rem; align-items: center; gap: 1rem; min-height: 5.5rem; padding: .9rem .2rem; border-block-end: 1px solid var(--line); color: var(--ink); text-decoration: none; } .learning-families strong, .learning-families small, .featured-reading strong, .featured-reading small { display: block; } .learning-families small, .featured-reading small { color: var(--muted); } .learning-families a:hover, .featured-reading a:hover { padding-inline: .65rem; background: color-mix(in srgb, var(--blue) 7%, transparent); } .featured-reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-reading li:nth-child(odd) { border-inline-end: 1px solid var(--line); } .featured-reading a { height: 100%; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; padding-inline: clamp(.5rem, 2vw, 1.5rem); } .home-promo { position: relative; max-width: var(--reading); margin-block: var(--space-6); padding: clamp(2rem, 6vw, 4rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); } .home-app__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 6vw, 6rem); } .home-app__inner > div { max-width: 44rem; } .breadcrumbs { padding-block: 1.1rem; border-block-end: 1px solid var(--line); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .55rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .82rem; } .breadcrumbs li { display: inline-flex; align-items: center; gap: .55rem; } .breadcrumbs li + li::before { color: var(--line-strong); content: "/"; } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--blue-deep); text-decoration: underline; } .preview-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-block: 1.25rem 0; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line)); border-radius: var(--radius-small); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); color: var(--ink-soft); font-size: .9rem; } .preview-banner__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); font-weight: 900; } .preview-banner__title { display: block; color: var(--ink); } .preview-banner p { margin: 0; } .editorial-heading { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; } .editorial-heading h1, .editorial-heading .lede { margin-inline: auto; } .editorial-heading__media { width: min(35rem, 100%); margin: 2rem auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); } .editorial-heading__image { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: cover; } .entry-introduction > :last-child { margin-block-end: 0; } .collection-count { display: inline-block; margin-block: 1rem 0; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .82rem; font-weight: 800; } .collection-section { padding-block-end: var(--space-7); } .collection-rows a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto 1.5rem; align-items: center; gap: clamp(.75rem, 3vw, 1.5rem); min-height: 7rem; padding: 1rem .25rem; border-block-end: 1px solid var(--line); color: var(--ink); text-decoration: none; } .collection-rows a:hover { padding-inline: .85rem; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent); } .collection-rows strong, .collection-rows small { display: block; } .collection-rows strong { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.9rem); } .collection-rows small, .collection-rows__meta { color: var(--muted); } .collection-rows__meta { font-size: .84rem; font-weight: 750; white-space: nowrap; } .collection-filter { max-width: 38rem; margin: 0 auto var(--space-5); padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-small); } .collection-filter label { display: block; margin-block-end: .4rem; font-weight: 850; } .collection-filter input { width: 100%; } .collection-filter p { margin-block: .45rem 0; color: var(--muted); font-size: .82rem; } .knowledge-list, .article-list { margin-block-end: var(--space-7); } .knowledge-list > li, .article-list > li { min-width: 0; border-block-end: 1px solid var(--line); } .knowledge-row__link { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(5rem, auto) 1.5rem; align-items: center; gap: clamp(.75rem, 3vw, 1.75rem); min-height: 7.6rem; padding: .9rem .25rem; color: var(--ink); text-decoration: none; } .knowledge-row__link:hover { padding-inline: .85rem; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent); } .knowledge-row__content { min-width: 0; } .knowledge-row__content small, .knowledge-row__content strong, .knowledge-row__content span { display: block; } .knowledge-row__content small { color: var(--blue-deep); font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .knowledge-row__content strong { margin-block: .15rem; font-family: var(--font-display); font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.15; } .knowledge-row__content span { color: var(--muted); overflow-wrap: anywhere; } .knowledge-row__arabic { font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.75; text-align: end; } .empty-state--filtered { margin-inline: auto; } .article-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(9rem, 15rem); align-items: center; gap: clamp(1rem, 4vw, 3rem); min-height: 10rem; padding: 1.25rem .25rem; } .article-row__content { min-width: 0; } .article-row__content h2 { margin-block: .15rem .35rem; font-size: clamp(1.55rem, 3vw, 2.25rem); } .article-row__content h2 a { color: var(--ink); text-decoration: none; } .article-row__content h2 a:hover { color: var(--blue-deep); text-decoration: underline; } .article-row__content p { margin: 0; color: var(--muted); } .article-row__media { min-width: 0; } .article-row__media img { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); object-fit: cover; } .editorial-detail-main, .page-main { padding-block-end: var(--space-7); } .editorial-detail, .page-layout { padding-block: clamp(2.5rem, 7vw, 5.5rem); } .editorial-detail__hero, .page-hero { padding-block-end: clamp(2rem, 5vw, 3.75rem); border-block-end: 1px solid var(--line); } .editorial-detail__hero .lede, .page-hero .lede { margin-block-end: 0; } .editorial-detail__hero > img, .page-hero > img { width: 100%; max-height: 33rem; margin-block-start: var(--space-5); border-radius: var(--radius-large); box-shadow: var(--shadow-small); object-fit: cover; } .entry-content { padding-block: clamp(2.25rem, 6vw, 4.5rem); overflow-wrap: anywhere; } .entry-content > :where(p, ul, ol, blockquote) { max-width: 43rem; } .entry-content > :where(.alignwide, figure, table) { max-width: 100%; } .entry-content > .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); } .editorial-arabic { margin-block: var(--space-5); padding: clamp(1.5rem, 5vw, 3rem); border-block: 1px solid var(--line); background: linear-gradient(110deg, transparent, var(--surface-soft), transparent); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.95; text-align: center; } .catalogue-position, .review-meta { color: var(--muted); font-size: .9rem; font-weight: 750; } .knowledge-field { padding-block: var(--space-5); border-block-start: 1px solid var(--line); } .knowledge-field h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); } .knowledge-field--arabic p { font-size: clamp(1.7rem, 4vw, 2.55rem); line-height: 1.8; text-align: end; } .source-notes, .related-content, .quran-reference-list { padding-block: var(--space-5); border-block-start: 1px solid var(--line); } .source-list, .quran-reference-list, .related-list { padding-inline-start: 1.25rem; } .source-list li, .quran-reference-list li { padding-block: .35rem; overflow-wrap: anywhere; } .external-mark { display: inline-block; margin-inline-start: .2rem; font-size: .8em; } .related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1rem, 4vw, 3rem); padding: 0; border-block-start: 1px solid var(--line); list-style: none; } .related-list li { min-width: 0; border-block-end: 1px solid var(--line); } .related-list a { display: flex; min-height: 5.4rem; flex-direction: column; justify-content: center; padding: .8rem .2rem; color: var(--ink); text-decoration: none; } .related-list a:hover { color: var(--blue-deep); } .related-list small { color: var(--muted); } .content-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block: var(--space-5); border-block-start: 1px solid var(--line); } .content-navigation a { display: flex; min-height: 4rem; flex-direction: column; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); font-weight: 750; text-decoration: none; } .content-navigation a:last-child { align-items: flex-end; text-align: end; } .content-navigation a[rel="next"] { grid-column: 2; } .content-navigation a:hover { border-color: var(--blue); background: var(--surface-soft); color: var(--blue-deep); } .listing-layout { padding-block-end: var(--space-7); } .post-list__item { padding-block: var(--space-4); border-block-end: 1px solid var(--line); } .post-list__item h2 { margin-block: 0 .3rem; font-size: clamp(1.55rem, 3vw, 2.2rem); } .post-list__item p { color: var(--muted); } .pagination, .nav-links { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-block-start: var(--space-5); } .page-numbers { display: inline-grid; min-width: 2.75rem; min-height: 2.75rem; place-items: center; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); text-decoration: none; } .page-numbers.current { border-color: var(--blue); background: var(--blue-deep); color: var(--surface); } .error-main, .future-main { display: grid; min-height: max(60vh, 34rem); align-items: center; padding-block: var(--space-7); } .error-state, .future-state { text-align: center; } .error-state h1, .future-state h1, .error-state .lede, .future-state .lede { margin-inline: auto; } .error-state__code { margin: 0; color: var(--blue-deep); font-family: var(--font-display); font-size: clamp(6rem, 24vw, 14rem); font-weight: 700; line-height: .7; user-select: none; } .error-state .action-group { justify-content: center; } .error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; margin-block-start: var(--space-5); } .language-selector { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .language-selector summary { min-height: 3rem; padding: .7rem 1rem; cursor: pointer; font-weight: 800; } .language-selector ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; max-height: min(28rem, 65vh); margin: 0; padding: .6rem; overflow: auto; border-block-start: 1px solid var(--line); list-style: none; } .language-selector a { display: flex; min-height: 3.25rem; flex-direction: column; justify-content: center; padding: .45rem .65rem; border-radius: var(--radius-small); color: var(--ink); text-decoration: none; } .language-selector a:hover, .language-selector a[aria-current="page"] { background: var(--surface-soft); } .language-selector small { color: var(--muted); font-size: .76rem; } @media (width <= 68rem) { :root { --site-header-height: 4.5rem; } .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: var(--site-header-height); } .primary-nav { grid-column: 1 / -1; width: 100%; padding-block-end: .7rem; } .primary-nav ul { justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; } .site-header:not([data-menu-enhanced="true"]) { position: relative; } .js .site-header:not([data-menu-enhanced="true"]) { position: sticky; } .site-header:not([data-menu-enhanced="true"]) .primary-nav ul { flex-wrap: wrap; overflow: visible; } .js .site-header:not([data-menu-enhanced="true"]) .primary-nav { display: none; } .js [data-nav-toggle][hidden] { display: inline-flex !important; visibility: hidden; } .site-header[data-menu-enhanced="true"] .primary-nav { position: fixed; z-index: 999; inset-block-start: var(--site-header-height); inset-inline: 0; display: none; max-height: calc(100dvh - var(--site-header-height)); padding: .75rem clamp(1rem, 4vw, 2rem) 2rem; overflow-y: auto; border-block-end: 1px solid var(--line); background: var(--canvas); box-shadow: var(--shadow-soft); } .admin-bar .site-header[data-menu-enhanced="true"] .primary-nav { max-height: calc(100dvh - var(--site-header-height) - var(--mushna-admin-bar-offset)); } .site-header[data-menu-enhanced="true"][data-nav-open="true"] .primary-nav { display: block; } .site-header[data-menu-enhanced="true"] .primary-nav ul { display: block; overflow: visible; } .site-header[data-menu-enhanced="true"] .primary-nav li + li { border-block-start: 1px solid var(--line); } .site-header[data-menu-enhanced="true"] .primary-nav a { min-height: 3.6rem; justify-content: space-between; padding-inline: .55rem; font-size: 1rem; } .site-header[data-menu-enhanced="true"] .primary-nav a::after { display: none; } .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-identity { grid-column: 1 / -1; } .home-hero__inner { min-height: auto; grid-template-columns: minmax(0, 1.25fr) minmax(14rem, .75fr); } } @media (width <= 782px) { body.admin-bar { --mushna-admin-bar-offset: 46px; --mushna-skip-admin-offset: 46px; } } @media (width <= 600px) { body.admin-bar { --mushna-admin-bar-offset: 0px; } } @media (width <= 48rem) { .wide-width, .reading-width { width: min(calc(100% - 2rem), var(--wide)); } .appearance-toggle__label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; margin: -1px; white-space: nowrap; } .home-hero__inner, .home-learning__layout { grid-template-columns: 1fr; } .home-hero__visual { min-height: 12rem; grid-row: 1; } .home-hero__motif { width: min(15rem, 62vw); } .home-hero__content { grid-row: 2; } .featured-reading, .related-list { grid-template-columns: 1fr; } .featured-reading li:nth-child(odd) { border-inline-end: 0; } .article-row { grid-template-columns: 2.5rem minmax(0, 1fr); } .article-row__media { grid-column: 2; width: min(100%, 20rem); } .home-app__inner, .site-footer__legal { align-items: flex-start; flex-direction: column; } .knowledge-row__link { grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem; } .knowledge-row__arabic { grid-column: 2; grid-row: 2; text-align: start; } .knowledge-row__arrow { grid-column: 3; grid-row: 1 / 3; } .preview-banner { grid-template-columns: auto minmax(0, 1fr); } .preview-banner .text-action { grid-column: 2; } } @media (width <= 36rem) { h1 { font-size: clamp(2.35rem, 14vw, 3.7rem); } .brand__wordmark { font-size: 1.45rem; } .appearance-toggle, .nav-toggle { min-width: 2.75rem; padding-inline: .55rem; } .nav-toggle > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; margin: -1px; white-space: nowrap; } .destination-row { grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; min-height: 7rem; } .collection-rows a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; } .collection-rows__meta { grid-column: 2; grid-row: 2; white-space: normal; } .collection-rows a > span:last-child { grid-column: 3; grid-row: 1 / 3; } .site-footer__inner { grid-template-columns: 1fr; } .footer-identity { grid-column: auto; } .content-navigation { grid-template-columns: 1fr; } .content-navigation a:last-child { align-items: flex-start; text-align: start; } .content-navigation a[rel="next"] { grid-column: 1; } .language-selector ul { grid-template-columns: 1fr; } } @media (width <= 21rem) { .wide-width, .reading-width { width: min(calc(100% - 1.25rem), var(--wide)); } .brand__mark { width: 1.8rem; height: 1.8rem; } .site-header__inner { gap: .35rem; } .action-group, .action-group .button { width: 100%; } .article-row { grid-template-columns: 1fr; } .article-row__number, .article-row__media { grid-column: 1; } } @media (prefers-reduced-motion: no-preference) { a, button, .primary-nav a::after, .nav-toggle__icon span, .destination-row, .learning-families a, .featured-reading a, .collection-rows a, .knowledge-row__link, .text-action span[aria-hidden="true"] { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease, padding 160ms ease, opacity 160ms ease; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media (forced-colors: active) { .site-header, .section-band, .home-hero { background: Canvas; } .primary-nav a[aria-current="page"], .button, button, .preview-banner { border: 2px solid ButtonText; } .home-hero__motif { display: none; } } @media print { :root, :root[data-theme="dark"] { color-scheme: light; --canvas: #fff; --surface: #fff; --ink: #000; --ink-soft: #222; --muted: #444; --line: #bbb; --blue: #000; --blue-deep: #000; } .site-header, .site-footer, .preview-banner, .appearance-toggle, .nav-toggle, .collection-filter, .action-group, .content-navigation { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .site-main, .editorial-detail, .page-layout { min-height: 0; padding: 0; } a { color: #000; } .entry-content a[href^="http"]::after, .source-list a[href^="http"]::after { font-size: .8em; content: " (" attr(href) ")"; overflow-wrap: anywhere; } }