/* ========================================================================== ToolSurf app-wide dark theme (2026-07-29) Loads on EVERY vertical-nav app page ($isAppPage in layout.phtml), not just the account pages, so one toggle drives /member, /cart, /page/packages, /page/faq, /aff/* and the account screens together. This is the LAST stylesheet in , so it wins ties against modern-premium.css, cart-premium.css, account-premium.css and the inline critical block without needing extreme specificity. Everything below is scoped to html.ts-account-dark except the clearly marked base block for .ts-nav-theme-toggle, which is a new element this theme introduces and therefore has to define its own light appearance too. ========================================================================== */ /* --- BASE (light + dark): the new sidebar theme toggle --------------------- */ .ts-nav-theme-item .ts-nav-theme-toggle { appearance: none; background: transparent; border: 0; cursor: pointer; font: inherit; text-align: left; width: calc(100% - 24px); } .ts-nav-theme-item .ts-nav-theme-toggle .ts-nav-icon-theme { stroke: #c6613f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================================== DARK ========================================================================== */ html.ts-account-dark { background-color: #0f151a !important; color-scheme: dark; } html.ts-account-dark body, html.ts-account-dark body.toolsurf-vertical-nav, html.ts-account-dark .content-main, html.ts-account-dark .content-main.container, html.ts-account-dark .pcoded-main-container, html.ts-account-dark .pcoded-content, html.ts-account-dark .page-wrapper, html.ts-account-dark .am-body-content, html.ts-account-dark .am-content-page { background-color: #0f151a !important; color: #edf5f2 !important; } /* --- sidebar nav ---------------------------------------------------------- */ html.ts-account-dark nav.pcoded-navbar, html.ts-account-dark nav.pcoded-navbar.menu-light, html.ts-account-dark .pcoded-navbar .pcoded-submenu, html.ts-account-dark .navbar-wrapper, html.ts-account-dark .navbar-content { background: #0c1217 !important; background-color: #0c1217 !important; box-shadow: 1px 0 0 rgba(255, 255, 255, .06) !important; } html.ts-account-dark .pcoded-navbar a, html.ts-account-dark ul.pcoded-inner-navbar .nav-link .pcoded-mtext, html.ts-account-dark ul.pcoded-inner-navbar .nav-link span.pcoded-mtext, html.ts-account-dark .pcoded-navbar .pcoded-micon { color: #dbe9e6 !important; } html.ts-account-dark .nav-dropdown-menu { background: #121b22 !important; border-color: #2b3a44 !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .45) !important; } html.ts-account-dark .nav-dropdown-menu .nav-link .pcoded-mtext { color: #c3d5d0 !important; } html.ts-account-dark li.nav-item.active > .nav-link, html.ts-account-dark li.nav-item.active > a.nav-link { background: rgba(198, 97, 63, .18) !important; } html.ts-account-dark li.nav-item.active > .nav-link .pcoded-mtext, html.ts-account-dark li.nav-item.active > a.nav-link .pcoded-mtext, html.ts-account-dark .nav-link:hover .pcoded-mtext { color: #f0a184 !important; } html.ts-account-dark .nav-link:hover { background: rgba(198, 97, 63, .14) !important; } html.ts-account-dark .nav-link .pcoded-micon { background: rgba(198, 97, 63, .17) !important; } html.ts-account-dark .nav-caret { color: #c08d7c !important; } html.ts-account-dark .mobile-menu-toggle { background: #1d2a33 !important; border: 1px solid #3a4c58 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .4) !important; color: #edf5f2 !important; } html.ts-account-dark .ts-nav-theme-item .ts-nav-theme-toggle { background: transparent !important; border: 0 !important; color: #dbe9e6 !important; } /* --- generic content ------------------------------------------------------ */ html.ts-account-dark .pcoded-content h1, html.ts-account-dark .pcoded-content h2, html.ts-account-dark .pcoded-content h3, html.ts-account-dark .pcoded-content h4, html.ts-account-dark .pcoded-content h5, html.ts-account-dark .page-header-title h3, html.ts-account-dark .am-user-identity-block { color: #edf5f2 !important; } html.ts-account-dark .page-header, html.ts-account-dark .page-header-title { background: transparent !important; } html.ts-account-dark .pcoded-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]), html.ts-account-dark .pcoded-content select, html.ts-account-dark .pcoded-content textarea { background: #101820 !important; background-color: #101820 !important; border: 1px solid #3a4c58 !important; color: #edf5f2 !important; } html.ts-account-dark .pcoded-content input::placeholder, html.ts-account-dark .pcoded-content textarea::placeholder { color: #7d918b !important; } /* ========================================================================== /cart ========================================================================== */ html.ts-account-dark .ts-cart-container, html.ts-account-dark .ts-control-bar, html.ts-account-dark .ts-grid { background: transparent !important; } html.ts-account-dark .ts-card, html.ts-account-dark .ts-trust-bar, html.ts-account-dark .ts-footer { background: #151f27 !important; background-color: #151f27 !important; border-color: #2b3a44 !important; color: #edf5f2 !important; } html.ts-account-dark .ts-card-body, html.ts-account-dark .am-cart-product-content-add-container, html.ts-account-dark .ts-form-container, html.ts-account-dark .am-cart-product-content-buttons { background: transparent !important; color: #edf5f2 !important; } /* Tool logos are drawn for a white page — keep them on a light plate. */ html.ts-account-dark .ts-card-img-wrap { background: #eef1f2 !important; background-color: #eef1f2 !important; border-color: #2b3a44 !important; } html.ts-account-dark .ts-card-title, html.ts-account-dark .am-cart-product-content-terms, html.ts-account-dark .ts-trust-item { color: #edf5f2 !important; } html.ts-account-dark .ts-badge-cat { background: rgba(198, 97, 63, .18) !important; color: #f0a184 !important; border-color: rgba(198, 97, 63, .35) !important; } html.ts-account-dark .ts-badge-save { background: #2f4a3c !important; color: #b9e6cd !important; } html.ts-account-dark .ts-cat-btn { background: #1d2a33 !important; border-color: #3a4c58 !important; color: #dbe9e6 !important; } html.ts-account-dark .ts-cat-btn.active, html.ts-account-dark .ts-cat-btn:hover { background: #c6613f !important; border-color: #c6613f !important; color: #ffffff !important; } html.ts-account-dark .ts-search-input, html.ts-account-dark input#tsSearch.ts-search-input, html.ts-account-dark .billing-plan-select, html.ts-account-dark select.billing-plan-select { background: #101820 !important; background-color: #101820 !important; border-color: #3a4c58 !important; color: #edf5f2 !important; } html.ts-account-dark .am-cart-qty-el, html.ts-account-dark .am-cart-qty-el-minus, html.ts-account-dark .am-cart-qty-el-plus, html.ts-account-dark .am-cart-qty-el-val { background: #101820 !important; border-color: #3a4c58 !important; color: #edf5f2 !important; } html.ts-account-dark .ts-footer, html.ts-account-dark .ts-footer-links, html.ts-account-dark .ts-footer a { color: #b9cac5 !important; } html.ts-account-dark .ts-footer a:hover { color: #f0a184 !important; } /* ========================================================================== /page/packages The page is driven by its own :root design tokens, so redefining those in dark mode does most of the work in one place. `html.ts-account-dark` (0,1,1) outranks the page's `:root` (0,1,0). The rules after it only mop up values the page hard-codes instead of reading from a token. ========================================================================== */ html.ts-account-dark { --text-main: #edf5f2; --text-muted: #b9cac5; --card-bg: #151f27; --primary-glow: rgba(198, 97, 63, .28); } html.ts-account-dark .pricing-wrapper { background: #0f151a !important; } /* Tool/feature rows and secondary copy hard-code near-black or warm brown. */ html.ts-account-dark .feature-item, html.ts-account-dark .feature-item.tool-row span, html.ts-account-dark .item span:not(.pill):not(.credit-badge):not(.seats-badge):not(.badge-popular), html.ts-account-dark .item p, html.ts-account-dark .item strong, html.ts-account-dark .item li, html.ts-account-dark .price-area h4, html.ts-account-dark .term-box h4, html.ts-account-dark .term-box p, html.ts-account-dark .term-box strong, html.ts-account-dark .term-box span, html.ts-account-dark .guarantee-box h4, html.ts-account-dark .guarantee-box p, html.ts-account-dark .guarantee-box strong, html.ts-account-dark .bundle-disclosure p, html.ts-account-dark .bundle-disclosure span, html.ts-account-dark .footer-terms p, html.ts-account-dark .footer-terms span, html.ts-account-dark .refund-disclaimer p, html.ts-account-dark .refund-disclaimer strong { color: #edf5f2 !important; } /* Ghost CTA is pinned to #fff with !important at (0,3,0) — outrank it. */ html.ts-account-dark .pricing-wrapper .btn.btn-ghost, html.ts-account-dark .pricing-wrapper a.btn.btn-ghost { background: #1d2a33 !important; background-image: none !important; border: 1.5px solid #3a4c58 !important; color: #edf5f2 !important; } html.ts-account-dark .pricing-wrapper .btn.btn-ghost:hover, html.ts-account-dark .pricing-wrapper a.btn.btn-ghost:hover { border-color: #c6613f !important; color: #f0a184 !important; } /* Warm cream chips that are hard-coded to #fff1ec. `.bundle-chips span` has to come after the text block above — same specificity, so order decides. */ html.ts-account-dark .discount-alert, html.ts-account-dark .seats-badge, html.ts-account-dark .credit-badge, html.ts-account-dark .pill, html.ts-account-dark .spots-badge, html.ts-account-dark .count-badge, html.ts-account-dark .bundle-chips span { background: rgba(198, 97, 63, .18) !important; border-color: rgba(198, 97, 63, .38) !important; color: #f0a184 !important; } html.ts-account-dark .pricing-wrapper, html.ts-account-dark .features-container, html.ts-account-dark .features-grid, html.ts-account-dark .col-card, html.ts-account-dark .fomo-row, html.ts-account-dark .terms-row, html.ts-account-dark .bundle-disclosure-body, html.ts-account-dark .bundle-chips { background: transparent !important; } html.ts-account-dark .item, html.ts-account-dark .item.has-discount, html.ts-account-dark .item.featured, html.ts-account-dark .item.featured.has-discount, html.ts-account-dark .term-box, html.ts-account-dark .guarantee-box, html.ts-account-dark .bundle-disclosure, html.ts-account-dark .trust-strip, html.ts-account-dark summary, html.ts-account-dark .footer-terms, html.ts-account-dark .refund-disclaimer, html.ts-account-dark .appcenter-more { background: #151f27 !important; background-color: #151f27 !important; border-color: #2b3a44 !important; color: #edf5f2 !important; } html.ts-account-dark .item.featured, html.ts-account-dark .item.featured.has-discount { border-color: #c6613f !important; } html.ts-account-dark .plan-name, html.ts-account-dark .price-area, html.ts-account-dark .price-area h4, html.ts-account-dark .price-from, html.ts-account-dark .pricing-heading, html.ts-account-dark .bundle-disclosure-title, html.ts-account-dark .bundle-disclosure-text, html.ts-account-dark .feature-item, html.ts-account-dark .tool-row { color: #edf5f2 !important; } html.ts-account-dark .pricing-sub, html.ts-account-dark .plan-helper, html.ts-account-dark .credits-hint, html.ts-account-dark .footer-terms, html.ts-account-dark .refund-disclaimer { color: #b9cac5 !important; } html.ts-account-dark .tool-row { border-color: #263640 !important; } html.ts-account-dark .badge-popular, html.ts-account-dark .btn, html.ts-account-dark a.btn { background: #c6613f !important; background-color: #c6613f !important; border-color: #c6613f !important; color: #ffffff !important; } html.ts-account-dark .btn:hover, html.ts-account-dark a.btn:hover { background: #9f4f36 !important; border-color: #9f4f36 !important; } html.ts-account-dark .btn-ghost, html.ts-account-dark a.btn-ghost { background: #1d2a33 !important; background-color: #1d2a33 !important; border-color: #3a4c58 !important; color: #edf5f2 !important; } html.ts-account-dark .pill, html.ts-account-dark .credit-badge, html.ts-account-dark .seats-badge { background: rgba(198, 97, 63, .18) !important; border-color: rgba(198, 97, 63, .35) !important; color: #f0a184 !important; } html.ts-account-dark .discount-alert { background: #2a1614 !important; border-color: #6b3229 !important; color: #f6c8bd !important; } /* ========================================================================== /aff/* (affiliate dashboard) ========================================================================== */ html.ts-account-dark .am-aff-dashboard, html.ts-account-dark .am-aff-stats-row, html.ts-account-dark .assets-grid, html.ts-account-dark .link-content { background: transparent !important; } html.ts-account-dark .am-premium-card, html.ts-account-dark .am-premium-card.assets-section, html.ts-account-dark .am-stat-card, html.ts-account-dark .am-stat-card.green, html.ts-account-dark .am-stat-card.blue, html.ts-account-dark .am-stat-card.purple, html.ts-account-dark .asset-item, html.ts-account-dark .am-aff-header, html.ts-account-dark .hero-link, html.ts-account-dark .link-box { background: #151f27 !important; background-color: #151f27 !important; border-color: #2b3a44 !important; color: #edf5f2 !important; } html.ts-account-dark .am-stat-card .value, html.ts-account-dark .asset-item h3, html.ts-account-dark .asset-item h4 { color: #edf5f2 !important; } html.ts-account-dark .am-stat-card .label, html.ts-account-dark .asset-item p, html.ts-account-dark .am-premium-card p { color: #b9cac5 !important; } html.ts-account-dark #aff-link-input, html.ts-account-dark input#aff-link-input { background: #101820 !important; background-color: #101820 !important; border-color: #3a4c58 !important; color: #edf5f2 !important; } html.ts-account-dark .am-btn-outline, html.ts-account-dark a.am-btn-outline { background: #1d2a33 !important; background-color: #1d2a33 !important; border: 1px solid #3a4c58 !important; color: #edf5f2 !important; } html.ts-account-dark .am-btn-outline:hover, html.ts-account-dark a.am-btn-outline:hover { background: #c6613f !important; border-color: #c6613f !important; color: #ffffff !important; } html.ts-account-dark .copy-btn { background: #c6613f !important; border-color: #c6613f !important; color: #ffffff !important; } /* Pastel stat icons (green/blue/purple) glare against the dark card. */ html.ts-account-dark .am-stat-card .icon { background: rgba(198, 97, 63, .16) !important; filter: saturate(.75) brightness(.9); } html.ts-account-dark .asset-icon { background: #101820 !important; } /* ========================================================================== /cart promo banner + /member social banner Both are built with inline style="" attributes in layout.phtml, so only an !important rule can reach them. The cart banner is a light cream gradient that reads as a bright slab in dark mode; the social banner is already terracotta and only needs its surface calmed down. ========================================================================== */ html.ts-account-dark .social-groups-banner { background: linear-gradient(135deg, #241a17 0%, #2e211c 48%, #3a2820 100%) !important; border: 1px solid #4a3228 !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .38) !important; } html.ts-account-dark .social-groups-banner h3 { color: #f7ece6 !important; } html.ts-account-dark .social-groups-banner p { color: #c9b3a8 !important; } /* The View Packages CTA is deep brown on cream — lift it onto the accent. */ html.ts-account-dark .social-groups-banner a[href*="page/packages"] { background: #c6613f !important; color: #ffffff !important; box-shadow: 0 12px 26px rgba(0, 0, 0, .35) !important; } /* ========================================================================== aMember shared boxes / tables that appear on several pages ========================================================================== */ html.ts-account-dark .am-info:not(:has(a[href*="payout"])), html.ts-account-dark .am-flash, html.ts-account-dark .am-flash-content { background: #16232b !important; border-color: #2f4450 !important; color: #e3efec !important; } html.ts-account-dark .am-error { background: #2a1614 !important; border-color: #6b3229 !important; color: #f6c8bd !important; } html.ts-account-dark .pcoded-content table, html.ts-account-dark table.am-grid { background: #151f27 !important; color: #edf5f2 !important; } html.ts-account-dark .pcoded-content a:not(.btn):not(.am-btn-outline):not(.ts-cat-btn):not(.nav-link) { color: #f0a184; }