/* ============================================================ hadits.in — redesign (mirip app Ensiklopedi Hadits) Design tokens diambil dari screenshot app versi mobile. ============================================================ */ :root { --brand: #4CAF50; /* app bar (screenshot: #51AB54) */ --brand-600: #3E9C42; --brand-700: #2E7D32; --brand-deep: #0B580A; /* band "Dari 9 Kitab" */ --brand-soft: #E8F5E9; --chip-bg: #DCEFDD; /* chip "HR Bukhari 1" */ --chip-text: #2E6B31; --hl: #548357; /* highlight kata pencarian */ --yellow: #ECDE1D; --ink: #1F2A1F; --ink-2: #4B564B; --ink-3: #7A857A; --line: #E3EAE3; --bg: #F4F7F4; --card: #FFFFFF; --radius: 12px; --shadow: 0 1px 2px rgba(20,40,20,.06), 0 4px 14px rgba(20,40,20,.06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; --font-display: var(--font); /* Font Arab: KFGQPC Uthman Taha Naskh (default) dan Scheherazade New di-host sendiri (assets/fonts/README.md); font sistem hanya cadangan. */ --font-arab: "KFGQPC Uthman Taha Naskh", "Scheherazade New", "Amiri", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", "Al Bayan", serif; --nav-h: 60px; --appbar-h: 56px; --maxw: 1080px; --readw: 760px; } /* ---------- Font Arab yang di-host: Scheherazade New (SIL OFL, cadangan) ---------- */ @font-face { font-family: "Scheherazade New"; font-style: normal; font-weight: 400; font-display: swap; src: local("Scheherazade New"), local("ScheherazadeNew-Regular"), url("../fonts/ScheherazadeNew-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } @font-face { font-family: "Scheherazade New"; font-style: normal; font-weight: 700; font-display: swap; src: local("Scheherazade New Bold"), local("ScheherazadeNew-Bold"), url("../fonts/ScheherazadeNew-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } /* ---------- Font Arab yang di-host: KFGQPC Uthman Taha Naskh (default) ---------- */ @font-face { font-family: "KFGQPC Uthman Taha Naskh"; font-style: normal; font-weight: 400; font-display: swap; src: local("KFGQPC Uthman Taha Naskh"), local("KFGQPCUthmanTahaNaskh"), url("../fonts/UthmanTN1-Ver10.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } @font-face { font-family: "KFGQPC Uthman Taha Naskh"; font-style: normal; font-weight: 700; font-display: swap; src: local("KFGQPC Uthman Taha Naskh Bold"), local("KFGQPCUthmanTahaNaskh-Bold"), url("../fonts/UthmanTN1B-Ver10.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } /* ---------- Mode gelap ---------- Otomatis mengikuti sistem (prefers-color-scheme); pengguna bisa memaksa lewat data-theme="dark" | "light" pada (tombol di app bar, disimpan di localStorage). */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --brand: #2E7D32; --brand-600: #43A047; --brand-700: #81C784; --brand-deep: #1B5E20; --brand-soft: #1C2E1D; --chip-bg: #1F3A21; --chip-text: #A5D6A7; --ink: #E6ECE6; --ink-2: #B5C0B5; --ink-3: #869286; --line: #2A342A; --bg: #0F140F; --card: #181F18; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35); --notice-bg: #2B2710; --notice-line: #4A4218; --notice-ink: #E8DC8A; } } :root[data-theme="dark"] { color-scheme: dark; --brand: #2E7D32; --brand-600: #43A047; --brand-700: #81C784; --brand-deep: #1B5E20; --brand-soft: #1C2E1D; --chip-bg: #1F3A21; --chip-text: #A5D6A7; --ink: #E6ECE6; --ink-2: #B5C0B5; --ink-3: #869286; --line: #2A342A; --bg: #0F140F; --card: #181F18; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35); --notice-bg: #2B2710; --notice-line: #4A4218; --notice-ink: #E8DC8A; } *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 15px; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } a { color: var(--brand-700); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } h1,h2,h3,h4 { margin: 0; line-height: 1.25; } .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ---------- App bar ---------- */ .appbar { position: sticky; top: 0; z-index: 30; background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); } .appbar__inner { max-width: var(--maxw); margin: 0 auto; height: var(--appbar-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; } .appbar__brand { display: flex; align-items: center; gap: 10px; color: #fff; min-width: 0; } .appbar__brand img { width: 30px; height: 30px; border-radius: 7px; } .appbar__title { font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar__sub { font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar__titles { min-width: 0; line-height: 1.2; } .appbar__spacer { flex: 1; } .appbar__icon { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .appbar__icon:hover { background: rgba(255,255,255,.15); } .appbar__nav { display: none; gap: 4px; margin-left: 12px; } .appbar__nav a { color: #fff; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: 14px; } .appbar__nav a:hover { background: rgba(255,255,255,.14); text-decoration: none; } .appbar__nav a.is-active { background: rgba(0,0,0,.14); } .btn-appbar { display: none; align-items: center; gap: 6px; background: #fff; color: #2E7D32; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; } @media (min-width: 900px) { body { padding-bottom: 0; } .appbar__nav { display: flex; } .btn-appbar { display: inline-flex; } .bottomnav { display: none; } } /* ---------- Bottom navigation (mobile, seperti app) ---------- */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); } .bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); font-size: 11px; font-weight: 500; } .bottomnav a:hover { text-decoration: none; } .bottomnav a.is-active { color: var(--brand-700); } .bottomnav svg { width: 24px; height: 24px; } /* ---------- Layout ---------- */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } .read { max-width: var(--readw); margin: 0 auto; padding: 0 16px; } .section { margin: 22px 0; } .section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .section__title { font-size: 17px; font-weight: 700; } .section__link { font-size: 13px; font-weight: 600; } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); } .card--pad { padding: 16px; } /* ---------- Search ---------- */ .search { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 10px; border: 1px solid var(--line); padding: 0 12px; height: 48px; box-shadow: var(--shadow); } .search svg { color: var(--ink-3); flex: none; } .search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; background: transparent; min-width: 0; color: var(--ink); } .search input::placeholder { color: var(--ink-3); } .search__lang { border: 0; background: transparent; font-weight: 600; color: var(--ink-2); font-size: 13px; display: inline-flex; align-items: center; gap: 2px; padding: 6px; border-radius: 6px; } .search__hint { font-size: 12px; color: var(--ink-3); margin: 8px 4px 0; } .search-hero { background: var(--brand); padding: 0 0 16px; } .search-hero .container { padding-top: 4px; } /* ---------- Chips & badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip-bg); color: var(--chip-text); border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; } .chip:hover { text-decoration: none; filter: brightness(.95); } .badge { display: inline-flex; align-items: center; background: var(--brand-deep); color: #fff; font-size: 11.5px; font-weight: 600; padding: 3px 12px 3px 9px; border-radius: 4px 0 0 4px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); padding-right: 15px; } .badge--muted { background: var(--ink-3); } .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 12px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 11px 18px; font-weight: 600; font-size: 14px; border: 1px solid transparent; transition: background .15s, transform .05s; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: #2E7D32; color: #fff; } .btn--primary:hover { background: #256b29; } .btn--light { background: #fff; color: #2E7D32; } .btn--outline { background: transparent; color: var(--brand-700); border-color: var(--brand-700); } .btn--outline:hover { background: var(--brand-soft); } .btn--ghost { background: transparent; color: var(--brand-700); } .btn--ghost:hover { background: var(--brand-soft); } .btn--block { width: 100%; } .btn--sm { padding: 8px 12px; font-size: 13px; border-radius: 8px; } .btn svg { width: 18px; height: 18px; flex: none; } /* ---------- Terakhir dibaca / list hadits ---------- */ .hlist { display: flex; flex-direction: column; } .hitem { padding: 14px 16px; border-bottom: 1px solid var(--line); display: block; color: inherit; } .hitem:last-child { border-bottom: 0; } .hitem:hover { background: var(--brand-soft); text-decoration: none; } .hitem__meta { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; } .hitem__text { font-size: 14.5px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; } .hitem__title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .empty { padding: 22px 16px; color: var(--ink-3); font-size: 14px; text-align: center; } /* ---------- Grid kitab (Kutubut Tis'ah) ---------- */ .kitabgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; } .kitab { text-align: center; color: var(--ink); } .kitab:hover { text-decoration: none; } .kitab__cover { width: 100%; max-width: 128px; aspect-ratio: 120/163; margin: 0 auto 8px; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.2); overflow: hidden; transition: transform .15s; } .kitab:hover .kitab__cover { transform: translateY(-3px); } .kitab__cover img { width: 100%; height: 100%; object-fit: cover; } .kitab__name { font-size: 12.5px; font-weight: 600; line-height: 1.25; } .kitab__count { font-size: 11px; color: var(--ink-3); } @media (min-width: 640px) { .kitabgrid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 900px) { .kitabgrid { grid-template-columns: repeat(9, 1fr); gap: 12px; } .kitab__cover { max-width: 108px; } } /* ---------- Kitab list (halaman Lihat) ---------- */ .kitabrow { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); color: inherit; } .kitabrow:last-child { border-bottom: 0; } .kitabrow:hover { background: var(--brand-soft); text-decoration: none; } .kitabrow img { width: 46px; height: 62px; object-fit: cover; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.2); flex: none; } .kitabrow__name { font-weight: 700; } .kitabrow__sub { font-size: 12.5px; color: var(--ink-3); } .kitabrow__go { margin-left: auto; color: var(--ink-3); } /* ---------- Avatar huruf kitab ---------- */ .avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex: none; background: var(--brand-700); } /* ---------- Halaman hadits ---------- */ .hadits-meta { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; font-size: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .hadits-meta dt { color: var(--ink-2); } .hadits-meta dd { margin: 0; font-weight: 500; } .toggle-link { display: flex; width: fit-content; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--brand-700); background: none; border: 0; padding: 4px 0; } .toggle-link + .toggle-link, #arab + .toggle-link { margin-top: 8px; } .arab { font-family: var(--font-arab); font-size: 28px; line-height: 2.1; direction: rtl; text-align: right; color: var(--ink); margin: 10px 0 6px; unicode-bidi: plaintext; } .arab--empty { font-family: var(--font); font-size: 14px; direction: ltr; text-align: left; line-height: 1.5; color: var(--ink-3); background: var(--bg); border-radius: 8px; padding: 12px 14px; } .terjemah { font-size: 17px; line-height: 1.75; margin: 10px 0 0; max-width: 70ch; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; } .terjemah p { margin: 0 0 .85em; } .terjemah p:last-child { margin-bottom: 0; } .terjemah .ref { color: var(--ink-3); font-size: 14px; } .hadits-body { padding: 14px 16px 18px; } .hadits-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); } .hadits-sanad { text-align: center; padding: 12px 16px; border-top: 1px solid var(--line); } .pager { display: flex; justify-content: space-between; gap: 10px; margin: 14px 0; } .pager a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); font-weight: 600; font-size: 14px; } .pager a:hover { text-decoration: none; background: var(--brand-soft); } .pager a[aria-disabled="true"] { opacity: .4; pointer-events: none; } .notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--notice-bg, #FFF8DB); border: 1px solid var(--notice-line, #F3E7A0); font-size: 13.5px; color: var(--notice-ink, #5A4E00); margin: 14px 0; } .notice svg { flex: none; margin-top: 1px; } .notice a { font-weight: 600; color: inherit; text-decoration: underline; } /* ---------- Promo app (seperti materi marketing app) ---------- */ .promo { position: relative; overflow: hidden; color: #fff; border-radius: 16px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 28px), repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 28px), linear-gradient(160deg, #56B85B, #2F8F3A 60%, #1F7A2C); padding: 28px 20px; } .promo::after { content: ""; position: absolute; inset: auto -10% -45% -10%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, var(--yellow), transparent 72%); opacity: .35; pointer-events: none; } .promo > * { position: relative; } .promo__kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; } .promo__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 14px 0 6px; } .promo__title u { text-decoration: none; background: linear-gradient(transparent 68%, var(--yellow) 68%); } .promo__sub { font-size: 15px; opacity: .95; max-width: 520px; } .promo__stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } @media (min-width: 900px) { .promo__stores { justify-content: flex-start; } } .promo__band { display: inline-block; background: var(--brand-deep); padding: 4px 10px; border-radius: 4px; font-weight: 600; } .promo__shot { margin: 22px auto 0; max-width: 300px; border-radius: 22px; box-shadow: 0 20px 40px rgba(0,0,0,.35); } @media (min-width: 900px) { .promo { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px; padding: 40px 44px; } .promo__title { font-size: 36px; } .promo__shot { margin: 0 auto; max-width: 320px; } } .storebtn { display: inline-flex; align-items: center; gap: 10px; background: #111; color: #fff; border-radius: 10px; padding: 8px 14px 8px 10px; min-height: 48px; border: 1px solid rgba(255,255,255,.15); } .storebtn:hover { background: #000; text-decoration: none; } .storebtn svg { width: 26px; height: 26px; } .storebtn small { display: block; font-size: 10px; opacity: .8; line-height: 1; } .storebtn b { display: block; font-size: 15px; font-weight: 600; line-height: 1.15; } .storebtn--light { background: var(--card); color: var(--ink); border-color: var(--line); } .storebtn--light:hover { background: var(--brand-soft); } /* ---------- Fitur grid ---------- */ .features { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } .feature { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; } .feature__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; } .feature__title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; } .feature__text { font-size: 13px; color: var(--ink-2); } @media (min-width: 720px) { .features { grid-template-columns: repeat(4, 1fr); } } /* ---------- Halaman fitur (Cari / Catat / Akun) ---------- */ .fiturhero { text-align: center; padding: 24px 16px 8px; } .fiturhero__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--brand-soft); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .fiturhero h1 { font-size: 22px; font-family: var(--font-display); } .fiturhero p { color: var(--ink-2); max-width: 520px; margin: 8px auto 0; } .fiturshot { max-width: 320px; margin: 18px auto; border-radius: 22px; box-shadow: 0 16px 36px rgba(0,0,0,.25); } .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .checks svg { color: var(--brand-600); flex: none; margin-top: 2px; } /* ---------- Bottom sheet unduh ---------- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--card); border-radius: 18px 18px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .25s ease; max-width: 560px; margin: 0 auto; box-shadow: 0 -8px 30px rgba(0,0,0,.2); } .sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; } .sheet__head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .sheet__head img { width: 52px; height: 52px; border-radius: 12px; } .sheet__title { font-weight: 700; font-size: 16px; } .sheet__sub { font-size: 13px; color: var(--ink-2); } .sheet__list { display: grid; gap: 8px; margin-top: 14px; } .sheet__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--card); } .sheet__item:hover { background: var(--brand-soft); text-decoration: none; } .sheet__item.is-primary { border-color: var(--brand-600); background: var(--brand-soft); } .sheet__item svg { width: 24px; height: 24px; flex: none; } .sheet__item b { display: block; font-size: 14.5px; } .sheet__item small { color: var(--ink-3); font-size: 12px; } .sheet__item .go { margin-left: auto; color: var(--ink-3); } body.sheet-open .sheet:not(.sheet--cite) { transform: translateY(0); } body.sheet-open .sheet-backdrop:not(.sheet-backdrop--cite) { opacity: 1; pointer-events: auto; } @media (min-width: 900px) { .sheet { bottom: auto; top: 50%; left: 50%; right: auto; transform: translate(-50%, -45%) scale(.98); opacity: 0; pointer-events: none; border-radius: 18px; width: 460px; transition: transform .2s, opacity .2s; } body.sheet-open .sheet:not(.sheet--cite) { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .sheet__grip { display: none; } } /* ---------- Sticky CTA (halaman hadits, mobile) ---------- */ .stickycta { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); z-index: 25; background: var(--brand-deep); color: #fff; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; } .stickycta img { width: 36px; height: 36px; border-radius: 9px; flex: none; } .stickycta b { display: block; font-size: 13.5px; } .stickycta .btn { margin-left: auto; padding: 8px 12px; font-size: 13px; flex: none; } .stickycta__close { background: none; border: 0; color: #fff; opacity: .7; padding: 4px; } body.cta-hidden .stickycta { display: none; } @media (min-width: 900px) { .stickycta { display: none; } } /* ---------- Footer ---------- */ .footer { padding: 28px 16px 24px; text-align: center; color: var(--ink-3); font-size: 12.5px; } .footer__inner { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--line); padding-top: 22px; } .footer__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 14px; margin-bottom: 12px; } .footer__brand img { width: 26px; height: 26px; border-radius: 6px; } .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; } .footer__links a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-weight: 500; font-size: 12.5px; } .footer__links a:hover { text-decoration: none; border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-soft); } .footer__links a svg { width: 15px; height: 15px; } .footer__stores { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .footer__stores a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; } .footer__stores a:hover { text-decoration: none; opacity: .9; } .footer__stores a svg { width: 16px; height: 16px; } .footer__copy { color: var(--ink-3); } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 13.5px; opacity: 0; transition: .2s; z-index: 70; pointer-events: none; white-space: nowrap; } .toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (min-width: 900px) { .toast { bottom: 28px; } } /* ---------- Desktop overrides (harus setelah rule dasar) ---------- */ @media (min-width: 900px) { .bottomnav { display: none; } .stickycta { display: none; } .arab { font-size: 30px; } } .jump { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; } .jump .pill { height: 42px; width: 100%; } .jump .btn { border-radius: 999px; height: 42px; padding: 0 18px; } /* ---------- Utils ---------- */ .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px} .muted { color: var(--ink-3); } .small { font-size: 13px; } .center { text-align: center; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ---------- Tombol tema ---------- */ .appbar__icon .ico-sun, .appbar__icon .ico-moon { width: 22px; height: 22px; } :root[data-theme="dark"] .ico-sun, :root:not([data-theme="light"]) .ico-sun { display: none; } :root[data-theme="dark"] .ico-moon, :root:not([data-theme="light"]) .ico-moon { display: block; } :root[data-theme="light"] .ico-sun { display: block; } :root[data-theme="light"] .ico-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ico-sun { display: block; } :root:not([data-theme="dark"]) .ico-moon { display: none; } } /* ---------- Dialog sitasi ---------- */ .sheet-backdrop--cite { z-index: 62; } .sheet--cite { z-index: 63; max-width: 640px; max-height: calc(100dvh - 24px); overflow: auto; } .sheet__head--row { justify-content: space-between; margin-bottom: 4px; } .sheet__x { border: 0; background: transparent; color: var(--ink-3); font-size: 16px; width: 36px; height: 36px; border-radius: 50%; } .sheet__x:hover { background: var(--brand-soft); color: var(--ink); } body.cite-open .sheet--cite { transform: translateY(0); } body.cite-open .sheet-backdrop--cite { opacity: 1; pointer-events: auto; } @media (min-width: 900px) { .sheet--cite { width: 600px; max-height: calc(100vh - 48px); } body.cite-open .sheet--cite { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } } .notice--tight { margin: 12px 0; } .seg { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 10px; } .seg__btn { flex: 1; border: 0; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13px; padding: 8px 6px; border-radius: 7px; } .seg__btn.is-active { background: var(--card); color: var(--brand-700); box-shadow: var(--shadow); } .cite-box { margin: 0 0 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: 13.5px/1.6 var(--font); white-space: pre-wrap; word-break: break-word; color: var(--ink); max-height: 220px; overflow: auto; user-select: all; } /* ---------- Sorotan kata kunci pencarian ---------- */ mark.hl, ::target-text { background: #FFF176; color: inherit; padding: 0 2px; border-radius: 3px; } :root[data-theme="dark"] mark.hl, :root[data-theme="dark"] ::target-text { background: #7A6A00; color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) mark.hl, :root:not([data-theme="light"]) ::target-text { background: #7A6A00; color: #fff; } } .hl-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin: 10px 0 2px; } .hl-info a { margin-left: 2px; } /* ---------- Saklar bahasa terjemah (ID / EN) ---------- */ .langsw { display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 8px 0 6px; } .langsw__btn { border: 0; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; } .langsw__btn.is-active { background: var(--brand-700); color: #fff; } :root[data-theme="dark"] .langsw__btn.is-active { color: #0F140F; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .langsw__btn.is-active { color: #0F140F; } } /* ---------- Menu bahasa antarmuka & RTL ---------- */ .appbar__langcode { font-size: 10px; font-weight: 700; margin-inline-start: 2px; } .langmenu { position: fixed; z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: none; min-width: 150px; } .langmenu.is-open { display: grid; gap: 2px; } .langmenu__item { border: 0; background: transparent; color: var(--ink); text-align: start; padding: 9px 12px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; } .langmenu__item:hover { background: var(--brand-soft); } .langmenu__item.is-active { color: var(--brand-700); font-weight: 700; } .footer__lang { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; } .footer__lang .langmenu__item { font-size: 12.5px; padding: 5px 10px; } [dir="rtl"] .terjemah[lang="id"], [dir="rtl"] .terjemah[lang="en"], [dir="rtl"] .hitem__text, [dir="rtl"] .cite-box, [dir="rtl"] .hitem__title { direction: ltr; text-align: left; } [dir="rtl"] .appbar__nav a, [dir="rtl"] .bottomnav a { font-family: var(--font); } [dir="rtl"] .langsw, [dir="rtl"] .seg { direction: ltr; } /* ---------- App bar ponsel: bahasa & tema masuk menu ⋮ agar judul kitab lega ---------- */ .appbar__desktop { display: none; } @media (min-width: 900px) { .appbar__desktop { display: inline-flex; } } .appmenu { min-width: 200px; } .appmenu .langmenu__item { display: flex; align-items: center; gap: 10px; } .appmenu .langmenu__item svg { flex: none; } .appmenu__label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 2px; border-top: 1px solid var(--line); margin-top: 4px; } @media (min-width: 900px) { .appmenu__label, .appmenu [data-ui], .appmenu .js-theme { display: none; } } .kitabrow__rujukan { color: var(--brand-700); font-size: 12px; margin-top: 2px; } /* ---------- Halaman konten (tema/tanya/doa/momen/hari-ini/bab) ---------- */ .konten__h1 { font-size: 24px; font-weight: 700; margin: 18px 0 8px; line-height: 1.25; } .konten__lead { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; } .konten__jawaban { font-size: 15.5px; line-height: 1.7; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip--lg { font-size: 13.5px; padding: 8px 14px; border-radius: 999px; } .arab--kecil { font-size: 22px; line-height: 1.9; margin: 6px 0 8px; } .hitem--besar { display: block; padding: 18px; } .hitem--besar .hitem__text { -webkit-line-clamp: 6; font-size: 16px; } .doa__latin { font-size: 15.5px; color: var(--ink-2); margin: 10px 0 6px; } .doa__terjemah { font-size: 16px; margin: 0 0 8px; } .promo--kecil { padding: 22px 20px; display: block; margin: 22px 0; } .promo--kecil .promo__stores { margin-top: 12px; justify-content: flex-start; } .momen { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #2E7D32, #1B5E20); color: #fff; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .momen:hover { text-decoration: none; filter: brightness(1.05); } .momen__kicker { font-weight: 700; font-size: 14px; margin-bottom: 2px; } .momen__text { font-size: 13px; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .momen .btn { flex: none; }