/* ============================================================================ Theme switching for WHMCS pages - driven by . is the source of truth (Nexus owns body[data-mode]; it doesn't touch html). The chrome (.ivo-app) + the login card (.au-wrap.ivo-app) theme natively via their own data-mode/accent (styles.css). This file themes the BODY + #main-body content. ============================================================================ */ /* ---- body / page background: follows accent (blue/coral) x mode (light/dark). html is included so the page bg matches on overscroll (no Nexus navy peeking through). ---- */ /* ONE continuous bg (accent glow + base) painted on ; chrome + content are transparent so the navbar and the body share a single seamless background (no two-block look). */ html[data-mode="dark"][data-accent="blue"] body{background:radial-gradient(1100px 720px at 8% -10%, color-mix(in srgb,#5b8cff 16%,transparent), transparent 55%), radial-gradient(900px 640px at 98% 2%, color-mix(in srgb,#86a8ff 10%,transparent), transparent 52%), #111827 !important} html[data-mode="dark"][data-accent="coral"] body{background:radial-gradient(1100px 720px at 8% -10%, color-mix(in srgb,#ff5a36 16%,transparent), transparent 55%), radial-gradient(900px 640px at 98% 2%, color-mix(in srgb,#ffb84d 9%,transparent), transparent 52%), #1a100c !important} html[data-mode="light"][data-accent="blue"] body{background:radial-gradient(1100px 720px at 8% -10%, color-mix(in srgb,#5b8cff 9%,transparent), transparent 55%), #eef3fc !important} html[data-mode="light"][data-accent="coral"] body{background:radial-gradient(1100px 720px at 8% -10%, color-mix(in srgb,#ff5a36 8%,transparent), transparent 55%), #fbf4f0 !important} /* base color on (overscroll) + make chrome/content transparent so the body bg is continuous */ html[data-mode="dark"][data-accent="blue"] {background:#111827 !important} html[data-mode="dark"][data-accent="coral"] {background:#1a100c !important} html[data-mode="light"][data-accent="blue"] {background:#eef3fc !important} html[data-mode="light"][data-accent="coral"]{background:#fbf4f0 !important} html[data-mode] #ivo-chrome-top, html[data-mode] section#main-body, html[data-mode] #main-body{background:transparent !important; background-image:none !important} /* neutral fallback (no/unknown accent) */ html[data-mode="dark"] body{background:#0c0e13} html[data-mode="light"] body{background:#f6f6f4} /* widgets/panels use the navy panel surface, never black */ html[data-mode] #main-body .card, html[data-mode] #main-body .panel, html[data-mode] #main-body .panel-body, html[data-mode] #main-body .ca-card, html[data-mode] #main-body .promo-container{background:var(--panel) !important} /* panel footers ("View More...", action strips): accent-cohesive surface, never neutral grey */ html[data-mode] #main-body .card-footer, html[data-mode] #main-body .panel-footer{background:var(--panel-2) !important; border-color:var(--line,var(--w-line)) !important} /* product/list wells inside cards inherit the card surface, never the neutral grey --w-panel */ html[data-mode] #main-body .card .list-group, html[data-mode] #main-body .panel .list-group{background:transparent !important} /* ---- #main-body content tokens: surfaces follow mode (both the ca --* set and the WHMCS-skin --w-* set) ---- */ html[data-mode="dark"] #main-body{ --w-bg:#0e1014;--w-bg2:#171a20;--w-panel:#181b22;--w-panel2:#1f232b;--w-line:#2b303a;--w-line2:#242935;--w-ink:#e7eaf0;--w-ink2:#b2b9c6;--w-ink3:#8b93a1; --bg:#08090b;--bg-2:#0d0f12;--panel:#101317;--panel-2:#161a20;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);--ink:#f3f5f7;--ink-2:#aab0ba;--ink-3:#7b818d;--ink-4:#565c66; } html[data-mode="light"] #main-body{ --w-bg:#f6f6f4;--w-bg2:#efeeea;--w-panel:#ffffff;--w-panel2:#f5f5f2;--w-line:rgba(15,18,22,.10);--w-line2:rgba(15,18,22,.16);--w-ink:#15171b;--w-ink2:#45494f;--w-ink3:#71757d; --bg:#f6f6f4;--bg-2:#efeeea;--panel:#ffffff;--panel-2:#f5f5f2;--line:rgba(15,18,22,.10);--line-2:rgba(15,18,22,.16);--ink:#15171b;--ink-2:#45494f;--ink-3:#71757d;--ink-4:#9aa0a8; } /* ---- accent follows data-accent (accent-text also depends on mode for contrast) ---- */ html[data-accent="blue"] #main-body{--accent:#5b8cff;--accent-bg:rgba(91,140,255,.14);--accent-line:rgba(91,140,255,.36);--w-acc-bg:rgba(91,140,255,.18)} html[data-accent="coral"] #main-body{--accent:#ff5a36;--accent-bg:rgba(255,90,54,.12);--accent-line:rgba(255,90,54,.34);--w-acc-bg:rgba(255,90,54,.16)} html[data-mode="dark"][data-accent="blue"] #main-body{--accent-text:#8fb0ff} html[data-mode="light"][data-accent="blue"] #main-body{--accent-text:#1d4ed8} html[data-mode="dark"][data-accent="coral"] #main-body{--accent-text:#ff7a57} html[data-mode="light"][data-accent="coral"] #main-body{--accent-text:#d8421f} /* page-bg + surface tokens tint with the accent so cards/panels (and the login card) match the tinted page bg */ html[data-mode="dark"][data-accent="blue"] #main-body{--bg:#111827;--bg-2:#172034;--panel:#161d2e;--panel-2:#1f2942} html[data-mode="dark"][data-accent="coral"] #main-body{--bg:#1a100c;--bg-2:#241711;--panel:#241812;--panel-2:#2f2018} html[data-mode="light"][data-accent="blue"] #main-body{--bg:#eef3fc;--bg-2:#e3ebf8;--panel:#ffffff;--panel-2:#eef3fc} html[data-mode="light"][data-accent="coral"] #main-body{--bg:#fbf4f0;--bg-2:#f4e8e1;--panel:#ffffff;--panel-2:#fbf4f0} /* whmcs-skin pins `body{background:var(--w-bg)!important}` and only redefines --w-bg on #main-body, so define the page-bg token at too -> body (and anything outside #main-body) inherits the accent tint */ html[data-mode="dark"][data-accent="blue"] {--w-bg:#111827;--w-bg2:#172034;--bg:#111827;--bg-2:#172034} html[data-mode="dark"][data-accent="coral"] {--w-bg:#1a100c;--w-bg2:#241711;--bg:#1a100c;--bg-2:#241711} html[data-mode="light"][data-accent="blue"] {--w-bg:#eef3fc;--w-bg2:#e3ebf8;--bg:#eef3fc;--bg-2:#e3ebf8} html[data-mode="light"][data-accent="coral"]{--w-bg:#fbf4f0;--w-bg2:#f4e8e1;--bg:#fbf4f0;--bg-2:#f4e8e1} /* light mode: lift the WHMCS-skin text/links that were hard-coded for dark */ html[data-mode="light"] #main-body{color:var(--w-ink)} html[data-mode="light"] #main-body .text-muted,html[data-mode="light"] #main-body .small.text-muted{color:var(--w-ink3) !important} /* ---- the theme toggle is functional again - un-hide it (whmcs-skin-2 had display:none) ---- */ .m-nav-cta .m-theme,.m-mobile-cta .m-theme{display:inline-flex !important}