/* ========================================================================== MarvinXR — Day (light) theme Loaded after style.css. Dark stays the default; adding data-theme="light" on (persisted in localStorage "mxr_theme", toggled by the sun/moon button in the header) remaps the palette. Same pattern as OmniCirqle. ========================================================================== */ html[data-theme="light"] { /* palette remap — every component styled via variables flips automatically */ --cardBg: #ffffff; --secondary: #c7cbe0; --bs-body-bg: #eef0f6; --thirdColor: #e8eaf4; --fourthColor: #ffffff; --textAltColor: #6b7089; --lightColor: #23253a; } /* ---- layout chrome (hardcoded dark colors in style.css) ------------------ */ html[data-theme="light"] .header-layout { background-color: rgba(255, 255, 255, 0.82); box-shadow: 0 0.125rem 0.375rem rgba(35, 37, 58, 0.12); } html[data-theme="light"] .pricing-section .pricing-stat .stat-card { background-color: #ffffff; box-shadow: 0 0.125rem 0.375rem rgba(35, 37, 58, 0.12); } html[data-theme="light"] .sec-profile .information-inner .information-content, html[data-theme="light"] .card-info-list, html[data-theme="light"] .sec-order-details, html[data-theme="light"] .add-card-part .form-card { background-color: #ffffff; box-shadow: 0 0.125rem 0.375rem rgba(35, 37, 58, 0.12); } html[data-theme="light"] .aside-layout, html[data-theme="light"] .dashboard-section .world-wide-view { box-shadow: 0 0.125rem 0.375rem rgba(35, 37, 58, 0.10); } html[data-theme="light"] .brand-logo { border-bottom: rgba(35, 37, 58, 0.08) 1px solid; } /* ---- text that is hardcoded #fff/white in style.css ----------------------- */ html[data-theme="light"] .side-panel .side-menu .menu-link .link-text, html[data-theme="light"] .side-panel .user-menu .menu-link .text, html[data-theme="light"] .side-panel .user-menu .user-menu-heading, html[data-theme="light"] .header-layout .right-menu .wallet-balance .money, html[data-theme="light"] .header-layout .right-menu .wallet-balance .money-text, html[data-theme="light"] .header-layout .user-menu .dropdown-toggle .title span, html[data-theme="light"] .sec-template .template-inner .listing-title { color: #23253a; } html[data-theme="light"] .side-panel .side-menu .menu-link .link-icon, html[data-theme="light"] .side-panel .user-menu .menu-link .icon { color: #4a4e69; } html[data-theme="light"] .side-panel .user-menu .user-menu-heading { border-top: rgba(35, 37, 58, 0.08) 1px solid; } /* active/hover menu items keep the brand pink; their icon chip stays legible */ html[data-theme="light"] .side-panel .side-menu .menu-link.active .link-icon, html[data-theme="light"] .side-panel .side-menu .menu-link:hover .link-icon { color: #ffffff; } html[data-theme="light"] .side-panel .side-menu .menu-link.active .link-text, html[data-theme="light"] .side-panel .side-menu .menu-link:hover .link-text { color: #23253a; } /* dropdowns (bg flips to white via --fourthColor); keep item text readable */ html[data-theme="light"] .header-layout .user-menu .dropdown-menu { box-shadow: rgba(35, 37, 58, 0.15) 0 2px 20px; } html[data-theme="light"] .header-layout .user-menu .dropdown-menu .user-menu-item { color: #4a4e69; } /* scrollbar + selection */ html[data-theme="light"] ::selection { background-color: var(--primaryColor); color: #fff; } /* ---- AR campaign cards --------------------------------------------------- */ /* Cards are now a plain var(--cardBg) surface (style.css) that already themes correctly -- no per-theme override needed. (Previously a photo background + frosted-glass blur/saturate that read as garish/eye-straining in light mode; replaced 2026-07-30 with a flat card + thin AR-type accent border.) */ /* section titles around the cards use var(--white) in style.css */ html[data-theme="light"] .campaign-segment .add-campaign .title, html[data-theme="light"] .template-example .title, html[data-theme="light"] .main-title { color: #23253a; } html[data-theme="light"] .campaign-segment .add-campaign .add-new-campaign .add-new, html[data-theme="light"] .next_prev-btn { color: var(--primaryColor); } /* AR-type accent colors: darkened for contrast on bright glass */ html[data-theme="light"] { --surfaceColor: #2e9500; --eyeTrackingColor: #9c8f00; --locationColor: #d63400; --imageColor: #c07c08; --markerColor: #1f7fc4; } /* ---- global sweep: white text (non-button) → dark ink in light mode ------- */ /* Buttons keep their white text (they sit on colored backgrounds). */ /* form labels */ html[data-theme="light"] .control-label, html[data-theme="light"] .color-label, html[data-theme="light"] .select2-container--default .select2-selection--multiple .select2-selection__rendered, /* section / card / modal titles */ html[data-theme="light"] .sec-order-details .order-details-body .title, html[data-theme="light"] .sec-order-details .order-details-body .order-details-title, html[data-theme="light"] .card-info-list .inner-header .header-tilte, html[data-theme="light"] .add-card-part .form-card .card-item .title, html[data-theme="light"] .sec-profile .information-inner .title, html[data-theme="light"] .modal-body .select-ar-section .ar-title, html[data-theme="light"] .modal-body .campaign-info .title, html[data-theme="light"] .ar-type-select .sub-title, html[data-theme="light"] .pricing-section .title-part, /* data / value texts */ html[data-theme="light"] .sec-order-details .order-details-body .order-details-item .payment-details .payment-info .data-row .data, html[data-theme="light"] .sec-order-details .invoice-details .invoice-text span, html[data-theme="light"] .order-number, html[data-theme="light"] .sec-order-details .invoice-amount .amount-price, html[data-theme="light"] .card-info-list .card-list .card-wrap .data, html[data-theme="light"] .pricing-section .pricing-list .pricing-feature .pricing-rate, html[data-theme="light"] .pricing-section .pricing-list .package-feature ul li .price-text, /* text-style links & misc */ html[data-theme="light"] .pricing-section .pricing-stat .stat-card .stat-detail, html[data-theme="light"] .footer-layout .footer-copyright, html[data-theme="light"] .footer-layout .footer-socials .social-list .link.join-community, html[data-theme="light"] .ar-show-section .sub-title { color: #23253a; } html[data-theme="light"] .payment-input-label { color: #23253a !important; /* source rule uses !important */ } /* transparent inputs with white text/border (auth & payment forms) */ html[data-theme="light"] .authentication-content .form-content .form-control { color: #23253a; border: 1px solid rgba(35, 37, 58, 0.28); } /* inline-styled white text in templates (help links in modals, upgrade notices, footer copyright). Buttons are excluded — anchors inside buttons stay white. */ html[data-theme="light"] a[style*="color: #FFFFFF"]:not(button a), html[data-theme="light"] a[style*="color: white"]:not(button a), html[data-theme="light"] a[style*="color: #F0F0F0"]:not(button a), html[data-theme="light"] p[style*="color: white"], html[data-theme="light"] p[style*="color: #FFFFFF"], html[data-theme="light"] span[style*="color: white"], html[data-theme="light"] span[style*="color: #FFFFFF"] { color: #23253a !important; } /* ---- theme toggle button -------------------------------------------------- */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--textAltColor); font-size: 18px; padding: 8px 10px; margin-right: 14px; border-radius: 8px; display: flex; align-items: center; transition: color .2s ease, background .2s ease; } .theme-toggle:hover { color: var(--primaryColor); background: rgba(128, 128, 160, 0.12); } .theme-toggle:focus { outline: none; }