/** * Global dark/light theme for amanahfund.com — index, /blog, product overview deck. * Preference key: localStorage 'amanah-theme' ('dark' | 'light'). * Pages with class `po-deck` on use deck-local tokens; site chrome rules use :not(.po-deck). */ html[data-theme='dark']:not(.po-deck) { color-scheme: dark; --cream: #061e1b; --white: #132825; --ink: #eef6f4; --ink80: rgba(238, 246, 244, 0.88); --ink60: rgba(238, 246, 244, 0.58); --ink40: rgba(238, 246, 244, 0.36); --ink20: rgba(238, 246, 244, 0.16); --ink10: rgba(238, 246, 244, 0.08); /* blog listing & articles */ --ink70: rgba(238, 246, 244, 0.72); --ink50: rgba(238, 246, 244, 0.52); --ink30: rgba(238, 246, 244, 0.34); --wht: #152e2c; } html:not(.po-deck)[data-theme='dark'] body:not(.po-deck-body) { background: var(--cream); color: var(--ink); } /* ── Homepage (index.html) ── */ html:not(.po-deck)[data-theme='dark'] .pricing { background: #0c1917; } html:not(.po-deck)[data-theme='dark'] .announce { background: #0a2e2a; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] nav:not(.chrome-dots) { background: rgba(6, 30, 27, 0.92); border-color: rgba(255, 255, 255, 0.09); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } html:not(.po-deck)[data-theme='dark'] nav.scrolled:not(.chrome-dots) { background: rgba(6, 30, 27, 0.97); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } html:not(.po-deck)[data-theme='dark'] .nav-wordmark { color: #fff; } html:not(.po-deck)[data-theme='dark'] .nav-links a:not(.nav-cta) { color: rgba(255, 255, 255, 0.55); } html:not(.po-deck)[data-theme='dark'] .nav-links a:not(.nav-cta):hover { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .nav-cta { background: var(--t600); box-shadow: 0 2px 12px rgba(20, 93, 86, 0.35); } html:not(.po-deck)[data-theme='dark'] .nav-cta:hover { background: var(--t500) !important; box-shadow: 0 4px 16px rgba(32, 144, 137, 0.4); } html:not(.po-deck)[data-theme='dark'] .nav-ham span { background: #fff; } html[data-theme='dark'] .theme-toggle { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.65); } html[data-theme='dark'] .theme-toggle:hover { border-color: rgba(102, 208, 200, 0.45); color: var(--t300); background: rgba(255, 255, 255, 0.04); } html:not(.po-deck)[data-theme='dark'] .drawer { background: #0a2e2a; border-left: 1px solid rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] .drawer-logo { color: #fff; } html:not(.po-deck)[data-theme='dark'] .drawer-close { color: rgba(255, 255, 255, 0.45); } html:not(.po-deck)[data-theme='dark'] .drawer-links a { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.07); } html:not(.po-deck)[data-theme='dark'] .drawer-cta { background: var(--t600); } html:not(.po-deck)[data-theme='dark'] .section-title { color: var(--ink); } html:not(.po-deck)[data-theme='dark'] .eyebrow { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .eyebrow::before, html:not(.po-deck)[data-theme='dark'] .eyebrow::after { background: var(--t400); } html:not(.po-deck)[data-theme='dark'] .bc:not(.accent):not(.gold-accent) { background: #152e2c; border-color: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .bc:not(.accent):not(.gold-accent):hover { border-color: rgba(102, 208, 200, 0.35); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } html:not(.po-deck)[data-theme='dark'] .bc:not(.accent) h3 { color: #fff; } html:not(.po-deck)[data-theme='dark'] .bc:not(.accent) p { color: rgba(255, 255, 255, 0.55); } html:not(.po-deck)[data-theme='dark'] .bc:not(.accent) .bc-icon { background: rgba(32, 144, 137, 0.2) !important; } html:not(.po-deck)[data-theme='dark'] .bc.gold-accent { background: linear-gradient(145deg, rgba(221, 165, 32, 0.14), rgba(221, 165, 32, 0.06)); border-color: rgba(221, 165, 32, 0.28); } html:not(.po-deck)[data-theme='dark'] .bc.gold-accent h3, html:not(.po-deck)[data-theme='dark'] .bc.gold-accent p { color: rgba(255, 255, 255, 0.88); } html:not(.po-deck)[data-theme='dark'] .bc.gold-accent p { color: rgba(255, 255, 255, 0.55) !important; } html:not(.po-deck)[data-theme='dark'] .halal-cat { background: rgba(20, 93, 86, 0.22); border-color: rgba(52, 181, 171, 0.28); color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .halal-cat.flagged { background: rgba(220, 38, 38, 0.12); border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; } html:not(.po-deck)[data-theme='dark'] .goal-name { color: #fff; } html:not(.po-deck)[data-theme='dark'] .goal-pct { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .goal-bar { background: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .how { background: #061e1b; border-color: rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] .step { background: #0f3532; border-color: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .step h3 { color: #fff; } html:not(.po-deck)[data-theme='dark'] .step p { color: rgba(255, 255, 255, 0.52); } html:not(.po-deck)[data-theme='dark'] .ea-section { background: #040f0d; } html:not(.po-deck)[data-theme='dark'] .benefit { background: #152e2c; border-color: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .benefit h3 { color: #fff; } html:not(.po-deck)[data-theme='dark'] .benefit p { color: rgba(255, 255, 255, 0.55); } html:not(.po-deck)[data-theme='dark'] .benefit-icon[style*='background'] { filter: brightness(0.95); opacity: 0.95; } html:not(.po-deck)[data-theme='dark'] .signup { background: #0a2e2a; } html:not(.po-deck)[data-theme='dark'] .signup-header .eyebrow { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .form-group label { color: rgba(255, 255, 255, 0.75); } html:not(.po-deck)[data-theme='dark'] .form-group input, html:not(.po-deck)[data-theme='dark'] .form-group select { background: #132825; border-color: rgba(255, 255, 255, 0.14); color: #fff; } html:not(.po-deck)[data-theme='dark'] .form-group input::placeholder { color: rgba(255, 255, 255, 0.35); } html:not(.po-deck)[data-theme='dark'] .form-submit button { background: var(--t600); } html:not(.po-deck)[data-theme='dark'] .form-submit button:hover { background: var(--t500); } html:not(.po-deck)[data-theme='dark'] .f-msg.success { background: rgba(20, 93, 86, 0.25); border-color: rgba(52, 181, 171, 0.4); color: var(--t200); } html:not(.po-deck)[data-theme='dark'] .faq { background: #061e1b; } html:not(.po-deck)[data-theme='dark'] .faq-item { background: #152e2c; border-color: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .faq-q { color: #fff; } html:not(.po-deck)[data-theme='dark'] .faq-q:hover { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .faq-a-inner { color: rgba(255, 255, 255, 0.58); } html:not(.po-deck)[data-theme='dark'] .contact { background: #0a2e2a; border-color: rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] .contact-info h2 { color: #fff; } html:not(.po-deck)[data-theme='dark'] .contact-info p, html:not(.po-deck)[data-theme='dark'] .contact-link { color: rgba(255, 255, 255, 0.55); } html:not(.po-deck)[data-theme='dark'] .contact-link:hover { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .contact-form input, html:not(.po-deck)[data-theme='dark'] .contact-form textarea { background: #132825; border-color: rgba(255, 255, 255, 0.14); color: #fff; } html:not(.po-deck)[data-theme='dark'] .ov-p { background: #152e2c; } html:not(.po-deck)[data-theme='dark'] .ov-h { border-color: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .ov-h h2 { color: #fff; } html:not(.po-deck)[data-theme='dark'] .ov-b { color: rgba(255, 255, 255, 0.65); } html:not(.po-deck)[data-theme='dark'] .ov-b h3 { color: #fff; } /* ── Blog index + articles (/blog/*.html) ── */ /* Hero H1 uses var(--wht) in page inline CSS for “white”; dark theme remaps --wht to a dark card color. */ html:not(.po-deck)[data-theme='dark'] .hero-blog h1 { color: #fff; } html:not(.po-deck)[data-theme='dark'] .nav-n { color: #fff; } html:not(.po-deck)[data-theme='dark'] nav:not(.chrome-dots) { background: rgba(6, 30, 27, 0.92) !important; border-color: rgba(255, 255, 255, 0.09) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } html:not(.po-deck)[data-theme='dark'] .nav-r a:not(.nav-cta) { color: rgba(255, 255, 255, 0.55); } html:not(.po-deck)[data-theme='dark'] .nav-r a:not(.nav-cta):hover { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .nav-cta { background: var(--t600) !important; color: #fff !important; } html:not(.po-deck)[data-theme='dark'] .nav-cta:hover { background: var(--t500) !important; } html:not(.po-deck)[data-theme='dark'] .featured-card, html:not(.po-deck)[data-theme='dark'] .article-card { background: #152e2c; border-color: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .featured-body h2, html:not(.po-deck)[data-theme='dark'] .article-card h2, html:not(.po-deck)[data-theme='dark'] .rel-card h3 { color: var(--ink); } html:not(.po-deck)[data-theme='dark'] .featured-body p, html:not(.po-deck)[data-theme='dark'] .article-card p, html:not(.po-deck)[data-theme='dark'] .rel-card p { color: var(--ink50); } html:not(.po-deck)[data-theme='dark'] .article-tag { background: rgba(20, 93, 86, 0.25); border-color: rgba(52, 181, 171, 0.25); color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .section-label { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .section-label::after { background: rgba(102, 208, 200, 0.35); } html:not(.po-deck)[data-theme='dark'] .article-footer { border-color: rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] article h2 { color: var(--ink); } html:not(.po-deck)[data-theme='dark'] article h3 { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] article p, html:not(.po-deck)[data-theme='dark'] article ul, html:not(.po-deck)[data-theme='dark'] article ol { color: var(--ink70); } html:not(.po-deck)[data-theme='dark'] article strong { color: var(--ink); } html:not(.po-deck)[data-theme='dark'] .verse { background: rgba(20, 93, 86, 0.22); border-left-color: var(--t500); } html:not(.po-deck)[data-theme='dark'] .verse p { color: var(--t200); } html:not(.po-deck)[data-theme='dark'] .tbl th { color: #fff !important; } html:not(.po-deck)[data-theme='dark'] .tbl td { border-bottom-color: rgba(255, 255, 255, 0.1); color: var(--ink70); } html:not(.po-deck)[data-theme='dark'] .tbl tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); } html:not(.po-deck)[data-theme='dark'] .related h2 { color: var(--ink); } html:not(.po-deck)[data-theme='dark'] .rel-card { background: #152e2c; border-color: rgba(255, 255, 255, 0.1); } html:not(.po-deck)[data-theme='dark'] .rel-tag { color: var(--t300); } /* ── blog/sm/social-media-posts.html (internal tool) ── */ html:not(.po-deck)[data-theme='dark'] body .page-header { border: 1px solid rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] .feature-title { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .tab-btn { background: #152e2c; border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.65); } html:not(.po-deck)[data-theme='dark'] .tab-btn:hover { border-color: rgba(102, 208, 200, 0.45); color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .platform-card { background: #1a3230; border-color: rgba(255, 255, 255, 0.12); } html:not(.po-deck)[data-theme='dark'] .platform-card-header { border-bottom-color: rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] .platform-card .platform-label { color: rgba(255, 255, 255, 0.85); } html:not(.po-deck)[data-theme='dark'] .copy-btn { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } html:not(.po-deck)[data-theme='dark'] .post-body { color: rgba(255, 255, 255, 0.78); } html:not(.po-deck)[data-theme='dark'] .section-label { color: rgba(255, 255, 255, 0.45); border-top-color: rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] .hashtags { color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .visual-brief { background: rgba(20, 93, 86, 0.22); border-top-color: rgba(102, 208, 200, 0.25); color: rgba(255, 255, 255, 0.55); } html:not(.po-deck)[data-theme='dark'] .tweet-card { background: #1a3230; border-color: rgba(255, 255, 255, 0.12); } html:not(.po-deck)[data-theme='dark'] .tweet-item { border-bottom-color: rgba(255, 255, 255, 0.08); } html:not(.po-deck)[data-theme='dark'] .tweet-num { color: rgba(255, 255, 255, 0.45); } html:not(.po-deck)[data-theme='dark'] .tweet-text { color: rgba(255, 255, 255, 0.78); } html:not(.po-deck)[data-theme='dark'] .jump-nav { background: #152e2c; border-color: rgba(255, 255, 255, 0.12); } html:not(.po-deck)[data-theme='dark'] .jump-nav-label { color: rgba(255, 255, 255, 0.45); } html:not(.po-deck)[data-theme='dark'] .jump-link { background: rgba(20, 93, 86, 0.25); border-color: rgba(52, 181, 171, 0.35); color: var(--t300); } html:not(.po-deck)[data-theme='dark'] .feature-divider { border-top-color: rgba(255, 255, 255, 0.12); } /* ── Toggle control ── */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid var(--ink20); background: transparent; color: var(--ink60); transition: color 0.2s, border-color 0.2s, background 0.2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--t300); color: var(--t700); background: var(--t50); } .theme-toggle .theme-toggle-dark-icon { display: inline; } .theme-toggle .theme-toggle-light-icon { display: none; } .theme-toggle .theme-toggle-label-light { display: none; } html[data-theme='dark'] .theme-toggle .theme-toggle-light-icon { display: inline; } html[data-theme='dark'] .theme-toggle .theme-toggle-dark-icon { display: none; } html[data-theme='dark'] .theme-toggle .theme-toggle-label-dark { display: none; } html[data-theme='dark'] .theme-toggle .theme-toggle-label-light { display: inline; } @media (max-width: 640px) { .theme-toggle:not(.theme-toggle-drawer):not(.theme-toggle-float) .theme-toggle-label { display: none; } /* Icon-only bar toggle stays usable (homepage nav-trailing) */ .theme-toggle-bar { min-width: 40px; min-height: 40px; padding: 8px; justify-content: center; } } .theme-toggle-float { position: fixed; top: 16px; right: 16px; z-index: 10000; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); } html[data-theme='dark'] .theme-toggle-float { background: rgba(10, 46, 42, 0.95); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.75); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); } html[data-theme='dark'] .theme-toggle-float:hover { background: rgba(15, 53, 50, 0.98); } /* ── Product overview deck (amanah-product-overview.html, html.po-deck) ── */ html.po-deck:not([data-theme='dark']) { --bg: #eef4f2; --surface: #ffffff; --card: #f5faf9; --card2: #e8f3f0; --border: rgba(12, 25, 23, 0.12); --border2: rgba(12, 25, 23, 0.2); --text: #0c1917; --t60: rgba(12, 25, 23, 0.62); --t40: rgba(12, 25, 23, 0.42); --t20: rgba(12, 25, 23, 0.14); --t08: rgba(12, 25, 23, 0.06); --teal: #145d56; --teal-mid: #209089; --teal-hi: #1a766d; --teal-100: #d3f2ef; --gold: #dda520; --gold-hi: #c4941c; --gold-bg: rgba(221, 165, 32, 0.12); --gold-bdr: rgba(221, 165, 32, 0.35); --success: #059669; --danger: #dc2626; } html.po-deck:not([data-theme='dark']) .slide::before { background-image: radial-gradient(circle, rgba(12, 25, 23, 0.06) 1px, transparent 1px); } html.po-deck:not([data-theme='dark']) .slide::after { opacity: 0.04; } html.po-deck:not([data-theme='dark']) .wm { color: rgba(12, 25, 23, 0.045); } html.po-deck:not([data-theme='dark']) .chrome-header, html.po-deck:not([data-theme='dark']) .chrome-footer { background: rgba(255, 255, 255, 0.94); border-color: rgba(12, 25, 23, 0.1); } html.po-deck:not([data-theme='dark']) .chrome-logo { color: var(--text); } html.po-deck:not([data-theme='dark']) .chrome-counter { color: rgba(12, 25, 23, 0.45); } html.po-deck:not([data-theme='dark']) .chrome-counter strong { color: var(--teal-hi); } html.po-deck:not([data-theme='dark']) .chrome-doc-badge { color: rgba(12, 25, 23, 0.55); background: rgba(12, 25, 23, 0.06); border-color: rgba(12, 25, 23, 0.12); } html.po-deck:not([data-theme='dark']) .chrome-slide-name { color: rgba(12, 25, 23, 0.45); } html.po-deck:not([data-theme='dark']) .nav-btn { border-color: rgba(12, 25, 23, 0.15); color: rgba(12, 25, 23, 0.65); } html.po-deck:not([data-theme='dark']) .nav-btn:hover { border-color: var(--teal-hi); color: var(--teal-hi); } html.po-deck:not([data-theme='dark']) .chrome-dot { background: rgba(12, 25, 23, 0.22); } html.po-deck:not([data-theme='dark']) .chrome-dot:hover:not(.active) { background: rgba(12, 25, 23, 0.4); } html.po-deck:not([data-theme='dark']) .chrome-dot.active { background: var(--teal-hi); } html.po-deck:not([data-theme='dark']) .slide-cover { background: linear-gradient(155deg, #f7fbfa 0%, #e8f5f2 55%, #dff0ec 100%); } html.po-deck:not([data-theme='dark']) .theme-toggle:hover { border-color: var(--teal-hi); color: var(--teal-hi); background: rgba(20, 93, 86, 0.08); } /* Deck toggle: avoid undefined --t300 / landing tokens */ html.po-deck[data-theme='dark'] .theme-toggle:hover { border-color: rgba(102, 208, 200, 0.45); color: var(--teal-hi); background: rgba(255, 255, 255, 0.06); } html.po-deck:not([data-theme='dark']) .theme-toggle { border-color: rgba(12, 25, 23, 0.18); color: rgba(12, 25, 23, 0.65); } .theme-toggle-po { padding: 6px 12px; font-size: 11.5px; border-radius: 8px; } /* PO deck uses --border/--t60 instead of marketing --ink* tokens */ html.po-deck .theme-toggle { border-color: var(--border); color: var(--t60); } /* Mobile / narrow viewports: never let flex shrink hide the theme control */ .theme-toggle-bar, .nav-r .theme-toggle, .chrome-right .theme-toggle { flex-shrink: 0; } .chrome-right { flex-shrink: 0; }