/* * Lagom 2.2.8 - Dark Mode * Loaded by Lagom after theme.css. * Activated with: */ html[data-lagom-theme="dark"] { color-scheme: dark; /* Base palette */ --body-bg: #0f1217; --gray-base: #c8ced8; --gray-dark: #dfe4eb; --gray-darker: #f3f6fa; --gray-light: #aeb6c2; --gray-lighter: #8e98a7; --gray-lighter-2: #6f7988; --gray-lighter-3: #39424e; --gray-lighter-4: #2a323d; --gray-faded: #181d24; --gray-icons: #8994a5; --gray-icons-hover: #6da4ff; /* Text */ --text-body-color: #c8ced8; --text-heading-color: #f3f6fa; --text-lighter-color: #929cab; --text-faded-color: #707a89; /* Main UI surfaces */ --ui-block-bg: #171c23; --ui-block-bg-form: #12171d; --ui-block-header-bg: #1c222b; --ui-block-border-color: #2a323d; --ui-block-border: 1px solid #2a323d; --ui-block-divider-color: #2a323d; --ui-block-divider-border: 1px solid #2a323d; --ui-block-overlay-bg: rgba(15, 18, 23, .82); --ui-block-overlay-bg-2: #171c23; --ui-block-link-hover-bg: rgba(16, 98, 254, .14); --ui-block-link-active-bg: rgba(16, 98, 254, .20); /* Navigation */ --ui-nav-link-color: #d9dee7; --ui-nav-link-hover-color: #72a7ff; --ui-nav-link-active-color: #72a7ff; --ui-nav-link-active-bg: rgba(16, 98, 254, .18); --ui-nav-link-icon-color: #8994a5; --ui-nav-link-icon-hover-color: #72a7ff; --ui-nav-link-icon-active-color: #72a7ff; --app-nav-top-bg: #151a21; --app-nav-navbar-bg: #151a21; --app-nav-top-border-bottom: 1px solid #2a323d; --app-nav-left-bg: #151a21; --mob-app-nav-bg: #151a21; --mob-app-nav-header-bg: #151a21; --mob-app-nav-header-border-bottom: 1px solid #2a323d; /* Footer */ --main-footer-bg: #151a21; --main-footer-border-top: 1px solid #2a323d; --main-footer-box-shadow: none; --main-footer-link-color: #aeb6c2; --main-footer-link-hover-color: #72a7ff; --main-footer-link-icon-color: #8994a5; --main-footer-link-icon-hover-color: #72a7ff; --main-footer-extended-title-color: #f3f6fa; --main-footer-extended-desc-color: #c8ced8; /* Forms */ --input-bg: #11161c; --input-hover-bg: #141a21; --input-focus-bg: #141a21; --input-disabled-bg: #1a2028; --input-color: #eef2f7; --input-hover-color: #f3f6fa; --input-focus-color: #f3f6fa; --input-disabled-color: #8e98a7; --input-color-placeholder: #737e8d; --input-hover-placeholder-color: #7f8998; --input-focus-placeholder-color: #7f8998; --input-disabled-color-placeholder: #626c79; --input-label-color: #c8ced8; --input-border-color: #343d49; --input-hover-border-color: #4a5665; --input-disabled-border-color: #2a323d; --input-group-addon-bg: #202731; --select-option-bg: #171c23; --select-option-color: #c8ced8; /* Dropdowns, modals, tooltips */ --dropdown-bg: #1a2028; --dropdown-border: 1px solid #303945; --dropdown-divider-bg: #2a323d; --dropdown-header-color: #aeb6c2; --dropdown-link-color: #d9dee7; --tooltip-bg: #232a34; --tooltip-color: #f3f6fa; --popover-bg: #1a2028; --popover-body-color: #c8ced8; --popover-border-color: #303945; --popover-title-bg: #202731; --modal-content-bg: #171c23; --modal-content-border-color: #303945; /* Tables and misc blocks */ --table-bg-accent: #1a2028; --table-border-color: #2a323d; --table-caption-color: #8e98a7; --table-td-font-color: #e5e9ef; --table-th-font-color: #aeb6c2; --well-bg: #181d24; --well-border: #2a323d; --list-group-bg: #171c23; --list-group-border: 1px solid #2a323d; /* Default buttons / pagination */ --btn-default-bg: #1a2028; --btn-default-color: #dce1e8; --btn-default-border: #36404c; --btn-default-hover-bg: #222a34; --btn-default-hover-color: #f3f6fa; --btn-default-hover-border: #4a5665; --btn-default-active-bg: #29323d; --btn-default-active-border: #526071; /* Status colors tuned for dark surfaces */ --state-success-bg: rgba(54, 192, 85, .14); --state-success-border: rgba(112, 215, 134, .32); --state-success-text: #7ddd92; --state-info-bg: rgba(16, 98, 254, .15); --state-info-border: rgba(98, 152, 254, .34); --state-info-text: #7eaeff; --state-warning-bg: rgba(255, 170, 0, .13); --state-warning-border: rgba(255, 197, 82, .32); --state-warning-text: #ffc85b; --state-danger-bg: rgba(217, 38, 50, .15); --state-danger-border: rgba(229, 108, 116, .34); --state-danger-text: #f08088; /* Shadows */ --box-shadow-sm: 0 2px 16px rgba(0, 0, 0, .24); --box-shadow-base: 0 4px 24px rgba(0, 0, 0, .28); --box-shadow-lg: 0 8px 32px rgba(0, 0, 0, .34); --box-shadow-xlg: 0 16px 40px rgba(0, 0, 0, .42); } /* Hard-coded light surfaces that are not fully variable-driven in Lagom 2.2.8 */ html[data-lagom-theme="dark"] body, html[data-lagom-theme="dark"] .app-main, html[data-lagom-theme="dark"] .main-body { background-color: var(--body-bg); color: var(--text-body-color); } html[data-lagom-theme="dark"] .dropdown-menu, html[data-lagom-theme="dark"] .modal-content, html[data-lagom-theme="dark"] .popover, html[data-lagom-theme="dark"] .panel, html[data-lagom-theme="dark"] .card, html[data-lagom-theme="dark"] .list-group-item, html[data-lagom-theme="dark"] .table-container { color: var(--text-body-color); } html[data-lagom-theme="dark"] select, html[data-lagom-theme="dark"] option { background-color: var(--select-option-bg); color: var(--select-option-color); } html[data-lagom-theme="dark"] input:-webkit-autofill, html[data-lagom-theme="dark"] input:-webkit-autofill:hover, html[data-lagom-theme="dark"] input:-webkit-autofill:focus { -webkit-text-fill-color: var(--input-color); -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset; transition: background-color 9999s ease-out 0s; } /* Footer: Lagom 2.2.8 keeps --main-footer-bg hard-coded to white by default. */ html[data-lagom-theme="dark"] .main-footer { background-color: var(--main-footer-bg); color: var(--text-body-color); } html[data-lagom-theme="dark"] .main-footer .footer-bottom { border-top: var(--main-footer-border-top); } html[data-lagom-theme="dark"] .main-footer .footer-copyright, html[data-lagom-theme="dark"] .main-footer .footer-bottom p { color: #8e98a7; } html[data-lagom-theme="dark"] .main-footer .footer-nav > li > a { color: var(--main-footer-link-color); } html[data-lagom-theme="dark"] .main-footer .footer-nav > li > a:hover, html[data-lagom-theme="dark"] .main-footer .footer-nav > li > a:focus { color: var(--main-footer-link-hover-color); } /* Native theme picker injected into .top-nav */ .lagom-darkmode-menu .lagom-theme-check { float: right; margin-left: 16px; opacity: 0; } .lagom-darkmode-menu [data-lagom-theme-value].is-active .lagom-theme-check { opacity: 1; } .lagom-darkmode-menu [data-lagom-theme-value] i { width: 18px; margin-right: 8px; text-align: center; } /* Prevent a white flash while dark mode is being resolved in . */ html[data-lagom-theme="dark"] { background: #0f1217; } /* ======================================================================== * v4 - Shopping cart / checkout dark surfaces (Lagom 2.2.8) * Scoped to shopping-cart pages so primary/secondary brand blocks on the * homepage keep their original Lagom gradients. * ======================================================================== */ html[data-lagom-theme="dark"] body.page-order { /* Lagom uses these palettes for summary/sidebar blocks in the order flow. */ --primary-block-bg: #171c23; --primary-block-bg-h: #171c23; --primary-block-border: 1px solid #2a323d; --primary-block-title-color: #f3f6fa; --primary-block-text-color: #c8ced8; --primary-block-text-faded-color: #929cab; --primary-block-total-font-color: #f3f6fa; --primary-block-total-text-font-color: #c8ced8; --primary-block-divider-color: #2a323d; --primary-block-input-bg: #11161c; --primary-block-input-border: #343d49; --primary-block-input-color: #eef2f7; --primary-block-input-placeholder-color: #737e8d; --primary-block-input-caret-color: #8994a5; --secondary-block-bg: #171c23; --secondary-block-bg-h: #171c23; --secondary-block-border: 1px solid #2a323d; --secondary-block-title-color: #f3f6fa; --secondary-block-text-color: #c8ced8; --secondary-block-text-faded-color: #929cab; --secondary-block-total-font-color: #f3f6fa; --secondary-block-total-text-font-color: #c8ced8; --secondary-block-divider-color: #2a323d; --secondary-block-input-bg: #11161c; --secondary-block-input-border: #343d49; --secondary-block-input-color: #eef2f7; --secondary-block-input-placeholder-color: #737e8d; } /* Cart panels and order-summary cards. */ html[data-lagom-theme="dark"] .panel-cart, html[data-lagom-theme="dark"] .panel-summary, html[data-lagom-theme="dark"] .order-summary-mob, html[data-lagom-theme="dark"] .summary-container, html[data-lagom-theme="dark"] .cart-body, html[data-lagom-theme="dark"] .checkout-container { color: var(--text-body-color); } html[data-lagom-theme="dark"] .panel-summary, html[data-lagom-theme="dark"] .panel-summary-primary, html[data-lagom-theme="dark"] .panel-summary-secondary { background: #171c23 !important; border: 1px solid #2a323d !important; box-shadow: var(--box-shadow-base); } html[data-lagom-theme="dark"] .panel-summary .panel-heading, html[data-lagom-theme="dark"] .panel-summary-primary .panel-heading, html[data-lagom-theme="dark"] .panel-summary-secondary .panel-heading { background: #1c222b !important; border-color: #2a323d !important; color: #f3f6fa !important; } html[data-lagom-theme="dark"] .panel-summary .panel-heading .panel-title, html[data-lagom-theme="dark"] .panel-summary .panel-title, html[data-lagom-theme="dark"] .panel-summary .price, html[data-lagom-theme="dark"] .panel-summary .price .price-title, html[data-lagom-theme="dark"] .panel-summary .price .price-total, html[data-lagom-theme="dark"] .panel-summary strong, html[data-lagom-theme="dark"] .summary-list .list-item-main { color: #f3f6fa !important; } html[data-lagom-theme="dark"] .panel-summary .panel-body, html[data-lagom-theme="dark"] .panel-summary .panel-footer, html[data-lagom-theme="dark"] .panel-summary .list-group, html[data-lagom-theme="dark"] .panel-summary .list-group-item, html[data-lagom-theme="dark"] .panel-summary #producttotal, html[data-lagom-theme="dark"] .panel-summary .summary-container, html[data-lagom-theme="dark"] .panel-summary .summary-content { background: #171c23 !important; color: #c8ced8 !important; border-color: #2a323d !important; } html[data-lagom-theme="dark"] .panel-summary .list-item, html[data-lagom-theme="dark"] .panel-summary .list-item-title, html[data-lagom-theme="dark"] .panel-summary .item-name, html[data-lagom-theme="dark"] .panel-summary .item-value, html[data-lagom-theme="dark"] .panel-summary .price-subtitle, html[data-lagom-theme="dark"] .panel-summary small, html[data-lagom-theme="dark"] .summary-list .list-item.faded { color: #aeb6c2 !important; } html[data-lagom-theme="dark"] .panel-summary .panel-footer:after, html[data-lagom-theme="dark"] .panel-summary .summary-total + .summary-content, html[data-lagom-theme="dark"] .panel-summary .summary-list, html[data-lagom-theme="dark"] .panel-summary .list-group-item:not(:last-child) { border-color: #2a323d !important; background-color: #2a323d; } /* Inputs/selects used by cart, promo code and checkout. */ html[data-lagom-theme="dark"] .main-content .form-control, html[data-lagom-theme="dark"] .main-content select.form-control, html[data-lagom-theme="dark"] .main-content textarea.form-control, html[data-lagom-theme="dark"] .main-content .input-group-addon, html[data-lagom-theme="dark"] .main-content .bootstrap-select > .dropdown-toggle, html[data-lagom-theme="dark"] .main-content .selectize-input, html[data-lagom-theme="dark"] .main-content .select2-selection { background: #11161c !important; color: #eef2f7 !important; border-color: #343d49 !important; box-shadow: none !important; } html[data-lagom-theme="dark"] .main-content .form-control:focus, html[data-lagom-theme="dark"] .main-content .bootstrap-select.open > .dropdown-toggle, html[data-lagom-theme="dark"] .main-content .bootstrap-select > .dropdown-toggle:focus { background: #141a21 !important; color: #f3f6fa !important; border-color: #4a5665 !important; } html[data-lagom-theme="dark"] .main-content .form-control::placeholder, html[data-lagom-theme="dark"] .main-content input::placeholder, html[data-lagom-theme="dark"] .main-content textarea::placeholder { color: #737e8d !important; opacity: 1; } /* "Ver Carrito" and similar dropdown buttons. */ html[data-lagom-theme="dark"] .main-content .btn-default, html[data-lagom-theme="dark"] .main-content .dropdown-toggle.btn-default, html[data-lagom-theme="dark"] .main-content .bootstrap-select > .dropdown-toggle { background: #1a2028 !important; color: #dce1e8 !important; border-color: #36404c !important; } html[data-lagom-theme="dark"] .main-content .btn-default:hover, html[data-lagom-theme="dark"] .main-content .btn-default:focus, html[data-lagom-theme="dark"] .main-content .open > .btn-default.dropdown-toggle { background: #222a34 !important; color: #f3f6fa !important; border-color: #4a5665 !important; } /* Promotion / coupon area. */ html[data-lagom-theme="dark"] .promo-code, html[data-lagom-theme="dark"] .promo-box, html[data-lagom-theme="dark"] .promo-box-content, html[data-lagom-theme="dark"] .promotion-code, html[data-lagom-theme="dark"] .promotion-code-container, html[data-lagom-theme="dark"] .promo-code-container, html[data-lagom-theme="dark"] .promo-code-form { background-color: #171c23 !important; color: #c8ced8 !important; border-color: #2a323d !important; } html[data-lagom-theme="dark"] .promo-code-description, html[data-lagom-theme="dark"] .promo-code label, html[data-lagom-theme="dark"] .promo-box label { color: #dfe4eb !important; } /* Checkout/payment panels contain a few hard-coded light states in 2.2.8. */ html[data-lagom-theme="dark"] .panel-collapse-custom, html[data-lagom-theme="dark"] .panel-payment-method, html[data-lagom-theme="dark"] .panel-collapse-custom .panel-body, html[data-lagom-theme="dark"] .panel-payment-method .panel-body { background: #171c23 !important; color: #c8ced8 !important; border-color: #2a323d !important; } html[data-lagom-theme="dark"] .panel-collapse-custom .panel-body + .panel-body, html[data-lagom-theme="dark"] .panel-payment-method .panel-body + .panel-body { border-top-color: #2a323d !important; } html[data-lagom-theme="dark"] .panel-collapse-custom .panel-body .radio-styled.checked + span, html[data-lagom-theme="dark"] .panel-payment-method .panel-body .radio-styled.checked + span { color: #f3f6fa !important; } html[data-lagom-theme="dark"] [data-collapse] .progress { background-color: #242c36 !important; } html[data-lagom-theme="dark"] [data-collapse] .panel-body.is-active { background-color: #1c232c !important; border-color: var(--btn-primary-bg) !important; } /* Generic light panels inside the ordering flow that bypass Lagom variables. */ html[data-lagom-theme="dark"] .main-content .panel:not(.panel-primary):not(.panel-success):not(.panel-warning):not(.panel-danger):not(.panel-info) > .panel-body, html[data-lagom-theme="dark"] .main-content .panel:not(.panel-primary):not(.panel-success):not(.panel-warning):not(.panel-danger):not(.panel-info) > .panel-footer { background-color: #171c23; color: #c8ced8; border-color: #2a323d; } /* Keep deliberate CTA colors intact while removing white cart backgrounds. */ html[data-lagom-theme="dark"] .panel-cart .cart-item, html[data-lagom-theme="dark"] .panel-cart .cart-item-body, html[data-lagom-theme="dark"] .panel-cart .cart-item-content, html[data-lagom-theme="dark"] .panel-cart .prod-desc, html[data-lagom-theme="dark"] .panel-cart .prod-name, html[data-lagom-theme="dark"] .panel-cart .prod-price, html[data-lagom-theme="dark"] .panel-cart .prod-qty { color: #c8ced8; border-color: #2a323d !important; } /* WHMCS standard-cart compatibility if a page/module falls back to it. */ html[data-lagom-theme="dark"] #order-standard_cart .view-cart-items, html[data-lagom-theme="dark"] #order-standard_cart .view-cart-tabs, html[data-lagom-theme="dark"] #order-standard_cart .summary-container, html[data-lagom-theme="dark"] #order-standard_cart .order-summary, html[data-lagom-theme="dark"] #order-standard_cart .promo-code-form { background: #171c23 !important; color: #c8ced8 !important; border-color: #2a323d !important; } /* ======================================================================== * v5 - Promotion code tabs/panel on View Cart (Lagom 2.2.8) * The legacy cart keeps the tab header and tab-content background white. * Scope stays on order pages only, so homepage brand banners are untouched. * ======================================================================== */ html[data-lagom-theme="dark"] body.page-order .main-content .tabbable, html[data-lagom-theme="dark"] body.page-order .main-content .tabs-container, html[data-lagom-theme="dark"] body.page-order .main-content .tab-content { background-color: #171c23 !important; color: #c8ced8 !important; border-color: #2a323d !important; } html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs { background-color: transparent !important; border-color: #2a323d !important; } html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > li > a, html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > .nav-item > .nav-link { background-color: #171c23 !important; color: #aeb6c2 !important; border-color: #2a323d !important; } html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > li.active > a, html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > li.active > a:hover, html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > li.active > a:focus, html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > .nav-item > .nav-link.active { background-color: #171c23 !important; color: #62a4ff !important; border-color: #2a323d !important; border-bottom-color: #18a8e8 !important; } html[data-lagom-theme="dark"] body.page-order .main-content .tab-pane, html[data-lagom-theme="dark"] body.page-order .main-content .tab-content > .active { background-color: #171c23 !important; color: #c8ced8 !important; } /* Promo-specific wrappers used by different Lagom/WHMCS cart variants. */ html[data-lagom-theme="dark"] body.page-order .main-content .promo-code-wrapper, html[data-lagom-theme="dark"] body.page-order .main-content .promo-code-box, html[data-lagom-theme="dark"] body.page-order .main-content .promo-code-section, html[data-lagom-theme="dark"] body.page-order .main-content .promotion-code-wrapper, html[data-lagom-theme="dark"] body.page-order .main-content .promotion-code-box, html[data-lagom-theme="dark"] body.page-order .main-content .panel-body:has(.promo-code), html[data-lagom-theme="dark"] body.page-order .main-content .well:has(.promo-code), html[data-lagom-theme="dark"] body.page-order .main-content .tab-pane:has(.promo-code), html[data-lagom-theme="dark"] body.page-order .main-content .tab-content:has(.promo-code) { background-color: #171c23 !important; color: #c8ced8 !important; border-color: #2a323d !important; box-shadow: none !important; } /* Preserve the blue accent line of the promotion tab. */ html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > li.active > a:after, html[data-lagom-theme="dark"] body.page-order .main-content .nav-tabs > .nav-item > .nav-link.active:after { background-color: #18a8e8 !important; }