/* ============================================================================ AMAADOR ISLAM — site override (baby-steps-islam.com) · Design 3.0 Loads AFTER amaador-design-system.css AND styles.css. 1) Sets the site accent. 2) Remaps styles.css's legacy token vocabulary (--bg/--gold/--emerald/...) onto the monochrome Design 3.0 palette so every token-driven rule + inline style re-skins at once. No hex left driving color. RTL/Arabic is preserved: --font-ar stays Tajawal, layout direction untouched. ============================================================================ */ :root { --accent: #C8CAD8; } /* Design 3.0: chrome (was #1A5C6B teal — a hue leak). Drives nav-active underline / focus. */ :root{ /* backgrounds → monochrome */ --bg:#07080F; --bg-2:#040508; --navy:#0C0D18; --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.08); /* borders */ --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.09); /* ink */ --ink:#F2F3FA; --ink-dim:#B8BAD0; --ink-faint:#6E7090; --white:#FFFFFF; /* accents → chrome (monochrome). No colored jewel fills. Kept under the old gold and emerald token names so every existing component re-themes to chrome at once. */ --gold:#C8CAD8; --gold-2:#E8EAF0; --gold-deep:#9496AA; --emerald:#9496AA; --emerald-2:#C8CAD8; /* gradients → dark-to-chrome, no color */ --grad-gold:linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA); --grad-emer:linear-gradient(110deg,#C8CAD8,#9496AA); --grad-white:linear-gradient(135deg,#FFFFFF 0%,#E8EAF0 100%); /* colored shadows/glow → neutralised toward white/chrome */ --shadow-gold:0 18px 60px -20px rgba(255,255,255,.14); --shadow-white:0 22px 64px -18px rgba(255,255,255,.30); --glow:0 0 0 1px rgba(255,255,255,.16),0 0 50px -10px rgba(255,255,255,.20); /* fonts → Design 3.0. KEEP Tajawal for Arabic (--font-ar). */ --font-body:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --font-display:'Lora','Georgia',serif; --font-ar:'Tajawal','Amiri','Scheherazade New',serif; } /* Belt-and-suspenders: never let a Latin display/body font override Arabic. */ [lang="ar"], [dir="rtl"], .arabic, .phero__ar, .font-ar, [class*="arabic"], [class*="-ar"]{ font-family:var(--font-ar); } /* CTA / primary buttons resolve to Design 3.0 white on the monochrome base. */ :root{ --cta:#FFFFFF; } /* ===== 2026-07-04 glossy-monochrome polish ===== */ /* --------------------------------------------------------------------------- [1] MONOCHROME ENFORCEMENT — kill saturated-hue leaks in styles.css that bypass the token vocabulary (hardcoded hex / rgb glows). Token-driven color (--gold*/--emerald*/--grad-*/--glow) is already remapped to chrome above; these are the hardcoded stragglers. Neutralise each to the chrome ladder. --------------------------------------------------------------------------- */ /* .science-box — indigo #6366f1/#818cf8/#a5b4fc/#c7d2fe fill, border, bar, text */ .science-box{ background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important; border:1px solid rgba(255,255,255,.14) !important; } .science-box::before{ background:linear-gradient(180deg,#C8CAD8,#9496AA) !important; } .science-box__head{ color:#9496AA !important; } .sunnah-card__why{ color:#B8BAD0 !important; } .sunnah-card__why strong{ color:#E8EAF0 !important; } /* .donate-cta__btn — pink #e0556b icon / hover border+text */ .donate-cta__btn svg{ color:#C8CAD8 !important; } .donate-cta__btn:hover{ border-color:rgba(255,255,255,.30) !important; color:#F2F3FA !important; } /* button drop-shadow glows: violet #8b5cf6 / blue #3b6dff / #5b8def -> neutral */ .btn--gold:hover{ box-shadow:0 26px 70px -26px rgba(255,255,255,.28) !important; } .btn--emer{ box-shadow:0 20px 60px -24px rgba(0,0,0,.55) !important; } .btn--blue:hover{ box-shadow:0 30px 76px -24px rgba(255,255,255,.30) !important; } /* .card hover sheen border — amber rgba(217,184,112,.5) -> white sheen */ .card::after{ background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 40%) !important; } /* nav active-underline: --accent drove a teal(#1A5C6B)/green(#1A6B4A) hue. Now chrome (set above), but pin it here so both palettes stay monochrome. */ :root,html,html[data-theme="dark"]{ --accent:#C8CAD8; } nav a.active{ border-bottom-color:#9496AA !important; } /* --accent on light: #C8CAD8 is pale chrome tuned for the dark canvas — against the new light warm-white background it would nearly vanish (both are similarly light), so darken it for visibility while staying monochrome. (2026-07-04e) */ html[data-theme="light"]{ --accent:#3D3F52; } /* --------------------------------------------------------------------------- [2] DARK THEME REASSERTION (light left OUT on purpose) — the shared core (amaador-design-system.css, not edited here) now ships a complete, correct light-theme token block under html[data-theme="light"] (light warm-white surfaces, dark ink, dark CTA — still monochrome). This block used to also redeclare these dark values on html[data-theme="light"], which forced dark under the light attribute and made the theme toggle a no-op (localStorage changed but the palette never did). Fixed 2026-07-04: dark values now only reassert on :root/html/html[data-theme="dark"]; html[data-theme="light"] is left alone so the core's real light tokens show through when toggled. --------------------------------------------------------------------------- */ :root,html,html[data-theme="dark"]{ --bg:#07080F; --bg-2:#040508; --navy:#0C0D18; --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.09); --ink:#F2F3FA; --ink-dim:#B8BAD0; --ink-faint:#6E7090; --white:#FFFFFF; --gold:#C8CAD8; --gold-2:#E8EAF0; --gold-deep:#9496AA; --emerald:#9496AA; --emerald-2:#C8CAD8; --grad-gold:linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA); --grad-emer:linear-gradient(110deg,#C8CAD8,#9496AA); color-scheme:dark; } html[data-theme="dark"] body,html body{ background:var(--bg) !important; color:var(--ink) !important; } /* --------------------------------------------------------------------------- [2a] PITCH THEME (OLED true-black refinement of dark) — mirrors the shared core's html[data-theme="pitch"] tier. This site remaps the core's own --bg-base/--bg-raised/etc. onto ITS OWN token names (--bg/--bg-2/--navy) above, so the core's pitch tokens never reach anything that reads this site's vocabulary. Push only the background-tier tokens to near-true-black; every other token (ink/line/panel/gold/emerald/gradients/color-scheme) is copied verbatim from the dark block directly above — pitch is a background-only refinement, not a new palette. RTL/Arabic untouched. --------------------------------------------------------------------------- */ html[data-theme="pitch"]{ --bg:#000000; --bg-2:#000000; --navy:#050505; --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.09); --ink:#F2F3FA; --ink-dim:#B8BAD0; --ink-faint:#6E7090; --white:#FFFFFF; --gold:#C8CAD8; --gold-2:#E8EAF0; --gold-deep:#9496AA; --emerald:#9496AA; --emerald-2:#C8CAD8; --grad-gold:linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA); --grad-emer:linear-gradient(110deg,#C8CAD8,#9496AA); color-scheme:dark; } html[data-theme="pitch"] body{ background:var(--bg) !important; color:var(--ink) !important; } /* Light-appropriate equivalent, kept for robustness against this site's own legacy CSS (styles.css has no light-mode rules of its own) — warm off-white surface + dark ink, so body background/color always resolve correctly even if a legacy rule elsewhere targets `body` directly with a hardcoded value. */ html[data-theme="light"] body{ background:#F2F1EC !important; color:#1A1B22 !important; } /* --------------------------------------------------------------------------- [2b] LIGHT THEME TOKEN COMPLETION (2026-07-04c) — the block above only ever set a body-level background/color fallback; every component that consumes --panel/--ink/--gold/--emerald/--line/--cta/etc. DIRECTLY (cards, buttons, nav, science-box, sunnah-card) had no light value to read and stayed dark even after the toggle flipped html[data-theme]. Give every one of this site's own legacy tokens (the styles.css vocabulary remapped at the top of this file) a real light-mode value here, mirroring the shared core's own dark<->light inversion (amaador-design-system.css --bg-*/--text-*/--chrome-*) luminance-for-luminance so both token vocabularies agree. Monochrome only. --------------------------------------------------------------------------- */ html[data-theme="light"]{ /* backgrounds/surfaces -> warm off-white ladder (mirrors core --bg-base/-raised/-void) */ --bg:#F2F1EC; --bg-2:#FAF9F6; --navy:#FFFFFF; --panel:rgba(10,10,15,.045); --panel-2:rgba(10,10,15,.07); /* borders -> black-based subtle tints (mirrors core --border-default/-strong) */ --line:rgba(10,10,15,.16); --line-soft:rgba(10,10,15,.08); /* ink -> dark ladder, darkest = most important (mirrors core --text-primary/-secondary/-tertiary) */ --ink:#14151C; --ink-dim:#43465A; --ink-faint:#75778C; /* accents -> darkened chrome so they stay visible on the light canvas (mirrors core --chrome-bright/-mid/-dim inverted: light chrome greys were tuned for a near-black canvas and would nearly vanish on off-white) */ --gold:#3D3F52; --gold-2:#202235; --gold-deep:#6B6E85; --emerald:#6B6E85; --emerald-2:#3D3F52; /* gradients -> light-to-dark chrome, no color */ --grad-gold:linear-gradient(100deg,#202235,#3D3F52 55%,#6B6E85); --grad-emer:linear-gradient(110deg,#3D3F52,#6B6E85); --grad-white:linear-gradient(135deg,#14151C 0%,#2A2C3D 100%); /* shadows/glow -> lighter, tighter, warm-dark-grey at low opacity (not high-opacity black like dark mode) so they read as soft depth, not murk */ --shadow-gold:0 16px 40px -18px rgba(17,17,16,.18); --shadow-white:0 18px 48px -16px rgba(17,17,16,.14); --glow:0 0 0 1px rgba(10,10,15,.10),0 0 40px -12px rgba(10,10,15,.16); color-scheme:light; } /* CTA -> flips to a DARK fill for light mode; a white CTA vanishes on a light canvas (mirrors core --cta-bg:#14151C / --cta-text:#FFFFFF under light). */ html[data-theme="light"]{ --cta:#14151C; } /* --------------------------------------------------------------------------- [3] GLOSS REINFORCEMENT — user wants GLOSSY, not flat matte. Layer a subtle top-light gradient + inset highlight over this site's real surface classes so they read as polished glass. Uses background-image (keeps any base-color/blur from styles.css intact). Loads last -> wins. --------------------------------------------------------------------------- */ .card,.glass,.science-box,.hadith-box,.sunnah-card,.angel-card,.aff-box, .next-banner,.tracker__panel,.ptools__panel,.news__box,.modal__box, .fab-panel,.imgcard{ background-image:linear-gradient(158deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.015) 55%,transparent 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.5) !important; } /* --------------------------------------------------------------------------- [4] SELECTOR OVER-MATCH FIX — .chapter-label is a FLEX CONTAINER (number + rule + Arabic label), but the core's [class*="label"] rule force-uppercases and shrinks it to 11px, cascading text-transform onto its children and squashing the Arabic. Reset the container so its children render at their intended size (the child __num/__ar already set their own font-size). --------------------------------------------------------------------------- */ .chapter-label{ text-transform:none !important; font-size:inherit !important; letter-spacing:normal !important; } .chapter-label__ar{ text-transform:none !important; } /* --------------------------------------------------------------------------- [5] CONTRAST / READABILITY — inputs to the dark-white ladder on the glossy base so field text never renders dark-on-dark; placeholder legible-but-muted. --------------------------------------------------------------------------- */ input,textarea,select{ background:#0C0D18 !important; color:#F2F3FA !important; border:1px solid rgba(255,255,255,.16) !important; } input::placeholder,textarea::placeholder{ color:#6E7090 !important; opacity:1; } /* --------------------------------------------------------------------------- [6] RTL / ARABIC GUARD — keep Arabic RTL, Tajawal, comfortable leading, and dark-white legibility. Nothing above touches direction; this reasserts it. --------------------------------------------------------------------------- */ [dir="rtl"],[lang="ar"],.arabic,.phero__ar,.hadith-box__ar,.angel-card__ar, .chapter-label__ar,[class*="arabic"]{ direction:rtl; font-family:var(--font-ar) !important; line-height:1.9; } [dir="rtl"],[lang="ar"]{ color:var(--ink); } /* ===== 2026-07-04b round-2 polish ===== */ /* Static analysis. Load order: amaador-design-system.css (FIRST, core, not edited) -> styles.css -> THIS file (LAST, wins). Core now (a) forces eyebrows/labels + active-nav to chrome, (b) turns every `nav a` into a padded pill, (c) makes .btn--solid/cta-btn glossy white, (d) adds header sheen. This block kills the residual saturated leaks the round-1 pass missed (mostly in .btn--light and on the brand palette page), forces THIS site's real hero CTA (.btn--light) to glossy white, and reverses two `nav a`-pill side-effects (logo + chapter-nav tab strip). Monochrome only; additive; layout-preserving; reversible. */ /* --------------------------------------------------------------------------- [R2-1] RESIDUAL COLOR-LEAK KILL. styles.css tokens (--gold*/--emerald*/ --grad-*/--shadow-gold) are already remapped to chrome in the :root blocks above, and the .btn--gold/.btn--emer/.btn--blue HOVER glows were neutralised in round-1. These are the stragglers round-1 left behind — each a hardcoded saturated hue that bypasses the token vocabulary. Force each to the chrome ladder with a specific selector + !important so it beats the source rule. --------------------------------------------------------------------------- */ /* .btn--light (styles.css L273-274): blue-tinted text #0c1426 + blue drop-glow rgba(190,212,255,.4). This IS this site's hero primary CTA (see [R2-2]). */ .btn--light{ color:#04050A !important; } .btn--light:hover{ box-shadow:0 30px 70px -22px rgba(255,255,255,.30) !important; filter:brightness(1.02) !important; } /* .btn--blue base + .btn--donate base ride --shadow-gold (remapped) — pin the drop-shadow to neutral here so no saturated glow can survive a token change. */ .btn--blue,.btn--donate{ box-shadow:0 22px 60px -24px rgba(255,255,255,.24) !important; } /* .science-box fill/border round-1 covered; pin its aurora-tinted RGBA fill rgba(99,102,241,.08/.02) + border rgba(99,102,241,.22) once more, belt-and- suspenders, in case specificity shifts. */ .science-box{ background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important; border-color:rgba(255,255,255,.14) !important; } /* NOTE (deliberately NOT neutralised): brand.html's #43C489 "Signal Good" and #E87070 "Signal Alert" are meaning-bearing status colors, shown only as documented palette swatches on the brand page — the allowed exception. Left intact so the swatch demo keeps its purpose. */ /* --------------------------------------------------------------------------- [R2-2] PRIMARY CTA -> GLOSSY WHITE. This site's hero call-to-action is `.btn btn--light` (index.html hero + `.btn--light.btn--lg`). styles.css backs it with var(--grad-white) (near-white) — upgrade it to the exact mandated glossy-white spec. Radius/padding come from .btn/.btn--lg and are untouched. --------------------------------------------------------------------------- */ .btn--light,.btn--light.btn--lg{ background:#FFFFFF !important; background-image:linear-gradient(180deg,#FFFFFF,#EDEFF5) !important; color:#04050A !important; border:1px solid #FFFFFF !important; } /* --------------------------------------------------------------------------- [R2-3] HEADER + NAV BUTTON REFINEMENT. (a) LOGO reset: the suite logo `.amaador-brand-logo` is a bare in (NOT inside