/* ============================================================ DigiLakshya — Dark / Night mode (toggle: bottom-left sun/moon) Applies only when is set. The marketing pages share a common CSS-variable token set (--ink/--paper/--line/...), plus a few pages (pricing, tools-pricing) with their own greys — we re-map those tokens to dark values, then patch the bits that hardcode white. The studio-tools APP is excluded (it shows true- colour ad previews/canvases and stays light). ============================================================ */ /* ---- the floating toggle button ---- */ .dl-theme-toggle{position:fixed;left:18px;bottom:18px;z-index:99990;width:44px;height:44px;border-radius:50%; border:1px solid rgba(15,25,45,.14);background:#ffffff;color:#1f2a44;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1; box-shadow:0 6px 22px rgba(13,30,60,.18);transition:transform .2s,background .25s,color .25s,box-shadow .25s} .dl-theme-toggle:hover{transform:translateY(-2px) scale(1.04)} .dl-theme-toggle:active{transform:translateY(0) scale(.96)} .dl-theme-toggle .dl-th-sun{display:none} html.dark .dl-theme-toggle{background:#1b2026;color:#ffd36b;border-color:rgba(255,255,255,.16);box-shadow:0 6px 22px rgba(0,0,0,.55)} html.dark .dl-theme-toggle .dl-th-moon{display:none} html.dark .dl-theme-toggle .dl-th-sun{display:inline-block} @media(max-width:600px){.dl-theme-toggle{width:40px;height:40px;left:14px;bottom:14px;font-size:15px}} /* ---- base ---- */ html.dark{color-scheme:dark} html.dark, html.dark body{background:#0f1216 !important} html.dark body{color:#e8ebf2} html.dark img,html.dark video,html.dark picture{filter:none} /* ============ shared marketing token set (used by ~20 pages) ============ */ html.dark{ --paper:#0f1216; --paper-2:#161a20; --sand:#17140e; --white:#181c22; --soft:#161a20; --ink:#e8ebf2; --ink-2:#c4cad6; --ink-3:#a8b0be; --muted:#8b94a3; --navy:#e8ebf2; --line:#262b33; --line-2:#2e343d; --line-strong:#3a414c; --blue:#5b94ff; --blue-dark:#3f78e6; --blue-light:#142339; --green:#34b877; --amber:#ffb155; --violet:#ab8cff; /* greys + bg/text/blue scale (pricing.php and other :root pages) */ --bg-base:#0f1216; --bg-card:#181c22; --bg-section:#14181e; --bg-dark:#0a0d12; --bg-dark2:#06090d; --text-primary:#e8ebf2; --text-secondary:#b4bbc7; --grey-50:#14181e; --grey-100:#1b1f26; --grey-200:#262b33; --grey-300:#353b45; --grey-400:#6b7280; --grey-500:#9aa1ad; --grey-600:#b4bbc7; --grey-700:#c8cdd7; --grey-800:#dde1e9; --grey-900:#eef1f6; --border:#262b33; --border-blue:#1f3a5f; --blue-50:#13233d; --blue-100:#16294a; --blue-200:#1f3a5f; } /* generic safety nets for the common marketing components (they mostly use vars, these catch the few hardcoded #fff / light surfaces) */ html.dark .card,html.dark .step,html.dark .pcard,html.dark .faq-item,html.dark .crosscta, html.dark .creds-bar,html.dark .cert-group,html.dark .who-card{background:var(--white);border-color:var(--line)} html.dark .band,html.dark .section.band{background:var(--paper-2);border-color:var(--line)} html.dark .btn-line,html.dark .btn-light{background:var(--white);color:var(--ink)} html.dark details,html.dark summary{color:var(--ink)} /* ============ top navigation (shared style-2026) ============ */ html.dark .navbar,html.dark .navbar-default,html.dark .navbar.navbar-fixed-top, html.dark header .navbar{background:#0f1216 !important;border-color:#262b33 !important;box-shadow:0 1px 0 #20252e} html.dark .navbar .nav>li>a,html.dark .navbar a,html.dark .navbar-nav>li>a, html.dark .dl-dd-toggle{color:#cdd3df !important} html.dark .navbar .nav>li>a:hover,html.dark .navbar a:hover,html.dark .dl-dd-toggle:hover, html.dark .navbar .nav>li>a.active{color:#ffffff !important} html.dark .email-design,html.dark .mail-link,html.dark .mail-addr{color:#aab2c0} html.dark .team-status{background:#181c22;border-color:#2a2f3a;color:#cdd3df} html.dark .navbar-toggle .icon-bar{background:#cdd3df !important} /* nav dropdown menus */ html.dark .rez-drop .dl-dd-menu{background:#181c22;border-color:#2a2f3a;box-shadow:0 18px 50px -12px rgba(0,0,0,.65)} html.dark .rez-drop .dl-dd-menu>li>a{color:#cdd3df} html.dark .rez-drop .dl-dd-menu>li>a:hover,html.dark .rez-drop .dl-dd-menu>li>a:focus{background:#202733;color:#ffffff} html.dark .rez-drop .dl-dd-label{color:#7e8696} html.dark .rez-drop .dl-dd-sep{background:#2a2f3a} html.dark .free-tool-btn{background:#152238;color:#9bbcff} /* ============ footer ============ */ html.dark footer,html.dark .footer,html.dark .footer-2026{background:#0a0d12 !important;border-color:#20252e} html.dark footer a{color:#aab2c0} html.dark footer a:hover{color:#ffffff} html.dark .footer-bottom{border-color:#20252e} /* ============ Tools-Pricing page (.tp — has its own greys + hardcoded #fff) ============ */ html.dark .tp{background:#0f1216;color:#e8ebf2; --bg-base:#0f1216; --bg-card:#181c22; --bg-section:#14181e; --grey-50:#14181e; --grey-100:#1b1f26; --grey-200:#262b33; --grey-300:#353b45; --grey-400:#6b7280; --grey-500:#9aa1ad; --grey-600:#b4bbc7; --grey-700:#c8cdd7; --grey-800:#dde1e9; --grey-900:#eef1f6; --border:#262b33; --border-blue:#1f3a5f; --white:#181c22; --blue-50:#13233d; --blue-100:#16294a; --blue-200:#1f3a5f} html.dark .tp-table{background:#181c22;border-color:#262b33} html.dark .tp-row{border-color:#23282f} html.dark .tp-row.head{background:#14181e;color:#8b94a3} html.dark .tp-row.total{background:linear-gradient(90deg,#152238,#181c22);border-top-color:#234069} html.dark .tp-tool i{background:#152238;color:#9bbcff} html.dark .tp-cost-total{color:#dfe4ec} html.dark .tp-section[style]{background:#13161b !important;border-color:#262b33 !important} html.dark .tp-plan{background:#181c22} html.dark .tp-faqi{background:#181c22} html.dark .tp-pcta.line{background:#181c22;color:#dde1e9} html.dark .tp-pill{background:#152238;border-color:#1f3a5f;color:#9bbcff} html.dark .tp-cta.ghost{background:#181c22;color:#9bbcff} html.dark .tp-save{background:#0f2418;border-color:#1f5a3a;color:#7ee0a8} html.dark .tp-save b{color:#9ff0c2} /* ============ Retainer pricing page extras (hardcoded whites) ============ */ html.dark .social-proof{background:#11161f} html.dark .sp-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#cdd6e6} html.dark .cgt{background:#13233d;border-color:#1f3a5f;color:#9bbcff} html.dark .trust-item,html.dark .cost-card,html.dark .cost-table-wrap,html.dark .step-card, html.dark .tracker-browser,html.dark .tracker-point{background:#181c22;border-color:#262b33} html.dark .billing-strip{background:#0f2418;border-color:#1f5a3a} html.dark .stag{background:#222831 !important;color:#cdd3df} html.dark .strip-icon{background:#152238;border-color:#1f3a5f} html.dark .fbtn-primary{background:#181c22;color:#9bbcff} /* gradient/hardcoded callout boxes inside cards (Bonus / Studio-Tools Premium, etc.) */ html.dark .stp-callout,html.dark .savings-callout,html.dark .calc-cta, html.dark .tracker-section,html.dark .strip-section{background:#15191f !important;border-color:#262b33} html.dark .col-best{background:#13233d !important;color:#9bbcff} html.dark .billing-step{background:#1b1f26} html.dark .service-row,html.dark .best-for-box{background:#13233d;border-color:#1f3a5f} /* card-internal highlight boxes that hardcode a pale fill */ html.dark .pcard .stag,html.dark .pcard [style*="background:#f"],html.dark .pcard [style*="background: #f"]{background:#222831 !important;color:#cdd3df} /* form fields / inputs that hardcode white */ html.dark input,html.dark textarea,html.dark select{background:#181c22;color:#e8ebf2;border-color:#2a2f3a} html.dark input::placeholder,html.dark textarea::placeholder{color:#7e8696}