/* ============================================================ Xetiko LIGHT theme — frontend + trade surfaces. Additive layer: only applies when . Dark mode is left completely untouched. Loaded via layouts/app.blade.php (frontend, auth, trade pages). `html.theme-light` (element+class) wins over the template's `[data-theme="light"]` (attribute) dark token block. ============================================================ */ html.theme-light { color-scheme: light; /* ---- shared design tokens (frontend css/main.css) ---- */ --white: 0 0% 100%; --static-white: 0 0% 100%; --light-h: 222; --light-s: 12%; --light-l: 34%; --light: var(--light-h) var(--light-s) var(--light-l); --light-two: 222 10% 46%; --black-h: 222; --black-s: 24%; --black-l: 14%; --black: var(--black-h) var(--black-s) var(--black-l); --static-black: 0 0% 0%; --heading-color: var(--black); --body-color: var(--light); --border-color: 214 22% 88%; --body-background: 210 33% 98%; --section-bg: 210 28% 96%; --section-bg-two: 210 28% 96%; --footer-bg: 213 27% 12%; --header-box-shadow: 0px 2px 14px rgba(20, 30, 60, 0.08); --mobile-box-shadow: 0px -1px 10px rgba(20, 30, 60, 0.08); --box-shadow: 0px 4px 18px rgba(20, 30, 60, 0.08); --box-shadow-two: 0px 4px 18px rgba(20, 30, 60, 0.08); --box-shadow-three: 0px 4px 10px rgba(20, 30, 60, 0.06); --bg_advantages: linear-gradient(180deg, #ffffff, #eef3fb) border-box; } /* Header / surfaces that may carry hardcoded dark in custom work */ html.theme-light .header { background-color: hsl(0 0% 100% / 0.92); } /* Generic dark tooltip popups stay readable (already light-on-dark) */ /* Cookie consent card (hardcoded in custom.css) */ html.theme-light .cookies-card { background: hsl(var(--section-bg)); color: hsl(var(--black)); } html.theme-light .cookies-card p { color: hsl(var(--black) / 0.75) !important; } /* ============================================================ Custom dark landing page (home.blade.php). The page is scoped-variable driven (.vomo-landing{--bg/--card/--line/ --tx/--mut}). Flip those for a clean light surface, but KEEP the hero terminal + device mockups dark (intentional premium look), then fix the few hardcoded light-gray / white page-level text + surfaces. ============================================================ */ html.theme-light .vomo-landing { --bg: #f5f7fc; --bg2: #eef2f9; --card: rgba(15, 24, 48, 0.035); --line: rgba(15, 24, 48, 0.10); --tx: #0f1830; --mut: #5b6678; } /* Re-assert dark tokens inside the chart terminal + device mockups so they stay dark even on the light page. */ html.theme-light .vomo-landing .vl-hero__terminal, html.theme-light .vomo-landing .vl-mock--desktop, html.theme-light .vomo-landing .vl-mock--phone { --card: rgba(255, 255, 255, 0.035); --line: rgba(255, 255, 255, 0.07); --tx: #e7ecf5; --mut: #8a93a6; } /* Page-level hardcoded white/grey text → dark for contrast on light bg */ html.theme-light .vomo-landing .vl-trust b, html.theme-light .vomo-landing .vl-stat b { color: #0f1830; } html.theme-light .vomo-landing .vl-pay, html.theme-light .vomo-landing .vl-checks li { color: #2c3650; } html.theme-light .vomo-landing .vl-cta__risk { color: #6b7488; } /* Page-level hardcoded translucent-white surfaces → subtle dark tint */ html.theme-light .vomo-landing .vl-pay { background: rgba(15, 24, 48, 0.03); } html.theme-light .vomo-landing .vl-btn--ghost { background: rgba(15, 24, 48, 0.05); color: var(--tx); } html.theme-light .vomo-landing .vl-btn--ghost:hover { background: rgba(15, 24, 48, 0.09); color: #0f1830; } /* Faint grid backdrop: make lines visible on light */ html.theme-light .vomo-landing .vl-grid-bg { background-image: linear-gradient(rgba(15, 24, 48, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 24, 48, 0.045) 1px, transparent 1px); } /* Ticker row hardcoded faint-white wash → light-safe */ html.theme-light .vomo-landing .vl-ticker { background: rgba(15, 24, 48, 0.015); } /* ============================================================ Binary trade page (binary-trade.css is token-driven, so the token overrides above re-theme most of it). Spot fixes below. ============================================================ */ /* The trade page panel UI is driven by its own --vx-* tokens (defined on :root in trade.blade.php). Flip them for light. The chart canvas itself is themed in JS (xe:themechange). */ html.theme-light { --vx-panel: #ffffff; --vx-panel-2: #f1f4fa; --vx-line: #e0e6f0; --vx-text: #1d2740; --vx-muted: #5b6678; } /* Hardcoded white text on now-light panel surfaces → dark for contrast. (Elements that sit on coloured blue/green/red buttons keep their white.) */ html.theme-light .vx-bal__value, html.theme-light .vx-payout__row b, html.theme-light .vx-pos__cd, html.theme-light .vx-result__amt, html.theme-light .trade-section__right .trade-amount input, html.theme-light .trade-section__right .trade-amount .trade-amount__value { color: var(--vx-text) !important; } html.theme-light .vx-bal__value.vx-up, html.theme-light .vx-bal__value.vx-down { color: inherit; } /* Balance count-up keyframes settle to #fff — keep them readable on light */ html.theme-light .vx-bal__value { animation: none !important; } /* Soft page backdrop behind the trade panels */ html.theme-light .trade-section__left::before { background: radial-gradient(circle at 50% 45%, rgba(0, 102, 255, .05), transparent 60%); } html.theme-light .vx-skel, html.theme-light .vx-skel__inner { background: #eef2f9; }