/* * HSBR Online - Dark Theme CSS * Custom dark mode implementation for MARTEX Theme * Version: 1.1.0 */ /* ===================================================== DARK MODE - Applied via [data-theme="dark"] or [data-effective-theme="dark"] on Using CSS custom properties for easier maintenance ===================================================== */ /* ========================================================================== 01. BASE STYLES =========================================================================== */ html[data-theme="dark"] body, html[data-theme="dark"] .page, html[data-effective-theme="dark"] body, html[data-effective-theme="dark"] .page { background-color: #0f172a !important; color: #e2e8f0 !important; } html[data-theme="dark"] #loading, html[data-effective-theme="dark"] #loading { background-color: #0f172a !important; } /* ========================================================================== 02. BACKGROUND COLORS =========================================================================== */ html[data-theme="dark"] .bg--white-500, html[data-theme="dark"] .bg--white-400, html[data-theme="dark"] .bg--white-300, html[data-theme="dark"] .bg--white-200, html[data-theme="dark"] .bg--white-100, html[data-theme="dark"] .bg--snow, html[data-theme="dark"] .bg--light-grey, html[data-effective-theme="dark"] .bg--white-500, html[data-effective-theme="dark"] .bg--white-400, html[data-effective-theme="dark"] .bg--white-300, html[data-effective-theme="dark"] .bg--white-200, html[data-effective-theme="dark"] .bg--white-100, html[data-effective-theme="dark"] .bg--snow, html[data-effective-theme="dark"] .bg--light-grey { background-color: #1e293b !important; } /* Box content wrappers with bg-- classes */ html[data-theme="dark"] .bg--01, html[data-theme="dark"] .bg--02, html[data-theme="dark"] .bg--03, html[data-theme="dark"] .bg--04, html[data-theme="dark"] .bg--05, html[data-theme="dark"] .bg--06, html[data-effective-theme="dark"] .bg--01, html[data-effective-theme="dark"] .bg--02, html[data-effective-theme="dark"] .bg--03, html[data-effective-theme="dark"] .bg--04, html[data-effective-theme="dark"] .bg--05, html[data-effective-theme="dark"] .bg--06 { background-color: #1e293b !important; background-image: none !important; } /* Gradient backgrounds */ html[data-theme="dark"] .gr--whitesmoke, html[data-theme="dark"] .gr--ghost, html[data-theme="dark"] .gr--snow, html[data-theme="dark"] .gr--cotton, html[data-theme="dark"] .gr--ghostwhite, html[data-theme="dark"] .gr--smoke, html[data-theme="dark"] .gr--perl, html[data-effective-theme="dark"] .gr--whitesmoke, html[data-effective-theme="dark"] .gr--ghost, html[data-effective-theme="dark"] .gr--snow, html[data-effective-theme="dark"] .gr--cotton, html[data-effective-theme="dark"] .gr--ghostwhite, html[data-effective-theme="dark"] .gr--smoke, html[data-effective-theme="dark"] .gr--perl { background: #1e293b !important; background-image: none !important; } /* Shape backgrounds */ html[data-theme="dark"] .shape--white-500:after, html[data-theme="dark"] .shape--white-400:after, html[data-theme="dark"] .shape--white-300:after, html[data-theme="dark"] .shape--white-200:after, html[data-theme="dark"] .shape--gr-whitesmoke:after, html[data-theme="dark"] .shape--gr-ghost:after, html[data-effective-theme="dark"] .shape--white-500:after, html[data-effective-theme="dark"] .shape--white-400:after, html[data-effective-theme="dark"] .shape--white-300:after, html[data-effective-theme="dark"] .shape--white-200:after, html[data-effective-theme="dark"] .shape--gr-whitesmoke:after, html[data-effective-theme="dark"] .shape--gr-ghost:after { background-color: #1e293b !important; background-image: none !important; } /* WS Wrapper sections */ html[data-theme="dark"] .ws-wrapper, html[data-theme="dark"] .ws-wrapper .section-overlay, html[data-effective-theme="dark"] .ws-wrapper, html[data-effective-theme="dark"] .ws-wrapper .section-overlay { background-color: transparent !important; } /* ========================================================================== 03. TYPOGRAPHY =========================================================================== */ /* Headings */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-effective-theme="dark"] h1, html[data-effective-theme="dark"] h2, html[data-effective-theme="dark"] h3, html[data-effective-theme="dark"] h4, html[data-effective-theme="dark"] h5, html[data-effective-theme="dark"] h6 { color: #f1f5f9 !important; } /* Size classes */ html[data-theme="dark"] .s-60, html[data-theme="dark"] .s-55, html[data-theme="dark"] .s-52, html[data-theme="dark"] .s-50, html[data-theme="dark"] .s-48, html[data-theme="dark"] .s-46, html[data-theme="dark"] .s-45, html[data-theme="dark"] .s-44, html[data-theme="dark"] .s-42, html[data-theme="dark"] .s-40, html[data-theme="dark"] .s-38, html[data-theme="dark"] .s-36, html[data-theme="dark"] .s-34, html[data-theme="dark"] .s-32, html[data-theme="dark"] .s-30, html[data-theme="dark"] .s-28, html[data-theme="dark"] .s-26, html[data-theme="dark"] .s-24, html[data-theme="dark"] .s-22, html[data-theme="dark"] .s-21, html[data-theme="dark"] .s-20, html[data-theme="dark"] .s-19, html[data-theme="dark"] .s-18, html[data-theme="dark"] .s-17, html[data-theme="dark"] .s-16, html[data-theme="dark"] .s-15, html[data-theme="dark"] .s-14, html[data-effective-theme="dark"] .s-60, html[data-effective-theme="dark"] .s-55, html[data-effective-theme="dark"] .s-52, html[data-effective-theme="dark"] .s-50, html[data-effective-theme="dark"] .s-48, html[data-effective-theme="dark"] .s-46, html[data-effective-theme="dark"] .s-45, html[data-effective-theme="dark"] .s-44, html[data-effective-theme="dark"] .s-42, html[data-effective-theme="dark"] .s-40, html[data-effective-theme="dark"] .s-38, html[data-effective-theme="dark"] .s-36, html[data-effective-theme="dark"] .s-34, html[data-effective-theme="dark"] .s-32, html[data-effective-theme="dark"] .s-30, html[data-effective-theme="dark"] .s-28, html[data-effective-theme="dark"] .s-26, html[data-effective-theme="dark"] .s-24, html[data-effective-theme="dark"] .s-22, html[data-effective-theme="dark"] .s-21, html[data-effective-theme="dark"] .s-20, html[data-effective-theme="dark"] .s-19, html[data-effective-theme="dark"] .s-18, html[data-effective-theme="dark"] .s-17, html[data-effective-theme="dark"] .s-16, html[data-effective-theme="dark"] .s-15, html[data-effective-theme="dark"] .s-14 { color: #f1f5f9 !important; } /* Weight classes */ html[data-theme="dark"] .w-700, html[data-theme="dark"] .w-600, html[data-theme="dark"] .w-500, html[data-effective-theme="dark"] .w-700, html[data-effective-theme="dark"] .w-600, html[data-effective-theme="dark"] .w-500 { color: #f1f5f9 !important; } /* Paragraphs */ html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] .p-sm, html[data-theme="dark"] .p-md, html[data-theme="dark"] .p-lg, html[data-theme="dark"] .p-xl, html[data-effective-theme="dark"] p, html[data-effective-theme="dark"] li, html[data-effective-theme="dark"] .p-sm, html[data-effective-theme="dark"] .p-md, html[data-effective-theme="dark"] .p-lg, html[data-effective-theme="dark"] .p-xl { color: #cbd5e1 !important; } /* Color utility classes */ html[data-theme="dark"] .color--grey, html[data-effective-theme="dark"] .color--grey { color: #94a3b8 !important; } html[data-theme="dark"] .color--black, html[data-effective-theme="dark"] .color--black { color: #f1f5f9 !important; } /* Spans (excluding icons and buttons) */ html[data-theme="dark"] span:not([class*="flaticon"]):not(.btn *):not(.badge):not(.theme-icon-light):not(.theme-icon-dark):not(.theme-icon-system):not(.wsarrow):not(.loader), html[data-effective-theme="dark"] span:not([class*="flaticon"]):not(.btn *):not(.badge):not(.theme-icon-light):not(.theme-icon-dark):not(.theme-icon-system):not(.wsarrow):not(.loader) { color: #cbd5e1 !important; } /* Links */ html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.h-link), html[data-effective-theme="dark"] a:not(.btn):not(.nav-link):not(.h-link) { color: #60a5fa !important; } html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.h-link):hover, html[data-effective-theme="dark"] a:not(.btn):not(.nav-link):not(.h-link):hover { color: #93c5fd !important; } /* Section ID/Label */ html[data-theme="dark"] .section-id, html[data-theme="dark"] span.section-id, html[data-effective-theme="dark"] .section-id, html[data-effective-theme="dark"] span.section-id { color: #60a5fa !important; } /* ========================================================================== 04. HEADER & NAVIGATION =========================================================================== */ html[data-theme="dark"] #header, html[data-theme="dark"] #header.tra-menu, html[data-theme="dark"] #header.white-scroll, html[data-theme="dark"] #header.white-scroll.scroll, html[data-theme="dark"] .header-wrapper, html[data-theme="dark"] .wsmainfull, html[data-theme="dark"] .wsmainfull.menu, html[data-theme="dark"] .wsmainfull.scroll, html[data-effective-theme="dark"] #header, html[data-effective-theme="dark"] #header.tra-menu, html[data-effective-theme="dark"] #header.white-scroll, html[data-effective-theme="dark"] #header.white-scroll.scroll, html[data-effective-theme="dark"] .header-wrapper, html[data-effective-theme="dark"] .wsmainfull, html[data-effective-theme="dark"] .wsmainfull.menu, html[data-effective-theme="dark"] .wsmainfull.scroll { background-color: #0f172a !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important; } /* Override white-scroll styles in dark mode - CRITICAL for scroll state */ html[data-theme="dark"] .tra-menu.white-scroll .wsmainfull.scroll, html[data-theme="dark"] .white-menu.white-scroll .wsmainfull.scroll, html[data-theme="dark"] #header.tra-menu.white-scroll .wsmainfull.scroll, html[data-effective-theme="dark"] .tra-menu.white-scroll .wsmainfull.scroll, html[data-effective-theme="dark"] .white-menu.white-scroll .wsmainfull.scroll, html[data-effective-theme="dark"] #header.tra-menu.white-scroll .wsmainfull.scroll { background-color: rgba(15, 23, 42, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important; } /* Navigation links when scrolled in dark mode */ html[data-theme="dark"] .tra-menu.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, html[data-theme="dark"] .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, html[data-theme="dark"] .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, html[data-effective-theme="dark"] .tra-menu.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, html[data-effective-theme="dark"] .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, html[data-effective-theme="dark"] .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link { color: #e2e8f0 !important; } html[data-theme="dark"] .tra-menu.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover, html[data-effective-theme="dark"] .tra-menu.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover { color: #60a5fa !important; } /* Navigation links */ html[data-theme="dark"] .wsmenu > .wsmenu-list > li > a, html[data-theme="dark"] .wsmenu > .wsmenu-list > li > a.h-link, html[data-theme="dark"] .nav-theme .wsmenu-list > li > a, html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > a, html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > a.h-link, html[data-effective-theme="dark"] .nav-theme .wsmenu-list > li > a { color: #e2e8f0 !important; } html[data-theme="dark"] .wsmenu > .wsmenu-list > li > a:hover, html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > a:hover { color: #60a5fa !important; } /* Dropdown menus */ html[data-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu, html[data-theme="dark"] .wsmenu > .wsmenu-list > li > .wsmegamenu, html[data-theme="dark"] .sub-menu, html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu, html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > .wsmegamenu, html[data-effective-theme="dark"] .sub-menu { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a, html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { color: #cbd5e1 !important; } html[data-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover, html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { color: #60a5fa !important; background-color: #334155 !important; } /* Mobile header */ html[data-theme="dark"] .wsmobileheader, html[data-effective-theme="dark"] .wsmobileheader { background-color: #1e293b !important; } /* ========================================================================== 05. SECTIONS =========================================================================== */ html[data-theme="dark"] .content-section, html[data-theme="dark"] .features-section, html[data-theme="dark"] .division, html[data-effective-theme="dark"] .content-section, html[data-effective-theme="dark"] .features-section, html[data-effective-theme="dark"] .division { background-color: #0f172a !important; } html[data-theme="dark"] .ws-wrapper, html[data-effective-theme="dark"] .ws-wrapper { background-color: #0f172a !important; } html[data-theme="dark"] .section-overlay, html[data-effective-theme="dark"] .section-overlay { background-color: transparent !important; } /* Specific sections */ html[data-theme="dark"] #features-11, html[data-theme="dark"] #features-12, html[data-theme="dark"] #features-2, html[data-theme="dark"] #lnk-1, html[data-theme="dark"] #lnk-2, html[data-theme="dark"] #statistic-1, html[data-theme="dark"] #reviews-2, html[data-theme="dark"] #integrations-2, html[data-theme="dark"] #products-section, html[data-theme="dark"] section.ct-02, html[data-theme="dark"] .ct-02.content-section, html[data-effective-theme="dark"] #features-11, html[data-effective-theme="dark"] #features-12, html[data-effective-theme="dark"] #features-2, html[data-effective-theme="dark"] #lnk-1, html[data-effective-theme="dark"] #lnk-2, html[data-effective-theme="dark"] #statistic-1, html[data-effective-theme="dark"] #reviews-2, html[data-effective-theme="dark"] #integrations-2, html[data-effective-theme="dark"] #products-section, html[data-effective-theme="dark"] section.ct-02, html[data-effective-theme="dark"] .ct-02.content-section { background-color: #0f172a !important; } html[data-theme="dark"] #faqs-3, html[data-theme="dark"] #brands-1, html[data-theme="dark"] #banner-13, html[data-effective-theme="dark"] #faqs-3, html[data-effective-theme="dark"] #brands-1, html[data-effective-theme="dark"] #banner-13 { background-color: #1e293b !important; } /* Hero section - keep transparent for background image */ html[data-theme="dark"] .hero-section.bg--fixed, html[data-effective-theme="dark"] .hero-section.bg--fixed { background-color: transparent !important; } /* ========================================================================== 06. BOX CONTENT WRAPPERS =========================================================================== */ html[data-theme="dark"] .bc-1-wrapper, html[data-theme="dark"] .bc-2-wrapper, html[data-theme="dark"] .bc-3-wrapper, html[data-theme="dark"] .bc-4-wrapper, html[data-theme="dark"] .bc-5-wrapper, html[data-theme="dark"] .bc-1-wrapper.bg--02, html[data-theme="dark"] .bc-5-wrapper.bg--04, html[data-effective-theme="dark"] .bc-1-wrapper, html[data-effective-theme="dark"] .bc-2-wrapper, html[data-effective-theme="dark"] .bc-3-wrapper, html[data-effective-theme="dark"] .bc-4-wrapper, html[data-effective-theme="dark"] .bc-5-wrapper, html[data-effective-theme="dark"] .bc-1-wrapper.bg--02, html[data-effective-theme="dark"] .bc-5-wrapper.bg--04 { background-color: #1e293b !important; } /* Shape background sections */ html[data-theme="dark"] .shape--bg.shape--white-500, html[data-theme="dark"] .shape--bg.shape--white-400, html[data-theme="dark"] .shape--bg.shape--white-300, html[data-theme="dark"] #features-12.shape--bg, html[data-effective-theme="dark"] .shape--bg.shape--white-500, html[data-effective-theme="dark"] .shape--bg.shape--white-400, html[data-effective-theme="dark"] .shape--bg.shape--white-300, html[data-effective-theme="dark"] #features-12.shape--bg { background-color: #0f172a !important; } /* ========================================================================== 07. FEATURE BOXES =========================================================================== */ html[data-theme="dark"] .fbox-1, html[data-theme="dark"] .fbox-2, html[data-theme="dark"] .fbox-3, html[data-theme="dark"] .fbox-4, html[data-theme="dark"] .fbox-5, html[data-theme="dark"] .fbox-6, html[data-theme="dark"] .fbox-7, html[data-theme="dark"] .fbox-8, html[data-theme="dark"] .fbox-9, html[data-theme="dark"] .fbox-10, html[data-theme="dark"] .fbox-11, html[data-theme="dark"] .fbox-12, html[data-theme="dark"] .fbox-13, html[data-theme="dark"] .fbox-12.bg--white-100, html[data-effective-theme="dark"] .fbox-1, html[data-effective-theme="dark"] .fbox-2, html[data-effective-theme="dark"] .fbox-3, html[data-effective-theme="dark"] .fbox-4, html[data-effective-theme="dark"] .fbox-5, html[data-effective-theme="dark"] .fbox-6, html[data-effective-theme="dark"] .fbox-7, html[data-effective-theme="dark"] .fbox-8, html[data-effective-theme="dark"] .fbox-9, html[data-effective-theme="dark"] .fbox-10, html[data-effective-theme="dark"] .fbox-11, html[data-effective-theme="dark"] .fbox-12, html[data-effective-theme="dark"] .fbox-13, html[data-effective-theme="dark"] .fbox-12.bg--white-100 { background-color: #1e293b !important; } html[data-theme="dark"] .fbox-txt h5, html[data-theme="dark"] .fbox-txt h6, html[data-effective-theme="dark"] .fbox-txt h5, html[data-effective-theme="dark"] .fbox-txt h6 { color: #f1f5f9 !important; } html[data-theme="dark"] .fbox-txt p, html[data-theme="dark"] .fbox-12 p, html[data-effective-theme="dark"] .fbox-txt p, html[data-effective-theme="dark"] .fbox-12 p { color: #94a3b8 !important; } html[data-theme="dark"] .fbox-img.gr--whitesmoke, html[data-effective-theme="dark"] .fbox-img.gr--whitesmoke { background: #334155 !important; } /* ========================================================================== 08. CONTENT BOXES =========================================================================== */ html[data-theme="dark"] .cbox-1, html[data-theme="dark"] .cbox-2, html[data-theme="dark"] .cbox-3, html[data-theme="dark"] .cbox-4, html[data-theme="dark"] .cbox-5, html[data-theme="dark"] .txt-box, html[data-theme="dark"] .sidebar-box, html[data-theme="dark"] .ico-bx, html[data-effective-theme="dark"] .cbox-1, html[data-effective-theme="dark"] .cbox-2, html[data-effective-theme="dark"] .cbox-3, html[data-effective-theme="dark"] .cbox-4, html[data-effective-theme="dark"] .cbox-5, html[data-effective-theme="dark"] .txt-box, html[data-effective-theme="dark"] .sidebar-box, html[data-effective-theme="dark"] .ico-bx { background-color: #1e293b !important; } /* ========================================================================== 09. TEXT BLOCKS =========================================================================== */ html[data-theme="dark"] .txt-block h2, html[data-theme="dark"] .txt-block h3, html[data-theme="dark"] .txt-block h4, html[data-theme="dark"] .txt-block h5, html[data-theme="dark"] .txt-block h6, html[data-effective-theme="dark"] .txt-block h2, html[data-effective-theme="dark"] .txt-block h3, html[data-effective-theme="dark"] .txt-block h4, html[data-effective-theme="dark"] .txt-block h5, html[data-effective-theme="dark"] .txt-block h6 { color: #f1f5f9 !important; } html[data-theme="dark"] .txt-block p, html[data-effective-theme="dark"] .txt-block p { color: #cbd5e1 !important; } /* Section titles */ html[data-theme="dark"] .section-title h2, html[data-theme="dark"] .section-title h3, html[data-theme="dark"] .section-title p, html[data-theme="dark"] div.section-title h2, html[data-effective-theme="dark"] .section-title h2, html[data-effective-theme="dark"] .section-title h3, html[data-effective-theme="dark"] .section-title p, html[data-effective-theme="dark"] div.section-title h2 { color: #f1f5f9 !important; } html[data-theme="dark"] .section-title .color--grey, html[data-effective-theme="dark"] .section-title .color--grey { color: #94a3b8 !important; } /* ========================================================================== 10. LISTS =========================================================================== */ html[data-theme="dark"] .list-item, html[data-theme="dark"] ul.simple-list li, html[data-theme="dark"] ol.digit-list li, html[data-theme="dark"] .list--theme li, html[data-theme="dark"] .list--theme li p, html[data-theme="dark"] ul.simple-list li.list-item p, html[data-theme="dark"] .simple-list .list-item p, html[data-effective-theme="dark"] .list-item, html[data-effective-theme="dark"] ul.simple-list li, html[data-effective-theme="dark"] ol.digit-list li, html[data-effective-theme="dark"] .list--theme li, html[data-effective-theme="dark"] .list--theme li p, html[data-effective-theme="dark"] ul.simple-list li.list-item p, html[data-effective-theme="dark"] .simple-list .list-item p { color: #cbd5e1 !important; } /* ========================================================================== 11. CARDS & SHADOWS =========================================================================== */ html[data-theme="dark"] .block-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } /* ========================================================================== 12. REVIEWS & TESTIMONIALS =========================================================================== */ html[data-theme="dark"] .review-1, html[data-theme="dark"] .review-2, html[data-theme="dark"] .review-3, html[data-theme="dark"] .review-4 { background-color: #1e293b !important; } /* ========================================================================== 13. PRICING TABLES =========================================================================== */ html[data-theme="dark"] .pricing-1-table, html[data-theme="dark"] .pricing-2-table, html[data-theme="dark"] .pricing-3-table { background-color: #1e293b !important; } html[data-theme="dark"] .pricing-table-header { border-color: #334155 !important; } /* ========================================================================== 14. STATISTICS =========================================================================== */ html[data-theme="dark"] .statistic-block, html[data-effective-theme="dark"] .statistic-block { background-color: transparent !important; } html[data-theme="dark"] .statistic-block h2, html[data-theme="dark"] .statistic-block .s-46, html[data-theme="dark"] .statistic-number, html[data-effective-theme="dark"] .statistic-block h2, html[data-effective-theme="dark"] .statistic-block .s-46, html[data-effective-theme="dark"] .statistic-number { color: #f1f5f9 !important; } html[data-theme="dark"] .statistic-block-txt p, html[data-theme="dark"] .statistic-block-txt.color--grey p, html[data-effective-theme="dark"] .statistic-block-txt p, html[data-effective-theme="dark"] .statistic-block-txt.color--grey p { color: #94a3b8 !important; } /* ========================================================================== 15. FAQ SECTION =========================================================================== */ html[data-theme="dark"] #faqs-3.faqs-section, html[data-theme="dark"] section#faqs-3, html[data-effective-theme="dark"] #faqs-3.faqs-section, html[data-effective-theme="dark"] section#faqs-3 { background-color: #1e293b !important; } html[data-theme="dark"] #faqs-3 .section-title h2, html[data-theme="dark"] #faqs-3 h2.s-50, html[data-theme="dark"] #faqs-3 .question h5, html[data-theme="dark"] #faqs-3 h5.s-22, html[data-effective-theme="dark"] #faqs-3 .section-title h2, html[data-effective-theme="dark"] #faqs-3 h2.s-50, html[data-effective-theme="dark"] #faqs-3 .question h5, html[data-effective-theme="dark"] #faqs-3 h5.s-22 { color: #f1f5f9 !important; } html[data-theme="dark"] #faqs-3 p, html[data-theme="dark"] #faqs-3 .color--grey, html[data-theme="dark"] #faqs-3 .question p, html[data-effective-theme="dark"] #faqs-3 p, html[data-effective-theme="dark"] #faqs-3 .color--grey, html[data-effective-theme="dark"] #faqs-3 .question p { color: #94a3b8 !important; } html[data-theme="dark"] .accordion-item, html[data-effective-theme="dark"] .accordion-item { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .accordion-button, html[data-effective-theme="dark"] .accordion-button { background-color: #1e293b !important; color: #f1f5f9 !important; } html[data-theme="dark"] .accordion-button:not(.collapsed), html[data-effective-theme="dark"] .accordion-button:not(.collapsed) { background-color: #334155 !important; color: #60a5fa !important; } html[data-theme="dark"] .accordion-body, html[data-effective-theme="dark"] .accordion-body { background-color: #1e293b !important; color: #cbd5e1 !important; } html[data-theme="dark"] .more-questions-txt, html[data-theme="dark"] .more-questions-txt.bg--white-400, html[data-effective-theme="dark"] .more-questions-txt, html[data-effective-theme="dark"] .more-questions-txt.bg--white-400 { background-color: #334155 !important; } html[data-theme="dark"] .more-questions-txt p, html[data-effective-theme="dark"] .more-questions-txt p { color: #cbd5e1 !important; } /* ========================================================================== 16. FORMS & INPUTS =========================================================================== */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #334155 !important; border-color: #475569 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { background-color: #3b4a5f !important; border-color: #60a5fa !important; color: #f1f5f9 !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #94a3b8 !important; } html[data-theme="dark"] label { color: #e2e8f0 !important; } /* ========================================================================== 17. BUTTONS =========================================================================== */ html[data-theme="dark"] .btn--theme { background-color: #3b82f6 !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .btn--theme:hover { background-color: #2563eb !important; border-color: #2563eb !important; } html[data-theme="dark"] .btn--tra-black { border-color: #475569 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .btn--tra-black:hover { background-color: #334155 !important; border-color: #60a5fa !important; color: #f1f5f9 !important; } /* ========================================================================== 18. FOOTER =========================================================================== */ html[data-theme="dark"] footer, html[data-theme="dark"] #footer-3, html[data-theme="dark"] .footer, html[data-theme="dark"] .ft-3-ntr, html[data-effective-theme="dark"] footer, html[data-effective-theme="dark"] #footer-3, html[data-effective-theme="dark"] .footer, html[data-effective-theme="dark"] .ft-3-ntr { background-color: #0a0f1a !important; } /* Footer section titles - brighter white for better visibility */ html[data-theme="dark"] .footer-links h6, html[data-theme="dark"] .footer h6, html[data-theme="dark"] footer h6, html[data-theme="dark"] .footer-links .s-17, html[data-theme="dark"] .footer-links .w-700, html[data-effective-theme="dark"] .footer-links h6, html[data-effective-theme="dark"] .footer h6, html[data-effective-theme="dark"] footer h6, html[data-effective-theme="dark"] .footer-links .s-17, html[data-effective-theme="dark"] .footer-links .w-700 { color: #ffffff !important; } /* Footer links - brighter blue for better contrast */ html[data-theme="dark"] .footer-links a, html[data-theme="dark"] .footer-links p a, html[data-theme="dark"] .foo-links a, html[data-theme="dark"] .foo-links li p a, html[data-effective-theme="dark"] .footer-links a, html[data-effective-theme="dark"] .footer-links p a, html[data-effective-theme="dark"] .foo-links a, html[data-effective-theme="dark"] .foo-links li p a { color: #7dd3fc !important; } html[data-theme="dark"] .footer-links a:hover, html[data-theme="dark"] .footer-links p a:hover, html[data-theme="dark"] .foo-links a:hover, html[data-theme="dark"] .foo-links li p a:hover, html[data-effective-theme="dark"] .footer-links a:hover, html[data-effective-theme="dark"] .footer-links p a:hover, html[data-effective-theme="dark"] .foo-links a:hover, html[data-effective-theme="dark"] .foo-links li p a:hover { color: #38bdf8 !important; } html[data-theme="dark"] .footer-copyright p, html[data-theme="dark"] .footer-copyright p span, html[data-effective-theme="dark"] .footer-copyright p, html[data-effective-theme="dark"] .footer-copyright p span { color: #94a3b8 !important; } html[data-theme="dark"] .bottom-footer-socials a, html[data-effective-theme="dark"] .bottom-footer-socials a { color: #94a3b8 !important; } html[data-theme="dark"] .bottom-footer-socials a:hover, html[data-effective-theme="dark"] .bottom-footer-socials a:hover { color: #60a5fa !important; } html[data-theme="dark"] footer hr, html[data-effective-theme="dark"] footer hr { border-color: #1e293b !important; } html[data-theme="dark"] .footer-info p, html[data-theme="dark"] .foo-links li p, html[data-effective-theme="dark"] .footer-info p, html[data-effective-theme="dark"] .foo-links li p { color: #94a3b8 !important; } /* ========================================================================== 19. DIVIDERS & BORDERS =========================================================================== */ html[data-theme="dark"] hr, html[data-theme="dark"] hr.divider { border-color: #334155 !important; opacity: 1 !important; } html[data-theme="dark"] .block-border, html[data-theme="dark"] .top-border, html[data-theme="dark"] .bottom-border, html[data-theme="dark"] .x-border { border-color: #334155 !important; } /* ========================================================================== 20. TABLES =========================================================================== */ html[data-theme="dark"] table { color: #e2e8f0 !important; } html[data-theme="dark"] table th { background-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] table td { background-color: #1e293b !important; border-color: #334155 !important; } /* ========================================================================== 21. MODALS & POPUPS =========================================================================== */ html[data-theme="dark"] .white-popup { background-color: #1e293b !important; } html[data-theme="dark"] .mfp-bg { background-color: rgba(0, 0, 0, 0.9) !important; } /* ========================================================================== 22. BRANDS & INTEGRATIONS =========================================================================== */ html[data-theme="dark"] .brands-carousel { background-color: #1e293b !important; } html[data-theme="dark"] .integrations-2 .int-box { background-color: #1e293b !important; } /* ========================================================================== 23. MISC ELEMENTS =========================================================================== */ /* Badge */ html[data-theme="dark"] .badge { color: inherit !important; } /* Selection */ html[data-theme="dark"] ::selection { background-color: #60a5fa !important; color: #0f172a !important; } /* Scrollbar */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; background-color: #1e293b; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #475569; border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #60a5fa; } /* Tra link */ html[data-theme="dark"] .tra-link.color--theme, html[data-theme="dark"] .txt-block-tra-link a { color: #60a5fa !important; } /* ========================================================================== 24. LOGO VISIBILITY =========================================================================== */ /* Header logos */ html[data-theme="dark"] .logo-black, html[data-effective-theme="dark"] .logo-black { display: none !important; } html[data-theme="dark"] .logo-white, html[data-effective-theme="dark"] .logo-white { display: block !important; } html[data-theme="dark"] .wsmainfull.scroll .logo-white, html[data-effective-theme="dark"] .wsmainfull.scroll .logo-white { display: block !important; } html[data-theme="dark"] .wsmainfull.scroll .logo-black, html[data-effective-theme="dark"] .wsmainfull.scroll .logo-black { display: none !important; } /* Footer logos */ html[data-theme="dark"] .footer-logo-light, html[data-effective-theme="dark"] .footer-logo-light { display: none !important; } html[data-theme="dark"] .footer-logo-dark, html[data-effective-theme="dark"] .footer-logo-dark { display: block !important; } /* Footer logo sizing - consistent with light mode */ html[data-theme="dark"] .footer-logo, html[data-effective-theme="dark"] .footer-logo { max-width: 200px !important; height: auto !important; } /* ========================================================================== 25. EFFECTIVE THEME (for system mode) - Additional rules Note: Most rules are now combined with data-theme="dark" selectors above. This section contains additional effective-theme specific rules. =========================================================================== */ /* Scrollbar for effective theme */ html[data-effective-theme="dark"] ::-webkit-scrollbar { width: 8px; background-color: #1e293b; } html[data-effective-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #475569; border-radius: 4px; } html[data-effective-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #60a5fa; } /* Tra link for effective theme */ html[data-effective-theme="dark"] .tra-link.color--theme, html[data-effective-theme="dark"] .txt-block-tra-link a { color: #60a5fa !important; } /* Sub-menu dropdown items for effective theme */ html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { color: #cbd5e1 !important; } html[data-effective-theme="dark"] .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { color: #60a5fa !important; background-color: #334155 !important; } /* Additional selectors for forms and misc elements */ html[data-effective-theme="dark"] .form-control, html[data-effective-theme="dark"] input[type="text"], html[data-effective-theme="dark"] input[type="email"], html[data-effective-theme="dark"] input[type="tel"], html[data-effective-theme="dark"] input[type="number"], html[data-effective-theme="dark"] input[type="password"], html[data-effective-theme="dark"] textarea, html[data-effective-theme="dark"] select { background-color: #334155 !important; border-color: #475569 !important; color: #e2e8f0 !important; } html[data-effective-theme="dark"] .form-control::placeholder, html[data-effective-theme="dark"] input::placeholder, html[data-effective-theme="dark"] textarea::placeholder { color: #94a3b8 !important; } html[data-effective-theme="dark"] label { color: #e2e8f0 !important; } /* Buttons for effective theme */ html[data-effective-theme="dark"] .btn--theme { background-color: #3b82f6 !important; border-color: #3b82f6 !important; } html[data-effective-theme="dark"] .btn--theme:hover { background-color: #2563eb !important; border-color: #2563eb !important; } html[data-effective-theme="dark"] .btn--tra-black { border-color: #475569 !important; color: #e2e8f0 !important; } html[data-effective-theme="dark"] .btn--tra-black:hover { background-color: #334155 !important; border-color: #60a5fa !important; color: #f1f5f9 !important; } /* FAQs section for effective theme */ html[data-effective-theme="dark"] #faqs-3 .question h5 { color: #f1f5f9 !important; } html[data-effective-theme="dark"] #faqs-3 .question p { color: #94a3b8 !important; } html[data-effective-theme="dark"] .more-questions-txt, html[data-effective-theme="dark"] .more-questions-txt.bg--white-400 { background-color: #334155 !important; } html[data-effective-theme="dark"] .more-questions-txt p { color: #cbd5e1 !important; } /* Dividers for effective theme */ html[data-effective-theme="dark"] hr, html[data-effective-theme="dark"] hr.divider { border-color: #334155 !important; opacity: 1 !important; } /* Footer additional rules for effective theme */ html[data-effective-theme="dark"] .footer-copyright p span { color: #94a3b8 !important; } html[data-effective-theme="dark"] .bottom-footer-socials a { color: #94a3b8 !important; } html[data-effective-theme="dark"] .bottom-footer-socials a:hover { color: #60a5fa !important; } html[data-effective-theme="dark"] footer hr { border-color: #1e293b !important; } html[data-effective-theme="dark"] .foo-links li p { color: #94a3b8 !important; } /* Spans for effective theme */ html[data-effective-theme="dark"] span:not([class*="flaticon"]):not(.btn *):not(.badge):not(.theme-icon-light):not(.theme-icon-dark):not(.theme-icon-system):not(.wsarrow):not(.loader) { color: #cbd5e1 !important; } /* Section ID for effective theme */ html[data-effective-theme="dark"] .section-id, html[data-effective-theme="dark"] span.section-id { color: #60a5fa !important; } /* Statistic blocks for effective theme */ html[data-effective-theme="dark"] .statistic-block h2, html[data-effective-theme="dark"] .statistic-block .s-46, html[data-effective-theme="dark"] .statistic-number { color: #f1f5f9 !important; } html[data-effective-theme="dark"] .statistic-block-txt p, html[data-effective-theme="dark"] .statistic-block-txt.color--grey p { color: #94a3b8 !important; } /* Fbox text for effective theme */ html[data-effective-theme="dark"] .fbox-txt h5, html[data-effective-theme="dark"] .fbox-txt h6 { color: #f1f5f9 !important; } html[data-effective-theme="dark"] .fbox-txt p, html[data-effective-theme="dark"] .fbox-12 p { color: #94a3b8 !important; } html[data-effective-theme="dark"] .fbox-img.gr--whitesmoke { background: #334155 !important; } /* Simple list items for effective theme */ html[data-effective-theme="dark"] .list-item, html[data-effective-theme="dark"] ul.simple-list li, html[data-effective-theme="dark"] ol.digit-list li, html[data-effective-theme="dark"] .list--theme li, html[data-effective-theme="dark"] .list--theme li p, html[data-effective-theme="dark"] ul.simple-list li.list-item p, html[data-effective-theme="dark"] .simple-list .list-item p { color: #cbd5e1 !important; }