/* ============================================================================
AMAADOR WELLBEING & CONTENT — DESIGN 2.0 BRIDGE (site key: wellbeing)
----------------------------------------------------------------------------
This site's stylesheet (assets/style.css) is NOT --acc-driven: it exposes its
own token names (--bg,--bg-2,--panel,--ink,--ink-soft,--ink-faint,--line,
--teal/-deep/-soft,--gold/-soft/-deep,--terra,--shadow,--shadow-lg,--serif,
--sans). design2.css therefore cannot re-skin it by variable inheritance alone.
This bridge RE-POINTS those EXISTING tokens to the Design 2.0 matte palette,
with this site's signature accent = #43d9a3 (wellbeing green). Nothing is
renamed — only re-valued — so the whole site (header, cards, buttons, FABs,
links, shadows) inherits the matte-black skin. Load AFTER style.css and
design2.css. The injector forces data-theme="dark", so :root below is the
DARK (default) state; html[data-theme="light"] mirrors the light variant.
Radii/spacing are the SITE'S own (--radius:16px, --radius-sm:12px) and are
left untouched. Two hardcoded color literals in style.css that are NOT token
refs (.site-head glass bg, .nav-cta #8b5cf6 gradient) are patched at the end.
============================================================================ */
:root{
/* ---- signature accent (Design 2.0 maps this site to green #43d9a3) ---- */
--acc:#43d9a3; --acc2:#1fb37f; --acc-rgb:67,217,163;
/* ---- page canvas -> matte black ---- */
--bg:#0a0a0b;
--bg-2:#0f0f12;
/* ---- surfaces / cards -> low-opacity frosted glass on black ---- */
--panel:rgba(255,255,255,.045);
/* ---- ink / text -> warm off-white ramp ---- */
--ink:#f5f4f0;
--ink-soft:#d3d1c8;
--ink-faint:#8f8d84;
/* ---- hairline borders ---- */
--line:rgba(245,244,240,.09);
/* ---- PRIMARY accent family (was violet #7c3aed) -> wellbeing green ---- */
--teal:#43d9a3;
--teal-deep:#1fb37f;
--teal-soft:rgba(67,217,163,.12);
/* ---- SECONDARY / CTA family (was wellness green #059669) -> keep a warm
distinct-but-harmonious accent so gradients still read; use accent-deep
so CTA gradients (gold->terra) stay on-brand green ---- */
--gold:#43d9a3;
--gold-soft:rgba(67,217,163,.14);
--gold-deep:#1fb37f;
--terra:#1fb37f;
/* ---- shadows -> deep neutral black (were violet-tinted) ---- */
--shadow:0 2px 10px rgba(0,0,0,.5), 0 30px 70px -36px rgba(0,0,0,.85);
--shadow-lg:0 40px 100px -40px rgba(0,0,0,.9);
/* ---- typography -> Design 2.0 pairing (Fraunces display / Sora ui / Inter body).
The site uses --serif for headings and --sans for body. ---- */
--serif:"Fraunces","Georgia","Times New Roman",serif;
--sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* ============================================================================
LIGHT VARIANT (toggle via suite.js -> html[data-theme="light"])
Mirror the matte system's light structural values while keeping the green
accent, so the site's own tokens produce a coherent light theme too.
============================================================================ */
html[data-theme="light"]{
--acc:#1fb37f; --acc2:#158a61; --acc-rgb:31,179,127;
--bg:#f5f4f0;
--bg-2:#faf9f6;
--panel:#ffffff;
--ink:#121214;
--ink-soft:#33322f;
--ink-faint:#6d6b64;
--line:rgba(18,18,20,.10);
--teal:#1fb37f;
--teal-deep:#158a61;
--teal-soft:rgba(31,179,127,.10);
--gold:#1fb37f;
--gold-soft:rgba(31,179,127,.12);
--gold-deep:#158a61;
--terra:#158a61;
--shadow:0 2px 6px rgba(17,17,16,.06), 0 24px 60px -30px rgba(17,17,16,.32);
--shadow-lg:0 30px 80px -32px rgba(17,17,16,.36);
}
/* ============================================================================
HARDCODED-LITERAL PATCHES (these were NOT token refs in style.css)
============================================================================ */
/* GOTCHA 1: .site-head used a hardcoded light-lavender glass literal
rgba(250,245,255,.82). Re-point it to a dark frosted glass + hairline. */
.site-head{
background:rgba(14,14,17,.72) !important;
border-bottom:1px solid var(--line) !important;
box-shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5) !important;
}
/* GOTCHA 2: .nav-cta used a hardcoded #8b5cf6 violet in its gradient. Re-point
to the green accent gradient so the CTA matches the matte-green skin. */
.nav-links a.nav-cta{
background:linear-gradient(135deg, var(--teal), var(--teal-deep)) !important;
color:#0a0a0b !important;
}
/* Ensure primary buttons / brand mark read as accent-on-dark (they set
color:#fff on a green fill, which is fine, but harmonize text on the light-
accent primary button for contrast). */
.btn-primary{ color:#0a0a0b !important; }
/* ============================================================================
DESIGN 2.0 POLISH PASS (2026-07-01, per-site polish, wellbeing)
----------------------------------------------------------------------------
Appended, additive & reversible. Importers: every page's
(172 pages),
loaded LAST after style.css + design2.css. Four blocks:
P1 accent unification — retire the interim green (#43d9a3) and the old
violet (#7c3aed) / wellness-green (#059669) accents; everything now
rides the suite's UNIFIED platinum --acc/--acc2 (green survives ONLY
as success semantics: .badge-good).
P2 readability — patch every hardcoded LIGHT background / DARK text
literal in style.css + inline calc styles that broke on matte black.
P3 header/footer/chrome de-indigo — re-point the --hd-* header token
family and the violet footer to the matte palette.
P4 amc-* visitor counter — matte re-dress (its CSS is runtime-injected
after this sheet, hence !important throughout).
============================================================================ */
/* ---------- P1 · ACCENT UNIFICATION (platinum, both themes) ---------- */
/* Neutralize the stale green accent declared at the top of THIS file for the
no-data-theme edge case (design2.css already wins when data-theme is set). */
:root{ --acc:#c9ceda; --acc2:#9aa0bb; --acc-rgb:201,206,218; }
/* …and out-cascade this file's earlier light-variant green (it out-ordered
design2.css's slate light accent). */
html[data-theme="light"]{ --acc:#5a6274; --acc2:#7c86a0; --acc-rgb:90,98,116; }
/* Re-point the site's accent token families (earlier blocks in this file set
them to green literals) onto the unified accent — resolves per-theme. */
:root, html[data-theme="dark"], html[data-theme="light"]{
--teal:var(--acc); --teal-deep:var(--acc2); --teal-soft:rgba(var(--acc-rgb),.12);
--gold:var(--acc); --gold-soft:rgba(var(--acc-rgb),.14); --gold-deep:var(--acc2);
--terra:var(--acc2);
}
/* Accent-filled elements set color:#fff for the old violet/green fills; the
platinum fill is LIGHT in dark mode (needs dark text) and SLATE in light
mode (needs light text) -> var(--on-navy) flips correctly per theme. */
.btn-primary, .btn-primary:hover,
.btn-gold, .btn-gold:hover,
.subscribe .btn, .subscribe .btn:hover,
.donate-fab, .donate-fab:hover,
.fab-btn, .fab-btn:hover, .fab-btn:focus-visible{ color:var(--on-navy) !important; }
.cta-band, .cta-band h2, .zk-result, .zk-result .big{ color:var(--on-navy); }
.cta-band p, .zk-result .note{ color:var(--on-navy); opacity:.82; }
.cta-band small, .zk-result .lbl{ color:var(--on-navy); opacity:.65; }
/* nav CTA: kill BOTH violet !important hover (style.css:91) and the green
header CTA gradient (style.css:429-433, higher specificity + !important). */
.nav-links a.nav-cta, .nav-links a.nav-cta:hover,
.site-head .nav-links a.nav-cta, .site-head .nav-links a.nav-cta:hover{
background:linear-gradient(135deg, var(--acc), var(--acc2)) !important;
color:var(--on-navy) !important;
box-shadow:0 8px 18px rgba(0,0,0,.45) !important;
}
/* violet-tinted glows -> neutral black shadows */
.btn-primary{ box-shadow:0 8px 22px rgba(0,0,0,.5); }
.fab-btn{ box-shadow:0 14px 34px -10px rgba(0,0,0,.6); }
.fab-btn:hover, .fab-btn:focus-visible{ box-shadow:0 20px 44px -10px rgba(0,0,0,.65); }
.fab-panel{ box-shadow:0 24px 60px -16px rgba(0,0,0,.6); }
.donate-fab{ border-color:var(--line2); box-shadow:0 10px 28px rgba(0,0,0,.5); }
@keyframes donate-pulse{ /* same name = replaces style.css's violet pulse */
0%,100%{ box-shadow:0 10px 28px rgba(0,0,0,.45); }
50%{ box-shadow:0 10px 36px rgba(var(--acc-rgb),.35); }
}
/* brand mark: violet gradient + white arc -> platinum gradient + dark arc
(arc/dot recolored inside the data-URI; both base + header variants). */
.brand .mark, .site-head .brand .mark{
background:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%2017%20Q12%204%2020%2017'%20fill='none'%20stroke='%230a0a0b'%20stroke-width='2.3'%20stroke-linecap='round'/%3E%3Ccircle%20cx='12'%20cy='8.6'%20r='2'%20fill='%230a0a0b'/%3E%3C/svg%3E") center/26px 26px no-repeat,
linear-gradient(140deg, var(--acc) 0%, var(--acc2) 100%);
box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand:hover .mark, .site-head .brand:hover .mark{ box-shadow:0 9px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3); }
/* top accent hairline (was periwinkle/sage) -> platinum fade */
.zellige{ height:2px; background:linear-gradient(90deg,
rgba(var(--acc-rgb),0) 0%, rgba(var(--acc-rgb),.45) 45%,
rgba(var(--acc-rgb),.22) 78%, rgba(var(--acc-rgb),0) 100%); }
/* ---------- P2 · READABILITY — light-bg / dark-text literals ---------- */
/* WORST OFFENDER: article body text was #2b332e (near-black) on matte black */
.prose p, .prose ul, .prose ol{ color:var(--ink-soft); }
/* white-card literals -> matte surfaces (text tokens already resolve light) */
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line2); }
.btn-ghost:hover{ border-color:var(--acc); color:var(--acc); }
.hero .eyebrow{ background:var(--surface); border-color:var(--line2); color:var(--acc); }
.affiliate{ background:var(--surface); } /* was #fff gradient */
.lang-switch{ background:var(--surface); color:var(--txt); } /* was #fff */
.result-grid .cell{ background:var(--window); border-color:var(--line); } /* was rgba(255,255,255,.7) */
.result-card{ border-color:var(--line2); } /* was #ddd0fb */
/* form fields: #fff bg + (now light) --ink text = invisible input text in
every /tools/ calculator. Cover the shared .input family, the zakat page's
bespoke .zk fields and the CTA-band subscribe input. */
.input, select.input, textarea.input,
.zk input, .zk-cur-pick select,
.subscribe input{
background:var(--surface); color:var(--ink); border:1px solid var(--line2);
}
.input::placeholder, .zk input::placeholder, .subscribe input::placeholder{ color:var(--faint); }
select.input option, .zk-cur-pick select option,
.site-head .nav-links select option{ background:var(--bg3); color:var(--ink); }
/* callouts: cream/lavender literal fills + light borders */
.callout.note, .callout.warn{ border-color:var(--line2); }
.callout.tip, .callout.crisis{ border-color:var(--line2); background:var(--surface); }
/* light-literal tag pills + hover borders */
.tag.immig, .tag.life{ color:var(--acc); background:rgba(var(--acc-rgb),.12); }
.card:hover{ border-color:var(--line3); } /* was #ddd5c2 */
a.tool-card:hover{ border-color:var(--line3); } /* was #d8d0bf */
/* status badges: keep GREEN only where it means success */
.badge-good{ color:var(--good); background:rgba(67,196,137,.14); }
.badge-bad{ color:var(--bad); background:rgba(232,112,112,.14); } /* was #b91c1c on pink */
/* cinematic hero shells carried a purple-black literal (#0e0a1a) */
.aw-stage, .cine-hero{ background:var(--bg); }
/* ---------- P3 · HEADER / FOOTER / CHROME DE-INDIGO ---------- */
/* re-point the whole --hd-* header token family (dropdown, mobile sheet,
lang switch, hamburger all inherit) from slate-indigo to matte platinum */
:root{
--hd-bg-from:#111116; --hd-bg-to:#0a0a0b; --hd-hairline:var(--line);
--hd-brand:var(--ink); --hd-brand-soft:var(--muted);
--hd-nav:var(--txt); --hd-nav-hover:var(--ink); --hd-nav-hover-bg:rgba(var(--acc-rgb),.08);
--hd-active-bg:rgba(var(--acc-rgb),.14); --hd-active:var(--ink);
--hd-accent:var(--acc); --hd-accent-soft:rgba(var(--acc-rgb),.10);
--hd-dd-bg:#101014; --hd-dd-brd:var(--line2);
--hd-dd-hover:rgba(var(--acc-rgb),.12); --hd-dd-hover-text:var(--ink);
--hd-glow:rgba(var(--acc-rgb),.16); --hd-lang-bg:var(--surface);
}
.nav-dd-menu{ background:linear-gradient(180deg, #131318, var(--hd-dd-bg)); }
@media(max-width:880px){
.site-head .nav-links{ background:linear-gradient(180deg, #111116, #0a0a0b); }
}
/* footer: deep-violet block (#2e1065) -> matte panel */
.site-foot{ background:var(--bg2, #0f0f12); color:var(--muted); border-top:1px solid var(--line); }
.site-foot .brand, .site-foot .brand:hover, .site-foot h5{ color:var(--ink); }
.site-foot a{ color:var(--muted); }
.site-foot a:hover{ color:var(--ink); }
.site-foot p.tag-desc{ color:var(--muted); }
.foot-bottom{ border-top-color:var(--line); color:var(--muted); }
.foot-network{ border-top-color:var(--line); }
/* ---------- P4 · amc-* VISITOR COUNTER (runtime-injected CSS resists;
!important required — its