/* Theme Name: Islamnow Theme URI: https://islamnow.com Description: A warm, editorial Islamic-knowledge child theme built on top of Avanam. Deep emerald and gold palette, verse-of-the-day and hadith-of-the-day highlight cards, a topic icon grid, article listings with a "Popular Articles" sidebar, a Hijri calendar widget, a newsletter box and a Quran call-to-action band. Fully in English and ready to translate. Author: Islamnow Author URI: https://islamnow.com Template: avanam Version: 1.20.3 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: islamnow */ /* ========================================================================== 1. Palette — overrides Avanam's global CSS custom properties. Deep emerald + warm gold + cream, matching the Islamnow brand mockup. Edit these nine values in Customizer > Colors as well if you want the block-editor color picker to stay in sync; these !important overrides guarantee the front end always matches even if Customizer values differ. ========================================================================== */ :root { --global-palette1: #C9A24B !important; /* Accent — gold */ --global-palette2: #154A3A !important; /* Accent alt — emerald */ --global-palette3: #16241D !important; /* Strongest text */ --global-palette4: #2B3A33 !important; /* Strong text */ --global-palette5: #5B6A62 !important; /* Medium text */ --global-palette6: #8A968F !important; /* Subtle text */ --global-palette7: #F3ECDC !important; /* Subtle background */ --global-palette8: #FBF7EE !important; /* Lighter background */ --global-palette9: #FFFFFF !important; /* White / offwhite */ --global-palette-highlight: #C9A24B !important; --global-palette-highlight-alt: #AD8636 !important; --global-palette-btn: #FFFFFF !important; --global-palette-btn-bg: #154A3A !important; --global-palette-btn-hover: #FFFFFF !important; --global-palette-btn-bg-hover: #0F2B22 !important; /* Islamnow-specific tokens, used across assets/css/islamnow.css */ --islamnow-green-900: #0F2B22; --islamnow-green-800: #154A3A; --islamnow-green-700: #1B5C48; --islamnow-gold: #C9A24B; --islamnow-gold-dark: #AD8636; --islamnow-gold-light: #E7D6A5; --islamnow-silver: #D6DAE0; --islamnow-cream: #FBF7EE; --islamnow-cream-alt: #F3ECDC; --islamnow-surface: #FFFFFF; --islamnow-ink: #16241D; --islamnow-ink-soft: #4C5850; --islamnow-border: #E7E0CC; --islamnow-font-body: 'Poppins', sans-serif; --islamnow-font-arabic: 'Amiri', serif; /* Theme-toggle transition, so light/dark doesn't snap harshly. Turned off automatically for users who prefer reduced motion — see the accessibility block in assets/css/islamnow.css. */ --islamnow-mode-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ========================================================================== 1b. Dark mode — activated by adding data-islamnow-theme="dark" to . assets/js/islamnow.js sets this attribute (from a saved preference or the OS-level prefers-color-scheme) before first paint, and toggles it when the header's light/dark button is used. Overriding the same custom properties here means every component that already reads them (ours and Avanam's own global-palette-based markup) goes dark automatically, with no per-component duplication needed. ========================================================================== */ html[data-islamnow-theme="dark"] { --global-palette3: #F3ECDC !important; /* Strongest text -> light on dark */ --global-palette4: #D8E1DB !important; /* Strong text */ --global-palette5: #A9B7AE !important; /* Medium text */ --global-palette6: #7C8B82 !important; /* Subtle text */ --global-palette7: #182119 !important; /* Subtle background -> dark surface */ --global-palette8: #0F1613 !important; /* Lighter background -> page bg */ --global-palette9: #1B2620 !important; /* White/offwhite -> card surface */ --islamnow-cream: #0F1613; --islamnow-cream-alt: #182119; --islamnow-surface: #1B2620; --islamnow-ink: #F3ECDC; --islamnow-ink-soft: #A9B7AE; --islamnow-border: #2A362E; } /* Respect the OS preference automatically when the visitor has never toggled manually (no data-islamnow-theme attribute set yet). JS still sets the attribute explicitly on load, so this media query mainly covers the brief instant before the inline bootstrap script runs, plus any context where JS is unavailable. */ @media ( prefers-color-scheme: dark ) { html:not( [data-islamnow-theme] ) { --global-palette3: #F3ECDC !important; --global-palette4: #D8E1DB !important; --global-palette5: #A9B7AE !important; --global-palette6: #7C8B82 !important; --global-palette7: #182119 !important; --global-palette8: #0F1613 !important; --global-palette9: #1B2620 !important; --islamnow-cream: #0F1613; --islamnow-cream-alt: #182119; --islamnow-surface: #1B2620; --islamnow-ink: #F3ECDC; --islamnow-ink-soft: #A9B7AE; --islamnow-border: #2A362E; } } body { font-family: var( --islamnow-font-body ); color: var( --islamnow-ink ); background: var( --islamnow-cream ); transition: var( --islamnow-mode-transition ); }